/* bandnine.org. Colour and motion follow docs/design-system.md: navy does the work, coral means voice,
   amber means a band. Display type is Newsreader (the examiner's paper); UI and body are the system sans. */
:root {
  color-scheme: light;
  --paper: #f7f8fa;
  --card: #ffffff;
  --ink: #0b1f3a;
  --text: #2a3a52;
  --muted: #5b6b82;
  --line: #e1e6ee;
  --navy: #0b1f3a;
  --navy-2: #12294a;
  --navy-3: #1b3760;
  --navy-line: #24436f;
  --coral: #f0775b;
  --coral-soft: #fde9e3;
  --amber: #f2b544;
  --amber-soft: #fff3d6;
  --amber-ink: #8a5b00;
  --success: #2f9e6f;
  --success-soft: #e4f4ec;
  --info: #e3eef9;
  --cue: #fff8ea;
  --on-navy: #f3f4f8;
  --on-navy-muted: #b8c4d6;
  --link: #1e4fb8;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --enter: cubic-bezier(.33, 1, .68, 1);
  --move: cubic-bezier(.65, 0, .35, 1);
  --wrap: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font: 17px/1.6 var(--sans); font-optical-sizing: auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { color: var(--ink); margin: 0 0 14px; font-weight: 400; }
h1 { font: 400 clamp(40px, 6.2vw, 66px)/1.04 var(--serif); letter-spacing: -.015em; }
h2 { font: 400 clamp(30px, 4.2vw, 44px)/1.1 var(--serif); letter-spacing: -.01em; }
h3 { font: 500 24px/1.2 var(--serif); }
p { margin: 0 0 16px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.lede { font-size: 19px; line-height: 1.5; max-width: 32em; }
.note { font-size: 14px; color: var(--muted); }
.kicker { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
.kicker.voice::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); margin-right: 8px; vertical-align: 1px; }
.said { font: italic 400 22px/1.35 var(--serif); color: var(--ink); margin: 0 0 14px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 8px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); text-decoration: none; font-size: 18px; margin-right: auto; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.top nav { display: flex; gap: 2px; align-items: center; }
.top nav a { color: var(--ink); text-decoration: none; font-size: 15px; padding: 10px 12px; border-radius: 10px; }
.top nav a:hover { background: var(--line); }
.top nav a.get { background: var(--ink); color: var(--paper); margin-left: 6px; padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.top nav a.get:hover { background: var(--navy-3); }
@media (max-width: 640px) { .top nav .opt { display: none; } }

/* Store badges: the official artwork. Google's PNG carries its own padding, so it is taller to match Apple's visible height. */
.store { display: inline-block; line-height: 0; transition: transform .12s var(--enter); }
.store:active { transform: scale(.98); }
.store img { height: 54px; width: auto; }
.store[data-store="android"] img { height: 66px; margin: -6px -8px; }
/* Text badge, used where the stores are not the destination (the guides' closing card). */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 10px; }
.badge { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 20px; border-radius: 14px; background: var(--ink); color: var(--paper); text-decoration: none; line-height: 1.15; transition: transform .12s var(--enter); }
.badge:active { transform: scale(.98); }
.badge small { display: block; font-size: 12px; opacity: .85; }
.badge strong { font-size: 18px; }
.on-navy .badge { background: var(--paper); color: var(--navy); }

/* Navy sections */
.on-navy { background: var(--navy); color: var(--on-navy); }
.on-navy h1, .on-navy h2, .on-navy h3 { color: var(--on-navy); }
.on-navy .note, .on-navy .lede, .on-navy .kicker { color: var(--on-navy-muted); }
.on-navy a:not(.badge) { color: #ffd38a; }

/* Hero: the headline and the mark performing one exam moment */
.hero { position: relative; overflow: hidden; background: radial-gradient(110% 70% at 75% 0%, var(--navy-3) 0%, var(--navy) 62%); }
.hero .wrap { display: grid; gap: 36px; padding-top: 40px; padding-bottom: 56px; align-items: center; }
.hero h1 { max-width: 11em; }
.demo { width: min(58vw, 250px); margin: 0 auto; order: -1; }
.demo canvas { display: block; width: 100%; aspect-ratio: 1; }
.caption { min-height: 112px; text-align: center; margin-top: 4px; }
.caption .who { font-size: 13px; font-weight: 600; color: var(--on-navy-muted); min-height: 20px; margin: 0 0 6px; }
.caption .who.voice::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); margin-right: 7px; vertical-align: 1px; }
.caption .line { font: italic 400 22px/1.3 var(--serif); color: var(--on-navy); min-height: 58px; margin: 0; }
.caption .line.band { font-style: normal; font-size: 26px; }
.caption .line.band b { color: var(--amber); font-weight: 500; }
.caption .sub { font-size: 13px; color: var(--on-navy-muted); min-height: 20px; margin: 6px 0 0; }
.caption .cursor { display: inline-block; width: 2px; height: .9em; background: var(--coral); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 1.05fr .95fr; gap: 48px; padding-top: 80px; padding-bottom: 96px; }
  .demo { width: 440px; order: 0; }
  .caption .line { font-size: 24px; }
}
/* The one page-load sequence: each headline word rises out of its own line box while the dots fly in,
   then the lede, the badges and the note follow. site.js splits the words; without it the headline is plain. */
.hero h1.rise .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .03em .14em; margin: 0 -.03em -.14em; }
.hero h1.rise .w > span { display: inline-block; transform: translateY(110%); animation: rise .95s var(--enter) forwards; animation-delay: calc(.15s + var(--i) * 60ms); }
.js .hero .lede { animation: lift .8s var(--enter) .55s both; }
.js .hero .badges { animation: lift .8s var(--enter) .7s both; }
.js .hero .note { animation: lift .8s var(--enter) .8s both; }
@keyframes rise { to { transform: none; } }
@keyframes lift { from { opacity: 0; transform: translateY(14px); } }

/* Sections */
section { padding: 80px 0; }
section > .wrap > h2 + .lede { color: var(--muted); }

/* How it works: a sticky phone whose screen wipes to the step in view, beside a timeline of the test that
   fills with the scroll. Coral glows behind the voice steps, amber behind the report (docs/design-system.md). */
@property --glow { syntax: '<color>'; inherits: true; initial-value: rgba(30, 79, 184, .14); }
.story { display: grid; gap: 24px; margin-top: 24px; --glow: rgba(30, 79, 184, .14); transition: --glow .7s var(--enter); }
.story[data-tone="voice"] { --glow: rgba(240, 119, 91, .30); }
.story[data-tone="band"] { --glow: rgba(242, 181, 68, .36); }
.story .stage { display: none; }
.step { padding: 8px 0 44px; }
.step .chips { margin-top: 14px; }
.step .phone { margin-top: 24px; }
.phone { width: min(74vw, 300px); margin: 0 auto; padding: 10px; border-radius: 46px; background: #0a0f1a; box-shadow: 0 1px 0 #2a3448 inset, 0 36px 70px -24px rgba(11, 31, 58, .5); }
.phone img { border-radius: 36px; width: 100%; aspect-ratio: 560 / 1068; object-fit: cover; object-position: top; background: var(--navy); }
.screens { position: relative; aspect-ratio: 560 / 1068; border-radius: 36px; overflow: hidden; background: var(--navy); }
/* Future screens wait below (clipped), the current one is open, past ones sink and dim under it, so the
   wipe runs up on the way down and back down on the way up. */
.screens img { position: absolute; inset: 0; height: 100%; border-radius: 0; z-index: 3; clip-path: inset(100% 0 0 0); transition: clip-path .75s var(--move), transform .75s var(--move), filter .75s var(--move); }
.screens img.on { z-index: 2; clip-path: inset(0); }
.screens img.past { z-index: 1; clip-path: inset(0); transform: translateY(-5%) scale(.93); filter: brightness(.45); }
.rail { position: relative; padding-left: 24px; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rail a { position: relative; display: block; padding: 3px 0; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .3s var(--enter); }
.rail a:hover { color: var(--ink); }
.rail a::before { content: ""; position: absolute; left: -24px; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); transition: background .3s var(--enter), border-color .3s var(--enter), transform .3s var(--enter); }
.rail li.done a::before { background: var(--ink); border-color: var(--ink); }
.rail li.on a { color: var(--ink); }
.rail li.on a::before { background: var(--ink); border-color: var(--ink); transform: scale(1.3); }
.rail li[data-tone="voice"].on a::before { background: var(--coral); border-color: var(--coral); }
.rail li[data-tone="band"].on a::before { background: var(--amber); border-color: var(--amber); }
.rail .track { position: absolute; left: -1px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rail .fill { position: absolute; inset: 0; background: var(--ink); transform-origin: top; transform: scaleY(0); }
.device { position: relative; display: grid; place-items: center; perspective: 1400px; }
.device .glow { position: absolute; inset: -6% -24%; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }
.device .phone { position: relative; width: min(300px, calc((100vh - 150px) * .5)); transform: rotateY(calc((var(--p, .5) - .5) * -9deg)) rotateX(2deg); }
@media (min-width: 900px) {
  .story { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
  .story .stage { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 32px; position: sticky; top: 64px; height: calc(100vh - 64px); align-self: start; }
  .step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 0; max-width: 32em; }
  .step .phone { display: none; }
  .js .step { opacity: .3; transition: opacity .45s var(--enter); }
  .js .step.on { opacity: 1; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.chips li { font-size: 14px; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--text); }

/* Which answer: the marking, tried by hand */
.quiz { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quiz .said { font-size: clamp(22px, 3vw, 28px); margin: 24px 0 20px; }
.answers { display: grid; gap: 14px; }
@media (min-width: 760px) { .answers { grid-template-columns: 1fr 1fr; } }
.answer { text-align: left; font: inherit; color: var(--text); background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; cursor: pointer; transition: border-color .15s var(--enter), transform .12s var(--enter); }
.answer:hover { border-color: var(--ink); }
.answer:active { transform: scale(.99); }
.answer .tag { display: block; font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.answer[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.answer.right { border-color: var(--success); box-shadow: 0 0 0 1px var(--success) inset; }
.answer:disabled { cursor: default; }
.verdict { margin-top: 20px; border-radius: 18px; background: var(--info); padding: 20px 22px; }
.verdict .lead { font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.fix { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid rgba(11, 31, 58, .1); }
.fix .before { color: var(--muted); }
.fix .before mark { background: var(--coral-soft); color: var(--ink); text-decoration: line-through; text-decoration-color: var(--coral); padding: 1px 3px; border-radius: 4px; }
.fix .after mark { background: var(--success-soft); color: var(--ink); padding: 1px 3px; border-radius: 4px; }
.fix .why { font-size: 14px; color: var(--muted); }
.quiz .note { margin-top: 14px; }
.answer .err { text-decoration: underline wavy transparent; text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: text-decoration-color .4s var(--enter); }
.marked .answer .err { text-decoration-color: var(--coral); }
.marked .answer .err:nth-of-type(3) { transition-delay: .6s; }
.marked .answer .err:nth-of-type(4) { transition-delay: 1.2s; }
.fix .before mark { text-decoration: none; background: linear-gradient(var(--coral), var(--coral)) no-repeat 0 58% / 100% 2px, var(--coral-soft); }
.fix .after mark { background: linear-gradient(var(--success-soft), var(--success-soft)) no-repeat 0 0 / 100% 100%; }
.js .verdict .fix { opacity: 0; transform: translateY(8px); }
.js .fix .before mark { background-size: 0% 2px, auto; }
.js .fix .after mark { background-size: 0% 100%; }
.marked .verdict .fix { animation: show .5s var(--enter) forwards; animation-delay: calc(.1s + var(--i) * .6s); }
.marked .fix .before mark { animation: strike .45s var(--move) forwards; animation-delay: calc(.35s + var(--i) * .6s); }
.marked .fix .after mark { animation: write .5s var(--enter) forwards; animation-delay: calc(.6s + var(--i) * .6s); }
@keyframes show { to { opacity: 1; transform: none; } }
@keyframes strike { to { background-size: 100% 2px, auto; } }
@keyframes write { to { background-size: 100% 100%; } }

/* Pricing: one panel, three ways in */
.plans { display: grid; margin-top: 28px; border: 1px solid var(--navy-line); border-radius: 24px; overflow: hidden; background: var(--navy-2); }
.plan { padding: 26px 26px 28px; border-top: 1px solid var(--navy-line); }
.plan:first-child { border-top: 0; }
.plan h3 { margin-bottom: 4px; }
.plan .price { font: 400 40px/1.1 var(--serif); color: var(--on-navy); margin: 10px 0 2px; }
.plan .price span { font: 400 16px/1 var(--sans); color: var(--on-navy-muted); }
.plan .price + .price { margin-top: 6px; }
.plan ul { padding-left: 18px; margin: 14px 0 0; }
.plan li { margin: 6px 0; color: var(--on-navy); }
.plan.plus { background: var(--navy-3); }
@media (min-width: 820px) {
  .plans { grid-template-columns: 1fr 1.1fr 1fr; }
  .plan { border-top: 0; border-left: 1px solid var(--navy-line); }
  .plan:first-child { border-left: 0; }
}
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 16px; }
th, td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--navy-line); color: var(--on-navy); }
th { font-weight: 600; }
.n { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.costs { max-width: 520px; margin-top: 36px; }
.costs h3 { font: 600 17px/1.3 var(--sans); }

/* Closing section: the scroll gathers the dots into the nine */
.closer .wrap { display: grid; gap: 20px; align-items: center; }
.closer h2 { max-width: 14em; }
.nine { width: min(56vw, 220px); margin: 0 auto; }
.nine canvas { display: block; width: 100%; aspect-ratio: 1; }
@media (min-width: 900px) { .closer .wrap { grid-template-columns: 360px 1fr; gap: 64px; } .nine { width: 340px; } }

/* Guides list (home and /blog/) */
.guides { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.guides li { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.guides .kicker { margin: 0; }
.guides a { font: 500 24px/1.2 var(--serif); color: var(--ink); text-decoration: none; }
.guides a:hover { text-decoration: underline; }
.guides p { margin: 2px 0 0; color: var(--muted); max-width: 40em; }
.guides li .meta { font-size: 14px; color: var(--muted); margin: 0; }
.guides li > p:not(.kicker) { margin: 2px 0 0; }
.guides li .kicker { font: 600 14px/1.4 var(--sans); color: var(--muted); }
@media (min-width: 760px) {
  .guides li { grid-template-columns: 7rem 1fr auto; grid-template-rows: auto auto; align-items: start; column-gap: 24px; }
  .guides .kicker { grid-column: 1; grid-row: 1; padding-top: 6px; }
  .guides a { grid-column: 2; grid-row: 1; }
  .guides p:not(.kicker) { grid-column: 2; grid-row: 2; }
  .guides .meta { grid-column: 3; grid-row: 1; padding-top: 6px; }
}

/* FAQ */
details { border-bottom: 1px solid var(--line); padding: 4px 0; }
summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 14px 32px 14px 0; list-style: none; position: relative; min-height: 48px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 6px; top: 22px; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--move); }
details[open] summary::after { transform: rotate(-135deg); top: 26px; }
details p { color: var(--text); max-width: 40em; }
@supports selector(::details-content) {
  details:not(.toc) { interpolate-size: allow-keywords; }
  details:not(.toc)::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--move), content-visibility .3s allow-discrete; }
  details:not(.toc)[open]::details-content { block-size: auto; }
}

/* Prose pages: guides and legal */
.prose { padding: 40px 0 80px; }
.prose h1 { font-size: clamp(34px, 5.2vw, 52px); margin-top: 6px; }
.prose .meta { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.prose p, .prose li { font: 400 18px/1.68 var(--serif); color: var(--text); }
.prose p { margin-bottom: 18px; }
.prose li { margin: 6px 0; }
.prose h2 { font-size: 28px; margin: 40px 0 10px; }
.prose em { font-style: italic; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose .legal p, .prose .legal li { font: 400 17px/1.6 var(--sans); }
.prose .legal h2 { font-size: 24px; }
.inshort { background: var(--cue); border-top: 6px solid var(--navy); border-radius: 16px; padding: 18px 22px 8px; margin: 0 0 28px; }
.inshort h2 { font: 600 15px/1.3 var(--sans); color: var(--ink); margin: 0 0 8px; }
.inshort ul { padding-left: 18px; margin: 0; }
.inshort li { font-size: 17px; line-height: 1.5; }
.callout { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 12px; padding: 16px 18px; margin: 24px 0; }
.closing { background: var(--navy); color: var(--on-navy); border-radius: 20px; padding: 26px 26px 24px; margin: 40px 0 0; }
.closing p { font: 400 18px/1.55 var(--serif); color: var(--on-navy); margin-bottom: 10px; }
.closing .note { color: var(--on-navy-muted); font-family: var(--sans); font-size: 14px; }
.closing .badge { margin-top: 12px; }
.related { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.related h2 { font: 600 15px/1.3 var(--sans); margin: 0 0 8px; }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { font: 500 19px/1.4 var(--serif); margin: 4px 0; }
.related a { color: var(--ink); }

/* Guides: a 40rem serif column (about 70 characters), the contents list in the left margin on wide
   screens and folded above the text on narrow ones, and the reading progress under the header. */
.readbar { position: sticky; top: 64px; z-index: 4; height: 2px; margin-bottom: -2px; }
.readbar span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.guide { max-width: calc(40rem + 40px); margin: 0 auto; padding: 36px 20px 88px; }
.guide-head .kicker a { color: inherit; }
.guide-head h1 { font-size: clamp(36px, 5.4vw, 56px); line-height: 1.06; text-wrap: balance; margin: 6px 0 14px; }
.guide-head .meta { color: var(--muted); font-size: 15px; margin: 0 0 24px; }
.toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; margin: 0 0 32px; }
.toc summary { font: 600 15px/1.3 var(--sans); padding: 14px 32px 14px 0; }
.toc-list { position: relative; padding: 0 0 16px 18px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 5px 0; font: 400 15px/1.35 var(--sans); color: var(--muted); text-decoration: none; text-wrap: pretty; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current] { color: var(--ink); font-weight: 600; }
.toc .track { position: absolute; left: 0; top: 6px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.toc .fill { position: absolute; inset: 0; background: var(--ink); transform-origin: top; transform: scaleY(0); transition: transform .35s var(--enter); }
.guide-body { font: 400 18px/1.7 var(--serif); color: var(--text); }
.guide-body > p, .guide-body > ul, .guide-body > ol, .guide-body details p { text-wrap: pretty; }
.guide-body p { margin: 0 0 1.1em; }
.guide-body h2 { font-size: clamp(25px, 3vw, 30px); line-height: 1.2; text-wrap: balance; margin: 2em 0 .55em; scroll-margin-top: 96px; }
.guide-body ul, .guide-body ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.guide-body li { margin: .4em 0; padding-left: .2em; }
.guide-body li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.guide-body a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.guide-body a:hover { text-decoration-color: currentColor; }
.guide-body strong { font-weight: 500; color: var(--ink); }
.guide-body em { font-style: italic; }
/* An example answer on its own line is spoken English: the voice colour marks it, as in the app. */
.guide-body .spoken { position: relative; margin: 1.4em 0; padding: 0 0 0 22px; font-size: 1.06em; line-height: 1.55; color: var(--ink); }
.guide-body .spoken::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 3px; border-radius: 3px; background: var(--coral); }
.guide-body .inshort { margin: 0 0 36px; }
.guide-body .inshort h2 { font: 600 15px/1.3 var(--sans); margin: 0 0 8px; }
.guide-body .inshort li { font-size: 17px; line-height: 1.5; }
.guide-body summary { font: 600 17px/1.4 var(--sans); }
.guide-body .closing p { font-size: 18px; line-height: 1.55; color: var(--on-navy); }
.guide-body .closing .note { font: 400 14px/1.5 var(--sans); color: var(--on-navy-muted); }
.guide-body .related { margin-top: 40px; }
.guide-body .related h2 { font: 600 15px/1.3 var(--sans); margin: 0 0 4px; }
.guide-body .related li { padding: 14px 0; margin: 0; border-bottom: 1px solid var(--line); }
.guide-body .related a { font: 500 20px/1.3 var(--serif); text-decoration: none; }
.guide-body .related a:hover { text-decoration: underline; }
.guide-body .related p { font: 400 15px/1.5 var(--sans); color: var(--muted); margin: 4px 0 0; }
::selection { background: var(--amber-soft); color: var(--ink); }
@media (min-width: 760px) { .guide-body { font-size: 19px; } }
@media (min-width: 1100px) {
  .readbar { display: none; }
  .guide { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40rem) minmax(0, 1fr); grid-template-areas: ". head ." "toc body ."; column-gap: 64px; padding-top: 56px; }
  .guide-head { grid-area: head; }
  .guide-body { grid-area: body; }
  .toc { grid-area: toc; justify-self: end; width: 100%; max-width: 236px; position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 130px); overflow: auto; border: 0; margin: 0; }
  .toc summary { padding: 4px 0 12px; cursor: default; pointer-events: none; }
  .toc summary::after { display: none; }
}

/* Footer */
footer { border-top: 1px solid var(--line); padding: 44px 0 60px; font-size: 15px; color: var(--muted); }
footer .wrap { display: grid; gap: 18px; }
footer .brand { font-size: 17px; margin: 0; }
footer nav { display: flex; flex-wrap: wrap; gap: 2px 18px; }
footer nav a { color: var(--ink); padding: 6px 0; text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
footer p { margin: 0; max-width: 60em; }

/* The one page-load sequence lives in the hero. Everything else moves only when the reader acts. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .story, .screens img, .rail a, .rail a::before, .js .step, .toc .fill, .answer .err { transition: none; }
  .device .phone { transform: none; }
  .caption .cursor, .js .hero .lede, .js .hero .badges, .js .hero .note { animation: none; }
  .answer, .badge { transition: none; }
  .marked .verdict .fix, .marked .fix .before mark, .marked .fix .after mark { animation: none; opacity: 1; transform: none; background-size: 100% 2px, auto; }
  .marked .fix .after mark { background-size: 100% 100%; }
  details:not(.toc)::details-content { transition: none; }
}