/* ===== RESET ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-300);
  color: var(--color-text-default);
  background: var(--color-neutral-0);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; }
input { font: inherit; }
ul { list-style: none; }
a { color: inherit; }

/* ===== TYPE UTILITIES ===== */
h1, h2, h3, h4 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-600);
  font-variation-settings: "opsz" 14, "wdth" 100;
}
.display-md, .display-sm, .heading-h1, .heading-h2, .heading-h3, .heading-h4 {
  font-family: var(--font-family-primary); font-weight: var(--font-weight-600);
  font-variation-settings: "opsz" 14, "wdth" 100;
}
.display-md { font-size: var(--font-size-950); line-height: 1.1; }
.display-sm { font-size: var(--font-size-900); line-height: 1.1; font-weight: var(--font-weight-300); }
.heading-h1 { font-size: var(--font-size-800); line-height: 1.2; }
.heading-h2 { font-size: var(--font-size-700); line-height: 1.2; }
.heading-h3 { font-size: var(--font-size-600); line-height: 1.2; }
.heading-h4 { font-size: var(--font-size-500); line-height: 1.2; }
.heading-sm { font-size: 48px; line-height: 1.1; }
.heading-sm2 { font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: var(--font-size-900); line-height: 1.3; }
.heading-signup { font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: 64px; line-height: 1.1; }
.body-xl { font-size: var(--body-xl-size); line-height: var(--body-xl-line-height); }
.body-xl-normal { font-size: var(--font-size-500); line-height: 1.5; }
.body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-line-height); }
.body-md { font-size: var(--body-md-size); line-height: var(--body-md-line-height); }
.body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-line-height); }
.center { text-align: center; }
.right { text-align: right; }
.dark { color: var(--color-text-inverse-strong); }
.muted { color: var(--color-text-muted); }
.accent { color: var(--color-text-brand-strong); }
.accent-dot { color: var(--color-text-link-visited); }
.text-warning { color: var(--color-status-warning-icon); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-gap-sm);
  height: 52px; padding: var(--spacing-padding-lg) var(--spacing-padding-xl);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-primary); font-weight: var(--font-weight-600);
  font-size: var(--font-size-400); line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
.btn:active { transform: translateY(0); filter: brightness(0.98); box-shadow: none; }
.btn--primary { background: var(--color-button-primary-bg); color: var(--color-button-primary-text); }
.btn--accent { background: var(--color-button-accent-bg); color: var(--color-button-accent-text); }
.btn--full { width: 100%; }

/* ===== BADGES ===== */
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-gap-xs);
  height: 28px; padding: var(--spacing-padding-xs) var(--spacing-padding-md);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-300); line-height: 1.3; white-space: nowrap;
  border: var(--border-width-sm) solid transparent;
}
.badge--cream { background: var(--color-primary-100); border-color: var(--color-primary-200); color: var(--color-text-inverse-strong); }
.badge--dark { height: auto; padding: var(--spacing-padding-md) var(--spacing-padding-lg); background: var(--color-surface-bg-surface-raised); border-color: var(--color-border-default); color: var(--color-text-strong); font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: var(--font-size-400); }

.status-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 18.9px; padding: 4px 8px; border-radius: var(--radius-pill);
  font-size: var(--font-size-200); line-height: 1.3; border: 1px solid transparent; white-space: nowrap;
}
.status-badge--success { background: var(--color-status-success-bg); border-color: var(--color-status-success-border); color: var(--color-status-success-text); }
.status-badge--neutral { background: var(--color-status-neutral-bg); border-color: var(--color-status-neutral-border); color: var(--color-status-neutral-text); }
.status-badge--danger { background: var(--color-status-danger-bg); border-color: var(--color-status-danger-border); color: var(--color-status-danger-text); }

.eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: var(--spacing-padding-sm) 13.5px; border-radius: 123px;
  background: var(--color-surface-bg-surface-raised); border: 1.1px solid var(--color-border-default);
  font-family: var(--font-family-primary); font-weight: var(--font-weight-600);
  font-size: 15.75px; color: var(--color-text-subtle);
}
.eyebrow img { width: 15.75px; height: 15.75px; }
.eyebrow--sm { padding: 5.5px 8.3px; font-size: 9.72px; gap: 5.5px; }
.eyebrow--sm img { width: 9.7px; height: 9.7px; }

/* ===== SECTION BASE ===== */
.lp, .section { width: 100%; display: flex; flex-direction: column; align-items: center; }
.section { padding: var(--spacing-padding-9xl); }
.section__intro { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-gap-2xl); width: 100%; }
.section__intro--left { align-items: flex-start; gap: var(--spacing-gap-2xl); width: 800px; max-width: 100%; }
.intro-copy { width: 550px; max-width: 100%; }
.section__intro h2 { width: 1038px; max-width: 100%; }
.section__intro--left h2 { width: 100%; }

/* ===== HERO ===== */
.lp--hero { background: var(--color-neutral-50); padding: var(--spacing-padding-xl) var(--spacing-padding-9xl) var(--spacing-padding-3xl); gap: var(--spacing-gap-7xl); }

.nav {
  width: 100%; max-width: 1200px; height: 84px;
  background: var(--color-surface-bg-surface); border-radius: 1234px;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--spacing-padding-xl) var(--spacing-padding-2xl) var(--spacing-padding-xl) var(--spacing-padding-4xl);
}
.nav__logo img { height: 36px; width: 111px; }
.nav__links { display: flex; align-items: center; gap: var(--spacing-gap-2xl); font-size: var(--font-size-300); color: var(--color-text-strong); white-space: nowrap; }
.nav__links a { text-decoration: none; }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; width: 24px; }
.nav__burger span { display: block; width: 100%; height: 2px; background: white; }

.hero__row { width: 100%; max-width: 1200px; display: flex; gap: var(--spacing-gap-2xl); align-items: flex-end; justify-content: center; }
.hero__headline-col { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-gap-lg); align-items: flex-start; }
.hero__headline { color: var(--color-text-inverse-strong); }
.hero__copy-col { width: 336px; display: flex; flex-direction: column; gap: var(--spacing-gap-2xl); align-items: flex-start; justify-content: flex-end; }
.hero__copy-col p { color: var(--color-text-inverse-strong); width: 324px; }

.hero__visual-row { width: 100%; max-width: 1200px; height: 418px; display: flex; gap: var(--spacing-gap-2xl); align-items: stretch; }

.phone-mock {
  width: 389px; height: 418px; background: #070707; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 47px; padding: 19px 16px; overflow: hidden; flex-shrink: 0;
}
.phone-mock__title { font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: 20px; line-height: 1.2; color: rgba(255,255,255,0.5); text-align: center; }
.phone-mock__score { font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: 120px; line-height: 64px; color: white; }
.phone-mock__pills { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 303px; }
.score-pill-row { display: flex; gap: 6px; justify-content: center; width: 100%; }
.score-pill { display: flex; align-items: center; gap: 4px; background: var(--color-surface-bg-surface); border-radius: 13.5px; padding: 10px; }
.score-pill__label { font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: 10px; color: var(--color-text-subtle); }
.score-pill__value { font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: 20px; color: var(--color-text-strong); width: 32px; text-align: center; }

.insight-panel {
  flex: 1; border-radius: 24px; padding: 24px; position: relative; overflow: hidden;
  background-color: var(--color-primary-100); background-size: cover; background-position: center;
  display: flex; align-items: flex-start;
}
.insight-panel::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.05); }
.insight-card {
  position: relative; z-index: 1; width: 391px; max-width: 100%;
  background: var(--color-surface-bg-surface); border-radius: 20.7px; padding: 31px;
  display: flex; flex-direction: column; gap: 31px; align-items: flex-start;
}
.body-insight { font-size: 22px; line-height: 1.5; color: var(--color-text-default); }
.underline-green, .underline-red {
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 7px;
  padding-bottom: 3px;
}
.underline-green {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10'%3E%3Cpath d='M1,5.5 C20,2.5 33,7.5 50,5 C67,2.7 80,7 99,4.5' fill='none' stroke='%234cc38a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.underline-red {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10'%3E%3Cpath d='M1,5.5 C20,2.5 33,7.5 50,5 C67,2.7 80,7 99,4.5' fill='none' stroke='%23ff6369' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ===== TICKER (infinite marquee) ===== */
.ticker {
  width: 100%; background: var(--color-primary-100); color: var(--color-text-inverse-strong);
  padding: var(--spacing-padding-lg) 0;
  font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: var(--font-size-400);
  overflow: hidden; white-space: nowrap;
}
.ticker__track {
  display: flex; width: max-content;
  animation: ticker-scroll 28s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; gap: var(--spacing-gap-2xl); padding-right: var(--spacing-gap-2xl); flex-shrink: 0; }
.ticker .dot { opacity: 0.6; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== PROBLEM ===== */
.section--problem { background: var(--color-neutral-850); gap: var(--spacing-gap-6xl); }
.section--problem h2, .section--problem p { color: var(--color-text-strong); }
.section--problem .section__intro { gap: var(--spacing-gap-3xl); }

.app-pill-row {
  width: auto; max-width: 100%; background: var(--color-surface-bg-surface); border-radius: var(--radius-3xl);
  padding: var(--spacing-800); display: flex; flex-wrap: nowrap; gap: var(--spacing-gap-md); justify-content: center;
}
.app-pill {
  display: flex; align-items: center; gap: var(--spacing-gap-sm); flex-shrink: 0; white-space: nowrap;
  background: var(--color-surface-bg-surface-raised); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill); padding: var(--spacing-padding-md) var(--spacing-padding-lg);
  font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: var(--font-size-400); color: var(--color-text-strong);
}
.app-pill img { width: 24px; height: 24px; }

/* ===== SOLUTION ===== */
.section--solution { background: var(--color-neutral-0); gap: var(--spacing-gap-6xl); }

.pillar-grid { width: 100%; max-width: 1200px; display: flex; gap: var(--spacing-gap-2xl); align-items: stretch; }
.pillar-col { display: flex; flex-direction: column; gap: var(--spacing-gap-2xl); flex: 1; }
.pillar-col--narrow { width: 344px; flex: none; }
.pillar-row { display: flex; gap: var(--spacing-gap-2xl); flex: 1; }
.pillar-card {
  position: relative; border-radius: 24px; padding: 24px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  background-color: var(--color-primary-100); background-size: cover; background-position: center;
  min-height: 200px; flex: 1;
}
.pillar-card::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 0; }
.pillar-card--flat { background-color: var(--color-surface-bg-surface-subtle); }
.pillar-card--flat::before { display: none; }
.pillar-card--wide { min-height: 300px; }
.pillar-card > .badge, .pillar-card__text { position: relative; z-index: 1; }
.pillar-card__text { display: flex; flex-direction: column; gap: 10px; }
.pillar-card--flat h3, .pillar-card--flat p { color: var(--color-text-strong); }
.pillar-card:not(.pillar-card--flat) h3, .pillar-card:not(.pillar-card--flat) p { color: var(--color-text-strong); }
.pillar-card p { color: var(--color-text-default); }

/* ===== CONNECTED HERO ===== */
.connected-hero {
  width: 100%; height: 776px; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 48px; background-color: var(--color-neutral-850); background-size: cover; background-position: center;
  position: relative;
}
.connected-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(131.5deg, rgba(0,0,0,0) 34%, rgba(0,0,0,0.5) 71%); }
.connected-hero__content { position: relative; z-index: 1; width: 623px; max-width: 100%; display: flex; flex-direction: column; gap: var(--spacing-gap-2xl); align-items: flex-end; }
.connected-hero__content p { color: var(--color-text-strong); }

/* ===== ATHLETES / GETTING STARTED CARD ===== */
.section--athletes-wrap, .section--getting-started-wrap { background: var(--color-neutral-0); padding: var(--spacing-padding-8xl) var(--spacing-padding-9xl); }
.athletes-card {
  width: 100%; max-width: 1216px; background: var(--color-neutral-850); border-radius: var(--radius-3xl);
  display: flex; align-items: center; gap: 48px; padding: 64px;
}
.athletes-card__text { width: 354px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--spacing-gap-lg); align-items: flex-start; }
.athletes-card__text h2 { color: var(--color-text-strong); }
.athletes-card__text p { color: var(--color-text-strong); font-size: var(--body-xl-size); line-height: var(--body-xl-line-height); width: 336px; max-width: 100%; }
.athletes-card__images { display: flex; flex: 1; align-self: stretch; gap: 20px; }
.athletes-card__images img { flex: 1; height: 100%; object-fit: cover; border-radius: 24px; min-width: 0; }

.steps-row { display: flex; flex: 1; gap: 20px; }
.step { flex: 1; display: flex; flex-direction: column; padding: 20px; }
.step__number { font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: var(--font-size-700); color: var(--color-text-strong); }
.step__text { font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: var(--font-size-500); color: var(--color-text-strong); margin-top: 16px; line-height: 1.3; }
.step hr { border: none; border-top: 1px solid var(--color-border-default); margin-top: 24px; }
.step img { width: 24px; height: 24px; margin-top: 24px; }

/* ===== NORMAL SECTION ===== */
.section--normal { background: var(--color-surface-bg-surface); gap: var(--spacing-gap-6xl); }
.normal-intro { width: 1216px; max-width: 100%; }
.normal-intro__gradient {
  font-family: var(--font-family-primary); font-weight: 300; font-size: var(--font-size-900); line-height: 1.3;
  background: linear-gradient(180deg, var(--color-neutral-850) 0%, white 303.5%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.normal-intro p:last-child { font-family: var(--font-family-primary); font-weight: 300; font-size: var(--font-size-900); line-height: 1.3; color: var(--color-text-strong); }

.normal-split { width: 1216px; max-width: 100%; background: var(--color-surface-bg-surface-inverse); border-radius: var(--radius-3xl); display: flex; align-items: center; gap: 64px; padding: 48px; }
.normal-split__images { flex: 1; height: 600px; display: flex; flex-direction: column; gap: 20px; }
.rhr-card { flex: 1; position: relative; border-radius: var(--radius-3xl); overflow: hidden; background-size: cover; background-position: center; display: flex; padding: 20px; }
.rhr-card:first-child { align-items: flex-end; justify-content: flex-start; }
.rhr-card:last-child { align-items: flex-end; justify-content: flex-end; }
.rhr-card__overlay { background: var(--color-surface-bg-surface); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.card-headline { display: flex; align-items: center; gap: 12px; }
.card-headline img { width: 24px; height: 24px; }
.card-headline span { font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: var(--font-size-300); color: var(--color-text-strong); }
.card-result { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; width: 100%; }
.card-result__value { font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: 56px; color: var(--color-text-strong); line-height: 1; }

.normal-split__text { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-gap-2xl); }
.normal-split__text h2 { color: var(--color-text-inverse-default); }
.normal-split__text .body-xl-normal { color: var(--color-text-inverse-default); }
.normal-split__text .body-lg { color: var(--color-text-inverse-strong); }

/* ===== PROACTIVITY ===== */
.section--proactive { background: var(--color-surface-bg-surface-inverse); gap: var(--spacing-gap-7xl); }
.section--proactive .section__intro { gap: var(--spacing-gap-3xl); }

.proactive-grid { width: 100%; max-width: 1216px; display: flex; gap: var(--spacing-gap-3xl); align-items: flex-start; }
.proactive-card { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-gap-2xl); align-items: center; }
.proactive-card__visual {
  width: 100%; height: 425px; border-radius: 20px; padding: 16px; overflow: hidden; position: relative;
  background-color: var(--color-primary-100); background-size: cover; background-position: center;
  display: flex; align-items: flex-end; justify-content: center;
}
.insight-card--floating { width: 293px; max-width: 100%; padding: 19px; border-radius: 12.8px; gap: 19px; }
.body-insight-sm { font-size: 13px; line-height: 1.4; color: var(--color-text-default); }

.ask-block { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-gap-6xl); width: 100%; }
.ask-block h2 { width: 650px; max-width: 100%; }
.ask-block > p { width: 550px; max-width: 100%; }
.ask-block__placeholder {
  width: 100%; background: var(--color-primary-100); border-radius: var(--radius-3xl); height: 411px;
  display: flex; align-items: center; justify-content: center; padding: 64px;
  font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: var(--font-size-800);
  color: var(--color-text-inverse-strong); text-align: center;
}

/* ===== A DAY WITH TOPSY ===== */
.section--day { background: var(--color-neutral-0); gap: var(--spacing-gap-6xl); }
.day-grid { width: 100%; max-width: 1216px; display: flex; gap: var(--spacing-gap-2xl); align-items: flex-start; }
.day-card { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-gap-lg); }
.day-card__visual { width: 100%; height: 258px; border-radius: var(--radius-3xl); background-size: cover; background-position: center; background-color: var(--color-neutral-850); overflow: hidden; }
.day-card__visual--score { display: flex; align-items: center; justify-content: center; }
.day-score { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.day-score__label { font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: var(--font-size-500); color: white; line-height: 1.2; }
.day-score__value { font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: 112px; color: white; line-height: 1; }
.day-card__visual--insight { display: flex; align-items: center; padding: 24px; }
.day-card__visual--insight .insight-card { width: 100%; padding: 0; background: transparent; gap: 20px; }
.day-card > h4, .day-card > p { color: var(--color-text-inverse-strong); }

/* ===== GOAL SECTION ===== */
.section--goal { background: var(--color-neutral-0); gap: var(--spacing-gap-6xl); }
.section--goal h2.heading-sm2 { color: var(--color-text-inverse-default); }
.goal-image { flex: 1; border-radius: var(--radius-3xl); background: rgba(0,0,0,0.2); }

/* ===== FOUNDERS ===== */
.section--founders { background: var(--color-neutral-0); gap: var(--spacing-gap-6xl); }
.founders-row { display: flex; gap: 32px; width: 100%; max-width: 1068px; }
.founder-card { flex: 1; display: flex; flex-direction: column; gap: 48px; background: var(--color-primary-50); border-radius: 32px; padding: 40px; }
.founder-card__head { display: flex; gap: 16px; }
.founder-card__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--color-primary-200); }
.founder-card__head h4 { color: var(--color-text-inverse-strong); margin-bottom: 4px; }
.founder-card__head .body-sm { color: var(--color-text-inverse-strong); margin-bottom: 8px; }
.founder-card__meta { display: flex; align-items: center; gap: 8px; }
.badge--neutral { background: var(--color-status-neutral-bg); border-color: var(--color-status-neutral-border); color: var(--color-status-neutral-text); }
.founder-card__linkedin { display: inline-flex; height: 28px; width: 28px; text-decoration: none; transition: transform 0.15s ease, opacity 0.15s ease; }
.founder-card__linkedin img { width: 28px; height: 28px; }
.founder-card__linkedin:hover { transform: translateY(-2px); opacity: 0.85; }
.founder-card > .body-xl-normal { color: var(--color-text-inverse-strong); }

/* ===== DATA TABLE ===== */
.section--table { background: var(--color-surface-bg-surface); gap: var(--spacing-gap-6xl); }
.section--table .section__intro--left h2, .section--table .section__intro--left p { color: var(--color-text-strong); }

.data-table { width: 100%; max-width: 1216px; border: 1px solid var(--color-border-default); border-radius: 32px; overflow: hidden; }
.data-table__row {
  display: flex; gap: 32px; padding: 24px 32px; border-bottom: 1px solid var(--color-border-default);
}
.data-table__row--last { border-bottom: none; }
.data-table__row--head { background: var(--color-surface-bg-surface-raised); color: var(--color-text-muted); font-size: var(--font-size-200); }
.data-table__row:not(.data-table__row--head) { color: var(--color-text-default); font-size: var(--font-size-300); align-items: center; }
.col-pillar { width: 142px; flex-shrink: 0; font-family: var(--font-family-primary); font-weight: var(--font-weight-600); font-size: var(--font-size-500); color: var(--color-text-strong); }
.data-table__row--head .col-pillar { font-family: var(--font-family-secondary); font-weight: 300; font-size: var(--font-size-200); color: var(--color-text-muted); }
.col-weight { width: 100px; flex-shrink: 0; font-family: var(--font-family-primary); font-weight: 600; font-size: 16px; color: white; }
.data-table__row--head .col-weight { font-family: var(--font-family-secondary); font-weight: 300; font-size: var(--font-size-200); color: var(--color-text-muted); }
.col-signals { flex: 1; }
.col-source { width: 152px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; color: var(--color-text-subtle); }
.col-source img { width: 24px; height: 24px; background: var(--color-surface-bg-surface-raised); border-radius: 6px; padding: 5px; }
.col-benchmark { width: 171px; flex-shrink: 0; color: var(--color-text-muted); }
.table-footnote { color: var(--color-text-default); width: 100%; max-width: 1216px; }

.data-table--mobile {
  display: none; width: 100%; flex-direction: column;
  border: 1px solid var(--color-border-default); border-radius: 32px; overflow: hidden;
}
.data-table-card { padding: 24px; border-bottom: 1px solid var(--color-border-default); }
.data-table-card:last-child { border-bottom: none; }
.data-table-card__head { display: flex; align-items: center; justify-content: space-between; }
.data-table-card__head h4 { font-family: var(--font-family-primary); font-weight: 600; font-size: var(--font-size-500); color: var(--color-text-strong); }
.data-table-card__weight { font-family: var(--font-family-primary); font-weight: 600; font-size: 16px; color: white; }
.data-table-card__label { font-size: var(--font-size-200); color: var(--color-text-muted); margin: 21px 0 8px; }
.data-table-card__signals { font-size: var(--font-size-300); color: var(--color-text-default); }
.data-table-card hr { border: none; border-top: 1px solid var(--color-border-default); margin: 24px 0 16px; }
.data-table-card__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.data-table-card__footer span { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-300); }
.data-table-card__footer .src { color: var(--color-text-subtle); }
.data-table-card__footer .bench { color: var(--color-text-muted); }
.data-table-card__footer img { width: 20px; height: 20px; background: var(--color-surface-bg-surface-raised); border-radius: 6px; padding: 4px; }

/* ===== FAQ ===== */
.section--faq { background: var(--color-surface-bg-surface-inverse); gap: var(--spacing-gap-6xl); }
.section--faq .section__intro { gap: var(--spacing-gap-2xl); }

.accordion { width: 782px; max-width: 100%; display: flex; flex-direction: column; gap: var(--spacing-gap-xl); }
.accordion__item { background: var(--color-neutral-0); border: 1px solid var(--color-border-default); border-radius: var(--radius-400); overflow: hidden; }
.accordion__header {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  padding: var(--spacing-padding-2xl); display: flex; align-items: center; gap: var(--spacing-gap-2xl); justify-content: space-between;
}
.accordion__q-title { color: var(--color-text-inverse-strong); }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.accordion__panel-inner { padding: 0 var(--spacing-padding-2xl) var(--spacing-padding-2xl); }
.accordion__panel-inner p { font-size: 18px; line-height: 1.4; color: var(--color-text-inverse-strong); }
.accordion__icon { width: 32px; height: 32px; flex-shrink: 0; }
.accordion__icon--minus { display: none; }
.accordion__item.is-open .accordion__icon--minus { display: block; }
.accordion__item.is-open .accordion__icon--plus { display: none; }
.faq-contact a { color: var(--color-text-link-visited); text-decoration: underline; }

/* ===== SIGNUP + FOOTER ===== */
.section--signup { background: var(--color-surface-bg-surface); gap: var(--spacing-gap-7xl); padding: 100px 112px 100px 120px; }
.section--signup > h2 { color: var(--color-text-strong); width: 1038px; max-width: 100%; }

.signup-card { width: 100%; max-width: 1208px; background: var(--color-surface-bg-surface-inverse); border-radius: var(--radius-3xl); display: flex; gap: 64px; align-items: center; padding: 48px; }
.signup-card__form { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-gap-lg); align-items: flex-start; }
.signup-card__form h2 { color: var(--color-text-inverse-default); }
.signup-card__form .body-lg { width: 403px; max-width: 100%; }
.waitlist-form { width: 100%; display: flex; flex-direction: column; gap: var(--spacing-gap-2xl); padding-top: 12px; }
.waitlist-form label { font-size: var(--font-size-300); color: var(--color-text-inverse-strong); margin-bottom: 4px; display: block; }
.waitlist-form .required { color: var(--color-text-brand); }
.waitlist-form input {
  width: 100%; padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--color-border-active);
  background: white; color: var(--color-text-inverse-default); font-size: var(--font-size-400); margin-bottom: 24px;
}
.waitlist-form hr { border: none; border-top: 1px solid var(--color-border-default); margin: 24px 0; width: 100%; }
.waitlist-form__status { font-size: var(--font-size-300); margin-top: 12px; min-height: 18px; }
.waitlist-form__status--error { color: var(--color-status-danger-icon); }
.waitlist-form__status--success { color: var(--color-status-success-icon); }

.waitlist-form__success {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding-top: 4px; animation: waitlist-success-in 0.4s ease;
}
.waitlist-form__success-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary-100);
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.waitlist-form__success-icon img { width: 22px; height: 22px; }

@keyframes waitlist-success-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.signup-card__visual { flex: 1; display: flex; flex-direction: column; gap: 20px; align-self: stretch; }
.signup-card__visual img { border-radius: 32px; flex: 1; min-height: 0; object-fit: cover; width: 100%; }
.perks-card { background: var(--color-neutral-0); border-radius: 32px; padding: 24px; display: flex; flex-direction: column; gap: 11px; }
.perks-card h4 { color: var(--color-text-inverse-default); }
.perks-card p { font-size: var(--font-size-200); color: var(--color-text-inverse-default); }
.perks-list { display: flex; flex-direction: column; gap: 8px; }
.perks-list li { position: relative; padding-left: 19.5px; font-family: 'Geist', sans-serif; font-weight: 500; font-size: 13px; color: var(--color-text-inverse-default); line-height: 1.2; }
.perks-list li::before { content: "•"; position: absolute; left: 6px; }

.wordmark { width: 768px; max-width: 100%; }
.wordmark img { width: 100%; aspect-ratio: 768 / 248; }

.footer-bar { display: flex; align-items: center; justify-content: center; gap: var(--spacing-gap-xl); font-size: var(--font-size-200); color: var(--color-text-strong); flex-wrap: wrap; text-align: center; }

/* ===== MOBILE MENU (verified against Figma node 268:10687) ===== */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 100; background: var(--color-surface-bg-surface);
  flex-direction: column;
}
.mobile-menu--open { display: flex; }
.mobile-menu__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 12px 24px; height: 64px; flex-shrink: 0;
}
.mobile-menu__close { background: none; width: 40px; height: 40px; padding: 0; }
.mobile-menu__close img { width: 40px; height: 40px; }
.mobile-menu__body {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  padding: 64px 24px 48px;
}
.mobile-menu__links { display: flex; flex-direction: column; gap: 32px; }
.mobile-menu__links a {
  text-decoration: none; font-family: var(--font-family-primary); font-weight: 400;
  font-size: var(--font-size-600); line-height: 1.2; color: var(--color-text-default);
}
body.no-scroll { overflow: hidden; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1300px) {
  .section, .lp { padding-left: 48px; padding-right: 48px; }
  .section__intro h2, .ask-block h2, .display-md { width: 100% !important; }
}

@media (max-width: 960px) and (min-width: 601px) {
  .nav__links, .nav .btn { display: none; }
  .nav__burger { display: flex; }
  .app-pill-row { flex-wrap: wrap; }
  .hero__row, .hero__visual-row, .pillar-grid, .pillar-row, .day-grid, .proactive-grid,
  .normal-split, .athletes-card, .steps-row, .founders-row, .signup-card, .data-table__row {
    flex-direction: column;
  }
  .hero__copy-col, .pillar-col--narrow, .athletes-card__text { width: 100%; }
  .connected-hero, .connected-hero__content { align-items: center; text-align: center; }
  .display-md, .display-sm, .heading-sm, .heading-sm2, .heading-signup { font-size: 40px; }
  .section { padding: 64px 24px; }
}

/* ===== MOBILE (verified against Figma node 257:5336, 402px frame) ===== */
@media (max-width: 600px) {
  body { overflow-x: hidden; }
  .section, .lp { padding-left: 20px; padding-right: 20px; }
  .section, .lp--hero { row-gap: 48px; }

  /* Nav: flat full-bleed bar, not a pill */
  .lp--hero { padding: 0 0 32px; }
  .nav {
    max-width: 100%; border-radius: 0; height: 64px;
    padding: 12px 12px 12px 24px;
  }
  .nav__links, .nav > .btn { display: none; }
  .nav__burger { display: flex; }
  .nav__logo img { height: 26px; width: 79px; }
  .hero__row { padding: 0 20px; margin-top: 32px; }
  .hero__visual-row { padding: 0 20px; }

  .mobile-menu__links a:nth-child(2) { color: var(--color-text-brand-strong); }

  /* Hero: stack, insight panel before phone/score card */
  .hero__row, .hero__visual-row { flex-direction: column; align-items: flex-start; height: auto; gap: 24px; }
  .hero__headline-col, .hero__copy-col { width: 100%; }
  .hero__copy-col p { width: 100%; }
  .display-md { font-size: 44px; }
  .insight-panel { order: -1; height: 254px; }
  .phone-mock { width: 100%; height: auto; padding: 24px 16px; }

  /* Generic section headings/intros */
  .section__intro h2, .intro-copy, .ask-block h2, .ask-block > p { width: 100% !important; }
  .display-sm, .heading-sm2 { font-size: 32px; }
  .heading-signup { font-size: 40px; }
  .normal-intro__gradient, .normal-intro p:last-child { font-size: 32px; }

  /* Ticker */
  .ticker { padding: 16px 0; }

  /* Problem */
  .app-pill-row { padding: 24px; gap: 8px; flex-wrap: wrap; }

  /* Solution pillar grid: single column */
  .pillar-grid, .pillar-row { flex-direction: column; }
  .pillar-col--narrow { width: 100%; }
  .pillar-card, .pillar-card--wide { min-height: 260px; }

  /* Connected hero: left-aligned, bottom */
  .connected-hero { align-items: flex-end; justify-content: flex-start; padding: 24px; height: 640px; }
  .connected-hero__content { align-items: flex-start; text-align: left; width: 100%; }

  /* Athletes / getting-started cards */
  .athletes-card { flex-direction: column; padding: 32px; gap: 32px; align-items: flex-start; }
  .athletes-card__text, .athletes-card__images, .steps-row { width: 100%; }
  .athletes-card__images { flex-direction: row; height: 185px; }
  .athletes-card__images img:nth-child(3) { display: none; }
  .steps-row { flex-direction: column; gap: 0; }
  .step { padding: 0; }

  /* Normal / goal split cards */
  .normal-split { flex-direction: column; padding: 32px; gap: 24px; }
  .normal-split__images { height: auto; }
  .rhr-card { height: 277px; }
  .goal-image { height: 226px; }
  .heading-sm { font-size: 32px; }

  /* Proactive */
  .proactive-grid { flex-direction: column; }
  .ask-block__placeholder { height: 267px; }

  /* Day with Topsy */
  .day-grid { flex-direction: column; }

  /* Founders */
  .founders-row { flex-direction: column; }

  /* Desktop data table hidden, mobile card table shown */
  .data-table { display: none; }
  .data-table--mobile { display: flex; }

  /* FAQ */
  .accordion { width: 100%; }

  /* Signup */
  .signup-card { flex-direction: column; padding: 32px; gap: 24px; }
  .signup-card__form .body-lg { width: 100%; }
  .wordmark { width: 260px; }
  .footer-bar { flex-direction: column; gap: 8px; }
  .footer-bar .dot { display: none; }
}