/* Hallmark · macrostructure: route-led editorial system · genre: modern-minimal · tone: precise · anchor hue: cobalt
   Rely Health landing system · warm paper · editorial serif display · quiet annotation
   pre-emit critique: P5 H5 E5 S5 R5 V4 · mobile: pass (36, 59, 61–69) */

/* ============================================================
   1 · Tokens
   ============================================================ */
:root{
  /* Ground. Warm paper, an oat band for pauses, a near-white card surface. */
  --paper:#f3eee4;
  --band:#e8e8f4;
  --surface:#fffdf8;
  --wash:#ece6da;

  /* Ink. Warm-leaning neutrals so type sits on paper instead of glaring off it. */
  --ink:#17251f;
  --ink-2:#44514b;
  --ink-3:#59635e;

  /* Rules */
  --line:#d8d3c8;
  --line-2:#c9c6bc;

  /* Brand anchor */
  --brand:#4457d2;
  --brand-deep:#3143b7;
  --brand-tint:#e8e8f4;
  --brand-wash:#e8e8f4;
  --brand-line:#bec4ec;
  /* Ink that sits ON a --brand fill. Flips to dark when --brand lightens. */
  --on-brand:#fff;

  /* Border of an interactive control. Tracks --line-2 on paper, but has to
     lift on dark ground where --line-2 is a hairline the eye loses. */
  --ctl-line:var(--line-2);

  /* Warm accent. Annotation rules, the wordmark dot, section markers. */
  --clay:#e36f59;
  --clay-tint:#f8ddd6;
  --clay-line:#e8a99b;

  /* Visual route grammar. */
  --signal:#f2c84b;
  --sage:#8eaf9a;
  --lilac:#e8e8f4;

  /* Semantic */
  --ok:#2f6b4c;

  /* Dark grounds. Warm near-black, never a cool or teal black. Each one is the
     deep counterpart of a paper token, and .sec-deep does the swap. */
  --deep:#17251f;          /* deep counterpart of --paper */
  --deep-2:#21342b;
  --deep-band:#101c17;     /* deep counterpart of --band, a recessed pause */
  --deep-panel:#21342b;    /* deep counterpart of --surface, the floating panel */
  --deep-wash:#1b2d25;     /* deep counterpart of --wash, a subordinate fill */
  --deep-ink-0:#f5f2ec;    /* deep counterpart of --ink */
  --deep-ink:#b9b3a8;      /* deep counterpart of --ink-2 */
  --deep-ink-2:#a49d92;    /* deep counterpart of --ink-3 */
  --deep-line:#403a31;     /* deep counterpart of --line */
  --deep-line-2:#544c40;   /* deep counterpart of --line-2 */

  /* Type */
  --sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --t--2:.75rem;      /* 12px  annotation, fine print */
  --t--1:.875rem;     /* 14px  captions, nav descriptions */
  --t-0:1.0625rem;    /* 17px  body */
  --t-1:1.1875rem;    /* 19px  lede */
  --t-2:1.375rem;     /* 22px  large statement */
  --t-3:1.75rem;      /* 28px  small display */
  --t-4:clamp(1.9rem,1.36rem + 2.2vw,2.6rem);      /* h2 */
  --t-5:clamp(2.45rem,1.6rem + 3.3vw,3.6rem);      /* h1 */

  /* Space */
  --gutter:clamp(1.25rem,3.2vw,2rem);
  --wrap:1180px;
  --sec-y:clamp(3.25rem,2.2rem + 4vw,5.5rem);
  --header-h:74px;

  /* Shape and depth. Warm shadows, generous radii. */
  --r-sm:9px;
  --r:13px;
  --r-lg:18px;
  --r-xl:24px;
  --shadow-1:0 1px 2px rgba(72,54,32,.05);
  --shadow-2:0 1px 2px rgba(72,54,32,.04), 0 10px 26px -14px rgba(72,54,32,.22);
  --shadow-3:0 2px 4px rgba(72,54,32,.05), 0 20px 44px -20px rgba(72,54,32,.28);
  --shadow-nav:0 1px 2px rgba(72,54,32,.06), 0 28px 60px -26px rgba(52,40,24,.4);

  --ease:cubic-bezier(.2,.6,.35,1);
}

/* ============================================================
   2 · Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.965rem + .16vw,var(--t-0));
  line-height:1.65;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.nav-locked{overflow:hidden}
img,svg{max-width:100%}
a{color:var(--brand-deep);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{color:var(--brand)}

h1,h2,h3{min-width:0;margin:0 0 .5em;overflow-wrap:anywhere;text-wrap:balance}
h1,h2{
  font-family:var(--sans);
  font-weight:560;
  font-optical-sizing:auto;
  letter-spacing:-.05em;
  color:var(--ink);
}
h1{font-size:var(--t-5);line-height:1.06}
h2{font-size:var(--t-4);line-height:1.14}
h3{
  font-family:var(--sans);
  font-size:1.0625rem;
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.005em;
}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:800;color:var(--ink)}
em{font-style:italic}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap.narrow{max-width:calc(760px + 2 * var(--gutter))}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{
  left:1rem;top:1rem;z-index:200;
  background:var(--surface);color:var(--brand-deep);
  font-weight:800;font-size:var(--t--1);
  padding:.7rem 1.1rem;border-radius:var(--r-sm);
  border:1px solid var(--brand-line);box-shadow:var(--shadow-3);
}

/* Focus. Visible on every interactive element, recoloured on dark grounds. */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.cta-box :focus-visible,
.site-footer :focus-visible{outline-color:#fff}

/* Anchored sections must clear the sticky header. */
section[id],[id]{scroll-margin-top:calc(var(--header-h) + 1.25rem)}

::selection{background:var(--brand-tint);color:var(--brand-deep)}

/* ============================================================
   4 · Header
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(72,54,32,.02),0 14px 30px -24px rgba(72,54,32,.5);
}
.header-inner{display:flex;align-items:center;gap:1.25rem;min-height:var(--header-h)}

.brand{
  display:inline-flex;align-items:center;gap:.55rem;
  text-decoration:none;color:var(--brand);
  font-size:1.35rem;line-height:1;
}
.brand span{
  font-family:var(--serif);font-weight:700;letter-spacing:-.03em;
  color:var(--ink);
}
.brand i{color:var(--clay);font-style:normal}
.logo{width:32px;height:32px;flex:none;overflow:visible}

.desktop-nav{display:flex;gap:.15rem;margin-left:auto}
.nav-trigger{
  display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:0;font:inherit;
  font-size:.9375rem;font-weight:700;letter-spacing:-.005em;
  color:var(--ink-2);
  padding:.55rem .7rem;border-radius:var(--r-sm);
  cursor:pointer;
  transition:color .16s var(--ease),background .16s var(--ease);
}
.nav-trigger:hover{color:var(--ink);background:var(--wash)}
.is-open .nav-trigger{color:var(--brand-deep);background:var(--brand-tint)}
.nav-trigger svg{width:10px;height:6px;opacity:.65;transition:transform .18s var(--ease)}
.is-open .nav-trigger svg{transform:rotate(180deg);opacity:1}
.nav-group{position:static}

/* Mega menu — a floating panel, the main navigational surface. */
.mega{
  position:absolute;
  top:calc(100% - .25rem);
  left:50%;transform:translateX(-50%);
  width:min(960px,100% - 2 * var(--gutter));
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-nav);
  overflow:hidden;
  animation:mega-in .18s var(--ease) both;
}
/* Keeps the pointer inside .nav-group while travelling to the panel. */
.mega::before{content:"";position:absolute;top:-.75rem;left:0;right:0;height:.75rem}
@keyframes mega-in{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}

.mega-inner{
  display:grid;
  grid-template-columns:minmax(200px,.8fr) 2fr;
  gap:0;
}
.mega-intro{
  background:var(--wash);
  border-right:1px solid var(--line);
  padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;align-items:flex-start;
}
.mega-intro p{color:var(--ink-2);font-size:var(--t--1);line-height:1.5;max-width:30ch}
.mega-all{
  margin-top:auto;padding-top:1rem;
  font-weight:800;font-size:var(--t--1);
  color:var(--brand-deep);text-decoration:none;
  display:inline-flex;align-items:center;gap:.35rem;
}
.mega-all::after{content:"→";transition:transform .16s var(--ease)}
.mega-all:hover::after{transform:translateX(3px)}
.mega-list{
  list-style:none;margin:0;padding:.9rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:.15rem;align-content:start;
}
.mega-list a{
  display:block;padding:.65rem .8rem;border-radius:var(--r-sm);
  text-decoration:none;color:inherit;
  transition:background .14s var(--ease);
}
.mega-list a:hover{background:var(--brand-tint)}
.mega-list strong{display:block;font-size:.9375rem;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.mega-list span{display:block;font-size:var(--t--1);line-height:1.45;color:var(--ink-3);margin-top:.1rem}

.header-actions{display:flex;align-items:center;gap:.6rem}
.menu-toggle{
  display:none;width:42px;height:42px;
  border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--r-sm);cursor:pointer;position:relative;
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.menu-toggle:hover{background:var(--wash)}
.bars,.bars::before,.bars::after{
  position:absolute;left:11px;width:18px;height:2px;
  background:var(--ink);border-radius:2px;content:"";
  transition:transform .18s var(--ease),opacity .12s linear;
}
.bars{top:20px}
.bars::before{top:-6px;left:0}
.bars::after{top:6px;left:0}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}

.mobile-nav{
  display:none;
  padding:.35rem var(--gutter) 1rem;
  border-top:1px solid var(--line);
  background:var(--surface);
  max-height:calc(100dvh - var(--header-h));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.mobile-nav details{border-bottom:1px solid var(--line)}
.mobile-nav summary{
  padding:.95rem .25rem;font-weight:700;cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;
}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary::after{
  content:"";flex:none;width:8px;height:8px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s var(--ease);
}
.mobile-nav details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.mobile-nav details a{
  display:block;padding:.55rem .25rem .55rem 1rem;
  color:var(--ink-2);text-decoration:none;font-size:.9375rem;
  border-left:2px solid var(--line);
}
.mobile-nav details a:hover{color:var(--brand-deep);border-left-color:var(--brand)}
.mobile-nav details[open]>a:first-of-type{padding-top:.2rem}
.mobile-nav details[open]{padding-bottom:.7rem}
.mobile-nav>.btn{
  display:flex;align-items:center;justify-content:center;
  margin-top:1rem;width:100%;padding:.8rem 1.4rem;
  border-left:0;text-align:center;
}

/* ============================================================
   5 · Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.4rem;border-radius:999px;
  font-weight:700;font-size:.9688rem;letter-spacing:-.005em;line-height:1.2;
  text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:transform .14s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:0 1px 2px rgba(36,61,128,.24),0 10px 22px -12px rgba(36,61,128,.6)}
.btn-primary:hover{background:var(--brand-deep);color:var(--on-brand);transform:translateY(-1px);box-shadow:0 2px 4px rgba(36,61,128,.24),0 16px 30px -14px rgba(36,61,128,.7)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--surface);border-color:var(--ctl-line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--surface)}
.btn-ghost:active{background:var(--wash)}
.btn-sm{padding:.55rem 1.05rem;font-size:.875rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* ============================================================
   6 · Breadcrumb
   ============================================================ */
.breadcrumb{
  padding-block:1.15rem 0;
  padding-inline:var(--gutter);
  font-size:var(--t--2);letter-spacing:.01em;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;
}
.breadcrumb a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line-2)}
.breadcrumb a:hover{color:var(--brand-deep);border-bottom-color:var(--brand)}
.breadcrumb [aria-current]{color:var(--ink-2);font-weight:700}
.crumb-sep{color:var(--line-2)}

/* ============================================================
   7 · Section shell and rhythm
   ============================================================ */
.sec{padding:var(--sec-y) 0}

/* Oat bands mark the pauses: prose, quotes, process, the model. */
.sec-prose,.sec-quote,.sec-steps,.sec-calc{background:var(--band)}
.sec-metrics{background:var(--brand-wash)}
:is(.sec-prose,.sec-quote,.sec-steps,.sec-calc)+:is(.sec-prose,.sec-quote,.sec-steps,.sec-calc){padding-top:0}
.sec-metrics+.sec-metrics{padding-top:0}
.sec-quote{padding-block:clamp(2.75rem,2rem + 2.6vw,4.25rem)}

.sec-head{max-width:64ch;margin-bottom:2.25rem}
.sec-head h2{margin-bottom:.4em;max-width:22ch}
.wrap.narrow .sec-head h2{max-width:none}
.sec-head:last-child{margin-bottom:0}

.eyebrow{
  font-size:var(--t--2);font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand-deep);
  margin:0 0 .85rem;
}
/* A short clay rule opens each section. Warmth, without a photograph. */
.sec-head>.eyebrow,.hero-title>.eyebrow{display:flex;align-items:center;gap:.65rem}
.sec-head>.eyebrow::before,.hero-title>.eyebrow::before{
  content:"";flex:none;width:1.6rem;height:2px;border-radius:2px;background:var(--clay);
}

.lede{font-size:var(--t-1);line-height:1.6;color:var(--ink-2);max-width:58ch}
.note{font-size:var(--t--2);line-height:1.6;color:var(--ink-3);margin-top:1rem;max-width:70ch}

.sec-prose .wrap>p{color:var(--ink-2);font-size:var(--t-1);line-height:1.7;max-width:64ch}
.sec-prose .wrap>p+p{margin-top:0}

/* ============================================================
   8 · Status tag — a scholarly annotation, never an alarm
   ============================================================ */
.tag{
  display:inline-flex;align-items:flex-start;gap:.5rem;
  margin-top:1.1rem;
  font-size:var(--t--2);font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.4;
  color:var(--ink-3);
  background:transparent;
  border:1px solid var(--line-2);
  padding:.3rem .7rem .3rem .6rem;
  border-radius:999px;
}
.tag::before{
  content:"";flex:none;
  width:6px;height:6px;border-radius:50%;margin-top:.45em;
  background:var(--clay);
  box-shadow:0 0 0 3px var(--clay-tint);
}

/* ============================================================
   9 · Hero
   ============================================================ */
.hero{padding:clamp(2.75rem,1.6rem + 4.4vw,5rem) 0 clamp(2.5rem,1.4rem + 3.4vw,4rem)}
.hero-compact{padding-bottom:clamp(1.75rem,1.2rem + 1.6vw,2.5rem)}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:end;
}
.hero-main h1{max-width:19ch;margin-bottom:.34em}
.hero-sub{
  font-size:clamp(1.0625rem,1rem + .38vw,1.3rem);
  line-height:1.55;color:var(--ink-2);max-width:48ch;
}
.hero-foot{
  margin-top:1.5rem;padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-size:var(--t--2);line-height:1.6;color:var(--ink-3);max-width:60ch;
}
.hero-aside{
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:1.6rem 1.5rem;
}
.hero-aside .eyebrow{
  color:var(--ink-3);
  padding-bottom:.85rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--line);
}
.hero-aside ul{list-style:none;margin:0;padding:0;display:grid;gap:.95rem}
.hero-aside li{
  padding-left:1.4rem;position:relative;
  font-size:.9375rem;line-height:1.55;color:var(--ink-2);
}
.hero-aside li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:7px;height:7px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);
}

/* ============================================================
   10 · Trust bar
   ============================================================ */
.trustbar{background:var(--band);border-block:1px solid var(--line)}
.trustbar .wrap{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.75rem 1.75rem;padding-block:1rem;
}
.trustbar ul{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:0;padding:0}
.trustbar li{
  font-size:var(--t--1);font-weight:700;color:var(--ink-2);
  position:relative;padding-left:1.35rem;
}
.trustbar li::before{
  content:"";position:absolute;left:0;top:.36em;
  width:11px;height:6px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);
  transform:rotate(-45deg);
}
.trustbar .tag{margin-top:0}

/* ============================================================
   11 · Cards
   ============================================================ */
.cards{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(266px,1fr))}
.cards.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cards.cols-4{grid-template-columns:repeat(auto-fit,minmax(226px,1fr))}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:1.65rem 1.6rem;
  box-shadow:var(--shadow-1);
}
.card h3{margin-bottom:.55em}
.card p{color:var(--ink-2);margin-bottom:0;font-size:.9688rem;line-height:1.62}
.card-muted{background:transparent;border-style:dashed;border-color:var(--line-2);box-shadow:none}
.card-accent{background:var(--brand-tint);border-color:var(--brand-line);box-shadow:none}
.card-link{
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .16s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card-link:hover{
  transform:translateY(-2px);
  border-color:var(--brand-line);
  box-shadow:var(--shadow-2);
}
.card-go{
  margin-top:auto;padding-top:1.2rem;
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:800;font-size:var(--t--1);color:var(--brand-deep);
}
.card-go::after{content:"→";transition:transform .16s var(--ease)}
.card-link:hover .card-go::after{transform:translateX(4px)}

/* ============================================================
   12 · Steps — a connected sequence, not seven boxes
   ============================================================ */
/* Heading holds the left column, the sequence runs down the right. */
.sec-steps>.wrap{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);
  gap:clamp(2rem,4.5vw,4rem);
  align-items:start;
}
.sec-steps>.wrap>.sec-head{margin-bottom:0;position:sticky;top:calc(var(--header-h) + 2.25rem)}
.sec-steps>.wrap>.sec-head h2{max-width:none}
.sec-steps>.wrap>.steps:only-child{grid-column:1 / -1}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;--step-mark-w:2.75rem}
.steps li{
  position:relative;
  display:grid;grid-template-columns:minmax(var(--step-mark-w),auto) minmax(0,1fr);
  gap:1.15rem;align-items:start;
}
/* The connector is centred on the mark's minimum width. A label wider than that
   grows its column, so the line sits a little left of the pill's true centre;
   that is a 1px cosmetic drift, where a fixed column clipped the label outright.
   CONTENT_GUIDE documents "Day 1" and "Week 6" as valid labels. */
.steps li::before{
  content:"";position:absolute;
  left:calc(var(--step-mark-w) / 2 - 1px);top:3.1rem;bottom:-1.95rem;
  width:1px;background:var(--line-2);
}
.steps li:last-child::before{display:none}
.step-mark{
  min-width:var(--step-mark-w);height:2.75rem;
  display:inline-flex;align-items:center;justify-content:center;
  padding-inline:.5rem;
  font-family:var(--serif);font-weight:700;font-size:.9375rem;
  font-variant-numeric:tabular-nums;
  color:var(--brand-deep);
  background:var(--surface);
  border:1px solid var(--brand-line);
  border-radius:999px;
  white-space:nowrap;
  position:relative;z-index:1;
}
.step-body{padding-top:.35rem}
.step-body h3{margin-bottom:.3em}
.step-body p{margin:0;color:var(--ink-2);font-size:.9688rem;line-height:1.62;max-width:66ch}
.step-body .tag{margin-top:.9rem}

/* ============================================================
   13 · Split
   ============================================================ */
.split{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.25rem);align-items:start;
}
.split-main>p{color:var(--ink-2);max-width:62ch}
.ticks{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.9rem}
.ticks li{position:relative;padding-left:1.85rem;color:var(--ink-2);max-width:62ch}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:11px;height:6px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);
  transform:rotate(-45deg);
}
.panel{
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:1.65rem 1.6rem;
}
.sec-prose .panel,.sec-steps .panel,.sec-calc .panel{background:var(--surface)}
.panel h3{
  margin-bottom:1.1em;padding-bottom:.75rem;
  border-bottom:1px solid var(--line);
  font-size:var(--t--2);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.panel ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
.panel li{padding-left:1.25rem;position:relative}
.panel li::before{
  content:"";position:absolute;left:0;top:.58em;
  width:6px;height:6px;border-radius:50%;background:var(--brand);
}

/* ============================================================
   14 · Metrics — one of two moments allowed real visual weight
   ============================================================ */
.metrics{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.metric{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:1.75rem 1.65rem;
  box-shadow:var(--shadow-2);
  display:flex;flex-direction:column;
}
.metric-value{
  font-family:var(--serif);
  font-size:clamp(1.9rem,1.4rem + 1.7vw,2.6rem);
  font-weight:700;line-height:1.02;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--brand-deep);
  margin:0 0 .5rem;
}
.metric h3{
  font-size:.9688rem;margin:0 0 .75rem;padding-bottom:.85rem;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.metric-ctx{font-size:.9375rem;line-height:1.6;color:var(--ink-2);margin-bottom:0}
.metric .tag{align-self:flex-start;margin-top:1.15rem}
/* Sources sit on the card floor so a row of metrics lines up along the bottom. */
.metric-src{
  font-size:var(--t--2);line-height:1.5;color:var(--ink-3);
  margin:auto 0 0;padding-top:.85rem;border-top:1px solid var(--line);
}
.metric-ctx:has(+ .metric-src),.metric .tag:has(+ .metric-src){margin-bottom:1.25rem}

/* ============================================================
   15 · Tables
   ============================================================ */
.table-scroll:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.table-scroll{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow-1);
}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.9375rem}
th,td{text-align:left;padding:.95rem 1.15rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55}
thead th{
  background:var(--wash);
  font-size:var(--t--2);font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}
tbody th{font-weight:800;color:var(--ink)}
tbody td{color:var(--ink-2)}
tbody tr:last-child :is(th,td){border-bottom:0}

/* ============================================================
   16 · Quote
   ============================================================ */
.quote{
  margin:0;position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:3.4rem 2rem 1.85rem;
  box-shadow:var(--shadow-1);
}
.quote::before{
  content:"\201C";
  position:absolute;top:.55rem;left:1.85rem;
  font-family:var(--serif);font-weight:700;font-size:3.6rem;line-height:1;
  color:var(--clay);opacity:.22;
  pointer-events:none;
}
.quote blockquote{
  margin:0;position:relative;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.2rem,1.05rem + .55vw,1.55rem);
  line-height:1.42;letter-spacing:-.012em;color:var(--ink);
  text-wrap:pretty;
}
.quote figcaption{
  margin-top:1.35rem;padding-top:1rem;
  border-top:1px solid var(--line);
  font-size:var(--t--1);color:var(--ink-3);font-weight:700;
}
.quote .tag{margin-top:1rem}

/* ============================================================
   17 · FAQ
   ============================================================ */
.faq{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:0 1.5rem;
  box-shadow:var(--shadow-1);
}
.faq details+details{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer;font-weight:800;font-size:1.0313rem;line-height:1.45;
  padding:1.25rem 0;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  color:var(--ink);
  transition:color .16s var(--ease);
}
.faq summary:hover{color:var(--brand-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line-2);
  background:
    linear-gradient(var(--brand-deep),var(--brand-deep)) center/11px 1.6px no-repeat,
    linear-gradient(var(--brand-deep),var(--brand-deep)) center/1.6px 11px no-repeat,
    var(--surface);
  transition:background-color .16s var(--ease),border-color .16s var(--ease);
}
.faq details[open] summary{color:var(--brand-deep)}
.faq details[open] summary::after{
  background:
    linear-gradient(var(--brand-deep),var(--brand-deep)) center/11px 1.6px no-repeat,
    var(--brand-tint);
  border-color:var(--brand-line);
}
.faq details>div{padding:0 0 1.4rem;color:var(--ink-2);max-width:68ch}
.faq details>div p:last-child{margin-bottom:0}

/* ============================================================
   18 · Page notes — caveats stay quiet and live at the bottom
   ============================================================ */
.page-notes{padding:1rem 0 1.25rem;background:var(--paper);border-top:1px solid var(--line)}
.page-notes ol{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem 1.75rem;margin:0;padding:0;list-style:none}
.page-notes li{min-width:0;color:var(--ink-3);font-size:.75rem;line-height:1.5}
.page-notes p{margin:0;max-width:75ch}
.page-notes p+p{margin-top:.28rem}
.page-note-title{color:var(--ink-2);font-weight:700}
.page-note-status{font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
@media(min-width:48rem){
  .page-notes:not(.page-notes-count-1) ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   19 · Closing CTA
   ============================================================ */
.cta-box{
  /* The box paints its own blue ground, so it pins the brand palette rather
     than inheriting it. Without this it reads white-on-pale inside .sec-deep. */
  --brand-deep:#243d80;
  --on-brand:#fff;
  background:var(--brand-deep);
  color:#fff;
  border-radius:var(--r-xl);
  padding:clamp(1.9rem,1.2rem + 2.4vw,3.15rem);
  display:flex;flex-wrap:wrap;gap:1.75rem;
  align-items:center;justify-content:space-between;
  box-shadow:8px 10px 0 rgba(23,37,31,.16);
}
.cta-box>div:first-child{flex:1 1 26rem}
.cta-box h2{color:#fff;margin-bottom:.32em;max-width:20ch}
.cta-box p{color:rgba(255,255,255,.9);margin:0;max-width:54ch}
.cta-box .btn-row{margin:0;flex:0 0 auto}
.cta-box .btn-ghost{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.cta-box .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.cta-box .btn-primary{background:#fff;color:var(--brand-deep);box-shadow:0 10px 24px -14px rgba(0,0,0,.7)}
.cta-box .btn-primary:hover{background:#fff;color:var(--brand-deep)}

/* ============================================================
   20 · Calculator — the second moment allowed real visual weight
   ============================================================ */
.calc{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:1.5rem;align-items:start}
.calc-inputs{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:1.6rem 1.5rem;
  box-shadow:var(--shadow-1);
  position:sticky;top:calc(var(--header-h) + 1.25rem);
  max-height:calc(100dvh - var(--header-h) - 2.5rem);
  overflow-y:auto;
}
.calc-inputs h3{
  margin-bottom:1.35em;padding-bottom:.8rem;
  border-bottom:1px solid var(--line);
  font-size:var(--t--2);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.field{margin-bottom:1.25rem}
.field label{display:block;font-size:.875rem;font-weight:700;line-height:1.4;margin-bottom:.4rem;color:var(--ink)}
.field-ctl{display:flex;align-items:center;gap:.8rem}
.field input[type=number]{
  width:100%;height:44px;padding:0 .85rem;
  border:1px solid var(--ctl-line);border-radius:var(--r-sm);
  font:inherit;font-size:.9375rem;font-variant-numeric:tabular-nums;
  color:var(--ink);background:var(--paper);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease);
}
.field input[type=number]:hover{border-color:var(--ctl-line);background:var(--surface)}
.field input[type=number]:focus{
  outline:none;background:var(--surface);
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);
}
/* The tinted glow is 1.15:1 against the card, so keyboard focus keeps the ring. */
.field input[type=number]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;
}
.field input[type=range]{width:100%;height:22px;accent-color:var(--brand);cursor:pointer}
.field output{
  font-weight:800;font-size:.9375rem;font-variant-numeric:tabular-nums;
  color:var(--brand-deep);min-width:3.6rem;text-align:right;
}
.field-help{font-size:var(--t--2);line-height:1.5;color:var(--ink-3);margin:.4rem 0 0}
.calc-inputs .btn{margin-top:.5rem;width:100%}

.calc-results{display:grid;gap:1.25rem}
.calc-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:1.75rem 1.7rem;
  box-shadow:var(--shadow-2);
}
.calc-card .eyebrow{color:var(--ink-3);margin-bottom:.6rem}
.calc-card h3{font-size:var(--t-1);margin-bottom:.5rem}
.calc-value{
  font-family:var(--serif);
  font-size:clamp(2.1rem,1.5rem + 2.2vw,3rem);
  font-weight:700;line-height:1;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  color:var(--brand-deep);
  margin:.35rem 0 .65rem;
}
.calc-note{color:var(--ink-2);font-size:.9688rem;line-height:1.6;margin-bottom:0;max-width:60ch}
.calc-card .tag{margin-top:1.15rem}
.calc-formula{
  margin:1.15rem 0 0;padding-top:.9rem;
  border-top:1px solid var(--line);
  font-size:var(--t--2);line-height:1.6;color:var(--ink-3);
}
.calc-formula summary,.calc-sources summary{cursor:pointer;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.calc-formula summary{font-size:.6875rem}
.calc-formula p{margin:.65rem 0 0}
.calc-formula summary:hover,.calc-sources summary:hover{color:var(--ink)}
.calc-formula summary:focus-visible,.calc-sources summary:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.calc-sources{
  margin-top:2rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:1.6rem 1.8rem;
}
.calc-sources summary{font-size:var(--t--2)}
.calc-sources[open] summary{margin-bottom:1.1em}
.calc-sources ol{margin:0;padding-left:1.3rem;color:var(--ink-2);font-size:.9375rem;line-height:1.6;display:grid;gap:.7rem}
.calc-sources li::marker{color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ============================================================
   21 · Footer
   ============================================================ */
.site-footer{
  background:var(--deep);
  color:var(--deep-ink);
  margin-top:clamp(3rem,2rem + 3vw,5rem);
  padding:clamp(2.75rem,2rem + 2.4vw,4.25rem) 0 1.75rem;
}
.foot-grid{display:flex;flex-wrap:wrap;gap:2.5rem 2rem}
.foot-grid>div{flex:1 1 138px;min-width:0}
.foot-brand{flex:1 1 260px;min-width:250px;max-width:340px}
.site-footer .brand{color:#8ea4e8;margin-bottom:1rem}
.site-footer .brand span{color:#fff}
.site-footer .brand i{color:#e0a87f}
.foot-brand p{font-size:.9375rem;line-height:1.6;color:var(--deep-ink)}
.foot-fine{font-size:var(--t--2);line-height:1.65;color:var(--deep-ink-2);max-width:46ch}
.foot-label{
  font-size:.6875rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;margin-bottom:.9rem;
}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.site-footer a{color:var(--deep-ink);text-decoration:none;font-size:.9063rem;line-height:1.45}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.foot-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;
  margin-top:2.75rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--t--2);color:var(--deep-ink-2);
}
.foot-bottom p{margin:0}
.foot-compact{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
}
.foot-compact-brand{min-width:0}
.foot-compact-brand .brand{margin-bottom:.45rem}
.foot-compact-brand p{margin:0;color:var(--deep-ink);font-size:.9375rem}
.foot-compact-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.65rem 1.25rem}
.foot-compact-nav a{white-space:nowrap}
.foot-compact-fine{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;
  margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--deep-line);
  color:var(--deep-ink-2);font-size:var(--t--2);line-height:1.55;
}
.foot-compact-fine p{margin:0;max-width:70ch}

/* ============================================================
   22 · Deep ground
   A scope that paints itself warm near-black and redefines the ground tokens
   locally. Any existing block dropped inside inverts without knowing it is on
   dark ground, because every block already draws itself out of these tokens.
   Style the scope, never the child.
   ============================================================ */
.sec-deep,.deep-panel{
  /* Ground. Each token keeps the relationship it has on paper: --surface
     floats above --paper, --band recedes below it, --wash sits between. */
  --paper:var(--deep);
  --band:var(--deep-band);
  --surface:var(--deep-panel);
  --wash:var(--deep-wash);

  /* Ink */
  --ink:var(--deep-ink-0);
  --ink-2:var(--deep-ink);
  --ink-3:var(--deep-ink-2);

  /* Rules */
  --line:var(--deep-line);
  --line-2:var(--deep-line-2);
  --ctl-line:#7c7264;

  /* The accents have to flip too. --brand-deep is the text-weight blue, so on
     paper it is the dark one and here it is the light one. Leave these alone
     and every eyebrow, link, metric value and tick mark sinks into the ground. */
  --brand:#93a9ea;
  --brand-deep:#aabdf3;
  --brand-tint:#232a3c;
  --brand-wash:var(--deep-band);
  --brand-line:#3f4762;
  --on-brand:var(--deep);
  --clay:#e0a87f;
  --clay-tint:#2e241c;
  --clay-line:#4a382a;
  --ok:#7ec6a0;

  /* Warm paper shadows read as brown smudges on dark ground. */
  --shadow-1:0 1px 2px rgba(0,0,0,.34);
  --shadow-2:0 1px 2px rgba(0,0,0,.3),0 12px 28px -14px rgba(0,0,0,.75);
  --shadow-3:0 2px 4px rgba(0,0,0,.32),0 22px 48px -20px rgba(0,0,0,.85);
}
.sec-deep{background:var(--paper);color:var(--ink)}
/* Stacked deep sections read as one ground, so the join loses its double gap.
   Scoped to .sec so a deep hero keeps the taller opening padding it sets. */
.sec.sec-deep+.sec.sec-deep{padding-top:0}
/* Monospace micro-label. Instrumentation, not a heading: section numbers,
   node names, chip labels, column keys. */
.mono-label{
  font-family:var(--mono);
  font-size:var(--t--2);
  font-weight:500;
  line-height:1.4;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--ink-3);
}

/* Two-tone heading. The verb carries at full ink, the qualifier recedes.
   Colour does the work, so the weight must not jump with it. */
.h-split{color:var(--ink-3)}
.h-split :is(strong,b){font-weight:inherit;color:var(--ink)}

/* A panel on deep ground. Uses the raw --deep-* values, so it also works as a
   dark inset dropped onto a light page, and inverts its own contents. */
.deep-panel{
  --paper:var(--deep-panel);   /* the panel is its own ground */
  --surface:#37312a;           /* so anything nested still floats above it */
  background:var(--deep-panel);
  color:var(--ink);
  border:1px solid var(--deep-line);
  border-radius:var(--r-lg);
  padding:clamp(1.4rem,1.05rem + 1.1vw,1.9rem);
}

/* ============================================================
   23 · Responsive
   ============================================================ */
@media (max-width:1120px){
  /* Brand block takes its own row so the nav columns stay on one line. */
  .foot-brand{flex:1 1 100%;min-width:0;max-width:560px}
}
@media (max-width:1024px){
  .mega-inner{grid-template-columns:minmax(180px,.9fr) 1.9fr}
}
@media (max-width:960px){
  .desktop-nav{display:none}
  .menu-toggle{display:block}
  .mobile-nav{display:block}
  .mobile-nav[hidden]{display:none}
  .hero-grid,.split,.calc{grid-template-columns:minmax(0,1fr)}
  .hero-grid{align-items:start}
  .hero-main h1,.hero-sub{max-width:26ch}
  .hero-sub{max-width:58ch}
  .calc-inputs{position:static;max-height:none;overflow:visible}
  .sec-steps>.wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .sec-steps>.wrap>.sec-head{position:static;margin-bottom:2.25rem}
  .header-inner{gap:.75rem}
  .header-actions{margin-left:auto}
  .cta-box{gap:1.25rem}
}
@media (max-width:640px){
  .sec-head{margin-bottom:1.85rem}
  .hero-main h1,.hero-sub{max-width:none}
  .trustbar .tag{margin-left:0}
  .cards,.cards.cols-2,.cards.cols-4{grid-template-columns:minmax(0,1fr)}
  .metrics{grid-template-columns:minmax(0,1fr)}
  .card,.panel,.hero-aside,.metric,.calc-card,.calc-inputs{padding:1.35rem 1.25rem}
  .quote{padding:3rem 1.35rem 1.5rem}
  .quote::before{left:1.2rem;font-size:3rem}
  .faq{padding:0 1.15rem}
  .calc-sources{padding:1.35rem 1.35rem}
  .foot-brand{flex:1 1 100%;max-width:none}
  .foot-compact{align-items:flex-start;flex-direction:column;gap:1.5rem}
  .foot-compact-nav{justify-content:flex-start}
  .foot-compact-fine{flex-direction:column}
}
@media (max-width:600px){
  .header-actions .btn-primary{display:none}
}
@media (max-width:480px){
  .steps{--step-mark-w:2.4rem}
  .steps li{gap:.9rem}
  .steps li::before{left:calc(var(--step-mark-w) / 2 - 1px);top:2.75rem;bottom:-1.95rem}
  .step-mark{height:2.4rem;font-size:.875rem}
  .step-body{padding-top:.15rem}
  .cta-box{flex-direction:column;align-items:flex-start}
  .cta-box .btn-row{width:100%}
  .cta-box .btn{flex:1 1 auto}
  .page-subpage .cta-box .btn{width:100%;white-space:normal;text-align:center}
  .btn{padding:.75rem 1.2rem}
}
/* Short viewports: never let the sticky header eat the screen. */
@media (max-height:520px){
  .site-header{position:static}
  .mobile-nav{max-height:none}
}
@media (prefers-reduced-motion:reduce){
  /* Blanket kill for decorative motion. */
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}

  /* Carve-out. Any component whose visible state is DRIVEN by a keyframe or a
     transition would otherwise be stranded in its start state by the rule above,
     leaving reduced-motion users with permanently invisible content. Components
     opting into `.motion-reveal` must therefore declare their finished state
     here rather than relying on the animation ever running. Scripts must also
     check the media query themselves and take the instant path; shortening a
     duration is not the same as skipping an animation the script is driving. */
  .motion-reveal{opacity:1 !important;transform:none !important;visibility:visible !important;clip-path:none !important}
}

/* Default and offset states stay painted. Motion adds only a short transform,
   so static captures and interrupted observers never produce blank sections. */
.motion-reveal{opacity:1;transform:none}
.motion-pending{opacity:1;transform:translateY(8px);transition:transform .34s var(--ease)}
.motion-pending.is-in{opacity:1;transform:none}

/* ============================================================
   Editorial illustration
   Abstract commissioned artwork only. This site ships no
   photographs of people; see lib/blocks/media.mjs.
   ============================================================ */
.sec-figure{padding-block:clamp(1.5rem,1rem + 2vw,3rem)}
.fig{margin:0}
.fig-img{
  display:block;width:100%;height:auto;
  border-radius:var(--r-xl);
  background:var(--band);
  border:1px solid var(--line);
}
.fig figcaption{
  margin-top:.9rem;font-size:var(--t--1);color:var(--ink-3);
  max-width:62ch;
}
.fig-inset{max-width:640px;margin-inline:auto}
.fig-wide{max-width:900px;margin-inline:auto}
.fig-full{max-width:none}

.figsplit{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.25rem);
  align-items:center;
}
.figsplit-flip .fig{order:2}
.figsplit-copy>.eyebrow{margin-bottom:.6rem}
.figsplit-copy p{color:var(--ink-2)}
.figsplit-copy .tag{margin-top:1rem}

@media (max-width:860px){
  .figsplit{grid-template-columns:1fr}
  .figsplit-flip .fig{order:0}
}

/* Table caption and narrow-screen definition-row reflow. Wide prose tables
   reflow earlier; two-column comparisons keep their table shape until mobile. */
table caption{
  caption-side:top;text-align:left;
  padding:.9rem 1.1rem 0;
  font-size:var(--t--1);color:var(--ink-3);
}
@media (max-width:640px){
  .table-scroll{overflow-x:visible;border:0;background:none;border-radius:0}
  .table-scroll table{min-width:0;width:100%;display:block}
  .table-scroll thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table-scroll caption{padding-left:0}
  .table-scroll tbody{display:block}
  .table-scroll tr{
    display:grid;grid-template-columns:minmax(6.5rem,.72fr) minmax(0,1.35fr);
    column-gap:1rem;margin:0;padding:.9rem 0;border-bottom:1px solid var(--line);
  }
  .table-scroll tr:first-child{border-top:1px solid var(--line)}
  .table-scroll :is(th,td){display:block;border:0;padding:.2rem 0}
  .table-scroll th[scope="row"]{grid-column:1;grid-row:1 / span 12;font-size:.96rem}
  .table-scroll td{grid-column:2}
  .table-scroll td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-size:var(--t--2);font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink-3);margin-bottom:.1rem;
  }
  .table-scroll td:only-of-type::before{display:none}
}

@media (min-width:641px) and (max-width:900px){
  .table-scroll.table-wide{overflow-x:visible;border:0;background:none;border-radius:0}
  .table-scroll.table-wide table{min-width:0;width:100%;display:block}
  .table-scroll.table-wide thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table-scroll.table-wide caption{padding-left:0}
  .table-scroll.table-wide tbody{display:block}
  .table-scroll.table-wide tr{
    display:grid;grid-template-columns:minmax(10rem,.65fr) minmax(0,1.55fr);
    column-gap:1.35rem;margin:0;padding:1rem 0;border-bottom:1px solid var(--line);
  }
  .table-scroll.table-wide tr:first-child{border-top:1px solid var(--line)}
  .table-scroll.table-wide :is(th,td){display:block;border:0;padding:.2rem 0}
  .table-scroll.table-wide th[scope="row"]{grid-column:1;grid-row:1 / span 12;font-size:1rem}
  .table-scroll.table-wide td{grid-column:2}
  .table-scroll.table-wide td[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:.1rem;
    font-size:var(--t--2);font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  }
}

/* ============================================================
   Journey grid
   Time runs left to right, care layers stack top to bottom. The
   argument is visible because the admin row is all ticks while the
   row above it never resolves.
   ============================================================ */
.sec-journey .sec-head{margin-bottom:1.75rem}
.jr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.jr-scroll:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r)}
table.jr{border-collapse:separate;border-spacing:0;width:100%;min-width:720px}
table.jr thead th{
  font-family:var(--sans);font-size:var(--t--2);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:0 0 .8rem .9rem;vertical-align:bottom;
}
.jr-corner{width:clamp(150px,17vw,210px)}
table.jr tbody th{
  text-align:left;vertical-align:middle;
  padding:.9rem 1.1rem .9rem 0;
  border-top:1px solid var(--line);
}
.jr-rowlabel{display:block;font-size:.95rem;font-weight:800;color:var(--ink)}
.jr-rowsub{display:block;font-size:var(--t--2);color:var(--ink-3);margin-top:.15rem;font-weight:600}
.jr-cell{
  border-top:1px solid var(--line);
  padding:.75rem .9rem;vertical-align:middle;
  font-size:.9rem;color:var(--ink-2);
}
.jr-cell .jr-mark{display:inline-flex;width:19px;height:19px;margin-right:.5rem;vertical-align:-4px;border-radius:50%;align-items:center;justify-content:center;flex:none}
.jr-cell .jr-mark svg{width:12px;height:12px}
.jr-txt{display:inline}
.jr-ok .jr-mark{background:rgba(47,107,76,.12);color:var(--ok)}
.jr-fail .jr-mark{background:rgba(161,85,47,.14);color:var(--ink)}
.jr-risk .jr-mark{background:rgba(161,85,47,.14);color:var(--ink)}
.jr-ok{color:var(--ink-2)}
.jr-fail{color:var(--ink)}
.jr-fail .jr-txt{font-weight:700}
/* The hidden-need row is the point of the whole grid. */
.jr-row-risk th,.jr-row-risk .jr-cell{background:var(--clay-tint)}
.jr-row-risk .jr-rowlabel{color:var(--ink)}
.jr-row-risk .jr-txt{color:var(--ink);font-weight:700}
.jr-row-muted .jr-rowlabel{color:var(--ink-2)}
.jr-note{margin-top:1.1rem;font-size:var(--t--1);color:var(--ink-3);max-width:70ch}

@media (max-width:640px){
  table.jr{min-width:560px}
  .jr-corner{width:130px}
  .jr-cell,table.jr tbody th{padding-block:.65rem}
}

/* Journey grid needs substantially more room than an ordinary table because
   the four time columns contain sentences, not numbers. Reflow it before those
   cells begin wrapping into tall, disconnected fragments. */
@media (max-width:1024px){
  .jr-scroll{overflow-x:visible}
  table.jr{min-width:0;width:100%;display:block}
  table.jr thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.jr tbody{display:block}
  .jr-row{
    display:grid;grid-template-columns:minmax(10rem,.7fr) minmax(0,1.6fr);
    gap:.55rem 1.2rem;margin:0;padding:1rem 0;border-top:1px solid var(--line);
  }
  .jr-row:last-child{border-bottom:1px solid var(--line)}
  .jr-row-risk{margin-inline:-.75rem;padding-inline:.75rem;background:var(--clay-tint)}
  table.jr tbody th{display:block;grid-column:1;grid-row:1 / span 8;border:0;padding:0}
  .jr-cell{display:grid;grid-column:2;grid-template-columns:7.4rem 1.25rem minmax(0,1fr);gap:.35rem;align-items:start;border:0;padding:.08rem 0}
  .jr-cell.jr-empty{display:none}
  .jr-cell[data-col]::before{
    content:attr(data-col);
    display:block;
    font-size:var(--t--2);font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink-3);margin:0;
  }
  .jr-cell .jr-mark{margin:0}
}

@media (max-width:640px){
  .jr-row{display:block;padding:.9rem 0}
  .jr-row-risk{margin-inline:-.5rem;padding-inline:.5rem}
  table.jr tbody th{padding-bottom:.55rem}
  .jr-cell{grid-template-columns:minmax(6.6rem,.8fr) 1.25rem minmax(0,1.3fr);padding:.22rem 0}
}

/* ============================================================
   24 · Shared subpage visual system — C-2026-08-21-02
   The homepage's visual argument, translated into an inspection-first shell.
   ============================================================ */
.page-subpage .site-header{
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  border-bottom:1px solid rgba(23,37,31,.12);
  box-shadow:none;
}
.page-subpage .brand{color:var(--ink)}
.page-subpage .brand{min-height:44px;align-items:center}
.page-subpage .brand span{font-family:var(--sans);font-weight:700;letter-spacing:-.06em}
.page-subpage .brand i{color:var(--brand)}
.page-subpage .nav-trigger{min-height:44px;font-size:.8rem}
.page-subpage .menu-toggle{min-width:44px;min-height:44px}
.page-subpage .header-actions .btn-primary,.page-subpage .mobile-nav>.btn-primary{
  min-height:44px;background:var(--ink);color:var(--surface);border-color:var(--ink);box-shadow:none;
}
.page-subpage .header-actions .btn-primary:hover,.page-subpage .mobile-nav>.btn-primary:hover{background:#26382f;color:var(--surface)}
.page-subpage .mega{box-shadow:8px 10px 0 rgba(23,37,31,.1)}
.page-subpage .breadcrumb{padding-top:1.35rem}

.page-subpage .hero{padding:clamp(2.5rem,3.2vw,3.75rem) 0 clamp(3.25rem,4.5vw,5rem)}
.page-subpage .hero-grid{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,3.5vw,3.5rem);align-items:end}
.page-subpage .hero-grid-aside{grid-template-columns:minmax(0,1.65fr) minmax(19rem,.75fr)}
.page-subpage .hero-grid-solo .hero-main{width:min(64rem,100%)}
.page-subpage .hero-main h1{
  max-width:18ch;margin-bottom:.38em;
  font-size:clamp(2.65rem,calc(1.75rem + 2.5vw),4.8rem);font-weight:560;line-height:.94;letter-spacing:-.055em;
  overflow-wrap:anywhere;min-width:0;
}
.page-subpage .hero-sub{max-width:44ch;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.52}
.page-subpage .hero-foot{border-top-color:rgba(23,37,31,.16)}
.page-subpage .hero-aside{
  padding:1rem 1.1rem;background:rgba(255,253,248,.54);border-color:rgba(23,37,31,.2);border-radius:16px;box-shadow:none;
}
.page-subpage .hero-aside .eyebrow{margin-bottom:.75rem;padding-bottom:.55rem}
.page-subpage .hero-aside ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1rem}
.page-subpage .hero-aside li{font-size:.78rem;line-height:1.4}

/* Care-setting heroes use the full canvas: argument on top, buyer roster below. */
.page-group-care-settings .hero-grid-aside{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,2.5vw,2.25rem)}
.page-group-care-settings .hero-main{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr);
  column-gap:clamp(2.5rem,5vw,5rem);align-items:end;
}
.page-group-care-settings .hero-title{grid-column:1;align-self:start}
.page-group-care-settings .hero-title h1{max-width:16ch;margin-bottom:0}
.page-group-care-settings .hero-detail{grid-column:2;align-self:end}
.page-group-care-settings .hero-detail .hero-sub{max-width:38ch}
.page-group-care-settings .hero-detail .btn-row{margin-top:1.25rem}
.page-group-care-settings .hero-aside{
  width:100%;padding:1rem 0;background:transparent;border-inline:0;border-radius:0;
}
.page-group-care-settings .hero-aside .eyebrow{margin-bottom:.75rem;padding:0 0 .65rem}
.page-group-care-settings .hero-aside ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.page-group-care-settings .hero-aside li{min-height:3.25rem;padding:.25rem 1rem .25rem 1.5rem;font-size:.875rem}
.page-group-care-settings .hero-aside li:not(:first-child){border-inline-start:1px solid var(--line)}

.page-subpage .sec{padding-block:clamp(4rem,5.5vw,6.25rem)}
.page-subpage .sec-head{max-width:70ch;margin-bottom:clamp(2rem,3vw,3rem)}
.page-subpage .sec-head h2{max-width:18ch;font-size:clamp(2.5rem,4.2vw,4.4rem);font-weight:540;line-height:.96;letter-spacing:-.055em}
.page-subpage .wrap.narrow .sec-head h2{max-width:16ch}
.page-subpage .eyebrow{letter-spacing:.14em}
.page-subpage .sec-head>.eyebrow::before,.page-subpage .hero-title>.eyebrow::before{width:2.1rem;background:var(--clay)}
.page-subpage .lede{font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.55}
.page-subpage .sec-prose,.page-subpage .sec-steps,.page-subpage .sec-calc{background:var(--lilac)}
.page-subpage .sec-quote{background:#f5e8bd}
.page-subpage .sec-metrics{background:var(--ink);color:var(--paper)}
.page-subpage .sec-metrics :is(h2,h3,strong){color:var(--paper)}
.page-subpage .sec-metrics :is(.lede,.metric-ctx,.metric-src){color:#b9c2bd}
.page-subpage .sec-metrics .eyebrow,.page-subpage .metric-value{color:var(--signal)}

.page-subpage .card,.page-subpage .metric,.page-subpage .panel,.page-subpage .calc-card,.page-subpage .calc-inputs{
  box-shadow:none;border:1.5px solid rgba(23,37,31,.22);border-radius:18px;
}
.page-subpage .card{background:color-mix(in srgb,var(--surface) 62%,transparent);transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease)}
.page-subpage .card-link:hover{transform:translateY(-4px);box-shadow:8px 10px 0 rgba(23,37,31,.1);background:var(--surface)}
.page-subpage .card h3{font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.08;letter-spacing:-.035em}
.page-subpage .metric{background:transparent;border-color:rgba(255,255,255,.22)}
.page-subpage .metric-value{font-family:var(--sans);font-size:clamp(3rem,5vw,5rem);font-weight:620;letter-spacing:-.065em}
.page-subpage .calc-value{font-family:var(--sans)}
.page-subpage .table-scroll{border:1.5px solid rgba(23,37,31,.22);box-shadow:none}
.page-subpage .step-mark{background:var(--clay);color:var(--ink);border-color:var(--ink);box-shadow:none}
.page-subpage .steps li:nth-child(3n) .step-mark{background:var(--brand);color:#fff}
.page-subpage .steps li:nth-child(3n + 2) .step-mark{background:var(--signal);color:var(--ink)}
.page-subpage .sec-cta{
  padding:clamp(4rem,7vw,7rem) 0;background:var(--clay);color:var(--ink);
}
.page-subpage .cta-box{
  width:100%;max-width:none;border-radius:0;padding:0;
  background:transparent;color:inherit;box-shadow:none;
}
.page-subpage .cta-box h2{max-width:13ch;color:var(--ink);font-size:clamp(3rem,5.4vw,5.8rem);font-weight:540;line-height:.91;letter-spacing:-.06em}
.page-subpage .cta-box p{color:var(--ink)}
.page-subpage .cta-box .btn-primary{background:var(--ink);color:var(--surface);box-shadow:none}
.page-subpage .cta-box .btn-primary:hover{background:#26382f;color:var(--surface)}
.page-subpage .cta-box .btn-ghost{border-color:rgba(23,37,31,.65);color:var(--ink)}
.page-subpage .cta-box .btn-ghost:hover{background:rgba(23,37,31,.08);border-color:var(--ink);color:var(--ink)}
.page-subpage .cta-box :focus-visible{outline-color:var(--ink)}
.page-subpage .site-footer{margin-top:0;background:var(--ink)}
.page-subpage .site-footer .brand{color:var(--paper)}
.page-subpage .site-footer .brand span{color:var(--paper)}
.page-subpage .site-footer .brand i{color:var(--brand)}
.page-subpage .foot-label{color:var(--signal)}

@media (max-width:1080px){
  .page-subpage .hero-grid-aside{grid-template-columns:minmax(0,1fr);gap:2rem}
  .page-subpage .hero-main h1{max-width:18ch}
  .page-subpage .hero-aside{width:min(100%,42rem);justify-self:start}
  .page-group-care-settings .hero-main{display:block}
  .page-group-care-settings .hero-title h1{margin-bottom:.38em}
  .page-group-care-settings .hero-aside{width:100%;max-width:none}
  .page-group-care-settings .hero-aside ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-group-care-settings .hero-aside li:nth-child(odd){border-inline-start:0}
}
@media (max-width:640px){
  .page-subpage .hero{padding:2.5rem 0 3.25rem}
  .page-subpage .hero-main h1{
    max-width:none;font-size:clamp(2.35rem,10.5vw,2.65rem);
    letter-spacing:-.045em;text-wrap:wrap;
  }
  .page-subpage .hero-sub,.page-subpage .hero-foot{text-wrap:wrap}
  .page-subpage .hero-main .btn-row{display:grid;grid-template-columns:minmax(0,1fr)}
  .page-subpage .hero-main .btn{width:100%;max-width:100%}
  .page-subpage .hero-aside ul{grid-template-columns:1fr}
  .page-group-care-settings .hero{padding:2.25rem 0 3rem}
  .page-group-care-settings .hero-aside li{min-height:auto;padding:.65rem 0 .65rem 1.5rem;border-inline-start:0}
  .page-group-care-settings .hero-aside li+li{border-top:1px solid var(--line)}
  .page-subpage .sec-head h2,.page-subpage .wrap.narrow .sec-head h2{max-width:none;font-size:clamp(2.25rem,10vw,3.4rem)}
  .page-subpage .cta-box h2{font-size:clamp(2.8rem,12vw,4rem)}
}