/* Handles AI design system — see DESIGN.md */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Nunito:wght@800;900&display=swap");

:root {
  --canvas: #EDEDED; --surface: #FFFFFF; --ink: #0B0B0B; --ink-2: #5E5E5E; --ink-3: #9A9A9A; --line: #DCDCDC;
  --orange: #FF6A13; --orange-soft: #FFE6D6; --green: #22C55E;
  --display: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --body: "Geist", -apple-system, system-ui, sans-serif;
  --shadow-phone: 0 40px 80px -30px rgba(0,0,0,.35), 0 12px 24px -12px rgba(0,0,0,.18);
  --shadow-card: 0 10px 30px rgba(0,0,0,.07);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: var(--canvas); color: var(--ink); font: 500 17px/1.55 var(--body); letter-spacing: -.01em; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: -.04em; line-height: .98; }

/* App Store button */
.appstore { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 24px 12px 20px; transition: transform .15s; }
.appstore:active { transform: scale(.97); }
.appstore svg { width: 24px; height: 28px; fill: #fff; }
.appstore span { display: flex; flex-direction: column; font: 600 21px/1.05 var(--body); letter-spacing: -.02em; text-align: left; }
.appstore small { font-size: 11px; font-weight: 500; letter-spacing: 0; opacity: .85; }

/* Sections */
main { overflow: hidden; }
.hero { min-height: calc(100svh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 20px 28px; gap: clamp(8px, 1.6svh, 16px); }
.hero h1 { font-size: clamp(34px, min(6vw, 7svh), 76px); margin-top: clamp(6px, 1.5svh, 18px); max-width: 15ch; }
.hero .lead { font-size: clamp(16px, 2.2svh, 20px); }
.hero .micro { font-size: 13px; }
.lead { color: var(--ink-2); font-size: clamp(18px, 2vw, 21px); max-width: 36ch; }
.micro { color: var(--ink-3); font-size: 14px; }
.block { max-width: 1080px; margin: 0 auto; padding: 90px 20px; }
.block > h2, .center h2 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 36px; }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.center h2 { margin-bottom: 12px; }

/* Phone mockup: titanium band, black bezel, Dynamic Island, side buttons */
.phone { --w: 280px; width: var(--w); aspect-ratio: 9 / 19.5; border-radius: calc(var(--w) * .155); padding: calc(var(--w) * .04); flex: none; position: relative;
  background: linear-gradient(135deg, #a4a4aa 0%, #3c3c40 9%, #1d1d1f 28%, #2c2c2f 55%, #141416 78%, #78787d 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 50px 90px -35px rgba(0,0,0,.5), 0 25px 40px -25px rgba(0,0,0,.35); }
.phone::before { content: ""; position: absolute; inset: calc(var(--w) * .012); border-radius: calc(var(--w) * .145); background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.phone.big { --w: min(22.15svh, 277px); }
.screen { container-type: size; position: relative; z-index: 1; width: 100%; height: 100%; border-radius: calc(var(--w) * .118); overflow: hidden; background: #111; }
.screen img, .screen video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 36%); }
.phone .island { position: absolute; z-index: 5; top: 3.1%; left: 50%; transform: translateX(-50%); width: 30%; height: 3.5%; border-radius: 100px; background: #000; }
.phone .hw { position: absolute; width: calc(var(--w) * .012); min-width: 2px; background: linear-gradient(90deg, #2a2a2d, #6e6e73); border-radius: 2px; }
.phone .hw.action { left: calc(var(--w) * -.012); top: 17%; height: 4%; }
.phone .hw.vol-up { left: calc(var(--w) * -.012); top: 24%; height: 7.5%; }
.phone .hw.vol-down { left: calc(var(--w) * -.012); top: 33%; height: 7.5%; }
.phone .hw.power { right: calc(var(--w) * -.012); top: 27%; height: 11%; background: linear-gradient(270deg, #2a2a2d, #6e6e73); }

/* The app's live workout screen, drawn over real footage */
.hud { position: absolute; inset: 0; color: #fff; display: flex; flex-direction: column; padding: 19cqw 5cqw 6cqw; background: linear-gradient(rgba(0,0,0,.6), transparent 26%, transparent 62%, rgba(0,0,0,.7)); font-family: var(--body); }
.hud-top { display: flex; align-items: center; justify-content: space-between; }
.hud-x { width: 11cqw; height: 11cqw; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 4.3cqw; }
.hud-stat { text-align: center; line-height: 1; }
.hud-stat b { font: 900 7.5cqw var(--display); letter-spacing: -.02em; display: block; }
.hud-stat small, .hud-bottom small { font-size: 3cqw; font-weight: 700; letter-spacing: .06em; opacity: .7; }
.green { color: #4ADE80; }
.hud-pill { align-self: center; margin-top: 3.5cqw; display: flex; align-items: center; gap: 2cqw; white-space: nowrap; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); border-radius: 100px; padding: 1.8cqw 4cqw; font-size: 4cqw; font-weight: 700; color: #4ADE80; }
.hud-pill i { width: 2.5cqw; height: 2.5cqw; border-radius: 50%; background: #4ADE80; }
.hud-bar { height: 1.4cqw; border-radius: 4px; background: rgba(255,255,255,.25); margin-top: 3.5cqw; overflow: hidden; }
.hud-bar i { display: block; height: 100%; width: 30%; background: var(--orange); transition: width .3s linear; }
.hud-center { margin-top: auto; margin-bottom: auto; text-align: center; padding-top: 25cqw; }
.hud-call { font: 900 19cqw/1 var(--display); white-space: nowrap; letter-spacing: -.03em; text-shadow: 0 4px 18px rgba(0,0,0,.45); }
.hud-call.big-num { font-size: 26cqw; }
.hud-cue { font-size: 4.3cqw; font-weight: 600; margin-top: 2cqw; text-shadow: 0 2px 8px rgba(0,0,0,.6); padding: 0 3cqw; }
.hud-grade { display: inline-block; background: #16A34A; border-radius: 100px; padding: 1.4cqw 4.3cqw; font-size: 4.3cqw; font-weight: 700; margin-bottom: 3cqw; transition: opacity .3s; }
.hud-grade.miss { background: #DC2626; }
.hud-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.hud-bottom.one { grid-template-columns: 1fr; width: 50%; align-self: center; }
.hud-bottom div { background: rgba(0,0,0,.5); backdrop-filter: blur(8px); border-radius: 4cqw; padding: 2.5cqw 1.4cqw; text-align: center; line-height: 1.1; }
.hud-bottom b { font: 900 5.4cqw var(--display); display: block; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { background: var(--surface); border-radius: 28px; padding: 28px; box-shadow: var(--shadow-card); }
.step .n { width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font: 900 18px var(--display); margin-bottom: 16px; }
.step h3 { font-size: 26px; margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: 16px; }

/* Features */
.feature { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 72px; padding: 50px 0; }
.feature.flip { grid-template-columns: auto 1fr; }
.feature.flip .copy { order: 2; }
.feature .phone { justify-self: center; }
.kicker { display: inline-block; color: var(--orange); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.feature h2 { font-size: clamp(40px, 5vw, 64px); }
.feature p { color: var(--ink-2); font-size: 19px; margin-top: 16px; max-width: 34ch; }
.ticks { list-style: none; margin-top: 20px; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.ticks li::before { content: "✓"; width: 22px; height: 22px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.moves { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.moves span { background: var(--surface); border-radius: 100px; padding: 7px 14px; font-size: 14px; font-weight: 600; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 16px; margin-top: 28px; }
.plan { background: var(--surface); border-radius: 28px; padding: 28px; text-align: left; box-shadow: var(--shadow-card); position: relative; transition: transform .15s; }
.plan:hover { transform: translateY(-3px); }
.plan.best { outline: 3px solid var(--ink); }
.plan .price { font: 900 46px var(--display); letter-spacing: -.04em; margin: 6px 0 4px; }
.plan .price small { font: 600 16px var(--body); color: var(--ink-2); letter-spacing: 0; }
.plan p { color: var(--ink-2); font-size: 15px; }
.badge { position: absolute; top: -12px; right: 20px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 100px; }
.fine { color: var(--ink-3); font-size: 13px; max-width: 56ch; margin-top: 20px; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 760px; }
.faq details { background: var(--surface); border-radius: 20px; padding: 20px 24px; box-shadow: var(--shadow-card); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font: 900 22px var(--display); color: var(--ink-3); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); margin-top: 10px; }

/* Final CTA */
.final-card { background: var(--ink); color: #fff; border-radius: 36px; padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; overflow: hidden; }
.final-card .lead { color: #BDBDBD; margin: 14px 0 26px; }
.final-card h2 { font-size: clamp(40px, 5vw, 64px); }
.final-icon { width: 76px; height: 76px; border-radius: 18px; margin-bottom: 20px; }
.final-card .appstore { background: #fff; color: var(--ink); }
.final-card .appstore svg { fill: var(--ink); }
.final-card .phone { --w: 250px; margin-bottom: -120px; }

/* Activity toast */
.toast { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 14px; width: 340px; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,.06); border-radius: 22px; padding: 14px 18px 14px 14px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.22); transform: translateY(160%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.toast.show { transform: none; }
.toast img { width: 54px; height: 54px; border-radius: 14px; flex: none; }
.toast .chip { display: inline-block; background: #E8E8E8; border-radius: 8px; padding: 3px 9px; font-size: 13px; font-weight: 700; }
.toast .what { font-size: 15px; font-weight: 600; margin-top: 6px; line-height: 1.25; }
.toast .what b { color: var(--orange); }
.toast .when { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.demo-flag { position: fixed; right: 12px; bottom: 12px; z-index: 70; background: #111; color: #fff; font-size: 11px; padding: 6px 10px; border-radius: 8px; opacity: .7; }

/* Doc pages (support, privacy, terms) and SEO pages */
.doc { max-width: 760px; margin: 0 auto; padding: 60px 20px 40px; }
.doc h1 { font-size: clamp(40px, 6vw, 64px); margin-bottom: 16px; }
.doc h2 { font-size: 28px; margin: 36px 0 10px; letter-spacing: -.03em; }
.doc h3 { font-size: 21px; margin: 24px 0 8px; letter-spacing: -.02em; }
.doc p, .doc li { color: #333; }
.doc p + p { margin-top: 12px; }
.doc ul, .doc ol { padding-left: 22px; margin-top: 10px; display: grid; gap: 6px; }
.doc a { color: var(--orange); font-weight: 600; }

@media (max-width: 860px) {
  .phone.big { --w: 20.3svh; }
  .phone { --w: 250px; }
  .hero { min-height: calc(100svh - 58px); }
  .steps { grid-template-columns: 1fr; }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 36px; text-align: center; padding: 40px 0; }
  .feature.flip .copy { order: 0; }
  .feature p { margin-left: auto; margin-right: auto; }
  .ticks { justify-items: center; }
  .moves { justify-content: center; }
  .plans { grid-template-columns: 1fr; width: 100%; max-width: 340px; }
  .final-card { grid-template-columns: 1fr; padding: 36px 24px 0; text-align: center; justify-items: center; }
  .final-card .phone { margin-bottom: -60px; }
  .block { padding: 60px 18px; }
  .toast { left: 12px; right: 12px; width: auto; bottom: 12px; }
  .demo-flag { top: 70px; bottom: auto; }
}