/*
  theultimaterevenueshare.com — standalone stylesheet.

  This file cannot @import front/'s Tailwind build (different stack, no build
  step here), so the palette below is a deliberate, hand-copied subset of the
  CSS custom properties in front/src/app/globals.css — both the light AND
  dark token sets, including the aurora ("landing-*") gradients. If those
  values change, re-sync this block by hand — there is no shared import.
*/

:root {
  --color-primary: #3454CF;
  --color-primary-hover: #2A43A6;
  --color-secondary: #5B62C7;
  --color-accent: #FEB719;
  --gradient-brand-from: #3454CF;
  --gradient-brand-via: #6A5BD6;
  --gradient-brand-to: #9B4DEC;

  /* Aurora — same recipe and token names as the app's landing hero */
  --landing-glow-1: rgba(52, 84, 207, 0.42);
  --landing-glow-2: rgba(124, 58, 237, 0.34);
  --landing-glow-3: rgba(91, 98, 199, 0.30);
  --landing-glow-4: rgba(124, 58, 237, 0.18);
  --landing-base-1: #eef1ff;
  --landing-base-2: #e6eaff;
  --landing-base-3: #efe7ff;

  --color-dark: #171717;
  --color-success: #27AE60;
  --color-error: #C44B8B;
  --color-gold: #FEB719;
  --color-gold-wash: #FFF9EC;
  --color-warning-text: #92400E;
  --color-text-primary: #2C2E3E;
  --color-text-secondary: #767676;
  --color-text-on-primary: #FFFFFF;
  --color-background: #FFFFFF;
  --color-surface: #F8F9FF;
  --color-primary-soft: #EEF1FA;
  --color-border: #D8D8D8;
  --color-border-light: #E3E3E3;
  --color-card-bg: #FFFFFF;

  /* images/mark.png is a fixed dark-purple glyph with no light/dark variant,
     so its backing chip must hold the same light value in both color schemes
     — unlike --color-primary-soft, this token is never redefined for dark mode. */
  --color-wordmark-chip: #EEF1FA;

  /* Frosted-glass surfaces — reserved for cards that sit on top of the aurora */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.74);
  --glass-border: rgba(255, 255, 255, 0.7);

  --shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.05);
  --shadow-md: 0 16px 40px -18px rgba(23, 23, 23, 0.22);
  --shadow-lg: 0 32px 64px -24px rgba(23, 23, 23, 0.24);

  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1120px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

/* Dark mode — same variable names, values ported verbatim from the app's
   .dark class. This site has no theme toggle, so it follows the OS/browser
   preference only. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #A6A6A6;

    --gradient-brand-from: #6F8BFF;
    --gradient-brand-via: #9B8CFF;
    --gradient-brand-to: #C58BFF;

    --landing-glow-1: rgba(108, 132, 255, 0.45);
    --landing-glow-2: rgba(149, 97, 255, 0.42);
    --landing-glow-3: rgba(72, 104, 247, 0.34);
    --landing-glow-4: rgba(149, 97, 255, 0.26);
    --landing-base-1: #0f1220;
    --landing-base-2: #131426;
    --landing-base-3: #1b1233;

    --color-background: #171717;
    --color-card-bg: #242424;
    --color-surface: #1E1E1E;
    --color-primary-soft: #1E2A4A;
    --color-border: #787878;
    --color-border-light: #686868;
    --color-gold-wash: #2A2210;
    --color-warning-text: #FCD34D;

    --glass-bg: rgba(255, 255, 255, 0.07);
    --glass-bg-strong: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 16px 40px -18px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 32px 70px -20px rgba(90, 75, 200, 0.4);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text-primary);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
}

@media (prefers-color-scheme: dark) {
  /* color-primary is a fixed brand hue in both modes (matches the app), but
     that fixed blue reads too dark on a near-black background — use the
     brighter dark-mode gradient stop for inline text links instead. */
  a {
    color: var(--gradient-brand-from);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 80px 0;
  /* Keeps an anchor-jump target (the hero's "See How Much You'd Earn" link
     goes to #the-math) from landing flush under the sticky header. */
  scroll-margin-top: 76px;
}

.section-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin: 0 0 8px;
}

@media (prefers-color-scheme: dark) {
  .section-label {
    color: var(--gradient-brand-from);
  }
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 12px;
}

.section-subtitle {
  font-size: 15px;
  color: var(--color-text-secondary);
  margin: 0 0 28px;
  line-height: 1.6;
}

.gradient-text {
  background-image: linear-gradient(110deg, var(--gradient-brand-from), var(--gradient-brand-via), var(--gradient-brand-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gradient-bg {
  background: linear-gradient(135deg, var(--gradient-brand-from), var(--gradient-brand-via), var(--gradient-brand-to));
}

/* ---------- Scroll reveal ---------- */
/* Base state is fully visible; only under an explicit "no-preference" motion
   query do we hide-then-reveal, so reduced-motion users and no-JS visitors
   never lose content. main.js adds .is-visible via IntersectionObserver. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  padding: 15px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, opacity 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  width: 100%;
}

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

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  box-shadow: 0 12px 28px -10px rgba(52, 84, 207, 0.55);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

@media (hover: hover) {
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px -10px rgba(52, 84, 207, 0.6);
  }
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border);
}

.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Sits on the hero's aurora, so it gets a frosted-glass treatment instead of
   the plain border used everywhere else this class appears. */
.hero .btn-ghost {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero .btn-ghost:hover {
  background: var(--glass-bg-strong);
}

.btn-white {
  background: #FFFFFF;
  color: var(--color-primary);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.3);
}

.btn-white:hover {
  opacity: 0.92;
}

@media (hover: hover) {
  .btn-white:hover {
    transform: translateY(-1px);
  }
}

.btn-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ---------- Header ---------- */

.site-header {
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* The R mark's violet/indigo strokes sit close in tone to both the dark
   aurora behind the scrolled header and (more faintly) plain white, so the
   chip uses a tinted brand wash rather than a translucent glass tone —
   deliberately visible in light mode too, not just riding on the blur. */
.wordmark-mark {
  width: 21px;
  height: 24px;
  border-radius: 7px;
  padding: 5px 6px;
  background: var(--color-wordmark-chip);
  box-shadow: inset 0 0 0 1px rgba(84, 82, 178, 0.25);
  flex-shrink: 0;
  /* Nudges the glyph's optical centre (it sits slightly high in its own
     crop) onto the wordmark's, rather than centering the two boxes. */
  margin-top: 1px;
}

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

.hero {
  position: relative;
  padding-top: 48px;
  padding-bottom: 72px;
  overflow: hidden;
  background-color: var(--landing-base-1);
  background-image:
    radial-gradient(760px 560px at 2% 0%, var(--landing-glow-4), transparent 58%),
    radial-gradient(1200px 820px at 80% 12%, var(--landing-glow-1), transparent 62%),
    radial-gradient(1050px 760px at 6% 92%, var(--landing-glow-2), transparent 60%),
    radial-gradient(950px 720px at 52% 112%, var(--landing-glow-3), transparent 60%),
    linear-gradient(140deg, var(--landing-base-1) 0%, var(--landing-base-2) 50%, var(--landing-base-3) 100%);
}

/* Softens the seam where the aurora meets the calm section below it. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(to bottom, transparent 72%, var(--color-background) 100%);
}

.hero > .container {
  position: relative;
  z-index: 2;
}

.hero-image-wrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  background-image: linear-gradient(135deg, var(--gradient-brand-from), var(--gradient-brand-via), var(--gradient-brand-to));
  margin-bottom: 40px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 30px 70px -24px rgba(52, 84, 207, 0.4),
    0 14px 36px -16px rgba(155, 77, 236, 0.3);
}

.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 20px;
}

/* Full-strength text-primary, not the muted --color-text-secondary gray:
   the light aurora base is very pale (~0.83 relative luminance), so a
   lightened gray fails 4.5:1 there. Hierarchy comes from size/weight instead. */
.hero p.lede {
  font-size: 18px;
  color: var(--color-text-primary);
  max-width: 42ch;
  margin: 0 0 32px;
  line-height: 1.6;
}

/* ---------- The Math ---------- */

.math-headline {
  text-align: center;
  margin-bottom: 40px;
}

.math-headline .setup {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 4px;
}

.math-headline .figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 6vw + 2rem, 6rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: 8px 0 16px;
}

.math-headline .caption {
  font-size: 15px;
  color: var(--color-text-secondary);
  max-width: 46ch;
  line-height: 1.6;
  margin: 0 auto;
}

.divider {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: 40px 0;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.bar-row .bar-label {
  flex: 0 0 128px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.bar-row.is-headline .bar-label {
  color: var(--color-text-primary);
  font-weight: 600;
}

.bar-track {
  flex: 1;
  height: 12px;
  background: var(--color-border-light);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bar-row.is-headline .bar-fill {
  background: linear-gradient(90deg, var(--gradient-brand-from), var(--gradient-brand-via), var(--gradient-brand-to));
}

.bar-row .bar-amount {
  flex: 0 0 64px;
  text-align: right;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
}

.headline-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-gold-wash);
  color: var(--color-warning-text);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 6px;
}

.rate-cards-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 18px;
}

.rate-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
  .rate-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border);
  }
}

.rate-card .rate-name {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 6px;
}

.rate-card .rate-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  margin: 0 0 4px;
}

@media (prefers-color-scheme: dark) {
  .rate-card .rate-value {
    color: var(--gradient-brand-from);
  }
}

.rate-card .rate-note {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}

.math-footnote {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-top: 20px;
}

.math-footnote a {
  text-decoration: underline;
}

/* ---------- Calculator ---------- */

/* A restrained echo of the hero aurora, scoped tightly behind the card so
   the calculator reads as the section's centerpiece rather than a form
   dropped into open space. */
#calculator {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  background-image:
    radial-gradient(640px 460px at 84% 6%, var(--landing-glow-4), transparent 60%),
    radial-gradient(560px 460px at 10% 100%, var(--landing-glow-3), transparent 62%);
}

#calculator > .container {
  position: relative;
  z-index: 1;
}

.calc-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 28px;
  /* shadow-lg for depth, plus a soft frosted-glass ring (the same --glass-bg
     token the hero's CTA and signup panel use) so the card visibly lifts off
     the aurora behind it instead of just sitting on the surface color. */
  box-shadow: var(--shadow-lg), 0 0 0 8px var(--glass-bg);
}

.calc-label {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
}

.calc-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  margin: 0 0 20px;
}

@media (prefers-color-scheme: dark) {
  .calc-value {
    color: var(--gradient-brand-from);
  }
}

.slider-wrap {
  position: relative;
  margin-bottom: 12px;
  padding-top: 34px;
}

/* The headline promise ($50/day at 100 requests) tied back to the slider —
   a pill callout rather than bare text so it reads as a deliberate
   annotation instead of stray label copy crowding the track. */
.slider-tick-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .slider-tick-label {
    color: var(--gradient-brand-from);
  }
}

.slider-tick-label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 2px;
  height: 9px;
  background: var(--color-primary);
  transform: translateX(-50%);
}

@media (prefers-color-scheme: dark) {
  .slider-tick-label::after {
    background: var(--gradient-brand-from);
  }
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
  outline: none;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-card-bg);
  box-shadow: 0 2px 8px rgba(52, 84, 207, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease;
}

input[type='range']::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-card-bg);
  box-shadow: 0 2px 8px rgba(52, 84, 207, 0.4);
  cursor: pointer;
}

@media (hover: hover) {
  input[type='range']:hover::-webkit-slider-thumb {
    transform: scale(1.08);
  }
}

input[type='range']:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.slider-min-max {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 20px;
}

.chip-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.chip {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.chip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (hover: hover) {
  .chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}

.chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

@media (hover: hover) {
  .chip.is-active:hover {
    color: var(--color-text-on-primary);
  }
}

.calc-outputs {
  border-top: 1px solid var(--color-border-light);
  padding-top: 20px;
}

.calc-output-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

/* The month figure is the number a member actually cares about — it gets
   the same size-and-gradient treatment as the hero's $50.00, stacked so the
   dollar amount reads first rather than sharing a line with its label. */
.calc-output-row.is-emphasized {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border-light);
}

.calc-output-row.is-emphasized #calc-monthly {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw + 1.25rem, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1;
  background-image: linear-gradient(110deg, var(--gradient-brand-from), var(--gradient-brand-via), var(--gradient-brand-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.calc-output-row .calc-output-label {
  font-weight: 400;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.calc-note {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 20px 0 0;
  line-height: 1.6;
}

/* ---------- Video ---------- */

.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-dark);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-lg);
}

.video-wrap img,
.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(52, 84, 207, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #FFFFFF;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .video-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

.video-play-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.video-play-btn .icon {
  width: 24px;
  height: 24px;
  margin-left: 3px;
}

.video-coming-soon {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: rgba(23, 23, 23, 0.85);
  color: #FFFFFF;
  text-align: center;
  padding: 24px;
}

.video-coming-soon.is-visible {
  display: flex;
}

.video-coming-soon strong {
  font-size: 16px;
}

.video-coming-soon span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

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

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  display: flex;
  gap: 18px;
  margin-bottom: 32px;
}

.step-number {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shared "icon chip" treatment for the .step-icon / .tip-icon / .trust-icon
   glyph wrappers — a soft tinted backdrop rather than a bare line icon. */
.step-icon,
.tip-icon,
.trust-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
}

@media (prefers-color-scheme: dark) {

  .step-icon,
  .tip-icon,
  .trust-icon {
    color: var(--gradient-brand-from);
  }
}

.step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 6px;
}

.step-body {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ---------- Tips ---------- */

#tips {
  background: var(--color-surface);
}

.tip-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

@media (hover: hover) {
  .tip-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}

.tip-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 6px;
}

.tip-body {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ---------- Affiliate ---------- */

.affiliate-intro {
  font-size: 16px;
  line-height: 1.7;
  max-width: 46ch;
  margin: 0 0 28px;
  color: var(--color-text-secondary);
}

.affiliate-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

@media (hover: hover) {
  .affiliate-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}

.affiliate-card .affiliate-tier {
  font-weight: 400;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 4px;
}

.affiliate-card .affiliate-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 10px 0 4px;
}

.affiliate-card .affiliate-range {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  .affiliate-card .affiliate-range {
    color: var(--gradient-brand-from);
  }
}

.affiliate-rules {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.affiliate-rules li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 8px;
  line-height: 1.5;
}

.affiliate-rules li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-text-secondary);
}

.affiliate-link-preview {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  position: relative;
}

.affiliate-link-preview .preview-tag {
  position: absolute;
  top: -10px;
  left: 14px;
  background: var(--color-background);
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.affiliate-link-preview .preview-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 4px;
}

.affiliate-link-preview .preview-url {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 14px;
  color: var(--color-text-primary);
  word-break: break-all;
}

/* ---------- Trust ---------- */

.trust-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.trust-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  border-bottom: 1px solid var(--color-border-light);
}

.trust-row:last-child {
  border-bottom: none;
}

.trust-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 5px;
}

.trust-body {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

.terms-link {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 24px;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.social-proof-slot {
  display: none;
}

/* ---------- Signup ---------- */

/* A second, quieter echo of the hero aurora — same token recipe, always
   rendered on the fixed dark base so it stays legible regardless of the
   visitor's light/dark preference. */
#signup {
  position: relative;
  overflow: hidden;
}

.signup-section {
  position: relative;
  background-color: var(--color-dark);
  background-image:
    radial-gradient(900px 620px at 85% -10%, rgba(124, 58, 237, 0.34), transparent 62%),
    radial-gradient(820px 640px at 8% 110%, rgba(52, 84, 207, 0.4), transparent 60%),
    linear-gradient(140deg, #171717 0%, #1a1930 55%, #22163a 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.signup-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: #FFFFFF;
}

.signup-section .lede {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 28px;
  line-height: 1.6;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.signup-form input[type='email'] {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 15px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: #FFFFFF;
  color: var(--color-text-primary);
  width: 100%;
  transition: box-shadow 0.2s ease;
}

.signup-form input[type='email']:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent);
}

.signup-form input[type='email']::placeholder {
  color: var(--color-text-secondary);
}

/* Frosted-glass panel — the one card this page deliberately sits on the
   aurora echo, per the "hint of glass over the aurora" treatment. */
.signup-next-steps {
  margin: 0 0 20px;
  padding: 20px 22px;
  counter-reset: step;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* list-style:none has to target the actual <ol>, not this wrapping div — the
   ol's own UA-stylesheet decimal markers otherwise still render alongside
   the custom counter() numbering below, doubling every digit ("1. 1."). */
.signup-next-steps ol {
  list-style: none;
}

.signup-next-steps .signup-next-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.signup-next-steps li {
  counter-increment: step;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 7px;
  padding-left: 22px;
  position: relative;
  line-height: 1.6;
}

.signup-next-steps li:last-child {
  margin-bottom: 0;
}

.signup-next-steps li::before {
  content: counter(step) '.';
  position: absolute;
  left: 0;
  font-weight: 600;
  color: #FFFFFF;
}

.signup-footnote {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(52, 84, 207, 0.3);
  border-top-color: var(--color-primary);
  animation: spin 0.7s linear infinite;
  display: none;
}

.spinner.is-visible {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

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

.site-footer {
  padding: 56px 0 64px;
  border-top: 1px solid var(--color-border-light);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 22px 0;
  font-size: 14px;
}

.footer-contact-slot {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.footer-copyright {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 18px;
}

/* ---------- Terms page ---------- */

.terms-page h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.015em;
  margin: 40px 0 10px;
}

.terms-page .terms-updated {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 36px;
}

.terms-page h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  margin: 36px 0 10px;
}

.terms-page p {
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 66ch;
  color: var(--color-text-primary);
  margin: 0 0 14px;
}

.terms-page .back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.terms-page .back-link:hover {
  text-decoration: underline;
}

/* ---------- Desktop ---------- */

@media (min-width: 1024px) {
  .container {
    padding: 0 40px;
  }

  /* Generous vertical rhythm is the main luxury signal at this width — each
     section gets far more breathing room than the mobile 80px. */
  section {
    padding: 144px 0;
  }

  #calculator,
  #tips {
    padding: 128px 0;
  }

  .hero {
    padding-top: 64px;
    padding-bottom: 100px;
  }

  .hero .container {
    display: flex;
    align-items: center;
    gap: 80px;
  }

  .hero-text {
    flex: 0 0 520px;
    max-width: 560px;
  }

  .hero-image-wrap {
    flex: 1;
    max-width: 430px;
    margin-bottom: 0;
    order: 2;
  }

  .hero h1 {
    font-size: 68px;
  }

  .hero p.lede {
    font-size: 19px;
  }

  .btn-row {
    flex-direction: row;
  }

  .btn {
    width: auto;
  }

  /* The hero's two CTAs are the most important controls on the page — pin
     them to their content width so they never shrink into a wrapped label. */
  .hero .btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .math-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
  }

  .math-headline {
    text-align: left;
  }

  .math-headline .caption {
    margin: 0;
  }

  .rate-cards-title {
    margin-top: 0;
  }

  /* These two sections are the only ones whose content is a centered card
     narrower than the container — their heading centers to share the same
     edges as the card below it, instead of the left-aligned default every
     other (full-width) section uses. */
  #calculator .section-title,
  #video .section-title {
    text-align: center;
  }

  .calc-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 56px;
  }

  .video-wrap {
    max-width: 800px;
    margin: 0 auto;
  }

  .step-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  .step {
    flex-direction: column;
    margin-bottom: 0;
  }

  .tips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .tip-card {
    margin-bottom: 0;
  }

  .affiliate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
  }

  .affiliate-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .affiliate-card {
    margin-bottom: 0;
  }

  .trust-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .trust-row {
    border-right: 1px solid var(--color-border-light);
  }

  .trust-row:nth-child(2n) {
    border-right: none;
  }

  /* An odd row count (e.g. 7 disclosures) leaves the last item unpaired —
     span it full-width instead of leaving a half-empty row. */
  .trust-row:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: none;
  }

  .signup-section {
    padding: 80px;
  }

  .signup-inner {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
  }

  .signup-form {
    flex-direction: row;
  }

  .signup-form input[type='email'] {
    flex: 1;
  }

  .signup-form .btn {
    width: auto;
    flex-shrink: 0;
  }

  .signup-next-steps {
    text-align: left;
  }

  .footer-links {
    flex-direction: row;
    gap: 24px;
  }

  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}