/* BetterMemory - design system.
   Verdigris accent on cool architectural neutrals. Spectral carries the lesson
   prose (a serif reads better for the teaching text and separates it from the
   interface); Plex Sans does the chrome; Plex Mono does counters and codes. */

:root{
  --paper:#f2f3f6; --surface:#ffffff; --sunken:#e7e9ef; --stage:#12141c;
  /* --ink-3 was #6e7489: 4.19:1 on paper, 3.83:1 on sunken rows - under AA.
     #5f6578 is 5.23:1 and 4.78:1. --field-border is 3.2:1 against white,
     where --rule (1.43:1) left a text field with no visible edge. */
  --ink:#191d2b; --ink-2:#454b60; --ink-3:#5f6578;
  --rule:#d4d8e2; --rule-soft:#e3e6ed; --field-border:#858b9c;
  --accent:#166b6b; --accent-hover:#0f5252; --accent-soft:#e2f0ef; --accent-ink:#ffffff;
  --good:#1d6b45; --warn:#8a5a10; --crit:#a3302a;
  --maple:#d0342c;
  --f-display:"Spectral",Georgia,"Times New Roman",serif;
  --f-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --shadow:0 10px 34px rgba(20,24,40,.13),0 2px 6px rgba(20,24,40,.07);
  --radius:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#101219; --surface:#1a1d28; --sunken:#0b0d13; --stage:#0b0d13;
    --ink:#e8eaf1; --ink-2:#b0b6c8; --ink-3:#858ca2;
    --rule:#2e3344; --rule-soft:#232734; --field-border:#646a80;
    --accent:#5cb5b0; --accent-hover:#7ecac5; --accent-soft:#12272b; --accent-ink:#06171a;
    --good:#5cbb8c; --warn:#d6a44a; --crit:#e8837c;
    --maple:#f07a70;
    --shadow:0 10px 34px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --paper:#101219; --surface:#1a1d28; --sunken:#0b0d13; --stage:#0b0d13;
  --ink:#e8eaf1; --ink-2:#b0b6c8; --ink-3:#858ca2;
  --rule:#2e3344; --rule-soft:#232734; --field-border:#646a80;
  --accent:#5cb5b0; --accent-hover:#7ecac5; --accent-soft:#12272b; --accent-ink:#06171a;
  --good:#5cbb8c; --warn:#d6a44a; --crit:#e8837c;
  --maple:#f07a70;
  --shadow:0 10px 34px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-ui);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
a{color:var(--accent)}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- chrome */
.topbar{display:flex;align-items:center;gap:14px;padding:16px 24px;
  border-bottom:1px solid var(--rule);background:var(--surface)}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand-mark{width:22px;height:22px;flex:none}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
/* The signed-in bar (logo + Dashboard, Tracks, Account) was 458px wide, so on
   a phone Account sat off-screen and every signed-in page scrolled sideways.
   Under 480px the wordmark goes (the logo stays) and the buttons tighten. */
@media (max-width:480px){
  .topbar.is-signed-in{padding:12px 14px;gap:8px}
  .topbar.is-signed-in .topbar-right{gap:6px}
  .topbar.is-signed-in .topbar-right .btn-sm{padding:9px 11px}
  .topbar.is-signed-in .brand-word{display:none}
}

/* ------------------------------------------------------------------ hero */
.hero{max-width:760px;margin:0 auto;padding:76px 24px 64px;text-align:center}
.kicker{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:20px}
.hero h1{font-family:var(--f-display);font-weight:300;
  font-size:clamp(38px,7vw,66px);line-height:1.04}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-sub{font-size:19px;color:var(--ink-2);max-width:30em;margin:24px auto 0;line-height:1.55}
.hero-cta{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:13px}
.hero-fine{font-size:13.5px;color:var(--ink-3)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid transparent;border-radius:8px;font-weight:600;font-size:16px;
  padding:14px 30px;cursor:pointer;text-decoration:none;
  background:var(--accent);color:var(--accent-ink);
  transition:background .15s ease,transform .12s ease}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--rule)}
.btn-ghost:hover{background:var(--sunken);color:var(--ink)}
.btn-sm{font-size:14px;padding:9px 17px}
.btn-lg{font-size:17px;padding:16px 36px}
/* 44px touch targets on touch screens; the small buttons were 42px and Leave 32px. */
@media (pointer:coarse){
  .btn-sm{min-height:44px}
  .stage-exit{min-height:44px;padding:10px 12px}
  .dash-track-list a{display:inline-block;padding:11px 0}
}

/* --------------------------------------------------------- the lesson stage
   One step on screen at a time. Everything else gets out of the way, because
   the work being asked for is visualising, not reading. */
.stage{min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}
.stage-bar{display:flex;align-items:center;gap:16px;padding:14px 22px;
  border-bottom:1px solid var(--rule);background:var(--surface);position:sticky;top:0;z-index:5}
.stage-exit{background:none;border:none;color:var(--ink-3);cursor:pointer;
  font-size:14px;padding:5px 8px;border-radius:6px}
.stage-exit:hover{color:var(--ink);background:var(--sunken)}
.progress{flex:1;height:3px;background:var(--rule-soft);border-radius:99px;overflow:hidden;max-width:420px;margin:0 auto}
.progress-fill{height:100%;background:var(--accent);border-radius:99px;
  transition:width .35s cubic-bezier(.4,0,.2,1)}
.stage-count{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;min-width:52px;text-align:right}

.step{flex:1;display:flex;align-items:center;justify-content:center;padding:44px 24px 64px}
.step-inner{width:100%;max-width:620px}
.step-eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:500}
.step h2{font-family:var(--f-display);font-weight:400;
  font-size:clamp(26px,4.2vw,36px);line-height:1.18;margin-bottom:20px}
.step-body{font-family:var(--f-display);font-size:18px;line-height:1.66;color:var(--ink-2)}
.step-body p+p{margin-top:16px}
.step-body strong{color:var(--ink);font-weight:600}
.step-body em{color:var(--ink)}
.step-actions{margin-top:34px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ------------------------------------------------------------- link steps */
.pair{display:flex;align-items:center;justify-content:center;gap:18px;
  margin:8px 0 28px;flex-wrap:wrap}
.pair-item{font-family:var(--f-display);font-size:clamp(24px,4vw,34px);
  font-weight:600;color:var(--ink);padding:13px 24px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}
.pair-item.is-new{border-color:var(--accent);color:var(--accent)}
.pair-join{color:var(--ink-3);flex:none}

.suggestion{margin-top:26px;background:var(--accent-soft);
  border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 22px}
.suggestion-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:9px}
.suggestion p{font-family:var(--f-display);font-size:17px;line-height:1.58;color:var(--ink)}
.suggestion-note{margin-top:12px;font-family:var(--f-ui);font-size:13px;color:var(--ink-3);line-height:1.5}
.reveal-btn{margin-top:22px}

/* ------------------------------------------------------------ recall step */
.recall-list{display:flex;flex-direction:column;gap:9px;margin:26px 0 0}
.recall-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:14px;
  padding:14px 17px;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);min-height:60px}
.recall-row.is-active{border-color:var(--accent);box-shadow:var(--shadow)}
.recall-row.is-done{background:var(--sunken)}
.recall-n{font-family:var(--f-mono);font-size:13px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.recall-word{font-family:var(--f-display);font-size:19px;font-weight:600;color:var(--ink)}
.recall-word.is-hidden{color:var(--ink-3);font-weight:400;font-style:italic;font-size:16px}
/* Rooms recall names the place on each row (lesson.js renderRecall). */
.recall-place{font-family:var(--f-ui);font-size:14px;font-weight:600;font-style:normal;color:var(--ink-2)}
.recall-word.is-hidden .recall-place{color:var(--ink-2)}
.locus-mark{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font-family:var(--f-ui);font-size:11px;font-weight:600;font-style:normal;letter-spacing:.04em;
  text-transform:uppercase;vertical-align:middle;background:var(--accent-soft);color:var(--accent)}
.route-list{margin-top:24px;padding:16px 18px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface)}
.route-list ol{margin:8px 0 14px;padding-left:22px;line-height:1.7}
.route-list .muted{margin-top:10px;font-size:13px}
.field-error{margin-top:14px;color:var(--crit);font-size:14px}
.btn-link{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.recall-mark{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600}
.recall-mark.got{color:var(--good)} .recall-mark.missed{color:var(--ink-3)}
.recall-btns{display:flex;gap:7px}

/* ----------------------------------------------------------- result step */
.score{font-family:var(--f-mono);font-size:clamp(52px,13vw,84px);font-weight:600;
  color:var(--accent);line-height:1;letter-spacing:-.03em;margin-bottom:6px;
  font-variant-numeric:tabular-nums}
.score-of{font-family:var(--f-ui);font-size:15px;color:var(--ink-3);
  letter-spacing:.02em;margin-bottom:26px}

/* ------------------------------------------------------------------ misc */
.card{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:26px}
.muted{color:var(--ink-3);font-size:13.5px;line-height:1.55}
.center{text-align:center}
footer.site{border-top:1px solid var(--rule);padding:28px 24px;margin-top:60px;
  font-size:13px;color:var(--ink-3);text-align:center}
footer.site a{color:var(--ink-3)}

/* Steps arrive from a visible resting state, never parked invisible. */
@keyframes stepIn{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:none}}
.step-inner{animation:stepIn .3s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
@media (max-width:560px){
  .hero{padding:52px 20px 44px}
  .step{padding:30px 20px 52px}
  .pair{gap:11px}
  .recall-row{grid-template-columns:28px 1fr;row-gap:10px}
  .recall-btns{grid-column:1/-1;justify-content:flex-end}
}

/* ------------------------------------------------------------ names track */

.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 0}
.compare-card{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:22px 20px;text-align:center}
.compare-card.is-hard{border-style:dashed;border-color:var(--ink-3)}
.compare-name{font-family:var(--f-display);font-size:23px;font-weight:600;
  color:var(--ink);margin-bottom:10px}
.compare-note{font-size:14px;color:var(--ink-2);line-height:1.5}

.name-plate{font-family:var(--f-display);font-size:clamp(30px,5.5vw,42px);
  font-weight:600;color:var(--ink);letter-spacing:-.02em;
  padding:16px 0 6px;border-bottom:2px solid var(--accent);
  display:inline-block;margin-bottom:8px}
.name-plate.is-inline{font-size:clamp(23px,3.6vw,30px);padding:6px 0 4px;border-bottom-width:2px}

/* Substitute breakdown: the sound fragment and the picture it buys. */
.parts{margin:0;display:grid;gap:11px}
.part{display:grid;grid-template-columns:minmax(88px,auto) 1fr;gap:15px;align-items:baseline}
.part dt{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--accent)}
.part dd{margin:0;font-family:var(--f-display);font-size:16px;line-height:1.5;color:var(--ink)}

.face-row{display:grid;grid-template-columns:158px 1fr;gap:26px;align-items:center;
  margin-bottom:26px}
.face{position:relative;width:158px;aspect-ratio:120/148;background:var(--sunken);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.face svg{display:block}
.face-mark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.face-feature{font-size:14.5px;color:var(--ink-2);margin-top:10px;line-height:1.5}
.face-feature strong{color:var(--ink)}

.build-label{display:block;font-size:13.5px;font-weight:600;margin:22px 0 8px}
.build-input{width:100%;padding:12px 14px;border:1px solid var(--field-border);border-radius:8px;
  background:var(--surface);color:var(--ink);font-family:var(--f-display);
  font-size:16px;line-height:1.5;resize:vertical}
.build-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
/* The browser default placeholder was 3.65:1 in dark mode. */
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}

.drill-card{margin-top:24px;display:grid;justify-items:center;gap:18px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:26px 22px}
.drill-card .face{width:190px}
.drill-count{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.drill-answer{text-align:center;min-height:56px;display:grid;place-items:center}
.drill-done{font-family:var(--f-display);font-size:21px;color:var(--ink);
  text-align:center;margin:26px 0}

/* --------------------------------------------------------------- track map */
.lesson-list{display:grid;gap:10px;margin-top:26px}
.lesson-card{display:grid;grid-template-columns:34px 1fr auto;gap:16px;align-items:center;
  padding:17px 19px;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);text-decoration:none;color:inherit}
.lesson-card:hover{border-color:var(--accent)}
/* Locked lessons stay clickable: they lead to the plans (or sign-up). They
   used to be pointer-events:none while the keyboard still followed the link. */
.lesson-card.is-locked{opacity:.6}
.lesson-card.is-next{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.lesson-card.is-done .lesson-n{color:var(--accent);font-weight:700}
.lesson-n{font-family:var(--f-mono);font-size:13px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.lesson-title{font-family:var(--f-display);font-size:18px;font-weight:600;color:var(--ink)}
/* Block, so the subtitle sits under the title instead of running on after it. */
.lesson-title{display:block}
.lesson-sub{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.lesson-mins{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);white-space:nowrap}

@media (max-width:560px){
  .compare{grid-template-columns:1fr}
  .face-row{grid-template-columns:104px 1fr;gap:16px}
  .face{width:104px}
  .drill-card .face{width:150px}
  .part{grid-template-columns:1fr;gap:3px}
  .lesson-card{grid-template-columns:26px 1fr;row-gap:6px}
  .lesson-mins{grid-column:2}
}

/* ------------------------------------------------------------- review */
.review-card{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  margin:10px 0 8px}
.review-ask{min-height:110px;display:grid;align-content:center;gap:4px}
.review-q{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,4vw,32px);
  line-height:1.2;margin:0}
.review-image{font-family:var(--f-display);font-size:15.5px;line-height:1.5;
  color:var(--ink-2);margin-top:10px;max-width:44ch}
.review-image em{color:var(--ink)}
.review-foot{margin-top:18px;max-width:46ch}
@media (max-width:560px){
  .review-card{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}
  .review-ask{min-height:0;justify-items:center}
  .review-image{text-align:left}
}

/* -------------------------------------------------------------- tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:26px 0 22px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden}
.tile{background:var(--surface);padding:18px 20px}
.tile-n{font-family:var(--f-mono);font-size:30px;font-weight:600;color:var(--ink);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile.is-live .tile-n{color:var(--accent)}
.tile-l{font-size:12.5px;color:var(--ink-3);margin-top:6px}
/* Three tiles in a 2-column grid left an empty grey fourth cell on phones. */
@media (max-width:560px){.tiles{grid-template-columns:repeat(3,1fr)}.tile{padding:14px 12px}.tile-n{font-size:24px}}

/* ------------------------------------------------------- made in Canada
   Deliberately understated: a 14px leaf and one line of text. The claim is
   worth making plainly because it is unusually true here - the server is in
   Ontario and the data never leaves the country - and overstating it would
   undo exactly the credibility it is meant to buy. */
.canada{display:inline-flex;align-items:center;gap:7px;font-size:13px;
  color:var(--ink-3);line-height:1.4}
.canada svg{flex:none}
/* A flag keeps its own colours, so it needs an edge of its own to sit on a
   dark ground without the white band reading as a gap in the page. */
.flag-ca{border-radius:2px;box-shadow:0 0 0 1px rgba(120,130,155,.35);
  display:block;vertical-align:middle}
.canada strong{color:var(--ink-2);font-weight:600}
.canada-block{display:flex;align-items:flex-start;gap:11px;padding:16px 18px;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);
  margin:22px 0}
.canada-block svg{flex:none;margin-top:3px}
.canada-block p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.canada-block strong{color:var(--ink);font-weight:600}

/* --------------------------------------------------------- rooms track */
.loci-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;counter-reset:none}
.loci-list li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center}
.loci-n{font-family:var(--f-mono);font-size:13px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;text-align:right}
/* 16px, not 15: iOS zooms the page into any field under 16px. */
.loci-input{padding:10px 12px;font-size:16px}

.rules{display:grid;gap:9px;margin:24px 0 0}
.rule{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);
  overflow:hidden}
.rule-head{display:grid;grid-template-columns:26px 1fr 20px;gap:13px;align-items:center;
  width:100%;padding:15px 17px;background:none;border:none;text-align:left;cursor:pointer;
  color:var(--ink)}
.rule-head:hover{background:var(--sunken)}
.rule-n{font-family:var(--f-mono);font-size:12px;color:var(--accent);font-weight:600}
.rule-text{font-family:var(--f-display);font-size:17px;line-height:1.35}
.rule-open{font-family:var(--f-mono);color:var(--ink-3);text-align:center}
.rule-why{padding:0 17px 17px 56px;border-top:1px solid var(--rule-soft)}
.rule-why p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:13px 0 0}
.rule-latin{font-family:var(--f-display);font-style:italic;color:var(--accent);
  font-size:14px;margin-top:13px!important}

/* ------------------------------------------------------- numbers track */
.code-card{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:22px 24px;margin:6px 0 22px;box-shadow:var(--shadow)}
.code-card.is-wide{grid-template-columns:auto 1fr}
.code-digit{font-family:var(--f-mono);font-size:clamp(44px,8vw,64px);font-weight:600;
  color:var(--accent);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.code-digit.is-big{font-size:clamp(56px,12vw,84px)}
.code-sounds{font-family:var(--f-mono);font-size:20px;font-weight:500;color:var(--ink);
  letter-spacing:.02em}
.code-sounds.is-big{font-size:27px}
.code-peg{font-family:var(--f-display);font-size:18px;font-weight:600;color:var(--ink);
  margin-top:6px}
.code-shape{font-size:14.5px!important;color:var(--ink-3)!important}
@media (max-width:560px){
  .code-card{grid-template-columns:1fr;gap:10px;text-align:center;justify-items:center}
  .rule-why{padding-left:17px}
}

/* ------------------------------------------------------------ peg blocks */
.pegs{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:1px;
  margin:24px 0 0;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden}
.peg{background:var(--surface);padding:11px 14px;display:grid;
  grid-template-columns:32px 1fr;grid-template-rows:auto auto;gap:0 11px;align-items:baseline}
.peg-n{grid-row:1/3;font-family:var(--f-mono);font-size:16px;font-weight:600;
  color:var(--accent);font-variant-numeric:tabular-nums;align-self:center}
.peg-word{font-family:var(--f-display);font-size:17px;font-weight:600;color:var(--ink)}
.peg-sounds{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.04em}
@media (max-width:560px){.pegs{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------------------ the account */

.acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.acct-row:last-child { border-bottom: 0; }
.acct-row .muted { margin-top: 3px; font-size: 13.5px; }

/* A disabled control here is carrying information - it is the only way into
   the account - so it must not read as broken. Dimmed, but the title attribute
   says why, and the cursor invites the hover that reveals it. */
.acct-row button[disabled] { opacity: .45; cursor: not-allowed; }

.acct-notice {
  margin-top: 18px;
  padding: 11px 14px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 14.5px;
}

.acct-holdings {
  margin: 14px 0 20px;
  padding-left: 20px;
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.75;
}
.acct-holdings strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.acct-danger { border-color: color-mix(in srgb, var(--crit) 40%, var(--rule)); }

.btn-danger {
  background: var(--crit);
  border-color: var(--crit);
  color: #fff;
}
.btn-danger:hover { filter: brightness(1.08); }

/* ------------------------------------------- unconfirmed email notice */

.verify-notice {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding: 15px 17px;
  border-radius: 8px;
  /* Attention, not alarm: this is a thing to do, not a thing gone wrong. */
  border: 1px solid color-mix(in srgb, var(--warn, #b8791f) 38%, transparent);
  background: color-mix(in srgb, var(--warn, #b8791f) 9%, transparent);
  font-size: 14.5px;
  line-height: 1.6;
}
.verify-notice strong { color: var(--ink); }

/* The junk-folder hint is the useful half, so it does not get buried in the
   same weight as the rest. */
.verify-junk { display: block; margin-top: 5px; color: var(--ink-3); }

.verify-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.verify-ok  { color: var(--ok, #1d7a55); font-size: 14px; }
.verify-err { color: var(--crit); font-size: 14px; }

/* --------------------------------------------------------------- tracks */

.track-grid {
  display: grid;
  gap: 16px;
  margin-top: 26px;
  /* auto-fit rather than a fixed count: four tracks today, and the row should
     not go ragged when a fifth arrives. */
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.track-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px 21px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--surface);
}
.track-card.is-soon { opacity: .6; }

.track-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.track-head h3 { margin: 0; font-size: 17px; }

.track-due {
  flex: none;
  padding: 2px 9px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.track-tag  { margin: 0; font-size: 14.5px; color: var(--ink); }
.track-desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); flex: 1; }

/* A thin rule rather than a chunky progress bar - this is a reference point,
   not the reason to be on the page. */
.track-meter { height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.track-meter span { display: block; height: 100%; background: var(--accent); }

.track-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; }
.track-status { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.dash-tracks { margin-top: 30px; }
.dash-tracks h3 { margin: 0 0 12px; font-size: 15px; }

.dash-track-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dash-track-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 9px; border-bottom: 1px solid var(--rule); font-size: 14.5px;
}
.dash-track-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-track-list .muted { font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- billing */

.plan-grid {
  display: grid;
  gap: 16px;
  margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  max-width: 620px;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px 22px 20px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
}
/* One plan carries the emphasis. Both are the same product, so the difference
   is a border and a flag, not a bigger card that implies more is included. */
.plan-card.is-featured { border-color: var(--accent); }

.plan-flag {
  position: absolute; top: -9px; left: 20px;
  padding: 2px 9px; border-radius: 99px;
  background: var(--accent); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
}
.plan-card h3 { margin: 0; font-size: 16px; }

.plan-price { display: flex; align-items: baseline; gap: 7px; }
.plan-price strong { font-size: 31px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.plan-price span { font-size: 13.5px; color: var(--ink-3); }

.plan-equiv { margin: 0; font-size: 13px; color: var(--ink-3); }
.plan-desc  { margin: 4px 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); flex: 1; }
/* Back from sign-up with a plan already chosen (app.js wantedPlan). */
.plan-wanted { margin: 22px 0 0; padding: 12px 15px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; font-size: 15px; }

.plan-terms { max-width: 620px; margin-top: 24px; font-size: 13.5px; line-height: 1.65; color: var(--ink-3); }
.plan-terms strong { color: var(--ink); }

/* ------------------------------------------------------------------ blog
   Server-rendered by blog/*.php from HeyCatch articles. Same tokens as the
   app; the reading column uses Spectral like the lesson prose. */
.topbar-link{font-size:14px;color:var(--ink-2);text-decoration:none;padding:5px 8px;border-radius:6px}
.topbar-link:hover{color:var(--ink);background:var(--sunken)}
.blog-head{max-width:760px;margin:0 auto;padding:64px 24px 34px;text-align:center}
.blog-head h1{font-family:var(--f-display);font-weight:300;font-size:clamp(34px,6vw,54px);line-height:1.08}
.blog-head h1 em{font-style:italic;color:var(--accent)}
.blog-head .hero-sub{font-size:18px;margin-top:18px}
.blog-wrap{max-width:760px;margin:0 auto;padding:0 24px}
.blog-empty{text-align:center;font-size:16px;color:var(--ink-2)}
.blog-empty h1{font-family:var(--f-display);font-weight:400;font-size:26px;color:var(--ink)}
.blog-missing{padding-top:64px}
.blog-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.blog-item{padding:28px 0;border-bottom:1px solid var(--rule);display:grid;gap:22px}
.blog-item.has-img{grid-template-columns:180px 1fr;align-items:start}
.blog-thumb img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;display:block;background:var(--sunken)}
.blog-date{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.blog-item h2{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,3.2vw,27px);line-height:1.25;margin:6px 0 8px}
.blog-item h2 a{color:var(--ink);text-decoration:none}
.blog-item h2 a:hover{color:var(--accent)}
.blog-item p{color:var(--ink-2);font-size:15.5px;line-height:1.6}
.blog-pager{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:28px 0 0}

.blog-article{max-width:700px;margin:0 auto;padding:44px 24px 0}
.blog-back{font-size:14px;color:var(--ink-3);text-decoration:none}
.blog-back:hover{color:var(--accent)}
.blog-article-head h1{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,5.4vw,46px);line-height:1.12;margin-top:22px}
.blog-lede{font-family:var(--f-display);font-size:20px;line-height:1.55;color:var(--ink-2);margin-top:18px}
.blog-meta{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);margin-top:18px;letter-spacing:.02em}
.blog-cover{margin:30px 0 0}
.blog-cover img{width:100%;border-radius:var(--radius);display:block}
.blog-toc{margin-top:30px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 22px}
.blog-toc ol{margin:0;padding-left:20px;font-size:14.5px;line-height:1.75}
.blog-toc .lvl-3{margin-left:16px;list-style:circle}
.blog-toc a{color:var(--ink-2);text-decoration:none}
.blog-toc a:hover{color:var(--accent)}
.blog-prose{font-family:var(--f-display);font-size:19px;line-height:1.72;color:var(--ink);margin-top:34px;overflow-wrap:break-word}
.blog-prose>*+*{margin-top:1.05em}
.blog-prose h2,.blog-prose h3,.blog-prose h4{font-weight:600;line-height:1.25;scroll-margin-top:20px}
.blog-prose h2{font-size:28px;margin-top:1.8em}
.blog-prose h3{font-size:22px;margin-top:1.5em}
.blog-prose h4{font-size:19px;margin-top:1.3em}
.blog-prose ul,.blog-prose ol{padding-left:1.4em}
.blog-prose li+li{margin-top:.35em}
.blog-prose blockquote{margin-left:0;border-left:3px solid var(--accent);background:var(--accent-soft);
  padding:14px 20px;border-radius:0 var(--radius) var(--radius) 0;color:var(--ink-2)}
.blog-prose code{font-family:var(--f-mono);font-size:.82em;background:var(--sunken);padding:.1em .35em;border-radius:4px}
.blog-prose pre{background:var(--sunken);padding:16px 18px;border-radius:8px;overflow-x:auto}
.blog-prose pre code{background:none;padding:0}
.blog-prose img{max-width:100%;height:auto;border-radius:8px}
.blog-prose figcaption{font-family:var(--f-ui);font-size:13.5px;color:var(--ink-3);margin-top:8px}
.blog-prose hr{border:none;border-top:1px solid var(--rule);margin:2em 0}
.blog-prose table{width:100%;border-collapse:collapse;font-family:var(--f-ui);font-size:15px;display:block;overflow-x:auto}
.blog-prose th,.blog-prose td{border:1px solid var(--rule);padding:9px 12px;text-align:left;vertical-align:top}
.blog-prose th{background:var(--sunken);font-weight:600}
.blog-cta{margin-top:48px;text-align:center}
.blog-cta p{font-size:16px;color:var(--ink-2)}
@media (max-width:560px){
  .blog-head{padding:44px 20px 26px}
  .blog-wrap,.blog-article{padding-left:20px;padding-right:20px}
  .blog-item.has-img{grid-template-columns:1fr;gap:14px}
  .blog-prose{font-size:18px}
}

/* ------------------------------------------------------- home sections
   Added after the HeyCatch site audit (2026-10-20): nav, how it works, who it
   is for, founder, pricing, FAQ. The hero above them is unchanged. */
.topbar-nav{display:flex;align-items:center;gap:2px;margin-left:8px}
.hero-names{font-size:17px;color:var(--ink-2);max-width:32em;margin:16px auto 0;line-height:1.55}
.hero-names strong{color:var(--ink);font-weight:600}
.hero-alt{font-size:14.5px;color:var(--accent);text-decoration:none}
.hero-alt:hover{text-decoration:underline}
.home-section{border-top:1px solid var(--rule);padding:60px 24px}
.home-inner{max-width:680px;margin:0 auto}
.home-section h2{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,4vw,34px);line-height:1.2;margin-bottom:22px}
.home-steps{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:14px}
.home-steps li{counter-increment:step;position:relative;padding:4px 0 4px 46px;font-family:var(--f-display);font-size:18px;line-height:1.6;color:var(--ink-2)}
.home-steps li::before{content:counter(step);position:absolute;left:0;top:4px;width:30px;height:30px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-family:var(--f-mono);font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.home-steps strong,.home-list strong{color:var(--ink);font-weight:600}
.home-shot{margin:34px 0 0}
.home-shot img{width:100%;height:auto;display:block;border-radius:var(--radius);border:1px solid var(--rule);box-shadow:var(--shadow)}
.home-shot figcaption{font-size:13.5px;color:var(--ink-3);margin-top:10px;text-align:center}
.home-list{margin:0;padding-left:1.2em;font-family:var(--f-display);font-size:18px;line-height:1.6;color:var(--ink-2)}
.home-list li+li{margin-top:8px}
.home-note,.home-p{font-family:var(--f-display);font-size:18px;line-height:1.6;color:var(--ink-2);margin-top:20px}
.home-note strong,.home-p strong{color:var(--ink);font-weight:600}
.founder{display:flex;gap:22px;align-items:flex-start}
.founder p{font-family:var(--f-display);font-size:18px;line-height:1.65;color:var(--ink-2)}
.founder-photo{width:110px;height:110px;border-radius:50%;object-fit:cover;flex:none}
.founder-links{margin-top:12px}
.faq{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule);padding:4px 0}
.faq-item summary{cursor:pointer;list-style:none;padding:14px 32px 14px 0;font-weight:600;font-size:16.5px;color:var(--ink);position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:12px;font-family:var(--f-mono);font-size:18px;color:var(--accent)}
.faq-item[open] summary::after{content:"−"}
.faq-item p{font-family:var(--f-display);font-size:17.5px;line-height:1.62;color:var(--ink-2);padding:0 0 16px}
.home-cta{margin-top:36px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:30px}
.price-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:22px}
.price-card.is-featured{border-color:var(--accent)}
.price-card h2{font-family:var(--f-ui);font-size:15px;font-weight:600;color:var(--ink-2);margin:0}
.price-amount{margin-top:10px}
.price-amount strong{font-family:var(--f-display);font-size:40px;font-weight:400;color:var(--ink)}
.price-amount span{font-size:14px;color:var(--ink-3);margin-left:4px}
.price-desc{font-size:14.5px;color:var(--ink-2);margin-top:10px}
@media (max-width:720px){
  .topbar-nav,.topbar-nav-item{display:none}
}
@media (max-width:560px){
  .home-section{padding:44px 20px}
  .founder{flex-direction:column}
}
.founder-photo-lg{margin:30px 0 0;display:flex;align-items:center;gap:18px}
.founder-photo-lg img{width:160px;height:160px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--rule)}
.founder-photo-lg figcaption{font-size:14.5px}

/* breadcrumbs + related links on the server-rendered pages (SEO audit 2026-10-20) */
.crumbs{max-width:700px;margin:0 auto;padding:22px 24px 0;font-size:13.5px;color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.crumbs [aria-current]{color:var(--ink-2)}
.related{max-width:700px;margin:56px auto 0;padding:24px 24px 0;border-top:1px solid var(--rule)}
.related h2{font-family:var(--f-display);font-weight:400;font-size:22px;margin-bottom:12px}
.related ul{list-style:none;padding:0;margin:0}
.related li{margin:0 0 10px;font-size:15.5px;line-height:1.5}
.related li a{font-weight:600;color:var(--accent)}
.related li .muted{display:block;font-size:14px}
@media (max-width:600px){.crumbs,.related{padding-left:20px;padding-right:20px}}
.founder picture,.home-shot picture{display:contents}

/* ---- people you have met (#/people) ---------------------------------- */
.people-list { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.person-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--rule-soft);
}
.person-row .muted { font-size: 13.5px; margin-top: 2px; overflow-wrap: anywhere; }
.person-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pf-names { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pf-hint { font-size: 13.5px; margin-top: 6px; }
.pf-error { color: var(--crit); font-size: 14px; margin-top: 6px; }
.pf-error:empty { display: none; }
.pf-features { border: 0; margin: 0; padding: 0; min-width: 0; }
.pf-features legend { padding: 0; }
.feature-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.feature-opt {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--field-border); border-radius: 8px; background: var(--surface);
}
.feature-opt input { margin-top: 4px; accent-color: var(--accent); }
.feature-opt > span { display: grid; gap: 1px; }
.feature-opt .muted { font-size: 13px; line-height: 1.4; }
.feature-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.dash-people .muted { font-size: 14px; }
/* The review cue for a real person: no face, just what the learner noted. */
.cue-card { display: grid; gap: 12px; min-width: 190px; max-width: 240px; padding: 18px 20px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sunken); }
.cue-card .cue-l { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }
.cue-card .cue-v { font-family: var(--f-display); font-size: 19px; line-height: 1.3; color: var(--ink);
  overflow-wrap: anywhere; }
@media (max-width:560px){
  .pf-names { grid-template-columns: 1fr; }
  .feature-pick { grid-template-columns: 1fr; }
  .person-row { flex-wrap: wrap; }
  .cue-card { max-width: none; }
}

/* ---- your own peg words (#/pegs) -------------------------------------- */
.peg-decade { margin: 26px 0 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-3); }
.peg-list { margin-top: 8px; }
.peg-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.peg-row .peg-n { font-family: var(--f-mono); font-weight: 600; color: var(--ink-2); }
.peg-row .muted { font-size: 13.5px; }
.peg-yours { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent); }
.peg-row.is-editing { align-items: start; }
.peg-edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; grid-column: 2 / 4; min-width: 0; }
.peg-field { display: grid; gap: 5px; font-size: 13.5px; font-weight: 600; }
.peg-check { margin: 0; font-size: 14px; }
.peg-check.is-good { color: var(--good); }
.peg-check.is-bad { color: var(--crit); }
.peg-note { margin-top: 18px; font-size: 14px; }
@media (max-width:560px){ .peg-row { grid-template-columns: 30px minmax(0, 1fr); } .peg-row > .person-actions, .peg-edit { grid-column: 2; } }