/* 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);
  --motion-fast: 180ms;
  --motion-base: 560ms;
  --motion-slow: 820ms;
  --motion-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);
  --focus-ring: #2B8F68;
  --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;
  --button-shimmer: rgba(20, 43, 80, 0.92);
  --button-shimmer-highlight: rgba(255, 255, 255, 0.96);
  /* 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;
  --focus-ring: #2B8F68;
  --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);
  --button-shimmer: rgba(255, 255, 255, 0.95);
  --button-shimmer-highlight: rgba(127, 216, 180, 0.95);
  --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; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }

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; text-wrap: balance; }
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); text-wrap: pretty; }

.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: 1200px;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) 20px;
}
.section-inner.narrow { max-width: 620px; }
.section-sub {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 3rem;
  font-size: 1.05rem;
  text-wrap: balance;
}

/* Contractor product-use scene: the authentic interface on the laptop
   resolves first, then the surrounding shop sharpens into view. */
.contractor-use {
  position: relative;
  max-width: 880px;
  margin: 0 auto 3.5rem;
}
.contractor-use-scene {
  --image-x: 50%;
  --image-y: 50%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-soft);
  border-radius: clamp(18px, 2.5vw, 30px);
  background: var(--navy);
  box-shadow: 0 30px 80px rgba(4, 25, 45, 0.2);
  transition: box-shadow 260ms var(--ease), transform 260ms var(--ease);
}
.contractor-use-picture,
.contractor-use-screen {
  position: absolute;
  inset: 0;
  display: block;
}
.contractor-use-picture img,
.contractor-use-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contractor-use-screen {
  z-index: 2;
  pointer-events: none;
}
.contractor-use-sheen {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--image-x) var(--image-y), rgba(255,255,255,0.2), transparent 62%);
  opacity: 0;
  transform: translateX(-35%);
}
.contractor-use-scene::after {
  content: "View the weekly review";
  position: absolute;
  z-index: 4;
  right: 1.1rem;
  bottom: 1.1rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: var(--radius-pill);
  background: rgba(8,22,43,0.78);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms var(--ease);
}
.contractor-use:hover .contractor-use-scene,
.contractor-use:focus-within .contractor-use-scene {
  box-shadow: 0 36px 90px rgba(4,25,45,0.27);
  transform: translateY(-4px);
}
.contractor-use:hover .contractor-use-picture,
.contractor-use:focus-within .contractor-use-picture { transform: scale(1.012); }
.contractor-use:hover .contractor-use-sheen,
.contractor-use:focus-within .contractor-use-sheen { opacity: 1; animation: none; }
.contractor-use:hover .contractor-use-scene::after,
.contractor-use:focus-within .contractor-use-scene::after { opacity: 1; transform: translateY(0); }
.contractor-use-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0.3rem 0;
  color: var(--muted-text);
}
.contractor-use-caption span {
  color: var(--mint-accessible);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contractor-use-caption strong {
  color: var(--text);
  font-size: 0.95rem;
}
html.js.motion-enhanced .contractor-use:not(.is-in-view) .contractor-use-scene {
  opacity: 0;
  clip-path: inset(7% 0 7% 0 round 30px);
  transform: translateY(34px) scale(1.035);
}
html.js.motion-enhanced .contractor-use:not(.is-in-view) .contractor-use-picture {
  filter: blur(9px) brightness(0.72);
  transform: scale(1.035);
}
html.js.motion-enhanced .contractor-use:not(.is-in-view) .contractor-use-screen {
  opacity: 0;
  filter: blur(6px) brightness(0.82);
  transform: scale(1.018);
}
html.js.motion-enhanced .contractor-use-scene {
  transition: opacity 900ms var(--motion-ease) 140ms,
              clip-path 1100ms var(--motion-ease) 140ms,
              transform 1100ms var(--motion-ease) 140ms;
}
html.js.motion-enhanced .contractor-use-picture {
  transition: filter 1000ms var(--motion-ease) 220ms,
              transform 1100ms var(--motion-ease) 180ms;
}
html.js.motion-enhanced .contractor-use-screen {
  transition: opacity 620ms var(--motion-ease),
              filter 720ms var(--motion-ease),
              transform 820ms var(--motion-ease);
}
.contractor-use.is-in-view .contractor-use-picture,
.contractor-use.is-in-view .contractor-use-screen {
  opacity: 1;
  filter: none;
  transform: none;
}
.contractor-use.is-in-view .contractor-use-sheen {
  animation: contractorUseSheen 900ms var(--motion-ease) 720ms both;
}
@keyframes contractorUseSheen {
  0% { opacity: 0; transform: translateX(-35%); }
  24% { opacity: 0.45; }
  100% { opacity: 0; transform: translateX(35%); }
}

/* 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 {
  --button-fill: var(--mint);
  --shimmer-angle: 0deg;
  position: relative;
  background:
    linear-gradient(var(--button-fill), var(--button-fill)) padding-box,
    conic-gradient(
      from var(--shimmer-angle),
      transparent 0 34%,
      var(--button-shimmer) 44%,
      var(--button-shimmer-highlight) 49%,
      var(--button-shimmer) 54%,
      transparent 64%
    ) border-box;
  color: var(--navy);
  animation: shimmerPerimeter 3.8s linear infinite;
}
@property --shimmer-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes shimmerPerimeter { to { --shimmer-angle: 360deg; } }
.btn-primary:hover { --button-fill: 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: clamp(2rem, 5vw, 4.5rem) 20px; overflow: hidden; position: relative; }
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-copy { min-width: 0; max-width: 820px; box-sizing: border-box; }
.hero-copy h1 { max-width: 820px; margin-inline: auto; }
.hero-sub { font-size: 1.1rem; max-width: 62ch; margin: 0.75rem auto 0; }
.hero-vsl-stage { width: min(100%, 920px); margin-top: 2rem; }
.hero-actions { width: min(100%, 920px); }
.vsl-chapters { display: flex; justify-content: center; gap: 0.65rem; flex-wrap: wrap; margin: 1.25rem 0 0; }
.vsl-chapter { background: var(--card-bg-alt); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 700; padding: 0.55rem 0.9rem; }
.vsl-chapter:hover { border-color: var(--mint-accent); color: var(--text); }
.vsl-chapter:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hero-ctas { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; }
.hero-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  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); }

.how-scorecard { max-width: 820px; margin: 3rem auto 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); }
}

.founder-vsl-media {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-radius: var(--radius-card);
}
.founder-vsl-media video {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--frame-border);
  border-radius: var(--radius-card);
  background: #000;
  box-shadow: var(--shadow-lift);
}
.vsl-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transform: translate(-50%, -50%);
  animation: vslPlayFloat 2.8s ease-in-out infinite;
}
.vsl-play-button[hidden] { display: none !important; }
.vsl-play-button::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 102px;
  height: 102px;
  border: 2px solid rgba(88, 200, 157, 0.78);
  border-radius: 50%;
  pointer-events: none;
  transform: translateX(-50%) scale(0.78);
  animation: vslPlayPulse 2.2s var(--motion-ease) infinite;
}
.vsl-play-core {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: rgba(13, 27, 51, 0.88);
  box-shadow: 0 14px 36px rgba(13, 27, 51, 0.42), 0 0 0 7px rgba(88, 200, 157, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 180ms var(--motion-ease), background-color 180ms ease;
}
.vsl-play-core svg { margin-left: 4px; }
.vsl-play-label {
  padding: 0.48rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-pill);
  background: rgba(13, 27, 51, 0.82);
  box-shadow: 0 8px 24px rgba(13, 27, 51, 0.32);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vsl-play-button:hover .vsl-play-core { transform: scale(1.08); background: rgba(20, 43, 80, 0.96); }
.vsl-play-button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 7px; border-radius: var(--radius-card); }
.founder-vsl-media.is-overlay-leaving .vsl-play-button { animation: vslPlayLaunch 420ms var(--motion-ease) forwards; }
.founder-vsl-media.is-overlay-leaving .vsl-play-core svg { animation: vslGlyphLaunch 420ms var(--motion-ease) forwards; }
@keyframes vslPlayFloat {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.9; }
}
@keyframes vslPlayPulse {
  0% { opacity: 0.78; transform: translateX(-50%) scale(0.78); }
  72%, 100% { opacity: 0; transform: translateX(-50%) scale(1.34); }
}
@keyframes vslPlayLaunch {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes vslGlyphLaunch {
  to { opacity: 0; transform: translateX(12px) scale(0.75); }
}
.founder-vsl-media::before {
  content: "";
  position: absolute;
  inset: -14px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  border: 0;
  border-radius: calc(var(--radius-card) + 14px);
  background: transparent;
  box-shadow: 0 0 48px rgba(88, 200, 157, 0.42);
}
.founder-vsl-media::after { content: none; }
html.js .founder-vsl-media.is-awaiting-play::before { animation: vslOuterGlow 2.8s ease-in-out infinite; }
html.js .founder-vsl-media.is-playing::before { animation: none; opacity: 0; }
@keyframes vslOuterGlow {
  0%, 100% { opacity: 0.18; transform: scale(0.985); }
  50% { opacity: 0.42; transform: scale(1); }
}

/* These are additive motion hooks. Content remains visible until JavaScript
   opts in, and script.js always releases the hidden state on its fail-safe. */
html.js.motion-enhanced .vsl-chapter { opacity: 0; transform: translateY(12px); }
html.js.motion-enhanced .vsl-chapters.chapters-in .vsl-chapter {
  opacity: 1;
  transform: translateY(0);
  transition: transform var(--motion-base) var(--motion-ease), opacity var(--motion-base) var(--motion-ease);
}
html.js.motion-enhanced .vsl-chapters.chapters-in .vsl-chapter:nth-child(2) { transition-delay: 90ms; }
html.js.motion-enhanced .vsl-chapters.chapters-in .vsl-chapter:nth-child(3) { transition-delay: 180ms; }
.vsl-chapter[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: var(--navy); }

html.js.motion-enhanced .hero.hero-motion-ready .hero-copy { animation: heroCopyEnter var(--motion-base) var(--motion-ease) forwards; }
html.js.motion-enhanced .hero.hero-motion-ready .hero-vsl-stage { animation: heroStageEnter var(--motion-slow) var(--motion-ease) forwards 120ms; }
html.js.motion-enhanced .hero.hero-motion-ready .hero-actions { animation: heroActionsEnter var(--motion-base) var(--motion-ease) forwards 260ms; }
@keyframes heroCopyEnter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroStageEnter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroActionsEnter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-handoff { position: relative; }
.section-handoff::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(20px, calc((100% - 1200px) / 2 + 20px));
  right: max(20px, calc((100% - 1200px) / 2 + 20px));
  height: 1px;
  background: var(--border-soft);
  opacity: 0;
  transform: scaleX(0.82);
}
html.js.motion-enhanced .section-handoff.handoff-in::before {
  opacity: 1;
  transform: scaleX(1);
  transition: transform var(--motion-slow) var(--motion-ease), opacity var(--motion-base) var(--motion-ease);
}

/* How it works tabs */
.how-walkthrough {
  display: block;
  max-width: 1060px;
  margin: 0 auto 4rem;
}
.tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0 auto 1rem;
  padding: 0.45rem;
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius-card) + 4px);
  background: var(--bg-alt);
}
.tab-btn {
  background: var(--card-bg-alt);
  border: 1px solid transparent;
  border-radius: calc(var(--radius-card) - 4px);
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-family: inherit;
  box-shadow: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), background-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  text-align: left;
  min-height: 64px;
}
.tab-btn:hover { transform: translateY(-1px); }
.tab-btn.active { border-color: rgba(88,200,157,0.7); background: var(--card-bg); box-shadow: var(--shadow-soft); }
.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 { margin-left: auto; }

.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;
  position: static;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius-card) + 4px);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}

/* Features 8-inspired bento: product facts rendered as varied, visual cards. */
.feature-bento { background: var(--bg); }
.feature-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1040px;
  margin: 3rem auto 0;
}
.feature-tile {
  position: relative;
  min-width: 0;
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.35rem;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}
.feature-tile > * { min-width: 0; }
.feature-tile h3,
.feature-tile p { overflow-wrap: anywhere; }
.feature-tile:nth-child(1) { grid-column: span 7; }
.feature-tile:nth-child(2) { grid-column: span 5; }
.feature-tile:nth-child(n+3) { grid-column: span 4; }
.feature-tile:nth-child(n) { min-height: 230px; }
.feature-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.feature-tile { transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.feature-kicker {
  margin: 0 0 0.45rem;
  color: var(--mint-accessible);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.feature-tile h3 { margin-bottom: 0.45rem; }
.feature-tile p:last-child { margin: 0; }
.feature-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 120px;
  aspect-ratio: 1;
  margin-inline: auto;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,200,157,0.18), transparent 64%);
  box-shadow: 0 0 0 9px rgba(88,200,157,0.07);
}
.feature-ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 4px solid var(--mint);
  border-left-color: rgba(88,200,157,0.2);
  border-radius: 50%;
  transform: rotate(35deg);
}
.feature-ring span { position: relative; z-index: 1; color: var(--text); font-size: 1.75rem; font-weight: 800; }
.feature-calendar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; }
.feature-calendar span {
  display: grid;
  min-height: 46px;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--muted-text);
  font-weight: 800;
}
.feature-calendar .active { border-color: var(--mint); background: var(--mint); color: var(--navy); transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.feature-equation { display: flex; align-items: center; justify-content: center; gap: 0.8rem; min-height: 94px; }
.feature-equation strong { padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--bg-alt); color: var(--mint-accessible); font-size: 1.25rem; }
.feature-equation span { color: var(--text-secondary); font-size: 1.5rem; }
.feature-team-visual { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 92px; }
.feature-team-visual span { padding: 0.55rem 0.75rem; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); color: var(--text); font-size: 0.78rem; font-weight: 800; background: var(--bg-alt); }
.feature-team-visual i { width: 26px; height: 1px; background: var(--mint); }
.feature-split { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 12px; }
.feature-split span { padding: 1.1rem; color: var(--text); font-size: 0.85rem; font-weight: 800; text-align: center; }
.feature-split span + span { background: rgba(88,200,157,0.16); border-left: 1px solid var(--mint); }

/* Cursor-style proximity border used on conversion cards. */
[data-glow-card] { --glow-active: 0; --glow-angle: 0deg; isolation: isolate; }
[data-glow-card]::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  padding: 2px;
  pointer-events: none;
  border-radius: inherit;
  background: conic-gradient(from var(--glow-angle), transparent 0 38%, var(--mint) 47%, var(--pink) 52%, transparent 62%);
  opacity: var(--glow-active);
  transition: opacity 180ms ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.tab-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
#how .section-inner,
#how .tab-panel,
#how .tab-panel > *,
.truth-grid,
.truth-card { min-width: 0; max-width: 100%; }
.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; }

/* Product tour carousel. One readable screen stays centered while adjacent
   screens provide context without compressing their UI. */
.inside-product {
  background: var(--band-alt);
  border-top: 1px solid var(--border-soft);
}

.inside-product .section-sub { max-width: 54ch; }
.inside-carousel { position: relative; margin-top: 3rem; }

.ticker-viewport {
  overflow: hidden;
  margin-inline: 0;
  padding-inline: 0;
}

.carousel-track {
  position: relative;
  display: flex;
  gap: 1.25rem;
  width: 100%;
  padding: 1rem 0 1.25rem;
  transition: transform 520ms var(--motion-ease);
}

.carousel-slide {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  flex: 0 0 min(76vw, 780px);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  cursor: pointer;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), opacity 240ms ease;
  user-select: none;
  min-height: 460px;
  opacity: 0.56;
  transform: scale(0.94);
}
.carousel-slide.active {
  box-shadow: var(--shadow-lift);
  opacity: 1;
  transform: scale(1);
}
.carousel-slide:hover { opacity: 0.86; }
.carousel-slide.active:hover { transform: translateY(-3px) scale(1); opacity: 1; }
.carousel-slide:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; opacity: 1; }
.carousel-slide::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(280px circle at var(--pointer-x) var(--pointer-y), rgba(88,200,157,0.2), transparent 68%);
  transition: opacity 200ms ease;
}
.carousel-slide:hover::after, .carousel-slide:focus-visible::after { opacity: 1; }
.carousel-frame { pointer-events: none; height: 100%; border: 0; border-radius: 0; }
.carousel-body { padding: 0; position: relative; background: #000; }
.carousel-video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 460px;
  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 {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 4rem 1.25rem 1.25rem;
  text-align: left;
  background: linear-gradient(transparent, rgba(8,22,43,0.92));
}
.carousel-caption-title { font-size: 1.05rem; font-weight: 800; color: var(--white); margin: 0 0 0.35rem; text-wrap: balance; }
.carousel-caption-sub { font-size: 0.9rem; color: rgba(255,255,255,0.82); margin: 0; max-width: 40ch; }
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
}
.carousel-arrow {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform 180ms var(--ease), border-color 180ms ease, background-color 180ms ease;
}
.carousel-arrow:hover { border-color: var(--mint); background: var(--bg-alt); transform: translateY(-2px); }
.carousel-arrow:focus-visible,
.carousel-dot:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.carousel-dots { display: flex; gap: 0.5rem; }
.carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border-dashed);
  cursor: pointer;
  transition: width 220ms var(--ease), background-color 220ms ease;
}
.carousel-dot.active { width: 30px; background: var(--mint-accessible); }

/* Quote section */
.quote-section {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  border-top: 1px solid var(--quote-edge);
  border-bottom: 1px solid var(--quote-edge);
}
.quote-section::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  top: 50%;
  right: -120px;
  border: 1px solid rgba(88, 200, 157, 0.22);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 42px rgba(88, 200, 157, 0.04), 0 0 0 84px rgba(232, 93, 158, 0.025);
  pointer-events: none;
}
.quote-section .section-inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(1.9rem, 3.5vw, 2.8rem);
  padding-bottom: clamp(1.9rem, 3.5vw, 2.8rem);
}
.quote-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.75fr);
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(1rem, 1.8vw, 1.4rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  box-shadow: 0 24px 60px rgba(4, 16, 34, 0.24);
}
.quote-main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0.4rem, 1.5vw, 1rem) clamp(0.4rem, 1vw, 0.8rem);
}
.quote-kicker,
.quote-shift-label {
  margin: 0 0 0.65rem;
  color: var(--mint);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.quote-huge {
  color: var(--white);
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.22;
  max-width: 29ch;
  margin: 0;
  text-align: left;
}
.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.25; transform: translateY(7px); transition: opacity 0.42s var(--ease), transform 0.42s var(--ease); transition-delay: calc(var(--word-index, 0) * 32ms); }
html.js .quote-huge.words-in .word { opacity: 1; }
html.js .quote-huge.words-in .word { transform: translateY(0); }

.quote-shift {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid rgba(88, 200, 157, 0.48);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(88, 200, 157, 0.2), rgba(88, 200, 157, 0.08));
  overflow: hidden;
}
.quote-shift::after {
  content: "$";
  position: absolute;
  right: -0.1em;
  bottom: -0.42em;
  color: rgba(255,255,255,0.055);
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.quote-shift-label { color: #9BE8C8; }
.quote-shift-title {
  position: relative;
  z-index: 1;
  margin: 0 0 0.65rem;
  color: var(--white);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 800;
  line-height: 1.2;
}
.quote-secondary {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.78);
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  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-plan pricing inspired by 21st's strong split-card hierarchy, adapted
   to the existing static stack and Performance Pay Pro's real offer. */
.pricing-layout {
  display: flex;
  justify-content: center;
  max-width: 920px;
  margin: 0 auto;
}
.price-card {
  position: relative;
  overflow: hidden;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 0.55rem;
  text-align: left;
  box-shadow: var(--shadow-lift);
  display: flex;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  width: 100%;
  max-width: 880px;
}
.price-card-main,
.price-card-details { padding: clamp(1.5rem, 4vw, 2.6rem); border-radius: calc(var(--radius-card) - 5px); }
.price-card-main { position: relative; background: var(--navy); color: #fff; }
.price-card-main::after {
  content: "";
  position: absolute;
  inset: auto -18% -30% 20%;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,200,157,0.32), transparent 68%);
  pointer-events: none;
}
.price-badge { display: inline-flex; padding: 0.42rem 0.7rem; border: 1px solid rgba(255,255,255,0.34); border-radius: var(--radius-pill); color: var(--mint); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.price-plan { margin: 1.4rem 0 0.35rem; color: rgba(255,255,255,0.72); font-size: 0.9rem; font-weight: 700; }
.price-value { display: flex; align-items: baseline; font-size: clamp(3.1rem, 6vw, 4.6rem); font-weight: 900; line-height: 1; color: #fff; margin: 0 0 1rem; letter-spacing: -0.05em; }
.price-value .price-currency { align-self: flex-start; margin-top: 0.4rem; font-size: 1.25rem; color: var(--mint); }
.price-value span:last-child { margin-left: 0.35rem; font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.66); letter-spacing: 0; }
.price-summary { max-width: 34ch; margin: 0 0 1.6rem; color: rgba(255,255,255,0.76); }
.price-card-details { display: flex; flex-direction: column; justify-content: center; background: var(--card-bg); }
.price-includes { margin: 0 0 1rem; color: var(--text); font-size: 1.05rem; font-weight: 800; }
.price-features { list-style: none; padding: 0; margin: 0; text-align: left; }
.price-features li { position: relative; padding: 0.7rem 0 0.7rem 1.75rem; border-bottom: 1px dashed var(--border-dashed); font-size: 0.92rem; color: var(--text-secondary); }
.price-features li::before { content: "✓"; position: absolute; left: 0; color: var(--mint-accessible); font-weight: 900; }
.price-features strong { color: var(--text); }

.price-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.price-trust { position: relative; z-index: 1; margin: 0.85rem 0 0; color: rgba(255,255,255,0.62); font-size: 0.78rem; text-align: center; }
.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) {
  .how-walkthrough { display: block; margin-bottom: 3rem; }
  .tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 900px;
    margin: 0 auto 1rem;
  }
  .tab-btn { width: 100%; min-height: 64px; }
  .tab-panels { position: static; max-width: 980px; margin: 0 auto; }
  .tab-panel { grid-template-columns: minmax(0, 1fr); }
  .carousel-track { padding-bottom: 1rem; }
  .carousel-slide,
  .carousel-slide.active { flex: 0 0 min(84vw, 680px); }
  .feature-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-tile:nth-child(1) { grid-row: auto; grid-column: 1 / -1; min-height: 260px; }
  .feature-tile:nth-child(n+2) { grid-column: auto; min-height: 220px; }
  .truth-grid { grid-template-columns: minmax(0, 1fr); }
  .quote-panel { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .quote-huge { max-width: 30ch; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .pricing-layout { max-width: 760px; }
  .price-card { grid-template-columns: 1fr; }
  .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: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-width: 0; }
  .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,
  .carousel-slide.active { flex-basis: 88vw; min-height: 340px; }
  .carousel-video { min-height: 340px; }
  .feature-bento-grid { grid-template-columns: 1fr; }
  .feature-tile:nth-child(n) { grid-column: 1; min-height: 0; }
  .feature-team-visual { flex-wrap: wrap; }
  .tabs { grid-template-columns: 1fr; }
  .tab-btn { min-height: 54px; }
  .tab-panel { gap: 1.25rem; }
  .carousel-caption { padding: 3.4rem 1rem 1rem; }
  .carousel-caption-sub { font-size: 0.8rem; }
  .price-card-main, .price-card-details { padding: 1.4rem; }
  .quote-section .section-inner { padding-top: 2rem; padding-bottom: 2rem; }
  .quote-panel { padding: 0.85rem; border-radius: 18px; }
  .quote-main { padding: 0.75rem 0.6rem 0.9rem; }
  .quote-shift { padding: 1.15rem; }
  .vsl-chapters { align-items: stretch; flex-direction: column; }
  .footer { padding: 2.5rem 1.5rem 1.5rem; }
}

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

@media (max-width: 700px) {
  .contractor-use-scene { aspect-ratio: 4 / 3; }
  .contractor-use-caption {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
}

@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; }
  .founder-vsl-media::before, .founder-vsl-media::after, .section-handoff::before { animation: none !important; opacity: 0 !important; transform: none !important; transition: none !important; }
  .vsl-play-button, .vsl-play-button::before, .vsl-play-core svg { animation: none !important; transition: none !important; }
  .btn-primary { animation: none !important; }
  [data-glow-card]::before { display: none; }
  .vsl-chapter { opacity: 1 !important; transform: none !important; transition: none !important; }
  .contractor-use-scene,
  .contractor-use-picture,
  .contractor-use-screen,
  .contractor-use-sheen {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .contractor-use-sheen { opacity: 0 !important; }
  .contractor-use-scene::after { display: none; }
  .quote-section { min-height: auto; }
  .quote-section .section-inner { position: static; min-height: auto; }

  /* Product tour remains fully usable without automatic media motion. */
  .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);
}