/* ==========================================================================
   TOKENS — the incumbent stresstherapist.net system (DESIGN.md front matter)
   ========================================================================== */
:root{
  /* Colour ------------------------------------------------------------- */
  --green:        #2F9B79;   /* ds: therapy-green — FILL only, see note below */
  --green-deep:   #26825F;   /* ds: therapy-green-deep — hover + small text   */
  --green-tint:   #EAF5F0;   /* ds: therapy-green-tint — Key lessons only     */
  --room-black:   #0F0F0F;   /* ds: room-black                                */
  --brand-red:    #C0272D;   /* ds: brand-red — LOGO + NAV ONLY               */
  --ink:          #333333;   /* ds: ink                                       */
  --ink-soft:     #6B6B6B;   /* ds: ink-soft                                  */
  --paper:        #FFFFFF;   /* ds: paper                                     */
  --paper-warm:   #F7F6F4;   /* ds: paper-warm                                */
  --rule:         #E6E4E0;   /* ds: rule-line                                 */
  --free-pink:    #E05FA0;   /* ds: free-pink   ┐ rationed gradient           */
  --free-amber:   #F5A623;   /* ds: free-amber  ┘                             */
  --amber-tint:   #FDF3E3;   /* ds: analogy-amber-tint — Analogy block only   */

  /* CONTRAST NOTE: white on --green measures 3.45:1. That clears WCAG AA for
     LARGE text only, so every green button sets 19px/700 (= AA large). Green is
     never used for small text; small labels use --green-deep (4.73:1 on white).
     Hover --green-deep with white = 4.73:1 (AA normal). Hand-computed. */

  /* Type --------------------------------------------------------------- */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    Arial, "Helvetica Neue", Helvetica, sans-serif;

  --t-display:  clamp(2rem,    1.35rem + 2.7vw, 3.25rem);   /* 32 → 52 */
  --t-headline: clamp(1.5rem,  1.28rem + 0.9vw, 2rem);      /* 24 → 32 */
  --t-title:    clamp(1.125rem,1.05rem + 0.3vw, 1.3125rem); /* 18 → 21 */
  --t-body:     1.0625rem;                                   /* 17      */
  --t-small:    0.875rem;                                    /* 14      */
  --t-label:    0.8125rem;                                   /* 13      */

  --lh-tight: 1.15;
  --lh-title: 1.3;
  --lh-body:  1.62;   /* ds: Reading Rule — prose breathes                    */
  --lh-card:  1.45;   /* live cards measure ~1.3; opened up for depleted eyes */

  /* Shape — three radii, no others -------------------------------------- */
  --r-card: 18px;
  --r-btn:  12px;
  --r-pill: 999px;

  /* Rhythm -------------------------------------------------------------- */
  --s-section: clamp(3.5rem, 2rem + 6vw, 6rem);   /* ds: section 96px        */
  --s-block:   clamp(2rem, 1.4rem + 2.4vw, 2.5rem);
  --s-card:    clamp(1.5rem, 1.1rem + 1.6vw, 1.75rem);

  --wrap:   1080px;   /* ds: grid/marketing container */
  --read:   66ch;     /* ds: Reading Rule 62–68ch     */
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);

  --dur: 300ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   RESET + BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:var(--t-body);line-height:var(--lh-body);
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:700;letter-spacing:-.012em}
p{margin:0}
img,svg{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}

/* Skip link + universal focus ring (the draft had ZERO focus rules) */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);
  color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--r-btn) 0;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--green-deep);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.deepen :focus-visible,.pbar :focus-visible{outline-color:#fff}
::selection{background:var(--green-tint);color:var(--ink)}

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.read{width:100%;max-width:calc(var(--read) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

/* Eyebrow — hangs in the left margin on wide screens (Twofold trait).
   Set in --green-deep, never --green: 13px green would fail AA. */
.eyebrow{font-family:var(--font-display);font-size:var(--t-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);margin:0 0 .9rem}
.eyebrow.on-black{color:var(--paper);opacity:.72}
.eyebrow.neutral{color:var(--ink-soft)}

.lead{font-size:clamp(1.125rem,1.03rem + .42vw,1.3125rem);line-height:1.55;max-width:34ch}
.prose{max-width:var(--read)}
.prose p + p{margin-top:1.15em}
.muted{color:var(--ink-soft)}
.small{font-size:var(--t-small);line-height:1.5}

/* Buttons — exactly four variants. 19px/700 keeps white-on-green at AA large. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-size:1.1875rem;font-weight:700;line-height:1;
  padding:1.0625rem 1.75rem;border-radius:var(--r-btn);
  border:2px solid transparent;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
  min-height:56px;  /* generous tap target — PRODUCT.md accessibility */
}
.btn--green{background:var(--green);color:#fff}
.btn--green:hover,.btn--green:focus-visible{background:var(--green-deep)}
.btn--black{background:var(--room-black);color:#fff}
.btn--black:hover,.btn--black:focus-visible{background:#000}
.btn--white{background:var(--paper);color:var(--room-black)}
.btn--white:hover,.btn--white:focus-visible{background:var(--green-tint)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--ink);background:var(--paper-warm)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;cursor:progress}
.btn--full{width:100%}
.btn--sm{font-size:var(--t-small);padding:.75rem 1.1rem;min-height:44px}

.tlink{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);
  padding-bottom:2px;transition:border-color var(--dur) var(--ease)}
.tlink:hover,.tlink:focus-visible{border-color:var(--ink)}

/* Chips — pill, per token set */
.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display);
  font-size:var(--t-label);font-weight:600;letter-spacing:.04em;
  padding:.35rem .75rem;border-radius:var(--r-pill);white-space:nowrap}
.chip--live{background:var(--green-tint);color:var(--green-deep)}
/* draft's .chip.soon was #a8710e on #fdf3e3 ≈ 3.8:1 — failed AA. Replaced with
   ink on a hairline outline (≈12.6:1). */
.chip--soon{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.chip--dur{background:rgba(255,255,255,.16);color:#fff;font-variant-numeric:tabular-nums}
.on-dark .chip--live{background:rgba(255,255,255,.12);color:#fff}

/* ✔ checklist — the live motif. Black tick, hanging indent (ds-patterns §5). */
.ticks li{position:relative;padding-left:1.85rem;line-height:var(--lh-card)}
.ticks li + li{margin-top:.7rem}
.ticks li::before{content:"✔";position:absolute;left:0;top:0;font-size:.95em;line-height:inherit}
.on-dark .ticks li::before{color:#fff}

/* Price — the ONE rationed gradient instance per screen */
.price{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.price s{font-family:var(--font-display);font-weight:700;font-size:1.375rem;
  color:var(--ink-soft);text-decoration-thickness:2px}
.price .free{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.75rem,1.4rem + 1.5vw,2.5rem);line-height:1;
  background:linear-gradient(90deg,var(--free-pink),var(--free-amber));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.on-dark .price s{color:rgba(255,255,255,.55)}
/* Plain variant for every NON-featured card, so the gradient stays at one
   instance per screen (Rationed Gradient Rule). */
.price--plain .free{background:none;color:var(--ink);-webkit-text-fill-color:currentColor;
  font-size:1.25rem}
.on-dark .price--plain .free{color:#fff;-webkit-text-fill-color:#fff}
.price--plain s{font-size:1.0625rem}

.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* Surfaces — depth from surface change, never shadow (ds elevation) */
.band{padding-block:var(--s-section)}
.band--warm{background:var(--paper-warm)}
.band--black{background:var(--room-black);color:var(--paper)}
.on-dark{color:var(--paper)}
.on-dark .muted{color:rgba(255,255,255,.66)}

/* ==========================================================================
   MEDIA PLACEHOLDER — honest, never a fabricated poster
   States: idle · loading · unavailable
   ========================================================================== */
.poster{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;
  background:var(--room-black);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 11px);
  display:grid;place-items:center;width:100%;border:0;padding:0;font:inherit;color:#fff}
button.poster{cursor:pointer}
.poster__ring{width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.55);
  display:grid;place-items:center;color:#fff;font-size:1.25rem;padding-left:4px;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.poster__tag{position:absolute;top:.85rem;left:.9rem;font-family:var(--font-display);
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.poster__dur{position:absolute;bottom:.85rem;right:.9rem}
.poster--sm{border-radius:var(--r-btn)}
.poster--sm .poster__ring{width:40px;height:40px;font-size:.85rem}
.poster--sm .poster__tag{display:none}
a:hover .poster__ring,button.poster:hover .poster__ring,
a:focus-visible .poster__ring,button.poster:focus-visible .poster__ring{
  background:var(--green);border-color:var(--green)}
/* LOADING */
.poster[data-state="loading"] .poster__ring{border-color:rgba(255,255,255,.28);opacity:.5}
.poster[data-state="loading"] .poster__msg{display:block}
/* UNAVAILABLE (empty media) */
.poster[data-state="unavailable"] .poster__ring{opacity:.28}
.poster[data-state="unavailable"] .poster__msg{display:block}
.poster__msg{display:none;position:absolute;left:.9rem;right:.9rem;bottom:.85rem;
  font-family:var(--font-body);font-size:var(--t-small);line-height:1.4;
  color:rgba(255,255,255,.82);text-align:left}
.poster[data-state="unavailable"] .poster__dur{display:none}

/* ==========================================================================
   HAIRLINE ROW REGISTER — replaces the draft's repeat(3,1fr) monotony.
   Reference: Twofold Therapy (index | title | note split by 1px rules).
   Index numeral and title share a SIZE and differ only in family/weight —
   "pairing by shape, not size" (references.md §1).
   ========================================================================== */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;
  gap:1.5rem;align-items:start;padding-block:var(--s-block);
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
  transition:background-color var(--dur) var(--ease),padding-inline var(--dur) var(--ease),margin-inline var(--dur) var(--ease)}
.row:hover,.row:focus-visible{background:var(--paper-warm);padding-inline:1rem;margin-inline:-1rem}
.row__idx{font-family:var(--font-display);font-weight:500;font-size:var(--t-title);
  line-height:var(--lh-title);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.row__title{font-size:var(--t-title);line-height:var(--lh-title);margin-bottom:.4rem;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.012em;display:block}
.row__note{font-size:var(--t-small);line-height:1.5;color:var(--ink-soft);max-width:54ch;display:block}
.row__meta{text-align:right;font-size:var(--t-small);color:var(--ink-soft);line-height:1.5;white-space:nowrap}
.row__meta b{font-family:var(--font-display);color:var(--ink);font-weight:600;display:block}
.row__arrow{font-size:1.25rem;color:var(--ink-soft);align-self:center;
  transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.row:hover .row__arrow,.row:focus-visible .row__arrow{transform:translateX(4px);color:var(--ink)}
.row__flag{display:inline-block;margin-top:.65rem;font-size:var(--t-label);
  color:var(--green-deep);font-family:var(--font-display);font-weight:600}
.row--soon .row__title{color:var(--ink-soft)}
@media (max-width:720px){
  .row{grid-template-columns:2.25rem minmax(0,1fr);gap:.9rem 1rem}
  .row__meta{grid-column:2;text-align:left;margin-top:.6rem;white-space:normal}
  .row__meta b{display:inline}
  .row__arrow{display:none}
}

/* Lesson rows carry a small placeholder poster in a 4th slot */
.row--media{grid-template-columns:3rem 9.5rem minmax(0,1fr) auto}
@media (max-width:900px){.row--media{grid-template-columns:3rem 7rem minmax(0,1fr)}
  .row--media .row__arrow{display:none}}
@media (max-width:600px){.row--media{grid-template-columns:2.25rem minmax(0,1fr)}
  .row--media .poster{grid-column:1 / -1;max-width:14rem}}

/* ==========================================================================
   PROTOTYPE CHROME — not a production surface
   ========================================================================== */
.pbar{background:var(--room-black);color:#fff;position:sticky;top:0;z-index:40}
.pbar__in{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  max-width:var(--wrap);margin-inline:auto;padding:.6rem var(--gutter)}
.pbar__lab{font-family:var(--font-display);font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-right:.25rem}
.pbar__btn{background:transparent;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85);
  font-family:var(--font-display);font-size:var(--t-label);font-weight:600;
  padding:.42rem .8rem;border-radius:var(--r-pill);cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.pbar__btn:hover{background:rgba(255,255,255,.14);color:#fff}
.pbar__btn[aria-current="true"]{background:var(--paper);color:var(--room-black);border-color:var(--paper)}

/* ==========================================================================
   SITE NAV — the ONLY place brand red is permitted (Locked Red Rule)
   #C0272D on white = 5.88:1 → AA for normal text. Hand-computed.
   ========================================================================== */
.nav{border-bottom:1px solid var(--rule);background:var(--paper)}
.nav__in{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  max-width:var(--wrap);margin-inline:auto;padding:1.1rem var(--gutter)}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:.02em;
  text-decoration:none;line-height:1.1;display:block}
.logo .s{color:var(--brand-red)}
.logo .t{color:var(--room-black)}
.logo small{display:block;font-family:var(--font-body);font-weight:400;font-size:.625rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:.25rem}
.nav__links{display:flex;gap:1.4rem;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav__links a{color:var(--brand-red);text-decoration:none;font-size:var(--t-small);
  border-bottom:1px solid transparent;padding-bottom:2px}
.nav__links a:hover,.nav__links a:focus-visible{border-bottom-color:currentColor}
.nav__cta{font-family:var(--font-display);font-weight:700;font-size:var(--t-small);
  background:var(--green);color:#fff!important;padding:.7rem 1.1rem;border-radius:var(--r-btn);
  border-bottom:0!important;transition:background-color var(--dur) var(--ease)}
.nav__cta:hover,.nav__cta:focus-visible{background:var(--green-deep)}
@media (max-width:760px){
  .nav__links{margin-left:0;width:100%;gap:1rem}
  .nav__links a:not(.nav__cta){font-size:var(--t-label)}
}

/* ==========================================================================
   SCREENS + SECTION HEADS
   ========================================================================== */
.screen[hidden]{display:none}

.shead{margin-bottom:var(--s-block)}
.shead h2{font-size:var(--t-headline);line-height:1.22;max-width:22ch}
.shead p{margin-top:.85rem;color:var(--ink-soft);max-width:54ch;font-size:var(--t-small);line-height:1.55}
@media (min-width:1000px){
  .shead{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:0 2.75rem}
  .shead .eyebrow{grid-column:1;text-align:right;margin:0;padding-top:.4rem}
  .shead h2,.shead p{grid-column:2}
}

.crumb{font-size:var(--t-small);color:var(--ink-soft);margin-bottom:1.25rem}
.crumb a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.crumb a:hover,.crumb a:focus-visible{color:var(--ink);border-bottom-color:currentColor}
.on-dark .crumb,.on-dark .crumb a{color:rgba(255,255,255,.68)}
.on-dark .crumb a:hover{color:#fff}

/* --- Flow map ------------------------------------------------------------- */
.flow__note{margin-top:var(--s-block);padding:var(--s-card);background:var(--green-tint);
  border-radius:var(--r-card);font-size:var(--t-small);line-height:1.65;max-width:var(--read)}

/* --- Home hero: black band, highlight marks (live-site treatment) ---------- */
.hero{background:var(--room-black);color:var(--paper);padding-block:clamp(3.5rem,2rem + 7vw,6.5rem)}
.hero h1{font-size:var(--t-display);line-height:var(--lh-tight);max-width:16ch}
.hero__sub{margin-top:1.5rem;max-width:46ch;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  line-height:1.55;color:rgba(255,255,255,.88)}
mark{background:transparent;color:inherit;box-decoration-break:clone;
  -webkit-box-decoration-break:clone;padding:0 .18em;border-radius:3px}
/* Tonal washes, NOT brand red as text — Locked Red Rule holds. */
mark.pain{background:rgba(192,39,45,.32);color:#fff}
mark.gold{background:rgba(245,166,35,.22);color:#FBD9A4}
.hero__cta{margin-top:var(--s-block);display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center}
.hero__meta{font-size:var(--t-small);color:rgba(255,255,255,.66);max-width:24ch}

/* --- Featured room card — deliberate 7/5 asymmetry ------------------------ */
.feature{background:var(--room-black);color:var(--paper);border-radius:var(--r-card);
  padding:clamp(1.75rem,1rem + 3vw,3rem);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1.75rem,1rem + 3vw,3.5rem);align-items:start}
.feature h3{font-size:clamp(1.625rem,1.3rem + 1.4vw,2.25rem);line-height:1.18;margin-top:.9rem}
.feature__scene{margin-top:1.1rem;color:rgba(255,255,255,.84);line-height:var(--lh-card);max-width:40ch}
.feature__aside{border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(1.25rem,.6rem + 2vw,2rem)}
.feature__aside .ticks{font-size:var(--t-small)}
.feature__cta{margin-top:var(--s-block)}
.feature__series{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.18);
  font-size:var(--t-small);color:rgba(255,255,255,.7)}
@media (max-width:880px){
  .feature{grid-template-columns:1fr}
  .feature__aside{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding-left:0;padding-top:1.5rem}
}

/* --- Two secondary live rooms -------------------------------------------- */
.roomduo{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1.25rem}
@media (max-width:880px){.roomduo{grid-template-columns:1fr}}
.rcard{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:var(--s-card);display:flex;flex-direction:column;gap:.9rem;
  text-decoration:none;color:inherit;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.rcard:hover,.rcard:focus-visible{border-color:var(--ink);background:var(--paper-warm)}
.rcard h3{font-size:var(--t-title);line-height:var(--lh-title)}
.rcard p{font-size:var(--t-small);line-height:var(--lh-card);color:var(--ink-soft)}
.rcard .ticks{font-size:var(--t-small)}
.rcard__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.rcard__go{font-family:var(--font-display);font-weight:700;font-size:var(--t-small)}
.rcard__go span{transition:transform var(--dur) var(--ease);display:inline-block}
.rcard:hover .rcard__go span{transform:translateX(4px)}

/* --- Room page: the one decision, two equal paths -------------------------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:stretch}
@media (max-width:880px){.paths{grid-template-columns:1fr}}
.path{border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--s-card);
  display:flex;flex-direction:column;background:var(--paper)}
.path--open{border:2px solid var(--green)}
.path h3{font-size:var(--t-title);line-height:var(--lh-title);margin-bottom:.75rem}
.path > p{font-size:var(--t-small);line-height:var(--lh-card);color:var(--ink-soft)}
.path .ticks{margin:1.25rem 0;font-size:var(--t-small)}
.path__act{margin-top:auto}
.path__note{margin-top:.9rem;font-size:var(--t-label);color:var(--ink-soft);line-height:1.55}

/* Form — default / hover / focus / loading / success / error.
   ERROR IS NOT RED: the Locked Red Rule forbids red in content, so the error
   state uses a 2px near-black border + bold ink text + a ⚠ glyph. */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.9rem}
.field label{font-family:var(--font-display);font-size:var(--t-label);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.field input{font-family:var(--font-body);font-size:var(--t-body);padding:.95rem 1rem;
  border:1px solid var(--rule);border-radius:var(--r-btn);background:var(--paper);color:var(--ink);
  min-height:56px;transition:border-color var(--dur) var(--ease)}
.field input::placeholder{color:#8A8A8A}
.field input:hover{border-color:var(--ink-soft)}
.field input:focus-visible{border-color:var(--green-deep);outline:2px solid var(--green-deep);outline-offset:1px}
.field input[aria-invalid="true"]{border:2px solid var(--room-black)}
.formmsg{font-size:var(--t-small);line-height:1.55;margin-top:.75rem;display:none}
.formmsg[data-show="true"]{display:block}
.formmsg--error{font-weight:700;color:var(--ink)}
.formmsg--ok{color:var(--green-deep);font-weight:700}

/* --- Series hub feature row ------------------------------------------------ */
.featrow{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:var(--s-block);
  align-items:center;padding-block:var(--s-block);border-top:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:background-color var(--dur) var(--ease)}
.featrow:hover,.featrow:focus-visible{background:var(--paper-warm)}
.featrow h3{font-size:clamp(1.375rem,1.15rem + 1vw,1.875rem);line-height:1.2;margin:.55rem 0 .65rem}
.featrow p{color:var(--ink-soft);line-height:var(--lh-card);max-width:46ch}
.featrow__meta{margin-top:1.1rem;font-size:var(--t-small);color:var(--ink-soft)}
@media (max-width:760px){.featrow{grid-template-columns:1fr;gap:1.25rem}}

.hubmeta{display:flex;flex-wrap:wrap;gap:.6rem 2.25rem;margin-top:var(--s-block);
  padding-top:1.25rem;border-top:1px solid var(--rule);font-size:var(--t-small);color:var(--ink-soft)}
.hubmeta b{font-family:var(--font-display);color:var(--ink);font-size:var(--t-body);font-weight:600}
.on-dark .hubmeta{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.68)}
.on-dark .hubmeta b{color:#fff}

/* ==========================================================================
   LESSON ARTICLE — labels hang in the left margin (Twofold), prose at 66ch.
   This is the fix for the draft's "stack of labelled boxes".
   ========================================================================== */
.article{width:100%;max-width:calc(9rem + 2.75rem + var(--read) + var(--gutter)*2);
  margin-inline:auto;padding-inline:var(--gutter)}
.blk{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:0 2.75rem;
  margin-bottom:var(--s-section)}
.blk__label{grid-column:1;text-align:right;padding-top:.4rem;
  font-family:var(--font-display);font-size:var(--t-label);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);line-height:1.6}
.blk__label b{display:block;color:var(--green-deep);font-weight:600}
.blk__body{grid-column:2;min-width:0}
.blk__body h2{font-size:var(--t-headline);line-height:1.22;margin-bottom:.9rem}
.blk__body p{font-size:var(--t-body);line-height:var(--lh-body)}
.blk__body p + p{margin-top:1.15em}
@media (max-width:900px){
  .blk{grid-template-columns:1fr;gap:.85rem}
  .blk__label{text-align:left;padding-top:0}
  .blk__label b{display:inline}
  .blk__body{grid-column:1}
}

.watch__cap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:.9rem;font-size:var(--t-small);color:var(--ink-soft)}
.watch__title{font-family:var(--font-display);font-weight:600;color:var(--ink)}

/* Analogy — amber tint card (this block only) */
.analogy{background:var(--amber-tint);border-radius:var(--r-card);padding:var(--s-card)}
.analogy p{font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);line-height:1.6}

/* Story — the one black card in the article */
.story{background:var(--room-black);color:var(--paper);border-radius:var(--r-card);
  padding:clamp(1.75rem,1.1rem + 2.4vw,2.5rem)}
.story blockquote{margin:0;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.6}
.story cite{display:block;margin-top:1.25rem;font-style:normal;font-size:var(--t-label);
  color:rgba(255,255,255,.62)}

/* Key lessons — green tint checklist (this block only) */
.keys{background:var(--green-tint);border-radius:var(--r-card);padding:var(--s-card)}
.keys li{font-size:var(--t-body);line-height:1.55}

/* Try this — numbered spine with a connector line (Mave timeline trait) */
.try{position:relative;padding-left:3.25rem;counter-reset:step}
.try::before{content:"";position:absolute;left:1.0625rem;top:1.5rem;bottom:1.5rem;width:1px;
  background:var(--green);opacity:.4;transform-origin:top;transform:scaleY(0);
  transition:transform 700ms var(--ease)}
.try.is-in::before{transform:scaleY(1)}
.try li{position:relative;padding-bottom:1.7rem;line-height:var(--lh-body)}
.try li:last-child{padding-bottom:0}
.try li::before{counter-increment:step;content:counter(step);
  position:absolute;left:-3.25rem;top:-.1rem;width:2.125rem;height:2.125rem;border-radius:50%;
  background:var(--paper);border:1px solid var(--green);color:var(--green-deep);
  font-family:var(--font-display);font-weight:700;font-size:var(--t-small);
  display:grid;place-items:center}

/* Up next */
.upnext{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr) auto;gap:1.5rem;
  align-items:center;text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:var(--r-card);padding:1.25rem;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.upnext:hover,.upnext:focus-visible{border-color:var(--ink);background:var(--paper-warm)}
@media (max-width:720px){.upnext{grid-template-columns:1fr}.upnext .row__arrow{display:none}}

/* Deepen — free-session application. Last block, ONE primary action, no prices */
.deepen{background:var(--room-black);color:var(--paper);border-radius:var(--r-card);
  padding:clamp(1.75rem,1.1rem + 3vw,3rem)}
.deepen h2{font-size:var(--t-headline);line-height:1.22;max-width:24ch}
.deepen > p{margin-top:1rem;color:rgba(255,255,255,.84);line-height:var(--lh-body);max-width:56ch}
.deepen__cols{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,1rem + 2.4vw,3rem);align-items:center;
  margin-top:clamp(1.75rem,1.2rem + 2vw,2.75rem)}
@media (max-width:860px){.deepen__cols{grid-template-columns:1fr;align-items:start}}

/* left column — the application card (the screen's single primary action) */
.apply{background:var(--paper);color:var(--ink);border-radius:var(--r-card);
  padding:clamp(1.5rem,1.1rem + 1.6vw,2rem);container-type:inline-size}
.apply__lead{font-family:var(--font-display);font-size:var(--t-title);font-weight:600;
  line-height:var(--lh-title);color:var(--room-black);max-width:24ch}
/* names pair up only when the CARD is wide enough — stacked is the safe default */
.apply__row{display:grid;gap:0 1rem}
@container (min-width:360px){.apply__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.4rem;margin-top:1.15rem}
.field label{font-family:var(--font-display);font-size:var(--t-label);font-weight:600;
  letter-spacing:.04em;color:var(--ink)}
.field input{font-family:var(--font-body);font-size:var(--t-body);color:var(--ink);
  background:var(--paper-warm);border:1px solid var(--rule);border-radius:var(--r-btn);
  padding:.75rem .9rem;min-height:48px;width:100%;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.field input::placeholder{color:var(--ink-soft)}
.field input:hover{border-color:#CFCCC7}
.field input:focus-visible{border-color:var(--green-deep);background:var(--paper);
  outline:2px solid var(--green-deep);outline-offset:2px}
.apply .btn{margin-top:1.6rem;width:100%}

/* right column — what the session is */
.offer h3{font-family:var(--font-display);font-size:var(--t-title);font-weight:700;
  line-height:var(--lh-title);color:var(--paper);max-width:22ch}
.offer__lead{margin-top:.85rem;color:rgba(255,255,255,.84);font-size:var(--t-small)}
.deepen ul{margin:1.1rem 0 0;display:grid;gap:.9rem;list-style:none;padding:0}
.deepen ul li{font-size:var(--t-small);line-height:var(--lh-card);color:rgba(255,255,255,.84);
  padding-left:1.85rem;position:relative}
.deepen ul li::before{content:"✓";position:absolute;left:0;top:-.05em;
  font-size:1rem;font-weight:700;color:#6FD3AE}

/* Footer */
.foot{border-top:1px solid var(--rule);padding-block:var(--s-block);
  font-size:var(--t-small);color:var(--ink-soft)}
.foot__in{display:flex;gap:.75rem 2rem;flex-wrap:wrap;align-items:baseline;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ==========================================================================
   MOTION — opacity only, disabled entirely under reduced motion
   ========================================================================== */
.js .reveal{opacity:0;transition:opacity 450ms var(--ease)}
.js .reveal.is-in{opacity:1}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1!important}
  .row:hover,.row:focus-visible{padding-inline:0;margin-inline:0}
  .row:hover .row__arrow,.row:focus-visible .row__arrow{transform:none}
  .try::before{transform:scaleY(1)}
}

/* --- production additions (no prototype chrome) --- */
.pbar{display:none}
.screen[hidden]{display:block}