:root{
  /* ---- Page vs. card (2026-08-12, revised the same day) -------------------
     The warm off-white shipped that morning is reverted: the founder read it
     as beige, not premium. The page is a COOL near-white instead — the "card
     floats off the page" idea is kept (page slightly darker, card pure white)
     but the whole surface axis is rotated back onto blue-grey so the product
     reads crisp and clinical. --line and --hover-soft follow the page onto
     the cool axis; the shadow ramp is retuned from the warm rgba(41,33,21)
     tint to a cool near-navy so it greys nothing. --faint could not go back
     to the pre-warm #6b7280 (4.54:1 here, inside rounding distance of the
     floor) so it sits one step darker and cooler at #68707e = 4.65:1 on the
     page, 4.99:1 on a card. Midnight keeps the deep/lifted split and was
     already on a cool blue-black axis; it is unchanged except for the hues. */
  --bg:#f5f7fb; --card:#ffffff; --ink:#171c26; --muted:#4f5866; --faint:#68707e;
  --line:#e2e7f0; --accent:#4353ff; --accent-ink:#3644e0; --accent-soft:#eaedff;
  --good:#0a805a; --warn:#b45309; --gold:#85691e; --gold-soft:#f7f1de;
  --tutor:#0a855c; --tutor-ink:#087549;
  /* The bolt yellow was a hardcoded #FFD400 in four rules and the mascot. It
     is a brand colour and now has a name; midnight lifts it a touch so it does
     not glare against a near-black page. */
  --bolt:#FFD400;
  /* Ink that sits ON a filled brand surface. In light mode every brand colour
     is dark enough for white; in midnight they all lift to stay legible as
     TEXT on a dark page, which flips the fill case — see the midnight block. */
  --on-accent:#ffffff; --on-gold:#ffffff; --on-tutor:#ffffff;
  --accent-on-soft:#3644e0;   /* accent used as text on --accent-soft */
  --wm-ce-weight:500;         /* Option 6: CE one weight below STAT/.ai */
  --top-bg:rgba(245,247,251,.86); --dark-panel:#141a2e;
  --content-ink:#2a303c; --hover-soft:#eef2f8; --right-soft:#f0faf4; --wrong-soft:#fdf6ec;
  /* Radii up one step across the board; --radius-lg is for the surfaces that
     are meant to read as objects (pricing card, hero mock, page panels). */
  --radius:16px; --radius-sm:11px; --radius-lg:22px;
  /* Three shadow steps instead of one — the ramp is the part of the overhaul
     worth keeping. The warm rgba(41,33,21) tint is not: on a cool page a warm
     shadow reads as dirt. These are a cool near-navy instead, so a card's
     penumbra stays on the same axis as the page. -sm = resting card,
     plain = raised, -lg = the two or three things that float. */
  --shadow-sm:0 1px 2px rgba(19,28,48,.05),0 2px 6px -1px rgba(19,28,48,.04);
  --shadow:0 1px 2px rgba(19,28,48,.045),0 10px 28px -8px rgba(19,28,48,.14);
  --shadow-lg:0 2px 4px rgba(19,28,48,.05),0 26px 64px -20px rgba(19,28,48,.23);
  /* The single brand gradient and the two glow stops behind the hero. Used in
     ONE place: the 52px flourish under a centred section heading. The hero
     glow, the hero panel's top rule and the pricing card's top rule are all
     gone — the founder's read on the wash was "ugly" and on the two bars was
     "take away the colour bar". --glow-b survives only as the hero bolt's
     drop-shadow colour. */
  --grad-brand:linear-gradient(96deg,var(--accent) 0%,var(--bolt) 100%);
  --glow-b:rgba(255,212,0,.24);
  /* the mascot is an SVG, so its lift is a filter rather than a box-shadow */
  --drop:drop-shadow(0 10px 20px rgba(19,28,48,.18));

  /* ---- Categorical hue system (2026-08-12) --------------------------------
     Indigo + bolt-yellow is the BRAND. It is not enough to carry a library of
     66 specialties grouped into 8 families: the map read as one grey thing
     eight times. Eight hues are defined here as {soft tint, ink} pairs, every
     ink measured to clear 4.5:1 both on its own tint AND on --card, in both
     themes. --on-hue is the ink that sits on a hue used as a FILL (white in
     light, near-black in midnight — same flip as --on-accent).

     RULE: these hues classify, they never act. Buttons, links and CTAs stay
     indigo everywhere. A hue means "this is the Surgical family" or "this is
     an announcement"; it never means "click me". */
  --hue-crimson-soft:#fdeaea; --hue-crimson-ink:#b32330;
  --hue-teal-soft:#e2f4f3;    --hue-teal-ink:#0c6b6a;
  --hue-emerald-soft:#e5f5eb; --hue-emerald-ink:#0a6f43;
  --hue-amber-soft:#fbf0d8;   --hue-amber-ink:#875607;
  --hue-violet-soft:#f0ecfd;  --hue-violet-ink:#6535c8;
  --hue-rose-soft:#fde9f1;    --hue-rose-ink:#b02364;
  --hue-sky-soft:#e4f0fd;     --hue-sky-ink:#12608e;
  --hue-slate-soft:#e9edf4;   --hue-slate-ink:#3f5069;
  --on-hue:#ffffff;

  /* ---- Statsy, the soft-bodied care robot ---------------------------------
     The character is drawn in near-white, which on a white card is invisible
     without an outline — hence --bot-line, which is a real edge in light and
     a soft one in midnight. --bot-body lifts off pure white in midnight so
     the robot still reads as "white" against a near-black card. */
  --bot-body:#ffffff; --bot-shade:#e9eef7; --bot-line:#c5d0e0;
  /* --bot-dark is every hard panel: ear pods, shoulders, hips, neck.
     --bot-visor is the face screen, one step deeper again so the helmet reads
     as a shell with a display set into it rather than one flat black mask. */
  --bot-dark:#1c2532; --bot-visor:#121924; --bot-glow:#f4f7fc;

  /* ---- Modern Clinical type layer (2026-07-27) ----------------------------
     Instrument Sans throughout. The direction is: tight optical tracking on
     anything display-sized, generous tracking on small uppercase labels,
     tabular figures anywhere a number sits in a column. Sizes live here so a
     future scale change is one edit, not 600 lines of find-and-replace. */
  --font:'Instrument Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --tr-display:-.026em;   /* 32px and up  */
  --tr-head:-.018em;      /* 20–31px      */
  --tr-body:-.006em;      /* 14–19px      */
  --tr-label:.085em;      /* small caps   */
  --num:tabular-nums;
}
[data-theme="midnight"]{
  /* The ink ramp is deliberately shallower than light mode. --faint was
     #69798a, which read as a nice whisper but measured 2.97:1 on the panels
     and 3.84:1 on --card — it failed AA on 56 distinct strings across the
     learner app and the console. In a near-black theme the band that clears
     4.5:1 on every surface is narrow, so the three levels sit closer
     together here than they do on white. Legibility wins; a licensed nurse
     reading a compliance record at 11pm is the user. */
  /* Same "cards float" logic as light: the page dropped from #0e1319 to
     #0a0e14 and the card rose from #151c25 to #161d28, so the card is now
     clearly the lighter plane. --line rose with it so a hairline still reads
     as an edge and not as a smudge. */
  --bg:#0a0e14; --card:#161d28; --ink:#e9eef4; --muted:#adbac6; --faint:#8b98a6; --line:#27323f;
  --accent:#4da3ff; --accent-ink:#2f8ef0; --accent-soft:#173049;
  --bolt:#FFDA4D;
  --good:#4ade80; --warn:#f0a03c; --gold:#d9bd6a; --gold-soft:#2c2612;
  /* Statsy is green. The midnight palette had this as orange (#ff7a4d),
     which is a hue flip rather than a lightness adaptation — the tutor read
     as a different feature depending on the theme. It is the same green,
     lifted, and kept clear of --good so the two greens stay distinct. */
  --tutor:#10b981; --tutor-ink:#0d9d70;
  /* Every brand colour above was lifted so it reads as text on a dark page.
     That makes white-on-brand illegible where the colour is used as a FILL:
     white on #4da3ff is 2.6:1, on #d9bd6a it is 1.8:1. Filled surfaces take
     dark ink in midnight instead — 7:1, 9:1, 6.6:1 respectively. */
  --on-accent:#07131f; --on-gold:#241c07; --on-tutor:#04241a;
  --accent-on-soft:#8cc5ff;
  --wm-ce-weight:400;         /* light-on-dark bloom eats the 500/600 step */
  --top-bg:rgba(10,14,20,.86); --dark-panel:#223140;
  --content-ink:#c6d2dc; --hover-soft:#1b2632; --right-soft:#12301f; --wrong-soft:#332510;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 2px 6px rgba(0,0,0,.45),0 14px 34px -10px rgba(0,0,0,.6);
  --shadow-lg:0 4px 10px rgba(0,0,0,.5),0 30px 70px -22px rgba(0,0,0,.8);
  --grad-brand:linear-gradient(96deg,var(--accent) 0%,var(--bolt) 100%);
  --glow-b:rgba(255,218,77,.16);
  --drop:drop-shadow(0 10px 22px rgba(0,0,0,.6));
  /* Categorical hues, midnight. Same eight families, inverted construction:
     the tint is a deep desaturated wash of the hue and the ink is the hue
     LIFTED, so it clears 4.5:1 on its own tint, on --card and on --bg. The
     measured floor across the sixteen is 6.93:1 (violet on its own tint). */
  --hue-crimson-soft:#3a1519; --hue-crimson-ink:#ff8a90;
  --hue-teal-soft:#0d2e2e;    --hue-teal-ink:#4fd6d0;
  --hue-emerald-soft:#0f2c1e; --hue-emerald-ink:#57d98c;
  --hue-amber-soft:#33260c;   --hue-amber-ink:#efb54d;
  --hue-violet-soft:#241a44;  --hue-violet-ink:#b39bff;
  --hue-rose-soft:#3a1428;    --hue-rose-ink:#ff8fc0;
  --hue-sky-soft:#10273c;     --hue-sky-ink:#6cc0ff;
  --hue-slate-soft:#1c2432;   --hue-slate-ink:#a8bcd8;
  --on-hue:#0a0f16;
  /* The robot stays white-bodied in midnight — a near-black robot on a
     near-black card is a silhouette. It drops half a step off pure white so
     it does not glare, and the outline goes light-cool instead of grey. */
  --bot-body:#eef3fa; --bot-shade:#cdd8e8; --bot-line:#93a4bd;
  /* The dark panels lift here for the same reason the body drops in light
     mode: the ear pods are the one dark form that overhangs onto the page,
     and a #12… pod on a #161d28 card is a hole. The visor never touches the
     page — it sits inside the white helmet — so it stays near-black. */
  --bot-dark:#2a3648; --bot-visor:#0d131c; --bot-glow:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);
  background:var(--bg);color:var(--ink);line-height:1.6;letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01" 1,"cv01" 1}
/* Numbers that sit in a column, a total, a countdown or a table must not
   jitter as they change. Instrument Sans ships tabular figures; use them. */
table,.num,.stat b,.tile b,.ring,.hours,.money,time,td,th{font-variant-numeric:var(--num)}
h1,h2,h3,h4{letter-spacing:var(--tr-head);text-wrap:balance}
h1{letter-spacing:var(--tr-display)}
/* Display sizes at full --ink glare on a near-black page; the same text at the
   same weight looks heavier light-on-dark than dark-on-light. Pull the top of
   the scale back a few percent rather than restyling anything. */
[data-theme="midnight"] h1.hero,
[data-theme="midnight"] .plan-head h2,
[data-theme="midnight"] .ob h2,
[data-theme="midnight"] .sec-title{color:#dde6ef}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--accent-ink)}
input,select{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;width:100%}
input:focus,select:focus{outline:none;border-color:var(--accent)}

.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 26px;background:var(--top-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* ---- Wordmark, locked 2026-07-27 (Option 6) -------------------------------
   STAT and .ai carry ink; CE carries indigo. CE is also ROMAN and one weight
   lighter than STAT — the stance change is what makes CE read as a separate
   token rather than looking like a colour accident. Do not italicise CE and
   do not put indigo on .ai; that was the pre-07-27 rule and it is retired. */
.logo{font-weight:600;font-size:19px;letter-spacing:-.03em;cursor:pointer;display:flex;align-items:center;gap:7px;color:var(--ink)}
.logo .word{display:inline;white-space:nowrap}
.logo em{font-style:italic;font-weight:600}
.logo .ce{color:var(--ink);font-style:normal;font-weight:var(--wm-ce-weight);margin-left:.06em}
.logo .ai{font-style:normal;font-weight:600;color:var(--faint)}
.bolt{width:20px;height:20px;fill:var(--bolt);flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.12))}
/* Badge mark (2026-09-08): the wordmark bolt sits on an ink rounded square and reads --card,
   so it inverts in midnight. Scoped to .logo — .bulk-head and .tree-root keep the bare bolt. */
.logo .bolt{width:27px;height:27px;padding:5px;box-sizing:border-box;border-radius:7px;background:var(--ink);fill:var(--card);filter:none}
.hero-bolt{width:58px;height:58px;fill:var(--bolt);margin-bottom:18px;filter:drop-shadow(0 3px 10px var(--glow-b))}
.top .right{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--muted)}
.top .right a{color:var(--muted);text-decoration:none;cursor:pointer}
.pill-note{font-size:11px;background:var(--gold-soft);color:var(--gold);padding:3px 10px;border-radius:99px;font-weight:700;flex:none}
.modebtn{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted);
  border:1.5px solid var(--line);border-radius:99px;padding:6px 13px;flex:none;transition:all .15s}
.modebtn:hover{border-color:var(--accent);color:var(--accent-ink)}

#app{animation:rise .4s cubic-bezier(.2,.7,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wrap{max-width:880px;margin:0 auto;padding:0 24px}
.center{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;min-height:calc(100vh - 120px)}
.kicker{font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
h1.hero{font-size:clamp(28px,4.6vw,48px);line-height:1.12;letter-spacing:-1.4px;font-weight:700;max-width:none}
.sub{margin-top:18px;font-size:18px;color:var(--muted);max-width:48ch}
.cta{margin-top:34px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:17px;
  padding:16px 34px;border-radius:12px;box-shadow:var(--shadow);transition:transform .15s,background .15s}
.cta:hover{background:var(--accent-ink);transform:translateY(-1px)}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:36px;max-width:760px;text-align:left}
.how>div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.how .hn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-on-soft);font-weight:700;font-size:13px;margin-bottom:10px}
.how b{display:block;font-size:14.5px;letter-spacing:-.2px}
.how small{display:block;color:var(--muted);font-size:12.5px;margin-top:4px;line-height:1.5}
.price-strip{margin-top:26px;font-size:14px;color:var(--muted);background:var(--card);border:1px solid var(--line);
  border-radius:99px;padding:10px 22px}
.price-strip b{color:var(--ink)}
.foot{display:flex;gap:8px 22px;flex-wrap:wrap;justify-content:center;align-items:center;padding:26px 24px 34px;
  border-top:1px solid var(--line);margin-top:30px;font-size:12px;color:var(--faint)}
.foot a{color:var(--faint);cursor:pointer;text-decoration:underline}
.announce{background:var(--accent);color:var(--on-accent);text-align:center;font-size:13px;font-weight:600;padding:9px 20px}
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:14px}
@media(max-width:760px){.set-grid{grid-template-columns:1fr}}
.set-grid label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.6px}
.set-grid .full{grid-column:1/-1}
.set-grid textarea{width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;resize:vertical;min-height:64px}
.set-grid textarea:focus,.set-grid input:focus{outline:none;border-color:var(--accent)}

.ob{max-width:660px;margin:0 auto;padding:8vh 24px 60px;text-align:center}
.ob h2{font-size:clamp(24px,3.6vw,32px);letter-spacing:-.8px;font-weight:700}
.ob .hint{color:var(--muted);margin-top:10px;font-size:15px}
.stepdots{display:flex;gap:8px;justify-content:center;margin-bottom:32px}
.stepdots i{width:26px;height:4px;border-radius:4px;background:var(--line)}
.stepdots i.on{background:var(--accent)}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:32px}
.choice{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:18px 16px;text-align:left;transition:all .15s;box-shadow:var(--shadow-sm)}
.choice:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.choice b{display:block;font-size:16px;letter-spacing:-.2px}
.choice small{color:var(--muted);font-size:12.5px;display:block;margin-top:4px}
/* The licence step: four licences, four big blocks, two over two (founder,
   2026-10-10: "make this 4 big blocks like a square. 2 on top and 2 on
   bottom"). Only this step gets it; the specialty step keeps the flowing grid
   above because its list runs from eight to fifteen chips. Used only when
   exactly four licences are on offer (see viewLicense in app.js). */
.choices.quad{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:560px;margin-left:auto;margin-right:auto}
.choices.quad .choice{display:flex;flex-direction:column;justify-content:center;min-height:148px;padding:26px 26px}
.choices.quad .choice b{font-size:22px;letter-spacing:-.4px}
.choices.quad .choice small{font-size:14px;margin-top:8px}
@media(max-width:480px){
  .choices.quad{gap:12px}
  /* names wrap to two lines here, so the blocks align from the top instead */
  .choices.quad .choice{min-height:120px;padding:18px 16px;justify-content:flex-start}
  .choices.quad .choice b{font-size:19px}
  .choices.quad .choice small{font-size:13px}
}
.or-divider{display:flex;align-items:center;gap:14px;margin:26px 0 14px;color:var(--faint);font-size:12px;text-transform:uppercase;letter-spacing:1.5px}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.inline-form{display:flex;gap:10px}
.backlink{margin-top:28px;display:inline-block;color:var(--faint);font-size:14px;cursor:pointer}

.build-steps{margin:38px auto 0;max-width:380px;text-align:left}
.bstep{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--faint);font-size:15px;opacity:.35;transition:opacity .3s}
.bstep.on{opacity:1;color:var(--ink)}
.bstep .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--on-accent)}
.bstep.on .dot{border-color:var(--accent);background:var(--accent)}
.bstep.on .dot::after{content:"✓"}

.plan-head{text-align:center;max-width:640px;margin:0 auto;padding-top:6vh}
.plan-head h2{font-size:clamp(26px,4vw,36px);letter-spacing:-1px;font-weight:700}
.plan-head p{color:var(--muted);margin-top:12px;font-size:16px}
.modules{margin-top:30px;display:flex;flex-direction:column;gap:10px;padding-bottom:10px}
.mod{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px 20px;box-shadow:var(--shadow-sm)}
.mod.clickable{cursor:pointer;transition:all .15s}
.mod.clickable:hover{border-color:var(--accent);transform:translateY(-1px)}
.mod .hrs{flex:none;width:50px;height:50px;border-radius:12px;background:var(--accent-soft);color:var(--accent-on-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:16px;line-height:1}
.mod .hrs small{font-size:9px;font-weight:600;letter-spacing:.5px;margin-top:3px;color:var(--accent)}
/* The title takes the slack, so the tags sit in one right-hand column. Each tag
   used to carry margin-left:auto, which split the free space between the two of
   them and left the status badge at a different x on every row. */
.mod .t{flex:1;min-width:0}
.mod .t b{display:block;font-size:15px;letter-spacing:-.2px}
.mod .t span{font-size:12.5px;color:var(--muted)}
.mod.done{opacity:.65}
.tag{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.4px;padding:4px 10px;border-radius:99px}
.tag.req{background:var(--gold-soft);color:var(--gold)}
.tag.spec{background:var(--accent-soft);color:var(--accent-on-soft)}
.tag.live{background:var(--right-soft);color:var(--good)}
.tag.soon{background:var(--hover-soft);color:var(--muted)}
/* Phone: two badges beside a 50px hour tile left the title about ninety pixels,
   so every course name broke one word to a line. The badges drop to their own
   row, indented to sit under the title. */
@media (max-width:560px){
  .mod{flex-wrap:wrap;row-gap:10px}
  .mod .t{flex:1 1 calc(100% - 66px)}
  .mod .t + .tag{margin-left:66px}
}
.plan-total{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:20px;padding:17px 22px;border-radius:var(--radius);background:var(--dark-panel);color:#fff}
.plan-total b{font-size:16px;min-width:0}
.plan-total span{opacity:.75;font-size:13px;min-width:0;text-align:right}
.plan-cta{display:flex;flex-direction:column;align-items:center;margin:34px 0 70px;gap:12px}
.price-line{font-size:14px;color:var(--muted)}
.price-line b{color:var(--ink)}
.plan-notes{max-width:640px;margin:14px auto 0;text-align:center}
.plan-notes p{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 6px}
.plan-notes a{color:var(--accent);cursor:pointer}

.authcard{max-width:430px;margin:8vh auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:34px;box-shadow:var(--shadow)}
.authcard h2{font-size:24px;letter-spacing:-.6px;margin-bottom:6px}
.authcard .hint{color:var(--muted);font-size:14px;margin-bottom:22px}
.authcard label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin:14px 0 6px}
.err{background:var(--wrong-soft);color:var(--warn);font-size:13.5px;border-radius:9px;padding:10px 14px;margin-top:14px;display:none}
.err.show{display:block}
.btn{background:var(--accent);color:var(--on-accent);font-weight:700;padding:12px 24px;border-radius:10px;font-size:15px;transition:background .15s}
.btn:hover{background:var(--accent-ink)}
.btn.ghost{background:var(--accent-soft);color:var(--accent-on-soft)}
.btn.quiet{background:none;color:var(--faint);font-weight:600}
.btn.block{width:100%;margin-top:22px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.renew-opts{display:flex;flex-direction:column;gap:9px;margin:6px 0 4px}
.renew-opt{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;cursor:pointer;transition:all .15s}
.renew-opt:hover{border-color:var(--accent)}
.renew-opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.renew-opt input{width:15px;height:15px;margin-top:3px;flex:none;accent-color:var(--accent);padding:0}
.renew-opt b{display:block;font-size:14px}
.renew-opt small{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}

.dash{max-width:980px;margin:0 auto;padding:5vh 24px 80px}
.dash-grid{display:grid;grid-template-columns:280px 1fr;gap:18px;margin-top:26px}
@media(max-width:780px){.dash-grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.card h4{font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.ring-wrap{display:flex;flex-direction:column;align-items:center}
.ring{position:relative;width:168px;height:168px}
.ring svg{transform:rotate(-90deg)}
.ring-track{stroke:var(--line)}.ring-arc{stroke:var(--accent);transition:stroke-dashoffset .8s}
.ring .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .num b{font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1}
.ring .num span{font-size:12px;color:var(--muted);margin-top:5px}
.countdown b{font-size:28px;font-weight:700;letter-spacing:-1px}
.countdown span{color:var(--muted);font-size:13px;margin-left:6px}
.duebar{height:6px;border-radius:6px;background:var(--line);margin-top:12px;overflow:hidden}
.duebar i{display:block;height:100%;background:var(--accent);border-radius:6px}

.layout{display:grid;grid-template-columns:255px 1fr;max-width:1200px;margin:0 auto;gap:24px;padding:24px 24px 90px}
@media(max-width:900px){.layout{grid-template-columns:1fr}.side{position:static;order:2}}
/* Sticky and taller than the viewport is a trap: the rail pins at 78px and
   anything past the window bottom (the STAT Track card, on a laptop) can never
   be scrolled into view. Let the rail scroll itself when it does not fit. */
.side{position:sticky;top:78px;align-self:start;max-height:calc(100vh - 92px);overflow-y:auto;scrollbar-width:thin}
.side .card{padding:14px;margin-bottom:14px}
.navitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font-size:13px;padding:8px;border-radius:9px;color:var(--muted)}
.navitem:hover{background:var(--bg)}
.navitem.on{background:var(--accent-soft);color:var(--accent-on-soft);font-weight:600}
.navitem .dot{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--line);font-size:9px;display:flex;align-items:center;justify-content:center;color:var(--on-accent)}
.navitem.done .dot{background:var(--accent);border-color:var(--accent)}
.navitem.done .dot::after{content:"✓"}
.hrs-chip{margin-top:10px;text-align:center;font-size:11.5px;color:var(--faint)}
.tstatus{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--faint)}
.tdot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.side .card p{font-size:12.5px;color:var(--muted);margin:8px 0 12px;line-height:1.5}
.tbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--tutor);color:var(--on-tutor);
  font-weight:700;font-size:14px;padding:11px 14px;border-radius:10px;transition:filter .15s}
.tbtn:hover{filter:brightness(1.08)}
.stat-side{background:var(--gold-soft)!important}
.attest-check{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--muted);line-height:1.45;cursor:pointer;margin-bottom:12px}
.attest-check input{width:15px;height:15px;flex:none;margin-top:2px;accent-color:var(--gold);cursor:pointer;padding:0}
/* The attest button. Founder, 28 Sep: the gold-at-45% disabled state read as
   beige. It is the site's indigo now, like every other primary action, and
   "not yet" is an outlined button rather than a faded one. */
.fbtn{display:flex;align-items:center;justify-content:center;width:100%;background:var(--accent);color:#fff;
  border:1px solid var(--accent);font-weight:600;font-size:14.5px;padding:12px 14px;border-radius:11px;
  transition:background .15s,color .15s,border-color .15s}
.fbtn:hover:not(:disabled){background:var(--accent-ink);border-color:var(--accent-ink)}
.fbtn:disabled{background:var(--bg);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
  opacity:.8;cursor:not-allowed}

.pane{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:40px 44px;box-shadow:var(--shadow-sm);min-width:0}
@media(max-width:700px){.pane{padding:24px 18px}}
.sec-kicker{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.sec-title{font-size:clamp(22px,3.2vw,30px);letter-spacing:-.7px;line-height:1.15;margin-bottom:20px;font-weight:700}
.content h2{font-size:19px;letter-spacing:-.3px;margin:28px 0 12px}
.content h3{font-size:16px;margin:22px 0 10px}
.content p{margin:0 0 14px;font-size:15.5px;color:var(--content-ink)}
.content ul,.content ol{margin:0 0 16px 22px;font-size:15.5px;color:var(--content-ink)}
.content li{margin-bottom:8px}
.content blockquote{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0;padding:14px 18px;margin:0 0 16px;font-size:14.5px}
.content blockquote p{margin:0}
.content strong{color:var(--ink)}
.content table{border-collapse:collapse;margin:0 0 16px;font-size:14px;width:100%}
.content th,.content td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.content th{background:var(--bg);font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.content .speakable{cursor:pointer;border-radius:6px;transition:background .15s}
.content .speakable:hover{background:var(--hover-soft);box-shadow:0 0 0 6px var(--hover-soft)}
.content .nowreading{background:var(--accent-soft);box-shadow:0 0 0 6px var(--accent-soft)}
.pane-foot{display:flex;justify-content:space-between;align-items:center;margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}

.audiobar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 20px}
.playbtn{background:var(--accent);color:var(--on-accent);font-weight:700;font-size:13.5px;padding:8px 16px;border-radius:9px}
.playbtn:hover{background:var(--accent-ink)}
.audiobar .lbl{font-size:11px;color:var(--faint);font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-left:6px}
.speedchip{font-size:12.5px;font-weight:700;color:var(--muted);border:1.5px solid var(--line);border-radius:99px;padding:4px 11px}
.speedchip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-on-soft)}
.readstate{font-size:12px;color:var(--faint);margin-left:auto}
.voiceSel{width:auto;max-width:180px;font-size:12.5px;padding:5px 8px;border-radius:9px}
.voiceSel:disabled{opacity:.6;cursor:not-allowed}
.atime{font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;min-width:88px}
.dlbtn{display:inline-flex;align-items:center;text-decoration:none;font-size:12.5px;font-weight:700;color:var(--accent-ink);
  background:var(--accent-soft);border:1.5px solid var(--accent);border-radius:99px;padding:5px 13px;margin-left:6px;white-space:nowrap}
.dlbtn:hover{background:var(--accent);color:var(--on-accent)}
.audiobar .anote{flex-basis:100%;font-size:11px;color:var(--faint);line-height:1.45}
.audiobar audio{display:none}

/* how the learner completed it — read / listened / both */
.basis-pick{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}
.basis-pick .basis-q{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.basis-pick label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);cursor:pointer}
.basis-pick input{width:14px;height:14px;flex:none;accent-color:var(--gold);cursor:pointer;padding:0;margin:0}

/* password-reset notices */
.note-ok{background:var(--accent-soft);color:var(--accent-on-soft);font-size:13.5px;border-radius:9px;padding:12px 14px;margin-top:14px;line-height:1.5}
.note-dev{background:var(--gold-soft);font-size:12.5px;border-radius:9px;padding:12px 14px;margin-top:10px;line-height:1.5;word-break:break-all}
.note-dev a{color:var(--accent);font-weight:700}

/* plan footer: hours vs. the board requirement */
.plan-req{border-top:1px solid var(--line);margin-top:6px;padding:18px 0 4px}
.plan-req .pt-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.plan-req .pt-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--faint)}
.plan-req .pt-hours{font-size:20px;font-weight:700;letter-spacing:-.4px}
.plan-req .pt-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:10px 0}
.plan-req .pt-bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.plan-req.short .pt-bar i{background:var(--gold)}
.plan-req .pt-verdict{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 8px;line-height:1.45}
.plan-req .pt-check,.plan-req .pt-warn{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700}
.plan-req .pt-check{background:var(--accent-soft);color:var(--accent-on-soft)}
.plan-req .pt-warn{background:var(--gold-soft);color:var(--gold)}
.plan-req .pt-cite{font-size:11.5px;color:var(--faint);line-height:1.5;margin:0 0 3px}

/* bulk STAT Track attestation */
.bulk{border-top:1px solid var(--line);margin-top:14px;padding:18px 0 2px}
.bulk-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px;font-size:14.5px}
.bulk-head .bolt{color:var(--gold)}
.bulk-tag{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);background:var(--gold-soft);border-radius:99px;padding:4px 11px}
.bulk-lead{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 12px}
.bulk-list{list-style:none;margin:0 0 12px;padding:0;font-size:13px;color:var(--muted)}
.bulk-list li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.bulk-list li b{font-weight:600;color:var(--ink)}
.bulk-direct{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 14px}
/* what is not here yet. Stated in the panel rather than only in its empty
   state, so a plan never looks shorter than it is. */
.bulk-pending{font-size:12px;color:var(--faint);line-height:1.5;margin:0 0 14px}
.bulk-basis{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 12px}
.bulk-basis .bulk-q{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
.bulk-basis label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer}
.bulk-basis input{width:14px;height:14px;flex:none;accent-color:var(--gold);cursor:pointer;padding:0;margin:0}
.bulk-check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.5;cursor:pointer;margin:0 0 12px}
.bulk-check input{width:15px;height:15px;flex:none;margin-top:2px;accent-color:var(--gold);cursor:pointer;padding:0}
.bulk-sig{display:block;max-width:320px;margin:0 0 12px}
.bulk-sig > span{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.bulk-sig input{font-family:Georgia,'Times New Roman',serif;font-size:15px}
.bulk .fbtn{max-width:340px}
.bulk-hint{font-size:12px;color:var(--faint);line-height:1.5;margin:-4px 0 12px;min-height:0}
.bulk-hint:empty{display:none}
.bulk-hint.is-mismatch{color:var(--warn)}
.bulk-hint b{font-weight:600;color:var(--ink)}
.bulk-fine{font-size:11px;color:var(--faint);line-height:1.5;margin:10px 0 0}
.bulk-err{margin-top:12px}
.bulk-empty{background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:14px 16px;font-size:13px;color:var(--muted);line-height:1.55}
.bulk-load{font-size:12.5px;color:var(--faint)}

.q{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.q .qt{font-weight:600;font-size:15.5px;margin-bottom:10px}
.opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;font-size:14.5px;
  border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:8px;background:var(--card);transition:all .15s}
.opt:hover{border-color:var(--accent)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.right{border-color:var(--good);background:var(--right-soft)}
.opt.wrong{border-color:#d97706;background:var(--wrong-soft)}
.opt .letter{flex:none;font-weight:700;color:var(--faint)}
.rationale{display:none;font-size:13.5px;color:var(--muted);background:var(--bg);border-radius:9px;padding:10px 14px;margin-top:4px}
.rationale.show{display:block}
.score-box{position:sticky;bottom:14px;background:var(--dark-panel);color:#fff;border-radius:12px;padding:15px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:var(--shadow);margin-top:10px}

.certwrap{text-align:center}
.certcard{margin:28px auto 0;max-width:560px;background:linear-gradient(135deg,var(--accent),var(--accent-ink));border-radius:18px;padding:10px;box-shadow:var(--shadow)}
.certinner{background:var(--card);border-radius:12px;padding:34px 30px}
.certlabel{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--faint);margin:12px 0 8px}
.certinner h3{font-size:25px;letter-spacing:-.6px}
.certcourse{color:var(--muted);margin-top:8px;font-size:15px}
.certmeta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:20px;font-size:11.5px;color:var(--faint)}

.bubble{position:fixed;right:22px;bottom:22px;display:flex;align-items:center;gap:9px;background:var(--dark-panel);color:#fff;
  font-size:14px;font-weight:700;padding:13px 19px;border-radius:99px;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.28);z-index:90}
.chatbox{position:fixed;right:22px;bottom:82px;width:340px;max-width:calc(100vw - 44px);background:var(--card);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.22);display:none;flex-direction:column;overflow:hidden;z-index:91}
.chatbox.open{display:flex}
/* The support head sits on --dark-panel, which is dark in BOTH themes, so it
   keeps white. Statsy's head sits on --tutor, which lifts to #ff7a4d in
   midnight — white on that is 2.6:1, so it takes the dark ink instead. The
   ✕ and the ↑ carry inline colours from index.html, hence the !important. */
.c-head{color:#fff;font-weight:700;font-size:14px;padding:12px 16px;display:flex;justify-content:space-between}
#tutorBox .c-head,#tutorBox .c-head button{color:var(--on-tutor)!important}
#tutorBox .chatin .btn{color:var(--on-tutor)}
.chat{overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:12px;height:250px}
.msg{font-size:13.5px;line-height:1.5;padding:9px 12px;border-radius:12px;max-width:92%;white-space:pre-wrap}
.msg.bot{background:var(--accent-soft);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--dark-panel);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.thinking{color:var(--faint);background:var(--bg)}
.quickqs{display:flex;flex-direction:column;gap:6px;padding:0 12px 4px}
.quickqs button{font-size:12.5px;text-align:left;color:var(--accent-ink);border:1px dashed var(--line);border-radius:9px;padding:7px 10px}
.chatin{display:flex;gap:8px;padding:10px 12px}
.chatin input{flex:1;padding:9px 12px;font-size:13.5px}
.chatin .btn{padding:9px 14px}

.vault-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.vault-row .t b{display:block;font-size:14.5px}
.vault-row .t span{font-size:12px;color:var(--muted)}
.vault-row .btn{margin-left:auto;padding:8px 16px;font-size:13px;flex:none}

.admin{max-width:1080px;margin:0 auto;padding:4vh 24px 80px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.tile b{font-size:28px;font-weight:700;letter-spacing:-1px;display:block}
.tile span{font-size:12px;color:var(--muted)}
table.admin-t{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--card);border-radius:12px;overflow:hidden}
.admin-t th{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--faint);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.admin-t td{padding:10px 14px;border-bottom:1px solid var(--line)}
.badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px}
.badge.approved{background:var(--right-soft);color:var(--good)}
.badge.draft{background:var(--gold-soft);color:var(--gold)}
/* ---------- Statsy, the animated teacher ---------- */
.statsy{display:flex;flex-direction:column;align-items:center;cursor:pointer;margin:6px auto 4px;width:fit-content;transition:transform .2s}
.statsy:hover{transform:translateY(-3px)}
.statsy svg{width:96px;height:106px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.14))}
.statsy .nametag{font-size:10px;font-weight:700;letter-spacing:.8px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:99px;padding:2px 10px;margin-top:-4px}
.statsy .eyes{animation:blink 4.6s infinite;transform-origin:60px 42px}
@keyframes blink{0%,95.5%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
.statsy .m-open{opacity:0}
.statsy.talking .m-open{animation:chat .58s ease-in-out infinite}
.statsy.talking .m-closed{animation:chatInv .58s ease-in-out infinite}
@keyframes chat{0%,18%{opacity:0}24%,42%{opacity:1}48%,64%{opacity:0}70%,84%{opacity:1}90%,100%{opacity:0}}
@keyframes chatInv{0%,18%{opacity:1}24%,42%{opacity:0}48%,64%{opacity:1}70%,84%{opacity:0}90%,100%{opacity:1}}
/* listening along with the narration: calm breathing sway, mouth closed */
.statsy.listening svg{animation:listen 3.6s ease-in-out infinite}
@keyframes listen{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-2px) rotate(-1deg)}70%{transform:translateY(-1px) rotate(1deg)}}
.statsy.happy{animation:hop .45s ease 2}
@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-14px)}}
.st-bubble{background:var(--accent-soft);border:1px solid var(--line);border-radius:12px;border-bottom-left-radius:4px;
  padding:9px 12px;font-size:12.5px;line-height:1.45;color:var(--ink);text-align:left;display:none;animation:rise .25s;margin-bottom:10px}
.st-bubble.show{display:block}

.toastbox{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--dark-panel);color:#fff;font-size:13.5px;padding:11px 18px;border-radius:11px;box-shadow:var(--shadow);animation:rise .25s;max-width:88vw}
.footnote{text-align:center;font-size:12px;color:var(--faint);padding:20px}
em.stat{font-style:italic;letter-spacing:normal}
.trk{margin-left:.16em}

/* ---------------------------------------------------------------------------
   INBOX · ACCOUNT SETTINGS · LICENSES · BILLING
   Everything below styles the account surface. Two rules that are load-bearing
   rather than decorative: .acct-pane and .msg-body default to display:none and
   are revealed only by the .on / .open classes the JS toggles.
--------------------------------------------------------------------------- */
:root{ --danger:#b42318; --danger-soft:#fdf2f0; --on-danger:#ffffff; }
[data-theme="midnight"]{ --danger:#ff6b6e; --danger-soft:#2a1618; --on-danger:#22090b; }

/* ---------- inbox: dashboard card ---------- */
.unread-pill{display:inline-block;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:700;
  letter-spacing:0;padding:1px 7px;border-radius:99px;margin-left:6px;vertical-align:middle}
.inbox-mini{display:block;width:100%;text-align:left;border-top:1px solid var(--line);padding:9px 0;cursor:pointer;transition:opacity .15s}
.inbox-mini:first-of-type{border-top:none;padding-top:2px}
.inbox-mini:hover{opacity:.7}
.inbox-mini b{display:block;font-size:13px;font-weight:600;letter-spacing:-.1px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-mini span{display:block;font-size:11px;color:var(--faint);margin-top:2px}
.inbox-mini.un b{font-weight:700}
.inbox-mini.un b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:6px;vertical-align:middle}

/* ---------- inbox: full page ---------- */
.inbox-page{max-width:820px}
.inbox-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.inbox-head>div:first-child{flex:1 1 340px;max-width:58ch}
.inbox-acts{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.note-warn{background:var(--gold-soft);color:var(--gold);font-size:13.5px;border-radius:9px;
  padding:12px 14px;margin-top:16px;line-height:1.5}
.msg-list{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.msg-row{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:border-color .15s}
.msg-row.un{border-left:3px solid var(--accent)}
.msg-row.open{border-color:var(--accent)}
.msg-top{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
.msg-top:hover{background:var(--hover-soft)}
.msg-icon{font-size:18px;line-height:1;flex:none;width:32px;height:32px;border-radius:9px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center}
.msg-sub{flex:1;min-width:0}
.msg-sub b{display:block;font-size:14.5px;letter-spacing:-.2px;font-weight:600;line-height:1.35}
.msg-row.un .msg-sub b{font-weight:700}
.msg-sub span{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}
.msg-caret{flex:none;color:var(--faint);font-size:13px;transition:transform .18s}
.msg-row.open .msg-caret{transform:rotate(180deg)}
.msg-body{display:none;border-top:1px solid var(--line);padding:16px}
.msg-row.open .msg-body{display:block;animation:rise .2s}
.msg-body pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  color:var(--content-ink);white-space:pre-wrap;word-wrap:break-word;line-height:1.7;max-width:76ch}
.msg-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- account shell ---------- */
.acct{max-width:820px}
/* Sticky under the 61px top bar. Settings is five panes deep and the billing pane
   alone runs past a laptop viewport, so a tab row that scrolls away means the only
   route from Billing to Licenses is scrolling back to the top. It also gives the
   scrolling content an opaque edge to disappear behind — the translucent top bar
   on its own left buttons half-legible underneath it. */
.acct-tabs{position:sticky;top:61px;z-index:40;background:var(--bg);
  display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:20px;
  padding-bottom:0;-webkit-overflow-scrolling:touch}
.acct-tab{font-size:13.5px;font-weight:700;color:var(--muted);padding:10px 14px;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.acct-tab:hover{color:var(--ink)}
.acct-tab.on{color:var(--accent-ink);border-bottom-color:var(--accent)}
.acct-pane{display:none}
.acct-pane.on{display:block;animation:rise .25s}
.acct-pane .card{margin-bottom:16px}
.acct-hint{font-size:13.5px;color:var(--muted);line-height:1.55;margin:-4px 0 4px}
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:14px}
@media(max-width:700px){.acct-grid{grid-template-columns:1fr}}
.acct-grid label,.acct-full{display:block;font-size:11.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px}
.acct-grid label input,.acct-grid label select,.acct-full input,.acct-full select{margin-top:5px;text-transform:none;letter-spacing:normal;font-weight:400}
.acct-full{grid-column:1/-1;margin-top:14px}
.acct-grid .acct-full{margin-top:0}
.acct-grid label small,.acct-full small{text-transform:none;letter-spacing:normal}
.acct-note{display:block;font-size:13px;margin-top:10px;line-height:1.5}
.acct-note.ok{color:var(--good)}
.acct-note.bad{color:var(--danger)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:14px 0 0;margin-top:14px}
.toggle-row:first-of-type{border-top:none;margin-top:6px}
.toggle-row>div{flex:1;min-width:220px}
.toggle-row b{display:block;font-size:14.5px;letter-spacing:-.2px}
.toggle-row small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.toggle-row .btn{flex:none;font-size:12.5px;padding:9px 15px}
.acct-fixed{flex:none;font-size:11.5px;font-weight:700;color:var(--good);background:var(--right-soft);
  border-radius:99px;padding:6px 13px;letter-spacing:.4px}
.card.danger{border:1.5px solid var(--danger);background:var(--danger-soft)}
.card.danger h4{color:var(--danger)}
.btn.danger-btn{background:var(--danger);color:var(--on-danger)}
.btn.danger-btn:hover{filter:brightness(.9);background:var(--danger)}
.btn.ghost.quiet-danger{background:none;color:var(--danger);font-weight:600}
.btn.ghost.quiet-danger:hover{background:var(--danger-soft)}

/* ---------- licenses ---------- */
.lic-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:12px;background:var(--bg)}
.lic-row.primary{border-color:var(--accent);background:var(--accent-soft)}
.lic-id{flex:1;min-width:200px}
.lic-id b{font-size:16px;letter-spacing:-.3px}
.lic-tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.7px;background:var(--accent);
  color:var(--on-accent);border-radius:99px;padding:2px 8px;margin-left:8px;vertical-align:2px}
.lic-num{display:block;font-size:13.5px;color:var(--ink);margin-top:3px;font-variant-numeric:tabular-nums}
.lic-num i{color:var(--faint)}
.lic-meta{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.lic-exp{display:block;font-size:12px;color:var(--faint);margin-top:3px}
.lic-exp.soon{color:var(--gold);font-weight:700}
.lic-btns{display:flex;gap:6px;flex-wrap:wrap;flex:none}
.lic-btns .btn{font-size:12.5px;padding:8px 13px}

/* ---------- billing ---------- */
.bill-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bill-price{font-size:30px;font-weight:700;letter-spacing:-1.2px;display:block}
.bill-price span{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:normal}
.bill-state{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.9px;border-radius:99px;padding:5px 12px}
.bill-state.on{background:var(--right-soft);color:var(--good)}
.bill-state.off{background:var(--gold-soft);color:var(--gold)}
.bill-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:18px;
  border-top:1px solid var(--line);padding-top:16px}
.bill-facts span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--faint);font-weight:700}
.bill-facts b{display:block;font-size:14.5px;letter-spacing:-.2px;margin-top:3px}
.pay-current{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-top:14px;background:var(--bg)}
.pay-current div{flex:1;min-width:0}
.pay-current b{display:block;font-size:14.5px;letter-spacing:-.2px}
.pay-current small{display:block;font-size:12px;color:var(--faint)}
.pay-ic{flex:none;width:36px;height:36px;border-radius:9px;background:var(--accent-soft);color:var(--accent-on-soft);
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700}
.pay-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:16px}
.pay-opt{position:relative;display:block;text-align:left;background:var(--card);border:1.5px solid var(--line);
  border-radius:12px;padding:13px 14px;transition:all .15s}
.pay-opt:hover{border-color:var(--accent);transform:translateY(-1px)}
.pay-opt b{display:block;font-size:14px;letter-spacing:-.2px;margin-top:8px}
.pay-opt small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.pay-opt.on,.pay-opt.picked{border-color:var(--accent);background:var(--accent-soft)}
.pay-cur{position:absolute;top:11px;right:11px;font-size:9.5px;font-weight:700;letter-spacing:.6px;
  background:var(--accent);color:var(--on-accent);border-radius:99px;padding:2px 8px}
.pay-form{border:1px solid var(--accent);border-radius:12px;padding:16px;margin-top:14px;background:var(--bg);animation:rise .2s}
.pay-form>b{font-size:15px;letter-spacing:-.2px}

/* a requirement we have not verified for that state: shown, never scored */
.plan-req.unverified .pt-verdict{align-items:flex-start;font-weight:500}
.plan-req.unverified .pt-verdict .pt-warn{margin-top:1px}
.plan-req.unverified .pt-cite a{color:var(--accent-ink)}
.lic-unver{color:var(--gold);font-weight:700}

/* ===========================================================================
   ADMIN CONSOLE SHELL

   The admin page used to be one continuous scroll: overview, then the review
   queue, then team, then mail, then settings, then two more tables. Finding
   the mail log meant scrolling past everything else, and nothing had a URL.

   This is a two-column console instead — persistent nav on the left, one view
   at a time on the right, each with its own hash so a view can be linked and
   reloaded. Under 900px the nav becomes a horizontal strip above the view,
   because a 232px sidebar on a phone leaves nothing for the tables.
=========================================================================== */
.acon{display:grid;grid-template-columns:236px minmax(0,1fr);gap:0;align-items:start;
  max-width:1400px;margin:0 auto;min-height:calc(100vh - 58px)}
.anav{position:sticky;top:58px;align-self:start;padding:26px 14px 60px;
  border-right:1px solid var(--line);min-height:calc(100vh - 58px)}
.anav-g{margin-bottom:20px}
.anav-h{display:block;font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--faint);padding:0 12px 7px}
.anav-h.foldable{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}
.anav-h.foldable:hover{color:var(--ink)}
.anav-caret{font-size:11px;letter-spacing:0}
.anav-more{font-size:12px;color:var(--faint);font-weight:500}
.anav-i{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 12px;border-radius:9px;
  font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:none;transition:background .12s,color .12s}
.anav-i:hover{background:var(--hover-soft);color:var(--ink)}
.anav-i.on{background:var(--accent-soft);color:var(--accent-on-soft);font-weight:700}
.anav-i .ai-ic{width:17px;flex:none;text-align:center;font-size:14px;opacity:.9}
.anav-i .ai-n{margin-left:auto;font-size:10.5px;font-weight:700;min-width:19px;text-align:center;
  padding:1px 6px;border-radius:99px;background:var(--line);color:var(--muted)}
.anav-i .ai-n.hot{background:var(--gold-soft);color:var(--gold)}
.anav-i .ai-n.bad{background:var(--wrong-soft);color:var(--warn)}

.aview{padding:26px 30px 90px;min-width:0}
.aview-h{margin-bottom:4px}
.aview-h h2{font-size:23px;letter-spacing:-.6px}
.aview-h p{color:var(--muted);font-size:13.5px;margin-top:5px;max-width:74ch}
.aview .tiles{margin:20px 0 26px}
.asec{margin-top:30px}
.asec > h3{font-size:15.5px;margin-bottom:4px}
.asec > p.sub{color:var(--muted);font-size:13px;margin-bottom:12px;max-width:74ch}
/* every console table can overflow horizontally on its own rather than
   pushing the whole page sideways */
.awrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
/* course-library status tabs + filter row (console A3) */
.ctabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:4px 0 12px}
.ctab{padding:9px 14px;font-size:13px;font-weight:600;color:var(--faint);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ctab b{font-weight:700;color:var(--muted);margin-left:4px}
.ctab:hover{color:var(--ink)}
.ctab.on{color:var(--accent-ink);border-bottom-color:var(--accent)}
.ctab.on b{color:var(--accent-ink)}
.cfilters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.cfilters input,.cfilters select{width:auto;padding:8px 12px;font-size:12.5px;border-radius:9px}
.cbulk{display:flex;gap:14px;align-items:center;background:var(--accent-soft);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:13px}
.admin-t td input[type=checkbox],.admin-t th input[type=checkbox]{width:15px;height:15px;padding:0;margin:0}
.awrap table.admin-t{border:none;border-radius:0;min-width:640px}
.awrap .admin-t tr:last-child td{border-bottom:none}

/* toolbar: search + filter chips above a table */
.abar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.abar input{max-width:320px;padding:9px 13px;font-size:13.5px}
.abar .count{font-size:12.5px;color:var(--faint);margin-left:auto}
.achip{font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px;border:1.5px solid var(--line);
  color:var(--muted);background:var(--card);cursor:pointer;white-space:nowrap}
.achip:hover{border-color:var(--accent);color:var(--accent-ink)}
.achip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* "needs your attention" — action rows, not statistics */
.todo{display:flex;flex-direction:column;gap:8px}
.todo-i{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:11px;padding:13px 16px;font-size:13.5px}
.todo-i.bad{border-left-color:var(--warn)}
.todo-i.ok{border-left-color:var(--good)}
.todo-i b{font-weight:700;white-space:nowrap}
.todo-i span{color:var(--muted)}
.todo-i .btn{margin-left:auto;flex:none;padding:7px 14px;font-size:12.5px}
.lc-mark{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--gold-soft);color:var(--gold)}
.lc-mark.ok{background:var(--right-soft);color:var(--good)}
.todo-i.ok b{color:var(--muted);font-weight:600}
.todo-clear{display:flex;align-items:center;gap:10px;background:var(--right-soft);border-radius:11px;
  padding:14px 16px;font-size:13.5px;color:var(--good);font-weight:600}

/* compact stat strip for a section that doesn't need full tiles */
.mini{display:flex;gap:22px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:15px 18px;margin-bottom:14px}
.mini div{min-width:78px}
.mini b{display:block;font-size:19px;font-weight:700;letter-spacing:-.4px;line-height:1.25}
.mini span{font-size:11.5px;color:var(--faint)}

/* the activity feed */
.feed{display:flex;flex-direction:column}
.feed-i{display:flex;align-items:baseline;gap:11px;font-size:13px;padding:9px 2px;border-bottom:1px solid var(--line)}
.feed-i:last-child{border-bottom:none}
.feed-i .fk{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent-on-soft);
  background:var(--accent-soft);border-radius:5px;padding:2px 7px;flex:none;min-width:86px;text-align:center}
.feed-i .fd{color:var(--muted);min-width:0;word-break:break-word}
.feed-i .ft{margin-left:auto;font-size:11.5px;color:var(--faint);flex:none;white-space:nowrap}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.badge.flag{background:var(--wrong-soft);color:var(--warn)}
.aempty{color:var(--faint);font-size:13px;background:var(--card);border:1px dashed var(--line);
  border-radius:12px;padding:22px;text-align:center}

@media(max-width:900px){
  .acon{grid-template-columns:minmax(0,1fr)}
  .anav{position:static;min-height:0;border-right:none;border-bottom:1px solid var(--line);
    padding:12px 14px;display:flex;gap:6px;overflow-x:auto}
  .anav-g{display:flex;gap:6px;margin:0}
  .anav-h{display:none}
  .anav-i{white-space:nowrap;padding:7px 12px}
  .aview{padding:20px 18px 70px}
}

/* ---------- paywall / preview -------------------------------------------
   Deliberately calm. A nurse buying CE has been chased by discount timers and
   fake urgency her whole career; the gate states the price once and stops. */
.paybar{display:flex;align-items:center;gap:18px;justify-content:space-between;
  background:var(--accent-soft);border:1px solid var(--accent);border-radius:14px;
  padding:14px 18px;margin:0 0 18px;font-size:13.5px;line-height:1.55;color:var(--accent-on-soft)}
.paybar .btn{flex:none}
.navitem.locked{color:var(--faint)}
.navitem .navlock{margin-left:auto;flex:none;font-size:11px;opacity:.6}
.locked-body{position:relative;color:var(--muted)}
.locked-body::after{content:"";display:block;height:1px;margin-top:18px;
  background:linear-gradient(90deg,var(--line),transparent)}
.previewnote{background:var(--bg);border-left:3px solid var(--accent);
  padding:10px 14px;border-radius:0 8px 8px 0}
.unlock{border:1px solid var(--line);border-radius:16px;background:var(--bg);
  padding:26px 28px;margin:22px 0;text-align:center}
.unlock-lock{font-size:22px;line-height:1;margin-bottom:10px;opacity:.75}
.unlock h3{font-size:19px;letter-spacing:-.3px;margin:0 0 8px}
.unlock p{font-size:14px;line-height:1.65;color:var(--muted);margin:0 auto 16px;max-width:52ch}
.unlock .btn{margin:0 auto}
.unlock-fine{font-size:12px !important;color:var(--faint) !important;margin:14px auto 0 !important}
.side-lock{font-size:12.5px;color:var(--muted);line-height:1.55;margin:8px 0 12px}

/* ===========================================================================
   HOMEPAGE V2 · COURSE LIBRARY · CA REQUIREMENTS  (2026-08-11)
   Public marketing surface. Everything below uses only the existing custom
   properties so both themes keep working without a single new colour.
=========================================================================== */

/* ---- header nav ---- */
/* Nav sits flush right: logo left, auto-margin spacer, then links reading as
   one cluster with the mode toggle / auth / CTA group. */
.mainnav{display:flex;gap:22px;align-items:center;font-size:14px;font-weight:600;margin-left:auto;justify-content:flex-end;min-width:0}
.mainnav a{color:var(--muted);cursor:pointer;text-decoration:none;white-space:nowrap;transition:color .15s}
.mainnav a:hover{color:var(--accent-ink)}
.navcta{padding:8px 16px;font-size:13.5px;flex:none;white-space:nowrap}
@media(max-width:960px){
  .top{flex-wrap:wrap;row-gap:8px;padding:11px 18px}
  .mainnav{order:3;flex-basis:100%;justify-content:flex-end;margin-left:0;gap:18px}
}
@media(max-width:560px){
  .pill-note{display:none}
  .top .right{gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .modebtn{font-size:11.5px;padding:5px 10px}
  .navcta{padding:7px 12px;font-size:12.5px}
  .mainnav{font-size:13px;gap:14px}
}

/* ---- hero ---- */
.home-hero{min-height:calc(86vh - 120px);padding-top:48px;padding-bottom:34px}
.hero-ctas{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.ghostlink{margin-top:34px;font-size:15px;font-weight:700;color:var(--accent-ink);cursor:pointer;text-decoration:none}
.ghostlink:hover{text-decoration:underline}
@media(max-width:560px){.hero-ctas{gap:8px}.ghostlink{margin-top:14px}}

/* ---- shared section shell ---- */
.home-sec{max-width:1060px;margin:0 auto;padding:38px 24px}
.sec-h{font-size:clamp(21px,3vw,28px);letter-spacing:-.7px;font-weight:700;text-align:center;margin-bottom:26px}

/* ---- course library tree (#/courses) --------------------------------------
   Top-down org chart: root card, vertical stem, horizontal distributor with a
   tick into each of the 8 family cards — all connectors are borders on the
   equal-width cells, so nothing is measured and nothing can misalign. The
   accordion lives IN the tree: family → full-width band of specialty pills →
   course panel. */
/* The tree sits in a tinted panel now, the same treatment as the licence band
   on #/requirements and the FAQ accordion: on a white page a bare org chart
   floated with nothing holding it. --bg is the app's cool blue-grey in light
   and a recess below --card in midnight, so it reads as a well either way. */
#mapWrap{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 26px 34px;margin-top:0}
@media(max-width:640px){#mapWrap{padding:22px 16px 26px}}
.tree{margin-top:0}
.tree-root{display:flex;align-items:center;justify-content:center;gap:9px;width:fit-content;margin:0 auto;
  background:var(--card);border:1.5px solid var(--accent);border-radius:14px;padding:12px 22px;box-shadow:var(--shadow)}
.tree-root .bolt{width:20px;height:20px}
.tree-root b{font-size:14.5px;letter-spacing:-.3px}
.tree-stem{width:2px;height:26px;background:var(--line);margin:0 auto}
.tree-fams{display:flex;align-items:stretch}
.tree-cell{position:relative;flex:1;min-width:0;padding:24px 5px 0;display:flex}
.tree-cell::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line)}
.tree-cell:first-child::before{left:50%}
.tree-cell:last-child::before{right:50%}
.tree-cell::after{content:"";position:absolute;top:0;left:calc(50% - 1px);width:2px;height:24px;background:var(--line)}
.tree-fam{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:14px 8px;
  box-shadow:var(--shadow-sm);transition:border-color .15s,transform .15s;cursor:pointer}
.tree-fam:hover{border-color:var(--accent);transform:translateY(-1px)}
.tree-fam.on{border-color:var(--accent);background:var(--accent-soft)}
.tree-fam b{font-size:12px;font-weight:700;letter-spacing:-.15px;line-height:1.35;color:var(--accent-on-soft)}
.tree-fam .fam-ic{width:30px;height:30px;font-size:15px}
.tree-fam.on .fam-ic{background:var(--card)}
.tree-fam.on::after{content:"";position:absolute;left:calc(50% - 1px);bottom:-21px;width:2px;height:20px;background:var(--accent)}
.tree-band{display:none}
.tree-band.open{display:block;margin-top:18px;background:var(--card);border:1.5px solid var(--accent);
  border-radius:var(--radius);padding:16px 18px 18px;animation:rise .2s}
.band-kicker{font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--accent-on-soft);margin-bottom:12px}
.band-expand{display:none}
.band-expand.open{display:block;margin-top:14px;animation:rise .2s}
.fam-ic{flex:none;width:28px;height:28px;border-radius:8px;background:var(--accent-soft);display:flex;
  align-items:center;justify-content:center;font-size:14px}
.fam-pills{display:flex;flex-wrap:wrap;gap:6px}
.spill{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--line);
  border-radius:99px;padding:4px 10px;line-height:1.35;text-align:left;transition:all .12s}
.spill:hover{border-color:var(--accent);color:var(--accent-ink)}
.spill.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.sx-panel{border-top:1px solid var(--line);padding-top:12px}
.sx-head{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.sx-samples{list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--muted)}
.sx-samples li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.sx-samples li:last-child{border-bottom:none}
.sx-samples b{flex:none;font-weight:700;color:var(--ink);font-variant-numeric:var(--num)}
.sx-more{font-size:12px;color:var(--faint);margin:10px 0 0;line-height:1.5}
.sx-more a{color:var(--accent-ink);font-weight:700;cursor:pointer}
.sx-panel .lib-rows{border-top:none;max-height:340px;overflow-y:auto;border:1px solid var(--line);border-radius:10px}
.sx-panel .lib-row{padding:9px 12px;font-size:12.5px}
/* ---------- sample titles row on /courses ----------
   Three real courses between the tree and the sign-up card, so the
   "700 courses" claim has something concrete under it. Fed by
   /api/catalog/samples; swaps to the open family's courses. Scoped
   under .eui because e.css's `.eui *` reset outranks a bare class. */
.eui .wrap.samples-wrap{padding:4px 28px 10px;max-width:1040px}
.eui .samples-head{text-align:center;margin-bottom:20px}
.eui .samples-head .eyebrow{margin:0 0 8px}
.eui .samples-sub{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.eui .samples{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.eui .samples.n2{grid-template-columns:repeat(2,1fr);max-width:690px;margin:0 auto}
.eui .samples.n1{grid-template-columns:1fr;max-width:340px;margin:0 auto}
.eui .sample{display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s;animation:rise .25s}
.eui .sample:hover{border-color:var(--accent);transform:translateY(-1px)}
.eui .sample-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.eui .sample-top .lr-lic{margin-left:0;flex:none}
.eui .sample h4{margin:0;font-size:16px;line-height:1.3;font-weight:700;color:var(--ink)}
.eui .sample p{margin:0;font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.5;color:var(--ink-2)}
.eui .sample-foot{margin-top:auto;padding-top:10px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--faint)}
.eui .sample-foot b{color:var(--ink);font-variant-numeric:var(--num)}
.eui .sample:hover .sample-foot span{color:var(--accent-ink)}
.eui .sample{overflow:hidden}
.eui .sample-art{margin:-18px -18px 2px;aspect-ratio:16/9;overflow:hidden;background:var(--fam-soft,var(--bg-2));display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.eui .sample-art img{width:100%;height:100%;object-fit:cover;display:block}
.eui .sample-art.tile .fam-ic{width:56px;height:56px;border-radius:16px;background:var(--card);box-shadow:0 1px 2px rgba(19,28,48,.06);color:var(--fam-ink);display:flex;align-items:center;justify-content:center}
.eui .sample-art.tile .fam-ic svg{width:26px;height:26px;color:var(--fam-ink)}
@media(max-width:900px){.eui .samples{grid-template-columns:1fr}}

@media(max-width:900px){
  .tree-fams{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .tree-cell{padding:0}
  .tree-cell::before,.tree-cell::after,.tree-fam.on::after{display:none}
  .tree-stem{height:18px;margin-bottom:12px}
  .tree-fam{flex-direction:row;justify-content:flex-start;text-align:left;padding:12px 14px;gap:10px}
  .tree-band.open{margin-top:14px}
}
@media(max-width:480px){
  .tree-fams{grid-template-columns:1fr}
}
.how-home{margin-top:0;max-width:none;text-align:left}

/* ---- stats band ---- */
.statsband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card);margin:10px 0}
.statsband-in{max-width:1060px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:26px 24px;text-align:center}
@media(max-width:640px){.statsband-in{grid-template-columns:repeat(2,1fr);row-gap:22px}}
.statsband b{display:block;font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-1.2px;line-height:1.1;font-variant-numeric:var(--num)}
.statsband span{display:block;font-size:11.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint);margin-top:4px}

/* ---- differentiators ---- */
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.diff-grid{grid-template-columns:1fr}}
.diff-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.diff-ic{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px}
.diff-card b{display:block;font-size:16px;letter-spacing:-.3px;line-height:1.35}
.diff-card p{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.55}

/* ---- pricing card ---- */
.price-card{max-width:480px;margin:0 auto;text-align:center;background:var(--card);border:1.5px solid var(--accent);
  border-radius:18px;padding:34px 30px;box-shadow:var(--shadow)}
.pc-kicker{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.pc-amount{font-size:44px;font-weight:700;letter-spacing:-2px;line-height:1;font-variant-numeric:var(--num)}
.pc-amount span{font-size:16px;font-weight:600;color:var(--muted);letter-spacing:normal}
.pc-sub{font-size:15px;color:var(--muted);margin-top:6px}
.pc-list{list-style:none;margin:18px auto 0;padding:0;max-width:320px;text-align:left;font-size:14px;color:var(--ink)}
.pc-list li{padding:7px 0;border-bottom:1px dashed var(--line)}
.pc-list li::before{content:"✓";color:var(--accent);font-weight:700;margin-right:9px}
.pc-list li:last-child{border-bottom:none}
.pc-promise{margin-top:16px;font-size:13.5px;font-weight:700;color:var(--accent-on-soft);background:var(--accent-soft);border-radius:10px;padding:11px 14px;line-height:1.5}
.pc-fine{font-size:12px;color:var(--faint);margin-top:12px}

/* ---- trust / verification ---- */
.trust3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.trust3{grid-template-columns:1fr}}
.trust-block{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.trust-block b{display:block;font-size:15px;letter-spacing:-.2px}
.trust-block p{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.6}
.trust-block a{color:var(--accent-ink);font-weight:700;text-decoration:none}

/* ---- FAQ ---- */
.faq-sec{max-width:760px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:9px;overflow:hidden}
.faq summary{cursor:pointer;font-size:14.5px;font-weight:700;letter-spacing:-.2px;padding:15px 44px 15px 18px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:17px;font-weight:600;transition:transform .18s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details[open]{border-color:var(--accent)}
.faq details p{font-size:13.5px;color:var(--muted);line-height:1.65;padding:0 18px 15px;margin:0}

/* ---- footer ---- */
.foot-cols{display:block;padding:38px 24px 30px;text-align:left}
.foot-grid{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.foot-grid{grid-template-columns:1fr}}
.fcol b{display:block;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.fcol a{display:block;font-size:13px;color:var(--muted);text-decoration:none;cursor:pointer;margin-bottom:8px}
.fcol a:hover{color:var(--accent-ink)}
.fcol-brand p{font-size:12.5px;color:var(--faint);line-height:1.6;margin-top:10px;max-width:30ch}
.foot-line{max-width:1060px;margin:26px auto 0;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--faint);text-align:center}

/* ---- course library ---- */
.lib{max-width:1060px;margin:0 auto;padding:6vh 24px 60px}
.lib-loading{text-align:center;color:var(--faint);font-size:14px;padding:60px 0}
.lib-h{font-size:clamp(24px,3.6vw,32px);letter-spacing:-.8px;font-weight:700}
.lib-sub{color:var(--muted);font-size:15px;margin-top:8px;max-width:70ch}
.lib-sub a{color:var(--accent-ink);cursor:pointer;font-weight:700}
.lib-cta{margin:36px auto 0;max-width:520px;text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.lib-cta h3{font-size:18px;letter-spacing:-.4px;margin-bottom:16px}
.lib-cta p{font-size:13px;color:var(--muted);margin-top:14px}
.lib-cta p a{color:var(--accent-ink);cursor:pointer;font-weight:700}
.lib-search{margin:22px 0 14px;max-width:440px;font-size:14.5px}
.lib-spec{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:9px;overflow:hidden}
.lib-spec summary{cursor:pointer;padding:14px 18px;list-style:none;display:flex;align-items:center;gap:12px}
.lib-spec summary::-webkit-details-marker{display:none}
.lib-spec summary b{font-size:14.5px;letter-spacing:-.2px}
.lib-spec summary::after{content:"▾";margin-left:auto;color:var(--faint);font-size:12px;transition:transform .18s}
.lib-spec[open] summary::after{transform:rotate(180deg)}
.lib-spec[open]{border-color:var(--accent)}
.lib-rows{border-top:1px solid var(--line)}
.lib-row{display:flex;align-items:flex-start;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line);font-size:13.5px}
.lib-row:last-child{border-bottom:none}
.lib-row .lr-t{flex:1;min-width:0}
.lib-row .lr-t b{display:block;font-weight:600;letter-spacing:-.15px;line-height:1.4}
.lib-row .lr-t span{display:block;font-size:11.5px;color:var(--faint);line-height:1.45;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lib-row .lr-hrs{flex:none;font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:var(--num);margin-top:2px}
.lib-row .badge{flex:none;margin-top:2px;white-space:nowrap}
.lib-empty{color:var(--faint);font-size:14px;background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:24px;text-align:center}

/* ---- course favorites -----------------------------------------------------
   The star on library rows and the Saved courses dashboard card. Signed-in
   only; the button is quiet until saved, then takes the accent. */
.favbtn{flex:none;align-self:center;font-size:17px;line-height:1;color:var(--faint);
  padding:2px 7px;border-radius:8px;transition:color .12s,transform .12s}
.favbtn:hover{color:var(--accent-ink);transform:scale(1.15)}
.favbtn.on{color:var(--accent)}
.lib-row .favbtn{margin-top:0}
.saved-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.saved-row:last-of-type{border-bottom:none}
.saved-row .sv-t{flex:1;min-width:0}
.saved-row .sv-t b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.15px;line-height:1.4}
.saved-row .sv-link{cursor:pointer;transition:color .12s}
.saved-row .sv-link:hover{color:var(--accent-ink)}
.saved-row .sv-t span{display:block;font-size:11.5px;color:var(--faint);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-row .badge{flex:none;white-space:nowrap}

/* ---- News & updates (#/news) ----------------------------------------------
   Public posts written from the admin console. The three kind chips are the
   news-feed instance of the categorical hue system — same tokens the library
   tree uses, so a colour means the same KIND of thing everywhere on the site:
   news → sky, new course → emerald, announcement → amber. They were on
   accent/good/gold, which put the "News" chip in the same indigo as every
   button on the page; a chip is a label, not an action. */
.news-page{max-width:720px}
.news-list{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.news-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--shadow-sm)}
.news-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.pkind{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  border-radius:99px;padding:4px 11px;flex:none}
.pk-news{background:var(--hue-sky-soft);color:var(--hue-sky-ink)}
.pk-course{background:var(--hue-emerald-soft);color:var(--hue-emerald-ink)}
.pk-announce{background:var(--hue-amber-soft);color:var(--hue-amber-ink)}
.news-date{font-size:12.5px;color:var(--faint);font-variant-numeric:var(--num)}
.news-title{font-size:19px;letter-spacing:-.4px;font-weight:700;line-height:1.3;margin:0 0 8px}
.news-body p{font-size:14.5px;color:var(--content-ink);line-height:1.65;margin:0 0 12px}
.news-body p:last-child{margin-bottom:0}
@media(max-width:560px){.news-card{padding:18px 16px}}

/* ---- CA requirements ---- */
.reqs{max-width:680px;margin:0 auto;padding:6vh 24px 60px;text-align:center}
.req-rows{display:flex;flex-direction:column;gap:10px;margin-top:26px;text-align:left}
.req-row{display:flex;align-items:center;gap:18px;padding:18px 22px}
.req-lic{flex:none;width:86px;text-align:center;font-size:14px;font-weight:700;letter-spacing:-.2px;
  background:var(--accent-soft);color:var(--accent-on-soft);border-radius:10px;padding:10px 6px}
.req-row b{display:block;font-size:15.5px;letter-spacing:-.3px}
/* :not(.req-lic) because the licence chip IS a span, and this rule was
   outspecifying the .req-lic colour above it — the chip has been rendering
   --faint on --accent-soft, which measured 4.55:1 against the old faint and
   4.29:1 against the new one. It was always meant to be --accent-on-soft
   (6.9:1); the sweep just never had a reason to flag it until now. */
.req-row span:not(.req-lic){display:block;font-size:12.5px;color:var(--faint);margin-top:3px}
.req-note{margin-top:16px;font-size:13.5px;color:var(--muted);background:var(--gold-soft);border-radius:10px;padding:12px 16px;line-height:1.55}
.req-cta{margin-top:30px;display:flex;flex-direction:column;align-items:center}
.req-cta .cta{margin-top:0}
.req-cta p{font-size:13.5px;color:var(--muted);margin-top:12px}
.req-disc{margin-top:26px;font-size:11.5px;color:var(--faint)}

/* ===========================================================================
   VISUAL OVERHAUL · 2026-08-12
   Look and feel only — no new routes, no new components, no copy changes.

   The reference blend, in the order it shows up below:
     · Brilliant  — warm page, pure-white cards that lift, bigger radii,
                    diffuse shadows. Handled in the token block up top; this
                    section spends the new tokens.
     · Linear     — fluid display type from SIZE and tracking (Instrument Sans
                    ships 400–700 only, so 800 is banned everywhere), and a lot
                    more air between sections.
     · Stripe     — ONE brand gradient (--grad-brand: accent → bolt) in exactly
                    three places: the hero glow, the pricing card's top rule,
                    and a 52px flourish under centred section headings. Never
                    under text.
     · Duolingo   — Statsy, the existing tutor mascot, on the marketing page:
                    peeking past the hero product mock and again in the
                    differentiator card that is about them.
=========================================================================== */

/* ---- 1. page rhythm & display type --------------------------------------- */
/* The headline is CENTRED and holds ONE line at desktop. It now lives in a
   62%-wide panel rather than the full page, so the top of the clamp comes down
   from 58px and nowrap is asserted above 900px; below that it wraps, which is
   the right answer on a phone. 3.2vw at 1280 = 41px, and the string measures
   ~520px there against the panel's ~556px of measure. */
h1.hero{
  font-size:clamp(30px,3.05vw,39px);
  line-height:1.06;
  letter-spacing:-.034em;
  font-weight:700;              /* 800 does not exist in this family */
  max-width:none;
}
@media(min-width:901px){h1.hero{white-space:nowrap}}
.kicker{font-size:12px;letter-spacing:.15em;margin-bottom:14px}
.sub{font-size:clamp(16px,1.35vw,19px);line-height:1.6;max-width:46ch}

/* Sections breathe. 38px of padding made the page read as one long column;
   the new step is ~2.4x that at desktop and still sane on a phone. */
.home-sec{max-width:1080px;padding:clamp(44px,5.8vw,78px) 24px}
/* Both of these were narrower than .home-sec / .lib on purpose — a measure,
   not a container. Re-stated as compound selectors so the wider rules above
   cannot win on source order. */
.home-sec.faq-sec{max-width:780px}
.lib.news-page{max-width:780px}
.sec-h{
  position:relative;font-size:clamp(23px,2.9vw,34px);letter-spacing:-.028em;
  line-height:1.12;font-weight:700;padding-bottom:18px;margin-bottom:clamp(26px,3vw,40px);
}
/* GRADIENT 3 of 3 — a 52px flourish, centred under the heading. */
.sec-h::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:52px;height:3px;border-radius:99px;background:var(--grad-brand);
}
.lib-h{font-weight:700;letter-spacing:-.03em;line-height:1.1;font-size:clamp(27px,3.6vw,40px)}
.lib-sub{font-size:16px;line-height:1.6;color:var(--muted)}

/* Cards, everywhere: rounder, and lifted by the new shadow ramp. */
.card,.diff-card,.news-card,.tree-fam,.how>div,.choice,.mod,.lib-spec,.faq details,.msg-row{border-radius:var(--radius)}
.card,.diff-card,.news-card{box-shadow:var(--shadow-sm)}
.pane{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}

/* ---- 2. header ----------------------------------------------------------- */
.top{padding:14px 28px;border-bottom-color:var(--line)}
.mainnav a{transition:color .16s}
.navcta{border-radius:10px;box-shadow:var(--shadow-sm)}
.modebtn{border-radius:99px}
@media(max-width:960px){.top{padding:11px 18px}}

/* ---- 3. hero row --------------------------------------------------------
   Two columns: the panel (what this is, the three steps, one button) and the
   price. The founder's note was that the panel was cramped and that the price
   was too far down the page to answer the question it answers. Both columns
   now sit in the SAME container the stats band, the card grid and the footer
   use — max-width 1080, 24px gutters — so the whole page shares one measure.

   The two-lobe gradient wash that used to sit behind all this is deleted, not
   hidden. So is the 4px brand bar that ran across the top of the panel and of
   the pricing card. */
.hero-band{position:relative;padding:clamp(28px,4vw,56px) 0 clamp(30px,4vw,54px)}
.hero-row{
  max-width:1080px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);
  gap:22px;align-items:start;
}
/* THE HERO PANEL — the founder asked for "a rounded box, some kind of design".
   A single card the first screen sits inside: it gives the copy an edge to
   belong to. Centred text, one column, one button. */
.hero-panel{
  position:relative;z-index:1;
  padding:clamp(30px,3.6vw,46px) clamp(22px,2.8vw,36px) clamp(28px,3.2vw,40px);
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center;
}
.hero-panel .hero-bolt{width:42px;height:42px;margin-bottom:12px}
.hero-panel .hero-ctas{justify-content:center;margin-top:clamp(20px,2.4vw,28px)}
.hero-panel .hero-ctas .cta{margin-top:0}
/* The three steps read as a numbered list inside a 62% column — three side by
   side in this width put two words on each line. The number spans both rows so
   the label and its line share one left edge. */
.how-hero{margin:clamp(22px,2.6vw,32px) 0 0;max-width:none;text-align:left;
  grid-template-columns:minmax(0,1fr);gap:10px}
.how-hero>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 13px;align-items:start;padding:15px 18px}
.how-hero .hn{grid-row:1/span 2;align-self:center}

/* ---- 3b. the trust strip ------------------------------------------------
   Four claims on ONE line at desktop. They used to sit inside the panel and
   wrap to three lines; out here they have the full 1080 measure and a rule
   above them, so the row is a divider between the hero and the numbers rather
   than a fourth paragraph in the card. */
.trust-strip{
  position:relative;max-width:1080px;margin:clamp(22px,2.6vw,32px) auto 0;padding:17px 24px 0;
  display:flex;justify-content:center;align-items:baseline;flex-wrap:nowrap;
  gap:8px 22px;font-size:13px;line-height:1.5;color:var(--muted);text-align:center;
}
.trust-strip::before{
  content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:var(--line);
}
.trust-strip span{white-space:nowrap}
.trust-strip span::before{content:"✓";color:var(--accent);margin-right:6px;font-weight:700}
.cta{border-radius:12px;box-shadow:var(--shadow);font-size:16.5px;padding:15px 30px}
.cta:hover{box-shadow:var(--shadow-lg)}

/* ---- 4. Statsy on the marketing page -------------------------------------
   The mascot's one marketing appearance is the 24px helmet on the "your AI
   tutor" card, drawn on the icon grid with the other five. The full figure
   lives in the course player. .statsy-mini is kept as a portrait CROP — it is
   what any future avatar use wants: the SVG scaled up and offset so the
   helmet, not the whole robot, fills a 44px plate. */
.diff-statsy .statsy-mini{
  position:relative;display:block;width:44px;height:44px;border-radius:13px;
  background:var(--accent-soft);overflow:hidden;margin:0 0 14px;
}
.diff-statsy .statsy-mini svg{position:absolute;left:-1px;top:-2px;width:48px;height:53px;filter:none}
/* Marketing mascots hold still: no blink loop outside the course player. */
.statsy-mini .eyes{animation:none}

@media(max-width:900px){
  /* Panel first, price under it, both full width. */
  .hero-row{grid-template-columns:minmax(0,1fr);gap:18px}
  .price-card{max-width:520px;margin-left:auto;margin-right:auto}
  h1.hero{margin-left:auto;margin-right:auto;white-space:normal}
  .trust-strip{flex-wrap:wrap;gap:8px 18px}
}
@media(max-width:560px){
  .hero-band{padding:14px 0 clamp(26px,5vw,40px)}
  .hero-row{padding:0 14px}
  .hero-panel{padding:26px 20px 24px;border-radius:var(--radius)}
  /* Four claims wrapping across a narrow column produced a three-line rag.
     One per line, centred as a block, left-aligned as text. */
  .trust-strip{flex-direction:column;align-items:flex-start;gap:8px;
    max-width:none;margin-left:14px;margin-right:14px;padding-left:0;padding-right:0}
  .trust-strip::before{left:0;right:0}
  .trust-strip span{white-space:normal}
}

/* ---- 6. stats band ------------------------------------------------------- */
.statsband{margin:0;background:var(--card);box-shadow:var(--shadow-sm)}
.statsband-in{max-width:1080px;padding:clamp(30px,4vw,44px) 24px}
.statsband b{font-weight:700;letter-spacing:-.035em;font-size:clamp(30px,3.6vw,42px)}
.statsband span{letter-spacing:.1em;margin-top:6px}

/* ---- 7. differentiators & trust ------------------------------------------
   Six cards now, not three: 3 across at desktop, 2 at tablet, 1 on a phone. */
.diff-grid,.trust3{gap:18px}
.diff-6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:960px){.diff-6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.diff-6{grid-template-columns:minmax(0,1fr)}}
.diff-card{padding:26px 24px;transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s}
.diff-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line)}
/* ---- the icon family ------------------------------------------------------
   Six custom glyphs, no emoji: one 24px grid, one 1.8 stroke, round caps and
   joins, and a duotone fill at 14% of the same ink. Every glyph is drawn in
   currentColor, so the PLATE decides the hue and the drawing is re-inked six
   ways from one pair of local custom properties — the same mechanism the
   library tree's eight families use. The pair falls back to indigo, so a
   seventh card added tomorrow looks deliberate rather than unstyled. */
.diff-card{--ic-soft:var(--accent-soft);--ic-ink:var(--accent-on-soft)}
.diff-6>.diff-card:nth-child(1){--ic-soft:var(--hue-violet-soft); --ic-ink:var(--hue-violet-ink)}
.diff-6>.diff-card:nth-child(2){--ic-soft:var(--hue-sky-soft);    --ic-ink:var(--hue-sky-ink)}
.diff-6>.diff-card:nth-child(3){--ic-soft:var(--hue-teal-soft);   --ic-ink:var(--hue-teal-ink)}
.diff-6>.diff-card:nth-child(4){--ic-soft:var(--hue-amber-soft);  --ic-ink:var(--hue-amber-ink)}
.diff-6>.diff-card:nth-child(5){--ic-soft:var(--hue-rose-soft);   --ic-ink:var(--hue-rose-ink)}
.diff-6>.diff-card:nth-child(6){--ic-soft:var(--hue-emerald-soft);--ic-ink:var(--hue-emerald-ink)}
.diff-ic{
  width:44px;height:44px;border-radius:13px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ic-soft);color:var(--ic-ink);
}
.diff-ic .ic{width:24px;height:24px;display:block;overflow:visible}
.diff-card b{font-size:17px;letter-spacing:-.024em}
.diff-card p{font-size:14px;margin-top:9px}
.trust-block{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.how-home>div{padding:22px;transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s}
.how-home>div:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.how-home .hn{width:26px;height:26px;font-weight:700}
.how-home b{font-size:15px}
.how{gap:18px;max-width:none}

/* ---- 8. pricing ---------------------------------------------------------
   The card sits beside the hero panel now, so it is a column rather than a
   centred object: no max-width of its own, and no gradient bar across the top
   ("without the blue and gold bar"). It keeps id="pricing", so the nav link
   and goPricing() still land on it. */
.price-card{
  /* goPricing() scrolls this card into view from anywhere on the site; the
     header is sticky, so the card reserves its own clearance. */
  scroll-margin-top:84px;
  position:relative;overflow:hidden;max-width:none;margin:0;text-align:center;
  background:var(--card);border:1.5px solid var(--accent);
  border-radius:var(--radius-lg);padding:34px 28px 30px;box-shadow:var(--shadow-lg);
}
.pc-amount{font-size:52px;font-weight:700;letter-spacing:-.04em}
.pc-kicker{letter-spacing:.16em}
.pc-list{max-width:none}
.pc-list li{padding:9px 0}
.pc-promise{border-radius:12px}
.price-card .cta{margin-top:18px;width:100%;padding:15px 20px}

/* ---- 9. course library tree --------------------------------------------- */
.lib{max-width:1080px;padding:clamp(38px,5vw,68px) 24px 72px}
/* The library sits under a Direction E masthead that already supplies its own
   breathing room, so the page wrapper's generous top padding stacked into a
   dead band between the two. 44px is the gap; the masthead pays for the rest. */
.map-lib{padding-top:44px}
.tree{margin-top:clamp(26px,3.4vw,44px)}
.tree-root{
  border:1px solid var(--line);border-radius:99px;padding:13px 24px;box-shadow:var(--shadow);
  background:var(--card);
}
.tree-root b{font-size:15px;letter-spacing:-.02em}
.tree-stem{height:30px;background:var(--line)}
/* Desktop only: below 900px the org-chart connectors are switched off and
   .tree-cell goes to padding:0, which this rule would otherwise undo. */
@media(min-width:901px){.tree-cell{padding-top:28px}}
.tree-fam{
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 10px;gap:10px;
  box-shadow:var(--shadow-sm);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s,background .18s;
}
/* ---- the eight families, each in its own hue ------------------------------
   Every family card, its icon plate, its name, its open border, the connector
   tick it drops into the band, the band's own top rule and the pills inside it
   all read from ONE pair of local custom properties. Swapping .hue-3 for
   .hue-6 on the cell re-skins the whole branch; nothing else knows a colour.
   The pair falls back to indigo so a ninth family added tomorrow still looks
   deliberate instead of unstyled. */
.tree-cell,.tree-band,.toc-sec{--fam-soft:var(--accent-soft);--fam-ink:var(--accent-on-soft)}
.hue-0{--fam-soft:var(--hue-sky-soft);     --fam-ink:var(--hue-sky-ink)}
.hue-1{--fam-soft:var(--hue-crimson-soft); --fam-ink:var(--hue-crimson-ink)}
.hue-2{--fam-soft:var(--hue-teal-soft);    --fam-ink:var(--hue-teal-ink)}
.hue-3{--fam-soft:var(--hue-amber-soft);   --fam-ink:var(--hue-amber-ink)}
.hue-4{--fam-soft:var(--hue-violet-soft);  --fam-ink:var(--hue-violet-ink)}
.hue-5{--fam-soft:var(--hue-rose-soft);    --fam-ink:var(--hue-rose-ink)}
.hue-6{--fam-soft:var(--hue-emerald-soft); --fam-ink:var(--hue-emerald-ink)}
.hue-7{--fam-soft:var(--hue-slate-soft);   --fam-ink:var(--hue-slate-ink)}
.tree-fam:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--fam-ink)}
.tree-fam b{font-size:12.5px;color:var(--fam-ink)}
.tree-fam .fam-ic{width:36px;height:36px;font-size:17px;border-radius:11px;background:var(--fam-soft)}
/* The eight family glyphs are inline SVG now, not emoji. They draw in
   currentColor, so the tile only has to hand them the family hue and a size;
   the duotone body fill inside each icon rides along at 14% opacity. */
.fam-ic svg{width:18px;height:18px;color:var(--fam-ink)}
.tree-fam .fam-ic svg{width:19px;height:19px}
.band-kicker{display:flex;align-items:center;gap:10px}
.band-kicker .fam-ic{width:26px;height:26px;border-radius:8px}
.band-kicker .fam-ic svg{width:15px;height:15px}
/* Resting the card is white with a hue-inked name; open it fills with the
   tint and takes a 1.5px hue edge. The plate flips to --card so the icon
   still has a plane of its own once the card behind it is tinted. */
.tree-fam.on{border-color:var(--fam-ink);border-width:1.5px;background:var(--fam-soft);box-shadow:var(--shadow)}
.tree-fam.on b{color:var(--fam-ink)}
.tree-fam.on .fam-ic{background:var(--card)}
.tree-fam.on::after{background:var(--fam-ink)}
.tree-band.open{
  border:1px solid var(--line);border-top:3px solid var(--fam-ink);border-radius:var(--radius-lg);
  padding:22px 24px 24px;box-shadow:var(--shadow);margin-top:22px;
}
.band-kicker{letter-spacing:.1em;margin-bottom:14px;font-weight:700;color:var(--fam-ink)}
/* Pills wear the family's tint, not its full strength — twenty saturated
   chips would out-shout the course titles they exist to reach. */
.spill{
  font-size:12px;border-radius:99px;padding:7px 14px;background:var(--fam-soft);
  color:var(--fam-ink);border:1px solid transparent;transition:all .14s;
}
.spill:hover{border-color:var(--fam-ink);color:var(--fam-ink);transform:translateY(-1px)}
/* Restating the hover above re-ordered it past .spill.on, and a SELECTED pill
   under the cursor then took accent ink on an accent fill — 1.28:1. The
   selected state owns its own hover. */
.spill.on,.spill.on:hover{background:var(--fam-ink);border-color:var(--fam-ink);color:var(--on-hue)}
.fam-pills{gap:8px}
.sx-panel{margin-top:16px;padding-top:16px}
.sx-head{letter-spacing:.09em;font-weight:700;margin-bottom:10px}
.sx-samples li{padding:8px 0}
.lib-spec{box-shadow:var(--shadow-sm)}
.lib-cta{border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:34px}
.lib-search{border-radius:12px}

/* ---- 10. news · faq · requirements --------------------------------------- */
/* FAQ's header. Same measure as the accordion below it so the two share a
   left edge — at 1080 it started 150px to the left of its own content. */
.page-head{max-width:780px;margin:0 auto;padding:clamp(38px,5vw,72px) 24px 0}
.page-head .lib-sub{margin:12px 0 0;max-width:56ch}
.news-page,.faq-sec{margin-left:auto;margin-right:auto}
.news-card{padding:26px 28px;transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s}
.news-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.news-title{font-weight:700;font-size:20px;letter-spacing:-.028em}
.faq details{box-shadow:var(--shadow-sm);margin-bottom:10px;transition:box-shadow .18s,border-color .18s}
.faq details:hover{box-shadow:var(--shadow)}
.faq summary{padding:17px 46px 17px 20px;font-size:15px}
.faq details p{padding:0 20px 17px;font-size:14px}
.reqs{max-width:720px;padding:clamp(38px,5vw,72px) 24px 72px}
.req-row{padding:20px 24px;transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s}
.req-row:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.req-lic{border-radius:12px;font-weight:700}
.req-note{border-radius:12px;padding:14px 18px}

/* ---- 11. footer ---------------------------------------------------------- */
.foot-cols{padding:clamp(44px,5vw,64px) 24px 36px;margin-top:0;background:var(--card);border-top:1px solid var(--line)}
.foot-grid{max-width:1080px;gap:32px}
.fcol b{letter-spacing:.11em;margin-bottom:12px}
.fcol a{margin-bottom:9px;transition:color .15s}
.foot-line{max-width:1080px;margin-top:32px;padding-top:20px;line-height:1.6}

/* ---- 12. scroll reveal ---------------------------------------------------
   .r-hide is applied by JS only. With JS off, or if IntersectionObserver is
   missing, the markup is already in its final, visible state and nothing here
   ever runs. There is also a watchdog in app.js that reveals everything after
   1.4s in case an observer never fires. */
.r-hide{opacity:0;transform:translateY(11px)}
.r-hide.r-in{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.7,.3,1),transform .6s cubic-bezier(.22,.7,.3,1);
}

/* ---- 13. reduced motion --------------------------------------------------
   Everything above is decoration. Under reduce, the page is static and fully
   visible: reveals resolve immediately, the mascot stops, hovers stop moving. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    animation-delay:0ms!important;transition-duration:.001ms!important;
    transition-delay:0ms!important;scroll-behavior:auto!important;
  }
  .r-hide,.r-hide.r-in{opacity:1!important;transform:none!important;transition:none!important}
  .statsy .eyes,.statsy.listening svg,.statsy.talking .m-open,.statsy.talking .m-closed{animation:none!important}
  .diff-card:hover,.news-card:hover,.req-row:hover,.tree-fam:hover,.how-home>div:hover,
  .choice:hover,.pay-opt:hover,.spill:hover,.cta:hover,.mod.clickable:hover{transform:none!important}
}

/* ---- 14. carried-over fixes ---------------------------------------------
   Pre-existing, surfaced by shooting every view at two widths: the signed-in
   dashboard's right column is a 1fr grid track whose min-content floor is the
   plan card, so a long module title blew the page out to 2295px at a 1280px
   viewport and the whole document scrolled sideways. minmax(0,1fr) lets the
   track shrink; nothing else about the dashboard changes. */
.dash-grid{grid-template-columns:280px minmax(0,1fr)}
@media(max-width:780px){.dash-grid{grid-template-columns:minmax(0,1fr)}}

/* Course illustrations arrive at their natural size (1536px) and the content
   column is ~780 — without this they overflow the browser sideways. */
.content img{display:block;max-width:100%;height:auto;border-radius:12px;margin:16px auto}
/* ---- Statsy in the corner (course pages) --------------------------------
   The mascot moved from the course rail onto the floating tab, and he is the
   design, not an ornament: a 46px head-shot that breaks out above the pill
   (a character perched on the tab, not an icon inside it), ringed in white to
   lift him off the green. His speech bubble is pinned above the tab so the
   welcome line and quiz reactions land next to the face saying them. The
   .statsy class is kept so the existing blink/talk/listen loops target him
   unchanged; hover gives a small rise. Support mode sets textContent, which
   removes these spans, so none of this leaks onto other pages. */
.bubble{display:inline-flex;align-items:center;gap:10px;overflow:visible;padding-left:12px;height:52px;box-sizing:border-box}
.bubble .statsy{margin:0;width:46px;height:46px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 2.5px rgba(255,255,255,.9),0 5px 12px rgba(0,0,0,.28);position:relative;top:-9px;flex:none;transform:none;transition:transform .18s ease}
.bubble:hover .statsy{transform:translateY(-3px)}
.bubble .statsy svg{width:60px;height:66px;position:absolute;left:-7px;top:-3px;filter:none}
.bubble .statsy .nametag{display:none}
.bubble .fab-label{font-size:14px;font-weight:700;letter-spacing:.1px;max-width:90px;overflow:hidden;white-space:nowrap;transition:max-width .25s ease,opacity .2s ease}
/* Collapsed while reading: the pill closes around his face; hover reopens. */
.bubble.fab-mini{gap:0;padding:0 5px}
.bubble.fab-mini .fab-label{max-width:0;opacity:0}
.bubble.fab-mini:hover{gap:10px;padding:0 16px 0 10px}
.bubble.fab-mini:hover .fab-label{max-width:90px;opacity:1}
/* Phones, outside a course: the Support pill sat on top of the home page's
   requirement card in the first screen (audit, 2026-10-11). It becomes a 48px
   "?" circle there — still a full-size tap target, no longer covering text. */
.bubble .fab-q{font-weight:800;font-size:17px}
@media (max-width:560px){
  .bubble:not(:has(.statsy)){width:48px;height:48px;padding:0;gap:0;justify-content:center;border-radius:50%;right:14px;bottom:14px}
  .bubble:not(:has(.statsy)) .fab-label{display:none}
}
.st-bubble.st-fab{position:fixed;right:26px;bottom:86px;z-index:60;max-width:300px;margin:0;box-shadow:var(--shadow-lg);border-radius:12px;border-bottom-right-radius:4px}

/* ---------- legal documents: /terms, /refunds, /privacy -----------------
   Built in the same language as the rest of Direction E: a bordered card with
   a dark top rule (the .panel treatment), a small-caps contents rail beside
   it, pill tabs for the three documents, and the shared .endcta to close.

   Every selector is scoped under .eui because e.css loads after this file and
   its reset flattens the margins and padding of any bare-class rule. */

/* The lede is one sentence and should read as one. balance keeps the two
   lines even when it does wrap instead of dropping three orphan words. */
.legal-top .lede{text-wrap:balance;text-wrap:pretty}

.eui .legal-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 34px}
.eui .legal-tabs a,.eui .legal-tabs .on{font-weight:600;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  text-decoration:none;color:var(--muted);background:var(--card);transition:.15s}
.eui .legal-tabs a:hover{border-color:var(--ink);color:var(--ink)}
.eui .legal-tabs .on{background:var(--ink);border-color:var(--ink);color:var(--card)}

.eui .legal-grid{display:grid;grid-template-columns:186px minmax(0,700px);gap:40px;
  justify-content:center;align-items:start}

.eui .legal-toc{position:sticky;top:96px}
.eui .legal-toc .eyebrow{margin:0 0 14px}
.eui .legal-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.eui .legal-toc li{counter-increment:toc;margin:0 0 10px}
.eui .legal-toc a{position:relative;display:block;padding-left:22px;font-size:13px;line-height:1.38;
  color:var(--muted);text-decoration:none}
.eui .legal-toc a::before{content:counter(toc);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.eui .legal-toc a:hover{color:var(--ink)}

/* Same card as .panel — stated rather than inherited, so a change to the FAQ
   accordion's padding cannot quietly reflow a legal document. */
.eui .legal-doc{background:var(--bg-2);border:1px solid var(--line);border-top:2px solid var(--ink);
  border-radius:var(--r);padding:34px 40px}
.eui .legal-doc h2{font-family:var(--serif);font-weight:400;font-size:clamp(20px,3vw,25px);
  letter-spacing:-.01em;line-height:1.28;margin:40px 0 12px;color:var(--ink);
  scroll-margin-top:96px;padding-top:24px;border-top:1px solid var(--line)}
.eui .legal-doc > h2:first-child{margin-top:26px}
.eui .legal-doc p{margin:0 0 15px;font-size:15.5px;line-height:1.68;color:var(--content-ink)}
.eui .legal-doc ul{margin:0 0 15px;padding-left:22px}
.eui .legal-doc li{margin:0 0 9px;font-size:15.5px;line-height:1.62;color:var(--content-ink)}
.eui .legal-doc strong{font-weight:700;color:var(--ink)}
.eui .legal-doc em{font-style:italic}
.eui .legal-doc a{color:var(--accent)}
.eui .legal-doc code{font-family:var(--mono);font-size:13px;background:var(--card);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px;white-space:nowrap}

@media (max-width:920px){
  .eui .legal-grid{grid-template-columns:minmax(0,700px)}
  .eui .legal-toc{display:none}
}
@media (max-width:640px){
  .eui .legal-doc{padding:24px 20px}
  .eui .legal-doc h2{margin-top:30px;padding-top:20px}
}



/* ---------- the library as a contents page (26 Sep 2026) -------------------
   Founder chose the journal contents look, folded: eight numbered sections,
   one open at a time; specialties as entries with dot leaders (site sans, founder 26 Sep); the
   open specialty's courses as cards beneath. Search sits in the rule. */
.lib.idx{max-width:1080px;padding-top:1vh}
.toc-rule{display:flex;align-items:center;gap:18px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding:9px 0}
.toc-k,.toc-meta{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.toc-meta{flex:1}
.toc-search{display:flex;align-items:center;gap:8px;min-width:0}
.toc-search svg{width:14px;height:14px;fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round;flex:none}
.toc-search input{font:inherit;font-size:13px;width:200px;padding:5px 0;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--ink);outline:none;transition:border-color .15s}
.toc-search input:focus{border-bottom-color:var(--ink)}
.toc-search input::placeholder{color:var(--faint)}
.toc-sec{border-bottom:1px solid var(--line)}
.toc-h{display:flex;align-items:baseline;gap:14px;width:100%;padding:16px 0;text-align:left;font:inherit;background:none;border:0;color:var(--ink);cursor:pointer}
.toc-h b{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-weight:500;font-size:11px;letter-spacing:.1em;color:var(--faint)}
.toc-h .t{font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:color .15s}
.toc-h:hover .t,.toc-sec.open .toc-h .t{color:var(--fam-ink)}
.toc-sec.open .toc-h .t{font-weight:700}
.toc-h .lead,.toc-ent .lead{flex:1;border-bottom:2px dotted var(--line-2);opacity:.9;transform:translateY(-5px);min-width:24px}
/* Founder, 28 Sep: the counts were in the mono face at running-text size — 'a completely different font that doesn't appear anywhere else'. Body face now; mono stays for the 01/02 row numbers only. */
.toc-h .pg,.toc-ent .pg{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:0}
.toc-h .ch{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:11px;color:var(--faint);width:14px;text-align:right;transition:transform .2s;transform-origin:50% 50%;display:inline-block}
.toc-sec.open .toc-h .ch{transform:rotate(90deg)}
.toc-ents{columns:2;column-gap:64px;padding:0 0 18px 30px;animation:rise .2s}
.toc-ent{display:flex;align-items:baseline;gap:8px;width:100%;padding:4px 0;text-align:left;font:inherit;font-size:14.5px;font-weight:500;letter-spacing:-.1px;line-height:1.5;
  background:none;border:0;color:var(--ink);cursor:pointer;break-inside:avoid}
.toc-ent .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;transition:color .12s}
.toc-ent:hover .t,.toc-ent.on .t{color:var(--fam-ink)}
.toc-ent.on .t{font-weight:700}
.toc-crs{padding:4px 0 24px 30px;animation:rise .2s}
.toc-crs-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px;padding-top:12px;border-top:1px solid var(--line)}
.toc-crs-h b{font-size:15px;font-weight:700;letter-spacing:-.2px}
.toc-crs-h span{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:12px;color:var(--faint)}
/* course cards */
.crs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.crs-card{display:flex;flex-direction:column;gap:7px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm)}
.crs-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crs-top .lr-lic{margin-left:0!important}
.crs-hrs{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.crs-card h4{margin:0;font-size:14.5px;font-weight:600;letter-spacing:-.15px;line-height:1.35}
.crs-card p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.crs-foot{margin-top:auto;display:flex;justify-content:flex-end}
.idx-more{margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.idx-more a{color:var(--accent-ink);font-weight:700;cursor:pointer}
.lib-empty{text-align:center;color:var(--faint);padding:40px 0;font-size:14px}
@media(max-width:980px){.toc-ents{columns:2}}
@media(max-width:720px){
  .toc-rule{flex-wrap:wrap;gap:8px 14px}.toc-meta{display:none}.toc-search{width:100%;order:3}.toc-search input{width:100%}
  .toc-h{gap:10px;padding:14px 0}.toc-h .t{white-space:normal;font-size:13px;letter-spacing:.12em}.toc-h .pg{display:none}
  .toc-ents{columns:1;padding-left:22px}.toc-crs{padding-left:0}.crs-grid{grid-template-columns:1fr}
}

/* Library cards open their course; save + plan inside the course (2026-10-10). */
.crs-card.is-link{cursor:pointer;transition:border-color .12s,transform .12s,box-shadow .12s}
.crs-card.is-link:hover{border-color:var(--accent);transform:translateY(-1px)}
.crs-card.is-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.crs-acts{display:flex;flex-direction:column;gap:10px}
.crs-act-fav{display:flex;align-items:center;gap:6px}
.crs-act-fav .favbtn{font-size:20px;padding:2px 4px}
.fav-lbl{font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.crs-act-plan{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--accent);background:transparent;color:var(--accent-ink);font-weight:700;font-size:13.5px;cursor:pointer;transition:background .12s}
.crs-act-plan:hover:not(:disabled){background:var(--accent-soft)}
.crs-act-plan.on{background:var(--accent-soft)}
.crs-act-plan:disabled{cursor:default;opacity:.9}
.crs-back{display:inline-block;margin:0 0 12px;font-weight:600;cursor:pointer}