/* ============================================================
     dōse.one — three intentional tiers, not one fluid squish
     BASE styles below target MOBILE (≤640px).
     @media (min-width:641px)  → TABLET   (641–1024px)
     @media (min-width:1025px) → DESKTOP  (>1024px)
     Type, spacing, order, and visibility are set per tier.
     ============================================================ */

  /* ===================== TOKENS ===================== */
  :root{
    --navy:#192953;
    --deep-navy:#000b32;
    --cobalt:#224eea;
    --pale:#c2e9ff;
    --white:#ffffff;
    --bone:#f7f3ec;    /* Soft Ivory — neutral background */
    --ink:#1A1A1A;
    --offwhite:#F2EFE4;
    --gold:#C9A24B;

    --hair-dark:rgba(25,41,83,.14);
    --hair-light:rgba(242,239,228,.18);
    --pale-deep:#a9dcff;

    --display:'Fraunces',Georgia,serif;
    --body:'Hanken Grotesk',system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,monospace;

    --maxw:1240px;
    --r:14px;

    /* tier-driven (mobile defaults) */
    --gut:20px;
    --sec-pad:56px;

    /* ── STANDARD PAGE RHYTHM (sitewide default — keep consistent across pages) ──
       --header-h : height of the sticky top nav (already reserved in normal flow)
       --page-top : standard vertical gap between the header and the FIRST content
                    section on a page. Applied automatically to the first .sec in
                    <main> via `main > .sec:first-child` below, so every page/section
                    inherits consistent top spacing. (--sec-pad governs the gap
                    BETWEEN sections.) New pages need no extra markup. */
    --header-h:88px;
    --page-top:24px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bone);
    color:var(--ink);
    font-family:var(--body);
    font-size:16px;              /* MOBILE body */
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  body.menu-open{overflow:hidden}
  ::selection{background:var(--cobalt);color:var(--white)}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  :focus-visible{outline:2.5px solid var(--cobalt);outline-offset:3px;border-radius:2px}

  .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

  /* visibility helpers (mobile defaults) */
  .only-desktop{display:none}
  .only-mobile{display:block}

  /* ===================== SHARED ATOMS ===================== */
  .eyebrow{
    font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--navy);display:inline-flex;align-items:center;gap:.7em;font-weight:500;
  }
  .tick{display:inline-block;width:24px;height:3px;border-radius:2px;background:var(--cobalt);flex:0 0 auto}
  .tick--gold{background:var(--gold);height:2px;width:28px}
  .on-dark .eyebrow{color:var(--gold)}

  .display{
    font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:-.018em;
    color:var(--navy);font-optical-sizing:auto;
  }
  .lede{font-size:1rem;line-height:1.55;max-width:60ch;color:#3a3f4d}   /* MOBILE lede */

  /* buttons — tap-friendly by default (mobile) */
  .btn{
    font-family:var(--body);font-weight:600;font-size:1rem;letter-spacing:.01em;
    border:none;cursor:pointer;border-radius:100px;
    min-height:50px;padding:0 1.6em;
    display:inline-flex;align-items:center;justify-content:center;gap:.55em;
    transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s,box-shadow .25s,color .25s;
  }
  .btn--primary{background:var(--cobalt);color:var(--white);box-shadow:0 1px 0 rgba(0,0,0,.04)}
  .btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(34,78,234,.6)}
  .btn--ghost{background:transparent;color:var(--cobalt)}
  .btn--ghost .arw{transition:transform .25s}
  .btn--ghost:hover .arw{transform:translateX(5px)}

  /* ===================== ANNOUNCEMENT TICKER (above header) ===================== */
  .ticker{background:var(--navy);color:#fff;overflow:hidden}
  .ticker-track{display:flex;width:max-content;animation:ticker 40s linear infinite}
  .ticker-group{display:flex;align-items:center;flex:0 0 auto;padding:9px 0}
  .ti{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
    color:#fff;white-space:nowrap;padding:0 1.5em}
  .ticker-group i{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:0 0 auto;font-style:normal}
  @keyframes ticker{to{transform:translateX(-50%)}}

  /* ===================== HEADER (mobile base) ===================== */
  .site-head{
    position:sticky;top:0;z-index:80;
    background:#f7f3ec;                         /* Soft Ivory — top state */
    -webkit-backdrop-filter:saturate(160%) blur(14px);
    backdrop-filter:saturate(160%) blur(14px);
    border-bottom:1px solid var(--hair-dark);
    transition:box-shadow .3s,background .3s;
  }
  /* scrolled → semi-transparent White with subtle backdrop blur */
  .site-head.scrolled{background:rgba(255,255,255,.72);box-shadow:0 8px 26px -18px rgba(0,11,50,.45)}
  .nav{position:relative;display:flex;align-items:center;justify-content:space-between;height:64px}
  /* logo: centered, larger with tight padding (header height held) */
  .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center}
  .brand img{height:56px;width:auto}            /* MOBILE logo — larger, tight padding */
  .nav-side{display:flex;align-items:center;gap:1.6em}
  .nav-left{display:none}                        /* desktop only */
  .nav-right{gap:.3em}
  .nav-right .nav-link-r{display:none}           /* desktop only */
  /* account icon — visible in the bar on mobile + desktop */
  .account{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    color:var(--navy);transition:color .2s}
  .account:hover{color:var(--cobalt)}
  .account svg{width:23px;height:23px}

  /* hamburger (mobile) — far left */
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;
    width:44px;height:44px;background:none;border:none;cursor:pointer;
  }
  .nav-toggle span{width:24px;height:2px;background:var(--navy);display:block;border-radius:2px;
    transition:transform .3s,opacity .2s}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ===================== MOBILE / TABLET MENU OVERLAY ===================== */
  .menu{
    position:fixed;inset:0;z-index:70;
    background:var(--navy);color:var(--offwhite);
    padding:84px var(--gut) 32px;
    display:flex;flex-direction:column;
    transform:translateY(-100%);opacity:0;pointer-events:none;
    transition:transform .42s cubic-bezier(.4,.9,.2,1),opacity .3s;
    overflow-y:auto;
  }
  .menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .menu-nav{display:flex;flex-direction:column;border-top:1px solid var(--hair-light)}
  .menu-nav a{
    font-family:var(--display);font-size:2rem;font-weight:400;color:var(--offwhite);
    padding:.6em 0;border-bottom:1px solid var(--hair-light);
    display:flex;align-items:center;justify-content:space-between;
  }
  .menu-nav a .idx{font-family:var(--mono);font-size:.7rem;color:var(--gold);letter-spacing:.1em}
  .menu-foot{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;gap:18px}
  .menu-account{
    font-family:var(--mono);font-size:.92rem;color:var(--pale);letter-spacing:.04em;
    display:flex;align-items:center;gap:.7em;min-height:44px;
  }
  .menu-account svg{width:20px;height:20px}
  .menu .btn{width:100%}

  /* ===================== HERO ===================== */
  .hero{padding:28px 0 44px;background:var(--white)}   /* MOBILE — white hero */
  .hero-grid{display:flex;flex-direction:column;gap:32px}
  .hero-copy{order:1}                              /* trust row pulled out → keep mobile order */
  .hero h1{font-size:2.5rem;line-height:1.14;margin:.5em 0 .1em}   /* MOBILE headline */
  .hero h1 em{font-style:italic;font-weight:300}
  .hero h1 .hl2{white-space:nowrap}            /* keep "demands certainty." on one line */
  .h1-sub{display:block;font-size:.52em;font-weight:400;color:var(--navy);
    line-height:1.14;letter-spacing:-.01em;margin-top:.62em}

  /* signature: calibration measure */
  .calib{margin:26px 0;max-width:430px}
  .calib-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.6em}
  .calib-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#6a6f7c}
  .calib-read{font-family:var(--mono);font-weight:500;color:var(--navy);font-size:1.05rem}
  .calib-read b{color:var(--cobalt);font-weight:500}
  .calib-track{position:relative;height:3px;background:var(--hair-dark);border-radius:3px}
  .calib-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--cobalt);border-radius:3px}
  .calib-dot{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;
    background:var(--cobalt);transform:translate(-50%,-50%) scale(0);box-shadow:0 0 0 5px rgba(34,78,234,.16)}
  .calib-ticks{display:flex;justify-content:space-between;margin-top:.55em}
  .calib-ticks span{font-family:var(--mono);font-size:.6rem;color:#9aa0ad;letter-spacing:.05em}
  .calib-note{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#6a6f7c;margin-top:.85em}

  /* CTAs — MOBILE: full width, stacked */
  .hero-cta{display:flex;flex-direction:column;gap:12px;margin-top:26px}
  .hero-cta .btn{width:100%}

  /* visual: stage holds the product image */
  .hero-visual{position:relative;order:2}
  .stage{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden}
  .stage-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

  /* verification spec card — MOBILE: static block */
  .spec-card{
    position:static;order:3;margin-top:16px;width:100%;
    background:var(--white);border-radius:12px;
    box-shadow:0 18px 44px -24px rgba(0,11,50,.4);
    padding:16px 18px;border-top:3px solid var(--gold);
  }
  .spec-card h4{font-family:var(--display);font-weight:500;font-size:1.15rem;color:var(--navy);margin-bottom:.55em}
  .spec-line{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.76rem;
    padding:.5em 0;border-top:1px solid var(--hair-dark);color:var(--ink)}
  .spec-line:first-of-type{border-top:none}
  .spec-line b{color:var(--cobalt);font-weight:500}

  /* ===================== TRUST STRIP ===================== */
  .strip{display:none}                          /* marquee hidden on MOBILE */
  .strip-mobile{                                /* looping ticker, MOBILE only — matches top navy ticker */
    background:var(--navy);color:#fff;overflow:hidden;
  }

  /* ===================== SECTION SCAFFOLD ===================== */
  .sec{padding:var(--sec-pad) 0}
  /* STANDARD: a page's first content section sits a consistent --page-top below the header.
     (The hero is a full-bleed <section class="hero">, not .sec, so it's unaffected.) */
  main > .sec:first-child{padding-top:var(--page-top)}
  .sec-head{max-width:640px;margin-bottom:32px}
  .sec-head h2{font-size:1.9rem;margin:.5em 0 .35em}   /* MOBILE h2 */
  .sec-head p{font-size:1rem;color:#4a4f5c}

  /* ===================== THE RANGE — browse by research area ===================== */
  .range .sec-head .eyebrow{color:var(--cobalt)}        /* cobalt eyebrow */

  /* MOBILE (base): full-width wide banners, text overlaid on the open side */
  .range-cards{display:flex;flex-direction:column;gap:14px}
  .cat-card{
    position:relative;display:flex;align-items:center;overflow:hidden;isolation:isolate;
    min-height:214px;padding:24px;border-radius:12px;text-decoration:none;
    border:1px solid var(--hair-dark);
    background-image:var(--wide);background-size:cover;background-position:center;background-repeat:no-repeat;
    transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
  }
  .cat-card::before{content:"";position:absolute;inset:0;z-index:1}     /* light scrim on the text side */
  .cat-card--left{justify-content:flex-start;text-align:left}
  .cat-card--right{justify-content:flex-end;text-align:right}
  .cat-card--left::before{background:linear-gradient(90deg,rgba(247,248,247,.94) 0%,rgba(247,248,247,.6) 34%,transparent 64%)}
  .cat-card--right::before{background:linear-gradient(270deg,rgba(247,248,247,.94) 0%,rgba(247,248,247,.6) 34%,transparent 64%)}
  .cat-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -28px rgba(0,11,50,.4)}
  .cat-media{display:none}                               /* square image hidden on mobile */
  .cat-body{position:relative;z-index:2;max-width:60%;display:flex;flex-direction:column}
  .cat-title{font-family:var(--display);font-weight:500;font-size:1.55rem;line-height:1.06;color:var(--navy);letter-spacing:-.01em}
  .cat-desc{font-size:.84rem;line-height:1.42;color:#3a3f4d;margin:.55em 0 .8em;max-width:32ch}
  .cat-link{font-family:var(--body);font-weight:600;font-size:.86rem;color:var(--cobalt);display:inline-flex;align-items:center;gap:.4em}
  .cat-card--right .cat-link{justify-content:flex-end}
  .cat-link .arw{transition:transform .25s}
  .cat-card:hover .cat-link .arw{transform:translateX(4px)}

  /* Shop All bar */
  .range-bar{display:flex;align-items:center;justify-content:space-between;gap:1.4em;
    margin-top:14px;padding:22px 24px;border-radius:12px;text-decoration:none;
    background:var(--navy);color:var(--offwhite);
    transition:background .25s,transform .35s,box-shadow .35s}
  .range-bar:hover{background:var(--deep-navy);box-shadow:0 20px 44px -26px rgba(0,11,50,.55)}
  .range-bar:hover .range-bar-arrow{transform:translateX(6px)}
  .range-bar-main{font-family:var(--display);font-weight:500;font-size:1.5rem;color:var(--offwhite);display:block;line-height:1.05}
  .range-bar-sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#a9afc2;display:block;margin-top:.55em}
  .range-bar-arrow{flex:0 0 auto;font-size:1.7rem;line-height:1;color:var(--gold);transition:transform .3s}

  /* DESKTOP (>768px): three white cards in a row, square image on top */
  @media (min-width:769px){
    .range-cards{flex-direction:row;gap:20px;align-items:stretch}
    .cat-card{flex:1;min-height:0;padding:0;background-image:none;background:var(--white);
      display:flex;flex-direction:column;align-items:stretch;text-align:left}
    .cat-card::before{display:none}                      /* no scrim on desktop */
    .cat-media{display:block;aspect-ratio:1/1;background-image:var(--sq);
      background-size:cover;background-position:center;border-bottom:1px solid var(--hair-dark)}
    .cat-body{max-width:none;padding:24px 24px 26px;flex:1}
    .cat-title{font-size:1.5rem}
    .cat-desc{font-size:.94rem;margin:.55em 0 1.2em;max-width:none;flex:1}
    .cat-card--right .cat-link{justify-content:flex-start}
    .range-bar{margin-top:22px;padding:28px 40px}
    .range-bar-main{font-size:1.9rem}
    .range-bar-sub{font-size:.72rem}
    .range-bar-arrow{font-size:2.1rem}
  }

  /* ===================== WHY DŌSE.ONE (navy two-column, mono-label pillars) ===================== */
  .principle{background:var(--navy);color:var(--offwhite)}
  .principle .display{color:var(--offwhite)}
  .principle-grid{display:flex;flex-direction:column;gap:30px}
  .principle h2{font-size:1.9rem;line-height:1.08}
  .principle h2 em{font-style:italic;font-weight:300;color:var(--pale)}
  .principle-lede{font-size:1.02rem;color:#cdd2de;margin-top:1.1em;max-width:46ch}
  .pts{display:flex;flex-direction:column}
  /* MOBILE: measure label sits ABOVE the title */
  .pt{padding:1.4em 0;border-top:1px solid var(--hair-light)}
  .pt:last-child{border-bottom:1px solid var(--hair-light)}
  .pt-measure{font-family:var(--mono);font-size:.72rem;color:var(--gold);letter-spacing:.08em;
    text-transform:uppercase;display:block;margin-bottom:.5em}
  .pt h3{font-family:var(--display);font-weight:500;font-size:1.3rem;color:var(--offwhite);margin-bottom:.3em}
  .pt p{color:#c2c7d4;font-size:.96rem;max-width:46ch}

  /* ===================== PROVEN QUALITY — verification ===================== */
  .verify{background:#f7f3ec}                          /* light cream */
  .verify .eyebrow{color:var(--cobalt)}
  .verify-grid{display:flex;flex-direction:column;gap:34px}
  .verify h2{font-size:1.9rem;margin:.5em 0 .55em}
  .verify h2 em{font-style:italic;font-weight:300}
  .verify-body{font-size:1rem;line-height:1.55;color:#3a3f4d;max-width:48ch}

  /* stat row */
  .stats{display:flex;flex-wrap:wrap;gap:1.4em 1.6em;margin:1.7em 0}
  .stat{display:flex;flex-direction:column}
  .stat b{font-family:var(--display);font-weight:500;font-size:1.85rem;color:var(--navy);line-height:1}
  .stat span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#6a6f7c;margin-top:.55em}

  /* CTA */
  .verify-cta{display:flex;flex-direction:column;gap:1em;align-items:flex-start;margin-top:.3em}
  .verify-cta .btn{width:100%}
  .verify-note{font-family:var(--mono);font-size:.72rem;color:#5a5f6c;letter-spacing:.02em}
  .verify-note b{color:var(--cobalt);font-weight:600}

  /* floating Certificate of Analysis panel (keeps the facts-panel aesthetic) */
  .panel{background:var(--white);border-radius:var(--r);
    box-shadow:0 30px 70px -34px rgba(0,11,50,.4);border:1px solid var(--hair-dark);overflow:hidden}
  .panel-head{position:relative;padding:20px 20px 16px;border-bottom:3px solid var(--navy)}
  .panel-head .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .panel-head h4{font-family:var(--display);font-weight:500;font-size:1.5rem;color:var(--navy);margin-top:.25em;min-height:1.15em}
  .panel-head .serv{font-family:var(--mono);font-size:.72rem;color:#5a5f6c;margin-top:.55em}
  .panel-head .accred{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:#9aa0ad;margin-top:.45em}
  .pass-badge{position:absolute;top:18px;right:20px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
    text-transform:uppercase;font-weight:500;color:#1f9d57;background:rgba(31,157,87,.12);
    padding:.5em .8em;border-radius:100px;display:inline-flex;align-items:center;gap:.5em}
  .pass-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#1f9d57}
  .tw-cursor{display:inline-block;width:2px;height:.92em;background:var(--navy);margin-left:.06em;
    vertical-align:-.06em;animation:blink 1.05s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}

  .panel-rows{padding:4px 20px 18px}
  .prow{display:grid;grid-template-columns:1fr auto;gap:1em;align-items:baseline;
    padding:.72em 0;border-top:1px solid var(--hair-dark);font-family:var(--mono);font-size:.76rem}
  .prow:first-child{border-top:none}
  .prow .nm{font-family:var(--body);font-weight:500;color:var(--ink)}
  .prow .res{color:var(--cobalt);font-weight:500;text-align:right;white-space:nowrap}
  .panel-foot{padding:12px 20px 18px;border-top:1px solid var(--navy);
    font-family:var(--mono);font-size:.64rem;color:#7a7f8c;line-height:1.5}

  /* ===================== SUBSCRIBE BAND ===================== */
  .sub{background:var(--pale)}
  .sub-inner{display:flex;flex-direction:column;gap:26px}
  .sub h2{font-size:1.9rem;color:var(--navy);margin:.4em 0 .35em}
  .sub p{color:#33425e;font-size:1rem;max-width:46ch}
  .sub-form{background:var(--white);border-radius:var(--r);padding:22px;box-shadow:0 24px 60px -30px rgba(0,11,50,.35)}
  .sub-form label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#6a6f7c;display:block;margin-bottom:.8em}
  .field{display:flex;flex-direction:column;gap:10px}     /* MOBILE: stacked */
  .field input{width:100%;border:1px solid var(--hair-dark);border-radius:100px;
    min-height:50px;padding:0 1.2em;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--bone)}
  .field input:focus{outline:none;border-color:var(--cobalt);background:var(--white)}
  .field .btn{width:100%}
  .sub-fine{font-family:var(--mono);font-size:.66rem;color:#8a8f9c;margin-top:1.1em;letter-spacing:.02em}

  /* ===================== FOOTER ===================== */
  .foot{background:var(--deep-navy);color:var(--offwhite);padding:48px 0 28px}
  .foot-top{display:grid;grid-template-columns:1fr;gap:30px;padding-bottom:34px;border-bottom:1px solid var(--hair-light)}
  .foot-brand img{height:26px;filter:brightness(0) invert(1);opacity:.95;margin-bottom:1em}
  .foot-brand p{color:#aeb4c4;font-size:.9rem;max-width:34ch}
  .foot-col h5{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.9em}
  .foot-col a{display:block;color:#cdd2de;font-size:.95rem;padding:.5em 0;transition:color .2s}
  .foot-col a:hover{color:var(--white)}
  .foot-bottom{display:flex;flex-direction:column;gap:.6em;padding-top:24px;
    font-family:var(--mono);font-size:.7rem;color:#8a90a4;letter-spacing:.03em}

  /* ===================== REVEAL ===================== */
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}

  /* ============================================================
     TABLET — 641px to 1024px
     ============================================================ */
  @media (min-width:641px){
    :root{--gut:40px;--sec-pad:88px}
    .only-mobile{display:none}

    /* hero: copy on top (constrained), visual centered below */
    .hero{padding:48px 0 64px}
    .hero h1{font-size:3.6rem}
    .lede{font-size:1.1rem}
    .hero-cta{flex-direction:row;flex-wrap:wrap}
    .hero-cta .btn{width:auto}
    .hero-visual{max-width:480px;margin-inline:auto;width:100%}
    .stage{aspect-ratio:4/5}
    .spec-card{max-width:340px}

    /* trust: animated marquee returns */
    .strip-mobile{display:none}
    .strip{display:block;border-block:1px solid var(--hair-dark);background:#f5f2e2;overflow:hidden}
    .strip-track{display:flex;gap:3.5em;white-space:nowrap;width:max-content;padding:14px 0;
      animation:slide 34s linear infinite;
      font-family:var(--mono);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--navy)}
    .strip-track span{display:inline-flex;align-items:center;gap:.8em}
    .strip-track i{width:5px;height:5px;border-radius:50%;background:var(--gold);font-style:normal}

    .sec-head h2{font-size:2.6rem}
    .sec-head p{font-size:1.06rem}

    /* why dōse.one: heading left, pillars right */
    .principle-grid{gap:40px}
    .principle h2{font-size:2.5rem}
    .pt{display:grid;grid-template-columns:120px 1fr;gap:1.4em;align-items:start;padding:1.6em 0}
    .pt-measure{margin-bottom:0;padding-top:.35em;text-transform:none}

    /* verify: 2-col, narrative left / CoA panel right */
    .verify-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
    .verify h2{font-size:2.5rem}
    .stat b{font-size:2rem}
    .stat+.stat{border-left:1px solid var(--hair-dark);padding-left:1.6em}
    .verify-cta{flex-direction:row;align-items:center;gap:1.4em}
    .verify-cta .btn{width:auto}
    .panel-head{padding:22px 26px 18px}
    .panel-head h4{font-size:1.9rem}
    .pass-badge{top:22px;right:26px}
    .panel-rows{padding:6px 26px 22px}
    .prow{font-size:.82rem;gap:1em}
    .panel-foot{padding:14px 26px 22px}

    /* subscribe: 2-col, inline field */
    .sub-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
    .sub h2{font-size:2.5rem}
    .sub-form{padding:26px}
    .field{flex-direction:row;gap:.6em}
    .field .btn{width:auto;flex:0 0 auto}

    /* footer: brand spans full row, 3 link columns beneath */
    .foot{padding:64px 0 32px}
    .foot-top{grid-template-columns:repeat(3,1fr);gap:2em 2.4em}
    .foot-brand{grid-column:1 / -1}
    .foot-bottom{flex-direction:row;justify-content:space-between;align-items:center;padding-top:28px}
  }

  /* ============================================================
     MOBILE reorder — ≤768px
     order: eyebrow → headline → sub-line → image → readout
            → body → buttons → spec card
     (display:contents promotes the copy's children so the image
      can sit between the sub-line and the purity readout)
     ============================================================ */
  @media (max-width:768px){
    /* full-bleed three-vial image as the hero background; text over the white top */
    .hero{padding:34px 0 0;min-height:calc(330px + 116vw);
      background-color:#f7f8f7;                     /* match the image backdrop so there's no white box behind the text */
      /* top gradient (same colour) hides the contain image's top-edge seam that crossed the headline */
      background-image:
        linear-gradient(180deg,#f7f8f7 0%,#f7f8f7 16%,rgba(247,248,247,0) 25%),
        url("hero-mobile-vials.png");
      background-repeat:no-repeat,no-repeat;
      background-size:cover,contain;
      background-position:top center,center bottom}
    .hero-copy{display:contents}
    .hero-grid{gap:0}
    /* order: headline → body → button → reassurance line */
    .hero h1{order:2;margin:0}                    /* headline first */
    .h1-sub{display:none}                          /* remove sub-line on mobile */
    .calib{display:none}                           /* remove purity readout on mobile */
    .hero-visual{display:none}                     /* contained image removed — now the background */
    .lede{order:5;margin:18px 0 0}                 /* body copy */
    .hero-cta{order:6;flex-direction:column;margin-top:24px}
    .hero-cta .btn{width:100%}
    .hero-cta .btn--ghost{display:none}            /* remove "How we verify" */
    /* eyebrow becomes a small reassurance line tucked under the button */
    .hero .eyebrow{order:7;margin-top:11px;justify-content:center;
      font-size:.56rem;color:#6a6f7c}
    .hero .eyebrow .tick{display:none}
    .spec-card{display:none}
  }

  /* ============================================================
     DESKTOP — >1024px
     ============================================================ */
  @media (min-width:1025px){
    :root{--gut:64px;--sec-pad:120px}
    body{font-size:17px}
    .only-desktop{display:block}

    /* header: centered logo, nav split around it, no hamburger */
    .nav{height:88px}
    .brand img{height:76px}                       /* DESKTOP logo — larger, tighter padding */
    .nav-toggle{display:none}
    .menu{display:none}
    .nav-left{display:flex}
    .nav-right{gap:1.7em}
    .nav-right .nav-link-r{display:inline-flex}
    .nav-side a:not(.account){font-size:.92rem;font-weight:500;color:var(--navy);position:relative;padding:.4em 0}
    .nav-side a:not(.account)::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;
      background:var(--cobalt);transition:width .28s cubic-bezier(.2,.7,.3,1)}
    .nav-side a:not(.account):hover::after,.nav-side a:not(.account):focus-visible::after{width:100%}

    /* hero: full-bleed product image; fits the viewport (ticker 34 + header 90 + hero = 100vh) */
    .hero{height:calc(100vh - 124px);min-height:calc(100vh - 124px);max-height:calc(100vh - 124px);
      box-sizing:border-box;overflow:hidden;padding:40px 0 36px;
      background-image:url("hero-vials-3-desktop.png");
      background-repeat:no-repeat;background-size:cover;background-position:right bottom}
    .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:72px;row-gap:0;align-items:center}
    .hero-copy{grid-column:1;grid-row:1;min-width:0}
    .hero h1{font-size:5rem;max-width:none;margin:.34em 0 .2em}
    .lede{font-size:1.2rem;max-width:46ch}
    /* right-side image container + spec card removed on desktop (image is now the background) */
    .hero-visual{display:none}
    .spec-card{display:none}

    .sec-head h2{font-size:3.2rem}

    .principle-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
    .principle h2{font-size:3.2rem}
    .principle-lede{font-size:1.12rem}

    .verify-grid{grid-template-columns:1fr 1.02fr;gap:80px}
    .verify h2{font-size:3.1rem}
    .stat b{font-size:2.1rem}

    .sub-inner{grid-template-columns:1.1fr .9fr;gap:70px}
    .sub h2{font-size:3rem}
    .sub p{font-size:1.06rem}

    .foot-top{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4em}
    .foot-brand{grid-column:auto}
  }

  @keyframes slide{to{transform:translateX(-50%)}}

  /* ===================== REDUCED MOTION ===================== */
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}
    .menu{transition:none}
  }

  /* ===================== CATALOG PAGE ===================== */
  .catalog .eyebrow{color:var(--cobalt)}
  .cat-header{max-width:680px;margin-bottom:clamp(26px,4vw,38px)}
  .cat-header h1{font-size:clamp(2.3rem,6vw,3.4rem);color:var(--navy);margin:.4em 0 .35em}
  .cat-header .lede{font-size:1rem;color:#3a3f4d;max-width:54ch}

  /* search */
  .cat-search{position:relative;max-width:540px;margin-bottom:16px}
  .cat-search input{width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);
    background:var(--white);border:1px solid var(--hair-dark);border-radius:100px;
    min-height:54px;padding:0 1.2em 0 3.1em}
  .cat-search input::placeholder{color:#9aa0ad}
  .cat-search input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(34,78,234,.13)}
  .cat-search-icon{position:absolute;left:1.15em;top:50%;transform:translateY(-50%);
    width:18px;height:18px;color:#8a8f9c;pointer-events:none}

  /* filter pills */
  /* filter pills — horizontal swipe slider (no wrapping), single row on every width */
  .cat-filters{display:flex;flex-wrap:nowrap;gap:.55em;margin-bottom:clamp(24px,4vw,36px);
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    scroll-snap-type:x proximity;padding-bottom:2px}
  .cat-filters::-webkit-scrollbar{display:none}
  .pill{font-family:var(--body);font-weight:600;font-size:.86rem;cursor:pointer;line-height:1;
    flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;
    border-radius:100px;padding:.7em 1.2em;border:1px solid var(--hair-dark);
    background:transparent;color:var(--navy);transition:background .2s,color .2s,border-color .2s}
  .pill:hover{border-color:var(--navy)}
  .pill.is-active{background:var(--navy);color:var(--offwhite);border-color:var(--navy)}

  /* product grid — MOBILE: 2 across */
  .cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .pcard{background:var(--white);border:1px solid var(--hair-dark);border-radius:12px;overflow:hidden;
    text-decoration:none;display:flex;flex-direction:column;
    transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
  .pcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(0,11,50,.4)}
  .pcard.is-hidden{display:none}
  .pcard-img{aspect-ratio:1/1;background-size:cover;background-position:center;background-repeat:no-repeat;
    border-bottom:1px solid var(--hair-dark)}
  .pcard-body{padding:14px 14px 16px;display:flex;flex-direction:column;flex:1}
  .pcard-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
    color:#6a6f7c;display:flex;align-items:center;gap:.5em;margin-bottom:.6em}
  .pcard-tag .tick{width:16px;height:2px}
  .pcard-name{font-family:var(--display);font-weight:500;font-size:1.2rem;color:var(--navy);line-height:1.05}
  .pcard-spec{font-family:var(--mono);font-size:.62rem;color:#5a5f6c;margin-top:.5em;letter-spacing:.02em}
  .pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-top:auto;padding-top:.9em}
  .pcard-price{font-family:var(--mono);font-weight:500;font-size:.92rem;color:var(--navy)}
  .pcard-cta{font-family:var(--body);font-weight:600;font-size:.8rem;color:var(--cobalt);
    display:inline-flex;align-items:center;gap:.3em;flex:0 0 auto}
  .pcard-cta .arw{transition:transform .25s}
  .pcard:hover .pcard-cta .arw{transform:translateX(3px)}
  .cat-empty{font-family:var(--mono);font-size:.9rem;color:#6a6f7c;text-align:center;padding:48px 0}

  /* product grid — DESKTOP: 4 across */
  @media (min-width:769px){
    .cat-header h1{font-size:3.4rem}
    .cat-grid{grid-template-columns:repeat(4,1fr);gap:22px}
    .pcard-body{padding:18px 18px 20px}
    .pcard-tag{font-size:.6rem}
    .pcard-name{font-size:1.4rem}
    .pcard-spec{font-size:.7rem}
    .pcard-price{font-size:.95rem}
    .pcard-cta{font-size:.84rem}
  }