/* LeadCatch marketing site — brand tokens copied from leadcatch/brand/brand-guidelines.html
   so the site and the guidelines never drift apart.

   The whole page is ONE continuous dark canvas (Ink Navy base, drifting toward
   Steel via a scroll-linked overlay). Sections separate with spacing, steel
   panels and amber accents — never hard light/dark colour switches. */
:root {
  --navy: #111C2E;
  --steel: #1D3557;
  --amber: #F5A524;
  --amber-deep: #D98A0B;
  --slate: #5B6673;
  --paper: #E8EBF0;
  --white: #F7F9FC;
  --line: #33456a;              /* hairlines on dark surfaces */
  --panel: #1D3557;             /* card/panel surface */
  --muted: #a9b4c4;             /* AA muted text on navy AND steel */
  --faint: #7c88a0;             /* fine print on navy (≥4.5:1) */
  --green: #4fd18b;             /* success/tick on dark */
  --head: 'Space Grotesk', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;

  /* Motion — only ever used on transform/opacity. */
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--paper);
  background: var(--navy);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--head); letter-spacing: -0.02em; line-height: 1.15; color: var(--white); }

a { color: inherit; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

section { padding: 64px 0; scroll-margin-top: 84px; }

/* Visible focus ring for keyboard users, on the amber accent. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--amber); color: var(--navy); }

/* Skip link — visible only when focused. */
.skip-link {
  position: absolute;
  top: -48px; left: 12px;
  z-index: 400;
  background: var(--amber);
  color: var(--navy);
  font-family: var(--head);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 0; }

/* Scroll progress bar (GSAP scrubs scaleX). */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber), #ffc75a);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 300;
  pointer-events: none;
}

/* Canvas texture: a faint drafting grid + grain, fixed behind everything.
   WHY: the audience reads site drawings all day — a blueprint-style grid gives
   the navy some workshop character (planned job, not startup void), and the
   grain kills gradient banding on cheap screens. Static, so it costs nothing
   and is unaffected by reduced-motion. Sits at z-index -2 so the steel drift
   overlay (below) gradually softens it as you scroll — navy + crisp grid up
   top easing into warmer steel by the footer. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(140% 100% at 50% 0%, transparent 60%, rgba(6, 10, 18, 0.4) 100%);
  background-size: 160px 160px, 100% 100%;
}

/* The drafting grid rides on its own layer (a real element, not a pseudo, so
   GSAP can translate it): scrubbed to drift up slowly with scroll — a distant
   plane behind the page. Extra 420px hangs below the viewport so the upward
   travel never reveals a gap. Static (no drift) when motion is off. */
.bg-grid {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: -420px;
  z-index: -3;
  pointer-events: none;
  will-change: transform;
  background-image:
    linear-gradient(rgba(90, 120, 170, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 120, 170, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(90, 120, 170, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 120, 170, 0.028) 1px, transparent 1px);
  background-size: 168px 168px, 168px 168px, 28px 28px, 28px 28px;
}

/* Scroll-linked canvas drift: fixed Steel-tinted layer, opacity scrubbed by GSAP.
   Opacity-only = composited = cheap on mobile. */
.bg-shift {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(29, 53, 87, 0.97), transparent 70%),
    radial-gradient(90% 70% at 80% 90%, rgba(245, 165, 36, 0.11), transparent 60%);
}

.eyebrow {
  font-family: var(--head);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--amber);
  font-weight: 600;
  margin-bottom: 10px;
}

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

/* ---------- Scroll-reveal system ----------
   Elements are only hidden when <html class="js-anim"> is present, which the
   inline head script adds solely when motion is allowed AND JS runs. GSAP then
   animates them in. No JS / reduced motion => class absent => everything visible. */
.js-anim .reveal { opacity: 0; }
.js-anim .reveal-group > * { opacity: 0; }
.js-anim .hero-anim { opacity: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--head);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}

/* Navy text on amber — never white. See brand guidelines. */
.btn-primary {
  background: var(--amber);
  color: var(--navy);
  box-shadow: inset 0 -1px 0 rgba(17, 28, 46, 0.18);
}
.btn-primary:hover {
  background: var(--amber-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(245, 165, 36, 0.32), inset 0 -1px 0 rgba(17, 28, 46, 0.18);
}
.btn-primary:active { transform: translateY(0); box-shadow: inset 0 -1px 0 rgba(17, 28, 46, 0.18); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(247, 249, 252, 0.35);
}
.btn-ghost:hover { border-color: var(--white); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0); }

.btn-lg { font-size: 17px; padding: 16px 34px; }

/* ---------- Header (sticky, condenses on scroll) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  padding: 18px 0;
  border-bottom: 1px solid transparent;
  transition: padding var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.site-header.condensed {
  padding: 10px 0;
  background: rgba(17, 28, 46, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 24px rgba(10, 16, 28, 0.45);
}
/* While the mobile sheet is open the whole header goes solid too. */
.site-header.menu-open { background: var(--navy); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Inline logo lockup (icon + wordmark). Inlined rather than an <img> so the
   wordmark renders with the page's already-loaded Space Grotesk. */
.logo-link, .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-ic { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.logo-word {
  font-family: var(--head);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--white);
  white-space: nowrap;
}
.logo-word span { color: var(--amber); }
.site-header.condensed .logo-ic { transform: scale(0.92); transform-origin: left center; }

.desktop-nav { display: flex; align-items: center; gap: 6px; }
.desktop-nav a {
  font-family: var(--head);
  font-weight: 600;
  font-size: 14px;
  color: rgba(232, 235, 240, 0.72);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  position: relative;
  transition: color var(--dur) var(--ease-out);
}
.desktop-nav a:not(.btn-nav):hover { color: var(--white); }
/* Amber underline slides in on hover */
.desktop-nav a:not(.btn-nav)::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: var(--amber);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.desktop-nav a:not(.btn-nav):hover::after { transform: scaleX(1); }
.btn-nav {
  background: var(--amber);
  color: var(--navy) !important;
  font-weight: 600;
  padding: 9px 16px !important;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn-nav:hover { background: var(--amber-deep); transform: translateY(-1px); }

/* Mobile menu button (hamburger). Hidden on desktop. */
.menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu-ico { display: flex; flex-direction: column; gap: 5px; }
.menu-ico span {
  display: block;
  width: 18px; height: 2px;
  background: var(--paper);
  border-radius: 1px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.menu-btn[aria-expanded="true"] .menu-ico span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-ico span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-ico span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile sheet: sits under the header; transform/opacity only. */
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--navy);   /* solid: content must never ghost through the sheet */
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(10, 16, 28, 0.5);
  padding: 10px 20px 20px;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-menu a:not(.btn) {
  font-family: var(--head);
  font-weight: 600;
  font-size: 17px;
  color: var(--paper);
  text-decoration: none;
  padding: 14px 6px;              /* ≥44px touch target */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-menu .btn { margin-top: 14px; width: 100%; }

/* ---------- Hero ---------- */
.hero {
  padding: 48px 0 72px;
  text-align: center;
  background: radial-gradient(60% 45% at 50% 0%, rgba(245, 165, 36, 0.08), transparent 70%);
}
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.hero-mark-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 26px;
}
/* Soft amber glow behind the mark — solid and warm, not sparkly. */
.hero-mark-wrap::before {
  content: '';
  position: absolute;
  inset: -34px;
  background: radial-gradient(circle, rgba(245, 165, 36, 0.26), transparent 68%);
  z-index: -1;
  pointer-events: none;
}
.hero-mark { width: 64px; height: 64px; display: block; margin: 0 auto; }
.hero h1 {
  font-size: clamp(30px, 5.4vw, 50px);
  font-weight: 700;
  max-width: 18ch;
  margin: 0 auto 18px;
}
.hero h1 .amber { color: var(--amber); }
.hero .one {
  font-size: clamp(16px, 2.4vw, 19px);
  color: var(--muted);
  max-width: 44ch;
  margin: 0 auto 30px;
}
.hero .cta-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.hero .fine {
  font-size: 13px;
  color: var(--faint);
  margin-top: 16px;
}
/* Scroll cue — desktop only. On a tall/wide viewport the hero's own content
   doesn't fill the screen, which reads as "the site is short" and costs the
   scroll. Pinning the hero to min-height:100vh (see 900px breakpoint below)
   reclaims that space; this sits in it and invites the next scroll. */
.scroll-cue {
  display: none;
}
@media (min-width: 900px) {
  .scroll-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    color: var(--faint);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 200ms ease;
  }
  .scroll-cue:hover,
  .scroll-cue:focus-visible { opacity: 1; }
}
.scroll-cue-chevron {
  width: 16px;
  height: 16px;
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.phone-caption {
  font-size: 13px;
  color: var(--faint);
  margin-top: 14px;
  text-align: center;
}

/* ---------- Phone mockup (shared by hero + how-it-works) ----------
   Style lifted from brand-guidelines.html: dark shell, light screen — the light
   screen doubles as the page's bright accent against the dark canvas. */
.phone {
  width: 250px;
  margin: 0 auto;
  background: #0c1522;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(6, 10, 18, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.phone-screen { background: #eef1f6; border-radius: 20px; overflow: hidden; }
.phone-bar {
  background: var(--navy);
  color: #fff;
  padding: 11px 14px;
  font-family: var(--head);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.phone-bar-ic { width: 22px; height: 22px; border-radius: 5px; }
.phone-chat { padding: 16px 12px; min-height: 200px; }
.chat-missed, .chat-sys {
  font-size: 11px;
  color: #5B6673;
  text-align: center;
  margin: 0 0 12px;
}
.chat-sys { color: #1f7a44; font-weight: 600; }
.chat-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #D3D9E2;
  border-radius: 10px;
  font-size: 12px;
  color: #111C2E;
  font-weight: 500;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.ring-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: ringPulse 1.6s ease-out infinite;
}
@keyframes ringPulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 209, 139, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(79, 209, 139, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 209, 139, 0); }
}
.chat-b {
  max-width: 85%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 10px;
}
.chat-b.in {
  background: #fff;
  border: 1px solid #D3D9E2;
  border-bottom-left-radius: 4px;
  color: #111C2E;
}
.chat-b.out {
  background: var(--amber);
  color: var(--navy);
  margin-left: auto;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}

/* ---------- Why (stats) ---------- */
.why h2 {
  font-size: clamp(24px, 4vw, 32px);
  max-width: 22ch;
  margin-bottom: 14px;
}
.why .lead {
  max-width: 60ch;
  margin-bottom: 20px;
  font-size: 17px;
}
/* Ambient glow behind the stats — same warm radial family as the hero's
   mark-glow, so the sections read as one system. */
.why { position: relative; }
.why::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(44% 36% at 74% 28%, rgba(245, 165, 36, 0.07), transparent 70%);
}
.why .grid-wrap { position: relative; }

/* Bridge to the ROI calculator — the section's next step, so it dresses like
   one: ghost pill that fills amber on hover (navy text on amber, per brand). */
.why-calc-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid rgba(245, 165, 36, 0.5);
  border-radius: 999px;
  font-family: var(--head);
  font-weight: 600;
  font-size: 15px;
  color: var(--amber);
  text-decoration: none;
  margin-bottom: 16px;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.why-calc-link .arr { transition: transform var(--dur) var(--ease-out); }
.why-calc-link:hover, .why-calc-link:focus-visible {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--navy);
}
.why-calc-link:hover .arr, .why-calc-link:focus-visible .arr { transform: translateX(4px); }
.why-calc-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* Stats as an argument: two big ANCHOR cards (scale of the problem), then a
   threaded cause→effect chain (what happens next). Hierarchy lives in the
   layout/typography so it survives with all motion off. */
.stat-anchors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.stat-card {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 22px;
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 165, 36, 0.45);
  box-shadow: 0 12px 30px rgba(6, 10, 18, 0.4);
}
.stat-num {
  font-family: var(--head);
  font-weight: 700;
  font-size: 30px;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.stat-card.anchor .stat-num {
  display: block;
  font-size: clamp(32px, 4.5vw, 42px);
  line-height: 1.1;
  margin: 12px 0 8px;
}
.stat-flow .d { font-size: 14px; color: var(--muted); }

/* Line-drawn amber motifs — stroked paths so their entrance can "draw" in. */
.stat-ic {
  width: 30px;
  height: 30px;
  display: block;
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat-ic text {
  stroke: none;
  fill: var(--amber);
  font-family: var(--head);
  font-weight: 700;
  font-size: 13px;
}

.conseq-kicker {
  font-size: 14px;
  font-style: italic;
  color: var(--amber);
  margin: 22px 0 14px;
}
.conseq-chain {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* The thread: cause flowing into effect. Sits behind the icon "nodes". */
.conseq-thread {
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, rgba(245, 165, 36, 0.55), rgba(245, 165, 36, 0.2));
  transform-origin: top;
}
.conseq {
  position: relative;
  padding-left: 46px;
}
.conseq .stat-ic {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background: var(--navy); /* node disc — masks the thread passing behind */
  border-radius: 50%;
  padding: 3px;
}
.conseq .stat-num { font-size: 22px; margin-right: 8px; }
.conseq .d { display: inline; }

/* ---------- How it works (scrollytelling) ---------- */
.how-head { margin-bottom: 40px; }
.how-head h2 { font-size: clamp(24px, 4vw, 32px); }
.how-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.how-steps { display: flex; flex-direction: column; gap: 26px; }
.step {
  display: flex;
  gap: 16px;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur) var(--ease-out);
}
.step .n {
  font-family: var(--head);
  font-weight: 700;
  font-size: 20px;
  color: var(--navy);
  background: var(--amber);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.step .t {
  font-family: var(--head);
  font-weight: 600;
  font-size: 18px;
  color: var(--white);
  margin-bottom: 4px;
}
.step .d { font-size: 14.5px; color: var(--muted); max-width: 44ch; }
/* Desktop scrolly state (class added by JS only when the pinned mode runs):
   inactive steps dim, the active one glows. */
.how.scrolly-on .step { opacity: 0.4; }
.how.scrolly-on .step.is-active { opacity: 1; }
.how.scrolly-on .step.is-active .n {
  box-shadow: 0 0 0 6px rgba(245, 165, 36, 0.22);
  transform: scale(1.06);
}
.how-phone-col { display: flex; flex-direction: column; align-items: center; }

/* ---------- Calculator ----------
   The lead magnet. The whole card behaves like a temperature gauge for lost
   money: slider fills run amber -> hot red-amber as values climb (--fill is
   the filled %, --hot-c the JS-lerped colour), a floating bubble tracks the
   thumb while dragging, and .calc-heat (an opacity-only glow layer) warms the
   card as the £/year output grows. All motion is transform/opacity or a
   CSS-var repaint on a single small card — no layout thrash. */
.calc h2 { font-size: clamp(24px, 4vw, 32px); margin-bottom: 10px; }
.calc .lead { max-width: 56ch; margin-bottom: 32px; font-size: 16px; }
.calc-card {
  position: relative;
  overflow: hidden; /* clips the heat glow to the card's radius */
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 28px;
  display: grid;
  gap: 22px;
}
.calc-heat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0; /* JS drives 0 -> 1 with the £ figure */
  transition: opacity var(--dur) var(--ease-out);
  background:
    radial-gradient(90% 70% at 50% 105%, rgba(224, 82, 30, 0.34), transparent 70%),
    radial-gradient(60% 45% at 50% 108%, rgba(245, 165, 36, 0.28), transparent 75%);
}
.calc-field, .calc-result { position: relative; } /* sit above the heat layer */

.calc-field label {
  display: block;
  font-family: var(--head);
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 8px;
}
.calc-field .range-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.slider-wrap { position: relative; flex: 1; display: flex; align-items: center; }

/* The real, keyboard-operable range input — restyled, never replaced. */
.calc-field input[type="range"] {
  --fill: 0%;
  --hot-c: var(--amber);
  flex: 1;
  width: 100%;
  height: 44px; /* full-size touch target; the visible track is drawn thinner */
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: grab;
  touch-action: pan-y; /* horizontal drags belong to the slider; vertical swipes still scroll the page */
}
.calc-field input[type="range"]:active { cursor: grabbing; }
.calc-field input[type="range"]:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
  border-radius: 8px;
}

/* WebKit track: filled portion is an amber->hot gradient with a hard stop at --fill. */
.calc-field input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amber), var(--hot-c) var(--fill), rgba(232, 235, 240, 0.12) var(--fill));
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px; /* centres 26px thumb on 8px track */
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid var(--navy);
  box-shadow: 0 0 0 2px var(--amber), 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.slider-wrap.dragging input[type="range"]::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: 0 0 0 2px var(--amber), 0 0 18px 4px rgba(245, 165, 36, 0.45);
}

/* Firefox equivalents (::-moz-range-progress IS the filled part natively). */
.calc-field input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(232, 235, 240, 0.12);
}
.calc-field input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amber), var(--hot-c));
}
.calc-field input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid var(--navy);
  box-shadow: 0 0 0 2px var(--amber), 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.slider-wrap.dragging input[type="range"]::-moz-range-thumb {
  transform: scale(1.18);
  box-shadow: 0 0 0 2px var(--amber), 0 0 18px 4px rgba(245, 165, 36, 0.45);
}

/* Floating value bubble — rides the thumb's x while dragging. Navy on amber. */
.slider-bubble {
  position: absolute;
  left: 0;
  top: -26px;
  transform: translateX(var(--bx, 0px)) translateX(-50%) translateY(4px);
  background: var(--amber);
  color: var(--navy);
  font-family: var(--head);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.slider-bubble::after { /* little tail pointing at the thumb */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: var(--amber);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}
.slider-wrap.dragging .slider-bubble {
  opacity: 1;
  transform: translateX(var(--bx, 0px)) translateX(-50%) translateY(0);
}

/* Live micro-copy under each slider. min-height stops the card jumping as lines change. */
.slider-copy {
  font-size: 13px;
  color: var(--faint);
  margin-top: 6px;
  min-height: 20px;
  font-style: italic;
}
.slider-copy.warm { color: var(--amber); font-style: normal; font-weight: 500; }

.calc-field input[type="number"] {
  width: 88px;
  min-height: 44px;
  background: var(--navy);
  border: 1px solid var(--line);
  color: var(--white);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-family: var(--head);
  text-align: center;
}
.calc-field .prefix { color: var(--muted); font-size: 14px; }
.calc-result {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  text-align: center;
}
.calc-result .label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 8px;
}
.calc-result .amount {
  position: relative;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(36px, 8vw, 56px);
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  will-change: transform;
}
.calc-result .amount.pop { animation: amountPop var(--dur-slow) var(--ease-bounce); }
@keyframes amountPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
/* Threshold moment: one expanding amber ring the instant the loss passes what
   a year of LeadCatch costs — the pitch, clicking. */
.calc-result .amount.ping::after {
  content: '';
  position: absolute;
  inset: -14px -22px;
  border: 2px solid var(--amber);
  border-radius: 999px;
  opacity: 0;
  animation: thresholdRing 0.7s var(--ease-out);
  pointer-events: none;
}
@keyframes thresholdRing {
  0% { opacity: 0.9; transform: scale(0.65); }
  100% { opacity: 0; transform: scale(1.35); }
}
.calc-result .sub { font-size: 14px; color: var(--muted); margin-top: 10px; }
/* NB: named calc-compare, not compare — .compare is already the pricing
   section's 3-column strip and inheriting its grid split this line apart. */
.calc-result .calc-compare {
  font-size: 14px;
  color: var(--paper);
  margin-top: 8px;
  min-height: 22px;
  font-variant-numeric: tabular-nums;
}
.calc-result .calc-compare strong { color: var(--amber); }

/* Visually-hidden live region for screen readers. */
.sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Pricing ---------- */
.pricing { text-align: center; }
.pricing h2 { font-size: clamp(24px, 4vw, 32px); margin-bottom: 10px; }
.pricing .lead { max-width: 52ch; margin: 0 auto 40px; }

/* Comparison strip */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto 36px;
}
.compare-cell {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 22px 18px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.compare-cell:hover { transform: translateY(-3px); }
.compare-cell.is-win {
  background: linear-gradient(180deg, rgba(245, 165, 36, 0.12), var(--panel));
  border-color: var(--amber);
  box-shadow: 0 12px 32px rgba(245, 165, 36, 0.12);
}
.compare-h {
  font-family: var(--head);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}
.compare-big {
  font-family: var(--head);
  font-weight: 700;
  font-size: 30px;
  color: var(--white);
  line-height: 1;
}
.compare-big span { font-size: 16px; font-weight: 500; color: var(--muted); }
.compare-cell.is-win .compare-big { color: var(--amber); }
.compare-sub { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* Pricing card — dark re-skin of the eleccerts card: amber top bar + border kept. */
.price-card {
  position: relative;
  background: linear-gradient(180deg, rgba(245, 165, 36, 0.10) 0%, var(--panel) 45%);
  border: 1.5px solid var(--amber);
  border-radius: 20px;
  padding: 44px 32px 34px;
  max-width: 580px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(6, 10, 18, 0.5), 0 0 40px rgba(245, 165, 36, 0.07);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.price-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--amber), #ffc75a, var(--amber-deep));
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 72px rgba(6, 10, 18, 0.55), 0 0 56px rgba(245, 165, 36, 0.12);
}
.price-tag {
  position: absolute;
  top: 18px; right: 18px;
  background: var(--amber);
  color: var(--navy);
  font-family: var(--head);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
}
.plan-name {
  font-family: var(--head);
  font-size: 14px;
  font-weight: 700;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.price-amount {
  font-family: var(--head);
  font-weight: 700;
  font-size: 58px;
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 1;
}
.price-unit { font-size: 19px; font-weight: 500; color: var(--muted); }
.price-period { font-size: 14px; color: var(--muted); margin-top: 12px; }
.price-period strong { color: var(--amber); font-weight: 700; }
.price-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  text-align: left;
  max-width: 380px;
  margin: 28px auto 30px;
}
.price-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--paper);
}
.price-feature svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; }
.price-card .btn { width: 100%; }
.price-note { font-size: 13px; color: var(--muted); margin-top: 16px; }

/* Billing period toggle (monthly / yearly) — ported from eleccerts, dark skin. */
.billing-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px;
  margin: 0 auto 20px;
}
.billing-opt {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--head);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding: 9px 18px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--dur) var(--ease-out);
}
.billing-opt:hover { color: var(--white); }
.billing-opt.is-active { color: var(--white); }
.billing-pill {
  position: absolute;
  top: 0; left: 0;
  background: var(--line);
  border-radius: 99px;
  box-shadow: 0 1px 4px rgba(6, 10, 18, 0.4);
  transition: transform 0.38s var(--ease-bounce), width 0.38s var(--ease-bounce);
  will-change: transform, width;
  pointer-events: none;
}
.save-pill {
  background: #dbf0e2;
  color: #1f7a44;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  animation: pillNudge 7s ease-in-out 4s infinite;
}
@keyframes pillNudge {
  0%, 86%, 100% { transform: rotate(0); }
  89% { transform: rotate(-5deg) scale(1.08); }
  93% { transform: rotate(4deg); }
  97% { transform: rotate(-2deg); }
}
.price-period, .price-note { transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out); }
.is-swapping { opacity: 0; transform: translateY(5px); }
.price-anchor {
  font-family: var(--head);
  font-size: 26px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(169, 180, 196, 0.55);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.price-anchor.anchor-hidden { opacity: 0; transform: scale(0.85); }
@keyframes price-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.price-pop { animation: price-pop 0.28s var(--ease-out); }
.reframe-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease-bounce);
}
.reframe-wrap.reframe-open { grid-template-rows: 1fr; }
.reframe-inner { overflow: hidden; min-height: 0; }
.price-reframe {
  display: inline-block;
  font-size: 13px;
  color: var(--paper);
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 16px;
  margin-top: 16px;
  opacity: 0;
  transform: scale(0.88) translateY(-6px);
  transition: opacity 0.3s var(--ease-out), transform 0.38s var(--ease-bounce);
}
.reframe-wrap.reframe-open .price-reframe {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 0.14s;
}
.price-reframe strong { color: var(--amber); }

/* ---------- Trust row ---------- */
.trust { padding-top: 0; }
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.trust-card {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--amber);
  border-radius: 12px;
  padding: 22px;
}
.trust-h {
  font-family: var(--head);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
  margin-bottom: 8px;
}
.trust-card p { font-size: 14px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq h2 { font-size: clamp(24px, 4vw, 32px); margin-bottom: 12px; }
.faq .lead { max-width: 34ch; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out);
}
.faq-item[open] { border-color: rgba(245, 165, 36, 0.4); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--head);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--paper);
  padding: 16px 18px;              /* ≥44px touch target */
}
.faq-item summary::-webkit-details-marker { display: none; }
/* The question text must be ONE flex item — an inline <em> inside plain text
   otherwise splits the line into several anonymous flex children, and
   justify-content: space-between then spreads them across the whole row
   instead of just pushing the chevron to the end. */
.faq-item summary .q { flex: 1; }
.faq-item summary em { font-style: italic; color: var(--amber); }
.faq-item summary:hover { color: var(--white); }
.chev {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}
.faq-item[open] .chev { transform: rotate(225deg); border-color: var(--amber); }
.faq-a { padding: 0 18px 16px; }
.faq-a p { font-size: 14.5px; color: var(--muted); max-width: 60ch; }
.faq-item[open] .faq-a { animation: faqIn 0.28s var(--ease-out); }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Email capture ---------- */
.capture { text-align: center; }
.capture-card {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 44px 24px;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 20px 56px rgba(6, 10, 18, 0.4);
}
.capture h2 { font-size: clamp(22px, 4vw, 30px); margin-bottom: 10px; }
.capture .lead { max-width: 46ch; margin: 0 auto 26px; }
.capture form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
  margin: 0 auto;
}
.capture input[type="email"] {
  padding: 14px 16px;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--navy);
  color: var(--white);
  font: inherit;
  flex: 1;
}
.capture .note { font-size: 13px; color: var(--faint); margin-top: 14px; }
.capture .success {
  display: none;
  background: #1f7a44;
  color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  max-width: 400px;
  margin: 20px auto 0;
}
/* Visible on POST failure — [hidden] handles show/hide, so no display:none default needed. */
.capture-error {
  background: rgba(229, 72, 77, 0.14);
  border: 1px solid #e5484d;
  color: #ffb4b8;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  max-width: 400px;
  margin: 0 auto;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 36px 0;
  font-size: 13px;
  color: var(--faint);
}
.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.site-footer .logo-ic { width: 24px; height: 24px; }
.site-footer .logo-word { font-size: 16px; }
.footer-links { display: flex; gap: 4px; }
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 12px;               /* comfortable touch target */
  border-radius: 6px;
  transition: color var(--dur) var(--ease-out);
}
.footer-links a:hover { color: var(--white); }
.footer-line, .footer-copy { text-align: center; }
.footer-copy { margin-top: 6px; }

/* ---------- Legal stub pages ---------- */
.legal { max-width: 680px; margin: 0 auto; padding: 56px 20px 80px; }
.legal h1 { font-size: 30px; margin-bottom: 8px; }
.legal .stamp {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--amber);
  border: 1px solid rgba(245, 165, 36, 0.4);
  border-radius: 99px;
  padding: 3px 10px;
  margin-bottom: 22px;
}
.legal p { color: var(--muted); margin-bottom: 14px; max-width: 64ch; }
.legal a { color: var(--amber); }

/* ---------- Larger screens ---------- */
@media (min-width: 640px) {
  .hero .cta-row { flex-direction: row; justify-content: center; }
  .stat-anchors { grid-template-columns: repeat(2, 1fr); }
  .compare { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .price-features { grid-template-columns: 1fr 1fr; gap: 12px 24px; max-width: 480px; }
  .calc-card { grid-template-columns: 1fr 1fr; align-items: start; }
  .calc-result { grid-column: 1 / -1; }
  .capture form { flex-direction: row; }
  .capture form button { flex-shrink: 0; }
  .footer-top { flex-direction: row; justify-content: space-between; }
  .footer-line, .footer-copy { text-align: left; }
}

@media (min-width: 900px) {
  section { padding: 96px 0; }

  /* Hero: copy left, phone right — fills the desktop gutters with the product.
     min-height + flex centring keeps the hero filling the viewport on tall
     screens instead of leaving dead space above the fold; .scroll-cue then
     anchors to the bottom of that space (position:relative below). */
  .hero {
    text-align: left;
    padding: 64px 0 96px;
    position: relative;
    min-height: calc(100vh - 80px); /* full viewport minus the sticky header's approx. height, so the cue below is never cut off on load */
    display: flex;
    align-items: center;
  }
  .hero > .wrap { width: 100%; } /* flex item would otherwise shrink to content width */
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 56px; }
  .hero h1, .hero .one { margin-left: 0; }
  .hero .cta-row { justify-content: flex-start; }
  .hero-mark { margin: 0; }
  .phone { width: 270px; }

  .grid-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
  .why .lead { margin-bottom: 20px; }

  /* Scrollytelling layout: steps get breathing room so the sticky phone has a
     story to tell; the phone column pins itself with position:sticky (cheaper
     and more robust than a JS pin — no layout shifts, nothing to clean up). */
  .how-grid { grid-template-columns: 1fr 340px; gap: 64px; }
  /* Enough gap for each step to get its own scroll dwell (the conversation
     timeline plays out across this distance — see initScrolly() in script.js),
     without stranding a long stretch of blank canvas after step 3 finishes. */
  .how-steps { gap: 14vh; padding: 4vh 0 2vh; }
  .how-phone-col { position: sticky; top: 110px; align-self: start; }

  .faq .grid-wrap { align-items: start; }
}

/* Small screens: swap desktop links for the hamburger. */
@media (max-width: 719px) {
  .desktop-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .mobile-menu { display: flex; }
  .hero .cta-row { width: 100%; }
  .hero .cta-row .btn { width: 100%; }
}

/* ---------- Reduced motion: strip all motion, show everything ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-group > *, .hero-anim { opacity: 1 !important; transform: none !important; }
  .btn:hover, .stat-card:hover, .step:hover,
  .compare-cell:hover, .price-card:hover { transform: none !important; }
  .scroll-progress { display: none; }
  .bg-shift { opacity: 0.45; }           /* static tone, no scrub */
  .how.scrolly-on .step { opacity: 1; }  /* belt & braces: never dim */
}