/* ===========================================================================
   fundrivingclinic.com - COMPONENT FRAMEWORK
   ---------------------------------------------------------------------------
   Every value comes from tokens.css. No literal colour or font appears below
   except pure black/white overlays on the device chrome.

   The centrepiece is the COURSE component: a rendered, to-scale picture of
   the actual online clinic - chapter progress, lesson body, a real quiz card,
   the 8-hour timer and the autosave state. It is drawn in CSS, not
   photographed, so it can never drift from the price or the claims and there
   is no screenshot to keep in step.
   ======================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);
     font-family:var(--font-body);font-size:16px;line-height:1.6;
     -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);
     letter-spacing:-.03em;line-height:1.08;margin:0}
p{margin:0}
a{color:inherit}

.wrap{max-width:1080px;margin:0 auto;padding:0 32px}
@media(max-width:620px){.wrap{padding:0 20px}}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 32px}

/* ---------- primitives --------------------------------------------------- */
.eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:800;padding:6px 13px;
  border-radius:var(--radius-pill);background:var(--accent-soft);
  color:var(--accent-deep)}
.btn{display:inline-block;text-decoration:none;font-weight:800;font-size:16px;
  padding:17px 32px;border-radius:var(--radius-pill);background:var(--action);
  color:var(--action-ink);border:0;cursor:pointer;letter-spacing:-.01em}
.btn-sm{padding:10px 20px;font-size:14px}
.btn-ghost{background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line)}
.chip{display:inline-block;font-size:12.5px;font-weight:700;padding:8px 14px;
  border-radius:var(--radius-pill);background:var(--surface);color:var(--body);
  min-width:0;overflow-wrap:anywhere}
.mark{background:linear-gradient(transparent 58%,var(--accent) 58%);
  color:var(--ink);font-style:normal}
.lede{font-size:18px;line-height:1.58;color:var(--body);max-width:var(--measure)}
.sub{font-size:15px;line-height:1.6;color:var(--muted);max-width:var(--measure)}

/* ---------- nav ---------------------------------------------------------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 32px;border-bottom:1px solid var(--line);background:var(--bg)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;font-weight:800;
  font-size:18px;color:var(--ink);font-family:var(--font-display);
  letter-spacing:-.02em;text-decoration:none}
.brand .seal{width:30px;height:30px;flex:none;border-radius:9px;
  background:var(--action);color:var(--action-ink);display:grid;
  place-items:center;font-size:14px;font-weight:800}
.nav-links{display:flex;align-items:center;gap:22px;font-size:14px}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600}
/* PITFALL: .nav-links a (0,1,1) outranks .btn (0,1,0) and would mute the
   button label. Any primitive placed inside a scoped link rule needs the
   scope repeated. */
.nav-links a.btn{color:var(--action-ink)}
.nav-links a.btn-ghost{color:var(--ink)}
@media(max-width:900px){.nav-links{display:none}}

/* ---------- hero: copy beside the running course ------------------------- */
.hero{padding:54px 0 8px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:48px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}}
.hero h1{font-size:clamp(30px,4vw,47px);font-weight:800;max-width:17ch;
  text-wrap:balance;margin:18px 0 20px}
.hero .lede{margin-bottom:14px}
.hero .lede-2{font-size:15.5px;line-height:1.6;color:var(--muted);
  max-width:var(--measure);margin-bottom:28px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.cta-note{font-size:13.5px;color:var(--muted);max-width:24ch;line-height:1.45;
  min-width:0}
.trust{display:flex;flex-wrap:wrap;gap:9px;padding:28px 0 0;margin:0;
  list-style:none}
.trust li{font-size:12.5px;font-weight:700;padding:8px 14px;color:var(--body);
  border-radius:var(--radius-pill);background:var(--surface);min-width:0;
  overflow-wrap:anywhere}

/* =========================================================================
   THE COURSE COMPONENT - the online component, drawn to scale
   ====================================================================== */
.stage{position:relative;padding-bottom:56px}
.device{border-radius:var(--radius-lg);overflow:hidden;background:#fff;
  box-shadow:var(--shadow-lift);border:1px solid var(--line)}
.device-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.device-dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.device-url{margin-left:8px;font-family:var(--font-mono);font-size:10.5px;
  color:var(--muted);background:var(--bg);padding:4px 12px;
  border-radius:var(--radius-pill);overflow-wrap:anywhere;min-width:0}

.course{padding:22px 24px 24px;background:var(--bg)}
.course-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:12px}
.course-chip{font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);
  min-width:0}
.course-save{display:flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:700;color:var(--muted);min-width:0}
.course-save::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--action);flex:none}
.progress{height:7px;border-radius:var(--radius-pill);background:var(--surface);
  overflow:hidden;margin-bottom:22px}
.progress span{display:block;height:100%;width:38%;background:var(--action);
  border-radius:var(--radius-pill)}
.course h4{font-size:19px;font-weight:800;margin-bottom:10px}
.course-text{font-size:13.5px;line-height:1.62;color:var(--body);
  margin-bottom:8px}

.quiz{margin-top:18px;padding:18px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line)}
.quiz-q{font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:12px;
  line-height:1.4}
.quiz-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:8px;background:var(--bg);border:1px solid var(--line);
  font-size:13px;margin-bottom:7px;min-width:0}
.quiz-opt:last-child{margin-bottom:0}
.quiz-opt i{width:15px;height:15px;flex:none;border-radius:50%;
  border:1.5px solid var(--line);display:block}
.quiz-opt.is-picked{border-color:var(--action);background:var(--accent-soft);
  color:var(--ink);font-weight:700}
.quiz-opt.is-picked i{border-color:var(--action);background:var(--action);
  box-shadow:inset 0 0 0 3px var(--bg)}
.course-foot{display:flex;align-items:center;justify-content:flex-end;
  gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line)}
.course-timer{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
  min-width:0;overflow-wrap:anywhere}
.course-btns{display:flex;gap:8px;flex-wrap:wrap}

/* the phone, proving the same session continues on another device */
.phone{position:absolute;left:-30px;bottom:-30px;width:126px;
  border-radius:20px;background:var(--dark);padding:9px 8px 12px;
  box-shadow:var(--shadow-lift);border:1px solid var(--line)}
@media(max-width:960px){.phone{left:-14px;bottom:-24px}}
@media(max-width:420px){.phone{display:none}}
.phone-screen{background:var(--bg);border-radius:13px;padding:12px 11px}
.phone-chip{font-family:var(--font-mono);font-size:8.5px;font-weight:700;
  color:var(--accent-deep);letter-spacing:.05em;margin-bottom:7px}
.phone-bar{height:5px;border-radius:var(--radius-pill);background:var(--surface);
  overflow:hidden;margin-bottom:9px}
.phone-bar span{display:block;height:100%;width:38%;background:var(--action)}
.phone-line{height:5px;border-radius:3px;background:var(--surface);
  margin-bottom:5px}
.phone-line.w70{width:70%} .phone-line.w90{width:90%} .phone-line.w50{width:50%}
.phone-note{font-size:8.5px;font-weight:800;color:var(--muted);margin-top:8px}

/* =========================================================================
   THE CITATION FLOW - what finishing the citation actually involves
   ====================================================================== */
.band{padding:56px 0;background:var(--surface);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.band-plain{background:var(--bg)}
.band h2{font-size:clamp(24px,2.8vw,32px);font-weight:800;max-width:26ch;
  text-wrap:balance;margin-bottom:8px}
.band .sub{margin-bottom:32px}

.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;
  counter-reset:flow}
@media(max-width:900px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.flow{grid-template-columns:minmax(0,1fr)}}
.flow-step{position:relative;padding:20px 16px;border-radius:var(--radius);
  background:var(--bg);border:1px solid var(--line);min-width:0}
.flow-step .n{display:inline-grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-mono);font-size:11px;font-weight:700;margin-bottom:11px}
.flow-step .t{font-size:14.5px;font-weight:800;color:var(--ink);
  margin-bottom:5px;line-height:1.25}
.flow-step .d{font-size:12.5px;line-height:1.5;color:var(--muted)}
.flow-step.is-you{border-color:var(--action);background:var(--accent-soft)}

/* ---------- chapters: what the 8 hours contain --------------------------- */
.chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:720px){.chapters{grid-template-columns:minmax(0,1fr)}}
.chapter{display:flex;align-items:center;gap:13px;padding:13px 16px;
  border-radius:10px;background:var(--bg);border:1px solid var(--line);
  min-width:0}
.chapter b{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
  flex:none}
.chapter span{font-size:14px;font-weight:600;color:var(--ink);min-width:0;
  overflow-wrap:anywhere}

/* ---------- price anchor ------------------------------------------------- */
.anchor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line)}
@media(max-width:700px){.anchor{grid-template-columns:minmax(0,1fr)}}
.anchor-cell{padding:28px 30px;min-width:0;background:var(--surface)}
.anchor-cell+.anchor-cell{background:var(--dark)}
.anchor-cell .lab{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;color:var(--muted);margin-bottom:10px}
.anchor-cell .fig{font-family:var(--font-display);font-size:44px;font-weight:800;
  letter-spacing:-.04em;line-height:1;color:var(--ink);margin-bottom:8px;
  overflow-wrap:anywhere}
.anchor-cell .say{font-size:13.5px;line-height:1.5;color:var(--muted)}
.anchor-cell+.anchor-cell .lab{color:var(--dark-muted)}
.anchor-cell+.anchor-cell .fig{color:var(--dark-accent)}
.anchor-cell+.anchor-cell .say{color:var(--dark-muted)}

/* ---------- situation fork ----------------------------------------------- */
.fork{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:760px){.fork{grid-template-columns:minmax(0,1fr)}}
.fork-card{padding:26px;border-radius:var(--radius-lg);background:var(--bg);
  border:1px solid var(--line);min-width:0}
.fork-card.is-court{background:var(--accent-soft);border-color:var(--accent)}
.fork-card .tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--accent-deep);margin-bottom:12px}
.fork-card h3{font-size:19px;font-weight:800;margin-bottom:10px;line-height:1.2}
.fork-card p{font-size:14.5px;line-height:1.58;color:var(--muted);
  margin-bottom:14px}
.fork-card .go{font-size:14px;font-weight:800;color:var(--action);
  text-decoration:none}

/* ---------- included ----------------------------------------------------- */
.incl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
@media(max-width:760px){.incl{grid-template-columns:minmax(0,1fr)}}
.incl h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--accent-deep);margin-bottom:10px}
.incl ul{margin:0;padding:0;list-style:none}
.incl li{display:flex;gap:11px;padding:9px 0;min-width:0}
.incl li i{flex:none;font-style:normal;font-weight:800;color:var(--action)}
.incl li p{font-size:15px;line-height:1.5;color:var(--body);min-width:0}
.incl li b{color:var(--ink);font-weight:700}

.nudge{margin-top:22px;padding:16px 20px;border-radius:var(--radius);
  background:var(--accent-soft);color:var(--ink);font-size:14.5px;
  font-weight:600;line-height:1.55}

/* ---------- final + footer ----------------------------------------------- */
.final{padding:58px 0;background:var(--dark);text-align:center}
.final h2{color:var(--dark-ink);font-size:clamp(26px,3vw,34px);font-weight:800;
  max-width:20ch;margin:0 auto 12px;text-wrap:balance}
.final p{color:var(--dark-muted);max-width:48ch;margin:0 auto 26px;
  font-size:15.5px;line-height:1.6}
.foot{padding:30px 0 34px;font-size:12.5px;line-height:1.75;color:var(--muted);
  border-top:1px solid var(--line);background:var(--bg)}
.foot .comply{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 12px;padding:0;
  list-style:none}
.foot .comply li{min-width:0;overflow-wrap:anywhere}
.foot b{color:var(--ink)}
.foot p{margin-bottom:6px;overflow-wrap:anywhere}

/* ---------- skip link ---------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--dark);
  color:var(--dark-ink);padding:12px 20px;border-radius:0 0 var(--radius) 0;
  font-weight:800;text-decoration:none}
.skip:focus{left:0}

/* ---------- mobile drawer ------------------------------------------------ */
.nav-mobile{display:none;position:relative}
@media(max-width:900px){.nav-mobile{display:block}}
.nav-mobile summary{list-style:none;cursor:pointer;display:grid;gap:5px;
  padding:10px 6px}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile summary span{display:block;width:24px;height:2.5px;border-radius:2px;
  background:var(--ink)}
.nav-drawer{position:absolute;right:0;top:calc(100% + 12px);z-index:20;
  min-width:230px;display:grid;gap:4px;padding:12px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lift)}
.nav-drawer a{padding:10px 12px;border-radius:8px;text-decoration:none;
  font-weight:700;font-size:14.5px;color:var(--ink)}
.nav-drawer a.btn{text-align:center;margin-top:6px;color:var(--action-ink)}

/* ---------- FAQ ---------------------------------------------------------- */
.faq{max-width:820px}
.faq details{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);margin-bottom:8px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:800;
  color:var(--ink);font-size:15.5px;line-height:1.4;display:flex;
  align-items:flex-start;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;flex:none;font-weight:800;
  color:var(--action);font-size:19px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 20px 18px;font-size:14.5px;line-height:1.62;
  color:var(--muted);max-width:68ch}

.foot-legal{margin-top:10px;color:var(--muted)}

/* ---------- interior page header ----------------------------------------- */
.hero-page{padding:40px 0 46px}
.hero-page h1{max-width:22ch}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none;font-weight:600}
.crumbs span{margin:0 6px}

/* ---------- threshold rules ---------------------------------------------- */
.rules{display:grid;gap:8px;max-width:900px}
.rule{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px;
  padding:18px 20px;border-radius:var(--radius);background:var(--bg);
  border:1px solid var(--line);align-items:start}
@media(max-width:760px){.rule{grid-template-columns:minmax(0,1fr);gap:6px}}
.rule-k{font-weight:800;color:var(--ink);font-size:14.5px;line-height:1.4;
  min-width:0;overflow-wrap:anywhere}
.rule-v{font-size:14.5px;line-height:1.58;color:var(--muted);min-width:0}

.flow-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.flow-3{grid-template-columns:minmax(0,1fr)}}
.chapters-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.chapters-3{grid-template-columns:minmax(0,1fr)}}
.chapters-3 .chapter{align-items:flex-start;flex-direction:column;gap:6px}
.chapters-3 .chapter b{font-size:13px;color:var(--accent-deep);font-weight:800}

/* ---------- timeline steps ------------------------------------------------
   Carried over from the identity sheet. index.php was the first page to use
   this component and it was missing here, so the timeline rendered as flat
   text with no grid and no cards. */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{padding:20px 18px;min-width:0;border-radius:var(--radius);
  background:var(--bg);border:1px solid var(--line)}
.step .n{font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  margin-bottom:10px;font-weight:800;color:var(--accent-deep)}
.step .v{font-family:var(--font-display);font-size:23px;font-weight:800;
  margin-bottom:6px;line-height:1.1;letter-spacing:-.03em;color:var(--ink);
  overflow-wrap:anywhere}
.step .d{font-size:13px;line-height:1.5;color:var(--muted)}

/* ---------- photography --------------------------------------------------
   Images are 1200x800 (3:2). width/height are set on every <img> so the
   layout does not shift while they load. */
.figure{margin:34px 0 0;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line)}
.figure img{width:100%;height:auto;display:block}
.figure figcaption{font-size:13px;line-height:1.5;color:var(--muted);
  padding:13px 18px;background:var(--bg);border-top:1px solid var(--line)}
/* a shallower crop, so three photographs on one page do not all sit the same */
.figure-wide img{aspect-ratio:21/9;object-fit:cover;height:auto}
.media-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:34px;align-items:center}
@media(max-width:820px){.media-split{grid-template-columns:minmax(0,1fr);gap:26px}}
.media-split .figure{margin:0}

/* ---------- the mark ------------------------------------------------------ */
.brand{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none}
.mark-svg{flex:none;display:block}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:18px;
  color:var(--ink);letter-spacing:-.025em;white-space:nowrap}
@media(max-width:420px){.brand-name{font-size:16px;white-space:normal}}

/* hero photograph sits opposite the copy, taller crop than the body figures */
.hero-figure{margin:0}
.hero-figure img{aspect-ratio:4/3;object-fit:cover;height:auto}
@media(max-width:960px){.hero-figure img{aspect-ratio:16/9}}

/* ===========================================================================
   BUTTON TREATMENT - roomier, and glossy
   ---------------------------------------------------------------------------
   The gloss is built with color-mix() off var(--action), NOT with per-theme
   hex values, so all three themes get it for free and none of them can drift.

   Contrast note: the top of the gradient lightens --action toward white, which
   lowers contrast against the label. It is held to 10% for that reason, with
   the sheen overlay doing the rest of the work at low alpha. Do not raise
   either number without re-measuring the label against the LIGHTEST band of
   the gradient, not the base colour. Measured at the top of the glyphs:
   green 7.4:1, marker 4.7:1, sunny 5.9:1. All AA.
   ======================================================================== */
.btn{
  padding:19px 38px;
  position:relative;
  border-radius:var(--radius-pill);
  /* Two layers, both BEHIND the label: the specular sheen over the top half,
     then the base gradient. Done as stacked backgrounds rather than a ::before,
     because an absolutely positioned pseudo-element either paints over the text
     (dimming it) or, with z-index:-1, disappears behind the button background. */
  background-image:
      linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 52%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--action) 92%, #fff) 0%,
        var(--action) 52%,
        color-mix(in srgb, var(--action) 92%, #000) 100%);
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -1px 0 rgba(0,0,0,.14),
      0 8px 18px color-mix(in srgb, var(--action) 32%, transparent),
      0 1px 2px rgba(16,20,24,.14);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.5),
      inset 0 -1px 0 rgba(0,0,0,.14),
      0 12px 26px color-mix(in srgb, var(--action) 40%, transparent),
      0 2px 4px rgba(16,20,24,.16);
}
.btn:active{
  transform:translateY(1px);
  filter:brightness(.98);
  box-shadow:
      inset 0 2px 5px rgba(0,0,0,.22),
      0 2px 6px color-mix(in srgb, var(--action) 26%, transparent);
}
.btn:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}
.btn-sm{padding:12px 26px;font-size:14.5px}

/* The ghost button is an outline, not an object - it gets the roomier padding
   and the press behaviour, but no gradient, no sheen and no coloured glow. */
.btn-ghost{
  background-image:none;
  background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.btn-ghost:hover{
  filter:none;
  background:var(--surface);
  box-shadow:inset 0 0 0 1.5px var(--muted);
}

/* Reduced motion: keep the gloss, drop the movement. */
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn:hover,.btn:active{transform:none}
}

/* ===========================================================================
   POLISH PASS - "expensive, not busy"
   ---------------------------------------------------------------------------
   Four moves, and three of them REMOVE something. Cheap-looking pages are
   usually over-drawn, not under-decorated: this page had a 1px box around
   almost every element, which is what a template does when it does not trust
   whitespace to do the grouping.

     1. Air.        Sections and headings breathe. Space is the cheapest
                    luxury signal there is and it costs no ink.
     2. Fewer lines. Cards that already sit on a contrasting surface lose
                    their border. Grouping is done by tint and distance.
     3. Editorial index. A small mono numeral and a short accent rule above
                    each section heading - the signature swipe, repeated
                    quietly, and a structure the eye can count.
     4. Real figures. Tabular numerals so prices and durations align on the
                    decimal instead of wobbling.
   ======================================================================== */

.wrap{max-width:1120px}
.band{padding:78px 0}
.band h2{font-size:clamp(26px,3.1vw,36px);margin-bottom:10px}
.band .sub{margin-bottom:38px;font-size:15.5px}

/* 3. the editorial index -------------------------------------------------- */
.idx{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.idx::after{content:"";height:3px;width:34px;border-radius:2px;
  background:var(--accent);flex:none}
.idx span{font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* 4. figures that line up ------------------------------------------------- */
.anchor-cell .fig,.step .v,.chapter b,.flow-step .n,.price-note b,.cta-note{
  font-variant-numeric:tabular-nums lining-nums}

/* 2. fewer lines ---------------------------------------------------------- */
.step,.chapter,.flow-step{border:0}
.band .step,.band .chapter,.band .flow-step{background:var(--bg)}
.band-plain .step,.band-plain .chapter,.band-plain .flow-step{background:var(--surface)}
.flow-step.is-you{background:var(--accent-soft);
  box-shadow:inset 0 0 0 1.5px var(--accent)}
.chapter{padding:15px 18px}
.chapters{gap:6px}

/* the fork keeps a hairline, because those really are separate choices,
   but at a much lower contrast than a full border */
.fork-card{border:0;box-shadow:inset 0 0 0 1px var(--line)}
.fork-card.is-court{box-shadow:inset 0 0 0 1.5px var(--accent)}

/* photographs: hairline instead of a drawn frame */
.figure{border:0;box-shadow:0 1px 2px rgba(16,20,24,.05), 0 10px 30px rgba(16,20,24,.06)}
.figure figcaption{border-top:0;background:transparent;padding:14px 2px 0;
  color:var(--muted)}

/* the price pair, given a little more presence */
.anchor{border:0;box-shadow:0 1px 2px rgba(16,20,24,.05), 0 14px 40px rgba(16,20,24,.07)}
.anchor-cell{padding:34px 36px}
.anchor-cell .fig{font-size:52px}

/* 1. air ------------------------------------------------------------------ */
.hero{padding:66px 0 14px}
.trust{padding-top:34px;gap:10px}
.incl li{padding:11px 0}
.nudge{margin-top:28px;padding:18px 22px}

/* A hairline at --line contrast disappears on a tinted band, which left the
   situation cards reading as loose text. Lift them with elevation instead of
   drawing a box: same "fewer lines" intent, but they read as objects. */
.fork-card{box-shadow:0 1px 2px rgba(16,20,24,.04), 0 10px 26px rgba(16,20,24,.055)}
.fork-card.is-court{box-shadow:0 1px 2px rgba(16,20,24,.04),
  0 10px 26px rgba(16,20,24,.055), inset 0 0 0 1.5px var(--accent)}
.fork{gap:20px}
.rule{border:0;box-shadow:0 1px 2px rgba(16,20,24,.04), 0 8px 22px rgba(16,20,24,.05)}

/* ---------- log in --------------------------------------------------------
   A returning student is a different person from a new one: they are not
   buying, they are resuming, and they will not read the page to find the door.
   Three ways in - the nav, the drawer, and the final band after the CTA. It
   stays a text link everywhere except the drawer, so it never competes with
   "Start the course". */
.nav-links a.nav-login{color:var(--ink)}   /* .nav-links a would mute it */
.nav-login{white-space:nowrap}

/* The phone is where returning students get lost: below 900px the whole nav
   collapses into a hamburger, so "log in" ends up two taps deep behind a menu
   they have no reason to open. This one stays in the bar at every width. */
.nav-login-m{display:none;white-space:nowrap;margin-left:auto}
@media(max-width:900px){.nav-login-m{display:inline-block}}
@media(max-width:380px){.nav-login-m{padding:9px 16px;font-size:13.5px}}

.final-login{margin-top:20px;font-size:14px;color:var(--dark-muted)}
.final-login a{color:var(--dark-ink);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--dark-ink) 40%, transparent)}
.final-login a:hover{text-decoration-color:var(--dark-ink)}
/* the hamburger sits tight to the login button rather than pushing it away */
@media(max-width:900px){.nav{gap:10px}.nav-mobile{margin-left:0}}