/* Traveszia website. The Arena look of the app (apps/mobile/src/theme/tokens.ts and components/Text.tsx): black
   panels in both themes, the brand aqua only as an accent, Archivo for words, Archivo Narrow for labels, Big Shoulders
   for scoreboard numbers, big italic capitals only for a poster (the question, the tagline). The yellow of "yours"
   and the area colours belong to the game's cases and never appear here. No inline style anywhere: the pages'
   security policy forbids it (src/index.js). */

@font-face { font-family: Archivo; src: url(/fonts/Archivo-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Archivo; src: url(/fonts/Archivo-ExtraBold.woff2) format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: Archivo; src: url(/fonts/Archivo-Black.woff2) format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: Archivo; src: url(/fonts/Archivo-BlackItalic.woff2) format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Archivo Narrow'; src: url(/fonts/ArchivoNarrow-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* Digits and a few signs only: scoreboard numbers. */
@font-face { font-family: 'Big Shoulders Display'; src: url(/fonts/BigShoulders-Black.woff2) format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --mist: #f0f1f4;
  --mist2: #dcdee5;
  --fg: #101014;
  --text2: #464853;
  --panel: #101014;
  --panel2: #1e1f27;
  --panel-line: #3a3c48;
  --on-panel: #ffffff;
  --on-panel2: #c4c6d0;
  --edge: transparent;
  --ink: #101014;
  --paper: #ffffff;
  --shadow: rgba(16, 16, 20, 0.28);
  --brand: #2fe0e8;
  --brand-ink: #00787d;
  --focus: #101014;
  --btn: #101014;
  --on-btn: #ffffff;
  --arr: #2fe0e8;
  --on-arr: #101014;
  --words: Archivo, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --label: 'Archivo Narrow', Archivo, 'Arial Narrow', system-ui, sans-serif;
  --number: 'Big Shoulders Display', 'Archivo Narrow', Archivo, 'Arial Narrow', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15161c;
    --mist: #23242d;
    --mist2: #3a3c48;
    --fg: #f3f4f7;
    --text2: #b9bcc8;
    --panel: #050507;
    --panel2: #1c1d24;
    --edge: #2e2f39;
    --shadow: rgba(0, 0, 0, 0.6);
    --brand-ink: #2fe0e8;
    --focus: #ffffff;
    /* Buttons on the dark page: white, aqua only on the arrow (aqua buttons all over a black page looked like betting). */
    --btn: #f3f4f7;
    --on-btn: #101014;
    --arr: #101014;
    --on-arr: #2fe0e8;
  }
}

/* Black panels keep their look in both themes: the text colours switch inside them. */
.panel {
  --fg: var(--on-panel);
  --text2: var(--on-panel2);
  --mist: var(--panel2);
  --mist2: var(--panel-line);
  --brand-ink: var(--brand);
  --focus: var(--brand);
  --btn: var(--brand);
  --on-btn: var(--ink);
  --arr: var(--ink);
  --on-arr: var(--brand);
  background: var(--panel);
  color: var(--fg);
  border-bottom: 1px solid var(--edge);
}

/* One page, three languages: the page holds all three, and <html data-lang> shows one (lang.js, or the server). */
html[data-lang='en'] [data-l]:not([data-l='en']),
html[data-lang='pt'] [data-l]:not([data-l='pt']),
html[data-lang='es'] [data-l]:not([data-l='es']) { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.55 var(--words);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
strong, b { font-weight: 800; }
/* Stress is set in bold: the site's only italic is the poster's black italic, which would shout inside a sentence. */
em { font-style: normal; font-weight: 800; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
main a:not(.btn):not(.choice) { text-decoration-color: var(--brand-ink); }
svg { flex: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: 20px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 2; padding: 12px 16px; border-radius: 6px; background: var(--brand); color: var(--ink); font-weight: 800; text-decoration: none; }
.skip:focus { top: 8px; }
/* It lands on the black top bar: the ring is white there, in both themes. */
.skip:focus-visible { outline-color: var(--paper); }
.anchor { display: block; }

.in { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .in { padding: 0 32px; } }

/* ---------- the top bar: the logo, the language switch, and the two sections ---------- */

/* The logo is logo B's flat lockup (logo-topbar.svg = topbar.svg from the hub's design/logo-2026-10-09/final-one-stroke),
   24 px tall like the app's top bar. The bar is a black panel in both themes, so the lockup for dark grounds serves
   both. On a very narrow screen it gets smaller, never below 18 px tall (SPEC.md). */
.bar-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(58px, auto) auto;
  grid-template-areas: 'brand langs' 'tabs tabs'; align-items: center; column-gap: 12px;
}
/* The link is as tall as the logo, so its focus ring can follow the logo; ::after makes it as tall as the bar to tap. */
.brand { grid-area: brand; justify-self: start; position: relative; display: flex; align-items: center; min-width: 0; text-decoration: none; }
.brand::after { content: ''; position: absolute; inset: -17px -4px; }
/* The keyboard focus ring stays outside the logo's clear space (one ribbon width, about 5.6 px at 24 px tall), so the
   aqua ring never touches the aqua IA slab. The 58 px bar has room for it: 24 + 2 x (6 + 3) = 42 px. */
.brand:focus-visible { outline-offset: 6px; }
.lockup { display: block; width: 187px; max-width: 100%; min-width: 141px; height: auto; }
.langs { grid-area: langs; display: flex; gap: 2px; }
.langs a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  color: var(--on-panel2); font-weight: 800; font-size: 15px; letter-spacing: 0.04em; text-decoration: none;
}
/* The language in use is marked from <html data-lang>, so the mark is right before any script runs. */
html[data-lang='en'] .langs a[data-set-lang='en'],
html[data-lang='pt'] .langs a[data-set-lang='pt'],
html[data-lang='es'] .langs a[data-set-lang='es'] {
  color: var(--on-panel);
  text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; text-underline-offset: 7px;
}
.tabs {
  grid-area: tabs; display: flex; gap: 18px;
  margin: 0 -16px; padding: 0 12px; border-top: 1px solid var(--panel-line);
}
.tabs a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 46px; padding: 0 4px;
  color: var(--on-panel2); font-weight: 800; font-size: 16px; text-decoration: none;
}
.tabs a:hover { color: var(--on-panel); }
.tabs a[aria-current] { color: var(--on-panel); box-shadow: inset 0 -3px 0 var(--brand); }
@media (min-width: 720px) {
  .bar-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(58px, auto); grid-template-areas: 'brand tabs langs'; column-gap: 36px; }
  .tabs { margin: 0; padding: 0; border-top: 0; }
  .tabs a { min-height: 58px; }
}

/* ---------- the first screen: the black broadcast panel ---------- */

.hero { padding: 36px 0 52px; }
.hero.slim { padding-bottom: 40px; }
@media (min-width: 720px) {
  .hero { padding: 64px 0 80px; }
  .hero.slim { padding: 48px 0 56px; }
}
.eyebrow, .week-when {
  font-family: var(--label); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: 0.09em; text-transform: uppercase;
}
.eyebrow { margin: 0 0 16px; color: var(--brand); }
.crumb { margin: -8px 0 18px; }
.crumb a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; font-size: 16px; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb svg { width: 18px; height: 18px; color: var(--brand); }

/* A poster: one line under the other, the last one on the aqua label. A line breaks between words only. Its size
   follows the column it stands in (cqi; the vw line before it serves a browser that does not know cqi), and each
   language has its own, set so that the longest line fits: scripts/shots.mjs checks that no word is cut. */
.hero > .in, .hero-row > div { container-type: inline-size; }
.poster {
  font-weight: 900; font-style: italic; text-transform: uppercase;
  line-height: 0.95; letter-spacing: -0.005em; text-wrap: wrap;
  font-size: clamp(40px, 11.6vw, 116px); font-size: clamp(40px, 12.7cqi, 116px);
}
/* On a wide screen the Portuguese and Spanish taglines stop at the size where each of their three lines fits whole. */
html[data-lang='pt'] .poster { font-size: clamp(30px, 9.4vw, 84px); font-size: clamp(30px, 10.3cqi, 84px); }
html[data-lang='es'] .poster { font-size: clamp(31px, 9.8vw, 92px); font-size: clamp(31px, 10.7cqi, 92px); }
/* The question is longer than a tagline, so it is set smaller. */
.poster.ask { font-size: clamp(26px, 8.2vw, 60px); font-size: clamp(26px, 10.2cqi, 84px); }
html[data-lang='pt'] .poster.ask { font-size: clamp(24px, 7.5vw, 56px); font-size: clamp(24px, 9.3cqi, 78px); }
html[data-lang='es'] .poster.ask { font-size: clamp(26px, 8.2vw, 60px); font-size: clamp(26px, 10.2cqi, 84px); }
.poster > span > span { display: block; }
.poster .tape {
  display: inline-block; margin-top: 0.14em; padding: 0.07em 0.16em 0.04em 0.1em; rotate: -2deg;
  background: var(--brand); color: var(--ink); box-shadow: 0 0.07em 0 rgba(0, 0, 0, 0.45);
}

/* A heading in normal case, for the program's pages. */
.headline { max-width: 20em; font-weight: 900; font-size: clamp(32px, 5.4vw, 60px); line-height: 1.06; letter-spacing: -0.02em; }
.lead { margin: 24px 0 0; max-width: 36em; color: var(--text2); font-size: clamp(19px, 2.3vw, 24px); line-height: 1.4; }
.lead strong { color: var(--fg); }
/* Under a poster, the text starts clear of the turned label and its shadow. */
.poster + .lead { margin-top: clamp(28px, 3.8vw, 42px); }
.more { margin: 16px 0 0; max-width: 40em; font-size: 18px; }
.note { margin: 20px 0 0; max-width: 46em; color: var(--text2); font-size: 15px; }

/* The home page: the question, the logo's mark beside it on a wide screen, and the two answers. */
.hero-mark { display: none; }
@media (min-width: 960px) {
  .hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
  .hero-mark { display: block; width: 280px; height: 280px; }
}
.choices { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; } }
.choice {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto;
  grid-template-areas: 'label label' 'title go' 'text text' 'status status';
  align-items: center; gap: 0 16px; height: 100%; padding: 22px 20px 20px;
  border: 2px solid var(--panel-line); border-radius: 14px; background: var(--panel2); color: var(--on-panel); text-decoration: none;
}
.choice:hover { border-color: var(--brand); }
.choice-label { grid-area: label; margin-bottom: 14px; }
.choice-title { grid-area: title; font-weight: 900; font-size: clamp(28px, 4vw, 40px); line-height: 1.08; letter-spacing: -0.015em; }
.choice-go { grid-area: go; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 6px; background: var(--brand); color: var(--ink); }
.choice-go svg { width: 26px; height: 26px; }
.choice-text { grid-area: text; align-self: start; margin-top: 12px; color: var(--on-panel2); font-size: 18px; line-height: 1.45; }
.choice-status { grid-area: status; align-self: end; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--panel-line); color: var(--on-panel2); font-size: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .choice-go { transition: translate 0.15s ease-out; }
  .choice:hover .choice-go { translate: 4px 0; }
}

/* The store buttons: "coming soon", and not links yet. */
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.store {
  display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 20px 9px 14px;
  border: 2px solid var(--panel-line); border-radius: 12px; color: var(--on-panel);
}
.store svg { width: 26px; height: 26px; }
.store .soon { display: block; color: var(--on-panel2); font-family: var(--label); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
.store .name { display: block; font-size: 19px; font-weight: 800; line-height: 1.25; }

/* The program in four numbers: scoreboard tiles, as on the app's "Today". */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 460px; margin: 30px 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 800px; } }
.tile { display: grid; grid-template-rows: 1.35em auto auto; gap: 4px; padding: 12px 14px 14px; border-radius: 6px; background: var(--panel2); }
.tile-about { color: var(--on-panel2); font-size: 16px; line-height: 1.35; }
.tile-number { font-family: var(--number); font-weight: 900; font-size: 66px; line-height: 0.82; font-variant-numeric: tabular-nums; }
.tile-what { font-weight: 800; font-size: 16px; line-height: 1.2; }

/* Where to go from the first screen of the program. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; }
.chips a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 2px solid var(--panel-line); border-radius: 22px; font-weight: 800; font-size: 15px; text-decoration: none;
}
.chips a:hover { border-color: var(--brand); }

/* ---------- labels and buttons ---------- */

/* A die-cut label, as on the app's case covers. */
.sticker {
  display: inline-block; max-width: 100%; padding: 7px 10px 6px; border-radius: 5px; rotate: -2deg;
  background: var(--paper); color: var(--ink);
  font-family: var(--label); font-weight: 700; font-size: 14px; line-height: 1.15; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 0 0 2.5px var(--paper), 0 3px 0 2.5px var(--shadow);
}
.sticker.ink { background: #101014; color: #ffffff; }
.sticker.brand { background: var(--brand); box-shadow: 0 0 0 2.5px var(--brand), 0 3px 0 2.5px var(--shadow); }

.actions { display: flex; flex-wrap: wrap; gap: 14px 12px; align-items: stretch; margin: 28px 0 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 8px 8px 8px 20px;
  border-radius: 6px; background: var(--btn); color: var(--on-btn);
  font-weight: 800; font-size: 19px; line-height: 1.2; text-decoration: none; box-shadow: 0 4px 0 var(--shadow);
}
.btn .arr { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 4px; background: var(--arr); color: var(--on-arr); }
.btn .arr svg { width: 24px; height: 24px; }
.btn-text { display: grid; gap: 2px; }
.btn-text b { font-weight: 800; }
/* Where a button that leaves the site opens, inside the button itself. */
.btn-text small { font-weight: 400; font-size: 14px; line-height: 1.25; }
/* The WhatsApp button: its sign and its words stay together on the left. */
.btn.chat { justify-content: flex-start; }
.btn-icon { display: grid; place-items: center; }
.btn-icon svg { width: 28px; height: 28px; }
.btn.ghost { padding: 8px 20px; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 3px var(--fg); }
.btn.ghost.out { padding-right: 8px; }
.btn.ghost .arr { background: transparent; color: var(--fg); }
.btn:hover { text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 479px) { .actions .btn { width: 100%; } }

/* ---------- the sections of a page ---------- */

.sec { padding: 46px 0 54px; }
@media (min-width: 720px) { .sec { padding: 68px 0 76px; } }
.sec + .sec:not(.panel) { padding-top: 0; }
.panel + .sec:not(.panel), .hero + .sec { padding-top: 46px; }
@media (min-width: 720px) { .panel + .sec:not(.panel), .hero + .sec { padding-top: 68px; } }
.sec-head { display: grid; gap: 16px; justify-items: start; margin: 0 0 20px; padding-top: 26px; border-top: 3px solid var(--fg); }
.sec-label { margin: 0 0 14px; }
.sec-head .sec-label { margin: 0; }
h2 { font-weight: 900; font-size: clamp(27px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -0.015em; }
h3 { font-weight: 900; font-size: 21px; line-height: 1.22; }
.intro { max-width: 44em; margin: 0 0 14px; font-size: 18px; }
.after { max-width: 46em; margin: 26px 0 0; }
.statement { max-width: 32em; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.36; }
.statement strong { background: var(--brand); color: var(--ink); padding: 0.02em 0.2em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Numbered steps: how the game works, how the program works. */
.how h2 { margin: 0 0 22px; }
.steps { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.step { background: var(--mist); border-radius: 14px; padding: 20px 20px 22px; }
.step .num { display: block; margin-bottom: 10px; color: var(--brand-ink); font-weight: 900; font-style: italic; font-size: 34px; line-height: 1; }
.step h3 { margin: 0 0 6px; }
.step p { color: var(--text2); }

/* The 8 weeks: thick rules and scoreboard numbers. */
.weeks { display: grid; grid-template-columns: 1fr; margin: 24px 0 0; padding: 0; list-style: none; border-top: 3px solid var(--fg); }
.week {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: 'number when' 'number title' 'number text';
  column-gap: 14px; align-content: start; padding: 16px 0 18px; border-bottom: 3px solid var(--fg);
}
.week-when { grid-area: when; color: var(--text2); font-size: 14px; }
.week-number {
  grid-area: number; align-self: start; color: var(--brand-ink);
  font-family: var(--number); font-weight: 900; font-size: 62px; line-height: 0.86; letter-spacing: -0.01em; white-space: nowrap;
}
.week-number.done svg { display: block; width: 52px; height: 52px; }
.week h3 { grid-area: title; margin: 4px 0 4px; }
.week p { grid-area: text; color: var(--text2); }
.week:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 720px) {
  .weeks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 26px; border-top: 0; }
  .week, .week:last-child { grid-template-columns: 1fr; grid-template-areas: 'number' 'when' 'title' 'text'; border-top: 3px solid var(--fg); border-bottom: 0; padding: 18px 0 30px; }
  .week-number { font-size: 80px; margin-bottom: 12px; }
  .week-number.done svg { width: 66px; height: 69px; }
}

/* Cards: a thick rule, a heading, a list with square marks (the squares of the game's 100 replays). */
.cards { display: grid; grid-template-columns: 1fr; gap: 30px 26px; margin: 24px 0 0; }
@media (min-width: 720px) {
  .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card { border-top: 3px solid var(--fg); padding-top: 16px; }
.card h3 { margin: 0 0 12px; }
.ticks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 24px; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.46em; width: 11px; height: 11px; border-radius: 2px; background: var(--brand-ink); }
/* A list of its own under a section's text (what the game develops): as wide as that text, and set at its size. */
.ticks.wide { max-width: 44em; margin: 18px 0 0; font-size: 18px; }

/* A note set apart from the text. */
.callout { max-width: 46em; margin: 26px 0 0; padding: 14px 16px; border-left: 4px solid var(--brand-ink); border-radius: 0 6px 6px 0; background: var(--mist); }

/* The way to the site's other section, at the foot of a page. */
.also { padding: 26px 20px 30px; border-radius: 14px; background: var(--mist); }
.also p:not(.sec-label) { max-width: 36em; margin-top: 10px; font-size: 18px; color: var(--text2); }
@media (min-width: 720px) { .also { padding: 34px 32px 38px; } }

/* The rules: one rule under the other, in a reading column. */
.rules { display: grid; gap: 30px; max-width: 46em; margin: 0; padding: 0; list-style: none; }
.rule h2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 0 10px; font-size: clamp(22px, 2.6vw, 26px); line-height: 1.2; }
.rule .num {
  display: grid; place-items: center; min-width: 38px; height: 42px; padding: 0 6px; margin-top: -6px; border-radius: 4px; rotate: -3deg;
  background: var(--brand); color: var(--ink); font-family: var(--number); font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: 0;
}
.rule p { padding-left: 52px; }
@media (max-width: 479px) { .rule p { padding-left: 0; } }
.rules-foot { max-width: 46em; margin: 40px 0 0; padding-top: 18px; border-top: 3px solid var(--fg); color: var(--text2); font-size: 15px; }

/* ---------- the pages to read: privacy policy, terms of use, support, account deletion ---------- */

/* One reading column: the list of parts, then one part under the other, each with a thick rule and its heading. */
.doc { max-width: 46em; }
.doc-toc { margin: 0 0 34px; padding: 16px 20px 18px; border-radius: 14px; background: var(--mist); }
.doc-toc-name { color: var(--text2); font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.doc-toc ol { display: grid; gap: 2px; margin: 8px 0 0; padding-left: 1.5em; }
.doc-toc a { font-weight: 800; }
.doc-part { margin: 0 0 36px; padding-top: 18px; border-top: 3px solid var(--fg); }
.doc-part h2 { margin: 0 0 14px; font-size: clamp(24px, 2.9vw, 31px); }
.doc-part h3 { margin: 24px 0 8px; font-size: 19px; }
.doc-part p { margin: 0 0 12px; }
.doc-part .ticks { margin: 0 0 14px; }
/* Steps in the app: a number on the aqua label, as on the program's rules. */
.doc-steps { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: step; }
.doc-steps li { position: relative; min-height: 30px; padding: 2px 0 0 44px; counter-increment: step; }
.doc-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 32px;
  border-radius: 4px; rotate: -3deg; background: var(--brand); color: var(--ink);
  font-family: var(--number); font-weight: 900; font-size: 22px; line-height: 1;
}
.doc-foot { margin: 0 0 18px; padding-top: 14px; border-top: 1px solid var(--mist2); color: var(--text2); font-size: 15px; }
.doc-foot p + p { margin-top: 4px; }
.doc-related { color: var(--text2); font-size: 16px; }
/* A value the founder still has to fill in (site/lib/legal.mjs): framed, so nobody misses it on the preview. */
.todo { padding: 0 0.15em; border-radius: 3px; outline: 2px dashed var(--brand-ink); outline-offset: 1px; font-weight: 800; }

/* ---------- the footer ---------- */

/* It closes every page on the quiet ground of the page's own cards. First who makes Traveszia: Orion, what it is, and
   what it does for each of its two audiences, each with a button to Orion's page (site/lib/orion.mjs). Then the
   site's pages and the legal line. It is set smaller than a section of the page, with the outlined kind of button and
   no poster: a closing block, never a second first screen. */
.foot { padding: 34px 0 36px; background: var(--mist); color: var(--text2); font-size: 15px; }
@media (min-width: 720px) { .foot { padding-top: 46px; } }
.foot h2 { max-width: 26em; color: var(--fg); font-size: clamp(21px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -0.01em; }
.orion-what { max-width: 46em; margin: 8px 0 0; font-size: 16px; }
.orion-doors { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .orion-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
/* One audience: who it is for, Orion's promise to it, what Orion does about its trouble, and the way to Orion's page.
   The button sits at the foot of the card, so the two buttons line up when the two texts differ in length. */
.orion-door { display: flex; flex-direction: column; padding: 18px 20px 20px; border-radius: 14px; background: var(--bg); }
.orion-for { color: var(--brand-ink); font-family: var(--label); font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
.orion-door h3 { margin: 8px 0 6px; color: var(--fg); font-size: 20px; }
.orion-door > p:not(.orion-for) { font-size: 16px; }
.orion-door .actions { margin-top: auto; padding-top: 16px; }
.foot .btn { min-height: 52px; font-size: 17px; }
.foot .btn .arr { width: 36px; height: 36px; }
.foot-site { margin: 26px 0 0; padding-top: 8px; border-top: 1px solid var(--mist2); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0 0 12px; padding: 0; list-style: none; }
.foot-nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--fg); font-weight: 800; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
/* The help and legal pages, on a row of their own under the site's pages, in the regular weight. */
.foot-legal { margin-top: -8px; }
.foot-legal a { font-weight: 400; }
.foot-site p { margin: 4px 0; }