/* Colour values copied from the app's light palette (app/Shablau/DesignSystem/Tokens.swift,
   "Ink and Form"). Each token is named after its job on this site. Two tokens with the same value
   stay separate when they have different jobs, so a change to one job does not change another. */

@font-face {
  font-family: "Young Serif";
  src: url("/fonts/YoungSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/SchibstedGrotesk-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Surfaces */
  --page-bg: #f5f3ee;
  --header-bg: rgb(245 243 238 / 0.92);
  --footer-bg: #f8f5ec;
  --demo-band-bg: #ffffff;
  --section-rule: #e4e0d6;
  --item-rule: #d9d6ce;
  --accent-line: #9c3a2a;
  --toc-rule: #d9d6ce;
  --toc-rule-hover: #9c3a2a;
  --phone-frame: #1e2230;
  --phone-shadow: rgb(30 34 48 / 0.22);
  --phone-shadow-near: rgb(30 34 48 / 0.08);

  /* Text */
  --text-heading: #1e2230;
  --text-body: #3c4152;
  --text-muted: #575c6b;
  --text-kicker: #9c3a2a;
  --list-numeral: #9c3a2a;

  /* Links and controls */
  --link-text: #1e2230;
  --link-underline: #9c3a2a;
  --button-bg: #9c3a2a;
  --button-bg-hover: #8a3324;
  --button-edge: #6e281d;
  --button-text: #ffffff;
  --pill-stroke: #1e2230;
  --pill-bg: #ffffff;
  --pill-text: #1e2230;
  --focus-ring: #1e2230;

  /* Hero art */
  --hero-disc: #f3dc97;
  --hero-ring: #1e2230;
  --tile-bg: #ffffff;
  --tile-stroke: #1e2230;
  --tile-text: #1e2230;
  --tile-ochre-bg: #f3dc97;
  --tile-pass-bg: #cfe8d6;
  --tile-slate-text: #56628f;
  --hero-fact-mark: #2f6b4f;

  /* The example round (the app's Practice screen) */
  --demo-screen-bg: #ffffff;
  --chart-bg: #f8f5ec;
  --pitch-native: #56628f;
  --pitch-mine: #1e2230;
  --sound-letter: #1e2230;
  --sound-score: #1e2230;
  --sound-rule: #1e2230;
  --sound-off: #7a4e0e;
  --take-label-bg: #f5f3ee;
  --take-label-text: #575c6b;
  --tip-sound: #7a4e0e;
  --panel-again-bg: #f8ecd4;
  --panel-pass-bg: #cfe8d6;
  --panel-pass-pulse: #a6d3b5;
  --verdict-again: #7a4e0e;
  --verdict-pass: #2f6b4f;
  --panel-reason: #1e2230;
  --panel-change: #434857;
  --ring-again-track: #dfc28c;
  --ring-again: #7a4e0e;
  --ring-pass-track: #e4e0d6;
  --ring-pass: #2f6b4f;
  --ring-pass-disc: #2f6b4f;
  --ring-pass-number: #ffffff;
  --ring-number: #1e2230;
  --ring-tick: #1e2230;
  --badge-bg: #2f6b4f;
  --badge-text: #ffffff;
  --spark-a: #2f6b4f;
  --spark-b: #e0a33a;
  --confetti-1: #e0a33a;
  --confetti-2: #2f6b4f;
  --confetti-3: #56628f;
  --confetti-4: #9c3a2a;
  --confetti-5: #f3dc97;
  --demo-pause-bg: #ffffff;
  --bar-track: #e4e0d6;
  --bar-fill: #1e2230;
  --bar-pass-line: #1e2230;

  /* Sounds */
  --length-consonant: #e4e0d6;
  --length-consonant-text: #1e2230;
  --length-vowel: #1e2230;
  --length-vowel-text: #ffffff;
  --play-bg: #1e2230;
  --play-icon: #ffffff;
  --sound-list-word: #1e2230;

  /* Privacy panel */
  --privacy-bg: #1e2230;
  --privacy-heading: #ffffff;
  --privacy-text: #e4e0d6;
  --privacy-kicker: #f3dc97;
  --privacy-rule: rgb(255 255 255 / 0.2);
  --privacy-icon: #f3dc97;
  --privacy-link: #ffffff;
  --privacy-link-underline: #f3dc97;
  --privacy-focus-ring: #ffffff;

  /* Join */
  --join-bg: #cfe8d6;
  --join-rule: #94c4a4;
  --join-step-number: #2f6b4f;

  /* Type */
  --font-display: "Young Serif", Georgia, serif;
  --font-body: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Layout. Side gutter: 16 phone, 24 tablet, 32 desktop, as in the app. */
  --content-max: 1160px;
  --gutter: 16px;
}
@media (min-width: 600px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}

/* ---- Base ---- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--footer-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: break-word;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { color: var(--text-heading); }

a { color: var(--link-text); text-decoration-color: var(--link-underline); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  font-weight: 600;
  z-index: 30;
}
.skip:focus { top: 12px; }

.kicker, .eyebrow {
  color: var(--text-kicker);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The main button: the app's Falu red pill with a 4 px edge under it. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--button-bg);
  box-shadow: 0 4px 0 var(--button-edge);
  color: var(--button-text);
  font-weight: 650;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.button:hover { background: var(--button-bg-hover); }
.button:active { transform: translateY(4px); box-shadow: 0 0 0 var(--button-edge); }
.button-large { min-height: 60px; padding: 14px 28px; font-size: 1.1875rem; }
.button-small { min-height: 40px; padding: 6px 16px; font-size: 0.9375rem; box-shadow: 0 3px 0 var(--button-edge); }
.button-icon { flex: none; fill: currentColor; }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--link-text);
  font-weight: 600;
}

/* ---- Header and footer ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  border-bottom: 1px solid var(--section-rule);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding-block: 10px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-decoration: none;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.header-nav { display: none; margin-left: auto; }
.header-nav ul { display: flex; gap: 4px; list-style: none; padding: 0; }
.header-nav a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--text-body);
  font-weight: 550;
  font-size: 0.9375rem;
  text-decoration: none;
}
.header-nav a:hover { color: var(--text-heading); text-decoration: underline; text-decoration-color: var(--link-underline); }
@media (min-width: 760px) {
  .header-nav { display: block; }
}

.site-footer { background: var(--footer-bg); border-top: 1px solid var(--section-rule); }
.footer-grid {
  display: grid;
  gap: 20px 40px;
  padding-block: 40px 32px;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1fr auto; align-items: start; }
  .footer-legal { grid-column: 1 / -1; }
}
.footer-about { display: flex; flex-direction: column; gap: 8px; max-width: 26em; }
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-size: 1.25rem;
}
.footer-brand img { border-radius: 6px; }
.site-footer ul { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 0; }
.site-footer nav a { color: var(--text-body); display: inline-block; padding-block: 6px; }
.footer-legal { padding-top: 16px; border-top: 1px solid var(--section-rule); font-size: 0.875rem; }

/* ---- Sections shared by the home page ---- */

.section { padding-block: clamp(64px, 9vw, 120px); }
.section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 3.125rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 38em; }
.section-head > p:not(.kicker) { font-size: 1.125rem; }
.section-head-center { margin-inline: auto; text-align: center; align-items: center; }

/* Phone frames around app screenshots. Corner radii are shares of the width and height, so the
   frame keeps its shape at every size. */
.phone {
  padding: 2.4%;
  border-radius: 15% / 6.9%;
  background: var(--phone-frame);
  box-shadow: 0 24px 48px -20px var(--phone-shadow), 0 2px 6px var(--phone-shadow-near);
}
.phone img { width: 100%; border-radius: 13% / 6%; }

/* ---- Hero ---- */

.hero { padding-block: clamp(32px, 6vw, 88px) clamp(56px, 8vw, 104px); overflow: clip; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.12fr 0.88fr; gap: 40px; }
}
.hero-text { display: flex; flex-direction: column; gap: 20px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, 10.4vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
@media (min-width: 600px) {
  .hero h1 { font-size: clamp(2.75rem, 6.4vw, 3.875rem); }
}
.lead { font-size: clamp(1.1875rem, 2.4vw, 1.3125rem); line-height: 1.5; max-width: 31em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  list-style: none;
  padding: 0;
  margin-top: 4px;
}
.hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-heading);
  font-size: 0.9375rem;
  font-weight: 550;
}
.hero-facts li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--hero-fact-mark);
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
}
.hero-note { color: var(--text-muted); font-size: 0.9375rem; }

.hero-art {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1 / 1.02;
  margin-inline: auto;
}
.hero-art > * { position: absolute; }
.art-disc {
  inset: 9% 3% 5% 5%;
  border-radius: 50%;
  background: var(--hero-disc);
}
.art-ring {
  inset: 3% 0 0 0;
  border: 2px dashed var(--hero-ring);
  border-radius: 50%;
  opacity: 0.22;
}
.art-phone { top: 0; right: 9%; width: 45%; }
.art-phone .phone { rotate: 5deg; }
.art-raven { left: 2%; bottom: 3%; width: 41%; filter: drop-shadow(0 12px 14px rgb(30 34 48 / 0.18)); }
.tile {
  display: grid;
  place-items: center;
  min-width: 2.2em;
  height: 2.2em;
  padding-inline: 0.35em;
  border: 2px solid var(--tile-stroke);
  border-radius: 0.55em;
  background: var(--tile-bg);
  color: var(--tile-text);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.4vw, 1.875rem);
  line-height: 1;
  box-shadow: 0 4px 0 var(--tile-stroke);
}
.tile-a { top: 6%; left: 12%; rotate: -8deg; background: var(--tile-ochre-bg); }
.tile-b { top: 30%; left: 2%; rotate: 6deg; color: var(--tile-slate-text); }
.tile-c { bottom: 18%; right: 2%; rotate: 9deg; background: var(--tile-pass-bg); }
.tile-d { top: 46%; right: 0; rotate: -6deg; }
.tile-e { top: 4%; right: 2%; rotate: 10deg; color: var(--tile-slate-text); }

@media (prefers-reduced-motion: no-preference) {
  .art-disc { animation: grow-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .art-ring { animation: fade-in 1.2s 0.3s ease both; }
  .art-phone .phone { animation: phone-in 0.9s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .art-raven { animation: raven-in 0.8s 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
  .tile { animation: tile-in 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
  .tile-a { animation-delay: 0.65s; }
  .tile-b { animation-delay: 0.75s; }
  .tile-c { animation-delay: 0.85s; }
  .tile-d { animation-delay: 0.95s; }
  .tile-e { animation-delay: 1.05s; }
}
@keyframes grow-in { from { scale: 0.6; opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes phone-in { from { translate: 0 60px; rotate: 12deg; opacity: 0; } }
@keyframes raven-in { from { translate: -20px 30px; scale: 0.85; opacity: 0; } }
@keyframes tile-in { from { scale: 0.3; opacity: 0; } }

/* ---- Reveal: blocks rise into place once (src/site.js adds .is-in) ---- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    translate: 0 28px;
    transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .js .reveal.is-in { opacity: 1; translate: 0 0; }
  .js .steps .reveal:nth-child(2), .js .pair .reveal:nth-child(2), .js .privacy-facts .reveal:nth-child(2), .js .screens .reveal:nth-child(2) { transition-delay: 0.1s; }
  .js .steps .reveal:nth-child(3), .js .privacy-facts .reveal:nth-child(3), .js .screens .reveal:nth-child(3) { transition-delay: 0.2s; }
  .js .screens .reveal:nth-child(4) { transition-delay: 0.3s; }
}

/* ---- The example round ---- */

.demo-section { background: var(--demo-band-bg); border-block: 1px solid var(--section-rule); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .demo-grid { grid-template-columns: 1fr minmax(0, 420px); gap: 72px; }
}
.demo-legend { display: flex; flex-direction: column; list-style: none; padding: 0; margin-top: 12px; border-bottom: 1px solid var(--item-rule); }
.demo-legend li { display: flex; gap: 14px; align-items: baseline; padding-block: 12px; border-top: 1px solid var(--item-rule); }
.legend-num {
  flex: none;
  width: 1.25rem;
  color: var(--list-numeral);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}
.says-pass { color: var(--verdict-pass); font-family: var(--font-display); }

.demo { position: relative; width: 100%; max-width: 420px; justify-self: center; }
/* The example sits in the same dark phone frame as the screenshots, so it reads as the app's screen. */
.demo-screen {
  padding: 20px 16px 16px;
  border: 8px solid var(--phone-frame);
  border-radius: 46px;
  background: var(--demo-screen-bg);
  box-shadow: 0 30px 60px -30px var(--phone-shadow), 0 2px 8px var(--phone-shadow-near);
}
.demo-word .word {
  color: var(--text-heading);
  font-family: var(--font-display);
  font-size: 3.25rem;
  line-height: 1;
}
.demo-word .gloss { color: var(--text-muted); font-size: 1.0625rem; margin-top: 4px; }
.demo-stage { display: grid; gap: 28px; margin-top: 16px; }
.take { display: flex; flex-direction: column; gap: 12px; position: relative; }
.take-label {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--take-label-bg);
  color: var(--take-label-text);
  font-size: 0.8125rem;
  font-weight: 650;
}

.chart { padding: 10px 10px 12px; border-radius: 18px; background: var(--chart-bg); }
.pitch { width: 100%; height: auto; overflow: visible; }
.pitch path { fill: none; stroke-linecap: round; }
.pitch-native { stroke: var(--pitch-native); stroke-width: 3.5; stroke-dasharray: 0.1 7; }
.pitch-mine { stroke: var(--pitch-mine); stroke-width: 3; }
.sounds {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.35fr 1fr;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin-top: 4px;
  text-align: center;
}
.sound {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0 6px;
  border-radius: 12px;
}
.sound .letter {
  color: var(--sound-letter);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.1;
}
.sound .letter::after {
  content: "";
  display: block;
  width: 1.3em;
  height: 3px;
  margin: 6px auto 0;
  border-radius: 2px;
  background: var(--sound-rule);
}
.sound .score { color: var(--sound-score); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sound.is-off { outline: 2px dashed var(--sound-off); outline-offset: -2px; }
.sound.is-off .letter, .sound.is-off .score { color: var(--sound-off); }
.sound.is-off .letter::after { background: var(--sound-off); }

.tip { display: flex; flex-direction: column; gap: 4px; font-size: 0.9375rem; line-height: 1.45; }
.tip-head { color: var(--text-heading); font-weight: 700; font-size: 1rem; }
.tip-sound { color: var(--tip-sound); margin-left: 6px; }

.bars { display: flex; flex-direction: column; gap: 6px; }
.bars ul { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; }
.bars li { display: grid; grid-template-columns: 1.8rem 1fr 2rem 2.6rem; gap: 10px; align-items: center; font-size: 0.9375rem; }
.bar-letter { color: var(--sound-letter); font-weight: 600; }
.bar { position: relative; height: 8px; border-radius: 4px; background: var(--bar-track); }
.bar::after { content: ""; position: absolute; left: 80%; top: -3px; width: 2px; height: 14px; background: var(--bar-pass-line); }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--bar-fill); }
.bar .w97 { width: 97%; }
.bar .w92 { width: 92%; }
.bar .w95 { width: 95%; }
.bar .w96 { width: 96%; }
.bar-num { color: var(--sound-score); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bar-word { color: var(--text-muted); }

.panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 16px 16px 16px 18px;
  border-radius: 22px;
}
.panel-again { background: var(--panel-again-bg); }
.panel-pass { background: var(--panel-pass-bg); }
.panel-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.verdict { font-family: var(--font-display); font-size: 2.125rem; line-height: 1.05; }
.panel-again .verdict { color: var(--verdict-again); }
.panel-pass .verdict { color: var(--verdict-pass); font-size: clamp(2rem, 10vw, 2.5rem); }
.reason { color: var(--panel-reason); font-size: 0.9375rem; }
.change { color: var(--panel-change); font-size: 0.9375rem; }
.badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 0.8125rem;
  font-weight: 650;
}
.badge svg { fill: currentColor; }
.ring { flex: none; width: 68px; height: 68px; overflow: visible; }
.ring circle { fill: none; stroke-width: 7; }
.ring .ring-arc { stroke-linecap: round; }
.panel-again .ring-track { stroke: var(--ring-again-track); }
.panel-again .ring-arc { stroke: var(--ring-again); --arc: 62.1; }
.panel-pass .ring-track { stroke: var(--ring-pass-track); }
.panel-pass .ring-arc { stroke: var(--ring-pass); --arc: 150.3; }
.ring .ring-disc { fill: var(--ring-pass-disc); stroke: none; }
.ring-tick { stroke: var(--ring-tick); stroke-width: 3; stroke-linecap: round; }
.ring-num { fill: var(--ring-number); font-family: var(--font-body); font-size: 19px; font-weight: 600; }
.panel-pass .ring-num { fill: var(--ring-pass-number); }

.sparks, .confetti { position: absolute; pointer-events: none; }
.sparks { right: 50px; top: 50%; width: 0; height: 0; }
.sparks i, .confetti i { position: absolute; display: block; opacity: 0; }
.sparks i { width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--spark-a); }
.sparks i:nth-child(even) { background: var(--spark-b); }
.sparks i:nth-child(1) { --x: 0px; --y: -54px; }
.sparks i:nth-child(2) { --x: 38px; --y: -38px; }
.sparks i:nth-child(3) { --x: 54px; --y: 0px; }
.sparks i:nth-child(4) { --x: 38px; --y: 38px; }
.sparks i:nth-child(5) { --x: 0px; --y: 54px; }
.sparks i:nth-child(6) { --x: -38px; --y: 38px; }
.sparks i:nth-child(7) { --x: -54px; --y: 0px; }
.sparks i:nth-child(8) { --x: -38px; --y: -38px; }
.confetti { inset: -30px -8px 40% -8px; overflow: hidden; }
.confetti i { top: 0; width: 9px; height: 5px; border-radius: 1px; background: var(--confetti-1); }
.confetti i:nth-child(5n + 2) { background: var(--confetti-2); }
.confetti i:nth-child(5n + 3) { background: var(--confetti-3); }
.confetti i:nth-child(5n + 4) { background: var(--confetti-4); }
.confetti i:nth-child(5n + 5) { background: var(--confetti-5); }
.confetti i:nth-child(1) { left: 6%; --fall: 210px; --spin: 300deg; }
.confetti i:nth-child(2) { left: 14%; --fall: 160px; --spin: -240deg; }
.confetti i:nth-child(3) { left: 22%; --fall: 230px; --spin: 420deg; }
.confetti i:nth-child(4) { left: 31%; --fall: 180px; --spin: -360deg; }
.confetti i:nth-child(5) { left: 39%; --fall: 250px; --spin: 200deg; }
.confetti i:nth-child(6) { left: 47%; --fall: 170px; --spin: -300deg; }
.confetti i:nth-child(7) { left: 55%; --fall: 220px; --spin: 380deg; }
.confetti i:nth-child(8) { left: 63%; --fall: 190px; --spin: -200deg; }
.confetti i:nth-child(9) { left: 71%; --fall: 240px; --spin: 260deg; }
.confetti i:nth-child(10) { left: 79%; --fall: 165px; --spin: -420deg; }
.confetti i:nth-child(11) { left: 87%; --fall: 215px; --spin: 340deg; }
.confetti i:nth-child(12) { left: 94%; --fall: 185px; --spin: -280deg; }

/* The pause control is a checkbox, so it works without the script. It shows only when the example moves. */
.demo-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.demo-pause { display: none; }
.when-paused { display: none; }

/* Without motion (Reduce Motion), both tries stand one under the other and nothing moves. With
   motion, the two tries share one place and play as a 14 second loop: the first try scores sound
   by sound and ends on Again, then the second try ends on Shablau!. */
@media (prefers-reduced-motion: reduce) {
  .take-pass { padding-top: 24px; border-top: 1px solid var(--section-rule); }
  .confetti { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .demo-stage { gap: 0; }
  .demo-stage > .take { grid-area: 1 / 1; }
  .take-again { animation: take-first 14s infinite; }
  .take-pass { animation: take-second 14s infinite; }
  .take .pitch-mine { stroke-dasharray: 340; animation: draw 14s infinite; }
  .take .s1 { animation: sound-1 14s infinite; }
  .take .s2 { animation: sound-2 14s infinite; }
  .take .s3 { animation: sound-3 14s infinite; }
  .take .s4 { animation: sound-4 14s infinite; }
  .take-again .sound.is-off { animation: sound-2 14s infinite, mark 14s infinite; }
  .take-again .tip { animation: tip-in 14s infinite; }
  .take-pass .bars { animation: bars-in 14s infinite; }
  .take-pass .bar i { transform-origin: left center; animation: bar-grow 14s infinite; }
  .panel-again { animation: panel-again 14s infinite; }
  .panel-pass { animation: panel-pass 14s infinite; }
  .ring-arc { animation: ring 14s infinite; }
  .take-pass .ring-arc { animation-name: ring-pass; }
  .sparks i { animation: spark 14s infinite; }
  .confetti i { animation: confetti 14s infinite; }

  .demo-pause {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 12px;
    border: 1.5px solid var(--pill-stroke);
    border-radius: 999px;
    background: var(--demo-pause-bg);
    color: var(--pill-text);
    font-size: 0.8125rem;
    font-weight: 650;
    cursor: pointer;
  }
  .demo-toggle:focus-visible + .demo-pause { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
  .demo:has(.demo-toggle:checked) .when-running { display: none; }
  .demo:has(.demo-toggle:checked) .when-paused { display: inline; }
  .demo:has(.demo-toggle:checked) .demo-stage *,
  .demo:has(.demo-toggle:checked) .demo-stage,
  .js .demo:not(.is-live) .demo-stage *,
  .js .demo:not(.is-live) .demo-stage { animation-play-state: paused; }
}

/* Timeline, as shares of 14 s: first try 0 to 48 %, second try 50 to 97 %. */
@keyframes take-first {
  0%, 46% { opacity: 1; visibility: visible; }
  49%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes take-second {
  0%, 49% { opacity: 0; visibility: hidden; }
  51%, 96% { opacity: 1; visibility: visible; }
  99%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes draw {
  0%, 2% { stroke-dashoffset: 340; }
  11%, 49% { stroke-dashoffset: 0; }
  50%, 52% { stroke-dashoffset: 340; }
  61%, 100% { stroke-dashoffset: 0; }
}
@keyframes sound-1 {
  0%, 12% { opacity: 0; translate: 0 8px; }
  13.5%, 49% { opacity: 1; translate: 0 0; }
  50%, 62% { opacity: 0; translate: 0 8px; }
  63.5%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes sound-2 {
  0%, 14% { opacity: 0; translate: 0 8px; }
  15.5%, 49% { opacity: 1; translate: 0 0; }
  50%, 64% { opacity: 0; translate: 0 8px; }
  65.5%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes sound-3 {
  0%, 16% { opacity: 0; translate: 0 8px; }
  17.5%, 49% { opacity: 1; translate: 0 0; }
  50%, 66% { opacity: 0; translate: 0 8px; }
  67.5%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes sound-4 {
  0%, 18% { opacity: 0; translate: 0 8px; }
  19.5%, 49% { opacity: 1; translate: 0 0; }
  50%, 68% { opacity: 0; translate: 0 8px; }
  69.5%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes mark {
  0%, 21% { outline-color: transparent; }
  23%, 100% { outline-color: var(--sound-off); }
}
@keyframes tip-in {
  0%, 26% { opacity: 0; translate: 0 8px; }
  28.5%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes bars-in {
  0%, 69% { opacity: 0; translate: 0 8px; }
  71%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes bar-grow {
  0%, 69% { scale: 0 1; }
  74%, 100% { scale: 1 1; }
}
@keyframes panel-again {
  0%, 21% { opacity: 0; translate: 0 18px; }
  23.5%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes panel-pass {
  0%, 71% { opacity: 0; translate: 0 18px; scale: 1; }
  73% { opacity: 1; translate: 0 0; scale: 1.04; background-color: var(--panel-pass-pulse); }
  76% { scale: 1; }
  80%, 100% { opacity: 1; translate: 0 0; background-color: var(--panel-pass-bg); }
}
@keyframes ring {
  0%, 22% { stroke-dashoffset: var(--arc); }
  27%, 100% { stroke-dashoffset: 0; }
}
@keyframes ring-pass {
  0%, 72% { stroke-dashoffset: var(--arc); }
  77%, 100% { stroke-dashoffset: 0; }
}
@keyframes spark {
  0%, 74% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  75% { opacity: 1; }
  81% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
  100% { opacity: 0; }
}
@keyframes confetti {
  0%, 72% { opacity: 0; transform: translate(0, 0) rotate(0); }
  73% { opacity: 1; }
  90% { opacity: 1; }
  95%, 100% { opacity: 0; transform: translate(0, var(--fall)) rotate(var(--spin)); }
}

/* On phones the example is smaller, so that the whole screen fits in the browser window. */
@media (max-width: 599px) {
  .demo-screen { padding: 14px 12px 12px; border-width: 6px; border-radius: 36px; }
  .demo-word { display: flex; align-items: baseline; gap: 10px; }
  .demo-word .word { font-size: 2.5rem; }
  .demo-word .gloss { margin-top: 0; font-size: 1rem; }
  .demo-stage { margin-top: 10px; }
  .take { gap: 8px; }
  .take-label { padding: 2px 9px; font-size: 0.75rem; }
  .chart { padding: 6px 8px 8px; border-radius: 14px; }
  .sound { gap: 2px; padding-block: 2px 4px; }
  .sound .letter { font-size: 1.5rem; }
  .sound .letter::after { margin-top: 4px; }
  .sound .score { font-size: 0.9375rem; }
  .tip { gap: 2px; font-size: 0.875rem; line-height: 1.4; }
  .tip-head { font-size: 0.9375rem; }
  .bars { gap: 4px; }
  .bars ul { gap: 0; }
  .bars li { font-size: 0.875rem; line-height: 1.45; }
  .panel { gap: 8px; padding: 12px 12px 12px 14px; border-radius: 18px; }
  .verdict { font-size: 1.75rem; }
  .panel-pass .verdict { font-size: 2rem; }
  .reason, .change { font-size: 0.875rem; }
  .badge { margin-top: 2px; }
  .ring { width: 56px; height: 56px; }
  .demo-pause { top: 18px; right: 18px; }
}

/* Native recordings. Without the script the browser's own player shows; the script swaps in a
   play button. */
.clip audio { width: 100%; max-width: 280px; height: 40px; }
.js .clip audio { display: none; }
.play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 20px 8px 14px;
  border: 2px solid var(--pill-stroke);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--pill-stroke);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.play:active { transform: translateY(3px); box-shadow: 0 0 0 var(--pill-stroke); }
.play[hidden] { display: none; }
.play svg { flex: none; fill: currentColor; }
.play .icon-stop { display: none; }
.play.is-playing .icon-play { display: none; }
.play.is-playing .icon-stop { display: inline; }
.clip-inline { margin-top: 8px; }
.play-round {
  width: 56px;
  height: 56px;
  padding: 0;
  justify-content: center;
  border-color: var(--play-bg);
  background: var(--play-bg);
  color: var(--play-icon);
}
.play-round svg { margin-left: 2px; }
.play-round.is-playing svg { margin-left: 0; }

/* ---- How it works ---- */

/* Each step starts on a hairline. Phones and tablets: the numeral sits left of the text.
   From 900 px: three columns, the numeral above the text. */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 40rem;
  list-style: none;
  padding: 0;
  margin: 48px auto 0;
  border-bottom: 1px solid var(--item-rule);
}
.step {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 6px;
  padding-block: 24px 26px;
  border-top: 1px solid var(--item-rule);
}
.step > * { grid-column: 2; }
.step .step-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--list-numeral);
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.85;
}
.step h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.625rem; line-height: 1.15; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; max-width: none; margin-top: 64px; border-bottom: 0; }
  .step { display: flex; flex-direction: column; gap: 10px; padding-block: 28px 0; }
  .step .step-num { margin-bottom: 14px; font-size: 4.5rem; }
}
.steps-note { margin-top: 32px; text-align: center; color: var(--text-muted); font-size: 0.9375rem; }

/* ---- Sounds ---- */

.sounds-section { background: var(--footer-bg); border-block: 1px solid var(--section-rule); }
.pair { display: grid; gap: 48px; margin-top: 48px; }
@media (min-width: 760px) {
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 6vw, 80px); }
}
.pair-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--item-rule);
}
.pair-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pair-word { color: var(--text-heading); font-family: var(--font-display); font-size: clamp(3.5rem, 8vw, 5rem); line-height: 1; }
.pair-gloss { color: var(--text-muted); margin-top: 4px; }
.pair-item h3 { font-size: 1.1875rem; margin-top: 8px; }
.length { display: flex; gap: 4px; height: 44px; margin-top: 8px; }
.length-seg {
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--length-consonant);
  color: var(--length-consonant-text);
  font-weight: 650;
}
.seg-t, .seg-k { flex: 0 0 44px; }
.seg-a { background: var(--length-vowel); color: var(--length-vowel-text); }
/* Widths in proportion to the a in each recording: 305 ms in tak, 90 ms in tack, on a 0 to 360 ms scale. */
.seg-a-long { flex: 0 0 calc((100% - 96px) * 305 / 360); }
.seg-a-short { flex: 0 0 max(40px, calc((100% - 96px) * 90 / 360)); }
.length-label { color: var(--text-muted); font-size: 0.9375rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .pair-item .seg-a { transform-origin: left center; transition: scale 0.9s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .js .pair-item:not(.is-in) .seg-a { scale: 0.15 1; }
}
.sounds-note { max-width: 44em; margin-top: 40px; color: var(--text-body); }

.more-sounds { margin-top: 64px; }
.more-sounds h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.625rem; text-wrap: balance; }
.sound-list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  border-bottom: 1px solid var(--item-rule);
}
.sound-list li {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-block: 14px;
  border-top: 1px solid var(--item-rule);
}
@media (min-width: 600px) {
  .sound-list li { grid-template-columns: 8rem minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .sound-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 28px; border-bottom: 0; }
  .sound-list li { display: flex; flex-direction: column; gap: 6px; padding-block: 18px 0; }
}
.sl-word { color: var(--sound-list-word); font-family: var(--font-display); font-size: 1.625rem; line-height: 1.1; }
.sl-what { font-size: 0.9375rem; line-height: 1.45; }
.audio-credit { margin-top: 32px; color: var(--text-muted); font-size: 0.875rem; }

/* ---- Screens ---- */

.screens {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 48px 0 0;
  padding: 8px max(var(--gutter), env(safe-area-inset-left)) 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.screen { flex: 0 0 min(68%, 260px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; }
.screen-caption { font-size: 0.9375rem; line-height: 1.4; }
.screen-caption strong { display: block; color: var(--text-heading); font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
@media (min-width: 960px) {
  .screens {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    max-width: var(--content-max);
    margin-inline: auto;
    overflow: visible;
    padding-inline: var(--gutter);
  }
  .screen:nth-child(even) { margin-top: 48px; }
}

/* ---- Privacy ---- */

.privacy-section { background: var(--privacy-bg); color: var(--privacy-text); }
.join-section { background: var(--join-bg); }
.privacy-section h2 { color: var(--privacy-heading); }
.privacy-section .kicker-on-ink { color: var(--privacy-kicker); }
.privacy-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 40rem;
  list-style: none;
  padding: 0;
  margin-top: 48px;
  border-bottom: 1px solid var(--privacy-rule);
}
.privacy-facts li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 6px;
  padding-block: 24px;
  border-top: 1px solid var(--privacy-rule);
}
.privacy-facts li > * { grid-column: 2; }
.privacy-facts li > svg { grid-column: 1; grid-row: 1 / span 2; }
@media (min-width: 900px) {
  .privacy-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; max-width: none; margin-top: 56px; border-bottom: 0; }
  .privacy-facts li { display: flex; flex-direction: column; gap: 8px; padding-block: 28px 0; }
}
.privacy-facts svg { fill: none; stroke: var(--privacy-icon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .privacy-facts svg { margin-bottom: 10px; }
}
.privacy-facts h3 { color: var(--privacy-heading); font-size: 1.1875rem; }
.privacy-link { margin-top: 36px; }
.privacy-link a { color: var(--privacy-link); font-weight: 600; text-decoration-color: var(--privacy-link-underline); }
.privacy-link a:focus-visible { outline-color: var(--privacy-focus-ring); }

/* ---- Join ---- */

.join-layout {
  position: relative;
  display: grid;
  gap: 32px;
  justify-items: center;
}
.join-raven { position: relative; width: min(52%, 220px); }
.join-text { position: relative; }
.join-confetti { position: absolute; inset: 0; pointer-events: none; }
.join-confetti i { position: absolute; width: 12px; height: 7px; border-radius: 2px; background: var(--confetti-1); }
.join-confetti i:nth-child(5n + 2) { background: var(--confetti-2); }
.join-confetti i:nth-child(5n + 3) { background: var(--confetti-3); }
.join-confetti i:nth-child(5n + 4) { background: var(--confetti-4); }
.join-confetti i:nth-child(5n + 5) { background: var(--confetti-1); }
.join-confetti i:nth-child(1) { left: 5%; top: 8%; rotate: 24deg; }
.join-confetti i:nth-child(2) { left: 16%; top: 3%; rotate: -30deg; }
.join-confetti i:nth-child(3) { left: 27%; top: 11%; rotate: 60deg; }
.join-confetti i:nth-child(4) { left: 3%; top: 40%; rotate: -12deg; }
.join-confetti i:nth-child(5) { left: 33%; top: 30%; rotate: 40deg; }
.join-confetti i:nth-child(6) { right: 4%; top: 5%; rotate: -50deg; }
.join-confetti i:nth-child(7) { right: 14%; top: 2.5%; rotate: 15deg; }
.join-confetti i:nth-child(8) { left: 2%; bottom: 22%; rotate: 70deg; }
.join-confetti i:nth-child(9) { left: 9%; bottom: 6%; rotate: -64deg; }
.join-confetti i:nth-child(10) { left: 30%; bottom: 4%; rotate: 20deg; }
@media (max-width: 759px) {
  .join-confetti i:nth-child(4), .join-confetti i:nth-child(n + 8) { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .join-layout .join-confetti i { transition: translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease; }
  .js .join-layout:not(.is-in) .join-confetti i { translate: 0 -40px; opacity: 0; }
}
.join-text { display: flex; flex-direction: column; gap: 16px; max-width: 34em; }
.join-text h2 { font-size: clamp(2.5rem, 7vw, 4rem); }
@media (min-width: 760px) {
  .join-layout { grid-template-columns: minmax(200px, 0.7fr) 1.3fr; align-items: center; justify-items: start; gap: 64px; }
  .join-raven { width: 100%; max-width: 300px; justify-self: center; }
}
.join-steps { list-style: none; padding: 0; counter-reset: join; border-bottom: 1px solid var(--join-rule); }
.join-steps li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding-block: 12px;
  border-top: 1px solid var(--join-rule);
  color: var(--text-heading);
  font-weight: 550;
  counter-increment: join;
}
.join-steps li::before {
  content: counter(join);
  color: var(--join-step-number);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1;
}
.join-cta { margin-top: 8px; }
.join-note { color: var(--text-body); font-size: 0.9375rem; }

/* ---- Credits ---- */

.credits-section { padding-block: clamp(48px, 7vw, 88px); }
.text-block { display: flex; flex-direction: column; gap: 12px; max-width: 48em; font-size: 0.9375rem; color: var(--text-muted); }
.credits-section h2 { font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0; color: var(--text-heading); }
.credits-section a { color: var(--text-muted); }

/* ---- Inner pages: privacy, support, 404 ---- */

.page { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 104px); }
.page-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--section-rule); }
.page h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.page-lead { font-size: 1.1875rem; max-width: 34em; }
.updated { color: var(--text-muted); font-size: 0.9375rem; }

.page-body { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
.legal, .faq { flex: 999 1 560px; min-width: 0; max-width: 720px; }

.toc { flex: 1 1 220px; max-width: 280px; }
@media (min-width: 900px) {
  .toc { position: sticky; top: 88px; }
}
.toc-label { color: var(--text-muted); font-size: 0.875rem; font-weight: 600; margin-bottom: 10px; }
.toc ol { list-style: none; padding: 0; margin: 0; font-size: 0.9375rem; line-height: 1.35; }
.toc a {
  display: block;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--toc-rule);
  color: var(--text-body);
  text-decoration: none;
}
.toc a:hover { border-left-color: var(--toc-rule-hover); color: var(--text-heading); }

.legal { line-height: 1.65; }
.legal .intro {
  padding-left: 20px;
  border-left: 3px solid var(--accent-line);
  font-size: 1.1875rem;
  color: var(--text-heading);
}
.legal h2 {
  margin-top: 48px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
}
.legal p, .legal ul { margin-top: 14px; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 8px; }
.legal strong { color: var(--text-heading); font-weight: 600; }

.faq { display: flex; flex-direction: column; }
.faq > h2, .contact h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
}
.faq > h2 { margin-bottom: 16px; }
.faq details { border-top: 1px solid var(--item-rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--item-rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  color: var(--text-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--list-numeral); font-size: 1.375rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p, .faq details ol { padding-bottom: 22px; margin: 0; }
.faq details ol { padding-left: 1.25rem; }
.faq details li + li { margin-top: 6px; }

.contact {
  flex: 1 1 280px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 22px;
  border-left: 3px solid var(--accent-line);
}
.contact .button { align-self: flex-start; overflow-wrap: anywhere; }

.not-found { display: flex; flex-direction: column; gap: 16px; }