/*
 * Froko.ai Landing Page Stylesheet
 * Bold, warm, AI-product feel — soft pill-rounded controls and cards, and
 * ambient gold glow used deliberately at key moments. Same dark/gold
 * palette throughout; the shift is in shape and light, not colour.
 */

/* ==========================================================================
   Design Tokens & CSS Variables
   ========================================================================== */
:root {
  /* Colors */
  --bg-primary: #0A0A0A;      /* Deep black */
  --bg-secondary: #161616;    /* Dark surface */
  --bg-tertiary: #222222;     /* Card surface / hover */
  --accent: #D4A017;          /* Mustard gold */
  --accent-hover: #B8860B;    /* Muted gold hover */
  --accent-light: rgba(212, 160, 23, 0.1);
  --accent-glow: rgba(212, 160, 23, 0.22);   /* Soft, translucent — ambient hero/section glows */
  --accent-glow-warm: rgba(249, 222, 144, 0.16); /* --gradient-accent from the calculator, reused for a warmer secondary glow tone */
  --text-primary: #FFFFFF;    /* White text */
  --text-secondary: #A1A1AA;  /* Secondary / Zinc 400 */
  --text-muted: #71717A;      /* Muted / Zinc 500 */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(212, 160, 23, 0.2);
  --border-focus: rgba(255, 255, 255, 0.24);

  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --space-unit: 8px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* System */
  --radius: 12px;      /* Buttons, inputs, badges, small controls */
  --radius-md: 20px;   /* Cards: features, roadmap, pricing tiers, mockup */
  --radius-pill: 999px; /* Hero CTA, tagline, trust badges */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24), 0 12px 28px rgba(0, 0, 0, 0.22);
  --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 44px rgba(0, 0, 0, 0.32);
  --transition-fast: 0.15s ease;
  --transition-medium: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --max-width: 1200px;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Continuous-curvature "squircle" corners (Apple/Claude-style G2
     continuity) on top of every border-radius already in use below — a
     no-op wherever border-radius is 0, and a graceful fallback to plain
     rounded corners in browsers that don't support the property yet
     (Safari/Firefox as of 2026; Chromium ~65% global support). */
  corner-shape: squircle;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  line-height: 1.6;
}

/* Animated dither field — kept only on the bottom CTA ("Start capturing
   every opportunity.") per explicit direction to try it there and revert
   everywhere else. Painted by bg-field.js into the single remaining
   .dither-field canvas in index.html. */
.bottom-cta .dither-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Themed scrollbar — the OS default white scrollbar clashes with the dark UI */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-tertiary) var(--bg-primary);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background-color: var(--bg-tertiary);
  border-radius: var(--radius);
  border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button, input, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

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

/* Utility Classes */
.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.mono {
  font-family: var(--font-mono);
}

.text-xs {
  font-size: 0.75rem;
}

.text-sm {
  font-size: 0.875rem;
}

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

.text-gold {
  color: var(--accent);
}

.text-center {
  text-align: center;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Typography Hierarchy
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Quiet editorial kicker above section titles — plain sentence-case text in
   the body font. Deliberately NOT the mono/uppercase/gold "system label"
   look, which reads as generated-template styling. */
.section-label {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   Buttons & Inputs
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:active {
  transform: translateY(1px);
}

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

.btn-primary:hover {
  background-color: #E4E4E7;
  transform: translateY(-1px);
}

.btn-accent {
  background-color: var(--accent);
  color: var(--bg-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(212, 160, 23, 0.18);
}

.btn-accent:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 10px 26px rgba(212, 160, 23, 0.28);
}

.btn-outline {
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.btn-outline:hover {
  border-color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

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

/* Form inputs */
.input-field {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 13px var(--space-sm);
  font-size: 0.875rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-field:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.input-field::placeholder {
  color: var(--text-muted);
}

.block-field {
  width: 100%;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.select-field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A1A1AA'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.select-field option {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* ==========================================================================
   Navigation Bar
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  z-index: 100;
  background-color: rgba(10, 10, 10, 0.95);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
}

.nav-container {
  width: 100%;
  /* Wider than the page's shared --max-width (1200px) on purpose: six nav
     links plus the language switcher, Sign in, and CTA leave the desktop
     nav (see the 1300px breakpoint below) with only single-digit pixels of
     slack in English, and none at all for longer translations (Spanish's
     "Preguntas frecuentes" needs the most room) — space-between then has
     nothing left to put between the logo and the links, so they touch.
     The extra 120px only ever applies above the 1300px nav breakpoint,
     where there's guaranteed viewport room for it. */
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* A floor under space-between's own spacing, not a replacement for it —
     browsers apply this gap first and only then divide any width left over
     between the items, so the logo and first nav link are never flush
     against each other even when a translation leaves space-between
     nothing extra to distribute. */
  gap: 20px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  display: flex;
  align-items: center;
}

.logo-dot {
  color: var(--text-primary);
}

.nav-menu {
  display: flex;
  /* Fixed 32px rather than --space-xl (48px) — six links plus the language
     switcher, Sign in, and CTA already need every spare pixel of the
     1200px .nav-container for longer translations (see the 1300px nav
     breakpoint below); the smaller gap buys back headroom without the
     links reading as cramped. */
  gap: 32px;
}

.nav-link {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.nav-link:hover {
  color: var(--text-primary);
}

/* Hidden by default (desktop already has Sign in/dashboard/sign out in
   .nav-actions) — only shown inside the mobile menu, see the 992px
   breakpoint below. Deliberately plain `display: none` (no !important):
   app.js only ever toggles the `.logged-in` class on #nav-menu, never an
   inline style on these elements, so this rule can't get permanently
   overridden the way #nav-signin's could — see app.js's comment. */
.nav-link-mobile-only {
  display: none;
}

/* Logged-in/out split among the mobile-only links themselves — plain
   `display: none` here too, same reasoning. #nav-menu.logged-in is the
   only thing app.js toggles for these three. The "show when logged in"
   half of this lives inside the 992px breakpoint below, not here — it
   must never win outside that breakpoint, or it recreates the exact
   desktop-leak bug this whole class-based approach replaced. */
.nav-loggedin-only {
  display: none;
}
.nav-menu.logged-in .nav-loggedout-only {
  display: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ==========================================================================
   Language Switcher (desktop trigger + dropdown, first child of
   .nav-actions; mobile pills version lives further down, inside the
   .nav-link-mobile-only rules at the 992px breakpoint)
   ========================================================================== */
.lang-switcher { position: relative; }

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.lang-trigger:hover {
  border-color: var(--border-gold);
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.lang-trigger:active { transform: scale(0.97); transition: transform 120ms ease-out; }
.lang-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-switcher.open .lang-trigger { border-color: var(--border-gold); }
.lang-trigger-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.lang-trigger-chevron { transition: transform var(--transition-fast); }
.lang-switcher.open .lang-trigger-chevron { transform: rotate(180deg); }

/* Flag icons — small rounded-square crop, same neutral border regardless of
   selection state (see .lang-option[aria-selected] / .lang-pill[aria-current]
   below, which style background/border of the row/pill itself, never the
   flag). Sized per surface just below. */
.lang-flag {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 12px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.lang-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 101;
  min-width: 168px;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.96) translateY(-4px);
  transition: opacity 150ms cubic-bezier(0.23,1,0.32,1), transform 150ms cubic-bezier(0.23,1,0.32,1);
}
.lang-dropdown[hidden] { display: none; }
.lang-switcher.open .lang-dropdown {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.lang-option .lang-flag {
  width: 18px;
  height: 13px;
}
.lang-option:hover,
.lang-option:focus-visible {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  outline: none;
}
.lang-option[aria-selected="true"] {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}

.menu-toggle {
  display: none;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 12px;
  cursor: pointer;
}

/* Invisible hit-area expansion: the icon itself stays a crisp 20x12px, but
   a real thumb needs ~44x44px to tap reliably (this is the primary nav
   trigger on mobile, so it gets it even though the visual icon doesn't). */
.menu-toggle::before {
  content: "";
  position: absolute;
  inset: -16px -12px;
}

.menu-toggle span {
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--text-primary);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
  position: relative;
  padding-top: 140px;
  padding-bottom: var(--space-3xl);
  overflow: hidden;
}

/* Vivid ambient glow behind the hero — two overlapping warm-gold tones
   (both already-established site colours, not new ones) instead of the
   previous flat, glow-free background. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 32% 26% at 50% 16%, var(--accent-glow), transparent 65%),
    radial-gradient(ellipse 26% 22% at 22% 4%, var(--accent-glow), transparent 65%),
    radial-gradient(ellipse 24% 20% at 78% 8%, var(--accent-glow-warm), transparent 65%);
  filter: blur(10px);
}

.hero-container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.hero-content {
  max-width: 480px;
}

/* ---- Stacked hero: headline + CTA on top, scroll-animated mockup below ---- */
.hero-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-stacked .hero-content {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-stacked .hero-title {
  font-size: 5.25rem;
}

.hero-stacked .hero-subtitle {
  max-width: 560px;
}

.hero-stacked .waitlist-form {
  max-width: 520px;
}

/* Container-scroll stage: three rows of feature tiles start tilted back in
   3D (and drifted apart horizontally) and untilt/converge as the stage
   scrolls toward the centre of the viewport. The transform is driven by
   CSS variables set from app.js; the fallbacks describe the initial
   (tilted) state so it looks right before JS runs and with JS disabled. */
.parallax-stage {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin-top: var(--space-2xl);
}

.parallax-perspective {
  perspective: 1300px;
  perspective-origin: 50% 20%;
}

.parallax-rows {
  transform-origin: 50% 0%;
  transform: rotateX(var(--px-rx, 14deg)) rotateZ(var(--px-rz, 6deg))
    translateY(var(--px-ty, -20px));
  opacity: var(--px-op, 0.35);
  will-change: transform, opacity;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.parallax-row {
  display: flex;
  gap: 18px;
  justify-content: center;
}

.parallax-row-a {
  transform: translateX(var(--px-tx-a, -50px));
}

.parallax-row-b {
  transform: translateX(var(--px-tx-b, 50px));
}

.parallax-card {
  position: relative;
  flex-shrink: 0;
  width: 176px;
  height: 128px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(160deg, var(--bg-tertiary), var(--bg-secondary));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--space-sm);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.parallax-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 15%, var(--accent-glow), transparent 65%);
  opacity: 0.7;
  pointer-events: none;
}

.parallax-card-icon {
  position: relative;
  z-index: 1;
  color: var(--accent);
  margin-bottom: 8px;
}

.parallax-card-label {
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

.parallax-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-gold);
  box-shadow: var(--shadow-card-hover);
}


/* Small "we're open for business" pill above the headline — doubles as a
   waitlist-modal trigger so it's not purely decorative. */
@keyframes hero-badge-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 4px 4px 4px 4px;
  margin-bottom: var(--space-lg);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--bg-secondary);
  cursor: pointer;
  font-family: inherit;
  animation: hero-badge-in 0.5s ease-out both;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-badge:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-card-hover);
}

.hero-badge-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--bg-primary);
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
}

.hero-badge-text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.hero-badge-divider {
  width: 1px;
  height: 16px;
  background: var(--border-subtle);
}

.hero-badge-arrow {
  color: var(--text-muted);
  margin-right: 10px;
  transition: transform var(--transition-fast);
}

.hero-badge:hover .hero-badge-arrow {
  transform: translateX(2px);
  color: var(--accent);
}

.hero-title {
  font-size: 3.5rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
  animation: hero-badge-in 0.5s 0.1s ease-out both;
}

.hero-subtitle {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  animation: hero-badge-in 0.5s 0.2s ease-out both;
}

.hero-content .waitlist-form {
  animation: hero-badge-in 0.5s 0.3s ease-out both;
}

.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}

.waitlist-inline-form {
  flex-direction: row;
}

.waitlist-inline-form .input-field {
  flex-grow: 1;
}

/* Pill-shaped email-capture CTAs (hero + bottom-cta) — the input and
   button read as one soft capsule rather than two separate rounded
   rectangles. */
.waitlist-inline-form .input-field {
  border-radius: var(--radius-pill);
  padding-left: var(--space-lg);
}

.waitlist-inline-form .btn {
  border-radius: var(--radius-pill);
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.form-feedback {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-top: var(--space-xs);
  min-height: 18px;
}

.form-feedback.success {
  color: var(--accent);
}

.form-feedback.error {
  color: #EF4444;
}

/* ==========================================================================
   Problem & Stats Section
   ========================================================================== */
.problem {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  background-color: var(--bg-primary);
}

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

.section-title-large {
  font-size: 3rem;
  line-height: 1.12;
  max-width: 600px;
  margin-bottom: var(--space-3xl);
  color: var(--text-primary);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: var(--space-xl);
}

.stat-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.stat-num {
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.stat-divider {
  width: 1px;
  background-color: var(--border-subtle);
}

/* ==========================================================================
   Cost of Inaction vs Froko Section
   ========================================================================== */
.cost {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  background-color: var(--bg-primary);
}

.cost .container {
  position: relative;
  z-index: 1;
}

.cost-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 30% 26% at 50% 0%, var(--accent-glow), transparent 65%);
  filter: blur(10px);
}

.cost-comparison {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.cost-problem-cards {
  display: flex;
  gap: var(--space-md);
  flex: 1 1 0;
  min-width: 0;
}

.cost-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cost-card {
  flex: 1 1 0;
  min-width: 0;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

.cost-card-solution {
  flex: 1 1 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.3), 0 28px 64px rgba(212, 160, 23, 0.22);
}

.cost-card-value {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-sm);
  font-variant-numeric: tabular-nums;
}

.cost-card-value-accent {
  color: var(--accent);
}

.cost-card-unit {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.cost-card-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.cost-disclaimer {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-style: italic;
  max-width: 560px;
  margin-top: var(--space-lg);
}

/* ==========================================================================
   "What Is Silence Costing You" Calculator Section
   ========================================================================== */
.calculator {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

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

.calculator-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 26% 22% at 30% 0%, var(--accent-glow-warm), transparent 65%),
    radial-gradient(ellipse 22% 18% at 74% 4%, var(--accent-glow-warm), transparent 65%);
  filter: blur(10px);
}

.calculator-intro {
  color: var(--text-secondary);
  max-width: 560px;
  margin-top: calc(-1 * var(--space-xl) + var(--space-sm));
  margin-bottom: var(--space-xs);
}

.calculator-disclaimer {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-style: italic;
  max-width: 560px;
  margin-bottom: var(--space-2xl);
}

/* Animated conic-gradient border (ported from a React BorderRotate
   component — ‘auto-rotate’ mode with its default gold/bronze palette).
   @property lets the browser interpolate --gradient-angle smoothly through
   the keyframes instead of jump-cutting between values. */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes calculator-border-rotate {
  to {
    --gradient-angle: 360deg;
  }
}

.calculator-panel {
  --gradient-primary: #584827;
  --gradient-secondary: #c7a03c;
  --gradient-accent: #f9de90;
  --panel-bg: #2d230f;
  border: 2px solid transparent;
  border-radius: 20px;
  padding: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  background-image:
    linear-gradient(var(--panel-bg), var(--panel-bg)),
    conic-gradient(
      from var(--gradient-angle, 0deg),
      var(--gradient-primary) 0%,
      var(--gradient-secondary) 37%,
      var(--gradient-accent) 30%,
      var(--gradient-secondary) 33%,
      var(--gradient-primary) 40%,
      var(--gradient-primary) 50%,
      var(--gradient-secondary) 77%,
      var(--gradient-accent) 80%,
      var(--gradient-secondary) 83%,
      var(--gradient-primary) 90%
    );
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  animation: calculator-border-rotate 5s linear infinite;
}

.calculator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.calculator-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.calc-field-full {
  grid-column: 1 / -1;
}

.calc-field-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}

.calc-field-group .input-field {
  width: 100%;
  background-color: var(--bg-primary);
  border-radius: 12px;
}

/* Native number-input spin buttons render as an opaque white box that the
   browser draws itself — background-color can't recolor them, so hide them
   instead. The fields stay fully usable via typing or arrow keys. */
.calc-field-group .input-field::-webkit-outer-spin-button,
.calc-field-group .input-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc-field-group .input-field[type="number"] {
  -moz-appearance: textfield;
}

.calculator-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.calc-result-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

.calc-result-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: var(--space-md);
}

.calc-result-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.calc-result-value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.calc-closing-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-style: italic;
}

.calc-cta {
  margin-top: var(--space-xs);
  border-radius: 12px;
}

/* ==========================================================================
   Features Section
   ========================================================================== */
.features {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.features .container {
  position: relative;
  z-index: 1;
}

.features-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 26% 22% at 28% 100%, var(--accent-glow), transparent 65%),
    radial-gradient(ellipse 22% 18% at 72% 96%, var(--accent-glow), transparent 65%);
  filter: blur(10px);
}

.trust {
  position: relative;
}

.trust-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 26% 22% at 28% 100%, var(--accent-glow), transparent 65%),
    radial-gradient(ellipse 22% 18% at 72% 96%, var(--accent-glow), transparent 65%);
  filter: blur(10px);
}

.trust .container {
  position: relative;
  z-index: 1;
}

.trust-intro {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: var(--space-2xl);
  line-height: 1.6;
}

.trust-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (max-width: 992px) {
  .trust-body { grid-template-columns: 1fr; gap: var(--space-xl); }
}

.trust-shield {
  color: var(--accent);
  opacity: 0.9;
  align-self: start;
  padding-top: var(--space-sm);
  display: flex;
  justify-content: center;
}
@media (max-width: 992px) {
  .trust-shield svg { width: 96px; height: 96px; }
  .trust-shield { margin-bottom: var(--space-lg); }
}

.trust-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.trust-row {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
@media (hover: hover) and (pointer: fine) {
  .trust-row:hover { border-color: rgba(255,255,255,0.15); }
}
.trust-row.is-open {
  border-color: var(--border-gold);
}

.trust-row-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}
@media (max-width: 600px) {
  .trust-row-trigger { padding: var(--space-xs) var(--space-sm); }
}

.trust-row-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
}

.trust-row-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-medium);
}
@media (hover: hover) and (pointer: fine) {
  .trust-row-trigger:hover .trust-row-check {
    background-color: var(--accent);
    color: var(--bg-primary);
  }
}
.trust-row.is-open .trust-row-check {
  background-color: var(--accent);
  color: var(--bg-primary);
  transform: rotate(45deg);
}

.trust-row-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-medium);
}
.trust-row-panel > div {
  overflow: hidden;
}
.trust-row.is-open .trust-row-panel {
  grid-template-rows: 1fr;
}

.trust-row-desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  padding: 0 var(--space-md) var(--space-sm);
  opacity: 0;
  transition: opacity 180ms ease;
}
.trust-row.is-open .trust-row-desc {
  opacity: 1;
}

.trust-payments-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}

.trust-payments-lock {
  color: var(--accent);
  flex-shrink: 0;
}

.trust-payments-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  flex: 1;
}

.trust-payments-logo {
  height: 18px;
  width: auto;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .trust-payments-row { flex-wrap: wrap; padding: var(--space-xs) var(--space-sm); }
  .trust-payments-text { flex-basis: 100%; order: 1; margin-top: 2px; }
  .trust-payments-logo { order: 2; }
}

.section-heading {
  font-size: 2.5rem;
  margin-bottom: var(--space-3xl);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.feature-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.feature-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--border-gold);
  margin-bottom: var(--space-lg);
}

.feature-title {
  font-size: 1.15rem;
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

.feature-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ==========================================================================
   Advantages Section
   ========================================================================== */
.advantages {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.advantages .container {
  position: relative;
  z-index: 1;
}

.advantages-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 26% 22% at 28% 100%, var(--accent-glow), transparent 65%),
    radial-gradient(ellipse 22% 18% at 72% 96%, var(--accent-glow), transparent 65%);
  filter: blur(10px);
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 768px) {
  .advantages-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.advantage-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.advantage-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.advantage-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--border-gold);
  margin-bottom: var(--space-lg);
}

.advantage-title {
  font-size: 1.15rem;
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

.advantage-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ==========================================================================
   Pricing Section
   ========================================================================== */
.pricing {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.pricing .container {
  position: relative;
  z-index: 1;
}

.pricing-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 24% 20% at 32% 0%, var(--accent-glow-warm), transparent 65%),
    radial-gradient(ellipse 22% 18% at 76% 4%, var(--accent-glow-warm), transparent 65%);
  filter: blur(10px);
}

/* Plan cards */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
  margin-bottom: var(--space-2xl);
}

.pricing-tier-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.pricing-tier-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.pricing-tier-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.3), 0 28px 64px rgba(212, 160, 23, 0.22);
}

.pricing-tier-featured:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.38), 0 32px 72px rgba(212, 160, 23, 0.3);
}

.pricing-tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent);
  color: var(--bg-primary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-tier-header {
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.pricing-tier-name {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.pricing-tier-audience {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  min-height: 2.4em;
  margin-bottom: var(--space-md);
}

.pricing-tier-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.price-val {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.price-freq {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.pricing-tier-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pricing-tier-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  flex: 1;
}

.pricing-tier-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.pricing-tier-feature svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.pricing-tier-feature-inherited {
  color: var(--text-primary);
  font-weight: 500;
}

.pricing-tier-feature-excluded {
  color: var(--text-muted);
}

.pricing-tier-feature-excluded svg {
  color: var(--text-muted);
}

/* Add-ons */
.pricing-addons {
  margin: 0 auto var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border-subtle);
}

.pricing-addons-title {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: var(--space-xs);
}

.pricing-addons-intro {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.pricing-addons-group {
  margin-bottom: var(--space-lg);
}

.pricing-addons-group:last-child {
  margin-bottom: 0;
}

.pricing-addons-group-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

/* Card-grid treatment matching the dashboard's StatCard: bordered card,
   soft shadow, hover-lift, icon in a small accent-tinted badge. */
.pricing-addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

.pricing-addon-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pricing-addon-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow-card-hover);
}

.pricing-addon-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: var(--accent-light);
  border: 1px solid var(--border-gold);
  color: var(--accent);
}

.pricing-addon-name {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.pricing-addon-price {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  margin-top: auto;
}

/* Referral + always-included perks — same card treatment as the addons */
.pricing-perks {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.pricing-perk-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pricing-perk-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow-card-hover);
}

.pricing-perk-card .pricing-addon-icon {
  flex-shrink: 0;
}

/* ==========================================================================
   About Section
   ========================================================================== */
/* ==========================================================================
   Who it's for (marquee)
   ========================================================================== */
.who-for {
  position: relative;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  overflow: hidden;
}

.who-for .container {
  text-align: center;
}

.who-for .section-heading {
  margin-bottom: var(--space-sm);
}

.who-for-intro {
  color: var(--text-secondary);
  font-size: 1rem;
  max-width: 40rem;
  margin: 0 auto var(--space-2xl);
}

.who-for-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fades the looping track at both edges instead of a hard cut. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.who-for-track {
  display: flex;
  gap: var(--space-lg);
  width: max-content;
  animation: who-for-scroll 32s linear infinite;
}

.who-for-marquee:hover .who-for-track {
  animation-play-state: paused;
}

@keyframes who-for-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Exactly half the track's width — the content is duplicated once, so
       this lands back on a visually identical frame for a seamless loop. */
    transform: translateX(-50%);
  }
}

.who-for-card {
  flex: 0 0 auto;
  width: 20rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.who-for-q {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.who-for-a {
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.5;
}

.who-for-attr {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .who-for-track {
    animation: none;
  }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  position: relative;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 760px;
}

.faq-item {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
}

.faq-question {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.faq-answer {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

.about {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.about .container {
  position: relative;
  z-index: 1;
}

.about-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 24% 26% at 22% 40%, var(--accent-glow), transparent 65%),
    radial-gradient(ellipse 20% 22% at 68% 65%, var(--accent-glow-warm), transparent 65%);
  filter: blur(10px);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-3xl);
}

.about-title {
  font-size: 2.5rem;
}

.about-text {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.about-text:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Bottom Call To Action
   ========================================================================== */
.bottom-cta {
  position: relative;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  overflow: hidden;
  background: rgba(10, 10, 10, 0.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bottom-cta > .container {
  position: relative;
  z-index: 1;
}

.cta-title {
  font-size: 2.5rem;
  margin-bottom: var(--space-xs);
}

.cta-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}

.center-form {
  max-width: 480px;
  margin: 0 auto;
}

/* ==========================================================================
   Footer Section
   ========================================================================== */
.footer {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl);
  background-color: var(--bg-primary);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-2xl);
}

.footer-brand {
  max-width: 320px;
}

.logo-footer {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.footer-desc-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.footer-links-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col-title {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.footer-col a {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.footer-col a:hover {
  color: var(--text-primary);
}

.footer-contact-info {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copyright {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Modals / Overlays
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85); /* Dark solid-like opacity */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  width: 100%;
  max-width: 440px;
  padding: var(--space-xl);
  position: relative;
  transform: translateY(16px);
  transition: transform var(--transition-medium);
}

.modal-large {
  max-width: 640px;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-header {
  margin-bottom: var(--space-xl);
}

.modal-title {
  font-size: 1.5rem;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.modal-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.modal-success-state {
  text-align: center;
  padding: var(--space-md) 0;
}

.success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--accent-light);
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
}

.success-title {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.success-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-xl);
}

.legal-content-body {
  max-height: 400px;
  overflow-y: auto;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-right: 8px;
}

.legal-content-body h4 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.legal-content-body p {
  margin-bottom: var(--space-sm);
}

.problem-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 24% 20% at 26% 0%, var(--accent-glow), transparent 65%),
    radial-gradient(ellipse 20% 16% at 70% 6%, var(--accent-glow), transparent 65%);
  filter: blur(10px);
}

/* ==========================================================================
   Integrations / Animated Beam Section
   ========================================================================== */
.integrations {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  background-color: var(--bg-primary);
}

.integrations .container {
  position: relative;
  z-index: 1;
}

.integrations-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 24% 20% at 24% 0%, var(--accent-glow-warm), transparent 65%),
    radial-gradient(ellipse 22% 18% at 72% 6%, var(--accent-glow-warm), transparent 65%);
  filter: blur(10px);
}

.integrations-intro {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: var(--space-2xl);
  line-height: 1.6;
}

.beam-diagram {
  max-width: 760px;
  margin: 0 auto;
}

.beam-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.beam-flow {
  stroke-dasharray: 12 100;
  stroke-dashoffset: 112;
  animation: beamFlow 3s linear infinite;
  filter: drop-shadow(0 0 4px rgba(212, 160, 23, 0.65));
}

@keyframes beamFlow {
  from { stroke-dashoffset: 112; }
  to { stroke-dashoffset: 0; }
}

.beam-center-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  fill: #0a0a0a;
  letter-spacing: 0.06em;
}

.beam-center-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  fill: #0a0a0a;
  letter-spacing: 0.04em;
}

.beam-center-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: beamHalo 3s ease-in-out infinite;
}

@keyframes beamHalo {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .beam-flow {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.5;
  }
  .beam-center-halo {
    animation: none;
  }
}

/* ==========================================================================
   Roadmap Section
   ========================================================================== */
.roadmap {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  background-color: var(--bg-primary);
}

.roadmap .container {
  position: relative;
  z-index: 1;
}

.roadmap-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 26% 22% at 30% 100%, var(--accent-glow), transparent 65%),
    radial-gradient(ellipse 22% 18% at 74% 94%, var(--accent-glow), transparent 65%);
  filter: blur(10px);
}

.roadmap-intro {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: var(--space-3xl);
  line-height: 1.6;
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.roadmap-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.roadmap-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.roadmap-card.status-completed {
  border-color: var(--border-gold);
}

.roadmap-card.status-inprogress {
  border-color: rgba(212, 160, 23, 0.35);
}

.roadmap-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.roadmap-badge {
  font-size: 0.6rem;
  padding: 2px 7px;
  border-radius: var(--radius);
  letter-spacing: 0.06em;
}

.badge-completed {
  color: var(--bg-primary);
  background-color: var(--accent);
}

.badge-inprogress {
  color: var(--accent);
  background-color: var(--accent-light);
  border: 1px solid var(--border-gold);
}

.badge-pending {
  color: var(--text-muted);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
}

.roadmap-date {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.roadmap-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.status-completed .roadmap-icon {
  color: var(--accent);
  border-color: var(--border-gold);
  background-color: var(--accent-light);
}

.status-inprogress .roadmap-icon {
  color: var(--accent);
  border-color: rgba(212, 160, 23, 0.3);
  background-color: var(--accent-light);
}

.roadmap-phase-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.status-pending .roadmap-phase-title {
  color: var(--text-secondary);
}

.roadmap-phase-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
}

.status-pending .roadmap-phase-desc {
  color: var(--text-muted);
}

/* ==========================================================================
   Legal Pages (standalone documents — Privacy Policy, Terms, etc.)
   ========================================================================== */
.legal-container {
  max-width: 800px;
}

.legal-hero {
  padding-top: 140px;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border-subtle);
}

.legal-title {
  font-size: 2.75rem;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.legal-updated {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.legal-intro {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 620px;
}

.legal-body-section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);
}

.legal-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legal-toc-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}

.legal-toc a {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding: 6px 0;
  border-left: 2px solid transparent;
  padding-left: var(--space-sm);
  line-height: 1.4;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.legal-toc a:hover {
  color: var(--text-primary);
  border-left-color: var(--border-focus);
}

.legal-article h2 {
  font-size: 1.375rem;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  scroll-margin-top: 96px;
}

.legal-article h2:first-child {
  margin-top: 0;
}

.legal-article h3 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.legal-article p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.legal-article ul {
  margin: var(--space-sm) 0 var(--space-md);
  padding-left: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-article li {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  list-style: disc;
}

.legal-article li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.legal-article a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-vendor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin: var(--space-sm) 0 var(--space-md);
}

.legal-vendor-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
}

.legal-vendor-name {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  display: block;
}

.legal-vendor-purpose {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 6px;
}

.legal-vendor-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.legal-callout {
  background-color: var(--accent-light);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0 var(--space-md);
}

.legal-callout p {
  color: var(--text-secondary);
  margin-bottom: 0;
  font-size: 0.875rem;
}

.legal-callout p:not(:last-child) {
  margin-bottom: var(--space-xs);
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

/* Six nav links plus the language switcher, Sign in, and the CTA button
   can need more than the 1200px .nav-container has to give — English fits
   with room to spare, but longer translations (Hungarian's CTA, Spanish's
   "Preguntas frecuentes", Dutch's "Veelgestelde vragen") push the total
   past the container width even at very wide viewports, since the
   container never grows past --max-width. Collapsing to the hamburger
   menu at a wider breakpoint than the rest of the page's own 992px
   tablet breakpoint (below) keeps every language on one line instead of
   overflowing off the right edge or overlapping the logo. */
@media (max-width: 1300px) {
  .nav-menu {
    display: none; /* Mobile menu toggles off-screen */
  }

  .menu-toggle {
    display: flex;
    flex-shrink: 0;
  }

  /* Some translations of the CTA (e.g. Hungarian, 34 chars) are long enough
     that .btn's white-space: nowrap keeps the flex item's minimum content
     width at the full text width, which pushes .menu-toggle out of the
     .nav-actions row and off-screen. Letting the label wrap onto two lines
     and trimming padding/size keeps the button legible while giving the
     row room to fit the hamburger toggle at any translation length. */
  #nav-cta {
    flex-shrink: 1;
    min-width: 0;
    white-space: normal;
    text-align: center;
    padding: 10px 14px;
    font-size: 0.8125rem;
  }

  /* Responsive navbar open state handled by js adding class */
  .navbar.mobile-open .nav-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-lg) var(--space-md);
    gap: var(--space-md);
  }

  /* Only the primary CTA persists in the collapsed nav — secondary actions
     move into the mobile menu instead of crowding the header. */
  #nav-signin {
    display: none !important;
  }

  /* The desktop trigger+dropdown stays visible in the collapsed mobile
     header too (business owner wants language switching reachable without
     opening the hamburger menu) — .lang-switcher-mobile below remains as a
     redundant second access point inside the menu. flex-shrink:0 keeps it
     from getting squeezed by the CTA button at narrow widths. */
  .lang-switcher {
    flex-shrink: 0;
  }

  .nav-actions {
    gap: var(--space-sm);
  }

  /* .lang-dropdown's desktop position (right:0, anchored to the trigger's
     right edge) assumes the switcher sits near the right side of a wide
     header, with room to its left for the dropdown to extend into. On
     mobile the switcher is the first item in .nav-actions, right after the
     logo near the left edge — right:0 there pushes the dropdown off the
     left of the viewport. Anchor from the left edge instead. */
  .lang-dropdown {
    right: auto;
    left: 0;
    transform-origin: top left;
  }

  /* ...but Sign in (and, once logged in, dashboard/sign out) still need to
     be reachable on mobile — shown here as mirrored links inside the
     hamburger menu instead, set off from the anchor-scroll links above. */
  .nav-link-mobile-only {
    display: block;
    padding-top: var(--space-md);
    margin-top: var(--space-xs);
    border-top: 1px solid var(--border-subtle);
  }

  /* Mobile language switcher — .lang-switcher-mobile also carries the
     nav-link-mobile-only class, which already handles this element's own
     show/hide plus its border-top/spacing (see the rule above); these
     rules only style its internal layout. */
  .lang-switcher-mobile-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
  }
  .lang-switcher-mobile-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }
  .lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
  }
  .lang-pill[aria-current="true"] {
    background: var(--accent-light);
    border-color: var(--border-gold);
    color: var(--accent);
    font-weight: 600;
  }

  /* Higher specificity than .nav-link-mobile-only's display:block above
     (same single-class weight would otherwise resolve by source order,
     which is fragile) — Sign in shows until #nav-menu gets `.logged-in`
     from app.js, then swaps for dashboard/sign out. The reverse
     (.nav-menu.logged-in .nav-loggedout-only) is already defined outside
     this media query — same specificity math applies regardless of which
     side of a breakpoint a rule is written on. */
  .nav-menu:not(.logged-in) .nav-loggedin-only {
    display: none;
  }
}

/* Tablet & Smaller Screens */
@media (max-width: 992px) {
  :root {
    --space-2xl: 64px;
    --space-3xl: 80px;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-stacked .hero-title {
    font-size: 3.25rem;
  }

  .waitlist-inline-form {
    max-width: 480px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .stat-divider {
    height: 1px;
    width: 100%;
  }

  .cost-comparison {
    flex-direction: column;
    align-items: stretch;
  }

  .cost-problem-cards {
    flex-direction: column;
    width: 100%;
  }

  .cost-arrow {
    transform: rotate(90deg);
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .calculator-panel {
    padding: var(--space-lg);
  }

  .calculator-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .roadmap-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .legal-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--space-md);
  }

  .legal-toc a {
    border-left: none;
    padding-left: 0;
    padding: 0;
  }

  .legal-vendor-grid {
    grid-template-columns: 1fr;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* Mobile Screens */
@media (max-width: 600px) {
  /* Reclaim width for #nav-cta in the collapsed header now that
     .lang-switcher stays visible there too (see the 992px breakpoint) —
     without this, long CTA translations (e.g. Hungarian) wrap to a third
     line and overflow the fixed-height .navbar at narrow widths like
     375px. Tightening the lang trigger and the row's gaps is enough to
     keep the CTA back down to two lines. */
  .nav-actions {
    gap: var(--space-xs);
  }
  .lang-trigger {
    padding: 6px 8px;
    gap: 2px;
  }
  .lang-trigger-chevron {
    display: none;
  }

  .hero-title {
    font-size: 2.25rem;
  }

  .hero-stacked .hero-title {
    font-size: 2.5rem;
  }

  .waitlist-inline-form {
    flex-direction: column;
  }

  .waitlist-inline-form button {
    width: 100%;
  }

  .parallax-rows,
  .parallax-row {
    gap: 12px;
  }

  .parallax-card {
    width: 128px;
    height: 96px;
    padding: var(--space-xs);
  }

  .parallax-card-icon {
    width: 16px;
    height: 16px;
    margin-bottom: 4px;
  }

  .parallax-card-label {
    font-size: 0.6875rem;
  }

  .roadmap-grid {
    grid-template-columns: 1fr;
  }

  .calculator-inputs {
    grid-template-columns: 1fr;
  }

  .legal-title {
    font-size: 2.1rem;
  }

  .footer-links-group {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
}

/* ==========================================================================
   Source citations for the stats and cost sections (additive)
   ========================================================================== */
.stat-source,
.cost-card-source {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  line-height: 1.4;
}

.stat-source a,
.cost-card-source a,
.sources-list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.stat-source a:hover,
.cost-card-source a:hover,
.sources-list a:hover {
  color: var(--text-secondary);
  text-decoration-color: currentColor;
}

.sources {
  max-width: 760px;
  margin-top: var(--space-lg);
  scroll-margin-top: 6rem;
}

.sources-title {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.sources-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.sources-list li + li {
  margin-top: 0.4rem;
}

.sources-list li:target {
  color: var(--text-secondary);
}

.stats-cta {
  margin-top: var(--space-2xl);
}

/* ==========================================================================
   Calculator: yearly loss, "what Froko would cost", plan recommendation
   ========================================================================== */
.calc-result-sub {
  margin-top: var(--space-xs);
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.calc-result-sub span:first-child {
  color: var(--text-secondary);
  font-weight: 500;
}

.calc-cost-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  animation: calc-recommend-in 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.calc-cost-total {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.calc-cost-unit {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.calc-cost-lines {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) 0 0;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.calc-cost-lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-variant-numeric: tabular-nums;
}

.calc-cost-lines li span:last-child {
  color: var(--text-primary);
  white-space: nowrap;
}

.calc-cost-compare {
  margin: var(--space-sm) 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.calc-cost-compare strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 500;
  white-space: nowrap;
}

.calc-cost-note {
  margin: var(--space-sm) 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.calc-recommend {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--bg-primary);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.25), 0 18px 44px rgba(212, 160, 23, 0.14);
  animation: calc-recommend-in 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.calc-recommend[hidden],
.calc-cost-card[hidden],
.calc-cost-compare[hidden] {
  display: none;
}

.calc-recommend-badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background-color: rgba(212, 160, 23, 0.1);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
}

.calc-recommend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.calc-recommend-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-primary);
}

.calc-recommend-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-recommend-price span {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.calc-recommend-why {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

@keyframes calc-recommend-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc-recommend,
  .calc-cost-card {
    animation: none;
  }
}