:root{
  /* ============================================================
     CURI PALETTE — official brand swatches, ALL-WARM (2026-08-03).

     Brand teal #3E7B8F has been REMOVED from the site. What remains
     is a complete warm neutral scale, every value of it official:
       ink #1A1A1A · #5D554D · clay #6B5A4E · taupes #93847A #9E9189
       sands #E8E3DF #F1EDEA #F5F2F1 · white
     Nothing here is invented. The 2026-07-31 drift happened by
     inventing colours (a sky-blue/navy/espresso set that replaced
     every official swatch), so this deliberately adds no new hue.

     ⚠️ EMPHASIS NOW COMES FROM VALUE AND TYPE, NOT HUE. The
     photographs are the only colour on the page — that is the point
     of the direction, not an oversight. Before adding a hue anywhere,
     ask whether a photograph should be carrying it instead.

     ⚠️ TOKEN NAMES ARE HISTORICAL. --teal, --teal-dk, --teal-soft,
     --blue, --blue-2 no longer hold teal or blue; they hold warm
     values. Renaming them means touching 100+ usages, so they are
     kept as legacy aliases. READ THE VALUE, NOT THE NAME.

     ⚠️ Data blue #3987e5 is gone too. Every use of it was a
     SINGLE-VALUE indicator (progress rings, meters, selected states),
     never a multi-series chart, so ink carries them without losing
     any categorical distinction. #c98500 (identity trace) and
     #2E7D4F (PASS) are kept — both are semantic and both still read
     correctly on warm grounds. If a chart with 3+ categories is ever
     added, it needs validated hues again; this is not a licence to
     colour data by value.
     ============================================================ */

  /* --- ink & text --- */
  --ink:#1A1A1A;            /* headings */
  --ink-2:#5D554D;          /* secondary text — warm, not cool grey */
  --lab:#5D554D;            /* body */
  --gray:#6B5A4E;           /* muted TEXT — #93847A is an official swatch
                               but fails AA as type on every ground (2.8-3.6);
                               this is the next official step down and clears
                               AA at 5.2 on the darkest. #93847A stays for
                               non-text use via --taupe. */

  /* --- section grounds --- */
  --t-paper:#FFFFFF;        /* 1. paper */
  --t-sand:#F1EDEA;         /* 2. warm sand */
  --t-mist:#F5F2F1;         /* 3. warm pale */
  --t-sky:#E8E3DF;          /* 4. deepest warm sand */
  --t-deep:#1A1A1A;         /* 5. ink — the committed dark */
  --t-clay:#5D554D;         /* 6. warm dark taupe */

  /* --- the one accent --- */
  --teal:#6B5A4E;           /* LEGACY NAME — this is clay, not teal.
                               The warm accent: eyebrows, links, small
                               emphasis. 6.6:1 on white. */
  --teal-dk:#5D554D;
  --accent:#6B5A4E;         /* eyebrow dots, markers. One accent, not two —
                               the amber was never a brand colour */

  /* --- GLASS SYSTEM ---------------------------------------------
     Modelled on nor.ma, whose glass reads as a material rather than an
     effect for one reason: ONE blur and TWO alpha tiers across the whole
     site. curí had drifted to TEN different blur radii and ~25 different
     alphas, all decided per-element. That inconsistency is what made the
     boxes read as solid cards.

     ⚠️ ALPHA IS PER-SURFACE, NOT A GLOBAL TIER. This was got wrong once:
     a single "sheer" value (.58) was derived from the DARKEST surface on
     the site and then applied everywhere, which made every card an opaque
     slab. The hero only needs .28. Pricing needs .10.
     Each surface's alpha is the minimum its OWN measured backdrop allows,
     plus a small margin. Measured darkest backdrop, blurred at 18px:
        hero claim buttons    rgb(107,84,58)   -> .34
        Claim Studio surfaces rgb(85,43,28)    -> .48
        endpoint intro panel  rgb(20,14,6)     -> .56
        endpoint cards/detail rgb(5,7,6)       -> .58
        about stat cards      rgb(37,38,36)    -> .52
        pricing intro panel   rgb(166,170,167) -> .18
     All type on these surfaces is INK, so the alpha is set by ink alone and
     hierarchy comes from size and weight. Adding grey type back to any of
     them forces the alpha up and the glass turns to paint again. */
  --glass-blur:18px;
  --glass-sat:1.15;
  --glass-sheer:rgba(255,255,255,.58);
  --glass-dense:rgba(255,255,255,.86);
  --glass-edge:rgba(255,255,255,.38);
  --glass-lift:inset 0 1px 0 rgba(255,255,255,.55);
  --glass-cast:0 14px 40px rgba(60,52,45,.16);
  --glass-cast-lg:0 20px 54px rgba(60,52,45,.20);
  /* on dark grounds the same material inverts */
  /* INK glass — a card over a BRIGHT photo carrying white type.
     ⚠️ Polarity note: nor.ma uses 10% WHITE glass with white text because
     their photography is dark. curí's photographs are bright and high-key,
     so the same fidelity needs the inverse — light glass with ink type, or
     ink glass with white type. Copying their alpha literally would fail. */
  --glass-ink:rgba(26,26,26,.62);
  --glass-ink-edge:rgba(255,255,255,.18);
  --glass-dk:rgba(255,255,255,.10);
  --glass-dk-edge:rgba(255,255,255,.22);
  --glass-dk-hover:rgba(255,255,255,.18);

  /* --- lines --- */
  --line:#E8E3DF;           /* warm divider */
  --line-cool:#E8E3DF;      /* LEGACY NAME — a warm divider now */

  /* --- legacy token names mapped onto the official swatches, so every
         existing rule inherits the correction without a rewrite --- */
  --paper:#FFFFFF;
  --sand:#F1EDEA;
  --sand-2:#E8E3DF;
  --sand-3:#DDD5CE;
  --cool:#F5F2F1;
  --cool-2:#F5F2F1;
  --teal-soft:#E8E3DF;
  --teal-deep:#1A1A1A;
  --teal-wash:#E8E3DF;
  --clay:#6B5A4E;
  --taupe-dk:#6B5A4E;
  --taupe:#93847A;
  --taupe-2:#9E9189;
  --paper-2:#F5F2F1;
  --blue:#6B5A4E;
  --blue-2:#6B5A4E;
  /* arrow chip: translucent disc + solid arrow, applied as an alpha mask */
  --chip:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23fff' fill-opacity='.2'/%3E%3Cpath d='M8.5 13h8M13 9.5l3.5 3.5-3.5 3.5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --radius:14px;
  --sans:"IBM Plex Sans",Arial,sans-serif;
  --body:"Inter",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
/* ---- section color-blocking rhythm ---- */
.sec-sand{background:var(--sand)}
.sec-sand-2{background:var(--sand-2)}
/* ⚠️ GRADIENT GROUND (2026-09-02). Deliberately inside the LIGHT family: a
   photograph here would fight the certificate card and the stat room, and a
   dark ground would force every measurement in this section to be redone.
   The deep end was pulled back from #C9BDB2, where --lab body copy measured
   4.35 and would have failed. Re-measure if either stop moves. */
.grad-sand{background:linear-gradient(163deg,
  /* deep end pulled back from #DCD3CB, where the section eyebrow measured
     4.45 against the 4.5 it needs. That worst case only occurs if the eyebrow
     ever moves down the block, but the margin is not worth keeping. */
  #EFEAE6 0%, #E7E1DB 46%, #E0D8D1 100%)}
.sec-sand-3{background:var(--sand-3)}
.sec-cool{background:var(--cool)}
/* the saturated brights — these are what make the page feel alive */
.sec-sky{background:var(--t-sky)}
.sec-mist{background:var(--t-mist)}
/* on sky, ink stays black: it is a light theme, just a loud one */
.sec-sky h1,.sec-sky h2,.sec-sky h3{color:var(--ink)}
.sec-sky .lede,.sec-sky p{color:#5D554D}
.sec-sky .eyebrow{color:#5D554D}
.sec-sky .eyebrow.dot::before{background:var(--accent)}
/* deep blocks — the bold end of the system */
.sec-ink{background:var(--ink);color:#fff}
.sec-taupe{background:var(--taupe-dk);color:#fff}
.sec-teal{background:var(--teal-deep);color:#fff}
/* goals sits directly under the credential band (#E8E3DF). With teal gone
   the two were separated only by HUE and collapsed together. Lightest sand
   so the seam is carried by VALUE. Do not set this back to var(--teal-wash). */
.sec-teal-wash{background:#F5F2F1}
.sec-clay{background:var(--clay);color:#fff}
.sec-ink,.sec-taupe,.sec-teal,.sec-clay{--on-dark:1}
.sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4,
.sec-taupe h1,.sec-taupe h2,.sec-taupe h3,.sec-taupe h4,
.sec-teal h1,.sec-teal h2,.sec-teal h3,.sec-teal h4,
.sec-clay h1,.sec-clay h2,.sec-clay h3,.sec-clay h4,.sec-clay h3.h4{color:#fff}
.sec-ink .lede,.sec-ink p,.sec-taupe .lede,.sec-taupe p,
.sec-teal .lede,.sec-teal p,.sec-clay .lede,.sec-clay p{color:rgba(255,255,255,.82)}
.sec-ink .eyebrow{color:#D8C9B4}
.sec-taupe .eyebrow{color:#E8DED2}
.sec-teal .eyebrow{color:#D8C9B4}
.sec-clay .eyebrow{color:#F0DCCF}
/* cards sitting on deep blocks */
.sec-teal .fcard,.sec-clay .fcard,.sec-taupe .fcard{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.sec-teal .fcard p,.sec-clay .fcard p,.sec-taupe .fcard p{color:rgba(255,255,255,.78)}
.sec-teal .fcard .fnum,.sec-clay .fcard .fnum,.sec-taupe .fcard .fnum{color:rgba(255,255,255,.55)}
.sec-teal .btn,.sec-clay .btn,.sec-taupe .btn,.sec-ink .btn{background:#fff;color:var(--ink)}
.sec-teal .btn:hover,.sec-clay .btn:hover,.sec-taupe .btn:hover,.sec-ink .btn:hover{background:var(--sand)}
.sec-teal .tlink,.sec-clay .tlink,.sec-taupe .tlink,.sec-ink .tlink{color:#fff}
.sec-teal .stat b,.sec-clay .stat b,.sec-taupe .stat b{color:#fff}
/* colour-washed page intro */
.phero.ph-tint{background:var(--sand-2);border-bottom:none}
.phero.ph-cool{background:var(--cool);border-bottom:none}
.phero.ph-teal{background:var(--teal-wash);border-bottom:none}
/* the committed hero themes */
.phero.ph-sky{background:var(--t-sky)}
.phero.ph-sky .lede{color:#5D554D}
.phero.ph-sky .eyebrow{color:#5D554D}
.phero.ph-mist{background:var(--t-mist)}
.phero.ph-mist .lede{color:#5D554D}
.phero.ph-sand{background:var(--t-sand)}
.phero.ph-sand::after{background:radial-gradient(circle,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 68%)}
.phero.ph-deep{background:var(--ink);border-bottom:none;color:#fff}
.phero.ph-deep h1{color:#fff}
.phero.ph-deep .lede{color:rgba(255,255,255,.78)}
.phero.ph-deep .eyebrow{color:#D8C9B4}
.phero.ph-deep .mol line{stroke:rgba(255,255,255,.18)}
.phero.ph-deep .mol circle{fill:rgba(255,255,255,.2)}
.phero.ph-deep .mol .node{fill:rgba(255,255,255,.5)}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
/* One vertical rhythm for the whole page. Radicle's sections breathe —
   large padding, few elements — and ours were tighter and inconsistent
   (100 / 110 / 96 / 104 all in play). --band is the single knob. */
:root{--band:132px}
@media(max-width:1000px){:root{--band:76px}}
section{padding:var(--band) 0}
h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-0.02em;line-height:1.1}
.photo{filter:none}                      /* color lives in the imagery */
.photo-mono{filter:saturate(.35) contrast(1.02)}  /* opt-in scientific grayscale */
.eyebrow{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:18px}
.lede{font-size:19px;color:var(--lab);max-width:660px}
.mol{position:absolute;opacity:.5;pointer-events:none}
.mol line{stroke:var(--line);stroke-width:1}
.mol circle{fill:var(--line)}
.mol .node{fill:var(--ink)}
/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px;
  transition:background .3s,border-radius .3s,height .3s,padding .3s,box-shadow .3s;border:1px solid transparent}
/* the wordmark is a link home - it needs a real touch band like any other */
.logo{font-family:var(--sans);font-size:26px;font-weight:700;letter-spacing:-0.01em;
  display:inline-flex;align-items:center;min-height:44px}
.nav-links{display:flex;gap:34px;font-size:14px;font-weight:500;color:var(--lab)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
/* Buttons — full pill, dark fill, with a circular arrow chip riding
   on the right. The chip is the tell: it reads as a control, not a link. */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;
  padding:9px 11px 9px 22px;border-radius:100px;font-size:15px;font-weight:500;
  font-family:var(--body);letter-spacing:-.005em;line-height:1.2;
  transition:background .2s,transform .2s,box-shadow .2s;border:none;cursor:pointer}
/* The chip is a MASK over currentColor, so the circle and arrow always
   take the button's own text colour — it can never be invisible on an
   inverted button, whatever section it lands in. */
.btn::after{content:"";width:26px;height:26px;flex:none;background-color:currentColor;
  -webkit-mask:var(--chip) center/26px 26px no-repeat;mask:var(--chip) center/26px 26px no-repeat;
  transition:transform .2s}
.btn:hover{background:var(--teal-dk);transform:translateY(-1px);box-shadow:0 8px 22px rgba(26,26,26,.24)}
.btn:hover::after{transform:translateX(2px)}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* arrow suppressed where the label already carries one, or on chrome-less uses */
.btn.no-arrow::after,.btn.plain::after{display:none}
.btn.no-arrow,.btn.plain{padding:13px 24px}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(26,24,22,.28);box-shadow:none}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.teal{background:var(--teal)}
.btn.teal:hover{background:var(--teal-dk)}
/* Secondary action — text with a north-east arrow, Radicle's quiet link */
.tlink{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:500;
  color:var(--ink);border-bottom:1px solid transparent;transition:border-color .2s}
.tlink::after{content:"↗";font-size:14px;transition:transform .2s}
.tlink:hover{border-bottom-color:currentColor}
.tlink:hover::after{transform:translate(2px,-2px)}
/* page hero (interior) */
/* Interior heroes carry real colour and the same tight display type
   as the homepage — no hairline border, the colour block does the work. */
.phero{position:relative;overflow:hidden;padding:104px 0 96px;border-bottom:none}
.phero h1{font-size:clamp(38px,5.2vw,68px);line-height:1.0;letter-spacing:-.03em;margin-bottom:22px}
.phero .lede{font-size:19px;line-height:1.55}
/* the same soft bloom that gives a flat block depth */
.phero::after{content:"";position:absolute;width:720px;height:720px;border-radius:50%;
  right:-200px;top:-300px;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 68%)}
.phero>.wrap{position:relative;z-index:1}
@media(max-width:900px){.phero{padding:64px 0 60px}}
.phero h1 em{font-style:normal;color:var(--blue-2)}
/* on the saturated hero themes the accent needs the deep teal to hold up */
.phero.ph-sky h1 em,.phero.ph-mist h1 em{color:var(--t-deep)}
.phero.ph-sand h1 em{color:var(--teal-dk)}
/* full-bleed image hero (Radicle-style) */
/* ---- HERO: a full-bleed photograph, claims stacked over it ----
   The image is the section background. A left-weighted white wash keeps
   ink type legible over it without darkening the picture — Namrata has
   rejected dark hero imagery, so the veil lightens rather than dims. */
.heroshot{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:76px 0 84px;overflow:hidden;background:var(--sand)}
.heroshot .hs-bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:64% 46%;z-index:0}
.heroshot .hs-veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(96deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.84) 26%,
                  rgba(255,255,255,.46) 44%,rgba(255,255,255,.08) 62%,rgba(255,255,255,0) 76%)}
.heroshot>.wrap{position:relative;z-index:2;width:100%}
.hs-grid{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:center}
.hs-copy{max-width:440px}
.heroshot h1{font-size:clamp(40px,5.2vw,70px);line-height:.99;letter-spacing:-.03em;
  margin-bottom:22px;color:var(--ink)}
.heroshot .lede{font-size:19px;line-height:1.55;color:#5D554D;max-width:480px}
.heroshot .eyebrow{color:#5D554D}
.heroshot .eyebrow.dot::before{background:var(--accent)}
.heroshot .htrust{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);
  font-size:14px;color:#5D554D;letter-spacing:.03em;margin-top:40px;
  padding-top:20px;border-top:1px solid rgba(26,26,26,.18)}
.heroshot .htrust b{color:#5D554D;font-weight:500}

/* the claim buttons — normal flow, staggered by margin, so they cannot
   collide with anything at any width */
.hs-claims{position:relative}
/* Measured on the rendered hero: the halo alone gave this label 2.74:1 over
   the sweater and hair. It goes on the glass system instead. */
.hsc-lbl{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);margin-bottom:14px;text-shadow:none;
  display:inline-block;background:rgba(255,255,255,.80);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);border-radius:100px;padding:6px 13px}
.hclaim{display:block;width:100%;text-align:left;cursor:pointer;border:0;
  font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.32;
  letter-spacing:-.015em;color:var(--ink);
  /* ⚠️ .34 was set for a hero that had a white wash behind it. With the wash
     gone the chips sat on raw video; solved minimum over the darkest frame of
     the loop is .47, and these three hero glass surfaces move together. */
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);
  border-radius:16px;padding:15px 18px;margin-bottom:11px;
  box-shadow:var(--glass-lift),var(--glass-cast);
  transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s,opacity .26s,background .26s;
  opacity:0}
/* the stagger is what stops this reading as a plain list. The width has to
   shrink by the same amount as the indent, or margin + width:100% overflows
   the column and the pill runs past the content edge. */
.hclaim:nth-of-type(2){margin-left:26px;width:calc(100% - 26px)}
.hclaim:nth-of-type(3){margin-left:52px;width:calc(100% - 52px)}
.hs-claims.in .hclaim{opacity:1}
.hs-claims.in .hclaim:nth-of-type(1){transition-delay:.10s}
.hs-claims.in .hclaim:nth-of-type(2){transition-delay:.20s}
.hs-claims.in .hclaim:nth-of-type(3){transition-delay:.30s}
.hclaim em{display:block;font-style:normal;font-family:var(--mono);font-size:14px;
  font-weight:500;letter-spacing:.16em;color:var(--ink);margin-top:8px}
.hclaim:hover{transform:translateY(-2px);background:rgba(255,255,255,.48);
  box-shadow:var(--glass-lift),var(--glass-cast-lg)}
.hclaim:focus-visible{outline:3px solid var(--t-deep);outline-offset:3px}
.hs-claims.in .hclaim.off{opacity:.8}
.hclaim.on{background:var(--t-deep);color:#fff;box-shadow:0 18px 44px rgba(26,26,26,.38)}
.hclaim.on em{color:var(--t-sky)}
/* ⚠️ COMPLIANCE: this is the VALIDATE attribution for the three claim
   statistics above it. Measured at 3.60:1 on the halo alone — not good
   enough for a line that carries the attribution. On the glass system and
   set in ink, so it is MORE visible than before, not less.
   Do not return this to a bare text-shadow. */
.hsc-foot{font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--ink);
  margin-top:14px;margin-left:52px;text-shadow:none;
  display:inline-block;background:rgba(255,255,255,.80);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);border-radius:10px;padding:7px 12px}

@media(max-width:1000px){
  .heroshot{min-height:0;padding:48px 0 56px}
  /* mobile serves the portrait crop via <picture>; centre it */
  .heroshot .hs-bg{object-position:center}
  /* stacked, the type sits over the whole picture, so the wash covers it */
  .heroshot .hs-veil{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.90) 52%,rgba(255,255,255,.80) 100%)}
  .hs-grid{grid-template-columns:1fr;gap:34px}
  .heroshot .lede{max-width:none}
  .hclaim{font-size:14px}
  .hclaim:nth-of-type(2),.hclaim:nth-of-type(3){margin-left:0;width:100%}
  .hsc-lbl,.hsc-foot{color:var(--ink);text-shadow:none}
  .hsc-foot{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .hclaim{opacity:1!important;transition:none}
}

/* ============================================================
   .secshot — the hero treatment, reusable on any section whose
   argument a photograph actually carries. Same rules as the hero:
   the image is the background, the veil LIGHTENS rather than dims,
   and everything stays in normal flow.
   Use it only where the picture argues for the section. A merely
   decorative photograph has been rejected here twice.
   ============================================================ */
.secshot{position:relative;overflow:hidden;padding:var(--band) 0;background:var(--sand)}
/* ⚠️ RADICLE "ROOMS", 2026-08-14 — studied from full-page captures of their
   home + discovery pages: almost nothing there is full-bleed. Sections are
   INSET ROUNDED CONTAINERS (~16-24px radius) with the cream page ground
   showing around them, and that one device carries most of the "designed"
   feel. Applied here to the homepage's PHOTO and DARK sections only — the
   sand text bands stay full-bleed so the rooms read as rooms.
   ⚠️ .secbg/.csbg are inset:0 absolute, so they clip correctly inside the
   radius. If a new photo section is added, add it to this list.
   Playbook: ~/Claude/memory/curi-radicle-section-designs.md */
.speed.sec-photo,.results.sec-photo,.secshot{
  margin:10px clamp(8px,1vw,16px);border-radius:22px;overflow:hidden}
@media(max-width:700px){
  .speed.sec-photo,.results.sec-photo,.secshot{margin:6px;border-radius:14px}}
.secshot .ss-bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:62% 50%;z-index:0}
.secshot .ss-veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(96deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.90) 32%,
                  rgba(255,255,255,.58) 50%,rgba(255,255,255,.12) 70%,rgba(255,255,255,0) 84%)}
.secshot>.wrap{position:relative;z-index:2}
.ss-body{max-width:640px}
/* these sections carry no .sintro / .cta wrapper, so the heading scale has
   to be stated here or h2 falls back to the browser default */
.secshot h2{font-size:clamp(30px,3.8vw,46px);letter-spacing:-.025em;line-height:1.07;
  margin:0;color:var(--ink)}
.secshot .eyebrow{color:#5D554D}
.secshot .eyebrow.dot::before{background:var(--accent)}
.secshot .lede{font-size:18.5px;line-height:1.6;color:#5D554D;margin-top:18px}

/* dark variant — the closing CTA, where the button needs the contrast */
.secshot.ss-dark{background:var(--t-deep)}
/* was a flat .82-.88 scrim — the same mistake as .secveil. The photograph
   runs far cleaner now; the copy sits on an ink-glass card instead. */
.secshot.ss-dark .ss-veil{background:
  linear-gradient(180deg,rgba(22,20,19,.34) 0%,rgba(22,20,19,.20) 50%,rgba(22,20,19,.40) 100%)}
/* ink glass at .62 -> white clears AA at 5.8 over the BRIGHTEST point of
   sec-petri-blue, which is the worst case for white type. */
.secshot.ss-dark .ss-body{background:var(--glass-ink);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-ink-edge);border-radius:18px;
  padding:44px 46px 46px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 22px 60px rgba(0,0,0,.30)}
.ss-center .ss-body{max-width:660px}
@media(max-width:700px){.secshot.ss-dark .ss-body{padding:30px 24px 32px}}
.secshot.ss-dark{padding:calc(var(--band) + 12px) 0}
.secshot.ss-dark h2{color:#fff}
.secshot.ss-dark .lede{color:rgba(255,255,255,.88);font-size:19px}
.secshot.ss-dark .btn{background:#fff;color:var(--ink)}
.ss-center{text-align:center}
.ss-center .ss-body{max-width:620px;margin:0 auto}
.ss-center .lede{margin-left:auto;margin-right:auto}
.ss-center .btn{margin-top:30px}

@media(max-width:1000px){
  .secshot{padding:var(--band) 0}
  .secshot .ss-veil{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.90) 55%,rgba(255,255,255,.82) 100%)}
  .secshot.ss-dark .ss-veil{background:rgba(22,20,19,.40)}
  .ss-body{max-width:none}
}

/* home hero */
.hero{position:relative;padding:96px 0 80px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(40px,5.4vw,68px);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--blue-2)}
.hero-img{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.hero-img img{width:100%;height:100%;object-fit:cover}
/* floating data pills (Radicle-style) */
.pill{position:absolute;display:flex;align-items:center;gap:10px;background:rgba(26,26,26,.86);backdrop-filter:blur(6px);color:#fff;padding:10px 16px;border-radius:100px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.pill .dot{width:24px;height:24px;border-radius:50%;background:var(--blue-2);flex:none}
.pill b{display:block;font-family:var(--mono);font-size:14px;line-height:1.2}
.pill span{font-size:14px;color:var(--line)}
.trust{text-align:center;padding:44px 0 0}
.trust p{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:22px}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.trust-row span{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--lab);border:1px solid var(--line);border-radius:100px;padding:9px 18px}
.tags{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--lab);text-align:center;margin-top:10px}
.tags b{color:var(--blue-2);font-weight:500}
.pglead{max-width:760px;margin:0 auto;text-align:center}
.bigstate{font-family:var(--sans);font-weight:600;font-size:clamp(24px,3.2vw,38px);line-height:1.3;letter-spacing:-0.01em;max-width:960px}
.bigstate .mute{color:var(--gray)}
/* ---- redesign additions ---- */
.tint{background:#EDF0F4}          /* cool near-white block */
.tint-2{background:var(--paper-2)}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
/* problem / proof-gap band */
.problem{background:#1A1A1A;color:#fff;text-align:center}
.problem h2{color:#fff}
.problem .lede{color:var(--line);margin:16px auto 0}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;text-align:left}
.pcell{border:1px solid #3A342F;border-radius:var(--radius);padding:28px 24px}
.pcell .x{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:#8b8b93;margin-bottom:12px}
.pcell h3{font-size:19px;color:#fff;margin-bottom:8px}
.pcell p{font-size:14px;color:var(--line)}
/* goal tabs */
.tabbar{display:flex;gap:6px;flex-wrap:wrap;margin-top:38px;border-bottom:1px solid var(--line);padding-bottom:0}
.tabbtn{font-family:var(--body);font-size:15px;font-weight:500;color:var(--lab);background:none;border:none;padding:14px 20px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.tabbtn:hover{color:var(--ink)}
.tabbtn.on{color:var(--ink);border-color:var(--blue-2)}
.tabpanel{display:none;margin-top:36px}
.tabpanel.on{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.tabpanel .tp-img{border-radius:var(--radius);overflow:hidden;aspect-ratio:5/4;background:var(--paper-2)}
.tabpanel .tp-img img{width:100%;height:100%;object-fit:cover}
.tabpanel h3{font-size:clamp(24px,3vw,34px);margin-bottom:14px}
.tabpanel p{color:var(--lab);margin-bottom:18px}
.tp-map{font-family:var(--mono);font-size:14px;color:var(--gray);border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.tp-map b{color:var(--ink);font-weight:500}
/* outcome band (human + pills) */
.oband{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.ocard{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;background:var(--paper-2)}
.ocard img{width:100%;height:100%;object-fit:cover}
.ocap{position:absolute;left:16px;bottom:16px;right:16px;font-family:var(--mono);font-size:14px;color:#fff;background:rgba(26,26,26,.7);backdrop-filter:blur(6px);border-radius:10px;padding:10px 14px}
.ocap b{display:block;font-size:15px}
/* case / evidence cards */
.cgrid2{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.ccard{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:.2s}
.ccard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(26,26,26,.08)}
.ccard .cimg{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.ccard .cimg img{width:100%;height:100%;object-fit:cover}
.ccard .cbody{padding:22px 22px 26px}
.ccard .ctag{font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:var(--blue-2);text-transform:uppercase}
.ccard h3{font-size:18px;margin:8px 0 8px}
.ccard p{font-size:14px;color:var(--lab)}
/* testimonial */
.quote{max-width:900px;margin:0 auto;text-align:center}
.quote blockquote{font-family:var(--sans);font-weight:500;font-size:clamp(22px,2.8vw,32px);line-height:1.35;letter-spacing:-0.01em}
.quote cite{display:block;margin-top:22px;font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:var(--gray);font-style:normal}
@media(max-width:900px){
  .pgrid,.oband,.cgrid2{grid-template-columns:1fr}
  .tabpanel.on{grid-template-columns:1fr}
}
/* ============ v2 — glass design language ============ */
.glass{background:rgba(255,255,255,.6);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.75);border-radius:18px;box-shadow:0 8px 32px rgba(24,21,19,.12)}
.glass-dark{background:rgba(24,21,19,.52);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(255,255,255,.16);border-radius:18px;box-shadow:0 8px 32px rgba(0,0,0,.28);color:#fff}
.glass-dark h2,.glass-dark h3{color:#fff}
.glass-dark p{color:rgba(255,255,255,.82)}
/* image-backed section shell */
.imgsec{position:relative;border-radius:24px;overflow:hidden;margin:0 24px}
.imgsec>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imgsec .inner{position:relative;z-index:2;padding:96px 0}
.imgsec .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,14,.35),rgba(18,16,14,.62))}
/* glass problem cards on image */
.pgrid-glass{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.pcell-g{padding:30px 26px}
.pcell-g .x{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:#F0C987;margin-bottom:12px}
.pcell-g h3{font-size:19px;margin-bottom:8px}
.pcell-g p{font-size:14px}
/* glass outcome captions */
.ocap-g{position:absolute;left:14px;bottom:14px;right:14px;padding:14px 16px;font-family:var(--mono);font-size:14px}
.ocap-g b{display:block;font-size:15px;margin-bottom:2px}
/* glass evidence cards — full image, glass footer */
.ecard{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;transition:.25s}
.ecard:hover{transform:translateY(-5px)}
.ecard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}
.ecard:hover>img{transform:scale(1.04)}
.ecard .ebody{position:absolute;left:14px;right:14px;bottom:14px;padding:20px 20px 22px}
.ecard .ctag{color:#F0C987}
.ecard h3{font-size:17px;line-height:1.3;margin:8px 0 6px}
.ecard p{font-size:14px}
/* stat chips row (glass, on image) */
.schips{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.schip{padding:16px 22px;font-family:var(--mono)}
.schip b{display:block;font-size:22px;letter-spacing:-.02em}
.schip span{font-size:14px;color:rgba(255,255,255,.75);letter-spacing:.04em}
@media(max-width:900px){
  .pgrid-glass{grid-template-columns:1fr}
  .imgsec{margin:0 12px}
}
/* ============ v3 — data-first design system ============ */
:root{
  --gold:#F0C987;
  /* ⚠️ #2E7D4F measured 4.40 on --pass-bg at 10.5px, just short of 4.5.
     Darkened one step; it is a reserved status colour, not a brand accent. */
  --pass:#286E45;          /* reserved status: pass */
  --pass-bg:#E7F2EB;
  --data:#1A1A1A;          /* the single data hue */
  --data-soft:#D9E2F0;
  --neutral-bar:#9E9189;   /* comparison entity — official warm taupe */
}
body{font-variant-numeric:tabular-nums}
/* nav — frosted on scroll */
/* Nav detaches into a floating rounded bar once you scroll —
   the page colour runs behind it, so blocks read edge to edge. */
nav{transition:padding .3s cubic-bezier(.2,.6,.2,1),background .3s}
nav.scrolled{background:transparent;border-bottom-color:transparent;padding:10px 20px}
nav.scrolled .nav-inner{background:rgba(255,255,255,.86);backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(26,24,22,.07);border-radius:100px;height:62px;padding:0 14px 0 26px;
  box-shadow:0 10px 30px rgba(26,26,26,.10)}
@media(prefers-reduced-motion:reduce){nav{transition:none}}
/* scroll reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
/* ⚠️ STAGGERED REVEAL, 2026-09-02. `.rv` on a grid fades the whole grid in as
   ONE block — five cards landing on the same frame reads as a page repaint,
   not as motion. `.rv-stagger` keeps the container as the TRIGGER (app.js
   still observes `.rv` and adds `.in`) but neutralises the container's own
   fade and walks the delay down its children instead.
   ⚠️ Add `.rv-stagger` ALONGSIDE `.rv`, never instead of it — without `.rv`
   the observer never sees the element and the children stay at opacity 0. */
.rv.rv-stagger{opacity:1;transform:none;transition:none}
.js .rv-stagger>*{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
.rv-stagger.in>*{opacity:1;transform:none}
.rv-stagger>*:nth-child(2){transition-delay:.07s}
.rv-stagger>*:nth-child(3){transition-delay:.14s}
.rv-stagger>*:nth-child(4){transition-delay:.21s}
.rv-stagger>*:nth-child(5){transition-delay:.28s}
.rv-stagger>*:nth-child(6){transition-delay:.35s}
/* buttons — micro-interaction */
.btn{position:relative}
.btn::after{content:"→";display:inline-block;margin-left:8px;transform:translateX(0);transition:transform .25s}
.btn:hover::after{transform:translateX(4px)}
.btn.ghost::after{content:""}
/* ---- CoA specimen card ---- */
.coa{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(26,26,26,.09)}
/* The table is wider than a phone. `overflow:hidden` on the card was
   silently amputating the Result / Spec / Pass columns on mobile — wide
   content has to scroll inside its own container, not disappear. */
.coa table{min-width:440px}
.coa .coa-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:700px){
  .coa .coa-scroll{box-shadow:inset -14px 0 12px -12px rgba(26,24,22,.22)}
}
.coa-head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.coa-head .cid{font-family:var(--mono);font-size:14px;color:var(--lab);letter-spacing:.06em}
.coa-head .clogo{font-family:var(--sans);font-weight:700;font-size:16px}
.coa table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:14px}
.coa th{text-align:left;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);padding:12px 24px 8px;font-weight:500}
.coa td{padding:11px 24px;border-top:1px solid var(--paper-2);color:var(--ink-2)}
.coa td.num{text-align:right;color:var(--ink)}
.coa tr:hover td{background:#FAFAF9}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:14px;letter-spacing:.08em;padding:4px 10px;border-radius:100px;background:var(--pass-bg);color:var(--pass);font-weight:700}
.chip::before{content:"✓"}
.coa-foot{padding:14px 24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:14px;color:var(--gray);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
/* ---- stat tiles (counters) ---- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px 18px;transition:.25s}
.tile:hover{border-color:var(--data);transform:translateY(-2px)}
.tile b{display:block;font-family:var(--mono);font-size:clamp(26px,2.6vw,36px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.tile b i{font-style:normal;color:var(--data)}
.tile span{font-size:14px;color:var(--lab);line-height:1.45;display:block;margin-top:4px}
.tile .u{font-family:var(--mono);font-size:14px;color:var(--gray)}
/* ---- chromatogram trace ---- */
/* ⚠️ COLOUR-CARD + ARTIFACT-CARD PAIR (Radicle pattern 2+7), 2026-08-14.
   The data layer's right column becomes a CLAY ROOM: chip eyebrow, white
   type, tiles restyled as frosted rows on the clay. The CoA stays a white
   document card beside it — their publication-thumbnail pattern, except
   curí's artifact is real. White on clay #6B5A4E passes for this type
   scale; do not drop tile text below 12.5px. */
.dl-room{background:var(--clay);border-radius:22px;padding:34px 30px;color:#fff;
  display:flex;flex-direction:column;gap:14px}
.dl-room .chip-eyebrow{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:100px;
  padding:6px 14px;font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff}
.dl-room .chip-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gold,#F0C987)}
.dl-room h2{color:#fff;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;line-height:1.1}
.dl-room .lede{color:rgba(255,255,255,.82);font-size:16.5px;max-width:none}
/* ⚠️ The four numbers used to sit in rgba(255,255,255,.10) boxes on this
   brown. A 10% white wash on a mid-value ground is not a container: at a
   glance there were no tiles, only text floating on a slab, and that is the
   "same background, no hierarchy" fault. They are hairline-divided cells
   now - the same device as the homepage proof band, which is the one place
   on this site where the separation is doing real work.
   ⚠️ Do not reintroduce low-alpha white boxes here. */
/* ⚠️ SPECIFICITY: `.split p{color:var(--lab)}` is (0,1,1) and silently beat a
   bare `.dl-lbl` (0,1,0), painting this label warm-grey on warm-brown at a
   measured 1.11. It must stay qualified by .dl-room. */
.dl-room .dl-lbl{font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 4px}
.dl-room .tiles{grid-template-columns:1fr 1fr;gap:0;margin-top:auto;
  border-top:1px solid rgba(255,255,255,.22)}
.dl-room .tile{background:none;border:0;border-radius:0;padding:22px 22px 22px 0;transition:none}
.dl-room .tile:nth-child(odd){border-right:1px solid rgba(255,255,255,.22)}
.dl-room .tile:nth-child(even){padding-left:22px}
.dl-room .tile:nth-child(n+3){border-top:1px solid rgba(255,255,255,.22)}
.dl-room .tile:hover{border-color:rgba(255,255,255,.22);transform:none}
.dl-room .tile b{color:#fff}
.dl-room .tile b i{color:var(--gold,#F0C987)}
/* measured on #6B5A4E: .75 gave 4.55 and .65 gave 3.85 (a fail at 14px).
   White itself is only 6.57 on this clay, so there is little headroom -
   re-measure before softening either of these again. */
.dl-room .tile span{color:rgba(255,255,255,.85)}
.dl-room .tile .u{color:rgba(255,255,255,.85)}
@media(max-width:700px){.dl-room{padding:26px 20px;border-radius:16px}}
.trace-line{fill:none;stroke:#c98500;stroke-width:2;stroke-linecap:round}
.trace-grid line{stroke:rgba(255,255,255,.09);stroke-width:1}
.trace-axis{font-family:var(--mono);font-size:8.5px;fill:rgba(255,255,255,.45)}
.trace-peaklbl{font-family:var(--mono);font-size:9px;fill:#fff}
/* ⚠️ CHART PANEL, 2026-09-02. The bars sat straight on the section ground,
   the same colour as everything around them, under 132px of empty band -
   the section read as an empty page with a few lines on it. Giving the data
   a surface is the same move that makes the CoA card work, and it lets the
   band come down because the panel now supplies the edge. */
.chart-panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:36px 38px 30px;margin-top:38px}
.speed.sec-photo.flat.on-sand{padding:calc(var(--band) - 34px) 0}
@media(max-width:820px){.chart-panel{padding:24px 20px 20px;border-radius:14px;margin-top:28px}}
/* ---- speed chart (single axis, horizontal bars) ---- */
.speed{background:var(--ink);color:#fff}
.speed.sec-photo,.results.sec-photo{background:transparent;color:var(--ink)}
.results.sec-photo h2,.speed.sec-photo h2{color:var(--ink)}
/* ⚠️ These sit on the bare photograph. WHITE was considered and measured:
   the ground behind this copy is LIGHT (203-228 across the four products),
   so white lands at 1.30 and fails badly. Ink is 9.7. Do not switch to white
   without re-measuring the ground first. */
.speed.sec-photo .eyebrow,.results.sec-photo .eyebrow{color:var(--ink)}
.speed .eyebrow{color:var(--gold)}
/* ---- speed chart ----
   This was styled in white for a dark ground, then the section moved onto
   sand and the labels went nearly invisible. Rebuilt for the ground it
   actually sits on, and scaled up: 36 weeks against 1 week is the strongest
   argument on the page and it was being whispered.
   Bars use the validated data blue; the comparison entity stays neutral.
   Brand teal is UI only and is not used as a data colour. */
.chart{margin-top:46px;display:flex;flex-direction:column;gap:14px;max-width:940px}
/* ⚠️ FOUR columns since 2026-08-13 — the saving chip is the point of the
   section, so it gets its own track rather than being squeezed beside the
   value. .cx-axis below must keep the SAME template or the scale drifts
   out of alignment with the bars. */
.crow{display:grid;grid-template-columns:230px 1fr 92px 128px;gap:20px;align-items:center}
/* the row label now leads in plain English, so it is set in the body face
   and left-aligned; the stage word is the demoted tag underneath */
.crow .clab{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink);
  text-align:right;line-height:1.25;letter-spacing:-.01em}
.crow .clab small{display:block;font-family:var(--mono);font-size:14px;color:var(--gray);
  letter-spacing:.04em;margin-top:3px;font-weight:400}
.crow .clab em{display:block;font-style:normal;font-family:var(--mono);font-size:14px;
  letter-spacing:.14em;color:var(--gray);margin-top:4px;font-weight:400}
/* the delta — quiet, but it is what makes the comparison mean something */
.csave{font-family:var(--mono);font-size:14px;letter-spacing:.02em;color:var(--accent);
  line-height:1.3}
.base-row .clab{color:var(--gray)}
.cbar-wrap{position:relative;height:46px;background:rgba(26,26,26,.07);border-radius:8px}
.cbar{position:absolute;inset:3px auto 3px 3px;width:0;border-radius:5px;background:#1A1A1A;
  transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.cbar.base{background:var(--neutral-bar)}
/* the number is the payoff — it carries the section, so it is set large */
.cval{font-family:var(--mono);font-size:23px;font-weight:500;color:var(--ink);
  white-space:nowrap;letter-spacing:-.02em}
.crow:first-child .cval{color:var(--gray)}
.cnote{font-family:var(--mono);font-size:14px;color:var(--gray);margin-top:26px;max-width:760px;line-height:1.6}
.cx-axis{display:grid;grid-template-columns:230px 1fr 92px 128px;gap:20px;margin-top:6px}
.cx-axis .scale span{white-space:nowrap}
.cx-axis .scale{position:relative;height:18px;font-family:var(--mono);font-size:14px;color:var(--gray)}
.cx-axis .scale span{position:absolute;transform:translateX(-50%)}
/* ---- interactive proof ladder ---- */
.lrow{cursor:pointer}
.lrow .lmore{grid-column:1/-1;max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.2,1),margin .3s}
.lrow.open .lmore{max-height:220px;margin-top:10px}
.lrow .lmore-inner{border-top:1px solid var(--line);padding-top:14px;display:flex;gap:26px;flex-wrap:wrap}
.lrow .lmore-inner div{font-family:var(--mono);font-size:14px;color:var(--lab)}
.lrow .lmore-inner b{display:block;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-2);margin-bottom:4px;font-weight:500}
.lrow .idx{transition:transform .3s}
.lrow.open .idx{transform:rotate(45deg)}
@media(max-width:900px){
  .crow{grid-template-columns:1fr auto}
  .crow .clab{text-align:left;grid-column:1/-1}
  .csave{grid-column:1/-1;margin-top:-6px}
  .base-row .csave{display:none}
  .cval{line-height:1}
  .cx-axis{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
}
/* ---- claim studio ---- */

/* ---- Claim Studio: product-specific atmosphere ----
   Four layers, one per product, cross-faded on selection. Held well back
   — blurred, desaturated and dimmed — so the change reads as a shift in
   light rather than a new picture. Anything more competes with the
   console sitting on top of it. */
.has-bgswap{position:relative;overflow:hidden}
.csbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.csbg-l{position:absolute;inset:-4%;background-size:cover;background-position:center;
  opacity:0;filter:none;
  transform:scale(1.04);
  transition:opacity .85s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.csbg-l.on{opacity:1;transform:scale(1)}
/* the espresso ground stays — the image only tints it */
/* ⚠️ NO CAST. This was a white veil at .50 -> .30 across the whole frame —
   the last surviving scrim, and it was washing every Claim Studio
   photograph the way .secveil washed the endpoint images. Removed.
   The intro copy is legible on the bare picture: the darkest point behind
   it across all four products is rgb(205,131,97) (cs-probiotic), where ink
   measures 6.1. Every control carries its own glass, so nothing else here
   depends on the section being lightened. Do not reintroduce a flat veil. */
.has-bgswap::before{content:none}
.has-bgswap>.wrap{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.csbg-l{transition:opacity .01s}}

/* ---- Claim Studio on a bright colour field ----
   The Radicle move: a flat saturated ground with the product small and low,
   content sitting on the empty colour. The console becomes light glass; the
   ladder, which was built for the espresso ground, needs its light twin. */
/* was .72->.52 — its inner notes are --gray, which fails AA at that alpha
   over cs-preworkout. Dense is the bound, not a preference. */
/* ⚠️ NO OUTER CONTAINER. A glass box wrapping a set of glass boxes is one
   surface too many — the reference floats its controls straight on the
   image. Each control carries its own glass; the group carries none. */
.sec-photo .studio{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:0;box-shadow:none;padding:0;border-radius:0}
.sec-photo .lvl-list::before{background:rgba(255,255,255,.55)}
.sec-photo .lvl-btn{background:rgba(255,255,255,.48);border-color:var(--glass-edge);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat))}
.sec-photo .lvl-btn::before{background:#FBF8F3;border-color:rgba(26,24,22,.22)}
.sec-photo .lvl-btn:hover{background:rgba(255,255,255,.94)}
.sec-photo .lvl-btn.earned{background:rgba(255,255,255,.58)}
.sec-photo .lvl-btn.earned::before{border-color:#93847A;background:#93847A}
.sec-photo .lvl-btn.earned .ld{color:var(--lab)}
.sec-photo .lvl-btn.on{background:#fff;border-color:var(--ink)}
.sec-photo .lvl-btn.on::before{border-color:var(--ink);background:var(--ink);box-shadow:0 0 0 4px rgba(26,26,26,.15)}
.sec-photo .lvl-btn .ln{color:var(--ink)}
.sec-photo .lvl-btn.earned .ln{color:#6B5A4E}
.sec-photo .lvl-btn.on .ln{color:var(--ink)}
.sec-photo .lvl-btn .ld{color:var(--ink)}
.sec-photo .cat-chip{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* ---- Claim Studio ----
   Two problems were making this dull. The L1-L5 list was five identical
   boxes, so the product's actual logic — each level ADDS to the one below
   — was invisible. And the output was a plain white div called a "label
   card" that looked nothing like a label.
   Now: a glass console, a ladder with a spine that climbs as you select,
   and a printed cream label artefact as the output. */
.studio{display:grid;grid-template-columns:.94fr 1.06fr;gap:38px;margin-top:52px;
  align-items:start;padding:30px;border-radius:22px;
  background:linear-gradient(158deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.028) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 70px rgba(0,0,0,.30)}
.ctrl-label{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:26px 0 10px}
.ctrl-label:first-child{margin-top:0}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px}
.cat-chip{font-size:14px;font-weight:500;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:9px 16px;cursor:pointer;transition:.18s;user-select:none}
.cat-chip:hover{border-color:#fff}
.cat-chip.on{background:#fff;color:var(--ink);border-color:#fff}

/* the ladder: a spine that climbs to the selected level, and every level at
   or below it reads as earned — which is what "each level adds to the last"
   actually means, and what five flat boxes never showed */
.lvl-list{position:relative;display:flex;flex-direction:column;gap:3px;padding-left:28px}
.lvl-list::before,.lvl-list::after{content:"";position:absolute;left:10px;width:2px;border-radius:2px}
.lvl-list::before{top:20px;bottom:20px;background:rgba(255,255,255,.13)}
.lvl-list::after{top:20px;height:var(--climb,0px);
  background:linear-gradient(180deg,#1A1A1A 0%,#6FCF97 100%);
  transition:height .5s cubic-bezier(.2,.7,.2,1)}
.lvl-btn{position:relative;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:center;
  text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;
  padding:10px 14px;cursor:pointer;transition:.22s;color:#fff;font-family:var(--body)}
.lvl-btn::before{content:"";position:absolute;left:-23px;top:50%;margin-top:-6px;
  width:12px;height:12px;border-radius:50%;background:#2A211A;
  border:2px solid rgba(255,255,255,.26);transition:.28s}
.lvl-btn:hover{background:rgba(255,255,255,.06)}
.lvl-btn.earned::before{border-color:#1A1A1A;background:#1A1A1A}
.lvl-btn.earned{background:rgba(255,255,255,.05)}
.lvl-btn.earned .ld{color:rgba(255,255,255,.62)}
.lvl-btn.on{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.30)}
.lvl-btn.on::before{border-color:#fff;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.lvl-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lvl-btn .ln{font-family:var(--mono);font-size:14px;font-weight:700;color:rgba(255,255,255,.4);transition:.22s}
.lvl-btn.earned .ln{color:#D8C9B4}
.lvl-btn.on .ln{color:#fff}
.lvl-btn .lt em{display:block;font-style:normal;font-family:var(--mono);font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-top:2px}
.lvl-btn .lt{font-size:14px;font-weight:600}
.lvl-btn .ld{display:block;font-size:14px;color:rgba(255,255,255,.42);font-weight:400}

/* the output: a printed label, not a white rectangle. Cream stock, an inner
   keyline like a real front-of-pack, and the level it was earned at. */
.label-card{position:relative;border-radius:8px;padding:30px 32px 26px;color:var(--ink);
  background:linear-gradient(168deg,#FCF8F1 0%,#F4EDE0 100%);
  box-shadow:0 34px 80px rgba(0,0,0,.44),0 0 0 1px rgba(40,28,14,.10)}
.label-card::before{content:"";position:absolute;inset:9px;border:1px solid rgba(60,45,28,.16);
  border-radius:4px;pointer-events:none}
.label-card>*{position:relative}
.lc-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.label-card .lc-brand{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.lc-lvl{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:#6B5A4E;background:rgba(26,26,26,.13);border:1px solid rgba(26,26,26,.28);
  border-radius:100px;padding:4px 10px;white-space:nowrap;transition:.3s}
.label-card .lc-name{font-family:var(--sans);font-size:21px;font-weight:700;margin:5px 0 18px;letter-spacing:-.01em}
.label-card .lc-claim{font-family:var(--sans);font-size:clamp(21px,2.3vw,29px);font-weight:700;
  line-height:1.2;letter-spacing:-.015em;min-height:2.5em}
.label-card .lc-lab{display:flex;gap:8px;align-items:baseline;font-family:var(--mono);font-size:14px;color:var(--gray);margin-top:12px;min-height:2.4em}
.label-card .lc-lab b{color:var(--data);font-weight:500;white-space:nowrap}
.label-card .lc-foot{font-family:var(--mono);font-size:14px;color:var(--lab);margin-top:12px;line-height:1.6;border-top:1px solid rgba(60,45,28,.16);padding-top:12px;min-height:2.8em}
.lc-swap{transition:opacity .28s,transform .28s}
.lc-swap.out{opacity:0;transform:translateY(6px)}

/* substantiation strength */
.meter{display:flex;gap:5px;margin-top:20px}
.meter i{height:7px;flex:1;border-radius:4px;background:rgba(60,45,28,.13);transition:background .4s}
.meter i.f{background:#1A1A1A}
.meter i.f:nth-child(5){background:#2E7D4F}
.meter-lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:14px;color:var(--gray);margin-top:7px;letter-spacing:.06em}

/* what you can hand over */
.dbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.dbadge{font-family:var(--mono);font-size:14px;letter-spacing:.05em;padding:7px 13px;border-radius:100px;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.35);transition:.35s}
.dbadge.lit{border-color:#2E7D4F;background:rgba(46,125,79,.18);color:#7FC79B}
.dbadge.lit::before{content:"✓ ";font-weight:700}
.tier-warn{font-size:14px;line-height:1.6;color:rgba(255,255,255,.78);background:rgba(255,255,255,.06);border-left:3px solid #c98500;border-radius:8px;padding:14px 16px;margin-top:20px}
.tier-warn b{color:#fff;font-weight:600}
.studio-note{font-family:var(--mono);font-size:14px;color:rgba(255,255,255,.45);margin-top:18px;line-height:1.6}
@media(max-width:900px){.studio{grid-template-columns:1fr}}
/* ---- evidence planner (hero wizard) ---- */
/* Evidence Planner — a white card resting on the hero colour */
.planner{background:#fff;border-radius:22px;padding:30px 28px 26px;
  box-shadow:0 24px 60px rgba(26,26,26,.16),0 2px 6px rgba(26,26,26,.06)}
.planner h3{font-size:21px;letter-spacing:-.015em;margin-bottom:18px;color:var(--ink)}
.pchips{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pchip{font-family:var(--body);font-size:14px;font-weight:500;color:var(--ink);
  background:var(--sand);border:1px solid transparent;border-radius:100px;
  padding:11px 14px;cursor:pointer;transition:.18s;user-select:none;
  text-align:center;line-height:1.25}
.pchip:last-child:nth-child(odd){grid-column:1/-1}
.pchip:hover{background:var(--sand-2);border-color:rgba(26,24,22,.14)}
.pchip.on{background:var(--t-deep);color:#fff;border-color:var(--t-deep)}
.pout{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1)}
.pout.show{max-height:220px}
.pout-inner{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.pout .plabel{font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray);margin-bottom:7px}
.pout .ppath{font-family:var(--mono);font-size:14.5px;font-weight:700;
  color:var(--t-deep);letter-spacing:.04em}
.pout .ppath i{font-style:normal;color:var(--accent)}
.planner .btn{margin-top:18px;width:100%;justify-content:space-between}
@media(max-width:1000px){.planner{padding:26px 22px 24px}}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .rv-stagger>*{opacity:1;transform:none;transition:none}
  .cbar{transition:none}
  *{animation:none!important;scroll-behavior:auto!important}
}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.trustbar{margin-top:52px;padding-top:26px;border-top:1px solid var(--line);display:flex;gap:26px;flex-wrap:wrap;font-family:var(--mono);font-size:14px;color:var(--lab);letter-spacing:.03em}
.trustbar b{color:var(--ink);font-weight:500}
/* stats */
.stats{background:var(--ink);color:#fff;padding:60px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.stat b{display:block;font-family:var(--mono);font-size:clamp(30px,3.4vw,44px);font-weight:700;letter-spacing:-0.02em;color:#fff}
.stat span{font-size:14px;color:var(--line)}
/* journey */
.journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
.jcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;transition:.25s}
.jcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(26,26,26,.07);border-color:var(--gray)}
.jnum{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.1em;color:var(--blue-2);margin-bottom:14px}
.jcard h3{font-size:21px;margin-bottom:10px}
.jcard p{font-size:14.5px;color:var(--lab)}
.flow{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:30px;font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--gray);flex-wrap:wrap}
.flow b{color:var(--ink);font-weight:500}
/* image band */
.band-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.band-grid .bimg{border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;background:var(--paper-2)}
.band-grid img{width:100%;height:100%;object-fit:cover}
/* gallery mosaic */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:14px;margin-top:44px}
.mosaic figure{border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic .tall{grid-row:span 2}
.mosaic .wide{grid-column:span 2}
/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.rev{direction:rtl}
.split.rev>*{direction:ltr}
.split-img{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.split-img img{width:100%;height:100%;object-fit:cover}
.split h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:18px}
.split p{color:var(--lab);margin-bottom:14px}
.checklist{list-style:none;margin-top:22px}
.checklist li{padding:11px 0 11px 30px;position:relative;font-size:15.5px;border-bottom:1px solid var(--line)}
.checklist li:last-child{border-bottom:none}
.checklist li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;border-radius:50%;background:var(--blue-2)}
/* section headings */
/* ============ SECTION TYPE LADDER (2026-09-02) ============
   ⚠️ MEASURED PROBLEM: seven of this page's nine section headlines rendered at
   the SAME 44px. Radicle runs 64 / 52 / 40 / 21 - four sizes with real jumps
   between them - which is most of why their page reads composed and this one
   read flat. The page had no typographic rhythm at all; colour was not doing
   that job either (seven of nine grounds are near-identical creams).
   Three steps, assigned by the section's JOB, not by taste:
     .shead-xl  the sections that carry the argument (goals, lifecycle, close)
     .shead     the default
     .shead-sm  supporting sections that should recede
   ⚠️ Weight stays 700. Radicle's display weight is 300 and light weights were
   tried on this site and explicitly rejected. Only the METRICS transfer:
   line-height at 1.0 and tracking at -3% once past 40px. */
.shead{font-size:clamp(28px,3.6vw,44px)}
.shead-xl{font-size:clamp(34px,4.8vw,60px)}
.shead-sm{font-size:clamp(25px,2.7vw,34px)}
/* leading closes to 1.0 and tracking opens to -3% only at display sizes, the
   way the reference does it - small headings keep 1.1 or they set too tight */
h1,.shead-xl,.sintro h2,.shead{line-height:1.02;letter-spacing:-.03em}
.shead-sm{line-height:1.08;letter-spacing:-.022em}
@media(max-width:700px){
  h1,.shead-xl,.sintro h2,.shead{line-height:1.06;letter-spacing:-.024em}
  /* ⚠️ The ladder was collapsing on phones: 70/60/44/34 on desktop compressed
     to 40/34/28/25, so .shead-xl and the default sat 6px apart and the rhythm
     the ladder exists to create disappeared exactly where the page is longest.
     Re-spread at the small end; the clamps already cap the top. */
  .shead-xl{font-size:clamp(30px,9.4vw,40px)}
  .shead{font-size:clamp(24px,7vw,30px)}
  .shead-sm{font-size:clamp(21px,5.8vw,25px)}
}
/* proof ladder */
.ladder{background:var(--paper-2)}
.ladder-rows{margin-top:44px;display:flex;flex-direction:column;gap:10px}
.lrow{display:grid;grid-template-columns:150px 1fr auto;gap:24px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:22px 26px;align-items:center;transition:.2s}
.lrow:hover{border-color:var(--blue-2)}
.lrow .lvl{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-2)}
.lrow h3{font-size:18px;margin-bottom:3px}
.lrow p{font-size:14px;color:var(--lab)}
.lrow .idx{font-family:var(--mono);font-size:26px;color:var(--line);font-weight:700}
/* results */
.results{background:var(--ink);color:#fff}
.results.sec-photo .lede{color:var(--ink)}
.results .eyebrow{color:var(--line)}
.rq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.rq{border:1px solid #3A342F;border-radius:var(--radius);padding:34px 28px;text-align:center}
.rq b{display:block;font-family:var(--mono);font-size:52px;font-weight:700;letter-spacing:-0.03em}
.rq span{font-size:14.5px;color:var(--line)}
.rq-note{text-align:center;font-family:var(--mono);font-size:14px;color:var(--gray);margin-top:22px;letter-spacing:.02em}
/* tiers */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
/* ⚠️ CLAIMS THRESHOLD STRIP. The gate is drawn in the GUTTER between
   column 1 and column 2, not on a card — DISCOVER is before the
   threshold, VALIDATE and PROVE are both past it. Flagging VALIDATE
   alone (the version removed 2026-08-05) was factually wrong as well as
   a sales nudge.
   The left offset must track .tier-grid: 3 equal columns, 20px gap, so
   the first gutter's centre is (100% - 2*20px)/3 + 20px/2. ⚠️ If the
   grid's column count or gap ever changes, this calc changes with it. */
.thresh{margin-top:40px}
.th-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.th-stop{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lab);background:var(--paper);border:1px solid var(--line);border-radius:100px;
  padding:10px 0;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.th-stop:hover{border-color:var(--ink);color:var(--ink)}
.th-stop.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.th-stop:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.th-gate{position:absolute;top:-30px;bottom:-14px;left:calc((100% - 40px)/3 + 10px);
  transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.th-gate b{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;color:var(--ink);background:#D8C9B4;border-radius:100px;padding:4px 10px}
.th-gate::after{content:"";flex:1;width:0;border-left:1px dashed rgba(26,26,26,.30);margin-top:6px}
.th-say{display:flex;align-items:baseline;gap:12px;margin-top:20px;font-size:15px;
  line-height:1.55;color:var(--lab);max-width:74ch}
.th-tag{flex:none;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:100px;padding:5px 10px;color:var(--ink);background:var(--sand-2)}
.th-tag[data-side="post"]{background:var(--ink);color:#fff}
/* selection is only ever applied AFTER a click — see the note in pricing.html */
.tier.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
@media(prefers-reduced-motion:reduce){.th-stop{transition:none}}
.tier{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;display:flex;flex-direction:column}
/* ⚠️⚠️ THE MIDDLE CARD IS NO LONGER HIGHLIGHTED. Removed 2026-08-05.
   History so nobody rebuilds it: VALIDATE was a dark card — the SaaS
   "most popular plan" pattern. It CONTRADICTED this section's own
   headline, "Enter at the level that matches your stage", which says
   there is no universally right tier. First attempt kept the dark card
   and added a "THE CLAIMS THRESHOLD" flag to make the emphasis mean
   something. That failed twice over: a label cannot cancel the
   recommendation a dark card makes in a 3-across row, and the flag
   repeated the .trole band sitting directly beneath it — the same fact
   twice in one card.
   The distinction is real and is carried entirely by COPY: the .trole
   bands say what each tier is for, including VALIDATE's "marketing-usable
   consumer statistics". That is information. A dark card is a sales nudge.
   ⚠️ Risk if restored: DISCOVER is explicitly "not claims substantiation",
   so steering a brand off it sells rigour they may not be ready for —
   and it implies PROVE is overkill. Do not re-highlight one tier. */
.tier .tname{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--blue-2);margin-bottom:10px}
.tier h3{font-size:24px;margin-bottom:10px}
.tier .tq{font-size:15px;font-style:italic;color:var(--lab);margin-bottom:18px}
.tier ul{list-style:none;font-size:14px;flex:1}
.tier li{padding:8px 0;border-bottom:1px solid var(--line)}
.tier .tmeta{margin-top:18px;font-family:var(--mono);font-size:14px;color:var(--lab)}
/* pricing tier detail */
.tprice{font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:2px 0 16px;line-height:1.15}
.tprice span{display:block;font-size:14px;font-weight:400;color:var(--lab);letter-spacing:0;margin-top:3px}
.tdrivers{font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--gray);margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
/* ⚠️ THE PAYOFF LINE. This is the sentence that decides which tier someone
   buys — 'produces marketing-usable consumer statistics' vs 'not claims
   substantiation'. It sat at 12.5px at the BOTTOM of the card, under a
   dense mono 'Scoped on:' block. Promoted to a band directly under the
   card heading so the three tiers can be compared on the thing that
   actually differentiates them. Do not demote it again. */
.trole{font-size:14.5px;line-height:1.45;font-weight:600;color:var(--ink);
  background:var(--sand-2);border-radius:9px;padding:11px 13px;margin:2px 0 16px}
/* named protocols — R2's validated study architectures as start-here cards */
.proto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.proto{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:12px;
  padding:22px 20px;background:#fff;text-decoration:none;color:var(--ink);
  transition:border-color .18s,box-shadow .18s}
.proto{background:var(--paper);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.proto:hover{border-color:rgba(107,90,78,.5);box-shadow:0 14px 32px rgba(60,52,45,.12);transform:translateY(-3px)}
.proto:hover em{color:var(--accent)}
.pr-tag{align-self:flex-start;font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);background:var(--sand-2);border-radius:100px;padding:4px 10px}
.proto b{font-size:16px;line-height:1.3;letter-spacing:-.01em}
.proto p{font-size:14px;line-height:1.5;color:var(--lab);flex:1}
.proto em{font-style:normal;font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--ink)}
.addon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:12px}
.addon{border:1px solid var(--line);border-radius:12px;padding:20px 18px;background:var(--paper);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.addon:hover{border-color:rgba(107,90,78,.45);transform:translateY(-2px);box-shadow:0 12px 28px rgba(60,52,45,.10)}
.addon b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600;margin-bottom:4px}
.addon span{display:block;font-family:var(--mono);font-size:14px;color:var(--teal);font-weight:600;margin-bottom:8px}
.addon p{font-size:14px;color:var(--lab);line-height:1.5}
@media(max-width:900px){.addon-grid,.proto-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.addon-grid,.proto-grid{grid-template-columns:1fr}}
/* pricing table */
.ptable{width:100%;border-collapse:collapse;margin-top:36px;font-size:14.5px}
.ptable th{text-align:left;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--lab);padding:14px 18px;border-bottom:2px solid var(--ink)}
.ptable td{padding:15px 18px;border-bottom:1px solid var(--line)}
.ptable tr:hover td{background:var(--paper-2)}
/* ⚠️ The category was repeated on EVERY row, which is what made this read
   as a data dump rather than a table. It now prints once per group, with a
   rule above each group — the reference treats tables as designed objects:
   hairline rows, a muted first column, and visible grouping. */
.ptable .cat{font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:var(--gray);text-transform:uppercase;
  width:34%;vertical-align:top}
.ptable tr.grp td{border-top:1px solid var(--ink);padding-top:22px}
.ptable tr.grp:first-child td{border-top:0}
.ptable tr:not(.grp) td{border-bottom-color:rgba(26,26,26,.07)}
.ptable tr.grp td.cat{color:var(--ink);font-weight:500}
.ptable .price{font-family:var(--mono);font-weight:500;white-space:nowrap}
.tnote{margin-top:16px;font-family:var(--mono);font-size:14px;color:var(--gray)}
/* feature grid (services) */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
/* ⚠️ These were invisible on a sand ground — a hairline border and NO
   surface, so six cards read as six loose paragraphs. They now sit on
   paper with a clay rule at the top edge, which is the only accent this
   palette has (--teal/--accent/--clay/--blue-2 ALL resolve to #6B5A4E;
   there is deliberately one accent, so emphasis comes from surface and
   value, not from a second hue). */
.fcard{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 26px;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.fcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent);opacity:.55;transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.fcard:hover{border-color:rgba(107,90,78,.45);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(60,52,45,.10)}
.fcard:hover::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .fcard,.fcard::before{transition:none}
  .fcard:hover{transform:none}
  .fcard::before{transform:scaleX(1)}
}
/* ⚠️ PHOTO-TOPPED VARIANT, 2026-08-13 — the second pass on these cards in
   one day. The first pass (surface + hover rule) was called out as
   invisible: "i see no change." The uplift she asked for is IMAGE, COLOUR,
   INTERACTION, so each card now carries a photograph, which is also where
   the colour comes from on this one-accent palette. The interaction is a
   slow zoom on the photo — visible, and not a gimmick. */
.fcard-ph{padding:0;display:flex;flex-direction:column}
.fcard-ph::before{z-index:2}
.fcard-ph figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--sand-2)}
.fcard-ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.fcard-ph:hover img{transform:scale(1.045)}
.fcard-ph .fc-body{padding:20px 24px 26px}

/* ============ WHO WE SERVE — TABBED (Radicle pattern), 2026-08-14 ============
   Namrata pointed at Radicle's category section on /radicle-discovery and
   asked for it here instead of the six photo cards: a TAB ROW above, then a
   2-up pair — a committed dark colour card carrying a pill-chip eyebrow,
   heading and copy, beside a photo card.
   ⚠️ Theirs has THREE tabs; this has SIX, so the row must scroll rather than
   wrap into a ragged block — wrapping made it read as a list of links, not a
   control. Scroll is horizontal below 900px with the scrollbar hidden.
   ⚠️ The panels are all in the DOM and toggled by class, NOT rebuilt, so the
   six photographs are preloaded and switching costs one class change. Same
   reasoning as the PROVE picker's stacked layers.
   Playbook: memory/curi-radicle-section-designs.md */
.wtabs{margin-top:38px}
.wt-nav{display:flex;gap:0;border-bottom:1px solid var(--line);overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.wt-nav::-webkit-scrollbar{display:none}
.wt-tab{flex:none;background:none;border:0;cursor:pointer;padding:14px 22px;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--gray);
  letter-spacing:-.01em;white-space:nowrap;position:relative;
  transition:color .2s ease}
.wt-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ink);transform:scaleX(0);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.wt-tab:hover{color:var(--ink)}
.wt-tab.on{color:var(--ink)}
.wt-tab.on::after{transform:scaleX(1)}
.wt-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:6px}

.wt-panel{display:none;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.wt-panel.on{display:grid}
.wt-card{background:var(--t-deep);color:#fff;border-radius:22px;padding:38px 34px;
  display:flex;flex-direction:column;gap:14px;min-height:320px}
.wt-card .chip-eyebrow{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:100px;
  padding:6px 14px;font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff}
.wt-card .chip-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.wt-card h3{color:#fff;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;line-height:1.15;margin:0}
.wt-card p{color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.6;margin:0}
.wt-shot{margin:0;border-radius:22px;overflow:hidden;background:var(--sand-2);min-height:320px}
.wt-shot img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:820px){
  .wt-panel.on{grid-template-columns:1fr}
  .wt-card{min-height:0;padding:28px 24px;border-radius:16px}
  .wt-shot{min-height:220px;border-radius:16px;order:-1}
}
@media(prefers-reduced-motion:reduce){.wt-tab::after{transition:none}}
.fcard-ph h3{font-size:18px}
@media(prefers-reduced-motion:reduce){.fcard-ph img{transition:none}.fcard-ph:hover img{transform:none}}

/* protocol cards get the same photo top */
.proto figure{margin:-1px -1px 0;aspect-ratio:3/2;overflow:hidden;border-radius:12px 12px 0 0;background:var(--sand-2)}
.proto figure img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.proto:hover figure img{transform:scale(1.045)}
.proto.proto-ph{padding:0}
.proto.proto-ph .pr-body{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;flex:1}
@media(prefers-reduced-motion:reduce){.proto figure img{transition:none}.proto:hover figure img{transform:none}}
.fcard .fnum{font-family:var(--mono);font-size:14px;color:var(--blue-2);margin-bottom:12px;letter-spacing:.1em}
.fcard h3{font-size:20px;margin-bottom:10px}
.fcard p{font-size:14.5px;color:var(--lab)}
/* process steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px}
.step{padding:26px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.step b{display:block;font-family:var(--mono);font-size:22px;color:var(--blue-2);margin-bottom:10px}
.step h4,.step h3.h4{font-family:var(--sans);font-size:16px;margin-bottom:6px}
.step p{font-size:14px;color:var(--lab)}
/* contact */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px}
.cbox{border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.cbox h3{font-size:18px;margin-bottom:6px}
.cbox p,.cbox a{color:var(--lab);font-size:15px}
.cbox a{color:var(--blue-2);font-weight:500}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
/* two-up for the short qualification selects added 2026-08-13 — five stacked
   full-width dropdowns made step 2 read as a long form; paired, it reads as
   one glance. Single column on a phone, where side-by-side selects are
   cramped and easy to mis-tap. */
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:620px){.form-2{grid-template-columns:1fr}}
.form-row label{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--lab)}
.form-row input,.form-row select,.form-row textarea{border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-family:var(--body);font-size:15px;background:var(--paper)}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--blue-2)}
.form-row input:focus-visible,.form-row select:focus-visible,.form-row textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* CTA */
.cta{background:var(--ink);color:#fff;text-align:center;border-radius:20px;padding:80px 40px;margin:0 24px;position:relative;overflow:hidden}
.cta h2{font-size:clamp(30px,4vw,48px);margin-bottom:16px;position:relative;z-index:2}
.cta p{color:var(--line);max-width:560px;margin:0 auto 32px;position:relative;z-index:2}
.cta .btn{background:#fff;color:var(--ink);position:relative;z-index:2}
.cta .btn:hover{background:var(--line)}
/* The footer sits on warm sand — not paper, and NOT dark.
   Dark was tested and rejected: on the homepage the block directly above
   the footer is the ink CTA, so a dark footer merges with it into one
   undifferentiated mass and the closing CTA loses its edge.
   Sand is also the only value distinct on ALL five pages — the previous
   white footer was an adjacent duplicate on four of them (services,
   about, pricing, contact all end on paper), which the hairline
   border-top was papering over. Border dropped: the change of ground is
   the separator now. Type clears AA at 13.7 / 5.7 / 5.2. */
footer{padding:56px 0;font-size:14px;color:var(--lab);background:var(--sand-2)}
.foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.foot-col h3{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
/* ⚠️ TAP TARGETS. At 4px padding these footer links rendered 30px tall on a
   phone - twelve of them, against the 44px minimum. They are the site's only
   navigation once the burger is closed, so this is not a cosmetic miss.
   Desktop keeps the tight rhythm; only touch widths get the taller band. */
.foot-col a{display:block;color:var(--lab);padding:4px 0}
@media(max-width:900px){
  .foot-col a{padding:11px 0;min-height:44px;display:flex;align-items:center}
}
.foot-col a:hover{color:var(--ink)}
.disclaimer{margin-top:32px;font-family:var(--mono);font-size:14px;line-height:1.7;max-width:860px;color:var(--gray)}
@media(max-width:900px){
  .hero-grid,.split,.split.rev{grid-template-columns:1fr}
  .journey-grid,.fgrid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .tier-grid,.rq-grid,.band-grid,.cgrid{grid-template-columns:1fr}
  /* stacked: the gate leaves the gutter and becomes a divider in normal
     flow. Source order is stop · gate · stop · stop, so it still lands
     between DISCOVER and VALIDATE without any repositioning. */
  .th-track{grid-template-columns:1fr;gap:8px;margin-top:0}
  .th-gate{position:static;transform:none;flex-direction:row;justify-content:center;margin:10px 0}
  .th-gate::after{display:none}
  .th-say{flex-direction:column;gap:9px}
  .th-tag{align-self:flex-start}
  /* cards stack here, so the flag-height reserve would just be dead
     space at the top of two cards — alignment no longer applies */
  .steps{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .lrow{grid-template-columns:1fr}
  .lrow .idx{display:none}
  .nav-links{display:none}
  .mol{display:none}
  .hero2 .hframe{min-height:520px;align-items:flex-end}
  .hero2 .hcontent{padding:32px 24px 36px}
  .hero2 .hshade{background:linear-gradient(180deg,rgba(24,21,19,.15) 0%,rgba(24,21,19,.82) 70%)}
  .hero2 .pill{display:none}
  section{padding:64px 0}
  .ptable{font-size:14px}
  .ptable th,.ptable td{padding:11px 10px}
}
/* ============ v3 — Platform / Pricing / About / Contact tools ============ */

/* ---- instrumentation explorer ---- */
/* align-items:start is load-bearing: the default (stretch) made a
   card's row-mate grow to match an opened card — an empty "open" shell.
   Namrata caught it 2026-08-05. */
.instr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:24px;align-items:start}
.instr-card{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.instr-card:hover{border-color:var(--gray)}
.instr-card.open{border-color:#1A1A1A;box-shadow:0 8px 24px rgba(26,26,26,.12)}
.instr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;
  width:100%;background:none;border:0;font:inherit;text-align:left;color:inherit;cursor:pointer}
.instr-head:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:12px}
.instr-tag{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--blue-2);background:var(--paper-2);border-radius:100px;padding:4px 10px;white-space:nowrap}
.instr-name{font-family:var(--sans);font-weight:600;font-size:14.5px;flex:1}
.instr-plus{font-family:var(--mono);font-size:16px;color:var(--gray);transition:transform .3s;flex:none}
.instr-card.open .instr-plus{transform:rotate(45deg);color:#1A1A1A}
.instr-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.7,.2,1)}
.instr-card.open .instr-body{max-height:340px}
.instr-body-inner{padding:0 18px 18px;border-top:1px solid var(--paper-2);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.instr-body-inner div{font-size:14px;color:var(--lab)}
.instr-body-inner b{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:3px;font-weight:500}
.instr-ans{font-size:14.5px;line-height:1.6;color:var(--lab);margin:0 0 10px}
.instr-meta{display:inline-block;font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray);background:var(--sand-2);border-radius:100px;
  padding:4px 10px;margin-bottom:8px}
.instr-feeds{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:14px;color:var(--blue-2);background:#F1EDEA;border-radius:100px;padding:4px 10px;margin-top:2px}
/* ---- animated process track ---- */
.pnodes{display:flex;justify-content:space-between;gap:8px}
.pnode{flex:1;text-align:center;padding:34px 6px 0;position:relative}
.pnode .dot{position:absolute;top:1px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--gray);z-index:2;transition:background .3s ease,border-color .3s ease,transform .3s ease}
.pnode.lit .dot{background:#1A1A1A;border-color:#1A1A1A;transform:translateX(-50%) scale(1.2)}
.pnode b{display:block;font-family:var(--mono);font-size:14px;color:var(--gray);margin-bottom:6px}
.pnode h4,.pnode h3.h4{font-family:var(--sans);font-size:15px;margin-bottom:5px}
.pnode p{font-size:14px;color:var(--lab);line-height:1.4}

/* ============ PROCESS STEPS AS PHOTO CARDS (Radicle pattern 11) ============
   2026-08-14. Was a hairline rail with five dots — a diagram carrying the
   whole "what it is like to work with us" story in 12px type. Radicle's
   equivalent ("From Hypothesis to Evidence") is PHOTO CARDS WITH THE
   CONTENT OVERLAID AT THE BOTTOM, and that is what this is now.
   ⚠️ The gradient scrim is NOT decoration — the copy sits on the
   photograph, and without it the caption dies wherever the image is light.
   The generated images are already darker at the base; the scrim is the
   guarantee, not the plan.
   ⚠️ THEY HAVE 3 STEPS, curí HAS 5. Five equal cards across 1200px are too
   narrow to read, so this is a SCROLL-SNAP RAIL: cards keep a usable width
   and the row scrolls. Do not collapse it to a 5-col grid.
   Playbook: memory/curi-radicle-section-designs.md */
/* ⚠️ min was 232px, which overflows a 1152px content column at 5 cards +
   4 gaps and left the fifth permanently clipped — that reads as a bug, not
   a scroll affordance. 200px lets all five FIT at desktop and the rail only
   scrolls once the viewport is genuinely too narrow. If a sixth step is
   ever added, recompute: (content - gaps) / n. */
.pcards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);
  gap:14px;margin-top:46px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none}
.pcards::-webkit-scrollbar{display:none}
.pcard{position:relative;scroll-snap-align:start;border-radius:18px;overflow:hidden;
  aspect-ratio:4/5;background:var(--sand-2);display:block}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pcard:hover img{transform:scale(1.05)}
.pcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,15,.88) 0%,rgba(20,17,15,.55) 34%,rgba(20,17,15,.06) 62%,transparent 100%)}
.pcard-body{position:absolute;left:0;right:0;bottom:0;padding:20px 18px;z-index:2;color:#fff}
.pcard-n{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);font-family:var(--mono);font-size:14px;
  margin-bottom:10px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pcard h4,.pcard h3.h4{font-family:var(--sans);font-size:17px;color:#fff;margin:0 0 5px;letter-spacing:-.01em}
.pcard p{font-size:14px;line-height:1.45;color:rgba(255,255,255,.82);margin:0}
@media(prefers-reduced-motion:reduce){.pcard img{transition:none}.pcard:hover img{transform:none}}
@media(max-width:700px){.pcards{grid-auto-columns:minmax(200px,78%)}}
@media(max-width:800px){
  .pnodes{flex-direction:column;gap:18px;text-align:left}
  .pnode{padding:0 0 0 22px;position:relative}
  .pnode::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;background:var(--line)}
  .pnode.lit::before{background:#1A1A1A}
}
/* ---- quote builder (pricing) ---- */
.qb{display:grid;grid-template-columns:1.3fr .9fr;gap:40px;align-items:start;margin-top:46px}
.qb-cat-label{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin:22px 0 10px}
.qb-cat-label:first-child{margin-top:0}
.qb-item{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:.15s;background:#fff}
.qb-item:hover{border-color:var(--gray)}
.qb-item:has(input:checked){border-color:#1A1A1A;background:#F1EDEA}
.qb-item input{accent-color:#1A1A1A;width:17px;height:17px;flex:none}
.qi-name{flex:1;font-size:14.5px;font-weight:500}
.qi-days{font-family:var(--mono);font-size:14px;color:var(--gray);white-space:nowrap}
.qi-price{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;min-width:56px;text-align:right}
.qb-summary{position:sticky;top:96px;border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:var(--paper-2)}
.qb-summary h3{font-size:16px;margin-bottom:18px}
.qb-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
.qb-row:first-of-type{border-top:none}
.qb-row span{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--lab)}
.qb-row b{font-family:var(--mono);font-size:15px;color:var(--ink)}
.qb-row.total b{font-size:26px}
.qb-tierbadge{display:inline-block;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--blue-2);background:#F1EDEA;border-radius:100px;padding:5px 12px;margin-top:2px}
.qb-summary .btn{width:100%;text-align:center;margin-top:18px}
.qb-empty{font-size:14px;color:var(--gray);margin-top:4px}
.qb-note{font-family:var(--mono);font-size:14px;color:var(--gray);margin-top:14px;line-height:1.6}
@media(max-width:900px){
  .qb{grid-template-columns:1fr}
  .qb-summary{position:static}
}
/* ---- flip cards (about) ---- */
.flip-card{perspective:1400px;height:280px}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d;cursor:pointer}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);padding:28px 26px;border:1px solid var(--line);display:flex;flex-direction:column}
.flip-front{background:#fff}
.flip-back{transform:rotateY(180deg);background:var(--ink);color:#fff;justify-content:center}
.flip-back p{color:rgba(255,255,255,.82);font-size:14px;line-height:1.6}
.flip-back h3{color:#fff;font-size:16px;margin-bottom:10px}
.flip-hint{margin-top:auto;font-family:var(--mono);font-size:14px;color:var(--blue-2);letter-spacing:.04em}
.flip-back .flip-hint{color:rgba(255,255,255,.5)}
/* ============ PLATFORM PAGE — the showpiece ============ */

/* cinematic stage hero */
.stage-hero{position:relative;background:var(--t-deep);color:#fff;overflow:hidden;padding:0}
.stage-hero .sh-inner{position:relative;z-index:3;padding:110px 24px 90px}
.stage-hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.55}
.stage-hero .sh-veil{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at 22% 38%,rgba(26,26,26,.10),rgba(26,26,26,.88) 72%)}
.stage-hero h1{font-size:clamp(42px,6vw,80px);line-height:1;letter-spacing:-.03em;color:#fff;margin-bottom:22px}
.stage-hero h1 em{font-style:normal;color:var(--t-sky);}
.stage-hero .lede{color:rgba(255,255,255,.78);font-size:clamp(17px,1.6vw,20px);max-width:600px}
.sh-stages{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px}
/* ⚠️ These chips now lead in plain English with the stage word demoted to a
   sub-line, so the sans face carries the label and the mono carries the tag —
   the same hierarchy used on the goal cards and the PROVE picker. */
.sh-stage{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:-.01em;
  color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.2);border-radius:14px;
  padding:9px 16px;transition:.4s;text-align:left;line-height:1.25}
.sh-stage em{display:block;font-style:normal;font-family:var(--mono);font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-top:3px}
.sh-stage.lit em{color:rgba(255,255,255,.66)}
.sh-stage.lit{color:#fff;border-color:var(--teal);background:rgba(107,90,78,.22)}
/* sticky scroll-spy rail */
.spy{position:sticky;top:74px;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.spy-inner{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.spy-inner::-webkit-scrollbar{display:none}
.spy-link{flex:1;min-width:132px;padding:16px 12px;text-align:center;font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--gray);border-bottom:2px solid transparent;transition:.25s;white-space:nowrap;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none}
.spy-link b{display:block;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--lab);margin-top:3px;transition:.25s}
.spy-link:hover b{color:var(--ink)}
.spy-link.on{border-bottom-color:var(--teal);color:var(--teal)}
.spy-link.on b{color:var(--ink)}
/* stage chapter */
.chapter{position:relative;padding:110px 0}
.ch-num{font-family:var(--mono);font-size:clamp(72px,11vw,150px);font-weight:700;line-height:.8;letter-spacing:-.05em;color:var(--ink);opacity:.07;position:absolute;top:48px;right:24px;pointer-events:none;user-select:none}
.chapter.on-dark .ch-num{color:#fff;opacity:.1}
.ch-head{max-width:720px;margin-bottom:44px}
.ch-kicker{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.chapter h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.025em;line-height:1.05;margin-bottom:16px}
.ch-lede{font-size:18px;color:var(--lab);line-height:1.6}
.chapter.on-dark .ch-lede{color:rgba(255,255,255,.76)}
.chapter.on-dark .ch-kicker{color:#D8C9B4}
/* JAR sensory visual (DISCOVER) */
.jar-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.jar-chart{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px}
.jar-row{margin-bottom:18px}
.jar-row:last-child{margin-bottom:0}
.jar-label{display:flex;justify-content:space-between;font-size:14px;margin-bottom:7px}
.jar-label b{font-weight:600}
.jar-label span{font-family:var(--mono);font-size:14px;color:var(--lab)}
.jar-bar{position:relative;height:22px;background:var(--sand-2);border-radius:5px;overflow:hidden}
.jar-mid{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--taupe-2);z-index:2}
.jar-fill{position:absolute;top:3px;bottom:3px;border-radius:3px;background:#1A1A1A;transition:width 1.1s cubic-bezier(.2,.7,.2,1),left 1.1s cubic-bezier(.2,.7,.2,1);width:0;left:50%}
.jar-legend{display:flex;justify-content:space-between;font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--gray);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.jar-verdict{margin-top:20px;padding:16px 18px;border-radius:10px;background:var(--teal-soft);border-left:3px solid var(--teal);font-size:14px;line-height:1.55}
.jar-verdict b{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:5px}
/* study designer (VALIDATE) */
.designer{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px}
.dz-row{margin-bottom:24px}
.dz-row:last-of-type{margin-bottom:12px}
.dz-lab{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:10px}
.dz-lab b{font-size:17px;color:var(--ink);letter-spacing:-.01em;text-transform:none}
/* ⚠️ TAP TARGET FIX 2026-08-14: the range track rendered 5px tall, so the
   whole control was a 5px hit area on touch. Padding the input gives it a
   44px band while the visible track keeps its thickness. */
.dz-range{width:100%;-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;background:var(--sand-3)}
.dz-range:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.dz-range{padding:20px 0;background-clip:content-box;box-sizing:content-box}

.dz-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ink);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.24)}
.dz-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);cursor:pointer;border:3px solid #fff}
.dz-chips{display:flex;flex-wrap:wrap;gap:7px}
.dz-chip{font-size:14px;padding:8px 14px;border-radius:100px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:.16s}
.dz-chip:hover{border-color:var(--taupe-2)}
.dz-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.dz-out{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dz-cell b{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:5px}
.dz-cell span{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.35;display:block}
.dz-note{font-family:var(--mono);font-size:14px;color:var(--gray);margin-top:16px;line-height:1.6}
/* endpoint matrix (PROVE) */
/* ⚠️ THE PROVE BACKDROP — six preloaded layers, cross-faded by class.
   Replaces a single <img> whose src was swapped behind a 180ms timeout and
   a 350ms fade (~half a second). The fade here is SHORT on purpose: this is
   now driven by hover, and anything slower feels laggy under a moving
   pointer. Do not raise it back toward the .csbg-l timings — those are for
   a click-driven surface where a slow dissolve reads as luxurious. */
.epbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.epbg-l{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .18s ease}
.epbg-l.on{opacity:1}
@media(prefers-reduced-motion:reduce){.epbg-l{transition:none}}

/* 12 areas rather than 6, so four across reads better than three */
.ep-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:1000px){.ep-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.ep-grid{grid-template-columns:repeat(2,1fr)}}
.ep-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:16px 14px;cursor:pointer;transition:.16s}
.ep-card{text-align:center}
.ep-card:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12)}
.ep-card:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ep-card.on{background:rgba(107,90,78,.2);border-color:var(--teal)}
.ep-card h4,.ep-card h3.h4{font-family:var(--sans);font-size:14.5px;color:#fff;margin-bottom:0;line-height:1.3}
.ep-card p{font-family:var(--mono);font-size:14px;color:rgba(255,255,255,.52);line-height:1.5}
.ep-detail{margin-top:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:26px 28px}
.ep-detail .epd-lab{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px}
.ep-detail h4{font-family:var(--sans);font-size:20px;color:#fff;margin-bottom:14px}
.epd-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.epd-rows div b{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#D8C9B4;margin-bottom:6px}
.epd-rows div p{font-size:14px;color:rgba(255,255,255,.8);line-height:1.55}
/* THE EVIDENCE STACK — showpiece */
.stack-wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-top:44px}
.stack-vis{position:relative;height:400px;display:flex;flex-direction:column-reverse;justify-content:flex-start;gap:9px;perspective:900px}
.slab{position:relative;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-family:var(--mono);opacity:0;transform:translateY(26px) rotateX(-12deg);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s;transform-origin:bottom center}
.slab.on{opacity:1;transform:translateY(0) rotateX(0)}
.slab b{font-size:14px;letter-spacing:.04em}
/* ⚠️ CONTRAST FIX 2026-08-14 (measured, not guessed). White text on the two
   mid slabs failed AA: #9E9189 gave 3.06 and #93847A gave 3.61 against a
   4.5 requirement at 13px. Both now carry INK, which measures 5.97 and 5.08
   — and it keeps the light→dark ramp intact rather than darkening the
   backgrounds and flattening the progression.
   ⚠️ The sub-label's opacity:.72 is REMOVED. It was compounding the failure,
   and the standing rule here is explicit: demote secondary text by SIZE,
   never by opacity. 10.5px vs 13px carries the hierarchy on its own. */
.slab span{font-size:14px;letter-spacing:.06em}
.slab-1{background:var(--sand-3);color:var(--ink)}
.slab-2{background:var(--taupe-2);color:var(--ink)}
.slab-3{background:var(--taupe);color:var(--ink)}
.slab-4{background:var(--teal);color:#fff}
.slab-5{background:var(--ink);color:#fff;box-shadow:0 18px 44px rgba(0,0,0,.3)}
.stack-ctrl{display:flex;flex-direction:column;gap:8px;margin-top:26px}
.stack-btn{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:center;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 16px;cursor:pointer;transition:.18s;font-family:var(--body)}
.stack-btn:hover{border-color:var(--taupe-2)}
.stack-btn.on{border-color:var(--teal);background:var(--teal-soft)}
.stack-btn i{font-family:var(--mono);font-style:normal;font-size:14px;font-weight:700;color:var(--gray)}
.stack-btn.on i{color:var(--teal)}
.stack-btn b{font-size:14px;font-weight:600;display:block}
.stack-btn span{font-size:14px;color:var(--lab);display:block;margin-top:1px}
.stack-read{background:var(--ink);color:#fff;border-radius:14px;padding:24px 26px;margin-top:22px}
.stack-read .sr-lab{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px}
.stack-read .sr-claim{font-family:var(--sans);font-size:19px;font-weight:600;line-height:1.35;color:#fff}
.stack-read .sr-sub{font-family:var(--mono);font-size:14px;color:#D8C9B4;margin-top:10px;line-height:1.6}
@media(max-width:900px){
  .jar-wrap,.stack-wrap{grid-template-columns:1fr;gap:28px}
  .ep-grid{grid-template-columns:1fr 1fr}
  .epd-rows{grid-template-columns:1fr}
  .dz-out{grid-template-columns:1fr}
  .stack-vis{height:330px}
  .ch-num{font-size:64px;top:24px}
  .chapter{padding:72px 0}
  .spy{top:0}
}
/* ---- light hero (bright imagery, dark type) ---- */
.hero2.light .hshade{background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.28) 72%,rgba(255,255,255,0) 100%)}
.hero2.light h1{color:var(--ink)}
.hero2.light h1 em{color:var(--teal)}
.hero2.light .lede{color:var(--lab)}
.hero2.light .eyebrow{color:var(--teal)}
.hero2.light .btn{background:var(--ink);color:#fff}
.hero2.light .btn:hover{background:var(--taupe-dk)}
.hero2.light .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.hero2.light .btn.ghost:hover{background:var(--ink);color:#fff}
.hero2.light .htrust{color:var(--lab);border-top:1px solid var(--line);padding-top:24px}
.hero2.light .htrust b{color:var(--ink)}
/* planner turns to light glass on a bright hero */
.hero2.light .planner{background:var(--glass-dense);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border:1px solid var(--glass-edge);box-shadow:var(--glass-lift),var(--glass-cast-lg);color:var(--ink)}
.hero2.light .planner h3{color:var(--ink)}
.hero2.light .planner .psub{color:var(--lab)}
.hero2.light .pchip{color:var(--ink);background:var(--glass-sheer);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border-color:var(--glass-edge)}
.hero2.light .pchip:hover{border-color:var(--taupe)}
.hero2.light .pchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero2.light .pout-inner{border-top-color:var(--line)}
.hero2.light .pout .plabel{color:var(--lab)}
.hero2.light .pout .ppath{color:var(--ink)}
.hero2.light .pout .ppath i{color:var(--teal)}
.hero2.light .planner .btn{background:var(--ink);color:#fff}
/* ---- bright photo section with light glass panels ---- */
.sec-photo{position:relative;overflow:hidden;padding:var(--band) 0}
.sec-photo>.secbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* ⚠️ SCRIM HISTORY — read before touching this.
   v1 rgba(250,249,248,.90)->.82 flat: erased the photograph entirely.
   v2 directional .94->.04: still washed and tinted the left two thirds.
   v3 (this): the photograph runs essentially clean. A flat scrim over a
   photograph is almost always wrong — it fades the image AND casts it,
   because the veil colour is a warm off-white and at high alpha that tint
   is what you see. Legibility is carried by the TYPE instead: the heading,
   eyebrow and lede get a white halo (the same device the hero uses), and
   the cards, detail panel and disclaimer each carry their own surface.
   If type ever goes unreadable here, halo the type — do not raise this. */
/* ⚠️ NO CAST — final state of a rule that went .90 -> .26 -> nothing.
   Every piece of content on these sections now carries its own glass, so
   the section does not need lightening and the photographs run true.
   Reintroducing any flat veil here undoes that. If something becomes hard
   to read, give THAT element a surface — do not dim the picture. */
.sec-photo>.secveil{display:none}
/* ⚠️ The halo was tried here and MEASURED AS FAILING. A white text-shadow
   works on the homepage hero because there is exactly one photograph and it
   is bright where the type sits. Here the background swaps between SIX
   images, and on ep-joint (sunlit grass) and ep-gut (blown-out window) the
   eyebrow and lede dropped to 1.6-3.3:1. You cannot halo your way to
   legibility over an image you do not control.
   So the intro takes its own surface — the same glass language as the cards
   below it — and the photograph is then free to run completely clean.
   This is the reference's actual grammar: type on a surface, picture at
   full strength, never a scrim across the whole frame. */
/* Real glass, not a solid card — the photograph reads THROUGH it.
   ⚠️ The alpha is not a taste choice, it is bounded. The darkest backdrop
   anywhere behind this panel across all six endpoint images is rgb(23,16,7)
   (hair, ep-beauty), measured after a 28px blur. At the panel's most
   transparent corner (.56) that composites to ~rgb(153,150,146), where
   INK clears AA at 5.7 but #5D554D (2.4) and clay (2.2) do NOT.
   That is why the lede and kicker are ink here and hierarchy is carried by
   size and weight instead of colour — the same 'value and type, not hue'
   principle the palette runs on. Lower the alpha or lighten this type and
   it fails on ep-beauty. An edgeless radial fade was also tried: it does
   not work, because backdrop-filter clips to the element box and leaves a
   visible rectangle edge even where the gradient is fully transparent. */
.sec-photo .ch-head{background:rgba(255,255,255,.56);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);border-radius:14px;
  padding:30px 32px 32px;max-width:720px;
  box-shadow:var(--glass-lift),var(--glass-cast-lg)}
.sec-photo .ch-head .ch-lede,.sec-photo .ch-head .ch-kicker{color:var(--ink)}
.sec-photo .ch-head .ch-lede{margin-bottom:0}
/* the pricing intro reuses this panel; its inner classes differ */
.sec-photo .ch-head>.lede:last-child,.sec-photo .ch-head>.shead+.lede{margin-bottom:0}
.sec-photo .ch-head .shead{margin-top:2px}
.sec-photo .ch-head{margin-bottom:34px}
@media(max-width:700px){.sec-photo .ch-head{padding:22px 20px 24px}}
/* the ghost chapter numeral needs to lift off the photo too */
.sec-photo .ch-num{color:rgba(26,26,26,.07)}
.sec-photo>.wrap{position:relative;z-index:2}
.glass-light{background:var(--glass-dense);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border:1px solid var(--glass-edge);border-radius:18px;box-shadow:var(--glass-lift),var(--glass-cast)}
/* PIM on a bright photo section */
.sec-photo .pim-surface-btn{color:var(--lab);background:var(--glass-dense);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border-color:var(--glass-edge)}
.sec-photo .pim-surface-btn:hover{border-color:var(--taupe);color:var(--ink)}
.sec-photo .pim-surface-btn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sec-photo .pim-panel{background:var(--glass-dense);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border:1px solid var(--glass-edge);box-shadow:var(--glass-lift),var(--glass-cast);color:var(--ink)}
.sec-photo .pim-panel .pp-label{color:var(--lab)}
.sec-photo .pim-panel .pp-test{color:var(--ink)}
.sec-photo .pim-rows{border-top-color:var(--line)}
.sec-photo .pim-row{border-bottom-color:var(--line)}
.sec-photo .pim-row span{color:var(--lab)}
.sec-photo .pim-row b{color:var(--ink)}
.sec-photo .pim-panel .btn{background:var(--ink);color:#fff}
.sec-photo .pim-panel .btn:hover{background:var(--taupe-dk)}
.sec-photo .pim-note{color:var(--gray)}
.sec-photo .mock-browser,.sec-photo .mock-phone{box-shadow:0 20px 54px rgba(93,85,77,.2)}
.glass-light.pcell-g .x{color:var(--teal)}
.glass-light.pcell-g h3{color:var(--ink)}
.glass-light.pcell-g p{color:var(--lab)}
/* ============ dark components rehoused on light photo sections ============ */
/* speed chart — these were the light-ground patches from when the base
   chart was still styled for a dark section. The base rules now target the
   light ground directly, so only the track tint is kept.
   The comparison bar stays a true NEUTRAL: a warm taupe read as another
   category rather than as the baseline being beaten. */
.sec-photo .cbar-wrap{background:rgba(93,85,77,.10)}
.sec-photo .cx-axis .scale{color:var(--gray)}
/* claim studio */
.sec-photo .ctrl-label{color:var(--ink);display:inline-block;
  background:rgba(255,255,255,.48);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);border-radius:100px;padding:5px 12px}
.sec-photo .cat-chip{color:var(--ink);background:rgba(255,255,255,.48);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border-color:var(--glass-edge)}
.sec-photo .cat-chip:hover{border-color:var(--taupe)}
.sec-photo .cat-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sec-photo .lvl-btn{background:rgba(255,255,255,.48);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border-color:var(--glass-edge);color:var(--ink)}
.sec-photo .lvl-btn:hover{border-color:var(--taupe)}
.sec-photo .lvl-btn.on{background:var(--teal-soft);border-color:var(--ink)}
.sec-photo .lvl-btn .ld{color:var(--ink)}
.sec-photo .dbadge{border-color:var(--glass-edge);color:var(--gray);background:var(--glass-dense);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat))}
.sec-photo .dbadge.lit{border-color:var(--pass);background:var(--pass-bg);color:var(--pass)}
.sec-photo .tier-warn{color:var(--ink);background:rgba(255,255,255,.58);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border-left-color:#c98500}
.sec-photo .tier-warn b{color:var(--ink)}
.sec-photo .studio-note{color:var(--ink);display:inline-block;
  background:rgba(255,255,255,.48);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);border-radius:10px;padding:7px 12px}
.sec-photo .label-card{box-shadow:0 18px 50px rgba(93,85,77,.18)}
/* stat bar */
.stats.sec-photo{padding:70px 0}
/* ⚠️ These stats sat directly on the lab photograph. Once .secveil was
   lightened so the picture could show, 'step reviewed testing process' ran
   straight over the microscope and became unreadable. They are cards now —
   the same device the reference uses for stats over an image.
   Dense, because the label is --lab: at .58 it measures 2.9 over the
   darkest point of this photo; at .86 it is 5.6. */
.sec-photo .stat{background:rgba(255,255,255,.52);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);border-radius:14px;padding:26px 22px;
  box-shadow:var(--glass-lift),var(--glass-cast)}
.sec-photo .stat b{color:var(--ink)}
.sec-photo .stat span{color:var(--ink)}
/* ⚠️ ACCREDITATION VARIANT of the stat card, 2026-08-13. The stats held
   NUMERALS, so `b` was clamped to 30-44px. These hold WORDS — "ISO/IEC
   17025:2017" at 44px mono would blow the card apart — so the display size
   is re-cut for text while staying clearly bigger than the flat band it
   replaced, and the description goes up too because that was the ask. */
/* ⚠️ THIS EYEBROW SITS DIRECTLY ON THE PHOTOGRAPH and vanished over the
   microscope on the first render — the same failure the note above
   .sec-photo .stat records for the old stat labels. Fixed with the site's
   standing rule for type on a bright photo: DARK TYPE WITH A WHITE HALO.
   White type with a dark shadow is unreadable here — do not swap it. */
.acc-eyebrow{text-align:left;margin-bottom:22px;color:var(--ink);
  text-shadow:0 0 12px rgba(255,255,255,.95),0 0 26px rgba(255,255,255,.85)}
/* ⚠️ .acc-grid (four equal glass cards) was REPLACED 2026-09-02 by .acc-split
   below — ISO/IEC 17025 leads, the other three support. The size note above
   still applies: these hold WORDS, so `b` is cut for text, never numerals.
   Recover .acc-grid from history if the four-equal treatment is wanted back.

   SPLIT ACCREDITATION BAND. Both panels are the same glass card as
   `.sec-photo .stat` because they sit on the same lab photograph, and every
   piece of type inside them is --ink for the reason recorded there: --lab
   drops to 2.9 over the darkest point of this picture. Do not soften it. */
.acc-split{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;align-items:stretch}
.acc-lead,.acc-rest{background:rgba(255,255,255,.52);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);border-radius:14px;
  box-shadow:var(--glass-lift),var(--glass-cast)}
.acc-lead{padding:32px 32px 34px;display:flex;flex-direction:column;justify-content:center}
.acc-kicker{font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.acc-lead b{display:block;font-family:var(--mono);font-size:clamp(23px,2.9vw,36px);
  font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--ink);margin-bottom:15px}
.acc-lead p{font-size:15.5px;line-height:1.6;color:var(--ink);margin:0;max-width:46ch}
.acc-rest{list-style:none;margin:0;padding:6px 32px;
  display:flex;flex-direction:column;justify-content:center}
.acc-rest li{display:flex;flex-direction:column;gap:4px;padding:19px 0;
  border-bottom:1px solid rgba(93,85,77,.18)}
.acc-rest li:last-child{border-bottom:0}
.acc-rest b{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ink)}
.acc-rest span{font-size:14px;line-height:1.5;color:var(--ink)}
@media(max-width:900px){
  .acc-split{grid-template-columns:1fr;gap:16px}
  .acc-lead{padding:26px 24px 28px}
  .acc-rest{padding:2px 24px}
  .acc-rest li{padding:16px 0}
}
/* retail readiness panel */
.sec-photo .rr-panel{background:var(--glass-dense);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border:1px solid var(--glass-edge);box-shadow:var(--glass-lift),var(--glass-cast);color:var(--ink)}
.sec-photo .rr-score-ring .rr-track{stroke:rgba(93,85,77,.15)}
.sec-photo .rr-score-num b{color:var(--ink)}
.sec-photo .rr-score-num span{color:var(--lab)}
.sec-photo .rr-verdict{color:var(--ink)}
.sec-photo .rr-sub{color:var(--lab)}
.sec-photo .rr-gaps{border-top-color:var(--line)}
.sec-photo .rr-gaps b{color:var(--lab)}
.sec-photo .rr-gap{color:var(--ink)}
.sec-photo .rr-panel .btn{background:var(--ink);color:#fff}
.sec-photo .rr-panel .btn:hover{background:var(--taupe-dk)}
.sec-photo .qb-note{color:var(--gray)}
/* PROVE endpoint matrix */
.sec-photo .ep-card{background:rgba(255,255,255,.58);border-color:var(--glass-edge);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:var(--glass-lift),var(--glass-cast)}
.sec-photo .ep-card:hover{border-color:var(--taupe)}
.sec-photo .ep-card.on{background:var(--teal-soft);border-color:var(--teal)}
.sec-photo .ep-card h4,.ep-card h3.h4{color:var(--ink)}
.sec-photo .ep-card p{color:var(--ink)}
.sec-photo .ep-detail{background:rgba(255,255,255,.58);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);box-shadow:var(--glass-lift),var(--glass-cast-lg)}
.sec-photo .ep-detail .epd-lab{color:var(--ink)}
.sec-photo .ep-detail h4{color:var(--ink)}
.sec-photo .epd-rows div b{color:var(--teal)}
.sec-photo .epd-rows div p{color:var(--ink)}
.sec-photo .ch-num{color:var(--ink);opacity:.06}
.sec-photo .ch-lede{color:var(--lab)}
.sec-photo .ch-kicker{color:var(--teal)}
/* ⚠️ COMPLIANCE: this is the DSHEA structure/function disclaimer. Once the
   section veil was lightened so the photograph could show, this line ran
   straight onto the image and the right half became unreadable. It gets its
   own surface — the disclaimer has to be legible on every endpoint image,
   including the darkest ones. Do not remove this backing to "clean up" the
   layout without replacing the legibility some other way. */
.sec-photo .dz-note{color:var(--ink)!important;display:inline-block;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);border-radius:8px;padding:8px 12px;max-width:100%}
/* ---- retail readiness checker ---- */
.rr{display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:start;margin-top:40px}
.rr-q{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:10px}
.rr-q p{font-family:var(--sans);font-size:15.5px;font-weight:600;margin-bottom:14px;line-height:1.35}
.rr-opts{display:flex;gap:8px;flex-wrap:wrap}
.rr-opt{font-size:14px;padding:9px 18px;border-radius:100px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:.16s;font-family:var(--body)}
.rr-opt:hover{border-color:var(--taupe-2)}
.rr-opt.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.rr-panel{position:sticky;top:100px;background:var(--ink);color:#fff;border-radius:16px;padding:28px 26px}
.rr-score-ring{position:relative;width:132px;height:132px;margin:0 auto 18px}
.rr-score-ring svg{transform:rotate(-90deg)}
.rr-score-ring .rr-track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:9}
.rr-score-ring .rr-prog{fill:none;stroke:#1A1A1A;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1),stroke .4s}
.rr-score-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rr-score-num b{font-family:var(--mono);font-size:32px;font-weight:700;line-height:1}
.rr-score-num span{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:rgba(255,255,255,.5);margin-top:3px}
.rr-verdict{text-align:center;font-family:var(--sans);font-size:17px;font-weight:600;margin-bottom:6px}
.rr-sub{text-align:center;font-size:14px;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:18px}
.rr-gaps{border-top:1px solid rgba(255,255,255,.14);padding-top:16px}
.rr-gaps b{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.rr-gap{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.85);padding:6px 0;line-height:1.45}
.rr-gap i{font-style:normal;color:#c98500;flex:none}
.rr-panel .btn{width:100%;justify-content:center;margin-top:18px;background:#fff;color:var(--ink)}
@media(max-width:900px){.rr{grid-template-columns:1fr}.rr-panel{position:static}}
/* ---- impact / timeline (about) ---- */
.tl{position:relative;margin-top:44px;padding-left:30px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:30px;cursor:pointer}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-30px;top:5px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--taupe-2);transition:.25s;z-index:2}
.tl-item.on::before{background:var(--teal);border-color:var(--teal);transform:scale(1.18)}
.tl-year{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--teal);margin-bottom:4px}
.tl-item h4{font-family:var(--sans);font-size:17px;margin-bottom:5px}
.tl-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.7,.2,1)}
.tl-item.on .tl-body{max-height:140px}
.tl-body p{font-size:14px;color:var(--lab);line-height:1.6;padding-top:6px;max-width:560px}
/* ---- contact router ---- */
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px}
.route{text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 18px;cursor:pointer;transition:.18s;font-family:var(--body)}
.route:hover{border-color:var(--taupe-2);transform:translateY(-2px)}
.route.on{border-color:var(--teal);background:var(--teal-soft)}
.route b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600;margin-bottom:3px}
.route span{font-size:14px;color:var(--lab);line-height:1.45;display:block}
.route-out{background:var(--teal-soft);border-left:3px solid var(--teal);border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.55;margin-bottom:22px}
.route-out b{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:5px}
@media(max-width:700px){.route-grid{grid-template-columns:1fr}}
/* ---- lifecycle / account growth ---- */
/* ---- lifecycle: three phases, nine stages, all visible ----
   The claim is whole-life coverage, so showing all nine at once IS the
   argument. Chunking into three phases keeps it holdable; the deliverable
   ends each row because that is the concrete thing the buyer receives. */
/* ⚠️ UPGRADED 2026-08-13 — Namrata: "this section is good, it can look much
   better." The content did not change; the three phases became CARDS on the
   mist ground, each with a phase numeral, joined by a connector so the three
   read as one sequence rather than three parallel lists. */
.lc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.lc-phase{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px 20px;display:flex;flex-direction:column}
/* the connector: a small chevron sitting in the gutter between cards, so the
   eye moves Develop -> Prove -> Grow. Desktop only — once the cards stack the
   arrow would point sideways into nothing. */
.lc-phase:not(:last-child)::after{content:"\2192";position:absolute;top:34px;right:-17px;
  width:26px;height:26px;border-radius:50%;background:var(--sand-3);color:var(--ink);
  font-family:var(--mono);font-size:14px;display:flex;align-items:center;justify-content:center;
  z-index:2}
/* ⚠️ HIERARCHY WAS INVERTED until 2026-09-02. The three PHASE names sat at
   11px mono uppercase while the nine STAGE names under them sat at 15.5px
   sans bold - so the chapters read as weaker than their own contents, and
   the section scanned as nine equal services rather than three you can
   locate yourself in. The phase name is now the dominant element in the
   card and the number is demoted to a quiet marker beside it.
   ⚠️ Keep .lc-ph larger than .lc-phase b. That relationship is the fix. */
.lc-ph{font-family:var(--sans);font-size:21px;font-weight:700;letter-spacing:-.025em;
  text-transform:none;color:var(--ink);padding-bottom:14px;
  border-bottom:1px solid rgba(26,26,26,.14);margin-bottom:6px;
  display:flex;align-items:center;gap:10px}
.lc-ph i{font-style:normal;font-family:var(--mono);font-size:14px;font-weight:500;
  letter-spacing:.08em;color:var(--gray);background:none;border:1px solid var(--line);
  border-radius:4px;padding:3px 6px;line-height:1}
/* ⚠️ Nine stages at identical weight gave the reader no way in — nobody
   enters at all nine, they enter at one. Each phase now states WHEN it
   applies, so the grid reads as three chapters you can locate yourself
   in rather than a flat list of nine services. */
.lc-when{font-size:14px;line-height:1.45;color:var(--lab);margin:-6px 0 4px;max-width:30ch;min-height:2.9em}
.lc-phase ol{list-style:none;margin:0;padding:0}
.lc-phase li{padding:18px 0;border-bottom:1px solid rgba(26,26,26,.10)}
.lc-phase li:last-child{border-bottom-color:transparent}
/* Quiet hover on the nine stages: the artifact chip warms, nothing else.
   ⚠️ The row's bottom RULE used to take the accent too. On the last row of a
   card that rule is transparent, so the accent appeared out of nothing as a
   full-width dark line and read as a rendering fault rather than feedback.
   One signal per hover. */
.lc-phase li em{transition:background .3s ease,color .3s ease}
.lc-phase li:hover em{background:var(--accent);color:var(--paper)}
@media(prefers-reduced-motion:reduce){
  .lc-phase li,.lc-phase li em{transition:none}
}
.lc-phase b{display:block;font-family:var(--sans);font-size:15.5px;font-weight:700;
  letter-spacing:-.015em;color:var(--ink)}
.lc-phase b i{font-style:normal;font-family:var(--mono);font-size:14px;font-weight:500;
  color:var(--gray);margin-right:9px}
.lc-phase span{display:block;font-size:14px;color:var(--lab);margin-top:3px;line-height:1.45}
/* the payoff: what you actually walk away with */
/* the payoff, as a chip — it is the concrete thing the buyer receives, so it
   should read as an object rather than as a third line of prose */
.lc-phase em{display:inline-block;font-style:normal;font-family:var(--mono);font-size:14px;
  letter-spacing:.04em;color:var(--ink);margin-top:9px;background:var(--sand-2);
  border-radius:100px;padding:4px 10px;line-height:1.35}

/* ⚠️ THE THIRD PHASE IS THE DARK ONE, 2026-09-02. Three identical white
   cards on a cream ground gave the section no hierarchy at all - Namrata's
   note was "same bg colour, no visual hierarchy" and she was right: at a
   glance it was one flat field of text in three columns.
   Making the LAST phase clay does two things at once. It gives the eye a
   terminus, so the row reads as a journey rather than a menu, and it is
   honest to the content: Grow is where a brand ends up and it is the phase
   the closing CTA speaks to. One committed move, not three tints.
   ⚠️ Clay, not ink. Ink is reserved for the page's closing block; clay is
   already the material of the data room, so this keeps the page to three
   surfaces (paper, clay, ink) instead of inventing a fourth.
   ⚠️ Every value below is measured against #6B5A4E, not guessed. If the
   ground ever changes, re-measure - white is only 6.57 on this clay, so
   there is not much headroom for softening body text further. */
.lc-grid>.lc-phase:nth-child(3){background:var(--clay);border-color:transparent}
.lc-grid>.lc-phase:nth-child(3) .lc-ph{color:#fff;border-bottom-color:rgba(255,255,255,.26)}
.lc-grid>.lc-phase:nth-child(3) .lc-ph i{color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.34)}
.lc-grid>.lc-phase:nth-child(3) .lc-when{color:rgba(255,255,255,.82)}
.lc-grid>.lc-phase:nth-child(3) li{border-bottom-color:rgba(255,255,255,.18)}
.lc-grid>.lc-phase:nth-child(3) li:last-child{border-bottom-color:transparent}
.lc-grid>.lc-phase:nth-child(3) b{color:#fff}
.lc-grid>.lc-phase:nth-child(3) b i{color:rgba(255,255,255,.84)}
.lc-grid>.lc-phase:nth-child(3) span{color:rgba(255,255,255,.82)}
.lc-grid>.lc-phase:nth-child(3) em{background:rgba(255,255,255,.12);color:#fff}
.lc-grid>.lc-phase:nth-child(3) li:hover em{background:#fff;color:var(--clay)}
/* the chevron between Prove and Grow sits in the gutter against cream, so it
   keeps the light treatment; only the one entering the dark card is redrawn */
.lc-grid>.lc-phase:nth-child(2)::after{background:var(--clay);color:#fff}

.lc-arc{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;margin-top:38px;
  padding:24px 28px;border-radius:14px;background:var(--taupe-dk);color:#fff}
.lc-arc .arc-side b{display:block;font-family:var(--mono);font-size:clamp(18px,2vw,24px);font-weight:700;letter-spacing:-.02em}
/* measured on --taupe-dk: .72 gave 4.33 and #D8C9B4 gave 4.04, both short of
   4.5. Raised together; re-measure before softening either. */
.lc-arc .arc-side span{font-size:14px;color:rgba(255,255,255,.86);display:block;margin-top:3px;line-height:1.4}
.lc-arc .arc-mid{font-family:var(--mono);font-size:22px;color:#EFE6DA}
@media(max-width:900px){
  /* ⚠️ STACKED, THIS SECTION RAN 2,407px ON A PHONE - by far the longest on the
     page, three full screens for one component, and the "one partner across
     the whole lifecycle" argument is precisely the one nobody scrolls to the
     end of. It becomes a horizontal snap rail instead: same three phases, same
     nine stages, one screen. The pattern already exists on Platform (.pcards),
     so this is the site's own device, not a new one.
     ⚠️ The scrollbar is hidden, so the cards MUST be cut off at the right edge
     to advertise that the rail scrolls - that is what the 86% width is for.
     Do not round it up to 100%. */
  /* ⚠️ 86%, not minmax(240px,86%) - inside grid-auto-columns the minmax
     resolved to its 240px minimum and the cards came out narrow. And no
     negative-margin bleed: the padding did not survive the scroll container,
     so the first card sat flush to the screen edge instead of on the section
     gutter. The rail lives inside .wrap and inherits its 24px. */
  .lc-grid{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:86%;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none}
  .lc-grid::-webkit-scrollbar{display:none}
  .lc-phase{scroll-snap-align:start}
  .lc-phase:not(:last-child)::after{display:none}
  .lc-arc{grid-template-columns:1fr;gap:14px;text-align:left}
  .lc-arc .arc-mid{transform:rotate(90deg);width:1em}
}
@media(max-width:800px){
  .lc-arc{grid-template-columns:1fr;gap:14px;text-align:left}
  .lc-arc .arc-mid{transform:rotate(90deg);width:22px}
}
/* ---- stability360 timeline ---- */
.s360{margin-top:40px}
.s360-track{display:flex;gap:5px;margin-bottom:20px}
.s360-tp{flex:1;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 6px;text-align:center;cursor:pointer;transition:.2s}
.s360-tp:hover{border-color:var(--taupe-2)}
.s360-tp.on{background:var(--ink);border-color:var(--ink);color:#fff}
.s360-tp b{display:block;font-family:var(--mono);font-size:14px;font-weight:700}
.s360-tp span{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--gray);display:block;margin-top:2px}
.s360-tp.on span{color:rgba(255,255,255,.6)}
.s360-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px}
.s360-panel h4{font-family:var(--sans);font-size:18px;margin-bottom:14px}
.s360-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.s360-col b{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:7px}
.s360-col p{font-size:14px;color:var(--lab);line-height:1.55}
@media(max-width:800px){
  .s360-track{flex-wrap:wrap}
  .s360-tp{min-width:62px}
  .s360-cols{grid-template-columns:1fr 1fr}
}
/* ---- proof in market: claim ↔ test studio ---- */
.pim-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.pim-surface-btn{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:9px 18px;cursor:pointer;transition:.18s}
.pim-surface-btn:hover{border-color:#fff;color:#fff}
.pim-surface-btn.on{background:#fff;color:var(--ink);border-color:#fff}
.pim-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;margin-top:26px;align-items:start}
.pim-stage{position:relative;min-height:520px}
.pim-surface{display:none}
.pim-surface.on{display:block;animation:pimIn .4s ease}
@keyframes pimIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* mock browser chrome */
.mock-browser{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.34)}
.mock-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#EDEDED;border-bottom:1px solid #DCDCDC}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:#C9C9C9;flex:none}
.mock-url{flex:1;background:#fff;border-radius:100px;padding:5px 12px;font-family:var(--mono);font-size:14px;color:#8A8A8A;margin-left:6px}
.mock-body{padding:22px;color:var(--ink)}
.pdp{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px}
.pdp-img{border-radius:10px;overflow:hidden;aspect-ratio:1;background:var(--sand-2)}
.pdp-img img{width:100%;height:100%;object-fit:cover}
.pdp-brand{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.pdp-title{font-family:var(--sans);font-size:19px;font-weight:700;margin:5px 0 3px;letter-spacing:-.01em}
.pdp-sub{font-size:14px;color:var(--lab);margin-bottom:12px}
.pdp-price{font-family:var(--mono);font-size:17px;font-weight:700;margin-bottom:14px}
.pim-claim{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;font-family:var(--body);font-size:14px;line-height:1.4;color:var(--ink);background:var(--sand);border:1px solid var(--line);border-left:3px solid var(--taupe-2);border-radius:8px;padding:9px 12px;margin-bottom:7px;cursor:pointer;transition:.18s}
.pim-claim:hover{border-left-color:var(--teal);background:var(--teal-soft)}
.pim-claim.on{border-left-color:var(--teal);background:var(--teal-soft);box-shadow:0 2px 10px rgba(107,90,78,.14)}
.pim-claim .pc-mark{font-family:var(--mono);font-size:14px;color:var(--teal);flex:none;font-weight:700}
.pdp-btn{display:block;width:100%;text-align:center;background:var(--ink);color:#fff;border-radius:100px;padding:10px;font-size:14px;font-weight:600;margin-top:12px}
/* amazon-ish surface */
.amz{font-size:14px}
.amz-title{font-family:var(--sans);font-size:17px;font-weight:600;margin-bottom:4px}
.amz-stars{color:#E8A400;font-size:14px;letter-spacing:1px}
.amz-badge{display:inline-block;font-family:var(--mono);font-size:14px;letter-spacing:.06em;background:#F0F7F2;color:#2E7D4F;border:1px solid #BFE0CC;border-radius:4px;padding:3px 7px;margin:8px 0 10px}
.amz-bullets{margin-top:4px}
/* phone/app surface */
.mock-phone{width:290px;margin:0 auto;border-radius:34px;background:#111;padding:11px 9px 16px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.mock-notch{width:82px;height:5px;border-radius:100px;background:#333;margin:0 auto 9px}
.mock-screen{background:#fff;border-radius:26px;padding:18px 16px;color:var(--ink)}
.app-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:14px;color:var(--gray);margin-bottom:12px}
.app-img{border-radius:12px;overflow:hidden;aspect-ratio:16/11;margin-bottom:12px;background:var(--sand-2)}
.app-img img{width:100%;height:100%;object-fit:cover}
/* the evidence panel */
.pim-panel{border-radius:16px;padding:26px 24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);position:sticky;top:96px}
.pim-panel .pp-label{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px}
.pim-panel .pp-test{font-family:var(--sans);font-size:20px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:14px}
.pim-rows{border-top:1px solid rgba(255,255,255,.15)}
.pim-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.pim-row span{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.pim-row b{font-family:var(--mono);font-size:14px;color:#fff;text-align:right}
.pim-row b.big{font-size:19px}
.pim-panel .btn{width:100%;justify-content:center;margin-top:18px;background:#fff;color:var(--ink)}
.pim-panel .btn:hover{background:var(--sand-3)}
.pim-note{font-family:var(--mono);font-size:14px;color:rgba(255,255,255,.45);margin-top:14px;line-height:1.6}
@media(max-width:900px){
  .pim-grid{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr}
  .pim-panel{position:static}
  .pim-stage{min-height:0}
}
/* ---- scientific leadership ---- */
.lead-grid{display:grid;grid-template-columns:300px 1fr;gap:44px;margin-top:40px;align-items:start}
.lead-photo{border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--sand-2)}
.lead-photo img{width:100%;height:100%;object-fit:cover}
.lead-photo-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--taupe);border:1px dashed var(--taupe-2);border-radius:18px}
.lead-photo-ph span{font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.lead-name{font-size:clamp(24px,2.6vw,32px);margin-bottom:6px}
.lead-role{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--teal);margin-bottom:20px}
.lead-bio{color:var(--lab);font-size:15.5px;margin-bottom:14px;max-width:660px}
.lead-creds{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 22px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lead-cred b{display:block;font-family:var(--mono);font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.lead-cred span{font-size:14px;color:var(--lab);line-height:1.4;display:block;margin-top:2px}
.lead-quote{font-family:var(--sans);font-size:17px;font-style:italic;color:var(--taupe-dk);line-height:1.5;max-width:640px;padding-left:18px;border-left:3px solid var(--teal)}
@media(max-width:800px){
  .lead-grid{grid-template-columns:1fr;gap:24px}
  .lead-photo{max-width:240px}
  .lead-creds{grid-template-columns:repeat(2,1fr)}
}
/* ⚠️ .credbar / .cred were DELETED 2026-08-14 — the flat accreditation band
   they styled was replaced by .acc-grid (the four accreditations as glass
   cards over the lab photograph). Recover from history if the flat
   treatment is ever wanted again.
   ⚠️ .credband and .credrow below are DIFFERENT and ARE LIVE — they are the
   homepage credential strip under the hero. Do not remove them. */
@media(max-width:820px){
  .cred:nth-child(odd){border-left:0}
  .cred:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:460px){
  .cred{border-left:0;border-top:1px solid var(--line)}
  .cred:first-child{border-top:0}
}
/* ---- contact: progressive form ---- */
.fprogress{display:flex;gap:8px;margin-bottom:26px}
.fprogress i{height:3px;flex:1;border-radius:3px;background:var(--line);transition:background .3s}
.fprogress i.on{background:#1A1A1A}
.fstep{display:none}
.fstep.active{display:block;animation:fstepIn .35s ease}
@keyframes fstepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fstep-nav{display:flex;gap:12px;align-items:center;margin-top:6px}
.fback{font-family:var(--mono);font-size:14px;color:var(--lab);background:none;border:none;cursor:pointer;padding:13px 6px}
.fback:hover{color:var(--ink)}
.ferr{font-family:var(--mono);font-size:14px;color:#B3261E;margin-top:6px;display:none}
.ferr.show{display:block}
.fsuccess{text-align:center;padding:20px 0}
.fsuccess .fcheck{width:52px;height:52px;border-radius:50%;background:var(--pass-bg);color:var(--pass);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px}
.fsuccess h3{font-size:19px;margin-bottom:6px}
.fsuccess p{color:var(--lab);font-size:14px}
/* ============ v4 — benchmarked against Radicle ============ */

/* 1 — dot-prefixed eyebrow */
.eyebrow.dot,.ch-kicker.dot{display:inline-flex;align-items:center;gap:9px}
.eyebrow.dot::before,.ch-kicker.dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
/* 2 — two-column section intro: heading left, supporting copy right */
.sintro{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;margin-bottom:48px}
.sintro h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.025em;line-height:1.08;margin:0}
.sintro .sright{font-size:15.5px;line-height:1.65;color:var(--lab);padding-bottom:5px}
/* on a deep block the intro copy and any inline bold must invert */
.sec-teal .sintro .sright,.sec-clay .sintro .sright,
.sec-ink .sintro .sright,.sec-taupe .sintro .sright{color:rgba(255,255,255,.68)}
.sec-teal .sintro .sright b,.sec-clay .sintro .sright b,
.sec-ink .sintro .sright b,.sec-taupe .sintro .sright b{color:#fff!important}
.sintro.center{grid-template-columns:1fr;text-align:center;justify-items:center;gap:16px}
.sintro.center .sright{max-width:56ch}
@media(max-width:820px){.sintro{grid-template-columns:1fr;gap:18px;align-items:start}}
/* 3 — rich colour card pairs */
.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
.duo-deep{background:var(--clay);color:#fff;border-radius:20px;padding:40px 38px;display:flex;flex-direction:column}
.duo-deep .badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.16);border-radius:100px;padding:6px 13px;margin-bottom:20px}
.duo-deep h3{color:#fff;font-size:clamp(23px,2.5vw,31px);letter-spacing:-.02em;line-height:1.12;margin-bottom:14px}
.duo-deep p{color:rgba(255,255,255,.82);font-size:15px;line-height:1.6;margin-bottom:auto}
.duo-deep .duo-cta{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.duo-deep .btn{background:#fff;color:var(--ink)}
.duo-deep .btn:hover{background:var(--sand-3)}
.duo-deep .lnk{font-size:14px;font-weight:600;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
.duo-pale{background:var(--teal-wash);border-radius:20px;padding:40px 38px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.duo-pale::after{content:"";position:absolute;inset:auto -30px -30px auto;width:190px;height:190px;border-radius:50%;background:rgba(107,90,78,.09)}
.duo-pale blockquote{position:relative;z-index:2;font-family:var(--sans);font-size:clamp(16px,1.7vw,19px);line-height:1.5;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.duo-pale cite{position:relative;z-index:2;display:block;margin-top:18px;font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--lab);font-style:normal}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
/* 4 — typographic capability list with opacity fade */
.wordlist{text-align:center;font-family:var(--sans);font-weight:600;font-size:clamp(19px,2.5vw,31px);line-height:1.5;letter-spacing:-.02em;max-width:1000px;margin:0 auto}
.wordlist span{white-space:nowrap}
.wordlist .w1{color:var(--ink)}
.wordlist .w2{color:#4A4A4A}
.wordlist .w3{color:#7C7C7C}
.wordlist .w4{color:#A9A9A9}
.wordlist .w5{color:#C9C9C9}
.wordlist i{font-style:normal;color:var(--teal);margin:0 4px}
/* 5 — credential band on a tinted ground */
.credband{background:var(--sand-2);padding:38px 0}
.credband p{text-align:center;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--lab);margin-bottom:24px}
.credrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 42px}
.credrow span{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--taupe-dk);opacity:.85}
.credfor{text-align:center;font-family:var(--mono);font-size:14px;letter-spacing:.06em;
  color:var(--gray);margin-top:16px}
.heroshot .credfor{color:var(--ink-2)}
.credrow span small{display:block;font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:.1em;color:var(--gray);margin-top:2px}

/* ============ PROOF BAND (homepage, 2026-09-02) ============
   Linear's discipline on curi's palette: hierarchy comes from a hairline
   ladder and the type scale, never from a card or a cast shadow. This is the
   ONLY section on the homepage with no box around anything, and that is what
   keeps it reading as a fact sheet rather than a fifth feature grid.
   ⚠️ Do not give .pb-item a background, a border-radius or a box-shadow. The
   moment these become cards the section stops doing its job and turns into
   the same three-equal-tiles pattern used twice already further down.
   ⚠️ Hairlines are SPARSE on purpose: one rule above the row, one below it
   (carried by .pb-who's border-top), and verticals between items. Never a
   rule above AND below every element. */
.proofband{background:var(--t-paper);padding:88px 0 78px}
.pb-head{max-width:62ch;margin-bottom:42px}
.proofband h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.03em;line-height:1.08;margin:0 0 12px}
.proofband .lede{font-size:17px;line-height:1.55;color:var(--lab);margin:0}

.pb-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.pb-item{position:relative;padding:28px 30px 30px;border-right:1px solid var(--line)}
.pb-item:first-child{padding-left:0}
.pb-item:last-child{padding-right:0;border-right:0}
.pb-item b{display:block;font-family:var(--mono);font-size:clamp(17px,1.55vw,21px);
  font-weight:700;letter-spacing:-.025em;line-height:1.14;color:var(--ink);margin-bottom:13px}
.pb-item p{font-size:14px;line-height:1.55;color:var(--lab);margin:0}
/* Hover draws the ONE accent along the rule above the item being read.
   Motivated as feedback: it marks which receipt has the pointer, and it is
   the only decorative use of --accent on this page. */
.pb-item::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.pb-item:hover::before{transform:scaleX(1)}

.pb-who{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
  padding-top:26px;border-top:1px solid var(--line)}
.pb-who img{width:74px;height:74px;border-radius:50%;object-fit:cover;display:block}
.pb-who-txt b{display:block;font-family:var(--sans);font-size:17px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink)}
.pb-who-txt span{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.07em;
  color:var(--gray);margin-top:4px}
.pb-who-txt p{font-size:14px;line-height:1.55;color:var(--lab);margin:10px 0 0;max-width:54ch}
.pb-cred{list-style:none;margin:0;padding:0;display:flex;gap:34px}
.pb-cred b{display:block;font-family:var(--mono);font-size:26px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);line-height:1}
.pb-cred span{display:block;font-size:14px;color:var(--lab);margin-top:6px;white-space:nowrap}

@media(max-width:900px){
  .proofband{padding:64px 0 58px}
  .pb-head{margin-bottom:34px}
  .pb-row{grid-template-columns:1fr 1fr}
  .pb-item{padding:24px 22px 26px}
  .pb-item:nth-child(odd){padding-left:0}
  .pb-item:nth-child(even){padding-right:0;border-right:0}
  .pb-item:nth-child(n+3){border-top:1px solid var(--line)}
  .pb-who{grid-template-columns:auto 1fr;gap:18px 20px;margin-top:6px}
  .pb-cred{grid-column:1/-1;gap:30px;padding-top:2px}
}
@media(max-width:560px){
  .pb-row{grid-template-columns:1fr}
  .pb-item{padding:22px 0;border-right:0}
  .pb-item:not(:first-child){border-top:1px solid var(--line)}
  .pb-item b br{display:none}
  .pb-item b{margin-bottom:9px}
  .pb-who{grid-template-columns:1fr;gap:16px}
  .pb-cred{gap:26px}
}
@media(prefers-reduced-motion:reduce){
  .pb-item::before{transition:none}
}

/* ============ WHAT WE MEASURE - the breathing band (2026-09-02) ============
   The reference's academic-partner list, translated: hairline rule, one tiny
   label, then the list at display size in a LOW-CONTRAST tone, left aligned,
   right half of the page deliberately empty.
   ⚠️ THE EMPTINESS IS THE DESIGN. This page carried zero breathing blocks
   against the reference's six (about 800px of deliberate nothing), and that
   is a real part of why it read dense. Do not put anything in the right half. */
/* ⚠️ NOW A FULL-BLEED PHOTOGRAPH, not a flat sand ground (2026-09-02).
   The scrim below is the ONLY reason the type clears AA over it. Every value
   in it was set by sampling the actual composited pixels behind each line at
   1440 and 390, not by assuming an average - the photograph is bright warm
   glassware and an "average" reading would have been far too optimistic.
   ⚠️ If the photograph is ever swapped, RE-SAMPLE. A darker or busier frame
   changes the answer, and the failure mode is silent. */
.measure{position:relative;overflow:hidden;background:var(--sand);
  padding:104px 0 112px}
.measure>.secbg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:72% 50%;z-index:0}
/* left-to-right, opaque where the type sits and clearing by ~72% so the
   glassware still reads as a photograph rather than a tinted panel */
.measure-scrim{position:absolute;inset:0;z-index:1;
  /* ⚠️ These stops are SAMPLED, not chosen. The first attempt held .62 at 56%
     and the label's hairline rule ran out into a bright glassware highlight at
     RGB(214,213,215), measuring 1.40. The scrim now holds .84 across the whole
     type column and only falls away past 62%, where the photograph is meant to
     read. Re-sample if the picture is ever swapped. */
  background:linear-gradient(90deg,
    rgba(24,20,17,.92) 0%,
    rgba(24,20,17,.90) 40%,
    rgba(24,20,17,.84) 62%,
    rgba(24,20,17,.40) 82%,
    rgba(24,20,17,.10) 100%)}
.measure>.wrap{position:relative;z-index:2}
.measure-lbl{font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.92);padding-bottom:16px;
  /* the rule is capped to the type column so it cannot run out onto bare
     photograph, where a 28% white hairline is simply not there */
  border-bottom:1px solid rgba(255,255,255,.46);margin:0 0 40px;max-width:62%}
.measure-list{list-style:none;margin:0;padding:0;max-width:60%}
.measure-list li{font-family:var(--sans);font-weight:700;
  font-size:clamp(26px,4vw,50px);line-height:1.12;letter-spacing:-.03em;
  /* ⚠️ --taupe-2 #93847A was the obvious pick for a recessed list and it
     MEASURES 2.63 on this sand, against the 3.0 large text needs. It is the
     swatch already flagged in the token block as failing AA as type on every
     ground. --gray #6B5A4E measures 5.75 here, still a real step down from
     ink's 15.6, and it is the brand's own clay tone. Do not soften it back. */
  /* white on the scrim now, not clay on sand. Sampled worst case is recorded
     in the decisions log; do not soften this below full white without
     re-sampling the pixels underneath. */
  color:#fff;transition:color .3s ease}
/* the list lifts from near-white to full white under the pointer - one
   signal, the same restraint as the proof band's accent rule */
.measure-list li{color:rgba(255,255,255,.9)}
.measure-list li:hover{color:#fff}
@media(max-width:820px){
  .measure{padding:64px 0 68px}
  .measure-list{max-width:100%}
  .measure-list li{line-height:1.18}
  /* ⚠️ the list goes full width here, so a left-to-right scrim would leave the
     ends of the longest lines sitting on bare photograph. Vertical instead. */
  .measure-scrim{background:linear-gradient(180deg,
    rgba(24,20,17,.88) 0%, rgba(24,20,17,.90) 55%, rgba(24,20,17,.86) 100%)}
  .measure>.secbg{object-position:60% 50%}
}
@media(prefers-reduced-motion:reduce){.measure-list li{transition:none}}

/* ============ TRIPTYCH ON CLAY ============
   .sec-clay already inverts h1-h4, p and .lede. These are the pieces it does
   not know about: the caption block under each frame, and the footnote.
   ⚠️ Measured on #6B5A4E, where white itself is only 6.57 - there is very
   little headroom, so every alpha here is at .85 or above. Re-measure before
   softening any of them. */
.tri-block .tri-cap{border-top-color:rgba(255,255,255,.24)}
.tri-block .tri-cap b{color:#fff}
.tri-block .tri-cap span{color:rgba(255,255,255,.85)}
.tri-block .rq-note{color:rgba(255,255,255,.85)!important}
.tri-block .sintro .sright{color:rgba(255,255,255,.85)}
.tri-block .eyebrow{color:#E4D9CB}
/* the section is a committed field, so the air lives INSIDE it the way the
   reference's 580px cards hold twenty words */
.tri-block{padding:112px 0 108px}
@media(max-width:820px){.tri-block{padding:68px 0 64px}}
/* ---- Claim Studio: the flagship treatment ---- */
/* Flat-colour variants: keep all the component styling below, drop the
   photograph. A committed colour block outperforms a busy stock image. */
.sec-hero-photo.flat{background:var(--t-clay)}
.sec-hero-photo.flat>.secbg,.sec-hero-photo.flat>.secveil{display:none}
.sec-photo.flat>.secbg,.sec-photo.flat>.secveil{display:none}
.sec-photo.flat.on-sand{background:var(--sand)}
.sec-photo.flat.on-mist{background:var(--t-mist)}
.sec-hero-photo{position:relative;overflow:hidden;padding:var(--band) 0}
.sec-hero-photo>.secbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* light veil only where the type sits, so the image stays vivid elsewhere */
.sec-hero-photo>.secveil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,25,23,.72) 0%,rgba(28,25,23,.55) 42%,rgba(28,25,23,.68) 100%)}
.sec-hero-photo>.wrap{position:relative;z-index:2}
.sec-hero-photo h2,.sec-hero-photo .shead{color:#fff}
.sec-hero-photo .lede{color:rgba(255,255,255,.86)}
.sec-hero-photo .eyebrow{color:#D8C9B4}
/* controls become frosted glass on the vivid ground */
.sec-hero-photo .ctrl-label{color:rgba(255,255,255,.62)}
.sec-hero-photo .cat-chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sec-hero-photo .cat-chip:hover{border-color:#fff}
.sec-hero-photo .cat-chip.on{background:#fff;color:var(--ink);border-color:#fff}
.sec-hero-photo .lvl-btn{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.24);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sec-hero-photo .lvl-btn:hover{border-color:rgba(255,255,255,.62)}
.sec-hero-photo .lvl-btn.on{background:rgba(255,255,255,.94);border-color:#fff;color:var(--ink)}
.sec-hero-photo .lvl-btn.on .ln{color:var(--teal)}
.sec-hero-photo .lvl-btn .ln{color:#D8C9B4}
.sec-hero-photo .lvl-btn .ld{color:rgba(255,255,255,.6)}
.sec-hero-photo .lvl-btn.on .ld{color:var(--lab)}
/* the label card lifts off the vivid ground */
.sec-hero-photo .label-card{box-shadow:0 30px 80px rgba(0,0,0,.42)}
.sec-hero-photo .dbadge{border-color:rgba(255,255,255,.26);color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
.sec-hero-photo .dbadge.lit{border-color:#6FCF97;background:rgba(111,207,151,.2);color:#BDF0D2}
.sec-hero-photo .tier-warn{background:rgba(255,255,255,.1);color:rgba(255,255,255,.84);border-left-color:#E8B45F;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sec-hero-photo .tier-warn b{color:#fff}
.sec-hero-photo .studio-note{color:rgba(255,255,255,.5)}
.sec-hero-photo .btn{background:#fff;color:var(--ink)}
.sec-hero-photo .btn:hover{background:var(--sand)}
/* ---- outcome triptych: three tall images with floating data pills ---- */
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
/* portrait cells per Namrata 2026-08-05 ("make the images portrait or
   square") — 4/5 keeps three-across without going tower-tall */
/* ⚠️ .tri-pill (dark glass tags floating ON the photographs) was REMOVED
   2026-09-02. White type over an uncontrolled photo has no measurable
   contrast and a tag on an image is a stock AI-layout tell. The label is a
   caption under the frame now. Recover the pill CSS from history only if
   the labels ever go back over an image, which they should not. */
.tri{margin:0;display:flex;flex-direction:column}
.tri-shot{border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--sand-2)}
.tri img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tri:hover img{transform:scale(1.035)}
.tri-cap{padding:14px 2px 0;border-top:1px solid var(--line);margin-top:14px}
.tri-cap b{display:block;font-family:var(--mono);font-size:14px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.tri-cap span{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.05em;
  color:var(--gray);margin-top:5px}
@media(max-width:820px){.triptych{grid-template-columns:1fr;gap:20px}.tri-shot{aspect-ratio:1/1}}
@media(prefers-reduced-motion:reduce){.tri img{transition:none}.tri:hover img{transform:none}}
/* ---- Proof in Market: refined presentation ---- */
#pim .pim-tabs{gap:10px;margin-top:0}
#pim .sintro{margin-bottom:34px}
.pim-grid{gap:48px;align-items:start}
/* mockups get real presence */
.mock-browser{box-shadow:0 34px 90px rgba(93,85,77,.22),0 2px 6px rgba(93,85,77,.08)}
.mock-bar{background:#F4F2F0;border-bottom-color:#E8E3DF}
.mock-url{font-size:14px;color:#9A928A}
.pdp-img{border-radius:12px}
.pdp-title{font-size:20px}
.pdp-price{font-size:19px;color:var(--ink)}
/* claims read as evidence rows, not chips */
.pim-claim{border:1px solid var(--line);border-left-width:3px;border-radius:9px;padding:11px 14px;background:#fff;font-size:14px}
.pim-claim:hover{background:var(--sand);border-left-color:var(--teal)}
.pim-claim.on{background:var(--teal-soft);border-color:#E8E3DF;border-left-color:var(--teal);box-shadow:0 2px 12px rgba(107,90,78,.13)}
.pim-claim .pc-mark{color:var(--taupe-2);font-size:14px}
.pim-claim.on .pc-mark{color:var(--teal)}
/* evidence panel gains hierarchy */
.pim-panel{padding:32px 30px}
.pim-panel .pp-label{font-size:14px;letter-spacing:.1em}
.pim-panel .pp-test{font-size:23px;line-height:1.2;margin-bottom:6px}
.pim-rows{margin-top:18px}
.pim-row{padding:13px 0}
.pim-row b{font-size:14px;line-height:1.5}
.pim-panel .btn{padding:15px 24px;font-size:14.5px}
@media(max-width:900px){.pim-grid{gap:28px}}
/* ================= THE MOAT =================
   The argument is geometric, not written: a row of boxes that
   visibly do not touch, then one unbroken bar running under all
   four. You can read the point without reading the prose.
   =========================================== */
/* --- the continuous platform --- */
.span-bar{margin-top:56px;background:var(--t-sky);border-radius:20px;padding:30px 38px;
  display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center}
.span-mark{font-family:var(--sans);font-size:34px;font-weight:700;letter-spacing:-.03em;
  color:var(--t-deep);line-height:1}
.span-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
/* the unbroken line — the whole point of the section */
.span-track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:8px;height:2px;
  background:var(--t-deep);opacity:.4}
.span-node{position:relative;text-align:center;padding-top:30px}
.span-node::before{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--t-deep);
  box-shadow:0 0 0 4px var(--t-sky)}
.span-node b{display:block;font-family:var(--sans);font-size:16px;font-weight:600;
  color:var(--t-deep);letter-spacing:-.01em;margin-bottom:3px}
.span-node span{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:rgba(26,26,26,.62)}
.span-caption{margin-top:18px;font-size:15px;color:rgba(255,255,255,.62);max-width:640px}
/* --- what the customer gains --- */
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:60px}
.gain{border-top:2px solid var(--t-sky);padding-top:20px}
.gain h4{font-family:var(--sans);font-size:20px;letter-spacing:-.02em;line-height:1.15;
  color:#fff;margin-bottom:10px}
.gain p{font-size:14.5px;color:rgba(255,255,255,.62);line-height:1.55}
@media(max-width:900px){
  .gains{grid-template-columns:1fr;gap:26px}
  .span-bar{grid-template-columns:1fr;gap:24px;padding:26px}
  .span-track::before{left:12.5%;right:12.5%}
}
@media(max-width:620px){
  .span-track{grid-template-columns:1fr 1fr;gap:22px 0}
  .span-track::before{display:none}
}
/* ---- contact form: honeypot + visible delivery failure ---- */
/* off-screen rather than display:none — some bots skip hidden fields */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fsend-err{margin-top:18px;padding:16px 18px;border-radius:12px;
  background:#FDF3E7;border:1px solid #E8C99A;border-left:3px solid var(--accent)}
.fsend-err b{display:block;font-size:15.5px;margin-bottom:5px;color:var(--ink)}
.fsend-err p{font-size:14px;line-height:1.55;color:var(--lab)}
.fsend-err a{color:var(--teal-dk);border-bottom:1px solid currentColor}
.btn:disabled{opacity:.6;cursor:default}
.btn:disabled::after{opacity:.5}
/* ================= GOALS — sticky scroll accordion =================
   Borrowed mechanic (extra.email): the heading pins, list items expand
   one at a time as you scroll, and the visual swaps in step.

   Progressive enhancement: without .live (no JS, or reduced motion)
   every item is simply expanded and the section reads as a normal list.
   =================================================================== */
.goals{padding:0}
.gs-sticky{padding:104px 0}
.gs-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.gs-left h2{margin-bottom:34px;max-width:20ch}
/* The strategic spine line under the goals heading. See the guardrail
   comment in index.html before rewording it. :has() tightens the heading
   gap; where unsupported the two margins simply stack — looser, not broken. */
.gs-left h2:has(+ .gs-lede){margin-bottom:16px}
.gs-lede{font-size:15.5px;line-height:1.55;color:var(--lab);max-width:46ch;margin:0 0 34px}
.gs-list{list-style:none;display:grid;gap:2px}
.gs-item{border-left:2px solid rgba(26,26,26,.14);padding-left:22px}
.gs-head{display:flex;align-items:baseline;gap:14px;background:none;border:none;padding:14px 0;
  font-family:var(--sans);font-size:21px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);cursor:pointer;text-align:left;width:100%;transition:color .25s}
.gs-n{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--gray);flex:none}
.gs-body{padding-bottom:18px}
.gs-body h3{font-size:19px;line-height:1.25;letter-spacing:-.02em;margin-bottom:10px}
.gs-body p{font-size:15px;line-height:1.6;color:var(--lab);max-width:46ch}
.gs-body .tp-map{font-family:var(--mono);font-size:14px;color:var(--teal-dk);
  letter-spacing:.03em;margin-top:12px;line-height:1.7}
.gs-body .tp-map b{color:var(--t-deep);font-weight:500}
.gs-body .btn{margin-top:18px}
/* the stage pill */
.gs-pill{position:absolute;left:20px;bottom:20px;background:rgba(26,26,26,.7);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:9px 17px;
  color:#fff;font-family:var(--mono);font-size:14px;letter-spacing:.06em}
/* --- enhanced mode --- */
.goals.live .gs-track{position:relative}
.goals.live .gs-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center}
.goals.live .gs-item{border-left-color:rgba(26,26,26,.14);transition:border-color .35s}
.goals.live .gs-item.on{border-left-color:var(--t-deep)}
/* ⚠️ WAS rgba(26,24,22,.42), which measures 2.63:1 on this cream against the
   4.5 an interactive control needs. These are BUTTONS, and at .42 they did
   not read as "not the current one", they read as DISABLED - which is the
   "greyed out, boring" fault Namrata flagged on this section.
   .68 measures 5.77 and is still far lighter than the active row's 15.63, so
   the selected state is in no danger of being lost. Do not lower it again.
   ⚠️ MEASURING THIS: .gs-head carries `transition:color`, so getComputedStyle
   in a background tab returns the FROZEN pre-transition value (full ink) and
   the failure disappears. Kill the transition before reading the colour. */
.goals.live .gs-head{color:rgba(26,24,22,.68)}
.goals.live .gs-item.on .gs-head{color:var(--ink)}
.goals.live .gs-item:hover .gs-head{color:var(--ink)}
/* collapse: grid-template-rows animates cleanly from 0 to auto */
.goals.live .gs-body{display:grid;grid-template-rows:0fr;opacity:0;padding-bottom:0;
  transition:grid-template-rows .45s cubic-bezier(.2,.6,.2,1),opacity .3s,padding-bottom .45s}
/* a single grid child is essential: grid-template-rows:0fr only collapses
   the first row, so multiple children would each keep their auto height */
.goals.live .gs-inner{overflow:hidden;min-height:0}
.goals.live .gs-item.on .gs-body{grid-template-rows:1fr;opacity:1;padding-bottom:20px}

/* ============================================================
   GOALS STAGE — glassmorphic set, one bottle, four beats.
   The stage is no longer a solid slab: it is a smoked-glass panel
   over the section (backdrop blur + translucent gradient + 1px
   light edge), with the lighting rig kept from the dark set.
   The hero label carries YOUR BRAND and reprints the claim per
   stage; rivals are a physically different bottle (bottle-rival)
   tagged OTHER BRAND, so ours-vs-theirs needs no caption.
   Interactions: a glass HUD of four stage dots (click to jump —
   same path as clicking a goal heading), and a pointer-driven
   tilt on the bottle, both disabled under reduced motion.
   ============================================================ */
/* Relit 2026-08-05 — Namrata: the section read "bland and non
   impressive" after the hero upgrade. Same structure, the lights turned
   on: warm amber key light + umber ground instead of the near-black
   void, softer vignette, bottle scaled up at stage 0 so the label
   reads, rivals lifted out of the murk. A/B verified before shipping. */
.gs-stage{--ground:22%;position:relative;aspect-ratio:4/5;max-height:560px;
  border-radius:22px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 80% at 30% 12%,rgba(255,214,170,.22) 0%,rgba(0,0,0,0) 55%),
    radial-gradient(140% 100% at 70% 90%,rgba(120,80,50,.35) 0%,rgba(0,0,0,0) 60%),
    linear-gradient(168deg,#3A3129 0%,#2A231D 55%,#1C1712 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 60px rgba(20,17,15,.30)}
/* vignette above the set, below the content */
.gs-stage::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(115% 95% at 50% 42%,rgba(0,0,0,0) 60%,rgba(0,0,0,.26) 100%)}

/* floor + key light */
.gs-floor{position:absolute;left:0;right:0;bottom:0;height:var(--ground);z-index:1;
  background:linear-gradient(180deg,rgba(255,236,210,.10) 0%,rgba(255,236,210,.03) 42%,rgba(0,0,0,.22) 100%);
  border-top:1px solid rgba(255,255,255,.10)}
.gs-spot{position:absolute;left:50%;bottom:var(--ground);width:74%;height:34%;z-index:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,222,180,.38) 0%,rgba(255,222,180,0) 70%);
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gs-stage[data-stage="0"] .gs-spot{transform:translate(-50%,34%) scale(1)}
.gs-stage[data-stage="1"] .gs-spot{transform:translate(-50%,34%) scale(1.12)}
.gs-stage[data-stage="2"] .gs-spot{transform:translate(-50%,34%) scale(1.28)}
.gs-stage[data-stage="3"] .gs-spot{transform:translate(-50%,34%) scale(.92)}

/* scenes */
.gs-stage .sc{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .45s ease}
.gs-stage[data-stage="0"] .sc-shelf,
.gs-stage[data-stage="3"] .sc-beat{opacity:1}
.bot{position:absolute;bottom:var(--ground);width:auto;user-select:none;pointer-events:none}

/* 01 · among ordinary products, out of focus */
.sc-shelf .nb{height:33%;opacity:.55;filter:blur(2px) grayscale(.3) brightness(1.25)}
.sc-shelf .n-l{left:7%}
.sc-shelf .n-r{right:7%}
/* 04 · the category recedes; each rival carries its own tag */
.rv-wrap{position:absolute;bottom:var(--ground);width:auto;display:flex;
  flex-direction:column;align-items:center;pointer-events:none}
.rv-wrap img{height:100%;width:auto;filter:grayscale(1) brightness(.85) contrast(.92);opacity:.85}
.rv-wrap{height:30%}
.sc-beat .w1{left:4%}
.sc-beat .w2{left:20%;height:27%;opacity:.75}
.sc-beat .w3{right:20%;height:27%;opacity:.75}
.sc-beat .w4{right:4%}
/* ⚠️ WAS 7.5px at .38 white, which models at 2.87-3.57 against every plausible
   darkness of the stage behind it - a fail at 4.5 in all of them.
   ⚠️ AND IT HIDES FROM A NORMAL AUDIT: the stage's ground is painted by a
   SIBLING gradient (.gs-spot / .gs-floor), so an ancestor walk returns
   transparent, resolves to white, and reports a nonsense 1.04. Model it against
   the sibling, or you will either miss this or "fix" the wrong thing. */
.rv-tag{position:absolute;bottom:-22px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap}

/* the hero, with pointer tilt applied to an inner layer so the scroll
   transform and the tilt never fight over one transform property */
.hero-wrap{position:absolute;left:0;right:0;bottom:var(--ground);height:62%;z-index:4;
  pointer-events:none;transform-origin:50% 100%;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hero-tilt{height:100%;transform-origin:50% 100%;
  transform:rotate(var(--tilt,0deg));transition:transform .35s ease-out}
.hero-in{position:relative;height:100%;width:-moz-fit-content;width:fit-content;margin:0 auto}
.gs-hero{height:100%;width:auto;display:block}
.gs-stage[data-stage="0"] .hero-wrap{transform:scale(.92)}
.gs-stage[data-stage="1"] .hero-wrap{transform:translateY(-2%) scale(1)}
.gs-stage[data-stage="2"] .hero-wrap{transform:translateY(-2%) scale(1.05)}
.gs-stage[data-stage="3"] .hero-wrap{transform:translateY(-8%) scale(.9)}

/* reflection */
.gs-reflect{position:absolute;left:50%;top:100%;height:100%;width:auto;
  transform:translateX(-50%) scaleY(-1);opacity:.5;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.95) 0%,rgba(0,0,0,0) 38%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95) 0%,rgba(0,0,0,0) 38%)}

/* THE LABEL — masthead + claim, printed inside the measured label rect */
.gs-label{position:absolute;left:25%;right:25%;top:40%;bottom:18%;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;overflow:hidden}
.gs-label::after{content:"";position:absolute;inset:-14% -34%;pointer-events:none;
  background:linear-gradient(90deg,rgba(46,34,20,.20) 0%,rgba(46,34,20,0) 24%,
             rgba(46,34,20,0) 74%,rgba(46,34,20,.26) 100%)}
.lb-brand{font-family:var(--mono);font-size:clamp(6px,.62vw,8px);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(58,44,28,.9);margin-bottom:7px}
.lb-brand::after{content:"";display:block;width:14px;height:1px;margin:5px auto 0;
  background:rgba(70,54,34,.4)}
.lb-main{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;line-height:1.18;
  font-size:clamp(10.5px,1.22vw,15.5px);color:#2B2219;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.6,.2,1)}
.lb-rule{display:block;width:26px;height:1px;background:rgba(70,54,34,.42);margin:7px 0;
  transition:opacity .3s}
.lb-sub{font-family:var(--mono);font-size:clamp(6px,.66vw,8.5px);letter-spacing:.09em;
  text-transform:uppercase;color:rgba(66,50,32,.85);line-height:1.45;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.6,.2,1)}
.gs-label.swap .lb-main,.gs-label.swap .lb-sub{opacity:0;transform:translateY(-4px)}
.gs-label.swap .lb-rule{opacity:0}

/* glass HUD — stage dots, clickable, synced to scroll */
.gs-hud{position:absolute;top:14px;left:14px;right:14px;z-index:7;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.gs-dots{display:flex;gap:6px;align-items:center;padding:0 9px;border-radius:100px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* ⚠️ TAP TARGET FIX 2026-08-14. These measured 22×5px on a phone — not
   tappable. Vertical padding grows the control to a 45px band while the
   visible bar keeps its 5px thickness.
   ⚠️⚠️ THE TRAP THAT COST TWO ATTEMPTS: `background-clip:content-box` is
   RESET BY THE `background:` SHORTHAND. Written in that order the clip is
   silently discarded and the dot paints as a fat 45px bar. Both rules here
   therefore use `background-color`, never the shorthand. If you ever add a
   `background:` shorthand to .gs-dot or .gs-dot.on, re-declare
   background-clip after it or this breaks again — visibly.
   ⚠️ Also: do not trust elementFromPoint on this control without scrolling
   it into view first. The HUD sits ~2700px down; probing it offscreen
   returns null and reads as a failed fix when nothing is wrong. */
.gs-dot{width:22px;height:5px;border-radius:100px;border:0;cursor:pointer;
  padding:20px 0;box-sizing:content-box;
  background-color:rgba(255,255,255,.22);background-clip:content-box;
  transition:background-color .3s,width .3s}

.gs-dot.on{background-color:#fff;background-clip:content-box;width:34px}
.gs-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gs-count{font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  color:rgba(255,255,255,.66);padding:7px 12px;border-radius:100px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gs-count b{color:#fff;font-weight:500}

/* caption pill, glass */
.gs-stage .gs-pill{position:absolute;left:14px;bottom:14px;z-index:7;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:rgba(255,255,255,.92)}
/* --- static fallback: every item open, visuals stacked as a grid --- */
.goals:not(.live) .gs-grid{grid-template-columns:1fr;gap:40px}
/* no-JS / reduced-motion: the stage must STAY positioned — every child
   is absolute, so position:static re-anchors them to the page and the
   whole visual explodes. It simply holds still at stage 0 instead. */
.goals:not(.live) .gs-stage{width:100%;max-width:440px;margin:0 auto}
.goals:not(.live) .gs-head{cursor:default}
@media(max-width:1000px){
  .goals.live .gs-sticky{position:static;min-height:0;padding:72px 0}
  .goals.live .gs-track{height:auto!important}
  .gs-grid{grid-template-columns:1fr;gap:36px}
  .goals.live .gs-body{grid-template-rows:1fr;opacity:1;padding-bottom:20px}
  .goals.live .gs-head{color:var(--ink)}
  .goals.live .gs-item{border-left-color:var(--t-deep)}
  /* auto margins on a grid item cancel the stretch, and every child here
     is absolutely positioned — so without an explicit width the stage
     collapses to 0 and the aspect-ratio makes it 0 tall too */
  .gs-stage{width:100%;max-width:400px;max-height:none;margin:0 auto}
  .goals.live .gs-stage{position:relative;aspect-ratio:4/5;max-height:420px}
}
@media(prefers-reduced-motion:reduce){
  .goals.live .gs-body{transition:none}
  .gs-stage .sc,.hero-wrap,.gs-shadow{transition:none}
}
/* ---- word-swap headline ----
   The boxed word cycles through product types and drives the studio
   below it, until the visitor touches the tool — then it locks. */
.wswap{display:inline-block;border:2px solid rgba(255,255,255,.42);border-radius:100px;
  padding:2px 24px 6px;overflow:hidden;vertical-align:baseline;
  transition:border-color .3s;min-width:6ch}
.wswap .ws-word{display:inline-block;transition:opacity .28s,transform .28s cubic-bezier(.2,.6,.2,1)}
.wswap.out .ws-word{opacity:0;transform:translateY(-46%)}
.wswap.in .ws-word{opacity:0;transform:translateY(46%)}
@media(prefers-reduced-motion:reduce){
  .wswap .ws-word{transition:none}
  .wswap.out .ws-word,.wswap.in .ws-word{opacity:1;transform:none}
}

/* ================= CONTACT: the pages around the form =================
   The form was the whole page. These blocks answer what a prospect is
   actually thinking at the moment they consider sending it.
   ====================================================================== */
.sec-paper{background:var(--paper)}

/* --- what happens next --- */
.steprail{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px;
  border-top:1px solid var(--line)}
.steprail li{padding:26px 30px 30px 0;position:relative}
.steprail li::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;
  background:var(--t-deep);transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.steprail li.lit::before{transform:scaleX(1)}
.stepn{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  color:var(--teal);margin-bottom:12px}
.steprail b{display:block;font-family:var(--sans);font-size:17.5px;font-weight:600;
  letter-spacing:-.02em;line-height:1.25;margin-bottom:9px}
.steprail p{font-size:14px;line-height:1.6;color:var(--lab)}

/* --- what shapes the quote --- */
.factors{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:48px;
  background:rgba(26,26,26,.12);border:1px solid rgba(26,26,26,.12);border-radius:16px;overflow:hidden}
.factor{background:var(--t-mist);padding:26px 24px}
.factor b{display:block;font-family:var(--sans);font-size:16.5px;font-weight:600;
  letter-spacing:-.015em;margin-bottom:7px}
.factor p{font-size:14px;line-height:1.55;color:#5D554D}

/* --- FAQ --- */
.faq{margin-top:44px;border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--teal-dk)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq details p{padding:0 40px 24px 0;font-size:15.5px;line-height:1.65;color:var(--lab);max-width:70ch}

@media(max-width:1000px){
  .steprail{grid-template-columns:1fr 1fr}
  .factors{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .steprail{grid-template-columns:1fr}
  .steprail li{padding-right:0}
  .factors{grid-template-columns:1fr}
  .faq summary{font-size:16.5px}
}
@media(prefers-reduced-motion:reduce){
  .steprail li::before{transform:scaleX(1);transition:none}
  .faq summary::after{transition:none}
}

/* ================= RESOURCES =================
   A filterable library. Method notes describe curí's own practice;
   study architectures are the validated protocols from the strategy.
   ============================================= */
.reslead{display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:38px}
.resfilter{display:inline-flex;gap:4px;background:var(--sand);border-radius:100px;padding:4px}
.rfbtn{border:none;background:none;font-family:var(--body);font-size:14.5px;font-weight:500;
  color:var(--lab);padding:10px 20px;border-radius:100px;cursor:pointer;transition:.2s}
.rfbtn:hover{color:var(--ink)}
.rfbtn.on{background:var(--t-deep);color:#fff}
.rescount{font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray)}

.resgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rescard{border:1px solid var(--line);border-radius:16px;padding:26px 24px 24px;
  background:#fff;display:flex;flex-direction:column;transition:.28s cubic-bezier(.2,.6,.2,1)}
.rescard:hover{border-color:rgba(26,26,26,.3);transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(26,26,26,.10)}
.rescard.hide{display:none}
.restop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.restag{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-dk);background:var(--teal-soft);border-radius:100px;padding:5px 11px}
.restag.alt{color:#6B4A12;background:#F7E9CE}
.resmin{font-family:var(--mono);font-size:14px;color:var(--gray);letter-spacing:.05em}
.rescard h3,.rescard h2.h3{font-family:var(--sans);font-size:19px;line-height:1.25;letter-spacing:-.02em;
  margin-bottom:11px}
.rescard>p{font-size:14.5px;line-height:1.6;color:var(--lab)}
.resfoot{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:14px;
  letter-spacing:.06em;color:var(--teal);text-transform:uppercase}

/* study-architecture cards carry a spec block instead of a footer line */
.rescard.arch{background:var(--sand);border-color:var(--sand-3)}
.resmeta{list-style:none;margin:18px 0 20px;border-top:1px solid var(--line)}
.resmeta li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px dashed var(--line);font-size:14px}
.resmeta span{color:var(--gray)}
.resmeta b{font-weight:600;color:var(--ink);text-align:right}
.rescard.arch .tlink{margin-top:auto;align-self:flex-start;font-size:14.5px}

.resnote{margin-top:34px;font-size:14px;color:var(--gray);max-width:70ch;line-height:1.6}

@media(max-width:1000px){.resgrid{grid-template-columns:1fr 1fr}}
@media(max-width:660px){
  .resgrid{grid-template-columns:1fr}
  .reslead{flex-direction:column;align-items:flex-start}
  .resfilter{width:100%;overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){.rescard{transition:none}.rescard:hover{transform:none}}

/* ---- resource cards that are links ---- */
.rescard-link{text-decoration:none;color:inherit}
.rescard-link h3,.rescard-link h2.h3{transition:color .2s}
.rescard-link:hover h3,.rescard-link:hover h2.h3{color:var(--teal-dk)}
.resmore{margin-top:auto;padding-top:16px;font-size:14px;font-weight:500;color:var(--teal-dk)}
.rescard-link .resfoot{padding-top:16px}

/* ================= ARTICLE (method note) ================= */
.artpad{padding-bottom:72px}
.backlink{display:inline-block;font-size:14px;color:var(--lab);margin-bottom:26px;
  border-bottom:1px solid transparent;transition:.2s}
.backlink:hover{color:var(--ink);border-bottom-color:currentColor}
.artmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px;
  font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.phero h1{max-width:20ch}
.artpad h1{font-size:clamp(32px,4.2vw,54px);max-width:22ch}

.prose{max-width:68ch}
.prose p{font-size:17.5px;line-height:1.72;color:var(--ink-2);margin-bottom:22px}
.prose p b{color:var(--ink);font-weight:600}
.prose h2{font-family:var(--sans);font-size:clamp(23px,2.4vw,29px);letter-spacing:-.025em;
  line-height:1.2;margin:46px 0 16px;color:var(--ink)}
.prose i{font-style:italic}
.artnote{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-size:14px!important;line-height:1.6!important;color:var(--gray)!important}

.artcta{margin-top:64px;background:var(--t-deep);border-radius:20px;padding:38px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.artcta h3{color:#fff;font-size:24px;letter-spacing:-.025em;margin-bottom:8px}
.artcta p{color:rgba(255,255,255,.7);font-size:15.5px;line-height:1.6;max-width:52ch}
.artcta .btn{background:#fff;color:var(--ink);flex:none}
.artcta .btn:hover{background:var(--sand)}

@media(max-width:700px){
  .prose p{font-size:16.5px}
  .artcta{padding:28px 24px}
}

/* ============================================================
   DARK-GROUND OPTION — html[data-dark="taupe"]
   Namrata is still choosing between ink and warm taupe for the two
   large dark surface (the closing CTA; the moat block it also covered
   was cut 2026-08-04). Ink is
   the default. To see taupe, put data-dark="taupe" on <html>.
   Both clear AA: moat 17.4 ink / 7.3 taupe, CTA 10.1 / 6.1.
   ⚠️ The taupe CTA veil is lighter, so MORE of the blue-glove photo
   shows through. Ink suppresses that image's teal noticeably better.
   ============================================================ */
html[data-dark="taupe"] .sec-teal{background:#5D554D}
html[data-dark="taupe"] .secshot.ss-dark{background:#5D554D}
html[data-dark="taupe"] .secshot.ss-dark .ss-veil{background:
  linear-gradient(180deg,rgba(74,67,60,.38) 0%,rgba(74,67,60,.24) 50%,rgba(74,67,60,.44) 100%)}
html[data-dark="taupe"] .secshot.ss-dark .ss-body{background:rgba(74,67,60,.66)}
@media(max-width:1000px){
  html[data-dark="taupe"] .secshot.ss-dark .ss-veil{background:rgba(74,67,60,.42)}
}

/* pricing's photo is bright behind the panel (darkest rgb(166,170,167)),
   so it can be far more transparent than the others. */
#rr .ch-head{background:rgba(255,255,255,.20)}

/* ⚠️ The CTA card was centred and sat straight on top of the product —
   the subject of the photograph was hidden behind the copy, which makes
   the image pointless. Card moves left and narrows; the image is nudged
   so the stick-packs sit clear of it on the right.
   RULE: when copy sits on a photograph, check what it is covering. */
.secshot.ss-dark .ss-body{max-width:520px}
/* the gummies sit centre-right; the card is on the left, so this keeps the
   product clear of the copy. */
.secshot.ss-dark .ss-bg{object-position:62% center}
@media(max-width:820px){
  .secshot.ss-dark .ss-body{max-width:none}
  .secshot.ss-dark .ss-bg{object-position:62% center}
}

/* pricing's intro reuses the panel; its lede must be ink like the rest */
#rr .ch-head .lede{color:var(--ink)}

/* ⚠️ CLAIM STUDIO INTRO — white type, NO panel, on deliberately dark images.
   Namrata asked twice for white with no box. Measured why that could not
   work on the bright frames: with the copy hidden, pure ground behind it
   ran rgb(97,75,54) to rgb(242,230,219) across the four products, so INK
   scored 2.13 and WHITE 1.23 — neither passes on a range that wide.
   The only way to get white with no surface is to make the images dark,
   so they are graded to 45% exposure (+8% contrast). At that exposure
   white clears AA on all four. The products still read as the brightest
   thing in frame, which is the point.
   ⚠️ If these images are ever re-exported at full brightness, white
   BREAKS. Exposure and text colour move together here. */
.results.sec-photo .ch-head{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:0;box-shadow:none;padding:0;max-width:760px;margin-bottom:34px}
.results.sec-photo .ch-head .eyebrow,
.results.sec-photo .ch-head h2,
.results.sec-photo .ch-head .lede{color:#fff}
.results.sec-photo .ch-head .eyebrow.dot::before{background:#fff}
.results.sec-photo .ws-word{border-color:rgba(255,255,255,.55)}
.results.sec-photo .ch-head .lede{margin-bottom:0}

/* ============================================================
   DATA PILL ON A PHOTOGRAPH — generalised from the homepage triptych.
   This is the reference's single strongest device: five of their ten
   images carry one. curí had the component and used it in exactly one
   place. .split-img and .mosaic figures can now carry it too.
   ⚠️ COMPLIANCE: curí's pills state METHOD AND ACCREDITATION FACTS
   ("ISO/IEC 17025:2017", "IRB-reviewed protocol"), not outcome
   numbers. The reference can post result metrics because they have
   published studies behind them; we do not, and an invented metric on
   a photograph would be a claim. Keep pills factual.
   ============================================================ */
.split-img{position:relative}

/* ============================================================
   HERO COMMITMENT — four of six heroes were the same pale sand, so the
   pages did not announce themselves. Home = photo · Platform = ink ·
   Programs = .ph-stage · Resources = .ph-clay · About = sand ·
   Contact = mist. Six pages, six openings.

   ⚠️ .ph-shot (type over a full-bleed photograph) was TRIED HERE AND
   REJECTED — "looks terrible". Correctly: the reference does NOT put its
   hero type over a picture. Its B2B hero is a committed flat colour with
   everything CENTRED, then a 3-up photo row sitting ON THE SAME GROUND,
   then a hard cut. Type on a busy flat-lay was the opposite of that.
   .ph-stage is that chronology. Do not re-propose a photo-behind-type
   hero for this page.
   ============================================================ */
.phero.ph-stage{background:var(--t-sky);border-bottom:none;text-align:center;
  padding-top:calc(var(--band) + 4px);padding-bottom:0;overflow:hidden}
.phero.ph-stage::after{background:radial-gradient(circle,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 70%)}
.phero.ph-stage>.wrap{position:relative;z-index:2}
.phero.ph-stage .eyebrow{justify-content:center;display:inline-flex;color:var(--gray)}
/* each sentence must hold its own line — the <br> does the breaking, so the
   measure has to be wide enough not to wrap inside a sentence */
.phero.ph-stage h1{max-width:30ch;margin:0 auto;font-size:clamp(38px,4.4vw,62px)}
.phero.ph-stage h1 em{color:var(--teal-dk)}
/* the sub-headline is the second beat: bigger than the lede, quieter than h1 */
.ph-sub{font-size:21px;line-height:1.45;color:var(--ink);max-width:60ch;margin:22px auto 0;font-weight:500}
.phero.ph-stage .lede{max-width:52ch;margin:14px auto 0;font-size:16.5px;color:var(--gray)}
.ph-act{display:flex;justify-content:center;align-items:center;gap:26px;flex-wrap:wrap;margin-top:32px}
.ph-act .lnk{font-size:15px}
/* the 3-up row sits ON the hero colour and the colour runs past it before
   the hard cut to the next section — the reference lets a hero block
   swallow the proof row rather than ending at the copy. */
.ph-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:54px;padding-bottom:calc(var(--band) - 10px)}
/* portrait frames — Namrata's pick. Taller cells read more editorial and
   suit her library, which is mostly shot portrait. */
.ph-cell{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--sand-2);
  box-shadow:0 14px 40px rgba(60,52,45,.14)}
.ph-cell img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ph-cell:hover img{transform:scale(1.035)}
@media(max-width:860px){
  .phero.ph-stage h1{max-width:none}
  .ph-row{grid-template-columns:1fr;gap:12px}
  .ph-cell{aspect-ratio:4/3}
}

.phero.ph-clay{background:#5D554D;border-bottom:none;color:#fff}
.phero.ph-clay h1{color:#fff}
.phero.ph-clay h1 em{color:#D8C9B4;font-style:normal}
.phero.ph-clay .lede{color:rgba(255,255,255,.80)}
.phero.ph-clay .eyebrow{color:#D8C9B4}
.phero.ph-clay .eyebrow.dot::before{background:#D8C9B4}
.phero.ph-clay::after{background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 68%)}

/* ============================================================
   PHOTO CARD WITH COPY OVERLAID — the reference sets copy ON the image,
   not in a caption beneath it. Used on the Resources page, which had
   ZERO images: nine text cards on white was the flattest page on the
   site, and it is the page meant to demonstrate expertise.
   ⚠️ Ink glass at .70 over the BRIGHTEST point of that photograph keeps
   white type at AA; the picture still reads through as colour.
   ============================================================ */
.duo-deep.has-shot{position:relative;overflow:hidden;isolation:isolate}
.duo-deep.has-shot .duo-bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 58%;z-index:-2}
.duo-deep.has-shot::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,rgba(26,26,26,.86) 0%,rgba(26,26,26,.74) 46%,rgba(26,26,26,.62) 100%);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

/* ============================================================
   SEVEN WAYS — was seven identical flat white cards, the least
   designed block on the site. Now the reference's COLOUR-COORDINATED
   CARD PAIR (a deep card beside a photo card) carrying the two
   trademarked flagships, with the other five as a hairline list.
   ⚠️ Deliberately NOT seven photo cards: that needs seven loosely
   related lab photos, and decorative imagery has been rejected here
   twice. One image that genuinely argues (two scientists reviewing
   results = what Claims360 IS) beats seven that do not.
   ============================================================ */
.fpair{display:grid;grid-template-columns:1fr 1.25fr;gap:20px;margin-top:44px;align-items:stretch}
.fchip{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;font-size:14px;margin-bottom:16px}
.fnum{font-family:var(--mono);font-size:14px;letter-spacing:.1em}

.fpair-ink{background:var(--ink);color:#fff;border-radius:var(--radius);padding:34px 32px;
  display:flex;flex-direction:column}
.fpair-ink .fchip{background:rgba(255,255,255,.14);color:#D8C9B4}
.fpair-ink .fnum{color:#D8C9B4;margin-bottom:10px}
.fpair-ink h3{color:#fff;font-size:22px;margin-bottom:10px}
.fpair-ink p{color:rgba(255,255,255,.80);font-size:14.5px;line-height:1.6}

/* photo card — copy overlaid on the image, the reference's other device */
.fpair-shot{position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;
  display:flex;align-items:flex-end;isolation:isolate}
.fpair-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.fpair-shot::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(26,26,26,.28) 0%,rgba(26,26,26,.62) 46%,rgba(26,26,26,.86) 100%)}
.fpair-body{padding:32px 30px 30px;color:#fff}
.fpair-shot .fchip{background:rgba(255,255,255,.18);color:#fff}
.fpair-shot .fnum{color:rgba(255,255,255,.72);margin-bottom:10px}
.fpair-shot h3{color:#fff;font-size:22px;margin-bottom:10px}
.fpair-shot p{color:rgba(255,255,255,.88);font-size:14.5px;line-height:1.6;max-width:46ch}

/* the remaining five as a designed list, not more boxes */
.flist{list-style:none;margin:4px 0 0;padding:0} /* group label above supplies the rule */
.flist li{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start;
  padding:22px 0;border-bottom:1px solid rgba(26,26,26,.10)}
.flist .fl-n{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--gray);padding-top:3px}
.flist h4{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:5px}
.flist p{font-size:14.5px;line-height:1.6;color:var(--lab);max-width:74ch}
@media(max-width:900px){
  .fpair{grid-template-columns:1fr}
  .fpair-shot{min-height:260px}
  .flist li{grid-template-columns:48px 1fr;gap:12px}
}

/* ============================================================
   THE CHALLENGE ANSWER — the trust moment. The Programs readiness
   checker asks 'if a retailer challenged your primary claim tomorrow,
   could you produce a substantiation file?' and the site raised that
   fear without ever answering it. This is the answer, and it sits in
   the section already about the artifact ('Proof you can hand over')
   rather than as a tenth homepage section.
   ============================================================ */
.proof-ans{margin-top:44px;background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:38px 40px;display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:start}
.proof-ans h3{color:#fff;font-size:26px;letter-spacing:-.02em;line-height:1.15;margin:0}
.proof-ans p{color:rgba(255,255,255,.84);font-size:15.5px;line-height:1.65;margin:0;max-width:62ch}
.proof-ans em{font-style:normal;color:#D8C9B4;font-weight:500}
@media(max-width:820px){
  .proof-ans{grid-template-columns:1fr;gap:16px;padding:28px 24px}
  .proof-ans h3{font-size:22px}
}

/* ============ MOBILE NAV (burger injected by app.js) ============
   Below 900px .nav-links was display:none with NO menu — the site had no
   navigation on phones (footer was the only escape hatch). The burger and
   panel are injected by app.js so all 12 pages get them with no markup
   edits; without JS the old state returns, and the footer still works. */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:11px;background:none;border:1px solid var(--line);
  border-radius:9px;cursor:pointer}
.nav-burger i{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
nav.open .nav-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.open .nav-burger i:nth-child(2){opacity:0}
nav.open .nav-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .nav-burger{display:flex}
  nav.open .nav-links{display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(60,52,45,.12);
    padding:8px 24px 14px}
  nav.open .nav-links a{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
  nav.open .nav-links a:last-child{border-bottom:none}
}
@media(prefers-reduced-motion:reduce){.nav-burger i{transition:none}}

/* ============ EMAIL CAPTURE (injected by app.js) ============
   Namrata 2026-08-05: "make it a pop up form." Shows ONCE per visitor
   (localStorage), after 55% scroll or 45s, never on the contact page or
   on the checklist itself. The promise is honoured client-side: submit
   always reveals the checklist link, whether or not /api/contact has its
   env vars set yet. */
.cap-back{position:fixed;inset:0;background:rgba(26,26,26,.44);z-index:90;
  display:flex;align-items:center;justify-content:center;padding:22px;
  opacity:0;transition:opacity .25s}
.cap-back.in{opacity:1}
.cap{background:var(--paper);border-radius:var(--radius);max-width:480px;width:100%;
  padding:34px 32px 30px;position:relative;box-shadow:0 30px 80px rgba(26,26,26,.28);
  transform:translateY(14px);transition:transform .25s}
.cap-back.in .cap{transform:none}
.cap-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;
  background:none;font-size:19px;line-height:1;color:var(--lab);cursor:pointer;border-radius:8px}
.cap-x:hover{color:var(--ink);background:var(--sand-2)}
.cap .eyebrow{margin-bottom:10px}
.cap h3{font-size:22px;letter-spacing:-.02em;margin-bottom:8px}
.cap p{font-size:14.5px;line-height:1.55;color:var(--lab)}
.cap-row{display:flex;gap:10px;margin-top:18px}
.cap-row input{flex:1;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font:inherit;font-size:14.5px;min-width:0}
.cap-row input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.cap-fine{font-size:14px;color:var(--gray);margin-top:12px}
.cap-done{display:none}
.cap.done .cap-live{display:none}
.cap.done .cap-done{display:block}
.cap-done a{color:var(--ink);font-weight:600}
@media(max-width:600px){.cap-row{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.cap-back,.cap{transition:none}}

/* ============ HERO FULL-BLEED + GLASS (Namrata, 2026-08-05) ============
   Her spec: the photo owns the entire hero space with NO white cast; the
   copy and buttons sit on glass; the nav is stationary with no background
   at the top and becomes the existing frosted pill on scroll (that state
   was already built — only the TOP state changes here).
   ⚠️ The white wash (.hs-veil) is dead — display:none, kept in the DOM.
   ⚠️ The hero pulls up under the sticky nav by --navh so the image runs
   behind the transparent bar; padding-top gives that space back. If nav
   height changes, retune --navh (measured 74px desktop / 66px mobile). */
:root{--navh:74px}
nav{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* dark-glass nav button ONLY where a photo sits behind the nav — the
   homepage hero (nav's next sibling is .heroshot there). Over the white
   interior pages the glass version reads as washed grey, so they keep
   the solid button. :has() unsupported → solid everywhere, fine. */
nav:not(.scrolled):has(+ .heroshot) .btn{background:rgba(26,26,26,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
nav:not(.scrolled):has(+ .heroshot) .btn:hover{background:var(--ink)}
.heroshot{margin-top:calc(var(--navh) * -1);padding-top:var(--navh)}
/* ⚠️⚠️ NO WASH ON DESKTOP, 2026-09-02. Namrata: "i don't like the white cast",
   then chose to move the copy rather than keep any wash at all.
   The picture was mapped at 30px resolution across six frames of the loop. It
   is a WEDGE: safe ground is wide at the top and narrows going down -
       y60-240  450px      y300  390      y420  300      y540+  270
   and the copy was vertically CENTRED, which put it exactly where the wedge is
   tightest. Moving it up and narrowing it means ink clears on the raw picture
   with no veil at all.
   ⚠️ THE THREE THINGS THAT MAKE THIS WORK - do not undo them individually:
     1. .hs-copy is 440px, not 620, and TOP aligned, not centred.
     2. The h1 is 62px so it wraps to two lines inside 440. It must stay ABOVE
        60px or it becomes smaller than .shead-xl further down the page, which
        is the inverted hierarchy already fixed once in the lifecycle.
     3. The lede is Namrata's sentence only. The 13 words that followed pushed
        the block down into the 270px part of the wedge.
   ⚠️ The CTAs and claim chips are exempt - they carry their own backgrounds and
   can sit anywhere on the picture. Only eyebrow, h1 and lede need safe ground.
   ⚠️ MOBILE STILL HAS ITS WASH: different image, and the copy runs the full
   width there, so the wedge argument does not apply. See the max-width:1000px
   block below. */
.heroshot .hs-veil{display:none}
/* ⚠️ The mobile override lives ~2700 lines EARLIER in this file, so the rule
   above was silently beating it and phones were getting the horizontal veil
   while the copy runs full width - the right end of every line sat on
   unprotected picture. Re-declared here, after it. */
@media(max-width:1000px){
  .heroshot .hs-veil{background:linear-gradient(180deg,
    rgba(255,253,250,.90) 0%, rgba(255,253,250,.86) 54%, rgba(255,253,250,.78) 100%)}
}
/* NO panel behind the copy (Namrata, round 2: "don't need glass
   background behind the heading"). The type sits straight on the photo:
   full ink + a soft white halo carries readability instead of a wash. */
.hs-copy{max-width:440px}
.heroshot h1,.heroshot .lede,.heroshot .eyebrow{text-shadow:0 1px 14px rgba(255,255,255,.6),0 0 2px rgba(255,255,255,.4)}
.heroshot .lede{color:var(--ink)}
/* hero becomes a column so the credband can sit flush at its bottom,
   ON the photo (round 2: "cover the bottom part too where
   certifications come"). The band itself turns to glass. */
.heroshot{flex-direction:column;justify-content:center;padding-bottom:0}
/* top-aligned so the copy sits in the WIDE part of the wedge, not the narrow */
.heroshot>.wrap{flex:1;display:flex;align-items:flex-start;padding-top:92px}
@media(max-width:900px){.heroshot>.wrap{align-items:center;padding-top:0}}
.heroshot .hs-grid{width:100%}
.heroshot .credband{margin-top:auto;width:100%;position:relative;z-index:2;
  background:rgba(255,255,255,.32);backdrop-filter:blur(14px) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(14px) saturate(var(--glass-sat));
  border-top:1px solid var(--glass-edge)}
.heroshot .credband p{color:var(--ink-2)}
.heroshot .credrow span{color:var(--ink);opacity:1}
.heroshot .credrow span small{color:var(--ink-2)}
/* buttons: dark glass primary keeps hierarchy; secondary becomes a light
   glass pill instead of a bare text link (unreadable on photo) */
.hero-cta .btn{background:rgba(26,26,26,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hero-cta .btn:hover{background:var(--ink)}
.hero-cta .tlink{background:rgba(255,255,255,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-edge);border-radius:100px;padding:13px 22px;color:var(--ink)}
.hero-cta .tlink:hover{border-bottom-color:transparent;background:rgba(255,255,255,.58)}
@media(max-width:900px){
  :root{--navh:66px}
  .heroshot{padding-top:calc(var(--navh) + 26px)}
  .hs-copy{padding:26px 24px}
}
/* over the photo (top state) links go full ink with a soft light halo —
   #5D554D washed out on the image's bright regions */
nav:not(.scrolled) .nav-links a{color:var(--ink);text-shadow:0 1px 10px rgba(255,255,255,.55)}
nav:not(.scrolled) .logo{text-shadow:0 1px 10px rgba(255,255,255,.55)}

/* ============ HERO PREMIUM PASS (Namrata: "can be a lot better") ============
   Three levers, none breaking the no-cast / no-panel rules:
   1. LIFE — the photo drifts (slow Ken Burns) until the video replaces it.
   2. CHOREOGRAPHY — the copy enters in a stagger, like the chips already do.
   3. FINISH — softer halo, hairline edges, deeper softer shadows, hover lift. */
.heroshot{overflow:hidden} /* the drifting photo must clip to the hero */
@keyframes hs-drift{from{transform:scale(1)}to{transform:scale(1.045)}}
.heroshot .hs-bg{animation:hs-drift 16s cubic-bezier(.2,.5,.3,1) .2s forwards}
@keyframes hs-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hs-copy>*{opacity:0;animation:hs-rise .8s cubic-bezier(.2,.6,.2,1) forwards}
.hs-copy>.eyebrow{animation-delay:.05s}
.hs-copy>h1{animation-delay:.14s}
.hs-copy>.lede{animation-delay:.26s}
.hs-copy>.hero-cta{animation-delay:.38s}
.heroshot .credband{opacity:0;animation:hs-rise .9s cubic-bezier(.2,.6,.2,1) .55s forwards}
/* softer halo — the tight glow read as an effect; a wide soft one reads as light */
.heroshot h1,.heroshot .lede,.heroshot .eyebrow{text-shadow:0 1px 26px rgba(255,255,255,.55)}
/* 62px: two lines inside the 440 column, and still clear of .shead-xl (60) */
@media(min-width:901px){
  .heroshot h1{font-size:62px}
  .heroshot .lede{max-width:300px}
}
/* ⚠️ The eyebrow is the ONLY thing that failed once the wash came off: 4.58 on
   desktop (marginal) and 3.14 on mobile (a fail) at --lab. It is a 12px label,
   so it needs 4.5 and has no size allowance. Ink takes it to 7+ on both.
   ⚠️ This is what lets mobile go cast-free too - do not put a veil back to
   solve a single small label. */
.heroshot .eyebrow{color:var(--ink)}
/* finish: hairline edges, lower deeper shadows, gentle hover lift */
.hclaim{border:1px solid rgba(255,255,255,.42)}
.hclaim.on{border-color:rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(26,26,26,.35)}
.hero-cta .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 40px rgba(26,26,26,.28);
  transition:transform .25s cubic-bezier(.2,.6,.2,1),background .25s}
.hero-cta .btn:hover{transform:translateY(-2px)}
.hero-cta .tlink{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 30px rgba(60,52,45,.14);
  transition:transform .25s cubic-bezier(.2,.6,.2,1),background .25s}
.hero-cta .tlink:hover{transform:translateY(-2px)}
.heroshot .credband{padding:0}
.heroshot .credband .wrap{padding-top:26px;padding-bottom:26px}
.heroshot .credrow span{letter-spacing:0}
@media(prefers-reduced-motion:reduce){
  .heroshot .hs-bg{animation:none}
  .hs-copy>*,.heroshot .credband{opacity:1;animation:none}
  .hero-cta .btn,.hero-cta .tlink{transition:none}
}

/* ============ HERO VIDEO (decision preview, 2026-08-05) ============
   Desktop plays the loop; mobile keeps the portrait still (no 6.4MB on
   cellular). The video supplies its own motion — no Ken Burns on it. */
.hs-video{display:block}
.hs-mobpic .hs-bg{display:none}
.heroshot video.hs-bg{animation:none}
@media(max-width:900px){
  .hs-video{display:none}
  .hs-mobpic .hs-bg{display:block}
}

/* ============ CTA VIDEO (tube clip behind the smoked glass) ============ */
.ss-video{display:block}
.ss-still{display:none}
@media(max-width:900px){
  .ss-video{display:none}
  .ss-still{display:block}
}
/* the proof ladder rows are keyboard-focusable now */
.lrow:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* group labels for the seven ways — the card/row split is a real
   hierarchy (trademarked programmes vs capabilities); these make it say so */
.fgroup{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lab);margin:34px 0 14px;display:flex;align-items:center;gap:12px}
.fgroup::after{content:"";flex:1;height:1px;background:var(--line)}
/* seven-ways items link to their standalone sections */
.flink{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin-top:12px;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line)}
.flink:hover{border-bottom-color:var(--ink)}
.flink-w{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.flink-w:hover{border-bottom-color:#fff}
.fpair-ink .flink{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.fpair-ink .flink:hover{border-bottom-color:#fff}
/* anchor jumps land clear of the sticky spy bar */
.chapter,#s360{scroll-margin-top:72px}

/* Cedars Rising band — deliberately unlike everything around it */
.cedars{min-height:560px;display:flex;align-items:center}
.cedars .ss-bg{object-position:center 30%}
.ced-stack{font-size:clamp(34px,4.2vw,54px);line-height:1.02;letter-spacing:-.025em}
.ced-stack em{font-style:normal;color:#D8C9B4}
.cedars .tlink{color:#fff}

/* ============ PAGESHOT — interior full-bleed hero (contact), the
   homepage hero's format: image behind a transparent nav, ink type
   with the soft halo, no wash. ============ */
.pageshot{position:relative;overflow:hidden;min-height:76svh;display:flex;align-items:center;
  margin-top:calc(var(--navh) * -1);padding:calc(var(--navh) + 30px) 0 56px}
.pageshot .ps-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pageshot .ps-inner{position:relative;z-index:2;max-width:100%}
.pageshot h1{font-size:clamp(38px,4.6vw,62px);line-height:1.02;letter-spacing:-.03em;color:var(--ink)}
.pageshot h1{margin-bottom:26px}
.pageshot .lede{max-width:540px;color:var(--ink);font-size:20px;line-height:1.5}
.pageshot .ps-note{margin-top:30px;padding-top:22px;border-top:1px solid rgba(26,26,26,.18);max-width:540px;font-size:15.5px;line-height:1.55;color:#3E3834}
.pageshot .ps-note b{color:var(--ink);font-weight:600}
@media(max-width:900px){.pageshot h1{margin-bottom:18px}.pageshot .ps-note{margin-top:22px;padding-top:16px}}
.pageshot h1,.pageshot .lede,.pageshot .eyebrow{text-shadow:0 1px 26px rgba(255,255,255,.55)}
nav:not(.scrolled):has(+ .pageshot) .btn{background:rgba(26,26,26,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
nav:not(.scrolled):has(+ .pageshot) .btn:hover{background:var(--ink)}
@media(max-width:900px){.pageshot{min-height:0;padding:calc(var(--navh) + 34px) 0 44px}}

/* Cedars Rising application form (About) */
.ced-form{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 20px}
.ced-lbl{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--lab);margin-bottom:14px}
.ced-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.ced-form input,.ced-form select{border:1px solid var(--line);border-radius:10px;padding:12px 13px;font:inherit;font-size:14.5px;background:#fff;min-width:0;width:100%}
.ced-form input:focus,.ced-form select:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.ced-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.ced-note{font-size:14px;color:var(--gray);max-width:34ch;line-height:1.5}
.ced-done{font-size:14.5px;color:var(--ink);font-weight:600;margin-top:6px}
@media(max-width:700px){.ced-row{grid-template-columns:1fr}}

/* ⚠️ NO-CROP IMAGES (Namrata, 2026-08-05: "Don't crop the image").
   The default .split-img (4:3) and .lead-photo (4:5) boxes force
   object-fit:cover, which cut the Cedars cohort photo and the leader
   headshots. These show the whole frame instead — the box takes the
   image's own shape. Use .natural on any figure whose subject must not
   be cut (group photos, headshots, anything with faces at the edges). */
/* ⚠️ .natural = the image is never cropped AND the column still matches
   its neighbour's height. The panel stretches to the row; the image is
   centred inside it at its own aspect ratio. (First version let the
   image set its own height, which left the two columns mismatched —
   Namrata caught it.) */
.split-img.natural{aspect-ratio:auto;align-self:stretch;position:relative;
  background:var(--sand-2);min-height:320px}
/* the image is taken OUT OF FLOW so the neighbouring card sets the row
   height; it then centres inside at its own aspect ratio, uncropped */
.split-img.natural picture{display:contents}
.split-img.natural img{position:absolute;inset:22px;margin:auto;width:auto;height:auto;
  max-width:calc(100% - 44px);max-height:calc(100% - 44px);object-fit:contain;border-radius:12px}
.lead-photo{aspect-ratio:auto;background:none}
.lead-photo img{height:auto;display:block;object-fit:contain}
.lead-photo-ph{aspect-ratio:4/5;background:var(--sand-2)}

/* ============ PEOPLE GRID — leaders side by side, Radicle-style.
   Photos are padded to square upstream, so nothing is ever cropped. */
.people{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px;align-items:start}
/* ⚠️ Namrata 2026-08-05: "the faces in our website are too big. may be
   we make a background behind and make images have space." The photo
   now sits INSET on a tinted panel instead of filling the column —
   the panel carries the size, the face stays human-scale. */
.person-photo{border-radius:var(--radius);background:var(--sand-2);margin-bottom:22px;
  padding:30px;display:flex;justify-content:center}
.person-photo img{width:100%;max-width:260px;height:auto;display:block;border-radius:14px}
.person h3{font-size:23px;letter-spacing:-.02em;margin-bottom:4px}
.person-role{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--lab);margin-bottom:14px}
.person-bio{font-size:15px;line-height:1.6;color:var(--ink-2)}
.person-creds{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.person-creds span{display:flex;flex-direction:column;font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--lab);text-transform:uppercase}
.person-creds b{font-family:var(--sans);font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-transform:none}
@media(max-width:820px){.people{grid-template-columns:1fr;gap:44px}}
/* consent checkbox on the study-panel form */
.ced-check{display:flex;align-items:flex-start;gap:10px;margin:4px 0 14px;font-size:14px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.ced-check input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--ink)}

/* ============ FOOTNOTES (2026-09-04) ============
   Required disclosures relocated out of body copy. They still have to be
   READ, so this is deliberately not fine print: --gray on --sand-2 measures
   5.2, above AA for normal text, and the markers are 44px tap targets.
   ⚠️ Do NOT demote this block with opacity or a lighter token to make it
   "look like fine print" — a disclosure that fails contrast is worse than
   one sitting in body copy, which is the problem this block was solving. */
/* ⚠️ GROUND IS --sand, NOT --sand-2, AND BOTH REASONS MATTER:
   1. --line (#E8E3DF) is the SAME HEX as --sand-2, so the divider rule
      above these notes was drawing itself invisible.
   2. footer is also --sand-2, so the page ended on two identical
      grounds with nothing between them.
   --sand (#F1EDEA) makes the hairline visible AND separates the block
   from the footer. Do not move it back. */
.fnotes{background:var(--sand);padding:40px 0 0}
/* ⚠️ MULTI-COLUMN FLOW, NOT A GRID. As a 2-col grid every row was sized by
   its TALLEST cell, so note 1 - one line of text - sat in an 83px box next
   to note 2's four lines, note 3 did the same beside note 4, and note 5 was
   left orphaned in a row of its own. The block read as debris because the
   layout was inventing dead space between entries.
   Columns flow the content instead of locking rows together, which is what
   multi-column was made for and what a footnote list actually wants.
   break-inside:avoid keeps a single note from splitting across the gutter. */
.fnotes .fn-lbl{font-family:var(--mono,'JetBrains Mono',monospace);font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin:0 0 14px}
.fnotes ol{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid var(--line);
  column-count:2;column-gap:56px}
.fnotes li{font-size:14px;line-height:1.6;color:var(--gray);max-width:52ch;
  break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 13px}
.fnotes li:last-child{margin-bottom:0}
.fnotes li b{font-family:var(--mono,'JetBrains Mono',monospace);font-weight:700;color:var(--ink);margin-right:5px}
/* one note on a page never needs two columns */
.fnotes ol:has(li:only-child){column-count:1}
@media(max-width:820px){.fnotes ol{column-count:1}}

/* the superscript marker at the point of use */
.fnref{display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;margin-left:5px;
  font-family:var(--mono,'JetBrains Mono',monospace);font-size:14px;font-weight:700;
  line-height:1;vertical-align:2px;text-decoration:none;
  border:1px solid currentColor;border-radius:4px;opacity:.8}
.fnref:hover,.fnref:focus-visible{opacity:1}
/* ⚠️ 44px tap target WITHOUT changing the 16px visual box — the site has
   zero targets under 44 and this must not reintroduce one. */
.fnref::after{content:"";position:absolute;width:44px;height:44px;
  transform:translate(-50%,-50%);left:50%;top:50%}
.fnref{position:relative}
:target{scroll-margin-top:88px}

/* ============ ROUTER CARD (replaces the email capture), 2026-09-04 ============
   Measured on radiclescience.com: fixed bottom-right, no dimmed backdrop,
   32px/400 heading, 16px line, two pill buttons, one ink one white. */
.cap-back{position:fixed;inset:auto 24px 24px auto;background:transparent;z-index:90;pointer-events:none;display:block;padding:0}
.cap-back .cap{pointer-events:auto;position:relative;max-width:420px;width:420px;padding:30px 30px 26px;
  border-radius:20px;box-shadow:0 24px 60px rgba(26,26,26,.22),0 2px 8px rgba(26,26,26,.10);
  transform:translateY(16px);transition:transform .32s cubic-bezier(.2,.6,.2,1)}
.cap-back.in .cap{transform:none}
.cap h3{font-size:30px;line-height:1.05;letter-spacing:-.025em;margin:0 0 10px;padding-right:36px}
.cap p{font-size:15.5px;line-height:1.4;color:var(--lab);max-width:44ch;margin:0}
.cap-routes{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:20px}
.cap-routes .btn{padding:11px 20px}
.cap-routes .btn.cap-alt{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.cap-routes .btn.cap-alt:hover{background:var(--sand)}
@media(max-width:600px){.cap-back{inset:auto 12px 12px 12px}.cap-back .cap{width:auto;max-width:none;padding:24px 22px 22px}.cap h3{font-size:26px}}

/* ============ DATA PILLS ON THE TRIPTYCH, 2026-09-04 ============
   Reference spec: frosted dark lozenge, icon chip, metric name over value,
   comparator subline. Worst-case contrast, white on .8 ink over a WHITE
   pixel: bg = .8*26 + .2*255 = 72 -> L .061; white L 1.0 -> 9.5:1.
   Subline at .78 white on that: ~5.3:1. Safe on any photograph. */
.tri{position:relative}
.dpill{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:11px;max-width:calc(100% - 32px);
  background:rgba(26,26,26,.8);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:8px 16px 8px 8px;color:#fff;
  box-shadow:0 8px 26px rgba(0,0,0,.24);text-align:left;margin:0}
.dp-ico{width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:17px;font-weight:700;flex:none}
.dp-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.dp-name{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78);white-space:nowrap}
.dp-val{font-family:var(  --sans);font-size:20px;font-weight:700;letter-spacing:-.02em;color:#fff;margin:2px 0 1px}
.dp-sub{font-family:var(--mono);font-size:14px;color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tri-cap{display:none}
@media(max-width:900px){.dpill{left:12px;top:12px;padding:7px 13px 7px 7px;gap:9px}.dp-ico{width:32px;height:32px;font-size:15px}.dp-val{font-size:17px}}

/* ============ HERO RE-CUT, 2026-09-04 ============
   Namrata pointed at Radicle's hero form: a positional claim plus an
   imperative-and-triplet subhead. That does not fit the old 440px /
   one-line envelope, so the hero was re-cut and MEASURED LIVE against
   six decoded video frames, 48 configurations (height x h1 size x
   subhead measure x padding x crop). Exactly TWO passed, both this
   shape. Shipped config, worst pixel across the loop:
       eyebrow 14.95   h1 10.80   subhead 11.43
   ⚠️ THE THREE-LINE H1 IS LOAD-BEARING. At 66px the first line runs
   long into the dark centre of the frame and drops to 1.0:1; at 72px it
   stacks narrow and clears. A 44ch or 36ch subhead reaches 614px into
   the same dark region (1.07). 30ch is the widest that passes.
   ⚠️ 122vh is what makes the crop axis horizontal, so 30% x can pull
   the bright left of the frame under the copy; at 100vh x is inert and
   NOTHING passes. Desktop only - mobile keeps its measured still.
   Weight stays 700. */
@media(min-width:901px){
  .heroshot{min-height:122vh}
  .heroshot .hs-bg,.heroshot .hs-video{height:100%}
  .heroshot>.wrap{padding-top:60px}
  .hs-copy{max-width:620px}
  .heroshot h1{font-size:72px;line-height:.92;letter-spacing:-.035em}
  .heroshot .lede{max-width:30ch;font-size:18px;line-height:1.4;margin-top:18px}
  .heroshot .hs-video{object-position:30% 46%}
}

/* pills: smaller (Namrata, 2026-09-04). Same construction, ~30% less. */
.dpill{gap:8px;padding:6px 12px 6px 6px;left:12px;top:12px}
.dp-ico{width:28px;height:28px;border-radius:8px;font-size:14px}
.dp-name{font-size:14px;letter-spacing:.05em}
.dp-val{font-size:16px;margin:1px 0 0}
.dp-sub{font-size:14px}
@media(max-width:900px){.dpill{padding:5px 10px 5px 5px}.dp-ico{width:24px;height:24px;font-size:14px}.dp-val{font-size:14px}}

/* ============ ROUTER CARD, CENTRED WITH AN IMAGE (2026-09-04) ============
   Namrata: "make this better with image and come in between the page."
   Centred modal on a dimmed backdrop, photograph left, copy right. */
.cap-back{inset:0;background:rgba(26,26,26,.5);display:flex;align-items:center;justify-content:center;padding:24px;pointer-events:auto}
.cap-back .cap{width:min(880px,100%);max-width:880px;padding:0;display:grid;grid-template-columns:42fr 58fr;overflow:hidden;border-radius:20px}
.cap-img{position:relative;min-height:100%}
.cap-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cap-body{padding:40px 40px 36px}
.cap h3{font-size:34px;padding-right:44px}
.cap-x{top:16px;right:16px;z-index:2}
@media(max-width:700px){
  .cap-back{padding:14px}
  .cap-back .cap{grid-template-columns:none;width:100%}
  .cap-img{min-height:180px;height:180px}
  .cap-body{padding:24px 22px 22px}
  .cap h3{font-size:26px}
}

/* logo bigger (Namrata, 2026-09-04): 26 -> 34px, nav and footer */
.logo{font-size:34px;letter-spacing:-.02em}
@media(max-width:600px){.logo{font-size:30px}}

/* closing block rhythm (Namrata, 2026-09-04): the button sat on the lede */
.secshot .lede{margin-top:20px;margin-bottom:34px;line-height:1.45;max-width:44ch}
.secshot .ss-body .btn{margin-top:0}

/* ============ "WHAT YOU WALK AWAY WITH" ON INK (2026-09-04) ============
   Namrata: this section and "Evidence at market speed" had near-identical
   light grounds. The CoA block inverts to ink - the same treatment the
   zipline preview measured clean (36 elements, zero failures). The
   certificate stays paper: an artifact on ink is the point. Grounds now
   run goals (sand) -> INK -> speed (sand + photo). */
.grad-sand{background:var(--ink)}
.grad-sand .sintro h2,.grad-sand .eyebrow,.grad-sand .proof-ans h3,.grad-sand .dl-room .tile b{color:#fff}
.grad-sand .sright,.grad-sand .proof-ans p{color:rgba(255,255,255,.84)}
.grad-sand .dl-lbl,.grad-sand .dl-room .tile span{color:rgba(255,255,255,.74)}
.grad-sand .dl-room{background:rgba(255,255,255,.06)}
.grad-sand .proof-ans{background:rgba(255,255,255,.05)}
.grad-sand .coa{color:var(--ink)}
.grad-sand .split{display:grid;grid-template-columns:42fr 34fr;gap:clamp(24px,3vw,48px);align-items:stretch}
@media(max-width:900px){.grad-sand .split{grid-template-columns:none}}


/* ===== Launch audit fixes, 2026-09-05 ===== */
html.nav-lock{overflow:hidden}
h1,h2,h3{text-wrap:balance}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px;font-weight:600;text-decoration:none}
.skip-link:focus-visible{top:12px;outline:2px solid #fff;outline-offset:2px}
/* eyebrow contrast on tinted grounds */
.eyebrow{color:#4B423B}
.sec-ink .eyebrow,.sec-teal .eyebrow,.phero.ph-deep .eyebrow,.chapter.on-dark .ch-kicker,.results .eyebrow{color:#E8DED2}
.ch-kicker{color:#4B423B}
.speed .eyebrow{color:#4B423B}
/* homepage credential band over the photo */
.credrow,.credrow small,.credrow span,.credfor{color:#1A1A1A}
.credrow small,.credfor{background:rgba(255,255,255,.78);padding:2px 6px;border-radius:3px}
/* services claim-studio result subline */
#sr-sub.sr-sub{color:rgba(255,255,255,.85)}
/* tap targets */
.dz-chip,.rr-opt{min-height:44px;padding-top:10px;padding-bottom:10px}
.gs-dot{min-width:44px;min-height:44px}
.lnk,.tlink,.backlink{min-height:44px;display:inline-flex;align-items:center}
.cap-x{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
.ced-check input[type=checkbox]{width:24px;height:24px}
/* 320px reflow */
.cgrid>div{min-width:0}
.route{min-width:0;white-space:normal}
[role=tablist]{overflow-x:auto;max-width:100%}
@media(max-width:600px){body{overflow-x:hidden}}
/* sticky chrome must not cover anchored targets */
html{scroll-padding-top:150px}
/* footer location lines are text, not links */
.foot-col .loc{display:block;color:inherit}
/* footer disclaimer readable */
.disclaimer{font-size:14px}

.legal{max-width:760px}
.legal h2{font-size:22px;margin:40px 0 10px;letter-spacing:-.01em}
.legal p{max-width:70ch;line-height:1.65;margin-bottom:14px}
.legal code{font-family:var(--mono);font-size:14px;background:var(--sand-2);padding:1px 5px;border-radius:3px}

.rv-tag{font-size:14px}
.label-card{pointer-events:none}
@media(max-width:700px){.spy-link{font-size:0;min-width:0;padding:12px 8px;letter-spacing:0}.spy-link b{font-size:14px}}
@media(max-width:700px){.wt-nav{flex-wrap:wrap;overflow:visible}.wt-tab{white-space:normal;flex:0 1 auto}}
.phero{overflow:hidden}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}.flip-card{min-height:0}}
/* mobile type: quieter supporting text under the headlines (2026-09-05) */
@media(max-width:700px){
  .lede,.heroshot .lede,.pageshot .lede,.secshot .lede,.phero .lede{font-size:17px;line-height:1.5}
  .ph-sub{font-size:17px}
  .eyebrow,.ch-kicker,.hsc-lbl{letter-spacing:.06em}
  .measure-list li{font-size:20px}
}