/* ============================================================
   Components + layout. NO raw brand colours here: everything comes from tokens.css.
   Calm Teal v3 (Pixel PREMIUM.md) + Reuben's frosted-glass finish, 2026-10-17.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color-scheme:light;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--font-body);color:var(--text);-webkit-font-smoothing:antialiased;background:var(--bg);min-height:100vh;position:relative;isolation:isolate}
/* ambient washes: fixed, very soft, behind everything */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--bg-glow)}
img,svg{max-width:100%}
a{color:var(--primary);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{color:var(--primary-hover)}
h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--tracking-head);line-height:var(--lh-head);font-weight:650;margin:0 0 var(--s4);color:var(--text)}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p{margin:0 0 var(--s4)}
.hero-title{font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:var(--tracking-hero);font-weight:700;margin-bottom:var(--s5)}
.grad,.hl{color:var(--primary)}   /* highlighted word: solid teal, never gradient text */
.eyebrow{display:block;font:500 var(--fs-xs)/1.3 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--muted)}
.lead{font-size:var(--fs-lg);color:var(--text-2);max-width:540px;line-height:1.6}
.mono{font-family:var(--font-mono)}
.muted{color:var(--muted)}.small{font-size:var(--fs-sm)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--primary);color:var(--primary-ink);padding:10px 14px;border-radius:var(--r-md)}.skip:focus{left:16px}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s5)}
.narrow{max-width:var(--container-narrow)}
section{margin:var(--s9) 0}
.section-head{margin-bottom:var(--s6);max-width:680px}.section-head h2{margin-bottom:var(--s2)}.section-head .eyebrow{margin-bottom:var(--s3)}
.ic-svg{width:24px;height:24px;flex:none}

/* ---- surfaces ---- */
.panel{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--shadow-1)}
/* frosted glass: translucent white, blur + saturate, white hairline inside a #DEE3DF outer, inset top highlight, layered soft shadows */
.glass{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(160%);backdrop-filter:blur(var(--blur-glass)) saturate(160%);border:1px solid var(--glass-edge);border-radius:var(--r-xl);box-shadow:var(--shadow-glass)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass,.class-card,.nav-bar{background:var(--surface-1)}}
@media (prefers-reduced-transparency:reduce){.glass,.class-card,.nav-bar,th{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:var(--surface-1)!important}}

/* ---- nav ---- */
.nav{position:sticky;top:12px;z-index:50;margin:12px auto 0;max-width:var(--container);padding:0 var(--s5)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:64px;padding:0 var(--s2) 0 var(--s5);border-radius:var(--r-lg);background:var(--glass-strong)}
.wordmark{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);text-decoration:none;color:var(--text);font:700 19px/1 var(--font-display);letter-spacing:-.01em}
.wordmark .wm-svg{height:26px;width:auto}
.wordmark img{width:30px;height:30px}.wordmark .wm-accent{color:var(--primary)}.wordmark .wm-cursor{color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;border-radius:var(--r-sm);color:var(--text-2);text-decoration:none;font-size:var(--fs-sm);font-weight:500;transition:color var(--t-fast),background var(--t-fast)}
.nav-links a:hover{color:var(--text);background:var(--hover-tint)}
.nav-links a[aria-current]{color:var(--primary);font-weight:600}
.nav-links a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--primary)}
.nav-cta{margin-left:var(--s2)}
.nav .menu-btn{display:none}
@media (max-width:880px){
  .nav-links{display:none;position:absolute;top:72px;left:var(--s5);right:var(--s5);flex-direction:column;align-items:stretch;padding:var(--s3);border-radius:var(--r-lg);background:var(--surface-1);border:1px solid var(--line);box-shadow:var(--shadow-3)}
  .nav[data-open="true"] .nav-links{display:flex}
  .nav-links a{min-height:48px;font-size:16px}
  .nav-links a[aria-current]::after{left:0;right:auto;top:12px;bottom:12px;width:3px;height:auto}
  .nav-cta{margin:var(--s2) 0 0}
  .nav .menu-btn{display:inline-flex}
}

/* ---- buttons ---- */
.btn{--h:48px;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 22px;border-radius:var(--r-md);font:600 15px/1.1 var(--font-body);text-decoration:none;border:0;cursor:pointer;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out),background var(--t-base),color var(--t-base);white-space:nowrap}
.btn-sm{--h:44px;padding:0 16px;font-size:14px}
.btn-primary{background:var(--grad-brand);color:var(--primary-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(15,118,110,.25),0 6px 14px -8px rgba(15,118,110,.45)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);transform:translateX(-110%);transition:transform 700ms var(--ease-out);pointer-events:none}
.btn-primary:hover{background:var(--grad-brand-hover);color:var(--primary-ink);transform:translateY(-1px)}
.btn-primary:hover::after{transform:translateX(110%)}
.btn-primary:active{background:var(--primary-pressed);transform:scale(.98)}
.btn-ghost{background:var(--surface-1);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-1)}
.btn-ghost:hover{background:var(--bg-sunk);color:var(--text)}
.btn-ghost:active{transform:scale(.98)}
.btn-platinum{background:var(--platinum);color:var(--platinum-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.btn-platinum:hover{color:var(--platinum-ink);background:var(--bg-sunk);transform:translateY(-1px)}
.btn[aria-disabled="true"]{opacity:.7;cursor:not-allowed;transform:none!important}
.btn-light{background:var(--ink);color:var(--on-ink)}.btn-light:hover{background:var(--text-2);color:var(--on-ink)}
.btn .arrow{transition:transform var(--t-base) var(--ease-out)}.btn:hover .arrow{transform:translateX(3px)}
/* loading state (quiz submit) */
.btn.is-loading{pointer-events:none}
.btn.is-loading .arrow{display:none}
.btn.is-loading::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:currentColor;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* ---- badges / chips ---- */
.badge{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:var(--r-pill);font:500 12px/1 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--text-2);background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line-strong)}
.badge .ic-svg{width:14px;height:14px}
.badge-accent{background:var(--selected);color:var(--primary);box-shadow:none}
.badge-soon{color:var(--muted)}
.badge-pro{background:rgba(255,255,255,.1);color:var(--on-ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:var(--r-pill);font:500 12.5px/1 var(--font-mono);color:var(--text-2);background:var(--bg-sunk);border:1px solid var(--line)}
.chip .ic-svg{width:16px;height:16px}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.aff,.paid{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.paid{color:var(--warning);background:var(--warning-bg);padding:2px 9px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--warning-line)}
.paid .ic-svg{width:14px;height:14px}
.conf{font:500 12px/1 var(--font-mono);padding:4px 8px;border-radius:var(--r-pill);margin-left:6px;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text-2)}
.conf-published{color:var(--primary);background:var(--selected);box-shadow:none}
.conf-estimate{color:var(--warning);background:var(--warning-bg);box-shadow:inset 0 0 0 1px var(--warning-line)}
.err{color:var(--error);background:var(--error-bg);border:1px solid var(--error-line);border-radius:var(--r-md);padding:10px 14px;font-size:var(--fs-sm);margin:var(--s4) 0 0}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s8);align-items:start;margin:var(--s8) 0 var(--s8)}
.hero>.stagger{padding-top:var(--s8)}
@media (min-width:961px){.hero>.stagger{position:sticky;top:120px}}
.hero .eyebrow{margin-bottom:var(--s5)}
.hero .actions{margin:var(--s6) 0 var(--s5)}
.trustline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.trustline .ic-svg{width:16px;height:16px;color:var(--primary)}
.stagger>*{animation:fadeUp var(--t-reveal) var(--ease-out) both}
.stagger>*:nth-child(2){animation-delay:60ms}.stagger>*:nth-child(3){animation-delay:120ms}.stagger>*:nth-child(4){animation-delay:180ms}.stagger>*:nth-child(5){animation-delay:240ms}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}
.pedestal{position:relative}
@media (max-width:960px){.hero{grid-template-columns:1fr;gap:var(--s6);margin-top:var(--s7)}.hero>.stagger{padding-top:0}}

/* ---- quiz: the prominent input area ---- */
.quiz{padding:var(--s6)}
.quiz-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-bottom:var(--s3)}
.dots{display:flex;gap:6px}.dots i{display:block;width:28px;height:4px;border-radius:99px;background:var(--line);transition:background var(--t-base),width var(--t-base) var(--ease-out)}
.dots i.done{background:var(--primary)}.dots i.cur{background:var(--primary);width:40px}
.steps{display:block}
.step{border:0;margin:0;padding:0;min-width:0}
.stepper .steps{display:grid;grid-template-columns:minmax(0,1fr)}.stepper .step{grid-area:1/1}
.q-title{font:600 var(--fs-h3)/1.3 var(--font-display);letter-spacing:var(--tracking-head);padding:0;margin:0 0 var(--s4);color:var(--text)}
.q-title:focus{outline:none}
.q-num{display:block;font:500 var(--fs-xs)/1 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.stepper .q-num{display:none}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.tile{position:relative;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;min-height:64px;padding:12px 36px 12px 14px;border-radius:var(--r-md);background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-1);cursor:pointer;transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),background var(--t-base)}
.tile:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-2)}
.tile input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.tile .ic{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--bg-sunk);color:var(--text-2);transition:background var(--t-base),color var(--t-base)}
.tile .t-label{display:block;font-weight:600;color:var(--text);line-height:1.25}
.tile .t-sub{display:block;font-size:13px;color:var(--muted);line-height:1.35;margin-top:2px}
.tile:has(input:checked){background:var(--selected);box-shadow:inset 0 0 0 2px var(--primary)}
.tile:has(input:checked) .ic{background:var(--primary);color:var(--primary-ink)}
.tile:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.tile .check{position:absolute;top:10px;right:10px;width:18px;height:18px;color:var(--primary);opacity:0;transform:scale(.6);transition:opacity var(--t-base),transform var(--t-base) var(--ease-spring)}
.tile:has(input:checked) .check{opacity:1;transform:none}
.quiz-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line);flex-wrap:wrap}
.quiz-foot .btn-primary{margin-left:auto}
.stepper .step[hidden]{display:none}
.stepper .step.is-entering{animation:stepIn var(--t-step) var(--ease-out) both}
.stepper .step.is-leaving{animation:stepOut var(--t-step) var(--ease-out) both;pointer-events:none}
@keyframes stepIn{from{opacity:0;transform:translateX(20px)}}
@keyframes stepOut{to{opacity:0;transform:translateX(-20px)}}
.stepper.going-back .step.is-entering{animation-name:stepInBack}.stepper.going-back .step.is-leaving{animation-name:stepOutBack}
@keyframes stepInBack{from{opacity:0;transform:translateX(-20px)}}@keyframes stepOutBack{to{opacity:0;transform:translateX(20px)}}
.quiz:not(.stepper) .step:not([hidden])~.step{margin-top:var(--s5)}
.quiz:not(.stepper) .q-title{font-size:17px;margin-bottom:var(--s3)}
.quiz:not(.stepper) .tile{min-height:56px;padding:10px 34px 10px 12px}
.quiz[aria-busy="true"] .tiles{opacity:.6;transition:opacity var(--t-base)}
@media (max-width:520px){.tiles{grid-template-columns:1fr}.quiz{padding:var(--s5) var(--s4)}}

/* ---- class card (result #1): glass, one 3px teal bar on the top edge ---- */
.results-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-template-areas:"main side" "alts side";gap:0 var(--s5);align-items:start}
.r-main{grid-area:main}.results-grid .side{grid-area:side}.r-alts{grid-area:alts}
@media (max-width:960px){.results-grid{grid-template-columns:1fr;grid-template-areas:"main" "alts" "side";gap:0}.results-grid .side{margin-top:var(--s6)}}
.class-card{position:relative;border-radius:var(--r-xl);padding:var(--s6);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(160%);backdrop-filter:blur(var(--blur-glass)) saturate(160%);border:1px solid var(--glass-edge);box-shadow:var(--shadow-glass);animation:reveal var(--t-slow) var(--ease-out) both}
.class-card::before{content:"";position:absolute;top:-1px;left:32px;right:32px;height:3px;border-radius:0 0 3px 3px;background:var(--primary)}
@keyframes reveal{from{opacity:0;transform:translateY(10px)}}
.cc-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.tier{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;font:700 20px/1 var(--font-display);color:var(--primary-ink);background:var(--grad-brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.tier[data-tier="B"],.tier[data-tier="C"]{background:var(--surface-1);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.cc-head{display:grid;grid-template-columns:56px 1fr;gap:var(--s4);align-items:center;margin-bottom:var(--s4)}
.cc-ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--selected);color:var(--primary)}
.cc-ic .ic-svg{width:28px;height:28px}
.cc-name{font-size:var(--fs-h2);margin:6px 0 0}
.why{color:var(--text-2)}
.stats{display:grid;gap:12px;margin:var(--s5) 0;padding:var(--s4);border-radius:var(--r-md);background:rgba(255,255,255,.55);border:1px solid var(--line)}
.stats-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.stat{display:grid;grid-template-columns:72px 1fr 40px;align-items:center;gap:12px;font:500 var(--fs-sm)/1 var(--font-mono);color:var(--text-2)}
.bar{height:6px;border-radius:99px;background:var(--bg-sunk);overflow:hidden}
.bar>i{display:block;height:100%;width:var(--v);background:var(--primary);border-radius:inherit;transform-origin:left;animation:fill var(--t-reveal) var(--ease-out) both}
.stat:nth-child(3) .bar>i{animation-delay:80ms}.stat:nth-child(4) .bar>i{animation-delay:160ms}
@keyframes fill{from{transform:scaleX(0)}}
.facts{display:grid;gap:var(--s2);font-size:var(--fs-sm);color:var(--text-2);margin:var(--s4) 0 var(--s5)}
.facts strong{color:var(--text)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--s4);font-size:13px;color:var(--muted)}
.meta .ic-svg{width:16px;height:16px}
.backup{margin-top:var(--s5);padding:var(--s4) var(--s5);border-radius:var(--r-md);background:var(--surface-2);border:1px dashed var(--line-strong);color:var(--text-2)}
.backup strong{color:var(--text)}
.backup .eyebrow{margin-bottom:var(--s2)}

/* compact rows (#2, #3): white, no teal */
.rows{display:grid;gap:var(--s3)}
.row{display:grid;grid-template-columns:44px 1fr auto;gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);border-radius:var(--r-lg);background:var(--surface-1);border:1px solid var(--line);box-shadow:var(--shadow-1);transition:box-shadow var(--t-base),border-color var(--t-base)}
.row:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.row .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--bg-sunk);color:var(--text-2);font:600 14px var(--font-mono)}
.row h3{font-size:18px;margin:0}.row p{margin:2px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.row .price{font:500 13px var(--font-mono);color:var(--text-2)}
@media (max-width:640px){.row{grid-template-columns:44px 1fr}.row .row-cta{grid-column:1/-1}}

/* recap bar */
.recap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s3) var(--s3) var(--s4);border-radius:var(--r-lg);margin:var(--s7) 0 var(--s5)}

/* ---- results: loading skeleton + empty / no-match state ---- */
#results:empty{min-height:420px;border-radius:var(--r-xl);border:1px solid var(--line);background:linear-gradient(90deg,var(--surface-1) 0%,var(--bg-sunk) 50%,var(--surface-1) 100%) 0 0/200% 100%;animation:shimmer 1.4s linear infinite}
#results:empty::before{content:"Finding your class…";display:block;padding:var(--s6);font:500 var(--fs-sm)/1 var(--font-mono);color:var(--muted)}
@keyframes shimmer{to{background-position:-200% 0}}
.empty-state{display:grid;justify-items:start;gap:var(--s3);padding:var(--s7) var(--s6);border-radius:var(--r-xl);background:var(--surface-1);border:1px dashed var(--line-strong);text-align:left;max-width:640px}
.empty-state .es-ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--bg-sunk);color:var(--text-2)}
.empty-state h2{font-size:var(--fs-h3);margin:var(--s2) 0 0}.empty-state p{color:var(--text-2);margin:0}
.empty-state .actions{margin-top:var(--s3)}

/* ---- Pro: inverted ink card, white button (Pixel v3) ---- */
.pro-card{position:relative;border-radius:var(--r-xl);padding:var(--s6);background:var(--ink);color:var(--on-ink);box-shadow:var(--shadow-3);overflow:hidden}
.pro-card .shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);transform:translateX(-100%);transition:transform 900ms var(--ease-out);pointer-events:none}
.pro-card:hover .shine{transform:translateX(100%)}
.pro-card h3{margin-top:var(--s4);color:var(--on-ink)}
.pro-card .badge-soon{color:var(--on-ink-2);background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.pro-card strong{color:var(--on-ink)}
.pro-card a:not(.btn){color:var(--on-ink);text-decoration:underline}
.pro-card :focus-visible{outline-color:var(--on-ink)}
.ticks{list-style:none;padding:0;margin:var(--s4) 0 var(--s5);display:grid;gap:10px;color:var(--text-2)}
.pro-card .ticks{color:var(--on-ink-2)}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.ticks .ic-svg{width:18px;height:18px;color:var(--primary);margin-top:3px}
.pro-card .ticks .ic-svg{color:var(--on-ink)}
.fine{font-size:13px;color:var(--muted);margin:var(--s3) 0 0}
.pro-card .fine{color:var(--on-ink-2)}
.price-tag{font:700 var(--fs-h2)/1 var(--font-display);color:var(--on-ink)}.price-tag small{font:500 14px var(--font-body);color:var(--on-ink-2)}

/* ---- grids / cards ---- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{display:block;position:relative;padding:var(--s5);border-radius:var(--r-lg);background:var(--surface-1);border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--text);text-decoration:none;transition:transform var(--t-base) var(--ease-out),border-color var(--t-base),box-shadow var(--t-base)}
.card p{color:var(--text-2)}
a.card:hover{transform:translateY(-1px);border-color:var(--line-strong);box-shadow:var(--shadow-2);color:var(--text)}
a.card h3{font-size:18px;margin-bottom:6px;padding-right:28px}a.card p{color:var(--muted);margin:0;font-size:var(--fs-sm)}
a.card .go{position:absolute;top:var(--s5);right:var(--s5);color:var(--faint);transition:color var(--t-base),transform var(--t-base) var(--ease-out)}
a.card:hover .go,a.card:focus-visible .go{color:var(--primary);transform:translateX(3px)}
.class-tile .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--bg-sunk);color:var(--text-2);margin-bottom:var(--s4);transition:background var(--t-base),color var(--t-base)}
a.class-tile:hover .ic{background:var(--selected);color:var(--primary)}
.class-tile .chips{margin-top:var(--s4)}
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s6);padding:var(--s4) var(--s5);border-radius:var(--r-lg);background:rgba(239,238,232,.7);border:1px solid var(--line);font:500 var(--fs-xs)/1.4 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--muted)}
.how{counter-reset:n}.how-step{padding-top:var(--s5);border-top:1px solid var(--line-strong)}.how-step .n{display:block;font:500 28px/1 var(--font-mono);color:var(--primary);margin-bottom:var(--s4)}
.changelog ul{list-style:none;padding:0;margin:0;display:grid;gap:0}.changelog li{display:grid;grid-template-columns:110px 1fr;gap:var(--s3);color:var(--text-2);font-size:var(--fs-sm);padding:10px 0;border-top:1px solid var(--line)}
.changelog time{font:500 13px var(--font-mono);color:var(--muted)}
.compare-table th:first-child,.compare-table td:first-child{width:22%}

/* ---- pricing ---- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:stretch}
@media (max-width:760px){.plans{grid-template-columns:1fr}}
.plan h3{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}

/* ---- newsletter ---- */
.newsletter{padding:var(--s7) var(--s6);display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s6);align-items:center}
.newsletter .sample{list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;gap:8px;font:500 13px/1.5 var(--font-mono);color:var(--text-2)}
.newsletter .sample li::before{content:"› ";color:var(--primary)}
@media (max-width:860px){.newsletter{grid-template-columns:1fr;padding:var(--s6) var(--s5)}}

/* ---- long-form pages (compare / guides / faq) ---- */
.page-head{margin:var(--s6) 0 var(--s6);max-width:820px}
.page-head h1{margin-bottom:var(--s3)}
.crumbs{font:500 var(--fs-xs)/1 var(--font-mono);letter-spacing:.04em;color:var(--muted);margin:var(--s6) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.crumbs a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 4px}.crumbs a:hover{color:var(--text)}
.crumbs [aria-current]{color:var(--text-2)}
.verdict,.tldr{position:relative;padding:var(--s5) var(--s5) var(--s5) var(--s6);border-radius:var(--r-lg);background:var(--surface-1);border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--text-2);margin:var(--s5) 0;max-width:820px}
.verdict::before,.tldr::before{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--primary)}
.verdict strong,.tldr strong{color:var(--text)}
.prose{max-width:var(--container-narrow)}.prose h2{font-size:clamp(22px,2.4vw,28px);margin-top:var(--s7)}.prose h3{margin-top:var(--s5)}.prose p,.prose li{color:var(--text-2)}
.prose h2[id]{scroll-margin-top:96px}
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface-1);box-shadow:var(--shadow-1);margin:var(--s5) 0}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child>*{border-bottom:0}
thead th{font:500 12px/1.3 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--muted);background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(160%);backdrop-filter:blur(var(--blur-glass)) saturate(160%);box-shadow:var(--glass-hi);border-bottom:1px solid var(--line-strong)}
th{color:var(--text)}
tbody th{font:600 var(--fs-sm)/1.45 var(--font-body);letter-spacing:0;text-transform:none;color:var(--text);background:none}
tbody tr:nth-child(even){background:rgba(239,238,232,.45)}
tbody tr:hover{background:var(--selected)}
td a{display:inline-flex;align-items:center;min-height:var(--tap)}
details{border-radius:var(--r-lg);background:var(--surface-1);border:1px solid var(--line);margin:var(--s3) 0;transition:border-color var(--t-base)}
details[open]{border-color:var(--line-strong)}
summary{cursor:pointer;font-weight:600;padding:var(--s4) var(--s5);min-height:var(--tap);list-style-position:inside;border-radius:var(--r-lg)}
summary:hover{color:var(--primary)}
details>:not(summary){padding:0 var(--s5)}details>p:last-child{padding-bottom:var(--s4)}
.cta-band{text-align:center;padding:var(--s7) var(--s5)}
.cta-band p{margin-left:auto;margin-right:auto}

/* ---- long-form layout: reading column + slim sticky right rail (≥1100px) ---- */
.doc{display:block}
.doc-rail{display:none}
@media (min-width:1100px){
  .doc{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar);gap:var(--s8);align-items:start}
  .doc-rail{display:grid;gap:var(--s4);position:sticky;top:100px;max-height:calc(100vh - 120px);overflow:auto;padding:2px}
}
.toc{padding:var(--s4) 0 var(--s4) 0}
.toc .eyebrow{margin:0 0 var(--s3) var(--s4)}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:flex;align-items:center;min-height:36px;padding:6px var(--s3) 6px var(--s4);margin-left:-1px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:13.5px;line-height:1.35;transition:color var(--t-fast),border-color var(--t-fast)}
.toc a:hover{color:var(--text)}
.toc a[aria-current="true"]{color:var(--primary);border-left-color:var(--primary);font-weight:600}
.rail-cta{padding:var(--s4);border-radius:var(--r-lg)}
.rail-cta p{font-size:13.5px;color:var(--text-2);margin:0 0 var(--s3)}
.rail-cta .btn{width:100%}

/* ---- footer ---- */
.footer{border-top:1px solid var(--line);margin-top:var(--s9);padding:var(--s7) 0 var(--s8);color:var(--muted);font-size:var(--fs-sm);background:rgba(239,238,232,.75)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6)}
.footer p{color:var(--text-2)}.footer p.small{color:var(--muted)}
.footer nav{display:flex;flex-direction:column}
.footer nav .eyebrow{margin-bottom:var(--s2)}
.footer nav a{color:var(--text-2);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap)}
.footer nav a:hover{color:var(--primary)}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr}}

/* ---- scroll reveal (transform only: content is never transparent, contrast holds at every frame) ---- */
.js .reveal{transform:translateY(10px);transition:transform var(--t-reveal) var(--ease-out)}
.js .reveal.in{transform:none}

/* ---- report (Pro) + print ---- */
.report{max-width:860px;margin:0 auto}
.report section{margin:var(--s6) 0}
.locked{position:relative}
.locked .blur{filter:blur(6px);user-select:none;pointer-events:none;opacity:.6}
.prompt{font:500 13.5px/1.6 var(--font-mono);white-space:pre-wrap;background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);color:var(--text-2)}
ol.steps-list{padding-left:1.2em;color:var(--text-2)}ol.steps-list li{margin:6px 0}
code{font:500 .9em var(--font-mono);background:var(--bg-sunk);padding:1px 5px;border-radius:4px}
@media print{
  body{background:#fff;color:#111}body::before,.nav,.footer,.no-print,.newsletter,.doc-rail{display:none!important}
  .report *{color:#111!important;background:none!important;box-shadow:none!important;border-color:#ccc!important}
  .prompt{border:1px solid #ccc}a{color:#111}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{transform:none}.btn-primary::after{display:none}
}

/* ---- bento / misc ---- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.bento .wide{grid-column:span 2}
@media (max-width:860px){.bento{grid-template-columns:1fr}.bento .wide{grid-column:auto}}
.h3-like{font-size:var(--fs-h3);margin:var(--s7) 0 var(--s4)}
.side{display:grid;gap:var(--s5);align-content:start}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.gamekit{margin-top:var(--s7)}
.example-wrap{max-width:820px;margin:0 auto}
.updated{font:500 var(--fs-xs)/1.4 var(--font-mono);letter-spacing:.04em;color:var(--muted)}
.check-ok{display:inline-flex;align-items:center;gap:6px;color:var(--text)}.check-ok .ic-svg{width:16px;height:16px;color:var(--accent)}
.method li{color:var(--text-2);margin:6px 0}
[hidden]{display:none!important}
/* focus always wins over component styles: teal ring with a bg gap */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.stepper{overflow:hidden}
main{overflow-x:clip}
.hero{overflow-x:clip}
/* 44px hit areas for small standalone/inline links without changing layout */
.stats-head a,.fine a,details a,.facts a,.gamekit p a,.gamekit h3 a,.verdict a,.prose p a,.meta a{display:inline-block;padding:14px 3px;margin:-14px -3px}
.stats-head a,.fine a{padding:13px 0}
@media (pointer:coarse){a.small,.alt a,.pro-card a:not(.btn){display:inline-flex;align-items:center;min-height:44px}}
.changelog li>span{min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.changelog li{grid-template-columns:1fr;gap:2px}}
.recap[hidden]+#results{margin-top:var(--s8)}
.btn.is-loading[aria-disabled="true"]{opacity:1;cursor:progress}

/* ---- homepage "New: Radar for teams" strip (Radar, 2026-10-17) ---- */
.radar-strip{display:flex;align-items:center;gap:var(--s4);margin:var(--s5) 0 0;padding:var(--s4) var(--s5);border-radius:var(--r-lg);text-decoration:none;color:var(--text-2);font-size:var(--fs-sm);transition:transform var(--t-fast) var(--ease-out)}
.radar-strip:hover{color:var(--text);transform:translateY(-1px)}
.radar-strip strong{color:var(--text)}
.radar-strip-t{flex:1}
.radar-strip-cta{color:var(--primary);font-weight:600;white-space:nowrap}
@media (max-width:640px){.radar-strip{flex-wrap:wrap}.radar-strip-cta{width:100%}}

/* ---- Clarity pass (2026-10-17): plain-promise hero, how-it-works, what-you-get ---- */
.hero .hero-title{font-size:clamp(36px,4.6vw,58px);letter-spacing:-.025em;text-wrap:balance}
.hero .eyebrow.hero-brand{color:var(--primary);margin-bottom:var(--s4)}
.hero-for{margin:var(--s3) 0 0;font-weight:600;color:var(--text);font-size:var(--fs-sm)}
.btn-lg{min-height:52px;padding-left:24px;padding-right:24px;font-size:16px}
.how-wrap{margin-top:var(--s8)}
.get .get-card{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.get .get-card .badge{margin-bottom:var(--s2)}
.anchor{display:block;position:relative;top:-96px;visibility:hidden}
#compare,#pick,#picker-form,#newsletter,#classes{scroll-margin-top:96px}
.nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:var(--primary-ink);background:var(--grad-brand);padding:0 16px;font-weight:600}

/* ---- SEO §6.7 fix: keep sr-only "(opens in a new tab)" spans inside the table scroller (no sideways page scroll) ---- */
.table-wrap{position:relative}

/* ============================================================
   FUN PASS (2026-10-17): logo F personality. Sticker cards, charcoal outlines,
   hard offset shadows, bouncy hovers, pixel touches. Colours only via tokens.
   ============================================================ */
body{background:var(--bg)}
body::before{background:var(--dot-grid) 0 0/22px 22px,radial-gradient(900px 600px at 92% -8%,var(--sun-soft),transparent 62%),radial-gradient(800px 600px at -8% 38%,var(--teal-soft),transparent 60%),radial-gradient(700px 520px at 70% 105%,var(--coral-soft),transparent 60%);opacity:.9}
@media (pointer:fine){html{cursor:var(--cursor-pixel)}input[type=email],input[type=text],input[type=search],textarea{cursor:text}}
::selection{background:var(--sun);color:var(--ink)}

/* XP bar: scroll progress across the very top */
.xp-bar{position:fixed;top:0;left:0;right:0;height:5px;z-index:60;pointer-events:none;background:transparent}
.xp-bar i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:repeating-linear-gradient(90deg,var(--accent) 0 10px,var(--sun) 10px 20px);border-bottom:1px solid var(--outline)}

/* nav: chunky sticker bar + logo F */
.nav-bar{border:var(--bw) solid var(--outline);box-shadow:var(--pop);border-radius:var(--r-chunk);background:var(--glass-strong)}
.wordmark{gap:10px;font:700 21px/1 var(--font-display);letter-spacing:-.02em}
.wordmark .wm-logo{width:42px;height:42px;border-radius:12px;border:var(--bw) solid var(--outline);box-shadow:var(--pop-sm);transition:transform var(--t-base) var(--ease-bounce)}
.wordmark:hover .wm-logo{transform:rotate(-8deg) scale(1.06)}
.wordmark .wm-text{color:var(--text)}.wordmark .wm-text .wm-accent{color:var(--accent)}
.nav-links a{border-radius:10px;font-weight:600}
.nav-links a:hover{background:var(--sun-soft)}
.nav-links a[aria-current]::after{height:3px;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 9px)}
@media (max-width:880px){.nav-links{border:var(--bw) solid var(--outline);box-shadow:var(--pop);border-radius:var(--r-chunk)}.nav-links a[aria-current]::after{background:var(--accent)}}

/* buttons: press-able stickers */
.btn{border:var(--bw) solid var(--outline);border-radius:14px;font-weight:700;transition:transform var(--t-base) var(--ease-bounce),box-shadow var(--t-base) var(--ease-bounce),background var(--t-base),color var(--t-base)}
.btn-primary{background:var(--accent);box-shadow:var(--pop)}
.btn-primary:hover{background:var(--accent-hover);transform:translate(-2px,-2px);box-shadow:var(--pop-lg)}
.btn-primary:active{background:var(--accent-press);transform:translate(3px,3px);box-shadow:0 0 0 var(--outline)}
.btn-ghost{background:var(--surface-1);box-shadow:var(--pop-sm)}
.btn-ghost:hover{background:var(--sun);transform:translate(-2px,-2px);box-shadow:var(--pop)}
.btn-ghost:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--outline)}
.btn-light{border-color:var(--on-ink)}
.btn-platinum{border-color:var(--outline);box-shadow:4px 4px 0 var(--sun)}
.btn-platinum:hover{background:var(--sun);transform:translate(-2px,-2px)}
.btn:hover .arrow{transform:translateX(4px)}
.nav-links a.btn-primary,.nav-links a.btn-primary:hover{background:var(--accent);box-shadow:var(--pop-sm)}
.nav-links a.btn-primary:hover{background:var(--accent-hover);transform:translate(-1px,-1px);box-shadow:var(--pop)}
.btn.is-loading::before{border-color:rgba(255,255,255,.4);border-top-color:currentColor}
.menu-btn{box-shadow:var(--pop-sm)}

/* eyebrows become little sticker labels; badges + chips get outlines */
.section-head .eyebrow,.hero .eyebrow.hero-brand,.newsletter>div>.eyebrow,.changelog>.eyebrow,.page-head .eyebrow{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:var(--sun);color:var(--ink);border:var(--bw) solid var(--outline);box-shadow:var(--pop-sm);font-weight:700;transform:rotate(-1.5deg)}
.section-head .eyebrow::before,.hero .eyebrow.hero-brand::before{content:"";width:8px;height:8px;background:var(--ink);clip-path:polygon(0 0,100% 50%,0 100%)}
.section-head:nth-of-type(odd) .eyebrow{transform:rotate(1.2deg)}
.badge{box-shadow:none;border:1.5px solid var(--outline);color:var(--ink);background:var(--surface-1);font-weight:700}
.badge-accent{background:var(--teal-soft);color:var(--ink)}
.badge-soon{background:var(--surface-2);color:var(--text-2)}
.chip{border:1.5px solid var(--outline);background:var(--surface-1);color:var(--ink);font-weight:600}
.class-tile .chip:nth-child(1){background:var(--sun-soft)}.class-tile .chip:nth-child(2){background:var(--teal-soft)}.class-tile .chip:nth-child(3){background:var(--coral-soft)}

/* surfaces: sticker cards */
.card,.panel,.row,.table-wrap,details,.verdict,.tldr,.empty-state{border:var(--bw) solid var(--outline);border-radius:var(--r-chunk);box-shadow:var(--pop)}
.glass{border:var(--bw) solid var(--outline);border-radius:var(--r-chunk);box-shadow:var(--pop),var(--glass-hi)}
.card,.row{transition:transform var(--t-base) var(--ease-bounce),box-shadow var(--t-base) var(--ease-bounce),background var(--t-base)}
a.card:hover,.row:hover{transform:translate(-3px,-3px) rotate(-.4deg);box-shadow:var(--pop-lg);border-color:var(--outline)}
a.card:active{transform:translate(2px,2px);box-shadow:var(--pop-sm)}
a.card .go{color:var(--ink);font-weight:700}
a.card:hover .go{color:var(--accent);transform:translateX(5px)}
.verdict,.tldr{background:var(--sun-soft)}
.verdict::before,.tldr::before{display:none}
details{box-shadow:var(--pop-sm)}details[open]{border-color:var(--outline)}
summary:hover{color:var(--accent)}
thead th{background:var(--sun-soft);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ink);font-weight:700;border-bottom:var(--bw) solid var(--outline)}
tbody tr:hover{background:var(--teal-soft)}

/* hero */
.hero .hero-title .grad{position:relative;display:inline-block;color:var(--accent);z-index:0}
.hero .hero-title .grad::after{content:"";position:absolute;left:-4px;right:-6px;bottom:.06em;height:.3em;z-index:-1;border-radius:6px;background:var(--sun);transform:rotate(-1.2deg) scaleX(var(--hl,1));transform-origin:left;animation:hlIn 700ms 350ms var(--ease-out) both}
@keyframes hlIn{from{transform:rotate(-1.2deg) scaleX(0)}}
.hero>.stagger{position:relative}
.hero-sticker{position:absolute;top:var(--s6);right:4%;width:92px;height:92px;border-radius:22px;border:var(--bw) solid var(--outline);box-shadow:var(--pop);transform:rotate(9deg);animation:bob 4.5s ease-in-out infinite;pointer-events:none}
.hero-sticker img{width:100%;height:100%;border-radius:20px;display:block}
@keyframes bob{0%,100%{transform:rotate(9deg) translateY(0)}50%{transform:rotate(5deg) translateY(-8px)}}
@media (max-width:960px){.hero-sticker{top:-4px;right:0;width:64px;height:64px;border-radius:16px}.hero-sticker img{border-radius:14px}}
@media (min-width:961px){.hero>.stagger{position:sticky}}
.hero-for{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hero-for .who{display:inline-block;padding:3px 9px;border-radius:999px;border:1.5px solid var(--outline);background:var(--surface-1);font-size:13px;font-weight:600;transition:transform var(--t-base) var(--ease-bounce)}
.hero-for .who:nth-child(2){background:var(--sun-soft)}.hero-for .who:nth-child(3){background:var(--teal-soft)}.hero-for .who:nth-child(4){background:var(--coral-soft)}.hero-for .who:nth-child(5){background:var(--surface-2)}
.hero-for .who:hover{transform:translateY(-3px) rotate(-3deg)}
.trustline .ic-svg{color:var(--accent)}

/* quiz: Player 1, character select */
.quiz{background:var(--surface-1)}
.quiz-head .eyebrow#quiz-h{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:700}
.p1{display:inline-block;padding:3px 7px;border-radius:6px;background:var(--coral);color:var(--ink);border:1.5px solid var(--outline);font:700 11px/1 var(--font-mono);letter-spacing:.06em;animation:blink 1.6s steps(2,start) infinite}
@keyframes blink{50%{background:var(--sun)}}
.dots{gap:4px}
.dots i{width:34px;height:12px;border-radius:2px;border:1.5px solid var(--outline);background:var(--surface-2)}
.dots i.done,.dots i.cur{background:repeating-linear-gradient(90deg,var(--accent) 0 6px,var(--accent-hover) 6px 8px)}
.dots i.cur{width:46px;background:repeating-linear-gradient(90deg,var(--sun) 0 6px,var(--sun-2) 6px 8px)}
.q-num{display:flex;align-items:center;gap:8px}
.q-lvl{display:inline-block;padding:3px 6px;border-radius:5px;background:var(--ink);color:var(--on-ink);font:700 10.5px/1 var(--font-mono);letter-spacing:.08em}
.tile{border:var(--bw) solid var(--outline);border-radius:14px;box-shadow:var(--pop-sm);transition:transform var(--t-base) var(--ease-bounce),box-shadow var(--t-base) var(--ease-bounce),background var(--t-base)}
.tile:hover{transform:translate(-2px,-2px);box-shadow:var(--pop);background:var(--sun-soft)}
.tile:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--outline)}
.tile .ic{border:1.5px solid var(--outline);background:var(--surface-2);color:var(--ink);border-radius:10px}
.tile:hover .ic{background:var(--sun)}
.tile:has(input:checked){background:var(--selected);box-shadow:var(--pop-teal);border-color:var(--outline);animation:pick 420ms var(--ease-bounce)}
.tile:has(input:checked) .ic{background:var(--accent);color:var(--accent-ink)}
.tile:has(input:checked)::after{content:"P1";position:absolute;top:-10px;right:-8px;padding:3px 6px;border-radius:6px;background:var(--coral);color:var(--ink);border:1.5px solid var(--outline);font:700 10.5px/1 var(--font-mono);letter-spacing:.06em;transform:rotate(8deg)}
.tile:has(input:checked) .check{opacity:0}
@keyframes pick{0%{transform:scale(1)}35%{transform:scale(.96)}70%{transform:scale(1.03)}100%{transform:scale(1)}}
.quiz-foot{border-top:var(--bw) dashed var(--line-strong)}
.quiz .btn-primary[type=submit]{min-width:200px}

/* trust strip: pixel ticker */
.trust-strip{border:var(--bw) solid var(--outline);border-radius:14px;background:var(--ink);color:var(--on-ink);box-shadow:var(--pop-teal);font-weight:700}
.trust-strip span{display:inline-flex;align-items:center;gap:10px}
.trust-strip span::before{content:"";width:9px;height:9px;background:var(--sun);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}

/* how it works: numbered stickers with a dashed path */
.how{position:relative}
.how-step{border-top:0;padding:var(--s5);border-radius:var(--r-chunk);background:var(--surface-1);border:var(--bw) solid var(--outline);box-shadow:var(--pop);position:relative}
.how-step .n{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;border:var(--bw) solid var(--outline);background:var(--sun);color:var(--ink);font:700 22px/1 var(--font-mono);box-shadow:var(--pop-sm);transform:rotate(-4deg);transition:transform var(--t-base) var(--ease-bounce)}
.how-step:nth-child(2) .n{background:var(--teal-soft);transform:rotate(3deg)}.how-step:nth-child(3) .n{background:var(--coral-soft)}
.how-step:hover .n{transform:rotate(0) scale(1.1)}
@media (min-width:961px){.how-step:not(:last-child)::after{content:"";position:absolute;top:50px;right:calc(-1 * var(--s5) - 2px);width:var(--s5);border-top:3px dashed var(--outline)}}

/* what you get: colour-coded sticker cards */
.get .get-card{border-top-width:10px}
.get .get-card:nth-child(1){border-top-color:var(--accent)}.get .get-card:nth-child(2){border-top-color:var(--sun)}.get .get-card:nth-child(3){border-top-color:var(--coral)}.get .get-card:nth-child(4){border-top-color:var(--ink)}
.get .get-card:nth-child(2):hover{background:var(--sun-soft)}.get .get-card:nth-child(1):hover{background:var(--teal-soft)}.get .get-card:nth-child(3):hover{background:var(--coral-soft)}

/* radar strip */
.radar-strip{border:var(--bw) solid var(--outline);box-shadow:var(--pop);transition:transform var(--t-base) var(--ease-bounce),box-shadow var(--t-base) var(--ease-bounce)}
.radar-strip:hover{transform:translate(-2px,-2px);box-shadow:var(--pop-lg)}

/* icon wells inside cards */
.class-tile .ic,.card .class-tile .ic{border:1.5px solid var(--outline);background:var(--sun-soft);color:var(--ink);border-radius:12px}
.grid-3>.card:nth-child(2) .class-tile .ic{background:var(--teal-soft)}.grid-3>.card:nth-child(3) .class-tile .ic{background:var(--coral-soft)}

/* browse by project = character select */
.bento .class-tile{overflow:hidden}
.bento .class-tile .ic{width:56px;height:56px;border-radius:16px;box-shadow:var(--pop-sm);transition:transform var(--t-base) var(--ease-bounce),background var(--t-base)}
.bento .class-tile .ic .ic-svg{width:28px;height:28px}
.bento .class-tile:nth-child(1) .ic{background:var(--teal-soft)}.bento .class-tile:nth-child(2) .ic{background:var(--sun)}.bento .class-tile:nth-child(3) .ic{background:var(--coral-soft)}.bento .class-tile:nth-child(4) .ic{background:var(--surface-2)}
a.class-tile:hover .ic{transform:rotate(-8deg) scale(1.08);background:var(--sun);color:var(--ink)}
.pick-hint{position:absolute;right:var(--s5);bottom:var(--s5);padding:5px 9px;border-radius:8px;background:var(--ink);color:var(--on-ink);font:700 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity var(--t-base),transform var(--t-base) var(--ease-bounce)}
a.class-tile:hover .pick-hint,a.class-tile:focus-visible .pick-hint{opacity:1;transform:none}
@media (hover:none){.pick-hint{opacity:1;transform:none;position:static;display:inline-block;margin-top:var(--s4)}}
.bento .class-tile .go{display:none}

/* result card */
.class-card{border:var(--bw) solid var(--outline);border-radius:var(--r-chunk);box-shadow:var(--pop-lg);background:var(--surface-1)}
.class-card::before{top:-2px;left:28px;right:28px;height:6px;background:repeating-linear-gradient(90deg,var(--accent) 0 12px,var(--sun) 12px 24px,var(--coral) 24px 36px)}
.tier{border:var(--bw) solid var(--outline);box-shadow:var(--pop-sm);background:var(--sun);color:var(--ink);transform:rotate(-4deg)}
.tier[data-tier="A"]{background:var(--teal-soft)}
.tier[data-tier="B"],.tier[data-tier="C"]{box-shadow:var(--pop-sm);background:var(--surface-2)}
.cc-ic{border:var(--bw) solid var(--outline);background:var(--teal-soft);color:var(--ink);box-shadow:var(--pop-sm)}
.stats{border:1.5px solid var(--outline);background:var(--surface-2)}
.bar{height:12px;border-radius:3px;border:1.5px solid var(--outline);background:var(--surface-1)}
.bar>i{border-radius:0;background:repeating-linear-gradient(90deg,var(--accent) 0 8px,var(--accent-hover) 8px 10px)}
.stat:nth-child(3) .bar>i{background:repeating-linear-gradient(90deg,var(--sun) 0 8px,var(--sun-2) 8px 10px)}
.stat:nth-child(4) .bar>i{background:repeating-linear-gradient(90deg,var(--coral) 0 8px,var(--coral-soft) 8px 10px)}
.backup{border:var(--bw) dashed var(--outline);background:var(--sun-soft)}
.row .ic{border:1.5px solid var(--outline);background:var(--sun-soft);color:var(--ink)}
.recap{border-radius:var(--r-chunk)}
.pro-card{border:var(--bw) solid var(--outline);border-radius:var(--r-chunk);box-shadow:6px 6px 0 var(--sun)}

/* newsletter + changelog */
.newsletter{background:var(--sun-soft)}
.newsletter .sample li::before{content:"▸ ";color:var(--accent)}
.changelog time{display:inline-block;padding:2px 6px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text-2);height:max-content}

/* footer: pixel checker edge */
.footer{position:relative;border-top:0;background:var(--surface-2)}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0) 0 0/12px 12px;opacity:.9}
.gg{margin-top:var(--s5);font:700 var(--fs-xs)/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.gg a{display:inline-flex;align-items:center;min-height:var(--tap);margin-left:6px}

/* scroll reveal: transform only (text never transparent), staggered pop-in for grid children */
.js .reveal{transform:translateY(28px);transition:transform 700ms var(--ease-bounce)}
.js .reveal.in{transform:none}
.js .reveal .pop-kid{transform:translateY(18px) scale(.96) rotate(var(--tilt,0deg));transition:transform 620ms var(--ease-bounce) calc(var(--i,0) * 70ms)}
.js .reveal.in .pop-kid{transform:none}
.js .reveal.in a.card.pop-kid:hover,.js .reveal.in .row.pop-kid:hover{transform:translate(-3px,-3px) rotate(-.4deg)}

@media (prefers-reduced-motion:reduce){
  .hero-sticker,.p1{animation:none!important}
  .js .reveal,.js .reveal .pop-kid{transform:none!important}
  .hero .hero-title .grad::after{animation:none}
  .btn:hover,.btn:active,a.card:hover,.row:hover,.tile:hover,.radar-strip:hover,.tile:has(input:checked){transform:none!important}
}
@media print{.xp-bar,.hero-sticker{display:none!important}}
@media (min-width:861px){.bento .class-tile:nth-child(4){grid-column:span 2}}
@media (max-width:960px){.hero-sticker{top:62px}}
@media (max-width:520px){.hero-sticker{width:54px;height:54px;top:64px}.quiz-head .eyebrow{font-size:11px}}