:root {
  /* Indigo palette: adire-cloth blue on a cool grey, with an amber accent (no pure white). */
  --bg: #e2e6f0;
  --surface: #f4f6fb;
  --surface-2: #e7eaf3;
  --field: #f9fafd;
  --text: #1a2033;
  --muted: #525a73;
  --border: #c9cfe0;
  --primary: #2f4a8a;
  --primary-ink: #f3f6ff;
  --primary-soft: #dbe2f3;
  --accent: #b45309;
  --gold: #b7791f;
  --danger: #b42318;
  --good: #15803d;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 24px rgb(0 0 0 / 0.06);
  --radius: 16px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1712;
    --surface: #241f18;
    --field: #2b251d;
    --surface-2: #2f281f;
    --text: #f2ebdd;
    --muted: #aa9f8b;
    --border: #3d3427;
    --primary: #d8bd8a;
    --primary-ink: #2a2015;
    --primary-soft: #3a301f;
    --accent: #fb923c;
    --gold: #f6c05c;
    --danger: #f87171;
    --good: #4ade80;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--primary); }
button, input, select, textarea { font: inherit; color: inherit; }

/* --- top bar ---------------------------------------------------------- */

/* One row: logo | language → Ewe bubble and the Welcome … Write switch, centred
   together | profile. Narrower screens keep the language bubble centred on the top
   row and move the switch to a centred second row. */
.topbar {
  display: grid;
  /* Centred bubbles, but the sides never shrink under their content (the bubbles move over instead). */
  grid-template-columns: minmax(max-content, 1fr) auto auto minmax(max-content, 1fr);
  grid-template-areas: "brand langs modes account";
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* Stays at the top of the screen while the page scrolls, and above a page
     sliding past while flipping. */
  position: sticky; top: 0; z-index: 10;
}

.brand-group { grid-area: brand; }
.lang-pair { grid-area: langs; }
.tabs-account { grid-area: account; justify-self: end; }
@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    grid-template-areas: "brand langs account" "modes modes modes";
    row-gap: 12px;
  }
}

/* Speak / Listen / Write: segmented switch, centered in the header. */
.modes {
  grid-area: modes; justify-self: center;
  display: flex; gap: 4px; width: fit-content; max-width: 100%; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
}
.modes a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  padding: 8px 20px 8px 16px; border-radius: 999px; text-decoration: none;
  color: var(--muted); font-weight: 600;
}
.modes svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Around the three ways to contribute: Welcome and How to help before them, Partners and
   Contact us after. */
.modes-sep {
  flex: none; align-self: stretch; width: 2px; margin: 6px 6px; border-radius: 1px;
  background: color-mix(in srgb, var(--primary) 45%, transparent);
}
/* How to help and Contact us: always just their icon (the name is for screen readers, and a tooltip). */
.modes a.mode-icon { flex: none; padding-inline: 12px; }
.modes a.mode-icon span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.modes a:hover { color: var(--text); }
.modes a.active { background: var(--surface); color: var(--text); font-weight: 800; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.modes a.active svg { stroke-width: 2.5; }
@media (max-width: 600px) {
  .modes { width: 100%; }
  .modes a { padding: 8px 8px; gap: 6px; font-size: 0.92rem; }
  .modes a.mode-intro, .modes a.mode-icon { flex: none; padding-inline: 10px; }
}
/* Phones: tighter still, so every tab fits. */
@media (max-width: 600px) {
  .modes { gap: 2px; padding: 3px; }
  .modes-sep { margin-inline: 3px; }
  .modes a { padding-inline: 6px; gap: 4px; font-size: 0.86rem; }
  .modes a.mode-intro, .modes a.mode-icon { padding-inline: 8px; }
  .modes svg { width: 16px; height: 16px; }
}
@media (max-width: 430px) {
  .modes a:not(.mode-intro, .mode-icon) svg { display: none; }
}
@media (max-width: 380px) {
  .modes-sep { margin-inline: 2px; }
  .modes a { padding-inline: 5px; font-size: 0.82rem; }
  .modes a.mode-intro, .modes a.mode-icon { padding-inline: 6px; }
}
@media (max-width: 340px) {
  .modes-sep { margin-inline: 1px; }
  .modes a { padding-inline: 3px; font-size: 0.76rem; }
  .modes a.mode-intro, .modes a.mode-icon { padding-inline: 4px; }
  .modes svg { width: 15px; height: 15px; }
}
/* Welcome and Partners shrink to their icon where the full switch doesn't fit (their
   names stay for screen readers, and as a tooltip). */
@media (min-width: 1101px) and (max-width: 1300px), (min-width: 601px) and (max-width: 800px) {
  .modes a.mode-intro { padding-inline: 12px; }
}
@media (min-width: 1101px) and (max-width: 1300px), (max-width: 800px) {
  .modes a.mode-intro span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none;
}

/* "myCL2.ai.voices" wordmark, all italic: a small raised "my" in brown, a heavy "CL2" with
   the welcome page's slowly drifting gold-orange gradient, then ".ai.voices" in brown. */
.brand-mark {
  display: inline-block; line-height: 1; white-space: nowrap; color: var(--primary);
  padding-right: 3px; /* room for the italic "2" to lean into */
  background: linear-gradient(90deg, var(--gold), var(--accent), var(--gold), var(--accent), var(--gold)) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: greet-shimmer 8s linear infinite;
}
.brand-my {
  display: inline-block; margin-right: -1px; vertical-align: 0.85em; /* right against "CL2" */
  font-size: 11px; font-style: italic; font-weight: 700; letter-spacing: 0.02em;
  -webkit-text-fill-color: var(--primary);
}
.brand-cl { font-size: 27px; font-style: italic; font-weight: 900; letter-spacing: -0.01em; }
/* ".ai.voices" after "CL2", in the brown italic of "my". */
.brand-voices {
  margin-left: 0; font-size: 13px; font-style: italic; font-weight: 700; letter-spacing: 0.02em;
  -webkit-text-fill-color: var(--primary);
}
@media (prefers-reduced-motion: reduce) { .brand-mark { animation: none; } }
/* "myCL2.ai.voices" in running text (see brandify in app.js), drawn like the logo above
   at the size of the text around it. */
.brand-inline { white-space: nowrap; font-style: italic; }
.brand-inline .bi-my {
  margin-right: -0.05em; vertical-align: 0.55em; font-size: 0.62em; font-weight: 700; color: var(--primary);
}
.brand-inline .bi-cl {
  padding-right: 0.1em; font-weight: 900;
  background: linear-gradient(90deg, var(--gold), var(--accent), var(--gold), var(--accent), var(--gold)) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: greet-shimmer 8s linear infinite;
}
.brand-inline .bi-voices { margin-left: 0; font-size: 0.82em; font-weight: 700; color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .brand-inline .bi-cl { animation: none; } }

.brand-group { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand { white-space: nowrap; }
.brand-from { display: flex; color: var(--muted); }
.brand-from svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Visually hidden, still read by screen readers. */
/* --- profile page (Common Voice-style) ---------------------------------- */

.card.profile-layout { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); padding: 0; overflow: hidden; }
/* × on Profile / Admin cards: back to the previous page. */
.page-close { position: absolute; top: 8px; right: 8px; z-index: 1; }
.profile-nav {
  display: flex; flex-direction: column; gap: 8px; padding: 32px 20px;
  background: linear-gradient(var(--surface-2), var(--surface));
}
.profile-nav a {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px;
  text-decoration: none; color: var(--muted); font-weight: 600;
}
.profile-nav a:hover { color: var(--text); }
.profile-nav a.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgb(0 0 0 / 0.08); }
.profile-nav svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-main { padding: 32px 36px 36px; min-width: 0; }
@media (max-width: 760px) {
  /* minmax(0, …) and wrapping: Admin's four tabs don't push the card past the screen. */
  .card.profile-layout { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .profile-nav { flex-direction: row; flex-wrap: wrap; padding: 14px 52px 0 16px; background: none; }
  .profile-nav a { padding: 9px 14px; }
  .profile-main { padding: 20px 16px 24px; }
}

/* Form fields with the label sitting on the top border. */
.ogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
@media (max-width: 600px) { .ogrid { grid-template-columns: 1fr; } }
.ofield { position: relative; }
.ofield input, .ofield select { height: 52px; padding: 15px 13px 12px; border-radius: 6px; }
.ofield label {
  position: absolute; top: -8px; left: 10px; padding: 0 5px;
  background: var(--surface); color: var(--muted); font-size: 0.78rem; line-height: 1rem;
}
.lede + .pform { margin-top: 24px; }
.pdivider { border: none; border-top: 1px solid var(--border); margin: 26px 0; }
.pconsent b { display: block; margin-bottom: 4px; font-size: 1rem; }
.psave { display: flex; justify-content: center; }
.psave .btn { min-width: 220px; }

/* Admin window: like Profile, with a reddish side panel so it's unmistakable. */
.admin-layout .profile-nav { background: linear-gradient(#f6dcd8, #fbefed); }
.admin-layout .profile-nav .count {
  margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); font-size: 0.8rem; text-align: center;
}
@media (prefers-color-scheme: dark) { .admin-layout .profile-nav { background: linear-gradient(#3a1c19, #2a1816); } }
@media (max-width: 760px) { .admin-layout .profile-nav { background: none; } }

/* Old-browser banner (plain colours: it must work where newer CSS doesn't). */
.old-browser {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: #7a2e12; color: #fbf6ec; font-size: 0.95rem; line-height: 1.4;
}
.old-browser span { flex: 1; }
.old-browser button {
  flex: none; width: 32px; height: 32px; border: 1px solid #fbf6ec; border-radius: 50%;
  background: transparent; color: #fbf6ec; font-size: 1.3rem; line-height: 1; cursor: pointer;
}

/* Touch-only devices: keyboard shortcuts don't apply. */
@media (hover: none) and (pointer: coarse) {
  .shortcut-hint, .vote-row kbd, .actions kbd { display: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Flag or mic + language name in one pill: the interface language and the language to
   record share it, at the same size. */
.lang-pill {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 12px 7px 9px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
}
/* The interface language, EN | FR, in a clear pill like the language to record's;
   the chosen one lit. */
.ui-lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.ui-lang button {
  border: 0; background: transparent; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.02em; color: var(--muted);
}
.ui-lang button:hover { color: var(--text); }
.ui-lang button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.target-mic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Language → Ewe share one bubble, like the Welcome … Write switch; inside it the two
   pills look like the switch's selected tab. */
.lang-pair {
  display: flex; align-items: center; gap: 6px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
}
.lang-pair .lang-pill { border-color: transparent; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.target-btn:hover { background: var(--surface); color: var(--text); border-color: var(--border); }
.target-btn { cursor: pointer; font-family: inherit; }
/* The language's full name is always shown. When a long one (Kinyarwanda / Kirundi…)
   doesn't fit, fitHeader in app.js steps the header down until it does: fit-1 Welcome
   and Partners show just their icon, fit-2 the switch moves to a second row, fit-3
   the language bubble gets a row of its own, fit-4 the name may wrap. */
.topbar.fit-1 .modes a.mode-intro span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.topbar.fit-2 {
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  grid-template-areas: "brand langs account" "modes modes modes";
}
.topbar.fit-3 {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand account" "langs langs" "modes modes";
}
.topbar.fit-3 .lang-pair { justify-self: center; max-width: 100%; }
.topbar.fit-4 .target-btn { white-space: normal; text-align: center; }
/* Stepped down that far above phone widths, the switch packs its tabs closer too
   (phones already have tighter rules of their own). */
@media (min-width: 601px) {
  .topbar.fit-3 .modes { gap: 2px; padding: 3px; }
  .topbar.fit-3 .modes a, .topbar.fit-3 .modes a.mode-intro, .topbar.fit-3 .modes a.mode-icon { padding-inline: 8px; }
}
.target-btn .chevron {
  width: 14px; height: 14px; margin-left: -2px; flex: none;
  fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.15s ease;
}
.target-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.flag {
  display: flex; width: 24px; height: 16px; flex: none; overflow: hidden;
  border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
}
.flag svg { width: 100%; height: 100%; }

/* Light, in dark mode too, so the window keeps its light palette
   (same as the profile menu). */
.lang-dialog {
  --surface: #f4f6fb; --surface-2: #e7eaf3; --text: #1a2033; --muted: #525a73;
  --border: #c9cfe0; --primary: #2f4a8a;
  /* Anchored under the globe button; top/left are set from JS. */
  position: fixed; margin: 0; inset: auto;
  width: min(320px, calc(100vw - 32px)); padding: 14px;
  background: #f4f6fb; color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.16);
}
.lang-dialog::backdrop { background: transparent; }
.lang-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lang-head h2 { margin: 0; font-size: 1.15rem; }
.lang-dialog ul { list-style: none; margin: 0; padding: 0; max-height: min(320px, 50vh); overflow-y: auto; }
.lang-dialog ul:focus { outline: none; } /* the highlighted row shows where you are */
.lang-dialog li {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
}
.lang-dialog li .native { font-weight: 600; }
.lang-dialog li .alt { color: var(--muted); font-size: 0.85rem; }
.lang-dialog li .tick { margin-left: auto; color: var(--primary); align-self: center; display: flex; }
.lang-dialog li .tick svg { width: 16px; height: 16px; }
.lang-dialog li.active { background: var(--surface-2); }
/* Search box over the list of languages to record. */
.lang-search {
  display: block; width: 100%; margin: 0 0 10px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: #f9fafd; color: var(--text); font: inherit; font-size: 0.95rem;
}
.lang-search:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.lang-dialog li.empty { cursor: default; color: var(--muted); font-size: 0.9rem; }
.lang-dialog li[aria-selected="true"] .native { color: var(--primary); }

.tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tabs a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  color: var(--muted); font-weight: 600;
}
.tabs a:hover { background: var(--surface-2); color: var(--text); }
.tabs a.active { background: var(--primary-soft); color: var(--primary); }
/* The Profile tab can hold a contributor's initial and name; keep long names on one line. */
/* Header profile button + its account menu. */
.profile-wrap { position: relative; }
.profile-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 10px 7px 14px; border-radius: 999px; border: none; background: none;
  color: var(--muted); font-weight: 600;
}
.profile-btn:hover { background: var(--surface-2); color: var(--text); }
.profile-btn.active { background: var(--primary-soft); color: var(--primary); }
.profile-label { display: inline-flex; align-items: center; gap: 7px; }
.profile-btn .tab-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-btn .chevron {
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease;
}
.profile-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }
/* The name (or "Profile") in the myCL2 logo's drifting gold-orange, with the arrow and
   the initial (all phones show) to match. */
.profile-btn .tab-name {
  font-weight: 700;
  background: linear-gradient(90deg, var(--gold), var(--accent), var(--gold), var(--accent), var(--gold)) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: greet-shimmer 8s linear infinite;
}
.profile-btn .chevron { stroke: var(--accent); }
.profile-btn .avatar { background: linear-gradient(135deg, var(--gold), var(--accent)); color: #fff; }
@media (prefers-reduced-motion: reduce) { .profile-btn .tab-name { animation: none; } }
.profile-menu {
  /* Light, with a light palette even in dark mode (like the language list). */
  --surface-2: #e7eaf3; --text: #1a2033; --muted: #525a73; --border: #c9cfe0;
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 230px; max-width: calc(100vw - 32px); padding: 6px;
  background: #f4f6fb; color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.16);
}
.profile-menu[hidden] { display: none; }
.menu-head { padding: 8px 12px 10px; color: var(--muted); font-size: 0.88rem; }
.profile-menu .menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px;
  border: none; background: none; color: var(--text); font: inherit; font-weight: 600;
  text-decoration: none; text-align: left; cursor: pointer;
}
.profile-menu .menu-item:hover, .profile-menu .menu-item:focus-visible { background: var(--surface-2); outline: none; }
.profile-menu .menu-item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }

/* Log in / create account pages: a narrow card like About / Contact. */
.info-page.auth-page { max-width: 460px; }
.auth-page .hint { color: var(--muted); font-size: 0.86rem; }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-switch { text-align: center; margin: 14px 0 0; color: var(--muted); font-size: 0.92rem; }
.link-btn { border: none; background: none; padding: 0; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
/* Log in / Create account on the other myCL2 sites (cl2-account.js): voices' form, in a
   dialog over the page. */
.cl2-auth {
  width: min(400px, calc(100vw - 32px)); padding: 26px 24px 20px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
.cl2-auth::backdrop { background: rgb(0 0 0 / 0.35); }
.cl2-auth form { position: relative; display: block; }
.cl2-auth h2 { margin: 0 0 16px; font-size: 1.35rem; }
.cl2-auth .hint { color: var(--muted); font-size: 0.84rem; }
.cl2-auth input { width: 100%; }
.cl2-auth-close {
  position: absolute; right: -10px; top: -14px; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.cl2-auth-close:hover { background: var(--surface-2); color: var(--text); }
.cl2-auth-error { margin: 0 0 10px; color: var(--danger); font-weight: 600; font-size: 0.9rem; }
.cl2-auth-error[hidden] { display: none; }
.cl2-auth-submit { width: 100%; justify-content: center; }

.avatar {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--primary); color: var(--primary-ink);
  font-size: 0.78rem; font-weight: 700; line-height: 1;
}
/* Not named yet: a person icon in the circle (alone on phones, like the initial). */
.avatar.anon { background: var(--primary-soft); color: var(--primary); }
.avatar.anon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) {
  .topbar { padding: 12px 16px; }
  .tabs { flex-wrap: nowrap; gap: 2px; }
  .tabs a { padding: 7px 9px; font-size: 0.92rem; }
  .topbar { column-gap: 8px; }
  .brand-group { gap: 6px; }
  /* A smaller logo on phones, so logo, languages and Profile fit on one row. */
  .brand-cl { font-size: 22px; }
  .brand-voices { font-size: 11px; }
  .brand-my { font-size: 9px; }
  /* Phones: the initial alone stands for the name (it's in the tab's tooltip/label). */
  .profile-btn .avatar + .tab-name { display: none; }
  .profile-btn { padding-left: 8px; }
}
/* Narrow phones: tighten the top row a little more. */
@media (max-width: 430px) {
  .brand-group { gap: 4px; }
  .brand-cl { font-size: 19px; }
  .brand-voices { font-size: 10px; }
  .brand-my { font-size: 8px; }
  .lang-pair .lang-pill { padding: 6px 9px 6px 7px; gap: 4px; }
  .lang-pair { gap: 2px; padding: 3px; }
  .ui-lang button { padding: 3px 7px; }
  .target-mic { width: 16px; height: 16px; }
  .brand-from svg { width: 16px; height: 16px; }
}
/* Small phones: the bubble keeps the two languages (and the mic), without the arrow. */
@media (max-width: 380px) {
  .brand-from { display: none; }
}
@media (max-width: 360px) {
  .topbar { column-gap: 6px; }
  .lang-pair .lang-pill { padding: 5px 6px; gap: 3px; }
  .lang-pair { gap: 3px; }
  .ui-lang button { padding: 2px 5px; }
}
@media (max-width: 340px) {
  .brand-cl { font-size: 17px; }
  .brand-voices { font-size: 9px; }
  .lang-pill { font-size: 0.88rem; }
}

/* Something that explains itself on mouse-over (its title): lit up while the mouse is on it. */
.tip { border-radius: 6px; padding: 2px 6px; margin: -2px -6px; transition: background 0.15s; }
.tip:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* --- stats strip ------------------------------------------------------ */

.stats {
  display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; font-size: 0.9rem; color: var(--muted);
}
.stats[hidden] { display: none; }
.stats b { color: var(--text); font-variant-numeric: tabular-nums; }
/* The language the numbers are for, in front of them. */
.stats .stats-lang { margin-right: -12px; color: var(--text); font-size: 1.2rem; font-weight: 700; }
/* Your own numbers (with an account), set apart in a tinted pill. */
.stats .stats-you {
  padding: 3px 12px; border-radius: 999px; color: var(--text); white-space: nowrap; /* one line, never split */
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* --- layout ----------------------------------------------------------- */

main {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 16px 24px; /* clear space below the header */
}
@media (max-width: 520px) { main { padding-top: 20px; } }

/* Computers: Welcome, How to help, Speak, Listen, Write and Partners one
   under the other on a single page (see the strip code in app.js), each under a line
   naming it. Every page is the same size: as wide as the Speak card, and exactly the screen between
   the header and the footer. Jumped to, its line sits 20px below the header (see
   showStripPage in app.js), then the card runs down to 20px above the footer. A page with
   more than that scrolls inside its card; Speak, Listen and Write are scaled down to fit
   instead (fitStripPage in app.js). Scrolling settles on a page's line when it stops
   close to one. */
.strip-page {
  display: flex; flex-direction: column; padding: 16px 0 20px; min-height: 420px;
  height: calc(100dvh - var(--header-h, 79px) - var(--footer-h, 53px) - 20px - var(--strip-divider-h, 34px));
}
.strip-page > :last-child { flex: 1 1 0; min-height: 0; width: 100%; max-width: 860px; margin: 0 auto; }
.strip-page > .welcome { display: flex; flex-direction: column; }
.strip-page > .welcome > .card { flex: 1 1 0; min-height: 0; }
.strip-page .card { overflow-y: auto; scrollbar-width: thin; }
.strip-page .page-card, .strip-page .speak-card, .strip-page .listen-card { min-height: 0; }
html:has(#view.strip) { scroll-snap-type: y proximity; }
.strip-divider { scroll-snap-align: start; scroll-margin-top: calc(var(--header-h, 79px) + 20px); }
.strip-divider {
  display: flex; align-items: center; gap: 16px; max-width: 940px; margin: 0 auto;
  color: var(--primary); font-size: 0.92rem; font-weight: 700;
}
.strip-divider::before, .strip-divider::after {
  content: ""; flex: 1; height: 2px; border-radius: 1px;
  background: color-mix(in srgb, var(--primary) 30%, transparent);
}
.strip-divider-label {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px 5px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 999px; background: var(--surface);
}
.strip-divider-label svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Speak / Listen / Write flipped by scrolling (see the flip code in app.js). */
/* No pull-to-refresh or bounce: pulling at the page's edge flips to the next mode. */
html { overscroll-behavior-y: none; }
/* The outgoing page, still moving off while the new one comes in. */
.flip-ghost { position: fixed; z-index: 5; margin: 0; pointer-events: none; }
/* The mode being pulled into view, at the edge it will come from. */
.flip-peek {
  position: fixed; left: 50%; bottom: 24px; z-index: 6; pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 9px 18px 9px 14px; border-radius: 999px;
  background: var(--surface); color: var(--muted); border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.14); font-weight: 600; opacity: 0;
  transform: translate(-50%, 0); transition: color 0.15s ease, border-color 0.15s ease;
}
.flip-peek[data-from="top"] { bottom: auto; }
.flip-peek[hidden] { display: none; }
.flip-peek.ready { color: var(--primary); border-color: var(--primary); }
.flip-peek svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Every Speak / Listen / Write card has the same width and (at least) the same height,
   so moving between the pages doesn't make the card jump. The tagline stays at the
   top; the rest is centred in any extra height. */
.page-card, .speak-card, .listen-card {
  max-width: 860px; margin: 0 auto; min-height: 624px;
  display: flex; flex-direction: column;
}
.page-card > *, .speak-card > *, .listen-card > * { flex: none; }
.page-card > :last-child, .speak-card > :last-child, .listen-card > :last-child { margin-bottom: auto; }
/* Speak / Listen / Write, How to help, Partners and About / Contact / Privacy: a brown
   ribbon along the card's top edge, the colour of the mic and play buttons (drawn as a
   background, so it follows the rounded corners). */
.card.page-card, .card.speak-card, .card.listen-card, .card.help-card, .card.partners-card,
.card.info-page:not(.auth-page) {
  background: linear-gradient(var(--primary), var(--primary)) top / 100% 5px no-repeat, var(--surface);
}
@media (max-width: 520px) {
  .page-card, .speak-card, .listen-card { min-height: 558px; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}
@media (max-width: 520px) { .card { padding: 20px 16px; } }

.instruction {
  text-align: center; color: var(--muted); font-weight: 600;
  margin: 0 0 18px; font-size: 0.95rem;
}
/* Headline instruction (Speak, Listen): the app's green; bone white on the dark card in dark mode. */
.instruction-title { color: var(--primary); }
@media (prefers-color-scheme: dark) { .instruction-title { color: #f9f6ee; } }
.instruction-hint { display: block; margin-top: 2px; font-weight: 400; font-size: 0.88rem; }

/* --- progress pills --------------------------------------------------- */

.pills { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.pill {
  width: 40px; height: 8px; border-radius: 999px; background: var(--surface-2);
  border: none; padding: 0; cursor: pointer;
}
.pill.done { background: var(--primary); }
.pill.current { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- prompt ----------------------------------------------------------- */

.prompt {
  min-height: 120px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: 10px; padding: 12px 8px;
}
.prompt .main {
  font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere;
}
.prompt .sub { color: var(--muted); font-size: 1.05rem; }
.lang-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
}

/* --- recorder --------------------------------------------------------- */

.recorder { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 22px 0 6px; }

.mic {
  position: relative;
  width: 92px; height: 92px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--primary); color: var(--primary-ink);
  display: grid; place-items: center;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 40%, transparent);
  transition: transform 0.12s ease, background 0.2s ease;
}
.mic:hover { transform: scale(1.04); }
.mic:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.mic svg { width: 38px; height: 38px; position: relative; z-index: 1; }
/* Waiting for the microphone/audio to start (can take a moment on some devices). */
.mic.starting { animation: mic-starting 0.9s ease-in-out infinite; cursor: progress; }
@keyframes mic-starting { 50% { opacity: 0.6; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .mic.starting { animation: none; opacity: 0.7; } }
.mic.recording { background: var(--accent); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent); }
.mic .ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 3px solid var(--accent); opacity: 0; pointer-events: none;
  transform: scale(var(--level, 1));
  transition: transform 0.08s linear;
}
.mic.recording .ring { opacity: 0.55; }

.rec-status { font-size: 0.9rem; color: var(--muted); min-height: 1.4em; font-variant-numeric: tabular-nums; }
.rec-status.live { color: var(--accent); font-weight: 600; }

/* --- buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-weight: 600;
  text-decoration: none; color: var(--text);
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 88%, black); }
.btn.big { padding: 14px 28px; font-size: 1.05rem; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { color: var(--text); }
.btn.yes { border-color: var(--good); color: var(--good); }
.btn.no { border-color: var(--danger); color: var(--danger); }
.btn.yes:hover:not(:disabled) { background: color-mix(in srgb, var(--good) 12%, transparent); }
.btn.no:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.btn svg { width: 18px; height: 18px; }

.actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.actions.centered { justify-content: center; }
.actions .group { display: flex; gap: 8px; flex-wrap: wrap; }

kbd {
  font-family: ui-monospace, monospace; font-size: 0.75em;
  padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted);
}

/* --- side clip list --------------------------------------------------- */

/* --- Speak: submit button that fills up as clips are recorded ------------- */

.submit-btn {
  position: relative; overflow: hidden; isolation: isolate;
  min-width: 250px; height: 56px; padding: 0 28px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); background: var(--primary-soft);
  color: color-mix(in srgb, var(--primary) 70%, #000); /* readable on both the light and filled green */
  font: inherit; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em;
  cursor: not-allowed; transition: transform 0.15s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.submit-fill {
  position: absolute; inset: 0; z-index: -1; width: var(--progress, 0%);
  background: color-mix(in srgb, var(--primary) 22%, var(--primary-soft));
  transition: width 0.45s ease;
}
@media (prefers-color-scheme: dark) { .submit-btn { color: var(--primary); } }
.submit-label { display: inline-flex; align-items: center; gap: 10px; }
.submit-label svg { width: 20px; height: 20px; }
.submit-btn.ready, .submit-btn.uploading {
  border-color: transparent; color: var(--primary-ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 85%, #fff), var(--primary) 55%, color-mix(in srgb, var(--primary) 80%, #000));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 35%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.18);
}
.submit-btn.ready { cursor: pointer; }
.submit-btn.pop { animation: submit-ready 0.5s ease; }
.submit-btn.ready .submit-fill { display: none; }
.submit-btn.ready:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 42%, transparent); }
.submit-btn.ready:active { transform: translateY(0); }
.submit-btn.uploading { cursor: progress; }
.submit-btn.uploading .submit-fill { background: rgb(255 255 255 / 0.18); }
@keyframes submit-ready { 0% { transform: scale(0.96); } 60% { transform: scale(1.03); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .submit-btn, .submit-fill { transition: none; animation: none !important; } }

/* --- Speak: sliding reel of the batch's sentences ------------------------ */

.reel {
  position: relative; overflow: hidden; margin: -6px -28px 22px; padding: 6px 0 10px;
  /* Fade the neighbours out towards the card edges. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}
.reel-track { display: flex; gap: 12px; width: max-content; transition: transform 0.35s ease; }
@media (prefers-reduced-motion: reduce) { .reel-track { transition: none; } }
/* Cards size to their sentence so it stays on one line (capped for very long ones). */
.slot {
  flex: none; width: max-content; min-width: 170px; max-width: min(560px, 80vw);
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--border); cursor: pointer; text-align: left;
  opacity: 0.55; transform: scale(0.94); transition: opacity 0.35s ease, transform 0.35s ease;
}
.slot:hover { opacity: 0.8; }
.slot.current { opacity: 1; transform: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.slot:not(.current) .icon-btn { pointer-events: none; } /* clicks select the card instead */
.slot .text { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.slot .row { display: flex; align-items: center; gap: 6px; }
.slot .num {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700; background: var(--surface-2); color: var(--muted); flex: none;
}
.slot .num svg { width: 14px; height: 14px; }
.slot.has-clip .num { background: var(--primary); color: var(--primary-ink); }
.slot .num.vote-up { background: var(--good); color: #fbf6ec; }
.slot .num.vote-down { background: var(--danger); color: #fbf6ec; }
/* Listen: the vote already given on a reviewed clip. */
.vote-row .btn.chosen:disabled { opacity: 1; box-shadow: 0 0 0 2px currentColor; }
.slot .meta { margin-left: auto; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .reel { margin: -4px -16px 18px; }
  /* Phones: smaller text and padding so even the longest sentence fits on one line. */
  .slot { min-width: 150px; max-width: calc(100vw - 24px); padding: 10px; }
  .slot .text { font-size: 0.78rem; }
}
.icon-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); display: grid; place-items: center; cursor: pointer; padding: 0;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 15px; height: 15px; }

/* --- forms ------------------------------------------------------------ */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: 0.92rem; }
.field .hint { font-size: 0.82rem; color: var(--muted); }
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--field);
}
textarea { resize: vertical; min-height: 64px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; }
.check input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--primary); }

.charbar { display: flex; flex-wrap: wrap; gap: 4px; }
.charbar button {
  min-width: 34px; height: 32px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: 1rem;
}
.charbar button:hover { border-color: var(--primary); }


/* --- misc ------------------------------------------------------------- */

.page-title { font-size: 1.5rem; margin: 6px 0 4px; }
.lede { color: var(--muted); margin: 0 0 20px; }

/* Write: the emblem over a centred title and intro. */
.write-head { text-align: center; }
.write-head .lede { max-width: 560px; margin-inline: auto; }
/* The review note, then Submit centred on its own line. */
.write-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
.write-actions .submit-btn { align-self: center; }
.write-logo { display: block; width: 96px; height: 96px; margin: 0 auto 6px; overflow: visible; }
.wl-bg { fill: var(--primary-soft); }
.wl-spark { fill: var(--gold); }
.wl-spark.small { opacity: 0.8; }
.wl-page { fill: var(--surface); stroke: var(--primary); stroke-width: 3; }
.wl-line { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; }
.wl-pencil-body { fill: var(--accent); }
.wl-pencil-end { fill: var(--primary); }
.wl-pencil-wood { fill: #f3d9a4; }
.wl-pencil-lead { fill: var(--text); }
.wl-bubble { fill: var(--primary); }
.wl-dot { fill: var(--primary-ink); }
/* The pencil writes the last line, over and over. */
.wl-writing { stroke-dasharray: 20; animation: wl-write 3s ease-in-out infinite; }
.wl-pencil { animation: wl-pencil 3s ease-in-out infinite; }
@keyframes wl-write { 0% { stroke-dashoffset: 20; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 20; } }
@keyframes wl-pencil { 0% { transform: translate(-19px, -2px); } 55%, 85% { transform: translate(0, 0); } 100% { transform: translate(-19px, -2px); } }
@media (prefers-reduced-motion: reduce) { .wl-writing, .wl-pencil { animation: none; } }
.center { text-align: center; }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.empty h2 { color: var(--text); margin-top: 0; }
.big-check {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--primary-soft); color: var(--primary); display: grid; place-items: center;
}
.big-check svg { width: 36px; height: 36px; }
.hidden { display: none !important; }
.mono { font-family: ui-monospace, monospace; font-size: 0.85rem; overflow-wrap: anywhere; }

.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { color: var(--muted); font-weight: 600; font-size: 0.82rem; }
.table-wrap { overflow-x: auto; }

/* Admin → Statistics: the totals as tiles, then a row per language with the totals at
   its foot; numbers right-aligned to compare down a column. */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 22px; }
.stat-tile {
  display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2);
}
.stat-tile b { font-size: 1.45rem; line-height: 1.2; color: var(--primary); }
.stat-tile span { color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.stats-table { font-size: 0.86rem; }
.stats-table th, .stats-table td { padding: 8px 6px; }
.stats-table th:not(:first-child), .stats-table td:not(:first-child) { text-align: right; white-space: nowrap; }
.stats-table th { white-space: normal !important; vertical-align: bottom; line-height: 1.3; }
.stats-table td:first-child { font-weight: 600; min-width: 150px; }
.stats-table small { color: var(--muted); font-weight: 400; }
.stats-table tr.not-started td { color: var(--muted); }
.stats-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: 0; }
/* Admin → community flags: a small round play button before each post. */
.flag-play { width: 30px; height: 30px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; vertical-align: middle; margin-right: 6px; }
.flag-play svg { width: 13px; height: 13px; }
.flags-table td { vertical-align: middle; }
.lid-mismatch { color: var(--danger); font-weight: 600; font-size: 0.88rem; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px;
  font-weight: 600; font-size: 0.92rem; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; max-width: calc(100vw - 32px); text-align: center;
  z-index: 40; /* over the sticky footer (10) and the side drawer (31) */
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); color: #fbf6ec; }

/* The tagline at the top of every Speak / Listen / Write card. */
/* The same gap on every page between the line under it and what follows: --tagline-gap
   (smaller on short phones). Cards that space their parts with a gap of their own
   (--card-gap) take it off the tagline's margin. */
:root { --tagline-gap: 22px; }
.hero-greet.card-tagline { margin: -8px auto var(--tagline-gap); font-size: 1.5rem; }
.card-tagline + * { margin-top: 0 !important; }
/* Under it, a short gold-orange stroke like Welcome's (smaller, as the tagline is). */
.hero-greet.card-tagline::after {
  content: ""; display: block; width: 40px; height: 3px; margin: 8px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
}
/* On Welcome, the tagline is a little bigger than on the other pages. */
.hero > .hero-greet.card-tagline { font-size: 2.6rem; }
.hero > .hero-greet.card-tagline::after { width: 48px; }
@media (max-width: 520px) { .hero > .hero-greet.card-tagline { font-size: 2.2rem; } }
@media (max-width: 520px) and (max-height: 760px) { .hero > .hero-greet.card-tagline { font-size: 1.9rem; } }
@media (max-width: 520px) and (max-height: 620px) { .hero > .hero-greet.card-tagline { font-size: 1.7rem; } }
@media (max-width: 520px) and (max-height: 520px) { .hero > .hero-greet.card-tagline { font-size: 1.5rem; } }

/* About / Contact / Privacy links: a footer bar that, like the header, stays on screen
   while the page scrolls. Pages flipping past slide under it, as with the header. */
.footer {
  display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: auto; padding: 16px 24px; font-size: 0.85rem; color: var(--muted);
  background: var(--surface); border-top: 1px solid var(--border); /* same as the header */
  position: sticky; bottom: 0; z-index: 10;
}
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 600; }
.footer-links svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.footer-links a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 520px) { .footer { padding: 12px 16px; } }

/* About / Contact / Privacy */
.info-page { position: relative; max-width: 720px; margin: 0 auto; }
.info-page .page-title { padding-right: 40px; }
.info-body { line-height: 1.6; }
.info-body h2 { font-size: 1.05rem; margin: 22px 0 6px; }
.info-body ul { padding-left: 20px; margin: 6px 0; }
.info-body li { margin: 4px 0; }
.info-body .credit { margin-top: 22px; color: var(--muted); font-size: 0.85rem; }
.contact-form { margin-top: 18px; }
.contact-form .actions { justify-content: flex-end; }
.contact-form input, .contact-form textarea { width: 100%; }
/* Spam trap: off-screen rather than display:none, which some bots skip. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-sent { margin-top: 18px; }
.message-item { border-top: 1px solid var(--border); padding: 14px 0; }
.message-item header { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.message-item .hint { color: var(--muted); font-size: 0.82rem; }
/* Whether the message reached your inbox by email. */
.mail-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.02em;
}
.mail-badge svg { width: 12px; height: 12px; }
.mail-badge.ok { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); border: 1px solid color-mix(in srgb, var(--good) 45%, transparent); }
.mail-badge.no { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.message-item p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 10px; }
/* Delete, under each message. */
.msg-actions { display: flex; gap: 8px; }
/* Sources → Make a link: tag, language and page language, then the link and Copy. */
.link-maker { margin: 0 0 28px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.link-maker h2 { font-size: 1.05rem; margin: 0 0 12px; }
.link-fields { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: 0 12px; }
.link-fields .field { margin-bottom: 8px; min-width: 0; }
.link-maker .hint { font-size: 0.82rem; color: var(--muted); margin: 0 0 12px; }
.link-maker .hint.bad { color: var(--danger); font-weight: 600; }
.link-out { display: flex; gap: 8px; }
.link-out input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 0.88rem; }
.link-out .btn { white-space: nowrap; }
.link-out .btn svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .link-fields { grid-template-columns: 1fr; }
  .link-out { flex-direction: column; }
}

.play-big {
  width: 92px; height: 92px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--primary); color: var(--primary-ink); display: grid; place-items: center;
  margin: 22px auto 8px;
}
.play-big svg { width: 36px; height: 36px; }
.vote-row { display: flex; justify-content: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.vote-row .btn { min-width: 130px; }
/* Listen: "12 recordings left to validate", under the tagline, highlighted. */
.listen-left {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; width: fit-content;
  margin: -4px auto 14px; padding: 5px 16px 5px 14px; border-radius: 999px; cursor: help;
  background: linear-gradient(110deg, var(--primary), color-mix(in srgb, var(--accent) 65%, var(--primary)));
  color: var(--primary-ink); font-size: 0.88rem; font-weight: 700;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}
.listen-left[hidden] { display: none; }
.listen-left svg { width: 16px; height: 16px; flex: none; }
/* Listen: No · Skip · Yes, with Skip a small text button between the two votes. */
.listen-votes { align-items: center; }
.listen-votes .btn.big { min-width: 112px; padding: 10px 22px; font-size: 0.98rem; }
.listen-votes .listen-skip { min-width: 0; padding: 6px 10px; font-size: 0.9rem; gap: 5px; }
.listen-votes .listen-skip svg { width: 15px; height: 15px; }
@media (max-width: 520px) {
  .listen-votes { gap: 8px; flex-wrap: nowrap; }
  .listen-votes .btn.big { min-width: 0; padding: 10px 16px; }
  .listen-votes .btn svg { flex: none; }
}

/* --- phones: shorter layout ------------------------------------------- */

/* Tighter vertical spacing so the Speak and Listen cards fit on one phone
   screen with the browser's address bar showing. */
@media (max-width: 520px) {
  .topbar { padding-top: 8px; padding-bottom: 8px; row-gap: 8px; }
  main { padding-top: 12px; padding-bottom: 14px; }
  .card { padding: 16px 14px; }
  .reel { margin: -4px -14px 10px; padding-bottom: 6px; }
  .instruction { margin-bottom: 8px; }
  .prompt { min-height: 110px; gap: 8px; padding: 6px 4px; }
  .recorder { gap: 8px; margin: 10px 0 2px; }
  .mic, .play-big { width: 76px; height: 76px; }
  .mic svg { width: 32px; height: 32px; }
  .play-big { margin: 10px auto 6px; }
  .play-big svg { width: 30px; height: 30px; }
  .submit-btn { height: 50px; }
  .actions { margin-top: 12px; }
  .vote-row { margin-top: 10px; }
}

/* Phones: the app fills the screen exactly and the page itself never scrolls. Header
   and footer stay put; the Speak / Listen / Write card stretches to the space
   between them. A page too tall for that space (Welcome, About…) scrolls inside it. */
@media (max-width: 520px) {
  html, body { height: 100%; overflow: hidden; }
  body { height: 100dvh; min-height: 0; }
  .topbar, .stats, .footer { flex: none; }
  main {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column;
  }
  main > * { flex: none; width: 100%; } /* margin: auto would otherwise shrink them to fit */
  .page-card, .speak-card, .listen-card { min-height: 0; flex: 1 0 auto; }
  /* Footer on one row, to leave the card as much room as possible. */
  .footer { padding: 8px 12px; }
  .footer-links { gap: 14px; flex-wrap: nowrap; }
  .footer-links a { gap: 4px; font-size: 0.78rem; white-space: nowrap; }
  .footer-links svg { width: 14px; height: 14px; }
}
@media (max-width: 400px) { .footer-links svg { display: none; } }

/* Shorter phones: Speak, Listen and Write tighten up so the whole card fits on screen
   (and app.js scales what's left over, see fitCard). */
@media (max-width: 520px) and (max-height: 760px) {
  .topbar { padding-top: 6px; padding-bottom: 6px; row-gap: 6px; }
  .modes a { padding-top: 6px; padding-bottom: 6px; }
  main { padding-top: 10px; padding-bottom: 10px; }
  :root { --tagline-gap: 14px; }
  .hero-greet.card-tagline { margin-top: -4px; font-size: 1.3rem; }
  .prompt { min-height: 0; }
  .write-logo { width: 72px; height: 72px; margin-bottom: 2px; }
  .write-head .page-title { font-size: 1.35rem; }
  .write-head .lede { margin-bottom: 14px; font-size: 0.95rem; line-height: 1.45; }
  .write-actions { gap: 10px; }
}
@media (max-width: 520px) and (max-height: 620px) {
  :root { --tagline-gap: 10px; }
  .hero-greet.card-tagline { font-size: 1.15rem; }
  .reel { margin-bottom: 6px; }
  .instruction { margin-bottom: 4px; font-size: 0.9rem; }
  .instruction-hint { font-size: 0.82rem; }
  .prompt { gap: 6px; padding: 2px 4px; }
  .prompt .main { font-size: 1.25rem; }
  .recorder { gap: 6px; margin-top: 6px; }
  .mic, .play-big { width: 64px; height: 64px; }
  .mic svg, .play-big svg { width: 28px; height: 28px; }
  .play-big { margin: 6px auto 4px; }
  .submit-btn { height: 46px; }
  .actions { margin-top: 8px; }
  .vote-row { margin-top: 6px; }
  .write-logo { display: none; }
  .write-head .lede { font-size: 0.9rem; }
  .write-card .field { margin-bottom: 10px; }
}

/* Phones: Welcome fills the screen like Speak and Listen, its card centred in the
   space (and scaled by fitCard if still too tall). */
@media (max-width: 520px) {
  .welcome-page { display: flex; flex-direction: column; flex: 1 0 auto; }
  .welcome-page > .hero { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
  .welcome-page .afi-cta { align-self: center; }
}
@media (max-width: 520px) and (max-height: 760px) {
  .welcome-page > .hero { padding: 20px 14px 18px; }
  .welcome-page .afi-cta { margin: 0 0 14px; }
  .welcome-page .hero-rule { margin: 0 auto 12px; }
  .welcome-page .hero-lede { margin-bottom: 30px; font-size: 0.98rem; line-height: 1.5; }
}
@media (max-width: 520px) and (max-height: 620px) {
  .welcome-page .afi-cta { margin: 0 0 10px; }
  .welcome-page .hero-lede { margin-bottom: 22px; font-size: 0.92rem; }
  .welcome-page .hero-actions { gap: 8px; }
}
/* Phones: How to help fills the screen the same way (and scrolls when there's more), and
   the three ways to help become compact rows (icon, then title and text; the row is the link). */
@media (max-width: 520px) {
  .help-page { display: flex; flex-direction: column; flex: 1 0 auto; }
  .help-page > .help-card {
    --card-gap: 16px; flex: 1 0 auto; display: flex; flex-direction: column; padding: 20px 14px;
  }
  /* As on Speak and Listen: the tagline at the top, any room left at the bottom. */
  .help-card > .card-tagline { margin-top: -6px; }
  .help-card > :last-child { margin-bottom: auto; }
  .help-page .ways { gap: 10px; }
  .help-page .way {
    display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 2px; align-items: center;
    padding: 12px 14px;
  }
  .help-page .way-icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 11px; }
  .help-page .way h3 { margin: 0; font-size: 1.02rem; }
  .help-page .way p { font-size: 0.88rem; line-height: 1.4; }
  .help-page .way-cta { display: none; }
  .help-page .steps { gap: 10px; }
  .help-page .dialects p { margin-bottom: 10px; font-size: 0.92rem; }
  .help-page .chips { gap: 6px; }
  .help-page .chips li { padding: 4px 11px; font-size: 0.85rem; }
}

@media (max-width: 520px) and (max-height: 700px) {
  .help-page > .help-card { --card-gap: 12px; padding-block: 16px; }
  .help-page .journey h2 { margin-bottom: 10px; }
  .help-page .steps { gap: 6px; }
  .help-page .steps li { min-height: 36px; padding-top: 3px; font-size: 0.92rem; line-height: 1.4; }
  .help-page .dialects h2 { margin-bottom: 6px; }
}

/* Phones: Partners fills the screen the same way: tagline at the top, the rest below. */
@media (max-width: 520px) {
  .partners-page { display: flex; flex-direction: column; flex: 1 0 auto; }
  .partners-page > .partners-card { flex: 1 0 auto; display: flex; flex-direction: column; }
  .partners-card > :last-child { margin-bottom: auto; }
  .partners-hero .way-icon { width: 40px; height: 40px; margin-bottom: 10px; }
  .partners-join p { margin-bottom: 16px; }
}

/* The very shortest screens: everything tightens. */
@media (max-width: 520px) and (max-height: 520px) {
  .welcome-page .hero-rule { height: 16px; margin-bottom: 6px; }
  .welcome-page > .hero { padding-block: 12px; }
  .welcome-page .pipe { margin-bottom: 10px; }
  .welcome-page .pipe-vis { height: 44px; }
  .welcome-page .pipe-flow { margin-top: 22px; }
  .welcome-page .hero-actions .btn { padding-block: 10px; }
  .welcome-page .afi-cta { margin-bottom: 8px; }
  .welcome-page .hero-actions { gap: 6px; }
  .welcome-page .hero-lede { font-size: 0.84rem; line-height: 1.4; }
}

/* The selected language's name, wherever it appears (highlightLang in app.js): bold, in
   the app's brown. */
mark.lang-hl { font-weight: 700; color: var(--primary); background: none; }

/* --- Welcome: your voice → dataset → AI model → translation (heroPipeline) ---- */
.net-lines line { stroke: var(--gold); stroke-width: 1; opacity: 0.35; animation: net-pulse 2.6s ease-in-out infinite; animation-delay: var(--d); }
.net-nodes circle { fill: var(--accent); animation: net-node 2.6s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes net-pulse { 50% { opacity: 0.9; stroke: var(--accent); } }
@keyframes net-node { 50% { transform: scale(1.35); fill: var(--gold); } }

/* 1: voice → dataset → AI model → translation. Each step: a 72px-high visual, then its label. */
.pipe { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 0 auto 34px; }
.pipe-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.pipe-vis { height: 72px; display: grid; place-items: center; }
.pipe-step small { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.pipe-icon {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent);
}
.pipe-icon svg { width: 26px; height: 26px; }
.pipe-logo {
  width: 132px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 35%, var(--surface), color-mix(in srgb, var(--surface-2) 70%, var(--surface)));
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--gold) 60%, transparent);
}
.pipe-logo .brand-cl { font-size: 24px; }
.pipe-logo .brand-my { font-size: 10px; }
.pipe-logo .brand-voices { font-size: 11px; }
.pipe-net { width: 96px; height: 64px; }
.pipe-flow { position: relative; flex: none; width: 40px; height: 4px; margin-top: 34px; border-radius: 2px; background: color-mix(in srgb, var(--gold) 35%, transparent); overflow: hidden; }
.pipe-flow i {
  position: absolute; top: -1px; left: -8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pipe-dot 1.8s linear infinite;
}
.pipe-flow i:nth-child(2) { animation-delay: 0.6s; } .pipe-flow i:nth-child(3) { animation-delay: 1.2s; }
@keyframes pipe-dot { to { left: 100%; } }
/* The phrases are stacked in one grid cell and take turns; each draws its own box, so the
   box fits the phrase showing. Each line stays on one line: the box widens (to the right)
   rather than growing taller over its label. */
.pipe-out { display: grid; place-items: center start; }
/* The translation step: its box starts right at the dots before it and grows to the right. */
.pipe-step:last-child { align-items: stretch; }
.pipe-step:last-child .pipe-vis { place-items: center start; }
.pipe-step:last-child small { text-align: center; }
.pipe-out > span {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: max-content; white-space: nowrap; text-align: center; font-size: 0.86rem; line-height: 1.2;
  padding: 6px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  opacity: 0; animation: pipe-word 9s infinite; animation-delay: calc(var(--k) * 3s);
}
.pipe-out b { color: var(--primary); }
.pipe-out b[lang] { color: var(--accent); }
.pipe-out i { font-style: normal; color: var(--muted); font-size: 0.8rem; }
@keyframes pipe-word { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }

@media (max-width: 520px) {
  .pipe { gap: 2px; margin-bottom: 26px; }
  .pipe-vis { height: 60px; }
  .pipe-icon { width: 40px; height: 40px; } .pipe-icon svg { width: 20px; height: 20px; }
  .pipe-logo { width: 84px; height: 40px; } .pipe-logo .brand-cl { font-size: 15px; } .pipe-logo .brand-my, .pipe-logo .brand-voices { font-size: 7.5px; }
  .pipe-net { width: 52px; height: 38px; }
  .pipe-flow { width: 10px; margin-top: 28px; }
  .pipe-out > span { font-size: 0.68rem; padding: 4px 7px; border-radius: 10px; }
  .pipe-step small { font-size: 0.56rem; letter-spacing: 0.02em; }
}
@media (prefers-reduced-motion: reduce) {
  .net-lines line, .net-nodes circle, .pipe-flow i { animation: none; }
  .pipe-out > span { animation: none; } .pipe-out > span:not(:first-child) { display: none; } .pipe-out > span:first-child { opacity: 1; }
}

/* --- side navigation (renderSidenav in app.js) ------------------------- */
/* Computers: a sidebar always on the left, below the header; the pages move over
   (the header and footer keep the full width). */
:root { --sidenav-w: 228px; }
.sidenav {
  position: fixed; left: 0; top: var(--header-h, 79px); bottom: 0; z-index: 8; width: var(--sidenav-w);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; padding: 18px 12px calc(var(--footer-h, 53px) + 8px);
  background: var(--surface); border-right: 1px solid var(--border);
}
/* The background: the sun crossing the sky from east to west (right to left), rising and setting in an arc over a
   baobab tree on the savanna. The arc is drawn point by point (a sine curve), since one
   animation can't curve a path on its own. */
.sidenav {
  --sidenav-foot: var(--footer-h, 53px); /* just above the footer, which covers the foot of the menu */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='228' height='120'%3E%3Cg fill='%231a2033' stroke='%231a2033' stroke-linecap='round' opacity='.22'%3E%3Cpath d='M0 112q60-10 120-4t108 2v10H0z' stroke='none'/%3E%3Cpath d='M120 111c-6-20 6-40 14-58h32c8 18 20 38 14 58z' stroke='none'/%3E%3Cg fill='none' stroke-width='6'%3E%3Cpath d='M138 55c-6-8-14-12-24-12'/%3E%3Cpath d='M144 54c-3-8-8-13-14-16'/%3E%3Cpath d='M156 54c3-8 8-13 14-16'/%3E%3Cpath d='M162 55c6-8 14-12 24-12'/%3E%3C/g%3E%3Cpath d='M114 43l-8-3M114 43l-4-7M130 38l-4-7M130 38l3-7M170 38l-3-7M170 38l4-7M186 43l4-7M186 43l8-3' fill='none' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") left 0 bottom var(--sidenav-foot) / 228px 120px no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--gold) 55%, transparent), color-mix(in srgb, var(--accent) 20%, transparent) 70%, transparent) left calc(0% + -56px) bottom calc(var(--sidenav-foot) + 10px) / 56px 56px no-repeat,
    linear-gradient(to top, color-mix(in srgb, var(--accent) 22%, var(--surface)), color-mix(in srgb, var(--gold) 14%, var(--surface)) 30%, var(--surface) 60%),
    var(--surface);
  animation: sidenav-baobab 24s linear infinite reverse; /* east to west: right to left */
}
@keyframes sidenav-baobab {
  0% { background-position: left 0 bottom var(--sidenav-foot), left calc(0% + -56px) bottom calc(var(--sidenav-foot) + 10px), 0 0, 0 0; }
  4.167% { background-position: left 0 bottom var(--sidenav-foot), left calc(4.167% + -51.33px) bottom calc(var(--sidenav-foot) + 22.4px), 0 0, 0 0; }
  8.333% { background-position: left 0 bottom var(--sidenav-foot), left calc(8.333% + -46.67px) bottom calc(var(--sidenav-foot) + 34.6px), 0 0, 0 0; }
  12.5% { background-position: left 0 bottom var(--sidenav-foot), left calc(12.5% + -42px) bottom calc(var(--sidenav-foot) + 46.4px), 0 0, 0 0; }
  16.67% { background-position: left 0 bottom var(--sidenav-foot), left calc(16.67% + -37.33px) bottom calc(var(--sidenav-foot) + 57.5px), 0 0, 0 0; }
  20.83% { background-position: left 0 bottom var(--sidenav-foot), left calc(20.83% + -32.67px) bottom calc(var(--sidenav-foot) + 67.8px), 0 0, 0 0; }
  25% { background-position: left 0 bottom var(--sidenav-foot), left calc(25% + -28px) bottom calc(var(--sidenav-foot) + 77.2px), 0 0, 0 0; }
  29.17% { background-position: left 0 bottom var(--sidenav-foot), left calc(29.17% + -23.33px) bottom calc(var(--sidenav-foot) + 85.4px), 0 0, 0 0; }
  33.33% { background-position: left 0 bottom var(--sidenav-foot), left calc(33.33% + -18.67px) bottom calc(var(--sidenav-foot) + 92.3px), 0 0, 0 0; }
  37.5% { background-position: left 0 bottom var(--sidenav-foot), left calc(37.5% + -14px) bottom calc(var(--sidenav-foot) + 97.8px), 0 0, 0 0; }
  41.67% { background-position: left 0 bottom var(--sidenav-foot), left calc(41.67% + -9.33px) bottom calc(var(--sidenav-foot) + 102px), 0 0, 0 0; }
  45.83% { background-position: left 0 bottom var(--sidenav-foot), left calc(45.83% + -4.67px) bottom calc(var(--sidenav-foot) + 104px), 0 0, 0 0; }
  50% { background-position: left 0 bottom var(--sidenav-foot), left calc(50% + 0px) bottom calc(var(--sidenav-foot) + 105px), 0 0, 0 0; }
  54.17% { background-position: left 0 bottom var(--sidenav-foot), left calc(54.17% + 4.67px) bottom calc(var(--sidenav-foot) + 104px), 0 0, 0 0; }
  58.33% { background-position: left 0 bottom var(--sidenav-foot), left calc(58.33% + 9.33px) bottom calc(var(--sidenav-foot) + 102px), 0 0, 0 0; }
  62.5% { background-position: left 0 bottom var(--sidenav-foot), left calc(62.5% + 14px) bottom calc(var(--sidenav-foot) + 97.8px), 0 0, 0 0; }
  66.67% { background-position: left 0 bottom var(--sidenav-foot), left calc(66.67% + 18.67px) bottom calc(var(--sidenav-foot) + 92.3px), 0 0, 0 0; }
  70.83% { background-position: left 0 bottom var(--sidenav-foot), left calc(70.83% + 23.33px) bottom calc(var(--sidenav-foot) + 85.4px), 0 0, 0 0; }
  75% { background-position: left 0 bottom var(--sidenav-foot), left calc(75% + 28px) bottom calc(var(--sidenav-foot) + 77.2px), 0 0, 0 0; }
  79.17% { background-position: left 0 bottom var(--sidenav-foot), left calc(79.17% + 32.67px) bottom calc(var(--sidenav-foot) + 67.8px), 0 0, 0 0; }
  83.33% { background-position: left 0 bottom var(--sidenav-foot), left calc(83.33% + 37.33px) bottom calc(var(--sidenav-foot) + 57.5px), 0 0, 0 0; }
  87.5% { background-position: left 0 bottom var(--sidenav-foot), left calc(87.5% + 42px) bottom calc(var(--sidenav-foot) + 46.4px), 0 0, 0 0; }
  91.67% { background-position: left 0 bottom var(--sidenav-foot), left calc(91.67% + 46.67px) bottom calc(var(--sidenav-foot) + 34.6px), 0 0, 0 0; }
  95.83% { background-position: left 0 bottom var(--sidenav-foot), left calc(95.83% + 51.33px) bottom calc(var(--sidenav-foot) + 22.4px), 0 0, 0 0; }
  100% { background-position: left 0 bottom var(--sidenav-foot), left calc(100% + 56px) bottom calc(var(--sidenav-foot) + 10px), 0 0, 0 0; }
}
/* Smaller screens: the menu is a drawer over the footer, so the tree stands at its very foot. */
@media (max-width: 1100px) { .sidenav { --sidenav-foot: 0px; } }
/* Without motion, the sun stays at the top of its arc. */
@media (prefers-reduced-motion: reduce) { .sidenav { animation: none; background-position: left 0 bottom var(--sidenav-foot), left calc(50% + 0px) bottom calc(var(--sidenav-foot) + 105px), 0 0, 0 0; } }
/* Everything about your account sits at the bottom, just above the footer. */
.sidenav-group { display: grid; gap: 2px; padding: 8px 0; }
.sidenav-group + .sidenav-group { border-top: 1px solid var(--border); }
.sidenav a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px;
  color: #000; font-size: 0.875rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.sidenav a span { overflow: hidden; text-overflow: ellipsis; }
.sidenav a svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sidenav a:hover { background: var(--surface-2); }
/* Dark mode: light text instead of black. */
@media (prefers-color-scheme: dark) { .sidenav a { color: var(--text); } }
.sidenav a.active { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.sidenav a.active svg { color: var(--primary); }
/* Voices' menu (its links have data-route; the other sites' don't): only Welcome in bold. */
.sidenav a[data-route]:not([data-route="welcome"]) { font-weight: 500; }
.nav-toggle {
  display: none; flex: none; width: 38px; height: 38px; padding: 0; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); place-items: center; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.nav-toggle:hover { background: var(--surface-2); }
/* Back to cl2.ai, the main page, from every project. */
.home-link {
  display: grid; flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); place-items: center; text-decoration: none;
}
.home-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-link:hover { background: var(--surface-2); color: var(--primary); }
.sidenav-backdrop { position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / 0.35); }
.sidenav-backdrop[hidden] { display: none; }
@media (min-width: 1101px) {
  body { padding-left: var(--sidenav-w); }
  .topbar, .footer { margin-left: calc(-1 * var(--sidenav-w)); }
}
/* Smaller screens: the same list as a drawer, opened by the ☰ button. */
@media (max-width: 1100px) {
  .nav-toggle { display: grid; }
  .sidenav {
    top: 0; z-index: 31; width: min(280px, 84vw); padding-top: 20px; padding-bottom: 16px; box-shadow: 0 0 40px rgb(0 0 0 / 0.25);
    transform: translateX(-102%); visibility: hidden; transition: transform 0.25s ease, visibility 0s 0.25s;
  }
  .sidenav.open { transform: none; visibility: visible; transition: transform 0.25s ease; }
}
@media (max-width: 520px) { .nav-toggle, .home-link { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) { .sidenav { transition: none !important; } }

/* --- right-hand column (renderRail in app.js) --------------------------- */
/* Computers: highlights and important links on the right, below the header, like the
   sidenav on the left; slimmer on smaller computer screens (see the end of this section).
   Screens where the sidenav is a drawer don't show it (the pages need the room). */
:root { --rail-w: 316px; }
.rail { display: none; }
@media (min-width: 1101px) {
  body { padding-right: var(--rail-w); }
  .topbar, .footer { margin-right: calc(-1 * var(--rail-w)); }
  .rail {
    position: fixed; right: 0; top: var(--header-h, 79px); bottom: 0; z-index: 8; width: var(--rail-w);
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: 18px 16px calc(var(--footer-h, 53px) + 16px);
    background: color-mix(in srgb, var(--surface) 45%, var(--bg)); border-left: 1px solid var(--border);
  }
}
.rail-card {
  flex: none; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow); font-size: 0.9rem;
}
.rail-title {
  margin: 0 0 10px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.rail svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The language's card: a banner of sound bars, the mic as its avatar, then the numbers. */
.rail-lang { padding: 0 0 16px; overflow: hidden; }
.rail-lang > :not(.rail-banner) { margin-inline: 16px; }
.rail-banner {
  height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px;
  background: linear-gradient(120deg, var(--primary), color-mix(in srgb, var(--accent) 70%, var(--primary)));
}
.rail-banner i {
  width: 4px; border-radius: 2px; background: color-mix(in srgb, var(--primary-ink) 55%, transparent);
  height: 30%; animation: rail-wave 1.8s ease-in-out infinite;
}
.rail-banner i:nth-child(3n) { animation-delay: -0.4s; } .rail-banner i:nth-child(3n+1) { animation-delay: -0.9s; }
.rail-banner i:nth-child(4n) { animation-duration: 1.3s; } .rail-banner i:nth-child(5n+2) { animation-duration: 2.3s; }
@keyframes rail-wave { 0%, 100% { height: 18%; } 50% { height: 72%; } }
/* The language (mic, name ▾, native name): a button that opens the header's language
   list under it. */
.rail-lang-head {
  display: flex; align-items: flex-end; gap: 10px; width: calc(100% - 32px); margin-top: -22px; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.rail-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--primary); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border);
}
.rail-avatar svg { width: 26px; height: 26px; }
.rail-lang-text { display: grid; padding-top: 26px; min-width: 0; }
.rail-lang-name { display: inline-flex; align-items: center; gap: 5px; font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.rail-lang-name .chevron {
  width: 20px; height: 20px; flex: none; padding: 2px; border-radius: 50%; color: var(--primary); background: var(--primary-soft);
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s;
}
.rail-lang-head:hover .rail-lang-name { color: var(--primary); }
.rail-lang-head[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.rail-lang-native { color: var(--muted); font-size: 0.82rem; }
.rail-lede { margin: 8px 0 12px; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.rail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 12px; }
.rail-stats div { display: flex; flex-direction: column-reverse; padding: 7px 4px; border-radius: 10px; background: var(--surface-2); text-align: center; }
.rail-stats dd { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.rail-stats dt { font-size: 0.72rem; color: var(--muted); }
.rail-meter { display: grid; gap: 4px; margin-bottom: 14px; }
.rail-meter span { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.rail-meter span::before {
  content: ""; display: block; height: 100%; width: var(--pct); border-radius: inherit;
  background: linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 60%, var(--gold)));
}
.rail-meter small { color: var(--muted); font-size: 0.76rem; }
.rail-actions { display: grid; gap: 8px; }
.rail-actions .btn { padding: 8px 14px; font-size: 0.9rem; }
.rail-actions .btn svg { width: 17px; height: 17px; }

/* Golden rules: numbered, each opens to explain itself. */
.rail-rules { list-style: none; margin: 0; padding: 0; }
.rail-rules li + li { border-top: 1px solid var(--border); }
.rail-rules summary {
  display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; font-weight: 600; list-style: none;
}
.rail-rules summary::-webkit-details-marker { display: none; }
.rail-rules summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform 0.15s;
}
.rail-rules details[open] summary::after { transform: rotate(225deg); }
.rail-rule-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 800; background: var(--primary-soft); color: var(--primary);
}
.rail-rules details[open] .rail-rule-n { background: var(--primary); color: var(--primary-ink); }
.rail-rules p { margin: 0 0 10px 32px; color: var(--muted); font-size: 0.84rem; line-height: 1.45; }

.rail-share p { margin: 0 0 12px; color: var(--muted); line-height: 1.45; }
.rail-share .share-btns { justify-content: stretch; }
.rail-share .share-btns .btn { flex: 1; padding: 7px 10px; font-size: 0.84rem; white-space: nowrap; }
.rail-share .share-btns .btn svg { width: 16px; height: 16px; }
.rail-foot { margin: 0; text-align: center; font-size: 0.76rem; color: var(--muted); line-height: 1.7; }
.rail-foot a { color: var(--muted); text-decoration: none; }
.rail-foot a:hover { color: var(--text); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .rail-banner i { animation: none; height: 40%; } }
/* Smaller computer screens: a slimmer column. A shorter banner, no blurb, the numbers
   as a list, and smaller type. */
@media (min-width: 1101px) and (max-width: 1439px) {
  :root { --rail-w: 244px; }
  .rail { gap: 10px; padding: 14px 10px calc(var(--footer-h, 53px) + 12px); }
  .rail-card { padding: 12px; font-size: 0.84rem; }
  .rail-lang { padding: 0 0 12px; }
  .rail-lang > :not(.rail-banner) { margin-inline: 12px; }
  .rail-banner { height: 42px; padding: 0 12px; }
  .rail-banner i:nth-child(n+21) { display: none; }
  .rail-lang-head { gap: 8px; margin-top: -18px; }
  .rail-avatar { width: 40px; height: 40px; border-width: 2px; }
  .rail-avatar svg { width: 20px; height: 20px; }
  .rail-lang-head { width: calc(100% - 24px); }
  .rail-lang-text { padding-top: 20px; }
  .rail-lang-name { font-size: 1rem; }
  .rail-lang-name .chevron { width: 18px; height: 18px; }
  .rail-lang-native { font-size: 0.76rem; }
  .rail-lede { margin: 6px 0 4px; font-size: 0.76rem; }
  .rail-stats { grid-template-columns: 1fr; gap: 0; margin: 10px 0 8px; }
  .rail-stats div {
    flex-direction: row-reverse; justify-content: space-between; align-items: baseline;
    padding: 4px 2px; border-radius: 0; background: none; text-align: left;
  }
  .rail-stats div + div { border-top: 1px dashed var(--border); }
  .rail-stats dd { font-size: 0.95rem; }
  .rail-stats dt { font-size: 0.78rem; }
  .rail-meter { margin-bottom: 10px; }
  .rail-actions { gap: 6px; }
  .rail-actions .btn { padding: 6px 10px; font-size: 0.8rem; gap: 6px; }
  .rail-actions .btn svg { width: 15px; height: 15px; }
  .rail-title { font-size: 0.7rem; margin-bottom: 6px; }
  .rail-rules summary { gap: 8px; padding: 6px 0; font-size: 0.82rem; }
  .rail-rule-n { width: 20px; height: 20px; font-size: 0.7rem; }
  .rail-rules p { margin-left: 28px; font-size: 0.78rem; }
  .rail-share p { font-size: 0.8rem; margin-bottom: 10px; }
  .rail-share .share-btns { flex-direction: column; gap: 6px; }
  .rail-share .share-btns .btn { padding: 6px 10px; font-size: 0.8rem; }
  .rail-foot { font-size: 0.72rem; }
}

/* Applied by fitCard when a card is still too tall for the screen. */
.fit-card > * { zoom: var(--fit, 1); }

/* --- welcome ---------------------------------------------------------- */

.welcome { max-width: 940px; margin: 0 auto; display: grid; gap: 22px; }
.welcome h2 { font-size: 1.25rem; margin: 0 0 14px; }

/* Hero: the voice → AI pipeline, then the introduction. The brown ribbon along the top
   edge, as on the other cards, and a light gold shade fading from the top down. */
.hero {
  text-align: center; padding: 44px 28px 40px; overflow: hidden;
  background:
    linear-gradient(var(--primary), var(--primary)) top / 100% 5px no-repeat,
    linear-gradient(to bottom, color-mix(in srgb, var(--gold) 14%, var(--surface)), var(--surface) 65%);
}
/* The tagline ("my Country Languages Too !"): brown, with a small raised "my" and a
   gold-orange gradient drifting slowly through its initials C, L and T. */
.hero-greet {
  width: fit-content; margin: 0 auto; font-size: clamp(1.45rem, 4.2vw, 2.1rem); font-weight: 800; line-height: 1.15;
  letter-spacing: 0.01em; color: var(--primary); text-wrap: balance;
  background: linear-gradient(90deg, var(--gold), var(--accent), var(--gold), var(--accent), var(--gold)) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: greet-shimmer 8s linear infinite;
}
@keyframes greet-shimmer { to { background-position: -200% 0; } }
.hero-greet-sub { display: block; }
.hero-brand-my {
  display: inline-block; margin-right: 0.08em; vertical-align: 0.9em;
  font-size: 0.36em; font-style: italic; font-weight: 700; letter-spacing: 0.02em;
  -webkit-text-fill-color: var(--primary);
}
.hero-greet .hero-greet-sub { margin-top: 8px; font-size: 0.5em; font-weight: 700; letter-spacing: 0.04em;
  -webkit-text-fill-color: var(--primary); }
/* Its initials (C, L, T) let the gradient through, coloured like "CL2". */
.hero-greet-sub b { margin-right: 0.04em; font-size: 1.35em; font-style: italic; font-weight: 800; line-height: 1; -webkit-text-fill-color: transparent; }
/* And the "oo" of "Too", in the same colours (at its own size). */
.hero-greet-sub .hero-oo { -webkit-text-fill-color: transparent; }
/* The tagline's "my" matches the one before "CL2": small, italic and raised. */
.hero-greet-sub .hero-brand-my { margin-right: 0; font-size: 0.8em; vertical-align: 0.4em; }
@media (prefers-reduced-motion: reduce) { .hero-greet { animation: none; } }
/* The page's title is for screen readers and search engines only; what shows is a
   short gold-orange stroke above the introduction. */
/* Under the pipeline: a small sound-wave of seven bars, pulsing gently like a voice. */
.hero-rule { display: flex; align-items: center; justify-content: center; gap: 5px; height: 24px; margin: 2px auto 16px; }
.hero-rule i {
  width: 5px; height: var(--h); border-radius: 3px; background: linear-gradient(to top, var(--gold), var(--accent));
  animation: rule-wave 1.3s ease-in-out infinite; animation-delay: calc(var(--k) * -0.18s);
}
@keyframes rule-wave { 50% { transform: scaleY(0.5); } }
@media (prefers-reduced-motion: reduce) { .hero-rule i { animation: none; } }
.hero-lede { max-width: 640px; margin: 0 auto 40px; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn svg { width: 20px; height: 20px; }
.hero-actions .btn { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.hero-actions .btn:hover { transform: translateY(-2px); }
.hero-actions .btn.primary { box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 28%, transparent); }
.hero-actions .btn.primary:hover { box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 34%, transparent); }

/* Afiwa, the buttons and the invite: one group, which only computers lay out as such. */
.hero-go { display: contents; }
/* Computers: Welcome spreads over its card (one screen, see .strip-page). The tagline and
   the pipeline across the top; under them the introduction on the left and the group
   (Afiwa, the buttons, the invite) on the right; the rows spaced evenly down the card. */
.strip-page .hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 40px;
  grid-template-areas: "tag tag" "pipe pipe" "rule rule" "lede go";
  align-content: space-evenly; align-items: center; padding: 28px 36px;
}
.strip-page .hero > .card-tagline { grid-area: tag; margin-bottom: 0; }
.strip-page .hero > .pipe { grid-area: pipe; margin-bottom: 0; }
.strip-page .hero > .hero-rule { grid-area: rule; margin: 0 auto; }
.strip-page .hero > .hero-lede { grid-area: lede; margin: 0; text-align: left; }
.strip-page .hero > .hero-go {
  grid-area: go; display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 22px 0 22px 40px; border-left: 2px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.strip-page .hero-go .afi-cta, .strip-page .hero-go .share-row { margin: 0; }
.strip-page .hero-go .hero-actions { flex-direction: column; width: 100%; max-width: 320px; }
.strip-page .hero-go .hero-actions .btn { justify-content: center; white-space: nowrap; }
/* Narrower computer screens: one column again, the rows still spread down the card. */
@media (max-width: 1250px) and (min-width: 1101px), (max-width: 860px) {
  .strip-page .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tag" "pipe" "rule" "lede" "go"; }
  .strip-page .hero > .hero-lede { text-align: center; }
  .strip-page .hero > .hero-go { padding: 0; border-left: 0; }
  .strip-page .hero-go .hero-actions { flex-direction: row; width: auto; max-width: none; }
}

/* Computers: the other pages spread over their card like Welcome. Speak, Listen, Write and
   Partners keep the tagline at the top and spread the rest down the card, rather than
   leaving the room over at the bottom. */
.strip-page .partners-card { display: flex; flex-direction: column; }
.strip-page :is(.page-card, .speak-card, .listen-card, .partners-card) { justify-content: space-between; }
.strip-page :is(.page-card, .speak-card, .listen-card, .partners-card) > :last-child { margin-bottom: 0; }
/* How to help: the three ways as compact tiles across the top, then where a recording goes
   and the accents side by side, a gold line between them as on Welcome. */
.strip-page .help-card {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 18px;
  grid-template-areas: "tag tag" "title title" "ways ways" "journey dialects";
  align-content: space-evenly; padding: 28px 36px;
}
.strip-page .help-card > .card-tagline { grid-area: tag; margin-bottom: 0; }
.strip-page .help-card > .welcome-h { grid-area: title; margin: 0 !important; }
.strip-page .help-card > .ways { grid-area: ways; gap: 14px; }
.strip-page .help-card > .journey { grid-area: journey; }
.strip-page .help-card > .dialects {
  grid-area: dialects; padding: 0 0 0 40px; border-left: 2px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.strip-page .help-page .way {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start;
  padding: 14px 16px;
}
.strip-page .help-page .way-icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 11px; }
.strip-page .help-page .way h3 { margin: 0; font-size: 1.02rem; }
.strip-page .help-page .way p { font-size: 0.88rem; line-height: 1.45; }
.strip-page .help-page .way-cta { display: none; }
.strip-page .help-card .journey h2, .strip-page .help-card .dialects h2 { margin-bottom: 14px; }
.strip-page .help-card .steps { grid-template-columns: 1fr; gap: 12px; }
.strip-page .help-card .steps li { padding: 5px 0 0 48px; min-height: 36px; font-size: 0.94rem; }
.strip-page .help-card .steps li:not(:last-child)::after { display: none; }

/* "Know other … speakers? Invite them": under Welcome's buttons and after sending recordings. */
.share-row { margin-top: 22px; text-align: center; }
.share-row p { margin: 0 0 10px; color: var(--muted); font-size: 0.95rem; }
.share-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.share-btns .btn { padding: 8px 16px; font-size: 0.92rem; }
.share-btns .btn svg { width: 18px; height: 18px; }
.btn.whatsapp { border-color: var(--good); color: var(--good); }


/* How to help: two cards, the three ways and where a recording goes (with the accents).
   Inside them the three ways are light tiles and the rest plain sections, rather than
   boxes in a box. */
.help-card { --card-gap: 30px; display: grid; gap: var(--card-gap); padding: 32px 28px; }
.help-card .welcome-h { margin-top: 0 !important; }
.help-card > .card-tagline, .partners-card > .card-tagline { margin-bottom: calc(var(--tagline-gap) - var(--card-gap)); }
.help-card .journey h2 { text-align: center; margin-bottom: 18px; }
/* The card titles (here and on Partners) in the brown of the cards' top ribbon. */
.help-card .welcome-h, .help-card .journey h2, .partners-hero h1 { color: var(--primary); }
.help-card .way { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); box-shadow: none; }
@media (max-width: 520px) { .help-card { --card-gap: 24px; padding: 24px 16px; } }

/* Three ways to help. */
.welcome-h { text-align: center; margin: 10px 0 -6px !important; }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.way {
  display: flex; flex-direction: column; gap: 8px; padding: 22px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.way:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 12px 28px rgb(0 0 0 / 0.1); }
.way-icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary);
}
.way-icon svg { width: 22px; height: 22px; }
.way h3 { margin: 6px 0 0; font-size: 1.12rem; }
.way p { margin: 0; flex: 1; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.way-cta { color: var(--primary); font-weight: 700; font-size: 0.92rem; }

/* Where your voice goes: numbered steps joined by a dashed line. */
.steps {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.steps li { counter-increment: step; position: relative; padding-top: 48px; color: var(--muted); line-height: 1.5; }
.steps li::before {
  content: counter(step); position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); font-weight: 800;
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; left: 46px; right: -10px; border-top: 2px dashed var(--border);
}
.steps b { color: var(--text); }

/* Dialect chips. */
.dialects { text-align: center; padding: 6px 0; }
.dialects p { max-width: 560px; margin: -4px auto 16px; color: var(--muted); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips li {
  padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  font-weight: 600; font-size: 0.92rem;
}

/* --- partners (last page of the strip) --------------------------------- */

/* Everything in one card, like How to help: the partners are light tiles inside it. */
.partners-card { --card-gap: 30px; display: grid; gap: var(--card-gap); padding: 36px 28px; }
@media (max-width: 520px) { .partners-card { --card-gap: 24px; padding: 26px 16px; } }
.partners-hero { text-align: center; }
.partners-hero h1 { margin: 0 0 10px; font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.25; }
.partners-card .partner { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); box-shadow: none; }
.partners-hero .way-icon { margin: 0 auto 14px; }
.partner-group { display: grid; gap: 22px; }
.partners-hero .hero-lede { margin-bottom: 0; }
/* A few cards sit centred under their heading rather than in a half-empty row. */
.partner-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.partner-grid li { flex: 0 1 220px; }
@media (max-width: 520px) { .partner-grid li { flex-basis: 100%; } }
.partner {
  height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 18px; text-align: center; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
a.partner:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 12px 28px rgb(0 0 0 / 0.1); }
/* Logos sit on a light tile so dark or transparent ones stay readable in dark mode. */
.partner-logo {
  width: 100%; height: 84px; display: grid; place-items: center; padding: 10px; box-sizing: border-box;
  background: #f9fafd; border-radius: 12px;
}
.partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-logo.initial {
  width: 64px; height: 64px; border-radius: 50%; background: var(--primary-soft); color: var(--primary);
  font-size: 1.6rem; font-weight: 800;
}
.partner h3 { margin: 6px 0 0; font-size: 1.05rem; }
.partner p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.partners-join { text-align: center; }
.partners-join p { max-width: 560px; margin: 0 auto 20px; color: var(--muted); line-height: 1.6; }
.partners-join .btn svg { width: 20px; height: 20px; }

@media (max-width: 760px) {
  .ways { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .steps li { padding: 6px 0 0 50px; min-height: 36px; }
  .steps li:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) {
  .welcome { gap: 16px; }
  .hero { padding: 26px 16px 24px; }
  .afi-cta { margin-bottom: 16px; }
  .hero-actions .btn { width: 100%; }
  .way { padding: 18px; }
}

/* --- Afiwa and her tour ----------------------------------------------- */

/* "Tap Afiwa for a one-minute tour": a pill with Afiwa's face that starts her tour, with
   a gold-orange edge, and rings rippling out from her face to invite a tap. */
.afi-cta {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 5px 22px 5px 5px;
  border: 2px solid transparent; border-radius: 999px; cursor: pointer;
  background:
    linear-gradient(color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface)) padding-box,
    linear-gradient(110deg, var(--gold), var(--accent), var(--gold)) border-box;
  color: var(--primary); font: inherit; font-weight: 600; font-size: 1.02rem;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 16%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.afi-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 26%, transparent); }
.afi-cta-text b { color: var(--accent); font-weight: 800; }
.afi-cta-face {
  position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--gold) 70%, transparent);
  transition: transform 0.2s ease;
}
.afi-cta:hover .afi-cta-face { transform: rotate(-6deg) scale(1.05); }
.afi-cta-face::before, .afi-cta-face::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); animation: afi-ripple 2.8s ease-out infinite;
}
.afi-cta-face::after { animation-delay: 1.4s; }
@keyframes afi-ripple { from { transform: scale(1); opacity: 0.85; } to { transform: scale(1.5); opacity: 0; } }
.afi-cta-face .afi { display: block; width: 100%; height: 100%; }
/* A play badge on her face, gently pulsing. */
.afi-cta-play {
  position: absolute; z-index: 1; right: -5px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--primary-ink);
  box-shadow: 0 0 0 2px var(--surface); animation: afi-pulse 2s ease-in-out infinite;
}
.afi-cta-play svg { width: 11px; height: 11px; margin-left: 2px; }
@keyframes afi-pulse { 50% { transform: scale(1.15); } }
@media (max-width: 520px) {
  .afi-cta { gap: 10px; padding-right: 16px; font-size: 0.94rem; }
  .afi-cta-face { width: 44px; height: 44px; }
  .afi-cta-play { width: 20px; height: 20px; }
  .afi-cta-play svg { width: 9px; height: 9px; }
}

/* Afiwa's drawing. */
.afi-bg { fill: var(--primary-soft); }
.afi-skin { fill: #8a5a3c; }
/* Lines drawn over the outfits (folds, uli art, borders); colours come from TARGETS. */
.afi-line { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.afi-fold { opacity: 0.75; }
.afi-bead { stroke: rgb(0 0 0 / 0.25); stroke-width: 0.5; }
.afi-brow { fill: none; stroke: #3a2416; stroke-width: 1.6; stroke-linecap: round; }
.afi-eyes { fill: #24160d; transform-box: fill-box; transform-origin: center; animation: afi-blink 4.6s infinite; }
.afi-cheek { fill: #d07a5f; opacity: 0.35; }
.afi-smile { fill: none; stroke: #4a2112; stroke-width: 2; stroke-linecap: round; }
.afi-mouth { fill: #4a1d10; opacity: 0; transform-box: fill-box; transform-origin: center; }
.afi.talking .afi-smile { opacity: 0; }
.afi.talking .afi-mouth { opacity: 1; animation: afi-talk 0.24s ease-in-out infinite alternate; }
@keyframes afi-blink { 0%, 93%, 100% { transform: none; } 95.5% { transform: scaleY(0.1); } }
@keyframes afi-talk { from { transform: scaleY(0.25); } }

/* The tour plays in the hero, in place of its content. */
/* The tour covers the whole page below the header (--top: where the header ends,
   set from JS). It sits under the header so the header's menus open over it. */
body.touring { overflow: hidden; }
body.touring .footer { visibility: hidden; }
.tour-stage {
  position: fixed; inset: var(--top, 0) 0 0 0; z-index: 9; overflow-y: auto; overscroll-behavior: contain;
  display: grid; place-items: center; padding: 24px 16px; background: var(--bg);
  animation: tour-in 0.25s ease;
}
@keyframes tour-in { from { opacity: 0; } }
.explainer {
  display: grid; gap: 14px; width: min(900px, 100%); padding: 22px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.ex-screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; border: 1px solid var(--border);
  /* Short screens: the scene gives up height (not width) so the title row, caption and
     controls stay in view. */
  width: 100%; max-height: max(220px, calc(100dvh - var(--top, 0px) - 360px));
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 0%, var(--primary-soft), transparent 70%), var(--surface-2);
}
.ex-screen video { width: 100%; height: 100%; background: #000; }
.ex-scene {
  width: 100%; height: 100%; display: grid; place-items: center; padding: 18px;
  animation: ex-in 0.5s ease;
}
@keyframes ex-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.ex-narrator { display: flex; align-items: center; gap: 12px; }
.ex-narrator .afi { width: 58px; height: 58px; flex: none; }
.ex-caption { margin: 0; min-height: 3em; font-size: 1.02rem; line-height: 1.5; }
.ex-controls { display: flex; align-items: center; gap: 10px; }
.ex-note {
  margin: -4px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 0.86rem;
  background: var(--surface-2); color: var(--muted);
}
.ex-note[hidden] { display: none; }
.ex-controls .icon-btn { width: 38px; height: 38px; flex: none; }
.ex-controls .icon-btn svg { width: 17px; height: 17px; }
.ex-title { flex: 1; font-weight: 700; }
/* Top row: the tour's title, and × at the right. Tucked up towards the box's corner. */
.ex-top { display: flex; align-items: center; gap: 10px; margin: -14px -14px -4px 0; }
.ex-top .icon-btn { width: 34px; height: 34px; flex: none; }
.ex-top .icon-btn svg { width: 16px; height: 16px; }
.ex-parts { flex: 1; display: flex; gap: 4px; }
.ex-parts button { flex: 1; height: 18px; padding: 0; border: none; background: none; cursor: pointer; display: flex; align-items: center; }
.ex-parts span { position: relative; display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 3px; background: var(--border); }
.ex-parts span::after {
  content: ""; position: absolute; inset: 0; background: var(--primary); transform: scaleX(0); transform-origin: left;
}
.ex-parts .done span::after { transform: none; }
.ex-parts .current span::after { animation: ex-grow var(--dur) linear forwards; }
.explainer.paused .ex-parts .current span::after { animation-play-state: paused; }
@keyframes ex-grow { to { transform: none; } }

/* Scene pieces. Anything with .ex-later appears at its --at time. */
.ex-later { opacity: 0; animation: ex-appear 0.45s var(--at, 1s) forwards; }
@keyframes ex-appear { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes ex-pop { from { opacity: 0; transform: scale(0.6); } }
.ex-langs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.ex-langs span {
  padding: 10px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  font-weight: 700; font-size: clamp(1rem, 3vw, 1.5rem); animation: ex-pop 0.5s backwards;
}
.ex-langs span:nth-child(2) { animation-delay: 0.5s; }
.ex-langs span:nth-child(3) { animation-delay: 0.9s; }
.ex-langs span:nth-child(4) { animation-delay: 1.2s; }
.ex-langs .ex-swap { border: none; background: none; color: var(--primary); }
.ex-card {
  width: min(420px, 100%); display: grid; justify-items: center; gap: 12px; padding: 18px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.ex-sentence { margin: 0; font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.3rem); }
/* Speak: the mic (caramel with a cream icon, as on the Speak page) is tapped and
   the voice comes in. */
.ex-mic {
  position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: var(--primary-ink);
}
.ex-mic svg { width: 26px; height: 26px; position: relative; }
.ex-ring {
  position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--primary); opacity: 0;
  animation: ex-ring 1.2s 1.4s ease-out infinite;
}
@keyframes ex-ring { from { opacity: 0.7; transform: scale(0.9); } to { opacity: 0; transform: scale(1.45); } }
.ex-bars { display: flex; align-items: center; gap: 4px; height: 28px; opacity: 0; animation: ex-show 0.3s 1.4s forwards; }
.ex-bars span {
  width: 4px; height: 100%; border-radius: 2px; background: var(--primary); transform: scaleY(0.2);
  animation: ex-voice 0.7s ease-in-out infinite alternate; animation-delay: calc(var(--j) * -0.13s);
}
@keyframes ex-show { to { opacity: 1; } }
@keyframes ex-voice { to { transform: scaleY(1); } }
/* Submit: five sentences fill in, then the pill fills and turns ready. */
/* Ten dots, filling one after another while the Submit pill fills. */
.ex-dots { display: flex; gap: 6px; }
.ex-dots span {
  width: 20px; height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  animation: ex-dot 0.25s calc(0.4s + var(--d) * 0.29s) forwards;
}
@keyframes ex-dot { to { background: var(--primary); border-color: var(--primary); } }
.ex-submit {
  position: relative; overflow: hidden; width: min(250px, 100%); height: 48px; border-radius: 999px;
  display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700;
}
.ex-fill { position: absolute; inset: 0; background: var(--primary); transform: scaleX(0); transform-origin: left; animation: ex-grow 3s 0.4s linear forwards; }
.ex-submit-label { position: relative; display: inline-flex; align-items: center; gap: 8px; animation: ex-ink 0.2s 3.4s forwards; }
.ex-submit.ex-ready { background: var(--primary); }
.ex-submit.ex-ready .ex-submit-label { color: var(--primary-ink); animation: none; }
.ex-submit-label svg { width: 18px; height: 18px; }
@keyframes ex-ink { to { color: var(--primary-ink); } }
.ex-done { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--good); font-weight: 800; }
.ex-done svg { width: 20px; height: 20px; }
/* Listen: the clip plays, then Yes is chosen. */
.ex-play { animation: none; }
.ex-play svg { margin-left: 3px; }
.ex-progress { width: 80%; height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface-2); }
.ex-progress span { display: block; height: 100%; background: var(--primary); transform: scaleX(0); transform-origin: left; animation: ex-grow 2.4s 0.6s linear forwards; }
.ex-votes { display: flex; gap: 12px; }
.ex-votes span {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid currentColor; font-weight: 700;
}
.ex-votes svg { width: 16px; height: 16px; }
.ex-yes { color: var(--good); animation: ex-vote 0.35s 3.3s forwards; }
.ex-no { color: var(--danger); opacity: 0.75; }
@keyframes ex-vote { to { background: var(--good); color: #fbf6ec; transform: scale(1.08); } }
/* Write: a sentence is typed, then the submit pill is ready. */
.ex-field {
  width: 100%; min-height: 54px; display: flex; align-items: center; padding: 12px 14px; text-align: left;
  background: var(--field); border: 1px solid var(--border); border-radius: 10px; font-weight: 600;
}
.ex-typed {
  display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom;
  animation: ex-type 2.4s 0.5s steps(var(--n)) forwards;
}
@keyframes ex-type { to { max-width: calc(var(--n) * 1ch); } }
.ex-caret { width: 2px; height: 1.2em; margin-left: 1px; background: var(--primary); animation: ex-blink 1s steps(1) infinite; }
@keyframes ex-blink { 50% { opacity: 0; } }
/* Dataset: clips fly into the open dataset, which feeds the translator. */
.ex-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.ex-clips { display: flex; flex-direction: column; gap: 8px; }
.ex-clips span {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: var(--primary-ink);
  animation: ex-fly 1.1s calc(0.3s + var(--d) * 0.35s) ease-in forwards;
}
.ex-clips svg { width: 18px; height: 18px; }
@keyframes ex-fly { to { opacity: 0; transform: translateX(72px) scale(0.3); } }
.ex-db {
  display: grid; justify-items: center; gap: 6px; padding: 16px 18px; border-radius: 16px; color: var(--primary);
  background: var(--surface); border: 1px solid var(--border); animation: ex-glow 0.5s 1.5s ease 2 alternate;
}
.ex-db svg { width: 42px; height: 42px; }
.ex-db b { color: var(--text); font-size: 0.9rem; }
@keyframes ex-glow { to { box-shadow: 0 0 0 7px var(--primary-soft); } }
.ex-arrow { font-size: 1.7rem; color: var(--primary); }
.ex-translate { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.ex-translate span { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.ex-translate b { color: var(--primary); }
/* The end: Akpe! and the way in. */
.ex-end { display: grid; justify-items: center; gap: 16px; }
.ex-akpe { margin: 0; font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 800; color: var(--primary); animation: ex-pop 0.6s backwards; }

@media (max-width: 520px) {
  .tour-stage { padding: 12px; }
  .explainer { padding: 14px; }
  .ex-top { margin: -8px -8px -4px 0; }
  /* Phones: the stacked scenes are never cut off: the frame grows with its content, and
     is at least as tall as the tallest one (the dataset) so it doesn't jump. */
  .ex-screen { aspect-ratio: auto; min-height: 310px; max-height: none; }
  .ex-scene { padding: 12px; }
  .ex-caption { font-size: 0.95rem; }
  .ex-narrator .afi { width: 48px; height: 48px; }
  .ex-controls { gap: 6px; }
  /* Dataset scene stacked: clips drop into the dataset, which points down to the languages. */
  .ex-flow { flex-direction: column; gap: 10px; }
  .ex-clips { flex-direction: row; }
  .ex-clips span { animation-name: ex-drop; }
  .ex-arrow { rotate: 90deg; }
  /* Scene 1 stacked: English Français, then ⇄ (pointing down), then Ewe. */
  .ex-langs { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 10px; }
  .ex-langs .ex-swap, .ex-langs span:last-child { grid-column: 1 / -1; justify-self: center; }
  .ex-langs .ex-swap { rotate: 90deg; padding: 0; }
}
@keyframes ex-drop { to { opacity: 0; transform: translateY(56px) scale(0.3); } }
/* Reduced motion: no blinking, talking or pulsing; scenes jump to their end state. */
@media (prefers-reduced-motion: reduce) {
  .afi-eyes, .afi.talking .afi-mouth, .afi-cta-play { animation: none; }
  .afi-cta-face::before, .afi-cta-face::after { animation: none; opacity: 0; }
  .ex-scene, .ex-scene * {
    animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  }
}

/* Crawlable intro in index.html: visible only if app.js never runs. */
.js .seo-intro { display: none; }
.seo-intro { max-width: 720px; margin: 0 auto; padding: 24px 16px; line-height: 1.6; }

/* --- each page's baobab vignette ------------------------------------------ */
/* A small, faint baobab-and-sun scene right under the tagline of each page's card, below
   its gold-orange stroke (both drawn by the stroke's block), each page a different time
   of day. (data-page: the strip section on computers, #view on phones, see route in
   app.js.) */
:root { --vignette-w: 170px; }
@media (max-width: 520px) { :root { --vignette-w: 120px; } }
[data-page] .card > .hero-greet.card-tagline::after {
  width: var(--vignette-w); height: calc(11px + var(--vignette-w) * 90 / 220); margin-top: 8px;
  background:
    linear-gradient(90deg, var(--gold), var(--accent)) top / 44px 3px no-repeat,
    var(--vignette, none) bottom / 100% auto no-repeat;
}
/* Welcome: Sunrise: one baobab, a low gold sun rising beside it. */
[data-page="welcome"] .hero { --vignette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90' viewBox='0 0 220 90'%3E%3Cdefs%3E%3Cg id='b' transform='translate(-150 -111)'%3E%3Cpath d='M120 111c-6-20 6-40 14-58h32c8 18 20 38 14 58z'/%3E%3Cg fill='none' stroke-width='6'%3E%3Cpath d='M138 55c-6-8-14-12-24-12'/%3E%3Cpath d='M144 54c-3-8-8-13-14-16'/%3E%3Cpath d='M156 54c3-8 8-13 14-16'/%3E%3Cpath d='M162 55c6-8 14-12 24-12'/%3E%3C/g%3E%3Cpath d='M114 43l-8-3M114 43l-4-7M130 38l-4-7M130 38l3-7M170 38l-3-7M170 38l4-7M186 43l4-7M186 43l8-3' fill='none' stroke-width='3'/%3E%3C/g%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23e0a030' stop-opacity='.5'/%3E%3Cstop offset='.55' stop-color='%23e0a030' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23e0a030' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='150' cy='74' r='26' fill='url(%23s)'/%3E%3Cg fill='%231a2033' stroke='%231a2033' stroke-linecap='round' opacity='.13'%3E%3Cpath d='M0 86q60-6 110-2t110 0v6H0z' stroke='none'/%3E%3Cuse href='%23b' transform='translate(70 86) scale(0.55)' opacity='1'/%3E%3C/g%3E%3C/svg%3E"); }
/* Help: Midday: two baobabs, near and far, a small pale sun high up. */
[data-page="help"] .help-card { --vignette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90' viewBox='0 0 220 90'%3E%3Cdefs%3E%3Cg id='b' transform='translate(-150 -111)'%3E%3Cpath d='M120 111c-6-20 6-40 14-58h32c8 18 20 38 14 58z'/%3E%3Cg fill='none' stroke-width='6'%3E%3Cpath d='M138 55c-6-8-14-12-24-12'/%3E%3Cpath d='M144 54c-3-8-8-13-14-16'/%3E%3Cpath d='M156 54c3-8 8-13 14-16'/%3E%3Cpath d='M162 55c6-8 14-12 24-12'/%3E%3C/g%3E%3Cpath d='M114 43l-8-3M114 43l-4-7M130 38l-4-7M130 38l3-7M170 38l-3-7M170 38l4-7M186 43l4-7M186 43l8-3' fill='none' stroke-width='3'/%3E%3C/g%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23f0c040' stop-opacity='.5'/%3E%3Cstop offset='.55' stop-color='%23f0c040' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23f0c040' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='60' cy='22' r='14' fill='url(%23s)'/%3E%3Cg fill='%231a2033' stroke='%231a2033' stroke-linecap='round' opacity='.13'%3E%3Cpath d='M0 86q60-6 110-2t110 0v6H0z' stroke='none'/%3E%3Cuse href='%23b' transform='translate(80 86) scale(0.3)' opacity='0.6'/%3E%3Cuse href='%23b' transform='translate(160 86) scale(0.55)' opacity='1'/%3E%3C/g%3E%3C/svg%3E"); }
/* Speak: Morning: a baobab, the sun behind it and two birds. */
[data-page="speak"] > .card { --vignette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90' viewBox='0 0 220 90'%3E%3Cdefs%3E%3Cg id='b' transform='translate(-150 -111)'%3E%3Cpath d='M120 111c-6-20 6-40 14-58h32c8 18 20 38 14 58z'/%3E%3Cg fill='none' stroke-width='6'%3E%3Cpath d='M138 55c-6-8-14-12-24-12'/%3E%3Cpath d='M144 54c-3-8-8-13-14-16'/%3E%3Cpath d='M156 54c3-8 8-13 14-16'/%3E%3Cpath d='M162 55c6-8 14-12 24-12'/%3E%3C/g%3E%3Cpath d='M114 43l-8-3M114 43l-4-7M130 38l-4-7M130 38l3-7M170 38l-3-7M170 38l4-7M186 43l4-7M186 43l8-3' fill='none' stroke-width='3'/%3E%3C/g%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23e8a83a' stop-opacity='.5'/%3E%3Cstop offset='.55' stop-color='%23e8a83a' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23e8a83a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='40' cy='54' r='20' fill='url(%23s)'/%3E%3Cg fill='%231a2033' stroke='%231a2033' stroke-linecap='round' opacity='.13'%3E%3Cpath d='M0 86q60-6 110-2t110 0v6H0z' stroke='none'/%3E%3Cuse href='%23b' transform='translate(64 86) scale(0.5)' opacity='1'/%3E%3Cpath d='M128 34q4-4 8 0q4-4 8 0M150 24q3-3 6 0q3-3 6 0' fill='none' stroke-width='1.8'/%3E%3C/g%3E%3C/svg%3E"); }
/* Listen: Sunset: a big orange sun half down behind a baobab. */
[data-page="listen"] > .card { --vignette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90' viewBox='0 0 220 90'%3E%3Cdefs%3E%3Cg id='b' transform='translate(-150 -111)'%3E%3Cpath d='M120 111c-6-20 6-40 14-58h32c8 18 20 38 14 58z'/%3E%3Cg fill='none' stroke-width='6'%3E%3Cpath d='M138 55c-6-8-14-12-24-12'/%3E%3Cpath d='M144 54c-3-8-8-13-14-16'/%3E%3Cpath d='M156 54c3-8 8-13 14-16'/%3E%3Cpath d='M162 55c6-8 14-12 24-12'/%3E%3C/g%3E%3Cpath d='M114 43l-8-3M114 43l-4-7M130 38l-4-7M130 38l3-7M170 38l-3-7M170 38l4-7M186 43l4-7M186 43l8-3' fill='none' stroke-width='3'/%3E%3C/g%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23e0702a' stop-opacity='.5'/%3E%3Cstop offset='.55' stop-color='%23e0702a' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23e0702a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='120' cy='86' r='40' fill='url(%23s)'/%3E%3Cg fill='%231a2033' stroke='%231a2033' stroke-linecap='round' opacity='.13'%3E%3Cpath d='M0 86h220v4H0z' stroke='none'/%3E%3Cuse href='%23b' transform='translate(128 86) scale(0.6)' opacity='1'/%3E%3C/g%3E%3C/svg%3E"); }
/* Write: Dusk: a rose sun almost gone and the first stars. */
[data-page="write"] > .card { --vignette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90' viewBox='0 0 220 90'%3E%3Cdefs%3E%3Cg id='b' transform='translate(-150 -111)'%3E%3Cpath d='M120 111c-6-20 6-40 14-58h32c8 18 20 38 14 58z'/%3E%3Cg fill='none' stroke-width='6'%3E%3Cpath d='M138 55c-6-8-14-12-24-12'/%3E%3Cpath d='M144 54c-3-8-8-13-14-16'/%3E%3Cpath d='M156 54c3-8 8-13 14-16'/%3E%3Cpath d='M162 55c6-8 14-12 24-12'/%3E%3C/g%3E%3Cpath d='M114 43l-8-3M114 43l-4-7M130 38l-4-7M130 38l3-7M170 38l-3-7M170 38l4-7M186 43l4-7M186 43l8-3' fill='none' stroke-width='3'/%3E%3C/g%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23d0607a' stop-opacity='.5'/%3E%3Cstop offset='.55' stop-color='%23d0607a' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23d0607a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='170' cy='92' r='26' fill='url(%23s)'/%3E%3Cg fill='%231a2033' stroke='%231a2033' stroke-linecap='round' opacity='.13'%3E%3Cpath d='M0 86q60-6 110-2t110 0v6H0z' stroke='none'/%3E%3Cuse href='%23b' transform='translate(64 86) scale(0.52)' opacity='1'/%3E%3Ccircle cx='120' cy='14' r='1.4' stroke='none'/%3E%3Ccircle cx='150' cy='30' r='1.1' stroke='none'/%3E%3Ccircle cx='186' cy='12' r='1.3' stroke='none'/%3E%3Ccircle cx='200' cy='40' r='1' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); }
/* Partners: A grove: three baobabs, the sun between them. */
[data-page="partners"] .partners-card { --vignette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90' viewBox='0 0 220 90'%3E%3Cdefs%3E%3Cg id='b' transform='translate(-150 -111)'%3E%3Cpath d='M120 111c-6-20 6-40 14-58h32c8 18 20 38 14 58z'/%3E%3Cg fill='none' stroke-width='6'%3E%3Cpath d='M138 55c-6-8-14-12-24-12'/%3E%3Cpath d='M144 54c-3-8-8-13-14-16'/%3E%3Cpath d='M156 54c3-8 8-13 14-16'/%3E%3Cpath d='M162 55c6-8 14-12 24-12'/%3E%3C/g%3E%3Cpath d='M114 43l-8-3M114 43l-4-7M130 38l-4-7M130 38l3-7M170 38l-3-7M170 38l4-7M186 43l4-7M186 43l8-3' fill='none' stroke-width='3'/%3E%3C/g%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23e0a030' stop-opacity='.5'/%3E%3Cstop offset='.55' stop-color='%23e0a030' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23e0a030' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='110' cy='40' r='18' fill='url(%23s)'/%3E%3Cg fill='%231a2033' stroke='%231a2033' stroke-linecap='round' opacity='.13'%3E%3Cpath d='M0 86q60-6 110-2t110 0v6H0z' stroke='none'/%3E%3Cuse href='%23b' transform='translate(40 86) scale(0.4)' opacity='1'/%3E%3Cuse href='%23b' transform='translate(76 86) scale(0.28)' opacity='0.6'/%3E%3Cuse href='%23b' transform='translate(172 86) scale(0.58)' opacity='1'/%3E%3C/g%3E%3C/svg%3E"); }