/* Daydi SSR — hand-written, no framework. Tokens mirror docs/engineering/architecture.md §8.
   Layout rule for every page: one fluid container (--container), full-bleed bands around it,
   clamp()-ed type and auto-fill grids, so 360 px and 2560 px are both first-class. */

:root {
  /* colour (light) */
  --paper: #F6F3EE; --surface: #FFFFFF; --surface-alt: #EFEBE3; --ink: #14201A; --ink-muted: #5C645F;
  --line: #E2DDD3; --pine: #1E5A46; --pine-deep: #143D30; --brand-green: #122F27; --moss: #6F9B7A;
  --ember: #E4572E; --ember-strong: #CE4319; --sun: #F2B441; --brand-sun: #FD9921;
  --sky: #4A90C2; --danger: #C62828; --success: #2E7D32; --warning: #D9A441;
  --on-dark: #FFFFFF; --on-dark-soft: rgba(255, 255, 255, 0.78); --on-dark-faint: rgba(255, 255, 255, 0.55);
  --glass: rgba(12, 26, 21, 0.42); --glass-line: rgba(255, 255, 255, 0.20);
  /* Brand surfaces for photo/dark bands. Deliberately NOT re-themed in dark mode: white type sits
     on them in both schemes, so they must stay dark. */
  --band-a: #122F27; --band-b: #143D30; --band-c: #1E5A46;
  --shadow: 0 8px 24px rgba(20, 32, 26, 0.08);
  --shadow-lift: 0 18px 40px rgba(20, 32, 26, 0.18);
  /* shape & rhythm */
  --r-chip: 8px; --r-control: 12px; --r-card: 16px; --r-sheet: 24px;
  --gutter: clamp(16px, 4vw, 64px);
  --container: min(100% - 2 * var(--gutter), 1600px);
  --gap: clamp(14px, 1.4vw, 24px);
  --band-pad: clamp(48px, 6vw, 104px);
  /* type */
  --font-display: "Unbounded", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-body: clamp(15px, 14.3px + 0.15vw, 17px);
  --fs-h1: clamp(2.05rem, 1.25rem + 2.4vw, 3.6rem);
  --fs-h2: clamp(1.5rem, 1.05rem + 1.3vw, 2.6rem);
  --fs-h3: clamp(1.1rem, 1rem + 0.35vw, 1.4rem);
  --fs-lead: clamp(1.02rem, 0.95rem + 0.42vw, 1.35rem);
  --fs-display: clamp(2.2rem, 1.3rem + 2.4vw, 3.6rem);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1613; --surface: #182019; --surface-alt: #1F2A24; --ink: #EEF1EC; --ink-muted: #A6B0A9;
    --line: #2A3630; --pine: #7FB08A; --pine-deep: #10322A; --brand-green: #0C1F1A; --moss: #7FB08A;
    --ember: #F0693E; --ember-strong: #D9491D;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lift: 0 18px 40px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--font-text);
  font-size: var(--fs-body); line-height: 1.55; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--pine); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.08; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { margin: 0 0 12px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 4px; }
.skiplink {
  position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px; border-radius: var(--r-control);
  background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); transition: top 160ms;
}
.skiplink:focus { top: 12px; text-decoration: none; }

.muted { color: var(--ink-muted); }
.small { font-size: 13px; line-height: 1.45; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 62ch; }
.label { font-size: 12px; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); margin-bottom: 8px; }
.kicker { font-family: var(--font-display); font-size: clamp(11px, 10px + 0.2vw, 13px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); font-weight: 800; margin: 0 0 14px; }
.credit { margin-top: 16px; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon--s { width: 1em; height: 1em; }
.icon--flip { transform: scaleX(-1); }

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

.wrap { width: var(--container); margin-inline: auto; }
.page { padding-block: clamp(20px, 2.4vw, 32px) clamp(48px, 5vw, 80px); }
.page--flush { padding-block: 0; }
.band { padding-block: var(--band-pad); }
/* Jumping to #joylar must not park the heading under the sticky header. */
section[id], main[id] { scroll-margin-top: 80px; }
.band--alt { background: var(--surface-alt); }
.band--deep { background: linear-gradient(158deg, var(--band-a) 0%, var(--band-b) 58%, #16493A 100%); color: var(--on-dark); }
.band--pine { background: linear-gradient(120deg, var(--band-b), var(--band-c)); color: var(--on-dark); }
.band--deep h2, .band--pine h2, .band--deep h3, .band--pine h3 { color: var(--on-dark); }
.band--deep .muted, .band--pine .muted { color: var(--on-dark-soft); }
.band--deep .kicker, .band--pine .kicker { color: var(--sun); }
.band--deep a, .band--pine a { color: var(--on-dark); }
.section { margin-top: clamp(32px, 3.4vw, 56px); }
.page > .section:first-child, .page > .band:first-child { margin-top: 0; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(20px, 2vw, 32px); }
.section__head p { margin: 8px 0 0; max-width: 58ch; }
.link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--pine); white-space: nowrap; }
.link-more:hover { text-decoration: none; gap: 10px; }
.link-more--light { color: var(--on-dark); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* The workhorse: 5–6 across on a 27", 4 at 1440, 2 on a tablet, 1 on a phone. */
.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* four-up bands (challenges): auto-fit so the row is never left half empty. */
.cards--fit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards--sm { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ------------------------------------------------------------------ header */

.topbar {
  position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.topbar__inner { display: flex; align-items: center; gap: clamp(12px, 2vw, 40px); min-height: 66px; }
.topnav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px); margin-right: auto; }
.topnav a { color: var(--ink); font-weight: 600; font-size: 14px; padding: 6px 0; border-bottom: 2px solid transparent; }
.topnav a:hover { text-decoration: none; border-bottom-color: var(--ember); }
.topbar__end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.wordmark { display: inline-flex; align-items: center; color: var(--brand-green); flex: none; }
.wordmark svg { height: clamp(28px, 2.4vw, 38px); width: auto; }
.wordmark:hover { text-decoration: none; }
.wordmark--s svg { height: 30px; }
.brand-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (prefers-color-scheme: dark) { .wordmark { color: var(--ink); } }
.langs { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); flex: none; }
.langs__item { padding: 6px 11px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ink-muted); letter-spacing: 0.04em; }
.langs__item.is-active { background: var(--pine); color: #fff; }
.langs__item:hover { text-decoration: none; background: color-mix(in srgb, var(--pine) 12%, transparent); }
.langs__item.is-active:hover { background: var(--pine); }

/* ------------------------------------------------------------------ buttons & chips */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-control);
  font-weight: 600; font-family: inherit; font-size: 15px; padding: 12px 18px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform 160ms cubic-bezier(.33, 1, .68, 1), background 160ms, box-shadow 160ms;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--ember-strong); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--ember) 35%, transparent); }
.btn--primary:hover { background: var(--ember); }
.btn--secondary { background: var(--pine); color: #fff; }
.btn--sun { background: var(--sun); color: #2A1D05; }
.btn--sun:hover { background: var(--brand-sun); }
.btn--tonal { background: var(--surface-alt); color: var(--ink); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--pine); }
.btn--glass { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.36); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255, 255, 255, 0.24); }
.btn--s { padding: 8px 14px; font-size: 13px; }
.btn--l { padding: 15px 26px; font-size: clamp(15px, 14px + 0.2vw, 17px); }
.btn--block { width: 100%; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-chip); background: var(--surface-alt); color: var(--ink); font-size: 13px; font-weight: 500; }
.chip--pine { background: color-mix(in srgb, var(--pine) 14%, transparent); color: var(--pine); }
.chip--ember { background: color-mix(in srgb, var(--ember) 14%, transparent); color: var(--ember); }
.chip--sun { background: color-mix(in srgb, var(--sun) 26%, transparent); color: #7a5200; }
.chip--danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.chip--sky { background: color-mix(in srgb, var(--sky) 16%, transparent); color: var(--sky); }

/* ------------------------------------------------------------------ home hero */

.hero-home {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(540px, 76vh, 820px); padding-block: clamp(72px, 10vh, 140px) clamp(28px, 3vh, 44px);
  background: var(--band-b); color: var(--on-dark); overflow: hidden;
}
.hero-home__photo, .hero-page__photo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.hero-home__photo img, .hero-page__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-home__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 24, 19, 0.48) 0%, rgba(10, 24, 19, 0.14) 26%, rgba(8, 20, 16, 0.56) 56%, rgba(6, 17, 13, 0.92) 100%);
}
.hero-home__inner {
  display: grid; gap: clamp(24px, 3vw, 64px); align-items: end;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}
/* The kicker rides a pill so it stays legible over snow, sky or forest. */
.hero-home .kicker, .hero-page .kicker {
  display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; color: var(--sun);
  background: rgba(8, 20, 16, 0.45); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px);
}
.hero-home__copy h1 { color: #fff; max-width: 26ch; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55); }
.hero-home__copy .lead { margin-top: clamp(14px, 1.6vw, 22px); color: var(--on-dark); max-width: 56ch; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.hero-home__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.4vw, 32px); }
.hero-home__note { margin: 12px 0 0; font-size: 13px; color: var(--on-dark-soft); }
.hero-home__panel {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-sheet);
  padding: clamp(18px, 1.8vw, 28px); backdrop-filter: blur(16px) saturate(1.2);
}
.hero-home__panel .label { color: var(--on-dark-faint); }
.hero-home__trust { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; font-size: 13px; color: var(--on-dark-soft); }
.hero-home__trust .icon { margin-top: 1px; color: var(--sun); }
.hero-home__credit { width: var(--container); margin: 14px auto 0; text-align: right; font-size: 11px; color: var(--on-dark-faint); }
.hero-home__credit a { color: var(--on-dark-soft); }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 20px); }
.figure__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1rem + 1.5vw, 2.7rem); line-height: 1; color: var(--sun); }
.figure__label { margin-top: 8px; font-size: clamp(11px, 10px + 0.15vw, 12px); letter-spacing: 0.07em; text-transform: uppercase; color: var(--on-dark-soft); }

/* inner-page hero (region pages) */
.hero-page {
  position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden;
  min-height: clamp(280px, 34vh, 420px); padding-block: clamp(72px, 9vh, 120px) clamp(24px, 3vw, 40px);
  background: var(--band-b); color: var(--on-dark);
}
.hero-page__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 24, 19, 0.62) 0%, rgba(10, 24, 19, 0.34) 40%, rgba(8, 20, 16, 0.86) 100%);
}
.hero-page h1 { color: #fff; }
.hero-page .lead { color: var(--on-dark-soft); margin-top: 10px; }

/* ------------------------------------------------------------------ founder challenge */

.founder { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 64px); align-items: center; }
.founder__gauge { position: relative; display: grid; place-items: center; }
.ring { width: min(280px, 62vw); height: auto; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 9; }
.ring__bar { fill: none; stroke: var(--sun); stroke-width: 9; stroke-linecap: round; }
.founder__count { position: absolute; text-align: center; }
.founder__done { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); line-height: 1; color: var(--sun); }
.founder__done small { font-size: 0.36em; color: var(--on-dark-soft); }
.founder__of { display: block; margin-top: 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-soft); }
.founder__body .lead { color: var(--on-dark-soft); margin-top: 12px; }
.expeditions { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: clamp(18px, 2vw, 28px) 0; }
.expedition { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-control); background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.12); }
.expedition__ordinal { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--sun); min-width: 44px; }
.expedition__main { min-width: 0; }
.expedition__label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-faint); }
.expedition__dest { display: block; font-weight: 600; margin-top: 3px; }
.expedition__date { font-size: 13px; color: var(--on-dark-soft); }
.progress { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.progress__bar { height: 100%; background: var(--sun); border-radius: 999px; }
.progress--ink { background: var(--surface-alt); }
.progress--ink .progress__bar { background: var(--pine); }

/* ------------------------------------------------------------------ photo cards */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.card__body { padding: clamp(14px, 1.4vw, 20px); }

.place {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden;
  isolation: isolate; background: var(--pine-deep); color: #fff; box-shadow: var(--shadow);
  transition: transform 240ms cubic-bezier(.33, 1, .68, 1), box-shadow 240ms;
}
.place:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); text-decoration: none; }
.place__photo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.place__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.33, 1, .68, 1); }
.place__photo--blank { background: linear-gradient(150deg, var(--band-b), var(--band-c) 62%, #3F7A5C); display: grid; place-items: center; }
.place__glyph { width: 34%; height: auto; margin-bottom: 16%; color: rgba(255, 255, 255, 0.32); stroke-width: 1.1; }
.place:hover .place__photo img { transform: scale(1.05); }
.place__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 20, 16, 0) 34%, rgba(8, 20, 16, 0.55) 62%, rgba(6, 16, 13, 0.9) 100%); }
.place__body { position: absolute; inset-inline: clamp(12px, 1.2vw, 18px); bottom: clamp(12px, 1.2vw, 18px); }
.place__kind { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); }
.place__region::before { content: "·"; margin-inline: 5px; opacity: 0.7; }
.place__name { font-family: var(--font-display); font-weight: 700; line-height: 1.15; font-size: clamp(1.05rem, 0.96rem + 0.3vw, 1.35rem); margin-top: 6px; }
.place__meta { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 6px; font-size: 13px; color: var(--on-dark-soft); }
.place__meta span + span::before { content: "·"; margin-right: 8px; opacity: 0.7; }

.region {
  position: relative; display: flex; align-items: flex-end; min-height: clamp(104px, 8.5vw, 150px);
  border-radius: var(--r-control); overflow: hidden; isolation: isolate; color: #fff; background: var(--pine-deep);
  box-shadow: var(--shadow); transition: transform 240ms cubic-bezier(.33, 1, .68, 1), box-shadow 240ms;
}
.region:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); text-decoration: none; }
.region__photo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.region__photo img { width: 100%; height: 100%; object-fit: cover; }
.region__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 20, 16, 0) 22%, rgba(8, 20, 16, 0.45) 58%, rgba(6, 17, 13, 0.92) 100%); }
.region__body { padding: 10px 12px; }
/* Region names are proper nouns: they may wrap between words, never inside one. */
.region__name { display: block; font-family: var(--font-display); font-weight: 700; line-height: 1.2; font-size: clamp(0.72rem, 0.68rem + 0.16vw, 0.92rem); overflow-wrap: normal; word-break: keep-all; hyphens: manual; }
.region__count { font-size: 12px; color: var(--on-dark-soft); }

.challenge-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); color: var(--ink); transition: transform 240ms cubic-bezier(.33, 1, .68, 1), box-shadow 240ms; }
.challenge-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); text-decoration: none; }
.challenge-card__photo { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.challenge-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.challenge-card__body { padding: clamp(14px, 1.4vw, 20px); display: flex; flex-direction: column; gap: 6px; }
.challenge-card__head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pine); }
.challenge-card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; }
.challenge-card__body p { margin: 0; }
.challenge-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--ink-muted); }
.challenge-card__meta span + span::before { content: "·"; margin-right: 10px; opacity: 0.6; }

.info-card { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 1.8vw, 26px); border-radius: var(--r-card); background: color-mix(in srgb, var(--pine) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--pine) 22%, transparent); }
.info-card__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--pine) 16%, transparent); color: var(--pine); margin-bottom: 4px; }
.info-card p { margin: 0; }
.info-card .link-more { margin-top: auto; padding-top: 10px; }

.figures + .hero-home__trust { margin-top: 18px; }

/* ------------------------------------------------------------------ steps */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.step { position: relative; padding: clamp(20px, 2vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.step__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--pine) 12%, transparent); color: var(--pine); margin-bottom: 16px; }
.step__icon .icon { width: 26px; height: 26px; }
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; }
.step::after {
  counter-increment: step; content: "0" counter(step); position: absolute; top: clamp(16px, 1.6vw, 24px);
  right: clamp(16px, 1.6vw, 24px); font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1; color: color-mix(in srgb, var(--ink) 9%, transparent);
}

/* ------------------------------------------------------------------ get-app band */

.get-app { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: clamp(24px, 3vw, 56px); align-items: center; }
.get-app .lead { color: var(--on-dark-soft); margin-top: 12px; }
.get-app__note { color: var(--on-dark-faint) !important; margin-top: 10px; }
.get-app .ctas { justify-content: flex-end; }

/* ------------------------------------------------------------------ legacy page heroes & stats */

.hero { position: relative; min-height: clamp(300px, 34vw, 440px); border-radius: var(--r-sheet); overflow: hidden; isolation: isolate; background: linear-gradient(160deg, var(--pine-deep) 0%, var(--pine) 55%, var(--moss) 100%); color: #fff; display: flex; align-items: flex-end; box-shadow: var(--shadow); }
.hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero__photo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 20, 16, 0.10) 0%, rgba(8, 20, 16, 0.82) 100%); }
.hero__body { position: relative; padding: clamp(20px, 3vw, 44px); width: 100%; }
.hero__body h1 { color: #fff; }
.hero__body .kicker { color: var(--sun); }
.hero__body .chip { background: rgba(255, 255, 255, 0.18); color: #fff; }
.hero--tall { min-height: clamp(380px, 42vw, 540px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; }
.stat__value { font-family: var(--font-display); font-size: clamp(20px, 1.4vw + 14px, 26px); font-weight: 800; line-height: 1.05; }
.stat__label { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; }
.stat--hero .stat__value { font-size: clamp(24px, 2vw + 14px, 34px); }

/* ------------------------------------------------------------------ content blocks */

.prose { max-width: 72ch; }
.prose h2, .prose h3 { margin: 26px 0 8px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 4px; }
.prose code { background: var(--surface-alt); padding: 1px 6px; border-radius: 6px; font-size: 0.92em; }
.two-col { display: grid; gap: clamp(24px, 3vw, 48px); grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.aside { display: grid; gap: 16px; align-content: start; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); }
.row:hover { text-decoration: none; border-color: var(--pine); }
.row__main { min-width: 0; }
.row__title { font-weight: 600; }
.row__sub { font-size: 13px; color: var(--ink-muted); }
.row__value { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.price { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.price__src { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); }
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); }
.banner--danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }
.banner--warning { border-color: var(--warning); background: color-mix(in srgb, var(--sun) 18%, var(--surface)); }
.banner--info { border-color: var(--sky); background: color-mix(in srgb, var(--sky) 10%, var(--surface)); }
.banner strong { display: block; }
.track, .elevation { width: 100%; height: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.months { display: flex; flex-wrap: wrap; gap: 6px; }
.months__m { width: 40px; text-align: center; padding: 6px 0; border-radius: var(--r-chip); background: var(--surface-alt); font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.months__m.is-on { background: var(--pine); color: #fff; }
.check { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.check__mark { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--pine); display: inline-block; flex: none; }
.check--optional .check__mark { border-style: dashed; border-color: var(--ink-muted); }
.cond { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.cond__item { padding: 10px 12px; border-radius: var(--r-control); background: var(--surface-alt); font-size: 13px; }
.cond__item strong { display: block; font-size: 15px; }
.cond--yes strong { color: var(--success); }
.cond--partial strong { color: var(--warning); }
.cond--no strong { color: var(--danger); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gallery img { aspect-ratio: 1; object-fit: cover; border-radius: var(--r-control); width: 100%; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: clamp(24px, 2.5vw, 40px); }

.avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--surface-alt); border: 3px solid var(--surface); box-shadow: var(--shadow); }
.avatar--placeholder { display: grid; place-items: center; font-family: var(--font-display); font-size: 32px; color: var(--pine); }
.profile-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge { text-align: center; padding: 16px 10px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.badge__ring { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--surface-alt); border: 3px solid var(--line); }
.badge--rare .badge__ring { border-color: var(--sky); }
.badge--epic .badge__ring { border-color: var(--pine); }
.badge--legendary .badge__ring { border-color: var(--sun); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 30%, transparent); }
.badge__name { font-weight: 600; font-size: 14px; }
.badge__rarity { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); }
.trip-card { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 10px; }
.trip-card:hover { text-decoration: none; }
.trip-card__img { width: 96px; height: 72px; border-radius: var(--r-control); object-fit: cover; background: linear-gradient(160deg, var(--pine-deep), var(--moss)); }
.share { text-align: center; }
.share__title { font-family: var(--font-display); font-size: clamp(32px, 7vw, 64px); font-weight: 800; line-height: 1; color: #fff; }
.share__dest { font-family: var(--font-display); font-size: clamp(20px, 4vw, 32px); color: var(--sun); margin-top: 8px; }
.share__count { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 999px; background: var(--ember-strong); color: #fff; font-family: var(--font-display); font-weight: 800; }
.share__brand { margin-top: 24px; font-family: var(--font-display); font-weight: 800; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px; }
.live-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 25%, transparent); }
.live-dot--off { background: var(--ink-muted); box-shadow: none; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.error { text-align: center; padding: clamp(48px, 8vw, 96px) 0; }
.error__code { font-family: var(--font-display); font-size: clamp(64px, 10vw, 112px); font-weight: 800; color: var(--line); line-height: 1; }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.timeline__item { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-control); background: var(--surface); border: 1px solid var(--line); }
.timeline__item.is-done { border-color: var(--pine); }
.timeline__ordinal { font-family: var(--font-display); font-weight: 800; color: var(--pine); }

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

.footer { border-top: 1px solid var(--line); padding-block: clamp(36px, 4vw, 64px) 24px; background: var(--surface-alt); margin-top: 0; }
.footer__grid { display: grid; gap: clamp(24px, 2.5vw, 48px); grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(150px, 1fr)); }
.footer__brand .langs { margin-top: 16px; width: fit-content; }
.footer__brand p { max-width: 40ch; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__links a { color: var(--ink); }
.footer__links a:hover { color: var(--pine); }
.footer__base { margin-top: clamp(24px, 3vw, 44px); padding-top: 18px; border-top: 1px solid var(--line); }
.footer__base p { margin: 0; }
.emergency { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 4px 0; }
.emergency a { color: var(--danger); }

/* ------------------------------------------------------------------ responsive */

@media (min-width: 1024px) {
  /* Wide screens: the copy sits left, so darken that side instead of the whole photo. */
  .hero-home__veil {
    background:
      linear-gradient(180deg, rgba(10, 24, 19, 0.52) 0%, rgba(10, 24, 19, 0.16) 26%, rgba(8, 20, 16, 0.52) 58%, rgba(6, 17, 13, 0.90) 100%),
      linear-gradient(96deg, rgba(8, 20, 16, 0.60) 0%, rgba(8, 20, 16, 0.26) 46%, rgba(8, 20, 16, 0) 76%);
  }
}
@media (max-width: 1180px) {
  .hero-home__inner { grid-template-columns: 1fr; }
  .hero-home__panel { max-width: 620px; }
  .footer__grid { grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 960px) {
  .topnav { display: none; }
  .steps { grid-template-columns: 1fr; }  /* 2 + 1 reads as a mistake; stacked reads as a list */
  .two-col, .founder, .get-app { grid-template-columns: 1fr; }
  .get-app .ctas { justify-content: flex-start; }
  .ring { width: min(220px, 42vw); }
  .founder__done { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem); }
  .founder__gauge { justify-self: start; }
  .ring { width: min(190px, 46vw); }
  .founder__done { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.4rem); }
}
@media (max-width: 720px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .hero-home { min-height: clamp(520px, 86vh, 760px); }
  .hero-home__credit { text-align: left; }
}
@media (max-width: 640px) {
  /* Phone: the featured grid becomes a snap rail instead of eight stacked cards. */
  .cards--rail {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: 4px;
  }
  .cards--rail::-webkit-scrollbar { display: none; }
  .cards--rail > * { flex: 0 0 82%; scroll-snap-align: center; }
  .cards--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section__head { align-items: flex-start; }
  .figures { gap: 10px; }
  .trip-card { grid-template-columns: 72px 1fr; }
  .trip-card__img { width: 72px; height: 56px; }
}
@media (max-width: 560px) {
  .topbar__cta { display: none; }
  .topbar__inner { min-height: 58px; }
  .btn--l { padding: 13px 20px; }
  .hero-home__actions .btn { flex: 1 1 auto; }
  .cond, .stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}