/* ============================================================
   STAT CE — DIRECTION E
   ============================================================
   The approved homepage design, ported out of
   /home/claude/mockups/direction-e.html and scoped under `.eui`.

   WHY SCOPED. Direction E and the existing app share two dozen
   class names (.btn, .wrap, .kicker, .sub, .hero, .top …) and
   they mean different things in each. Rather than rename half
   the app or ship a big-bang rewrite of the course player and
   the admin console, every rule here is prefixed `.eui`, so E
   only reaches the markup that opts in. A page is ported by
   wrapping its output in <div class="eui">; nothing else on the
   site changes shape until it does.

   Two consequences worth knowing:
     · `.eui, .eui *{margin:0;padding:0}` is a reset scoped to the
       opted-in subtree. It is why E's spacing is exact and why
       old markup dropped inside a .eui wrapper will lose its
       margins.
     · The header carries `.eui` itself rather than containing it,
       because position:sticky only works against a scrolling
       ancestor. Its rules are therefore `.eui.etop`, not
       `.eui .top`.

   Sizes below the token block are E's own; they do not read the
   app's --radius/--shadow ramp, and that is deliberate — the two
   systems are being kept separable until the port is finished.
   ============================================================ */

/* ============================================================
   DIRECTION E — EDITORIAL BENTO
   Skeleton from B: stark page, 8px rhythm, hairline borders, the
   bento grid where every card shows the product working.
   Authority from C: a system-serif display face, ruled section
   heads, the credibility definition list, eyebrow > display >
   lede > body hierarchy with rules instead of nested boxes.
   Warmth from D, dialled right back: larger radii, comfortable
   leading, the eight category hues used ONLY as icon glyphs and
   eyebrow ticks, and Statsy at a modest size in exactly one place.
   D's warm neutral did NOT survive — see the token block.
   ============================================================ */
.eui{
  /* ---- neutrals: cool, matching the rest of the site --------------------
     Direction E arrived from mockup D on a whisper-WARM axis (--bg-2 was
     #faf9f7, --line #e7e5e1). The rest of the app is cool blue-grey
     (#f5f7fb). Two different temperatures of "almost white" sitting next to
     each other is exactly the mismatch the founder caught — the homepage did
     not need blue added, its off-whites needed to stop being cream. It is
     also the same warmth he rejected once already ("I'm not feeling the warm
     color, I like it crisp white").

     So the page stays pure white — that is what makes the hero read as a
     front door rather than a dashboard — and only the TINTS rotate onto the
     cool axis: the trust strip, the footer, the icon chips, the plan board.
     --bg-2 is the app's own page colour, so a tinted band here and a page
     there are now the same grey. --line/--line-2 follow, because a warm
     hairline on a cool surface reads as dirt. */
  --bg:#ffffff; --bg-2:#f4f7fb; --panel:#ffffff;
  --ink:#101317; --ink-2:#23272e; --muted:#545a63; --faint:#61676f;
  --line:#e3e8f0; --line-2:#cdd6e3;
  /* brand */
  --accent:#4353FF; --accent-deep:#3644E0; --accent-ink:#3243D6; --accent-soft:#eff1ff;
  --bolt:#FFD400;
  /* the eight category hues — glyphs and ticks only, never fills */
  --h-crimson:#b32330; --h-teal:#0c6b6a; --h-emerald:#0a6f43; --h-amber:#875607;
  --h-violet:#6535c8;  --h-rose:#b02364; --h-sky:#12608e;    --h-slate:#3f5069;
  /* mascot */
  --bot-body:#ffffff; --bot-shade:#eceef4; --bot-line:#c7cbd6;
  --bot-dark:#1c2532; --bot-visor:#121924; --bot-glow:#f4f7fc;
  /* type */
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* rhythm + shape */
  --u:8px; --maxw:1140px;
  --r:16px; --r-sm:10px; --r-xs:8px; --r-lg:20px;
  /* The shadow tint follows the surfaces onto the cool axis. A warm shadow
     on a cool page reads as dirt rather than as depth. */
  --sh-sm:0 1px 2px rgba(19,28,48,.05),0 4px 12px -6px rgba(19,28,48,.08);
  --sh:0 2px 4px rgba(19,28,48,.05),0 16px 34px -18px rgba(19,28,48,.18);
  /* Ink that sits ON a filled brand surface (a solid button, a checked tick,
     the open chevron). White in light mode; in midnight every brand colour is
     lifted so it reads as TEXT on a near-black page, which makes white on top
     of it illegible — so the fill case flips to near-black there. */
  --on-fill:#ffffff;
}
/* ---------- collision shield ----------------------------------------------
   Scoping E under `.eui` stops E leaking OUT. This stops the app leaking IN.

   Two dozen class names mean different things in the two systems — .chat is a
   fixed 250px support-widget scroller in styles.css and a card illustration
   here; .ring is a 168px progress dial there and a decorative circle here.
   E's own rules outrank styles.css on the properties E happens to set, but
   every property it does NOT set still arrives from the old rule. That is how
   the Statsy card first shipped 250px tall with its speech bubble parked in
   the trust strip.

   `all:revert` rolls the whole property set back to the browser default for
   these class names inside .eui, discarding the app's author styles. It sits
   BEFORE E's rules at equal specificity, so anything E declares still wins and
   only the leftovers are cleared. `revert` rather than `unset` on purpose:
   unset would flatten <div> to display:inline and drop <em>'s italic, because
   it discards the user-agent sheet too.

   Add a name here when a new collision appears — `grep` both stylesheets for
   the class before inventing markup that uses it. */
.eui .ai, .eui .badge, .eui .bot, .eui .btn, .eui .bubble, .eui .ce,
.eui .chat, .eui .dot, .eui .hero, .eui .hot, .eui .ic, .eui .kicker,
.eui .lbl, .eui .num, .eui .on, .eui .q, .eui .right, .eui .ring,
.eui .stat, .eui .sub, .eui .t, .eui .wrap{all:revert;
  /* `all:revert` also reverts the base reset below, which is a lower
     specificity rule and so cannot win it back — that is how .wrap ended up
     content-box and 56px too wide. Re-state the reset here; E's own rules come
     later at equal specificity and still override each of these. */
  box-sizing:border-box;margin:0;padding:0;
  /* Same trap for links: reverting to the UA sheet puts the underline back on
     every <a class="btn">, and `.eui a{text-decoration:none}` is a specificity
     step below this rule so it cannot take it off again. None of the shielded
     names is ever meant to be underlined. */
  text-decoration:none}

.eui, .eui *{box-sizing:border-box;margin:0;padding:0}
.eui{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
.eui{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;line-height:1.66;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
.eui .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eui a{color:inherit;text-decoration:none}
.eui img, .eui svg{display:block}
.eui ::selection{background:#dfe3ff;color:var(--ink)}
.eui :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* ---------- display face: serif for headlines only ---------- */ .eui .disp{font-family:var(--serif);font-weight:400;font-style:normal;
  letter-spacing:-.014em;line-height:1.06;color:var(--ink)}
/* numerals never come from the serif — it ships old-style figures */ .eui .n{font-family:var(--sans);font-weight:400;font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.028em;font-size:.95em}
/* ---------- micro-eyebrow ---------- */ .eui .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;
  font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--faint);line-height:1.4}
.eui .eyebrow i{width:5px;height:5px;border-radius:1.5px;display:block;flex:none;background:var(--h-slate);
  transform:rotate(45deg)}
.eui .eyebrow i.t-violet{background:var(--h-violet)}
.eui .eyebrow i.t-emerald{background:var(--h-emerald)}
.eui .eyebrow i.t-sky{background:var(--h-sky)}
.eui .eyebrow i.t-amber{background:var(--h-amber)}
/* The mockup only ever needed four of the eight ticks; the inner routes use
   the rest, one hue per page, so a reader can tell where they are by colour
   the way the home page's sections do. */
.eui .eyebrow i.t-rose{background:var(--h-rose)}
.eui .eyebrow i.t-teal{background:var(--h-teal)}
.eui .eyebrow i.t-crimson{background:var(--h-crimson)}
.eui .eyebrow i.t-slate{background:var(--h-slate)}
.eui .lede{font-size:18.5px;line-height:1.58;color:var(--muted)}
.eui .link{color:var(--accent-ink);font-weight:500;border-bottom:1px solid rgba(50,67,214,.34);
  transition:border-color .15s,color .15s}
.eui .link:hover{border-color:var(--accent-ink);color:#242fa8}
/* ---------- wordmark ---------- */ .eui .wm{display:inline-flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
/* Badge mark (2026-09-08): bolt sits on an ink rounded square; fill reads --bg so the
   badge inverts cleanly in midnight (light badge, dark bolt). One ink, no drop-shadow. */
.eui .wm svg{width:1.5em;height:1.5em;padding:.32em;box-sizing:border-box;border-radius:.4em;background:var(--ink);fill:var(--bg);flex:none}
.eui .wm .w{white-space:nowrap}
.eui .wm em{font-style:italic;font-weight:600}
.eui .wm .ce{color:var(--ink);font-style:normal;font-weight:500;margin-left:.06em}
.eui .wm .ai{font-style:normal;font-weight:600;color:var(--faint)}
/* ---------- nav ---------- */ .eui.etop{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.eui.etop .wrap{display:flex;align-items:center;gap:24px;height:66px}
.eui.etop .wm{font-size:18px}
.eui .nav{display:flex;align-items:center;gap:20px;margin-left:18px;flex:1}
.eui .nav a{font-size:13.5px;color:var(--muted);font-weight:500;position:relative;transition:color .15s}
.eui .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.eui .nav a:hover{color:var(--ink)}
.eui .nav a:hover::after{transform:scaleX(1)}
.eui.etop .right{display:flex;align-items:center;gap:16px;margin-left:auto}
.eui.etop .right>a:not(.btn){font-size:13.5px;color:var(--muted);font-weight:500;transition:color .15s}
.eui.etop .right>a:not(.btn):hover{color:var(--ink)}
/* ---------- buttons ---------- */ .eui .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
  font-size:14px;font-weight:600;letter-spacing:-.012em;cursor:pointer;border-radius:var(--r-sm);
  border:1px solid transparent;padding:10px 17px;transition:background .16s ease,border-color .16s ease,
  transform .16s ease,box-shadow .16s ease;white-space:nowrap}
.eui .btn-p{background:var(--ink);color:var(--on-fill);border-color:var(--ink)}
.eui .btn-p:hover{background:#2b3038;transform:translateY(-1px);box-shadow:var(--sh-sm)}
.eui .btn-a{background:var(--accent);color:var(--on-fill);border-color:var(--accent);box-shadow:0 1px 2px rgba(43,54,168,.24)}
.eui .btn-a:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translateY(-1px);
  box-shadow:0 6px 18px -8px rgba(54,68,224,.7)}
.eui .btn-a:active{transform:translateY(0)}
.eui .btn-g{background:var(--panel);color:var(--ink);border-color:var(--line-2)}
.eui .btn-g:hover{border-color:#aab4c4;background:var(--bg-2);transform:translateY(-1px)}
.eui .btn-lg{font-size:15.5px;padding:14px 26px;border-radius:12px}
/* ---------- hero ---------- */ .eui .hero{padding:92px 0 0;text-align:center;position:relative}
/* Founder, 26 Sep 2026: the blueprint grid is gone ("reads as a template");
   the hero sits on plain page white. */
.eui .hero>.wrap{position:relative}
.eui .kicker{background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:7px 15px}
.eui .kicker i{width:5px;height:5px;border-radius:50%;background:var(--accent);transform:none;
  box-shadow:0 0 0 3px var(--accent-soft)}
.eui h1.disp{margin:26px auto 0;max-width:none;font-size:clamp(26px,6.4vw,78px);line-height:1.02}
.eui h1.disp .two{font-style:italic}
.eui .hero .lede{margin:26px auto 0;max-width:none;line-height:1.42}
.eui .hero .lede span{display:block}
@media(max-width:560px){
  .eui .hero .lede{line-height:1.5}
}
.eui .hero-cta{margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
.eui .hero-cta .note{font-size:13.5px;color:var(--faint)}
/* steps — three flush panels on hairlines */ .eui .steps{margin:68px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:left;background:var(--panel)}
.eui .step{padding:26px 24px;border-right:1px solid var(--line);transition:background .16s}
.eui .step:last-child{border-right:0}
.eui .step:hover{background:var(--bg-2)}
.eui .step .num{width:26px;height:26px;border-radius:var(--r-xs);background:var(--ink);color:var(--on-fill);
  display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;font-weight:500}
.eui .step b{display:block;margin:15px 0 6px;font-size:17px;font-weight:600;letter-spacing:-.024em}
.eui .step p{font-size:14px;color:var(--faint);line-height:1.6}
.eui em.stat{font-style:italic;font-weight:600;color:var(--ink)}
/* ---------- trust strip ---------- */ .eui .trustrow{margin-top:72px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2)}
.eui .trustrow .wrap{display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center;
  padding-top:17px;padding-bottom:17px}
.eui .trustrow span{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);white-space:nowrap}
.eui .trustrow svg{width:13px;height:13px;flex:none;stroke:var(--h-emerald);fill:none;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}
/* ---------- sections + the recurring ruled head ---------- */ .eui section.blk{padding:92px 0}
.eui .sec-head{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:baseline;
  border-top:1px solid var(--ink);padding-top:22px}
.eui .sec-head h2.disp{font-size:clamp(28px,4.2vw,46px);max-width:none}
.eui .sec-head .sub{margin-top:14px;font-size:16.5px;color:var(--muted);max-width:56ch}
/* centered variant — eyebrow stacks above the heading, sub runs full width */ .eui .sec-head.ctr{grid-template-columns:1fr;gap:0;text-align:center;justify-items:center}
.eui .sec-head.ctr .eyebrow{margin-bottom:16px}
.eui .sec-head.ctr .sub{max-width:none;white-space:nowrap}
@media(max-width:860px){
  .eui .sec-head.ctr .sub{white-space:normal;max-width:56ch}
}
/* rule + eyebrow only — used where the heading sits inside the grid below */ .eui .sec-rule{border-top:1px solid var(--ink);padding-top:22px}
.eui .sec-rule.ctr{text-align:center}
/* ---------- stats as ruled figures ---------- */ .eui .figs{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.eui .fig{padding:26px 24px 0 0;border-right:1px solid var(--line);margin-right:24px}
.eui .fig:last-child{border-right:0;margin-right:0;padding-right:0}
.eui .fig b{display:block;font-size:clamp(34px,4.6vw,52px);font-weight:600;line-height:1;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums lining-nums}
.eui .fig span{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
/* ---------- BENTO — B's spine, kept whole ---------- */ .eui .bento{margin-top:44px;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
/* closed, the cards stretch to a crisp shared height; the moment one is
   expanded the grid stops stretching so no neighbour inflates with white */ .eui .bento:has(.cell[open]){align-items:start}
.eui .cell{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:0;
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.eui .cell:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.eui .cell[open]{border-color:var(--line-2);box-shadow:var(--sh-sm);transform:none}
.eui .cell[open]:hover{transform:none}
/* the whole card is the trigger */ .eui .cell>summary{display:flex;flex-direction:column;flex:1;padding:26px;cursor:pointer;
  list-style:none;-webkit-tap-highlight-color:transparent}
.eui .cell>summary::-webkit-details-marker{display:none}
.eui .cell>summary::marker{content:""}
.eui .cell>summary:focus{outline:none}
.eui .cell>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:var(--r)}
/* affordance: a chevron mirroring the icon square, top-right */ .eui .chev{position:absolute;top:26px;right:26px;width:34px;height:34px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);display:grid;place-items:center;z-index:2;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background .16s ease,border-color .16s ease}
.eui .chev svg{width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .16s ease}
.eui .cell:hover .chev{border-color:var(--line-2);background:var(--bg-2)}
.eui .cell:hover .chev svg{stroke:var(--ink)}
.eui .cell[open] .chev{transform:rotate(180deg);background:var(--ink);border-color:var(--ink)}
.eui .cell[open] .chev svg{stroke:var(--on-fill)}
/* the detail panel */ .eui .more{padding:0 26px 26px}
.eui .more p{max-width:70ch;padding-top:18px;border-top:1px solid var(--line);
  font-size:14.4px;line-height:1.75;color:var(--muted)}
.eui .more p em.stat{color:var(--ink)}
/* a detail written as lines becomes a list (founder, 27 Sep: "bullet the
   drop downs instead of one big paragraph") */
.eui .more ul{max-width:70ch;margin:0;padding:18px 0 0 0;border-top:1px solid var(--line);list-style:none;
  font-size:14.4px;line-height:1.6;color:var(--muted)}
.eui .more li{position:relative;padding-left:18px;margin:0 0 8px}
.eui .more li:last-child{margin-bottom:0}
.eui .more li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* animated height where the browser supports it; plain toggle elsewhere */
@supports (interpolate-size:allow-keywords){
  .eui{interpolate-size:allow-keywords}
  .eui .cell::details-content{block-size:0;overflow:hidden;content-visibility:hidden;
    transition:block-size .34s cubic-bezier(.2,.7,.3,1),content-visibility .34s allow-discrete}
  .eui .cell[open]::details-content{block-size:auto;content-visibility:visible}
}
@keyframes accIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.eui .cell[open] .more{animation:accIn .34s cubic-bezier(.2,.7,.3,1) both}
.eui .cell .ic{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--bg-2);display:grid;place-items:center;margin-bottom:16px}
.eui .cell .ic svg{width:17px;height:17px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.eui .cell h3{font-size:17px;font-weight:600;letter-spacing:-.024em;padding-right:44px}
.eui .cell p{margin-top:7px;font-size:14.2px;color:var(--faint);line-height:1.6;max-width:46ch}
/* visuals sit under the copy rather than pinned to the card floor, so an
   expanded neighbour leaves trailing space instead of a hole in the middle */ .eui .cell .viz{margin-top:0;padding-top:26px}
/* the three lower cards carry flat illustrations (Higgsfield, 27 Sep 2026):
   tonal blues around the site indigo, no other hue. Each is a 720x300 WebP on
   white; in midnight the white sits in a soft rounded plate so it reads as a
   card of paper rather than a hole in the dark. */
.eui .cell .viz.art{padding-top:18px}
.eui .cell .viz.art img{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;border-radius:12px;mix-blend-mode:multiply}
html[data-theme="midnight"] .eui .cell .viz.art img{mix-blend-mode:normal;background:#fff;padding:6px;box-shadow:0 0 0 1px var(--line)}
/* the plan board fills the tall cell instead of leaving a white gap, but is
   capped so an expanded sibling can't stretch its rows out of proportion */ .eui .b1 .viz{margin-top:22px;padding-top:0;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.eui .b1 .board{flex:1 1 auto;max-height:330px;display:flex;flex-direction:column}
.eui .b1 .pr{flex:1 1 auto;min-height:44px}
/* the eight hues, as glyph strokes only */ .eui .b1 .ic svg{stroke:var(--h-violet)}
.eui .b2 .ic svg{stroke:var(--h-teal)}
.eui .b3 .ic svg{stroke:var(--h-rose)}
.eui .b4 .ic svg{stroke:var(--h-sky)}
.eui .b5 .ic svg{stroke:var(--h-emerald)}
.eui .b6 .ic svg{stroke:var(--h-amber)}
.eui .b1{grid-column:span 3;grid-row:span 2}
.eui .b2{grid-column:span 3}
.eui .b3{grid-column:span 3}
.eui .b4{grid-column:span 2}
.eui .b5{grid-column:span 2}
.eui .b6{grid-column:span 2}
/* viz: the plan board */ .eui .board{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2)}
.eui .board .bh{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.eui .board .bh .dot{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.eui .board .bh .ttl{margin-left:6px;font-family:var(--mono);font-size:11px;color:var(--faint)}
.eui .board .bh .badge{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--accent-ink);
  background:var(--accent-soft);border-radius:5px;padding:3px 8px}
.eui .pr{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.eui .pr:last-child{border-bottom:0}
.eui .pr .tick{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line-2);flex:none;
  display:grid;place-items:center;background:var(--panel)}
.eui .pr.on .tick{background:var(--accent);border-color:var(--accent)}
.eui .pr.on .tick svg{width:9px;height:9px;stroke:var(--on-fill);fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.eui .pr .t{font-size:13.2px;color:var(--ink-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eui .pr .h{font-family:var(--mono);font-size:11px;color:var(--faint);flex:none}
.eui .progbar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:16px}
.eui .progbar i{display:block;height:100%;width:62%;background:var(--accent);border-radius:3px}
.eui .progmeta{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--faint)}
/* viz: Statsy — the one appearance, friendly but modest */ .eui .chat{display:flex;gap:14px;align-items:flex-end}
.eui .bot{width:82px;height:auto;flex:none;filter:drop-shadow(0 10px 18px rgba(24,30,48,.13))}
.eui .bubble{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:5px;
  padding:14px 16px;font-size:13.2px;color:var(--ink-2);line-height:1.6}
.eui .bubble b{font-weight:600}
/* viz: waveform + the read / listen / STAT Track control */ .eui .wave{display:flex;align-items:flex-end;gap:3px;height:46px}
.eui .wave i{flex:1;min-width:3px;background:var(--ink);border-radius:2px;display:block;opacity:.8}
.eui .wave i.q{background:var(--accent);opacity:1}
/* The waveform moves. Each bar breathes around its own inline height —
   scaleY from the bottom, so the baseline never shifts — on five interleaved
   timings, which is enough variety that the loop reads as sound rather than
   as a repeating pattern. The negative delays start the loop mid-motion
   instead of with every bar rising in unison on page load. overflow:hidden
   lets the tallest bars peak against the ceiling instead of poking out of
   the card. Static for anyone whose OS asks for reduced motion. */
@media (prefers-reduced-motion: no-preference){
  .eui .wave{overflow:hidden}
  .eui .wave i{transform-origin:bottom;animation:eq-bob 1.9s ease-in-out infinite alternate}
  .eui .wave i:nth-child(5n+1){animation-duration:1.7s;animation-delay:-.3s}
  .eui .wave i:nth-child(5n+2){animation-duration:2.3s;animation-delay:-1.1s}
  .eui .wave i:nth-child(5n+3){animation-duration:1.5s;animation-delay:-.7s}
  .eui .wave i:nth-child(5n+4){animation-duration:2.1s;animation-delay:-1.6s}
  .eui .wave i:nth-child(5n+5){animation-duration:1.8s;animation-delay:-.15s}
  /* Statsy lives a little: a blink every few seconds, and every few seconds he
     raises his arm and waves hello — the right arm is grouped as .arm-r in the markup so the
     mitt travels with the upper arm. Pivot sits at the top of that group,
     under the torso edge, so the joint stays covered while it swings. Both
     sit inside this reduced-motion guard with the waveform. */
  .eui .bot .eyes{transform-box:fill-box;transform-origin:50% 50%;animation:bot-blink 4.6s infinite}
  .eui .bot{overflow:visible} /* the raised mitt swings just past the viewBox edge mid-wave */
  .eui .bot .arm-r{transform-box:fill-box;transform-origin:50% 8%;animation:bot-wave 7.5s ease-in-out infinite}
}
@keyframes eq-bob{from{transform:scaleY(.45)}to{transform:scaleY(1.08)}}
@keyframes bot-blink{0%,92.5%,100%{transform:scaleY(1)}94.5%,96.5%{transform:scaleY(.12)}}
/* A hello, not a twitch: the arm rises to beside the head (-160deg from the
   shoulder), waves side to side three times at the top, and comes back down.
   Most of the cycle is rest, so it greets rather than nags. */
@keyframes bot-wave{
  0%, 52%, 100% { transform: rotate(0); }
  60%           { transform: rotate(-160deg); }
  66%           { transform: rotate(-132deg); }
  72%           { transform: rotate(-168deg); }
  78%           { transform: rotate(-132deg); }
  84%           { transform: rotate(-160deg); }
  92%           { transform: rotate(0); }
}
.eui .modes{display:flex;gap:7px;margin-top:16px;flex-wrap:wrap}
.eui .chip{font-size:11.5px;font-weight:500;border:1px solid var(--line-2);border-radius:7px;padding:5px 11px;
  color:var(--muted);background:var(--panel);transition:border-color .15s,color .15s}
.eui .chip.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
/* viz: progress ring */ .eui .ringrow{display:flex;align-items:center;gap:18px}
.eui .ring{width:70px;height:70px;flex:none}
.eui .ring .bgc{stroke:var(--line)}
.eui .ring .fg{stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.eui .ringtxt b{display:block;font-size:19.5px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.eui .ringtxt span{font-size:11px;color:var(--faint);font-family:var(--mono);letter-spacing:.04em}
/* viz: certificate stack */ .eui .certstack{position:relative;height:84px}
.eui .cc{position:absolute;width:134px;height:80px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--panel);padding:11px 12px;box-shadow:0 2px 6px -3px rgba(19,28,48,.2)}
.eui .cc:nth-child(1){left:0;top:4px;transform:rotate(-4deg)}
.eui .cc:nth-child(2){left:26px;top:2px;transform:rotate(2deg)}
.eui .cc:nth-child(3){left:54px;top:0;transform:rotate(7deg);border-color:var(--accent)}
.eui .cc .seal{width:14px;height:14px;border-radius:50%;background:var(--bolt)}
.eui .cc .l{height:4px;border-radius:2px;background:var(--line);margin-top:9px}
.eui .cc .l.s{width:54%}
.eui .cc .l.m{width:80%}
/* viz: specialty chips */ .eui .specs{display:flex;flex-wrap:wrap;gap:7px}
.eui .specs span{font-size:11.5px;color:var(--muted);border:1px solid var(--line-2);border-radius:7px;
  padding:5px 10px;background:var(--panel)}
.eui .specs span.hot{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)}
/* ---------- pricing ---------- */ .eui .pricegrid{margin-top:48px;display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}
.eui .pnum{display:flex;align-items:baseline;gap:11px;margin-top:6px}
.eui .pnum b{font-size:clamp(58px,9vw,92px);font-weight:600;letter-spacing:-.055em;line-height:.9;
  font-variant-numeric:tabular-nums lining-nums}
.eui .pnum span{font-size:16px;color:var(--faint);font-family:var(--mono)}
.eui .pricegrid .disp.p-sub{margin-top:20px;font-size:clamp(27px,3.4vw,36px)}
/* the section heading now sits directly above the plan card */ .eui .pricegrid .p-head{font-size:clamp(28px,4.2vw,46px);max-width:none;margin:0 0 22px;text-align:center}
.eui .sec-rule+.pricegrid{margin-top:26px}
.eui .promise{margin-top:26px;padding-left:18px;border-left:2px solid var(--bolt);
  font-family:var(--serif);font-style:italic;font-size:19.5px;line-height:1.45;color:var(--ink-2);max-width:36ch}
.eui .pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:9px;box-shadow:var(--sh-sm)}
.eui .plist{list-style:none}
.eui .plist li{padding:15px 17px;display:flex;align-items:center;gap:13px;font-size:15px;
  border-bottom:1px solid var(--line)}
.eui .plist li:last-child{border-bottom:0}
.eui .plist svg{width:15px;height:15px;flex:none;stroke:var(--accent-ink);fill:none;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}
.eui .pcard .btn{margin:9px;width:calc(100% - 18px)}
/* ---------- credibility — C's ruled definition list ---------- */ .eui .creds{margin-top:48px;border-top:1px solid var(--line)}
.eui .cred{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:30px 0;border-bottom:1px solid var(--line);
  transition:background .16s}
.eui .cred:hover{background:var(--bg-2)}
.eui .cred h3{font-size:19px;font-weight:600;letter-spacing:-.024em}
.eui .cred .lbl{margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint)}
.eui .cred p{font-size:15.5px;color:var(--muted);line-height:1.72;max-width:64ch}
.eui .pending{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:#6d5200;background:#fdf6dd;
  border:1px solid #ead9a0;border-radius:5px;padding:5px 11px}
.eui .pending i{width:5px;height:5px;border-radius:50%;background:#a37c00;display:block;flex:none}
/* ---------- closing ---------- */ .eui .finale{padding:104px 0;text-align:center;border-top:1px solid var(--line);position:relative;overflow:hidden}
/* the hero's graph paper, mirrored — it rises out of the bottom edge instead
   of falling from the top, so the page opens and closes on the same motif. */ .eui .finale::before{content:"";position:absolute;inset:auto 0 0;height:440px;pointer-events:none;
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:64px 64px;background-position:bottom left;opacity:.75;
  mask-image:radial-gradient(ellipse 66% 100% at 50% 100%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 66% 100% at 50% 100%,#000,transparent 72%)}
.eui .finale>.wrap{position:relative}
.eui .finale .disp{font-size:clamp(28px,4.4vw,48px);max-width:none;margin:0 auto}
.eui .finale p{margin-top:16px;font-size:16.5px;color:var(--muted)}
.eui .finale .hero-cta{margin-top:30px}
/* ---------- footer ---------- */ .eui footer{border-top:1px solid var(--line);padding:58px 0 34px;background:var(--bg-2)}
.eui .fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px}
.eui .fgrid h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);margin-bottom:15px;font-weight:500}
.eui .fgrid ul{list-style:none;display:grid;gap:10px}
.eui .fgrid a{font-size:13.8px;color:var(--muted);transition:color .15s}
.eui .fgrid a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.eui .fbrand p{margin-top:14px;font-size:13.5px;color:var(--faint);max-width:31ch;line-height:1.65}
.eui .fline{margin-top:42px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;
  color:var(--faint);line-height:1.75}
/* ---------- scroll reveal (content visible without JS) ---------- */ .eui .rv{opacity:1;transform:none}
.eui .js .rv{opacity:0;transform:translateY(12px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.eui .js .rv.in{opacity:1;transform:none}
.eui .stg>.rv:nth-child(1){transition-delay:0s}
.eui .stg>.rv:nth-child(2){transition-delay:.07s}
.eui .stg>.rv:nth-child(3){transition-delay:.14s}
.eui .stg>.rv:nth-child(4){transition-delay:.21s}
.eui .stg>.rv:nth-child(5){transition-delay:.28s}
.eui .stg>.rv:nth-child(6){transition-delay:.35s}
@media (prefers-reduced-motion:reduce){
  .eui{scroll-behavior:auto}
  .eui .js .rv{opacity:1!important;transform:none!important;transition:none!important}
  .eui .btn:hover, .eui .cell:hover{transform:none!important}
  .eui .chev{transition:none!important}
  .eui .cell::details-content, .eui .cell[open]::details-content{transition:none!important}
  .eui .cell[open] .more{animation:none!important}
}
/* ---------- responsive ---------- */
@media(max-width:1100px){
  .eui .nav{display:none}
  .eui .pricegrid{grid-template-columns:1fr;gap:40px}
  .eui .sec-head{grid-template-columns:1fr;gap:0}
  .eui .sec-head .eyebrow{margin-bottom:14px}
  .eui .cred{grid-template-columns:1fr;gap:10px}
  .eui .cred p{max-width:none}
}
@media(max-width:900px){
  .eui .bento{grid-template-columns:repeat(2,1fr)}
  .eui .b1, .eui .b2, .eui .b3, .eui .b4, .eui .b5, .eui .b6{grid-column:span 2;grid-row:auto}
  .eui .figs{grid-template-columns:1fr 1fr}
  .eui .fig{padding-bottom:24px;border-bottom:1px solid var(--line)}
  .eui .fig:nth-child(2n){border-right:0;margin-right:0;padding-right:0}
  .eui .fig:nth-child(n+3){padding-bottom:0;border-bottom:0}
  .eui .steps{grid-template-columns:1fr}
  .eui .step{border-right:0;border-bottom:1px solid var(--line)}
  .eui .step:last-child{border-bottom:0}
  .eui .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .eui .wrap{padding:0 18px}
  .eui{font-size:16px}
  .eui.etop .wrap{height:60px;gap:12px}
  .eui.etop .right>a:not(.btn){display:none}
  .eui .hero{padding:54px 0 0}
  .eui .hero::before{height:340px;background-size:48px 48px}
  .eui section.blk{padding:60px 0}
  .eui .finale{padding:74px 0}
  .eui .steps{margin-top:48px}
  .eui .trustrow{margin-top:52px}
  .eui .hero-cta{flex-direction:column;align-items:stretch}
  .eui .hero-cta .btn{width:100%}
  .eui .hero-cta .note{text-align:center}
  .eui .trustrow .wrap{flex-direction:column;align-items:flex-start;gap:10px}
  .eui .trustrow span{white-space:normal}
  .eui .figs{margin-top:36px}
  .eui .bento{margin-top:36px;gap:14px}
  .eui .creds{margin-top:36px}
  .eui .pricegrid{margin-top:36px}
  .eui .cell>summary{padding:22px}
  .eui .more{padding:0 22px 22px}
  .eui .chev{top:22px;right:22px;width:30px;height:30px}
  .eui .cell h3{padding-right:38px}
}
@media(max-width:480px){
  .eui .fgrid{grid-template-columns:1fr}
  .eui .fig{padding-right:16px;margin-right:16px}
  .eui .fig b{font-size:36px}
  .eui .fig span{font-size:10px;letter-spacing:.1em}
  .eui .pnum b{font-size:60px}
  .eui .chat{flex-direction:column;align-items:flex-start;gap:10px}
  .eui .bubble{border-bottom-left-radius:14px}
  .eui .certstack{height:96px}
  .eui .cc{width:118px;height:74px}
  .eui .cc:nth-child(2){left:22px}
  .eui .cc:nth-child(3){left:46px}
  .eui .promise{font-size:18px}
}


/* ---------- header, reduced ------------------------------------------------
   Founder: "reduce the Header size a little so it flows better with the page."
   The mockup's bar was 66px, sized for a page whose hero starts 92px below it.
   In the live app the header is the first thing on every route, including the
   short ones, where 66px read as a slab. 56px is the smallest height that
   still clears the 34px CTA button with real padding, and it lets the wordmark
   and nav come down a notch with it. */
.eui.etop .wrap{height:56px}
.eui.etop .wm{font-size:17px}
.eui.etop .nav{gap:18px}
.eui.etop .nav a{font-size:13px}
.eui.etop .btn{padding:8px 15px;font-size:13.5px}
@media(max-width:640px){.eui.etop .wrap{height:52px}}

/* The app's two utility chips (theme toggle, DEMO/ADMIN pill) are not part of
   the mockup. They stay — they earn their place during the demo — but they are
   dialled down to the weight of a nav link so they read as chrome, not UI. */
.eui.etop .util{background:none;border:1px solid var(--line);border-radius:100px;
  padding:5px 11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);cursor:pointer;transition:border-color .15s,color .15s}
.eui.etop .util:hover{border-color:var(--line-2);color:var(--ink)}
/* The chips hide below 1100px alongside the inline nav — see the mobile
   menu block, which does it by id so the menu's own .util summary is not
   caught by the same rule. */

/* ---------- contact --------------------------------------------------------
   Form left, context right. The aside is not filler: every block on it is an
   attempt to answer the question before it is asked, or to make the answer
   better when it is. */
.eui .cgrid{margin-top:40px;display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:start}
.eui .cform{display:flex;flex-direction:column;gap:18px}
.eui .cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.eui .cform label{display:flex;flex-direction:column;gap:8px;font-size:13.5px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink)}
.eui .cform label>span{display:flex;align-items:baseline;gap:6px}
.eui .cform label em{font-style:normal;font-weight:400;color:var(--faint)}
.eui .cform input, .eui .cform select, .eui .cform textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px 14px;
  transition:border-color .15s,box-shadow .15s;width:100%}
.eui .cform textarea{resize:vertical;min-height:150px;line-height:1.6}
.eui .cform input:focus, .eui .cform select:focus, .eui .cform textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* Off-screen, not display:none — some bots skip anything unrendered. */
.eui .cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.eui .crow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.eui .crow .note{font-size:13px;color:var(--faint);max-width:38ch}
.eui .crow .note.bad{color:var(--h-crimson);font-weight:500}
.eui .cform button[disabled]{opacity:.6;cursor:default}

.eui .caside{display:flex;flex-direction:column;gap:2px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.eui .cblock{padding:22px;border-bottom:1px solid var(--line)}
.eui .cblock:last-child{border-bottom:0}
.eui .cblock p{margin-top:10px;font-size:14px;line-height:1.65;color:var(--muted)}
.eui .cblock .link{cursor:pointer}

/* Sent state. Replaces the form outright — a toast disappears and leaves the
   sender looking at a filled-in form, unsure whether to press send again. */
.eui .csent{grid-column:1 / -1;max-width:560px;margin:20px auto 40px;text-align:center}
.eui .csent .ctick{width:52px;height:52px;margin:0 auto;border-radius:50%;
  background:var(--h-emerald);color:var(--on-fill);display:grid;place-items:center}
.eui .csent .ctick svg{width:24px;height:24px}
.eui .csent .disp{margin-top:22px;font-size:clamp(26px,3.2vw,34px)}
.eui .csent p{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--muted)}
.eui .csent .btn{margin-top:26px}
@media(max-width:900px){
  .eui .cgrid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:560px){
  .eui .cform .row2{grid-template-columns:1fr}
}

/* ---------- social row ----------------------------------------------------- */
.eui .social{display:flex;gap:10px;margin-top:20px}
.eui .social a{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);background:var(--panel);
  transition:color .15s,border-color .15s,transform .15s,background .15s}
.eui .social a:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-1px)}
.eui .social svg{width:16px;height:16px}
/* Not yet live. Still reachable and still says what it is — it just does not
   pretend to be a working link. */
.eui .social a.soon{cursor:default;opacity:.55}
.eui .social a.soon:hover{transform:none;color:var(--muted);border-color:var(--line)}

/* ---------- the page itself, on E routes -----------------------------------
   Set by router() via body.e-page. The four public inner routes now match the
   home page: white page, blue-grey tints, and the library tree's white cards
   reading off it exactly the way the bento cards do. Midnight is unchanged —
   E's midnight page and the app's are already the same near-black. */
body.e-page{background:#ffffff}
[data-theme="midnight"] body.e-page{background:#0a0e14}

/* ---------- pricing anchor -------------------------------------------------
   goPricing() scrolls #pricing into view, but the header is sticky, so the
   section's own top — the rule and the PRICING eyebrow — landed underneath it
   and the founder arrived at "Everything included." with no idea what section
   he was in. 96px clears the 56px bar with room to read the eyebrow. */
.eui #pricing{scroll-margin-top:96px}

/* ---------- CA requirements, as four ruled columns -------------------------
   Same bones as the home page's .figs band: a black rule across the top, one
   hairline-separated column per licence, the number carrying the weight. The
   founder rejected both earlier attempts — side-by-side label/text left the
   page empty, and stacked rows read as "one after another" with nothing to
   compare. Columns are what a comparison actually wants.

   The whole band sits on the blue tint so it reads as one object against the
   white page, the way the trust strip does on the home page. Each column is a
   flex column with the citation pushed to the bottom, so the citations line up
   across all four no matter how much body copy sits above them. */
.eui .lics{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--bg-2);border:1px solid var(--line);border-top:2px solid var(--ink);
  border-radius:var(--r);overflow:hidden}
.eui .lic{display:flex;flex-direction:column;padding:26px 22px 24px;
  border-right:1px solid var(--line);transition:background .16s}
.eui .lic:last-child{border-right:0}
.eui .lic:hover{background:var(--panel)}
.eui .lic h3{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.eui .lic b{display:block;margin-top:14px;font-size:clamp(34px,3.8vw,46px);font-weight:600;
  line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums lining-nums}
/* The "+" on NP/APRN is a qualifier, not a digit — it should not read as part
   of the number a nurse is trying to compare against the other three. */
.eui .lic b i{font-style:normal;font-size:.5em;font-weight:500;color:var(--faint);
  letter-spacing:0;vertical-align:.42em;margin-left:2px}
.eui .lic>span{display:block;margin-top:9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.eui .lic p{margin-top:16px;font-size:14px;line-height:1.62;color:var(--muted)}
.eui .lic .warn{margin-top:12px;padding-left:11px;border-left:2px solid var(--h-amber);
  color:var(--ink-2);font-size:13.5px}
/* margin-top:auto is what aligns the four citations on one baseline. */
.eui .lic .lbl{margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);line-height:1.6}
@media(max-width:900px){
  .eui .lics{grid-template-columns:1fr 1fr}
  .eui .lic:nth-child(2n){border-right:0}
  .eui .lic:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  .eui .lics{grid-template-columns:1fr}
  .eui .lic{border-right:0;border-bottom:1px solid var(--line)}
  .eui .lic:last-child{border-bottom:0}
  .eui .lic .lbl{margin-top:16px;padding-top:0}
}

/* ---------- CA requirements list -------------------------------------------
   Stacked, not the two-column definition list the credibility section uses.
   Three short rules against a 260px label column left most of the page empty;
   licence → rule → citation in a narrow measure reads as a reference page. */
.eui .reqlist{margin:40px auto 0;max-width:760px;border-top:1px solid var(--ink)}
.eui .req{padding:26px 0;border-bottom:1px solid var(--line)}
.eui .req h3{font-size:20px;font-weight:600;letter-spacing:-.026em}
.eui .req p{margin-top:10px;font-size:15.5px;line-height:1.7;color:var(--muted)}
.eui .req .lbl{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
/* The CNA online cap is the one line on this page a reader can get wrong to
   their cost, so it is marked rather than left in the run of body copy. */
.eui .req .warn{margin-top:10px;padding-left:14px;border-left:2px solid var(--h-amber);
  color:var(--ink-2);font-size:15px}

/* ---------- inner-page components ------------------------------------------
   Shapes the mockup never had to render, built from E's existing vocabulary
   rather than invented: a footnote, a closing CTA, and a ruled disclosure
   accordion. The accordion is the FAQ and the news index; it is the same idea
   as the bento cell, minus the card — rules instead of boxes, because a page
   of stacked boxes reads as a form and a page of rules reads as a document. */
.eui .fine{margin:26px auto 0;font-size:13.5px;color:var(--faint);max-width:760px}
.eui .endcta{margin-top:52px;padding-top:40px;border-top:1px solid var(--line);text-align:center}
.eui .endcta p{margin-top:14px;font-size:14.5px;color:var(--faint)}

.eui .qa{margin-top:44px;border-top:1px solid var(--ink)}
/* Group heading. The first one clears the masthead; the rest need air above
   them so a group reads as a new section rather than another row. */
.eui .qa-group{margin-top:46px}
.eui .qa-group:first-of-type{margin-top:8px}
.eui .qa-group+.qa{margin-top:14px}
.eui .qa .q{border-bottom:1px solid var(--line)}
/* Tinted panel variant, matching the licence band on #/requirements: the whole
   accordion reads as one object on the white page instead of a run of loose
   rules. The rows keep their hairlines; only the container changes. */
.eui .qa.panel{background:var(--bg-2);border:1px solid var(--line);border-top:2px solid var(--ink);
  border-radius:var(--r);padding:4px 26px}
.eui .qa.panel .q:last-child{border-bottom:0}
@media(max-width:640px){.eui .qa.panel{padding:2px 18px}}
.eui .qa summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:20px;
  padding:22px 0;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  transition:color .15s}
.eui .qa summary::-webkit-details-marker{display:none}
.eui .qa summary:hover{color:var(--accent-ink)}
.eui .qa summary .t{flex:1}
/* The chevron is the only affordance, so it has to survive both states: it
   rotates rather than swapping glyphs, which keeps the row from reflowing. */
/* E's bento chevron is position:absolute, pinned to the card's top-right.
   Here the chevron is a flex item in the summary row, so the position has to
   be reset explicitly — the bento rule is one class less specific but still
   supplies every property this rule does not name. */
.eui .qa .chev{position:static;flex:none;width:26px;height:26px;border-radius:var(--r-xs);border:1px solid var(--line);
  display:grid;place-items:center;transition:transform .28s cubic-bezier(.2,.7,.3,1),
  border-color .15s,background .15s;margin-top:-1px}
.eui .qa .chev svg{width:13px;height:13px;fill:none;stroke:var(--muted);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.eui .qa .q[open] .chev{transform:rotate(180deg);background:var(--ink);border-color:var(--ink)}
.eui .qa .q[open] .chev svg{stroke:var(--on-fill)}
.eui .qa .a{padding:0 46px 26px 0;font-size:15.5px;line-height:1.72;color:var(--muted);max-width:72ch}
.eui .qa .a p+p{margin-top:14px}
@supports (interpolate-size:allow-keywords){
  .eui .qa .q::details-content{block-size:0;overflow:hidden;content-visibility:hidden;
    transition:block-size .3s cubic-bezier(.2,.7,.3,1),content-visibility .3s allow-discrete}
  .eui .qa .q[open]::details-content{block-size:auto;content-visibility:visible}
}
.eui .qa .q[open] .a{animation:accIn .3s cubic-bezier(.2,.7,.3,1) both}
@media(prefers-reduced-motion:reduce){
  .eui .qa .chev{transition:none}
  .eui .qa .q[open] .a{animation:none}
  .eui .qa .q::details-content{transition:none}
}
@media(max-width:640px){
  .eui .qa summary{font-size:16px;gap:14px;padding:18px 0}
  .eui .qa .a{padding-right:0}
}

/* ---------- news ----------------------------------------------------------
   The lead post is set as an article: serif headline, generous measure. The
   index rows below reuse .qa wholesale and only add the meta line. The kind
   chips keep the app's 8-hue tokens (--hue-*-soft/ink from styles.css, which
   inherit straight through .eui) so a "New course" pill means the same thing
   here as it does in the admin console. */
.eui .lead{padding-bottom:44px;border-bottom:1px solid var(--ink)}
.eui .lead .disp{margin-top:16px;font-size:clamp(26px,3.4vw,38px)}
.eui .nbody{margin-top:20px;font-size:16.5px;line-height:1.74;color:var(--muted);max-width:70ch}
.eui .nbody p+p{margin-top:16px}
.eui .nmeta{display:flex;align-items:center;gap:12px}
.eui .nmeta time{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint)}
.eui .nkind{display:inline-block;padding:4px 9px;border-radius:100px;font-family:var(--mono);
  font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.eui .arch{margin-top:44px}
/* On an index row the meta sits above the title rather than beside it. */
.eui .qa summary .t .nmeta{margin-bottom:9px}
.eui .arch+.qa{margin-top:14px}
/* The list already closes on a rule; the CTA does not need to draw a second
   one 40px under it. */
.eui .qa+.endcta{border-top:0;padding-top:0}
.eui .qa .a .nbody{margin-top:0}

/* ---------- library sign-up card ------------------------------------------
   The one part of #/courses that is E rather than a restyle of the old CSS:
   it is a marketing card, not part of the tree, so it borrows the pricing
   card wholesale. */
.eui .libcta{padding-top:8px;padding-bottom:64px}
.eui .libcta .pcard{max-width:560px;margin:0 auto;padding:34px 32px;text-align:center}
.eui .libcta .disp{font-size:clamp(22px,2.6vw,30px)}
.eui .libcta p{margin-top:14px;font-size:15px;line-height:1.68;color:var(--muted)}
.eui .libcta .btn{margin-top:24px}
.eui .libcta .alt{margin-top:18px;font-size:14px;color:var(--faint)}
.eui .libcta .alt a{cursor:pointer}

/* ---------- mobile menu ----------------------------------------------------
   The mockup hid the nav below 1100px and stopped there, which is fine for a
   one-page comp and fatal for a real site: Courses, Pricing, CA Requirements
   and Verify all become unreachable on a phone. This is the same link list in
   a disclosure panel. */
/* The base .eui rule sets overflow-x:hidden, which the spec turns into
   overflow-y:auto — so the header would clip its own dropdown. */
.eui.etop{overflow:visible}
.eui.etop .mobmenu{display:none;position:relative}
.eui.etop .mobmenu>summary{display:inline-flex;align-items:center;list-style:none;
  cursor:pointer;user-select:none}
.eui.etop .mobmenu>summary::-webkit-details-marker{display:none}
.eui.etop .mobmenu[open]>summary{border-color:var(--ink);color:var(--ink)}
.eui.etop .nav-m{position:absolute;right:0;top:calc(100% + 12px);z-index:50;min-width:224px;
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);padding:8px;animation:euiMenu .16s ease-out}
@keyframes euiMenu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.eui.etop .nav-m a{padding:10px 12px;border-radius:var(--r-xs);font-size:14.5px;
  font-weight:500;color:var(--ink);cursor:pointer}
.eui.etop .nav-m a:hover{background:var(--bg-2)}
@media(max-width:1100px){
  .eui.etop .mobmenu{display:block}
  /* At this width the chrome chips are the first thing to go — the menu is
     the control that matters. */
  .eui.etop .util#modebtn, .eui.etop #envpill{display:none}
}
@media(prefers-reduced-motion:reduce){.eui.etop .nav-m{animation:none}}

/* ---------- midnight -------------------------------------------------------
   Direction E was designed on white and only on white. The app has a midnight
   theme with a toggle in the header, so E needs a dark half or the two would
   disagree the moment someone flips it. This is a re-point of E's tokens onto
   a near-black axis, not a second design: same rhythm, same rules, same hues
   lifted to stay legible as text. The warm neutral cannot survive the flip —
   a warm dark reads as brown — so midnight sits on cool blue-black, matching
   the app's existing midnight surfaces. */
[data-theme="midnight"] .eui,
[data-theme="midnight"].eui{
  --bg:#0a0e14; --bg-2:#101720; --panel:#161d28;
  --ink:#e9eef4; --ink-2:#cfd8e2; --muted:#adbac6; --faint:#8b98a6;
  --line:#27323f; --line-2:#36434f;
  --accent:#4da3ff; --accent-deep:#2f8ef0; --accent-ink:#7cbcff; --accent-soft:#173049;
  --bolt:#FFDA4D;
  --h-crimson:#ff8f96; --h-teal:#5cd6d2; --h-emerald:#4ade80; --h-amber:#f0b352;
  --h-violet:#b79bff;  --h-rose:#ff8fc0;  --h-sky:#68b8ec;    --h-slate:#9db0c9;
  --bot-body:#dfe6f2; --bot-shade:#b9c3d4; --bot-line:#8d99ac;
  --sh-sm:0 1px 2px rgba(0,0,0,.4),0 4px 12px -6px rgba(0,0,0,.5);
  --sh:0 2px 4px rgba(0,0,0,.4),0 16px 34px -18px rgba(0,0,0,.6);
  --on-fill:#08111f;
}
[data-theme="midnight"] .eui.etop,
[data-theme="midnight"].eui.etop{background:rgba(10,14,20,.86)}
/* Every surface that used to hardcode #fff now reads --panel, so midnight
   needs no per-component overrides — only the two places where the mockup
   leaned on a light page rather than on a token. */
[data-theme="midnight"] .eui .viz .board,
[data-theme="midnight"] .eui .bubble{border-color:var(--line)}
[data-theme="midnight"] .eui ::selection{background:#26365e;color:var(--ink)}

/* ---------- app-only additions --------------------------------------------
   Markup the mockup never had to render: flash/announcement banners, the
   library tree, list states. They borrow E's rules rather than inventing new
   shapes. */
.eui .announce{border-bottom:1px solid var(--line);background:var(--bg-2);
  padding:11px 0;font-size:14px;color:var(--muted);text-align:center}
/* .page-head also carries .wrap, so it has to restate the horizontal padding:
   both selectors are one class deep and .wrap is declared first, so a bare
   `padding:62px 0 0` here would silently drop the gutters. */
/* A .eui block used only for a page head sits on top of a page whose body is
   still the app's own CSS — and the app's page is not white. Painting the
   wrapper would draw a hard seam straight through the lede where the two
   backgrounds meet, so the head is transparent and takes the page it is on.
   The home page, which is .eui end to end, still gets E's white. */
.eui.bare{background:transparent}
.eui .page-head.wrap{padding:62px 28px 0}
/* Centred, like the home page's three section heads. It is also the only
   alignment that works here: each inner route's body is a different width
   (the FAQ accordion is ~730px, the news column 672px, the library tree full
   bleed), so a left-aligned head would fail to line up with two of the three
   no matter which gutter it took. */
/* No graph paper here. It was tried on the inner mastheads and pulled back
   out — the founder didn't like it, and the reason it works on the home page
   is that the hero is tall enough for the grid to fade before it reaches the
   content. On a short masthead it lands right behind the heading instead.
   The grid stays a home-page-only device. */
.eui .page-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.eui .page-head .disp{font-size:clamp(30px,4.6vw,52px);margin-top:16px}
.eui .page-head .lede{margin-top:16px;max-width:62ch}
/* A lede written as <span>s breaks where the sentence breaks, not where the
   viewport happens to run out — the same treatment as the home page's hero
   subtitle. One sentence, one line. */
.eui .page-head .lede span{display:block}
@media(max-width:640px){.eui .page-head .lede span{display:inline}}
@media(max-width:640px){.eui .page-head.wrap{padding:40px 18px 0}}
.eui .muted{color:var(--muted)}
.eui .center{text-align:center}
.eui .spinner{margin:60px auto;width:22px;height:22px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:euiSpin .7s linear infinite}
@keyframes euiSpin{to{transform:rotate(360deg)}}


/* ---------- the learner dashboard ---------------------------------------
   Direction E carried into the product. The portal was five stacked cards each
   holding a single sentence, in a rounded-box idiom that shared nothing with
   the marketing site's editorial voice — same brand, two different products.
   This is that page in E's language: a serif masthead, ONE ruled figure strip
   where the five status cards used to be, the plan as the body of the page
   rather than a box inside it, and the secondary surfaces demoted to a ruled
   list instead of four boxes competing for attention with the plan.

   Scoped under .dsh, NOT .eui, deliberately. E's wrapper carries a hard reset
   and a collision shield built for the marketing pages, and the dashboard still
   contains app markup — #inboxCard, #savedCard, the attest panel — whose
   margins that reset would strip. .dsh borrows E's colour tokens, which are
   global, and declares the display face itself.
   --------------------------------------------------------------------- */
.dsh{
  --dsh-serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --dsh-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  max-width:1080px;margin:0 auto;padding:44px 24px 90px;
}
.dsh-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--dsh-mono);
  font-size:10.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--faint)}
.dsh-eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent)}
.dsh-head{margin-bottom:36px}
.dsh-head h1{font-family:var(--dsh-serif);font-weight:400;letter-spacing:-.015em;line-height:1.05;
  font-size:clamp(30px,4.6vw,46px);color:var(--ink);margin:14px 0 12px}
.dsh-head .dsh-sub{font-size:16.5px;line-height:1.55;color:var(--muted);margin:0}

/* The figure strip. Four numbers on one rule is the homepage's own device, and
   it replaces five cards that between them held five sentences. */
.dsh-figs{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin:0 0 8px}
.dsh-fig{padding:22px 22px 20px 0;border-right:1px solid var(--line)}
.dsh-fig:last-child{border-right:0;padding-right:0}
.dsh-fig b{display:block;font-family:var(--dsh-serif);font-weight:400;font-size:36px;
  line-height:1;letter-spacing:-.02em;color:var(--ink)}
.dsh-fig i{font-style:normal;font-size:18px;color:var(--faint);margin-left:2px}
.dsh-fig span{display:block;margin-top:8px;font-family:var(--dsh-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.dsh-note{font-size:12.5px;color:var(--faint);margin:0 0 40px}

/* STAT Track, promoted. Founder, 28 Sep: the attest panel was the third item
   in the side rail; it is the one action that closes out a cycle, so it takes
   a full row of its own above the figure strip. Courses on the left, the
   signature on the right, one column again under 900px. */
.dsh-attest{margin:0 0 28px}
.dsh-attest .bulk{background:color-mix(in srgb,var(--accent) 6%,var(--bg));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:14px;padding:22px 26px 24px;margin:0}
.dsh-attest .bulk-sig input{background:var(--bg)}
.dsh-attest .bulk-list li{border-bottom-color:color-mix(in srgb,var(--accent) 18%,var(--line))}
.dsh-attest .bulk-head{margin-bottom:10px}
.dsh-attest .bulk-lead{max-width:none;margin-bottom:16px}
.dsh-attest .bulk-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,1fr);gap:4px 44px;align-items:start}
.dsh-attest .bulk-list{margin-bottom:14px}
.dsh-attest .bulk-basis .bulk-q{flex-basis:100%}
.dsh-attest .bulk-sig,.dsh-attest .bulk .fbtn{max-width:none}
.dsh-attest .bulk-empty,.dsh-attest .bulk-load{margin:0}
@media (max-width:900px){
  .dsh-attest .bulk-grid{grid-template-columns:1fr;gap:0}
  .dsh-attest .bulk{padding:20px 20px 22px}
}

/* Section heads: eyebrow left, meta right, hairline under. */
.dsh-sec{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--ink);margin:0 0 4px}
.dsh-secmeta{font-family:var(--dsh-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}

/* The next action. One band, one verb — the page's only filled button. */
.dsh-next{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 0 30px;border-bottom:1px solid var(--line);margin-bottom:40px}
.dsh-next-t{font-family:var(--dsh-serif);font-weight:400;font-size:25px;line-height:1.2;
  letter-spacing:-.012em;color:var(--ink);margin:6px 0 6px}
.dsh-next-s{font-size:14px;color:var(--muted);margin:0}
.dsh-cta{flex:0 0 auto;display:inline-block;background:var(--accent);color:#fff;border:0;
  border-radius:11px;padding:13px 22px;font:inherit;font-size:15px;font-weight:600;
  cursor:pointer;text-decoration:none;white-space:nowrap}
.dsh-cta:hover{filter:brightness(1.07)}

/* Plan rows. Hairlines, not boxes; the row is the object. */
.dsh-plan{list-style:none;margin:0 0 0;padding:0}
.dsh-row{display:flex;align-items:center;gap:16px;padding:15px 2px;
  border-bottom:1px solid var(--line)}
.dsh-row.is-open{cursor:pointer}
.dsh-row.is-open:hover .dsh-row-t{color:var(--accent)}
.dsh-n{flex:0 0 auto;width:26px;font-family:var(--dsh-mono);font-size:11.5px;color:var(--faint)}
.dsh-row-t{flex:1 1 auto;font-size:15.5px;line-height:1.4;color:var(--ink)}
.dsh-row.is-done .dsh-row-t{color:var(--muted)}
.dsh-hrs{flex:0 0 auto;font-family:var(--dsh-mono);font-size:11.5px;color:var(--faint);
  min-width:52px;text-align:right}
.dsh-pill{flex:0 0 auto;font-family:var(--dsh-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line);
  color:var(--faint);white-space:nowrap}
.dsh-pill.is-live{border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}
.dsh-pill.is-done{border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}

/* Plan total. */
.dsh-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:22px 2px 10px}
.dsh-total b{font-family:var(--dsh-serif);font-weight:400;font-size:30px;letter-spacing:-.02em;color:var(--ink)}
.dsh-meter{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin:0 2px 12px}
.dsh-meter i{display:block;height:100%;background:var(--accent)}
.dsh-fine{font-size:12.5px;line-height:1.6;color:var(--faint);margin:0 2px 44px}

/* Everything secondary: a ruled list, not four more cards. */
.dsh-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
  border-top:1px solid var(--line)}
.dsh-link{display:block;padding:20px 20px 20px 0;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);text-decoration:none;color:inherit;cursor:pointer;background:none;
  border-top:0;border-left:0;text-align:left;font:inherit;width:100%}
.dsh-link:last-child{border-right:0}
.dsh-link b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}
.dsh-link span{display:block;font-size:13px;color:var(--faint);line-height:1.5}
.dsh-link:hover b{color:var(--accent)}

/* Panels that still belong to the app (attest, CRNFA clock, inbox, saved). */
.dsh-panel{border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:0 0 22px}
.dsh-panel h4{font-family:var(--dsh-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 10px;font-weight:500}

@media (max-width:820px){
  .dsh-figs{grid-template-columns:repeat(2,1fr)}
  .dsh-fig:nth-child(2){border-right:0;padding-right:0}
  .dsh-fig:nth-child(3),.dsh-fig:nth-child(4){border-top:1px solid var(--line)}
  .dsh-link{border-right:0}
}
@media (max-width:520px){
  .dsh{padding:32px 18px 70px}
  .dsh-row{flex-wrap:wrap;gap:8px 12px}
  .dsh-row-t{flex:1 1 100%;order:2}
  .dsh-hrs{order:3}
}

/* The masthead is one line now. A serif "Welcome back" banner is decoration on
   a page someone opens to answer "what do I do next" — it pushed the figures,
   which are the actual answer, below the fold for no gain. */
.dsh-head{margin:0 0 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dsh-who{margin:0;font-size:14.5px;color:var(--muted)}
/* Auto-renew as a switch, top right. Founder, 28 Sep: it was a ghost button
   tacked onto the requirement line under the figures. */
.dsh-switch{display:inline-flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:7px 12px 7px 14px;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer}
.dsh-switch:hover{border-color:var(--ink)}
.dsh-switch-l{font-family:var(--dsh-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.dsh-switch-t{position:relative;width:34px;height:20px;border-radius:999px;background:var(--line);transition:background .18s}
.dsh-switch-t i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .18s}
.dsh-switch.is-on .dsh-switch-t{background:var(--accent)}
.dsh-switch.is-on .dsh-switch-t i{left:16px}
.dsh-switch-s{min-width:22px;font-weight:600;color:var(--ink)}
.dsh-who b{font-size:17px;color:var(--ink);font-weight:600;margin-right:8px}

/* ---------- inbox: list left, message right ----------
   The old inbox expanded each message in place, so opening one pushed the
   others down and you lost your position. Two panes is the shape people
   already know from mail. Below 780px they stack — list first, then the open
   message — because side-by-side on a phone gives both halves too little. */
.inb{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-height:380px}
.inb-list{border-right:1px solid var(--line);max-height:560px;overflow:auto}
.inb-item{display:flex;gap:11px;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);padding:14px 16px 14px 12px;cursor:pointer;font:inherit;color:inherit}
.inb-item:last-child{border-bottom:0}
.inb-item:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.inb-item.on{background:color-mix(in srgb,var(--accent) 9%,transparent);
  box-shadow:inset 2px 0 0 var(--accent)}
.inb-k{flex:0 0 auto;font-size:15px;line-height:1.3}
.inb-txt{flex:1 1 auto;min-width:0}
.inb-txt b{display:block;font-size:14px;font-weight:500;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inb-item.un .inb-txt b{font-weight:700}
.inb-txt span{display:block;margin-top:3px;font-family:var(--dsh-mono,ui-monospace,monospace);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.inb-read{padding:26px 28px;min-width:0}
.inb-read h3{font-family:var(--dsh-serif,Georgia,serif);font-weight:400;font-size:24px;
  line-height:1.25;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
.inb-meta{font-family:var(--dsh-mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin:0 0 18px}
.inb-body{white-space:pre-wrap;word-wrap:break-word;font:inherit;font-size:14.5px;line-height:1.65;
  color:var(--muted);margin:0}
.inb-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}

@media (max-width:780px){
  .inb{grid-template-columns:1fr}
  .inb-list{border-right:0;border-bottom:1px solid var(--line);max-height:260px}
  .inb-read{padding:22px 2px}
}

/* A way home from every inner portal page. The nav carries Dashboard now, but a
   back link at the top of the content is what people reach for first. */
.dsh-back{display:inline-block;margin:0 0 18px;font-size:13.5px;color:var(--muted);
  text-decoration:none;cursor:pointer}
.dsh-back:hover{color:var(--accent)}

/* ---------- record chips ----------
   These four are where a subscriber actually goes: their certificates, their
   messages, their details, their money. They were a ruled grid of plain text at
   the FOOT of the page, which made them read as a footer rather than as
   controls — nothing to grab, nothing to press, sitting in the same flat ground
   as everything else. Chips, at the top, each on its own tinted panel with a
   border that answers on hover. */
.dsh-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px}
.dsh-chip{display:flex;flex-direction:column;gap:4px;min-width:170px;flex:1 1 170px;
  padding:13px 16px 14px;border:1px solid var(--line);border-radius:13px;
  background:color-mix(in srgb,var(--ink) 3.5%,transparent);
  cursor:pointer;font:inherit;text-align:left;color:inherit;
  transition:border-color .12s ease,background .12s ease,transform .12s ease}
.dsh-chip:hover{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);transform:translateY(-1px)}
.dsh-chip b{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.dsh-chip span{font-family:var(--dsh-mono,ui-monospace,monospace);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* ---------- plan and its arithmetic, side by side ----------
   The plan is the page. Its total, the STAT Track panel and the CRNFA clock are
   commentary ON the plan, and stacking them underneath pushed the plan itself
   off the screen behind its own footnotes. Three quarters for the list, one for
   the numbers, and the numbers stay in view while the list scrolls. */
.dsh-planwrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(268px,1fr);
  gap:38px;align-items:start;margin-bottom:40px}
.dsh-side{position:sticky;top:80px}
.dsh-side .dsh-panel{margin-bottom:16px}
@media (max-width:900px){
  .dsh-planwrap{grid-template-columns:1fr;gap:18px}
  .dsh-side{position:static}
}
@media (max-width:560px){
  .dsh-chip{min-width:0;flex:1 1 46%}
}

/* ---------- hero, 26 Sep 2026: copy left, the requirement card right ----- */
.eui .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.5vw,72px);align-items:center;text-align:left}
.eui .hero-copy{min-width:0}
.eui .hero-copy .kicker{display:inline-flex}
.eui .hero-grid h1.disp{margin-left:0;margin-right:0;font-size:clamp(26px,5.2vw,68px)}
.eui .hero-grid .lede{margin-left:0;margin-right:0}
.eui .hero-grid .hero-cta{justify-content:flex-start}
/* the card */
.eui .req-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.eui .req-head{padding:18px 22px 14px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.eui .req-kicker{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.eui .req-picks{display:flex;gap:6px;flex-wrap:wrap}
.eui .req-pick{font:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.eui .req-pick:hover{border-color:var(--ink)}
.eui .req-pick.on{background:var(--ink);color:var(--on-fill);border-color:var(--ink)}
.eui .req-body{padding:20px 22px 6px}
.eui .req-body.swap{animation:req-in .28s ease-out}
@keyframes req-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.eui .req-title{margin:0 0 12px;font-family:var(--serif);font-weight:500;font-size:clamp(20px,2vw,25px);line-height:1.2;letter-spacing:-.015em}
.eui .req-lines{list-style:none;margin:0;padding:0}
.eui .req-lines li{position:relative;padding:8px 0 8px 18px;font-size:14px;line-height:1.5;color:var(--ink-2);border-top:1px solid var(--line)}
.eui .req-lines li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.eui .req-cite{margin:12px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.eui .req-foot{padding:14px 22px 20px}
.eui .req-foot .link{font-size:13.5px}
@media(max-width:1100px){
  .eui .hero-grid{grid-template-columns:1fr;text-align:center;gap:32px}
  .eui .hero-grid h1.disp,.eui .hero-grid .lede{margin-left:auto;margin-right:auto}
  .eui .hero-grid .hero-cta{justify-content:center}
  .eui .req-card{max-width:600px;margin:0 auto;width:100%;text-align:left}
}


/* ---------- CA requirements: the detail sheet -------------------------------
   The band above stays a four-way comparison. Each column carries a small
   mono "Details" affordance; the selected column loses its tint and gains a
   black rule on its bottom edge, and one sheet opens under the band for that
   licence. Hairlines only — no cards, no fills — so it reads as part of the
   same object as the band. */
.eui .lics{transition:border-radius .2s}
.eui .lic{cursor:pointer;position:relative}
.eui .lic:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.eui .lic>span.more{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.eui .lic>span.more::before{content:"";width:14px;height:1px;background:currentColor;transition:width .18s}
.eui .lic:hover>span.more::before{width:22px}
.eui .lic.on{background:var(--bg)}
.eui .lic.on::after{content:"";position:absolute;left:22px;right:22px;bottom:-1px;height:2px;background:var(--ink)}
.eui .lics.open{border-bottom-left-radius:0;border-bottom-right-radius:0}

.eui .sheet{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.2,.7,.2,1)}
.eui .sheet.open{grid-template-rows:1fr}
.eui .sheet>div{overflow:hidden;min-height:0}
.eui .sheet-in{border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
/* The rail carries the shading: an indigo wash from the accent, strongest at
   the top-left and gone by two-thirds down, with the licence abbreviation
   ghosted in the lower corner. min-height + padding-bottom reserve the
   watermark's band so it never collides with the key/value block. */
.eui .sheet-side{padding:26px 22px 110px;min-height:300px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px;
  position:relative;overflow:hidden;background:linear-gradient(160deg,var(--accent-soft) 0%,var(--bg) 70%)}
.eui .sheet-side>*{position:relative;z-index:1}
.eui .sheet-side .wm{position:absolute;right:18px;bottom:14px;z-index:0;font-size:clamp(64px,8vw,96px);font-weight:700;
  letter-spacing:-.05em;line-height:.8;color:var(--accent);opacity:.07;pointer-events:none;user-select:none}
.eui .sheet-side h4{margin:0;font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.eui .sheet-side .sheet-board{margin:0;padding:0;border:0;background:none;font-size:13.5px;line-height:1.55;color:var(--muted)}
.eui .sheet-side dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:12.5px}
.eui .sheet-side dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding-top:2px}
.eui .sheet-side dd{margin:0;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* Three thin rings in the far corner, cut by the edge. */
.eui .sheet-main{padding:0;position:relative;overflow:hidden}
.eui .sheet-main::before{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;
  border:1px solid var(--accent);opacity:.18;pointer-events:none;
  box-shadow:0 0 0 40px var(--bg),0 0 0 41px var(--accent),0 0 0 90px var(--bg),0 0 0 91px var(--accent)}
.eui .sheet-main>*{position:relative}
/* The row grid continues the band's columns: the label sits under the second
   column, the rule spans the third and fourth, each with the band's 22px inset. */
.eui .sheet .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0;padding:20px 0;
  border-bottom:1px solid var(--line);align-items:start}
.eui .sheet .row:last-child{border-bottom:0}
.eui .sheet .row .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:4px 22px 0;line-height:1.5}
.eui .sheet .row .v{font-size:14.5px;line-height:1.6;color:var(--ink-2);padding:0 22px}
.eui .sheet .row .v em{font-style:normal;color:var(--ink);font-weight:600}
.eui .sheet .row .c{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--faint)}
/* The amber dot marks the one rule most often missed for that licence — the
   same amber as the CNA online-cap warning in the band. */
.eui .sheet .row.flag .v::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--h-amber);margin:0 8px 2px 0}
@media(max-width:900px){
  .eui .sheet-in{grid-template-columns:1fr}
  .eui .sheet-side{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  .eui .sheet .row{grid-template-columns:1fr;gap:6px;padding:16px 0}
}
/* THREE LICENCES (2026-10-10, CNA hidden — see HIDDEN_LICENSES in app.js).
   The band runs on three columns instead of four, and the sheet follows so the
   promise above still holds: the rail sits under the first column, the row
   label under the second, the rule under the third. Three columns do not pair
   up the way four did, so the band keeps its three across down to 720px and
   then stacks, rather than leaving one licence alone on a second row. */
.eui .lics.n3{grid-template-columns:repeat(3,1fr)}
.eui .sheet.n3 .sheet-in{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.eui .sheet.n3 .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:900px){
  .eui .lics.n3 .lic:nth-child(2n){border-right:1px solid var(--line)}
  .eui .lics.n3 .lic:nth-child(-n+2){border-bottom:0}
  .eui .sheet.n3 .sheet-in{grid-template-columns:1fr}
  .eui .sheet.n3 .row{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
}
@media(max-width:720px){
  .eui .lics.n3{grid-template-columns:1fr}
  .eui .lics.n3 .lic,.eui .lics.n3 .lic:nth-child(2n),.eui .lics.n3 .lic:nth-child(-n+2){border-right:0;border-bottom:1px solid var(--line)}
  .eui .lics.n3 .lic:last-child{border-bottom:0}
  .eui .lics.n3 .lic .lbl{margin-top:16px;padding-top:0}
}
@media(max-width:560px){
  .eui .sheet.n3 .row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .eui .sheet,.eui .lics,.eui .lic>span.more::before{transition:none}
}