/* ============================================================
   TOKENS: "Earthy Topographic" brand palette — Pine Needle
   (primary dark), Trailhead Orange (action/active route),
   Sandstone (primary light), Elevation Gold (accent/waypoint),
   Overland Slate (typography/dark UI), Trail Mist (backdrop).
   Replaces the earlier MD3-green placeholder palette.
   ============================================================ */
:root{
  --primary:#1B3B2B; --on-primary:#FFFFFF; --primary-container:#CDE4D8; --on-primary-container:#0E2219;
  --secondary:#D95426; --on-secondary:#FFFFFF; --secondary-container:#F7D9C9; --on-secondary-container:#5C2008;
  --tertiary:#E8A33A; --on-tertiary:#3D2700; --tertiary-container:#FBE7C2; --on-tertiary-container:#4A3100;
  --error:#B3261E; --warning:#8A5A12;

  --surface:#EAECE6; --on-surface:#2A3439;
  --surface-variant:#DFD5C6; --on-surface-variant:#55605F;
  --outline:#7D8684; --outline-variant:#D7D2C7;
  --surf-lowest:#FBFAF7; --surf-low:#DFD5C6; --surf:#E4E3DC; --surf-high:#D8D6CC; --surf-highest:#CFCCBF;

  --shape-sm:8px; --shape-md:12px; --shape-lg:16px; --shape-xl:28px; --shape-full:999px;
  --elev-1: 0 1px 2px rgba(10,20,12,.08), 0 1px 3px 1px rgba(10,20,12,.06);
  --elev-2: 0 2px 8px rgba(10,20,12,.10), 0 6px 18px rgba(10,20,12,.08);

  --font-body: Roboto, "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  /* Headlines only — survey/expedition-map character. Falls back to Georgia
     where Roboto Slab isn't loaded (e.g. the sandboxed Artifact preview,
     which can't reach Google Fonts) rather than silently landing on the
     body sans. */
  --font-display: "Roboto Slab", Georgia, "Noto Serif", "Times New Roman", serif;

  --bg: var(--surface); --ink: var(--on-surface); --ink-dim: var(--on-surface-variant); --ink-faint: var(--outline);
  --line: var(--outline-variant);
  --container-max: 1180px;
}
@media (prefers-color-scheme: dark){ :root{
  --primary:#8FC9AC; --on-primary:#0B1F17; --primary-container:#17352A; --on-primary-container:#CDE4D8;
  --secondary:#E8724A; --on-secondary:#3A1206; --secondary-container:#5C2A14; --on-secondary-container:#F7D9C9;
  --tertiary:#F0BB63; --on-tertiary:#3D2700; --tertiary-container:#5A3F08; --on-tertiary-container:#FBE7C2;
  --error:#E2897E; --warning:#E8BB6E;
  --surface:#14181A; --on-surface:#EAECE6; --surface-variant:#2A3439; --on-surface-variant:#B9C0BE;
  --outline:#7B8482; --outline-variant:#3A4245;
  --surf-lowest:#0E1113; --surf-low:#181D1F; --surf:#1E2426; --surf-high:#262D30; --surf-highest:#323B3E;
}}
:root[data-theme="dark"]{
  --primary:#8FC9AC; --on-primary:#0B1F17; --primary-container:#17352A; --on-primary-container:#CDE4D8;
  --secondary:#E8724A; --on-secondary:#3A1206; --secondary-container:#5C2A14; --on-secondary-container:#F7D9C9;
  --tertiary:#F0BB63; --on-tertiary:#3D2700; --tertiary-container:#5A3F08; --on-tertiary-container:#FBE7C2;
  --error:#E2897E; --warning:#E8BB6E;
  --surface:#14181A; --on-surface:#EAECE6; --surface-variant:#2A3439; --on-surface-variant:#B9C0BE;
  --outline:#7B8482; --outline-variant:#3A4245;
  --surf-lowest:#0E1113; --surf-low:#181D1F; --surf:#1E2426; --surf-high:#262D30; --surf-highest:#323B3E;
}
:root[data-theme="light"]{
  --primary:#1B3B2B; --on-primary:#FFFFFF; --primary-container:#CDE4D8; --on-primary-container:#0E2219;
  --secondary:#D95426; --on-secondary:#FFFFFF; --secondary-container:#F7D9C9; --on-secondary-container:#5C2008;
  --tertiary:#E8A33A; --on-tertiary:#3D2700; --tertiary-container:#FBE7C2; --on-tertiary-container:#4A3100;
  --error:#B3261E; --warning:#8A5A12;
  --surface:#EAECE6; --on-surface:#2A3439; --surface-variant:#DFD5C6; --on-surface-variant:#55605F;
  --outline:#7D8684; --outline-variant:#D7D2C7;
  --surf-lowest:#FBFAF7; --surf-low:#DFD5C6; --surf:#E4E3DC; --surf-high:#D8D6CC; --surf-highest:#CFCCBF;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3{ text-wrap:balance; font-weight:900; letter-spacing:-0.01em; }
h1,h2{ font-family:var(--font-display); letter-spacing:-0.01em; }
.container{ max-width:var(--container-max); margin:0 auto; padding:0 24px; }
.eyebrow{ font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--tertiary); }
:focus-visible{ outline:2px solid var(--tertiary); outline-offset:3px; border-radius:4px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* -------------------- nav -------------------- */
.site-nav{ position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--line); }
/* no backdrop-filter here on purpose: that property creates a containing block for
   position:fixed descendants, which breaks .nav-links' viewport-relative fixed panel below */
.nav-row{ display:flex; align-items:center; gap:28px; padding:14px 24px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:19px; margin-right:auto; }
.brand svg{ width:28px; height:28px; }
.nav-links{ display:flex; align-items:center; gap:26px; font-size:14.5px; font-weight:500; color:var(--ink-dim); }
.nav-links a:hover{ color:var(--ink); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:var(--shape-full); font-weight:700; font-size:14.5px; padding:11px 22px; white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease; }
.btn[hidden]{ display:none; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--primary); color:var(--on-primary); box-shadow:var(--elev-1); }
.btn-primary:hover{ box-shadow:var(--elev-2); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--outline); }
.nav-cta{ display:none; }
.menu-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:var(--shape-sm); width:40px; height:40px; align-items:center; justify-content:center; }
.menu-toggle svg{ width:20px; height:20px; }

/* -------------------- hero -------------------- */
.hero{ position:relative; overflow:hidden; padding:72px 0 56px; background:linear-gradient(175deg, var(--surf-low) 0%, var(--surface) 65%); }
.hero::before{ content:""; position:absolute; inset:0; background:
    radial-gradient(55% 65% at 82% 8%, var(--primary-container) 0%, transparent 62%),
    radial-gradient(48% 58% at 2% 68%, var(--tertiary-container) 0%, transparent 65%),
    radial-gradient(42% 55% at 48% 105%, var(--secondary-container) 0%, transparent 70%);
  opacity:.8; pointer-events:none; }
.hero::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(var(--outline-variant) 1px, transparent 1px); background-size:26px 26px; opacity:.25; mask-image:radial-gradient(65% 65% at 50% 0%, #000 0%, transparent 75%); pointer-events:none; }
.hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.eyebrow-badge{ display:inline-flex; align-items:center; gap:9px; background:var(--surf-lowest); border:1px solid var(--line); padding:7px 15px 7px 11px; border-radius:var(--shape-full); box-shadow:var(--elev-1); }
.eyebrow-dot{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--tertiary); flex-shrink:0; }
.eyebrow-dot::after{ content:""; position:absolute; inset:-5px; border-radius:50%; background:var(--tertiary); opacity:.35; animation:eyebrowDotPulse 1.8s ease-out infinite; }
@keyframes eyebrowDotPulse{ 0%{ transform:scale(.6); opacity:.45; } 100%{ transform:scale(1.9); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .eyebrow-dot::after{ animation:none; opacity:.2; } }
.hero h1{ font-size:clamp(2.3rem, 4.6vw, 3.6rem); line-height:1.07; margin:18px 0 20px; }
.hl-accent{ color:var(--secondary); }
.hero p.lede{ font-size:clamp(1.02rem, 1.3vw, 1.18rem); line-height:1.6; color:var(--ink-dim); max-width:46ch; }
.hero-ctas{ display:flex; align-items:center; gap:18px; margin-top:28px; flex-wrap:wrap; }
.hero-ctas .btn-primary:hover{ transform:translateY(-2px); }
.scroll-link{ font-size:14.5px; font-weight:600; color:var(--tertiary); display:inline-flex; align-items:center; gap:6px; transition:gap .15s ease; }
.scroll-link:hover{ gap:9px; }
.hero-stats{ display:flex; gap:22px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.hero-stat{ display:flex; flex-direction:column; gap:2px; }
.hero-stat strong{ font-family:var(--font-display); font-size:1.4rem; line-height:1; color:var(--ink); }
.hero-stat:nth-child(1) strong{ color:var(--primary); }
.hero-stat:nth-child(2) strong{ color:var(--secondary); }
.hero-stat:nth-child(3) strong{ color:var(--on-tertiary-container); }
.hero-stat span{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
.fact-chips{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.chip{ font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.03em; padding:8px 13px; border-radius:var(--shape-sm); }
.chip-a{ background:var(--primary-container); color:var(--on-primary-container); }
.chip-b{ background:var(--secondary-container); color:var(--on-secondary-container); }
.chip-c{ background:var(--tertiary-container); color:var(--on-tertiary-container); }

.trail-art{ position:relative; background:var(--surf-lowest); border:1px solid var(--line); border-radius:var(--shape-xl); padding:22px 22px 18px; box-shadow:var(--elev-2); will-change:transform; z-index:1; }
.trail-art::before{ content:""; position:absolute; inset:16px -16px -16px 16px; background:linear-gradient(135deg, var(--tertiary-container), var(--secondary-container)); border-radius:var(--shape-xl); transform:rotate(1.4deg); z-index:-1; }
.trail-art svg{ width:100%; height:auto; }
.trail-legend{ display:flex; flex-direction:column; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.trail-legend-row{ display:flex; gap:22px; flex-wrap:wrap; }
.trail-legend span{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-dim); }
.swatch{ width:18px; height:3px; border-radius:2px; display:inline-block; }
.swatch.dash{ background-image:repeating-linear-gradient(90deg, var(--secondary) 0 6px, transparent 6px 10px); }
.swatch.solid{ background:var(--primary); }
.swatch.dot{ width:9px; height:9px; border-radius:50%; }
.swatch.dot-primary{ background:var(--primary); }
.swatch.dot-tertiary{ background:var(--tertiary); }
.swatch.dot-secondary{ background:var(--secondary); }

/* -------------------- section shells -------------------- */
section{ padding:72px 0; position:relative; }

/* -------------------- topographic texture layer -------------------- */
.topo-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; opacity:.6; pointer-events:none; }
.topo-bg svg{ width:100%; height:100%; display:block; }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); margin-top:10px; }
.section-head p{ color:var(--ink-dim); margin-top:12px; font-size:1.02rem; line-height:1.6; }
.alt{ background:var(--surf-low); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* -------------------- legend / value grid -------------------- */
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.value-card{ background:var(--surf-lowest); border:1px solid var(--line); border-top:3px solid transparent; border-radius:var(--shape-lg); padding:22px; transition:transform .18s ease, box-shadow .18s ease; }
.value-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-2); }
.value-card .icon-badge{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.value-card .icon-badge svg{ width:19px; height:19px; }
.value-card h3{ font-size:16px; font-weight:700; margin-bottom:8px; }
.value-card p{ font-size:14px; line-height:1.55; color:var(--ink-dim); }

/* -------------------- feature deep dive -------------------- */
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--shape-lg); overflow:hidden; }
.feature-card{ background:var(--surf-lowest); padding:28px 24px; transition:background-color .18s ease; }
.feature-card:hover{ background:var(--surf-low); }
.feature-card .tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:4px 9px; border-radius:var(--shape-sm); display:inline-block; margin-bottom:16px; }
.feature-card h3{ font-size:18px; margin-bottom:10px; }
.feature-card p{ font-size:14px; line-height:1.6; color:var(--ink-dim); }
.feature-card .note{ margin-top:14px; font-size:12.5px; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:12px; }
.tag-a{ background:var(--primary-container); color:var(--on-primary-container); }
.tag-b{ background:var(--secondary-container); color:var(--on-secondary-container); }
.tag-c{ background:var(--tertiary-container); color:var(--on-tertiary-container); }
.tag-d{ background:var(--surf-high); color:var(--ink); }

/* -------------------- corridor / route cards -------------------- */
.corridor-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:34px; flex-wrap:wrap; }
.corridor-route{ font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); }
.corridor-route b{ color:var(--ink); }
.route-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.route-card{ position:relative; background:var(--surf-lowest); border:1px solid var(--line); border-top:3px solid transparent; border-radius:var(--shape-lg); padding:24px; display:flex; flex-direction:column; gap:16px; transition:transform .18s ease, box-shadow .18s ease; }
.route-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-2); }
.route-letter{ display:flex; align-items:center; justify-content:space-between; }
.route-letter .badge{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px; }
.route-letter .dist{ font-family:var(--font-mono); font-weight:700; font-size:17px; font-variant-numeric:tabular-nums; }
.route-via{ display:flex; flex-wrap:wrap; gap:6px; }
.route-via span{ font-size:12px; font-weight:600; background:var(--surf); color:var(--ink-dim); padding:4px 10px; border-radius:var(--shape-full); border:1px solid var(--line); }
.route-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; }
.route-stats dt{ color:var(--ink-faint); margin:0 0 2px; }
.route-stats dd{ margin:0; font-weight:700; font-family:var(--font-mono); }
.stars{ display:inline-flex; gap:1px; font-size:13px; line-height:1; }
.star-filled{ color:var(--tertiary); }
.star-empty{ color:var(--outline-variant); }
.rating-label{ display:block; margin-top:3px; font-weight:500; font-size:11px; color:var(--ink-faint); }
.trust-badge{ position:absolute; top:-11px; right:16px; background:var(--tertiary); color:var(--on-tertiary); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:var(--shape-full); box-shadow:var(--elev-1); }
.badge-a{ background:var(--primary-container); color:var(--on-primary-container); }
.badge-b{ background:var(--secondary-container); color:var(--on-secondary-container); }
.badge-c{ background:var(--tertiary-container); color:var(--on-tertiary-container); }
.corridor-foot{ margin-top:22px; font-size:13.5px; color:var(--ink-faint); }

/* -------------------- how it works (trail waypoints) -------------------- */
.waypoints{ position:relative; max-width:720px; margin:0 auto; padding-left:8px; }
.waypoints::before{ content:""; position:absolute; left:19px; top:14px; bottom:14px; width:2px; background:repeating-linear-gradient(to bottom, var(--outline-variant) 0 8px, transparent 8px 14px); }
.waypoint{ position:relative; display:flex; gap:22px; padding:0 0 40px 0; }
.waypoint:last-child{ padding-bottom:0; }
.wp-dot{ flex-shrink:0; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:14px; z-index:1; }
.wp-body h3{ font-size:17px; margin-bottom:6px; }
.wp-body p{ font-size:14.5px; color:var(--ink-dim); line-height:1.6; max-width:52ch; }

/* -------------------- store badges -------------------- */
.store-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.store-row .label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-right:2px; }
.store-badge{ position:relative; display:inline-flex; align-items:center; gap:10px; background:#0c0c0c; color:#fff; border-radius:10px; padding:9px 16px 9px 14px; border:1px solid rgba(255,255,255,.08); transition:transform .15s ease, opacity .15s ease; }
.store-badge:hover{ transform:translateY(-1px); opacity:.92; }
.store-badge svg{ width:22px; height:22px; flex-shrink:0; }
.store-badge .txt{ display:flex; flex-direction:column; line-height:1.15; }
.store-badge .txt small{ font-size:9.5px; letter-spacing:.03em; opacity:.85; }
.store-badge .txt strong{ font-size:14.5px; font-weight:700; font-family:var(--font-body); }
.store-badge .soon{ position:absolute; top:-9px; right:-8px; background:var(--secondary); color:var(--on-secondary); font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.04em; padding:2px 6px; border-radius:var(--shape-full); }
footer .store-row{ margin-top:16px; }

/* -------------------- early access -------------------- */
.perks{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.perk{ padding:26px; border-radius:var(--shape-lg); background:var(--primary); color:var(--on-primary); }
.perk:nth-child(2){ background:var(--secondary); color:var(--on-secondary); }
.perk:nth-child(3){ background:var(--tertiary); color:var(--on-tertiary); }
.perk h3{ font-size:16px; margin-bottom:8px; }
.perk p{ font-size:13.5px; line-height:1.55; opacity:.92; }

/* -------------------- testimonials -------------------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.testi{ background:var(--surf-lowest); border:1px solid var(--line); border-radius:var(--shape-lg); padding:22px; display:flex; flex-direction:column; gap:14px; transition:transform .18s ease, box-shadow .18s ease; }
.testi:hover{ transform:translateY(-3px); box-shadow:var(--elev-2); }
.testi p.quote{ font-size:14.5px; line-height:1.6; }
.testi .who{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.testi .avatar{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.testi .meta b{ display:block; font-size:13px; }
.testi .meta span{ display:block; font-size:12px; color:var(--ink-faint); font-family:var(--font-mono); }

/* -------------------- safety strip -------------------- */
.safety-strip{ display:flex; align-items:center; gap:14px; padding:18px 22px; background:var(--surf); border:1px dashed var(--outline-variant); border-radius:var(--shape-lg); font-size:13.5px; color:var(--ink-dim); }
.safety-strip svg{ width:22px; height:22px; flex-shrink:0; color:var(--warning); }

/* -------------------- bold closing CTA band -------------------- */
.cta-band{ background:var(--primary); color:var(--on-primary); text-align:center; }
.cta-band .eyebrow{ color:var(--on-primary); opacity:.75; }
.cta-band h2{ color:var(--on-primary); max-width:26ch; margin:12px auto 0; }
.cta-band .cta-sub{ color:var(--on-primary); opacity:.85; max-width:56ch; margin:16px auto 0; font-size:1.02rem; line-height:1.6; }
.cta-band .btn{ margin-top:30px; }
.btn-invert{ background:var(--on-primary); color:var(--primary); }
.btn-invert:hover{ box-shadow:var(--elev-2); }

/* -------------------- footer -------------------- */
footer{ border-top:1px solid var(--line); padding:56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
.footer-brand .brand{ margin-right:0; }
.footer-brand p{ font-size:13.5px; color:var(--ink-dim); margin-top:14px; line-height:1.6; max-width:34ch; }
.footer-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:14px; }
.footer-col a{ display:block; font-size:14px; color:var(--ink-dim); padding:5px 0; }
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:12.5px; color:var(--ink-faint); flex-wrap:wrap; }

/* -------------------- reveal on scroll -------------------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* -------------------- join drawer -------------------- */
.join-overlay{ position:fixed; inset:0; background:rgba(14,17,19,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:90; }
.join-overlay.open{ opacity:1; pointer-events:auto; }
.join-drawer{ position:fixed; top:0; right:0; height:100%; width:35%; min-width:360px; max-width:560px; background:var(--surf-lowest); box-shadow:var(--elev-2); transform:translateX(100%); transition:transform .3s ease; z-index:91; overflow-y:auto; }
.join-drawer.open{ transform:translateX(0); }
.join-drawer-inner{ padding:64px 32px 48px; }
.join-drawer .eyebrow{ margin-bottom:4px; }
.join-drawer h2{ font-size:1.5rem; margin-bottom:10px; }
.join-sub{ font-size:13.5px; color:var(--ink-dim); line-height:1.6; margin-bottom:24px; }
.join-close{ position:absolute; top:20px; right:20px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surf-lowest); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-dim); }
.join-close:hover{ color:var(--ink); border-color:var(--outline); }
.join-close svg{ width:16px; height:16px; }
.join-field{ display:block; margin-bottom:18px; }
.join-field > span{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-dim); margin-bottom:6px; }
.join-field input, .join-field select, .join-field textarea{ width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:var(--shape-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:14.5px; resize:vertical; }
.join-field input:focus, .join-field select:focus, .join-field textarea:focus{ outline:2px solid var(--tertiary); outline-offset:1px; border-color:var(--tertiary); }
.join-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.join-fieldset{ border:none; padding:0; margin:0 0 18px; }
.join-fieldset legend{ font-size:12.5px; font-weight:600; color:var(--ink-dim); margin-bottom:6px; padding:0; }
.join-pill-group{ display:flex; gap:10px; }
.join-pill{ flex:1; position:relative; margin:0; }
.join-pill input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.join-pill span{ display:block; text-align:center; padding:10px; border:1px solid var(--line); border-radius:var(--shape-sm); font-size:13.5px; font-weight:600; color:var(--ink-dim); transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.join-pill input:checked + span{ background:var(--primary-container); border-color:var(--primary); color:var(--on-primary-container); }
.join-pill input:focus-visible + span{ outline:2px solid var(--tertiary); outline-offset:1px; }
.join-submit{ width:100%; margin-top:6px; }
.join-link{ background:none; border:none; color:var(--tertiary); font-size:13px; font-weight:600; cursor:pointer; padding:0; }
.join-link-center{ display:block; margin:16px auto 0; }
.join-error{ color:var(--error); font-size:12.5px; margin:-10px 0 16px; }
.join-demo-note{ background:var(--tertiary-container); color:var(--on-tertiary-container); font-size:12px; font-family:var(--font-mono); padding:10px 12px; border-radius:var(--shape-sm); margin-bottom:18px; line-height:1.5; }
.join-phone-row{ display:flex; gap:8px; }
.join-prefix{ flex-shrink:0; padding:11px 10px; border:1px solid var(--line); border-radius:var(--shape-sm); background:var(--surf); font-family:var(--font-mono); font-size:14px; color:var(--ink-dim); }
.join-phone-row input{ flex:1; min-width:0; }
@media (prefers-reduced-motion: reduce){ .join-drawer, .join-overlay{ transition:none; } }

/* -------------------- responsive -------------------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .trail-art{ order:-1; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .value-grid{ grid-template-columns:repeat(2,1fr); }
  .route-grid{ grid-template-columns:1fr; }
  .perks{ grid-template-columns:1fr; }
  .testi-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .join-drawer{ width:50%; min-width:360px; }
}
@media (max-width:720px){
  .nav-links{ position:fixed; inset:62px 0 0 0; background:var(--bg); flex-direction:column; align-items:flex-start; padding:20px 24px; gap:4px; border-top:1px solid var(--line); transform:translateY(-110%); transition:transform .25s ease; }
  .nav-links a{ padding:12px 0; width:100%; font-size:16px; }
  .nav-links.open{ transform:translateY(0); }
  .nav-cta.open-only{ display:none; }
  .menu-toggle{ display:flex; }
  .nav-cta{ display:none; }
  .value-grid{ grid-template-columns:1fr; }
  .testi-grid, .route-grid, .feature-grid{ display:flex; grid-template-columns:none; overflow-x:auto; gap:14px; padding:4px 24px 10px; margin:0 -24px; scroll-snap-type:x mandatory; scroll-padding-left:24px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .testi-grid::-webkit-scrollbar, .route-grid::-webkit-scrollbar, .feature-grid::-webkit-scrollbar{ display:none; }
  .testi-grid .testi, .route-grid .route-card{ flex:0 0 82%; scroll-snap-align:start; }
  .feature-grid{ background:none; border:none; border-radius:0; }
  .feature-grid .feature-card{ flex:0 0 78%; scroll-snap-align:start; border:1px solid var(--line); border-radius:var(--shape-lg); box-shadow:var(--elev-1); }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .hero{ padding:40px 0 40px; }
  .corridor-head{ flex-direction:column; align-items:flex-start; }
  .join-drawer{ width:100%; min-width:0; max-width:none; }
  .join-row{ grid-template-columns:1fr; }
}
@media (min-width:721px){
  .nav-cta{ display:inline-flex; }
}

/* ============================================================
   DASHBOARD (dashboard.html) — login + trip history + feedback.
   Reuses nav/.btn/.join-field/.tag/.stars tokens from above so the
   app shell stays visually part of the same site, not a bolt-on.
   ============================================================ */
.dash-nav{ position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--line); }
.dash-nav-row{ display:flex; align-items:center; gap:20px; padding:14px 24px; }
.dash-nav-right{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.dash-back-link{ font-size:14px; font-weight:600; color:var(--ink-dim); }
.dash-back-link:hover{ color:var(--ink); }

.dash-auth{ min-height:calc(100vh - 63px); display:flex; align-items:center; justify-content:center; padding:48px 24px; }
.dash-auth[hidden]{ display:none; }
.dash-auth-card{ width:100%; max-width:380px; background:var(--surf-lowest); border:1px solid var(--line); border-radius:var(--shape-lg); padding:36px 32px; box-shadow:var(--elev-1); }
.dash-auth-card h1{ font-size:1.6rem; margin:8px 0 10px; }
.dash-auth-foot{ margin-top:18px; font-size:13.5px; color:var(--ink-dim); text-align:center; }
.dash-auth-foot a{ color:var(--tertiary); font-weight:600; }

.dash-view .container{ padding-top:44px; padding-bottom:72px; }
.dash-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.dash-head h1{ font-size:1.9rem; margin-top:6px; }

.dash-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:44px; }
.dash-stat{ background:var(--surf-lowest); border:1px solid var(--line); border-radius:var(--shape-lg); padding:18px 20px; display:flex; flex-direction:column; gap:4px; }
.dash-stat-value{ font-family:var(--font-display); font-size:1.8rem; font-weight:900; }
.dash-stat-label{ font-size:12px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-mono); }

.dash-section{ margin-bottom:48px; }
.dash-section h2{ font-family:var(--font-display); font-size:1.4rem; margin-bottom:6px; }
.dash-section > .join-sub{ margin-bottom:20px; }
.dash-trips{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.dash-empty{ color:var(--ink-faint); font-size:14px; padding:24px; border:1px dashed var(--outline-variant); border-radius:var(--shape-lg); text-align:center; }

.trip-card{ background:var(--surf-lowest); border:1px solid var(--line); border-radius:var(--shape-lg); padding:20px; display:flex; flex-direction:column; gap:10px; }
.trip-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.trip-card-head strong{ display:block; font-size:14.5px; }
.trip-date{ display:block; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
.trip-followed{ font-size:13px; color:var(--ink-dim); margin:0; }
.trip-comment{ font-size:13.5px; line-height:1.55; margin:0; }
.trip-stop{ background:var(--surf); border-radius:var(--shape-sm); padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.trip-stop strong{ font-size:13.5px; }
.trip-stop-note{ font-size:12.5px; color:var(--ink-dim); margin:0; }
.trip-delete{ align-self:flex-start; color:var(--error); }
.stop-ahead-card .trip-card-head strong{ margin-left:6px; }

.dash-star-input{ display:flex; gap:4px; }
.dash-star-btn{ background:none; border:none; cursor:pointer; font-size:26px; line-height:1; color:var(--outline-variant); padding:2px; }
.dash-star-btn.active{ color:var(--tertiary); }
.dash-star-btn:focus-visible{ outline:2px solid var(--tertiary); outline-offset:2px; border-radius:4px; }

.stop-toggle{ display:flex; align-items:center; gap:10px; margin-bottom:18px; font-size:13.5px; font-weight:600; color:var(--ink-dim); cursor:pointer; }
.stop-toggle input{ width:16px; height:16px; }
.stop-fields{ border-top:1px dashed var(--outline-variant); padding-top:16px; margin-bottom:6px; }

@media (max-width:720px){
  .dash-stats{ grid-template-columns:1fr; }
  .dash-trips{ grid-template-columns:1fr; }
  .dash-head{ flex-direction:column; align-items:flex-start; }
}