/* ═══════════════════════════════════════════════════════════════════════════
   Pebbil — pebbil.io landing page
   Every colour, font and shape rule below is lifted from the mobile app's
   design system (see roadmap_app/CLAUDE.md + the screen stylesheets), so the
   site and the app read as one product.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ── */
  --bg:            #F5ECD7;  /* app background */
  --card:          #EDE3CC;  /* card surface / input bg */
  --elevated:      #E8DCBF;  /* elevated card / tag bg */
  --skeleton:      #E2D5B8;  /* shimmer base */
  --border:        #D4C9A8;  /* border / divider */
  --border-muted:  #C4B898;  /* muted border (tags, chips) */

  /* ── Text ── */
  --ink:           #1A1A1A;  /* primary text + CTA background */
  --body:          #2A2520;  /* secondary body text */
  --muted:         #7A7060;  /* muted label / metadata */
  --muted-warm:    #6B5D45;  /* warm metadata (cards) */
  --disabled:      #9A8E78;
  --placeholder:   #B8A88E;
  --deselected:    #91836F;
  --inverted:      #F5ECD7;  /* text on dark */
  --headline-warm: #4A4032;  /* landing headline */
  --hero-desc:     #5A5040;  /* hero stop description */

  /* ── Semantic ── */
  --success:       #3A7D5A;  /* milestone done */
  --warning:       #B85C38;
  --empty-icon:    #A09070;

  /* ── Trail ── */
  --trail-ink:     #806033;  /* traveled path — warm, walked-in */
  --trail-fog:     #9C8755;  /* path ahead — faint, dissolving */

  /* ── Type ──
     The app uses real Georgia on iOS and Gelasio (metric-compatible) elsewhere.
     The same rule applies here: Windows/macOS get Georgia, everyone else gets
     Gelasio from Google Fonts, so metrics never shift. */
  --serif:  Georgia, "Gelasio", "Times New Roman", serif;
  --brand:  "Newsreader", Georgia, "Gelasio", serif;

  /* ── Shape ── */
  --r-input: 8px;
  --r-card:  16px;
  --r-pill:  100px;
  --pad-screen: 24px;

  --header-h: 68px;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; }

::selection { background: #1A1A1A; color: #F5ECD7; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--inverted);
  padding: 12px 18px;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ── Layout ────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--pad-screen);
}
.wrap.narrow { max-width: 760px; }
.center-block { text-align: center; }

/* ── Shared type ───────────────────────────────────────────────────────── */

/* CTA / section label — Georgia-Bold, uppercase, wide tracking. */
.eyebrow {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.18;
  letter-spacing: 0.5px;
  color: var(--ink);
  margin-bottom: 18px;
}
.section-title.center { text-align: center; }
.eyebrow:has(+ .section-title.center) { text-align: center; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Primary CTA: #1A1A1A bg · #F5ECD7 text · Georgia-Bold · uppercase ·
   letterSpacing 1.5–2.5 · borderRadius 8 · padding 16 (app conventions). */

.btn {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border-radius: var(--r-input);
  transition: transform 140ms ease, opacity 140ms ease, background-color 140ms ease, color 140ms ease;
}
.btn:active { transform: translateY(1px); }

.btn-dark {
  background: var(--ink);
  color: var(--inverted);
  font-size: 19px;
  letter-spacing: 2.5px;
  padding: 17px 34px;
}
.btn-dark:hover { opacity: 0.88; }

.btn-sm {
  font-size: 13px;
  letter-spacing: 1.6px;
  padding: 11px 18px;
  text-transform: uppercase;
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 26px;
  width: 100%;
}
.btn-outline:hover { background: var(--ink); color: var(--inverted); }

.btn-cream {
  background: var(--inverted);
  color: var(--ink);
  font-size: 16px;
  letter-spacing: 1.2px;
  padding: 15px 26px;
  width: 100%;
}
.btn-cream:hover { opacity: 0.9; }

/* ── Header ────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(245, 236, 215, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.site-header.is-stuck { border-bottom-color: var(--border); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  margin-right: auto;
}
.wordmark-mark { width: 19px; height: 46px; display: block; }
.wordmark-text {
  font-family: var(--brand);
  font-style: italic;
  font-weight: 600;
  font-size: 27px;
  color: var(--ink);
  line-height: 1;
  /* the italic's right side-bearing overhangs a glyph-tight box */
  padding-right: 3px;
}

.header-nav {
  display: flex;
  gap: 26px;
}
.header-nav a {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.4px;
  color: var(--body);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.header-nav a:hover { border-bottom-color: var(--ink); color: var(--ink); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 0 96px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: center;
}

/* Landing copy stack, matching the app's landing screen exactly:
   headline (Georgia 25 / #4A4032) → brand (Newsreader italic 64) → builds. */
.hero-headline {
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.32;
  letter-spacing: 0.3px;
  color: var(--headline-warm);
  margin-bottom: 30px;
}
.hero-brand {
  font-family: var(--brand);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(58px, 8.4vw, 96px);
  line-height: 1.04;
  letter-spacing: 0.5px;
  color: var(--ink);
}
.hero-builds {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: var(--ink);
}
/* The intro paragraph that used to sit here was removed, but its breathing room
   was doing real work in the composition. This margin reproduces the gap it left
   between "builds yours." and the button: its own 26px top margin, three lines of
   20px/1.55 copy, and the 34px above the button. */
.hero-actions { margin-top: 153px; }
.hero-art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-roadmap {
  width: min(100%, 360px);
  height: clamp(430px, 70vh, 640px);
  overflow: visible;
}

/* ── Trail section ─────────────────────────────────────────────────────── */

.trail-section { padding: 100px 0 30px; }

/* The serpentine only reads as a trail when the horizontal swing between lanes
   is in proportion to the vertical gap between stops (on a phone that's roughly
   1.3 : 1). A full-width column would make every segment a flat diagonal across
   the copy, so the trail keeps its own narrower measure. */
.trail-wrap {
  position: relative;
  max-width: 940px;
  margin: 54px auto 0;
  padding-inline: var(--pad-screen);
}
.trail-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.trail-stops {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* A stop: node in a fixed-width lane column, content hung off a margin rule on
   the side facing the trail — the app's "field journal entry" treatment. */
.trail-stop {
  display: grid;
  align-items: center;
  gap: 0;
  min-height: 500px;
  grid-template-columns: 160px minmax(0, 1fr);
}
.trail-stop[data-side="right"] {
  grid-template-columns: minmax(0, 1fr) 160px;
}

.trail-node {
  grid-row: 1;
  justify-self: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--elevated);
  border: 1px solid var(--border-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0.95;
  transition: background-color 420ms ease, border-color 420ms ease,
              width 420ms ease, height 420ms ease, box-shadow 420ms ease;
}
.trail-stop[data-side="left"]  .trail-node { grid-column: 1; }
.trail-stop[data-side="right"] .trail-node { grid-column: 2; }

/* Soft top-left sheen so nodes read as pressed stones, not flat discs. */
.trail-node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.node-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--disabled);
  transition: color 420ms ease;
  position: relative;
  z-index: 1;
}

/* Current stop — dark, larger, with the app's lifted shadow. */
.trail-stop.is-current .trail-node {
  background: var(--ink);
  border-color: var(--ink);
  width: 66px;
  height: 66px;
  box-shadow: 0 5px 12px rgba(26, 26, 26, 0.28);
}
.trail-stop.is-current .node-num { color: var(--inverted); }

/* Passed stop — milestone green. */
.trail-stop.is-done .trail-node {
  background: var(--success);
  border-color: #326B4E;
  box-shadow: none;
  width: 54px;
  height: 54px;
}
.trail-stop.is-done .node-num { color: var(--inverted); }

.trail-content {
  grid-row: 1;
  padding-block: 4px;
  transition: opacity 500ms ease, transform 500ms ease;
}
.trail-stop[data-side="left"] .trail-content {
  grid-column: 2;
  border-left: 2px solid var(--border);
  padding-left: 26px;
  margin-left: -18px;
}
.trail-stop[data-side="right"] .trail-content {
  grid-column: 1;
  border-right: 2px solid var(--border);
  padding-right: 26px;
  margin-right: -18px;
  text-align: right;
}
.trail-stop.is-done .trail-content    { border-color: var(--trail-ink); }
.trail-stop.is-current .trail-content { border-color: var(--ink); }

/* Stops ahead recede with a progressive fog, so the eye stays on the next step.
   Scoped to .js so a script failure leaves every stop fully legible. */
.js .trail-stop:not(.is-seen) .trail-content {
  opacity: 0.28;
  transform: translateY(14px);
}
.js .trail-stop.is-seen .trail-content { opacity: 1; transform: none; }

.stop-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(25px, 3.1vw, 33px);
  line-height: 1.18;
  letter-spacing: 0.2px;
  color: var(--ink);
  margin-bottom: 10px;
}
.stop-desc {
  font-family: var(--serif);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.34;
  color: var(--hero-desc);
  /* Kept short so the trail crosses the lane in clear space, not through copy. */
  max-width: 22em;
}
.trail-stop[data-side="right"] .stop-desc { margin-left: auto; }

/* Summit marker — the app's in-flow centered triangle. */
/* Sits above the trail SVG, like the stops do, so the path ends *under* the
   marker instead of drawing a dash across it. */
.trail-summit {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}
.summit-marker {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 12px rgba(26, 26, 26, 0.24);
}
.summit-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: 0.8px;
  color: var(--muted-warm);
  text-align: center;
}

/* ── Specimens ─────────────────────────────────────────────────────────── */

.specimens { padding: 70px 0 80px; }

.specimen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  margin-top: 46px;
}

.spec-label {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* Card convention: #EDE3CC bg · #D4C9A8 1px border · radius 14–18. */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
}

.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* Milestone tag colours — bg #E8DCBF, border #C4B898, text varies by tag. */
.card-tag {
  background: var(--elevated);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-family: var(--serif);
  font-size: 14px;
  text-transform: capitalize;
}
.card-tag[data-tag="foundation"] { color: #5A8A5A; }
.card-tag[data-tag="projects"]   { color: #4A7AAA; }
.card-tag[data-tag="community"]  { color: #A06030; }
.card-tag[data-tag="interviews"] { color: #8050A0; }
.card-tag[data-tag="networking"] { color: #3A8A8A; }

.priority-badge {
  background: var(--elevated);
  border: 1px solid #B8860B;
  border-radius: 999px;
  padding: 5px 10px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.45px;
  color: #8A6A00;
  white-space: nowrap;
}

.card-title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 28px);
  line-height: 1.14;
  letter-spacing: 0.3px;
  color: var(--ink);
  margin-bottom: 10px;
}
.card-desc {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
  color: var(--body);
  margin-bottom: 18px;
}

.task-list { display: grid; gap: 11px; margin-bottom: 18px; }
.task-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.42;
  color: var(--body);
}
.task-check {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border-radius: 5px;
  border: 1px solid var(--border-muted);
  background: var(--bg);
}
.task-list li:first-child .task-check {
  background: var(--success);
  border-color: #326B4E;
  position: relative;
}
.task-list li:first-child .task-check::after {
  content: "";
  position: absolute;
  left: 6px; top: 2.5px;
  width: 4px; height: 9px;
  border: solid var(--inverted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.task-list li:first-child { color: var(--muted-warm); text-decoration: line-through; text-decoration-color: var(--border-muted); }

.skill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.skill-pill {
  background: var(--elevated);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--body);
}

.progress-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 6px;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
}
.progress-text {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--body);
}

/* ── Event card ────────────────────────────────────────────────────────── */
/* Badge colours: bg #EDE3CC, border and text vary by badge (app BADGE_COLORS). */

.event-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(26, 26, 26, 0.08);
  --badge-border: #C4B898;
  --badge-text: var(--muted-warm);
}
.event-card[data-badge="career_fair"],  .badge-chip[data-badge="career_fair"]  { --badge-border: #C4A870; --badge-text: #7A5828; }
.event-card[data-badge="info_session"], .badge-chip[data-badge="info_session"] { --badge-border: #5A7AA0; --badge-text: #2E4E70; }
.event-card[data-badge="networking"],   .badge-chip[data-badge="networking"]   { --badge-border: #5A8A60; --badge-text: #2A5030; }
.event-card[data-badge="hackathon"],    .badge-chip[data-badge="hackathon"]    { --badge-border: #B47850; --badge-text: #703820; }
.event-card[data-badge="competition"],  .badge-chip[data-badge="competition"]  { --badge-border: #7A5898; --badge-text: #4A2870; }
.event-card[data-badge="club_meeting"], .badge-chip[data-badge="club_meeting"] { --badge-border: #5A8888; --badge-text: #1E5050; }
.event-card[data-badge="workshop"],     .badge-chip[data-badge="workshop"]     { --badge-border: #A06878; --badge-text: #602840; }
.event-card[data-badge="recruiting"],   .badge-chip[data-badge="recruiting"]   { --badge-border: #708060; --badge-text: #385028; }

.event-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--badge-border);
}
.event-body { padding: 22px 22px 22px 24px; }

.event-top-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.date-block {
  min-width: 74px;
  padding: 11px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--badge-border);
  background: var(--bg);
  text-align: center;
}
.date-top {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: 0.3px;
  color: var(--badge-text);
}
.date-sub {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted-warm);
  margin-top: 3px;
}
.badge-pill {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--badge-text);
}

.event-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(23px, 2.5vw, 27px);
  line-height: 1.22;
  letter-spacing: 0.2px;
  color: var(--ink);
  margin-bottom: 12px;
}
.event-meta-block { margin-bottom: 16px; }
.event-meta {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
  color: var(--body);
}
.event-meta-location { font-size: 17px; color: var(--muted-warm); }
.event-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 14px;
}
.event-why {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.32;
  color: var(--muted-warm);
}

.badge-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.badge-chip {
  background: var(--card);
  border: 1px solid var(--badge-border);
  color: var(--badge-text);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

/* ── Pricing ───────────────────────────────────────────────────────────── */

.pricing { padding: 80px 0 80px; }

.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 860px;
  margin: 46px auto 0;
  align-items: stretch;
}

.plan-card {
  border-radius: 18px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
}
.plan-free {
  background: var(--card);
  border: 1px solid var(--border);
}
/* Mirrors the in-app paywall card: LinearGradient #262019 → #1A1A1A. */
.plan-pro {
  background: linear-gradient(135deg, #262019 0%, #1A1A1A 100%);
  border: 1px solid #2E2820;
  color: var(--inverted);
}

.plan-eyebrow {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-eyebrow.pro { color: var(--inverted); text-transform: none; letter-spacing: 1px; font-size: 17px; }
.plan-eyebrow-row { display: flex; align-items: center; gap: 8px; }
.plan-star { color: #D9C48E; font-size: 17px; line-height: 1; }

.plan-price {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: 0.4px;
  color: var(--ink);
  margin-top: 16px;
}
.plan-price.pro { color: var(--inverted); }
.plan-unit {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 22px;
}
.plan-unit.pro { color: #B8AC94; }

.plan-list { display: grid; gap: 11px; margin-bottom: 26px; }
.plan-list li {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
  color: var(--body);
  padding-left: 20px;
  position: relative;
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-muted);
}

.benefit-list { display: grid; gap: 14px; margin-bottom: 26px; }
.benefit-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.35;
  color: var(--inverted);
}
.benefit-check {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--inverted);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: var(--serif);
  font-weight: 700;
}

.plan-card .btn { margin-top: auto; }

.plan-fine {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.4;
  color: #9A8E78;
  text-align: center;
  margin-top: 14px;
}
.plan-footnote {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  max-width: 42em;
  margin: 26px auto 0;
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq { padding: 70px 0 90px; }
.faq-list { margin-top: 40px; display: grid; gap: 12px; }

.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 20px;
}
.faq summary {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.35;
  letter-spacing: 0.2px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  padding: 17px 34px 17px 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted-warm);
  border-bottom: 2px solid var(--muted-warm);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 200ms ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--body);
  padding: 0 0 20px;
  max-width: 60em;
}

/* ── Closing ───────────────────────────────────────────────────────────── */

.closing { padding: 80px 0 100px; }
.closing-brand {
  font-family: var(--brand);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(52px, 8vw, 84px);
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 12px;
}
.closing-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.25;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.closing-sub {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--body);
  margin-top: 12px;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 34px 0 44px;
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
}
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--body);
  text-decoration: none;
  border-bottom: 1px solid var(--border-muted);
  padding-bottom: 2px;
}
.footer-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.footer-links a[aria-disabled="true"] { color: var(--disabled); cursor: default; }
.footer-copy {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--muted);
  width: 100%;
  padding-top: 6px;
}

/* ── Reveal-on-scroll ──────────────────────────────────────────────────── */

/* Scoped to .js so content is never hidden if the script fails to run. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-art { order: -1; }
  .hero-roadmap {
    width: min(100%, 190px);
    height: clamp(230px, 30vh, 300px);
  }
  .hero { padding-top: 28px; min-height: auto; }

  .specimen-grid { grid-template-columns: 1fr; gap: 44px; }
  .plan-grid { grid-template-columns: 1fr; }

  .header-nav { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  :root { --pad-screen: 20px; }

  /* Keep the alternating serpentine — at this width the lane swing (~274px)
     against a ~220px stop height lands almost exactly on the app's ratio, so the
     curve reads the same as it does on a phone. */
  .trail-stop {
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 270px;
    padding-block: 58px;
  }
  .trail-stop[data-side="right"] {
    grid-template-columns: minmax(0, 1fr) 76px;
  }
  .trail-stop .trail-node { width: 46px; height: 46px; }
  .trail-stop.is-current .trail-node { width: 56px; height: 56px; }
  .trail-stop.is-done .trail-node { width: 46px; height: 46px; }
  /* Content is held to roughly the app's 254px measure so it never reaches into
     the opposite lane — that clear channel is what the trail sweeps through. */
  .trail-content { max-width: 248px; }
  .trail-stop[data-side="left"] .trail-content {
    padding-left: 18px;
    margin-left: -12px;
    justify-self: start;
  }
  .trail-stop[data-side="right"] .trail-content {
    padding-right: 18px;
    margin-right: -12px;
    justify-self: end;
  }
  .stop-desc { max-width: none; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-brand { margin-right: 0; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .trail-stop:not(.is-seen) .trail-content { opacity: 1; transform: none; }
}