/* ══════════════════════════════════════════════════════════════════════════
   GrownUps — pattern styles (W1)
   Ported verbatim from design-reference/homepage-reference.html (the visual
   authority, §3.8). Every var() here resolves through the :root alias block in
   inc/tokens.php to a config-derived, contrast-gated preset — nothing is
   hard-coded. Do not add raw hex / px / ms values here; add a token in config/.
   ════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────  base  ───── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:6.5rem}  /* clear the fixed pill nav on anchor jumps */
body{
  margin:0; background:var(--base); color:var(--ink);
  font:var(--fs-base)/1.62 var(--font-body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:600; line-height:1.06; letter-spacing:-.028em}
h3,h4{line-height:1.18; letter-spacing:-.015em}
p{margin:0} ul{margin:0}
img{display:block; max-width:100%}
a{color:inherit}
em.serif{font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--accent-strong)}

.wrap{width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--gutter)}
.sec{padding-block:var(--s-3xl); position:relative}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2)}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor; opacity:.5}
.lede{font-size:var(--fs-lead); line-height:1.5; color:var(--ink-2); max-width:44ch}
.grain{position:absolute; inset:0; background-image:var(--noise); opacity:.045;
  pointer-events:none; mix-blend-mode:multiply; z-index:1}
.rel{position:relative; z-index:2}

/* WordPress integration: full-bleed sections carry their own vertical padding, so
   remove the root block-gap that would otherwise show a --base strip between
   adjacent bands (e.g. the amber CTA and the dark footer). Matches the reference,
   where sections sit flush. */
.wp-site-blocks > *{ margin-block:0 }
/* Full-bleed sections inside the post content must butt flush — otherwise the
   block-gap leaves a --base strip between adjacent coloured bands. Each section
   carries its own vertical padding, so zero the inter-section margin. */
.wp-block-post-content > *, .gu-doc > *, main.wp-block-group > *{ margin-block:0 !important }
/* Zero the content group's own padding so the first band sits flush under the
   fixed nav (its own top padding clears it) and the last band butts flush against
   the CTA — otherwise theme.json's group padding shows a --base bar top & bottom. */
main.wp-block-group{ padding-block:0 }

/* ─────────────────────────────────────────────────────────  buttons  ── */
.btn{
  --bg:var(--accent); --fg:var(--ink-inverse);
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.6rem; border:0; border-radius:var(--r-pill); cursor:pointer;
  background:var(--bg); color:var(--fg); text-decoration:none;
  font:600 var(--fs-sm)/1 var(--font-body); letter-spacing:-.005em; white-space:nowrap;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sh-md)}
.btn:active{transform:translateY(0)}
.btn .ar{transition:transform var(--t-base) var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--ghost{--bg:transparent; --fg:var(--ink); box-shadow:inset 0 0 0 1px var(--border-strong)}
.btn--ghost:hover{--bg:var(--surface)}
.btn--light{--bg:var(--base); --fg:var(--primary)}
.btn--teal{--bg:var(--primary); --fg:var(--ink-inverse)}
.btns{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}

/* ═══════════════════════════════════════════  NAV  (Phantom pattern)  ══ */
.progress{position:fixed; inset:0 auto auto 0; height:2px; width:0%; z-index:120;
  background:linear-gradient(90deg,var(--primary),var(--accent))}

.navwrap{position:fixed; inset:0 0 auto 0; z-index:100; padding:1rem var(--gutter);
  transition:padding var(--t-slow) var(--ease)}
.navwrap.stuck{padding-top:.6rem}
.nav{
  max-width:var(--wide); margin-inline:auto; display:flex; align-items:center; gap:.35rem;
  padding:.55rem .55rem .55rem 1.1rem; border-radius:var(--r-pill);
  background:transparent; border:1px solid transparent;
  transition:background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease),
             box-shadow var(--t-slow) var(--ease), max-width var(--t-slow) var(--ease),
             backdrop-filter var(--t-slow) var(--ease);
}
.navwrap.stuck .nav{
  max-width:min(62rem,100%);
  background:color-mix(in srgb,var(--base) 80%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-color:var(--border); box-shadow:var(--sh-lg);
}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none;
  font:700 1.16rem/1 var(--font-display); letter-spacing:-.035em; color:var(--ink); flex:none}
.brand svg{width:28px; height:28px}
.navlinks{display:none; list-style:none; padding:0; margin:0 auto; gap:.15rem}
.navlinks>li{position:relative}
.navbtn{
  display:inline-flex; align-items:center; gap:.3rem; padding:.55rem .8rem;
  border:0; background:transparent; border-radius:var(--r-pill); cursor:pointer;
  font:500 var(--fs-sm)/1 var(--font-body); color:var(--ink-2); text-decoration:none;
  transition:color var(--t-fast), background var(--t-fast)}
.navbtn:hover, li.open>.navbtn{color:var(--ink); background:color-mix(in srgb,var(--ink) 6%,transparent)}
.navbtn svg{transition:transform var(--t-base) var(--ease)}
li.open>.navbtn svg{transform:rotate(180deg)}
.navcta{margin-left:auto}
@media(min-width:1024px){ .navlinks{display:flex} .navcta{margin-left:0} }

/* mega panel — scoped to the nav so it never collides with the hero h1.mega
   headline (which shares the class name). The mock's nav has no dropdowns, so it
   never hit this; the live nav does. */
.navlinks .mega{
  position:absolute; top:calc(100% + .7rem); left:50%; z-index:5;
  width:min(46rem,88vw); padding:1.1rem; border-radius:var(--r-xl);
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border); box-shadow:var(--sh-xl);
  display:grid; gap:1rem; grid-template-columns:1.25fr .75fr;
  opacity:0; visibility:hidden; transform:translate(-50%,-10px) scale(.97);
  transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease),
             visibility var(--t-base);
}
li.open>.mega{opacity:1; visibility:visible; transform:translate(-50%,0) scale(1)}
.mega--wide{width:min(60rem,92vw)}
.megalist{display:grid; gap:.15rem; grid-template-columns:1fr 1fr}
.megaitem{display:flex; gap:.75rem; padding:.7rem; border-radius:var(--r-md);
  text-decoration:none; transition:background var(--t-fast)}
.megaitem:hover{background:var(--base-2)}
.megaicon{flex:none; width:36px; height:36px; border-radius:10px; display:inline-grid; place-content:center; place-items:center;
  background:var(--primary-soft); color:var(--primary)}
.megaicon svg{display:block; margin:auto}
.megaitem b{display:block; font-size:var(--fs-sm); font-weight:600; letter-spacing:-.01em}
.megaitem span{display:block; font-size:var(--fs-xs); color:var(--ink-2); line-height:1.45; margin-top:.1rem}
.megafeat{position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:200px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.1rem;
  color:#fff; text-decoration:none; background:var(--primary)}
.megafeat img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-vslow) var(--ease)}
.megafeat:hover img{transform:scale(1.06)}
.megafeat::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,26,25,.05),rgba(11,26,25,.88))}
.megafeat>*{position:relative; z-index:2}
.megafeat small{font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; opacity:.8}
.megafeat b{font:600 1.05rem/1.25 var(--font-display); letter-spacing:-.02em; margin-top:.3rem; display:block}
@media(max-width:1023px){.navlinks .mega{display:none}}

/* hamburger + full-screen mobile menu (§6.4) */
.burger{display:none; place-items:center; width:48px; height:48px; margin-left:auto;
  border:0; background:transparent; color:var(--ink); cursor:pointer; border-radius:var(--r-pill)}
.burger:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
@media(max-width:1023px){ .burger{display:grid} .navcta{display:none} }

.msheet{position:fixed; inset:0; z-index:130; background:var(--base);
  display:flex; flex-direction:column; padding:calc(var(--gutter) + .5rem) var(--gutter) var(--gutter);
  opacity:0; visibility:hidden; transform:translateY(10px); overflow-y:auto;
  transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base)}
.msheet.open{opacity:1; visibility:visible; transform:none}
@media(min-width:1024px){ .msheet{display:none} }
.msheet-top{display:flex; justify-content:space-between; align-items:center}
.msheet-close{width:48px; height:48px; border:0; background:transparent; color:var(--ink);
  cursor:pointer; border-radius:var(--r-pill); display:grid; place-items:center}
.msheet-close:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.msheet-nav{margin-top:auto; display:grid}                 /* primary items in the lower two-thirds */
.macc{border-top:1px solid var(--border)}
.macc>button{width:100%; min-height:60px; display:flex; justify-content:space-between; align-items:center;
  padding:1rem .25rem; border:0; background:transparent; color:var(--ink); cursor:pointer; text-align:left;
  font:600 var(--fs-h3)/1.1 var(--font-display); letter-spacing:-.015em}
.macc>button svg{flex:none; transition:transform var(--t-base) var(--ease)}
.macc.open>button svg{transform:rotate(180deg)}
.macc-body{display:grid; overflow:hidden; max-height:0; transition:max-height var(--t-base) var(--ease)}
.macc.open .macc-body{max-height:32rem}
.macc-body a{display:block; min-height:48px; padding:.7rem .25rem; text-decoration:none}
.macc-body a b{display:block; color:var(--ink); font-weight:600; font-size:var(--fs-base)}
.macc-body a span{display:block; color:var(--ink-2); font-size:var(--fs-sm); line-height:1.4}
.msheet-links{display:grid}
.msheet-links a{min-height:60px; display:flex; align-items:center; padding:1rem .25rem;
  border-top:1px solid var(--border); text-decoration:none; color:var(--ink);
  font:600 var(--fs-h3)/1.1 var(--font-display); letter-spacing:-.015em}
.msheet-cta{margin-top:var(--s-lg); display:grid; gap:.6rem}
.msheet-cta .btn{width:100%; justify-content:center; min-height:52px}
@media(prefers-reduced-motion:reduce){ .msheet,.macc-body,.macc>button svg{transition:none} }

/* ═════════════════════════════════════════════════════════  HERO  ═════ */
.hero{position:relative; padding-block:clamp(7rem,13vw,9.5rem) var(--s-2xl); overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55}
.blob-1{width:46vw; height:46vw; left:-12vw; top:-14vw; background:var(--primary-soft)}
.blob-2{width:38vw; height:38vw; right:-8vw; top:-6vw; background:var(--f-clay)}
.blob-3{width:34vw; height:34vw; left:34vw; top:24vw; background:var(--f-lilac); opacity:.42}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-2xl); align-items:center; position:relative; z-index:2}
/* Explicit minmax(0,1fr) single column + min-width:0 children so a long hero
   headline wraps to the viewport instead of overflowing it (grid auto-track). */
.hero-grid>*{min-width:0}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.02fr .98fr; gap:var(--s-xl)}}

h1.mega{font-size:var(--fs-mega); letter-spacing:-.042em; line-height:.94}
.line{display:block; overflow:hidden}
.line>span{display:block; transform:translateY(105%); opacity:0;
  transition:transform 1s var(--ease-io), opacity .7s ease}
.loaded .line>span{transform:none; opacity:1}
.loaded .line:nth-child(2)>span{transition-delay:.09s}
.loaded .line:nth-child(3)>span{transition-delay:.18s}
.fade-up{opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease) .4s, transform .8s var(--ease) .4s}
.loaded .fade-up{opacity:1; transform:none}
.hero .lede{margin-top:1.4rem}
.hero .btns{margin-top:1.8rem}
.microcopy{margin-top:1rem; font-size:var(--fs-sm); color:var(--ink-2); display:flex; gap:1.1rem; flex-wrap:wrap}
.microcopy b{display:inline-flex; align-items:center; gap:.35rem; font-weight:500; color:var(--ink-2)}
.microcopy svg{color:var(--success)}

/* stage: phone + floating chips */
.stage{position:relative; perspective:1400px; padding:1.5rem}
.phone{
  position:relative; z-index:3; width:min(310px,84%); margin-inline:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:38px;
  box-shadow:var(--sh-xl), 0 0 0 8px color-mix(in srgb,var(--ink) 5%,transparent);
  padding:1.1rem .9rem 1.3rem;
  transform:rotateY(-9deg) rotateX(3deg) rotate(1.2deg);
  transition:transform var(--t-vslow) var(--ease);
}
.stage:hover .phone{transform:rotateY(-4deg) rotateX(1deg) rotate(.4deg)}
.notch{width:74px; height:5px; border-radius:99px; background:var(--ink); opacity:.14; margin:0 auto 1rem}
.calhead{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.65rem}
.calhead b{font:600 1.1rem/1 var(--font-display); letter-spacing:-.03em}
.calhead span{font-size:.7rem; color:var(--ink-2)}
.dow{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px}
.dow span{font-size:.58rem; text-align:center; color:var(--ink-2); letter-spacing:.08em}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.d{aspect-ratio:1; border-radius:7px; display:flex; flex-direction:column; gap:1px;
  align-items:center; justify-content:center; font:700 .66rem/1 var(--font-body);
  background:var(--base-2); border-left:3px solid transparent; color:var(--ink);
  opacity:0; transform:scale(.7)}
.cal.go .d{animation:pop .42s var(--ease) forwards}
@keyframes pop{to{opacity:1; transform:none}}
.d.a{background:var(--parent-a-soft); border-left-color:var(--parent-a)}
.d.b{background:var(--parent-b-soft); border-left-color:var(--parent-b)}
.d i{font-style:normal; font-size:.46rem; font-weight:800; opacity:.7}
.d.blank{background:transparent; border:0}
.legend{display:flex; gap:1rem; margin-top:.8rem; font-size:.72rem; color:var(--ink-2)}
.legend b{display:inline-flex; gap:.35rem; align-items:center; color:var(--ink); font-weight:600}
.sw{width:13px; height:13px; border-radius:4px; border-left:3px solid}
.sw-a{background:var(--parent-a-soft); border-left-color:var(--parent-a)}
.sw-b{background:var(--parent-b-soft); border-left-color:var(--parent-b)}

.chip{
  position:absolute; z-index:4; display:flex; gap:.6rem; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:.65rem .8rem; box-shadow:var(--sh-lg); font-size:.78rem; line-height:1.3;
  opacity:0; transform:translateY(16px) scale(.94);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.loaded .chip{opacity:1; transform:none}
.loaded .chip-1{transition-delay:.7s} .loaded .chip-2{transition-delay:.9s}
.loaded .chip-3{transition-delay:1.1s}
.chip b{display:block; font-weight:600}
.chip s{display:block; text-decoration:none; color:var(--ink-2); font-size:.72rem}
.chip .dot{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none}
.chip-1{left:-2%; top:16%; animation:float1 7s ease-in-out infinite 1.4s}
.chip-2{right:-4%; top:44%; animation:float2 8s ease-in-out infinite 1.6s}
.chip-3{left:2%; bottom:9%; animation:float1 9s ease-in-out infinite 1.8s}
@keyframes float1{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes float2{0%,100%{translate:0 0}50%{translate:0 12px}}
@media(max-width:640px){.chip-1,.chip-3{left:-4%} .chip-2{right:-6%} .chip{font-size:.7rem; padding:.5rem .6rem}}

/* ══════════════════════════════════════════════  MARQUEE (Ease)  ══════ */
.marquee{border-block:1px solid var(--border); background:var(--base-2);
  padding-block:1.1rem; overflow:hidden; position:relative}
.marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; width:12vw; z-index:2}
.marquee::before{left:0; background:linear-gradient(90deg,var(--base-2),transparent)}
.marquee::after{right:0; background:linear-gradient(270deg,var(--base-2),transparent)}
.track{display:flex; gap:.7rem; width:max-content; animation:slide 46s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tag{display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  padding:.5rem 1rem; border-radius:var(--r-pill); background:var(--surface);
  border:1px solid var(--border); font-size:var(--fs-sm); font-weight:500; color:var(--ink-2)}
.tag em{font-style:normal; color:var(--primary); font-weight:700}

/* ════════════════════════════════════════════════  ANSWER-FIRST  ══════ */
.answer{
  position:relative; max-width:60rem; margin-inline:auto; padding:clamp(1.5rem,4vw,2.75rem);
  border-radius:var(--r-2xl); background:var(--surface);
  box-shadow:var(--sh-md); border:1px solid var(--border);
  font-size:clamp(1.1rem,.95rem + .7vw,1.6rem); line-height:1.42; letter-spacing:-.02em;
  font-family:var(--font-display); font-weight:400;
}
.answer::before{content:"\201C"; position:absolute; left:.35em; top:-.32em;
  font:400 7rem/1 var(--font-serif); color:var(--accent); opacity:.16}

/* Hero variant (schedule pages): the answer sits as a framed card beside the
   headline rather than a full-width block underneath. Fills its column, a small
   kicker names it, and the decorative quote is contained — no oversized glyph. */
.answer--hero{margin:0; max-width:none; font-size:clamp(1.02rem,.9rem + .5vw,1.35rem)}
.answer--hero::before{font-size:3.4rem; top:.35rem; left:.6rem; opacity:.15}
.answer__kicker{position:relative; z-index:1; margin:0 0 .55rem;
  font-family:var(--font-body); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strong)}
.answer__body{position:relative; z-index:1}

/* ═══════════════════════════════════════════  FULL-BLEED IMAGE  ═══════ */
.bleed{position:relative; height:clamp(360px,62vh,640px); overflow:hidden; display:grid;
  place-items:center; isolation:isolate}
.bleed img{position:absolute; inset:-12% 0 -12% 0; width:100%; height:124%; object-fit:cover; z-index:-2}
.bleed::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(11,26,25,.62),rgba(11,26,25,.35) 45%,rgba(11,26,25,.78))}
.bleed .wrap{text-align:center; color:var(--ink-inverse)}
.bleed h2{font-size:var(--fs-h2); max-width:16ch; margin-inline:auto; color:inherit}
.bleed p{margin-top:1rem; color:rgba(251,250,247,.86); max-width:44ch; margin-inline:auto;
  font-size:var(--fs-lead)}
.bleed .eyebrow{color:rgba(251,250,247,.72); margin-bottom:1rem}

/* ══════════════════════════════════════════════════  PROBLEM  ═════════ */
.prob{background:var(--f-sand); overflow:hidden}
.prob-grid{display:grid; gap:var(--s-2xl)}
@media(min-width:960px){.prob-grid{grid-template-columns:.9fr 1.1fr; align-items:center}}
.quotes{position:relative; min-height:340px}
.q{position:absolute; background:var(--surface); border-radius:var(--r-lg);
  padding:.95rem 1.15rem; box-shadow:var(--sh-md); font-size:var(--fs-sm);
  color:var(--ink-2); max-width:19rem; border-left:3px solid var(--border-strong);
  opacity:0; transform:translateY(20px)}
.in .q{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}
.q:nth-child(1){left:0;    top:0;   rotate:-2.4deg; transition-delay:.05s}
.q:nth-child(2){right:2%;  top:16%; rotate:1.8deg;  transition-delay:.15s; border-left-color:var(--accent)}
.q:nth-child(3){left:8%;   top:38%; rotate:-1.1deg; transition-delay:.25s}
.q:nth-child(4){right:0;   top:58%; rotate:2.6deg;  transition-delay:.35s; border-left-color:var(--parent-b)}
.q:nth-child(5){left:2%;   top:80%; rotate:-1.7deg; transition-delay:.45s}
@media(max-width:640px){.q{position:static; rotate:none!important; max-width:none; margin-bottom:.6rem}
  .quotes{min-height:0}}

/* ══════════════════════════════════════════════════  CAROUSEL  ════════ */
.railhead{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  margin-bottom:var(--s-lg); flex-wrap:wrap}
.arrows{display:flex; gap:.5rem}
.arrow{width:46px; height:46px; border-radius:50%; border:1px solid var(--border-strong);
  background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast)}
.arrow:hover{background:var(--ink); color:var(--base); transform:scale(1.06)}
.arrow[disabled]{opacity:.3; cursor:default; transform:none; background:transparent; color:var(--ink)}
.rail{display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1rem; scrollbar-width:none; cursor:grab;
  margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter)}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing; scroll-snap-type:none}
.fcard{
  flex:0 0 clamp(240px,74vw,340px); scroll-snap-align:start;
  border-radius:var(--r-2xl); overflow:hidden; position:relative;
  display:flex; flex-direction:column; min-height:440px;
  background:var(--fld); color:var(--ink); text-decoration:none;
  transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}
.fcard:hover{transform:translateY(-6px); box-shadow:var(--sh-lg)}
.fcard .ph{position:relative; height:190px; overflow:hidden; flex:none; background:linear-gradient(135deg,var(--primary-soft),var(--f-clay))}
.fcard .ph::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(205deg,rgba(11,26,25,.42),rgba(11,26,25,0) 46%)}
.fcard .ph img{width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-vslow) var(--ease)}
.fcard:hover .ph img{transform:scale(1.07)}
.fcard .bd{padding:1.3rem; display:flex; flex-direction:column; gap:.55rem; flex:1}
.fcard h3{font-size:var(--fs-h3)}
.fcard p{font-size:var(--fs-sm); color:var(--ink-2)}
.fcard .go{margin-top:auto; display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--fs-sm); font-weight:600; color:var(--accent-strong)}
.fcard:hover .go .ar{transform:translateX(4px)}
.fcard .ar{transition:transform var(--t-base) var(--ease)}
.fcard .num{position:absolute; top:1rem; right:1.2rem; z-index:2;
  font:700 .72rem/1 var(--font-body); letter-spacing:.14em; color:#fff; opacity:.95;
  text-shadow:0 1px 10px rgba(11,26,25,.65), 0 0 2px rgba(11,26,25,.5)}

/* ════════════════════════════════════════  STICKY SCROLL (Ease)  ══════ */
.sticky-sec{background:var(--base-2)}
.sk{display:grid; gap:var(--s-lg)}
/* Sticky steps only apply once the two columns sit side by side; below 960px the
   grid stacks to one column, so keep .sk-left in normal flow — otherwise it pins
   at top:7rem and the panels scroll over the text (unreadable on mobile). */
@media(min-width:960px){.sk{grid-template-columns:.85fr 1.15fr; gap:var(--s-2xl); align-items:start} .sk-left{position:sticky; top:7rem}}
.steps{list-style:none; padding:0; margin:var(--s-lg) 0 0; display:grid; gap:.2rem}
.steps li{display:flex; gap:.9rem; padding:.85rem .9rem; border-radius:var(--r-md);
  color:var(--ink-2); transition:background var(--t-base), color var(--t-base)}
.steps li.on{background:var(--surface); color:var(--ink); box-shadow:var(--sh-sm)}
.steps b{font-weight:600}
.steps .n{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font:700 .72rem/1 var(--font-body); background:var(--border); color:var(--ink);
  transition:background var(--t-base), color var(--t-base)}
.steps li.on .n{background:var(--primary); color:var(--ink-inverse)}
.panels{display:grid; gap:var(--s-lg)}
.panel{border-radius:var(--r-2xl); overflow:hidden; background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--sh-md)}
.panel .cap{padding:1.25rem 1.4rem; border-top:1px solid var(--border)}
.panel .cap b{display:block; font:600 1.1rem/1.2 var(--font-display); letter-spacing:-.02em}
.panel .cap p{font-size:var(--fs-sm); color:var(--ink-2); margin-top:.3rem}
.mock{padding:1.4rem; background:var(--fld); display:grid; gap:.6rem; min-height:230px;
  align-content:center}
.row{display:flex; align-items:center; gap:.7rem; background:var(--surface);
  border-radius:var(--r-md); padding:.75rem .9rem; box-shadow:var(--sh-sm); font-size:var(--fs-sm)}
.row .k{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none}
.row .r{margin-left:auto; font-size:var(--fs-xs); font-weight:600}
.bubble{max-width:80%; padding:.7rem .9rem; border-radius:16px; font-size:var(--fs-sm);
  box-shadow:var(--sh-sm)}
.bubble.me{margin-left:auto; background:var(--primary); color:var(--ink-inverse); border-bottom-right-radius:5px}
.bubble.them{background:var(--surface); border-bottom-left-radius:5px}
.bubble small{display:block; font-size:.65rem; opacity:.7; margin-top:.3rem}

/* ══════════════════════════════════════════════  DARK / STATS  ════════ */
.dark{position:relative; background:var(--night); color:var(--ink-inverse); overflow:hidden}
.dark h2,.dark h3{color:inherit}
.dark .eyebrow{color:color-mix(in srgb,currentColor 62%,transparent)}
.dark p{color:color-mix(in srgb,currentColor 78%,transparent)}
.glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),
    color-mix(in srgb,var(--primary) 26%,transparent), transparent 70%);
  transition:opacity var(--t-slow)}
.stats{display:grid; gap:var(--s-lg); border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);
  padding-top:var(--s-lg); margin-top:var(--s-2xl)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block; font:600 clamp(3.2rem,6.5vw,5.5rem)/1 var(--font-display); letter-spacing:-.045em}
/* Only the direct-child label span — NOT the .cnt counter nested inside <b>,
   which must inherit the big display size (a bare `.stat span` was shrinking it). */
.stat > span{display:block; font-size:var(--fs-sm); opacity:.75; margin-top:.55rem; max-width:22ch}
.stat .cnt{display:inline-block; min-width:1.6ch; font-size:inherit}   /* reserve width so counting up never shifts layout (§3.5 rule 2) */
.trust{list-style:none; padding:0; margin:var(--s-lg) 0 0; display:grid}
.trust li{display:flex; gap:1rem; align-items:center; padding:1.05rem 0;
  border-top:1px solid color-mix(in srgb,currentColor 14%,transparent); font-size:var(--fs-base)}
.trust li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.trust .tk{flex:none; color:var(--primary)}
.trust .no{opacity:.55; font-size:var(--fs-sm); margin-left:auto; text-align:right}

/* ══════════════════════════════════════════════════  PRICING  ═════════ */
.prices{display:grid; gap:1.1rem; margin-top:var(--s-2xl)}
@media(min-width:900px){.prices{grid-template-columns:1.25fr 1fr 1fr; align-items:stretch}}
.pc{border-radius:var(--r-2xl); padding:1.6rem; display:flex; flex-direction:column; gap:.6rem;
  background:var(--surface); border:1px solid var(--border)}
.pc--hero{background:var(--primary); color:var(--ink-inverse); border-color:transparent;
  box-shadow:var(--sh-xl); position:relative; overflow:hidden}
.pc--hero .grain{opacity:.07; mix-blend-mode:overlay}
.pc--hero h3,.pc--hero .amt{color:inherit}
.badge{align-self:flex-start; font:700 var(--fs-xs)/1 var(--font-body); letter-spacing:.12em;
  text-transform:uppercase; padding:.4rem .75rem; border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--accent-strong)}
.pc--hero .badge{background:color-mix(in srgb,var(--ink-inverse) 18%,transparent); color:var(--ink-inverse)}
.amt{font:600 clamp(2.4rem,4.5vw,3.4rem)/1 var(--font-display); letter-spacing:-.045em; margin-top:.2rem}
.amt small{font:500 var(--fs-sm)/1 var(--font-body); letter-spacing:0; opacity:.75; margin-left:.35rem}
.pl{list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.5rem; font-size:var(--fs-sm)}
.pl li{display:flex; gap:.55rem; align-items:flex-start; color:var(--ink-2)}
.pc--hero .pl li{color:color-mix(in srgb,var(--ink-inverse) 84%,transparent)}
.pl .tk{flex:none; margin-top:.25rem; color:var(--success)}
.pc--hero .pl .tk{color:var(--ink-inverse)}
.pc .btn{margin-top:auto; align-self:flex-start}
.never{margin-top:1.2rem; padding:1.1rem 1.3rem; border-radius:var(--r-lg);
  background:var(--f-clay); font-size:var(--fs-sm); color:var(--ink)}
.never b{font-weight:700}

/* ═════════════════════════════════════════════════  COMPARE  ══════════ */
.cmp{width:100%; border-collapse:collapse; margin-top:var(--s-lg); font-size:var(--fs-sm)}
.cmp th,.cmp td{padding:1rem .8rem; text-align:left; border-bottom:1px solid var(--border)}
.cmp thead th{font:700 var(--fs-xs)/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); border-bottom-color:var(--border-strong)}
.cmp tbody th{font-weight:500; color:var(--ink-2)}
.cmp .us{background:var(--primary-soft); font-weight:700; color:var(--primary)}
.cmp thead .us{color:var(--primary); background:var(--primary-soft);
  border-top-left-radius:var(--r-md); border-top-right-radius:var(--r-md)}
.verified{margin-top:.8rem; font-size:var(--fs-xs); color:var(--ink-2)}

/* ══════════════════════════════════════════════════  CTA / FOOT  ══════ */
.cta{background:var(--accent); color:var(--ink-inverse); position:relative; overflow:hidden;
  text-align:center; padding-block:var(--s-4xl)}
.cta .grain{opacity:.08; mix-blend-mode:overlay}
.cta h2{font-size:var(--fs-giant); letter-spacing:-.05em; line-height:.86}
.cta h2 .b{display:block}
.cta h2 .b:nth-child(2){opacity:.45}
.cta p{margin:1.6rem auto 2rem; max-width:34ch; font-size:var(--fs-lead);
  color:color-mix(in srgb,var(--ink-inverse) 88%,transparent)}

footer{background:var(--night); color:var(--ink-inverse); padding-block:var(--s-2xl) var(--s-lg);
  position:relative; overflow:hidden}
.fgrid{display:grid; gap:var(--s-lg)}
@media(min-width:720px){.fgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.fgrid{grid-template-columns:1.4fr repeat(5,1fr)}}
/* .fcol are the footer column headings (h2 for correct heading order). theme.json
   colours all headings with --ink (dark), so set the light colour explicitly here
   or they vanish on the dark footer. ~6:1 on night at this opacity — passes AA. */
footer .fcol{font:700 var(--fs-xs)/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-inverse); opacity:.62; margin-bottom:.9rem}
footer ul{list-style:none; padding:0; display:grid; gap:.5rem; font-size:var(--fs-sm)}
footer a{color:color-mix(in srgb,currentColor 72%,transparent); text-decoration:none;
  transition:color var(--t-fast)}
footer a:hover{color:currentColor}
/* Decorative brand watermark. Text is CSS-generated (via --mark) so it is not a
   DOM text node — keeps it out of contrast auditing, which is correct for a 7%
   aria-hidden watermark. */
.bigmark{font:600 clamp(4rem,17vw,13rem)/.8 var(--font-display); letter-spacing:-.055em;
  opacity:.07; margin-top:var(--s-lg); user-select:none; white-space:nowrap}
.bigmark::before{content:var(--mark,"GrownUps")}
.legal{display:flex; flex-wrap:wrap; gap:1rem; font-size:var(--fs-xs); opacity:.55;
  padding-top:var(--s-md); border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}

/* ═══════════════════════════════════════════════  REVEALS  ════════════ */
.rv{opacity:0; transform:translateY(22px);
  transition:opacity .85s var(--ease), transform .85s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ═══════════════════════════════════════════  PAGE SCAFFOLD / FAQ  ═════ */
/* Nav-clearance top padding for content pages that don't open with a hero. */
.gu-doc{padding-block:clamp(7rem,13vw,9.5rem) var(--s-3xl)}
.hero-page{position:relative; overflow:hidden; padding-block:clamp(7rem,13vw,9.5rem) var(--s-2xl)}
/* Redesign glow for any hero without explicit .hero-bg blobs — gives the inner
   pages the same soft opener without editing each pattern. Legal heroes opt out
   with .hero-page--plain (they are read by frightened people and store reviewers
   and must stay plain, §8). Content sits above the glow via the .wrap z-index. */
.hero-page:not(.hero-page--plain):not(:has(.hero-bg))::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 80% at 18% 0%, var(--primary-soft), transparent 68%), radial-gradient(48% 66% at 92% 8%, var(--f-clay), transparent 70%);
  opacity:.45}
.hero-page > .wrap{position:relative; z-index:1}

.faq{margin-top:var(--s-lg); border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item>summary{cursor:pointer; list-style:none; min-height:56px; padding:1.1rem .25rem; gap:1rem;
  display:flex; justify-content:space-between; align-items:center;
  font:600 var(--fs-h3)/1.25 var(--font-display); letter-spacing:-.015em; color:var(--ink)}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{content:""; flex:none; width:11px; height:11px; margin-right:.2rem;
  border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2);
  transform:rotate(45deg); transition:transform var(--t-base) var(--ease)}
.faq-item[open]>summary::after{transform:rotate(-135deg)}
.faq-a{padding:0 .25rem 1.3rem; color:var(--ink-2); font-size:var(--fs-base)}

/* pillar-grid (§3.4) */
.pillars{display:grid; gap:1.1rem; margin-top:var(--s-2xl)}
@media(min-width:640px){.pillars{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); padding:1.5rem;
  transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}
.pillar:hover{transform:translateY(-4px); box-shadow:var(--sh-lg)}
.pillar b{display:block; font:600 var(--fs-h3)/1.15 var(--font-display); letter-spacing:-.015em}
.pillar p{margin-top:.5rem; font-size:var(--fs-sm); color:var(--ink-2)}

/* feature-detail (§3.4) */
.fdetail{display:grid; gap:var(--s-lg); align-items:center; margin-bottom:var(--s-2xl)}
@media(min-width:860px){.fdetail{grid-template-columns:1fr 1fr; gap:var(--s-2xl)} .fdetail--rev .fdetail-media{order:2}}
.fdetail-media{border-radius:var(--r-2xl); min-height:300px; background:var(--fld,var(--f-mint))}

/* schedule-diagram (§3.4) — colour is never the only signal (§3.3.7) */
.sched{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:var(--s-lg)}
.sched-day{border-radius:var(--r-md); padding:.7rem .5rem; min-height:62px; display:flex; flex-direction:column;
  gap:.15rem; border-left:3px solid var(--border-strong); background:var(--base-2)}
.sched-day span{font-size:var(--fs-xs); color:var(--ink-2); font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.sched-day i{font-style:normal; font-weight:700; font-size:var(--fs-sm); color:var(--ink)}
/* Seven columns are tight on a phone — shrink cells and let the hyphenated label
   wrap so the two-week diagram fits the viewport instead of overflowing it. */
@media(max-width:560px){
  .sched{gap:4px}
  .sched-day{padding:.4rem .28rem; min-height:50px}
  .sched-day span{font-size:.58rem}
  .sched-day i{font-size:.66rem; overflow-wrap:anywhere; line-height:1.05}
}
/* .gu-band--a / --b (parent colouring) are emitted by inc/tokens.php emit_aliases() */

/* store badges (§3.4) — shown only when launch_state is live */
.store-badges{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center}
.store-badges img{height:44px; width:auto}

/* sticky mobile CTA (§6.4) — coexists with, never overlaps, the mobile menu */
.sticky-cta{position:fixed; left:var(--gutter); right:var(--gutter); bottom:.9rem; z-index:90;
  display:none; align-items:center; justify-content:center; gap:.5rem; text-decoration:none;
  padding:.95rem 1.4rem; border-radius:var(--r-pill); background:var(--accent); color:var(--ink-inverse);
  font:600 var(--fs-sm)/1 var(--font-body); box-shadow:var(--sh-lg)}
@media(max-width:1023px){ .sticky-cta.show{display:flex} }

/* cookie consent banner (consent-gated analytics — inc/consent.php) */
.consent{position:fixed; left:var(--gutter); right:var(--gutter); bottom:1rem; z-index:140;
  max-width:36rem; margin-inline:auto; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-lg); box-shadow:var(--sh-xl); padding:1.1rem 1.25rem;
  display:flex; gap:1rem 1.25rem; align-items:center; flex-wrap:wrap}
.consent-text{flex:1 1 16rem; margin:0; font-size:var(--fs-sm); color:var(--ink-2)}
.consent-text a{color:var(--accent-strong)}
.consent-btns{display:flex; gap:.5rem; margin-left:auto}
.consent .btn{padding:.7rem 1.1rem}

/* waitlist form (§5.7) */
.wl-form{margin-top:1.4rem}
.wl-row{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.wl-email,.wl-country{padding:.9rem 1.1rem; border:1px solid var(--border-strong); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink); font:400 var(--fs-base)/1 var(--font-body)}
.wl-email{flex:1 1 15rem; min-width:0}
.wl-country{font-size:var(--fs-sm)}
.wl-form .btn{flex:none}
.wl-hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.wl-hint{margin-top:.5rem; font-size:var(--fs-xs); color:var(--ink-2)}
.wl-disclosure{margin-top:.8rem; font-size:var(--fs-sm); color:var(--ink-2); max-width:52ch}
.wl-form--compact{margin-top:1rem}
.wl-form--compact .wl-disclosure{font-size:var(--fs-xs); margin-top:.6rem}

/* waitlist popup (§5.9) */
.popup{position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:var(--gutter);
  background:color-mix(in srgb,var(--ink) 34%,transparent); opacity:0; transition:opacity var(--t-base) var(--ease)}
.popup.open{opacity:1}
.popup-card{position:relative; width:100%; max-width:27rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--sh-xl); padding:1.7rem 1.6rem;
  transform:translateY(12px); transition:transform var(--t-base) var(--ease)}
.popup.open .popup-card{transform:none}
.popup-close{position:absolute; top:.55rem; right:.55rem; width:44px; height:44px; border:0; cursor:pointer;
  background:transparent; color:var(--ink-2); border-radius:var(--r-pill); display:grid; place-items:center}
.popup-close:hover{background:color-mix(in srgb,var(--ink) 6%,transparent); color:var(--ink)}
.popup-line{font:600 var(--fs-h3)/1.2 var(--font-display); letter-spacing:-.015em; max-width:24ch; padding-right:2rem}
/* Mobile: a bottom sheet ≤ ⅓ screen, page visible & scrollable behind — never a full-screen interstitial. */
@media(max-width:899px){
  .popup{place-items:end stretch; padding:0; background:transparent; pointer-events:none}
  .popup.open{background:color-mix(in srgb,var(--ink) 12%,transparent)}
  .popup-card{pointer-events:auto; max-width:none; max-height:33vh; overflow-y:auto;
    border-radius:var(--r-xl) var(--r-xl) 0 0; transform:translateY(100%)}
  .popup.open .popup-card{transform:none}
}
@media(prefers-reduced-motion:reduce){ .popup,.popup-card{transition:none} }

/* ═══════════════════════════════════════════════  BLOG (§7.7, §7.8)  ═════ */
/* Archive intro reads as a page, not a list. */
.cat-title{font:600 var(--fs-h1)/1.05 var(--font-display); letter-spacing:-.02em}
.cat-intro{margin-top:1.4rem; max-width:60ch}

/* Post grid — design cards shared by the blog index and archives. */
.post-grid{display:grid; gap:var(--s-lg); grid-template-columns:1fr; margin-top:var(--s-lg); list-style:none; padding:0}
@media(min-width:680px){ .post-grid{grid-template-columns:1fr 1fr} }
@media(min-width:1040px){ .post-grid{grid-template-columns:repeat(3,1fr)} }
.post-grid--3{grid-template-columns:1fr}
@media(min-width:680px){ .post-grid--3{grid-template-columns:repeat(3,1fr)} }
/* Sunken band the blog-index grid sits on, so the surface cards lift off it. */
.post-band{background:var(--base-2)}

/* ═══════════════════════════════  FEATURES HUB — warm precision  ═══════════
   Signature: the two-parent band (teal + slate) as a structural system, the
   built calendar as the hero, features grouped by the three real jobs. */

/* Two-parent tick — the recurring micro-signature on eyebrows. */
.pbtick{display:inline-flex; gap:3px; margin-right:.15rem}
.pbtick i{width:13px; height:4px; border-radius:2px; display:block}
.pbtick i:first-child{background:var(--parent-a)}
.pbtick i:last-child{background:var(--parent-b)}

/* Answer-first standfirst under the split hero. */
.standfirst{font-size:var(--fs-lead); line-height:1.5; color:var(--ink); max-width:60ch}

/* "Nine features. Three jobs." — grouped by the job, which is the real structure. */
.jobs{display:grid; gap:var(--s-md); grid-template-columns:1fr; margin-top:var(--s-2xl)}
@media(min-width:560px){ .jobs{grid-template-columns:1fr 1fr} }
@media(min-width:960px){ .jobs{grid-template-columns:repeat(3,1fr)} }
.job{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:.4rem}
.job::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--jobc,var(--primary))}
.job__label{display:flex; align-items:baseline; gap:.5rem; margin-bottom:.7rem;
  font:700 var(--fs-xs)/1 var(--font-body); letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2)}
.job__label b{font:600 var(--fs-h4)/1.1 var(--font-display); letter-spacing:-.02em;
  text-transform:none; color:var(--ink)}
.jfeature{display:flex; gap:.85rem; align-items:flex-start; text-decoration:none; color:inherit;
  padding:.7rem .6rem; margin:0 -.6rem; border-radius:var(--r-lg); transition:background var(--t-fast) var(--ease)}
.jfeature:hover{background:var(--base-2)}
.jfeature__ic{flex:none; width:40px; height:40px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--fld,var(--f-mint)); color:var(--ink)}
.jfeature__t b{display:block; font:600 var(--fs-base)/1.25 var(--font-display); letter-spacing:-.01em; color:var(--ink)}
.jfeature__t span{display:block; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.5; margin-top:.1rem}

/* The signature band: two weeks of the shared calendar, both homes interleaved. */
.record{background:var(--base-2)}
.record__grid{display:grid; gap:.55rem; grid-template-columns:repeat(7,1fr); margin-top:var(--s-lg); max-width:58rem}
.record__grid .cell{aspect-ratio:1/1; border-radius:var(--r-md); padding:.5rem .55rem;
  display:flex; flex-direction:column; justify-content:space-between}
.record__grid .cell span{font-size:var(--fs-xs); color:var(--ink-2); font-variant-numeric:tabular-nums}
.record__grid .cell i{font-style:normal; font:700 var(--fs-sm)/1 var(--font-body); color:var(--ink)}
.record__legend{display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:var(--s-md); font-size:var(--fs-sm); color:var(--ink-2)}
.record__legend b{display:inline-flex; align-items:center; gap:.5rem; font-weight:500; color:var(--ink)}
.record__legend .sw{width:13px; height:13px; border-radius:4px; border-left:3px solid}
.record__legend .sw-a{background:var(--parent-a-soft); border-left-color:var(--parent-a)}
.record__legend .sw-b{background:var(--parent-b-soft); border-left-color:var(--parent-b)}
/* Seven columns are tight on a phone — shrink the cell padding/type so the two
   weeks fit the viewport instead of overflowing it. */
@media(max-width:560px){
  .record__grid{gap:.35rem}
  .record__grid .cell{padding:.35rem .3rem; border-radius:var(--r-sm)}
  .record__grid .cell span{font-size:.6rem}
  .record__grid .cell i{font-size:.66rem}
}

/* Warm breather photo — self-hosted (Unsplash, no faces). Strong dark overlay so
   the white text clears 4.5:1 on the light image. One of two photo slots (§10). */
.photoband{position:relative; isolation:isolate; overflow:hidden; text-align:center;
  min-height:clamp(19rem,38vw,26rem); display:grid; align-items:center;
  padding-block:var(--s-2xl)}
.photoband>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.photoband::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(175deg, color-mix(in srgb,var(--night) 62%,transparent) 0%,
    color-mix(in srgb,var(--night) 82%,transparent) 100%)}
.photoband .wrap{max-width:var(--content)}
.photoband .eyebrow, .photoband h2{color:var(--ink-inverse)}
.photoband .eyebrow::before{background:var(--ink-inverse)}
.photoband p{color:color-mix(in srgb,var(--ink-inverse) 90%,transparent); max-width:46ch;
  margin:1rem auto 0; font-size:var(--fs-lead); line-height:1.5}

/* Flush band backgrounds for the designed colour cadence. */
.band-2{background:var(--base-2)}
.band-teal{position:relative; overflow:hidden; color:var(--ink-inverse);
  background:linear-gradient(158deg,var(--primary-strong) 0%,var(--primary) 78%)}
.band-teal .eyebrow, .band-teal h2, .band-teal h3, .band-teal b{color:var(--ink-inverse)}
.band-teal .eyebrow::before{background:var(--ink-inverse)}
.band-teal p{color:color-mix(in srgb,var(--ink-inverse) 88%,transparent)}
.band-teal .pbtick i:first-child{background:color-mix(in srgb,var(--ink-inverse) 85%,transparent)}
.band-teal .pbtick i:last-child{background:var(--accent-soft)}

/* Zigzag feature spotlight: copy one side, a built mock the other. */
.spot{display:grid; gap:var(--s-lg); align-items:center; grid-template-columns:minmax(0,1fr)}
.spot + .spot{margin-top:var(--s-3xl)}
@media(min-width:920px){
  .spot{grid-template-columns:1fr 1fr; gap:var(--s-3xl)}
  .spot--rev .spot__media{order:-1}
}
.spot__list{list-style:none; padding:0; margin:var(--s-md) 0 0; display:flex; flex-direction:column; gap:.9rem}
.spot__list li{display:flex; gap:.75rem; align-items:flex-start}
.spot__list .tk{flex:none; margin-top:.15rem; color:var(--primary)}
.spot__list b{color:var(--ink)}
.spot__list span{color:var(--ink-2)}
.spot__go{display:inline-flex; align-items:center; gap:.4rem; margin-top:var(--s-md);
  font-weight:600; color:var(--accent-strong); text-decoration:none}
.spot__go:hover .ar{transform:translateX(4px)}
.spot__go .ar{transition:transform var(--t-base) var(--ease)}

/* Built product mocks (never stock; behaviour the product actually has, §3.7). */
.mock{position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--sh-lg); padding:clamp(1.1rem,2.4vw,1.6rem)}
.mock__cap{display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding-bottom:.9rem; margin-bottom:1rem; border-bottom:1px solid var(--border)}
.mock__cap b{font:600 var(--fs-base)/1.1 var(--font-display); letter-spacing:-.01em}
.mock__pill{display:inline-flex; align-items:center; gap:.35rem; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.04em; padding:.3rem .6rem; border-radius:var(--r-pill); background:var(--primary-soft); color:var(--primary-strong)}
.mock__foot{display:flex; align-items:center; gap:.5rem; margin-top:1rem; padding-top:.9rem;
  border-top:1px solid var(--border); font-size:var(--fs-xs); color:var(--ink-2)}
.mock__foot svg{flex:none; color:var(--primary)}

/* Messages mock. */
.thread{display:flex; flex-direction:column; gap:.6rem}
.bub{max-width:80%; padding:.65rem .9rem; border-radius:var(--r-lg); font-size:var(--fs-sm); line-height:1.45}
.bub--them{align-self:flex-start; background:var(--base-2); border-bottom-left-radius:.4rem}
.bub--you{align-self:flex-end; background:var(--primary); color:var(--ink-inverse); border-bottom-right-radius:.4rem}
.bub s{display:block; font-style:normal; font-size:var(--fs-xs); opacity:.72; margin-top:.3rem}

/* Handover mock. */
.ho__row{display:flex; align-items:center; gap:.75rem; padding:.7rem 0}
.ho__row + .ho__row{border-top:1px solid var(--border)}
.ho__tick{flex:none; width:30px; height:30px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary)}
.ho__row b{font-size:var(--fs-sm)} .ho__row s{display:block; font-style:normal; font-size:var(--fs-xs); color:var(--ink-2); margin-top:.1rem}
.ho__row .when{margin-left:auto; font-size:var(--fs-xs); color:var(--ink-2); font-variant-numeric:tabular-nums}

/* Expense lifecycle mock. */
.exp__hd{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem}
.exp__hd b{font:600 var(--fs-lg)/1.1 var(--font-display)} .exp__hd s{font-style:normal; color:var(--ink-2); font-size:var(--fs-sm)}
.exp__steps{display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; margin:1.1rem 0 .9rem}
.exp__step{text-align:center; font-size:var(--fs-xs); color:var(--ink-2); position:relative; padding-top:1.4rem}
.exp__step::before{content:""; position:absolute; top:.15rem; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:var(--r-pill); background:var(--base-2); border:2px solid var(--border)}
.exp__step::after{content:""; position:absolute; top:calc(.15rem + 7px); left:50%; width:100%; height:2px; background:var(--border); z-index:-1}
.exp__step:last-child::after{display:none}
.exp__step.done{color:var(--ink)}
.exp__step.done::before{background:var(--primary); border-color:var(--primary)}
.exp__step.now b{color:var(--primary-strong)}
.exp__bal{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.4rem;
  padding-top:.9rem; border-top:1px solid var(--border); font-size:var(--fs-sm)}
.exp__bal b{color:var(--ink); font-weight:600}

/* "In one sentence" statement — the answer-first, paired with a calm image that
   drifts very slowly (ken-burns), so it feels alive without competing for
   attention. Reduced-motion users get a still frame. */
.statement__text{position:relative; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.35rem,1.05rem + 1.1vw,2rem); line-height:1.32; letter-spacing:-.02em; color:var(--ink)}
.statement__text em{font-family:var(--font-serif); font-style:italic; color:var(--accent-strong)}
.statement__text b{font-weight:600; color:var(--ink)}
.floatimg{position:relative; border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--sh-lg);
  aspect-ratio:5/4}
.floatimg::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);
  border-radius:inherit; pointer-events:none}
.floatimg img{display:block; width:100%; height:100%; object-fit:cover; transform-origin:60% 40%}
.floatchip{position:absolute; left:1rem; bottom:1rem; z-index:2; display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .85rem; border-radius:var(--r-pill); background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--border); box-shadow:var(--sh-md);
  font-size:var(--fs-sm); font-weight:600; color:var(--ink)}
.floatchip .dot{width:22px; height:22px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary); flex:none}
@media(prefers-reduced-motion:no-preference){
  .floatimg img{animation:kenburns 20s ease-in-out infinite alternate}
  .floatchip{animation:floaty 6s var(--ease-io) infinite}
}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.11) translate(-1.5%,-2%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Feature-detail point cards (feature pages). */
.fpoints{display:grid; gap:var(--s-md); grid-template-columns:1fr; margin-top:var(--s-xl)}
@media(min-width:760px){ .fpoints{grid-template-columns:1fr 1fr} }
.fpoint{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:1.4rem 1.3rem; display:flex; gap:.85rem; align-items:flex-start}
.fpoint .tk{flex:none; margin-top:.15rem; color:var(--primary)}
.fpoint b{display:block; font:600 var(--fs-lg)/1.2 var(--font-display); letter-spacing:-.01em; color:var(--ink)}
.fpoint p{margin-top:.35rem; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.55}
/* Recent-blog list in the nav dropdowns (label + title, no image). */
.megablogs{display:flex; flex-direction:column; gap:.25rem; align-content:start}
.megablogs__h{font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin:0 .7rem .3rem}
.megablog{display:block; padding:.55rem .7rem; border-radius:var(--r-md); text-decoration:none; transition:background var(--t-fast) var(--ease)}
.megablog:hover{background:var(--base-2)}
.megablog small{display:block; font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong)}
.megablog b{display:block; font:600 var(--fs-sm)/1.3 var(--font-display); letter-spacing:-.01em; color:var(--ink); margin-top:.12rem}
/* Pillar "go" hint (404, hubs). */
.pillar__go{display:inline-flex; align-items:center; gap:.3rem; margin-top:.7rem; font-size:var(--fs-sm); font-weight:600; color:var(--accent-strong)}
.pillar:hover .pillar__go .ar{transform:translateX(3px)}
.pillar__go .ar{transition:transform var(--t-base) var(--ease)}
/* File list (records mock). */
.filelist{display:flex; flex-direction:column; gap:.5rem; margin-top:.2rem}
.filerow{display:flex; align-items:center; gap:.7rem; padding:.6rem .2rem; font-size:var(--fs-sm)}
.filerow + .filerow{border-top:1px solid var(--border)}
.filerow svg{flex:none; color:var(--primary)} .filerow .sz{margin-left:auto; font-size:var(--fs-xs); color:var(--ink-2); font-variant-numeric:tabular-nums}
/* The card container is either an explicit .post-card (related grid, PHP-rendered)
   or the post-template's own <li.wp-block-post> (blog index + archives). */
.post-card,
.post-grid.wp-block-post-template > li{display:flex; flex-direction:column; gap:.5rem; text-decoration:none; color:inherit; list-style:none;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); padding:1rem 1rem 1.3rem;
  transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}
.post-card:hover,
.post-grid.wp-block-post-template > li:hover{transform:translateY(-4px); box-shadow:var(--sh-lg)}
.post-card__frame img,.post-card__img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--r-xl); background:var(--f-mint); display:block}
.post-card__cat{font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-strong)}
.post-card__cat a{color:inherit; text-decoration:none}
.post-card__title{font:600 var(--fs-lg)/1.2 var(--font-display); letter-spacing:-.015em; color:var(--ink)}
.post-card__title a{color:inherit; text-decoration:none}
.post-card__dek{font-size:var(--fs-sm); color:var(--ink-2); line-height:1.55}
.post-card__date{font-size:var(--fs-xs); color:var(--ink-2); margin-top:auto}

/* Pagination — numbered, no infinite scroll (§7.8). */
.post-pagination{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-top:var(--s-2xl); font-size:var(--fs-sm)}
.post-pagination .wp-block-query-pagination-numbers{display:flex; gap:.4rem}
.post-pagination a,.post-pagination .page-numbers{display:inline-grid; place-items:center; min-width:44px; min-height:44px;
  padding:0 .5rem; border-radius:var(--r-pill); border:1px solid var(--border); color:var(--ink); text-decoration:none}
.post-pagination .page-numbers.current{background:var(--primary); color:var(--ink-inverse); border-color:var(--primary)}
.post-pagination a:hover{border-color:var(--border-strong)}

/* Post body — long-form prose rhythm; measure never exceeds --content (§4). */
.post-body{padding-top:var(--s-lg)}
.post-body p,.post-body ul,.post-body ol{margin-block:1.1rem; line-height:1.7; color:var(--ink)}
.post-body h2{font:600 var(--fs-h2)/1.15 var(--font-display); letter-spacing:-.02em; margin-top:clamp(3.4rem,6vw,4.75rem); margin-bottom:.35rem}
.post-body h3{font:600 var(--fs-h3)/1.2 var(--font-display); letter-spacing:-.015em; margin-top:clamp(2.4rem,4.5vw,3.1rem); margin-bottom:.2rem}
.post-body h2+h3,.post-body h2+p{margin-top:1rem}  /* a heading immediately followed by another needn't double the gap */
.post-body a{color:var(--accent-strong); text-underline-offset:.18em}
.post-body ul,.post-body ol{padding-left:1.3rem}
.post-body li{margin-block:.4rem}
.post-body blockquote{margin:1.6rem 0; padding-left:1.1rem; border-left:3px solid var(--primary); color:var(--ink-2)}
.post-body figure{margin:1.8rem 0}
.post-body .sched{max-width:none}
/* The flush-reset near the top (.wp-block-post-content>* { margin-block:0 !important })
   exists so full-bleed bands butt together on landing pages — but blog prose are
   also direct children of .wp-block-post-content, so it flattens the article and
   the post reads cramped. Re-assert the reading rhythm, scoped to .post-body (blog
   singles only) and with !important so it wins over that reset. */
.post-body .wp-block-post-content > *{margin-block:1.2rem !important}
.post-body .wp-block-post-content > :first-child{margin-top:0 !important}
.post-body .wp-block-post-content > h2{margin-top:clamp(3.4rem,6vw,4.75rem) !important; margin-bottom:.4rem !important}
.post-body .wp-block-post-content > h3{margin-top:clamp(2.4rem,4.5vw,3.1rem) !important; margin-bottom:.25rem !important}
.post-body .wp-block-post-content > h2 + *{margin-top:1rem !important}
.post-body .wp-block-post-content > figure{margin-block:1.9rem !important}
.post-body .wp-block-post-content > blockquote{margin-block:1.9rem !important}

/* Mid-post CTA — a subject-relevant pitch + the email form, spliced into the
   article body (inc/blog.php). Selectors carry two classes so they beat the
   generic `.post-body p` rules the box sits inside. */
.post-cta{margin:clamp(2.75rem,6vw,4rem) 0; padding:clamp(1.5rem,4vw,2.3rem);
  border-radius:var(--r-2xl); background:var(--primary-soft);
  border:1px solid color-mix(in srgb,var(--primary) 22%,transparent)}
.post-cta .post-cta__eyebrow{display:flex; align-items:center; gap:.5rem; margin:0;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--primary)}
.post-cta .post-cta__h{margin:.7rem 0 0; font:600 var(--fs-h3)/1.15 var(--font-display); letter-spacing:-.02em; color:var(--ink)}
.post-cta .post-cta__p{margin:.6rem 0 0; font-size:var(--fs-base); line-height:1.6; color:var(--ink-2); max-width:54ch}
.post-cta .wl-form{margin-top:1.3rem}
.post-cta .wl-disclosure{color:var(--ink-2)}

/* ═══════════════════════════════════════════  EVIDENCE / RESEARCH  ═════ */
.ev-block{margin-top:var(--s-2xl)}
.ev-block:first-child{margin-top:0}
.ev-block h2{margin-bottom:.6rem}
.ev-intro{font-size:var(--fs-lead); line-height:1.6; color:var(--ink-2); max-width:64ch}
.ev-stats{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:var(--s-lg)}
@media(min-width:640px){.ev-stats{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px){.ev-stats--2{grid-template-columns:repeat(2,1fr)}}
.ev-stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:1.4rem 1.5rem}
.ev-stat b{display:block; font:700 clamp(1.9rem,3.6vw,2.7rem)/1 var(--font-display); letter-spacing:-.03em; color:var(--primary)}
.ev-stat span{display:block; margin-top:.55rem; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.5}
.ev-stat--accent{border-color:color-mix(in srgb,var(--primary) 32%,transparent); background:var(--primary-soft)}
.ev-source{margin-top:1.1rem; font-size:var(--fs-xs); color:var(--ink-2); line-height:1.6}
.ev-source a{color:var(--accent-strong)}
.ev-refs{margin-top:var(--s-2xl); background:var(--base-2); border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:clamp(1.4rem,3.5vw,2rem)}
.ev-refs ol{margin:.7rem 0 0; padding-left:1.3rem}
.ev-refs li{font-size:var(--fs-sm); color:var(--ink-2); line-height:1.6; margin-block:.6rem}
.ev-refs a{color:var(--accent-strong); word-break:break-word}
.ev-refs li:target{background:color-mix(in srgb,var(--primary) 10%,transparent); border-radius:var(--r-sm)}

/* Post tail — last-updated, author card, related. */
.post-tail{padding-top:var(--s-lg)}
.post-updated{font-size:var(--fs-xs); color:var(--ink-2)}
.author-card{display:flex; gap:1rem; align-items:flex-start; margin-top:var(--s-md);
  background:var(--base-2); border-radius:var(--r-2xl); padding:1.3rem 1.4rem}
.author-card__face{flex:none; text-decoration:none}
.author-card__avatar{width:56px; height:56px; border-radius:var(--r-pill); object-fit:cover; display:grid; place-items:center}
.author-card__avatar--initials{background:var(--primary); color:var(--ink-inverse); font:700 1.2rem/1 var(--font-display)}
.author-card__name{display:block; font:600 var(--fs-base)/1.2 var(--font-display); color:var(--ink)}
.author-card__role{display:block; font-size:var(--fs-xs); color:var(--ink-2); margin-top:.15rem}
.author-card__bio{margin-top:.55rem; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.6}
.post-related{margin-top:var(--s-2xl)}
.post-related .post-card__frame img{aspect-ratio:16/9}
/* Two related guides — wider cards, evenly aligned. */
.post-grid--2{grid-template-columns:1fr}
@media(min-width:680px){ .post-grid--2{grid-template-columns:1fr 1fr} }

/* Single-post reading shell: a roomy reading column with a sticky contents
   index to its right. The index is built by site.js from the H2s and revealed
   only when there are two or more; it collapses away under 960px. */
.post-shell{max-width:var(--reading); margin-inline:auto; display:grid;
  grid-template-columns:minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.post-shell > .wp-block-post-content{min-width:0; margin:0}
@media(min-width:960px){ .post-shell{grid-template-columns:minmax(0,1fr) 15rem} }
.post-toc{position:sticky; top:5.5rem; align-self:start;
  border-left:1px solid var(--border); padding-left:1.1rem}
.post-toc[hidden]{display:none}
.post-toc__h{font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 .7rem}
.post-toc__nav{display:flex; flex-direction:column; gap:.15rem}
.post-toc__link{display:block; padding:.34rem 0; font-size:var(--fs-sm); line-height:1.4;
  color:var(--ink-2); text-decoration:none; border-left:2px solid transparent;
  margin-left:-1.1rem; padding-left:1.1rem; transition:color var(--t-fast), border-color var(--t-fast)}
.post-toc__link:hover{color:var(--ink)}
.post-toc__link.is-active{color:var(--primary); border-color:var(--primary); font-weight:600}
@media(max-width:959px){ .post-toc{display:none !important} }

/* ══════════════════════════════════  INNER-PAGE REDESIGN (playbook §1)  ═════ */
/* Component CSS ported from docs/grownups-inner-page-redesign/grownups-preview.css
   (Part 2). Every value is a token. The calendar/rail/sticky/faq mocks are Part 1
   and already live above; only the genuinely new components are here. NB the
   design's form `.consent` is renamed `.form-consent` — `.consent` is already the
   cookie-banner class (see OWNER OVERRIDES). The `.legal-doc` grid flip is coupled
   to its markup and lives in the LEGAL section / legal port, not here. */

/* category-chips — the filter-style nav row under the blog-index hero. Links to
   the four category archives; no JS filtering. 44px targets. */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--s-lg)}
.chips a{display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  padding:.55rem 1.1rem; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--border);
  font:500 var(--fs-sm)/1 var(--font-body); color:var(--ink); text-decoration:none;
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.chips a:hover{border-color:var(--border-strong); transform:translateY(-2px); color:var(--ink)}
.chips a span{font-size:var(--fs-xs); color:var(--ink-2); font-variant-numeric:tabular-nums}
.chips a[aria-current="page"]{background:var(--primary); border-color:var(--primary); color:var(--ink-inverse)}
.chips a[aria-current="page"] span{color:color-mix(in srgb,var(--ink-inverse) 75%,transparent)}

/* featured-post — the wide two-column card at the top of the blog index. Media
   left, copy right; stacks under 860px. */
.feat{display:grid; gap:var(--s-md); margin-top:var(--s-2xl);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:clamp(1rem,2.5vw,1.5rem); box-shadow:var(--sh-md);
  transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}
.feat:hover{transform:translateY(-6px); box-shadow:var(--sh-lg)}
@media(min-width:860px){.feat{grid-template-columns:1.05fr .95fr; gap:var(--s-lg); align-items:center}}
.feat-bd{display:flex; flex-direction:column; gap:.8rem; padding:.4rem clamp(.2rem,1.5vw,1.2rem) .6rem}
.feat-bd h2{font-size:var(--fs-h2); letter-spacing:-.035em}
.feat-bd h2 a{color:inherit; text-decoration:none}
.feat-bd .lede{max-width:46ch}
.feat-meta{display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; font-size:var(--fs-xs); color:var(--ink-2)}
.feat-go{display:inline-flex; align-items:center; gap:.45rem; margin-top:.3rem;
  font:600 var(--fs-sm)/1 var(--font-body); color:var(--accent-strong); text-decoration:none}
.feat:hover .feat-go .ar{transform:translateX(4px)}
.feat-go .ar{transition:transform var(--t-base) var(--ease)}

/* token-card — the built featured-image card (§3.7: a post's art is an on-brand
   token card, generated at build time; never stock). 1200×630. */
.tokcard{position:relative; aspect-ratio:1200/630; border-radius:var(--r-xl); overflow:hidden;
  background:var(--fld,var(--f-mint)); padding:clamp(.9rem,2.2vw,1.4rem);
  display:flex; flex-direction:column; justify-content:space-between; gap:.6rem}
.tokcard__cat{font:700 var(--fs-xs)/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.tokcard__art{display:grid; gap:4px; grid-template-columns:repeat(7,1fr)}
.tokcard__art i{display:block; height:clamp(14px,3vw,26px); border-radius:5px;
  background:var(--base-2); border-left:3px solid var(--border-strong)}
.tokcard__foot{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem}
.tokcard__foot b{font:600 clamp(1rem,2.2vw,1.35rem)/1.15 var(--font-display); letter-spacing:-.025em; color:var(--ink)}
.tokcard__foot em{font-style:normal; font-size:var(--fs-xs); color:var(--ink-2); white-space:nowrap}
.tokcard--sm .tokcard__foot b{font-size:clamp(.95rem,1.6vw,1.1rem)}

/* article-header — the widened blog-post header: eyebrow, H1, standfirst, byline.
   Two columns on ≥1000px so the H1 isn't alone on a wide screen. */
.artheader{display:grid; gap:var(--s-md); position:relative; z-index:2}
@media(min-width:1000px){.artheader{grid-template-columns:1.15fr .85fr; gap:var(--s-2xl); align-items:end}}
.artheader h1{font-size:var(--fs-h1)}
.byline{display:flex; align-items:center; gap:.85rem; margin-top:var(--s-md)}
.byline__avatar{width:44px; height:44px; flex:none; border-radius:var(--r-pill);
  display:grid; place-items:center; background:var(--primary); color:var(--ink-inverse);
  font:700 var(--fs-sm)/1 var(--font-display)}
.byline__who{font-size:var(--fs-sm)}
.byline__who b{display:block; font-weight:600}
.byline__who span{color:var(--ink-2); font-size:var(--fs-xs)}

/* article-figure — frames an in-body diagram on a sunken panel. */
.artfig{margin:var(--s-lg) 0; background:var(--base-2); border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:clamp(1rem,2.6vw,1.6rem)}
.artfig--flush{margin-inline:0}
.artfig__head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem}
.artfig__head b{font:600 var(--fs-lead)/1.2 var(--font-display); letter-spacing:-.02em}
.artfig__head em{font-style:normal; font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-strong)}
.artfig figcaption{margin-top:.9rem; font-size:var(--fs-sm); color:var(--ink-2); max-width:64ch}

/* callout — a token-tinted panel for a key caveat inside prose. A filled field,
   so it reads as a change of ground rather than a warning. */
.callout{margin:var(--s-lg) 0; background:var(--f-sand); border-radius:var(--r-lg);
  padding:clamp(1.1rem,2.4vw,1.5rem); max-width:var(--content)}
.callout b{display:block; font:700 var(--fs-xs)/1 var(--font-body); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:.6rem}
.callout p{font-size:var(--fs-sm); line-height:1.65; color:var(--ink)}

/* teaser — a one-line cross-link row (pricing → /compare). A quiet band, not a
   second CTA: the page has only one of those. */
.teaser{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; margin-top:var(--s-2xl); padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.2rem,3vw,2rem);
  border-radius:var(--r-2xl); background:var(--f-sky)}
.teaser p{font-size:var(--fs-lead); line-height:1.4; max-width:44ch; letter-spacing:-.015em}

/* trust-chip — a visible "last updated" / "last verified" pill. */
.tchip{display:inline-flex; align-items:center; gap:.5rem; min-height:36px;
  padding:.4rem .9rem; border-radius:var(--r-pill); background:var(--surface);
  border:1px solid var(--border); font-size:var(--fs-xs); color:var(--ink-2)}
.tchip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--success); flex:none}

/* pullquote — the editorial beat on the About page. Display face. */
.pullquote{margin:var(--s-xl) 0; padding-block:var(--s-md); border-block:1px solid var(--border); max-width:var(--content)}
.pullquote p{font:400 clamp(1.4rem,1rem + 1.8vw,2.2rem)/1.22 var(--font-display); letter-spacing:-.03em; color:var(--ink)}
.pullquote em{font-family:var(--font-serif); font-style:italic; color:var(--accent-strong)}

/* index-numeral — the oversized section number for text-led pages. */
.idx{font:600 var(--fs-mega)/.8 var(--font-display); letter-spacing:-.05em; color:var(--ink); opacity:.1; user-select:none}

/* hero-split — the two-column product hero: copy beside a built mock. Stacks
   under 860px. MUST be a class, not an inline grid-template (media-query bug). */
.hero-split{display:grid; gap:var(--s-xl)}
@media(min-width:860px){.hero-split{grid-template-columns:1.05fr .95fr; align-items:center}}

/* contact form — native controls, visible labels, 44px+ rows, aria-describedby
   errors. `.form-consent` (not `.consent`) avoids the cookie-banner collision. */
.formcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl);
  padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--sh-lg)}
.field{display:grid; gap:.4rem; margin-bottom:var(--s-md)}
.field>label{font:600 var(--fs-sm)/1.3 var(--font-body); color:var(--ink)}
.field .hint{font-size:var(--fs-xs); color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%; min-height:48px; padding:.75rem .9rem;
  border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--base);
  font:var(--fs-base)/1.5 var(--font-body); color:var(--ink)}
.field textarea{min-height:9rem; resize:vertical}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2.6rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)}
.field .err{font-size:var(--fs-xs); font-weight:600; color:var(--danger)}
.field--bad input,.field--bad textarea{border-color:var(--danger)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-consent{font-size:var(--fs-sm); color:var(--ink-2); line-height:1.6; margin-bottom:var(--s-md)}
.sent{display:flex; gap:1rem; align-items:flex-start; background:var(--primary-soft);
  border-radius:var(--r-lg); padding:1.2rem 1.3rem; margin-bottom:var(--s-md)}
.sent .tk{flex:none; margin-top:.15rem; color:var(--primary)}
.sent b{display:block; font:600 var(--fs-lead)/1.25 var(--font-display); letter-spacing:-.02em; color:var(--ink)}
.sent p{margin-top:.4rem; font-size:var(--fs-sm); color:var(--ink-2)}

/* expect-list — the numbered "what to expect" list beside a form. */
.expect{list-style:none; padding:0; margin:var(--s-lg) 0 0; display:grid; gap:1rem; counter-reset:e}
.expect li{display:flex; gap:.9rem; align-items:flex-start; font-size:var(--fs-sm); color:var(--ink-2)}
.expect li::before{counter-increment:e; content:counter(e); flex:none;
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary); font:700 var(--fs-xs)/1 var(--font-body)}
.expect b{color:var(--ink); font-weight:600}

/* helpcard — the "still need help?" card that closes the FAQ. */
.helpcard{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem;
  margin-top:var(--s-2xl); padding:clamp(1.3rem,3vw,2rem); border-radius:var(--r-2xl);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-md)}
.helpcard h2{font-size:var(--fs-h3)}
.helpcard p{margin-top:.5rem; font-size:var(--fs-sm); color:var(--ink-2); max-width:44ch}

/* searchbar — a real <form> posting to WP ?s=, styled as a pill. No JS. */
.searchbar{display:flex; gap:.6rem; margin-top:var(--s-lg); max-width:34rem}
.searchbar input{flex:1; min-height:52px; padding:.8rem 1.1rem; border-radius:var(--r-pill);
  border:1px solid var(--border-strong); background:var(--surface);
  font:var(--fs-base)/1.4 var(--font-body); color:var(--ink)}

/* legal TOC — the sticky table-of-contents + text column. `.legal-doc` becomes a
   grid in the legal port (coupled to markup); `.toc`/`.legal-body` are safe now. */
.toc h2{font:700 var(--fs-xs)/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:.9rem}
.toc ol{list-style:none; padding:0; margin:0; display:grid; counter-reset:t}
.toc a{display:flex; gap:.7rem; align-items:baseline; min-height:44px; padding:.55rem .2rem;
  font-size:var(--fs-sm); color:var(--ink-2); text-decoration:none; line-height:1.35}
.toc a::before{counter-increment:t; content:counter(t,decimal-leading-zero);
  font-size:var(--fs-xs); font-weight:700; color:var(--border-strong); flex:none}
.toc a:hover{color:var(--ink)}
.legal-body h2{font-size:var(--fs-h3); margin-top:var(--s-xl); scroll-margin-top:7rem}
.legal-body h2:first-child{margin-top:0}
.legal-body p,.legal-body ul{margin-block:1rem; line-height:1.7; max-width:68ch}
.legal-body ul{padding-left:1.3rem}
.legal-body li{margin-block:.4rem}
.legal-body mark{background:var(--accent-soft); color:var(--accent-strong);
  padding:.1em .35em; border-radius:var(--r-sm); font-weight:600}

/* tick — the built confirmation mark on /thank-you. CSS only, no image. */
.tick{width:96px; height:96px; border-radius:50%; display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary); margin-bottom:var(--s-lg)}

/* onward — the "while you wait" link list that stops a page being a dead end. */
.onward{list-style:none; padding:0; margin:var(--s-xl) 0 0; display:grid; gap:.6rem; max-width:34rem}
.onward a{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:56px; padding:1rem 1.2rem; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border); text-decoration:none; color:var(--ink);
  font-weight:600; font-size:var(--fs-sm);
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.onward a:hover{border-color:var(--border-strong); transform:translateY(-2px); color:var(--ink)}
.onward .ar{color:var(--accent-strong); flex:none}

/* ══════════════════════════════════════════════  LEGAL / TRUST (§8.12)  ═════ */
/* Long-form legal prose. NB: `.legal` is the footer fine-print row — this is `.legal-doc`. */
.legal-doc{max-width:var(--content)}
.legal-doc h2{font:600 var(--fs-h3)/1.2 var(--font-display); letter-spacing:-.015em; margin-top:2.4rem}
.legal-doc h2:first-child{margin-top:0}
.legal-doc p{margin-block:1rem; line-height:1.7; color:var(--ink)}
.legal-doc ul{margin-block:1rem; padding-left:1.3rem}
.legal-doc li{margin-block:.5rem; line-height:1.65}
.legal-doc a{color:var(--accent-strong); text-underline-offset:.18em}
.legal-doc code{background:var(--base-2); padding:.1em .4em; border-radius:var(--r-sm); font-size:.9em}
.legal-doc mark{background:var(--accent-soft); color:var(--accent-strong); padding:.05em .35em; border-radius:var(--r-sm); font-weight:600}
.legal-links{margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--border);
  font-size:var(--fs-sm); color:var(--ink-2)}
.legal-links a{color:var(--accent-strong)}

/* General content table (blog age table, cookie/data tables). `.cmp` is the wider competitor grid. */
.gu-table{margin:1.6rem 0; overflow-x:auto}
.gu-table table{width:100%; border-collapse:collapse; font-size:var(--fs-sm)}
.gu-table th,.gu-table td{padding:.8rem .8rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:top}
.gu-table thead th{font:700 var(--fs-xs)/1.2 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}

/* ═══════════════════════════════════════════════  FOCUS (a11y, WCAG 2.4.7)  ═════ */
/* A branded, always-visible keyboard focus ring. accent-strong is 7.10:1 on base. */
:focus-visible{ outline:3px solid var(--accent-strong); outline-offset:2px; border-radius:3px }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent-strong); outline-offset:2px }
/* Mouse users who haven't tabbed keep a clean look; :focus-visible handles keyboard. */

/* ══════════════════════════════════════════════════════════════════════════
   OWNER OVERRIDES
   1) Critical fix — an element carrying the [hidden] attribute must STAY hidden
      even though its class sets `display`. Without this the invisible full-screen
      popup/consent overlay (opacity:0, inset:0) intercepts every click and blocks
      text selection across the whole page.
   2) Motion — entrance/scroll animations removed site-wide on owner request; kept
      only on the closing CTA band ("Get early access"). Hover feedback retained.
   ════════════════════════════════════════════════════════════════════════ */
.popup[hidden], .consent[hidden]{ display:none !important }

/* Reveals: visible immediately everywhere; the closing CTA band keeps its reveal. */
.rv{ opacity:1 !important; transform:none !important; transition:none !important }
.cta .rv{ opacity:0 !important; transform:translateY(20px) !important;
  transition:opacity .8s var(--ease), transform .8s var(--ease) !important }
.cta .rv.in{ opacity:1 !important; transform:none !important }
/* Hero + decorative entrance/loops off. */
.line>span{ opacity:1 !important; transform:none !important; transition:none !important }
.fade-up{ opacity:1 !important; transform:none !important; transition:none !important }
.chip{ animation:none !important; opacity:1 !important; transform:none !important; transition:none !important }
.d{ opacity:1 !important; transform:none !important; animation:none !important }
/* .track keeps its continuous right-to-left marquee loop — it's a decorative
   ambient loop, not an entrance/scroll reveal. Reduced-motion still stops it below. */
.q{ opacity:1 !important; transform:none !important; transition:none !important }

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .line>span,.fade-up,.chip,.rv,.q,.d{opacity:1!important; transform:none!important}
  .track{animation:none !important; transform:none !important}
  .bleed img{position:absolute; inset:0; height:100%}
}