@font-face {
  font-family: Manrope;
  src: url('/assets/Manrope-400.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('/assets/Manrope-500.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('/assets/Manrope-600.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('/assets/Manrope-700.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('/assets/Manrope-800.ttf') format('truetype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #141c2b;
  --surface: #202c40;
  --soft: #2b3a52;
  --disabled: #2b3546;
  --text: #f5f2e9;
  --muted: #b9c4d5;
  --amber: #f4b85b;
  --progress: #a2c8f4;
  --border: #394a64;
  --control: #7086a6;
  --section-gap: 48px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; font-family: Manrope, sans-serif; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
a:focus-visible { outline: 3px solid var(--progress); outline-offset: 6px; border-radius: 4px; }
section[id] { scroll-margin-top: 32px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 12px 16px; background: var(--amber); color: var(--bg); font-weight: 700; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.page-shell { max-width: 1440px; margin-inline: auto; padding: 48px; display: flex; flex-direction: column; gap: var(--section-gap); }
.site-header { display: flex; align-items: center; gap: 24px; min-height: 36px; }
.wordmark { font-size: 28px; line-height: 36px; font-weight: 700; margin-right: auto; }
.desktop-nav { display: flex; gap: 24px; }
.desktop-nav a { width: 120px; font-size: 14px; line-height: 20px; font-weight: 600; transition: color 160ms ease; }
.desktop-nav a:hover, .mobile-nav:hover, .footer-wordmark:hover { color: var(--amber); }
.mobile-nav { display: none; }
main { display: flex; flex-direction: column; gap: var(--section-gap); }
main:focus { outline: none; }
.hero, .feature-row { display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 656fr); gap: 48px; }
.hero { align-items: start; }
.copy-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.hero-message { padding-top: 32px; }
.eyebrow { font-size: 12px; line-height: 18px; font-weight: 500; min-height: 20px; color: var(--amber); }
h1 { font-size: 64px; line-height: 72px; font-weight: 800; letter-spacing: 0; }
h2 { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: 0; }
.body-copy { font-size: 20px; line-height: 28px; color: var(--muted); }
.hero-description, .launch-status { max-width: 590px; }
.primary-link { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 280px; max-width: 100%; padding: 12px; border-radius: 12px; background: var(--amber); color: var(--bg); font-size: 14px; line-height: 20px; font-weight: 600; transition: background 160ms ease, transform 160ms ease; }
.primary-link:hover { background: #ffd08a; }
.primary-link:active { transform: translateY(1px); }
.launch-status { font-size: 14px; line-height: 20px; color: var(--muted); }
.hero-stage { position: relative; min-width: 0; height: 724px; padding-left: 24px; }
.hero-stage-caption { display: none; }
.tracker-preview { --chart-unit: 0.885714px; width: 350px; max-width: 100%; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; display: flex; flex-direction: column; gap: 12px; }
.tracker-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tracker-heading p { font-size: 20px; line-height: 28px; font-weight: 700; }
.tracker-heading span { font-size: 12px; line-height: 18px; color: var(--muted); padding-top: 1px; white-space: nowrap; }
.demo-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-tab { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px; border: 1px solid var(--control); border-radius: 12px; font-size: 14px; line-height: 20px; font-weight: 600; }
.demo-tab--selected { background: var(--amber); color: var(--bg); border-color: var(--amber); }
.steps-chart { --chart-unit: 1.371428px; width: 480px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: calc(12 * var(--chart-unit)); padding: calc(20 * var(--chart-unit)); border-radius: calc(20 * var(--chart-unit)); background: var(--surface); }
.steps-chart--day { --chart-unit: 0.885714px; width: 100%; }
.chart-heading { font-size: calc(20 * var(--chart-unit)); line-height: calc(28 * var(--chart-unit)); font-weight: 700; }
.chart-total { color: var(--amber); font-size: calc(28 * var(--chart-unit)); line-height: calc(36 * var(--chart-unit)); font-weight: 700; }
.steps-chart--day .chart-total { font-size: calc(35.43 * var(--chart-unit)); line-height: calc(42.514 * var(--chart-unit)); }
.chart-period, .chart-description { color: var(--muted); font-size: calc(12 * var(--chart-unit)); line-height: calc(18 * var(--chart-unit)); font-weight: 500; }
.chart-bars { height: calc(104 * var(--chart-unit)); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: calc(8 * var(--chart-unit)); }
.bar { display: block; background: var(--progress); border-radius: calc(8 * var(--chart-unit)); }
.bar--1 { height: 38.1818%; }
.bar--2 { height: 65.4545%; }
.bar--3 { height: 80%; }
.bar--4 { height: 49.0909%; }
.bar--5 { height: 93.6364%; }
.bar--6 { height: 81.8182%; }
.bar--7 { height: 58.1818%; }
.steps-chart--day .bar--7 { background: var(--amber); }
.chart-data { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: calc(12 * var(--chart-unit)); line-height: calc(18 * var(--chart-unit)); font-weight: 500; text-align: center; }
.chart-data th { font-weight: 500; color: var(--muted); padding: 0; }
.chart-data td { padding: calc(12 * var(--chart-unit)) 0 0; }
.steps-chart--weekly { min-height: 493.714px; }
.private-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.private-metrics > div { padding: 12px; border-radius: 20px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.private-metrics dt { font-size: 12px; line-height: 20px; font-weight: 500; color: var(--muted); }
.private-metrics dd { font-size: 20px; line-height: 28px; font-weight: 700; white-space: nowrap; }
.demo-label { font-size: 12px; line-height: 18px; min-height: 20px; font-weight: 500; color: var(--muted); }
.race-preview { --race-unit: 1.086956px; --row-unit: 1.33282px; width: 500px; max-width: 100%; min-width: 0; padding: calc(24 * var(--race-unit)); border: 1px solid var(--border); border-radius: calc(20 * var(--race-unit)); background: var(--surface); display: flex; flex-direction: column; gap: calc(16 * var(--race-unit)); }
.race-eyebrow, .race-caption { font-size: calc(12 * var(--race-unit)); line-height: calc(18 * var(--race-unit)); min-height: calc(20 * var(--race-unit)); font-weight: 500; color: var(--muted); }
.race-eyebrow { color: var(--progress); }
.race-title { font-size: calc(20 * var(--race-unit)); line-height: calc(28 * var(--race-unit)); font-weight: 700; }
.race-period { font-size: calc(14 * var(--race-unit)); line-height: calc(20 * var(--race-unit)); color: var(--muted); }
.ranking-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: calc(16 * var(--race-unit)); }
.ranking-list li { min-height: calc(64 * var(--row-unit)); display: flex; align-items: center; gap: calc(12 * var(--row-unit)); padding: calc(12 * var(--row-unit)); border-radius: calc(12 * var(--row-unit)); }
.rank { flex: 0 0 calc(20 * var(--row-unit)); font-size: calc(14 * var(--row-unit)); line-height: calc(20 * var(--row-unit)); font-weight: 600; color: var(--muted); }
.rank-avatar { flex: 0 0 calc(32 * var(--row-unit)); height: calc(32 * var(--row-unit)); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--disabled); font-size: calc(12 * var(--row-unit)); line-height: calc(18 * var(--row-unit)); font-weight: 500; }
.rank-identity { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.rank-identity strong, .rank-value { font-size: calc(14 * var(--row-unit)); line-height: calc(20 * var(--row-unit)); font-weight: 600; }
.rank-identity > span { font-size: calc(12 * var(--row-unit)); line-height: calc(18 * var(--row-unit)); font-weight: 500; color: var(--muted); white-space: nowrap; }
.rank-value { flex: 0 0 calc(72 * var(--row-unit)); white-space: nowrap; }
.ranking-current { background: var(--soft); }
.race-preview--mini { --race-unit: 0.630434px; --row-unit: 0.773026px; position: absolute; left: 51.524%; top: 415px; width: 290px; }
.product-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-block: 24px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--muted); }
.feature-row { align-items: center; }
.weekly-preview { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.weekly-preview figcaption { width: 480px; max-width: 100%; }
.race-section { grid-template-columns: minmax(0, 646fr) minmax(0, 500fr); padding: 32px; border-radius: 20px; background: var(--surface); }
.participation-model { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--muted); }
.feed-preview { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.feed-preview figcaption { width: 420px; max-width: 100%; }
.feed-post { --post-unit: 0.76923px; width: 300px; max-width: 100%; background: var(--surface); }
.post-author { display: flex; align-items: center; gap: calc(12 * var(--post-unit)); padding: calc(12 * var(--post-unit)) calc(16 * var(--post-unit)); height: calc(64 * var(--post-unit)); }
.post-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 calc(32 * var(--post-unit)); height: calc(32 * var(--post-unit)); border-radius: 50%; background: var(--soft); color: var(--amber); font-size: calc(12 * var(--post-unit)); line-height: calc(18 * var(--post-unit)); font-weight: 500; }
.post-identity { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.post-identity strong { font-size: calc(14 * var(--post-unit)); line-height: calc(20 * var(--post-unit)); font-weight: 600; }
.post-identity > span { color: var(--muted); font-size: calc(12 * var(--post-unit)); line-height: calc(18 * var(--post-unit)); font-weight: 500; }
.post-action { flex: 0 0 calc(48 * var(--post-unit)); width: calc(48 * var(--post-unit)); height: calc(48 * var(--post-unit)); display: flex; align-items: center; justify-content: center; }
.post-icon { display: block; width: 15.3846px; height: 15.3846px; transform: scale(var(--post-icon-scale, 1)); }
.post-icon img { width: 15.3846px; height: 15.3846px; max-width: none; }
.post-photo { width: 100%; height: auto; aspect-ratio: 390 / 520; object-fit: contain; }
.post-reactions { display: flex; align-items: center; height: calc(48 * var(--post-unit)); padding-inline: calc(8 * var(--post-unit)) calc(16 * var(--post-unit)); font-size: calc(14 * var(--post-unit)); line-height: calc(20 * var(--post-unit)); font-weight: 600; }
.post-caption { padding: 0 calc(16 * var(--post-unit)) calc(12 * var(--post-unit)); font-size: calc(16 * var(--post-unit)); line-height: calc(24 * var(--post-unit)); }
.privacy-note { padding: 32px; border-radius: 20px; background: var(--soft); }
.privacy-note .eyebrow { color: var(--progress); }
.privacy-note h2 { font-size: 28px; line-height: 36px; }
.faq { display: grid; grid-template-columns: minmax(0, 430fr) minmax(0, 866fr); gap: 48px; }
.faq-answers { display: flex; flex-direction: column; gap: 24px; }
.faq-answers > div { display: flex; flex-direction: column; gap: 12px; }
.faq h3 { font-size: 20px; line-height: 28px; font-weight: 700; }
.faq-answers p { font-size: 16px; line-height: 24px; color: var(--muted); }
.store-status { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 14px; line-height: 20px; font-weight: 600; }
.site-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-wordmark { font-size: 20px; line-height: 28px; font-weight: 700; }
.legal-labels { font-size: 14px; line-height: 20px; color: var(--muted); }
.copyright { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--muted); min-height: 20px; }
@media (max-width: 1199px) {
  .page-shell { padding: 40px; }
  h1 { font-size: 52px; line-height: 60px; }
  h2 { font-size: 34px; line-height: 42px; }
  .hero, .feature-row { gap: 32px; }
  .hero-stage { height: 700px; padding-left: 0; }
  .race-preview--mini { left: auto; right: 0; top: 400px; }
  .body-copy { font-size: 18px; line-height: 26px; }
  .steps-chart--weekly { --chart-unit: 1.1px; min-height: 410px; }
  .race-section { padding: 24px; }
  .race-preview:not(.race-preview--mini) { --race-unit: 1px; --row-unit: 0.95px; padding: 16px; }
  .desktop-nav a { width: 84px; }
}
@media (max-width: 899px) {
  .page-shell { padding: 32px; }
  .site-header { margin-bottom: 0; }
  .hero, .feature-row, .faq { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero { gap: 32px; }
  .hero-message { padding-top: 0; }
  h1 { font-size: 48px; line-height: 56px; }
  .hero-stage { height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding: 0; }
  .race-preview--mini { display: none; }
  .hero-stage-caption { display: block; font-size: 12px; line-height: 18px; min-height: 20px; font-weight: 500; color: var(--muted); }
  .weekly-preview, .feed-preview { align-items: flex-start; }
  .weekly-preview figcaption, .feed-preview figcaption { width: auto; }
  .steps-chart--weekly { --chart-unit: 1.371428px; min-height: 493.714px; }
  .race-section { padding: 0; background: transparent; gap: 24px; }
  .race-preview:not(.race-preview--mini) { width: 500px; --race-unit: 1.086956px; --row-unit: 1.33282px; padding: calc(24 * var(--race-unit)); }
  .feed-post { --post-unit: 1px; --post-icon-scale: 1.3; width: 390px; }
}
@media (max-width: 599px) {
  .page-shell { padding: 24px; }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; width: 108px; font-size: 12px; line-height: 18px; font-weight: 500; }
  .wordmark { font-size: 28px; line-height: 36px; }
  h1 { font-size: 40px; line-height: 48px; font-weight: 700; }
  h2 { font-size: 28px; line-height: 36px; }
  .body-copy { font-size: 16px; line-height: 24px; }
  .primary-link { width: 100%; }
  .tracker-preview { width: 100%; max-width: 350px; padding: 19.543px; gap: 11.726px; border-radius: 19.543px; }
  .tracker-heading p { font-size: 19.543px; line-height: 27.36px; }
  .tracker-heading span { font-size: 11.726px; line-height: 17.589px; }
  .demo-tabs { gap: 7.817px; }
  .demo-tab { min-height: 42.994px; font-size: 13.68px; line-height: 19.543px; }
  .steps-chart--day { --chart-unit: 0.86547px; }
  .private-metrics { gap: 15.634px; }
  .private-metrics > div { padding: 11.726px; border-radius: 19.543px; gap: 7.817px; }
  .private-metrics dt { font-size: 11.726px; line-height: 19.543px; }
  .private-metrics dd { font-size: 19.543px; line-height: 27.36px; }
  .product-pillars { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .steps-chart--weekly { --chart-unit: 0.977142px; width: 100%; max-width: 350px; min-height: 351.771px; }
  .race-preview:not(.race-preview--mini) { --race-unit: 1px; --row-unit: 0.92262px; padding: 16px; width: 100%; max-width: 350px; }
  .rank-value { flex-basis: 60px; }
  .feed-post { --post-unit: 0.876923px; --post-icon-scale: 1.14; width: 100%; max-width: 350px; }
  .privacy-note { padding: 24px; }
  .privacy-note h2 { font-size: 20px; line-height: 28px; }
  .faq { gap: 48px; }
}
@media (max-width: 359px) {
  .mobile-nav { width: auto; }
  .site-header { gap: 16px; }
  h1 { font-size: 35px; line-height: 43px; }
  .tracker-preview { padding: 14px; }
  .private-metrics { gap: 8px; }
  .private-metrics > div { padding: 10px; }
  .private-metrics dd { font-size: 16px; line-height: 24px; }
  .steps-chart--day { padding-inline: 8px; }
  .chart-data { font-size: 10px; }
  .steps-chart--weekly { --chart-unit: 0.85px; min-height: 322px; padding: 17px; }
  .race-preview:not(.race-preview--mini) { padding: 12px; --row-unit: 0.8px; }
  .ranking-list li { gap: 7px; padding: 8px; }
  .rank-identity > span { font-size: 9.6px; }
  .rank-value { flex-basis: 45px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}