/* FollowStride — site styles.
   Tokens come from the "FollowStride Website" design handoff (Aug 2026): near-black
   base, one green accent, amber reserved for the injury-signal warning. The app is
   dark-only (`.preferredColorScheme(.dark)`), so the site is too — a light mode
   here would be a different product.

   The old palette was ported from Theme.swift (blue #2E7CF6 primary). The handoff
   moves the site to green #3ddc84 as the single accent; the app's blue survives
   only as the secondary hero glow. If the app's theme changes, change these. */
:root {
  --bg: #050607;
  --bg-alt: #0a0b0d;
  --card: #111317;

  --text: #f5f5f2;
  --text-2: rgba(245, 245, 242, 0.62);
  --text-3: rgba(245, 245, 242, 0.55);
  --text-4: rgba(245, 245, 242, 0.4);

  --accent: #3ddc84;
  --accent-hover: #5be3a0;
  --accent-ink: #04140a;      /* text on an accent fill */
  --amber: #e0a83e;           /* injury-signal warning only */
  --blue: #5b8def;            /* secondary hero glow only */

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --chip: rgba(255, 255, 255, 0.06);
  --chip-line: rgba(255, 255, 255, 0.1);

  --maxw: 1360px;
  --gutter: 56px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@keyframes float1 { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(10px, -18px) } }
@keyframes float2 { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-14px, 14px) } }
@keyframes pulseGlow { 0%, 100% { opacity: .35 } 50% { opacity: .65 } }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(0deg) } 50% { transform: translateY(-10px) rotate(2deg) } }
@keyframes dash { 0%, 100% { opacity: .4 } 50% { opacity: 1 } }

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 1200px; }
.wrap.tight { max-width: 900px; }

/* Anchor targets sit under the fixed nav otherwise. */
[id] { scroll-margin-top: 90px; }

/* ---------- nav ---------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  background: rgba(5, 6, 7, 0.7);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand img { width: 28px; height: 28px; border-radius: 7px; display: block; }
.brand span { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a { color: var(--text-2); font-size: 14px; }
.nav-links a:hover { color: var(--text); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 9px 18px; border-radius: 100px; white-space: nowrap;
  transition: filter .2s ease;
}
.btn:hover { color: var(--accent-ink); filter: brightness(1.08); }
.btn.lg { font-size: 15px; padding: 16px 30px; }
.btn.ghost {
  background: transparent; border: 1px solid var(--chip-line); color: var(--text);
}
.btn.ghost:hover { color: var(--text); border-color: var(--line-strong); }

/* ---------- hero ---------- */

.hero { position: relative; padding: 190px 0 120px; overflow: hidden; }
.hero-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; position: relative; z-index: 2;
}
.hero-copy { flex: 1; min-width: 420px; max-width: 560px; position: relative; z-index: 2; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 28px;
  border: 1px solid rgba(61, 220, 132, 0.35); border-radius: 100px;
  font-size: 12px; color: var(--accent);
}
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }

.hero h1 {
  font-size: 56px; line-height: 1.05; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 20px;
}
.hero h1 .accent { color: var(--accent); }
.hero .sub {
  font-size: 18px; line-height: 1.55; color: var(--text-2);
  max-width: 500px; margin-bottom: 24px;
}

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }

/* "Coming to the App Store" — a stated fact, not a control, so it isn't a button. */
.note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-4);
}
.note i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ---------- hero art ---------- */

.hero-art {
  flex: 1; min-width: 380px; height: 640px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.orb { position: absolute; border-radius: 50%; pointer-events: none; }
.orb.green {
  width: 340px; height: 340px; background: var(--accent);
  filter: blur(90px); opacity: .28; top: 40px; left: 20px;
  animation: pulseGlow 5s ease-in-out infinite;
}
.orb.blue {
  width: 220px; height: 220px; background: var(--blue);
  filter: blur(80px); opacity: .18; bottom: 60px; right: 10px;
  animation: pulseGlow 6s ease-in-out infinite reverse;
}
.tilt { transition: transform .25s ease-out; will-change: transform; }

.float-card {
  position: absolute; background: var(--card);
  border: 1px solid var(--chip-line); border-radius: 14px;
  padding: 12px 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.float-card .k { font-size: 11px; color: rgba(245, 245, 242, 0.45); }
.float-card .v { font-size: 16px; font-weight: 700; }
.float-card.one { top: 60px; right: 0; animation: float1 6s ease-in-out infinite; }
.float-card.two { bottom: 90px; left: -10px; animation: float2 7s ease-in-out infinite; }

/* ---------- iOS device frame ----------
   Proportions taken from the handoff's ios-frame component (402×874 natural).
   --fs scales the chrome so the same markup works at any frame width. */

.phone {
  position: relative; width: var(--pw); height: var(--ph);
  border-radius: calc(48px * var(--fs));
  overflow: hidden; background: #000;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.phone-island {
  position: absolute; z-index: 50; background: #000;
  top: calc(11px * var(--fs)); left: 50%; transform: translateX(-50%);
  width: calc(126px * var(--fs)); height: calc(37px * var(--fs));
  border-radius: calc(24px * var(--fs));
}
.phone-status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center;
  padding: calc(19px * var(--fs)) calc(24px * var(--fs));
}
.phone-status > div {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: calc(7px * var(--fs));
}
.phone-status .time {
  font-weight: 590; font-size: calc(17px * var(--fs));
  line-height: 1; color: #fff;
}
.phone-status svg { display: block; }
.phone-screen { position: absolute; inset: 0; }
.phone-home {
  position: absolute; bottom: calc(8px * var(--fs)); left: 50%;
  transform: translateX(-50%); z-index: 60; pointer-events: none;
  width: calc(139px * var(--fs)); height: calc(5px * var(--fs));
  border-radius: 100px; background: rgba(255, 255, 255, 0.7);
}

/* screen content */
.screen {
  height: 100%; background: var(--bg);
  display: flex; flex-direction: column;
}
.screen .greet { font-size: 15px; font-weight: 600; color: rgba(245, 245, 242, 0.5); }
.ring-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 0; background: var(--card);
  border: 1px solid var(--line); border-radius: 22px;
}
.ring {
  width: 118px; height: 118px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--accent) 0% 86%, rgba(255, 255, 255, 0.1) 86% 100%);
}
.ring > div {
  width: 92px; height: 92px; border-radius: 50%; background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring .n { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ring .l { font-size: 9px; color: var(--text-4); letter-spacing: 0.05em; }
.ring-card .verdict { font-size: 12px; color: var(--accent); font-weight: 600; }
.stat-row { display: flex; gap: 8px; }
.stat-row div {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px; text-align: center;
}
.stat-row .v { font-size: 15px; font-weight: 700; }
.stat-row .l { font-size: 8.5px; color: var(--text-4); }

.bubble-me {
  align-self: flex-end; background: var(--text); color: #111;
  border-radius: 16px 16px 4px 16px; padding: 10px 14px;
  font-size: 12.5px; max-width: 80%;
}
.bubble-ai {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5;
}
.metric-chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.metric-chips span {
  font-size: 10px; padding: 4px 8px; border-radius: 100px;
  background: var(--chip); color: var(--text-2);
}

/* ---------- sections ---------- */

.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.kicker {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 18px;
}
h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card .step { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.card .t { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.card .d { font-size: 14px; color: var(--text-3); line-height: 1.5; }
.cards.lift .card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-color: var(--line-strong);
}

.section-how { padding: 20px 0 100px; text-align: center; }
.section-how h2 { margin-bottom: 44px; }
.section-how .card { text-align: left; }

.section-diff { padding: 80px 0; text-align: center; }
.section-diff h2 { font-size: 42px; margin-bottom: 40px; }
.diff-row { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.diff-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 28px 36px; min-width: 220px;
}
.diff-card .mark {
  font-size: 44px; font-weight: 700; color: rgba(245, 245, 242, 0.25);
  animation: dash 2.4s ease-in-out infinite; line-height: 1;
}
.diff-card .l { font-size: 13px; color: rgba(245, 245, 242, 0.5); margin-top: 6px; }
.diff-row p {
  text-align: left; max-width: 380px; font-size: 15.5px;
  line-height: 1.6; color: var(--text-2);
}

.section-features { padding: 60px 0 100px; }
.section-features h2 { text-align: center; margin-bottom: 44px; }
.ficon {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px;
  background: rgba(61, 220, 132, 0.12);
  display: flex; align-items: center; justify-content: center;
}
.ficon.amber { background: rgba(224, 168, 62, 0.14); }
.ficon .arc {
  width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(var(--accent) 0% 70%, rgba(255, 255, 255, 0.15) 70% 100%);
}
.ficon .dots { display: flex; gap: 4px; }
.ficon .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: block; }
.ficon .dots i:nth-child(2) { opacity: .6 }
.ficon .dots i:nth-child(3) { opacity: .3 }
.ficon .bars { display: flex; align-items: flex-end; gap: 3px; }
.ficon .bars i { width: 5px; background: var(--accent); border-radius: 2px; display: block; }
.ficon .bars i:nth-child(1) { height: 10px; opacity: .5 }
.ficon .bars i:nth-child(2) { height: 16px; opacity: .75 }
.ficon .bars i:nth-child(3) { height: 22px }
.ficon .target {
  width: 22px; height: 22px; border: 3px solid var(--accent);
  border-radius: 50%; position: relative;
}
.ficon .target i {
  position: absolute; top: 5px; left: 5px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.ficon .tri {
  width: 0; height: 0; border-left: 11px solid transparent;
  border-right: 11px solid transparent; border-bottom: 19px solid var(--amber);
}
.ficon .meter {
  width: 32px; height: 12px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.15); overflow: hidden;
}
.ficon .meter i { display: block; width: 70%; height: 100%; background: var(--accent); }

.section-showcase {
  padding: 60px 0 110px;
  display: flex; align-items: center; gap: 60px; flex-wrap: wrap;
}
.showcase-art { flex: 1; min-width: 340px; display: flex; justify-content: center; }
.showcase-art > div { animation: drift 8s ease-in-out infinite; }
.showcase-copy { flex: 1; min-width: 340px; max-width: 480px; }
.showcase-copy h2 { font-size: 36px; margin-bottom: 20px; }
.showcase-copy p { font-size: 15.5px; line-height: 1.65; color: var(--text-2); }

.section-privacy { padding: 60px 0 110px; }
.section-privacy h2 { text-align: center; margin-bottom: 44px; }
.section-privacy .card .t { font-size: 16px; }
.section-privacy .more { text-align: center; margin-top: 30px; font-size: 15px; }

.section-cta { padding: 20px 0 140px; text-align: center; }
.cta-card {
  background: var(--card); border: 1px solid var(--chip-line);
  border-radius: 28px; padding: 64px 48px;
  position: relative; overflow: hidden;
}
.cta-card .glow {
  position: absolute; width: 280px; height: 280px; border-radius: 50%;
  background: var(--accent); filter: blur(100px); opacity: .22;
  top: -100px; right: -60px;
}
.cta-card h2 { font-size: 38px; margin-bottom: 16px; position: relative; z-index: 1; }
.cta-card p { font-size: 15.5px; color: var(--text-3); margin-bottom: 32px; position: relative; z-index: 1; }
.cta-card .btn { position: relative; z-index: 1; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 32px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  color: var(--text-4); font-size: 13px;
}
footer .mark { display: flex; align-items: center; gap: 8px; }
footer .mark img { width: 18px; height: 18px; border-radius: 5px; }
footer .links { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer .links a { color: var(--text-4); }
footer .links a:hover { color: var(--text-2); }

/* ---------- prose (privacy / support) ---------- */

.doc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter); border-bottom: 1px solid var(--line);
}
.doc-head .back { font-size: 14px; color: var(--text-2); }
.doc-head .back:hover { color: var(--text); }

.prose { max-width: 720px; margin: 0 auto; padding: 80px 40px 120px; }
.prose .kicker { margin-bottom: 10px; }
.prose h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.prose .updated { font-size: 13px; color: var(--text-4); margin-bottom: 44px; }
.prose h2 { font-size: 20px; font-weight: 600; margin: 40px 0 10px; }
.prose h3 { font-size: 16px; font-weight: 600; margin: 26px 0 8px; }
.prose p, .prose li { font-size: 15px; line-height: 1.7; color: rgba(245, 245, 242, 0.68); margin-bottom: 13px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul { padding-left: 22px; margin-bottom: 16px; }
.prose li::marker { color: var(--text-4); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose .disclaimer {
  padding-top: 16px; margin-top: 40px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-4);
}
.callout {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 14px; padding: 20px 22px; margin: 26px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .hero { padding: 150px 0 80px; }
  .hero h1 { font-size: 46px; }
  .hero-art { height: 560px; }
  .float-card.two { left: 0; }
}

@media (max-width: 900px) {
  .hero-copy, .hero-art { min-width: 100%; max-width: 100%; }
  .hero-art { height: 540px; margin-top: 40px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .section-showcase { gap: 40px; }
}

@media (max-width: 640px) {
  :root { --gutter: 22px; }
  .nav { padding: 14px var(--gutter); }
  .nav-links { gap: 18px; }
  .nav-links a.hide-sm { display: none; }
  .hero { padding: 120px 0 60px; }
  .hero h1 { font-size: 36px; }
  .hero .sub { font-size: 16px; }
  .btn-row .btn { flex: 1; text-align: center; }
  .hero-art { height: 470px; transform: scale(.82); }
  .cards { grid-template-columns: 1fr; }
  h2 { font-size: 27px; }
  .section-diff { padding: 50px 0; }
  .section-diff h2 { font-size: 30px; }
  .showcase-copy h2, .cta-card h2 { font-size: 27px; }
  .showcase-art { transform: scale(.85); }
  .cta-card { padding: 44px 26px; }
  .section-cta { padding: 0 0 90px; }
  .prose { padding: 50px 4px 90px; }
  .prose h1 { font-size: 28px; }
}

/* Motion is decorative here — none of it carries information. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb, .float-card, .showcase-art > div, .diff-card .mark { animation: none !important; }
  .tilt { transition: none; transform: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .btn { transition: none; }
}