/* Performance Pay Pro: "The Product Stage"
   Light theme, product-UI-led, mint/navy brand. */

:root {
  --navy: #142B50;
  --navy-soft: #24406e;
  --mint: #58C89D;
  --mint-dark: #3fa781;
  --mint-accessible: #1F6B4E;
  --pink: #E85D9E;
  --bg: #F2F7F5;
  --bg-alt: #EEF4F1;
  --white: #FFFFFF;
  --slate: #5A6B7E;
  --red-bg: #F8D7DA;
  --red-text: #9B2C36;
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-soft: 0 12px 30px rgba(20, 43, 80, 0.08);
  --shadow-lift: 0 20px 50px rgba(20, 43, 80, 0.14);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Theme-aware semantic tokens. Light values = the original, unchanged
     look. Dark values are set in the [data-theme="dark"] block below. */
  --text: var(--navy);
  --text-secondary: var(--navy-soft);
  --muted-text: var(--slate);
  --card-bg: var(--white);
  --card-bg-alt: var(--white);
  --border: rgba(20, 43, 80, 0.08);
  --border-soft: #dfe8e4;
  --border-dashed: #e2ebe7;
  --mint-accent: var(--mint-accessible);
  --red-text-ui: var(--red-text);
  --nav-bg: rgba(255, 255, 255, 0.72);
  --nav-border: rgba(20, 43, 80, 0.08);
  --ring-track: rgba(20, 43, 80, 0.1);
  --frame-border: transparent;
  --quote-edge: transparent;
  /* Section-band alternation: a visibly deeper surface tone (distinct from
     --bg-alt, which is reserved for fixed-light mockup interiors), used to
     make adjacent section boundaries legible without a divider element. */
  --band-alt: #E1EBE5;
}

/* Dark theme. Navy-derived surfaces; browser-chrome mockups and product
   screenshots (task tables, stat lines, calc chains, browser-body/chrome)
   intentionally keep their original light styling since they represent
   real app screenshots -- only the frames around them adapt. */
html[data-theme="dark"] {
  --bg: #0D1B33;
  --card-bg: #142B50;
  --card-bg-alt: #1A345E;
  --text: #F2F7F5;
  --text-secondary: #B9C6D8;
  --muted-text: #B9C6D8;
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.14);
  --border-dashed: rgba(255, 255, 255, 0.14);
  --mint-accent: #7FD8B4;
  --red-text-ui: #FF9FAE;
  --nav-bg: rgba(13, 27, 51, 0.72);
  --nav-border: rgba(255, 255, 255, 0.08);
  --ring-track: rgba(255, 255, 255, 0.15);
  --frame-border: rgba(255, 255, 255, 0.12);
  --quote-edge: rgba(88, 200, 157, 0.25);
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 20px 50px rgba(0, 0, 0, 0.45);
  --band-alt: #122A4A;
}

* { box-sizing: border-box; }
* , *::before, *::after {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

h1, h2, h3 { color: var(--text); font-weight: 800; margin: 0 0 0.5em; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); text-align: center; }
h3 { font-size: 1.25rem; }
p { color: var(--muted-text); }

.eyebrow {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--mint-accent);
  margin: 0 0 0.75rem;
}
.eyebrow.center { text-align: center; }

.section-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 5rem 3rem;
}
.section-inner.narrow { max-width: 620px; }
.section-sub {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 3rem;
  font-size: 1.05rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.btn-primary {
  background: var(--mint);
  color: var(--navy);
}
.btn-primary:hover { background: var(--mint-dark); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-outline {
  background: transparent;
  border-color: var(--text);
  color: var(--text);
}
.btn-outline:hover { background: var(--text); color: var(--bg); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-ghost {
  background: var(--card-bg);
  border-color: var(--border-soft);
  color: var(--text);
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(88, 200, 157, 0.45);
  transition: box-shadow 0.2s var(--ease);
}
.btn-sm { padding: 0.55rem 1.2rem; font-size: 0.9rem; }
.btn-lg { padding: 0.95rem 2rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* Nav: floating pill */
body { padding-top: 92px; }
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 2.5rem);
  max-width: 1100px;
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.nav-inner {
  margin: 0 auto;
  padding: 0.7rem 1.25rem 0.7rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
/* The right-hand controls read as one cluster, so the bar has a single
   consistent rhythm instead of space-between spreading each control apart. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
/* Every control in the cluster shares one height so the bar reads level. */
.nav-actions .theme-toggle,
.nav-actions .nav-toggle {
  width: 40px;
  height: 40px;
}
.nav-actions .btn-sm {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 1.15rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  font-size: 1.05rem;
}
.brand img { border-radius: 50%; width: 40px; height: 35px; object-fit: contain; flex-shrink: 0; }
.footer .brand img { width: 32px; height: 28px; }
.nav-links {
  display: flex;
  gap: 1.4rem;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.nav-links a:hover { color: var(--mint-accent); }
.nav-links a.active { color: var(--text); position: relative; }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--mint);
  border-radius: 2px;
}
/* Hero */
.hero { padding: 3.5rem 3rem 3rem; overflow: hidden; position: relative; }
.hero-inner {
  max-width: 1160px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-copy { min-width: 0; box-sizing: border-box; }
.hero-sub { font-size: 1.1rem; max-width: 46ch; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.75rem 0; }
.hero-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.hero-facts li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-fact-icon { flex: none; color: var(--mint-accent); }

.hero-mockup-wrap { position: relative; min-width: 0; }

/* Ambient background float: transform-only, decorative, behind hero content.
   The blobs sit partly outside the hero box (top:-80px / bottom:-140px) and
   get hard-clipped by this wrapper's overflow:hidden right at the section
   edge -- a mask fade keeps that clip from ever reading as a visible seam. */
.hero-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%);
}
.ambient-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
}
.ambient-shape-mint {
  width: 340px;
  height: 340px;
  background: var(--mint);
  top: -80px;
  left: 8%;
  animation: ambientFloatA 16s ease-in-out infinite;
}
.ambient-shape-pink {
  width: 280px;
  height: 280px;
  background: var(--pink);
  bottom: -140px;
  right: 4%;
  opacity: 0.14;
  animation: ambientFloatB 18s ease-in-out infinite;
}
@keyframes ambientFloatA {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, 24px); }
}
@keyframes ambientFloatB {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-24px, -18px); }
}

.chip {
  background: var(--card-bg);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  box-shadow: var(--shadow-soft);
}
.chip-outline {
  display: inline-block;
  background: transparent;
  border: 2px solid var(--mint);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.chip-float {
  position: relative;
  z-index: 3;
}

/* Fact-band marquee: continuous right-to-left strip of stat/feature chips,
   living inside the navy fact bar. Track is duplicated content, animated
   with transform only (translateX), so it never mutates layout on scroll
   or during the loop. Deliberately does not pause on hover; each chip gets
   its own hover lift instead. */
.fact-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  animation: marqueeScroll 35s linear infinite;
}
.marquee-track .marquee-item, .marquee-track .marquee-dot { flex-shrink: 0; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: transform 0.15s var(--ease), color 0.15s var(--ease);
}
.marquee-item:hover {
  transform: translateY(-2px);
  color: rgba(255, 255, 255, 0.98);
}
.marquee-check {
  color: var(--mint);
  flex-shrink: 0;
}
.marquee-dot {
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.7rem;
}

/* Browser chrome mockups */
.browser-frame {
  background: var(--white);
  border: 1px solid var(--frame-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.mini-frame {
  background: var(--white);
  border: 1px solid var(--frame-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.browser-chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  background: var(--bg-alt);
  border-bottom: 1px solid rgba(20,43,80,0.06);
}
.browser-chrome.sm { padding: 0.55rem 0.85rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-red { background: #F4867E; }
.dot-yellow { background: #F6C563; }
.dot-green { background: #6FCF97; }
.url-bar {
  margin-left: 0.75rem;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.9rem;
  font-size: 0.75rem;
  color: var(--slate);
  flex: 1;
}
.browser-body { padding: 1.5rem; }
.browser-body.sm { padding: 1.1rem; }

.app-card-title { font-weight: 800; margin: 0 0 0.2rem; font-size: 1.1rem; }
.app-card-caption { font-size: 0.85rem; margin: 0 0 1rem; color: var(--slate); }

/* Mockup frames depict the real light-themed app: their inner text stays navy
   even when the site is in dark mode (backgrounds inside stay light). Interior
   controls (weight steppers, Add Item, remove buttons, weight chips) also use
   their own literal light-theme colors here since they otherwise pick up
   dark-theme semantic vars while sitting on the still-light mockup card. */
html[data-theme="dark"] .browser-frame,
html[data-theme="dark"] .mini-frame { color: var(--navy); }

html[data-theme="dark"] .browser-frame .app-card-title,
html[data-theme="dark"] .browser-frame .app-card-caption { color: var(--navy); }
html[data-theme="dark"] .browser-frame .weight-btn {
  background: #FFFFFF;
  border-color: #dfe8e4;
  color: var(--navy);
}
html[data-theme="dark"] .browser-frame .weight-btn:hover { background: var(--mint); }
html[data-theme="dark"] .browser-frame .add-item {
  background: #FFFFFF;
  border-color: #dfe8e4;
  color: var(--navy);
}
html[data-theme="dark"] .browser-frame .weight {
  color: #1F6B4E;
  background: rgba(88, 200, 157, 0.15);
}
html[data-theme="dark"] .browser-frame .remove-btn {
  color: #9B2C36;
  background: #F8D7DA;
}

.task-table { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.task-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 0.6fr 0.7fr;
  gap: 0.6rem;
  align-items: center;
  background: var(--bg-alt);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.82rem;
}
html.js .task-row:not(.task-head) { opacity: 0; transform: translateY(8px); }
html.js .task-row.in-view { animation: rowIn 0.5s var(--ease) forwards; }
.task-head {
  background: transparent;
  font-weight: 700;
  color: var(--navy-soft);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.weight {
  font-weight: 800;
  color: var(--mint-accessible);
  background: rgba(88, 200, 157, 0.15);
  border-radius: var(--radius-pill);
  text-align: center;
  padding: 0.15rem 0.4rem;
  min-width: 1.6em;
}
.weight.pop { animation: weightPop 0.4s var(--ease); }
@keyframes weightPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.remove {
  color: var(--red-text);
  background: var(--red-bg);
  border-radius: var(--radius-pill);
  text-align: center;
  padding: 0.15rem 0;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Interactive hero mockup: weight steppers + remove/add buttons */
.weight-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
.weight-btn {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--card-bg);
  color: var(--navy);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.weight-btn:hover { background: var(--mint); transform: scale(1.08); }
.weight-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.weight-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(88, 200, 157, 0.55); }

.remove-btn {
  color: var(--red-text);
  background: var(--red-bg);
  border: none;
  border-radius: var(--radius-pill);
  text-align: center;
  padding: 0.15rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  transition: transform 0.15s var(--ease);
}
.remove-btn:hover { transform: translateY(-1px); }
.remove-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(155, 44, 54, 0.4); }

/* Higher-specificity than "html.js .task-row.in-view" (which otherwise wins
   the cascade and silently blocks this animation from ever running, since
   removed rows already carry .in-view from their earlier reveal). */
html.js .task-row.in-view.row-leaving,
.task-row.row-leaving {
  animation: rowLeave 0.28s var(--ease) forwards;
}
@keyframes rowLeave {
  to { opacity: 0; transform: scale(0.92) translateY(-4px); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; }
}
.task-row.row-entering { opacity: 0; transform: translateY(8px); }
.task-row.row-entering.in-view { animation: rowIn 0.4s var(--ease) forwards; }

.add-item { margin-bottom: 0.9rem; }
.add-item:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.bar-btn {
  background: var(--mint);
  color: var(--navy);
  font-weight: 800;
  text-align: center;
  border-radius: 10px;
  padding: 0.85rem;
  font-size: 0.95rem;
}
.bar-btn.sm { padding: 0.65rem; font-size: 0.85rem; margin-top: 0.9rem; }
.bar-btn-interactive {
  position: relative;
  width: 100%;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s var(--ease);
}
.bar-btn-interactive:active { transform: scale(0.98); }
.bar-btn-hint {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--navy);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}
.bar-btn-interactive.show-hint .bar-btn-hint { opacity: 1; transform: translateX(-50%) translateY(0); }

.mockup-hint {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted-text);
  margin: 1.5rem 0 0;
  position: relative;
  z-index: 2;
}

/* Fact bar */
.fact-bar { background: var(--navy); padding: 1.8rem 3rem 1.6rem; }
.fact-bar-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.dot-sep { color: var(--mint); }

.fact-emphasis { position: relative; display: inline-block; padding-bottom: 3px; }
.fact-emphasis::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left;
}
html.js .fact-emphasis.in-view::after { animation: underlineDraw 0.7s var(--ease) forwards 0.2s; }
@keyframes underlineDraw {
  to { transform: scaleX(1); }
}

/* How it works tabs */
.tabs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.tab-btn {
  background: var(--card-bg-alt);
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  padding: 0.9rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.tab-btn:hover { transform: translateY(-2px); }
.tab-btn.active { border-color: var(--mint); }
.tab-num { font-weight: 800; color: var(--mint-accent); font-size: 0.9rem; }
.tab-label { font-weight: 700; color: var(--text); font-size: 0.95rem; }

.tab-ring { flex-shrink: 0; opacity: 0; transition: opacity 0.2s var(--ease); transform: rotate(-90deg); }
.tab-btn.active .tab-ring { opacity: 1; }
.tab-ring-track {
  fill: none;
  stroke: var(--ring-track);
  stroke-width: 3;
}
.tab-ring-fill {
  fill: none;
  stroke: var(--mint);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 88;
  stroke-dashoffset: 88;
}
.tab-ring-fill.running { transition: stroke-dashoffset 0.4s var(--ease); stroke-dashoffset: 0; }
.tab-ring-fill.auto.running { transition: stroke-dashoffset 6s linear; }

/* Stable height: JS measures the tallest panel and sets min-height here,
   so switching steps never changes document height mid-read (which
   would otherwise trigger scroll-anchoring jumps for a reading user). */
.tab-panels { min-height: 0; }

.tab-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.tab-panel[hidden] { display: none; }
.tab-panel.panel-enter { opacity: 0; transform: translateY(10px); }
.panel-copy h3 { margin-bottom: 0.6rem; }
.panel-annotation { display: inline-block; margin-top: 1.25rem; }

.stat-line {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px dashed #e2ebe7;
  font-size: 0.88rem;
}
.stat-line strong { color: var(--navy); }

.weight-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--bg-alt);
  font-weight: 700;
}
.weight-total .counter { font-size: 1.8rem; color: var(--mint-accessible); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.fake-select {
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  font-size: 0.8rem;
  color: var(--navy-soft);
}

.rate-bar-wrap { margin: 1rem 0; font-size: 0.85rem; }
.rate-bar-wrap > span { display: block; margin-bottom: 0.4rem; color: var(--slate); }
.rate-bar-track {
  background: var(--bg-alt);
  border-radius: var(--radius-pill);
  height: 10px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.rate-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--mint), var(--mint-dark));
  border-radius: var(--radius-pill);
  transition: width 1.2s var(--ease);
}
.rate-bar-fill.filled { width: var(--fill, 0%); }

/* Stat strip */
.stat-strip {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  text-align: center;
}
html.js .stat-card { opacity: 0; transform: translateY(14px); }
html.js .stat-card.in-view { animation: rowIn 0.6s var(--ease) forwards; }
.stat-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin: 0 0 0.5rem; }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--text); margin: 0; }
.stat-note { font-size: 0.78rem; margin: 0.35rem 0 0; }

/* Inside the product: continuous ticker. Background shift alone marks the
   boundary with How it works; dark theme gets its own darker surface (see
   dark-theme override below) so light captions/headings stay readable. */
.inside-product {
  background: var(--band-alt);
  border-top: 1px solid var(--border-soft);
}

.inside-carousel { position: relative; margin-top: 3rem; }

.ticker-viewport { overflow: hidden; }

.carousel-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  padding: 1rem 0 0.5rem;
  animation: tickerScroll 51s linear infinite;
}
.carousel-track:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }

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

.carousel-slide {
  flex: 0 0 540px;
  transition: transform 0.2s var(--ease);
  user-select: none;
}
.carousel-slide:hover { transform: scale(1.03); }

.carousel-frame { pointer-events: none; }
.carousel-body { padding: 0; position: relative; background: #000; }
.carousel-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 920 / 660;
  object-fit: cover;
}
.carousel-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 43, 80, 0.35);
  color: var(--white);
  border: none;
  cursor: pointer;
  pointer-events: auto;
}
.carousel-play svg { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); }
.carousel-play[hidden] { display: none; }

.carousel-caption { padding: 1.1rem 0.5rem 0; text-align: center; }
.carousel-caption-title { font-size: 1.05rem; font-weight: 800; color: var(--text); margin: 0 0 0.35rem; }
.carousel-caption-sub { font-size: 0.9rem; color: var(--muted-text); margin: 0; max-width: 40ch; margin-inline: auto; }

/* Quote section */
.quote-section {
  background: var(--navy);
  border-top: 1px solid var(--quote-edge);
  border-bottom: 1px solid var(--quote-edge);
}
.quote-huge {
  color: var(--white);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.3;
  max-width: 900px;
  margin: 0 auto 2rem;
  text-align: center;
}
.underline-accent {
  position: relative;
  color: var(--mint);
}
.underline-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 4px;
  background: var(--pink);
  border-radius: 4px;
}
html.js .quote-huge .word { display: inline-block; opacity: 0.4; transition: opacity 0.4s var(--ease); }
html.js .quote-huge.words-in .word { opacity: 1; }

.quote-secondary {
  color: rgba(255,255,255,0.7);
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
  font-size: 1.05rem;
  font-style: italic;
}

/* Truth section */
.truth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}
.truth-card {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
}
.truth-label { font-weight: 800; font-size: 1.05rem; margin: 0 0 1rem; }
.truth-yes { color: var(--mint-accent); }
.truth-no { color: var(--red-text-ui); }
.truth-card ul { margin: 0; padding-left: 0; list-style: none; color: var(--muted-text); }
.truth-card li { margin-bottom: 0.6rem; position: relative; padding-left: 1.6rem; }

.truth-yes-card {
  border: 2px solid rgba(88, 200, 157, 0.35);
  background: linear-gradient(180deg, rgba(88, 200, 157, 0.08), transparent 55%), var(--card-bg);
}
.truth-yes-card li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--mint-accent);
  font-weight: 800;
}

.truth-not {
  border: 2px solid rgba(239, 83, 80, 0.35);
  background: linear-gradient(180deg, rgba(239, 83, 80, 0.08), transparent 55%), var(--card-bg);
}
.truth-not li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red-text-ui);
  font-weight: 800;
}

/* Pricing: a deeper band tone marks the boundary from the What it is /
   isn't section above (both would otherwise share the plain page --bg and
   the split would be invisible). */
.pricing {
  background: var(--band-alt);
  border-top: 1px solid var(--border-soft);
}

/* Single centered price card, echoing the app's auth-card layout. */
.pricing-layout {
  display: flex;
  justify-content: center;
  max-width: 940px;
  margin: 0 auto;
}
.price-card {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  text-align: center;
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
}
.price-value { font-size: 3rem; font-weight: 900; color: var(--text); margin: 0 0 1.5rem; }
.price-value span { font-size: 1rem; font-weight: 600; color: var(--muted-text); }
.price-features { list-style: none; padding: 0; margin: 0 0 2rem; text-align: left; }
.price-features li { padding: 0.5rem 0; border-bottom: 1px dashed var(--border-dashed); font-size: 0.95rem; color: var(--text-secondary); font-weight: 600; }
.price-features li::before { content: "✓ "; color: var(--mint-accent); }

.price-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.price-login {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  color: var(--muted-text);
}
.price-login a {
  color: var(--mint-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footer */
.footer { background: var(--navy); color: rgba(255,255,255,0.75); padding: 3rem 3rem 2rem; }
.footer-inner { max-width: 1000px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.footer .brand { color: var(--white); }
.footer-tag { font-size: 0.85rem; margin: 0; color: rgba(255, 255, 255, 0.75); }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.9rem; }
.footer-links a:hover { color: var(--mint); }
.footer-fine { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-top: 1rem; }

/* Scroll reveal: visible by default; only hidden pre-reveal when JS is
   confirmed running (html.js, set by script.js). This guarantees content
   is never stuck invisible if the observer fails or JS is disabled. */
html.js .reveal { opacity: 0; transform: translateY(20px); }
html.js .reveal.in-view { animation: rowIn 0.6s var(--ease) forwards; }

html.js .reveal-left { opacity: 0; transform: translateX(-32px); }
html.js .reveal-left.in-view { animation: revealLeftIn 0.6s var(--ease) forwards; }

html.js .reveal-right { opacity: 0; transform: translateX(32px); }
html.js .reveal-right.in-view { animation: revealRightIn 0.6s var(--ease) forwards; }

html.js .reveal-zoom { opacity: 0; transform: scale(0.96); }
html.js .reveal-zoom.in-view { animation: revealZoomIn 0.6s var(--ease) forwards; }

@keyframes rowIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes revealLeftIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes revealRightIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes revealZoomIn {
  to { opacity: 1; transform: scale(1); }
}

/* Parallax float */
.parallax { transition: transform 0.1s linear; }

/* Per-word text reveal (headings). JS wraps each word in a clipped span;
   words stay fully visible until JS opts in, so failed JS never hides text. */
.tr-word { display: inline-block; overflow: hidden; vertical-align: top; }
.tr-word-inner { display: inline-block; }
html.js .tr-word-inner {
  transform: translateY(110%);
  transition: transform 0.5s var(--ease);
}
html.js .text-reveal.words-in .tr-word-inner { transform: translateY(0); }

/* Sequential calculation chain (score -> rate -> bonus) */
.calc-chain {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.calc-step {
  background: var(--bg-alt);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  text-align: center;
  flex: 1;
  min-width: 0;
}
html.js .calc-step { opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
html.js .calc-step.in-view { opacity: 1; transform: translateY(0); }
.calc-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--navy-soft); margin-bottom: 0.25rem; }
.calc-value { font-size: 1.15rem; font-weight: 800; color: var(--mint-accessible); }
.calc-arrow { color: var(--navy-soft); font-weight: 700; flex-shrink: 0; }

/* Card hover lift */
.stat-card, .truth-card, .price-card, .mini-frame {
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.stat-card:hover, .truth-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* Tilt-on-hover: JS sets --tilt-x/--tilt-y from cursor position; falls
   back to no tilt (transform: none) until JS engages. */
.truth-card, .price-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
}

/* Footer reveal stagger */
html.js .footer-reveal { opacity: 0; transform: translateY(14px); }
html.js .footer-reveal.in-view { animation: rowIn 0.5s var(--ease) forwards; }

/* Nav link underline slide-in */
.nav-links a { position: relative; padding-bottom: 2px; }
.nav-links a::before {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -6px;
  height: 2px;
  background: var(--mint-accent);
  border-radius: 2px;
  transition: right 0.2s var(--ease);
}
.nav-links a:hover::before { right: 0; }
.nav-links a.active::before { display: none; }

/* Dark mode toggle: sun/moon icon button in the pill header */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--card-bg); }
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(88, 200, 157, 0.45);
}
.theme-icon { display: block; }
.theme-icon-sun { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { fill: currentColor; display: none; }
html[data-theme="dark"] .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: block; }

/* Mobile nav hamburger + dropdown panel.
   Collapsed state (hiding .nav-links, showing .nav-toggle) is gated on
   html.js so a no-JS visitor always sees the plain, reachable nav-links
   list instead of a button that can never open anything. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--card-bg); }
.nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(88, 200, 157, 0.45);
}
.nav-toggle-icon { display: block; }
.nav-toggle-icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon-close { display: block; }

/* Panel sits as a sibling of .nav-inner, inside the same .nav pill, so the
   pill itself grows to fit it (an absolutely-positioned dropdown would be
   clipped by .nav's overflow:hidden). Collapsed via [hidden] so its links
   are unreachable by keyboard while closed; max-height only animates the
   already-visible state, it never substitutes for [hidden]. */
.nav-menu[hidden] { display: none !important; }

@media (max-width: 960px) {
  html.js .nav-links { display: none; }
  html.js .nav-toggle { display: inline-flex; }
  html.js .nav-menu:not([hidden]) {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    transition: max-height 0.3s var(--ease), padding 0.3s var(--ease);
  }
  html.js .nav-menu.nav-menu-open {
    max-height: 320px;
    padding: 0.25rem 1.5rem 1.25rem;
  }
  html.js .nav-menu a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.7rem 0.1rem;
    border-top: 1px solid var(--nav-border);
  }
  html.js .nav-menu a:first-child { border-top: none; }
  html.js .nav-menu a:hover,
  html.js .nav-menu a.active { color: var(--mint-accent); }
  html.js .nav-menu-cta { color: var(--mint-accent) !important; }
  html.js .nav.nav-open { border-radius: 28px; }
}

/* Responsive */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .tab-panel { grid-template-columns: 1fr; }
  .truth-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .pricing-layout { max-width: 480px; }
  .section-inner { padding: 4.5rem 2rem; }
  .hero { padding: 3rem 2rem 2.5rem; }
  .footer { padding: 3rem 2rem 2rem; }
}

@media (max-width: 600px) {
  .task-row { grid-template-columns: 1.4fr 0.6fr 0.7fr; }
  .only-desktop { display: none; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .fact-bar-inner { flex-direction: column; gap: 0.4rem; }
  .dot-sep { display: none; }
  .nav { width: calc(100% - 1.5rem); }
  .nav-inner { padding: 0.6rem 0.75rem 0.6rem 1rem; gap: 0.6rem; }
  .brand { font-size: 0.95rem; min-width: 0; }
  .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand img { width: 32px; height: 28px; }
  /* The bar CTA is redundant on mobile: the dropdown carries its own
     "Get started", so drop it here and let the brand keep the space. */
  html.js .nav-actions .btn-sm { display: none; }
  .carousel-slide { flex-basis: 85vw; }
  .section-inner { padding: 3.5rem 1.5rem; }
  .hero { padding: 2.5rem 1.5rem 2rem; }
  .footer { padding: 2.5rem 1.5rem 1.5rem; }
}

@media (max-width: 430px) {
  .section-inner { padding: 3.5rem 1.25rem; }
  .hero { padding: 2.5rem 1.25rem 2rem; }
  .footer { padding: 2.5rem 1.25rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left, .reveal-right, .reveal-zoom, .task-row, .stat-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .parallax { transform: none !important; }
  .rate-bar-fill { transition: none; }
  .fact-emphasis::after { animation: none !important; transform: scaleX(1) !important; }
  .quote-huge .word { opacity: 1 !important; }
  .weight.pop { animation: none !important; }
  .carousel-slide { transition: none !important; transform: none !important; }
  .marquee-track { animation: none !important; flex-wrap: wrap; width: auto; }
  .marquee-track > :nth-child(n+12) { display: none; }
  .fact-marquee { -webkit-mask-image: none; mask-image: none; }
  .tr-word-inner { transform: none !important; transition: none !important; }
  .calc-step { opacity: 1 !important; transform: none !important; transition: none !important; }
  .stat-card, .truth-card, .price-card, .mini-frame { transition: none !important; }
  .truth-card, .price-card { transform: none !important; }
  .ambient-shape { animation: none !important; }
  .footer-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }

  /* Product tour: static row instead of continuous scroll, first 4 slides,
     horizontal scroll enabled; duplicate loop slides hidden. */
  .carousel-track { animation: none !important; }
  .carousel-slide[data-slide-dup] { display: none !important; }
  .ticker-viewport { overflow-x: auto; }

  .nav-menu, .nav-menu.nav-menu-open { transition: none !important; }
}

/* Legal pages: privacy.html, terms.html */
.legal-inner {
  max-width: 760px;
  margin: 0 auto;
}
.legal-review-banner {
  background: var(--card-bg-alt, var(--card-bg));
  border: 1px solid var(--mint);
  border-left: 4px solid var(--mint);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
  margin: 0 0 2.5rem;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
}
.legal-review-banner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--bg-alt, transparent);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.legal-inner h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 0.5rem; text-align: left; }
.legal-meta { color: var(--muted-text); margin: 0 0 2.5rem; font-size: 0.9rem; }
.legal-inner h2 {
  font-size: 1.35rem;
  text-align: left;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.legal-inner h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.legal-inner p, .legal-inner li { color: var(--text-secondary); line-height: 1.75; }
.legal-inner ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal-inner li { margin-bottom: 0.5rem; }
.legal-inner strong { color: var(--text); }
.legal-inner a { color: var(--mint-accent); text-decoration: underline; text-underline-offset: 2px; }
/* Unresolved placeholders must be impossible to miss on the rendered page. */
.legal-inner span:not([class]) {
  background: rgba(255, 193, 7, 0.22);
  border-bottom: 1px dashed var(--mint-accent);
  color: var(--text);
  font-weight: 600;
  padding: 0 0.2em;
}
.legal-callout {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-soft);
}