/* ═══════════════════════════════════════════════════════════════
   BEOFLOW COURSE — a coach's guide to reading physiological
   signals and wearable data.

   Light presentation, derived from the Beoflow Design System's own
   documentation style (drafted-project:704fdbc6-a443-4e70-a922-9d2fde5d9c0e).
   The product ships dark; docs are presented light.

   Signal colours are canonical tokens. The neutral scale (ink /
   faint / line) is the design system's docs chrome, not yet
   tokenised upstream.

   NOTE ON COLOUR: the base signal tokens were authored for the dark
   canvas. On light ground they fail contrast as text and compete
   with Peak Orange as thin accents, so TEXT and 3px ACCENTS use the
   dark end of each ramp. Base tokens are kept for fills.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* neutral */
  --paper:#FFFFFF;
  --cream:#F8F6F4;
  --line:#E0E0E0;
  --faint:#8A8D8E;
  --muted:#434647;
  --ink:#252525;

  /* signal — fills */
  --orange:#FF5D29;
  --blue:#4A9BB8;
  --teal:#07B598;
  --yellow:#FFA60B;
  --purple:#813656;
  --red:#EF4444;

  /* signal — text and thin accents */
  --blue-d:#20586E;
  --teal-d:#1C8170;
  --yellow-d:#C07A00;
  --purple-d:#502B3B;
  --red-d:#B91C1C;

  /* The course uses Roboto, not the Beoflow brand stack (Raleway / IBM Plex
     Mono): for a 90-to-120 minute read, body legibility outranks brand. Roboto
     keeps a large x-height at small sizes. Roboto Mono holds the label/metric
     structure. Roboto-sans has no 600 weight, so `font-weight:600` renders as
     Roboto Bold (700) via CSS weight matching; Roboto Mono does carry 600. */
  --ral:'Roboto',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --measure:680px;
  --wide:1040px;
  --gutter:20px;
}

@media (min-width:720px){ :root{ --gutter:40px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ral); font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ── layout ───────────────────────────────────────────────── */
.col{ max-width:var(--measure); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.wide{ max-width:var(--wide); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

/* ── site chrome ──────────────────────────────────────────── */
.sitebar{
  display:flex; justify-content:space-between; align-items:center;
  padding:15px var(--gutter); border-bottom:1px solid var(--line);
}
.sitebar .logo{ font-family:var(--mono); font-weight:600; font-size:13px; letter-spacing:2px; text-decoration:none; }
.sitebar .r{ font-family:var(--mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); }
@media (min-width:720px){
  .sitebar{ padding:20px var(--gutter); }
  .sitebar .logo{ font-size:15px; }
  .sitebar .r{ font-size:11px; }
}

/* ── lesson top bar ───────────────────────────────────────── */
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:13px var(--gutter);
  font-family:var(--mono); font-size:9.5px; letter-spacing:1px;
  text-transform:uppercase; color:var(--faint);
}
.topbar a{ color:var(--ink); text-decoration:none; }
.topbar .mid{ color:var(--ink); font-weight:600; white-space:nowrap; }
.topbar .mod{ display:none; }
@media (min-width:720px){
  .topbar{ font-size:11px; padding:18px var(--gutter); }
  .topbar .mod{ display:block; }
}
.burger{ display:flex; flex-direction:column; gap:3px; width:16px; background:none; border:0; padding:0; cursor:pointer; }
.burger i{ display:block; height:1.5px; background:var(--ink); border-radius:1px; }
@media (min-width:720px){ .burger{ display:none; } }

.prog{ height:3px; background:var(--line); }
.prog i{ display:block; height:3px; background:var(--orange); }

/* ── page head ────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--orange); line-height:1.5; margin:0;
}
@media (min-width:720px){ .eyebrow{ font-size:12px; } }

h1{ font-size:28px; font-weight:600; line-height:1.15; letter-spacing:-.5px; margin:10px 0 14px; }
@media (min-width:720px){ h1{ font-size:36px; letter-spacing:-.6px; margin:14px 0 20px; } }

.parts{ display:flex; gap:5px; max-width:140px; margin:0 0 24px; padding:0; list-style:none; }
.parts li{ height:3px; flex:1; background:var(--line); border-radius:2px; }
.parts li.on{ background:var(--ink); }
@media (min-width:720px){ .parts{ max-width:180px; margin-bottom:36px; } }

/* ── reading ──────────────────────────────────────────────── */
p{ font-size:17px; line-height:1.7; color:var(--muted); margin:16px 0; }
@media (min-width:720px){ p{ font-size:18px; margin:18px 0; } }
p b, li b, td b, .rule b{ color:var(--ink); font-weight:600; }

h2{ font-size:20px; font-weight:600; line-height:1.3; margin:28px 0 8px; color:var(--ink); }
h3{ font-size:17px; font-weight:600; line-height:1.35; margin:22px 0 6px; color:var(--ink); }
@media (min-width:720px){ h2{ font-size:22px; } h3{ font-size:19px; } }

.kicker{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--faint); margin:26px 0 4px;
}
.rule{
  border-left:3px solid var(--ink); padding:6px 0 6px 16px; margin:20px 0;
  font-size:17px; line-height:1.5; font-weight:500; color:var(--ink);
}
@media (min-width:720px){ .rule{ font-size:19px; padding-left:20px; margin:24px 0; } }

.hero-note{ background:var(--cream); border-radius:12px; padding:18px 20px; margin:18px 0; }
/* bordered variant of the cream note — used for the skip-Primed box on p11,
   where the slide gives the rule its own boxed treatment */
.hero-note.bordered{ border:1px solid var(--line); }
/* `:not([class])` matters. A bare `.hero-note p` is (0,1,1) and silently
   outranks `.kicker` and `.rule` (both 0,1,0), so a classed paragraph placed
   inside a hero note would render as body copy with its margins zeroed.
   Same species of bug as `.signup label` vs `.consent`. Scope, don't widen. */
.hero-note p:not([class]){ margin:0; font-size:17px; }
@media (min-width:720px){ .hero-note{ padding:24px 28px; } .hero-note p{ font-size:19px; } }

/* ── cards and callouts ───────────────────────────────────── */
.card{ border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:12px 0; }
.card .l{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.card h3{ margin:0 0 6px; }
.card p{ font-size:15px; margin:6px 0 0; }
@media (min-width:720px){ .card{ padding:22px 24px; } .card p{ font-size:15.5px; } }

/* Beoflow design system: a card/callout zone accent is the FULL 1px border
   tinted to the zone colour, never a `border-left:3px` alert bar and never a
   squared-off `border-radius:0 …` left edge. Both are forbidden AI-slop. */
.callout{ border:1px solid var(--blue-d); background:var(--cream); border-radius:12px; padding:14px 16px; margin:16px 0; }
.callout .l{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--blue-d); margin-bottom:6px; }
.callout p{ font-size:15px; margin:6px 0 0; }
@media (min-width:720px){ .callout{ padding:16px 20px; } }

.callout.good{ border-color:var(--teal-d); } .callout.good .l{ color:var(--teal-d); }
.callout.warn{ border-color:var(--yellow-d); } .callout.warn .l{ color:var(--yellow-d); }
.callout.alarm{ border-color:var(--red-d); } .callout.alarm .l{ color:var(--red-d); }
.callout.lit{ border-color:var(--purple-d); } .callout.lit .l{ color:var(--purple-d); }

/* Full 1px accent border, dark-ramp so a thin accent on white does not read
   as Peak Orange. Base tokens stay for fills; the border is a thin accent. */
.card.good{ border-color:var(--teal-d); } .card.blue{ border-color:var(--blue-d); }
.card.warn{ border-color:var(--yellow-d); } .card.alarm{ border-color:var(--red-d); }
.card.lit{ border-color:var(--purple-d); }

.tip{ border:1px solid #9CC7B8; background:#F4FAF6; border-radius:12px; padding:14px 16px; margin:12px 0; }
.tip .l{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--teal-d); margin-bottom:6px; }
.tip p{ font-size:15px; margin:6px 0 0; }

/* stacked card groups — the desktop "row" of cards */
.grid{ display:grid; gap:12px; margin:16px 0; }
@media (min-width:720px){
  .grid{ gap:16px; }
  .grid.two{ grid-template-columns:1fr 1fr; }
  .grid.three{ grid-template-columns:repeat(3,1fr); }
  .grid.four{ grid-template-columns:repeat(4,1fr); }
}
.grid > *{ margin:0; }

/* sequence of cards — arrows only on mobile, where the horizontal
   reading order that carries the sequence has been lost */
.flow{ display:grid; gap:10px; margin:16px 0; }
.flow > *{ margin:0; }
.flow > *:not(:last-child)::after{
  content:"↓"; display:block; text-align:center; color:#C9CBCC;
  font-size:18px; line-height:1; margin:10px 0 -6px;
}
@media (min-width:720px){
  .flow{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .flow > *:not(:last-child)::after{ display:none; }
}

/* ── numbered steps ───────────────────────────────────────── */
.steps{ list-style:none; margin:16px 0; padding:0; }
.steps li{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; font-size:15px; line-height:1.6; color:var(--muted); }
.steps .n{ display:block; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1px; color:var(--purple-d); margin-bottom:3px; }
.steps b{ color:var(--ink); font-weight:600; }

/* ── figures ──────────────────────────────────────────────── */
figure{ margin:24px 0; }
figure.break{ margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); }
@media (min-width:1120px){
  figure.break{ width:var(--wide); margin-left:calc((var(--wide) - var(--measure)) / -2); margin-right:0; }
}
.figlabel{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--faint); margin-bottom:10px; padding:0 var(--gutter); }
figure:not(.break) .figlabel{ padding:0; }
figcaption{ font-size:14px; line-height:1.6; color:var(--faint); margin-top:12px; padding:0 var(--gutter); }
figure:not(.break) figcaption{ padding:0; }
figure svg{ display:block; width:100%; height:auto; }
.figframe{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); }

/* ── tables ───────────────────────────────────────────────── */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tablewrap table{ min-width:560px; }
.swipe{ font-family:var(--mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
@media (min-width:720px){ .swipe{ display:none; } }
table{ border-collapse:collapse; width:100%; font-size:14px; color:var(--muted); }
th{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; text-align:left; color:var(--faint); padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:bottom; }
td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.55; }
tbody th{ color:var(--faint); border-bottom:1px solid var(--line); white-space:nowrap; }

/* ── accordion ────────────────────────────────────────────── */
.acc{ margin:16px 0; }
.acc-count{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--faint); margin-bottom:8px; }
.acc details{ border:1px solid var(--line); border-radius:12px; margin-bottom:8px; overflow:hidden; }
.acc summary{
  display:flex; align-items:center; gap:12px; padding:15px 16px; cursor:pointer;
  font-size:15.5px; font-weight:600; color:var(--ink); min-height:52px; list-style:none;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::before{
  content:""; flex:none; width:0; height:0;
  border-left:6px solid var(--faint); border-top:4.5px solid transparent; border-bottom:4.5px solid transparent;
  transition:transform .15s ease;
}
.acc details[open] summary{ background:var(--cream); border-bottom:1px solid var(--line); }
.acc details[open] summary::before{ transform:rotate(90deg); border-left-color:var(--teal-d); }
.acc .body{ padding:14px 16px; }
.acc .body p{ font-size:15px; margin:0 0 10px; }
.acc .body p:last-child{ margin-bottom:0; }
.acc details[open]{ border-color:var(--teal-d); }
@media (min-width:720px){ .acc summary{ min-height:56px; font-size:16px; } }

/* ── lesson nav ───────────────────────────────────────────── */
.lessonnav{ border-top:1px solid var(--line); margin-top:32px; padding:20px var(--gutter) 40px; display:grid; gap:12px; }
.lessonnav .next{
  background:var(--orange); color:#fff; text-decoration:none;
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  padding:16px; border-radius:9999px; text-align:center; line-height:1.35;
}
.lessonnav .prev{ font-size:13px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; text-align:center; }
/* On mobile Next sits ABOVE prev regardless of DOM order — it is the action
   almost every reader takes. Prev stays first in the DOM for logical order. */
.lessonnav .next{ order:1; }
.lessonnav .prev{ order:2; }
@media (min-width:720px){
  .lessonnav{ margin-top:56px; padding:32px var(--gutter) 60px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
  .lessonnav .next{ font-size:12px; padding:16px 32px; order:2; }
  .lessonnav .prev{ font-size:14px; text-align:left; order:1; }
}

/* the slide's closing teaching line */
.aphorism{
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--faint); line-height:1.8; text-align:center; margin:34px auto 0; max-width:var(--measure);
  padding:0 var(--gutter);
}
@media (min-width:720px){ .aphorism{ font-size:11px; letter-spacing:1.6px; margin-top:52px; } }

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-block; background:var(--orange); color:#fff; text-decoration:none;
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  padding:16px 28px; border-radius:9999px; text-align:center; border:0; cursor:pointer; line-height:1.35;
}
.btn.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn.quiet{ background:none; color:var(--muted); font-family:var(--ral); font-weight:500; letter-spacing:0; text-transform:none; font-size:14px; text-decoration:underline; text-underline-offset:3px; padding:6px; }
.btn.block{ display:block; width:100%; }

/* ── footer ───────────────────────────────────────────────── */
.sitefoot{
  padding:24px var(--gutter) 34px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--faint);
}
.sitefoot a{ color:var(--faint); text-decoration:none; }
@media (min-width:720px){ .sitefoot{ font-size:11px; padding:34px var(--gutter) 44px; } }

/* ═══════════════════════════════════════════════════════════
   WELCOME PAGE
   ═══════════════════════════════════════════════════════════ */
.hero{ background:var(--cream); border-bottom:1px solid var(--line); padding:34px 0 32px; }
.hero .in{ max-width:var(--wide); margin:0 auto; padding:0 var(--gutter); }
.hero h1{ font-size:32px; letter-spacing:-.8px; margin:12px 0 14px; }
.hero .lede{ font-size:19px; line-height:1.5; color:var(--muted); margin:0; }
.meta{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-top:22px; font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); }
.meta .dot{ width:3px; height:3px; background:var(--faint); border-radius:50%; }
.meta b{ color:var(--ink); font-weight:600; }
@media (min-width:900px){
  .hero{ padding:72px 0 76px; }
  .hero .in{ display:grid; grid-template-columns:1fr 400px; gap:72px; align-items:center; }
  .hero h1{ font-size:52px; letter-spacing:-1.3px; margin:18px 0 20px; }
  .hero .lede{ font-size:20px; }
  .meta{ font-size:11px; margin-top:32px; }
}

.signup{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:22px; margin:20px var(--gutter) 0; }
.signup h2{ font-size:19px; margin:0 0 6px; }
.signup .fine{ font-size:14px; line-height:1.55; color:var(--muted); margin:0 0 18px; }
.signup label{ display:block; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.signup input[type=email], .signup input[type=tel]{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:14px;
  font-family:var(--ral); font-size:16px; color:var(--ink); background:var(--paper); margin-bottom:14px;
}
.signup input::placeholder{ color:#B9BBBC; }
.signup input:focus-visible{ outline:2px solid var(--blue-d); outline-offset:1px; }
/* The consent row is also a <label>, so it must undo the field-label styling
   above. Note the .signup prefix: `.signup label` is (0,1,1) and would beat a
   bare `.consent` (0,1,0) no matter the source order. */
.signup .consent{
  display:flex; gap:9px; align-items:flex-start; margin-bottom:18px;
  font-family:var(--ral); font-weight:400; font-size:12px;
  text-transform:none; letter-spacing:normal; color:var(--muted);
}
.consent input{ margin:2px 0 0; flex:none; width:16px; height:16px; accent-color:var(--orange); }
.consent span{ font-size:12px; line-height:1.5; color:var(--muted); }
.consent a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.formnote{ font-size:10.5px; line-height:1.5; color:var(--faint); text-align:center; margin:10px 0 0; }
.formstatus{ font-size:13px; line-height:1.5; margin:10px 0 0; }
.formstatus.err{ color:var(--red-d); }
.formstatus.ok{ color:var(--teal-d); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (min-width:900px){ .signup{ margin:0; padding:30px; } .signup h2{ font-size:21px; } }

.premise{ padding:34px 0 32px; border-bottom:1px solid var(--line); }
.premise .big{ font-size:18px; line-height:1.6; color:var(--ink); margin:12px 0 20px; }
@media (min-width:720px){
  .premise{ padding:76px 0 72px; }
  .premise .big{ font-size:24px; line-height:1.55; max-width:58ch; margin:18px 0 40px; }
}

/* index — NOTE: these rows are .modrow, NOT .mod.
   `.mod` is the topbar module label on every lesson page; when both shared
   the class the label rendered inside a bordered white box. Do not merge. */
.index{ background:var(--cream); padding:32px 0 40px; }
.index .in{ max-width:var(--wide); margin:0 auto; padding:0 var(--gutter); }
.ihead{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.ihead h2{ font-size:22px; margin:0; }
.ihead .r{ font-family:var(--mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); }
.ihead .r button{ background:none; border:0; color:var(--ink); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; margin-left:10px; padding:0; }
@media (min-width:720px){ .index{ padding:76px 0 88px; } .ihead h2{ font-size:28px; } .ihead .r{ font-size:11px; } }

.modrow{ background:var(--paper); border:1px solid var(--line); border-radius:12px; margin-bottom:7px; overflow:hidden; }
.modrow summary{ display:flex; align-items:center; gap:12px; padding:15px 16px; min-height:52px; cursor:pointer; list-style:none; }
.modrow summary::-webkit-details-marker{ display:none; }
.modrow summary::before{
  content:""; flex:none; width:0; height:0;
  border-left:6px solid var(--faint); border-top:4.5px solid transparent; border-bottom:4.5px solid transparent;
  transition:transform .15s ease;
}
.modrow[open] summary::before{ transform:rotate(90deg); border-left-color:var(--ink); }
.modrow[open] summary{ background:var(--cream); border-bottom:1px solid var(--line); }
.modrow .t{ flex:1; }
.modrow .num{ display:block; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--faint); }
.modrow .ttl{ display:block; font-size:14.5px; font-weight:600; line-height:1.3; margin-top:2px; color:var(--ink); }
.modrow .cnt{ flex:none; font-family:var(--mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); }
.modrow ol{ list-style:none; margin:0; padding:0; }
.modrow ol a{
  display:flex; align-items:center; gap:12px; padding:13px 16px 13px 34px;
  font-size:14px; color:var(--muted); text-decoration:none; border-bottom:1px solid #EFEFEF;
}
.modrow ol li:last-child a{ border-bottom:0; }
.modrow ol .n{ font-family:var(--mono); font-size:10px; color:var(--faint); }
.modrow ol .tick{ width:16px; height:16px; border:1.5px solid var(--line); border-radius:50%; margin-left:auto; flex:none; }
.modrow ol a.read .tick{ background:var(--teal); border-color:var(--teal); }
@media (min-width:720px){
  .modrow summary{ padding:19px 24px; min-height:56px; gap:18px; }
  .modrow .num{ display:inline-block; width:76px; }
  .modrow .ttl{ display:inline; font-size:17px; margin:0; }
  .modrow .t{ display:flex; align-items:baseline; gap:18px; }
  .modrow ol a{ padding:14px 24px 14px 64px; font-size:15px; }
  .modrow .cnt{ font-size:10px; }
}
.indexcta{ margin-top:26px; display:grid; gap:12px; }
@media (min-width:720px){ .indexcta{ display:flex; gap:14px; } }

/* sticky mobile CTA */
.sticky{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); padding:10px var(--gutter);
  display:flex; gap:12px; align-items:center;
  transform:translateY(110%); transition:transform .2s ease;
}
.sticky.show{ transform:translateY(0); }
.sticky .s{ flex:1; font-family:var(--mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); line-height:1.4; }
.sticky .s b{ display:block; color:var(--ink); font-size:10px; }
.sticky .btn{ padding:13px 18px; font-size:10.5px; white-space:nowrap; }
@media (min-width:720px){ .sticky{ display:none; } }

/* ── completion block ─────────────────────────────────────── */
.complete{ background:var(--cream); border-top:1px solid var(--line); padding:34px var(--gutter) 40px; text-align:center; }
.complete .l{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--orange); }
.complete h2{ font-size:22px; max-width:22ch; margin:10px auto 10px; }
.complete p{ font-size:15px; max-width:44ch; margin:0 auto 20px; }
.complete .ctas{ display:grid; gap:10px; max-width:340px; margin:0 auto; }
@media (min-width:720px){
  .complete{ padding:56px var(--gutter) 64px; }
  .complete h2{ font-size:30px; }
  .complete p{ font-size:16px; }
}

/* ═══════════════════════════════════════════════════════════
   MODULE 4 FIGURES — lessons 04 and 05

   Three figures in these lessons have no expression in the
   vocabulary above. They are built here, from the existing custom
   properties, so the pages themselves stay free of inline CSS and
   of any <style> block.
   ═══════════════════════════════════════════════════════════ */

/* emphasis inside a caption reads as ink, same as body copy */
figcaption b{ color:var(--ink); font-weight:600; }

/* spec table inside a card — label column plus value column.
   Row headers stay narrow; the trailing rule is dropped so the
   table does not draw a line just above the card's own padding. */
.card table{ margin-top:10px; }
.card table tr:last-child th, .card table tr:last-child td{ border-bottom:0; padding-bottom:0; }

/* ── the autonomic tone axis (lesson 04 · part 2) ───────────────
   Mobile stacks: low label, low note, bar, high label, high note.
   From 720px the two ends flank the bar, which is the reading the
   figure wants — an axis with a left end and a right end. */
.toneaxis{ border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:20px 0; }
.toneaxis .lbl{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; margin:0;
}
.toneaxis .lbl.lo{ color:var(--yellow-d); }
.toneaxis .lbl.hi{ color:var(--teal-d); }
.toneaxis .sub{ font-size:13px; line-height:1.5; color:var(--muted); margin:5px 0 0; }
.toneaxis .bar{
  height:16px; border-radius:3px; margin:14px 0;
  background:linear-gradient(90deg,var(--yellow),var(--blue) 55%,var(--teal));
}
.toneaxis .mid{
  font-family:var(--mono); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--faint); text-align:center; margin:16px 0 0;
}
@media (min-width:720px){
  .toneaxis{ display:grid; grid-template-columns:1fr 1fr; column-gap:32px; padding:24px 26px; }
  .toneaxis .lbl.lo{ grid-column:1; grid-row:1; }
  .toneaxis .lbl.hi{ grid-column:2; grid-row:1; text-align:right; }
  .toneaxis .bar{ grid-column:1 / 3; grid-row:2; margin:12px 0 11px; }
  .toneaxis .sub.lo{ grid-column:1; grid-row:3; margin:0; }
  .toneaxis .sub.hi{ grid-column:2; grid-row:3; margin:0; text-align:right; }
  .toneaxis .mid{ grid-column:1 / 3; grid-row:4; }
}

/* ── the overnight-swing figure (lesson 05 · part 1) ────────── */
.wavefig .figframe{ padding:16px 14px 14px; }
/* The wave svg carries preserveAspectRatio="none" precisely so its height can
   be set independently of its width. Left to `height:auto` the trace would
   collapse to ~60px on a phone and the amplitude difference — the entire point
   of the figure — would stop being legible. Hence a fixed height per breakpoint. */
.wavefig .figframe svg{ height:132px; }
.wavefig .waxis{
  display:flex; justify-content:space-between; gap:8px; margin-top:8px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.2px;
  text-transform:uppercase; color:var(--faint);
}
.wavefig .wleg{ display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.wavefig .wl{ display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; color:var(--muted); }
.wavefig .wl .ln{ flex:none; width:26px; height:0; border-top:3px solid; margin-top:9px; }
.wavefig .wl.hi .ln{ border-color:var(--teal); }
.wavefig .wl.hi b{ color:var(--teal-d); font-weight:600; }
.wavefig .wl.lo .ln{ border-color:#B9BDBE; }
.wavefig .wl.lo b{ color:var(--faint); font-weight:600; }
@media (min-width:720px){
  .wavefig .figframe{ padding:20px 24px 18px; }
  .wavefig .figframe svg{ height:168px; }
  .wavefig .waxis{ font-size:10px; letter-spacing:.6px; }
  .wavefig .wleg{ flex-direction:row; flex-wrap:wrap; gap:30px; margin-top:18px; }
  .wavefig .wl{ align-items:center; font-size:14px; }
  .wavefig .wl .ln{ margin-top:0; }
}

/* ── THE AUTONOMIC STATUS CHART (lesson 05 · part 2) ────────────
   The course's most important figure. The 2x2 IS the meaning: a
   quadrant's identity is its position on two axes AT ONCE, so this
   grid must NEVER collapse to a single column. There is deliberately
   no breakpoint below that stacks it — .qgrid is 1fr 1fr at every
   width, and the cells shrink instead.

   Quadrant washes are pale tints of the signal ramp, in the same
   spirit as .tip's hand-mixed pair. Not yet tokenised upstream. */
.quad{ display:grid; grid-template-columns:22px 1fr; column-gap:8px; }
.qy{ position:relative; display:flex; align-items:center; justify-content:center; }
.qy .t{
  transform:rotate(-90deg); white-space:nowrap;
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--ink);
}
.qy .hi, .qy .lo{
  display:none; position:absolute; transform:rotate(-90deg); white-space:nowrap;
  font-family:var(--mono); font-size:9px; letter-spacing:1px;
  text-transform:uppercase; color:var(--faint);
}
.qy .hi{ top:26px; } .qy .lo{ bottom:26px; }

.qgrid{
  grid-column:2;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.q{ background:var(--paper); padding:14px 13px 18px; min-height:106px; position:relative; }
.q .qc{
  font-family:var(--mono); font-size:8px; font-weight:600; letter-spacing:.8px;
  line-height:1.4; text-transform:uppercase; color:var(--faint); margin:0;
  /* At phone widths the crumbs wrap unevenly — Primed's is squeezed onto two
     lines by the Skip badge while its neighbours fit on one — which would drop
     the quadrant NAMES onto different baselines and weaken the read of the 2x2.
     Reserving two lines everywhere keeps all four names level. */
  min-height:2.8em;
}
.q .qn{ font-size:16px; font-weight:600; letter-spacing:-.2px; line-height:1.2; margin:5px 0 0; }
.q.adapt{ background:#F2FBF9; } .q.adapt .qn{ color:var(--teal-d); }
.q.primed{ background:#F5F9FB; } .q.primed .qn{ color:var(--blue-d); }
.q.press{ background:#FFFAF0; } .q.press .qn{ color:var(--yellow-d); }
.q.over{ background:#FEF5F5; } .q.over .qn{ color:var(--red-d); }
/* keep the crumb clear of the badge in the Primed cell */
.q.primed .qc{ padding-right:44px; }
.qskip{
  position:absolute; top:12px; right:12px;
  font-family:var(--mono); font-size:7.5px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--paper); background:var(--ink);
  padding:3px 6px; border-radius:4px;
}
.qx{
  grid-column:2; display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin-top:9px;
  font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--ink);
}
.qx .c{ color:var(--faint); font-weight:400; }
@media (min-width:720px){
  .quad{ grid-template-columns:30px 1fr; column-gap:16px; }
  .qy .t{ font-size:10px; letter-spacing:1.8px; }
  .qy .hi, .qy .lo{ display:block; }
  .qgrid{ border-radius:12px; }
  .q{ padding:28px 28px 30px; min-height:152px; }
  .q .qc{ font-size:9.5px; letter-spacing:1.1px; min-height:0; }
  .q .qn{ font-size:25px; letter-spacing:-.4px; margin-top:8px; }
  .q.primed .qc{ padding-right:64px; }
  .qskip{ top:24px; right:26px; font-size:9px; letter-spacing:1.2px; padding:4px 9px; }
  .qx{ margin-top:14px; font-size:10px; letter-spacing:1.6px; }
  .qx .c{ letter-spacing:1.2px; }
}

/* ═══════════════════════════════════════════════════════════
   MODULE 2 AND 3 FIGURES — lessons 02 and 03

   Same rule as the module 4 block above: the drawings in these
   lessons paint with classes that have to exist somewhere, and here
   is the only place they can, if the pages are to stay free of a
   page-level <style> block and of inline CSS.
   ═══════════════════════════════════════════════════════════ */

/* ── THE THREE-SIGNAL PLOTS (lesson 03 · part 2) ────────────────
   Three inline SVG panels rebuilt from the app's own charts, copied
   across from the design frame verbatim, so the classes they paint
   with have to be defined here. Scoped under .threefig, like every
   other figure's paint in this file, so the shared `plot` class
   cannot reach the sleep and load figures further down.

   The viewBox is 1660 units wide, so glyph sizes are viewBox units
   and have to be restated below 720px or the labels scale away to
   nothing. Chart greys are the app's, not the docs chrome. */
.threefig .panels{ display:grid; gap:14px; }
.threefig .plot{ display:block; width:100%; }
.threefig .plot .card{ fill:var(--paper); stroke:#E4E2E0; stroke-width:2; }
.threefig .plot text{ font-family:var(--mono); font-size:22px; font-weight:500; fill:#8A8D8E; letter-spacing:1px; }
.threefig .plot .ttl{ font-family:var(--ral); font-size:34px; font-weight:600; fill:#1C1C1C; letter-spacing:0; }
.threefig .plot .yl{ text-anchor:end; }
.threefig .plot .xl{ text-anchor:middle; }
.threefig .plot .ic{ fill:none; stroke:#B7B9B9; stroke-width:2; }
.threefig .plot .ici{ text-anchor:middle; fill:#B7B9B9; }
.threefig .plot .gh, .threefig .plot .gv{ stroke:#DEDCDA; stroke-width:2; stroke-dasharray:5 7; }
.threefig .plot .ax{ stroke:#808181; stroke-width:2.5; }
.threefig .plot .chr{ stroke:#6E7172; stroke-width:3; stroke-dasharray:16 12; }
.threefig .plot .dt{ fill:#1E1E1E; }
.threefig .plot .ln{ fill:none; stroke:#ED683C; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; }
.threefig .plot .area{ fill:#ED683C; fill-opacity:.09; }
.threefig .plot .rd{ text-anchor:end; font-size:24px; fill:#6E7172; }
.threefig .plot .rv{ fill:#1C1C1C; font-weight:600; }
.threefig .plot .sep{ fill:#B7B9B9; }
.threefig .plot .lg line{ stroke:#ED683C; stroke-width:4; }
.threefig .plot .lg circle{ fill:var(--paper); stroke:#ED683C; stroke-width:4; }
.threefig .plot .lg text{ fill:#ED683C; font-size:24px; }
@media (max-width:719px){
  .threefig .plot text{ font-size:46px; }
  .threefig .plot .ttl{ font-size:66px; }
  .threefig .plot .rd{ font-size:48px; }
  .threefig .plot .lg text{ font-size:48px; }
  .threefig .plot .wd, .threefig .plot .alt{ display:none; }
  .threefig .plot .x0{ text-anchor:start; }
  .threefig .plot .xN{ text-anchor:end; }
}

/* ── the capacity-pool bars (lesson 02 · part 3) ─────────────────
   Two stacked bars, one per athlete. The segment widths ARE the
   data, so they are SVG geometry (attributes) rather than inline
   style, and the drawing carries no type at all — the readout below
   each bar is HTML, which is what keeps it legible on a phone. */
.poolbar{ display:block; width:100%; margin-top:12px; }

/* ═══════════════════════════════════════════════════════════
   MODULE 5 FIGURES — lessons 06 and 07

   Same reasoning as the Module 4 block above. These lessons carry
   drawings rather than layout: two rebuilt Beoflow sleep cards, a
   load-and-fitness curve, and the three-card load-metrics screen.
   Their SVGs are copied across from the design frames verbatim, so
   the classes those drawings paint with have to be defined here —
   that is the only way the pages stay free of a <style> block and
   of inline CSS. Nothing below is page styling; it is the figures'
   own furniture.
   ═══════════════════════════════════════════════════════════ */

/* a kicker introducing a heading belongs to that heading */
.kicker + h2, .kicker + h3{ margin-top:0; }

/* ── signal-coloured inline spans ────────────────────────────
   Lesson 06's "read together" list encodes a severity ramp in
   colour: HRV rising is good, both flat is caution, both moving the
   wrong way is alarm. The colour IS the reading, not decoration, so
   the four values are named here rather than inlined span by span.
   Dark ramp, like every other text colour on light ground. */
.sig{ font-weight:600; }
.sig.good{ color:var(--teal-d); }
.sig.blue{ color:var(--blue-d); }
.sig.warn{ color:var(--yellow-d); }
.sig.alarm{ color:var(--red-d); }

/* ── two drawings, one figure ────────────────────────────────
   Where a chart carries its labels INSIDE the drawing, one viewBox
   cannot serve both widths: type sized to survive the desktop scale
   lands under 6px on a phone. Those figures carry both of the design
   frame's drawings and switch between them. Only ever one is in the
   flow, so the two never both paint. */
.svg-wide{ display:none; }
@media (min-width:720px){
  .svg-wide{ display:block; }
  .svg-narrow{ display:none; }
}
/* The load-metrics charts are authored for the full 1040px break-out, and
   figure.break only takes it at 1120. Between 720 and 1120 the figure is still
   just the reading column, where the wide drawing's labels render near 6px, so
   it holds the narrow drawing — and its three read-out cards stay stacked — for
   that band. */
@media (min-width:720px) and (max-width:1119px){
  .loadfig .svg-wide{ display:none; }
  .loadfig .svg-narrow{ display:block; }
  .loadfig .grid.three{ grid-template-columns:1fr; }
}

/* ── the overnight sleep cards (lesson 06 · part 2) ──────────
   Two Beoflow sleep-analysis cards. Everything here is the card's
   own chrome plus the plot's paint; the SVG inside is untouched. */
/* figure.break bleeds its children to the viewport edge, which is right for a
   full-width drawing but wrong for a card with a border and a caption under it.
   The two card figures below pull their own gutter back. */
.sleepfig .shots{ display:grid; gap:24px; margin-left:var(--gutter); margin-right:var(--gutter); }
.sleepfig .shot{ min-width:0; }
.sleepfig .shotlab{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:var(--faint); margin:0 0 9px; }
.sleepfig .frame{ border:1px solid var(--line); border-radius:12px; background:#F5F4F2; padding:14px 14px 9px; }
.sleepfig .st{ display:flex; justify-content:space-between; align-items:flex-start; }
.sleepfig .stt{ font-size:15px; font-weight:600; letter-spacing:.2px; color:#1C1C1C; }
.sleepfig .info{ width:15px; height:15px; border:1.2px solid var(--faint); border-radius:50%; font-size:9px; font-weight:600; color:var(--faint); display:flex; align-items:center; justify-content:center; flex:none; }
.sleepfig .sm{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:1.1px; color:#5F6263; margin-top:10px; }
.sleepfig .chips{ display:flex; gap:6px; margin-top:12px; }
.sleepfig .chip{ font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.9px; color:#3A3D3E; border:1px solid #DEDEDC; border-radius:9999px; padding:5px 11px; background:#FAFAF9; }
.sleepfig .chip.on{ color:var(--blue); border-color:var(--blue); background:#E6F0F5; }
.sleepfig .shotread{ font-size:14px; line-height:1.6; color:var(--muted); margin:11px 0 0; }
/* The two cards sit side by side only from 1120px, where figure.break itself
   goes wide. Pairing them any earlier halves a 680px column, and the axis
   labels inside the drawing fall to about 6px. */
@media (min-width:1120px){
  .sleepfig .shots{ grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
}
@media (min-width:720px){
  .sleepfig .shotlab{ font-size:9.5px; }
  .sleepfig .frame{ padding:15px 16px 10px; border-radius:14px; }
  .sleepfig .shotread{ font-size:13.5px; margin-top:12px; }
}

/* The plot is authored at desktop scale, and the narrow overrides
   are subtractive — every other x label is dropped and the two end
   labels are pulled inside the box — so they read as a max-width
   block rather than the file's usual mobile-first order. */
.sleepfig .plot{ display:block; width:100%; margin-top:10px; }
.sleepfig .plot text{ font-family:var(--mono); font-size:30px; font-weight:500; fill:var(--faint); letter-spacing:1px; }
.sleepfig .plot .yl{ text-anchor:end; }
.sleepfig .plot .xl{ text-anchor:middle; }
.sleepfig .plot .gh, .sleepfig .plot .gv{ stroke:#E2E2E0; stroke-width:2; stroke-dasharray:5 7; }
.sleepfig .plot .ax{ stroke:#6E7172; stroke-width:2.5; }
.sleepfig .plot .trend{ stroke:#1C1C1C; stroke-width:6; stroke-dasharray:22 15; stroke-linecap:butt; }
.sleepfig .plot .ln.o{ fill:none; stroke:#E8633C; stroke-width:3.5; }
.sleepfig .plot .dot.o{ fill:#E8633C; }
.sleepfig .plot .ln.b{ fill:none; stroke:#6EA4C2; stroke-width:3; }
.sleepfig .plot .stem.b{ fill:none; stroke:#6EA4C2; stroke-width:3; }
.sleepfig .plot .dot.b{ fill:#6EA4C2; }
@media (max-width:719px){
  .sleepfig .plot text{ font-size:44px; }
  .sleepfig .plot .alt{ display:none; }
  .sleepfig .plot .x0{ text-anchor:start; }
  .sleepfig .plot .xN{ text-anchor:end; }
}

/* ── the load-and-fitness curve (lesson 07 · part 1) ─────────── */
.curvefig .curves{ border:1px solid var(--line); border-radius:12px; background:var(--paper); padding:14px 14px 12px; margin-left:var(--gutter); margin-right:var(--gutter); }
.curvefig .ct{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:var(--faint); line-height:1.5; margin:0 0 8px; }
.curvefig .basecap{ display:flex; justify-content:space-between; gap:8px; font-family:var(--mono); font-size:8px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); margin-top:6px; }
.curvefig .cleg{ display:flex; flex-direction:column; gap:10px; margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--muted); }
.curvefig .cl{ display:flex; align-items:center; gap:9px; }
.curvefig .cl .ln{ flex:none; width:22px; height:0; border-top:3px solid; }
.curvefig .cl.fit .ln{ border-color:var(--blue-d); }
.curvefig .cl.fit b{ color:var(--blue-d); font-weight:600; }
.curvefig .cl.fat .ln{ border-color:var(--orange); }
.curvefig .cl.fat b{ color:var(--orange); font-weight:600; }
@media (min-width:720px){
  .curvefig .curves{ padding:20px 24px 16px; }
  .curvefig .ct{ font-size:10px; margin-bottom:10px; }
  .curvefig .basecap{ font-size:9.5px; margin-top:8px; }
  .curvefig .cleg{ flex-direction:row; flex-wrap:wrap; gap:28px; margin-top:12px; font-size:13px; }
}

/* ── the load-metrics screen (lesson 07 · part 2) ─────────────
   Three stacked Beoflow chart cards inside one cream pane. */
.loadfig .pane{ border:1px solid var(--line); border-radius:12px; background:var(--cream); padding:16px 16px 18px; margin-left:var(--gutter); margin-right:var(--gutter); }
.loadfig .pane > .l{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:var(--blue-d); line-height:1.5; margin:0 0 10px; }
.loadfig .shotstack{ display:grid; gap:12px; }
.loadfig .frame{ border:1px solid var(--line); border-radius:12px; background:var(--paper); padding:12px 14px 8px; }
.loadfig .st{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.loadfig .stt{ font-size:14px; font-weight:600; letter-spacing:.2px; color:#1C1C1C; }
.loadfig .info{ width:14px; height:14px; border:1.2px solid var(--faint); border-radius:50%; font-size:9px; font-weight:600; color:var(--faint); display:flex; align-items:center; justify-content:center; flex:none; }
.loadfig .slg{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; margin-top:8px; font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.3px; line-height:1.4; color:var(--muted); }
.loadfig .slg span{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.loadfig .slg i{ flex:none; position:relative; width:18px; height:8px; }
.loadfig .slg i::before{ content:""; position:absolute; left:0; top:3px; width:100%; height:2px; background:currentColor; }
.loadfig .slg i::after{ content:""; position:absolute; left:6px; top:0; width:8px; height:8px; border-radius:50%; border:2px solid currentColor; background:var(--paper); }
.loadfig .s-fit{ color:#30576C; }
.loadfig .s-load{ color:#ED683C; }
.loadfig .s-area{ color:#92BDD2; }
.loadfig .s-comb{ color:#212121; }
.loadfig .s-cardio{ color:#92BDD2; }
.loadfig .s-stren{ color:#ED683C; }
.loadfig .grid{ margin-bottom:0; }
@media (min-width:720px){
  .loadfig .pane{ padding:22px 24px 24px; }
  .loadfig .pane > .l{ font-size:10px; margin-bottom:14px; }
  .loadfig .shotstack{ gap:14px; }
  .loadfig .frame{ padding:14px 16px 9px; }
  .loadfig .stt{ font-size:15px; }
  .loadfig .info{ width:15px; height:15px; font-size:9.5px; }
  .loadfig .slg{ gap:22px; margin-top:9px; font-size:10px; letter-spacing:.4px; }
  .loadfig .slg i{ width:20px; }
}
.loadfig .plot{ display:block; width:100%; margin-top:4px; }
.loadfig .plot text{ font-family:var(--mono); font-size:30px; font-weight:500; fill:var(--faint); letter-spacing:1px; }
.loadfig .plot .yl{ text-anchor:end; }
.loadfig .plot .xl{ text-anchor:middle; }
.loadfig .plot .x0{ text-anchor:start; }
.loadfig .plot .xN{ text-anchor:end; }
.loadfig .plot .gh, .loadfig .plot .gv{ stroke:#E2E2E0; stroke-width:3; stroke-dasharray:5 8; }
.loadfig .plot .ax{ stroke:#6E7172; stroke-width:3.4; }
.loadfig .plot .area{ fill:#DEE8EC; stroke:none; }
.loadfig .plot .ln{ fill:none; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.loadfig .plot .ln.fit{ stroke:#30576C; }
.loadfig .plot .ln.load{ stroke:#ED683C; }
.loadfig .plot .ln.comb{ stroke:#212121; }
.loadfig .plot .dot.comb{ fill:#212121; }
.loadfig .plot .ln.cardio{ stroke:#92BDD2; }
.loadfig .plot .dot.cardio{ fill:#92BDD2; }
.loadfig .plot .ln.stren{ stroke:#ED683C; }
.loadfig .plot .dot.stren{ fill:#ED683C; }
@media (min-width:720px){
  .loadfig .plot text{ font-size:26px; }
  .loadfig .plot .wd{ font-size:24px; }
  .loadfig .plot .gh, .loadfig .plot .gv{ stroke-width:2.4; }
  .loadfig .plot .ax{ stroke-width:3; }
  .loadfig .plot .ln{ stroke-width:5; }
}

/* ── utility ──────────────────────────────────────────────── */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible{ outline:2px solid var(--blue-d); outline-offset:2px; }

@media print{
  .topbar,.prog,.lessonnav,.sticky,.sitebar{ display:none; }
  .acc details{ border:0; } .acc .body{ display:block !important; }
}

/* ═══════════════════════════════════════════════════════════
   MODULE 6 FIGURES — lessons 09, 10 and 11 (pages 22 to 26)

   Same reasoning as the Module 4 and Module 5 blocks above.
   Three things in these lessons have no expression in the
   vocabulary so far: the recovery triangle on p23, the four-alarm
   set on p24, and the six-move loop on p26. In all three the
   COLOUR IS THE CONTENT — teal output against blue and amber
   inputs, red for the readings that override a plan, and the
   blue/blue amber/amber teal purple grouping that says
   read, judge, act, watch. So they are built here rather than in
   a page-level <style> block or inline.
   ═══════════════════════════════════════════════════════════ */

/* A card's mono label takes the colour of the card's own accent.
   Every accent card in the course already does this; up to now each
   page said so inline. Named once here so the Module 6 pages carry
   no inline colour. Pages that still set it inline are unaffected —
   the value is identical and inline wins regardless. */
.card.good > .l{ color:var(--teal-d); }
.card.blue > .l{ color:var(--blue-d); }
.card.warn > .l{ color:var(--yellow-d); }
.card.alarm > .l{ color:var(--red-d); }
.card.lit  > .l{ color:var(--purple-d); }
/* On these three pages the label is a whole question or an alarm name,
   not two words, so it wraps and needs leading. Scoped rather than put
   on `.card .l`, which would add a couple of pixels to every card in
   the course for no reason. */
.wbfig .card > .l, .alarmset .card > .l, .card > .l.ruled{ line-height:1.5; }
/* the label as a ruled-off header of the card (p25) */
.card > .l.ruled{ border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:10px; }

/* a callout that carries a heading as well as a label (p22, race day) */
.callout h3{ margin:6px 0 0; font-size:18px; }
.callout.warn h3{ color:var(--yellow-d); }
@media (min-width:720px){ .callout h3{ font-size:20px; } }

/* ── a horizon-coloured section head (p24, p25) ──────────────
   The two halves of lesson 10 are the short term and the long
   term, and the rule above each head is the only thing that says
   which one you are in. Red short term, teal long term. */
.sect{ margin-top:34px; padding-top:24px; border-top:2px solid var(--line); }
.sect.alarm{ border-top-color:var(--red); }
.sect.good{ border-top-color:var(--teal); }
.sect > .kicker:first-child{ margin-top:0; }
.kicker.alarm{ color:var(--red-d); }
.kicker.good{ color:var(--teal-d); }

/* ── the four alarms (p24) ───────────────────────────────────
   A full red border, not just the 3px accent, so the four read as
   one set. Scoped to the set: .card.alarm elsewhere in the course
   is a single card among neutral ones and keeps its quiet border. */
.alarmset .card{ border-color:var(--red); }
/* the reading that fires the alarm, ruled off from the instruction
   below it. Mono, because it is a signature and not prose. */
.card > .asig{
  font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--faint);
  border-bottom:1px solid var(--line); padding-bottom:10px; margin:0 0 11px;
}
@media (min-width:720px){ .card > .asig{ font-size:11.5px; line-height:1.55; } }

/* ── work backwards from the signal (p23) ────────────────────
   A cream panel holding the recovery triangle and the three
   "if this looks wrong" cards. The triangle and the cards are one
   figure: the cards name the same three nodes in the same three
   colours. They only sit side by side from 1000px, because below
   that the triangle's labels — which live inside the drawing —
   fall under 8px. */
.wbfig{ border:1px solid var(--line); background:var(--cream); border-radius:12px; padding:20px 18px; margin:24px 0 32px; }
.wbfig h2{ margin:0; }
.wbfig .wb-sub{ font-size:14.5px; line-height:1.65; margin:11px 0 0; }
.wbfig .wb-wrap{ display:grid; gap:20px; margin-top:18px; }
.wbfig .wb-cards{ display:grid; gap:12px; }
.wbfig .wb-cards > *{ margin:0; }
.wbfig .card{ background:var(--paper); padding:15px 18px; }
.wbfig .card p{ font-size:14px; }
@media (min-width:720px){
  .wbfig{ padding:30px 34px; border-radius:12px; }
  .wbfig .wb-sub{ font-size:15.5px; }
  .wbfig .wb-wrap{ gap:24px; margin-top:22px; }
}
@media (min-width:1000px){
  .wbfig .wb-wrap{ grid-template-columns:1.02fr .98fr; gap:34px; align-items:center; }
}

/* the triangle itself. Recovery is the OUTPUT (teal), sleep and
   training load are the INPUTs (blue, amber); the two edges up to
   recovery are FEEDS and the base edge is INTERACT. Node stroke uses
   the base token, every label the dark ramp. The type lives inside
   the drawing, so it is restated in viewBox units per breakpoint. */
.tri{ display:block; width:100%; height:auto; }
.tri line{ stroke:#C9CCCD; stroke-width:2; }
.tri rect.lb{ fill:var(--cream); }
.tri text{ text-anchor:middle; }
.tri .edge{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.7px; fill:var(--faint); }
.tri .nd{ fill:var(--paper); stroke-width:1.5; }
.tri .nd.t{ stroke:var(--teal); }
.tri .nd.b{ stroke:var(--blue); }
.tri .nd.a{ stroke:var(--yellow); }
.tri .role{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.9px; }
.tri .role.t{ fill:var(--teal-d); }
.tri .role.b{ fill:var(--blue-d); }
.tri .role.a{ fill:var(--yellow-d); }
.tri .name{ font-family:var(--ral); font-size:22px; font-weight:600; fill:var(--ink); }
@media (max-width:719px){
  .tri .edge{ font-size:15px; }
  .tri .role{ font-size:14px; }
  .tri .name{ font-size:25px; }
}

/* ── the two horizons (p23) ──────────────────────────────────
   Short term is blue, long term teal. From 720px this is a matrix
   and the column head carries the horizon for the cells beneath it.

   Below that it is NOT a scrolling table. A 3-column matrix on a
   phone hides most of the long-term column off the right edge, and
   the whole point of the figure is the comparison, so under 720px
   every row becomes its own block and each cell names its own
   horizon inline — which is the treatment the design frame's mobile
   panel uses. One markup, two readings, no `.swipe` needed. */
.horizons th b{
  display:block; font-family:var(--ral); font-size:16px; font-weight:600;
  letter-spacing:-.2px; text-transform:none; color:var(--ink); margin-top:7px;
}
.horizons th.h-s{ color:var(--blue-d); background:rgba(74,155,184,.06); }
.horizons th.h-l{ color:var(--teal-d); background:rgba(7,181,152,.06); }
.horizons th{ padding:14px 16px; }
.horizons td{ padding:12px 16px; }
.horizons tr.key td{ font-weight:600; color:var(--ink); }
.horizons .qual{ color:var(--faint); }
.horizons .hz{
  display:block; font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:1.1px; text-transform:uppercase; margin-bottom:6px;
}
.horizons th.h-s .hz{ color:var(--blue-d); }
.horizons th.h-l .hz{ color:var(--teal-d); }
.horizons td.c-s .hz{ color:var(--blue-d); }
.horizons td.c-l .hz{ color:var(--teal-d); }
@media (min-width:720px){
  .horizons th b{ font-size:19px; }
  .horizons th{ padding:16px 22px; }
  .horizons td{ padding:14px 22px; }
  /* the column head already says which horizon this column is */
  .horizons td .hz{ display:none; }
  .horizons th .hz{ margin-bottom:0; font-size:10px; letter-spacing:1.2px; }
}
@media (max-width:719px){
  .tablewrap.stack{ overflow:visible; }
  .tablewrap.stack .horizons{ min-width:0; }
  .horizons, .horizons thead, .horizons tbody,
  .horizons tr, .horizons th, .horizons td{ display:block; }
  .horizons tr{ border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:14px; }
  .horizons tr:last-child{ margin-bottom:0; }
  .horizons tr > *{ border-bottom:1px solid var(--line); }
  .horizons tr > *:last-child{ border-bottom:0; }
  .horizons th.corner, .horizons tbody th{
    font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1.1px;
    text-transform:uppercase; color:var(--faint); background:var(--cream);
    padding:11px 16px; white-space:normal;
  }
  .horizons th.h-s, .horizons th.h-l, .horizons td{
    font-family:var(--ral); font-size:14.5px; font-weight:400; line-height:1.6;
    letter-spacing:normal; text-transform:none; color:var(--muted);
    background:none; padding:12px 16px;
  }
  .horizons th b{ margin-top:0; font-size:15px; }
  .horizons tr.key td{ color:var(--ink); font-weight:600; }
}

/* ── the coach's loop (p26) ──────────────────────────────────
   SIX moves, never more. One markup at both widths: the colour bar
   is the top edge of a column on desktop and the left edge of a row
   on a phone, which is the only difference between the two. The
   grouping is the teaching — 01 and 02 read (blue), 03 and 04 judge
   (amber), 05 acts (teal), 06 watches (purple, on cream, because it
   is the move that hands back to 01). */
.loopfig .loop{
  display:grid; border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.loopfig .mv{ display:flex; border-bottom:1px solid var(--line); }
.loopfig .mv:last-child{ border-bottom:0; }
.loopfig .bar{ flex:none; width:3px; }
.loopfig .body{ display:flex; align-items:baseline; gap:13px; padding:14px 16px; }
.loopfig .nn{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:1.2px; margin:0; flex:none; }
.loopfig .nt{ font-size:15.5px; font-weight:600; line-height:1.3; color:var(--ink); margin:0; }
.loopfig .n1 .bar, .loopfig .n2 .bar{ background:var(--blue); }
.loopfig .n1 .nn, .loopfig .n2 .nn{ color:var(--blue-d); }
.loopfig .n3 .bar, .loopfig .n4 .bar{ background:var(--yellow); }
.loopfig .n3 .nn, .loopfig .n4 .nn{ color:var(--yellow-d); }
.loopfig .n5 .bar{ background:var(--teal); }
.loopfig .n5 .nn{ color:var(--teal-d); }
.loopfig .n6 .bar{ background:var(--purple); }
.loopfig .n6 .nn{ color:var(--purple-d); }
.loopfig .n6{ background:var(--cream); }
@media (min-width:720px){
  .loopfig .loop{ grid-auto-flow:column; grid-auto-columns:1fr; }
  .loopfig .mv{ flex-direction:column; border-bottom:0; border-right:1px solid var(--line); }
  .loopfig .mv:last-child{ border-right:0; }
  .loopfig .bar{ width:auto; height:3px; }
  .loopfig .body{ flex-direction:column; align-items:center; text-align:center; gap:9px; padding:18px 12px 20px; }
  .loopfig .nt{ font-size:14.5px; }
}
/* the sixth move hands back to the first — the line is the loop */
.loopfig .loopback{
  margin:12px 0 0; display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--purple-d); line-height:1.6;
}
/* NOT `.tip` — that is the course-wide pro-tip box, and a bare `.tip`
   would drag its border, cream-green fill and padding in here. */
.loopfig .loopback .arrow{
  flex:none; width:0; height:0;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  border-right:6px solid var(--purple-d);
}
.loopfig .loopback .line{
  flex:1; height:1px;
  background:linear-gradient(90deg,rgba(80,43,59,.55),rgba(80,43,59,.10));
}
@media (min-width:720px){ .loopfig .loopback{ font-size:10px; letter-spacing:1.2px; } }

/* the same six, written out. The step number keeps its group colour
   so the list and the figure above it read as one thing. */
.steps .sname{ display:block; font-size:18px; font-weight:600; color:var(--ink); line-height:1.25; margin:2px 0 8px; }
@media (min-width:720px){ .steps .sname{ font-size:19px; } }
.steps li.s1 .n, .steps li.s2 .n{ color:var(--blue-d); }
.steps li.s3 .n, .steps li.s4 .n{ color:var(--yellow-d); }
.steps li.s5 .n{ color:var(--teal-d); }
.steps li.s6 .n{ color:var(--purple-d); }

/* ═══════════════════════════════════════════════════════════
   MODULE 7 — lessons 14 and 15 (pages 32 to 36)

   Same rule as the figure blocks above: these five pages need a
   handful of expressions the shared vocabulary does not yet carry —
   a ruled section divider, a numbered audit step with a heading, a
   rule-numbered accordion, a three-profile comparison matrix, and a
   pull quote. They are defined here, from the existing custom
   properties, so the pages themselves stay free of inline CSS and of
   any page-level <style> block.
   ═══════════════════════════════════════════════════════════ */

/* ── ruled section divider ───────────────────────────────────
   A hard rule that opens a new movement inside a lesson. Ink by
   default; the blue and teal variants are lesson 15's two halves,
   where the rule's colour is the only thing separating "how to
   structure the work" from "how to tell whether it fitted". */
.sectrule{ border-top:2px solid var(--ink); margin-top:36px; padding-top:22px; }
.sectrule.lead{ margin-top:8px; }
.sectrule.blue{ border-top-color:var(--blue); }
.sectrule.teal{ border-top-color:var(--teal); }
.sectrule > :first-child{ margin-top:0; }
/* the divider's own kicker reads as ink, not chrome */
.sectrule > .kicker{ color:var(--ink); }
.sectrule.blue > .kicker{ color:var(--blue-d); }
.sectrule.teal > .kicker{ color:var(--teal-d); }
@media (min-width:720px){ .sectrule{ margin-top:48px; padding-top:24px; } }

/* ── audit steps with a heading (lesson 14 · part 2) ─────────
   The base .steps li is a single run of text. The audit gives each
   step a title as well as a body, and step 00 — stop, add nothing —
   is the one that carries a warning, so it is tinted red. */
.steps .h{ display:block; font-size:16px; font-weight:600; line-height:1.35; color:var(--ink); margin-bottom:5px; }
.steps li.stop{ background:#FEF7F7; border-color:#F1D9D9; }
.steps li.stop .n, .steps li.stop .h{ color:var(--red-d); }
@media (min-width:720px){ .steps li{ padding:16px 20px; } .steps .h{ font-size:17px; } }

/* ── rule-numbered accordion rows (lesson 14 · part 3) ───────
   R1 to R7 are referenced as numbers elsewhere in the module, so the
   number is content and lives in the summary beside the title. */
.acc summary .rn{ flex:none; width:26px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:1px; color:var(--teal-d); }
.acc summary .tt{ flex:1; }
@media (max-width:719px){
  .acc summary{ align-items:flex-start; }
  .acc summary::before{ margin-top:6px; }
  .acc summary .rn{ font-size:10px; width:22px; padding-top:1px; }
}

/* ── signal colour on a card's own label ─────────────────────
   .card .l is chrome grey. On a modifier card the label repeats the
   accent, which until now was done with an inline style on every
   single label. Named here instead. */
.card.good > .l{ color:var(--teal-d); }
.card.blue > .l{ color:var(--blue-d); }
.card.warn > .l{ color:var(--yellow-d); }
.card.alarm > .l{ color:var(--red-d); }
.card.lit > .l{ color:var(--purple-d); }

/* ── the test cards (lesson 14 · part 4) ─────────────────────
   A cream card whose headline is a duration, not a sentence. The
   duration is the reading — 20 min, 2 x 1 min, 20 sec, 5 min — so it
   is set in mono at display size. */
.card.fill{ background:var(--cream); }
.card .dur{ font-family:var(--mono); font-size:22px; font-weight:600; line-height:1; color:var(--teal-d); margin:10px 0; }
/* Four cards across needs about 900px of container. Between 720 and
   1023 the .wide container is narrower than that, so the row folds to
   2 x 2 rather than squeezing four columns of body copy. */
@media (min-width:720px) and (max-width:1023px){ .grid.four{ grid-template-columns:1fr 1fr; } }

/* ── the pull quote (lesson 15 · part 1) ─────────────────────
   .rule at display size and in italic. The lesson opens on a spoken
   line, and the emphasis inside it is the speaker's own aside, so it
   takes the ochre accent and drops back out of italic. */
.rule.pull{ font-size:21px; line-height:1.35; font-weight:600; font-style:italic; letter-spacing:-.2px; }
.rule.pull b{ color:var(--yellow-d); font-weight:600; font-style:normal; }
@media (min-width:720px){ .rule.pull{ font-size:26px; padding-left:24px; } }

/* ── the three-profile matrix (lesson 15 · part 1) ───────────
   A real four-column comparison table. The three profile columns are
   washed with pale tints of their own signal, in the same spirit as
   the quadrant cells. It scrolls inside .tablewrap on a phone — never
   the page — and the key column stays pinned so a row keeps its
   label while the profiles slide past. */
.tablewrap.boxed{ border:1px solid var(--line); border-radius:12px; }
.tablewrap table.matrix{ min-width:700px; }
.matrix{ table-layout:fixed; }
.matrix col.k{ width:132px; }
.matrix th, .matrix td{
  font-family:var(--ral); font-size:13.5px; font-weight:400; line-height:1.55;
  letter-spacing:normal; text-transform:none; text-align:left; vertical-align:top;
  color:var(--muted); padding:13px 16px;
  border-bottom:1px solid var(--line); border-left:1px solid var(--line);
}
.matrix th:first-child, .matrix td:first-child{ border-left:none; }
.matrix tr:last-child td{ border-bottom:none; }
.matrix th.d{ background:#F1F6F9; }
.matrix th.g{ background:#FDF4E5; }
.matrix th.s{ background:#F7F0F3; }
.matrix .thn{ display:block; font-size:15.5px; font-weight:600; line-height:1.2; }
.matrix th.d .thn{ color:var(--blue-d); }
.matrix th.g .thn{ color:var(--yellow-d); }
.matrix th.s .thn{ color:var(--purple-d); }
.matrix .thsub{ display:block; font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:var(--faint); margin-top:6px; }
.matrix td.k{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--faint); background:var(--paper); }
@media (max-width:719px){
  .matrix th:first-child, .matrix td:first-child{ position:sticky; left:0; z-index:2; background:var(--paper); border-right:1px solid var(--line); }
}
@media (min-width:720px){
  .matrix col.k{ width:150px; }
  .matrix th, .matrix td{ font-size:14px; padding:14px 20px; }
  .matrix .thn{ font-size:17px; }
}

/* ── signal colour carried by a paragraph's emphasis (lesson 15 · part 2)
   The fit / mismatch pair reads as one contrast: what a fitting
   stimulus looks like in the data, and what a mismatched one looks
   like. The colour of the emphasis IS that contrast. */
p.tone.good b{ color:var(--teal-d); }
p.tone.bad b{ color:var(--red-d); }

/* ═══════════════════════════════════════════════════════════
   MODULES 8 AND 9 — lessons 16 and 17 (pages 37 to 40)

   Same rule as every figure block above: the last four pages carry
   three components the shared vocabulary does not yet express — the
   case card, the twenty-state wall chart, and the state card that
   replaces that chart on a phone — so their paint is defined here
   and the pages stay free of inline CSS and of a <style> block.

   NAMES: the design frames painted with `.b`, `.sr`, `.sig`, `.st`,
   `.meta`, `.tri`, `.sect` and `.matrix`, and every one of those
   already means something else in this file (`.sr` is the screen
   reader utility, `.sig` the inline signal span, `.tri` the Module 6
   recovery triangle, `.matrix` the Module 7 profile table). Nothing
   below reuses a taken name — hence `.bdg`, `.sigrow`, `.state`,
   `.mrow`, `.baltri`, `tr.grp`. `.sect`, `.matrix`, `.acc`, `.rule`
   and `.complete` ARE reused, deliberately, because they already say
   exactly the right thing.
   ═══════════════════════════════════════════════════════════ */

/* ── the emphasised rule (p37, p39) ──────────────────────────
   Two pages close on a rule whose bold clause is the teaching, not
   just emphasis. Teal, because in both cases the clause names what
   a good read looks like. `.rn` labels the rule when it needs one. */
.rule.key b{ color:var(--teal-d); }
.rule .rn{
  display:block; font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--faint); margin-bottom:8px;
}
@media (min-width:720px){
  .rule.key{ font-size:21px; }
  .rule .rn{ font-size:10px; letter-spacing:1.4px; margin-bottom:10px; }
}

/* ── the three-case summary matrix (p37) ─────────────────────
   Module 7's `.matrix` with a different payload. Colour on the
   Reactivity column is the reading and not decoration: it is the one
   column that separates B from C, which is the whole argument of the
   page. Row B is tinted for the same reason — it is the row where
   every other column looks fine. */
.matrix.cases col.k{ width:150px; }
.matrix.cases td.cse{ font-weight:600; color:var(--ink); }
.matrix.cases td.cse.a{ color:var(--red-d); }
.matrix.cases td.cse.b{ color:var(--yellow-d); }
.matrix.cases td.cse.c{ color:var(--teal-d); }
.matrix.cases td.react{ font-weight:600; }
.matrix.cases td.react.bad{ color:var(--red-d); }
.matrix.cases td.react.mid{ color:var(--yellow-d); }
.matrix.cases td.react.good{ color:var(--teal-d); }
.matrix.cases tr.rb td{ background:#FDF6E9; }
/* the tint has to survive on the pinned first column too, or row B
   loses the thing that marks it while the table scrolls */
@media (max-width:719px){ .matrix.cases tr.rb td:first-child{ background:#FDF6E9; } }
@media (min-width:720px){ .matrix.cases col.k{ width:190px; } }

/* ── the case card (p38, p39) ────────────────────────────────
   One card per case, bordered in the case's own signal: red for the
   serious mismatch, amber for the slight one, teal for the good fit.
   The head is washed in the same signal, the body is a run of
   labelled sub-sections, and the fix is ruled off at the bottom
   because it is the only part the coach acts on. */
.case{ border:1px solid; border-radius:12px; overflow:hidden; margin:26px 0 0; }
.case.lead{ margin-top:0; }
.case.a{ border-color:var(--red); }
.case.b{ border-color:var(--yellow); }
.case.c{ border-color:var(--teal); }
.case .chead{ padding:18px; border-bottom:1px solid var(--line); }
.case.a .chead{ background:#FDF2F2; }
.case.b .chead{ background:#FDF6E9; }
.case.c .chead{ background:#EDF8F6; }
.case .ck{
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.1px;
  text-transform:uppercase; line-height:1.5; margin:0 0 10px;
}
.case.a .ck{ color:var(--red-d); }
.case.b .ck{ color:var(--yellow-d); }
.case.c .ck{ color:var(--teal-d); }
.case .ch{
  font-size:21px; font-weight:600; line-height:1.18; letter-spacing:-.3px;
  color:var(--ink); margin:0 0 10px;
}
.case .cwho{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }
.case .cbody{ padding:2px 18px 20px; }
.case .blk{ margin-top:18px; }
.case .sub2{
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--faint); margin:0 0 7px;
}
.case .blk p, .case .fixbox p{ font-size:15px; line-height:1.65; margin:0; }
.case .fixbox{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.case .fk2{
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--teal-d); margin:0 0 8px;
}
/* the chart traversal is a signature, not prose, so it is set in mono */
.case .monoline{
  font-family:var(--mono); font-size:12.5px; font-weight:500; line-height:1.6;
  letter-spacing:.4px; color:var(--teal-d); margin:0 0 9px;
}
@media (min-width:720px){
  .case{ margin-top:34px; }
  .case .chead{ padding:24px 28px 22px; }
  .case .ck{ font-size:10px; letter-spacing:1.2px; }
  .case .ch{ font-size:24px; margin-bottom:12px; }
  .case .cwho{ font-size:15px; }
  .case .cbody{ padding:4px 28px 26px; }
  .case .blk{ margin-top:22px; }
  .case .sub2, .case .fk2{ font-size:9.5px; letter-spacing:1.2px; }
  .case .blk p, .case .fixbox p{ font-size:15.5px; }
  .case .fixbox{ margin-top:24px; padding-top:20px; }
  .case .monoline{ font-size:13.5px; }
}

/* ═══════════════════════════════════════════════════════════
   THE WALL CHART — lesson 17, the cheat sheet (p40)

   Twenty states in five groups, and the course's only genuinely
   tabular figure. Desktop gets the real ten-column table; below
   720px it is replaced by five collapsible groups of state cards,
   because a ten-column table on a phone is a scroll and not a read.
   Only one of the two is ever in the flow. The state cards keep the
   threshold numbers — the numbers ARE the cheat sheet.
   ═══════════════════════════════════════════════════════════ */
.wcdesk{ display:none; }
@media (min-width:720px){ .wcdesk{ display:block; } .wcmob{ display:none; } }

/* ── badges ──────────────────────────────────────────────────
   Sleep and recovery take the signal map. LOAD DOES NOT: grey
   ground, ink text, hairline border, no colour at all. A high ratio
   is not good and a low one is not bad, it is a trade, so the load
   column must never borrow a valence it does not have. That is the
   single most important rule in this figure. */
.bdg{
  display:inline-block; font-family:var(--mono); font-size:8px; font-weight:600;
  letter-spacing:.4px; text-transform:uppercase; border:1px solid var(--line);
  border-radius:3px; padding:2px 5px; line-height:1.25; white-space:nowrap;
}
.bdg.tl{ color:var(--teal-d); border-color:#9EDDD1; background:#F2FBF9; }  /* HIGH / GOOD */
.bdg.rd{ color:var(--red-d);  border-color:#F5B5B5; background:#FEF5F5; }  /* LOW / BAD */
.bdg.bl{ color:var(--blue-d); border-color:#A9CFDE; background:#F5F9FB; }  /* OK */
.bdg.yl{ color:var(--yellow-d); border-color:#FFD98F; background:#FFFAF0; }/* MID */
.bdg.gy{ color:var(--faint); border-color:var(--line); background:var(--paper); } /* VAR */
.bdg.nt{ color:var(--ink); border-color:#D4D4D4; background:#F2F2F1; }     /* LOAD, neutral */
.bdn{ font-size:9px; color:var(--faint); line-height:1.35; margin-top:4px; }

.stim, .prg{
  display:inline-block; font-family:var(--mono); font-size:8px; font-weight:600;
  letter-spacing:.4px; text-transform:uppercase; border:1px solid;
  border-radius:3px; padding:2px 5px; line-height:1.25; white-space:nowrap;
}
.stim.hi{ color:var(--teal-d); border-color:#9EDDD1; background:#F2FBF9; }
.stim.mi{ color:var(--yellow-d); border-color:#FFD98F; background:#FFFAF0; }
.stim.lo{ color:var(--red-d); border-color:#F5B5B5; background:#FEF5F5; }
.stim.va{ color:var(--faint); border-color:var(--line); background:var(--paper); }
.prg.up{ color:var(--teal-d); border-color:#9EDDD1; background:#F2FBF9; }
.prg.hold{ color:var(--blue-d); border-color:#A9CFDE; background:#F5F9FB; }
.prg.down{ color:var(--red-d); border-color:#F5B5B5; background:#FEF5F5; }
.prg.var{ color:var(--faint); border-color:var(--line); background:var(--paper); }

/* ── the legend ──────────────────────────────────────────────
   Not chrome. The load row of this legend is the only place the
   page says out loud why load carries no colour. */
.legend{
  border:1px solid var(--blue-d);
  border-radius:12px; background:var(--cream);
  padding:14px 16px; margin:26px 0 0;
}
.legend .l{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--blue-d); margin:0 0 11px;
}
.legend .lrow{ margin-bottom:12px; line-height:1.6; }
.legend .lrow:last-child{ margin-bottom:0; }
.legend .lk{
  display:block; font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.9px; text-transform:uppercase; color:var(--faint); margin-bottom:6px;
}
.legend .lv{ font-size:12.5px; color:var(--muted); }
.legend .sw{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; }
.legend .sw.s-sleep{ background:var(--blue); }
.legend .sw.s-rec{ background:var(--teal); }
.legend .sw.s-load{ background:var(--yellow); }
@media (min-width:720px){
  .legend{ padding:16px 20px; }
  .legend .lrow{ display:flex; gap:10px; align-items:baseline; margin-bottom:9px; }
  .legend .lk{ display:block; flex:0 0 124px; margin-bottom:0; }
}

/* ── the desktop wall chart ──────────────────────────────────
   Ten columns of fixed width. It sits in figure.break, which reaches
   1040px from 1120px up, and inside .tablewrap below that so the
   TABLE scrolls and the page never does. */
.chartlab{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--faint); margin:0 0 12px; padding:0 var(--gutter);
}
.tablewrap table.wc{ min-width:990px; table-layout:fixed; border:1px solid var(--line); }
.wc th{ font-size:8.5px; letter-spacing:.6px; padding:10px 7px; border-bottom:1px solid var(--ink); line-height:1.3; }
.wc td{ font-size:10.5px; line-height:1.45; padding:9px 7px; vertical-align:top; }
.wc tr.grp td{
  background:var(--cream); border-top:1px solid var(--line); padding:9px 10px;
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--ink);
}
/* the four states a coach is most likely to misread, lifted onto cream */
.wc tr.tint td{ background:var(--cream); }
.wc td.sc{ font-size:11.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.wc td.bal{ padding:8px 3px; text-align:center; }

/* the balance triangle. One dot per corner: teal recovery at the
   apex, blue sleep bottom left, amber load bottom right. */
.baltri{ display:block; margin:0 auto; }

/* ── the mobile state cards ──────────────────────────────────
   Five <details> in the shared .acc, shipping closed like every
   other accordion in the course. Each state keeps its badges AND
   their numbers; the three right-hand reads become chips. */
.wcmob{ margin-top:24px; }
.wcmob .acc .body{ padding:0; }
.wcmob .gn{ flex:1; line-height:1.3; }
.wcmob .gn span{
  display:block; font-family:var(--ral); font-size:12.5px; font-weight:400;
  color:var(--muted); margin-top:3px;
}
.wcmob .gcnt{
  flex:none; font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.9px; text-transform:uppercase; color:var(--faint);
}
.state{ padding:15px 14px 17px; border-bottom:1px solid var(--line); }
.state:last-child{ border-bottom:0; }
.state.tint{ background:var(--cream); }
.state .sn{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.25; margin:0; }
.sigrows{ margin-top:10px; padding:9px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sigrow{ display:grid; grid-template-columns:60px 48px 1fr; gap:8px; align-items:start; padding:3px 0; }
.sigrow em{
  font-style:normal; font-family:var(--mono); font-size:8.5px; font-weight:600;
  letter-spacing:.8px; text-transform:uppercase; color:var(--faint); padding-top:3px;
}
.sigrow .sv{ font-size:11px; line-height:1.45; color:var(--muted); padding-top:2px; }
.state .mrow{ font-size:12.5px; line-height:1.55; color:var(--muted); margin:9px 0 0; }
.state .mrow em{
  display:block; font-style:normal; font-family:var(--mono); font-size:8.5px;
  font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--faint);
  margin-bottom:3px;
}
.state .doing{ font-size:13.5px; line-height:1.55; color:var(--muted); margin:10px 0 0; }
.state .chips{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:11px; }
.state .chip{
  display:flex; gap:6px; align-items:center;
  border:1px solid var(--line); border-radius:9999px; padding:5px 10px 5px 6px;
  font-family:var(--mono); font-size:8px; font-weight:500; letter-spacing:.5px;
  text-transform:uppercase; color:var(--faint); line-height:1.3;
}
.state .chips .baltri{ margin:0; }

/* ── what the three right-hand columns are for, and what is not
   settled about them ───────────────────────────────────────── */
.closing{
  border-left:3px solid var(--ink); padding:6px 0 6px 16px; margin:24px 0 0;
  font-size:13.5px; line-height:1.65; color:var(--muted);
}
.closing b{ color:var(--ink); font-weight:600; }
@media (min-width:720px){
  .closing{ padding-left:20px; margin-top:30px; font-size:14.5px; }
}

/* The case matrix breaks out to the wide container so its five
   columns are not squeezed into the reading measure. min-width is
   set BELOW the 680px measure on purpose: the table then never
   scrolls from 720px up, and only a phone gets the swipe. */
.tablewrap table.matrix.cases{ min-width:660px; }
/* the swipe hint pulls its own gutter back inside a break figure */
figure.break > .swipe{ padding:0 var(--gutter); }

/* ═══════════════════════════════════════════════════════════
   MODULE 7 — the engine room, the responder types, the
   signatures (lessons 12, 13 and 14 · pages 27 to 31)

   Same rule as every figure block above: these five pages carry
   compositions the shared vocabulary has no name for — the three
   energy-system cards, the fit spectrum, the adaptation curves,
   the responder-type ladder and the two signature charts. They
   are built here, from the existing custom properties, so the
   pages themselves stay free of inline CSS and of any page-level
   <style> block. Everything is scoped to the composition it
   belongs to.
   ═══════════════════════════════════════════════════════════ */

/* ── a block that widens at the wide breakpoint only ─────────
   figure.break's geometry without its below-1120 bleed to the
   viewport edge. Every composition below is a bordered box or a
   ruled table, and a border running off the side of a phone reads
   as a mistake rather than as a full-bleed drawing. */
@media (min-width:1120px){
  .gowide{ width:var(--wide); margin-left:calc((var(--wide) - var(--measure)) / -2); margin-right:0; }
}
/* NOTE for anyone adding a composition below: a .gowide block must set its
   spacing with `margin-top`, never the `margin` shorthand. The shorthand is the
   same specificity as the rule above and resets margin-left to 0, which leaves
   the block 1040px wide but still pinned to the column's left edge — it then
   runs off the right of the viewport. */

/* ── signal colour on a card's own label ─────────────────────
   The existing pairs are keyed to the accent modifiers (.card.good
   and friends), which draw a 3px side stripe. These five pages
   carry cards whose accent is the whole border, so the label's
   colour has to be nameable on its own. Dark ramp, like every
   other text colour on light ground. */
.l.c-blue{ color:var(--blue-d); }
.l.c-teal{ color:var(--teal-d); }
.l.c-yellow{ color:var(--yellow-d); }
.l.c-purple{ color:var(--purple); }
.l.c-red{ color:var(--red-d); }

/* ── a card whose accent is the whole border ─────────────────
   The side stripe marks a signal on an otherwise neutral card.
   Where the slide gives a card a full coloured rule, the colour
   names the card itself rather than flagging it. */
.card.ring-blue{ border-color:var(--blue); }
.card.ring-purple{ border-color:var(--purple); }
/* a card the slide treats as a feature block, not one of a row */
.card.feature h3{ font-size:20px; line-height:1.25; margin-bottom:10px; }
.card.feature p{ font-size:15px; line-height:1.68; }
/* The feature card's standfirst, between its heading and its body. `p.tag`
   rather than `.tag`, so it matches `.card.feature p` (0,2,1) and wins on
   source order instead of losing its size to it. */
.card p.tag{ font-size:14px; font-weight:600; color:var(--faint); margin:0 0 12px; }
@media (min-width:720px){
  .card.feature{ padding:26px 30px; }
  .card.feature h3{ font-size:22px; }
  .card.feature p{ font-size:15.5px; }
}

/* ── two-level section heading (lessons 12 and 13) ───────────
   A mono rule naming the movement, then the movement's thesis as
   the heading under it. NOTE: not .sect — that name is already
   taken by lesson 10's horizon-coloured divider, whose own 2px
   top rule would double up with the rule below. */
.sech{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--ink); line-height:1.5;
  padding-bottom:11px; border-bottom:2px solid var(--ink); margin:38px 0 14px;
}
.parts + .sech{ margin-top:8px; }
.sech + h2{ font-size:21px; line-height:1.25; margin-top:0; }
@media (min-width:720px){
  .sech{ font-size:11.5px; letter-spacing:1.4px; margin:52px 0 16px; }
  .parts + .sech{ margin-top:8px; }
  .sech + h2{ font-size:24px; line-height:1.2; letter-spacing:-.3px; }
}

/* ── a cream note carrying several paragraphs (lesson 13) ────
   `.hero-note p:not([class])` zeroes the margin, which is right
   for the one-paragraph hero and would run three paragraphs
   together. Direct children only, so a classed paragraph nested
   deeper — the fit spectrum's caption — keeps its own size. */
.hero-note + .hero-note{ margin-top:34px; }
.hero-note.prose > h2{ font-size:21px; line-height:1.2; margin:0 0 13px; }
.hero-note.prose > p{ font-size:15px; line-height:1.7; margin:0 0 13px; }
.hero-note.prose > p:last-child{ margin-bottom:0; }
@media (min-width:720px){
  .hero-note + .hero-note{ margin-top:46px; }
  .hero-note.prose{ padding:30px 34px; }
  .hero-note.prose > h2{ font-size:24px; letter-spacing:-.3px; margin-bottom:16px; }
  .hero-note.prose > p{ font-size:15.5px; margin-bottom:14px; }
}

/* ── the three energy-system cards (lesson 12 · part 1) ──────
   One card per system: a header naming it and the window it
   covers, then its spec list. The border colour is the system's
   identity and is carried through to the card's kicker. Three
   across only from 1120px, because the spec list is a 2-column
   grid inside the card and three of those inside a 680px measure
   leaves the values about eleven characters wide. */
.sysfig{ margin-top:30px; }
.sysfig .sysgrid{ display:grid; gap:14px; }
.sysfig .scard{ border:1px solid; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.sysfig .scard.p{ border-color:var(--purple); }
.sysfig .scard.g{ border-color:var(--yellow); }
.sysfig .scard.a{ border-color:var(--blue); }
.sysfig .chd{ padding:16px 18px 14px; border-bottom:1px solid var(--line); }
.sysfig .ck{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; line-height:1.5; margin:0 0 8px; }
.sysfig .scard.p .ck{ color:var(--purple); }
.sysfig .scard.g .ck{ color:var(--yellow-d); }
.sysfig .scard.a .ck{ color:var(--blue-d); }
.sysfig .cnm{ font-size:22px; font-weight:600; line-height:1.1; letter-spacing:-.3px; color:var(--ink); margin:0; }
.sysfig .cts{ font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.4px; color:var(--faint); margin:7px 0 0; }
.sysfig .crows{ padding:4px 18px 14px; }
.sysfig .crow{
  display:grid; grid-template-columns:78px 1fr; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--line); font-size:14.5px; line-height:1.5; color:var(--muted);
}
.sysfig .crow:last-child{ border-bottom:none; }
.sysfig .crl{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.9px; text-transform:uppercase; color:var(--faint); padding-top:3px; }
.sysfig .crow b{ color:var(--ink); font-weight:600; }
@media (min-width:720px){ .sysfig{ margin-top:44px; } }
@media (min-width:1120px){
  .sysfig .sysgrid{ grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
  .sysfig .chd{ padding:18px 20px 15px; }
  .sysfig .ck{ font-size:9.5px; }
  .sysfig .cts{ font-size:11px; }
  .sysfig .crows{ padding:4px 20px 16px; }
  .sysfig .crow{ grid-template-columns:66px 1fr; gap:10px; padding:10px 0; font-size:13.5px; }
}

/* ── the responder-type map (lesson 12 · part 2) ─────────────
   Three cards across the reading measure, so each is about 190px
   and the body copy steps down to suit it. */
.typemap .card{ padding:16px 18px; }
.typemap .card p{ font-size:14px; line-height:1.5; }
@media (min-width:720px){
  .typemap .card h3{ font-size:16px; }
  .typemap .card p{ font-size:13px; }
}

/* ── the fit spectrum (lesson 13 · part 1) ───────────────────
   A gradient axis running from a perfect fit to a horribly wrong
   one. The ramp IS the reading, and all three labels have to
   survive 390px, so they wrap onto a second line rather than
   being shortened or dropped.

   The spectrum lives inside a cream note, where `.hero-note p` is (0,1,1) at
   720px and would outrank a bare `.fitk` or `.fitcap` (0,1,0) and blow both up
   to 19px body copy. Hence the .fitline prefix on every paragraph rule here. */
.fitline{ margin-top:18px; padding-top:20px; border-top:1px solid var(--line); }
.fitline .fitk{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:var(--faint); line-height:1.5; margin:0 0 11px; }
.fitbar{ height:12px; border-radius:6px; background:linear-gradient(90deg,var(--teal),var(--yellow),var(--red)); }
.fitlabels{
  display:flex; gap:6px; margin:10px 0 0; padding:0; list-style:none;
  font-family:var(--mono); font-size:8.5px; font-weight:500; letter-spacing:.1px;
  text-transform:uppercase; color:var(--muted);
}
.fitlabels li{ flex:1 1 0; min-width:0; line-height:1.45; }
.fitlabels li:nth-child(2){ text-align:center; }
.fitlabels li:nth-child(3){ text-align:right; }
.fitline .fitcap{ font-size:14.5px; line-height:1.68; color:var(--muted); margin:14px 0 0; }
@media (min-width:720px){
  .fitline{ margin-top:22px; padding-top:24px; }
  .fitline .fitk{ font-size:10px; margin-bottom:13px; }
  .fitlabels{ gap:8px; font-size:10px; letter-spacing:.6px; margin-top:11px; }
  .fitline .fitcap{ margin-top:16px; }
}

/* ── the adaptation curves and the heritability stat (lesson 13 · part 2)
   One dose, one starting point, three trajectories. The drawing is
   copied across from the design frame; only its two type sizes are
   restated, because the labels live inside a 760-unit viewBox and
   so scale with the box rather than with the page. */
.adaptfig{ margin-top:26px; }
.adaptfig .chartgrid{ display:grid; gap:16px; align-items:stretch; }
.adaptfig .drv{
  border:1px solid var(--line); border-radius:12px; padding:18px 16px 12px; margin:0;
  display:flex; flex-direction:column; justify-content:center;
}
.adaptfig .drvt{ font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.8px; text-transform:uppercase; color:var(--faint); line-height:1.6; margin:0 0 6px; }
.adaptfig .plot{ display:block; width:100%; height:auto; }
.adaptfig .plot .cx{ font-family:var(--mono); font-size:20px; font-weight:500; fill:var(--faint); letter-spacing:1px; }
.adaptfig .plot .cs{ font-family:var(--ral); font-size:23px; font-weight:600; }
.adaptfig .stat{
  border:1px solid var(--purple); border-radius:12px; padding:20px 18px;
  display:flex; flex-direction:column; justify-content:center;
}
/* `.adaptfig .stat p` below is (0,2,1) and would silently outrank a bare
   `.statnum` (0,1,0) — the display number would render as body copy. Same
   species of bug as `.signup label` vs `.consent`. Scope, don't widen. */
.adaptfig .stat .statnum{ font-family:var(--mono); font-size:40px; font-weight:500; line-height:1; letter-spacing:-1px; color:var(--purple); margin:0; }
.adaptfig .stat .statnum span{ display:block; font-family:var(--ral); font-size:14px; font-weight:500; letter-spacing:0; line-height:1.4; color:var(--muted); margin-top:11px; }
.adaptfig .stat p{ font-size:14.5px; line-height:1.65; color:var(--muted); margin:16px 0 0; }
@media (min-width:720px){
  .adaptfig{ margin-top:34px; }
  .adaptfig .drv{ padding:20px 22px 14px; }
  .adaptfig .drvt{ font-size:10px; letter-spacing:1px; }
  .adaptfig .plot .cx{ font-size:15px; }
  .adaptfig .plot .cs{ font-size:19px; }
  .adaptfig .stat{ padding:26px 28px; }
  .adaptfig .stat .statnum{ font-size:44px; }
}
@media (min-width:1120px){
  .adaptfig .chartgrid{ grid-template-columns:1.25fr 1fr; gap:22px; }
}

/* ── the documented responder types (lesson 13 · part 2) ─────
   Five rows, graded by how much the athlete adapts. THE BAR WIDTH
   IS THE DATUM, and the order it encodes is not the order of the
   rows: Adverse comes last because it is the rarest and the worst
   news, but it must read SMALLER than Low, which still gains.
   92 / 60 / 27 / 6 / 14. */
.types{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:18px; }
.trow{ display:grid; gap:11px; padding:17px 18px; border-bottom:1px solid var(--line); }
.trow:last-child{ border-bottom:none; }
.tname{ font-size:17px; font-weight:600; line-height:1.15; color:var(--ink); margin:0; }
.tsub{ font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.8px; text-transform:uppercase; color:var(--faint); margin:5px 0 0; }
.tchip{
  display:inline-block; font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:.8px; text-transform:uppercase; padding:4px 10px;
  border:1px solid; border-radius:9999px; margin-bottom:10px;
}
.tbar{ height:9px; background:var(--cream); border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.tbar i{ display:block; height:100%; border-radius:4px 0 0 4px; }
.tdesc{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }
.t-sup .tchip{ color:var(--teal-d); border-color:var(--teal); }
.t-sup .tbar i{ background:var(--teal); }
.t-typ .tchip{ color:var(--blue-d); border-color:var(--blue); }
.t-typ .tbar i{ background:var(--blue); }
.t-low .tchip{ color:var(--yellow-d); border-color:var(--yellow); }
.t-low .tbar i{ background:var(--yellow); }
.t-non .tchip{ color:var(--faint); border-color:#C7CACB; }
.t-non .tbar i{ background:#B9BDBE; }
.t-adv .tchip{ color:var(--red-d); border-color:var(--red); }
.t-adv .tbar i{ background:var(--red); }
@media (min-width:720px){
  .types{ margin-top:22px; }
  .trow{ grid-template-columns:170px 132px 1fr; gap:20px; padding:17px 22px; align-items:center; }
  .tdesc{ font-size:13.5px; line-height:1.55; }
}
@media (min-width:1120px){
  .trow{ grid-template-columns:200px 152px 1fr; gap:24px; padding:17px 24px; }
}

/* ── the two signature charts (lesson 14 · part 1) ───────────
   HRV and resting heart rate, each for a responder and a
   non-responder, each against its own baseline. THE AXIS WORDS
   CARRY THE MEANING AND IT INVERTS BETWEEN THE TWO: on HRV,
   HIGHER is teal because higher is better; on resting heart rate,
   HIGHER is red. Both drawings are copied across from the design
   frame verbatim, colours and all. */
.sigfig{ margin-top:28px; }
.sigfig .figs{ display:grid; gap:22px; }
.sigfig .figs > figure{ margin:0; }
.sigfig .chartbox{ border:1px solid var(--line); border-radius:12px; background:var(--paper); padding:12px 12px 8px; }
.sigfig .chartbox svg{ display:block; width:100%; height:auto; }
/* The chart labels carry font-size as a presentation attribute, sized for the
   wide band. CSS outranks a presentation attribute, so the narrow width lifts
   them — to 13 viewBox units, the largest that still keeps BASELINE clear of
   the dashed line it names, which starts at x=82 in the same viewBox. The
   drawing itself is untouched. */
@media (max-width:719px){ .sigfig .chartbox svg text{ font-size:13px; } }
.sigfig .legend{ border:1px solid var(--line); border-radius:12px; padding:14px 15px; margin-top:18px; display:grid; gap:11px; }
.sigfig .legend .l{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--faint); margin:0; }
.sigfig .legend .it{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.55; color:var(--muted); margin:0; }
.sigfig .legend .ln{ flex:none; width:24px; height:0; border-top:3px solid; margin-top:9px; }
.sigfig .legend .it.g .ln{ border-color:var(--teal); }
.sigfig .legend .it.g b{ color:var(--teal-d); font-weight:600; }
.sigfig .legend .it.b .ln{ border-color:var(--red); }
.sigfig .legend .it.b b{ color:var(--red-d); font-weight:600; }
@media (min-width:720px){
  .sigfig{ margin-top:40px; }
  .sigfig .chartbox{ padding:14px 16px 10px; }
  .sigfig .legend{ padding:17px 20px; margin-top:20px; gap:12px; }
  .sigfig .legend .l{ font-size:10px; }
  .sigfig .legend .it{ font-size:14.5px; }
}
@media (min-width:1120px){ .sigfig .figs{ grid-template-columns:1fr 1fr; gap:20px; } }

/* ── responder against non-responder (lesson 14 · part 1) ────
   ONE markup, two presentations. From 720px it is a real
   three-column table and the two answer columns are accented teal
   and red at the head. Below that a three-column matrix cannot
   hold a sentence per cell, so each row becomes its own block:
   the signal as a header, the responder's answer above the
   non-responder's, and the 3px left borders carry the column
   identity that the head row can no longer state. .cmpkey names
   the two columns once, above the stack, and is the only thing
   that exists at just one width. */
.cmp{ margin-top:22px; }
.cmpkey{ border:1px solid var(--line); border-radius:12px; padding:14px 15px; display:grid; gap:10px; margin-bottom:14px; }
.cmpkey .l{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--faint); margin:0; }
/* Column identity via a leading colour dot (a fill), not a left stripe —
   matches the wall-chart legend's dot convention. */
.cmpkey .i{ display:block; font-size:13.5px; line-height:1.5; color:var(--muted); }
.cmpkey .i::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--teal); margin-right:8px; vertical-align:baseline; }
.cmpkey .i.n::before{ background:var(--red); }
.cmpkey b{ color:var(--ink); font-weight:600; }
.cmp th{ font-size:10px; letter-spacing:1px; padding:13px 16px; border-bottom:1px solid var(--ink); }
.cmp th.resp{ border-top:3px solid var(--teal); color:var(--teal-d); }
.cmp th.non{ border-top:3px solid var(--red); color:var(--red-d); }
.cmp td{ font-size:14.5px; line-height:1.6; padding:15px 16px; }
/* The base `th` is bottom-aligned, which is right for a column head and wrong
   for a row head: the signal's name would float to the bottom of a four-line
   row, away from the two answers it labels. */
.cmp .k{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--ink); line-height:1.5; white-space:normal;
}
.cmp tbody th.k{ vertical-align:top; }
.cmp td.resp{ background:#F5FCFA; }
.cmp td.non{ background:#FEF7F7; }
.cmp tr.final td{ color:var(--ink); font-weight:600; }
@media (min-width:720px){
  .cmp{ margin-top:34px; }
  .cmpkey{ display:none; }
  .cmp thead th.k, .cmp tbody th.k{ width:150px; }
}
@media (max-width:719px){
  .cmp thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .cmp table, .cmp tbody, .cmp tr, .cmp th, .cmp td{ display:block; width:auto; }
  .cmp tr{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:10px; }
  .cmp tbody th.k{ background:var(--cream); border-bottom:1px solid var(--line); padding:10px 14px; font-size:9.5px; }
  /* The column washes carry responder vs non-responder on mobile too — a fill,
     per the design system, not a left stripe. The row is a bordered rounded
     block (signal header, then the two washed answers), so the columns read
     without any side accent. */
  .cmp td{ padding:12px 14px; font-size:14px; border-bottom:0; }
  /* Deeper than the desktop column washes: on desktop a faint tint is enough
     because the coloured column heads and top accents carry the encoding, but
     in the stack the wash is the only cue, so it has to read on its own. Still
     a fill, still no side stripe. */
  .cmp td.resp{ background:#E6F5F0; }
  .cmp td.non{ background:#FBEAEA; border-top:1px solid var(--line); }
}
/* The ten column widths are the chart's geometry, not page styling —
   fixed here rather than as inline `style` on ten <col> elements.
   They total 990px, which is the table's min-width, so the whole chart
   fits without a scroll from about 1080px of viewport up. */
.wc col:nth-child(1){ width:100px; }
.wc col:nth-child(2){ width:88px; }
.wc col:nth-child(3){ width:88px; }
.wc col:nth-child(4){ width:100px; }
.wc col:nth-child(5){ width:78px; }
.wc col:nth-child(6){ width:150px; }
.wc col:nth-child(7){ width:160px; }
.wc col:nth-child(8){ width:78px; }
.wc col:nth-child(9){ width:90px; }
.wc col:nth-child(10){ width:58px; }

/* figure.break only reaches its 1040px break-out at 1120px up. For every
   other figure that is right, but the wall chart IS this page — parking a
   1030px table inside a 680px column between 720 and 1120 hides four of
   its ten columns behind a scroll. So this one figure bleeds to the
   viewport instead, keeping the gutter. The .tablewrap still scrolls
   below 720, and the page body never does. */
@media (min-width:720px) and (max-width:1119px){
  figure.break.wcdesk{
    width:auto;
    margin-left:calc(50% - 50vw + var(--gutter));
    margin-right:calc(50% - 50vw + var(--gutter));
  }
}
/* The Module 7 block sets `.acc summary{ align-items:flex-start }` below
   720px for its rule-numbered rows. These summaries carry a two-line
   group title instead, so they re-centre — otherwise the caret and the
   count hang off the first line. */
@media (max-width:719px){ .wcmob .acc summary{ align-items:center; } }

/* ═══════════════════════════════════════════════════════════════
   ACCESS PAGE — course/index.html
   Everything here is prefixed `ap-` and scoped under `.accesspage`.
   Five class collisions landed in this stylesheet before that rule
   existed (.mod, .signup label, .hero-note p, .adaptfig .stat p,
   .tip); the prefix is how the sixth is avoided.

   Structure, measured off framna.com/mobile-app-trends-report-2026:
   dark hero, card sitting clear of the hero (never straddling it),
   who/why pair, module list, dark close.
   ═══════════════════════════════════════════════════════════════ */

/* The course body runs Roboto for readability over a 90 to 120 minute
   read. The access page is the marketing front door and runs the brand
   stack. Redefining the two custom properties on the body is enough —
   they inherit to everything inside. */
.accesspage{
  --ral:'Raleway',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-family:var(--ral);
}

/* ── hero ─────────────────────────────────────────────────── */
.ap-hero{ background:var(--ink); color:var(--cream); position:relative; overflow:hidden; }
.ap-art{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.ap-bar{
  position:relative; z-index:2; display:flex; justify-content:space-between;
  align-items:center; padding:18px var(--gutter);
}
.ap-bar .logo{ font-family:var(--mono); font-weight:600; font-size:14px; letter-spacing:2.4px; color:var(--cream); text-decoration:none; }
.ap-bar .r{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:rgba(248,246,244,.55); }

.ap-pitch{ position:relative; z-index:2; padding:150px var(--gutter) 0; }
.ap-thesis{ font-size:19.5px; line-height:1.4; font-weight:600; margin:0 0 14px; letter-spacing:-.2px; color:var(--cream); }
.ap-expl{ font-size:16px; line-height:1.65; color:rgba(248,246,244,.72); margin:0 0 30px; }
.ap-expl b{ color:var(--cream); font-weight:600; }

.ap-go{
  display:inline-block; background:var(--cream); color:var(--ink); text-decoration:none;
  font-size:16px; font-weight:600; padding:15px 30px; border-radius:999px;
  transition:transform .15s ease, background-color .15s ease;
}
.ap-go:hover{ background:#fff; transform:translateY(-1px); }

.ap-titleblock{ position:relative; z-index:2; padding:170px var(--gutter) 120px; }
.ap-title{ font-size:43px; line-height:1.08; font-weight:600; letter-spacing:-1.1px; margin:0; color:var(--cream); }

@media (min-width:900px){
  .ap-bar{ padding:26px var(--gutter); }
  .ap-bar .logo{ font-size:16px; letter-spacing:2.6px; }
  .ap-bar .r{ font-size:10.5px; letter-spacing:1.4px; }
  .ap-pitch{ padding:190px var(--gutter) 0; max-width:724px; }
  .ap-thesis{ font-size:24px; line-height:1.35; margin-bottom:18px; letter-spacing:-.3px; }
  .ap-expl{ font-size:18px; line-height:1.7; margin-bottom:36px; }
  .ap-go{ font-size:16.5px; padding:16px 34px; }
  .ap-titleblock{ padding:210px var(--gutter) 150px; }
  .ap-title{ font-size:82px; line-height:1.04; letter-spacing:-2.2px; max-width:17ch; }
}

/* ── the form card ────────────────────────────────────────── */
/* It sits CLEAR of the hero at every width, as the reference does.
   An earlier draft straddled the seam; that was invented, not observed. */
.ap-seam{ background:var(--cream); padding:0 16px 56px; }
.ap-card{
  background:var(--paper); border-radius:16px; margin-top:40px; padding:16px;
  box-shadow:0 1px 0 var(--line), 0 0 0 1px #E9E7E4;
}
.ap-photo{ background:var(--cream); border-radius:8px; overflow:hidden; }
.ap-photo img{ width:100%; height:auto; display:block; }

.ap-form{ padding:44px 8px 14px; }
.ap-form h2{ font-size:27px; font-weight:600; margin:0 0 8px; letter-spacing:-.5px; }
.ap-form .fine{ font-size:14.5px; color:var(--muted); margin:0 0 26px; line-height:1.6; }

.ap-field{ margin-bottom:14px; }
.ap-field label{
  display:block; font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--faint); margin:0 0 7px;
}
.ap-field input, .ap-field select{
  width:100%; height:48px; border:1px solid var(--line); border-radius:8px;
  background:var(--paper); padding:0 14px; font-size:15px; color:var(--ink);
  font-family:var(--ral); -webkit-appearance:none; appearance:none;
}
.ap-field input:focus, .ap-field select:focus{
  outline:none; border-color:var(--blue-d); box-shadow:0 0 0 3px rgba(32,88,110,.12);
}
.ap-field input::placeholder{ color:#B9BDBE; }
/* CSS-drawn caret so the select needs no background image. */
.ap-selwrap{ position:relative; }
.ap-selwrap::after{
  content:""; position:absolute; right:15px; top:50%; margin-top:-2px; pointer-events:none;
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid var(--faint);
}

.ap-consent{ display:flex; gap:11px; align-items:flex-start; font-size:12.5px; color:var(--muted); line-height:1.55; margin:22px 0 20px; }
.ap-consent input{ width:18px; height:18px; flex:none; margin:1px 0 0; accent-color:var(--orange); }
.ap-consent a{ color:var(--muted); }

.ap-submit{
  width:100%; height:48px; border:0; border-radius:999px; background:var(--orange); color:#fff;
  font-family:var(--ral); font-size:15px; font-weight:600; cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.ap-submit:hover{ transform:translateY(-1px); }
.ap-submit:disabled{ opacity:.55; cursor:default; transform:none; }
.ap-status{ font-size:13px; margin:12px 0 0; text-align:center; color:var(--muted); }
.ap-status.err{ color:var(--red-d); }

.ap-done h2{ margin-bottom:10px; }
.ap-done .btn{ margin-top:18px; }

@media (min-width:900px){
  .ap-seam{ padding:0 var(--gutter) 96px; }
  .ap-card{
    margin-top:64px; padding:0; border-radius:14px; overflow:hidden;
    display:grid; grid-template-columns:1fr 1fr; box-shadow:0 0 0 1px #E9E7E4;
  }
  .ap-photo{ border-radius:0; }
  .ap-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
  /* Photo second in the DOM so a screen reader hits the form first;
     `order` puts it on the right visually. */
  .ap-photo{ order:2; }
  .ap-form{ order:1; padding:52px 52px 46px; }
  .ap-form h2{ font-size:32px; letter-spacing:-.6px; margin-bottom:10px; }
  .ap-form .fine{ font-size:15.5px; margin-bottom:32px; }
  .ap-row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
}

/* ── who it's for / why it exists ─────────────────────────── */
.ap-twoup{ background:var(--cream); padding:14px 16px 60px; display:grid; gap:16px; }
.ap-qa{ background:var(--paper); border-radius:14px; padding:28px 24px 26px; box-shadow:0 0 0 1px #E9E7E4; }
.ap-qa h3{ font-size:23px; font-weight:600; letter-spacing:-.5px; margin:0 0 16px; line-height:1.2; }
.ap-qa p{ font-size:15px; line-height:1.68; color:var(--muted); margin:0 0 14px; }
.ap-qa p:last-child{ margin-bottom:0; }
.ap-qa b{ color:var(--ink); font-weight:600; }

@media (min-width:900px){
  .ap-twoup{ padding:16px var(--gutter) 100px; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
  .ap-qa{ padding:44px 44px 40px; }
  .ap-qa h3{ font-size:30px; letter-spacing:-.7px; margin-bottom:22px; line-height:1.16; }
  .ap-qa p{ font-size:16.5px; line-height:1.7; margin-bottom:16px; }
}

/* ── what's inside ────────────────────────────────────────── */
.ap-inside{ padding:56px var(--gutter) 64px; background:var(--paper); }
.ap-inside h2{ font-size:30px; font-weight:600; margin:0 0 6px; letter-spacing:-.6px; }
.ap-isub{
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.2px; color:var(--faint);
  text-transform:uppercase; display:block; margin-bottom:30px;
}
.ap-mod{ border-top:1px solid var(--line); padding:18px 0 16px; }
.ap-mn{
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.1px;
  color:var(--orange); text-transform:uppercase; display:block; margin-bottom:4px;
}
.ap-mt{ font-size:15.5px; font-weight:600; display:block; margin-bottom:8px; }
.ap-les{ display:flex; align-items:baseline; gap:11px; padding:6px 0; font-size:14px; line-height:1.45; }
.ap-les a{ color:var(--muted); text-decoration:none; }
.ap-les a:hover{ color:var(--ink); text-decoration:underline; }
/* A returning reader should see what they have already read. course.js adds
   .read to the link once a lesson's last page has been opened. */
.ap-les a.read{ color:var(--faint); }
.ap-les a.read::after{
  content:""; display:inline-block; width:9px; height:5px; margin-left:8px;
  border-left:1.5px solid var(--teal-d); border-bottom:1.5px solid var(--teal-d);
  transform:rotate(-45deg) translateY(-2px);
}
.ap-ln{ font-family:var(--mono); font-size:10px; color:#B9BDBE; flex:none; width:18px; }

@media (min-width:900px){
  .ap-inside{ padding:92px var(--gutter) 100px; }
  .ap-ihead{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:44px; }
  .ap-inside h2{ font-size:40px; letter-spacing:-.9px; margin:0; }
  .ap-isub{ font-size:11px; letter-spacing:1.3px; margin:0; }
  .ap-modgrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 56px; }
  .ap-mod{ padding:22px 0 20px; }
  .ap-mn{ font-size:10px; letter-spacing:1.2px; margin-bottom:5px; }
  .ap-mt{ font-size:17px; margin-bottom:10px; }
  .ap-les{ gap:13px; padding:7px 0; font-size:15px; }
  .ap-ln{ font-size:11px; width:20px; }
}

/* ── closing CTA, at the foot of the lesson list ──────────── */
/* The dark "Start reading in the next minute" section was cut; its CTA moved
   here so the page goes course list -> act -> footer with no detour.

   Two button temperatures, deliberately: a NEUTRAL capsule means "take me to
   the form" (white on the dark hero, ink here on white), and Peak Orange is
   kept for the one real commitment, the submit itself. A third colour here
   would blur that. */
.ap-insidecta{ margin-top:40px; padding-top:34px; border-top:1px solid var(--line); }
.ap-go.ink{ background:var(--ink); color:var(--cream); }
.ap-go.ink:hover{ background:#333; }
.ap-insidenote{ font-size:14px; line-height:1.6; color:var(--faint); margin:16px 0 0; }
@media (min-width:900px){
  .ap-insidecta{ margin-top:56px; padding-top:40px; }
  .ap-insidenote{ font-size:15px; margin-top:18px; }
}

/* ── motion ───────────────────────────────────────────────── */
/* The hero paths draw themselves in. They are the course's own signals,
   so the movement is the subject rather than decoration. */
/* --len is inherited from the <g>; every path carries pathLength="1000" so
   one value works for all three regardless of their real length. */
.ap-art path{
  stroke-dasharray:var(--len,1000); stroke-dashoffset:var(--len,1000);
  animation:ap-draw 2.4s cubic-bezier(.4,0,.2,1) forwards;
}
.ap-art path:nth-of-type(2){ animation-delay:.25s; }
.ap-art path:nth-of-type(3){ animation-delay:.5s; }
.ap-art circle{ opacity:0; animation:ap-dot .5s ease forwards 1.9s; }
@keyframes ap-draw{ to{ stroke-dashoffset:0; } }
@keyframes ap-dot{ to{ opacity:.85; } }

/* Scroll reveals.

   The hidden state is gated behind `.ap-anim`, which JS puts on <html> only
   once it has confirmed it can actually drive the animation. Never hide
   content in CSS that JS is responsible for revealing: if the script fails,
   an observer never fires, or the browser is old, the page would be blank.
   Default is visible; the animation is the enhancement. */
.ap-anim .ap-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.ap-anim .ap-reveal.ap-in{ opacity:1; transform:none; }
.ap-anim .ap-mod.ap-reveal{ transition-delay:calc(var(--i,0) * 60ms); }

@media (prefers-reduced-motion:reduce){
  .ap-art path{ stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
  .ap-art circle{ opacity:.85; animation:none; }
  .ap-anim .ap-reveal{ opacity:1; transform:none; transition:none; }
  .ap-go:hover, .ap-submit:hover{ transform:none; }
}

/* ── real logo lockup in the hero bar ─────────────────────── */
/* The homepage nav pairs the mark with the wordmark. It uses the black mark
   and filters the white wordmark to black, because that nav sits on light.
   This bar sits on beoBlack, so both take the white variants unfiltered. */
.ap-bar .logo{ display:flex; align-items:center; gap:8px; flex-shrink:0; text-decoration:none; }
/* The wordmark is 10.3:1, so it eats width fast. At 390 the full lockup plus
   the right-hand label filled 75% of the bar, so the wordmark steps down on
   small screens rather than being hidden — the front door should still carry
   the brand. */
.ap-bar .logo-mark{ width:24px; height:24px; display:block; }
.ap-bar .logo-word{ height:11px; width:auto; display:block; }
@media (min-width:560px){
  .ap-bar .logo-mark{ width:26px; height:26px; }
  .ap-bar .logo-word{ height:13px; }
}
@media (min-width:900px){
  .ap-bar .logo-mark{ width:29px; height:29px; }
  .ap-bar .logo-word{ height:14px; }
}

/* ── site footer, ported from beoflow.com ─────────────────── */
/* Same markup and class names as the homepage so the two stay easy to keep
   in sync, but scoped under .accesspage so nothing reaches the lesson pages.
   The homepage's own font custom properties are mapped onto this
   stylesheet's: --font-mono -> --mono, --font-body -> --ral. Hrefs are
   root-relative here; the homepage uses relative ones, which would resolve
   against /course/ and 404. */
.accesspage .footer{
  display:flex; flex-direction:column; align-items:center;
  padding:120px 64px 26px; color:#b8b6b4; font-size:12px;
  font-family:var(--mono); font-weight:400; line-height:1.8;
  background-color:#0a0a0a; border-top:1px solid rgba(255,255,255,.06);
}
.accesspage .footer-container{ width:100%; max-width:1280px; display:flex; flex-direction:column; gap:48px; }
.accesspage .footer-content{ display:flex; flex-direction:row; gap:48px; }
.accesspage .footer-brand{ flex:1; display:flex; flex-direction:column; align-items:flex-start; }
.accesspage .footer-logo{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.accesspage .footer-graphic{ width:72px; height:82px; flex-shrink:0; }
.accesspage .footer-margin{ width:140px; height:20px; flex-shrink:0; margin-top:4px; }
.accesspage .footer-app-badge{ display:inline-block; margin-top:16px; transition:transform .25s ease, opacity .25s ease; }
.accesspage .footer-app-badge:hover{ transform:translateY(-2px); opacity:.92; }
.accesspage .footer-app-badge img{ height:45px; width:auto; display:block; }
.accesspage .footer-tagline{ color:rgba(255,255,255,.5); font-size:14px; line-height:1.6; margin-top:16px; max-width:280px; font-family:var(--ral); }
.accesspage .footer-address{ font-size:.8rem; color:rgba(255,255,255,.45); line-height:1.6; margin-top:1rem; font-family:var(--ral); }
.accesspage .footer-address--column{ margin-top:12px; }
.accesspage .footer-columns{ flex:2; display:flex; gap:48px; }
.accesspage .footer-column-title{
  font-family:var(--mono); font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:1.5px; color:rgba(255,255,255,.4); margin:0 0 16px;
}
.accesspage .footer-links{ list-style:none; padding:0; margin:0; }
.accesspage .footer-links li{ margin-bottom:10px; }
.accesspage .footer-links a{
  color:rgba(255,255,255,.7); text-decoration:none; font-family:var(--ral);
  font-size:14px; transition:color .2s;
}
.accesspage .footer-links a:hover{ color:#fff; }
.accesspage .footer-credits{
  display:flex; gap:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.06);
  margin-top:48px; flex-wrap:wrap;
}
.accesspage .footer-text-b{
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:1px; color:rgba(255,255,255,.3); text-decoration:none; margin:0;
}
.accesspage .footer-text-b:hover{ color:rgba(255,255,255,.5); }

@media (max-width:1024px){
  .accesspage .footer-content{ flex-direction:column; gap:32px; }
}
@media (max-width:768px){
  .accesspage .footer{ padding:80px 24px; }
  .accesspage .footer-container{ gap:47px; }
  .accesspage .footer-content{ flex-direction:column; gap:32px; }
  .accesspage .footer-brand{ align-items:center; text-align:center; }
  .accesspage .footer-logo{ align-items:center; }
  .accesspage .footer-graphic{ margin:0 auto; }
  .accesspage .footer-margin{ margin:8px auto 0; }
  .accesspage .footer-tagline{ text-align:center; }
  .accesspage .footer-columns{ flex-direction:column; gap:32px; }
  .accesspage .footer-credits{ flex-direction:column; gap:8px; }
}

/* ── cheat-sheet download page (course/beoflow-cheat-sheet) ── */
/* Brand-stack landing under .accesspage. A focused page: intro, the PDF
   download as the primary action, then the demo pitch. */
.cs-bar{display:flex;justify-content:space-between;align-items:center;padding:18px var(--gutter);border-bottom:1px solid var(--line)}
.cs-bar a{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.cs-mark{width:26px;height:26px;display:block}
.cs-word{height:12px;width:auto;display:block;filter:brightness(0)}  /* white wordmark rendered black on the light bar */
.cs-r{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
@media (min-width:560px){ .cs-mark{width:29px;height:29px} .cs-word{height:14px} }
@media (min-width:900px){ .cs-bar{padding:26px var(--gutter)} .cs-r{font-size:10.5px} }

.cs-main{max-width:660px;margin:0 auto;padding:60px var(--gutter) 0;text-align:center}
.cs-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--orange);margin:0 0 16px}
.cs-title{font-size:36px;font-weight:600;letter-spacing:-.8px;line-height:1.08;margin:0 0 18px}
.cs-intro{font-size:17px;line-height:1.65;color:var(--muted);margin:0 auto 32px;max-width:52ch}
.cs-dl{background:var(--orange)!important;color:#fff!important}
.cs-dl:hover{background:#e5501f!important}
.cs-sub{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);margin:12px 0 0}

.cs-demo{max-width:660px;margin:60px auto 0;padding:48px var(--gutter) 0;border-top:1px solid var(--line);text-align:center}
.cs-demo h2{font-size:24px;font-weight:600;letter-spacing:-.4px;line-height:1.2;margin:0 0 14px}
.cs-demo p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 auto 24px;max-width:52ch}
.cs-demosub{font-size:14px;color:var(--faint);margin:14px auto 0}

@media (min-width:900px){
  .cs-main{padding-top:88px}
  .cs-title{font-size:46px;letter-spacing:-1px}
  .cs-demo h2{font-size:28px}
}