/* ============================================================
   SPOUDI DESIGN SYSTEM
   Structure derived from Brilliant (web). Palette from the
   Spoudi logo: deep indigo #1E0BB8 on white.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  color-scheme: light;
  /* brand — sampled from logo */
  --brand:        #1E0BB8;
  --brand-deep:   #140682;
  --brand-lift:   #2D1AD6;
  --brand-soft:   #5B76E8;
  --brand-100:    #DCE4FB;
  --brand-050:    #EFF3FE;
  --on-brand:     #FFFFFF;

  /* neutrals — biased 4° toward the brand hue, never pure grey */
  --ink:          #111827;
  --ink-2:        #4B5675;
  --ink-3:        #7A85A0;
  --ink-4:        #AEB6C9;
  --line:         #E3E8F2;
  --line-strong:  #CBD3E4;
  --surface:      #FFFFFF;
  --surface-2:    #FAFBFE;
  --surface-sunk: #EFF2F8;
  --bg:           #F5F7FC;

  /* semantic — risk + feedback, deliberately not the brand hue */
  --safe:         #12A150;
  --safe-bg:      #E6F7EC;
  --warn:         #E8A317;
  --warn-bg:      #FDF3DE;
  --danger:       #E0263C;
  --danger-bg:    #FCE9EB;

  /* leagues */
  --bronze:       #B4703C;
  --silver:       #98A3B3;
  --gold:         #E0A31B;
  --crystal:      #3FBCE0;
  --amethyst:     #8B4FD8;
  --diamond:      #E32749;

  /* elevation — tinted, not black */
  --sh-1: 0 1px 2px rgba(22,21,31,.05);
  --sh-2: 0 2px 8px rgba(22,21,31,.07);
  --sh-3: 0 8px 28px rgba(30,11,184,.13);
  --ring: 0 0 0 3px rgba(30,11,184,.22);

  /* type */
  --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --script: "Pacifico", var(--sans);

  /* scale */
  --t-xs: .6875rem;  --t-sm: .8125rem; --t-base: .9375rem;
  --t-md: 1.0625rem; --t-lg: 1.3125rem; --t-xl: 1.75rem; --t-2xl: 2.25rem;

  /* geometry */
  --r-sm: 5px; --r-md: 9px; --r-lg: 13px; --r-xl: 16px; --r-pill: 999px;
  --page: 1120px;
  --nav-h: 64px;
}

@media (prefers-color-scheme: dark) and (min-width: 99999px) /* brand is light: opt-in only */ {
  :root[data-theme="spoudi-dark-disabled"] {
    --brand:       #7FA6FF;
    --brand-deep:  #4C79E8;
    --brand-lift:  #9DBCFF;
    --brand-soft:  #5F87E8;
    --brand-100:   #1B2A4D;
    --brand-050:   #141E36;
    --on-brand:    #0F0D18;

    --ink:         #F2F1F7;
    --ink-2:       #A9A6BC;
    --ink-3:       #7D7A91;
    --ink-4:       #56536A;
    --line:        #2A2739;
    --line-strong: #3A3650;
    --surface:     #16141F;
    --surface-2:   #1C1A27;
    --surface-sunk:#221F2E;
    --bg:          #0F0E16;

    --safe:        #3DD37F; --safe-bg:   #14633A;
    --warn:        #F0B840; --warn-bg:   #34280D;
    --danger:      #FF6274; --danger-bg: #360F16;

    --bronze:  #D08B52; --silver: #B4BECB; --gold: #F2BB3C;
    --crystal: #5FD4F5; --amethyst: #A875E8; --diamond: #FF4E6B;

    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 2px 10px rgba(0,0,0,.45);
    --sh-3: 0 8px 30px rgba(0,0,0,.55);
    --ring: 0 0 0 3px rgba(142,124,255,.32);
  }
}
:root[data-theme="spoudi-dark-disabled"] {
  --brand:#7FA6FF; --brand-deep:#4C79E8; --brand-lift:#9DBCFF; --brand-soft:#5F87E8;
  --brand-100:#1B2A4D; --brand-050:#141E36; --on-brand:#0F0D18;
  --ink:#F2F1F7; --ink-2:#A9A6BC; --ink-3:#7D7A91; --ink-4:#56536A;
  --line:#2A2739; --line-strong:#3A3650;
  --surface:#16141F; --surface-2:#1C1A27; --surface-sunk:#221F2E; --bg:#0F0E16;
  --safe:#3DD37F; --safe-bg:#14633A; --warn:#F0B840; --warn-bg:#34280D;
  --danger:#FF6274; --danger-bg:#360F16;
  --bronze:#D08B52; --silver:#B4BECB; --gold:#F2BB3C;
  --crystal:#5FD4F5; --amethyst:#A875E8; --diamond:#FF4E6B;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 2px 10px rgba(0,0,0,.45);
  --sh-3:0 8px 30px rgba(0,0,0,.55); --ring:0 0 0 3px rgba(142,124,255,.32);
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}
h1,h2,h3,h4 { margin: 0; text-wrap: balance; letter-spacing: -.021em; line-height: 1.2; }
h1 { font-size: var(--t-xl); font-weight: 700; }
h2 { font-size: var(--t-lg); font-weight: 700; }
h3 { font-size: var(--t-md); font-weight: 650; }
p  { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--brand); text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }

.num { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.eyebrow {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.muted { color: var(--ink-2); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- 3. WORDMARK ---------- */
.wordmark {
  font-family: var(--script);
  font-size: 1.375rem; line-height: 1; color: var(--brand);
  letter-spacing: 0; padding-block: .1em; user-select: none;
}
.wordmark--invert { color: #fff; }

/* ---------- 4. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 9px; font-weight: 650; font-size: var(--t-base);
  padding: .75rem 1.375rem; min-height: 46px; white-space: nowrap;
  transition: background .16s ease, box-shadow .16s ease;   /* no transform or opacity: GSAP owns those, and a CSS transition on them made a from() record its end mid-fade (the hero's Start button stayed invisible) */
}
.btn:active { transform: translateY(1px) scale(.994); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 36px; padding: .375rem .875rem; font-size: var(--t-sm); }
.btn--lg { min-height: 54px; font-size: var(--t-md); padding-inline: 1.75rem; }

/* dark pill — Brilliant's workhorse primary */
.btn--ink { background: var(--ink); color: var(--surface); }
.btn--ink:hover { background: color-mix(in oklab, var(--ink) 86%, var(--brand)); }

/* brand — reserved for the single forward action on a screen */
.btn--brand { background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-2); }
.btn--brand:hover { background: var(--brand-lift); }

.btn--ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover { background: var(--surface-sunk); }
.btn--quiet { color: var(--ink-2); padding-inline: .75rem; }
.btn--quiet:hover { color: var(--ink); }
.btn--safe { background: var(--safe); color: #fff; }

/* premium: flat brand blue, like every other primary action (no gradient, no glow) */
.btn--premium { color: #fff; background: var(--brand); }
.btn--premium:hover { background: var(--brand-lift); }

/* ---------- 5. STAT PILLS (top bar) ---------- */
.stat {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: .3rem .625rem; font-weight: 700; font-size: var(--t-sm);
  background: var(--surface); color: var(--ink);
}
.stat svg { width: 15px; height: 15px; display: block; }
.stat--streak { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 34%, var(--line)); }
.stat--xp     { color: var(--brand); border-color: color-mix(in oklab, var(--brand) 30%, var(--line)); }
.stat--energy { color: var(--safe); border-color: color-mix(in oklab, var(--safe) 32%, var(--line)); }

/* ---------- 6. SURFACES ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.card--flat { box-shadow: none; }
.card--sunk { background: var(--surface-sunk); border-color: transparent; box-shadow: none; }
.card--pad { padding: 1.125rem; }
.card--tap { cursor: pointer; transition: border-color .16s, box-shadow .16s, transform .12s; text-align: left; width: 100%; }
.card--tap:hover { border-color: var(--brand-soft); box-shadow: var(--sh-2); }
.card--tap:active { transform: translateY(1px); }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- 7. BADGES ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .045em;
  text-transform: uppercase; padding: .2rem .5rem; border-radius: 6px;
  background: var(--surface-sunk); color: var(--ink-2);
}
.badge--new     { background: var(--safe-bg);  color: var(--safe); }
.badge--trending{ background: var(--warn-bg);  color: #9A6B04; }
.badge--premium { background: var(--brand); color: #fff; }
.badge--free    { background: var(--brand-100); color: var(--brand); }
:root[data-theme="spoudi-dark-disabled"] .badge--trending,
:root[data-theme="spoudi-dark-disabled"] .badge--trending { color: var(--warn); }

/* ---------- 8. RISK GAUGE (manometer) ---------- */
.gauge { display: block; width: 100%; max-width: 260px; margin-inline: auto; }
.gauge__track { fill: none; stroke: var(--surface-sunk); stroke-linecap: round; }
.gauge__arc   { fill: none; stroke-linecap: round; }
.gauge__pin   { fill: var(--ink); }
.gauge__tick  { stroke: var(--ink-4); stroke-width: 2; stroke-linecap: round; }
.gauge__label { fill: var(--ink-3); font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: .06em; }
.gauge__value { fill: var(--ink); font-size: 34px; font-weight: 800; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.gauge__unit  { fill: var(--ink-3); font-size: 12px; font-weight: 700; font-family: var(--sans); letter-spacing: .08em; }

.risk-word { font-weight: 800; letter-spacing: -.01em; }
.risk-low    { color: var(--safe); }
.risk-medium { color: var(--warn); }
.risk-high   { color: var(--danger); }

/* ---------- 9. METER (legitimacy / progress bars) ---------- */
.meter { height: 8px; border-radius: var(--r-pill); background: var(--surface-sunk); overflow: hidden; }
.meter__fill { height: 100%; width: 100%; border-radius: inherit; background: var(--brand); transform-origin: left center; will-change: transform; }
.meter__fill--safe { background: var(--safe); }
.meter__fill--warn { background: var(--warn); }
.meter__fill--danger { background: var(--danger); }

/* lesson progress rail, as Brilliant's lesson header */
.rail { height: 10px; border-radius: var(--r-pill); background: var(--surface-sunk); overflow: hidden; flex: 1; }
.rail__fill { height: 100%; width: 100%; background: var(--safe); border-radius: inherit; transform-origin: left center; will-change: transform; }

/* ---------- 10. LOCKED / PAYWALL ---------- */
.locked { position: relative; border-radius: var(--r-md); overflow: hidden; }
.locked__blur { filter: blur(7px); opacity: .5; pointer-events: none; user-select: none; }
.locked__veil {
  position: absolute; inset: 0; display: grid; place-content: center; gap: .625rem;
  justify-items: center; text-align: center; padding: 1rem;
  background: color-mix(in oklab, var(--surface) 62%, transparent);
}
.locked__veil p { font-size: var(--t-sm); color: var(--ink-2); max-width: 26ch; }
.lock-chip {
  display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-xs);
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-100); padding: .25rem .5rem; border-radius: 6px;
}

/* ---------- 11. LEAGUE SHIELD ---------- */
.shield { width: 56px; height: 56px; display: block; overflow: visible; }
.shield--lg { width: 92px; height: 92px; }
/* the aspis: flat gold laurel (two tones), a blue ribbon, a gold stud, a white sheen on the rim */
.sh__stem { fill: none; stroke: #B07D0E; stroke-width: .9; stroke-linecap: round; }
.sh__leaf { fill: #E0A31B; }
.sh__leaf2 { fill: #C48D14; }
.sh__ribbon { fill: var(--brand); }
.sh__banner2 { fill: #12077A; }
.sh__star { fill: #F5C04A; }
.sh__rays { fill: #F5C84B; }
.sh__gem { fill: #fff; stroke: var(--lg2); stroke-width: .6; }
.sh__cr { fill: var(--lg1); } .sh__cr2 { fill: var(--lg2); opacity: .55; }
.sh__crown { fill: #F5C04A; stroke: #B07D0E; stroke-width: .7; stroke-linejoin: round; }
.sh__crown--dark { fill: #2B2238; stroke: #12101A; }
.sh__crowngem { fill: #E0263C; }
.sh__wing { fill: #fff; stroke: #9C8FD8; stroke-width: .6; } .sh__wing2 { fill: #E4DCFB; stroke: #9C8FD8; stroke-width: .6; }
.sh--t5 .sh__wing { fill: #2E2340; stroke: #1A1424; } .sh--t5 .sh__wing2 { fill: #8E1230; stroke: #1A1424; }
.sh__stud { fill: #F5C04A; stroke: var(--lg2); stroke-width: .8; }
.sh__sheen { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 1.1; stroke-linecap: round; }
.shield--locked { filter: grayscale(1); opacity: .38; }
.league-bronze   { --lg1:#D69158; --lg2:#8E5228; }
.league-silver   { --lg1:#C2CCD8; --lg2:#78838F; }
.league-gold     { --lg1:#F5C84B; --lg2:#B57F0A; }
.league-crystal  { --lg1:#7FE0F7; --lg2:#2A93B8; }
.league-amethyst { --lg1:#B47CF0; --lg2:#6B31B0; }
.league-diamond  { --lg1:#FF6B82; --lg2:#B20E2C; }

/* ---------- 12. FORM CONTROLS ---------- */
.field {
  display: flex; align-items: center; gap: .625rem;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-pill); padding: .625rem 1rem; transition: border-color .16s, box-shadow .16s;
}
.field:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.field input { border: 0; outline: 0; background: none; width: 100%; font-size: var(--t-base); }
.field input::placeholder { color: var(--ink-3); }
.field svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }

/* selectable row — Brilliant's onboarding answer list */
.option {
  display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: .875rem 1rem; font-weight: 600;
  transition: border-color .14s, background .14s, transform .12s;
}
.option:hover { border-color: var(--brand-soft); }
.option:active { transform: translateY(1px); }
.option[aria-pressed="true"], .option.is-on { border-color: var(--brand); background: var(--brand-050); color: var(--brand-deep); }
:root[data-theme="spoudi-dark-disabled"] .option[aria-pressed="true"],
:root[data-theme="spoudi-dark-disabled"] .option.is-on { color: var(--brand-lift); }
.option--correct { border-color: var(--safe); background: var(--safe-bg); color: var(--safe); }
.option--wrong   { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.option__key {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 6px; background: var(--surface-sunk); color: var(--ink-3);
  font-size: var(--t-xs); font-weight: 800;
}

/* filter chips */
.chip {
  border-radius: var(--r-pill); padding: .4rem .875rem; font-size: var(--t-sm);
  font-weight: 650; background: var(--surface); color: var(--ink-2);
  border: 1.5px solid var(--line); white-space: nowrap; transition: .14s;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.chip-row { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-block: .125rem; }
.chip-row::-webkit-scrollbar { display: none; }

/* ---------- 13. LAYOUT SHELL — desktop first ---------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__in {
  max-width: var(--page); margin-inline: auto;
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 2rem; min-height: 62px;
}
.topbar__stats { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.desknav { display: flex; gap: .125rem; margin-left: 1.5rem; align-self: stretch; }
.deskitem {
  display: inline-flex; align-items: center; gap: .4rem; padding: 0 .875rem;
  font-weight: 650; font-size: var(--t-base); color: var(--ink-2);
  border-bottom: 2.5px solid transparent; transition: color .14s, border-color .14s;
}
.deskitem:hover { color: var(--ink); }
.deskitem.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.deskitem svg { width: 17px; height: 17px; }

.view {
  flex: 1; width: 100%; max-width: var(--page); margin-inline: auto;
  padding: 2.25rem 2rem 5rem;
  display: flex; flex-direction: column; gap: 2rem;
}
.view--narrow { max-width: 760px; }

/* Brilliant's two-column body: sticky detail card left, path or list right */
.split { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.split__aside { position: sticky; top: 86px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }

/* scrolling shelf for New / Trending rows */
.shelf {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 286px); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  padding-block: .125rem .5rem;
}
.shelf::-webkit-scrollbar { display: none; }
.shelf > * { scroll-snap-align: start; }

/* bottom nav — small screens only (from the app flow diagram) */
.bottomnav { display: none; }

/* ---------- 14. SECTION HEADS ---------- */
.section { display: flex; flex-direction: column; gap: 1rem; }
.section__head { display: flex; align-items: baseline; gap: .75rem; }
.section__head h2 { font-size: var(--t-lg); }
.section__more { margin-left: auto; font-size: var(--t-sm); font-weight: 650; color: var(--brand); }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.row { display: flex; align-items: center; gap: .75rem; }

/* ---------- 15. HUSTLE CARD ---------- */
.hustle { display: flex; flex-direction: column; overflow: hidden; }
.hustle__art { aspect-ratio: 2/1; display: grid; place-items: center; position: relative; background: var(--art, var(--brand-050)); }
.hustle__art > span > svg { width: 56px; height: 56px; }
.hustle__tags { position: absolute; top: .625rem; left: .625rem; display: flex; gap: .3rem; }
.hustle__body { padding: .9375rem 1rem 1.0625rem; display: flex; flex-direction: column; gap: .4375rem; }
.hustle__title { font-size: var(--t-md); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.hustle__meta { display: flex; align-items: center; gap: .5rem; font-size: var(--t-xs); color: var(--ink-2); font-weight: 600; }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); flex: none; }
.riskdot { display: inline-flex; align-items: center; gap: .3rem; font-weight: 750; }
.riskdot::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- 16. LESSON PATH ---------- */
.path { display: flex; flex-direction: column; align-items: center; padding-block: .5rem 1rem; }
.path__level {
  align-self: stretch; display: flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1.5px solid var(--brand); color: var(--brand); border-radius: var(--r-pill);
  padding: .5625rem 1rem; font-weight: 750; font-size: var(--t-sm);
  margin-bottom: 1.25rem; background: var(--surface);
}
.node { display: grid; place-items: center; position: relative; }
.node__btn {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line);
  box-shadow: 0 4px 0 var(--line); transition: transform .12s, box-shadow .12s;
}
.node__btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.node__btn svg { width: 32px; height: 32px; color: var(--ink-4); }
.node.is-done .node__btn { background: var(--brand); border-color: var(--brand-deep); box-shadow: 0 4px 0 var(--brand-deep); }
.node.is-done .node__btn svg { color: #fff; }
.node.is-now .node__btn { border-color: var(--brand); box-shadow: 0 4px 0 var(--brand-deep), 0 0 0 8px var(--brand-100); }
.node.is-now .node__btn svg { color: var(--brand); }
.node.is-locked .node__btn { background: var(--surface-sunk); }
.node__label { margin-top: .5rem; font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); max-width: 13ch; text-align: center; line-height: 1.25; }
.node.is-locked .node__label { color: var(--ink-4); }
.path__link { width: 3px; height: 30px; background: var(--line); border-radius: 2px; margin-block: .25rem; }
.path__link.is-done { background: var(--brand); }
.node__now {
  position: absolute; top: -36px; background: var(--brand); color: #fff;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: 6px; white-space: nowrap;
}
.node__now::after { content:""; position:absolute; left:50%; bottom:-4px; translate:-50% 0; width:8px; height:8px; background: var(--brand); rotate:45deg; }

/* ---------- 17. LESSON RUNNER ---------- */
.lesson { position: fixed; inset: 0; z-index: 100; background: var(--surface); display: flex; flex-direction: column; }
.lesson__top { display: flex; align-items: center; gap: 1rem; padding: 1rem 2rem; }
.lesson__body { flex: 1; overflow-y: auto; padding: 3rem 2rem; }
.lesson__in { max-width: 620px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.5rem; }
.lesson__foot { border-top: 1px solid var(--line); padding: 1.125rem 2rem; background: var(--surface-2); }
.lesson__foot-in { max-width: 620px; margin-inline: auto; display: flex; align-items: center; gap: 1rem; }
.lesson__foot--correct { background: var(--safe-bg); border-top-color: transparent; }
.lesson__foot--wrong { background: var(--danger-bg); border-top-color: transparent; }
.verdict { display: flex; align-items: center; gap: .5rem; font-weight: 800; }
.verdict--ok { color: var(--safe); }
.verdict--no { color: var(--danger); }
.teach { display: flex; flex-direction: column; gap: 1rem; font-size: var(--t-md); line-height: 1.6; }
.teach__callout { background: var(--brand-050); border-left: 3px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 1rem 1.125rem; font-size: var(--t-base); }

/* ---------- 18. MODAL ---------- */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(12,10,26,.52); backdrop-filter: blur(3px); }
.sheet {
  position: fixed; top: 50%; left: 50%; translate: -50% -50%; z-index: 91;
  width: min(680px, calc(100vw - 4rem)); max-height: 88dvh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3);
}
.sheet__grip { display: none; }
@keyframes rise { from { transform: translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

/* ---------- 19. TOAST ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.75rem; translate: -50% 0; z-index: 120;
  background: var(--ink); color: var(--surface); padding: .75rem 1.25rem;
  border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 650; box-shadow: var(--sh-3);
}

/* ---------- 20. NARROW SCREENS ---------- */
@media (max-width: 899px) {
  .desknav { display: none; }
  .topbar__in { padding-inline: 1rem; min-height: 56px; }
  .view { padding: 1.25rem 1rem calc(var(--nav-h) + 2.5rem); gap: 1.5rem; }
  .split { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
  .split__aside { position: static; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .shelf { grid-auto-columns: 74%; margin-inline: -1rem; padding-inline: 1rem; scroll-snap-type: x mandatory; }
  .section__head h2 { font-size: var(--t-md); }
  .lesson__top, .lesson__body, .lesson__foot { padding-inline: 1rem; }
  .lesson__body { padding-block: 1.5rem; }
  .node__btn { width: 66px; height: 66px; }
  .node__btn svg { width: 28px; height: 28px; }

  .bottomnav {
    display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  }
  .bottomnav__in { display: grid; grid-template-columns: repeat(3,1fr); height: var(--nav-h); }
  .navbtn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; position: relative; transition: color .14s;
  }
  .navbtn svg { width: 23px; height: 23px; stroke-width: 1.9; }
  .navbtn.is-on { color: var(--brand); }
  .navbtn.is-on::before { content:""; position:absolute; top:0; width:26px; height:3px; border-radius:0 0 3px 3px; background: var(--brand); }
  .toast { bottom: calc(var(--nav-h) + 1rem); }
  .sheet { width: 100vw; max-width: 100vw; top: auto; bottom: 0; left: 0; translate: none; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom); }
  .sheet__grip { display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: .625rem auto .25rem; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); }
}

/* league shield sizes */
.shield--sm { width: 34px; height: 34px; }

/* ---------- 21. ICON SIZING ----------
   Base size for every ico() svg. Component rules that target
   `X svg` are more specific and keep overriding this. */
.ic { width: 20px; height: 20px; flex: none; }
.ic-14 { width: 14px; height: 14px; }
.ic-16 { width: 16px; height: 16px; }
.ic-22 { width: 22px; height: 22px; }
.ic-26 { width: 26px; height: 26px; }
.ic-30 { width: 30px; height: 30px; }
.ic-32 { width: 32px; height: 32px; }

/* shelves must not compress their cards */
.shelf { grid-auto-columns: 286px; }
@media (max-width: 899px) { .shelf { grid-auto-columns: 74%; } }

/* keep card titles to two lines so a row stays aligned */
.hustle__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.hustle__body .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 21. ICON SIZING ----------
   Base size for every ico() svg. Component rules that target
   `X svg` are more specific and keep overriding this. */
.ic { width: 20px; height: 20px; flex: none; }
.ic-14 { width: 14px; height: 14px; }
.ic-16 { width: 16px; height: 16px; }
.ic-22 { width: 22px; height: 22px; }
.ic-26 { width: 26px; height: 26px; }
.ic-30 { width: 30px; height: 30px; }
.ic-32 { width: 32px; height: 32px; }

/* shelves must not compress their cards */
.shelf { grid-auto-columns: 286px; }
@media (max-width: 899px) { .shelf { grid-auto-columns: 74%; } }

/* keep card titles to two lines so a row stays aligned */
.hustle__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.hustle__body .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Flex/grid children default to min-width:auto, which lets a wide
   horizontal shelf push the whole page past the viewport instead of
   scrolling inside its own container. */
.stack, .section, .split > *, .view > * { min-width: 0; }
.shelf { max-width: 100%; }

/* ---------- 22. ROUND 2 ---------- */

/* art band: give it some depth so a single glyph isn't floating in flat colour */
.hustle__art::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 12%, rgba(255,255,255,.75), transparent 62%);
}
.hustle__art > span, .hustle__tags, .artclose { position: relative; z-index: 1; }

/* quiet corner close, not a pill the width of the hero */
.artclose {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border-radius: 50%; display: grid; place-items: center; color: var(--ink-2);
  background: color-mix(in oklab, var(--surface) 72%, transparent);
  backdrop-filter: blur(6px); transition: background .14s, color .14s;
}
.artclose:hover { background: var(--surface); color: var(--ink); }

/* withheld risk reads as withheld, not as a string bug */
.riskdot--locked { color: var(--ink-3); gap: .25rem; }
.riskdot--locked::before { display: none; }

/* detail modal: prose isn't a card, and the sheet ends on one action */
.prose p { line-height: 1.65; max-width: 68ch; }
.sheet__cta { display: flex; gap: .75rem; padding-top: .25rem; }
.sheet__cta .btn:first-child { flex: 2; }
.sheet__cta .btn:last-child { flex: 1; }

/* HOME HERO — the resume card is the largest object on the page */
.hero { overflow: hidden; display: flex; flex-direction: column; }
.hero__art { height: 152px; display: grid; place-items: center; position: relative; background: var(--art, var(--brand-050)); }
.hero__art::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 95% at 50% 10%, rgba(255,255,255,.8), transparent 62%);
}
.hero__art > span { position: relative; z-index: 1; }
.hero__art svg { width: 62px; height: 62px; }
.hero__body { padding: 1.375rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.hero__title { font-size: 1.75rem; font-weight: 700; letter-spacing: -.026em; line-height: 1.18; }
.hero__cta { margin-top: .75rem; }

/* the upsell is not the loudest pixel on the page — the primary action is */
.btn--brandline {
  background: var(--surface); color: var(--brand);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.btn--brandline:hover { background: var(--brand-050); }

/* shelves read as carousels, not as clipped layout */
.shelfwrap { position: relative; }
.shelfwrap::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 10px; width: 64px;
  pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg) 72%);
}
.shelf__next {
  position: absolute; right: 10px; top: calc(50% - 22px); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--sh-2); color: var(--ink); transition: transform .12s;
}
.shelf__next:hover { transform: scale(1.06); }
.shelf { grid-auto-columns: 264px; }

/* secondary shelves sit below the hero, so they get less height */
.shelf .hustle__art { aspect-ratio: 2.1/1; }
.shelf .hustle__title { font-size: var(--t-base); }

@media (max-width: 899px) {
  .shelf { grid-auto-columns: 78%; }
  .shelfwrap::after, .shelf__next { display: none; }
  .hero__title { font-size: 1.375rem; }
  .sheet__cta { flex-direction: column; }
}

/* ---------- 23. THE PATH AS A ROUTE ---------- */
.pathwrap { position: relative; width: 100%; max-width: var(--path-w, 560px); margin-inline: auto; }
.pathwrap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route { fill: none; stroke-width: 9; stroke-linecap: round; }
.route--done { stroke: var(--brand); }
.route--rest { stroke: var(--line-strong); stroke-dasharray: 2 16; }

.pathwrap .node { position: absolute; width: 76px; height: 76px; }
.pathwrap .node__label {
  position: absolute; margin: 0; width: 150px; font-size: var(--t-sm);
  font-weight: 700; color: var(--ink-2); line-height: 1.3; max-width: none; text-align: left;
}
.pathwrap .node__label--l { text-align: right; }

/* locked stones stay solid objects, not four RGB units off the page */
.node.is-locked .node__btn {
  background: var(--surface-sunk);
  border-color: var(--line-strong);
  box-shadow: 0 4px 0 var(--line-strong);
}
:root[data-theme="spoudi-dark-disabled"] .node.is-locked .node__btn,
:root[data-theme="spoudi-dark-disabled"] .node.is-locked .node__btn { background: var(--surface-2); }

/* the START badge belongs on its own disc */
.pathwrap .node__now { top: -30px; }

/* a unit heading is a label, not the most button-shaped thing on screen */
.path__level {
  align-self: stretch; display: flex; align-items: center; gap: .875rem;
  border: 0; background: none; border-radius: 0; padding: 0 0 .25rem;
  margin-bottom: 1.5rem; justify-content: flex-start;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.path__level::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- 24. SEGMENTED LESSON PROGRESS ----------
   Indigo, so progress never shares a colour with the correct verdict. */
.segs { display: flex; gap: 4px; flex: 1; min-width: 0; }
.seg { flex: 1; height: 10px; border-radius: 99px; background: var(--surface-sunk); transition: background .3s; overflow: hidden; }
.seg i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transform: scaleX(0); transform-origin: left center; }
.seg.is-done i { transform: none; }
.seg.is-now, .seg.is-done { background: color-mix(in oklab, var(--brand) 42%, var(--surface-sunk)); }

@media (max-width: 899px) {
  .pathwrap { --path-w: 100%; }
  .pathwrap .node__label { width: 104px; font-size: var(--t-xs); }
  .lesson__top .num.muted { display: none; }
}

/* ---------- 25. PLAN PICKER ---------- */
.plan {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .125rem;
  padding: 1.125rem 1rem; border-radius: var(--r-md); text-align: center;
  background: var(--surface); border: 1.5px solid var(--line);
  transition: border-color .14s, background .14s, transform .12s;
}
.plan:hover { border-color: var(--brand-soft); }
.plan:active { transform: translateY(1px); }
.plan.is-on { border-color: var(--brand); background: var(--brand-050); }
.plan__price { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.03em; }
.plan__tick {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--line); color: transparent; transition: .14s;
}
.plan.is-on .plan__tick { background: var(--brand); color: #fff; }
.plan__save {
  position: absolute; top: -10px; left: 50%; translate: -50% 0;
  background: var(--brand); color: #fff; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .04em; padding: .15rem .45rem; border-radius: 5px; white-space: nowrap;
}

/* ---------- 26. LEAGUE LADDER ---------- */
.ladder {
  list-style: none; margin: .5rem 0 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative;
}
.ladder::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 27px; height: 3px;
  background: var(--line); border-radius: 2px;
}
.rung {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  position: relative; z-index: 1; padding-top: 4px;
}
.rung__badge { filter: grayscale(1); opacity: .42; transition: .2s; line-height: 0; }
.rung.is-reached .rung__badge { filter: none; opacity: 1; }
.rung.is-here { padding-top: 0; }
.rung.is-here .rung__badge { filter: none; opacity: 1; }
.rung__name { font-size: var(--t-xs); font-weight: 700; color: var(--ink-3); text-align: center; line-height: 1.2; }
.rung.is-reached .rung__name { color: var(--ink-2); }
.rung.is-here .rung__name { color: var(--ink); font-weight: 800; }
.rung__xp { font-size: 10px; font-weight: 700; color: var(--ink-4); letter-spacing: .02em; }

@media (max-width: 560px) {
  .ladder { grid-template-columns: repeat(3, 1fr); gap: 1rem .25rem; }
  .ladder::before { display: none; }
}

/* ---------- 27. DENSE CARDS ----------
   The art bands are gone: a 40px mark on the title row carries the
   category, and colour is spent only on badges, risk and the CTA. */
.hustle { height: 100%; padding: .9375rem 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.hustle__head { display: flex; align-items: flex-start; gap: .6875rem; }
.hustle__mark {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface-sunk); color: var(--brand);
}
.hustle__titlewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .0625rem; }
.hustle__title {
  font-size: var(--t-base); font-weight: 700; line-height: 1.28; letter-spacing: -.012em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 0;
}
.hustle__cat { font-size: var(--t-xs); font-weight: 650; color: var(--ink-3); }
.hustle__badges { display: flex; gap: .25rem; flex: none; }
.hustle__badges .badge--premium { padding: .25rem .3rem; }
.hustle__blurb {
  font-size: var(--t-sm); line-height: 1.42;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hustle__meta { margin-top: auto; padding-top: .125rem; }

/* ---------- 28. HOME HERO, FLATTENED ---------- */
.hero { padding: 1.25rem 1.375rem 1.375rem; gap: .625rem; }
.hero__head { display: flex; align-items: flex-start; gap: .875rem; }
.hero__mark {
  flex: none; width: 52px; height: 52px; border-radius: 13px;
  display: grid; place-items: center; background: var(--surface-sunk); color: var(--brand);
}
.hero__headtext { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.hero__cta { align-self: flex-start; min-width: 200px; max-width: 280px; margin-top: .5rem; }

/* ---------- 29. SHELF, EXACTLY THREE ---------- */
.shelf { grid-auto-columns: 208px; }
.shelfwrap::after { opacity: 0; transition: opacity .2s; }
.shelfwrap.is-scrollable::after { opacity: 1; }
.shelf__next { opacity: 0; pointer-events: none; transition: opacity .2s; }
.shelfwrap.is-scrollable .shelf__next { opacity: 1; pointer-events: auto; }

/* the detail sheet keeps one hero band — so its glyph must fill it */
.sheet .hustle__art > span > svg { width: 84px; height: 84px; }

@media (max-width: 899px) {
  .shelf { grid-auto-columns: 78%; }
  .hero__cta { max-width: none; width: 100%; }
}

/* badges sit under the title, so the title keeps the full column */
.hustle__sub { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; margin-top: .125rem; }
.hustle__badges { display: flex; gap: .25rem; }
.hustle__head { align-items: flex-start; }

/* ---------- 30. VERDICT FOOTER ----------
   Success must outrank failure. Previously the wrong-answer button ran
   ~15:1 while the correct one ran under 2:1. */
.lesson__foot-in--verdict { justify-content: center; gap: 1.5rem; max-width: 560px; }
.verdict { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; gap: .625rem; }
.verdict__ring {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: currentColor; flex: none;
}
.verdict__ring svg { color: var(--surface); }
.verdict--ok .verdict__ring svg { color: var(--safe-bg); }
.verdict--no .verdict__ring svg { color: var(--danger-bg); }
.verdict__xp { font-weight: 800; font-size: var(--t-md); opacity: .92; }

/* dark label on the green fill: ~10:1 instead of 1.94:1 */
.btn--safe { background: var(--safe); color: #06301A; font-weight: 750; }
.btn--safe:hover { background: color-mix(in oklab, var(--safe) 88%, #fff); }

/* failure is neutral, not the loudest thing on screen */
.lesson__foot--wrong .btn--ghost {
  background: transparent; color: var(--danger);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.lesson__foot--wrong .btn--ghost:hover { background: color-mix(in oklab, var(--danger) 10%, transparent); }

/* the explanation rule takes the verdict's colour */
.teach__callout--ok { background: var(--safe-bg); border-left-color: var(--safe); }
.teach__callout--no { background: var(--danger-bg); border-left-color: var(--danger); }
:root[data-theme="spoudi-dark-disabled"] .teach__callout--ok,
:root[data-theme="spoudi-dark-disabled"] .teach__callout--ok { color: var(--ink); }

/* ---------- 31. PATH EMPHASIS ---------- */
/* the active node carries roughly twice the weight of its neighbours */
.node.is-now .node__btn { transform: scale(1.2); }
.node.is-now .node__btn:active { transform: scale(1.2) translateY(3px); }
.node.is-now { z-index: 2; }
.pathwrap .node__now { top: -40px; }

.pathwrap .node__label { width: 190px; transition: color .16s; }
.pathwrap .node__label.is-now { color: var(--ink); font-weight: 800; font-size: var(--t-base); }
.pathwrap .node__label.is-locked { color: var(--ink-4); }

/* a chapter boundary you can see while scanning */
.path__levelwrap { display: flex; justify-content: center; margin-bottom: 1.75rem; }
.path__level {
  display: inline-flex; flex-direction: column; align-items: center; gap: .0625rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); padding: .5rem 1.5rem; margin: 0;
  min-width: 220px; text-transform: none; letter-spacing: normal;
}
.path__level::after { display: none; }
.path__level-k {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--brand);
}
.path__level-t { font-size: var(--t-base); font-weight: 700; color: var(--ink); }

/* ---------- 32. DETAIL SHEET, ONE OFFER ---------- */
.sheet__hero { aspect-ratio: auto; height: 132px; }
.sheet__body { padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 1.75rem; }
.sheet__title { font-size: var(--t-xl); letter-spacing: -.028em; }

/* a type tier between title and body, so headings aren't the same as prose */
.secthead { display: flex; flex-direction: column; gap: .125rem; margin-bottom: .125rem; }
.secthead h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.prose-p { line-height: 1.65; max-width: 68ch; }
.guide { margin: 0; padding-left: 1.25rem; gap: .625rem; }
.watchouts { margin: 0; padding-left: 1.1rem; font-size: var(--t-sm); gap: .375rem; }

/* the caveat that makes the numbers honest has to be legible */
.kpi { padding: .875rem; }
.kpi__v { font-size: var(--t-md); font-weight: 800; margin-top: .25rem; letter-spacing: -.02em; }
.kpi__s { font-size: var(--t-sm); color: var(--ink-2); margin-top: .0625rem; }

.playdot {
  width: 46px; height: 46px; border-radius: 50%; background: var(--brand);
  color: #fff; display: grid; place-items: center; flex: none;
}

/* withheld: blurred past reading (over stand-in numbers, app.js), the Premium chip on top */
.locked__dim { filter: blur(9px) grayscale(.4); opacity: .55; pointer-events: none; user-select: none; }
.locked__veil { background: none; align-content: start; justify-items: end; padding: .875rem; }

/* one unlock unit, with the premium column physically lifted */
.offer { display: flex; flex-direction: column; gap: 1rem; }
.offer__head h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.offer__grid { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.offer__row {
  display: grid; grid-template-columns: 1fr 72px 96px; align-items: center;
  padding: .625rem 1rem; font-size: var(--t-sm); border-top: 1px solid var(--line);
}
.offer__row:first-child { border-top: 0; }
.offer__row > span:not(:first-child) { display: grid; place-items: center; }
.offer__row--k { font-weight: 800; font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.offer__x { color: var(--ink-4); display: grid; place-items: center; }
.offer__row svg { color: var(--safe); }
.offer__p {
  position: relative; color: var(--brand); font-weight: 800;
  background: color-mix(in oklab, var(--brand) 7%, transparent);
}
.offer__row--k .offer__p { color: var(--brand); }

/* frequency array — deliberately not a second gauge */
.freq { display: flex; gap: 5px; }
.freq__d { width: 100%; height: 22px; border-radius: 4px; background: var(--surface-sunk); }
.freq__d.is-on { background: var(--ink-2); }

/* one primary, and it is always reachable */
.sheet__foot {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.75rem calc(1rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--line);
}
.sheet__primary { flex: 1; }

@media (max-width: 899px) {
  .sheet__body { padding: 1.25rem 1rem 1.5rem; gap: 1.5rem; }
  .sheet__foot { padding-inline: 1rem; flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
  .offer__row { grid-template-columns: 1fr 56px 72px; }
}

/* ---------- 33. LADDER THAT CLIMBS ----------
   grayscale(1) destroyed five of six tier hues. Dim them instead, and
   let the next rung read as reachable. */
.shield--md { width: 48px; height: 48px; }
.rung__badge { filter: saturate(.36); opacity: .55; }
.rung.is-next .rung__badge { filter: saturate(.92); opacity: .84; }
.rung.is-reached .rung__badge, .rung.is-here .rung__badge { filter: none; opacity: 1; }
.rung.is-next .rung__name { color: var(--ink-2); font-weight: 800; }
.rung.is-next .rung__xp { color: var(--brand); font-weight: 800; }
.ladder::before { top: 30px; }
.rung { gap: .3125rem; }

/* ---------- 34. PAYWALL: PIN THE DECISION ---------- */
.paywall { display: flex; flex-direction: column; max-height: 88dvh; }
.paywall__head { padding: 2.25rem 1.75rem 1.25rem; flex: none; }
.paywall__body { overflow-y: auto; padding: 0 1.75rem 1.25rem; flex: 1; min-height: 0; }
.paywall__foot {
  flex: none; display: flex; flex-direction: column; gap: 1rem;
  padding: 1.25rem 1.75rem calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
}
/* the premium column is lifted out of the table, as Brilliant lifts theirs */
.paywall__pcol {
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  box-shadow: inset 1px 0 0 var(--brand-100), inset -1px 0 0 var(--brand-100);
}
.paywall__pcol--k { border-radius: 8px 8px 0 0; box-shadow: inset 1px 1px 0 var(--brand-100), inset -1px 0 0 var(--brand-100); }

/* onboarding progress is brand, not the correct-answer green */
.rail__fill--brand { background: var(--brand); }

@media (max-width: 899px) {
  .paywall__head { padding: 1.75rem 1rem 1rem; }
  .paywall__body { padding-inline: 1rem; }
  .paywall__foot { padding-inline: 1rem; }
}

/* ---------- 35. LESSON FIGURE ----------
   The subject is money, so the money gets drawn rather than described. */
.fig { margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.fig__cap { font-size: var(--t-sm); font-weight: 650; color: var(--ink-2); }
.fig__cap .num { color: var(--ink); font-weight: 800; }
.fig__bar { display: flex; gap: 3px; height: 52px; }
.fig__seg {
  display: grid; place-items: center; border-radius: 5px;
  font-weight: 800; font-size: var(--t-sm); color: var(--ink-3); min-width: 3px;
}
.fig__seg--c1 { background: color-mix(in oklab, var(--ink-2) 30%, var(--surface-sunk)); }
.fig__seg--c2 { background: color-mix(in oklab, var(--ink-2) 20%, var(--surface-sunk)); }
.fig__seg--c3 { background: color-mix(in oklab, var(--ink-2) 12%, var(--surface-sunk)); }
.fig__seg--hi { background: var(--brand); }
.fig__seg--hidden {
  background: repeating-linear-gradient(45deg, var(--surface-sunk) 0 6px, transparent 6px 12px);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.fig__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.fig__key { display: flex; align-items: center; gap: .4375rem; font-size: var(--t-sm); }
.fig__dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.fig__kl { color: var(--ink-2); }
.fig__kv { font-weight: 800; }

/* ---------- 36. PATH HIERARCHY, RIGHTED ----------
   The lesson you must click is the saturated one; finished lessons recede. */
.node.is-now .node__btn {
  background: var(--brand); border-color: var(--brand-deep);
  box-shadow: 0 5px 0 var(--brand-deep), 0 0 0 10px var(--brand-100);
}
.node.is-now .node__btn svg { color: #fff; }
.node.is-done .node__btn {
  background: var(--surface); border-color: var(--brand-100);
  box-shadow: 0 4px 0 var(--brand-100);
}
.node.is-done .node__btn svg { color: var(--brand); }

.startcard { gap: .5rem; }
.startcard .btn { margin-top: .25rem; }

@media (max-width: 899px) {
  .fig__bar { height: 44px; }
}

/* ---------- 37. WHOP-STYLE TILE ----------
   Flat brand cover with the name reversed out, corner chip, meta beneath.
   One cover hue for the whole grid, as Whop does — the colour budget
   stays with the badges and the risk dots. */
.wcard { padding: 0; display: flex; flex-direction: column; height: 100%; gap: 0; overflow: hidden; }

.wcard__cover {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  gap: .5rem; min-height: 124px; padding: .875rem;
  background: var(--brand);
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.07) 0 1px, transparent 1px 11px);
  transition: filter .16s;
}
.card--tap:hover .wcard__cover { filter: brightness(1.09); }
.wcard__cover.is-locked {
  background: var(--brand-deep);
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.05) 0 1px, transparent 1px 11px);
}
.wcard__chips { position: absolute; top: .625rem; right: .625rem; display: flex; gap: .3rem; }
.wcard__name {
  color: #fff; font-size: var(--t-md); font-weight: 800; line-height: 1.22;
  letter-spacing: -.02em; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.wcard__body {
  padding: .8125rem .875rem .9375rem; display: flex; flex-direction: column;
  gap: .375rem; flex: 1; text-align: left; min-width: 0;
}
.wcard__sub { font-size: var(--t-xs); font-weight: 700; color: var(--ink-3); letter-spacing: .01em; }
.wcard__blurb {
  font-size: var(--t-sm); line-height: 1.42; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wcard__prog { display: flex; align-items: center; gap: .5rem; margin-top: .125rem; }
.wcard__prog .meter { flex: 1; height: 6px; }
.wcard__pct { font-size: var(--t-xs); font-weight: 800; color: var(--ink-2); flex: none; }
.wcard__meta {
  margin-top: auto; padding-top: .25rem; display: flex; align-items: center; gap: .5rem;
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); flex-wrap: wrap;
}

/* the dark ground needs the cover to stay the brightest thing, not glare */


@media (max-width: 899px) {
  .wcard__cover { min-height: 108px; }
}

/* ---------- 38. TILE COVER EARNS ITS HEIGHT ----------
   The mark goes from 20px (1.3% of the cover) to 60px, and the six
   categories get their own deep tone — six families, not a rainbow. */
.wcard__cover { min-height: 142px; gap: .625rem; }
.wcard__cover.cv1 { background: #1E0BB8; }
.wcard__cover.cv2 { background: #2742B8; }
.wcard__cover.cv3 { background: #0E3A8C; }
.wcard__cover.cv4 { background: #1F5A9E; }
.wcard__cover.cv5 { background: #17506B; }
.wcard__cover.cv6 { background: #2C1E8E; }
/* locked stays a cover, not a void against the page */
.wcard__cover.is-locked { background: #3C3568; }


/* chips were built for the dark page, then parked on vivid colour */
.wcard__chips .badge { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.wcard__chips .badge--new { color: #0B7A3B; }
.wcard__chips .badge--trending { color: #8A5D04; }
.wcard__chips .badge--premium { background: var(--brand); color: #fff; }

.card--tap:hover .wcard__cover { filter: brightness(1.18); }

/* the arrow sits in the header line, clear of the tile it points at */
.shelf__next { top: -46px; right: 0; }

/* ---------- 39. DETAIL MODAL RHYTHM ---------- */
.measures { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; align-items: start; }
.sheet__body { gap: 2.5rem; }
.sheet__body .section { gap: .75rem; }
.secthead h3 { font-size: 1.25rem; }

.upsellstrip {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .875rem 1.125rem; border-radius: var(--r-md);
  background: var(--brand-050); border: 1px solid var(--brand-100);
  font-size: var(--t-sm); color: var(--ink-2);
}
.upsellstrip .btn { margin-left: auto; color: var(--brand); font-weight: 750; }

/* true dots, and the failing ones carry the danger hue the gauge uses */
.freq { gap: 7px; }
.freq__d { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.freq__d.is-fail { background: var(--danger); }
.freq__d.is-ok { background: var(--surface-sunk); box-shadow: inset 0 0 0 1.5px var(--line-strong); }

/* the guide is a sequence, so it gets numbered steps and dividers */
.guide { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.guide__step {
  display: flex; gap: .875rem; align-items: flex-start;
  padding: .875rem 0; border-top: 1px solid var(--line); line-height: 1.55;
}
.guide__step:first-child { border-top: 0; padding-top: 0; }
.guide__n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-100);
  color: var(--brand); font-size: var(--t-xs); font-weight: 800;
}

/* the lock chip must never flow into the content it covers */
.locked__veil { position: absolute; inset: 0; }

@media (max-width: 899px) {
  .measures { grid-template-columns: minmax(0,1fr); }
  .shelf__next { display: none; }
}

/* the six tones are deep enough to hold white in either theme, so they
   are not re-specified per theme — a blanket override outranked them. */
.sheet__hero { height: 108px; }
.sheet .hustle__art > span > svg { width: 64px; height: 64px; }

/* ---------- 40. LADDER THAT ACTUALLY CLIMBS ----------
   Opacity and saturation now ramp per rung inline; these rules only
   carry the state cues so nothing overrides the ramp. */
.rung__badge { filter: none; opacity: 1; }
.rung.is-next .rung__badge, .rung.is-reached .rung__badge, .rung.is-here .rung__badge { filter: none; }
.rung.is-here .rung__badge { filter: drop-shadow(0 3px 10px color-mix(in oklab, var(--brand) 45%, transparent)); }
.rung.is-next .rung__badge svg { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 50%; }
.ladder { align-items: end; }
.rung { justify-content: flex-end; }

/* the promotion cut, drawn where it actually falls */
.cutline {
  display: flex; align-items: center; gap: .625rem; padding: .3125rem 1rem;
  background: var(--safe-bg); border-block: 1px solid color-mix(in oklab, var(--safe) 30%, transparent);
}
.cutline span {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--safe);
}
.cutline::before, .cutline::after {
  content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--safe) 34%, transparent);
}

/* ---------- 41. ONBOARDING AS ONE CONFIDENT SCREEN ---------- */
.onb { gap: 1.75rem; }
.onb__head { text-align: center; display: flex; flex-direction: column; gap: .375rem; margin-top: 1.25rem; }
.onb__head h1 { font-size: 2.5rem; }
.onb__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .875rem; }
.onbtile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem;
  padding: 1.25rem; min-height: 132px; border-radius: var(--r-md); text-align: left;
  background: var(--surface); border: 1.5px solid var(--line);
  font-weight: 650; transition: border-color .14s, background .14s, transform .12s;
}
.onbtile:hover { border-color: var(--brand-soft); }
.onbtile:active { transform: translateY(1px); }
.onbtile.is-on { border-color: var(--brand); background: var(--brand-050); }
.onbtile__ic {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--surface-sunk); color: var(--brand);
}
.onbtile.is-on .onbtile__ic { background: var(--brand); color: #fff; }
.onbtile__t { font-size: var(--t-md); line-height: 1.3; letter-spacing: -.015em; }
.onbtile__tick {
  position: absolute; top: 1rem; right: 1rem; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--line); color: transparent; transition: .14s;
}
.onbtile.is-on .onbtile__tick { background: var(--brand); color: #fff; }
.onb__cta { align-self: center; min-width: 260px; margin-top: .5rem; }

/* ---------- 42. PAYWALL PREMIUM COLUMN AS A COLUMN ---------- */
.paywall { max-height: 92dvh; }
.paywall__head { padding-block: 1.75rem .875rem; }
.paywall__pcol {
  background: color-mix(in oklab, var(--brand) 13%, var(--surface));
  box-shadow: inset 1.5px 0 0 var(--brand), inset -1.5px 0 0 var(--brand);
}
.paywall__pcol--k {
  background: var(--brand); color: #fff !important;
  border-radius: 10px 10px 0 0; box-shadow: inset 1.5px 1.5px 0 var(--brand), inset -1.5px 0 0 var(--brand);
}
.paywall__body .row:last-child .paywall__pcol { border-radius: 0 0 10px 10px; box-shadow: inset 1.5px 0 0 var(--brand), inset -1.5px 0 0 var(--brand), inset 0 -1.5px 0 var(--brand); }

@media (max-width: 560px) {
  .onb__grid { grid-template-columns: minmax(0,1fr); }
  .onbtile { min-height: 0; flex-direction: row; align-items: center; }
  .onb__head h1 { font-size: 1.75rem; }
  .onb__cta { width: 100%; }
}

/* ---------- 43. THE TRAIL BEHIND YOU MUST BE VISIBLE ----------
   Completed nodes were 1.24:1 against the page while locked nodes were
   1.67:1 — the lessons you finished were dimmer than the ones you can't
   reach. Completed now lands between locked and current. */
.pathwrap .node { width: 100px; height: 100px; }
.node__btn { width: 100px; height: 100px; }
.node__btn svg { width: 40px; height: 40px; }

.node.is-done .node__btn {
  background: color-mix(in oklab, var(--brand) 34%, var(--surface));
  border-color: var(--brand);
  box-shadow: 0 5px 0 color-mix(in oklab, var(--brand) 55%, var(--surface));
}
.node.is-done .node__btn svg { color: var(--ink); }
:root[data-theme="spoudi-dark-disabled"] .node.is-done .node__btn svg,
:root[data-theme="spoudi-dark-disabled"] .node.is-done .node__btn svg { color: #F2F1F7; }

/* locked drops below completed instead of sitting above it */
.node.is-locked .node__btn {
  background: var(--surface-2);
  border-color: color-mix(in oklab, var(--line) 70%, var(--bg));
  box-shadow: 0 4px 0 color-mix(in oklab, var(--line) 70%, var(--bg));
}
.node.is-now .node__btn { transform: scale(1.15); }
.node.is-now .node__btn:active { transform: scale(1.15) translateY(3px); }

/* the unit banner sits on the node axis and carries real width */
.path__level { min-width: 420px; padding-inline: 2rem; }

/* ---------- 44. FIGURE SEGMENTS TELL APART ----------
   Three near-black greys at ~1.2:1 adjacent made the legend the only
   way to decode the chart. Distinct hues at matched lightness. */
:root { --fig1: #64789C; --fig2: #9C8264; --fig3: #58897F; }
@media (prefers-color-scheme: dark) and (min-width: 99999px) /* brand is light: opt-in only */ {
  :root[data-theme="spoudi-dark-disabled"] { --fig1: #8296BA; --fig2: #BA9E82; --fig3: #76A79C; }
}
:root[data-theme="spoudi-dark-disabled"] { --fig1: #8296BA; --fig2: #BA9E82; --fig3: #76A79C; }
.fig__seg--c1, .fig__dot.fig__seg--c1 { background: var(--fig1); }
.fig__seg--c2, .fig__dot.fig__seg--c2 { background: var(--fig2); }
.fig__seg--c3, .fig__dot.fig__seg--c3 { background: var(--fig3); }
.fig__seg { min-width: 16px; }

/* ---------- 45. ANSWER ROW CONTRAST ----------
   The footer fix never reached the selected option itself. */
.option--correct, .option--wrong { color: var(--ink); }
.option--correct .option__key { background: var(--safe); color: #06301A; }
.option--wrong .option__key { background: var(--danger); color: #fff; }

/* the wrong-state demotion overshot: a transparent ghost made the only
   forward action the faintest thing on screen. Solid, but not a reward. */
.lesson__foot--wrong .btn--ghost {
  background: var(--danger); color: var(--danger-bg);
  box-shadow: none; font-weight: 750;
}
.lesson__foot--wrong .btn--ghost:hover { filter: brightness(1.08); background: var(--danger); }

@media (max-width: 899px) {
  .pathwrap .node, .node__btn { width: 76px; height: 76px; }
  .node__btn svg { width: 30px; height: 30px; }
  .path__level { min-width: 0; padding-inline: 1.25rem; }
}

/* ---------- 46. NODE STATES AS AN EXPLICIT LADDER ----------
   locked < done < current, in fixed values rather than color-mix, so the
   ordering is verifiable rather than inferred. */
:root {
  --node-done-fill: #CBD8F7; --node-done-line: #2A18D4;
  --node-lock-line: #DCDAE6; --on-danger: #FFFFFF;
}
@media (prefers-color-scheme: dark) and (min-width: 99999px) /* brand is light: opt-in only */ {
  :root[data-theme="spoudi-dark-disabled"] {
    --node-done-fill: #23335C; --node-done-line: #4C79E8;
    --node-lock-line: #2A2738; --on-danger: #2A0207;
  }
}
:root[data-theme="spoudi-dark-disabled"] {
  --node-done-fill: #23335C; --node-done-line: #4C79E8;
  --node-lock-line: #2A2738; --on-danger: #2A0207;
}

.node.is-done .node__btn {
  background: var(--node-done-fill);
  border-color: var(--node-done-line);
  box-shadow: 0 5px 0 var(--node-done-line);
}
.node.is-locked .node__btn {
  background: var(--surface-2);
  border-color: var(--node-lock-line);
  box-shadow: 0 4px 0 var(--node-lock-line);
}
.lesson__foot--wrong .btn--ghost { color: var(--on-danger); }

/* ============================================================
   47. HOME, BUILT AGAINST THE BRILLIANT REFERENCE
   ============================================================ */

/* ---- streak card: big count, energy pips, day circles ---- */
.strk { display: flex; flex-direction: column; gap: 1.25rem; }
.strk__top { display: flex; align-items: center; gap: .5rem; }
.strk__n { font-size: 2.5rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.strk__flame { color: var(--warn); display: grid; place-items: center; }
.strk__pips { margin-left: auto; display: flex; gap: .25rem; }
.pip {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface-sunk); color: var(--ink-4);
}
.pip.is-on { background: color-mix(in oklab, var(--safe) 18%, var(--surface)); color: var(--safe); }

.strk__days { display: flex; justify-content: space-between; gap: .25rem; }
.dayc { display: flex; flex-direction: column; align-items: center; gap: .4375rem; }
.dayc__o {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line); color: var(--ink-4); background: var(--surface);
}
.dayc__o.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.dayc__l { font-size: var(--t-sm); font-weight: 700; color: var(--ink-3); }
.dayc__l.is-now { color: var(--ink); font-weight: 800; }

/* ---- premium card: warm ground, illustrated mark, gradient action ---- */
.promo {
  padding: 1.125rem; display: flex; flex-direction: column; gap: 1rem;
  background: #FFF7E8;   /* flat warm ground */
  border-color: transparent;
}
:root[data-theme="spoudi-dark-disabled"] .promo,
:root[data-theme="spoudi-dark-disabled"] .promo {
  background: linear-gradient(145deg, #2B2338 0%, #2E1F33 52%, #221F45 100%);
}
.promo__head { display: flex; gap: .875rem; align-items: flex-start; }
.promo__art {
  width: 48px; height: 48px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: var(--brand); color: #fff;
}
.promo__txt { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.promo__txt strong { font-size: var(--t-base); line-height: 1.3; letter-spacing: -.015em; color: #241B2E; }
.promo__txt span { font-size: var(--t-sm); color: #5C4B66; }
:root[data-theme="spoudi-dark-disabled"] .promo__txt strong,
:root[data-theme="spoudi-dark-disabled"] .promo__txt strong { color: var(--ink); }
:root[data-theme="spoudi-dark-disabled"] .promo__txt span,
:root[data-theme="spoudi-dark-disabled"] .promo__txt span { color: var(--ink-2); }

/* ---- league card with a live leaderboard slice ---- */
.lgc { display: flex; flex-direction: column; gap: 1rem; }
.lgc__head { display: flex; align-items: center; gap: .75rem; }
.lgc__txt { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; }
.lgc__more {
  margin-left: auto; width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; background: var(--surface-sunk); color: var(--ink-2);
}
.lgc__more:hover { background: var(--line); color: var(--ink); }
.lgc__rows { display: flex; flex-direction: column; }
.lgrow {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .5rem; border-radius: var(--r-sm); font-size: var(--t-sm);
}
.lgrow.is-me { background: var(--surface-sunk); }
.lgrow__n { width: 18px; font-weight: 800; color: var(--ink-3); }
.lgrow__a {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: var(--t-xs);
}
.lgrow__nm { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgrow.is-me .lgrow__nm { font-weight: 800; }
.lgrow__x { margin-left: auto; font-weight: 700; color: var(--ink-3); }

/* ---- hero: stacked cards, chip, illustration, next row, full-width start ---- */
.herostack { position: relative; }
.herostack::before, .herostack::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); z-index: 0;
}
.herostack::before { transform: translate(10px, 8px) scale(.985); opacity: .7; }
.herostack::after  { transform: translate(20px, 16px) scale(.97); opacity: .4; }

.hero2 {
  position: relative; z-index: 1; border-radius: var(--r-lg);
  padding: 1.75rem 1.75rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .3125rem;
  box-shadow: var(--sh-2);
}
.chiprec {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-100); padding: .25rem .625rem; border-radius: 7px;
}
.hero2__t { font-size: 2rem; letter-spacing: -.03em; text-align: center; margin-top: .375rem; }
.hero2__lvl {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--brand);
}
.hero2__art { margin: .75rem 0 .5rem; width: 100%; display: grid; place-items: center; }
.ha-a { fill: var(--cvfill); }
.ha-b { fill: rgba(255,255,255,.26); }
.ha-c { fill: rgba(255,255,255,.44); }
.ha-d { fill: var(--warn); }
.ha-legs { stroke: var(--ink-4); stroke-width: 7; stroke-linecap: round; fill: none; }

.hero2__go { border-radius: var(--r-pill); }

/* ---- course switcher row ---- */
.switch { display: flex; gap: .75rem; flex-wrap: wrap; }
.swtile {
  width: 62px; height: 62px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line); color: var(--cvfill, var(--brand));
  transition: border-color .14s, transform .12s, background .14s;
}
.swtile.cv1 { --cvfill: #1E0BB8; } .swtile.cv2 { --cvfill: #5B1FA8; }
.swtile.cv3 { --cvfill: #0E3A8C; } .swtile.cv4 { --cvfill: #7A1F6B; }
.swtile.cv5 { --cvfill: #8A1B3D; } .swtile.cv6 { --cvfill: #2C1E8E; }
.swtile:hover { transform: translateY(-2px); }
.swtile.is-on { border-color: var(--brand); background: var(--brand-050); }
:root[data-theme="spoudi-dark-disabled"] .swtile, :root[data-theme="spoudi-dark-disabled"] .swtile { color: var(--brand-lift); }

@media (max-width: 899px) {
  .herostack::before, .herostack::after { display: none; }
  .hero2 { padding: 1.25rem; }
  .hero2__t { font-size: 1.5rem; }
  .dayc__o { width: 34px; height: 34px; }
  .swtile { width: 54px; height: 54px; }
}

/* ============================================================
   48. COURSE ACCENT SYSTEM
   Brilliant themes the whole surface to the course you are in —
   Start button, level text, selected tile, path node.
   ============================================================ */
.cv1 { --acc: #2A18D4; --acc-soft: #EAE7FD; }
.cv2 { --acc: #3350DB; --acc-soft: #ECE7FD; }
.cv3 { --acc: #14509F; --acc-soft: #E6EEFC; }
.cv4 { --acc: #2F86DC; --acc-soft: #E6EFFA; }
.cv5 { --acc: #1F7A96; --acc-soft: #F2EAFA; }
.cv6 { --acc: #4E3CC8; --acc-soft: #E2F4F7; }
:root[data-theme="spoudi-dark-disabled"] .cv1, :root[data-theme="spoudi-dark-disabled"] .cv1 { --acc: #7FA6FF; --acc-soft: #241F45; }
:root[data-theme="spoudi-dark-disabled"] .cv2, :root[data-theme="spoudi-dark-disabled"] .cv2 { --acc: #8FB4FF; --acc-soft: #2A1C40; }
:root[data-theme="spoudi-dark-disabled"] .cv3, :root[data-theme="spoudi-dark-disabled"] .cv3 { --acc: #5FA0F0; --acc-soft: #16233F; }
:root[data-theme="spoudi-dark-disabled"] .cv4, :root[data-theme="spoudi-dark-disabled"] .cv4 { --acc: #6FB6F5; --acc-soft: #16263C; }
:root[data-theme="spoudi-dark-disabled"] .cv5, :root[data-theme="spoudi-dark-disabled"] .cv5 { --acc: #57C4DC; --acc-soft: #291C3C; }
:root[data-theme="spoudi-dark-disabled"] .cv6, :root[data-theme="spoudi-dark-disabled"] .cv6 { --acc: #9AA6FF; --acc-soft: #103038; }

.btn--acc { background: var(--acc, var(--brand)); color: #fff; box-shadow: var(--sh-2); }
.btn--acc:hover { filter: brightness(1.1); }

.hero2__lvl { color: var(--acc, var(--brand)); }
.chiprec { color: var(--acc, var(--brand)); background: var(--acc-soft, var(--brand-100)); }
.swtile.is-on { border-color: var(--acc, var(--brand)); background: var(--acc-soft, var(--brand-050)); }
.path__level { border-color: var(--acc, var(--brand)); }
.path__level-k { color: var(--acc, var(--brand)); }
.route--done { stroke: var(--acc, var(--brand)); }
.node.is-now .node__btn {
  background: var(--acc, var(--brand)); border-color: var(--acc, var(--brand));
  box-shadow: 0 5px 0 color-mix(in oklab, var(--acc) 70%, #000), 0 0 0 10px var(--acc-soft);
}
.node.is-done .node__btn {
  background: color-mix(in oklab, var(--acc) 30%, var(--surface));
  border-color: var(--acc); box-shadow: 0 5px 0 var(--acc);
}
.startcard .btn--acc { width: 100%; }

/* ---- course page left card, laid out like the reference ---- */
.coursecard { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.coursecard__art { width: 100%; display: flex; justify-content: flex-start; margin-bottom: .25rem; }
.coursecard__t { font-size: 1.5rem; letter-spacing: -.028em; }
.coursecard__meta {
  display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: var(--t-sm);
  font-weight: 650; color: var(--ink-2);
}
.coursecard__meta span { display: inline-flex; align-items: center; gap: .375rem; }
.coursecard .meter { width: 100%; }

/* ============================================================
   49. PAYWALL, REBUILT AGAINST THE REFERENCE
   ============================================================ */
.paywall2 {
  width: min(880px, calc(100vw - 4rem)); max-height: 92dvh; overflow-y: auto;
  background: linear-gradient(135deg, #EFE9FB 0%, #FBE8F2 34%, #FDF0E2 68%, #FEFAF2 100%);
  border-radius: var(--r-lg); padding: 0;
}
:root[data-theme="spoudi-dark-disabled"] .paywall2, :root[data-theme="spoudi-dark-disabled"] .paywall2 {
  background: linear-gradient(135deg, #221C3A 0%, #301E33 38%, #33261E 72%, #1D1A28 100%);
}
.pw__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-2); background: color-mix(in oklab, var(--surface) 60%, transparent);
}
.pw__close:hover { background: var(--surface); color: var(--ink); }
.pw__in {
  padding: 3rem 2.5rem 2rem; display: flex; flex-direction: column;
  align-items: center; gap: 1.75rem;
}
.pw__h {
  font-family: var(--serif); font-weight: 400; font-size: 2.75rem; line-height: 1.12;
  letter-spacing: -.02em; text-align: center; color: var(--ink);
}
.pw__grad {
  background: linear-gradient(96deg, #1E0BB8 0%, #3F63E0 46%, #D9930F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* the premium column is lifted out of the table as its own card */
.pw__tablewrap { position: relative; width: 100%; max-width: 620px; padding-block: .75rem; }
.pw__prem {
  position: absolute; top: 0; bottom: 0; right: 0; width: 132px; border-radius: 16px;
  background: linear-gradient(170deg, #4A6BE8 0%, #7E9BF2 36%, #F0B84A 100%);
  padding: 2.5px; box-shadow: 0 10px 30px rgba(30,11,184,.18);
}
.pw__prem::after {
  content: ""; position: absolute; inset: 2.5px; border-radius: 13.5px; background: var(--surface);
}
.pw__table { position: relative; z-index: 1; }
.pw__r {
  display: grid; grid-template-columns: 1fr 96px 132px; align-items: center;
  padding: .75rem .25rem; font-size: var(--t-base);
  border-top: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
}
.pw__r:first-child { border-top: 0; }
.pw__r > span:not(:first-child) { display: grid; place-items: center; }
.pw__r--head { font-weight: 800; font-size: var(--t-base); border-top: 0; padding-bottom: 1rem; }
.pw__r--head .pw__pc { color: var(--ink); }
.pwm { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.pwm--y { background: #F7C68A; color: #3A2208; }
.pwm--n { background: color-mix(in oklab, var(--ink) 16%, transparent); color: var(--surface); }
:root[data-theme="spoudi-dark-disabled"] .pwm--n, :root[data-theme="spoudi-dark-disabled"] .pwm--n { color: var(--ink); }

.pw__plans { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .875rem; width: 100%; max-width: 480px; }
.pw__cta { min-width: 300px; border-radius: var(--r-pill); }
.pw__fine { font-size: var(--t-xs); color: var(--ink-2); text-align: center; max-width: 46ch; }

@media (max-width: 899px) {
  .paywall2 { width: 100vw; max-width: 100vw; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .pw__in { padding: 2.25rem 1.25rem 1.5rem; }
  .pw__h { font-size: 1.875rem; }
  .pw__r { grid-template-columns: 1fr 64px 84px; font-size: var(--t-sm); }
  .pw__prem { width: 84px; }
  .pw__cta { min-width: 0; width: 100%; }
}

/* ============================================================
   50. STREAK CARD BOUND TO REAL STATE
   ============================================================ */
.strk__n { font-size: 4rem; line-height: .95; }
.strk__n.is-zero, .strk__flame.is-zero { color: var(--ink-4); }
.strk__flame { color: var(--warn); }
.strk__prompt { font-size: var(--t-sm); color: var(--ink-2); margin-top: -.5rem; }
.strk__prompt strong { color: var(--ink); }
.lgc--locked .lgc__head { margin-bottom: .25rem; }

/* ---- richer composition: more layers, six distinct fills ---- */
.ha-shadow { fill: rgba(0,0,0,.12); }
.ha-a  { fill: var(--cvfill); }
.ha-b1 { fill: rgba(255,255,255,.30); }
.ha-b2 { fill: rgba(255,255,255,.14); }
.ha-b3 { fill: rgba(255,255,255,.46); }
.ha-c  { fill: rgba(255,255,255,.60); }
.ha-d  { fill: var(--warn); }
.ha-e  { fill: rgba(255,255,255,.80); }
.ha-e2 { fill: rgba(255,255,255,.55); }
.ha-bar { fill: var(--ink-4); }

/* ---- the hero sits near square, as the reference does ---- */
.hero2 { max-width: 560px; margin-inline: auto; width: 100%; }
.herostack { max-width: 560px; margin-inline: auto; width: 100%; }
.switch { justify-content: center; max-width: 560px; margin-inline: auto; }

/* ---- switcher tiles carry colour, not a line glyph ---- */
.swtile { width: 74px; height: 74px; padding: 0; overflow: hidden; }
.swtile.cv1 .ha-a { fill: #1E0BB8; } .swtile.cv2 .ha-a { fill: #2742B8; }
.swtile.cv3 .ha-a { fill: #0E3A8C; } .swtile.cv4 .ha-a { fill: #1F5A9E; }
.swtile.cv5 .ha-a { fill: #17506B; } .swtile.cv6 .ha-a { fill: #2C1E8E; }

/* ---- the premium card must be the lightest, warmest object in both themes ---- */
:root[data-theme="spoudi-dark-disabled"] .promo,
:root[data-theme="spoudi-dark-disabled"] .promo {
  background: linear-gradient(145deg, #FFF4E4 0%, #FCE6F1 52%, #EDE8FE 100%);
}
:root[data-theme="spoudi-dark-disabled"] .promo__txt strong,
:root[data-theme="spoudi-dark-disabled"] .promo__txt strong { color: #241B2E; }
:root[data-theme="spoudi-dark-disabled"] .promo__txt span,
:root[data-theme="spoudi-dark-disabled"] .promo__txt span { color: #5C4B66; }

@media (max-width: 899px) {
  .strk__n { font-size: 3rem; }
  .swtile { width: 62px; height: 62px; }
}

/* ============================================================
   51. LESSON PATH AS OBJECTS ON PEDESTALS
   The reference draws no connectors and no padlocks — state is
   carried by the object itself.
   ============================================================ */
.pathwrap { position: relative; width: 100%; max-width: 420px; margin-inline: 0; }
.pathwrap__svg, .route, .path__link { display: none !important; }

.pnode { position: absolute; display: flex; align-items: center; gap: .25rem; width: 320px; }
.pnode__btn {
  width: 120px; height: 92px; flex: none; display: block;
  transition: transform .14s ease;
}
.pnode:not(.is-locked) .pnode__btn:hover { transform: translateY(-3px); }
.pnode__btn:disabled { cursor: default; }
.ped { width: 120px; height: 92px; display: block; }

.ped__glow  { fill: var(--acc, var(--brand)); opacity: .26; }
.ped__shadow{ fill: rgba(0,0,0,.14); }
.ped__base  { fill: color-mix(in oklab, var(--acc, var(--brand)) 62%, #000); }
.ped__top   { fill: var(--acc, var(--brand)); }
.ped__well  { fill: color-mix(in oklab, var(--acc, var(--brand)) 70%, #fff); }
.ped__gem   { fill: var(--safe); }
.ped__gem2  { fill: color-mix(in oklab, var(--safe) 72%, #000); }

/* completed objects keep the light ramp and simply recede (see §56) */

/* locked: flat grey stone, no icon */
.pnode.is-locked .ped__top  { fill: var(--surface-sunk); }
.pnode.is-locked .ped__base { fill: var(--line-strong); }
.pnode.is-locked .ped__well { fill: var(--line); }
.pnode.is-locked .ped__shadow { fill: rgba(0,0,0,.07); }

.pnode__label {
  font-size: var(--t-md); font-weight: 700; letter-spacing: -.015em;
  color: var(--ink); line-height: 1.25;
}
.pnode.is-locked .pnode__label { color: var(--ink-4); font-weight: 650; }
.pnode.is-now .pnode__label { font-weight: 800; }

/* the path closes on a card, as the reference does */
.endcard {
  max-width: 420px; padding: 1.25rem; display: flex; flex-direction: column;
  gap: .875rem; align-items: center; box-shadow: var(--sh-3);
}
.endcard__t { font-size: var(--t-lg); letter-spacing: -.02em; }

/* ============================================================
   52. PAYWALL AS A FULL-BLEED FIELD
   ============================================================ */
.paywall2 {
  position: fixed; inset: 0; width: 100vw; max-width: 100vw; max-height: 100dvh;
  border-radius: 0; margin: 0; translate: none; top: 0; left: 0;
  display: grid; place-items: center; overflow-y: auto;
  background: linear-gradient(135deg, #E9EFFC 0%, #F1F4FE 30%, #FDF3E4 68%, #FEFBF5 100%);
}
:root[data-theme="spoudi-dark-disabled"] .paywall2, :root[data-theme="spoudi-dark-disabled"] .paywall2 {
  background: linear-gradient(135deg, #E9EFFC 0%, #F1F4FE 30%, #FDF3E4 68%, #FEFBF5 100%);
}
.paywall2 .pw__in { max-width: 720px; padding: 2rem 2rem 2.5rem; gap: 1.5rem; color: #1A1226; }
.paywall2 .pw__h { color: #150F20; font-size: 2.5rem; }
.paywall2 .plan { background: rgba(255,255,255,.7); border-color: rgba(26,18,38,.14); color: #1A1226; }
.paywall2 .plan.is-on { background: #fff; border-color: #1E0BB8; }
.paywall2 .plan .eyebrow { color: #5C4B66; }
.paywall2 .plan .muted { color: #5C4B66; }
.paywall2 .pw__r { border-top-color: rgba(26,18,38,.10); }
.paywall2 .pw__fine { color: #5C4B66; }
.paywall2 .btn--quiet { color: #5C4B66; }
.paywall2 .pw__close { color: #5C4B66; background: rgba(255,255,255,.6); }
.pw__prem::after { background: #fff; }
.paywall2 .pwm--n { background: #3A3346; color: #fff; }

@media (max-width: 899px) {
  .pathwrap { max-width: 100%; }
  .pnode { width: 100%; }
  .pnode__btn, .ped { width: 92px; height: 72px; }
  .pnode__label { font-size: var(--t-base); }
  .paywall2 .pw__in { padding: 1.5rem 1rem 2rem; }
  .paywall2 .pw__h { font-size: 1.75rem; }
}

/* ============================================================
   53. SEPARATOR DOTS, SWITCHER TILE
   ============================================================ */

.dot    { fill: var(--warn); }

.swtile { padding: .375rem; }

/* ============================================================
   54. THREE COLOUR FAMILIES, NOT ONE
   Streak is its own hue so it stops competing with the CTA.
   ============================================================ */
:root { --streak: #E0A31B; --streak-soft: #FDF3DE; }
@media (prefers-color-scheme: dark) and (min-width: 99999px) /* brand is light: opt-in only */ { :root[data-theme="spoudi-dark-disabled"] { --streak: #F0B840; --streak-soft: #352A0F; } }
:root[data-theme="spoudi-dark-disabled"] { --streak: #F0B840; --streak-soft: #352A0F; }

.dayc__o.is-on { background: var(--streak); border-color: var(--streak); color: #2C1F02; }
.strk__flame { color: var(--streak); }

/* the premium mark gets a built object, not a line glyph */
.promo__art svg { width: 26px; height: 26px; fill: #F5C04A; stroke: none; }   /* a gold crown on brand blue */

/* ============================================================
   55. DARK SURFACES SEPARATE FROM THE PAGE
   7 RGB points of delta left cards visible only by their border.
   ============================================================ */
@media (prefers-color-scheme: dark) and (min-width: 99999px) /* brand is light: opt-in only */ {
  :root[data-theme="spoudi-dark-disabled"] {
    --surface: #1C1A2B; --surface-2: #232036; --surface-sunk: #2A2740;
    --line: #322E46; --line-strong: #433E5C;
  }
}
:root[data-theme="spoudi-dark-disabled"] {
  --surface: #1C1A2B; --surface-2: #232036; --surface-sunk: #2A2740;
  --line: #322E46; --line-strong: #433E5C;
}

/* home resolves at the tile row before the shelves begin */
.switch { margin-bottom: 1.5rem; }

/* ============================================================
   56. PEDESTAL OBJECTS — real faces, key light from above
   Previously the two gem faces sat 0.13% apart in oklab and the
   pedestal top was darker than its rim, i.e. lit from below.
   ============================================================ */
.ped__top  { fill: color-mix(in oklab, var(--acc, var(--brand)) 78%, white); }
.ped__base { fill: color-mix(in oklab, var(--acc, var(--brand)) 68%, black); }
.ped__well { fill: color-mix(in oklab, var(--acc, var(--brand)) 58%, white); }
.ped__glow { fill: var(--acc, var(--brand)); opacity: .24; }
.ped__shadow { fill: rgba(0,0,0,.20); }

.g-top   { fill: color-mix(in oklab, var(--safe) 42%, white); }
.g-right { fill: var(--safe); }
.g-left  { fill: color-mix(in oklab, var(--safe) 46%, black); }

/* completed objects recede as a set, keeping the light ramp intact */
.pnode.is-done .ped { opacity: .58; }
.pnode.is-locked .ped__top  { fill: color-mix(in oklab, var(--line-strong) 70%, white); }
.pnode.is-locked .ped__base { fill: var(--line-strong); }
.pnode.is-locked .ped__well { fill: color-mix(in oklab, var(--line-strong) 80%, white); }
.pnode.is-locked .ped__shadow { fill: rgba(0,0,0,.08); }

/* the unit banner sits over the path it labels */
.path__levelwrap { justify-content: flex-start; }
.path__level { min-width: 0; width: 420px; max-width: 100%; }

/* ============================================================
   57. PAYWALL CONTRAST — the light field needs light-field tokens
   ============================================================ */
.paywall2 .pw__cta {
  background: #17111F; color: #FFFFFF; box-shadow: 0 6px 20px rgba(23,17,31,.28);
}
.paywall2 .pw__cta:hover { background: #2A2038; }
.paywall2 .pw__pc, .paywall2 .pw__r--head .pw__pc { color: #150F20; }
.paywall2 .pw__r { color: #1A1226; }

/* the eye should land on what you get, not what you lose */
.paywall2 .pwm--y { background: #F0932B; color: #FFFFFF; }
.paywall2 .pwm--n { background: rgba(26,18,38,.10); color: rgba(26,18,38,.45); }

/* fit one screen: nothing below the fold */
.paywall2 .pw__in { max-width: 600px; gap: 1.25rem; padding-block: 1.75rem 1.5rem; }
.paywall2 .pw__h { font-size: 2.25rem; }
.paywall2 .pw__tablewrap { max-width: 560px; }
.paywall2 .pw__r { padding-block: .5rem; }
.paywall2 .plan { padding: .875rem .75rem; }

/* ============================================================
   58. HOME HERO SPACING, STREAK DAYS
   ============================================================ */

.hero2__art { margin: .25rem 0 .375rem; }

/* completed streak days read as a trail, with today solid */
.dayc__o.is-on { background: color-mix(in oklab, var(--streak) 32%, var(--surface)); border-color: var(--streak); color: var(--streak); }
.dayc__o.is-on.is-today, .dayc:last-of-type .dayc__o.is-on { background: var(--streak); color: #2C1F02; }

.swtile { padding: 2px; }

/* ============================================================
   59. THE PAYWALL IS A LIGHT SURFACE — give it light tokens
   Three separate leaks traced to dark-theme tokens painting onto
   this hardcoded cream field. Scope the token set instead of
   patching each element.
   ============================================================ */
.paywall2 {
  --ink: #150F20; --ink-2: #5C4B66; --ink-3: #7D6F88; --ink-4: #A79BB0;
  --surface: #FFFFFF; --surface-2: #F8F5FC; --surface-sunk: #EFEBF4;
  --line: rgba(26,18,38,.13); --line-strong: rgba(26,18,38,.24);
  --brand: #1E0BB8; --brand-100: #DCE4FB; --brand-050: #EFF3FE;
  color: #150F20;
}
.paywall2 .pwm--n { background: #EDEDF0; color: #74707E; }
.paywall2 .pwm--y { background: #F0932B; color: #FFFFFF; }
.paywall2 .plan__tick { background: #E4E1EC; color: transparent; }
.paywall2 .plan.is-on .plan__tick { background: #1E0BB8; color: #fff; }

/* the premium column's rim matches the reference's band, and lines up */
.pw__prem { width: 132px; right: 0; padding: 7px; border-radius: 18px; }
.pw__prem::after { inset: 7px; border-radius: 11px; }

/* ============================================================
   60. ACCENT BUTTONS NEED A LEGIBLE LABEL ON LIGHT ACCENTS
   ============================================================ */
:root { --on-acc: #FFFFFF; }
@media (prefers-color-scheme: dark) and (min-width: 99999px) /* brand is light: opt-in only */ { :root[data-theme="spoudi-dark-disabled"] { --on-acc: #14101F; } }
:root[data-theme="spoudi-dark-disabled"] { --on-acc: #14101F; }
.btn--acc { color: var(--on-acc); }

/* a recess must read as a recess in every state */
.ped__well { fill: color-mix(in oklab, var(--acc, var(--brand)) 88%, black); }
.pnode.is-locked .ped__well { fill: color-mix(in oklab, var(--line-strong) 88%, black); }

/* the start card stays with you instead of stranding at the page end */
.endcard { position: sticky; bottom: 1.5rem; z-index: 5; }

/* the theme-guarded rule outranks a plain descendant selector, so this
   one has to match its weight to keep the deny marks quiet */
.paywall2 .pwm.pwm--n { background: #EDEDF0; color: #74707E; }
.paywall2 .pwm.pwm--y { background: #F5A63F; color: #3A2208; }

/* ============================================================
   61. LESS ROUNDED THROUGHOUT
   ============================================================ */
.hero2__go, .pw__cta, .btn--acc, .btn--brand, .btn--ink,
.btn--premium, .btn--ghost, .btn--safe, .btn--brandline { border-radius: 9px; }
.field { border-radius: 8px; }
.chip { border-radius: 7px; }
.stat { border-radius: 8px; }
.badge { border-radius: 5px; }
.hero__mark, .hustle__mark, .promo__art { border-radius: 9px; }
.swtile { border-radius: 11px; }
.plan { border-radius: 9px; }
.pw__prem { border-radius: 12px; }
.pw__prem::after { border-radius: 7px; }
.lgrow { border-radius: 6px; }
.pip { border-radius: 6px; }
.dayc__o { border-radius: 9px; }
.sheet, .paywall2 { border-radius: var(--r-lg); }
.paywall2 { border-radius: 0; }

/* ============================================================
   64. CORNERS ON THE SCALE
   Eight distinct radii shipped on one screen; five off-token.
   ============================================================ */
.pip, .chiprec, .stat, .badge { border-radius: var(--r-sm); }
.lgrow { border-radius: var(--r-sm); }
.swtile { border-radius: var(--r-md); }
.dayc__o { border-radius: var(--r-md); }

/* the metal stays visible beneath the god's name on the ladder */
.rung__tier {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4);
}
.rung.is-here .rung__tier { color: var(--brand); }


/* ============================================================
   65. ENERGY IS LIQUID GOLD
   ============================================================ */
:root { --molten: #D99A0B; --molten-lite: #F2B733; --molten-bg: #FDF4DE; }
@media (prefers-color-scheme: dark) and (min-width: 99999px) /* brand is light: opt-in only */ {
  :root[data-theme="spoudi-dark-disabled"] { --molten: #F0B840; --molten-lite: #FFD070; --molten-bg: #33280C; }
}
:root[data-theme="spoudi-dark-disabled"] { --molten: #F0B840; --molten-lite: #FFD070; --molten-bg: #33280C; }

.stat--energy {
  color: var(--molten);
  border-color: color-mix(in oklab, var(--molten) 40%, var(--line));
  background: color-mix(in oklab, var(--molten-bg) 70%, var(--surface));
}
.stat--energy svg { filter: drop-shadow(0 1px 0 rgba(140,95,5,.35)); }

/* the streak card's energy beads */
.pip.is-on {
  background: var(--molten-bg);
  color: var(--molten);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--molten) 32%, transparent);
}
.pip.is-on svg { filter: drop-shadow(0 1px 0 rgba(140,95,5,.3)); }
.pip { color: var(--ink-4); }

/* ============================================================
   66. TIGHTER — the layout was spending too much on air
   ============================================================ */
.view { padding: 1.5rem 2rem 2.5rem; gap: 1.5rem; }
.split { gap: 1.75rem; }
.split__aside.stack { gap: .75rem !important; }
.section { gap: .75rem; }
.section__head { gap: .5rem; }
.topbar__in { min-height: calc(var(--topbar-h) - 1px); padding-block: .375rem; }   /* the hustle page sits right under it */

/* home */
.strk { gap: 1rem; padding: 1rem 1.125rem; }
.strk__n { font-size: 3.25rem; }
.dayc__o { width: 34px; height: 34px; }
.dayc { gap: .3125rem; }
.promo { padding: 1rem; gap: .75rem; }
.lgc { gap: .75rem; padding: 1rem 1.125rem; }
.lgrow { padding: .375rem .5rem; }
.hero2 { padding: 1.25rem 1.5rem 1.25rem; gap: .25rem; }
.hero2__t { font-size: 1.75rem; margin-top: .25rem; }
.hero2__art { margin: .125rem 0 .125rem; }
.switch { margin-bottom: .5rem; gap: .625rem; }
.swtile { width: 64px; height: 64px; }
.shelf { padding-block: .125rem .25rem; }

/* course page */
.coursecard { gap: .625rem; padding: 1.125rem; }
.coursecard__art { margin-bottom: 0; }
.path__levelwrap { margin-bottom: 1rem; }
.path__level { padding: .5rem 1.25rem; }
.pnode__btn, .col { width: 104px; height: 97px; }
.pnode { gap: .125rem; }
.endcard { padding: 1rem; gap: .625rem; bottom: 1rem; }

/* lesson runner */
.lesson__body { padding: 1.75rem 2rem; }
.lesson__in { gap: 1.125rem; }
.lesson__top { padding: .75rem 2rem; }
.lesson__foot { padding-block: .875rem; }
.teach { gap: .75rem; }

/* detail sheet */
.sheet__body { padding: 1.25rem 1.5rem 1.5rem; gap: 1.5rem; }
.sheet__hero { height: 92px; }
.sheet .hustle__art > span > svg { width: 52px; height: 52px; }
.sheet__foot { padding: .875rem 1.5rem; }
.secthead { margin-bottom: 0; }

/* cards */
.wcard__cover { min-height: 116px; }
.wcard__body { padding: .6875rem .875rem .8125rem; gap: .3125rem; }
.card--pad { padding: 1rem; }

@media (max-width: 899px) {
  .view { padding: 1rem 1rem calc(var(--nav-h) + 1.5rem); gap: 1.125rem; }
  .split { gap: 1rem; }
  .pnode__btn, .col { width: 84px; height: 78px; }
  .lesson__body { padding: 1.25rem 1rem; }
  .sheet__body { padding: 1rem; }
}

/* the lesson column centres in its body, so the slack sits either side
   of the content rather than all of it piling up underneath */
.lesson__body { display: flex; align-items: center; }
.lesson__in { width: 100%; }

/* ============================================================
   67. AGE SLIDER
   A pin rides the fill; GSAP drives both from the range input.
   ============================================================ */
.ages { display: flex; flex-direction: column; gap: .5rem; padding-top: .5rem; }
/* onboarding's age step: the slider sits on an invisible answer grid, so the step is as tall as the others */
.onb__stack { display: grid; }
.onb__stack > * { grid-area: 1 / 1; }
.onb__stack .ages { align-self: center; z-index: 1; }
.radio-inputs--ghost { visibility: hidden; }
@media (max-width: 560px) { .onb__head p { min-height: 2lh; } }   /* phones wrap some questions' line to two: hold room for two on every step */
.ages__head { position: relative; height: 72px; }
.ages__pin {
  position: absolute; bottom: 0; width: 56px; height: 56px;
  border-radius: 50% 50% 50% 0; rotate: -45deg;
  translate: -50% 0; transform-origin: center;
  background: linear-gradient(135deg, #7FB2FF, var(--brand));
  display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(30,11,184,.28);
}
.ages__disc {
  width: 42px; height: 42px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; rotate: 45deg;
}
.ages__val { font-size: 1.125rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }

.ages__track {
  position: relative; height: 26px; border-radius: 99px;
  background: #D8E3F5; overflow: visible;
}
.ages__fill {
  position: absolute; inset: 0; width: 100%; border-radius: 99px;
  transform-origin: left center; will-change: transform;
  background: linear-gradient(90deg, #8FBCFF 0%, #4A6BE8 55%, var(--brand) 100%);
}
.ages__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: grab; -webkit-appearance: none; appearance: none;
}
.ages__input:active { cursor: grabbing; }
.ages__input:focus-visible ~ .ages__fill,
.ages__track:has(.ages__input:focus-visible) { box-shadow: var(--ring); border-radius: 99px; }
.ages__ends { display: flex; justify-content: space-between; font-size: var(--t-sm); font-weight: 700; color: var(--ink-3); }
.ages__note { font-size: var(--t-sm); color: var(--ink-2); text-align: center; margin-top: .25rem; min-height: 1.4em; }


/* ============================================================
   69. ONBOARDING RADIO TILES
   After Yaya12085's "silent-liger-85" radio tiles (uiverse.io, MIT):
   a corner dot that scales in on hover and on select, and the whole
   tile taking the accent. Recoloured to Spoudi's blue.
   ============================================================ */
.radio-inputs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .875rem; user-select: none;
}
.radio-item { display: block; cursor: pointer; }
.radio-input {
  clip: rect(0 0 0 0); clip-path: inset(100%);
  height: 1px; width: 1px; overflow: hidden; position: absolute; white-space: nowrap;
}
.radio-tile {
  position: relative; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: .75rem;
  min-height: 118px; padding: 1.125rem;
  border-radius: var(--r-md); border: 2px solid var(--line-strong);
  background: var(--surface); box-shadow: 0 4px 10px rgba(17,24,39,.06);
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.radio-tile::before {
  content: ""; position: absolute; top: .625rem; right: .625rem;
  width: .85rem; height: .85rem; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--surface);
  opacity: 0; transform: scale(0); transition: .25s ease;
}
.radio-item:hover .radio-tile { border-color: var(--brand); }
.radio-item:hover .radio-tile::before { opacity: 1; transform: scale(1); }
.radio-input:checked + .radio-tile {
  border-color: var(--brand); color: var(--brand);
  box-shadow: 0 6px 16px rgba(30,11,184,.16);
}
.radio-input:checked + .radio-tile::before {
  opacity: 1; transform: scale(1);
  background: var(--brand); border-color: var(--brand);
}
.radio-input:focus-visible + .radio-tile {
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(30,11,184,.16), 0 0 0 4px var(--brand-100);
}
.radio-icon {
  width: 46px; height: 46px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--surface-sunk); color: var(--brand);
  transition: background .18s ease, color .18s ease;
}
.radio-input:checked + .radio-tile .radio-icon { background: var(--brand); color: #fff; }
.radio-label {
  font-size: var(--t-md); font-weight: 650; line-height: 1.3;
  letter-spacing: -.015em; color: var(--ink); transition: color .28s ease;
}
.radio-input:checked + .radio-tile .radio-label { color: var(--brand); }

@media (max-width: 560px) {
  .radio-inputs { grid-template-columns: minmax(0,1fr); }
  .radio-tile { min-height: 0; flex-direction: row; align-items: center; }
}

/* ============================================================
   70. LESSON ISLANDS — isometric platform, 3D marble column
   ============================================================ */
:root {
  --marble-hi: #FFFFFF; --marble-body: #E4EAF6; --marble-edge: #AEBBD6;
  --isle-top-a: #7FA6FF; --isle-top-b: #3A5BE0;
  --isle-left: #1B2F8F; --isle-right: #274BBF;
  --beam: #E0A31B;
}
.isle { width: 160px; height: 166px; display: block; overflow: visible; }

/* the platform */
.isle__lf { fill: var(--isle-left); }
.isle__rt { fill: var(--isle-right); }
.isle__top { stroke: rgba(255,255,255,.28); stroke-width: 1; }

/* the column */
.col__plinth { fill: color-mix(in oklab, var(--marble-edge) 82%, black); }
.col__plinthTop { fill: var(--marble-body); }
.col__shaftTop { fill: var(--marble-hi); }
.col__flute { stroke: #8FA0C0; stroke-width: 1.4; fill: none; stroke-linecap: round; }
.col__cap { fill: var(--marble-body); }
.col__abacus { fill: var(--marble-hi); }
.col__volute { fill: var(--marble-body); stroke: var(--marble-edge); stroke-width: 1.3; }
.col__leaf { fill: color-mix(in oklab, var(--isle-top-b) 34%, white); }
.col__orb { fill: #E0A31B; }
.col__check { fill: none; stroke: #E0A31B; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }

/* rings, beams and motes ride the active island */
.isle__ring { fill: none; stroke: var(--beam); stroke-width: 1.2; opacity: .5; }
.isle__beam { mix-blend-mode: normal; }
.mote { fill: #FFE4A1; }
.m2 { fill: #CCB069; }
.m3 { fill: #FFFFFF; }

/* locked islands are cold, unfinished stone */
.isle.is-locked { --isle-top-a: #C9D3E6; --isle-top-b: #9AA8C4; --isle-left: #6E7C99; --isle-right: #8895B0; }
.isle.is-locked .col__plinthTop,
.isle.is-locked .col__cap,
.isle.is-locked .col__volute { fill: #DDE3EF; }
.isle.is-locked .col__abacus, .isle.is-locked .col__shaftTop { fill: #EDF1F8; }
.isle.is-locked .col__shaft { fill: #E2E7F1 !important; }
.isle.is-locked .col__flute { stroke: #B4BFD4; }
.isle.is-done { opacity: .82; }

.pnode__btn, .isle { width: 160px; height: 166px; }
.pnode { width: 360px; }

@media (max-width: 899px) {
  .pnode__btn, .isle { width: 118px; height: 122px; }
  .pnode { width: 100%; }
}

/* the start card keeps clear of the island column instead of sitting on it */
.endcard {
  max-width: 300px; margin-left: auto; margin-right: 0;
  backdrop-filter: saturate(180%) blur(8px);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
}
@media (max-width: 899px) {
  .endcard { max-width: 100%; margin-inline: auto; }
}

/* ============================================================
   71. MOTION SHORTLIST, INTEGRATED
   uiverse pieces rebuilt in Spoudi tokens (credited in app.js where
   each is drawn) and the GSAP pieces' resting states. Every looping
   CSS animation reads --clock, which anim.js sets each render, so a
   re-render resumes a loop rather than restarting it.
   ============================================================ */

/* ---- 71a. streak is red now: the flame, and the pill that carries it ---- */
.stat--streak { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 30%, var(--line)); }
/* an odometer: each digit is a column of the numbers it rolls through */
.odo__c { display: inline-block; height: 1.15em; overflow: hidden; vertical-align: bottom; }
.odo__s { display: flex; flex-direction: column; }
.odo__s i { display: block; height: 1.15em; line-height: 1.15em; font-style: normal; text-align: center; }

.fire { --fs: 52px; display: block; width: calc(var(--fs) * .84); height: var(--fs); margin: 0 .625rem 0 .875rem; overflow: visible; }
.fire__out, .fire__in { transform-box: fill-box; transform-origin: 50% 100%; animation: fire-lick 1.6s ease-in-out infinite; animation-delay: var(--clock, 0s); }
.fire__in { animation-duration: 1.15s; animation-direction: reverse; }
@keyframes fire-lick { 0%, 100% { transform: scale(1) skewX(0); } 30% { transform: scale(1.04, .97) skewX(-2deg); } 60% { transform: scale(.97, 1.04) skewX(2deg); } }
.fire.is-zero { filter: grayscale(1) opacity(.4); }
.fire.is-zero * { animation: none; }
@media (max-width: 899px) { .fire { --fs: 42px; } }

/* ---- 71b. XP coins are green, and spin on their edge ---- */
.coin { --cs: 18px; display: inline-block; flex: none; width: var(--cs); height: var(--cs); perspective: 240px; vertical-align: middle; }
.coin--sm { --cs: 16px; }
.coin__face, .flycoin {
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--script); font-weight: 400; line-height: 1; color: #05461F;
  background: radial-gradient(circle at 34% 30%, #CFF8DE 0, #43CD7E 36%, #12A150 64%, #0B6B34 100%);
}
.coin__face {
  width: 100%; height: 100%; font-size: calc(var(--cs) * .56); padding-top: calc(var(--cs) * .08);
  box-shadow: inset 0 0 0 calc(var(--cs) * .08) rgba(6,70,31,.3), 0 1px 2px rgba(6,70,31,.3);
  animation: coin-flip 4s cubic-bezier(0,.2,.8,1) infinite; animation-delay: var(--clock, 0s);
}
@keyframes coin-flip {
  0%, 100% { animation-timing-function: cubic-bezier(.5,0,1,.5); }
  0% { transform: rotateY(0); }
  50% { transform: rotateY(1800deg); animation-timing-function: cubic-bezier(0,.5,.5,1); }
  100% { transform: rotateY(3600deg); }
}
.flycoin {
  position: fixed; left: 0; top: 0; z-index: 400; width: 24px; height: 24px; font-size: 13px; padding-top: 2px;
  box-shadow: inset 0 0 0 2px rgba(6,70,31,.3), 0 4px 10px rgba(11,107,52,.35);
  pointer-events: none; will-change: transform;
}
.stat--xp { color: #0B7A3B; border-color: color-mix(in oklab, var(--safe) 34%, var(--line)); }
.stat--xp .coin { margin-right: .1rem; }
.verdict__xp { display: inline-flex; align-items: center; gap: .3rem; }

/* ---- 71c. energy as a liquid-gold drop ---- */
.drop { display: block; flex: none; overflow: visible; }
.drop--xs, .stat .drop--xs { width: 13px; height: 16px; }
.drop--sm { width: 20px; height: 25px; }
.drop--md { width: 30px; height: 38px; }
.drop__shell { fill: var(--molten-bg); stroke: color-mix(in oklab, var(--molten) 55%, white); stroke-width: 1.2; }
.drop__wave, .drop__wave2 { animation: drop-wave 1.6s linear infinite; animation-delay: var(--clock, 0s); }
.drop__wave2 { fill: #F5C04A; opacity: .5; animation-duration: 2.4s; animation-direction: reverse; }
@keyframes drop-wave { to { transform: translateX(12px); } }
.drop__hi { fill: #fff; opacity: .6; }
.strk__energy { margin-left: auto; display: flex; align-items: center; gap: .375rem; }
.strk__energyN { font-size: var(--t-lg); font-weight: 800; color: var(--molten); letter-spacing: -.02em; }
.strk__energyN small { font-size: .68em; color: var(--ink-3); font-weight: 700; }
.energyrow { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }

/* ---- 71d. daily quests ---- */
.quests { display: flex; flex-direction: column; gap: .75rem; }
.quests__head { display: flex; align-items: center; justify-content: space-between; }
.quests__n { font-size: var(--t-sm); font-weight: 700; color: var(--ink-3); }
.qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.q { display: grid; grid-template-columns: 16px minmax(0,1fr) auto; align-items: center; gap: .625rem; }
.q__box { position: relative; width: 16px; height: 16px; }
.q__box::before, .q__box::after {
  content: ""; position: absolute; height: 2.5px; border-radius: 2px; background: var(--brand);
  transform-origin: left center;
}
.q__box::before { left: 3px; top: 7px; width: 10px; }                   /* to-do: a dash */
.q__box::after { display: none; }
.q.is-done .q__box::before { left: 1.5px; top: 7.5px; width: 6px; transform: rotate(45deg); }
.q.is-done .q__box::after { display: block; left: 5px; top: 11.5px; width: 12px; transform: rotate(-52deg); }
.q__t { position: relative; width: fit-content; max-width: 100%; font-size: var(--t-sm); font-weight: 650; color: var(--ink); transition: color .3s; }
.q__t::before {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; border-radius: 2px;
  background: var(--ink-4); transform: scaleX(0); transform-origin: left center;
}
.q.is-done .q__t { color: var(--ink-4); }
.q.is-done .q__t::before { transform: scaleX(1); }
.q__n { font-size: var(--t-xs); font-weight: 800; color: var(--ink-3); display: grid; }
.q.is-done .q__n { color: var(--safe); }
/* the flourish, once, on the render a quest turns done (JkHuger's checklist) */
.q.is-fresh .q__box::before { animation: q-draw .3s ease both; }
.q.is-fresh .q__box::after { animation: q-draw .3s ease .15s both; }
.q.is-fresh .q__t { animation: q-move .3s ease .1s; }
.q.is-fresh .q__t::before { animation: q-slice .4s ease both; }
.q.is-fresh .q__t::after {
  content: ""; position: absolute; left: -18px; top: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%;
  animation: q-fire .5s ease .1s both;
}
@keyframes q-draw { from { width: 0; } }
@keyframes q-slice { from { transform: scaleX(0); } }
@keyframes q-move { 50% { transform: translateX(6px); } }
@keyframes q-fire {
  0% { opacity: 1; box-shadow: 0 0 0 -2px #E0A31B, 0 0 0 -2px #E0A31B, 0 0 0 -2px #E0A31B, 0 0 0 -2px #E0A31B, 0 0 0 -2px #E0A31B, 0 0 0 -2px #E0A31B; }
  30% { opacity: 1; }
  100% { opacity: 0; box-shadow: 0 -15px 0 0 #E0A31B, 14px -8px 0 0 #E0A31B, 14px 8px 0 0 #E0A31B, 0 15px 0 0 #E0A31B, -14px 8px 0 0 #E0A31B, -14px -8px 0 0 #E0A31B; }
}

/* ---- 71e. segmented control with a springing glider ---- */
.segc {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0,1fr));
  padding: 4px; border-radius: var(--r-lg); background: var(--surface-sunk); border: 1px solid var(--line);
  isolation: isolate; width: max-content; max-width: 100%;
}
.segc__glider {
  position: absolute; top: 4px; bottom: 4px; z-index: 0;
  left: calc(4px + var(--i) * (100% - 8px) / var(--n)); width: calc((100% - 8px) / var(--n));
  border-radius: var(--r-md); background: var(--surface);
  box-shadow: 0 2px 8px rgba(30,11,184,.14), 0 0 0 1px rgba(30,11,184,.06);
  transition: background .35s, box-shadow .35s;
}
.segc__opt {
  position: relative; z-index: 1; min-height: 36px; padding: .5rem .875rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); white-space: nowrap;
  border-radius: var(--r-md); transition: color .25s;
}
.segc__opt:hover { color: var(--ink); }
.segc__opt.is-on { color: var(--brand); }
.segc__opt:focus-visible { outline: none; box-shadow: var(--ring); }
.segc--sm .segc__opt { min-height: 32px; padding: .3125rem .875rem; }
.segc--end { margin-left: auto; }

/* the paywall's plan picker is the same control, with the yearly glider in gold */
.pw__plans2 { position: relative; width: 100%; max-width: 480px; }
.pw__plans2 .plan__save { left: 75%; top: -11px; z-index: 3; }
.segc--plan { width: 100%; padding: 5px; border-radius: var(--r-xl); background: rgba(255,255,255,.62); border-color: rgba(26,18,38,.14); }
.segc--plan .segc__glider {
  top: 5px; bottom: 5px; left: calc(5px + var(--i) * (100% - 10px) / var(--n)); width: calc((100% - 10px) / var(--n));
  border-radius: var(--r-lg); box-shadow: 0 4px 14px rgba(30,11,184,.16), 0 0 0 1.5px var(--brand);
}
.segc--plan.is-gold .segc__glider {
  background: linear-gradient(135deg, #FFF3CF 0%, #F5C04A 58%, #E0A31B 100%);
  box-shadow: 0 0 22px rgba(224,163,27,.45), 0 0 0 1.5px #C98B0B;
}
.segc--plan .segc__opt { padding: .875rem .75rem; color: #1A1226; }
.segc--plan .segc__opt .eyebrow, .plan__per { color: #5C4B66; }
.segc--plan .plan__price { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.03em; color: #1A1226; }
.plan__per { font-size: var(--t-xs); font-weight: 600; }
.segc--plan.is-gold .segc__opt.is-on .eyebrow, .segc--plan.is-gold .segc__opt.is-on .plan__per { color: #5E3F00; }

/* ---- 71f. save-a-hustle heart ---- */
.wcw { position: relative; display: flex; min-width: 0; }
.wcw > .wcard { flex: 1; min-width: 0; }
.wcw .wcard__chips { right: 3.125rem; }
.heart {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.heart svg { position: absolute; }
.heart__o, .heart__f { width: 17px; height: 17px; fill: currentColor; }
.heart__f { opacity: 0; }
.heart.is-on .heart__f { opacity: 1; }
.heart.is-on .heart__o { opacity: 0; }
.heart__burst { width: 48px; height: 48px; fill: none; stroke: #F5C04A; stroke-width: 6; stroke-linecap: round; opacity: 0; visibility: hidden; pointer-events: none; }
.heart--tile {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  backdrop-filter: blur(4px); transition: background .16s;
}
.heart--tile:hover { background: rgba(255,255,255,.3); }
.heart--tile.is-on { background: #fff; color: var(--brand); }
.heart--sheet {
  position: absolute; top: 12px; right: 52px; z-index: 1; width: 32px; height: 32px; color: var(--brand);
  background: color-mix(in oklab, var(--surface) 72%, transparent); backdrop-filter: blur(6px);
}
.heart:focus-visible { outline: none; box-shadow: var(--ring); }
.chip__heart { width: 12px; height: 12px; fill: currentColor; margin-right: .3rem; vertical-align: -1px; }
.chip--saved:not(.is-on) { color: var(--brand); border-color: var(--brand-100); }

/* ---- 71g. gold corner ribbon on premium-only tiles ---- */
/* top-right, where it can't touch the icon mark; on a locked tile the
   chips move to the left and the heart steps inside the band */
.ribbon { position: absolute; top: 0; right: 0; z-index: 1; width: 86px; height: 86px; overflow: hidden; pointer-events: none; }
.ribbon span {
  position: absolute; top: 13px; right: -31px; width: 120px; padding: .2rem 0; transform: rotate(45deg);
  text-align: center; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(-45deg, #C98B0B, #F5C04A 51%, #D9960E);
  box-shadow: 0 3px 8px rgba(0,0,0,.22); text-shadow: 0 1px 0 rgba(120,80,0,.4);
}
.wcw.is-locked .heart--tile { right: 3.5rem; }
.wcw.is-locked .wcard__chips { right: 6.125rem; }
.wcard__cover.is-locked .wcard__chips:empty { display: none; }

/* ---- 71h. Discover: the swipe deck ---- */
.deck { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: .5rem 0 1rem; }
.deck__stack { position: relative; width: min(340px, 100%); height: 326px; }
.dcard {
  position: absolute; inset: 0 0 auto; height: 300px; overflow: hidden;
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-3);
  transform: translateY(calc(var(--d) * 12px)) scale(calc(1 - var(--d) * .05)); transform-origin: 50% 100%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.dcard.is-top { cursor: grab; }
.dcard.is-top:active { cursor: grabbing; }
.dcard .wcard__cover { min-height: 148px; flex: none; }
.dcard__body { flex: 1; display: flex; flex-direction: column; gap: .375rem; padding: .875rem 1rem 1rem; text-align: left; }
.dcard__blurb { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.dcard__stamp {
  position: absolute; top: 1rem; z-index: 3; padding: .2rem .625rem; pointer-events: none; opacity: 0;
  border: 3px solid currentColor; border-radius: var(--r-md); background: rgba(255,255,255,.94);
  font-size: var(--t-sm); font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.dcard__stamp--save { left: 1rem; color: var(--safe); transform: rotate(-12deg); }
.dcard__stamp--skip { right: 1rem; color: var(--danger); transform: rotate(12deg); }
.deck__ctl { display: flex; align-items: center; gap: 1rem; }
.dbtn {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface);
  box-shadow: var(--sh-2), inset 0 0 0 1.5px var(--line-strong); transition: box-shadow .16s;
}
.dbtn:hover { box-shadow: var(--sh-3), inset 0 0 0 1.5px currentColor; }
.dbtn--skip { color: var(--danger); }
.dbtn--save { color: var(--brand); }
.dbtn--save svg { width: 24px; height: 24px; fill: currentColor; }
.deck__n { font-size: var(--t-sm); text-align: center; }
.deck__empty { max-width: 520px; margin-inline: auto; padding: 3rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .75rem; }

/* ---- 71j. the sparkle premium button (MuhammadHasann) ---- */
.btn--sparkle {
  --active: 0; position: relative; isolation: isolate; color: #fff; background: transparent;
  border-radius: var(--r-md); gap: .45rem; padding-inline: 1.125rem;
  transform: scale(calc(1 + var(--active) * .05)); transition: transform .3s ease-in-out;
}
.btn--sparkle::before, .btn--sparkle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; }
.btn--sparkle::before {
  background: var(--brand-deep); transition: box-shadow .3s ease-in-out;
  box-shadow: inset 0 .5px rgba(255,255,255,.7), inset 0 -1px 2px rgba(0,0,0,.55),
    0 4px 10px -4px rgba(20,6,130,.8), 0 0 0 calc(var(--active) * .3rem) rgba(224,163,27,.5);
}
.btn--sparkle::after {
  opacity: var(--active); transition: opacity .3s ease-in-out;
  background-color: rgba(45,26,214,.9);
  background-image: radial-gradient(at 51% 89%, rgba(245,192,74,.95) 0, transparent 55%),
    radial-gradient(at 100% 100%, #5B76E8 0, transparent 50%), radial-gradient(at 22% 91%, #5B76E8 0, transparent 50%);
}
.btn--sparkle:is(:hover, :focus-visible) { --active: 1; }
.btn--sparkle:active { transform: scale(.98); }
.btn--sparkle__dots { position: absolute; inset: -1.5px; z-index: -2; overflow: hidden; border-radius: inherit; }
.btn--sparkle__dots::before {
  content: ""; position: absolute; top: 30%; left: 50%; width: 100%; height: 2rem; transform-origin: left;
  background: #FFD36B; mask: linear-gradient(transparent 0%, #fff 120%);
  animation: sparkle-rot 2.4s linear infinite; animation-delay: var(--clock, 0s);
}
@keyframes sparkle-rot { to { transform: rotate(360deg); } }
.btn--sparkle .sparkle { position: relative; flex: none; width: 1.25rem; height: 1.25rem; fill: #FFE4A1; }
.btn--sparkle.btn--sm .sparkle { width: 1rem; height: 1rem; }
.btn--sparkle .sparkle path { transform-box: fill-box; transform-origin: center; }
.btn--sparkle:is(:hover, :focus-visible) .sparkle path { animation: sparkle-path 1.5s linear .3s infinite; }
.btn--sparkle:is(:hover, :focus-visible) .sparkle path:nth-child(2) { animation-delay: .55s; }
.btn--sparkle:is(:hover, :focus-visible) .sparkle path:nth-child(3) { animation-delay: .8s; }
@keyframes sparkle-path { 0%, 34%, 71%, 100% { transform: scale(1); } 17%, 49%, 83% { transform: scale(1.25); } }
.btn--sparkle__t { position: relative; font-weight: 750; }
.paywall2 .pw__cta.btn--sparkle, .paywall2 .pw__cta.btn--sparkle:hover { background: transparent; color: #fff; box-shadow: none; }

/* ---- 71k. lesson complete (sabbircoder07's results card) ---- */
.lesson--result .lesson__body, .lesson--league .lesson__body { display: flex; align-items: center; overflow-x: hidden; }
.result { position: relative; display: grid; place-items: center; padding: 1rem 0; }
.result__confetti { position: absolute; left: -80px; right: -80px; top: -90px; height: 440px; z-index: 3; overflow: hidden; pointer-events: none; }
.result__confetti i { position: absolute; top: 0; left: 0; border-radius: 1px; }
.result__card {
  position: relative; width: min(340px, 100%); padding: 1.625rem 1.5rem 1.375rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff;
  border-radius: var(--r-xl); background: linear-gradient(160deg, #2D1AD6, #140682 72%); background-size: 180% 180%;
  box-shadow: 0 20px 44px rgba(30,11,184,.32);
  animation: result-shift 9s ease-in-out infinite alternate; animation-delay: var(--clock, 0s);
}
@keyframes result-shift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
.result__kicker { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #C9D3FF; }
.result__ring {
  --p: 1; position: relative; width: 136px; height: 136px; margin: 1rem 0 .75rem; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: conic-gradient(#F5C04A 0 calc(var(--p) * 360deg), rgba(255,255,255,.14) 0 360deg);
}
.result__ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: linear-gradient(160deg, #2412C4, #170990); }
.result__ring b, .result__ring span { position: relative; }
.result__ring b {
  font-size: 50px; line-height: 1; font-weight: 900;
  background: linear-gradient(90deg, #FFE4A1, #E0A31B); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.result__ring span { margin-top: 2px; font-size: 13px; font-weight: 600; color: #C9D3FF; }
.result__grade { margin: .25rem 0 .5rem; font: 400 2.125rem/1.05 var(--serif); color: #fff; }
.result__xp {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .75rem; padding: .3rem .75rem .3rem .375rem;
  border-radius: var(--r-pill); font-size: 13px; font-weight: 800; color: #BDF5D2;
  background: rgba(18,161,80,.2); border: 1px solid rgba(61,220,132,.45);
}
.result__card p { max-width: 30ch; margin: 0 0 1.125rem; font-size: 14px; color: #DCE4FB; }
.result__btn {
  width: 100%; padding: .8125rem; border-radius: var(--r-md); font-size: var(--t-md); font-weight: 800;
  color: var(--brand); background: #fff; box-shadow: 0 4px 0 #C7D0F5; transition: transform .15s, box-shadow .15s;
}
.result__btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #C7D0F5; }

/* ---- 71l. where the XP moved you: the board climb and the shield turn ---- */
.climb { align-items: center; text-align: center; gap: .875rem; }
.climb__t { margin: .25rem 0 0; font-size: 2.25rem; }
.climb__s { max-width: 38ch; margin: 0; }
.climb__board { width: min(380px, 100%); display: flex; flex-direction: column; gap: .375rem; margin-top: .5rem; }
.plrow {
  display: flex; align-items: center; gap: .625rem; padding: .625rem .8125rem; text-align: left;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  font-size: var(--t-sm); font-weight: 650;
}
.plrow.is-me { position: relative; z-index: 1; background: var(--brand-050); border-color: var(--brand-100); color: var(--brand); font-weight: 800; box-shadow: var(--sh-2); }
.plrow__n { width: 18px; font-weight: 800; color: var(--ink-3); }
.plrow__a { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunk); color: var(--ink-2); font-size: 12px; font-weight: 800; }
.plrow.is-me .plrow__a { background: var(--brand); color: #fff; }
.plrow__x { margin-left: auto; font-weight: 700; color: var(--ink-3); }
.plrow__x::after { content: " XP"; }

/* ---- 71m. first place on the board (sohoning's ranking card) ---- */
.trophy { position: relative; max-width: 440px; height: 150px; margin-bottom: .875rem; overflow: hidden; outline: none; transition: height .5s ease; }
.trophy:is(:hover, :focus-visible, :focus-within) { height: 262px; }
.trophy__front {
  position: relative; z-index: 2; height: 150px; overflow: hidden; border-radius: var(--r-xl);
  background: linear-gradient(45deg, #FFFBF0, #FFD978); transition: box-shadow .5s;
}
.trophy:is(:hover, :focus-visible) .trophy__front { box-shadow: 0 10px 18px rgba(177,135,50,.42); }
.trophy__cup { position: absolute; right: 30px; top: 7px; width: auto; height: 136px; }   /* a gold Panathenaic amphora on marble (art/trophy.webp) */
.trophy__rank { position: absolute; left: 22px; top: 4px; margin: 0; font-size: 84px; line-height: 1.1; font-weight: 900; letter-spacing: -.04em; color: #E7AA2B; }
.trophy__rank span { font-size: 34px; letter-spacing: 0; color: #4B3A12; }
.trophy__line {   /* a gold Greek key under the rank, fading out at both ends */
  position: absolute; left: 22px; top: 98px; width: 190px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 10.5H12M2 10.5V2H10V8H5.5V5H7.5' fill='none' stroke='%23C48D14' stroke-width='1.3'/%3E%3C/svg%3E") 0 0 / 12px 12px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent);
}
.trophy__user { position: absolute; left: 22px; bottom: 12px; display: flex; align-items: center; gap: .5rem; font-weight: 800; color: #5E4A1D; }
.trophy__av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 12px; }
.trophy__back {
  position: relative; top: -20px; height: 132px; padding: 32px 20px 0; display: flex; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.trophy__medal { width: auto; height: 78px; flex: none; }   /* a gold Nike medal on a blue-and-white ribbon (art/medal.webp) */
.trophy:is(:hover, :focus-visible, :focus-within) .trophy__medal { animation: trophy-in 1s cubic-bezier(.65,.05,.36,1) both; }
@keyframes trophy-in { 0% { transform: translateY(-80px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.trophy__stat small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); }
.trophy__stat b { font-size: 28px; font-weight: 900; color: #D08A0B; }

/* ---- 71n. the lesson trail, and the unit reward it leads to ---- */
.pathwrap .pnode { z-index: 1; }
.trail { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trail path { fill: none; }
.trail__base, .trail__ink { stroke-width: 5; stroke-dasharray: 2 13; stroke-linecap: round; }
.trail__base { stroke: var(--line-strong); }
.trail__ink { stroke: var(--brand); }
.trail__mask { stroke: #fff; stroke-width: 16; stroke-linecap: round; stroke-dasharray: 0 99999; }

@property --pl-glow { syntax: "<color>"; inherits: true; initial-value: #E0A31B; }
@property --pl-hot  { syntax: "<color>"; inherits: true; initial-value: #FFE9B0; }
.plinth {
  --pl-glow: #E0A31B; --pl-hot: #FFE9B0;
  display: block; width: 160px; height: 200px; overflow: visible;
  transition: --pl-glow .7s ease, --pl-hot .7s ease, filter .7s ease;
}
.plinth.is-lit { --pl-glow: #19C064; --pl-hot: #D3F9E1; filter: drop-shadow(0 0 16px rgba(25,192,100,.34)); }
.plinth__ring { fill: none; stroke: var(--pl-glow); stroke-width: 1.3; opacity: .65; }
.plinth__bl { fill: #B9820F; }
.plinth__br { fill: #8C5E05; }
.plinth__bt { fill: #E0A31B; }
.plinth__slot { stroke: rgba(255,255,255,.4); stroke-width: .8; }
.plinth__shadow { fill: rgba(90,56,0,.32); }
.plinth__beam { opacity: .35; }
.pmote { fill: var(--pl-hot); }
.plinth__laurel { fill: #19C064; opacity: 0; visibility: hidden; }   /* anim.js pops it in; no CSS transition to fight it */
.plinth.is-lit .plinth__laurel { opacity: 1; visibility: visible; }
.plinth__spark { fill: #3DDC84; }
.plinth__stem { fill: none; stroke: #0E8A45; stroke-width: 1.3; stroke-linecap: round; }
.pnode__btn--reward, .pnode--reward .pnode__btn { width: 160px; height: 200px; }
.pnode__label small { display: block; margin-top: .125rem; font-size: var(--t-xs); font-weight: 650; color: var(--ink-3); }
.pnode--reward .pnode__label { font-weight: 800; }
.pnode--reward.is-open .pnode__label small { color: var(--safe); }
@media (max-width: 899px) {
  .pnode__btn--reward, .pnode--reward .pnode__btn, .plinth { width: 118px; height: 148px; }
}

/* ---- 71o. reduced motion: loops stand still, end states show directly ---- */
@media (prefers-reduced-motion: reduce) {
  .coin__face, .fire *, .drop__wave, .drop__wave2,
  .btn--sparkle__dots::before, .btn--sparkle .sparkle path, .result__card, .trophy__medal,
  .q.is-fresh *, .q.is-fresh *::before, .q.is-fresh *::after { animation: none !important; }
  .trophy, .plinth { transition: none; }
}

/* narrow screens: a node was 100% wide *and* offset left, so every path
   pushed the page ~150px sideways. Pin its right edge instead. */
@media (max-width: 899px) { .pnode { width: auto; right: 0; } }

/* ---------- mascot ----------
   One canvas, moved into each screen's slot by app.js; it fills the slot's
   height. Onboarding shows him head and shoulders, rising out of the cloud
   bank; lessons waist-up in the bottom-left corner, in front of the answer bar. */
.mascot-slot { --v: 300px; display: flex; justify-content: center; align-items: flex-start; height: var(--v); pointer-events: none; }
.mascot { display: block; flex: none; height: 100%; width: auto; }
/* onboarding: under the Continue button, filling the rest of a full-height screen */
.onb { min-height: 100svh; padding-top: 1rem; padding-bottom: 0; gap: 1rem; }
.onb .onb__head { margin-top: .25rem; }
.mascot-slot--onb { height: auto; flex: 1 0 240px; max-height: 460px; margin-top: auto; container-type: size; }   /* size containment: it takes the leftover height, not the video's */
.mascot-slot--onb .mascot { height: 100cqh; }
/* lessons: the bottom-left corner, in front of the answer bar */
.lesson__foot { position: relative; }
.mascot-slot--lesson { --v: 320px; position: absolute; left: 2rem; bottom: 0; z-index: 2; }
@media (max-width: 1199px) {
  /* the content column reaches the corner here: a smaller him, with the bar's buttons moved clear */
  .mascot-slot--lesson { --v: 150px; left: .5rem; }
  .lesson__foot:has(.mascot-slot) .lesson__foot-in { padding-left: 7rem; }
  .lesson__foot:has(.mascot-slot) .btn--lg { min-width: 0 !important; flex: 1 1 auto; }   /* the buttons carry inline min-widths */
  .lesson__foot:has(.mascot-slot) .lesson__foot-in--verdict { flex-wrap: wrap; row-gap: .625rem; }   /* "Correct +15 XP" and Continue don't fit one row beside him: the button drops below */
  .lesson:has(.mascot-slot) .lesson__body { padding-bottom: 5rem; }
}
@media (max-width: 560px) {
  .mascot-slot--onb { flex-basis: 170px; }
}
/* home: behind the next-lesson row, the course's object beside him */
.hero2__stage { width: 100%; display: flex; align-items: flex-end; justify-content: center; margin-top: .25rem; }
.hero2__stage .hero2__art { width: auto; flex: 1 1 0; min-width: 0; margin: 0 0 1.25rem; }
.mascot-slot--home { --v: 230px; margin-left: -2.5rem; flex: none; }
@media (max-width: 899px) { .mascot-slot--home { --v: 170px; margin-left: -1.5rem; } }
/* empty states: a small him above the message */
.mascot-slot--empty { --v: 150px; margin: 0 auto .75rem; }
/* lesson complete: he stands behind the card */
.mascot-slot--result { --v: 190px; margin-bottom: -22px; }
.result__card { z-index: 1; }
@media (max-height: 760px) { .mascot-slot--result { --v: 150px; } }

/* ---------- promotion ----------
   The league's god celebrates you, rising out of Olympus' clouds in front of
   a disc of the tier's metal; on a promotion his shield drops in beside him
   and flat paper falls once. */
.climb__god { position: relative; width: 300px; height: 252px; }
.climb__god::before {
  content: ""; position: absolute; left: 50%; top: 14px; width: 200px; height: 200px; translate: -50% 0; border-radius: 50%;
  background: color-mix(in oklab, var(--lg1) 42%, #fff); box-shadow: inset 0 0 0 5px color-mix(in oklab, var(--lg1) 85%, #fff);
}
.climb__god .god-slot { position: absolute; left: 50%; bottom: 0; height: 244px; translate: -50% 0; }
.climb__god .mascot { height: 100%; width: auto; display: block; }
.climb__god::after {   /* his crop ends in the cloud bank */
  content: ""; position: absolute; z-index: 1; left: -20px; right: -20px; bottom: -8px; height: 70px;
  background: url(sky/bank.webp) 50% 100% / auto 100% repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.climb__badge { position: absolute; z-index: 2; left: 50%; bottom: -30px; margin-left: -38px; }   /* centred on the cloud bank, clear of his arms */
.climb__god { margin-bottom: 1.75rem; }
.climb__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.climb__confetti i { position: absolute; top: 0; left: 0; border-radius: 1px; }
@media (max-width: 560px) { .climb__god { width: 250px; height: 214px; } .climb__god::before { width: 168px; height: 168px; } .climb__god .god-slot { height: 206px; } }

/* profile: the league's god, his head out of the medallion */
.godbust { position: relative; width: 120px; height: 150px; display: block; }
.godbust::before { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 120px; border-radius: 50%; background: var(--lg1); box-shadow: inset 0 0 0 4px var(--lg2); }
.godbust__cut { position: absolute; left: 0; bottom: 0; width: 120px; height: 150px; overflow: hidden; border-radius: 0 0 60px 60px; }
.godbust__cut img { position: absolute; left: -15px; bottom: -4px; width: 150px; height: 150px; max-width: none; }

/* ---------- sky ----------
   Onboarding happens up in the clouds. Three layers live outside #root (so a
   re-render never restarts them) and show only while body.is-onb: a pale sky
   that keeps the questions' contrast, clouds drifting across it, and a bank
   of cloud along the bottom: one strip behind the mascot, one in front that
   hides where his crop ends. Every motion is a constant-speed transform
   (the clouds re-enter as they leave) or an ease that slows into its turns,
   so nothing ever stops dead. Five small WebP images, about 180KB. */
.sky, .sky__ground { display: none; }
.is-onb .sky, .is-onb .sky__ground, .is-sky .sky { display: block; }
.is-sky .app { background: none; }   /* the learn path: islands up in the same sky, without the cloud bank */
.is-sky .sky__cloud { opacity: .45; } /* paler, so they never wash over a lesson's name */
body.is-onb { position: relative; }   /* the cloud bank sits at the foot of the page */
.is-onb .app { background: none; }    /* let the sky through */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #F8FAFF 0%, #EEF2FF 50%, #DCE5FF 100%);
}
.sky__cloud {
  position: absolute; left: 0; top: var(--y); width: var(--w);
  animation: sky-drift var(--t) linear var(--d) infinite;
}
.sky__cloud img { display: block; width: 100%; height: auto; animation: sky-bob 9s ease-in-out var(--d) infinite alternate; }
.sky__cloud.is-flip img { scale: -1 1; }
.sky__cloud.is-far { opacity: .7; }
@keyframes sky-drift { from { transform: translateX(-100%); } to { transform: translateX(100vw); } }
@keyframes sky-bob { to { translate: 0 -10px; } }
.sky__ground { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
/* the bank scales with the screen, so it always covers about the bottom quarter of his bust: the shoulder line */
.sky__ground { height: var(--g); }
.sky__ground--back { z-index: -1; --g: clamp(130px, 21vh, 240px); }
.sky__ground--front { z-index: 1; --g: clamp(64px, 9vh, 120px); }
/* the strip is its own mirror image, so it tiles without a seam; it slides exactly one tile, then repeats */
.sky__bank {
  --h: 100%; position: absolute; left: 0; bottom: 0; height: 100%; display: block;
  background: url(sky/bank.webp) 0 100% / auto 100% repeat-x;
  animation: sky-slide var(--t) linear infinite;
}
.sky__bank { --tile: calc(var(--g) * 10.5); width: calc(100% + var(--tile)); }   /* the strip is 10.5 times as wide as it is tall */
.sky__ground--back .sky__bank { --t: 210s; opacity: .9; animation-direction: reverse; }
.sky__ground--front .sky__bank { --t: 140s; }
@keyframes sky-slide { to { transform: translateX(calc(var(--tile) * -1)); } }
@media (prefers-reduced-motion: reduce) {
  .sky__cloud, .sky__cloud img, .sky__bank { animation: none; }
  .sky__cloud { left: calc(var(--y) * 1.4); }   /* a still sky: spread them across the width */
}

/* ============================================================
   72. ALIVE
   Primary actions sit on a darker bottom edge and sink into it when
   pressed (anim.js tweens y and --edge); a hustle card grows into its
   sheet with a View Transition.
   ============================================================ */
.btn--brand, .btn--premium, .btn--acc, .btn--safe { --edge: 4px; box-shadow: 0 var(--edge) 0 var(--edge-c); }
.btn--brand, .btn--premium { --edge-c: #120774; }
.btn--acc { --edge-c: color-mix(in oklab, var(--acc, var(--brand)) 66%, #000); }
.btn--safe { --edge-c: #0B6B34; }
::view-transition-group(hsheet) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(hsheet), ::view-transition-new(hsheet) { height: 100%; object-fit: cover; }
::view-transition-old(hsheet) { animation-duration: .14s; }   /* the card is gone before it stretches into a ghost */
::view-transition-new(hsheet) { animation-duration: .3s; }

/* ============================================================
   73. HOME SEA
   Home sits by the sea under the onboarding sky: drifting clouds, a calm
   two-band sea with glints, distant hills on the horizon and gulls gliding
   over. It is pinned to the bottom of the screen behind everything; the
   cards are frosted, so the sky shows through them softly. Every motion is
   a constant-speed transform or an ease that slows into its turn.
   ============================================================ */
.town { display: none; }
.is-town .sky, .is-town .town { display: block; }
.is-town .app { background: none; }
.town {
  --th: clamp(150px, 28vh, 260px);
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--th); z-index: -1; pointer-events: none;
  overflow-x: clip; overflow-y: visible;
}
.town__sea { position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(#CFDBFC 0 40%, #C4D2FA 40%); box-shadow: 0 -1.5px 0 #B9C8F5; }
.town__isle { position: absolute; left: var(--x); bottom: 100%; width: var(--w); height: 34%; background: #CCD6F6; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.town__isle.is-far { height: 22%; background: #D6DEF8; }
.town__glint { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 2px; border-radius: 2px; background: #fff; opacity: 0; animation: town-glint 4.5s ease-in-out var(--d) infinite; }
@keyframes town-glint { 50% { opacity: .9; } }
.town__bird { position: absolute; left: 0; bottom: calc(100% - var(--th) * .1 + var(--th) * var(--y) / 100%); width: 22px; animation: town-fly var(--t) linear var(--d) infinite; }
.town__bird.is-far { width: 14px; opacity: .7; }
.town__bird svg { display: block; width: 100%; overflow: visible; animation: town-glide 5s ease-in-out infinite alternate; }
.town__bird path { fill: none; stroke: #6B78A8; stroke-width: 1.6; stroke-linecap: round; transform-origin: 50% 70%; animation: town-flap 3s ease-in-out infinite; }
@keyframes town-fly { from { transform: translateX(-40px); } to { transform: translateX(100vw); } }
@keyframes town-glide { to { transform: translateY(12px); } }
@keyframes town-flap { 0%, 45%, 100% { transform: scaleY(1); } 9%, 27% { transform: scaleY(.3); } 18%, 36% { transform: scaleY(1.05); } }
/* the page ends by the sea: room to see it below the last shelf */
.is-town main.view { padding-bottom: calc(var(--th, 260px) * .75); }
/* frosted cards, tinted shadows: the town and clouds show through softly */
.is-town .card:not(.card--sunk):not(.promo) { background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); }
.is-town .card { box-shadow: 0 1px 2px rgb(30 11 184 / .05), 0 10px 28px rgb(30 11 184 / .07); }
.is-town .promo { background: rgb(255 247 232 / .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (prefers-reduced-motion: reduce) {
  .town__bird { display: none; }
  .town__glint { animation: none; opacity: .6; }
}

/* ---------- 74. hustles: Hades and Zeus watch from the bottom corners ----------
   Waist-up, turned toward the list; the screen's bottom edge hides where
   their crop ends. In front of the page but never in the way of a tap,
   and the page gets room at the bottom so the last row clears them. */
/* the clips' last few rows fade out, so they sit a touch below the edge to meet it */
.watch { position: fixed; bottom: calc(var(--v) * -.045); z-index: 30; height: var(--v); pointer-events: none; --v: 230px; }
.watch .mascot { height: 100%; width: auto; display: block; }
.watch--l { left: max(0px, calc(50vw - 780px)); }
.watch--r { right: max(0px, calc(50vw - 780px)); }
.view:has(> .watchers) { padding-bottom: 10rem; }
@media (max-width: 1439px) { .watch { --v: 205px; } }
@media (max-width: 1199px) { .watch { --v: 170px; } }
@media (max-width: 899px) { .watch { --v: 118px; bottom: calc(56px - var(--v) * .045); } .view:has(> .watchers) { padding-bottom: 8rem; } }
/* phones: Profile lives in the bottom nav, so the top bar drops its icon (it pushed the page 24px wide) */
@media (max-width: 899px) { .topbar__stats > .deskitem { display: none; } }
@media (max-width: 899px) { .town { bottom: 56px; } }   /* sit on the bottom nav, not behind it */


/* ============================================================
   75. GREEK PAYWALL
   The subscription page stands by the sea under the onboarding sky: a
   Cycladic town climbs each side (town/left.webp, town/right.webp), the
   offer sits on a frosted marble panel under a laurel-and-temple crest
   (art/crest.webp), and the premium column is capped with a gold Greek key.
   Flat colours only: the old blue-to-gold gradients and glow are gone.
   ============================================================ */
.paywall2 { background: linear-gradient(180deg, #F8FAFF 0%, #EEF2FF 55%, #DCE5FF 100%); }
.pw__scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pw__cloud { position: absolute; left: 0; top: var(--y); width: var(--w); animation: sky-drift var(--t) linear var(--d) infinite; }
.pw__cloud img { display: block; width: 100%; height: auto; animation: sky-bob 9s ease-in-out var(--d) infinite alternate; }
.pw__sea { position: absolute; inset: auto 0 0; height: 15vh; background: linear-gradient(#CFDBFC 0 40%, #C4D2FA 40%); box-shadow: 0 -1.5px 0 #B9C8F5; }
.pw__town { position: absolute; bottom: 0; height: auto; width: clamp(240px, calc(50vw - 300px), 560px); max-width: none; }
.pw__town--l { left: 0; } .pw__town--r { right: 0; }
.paywall2 .pw__in {
  position: relative; z-index: 1; margin: 2rem auto; border-radius: 22px;
  background: rgb(255 255 255 / .74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / .9); box-shadow: 0 18px 50px rgb(30 11 184 / .10);
}
.pw__crest { width: 112px; height: auto; margin-bottom: -.75rem; }
.pw__grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #B07D0E; font-style: italic; }
.pw__prem { background: #E0A31B; box-shadow: 0 10px 30px rgb(176 125 14 / .18); }
.pw__prem::before {   /* a gold Greek key across the column's head */
  content: ""; position: absolute; z-index: 1; left: 2.5px; right: 2.5px; top: 2.5px; height: 12px; border-radius: 13.5px 13.5px 0 0;
  background: #FFF8E6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 10.5H12M2 10.5V2H10V8H5.5V5H7.5' fill='none' stroke='%23C48D14' stroke-width='1.3'/%3E%3C/svg%3E") 0 0 / 12px 12px repeat-x;
}
.paywall2 .pw__r--head { padding-top: 1.25rem; }
.paywall2 .pwm--y { background: #E0A31B; color: #fff; }
.segc--plan.is-gold .segc__glider { background: #F8D47E; box-shadow: 0 0 0 1.5px #C98B0B; }
.paywall2 .pw__cta { background: var(--brand); box-shadow: 0 4px 0 #120774; }
.paywall2 .pw__cta:hover { background: var(--brand-lift); }
@media (max-width: 700px) {
  .pw__town { width: 46vw; opacity: .9; }
  .pw__sea { height: 10vh; }
  .paywall2 .pw__in { margin: 1rem .75rem 34vw; }
}
@media (prefers-reduced-motion: reduce) { .pw__cloud, .pw__cloud img { animation: none; } .pw__cloud { left: calc(var(--y) * 2); } }

/* ---------- 75. illustrated covers ----------
   Every hustle and its course share one cover (hustles/<id>.webp, app.js cover()): a
   league god at work on an accent colour of its own. The picture fills the band and the
   title moves into the body under it. Home's Recommended block shows the course's
   floating island instead (isle()). */
.wcard__cover { min-height: 0; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; background: var(--surface-sunk); }
.dcard .wcard__cover { min-height: 0; aspect-ratio: 2 / 1; }
.wcard__img, .sheet__img, .coursecard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wcard__img { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.card--tap:hover .wcard__cover { filter: none; }
.card--tap:hover .wcard__img { transform: scale(1.04); }
.wcard__cover.is-locked .wcard__img { filter: saturate(.6); }
.wcard__body .wcard__name, .dcard__body .wcard__name { color: var(--ink); font-size: var(--t-base); line-height: 1.25; }
.deck__stack { height: 366px; }
.dcard { height: 340px; }
/* the detail sheet opens on the same picture, wider */
.sheet .sheet__hero { height: auto; aspect-ratio: 5 / 2; background: var(--surface-sunk); }
.sheet__img { object-position: 50% 28%; }   /* the gods' heads sit high in the frame */
.sheet__hero::before { display: none; }
/* the course page's card leads with it too */
.coursecard__art { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-sunk); }
/* Recommended: the course's island beside the mascot, and on each course switch */
.hero2__art .isleart { display: block; width: 100%; max-height: 190px; object-fit: contain; }
.swtile .isleart { width: 100%; height: 100%; object-fit: contain; transform: scale(1.12); }
@media (max-width: 899px) { .hero2__art .isleart { max-height: 140px; } }
/* shelves: the arrow sits in the header row after "Explore hustles", and the cards fade
   out at the right edge (a mask, so the sky behind shows through) until the end is reached */
.section__head .shelf__next { position: static; flex: none; align-self: center; width: 36px; height: 36px; }
.section__head h2 + .shelf__next { margin-left: auto; }
.section:has(.shelfwrap.is-scrollable) .shelf__next { opacity: 1; pointer-events: auto; }
.section:has(.shelfwrap.is-end) .shelf__next { opacity: .35; pointer-events: none; }
.shelfwrap::after { display: none; }
@media (min-width: 900px) {
  .shelfwrap.is-scrollable:not(.is-end) .shelf { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); }
}
.sheet__hero .hustle__tags { position: absolute; top: 12px; left: 12px; z-index: 1; }

/* ---------- skills (Skills page, hustle sheet, course page) ----------
   A required skill or a hustle's track as a tile with its own progress; small chips for
   recommended skills; a sunk card that says which skills open a closed track unit. */
.hustle__mark.cv1, .hustle__mark.cv2, .hustle__mark.cv3,
.hustle__mark.cv4, .hustle__mark.cv5, .hustle__mark.cv6 { color: var(--acc); background: var(--acc-soft); }
.sktile { padding: .875rem; align-items: center; }
.sktile.is-done .hustle__mark { color: var(--safe); background: var(--safe-bg); }
.sktile__txt { display: grid; gap: .3rem; text-align: left; min-width: 0; flex: 1; }
.sktile__txt strong { font-size: var(--t-sm); line-height: 1.25; }
.sktile__meta { font-size: var(--t-xs); color: var(--ink-3); }
.meter--thin { height: 4px; }
.sktile--track { grid-column: 1 / -1; }
.alsouse { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.alsouse > .eyebrow { margin-right: .25rem; }
.skchip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem;
  border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; cursor: pointer;
  transition: border-color .16s, color .16s;
}
.skchip:hover { border-color: var(--brand-soft); color: var(--ink); }
.skchip.is-done { color: var(--safe); border-color: color-mix(in oklab, var(--safe) 35%, var(--line)); }
.skchip--track { color: var(--brand); border-color: color-mix(in oklab, var(--brand) 30%, var(--line)); }
.skchip__n { color: var(--ink-3); font-weight: 500; }
.skgroup { display: grid; gap: .75rem; }
.skgroup + .skgroup { margin-top: 1.5rem; }
.skgroup__t { font-size: var(--t-sm); font-weight: 700; color: var(--ink-3); letter-spacing: .02em; margin: 0; }
.savedrow { display: grid; gap: .625rem; }
.savedrow__h { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: 0;
  color: var(--ink); font: inherit; cursor: pointer; justify-self: start; }
.savedrow__h .ic:last-child { color: var(--ink-3); }
.lockcard { display: grid; gap: .5rem; padding: .875rem; margin: 0 0 .5rem; width: 420px; max-width: 100%; }
span.meter, span.meter__fill { display: block; }
.lockcard__k { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); }
.section.is-gated .pathwrap { opacity: .55; }
.path__level-k .ic { margin-right: .3rem; vertical-align: -1px; }

/* a skill's picture is its badge on its group's flat colour: AI blue, selling orange,
   business green, rules purple. The badges themselves carry their own colours. */
.skg0 { --skg: #2F6FE4; } .skg1 { --skg: #F07C2E; } .skg2 { --skg: #1E9E63; } .skg3 { --skg: #7B3FC4; }
.skillcover { position: absolute; inset: 0; background: var(--skg); }
.skillcover .badgeart { position: absolute; inset: 14% 0; width: 100%; height: 72%; object-fit: contain; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .16)); }
.hero2__art .isleart--badge { max-height: 150px; margin: .5rem 0; }
.swtile .isleart--badge { transform: scale(.82); }
@media (max-width: 899px) { .hero2__art .isleart--badge { max-height: 110px; } }
/* Home's Recommended picture bobs; --clock keeps it in step across re-renders */
.hero2__art img { animation: art-bob 3.4s ease-in-out infinite alternate; animation-delay: var(--clock, 0s); }
@keyframes art-bob { from { translate: 0 3px; } to { translate: 0 -7px; } }
@media (prefers-reduced-motion: reduce) { .hero2__art img { animation: none; } }
/* phones wrap long course names: hold two lines so the tiles under the card don't jump when you pick one */
@media (max-width: 560px) { .hero2__t { min-height: 2lh; display: grid; place-items: center; } }
/* a hustle opens as a full page under the top bar, which stays where it is */
:root { --topbar-h: 57px; }
.sheet.sheet--page { inset: var(--topbar-h) 0 0; z-index: 60; width: auto; max-width: none; max-height: none;
  translate: none; border-radius: 0; box-shadow: none; padding-bottom: 0; }
.sheet--page > .sheet__hero, .sheet--page > .sheet__body { width: min(960px, 100% - 3rem); margin-inline: auto; }
.sheet--page > .sheet__hero { margin-top: 1.5rem; border-radius: var(--r-lg); overflow: hidden; }
.sheet--page > .sheet__body { padding: 1.75rem 0 2.5rem; }
.sheet--page > .sheet__foot { padding-inline: max(1.5rem, calc((100% - 960px) / 2)); }
@media (max-width: 899px) {
  .sheet--page > .sheet__hero { width: 100%; margin: 0; border-radius: 0; }
  .sheet--page > .sheet__body { width: calc(100% - 2rem); padding-top: 1.25rem; }
}
/* the hustle sheet's way into its own lessons */
.sktile__go { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem;
  border-radius: var(--r-pill); background: var(--brand); color: #fff; font-size: var(--t-sm); font-weight: 700; }
/* profile: every skill's badge, won ones first and in colour */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 1.25rem .5rem; }
.bdg { display: grid; justify-items: center; align-content: start; gap: .5rem; padding: 0; background: none; border: 0;
  font: inherit; color: var(--ink); text-align: center; cursor: pointer; }
.bdg__img { width: 84px; height: 84px; object-fit: contain; transition: translate .25s cubic-bezier(.22,1,.36,1); }
.bdg:hover .bdg__img { translate: 0 -3px; }
.bdg:not(.is-won) .bdg__img { filter: grayscale(1) brightness(1.1); opacity: .28; }
.bdg:not(.is-won) .bdg__t { color: var(--ink-3); font-weight: 500; }
.bdg__t { font-size: var(--t-xs); font-weight: 700; line-height: 1.3; max-width: 14ch; }
/* lesson result: the skill this lesson finished */
.result__badge { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; margin-top: .25rem;
  border-radius: var(--r-md); background: rgb(255 255 255 / .12); text-align: left; font-size: var(--t-sm); line-height: 1.35; }
.result__badge strong { display: block; }
.result__badgeimg { width: 56px; height: 56px; object-fit: contain; flex: none; }