/* ============ Orizo marketing site ============ */
:root {
  --bg: #0d0d0d;
  --bg-2: #131313;
  --surface: #1a1a1a;
  --surface-2: #242424;
  --outline: #333;
  --text: #f0f0f0;
  --text-dim: #aaa;
  --accent: #c8ff00;
  --accent-dim: #a0cc00;
  --danger: #ff5252;
  --warn: #ffb300;
  --radius: 16px;
  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; }
.accent { color: var(--accent); }
img { display: block; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.btn-primary {
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 24px rgba(200, 255, 0, .25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(200, 255, 0, .45); }
.btn-ghost {
  border: 1px solid var(--outline);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 9px 20px; font-size: 14px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .25s, backdrop-filter .25s;
}
.nav.scrolled { background: rgba(13,13,13,.8); backdrop-filter: blur(14px); border-bottom: 1px solid #1e1e1e; }
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 32px;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-family: var(--font-display); font-weight: 800; letter-spacing: 3px;
}
.nav-brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { color: var(--text-dim); text-decoration: none; font-size: 14px; transition: color .15s; }
.nav-links a:hover { color: var(--accent); }
.nav-login {
  color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600;
  margin-left: auto; transition: color .15s;
}
.nav-links + .nav-login { margin-left: 0; }
.nav-login:hover { color: var(--accent); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 24px 60px;
  overflow-x: clip; /* the decorative glow must not widen the mobile layout */
}
.hero-glow {
  position: absolute; top: -20%; right: -10%;
  width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(circle, rgba(200,255,0,.13) 0%, transparent 65%);
  pointer-events: none;
}
.hero-inner {
  max-width: 1180px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center;
}
.eyebrow {
  font-size: 12px; letter-spacing: 4px; color: var(--accent-dim);
  font-weight: 600; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(44px, 6.5vw, 84px); font-weight: 800; margin-bottom: 24px; }
.lede { font-size: 19px; color: var(--text-dim); max-width: 520px; margin-bottom: 34px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-web { font-size: 14px; color: var(--text-dim); margin-bottom: 40px; }
.hero-web a { color: var(--accent); text-decoration: none; }
.hero-web a:hover { text-decoration: underline; }
.hero-stats { display: flex; gap: 40px; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font-family: var(--font-display); font-size: 30px; color: var(--accent); }
.hero-stats span { font-size: 13px; color: var(--text-dim); }
.scroll-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 4px; color: #555; text-transform: uppercase;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---------- phone frame ---------- */
.phone {
  width: 290px; height: 600px;
  background: #050505;
  border: 3px solid #2b2b2b;
  border-radius: 42px;
  padding: 14px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(200,255,0,.08);
  margin: 0 auto;
}
.phone-lg { width: 310px; height: 640px; }
.phone-notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 24px; background: #050505; border-radius: 0 0 16px 16px;
  z-index: 5;
}
.screen {
  width: 100%; height: 100%;
  background: var(--bg);
  border-radius: 30px;
  padding: 40px 16px 16px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
}
/* real app screenshots inside a phone frame */
.screen:has(.screen-img) { padding: 0; }
.screen-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block; border-radius: 30px;
}

.hero-phone .phone { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(1.2deg); } 50% { transform: translateY(-14px) rotate(1.2deg); } }

/* screen widgets */
.scr-topbar { display: flex; justify-content: space-between; align-items: center; }
.scr-hello { font-size: 13px; font-weight: 600; }
.scr-level {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  background: var(--surface-2); border-radius: 999px; padding: 3px 9px; color: var(--accent);
}
.scr-pills { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pill {
  font-size: 9px; letter-spacing: 1px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--outline);
  padding: 4px 9px; border-radius: 999px; color: var(--text-dim);
}
.scr-card {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: 14px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.scr-card strong { font-size: 14px; font-family: var(--font-display); }
.scr-card-tag { font-size: 9px; letter-spacing: 1.5px; color: var(--text-dim); font-weight: 600; }
.scr-card-sub { font-size: 11px; color: var(--text-dim); }
.scr-card-accent { border-color: rgba(200,255,0,.5); box-shadow: 0 0 18px rgba(200,255,0,.08) inset; }
.scr-card-accent .scr-card-tag { color: var(--accent); }

/* readiness ring */
.ring-wrap { position: relative; width: 170px; margin: 4px auto; }
.ring-wrap-sm { width: 150px; }
.ring { width: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.ring-fg {
  fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .8s cubic-bezier(.22,1,.36,1), stroke .4s;
}
.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-num { font-family: var(--font-display); font-size: 40px; font-weight: 800; }
.ring-label { font-size: 9px; letter-spacing: 3px; color: var(--text-dim); font-weight: 600; }

/* ---------- strip ---------- */
.strip {
  border-top: 1px solid #1c1c1c; border-bottom: 1px solid #1c1c1c;
  padding: 22px 24px; text-align: center; color: var(--text-dim); font-size: 14px;
  background: var(--bg-2);
}
.strip strong { color: var(--text); font-weight: 600; }

/* ---------- section scaffolding ---------- */
section { position: relative; }
.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; padding: 0 24px; }
.section-head h2 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 800; }
.section-sub { color: var(--text-dim); font-size: 17px; margin-top: 18px; }

/* ---------- readiness demo ---------- */
.readiness { padding: 110px 24px; }
.demo {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center;
}
.demo-controls { display: flex; flex-direction: column; gap: 30px; }
.demo-slider-head { display: flex; justify-content: space-between; margin-bottom: 10px; }
.demo-slider label { font-weight: 600; font-size: 15px; }
.demo-slider output {
  font-family: var(--font-display); font-weight: 700; color: var(--accent);
  min-width: 64px; text-align: right;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--fill, 50%), var(--surface-2) var(--fill, 50%));
  outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px rgba(200,255,0,.6);
  border: 3px solid #0d0d0d;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid #0d0d0d;
  box-shadow: 0 0 16px rgba(200,255,0,.6);
}
.demo-presets { display: flex; gap: 10px; flex-wrap: wrap; }
.demo-presets button {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--outline); border-radius: 999px;
  padding: 9px 16px; font-size: 13px; font-family: var(--font-body); cursor: pointer;
  transition: border-color .15s, color .15s, transform .1s;
}
.demo-presets button:hover { border-color: var(--accent); color: var(--accent); }
.demo-presets button:active { transform: scale(.96); }

.screen-demo { justify-content: flex-start; }
.demo-workout { transition: transform .25s ease, opacity .25s ease; }
.demo-workout.swap { transform: translateY(8px); opacity: 0; }
.demo-week { display: flex; gap: 5px; justify-content: center; margin-top: 4px; }
.demo-week span {
  width: 32px; height: 44px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--outline);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 8px; letter-spacing: .5px; color: var(--text-dim); gap: 3px;
  transition: all .3s ease;
}
.demo-week span i { font-style: normal; font-size: 13px; }
.demo-week span.today { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px rgba(200,255,0,.2); }
.demo-week span.moved { animation: pulse .5s ease; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.demo-xp { margin-top: 6px; }
.demo-note { font-size: 11px; color: var(--text-dim); text-align: center; margin-top: 10px; padding: 0 4px; min-height: 32px; }

/* zone colors */
.zone-push .ring-fg { stroke: var(--accent); }
.zone-easy .ring-fg { stroke: #7ec8ff; }
.zone-rest .ring-fg { stroke: var(--danger); }
.zone-easy .demo-workout { border-color: rgba(126,200,255,.5); }
.zone-easy .demo-workout .scr-card-tag { color: #7ec8ff; }
.zone-rest .demo-workout { border-color: rgba(255,82,82,.55); }
.zone-rest .demo-workout .scr-card-tag { color: var(--danger); }

/* ---------- journey ---------- */
.journey { padding: 110px 0 60px; background: var(--bg-2); border-top: 1px solid #1c1c1c; }
.journey-body {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; gap: 80px; padding: 0 24px;
}
.journey-sticky { position: sticky; top: 90px; padding-bottom: 40px; }
.jscreen { display: none; }
.jscreen.active { display: flex; animation: screenIn .45s ease; }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.journey-steps { display: flex; flex-direction: column; gap: 38vh; padding: 12vh 0 30vh; }
.jstep { max-width: 420px; opacity: .3; transition: opacity .4s; }
.jstep.active { opacity: 1; }
.jstep-num {
  font-family: var(--font-display); color: var(--accent);
  font-size: 14px; font-weight: 700; letter-spacing: 2px;
}
.jstep h3 { font-size: 28px; margin: 10px 0 14px; }
.jstep p { color: var(--text-dim); }

/* journey screen extras */
.scr-map {
  background: #101a10;
  border: 1px solid var(--outline); border-radius: 14px;
  height: 150px; overflow: hidden;
}
.scr-map svg { width: 100%; height: 100%; }
.map-route {
  fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: draw 3s ease forwards;
}
.jscreen.active .map-route { animation: draw 3s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.map-dot { fill: var(--accent); }
.scr-run-stats { display: flex; justify-content: space-around; padding: 8px 0; }
.scr-run-stats div { text-align: center; }
.scr-run-stats strong { font-family: var(--font-display); font-size: 24px; display: block; }
.scr-run-stats span { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }

.lg-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: 12px; padding: 10px 12px; font-size: 13px;
}
.lg-row span { font-family: var(--font-display); font-weight: 700; width: 18px; color: var(--text-dim); }
.lg-row em { font-style: normal; flex: 1; }
.lg-row strong { font-size: 12px; color: var(--text-dim); }
.lg-me { border-color: rgba(200,255,0,.5); }
.lg-me em, .lg-me strong { color: var(--accent); }
.lg-up { border-color: var(--outline); }

/* ---------- feature grid ---------- */
.grid-section { padding: 110px 24px; }
.feature-grid {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.fcard {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--radius); padding: 26px;
  transition: border-color .2s, transform .2s;
}
.fcard:hover { border-color: rgba(200,255,0,.45); transform: translateY(-4px); }
.fcard h3 { font-size: 18px; margin-bottom: 10px; }
.fcard p { color: var(--text-dim); font-size: 14px; }
.fcard-wide { grid-column: span 2; }
.feature-grid-4 { grid-template-columns: repeat(2, 1fr); max-width: 880px; }
.feature-grid-4 .fcard { padding: 30px; }
.feature-grid-4 h3 { font-size: 20px; }
.feature-grid-4 p { font-size: 14.5px; }

/* ---------- training plans ---------- */
.plans { padding: 110px 24px; background: var(--bg-2); border-top: 1px solid #1c1c1c; }
.plan-cards {
  max-width: 1080px; margin: 0 auto 48px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch;
}
.plan-card {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--radius); padding: 30px;
  display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.plan-card:hover { transform: translateY(-4px); border-color: rgba(200,255,0,.35); }
.plan-card-featured {
  border-color: rgba(200,255,0,.55);
  box-shadow: 0 0 40px rgba(200,255,0,.07);
}
.plan-badge {
  align-self: flex-start;
  font-size: 10px; letter-spacing: 2px; font-weight: 700;
  color: var(--accent); background: rgba(200,255,0,.08);
  border: 1px solid rgba(200,255,0,.3);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
}
.plan-card h3 { font-size: 24px; margin-bottom: 12px; }
.plan-card > p { color: var(--text-dim); font-size: 14px; margin-bottom: 18px; }
.plan-card ul { list-style: none; margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.plan-card li {
  font-size: 13px; color: var(--text-dim); padding-left: 22px; position: relative;
}
.plan-card li::before { content: '⚡'; position: absolute; left: 0; font-size: 11px; }
.plan-engine { max-width: 1080px; margin: 0 auto; text-align: center; }
.plan-engine h3 { font-size: 24px; margin-bottom: 28px; }
.engine-points {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left;
}
.engine-points > div {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.engine-points strong { font-family: var(--font-display); font-size: 15px; }
.engine-points span { font-size: 13px; color: var(--text-dim); }

/* ---------- watch sync ---------- */
.sync { padding: 110px 24px; }
.sync-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center;
}
.sync-copy h2 { font-size: clamp(32px, 4.5vw, 52px); font-weight: 800; }
.sync-list { list-style: none; margin: 26px 0; display: flex; flex-direction: column; gap: 12px; }
.sync-list li { color: var(--text-dim); font-size: 15px; padding-left: 26px; position: relative; }
.sync-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.sync-brands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sync-brands span {
  font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--outline);
  padding: 7px 15px; border-radius: 999px;
}
.sync-fine { font-size: 12px; color: #666; margin-top: 12px; }
.sync-visual { display: flex; flex-direction: column; gap: 16px; }
.backfill-card {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.backfill-card strong { font-family: var(--font-display); font-size: 17px; }
.backfill-card-done { border-color: rgba(200,255,0,.45); transform: translateX(24px); }
.backfill-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.backfill-bar i {
  display: block; height: 100%; width: 0%;
  background: var(--accent); border-radius: 999px;
  transition: width 2.2s cubic-bezier(.22,1,.36,1);
}

/* ---------- fair play / leagues ---------- */
.fairplay { padding: 110px 24px; background: var(--bg-2); border-top: 1px solid #1c1c1c; }
.ladder {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin: 0 auto 48px; max-width: 900px;
}
.ladder-tier {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: 14px; padding: 16px 26px; text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-display);
}
.ladder-tier span { font-size: 22px; }
.ladder-tier strong { font-size: 14px; letter-spacing: 1px; }
.ladder-top { border-color: var(--accent); box-shadow: 0 0 30px rgba(200,255,0,.15); }
.ladder-top strong { color: var(--accent); }
.ladder-arrow { color: #555; font-size: 18px; }
.fair-points {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}

/* ---------- principles ---------- */
.principles { padding: 110px 24px; }
.principle-rows { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.principle {
  background: var(--surface); border: 1px solid var(--outline);
  border-left: 3px solid var(--accent);
  border-radius: 14px; padding: 24px 28px;
}
.principle strong { font-family: var(--font-display); font-size: 18px; display: block; margin-bottom: 8px; }
.principle p { color: var(--text-dim); font-size: 14px; }

/* ---------- how it works ---------- */
.howto { padding: 110px 24px; background: var(--bg-2); border-top: 1px solid #1c1c1c; }
.steps-row {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.step {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--radius); padding: 26px; position: relative;
}
.step-n {
  font-family: var(--font-display); font-weight: 800; font-size: 40px;
  color: var(--accent); opacity: .9; display: block; margin-bottom: 10px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--text-dim); font-size: 14px; }

/* ---------- FAQ ---------- */
.faq { padding: 110px 24px; }
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-list details {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: 14px; overflow: hidden;
  transition: border-color .2s;
}
.faq-list details[open] { border-color: rgba(200,255,0,.4); }
.faq-list summary {
  cursor: pointer; list-style: none;
  padding: 20px 24px; font-weight: 600; font-family: var(--font-display); font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--accent); font-size: 22px; flex-shrink: 0; }
.faq-list details[open] summary::after { content: '–'; }
.faq-list details p { padding: 0 24px 22px; color: var(--text-dim); font-size: 14.5px; }

/* ---------- CTA ---------- */
.cta {
  padding: 130px 24px; text-align: center; overflow: hidden;
  border-top: 1px solid #1c1c1c;
}
.cta-glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(200,255,0,.12) 0%, transparent 65%);
  pointer-events: none;
}
.cta-logo { width: 84px; height: 84px; margin: 0 auto 28px; border-radius: 22px; }
.cta h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; margin-bottom: 18px; }
.cta p { color: var(--text-dim); margin-bottom: 36px; }
.cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid #1c1c1c; padding: 28px 24px; }
.footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  color: #666; font-size: 13px;
}
.footer nav { display: flex; gap: 22px; }
.footer a { color: #666; text-decoration: none; }
.footer a:hover { color: var(--accent); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-copy .lede { margin-left: auto; margin-right: auto; }
  .hero-ctas, .hero-stats { justify-content: center; }
  .hero-phone { order: -1; }
  .phone { width: 250px; height: 520px; }
  .demo { grid-template-columns: 1fr; }
  .demo-phone { order: -1; }
  /* Journey on mobile: the phone pins under the nav and keeps swapping
     screens while the steps scroll through the space beneath it (the old
     rules parked the phone above the steps, so the swap happened far
     off-screen and the section read as static text). app.js narrows the
     observer band to the visible strip below the phone at this breakpoint. */
  .journey-body { display: block; }
  .journey-phone-col {
    position: sticky; top: 54px; z-index: 5;
    display: flex; justify-content: center;
    padding: 6px 0 18px;
    background: linear-gradient(to bottom, var(--bg-2) 86%, rgba(19, 19, 19, 0));
  }
  .journey-sticky { position: static; top: auto; padding-bottom: 0; }
  /* scale with the screen: a fixed 372px phone left a dead void between it
     and the step text on tall phones */
  .journey-sticky .phone-lg {
    height: min(48vh, 480px); width: auto; aspect-ratio: 310 / 640;
    padding: 10px; border-radius: 34px;
  }
  .journey-sticky .phone-lg .screen { border-radius: 24px; padding-top: 32px; }
  .journey-sticky .phone-lg .phone-notch { width: 84px; height: 18px; top: 10px; }
  .journey-steps { gap: 26vh; padding: 8vh 0 18vh; }
  .jstep { max-width: none; text-align: center; padding: 0 4px; }
  .jstep h3 { font-size: 23px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .fcard-wide { grid-column: span 2; }
  .plan-cards { grid-template-columns: 1fr; }
  .engine-points, .fair-points, .steps-row { grid-template-columns: 1fr 1fr; }
  .sync-inner { grid-template-columns: 1fr; gap: 40px; }
  .backfill-card-done { transform: none; }
  .ladder { gap: 8px; }
  .ladder-arrow { display: none; }
  .nav-links { display: none; }
  .nav-login, .nav-links + .nav-login { margin-left: auto; }
  /* brand + login + CTA must genuinely fit 360dp — an overflowing nav made
     Chrome lay the whole page out wider than the viewport (pinch-zoom-out) */
  .nav-inner { padding: 12px 14px; gap: 14px; }
  .nav-brand { letter-spacing: 2px; font-size: 15px; }
  .nav-brand img { width: 30px; height: 30px; }
  .nav .btn-sm { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 520px) {
  .feature-grid { grid-template-columns: 1fr; }
  .fcard-wide { grid-column: span 1; }
  .hero-stats { gap: 24px; }
  .engine-points, .fair-points, .steps-row { grid-template-columns: 1fr; }
}

/* ---------- legal pages (privacy / terms) ---------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 24px 80px;
}
.legal h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin-bottom: 8px;
}
.legal .legal-updated {
  color: var(--text-dim);
  font-size: .9rem;
  margin-bottom: 40px;
}
.legal h2 {
  font-size: 1.35rem;
  margin: 44px 0 14px;
  color: var(--accent);
}
.legal h3 {
  font-size: 1.05rem;
  margin: 26px 0 10px;
}
.legal p, .legal li {
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 12px;
}
.legal li { margin-bottom: 8px; }
.legal ul { padding-left: 22px; margin-bottom: 16px; }
.legal strong { color: var(--text); }
.legal a { color: var(--accent); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal .legal-card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 18px 0;
}