/* =====================================================================================================================
   Ascend: design system.  "Midnight and marker."
   The product's own artefact sets the palette: the book cover is midnight navy with a cyan glow, and a yellow marker
   highlights the token that matters. Light and dark follow the device. Every colour below is a token; components never
   hard-code one, so a section can switch world (midnight hero, featured card) by overriding tokens, not by restyling.
   Colour is OKLCH. Text/ground pairs were chosen for 4.5:1 or better (body) and 3:1 (large text, UI edges).
   ===================================================================================================================== */

@view-transition{navigation:auto}

:root{
  color-scheme:light dark;

  /* ground and text */
  --paper:oklch(98.6% .004 250);
  --paper-2:oklch(96.2% .008 250);
  --surface:oklch(100% 0 0);
  --surface-2:oklch(97.6% .006 250);
  --ink:oklch(24% .035 258);
  --ink-soft:oklch(38% .03 258);
  --muted:oklch(47% .026 258);
  --rule:oklch(91% .01 252);
  --rule-strong:oklch(79% .018 252);
  --control:oklch(60% .02 252);          /* the edge of a field, radio or ghost button: 3:1 or better on every ground */

  /* the cover */
  --midnight:oklch(20% .042 256);
  --midnight-2:oklch(25.5% .046 256);
  --midnight-3:oklch(33% .05 256);
  --on-midnight:oklch(96% .008 250);
  --on-midnight-2:oklch(80% .022 252);
  --signal:oklch(83% .125 207);
  --signal-ink:oklch(45% .095 218);
  --violet:oklch(60% .17 285);

  /* the marker */
  --marker:oklch(91.4% .171 99);
  --marker-soft:oklch(96.6% .085 98);
  --on-marker:oklch(22% .03 258);

  /* meaning, never decoration */
  --good:oklch(44% .1 165);   --good-bg:oklch(95.6% .036 165); --good-line:oklch(78% .08 165);
  --warn:oklch(47% .1 72);    --warn-bg:oklch(95.8% .06 88);   --warn-line:oklch(80% .11 85);
  --bad:oklch(48% .15 28);    --bad-bg:oklch(95.6% .03 25);    --bad-line:oklch(78% .09 25);

  --link:var(--signal-ink);
  --focus:oklch(52% .16 250);

  --btn-bg:var(--ink);
  --btn-fg:var(--paper);
  --btn-hover-bg:var(--marker);
  --btn-hover-fg:var(--on-marker);

  /* token chips (the lab's tokenizer, the sample map) */
  --tk0:oklch(93.5% .1 98);  --tk1:oklch(92% .05 190); --tk2:oklch(92.5% .05 55); --tk3:oklch(92.5% .05 295);

  --shadow-1:0 1px 2px oklch(20% .04 256 / .06),0 2px 10px oklch(20% .04 256 / .05);
  --shadow-2:0 2px 4px oklch(20% .04 256 / .06),0 16px 40px -12px oklch(20% .04 256 / .22);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --fs-sm:.9375rem;
  --fs-base:1.0625rem;
  --fs-md:clamp(1.15rem,1.08rem + .35vw,1.3rem);
  --fs-lg:clamp(1.35rem,1.2rem + .7vw,1.7rem);
  --fs-xl:clamp(1.9rem,1.4rem + 2vw,2.9rem);
  --fs-2xl:clamp(2.5rem,1.6rem + 4vw,4.6rem);

  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:24px;
  --max:70rem;
  --ease:cubic-bezier(.16,1,.3,1);

  /* drawn icons, one stroke weight, used as masks so they take the text colour */
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5'/%3E%3C/svg%3E");
  --ic-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
  --ic-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='10' height='6.5' rx='1.6'/%3E%3Cpath d='M5.5 7V5.2a2.5 2.5 0 015 0V7'/%3E%3C/svg%3E");
  --ic-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23475266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  --ic-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  --ic-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h6v6M12 4L4 12'/%3E%3C/svg%3E");
  --ic-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.2' fill='black'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:oklch(16.5% .03 257);
    --paper-2:oklch(14% .028 257);
    --surface:oklch(21% .035 257);
    --surface-2:oklch(24.5% .038 257);
    --ink:oklch(95.5% .008 250);
    --ink-soft:oklch(86% .015 252);
    --muted:oklch(73% .022 252);
    --rule:oklch(29.5% .04 257);
    --rule-strong:oklch(43% .045 257);
    --control:oklch(60% .03 255);
    --midnight:oklch(21% .042 256);
    --signal-ink:oklch(82% .115 207);
    --marker-soft:oklch(30% .05 96);
    --good:oklch(80% .12 165);  --good-bg:oklch(26% .05 165);  --good-line:oklch(44% .08 165);
    --warn:oklch(82% .11 85);   --warn-bg:oklch(28% .055 85);  --warn-line:oklch(48% .09 85);
    --bad:oklch(79% .12 25);    --bad-bg:oklch(26% .05 25);    --bad-line:oklch(46% .1 25);
    --link:oklch(82% .115 207);
    --focus:oklch(82% .13 207);
    --btn-bg:var(--marker);
    --btn-fg:var(--on-marker);
    --btn-hover-bg:oklch(96% .12 99);
    --btn-hover-fg:var(--on-marker);
    --tk0:oklch(42% .08 98);  --tk1:oklch(40% .06 190); --tk2:oklch(41% .07 55); --tk3:oklch(40% .08 295);
    --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b9c3d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
    --shadow-1:0 1px 2px oklch(5% .02 256 / .4),0 2px 10px oklch(5% .02 256 / .3);
    --shadow-2:0 2px 4px oklch(5% .02 256 / .4),0 16px 40px -12px oklch(2% .02 256 / .7);
  }
}

/* A section that switches world: the midnight hero, a featured card, the closing band. Components read tokens, so they follow. */
.world-dark,.card-accent,.hero-copy{
  --paper:var(--midnight);
  --surface:var(--midnight-2);
  --surface-2:var(--midnight-3);
  --ink:var(--on-midnight);
  --ink-soft:var(--on-midnight);
  --muted:var(--on-midnight-2);
  --rule:var(--midnight-3);
  --rule-strong:oklch(46% .05 256);
  --control:oklch(62% .04 256);
  --link:var(--signal);
  --focus:var(--signal);
  --btn-bg:var(--marker);
  --btn-fg:var(--on-marker);
  --btn-hover-bg:oklch(97% .1 99);
  --btn-hover-fg:var(--on-marker);
  --good:oklch(80% .12 165); --good-bg:oklch(28% .05 165); --good-line:oklch(46% .08 165);
  --warn:oklch(82% .11 85);  --warn-bg:oklch(30% .055 85);  --warn-line:oklch(50% .09 85);
  --bad:oklch(79% .12 25);   --bad-bg:oklch(28% .05 25);    --bad-line:oklch(48% .1 25);
  --tk0:oklch(42% .08 98);  --tk1:oklch(40% .06 190); --tk2:oklch(41% .07 55); --tk3:oklch(40% .08 295);
  color:var(--on-midnight);
}
.world-dark,.card-accent,.hero{background:var(--midnight)}
.hero{color:var(--on-midnight)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;font-optical-sizing:auto;scrollbar-color:var(--rule-strong) transparent;scroll-padding-top:5rem}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100dvh;display:flex;flex-direction:column;
}
main{flex:1}
img,svg{display:block;max-width:100%}
::selection{background:var(--marker);color:var(--on-marker)}
input,textarea,select{caret-color:var(--focus)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--btn-bg);color:var(--btn-fg);padding:.6rem 1rem;border-radius:var(--r);transition:top .15s var(--ease)}
.skip:focus{top:1rem}

h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.14;text-wrap:balance}
h1{font-size:var(--fs-xl);margin-bottom:.9rem}
h2{font-size:var(--fs-lg);margin:2.6rem 0 .7rem}
h3{font-size:var(--fs-md)}
p,li,dd{text-wrap:pretty}
p+p{margin-top:.85rem}
strong{font-weight:600}
mark{background:var(--marker);color:var(--on-marker);padding:.02em .22em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
code{font-family:var(--mono);font-size:.9em}
.num,.stats strong,.price,.price-line,.pct{font-variant-numeric:tabular-nums}

/* links: a quiet underline, and the marker comes down on hover */
a{
  color:var(--link);
  text-decoration:underline;text-decoration-thickness:max(1px,.07em);text-underline-offset:.22em;
  text-decoration-color:color-mix(in oklch,currentColor 38%,transparent);
  border-radius:3px;transition:background-color .15s,color .15s,text-decoration-color .15s;
}
a:hover{background:var(--marker);color:var(--on-marker);text-decoration-color:transparent;box-shadow:0 0 0 .14em var(--marker)}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2.5rem,var(--max));margin-inline:auto}
.wrap.narrow{width:min(100% - 2.5rem,44rem)}
.page{padding-block:clamp(2rem,1.2rem + 3.5vw,4.5rem) clamp(3rem,2rem + 4vw,5.5rem)}
.stack>*+*{margin-top:1.25rem}
.lede{font-size:var(--fs-md);line-height:1.5;color:var(--ink-soft);max-width:38rem}
.lede+.stack,.callout+.stack{margin-top:1.8rem}
.muted{color:var(--muted)}
.fine{font-size:var(--fs-sm);margin-top:1.4rem}
.note{margin-top:1.1rem;color:var(--muted);font-size:var(--fs-sm)}
.again{margin-top:2.5rem}
.meta{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:.2rem 0 1.1rem;color:var(--muted);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.meta>*+*::before{content:"";display:inline-block;width:.28rem;height:.28rem;border-radius:50%;background:var(--rule-strong);margin-right:.9rem;vertical-align:.18em}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;font-size:var(--fs-sm);color:var(--muted);margin-bottom:1.2rem}
.crumbs a{color:var(--muted)}
.crumbs>*+*::before{content:"/";margin-right:.6rem;color:var(--rule-strong)}
.eyebrow{font-size:var(--fs-sm);font-weight:600;color:var(--muted);margin-bottom:.5rem}

/* ---------- header and footer ---------- */
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.logo{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:1rem;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-.01em;border-radius:6px}
.logo:hover{background:none;color:var(--ink);box-shadow:none}
.logo .tok{background:var(--marker);color:var(--on-marker);padding:.14em .42em;border-radius:6px;transition:transform .2s var(--ease)}
.logo:hover .tok{transform:rotate(-2deg)}
.nav{display:flex;align-items:center;gap:.25rem}
.nav a{font-size:var(--fs-sm);font-weight:500;color:var(--ink-soft);text-decoration:none;padding:.5rem .8rem;border-radius:var(--r);background:none;box-shadow:none}
.nav a:hover{background:var(--paper-2);color:var(--ink);box-shadow:none}
.nav a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--marker);border-radius:var(--r) var(--r) 0 0}
.nav a.ext::after{content:"";display:inline-block;width:.8em;height:.8em;margin-left:.3em;background:currentColor;opacity:.6;-webkit-mask:var(--ic-out) center/contain no-repeat;mask:var(--ic-out) center/contain no-repeat;vertical-align:-.05em}
.site-footer{background:var(--paper-2);border-top:1px solid var(--rule);color:var(--muted);font-size:var(--fs-sm);padding:3rem 0 2rem;margin-top:auto}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem}
.site-footer h2{font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;letter-spacing:0;margin:0 0 .7rem;color:var(--ink)}
.site-footer ul{list-style:none;display:grid;gap:.45rem}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--on-marker)}
.foot-brand p{max-width:26rem;margin-top:.6rem}
.foot-base{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--rule)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:2.9rem;padding:.65rem 1.45rem;
  background:var(--btn-bg);color:var(--btn-fg);
  font:600 1rem/1.2 var(--sans);
  border:2px solid var(--btn-bg);border-radius:var(--r);
  text-decoration:none;cursor:pointer;
  transition:background-color .16s,color .16s,border-color .16s,transform .16s var(--ease),box-shadow .16s;
}
.btn:hover:not(:disabled){background:var(--btn-hover-bg);border-color:var(--btn-hover-bg);color:var(--btn-hover-fg);box-shadow:none}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--control)}
.btn-ghost:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.arrow::after{content:"";width:1em;height:1em;background:currentColor;-webkit-mask:var(--ic-arrow) center/contain no-repeat;mask:var(--ic-arrow) center/contain no-repeat;transition:transform .2s var(--ease)}
.btn.arrow:hover::after{transform:translateX(3px)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.btn.danger:hover:not(:disabled){background:oklch(40% .15 28);border-color:oklch(40% .15 28);color:#fff}
.btn.provider{width:100%}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.actions .btn{text-decoration:none}
.chip-btn{min-height:0;padding:.3rem .85rem;font-size:var(--fs-sm);margin:.15rem .25rem .15rem 0;border-radius:999px;font-weight:500}

/* ---------- forms ---------- */
fieldset{border:0;min-width:0}
legend{font-weight:600;margin-bottom:.7rem;padding:0}
.field{display:grid;gap:.4rem}
.field>span{font-weight:600}
input[type=text],input[type=email],input[type=date],select,textarea{
  font:inherit;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--control);border-radius:var(--r);
  padding:.7rem .9rem;width:100%;min-height:2.9rem;
  transition:border-color .15s,box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input[type=text]:hover,input[type=email]:hover,input[type=date]:hover,select:hover,textarea:hover{border-color:var(--ink-soft)}
input[type=text]:focus,input[type=email]:focus,input[type=date]:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in oklch,var(--focus) 28%,transparent)}
textarea{resize:vertical;line-height:1.5}
select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background-image:var(--chev);background-repeat:no-repeat;background-position:right .9rem center;background-size:1rem;background-color:var(--surface)}
input[type=range]{width:100%;accent-color:var(--ink);height:2rem}
input[type=range]::-webkit-slider-thumb{box-shadow:var(--shadow-1)}

/* a radio or checkbox is drawn, not the browser's */
input[type=radio],input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:1.3rem;height:1.3rem;margin-top:.2rem;
  border:2px solid var(--control);background:var(--surface);
  display:inline-grid;place-content:center;cursor:pointer;
  transition:border-color .15s,background-color .15s;
}
input[type=radio]{border-radius:50%}
input[type=checkbox]{border-radius:6px}
input[type=radio]::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--paper);transform:scale(0);transition:transform .18s var(--ease)}
input[type=checkbox]::before{content:"";width:.8rem;height:.8rem;background:var(--paper);transform:scale(0);transition:transform .18s var(--ease);-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat}
input[type=radio]:checked,input[type=checkbox]:checked{background:var(--ink);border-color:var(--ink)}
input[type=radio]:checked::before,input[type=checkbox]:checked::before{transform:scale(1)}
input:disabled{cursor:not-allowed}

.choice-group{display:grid;gap:.65rem}
.choice,.opt{
  display:flex;gap:.9rem;align-items:flex-start;
  background:var(--surface);border:1.5px solid var(--rule);border-radius:var(--r-lg);
  padding:1rem 1.1rem;cursor:pointer;
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.choice:hover,.opt:hover{border-color:var(--ink-soft)}
.choice:has(input:checked),.opt:has(input:checked){border-color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink)}
.choice:has(input:focus-visible),.opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.choice input:focus-visible,.opt input:focus-visible{outline:none}
.choice small{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:.1rem}
.has-gap .choice,.has-gap .opt,.has-gap select{border-color:var(--bad)}
.has-gap legend::after,.field.has-gap>span::after{content:" (needs an answer)";font-weight:400;color:var(--bad);font-size:var(--fs-sm)}
.opts{display:grid;gap:.65rem}
.opt{flex-wrap:wrap;position:relative}
.opt-text{flex:1;min-width:0}
.opt.opt-correct,.opt.opt-correct:has(input:checked){border-color:var(--good);background:var(--good-bg);box-shadow:inset 0 0 0 1px var(--good)}
.opt.opt-wrong,.opt.opt-wrong:has(input:checked){border-color:var(--bad);background:var(--bad-bg);box-shadow:inset 0 0 0 1px var(--bad)}
.opt-tag{flex-basis:100%;margin-left:2.2rem;font-size:var(--fs-sm);font-weight:600}
.opt-correct .opt-tag{color:var(--good)}
.opt-wrong .opt-tag{color:var(--bad)}
.opt-correct input[type=radio],.opt-correct input[type=radio]:checked,.opt-wrong input[type=radio],.opt-wrong input[type=radio]:checked{border-color:transparent;background:transparent}
.opt-correct input::before,.opt-wrong input::before{transform:scale(1);width:1.3rem;height:1.3rem;border-radius:0;-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat;background:var(--good)}
.opt-wrong input::before{-webkit-mask-image:var(--ic-cross);mask-image:var(--ic-cross);background:var(--bad)}

.pills{display:flex;flex-wrap:wrap;gap:.55rem}
.pill{padding:.55rem 1rem;border-radius:999px;align-items:center;gap:.5rem;border-color:var(--control)}
.pill input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pill:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:none}
.pill:has(input:checked)::before{content:"";width:.9em;height:.9em;background:currentColor;-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat}
.check{display:flex;gap:.6rem;align-items:center}
.check input{margin-top:0}

.error{background:var(--bad-bg);border:1.5px solid var(--bad-line);color:var(--bad);border-radius:var(--r);padding:.85rem 1.1rem}
.error button{margin-top:.7rem}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.4rem 1.5rem;margin:1.3rem 0;box-shadow:var(--shadow-1)}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.card-accent{border-color:var(--midnight-3);box-shadow:var(--shadow-2)}
.card-accent a:hover{color:var(--on-marker)}
.callout{display:flex;gap:.75rem;align-items:flex-start;background:var(--marker-soft);border-radius:var(--r);padding:.95rem 1.15rem;margin:1.3rem 0}
.callout-good{background:var(--good-bg)}
.callout-note{background:var(--marker-soft)}
.callout-warn{background:var(--warn-bg)}
.callout[role=note]{display:block}
.insight{background:var(--marker-soft);border-color:transparent;box-shadow:none}
.insight h2{margin:0 0 .35rem}
.plain{list-style:none}
.plain li+li{margin-top:.85rem}
.tag{display:inline-block;font-size:.78rem;font-weight:600;border:1px solid var(--rule-strong);border-radius:999px;padding:.05rem .55rem;margin-left:.5rem;color:var(--muted);vertical-align:.08em}
.tag-lock{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.locked{background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 10px,var(--surface-2) 10px,var(--surface-2) 20px)}

/* ---------- the landing page ---------- */
.hero{padding:clamp(3rem,1.5rem + 6vw,6.5rem) 0 clamp(3rem,2rem + 5vw,6rem);border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,1rem + 5vw,5rem);align-items:center}
.hero h1{font-size:var(--fs-2xl);line-height:1.04;letter-spacing:-.025em;margin-bottom:1.3rem}
.hero .lede{font-size:var(--fs-md);color:var(--muted);margin-bottom:2rem}
.hero .actions{margin-top:0}
.hero-art{justify-self:end;width:100%;max-width:28rem}
.sample{background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-xl);padding:1.5rem;box-shadow:var(--shadow-2);position:relative}
.sample-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.sample-head strong{font-family:var(--serif);font-size:var(--fs-md);font-weight:500}
.sample-flag{font-size:.78rem;font-weight:600;color:var(--muted);border:1px solid var(--rule-strong);border-radius:999px;padding:.05rem .6rem}
.sample .areas{gap:.55rem}
.sample-foot{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--rule);font-size:var(--fs-sm);color:var(--muted)}
.sample-foot strong{color:var(--ink)}

.band{padding:clamp(3rem,2rem + 4vw,5.5rem) 0}
.band+.band{border-top:1px solid var(--rule)}
.band-alt{background:var(--paper-2)}
.band-head{max-width:40rem;margin-bottom:2.2rem}
.band-head h2{margin:0 0 .6rem;font-size:var(--fs-xl);line-height:1.1}
.band-head p{color:var(--ink-soft);font-size:var(--fs-md);line-height:1.5}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s;position:relative}
.steps li{counter-increment:s;padding:0 2rem 0 0;position:relative}
.steps li::before{content:counter(s);display:grid;place-content:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--marker);color:var(--on-marker);font:600 1.15rem var(--serif);margin-bottom:1.1rem;position:relative;z-index:1}
.steps li:not(:last-child)::after{content:"";position:absolute;left:3.1rem;right:.6rem;top:1.3rem;height:2px;background:repeating-linear-gradient(90deg,var(--rule-strong) 0 6px,transparent 6px 12px)}
.steps h3{margin-bottom:.4rem}
.steps p{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 5vw,5rem);align-items:center}
.lab-list{list-style:none;border-top:1px solid var(--rule)}
.lab-list li{border-bottom:1px solid var(--rule)}
.lab-list a{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:baseline;padding:.95rem .2rem;text-decoration:none;color:var(--ink);border-radius:0;box-shadow:none}
.lab-list a:hover{background:var(--surface-2);color:var(--ink);box-shadow:none}
.lab-list strong{font-weight:600}
.lab-list span{color:var(--muted);font-size:var(--fs-sm);grid-column:1}
.lab-list a::after{content:"";width:1rem;height:1rem;background:var(--muted);grid-column:2;grid-row:1 / span 2;align-self:center;-webkit-mask:var(--ic-arrow) center/contain no-repeat;mask:var(--ic-arrow) center/contain no-repeat;transition:transform .2s var(--ease)}
.lab-list a:hover::after{transform:translateX(4px)}
.probs{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-xl);padding:1.6rem;box-shadow:var(--shadow-1)}
.probs .says{font-family:var(--serif);font-size:var(--fs-lg);line-height:1.35;margin-bottom:1.2rem}
.probs .says mark{font-family:var(--mono);font-size:.8em}
.probs figcaption{margin-top:1rem;font-size:var(--fs-sm);color:var(--muted)}
progress.prob{appearance:none;-webkit-appearance:none;width:100%;height:.8rem;border:0;border-radius:99px;background:var(--rule);overflow:hidden}
progress.prob::-webkit-progress-bar{background:var(--rule);border-radius:99px}
progress.prob::-webkit-progress-value{background:var(--ink);border-radius:99px}
progress.prob::-moz-progress-bar{background:var(--ink);border-radius:99px}
.probs .bar-row:not(:first-child) progress.prob::-webkit-progress-value{background:var(--rule-strong)}
.probs .bar-row:not(:first-child) progress.prob::-moz-progress-bar{background:var(--rule-strong)}
.book-band{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,1rem + 3vw,3.5rem);align-items:center}
.book-band img{width:clamp(7rem,6rem + 8vw,11rem);height:auto;border-radius:3px 8px 8px 3px;box-shadow:12px 18px 36px -10px oklch(2% .02 256 / .6)}
.book-band h2{margin:0 0 .6rem;font-size:var(--fs-xl);line-height:1.1}
.book-band p{color:var(--muted);max-width:34rem;margin-bottom:1.4rem}

/* ---------- the diagnostic ---------- */
.start-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:start}
.start-aside{position:sticky;top:6rem}
.start-aside h2{font-size:var(--fs-md);margin:0 0 .8rem}
.quiz-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.progress-text{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.progress{appearance:none;-webkit-appearance:none;flex:1;height:.55rem;border:0;border-radius:99px;background:var(--rule);overflow:hidden;margin:0}
.progress::-webkit-progress-bar{background:var(--rule);border-radius:99px}
.progress::-webkit-progress-value{background:var(--ink);border-radius:99px;transition:width .6s var(--ease)}
.progress::-moz-progress-bar{background:var(--ink);border-radius:99px}
.quiz-q{font-family:var(--serif);font-size:var(--fs-lg);line-height:1.28;font-weight:500;margin-bottom:1.1rem;text-wrap:pretty;width:100%;padding:0}
#quiz>form{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-xl);padding:clamp(1.2rem,.8rem + 2vw,2rem);box-shadow:var(--shadow-1);animation:rise .45s var(--ease) both}
.quiz-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin-bottom:.9rem;color:var(--muted);font-size:var(--fs-sm)}
.quiz-area{font-weight:600;color:var(--ink)}
.pips{display:inline-flex;gap:.22rem;align-items:center}
.pip{width:1.3rem;height:.4rem;border-radius:99px;background:var(--rule-strong);display:inline-block}
.pip-on{background:var(--ink)}
.quiz-tag{font-size:.78rem;font-weight:600;background:var(--marker-soft);border-radius:99px;padding:.05rem .6rem;color:var(--ink)}
.feedback{border-color:var(--rule);animation:rise .4s var(--ease) both}
.feedback h2{margin:0 0 .4rem;display:flex;align-items:center;gap:.5rem}
.feedback h2::before{content:"";width:1.1em;height:1.1em;flex:none;background:currentColor;-webkit-mask:var(--ic-dot) center/contain no-repeat;mask:var(--ic-dot) center/contain no-repeat}
.feedback-ok{background:var(--good-bg);border-color:var(--good-line)}
.feedback-ok h2{color:var(--good)}
.feedback-ok h2::before{-webkit-mask-image:var(--ic-check);mask-image:var(--ic-check)}
.feedback-miss{background:var(--surface);border-color:var(--rule-strong)}
.feedback-miss h2::before{background:var(--marker);box-shadow:0 0 0 2px var(--on-marker) inset;border-radius:50%;-webkit-mask:none;mask:none}
.feedback .btn{margin-top:1rem}
.feedback p+p{margin-top:.6rem}
.feedback-level{font-size:var(--fs-sm);font-weight:600}
.level-strong{color:var(--good)}
.level-partial{color:var(--warn)}
.level-needs_work{color:var(--bad)}
.insight-note{background:var(--marker-soft);border-radius:var(--r);padding:.75rem 1rem;margin-top:.9rem}
.adapt{margin-top:.9rem;padding:.7rem 1rem;border-radius:var(--r);background:var(--surface-2);font-weight:600}
.adapt-up{background:var(--good-bg);color:var(--good)}
.adapt-down{background:var(--warn-bg);color:var(--warn)}

/* ---------- the result ---------- */
.areas{list-style:none;display:grid;gap:.65rem}
.area{display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:.85rem 1.1rem}
.area-title{font-weight:600}
.area-verdict{font-size:var(--fs-sm);color:var(--muted);display:inline-flex;align-items:center;gap:.4rem;grid-column:1;grid-row:2}
.area-verdict::before{content:"";width:.95em;height:.95em;background:currentColor;-webkit-mask:var(--ic-dot) center/contain no-repeat;mask:var(--ic-dot) center/contain no-repeat}
.area-solid .area-verdict{color:var(--good)}
.area-solid .area-verdict::before{-webkit-mask-image:var(--ic-check);mask-image:var(--ic-check)}
.area-partial .area-verdict{color:var(--warn)}
.area-gap .area-verdict{color:var(--bad)}
.area .pips,.area .meter{grid-column:2;grid-row:1 / span 2}
.area .pip{width:1.6rem;height:.5rem}
.area-solid .pip-on{background:var(--good)}
.area-partial .pip-on{background:var(--warn)}
.area-gap .pip-on{background:var(--bad)}
.meter{width:6.5rem;height:.5rem;border-radius:99px;background:var(--rule);overflow:hidden;align-self:center}
.meter-fill{display:block;height:100%;border-radius:99px;transition:width .8s var(--ease)}
.meter-solid{width:100%;background:var(--good)}
.meter-partial{width:60%;background:var(--warn)}
.meter-gap{width:25%;background:var(--bad)}
.meter-none{width:0}
.area-locked{border-style:dashed;box-shadow:none;background:transparent}
.area-locked .area-verdict{color:var(--muted)}
.area-locked .area-verdict::before{-webkit-mask-image:var(--ic-lock);mask-image:var(--ic-lock)}
/* On the result page the unexplored areas are a quiet set of chips, not a second long list */
.areas-locked{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.areas-locked .area-locked{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .85rem;border-radius:999px;position:relative}
.areas-locked .area-locked::before{content:"";width:.9em;height:.9em;background:var(--muted);-webkit-mask:var(--ic-lock) center/contain no-repeat;mask:var(--ic-lock) center/contain no-repeat}
.areas-locked .area-title{font-weight:500;color:var(--ink-soft)}
.areas-locked .area-verdict{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.edge-list{list-style:none;display:grid;gap:.4rem;margin:1.1rem 0}
.recap{list-style:none;display:grid;gap:.55rem;margin:.7rem 0 1.4rem}
.recap-item{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:.7rem 1rem}
.recap-item summary{cursor:pointer;font-weight:600;display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline}
.recap-item[open] summary{margin-bottom:.7rem}
.recap-mark{font-size:.78rem;font-weight:600;padding:.05rem .55rem;border-radius:99px}
.recap-ok{background:var(--good-bg);color:var(--good)}
.recap-miss{background:var(--warn-bg);color:var(--warn)}
.recap-stem{font-weight:600}
.recap-item p+p{margin-top:.5rem}
.cta-list{margin:.8rem 0 1.1rem 1.2rem;display:grid;gap:.5rem}
.cta .actions{margin-top:1.2rem}
.week h3,.credential h3{font:600 var(--fs-sm)/1.3 var(--sans);letter-spacing:0;color:var(--muted);margin:1.8rem 0 .6rem}

/* ---------- accounts, intake, plan ---------- */
.stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin:1.5rem 0;border-block:1px solid var(--rule)}
.stats li{padding:1rem 1rem 1rem 0}
.stats li+li{padding-left:1.2rem;border-left:1px solid var(--rule)}
.stats strong{display:block;font-family:var(--serif);font-size:var(--fs-lg);font-weight:500;line-height:1.1}
.stats span{color:var(--muted);font-size:var(--fs-sm)}
.sessions{list-style:none;display:grid;gap:.6rem}
.session{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:.9rem 1.1rem}
.session-when{font-weight:600;font-variant-numeric:tabular-nums}
.session-when small{display:block;color:var(--muted);font-weight:400}
.session-done{background:transparent;box-shadow:none}
.session-done .session-when{color:var(--good)}
.session-done strong{color:var(--muted);font-weight:500}
.done-mark{font-size:.8rem;font-weight:600;color:var(--good);margin-left:.5rem}
.done-mark::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.25em;background:currentColor;-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat;vertical-align:-.1em}
.progress-line{margin:1.2rem 0 .4rem;font-weight:600}
.next-up{margin-top:0}
.next-up h2{font:600 var(--fs-sm)/1.3 var(--sans);letter-spacing:0;color:var(--muted);margin:0 0 .35rem}
.next-title{font-family:var(--serif);font-size:var(--fs-lg);line-height:1.2;margin-bottom:1.1rem}
.provider{width:100%;text-align:center}

/* ---------- lessons: a reading surface ---------- */
.lesson{font-size:1.125rem;line-height:1.7}
.lesson h1{margin-bottom:.4rem}
.lesson-block{margin:1.15rem 0}
.lesson-block:has(>h2){margin-top:2.8rem}
.lesson-block h2{margin-top:0}
.lesson p{max-width:40rem}
.lesson ul{margin:.8rem 0 .8rem 1.3rem;max-width:40rem}
.lesson li+li{margin-top:.4rem}
.lesson li::marker{color:var(--rule-strong)}
blockquote.prompt{margin:1rem 0;padding:1rem 1.2rem;background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r);font-family:var(--mono);font-size:.92rem;line-height:1.6;max-width:40rem}
.lab-link{margin-top:1.1rem}
.lab-link .btn{margin-right:.5rem}
.practice{margin:1.2rem 0}
.practice .btn{margin-top:1.1rem}
.practice-feedback{margin-top:1rem;padding:.85rem 1.1rem;background:var(--good-bg);border-radius:var(--r)}
.practice-feedback.error{background:var(--bad-bg)}
.warmup,.apply{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.2rem 1.4rem;margin:1.6rem 0;box-shadow:none}
.warmup h2,.apply h2,.finish h2{margin-top:0}
.model-answer{margin-top:1rem;max-width:40rem}
.model-answer summary{cursor:pointer;font-weight:600;color:var(--link)}
.model-answer p{margin-top:.6rem}
.finish{margin-top:2.5rem}
.reflect-ai{margin-top:.9rem;max-width:40rem}

/* ---------- tutor ---------- */
.tutor{padding:0}
.tutor>summary{cursor:pointer;font-weight:600;color:var(--link);padding:1.05rem 1.4rem}
.tutor[open]>summary{border-bottom:1px solid var(--rule)}
.tutor-body{padding:1.1rem 1.4rem 1.3rem}
.mode{border:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-bottom:.9rem}
.chat{list-style:none;display:grid;gap:.65rem;max-height:26rem;overflow-y:auto;margin-bottom:1rem}
.msg{padding:.7rem .95rem;border-radius:var(--r-lg);max-width:92%}
.msg-user{background:var(--surface-2);justify-self:end}
.msg-ai{background:var(--good-bg);border:1px solid var(--good-line)}
.msg-who{display:block;font-size:.78rem;font-weight:600;color:var(--muted)}
.msg-text{white-space:pre-wrap;overflow-wrap:anywhere}
.msg-pending .msg-text:empty::after{content:"…";color:var(--muted)}
.msg-cut{border-style:dashed}
#tutor-form .actions{margin-top:.7rem}

/* ---------- the lab ---------- */
.lab-grid{list-style:none;display:grid;gap:1rem;margin-top:1.8rem;grid-template-columns:1fr}
.lab-grid .card{margin:0;transition:transform .25s var(--ease),box-shadow .25s}
.lab-grid .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.lab-grid h2{margin:0 0 .4rem;font-size:var(--fs-md)}
.lab-grid h2 a{text-decoration:none;color:var(--ink)}
.lab-grid h2 a:hover{background:none;box-shadow:none;color:var(--ink);text-decoration:underline;text-decoration-color:var(--marker);text-decoration-thickness:.18em}
.lab-grid p{color:var(--muted)}
.examples{margin:.2rem 0}
.tok-out{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:1rem;min-height:4rem;line-height:2.2;font-family:var(--mono);font-size:.95rem;overflow-wrap:anywhere}
.tok-piece{display:inline-block;padding:0 .3rem;margin:0 .12rem;border-radius:5px;white-space:pre;color:var(--ink)}
.tok-piece sub{font-size:.65em;color:var(--muted);margin-left:.2rem}
.tok-0{background:var(--tk0)}.tok-1{background:var(--tk1)}.tok-2{background:var(--tk2)}.tok-3{background:var(--tk3)}
.tok-stats{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.2rem}
.tok-stats dt{color:var(--muted)}
.tok-stats dd{font-weight:600;font-family:var(--mono);font-variant-numeric:tabular-nums}
.bars{list-style:none;display:grid;gap:.55rem}
.bar-row{display:grid;grid-template-columns:7.5rem 1fr 4rem;gap:.7rem;align-items:center;font-size:var(--fs-sm)}
.bar-label{font-family:var(--mono);overflow-wrap:anywhere}
.bar-track{height:.8rem;background:var(--rule);border-radius:99px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--ink);border-radius:99px;width:0;transition:width .3s var(--ease)}
.bar-pct{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.ctx-list{list-style:none;display:grid;gap:.5rem}
.ctx-msg{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:.7rem 1rem}
.ctx-out{opacity:.5;border-style:dashed;text-decoration:line-through;text-decoration-color:var(--bad-line)}
.ctx-meta{display:block;font-family:var(--mono);font-size:.78rem;color:var(--muted);text-decoration:none}
.emb-map{width:100%;height:auto;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);aspect-ratio:1/1;max-height:640px}
.emb-point{cursor:pointer;outline:none}
.emb-point circle{fill:var(--c,#888);stroke:var(--surface);stroke-width:.4}
.emb-point:focus-visible circle{stroke:var(--ink);stroke-width:.7}
.emb-label{font-size:2.4px;font-family:var(--mono);fill:var(--ink);opacity:0;pointer-events:none;paint-order:stroke;stroke:var(--surface);stroke-width:.5px}
.show-labels .emb-label,.emb-point.is-selected .emb-label,.emb-point.is-near .emb-label{opacity:1}
.emb-point.is-selected circle{r:2.8px;stroke:var(--ink);stroke-width:.7}
.emb-point.is-near circle{stroke:var(--ink);stroke-width:.4}
.emb-line{stroke:var(--ink);stroke-width:.25;opacity:.45;stroke-dasharray:.8 .6}
.emb-legend{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:var(--fs-sm)}
.emb-swatch{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;background:var(--c,#888);vertical-align:-1px}
.g-animals{--c:#D2685B}.g-food{--c:#E4A800}.g-vehicles{--c:#2FA394}.g-money{--c:#6D7FE0}.g-feelings{--c:#E07BA6}
.g-weather{--c:#4AA9D0}.g-technology{--c:#8A93A3}.g-places{--c:#86AB45}.g-jobs{--c:#B27A47}.g-support{--c:var(--ink)}
.rag-fieldset{border:0;padding:0}
.rag-chunks li+li{margin-top:.55rem}
.rag-chunks .opt{align-items:flex-start}
.rag-good{background:var(--good-bg);border-color:var(--good-line)}
.rag-bad{background:var(--bad-bg);border-color:var(--bad-line)}
.rag-ok{background:var(--marker-soft)}
.rag-guess{border-style:dashed}
.claims li{margin:.55rem 0}
.claim{display:block;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--rule);border-radius:var(--r-lg);padding:.8rem 1rem;cursor:pointer;transition:border-color .15s,background-color .15s}
.claim:hover:not(:disabled){border-color:var(--ink-soft)}
.claim.is-flagged{border-color:var(--bad);background:var(--bad-bg)}
.claim:disabled{cursor:default;color:var(--ink)}
.claim code{background:var(--surface-2);padding:.05rem .3rem;border-radius:4px}
.claim-flag{display:block;margin:.25rem .2rem 0;font-size:.85rem}
.claim-why{margin:.45rem .2rem 0;font-size:var(--fs-sm)}
.is-fake .claim{border-color:var(--bad)}
.is-true .claim{border-color:var(--good)}
.wb-material{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);padding:.9rem 1.1rem;max-width:42rem}
.wb-output{white-space:pre-wrap;overflow-wrap:anywhere}
.wb-table{width:100%;border-collapse:collapse;margin:.7rem 0}
.wb-table th,.wb-table td{text-align:left;vertical-align:top;border-bottom:1px solid var(--rule);padding:.6rem .7rem}
.wb-table th{font-size:.8rem;font-weight:600;color:var(--muted)}
.wb-status{font-size:.82rem;font-weight:600;white-space:nowrap}
.wb-present{color:var(--good)}.wb-partial{color:var(--warn)}.wb-missing{color:var(--bad)}
.wb-improved{font-family:var(--mono);font-size:.92rem;background:var(--surface-2);border:1px solid var(--rule);padding:1rem 1.2rem;border-radius:var(--r);white-space:pre-wrap}

/* ---------- pricing ---------- */
.measure{max-width:44rem}
.price-grid{display:grid;gap:1.1rem;margin:2rem 0}
.price-grid .card{margin:0}
.price-grid h2{margin-top:0;font-size:var(--fs-lg)}
.price{font-family:var(--serif);font-size:var(--fs-xl);line-height:1;margin:.2rem 0 1rem}
.price-grid ul{margin:0 0 1.2rem 1.2rem;display:grid;gap:.5rem}
.price-grid .card-accent h2{margin-bottom:.8rem}
.plan-option{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 0;border-top:1px solid var(--rule)}
.plan-option small{display:block}
.price-line{margin-left:.6rem;font-family:var(--mono);font-size:var(--fs-sm)}
.card ul+p,.card ul+.stack{margin-top:1rem}

/* ---------- credential, legal ---------- */
.credential-note{margin-top:1.8rem}
.plain+.muted{margin-top:.8rem}
.legal h2{margin-top:2.2rem}
.legal p+p,.legal ul+p,.legal table+p{margin-top:.85rem}
.legal ul{margin:.7rem 0 .7rem 1.3rem}
.legal code{background:var(--marker-soft);padding:0 .3rem;border-radius:4px}
.legal-flag{background:var(--marker);color:var(--on-marker);padding:0 .25rem;border-radius:4px;font-size:.92em}

/* ---------- motion: one entrance, one hover ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:rise .7s var(--ease) both}
.hero-copy>:first-child{animation-delay:0s}
.hero-copy>:nth-child(2){animation-delay:.06s}.hero-copy>:nth-child(3){animation-delay:.12s}.hero-copy>:nth-child(4){animation-delay:.18s}
.hero-art{animation:rise .9s .2s var(--ease) both}
.sample .meter-fill{animation:grow 1s .5s var(--ease) both;transform-origin:left}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .split,.start-split,.book-band{grid-template-columns:1fr}
  .start-aside{position:static;order:2}
  .steps{grid-template-columns:1fr;gap:1.8rem}
  .steps li{padding:0 0 0 3.6rem}
  .steps li::before{position:absolute;left:0;top:0;margin:0}
  .steps li:not(:last-child)::after{left:1.3rem;right:auto;top:2.8rem;bottom:-1.6rem;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--rule-strong) 0 6px,transparent 6px 12px)}
  .book-band img{width:7rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:720px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{justify-self:start;max-width:none}
}
@media (min-width:760px){
  .price-grid{grid-template-columns:1fr 1.25fr;max-width:60rem}
  .lab-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .nav a{padding:.5rem .55rem}
  .actions .btn{flex:1 1 100%}
  .session{grid-template-columns:1fr;gap:.3rem}
  .stats{grid-template-columns:1fr}
  .stats li+li{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .bar-row{grid-template-columns:5.5rem 1fr 3.4rem}
  .area .pip{width:1.1rem}
  .area{padding:.8rem .9rem}
  .plan-option{flex-direction:column;align-items:stretch}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  @view-transition{navigation:none}
}
@media print{
  .site-header,.site-footer,.skip{display:none}
  body{background:#fff;color:#000}
}