/* Welcome Questions: the whole site's styles.
   The idea: an open door, with a question asked kindly in the light from it. Deep "evening indigo" is the one accent
   (main button, brand, key highlights); a warm doorway light is decoration only. Warm off-white page, big rounded
   corners, Fraunces headings, Atkinson Hyperlegible body, tuned for adults reading in a second language: big text,
   wide line spacing, short lines, big tap targets. Light theme only (it suits projectors). See docs/design.md.
   Fonts are served by the site itself (SIL Open Font Licence). */
@font-face { font-family: "Atkinson Hyperlegible"; src: url(/fonts/atkinson-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(/fonts/atkinson-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-600i.woff2) format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }

:root {
  --page: #FAF8F3; --card: #FFFFFF; --line-c: #E4E1D8; --line-strong: #CFCABD; --ink: #1C2433; --muted: #535D75;
  --accent: #4436A6; --accent-deep: #2C2470; --accent-ink: #FFFFFF; --accent-soft: #ECEAF8;
  /* The doorway light: decoration only, never a button or a link. */
  --glow: #F5D48C; --glow-soft: #FCF1D8; --glow-deep: #E9B85C;
  --wash-a: #F1EFFA; --wash-b: #FBF3E2; --wash-c: #E9F3F1;
  --right: #17703F; --right-soft: #E5F2EA; --wrong: #A3311F; --wrong-soft: #FBEAE6;
  --r-card: 18px; --r-panel: 28px; --r-small: 14px;
  --shadow: 0 1px 2px rgba(20,32,58,.06), 0 16px 36px -18px rgba(20,32,58,.28);
  --shadow-lift: 0 2px 4px rgba(20,32,58,.06), 0 22px 44px -18px rgba(20,32,58,.34);
  --head: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Atkinson Hyperlegible", Arial, sans-serif;
  --fs: 1.125rem;
  --wrap: 72rem;
  color-scheme: light;
}
:root[data-size="big"] { --fs: 1.3125rem; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 var(--fs)/1.6 var(--body); overflow-wrap: break-word; }
body.menu-open { overflow: hidden; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.3rem + 3.4vw, 3.6rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.6rem); letter-spacing: -.02em; }
h3 { font-size: 1.35rem; }
h1 em, h2 em { color: var(--accent); }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -5rem; background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 10px; z-index: 50; font-weight: 700; }
.skip:focus { top: 1rem; }
.muted { color: var(--muted); }
.ic { width: 1.4em; height: 1.4em; flex: none; vertical-align: -.3em; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 3.25rem; padding: .75rem 1.5rem; border-radius: 999px; border: 2px solid transparent; font: 700 1.0625rem/1.2 var(--body); text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s; }
.btn .ic { width: 1.2em; height: 1.2em; }
.btn-main { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 22px -12px rgba(44,36,112,.7); }
.btn-main:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-quiet { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { border-color: var(--ink); }
.btn-sm { min-height: 2.875rem; padding: .55rem 1.15rem; font-size: 1rem; }
.btn-light { background: #fff; color: var(--accent-deep); }
.btn-light:hover { background: var(--glow-soft); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.linkish { background: none; border: 0; padding: .35rem 0; min-height: 2.75rem; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* ── Header ── */
.top { position: sticky; top: 0; z-index: 20; background: rgba(250,248,243,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-c); }
.top-in { max-width: var(--wrap); margin: 0 auto; padding: .65rem 1rem; display: flex; align-items: center; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font: 600 1.3rem/1.05 var(--head); letter-spacing: -.01em; color: var(--ink); text-decoration: none; margin: 0; min-height: 2.75rem; }
.brand .mark { width: 2.3rem; height: 2.3rem; flex: none; }
.brand-name { display: inline-flex; gap: .28em; }
.nav { display: flex; gap: .2rem; margin-left: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem .85rem; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1rem; }
.nav a:hover { background: var(--accent-soft); }
.nav a[aria-current] { background: var(--accent-soft); color: var(--accent-deep); }
.top-act { display: flex; align-items: center; gap: .5rem; }
.size-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .4rem .7rem; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 700 .95rem var(--body); cursor: pointer; }
.size-btn::before { content: "Aa" / ""; font: 600 1.05rem/1 var(--head); color: var(--accent); }
.size-btn:hover { background: var(--accent-soft); color: var(--ink); }
.short { display: none; }
.menu-btn { display: none; align-items: center; gap: .4rem; min-height: 2.875rem; padding: .4rem 1rem .4rem .8rem; border: 2px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--ink); font: 700 1rem var(--body); cursor: pointer; }
.menu-btn[aria-expanded="true"] { border-color: var(--ink); }
.menu-btn .ic-close { display: none; }
.menu-btn[aria-expanded="true"] .ic-open { display: none; }
.menu-btn[aria-expanded="true"] .ic-close { display: inline; }
.menu { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 100%); height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain; background: var(--page); border-top: 1px solid var(--line-c); }
.menu[hidden] { display: none; }
.menu-in { max-width: 40rem; margin: 0 auto; padding: .75rem 1rem 2rem; }
.menu nav { display: grid; }
.menu nav a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .9rem .25rem; min-height: 4rem; border-bottom: 1px solid var(--line-c); color: var(--ink); text-decoration: none; }
.menu nav a:hover { background: var(--accent-soft); }
.menu-ic { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px 999px 10px 10px; background: var(--accent-soft); color: var(--accent); }
.menu-ic .ic { width: 1.35rem; height: 1.35rem; }
.menu-t { display: grid; }
.menu-t b { font: 600 1.35rem/1.2 var(--head); }
.menu-t span { color: var(--muted); font-size: 1rem; }
.menu .chev { color: var(--muted); }
.menu-foot { display: grid; gap: 1rem; margin-top: 1.25rem; }
.menu-foot .size-btn { justify-self: start; border: 2px solid var(--line-strong); padding: .5rem 1rem; color: var(--ink); }
.menu-foot .unofficial { margin: 0; }
@media (max-width: 900px) {
  .nav, .top-act > .size-btn { display: none; }
  .menu-btn { display: inline-flex; }
  .top-act { margin-left: auto; }
}
@media (max-width: 480px) {
  .top-in { gap: .5rem; padding: .55rem .75rem; }
  .brand { font-size: 1.02rem; gap: .45rem; }
  .brand .mark { width: 2.15rem; height: 2.15rem; }
  .brand-name { flex-direction: column; gap: 0; }
  .top-act { gap: .4rem; }
  .top-act .btn-sm { padding: .5rem 1rem; }
  .long { display: none; }
  .short { display: inline; }
  .menu-btn { padding: .4rem .75rem .4rem .6rem; gap: .3rem; }
}
@media (max-width: 359px) {
  .menu-btn { padding: .4rem .65rem; }
  .menu-btn .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 339px) { .brand-name { display: none; } }

/* ── Layout ── */
main { display: block; max-width: var(--wrap); margin: 0 auto; padding: 0 1rem 4rem; }
main:focus { outline: none; }
.page-head { padding: 2.75rem 0 1.75rem; max-width: 46rem; }
.page-head h1 { margin-bottom: .35em; }
.lede { font-size: 1.2em; color: var(--muted); max-width: 40rem; }
.band { padding: 4.5rem 0 0; }
.sec-head { text-align: center; max-width: 40rem; margin: 0 auto 2rem; }
.sec-head h2 { margin-bottom: .3em; }
.sec-head p { color: var(--muted); margin: 0; }
.eyebrow { font-weight: 700; color: var(--accent); margin-bottom: .5rem; display: flex; align-items: center; gap: .45rem; font-size: 1rem; }
.pill { display: inline-flex; flex-wrap: wrap; gap: .2rem .55rem; padding: .4rem 1rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line-c); color: var(--ink); font-weight: 700; font-size: .95rem; box-shadow: 0 1px 2px rgba(20,32,58,.05); }
.pill b { color: var(--accent); }

/* ── Hero ── */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr); gap: 3rem; align-items: center; padding: 3.5rem 0 1rem; }
.hero h1 { font-size: clamp(2.55rem, 1.2rem + 3.6vw, 4.1rem); line-height: 1.03; letter-spacing: -.03em; margin: 1.1rem 0 1.1rem; }
.hero h1 em { display: inline-block; }
.hero .lede { font-size: 1.25em; }
.hero-act { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 1.5rem; }
.hero-scale { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; list-style: none; padding: 0; margin: 0; color: var(--muted); font-size: 1rem; }
.hero-scale li { display: flex; align-items: baseline; gap: .35rem; }
.hero-scale strong { font: 600 1.45rem/1 var(--head); color: var(--ink); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2.25rem; } }

/* ── The signature: an open doorway, with a question in its light ── */
.doorway { position: relative; margin: 0 0 0 4.5rem; padding-bottom: 2.6rem; }
.arch { --arch-ry: 150px; position: relative; z-index: 1; border: 12px solid var(--accent-deep); border-bottom-width: 0; border-radius: 50% 50% 0 0 / var(--arch-ry) var(--arch-ry) 0 0; padding: 0 1.1rem 1.25rem; background: radial-gradient(120% 70% at 50% 0%, #FFF8E8 0%, var(--glow-soft) 45%, var(--glow) 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.arch { overflow: hidden; }
.fanlight { display: block; width: calc(100% + 2.2rem); max-width: none; height: 128px; margin: 0 -1.1rem 1rem; }
.try-label { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--accent-deep); margin: 0 0 .7rem .25rem; }
.try-label::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); }
.door-leaf { position: absolute; z-index: 0; left: -4.2rem; top: 1.5rem; width: 4.9rem; height: calc(100% - 4.5rem); transform-origin: 100% 50%; }
.spill { position: absolute; left: -1.5rem; right: -1.5rem; bottom: 0; height: 2.6rem; background: linear-gradient(to bottom, var(--glow) 0%, rgba(245,212,140,.35) 60%, rgba(245,212,140,0) 100%); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.spill::before { content: ""; position: absolute; left: 50%; top: .55rem; width: 38%; height: 1.15rem; transform: translateX(-50%); border-radius: 8px; background: #C9894A; box-shadow: inset 0 0 0 3px #C9894A, inset 0 0 0 4px rgba(255,255,255,.55); }
.threshold { position: absolute; z-index: 2; left: -12px; right: -12px; bottom: 2.6rem; height: 12px; background: var(--accent-deep); border-radius: 3px; }
@keyframes swing { from { transform: perspective(600px) rotateY(-80deg); } to { transform: perspective(600px) rotateY(0); } }
@keyframes glowin { from { opacity: 0; } to { opacity: 1; } }
.door-leaf { animation: swing 1.1s cubic-bezier(.2,.7,.2,1) .15s both; }
.spill { animation: glowin 1.2s ease .5s both; }
@media (max-width: 900px) { .doorway { margin: 0 auto; max-width: 34rem; width: calc(100% - 3.5rem); } }
@media (max-width: 560px) {
  .doorway { width: 100%; }
  .door-leaf { display: none; }
  .arch { --arch-ry: 96px; border-width: 9px; border-bottom-width: 0; border-radius: 50% 50% 0 0 / var(--arch-ry) var(--arch-ry) 0 0; padding: 0 .7rem 1rem; }
  .fanlight { width: calc(100% + 1.4rem); height: 78px; margin: 0 -.7rem .8rem; }
  .threshold { left: -9px; right: -9px; height: 9px; }
  .spill { left: -.5rem; right: -.5rem; }
}

/* ── Tiles: the main choice ── */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 960px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }
.tile { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic name" "ic blurb" "ic count"; column-gap: 1rem; align-content: start; padding: 1.35rem 1.35rem 1.35rem 1.25rem; background: var(--card); border: 1px solid var(--line-c); border-radius: var(--r-card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s, border-color .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line); }
.tile-ic { grid-area: ic; display: grid; place-items: center; width: 3.4rem; height: 3.9rem; border-radius: 999px 999px 12px 12px; background: color-mix(in srgb, var(--line) 13%, white); color: var(--line); }
.tile-ic .ic { width: 1.75rem; height: 1.75rem; }
.tile-name { grid-area: name; font: 600 1.35rem/1.2 var(--head); margin-bottom: .2rem; }
.tile-blurb { grid-area: blurb; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.tile-count { grid-area: count; display: flex; align-items: center; gap: .35rem; margin-top: .6rem; font-size: .95rem; font-weight: 700; color: var(--line); }
.tile-count .ic { width: 1.1rem; height: 1.1rem; transition: transform .15s; }
.tile:hover .tile-count .ic { transform: translateX(3px); }
.tiles-more { text-align: center; margin: 1.5rem 0 0; }

/* ── Feature rows ── */
.rows { display: grid; gap: 4.5rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.row.flip .row-text { order: 2; }
.row-text h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.row-text p:last-child { color: var(--muted); }
.row-pic { display: grid; place-items: center; min-height: 18rem; background: var(--wash-b); border-radius: 50% 50% var(--r-panel) var(--r-panel) / 110px 110px var(--r-panel) var(--r-panel); padding: 4.5rem 2rem 2rem; }
.row:nth-child(2) .row-pic { background: var(--wash-a); }
.row:nth-child(3) .row-pic { background: var(--wash-c); }
.row-pic > * { width: 100%; max-width: 24rem; }
@media (max-width: 760px) { .row { grid-template-columns: 1fr; gap: 1.5rem; } .row.flip .row-text { order: 0; } .row-pic { min-height: 0; padding: 3.5rem 1rem 1.25rem; border-radius: 50% 50% var(--r-panel) var(--r-panel) / 70px 70px var(--r-panel) var(--r-panel); } }
.demo-card { background: var(--card); border-radius: var(--r-card); padding: 1.25rem 1.4rem; box-shadow: var(--shadow); }
.demo-q { font-weight: 700; }
.demo-a { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 2px solid var(--right); background: var(--right-soft); border-radius: 12px; color: var(--right); font-weight: 700; }
.demo-a i { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--right); color: #fff; font-style: normal; font-size: .85rem; }
.demo-src { color: var(--accent); display: flex; gap: .4rem; align-items: center; margin: .9rem 0 0; font-size: 1rem; }
.demo-word { font: 600 1.45rem var(--head); margin-bottom: .3rem; }
.demo-word span { border-bottom: 2px dotted var(--accent); }
.demo-big { font: 600 2.8rem/1 var(--head); margin-bottom: .3rem; color: var(--right); }
.demo-bars { display: grid; gap: .5rem; margin-top: .9rem; }
.demo-bars span { display: block; background: var(--page); border-radius: 999px; position: relative; overflow: hidden; }
.demo-bars span::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: color-mix(in srgb, var(--line) 20%, white); }
.demo-bars b { position: relative; display: block; padding: .3rem .8rem; font-size: .95rem; }
.term-demo { border-bottom: 2px dotted var(--accent); }

/* ── Numbers band ── */
.numbers { list-style: none; margin: 0; padding: 2rem 1.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; background: var(--card); border: 1px solid var(--line-c); border-radius: var(--r-panel); text-align: center; }
.numbers li { display: grid; gap: .2rem; }
.numbers strong { font: 600 clamp(2.2rem, 1.6rem + 2vw, 3.2rem)/1 var(--head); color: var(--accent-deep); letter-spacing: -.02em; }
.numbers span { color: var(--muted); font-size: 1rem; }
@media (max-width: 760px) { .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; } }

/* ── Audience cards ── */
.who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .who { grid-template-columns: 1fr; } }
.who a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.4rem; border-radius: var(--r-card); background: var(--wash-a); color: var(--ink); text-decoration: none; transition: transform .15s; }
.who a:nth-child(2) { background: var(--wash-c); }
.who a:hover { transform: translateY(-2px); }
.who b { display: block; font: 600 1.35rem/1.2 var(--head); margin-bottom: .2rem; }
.who span span { color: var(--muted); font-size: 1rem; }
.who .menu-ic { background: var(--card); }
.who .chev { color: var(--accent); }

/* ── Honest band, FAQ, closer ── */
.honest { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; background: var(--wash-b); border-radius: var(--r-panel); padding: 2.25rem; margin-top: 4.5rem; }
.honest-mark { display: grid; place-items: center; width: 3.4rem; height: 3.9rem; border-radius: 999px 999px 12px 12px; background: var(--card); color: var(--accent); }
.honest-mark .ic { width: 1.7rem; height: 1.7rem; }
.honest h2 { margin-bottom: .5rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.honest p { max-width: 50rem; }
.honest p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .honest { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; gap: .75rem; } }
.faq-list { max-width: 46rem; margin: 0 auto; display: grid; gap: .6rem; }
details { background: var(--card); border: 1px solid var(--line-c); border-radius: var(--r-card); padding: 0 1.25rem; }
details[open] { border-color: var(--line-strong); }
summary { cursor: pointer; padding: 1.05rem 0; min-height: 2.75rem; font-weight: 700; list-style-position: outside; }
summary::marker { color: var(--accent); }
details p { margin-top: 0; }
.closer { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: var(--r-panel); padding: 4rem 1.5rem 3.5rem; text-align: center; margin-top: 4.5rem; background-image: radial-gradient(40% 60% at 50% 100%, rgba(245,212,140,.42), transparent 75%), radial-gradient(70% 90% at 50% 0%, rgba(108,92,214,.35), transparent 70%); }
.closer-door { display: block; width: 4.5rem; height: auto; margin: 0 auto 1.25rem; }
.closer h2 { color: #fff; }
.closer p { color: #E4E7F0; max-width: 32rem; margin-left: auto; margin-right: auto; }
.closer .btn { margin-top: .5rem; }

/* ── Topics: each line is a route, each topic a stop ── */
.jump { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.jump a { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .4rem 1rem .4rem .75rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line-c); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1rem; }
.jump a::before { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: var(--line); }
.jump a:hover { border-color: var(--line); }
.line-block { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1rem 3rem; padding: 2.5rem 0; border-top: 1px solid var(--line-c); }
.line-head { align-self: start; position: sticky; top: 6rem; }
.line-head h2 { display: flex; align-items: center; gap: .75rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-bottom: .4rem; }
.line-head .tile-ic { width: 3rem; height: 3.4rem; flex: none; }
.line-head .tile-ic .ic { width: 1.5rem; height: 1.5rem; }
.line-blurb { color: var(--muted); margin-bottom: .4rem; }
.line-count { font-weight: 700; color: var(--line); font-size: 1rem; }
@media (max-width: 820px) { .line-block { grid-template-columns: 1fr; } .line-head { position: static; } }
.stops { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: .7rem; counter-reset: stop; }
.stops::before { content: ""; position: absolute; left: 1.15rem; top: 1.5rem; bottom: 1.5rem; width: 4px; border-radius: 4px; background: color-mix(in srgb, var(--line) 35%, white); }
.stops li { position: relative; padding-left: 3.1rem; counter-increment: stop; }
.stops li::before { content: counter(stop); position: absolute; left: 0; top: 1.05rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--card); border: 3px solid var(--line); color: var(--ink); font: 700 .95rem var(--body); z-index: 1; }
.stop { display: grid; gap: .15rem; padding: 1rem 1.2rem; background: var(--card); border: 1px solid var(--line-c); border-radius: var(--r-small); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.stop:hover { border-color: var(--line); transform: translateX(3px); }
.stop-name { font-weight: 700; font-size: 1.15rem; }
.stop-sum { color: var(--muted); font-size: 1rem; }
.stop-meta { font-size: .95rem; color: var(--line); font-weight: 700; }

/* ── A topic page ── */
.crumbs { padding-top: 1.4rem; font-size: 1rem; color: var(--muted); }
.crumbs a { display: inline-block; padding: .4rem 0; }
.topic { max-width: 46rem; }
.topic-head { padding: 1.25rem 0 1.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line-c); }
.topic-head .eyebrow { color: var(--line); }
.topic-head .eyebrow .ic { width: 1.3rem; height: 1.3rem; }
.notes h2 { font-size: clamp(1.5rem, 1.3rem + .7vw, 1.8rem); margin-top: 2.25rem; }
.notes p, .notes li { max-width: 40rem; }
.notes ul { padding-left: 1.3rem; }
.notes li { margin-bottom: .45rem; }
.notes li::marker { color: var(--line); }
.sources { margin: 2.25rem 0; }
.term { font: inherit; color: inherit; background: none; border: 0; padding: 0; border-bottom: 2px dotted var(--accent); cursor: help; }
.term:hover { background: var(--accent-soft); }
.term-pop { max-width: min(26rem, calc(100vw - 2rem)); margin: auto; padding: 1.3rem 1.5rem; border: 1px solid var(--line-c); border-radius: var(--r-card); background: var(--card); color: var(--ink); box-shadow: 0 24px 60px -20px rgba(20,32,58,.45); }
.term-pop::backdrop { background: rgba(28,36,51,.3); }
.term-pop p { margin-bottom: .6rem; }
.term-word { font: 600 1.4rem var(--head); }
.practise { margin-top: 3.5rem; padding: 1.75rem 1.5rem 1.5rem; background: var(--wash-a); border-radius: var(--r-panel); }
.practise h2 { font-size: clamp(1.5rem, 1.3rem + .7vw, 1.9rem); }
@media (max-width: 560px) { .practise { margin-left: -.5rem; margin-right: -.5rem; padding: 1.4rem .75rem .9rem; } }
.next-prev { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.next-prev a { display: grid; padding: .85rem 1.1rem; border: 1px solid var(--line-c); border-radius: var(--r-small); background: var(--card); text-decoration: none; color: var(--ink); font-weight: 700; max-width: 48%; }
.next-prev a:hover { border-color: var(--line-strong); }
.next-prev a[rel=next] { text-align: right; margin-left: auto; }
.next-prev a span { font-weight: 400; color: var(--muted); font-size: .95rem; }

/* ── The player ── */
.q-card { background: var(--card); border-radius: var(--r-card); padding: 1.5rem; box-shadow: var(--shadow); }
@media (max-width: 480px) { .q-card { padding: 1.15rem 1rem; } }
.q-top { margin-bottom: .9rem; }
.q-count { font-weight: 700; color: var(--muted); margin: 0 0 .45rem; font-size: 1rem; }
.q-bar { height: .5rem; background: rgba(68,54,166,.14); border-radius: 999px; overflow: hidden; }
.q-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.q-text { font: 700 1.25em/1.4 var(--body); letter-spacing: 0; margin-bottom: .35rem; text-wrap: pretty; }
.q-text:focus { outline: none; }
.q-how { color: var(--muted); margin-bottom: 1rem; font-size: 1rem; }
.opts { display: grid; gap: .6rem; margin-bottom: 1rem; }
.opts-tf { grid-template-columns: 1fr 1fr; }
.opt { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "mark text" "mark note"; align-items: center; column-gap: .85rem; width: 100%; min-height: 3.5rem; padding: .75rem 1rem .75rem .8rem; text-align: left; background: var(--page); border: 2px solid var(--line-c); border-radius: var(--r-small); font: inherit; color: var(--ink); cursor: pointer; transition: border-color .12s, background-color .12s; }
.opt:hover:not([disabled]) { border-color: var(--accent); background: #fff; }
.opt-mark { grid-area: mark; width: 1.9rem; height: 1.9rem; border: 2px solid var(--muted); border-radius: 50%; display: grid; place-items: center; font: 700 .95rem/1 var(--body); color: var(--muted); background: #fff; }
.opt[aria-pressed] .opt-mark { border-radius: 8px; }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.opt[aria-pressed="true"] .opt-mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.opt[aria-pressed="true"] .opt-l, .opt.is-right .opt-l, .opt.is-wrong .opt-l { display: none; }
.opt[aria-pressed="true"] .opt-mark::after { content: "✓"; color: #fff; }
.opt-text { grid-area: text; }
.opt-note { grid-area: note; font-size: .95rem; font-weight: 700; }
.opt-note:empty { display: none; }
.opt[disabled] { cursor: default; }
.opt.is-right { border-color: var(--right); background: var(--right-soft); }
.opt.is-right .opt-mark { background: var(--right); border-color: var(--right); }
.opt.is-right .opt-mark::after { content: "✓"; color: #fff; }
.opt.is-right .opt-note { color: var(--right); }
.opt.is-wrong { border-color: var(--wrong); background: var(--wrong-soft); }
.opt.is-wrong .opt-mark { background: var(--wrong); border-color: var(--wrong); }
.opt.is-wrong .opt-mark::after { content: "✕"; color: #fff; }
.opt.is-wrong .opt-note { color: var(--wrong); }
.opt.is-other { background: #fff; color: var(--muted); }
.opt.is-other .opt-mark { border-color: var(--line-strong); color: var(--muted); }
.fb { border-radius: var(--r-small); padding: 1.1rem 1.25rem; margin-top: .5rem; border-left: 6px solid; }
.fb-right { background: var(--right-soft); border-color: var(--right); }
.fb-wrong { background: var(--wrong-soft); border-color: var(--wrong); }
.fb-head { font: 600 1.45rem var(--head); margin-bottom: .3rem; }
.fb-right .fb-head { color: var(--right); }
.fb-wrong .fb-head { color: var(--wrong); }
.fb-head:focus { outline: none; }
.fb .btn { margin-top: .25rem; }
.src { font-size: 1rem; }
.src span { color: var(--muted); }
.end-act { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.missed { padding-left: 1.2rem; }
.missed li { margin-bottom: .9rem; }
.missed p { margin: 0; }
.missed-a { color: var(--right); }
.chooser fieldset { border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .6rem; }
.chooser legend { font: 600 1.45rem var(--head); margin-bottom: .8rem; padding: 0; }
.chooser fieldset .check { padding: .7rem 1rem; min-height: 3.25rem; border: 2px solid var(--line-c); border-left: 6px solid var(--line, var(--accent)); border-radius: var(--r-small); background: var(--page); }
.chooser fieldset .check:has(input:checked) { background: #fff; border-color: var(--accent); border-left-color: var(--line, var(--accent)); }
.check { display: flex; align-items: center; gap: .7rem; cursor: pointer; min-height: 2.75rem; }
.check input { width: 1.4rem; height: 1.4rem; flex: none; accent-color: var(--accent); }
.form-msg { color: var(--wrong); font-weight: 700; margin-top: .6rem; }
.form-msg:empty { display: none; }

/* ── The test ── */
.test-intro { display: grid; gap: .25rem; background: var(--card); border-radius: var(--r-panel); padding: 1.75rem; box-shadow: var(--shadow); max-width: 42rem; }
.facts { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.facts li { display: grid; background: var(--wash-a); border-radius: var(--r-small); padding: .8rem 1rem; font-size: 1rem; color: var(--muted); }
.facts strong { font: 600 2rem/1.1 var(--head); color: var(--accent-deep); }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } .facts li { grid-template-columns: 3.2rem 1fr; align-items: center; } .test-intro { padding: 1.25rem 1rem; } }
.test-intro .btn { justify-self: start; margin-top: .5rem; }
.t-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .9rem; padding: .5rem .5rem .5rem 1rem; background: var(--card); border: 1px solid var(--line-c); border-radius: 999px; }
.t-bar .q-count { margin: 0; color: var(--ink); }
.t-time { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 0 auto; padding: .3rem .85rem; border-radius: 999px; background: var(--wash-a); font: 700 1.15rem var(--body); font-variant-numeric: tabular-nums; }
.t-time[hidden] { display: none; }
.t-time[hidden] + .linkish { margin-left: auto; }
.t-bar .linkish { padding-right: .6rem; font-size: 1rem; }
.t-clock.low { color: var(--wrong); }
.t-nav { display: flex; justify-content: space-between; gap: .6rem; margin: 1rem 0; }
.t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.85rem, 1fr)); gap: .45rem; margin: 1.25rem 0; padding: 1rem; background: var(--card); border: 1px solid var(--line-c); border-radius: var(--r-card); }
.t-grid button { min-height: 2.85rem; border: 2px solid var(--line-c); border-radius: 10px; background: var(--page); font: 700 1rem var(--body); color: var(--ink); cursor: pointer; }
.t-grid button:hover { border-color: var(--accent); }
.t-grid button.done { background: var(--accent-soft); border-color: #C9C3EE; }
.t-grid button[aria-current] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.t-end { text-align: center; }
.confirm { margin-top: 1rem; border: 2px solid var(--accent); }
.confirm p:focus { outline: none; }
.result { display: grid; grid-template-columns: auto 1fr; column-gap: 1.75rem; align-items: center; }
.result > :not(.score) { grid-column: 2; }
.result .score { grid-row: 1 / span 2; }
.result .by-line, .result .end-act { grid-column: 1 / -1; }
.score { --p: 0; display: grid; place-items: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: conic-gradient(var(--ring, var(--accent)) calc(var(--p) * 1%), var(--accent-soft) 0); }
.score span { display: grid; place-items: center; width: 5.9rem; height: 5.9rem; border-radius: 50%; background: var(--card); font: 600 2.3rem/1 var(--head); color: var(--ink); }
.result.pass { --ring: var(--right); }
.result.pass .q-text { color: var(--right); }
@media (max-width: 520px) { .result { grid-template-columns: 1fr; } .result > :not(.score) { grid-column: 1; } .result .score { grid-row: auto; margin-bottom: 1rem; width: 6.5rem; height: 6.5rem; } .score span { width: 5rem; height: 5rem; font-size: 2rem; } }
.by-line { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .7rem; }
.by-line li { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; gap: .8rem; align-items: center; }
.bl-bar { height: .8rem; background: var(--page); border-radius: 999px; overflow: hidden; border: 1px solid var(--line-c); }
.bl-bar span { display: block; height: 100%; width: var(--w); background: var(--line); border-radius: 999px; }
@media (max-width: 560px) { .by-line li { grid-template-columns: 1fr auto; } .by-line .bl-bar { grid-column: 1 / -1; grid-row: 2; } }
.review-title { margin-top: 2.75rem; font-size: 1.6rem; }
.review { padding-left: 1.4rem; display: grid; gap: 1rem; }
.review li { background: var(--card); border-radius: var(--r-small); padding: 1rem 1.25rem; border-left: 6px solid var(--right); box-shadow: 0 1px 2px rgba(20,32,58,.06); }
.review li.no { border-left-color: var(--wrong); }
.review p { margin-bottom: .4rem; }
.rv-q { font-weight: 700; }
.rv-mark { font-weight: 700; }
.review .ok .rv-mark { color: var(--right); }
.review .no .rv-mark { color: var(--wrong); }
.rv-e { color: var(--muted); }
.tests { list-style: none; padding: 0; max-width: 30rem; }
.tests li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-c); }
.prog + .muted { font-size: 1rem; }

/* ── Words ── */
.find { display: grid; gap: .35rem; max-width: 28rem; margin-top: 1.5rem; }
.find label { font-weight: 700; }
.find input { min-height: 3.25rem; padding: .6rem 1.2rem; border: 2px solid var(--line-strong); border-radius: 999px; font: inherit; background: var(--card); color: var(--ink); }
.find input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }
.words { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: .8rem; }
.word { background: var(--card); border: 1px solid var(--line-c); border-radius: var(--r-small); padding: 1.1rem 1.25rem; }
.word[hidden] { display: none; }
.word:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.word dt { font: 600 1.3rem var(--head); margin-bottom: .25rem; }
.word dd { margin: 0; }
.word-topic { display: inline-block; font-size: .95rem; margin-top: .5rem; padding: .3rem 0; }

/* ── Prose pages ── */
.prose > *:not(.page-head) { max-width: 44rem; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + .7vw, 1.8rem); margin-top: 2.25rem; }
.cols { columns: 2 14rem; }

/* ── Footer ── */
.foot { background: #F2EFE7; border-top: 1px solid var(--line-c); margin-top: 4rem; }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 3rem 1rem 1.25rem; display: grid; grid-template-columns: 1.3fr 2fr; gap: 2.5rem; }
.foot-brand p { font-size: 1rem; }
.foot-brand .brand { margin-bottom: .75rem; }
.unofficial { background: var(--card); border: 1px solid var(--line-c); border-radius: var(--r-small); padding: .85rem 1rem; font-size: 1rem; }
.foot-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.foot-nav h2 { font: 700 1rem var(--body); letter-spacing: 0; margin-bottom: .5rem; color: var(--muted); }
.foot-nav a, .foot-nav .linkish { display: flex; align-items: center; min-height: 2.75rem; padding: .2rem 0; font-size: 1rem; color: var(--ink); text-align: left; }
.foot-small { max-width: var(--wrap); margin: 0 auto; padding: 0 1rem 2rem; font-size: .9rem; color: var(--muted); }
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr; } .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The 3D doorway (hero3d.js) draws over the still picture, then takes its place: the canvas fades in over the
   still doorway, and once it is showing, the still frame, light and door give way to the 3D ones. The card stays. */
.door-stage { position: absolute; z-index: 0; inset: -3.5rem -2.5rem -2.5rem -6rem; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.door-stage { --fx: linear-gradient(to right, transparent, #000 7%, #000 95%, transparent); --fy: linear-gradient(to bottom, transparent, #000 6%, #000 90%, transparent); -webkit-mask-image: var(--fx), var(--fy); -webkit-mask-composite: source-in; mask-image: var(--fx), var(--fy); mask-composite: intersect; }
.door-stage canvas { display: block; width: 100%; height: 100%; }
.door-stage.on { opacity: 1; }
.doorway.is-3d .arch { background: transparent; border-color: transparent; box-shadow: none; }
.doorway.is-3d .fanlight, .doorway.is-3d .door-leaf, .doorway.is-3d .threshold, .doorway.is-3d .spill { visibility: hidden; }
.doorway.is-3d .try-label { background: rgba(255,250,238,.85); border-radius: 999px; padding: .2rem .8rem; width: fit-content; }
@media (max-width: 900px) { .door-stage { inset: -4rem -1rem -2.5rem -1rem; --fx: linear-gradient(to right, #000, #000); } }

/* Rows ease in as they scroll into view (home.js adds .reveal-on only when movement is on). */
.reveal-on .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal-on .rv.in { opacity: 1; transform: none; }

/* The results ring fills; answers respond to a tap. */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.score { animation: ring 1.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ring { from { --p: 0; } }
.bl-bar span { animation: bar 1s cubic-bezier(.2,.7,.2,1) .2s both; transform-origin: left; }
@keyframes bar { from { transform: scaleX(0); } }
.opt:active:not([disabled]) { transform: scale(.985); }
.opt.is-right .opt-mark, .opt.is-wrong .opt-mark, .opt[aria-pressed="true"] .opt-mark { animation: pop .32s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { from { transform: scale(.6); } }
.fb { animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .top, .foot, .practise, .skip, .doorway { display: none; } }
/* With no questions yet there is no doorway: the hero stands alone, centred. */
.hero.solo { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.hero.solo .hero-act, .hero.solo .hero-scale { justify-content: center; }
.hero.solo .lede { margin-left: auto; margin-right: auto; }

/* Sign in and your account */
.signin-link { font-weight: 700; color: var(--ink); text-decoration: none; padding: .5rem .7rem; border-radius: 999px; white-space: nowrap; }
.signin-link:hover { background: var(--accent-soft); }
@media (max-width: 900px) { .top-act .signin-link { display: none; } }
.signin { max-width: 30rem; }
.signin-msg { background: var(--wrong-soft); color: var(--wrong); font-weight: 700; padding: .8rem 1rem; border-radius: 14px; }
.sso-list { display: grid; gap: .8rem; margin: .5rem 0 1.8rem; }
.sso { display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 3.25rem; padding: .7rem 1.2rem; border-radius: 999px; font: 700 1.05rem/1.2 var(--body); text-decoration: none; border: 1px solid transparent; }
.sso .pmark { width: 1.25rem; height: 1.25rem; flex: none; }
.sso-apple { background: #000; color: #fff; }
.sso-apple:hover { background: #222; }
.sso-google { background: #fff; color: #1F1F1F; border-color: #747775; }
.sso-google:hover { background: #F7F8F8; }
.sso:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.keep h2 { font-size: 1.35rem; }
.keep ul { padding-left: 1.2rem; }
.keep li { margin-bottom: .4rem; }
.acct { max-width: 40rem; }
.acct-who { font-size: 1.1em; }
.acct-h { font-size: 1.35rem; margin-top: 2rem; }

/* The free taster and the unlock */
.stop-free { color: var(--right); }
.free-note { background: var(--wash-a); border-radius: 14px; padding: .7rem 1rem; font-size: 1rem; }
.lock { background: var(--card); border: 2px dashed var(--line-c); border-radius: var(--r-card); padding: 1.3rem; }
.lock-head { display: flex; gap: .5rem; align-items: center; }
.lock-head .ic { color: var(--accent); }
.unlock { max-width: 36rem; }
.unlock-list { padding-left: 1.2rem; }
.unlock-list li { margin-bottom: .5rem; }
.unlock-box { margin: 1.5rem 0; }
.unlock-done { color: var(--right); }
.small { font-size: .95rem; }

/* Signed in or out (html[data-in], set before first paint): the header and menu show the right way in. */
.phone-signin, .only-in { display: none; }
html[data-in] .only-in { display: flex; }
html[data-in] .only-out { display: none; }
@media (max-width: 900px) {
  html:not([data-in]) .top-act .practise-btn { display: none; }
  html:not([data-in]) .top-act .phone-signin { display: inline-flex; }
}
.hero-act .only-in { display: none; }
html[data-in] .hero-act .only-in { display: inline-flex; }
.hero-signin { color: var(--muted); font-size: 1rem; margin-top: -.25rem; }

/* Signed in but not paid: Unlock everywhere. Paid: Practise. (html[data-in], html[data-paid] are set before paint.) */
.unlock-btn, .only-unpaid, .only-paid { display: none !important; }
html[data-in]:not([data-paid]) .only-unpaid { display: flex !important; }
html[data-in]:not([data-paid]) .hero-act .only-unpaid { display: inline-flex !important; }
html[data-paid] .only-paid { display: inline-flex !important; }
html[data-in]:not([data-paid]) .top-act .practise-btn { display: none; }
html[data-in]:not([data-paid]) .top-act .unlock-btn { display: inline-flex !important; }