/* Cycling Mentor, javna domača stran: landing.html (angleško, /) in landing-sl.html (slovensko, /sl/). Vir oblikovanja je
   DESIGN.md (»Hi-vis on tarmac«, odločitev operaterja 25. 10. 2026). Strani imata strogi CSP v <meta>: brez slogov v
   strani in brez skript, zato je ves slog tu. Blok žetonov je ustvarjen iz docs/design/tools/palettes.json
   (docs/design/tools/contrast.py); tests/test_landing_page.py ga primerja z virom, ročno ga ne urejaj.
   Isti list je osnova pravnih strani (+ legal.css) in strani prijave na gostitelju aplikacije (+ auth.css; DESIGN.md 10):
   sprememba žetona, gumba, znaka ali stolpcev treninga tu velja tudi tam. */

/* tokens:start (generated by tools/contrast.py from tools/palettes.json) */
:root {
  --bg: #031a24; /* oklch(0.205 0.035 228) page base (night chapter) */
  --surface: #0a2632; /* oklch(0.255 0.04 228) raised panel on night */
  --surface-2: #153340; /* oklch(0.305 0.042 228) card inside a panel (mock UI) */
  --fg: #eef7f8; /* oklch(0.97 0.01 200) text on night */
  --muted: #acc2c8; /* oklch(0.8 0.025 215) secondary text on night */
  --border: #35525e; /* oklch(0.42 0.04 228) hairline on night */
  --accent: #bef746; /* oklch(0.905 0.205 126) hi-vis lime: primary CTA fill, highlights, workout bars */
  --accent-fg: #031a24; /* oklch(0.205 0.035 228) ink on lime */
  --accent-hover: #dbff92; /* oklch(0.95 0.14 124) CTA hover fill */
  --success: #51daa7; /* oklch(0.8 0.14 165) state: good (on night) */
  --warning: #febe4e; /* oklch(0.84 0.145 78) state: caution (on night) */
  --error: #fd8072; /* oklch(0.74 0.155 28) state: problem (on night) */
  --day: #edf7f8; /* oklch(0.968 0.01 205) light chapter background */
  --day-surface: #ffffff; /* oklch(1.0 0.0 0) card on light chapter */
  --day-fg: #031a24; /* oklch(0.205 0.035 228) text on light chapter */
  --day-muted: #3e5762; /* oklch(0.44 0.035 228) secondary text on light chapter */
  --day-border: #c8d8dc; /* oklch(0.87 0.018 215) hairline on light chapter */
  --day-success: #0c6b4d; /* oklch(0.47 0.095 165) state: good (on light) */
  --day-warning: #875814; /* oklch(0.5 0.1 70) state: caution (on light) */
  --day-error: #b6322b; /* oklch(0.52 0.17 28) state: problem (on light) */
  --focus: #bef746; /* oklch(0.905 0.205 126) focus ring on night (= accent) */
  --day-focus: #031a24; /* oklch(0.205 0.035 228) focus ring on light chapter */
  --band-lime: #bef746; /* oklch(0.905 0.205 126) finale band (= accent) */
  --zone-easy: #4c8a9d; /* oklch(0.6 0.07 220) workout bar: easy (decorative, labelled) */
  --zone-tempo: #52caa5; /* oklch(0.76 0.12 170) workout bar: tempo (decorative, labelled) */
}
/* tokens:end */

/* Pisavi z lastnega strežnika: izvirne datoteke paketov Fontsource, bajt za bajtom (licenci OFL 1.1 v
   fonts/OFL-BarlowCondensed.txt in fonts/OFL-AtkinsonHyperlegibleNext.txt; izvor, sha256 in pokritost znakov v
   docs/design/fonts/shipped.json). unicode-range je iz paketa: brskalnik naloži datoteko latin-ext šele, ko stran rabi
   č, š ali ž, zato angleška stran naloži samo latin. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/barlow-condensed-latin-800-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/barlow-condensed-latin-ext-800-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* tip (DESIGN.md 3: osnova 17 px, razmerje 1,333), prostor (4 px), dva polmera, gibanje */
:root {
  color-scheme: dark;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", sans-serif;
  --t-0: 0.875rem;
  --t-1: 1.0625rem;
  --t-2: 1.4167rem;
  --t-3: 1.8889rem;
  --t-4: 2.5185rem;
  --t-5: 3.358rem;
  --t-h1: clamp(3.25rem, 1.6rem + 6.2vw, 6rem);
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --wrap: 78rem;
  --measure: 34rem;
  --r-s: 4px;
  --r-l: 14px;
  --ring: 3px;
  --tap: 2.75rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-enter: 280ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-1);
  line-height: 1.6;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: var(--ring); }
.day :focus-visible, .finale :focus-visible { outline-color: var(--day-focus); }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute;
  top: -4rem;
  left: var(--s-4);
  z-index: 10;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-s);
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: var(--s-4); }

/* naslovi: Barlow Condensed v ležečem rezu in velikih črkah, samo naslovi, nikoli odstavki (DESIGN.md 8) */
.display { font-family: var(--font-display); font-weight: 800; font-style: italic; line-height: 0.92; letter-spacing: -0.005em; text-transform: uppercase; }
h2.display { margin-bottom: var(--s-5); font-size: var(--t-4); }
@media (min-width: 64em) { h2.display { font-size: var(--t-5); } }

/* gumba: en glavni (limeta), en drugotni (obroba); 44 px (PRODUCT.md) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0.7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--r-s);
  font: 700 var(--t-1) / 1.2 var(--font-body);
  text-decoration: none;
}
.btn--primary { background: var(--accent); color: var(--accent-fg); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { border-color: var(--fg); color: var(--fg); }
.btn--ghost:hover { background: var(--surface); }
.finale .btn--primary { background: var(--bg); color: var(--fg); }
.finale .btn--primary:hover { background: var(--surface); }
.finale .btn--ghost { border-color: var(--accent-fg); color: var(--accent-fg); }
.finale .btn--ghost:hover { background: var(--accent-hover); }

/* glava: znak, sidra (od 56em), jezik, prijava */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding-block: var(--s-4); }
/* glava v treh conah od 56em: znamka levo, povezave na sredini, dejanja desno (operater 26. 10.) */
.top__actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--s-2); }
.top__actions .btn { white-space: nowrap; }
.top__cta { display: none; }
@media (min-width: 40em) { .top__cta { display: inline-flex; } }
@media (min-width: 56em) {
  .top { display: grid; grid-template-columns: 1fr auto 1fr; }
  .top .mark { justify-self: start; }
  .top .nav { justify-self: center; }
  .top__actions { justify-self: end; }
}
/* znak (DESIGN.md 11): vgrajen SVG iz docs/brand/2026-10-27 (V2), krog, ročica in črke v currentColor, pedal v --accent;
   viewBox je 1,13 verzalke (prekoračitev kroga), zato je verzalka 16 do 20 px kot pri prejšnjem napisu CSS (22 do 28 px) */
.mark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  text-decoration: none;
}
.mark .logo { display: block; height: clamp(1.1rem, 4.4vw, 1.4rem); width: auto; }
.mark .cm-accent { fill: var(--accent); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.nav__links { display: none; }
.nav__links a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-3); font-weight: 600; text-decoration: none; }
.nav__links a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
@media (min-width: 56em) { .nav__links { display: flex; } }
.top__actions .btn { padding-inline: var(--s-3); }
@media (min-width: 40em) { .top__actions .btn { padding-inline: var(--s-4); } }
/* jezik: spustni seznam brez skripte (<details>), trenutni jezik v gumbu (operater 26. 10.) */
.lang { position: relative; }
.lang summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: var(--tap);
  min-height: var(--tap);
  padding-inline: var(--s-3);
  border: 2px solid var(--muted);
  border-radius: var(--r-s);
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  list-style: none;
  cursor: pointer;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ""; width: 0.4em; height: 0.4em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); }
.lang[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }
.lang summary:hover, .lang[open] summary { border-color: var(--fg); }
.lang__menu { position: absolute; right: 0; top: calc(100% + var(--s-1)); z-index: 10; min-width: 11rem; padding: var(--s-1); background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--r-s); }
.lang__menu a { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding-inline: var(--s-3); border-radius: var(--r-s); color: var(--fg); font-weight: 600; text-decoration: none; }
.lang__menu a:hover { background: var(--surface); }
.lang__code { min-width: 2ch; font-weight: 800; }
/* trenutni jezik: limetina črta in polnilo, ne samo barva (DESIGN.md 6) */
.lang__menu a[aria-current="page"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
@media (forced-colors: active) { .lang__menu a[aria-current="page"] { text-decoration: underline 3px; text-underline-offset: 0.3em; } }

/* prvi zaslon: naslov, dejanje in izdelek; na dnu današnji trening kot obzorje */
.hero { padding-top: var(--s-6); overflow: clip; }
.hero__grid { display: grid; gap: var(--s-7); }
.hero h1 { max-width: 11ch; margin-bottom: var(--s-5); font-size: var(--t-h1); text-wrap: balance; }
.lead { max-width: var(--measure); font-size: var(--t-2); line-height: 1.45; text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.note { max-width: var(--measure); margin-top: var(--s-4); color: var(--muted); font-size: 0.9375rem; text-wrap: pretty; }
@media (min-width: 64em) {
  .hero { padding-top: var(--s-8); }
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
}

/* posnetek izdelka (izmišljen kolesar, napis pod njim) */
.stack { display: grid; gap: var(--s-4); }
@media (min-width: 40em) {
  .stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .stack .chat { grid-row: 1 / span 2; }
}
@media (min-width: 64em) {
  .stack { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .stack .chat { grid-row: auto; }
  .stack .today { margin-top: var(--s-9); }
}
.cap { margin-top: var(--s-3); color: var(--muted); font-size: var(--t-0); }
.panel { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-l); background: var(--surface); }
.panel__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--surface-2); font-size: var(--t-0); font-weight: 700; }
.panel__bar small { color: var(--muted); font-size: var(--t-0); font-weight: 400; }
.chat ol { display: grid; gap: var(--s-3); padding: var(--s-4); }
.msg { max-width: 88%; padding: var(--s-3) var(--s-4); border-radius: var(--r-l); font-size: 0.9375rem; line-height: 1.45; }
.msg time { display: block; margin-top: var(--s-1); color: var(--muted); font-size: 0.8125rem; }
.msg--coach { border-bottom-left-radius: var(--r-s); background: var(--surface-2); }
.msg--me { justify-self: end; border-bottom-right-radius: var(--r-s); background: var(--accent); color: var(--accent-fg); }
.msg--me time { color: var(--accent-fg); }
.today { display: grid; gap: var(--s-3); padding: var(--s-4); background: var(--surface-2); }
.today__head { display: flex; justify-content: space-between; gap: var(--s-2); color: var(--muted); font-size: var(--t-0); }
.today__session { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.today__watts { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.kv { display: grid; gap: var(--s-2); font-size: 0.9375rem; }
.kv div { display: flex; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--border); }
.kv dt { color: var(--muted); }
.kv dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
/* stanje: pika in besede, nikoli samo barva */
.state { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 700; }
.state::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; }
.state--warn { color: var(--warning); }
.why { color: var(--muted); font-size: var(--t-0); line-height: 1.45; }

/* podpis strani: trening iz knjižnice (plans/library.toml, sweetspot_3x12); širina stolpca = minute, višina = % FTP */
.session { margin-top: var(--s-8); padding-bottom: var(--s-6); }
.session__bars { display: flex; align-items: flex-end; gap: 3px; height: clamp(5rem, 3rem + 6vw, 8rem); forced-color-adjust: none; }
.session__bars span { flex-basis: 0; min-width: 2px; background: var(--zone-easy); }
.session__bars .w { background: var(--accent); }
.session__bars span:nth-child(1) { flex-grow: 15; height: 55%; }
.session__bars span:nth-child(2) { flex-grow: 12; height: 90%; }
.session__bars span:nth-child(3) { flex-grow: 5; height: 55%; }
.session__bars span:nth-child(4) { flex-grow: 12; height: 90%; }
.session__bars span:nth-child(5) { flex-grow: 5; height: 55%; }
.session__bars span:nth-child(6) { flex-grow: 12; height: 90%; }
.session__bars span:nth-child(7) { flex-grow: 10; height: 50%; }
.session__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); color: var(--muted); font-size: 0.9375rem; }
.session__legend strong { color: var(--fg); }
.key { display: inline-flex; align-items: center; gap: 0.4em; }
.key::before { content: ""; width: 0.9em; height: 0.9em; background: var(--zone-easy); forced-color-adjust: none; }
.key--w::before { background: var(--accent); }

/* pas z videom takoj za prvim zaslonom: 9:16 na pokončnem telefonu, sicer 16:9. Poster (prva sličica) je slika pod videom:
   pokaže se najprej, ostane, kadar se video ne naloži ali ne predvaja, in ob prefers-reduced-motion: reduce, ko <source>
   videa sploh ne izbere. Zanka traja 10 s in se začne sama, zato ima preklop (WCAG 2.2.2): zaprt <details> video skrije in
   ostane poster; brez skripte (CSP). */
.band { background: var(--bg); }
.band__frame { position: relative; }
.band picture { display: block; }
.band__media { display: block; width: 100%; height: auto; max-height: 100svh; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 47.99em) and (orientation: portrait) { .band__media { aspect-ratio: 9 / 16; } }
.band__frame video { position: absolute; inset: 0; height: 100%; }
.band__motion { position: absolute; right: var(--gutter); bottom: var(--s-4); z-index: 1; }
.band__motion summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border: 2px solid var(--fg);
  border-radius: var(--r-s);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.band__motion summary::-webkit-details-marker { display: none; }
.band__motion summary:hover { background: var(--surface); }
/* Preklop leži na videu: svetla obroba in temno polnilo skupaj dasta vsaki piki videa vsaj 4:1 (eden od obeh tonov).
   Obroč fokusa bi na svetlem odsevu pokončnega videa padel pod 3:1, zato se ob fokusu obroba zatemni in obroč se je
   dotakne: obroč ima vedno temnega soseda (14,09:1). */
.band__motion summary:focus-visible { border-color: var(--bg); outline-offset: 0; }
.band__motion[open] .band__play, .band__motion:not([open]) .band__pause { display: none; }
.band__motion:not([open]) ~ video { display: none; }
@media (prefers-reduced-motion: reduce) { .band__frame video, .band__motion { display: none; } }
.band__cap { padding-block: var(--s-3) var(--s-7); color: var(--muted); font-size: 0.9375rem; }

/* fotografiji AI v poglavjih Kako začneš in Varnost (DESIGN.md 5): 4:3 brez okvirja in sence, polmer plošče, napis o AI
   takoj pod sliko kot pod videom in fotografijo pilota (--muted na noči 9,60:1, --day-muted na svetlem 7,02:1); pod
   64em največ 40rem, da na tablici ne preraste besedila ob sebi */
.photo { max-width: 40rem; }
.photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-l); object-fit: cover; }
.photo figcaption { margin-top: var(--s-3); color: var(--muted); font-size: 0.9375rem; }
.day .photo figcaption { color: var(--day-muted); }

/* svetla poglavja */
.day { padding-block: var(--section); background: var(--day); color: var(--day-fg); }
.intro { max-width: var(--measure); margin: calc(-1 * var(--s-2)) 0 var(--s-7); color: var(--day-muted); font-size: var(--t-2); line-height: 1.45; }
.bento { display: grid; gap: var(--s-4); }
.tile { display: grid; align-content: start; gap: var(--s-4); min-width: 0; padding: var(--s-5); border: 1px solid var(--day-border); border-radius: var(--r-l); background: var(--day-surface); }
.tile h3 { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: var(--t-3); line-height: 1; text-transform: uppercase; }
.tile p { max-width: 38rem; color: var(--day-muted); }
@media (min-width: 64em) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); }
  .tile--plan, .tile--food { grid-column: span 7; }
  .tile--coach, .tile--dash { grid-column: span 5; }
}
.bento__note { margin-top: var(--s-5); color: var(--day-muted); font-size: 0.9375rem; }
/* mali posnetki v ploščicah so v nočnih barvah, kot aplikacija na telefonu */
.mini { padding: var(--s-4); border-radius: var(--r-s); background: var(--bg); color: var(--fg); font-size: 0.9375rem; }
.tile .mini p { max-width: none; color: inherit; }
.tile .mini .muted, .tile .mini .source, .tile .mini .meter-legend, .tile .mini .dest { color: var(--muted); }
.mini ol { display: grid; gap: var(--s-2); }
.mini .msg { max-width: 92%; }
.week { display: grid; gap: 4px; }
.week li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-s); background: var(--surface); font-size: var(--t-0); line-height: 1.25; }
@media (min-width: 40em) {
  .week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .week li { grid-template-columns: none; align-content: start; align-items: start; min-height: 6.5rem; padding: var(--s-2) 4px; font-size: 0.8125rem; }
}
.week__day { color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.week__item { display: block; padding: 3px 4px; border-radius: var(--r-s); background: var(--surface-2); }
.week .hard .week__item { background: var(--accent); color: var(--accent-fg); font-weight: 700; }
.week .rest .week__item { padding-inline: 0; background: transparent; color: var(--muted); }
.dest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--t-0); }
.dest span + span { padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--r-s); color: var(--fg); }
.number { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.number small { color: var(--muted); font-size: 1.25rem; }
.source { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--t-0); }
.meter { position: relative; height: 0.75rem; margin-top: var(--s-3); overflow: hidden; border-radius: var(--r-s); background: var(--surface-2); }
.meter span { position: absolute; inset: 0 38% 0 0; background: var(--accent); }
.meter-legend { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

/* trije koraki na črtkani cesti; številke, ker so koraki zaporedni */
.start { padding-block: var(--section); }
.road { position: relative; display: grid; gap: var(--s-7); }
.road::before { content: ""; position: absolute; top: 1rem; bottom: 1rem; left: 1.4rem; border-left: 4px dashed var(--accent); }
.road li { position: relative; padding-left: 4.5rem; }
.km { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: var(--r-s); background: var(--accent); color: var(--accent-fg); font: italic 800 1.9rem / 1 var(--font-display); }
.road h3 { margin-bottom: var(--s-2); font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: var(--t-3); line-height: 1; text-transform: uppercase; }
.road p { max-width: 26rem; color: var(--muted); }
@media (min-width: 56em) {
  .road { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
  .road::before { top: 1.45rem; right: calc((100% - 2 * var(--s-6)) / 3 - 1.6rem); bottom: auto; left: 1.6rem; border-top: 4px dashed var(--accent); border-left: 0; }
  .road li { padding-top: 4.5rem; padding-left: 0; }
}
/* cesta s fotografijo AI: do 64em fotografija za cesto; od 64em cesta navpično v 7 od 12 delov in fotografija v 5, z
   zgornjim robom ob koraku »intervals.icu in Telegram«. Cesta in fotografija si delita vrstice (subgrid): ena vrstica na
   korak, zadnja (1fr) vzame del fotografije pod koraki, zato se razmik med koraki ne spremeni. Število vrstic in vrstica
   fotografije sta vezana na korake strani (tests/test_landing_page.py, test_start_photo_rows_follow_the_steps). */
.start__grid { display: grid; gap: var(--s-7); }
@media (min-width: 64em) {
  .start__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(3, auto) 1fr; row-gap: 0; }
  .start__grid .road { grid-row: 1 / -2; grid-template-columns: none; grid-template-rows: subgrid; row-gap: 0; }
  .start__grid .road::before { top: 1rem; right: auto; bottom: 1rem; left: 1.4rem; border-top: 0; border-left: 4px dashed var(--accent); }
  .start__grid .road li { padding-top: 0; padding-left: 4.5rem; }
  .start__grid .road li + li { margin-top: var(--s-7); }
  .start__grid .photo { grid-column: 2; grid-row: 2 / -1; align-self: start; margin-top: var(--s-7); }
}

/* varnost in podatki: pravila na črti, brez ikon */
.facts { display: grid; border-top: 2px solid var(--day-fg); }
.facts > div { padding-block: var(--s-5); border-bottom: 1px solid var(--day-border); }
.facts dt { margin-bottom: var(--s-1); font-size: 1.125rem; font-weight: 800; }
.facts dd { max-width: 36rem; color: var(--day-muted); }
@media (min-width: 56em) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); } }
/* uvod s fotografijo AI: do 64em fotografija takoj za uvodom in pred pravili (daleč od fotografije v pasu pilota); od
   64em uvod in prvi dve pravili levo, fotografija desno, v stolpcih pravil pod njo. Prvi dve pravili sta svoj seznam, ker
   ju fotografija ob strani stisne v en stolpec; seznam pod njima nadaljuje brez nove črte. Prvi seznam stoji na dnu
   vrstice: kadar je fotografija višja, gre razlika med uvod in črto seznama, razmik med pravili ostane enak. */
.safety__lead .photo { margin-bottom: var(--s-7); }
.safety__lead + .facts { border-top: 0; }
@media (min-width: 64em) {
  .safety__lead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--s-7); }
  .safety__lead .intro, .safety__lead .facts { grid-column: 1; }
  .safety__lead .facts { grid-template-columns: none; align-self: end; }
  .safety__lead .photo { grid-column: 2; grid-row: 1 / -1; align-self: start; margin-bottom: 0; }
}

/* pas pilota (#pilot, cilj gumba »Join the pilot«); fotografija kolesarke je tu, daleč od videa z drugo osebo */
.finale { padding-block: var(--section); background: var(--band-lime); color: var(--accent-fg); }
.finale__grid { display: grid; gap: var(--s-7); }
.finale h2 { margin-bottom: var(--s-5); font-size: clamp(3rem, 1.5rem + 7vw, 7.5rem); }
.finale p { max-width: var(--measure); font-size: var(--t-2); line-height: 1.45; }
.finale .returning { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); max-width: none; margin-top: var(--s-6); font-size: var(--t-1); }
.finale__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--r-l); object-fit: cover; }
.finale__media figcaption { margin-top: var(--s-3); font-size: 0.9375rem; }
@media (min-width: 48em) { .finale__media img { aspect-ratio: 16 / 9; } }
@media (min-width: 64em) {
  .finale__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .finale h2 { font-size: clamp(3rem, 1rem + 5vw, 6rem); }
}

/* noga */
.foot { display: grid; gap: var(--s-5); padding-block: var(--s-7); color: var(--muted); font-size: 0.9375rem; }
.foot ul { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.foot a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--fg); }

/* gibanje: en vstop izdelka in rast stolpcev ob nalaganju, gumb se ob pritisku pogrezne; ob prefers-reduced-motion se nič ne
   premakne (tudi prehod barve gumba je takojšen) in vse je vidno */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
  .btn:active { transform: translateY(1px); }
  .stack .chat { animation: rise var(--dur-enter) var(--ease-out) 80ms both; }
  .stack .today { animation: rise var(--dur-enter) var(--ease-out) 200ms both; }
  .session__bars span { transform-origin: bottom; animation: grow 420ms var(--ease-out) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes grow { from { transform: scaleY(0.2); } }