/* MERINO MERLIN micro-site v6 — responsive.css
   Every top-level @media / @container rule moved out of style.css, same relative order.
   Generated by src/build.py — edit the sources, not this file. */

/* ═══ base.html — tokens, base, components, nav ═══ */
@media (min-width:1100px){ :root{ --nav-h:72px; } }

/* smooth in-page scrolling only after the load-time fragment landing (html.mm-smooth is added two frames after
   load), so a direct load of #request / #poc / #faq jumps once instead of streaking through the page */
@media (prefers-reduced-motion:no-preference){html.mm-smooth{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}
@media (min-width:1100px){.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}}
/* short desktop windows (1366 × 657, 1536 × 730): the hero H1 is capped at 11.5vh, so section heads cap at 9.5vh to
   keep H1 : H2 ≈ 1.2. Self-limiting: min() only bites where 9.5vh < --fs-h2, so 1280 × 720 and 1366 × 768 are unchanged. */
@media (min-width:1100px) and (max-height:800px){.h-section:not(.h-section--compact){font-size:min(var(--fs-h2),9.5vh)}}
@media (max-width:389.98px){.btn:not(.btn-sm){padding:0 18px;font-size:15px}}   /* keeps "See MERINO MERLIN on Your Data" + arrow on one line at 360 */
@media (max-width:559.98px){.cta-row{flex-direction:column;align-items:stretch}.cta-row>.btn{width:100%}}
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]:not([data-reveal="words"]):not([data-reveal="stagger"]):not([data-reveal="rule"]):not(.is-in){opacity:0;transform:translate3d(0,16px,0)}
  .js [data-reveal]:not([data-reveal="words"]):not([data-reveal="stagger"]):not([data-reveal="rule"]).is-in{opacity:1;transform:none;
    transition:opacity var(--d-settle) var(--ease-settle),transform var(--d-reveal) var(--ease-arrive);transition-delay:calc(var(--i,0)*var(--d-stagger))}
  .js [data-reveal="words"]:not([data-mm-words]){opacity:0}      /* no flash before MM.words() wraps it */
  .js [data-reveal="words"]:not(.is-in) .mm-wi{transform:translate3d(0,108%,0)}
  .mm-wi{display:inline-block;transition:transform var(--d-arrive) var(--ease-arrive);transition-delay:calc(var(--wi,0)*var(--d-word) + var(--delay,0ms))}
  .js [data-reveal="rule"]{transform-origin:0 50%}
  .js [data-reveal="rule"]:not(.is-in){transform:scaleX(0)}
  .js [data-reveal="rule"].is-in{transform:none;transition:transform 1000ms var(--ease-draw);transition-delay:var(--delay,0ms)}
  .js [data-reveal="stagger"]:not(.is-in) [data-reveal-item]{opacity:0;transform:translate3d(0,16px,0)}
  .js [data-reveal="stagger"].is-in [data-reveal-item]{opacity:1;transform:none;
    transition:opacity var(--d-settle) var(--ease-settle),transform var(--d-reveal) var(--ease-arrive);transition-delay:calc(var(--i,0)*var(--d-stagger))}
}
@media (max-width:1099.98px){.nav__brand,.nav__logo{height:34px}}
@media (min-width:1100px){
  .nav__links{display:block}
  .nav__cta{display:inline-flex}
  .nav__menu,.menu{display:none}
}
@media (min-width:1100px){.no-js .nav__cta{margin-left:12px}}

/* ── reduced motion (final states; no loops) ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .caret,.drift{animation:none!important}
  .nav::after,.nav__logo,.menu{transition:none!important}
}

/* ═══ S01 top — 01-hero.html ═══ */
@media (max-width:559.98px){
  #top .top__eyebrow .eyebrow__quiet{display:block}
  #top .top__eb-sep{display:none}
}
/* one row (number + label) needs ≈ 670 px of foot content box; below that the number stacks above the label (1280, 1366) */
@container (max-width:669.98px){
  #top .stage__tab{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;font-size:13px}
}
/* 1100–1279 (foot ≈ 504 px): equal tabs would push "Engineering spec" into its neighbour, so tabs size to their labels */
@container (min-width:480px) and (max-width:539.98px){
  #top .stage__tab{flex:1 1 auto}
}
@container (max-width:479.98px){
  #top .stage__l-long{display:none}
  #top .stage__l-short{display:inline}
  #top .stage__tab{padding:0 8px 4px}
  #top .stage__bar{left:8px;right:8px}
}

@media (max-width:559.98px){
  #top .stage__static .ask-bar{flex-wrap:wrap;row-gap:8px;padding:12px 14px}
  #top .stage__static .ask-bar__q{flex:1 1 180px}
  #top .stage__static .ask-bar>.chip-scope{margin-left:32px}
  #top .stage__static-row{gap:24px}
}
@media (min-width:1100px){
  #top{--top-pl:22px;--top-pt:14px;--top-fx0:var(--top-pl);display:flex;align-items:center;min-height:clamp(680px,100svh,980px)}
  #top .top__grid{grid-template-columns:minmax(0,min(560px,calc(100% - var(--top-gap) - 542px + var(--gutter)))) minmax(0,1fr);
    column-gap:var(--top-gap);align-items:center}
  #top .stage{margin:0 calc(-1 * max(var(--gutter), (100vw - var(--maxw)) / 2)) 0 0;border-radius:var(--r-2xl) 0 0 var(--r-2xl)}
  #top .stage__clip{border-radius:var(--r-2xl) 0 0 0}
  #top .stage__static{padding:26px 40px 24px var(--top-pl)}
}
@media (min-width:1100px) and (max-width:1279.98px){
  #top{--top-gap:32px}
  /* the copy column is ≈ 470 px here: slimmer button insets keep both CTAs on one row */
  #top .top__ctas{column-gap:10px}
  #top .top__ctas .btn{padding-inline:19px}
}
/* short desktop windows (1366 × 657): a tighter foot keeps the whole panel above the fold at the .72 floor */
@media (min-width:1100px) and (max-height:700px){
  #top{--top-pt:10px}
  #top .stage__foot{padding-top:4px;padding-bottom:10px}
  #top .stage__tab{min-height:48px}
}
@media (prefers-reduced-motion:no-preference){
  #top:is(.js *) .stage:not(.is-in){opacity:0;transform:translateX(32px)}
}
@media (prefers-reduced-motion:reduce){
  #top .top-src,#top .top-card,#top .top-card .refusal-card,#top .stage.is-in{transition:none!important}
}

/* ═══ S02 why — 02-why.html ═══ */
/* ── layout ≥ 760 ─────────────────────────────────────────────────────────────────── */
@media (min-width:760px){
  #why .why__keys{max-width:640px}
}

/* ── layout ≥ 1100 ────────────────────────────────────────────────────────────────── */
@media (min-width:1100px){
  #why .why__stmt{width:calc(100% * 11 / 12)}
  #why .why__introGrid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:0}
  #why .why__d5{grid-column:1 / 8;padding-right:24px}
  #why .why__keys{grid-column:8 / 13;max-width:none}
  #why .why__grid>*{grid-column:1 / 7}
  #why .why__grid>.why__side{grid-column:7 / 13;grid-row:1 / span 5;align-self:start;justify-self:end;width:100%;max-width:560px;margin-top:4px}
  #why .why__side.is-pin{position:sticky;top:calc(var(--nav-h) + 40px)}
  #why .why__compare{margin-top:56px}
}
/* 1100–1279: the left column is 483–563 px, so the ledger steps down a size to keep every cell on one line */
@media (min-width:1100px) and (max-width:1279.98px){
  #why .why__cmp th:first-child{width:198px}
  #why .why__cmp td{padding-right:12px}
  #why .why__gen{font-size:15px}
  #why .why__mm{gap:9px;font-size:16px}
  #why .why__mm svg.i{width:17px;height:17px}
}

/* ── layout < 1100: stacked pairs ─────────────────────────────────────────────────── */
@media (max-width:1099.98px){
  #why .why__side{margin-inline:auto;max-width:560px}
  #why .why__cmp,#why .why__cmp tbody,#why .why__cmp tr,#why .why__cmp td{display:block}
  /* stacked pairs: the sr-only prefixes are the only labels, so the head leaves the accessibility tree too */
  #why .why__cmp thead{display:none}
  #why .why__cap{display:block;margin-bottom:8px}
  #why .why__cmp tr{padding:14px 0 12px;border-bottom:1px solid var(--hair)}
  #why .why__cmp td{height:auto;padding:0;border:0}
  #why .why__cmp td+td{margin-top:6px}
  #why .why__gen{font-size:15px}
  #why .why__mm{font-size:16px}
  #why .why__mm svg.i{width:17px;height:17px}
  #why .why__pfx{display:inline;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:559.98px){
  #why .why__d5{font-size:var(--fs-lead)}
}

@media (prefers-reduced-motion:reduce){
  #why .why__src::after,#why .why__gen::after,#why .why__mm,#why .why__win,#why .why__ask,#why .why__ans{transition:none!important}
}

/* ═══ S03 platform — 03-platform.html ═══ */
/* The cards are the stagger reveal's items. An id-level `transition` here would replace the base reveal's opacity +
   transform transition (the base rule is only 0,4,0), so the full list is restated: hover border ≤ 160 ms (§2.5),
   plus the base stagger reveal with its --i delay. */
@media (prefers-reduced-motion:no-preference){
  #platform .plat__card{transition:border-color var(--d-micro) var(--ease-settle),
    opacity var(--d-settle) var(--ease-settle) calc(var(--i,0)*var(--d-stagger)),
    transform var(--d-reveal) var(--ease-arrive) calc(var(--i,0)*var(--d-stagger))}
}
/* The strip is sized off the WELL, not the viewport: the narrow wells sit at 320–375 px AND at 1100–1170 px (three
   columns). At 12.5 px with .55em gaps the one-line strip is ~304 px wide, at 11.5 px with .42em gaps ~270 px.
   Below 340 px of well the gaps tighten; below 294 px (where one line would keep < 12 px of inset, or wrap with an
   arrow starting the second line) "Writes:" takes its own centred line above the four steps. */
@container (max-width:339.98px){
  #platform .plat__writes{column-gap:.42em}
}
@container (max-width:293.98px){
  #platform .plat__wl{flex-basis:100%;text-align:center}
}
@media (hover:hover) and (pointer:fine){
  #platform .plat__card:hover{border-color:var(--line-on-navy-2)}
}
@media (min-width:700px) and (max-width:1099.98px){
  #platform .plat__card{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;
    column-gap:40px;padding:20px 36px 20px 20px}
  #platform .plat__well{grid-column:1;grid-row:1/-1}
  #platform .plat__chip{grid-column:2;grid-row:2;margin-top:0}
  #platform .plat__card h3{grid-column:2;grid-row:3}
  #platform .plat__txt{grid-column:2;grid-row:4}
}
@media (max-width:399.98px),(min-width:1100px) and (max-width:1279.98px){
  #platform .plat__cites{transform:scale(.88);transform-origin:100% 100%}
}
@media (min-width:1100px){
  #platform .plat__cards{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:0}
  #platform .plat__card{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
  /* every pillar title sets on two lines, so chip → title → text keep one rhythm across the row */
  #platform .plat__card h3{max-width:9.6em}
}

/* ── S03b · Key Capabilities (child section, same navy surface) ─────────────────────── */
@media (hover:hover) and (pointer:fine){
  #capabilities .caps__cell:hover .caps__ico{color:var(--white)}
  #capabilities .caps__cell:hover .caps__tag{color:var(--cyan)}
}
@media (max-width:1099.98px){
  #capabilities .caps__cell:last-child{border-bottom:1px solid var(--line-on-navy)}
}
@media (min-width:600px) and (max-width:1099.98px){
  #capabilities .caps__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  #capabilities .caps__cell:nth-last-child(2):nth-child(even){border-bottom:1px solid var(--line-on-navy)}
}
@media (min-width:1100px){
  #capabilities .caps__grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(200px,1fr)}
  #capabilities .caps__cell{padding:32px 28px;border-top:0}
  #capabilities .caps__cell:nth-child(3n+1){padding-left:0}
  #capabilities .caps__cell:nth-child(3n){padding-right:0}
  #capabilities .caps__top{flex-direction:column;align-items:flex-start;gap:18px}
  #capabilities .caps__item{margin-top:16px;font-size:20px;max-width:17em}
  #capabilities .caps__tag{margin-top:auto;padding-top:22px}
  #capabilities .caps__lines{display:block;position:absolute;inset:0;pointer-events:none}
  #capabilities .caps__ln{position:absolute;display:block;background:rgba(185,200,215,.22);
    transition:transform 600ms var(--ease-draw);transition-delay:calc(var(--i,0)*80ms)}
  #capabilities .caps__ln--h{left:0;right:0;top:var(--p);height:1px;transform-origin:0 50%}
  #capabilities .caps__ln--v{top:0;bottom:0;left:var(--p);width:1px;transform-origin:50% 0}
  #capabilities .caps__sheet:not(.is-drawn) .caps__ln--h{transform:scaleX(0)}
  #capabilities .caps__sheet:not(.is-drawn) .caps__ln--v{transform:scaleY(0)}
}
@media (prefers-reduced-motion:reduce){
  #platform .plat__well *,#platform .plat__well *::before,#capabilities .caps__cell,#capabilities .caps__ln{transition:none!important}
}

/* ═══ S04 how — 04-how.html ═══ */
@media (min-width:760px){
  #how .how__legend{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--how-cg)}
  #how .how__legend .illus{grid-column:2}
  #how .how__item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--how-cg);align-items:start}
  #how .how__fig{margin-top:0}
}
@media (max-width:559.98px){
  #how{--how-ind:36px}
  #how .how__t{font-size:21px}
  #how .how__fig{padding:18px 16px}
}

@container how-fig (min-width:520px){
  #how .how__mini--id{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:28px;align-items:start}
  #how .how__mini--scope{grid-template-columns:auto minmax(0,1fr);column-gap:32px;align-items:center}
  #how .how__fig--ev .how__psg{grid-template-columns:168px minmax(0,1fr) auto;padding:0 12px 0 16px;min-height:44px}
  #how .how__fig--ev .how__psg-r,#how .how__fig--ev .how__psg-x{grid-row:1}
  #how .how__fig--ev .how__psg-x{grid-column:2}
  #how .how__fig--ev .how__psg-s{grid-column:3;grid-row:1}
}
@container how-fig (min-width:560px){
  #how .how__mini--ans,#how .how__mini--ref{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--how-fg);row-gap:14px;align-items:center}
  #how .how__mini--ans .how__cap,#how .how__mini--ref .how__cap{grid-column:2;margin-top:0}
}
@container how-fig (min-width:560px){
  #how:where(.no-js *) :is(.how__srcs,.how__mini--ref .how__rq)::after{left:100%;top:50%;width:var(--how-fg);height:1.5px;margin:-.75px 0 0}
}

@media (min-width:1100px){
  /* the canvas is centred in the 100svh sticky (--how-top = its centring offset tY, set by layout()), which leaves an
     empty band of nav + 16 + tY above it and tY + 20 below it. Both bands are taken back from the flow, so the H2 sits
     one --head-gap above the first stage content and the last one sits one --sec-y above How's bottom edge, at every
     viewport height (without this the seams grew with height: H2 → content 236 px, How → Security 487 px at 1920 × 1080).
     The track keeps its 400vh, so the scrub, SETTLE and goTo are unchanged; the head (z 3) stays above the side column's
     empty top band, which now overlaps it. */
  #how.is-pinned .how__head{position:relative;z-index:3;margin-bottom:calc(var(--head-gap) - var(--nav-h) - 16px - var(--how-top, 0px))}
  #how.is-pinned .how__track{height:400vh;margin-bottom:calc(-20px - var(--how-top, 0px))}
  #how.is-pinned .how__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
  #how.is-pinned .how__stage{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:40px;height:100%;
    padding-top:calc(var(--nav-h) + 16px);padding-bottom:20px}
  #how.is-pinned :is(.how__steps,.how__legend){display:none}
  /* the side column's box is empty above and below its steps; on tall screens those empty bands reach over the H2 and
     over the next section's top, so only the steps list takes the pointer */
  #how.is-pinned .how__side{position:relative;z-index:2;min-width:0;padding-top:var(--how-top,0px);pointer-events:none}
  #how.is-pinned .how__nav{pointer-events:auto}
  #how.is-pinned .how__vp{display:block;position:relative;min-width:0;min-height:0}
  #how.is-pinned .how__kick{display:block}
  #how.is-pinned .how__cv-illus{display:block;position:absolute;margin:0;white-space:nowrap}
}
@media (min-width:1100px) and (max-width:1279.98px){
  #how.is-pinned .how__stage{grid-template-columns:260px minmax(0,1fr);column-gap:32px}
}
/* 1100–1199: a 240 px steps column keeps the canvas column ≥ 720 px, so k never drops below .8 AND the canvas never
   overhangs the content edge (at 260 + 32 the column was 698 px and the Outcome zone stuck out 11 px) */
@media (min-width:1100px) and (max-width:1199.98px){
  #how.is-pinned .how__stage{grid-template-columns:240px minmax(0,1fr);column-gap:28px}
}
/* ── stacked reveals: JS + motion only (no-JS and reduced motion ship the final state) ── */
@media (prefers-reduced-motion:no-preference){
  #how:where(.js *) .how__rail:not(.is-in){transform:scaleY(0)}
  #how .how__mini .how__ck-f{transition:transform 440ms var(--ease-arrive) calc(var(--i, 0) * var(--d-stagger) + 300ms)}
  #how .how__mini .how__ck svg.i{transition:opacity 200ms var(--ease-settle) calc(var(--i, 0) * var(--d-stagger) + 560ms),
    transform 360ms var(--ease-arrive) calc(var(--i, 0) * var(--d-stagger) + 560ms)}
  #how:where(.js *) .how__mini:not(.is-in) .how__ck-f{transform:scale(0)}
  #how:where(.js *) .how__mini:not(.is-in) .how__ck svg.i{opacity:0;transform:scale(.4)}
  #how .how__mini .how__bnd{transition:opacity var(--d-settle) var(--ease-settle),transform var(--d-reveal) var(--ease-arrive)}
  #how:where(.js *) .how__mini:not(.is-in) .how__bnd{opacity:0;transform:scale(.97)}
  #how .how__mini .gate__line{transition-delay:420ms}
  #how:where(.js *) .how__mini:not(.is-in) .gate__line{transform:scaleX(0)}
  #how .how__mini .how__psg.is-pass::before{transition:transform 500ms var(--ease-arrive) 700ms}
  #how:where(.js *) .how__mini:not(.is-in) .how__psg.is-pass::before{transform:scaleY(0)}
}
@media (prefers-reduced-motion:reduce){
  #how .how__ni,#how .how__ni-d{transition:none!important;animation:none!important}
}

/* ═══ S05 security — 05-security.html ═══ */
/* ── breakpoints ───────────────────────────────────────────────────────── */
@media (max-width:559.98px){
  #security .sg-tiles>.sg-tile:nth-child(5){display:none}
  #security .sg-more-d{display:none}
  #security .sg-more-m{display:inline}
  #security .sg-audit__head{align-items:start;padding-left:16px}
  /* the append-only line is longer than a phone row: set it as a label line (no chip box), never a wrapped chip */
  #security .sg-audit__tags .chip-neutral{display:block;flex-basis:100%;height:auto;padding:0;border-radius:0;background:none;
    font-weight:700;line-height:1.5;white-space:normal;color:var(--graphite)}
  #security .sg-audit__illus{margin-left:0}
  /* phone rows: time · event on the first line, the detail beneath at full width (fewer ellipses) */
  #security{--sg-rh:54px}
  #security .sg-row{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:12px;row-gap:5px;
    padding:0 16px;font-size:12px}
  #security .sg-row__d{grid-column:1 / -1}
  #security .sg-row::before{left:7px;top:11px;bottom:11px}
  #security .sg-row__time{font-size:11.5px}
  #security .sg-cta{padding:26px 20px 24px}
  #security .sg-cta .btn{padding:0 18px}
}
@media (max-width:419.98px){
  #security .sg-cta .btn svg.i{display:none}   /* keeps "Discuss Your Security Requirements" on one line at phone widths */
}
@media (min-width:560px){
  #security .sg-cta{padding:36px 36px}
}
@media (max-width:759.98px){
  #security .sg-id{grid-template-columns:34px minmax(0,1fr);min-height:56px;padding:8px 40px 8px 11px}
  #security .sg-id__ic{width:34px;height:34px}
  #security .sg-scope{border-bottom:1px solid var(--hair)}
  #security .sg-body>.mm-threads{visibility:hidden}
}
@media (min-width:760px){
  #security .sg-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;border-bottom:0}
  #security .sg-ids{container:sg-ids / inline-size}
  #security .sg-ids__g{grid-template-columns:repeat(3,minmax(0,1fr))}
  #security .sg-card{container:sg-card / inline-size}
  #security .sg-scope{container:sg-scope / inline-size}
  #security .sg-card__foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  #security .sg-cta{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:40px}
}
@media (min-width:1100px){
  #security .sg-top{column-gap:24px;row-gap:0}
  #security .sg-intro{grid-column:1 / span 5;padding-right:clamp(8px, 2.5vw - 20px, 24px)}
  #security .sg-items{display:block;border-bottom:1px solid var(--hair)}
  #security .sg-askas{grid-column:6 / span 7;margin-top:-2px}   /* h3 cap line meets the eyebrow's */
}
/* body: scope | answer side by side (1fr | 1.1fr) once the card is wide enough for the Finance ERP answer — its invoice
   table and chip row need a 1.1fr column of about 330 px. The card's content box reaches 656 px at 1273 px windows (its 1 px
   border included), so narrower cards (1100–1272 px windows, where the card shares the row with the six controls) stack
   scope over answer as on tablets, and the thread stays hidden as on phones. */
@container sg-card (min-width:656px){
  #security .sg-body{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  #security .sg-scope{border-right:1px solid var(--hair)}
  #security .sg-ans{padding:16px 20px 18px 28px}
  /* the meta line sits on the column's foot, level with the last tile row, and stays put while the answer swaps;
     the refusal is an empty state, so it centres in the space between the label and that foot */
  #security .sg-meta{margin-top:auto;padding-top:13px}
  #security .sg-slot--none{margin-block:auto}
  #security .sg-slot--none+.sg-meta{margin-top:0}
}
@container sg-card (max-width:655.98px){
  #security .sg-scope{border-bottom:1px solid var(--hair)}
  #security .sg-body>.mm-threads{visibility:hidden}
}
/* three radio cards too narrow for icon + department + ring (1100–1264 px windows): drop the icon tile, never overlap the ring */
@container sg-ids (max-width:611.98px){
  #security .sg-id{grid-template-columns:minmax(0,1fr);padding-left:14px}
  #security .sg-id__ic{display:none}
}
/* just wide enough for the icon (1265–1292 px windows): a 32 px icon tile and tighter gaps keep "Manufacturing" ≥ 11 px
   clear of the ring (the full 36 px tile left it 8–13 px there; from 1293 it keeps ≥ 13 px) */
@container sg-ids (min-width:612px) and (max-width:627.98px){
  #security .sg-id{grid-template-columns:32px minmax(0,1fr);column-gap:10px;padding-left:10px}
  #security .sg-id__ic{width:32px;height:32px}
}
/* scope tiles as a 2-column grid of small flat file tiles wherever the scope column holds two (FINAL-SPEC §6 S05):
   icon + file kind on the top row, the title (up to 3 lines), the revision/date on the tile's foot so a row's feet
   share a baseline; the "+ n more" tile fills the sixth cell. The meta keeps its DOM order ("PDF · Rev. 1"), only its
   two halves are placed apart. Phones keep the single-column list (first 4 + more). */
@container sg-scope (min-width:264px){
  #security .sg-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  #security .sg-tile{grid-template-columns:16px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:7px;row-gap:0;
    padding:13px 9px 9px 10px;box-shadow:none}   /* 13 px top: the Cited marker rides the border clear of the kind */
  #security .sg-tile>svg.i{grid-area:1 / 1;margin:0}
  #security .sg-tile__m{display:contents}
  #security .sg-tile__k{grid-area:1 / 2;align-self:center}
  #security .sg-sep{display:none}
  #security .sg-tile__t{grid-area:2 / 1 / 3 / 3;margin-top:7px;font-size:13.5px;line-height:1.28;letter-spacing:-.01em}
  #security .sg-tile__v{grid-area:3 / 1 / 4 / 3;align-self:end;margin-top:6px}
  #security .sg-tile--more{justify-content:center;padding:10px 12px;text-align:center}
  #security .sg-tile:not(.sg-tile--more){min-height:var(--sg-tile-h, auto)}   /* the script's tallest tile of all identities */
}
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  /* the card rides beside the six controls. The script measures the tallest identity and sets --sg-top: the label row may
     tuck under the nav (the question stays in view); on very short windows the card simply scrolls with the page */
  #security .sg-card.sg-stick{position:sticky;top:var(--sg-top, calc(var(--nav-h) + 20px))}
}
/* no-JS: the static Procurement card pins only where its body is side by side (≥ 1273 px windows; 1280 keeps a margin) and
   the whole card fits below the nav; the stacked card (1100–1272) is far taller than the window and scrolls with the page */
@media (min-width:1280px) and (min-height:880px) and (prefers-reduced-motion:no-preference){
  #security .sg-card:where(.no-js *){position:sticky;top:calc(var(--nav-h) + 20px)}
}

/* a narrow answer column (phones to about 390 px; side-by-side cards at 1273–1318 px and 760 px windows): the invoice
   table's three columns keep ≥ 12 px of air — the ERP call card gives the table more of its width, then the table drops to
   the 11.5 px mono minimum, and on the narrowest phones the due date may break before its year rather than overflow */
@container sg-ans (max-width:309.98px){
  #security .sg-slot .cite--erp{padding-inline:8px}
  #security .sg-inv :is(th,td){padding-right:12px}
  #security .sg-inv :is(th,td):last-child{padding-right:0}
}
@container sg-ans (max-width:289.98px){
  #security .sg-inv{font-size:11.5px}
}
@container sg-ans (max-width:269.98px){
  #security .sg-slot .answer-card{padding-inline:12px}
  #security .sg-slot .answer-card__head{flex-wrap:wrap;row-gap:8px}   /* the source chip takes its own line, never overflows */
  #security .sg-slot .answer-card__head>.chip{margin-left:0}
  #security .sg-inv td{vertical-align:top}
  #security .sg-inv td:nth-child(2){white-space:normal}
}

/* ── motion (script-armed states; never applied under reduced motion) ──── */
@media (prefers-reduced-motion:no-preference){
  #security .sg-tile{transition:opacity 380ms var(--ease-settle),transform 380ms var(--ease-arrive)}
  #security .sg-tile.is-out{opacity:0;transform:translate3d(0,-6px,0);transition:opacity 180ms var(--ease-exit),transform 180ms var(--ease-exit)}
  #security .sg-tile.is-pre{opacity:0;transform:translate3d(0,8px,0);transition:none}
  #security :is(.sg-scope__meta,.sg-asked,.sg-slot,.sg-meta).is-out{opacity:0;transition-duration:200ms}
  #security .sg-row{transition:opacity 400ms var(--ease-settle),transform 400ms var(--ease-arrive)}
  #security .sg-row.is-pre{opacity:0;transform:translate3d(0,12px,0);transition:none}
  #security .sg-row.is-gone{opacity:0;transition:opacity 300ms var(--ease-settle)}
  #security .sg-log__list.is-shift{transform:translate3d(0,calc(-1 * var(--sg-rh)),0);transition:transform 400ms var(--ease-arrive)}
  #security .sg-log__list.no-tr,#security .sg-log__list.no-tr .sg-row{transition:none}
}
@media (prefers-reduced-motion:reduce){
  #security .sg-card *{transition:none!important}
}

/* ═══ S06 merino — 06-merino.html ═══ */
/* reveal: the pull line's rule draws after the line settles (JS + motion only) */
@media (prefers-reduced-motion:no-preference){
  #merino:where(.js *) .mg__pull:not(.is-in)::before{transform:scaleY(0)}
}

/* < 960 (single column): the figure keeps a slab-like proportion instead of stretching */
@media (max-width:959.98px){
  #merino .mg__figwrap{max-width:520px}
}
@media (min-width:760px) and (max-width:1099.98px){
  #merino .mg__main,#merino .mg__aside-in{max-width:720px}
}
/* ≥ 960 < 1100: text column, then the figure beside the endorsement and note */
@media (min-width:960px) and (max-width:1099.98px){
  #merino .mg__aside-in{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start}
  #merino .mg__figwrap{grid-row:1 / span 2;max-width:none}
  #merino .mg__endorse{margin-top:0}
}
/* ≥ 1100: columns 1–6 copy; 8–12 figure, endorsement 32 px below it, note */
@media (min-width:1100px){
  #merino .mg__grid{row-gap:0}
  #merino .mg__main{grid-column:1 / span 6}
  #merino .mg__h{max-width:none}
  #merino .mg__aside{grid-column:8 / span 5;padding-top:40px}
  #merino .mg__row::before{content:"";position:absolute;left:-22px;top:18px;bottom:18px;width:2px;border-radius:1px;background:var(--merino-blue);
    transform:scaleY(0);transform-origin:50% 0;transition:transform var(--d-ui) var(--ease-arrive)}
  #merino .mg__row.is-hot::before{transform:none}
}
/* ≥ 1240: the heading alone overhangs into column 7 (one column + gap), so each phrase sets on one line;
   below 1240 the overhang would crowd the 02 bracket, and the stair stays */
@media (min-width:1240px){
  #merino .mg__h{margin-right:calc(-1 * (100% / 6 + 4px))}
  #merino .mg__h-b{display:block}
}
/* the figure keeps pace with the index; endorsement + note close the column level with the pull line
   (never under reduced motion; nothing sticks below 641 px tall) */
@media (min-width:1100px) and (min-height:641px) and (prefers-reduced-motion:no-preference){
  #merino .mg__aside{display:flex;flex-direction:column}
  #merino .mg__aside-in{flex:1 0 auto;display:flex;flex-direction:column}
  #merino .mg__figwrap{flex:1 0 auto}
  #merino .mg__fig{position:sticky;top:calc(var(--nav-h) + 32px)}
}
/* when the whole column (figure, endorsement, note) fits the viewport, it travels together; the script measures
   and sets .mg-fit, so a narrow-and-tall window never pins a note whose foot is off-screen */
@media (min-width:1100px) and (min-height:641px) and (prefers-reduced-motion:no-preference){
  #merino.mg-fit .mg__aside{display:block}
  #merino.mg-fit .mg__aside-in{display:block;position:sticky;top:calc(var(--nav-h) + 32px)}
  #merino.mg-fit .mg__fig{position:relative;top:auto}
}
/* < 560 */
@media (max-width:559.98px){
  #merino{--mg-step:10px;--mg-fig-h:352px}
  #merino .mg__row{grid-template-columns:40px minmax(0,1fr);padding:16px 0 17px}
  #merino .mg__t{font-size:18px}
  #merino .mg__pull{font-size:21px;padding-left:18px}
  #merino .mg__slab{padding:10px 14px}
  #merino .mg__note{padding:22px 20px}
  #merino .mg__note-h{font-size:21px}
}
/* < 390: the top slab's nowrap name + label (≈171 px) outgrow the stepped slab and run into the 06 key —
   drop the star tile there (the lockup name carries the layer); ≤ 339 also tightens step, padding and type */
@media (max-width:389.98px){#merino .mg__slab--top .avatar{display:none}}
@media (max-width:339.98px){
  #merino{--mg-step:6px}
  #merino .mg__slab{gap:10px;padding:10px 12px}
  #merino .mg__name{font-size:14px}
  #merino .mg__slab--top .mg__lbl{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  #merino .mg__slab,#merino .mg__span-n,#merino .mg__pull::before,#merino .mg__row::before,#merino .mg__span::before{transition:none!important}
}

/* ═══ S07 use-cases — 07-use-cases.html ═══ */
@media (min-width:1100px){
  #use-cases .uc__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:24px;align-items:end}
  #use-cases .uc__deck{padding-bottom:.5em}
}

@container (max-width:439.98px){
  #use-cases .cf__scope{grid-template-columns:minmax(0,1fr);gap:4px}
  #use-cases .cf__scope>span{grid-area:auto;justify-self:start;padding:0;border:0;white-space:normal}
  #use-cases .cf__scope-m{order:4;margin-top:2px}
}
/* a narrow turn column (1100–1180, 760–900, phones): the title shares the icon's line and wraps beside it; the
   locator takes its own line under the title, so the icon never sits alone on a line */
@container (max-width:379.98px){
  #use-cases .cite>svg.i{align-self:flex-start;margin-top:2px}
  #use-cases .cite__t{flex:1 1 10em;min-width:0}
  #use-cases .cite__l{flex-basis:100%;padding-left:22px}
}

@media (min-width:1100px){
  #use-cases .uc__end-in{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:48px}
  #use-cases .uc__end-copy .lede{max-width:40em}   /* one line beside the button from ~1200; balanced below it */
}

/* ── ≥ 1100: desktop card grid ───────────────────────────── */
@media (min-width:1100px){
  #use-cases .cf__body{grid-template-columns:var(--cf-left) minmax(0,1fr);column-gap:40px}
  /* the brief follows the question; any spare height stays below it instead of splitting the column */
  #use-cases .cf__more{margin-top:24px}
}

/* ── 760–1099: flat list, text block in two columns above the evidence ─ */
@media (min-width:760px) and (max-width:1099.98px){
  #use-cases{--cf-srcw:clamp(258px, 30vw, 264px);--cf-link:clamp(28px, calc(5vw - 10px), 56px)}
  #use-cases .cf__text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  #use-cases .cf__brief{margin-top:0}
  #use-cases .cf__num{font-size:56px}
  /* the tab strip does not wrap and the card clips: a long tag ("Policy + role-aware access", 760–834) wraps instead
     of pushing the "Illustrative example" chip past the card edge. Each tag is two .nowrap units, so it only ever
     breaks after its "+" ("X + / Y"), never mid-phrase */
  #use-cases .cf__tag{min-width:0;white-space:normal}
}

/* ── < 760: phone ─────────────────────────────────────────── */
@media (max-width:759.98px){
  #use-cases .uc__deck{font-size:17px}
  #use-cases .cf__card{border-radius:var(--r-lg)}
  #use-cases .cf__tab{flex-wrap:wrap;gap:8px 12px;padding:16px 18px 16px}
  #use-cases .cf__tab:focus-visible{border-radius:var(--r-lg) var(--r-lg) 0 0}
  #use-cases .cf__no{order:1}
  #use-cases .cf__tab .chip-illus{order:2}
  #use-cases .cf__dept{order:3;flex-basis:100%;font-size:22px;white-space:normal}
  #use-cases .cf__tag{order:4;flex-basis:100%;padding-left:0;border-left:0;white-space:normal}
  #use-cases .cf__num{display:none}
  #use-cases .cf__body{gap:26px;padding:20px 18px 22px}
  #use-cases .cf__lead{font-size:21px}
  #use-cases .cf__brief{margin-top:20px}
  #use-cases .cf__more>summary{display:flex}
  #use-cases .cf__more[open]>summary{margin-bottom:4px}
  #use-cases .cf__ev{gap:28px}
  #use-cases .cf__row{grid-template-columns:minmax(0,1fr);row-gap:14px}
  #use-cases .cf__srcs .sheet{--sheet-fs:17px}
  #use-cases .mm-threads{visibility:hidden}   /* not display:none: the connector needs a measurable overlay */
  /* carousel (JS only; without JS the cards simply stack). The chip row sticks under the nav for the length of the
     deck, so a department is one tap away from anywhere inside a long file. */
  #use-cases:is(.js *) .cf-chips{display:flex;gap:8px;position:sticky;top:var(--nav-h);z-index:var(--z-sticky);
    margin:0 calc(-1 * var(--gutter)) 6px;padding:8px var(--gutter);background:var(--white);overflow-x:auto;
    scrollbar-width:none;scroll-padding-inline:var(--gutter)}
  #use-cases:is(.js *) .cf-chips::-webkit-scrollbar{display:none}
  #use-cases .cf-deck.is-stuck .cf-chips{box-shadow:0 1px 0 var(--hair)}
  #use-cases:is(.js *) .cf-list{display:flex;align-items:flex-start;gap:12px;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 20px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
  #use-cases:is(.js *) .cf-list::-webkit-scrollbar{display:none}
  #use-cases:is(.js *) .cf{flex:0 0 calc(100% - 14px);min-width:0;margin:0;scroll-snap-align:start}
  #use-cases .cf__card{box-shadow:var(--sh-1),0 0 0 0 transparent}
  /* the sticky chip row (60 px) sits under the nav; html's scroll-padding already clears the nav, so the margin is
     the chip row alone. Chrome trims it at the top of a card (.cf-list is a scroller), so the script owns hash
     landings and nudges focus out from under the chips (WCAG 2.4.11) */
  #use-cases:is(.js *) .cf,#use-cases:is(.js *) .cf-list :is(a,summary){scroll-margin-top:60px}
}
/* narrow phones: "CASE 0n / 05" and the chip keep one row down to 360 */
@media (max-width:389.98px){
  #use-cases .cf__tab{gap:8px;padding-inline:16px}
  #use-cases .cf__body{padding-inline:16px}
  #use-cases .cf__no{letter-spacing:.1em}
  #use-cases .cf__tab .chip-illus{letter-spacing:.1em}
}
@media (max-width:369.98px){
  #use-cases:is(.js *) .cf{flex-basis:calc(100% - 10px)}
}

@media (prefers-reduced-motion:reduce){
  #use-cases .cf__turn .q-bubble,#use-cases .cf__turn .answer-card,#use-cases .cf__scope,#use-cases .cf__more>summary svg.i{transition:none!important}
}

/* ═══ S08 poc — 08-poc.html ═══ */
@container poc-form (max-width:300px){
  #poc .poc__submit{font-size:15px;padding:0 14px}
  #poc .poc__submit svg.i{display:none}
  #poc .seg__opt label{padding:0 4px;font-size:14px;letter-spacing:-.005em;white-space:nowrap}
}
@container poc-form (min-width:560px){
  #poc .poc__f{grid-template-columns:1fr 1fr;column-gap:20px}
  #poc .poc__f>.seg,#poc .poc__f>.field--wide,#poc .poc__f>.poc__submit,#poc .poc__f>.poc__err,#poc .poc__f>.poc__priv{grid-column:1 / -1}
  #poc .poc__submit{justify-self:start;width:auto;min-width:320px}
}

@container poc-steps (min-width:600px){
  /* columns weighted by description length, so step 03 no longer runs twice as deep as the rest */
  #poc .poc__track{grid-template-columns:minmax(0,.84fr) minmax(0,1.02fr) minmax(0,1.3fr) minmax(0,.94fr) minmax(0,.9fr);column-gap:18px}
  #poc .poc__rail{display:block;position:absolute;left:0;right:0;top:14px;height:1px;background:var(--hair-2)}
  #poc .poc__step{display:block}
  #poc .poc__step:not(:last-child)::before{display:none}
  #poc .poc__st{margin-top:20px;padding-top:0}
  #poc .poc__sd{margin-top:8px}
}

@container poc-gs (min-width:640px){
  #poc .gs__head{padding:22px 24px 18px;border-bottom:0}
  #poc .gs__cols{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;background:var(--cloud);
    display:grid;grid-template-columns:var(--gs-cols);column-gap:20px;align-items:center;min-height:40px;
    padding:8px 24px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  #poc .gs__cols>span{font-family:var(--f-label);font-weight:700;font-size:11px;line-height:1.3;letter-spacing:.1em;
    text-transform:uppercase;color:var(--slate)}
  #poc .gs__row{display:grid;grid-template-columns:var(--gs-cols);column-gap:20px;align-items:center;
    min-height:56px;padding:13px 24px}
  #poc .gs__q{font-size:15px}
  #poc .gs__a,#poc .gs__res{margin-top:0}
  #poc .gs__k{display:none}
  #poc .gs__legend{padding:18px 24px 22px}
}

@media (min-width:560px){
  #poc .poc__form{padding:32px}
}
@media (min-width:760px){
  #poc .poc__uses-w{grid-template-columns:minmax(0,4fr) minmax(0,9fr);column-gap:24px;align-items:start}
  #poc .poc__uses-lbl{padding-top:13px}
}
@media (min-width:1100px){
  #poc .poc__grid{display:grid;align-items:start}
  #poc .poc__head{grid-column:1 / span 7;grid-row:1}
  #poc .poc__form{grid-column:9 / span 4;grid-row:1 / span 3;align-self:start;margin-top:6px}
  #poc .poc__form.is-sticky:not(.is-tall){position:sticky;top:calc(var(--nav-h) + 24px)}
  /* a card taller than the viewport rides on its BOTTOM edge (submit always in view) — pure CSS, so the
     geometry follows height changes (errors, intent) in the same frame. Released while it is the URL
     :target, so any jump to #request (with or without data-intent) lands on the card's own top. */
  #poc .poc__form.is-sticky.is-tall:not(:target){position:sticky;bottom:24px;align-self:end}
  #poc .poc__steps{grid-column:1 / span 7;grid-row:2}
  #poc .poc__gs{grid-column:1 / span 7;grid-row:3;margin-top:var(--poc-gap)}
}
@media (prefers-reduced-motion:reduce){
  #poc .gs__bar{display:none}
  #poc .seg__thumb,#poc .poc__tick,#poc .gs__res,#poc .poc__done{transition:none!important}
}

/* ═══ S09 why-choose — 09-close.html ═══ */
/* 390–479: "Choose MERINO MERLIN" (≈ 400 px) cannot share a line, so balance would strand the verb
   ("Why Organizations / Choose / MERINO MERLIN"). Gluing the pair gives "Why / Organizations Choose / MERINO MERLIN",
   S02's "Why / MERINO MERLIN?" break. Below 390 the pair (≈ 343 px) is wider than the measure; from 480 the unglued
   "Why Organizations / Choose MERINO MERLIN" already reads in two lines, which the glue would push back to three.
   inline-block, not nowrap: the pair is 346 of 350 px at 390, and with fallback metrics (Arial/Helvetica) it is
   355–362 px, where nowrap would overrun the gutter; an inline-block wraps inside itself instead. */
@media (min-width:390px) and (max-width:479.98px){
  #why-choose .close__glue{display:inline-block}
}
@media (min-width:760px){
  /* two columns (01–03 | 04–06), revealed as one ledger in reading order, 90 ms apart */
  #why-choose .close__ledger{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;
    column-gap:32px;row-gap:0}
  #why-choose .close__item{padding:30px 12px 36px 0;--d:calc(var(--o,0) * 90ms)}
}
@media (min-width:760px) and (max-width:1099.98px){
  #why-choose{--close-numw:64px}
}
@media (min-width:1100px){
  #why-choose .close__ledger{column-gap:48px}
  #why-choose .close__item{padding:34px 24px 44px 0}
}
@media (max-width:759.98px){
  #why-choose .close__item:nth-child(3) .close__rule--end{display:none}
}
@media (max-width:559.98px){
  #why-choose{--close-numw:58px;--close-num:34px}
  #why-choose .close__item{padding:24px 0 28px}
  #why-choose .close__n{margin-top:-1px}
}

@media (min-width:560px) and (max-width:1023.98px){
  /* 560–1023: stacked. Deliberate: the echo sits on the copy's left axis, so the band reads as one ~590 px editorial
     column; a two-column CTA at these widths would shrink the echo to k ≈ .7 (small print). */
  #cta .cta__art{justify-self:start;width:100%;max-width:calc(var(--ew) * 1px)}
}
@media (min-width:1024px){
  /* copy | echo. The echo column is capped at its design width (k = 1 at 1440) and never squeezes the copy. */
  #cta .cta__grid{grid-template-columns:minmax(0,1fr) min(548px, 44%);column-gap:clamp(40px, 4vw, 72px);align-items:center}
  #cta .cta__body{max-width:27em}
  /* pinned right: when the height cap (below) narrows the echo, it and its label stay flush with the grid edge */
  #cta .cta__art{justify-self:end;width:100%}
}
@media (min-width:1024px) and (max-width:1279.98px){
  /* 1024–1279: the landscape box would get only what the copy's 503 px button row leaves (k ≈ .79 at 1100, the
     passage at 9 px), so this band sets the portrait echo (below) in a 360 px column: k ≈ 1 beside a ≥ 505 px copy
     column, and the two buttons never wrap. This also takes a 1024 × 768 tablet from a 1171 px stacked band to one
     screen. Wider than 7:4 (short windows) the landscape echo stays and takes what the 505 px copy column leaves,
     up to 548 px — the height cap would shrink the tall portrait box far more. (§6 says two columns from 1100 —
     deviation D5/D6 in the header.) */
  #cta .cta__grid{grid-template-columns:minmax(505px,1fr) minmax(0,calc(var(--ew) * 1px));column-gap:40px}
  #cta .cta__row{flex-wrap:nowrap}
}
@media (min-width:1024px) and (max-height:800px){
  /* compact desktop (1024 × 768, 1280 × 720, 1366 × 657): the whole band, echo included, fits one screen under the nav */
  #cta{padding-block:clamp(56px, 10vh, 88px)}
  #cta .cta__art{max-width:min(calc(var(--ew) * 1px), calc((100vh - var(--nav-h) - 2 * clamp(56px, 10vh, 88px) - 36px) * var(--ew) / var(--eh)))}
}
@media (max-width:1099.98px){
  #cta .cta__body{font-size:var(--fs-lead)}
}
@media (max-width:559.98px), (min-width:1024px) and (max-width:1279.98px) and (max-aspect-ratio:7/4){
  /* portrait echo, 360 × 535: sheet 1–225 × 6–306, card 60–360 × 320–530 — nothing overlaps; the thread drops into
     the card's top edge above the KB chip. k .97 on a 390 phone (answer 15.6 px), .89 at 360 (was 420 wide: .83 / .76).
     At 1024–1279 only up to 7:4: a wider, shorter window keeps the landscape box (D6). Also switches the no-JS still. */
  #cta{--ew:360;--eh:535}
  #cta .cta__still--land{display:none}
  #cta .cta__still--port{display:inline}
  #cta .cta__fig{--sx:1px;--sy:6px;--cx:60px;--cy:320px}
  #cta .cta__slot{--tx:230}
}
@media (max-width:559.98px){
  #cta .cta__campaign{font-size:16px;margin-bottom:18px}
  #cta .cta__body{margin-top:22px}
  #cta .cta__row{margin-top:32px}
  #cta .cta__grid{row-gap:48px}
}

@media (min-width:1100px){
  #faq .faq__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  #faq .faq__head{grid-column:1 / span 4;position:sticky;top:calc(var(--nav-h) + 40px)}
  #faq .faq__list{grid-column:6 / span 7}
}
@media (max-width:559.98px){
  #faq .faq__item>summary{min-height:56px;padding:14px 0;font-size:17px;gap:16px}
  #faq .faq__ico{width:30px;height:30px}
  #faq .faq__a{padding-right:0;font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  #why-choose .cta__mover,#why-choose .cta__sheetWrap,#why-choose .close__item::after,#faq .faq__ico{transition:none!important}
  #faq .faq__item[open] .faq__a{animation:none!important}
}

/* ═══ S10 footer — 10-footer.html ═══ */
/* a narrow track (≥ 1240 and ~760–900 put Updates in a 220–315 px column): one stacked block —
   field, its error directly under it, then a full-width button */
@container (max-width:319.98px){
  #footer .ft__field{flex-direction:column;flex-wrap:nowrap;gap:10px}
  #footer .ft__input{flex:none}
  #footer .ft__err{order:0;flex:none;margin-top:0}
  #footer .ft__btn{width:100%}
}
/* expansion line: two halves (the name · the descriptor + endorsement) on two lines from 390;
   narrower, where the halves no longer fit, its four phrases stack one per line */
@media (max-width:389.98px){ #footer .ft__xp{display:block} }
@media (min-width:390px){ #footer .ft__ph-md{white-space:nowrap} }

/* ≥ 760: three columns; Site and Merino never narrower than their longest (unbreakable) link */
@media (min-width:760px){
  #footer{padding-block:72px calc(36px + env(safe-area-inset-bottom, 0px))}
  #footer .ft__cols{grid-template-columns:minmax(min-content,.8fr) minmax(min-content,1.1fr) minmax(12em,1.3fr);column-gap:32px}
  #footer .ft__news{grid-column:auto}
  #footer .ft__links a{white-space:nowrap}
}
@media (min-width:1100px){
  #footer{--ft-row:36px;padding-block:80px 40px}
  #footer .ft__links a{padding-block:4px}
  #footer .ft__rule{margin-top:72px}
  #footer .ft__legal{padding-top:28px}
}
/* 760–1239: lockup beside the two lines (they start on the Merino column), the three columns below on the same tracks.
   (1.2fr | 2fr from 1100 would leave Updates ~150 px wide, because the Site and Merino links never wrap) */
@media (min-width:760px) and (max-width:1239.98px){
  #footer .ft__top{grid-template-columns:minmax(min-content,.8fr) minmax(min-content,1.1fr) minmax(12em,1.3fr);gap:0 32px}
  #footer .ft__brand,#footer .ft__cols{display:contents}
  #footer .ft__logo{grid-column:1;grid-row:1 / span 2}
  #footer .ft__promise{grid-column:2 / -1;grid-row:1;margin-top:0;max-width:none}
  #footer .ft__expand{grid-column:2 / -1;grid-row:2;max-width:36em}
  #footer .ft__col{grid-row:3;margin-top:56px}
}
/* 1024–1239: address under the lockup track (a letterhead block), rights on the Merino track, aligned with the lines above */
@media (min-width:1024px) and (max-width:1239.98px){
  #footer .ft__legal{grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.3fr);column-gap:32px}
  #footer .ft__rights{grid-column:2 / -1}
}
/* ≥ 1240: lockup + lines | three columns (1.2fr | 2fr); the legal block shares the same two tracks */
@media (min-width:1240px){
  #footer .ft__top{grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);column-gap:var(--ft-gap)}
  #footer .ft__cols{padding-top:2px}
  #footer .ft__legal{grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);column-gap:var(--ft-gap)}
}
/* touch: every link row is a 44 px target (the Updates sentence offset follows --ft-row) */
@media (min-width:1100px) and (hover:none),(min-width:1100px) and (pointer:coarse){
  #footer{--ft-row:44px}
}
@media (max-width:759.98px),(hover:none),(pointer:coarse){
  #footer .ft__links a{min-width:44px}
}

/* hover underline (fine pointers, single-line links): a cyan hairline, the nav's on-navy underline, drawn left → right */
@media (min-width:760px) and (hover:hover) and (pointer:fine){
  #footer .ft__links a::after{content:"";position:absolute;left:0;right:0;bottom:calc(50% - .82em);height:1px;background:var(--cyan);
    transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--d-ui) var(--ease-arrive)}
  #footer .ft__links a:hover::after{transform:none;transform-origin:0 50%}
}

/* motion (JS + motion allowed only): a quieter travel than the page default, rows cascade down each column,
   the rule draws first and the legal block settles in behind it */
@media (prefers-reduced-motion:no-preference){
  #footer:is(.js *) [data-reveal]:not([data-reveal="stagger"]):not([data-reveal="rule"]):not(.is-in),
  #footer:is(.js *) [data-reveal="stagger"]:not(.is-in) [data-reveal-item]{transform:translate3d(0,10px,0)}
  #footer .ft__col--2 [data-reveal="stagger"].is-in [data-reveal-item]{transition-delay:calc(var(--i,0)*45ms + 90ms)}
  #footer .ft__col--1 [data-reveal="stagger"].is-in [data-reveal-item]{transition-delay:calc(var(--i,0)*45ms)}
  #footer .ft__col--3 [data-reveal="stagger"].is-in [data-reveal-item]{transition-delay:calc(var(--i,0)*90ms + 180ms)}
  #footer .ft__done{opacity:0;transform:translate3d(0,8px,0);
    transition:opacity var(--d-settle) var(--ease-settle) 160ms,transform var(--d-reveal) var(--ease-arrive) 160ms}
  #footer .ft__done.is-on{opacity:1;transform:none}
  #footer .ft__done svg.i{stroke-dasharray:21;stroke-dashoffset:21;transition:stroke-dashoffset 520ms var(--ease-draw) 420ms}
  #footer .ft__done.is-on svg.i{stroke-dashoffset:0}
}
@media (prefers-reduced-motion:reduce){
  #footer .ft__links a::after,#footer .ft__form,#footer .ft__done{transition:none!important}
}

/* ═══ thank-you — thank-you.html ═══ */
@media (max-width:389.98px){
  #thank-you .thank-you__next{margin-top:var(--s-7)}
  #thank-you .cta-row{margin-top:var(--s-6)}
}