/* ============================================================
   Wend marketing site — shared stylesheet
   Design tokens ported from DesignSystem.swift via tokens.jsx
   Palette: classic (parchment + forest + terra)
   ============================================================ */

/* ---------- Tokens ---------- */
/* Move 2 (Apr 2026): pivoted away from the cream + warm-orange + Playfair
   stack that had become Claude/Anthropic-adjacent. Stamp Red replaces terra
   as the primary accent (vintage-poster, less terracotta). Brass replaces
   amber (compass / temple-gold). Cormorant Garamond replaces Playfair
   Display in --display. Forest, parchment and the rest unchanged. */
:root {
  /* Brand */
  --forest: #1C3D2E;
  --forest-light: #2A5A42;
  --forest-deep: #0F2418;
  /* Iris Ink — Move 3.5 (Apr 2026): committed to purple as Wend's
     signature colour. Distinct from every AI tool and every other
     travel app. Cultural roots in the regions Wend covers
     (bougainvillea, jacaranda, imperial silk, H'mong indigo,
     Buddhist textiles, lotus). Variable name kept as --terra so
     internal call sites don't refactor — the design intent is
     "primary accent ink", value just changed. */
  --terra: #4D2E5C;          /* Iris Ink — was #B23529 (stamp red) */
  --terra-light: #6B4A7E;    /* lighter iris — was #D04A3E */
  --terra-deep: #2E1A38;     /* deeper iris (hover) — was #8B2820 */
  --amber: #A6843A;          /* Brass — kept (warm second voice) */
  --amber-light: #C49E54;    /* lighter brass — kept */

  /* Atlas Blue retired — consolidated into Iris (--terra) so the
     palette has two clear voices (cool iris + warm brass) rather
     than three. Postmarks, field-stamps, and marginalia all use
     --terra now. The legacy aliases below are kept for any rules
     that still reference --atlas-blue, so they pick up the new ink. */
  --atlas-blue: var(--terra);
  --atlas-blue-light: var(--terra-light);

  /* Dark surface — Move 4.5: was forest #1C3D2E, which fought
     visually with iris purple. This is iris-deep-tinted so dark
     sections (compare panel, FAQ panel) harmonise with the
     primary accent. Forest token is kept for parchment-paired
     uses (sealed-note hover-rings, mini-spine markers, glyphs). */
  --ink: #241632;

  /* Backgrounds — Move 3 (Apr 2026): aged ledger / sepia, cooler than
     the original Anthropic-adjacent cream. */
  --parchment: #E9E0CB;      /* aged ledger — was #F4EFE4 */
  --parch-dark: #DCD2BB;     /* deeper aged paper — was #EDE7D8 */
  --card: #FFFFFF;
  --white: #FDFAF5;

  /* Ink */
  --text: #1A1810;
  --text-muted: #7A7060;
  --brown: #7A5C3A;
  --sand: #C8B89A;
  --hair: #E0D8CA;

  /* Accent (single, ship value) */
  --accent: var(--terra);

  /* Type */
  --display: 'Cormorant Garamond', Georgia, serif;
  --ui: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Shadows */
  --shadow-card: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-panel: 0 18px 40px rgba(15,36,24,0.18), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-hero: 0 30px 60px rgba(0,0,0,0.4);
  --shadow-phone: 0 30px 80px rgba(15,36,24,0.28), 0 8px 20px rgba(15,36,24,0.18);

  /* Layout */
  --pad-x: 56px;
  --max-w: 1280px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
html { scroll-behavior: smooth; }

/* ---------- Base ---------- */
body {
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Type primitives ---------- */
.display      { font-family: var(--display); font-weight: 700; letter-spacing: -1.4px; line-height: 1; }
.display-xxl  { font-size: 132px; line-height: .9; letter-spacing: -3.5px; font-weight: 400; }
.display-xl   { font-size: 96px;  line-height: .96; letter-spacing: -2.5px; font-weight: 700; }
.display-lg   { font-size: 84px;  line-height: 1;   letter-spacing: -2px; font-weight: 400; }
.display-md   { font-size: 64px;  line-height: 1;   letter-spacing: -1.4px; font-weight: 400; }
.display-sm   { font-size: 56px;  line-height: 1.02; letter-spacing: -1.4px; font-weight: 400; font-style: italic; }
.display-xs   { font-size: 32px;  line-height: 1.1; letter-spacing: -.5px; font-weight: 700; }
.display-card { font-size: 22px;  line-height: 1.1; letter-spacing: -.3px; font-weight: 700; }
.italic       { font-style: italic; }
.serif-italic { font-family: var(--display); font-style: italic; }

.body-lg { font-size: 19px; line-height: 1.55; }
.body    { font-size: 17px; line-height: 1.55; }
.body-sm { font-size: 14px; line-height: 1.5; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .25;
  max-width: 60px;
}
.eyebrow.no-rule::after { display: none; }

.micro { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; }
.nano  { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }

/* ---------- Layout primitives ---------- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.section { padding: 120px var(--pad-x); }
.section--tight { padding: 80px var(--pad-x); }
.section + .section { border-top: 1px solid var(--hair); }
.section--dark {
  background: var(--ink);
  color: var(--white);
  border-top: none !important;
  /* On dark surfaces, accent flips from iris -> brass so check
     circles, italic display spans, FAQ summary toggles etc. read
     as a warm complement to the cool iris bg, rather than fighting
     it. iris stays the brand primary on light surfaces. */
  --accent: var(--amber);
}
.section--dark .eyebrow { color: var(--amber-light); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1px;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease, color 150ms ease, border-color 150ms ease;
  text-align: center;
}
.btn--primary    { background: var(--accent); color: #FFFFFF; }
.btn--primary:hover  { background: var(--terra-deep); }
.btn--ghost      { background: transparent; color: var(--text); border: 1px solid rgba(26,24,16,.2); }
.btn--ghost:hover    { border-color: var(--text); }
.btn--ghost.on-dark  { color: var(--white); border-color: rgba(255,255,255,.25); }
.btn--ghost.on-dark:hover { border-color: var(--white); }
.btn--lg         { padding: 12px 22px; font-size: 14px; }

/* App store button (only Apple — Wend is iOS-only) */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--text);
  color: var(--white);
  min-width: 170px;
  transition: transform 150ms ease, background 150ms ease;
}
.store-btn:hover { transform: translateY(-1px); background: #000; }
.store-btn svg { flex-shrink: 0; }
.store-btn .store-btn__text { display: flex; flex-direction: column; line-height: 1.05; }
.store-btn .store-btn__sub  { font-size: 9px; font-weight: 500; letter-spacing: .4px; opacity: .7; text-transform: none; }
.store-btn .store-btn__main { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.store-btn.on-dark { background: var(--white); color: var(--text); }

.store-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- NavBar ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-x);
  background: var(--parchment);
  border-bottom: 1px solid transparent;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.nav.is-scrolled {
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 16px rgba(15,36,24,.05);
  border-bottom-color: var(--hair);
}
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__wordmark {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -.5px;
  line-height: 1;
  color: var(--text);
}
.nav__links { display: flex; align-items: center; gap: 28px; font-family: var(--ui); font-size: 13px; font-weight: 500; }
.nav__links a:not(.btn) { color: var(--text-muted); transition: color 150ms ease; }
.nav__links a:not(.btn):hover { color: var(--text); }
.nav__cta { white-space: nowrap; }

/* ---------- Logo mark ---------- */
.logo-mark {
  display: inline-block;
  flex-shrink: 0;
}

/* ---------- TopoLines decorative bg ---------- */
.topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .9;
}
@media (max-width: 768px) {
  .topo { display: none; }
}

/* ---------- SealedNote ---------- */
.sealed-note {
  background: var(--parchment);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  border-radius: 0;
  max-width: 540px;
}
.sealed-note__kicker {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.sealed-note__body {
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--forest);
}
.sealed-note__attribution {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--accent);
  margin-top: 8px;
}

/* ---------- PhoneFrame ---------- */
.phone {
  position: relative;
  width: 280px;
  aspect-ratio: 280 / 580;
  border-radius: 38px;
  background: #0c0c0c;
  padding: 8px;
  box-shadow: var(--shadow-phone);
}
.phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background: var(--parchment);
  position: relative;
}
.phone__notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 22px;
  border-radius: 14px;
  background: #0c0c0c;
  z-index: 5;
}
.phone--w260 { width: 260px; }
.phone--w300 { width: 300px; }

/* Phone screen content stubs (placeholder — replace with real PNG exports) */
.screen-stub {
  position: absolute;
  inset: 0;
  padding: 36px 18px 18px;
  display: flex;
  flex-direction: column;
  font-family: var(--ui);
}
.screen-stub__kicker {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--accent);
  text-transform: uppercase;
}
.screen-stub__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.5px;
  line-height: 1.05;
  color: var(--text);
  margin-top: 6px;
}
.screen-stub__title em { font-style: italic; font-weight: 400; color: var(--accent); }
.screen-stub__sub {
  font-family: var(--display);
  font-style: italic;
  font-size: 12px;
  color: var(--brown);
  margin-top: 6px;
  line-height: 1.4;
}
.screen-stub__divider { height: 1px; background: var(--hair); margin: 14px 0 10px; }
.screen-stub__row {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(224,216,202,.6);
  font-size: 11px; color: var(--text);
}
.screen-stub__row:last-child { border-bottom: none; }
.screen-stub__time {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: .8px;
  width: 36px;
  flex-shrink: 0;
  padding-top: 2px;
}
.screen-stub__row-body { flex: 1; line-height: 1.35; }
.screen-stub__row-body strong { font-weight: 600; }
.screen-stub__row-note {
  font-family: var(--display);
  font-style: italic;
  font-size: 10px;
  color: var(--brown);
  margin-top: 2px;
  line-height: 1.3;
}

/* ============================================================
   .cinematic — reusable theatrical stage utility
   Full-bleed photo + iris gradient overlay + white text +
   brass accent override. Apply to any section that should be
   a cinematic peak (hero, mid-page wow, closing CTA).

   Sister rule .hero--cinematic stays for the hero specifically;
   it has hero-only layout (grid, big type) on top of these
   shared atmospherics.
   ============================================================ */

.cinematic {
  position: relative;
  isolation: isolate;
  color: var(--white);
  --accent: var(--amber);   /* iris->brass for dark surfaces */
  overflow: hidden;
}
.cinematic__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.cinematic__bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transform: scale(1.05);
  max-width: none !important;
}
.cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(46,26,56,.65) 0%, rgba(77,46,92,.55) 45%, rgba(26,18,28,.85) 100%);
}

/* When a section is .cinematic, recolour its known inner elements
   so they read on dark. Lots of small overrides — this is the price
   of having sections that work on both light and dark surfaces. */
.cinematic .chapter,
.cinematic .chapter__num { color: var(--amber); }
.cinematic h1, .cinematic h2 { color: var(--white); }
.cinematic h2 em { color: var(--amber); }

/* The Day spread overrides */
.cinematic .day-spread__head h2 { color: var(--white); }
.cinematic .day-spread__head h2 em { color: var(--amber); }
.cinematic .day-spread__head p { color: rgba(253,250,245,.78); }

/* Horizontal trail on cinematic bg */
.cinematic .h-trail__line {
  background-image: linear-gradient(to right, var(--amber) 50%, transparent 50%);
}
.cinematic .h-trail__time { color: rgba(253,250,245,.65); }
.cinematic .h-trail__stop--now .h-trail__time { color: var(--amber); }
.cinematic .h-trail__place { color: var(--white); }
.cinematic .h-trail__note { color: rgba(253,250,245,.6); }
.cinematic .h-trail__marker {
  border-color: rgba(36,22,50,.95);  /* roughly --ink, masking the dashed line through the marker */
}
.cinematic .h-trail__stop--past .h-trail__marker { background: rgba(253,250,245,.35); box-shadow: 0 0 0 1px rgba(253,250,245,.35); }
.cinematic .h-trail__stop--now .h-trail__marker {
  background: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), 0 0 0 8px rgba(166,132,58,.25);
}

/* Final-CTA on cinematic bg */
.cinematic .final-cta__heading { color: var(--white); }
.cinematic .final-cta__heading em { color: var(--amber); }
.cinematic .final-cta__small { color: rgba(253,250,245,.7); }

/* How-it-works hero on cinematic bg */
.cinematic .hiw-hero__title { color: var(--white); }
.cinematic .hiw-hero__title em { color: var(--amber); }
.cinematic .hiw-hero__lead { color: rgba(253,250,245,.78); }
.cinematic .hiw-hero__rule .micro:first-child { color: var(--amber); }
.cinematic .hiw-hero__rule .micro:last-child { color: rgba(253,250,245,.6); }
.cinematic .hiw-hero__rule .line { background: rgba(253,250,245,.25); }

/* Store button on cinematic surfaces — invert to white pill */
.cinematic .store-btn {
  background: var(--white);
  color: var(--text);
}
.cinematic .store-btn:hover { background: rgba(253,250,245,.92); }

/* Section divider lines should not show against cinematic bg */
.cinematic { border-top: none !important; }
.cinematic + .section,
.cinematic + .section--dark { border-top: none !important; }

/* Brass chapter-flourish at section seams. Sits at the bottom of
   every cinematic section so consecutive cinematics get a clean
   visual break. Centred dashed brass line that fades out at edges -
   like a book chapter break. */
.cinematic::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(166,132,58,0) 18%,
      rgba(166,132,58,.5) 36%,
      rgba(166,132,58,.5) 64%,
      rgba(166,132,58,0) 82%,
      transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Statement section on cinematic bg */
.cinematic .statement__quote { color: var(--white); }
.cinematic .statement__quote .ink { color: var(--amber); }
.cinematic .statement__lede { color: rgba(253,250,245,.8); }

/* Section-head pattern on cinematic bg */
.cinematic .section-head__title { color: var(--white); }
.cinematic .section-head__title em { color: var(--amber); }
.cinematic .section-head__lede { color: rgba(253,250,245,.78); }

/* Compare section's heading + lede on cinematic bg */
.cinematic .compare__heading { color: var(--white); }
.cinematic .compare__heading em { color: var(--amber); }
.cinematic .compare__lede { color: rgba(253,250,245,.78); }

/* How-it-works step rows on cinematic bg */
.cinematic .step__title { color: var(--white); }
.cinematic .step__title em { color: var(--amber); }
.cinematic .step__body { color: rgba(253,250,245,.78); }
.cinematic .step__detail li { color: var(--white); }
.cinematic .step__kicker { color: rgba(253,250,245,.65); }
.cinematic .step__numeral { color: var(--amber); }

/* Field stamps + postmarks on cinematic bg — shift to brass */
.cinematic .field-stamp {
  border-color: var(--amber);
  background: rgba(166, 132, 58, .10);
  color: var(--amber);
}
.cinematic .field-stamp::before { background: var(--amber); }
.cinematic .postmark {
  border-color: var(--amber);
  background: rgba(166, 132, 58, .08);
  color: var(--amber);
}
.cinematic .postmark::before { border-color: var(--amber); }
.cinematic .postmark__date { color: var(--amber); }
.cinematic .postmark__rule { background: var(--amber); }

/* ============================================================
   Move 4 — Apple-staging direction. Full-bleed cinematic hero,
   theatrical pacing, big type, horizontal Living Trail.
   ============================================================ */

/* Cinematic hero with full-bleed photo + iris overlay */
.hero--cinematic {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--white);
  isolation: isolate;
  padding: 80px 0 120px;
}
.hero--cinematic .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero--cinematic .hero-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transform: scale(1.05);
  max-width: none !important;
}
.hero--cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(46,26,56,.65) 0%, rgba(77,46,92,.55) 45%, rgba(26,18,28,.85) 100%);
}
.hero--cinematic .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 0 var(--pad-x);
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  width: 100%;
}
.hero--cinematic .hero__pill {
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
}
.hero--cinematic .hero__pill-text { color: var(--white); }
.hero--cinematic .hero__pill-dot { background: var(--amber); }
.hero--cinematic .hero__title {
  color: var(--white);
  font-size: 112px;
  letter-spacing: -3px;
  line-height: .94;
}
.hero--cinematic .hero__title em {
  color: var(--amber);
  font-style: italic;
  font-weight: 400;
}
.hero--cinematic .hero__lead {
  color: rgba(253,250,245,.85);
  max-width: 480px;
}
.hero--cinematic .hero__trust-text-line1 { color: var(--white); }
.hero--cinematic .hero__trust-text-line2 { color: rgba(253,250,245,.7); }
.hero--cinematic .hero__trust-stack > span { border-color: transparent; }
.hero--cinematic .store-btn {
  background: var(--white);
  color: var(--text);
}
.hero--cinematic .store-btn:hover { background: rgba(253,250,245,.92); }

/* Scroll cue at the bottom of the hero */
.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(253,250,245,.65);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 1;
}
.scroll-cue::after {
  content: '';
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(253,250,245,.6), transparent);
}

/* Massive display scale for the cinematic hero */
@media (max-width: 1199px) {
  .hero--cinematic .hero__title { font-size: 80px; letter-spacing: -2.2px; }
}
@media (max-width: 768px) {
  .hero--cinematic { min-height: auto; padding: 64px 0 96px; }
  .hero--cinematic .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero--cinematic .hero__title { font-size: 52px; letter-spacing: -1.2px; }
}

/* Phone glow tweak when on cinematic hero */
.hero--cinematic .phone--large {
  box-shadow: 0 50px 120px rgba(0,0,0,.5), 0 20px 40px rgba(77,46,92,.35);
}

/* ============================================================
   Chapter label — vertical-rhythm anchor for sections.
   Like a book chapter divider.
   ============================================================ */

.chapter {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 32px;
}
.chapter__num {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.2px;
  color: var(--terra);
  text-transform: none;
}
.chapter__rule {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .25;
  max-width: 80px;
}

/* ============================================================
   Statement section — quiet typographic moment after hero
   ============================================================ */

.statement {
  background: var(--parchment);
  padding: 160px var(--pad-x) 160px;
  position: relative;
}
.statement__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.statement__quote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 84px;
  line-height: 1.05;
  letter-spacing: -1.6px;
  color: var(--text);
  margin: 0;
}
.statement__quote .ink { color: var(--terra); }
.statement__lede {
  font-family: var(--ui);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 640px;
  margin: 40px auto 0;
}
@media (max-width: 1199px) {
  .statement { padding: 120px var(--pad-x); }
  .statement__quote { font-size: 60px; letter-spacing: -1px; }
}
@media (max-width: 768px) {
  .statement { padding: 96px var(--pad-x); }
  .statement__quote { font-size: 38px; letter-spacing: -.6px; }
}

/* ============================================================
   Horizontal Living Trail — feature section visual
   Train-timetable feel. Big.
   ============================================================ */

.day-spread {
  background: var(--parchment);
  padding: 160px var(--pad-x) 160px;
  position: relative;
  overflow: hidden;
}
.day-spread__head {
  max-width: var(--max-w);
  margin: 0 auto 80px;
}
.day-spread__head h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -1.6px;
  color: var(--text);
  margin-top: 16px;
}
.day-spread__head h2 em {
  font-style: italic;
  color: var(--terra);
}
.day-spread__head p {
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--brown);
  max-width: 540px;
  margin-top: 18px;
}
@media (max-width: 1199px) {
  .day-spread__head h2 { font-size: 52px; }
}
@media (max-width: 768px) {
  .day-spread { padding: 96px var(--pad-x); }
  .day-spread__head h2 { font-size: 38px; }
}

/* The horizontal trail itself */
.h-trail {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  padding: 64px 0 32px;
}
.h-trail__line {
  position: absolute;
  top: 80px;
  left: 5%;
  right: 5%;
  height: 1.5px;
  background-image: linear-gradient(to right, var(--terra) 50%, transparent 50%);
  background-size: 12px 1.5px;
  background-repeat: repeat-x;
  z-index: 0;
}
.h-trail__stops {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}
.h-trail__stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
}
.h-trail__time {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.h-trail__marker {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--white);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--parchment);
  box-shadow: 0 0 0 1px var(--amber);
  margin-bottom: 16px;
  position: relative;
}
.h-trail__stop--past .h-trail__marker {
  background: var(--sand);
  box-shadow: 0 0 0 1px var(--sand);
}
.h-trail__stop--past { opacity: .55; }
.h-trail__stop--now .h-trail__marker {
  background: var(--terra);
  box-shadow: 0 0 0 1px var(--terra), 0 0 0 8px rgba(77, 46, 92, .18);
}
.h-trail__stop--now .h-trail__time { color: var(--terra); }
.h-trail__place {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.3px;
  color: var(--text);
  max-width: 160px;
}
.h-trail__note {
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: var(--brown);
  margin-top: 8px;
  max-width: 180px;
}
@media (max-width: 1199px) {
  .h-trail__stops { grid-template-columns: repeat(3, 1fr); gap: 32px 12px; }
  .h-trail__stop:nth-child(n+4) { grid-row: 2; }
  .h-trail__line { display: none; }
}
@media (max-width: 768px) {
  .h-trail__stops { grid-template-columns: repeat(2, 1fr); }
  .h-trail__stop { align-items: flex-start; text-align: left; }
}

/* ============================================================
   Move 3 motifs — field journal / cartographer's atlas vocabulary
   Used sparingly: postmarks, passport stamps, dot-grid texture,
   route arrows. Atlas Blue is the cool counterpoint to the warm
   stamp-red + brass.
   ============================================================ */

/* Postmark — circular date stamp */
.postmark {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1.5px solid var(--atlas-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  color: var(--atlas-blue);
  text-transform: uppercase;
  background: rgba(77, 46, 92, .06);
  transform: rotate(-7deg);
  flex-shrink: 0;
  letter-spacing: 1.2px;
}
.postmark::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 0.5px solid var(--atlas-blue);
  opacity: .55;
}
.postmark__top, .postmark__bottom {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.4px;
  position: relative;
  z-index: 1;
}
.postmark__date {
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--atlas-blue);
  margin: 4px 0;
  line-height: 1;
  text-transform: none;
  position: relative;
  z-index: 1;
}
.postmark__rule {
  width: 32px;
  height: 1px;
  background: var(--atlas-blue);
  opacity: .4;
  margin: 2px 0;
}

/* Field stamp — rectangular passport stamp eyebrow */
.field-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1.5px solid var(--atlas-blue);
  background: rgba(77, 46, 92, .06);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--atlas-blue);
  transform: rotate(-1deg);
  position: relative;
}
.field-stamp::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--atlas-blue);
  border-radius: 50%;
}
.field-stamp--terra {
  border-color: var(--terra);
  background: rgba(77, 46, 92, .07);
  color: var(--terra);
  transform: rotate(1deg);
}
.field-stamp--terra::before { background: var(--terra); }
.field-stamp--brass {
  border-color: var(--amber);
  background: rgba(166, 132, 58, .07);
  color: var(--amber);
  transform: rotate(-2deg);
}
.field-stamp--brass::before { background: var(--amber); }

/* Subtle dot-grid background — graph-paper hint, not a tablecloth.
   Apply via .has-grid utility on a section. */
.has-grid {
  background-image:
    radial-gradient(circle, rgba(28, 61, 46, .07) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: 9px 9px;
}

/* Route arrow — dashed line + arrowhead */
.route-arrow {
  display: inline-block;
  width: 56px;
  height: 12px;
  flex-shrink: 0;
}

/* Marginalia annotation — small italic Atlas-Blue note */
.marginalia {
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  color: var(--atlas-blue);
  letter-spacing: -.1px;
  line-height: 1.4;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}
.marginalia::before {
  content: '↳';
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  color: var(--atlas-blue);
  opacity: .6;
}

/* ============================================================
   App UI mockups — recreations of in-app surfaces
   Sized for phone-screen widths (~262px content width inside frame)
   Tokens match DesignSystem.swift exactly.
   ============================================================ */

.app-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--parchment);
  overflow: hidden;
}

/* Stretchy header photo (290pt in app — proportional in mockup) */
.app-hero-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 280 / 200;
  background: var(--sand);
  flex-shrink: 0;
  overflow: hidden;
}
.app-hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.app-hero-photo__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15,36,24,.45));
  pointer-events: none;
}
.app-hero-photo__back {
  position: absolute; top: 12px; left: 12px;
  width: 28px; height: 28px;
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.app-hero-photo__save {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--terra);
}
.app-hero-photo__caption {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  color: var(--white);
}
.app-hero-photo__country {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: .9;
}
.app-hero-photo__city {
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.6px;
  margin-top: 3px;
}

/* Fact pills row */
.app-fact-pills {
  display: flex;
  gap: 6px;
  padding: 10px 14px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--hair);
}
.app-fact-pills::-webkit-scrollbar { display: none; }
.app-fact-pill {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--parch-dark);
  border: 0.5px solid var(--hair);
  border-radius: 999px;
  padding: 5px 11px;
  align-items: center;
  min-width: 60px;
}
.app-fact-pill__label {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.app-fact-pill__value {
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  line-height: 1.2;
  margin-top: 1px;
}

/* Editorial overview card */
.app-overview {
  margin: 10px 14px 0;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 12px;
  border: 0.5px solid var(--hair);
}
.app-overview__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.3px;
  color: var(--text);
  line-height: 1.1;
}
.app-overview__title em { font-style: italic; font-weight: 400; color: var(--terra); }
.app-overview__body {
  font-family: var(--ui);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  margin-top: 6px;
}

/* 6-tab pill bar (matches DestinationDetail picker) */
.app-tabs {
  display: flex;
  gap: 5px;
  padding: 12px 14px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.app-tabs::-webkit-scrollbar { display: none; }
.app-tab {
  flex-shrink: 0;
  font-family: var(--ui);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: -.1px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 0.5px solid var(--hair);
  color: var(--text);
  background: transparent;
  white-space: nowrap;
}
.app-tab--active {
  background: var(--forest);
  color: var(--white);
  border-color: var(--forest);
  font-weight: 600;
}

/* Section eyebrow inside an app screen */
.app-eyebrow {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--terra);
  padding: 12px 14px 4px;
}

/* Neighbourhood quick pick card */
.app-nb-card {
  display: flex;
  margin: 6px 14px 10px;
  background: var(--card);
  border-radius: 16px;
  border: 0.5px solid var(--hair);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.app-nb-card__photo {
  width: 84px;
  flex-shrink: 0;
  background: var(--sand);
  position: relative;
  overflow: hidden;
}
.app-nb-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.app-nb-card__body { padding: 10px 12px; flex: 1; min-width: 0; }
.app-nb-card__name {
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
}
.app-nb-card__vibe {
  font-family: var(--ui);
  font-weight: 300;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text);
  margin-top: 3px;
}
.app-nb-card__personas {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.app-nb-card__persona {
  font-family: var(--ui);
  font-size: 8.5px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 999px;
  border: 0.5px solid var(--hair);
  color: var(--text);
  background: var(--parchment);
}

/* Featured highlight ("DON'T MISS") */
.app-featured {
  margin: 6px 14px 10px;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 16px;
  border: 0.5px solid rgba(166,132,58,.32);
  border-left: 3px solid var(--amber);
}
.app-featured__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--amber);
}
.app-featured__eyebrow::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--amber);
}
.app-featured__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.3px;
  color: var(--text);
  margin-top: 5px;
  line-height: 1.15;
}
.app-featured__body {
  font-family: var(--ui);
  font-weight: 300;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text);
  margin-top: 5px;
}

/* Featured eat ("EAT THIS FIRST") */
.app-eat {
  margin: 6px 14px 14px;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 16px;
  border: 0.5px solid var(--hair);
  border-left: 3px solid var(--terra);
}
.app-eat__eyebrow {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--terra);
}
.app-eat__name {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-top: 4px;
  line-height: 1.2;
}
.app-eat__atmosphere {
  font-family: var(--display);
  font-style: italic;
  font-size: 11px;
  color: var(--brown);
  margin-top: 4px;
  line-height: 1.4;
}
.app-eat__order {
  font-family: var(--ui);
  font-weight: 300;
  font-size: 10.5px;
  color: var(--text);
  margin-top: 6px;
  line-height: 1.45;
}

/* ============================================================
   Standalone surfaces (used as proof-points outside phone frames)
   ============================================================ */

/* Field Note dispatch card (FieldNoteCard recreation, full-size) */
.field-note-card {
  background: var(--card);
  border-radius: 20px;
  border: 0.5px solid var(--hair);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15,36,24,.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.field-note-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,36,24,.10);
}
.field-note-card__photo {
  aspect-ratio: 16 / 10;
  background: var(--forest);
  position: relative;
  overflow: hidden;
}
.field-note-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.field-note-card__body {
  padding: 18px 22px 20px;
}
.field-note-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.field-note-card__eyebrow .terra { color: var(--terra); }
.field-note-card__eyebrow .divider {
  display: inline-block;
  width: 10px;
  height: 1px;
  background: var(--sand);
  vertical-align: middle;
}
.field-note-card__eyebrow .muted { color: var(--text-muted); }
.field-note-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.3px;
  color: var(--text);
  margin-top: 12px;
}
.field-note-card__dek {
  font-family: var(--ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin-top: 12px;
}
.field-note-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.field-note-card__avatar {
  width: 24px; height: 24px;
  border-radius: 12px;
  background: var(--brown);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.field-note-card__author-text {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--text-muted);
}
.field-note-card__author-text strong {
  color: var(--text);
  font-weight: 600;
  margin-right: 4px;
}

/* ============================================================
   Community vocabulary — live tip card + journal preview card
   Used in '03 The road' section. The .tip-card has a category
   colour stripe at the top (food/accommodation/transport/safety/
   budget/culture, matching the in-app palette in DesignSystem.swift).
   ============================================================ */

.tip-card {
  background: var(--card);
  border-radius: 20px;
  border: 0.5px solid var(--hair);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15,36,24,.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.tip-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,36,24,.10);
}
.tip-card__stripe {
  height: 5px;
  background: var(--cat-color, var(--terra));
}
.tip-card__body { padding: 24px 26px 24px; }
.tip-card__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cat-color, var(--terra));
}
.tip-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.3px;
  color: var(--text);
  margin-top: 12px;
}
.tip-card__text {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin-top: 12px;
}
.tip-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.tip-card__avatar {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--cat-color, var(--terra));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.tip-card__author-text {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--text-muted);
}
.tip-card__author-text strong {
  color: var(--text);
  font-weight: 600;
  margin-right: 4px;
}

/* Category colour variants (mirror DesignSystem.swift wendFood/etc.) */
.tip-card--food          { --cat-color: #E8A838; }
.tip-card--accommodation { --cat-color: #6A9E6F; }
.tip-card--transport     { --cat-color: #5B8DB8; }
.tip-card--safety        { --cat-color: #C4624D; }
.tip-card--budget        { --cat-color: #A07BC4; }
.tip-card--culture       { --cat-color: #D4920A; }

/* Journal preview card — 'ON THE ROAD' / 'COMPLETED' micro-trail */
.journal-card {
  background: var(--card);
  border-radius: 20px;
  border: 0.5px solid var(--hair);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15,36,24,.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.journal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,36,24,.10);
}
.journal-card__cover {
  aspect-ratio: 16 / 10;
  background: var(--forest);
  position: relative;
  overflow: hidden;
}
.journal-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.journal-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(15,36,24,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--white);
}
.journal-card__badge .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(166,132,58,.6);
  animation: journal-pulse 1.8s ease-out infinite;
}
@keyframes journal-pulse {
  0% { box-shadow: 0 0 0 0 rgba(166,132,58,.6); }
  70% { box-shadow: 0 0 0 7px rgba(166,132,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(166,132,58,0); }
}
@media (prefers-reduced-motion: reduce) {
  .journal-card__badge .pulse { animation: none; }
}
.journal-card__body { padding: 22px 26px 24px; }
.journal-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -.3px;
  color: var(--text);
}
.journal-card__sub {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--brown);
  margin-top: 6px;
}
.journal-card__meta {
  display: flex;
  gap: 20px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.journal-card__meta-item {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.journal-card__meta-item strong {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  line-height: 1;
}

/* Standalone "DON'T MISS" highlight card — bigger version of in-app one */
.lg-featured {
  background: var(--card);
  border-radius: 20px;
  border: 0.5px solid var(--hair);
  border-left: 4px solid var(--amber);
  padding: 28px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(15,36,24,.06);
}
.lg-featured__eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--amber);
}
.lg-featured__eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--amber);
}
.lg-featured__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -.5px;
  color: var(--text);
  margin-top: 8px;
  line-height: 1.1;
}
.lg-featured__body {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin-top: 14px;
}
.lg-featured__why {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--brown);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}

/* Standalone sealed note — refined for proof gallery */
.sealed-note-large {
  background: var(--parchment);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--terra);
  padding: 28px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sealed-note-large__kicker {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--terra);
}
.sealed-note-large__body {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--forest);
  margin-top: 16px;
  flex: 1;
}
.sealed-note-large__attribution {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--text-muted);
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sealed-note-large__attribution .dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--sand);
  vertical-align: middle;
}

/* Big phone for hero — wider, taller */
.phone--large {
  width: 360px;
  aspect-ratio: 360 / 750;
}

/* Hero re-layout for single big phone */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  padding: 32px var(--pad-x) 100px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  min-height: 720px;
}
.hero-grid .phone {
  margin-left: auto;
}

@media (max-width: 1199px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; padding-bottom: 80px; }
  .phone--large { width: 320px; margin: 0 auto; }
  .hero-grid .phone { margin: 0 auto; }
}

/* Section: gallery of proof points (3-up) */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-w);
  margin: 0 auto;
}
@media (max-width: 1199px) { .proof-grid { grid-template-columns: 1fr; gap: 20px; } }

/* Section header pattern (eyebrow + big heading + lede) */
.section-head {
  max-width: var(--max-w);
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: end;
}
.section-head__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -1.4px;
  color: var(--text);
  margin-top: 18px;
}
.section-head__title em { font-style: italic; }
.section-head__lede {
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--brown);
}
@media (max-width: 1199px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .section-head__title { font-size: 48px; }
}
@media (max-width: 768px) {
  .section-head__title { font-size: 36px; letter-spacing: -.8px; }
}

/* App "Before you go" checklist (Pack step) */
.app-checklist {
  padding: 8px 14px 10px;
}
.app-checklist__row {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  align-items: center;
  border-bottom: 1px solid rgba(224,216,202,.5);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.app-checklist__row:last-child { border-bottom: none; }
.app-checklist__check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--hair);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.app-checklist__check svg { display: block; }
.app-checklist__row--done .app-checklist__check {
  background: var(--forest);
  border-color: var(--forest);
}
.app-checklist__row--done {
  color: var(--text-muted);
}
.app-checklist__row--done .app-checklist__label {
  text-decoration: line-through;
  text-decoration-color: var(--sand);
}
.app-checklist__when {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

/* App day-spine inside a phone (Live step) */
.app-day-spine {
  padding: 8px 14px 12px;
}
.app-day-spine__row {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  align-items: center;
}
.app-day-spine__time {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .8px;
  color: var(--text-muted);
  width: 38px;
  flex-shrink: 0;
}
.app-day-spine__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--forest);
  flex-shrink: 0;
}
.app-day-spine__row--past .app-day-spine__dot { background: var(--sand); }
.app-day-spine__row--past { opacity: .55; }
.app-day-spine__row--now .app-day-spine__dot {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(166,132,58,.22);
}
.app-day-spine__body { flex: 1; min-width: 0; line-height: 1.2; }
.app-day-spine__place {
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
}
.app-day-spine__note {
  font-family: var(--display);
  font-style: italic;
  font-size: 10px;
  color: var(--brown);
  margin-top: 2px;
  line-height: 1.3;
}

/* Watched route mini card inside a phone (Pack step accent) */
.app-watched {
  margin: 6px 14px 12px;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 12px;
  border: 0.5px solid var(--hair);
  border-left: 3px solid var(--terra);
}
.app-watched__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.app-watched__route {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.app-watched__delta {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--forest);
  background: rgba(28,61,46,.08);
  padding: 3px 7px;
  border-radius: 999px;
}
.app-watched__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.app-watched__old {
  font-family: var(--display);
  font-size: 13px;
  color: var(--sand);
  text-decoration: line-through;
}
.app-watched__new {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--terra);
  line-height: 1;
}

/* ============================================================
   Capability grid — "Built for the road" feature showcase
   Six cards, each with a tiny app-vocabulary visual.
   ============================================================ */

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--max-w);
  margin: 0 auto;
}
@media (max-width: 1199px) { .cap-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 640px)  { .cap-grid { grid-template-columns: 1fr; } }

.cap-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  position: relative;
  overflow: hidden;
}
.cap-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,36,24,.08);
}
.cap-card__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
}
.cap-card__title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.5px;
  color: var(--text);
  margin-top: 14px;
}
.cap-card__title em { font-style: italic; font-weight: 400; }
.cap-card__body {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 10px;
}
.cap-card__visual {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  align-items: flex-end;
}

/* Mini day-spine (Living Trail card) */
.mini-spine {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mini-spine__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-spine__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--forest);
  flex-shrink: 0;
  position: relative;
}
.mini-spine__row--past .mini-spine__dot { background: var(--sand); }
.mini-spine__row--past { opacity: .5; }
.mini-spine__row--now .mini-spine__dot {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(166,132,58,.24);
}
.mini-spine__time {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .8px;
  color: var(--text-muted);
  width: 38px;
  flex-shrink: 0;
}
.mini-spine__place {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

/* Mini sealed note (Sealed Field Notes card) */
.mini-sealed {
  background: var(--parchment);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--terra);
  padding: 16px 18px;
  width: 100%;
}
.mini-sealed__body {
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--forest);
}
.mini-sealed__attr {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--terra);
  margin-top: 10px;
}

/* Mini map (Living Map card) */
.mini-map {
  width: 100%;
  height: 120px;
  background: var(--parch-dark);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hair);
}
.mini-map svg { width: 100%; height: 100%; display: block; }

/* Cached photo card (Offline-first) */
.cap-photo {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  background: var(--forest);
  position: relative;
  overflow: hidden;
}
.cap-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-photo__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(15,36,24,.7);
  padding: 5px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
}
.cap-photo__badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--amber);
  display: inline-block;
}

/* Mini price drop (Watched Routes card) */
.mini-price {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mini-price__route {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mini-price__values {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.mini-price__old {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  color: var(--sand);
  text-decoration: line-through;
}
.mini-price__new {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.8px;
  color: var(--terra);
  line-height: 1;
}
.mini-price__delta {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--forest);
  background: rgba(28,61,46,.08);
  padding: 4px 9px;
  border-radius: 999px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Pulse + bubble (Trusted contact card) */
.mini-pulse {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mini-pulse__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--terra);
  position: relative;
  align-self: flex-start;
  margin-left: 4px;
}
.mini-pulse__dot::before,
.mini-pulse__dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--terra);
  animation: wend-pulse 2.4s ease-out infinite;
  opacity: 0;
}
.mini-pulse__dot::after { animation-delay: 1.2s; }
@keyframes wend-pulse {
  0% { transform: scale(.8); opacity: .8; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mini-pulse__dot::before, .mini-pulse__dot::after { animation: none; }
}
.mini-pulse__bubble {
  background: var(--parchment);
  border: 1px solid var(--hair);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 10px 14px;
  align-self: flex-start;
  max-width: 85%;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}
.mini-pulse__sub {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 4px;
  margin-left: 4px;
}

/* ---------- Photo-led phone screens (magazine treatment) ---------- */
.screen-photo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--parchment);
}
.screen-photo__hero {
  position: relative;
  width: 100%;
  height: 58%;
  background: var(--sand);
  overflow: hidden;
  flex-shrink: 0;
}
.screen-photo__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.screen-photo__hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 14px 12px;
  background: linear-gradient(180deg, rgba(15,36,24,0) 35%, rgba(15,36,24,.6) 80%, rgba(15,36,24,.85) 100%);
  color: var(--white);
}
.screen-photo--full .screen-photo__hero { height: 100%; }
.screen-photo--full .screen-photo__hero-overlay { padding: 32px 16px 22px; }
.screen-photo__kicker {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--amber-light);
  opacity: .95;
}
.screen-photo__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.04;
  letter-spacing: -.3px;
  margin-top: 4px;
  color: var(--white);
}
.screen-photo--full .screen-photo__title { font-size: 22px; }
.screen-photo__title em { font-style: italic; font-weight: 400; color: var(--amber-light); }
.screen-photo__sub {
  font-family: var(--display);
  font-style: italic;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 6px;
  opacity: .9;
}
.screen-photo__rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  background: var(--parchment);
  overflow: hidden;
}
.screen-photo__row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(224,216,202,.55);
}
.screen-photo__row:last-child { border-bottom: none; }
.screen-photo__row-time {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--text-muted);
  letter-spacing: .6px;
  width: 32px;
  flex-shrink: 0;
}
.screen-photo__row-thumb {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--sand);
}
.screen-photo__row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.screen-photo__row-text { flex: 1; min-width: 0; line-height: 1.2; }
.screen-photo__row-place {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: -.1px;
  color: var(--text);
}
.screen-photo__row-meta {
  font-family: var(--display);
  font-style: italic;
  font-size: 9.5px;
  color: var(--brown);
  margin-top: 1px;
  line-height: 1.25;
}
.screen-photo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.screen-photo__chip {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(77,46,92,.13);
  padding: 3px 7px;
  border-radius: 999px;
}
.screen-photo__avatar {
  position: absolute;
  bottom: -22px;
  left: 14px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: var(--terra);
  border: 3px solid var(--parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 19px;
  color: var(--white);
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.screen-photo__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.3px;
  color: var(--text);
  margin-top: 32px;
}
.screen-photo__name-sub {
  font-family: var(--display);
  font-style: italic;
  font-size: 11px;
  color: var(--brown);
  margin-top: 2px;
  line-height: 1.3;
}
.screen-photo__detail-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(224,216,202,.55);
  font-family: var(--ui);
  font-size: 10px;
  color: var(--text);
}
.screen-photo__detail-row:last-child { border-bottom: none; }
.screen-photo__detail-label {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.screen-photo__detail-value {
  font-family: var(--display);
  font-style: italic;
  font-size: 10.5px;
  color: var(--text);
  text-align: right;
}

/* ---------- Hero (homepage) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--parchment);
  padding-bottom: 100px;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 40px var(--pad-x) 0;
  align-items: center;
  min-height: 700px;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(77, 46, 92, .13);
  border-radius: 999px;
  margin-bottom: 28px;
}
.hero__pill-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--accent); }
.hero__pill-text {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 96px;
  line-height: .96;
  margin: 0;
  letter-spacing: -2.5px;
  color: var(--text);
}
.hero__title em { font-style: italic; color: var(--accent); font-weight: 400; }
.hero__lead {
  font-family: var(--ui);
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 480px;
  margin-top: 28px;
}
.hero__cta { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__trust { margin-top: 36px; display: flex; gap: 28px; align-items: center; }
.hero__trust-stack { display: flex; }
.hero__trust-stack > span {
  width: 32px; height: 32px; border-radius: 16px;
  border: 2px solid var(--parchment);
}
.hero__trust-stack > span + span { margin-left: -8px; }
.hero__trust-text-line1 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
}
.hero__trust-text-line2 {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Phone stage — three overlapping phones */
.phone-stage {
  position: relative;
  height: 720px;
}
.phone-stage__halo {
  position: absolute;
  inset: 40px;
  background: radial-gradient(circle at 50% 40%, rgba(77,46,92,.20), transparent 65%);
  z-index: 0;
  pointer-events: none;
}
.phone-stage__phone--left   { position: absolute; top: 60px; left: -20px; transform: rotate(-6deg); z-index: 1; }
.phone-stage__phone--center { position: absolute; top: 0;     left: 130px; z-index: 3; }
.phone-stage__phone--right  { position: absolute; top: 80px; right: -10px; transform: rotate(5deg); z-index: 2; }

/* ---------- Press strip ---------- */
.press {
  padding: 32px var(--pad-x);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: var(--parchment);
}
.press__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  max-width: var(--max-w);
  margin: 0 auto;
}
.press__label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--text-muted);
  text-transform: uppercase;
  flex-shrink: 0;
}
.press__logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-muted);
  letter-spacing: -.3px;
}
.press__logo--italic { font-style: italic; }

/* ---------- Feature grid ---------- */
.features__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 56px;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}
.features__heading {
  font-family: var(--display);
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  margin-top: 20px;
  letter-spacing: -1.4px;
  color: var(--text);
}
.features__heading em { font-style: italic; }
.features__intro {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--brown);
  max-width: 360px;
  text-align: right;
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.feature-card {
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  min-height: 280px;
}
.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.feature-card--hero { grid-column: span 3; min-height: 320px; }
.feature-card--last { grid-column: span 3; }
.feature-card--mid  { grid-column: span 2; }
.feature-card__tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--accent);
  text-transform: uppercase;
}
.feature-card__title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.5px;
  line-height: 1.1;
  margin-top: 14px;
}
.feature-card--hero .feature-card__title { font-size: 32px; }
.feature-card__body {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  color: var(--brown);
  line-height: 1.45;
  margin-top: 10px;
  max-width: 360px;
}
.feature-card--hero .feature-card__body { font-size: 17px; }
.feature-card__glyph {
  align-self: flex-end;
  margin-top: 16px;
  opacity: .9;
}

/* ---------- Compare table (dark forest panel) ---------- */
.compare__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: flex-start;
  max-width: var(--max-w);
  margin: 0 auto;
}
.compare__heading {
  font-family: var(--display);
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  margin-top: 20px;
  letter-spacing: -1.4px;
  color: var(--white);
}
.compare__heading em { font-style: italic; color: var(--accent); }
.compare__lede {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(253,250,245,.75);
  margin-top: 24px;
  max-width: 420px;
}
.compare__rows {
  background: rgba(253,250,245,.04);
  border-radius: 4px;
  border: 1px solid rgba(253,250,245,.08);
  padding: 4px 0;
}
.compare__row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr;
  gap: 16px;
  padding: 18px 24px;
  align-items: center;
}
.compare__row + .compare__row {
  border-top: 1px solid rgba(253,250,245,.08);
}
.compare__check {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.compare__pos {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}
.compare__neg {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: rgba(253,250,245,.45);
}

/* ---------- Final CTA (centered) ---------- */
.final-cta {
  padding: 120px var(--pad-x);
  background: var(--parchment);
  text-align: center;
  border-top: 1px solid var(--hair);
}
.final-cta__heading {
  font-family: var(--display);
  font-weight: 400;
  font-size: 84px;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text);
  max-width: 900px;
  margin: 0 auto;
}
.final-cta__heading em { font-style: italic; color: var(--accent); }
.final-cta__buttons {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.final-cta__small {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ---------- How It Works hero ---------- */
.hiw-hero {
  padding: 60px var(--pad-x) 80px;
  background: var(--parchment);
  position: relative;
  overflow: hidden;
}
.hiw-hero__inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  z-index: 1;
}
.hiw-hero__rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.hiw-hero__rule .micro:first-child { color: var(--accent); }
.hiw-hero__rule .micro:last-child  { color: var(--text-muted); }
.hiw-hero__rule .line {
  height: 1px;
  flex: 1;
  background: var(--hair);
  max-width: 80px;
}
.hiw-hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 96px;
  line-height: .96;
  margin: 0;
  letter-spacing: -2.5px;
  color: var(--text);
}
.hiw-hero__title em { font-style: italic; color: var(--accent); font-weight: 400; }
.hiw-hero__lead {
  font-family: var(--ui);
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 580px;
  margin-top: 28px;
}

/* ---------- HIW Step rows ---------- */
.step {
  padding: 120px var(--pad-x);
  background: var(--parchment);
  border-top: 1px solid var(--hair);
}
.step__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
.step--reverse .step__inner { grid-template-columns: 320px 1fr; }
.step__phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.step__halo {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(77,46,92,.15), transparent 60%);
  pointer-events: none;
}
.step__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}
.step__numeral {
  font-family: var(--display);
  font-weight: 700;
  font-size: 64px;
  color: var(--accent);
  letter-spacing: -2px;
  line-height: 1;
}
.step__kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.step__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.02;
  margin: 0;
  letter-spacing: -1.4px;
  color: var(--text);
  font-style: italic;
}
.step__body {
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 24px;
  max-width: 540px;
}
.step__detail {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 540px;
}
.step__detail li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.step__detail-num {
  width: 16px;
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}
.step .sealed-note { margin-top: 28px; }

/* ---------- FAQ (dark panel) ---------- */
.faq__layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.faq__heading {
  font-family: var(--display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  margin-top: 20px;
  letter-spacing: -1.2px;
  color: var(--white);
}
.faq__heading em { font-style: italic; color: var(--accent); }
.faq details {
  padding: 24px 0;
  border-top: 1px solid rgba(253,250,245,.1);
}
.faq details:first-of-type { border-top: none; padding-top: 0; }
.faq summary {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  letter-spacing: -.3px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  font-weight: 400;
  font-size: 24px;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer {
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: rgba(253,250,245,.78);
  margin-top: 12px;
  line-height: 1.55;
  max-width: 580px;
}

/* ---------- Footer ---------- */
.footer {
  padding: 64px var(--pad-x) 32px;
  border-top: 1px solid var(--hair);
  background: var(--parchment);
  color: var(--text);
  font-family: var(--ui);
  position: relative;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}
.footer__tag {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  margin-top: 16px;
  line-height: 1.4;
  max-width: 280px;
  color: var(--text);
}
.footer__col-head {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.footer__col a {
  display: block;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--text);
  opacity: .85;
  transition: opacity 150ms ease;
}
.footer__col a:hover { opacity: 1; color: var(--accent); }
.footer__store { margin-top: 24px; }
.footer__bottom {
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer__copy, .footer__legal {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .4px;
}
.footer__legal a {
  color: inherit;
  margin: 0 4px;
  transition: color 150ms ease;
}
.footer__legal a:hover { color: var(--text); }

/* ---------- Legal pages (privacy, terms) ---------- */
.legal {
  background: var(--parchment);
  padding: 64px var(--pad-x) 120px;
}
.legal__container {
  max-width: 760px;
  margin: 0 auto;
}
.legal h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -1.6px;
  color: var(--text);
  margin-top: 16px;
  margin-bottom: 20px;
}
.legal h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.6px;
  color: var(--text);
  margin-top: 56px;
  margin-bottom: 16px;
}
.legal h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--text);
  margin-top: 28px;
  margin-bottom: 10px;
}
.legal p { margin-bottom: 16px; line-height: 1.65; color: var(--text); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--terra-deep); }
.legal ul { margin: 0 0 16px 0; padding-left: 24px; list-style: disc; }
.legal ul li { margin-bottom: 8px; line-height: 1.6; }
.legal__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.legal__intro {
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--brown);
  margin-bottom: 32px;
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14px;
}
.legal table th, .legal table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}
.legal table th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--parch-dark);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--stagger-1 { transition-delay: 80ms; }
.reveal--stagger-2 { transition-delay: 160ms; }
.reveal--stagger-3 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive — break at 1199 / 768
   ============================================================ */
@media (max-width: 1199px) {
  :root { --pad-x: 32px; }
  .hero__inner,
  .step__inner,
  .step--reverse .step__inner,
  .compare__layout,
  .faq__layout,
  .features__head,
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .hero__inner { gap: 56px; padding-top: 32px; }
  .hero__title { font-size: 72px; letter-spacing: -1.8px; }
  .hiw-hero__title { font-size: 72px; }
  .features__heading,
  .compare__heading,
  .faq__heading { font-size: 48px; }
  .final-cta__heading { font-size: 64px; }
  .features__intro { text-align: left; }
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-card,
  .feature-card--hero,
  .feature-card--last,
  .feature-card--mid {
    grid-column: span 1;
  }
  .feature-card--hero {
    grid-column: span 2;
  }
  .phone-stage { height: auto; min-height: 600px; }
  .step__inner, .step--reverse .step__inner { grid-template-columns: 1fr; gap: 40px; }
  .step--reverse .step__phone-wrap { order: 2; }
}

@media (max-width: 768px) {
  :root { --pad-x: 24px; }
  .section, .step, .final-cta, .features__head + .features__grid + * { padding-left: 24px; padding-right: 24px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .nav { padding: 14px 24px; }
  .nav__links a:not(.nav__cta) { display: none; }
  .nav__cta { display: inline-flex; }

  .hero__title { font-size: 48px; letter-spacing: -1px; }
  .hiw-hero__title { font-size: 48px; }
  .features__heading,
  .compare__heading,
  .faq__heading,
  .step__title { font-size: 36px; letter-spacing: -.8px; }
  .final-cta__heading { font-size: 44px; letter-spacing: -1.2px; }
  .legal h1 { font-size: 40px; }
  .legal h2 { font-size: 24px; }

  .features__grid { grid-template-columns: 1fr; }
  .feature-card--hero { grid-column: span 1; }

  .compare__row {
    grid-template-columns: 32px 1fr;
    gap: 12px;
  }
  .compare__neg {
    grid-column: 1 / -1;
    padding-left: 44px;
    margin-top: 6px;
  }

  .press__inner { gap: 20px; }
  .press__logo { font-size: 14px; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  .phone-stage { display: flex; justify-content: center; min-height: auto; }
  .phone-stage__phone--left, .phone-stage__phone--right { display: none; }
  .phone-stage__phone--center { position: static; transform: none; }
}

/* ─── Hero stats strip ──────────────────────────────────────── */
/* Sits under hero__lead. Three parchment chips with the catalogue
   numbers — 94 cities · 16 countries · 9 trails. The big serif
   numerals carry the moment; the labels stay quiet. */
.hero__stats {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 16px 8px;
  background: rgba(244, 239, 228, 0.08);
  border: 1px solid rgba(244, 239, 228, 0.18);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__stat-value {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: var(--parchment);
  letter-spacing: -0.5px;
}
.hero__stat-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.7);
  margin-top: 4px;
}

/* ─── Region grid (Where Wend goes — section 03) ────────────── */
/* Three cards, one per region, with flag set, count, pitch, and
   sample destinations. New South America card carries a "New" badge. */
.region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 1199px) { .region-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 720px)  { .region-grid { grid-template-columns: 1fr; } }

.region-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 22px;
  padding: 28px 28px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.region-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(15, 36, 24, 0.10);
}
.region-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.region-card__flags {
  font-size: 19px;
  letter-spacing: 2px;
  line-height: 1;
}
.region-card__counts {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.region-card__count-num {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.5px;
  line-height: 1;
}
.region-card__count-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.region-card__name {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.4px;
  line-height: 1.1;
  margin: 0;
}
.region-card__pitch {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.region-card__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--hair);
}
.region-card__cities span {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: var(--parchment);
  padding: 4px 10px;
  border-radius: 100px;
}
.region-card__city-more {
  color: var(--text-muted) !important;
  background: transparent !important;
  font-weight: 400 !important;
  font-style: italic;
}
.region-card--new { border-color: var(--accent); }
.region-card__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--accent);
  color: white;
  padding: 4px 9px;
  border-radius: 4px;
}

/* ─── Trails strip ──────────────────────────────────────────── */
/* Sits under the region grid as a horizontally-scrollable row of
   numbered chips — 9 hand-walked editorial trails. */
.trails-strip {
  max-width: var(--max-w);
  margin: 64px auto 0;
  position: relative;
  z-index: 2;
}
.trails-strip__head {
  margin-bottom: 24px;
}
.trails-strip__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}
.trails-strip__title {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.4px;
  line-height: 1.1;
  margin: 0;
}
.trails-strip__title em { font-style: italic; font-weight: 400; }
.trails-strip__list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scrollbar-width: none;
}
.trails-strip__list::-webkit-scrollbar { display: none; }
.trail-chip {
  flex: 0 0 auto;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 200ms ease;
}
.trail-chip:hover { border-color: var(--accent); }
.trail-chip__num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1px;
}
.trail-chip__name {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.trail-chip__sub {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── Pro feature cards ─────────────────────────────────────── */
/* The Wend AI Companion + Atlas cap-cards in section 06 carry a
   small Pro badge in the corner. Visual treatment otherwise matches
   regular cap-cards so they don't shout. */
.cap-card--pro {
  border-color: var(--terra-light);
}
.cap-card__pro-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--terra);
  color: white;
  padding: 4px 9px;
  border-radius: 4px;
  z-index: 2;
}

/* Mini-companion (Pro card visual) */
.mini-companion {
  background: var(--parchment);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mini-companion__q {
  font-family: var(--display);
  font-size: 14px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.4;
}
.mini-companion__a {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  padding-left: 12px;
  border-left: 2px solid var(--terra-light);
}

/* Mini-atlas (Pro card visual) */
.mini-atlas {
  background: var(--parchment);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mini-atlas__page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.mini-atlas__photo {
  aspect-ratio: 1 / 1.2;
  background: linear-gradient(135deg, #4D2E5C 0%, #6B4A7E 100%);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.mini-atlas__photo:nth-child(2) { background: linear-gradient(135deg, #1C3D2E 0%, #2A5A42 100%); }
.mini-atlas__photo:nth-child(3) { background: linear-gradient(135deg, #C4622D 0%, #D4920A 100%); }
.mini-atlas__caption {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Mobile tightening for new sections */
@media (max-width: 720px) {
  .hero__stat-value { font-size: 24px; }
  .region-card { padding: 22px 22px 20px; }
  .region-card__name { font-size: 24px; }
  .region-card__count-num { font-size: 30px; }
  .trails-strip__title { font-size: 24px; }
  .trail-chip { padding: 12px 14px; }
}