/* ==========================================================================
   RepCurve — waitlist landing page
   Design system mirrored from the app (src/theme/tokens.ts):
   dark instrument-panel direction, volt accent, Manrope + Barlow Condensed.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg: #0a0d12;
  --surface: #11161f;
  --surface-raised: #19202c;
  --surface-sunken: #070a0e;
  --line: #222b3a;
  --line-soft: #1a2230;

  /* Text */
  --text: #edf1f7;
  --text-dim: #94a1b5;
  --text-faint: #7e8ba3;

  /* Volt accent */
  --accent: #c8f54f;
  --accent-dim: #9dc53b;
  --on-accent: #10150a;

  /* Verdict semantics */
  --growing: #3ddc97;
  --growing-bg: #0f2b21;
  --flat: #e8c268;
  --flat-bg: #2b250f;
  --shrinking: #f4737e;
  --shrinking-bg: #2e1216;
  --building: #7fa3c9;
  --building-bg: #16202c;

  --neutral: #8b97a8;
  --neutral-bg: #1a212b;
  --info: #6fb5f0;
  --protein: #6fe3c2;

  /* Type */
  --ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Barlow Condensed", var(--ui);

  /* Fluid scale */
  --text-hero: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  --text-display: clamp(1.9rem, 1rem + 3vw, 3.3rem);
  --text-h2: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  --text-stat: clamp(2rem, 1.2rem + 3vw, 3.4rem);

  /* Spacing & shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --section-y: clamp(4.5rem, 3rem + 8vw, 9rem);
  --screen-x: clamp(1.1rem, 0.5rem + 3vw, 2.5rem);
  --maxw: 1180px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 360ms;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Atmosphere: volt glow + faint grain over the near-black base */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(200, 245, 79, 0.1), transparent 60%),
    radial-gradient(900px 600px at 8% 12%, rgba(61, 220, 151, 0.06), transparent 55%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main,
header,
footer {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout primitives ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--screen-x);
}

.eyebrow {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.section-label {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
}

.muted {
  color: var(--text-dim);
}

.num {
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.92;
}

/* ---- Buttons -------------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--ui);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  padding: 0.95rem 1.6rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease), opacity var(--dur) var(--ease);
  box-shadow: 0 0 0 rgba(200, 245, 79, 0);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -12px rgba(200, 245, 79, 0.5);
  background: #d4ff63;
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border: 1px solid var(--line);
  font-weight: 700;
}

.btn--ghost:hover {
  background: var(--surface-raised);
  box-shadow: none;
  transform: translateY(-1px);
}

.btn--block {
  width: 100%;
}

.btn--lg {
  padding: 1.1rem 2rem;
  font-size: 1.05rem;
}

/* ---- Nav ------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(10, 13, 18, 0.85), rgba(10, 13, 18, 0.4));
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav.is-scrolled {
  border-bottom-color: var(--line-soft);
  background: rgba(10, 13, 18, 0.92);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
}

.brand__mark {
  height: 28px;
  width: auto;
  flex: none;
}

.brand b {
  color: var(--accent);
  font-weight: 800;
}

/* ---- Hero ----------------------------------------------------------------- */

.hero {
  padding-top: clamp(3rem, 1rem + 6vw, 6rem);
  padding-bottom: var(--section-y);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
}

.hero__eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--growing);
  box-shadow: 0 0 12px var(--growing);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-hero);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: none;
  /* Let the browser balance line lengths — the headline + hero font are both
     fluid, so hand-authored breaks orphan words at some widths. */
  text-wrap: balance;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
  position: relative;
}

.hero__sub {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  color: var(--text-dim);
  max-width: 46ch;
  line-height: 1.6;
}

.hero__form {
  margin-top: 2rem;
  max-width: 460px;
}

.hero__trust {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
}

.hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hero__trust svg {
  color: var(--growing);
  flex: none;
}

/* ---- Email capture form --------------------------------------------------- */

.signup {
  display: flex;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.5rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.signup:focus-within {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 4px rgba(200, 245, 79, 0.12);
}

.signup input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.7rem 0.5rem 0.7rem 0.9rem;
}

.signup input::placeholder {
  color: var(--text-faint);
}

.signup input:focus {
  outline: none;
}

.signup .btn {
  flex: none;
  white-space: nowrap;
}

/* honeypot */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-msg {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  min-height: 1.2em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-msg.is-error {
  color: var(--shrinking);
}

.form-msg.is-success {
  color: var(--growing);
}

.signup.is-success {
  border-color: var(--growing);
  background: var(--growing-bg);
}

/* ---- Hero phone mockup: training-volume dose-response chart --------------- */

.phone {
  position: relative;
  justify-self: center;
  width: min(460px, 100%);
}

.phone__glow {
  position: absolute;
  inset: -16% -10% 2%;
  background:
    radial-gradient(48% 40% at 58% 24%, rgba(61, 220, 151, 0.16), transparent 72%),
    radial-gradient(44% 38% at 80% 56%, rgba(232, 194, 104, 0.12), transparent 72%);
  filter: blur(16px);
  z-index: -1;
}

.phone__frame {
  position: relative;
  background: linear-gradient(155deg, #1d2530, #0c1119 60%);
  border: 1px solid var(--line);
  border-radius: 46px;
  padding: 9px;
  box-shadow:
    0 60px 130px -45px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.phone__screen {
  position: relative;
  background: radial-gradient(120% 80% at 50% 0%, #121822, #0a0d12 70%);
  border-radius: 38px;
  padding: 1.5rem 1rem 1.1rem;
  overflow: hidden;
}

.phone__island {
  display: block;
  width: 76px;
  height: 21px;
  margin: 0 auto 1.1rem;
  border-radius: var(--radius-pill);
  background: #05070a;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Glass chart card */
.chartcard {
  background: linear-gradient(180deg, rgba(25, 32, 44, 0.72), rgba(17, 22, 31, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  padding: 0.95rem 0.9rem 0.85rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.chartcard__eyebrow {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.chartcard__title {
  font-family: var(--ui);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 0.2rem;
  color: var(--text);
}

.chartcard__plot {
  position: relative;
  aspect-ratio: 340 / 220;
  margin-top: 0.7rem;
}

.chartcard__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chartcard__yaxis {
  position: absolute;
  left: -0.15rem;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.chartcard__grid line {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
}

.chartcard__marker {
  stroke: var(--flat);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.5;
}

.chartcard__volume {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.6;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
  opacity: 0.7;
}

.chartcard__fill-top {
  stop-color: var(--growing);
  stop-opacity: 0.22;
}

.chartcard__fill-bot {
  stop-color: var(--growing);
  stop-opacity: 0;
}

.chartcard__growth {
  fill: none;
  stroke: var(--growing);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(61, 220, 151, 0.4));
}

.chartcard__peak {
  fill: var(--growing);
}

.chartcard__peak-halo {
  fill: var(--growing);
  opacity: 0.16;
}

.chartcard__flag {
  fill: var(--flat);
}

.chartcard__optimal {
  position: absolute;
  left: 55%;
  top: 11%;
  transform: translateX(-50%);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--growing);
  white-space: nowrap;
}

/* Amber-tinted glass annotation, anchored in open space below the decline */
.callout {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 56%;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: rgba(43, 37, 15, 0.74);
  border: 1px solid rgba(232, 194, 104, 0.3);
  border-left: 2px solid var(--flat);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.85);
}

.callout__title {
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.callout__sub {
  margin-top: 0.2rem;
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--flat);
}

.chartcard__xaxis {
  margin-top: 0.4rem;
  text-align: center;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.chartcard__legend {
  display: flex;
  gap: 0.9rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.56rem;
  font-weight: 600;
  color: var(--text-dim);
}

.lg {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.lg::before {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
}

.lg--growth::before {
  background: var(--growing);
}

.lg--volume::before {
  background: repeating-linear-gradient(90deg, var(--text-faint) 0 4px, transparent 4px 7px);
}

/* Entrance motion is JS-gated so a no-JS view shows the chart fully drawn. */
.js .chartcard__growth {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: chartDraw 1.6s var(--ease) 0.25s forwards;
}

.js .chartcard__volume {
  opacity: 0;
  animation: chartFade 0.8s var(--ease) 1.3s forwards;
}

.js .chartcard__peak-halo {
  animation: chartPulse 2.8s var(--ease) infinite;
}

@keyframes chartDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes chartFade {
  to {
    opacity: 0.7;
  }
}

@keyframes chartPulse {
  0%, 100% {
    opacity: 0.12;
  }
  50% {
    opacity: 0.3;
  }
}

/* ---- Verdict card (the app's hero motif) ---------------------------------- */

.vcard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 0.95rem 1rem 1rem 1.1rem;
  overflow: hidden;
}

.vcard + .vcard {
  margin-top: 0.7rem;
}

.vcard__stripe {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}

.vcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.vcard__name {
  font-weight: 700;
  font-size: 0.98rem;
}

.pill {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.vcard__conf {
  font-size: 0.68rem;
  color: var(--text-faint);
  margin-top: 0.2rem;
}

.vcard__evidence {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.ev {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.62rem;
  color: var(--text-dim);
  min-width: 0;
}

.ev svg {
  flex: none;
  color: var(--text-faint);
}

.ev .glyph {
  font-weight: 800;
}

.ev span.detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vcard__rx {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-soft);
}

.vcard__rx-action {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--accent);
}

.vcard__rx-expect {
  font-size: 0.68rem;
  color: var(--text-faint);
  margin-top: 0.15rem;
}

/* color helpers */
.is-growing { color: var(--growing); }
.is-flat { color: var(--flat); }
.is-shrinking { color: var(--shrinking); }
.is-building { color: var(--building); }
.bg-growing { background: var(--growing-bg); color: var(--growing); }
.bg-flat { background: var(--flat-bg); color: var(--flat); }
.bg-shrinking { background: var(--shrinking-bg); color: var(--shrinking); }
.bg-building { background: var(--building-bg); color: var(--building); }
.stripe-growing { background: var(--growing); }
.stripe-flat { background: var(--flat); }
.stripe-shrinking { background: var(--shrinking); }
.stripe-building { background: var(--building); }

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

.features {
  padding-block: var(--section-y);
}

.features__head {
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 1rem + 4vw, 4.5rem);
  text-align: center;
}

.features__head h2 {
  font-family: var(--ui);
  font-weight: 800;
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* "Every app tracks. / Only one answers." — two stacked beats, the answer
   in the site's volt accent (matches the hero highlight). */
.features__title-line {
  display: block;
}

.features__title-answer {
  color: var(--accent);
}

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  border-top: 1px solid var(--line-soft);
}

.feature:nth-child(even) .feature__media {
  order: -1;
}

.feature__index {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.feature h3 {
  font-family: var(--ui);
  font-weight: 800;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 0.7rem;
}

.feature p {
  margin-top: 1rem;
  color: var(--text-dim);
  font-size: 1.04rem;
  max-width: 46ch;
}

.feature__media {
  display: flex;
  justify-content: center;
}

.panel {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  padding: 1.4rem;
  box-shadow: 0 30px 80px -50px rgba(0, 0, 0, 0.9);
}

.panel__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
}

/* driver rows */
.driver {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0;
}

.driver + .driver {
  border-top: 1px solid var(--line-soft);
}

.driver__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 1px;
}

.driver__body {
  flex: 1;
  min-width: 0;
}

.driver__label {
  font-weight: 600;
  font-size: 0.9rem;
}

.driver__detail {
  font-size: 0.76rem;
  color: var(--text-faint);
  margin-top: 1px;
}

.driver__tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(200, 245, 79, 0.3);
  padding: 0.18rem 0.45rem;
  border-radius: var(--radius-pill);
  flex: none;
  align-self: center;
}

/* zone gauge */
.gauge {
  margin-top: 0.4rem;
}

.gauge__track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.gauge__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--growing-bg);
  border-radius: var(--radius-pill);
}

.gauge__marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 4px;
  border-radius: 2px;
  margin-left: -2px;
}

.gauge__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  font-size: 0.64rem;
  color: var(--text-faint);
}

/* lean / stat block */
.statline {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.statline .big {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-stat);
  line-height: 1;
}

.statline .unit {
  font-size: 0.8rem;
  color: var(--text-faint);
}

.chips {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--neutral-bg);
  color: var(--text-dim);
}

.rec {
  margin-top: 1rem;
  padding-left: 0.8rem;
  border-left: 3px solid var(--accent);
  font-size: 0.9rem;
}

.sparkrow {
  margin-top: 1rem;
}

/* experiment before/after */
.exp {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.8rem;
  align-items: center;
  margin-top: 0.4rem;
}

.exp__col {
  text-align: center;
  padding: 0.9rem 0.5rem;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.exp__col .k {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.exp__col .v {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.7rem;
  margin-top: 0.2rem;
}

.exp__arrow {
  color: var(--text-faint);
}

.exp__verdict {
  margin-top: 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--growing);
}

.exp__verdict span {
  display: block;
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--text-faint);
  margin-top: 0.2rem;
}

/* ---- Honesty -------------------------------------------------------------- */

.honesty {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-soft);
}

.honesty__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.honesty h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 0.6rem;
}

.honesty__lead {
  margin-top: 1.2rem;
  color: var(--text-dim);
  font-size: 1.08rem;
  max-width: 40ch;
}

.honesty__list {
  list-style: none;
  display: grid;
  gap: 0.8rem;
}

.htile {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.htile__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--neutral-bg);
  color: var(--accent);
}

.htile h4 {
  font-size: 0.98rem;
  font-weight: 700;
}

.htile p {
  font-size: 0.86rem;
  color: var(--text-dim);
  margin-top: 0.2rem;
}

/* ---- Final CTA ------------------------------------------------------------ */

.cta {
  padding-block: var(--section-y);
}

.cta__card {
  position: relative;
  text-align: center;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(200, 245, 79, 0.12), transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(1.2rem, 0.5rem + 4vw, 4rem);
  overflow: hidden;
}

.cta__card h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 0 auto;
}

.cta__card h2 em {
  font-style: normal;
  color: var(--accent);
}

.cta__sub {
  margin-top: 1.1rem;
  color: var(--text-dim);
  font-size: 1.08rem;
  max-width: 44ch;
  margin-inline: auto;
}


.cta__form {
  margin-top: 2rem;
  max-width: 480px;
  margin-inline: auto;
  text-align: left;
}

.cta__trust {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--text-faint);
  text-align: center;
}

/* Small signature line — quiet, confident, no hype. */
.cta__founder {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  max-width: 34ch;
  margin-inline: auto;
  font-size: 0.8rem;
  color: var(--text-faint);
  text-align: center;
}

/* ---- Footer --------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 2.5rem;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--text-faint);
  font-size: 0.85rem;
}

.footer__links {
  display: flex;
  gap: 1.4rem;
}

.footer__links a:hover {
  color: var(--text-dim);
}

/* ---- Typographic refinements ---------------------------------------------- */

/* Balance multi-line headings into even ragged lines (no lone last word);
   the hero h1 is excluded — its breaks are authored by hand above. */
.features__head h2,
.honesty h2,
.faq__head h2,
.cta__card h2 {
  text-wrap: balance;
}

/* Prevent orphaned single-word last lines in body copy. */
.hero__sub,
.feature p,
.honesty__lead,
.faq__item p,
.cta__sub {
  text-wrap: pretty;
}

/* ---- Trust strip (below hero) --------------------------------------------- */

.trust-strip {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(17, 22, 31, 0.5), transparent);
}

.trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.7rem 2.1rem;
  padding-block: 1.05rem;
}

.trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
}

.trust-strip__item svg {
  color: var(--accent-dim);
  flex: none;
}

/* ---- FAQ ------------------------------------------------------------------ */

.faq {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-soft);
}

.faq__head {
  text-align: center;
  max-width: 40ch;
  margin: 0 auto clamp(2rem, 1rem + 3vw, 3.2rem);
}

.faq__head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 0.5rem;
}

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 880px;
  margin-inline: auto;
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem;
}

.faq__item h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.faq__item p {
  margin-top: 0.5rem;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ---- Sticky mobile CTA ---------------------------------------------------- */

.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none; /* enabled on mobile via media query */
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem max(var(--screen-x), 0.95rem);
  padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  background: rgba(10, 13, 18, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(120%);
  transition: transform var(--dur) var(--ease);
  pointer-events: none;
}

.stickybar.is-visible {
  transform: none;
  pointer-events: auto;
}

.stickybar__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.stickybar__text strong {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.stickybar__text span {
  font-size: 0.74rem;
  color: var(--text-dim);
}

.stickybar .btn {
  flex: none;
  padding: 0.78rem 1.35rem;
}

/* ---- Hero risk-reducer ---------------------------------------------------- */

/* Founding-member incentive — a lime callout that stands out above the form. */
.hero__offer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.5rem;
  max-width: 460px;
  padding: 0.8rem 1.05rem;
  border: 1px solid rgba(200, 245, 79, 0.35);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(200, 245, 79, 0.12), rgba(200, 245, 79, 0.045));
  box-shadow: 0 0 30px -8px rgba(200, 245, 79, 0.3);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text);
}

.hero__offer-icon {
  flex: none;
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(200, 245, 79, 0.55));
}

.hero__offer strong {
  font-weight: 700;
  color: var(--text);
}

.hero__offer em {
  font-style: normal;
  font-weight: 800;
  color: var(--accent);
}

.hero__offer + .hero__form {
  margin-top: 1.4rem;
}

.hero__secondary {
  margin-top: 1.2rem;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.hero__risk {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* When the positioning line precedes it, tuck the trust line closer. */
.hero__secondary + .hero__risk {
  margin-top: 0.55rem;
}

.hero__risk svg {
  color: var(--growing);
  flex: none;
}

/* ---- Problem -------------------------------------------------------------- */

/* ---- Comparison strip (5-column, below hero) ------------------------------ */

.logostrip {
  padding-block: clamp(2.4rem, 1.4rem + 3vw, 4rem);
  border-top: 1px solid var(--line-soft);
}

.logostrip__lead {
  text-align: center;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  color: var(--text-dim);
  max-width: 48ch;
  margin: 0 auto;
  line-height: 1.5;
}

.logostrip__lead strong {
  color: var(--text);
  font-weight: 700;
}

.compare5 {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8rem;
  align-items: stretch;
  margin-top: clamp(1.6rem, 1rem + 1.5vw, 2.4rem);
}

.compare5__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 1.5rem 0.7rem;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}

.compare5__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.4;
}

.compare5__name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.compare5__desc {
  font-size: 0.76rem;
  color: var(--text-faint);
  line-height: 1.4;
}

/* RepCurve — the centre column: brighter, bigger, full colour. */
.compare5__col--rc {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(200, 245, 79, 0.1), transparent 70%),
    var(--surface);
  border-color: var(--line);
  box-shadow: 0 30px 80px -50px rgba(0, 0, 0, 0.9);
  padding-block: 1.9rem;
}

.compare5__col--rc .compare5__logo {
  width: 54px;
  height: 42px;
  filter: none;
  opacity: 1;
}

.compare5__col--rc .compare5__name {
  color: var(--text);
  font-size: 1.1rem;
}

.compare5__col--rc .compare5__desc {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.82rem;
}

@media (max-width: 820px) {
  .compare5 {
    grid-template-columns: 1fr;
    max-width: 24rem;
    margin-inline: auto;
    gap: 0.6rem;
  }
}

/* ---- Problem -------------------------------------------------------------- */

.noise {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(17, 22, 31, 0.4), transparent);
  overflow: hidden; /* contain tilted/overlapping cards */
}

.noise__inner {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.noise__h {
  margin-top: 0.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Each row is a clash: two DIFFERENT sources giving opposite advice, with a
   "vs" badge marking the contradiction. Source labels turn topics into experts
   who disagree. Two stray opinions float just outside the debate. */
.advice {
  position: relative;
  max-width: 640px;
  margin: clamp(2.2rem, 1.5rem + 1.6vw, 3.4rem) auto;
  padding-block: 3.2rem; /* room for the floating strays above & below */
}

.advice__debate {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(27rem, 100%);
  margin-inline: auto;
}

/* card  vs  card — the two cards are equal width and hug the central badge. */
.advice__row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
}

.advice__card {
  --tilt: 0deg;
  position: relative; /* allow z-index lift on hover */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.5rem 0.7rem;
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
  transform: rotate(var(--tilt));
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.8);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.advice__what {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.95rem, 0.82rem + 0.5vw, 1.2rem);
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}

/* The attribution — this is what reads as "a different expert". */
.advice__who {
  font-family: var(--ui);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* The contradiction marker between the two opinions. */
.advice__vs {
  flex: none;
  align-self: center;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  font-family: var(--ui);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: 50%;
}

/* Stray opinions float just outside the debate, lightly tilted. */
.advice__stray {
  position: absolute;
  width: max-content;
}
.advice__stray--1 { top: 0;    left: 0;  --tilt: -5deg; } /* above-left */
.advice__stray--2 { bottom: 0; right: 0; --tilt: 4deg; }  /* below-right */

/* Pick one up: it straightens, lifts and brightens. */
.advice__card:hover {
  z-index: 5;
  transform: rotate(0deg) scale(1.05);
  border-color: var(--accent-dim);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.9);
}

/* On phones the absolute strays would collide with the debate — stack them. */
@media (max-width: 600px) {
  .advice {
    padding-block: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    max-width: 460px;
  }
  .advice__stray {
    position: static;
  }
}

/* Closing crescendo: observation (medium) → setup (quiet) → belief (dominant). */
.noise__close {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--text-dim);
}

.noise__close-a,
.noise__close-b {
  display: block;
  text-wrap: balance;
}

.noise__close-b {
  margin-top: 0.3rem;
  color: var(--text);
}

.noise__close-b em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap; /* keep the volt phrase intact */
}

/* Quiet setup line. */
.noise__bridge {
  margin-top: 1.4rem;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  line-height: 1.5;
  color: var(--text-faint);
}

/* The belief — the visual endpoint, the largest line in the section. */
.noise__belief {
  margin-top: 0.65rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.1rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

/* ---- The gap (tracked data → unanswered question → need for RepCurve) ----- */

.gap {
  padding-block: var(--section-y);
}

.gap__inner {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.gap__h {
  margin-top: 0.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text);
}

.gap__sub {
  margin-top: 0.9rem;
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
  color: var(--text-dim);
}

/* The data you already collect — clean stat cards, not a dashboard. */
.datacards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem);
}

.datacard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem) 1rem;
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

.datacard__title {
  font-family: var(--ui);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.datacard__value {
  margin-top: 0.2rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.datacard__unit {
  font-size: 0.58em;
  color: var(--text-dim);
  margin-left: 0.12em;
}

.datacard__desc {
  font-size: 0.72rem;
  color: var(--text-faint);
}

/* Vertical connector down to the question. */
.gap__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-faint);
  margin-top: clamp(1.6rem, 1rem + 1.2vw, 2.4rem);
}

.gap__line {
  width: 1px;
  height: clamp(1.6rem, 1rem + 1.4vw, 2.6rem);
  background: linear-gradient(180deg, transparent, var(--line));
}

.gap__connector svg {
  margin-top: 0.25rem;
}

/* The unanswered question — the emotional pivot of the section. */
.gap__question {
  max-width: 640px;
  margin: clamp(1.2rem, 0.8rem + 1vw, 1.8rem) auto 0;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.3rem) clamp(1.5rem, 1rem + 2vw, 2.8rem);
  background: radial-gradient(130% 130% at 50% 0%, rgba(25, 32, 44, 0.55), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 40px 90px -52px rgba(0, 0, 0, 0.92);
}

.gap__question p {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

.gap__question em {
  font-style: normal;
  color: var(--accent);
}

/* Closing bridge into the product. */
.gap__bridge {
  margin-top: clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--text-dim);
}

.gap__bridge-a,
.gap__bridge-b {
  display: block;
}

.gap__bridge-b {
  margin-top: 0.2rem;
  color: var(--text);
}

.gap__bridge-b em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

@media (max-width: 720px) {
  .datacards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }
}

/* ---- The answers (what RepCurve helps you discover) ----------------------- */

.answers {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-soft);
}

.answers__inner {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

.answers__h {
  margin-top: 0.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text);
}

.answers__sub {
  margin-top: 0.9rem;
  max-width: 46ch;
  margin-inline: auto;
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--text-dim);
}

.answers__sub strong {
  color: var(--text);
  font-weight: 600;
}

.insightgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9rem, 0.6rem + 0.8vw, 1.3rem);
  margin-top: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem);
  text-align: left;
}

/* Each card reads as a discovered signal, not a feature. */
.insight {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.3rem, 1rem + 1vw, 1.85rem);
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.insight:hover {
  transform: translateY(-3px);
  border-color: var(--line);
  box-shadow: 0 28px 56px -32px rgba(0, 0, 0, 0.9);
}

.insight__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* The hook — a statement, not a category tag. */
.insight__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}

/* Subtle data cue — muted, never a chart. */
.insight__spark {
  flex: none;
  margin-top: 0.35rem;
  color: var(--text-faint);
  opacity: 0.6;
}

/* The short story beneath — muted, with one lime phrase that lands. */
.insight__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.insight__body p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.insight__body em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}

.answers__bridge {
  margin-top: clamp(2rem, 1.4rem + 1.4vw, 3rem);
  max-width: 620px;
  margin-inline: auto;
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.15rem);
  line-height: 1.55;
  color: var(--text-dim);
}

.answers__bridge em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}

@media (max-width: 720px) {
  .insightgrid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ---- The outcome (imagine knowing — certainty replacing uncertainty) ------ */

.outcome {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-soft);
}

.outcome__inner {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

.outcome__h {
  margin-top: 0.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text);
}

.outcomegrid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9rem, 0.6rem + 0.9vw, 1.4rem);
  margin-top: clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem);
  text-align: left;
}

/* Large, confident outcome cards. */
.ocard {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.ocard:hover {
  transform: translateY(-3px);
  border-color: var(--line);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9);
}

/* The affirmation — what was uncertain is now known. */
.ocard__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: rgba(200, 245, 79, 0.12);
  border: 1px solid rgba(200, 245, 79, 0.28);
  color: var(--accent);
}

.ocard__text {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}

.ocard__text em {
  font-style: normal;
  color: var(--accent);
}

/* Aspirational closer: guessing → knowing. */
.outcome__close {
  margin-top: clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.outcome__close-a,
.outcome__close-b {
  display: block;
  text-wrap: balance;
}

.outcome__close-a {
  color: var(--text-faint);
}

.outcome__close-b {
  margin-top: 0.25rem;
  color: var(--text);
}

.outcome__close-b em {
  font-style: normal;
  color: var(--accent);
}

@media (max-width: 720px) {
  .outcomegrid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ---- Shift ---------------------------------------------------------------- */

.shift {
  padding-block: var(--section-y);
}

.shift .feature {
  border-top: none;
  padding-block: 0;
}

.shift__h {
  font-family: var(--ui);
  font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 0.7rem;
  text-wrap: balance;
}

.shift__h em {
  font-style: normal;
  color: var(--accent);
}

.insight {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text);
}

.insight b {
  color: var(--accent);
  font-weight: 700;
}

/* ---- How it works --------------------------------------------------------- */

.how {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-soft);
}

.how__head {
  text-align: center;
  max-width: 40ch;
  margin: 0 auto clamp(2rem, 1rem + 3vw, 3.2rem);
}

.how__head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 0.5rem;
  text-wrap: balance;
}

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.step {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem;
}

.step__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.step h3 {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin-top: 0.5rem;
}

.step p {
  margin-top: 0.5rem;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ---- Supplement / compound rows ------------------------------------------- */

.suprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0;
}

.suprow + .suprow {
  border-top: 1px solid var(--line-soft);
}

.suprow__name {
  font-weight: 600;
  font-size: 0.92rem;
}

.suprow__meta {
  font-size: 0.76rem;
  color: var(--text-faint);
  margin-top: 1px;
}

.suprow__tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--neutral-bg);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  flex: none;
}

.suprow__tag.tag-compound {
  color: var(--accent);
  background: rgba(200, 245, 79, 0.1);
}

.suprow__note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.76rem;
  color: var(--text-faint);
}

.suprow__note svg {
  color: var(--growing);
  flex: none;
}

/* ---- Data meter + trust rows (Signal you can trust) ----------------------- */

.dmeter {
  margin-top: 0.7rem;
}

.dmeter__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.dmeter__fill {
  display: block;
  height: 100%;
  background: var(--building);
  border-radius: var(--radius-pill);
}

.dmeter__label {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--building);
}

.trust-rows {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.65rem;
}

.trust-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.trust-row .pill,
.trust-row .chip {
  flex: none;
}

/* ---- Founder -------------------------------------------------------------- */

.founder {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-soft);
}

.founder__inner {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

.founder__quote {
  margin-top: 1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--text);
}

.founder__quote span {
  display: block;
  margin-top: 1rem;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text-dim);
}

.founder__sign {
  margin-top: 1.4rem;
  font-weight: 700;
  color: var(--accent);
}

/* ---- Optional follow-up question (post-signup) ---------------------------- */

.followup {
  margin-top: 1.1rem;
  text-align: left;
  border-top: 1px solid var(--line-soft);
  padding-top: 1.1rem;
}

.followup__q {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-bottom: 0.6rem;
}

.followup textarea {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--ui);
  font-size: 0.95rem;
  padding: 0.7rem 0.85rem;
}

.followup textarea:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px rgba(200, 245, 79, 0.12);
}

.followup__actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin-top: 0.6rem;
}

.followup__skip {
  font-size: 0.82rem;
  color: var(--text-faint);
  background: none;
  border: none;
  cursor: pointer;
}

.followup__skip:hover {
  color: var(--text-dim);
}

.followup__done {
  font-size: 0.9rem;
  color: var(--growing);
}

/* ---- Scroll reveal -------------------------------------------------------- */

/* Animate only when JS is present; no-JS views show everything immediately. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---- Responsive ----------------------------------------------------------- */

@media (max-width: 920px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  /* Copy + email form lead on mobile; the phone mockup follows so the
     primary conversion action stays within the first screen. */
  .phone {
    order: 0;
    width: min(380px, 92%);
  }
  .feature {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  .feature:nth-child(even) .feature__media {
    order: 0;
  }
  .honesty__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 720px) {
  .nav__inner { height: 60px; }
  /* Lift the hero email form within the first screen on phones. */
  .hero { padding-top: 1.6rem; }
  .hero__sub { margin-top: 1.1rem; }
  .hero__form { margin-top: 1.5rem; }
  .signup {
    flex-direction: column;
    padding: 0.7rem;
  }
  .signup input {
    padding: 0.8rem 0.9rem;
  }
  .signup .btn {
    width: 100%;
  }
  .hero__trust { gap: 0.3rem 0.8rem; }
  .faq__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  /* Sticky CTA is a mobile-only convenience; JS toggles .is-visible. */
  .stickybar { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  /* Keep the hero chart fully rendered when its entrance motion is disabled. */
  .js .chartcard__growth {
    stroke-dashoffset: 0;
  }
  .js .chartcard__volume {
    opacity: 0.7;
  }
}

/* ---- Legal pages (privacy / terms) ---------------------------------------- */

.legal {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.legal__inner {
  max-width: 70ch;
  margin-inline: auto;
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.6rem;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.9rem;
}

.legal__back:hover {
  color: var(--text);
}

.legal h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.legal__updated {
  margin-top: 0.6rem;
  color: var(--text-faint);
  font-size: 0.9rem;
}

.legal h2 {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-top: 2.2rem;
}

.legal p,
.legal li {
  color: var(--text-dim);
  line-height: 1.65;
}

.legal p {
  margin-top: 0.9rem;
}

.legal ul {
  margin-top: 0.7rem;
  padding-left: 1.2rem;
}

.legal li {
  margin-top: 0.4rem;
}

.legal strong {
  color: var(--text);
  font-weight: 700;
}

.legal a {
  color: var(--accent);
}

.legal a:hover {
  text-decoration: underline;
}