:root {
  --ink:#0D1B1E; --ink-soft:#40514F; --ink-faint:#7B8A87;
  --paper:#F4F6F5; --surface:#FFFFFF; --band:#ECEFEC; --sand:#E7E0D2;
  --teal:#0A5C5F; --teal-bright:#12A19A; --coral:#C9503A; --rule:#D5DCD9;
  --good:#1F7A5A; --on-teal:#FFFFFF;
  --band-deep:#0C1A1C; --band-ink:#F2F6F5; --band-soft:#9FB3AF;
  --stat-accent:#FF8A66;
  --font:system-ui,-apple-system,'Segoe UI Variable Text','Segoe UI',Roboto,
    'Helvetica Neue',Arial,sans-serif;
  --measure:34rem;
  --wrap:78rem;

  /* One size for every piece of body text on the page. Everything else is
     scaled from it, so the only deliberate steps are titles and subtitles. */
  --text:clamp(1.0625rem,1.01rem + 0.28vw,1.1875rem);   /* 17 to 19px */
  --label:1rem;                                          /* 16px, the floor  */
  --h4:clamp(1.25rem,1.15rem + 0.5vw,1.5rem);            /* subtitles        */
  --h3:clamp(1.5rem,1.3rem + 0.9vw,1.9rem);              /* feature numerals */
  --h2:clamp(1.85rem,1.5rem + 1.6vw,2.4rem);             /* section titles   */
  --h1:clamp(2.4rem,1.85rem + 2.6vw,3.4rem);             /* page title       */

  --step--1:var(--text);
  --step-0:var(--text);
  --step-1:var(--h4);
  --step-2:var(--h3);
  --step-3:var(--h2);
  --step-4:var(--h1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#E8EEEC; --ink-soft:#A8B8B4; --ink-faint:#748481;
    --paper:#0B1416; --surface:#12201F; --band:#142322; --sand:#1E2B27;
    --teal:#4FC9C0; --teal-bright:#12A19A; --coral:#E0715A; --rule:#263936;
    --good:#46B98C; --on-teal:#06201F;
    --band-deep:#07100F; --band-ink:#E8EEEC; --band-soft:#93A7A3;
    --stat-accent:#FF9576;
  }
}
:root[data-theme="dark"] {
  --ink:#E8EEEC; --ink-soft:#A8B8B4; --ink-faint:#748481;
  --paper:#0B1416; --surface:#12201F; --band:#142322; --sand:#1E2B27;
  --teal:#4FC9C0; --teal-bright:#12A19A; --coral:#E0715A; --rule:#263936;
  --good:#46B98C; --on-teal:#06201F;
  --band-deep:#07100F; --band-ink:#E8EEEC; --band-soft:#93A7A3;
  --stat-accent:#FF9576;
}
*{box-sizing:border-box}
html{scroll-padding-top:7rem}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem 6rem}
h1,h2,h3,h4{font-family:var(--font);font-weight:700;text-wrap:balance;
  letter-spacing:-0.015em}
img{max-width:100%;height:auto;display:block}

/* nav */
.topbar{border-bottom:1px solid var(--rule);background:var(--surface);
  position:sticky;top:0;z-index:30}
.topbar .in{max-width:var(--wrap);margin:0 auto;padding:1rem 1.5rem;display:flex;
  align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand{font-family:var(--font);font-size:var(--step-1);color:var(--ink);
  text-decoration:none;font-weight:600;letter-spacing:-0.01em}
.brand span{color:var(--teal-bright)}
.back{font-size:var(--step--1);color:var(--teal);text-decoration:none;
  letter-spacing:0.06em;text-transform:uppercase;font-weight:600}
.back:hover{color:var(--coral)}

/* Each section is a card so the boundary between them is obvious. */
section{--secpad-y:2.5rem;--secpad-x:2.25rem;
  margin-top:1.5rem;background:var(--surface);border:1px solid var(--rule);
  padding:var(--secpad-y) var(--secpad-x)}
.sectionhead{font-family:var(--font);font-size:var(--step-3);line-height:1.1;
  letter-spacing:-0.02em;color:var(--ink);margin:0 0 1.75rem;padding-bottom:1rem;
  border-bottom:2px solid var(--teal-bright)}
/* Script wraps the heading and the listen button together, so the rule under
   the title spans both rather than the heading carrying it alone. */
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 1.25rem;
  flex-wrap:wrap;margin:0 0 1.75rem;padding-bottom:1rem;
  border-bottom:2px solid var(--teal-bright)}
.sechead .sectionhead{margin:0;padding:0;border-bottom:0;flex:1 1 14rem}
.listen{font:inherit;font-size:var(--label);font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;cursor:pointer;border-radius:100px;min-height:2.75rem;
  padding:0.5rem 1.1rem;flex:none;display:inline-flex;align-items:center;gap:0.5rem;
  background:var(--surface);color:var(--teal);border:1px solid var(--teal);
  transition:background 0.18s ease,color 0.18s ease,border-color 0.18s ease}
.listen:hover{background:var(--teal);color:var(--on-teal)}
.listen svg{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.listen.live{background:var(--coral);border-color:var(--coral);color:var(--surface)}
.listen:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
/* The block being spoken, so somebody following along keeps their place. */
.reading{background:color-mix(in srgb,var(--teal-bright) 16%,transparent);
  box-shadow:0 0 0 0.4rem color-mix(in srgb,var(--teal-bright) 16%,transparent);
  border-radius:2px}
.prose{max-width:var(--measure)}
/* Prose that should fill the card rather than leave the right side empty. */
.prose.wide{max-width:none}
.prose.cols{max-width:none}
.prose.cols p:last-child{margin-bottom:0}
.prose p{margin:0 0 1.1rem}
.prose p:last-child{margin-bottom:0}

/* masthead */
.masthead{padding:3.25rem 0 0;display:flex;flex-direction:column;gap:1.1rem}
.chip{align-self:flex-start;font-size:var(--step--1);font-weight:600;letter-spacing:0.11em;
  text-transform:uppercase;color:var(--coral);border:1px solid currentColor;
  border-radius:100px;padding:0.32rem 0.85rem;text-decoration:none;
  transition:background 0.18s ease,color 0.18s ease}
a.chip:hover{background:var(--coral);color:var(--surface)}
h1{font-size:var(--step-4);line-height:1.05;margin:0;letter-spacing:-0.03em}
.topmeta{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;margin-top:0.25rem}
.duration{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;
  margin:0;padding:0.75rem 1.15rem;
  background:color-mix(in srgb,var(--teal-bright) 10%,var(--surface));
  border:1px solid var(--teal-bright);border-radius:100px;
  font-size:var(--text);color:var(--ink)}
.duration svg{width:1.35rem;height:1.35rem;flex:none;fill:none;stroke:var(--teal);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.duration b{font-weight:700}
.topichero{display:block;max-width:none;
  width:calc(100% + var(--secpad-x) * 2);
  margin:calc(var(--secpad-y) * -1) calc(var(--secpad-x) * -1) 2rem}

/* outcomes */
.outlead{margin:0 0 1.25rem;font-size:var(--text);color:var(--ink-soft);
  font-weight:600;letter-spacing:0.01em}
.outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.1rem}
.outcome{background:color-mix(in srgb,var(--teal-bright) 9%,var(--surface));
  border:2px solid var(--teal-bright);padding:1.75rem 1.6rem;
  display:flex;gap:1.1rem;align-items:flex-start}
.outcome .n{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--teal);color:var(--on-teal);font-family:var(--font);
  font-size:var(--h4);font-weight:700;display:grid;place-content:center;line-height:1}
.outcome p{margin:0;font-family:var(--font);font-size:var(--h4);
  line-height:1.4;font-weight:650;color:var(--ink);letter-spacing:-0.01em}

/* costs / pays */

/* ---------- cards that turn over ---------- */
.flips{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:0.9rem;padding:0!important;margin:0;list-style:none}
.flips li{margin:0!important}
.flip{font:inherit;font-size:var(--text);text-align:left;padding:0;border:0;
  background:none;cursor:pointer;width:100%;height:100%;min-width:0;perspective:1200px;
  -webkit-tap-highlight-color:transparent}
.flipinner{display:grid;width:100%;height:100%;min-width:0;transform-style:preserve-3d;
  transition:transform 0.55s cubic-bezier(0.2,0.7,0.3,1)}
.flip[aria-expanded="true"] .flipinner{transform:rotateY(180deg)}
/* Both faces sit in the same grid cell, so the card is as tall as the longer
   of the two and nothing has to be measured or hard coded. */
.face{grid-area:1/1;min-width:0;display:flex;flex-direction:column;gap:0.75rem;
  justify-content:space-between;min-height:10rem;padding:1.3rem 1.4rem;
  background:var(--cardfront);border:1.5px solid var(--cardedge);border-radius:4px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.fback{background:var(--cardback)}
.flip{--accent:var(--teal)}
.flip .face{
  --cardfront:color-mix(in srgb,var(--accent) 22%,var(--surface));
  --cardback: color-mix(in srgb,var(--accent) 45%,var(--surface));
  --cardedge: color-mix(in srgb,var(--accent) 65%,var(--surface))}
.flips > li,.flips.steps > li{container-type:inline-size}
.flip:not(.value) .face{min-height:100cqw}
.flip.down{--accent:var(--coral)}
.flip.up{--accent:var(--good)}
.face.fback{transform:rotateY(180deg)}
.flip .ftext{line-height:1.4;font-weight:650;color:var(--ink)}
.flip .ffront .ftext{font-size:calc(var(--h4) * 1.1);margin:auto 0;
  letter-spacing:-0.01em;line-height:1.25}
.flip .fback .ftext{font-weight:400;color:var(--ink-soft);font-size:var(--text)}
.flip .fhint{display:flex;align-items:center;gap:0.4rem;font-size:var(--label);
  font-weight:600;letter-spacing:0.03em;color:var(--ink-faint)}
.flip .fhint svg{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.flip.down .face,.flip.up .face{border-left:3px solid var(--accent)}
.flip .fhint{color:var(--accent)}
.flip:hover .face{border-color:var(--accent)}
.flip:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  .flipinner{transition:none}
}

/* video */
.videogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1.25rem}
.videocard{background:var(--paper);border:1px solid var(--rule)}
.videocard .frame{aspect-ratio:16/9;background:#000}
.videocard iframe{width:100%;height:100%;border:0;display:block}
.vref{padding:1rem 1.25rem;border-top:1px solid var(--rule);font-size:var(--step--1);
  color:var(--ink-soft);line-height:1.55}
.vref .title{color:var(--ink);font-family:var(--font);font-size:var(--step-0);
  font-weight:600;display:block;margin-bottom:0.15rem}
.vref .look{color:var(--ink);font-weight:600}
.flag{display:inline-block;font-size:var(--label);font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--coral);border:1px solid currentColor;
  padding:0.1rem 0.45rem;border-radius:3px;margin-right:0.5rem}

/* story */
.story{border-left:3px solid var(--teal-bright);padding-left:1.6rem}
@media (max-width:40rem){.story{padding-left:1rem}}
.story p:first-of-type strong{font-family:var(--font);font-size:var(--h4);
  line-height:1.35;font-weight:600;display:block}

/* stats band */
.band{margin-top:1.5rem;background:var(--band-deep);color:var(--band-ink);
  padding:3.5rem 0;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60rem 22rem at 15% -10%,rgba(255,138,102,0.13),transparent 60%)}
.band .inner{position:relative}
.band .sectionhead{color:var(--band-ink);border-bottom-color:var(--stat-accent)}
.band .inner{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:2rem 2.5rem;margin-top:2rem}
.stat{border-top:2px solid rgba(255,255,255,0.14);padding-top:1.25rem}
.stat .fig{font-family:var(--font);font-size:clamp(3.4rem,2.4rem + 4vw,5.2rem);
  line-height:0.95;color:var(--stat-accent);letter-spacing:-0.045em;
  font-variant-numeric:tabular-nums;font-weight:800;display:block}
.stat p{margin:0.9rem 0 0.8rem;color:var(--band-ink);max-width:22rem}
.stat a{font-size:var(--text);color:var(--band-soft);text-underline-offset:3px;
  text-decoration-thickness:1px}
.stat a:hover{color:var(--stat-accent)}
.verify{margin-top:2.25rem;font-size:var(--text);color:var(--band-soft);font-style:italic;
  border-top:1px solid rgba(255,255,255,0.14);padding-top:1.1rem}

/* methodology */
.method-name{font-size:var(--step-3);margin:0 0 1.2rem;letter-spacing:-0.02em;font-weight:700}
figure.diagram{margin:2rem 0 2.25rem;background:var(--paper);border:1px solid var(--rule);
  padding:2rem 1.5rem 1.25rem;overflow-x:auto}
/* Capped so the labels do not balloon on desktop, floored so they stay
   readable on a phone. Below the floor the figure scrolls instead. */
figure.diagram svg{width:100%;height:auto;display:block;max-width:46rem;
  min-width:32rem;margin:0 auto}
figure.diagram img{width:100%;height:auto;display:block}
.diagramlink{display:block}
.diagramlink:hover{opacity:0.93}
figcaption{font-size:var(--step--1);color:var(--ink-faint);text-align:center;
  margin-top:1rem;letter-spacing:0.04em}
h3.sub{font-size:var(--h3);color:var(--teal);margin:2.25rem 0 0.85rem;
  letter-spacing:-0.01em;line-height:1.2}
h3.sub:first-child{margin-top:0}

/* tips */
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1.1rem}
.tip{background:var(--paper);border:1px solid var(--rule);padding:1.5rem 1.35rem;
  display:flex;flex-direction:column;gap:0.55rem;position:relative;overflow:hidden}
.tip::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal-bright)}
.tip .num{font-family:var(--font);font-size:var(--step-2);line-height:1;
  color:var(--teal-bright);font-variant-numeric:tabular-nums}
.tip h4{margin:0;font-family:var(--font);font-size:var(--step-1);line-height:1.28;font-weight:600}
.tip p{margin:0;font-size:var(--step--1);color:var(--ink-soft);line-height:1.55}

/* reflection */
.reflect{display:flex;flex-direction:column;gap:1.1rem}
.rbox{background:var(--paper);border:1px solid var(--rule);padding:1.6rem 1.5rem}
.rbox .ic{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--band);
  display:grid;place-content:center;color:var(--teal);margin-bottom:0.9rem}
.rbox h4{font-family:var(--font);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:0.12em;color:var(--teal);margin:0 0 0.9rem;font-weight:700}
.rbox ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.9rem}
.rbox li{font-family:var(--font);font-size:var(--h4);line-height:1.4;
  padding-left:0;position:relative;font-weight:650;letter-spacing:-0.01em}

/* relevant */
.recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem}
.rec{background:var(--paper);border:1px solid var(--rule);padding:1.25rem;
  display:flex;flex-direction:column;gap:0.55rem;text-decoration:none;color:inherit;
  transition:border-color 0.18s ease,transform 0.18s ease}
a.rec:hover{border-color:var(--teal-bright);transform:translateY(-2px)}
.rec .cat{font-size:var(--label);letter-spacing:0.12em;text-transform:uppercase;
  font-weight:600;color:var(--coral)}
.rec .t{font-family:var(--font);font-size:var(--step-1);line-height:1.25}
.rec .why{font-size:var(--step--1);color:var(--ink-soft);margin:0}
.rec.soon{opacity:0.62}
.rec .soontag{font-size:var(--label);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600}

/* index */
.lede{max-width:38rem;font-family:var(--font);font-size:var(--step-2);
  line-height:1.35;color:var(--ink-soft);margin:1.25rem 0 0}
.catrow{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:2rem}
.catpill{font:inherit;font-size:var(--step--1);letter-spacing:0.08em;text-transform:uppercase;
  font-weight:600;border:1px solid var(--rule);color:var(--ink-soft);
  padding:0.5rem 1rem;border-radius:100px;background:var(--surface);cursor:pointer;
  display:inline-flex;align-items:center;gap:0.5rem;min-height:2.75rem;
  transition:border-color 0.18s ease,color 0.18s ease,background 0.18s ease}
.catpill:hover{color:var(--ink);border-color:var(--ink-faint)}
.catpill .n{font-size:var(--label);font-weight:700;line-height:1;padding:0.2rem 0.45rem;
  border-radius:100px;background:var(--band);color:var(--ink-soft)}
.catpill[aria-pressed="true"]{background:var(--coral);border-color:var(--coral);color:var(--surface)}
.catpill[aria-pressed="true"] .n{background:rgba(255,255,255,0.25);color:inherit}
.catpill:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
.catsoon{font-size:var(--label);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-faint);margin:0.75rem 0 0}
.filternote{font-size:var(--step--1);color:var(--ink-soft);margin:0.75rem 0 0}
.noresult{font-size:var(--text);color:var(--ink-soft);margin-top:2rem}
.card[hidden]{display:none}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.25rem;margin-top:1.5rem}
.card{background:var(--surface);border:1px solid var(--rule);text-decoration:none;
  color:inherit;display:flex;flex-direction:column;
  transition:border-color 0.18s ease,transform 0.18s ease}
.card:hover{border-color:var(--teal-bright);transform:translateY(-2px)}
.card .thumb{aspect-ratio:16/9;background:var(--band);display:grid;place-content:center;
  color:var(--ink-faint);font-size:var(--step--1);border-bottom:1px solid var(--rule)}
.card .cbody{padding:1.25rem;display:flex;flex-direction:column;gap:0.5rem}
.card .cat{font-size:var(--label);letter-spacing:0.12em;text-transform:uppercase;
  font-weight:600;color:var(--coral)}
.card h2{font-size:var(--step-1);margin:0;line-height:1.25}
.card .out{font-size:var(--step--1);color:var(--ink-soft);margin:0}
.card .time{font-size:var(--label);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:auto;padding-top:0.5rem}

footer.site{border-top:1px solid var(--rule);margin-top:4rem;padding:2rem 0;
  color:var(--ink-faint);font-size:var(--step--1)}
footer.site .in{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
a:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- quiz ---------- */
.quiz{display:flex;flex-direction:column;gap:1.1rem}
.q{background:var(--paper);border:1px solid var(--rule);padding:1.5rem 1.35rem}
.q .qn{font-size:var(--label);letter-spacing:0.12em;text-transform:uppercase;
  font-weight:700;color:var(--teal);display:block;margin-bottom:0.6rem}
.q .qtext{font-family:var(--font);font-size:var(--step-1);line-height:1.4;
  margin:0 0 1.1rem;font-weight:700;letter-spacing:-0.01em}
.opts{display:flex;flex-direction:column;gap:0.5rem}
.opt{font-family:var(--font);font-size:var(--step-0);text-align:left;
  background:var(--surface);border:1px solid var(--rule);color:var(--ink);
  padding:0.8rem 1rem;cursor:pointer;line-height:1.45;
  display:flex;gap:0.75rem;align-items:flex-start;
  transition:border-color 0.15s ease,background 0.15s ease}
.opt:hover:enabled{border-color:var(--teal-bright)}
.opt:disabled{cursor:default}
.opt .mark{flex:none;width:1.4rem;height:1.4rem;border:1px solid var(--rule);
  border-radius:50%;display:grid;place-content:center;font-size:var(--label);
  font-weight:700;color:var(--ink-faint);margin-top:0.1rem}
.opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface))}
.opt.right .mark{background:var(--good);border-color:var(--good);color:#fff}
.opt.wrong{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 10%,var(--surface))}
.opt.wrong .mark{background:var(--coral);border-color:var(--coral);color:#fff}
.qwhy{margin:1.1rem 0 0;padding:0.9rem 1rem;background:var(--band);
  border-left:3px solid var(--teal-bright);font-size:var(--step--1);
  color:var(--ink-soft);line-height:1.55}
.quizresult{margin-top:0.4rem;padding:1rem 1.25rem;border:1px solid var(--rule);
  background:var(--paper);font-family:var(--font);font-size:var(--step-1);
  text-align:center}
.quizresult.partial{color:var(--ink-faint);font-family:var(--font);
  font-size:var(--step--1);letter-spacing:0.08em;text-transform:uppercase}
.quizresult.pass{border-color:var(--good);color:var(--good)}
.quizresult.fail{border-color:var(--coral);color:var(--coral)}
.topicprogress[hidden]{display:none}
.topicprogress{display:inline-block;font-size:var(--label);letter-spacing:0.1em;
  text-transform:uppercase;font-weight:700;padding:0.2rem 0.6rem;
  border:1px solid currentColor;border-radius:3px}
.topicprogress.pass{color:var(--good)}
.topicprogress.fail{color:var(--coral)}
.cardstate{align-self:flex-start;font-size:var(--label);letter-spacing:0.1em;
  text-transform:uppercase;font-weight:700;padding:0.15rem 0.5rem;
  border:1px solid currentColor;border-radius:3px;margin-top:0.4rem}
.cardstate.pass{color:var(--good)}
.cardstate.fail{color:var(--coral)}

/* ---------- reflection inputs ---------- */
.rbox li{margin-bottom:0}
.rfield{margin-top:0.5rem;position:relative}
.rinput{width:100%;font-family:var(--font);font-size:var(--text);
  color:var(--ink);background:var(--surface);border:1px solid var(--rule);
  padding:0.85rem 0.9rem;line-height:1.55;resize:vertical;min-height:5.5rem}
.rinput:focus{outline:2px solid var(--teal-bright);outline-offset:1px}
/* A one line answer. A date or a single word sitting in a three row box reads
   as a request for an essay. */
.rinput.short{min-height:2.9rem;resize:none;max-width:22rem}

/* A question that is about a picture. The image comes first, because it is
   the thing being read, and the question underneath is the same every time. */
.qimg{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:4px;border:1px solid var(--cardedge);margin:0 0 0.7rem}
/* Names the place, so the question is about reading the standard rather
   than working out what sort of building this is. */
.qcap{margin:0 0 1.1rem;font-size:var(--label);font-weight:700;color:var(--ink-soft);
  line-height:1.5}
/* Standing in for a picture that is not drawn yet, so the step is usable and
   the gap is obvious rather than silent. */
.qimgsoon{display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;aspect-ratio:3/2;margin:0 0 0.7rem;padding:1.5rem;
  border-radius:4px;border:2px dashed var(--rule);color:var(--ink-soft);
  background:color-mix(in srgb,var(--ink) 3%,transparent);
  font-size:var(--label);line-height:1.55}
/* The line that sets up the questions under it. Not a question, so no box. */
.rlead{margin:0 0 1.1rem;font-size:var(--text);line-height:1.6;color:var(--ink)}

/* The three values carried forward from the choosing step, with what the
   learner wrote about each one, so the goal is set from their own words. */
.rcarry{margin:0 0 1.4rem}
.rcarryq{margin:0 0 0.7rem;font-size:var(--text);font-weight:700;color:var(--ink);
  line-height:1.35}
.rcarrynone{margin:0;font-size:var(--label);color:var(--ink-soft);line-height:1.6}
.carrylist{list-style:none;margin:0;padding:0;display:grid;gap:0.6rem}
.carrypick{font:inherit;width:100%;cursor:pointer;text-align:left;display:flex;
  align-items:flex-start;gap:0.7rem;padding:0.85rem 0.95rem;border-radius:4px;
  background:var(--surface);border:1.5px solid var(--rule);
  transition:border-color 0.18s ease,background 0.18s ease}
.carrypick:hover{border-color:var(--teal)}
.carrypick:focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px}
.carrypick .tick{width:1.25rem;height:1.25rem;margin-top:0.12rem;border-radius:50%;
  border:2px solid var(--ink-faint);flex:none;position:relative}
.carrypick[aria-pressed="true"]{border-color:var(--good);
  background:color-mix(in srgb,var(--good) 8%,var(--surface))}
.carrypick[aria-pressed="true"] .tick{background:var(--good);border-color:var(--good)}
.carrypick[aria-pressed="true"] .tick::after{content:"";position:absolute;inset:0;
  background:#fff;clip-path:polygon(41% 76%,12% 48%,22% 38%,41% 56%,80% 20%,90% 30%)}
.carrybody{display:flex;flex-direction:column;gap:0.25rem;min-width:0}
.carryname{font-size:var(--text);font-weight:700;color:var(--ink);line-height:1.3;
  overflow-wrap:break-word}
.carrywrote{font-size:var(--label);font-weight:400;color:var(--ink-soft);
  line-height:1.55;overflow-wrap:break-word}
.rtools{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;margin-top:0.6rem}
.micbtn,.savebtn{font:inherit;font-size:var(--label);font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;cursor:pointer;border-radius:100px;min-height:2.75rem;
  padding:0.5rem 1.1rem;display:inline-flex;align-items:center;gap:0.5rem;
  transition:background 0.18s ease,color 0.18s ease,border-color 0.18s ease}
.micbtn{background:var(--surface);color:var(--teal);border:1px solid var(--teal)}
.micbtn:hover{background:var(--teal);color:var(--on-teal)}
.micbtn svg{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.micdot{display:none;width:0.6rem;height:0.6rem;border-radius:50%;background:currentColor;flex:none}
.micbtn.live{background:var(--coral);border-color:var(--coral);color:var(--surface)}
.micbtn.live svg{display:none}
.micbtn.live .micdot{display:block;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.35;transform:scale(0.7)}}
.savebtn{background:var(--teal);color:var(--on-teal);border:1px solid var(--teal)}
.savebtn:hover{background:var(--teal-bright);border-color:var(--teal-bright)}
.micbtn:focus-visible,.savebtn:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
.savednote{font-size:var(--label);letter-spacing:0.06em;
  color:var(--ink-faint);min-height:1.2rem;display:inline-flex;align-items:center;gap:0.35rem}
.savednote.ok{color:var(--good);font-weight:600}
.savednote.ok::before{content:"";width:0.85rem;height:0.85rem;flex:none;
  background:currentColor;clip-path:polygon(41% 82%,0 47%,12% 35%,41% 60%,88% 14%,100% 26%)}
.savednote.warn{color:var(--coral);font-weight:600;text-transform:none;letter-spacing:0}
.privacy{margin-top:1.75rem;font-size:var(--step--1);color:var(--ink-soft);
  max-width:none;background:var(--paper);border:1px solid var(--rule);
  border-left:3px solid var(--teal-bright);padding:1.1rem 1.35rem;line-height:1.6}
.privacy b{color:var(--ink)}

.sectionimg{margin:0 0 1.75rem;width:100%}
section > .sectionimg:first-child{margin-top:0}

/* ---------- narrow screens ---------- */
@media (max-width:48rem){
  section{--secpad-y:1.6rem;--secpad-x:1.25rem;margin-top:1rem}
  .sectionhead{font-size:var(--step-2);margin-bottom:1.25rem;padding-bottom:0.75rem}
  .wrap{padding-left:1rem;padding-right:1rem;padding-bottom:3.5rem}
  .band{padding:2rem 0}
  .band .inner{padding-left:1rem;padding-right:1rem}
  .masthead{padding-top:2rem}
  .topbar .in{padding:0.85rem 1rem}
  footer.site .in{padding-left:1rem;padding-right:1rem}
  .sectionimg{margin-top:1.5rem}
}

.quizlead{margin:2rem 0 1rem;font-family:var(--font);font-size:var(--step-1);
  color:var(--ink);padding-top:1.5rem;border-top:1px solid var(--rule)}

/* ---------- slide carousel ---------- */
.carousel{margin-top:2.5rem}
.carousel .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;gap:0;border:1px solid var(--rule);background:var(--ink);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel .track::-webkit-scrollbar{display:none}
.carousel .track:focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px}
.carousel .slide{flex:0 0 100%;scroll-snap-align:center;margin:0;min-width:0;
  background:var(--paper);display:flex;flex-direction:column}
.carousel .slide img{width:100%;height:auto;display:block}
.carousel .slide figcaption{padding:0.9rem 1.1rem;background:var(--paper);
  color:var(--ink-soft);font-size:var(--text);border-top:1px solid var(--rule)}
.carousel-bar{display:flex;align-items:center;justify-content:center;gap:1.25rem;
  margin-top:1.1rem;flex-wrap:wrap}
.cbtn{flex:none;border:0;background:var(--teal);color:var(--on-teal);
  cursor:pointer;border-radius:100px;display:flex;align-items:center;gap:0.4rem;
  padding:0.75rem 1.35rem;min-height:3rem;font-family:var(--font);
  font-size:var(--text);font-weight:700;letter-spacing:0.02em;
  transition:background 0.15s ease,transform 0.15s ease}
.cbtn svg{width:1.4rem;height:1.4rem;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cbtn:hover:enabled{background:var(--teal-bright);transform:translateY(-1px)}
.cbtn:active:enabled{transform:translateY(0)}
.cbtn:disabled{background:var(--band);color:var(--ink-faint);cursor:default}
.cbtn:focus-visible{outline:3px solid var(--teal-bright);outline-offset:3px}
@media (max-width:26rem){.cbtn span{display:none}.cbtn{padding:0.75rem 1rem}}
.dots{display:flex;gap:0.5rem;align-items:center}
.dot{width:0.7rem;height:0.7rem;border-radius:50%;border:1px solid var(--ink-faint);
  background:transparent;padding:0;cursor:pointer}
.dot:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
.dot.on{background:var(--teal-bright);border-color:var(--teal-bright)}
.slidecount{font-size:var(--label);color:var(--ink-faint);letter-spacing:0.06em}

/* Consequences are cards now. Nothing here renders a details element. */

/* ---------- quiz progress ---------- */
.qprogress{margin-bottom:0.25rem}
.qbar{height:0.5rem;background:var(--band);border:1px solid var(--rule);overflow:hidden}
.qbar span{display:block;height:100%;width:0;background:var(--teal-bright);
  transition:width 0.35s ease}
.qcount{margin:0.6rem 0 0;font-size:var(--label);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.quiz.stepped .q[hidden]{display:none}

/* ---------- tips as a list ---------- */
.tiplist{list-style:none;margin:0 0 0.5rem;padding:0;
  display:flex;flex-direction:column;gap:1.1rem}
.tiplist li{padding-left:1.6rem;position:relative;max-width:52rem}
.tiplist li::before{content:"";position:absolute;left:0;top:0.6em;
  width:0.55rem;height:0.55rem;border-radius:50%;background:var(--teal-bright)}
.tiplist strong{display:block;font-family:var(--font);font-size:var(--h4);
  font-weight:700;line-height:1.3;margin-bottom:0.2rem;letter-spacing:-0.01em}
.tiplist span{color:var(--ink-soft)}
.rbox .maps{display:block;font-size:var(--label);letter-spacing:0.1em;
  text-transform:uppercase;font-weight:700;color:var(--ink-faint);margin-bottom:0.35rem}

/* ---------- topic progress and finishing ---------- */
.topbar-progress{height:0.35rem;background:var(--band);overflow:hidden}
.topbar-progress span{display:block;height:100%;width:0;background:var(--teal-bright);
  transition:width 0.4s ease}
.topbar-count{max-width:var(--wrap);margin:0 auto;padding:0.6rem 1.5rem;
  font-size:var(--label);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600}
section[data-track]{position:relative}
section[data-track].sectiondone::after,.band.sectiondone::after{content:"\2713";
  position:absolute;top:1rem;right:1.1rem;width:1.9rem;height:1.9rem;
  border-radius:50%;background:var(--good);color:#fff;display:grid;
  place-content:center;font-size:var(--label);font-weight:700;z-index:2}
.band{position:relative}

.finish{border-color:var(--teal-bright);border-width:2px}
.finishlead{margin:0 0 1.5rem;color:var(--ink-soft);max-width:var(--measure)}
.checks{list-style:none;margin:0 0 1.75rem;padding:0;display:flex;
  flex-direction:column;gap:0.9rem}
.checks li{display:flex;align-items:center;gap:0.85rem;flex-wrap:wrap;
  padding:1rem 1.15rem;background:var(--paper);border:1px solid var(--rule)}
.checks .mark{width:1.6rem;height:1.6rem;flex:none;border-radius:50%;
  border:2px solid var(--ink-faint)}
.checks li.ok .mark{background:var(--good);border-color:var(--good);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E");
  background-size:0.95rem;background-repeat:no-repeat;background-position:center}
.checks .what{flex:1 1 14rem}
.checks .state{font-size:var(--label);letter-spacing:0.08em;text-transform:uppercase;
  font-weight:700;color:var(--ink-faint)}
.checks li.ok .state{color:var(--good)}
.finishactions{display:flex;gap:0.85rem;flex-wrap:wrap}
.finishbtn,.copybtn{font-family:var(--font);font-size:var(--text);font-weight:700;
  padding:0.85rem 1.5rem;border-radius:100px;cursor:pointer;min-height:3rem;border:0}
.finishbtn{background:var(--teal);color:var(--on-teal)}
.finishbtn:hover:enabled{background:var(--teal-bright)}
.finishbtn:disabled{background:var(--band);color:var(--ink-faint);cursor:default}
.copybtn{background:transparent;color:var(--teal);border:2px solid var(--rule)}
.copybtn:hover{border-color:var(--teal-bright)}
.finishbtn:focus-visible,.copybtn:focus-visible{outline:3px solid var(--teal-bright);
  outline-offset:3px}
.finishnote{margin:1.1rem 0 0;color:var(--ink-soft);font-style:italic;min-height:1.4rem}
@media (max-width:48rem){.topbar-count{padding:0.55rem 1rem}}

/* ---------- paged quiz ---------- */
.quiz.paged .qtrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;gap:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  align-items:stretch}
.quiz.paged .qtrack::-webkit-scrollbar{display:none}
.quiz.paged .qtrack:focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px}
.quiz.paged .q{flex:0 0 100%;scroll-snap-align:start;min-width:0;
  display:flex;flex-direction:column}
.qnav{display:flex;align-items:center;justify-content:center;gap:1.25rem;
  margin-top:1.1rem;flex-wrap:wrap}
.qdots{display:flex;gap:0.5rem;align-items:center}
.qdot{width:0.7rem;height:0.7rem;border-radius:50%;border:1px solid var(--ink-faint);
  background:transparent;padding:0;cursor:pointer}
.qdot.on{border-color:var(--teal-bright);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal-bright) 25%,transparent)}
.qdot.right{background:var(--good);border-color:var(--good)}
.qdot:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
.qretry{margin:1.1rem 0 0;padding:0.9rem 1.1rem;background:color-mix(in srgb,var(--coral) 9%,var(--paper));
  border-left:3px solid var(--coral);color:var(--ink);font-weight:400;
  font-size:var(--text);line-height:1.55}
.qretry b{color:var(--coral);font-weight:700}
.opt.wrong{opacity:0.75}
.opt:disabled.wrong .mark{background:var(--coral);border-color:var(--coral);color:#fff}


/* ---------- step flow ---------- */
body.stepping .wrap > section[hidden]{display:none}
.stepnav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.stepback,.stepnext{font:inherit;font-size:var(--label);font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;cursor:pointer;border-radius:100px;min-height:2.75rem;
  padding:0.6rem 1.5rem;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;transition:background 0.18s ease,color 0.18s ease,border-color 0.18s ease}
.stepback{background:var(--surface);color:var(--ink-soft);border:1px solid var(--rule)}
.stepback:hover{color:var(--ink);border-color:var(--ink-faint)}
.stepnext{background:var(--teal);color:var(--on-teal);border:1px solid var(--teal)}
.stepnext:hover{background:var(--teal-bright);border-color:var(--teal-bright)}
.stepnext:disabled{background:var(--band);color:var(--ink-faint);border-color:var(--rule);
  cursor:not-allowed}
.stepback:focus-visible,.stepnext:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
.steplock{flex:1 1 12rem;text-align:center;margin:0;font-size:var(--label);
  color:var(--coral);font-weight:600;min-height:1.2rem}
.topbar-count{margin:0;font-size:var(--label);color:var(--ink-soft);
  letter-spacing:0.02em;line-height:1.4}
.topbar-count b{color:var(--ink);letter-spacing:0.06em;text-transform:uppercase}
@media (max-width:34rem){
  .stepnav{gap:0.75rem}
  .stepback,.stepnext{flex:1 1 8rem}
  .steplock{order:-1;flex-basis:100%}
}


/* The bar is sticky, so every pixel of it is a pixel of the lesson a phone
   never shows. Keep it to two tight rows and one line of step text. */
.topbar-count{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:34rem){
  .topbar .in{padding:0.6rem 1.1rem;gap:0.75rem;flex-wrap:nowrap}
  .brand{font-size:var(--text)}
  .brand span{display:none}          /* the topic title is right underneath */
  .back{font-size:var(--label);white-space:nowrap}
  .topbar-count{padding:0.55rem 1.1rem}
}


/* ---------- reading voice ---------- */
.voicepick{display:inline-flex;align-items:center;gap:0.45rem;font-size:var(--label);
  color:var(--ink-soft);font-weight:600;letter-spacing:0.04em}
.voicepick svg{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.voicepick select{font:inherit;font-size:var(--label);color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:100px;
  padding:0.45rem 0.85rem;max-width:18rem;cursor:pointer}
.voicepick select:focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px}
@media (max-width:52rem){
  .voicepick .vlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .voicepick select{max-width:12rem}
}
@media (max-width:34rem){
  .voicepick svg{display:none}
  .voicepick select{max-width:10.5rem;padding:0.4rem 0.7rem}
  /* The section heading repeats this immediately below, so on a phone the
     step name only steals room from the voice picker. */
  .stepname{display:none}
}
.topbar-foot{max-width:var(--wrap);margin:0 auto;padding:0.6rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem}
.topbar-foot .topbar-count{padding-left:0;padding-right:0;flex:1 1 auto;min-width:0}
@media (max-width:34rem){.topbar-foot{padding:0.55rem 1.1rem}}
@media (max-width:22rem){
  .topbar-foot{flex-wrap:wrap;gap:0.4rem}
  .topbar-foot .topbar-count{flex:1 1 100%}
  .topbar-foot .voicepick{margin-left:auto}
}


/* A listen button on a single question. Smaller than the section one, so the
   two read as a hierarchy rather than competing. */
.parthead{display:flex;align-items:center;justify-content:space-between;
  gap:0.75rem 1rem;flex-wrap:wrap;margin-bottom:0.65rem}
.parthead>:first-child{margin:0;flex:1 1 auto}
.listen.small{min-height:2.4rem;padding:0.35rem 0.8rem;gap:0.4rem;
  border-color:var(--rule);color:var(--ink-soft);flex:none}
.listen.small svg{width:1rem;height:1rem}
.listen.small:hover{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.listen.small.live{background:var(--coral);border-color:var(--coral);color:var(--surface)}
.rbox .parthead{margin-bottom:0.5rem}
.q .parthead{margin-bottom:0.35rem}


/* ---------- methodology steps as cards ---------- */
.flips.steps{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-top:2rem}
.flip.step .face{border-left:0;border-top:4px solid var(--accent);gap:0.55rem;
  min-height:100cqw;padding:1.2rem 1.25rem 1rem}
.stepn{width:2.3rem;height:2.3rem;border-radius:50%;background:var(--accent);
  color:var(--on-teal);display:grid;place-content:center;font-weight:700;
  font-size:var(--text);line-height:1;flex:none}
.steptitle{font-size:var(--h4);font-weight:700;letter-spacing:-0.015em;color:var(--ink);
  line-height:1.2}
.flip.step .ftext{font-size:var(--text);font-weight:400;color:var(--ink-soft);
  margin:0;line-height:1.55}
.flip.step .ffront .ftext{margin-bottom:auto}
/* The prompt to turn it over, made obvious rather than discoverable. */
.flip.step .fhint{margin-top:0.5rem;padding-top:0.7rem;
  border-top:1px solid var(--cardedge);width:100%;font-weight:700}
.flip.step .fhint svg{width:1.5rem;height:1.5rem}
.stepcap{margin:1.25rem 0 0;font-size:var(--label);color:var(--ink-faint);
  line-height:1.6;text-align:center}


/* ---------- choose your values ---------- */
.valcount{margin:0 0 1.25rem;font-size:var(--text);font-weight:700;color:var(--teal);
  padding:0.7rem 1rem;background:color-mix(in srgb,var(--teal) 10%,var(--surface));
  border-left:3px solid var(--teal);border-radius:0 4px 4px 0}
.vallist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(13.5rem,100%),1fr));gap:0.8rem}
.valcard{display:flex;flex-direction:column;gap:0.5rem;min-width:0}
/* A net, so an unusually long word can never push the page sideways. */
.vname,.vculture,.flip.value .ftext,.vwork{overflow-wrap:break-word}
.flip.value{--accent:var(--teal);flex:1 1 auto}
.flip.value .face{min-height:6.5rem;padding:0.85rem;border-left:0;gap:0.35rem;
  border-top:4px solid var(--accent)}
.vname{font-size:var(--text);font-weight:700;letter-spacing:-0.015em;color:var(--ink);
  line-height:1.25;margin:auto 0}
.vname.small{font-size:var(--label);margin:0 0 0.1rem;color:var(--teal);
  letter-spacing:0.08em;text-transform:uppercase}
.flip.value .ftext{font-size:var(--label);line-height:1.45;color:var(--ink);
  font-weight:400;margin-bottom:auto}
.vwork{font-size:var(--label);line-height:1.5;color:var(--ink-soft);
  padding-top:0.5rem;border-top:1px solid var(--cardedge)}
.vwork b{color:var(--ink);letter-spacing:0.04em;text-transform:uppercase;
  font-size:0.9em;display:block}
.flip.value .fhint{margin-top:0.6rem;color:var(--accent);font-weight:700}
/* Choosing is a separate control from turning, so reading the list never
   picks something by accident. */
.pick{font:inherit;font-size:var(--label);font-weight:700;letter-spacing:0.05em;
  text-transform:uppercase;cursor:pointer;border-radius:100px;min-height:2.6rem;
  padding:0.45rem 0.9rem;display:inline-flex;align-items:center;justify-content:center;
  gap:0.45rem;background:var(--surface);color:var(--ink-soft);
  border:1px solid var(--rule);transition:background 0.18s ease,color 0.18s ease,
  border-color 0.18s ease}
.pick:hover{border-color:var(--good);color:var(--ink)}
.pick .tick{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid currentColor;
  flex:none;position:relative}
.pick[aria-pressed="true"]{background:var(--good);border-color:var(--good);color:#fff}
.pick[aria-pressed="true"] .tick{background:#fff;border-color:#fff}
.pick[aria-pressed="true"] .tick::after{content:"";position:absolute;inset:0;
  background:var(--good);clip-path:polygon(41% 76%,12% 48%,22% 38%,41% 56%,80% 20%,90% 30%)}
.pick:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
.valnote{margin:1.5rem 0 0;font-size:var(--label);color:var(--ink-faint);line-height:1.6}

/* Which language a value comes from, said on the card. */
.vculture{font-size:var(--label);font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:0.1rem}
.flip.value.native .vculture{color:var(--ink-soft)}

/* The heading takes the colour of the cards under it, so a learner knows which
   half of the idea they are on before reading a word. */
.sectionhead.down{border-bottom-color:var(--coral)}
.sectionhead.up{border-bottom-color:var(--good)}
.flips{margin-top:0}
.flips li.plain{list-style:disc;margin-left:1.05rem}


/* One per paragraph. Icon only, and quiet until you go near it, because six
   full buttons down a column of prose would be louder than the prose. */
.sronly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.listen.tiny{min-height:0;width:2.5rem;height:2.5rem;padding:0;gap:0;flex:none;
  position:relative;border-radius:50%;vertical-align:-0.8rem;margin:0 0.15rem;
  color:var(--teal);border:1.5px solid color-mix(in srgb,var(--teal) 32%,transparent);
  background:color-mix(in srgb,var(--teal) 15%,var(--surface));
  box-shadow:0 1px 2px rgba(10,33,71,0.09);
  transition:background 0.16s ease,color 0.16s ease,border-color 0.16s ease,
             transform 0.16s ease,box-shadow 0.16s ease}
.listen.tiny svg{width:1.25rem;height:1.25rem;stroke-width:2}
/* The drawn circle is 40px. A finger wants more than that, so the tap area
   reaches past the edge without the button itself pushing the line apart. */
.listen.tiny::after{content:"";position:absolute;inset:-0.35rem;border-radius:50%}
.listen.tiny:hover,.listen.tiny:focus-visible{background:var(--teal);
  border-color:var(--teal);color:var(--on-teal);
  box-shadow:0 0.25rem 0.6rem rgba(10,33,71,0.22);transform:translateY(-1px)}
.listen.tiny.live{background:var(--coral);border-color:var(--coral);color:#FFF;
  box-shadow:0 0.25rem 0.6rem color-mix(in srgb,var(--coral) 40%,transparent)}
@media (prefers-reduced-motion:reduce){
  .listen.tiny{transition:none}
  .listen.tiny:hover,.listen.tiny:focus-visible{transform:none}
}
.tiplist li .listen.tiny{vertical-align:-0.75rem}

/* The quiz Next button once it has become Continue: the same green as the
   step's own Continue, so the two read as the same action rather than two. */
.cbtn.qnext.carry{background:var(--teal)}
.cbtn.qnext.carry:hover:enabled{background:var(--teal-bright)}

/* The listen button on a learning outcome card: its own line at the bottom
   right, so the wording above it keeps the full width of the card. */
.outcome{flex-wrap:wrap}
.outcome p{flex:1 1 0;min-width:0}
.outlisten{flex-basis:100%;display:flex;justify-content:flex-end;margin-top:0.9rem}

/* ---------- the wordmark ---------- */
/* One file: the bar is navy in both themes, so the white Z always reads.
   flex:none, or a narrow bar squeezes the letters out of proportion instead
   of wrapping the row. */
.blogo{display:block;height:2.5rem;width:auto;flex:none;object-fit:contain}
.brand{display:inline-flex;align-items:center;line-height:0;flex:none}
@media (max-width:30rem){.blogo{height:2rem}}

/* ---------- the navy bars ---------- */
/* Both headers sit on the brand navy, so everything inside them needs light
   ink. Scoped tokens rather than a rule per child, so a new control in the
   bar inherits the right colours instead of arriving invisible. */
.topbar,.zbar{
  --barbg:#0A2147;
  --barink:#FFFFFF;
  --barsoft:#B9C8DF;
  --baraccent:#5FD4DC;
  background:var(--barbg);
  border-bottom:1px solid rgba(255,255,255,0.16)}

.topbar .back{color:var(--baraccent)}
.topbar .back:hover{color:var(--barink)}
.topbar-progress{background:rgba(255,255,255,0.18)}
.topbar-count{color:var(--barsoft)}
.topbar-count b{color:var(--barink)}
.voicepick{color:var(--barsoft)}
.voicepick select{color:var(--barink);background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.3)}
/* The open menu is drawn by the operating system on its own background. */
.voicepick select option{color:#0D1B1E;background:#FFFFFF}
.topbar :focus-visible,.zbar :focus-visible{outline-color:var(--baraccent)}

/* The value name is the point of the card, so it sits in the middle of it
   rather than hard against one edge. Only the front: the back is running
   text, and centred prose is harder to read. */
.flip.value .ffront{text-align:center;align-items:center}
.flip.value .ffront .fhint{justify-content:center}

/* ---------- choosing three values ---------- */
.valcount.done{border-left-color:var(--good);font-weight:700}
/* Three already chosen and this is not one of them. Dimmed rather than
   removed, so the card still reads and the limit is obvious. */
.valcard.locked .flip.value .face{opacity:0.55}
.valcard.locked .pick{opacity:0.5;cursor:default}

/* Their own value. The same card as the rest, deliberately: a word somebody
   typed in their own language should not look like an afterthought next to
   the ones the topic supplied. */
.addown{display:flex;min-width:0}
.addbtn{font:inherit;cursor:pointer;flex:1 1 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0.25rem;text-align:center;
  min-height:6.5rem;padding:0.85rem;border-radius:4px;background:transparent;
  color:var(--teal);border:2px dashed color-mix(in srgb,var(--teal) 72%,transparent);
  transition:border-color 0.18s ease,background 0.18s ease}
.addbtn:hover{border-color:var(--teal);
  background:color-mix(in srgb,var(--teal) 7%,transparent)}
.addbtn:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
.addplus{font-size:1.6rem;line-height:1;font-weight:400}
.addtext{font-size:var(--text);font-weight:700;letter-spacing:-0.015em;line-height:1.25}
.addsub{font-size:var(--label);font-weight:400;color:var(--ink-soft);line-height:1.4}
.ownface{position:relative;flex:1 1 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:0.35rem;
  min-height:6.5rem;padding:0.85rem 2rem;border-radius:4px;
  background:color-mix(in srgb,var(--teal) 22%,var(--surface));
  border:1.5px solid color-mix(in srgb,var(--teal) 65%,var(--surface));
  border-top:4px solid var(--teal)}
.ownmine{font-size:var(--label);font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--teal)}
.ownx{position:absolute;top:0.35rem;right:0.35rem;width:1.9rem;height:1.9rem;
  display:grid;place-items:center;cursor:pointer;border:0;border-radius:50%;
  background:transparent;color:var(--ink-soft);padding:0}
.ownx svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.ownx:hover{background:color-mix(in srgb,var(--coral) 14%,transparent);color:var(--coral)}
.ownx:focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px}
/* A 44px target without a 44px circle sitting over the card. */
.ownx::after{content:"";position:absolute;inset:-0.45rem}
.valcard.locked .ownface{opacity:0.55}

/* Saying a value in your own words, in either dialog. */
.vdfields{margin-top:1.2rem;display:grid;gap:0.9rem}
.vdfield{display:grid;gap:0.3rem}
.vdlab{font-size:var(--label);font-weight:700;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--ink-soft)}
.vdopt{margin-left:0.45rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink-faint)}
.vdinput{font:inherit;font-size:var(--text);color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:4px;padding:0.7rem 0.8rem;
  min-height:2.9rem;width:100%}
.vdinput:focus-visible{outline:2px solid var(--teal-bright);outline-offset:1px;
  border-color:var(--teal)}
.vdinput::placeholder{color:var(--ink-faint)}
.vderr{margin:0.8rem 0 0;font-size:var(--label);font-weight:700;color:var(--coral)}

.vdialog{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:1.25rem;background:rgba(10,33,71,0.55)}
.vdbox{background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  padding:1.9rem 1.8rem;max-width:30rem;width:100%;
  box-shadow:0 1.5rem 3rem rgba(10,33,71,0.28)}
.vdbox h2{margin:0;font-family:var(--font);font-size:var(--step-2);line-height:1.15;
  letter-spacing:-0.02em;color:var(--ink)}
.vdlist{margin:0.9rem 0 0;font-family:var(--font);font-size:var(--h4);
  font-weight:700;color:var(--teal)}
.vdsub{margin:0.8rem 0 0;color:var(--ink-soft);line-height:1.6}
.vdrow{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1.6rem}
.vdrow button{font:inherit;font-size:var(--label);font-weight:700;letter-spacing:0.05em;
  text-transform:uppercase;cursor:pointer;border-radius:100px;min-height:2.9rem;
  padding:0.7rem 1.5rem;flex:1 1 9rem}
.vdgo{background:var(--teal);color:var(--on-teal);border:1px solid var(--teal)}
.vdgo:hover{background:var(--teal-bright);border-color:var(--teal-bright)}
.vdback{background:var(--surface);color:var(--ink-soft);border:1px solid var(--rule)}
.vdback:hover{border-color:var(--ink-soft);color:var(--ink)}
.vdrow button:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .vdbox{animation:vdin 0.16s ease-out}
  @keyframes vdin{from{opacity:0;transform:translateY(0.6rem)}to{opacity:1;transform:none}}
}

/* ---------- writing how you will use them ---------- */
.applylead{margin:0 0 1.75rem;color:var(--ink-soft);font-size:var(--text);line-height:1.6}
.applynone{margin:0;color:var(--coral);font-weight:600}
.applylist{list-style:none;margin:0;padding:0;display:grid;gap:1.75rem}
.applyq{margin:0 0 0.75rem;font-size:var(--h4);line-height:1.4;color:var(--ink)}
.applyname{font-family:var(--font);font-weight:700;color:var(--teal);
  letter-spacing:-0.01em}
.applyask{font-weight:400;color:var(--ink-soft)}

/* ---------- watching the video through ---------- */
.vstate{margin:0.75rem 0 0;font-size:var(--label);font-weight:600;
  letter-spacing:0.02em;color:var(--ink-soft)}
.vstate.done{color:var(--good)}
.vstate.done::before{content:"\2713\00a0"}
.vdone{margin:0.75rem 0 0}

/* A picture on the back of a flip card. The card already grows past its square
   floor when it needs to, so the words below it are never cut off. */
.fimg{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px;
  margin-bottom:0.2rem}

/* A section with no heading. The Listen button sits on its own row, pushed
   right where the heading would have left it. */
.sechead.nohead{justify-content:flex-end;border-bottom:0;margin-bottom:0.4rem;padding-bottom:0}