end/* PharmaSynapse — design system v4
   Components, utilities, responsive, motion
   Generated from the standalone build. Edit here, not in the pages. */

/* ============================================================
   5 - COMPONENTS
   ============================================================ */

/* ---- 5.1 skip link ---- */
.site-header__skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.site-header__skip:focus{
  position:fixed;top:8px;left:8px;z-index:200;width:auto;height:auto;margin:0;
  overflow:visible;clip:auto;clip-path:none;padding:10px 16px;
  background:#FFFFFF;color:#0A6D6E;border:1px solid var(--teal);
  border-radius:var(--radius-control);font:500 14px/1 var(--sans);text-decoration:none;
  outline:2px solid var(--teal);outline-offset:2px;
}

/* ---- 5.2 header. Sticky, white. One nav link, so no hamburger exists. ---- */
.site-header{position:sticky;top:0;z-index:100;background:#FFFFFF;border-bottom:1px solid var(--line);transition:background-color 180ms var(--ease-io)}
.site-header.is-scrolled{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.site-header__container{display:flex;align-items:center;gap:20px;max-width:var(--shell-max);height:64px;margin:0 auto;padding:0 var(--shell-pad);min-width:0}
.site-header__wordmark{display:inline-flex;align-items:center;min-width:0;text-decoration:none;border-radius:4px}
.site-header__wordmark:hover{color:var(--ink)}
.site-header__wordmark:not([href]){cursor:default}
.logo-lockup{display:block;flex:none;height:30px;width:auto}
.logo-markonly{display:none;flex:none;height:28px;width:auto}
.site-header__nav{margin-left:auto}
.site-header__links{display:flex;align-items:center;gap:20px;margin:0;padding:0;list-style:none;white-space:nowrap}
.site-header__link{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font:500 14.5px/1 var(--sans);color:var(--ink-2);text-decoration:none;border-radius:4px;transition:color var(--t-fast) var(--ease-io)}
.site-header__link::before{content:"";position:absolute;inset:6px -10px;z-index:-1;border-radius:var(--radius-control);background:#E4F3F3;opacity:0;transition:opacity var(--t-fast) var(--ease-io)}
.site-header__link:hover::before{opacity:1}
.site-header__link:hover{color:var(--ink)}
.site-header__cta{
  display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;
  background:var(--teal);color:#FFFFFF;font:500 14px/1 var(--sans);
  border-radius:var(--radius-control);text-decoration:none;white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease-io);
}
.site-header__cta:hover{background:#0A6D6E;color:#FFFFFF}

/* ---- 5.3 buttons. One label, one style, one destination. No second
        button, no ghost, no outline variant exists on this page. ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:15px;font-weight:500;line-height:1;
  height:48px;padding:0 26px;border-radius:var(--radius-card);
  border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;
  background:var(--teal);color:#FFFFFF;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 6px 18px rgba(14,140,140,.26);
  transition:background var(--t-fast) var(--ease-io),transform var(--t-fast) var(--ease-io),box-shadow var(--t-fast) var(--ease-io);
}
.btn:hover{background:#0A6D6E;color:#FFFFFF;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 10px 26px rgba(14,140,140,.34)}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.on-dark .btn:focus-visible{outline-color:var(--teal-bright)}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;font-size:15.5px;text-decoration:none;color:#0A6D6E;background:linear-gradient(currentColor,currentColor) no-repeat left bottom/0 1px;transition:background-size var(--t-mid) var(--ease)}
.tlink:hover{background-size:100% 1px;color:#0A6D6E}
.on-dark .tlink{color:var(--teal-bright)}
.arr{transition:transform var(--t-fast) var(--ease-io)}
.btn:hover .arr,.tlink:hover .arr{transform:translateX(4px)}

/* ---- 5.4 hero ---- */
.hero{position:relative;padding:64px 0 104px;background:linear-gradient(177deg,var(--ink-800) 0%,var(--ink-850) 58%,var(--ink-900) 100%);overflow:hidden}
.hero .glow{width:640px;height:640px;top:-230px;right:-180px}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr 1.02fr;gap:56px;align-items:center}
.hero .lead{font-size:18px;max-width:48ch}
.hero-cta{display:flex;margin-top:34px}

/* ---- 5.5 .qanswer - the quick-answer panel ---- */
.qanswer{
  margin-top:38px;padding:22px 24px;border-radius:var(--radius-card);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);
  border-left:2px solid var(--teal-bright);
}
.qanswer dt{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3);margin:0 0 10px}
.qanswer dd{margin:0;font-size:15px;line-height:1.62;color:var(--on-dark-2)}
.qanswer dd b{color:var(--on-dark);font-weight:500}
/* On a light band the same panel reads as a bordered note, not a card. */
.qanswer--light{border:1px solid var(--line);background:var(--paper);border-left:2px solid var(--teal)}
.qanswer--light dt{color:var(--ink-3)}
.qanswer--light dd,.qanswer--light p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-2)}
/* The section 2 regulatory close is a bordered note, not a card and not a
   labelled panel: the source copy carries no key for it, so none is invented. */
.qnote{margin-top:40px;max-width:78ch;padding:22px 24px;border:1px solid var(--line);border-left:2px solid var(--teal);border-radius:var(--radius-card);background:var(--paper)}
.qnote p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-2)}

/* ---- 5.6 .hfacts - framework chip strip. Plain text, never links. ---- */
.hfacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.10);list-style:none}
.hfact{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--on-dark-2);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-pill);padding:6px 13px;background:rgba(255,255,255,.03);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---- 5.7 .lsteps - three sequential blocks ---- */
.lsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:46px}
.lstep{padding:30px 34px 30px 0;border-right:1px solid var(--line);min-width:0}
.lstep:last-child{border-right:0;padding-right:0}
.lstep:not(:first-child){padding-left:34px}
.lstep p{font-size:15px;color:var(--ink-2);line-height:1.6}

/* ---- 5.8 .explode - the artifact and its annotations ---- */
.explode{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:56px;align-items:start;margin-top:52px}
/* Same uncapped-container guard as the hero figure: G3 is a portrait document
   render and G5 is the app fragment, and both would take the full shell width
   once their grids collapse. */
.art{max-width:560px}
.ea-grid .gfig{max-width:560px}
.art figcaption{margin-top:18px}
.notes{display:grid;gap:0;border-top:1px solid var(--line)}
.note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.note .idx{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--teal);color:#0A6D6E;font-family:var(--mono);font-size:11px;font-weight:600;display:grid;place-items:center;flex:none;margin-top:3px;font-variant-numeric:tabular-nums}
.note p{font-size:15px;color:var(--ink-2);line-height:1.6}

/* ---- 5.9 scope strip ---- */
.scope{margin-top:40px;padding-top:34px;border-top:1px solid var(--line)}
.scope figure{margin-top:18px}
.scope figcaption{margin-top:16px;max-width:74ch}

/* ---- 5.10 .qa - the three questions ---- */
.qa{margin-top:46px;border-top:1px solid var(--line)}
/* DEFECT FIX - .q was an unscoped display:grid, which also matched
   <td class="q"> inside document artwork. Scoped to a direct child of .qa. */
.qa>.q{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:44px;padding:30px 0;border-bottom:1px solid var(--line);transition:background var(--t-mid) var(--ease)}
.qa>.q:hover{background:var(--paper)}
.qa>.q h3{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.34}
.qa>.q .n{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#0A6D6E;display:block;margin-bottom:9px}
.qa>.q p{font-size:15.5px;color:var(--ink-2);line-height:1.64}

/* ---- 5.11 founders ---- */
.fnd-pair{display:grid;gap:0;margin-top:48px;border-top:1px solid var(--line)}
.fnd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:start;padding:40px 0;border-bottom:1px solid var(--line)}
/* Founder portrait slot. Square crop, hairline border, no shadow: the founder
   block is the credibility section, so the portraits sit as quietly as every
   other surface on the page. */
.badge--photo{position:relative;display:grid;place-items:center;width:112px;height:112px;border-radius:var(--radius-card);overflow:hidden;background:var(--sunken);border:1px solid var(--line);flex:none}
.badge--photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.badge--photo .initials{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fnd blockquote{font-size:clamp(19px,2.1vw,24px);line-height:1.44;letter-spacing:-.022em;color:var(--ink);max-width:46ch;font-weight:400}
.fnd .who{font-size:14.5px;color:var(--ink-2);margin:18px 0 16px}
.fnd .who b{color:var(--ink);font-weight:600}
.creds{display:flex;gap:8px;flex-wrap:wrap;list-style:none}
.cred{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-2);border:1px solid #C7D0D8;border-radius:var(--radius-pill);padding:6px 12px;background:#FFFFFF;font-variant-numeric:tabular-nums}
.fnd-out{margin-top:30px}

/* ---- 5.12 early access ---- */
.ea-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:44px}
.honesty{font-size:14.5px;line-height:1.62;color:var(--on-dark-2);max-width:60ch;margin:0 0 26px;padding-left:16px;border-left:1px solid rgba(255,255,255,.18)}
.form{display:grid;gap:18px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:7px;min-width:0}
.field>label,.fset>legend{font-size:13px;font-weight:500;color:var(--on-dark-2);padding:0}
.req{color:var(--teal-bright);margin-left:2px}
.finput,.fselect,.ftextarea{
  width:100%;min-width:0;height:46px;padding:0 13px;font-size:15px;color:var(--on-dark);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius-control);transition:border-color var(--t-fast) var(--ease-io),box-shadow var(--t-fast) var(--ease-io),background var(--t-fast) var(--ease-io);
}
.ftextarea{height:auto;min-height:92px;padding:12px 13px;line-height:1.6;resize:vertical}
.fselect{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--on-dark-2) 50%),linear-gradient(135deg,var(--on-dark-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.finput::placeholder,.ftextarea::placeholder{color:var(--on-dark-3)}
.finput:focus,.fselect:focus,.ftextarea:focus{outline:none;border-color:var(--teal-bright);box-shadow:0 0 0 3px rgba(62,197,193,.24);background:rgba(255,255,255,.09)}
/* Windows fix. Chromium on Windows renders the native select popup in-engine
   and the options inherit the select's own colour and background. Both are set
   for a navy band here — white text on a near-transparent fill — so on Windows
   the popup painted white on white and every option but the highlighted one was
   invisible. macOS draws that popup at OS level and ignores author colour
   entirely, which is why it never showed on a Mac.
   Setting colour and background explicitly on <option> is the reliable fix; it
   costs nothing on macOS, where the rule is simply ignored. */
.fselect option,.fselect optgroup{color:var(--ink);background-color:#FFFFFF;font-weight:400}
.fselect option:disabled{color:var(--ink-3)}
.fselect option:checked{color:var(--ink);background-color:#E4F3F3}
.finput[aria-invalid="true"],.fselect[aria-invalid="true"]{border-color:#DC2626}
.fset{border:0;margin:0;padding:0;min-width:0}
.fset legend{margin-bottom:9px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip .wpcf7-form-control-wrap{
  display:inline-flex;align-items:center;font-size:14px;
  color:var(--on-dark-2);border:1px solid rgba(255,255,255,.20);border-radius:var(--radius-pill);
  background:rgba(255,255,255,.04);transition:background var(--t-fast) var(--ease-io),border-color var(--t-fast) var(--ease-io),color var(--t-fast) var(--ease-io);
}
.chip span.wpcf7-list-item {
    margin: 0;
}
.field label br {
    display: none;
}
.field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--on-dark-2);
    padding: 0;
}
.fset legend br {
    display: none;
}
label br {
    display: none;
}
p.consent br {
    display: none;
}
span.wpcf7-list-item-label {
    padding: 9px 14px;
    min-height: 44px;
    display: inline-block;
    border-radius: var(--radius-pill);
}
.chip input:hover+span{border-color:rgba(255,255,255,.38)}
.chip input:checked+span{background:rgba(62,197,193,.16);border-color:var(--teal-bright);color:#FFFFFF}
.chip input:focus-visible+span{outline:2px solid var(--teal-bright);outline-offset:2px}
.ferr{font-size:12.5px;color:#FF9C9C;min-height:0}
.fnote{font-size:12.5px;line-height:1.55;color:var(--on-dark-2)}
.consent{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--on-dark-2)}
.consent a{color:var(--teal-bright)}
.form-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:4px}
.subline{font-size:13px;line-height:1.6;color:var(--on-dark-2);max-width:52ch}
.fstate{
  display:none;padding:13px 15px;border-radius:var(--radius-control);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  font-size:13.5px;line-height:1.55;color:var(--on-dark);
}
.fstate.is-shown{display:block}

/* ---- 5.13 footer. One horizontal bar, not a column grid. With only four
        links and no product column there was never enough content to justify
        columns: the brand cell had a single wordmark in it and the row height
        was set by the taller neighbour, leaving dead space under the mark.
        Everything now sits on one baseline-aligned row that wraps as a unit. ---- */
.site-footer{background:var(--ink-900);color:var(--on-dark-2)}
.site-footer.has-band-above{border-top:1px solid rgba(255,255,255,.10)}
.site-footer__inner{max-width:var(--shell-max);margin:0 auto;padding:34px var(--shell-pad) 22px}
.footer-bar{display:flex;align-items:center;gap:20px 32px;flex-wrap:wrap}
.logo-lockup-rev{display:block;flex:none;height:30px;width:auto}
.footer-nav{margin-left:auto}
/* The icons carry the auto margin too, so whichever row they land on they pin
   right. Without this the nav holds the only auto margin, and the moment six
   links push the bar past its content box the icons wrap flush LEFT under the
   wordmark. That failed across the whole 640px to 1000px range, which no
   breakpoint covered. Right-aligning by constraint beats adding another one. */
.footer-social{display:flex;gap:4px;margin-left:auto}
.footer-nav ul{display:flex;align-items:center;gap:2px 24px;flex-wrap:wrap}
.footer-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;color:var(--on-dark-2);text-decoration:none;transition:color var(--t-fast) var(--ease-io)}
.footer-nav a:hover{color:var(--teal-bright)}
/* Social icons. Teal is the only interaction colour, so the icons rest in
   secondary and answer in teal-bright like every other footer link. 44px hit
   targets. While S1/S2 are open the anchors carry no href: an unresolved
   profile must not look clickable, and they are marked aria-disabled so the
   pending state is announced rather than the icons being silently invisible
   to assistive tech. */
.soc{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-control);color:var(--on-dark-2);transition:color var(--t-fast) var(--ease-io),background var(--t-fast) var(--ease-io)}
.soc:hover{color:var(--teal-bright);background:rgba(255,255,255,.06)}
.soc:not([href]){color:var(--on-dark-3);cursor:default}
.soc[aria-disabled="true"]{color:var(--on-dark-3);cursor:default}
.soc[aria-disabled="true"]:hover{color:var(--on-dark-3);background:none}
.soc:not([href]):hover{color:var(--on-dark-3);background:none}
.footer-baseline{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.10);display:flex;justify-content:space-between;gap:6px 20px;flex-wrap:wrap;font-size:12.5px;color:var(--on-dark-3)}
.footer-baseline p{margin:0}
.footer-baseline a{color:var(--on-dark-2);text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat left bottom/0 1px;transition:color var(--t-fast) var(--ease-io),background-size var(--t-mid) var(--ease)}
.footer-baseline a:hover{color:var(--teal-bright);background-size:100% 1px}

/* ---- 5.14 graphics ---- */
figure{margin:0}
.gfig{position:relative}
.gfig svg{width:100%;height:auto}
/* G1 is portrait (aspect 0.725 after the documented viewBox crop). The desktop
   grid column governs its size; this cap only bites once the grid collapses to
   one column, keeping the figure from running the whole 1080px shell.
   `width:100%` is required alongside the auto margins: an auto inline margin on
   a grid item overrides the default justify-self:stretch, so without it the item
   is sized by fit-content and the SVG collapses to the 300px replaced-element
   default. */
.hero .gfig{width:100%;max-width:567px;margin-inline:auto}
.g-mob{display:none}
.gfig-720 .g-desk{display:block}
.gfig-820 .g-desk{display:block}
.gwrap{margin:44px 0}
.art-frame{border-radius:var(--radius-card);overflow:hidden}

/* G6 scope strip hover. The locked tiles ship at 70 percent so a reader sees
   the boundary before reading a word. Hovering anywhere in the figure lifts the
   whole set slightly, and hovering one tile brings it to full strength: the
   point of the graphic is that we published the list, so every word has to be
   readable on demand. Nothing moves, nothing recolours and no tile gains an
   affordance. Availability is not a lifecycle state and a hover must never
   start looking like one. The active tiles answer with their icon well filling
   to accent-soft, which is the system's standard light-surface hover. */
.g6-locked{opacity:.7;transition:opacity 200ms var(--ease-io)}
.gfig:hover .g6-locked{opacity:.84}
.g6-locked:hover{opacity:1}
.g6-well{transition:fill 140ms var(--ease-io)}
.g6-active:hover .g6-well{fill:#E4F3F3}

/* ---- 5.15 carried system classes.
        Kept so an Astro extraction of this page inherits the fixed rules
        rather than the defective ones. Each carries its section 6.8 fix. ---- */
.page{position:relative;background:#FFFFFF;color:var(--ink);border:1px solid var(--line);border-radius:6px;box-shadow:var(--e4);padding:28px 26px 20px;overflow:hidden}
.mini{background:#FFFFFF;color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--e2);overflow:hidden}
.mrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0;padding:7px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mk{flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--ink-2);overflow-wrap:anywhere}
.mv{flex:0 1 auto;min-width:0;font-family:var(--mono);font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* ============================================================
   6 - UTILITIES
   ============================================================ */
.nowrap{white-space:nowrap}
.center{text-align:center}
.cta-center{display:flex;justify-content:center;margin-top:44px}
/* ============================================================
   7 - RESPONSIVE
   Zero horizontal overflow from 320px to 1440px.
   ============================================================ */
@media(max-width:1040px){
  .explode{grid-template-columns:1fr;gap:40px}
  .ea-grid{grid-template-columns:1fr;gap:48px}
  .ea-grid .gfig{width:100%;margin-inline:auto}
}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .lsteps{grid-template-columns:1fr}
  .lstep{border-right:0;border-bottom:1px solid var(--line);padding:26px 0!important}
  .lstep:last-child{border-bottom:0}
  .qa>.q{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .fnd{grid-template-columns:1fr;gap:22px}
  .sec{padding:88px 0}
  .hero{padding:52px 0 84px}
}
@media(max-width:820px){
  .gfig-820 .g-desk{display:none}
  .gfig-820 .g-mob{display:block}
}
@media(max-width:720px){
  .gfig-720 .g-desk{display:none}
  .gfig-720 .g-mob{display:block}
  .frow{grid-template-columns:1fr}
  #questions {
    padding-top: 0;
    }
.footer-social {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.footer-bar{
    justify-content: center ;
}
}
@media(max-width:640px){
  .shell{padding:0 20px}
  .site-header__container{padding:0 20px;gap:14px}
  .sec{padding:72px 0}
  .hero{padding:44px 0 72px}
  .d1{letter-spacing:-.024em}
  .badge--photo,.badge--photo img{width:88px;height:88px}
  .footer-bar{gap:16px 22px}
  .footer-nav{margin-left:0;flex:1 0 100%;order:3;border-top:1px solid rgba(255,255,255,.10)}
      .footer-nav ul {
        gap: 0 20px;
        justify-content: center;
    }
    .footer-baseline {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        justify-content: center;
        text-align: center;
    }
    
}
@media(max-width:460px){
  /* Two nav links plus the 28px mark plus a locked CTA label do not fit one
     64px row on a phone: at 320px the content box is 288px and the parts
     measure about 447px. The CTA label is locked by the build order and the
     mark size is a deliberate choice, so the nav wraps to its own row beneath
     the bar instead and the header grows past 64px. Anchors get a matching
     scroll-margin below, since every CTA on this page is an in-page anchor. */
  .site-header__container{flex-wrap:wrap;height:auto;padding:10px 20px;gap:10px}
  .site-header__nav{order:3;flex:1 0 100%;margin-left:0;border-top:1px solid var(--line)}
  .site-header__links{gap:18px;justify-content:end}
  .site-header__link{font-size:14px;min-height:40px}
  main section[id]{scroll-margin-top:124px}
  /* The mark stands alone below 460px: the full lockup is about 270px wide
     against a 288px content box. Swap to the design system's mark-only cut
     rather than clipping the lockup. Nav and CTA are never dropped. */
  .logo-lockup{display:none}
  .logo-markonly{display:block}
  .site-header__cta{height:40px;padding:0 13px;font-size:13px;margin-left:auto}
  .site-header__container{gap:10px}
  .site-header__links{gap:14px}
  .site-header__link{font-size:13.5px}
  .btn{width:100%;padding:0 18px}
  .hero-cta{display:block}
  .cta-center .btn{width:auto}
}
@media(max-width:360px){
  .shell,.site-header__container{padding:0 16px}
  .qanswer{padding:18px 16px}
  .hfact{font-size:10.5px;padding:5px 10px}
}
/* ============================================================
   8 - MOTION
   Capped. The animated logo cut in the header is the only motion above
   250ms and runs once, homepage only. Everything else is a fade of 250ms
   or less. Background layers never move at a different rate to the content,
   the wheel is never intercepted, and no graphic loops: R1 and R2 are
   static SVG.
   ============================================================ */
/* Reveals are opt-IN. `.rv` is visible by default and only becomes hidden once
   JS has armed the gate on <html>, so content is never held behind a script
   that may not run, and never behind an IntersectionObserver callback that may
   never fire (the host can wrap the page so the document is not the scroller,
   which starves the implicit viewport root). The arming class is paired with a
   hard timeout in JS: nothing stays hidden longer than 600ms under any
   circumstances. */
.rv{opacity:1}
.rv-on .rv{opacity:0;transition:opacity 240ms var(--ease-io)}
.rv-on .rv.in{opacity:1}

/* The logo cut is homepage-hero only (L10).
   Driver and keyframes live in pages/home.css. */

@media(prefers-reduced-motion:reduce){
  html:has(body.mkt){scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* The mark renders at rest: the shipped lockup, with the pip hidden exactly
     as the design system's animated asset ships it. */
  .cut-pip{opacity:0}
  .rv{opacity:1}
  /* G2 returns to its specced static state: the ring at rest at 35 percent,
     and the travelling pip hidden. The pip is added motion, not content, so
     removing it loses nothing from the diagram. */
  /* G4 returns to its specced static state: both arrows fully drawn, the
     added pulse ring hidden. Nothing in the diagram is lost. */
}