/* ============================================================
   JOGGY.RUN — Design System v2.0
   Tokens and component CSS lifted verbatim from the Joggy app
   design reference (joggy-home-screen.html / joggy-all-screens.html).
   Do not reinterpret — this is the literal source of truth.
   ============================================================ */

:root {
  --base:        #F7F4EF;
  --base2:       #EDE9E2;
  --surface:     #FFFFFF;
  --border:      #E4DFD7;
  --border2:     #D5CFC6;
  --text:        #1F1C18;
  --text2:       #6B6359;
  --text3:       #A39A8E;
  --rust:        #D97757;
  --rust-light:  #F9EDE7;
  --rust-mid:    #C4633D;
  --green:       #4E6E3C;
  --green-light: #EBF2E4;
  --green-mid:   #7AB648;
  --dark:        #1B2618;
  --dark2:       #253320;
  --dark3:       #2F3F29;

  --mono: 'DM Mono', monospace;
  --display: 'Outfit', sans-serif;
  --body: 'Plus Jakarta Sans', sans-serif;

  --shadow-card: 0 4px 20px rgba(31, 28, 24, 0.06);
  --maxw: 1080px;
}

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

html { scroll-behavior: smooth; }

html {
  /* iOS Safari ignores overflow-x on body alone; clip at the root too.
     clip (with hidden as fallback) avoids creating a scroll container. */
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  background: var(--base);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }

/* Shared label convention: // PREFIX in DM Mono, uppercase */
.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text3);
}
.mono-label.rust  { color: var(--rust); }
.mono-label.green { color: var(--green); }

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.3px;
}
.wordmark em { color: var(--rust); font-style: normal; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
  border: none;
  border-radius: 12px;
  padding: 14px 22px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--rust);
  color: #fff;
  box-shadow: 0 4px 16px rgba(217, 119, 87, 0.25);
}
.btn-primary:hover { background: var(--rust-mid); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: transparent;
  color: var(--rust);
  border: 1.5px solid var(--rust);
}
.btn-secondary:hover { background: var(--rust-light); }

/* ============================================================
   HERO  (above the fold — nothing competing for attention)
   ============================================================ */
.hero {
  background: var(--dark);
  color: #fff;
  position: relative;
  overflow: hidden;
  /* Nav (64px) now sits above the hero, so trim the hero to fill the
     rest of the viewport — nav + hero together == one clean screen. */
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
}
.hero-glow-rust {
  position: absolute; top: -120px; right: -100px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(217,119,87,0.15) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.hero-glow-green {
  position: absolute; bottom: -120px; left: -80px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(122,182,72,0.08) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}

.hero-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
  padding: 32px 24px 64px;
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 22px;
}
.hero-headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.02;
  letter-spacing: -2px;
  color: #fff;
  margin-bottom: 22px;
}
.hero-headline em { color: var(--rust); font-style: normal; }
.hero-subhead {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
  max-width: 30em;
  margin-bottom: 34px;
}

/* Waitlist form — single field + one CTA */
/* ── Download CTA cluster ──
   Mobile visitors get the direct store button. Desktop visitors also get
   the QR card ("scan with your phone"), because store links are useless
   on a laptop. JS adds .is-desktop to <html> for non-touch devices. */
.cta-cluster { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-download svg { width: 17px; height: 17px; fill: currentColor; margin-top: -2px; }
.cta-micro {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.38);
}
.qr-card {
  display: none;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px 18px 14px 14px;
  max-width: 400px;
  text-align: left;
}
html.is-desktop .qr-card { display: flex; }
.qr-card img {
  width: 92px; height: 92px; flex-shrink: 0;
  background: #fff; border-radius: 10px; padding: 6px;
}
.qr-card-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--green-mid); margin-bottom: 6px;
}
.qr-card-text { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.65); }

/* Light-surface variant */
.qr-card.on-light { background: var(--surface); border-color: var(--border); }
.qr-card.on-light .qr-card-text { color: var(--text2); }
.qr-card.on-light .qr-card-label { color: var(--green); }

/* Live animated Joggy bubble — the hero's signature element */
.hero-bubble-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.joggy-bubble-live {
  width: 100%;
  max-width: 380px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.joggy-avatar {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--green-light);
  border: 1.5px solid rgba(78,110,60,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.joggy-avatar svg { width: 22px; height: 22px; fill: var(--green); }
.joggy-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px 16px 16px 16px;   /* the Joggy speech-bubble signature */
  padding: 14px 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.22);
  flex: 1;
}
.joggy-name {
  font-family: var(--mono);
  font-size: 9px; font-weight: 500;
  color: var(--green);
  text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 5px;
}
.joggy-text {
  font-size: 15px; color: var(--text2); line-height: 1.5;
  min-height: 3em;
}
.joggy-text .cursor {
  display: inline-block;
  width: 2px; height: 1.05em;
  background: var(--green);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   SHARED NAV (appears below hero on scroll)
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247,244,239,0.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.site-nav .wordmark { font-size: 20px; color: var(--text); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text2);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--rust); }
.nav-links .btn { padding: 9px 16px; font-size: 13px; }

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.site-nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.section { padding: 96px 0; }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head .mono-label { display: block; margin-bottom: 16px; }
.section-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  color: var(--text);
}
.section-head p {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text2);
}

/* The shift — positioning, mostly type (GEO-friendly factual block) */
.shift {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.shift-statement {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--text);
  max-width: 18em;
}
.shift-statement em { color: var(--rust); font-style: normal; }
.shift-sub {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text2);
  max-width: 38em;
}

/* ============================================================
   HOW IT WORKS — three beats
   ============================================================ */
.beat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0;
}
.beat:nth-child(even) .beat-visual { order: -1; }
.beat-num {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rust);
  margin-bottom: 14px;
}
.beat h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.8px;
  margin-bottom: 16px;
}
.beat p {
  font-size: 17px;
  line-height: 1.62;
  color: var(--text2);
  max-width: 34em;
}
.beat-visual { display: flex; justify-content: center; }

/* Card primitive (app parity) */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  width: 100%;
  max-width: 400px;
}

/* Beat 1 — today workout card */
.today-top {
  background: var(--dark);
  padding: 18px 20px 16px;
  position: relative; overflow: hidden;
}
.today-top-glow {
  position: absolute; top: -20px; right: -20px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(217,119,87,0.2) 0%, transparent 70%);
  border-radius: 50%;
}
.today-type-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.today-type-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rust); }
.today-type-label {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.today-title {
  font-family: var(--display); font-size: 24px; font-weight: 700;
  color: #fff; line-height: 1.05; letter-spacing: -0.5px;
}
.today-stats {
  display: flex; padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.t-stat { flex: 1; border-right: 1px solid var(--border); padding-right: 14px; margin-right: 14px; }
.t-stat:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.t-val { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -0.5px; }
.t-val.green { color: var(--green); }
.t-unit { font-family: var(--mono); font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }
.today-action { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.today-desc { font-size: 13px; color: var(--text3); line-height: 1.45; font-style: italic; flex: 1; }
.today-action .start-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--rust); color: #fff; border: none; border-radius: 12px;
  padding: 11px 18px; font-family: var(--body); font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
.today-action .start-btn svg { width: 14px; height: 14px; fill: rgba(255,255,255,0.85); }

/* Beat 2 — chat demo */
.chat-card { max-width: 420px; }
.chat-header {
  background: var(--dark); padding: 16px 20px; position: relative; overflow: hidden;
}
.chat-header-glow {
  position: absolute; top: -30px; right: -30px; width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(122,182,72,0.12) 0%, transparent 70%); border-radius: 50%;
}
.chat-identity { display: flex; align-items: center; gap: 10px; position: relative; }
.chat-avatar-lg {
  width: 40px; height: 40px; background: var(--green-light);
  border: 2px solid rgba(78,110,60,0.3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.chat-avatar-lg svg { width: 20px; height: 20px; fill: var(--green); }
.chat-name { font-family: var(--display); font-size: 16px; font-weight: 700; color: #fff; }
.chat-status {
  font-family: var(--mono); font-size: 8px; font-weight: 500;
  color: var(--green-mid); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 2px;
}
.chat-messages {
  padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--base);
  /* Fixed height so the card is full-size immediately — messages load in
     within this window and scroll, instead of growing the card and shoving
     the rest of the page around. */
  height: 380px;
  overflow-y: auto;
  scrollbar-width: none;              /* Firefox */
}
.chat-messages::-webkit-scrollbar { display: none; }  /* WebKit */
/* Desktop has the room, so size the window to hold the whole conversation.
   The messages then type themselves in without scrolling or shifting inside
   the card — nothing on the page moves. (Mobile keeps the compact 380px.) */
@media (min-width: 861px) {
  .chat-messages { height: 560px; }
}
.msg-row { display: flex; gap: 8px; align-items: flex-end; }
.msg-row.user { flex-direction: row-reverse; }
.msg-avatar-sm {
  width: 26px; height: 26px; flex-shrink: 0; background: var(--green-light);
  border: 1px solid rgba(78,110,60,0.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.msg-avatar-sm svg { width: 13px; height: 13px; fill: var(--green); }
.msg-avatar-user {
  width: 26px; height: 26px; flex-shrink: 0; background: var(--rust); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.msg-bubble {
  max-width: 78%; padding: 11px 14px; border-radius: 4px 16px 16px 16px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(31,28,24,0.04);
  font-size: 13px; color: var(--text2); line-height: 1.55;
}
.msg-bubble.user {
  background: var(--rust); border-color: var(--rust); color: #fff;
  border-radius: 16px 4px 16px 16px; box-shadow: 0 2px 8px rgba(217,119,87,0.2);
}
.msg-sender {
  font-family: var(--mono); font-size: 8px; font-weight: 500; color: var(--green);
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px;
}
.typing-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text3);
  animation: typing 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Beat 3 — The Pack feed */
.pack-card { max-width: 400px; padding: 18px; }
.pack-post { padding: 14px 0; border-bottom: 1px solid var(--border); }
.pack-post:last-child { border-bottom: none; padding-bottom: 0; }
.pack-post:first-child { padding-top: 0; }
.pack-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pack-pfp {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 14px; color: #fff;
}
.pack-name { font-size: 14px; font-weight: 700; color: var(--text); }
.pack-meta { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text3); margin-top: 1px; }
.pack-body { font-size: 14px; color: var(--text2); line-height: 1.5; margin-bottom: 10px; }
.pack-stats { display: flex; gap: 16px; margin-bottom: 10px; }
.pack-stat .pack-stat-val { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--text); }
.pack-stat .pack-stat-val.green { color: var(--green); }
.pack-stat .pack-stat-unit { font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text3); }
.pack-reactions { display: flex; align-items: center; gap: 8px; }
.paces-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--rust-light); border: 1px solid rgba(217,119,87,0.2);
  border-radius: 100px; padding: 5px 12px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--rust-mid);
  cursor: pointer; transition: all 0.15s ease;
}
.paces-btn:hover, .paces-btn.active { background: var(--rust); color: #fff; border-color: var(--rust); }
.paces-count { font-size: 12px; color: var(--text3); }

/* ============================================================
   ASK JOGGY ANYTHING — centered chat demo (Club feature)
   ============================================================ */
.section-head .section-tag { display: inline-block; margin-top: 18px; }
.ask-chat-wrap { display: flex; justify-content: center; }
/* Unlike the Beat 2 demo (a fixed-height scroller), this card is standalone and
   centered, so it grows to fit the whole conversation at every width — no internal
   scroll that would clip the opening question on narrow screens. */
#chatAsk { height: auto; min-height: 260px; overflow: visible; }
@media (min-width: 861px) { #chatAsk { height: auto; } }

/* ============================================================
   PLAN & LOG SHOWCASE — app-parity cards (from the real tabs)
   ============================================================ */
/* Plan card */
.plan-card { padding: 16px; }
.plan-week-tabs {
  display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 2px;
  scrollbar-width: none;
}
.plan-week-tabs::-webkit-scrollbar { display: none; }
.week-tab {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3);
  background: var(--base2); border: 1px solid var(--border);
  border-radius: 100px; padding: 7px 12px;
}
.week-tab.active { background: var(--rust); border-color: var(--rust); color: #fff; }

.plan-sec { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.plan-sec .sec-title {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text3);
}
.plan-sec .sec-meta {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--rust);
}
.plan-sec .sec-meta.green { color: var(--green); }

.week-summary {
  display: flex; background: var(--base); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; margin-bottom: 18px;
}
.ws-stat { flex: 1; text-align: center; border-right: 1px solid var(--border); }
.ws-stat:last-child { border-right: none; }
.ws-val { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--text); line-height: 1; }
.ws-val.green { color: var(--green); }
.ws-val.rust { color: var(--rust); }
.ws-unit {
  font-family: var(--mono); font-size: 8px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text3); margin-top: 5px;
}

.workout-list { display: flex; flex-direction: column; gap: 10px; }
.workout-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px;
}
.workout-row.today { border-color: var(--rust); box-shadow: 0 0 0 1px var(--rust), 0 4px 16px rgba(217,119,87,0.12); }
.workout-row-stripe { width: 4px; align-self: stretch; border-radius: 4px; background: var(--rust); }
.workout-row-stripe.done { background: var(--green-mid); }
.workout-row-stripe.rest { background: var(--border2); }
.workout-row-body { flex: 1; min-width: 0; }
.workout-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.workout-row-day { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text3); }
.workout-row-day.today { color: var(--rust); }
.workout-row-badge {
  font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 100px; background: var(--base2); color: var(--text2);
}
.workout-row-badge.done { background: var(--green-light); color: var(--green); }
.workout-row-badge.rest { background: var(--base2); color: var(--text3); }
.workout-row-title { font-size: 14px; font-weight: 700; color: var(--text); }
.workout-row-title.muted { color: var(--text3); font-weight: 600; }
.workout-row-stats { display: flex; gap: 14px; margin-top: 6px; }
.wr-stat-val { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--text); }
.wr-stat-val.green { color: var(--green); }
.wr-stat-unit { font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); margin-left: 3px; }
.workout-row-check .check-circle {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
}
.check-circle.rest { opacity: 0.4; }
.check-circle.done { background: var(--green-mid); border-color: var(--green-mid); }
.check-circle.done svg { width: 13px; height: 13px; fill: #fff; }

/* Log card — dark hero band parity */
.log-card { padding: 0; }
.log-head { background: var(--dark); padding: 20px; position: relative; overflow: hidden; }
.log-head-glow {
  position: absolute; top: -30px; left: -20px; width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(217,119,87,0.15) 0%, transparent 70%); border-radius: 50%;
}
.log-wordmark { font-family: var(--display); font-weight: 700; font-size: 18px; color: #fff; position: relative; letter-spacing: -0.3px; }
.log-wordmark em { color: var(--rust); font-style: normal; }
.log-sublabel {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.14em; color: rgba(255,255,255,0.3); margin-top: 4px; position: relative;
}
.log-stats { display: flex; gap: 8px; margin-top: 16px; position: relative; }
.log-stat { flex: 1; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 10px 12px; }
.log-stat-val { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; color: #fff; }
.log-stat-val.green { color: var(--green-mid); }
.log-stat-val.rust { color: var(--rust); }
.log-stat-label { font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.3); margin-top: 5px; }
.log-toggle { display: flex; gap: 3px; margin-top: 16px; background: rgba(255,255,255,0.07); border-radius: 12px; padding: 3px; position: relative; }
.log-toggle-btn {
  flex: 1; text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 9px; border-radius: 10px; color: rgba(255,255,255,0.4);
}
.log-toggle-btn.active { background: var(--rust); color: #fff; }
.log-runs { padding: 16px; background: var(--base); }
.log-month { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text3); margin: 2px 0 12px; }
.log-run-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.log-run-row:last-child { margin-bottom: 0; }
.log-run-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--green-light); display: flex; align-items: center; justify-content: center;
}
.log-run-icon svg { width: 18px; height: 18px; fill: var(--green); }
.log-run-body { flex: 1; min-width: 0; }
.log-run-title { font-size: 14px; font-weight: 700; color: var(--text); }
.log-run-meta { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text3); margin-top: 2px; }
.log-run-stats { text-align: right; flex-shrink: 0; }
.log-run-dist { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--text); }
.log-run-pace { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green); margin-top: 2px; }

/* ============================================================
   LIFESTYLE BREAK — full-bleed
   ============================================================ */
.lifestyle {
  position: relative;
  min-height: min(64vh, 620px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark); /* fallback while the image loads */
}
/* Full-bleed photo, behaves like a cover/center background but is a real
   <img> so it carries alt text + lazy loading for SEO. */
.lifestyle-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
/* Subtle dark overlay so the cream/rust copy above stays readable. */
.lifestyle-overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 38, 24, 0.35);
  z-index: 1;
  pointer-events: none;
}
.lifestyle .container { position: relative; z-index: 2; }
.lifestyle-copy {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -1px;
  color: #fff;
  max-width: 16em;
}
.lifestyle-copy em { color: var(--rust); font-style: normal; }

/* ============================================================
   MISSION + COUNTER
   ============================================================ */
.mission { background: var(--surface); border-top: 1px solid var(--border); }
.mission-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center;
}
.mission-statement {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px); line-height: 1.2; letter-spacing: -1px;
  color: var(--text);
}
/* Manifesto teaser card (replaces the pre-launch waitlist counter) */
.manifesto-teaser {
  background: var(--dark); border-radius: 20px; padding: 30px 28px;
  position: relative; overflow: hidden; display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.manifesto-teaser:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(27,38,24,0.28); }
.manifesto-teaser .mt-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--green-mid); display: block; margin-bottom: 14px; position: relative;
}
.manifesto-teaser .mt-quote {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.4px; line-height: 1.3; color: #fff; position: relative;
}
.manifesto-teaser .mt-more {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--rust); margin-top: 18px; display: block; position: relative;
}
.manifesto-teaser .counter-glow { opacity: 0.7; }

.counter-glow {
  position: absolute; bottom: -40px; right: -30px; width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(122,182,72,0.14) 0%, transparent 70%); border-radius: 50%;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0;
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.4px;
  color: var(--text);
}
.faq-icon {
  flex-shrink: 0; width: 24px; height: 24px; position: relative;
  transition: transform 0.25s ease;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--rust); border-radius: 2px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after  { width: 2px; height: 14px; transition: transform 0.25s ease; }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-a { max-height: 320px; padding-bottom: 24px; }
.faq-a p { font-size: 16px; line-height: 1.65; color: var(--text2); max-width: 60ch; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  color: #fff; text-align: center; position: relative; overflow: hidden;
  /* Optional photo bookend: dark overlay keeps copy legible, and if
     cta-hero.jpg is absent the gradient simply renders over the dark
     fallback color — i.e. the plain dark CTA, no broken image. */
  background-color: var(--dark);
  background-image:
    linear-gradient(rgba(20, 28, 18, 0.80), rgba(20, 28, 18, 0.86)),
    url('/assets/cta-hero.jpg');
  background-size: cover;
  background-position: center;
}
.final-cta .hero-glow-rust { top: -160px; right: 50%; transform: translateX(50%); }
.final-cta h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; letter-spacing: -1.5px;
  color: #fff; margin-bottom: 18px; position: relative;
}
.final-cta p { color: rgba(255,255,255,0.6); font-size: 18px; margin-bottom: 32px; position: relative; }
.final-cta .cta-cluster { position: relative; }
.final-cta .cta-micro { position: relative; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--base);
  border-top: 1px solid var(--border);
  padding: 56px 0 40px;
}
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer-brand .wordmark { font-size: 22px; color: var(--text); margin-bottom: 10px; display: inline-block; }
.footer-tagline { font-size: 14px; color: var(--text2); max-width: 26em; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text3); margin-bottom: 14px;
}
.footer-col a { display: block; font-size: 14px; color: var(--text2); margin-bottom: 10px; transition: color 0.15s ease; }
.footer-col a:hover { color: var(--rust); }
.footer-bottom {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text3);
}

/* ============================================================
   PRICING PAGE
   ============================================================ */
.hero.hero-page {
  min-height: auto;
  /* Photo band. The subject sits on the LEFT of pricing-hero.jpg, so the copy
     is pushed to the RIGHT and the gradient is darkest on the right to keep it
     legible over the bright sky. Photo is anchored left so the runner stays in
     view. If pricing-hero.jpg is absent, the gradient renders over the dark
     fallback — i.e. the plain dark hero, no broken image. */
  background-color: var(--dark);
  background-image:
    linear-gradient(90deg, rgba(20,28,18,0.50) 0%, rgba(20,28,18,0.80) 55%, rgba(20,28,18,0.93) 100%),
    url('/assets/pricing-hero.jpg');
  background-size: cover;
  background-position: left center;
}
/* Copy sits on the right half of the band */
.hero.hero-page .pricing-hero-inner { margin-left: auto; }
.hero.hero-page .hero-body {
  display: block; padding: 20px 24px 72px;
}
.pricing-hero-inner { max-width: 680px; }
.pricing-hero-inner .hero-headline { margin-bottom: 18px; }
.pricing-hero-inner .hero-subhead { margin-bottom: 0; }

/* Two pricing cards */
.pricing-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
}
.price-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 30px 28px; box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.price-card.dark { background: var(--dark); border-color: var(--dark3); }
.price-card .pc-glow {
  position: absolute; top: -40px; right: -40px; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(217,119,87,0.16) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.pc-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text3);
  display: block; margin-bottom: 14px; position: relative;
}
.price-card.dark .pc-label { color: rgba(255,255,255,0.45); }
.pc-title {
  font-family: var(--display); font-weight: 700; font-size: 30px;
  letter-spacing: -0.8px; color: var(--text); line-height: 1; position: relative;
}
.price-card.dark .pc-title { color: #fff; }
.pc-price {
  display: flex; align-items: baseline; gap: 8px; margin-top: 16px; position: relative;
}
.pc-price .amount {
  font-family: var(--display); font-weight: 700; font-size: 34px;
  letter-spacing: -1px; color: var(--text);
}
.price-card.dark .pc-price .amount { color: #fff; }
.pc-price .per {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text3);
}
.pc-subprice {
  font-size: 13px; color: var(--text3); margin-top: 6px; position: relative;
}
.price-card.dark .pc-subprice { color: rgba(255,255,255,0.5); }
.pc-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  background: var(--green-light); border: 1px solid rgba(122,182,72,0.3);
  border-radius: 100px; padding: 6px 12px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--green);
  position: relative;
}
.price-card.dark .pc-badge {
  background: rgba(122,182,72,0.14); border-color: rgba(122,182,72,0.35); color: var(--green-mid);
}
.pc-divider { height: 1px; background: var(--border); margin: 22px 0; position: relative; }
.price-card.dark .pc-divider { background: rgba(255,255,255,0.1); }
.pc-plus {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--green); margin-bottom: 14px; position: relative;
}
.price-card.dark .pc-plus { color: var(--green-mid); }

.feat-list { list-style: none; position: relative; }
.feat {
  display: flex; align-items: flex-start; gap: 11px; padding: 8px 0;
  font-size: 14px; line-height: 1.45; color: var(--text2);
}
.price-card.dark .feat { color: rgba(255,255,255,0.78); }
.feat .feat-ic {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.feat .feat-ic.yes { background: var(--green-light); border: 1px solid rgba(78,110,60,0.22); }
.feat .feat-ic.yes svg { width: 12px; height: 12px; fill: var(--green); }
.price-card.dark .feat .feat-ic.yes { background: rgba(122,182,72,0.16); border-color: rgba(122,182,72,0.3); }
.price-card.dark .feat .feat-ic.yes svg { fill: var(--green-mid); }
.feat .feat-note { color: var(--text3); }
.price-card.dark .feat .feat-note { color: rgba(255,255,255,0.45); }
.pc-cta { margin-top: 26px; position: relative; }
.pc-cta .btn { width: 100%; }
.price-card.dark .btn-primary { box-shadow: 0 4px 16px rgba(217,119,87,0.35); }
.pc-foot {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text3); text-align: center;
  margin-top: 12px; position: relative;
}
.price-card.dark .pc-foot { color: rgba(255,255,255,0.4); }

/* Reverse-trial band (Race Countdown aesthetic) */
.trial-band {
  background: var(--rust); border-radius: 20px; overflow: hidden; position: relative;
  padding: 34px 36px; box-shadow: 0 4px 20px rgba(217,119,87,0.25);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.trial-band-glow {
  position: absolute; top: -30px; right: 80px; width: 120px; height: 120px;
  background: rgba(255,255,255,0.1); border-radius: 50%; pointer-events: none;
}
.trial-band-copy { position: relative; max-width: 46em; }
.trial-band .tb-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
}
.trial-band .tb-title {
  font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.6px; color: #fff; line-height: 1.15;
}
.trial-band .tb-num {
  font-family: var(--display); font-weight: 700; font-size: 72px; line-height: 1;
  letter-spacing: -2px; color: #fff; position: relative; text-align: right; flex-shrink: 0;
}
.trial-band .tb-num small {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.6);
  margin-top: 6px;
}

/* Comparison table */
.compare {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card);
}
.compare-row {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr; align-items: center;
  border-bottom: 1px solid var(--border);
}
.compare-row:last-child { border-bottom: none; }
.compare-row.head { background: var(--base2); }
.compare-row.head .compare-cell {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--text3);
  padding-top: 16px; padding-bottom: 16px;
}
.compare-row.head .compare-cell.plan { color: var(--text); text-align: center; }
.compare-row.head .compare-cell.plan.club { color: var(--rust); }
.compare-cell { padding: 15px 18px; font-size: 14px; color: var(--text); }
.compare-cell.center { text-align: center; }
.compare-feat { font-weight: 600; color: var(--text); }
.compare-sub { display: block; font-size: 12px; font-weight: 400; color: var(--text3); margin-top: 2px; }
.tick {
  display: inline-flex; width: 22px; height: 22px; border-radius: 6px;
  align-items: center; justify-content: center;
  background: var(--green-light); border: 1px solid rgba(78,110,60,0.22);
}
.tick svg { width: 13px; height: 13px; fill: var(--green); }
.dash { color: var(--border2); font-weight: 700; font-size: 18px; }
.compare-qual {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text3); display: block; margin-top: 4px;
}

@media (max-width: 860px) {
  /* Full-width copy on mobile: use a uniform overlay so the whole line is legible. */
  .hero.hero-page {
    background-image:
      linear-gradient(rgba(20,28,18,0.86), rgba(20,28,18,0.9)),
      url('/assets/pricing-hero.jpg');
    background-position: center;
  }
  .hero.hero-page .pricing-hero-inner { margin-left: 0; }
  .pricing-cards { grid-template-columns: 1fr; }
  .trial-band { flex-direction: column; align-items: flex-start; gap: 16px; }
  .trial-band .tb-num { text-align: left; }
  .compare-row { grid-template-columns: 1.4fr 0.8fr 0.8fr; }
  .compare-cell { padding: 13px 12px; font-size: 13px; }
}

/* ============================================================
   LEGAL PAGES (privacy / terms)
   ============================================================ */
.legal { padding: 56px 0 96px; }
.legal-wrap { max-width: 760px; }
.legal h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 4vw, 44px); letter-spacing: -1.2px; color: var(--text);
}
.legal .updated {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text3); margin-top: 12px; margin-bottom: 8px;
}
.legal-review-note {
  background: var(--rust-light); border: 1px solid rgba(217,119,87,0.25);
  border-radius: 12px; padding: 14px 16px; margin: 24px 0 8px;
  font-size: 14px; color: var(--rust-mid); line-height: 1.5;
}
.legal h2 {
  font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.5px;
  color: var(--text); margin: 40px 0 12px;
}
.legal p { font-size: 16px; line-height: 1.7; color: var(--text2); margin-bottom: 14px; }
.legal ul { margin: 0 0 14px 20px; }
.legal li { font-size: 16px; line-height: 1.7; color: var(--text2); margin-bottom: 8px; }
.legal a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.legal .todo {
  background: #FBE9E1; border-left: 3px solid var(--rust); border-radius: 6px;
  padding: 12px 14px; font-family: var(--mono); font-size: 13px; color: var(--rust-mid);
  margin: 6px 0 14px;
}

/* ============================================================
   ANIMATIONS / SCROLL REVEAL
   Deliberately NOT one uniform fade: each section family gets its
   own entrance so the page doesn't read as a repeated template
   block. Variants differ in axis, distance, duration and easing.
   ============================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* .reveal kept as the plain default (sub-pages, legal) */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .reveal.in { opacity: 1; transform: translateY(0); }

html.js .fx-up { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
html.js .fx-up.in { opacity: 1; transform: none; }

/* slow pure fade — for full-width statements; no movement at all */
html.js .fx-fade { opacity: 0; transition: opacity 1.1s ease 0.1s; }
html.js .fx-fade.in { opacity: 1; }

html.js .fx-left { opacity: 0; transform: translateX(-36px); transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
html.js .fx-left.in { opacity: 1; transform: none; }

html.js .fx-right { opacity: 0; transform: translateX(36px); transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
html.js .fx-right.in { opacity: 1; transform: none; }

/* long rise with a settle — for device screenshots */
html.js .fx-rise { opacity: 0; transform: translateY(56px) scale(0.985); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
html.js .fx-rise.in { opacity: 1; transform: none; }

/* clip wipe — for photography */
html.js .fx-clip { opacity: 0; clip-path: inset(12% 0 12% 0); transition: opacity 0.6s ease, clip-path 1s cubic-bezier(0.16, 1, 0.3, 1); }
html.js .fx-clip.in { opacity: 1; clip-path: inset(0 0 0 0); }

/* children cascade — for card grids / FAQ lists */
html.js .fx-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
html.js .fx-stagger.in > * { opacity: 1; transform: none; }
html.js .fx-stagger.in > *:nth-child(2) { transition-delay: 0.09s; }
html.js .fx-stagger.in > *:nth-child(3) { transition-delay: 0.18s; }
html.js .fx-stagger.in > *:nth-child(4) { transition-delay: 0.27s; }
html.js .fx-stagger.in > *:nth-child(5) { transition-delay: 0.36s; }
html.js .fx-stagger.in > *:nth-child(6) { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html.js .reveal, html.js .fx-up, html.js .fx-fade, html.js .fx-left,
  html.js .fx-right, html.js .fx-rise, html.js .fx-clip,
  html.js .fx-stagger > * { opacity: 1; transform: none; clip-path: none; }
  html { scroll-behavior: auto; }
  .race-track { display: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .hero-body { grid-template-columns: 1fr; gap: 40px; padding-top: 12px; }
  .hero-bubble-wrap { justify-content: flex-start; }
  .beat { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
  .beat:nth-child(even) .beat-visual { order: 0; }
  .mission-grid { grid-template-columns: 1fr; gap: 36px; }
  .section { padding: 72px 0; }

  /* Mobile navigation — hamburger reveals a full-width dropdown menu */
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 26px rgba(31,28,24,0.10);
    /* Collapsed by default; .open reveals it. */
    display: none;
  }
  .site-nav.open .nav-links { display: flex; }
  .nav-links a {
    padding: 14px 24px;
    font-size: 12px;
  }
  .nav-links .btn {
    margin: 8px 24px 4px;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 520px) {
  .footer-cols { gap: 32px; }
}

/* ============================================================
   PHASE 2 — REAL SCREENSHOTS, BLOG, MANIFESTO, SCROLL RACE
   Everything below uses only Design System v2.0 tokens.
   ============================================================ */

/* ── Device screenshots (cropped from the App Store composites) ──
   Crops include the hardware bezel; border-radius matches the device
   corner so the sliver of composite backdrop at each corner is clipped. */
.device {
  display: block;
  width: min(320px, 88%);
  height: auto; /* width/height attrs set the intrinsic ratio only, never distort */
  border-radius: 11.5% / 5.6%;
  box-shadow: 0 32px 80px rgba(31, 28, 24, 0.22);
}
.on-dark .device { box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45); }

/* Hero device — anchored to the hero's bottom edge, top ~60% visible */
.hero-device-wrap {
  position: relative;
  align-self: end;
  display: flex;
  justify-content: center;
}
.hero-device-clip {
  max-height: min(560px, 64vh);
  overflow: hidden;
  border-radius: 40px 40px 0 0;
}
.hero-device-clip .device {
  width: min(330px, 100%);
  border-radius: 11.5% / 5.6%;
  box-shadow: 0 -10px 80px rgba(0, 0, 0, 0.4);
}
/* The live Joggy bubble now floats over the hero device */
.hero-device-wrap .joggy-bubble-live {
  position: absolute;
  left: -8%;
  bottom: 56px;
  z-index: 3;
  max-width: 300px;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35));
}

/* ── Beat visuals that hold a screenshot instead of a CSS mockup ──
   The plate behind the device breaks the card-on-cream monotony. */
.beat-visual-shot { position: relative; display: flex; justify-content: center; align-items: center; padding: 36px 0; }
.beat-visual-shot::before {
  content: "";
  position: absolute;
  /* A wide tilted band the device pokes out of top and bottom —
     wider than the column on purpose, so the tilt is legible. */
  inset: 14% -6% 10% -6%;
  background: var(--dark);
  border-radius: 28px;
  transform: rotate(-1.6deg);
}
.beat-visual-shot.plate-green::before { background: var(--green); transform: rotate(1.4deg); }
.beat-visual-shot .device { position: relative; width: min(300px, 80%); }
/* Bleed the device past the plate's bottom edge */
.beat-visual-shot .device { margin-bottom: -20px; }
.beat-visual-shot { overflow: visible; margin-bottom: 20px; }

/* Asymmetric beats — 60/40 split, alternating, unequal by design */
.beat-wide {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 56px 0;
}
.beat-wide.flip { grid-template-columns: 1fr 1.25fr; }
.beat-wide.flip .beat-text { order: 2; }
.beat-wide.flip .beat-visual-shot { order: 1; }

/* ── Duo gallery (Pack + patches) on the dark band ── */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.duo-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.duo-item:nth-child(2) { transform: translateY(44px); }
.duo-item .device { width: min(290px, 82%); }
.duo-cap { margin-top: 26px; max-width: 34em; }
.duo-cap .mono-label { display: block; margin-bottom: 10px; }
.duo-cap h3 {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.5px; color: #fff; margin-bottom: 8px;
}
.duo-cap p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.6); }

/* Dark full-bleed band (screens duo + club chat) */
.band-dark { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.band-dark .section-head h2 { color: #fff; }
.band-dark .section-head p { color: rgba(255,255,255,0.6); }

/* ── Scroll race (easter egg) ──
   Joggy 🐢 is pinned to real scroll progress; Hoppy 🐇 sprints and naps.
   Fixed to the viewport bottom, non-interactive, fades in after the
   visitor has actually started reading. Hidden on small screens and
   under prefers-reduced-motion. */
.race-track {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.race-track.on { opacity: 1; }
.race-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  background: linear-gradient(transparent, rgba(27, 38, 24, 0.10));
}
.race-line {
  position: absolute;
  left: 16px; right: 16px; bottom: 11px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--border2) 0 10px, transparent 10px 18px);
}
.racer {
  position: absolute;
  bottom: 8px;
  left: 0;
  font-size: 19px;
  line-height: 1;
  will-change: transform;
}
.racer .flip { display: inline-block; transform: scaleX(-1); } /* emoji face left by default */
#racerTurtle { transition: transform 0.15s linear; }
#racerHare  { transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); }
.racer .zzz {
  position: absolute;
  top: -13px; left: 14px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.racer.napping .zzz { opacity: 1; }
.race-flag {
  position: absolute;
  right: 16px; bottom: 10px;
  font-size: 15px;
  opacity: 0.55;
}
.race-payoff {
  position: absolute;
  right: 44px; bottom: 30px;
  background: var(--dark);
  border: 1px solid var(--dark3);
  border-radius: 100px;
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-mid);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  white-space: nowrap;
}
.race-track.finished .race-payoff { opacity: 1; transform: none; }
@media (max-width: 640px) { .race-track { display: none; } }

/* ── Blog ── */
.page-head {
  background: var(--dark);
  color: #fff;
  padding: 72px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-head .mono-label { display: block; margin-bottom: 16px; color: rgba(255,255,255,0.4); }
.page-head h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 5vw, 54px); letter-spacing: -1.6px; line-height: 1.05;
}
.page-head h1 em { color: var(--rust); font-style: normal; }
.page-head .page-dek {
  margin-top: 18px; font-size: 17px; line-height: 1.6;
  color: rgba(255,255,255,0.62); max-width: 38em;
}

.post-list { max-width: 780px; padding: 64px 24px 96px; }

/* Category filter — same pill language as the app's week tabs */
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filter-chip {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 100px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-chip:hover { border-color: var(--rust); color: var(--rust); }
.filter-chip.active { background: var(--rust); border-color: var(--rust); color: #fff; }
.filter-empty {
  padding: 40px 0;
  font-size: 15px;
  color: var(--text3);
}
.post-card.filtered-out { display: none; }
.post-card {
  display: block;
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
  transition: transform 0.15s ease;
}
.post-card:hover { transform: translateX(6px); }
.post-card:hover .post-card-title { color: var(--rust); }
.post-kicker {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--green);
  display: block; margin-bottom: 10px;
}
.post-card-title {
  font-family: var(--display); font-weight: 700; font-size: 26px;
  letter-spacing: -0.7px; line-height: 1.15; color: var(--text);
  transition: color 0.15s ease;
}
.post-card-dek { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--text2); max-width: 56ch; }
.post-card-meta {
  margin-top: 14px; font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--text3);
}

/* Article pages */
.post { padding: 64px 0 80px; }
.post-wrap { max-width: 720px; }
.post-meta {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text3); margin-bottom: 18px;
}
.post-wrap h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 4.6vw, 46px); letter-spacing: -1.4px;
  line-height: 1.08; color: var(--text); margin-bottom: 18px;
}
.post-standfirst { font-size: 18.5px; line-height: 1.6; color: var(--text2); margin-bottom: 8px; }
.post-body { margin-top: 36px; }
.post-body h2 {
  font-family: var(--display); font-weight: 700; font-size: 26px;
  letter-spacing: -0.6px; color: var(--text); margin: 44px 0 14px;
}
.post-body h3 {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.3px; color: var(--text); margin: 32px 0 10px;
}
.post-body p { font-size: 16.5px; line-height: 1.75; color: var(--text2); margin-bottom: 18px; }
.post-body ul, .post-body ol { margin: 0 0 18px 22px; }
.post-body li { font-size: 16.5px; line-height: 1.7; color: var(--text2); margin-bottom: 9px; }
.post-body strong { color: var(--text); }
.post-body a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.post-body blockquote {
  border-left: 3px solid var(--rust);
  margin: 26px 0; padding: 4px 0 4px 20px;
  font-size: 17px; line-height: 1.65; color: var(--text);
}
.post-fact {
  background: var(--green-light);
  border: 1px solid rgba(78, 110, 60, 0.2);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 26px 0;
}
.post-fact .mono-label { display: block; margin-bottom: 8px; color: var(--green); }
.post-fact p { font-size: 15px; line-height: 1.65; color: var(--text2); margin: 0; }
.post-note {
  background: var(--rust-light);
  border: 1px solid rgba(217, 119, 87, 0.22);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 34px 0 0;
  font-size: 14px; line-height: 1.6; color: var(--rust-mid);
}
.post-endcta {
  margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.post-endcta p { font-size: 15px; color: var(--text2); max-width: 40ch; }

/* ── Manifesto ── */
.manifesto { padding: 72px 0 96px; }
.manifesto-wrap { max-width: 680px; }
.manifesto-wrap .post-meta { margin-bottom: 22px; }
.manifesto-wrap h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 5vw, 52px); letter-spacing: -1.6px;
  line-height: 1.06; color: var(--text); margin-bottom: 34px;
}
.manifesto-wrap h1 em { color: var(--rust); font-style: normal; }
.manifesto-wrap p { font-size: 17px; line-height: 1.8; color: var(--text2); margin-bottom: 20px; }
.manifesto-wrap p.pull {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(21px, 2.6vw, 26px); letter-spacing: -0.5px; line-height: 1.35;
  color: var(--text); margin: 36px 0;
}
.manifesto-wrap p.pull em { color: var(--rust); font-style: normal; }
.manifesto-wrap h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -0.8px;
  color: var(--text); margin: 48px 0 18px;
}
.manifesto-photo { width: min(320px, 100%); margin: 36px 0 8px; }
.manifesto-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.manifesto-photo figcaption { display: block; margin-top: 12px; line-height: 1.6; }
.manifesto-sig { margin-top: 44px; }
.manifesto-sig .sig-name { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--text); }
.manifesto-sig .sig-role {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text3); margin-top: 5px;
}

/* ── Final CTA (download flavour) ── */
.final-cta .cta-cluster { margin: 0 auto; align-items: center; }
.final-cta .cta-row { justify-content: center; }
.final-cta .qr-card { text-align: left; }

/* ── Phase 2 responsive ── */
@media (max-width: 860px) {
  .hero-device-wrap { align-self: center; margin-top: 8px; }
  .hero-device-clip { max-height: 400px; }
  .hero-device-wrap .joggy-bubble-live { left: 0; bottom: 28px; }
  .beat-wide, .beat-wide.flip { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
  /* On narrow screens the column IS the viewport; negative insets + the
     rotation were poking past 100vw and causing sideways scroll. */
  .beat-visual-shot::before { inset: 12% 2% 8% 2%; }
  .beat-wide.flip .beat-text { order: 0; }
  .beat-wide.flip .beat-visual-shot { order: 0; }
  .duo { grid-template-columns: 1fr; gap: 56px; }
  .duo-item:nth-child(2) { transform: none; }
  .post-endcta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   COOKIE CONSENT BANNER
   Shown by js/consent.js before any tracking script loads.
   Design tokens only — matches the app's card + button system.
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(31, 28, 24, 0.16);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease;
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); }

.cookie-banner-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.cookie-banner-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text3);
  margin-bottom: 5px;
}
.cookie-banner-text {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text2);
  max-width: 62ch;
}
/* rust as text fails AA on light backgrounds, so the inline link
   uses rust-mid, which passes. */
.cookie-banner-text a {
  color: var(--rust-mid);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-banner-actions .btn { white-space: nowrap; }

@media (max-width: 720px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; }
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px;
  }
  .cookie-banner-actions .btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; opacity: 1; transform: none; }
}