/* ============================================================
     Amiko — B2B / corporate landing page
     Parent brand (Amiko) leads; Respiro is the flagship product/proof.
     Inherits the Respiro B2C design system (../website/index.html):
       Palette: Amiko graphite/bronze x Respiro teal on Figma Warm Cream.
       Type:    Fraunces (humanist serif, display) + Outfit (body).
     Brand differentiation (amiko-respiro-brand-handoff.md):
       - Amiko wordmark = Fraunces 700 (parent), Respiro = 400 (product).
       - Amiko mark = four-faces symbol + outlined "amiko" wordmark, exported
         from the Figma source of truth as /assets/img/logo-full*.svg +
         amiko*.svg (colour = green/bronze/mauve/blue; reversed = cream #F4ECE3).
       - On this corporate site graphite CTAs + warm bronze accents lead;
         TEAL is reserved for Respiro product moments.
     ============================================================ */

  :root {
    /* Brand palette. --clay is a legacy alias for the warm Amiko accent so
       existing markup/classes can move visually before a naming cleanup. */
    --amiko-green:  #36A592;
    --amiko-bronze: #C88752;
    --amiko-mauve:  #AF7184;
    --amiko-blue:   #5BA6C9;
    --amiko-cta:          #2B2724;
    --amiko-cta-hover:    #211E1C;
    --amiko-accent:       #96653E;
    --amiko-accent-deep:  #6B3F14;
    --amiko-accent-wash:  #F0E3E7;
    --amiko-action:       var(--amiko-accent);
    --amiko-action-deep:  var(--amiko-accent-deep);
    --amiko-action-wash:  var(--amiko-accent-wash);
    --respiro-primary:      #006877;
    --respiro-primary-deep: #00525E;
    --respiro-cyan:         #4FD8EB;
    --respiro-wash:         #F2EDE4;
    --respiro-panel:        #D2E7ED;
    --respiro-line:         rgba(0,104,119,.18);
    --respiro-chip:         rgba(0,104,119,.09);

    --clay:        var(--amiko-action);
    --clay-deep:   var(--amiko-action-deep);
    --graphite:    #2B2724;
    --teal:        var(--respiro-primary);
    --teal-deep:   var(--respiro-primary-deep);
    --cyan:        var(--respiro-cyan);
    --cream:       #EFE4D2;

    /* Warm neutral system */
    --paper:       #FBF6EF;
    --paper-2:     #FFFDF8;
    --paper-sink:  #F4EBDC;
    --paper-teal:  var(--respiro-wash);
    --ink:         #2A2520;
    --ink-soft:    #5B544E;
    --ink-faint:   #8A817A;
    --line:        #E0D5C2;
    --line-soft:   #EFE4D2;

    /* Product category colours (mirrors app terminology) */
    --cat-preventer: #2F73C0;
    --cat-reliever:  #D63A30;
    --cat-allinone:  #673AB7;
    --cat-checkin:   #1BA968;
    --risk-amber:    #E0A33E;

    /* Forecast risk traffic-light — 🔗 spine (shared with the app). Global (not just
       .chart-scoped) so the chart AND the forecast-meter draw from the same spine. */
    --c-low:  #3E9B6E;
    --c-mid:  var(--risk-amber);
    --c-high: #CB4B33;

    /* On-dark neutrals — text on the dark Evidence band + the footer (neutrals run
       warm-grey here too; the two bands are calibrated separately). */
    --surface-dark-deep: #211E1C;   /* footer bg (deeper than --graphite) */
    --ink-on-dark:       #F4ECE3;    /* primary text on dark */
    --ink-on-dark-soft:  #C9BFB5;    /* secondary text on dark */
    --ink-on-dark-faint: #9C938A;    /* muted / meta on dark */
    --foot-text:         #B7ADA3;    /* footer body text / links */
    --foot-faint:        #6E655D;    /* footer meta / fine print */

    --font-serif: 'Fraunces', 'Hoefler Text', Georgia, 'Times New Roman', serif;
    --font-sans:  'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --r-sm: 8px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 9999px;

    --shadow-sm: 0 1px 2px rgba(43,39,36,.06), 0 2px 6px rgba(43,39,36,.05);
    --shadow-md: 0 6px 18px rgba(43,39,36,.08), 0 2px 6px rgba(43,39,36,.05);
    --shadow-lg: 0 24px 60px rgba(43,39,36,.16), 0 8px 24px rgba(43,39,36,.08);

    --maxw: 1180px;
    --landing-hero-min: clamp(520px, calc(100svh - 154px), 650px);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; /* clears the 77px sticky nav on anchor jumps */ }
  body {
    margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--paper);
    line-height: 1.6; font-size: 18px; font-weight: 400;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-serif); font-weight: 500; line-height: 1.08;
    letter-spacing: -0.015em; margin: 0; font-optical-sizing: auto;
    text-wrap: balance; /* even multi-line heading wraps, no orphan words */
  }
  p { margin: 0; }
  .lead { text-wrap: pretty; } /* avoids single-word last lines in body leads */
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; }

  /* ---------- Accessibility: skip link + global keyboard focus ----------
     The skip link is JS-injected as the first focusable element; it sits
     off-screen until focused, then slides in. The :focus-visible ring is a
     :where()-wrapped baseline (specificity 0,1,0) so any component focus
     style — .contact-form input:focus, .nav-toggle:focus-visible — still wins. */
  .skip-link {
    position: fixed; top: 10px; left: 12px; z-index: 200;
    transform: translateY(calc(-100% - 18px));
    background: var(--ink); color: #fff;
    padding: 12px 22px; border-radius: var(--r-pill);
    font-family: var(--font-sans); font-weight: 600; font-size: 15px;
    box-shadow: var(--shadow-md); transition: transform .22s ease;
  }
  .skip-link:focus { transform: translateY(0); outline: 2px solid var(--cyan); outline-offset: 2px; }
  :where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  #main:focus { outline: none; }

  .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

  .eyebrow {
    font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--clay); margin: 0 0 18px;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--clay); display: inline-block; }
  .lead { font-size: 20px; color: var(--ink-soft); line-height: 1.65; }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--font-sans); font-weight: 600; font-size: 17px;
    padding: 15px 26px; border-radius: var(--r-pill); border: 1.5px solid transparent;
    cursor: pointer; white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  }
  .btn-clay { background: var(--amiko-cta); color: #fff; box-shadow: 0 8px 20px rgba(43,39,36,.20); }
  .btn-clay:hover { background: var(--amiko-cta-hover); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(43,39,36,.26); }
  .btn-teal { background: var(--teal); color: #fff; box-shadow: 0 8px 20px rgba(0,104,119,.28); }
  .btn-teal:hover { background: var(--teal-deep); transform: translateY(-2px); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
  .btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
  .btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
  .btn-ghost-light:hover { border-color: #fff; transform: translateY(-2px); }
  .btn svg { width: 18px; height: 18px; }

  .arrow-link { display: inline-flex; align-items: center; gap: 8px; color: var(--clay); font-weight: 600; font-size: 16px; }
  .arrow-link svg { width: 18px; height: 18px; }
  .arrow-link:hover { gap: 11px; }
  .arrow-link.teal { color: var(--teal); }
  .arrow-link.graph { color: var(--graphite); }
  .arrow-link.green { color: var(--cat-checkin); }

  /* ---------- Nav ---------- */
  header.nav {
    position: sticky; top: 0; z-index: 100;
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
    border-bottom: 1px solid transparent;
  }
  header.nav.scrolled {
    background: rgba(251,246,239,.82);
    backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom-color: var(--line-soft);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
  .brand-lockup { display: flex; align-items: center; }
  /* Amiko brand lockup — four-faces symbol + outlined "amiko" wordmark, colour
     (warm-kiss gradient) variant, exported from the Figma source of truth
     (component amiko-lockup / Tone=Colour). One SVG asset, identical on every
     page. The nav sits on paper at all scroll states, so the colour mark always
     has a light ground. */
  .brand-logo { height: 26px; width: auto; display: block; }
  .nav-links { display: flex; align-items: center; gap: 30px; }
  .nav-links a { font-size: 16px; font-weight: 500; color: var(--ink-soft); transition: color .15s ease; }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta { display: flex; align-items: center; gap: 14px; }

  /* Mobile hamburger (control is JS-injected; links already live in the HTML). */
  .nav-toggle { display: none; appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; margin-right: -8px; padding: 0; align-items: center; justify-content: center; color: var(--ink); border-radius: var(--r-md, 12px); }
  .nav-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  .nav-toggle-bars { position: relative; display: block; width: 22px; height: 16px; }
  .nav-toggle-bars span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease, top .25s ease; }
  .nav-toggle-bars span:nth-child(1) { top: 0; }
  .nav-toggle-bars span:nth-child(2) { top: 7px; }
  .nav-toggle-bars span:nth-child(3) { top: 14px; }
  header.nav.is-open .nav-toggle-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  header.nav.is-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
  header.nav.is-open .nav-toggle-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
  .nav-links-cta { display: none; }

  /* Active-page indicator (site.js sets aria-current via path match). Warm action/ink —
     the nav is Amiko chrome, so the "you are here" marker stays warm, never
     teal (teal is reserved for Respiro product moments). */
  .nav-links > a[aria-current="page"] { color: var(--ink); position: relative; }
  .nav-links > a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 2px; background: var(--clay); border-radius: 2px;
  }

  /* ---------- Nav dropdowns (Solutions / Company) ---------- */
  .nav-group { position: relative; display: inline-flex; align-items: center; }
  .nav-group-btn {
    font: inherit; font-size: 16px; font-weight: 500; color: var(--ink-soft);
    background: none; border: 0; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px; transition: color .15s ease;
  }
  .nav-group-btn:hover, .nav-group:hover .nav-group-btn,
  .nav-group:focus-within .nav-group-btn, .nav-group-btn[data-current="true"] { color: var(--ink); }
  .nav-caret { width: 14px; height: 14px; flex: none; transition: transform .2s ease; }
  .nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret,
  .nav-group-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
  .nav-menu {
    position: absolute; top: 100%; left: 50%; margin-top: 12px;
    transform: translateX(-50%) translateY(4px);
    min-width: 198px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow-md); padding: 8px; display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; pointer-events: none; z-index: 120;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .nav-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } /* hover bridge */
  .nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-menu[data-open="true"] {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  }
  .nav-menu a {
    font-size: 15px; font-weight: 500; color: var(--ink-soft); padding: 9px 13px;
    border-radius: 10px; white-space: nowrap; transition: background .14s ease, color .14s ease;
  }
  .nav-menu a:hover, .nav-menu a:focus-visible { background: var(--paper-sink); color: var(--ink); }
  .nav-menu a[aria-current="page"] { color: var(--clay); background: rgba(150,101,62,.07); }

  /* ---------- Section scaffolding ---------- */
  section { padding: 96px 0; }
  .sec-head { max-width: 730px; }
  .sec-head.center { margin: 0 auto; text-align: center; }
  .sec-head h2 { font-size: clamp(30px, 3.8vw, 46px); margin-bottom: 18px; }
  .sec-head .lead { font-size: 19px; }

  /* ---------- Hero ---------- */
  .hero { position: relative; padding: 58px 0 44px; overflow: hidden; }
  .hero-blob { position: absolute; pointer-events: none; z-index: 0; filter: blur(2px); opacity: .55; }
  .hero > .hero-blob.one { top: -270px; right: -175px; width: 500px; height: 500px; opacity: .58; }
  .hero > .hero-blob.two { bottom: -220px; left: -180px; width: 460px; height: 460px; }
  .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 56px; align-items: center; }
  .hero h1 { font-size: clamp(40px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -0.025em; margin-bottom: 24px; }
  .hero h1 em { font-style: italic; color: var(--clay); font-weight: 400; }
  .hero .lead { max-width: 32em; margin-bottom: 34px; font-size: 20px; }
  .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .hero-meta { margin-top: 28px; display: flex; align-items: center; gap: 16px; color: var(--ink-faint); font-size: 15px; font-weight: 500; flex-wrap: wrap; }
  .hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); }

  /* ---------- Hero platform stack visual ---------- */
  .stage { position: relative; display: flex; justify-content: center; isolation: isolate; }
  .hero-visual-halo {
    position: absolute;
    z-index: 0;
    display: block;
    pointer-events: none;
    filter: blur(10px);
  }
  .hero-visual-halo-sensor {
    top: 23%;
    left: calc(50% - 222px);
    width: clamp(150px, 18vw, 228px);
    height: clamp(190px, 22vw, 270px);
    border-radius: 48% 52% 55% 45% / 58% 42% 52% 48%;
    background: rgba(0, 104, 119, .095);
    transform: rotate(-10deg);
  }
  .hero-visual-halo-app {
    top: 4%;
    left: calc(50% + 34px);
    width: clamp(118px, 13vw, 166px);
    height: clamp(148px, 16vw, 204px);
    border-radius: 56% 44% 50% 50% / 40% 55% 45% 60%;
    background: rgba(91, 166, 201, .11);
    transform: rotate(11deg);
  }
  .hero-visual-halo-dashboard {
    top: 66%;
    left: calc(50% - 58px);
    width: clamp(190px, 22vw, 276px);
    height: clamp(112px, 13vw, 164px);
    border-radius: 44% 56% 52% 48% / 48% 40% 60% 52%;
    background: rgba(200, 135, 82, .09);
    transform: rotate(-5deg);
  }
  /* Hero illustration (connected-platform SVG). Scoped class so it can't catch any
     other page's .stage img. Portrait asset (510x587) capped so it reads as a
     companion to the copy, not a billboard. (An animated data-flow overlay was
     explored here and parked — see README; the illustration ships static with its
     own designed connectors.) */
  .hero-figure { position: relative; z-index: 1; width: 100%; max-width: 470px; height: auto; }
  @media (max-width: 720px) {
    .hero > .hero-blob.one { top: -84px; right: -110px; width: 330px; height: 330px; opacity: .60; }
    .hero > .hero-blob.two { top: 520px; bottom: auto; left: -146px; width: 310px; height: 310px; }
    .hero-visual-halo { filter: blur(8px); }
    .hero-visual-halo-sensor { left: calc(50% - 178px); top: 27%; width: 170px; height: 212px; }
    .hero-visual-halo-app { left: calc(50% + 24px); top: 4%; width: 124px; height: 154px; }
    .hero-visual-halo-dashboard { left: calc(50% - 36px); top: 66%; width: 204px; height: 120px; }
  }
  .stack { position: relative; z-index: 1; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
  .scard {
    background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md); padding: 22px 22px; display: flex; align-items: center; gap: 16px;
    position: relative;
  }
  .scard .sc-ic { width: 52px; height: 52px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; }
  .scard .sc-ic svg { width: 26px; height: 26px; }
  .scard .sc-h { font-family: var(--font-serif); font-size: 20px; color: var(--ink); }
  .scard .sc-p { font-size: 14px; color: var(--ink-soft); margin-top: 2px; line-height: 1.45; }
  .scard .sc-step { position: absolute; top: 14px; right: 18px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink-faint); }
  .stack .connector { display: flex; justify-content: center; margin: -8px 0; color: var(--line); }
  .stack .connector svg { width: 20px; height: 20px; }
  .ic-clay { background: rgba(150,101,62,.12); color: var(--clay); }
  .ic-teal { background: rgba(0,104,119,.10); color: var(--teal); }
  .ic-graph { background: rgba(42,39,37,.08); color: var(--graphite); }
  .ic-green { background: rgba(27,169,104,.12); color: var(--cat-checkin); }

  /* ---------- Trust strip ---------- */
  .strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--paper-sink); }
  .wrap.strip-inner {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; justify-content: center;
    gap: 12px 28px; padding: 18px 0; text-align: center;
  }
  .strip-item { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; font-size: 15px; line-height: 1.25; font-weight: 500; color: var(--ink-soft); }
  .strip-item svg { width: 18px; height: 18px; color: var(--clay); flex: none; }

  /* ---------- Platform (sensor -> insight) ---------- */
  /* The homepage #platform pipeline diagram (.pflow) is styled page-scoped in index.html. */
  .platform { background: var(--paper); }

  /* ---------- Respiro flagship (TEAL = product moment) ---------- */
  .flagship { background: var(--paper-teal); }
  .flag-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 60px; align-items: center; }
  .flagship .eyebrow { color: var(--teal); }
  .flagship .eyebrow::before { background: var(--teal); }
  .flagship h2 { font-size: clamp(30px, 3.8vw, 46px); margin-bottom: 20px; }
  .flagship .lead { font-size: 19px; margin-bottom: 26px; }
  .flag-points { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
  .flag-point { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--ink); }
  .flag-point .fp-ic { width: 26px; height: 26px; border-radius: 8px; background: rgba(0,104,119,.10); color: var(--teal); flex: none; display: flex; align-items: center; justify-content: center; }
  .flag-point .fp-ic svg { width: 15px; height: 15px; }

  /* phone mockup (reused from B2C; the flagship's literal product proof) */
  .phone-stage { display: flex; justify-content: center; position: relative; }
  .phone-stage::after { content: ""; position: absolute; inset: auto 0 -10% 0; height: 60%; background: radial-gradient(ellipse at center, rgba(0,104,119,.12), transparent 70%); z-index: 0; filter: blur(8px); }
  .phone { position: relative; z-index: 1; width: 300px; height: 616px; background: #1c1a18; border-radius: 46px; padding: 11px; box-shadow: var(--shadow-lg); }
  /* Flagship visual = the official Respiro "connected platform" illustration
     (assets/img/amiko_homepage_respiro.svg) — the RS01X designed device + patient
     app + clinician dashboard, linked by data-flow lines. Replaced the homepage's
     custom app mockup (.phone-stage/.phone/.screen/.app-* — those styles are kept
     because /respiro/ still uses the mockup). */
  .flag-figure { display: flex; justify-content: center; align-items: center; }
  .flag-figure img { width: 100%; max-width: 448px; height: auto; }

  /* Flagship "product moment" coda — nested inside #platform (replaces the old
     standalone #respiro section). Teal panel = Respiro-the-app, set off from the
     neutral stack/pipeline above it. The 3 patient bullets sit in a 3-up row that
     rhymes with the 3 pipeline nodes; reuses .flag-point / .fp-ic (teal accents). */
  /* Closing "product moment" of the platform section — an UNTITLED payoff (no eyebrow
     or heading) so it reads as part of THIS section, not a new one. Pulled close to the
     pipeline above. SOLID teal banner (the canonical "teal = Respiro product moment"):
     the band IS the teal, white cards sit on it, so the links read teal-on-white — no
     teal-on-teal muddiness. The only saturated cool surface on the page, by design. */
  .pf-coda { margin-top: 40px; background: linear-gradient(160deg, var(--teal), var(--teal-deep)); border-radius: var(--r-lg); padding: 38px 44px 34px; text-align: center; box-shadow: var(--shadow-lg); }
  .pf-coda-lead { max-width: 60ch; margin: 0 auto 28px; color: #fff; font-size: 19px; line-height: 1.6; }
  .pf-coda-lead b { color: var(--cyan); font-weight: 600; }
  /* Proof anchor — quiet hedged line linking down to the clinical-evidence band. */
  .pf-coda-proof { margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.72); }
  .pf-coda-proof a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
  /* The two engagement-model cards (End to end / Your experience, our engine) inside
     the teal band — the platform's "take it whole, or just the engine" versatility. */
  .pf-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; max-width: 880px; margin: 8px auto 6px; }
  .way-card { background: var(--paper-2); border: 1px solid transparent; border-radius: var(--r-md); padding: 24px 24px 20px; display: flex; flex-direction: column; box-shadow: var(--shadow-md); }
  .way-card h4 { font-family: var(--font-serif); font-weight: 500; font-size: 21px; color: var(--ink); margin-bottom: 10px; }
  .way-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 16px; }
  .way-card .arrow-link { margin-top: auto; font-size: 15px; }
  .pf-coda-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; max-width: 880px; margin: 0 auto 30px; }
  .pf-coda-points .flag-point { font-size: 15px; }
  .phone::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; background: #1c1a18; border-radius: var(--r-pill); z-index: 5; }
  .screen { width: 100%; height: 100%; background: var(--paper); border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
  .app-statusbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
  .app-statusbar .icons { display: flex; gap: 6px; align-items: center; }
  .app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 12px; }
  .app-topbar .tb-icons { display: flex; gap: 14px; color: var(--ink-soft); }
  .app-body { flex: 1; overflow: hidden; padding: 0 16px 12px; display: flex; flex-direction: column; gap: 12px; }
  .fc-card { background: linear-gradient(135deg, #fff 0%, #FFF7EC 100%); border: 1px solid var(--line-soft); border-radius: 20px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
  .fc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .fc-now { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
  .fc-pill { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: var(--r-pill); background: rgba(224,163,62,.16); color: #B47A1B; }
  .fc-meter { margin: 4px 0 12px; }
  .fc-track { position: relative; height: 10px; border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0,0,0,.10); background: linear-gradient(90deg, var(--c-low) 0%, var(--c-mid) 52%, var(--c-high) 100%); }
  .fc-thumb { position: absolute; top: 50%; width: 7px; height: 18px; border-radius: 999px; background: #fff; border: 1.5px solid rgba(42,39,37,.20); box-shadow: 0 1px 3px rgba(0,0,0,.22); transform: translate(-50%,-50%); }
  .fc-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
  .fc-text { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
  .fc-loc { margin-top: 9px; font-size: 11px; color: var(--ink-faint); }
  .dose-time { font-weight: 700; font-size: 12.5px; color: var(--ink-soft); margin: 2px 2px -8px; font-variant-numeric: tabular-nums; }
  .dose { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 16px; padding: 12px 13px; display: flex; gap: 11px; align-items: flex-start; box-shadow: var(--shadow-sm); }
  .dose .cat { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; }
  .dose .body { flex: 1; min-width: 0; }
  .dose .name { font-weight: 600; font-size: 14px; }
  .dose .sub { font-size: 12px; color: var(--ink-faint); margin-top: 1px; }
  .qual { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; vertical-align: middle; }
  .qp { width: 14px; height: 6px; border-radius: 999px; background: var(--c-low); }
  .moods { display: flex; gap: 6px; margin-top: 9px; }
  .mood { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 14px; }
  .mood.sel { border-color: var(--cat-checkin); background: rgba(27,169,104,.12); }
  .app-tabbar { display: flex; justify-content: space-around; align-items: center; padding: 9px 8px 16px; border-top: 1px solid var(--line-soft); background: var(--paper-2); }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--ink-faint); }
  .tab.active { color: var(--teal); }
  .tab svg { width: 22px; height: 22px; }

  /* ---------- Clinical evidence (KPI band) ---------- */
  .evidence { background: var(--graphite); color: var(--ink-on-dark); }
  .evidence .eyebrow { color: var(--cyan); }
  .evidence .eyebrow::before { background: var(--cyan); }
  .evidence h2 { color: #fff; }
  .evidence .lead { color: var(--ink-on-dark-soft); }
  .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 54px; }
  .kpi { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-lg); padding: 30px 26px; }
  .kpi .k-num { font-family: var(--font-serif); font-weight: 500; font-size: clamp(38px, 4.4vw, 52px); line-height: 1; color: var(--cyan); margin-bottom: 12px; }
  .kpi:nth-child(2) .k-num { color: #FFC98A; }
  .kpi:nth-child(3) .k-num { color: #8FE3B6; }
  .kpi:nth-child(4) .k-num { color: #E7C7F0; }
  .kpi .k-lab { font-size: 16px; color: #fff; font-weight: 600; margin-bottom: 8px; }
  .kpi .k-sub { font-size: 13.5px; color: #BCB2A8; line-height: 1.5; }
  .kpi .k-src { display: inline-block; margin-top: 16px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cyan); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
  .kpi a.k-src:hover { border-bottom-color: var(--cyan); }
  .ev-foot { max-width: 60em; margin: 34px auto 0; text-align: center; font-size: 13px; color: var(--ink-on-dark-faint); line-height: 1.6; }
  /* Foundation strip — the published-science pedigree (absorbed from the old #research
     section), restyled for the dark Evidence section and kept subordinate to the KPI
     highlight: a divider, smaller muted stat numbers, light journal pills. */
  .ev-foundation { max-width: 860px; margin: 50px auto 0; padding-top: 44px; border-top: 1px solid rgba(255,255,255,.13); }
  .ev-foundation-label { display: block; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-on-dark-faint); margin-bottom: 28px; }
  .evidence .rp-stats { margin: 0 auto 32px; }
  .evidence .rp-stat span { color: var(--ink-on-dark-faint); }
  .evidence .rp-stat .rp-num { font-size: clamp(28px, 3vw, 36px); color: #E2D9CF; }
  .evidence .rp-cited { border-top: none; padding-top: 0; }
  .evidence .rp-cited-label { color: var(--ink-on-dark-faint); }
  .evidence .rp-journals span { color: #E8DFD5; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
  .evidence .arrow-link { color: var(--cyan); }

  /* ---------- Solutions / audiences ---------- */
  .solutions { background: var(--cream); }
  .sol-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 58px; }
  .sol-card {
    background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-xl);
    padding: 34px 32px 30px; box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column;
  }
  .sol-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .sol-ic { width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
  .sol-ic svg { width: 27px; height: 27px; }
  .sol-card h3 { font-size: 25px; margin-bottom: 11px; }
  .sol-card p { color: var(--ink-soft); font-size: 16px; margin-bottom: 22px; flex: 1; }
  .sol-card .arrow-link { margin-top: auto; }

  /* ---------- Research / regulatory panel ---------- */
  .research { background: var(--paper); }
  .research-panel { background: linear-gradient(165deg, var(--paper) 0%, var(--respiro-wash) 100%); border: 1px solid var(--line-soft); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: 56px 48px; text-align: center; }
  .rp-head { max-width: 660px; margin: 0 auto; }
  .research h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 16px; }
  .research .lead { font-size: 18px; }
  .rp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 760px; margin: 42px auto 38px; }
  .rp-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .rp-num { font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px, 4vw, 46px); line-height: 1; color: var(--teal); }
  .rp-stat span { font-size: 14px; color: var(--ink-soft); max-width: 17em; line-height: 1.45; }
  .rp-cited { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
  .rp-cited-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
  .rp-journals { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .rp-journals span { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 7px 16px; }
  .rp-foot { text-align: center; max-width: 52em; margin: 22px auto 0; font-size: 13px; color: var(--ink-faint); line-height: 1.6; }
  /* regulatory badges */
  .reg-wrap { margin-top: 56px; }
  .reg-label { display: block; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 24px; }
  .reg-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .reg-badge { display: flex; align-items: center; gap: 13px; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 14px 22px; box-shadow: var(--shadow-sm); text-align: left; }
  .reg-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: rgba(150,101,62,.10); color: var(--clay); display: inline-flex; align-items: center; justify-content: center; }
  .reg-ico svg { width: 20px; height: 20px; }
  .reg-txt b { font-size: 15px; color: var(--ink); font-weight: 700; display: block; line-height: 1.2; }
  .reg-txt span { font-size: 12.5px; color: var(--ink-faint); display: block; margin-top: 2px; }
  .reg-foot { margin-top: 20px; text-align: center; font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; }

  /* ---------- Sub-page hero (shared across sub-pages) ---------- */
  .page-hero { background: var(--paper); padding: 78px 0 60px; }
  .page-hero h1 { font-size: clamp(34px, 4.8vw, 58px); line-height: 1.04; letter-spacing: -0.022em; margin: 16px 0 20px; max-width: 15em; }
  .page-hero h1 em { font-style: italic; color: var(--clay); font-weight: 400; }
  .page-hero .lead { max-width: 40em; }
  .page-hero .hero-actions { margin-top: 32px; }
  /* Homepage-style floating bubbles, reused on primary non-solution pages.
     Page modifiers vary the palette/placement while keeping one visual system. */
  .page-hero.has-hero-bubbles { isolation: isolate; }
  .page-hero.has-hero-bubbles .hero-echo { display: none; }
  .page-hero.has-hero-bubbles .hero-blob {
    color: #F0E3E7;
    opacity: .48;
  }
  .page-hero.has-hero-bubbles .hero-blob path { fill: currentColor; }
  .page-hero.has-hero-bubbles .hero-blob.one { top: 48px; right: -170px; bottom: auto; left: auto; width: 360px; height: 360px; }
  .page-hero.has-hero-bubbles .hero-blob.two { top: auto; right: auto; bottom: 42px; left: -150px; width: 300px; height: 300px; }
  .page-hero.has-hero-bubbles .hero-blob.three { top: 76px; right: auto; bottom: auto; left: 52%; width: 128px; height: 128px; opacity: .38; }
  .page-hero.hero-bubbles-product .hero-blob.one,
  .page-hero.hero-bubbles-devices .hero-blob.one { color: #D2E7ED; opacity: .54; }
  .page-hero.hero-bubbles-product .hero-blob.two,
  .page-hero.hero-bubbles-devices .hero-blob.two { color: #F0E3E7; opacity: .46; }
  .page-hero.hero-bubbles-product .hero-blob.one { top: 64px; right: -190px; bottom: auto; left: auto; width: 410px; height: 410px; }
  .page-hero.hero-bubbles-product .hero-blob.two { top: auto; right: auto; bottom: 44px; left: -170px; width: 285px; height: 285px; }
  .page-hero.hero-bubbles-product .hero-blob.three { color: #F4EBDC; top: 58px; right: auto; bottom: auto; left: 41%; width: 112px; height: 112px; opacity: .74; }
  .page-hero.hero-bubbles-devices .hero-blob.one { top: 84px; right: auto; bottom: auto; left: -185px; width: 340px; height: 340px; }
  .page-hero.hero-bubbles-devices .hero-blob.two { top: 58px; right: -165px; bottom: auto; left: auto; width: 320px; height: 320px; }
  .page-hero.hero-bubbles-devices .hero-blob.three { color: #F4EBDC; top: auto; right: 18%; bottom: 58px; left: auto; width: 120px; height: 120px; opacity: .82; }
  .page-hero.hero-bubbles-evidence .hero-blob.one { color: #D2E7ED; top: 56px; right: auto; bottom: auto; left: -170px; width: 300px; height: 300px; opacity: .48; }
  .page-hero.hero-bubbles-evidence .hero-blob.two { color: #F0E3E7; top: 118px; right: -160px; bottom: auto; left: auto; width: 320px; height: 320px; opacity: .46; }
  .page-hero.hero-bubbles-evidence .hero-blob.three { color: #F4EBDC; top: auto; right: auto; bottom: 64px; left: 42%; width: 125px; height: 125px; opacity: .78; }
  .page-hero.hero-bubbles-about .hero-blob.one { color: #F0E3E7; top: 52px; right: -160px; bottom: auto; left: auto; width: 320px; height: 320px; opacity: .50; }
  .page-hero.hero-bubbles-about .hero-blob.two { color: #F4EBDC; top: auto; right: auto; bottom: 42px; left: -165px; width: 310px; height: 310px; opacity: .78; }
  .page-hero.hero-bubbles-about .hero-blob.three { color: #D2E7ED; top: 76px; right: auto; bottom: auto; left: 52%; width: 118px; height: 118px; opacity: .38; }
  .page-hero.hero-bubbles-news .hero-blob.one { color: #F0E3E7; top: 34px; right: 11%; bottom: auto; left: auto; width: 250px; height: 250px; opacity: .43; }
  .page-hero.hero-bubbles-news .hero-blob.two { color: #D2E7ED; top: auto; right: auto; bottom: 38px; left: -200px; width: 300px; height: 300px; opacity: .42; }
  .page-hero.hero-bubbles-news .hero-blob.three { color: #F4EBDC; top: auto; right: -60px; bottom: 96px; left: auto; width: 145px; height: 145px; opacity: .76; }
  .page-hero.hero-bubbles-careers .hero-blob.one { color: #D2E7ED; top: 70px; right: auto; bottom: auto; left: -170px; width: 310px; height: 310px; opacity: .44; }
  .page-hero.hero-bubbles-careers .hero-blob.two { color: #F0E3E7; top: auto; right: -160px; bottom: 42px; left: auto; width: 330px; height: 330px; opacity: .48; }
  .page-hero.hero-bubbles-careers .hero-blob.three { color: #F4EBDC; top: 86px; right: 34%; bottom: auto; left: auto; width: 120px; height: 120px; opacity: .80; }
  @media (max-width: 720px) {
    .page-hero.has-hero-bubbles .hero-blob { opacity: .32; filter: blur(3px); }
    .page-hero.has-hero-bubbles .hero-blob.one { top: 30px; right: -170px; bottom: auto; left: auto; width: 260px; height: 260px; }
    .page-hero.has-hero-bubbles .hero-blob.two { top: auto; right: auto; bottom: 34px; left: -150px; width: 230px; height: 230px; }
    .page-hero.has-hero-bubbles .hero-blob.three { display: none; }
    .page-hero.hero-bubbles-devices .hero-blob.one { top: 96px; right: auto; bottom: auto; left: -150px; }
    .page-hero.hero-bubbles-devices .hero-blob.two { top: auto; right: -150px; bottom: 40px; left: auto; }
    .page-hero.hero-bubbles-evidence .hero-blob.one { top: 38px; right: auto; bottom: auto; left: -155px; }
    .page-hero.hero-bubbles-evidence .hero-blob.two { top: 240px; right: -150px; bottom: auto; left: auto; }
    .page-hero.hero-bubbles-about .hero-blob.one { top: 40px; right: -160px; bottom: auto; left: auto; }
    .page-hero.hero-bubbles-about .hero-blob.two { top: auto; right: auto; bottom: 38px; left: -150px; }
    .page-hero.hero-bubbles-news .hero-blob.one { top: 32px; right: 10px; bottom: auto; left: auto; width: 220px; height: 220px; }
    .page-hero.hero-bubbles-news .hero-blob.two { top: auto; right: auto; bottom: 34px; left: -150px; }
    .page-hero.hero-bubbles-careers .hero-blob.one { top: 84px; right: auto; bottom: auto; left: -150px; }
    .page-hero.hero-bubbles-careers .hero-blob.two { top: auto; right: -155px; bottom: 38px; left: auto; }
  }
  /* Faint per-page hero motif that foreshadows the page's signature visual */
  .page-hero { position: relative; overflow: hidden; }
  .page-hero .wrap { position: relative; z-index: 1; }
  .hero-echo {
    position: absolute; top: 50%; right: clamp(-96px, -6vw, -42px); transform: translateY(-50%);
    width: clamp(320px, 30vw, 430px); height: clamp(320px, 30vw, 430px);
    color: var(--amiko-accent); opacity: .78; pointer-events: none; z-index: 0;
  }
  .hero-echo svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .hero-echo .echo-shell,
  .hero-echo .echo-line {
    fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .hero-echo .echo-shell { stroke-width: 1.35; opacity: .24; }
  .hero-echo .echo-line { stroke-width: 1.8; opacity: .42; }
  .hero-echo .echo-dash { stroke-dasharray: 7 11; opacity: .30; }
  .hero-echo .echo-fill { fill: currentColor; opacity: .055; stroke: none; }
  .hero-echo .echo-dot { fill: currentColor; stroke: none; opacity: .36; }
  .hero-echo .echo-dot-strong { opacity: .56; }
  .hero-echo .echo-panel { fill: var(--paper-2); stroke: currentColor; stroke-width: 1.1; opacity: .34; vector-effect: non-scaling-stroke; }
  @media (max-width: 1120px) { .hero-echo { display: none; } }

  /* ---------- Platform hero — Propeller-style split (text left, product photo right) ---------- */
  .page-hero.has-photo { padding: 60px 0 58px; }
  .page-hero.has-photo .hero-split { display: grid; grid-template-columns: 1.12fr .88fr; gap: 44px; align-items: center; }
  .hero-split-copy { max-width: 580px; }
  .hero-split-media { position: relative; justify-self: center; width: 100%; max-width: 520px; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5 / 4.4; box-shadow: var(--shadow-md); }
  .hero-split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Placeholder treatment — delete .hero-photo-ph + this rule once a real photo lands */
  .hero-photo-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--paper-teal); border: 2px dashed var(--line); border-radius: var(--r-lg); color: var(--ink-faint); text-align: center; padding: 24px; }
  .hero-photo-ph svg { width: 40px; height: 40px; color: var(--teal); opacity: .55; }
  .hero-photo-ph span { font-size: 14px; line-height: 1.5; }
  .hero-photo-ph b { color: var(--ink-soft); font-weight: 600; }
  @media (max-width: 940px) {
    .page-hero.has-photo .hero-split { grid-template-columns: 1fr; gap: 30px; }
    .hero-split-media { max-width: 440px; aspect-ratio: 5 / 4; }
  }

  /* ---------- Two-column split feature (shared) ---------- */
  .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; margin-top: 18px; }
  /* Grid children default to min-width:auto, which refuses to shrink below their content
     and overflows the collapsed 1-column cell on very narrow phones (≤~342px). */
  .split > * { min-width: 0; }
  .split-aside { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: 32px 30px; }

  /* ---------- Quality & compliance page ---------- */
  .cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 22px; margin-top: 52px; }
  .cert-grid:has(> .cert-card:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cert-card { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 30px 28px; display: flex; flex-direction: column; }
  .cert-ic { width: 48px; height: 48px; border-radius: 13px; background: rgba(150,101,62,.10); color: var(--clay); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex: none; }
  .cert-ic svg { width: 24px; height: 24px; }
  .cert-tag { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px; }
  .cert-card h3 { font-size: 21px; line-height: 1.2; margin-bottom: 11px; }
  .cert-card p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.62; }
  .ctrl-list { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
  .ctrl-list li { display: flex; gap: 11px; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
  .ctrl-list svg { width: 18px; height: 18px; color: var(--clay); flex: none; margin-top: 2px; }
  .qc-note { margin-top: 38px; padding: 18px 22px; background: var(--paper-sink); border: 1px solid var(--line-soft); border-radius: var(--r-md); font-size: 13px; color: var(--ink-faint); line-height: 1.6; max-width: 60em; }

  /* ---------- Legal / utility pages ---------- */
  .legal-section { background: var(--paper); }
  .legal-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }
  .legal-toc {
    position: sticky; top: 108px; background: var(--paper-2);
    border: 1px solid var(--line-soft); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); padding: 22px;
    max-height: calc(100vh - 132px); overflow-y: auto;
  }
  .legal-toc h2 {
    font-family: var(--font-sans); font-size: 12px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
    margin-bottom: 10px;
  }
  .legal-toc a {
    display: block; padding: 8px 0; color: var(--ink-soft);
    font-size: 15px; line-height: 1.35; border-top: 1px solid var(--line-soft);
  }
  .legal-toc a:first-of-type { border-top: 0; }
  .legal-toc a:hover { color: var(--clay); }
  .legal-copy { max-width: 780px; }
  .legal-section .reveal {
    opacity: 1;
    transform: none;
  }
  .legal-copy > p:first-child {
    color: var(--ink-faint); font-size: 14px; margin-bottom: 26px;
  }
  .legal-block {
    padding: 30px 0; border-top: 1px solid var(--line-soft);
    scroll-margin-top: 132px;
  }
  .legal-block:target h2 { color: var(--clay); }
  .legal-block:first-of-type { border-top: 0; padding-top: 0; }
  .legal-block h2 { font-size: clamp(25px, 3vw, 34px); margin-bottom: 14px; }
  .legal-block h3 {
    font-family: var(--font-sans); font-size: 17px; line-height: 1.3;
    font-weight: 700; letter-spacing: 0; margin: 22px 0 8px;
  }
  .legal-block p,
  .legal-block li { color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
  .legal-block p + p { margin-top: 12px; }
  .legal-block ul { margin: 14px 0 0; padding-left: 20px; }
  .legal-callout {
    margin: 24px 0 0; padding: 18px 20px; border-radius: var(--r-md);
    background: var(--paper-sink); border: 1px solid var(--line-soft);
    color: var(--ink-soft); font-size: 15px; line-height: 1.65;
  }
  .foot-legal-links { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .foot-legal-links a { color: var(--foot-text); transition: color .15s ease; }
  .foot-legal-links a:hover { color: #fff; }

  /* ---------- Provider workflow visual ---------- */
  .provider-workflow { background: var(--cream); }
  .provider-flow-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 34px; align-items: center; margin-top: 52px; }
  .provider-steps { display: flex; flex-direction: column; gap: 14px; }
  .provider-step {
    display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: flex-start;
    padding: 18px 18px 18px 16px; background: rgba(255,253,248,.72);
    border: 1px solid rgba(224,213,194,.86); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
  }
  .provider-step > span {
    width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--graphite); color: var(--ink-on-dark); font-weight: 700; font-size: 13px; line-height: 1; margin-top: 2px;
  }
  .provider-step h3 { font-size: 20px; margin-bottom: 6px; }
  .provider-step p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }

  .careboard {
    background: linear-gradient(180deg, var(--paper-2) 0%, #FAF3EA 100%);
    border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md);
    padding: 24px; overflow: hidden;
  }
  .careboard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
  .careboard-top span, .care-detail span {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--clay); margin-bottom: 4px;
  }
  .careboard-top b, .care-detail b { display: block; font-family: var(--font-serif); font-size: 25px; line-height: 1.12; color: var(--ink); font-weight: 600; }
  .careboard-top em {
    flex: none; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-soft); background: var(--paper-sink); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 11px;
  }
  .careboard-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .careboard-tabs span {
    border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 6px 11px;
    font-size: 12px; font-weight: 700; color: var(--ink-faint); background: rgba(255,255,255,.56);
  }
  .careboard-tabs .is-active { color: var(--teal); border-color: rgba(0,104,119,.24); background: rgba(0,104,119,.08); }
  .care-row {
    display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 13px 0; border-top: 1px solid var(--line-soft);
  }
  .care-row.is-hot { border-top-color: rgba(203,75,51,.18); }
  .care-row.is-selected {
    background: rgba(0,104,119,.05); box-shadow: inset 3px 0 0 var(--teal);
    border-top-color: transparent; border-radius: 8px; margin: 0 -12px; padding: 13px 12px;
  }
  .avatar {
    width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(175,113,132,.16); color: var(--amiko-mauve); font-size: 12px; font-weight: 800;
  }
  .avatar.teal { background: rgba(0,104,119,.12); color: var(--teal); }
  .avatar.blue { background: rgba(91,166,201,.16); color: #3D7FA0; }
  .avatar.green { background: rgba(54,165,146,.15); color: var(--amiko-green); }
  .care-main { min-width: 0; }
  .care-main b { display: block; font-size: 15px; color: var(--ink); line-height: 1.2; }
  .care-main span { display: block; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
  .care-score {
    border-radius: var(--r-pill); padding: 5px 9px; font-size: 11px; font-weight: 800; letter-spacing: .03em;
    border: 1px solid transparent; white-space: nowrap;
  }
  .care-score.high { color: #A53B28; background: rgba(203,75,51,.10); border-color: rgba(203,75,51,.18); }
  .care-score.mid { color: #9B671B; background: rgba(224,163,62,.12); border-color: rgba(224,163,62,.22); }
  .care-score.low { color: #2F7E58; background: rgba(62,155,110,.11); border-color: rgba(62,155,110,.20); }
  .care-detail {
    margin-top: 16px; padding: 17px 18px 14px; border: 1px solid rgba(0,104,119,.16);
    border-radius: var(--r-lg); background: rgba(0,104,119,.04); box-shadow: inset 3px 0 0 var(--teal);
  }
  .care-detail svg { width: 100%; height: auto; margin-top: 10px; }
  .care-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .care-chips span {
    display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--ink);
    background: rgba(255,255,255,.7); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 6px 11px;
  }
  .care-chips span.up { color: #A53B28; background: rgba(203,75,51,.08); border-color: rgba(203,75,51,.18); }
  .care-chips span.warn { color: #9B671B; background: rgba(224,163,62,.10); border-color: rgba(224,163,62,.22); }

  /* ---------- Newsroom ---------- */
  .news { background: var(--paper-sink); }
  .news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 50px; }
  .news-card { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 28px 26px; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
  .news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .nc-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
  .nc-cat { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--clay); background: rgba(150,101,62,.10); padding: 4px 11px; border-radius: var(--r-pill); }
  .nc-date { font-size: 13px; color: var(--ink-faint); }
  .nc-h { font-family: var(--font-serif); font-size: 21px; line-height: 1.18; color: var(--ink); margin-bottom: 10px; }
  .news-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 18px; flex: 1; }

  /* ---------- Careers ---------- */
  .careers { background: var(--paper); }
  .careers-band {
    background: linear-gradient(150deg, var(--clay) 0%, var(--clay-deep) 100%); color: #FBEFE6;
    border-radius: var(--r-xl); padding: 56px 52px; position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center;
  }
  .careers-band .cb-blob { position: absolute; right: -80px; top: -90px; width: 320px; height: 320px; opacity: .18; pointer-events: none; }
  .careers-band .eyebrow { color: #FFD7C2; }
  .careers-band .eyebrow::before { background: #FFD7C2; }
  .careers-band h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 14px; position: relative; }
  .careers-band p { color: #F4D9C9; font-size: 18px; line-height: 1.6; position: relative; max-width: 32em; }
  .careers-band .cb-actions { position: relative; display: flex; justify-content: flex-end; }
  .btn-cream { background: #fff; color: var(--clay-deep); }
  .btn-cream:hover { background: var(--cream); transform: translateY(-2px); }

  /* ---------- Final CTA / contact ---------- */
  .cta { background: var(--graphite); color: var(--ink-on-dark); text-align: center; position: relative; overflow: hidden; }
  .cta .blob { position: absolute; opacity: .4; pointer-events: none; }
  .cta h2 { color: #fff; font-size: clamp(34px, 4.4vw, 54px); margin-bottom: 18px; }
  .cta .lead { color: var(--ink-on-dark-soft); max-width: 34em; margin: 0 auto 34px; font-size: 20px; }
  .contact-form { display: flex; gap: 12px; justify-content: center; max-width: 560px; margin: 0 auto; flex-wrap: wrap; }
  .contact-form input { flex: 1; min-width: 200px; padding: 15px 20px; border-radius: var(--r-pill); border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-family: var(--font-sans); font-size: 16px; }
  .contact-form input::placeholder { color: var(--ink-on-dark-faint); }
  .contact-form input:focus { outline: none; border-color: var(--clay); }
  .contact-form .cf-message { flex-basis: 100%; width: 100%; padding: 14px 20px; border-radius: var(--r-md); border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; resize: vertical; min-height: 84px; }
  .contact-form .cf-message::placeholder { color: var(--ink-on-dark-faint); }
  .contact-form .cf-message:focus { outline: none; border-color: var(--clay); }
  .cta-note { margin-top: 18px; font-size: 14px; color: var(--ink-on-dark-faint); }
  .cta-ok { margin-top: 22px; color: var(--cyan); font-weight: 600; display: none; }
  .cta-offices { display: flex; justify-content: center; gap: 14px 40px; flex-wrap: wrap; margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.10); }
  .office { text-align: left; }
  .office .o-city { font-family: var(--font-serif); font-size: 17px; color: #fff; margin-bottom: 4px; }
  .office .o-addr { font-size: 13.5px; color: var(--ink-on-dark-faint); line-height: 1.5; }

  /* ---------- Footer ---------- */
  footer { background: var(--surface-dark-deep); color: var(--foot-text); padding: 72px 0 40px; }
  .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .cobrand { display: flex; align-items: center; margin-bottom: 18px; }
  /* Reversed lockup (cream #F4ECE3) — footer sits on --surface-dark-deep. */
  .cobrand-logo { height: 34px; width: auto; display: block; }
  .foot-tag { font-size: 15px; color: var(--ink-faint); max-width: 27em; line-height: 1.6; }
  .foot-prod { margin-top: 18px; font-size: 14px; color: var(--ink-faint); }
  .foot-prod a { color: var(--cyan); font-weight: 600; }
  .foot-col h4 { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6E655D; margin-bottom: 16px; }
  .foot-col a { display: block; font-size: 15px; color: var(--foot-text); padding: 6px 0; transition: color .15s ease; }
  .foot-col a:hover { color: #fff; }
  .foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; flex-wrap: wrap; gap: 14px; }
  .foot-bottom p { font-size: 13px; color: var(--foot-faint); }
  .foot-bottom .friend { font-family: var(--font-serif); font-style: italic; color: var(--ink-faint); }
  .disclaimer { font-size: 12px; color: var(--foot-faint); max-width: 64em; margin-top: 14px; line-height: 1.6; }

  /* ---------- Closing motif (removed 2026-06) ----------
     The light-section -> CTA pages previously ended with a thin signature rule
     (an inspiratory "breath" waveform, later a data-flow node wave). Removed at
     the user's request: sections now flow straight into the closing CTA. The
     markup is gone from every page; this note is a breadcrumb in case we revive
     a closing flourish later. (History in git: .breath-rule / .flow-rule.) */

  /* ---------- Diagram build-in utilities (driven by .reveal.in) ----------
     The per-page signature diagrams "build themselves" as they scroll into
     view, reusing the existing IntersectionObserver (.reveal -> .in, site.js).
     All initial-hidden states live INSIDE prefers-reduced-motion:no-preference,
     so with reduced motion the parts render final + visible — never stuck
     hidden. Stagger any group via inline style="--i:N" (0,1,2,...).
       .draw-in  stroke line-draw (target needs pathLength="100")
       .rise     fade + lift up
       .grow     scale up from the element's own centre (HTML nodes or SVG shapes) */
  @media (prefers-reduced-motion: no-preference) {
    .draw-in { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.5s ease .15s; }
    .in .draw-in, .draw-in.in { stroke-dashoffset: 0; }
    .rise { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
    .in .rise, .rise.in { opacity: 1; transform: none; }
    .grow { opacity: 0; transform: scale(.55); transform-box: fill-box; transform-origin: center; transition: opacity .5s ease, transform .55s cubic-bezier(.2,.75,.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
    .in .grow, .grow.in { opacity: 1; transform: none; }

    /* Homepage hero blobs — a very slow, gentle "breathing" drift: asymmetric
       squash/stretch (so the perimeter softly morphs, not a rigid spin) + a hair
       of rotation, the two out of phase + different periods so they never sync.
       Gated to no-preference; the existing blur(2px) reads it as an organic wave. */
    .hero-blob { will-change: transform; }
    .hero-blob.one { animation: blob-drift-a 19s ease-in-out infinite; }
    .hero-blob.two { animation: blob-drift-b 23s ease-in-out infinite; }
    .hero-blob.three { animation: blob-drift-c 29s ease-in-out infinite; }
  }
  @keyframes blob-drift-a {
    0%, 100% { transform: scale(1, 1) rotate(0deg); }
    30%      { transform: scale(1.075, 0.94) rotate(2.5deg); }
    62%      { transform: scale(0.945, 1.065) rotate(-1.5deg); }
  }
  @keyframes blob-drift-b {
    0%, 100% { transform: scale(1, 1) rotate(0deg); }
    34%      { transform: scale(0.94, 1.075) rotate(-2.5deg); }
    66%      { transform: scale(1.065, 0.945) rotate(1.5deg); }
  }
  @keyframes blob-drift-c {
    0%, 100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
    38%      { transform: translate3d(10px,-8px,0) scale(1.045, .97) rotate(-1.2deg); }
    72%      { transform: translate3d(-6px,9px,0) scale(.97, 1.04) rotate(1.1deg); }
  }

  /* ---------- Chart kit (shared SVG data-viz primitives) ----------
     Factored from the breathing-risk forecast (the first chart). A new chart
     should reuse these instead of reinventing per-page fc-* classes:
       .chart            card shell (880px, paper, shadow) — wrap with .reveal
       .chart-head / -eyebrow / h3 / -tag   header row + "Illustrative" pill
       .chart-plot       holds the <svg>; sizes it to the box AND forces Outfit
                         on <text> (SVG <text> falls back to UA-serif otherwise)
       .chart-band.is-{low,mid,high}        horizontal zone tint rects
       .chart-zlab / -xlab                  y-zone + x-category axis labels
       .chart-line       the data trend (draws in via the shared .draw-in)
       .chart-guide      dashed annotation rule;  .chart-annot  its label
       .chart-dot.is-{low,mid,high}         data points (pop via shared .grow)
       .chart-foot / -legend / -take / -disc   takeaway + legend + disclaimer
     Risk palette is chart-scoped vars, NOT :root brand tokens, so it can't
     drift the B2C site. var() resolves here because these are CSS rules, not
     SVG presentation attributes (where var() would fall back to black). */
  .chart { /* --c-low / --c-mid / --c-high now live in :root (global risk spine) */
    max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: 26px 28px 22px; }
  .chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .chart-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); margin-bottom: 6px; }
  .chart-head h3 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); color: var(--ink); line-height: 1.18; margin: 0; }
  .chart-tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper-sink); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; }
  .chart-plot svg { width: 100%; height: auto; display: block; }
  .chart-plot text { font-family: 'Outfit', system-ui, sans-serif; }
  .chart-band.is-high { fill: rgba(203,75,51,.08); }
  .chart-band.is-mid  { fill: rgba(224,163,62,.11); }
  .chart-band.is-low  { fill: rgba(63,155,110,.10); }
  .chart-zlab { fill: var(--ink-faint); font-size: 11px; font-weight: 600; }
  .chart-xlab { fill: var(--ink-soft); font-size: 12px; font-weight: 500; text-anchor: middle; }
  .chart-now { fill: var(--clay); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-anchor: middle; }
  .chart-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .chart-guide { stroke: var(--risk-amber); stroke-width: 1.4; stroke-dasharray: 3 3; }
  .chart-annot { fill: #B9802A; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
  .chart-dot { stroke: #fff; stroke-width: 2; }
  .chart-dot.is-low { fill: var(--c-low); }
  .chart-dot.is-mid { fill: var(--c-mid); }
  .chart-dot.is-high { fill: var(--c-high); }
  .chart-halo { fill: var(--c-mid); } /* soft emphasis ring behind a flagged point (use opacity attr) */
  .chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
  .chart-legend { display: flex; gap: 16px; flex: none; }
  .chart-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
  .chart-legend i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
  .chart-take { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; max-width: 48ch; }
  .chart-take b { color: var(--ink); font-weight: 600; }
  .chart-disc { font-size: 12px; color: var(--ink-faint); margin: 14px 0 0; line-height: 1.45; }
  /* Interactive data points + floating tooltip (opt-in: add data-day/level/tip +
     tabindex to .chart-dot; site.js builds the tip and the hit targets). The tip
     accent (--tip) is set per-point from the dot's own fill, so it auto-matches
     the risk-zone colour. Focus shows an ink ring on the point (SVG outline is
     unreliable cross-browser). */
  .chart-plot { position: relative; }
  .chart-dot[tabindex] { cursor: pointer; }
  .chart-hit { cursor: pointer; }
  .chart-dot[tabindex]:focus-visible { outline: none; stroke: var(--ink); stroke-width: 3; }
  .chart-tip {
    position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    min-width: 132px; max-width: 220px; padding: 10px 13px;
    background: var(--paper-2); border: 1px solid var(--line);
    border-top: 3px solid var(--tip, var(--clay)); border-radius: var(--r-md);
    box-shadow: var(--shadow-md); text-align: left;
    opacity: 0; transition: opacity .16s ease; }
  .chart-tip.is-on { opacity: 1; }
  .chart-tip::after {
    content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px;
    background: var(--paper-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    transform: translateX(-50%) rotate(45deg); }
  .chart-tip .tip-day { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 16px; color: var(--ink); }
  .chart-tip .tip-level { display: inline-block; margin: 3px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tip, var(--clay)); }
  .chart-tip .tip-note { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
  @media (max-width: 760px) {
    .chart { padding: 22px 18px 18px; }
    .chart-foot { flex-direction: column; align-items: flex-start; gap: 13px; }
  }

  /* ---------- Reveal ---------- */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
  .reveal.in { opacity: 1; transform: none; }

  /* ---------- Responsive ---------- */
  @media (max-width: 960px) {
    .hero-grid, .flag-grid, .careers-band, .split, .provider-flow-grid { grid-template-columns: 1fr; gap: 44px; }
    /* Hero copy leads on mobile; the illustration follows it (was order:-1 when the
       stage was empty/decorative). */
    .stage { order: 0; }
    .hero-figure { max-width: 380px; }
    .pf-coda { padding: 32px 22px 28px; }
    .pf-coda-points { grid-template-columns: 1fr; gap: 14px; max-width: 420px; }
    .pf-ways { grid-template-columns: 1fr; gap: 14px; max-width: 460px; }
    .wrap.strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; column-gap: 26px; padding-block: 18px; }
    .cert-grid:has(> .cert-card:nth-child(3):last-child) { grid-template-columns: 1fr; max-width: 680px; margin-left: auto; margin-right: auto; gap: 14px; }
    .cert-grid:has(> .cert-card:nth-child(3):last-child) .cert-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-items: flex-start; padding: 22px 24px; }
    .cert-grid:has(> .cert-card:nth-child(3):last-child) .cert-ic { grid-row: 1 / span 2; margin: 0; }
    .cert-grid:has(> .cert-card:nth-child(3):last-child) .cert-card h3 { margin-bottom: 0; }
    .kpi-grid, .news-grid, .rp-stats { grid-template-columns: 1fr; gap: 18px; }
    .legal-layout { grid-template-columns: 1fr; gap: 24px; }
    .legal-toc {
      position: sticky; top: 88px; z-index: 30; display: flex; align-items: center; gap: 8px;
      max-height: none; overflow-x: auto; overflow-y: hidden; padding: 10px 12px;
      border-radius: var(--r-pill); scrollbar-width: none;
    }
    .legal-toc::-webkit-scrollbar { display: none; }
    .legal-toc h2 { flex: 0 0 auto; margin: 0; padding: 0 4px 0 2px; }
    .legal-toc a {
      flex: 0 0 auto; border: 1px solid var(--line-soft); border-radius: var(--r-pill);
      background: var(--paper); padding: 7px 10px; font-size: 13px; white-space: nowrap;
    }
    .legal-toc a:first-of-type { border-top: 1px solid var(--line-soft); }
    .legal-block { scroll-margin-top: 156px; }
    .careers-band .cb-actions { justify-content: flex-start; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    section { padding: 72px 0; }
  }
  @media (max-width: 860px) {
    /* Hamburger drawer for tablets too: the horizontal nav (logo + 5 items +
       CTA) needs ~815px and overflowed the viewport at 721–860px (e.g. iPad
       portrait 768px). The desktop nav returns at min-width:861px below. */
    .nav-toggle { display: inline-flex; }
    .nav-cta { display: none; }
    header.nav.is-open { background: var(--paper, #FBF6EF); border-bottom-color: var(--line-soft); }
    .nav-links {
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--paper-2, #fff); border-bottom: 1px solid var(--line);
      box-shadow: var(--shadow-md); padding: 6px 0;
      max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
      transform: translateY(-6px);
      transition: max-height .3s ease, opacity .2s ease, transform .25s ease, visibility .3s;
    }
    header.nav.is-open .nav-links { height: calc(100dvh - 76px); max-height: calc(100vh - 76px); overflow-y: auto; opacity: 1; visibility: visible; transform: none; }
    .nav-links a { padding: 14px 24px; font-size: 18px; }
    .nav-links a:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
    .nav-links-cta {
      display: block; position: static; padding: 16px 24px 18px;
      background: var(--paper-2, #fff); border-top: 1px solid var(--line-soft);
      box-shadow: 0 -12px 24px rgba(43,39,36,.06);
    }
    .nav-links-cta .btn {
      width: 100%; justify-content: center;
      padding: 15px 24px; color: #fff; background: var(--amiko-cta);
      box-shadow: 0 10px 24px rgba(43,39,36,.22);
    }
    .nav-links-cta .btn:hover,
    .nav-links-cta .btn:focus-visible {
      color: #fff; background: var(--amiko-cta-hover);
    }
    /* In the dropdown panel the desktop underline would clash with the row
       dividers, so the active marker becomes a left warm-action bar instead. */
    .nav-links > a[aria-current="page"] { color: var(--clay); background: rgba(150,101,62,.07); box-shadow: inset 3px 0 0 var(--clay); }
    .nav-links > a[aria-current="page"]::after { display: none; }
    /* Dropdowns render inline-expanded in the mobile panel (group name = a faint
       header, its items indented below — no collapse/JS needed on mobile). */
    .nav-group { display: block; }
    .nav-group-btn {
      width: 100%; justify-content: flex-start; padding: 14px 24px 8px; font-size: 13px;
      font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
      cursor: default;
    }
    .nav-group-btn .nav-caret { display: none; }
    .nav-menu {
      position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
      box-shadow: none; border: 0; border-radius: 0; background: transparent; padding: 0; min-width: 0; margin: 0;
    }
    .nav-group:hover .nav-menu,
    .nav-group:focus-within .nav-menu,
    .nav-menu[data-open="true"] {
      opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    }
    .nav-menu::before { display: none; }
    .nav-menu a {
      padding: 13px 24px 13px 38px; font-size: 17px; border-radius: 0;
      border-bottom: 1px solid var(--line-soft);
    }
    .nav-menu a[aria-current="page"] { color: var(--clay); background: rgba(150,101,62,.07); box-shadow: inset 3px 0 0 var(--clay); }
  }
  @media (max-width: 720px) {
    body { font-size: 17px; }
    .hero .lead { font-size: 19px; }
    .wrap { padding: 0 20px; }
    .cert-grid:has(> .cert-card:nth-child(3):last-child) .cert-card { display: flex; flex-direction: column; }
    .cert-grid:has(> .cert-card:nth-child(3):last-child) .cert-ic { margin-bottom: 16px; }
    .provider-step { grid-template-columns: 38px 1fr; padding: 16px; }
    .provider-step > span { width: 30px; height: 30px; font-size: 12px; }
    .careboard { padding: 18px; }
    .careboard-top { flex-direction: column; align-items: flex-start; }
    .careboard-top b, .care-detail b { font-size: 22px; }
    .care-row { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
    .care-score { grid-column: 2; justify-self: flex-start; margin-top: -2px; }
    .foot-grid { grid-template-columns: 1fr; }
    .research-panel { padding: 36px 22px; }
    .careers-band { padding: 40px 26px; }
  }
  @media (max-width: 560px) {
    .wrap.strip-inner { grid-template-columns: 1fr; justify-items: start; align-items: start; gap: 12px; padding: 18px 20px; text-align: left; }
    .strip-item { justify-content: flex-start; text-align: left; }
    /* Audience cards keep the 2-up grid through tablet (561–960px); single column on phones only. */
    .sol-grid { grid-template-columns: 1fr; gap: 18px; }
    /* Long-label hero CTAs (e.g. pharma's "Discuss a connected programme") wrap to fit
       instead of overflowing the viewport on the smallest phones (≤~324px). */
    .hero-actions .btn { white-space: normal; max-width: 100%; }
  }
  @media (min-width: 861px) {
    .hero,
    .page-hero {
      min-height: var(--landing-hero-min);
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }
    .hero .wrap,
    .page-hero .wrap { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { transition: none; opacity: 1; transform: none; }
    .nav-links, .nav-toggle-bars span, .skip-link, .chart-tip { transition: none; }
  }