/* ==========================================================================
   LScale — Managed AI employees for service businesses
   main.css

   Structure
     01  Reset & base
     02  Typography roles
     03  Layout primitives
     04  Buttons & links
     05  Call-state chips + the Call Thread (signature component)
     06  Clip stage (video slots + DOM fallback)
     07  Header / nav
     08  Hero
     09  Problem + exposure calculator
     10  How it works
     11  Capabilities
     12  Managed, not DIY
     13  Live demo
     14  Real call proof
     15  Industries
     16  Expansion
     17  Product interface frame
     18  Pricing
     19  FAQ
     20  Final CTA
     21  Footer
     22  Reveal-on-scroll + reduced motion
   ========================================================================== */

/* ---------- 01  Reset & base --------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip`, not `hidden`: overflow-x:hidden turns body into a scroll container
     and silently breaks position:sticky for every descendant — which kills the
     scrubbed hero and the sticky process panel. `clip` guards against stray
     horizontal overflow without establishing a scrollport. */
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}
.section--ink :focus-visible { box-shadow: var(--focus-ring-ink); }

::selection { background: var(--signal); color: #fff; }

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4);
  transform: translateY(-200%);
  z-index: 200;
  background: var(--paper-raised); color: var(--text);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-md);
  box-shadow: var(--shadow-3); text-decoration: none; font-weight: 560;
  transition: transform var(--d-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 02  Typography roles ----------------------------------------- */

.display-1, .display-2, .display-3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin: 0;
  text-wrap: balance;
}
.display-1 { font-size: var(--t-display-1); }
.display-2 { font-size: var(--t-display-2); }
.display-3 { font-size: var(--t-display-3); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); }

h3, .heading {
  font-family: var(--font-display);
  font-size: var(--t-heading);
  font-weight: 580;
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  margin: 0;
}

p { margin: 0; }
.lede {
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--maxw-text);
  text-wrap: pretty;
}
.section--ink .lede { color: var(--text-on-ink-muted); }

.prose { color: var(--text-muted); max-width: var(--maxw-text); text-wrap: pretty; }
.prose + .prose { margin-top: var(--s-4); }

/* The utility face. Reserved for operational data and structural labels. */
.data {
  font-family: var(--font-mono);
  font-size: var(--t-data);
  letter-spacing: var(--tr-data);
  text-transform: uppercase;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Section eyebrow — reads as a log line, because that is what it is */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-data);
  letter-spacing: var(--tr-data);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-faint);
  margin: 0 0 var(--s-5);
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.5;
}
.section--ink .eyebrow { color: var(--text-on-ink-faint); }

/* ---------- 03  Layout primitives ---------------------------------------- */

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--ink   { background: var(--ink); color: var(--text-on-ink); }
.section--paper { background: var(--paper); }
.section--raised{ background: var(--paper-raised); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 1380px; }

.section-head { margin-bottom: var(--s-8); max-width: 760px; }
/* Adjacency, not section scoping — a lede after a display heading always needs
   the same gap, including in sections that don't use .section-head. */
.display-1 + .lede,
.display-2 + .lede,
.display-3 + .lede,
.section-head .lede { margin-top: var(--s-5); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s-8); align-items: center; }

@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Card — the one card recipe. Modifiers only change surface, never geometry. */
.card {
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--d-base) var(--ease), transform var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease);
}
.card--ink {
  background: var(--ink-raised);
  border-color: var(--ink-line);
  box-shadow: none;
}
.card--sunken { background: var(--paper-sunken); box-shadow: none; }
.card--lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: #D3D8E0;
}

/* ---------- 04  Buttons & links ------------------------------------------ */

.btn {
  --btn-bg: var(--text);
  --btn-fg: #fff;
  --btn-bd: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 560;
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: transform var(--d-fast) var(--ease), box-shadow var(--d-base) var(--ease),
              background-color var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }

/* Shimmer — a single specular sweep on hover. Fires once per hover, no loop. */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.32) 48%,
    rgba(255, 255, 255, 0.42) 52%,
    transparent 62%);
  transform: translateX(-115%);
  transition: transform 720ms var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(115%); }

.btn--primary { --btn-bg: var(--signal); --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: #3D7DF0; }

/* Green call CTA — dark-green text on --booked (7.1:1); white fails AA here */
.btn--booked { --btn-bg: var(--booked); --btn-fg: #06231A; }
.btn--booked:hover { --btn-bg: #29B27E; }
.btn--booked .btn__pip { background: #06231A; }

.btn--dark { --btn-bg: var(--text); --btn-fg: #fff; }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--paper-line);
}
.btn--ghost:hover { --btn-bd: #C9D0DA; --btn-bg: var(--paper-raised); }
.btn--ghost::after { background: linear-gradient(105deg, transparent 38%, rgba(74,140,255,0.14) 50%, transparent 62%); }

.btn--ghost-ink {
  --btn-bg: rgba(255,255,255,0.04); --btn-fg: var(--text-on-ink); --btn-bd: var(--ink-soft);
}
.btn--ghost-ink:hover { --btn-bg: rgba(255,255,255,0.08); --btn-bd: #3C4757; }

.btn--sm { padding: 0.6rem 1.05rem; font-size: var(--t-caption); }
.btn--lg { padding: 1.05rem 1.85rem; font-size: var(--t-body); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* Assurance line under a CTA pair */
.cta-note {
  margin-top: var(--s-4);
  font-size: var(--t-caption);
  color: var(--text-muted);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.section--ink .cta-note { color: var(--text-on-ink-muted); }
.cta-note strong { color: var(--text); font-weight: 580; }
.section--ink .cta-note strong { color: var(--text-on-ink); }
.cta-note .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.45; }

.link-inline {
  color: var(--signal-text); text-decoration: none;
  border-bottom: 1px solid rgba(74, 140, 255, 0.32);
  padding-bottom: 1px;
  transition: border-color var(--d-fast) var(--ease);
}
.link-inline:hover { border-bottom-color: var(--signal); }

/* ---------- 05  Call-state chips + the Call Thread ------------------------ */

.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.24rem 0.6rem 0.24rem 0.5rem;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--t-data);
  letter-spacing: var(--tr-data);
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }

.chip--live     { color: var(--signal-text); background: var(--signal-wash);   border-color: #D3E2FF; }
.chip--booked   { color: var(--booked-text); background: var(--booked-wash);   border-color: #C6EDDC; }
.chip--escalate { color: var(--escalate-text); background: var(--escalate-wash); border-color: #F4E0BC; }
.chip--missed   { color: #C0272C; background: var(--missed-wash);   border-color: #F7D3D4; }
.chip--idle     { color: var(--text-faint); background: var(--paper-sunken); border-color: var(--paper-line); }

/* on the dark stage */
.chip--on-ink.chip--live     { color: var(--signal-tint);   background: rgba(74,140,255,0.12);  border-color: rgba(74,140,255,0.28); }
.chip--on-ink.chip--booked   { color: var(--booked-tint);   background: rgba(47,191,135,0.12);  border-color: rgba(47,191,135,0.28); }
.chip--on-ink.chip--escalate { color: var(--escalate-tint); background: rgba(224,160,60,0.12);  border-color: rgba(224,160,60,0.28); }
.chip--on-ink.chip--idle     { color: var(--text-on-ink-faint); background: rgba(255,255,255,0.04); border-color: var(--ink-line); }

/* Pulsing dot for a genuinely live state only */
.chip--live::before { animation: pulse-dot 1.8s var(--ease-in-out) infinite; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.78); }
}

/* --- The Call Thread ------------------------------------------------------
   Signature component. A spine with timestamped operational events docking
   onto it. Used at three scales: hero (scrubbed), how-it-works (process log),
   product frame (call detail). One structure, one set of rules.            */

.thread { position: relative; margin: 0; padding: 0; list-style: none; }
.thread::before {
  content: "";
  position: absolute; left: 7px; top: 10px; bottom: 10px;
  width: 1px;
  background: var(--paper-line);
}
.thread--ink::before { background: var(--ink-line); }

.thread__item {
  position: relative;
  padding-left: var(--s-7);
  padding-block: 0.44rem;
  opacity: 0.32;
  filter: saturate(0.25);
  transform: translateY(4px);
  transition: opacity var(--d-stage) var(--ease-out),
              transform var(--d-stage) var(--ease-out),
              filter var(--d-stage) var(--ease-out);
}
.thread__item.is-on { opacity: 1; filter: saturate(1); transform: translateY(0); }

/* node */
.thread__item::before {
  content: "";
  position: absolute; left: 3px; top: 0.86rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--paper-line);
  transition: background-color var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease);
}
.thread--ink .thread__item::before { background: var(--ink); border-color: var(--ink-soft); }

.thread__item.is-on::before { border-color: var(--signal); background: var(--signal); }
.thread__item.is-on[data-state="booked"]::before   { border-color: var(--booked);   background: var(--booked); }
.thread__item.is-on[data-state="escalate"]::before { border-color: var(--escalate); background: var(--escalate); }
.thread__item.is-current::before { box-shadow: 0 0 0 4px rgba(74, 140, 255, 0.18); }

.thread__meta {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-data);
  letter-spacing: var(--tr-data);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.18rem;
}
.thread--ink .thread__meta { color: var(--text-on-ink-faint); }

.thread__label {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 560;
  letter-spacing: var(--tr-heading);
  line-height: 1.3;
}
.thread__detail {
  font-size: var(--t-small);
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 0.16rem;
}
.thread--ink .thread__detail { color: var(--text-on-ink-muted); }

/* ---------- 06  Clip stage (video slots + DOM fallback) -------------------
   Every generated clip lives in a .clip-stage. Dropping an .mp4 into
   assets/media/clips/ and naming it in site.config.js activates the video
   layer; the DOM layer underneath keeps carrying the meaning either way.  */

.clip-stage { position: relative; overflow: hidden; isolation: isolate; }

.clip-stage__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease);
}
.clip-stage__video.is-ready { opacity: 1; }
.clip-stage[data-clip-mode="replace"] .clip-stage__video.is-ready ~ .clip-stage__dom { opacity: 0; pointer-events: none; }

.clip-stage__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 70% 20%, rgba(74, 140, 255, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(10,12,16,0.55) 0%, rgba(10,12,16,0.80) 55%, var(--ink) 100%);
}
.clip-stage__dom { position: relative; z-index: 2; transition: opacity var(--d-slow) var(--ease); }

/* Slot marker shown while no real footage is present */
.clip-slot-tag {
  position: absolute; z-index: 5; right: var(--s-4); bottom: var(--s-4);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-sm);
  background: rgba(10, 12, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-on-ink-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.clip-slot-tag[hidden] { display: none; }

/* ---------- 07  Header / nav --------------------------------------------- */

.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  transition: background-color var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
              backdrop-filter var(--d-base) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(245, 246, 248, 0.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--paper-line);
}
.site-header.is-over-ink .nav__link,
.site-header.is-over-ink .brand { color: var(--text-on-ink); }
.site-header.is-over-ink .nav__link:hover { color: #fff; }
/* ghost-ink is styled for dark surfaces; over light sections the header
   restyles it, or its near-white text disappears into the glass */
.site-header:not(.is-over-ink) .btn--ghost-ink {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: #C4CBD6;
}
.site-header:not(.is-over-ink) .btn--ghost-ink:hover {
  --btn-bg: var(--paper-raised); --btn-bd: #AEB7C4;
}

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  height: 68px;
}
/* Wordmark only. A boxed monogram beside the name read as stock-template
   branding; the name carries the identity better on its own, so it is set
   larger and tighter to hold the corner without the box. */
.brand {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-size: 1.24rem; font-weight: 660; letter-spacing: -0.035em;
  color: var(--text); text-decoration: none;
  transition: color var(--d-base) var(--ease);
}

.nav__links { display: flex; align-items: center; gap: var(--s-6); }
.nav__link {
  color: var(--text-muted); text-decoration: none;
  font-size: var(--t-small); font-weight: 500;
  transition: color var(--d-fast) var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: var(--s-3); }

.nav__toggle { display: none; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__actions .btn--ghost, .nav__actions .btn--ghost-ink { display: none; }
}

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

.hero {
  position: relative;
  background: var(--ink);
  color: var(--text-on-ink);
}
/* Tall scroll track; the stage inside is sticky and scrubs through 8 stages.
   200vh keeps the full 8-event build legible without holding the visitor in
   the hero for three and a half screens. */
.hero__track { position: relative; height: 200vh; }
.hero__sticky {
  position: sticky; top: 0;
  height: 100vh; min-height: 620px;
  display: flex; align-items: center;
  /* clear the 68px fixed header so nothing collides with the nav */
  padding-block: 92px var(--s-6);
  overflow: hidden;
}
.hero .clip-stage { position: absolute; inset: 0; }

/* ================= HERO AMBIENT MOTION LAYER =================
   The hero carries no footage. Its motion is drawn here instead, in four
   layers that cost nothing to download and never stop: a drifting light
   plate, a live ops surface, sparse signal traffic, and grain.

   The point is a *state*, not an event — the operation is continuously
   running, so the motion has no beginning and no end to miss. Everything
   animates transform/opacity only, so it stays on the compositor and off
   the main thread, and all of it holds still under reduced-motion.
   Layer order inside .clip-stage__dom: plate 0 · grid 1 · traffic 2 · grain 3.  */

/* 0 — the layer everything else lives in. As a relative block whose children
   are all absolutely positioned, it collapses to zero height and silently
   takes every ambient layer down with it: percentage offsets resolve against
   nothing and `overflow: hidden` clips the lot. It has to fill the stage.
   Scoped to the hero, because elsewhere this layer is meant to carry real
   in-flow content. */
.hero .clip-stage__dom { position: absolute; inset: 0; }

/* 1 — light plate. Two fields on deliberately unrelated periods (58s / 83s)
   so the composite never visibly repeats itself. */
.hero__plate {
  position: absolute; inset: -10%;
  z-index: 0;
  background: radial-gradient(48% 42% at 78% 32%, rgba(74, 140, 255, 0.16), transparent 62%);
  animation: plate-drift-a 58s var(--ease-in-out) infinite alternate;
}
.hero__plate::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(40% 40% at 18% 76%, rgba(47, 191, 135, 0.09), transparent 60%);
  animation: plate-drift-b 83s var(--ease-in-out) infinite alternate;
}
@keyframes plate-drift-a {
  from { transform: translate3d(-1.6%, 0.8%, 0) scale(1); }
  to   { transform: translate3d(1.8%, -1.2%, 0) scale(1.07); }
}
@keyframes plate-drift-b {
  from { transform: translate3d(1.4%, -0.8%, 0) scale(1.05); }
  to   { transform: translate3d(-1.8%, 1.2%, 0) scale(1); }
}

/* 2 — fine grid, the surface of an ops board. The pattern drifts on a child
   so the parent keeps the radial mask fixed; translating the masked element
   itself would drag the mask off centre. 64px over 150s ≈ 0.4px/s: read as a
   living surface, never as an animation. */
.hero__grid {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
  mask-image: radial-gradient(80% 65% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 65% at 50% 45%, #000 20%, transparent 78%);
}
.hero__grid::before {
  content: "";
  position: absolute; inset: -80px;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: grid-drift 150s linear infinite;
  will-change: transform;
}
@keyframes grid-drift {
  to { transform: translate3d(64px, 64px, 0); }
}

/* 3 — signal traffic. Interactions crossing the operation: eight points on
   long, slow, non-harmonic paths (31–57s, all coprime enough that they never
   line up). Blue is in progress, green is settled — the same two states the
   Call Thread uses. Negative delays scatter them across their paths on load,
   so the hero is never caught at a "nothing has started yet" moment. */
.hero__traffic { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.hero__traffic i {
  position: absolute;
  top: var(--y); left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--dot, var(--signal));
  box-shadow: 0 0 7px 1.5px var(--glow, rgba(74, 140, 255, 0.5));
  opacity: 0;
  animation: traffic var(--dur) linear var(--delay) infinite;
  will-change: transform, opacity;
}
@keyframes traffic {
  0%   { transform: translate3d(-6vw, 0, 0); opacity: 0; }
  10%  { opacity: var(--o); }
  90%  { opacity: var(--o); }
  100% { transform: translate3d(106vw, var(--dy), 0); opacity: 0; }
}
.hero__traffic i:nth-child(1) { --y: 16%; --dur: 38s; --delay: -4s;  --o: 0.20; --dy:  42px; --rest: 12vw; }
.hero__traffic i:nth-child(2) { --y: 27%; --dur: 52s; --delay: -22s; --o: 0.14; --dy: -28px; --rest: 68vw; }
.hero__traffic i:nth-child(3) { --y: 39%; --dur: 31s; --delay: -11s; --o: 0.24; --dy:  36px; --rest: 30vw; }
.hero__traffic i:nth-child(4) { --y: 48%; --dur: 46s; --delay: -33s; --o: 0.16; --dy:  54px; --rest: 84vw;
  --dot: var(--booked); --glow: rgba(47, 191, 135, 0.5); }
.hero__traffic i:nth-child(5) { --y: 58%; --dur: 35s; --delay: -19s; --o: 0.18; --dy: -34px; --rest: 45vw; }
.hero__traffic i:nth-child(6) { --y: 67%; --dur: 49s; --delay: -7s;  --o: 0.12; --dy:  30px; --rest: 22vw; }
.hero__traffic i:nth-child(7) { --y: 78%; --dur: 41s; --delay: -27s; --o: 0.22; --dy: -22px; --rest: 74vw;
  --dot: var(--booked); --glow: rgba(47, 191, 135, 0.5); }
.hero__traffic i:nth-child(8) { --y: 88%; --dur: 57s; --delay: -14s; --o: 0.13; --dy:  40px; --rest: 55vw; }

/* 4 — grain. Kills the banding that any wide dark gradient shows on 8-bit
   panels, and gives the flat colour a film surface. Static on purpose:
   drifting grain reads as a moving texture, which is the opposite of the
   effect. Inline SVG, so it costs no request. */
.hero__grain {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Fewer moving layers where the screen is small and the battery matters. */
@media (max-width: 640px) {
  .hero__traffic i:nth-child(n+6) { display: none; }
}

.hero__inner {
  position: relative; z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--s-9);
  align-items: center;
}

.hero__copy { max-width: 620px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 0.34rem 0.7rem 0.34rem 0.55rem;
  border: 1px solid var(--ink-line);
  background: rgba(255,255,255,0.03);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-data);
  letter-spacing: var(--tr-data);
  text-transform: uppercase;
  color: var(--text-on-ink-muted);
  margin-bottom: var(--s-5);
}
.hero__eyebrow .pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  animation: pulse-dot 1.8s var(--ease-in-out) infinite;
}

.hero h1 { color: var(--text-on-ink); }
.hero h1 .accent {
  background: linear-gradient(96deg, var(--booked-tint), var(--booked) 62%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  margin-top: var(--s-5);
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--text-on-ink-muted);
  max-width: 52ch;
  text-wrap: pretty;
}
.hero__cta { margin-top: var(--s-6); }

.hero__trust {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-line);
  display: flex; flex-wrap: wrap; gap: var(--s-6);
}
.hero__trust-item { display: flex; flex-direction: column; gap: 0.15rem; }
.hero__trust-item .k {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text-on-ink);
}
.hero__trust-item .v {
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  color: var(--text-on-ink-faint);
}

/* --- hero call thread panel --- */
.hero__panel {
  position: relative;
  background: rgba(18, 22, 29, 0.72);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-ink);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  overflow: hidden;
}
.hero__panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--ink-line);
  background: rgba(255,255,255,0.018);
}
.hero__panel-id {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  color: var(--text-on-ink-faint);
}
.hero__panel-body { padding: var(--s-4) var(--s-5) var(--s-5); }

/* progress rail across the top of the panel */
.hero__progress { height: 2px; background: var(--ink-line); position: relative; overflow: hidden; }
.hero__progress span {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--hero-p, 0) * 100%);
  background: linear-gradient(90deg, var(--signal), var(--booked));
  transition: width 120ms linear;
}

.hero__outcome {
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid rgba(47, 191, 135, 0.26);
  background: rgba(47, 191, 135, 0.07);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
.hero__outcome.is-on { opacity: 1; transform: translateY(0); }
.hero__outcome .lbl {
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  color: var(--booked-tint);
}
.hero__outcome .val {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 580;
  letter-spacing: -0.02em; color: var(--text-on-ink);
}

.hero__scrollcue {
  position: absolute; left: 50%; bottom: var(--s-5); z-index: 4;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-on-ink-faint);
  transition: opacity var(--d-base) var(--ease);
}
.hero__scrollcue .bar {
  width: 1px; height: 26px;
  background: linear-gradient(180deg, var(--ink-soft), transparent);
}
.hero__scrollcue.is-hidden { opacity: 0; }

/* Short viewports: all eight events plus the outcome must still fit on one
   screen, so supporting furniture yields before the Call Thread does. */

/* The panel is nearly viewport-tall. Left at its full rhythm it overflows the
   sticky stage's padding and starts a few pixels under the fixed nav, reading
   as if it were tucked behind the buttons. Tightening the thread lets centring
   put a real gap back between the panel and the header. */
@media (max-height: 1040px) {
  .hero .thread__item { padding-block: 0.26rem; }
  .hero .thread__detail { font-size: var(--t-caption); }
  .hero__panel-body { padding: var(--s-3) var(--s-5) var(--s-4); }
}

@media (max-height: 900px) {
  .hero__trust { display: none; }
  .hero__panel-body { padding: var(--s-3) var(--s-5) var(--s-4); }
  .thread__item { padding-block: 0.3rem; }
  .thread__detail { font-size: var(--t-caption); }
  .hero .thread__item { padding-block: 0.16rem; }
  .hero .thread__meta { margin-bottom: 0.06rem; }
}

@media (max-height: 840px) {
  .hero__sticky { padding-block: 80px var(--s-4); }
  .hero__panel-head { padding: var(--s-2) var(--s-5); }
  .hero .thread__item { padding-block: 0.14rem; }
  .hero .thread__item::before { top: 0.64rem; }
  .hero .thread__label { font-size: 0.94rem; }
  .hero .thread__detail { font-size: 0.75rem; }
  .hero .thread__meta { margin-bottom: 0.08rem; }
  .hero__outcome { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); }
}

@media (max-width: 1040px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .hero__track { height: 300vh; }
  .hero__sticky { height: auto; min-height: 100vh; padding-block: 96px var(--s-8); align-items: flex-start; }
  .hero__trust { display: none; }
  .hero__scrollcue { display: none; }
}
@media (max-width: 620px) {
  .hero__panel-head { flex-wrap: wrap; }
}

/* ---------- 09  Problem + exposure calculator ---------------------------- */

/* the dark-to-light seam */
.seam {
  height: clamp(80px, 10vw, 160px);
  background: linear-gradient(180deg, var(--ink) 0%, #1A2029 42%, var(--paper) 100%);
}

.problem__lead { max-width: 720px; }

.loss-flow {
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-raised);
}
.loss-flow__step {
  padding: var(--s-6);
  border-right: 1px solid var(--paper-line);
  position: relative;
  background: var(--paper-raised);
  transition: background-color var(--d-slow) var(--ease);
}
.loss-flow__step:last-child { border-right: 0; }
.loss-flow__step[data-tone="lost"] { background: linear-gradient(180deg, var(--paper-raised), var(--missed-wash)); }
.loss-flow__time {
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  color: var(--text-faint); display: block; margin-bottom: var(--s-4);
}
.loss-flow__title { font-family: var(--font-display); font-weight: 580; font-size: 1.02rem; letter-spacing: var(--tr-heading); }
.loss-flow__text { margin-top: var(--s-2); font-size: var(--t-small); color: var(--text-muted); line-height: 1.5; }
.loss-flow__step .chip { margin-top: var(--s-4); }

@media (max-width: 900px) {
  .loss-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loss-flow__step:nth-child(2n) { border-right: 0; }
  .loss-flow__step:nth-child(-n+2) { border-bottom: 1px solid var(--paper-line); }
}
@media (max-width: 560px) {
  .loss-flow { grid-template-columns: minmax(0, 1fr); }
  .loss-flow__step { border-right: 0; border-bottom: 1px solid var(--paper-line); }
  .loss-flow__step:last-child { border-bottom: 0; }
}

/* exposure calculator — two visitor numbers, then a sourced chain.
   The derivation ladder spans the full width beneath both panels: the
   argument is the point, so it gets the room, not a footnote. */
.calc {
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-raised);
  box-shadow: var(--shadow-2);
}
.calc__inputs { padding: var(--s-7); display: flex; flex-direction: column; }
.calc__inputs-note {
  margin-top: auto;          /* sits as the column's footer, against the dark panel */
  padding-top: var(--s-5);
  border-top: 1px solid var(--paper-line);
  font-size: var(--t-caption);
  color: var(--text-muted);
  line-height: 1.5;
}

.calc__presets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.calc__preset {
  font-family: var(--font-mono);
  font-size: var(--t-data);
  letter-spacing: var(--tr-data);
  font-variant-numeric: tabular-nums;
  padding: 0.34rem 0.6rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-pill);
  background: var(--paper-raised);
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              background-color var(--d-fast) var(--ease);
}
.calc__preset:hover { color: var(--signal-text); border-color: var(--signal); }
.calc__preset[aria-pressed="true"] {
  background: var(--signal-wash);
  border-color: var(--signal);
  color: var(--signal-text);
}
.calc__preset:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.calc__field + .calc__field { margin-top: var(--s-6); }
.calc__field label {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  font-size: var(--t-small); font-weight: 540; margin-bottom: var(--s-3);
}
.calc__field output {
  font-family: var(--font-mono); font-size: var(--t-caption);
  font-variant-numeric: tabular-nums;
  color: var(--signal-text); font-weight: 600;
}
.calc__field input[type="range"] {
  width: 100%; margin: 0; height: 22px;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.calc__field input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: var(--paper-sunken);
}
.calc__field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px;
  border-radius: 50%; background: var(--paper-raised);
  border: 1.5px solid var(--signal);
  box-shadow: var(--shadow-1);
  transition: transform var(--d-fast) var(--ease);
}
.calc__field input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.calc__field input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--paper-sunken); }
.calc__field input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper-raised); border: 1.5px solid var(--signal);
}

.calc__result {
  padding: var(--s-7);
  background: var(--ink);
  color: var(--text-on-ink);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
  /* the range must size against THIS column, not the viewport — the column
     jumps width at the 860px breakpoint and a vw clamp cannot follow it */
  container: calcresult / inline-size;
}
.calc__result::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 80% 15%, rgba(229, 72, 77, 0.16), transparent 65%);
}
.calc__result > * { position: relative; }
/* the honesty label leads, in the same wording the explainer video uses */
.calc__result-flag {
  display: block;
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  line-height: 1.45;
  color: var(--escalate-tint);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--ink-line);
}
.calc__result-label {
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  color: var(--text-on-ink-faint);
}
/* Sized for a RANGE, not a single figure — two numbers plus a dash, 19
   characters at the widest ("$118,000 – $177,000"). 9.2cqw keeps that string
   inside the column at every width; the vw line above is the fallback for
   engines without container units. */
.calc__result-value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 0.85rem + 1.6vw, 2.7rem);
  font-size: clamp(1.5rem, 9.2cqw, 2.7rem);
  font-weight: 620; letter-spacing: -0.038em; line-height: 1.08;
  margin-top: var(--s-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__result-note {
  margin-top: var(--s-4); font-size: var(--t-caption);
  color: var(--text-on-ink-muted); line-height: 1.5;
}
.calc__result .btn { margin-top: var(--s-6); align-self: flex-start; }

/* derivation ladder — every rate the visitor did not enter, with its source */
.calc__chain {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--paper-line);
  background: var(--paper-sunken);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.calc__step {
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
  border-right: 1px solid var(--paper-line);
  position: relative;
  /* step 5 carries the widest string ("1,477 – 2,216") in the narrowest
     cell — size it against the cell, same reason as the result panel */
  container: calcstep / inline-size;
}
.calc__step:last-child { border-right: 0; }
/* the chevron carries the "therefore" — this is an argument, not a list */
.calc__step + .calc__step::before {
  content: "";
  position: absolute;
  left: -5px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  /* --paper-line would vanish against --paper-sunken; this is the same
     neutral the light-header ghost button uses */
  border-top: 1px solid #C4CBD6;
  border-right: 1px solid #C4CBD6;
  transform: rotate(45deg);
  background: var(--paper-sunken);
}
.calc__step-val {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.55vw, 1.6rem);
  font-size: clamp(1rem, 13cqw, 1.6rem);
  font-weight: 620; letter-spacing: -0.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__step[data-tone="missed"] .calc__step-val { color: var(--missed); }
.calc__step[data-tone="booked"] .calc__step-val { color: var(--booked-text); }
.calc__step-lab {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-caption);
  font-weight: 540;
  line-height: 1.35;
  color: var(--text);
}
.calc__step-src {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.045em;
  line-height: 1.4;
  color: var(--text-faint);
}

/* a moved rate loses its citation styling too — the tag stops looking sourced */
.calc__step-src[data-sourced="false"] { color: var(--escalate-text); }

/* adjust-rates disclosure — collapsed by default */
.calc__adjust {
  grid-column: 1 / -1;
  border-top: 1px solid var(--paper-line);
  background: var(--paper-raised);
}
.calc__adjust-toggle {
  width: 100%;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--text-muted);
  font-size: var(--t-caption); font-weight: 540;
  transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}
.calc__adjust-toggle:hover { color: var(--text); background: var(--paper-sunken); }
.calc__adjust-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.calc__adjust-label { flex: 1; min-width: 0; }
.calc__adjust-chev {
  flex: none; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); margin-left: 2px;
  transition: transform var(--d-base) var(--ease);
}
.calc__adjust-toggle[aria-expanded="true"] .calc__adjust-chev { transform: rotate(45deg); }
.calc__adjust-state {
  flex: none;
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  padding: 0.24rem 0.55rem; border-radius: var(--r-pill);
  background: var(--signal-wash); color: var(--signal-text);
  border: 1px solid transparent;
}
/* the chip is the at-a-glance answer to "is this still your sourced number?" */
.calc__adjust-state[data-scenario="conservative"],
.calc__adjust-state[data-scenario="edited"] {
  background: var(--escalate-wash); color: var(--escalate-text);
}

.calc__rates { padding: 0 var(--s-6) var(--s-6); }
.calc__rates[hidden] { display: none; }
.calc__rates-head {
  display: flex; align-items: flex-start; gap: var(--s-5);
  flex-wrap: wrap;
  padding-bottom: var(--s-5); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--paper-line);
}
.calc__rates-presets { display: flex; gap: var(--s-2); flex: none; }
.calc__rates-lede {
  flex: 1; min-width: 15rem;
  font-size: var(--t-caption); color: var(--text-muted); line-height: 1.5;
}
.calc__rates-lede em { font-style: normal; color: var(--escalate-text); font-weight: 560; }

.calc__rate-grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.calc__field--rate + .calc__field--rate { margin-top: 0; }

@media (max-width: 860px) {
  .calc__rate-grid { grid-template-columns: minmax(0, 1fr); }
  /* the chip drops under the label; trim the padding so the bar does not
     eat a sixth of a phone screen */
  .calc__adjust-toggle { flex-wrap: wrap; gap: var(--s-3); padding: var(--s-4) var(--s-5); }
  .calc__adjust-label { flex-basis: calc(100% - 2rem); }
  .calc__adjust-state { margin-left: calc(7px + var(--s-3)); }
  .calc__rates { padding: 0 var(--s-5) var(--s-5); }
}

@media (max-width: 1040px) {
  .calc__chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc__step:nth-child(3n) { border-right: 0; }
  .calc__step:nth-child(n+4) { border-top: 1px solid var(--paper-line); }
  .calc__step:nth-child(4)::before { display: none; }
}
@media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .calc__chain { grid-template-columns: minmax(0, 1fr); }
  .calc__step { border-right: 0; padding-left: var(--s-5); }
  .calc__step + .calc__step { border-top: 1px solid var(--paper-line); }
  .calc__step + .calc__step::before { display: none; }
}

/* citation slots that still need a verified source */
.stat-row {
  margin-top: var(--s-7);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5);
}
.stat {
  padding: var(--s-5) 0 0;
  border-top: 2px solid var(--paper-line);
}
.stat__value {
  font-family: var(--font-display); font-weight: 620;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
  letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat__label { margin-top: var(--s-3); font-size: var(--t-small); color: var(--text-muted); line-height: 1.45; }
.stat__src {
  margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--escalate);
}
@media (max-width: 760px) { .stat-row { grid-template-columns: minmax(0, 1fr); } }

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

.how { position: relative; }
.how .clip-stage {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.5;
}
.how .clip-stage__scrim {
  background: linear-gradient(180deg, var(--paper) 0%, rgba(245,246,248,0.86) 30%, rgba(245,246,248,0.92) 70%, var(--paper) 100%);
}
/* With no footage behind it, a light-on-light scrim only bands the section. */
.how .clip-stage.is-empty .clip-stage__scrim { display: none; }
.how .wrap { position: relative; z-index: 2; }

.process { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
@media (max-width: 980px) { .process { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before {
  content: ""; position: absolute; left: 15px; top: 22px; bottom: 22px;
  width: 1px; background: var(--paper-line);
}
.step {
  position: relative;
  padding-left: calc(var(--s-8) + var(--s-2));
  padding-block: var(--s-5);
  cursor: pointer;
}
.step::before {
  content: attr(data-step);
  position: absolute; left: 0; top: var(--s-5);
  width: 31px; height: 31px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
  color: var(--text-faint);
  transition: all var(--d-base) var(--ease);
}
.step.is-active::before {
  background: var(--signal); border-color: var(--signal); color: #fff;
  box-shadow: 0 0 0 5px rgba(74, 140, 255, 0.14);
}
.step__title {
  font-family: var(--font-display); font-size: 1.16rem; font-weight: 580;
  letter-spacing: var(--tr-heading); line-height: 1.3;
  transition: color var(--d-base) var(--ease);
}
.step__body {
  font-size: var(--t-small); color: var(--text-muted); line-height: 1.55;
  margin-top: var(--s-3);
  max-width: 46ch;
}
.step:not(.is-active) .step__title { color: var(--text-muted); }
.step__caveat {
  display: inline-block; margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--escalate-text);
  background: var(--escalate-wash);
  border: 1px solid #F4E0BC;
  border-radius: var(--r-sm);
  padding: 0.24rem 0.5rem;
}

/* sticky panel that mirrors the active step */
.process__panel { position: sticky; top: 104px; }
.panel-card {
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.panel-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--paper-line);
  background: var(--paper-sunken);
}
.panel-card__title {
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase; color: var(--text-muted);
}
.panel-card__body { padding: var(--s-5); min-height: 340px; }

.panel-pane { display: none; }
.panel-pane.is-active { display: block; animation: pane-in var(--d-slow) var(--ease-out) both; }
@keyframes pane-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) var(--s-5); align-items: baseline; }
.kv dt {
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase; color: var(--text-faint);
  white-space: nowrap;
}
.kv dd { margin: 0; font-size: var(--t-small); }

.transcript { display: flex; flex-direction: column; gap: var(--s-3); }
.turn { display: flex; gap: var(--s-3); align-items: flex-start; }
.turn__who {
  flex: none; width: 58px;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); padding-top: 0.22rem;
}
.turn__text {
  font-size: var(--t-small); line-height: 1.5;
  background: var(--paper-sunken);
  border-radius: var(--r-md);
  padding: 0.5rem 0.75rem;
}
.turn--ai .turn__text { background: var(--signal-wash); }
.turn--rule .turn__text {
  background: var(--escalate-wash);
  border: 1px solid #F4E0BC;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--escalate-text);
}

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.check-list li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: var(--t-small); line-height: 1.45;
}
.check-list li::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px;
  border-radius: 50%;
  background: var(--booked-wash);
  border: 1px solid #C6EDDC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%2317805A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* ---------- 11  Capabilities --------------------------------------------- */

.cap {
  display: flex; flex-direction: column;
  min-height: 100%;
}
.cap__verb {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 600; letter-spacing: -0.028em;
  display: flex; align-items: center; gap: var(--s-3);
}
.cap__icon {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--signal-wash);
  border: 1px solid #D9E6FF;
}
.cap__icon svg { width: 17px; height: 17px; stroke: var(--signal); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cap[data-tone="booked"] .cap__icon { background: var(--booked-wash); border-color: #C6EDDC; }
.cap[data-tone="booked"] .cap__icon svg { stroke: var(--booked-text); }
.cap__body {
  margin-top: var(--s-4); padding-bottom: var(--s-5);
  font-size: var(--t-small); color: var(--text-muted); line-height: 1.55;
}
.cap__foot {
  margin-top: auto; padding-top: var(--s-5);
  border-top: 1px solid var(--paper-line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
/* A wrapping label would lift this card's rule out of line with its siblings. */
.cap__foot .data { color: var(--text-faint); white-space: nowrap; }

/* ---------- 12  Managed, not DIY ----------------------------------------- */

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-8); }
@media (max-width: 820px) { .compare { grid-template-columns: minmax(0, 1fr); } }

.compare__col { display: flex; flex-direction: column; }
.compare__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-bottom: var(--s-4); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--paper-line);
}
.compare__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 580; letter-spacing: var(--tr-heading); }
.compare__owner {
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
}
.compare__col--diy { background: var(--paper-sunken); }
.compare__col--diy .compare__owner { color: var(--escalate); }
.compare__col--lscale { border-color: rgba(74,140,255,0.35); box-shadow: var(--shadow-2); }
.compare__col--lscale .compare__owner { color: var(--signal-text); }

.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.task-list li {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0.62rem 0;
  font-size: var(--t-small);
  border-bottom: 1px dashed var(--paper-line);
}
.task-list li:last-child { border-bottom: 0; }
.task-list .who {
  flex: none;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.16rem 0.4rem; border-radius: 4px;
}
.compare__col--diy .who { background: var(--escalate-wash); color: var(--escalate-text); border: 1px solid #F4E0BC; }
.compare__col--lscale .who { background: var(--signal-wash); color: var(--signal-text); border: 1px solid #D3E2FF; }

.compare__foot {
  margin-top: auto; padding-top: var(--s-5);
  font-size: var(--t-small); color: var(--text-muted); line-height: 1.5;
}
.compare__col--lscale .compare__foot strong { color: var(--text); font-weight: 580; }

/* ---------- 13  Live demo ------------------------------------------------- */

.demo { background: var(--ink); color: var(--text-on-ink); position: relative; overflow: hidden; }
.demo::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 55% at 22% 40%, rgba(74,140,255,0.14), transparent 65%);
}
.demo .wrap { position: relative; z-index: 2; }
.demo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--s-9); align-items: center; }
@media (max-width: 900px) { .demo__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

.demo h2 { color: var(--text-on-ink); }
.demo .eyebrow { color: var(--text-on-ink-faint); }

.demo__does { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.demo__does li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: var(--t-small); color: var(--text-on-ink-muted); line-height: 1.5;
}
.demo__does li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: 0.5rem;
  border-radius: 50%; background: var(--signal);
}

.dialer {
  background: rgba(18, 22, 29, 0.82);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  box-shadow: var(--shadow-ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: center;
}
.dialer__label {
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  color: var(--text-on-ink-faint);
}
/* Sized to hold "+1 (323) 577-7093" on a single line inside the dialer card —
   a phone number broken across two lines stops reading as a number. */
.dialer__number {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.25;
  font-weight: 500; letter-spacing: 0;
  white-space: nowrap;
  color: var(--text-on-ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--d-base) var(--ease);
}
.dialer__number:hover { color: var(--signal-tint); }
.dialer__number[data-pending="true"] { color: var(--escalate-tint); font-size: 1.15rem; letter-spacing: 0.04em; }
.dialer__meta { margin-top: var(--s-4); font-size: var(--t-caption); color: var(--text-on-ink-muted); }
.dialer .btn { margin-top: var(--s-6); }

.dialer__wave { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 30px; margin-top: var(--s-5); }
.dialer__wave i {
  width: 3px; border-radius: 2px; background: var(--signal);
  opacity: 0.55;
  animation: wave 1.35s var(--ease-in-out) infinite;
}
@keyframes wave {
  0%, 100% { height: 5px; opacity: 0.35; }
  50%      { height: 24px; opacity: 0.9; }
}

/* ---------- 14  Real call proof ------------------------------------------ */

.proof__disclaimer {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--signal);
  background: var(--signal-wash);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-small);
  color: var(--text-muted);
  max-width: 68ch;
  line-height: 1.55;
}

.recording { display: flex; flex-direction: column; }
.recording__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.recording__scenario {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 580;
  letter-spacing: var(--tr-heading); line-height: 1.3;
}
.recording__desc { margin-top: var(--s-3); font-size: var(--t-small); color: var(--text-muted); line-height: 1.5; }

.player {
  margin-top: var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  background: var(--paper-sunken);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
}
.player__btn {
  flex: none; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--paper-line);
  background: var(--paper-raised);
  display: grid; place-items: center;
  cursor: not-allowed;
  color: var(--text-faint);
}
.player__btn svg { width: 13px; height: 13px; fill: currentColor; margin-left: 2px; }
.player__track { flex: 1; min-width: 0; }
.player__bar { height: 3px; border-radius: 2px; background: var(--paper-line); position: relative; overflow: hidden; }
.player__bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0%;
  background: var(--signal);
}
.player__time {
  margin-top: var(--s-3);
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.05em; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.player[data-state="empty"] .player__btn { opacity: 0.5; }

.recording__outcome {
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--paper-line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  font-size: var(--t-caption); color: var(--text-muted);
}

/* ---------- 15  Industries ----------------------------------------------- */

.industries__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 860px) { .industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .industries__grid { grid-template-columns: minmax(0, 1fr); } }

.industry {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
  transition: border-color var(--d-base) var(--ease), transform var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease);
}
.industry:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: #D3D8E0; }
.industry__icon {
  width: 38px; height: 38px; flex: none;
  border-radius: 10px; background: var(--paper-sunken);
  display: grid; place-items: center;
}
.industry__icon svg { width: 19px; height: 19px; stroke: var(--text-muted); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.industry__name { font-family: var(--font-display); font-weight: 560; font-size: 1rem; letter-spacing: var(--tr-heading); }
.industry__note { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-top: 0.1rem; }

.industry--other {
  border-style: dashed;
  background: transparent;
  text-decoration: none; color: inherit;
}
.industry--other .industry__icon { background: var(--signal-wash); }
.industry--other .industry__icon svg { stroke: var(--signal); }
.industry--other:hover { border-color: var(--signal); border-style: solid; }

/* ---------- 16  Expansion ------------------------------------------------- */

.expansion { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-9); align-items: center; }
@media (max-width: 940px) { .expansion { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

.channels { display: flex; flex-direction: column; gap: var(--s-5); }
.channels__group-label {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase; color: var(--text-faint);
  margin-bottom: var(--s-4);
}
.channels__group-label::after { content: ""; flex: 1; height: 1px; background: var(--paper-line); }

.channel-live {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid rgba(47,191,135,0.4);
  background: var(--booked-wash);
  border-radius: var(--r-md);
}
.channel-live__icon {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  background: var(--booked); display: grid; place-items: center;
}
.channel-live__icon svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.channel-live__name { font-family: var(--font-display); font-weight: 580; font-size: 1.05rem; letter-spacing: var(--tr-heading); }
.channel-live__note { font-size: var(--t-caption); color: var(--booked-text); margin-top: 0.1rem; }

.channel-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.channel-chip {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 0.5rem 0.85rem;
  border: 1px dashed var(--paper-line);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  color: var(--text-muted);
  background: var(--paper-raised);
  transition: border-color var(--d-base) var(--ease), color var(--d-base) var(--ease),
              transform var(--d-base) var(--ease);
}
.channel-chip:hover { border-color: var(--signal); color: var(--text); transform: translateY(-2px); }
.channel-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper-line);
  transition: background-color var(--d-base) var(--ease);
}
.channel-chip:hover::before { background: var(--signal); }

/* ---------- 17  Product interface frame ---------------------------------- */

.frame {
  border: 1px solid var(--paper-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-raised);
  box-shadow: var(--shadow-3);
}
.frame__chrome {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0.7rem var(--s-4);
  background: var(--paper-sunken);
  border-bottom: 1px solid var(--paper-line);
}
.frame__dots { display: flex; gap: 6px; flex: none; }
.frame__dots i { width: 10px; height: 10px; border-radius: 50%; background: #D5DAE2; }
.frame__url {
  flex: 1; min-width: 0;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-sm);
  padding: 0.28rem 0.7rem;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.02em; color: var(--text-faint);
  display: flex; align-items: center; gap: var(--s-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frame__url svg { width: 10px; height: 10px; flex: none; stroke: var(--booked); fill: none; stroke-width: 2; }

.console { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); min-height: 480px; }
@media (max-width: 920px) { .console { grid-template-columns: minmax(0, 1fr); } }

.console__list { border-right: 1px solid var(--paper-line); }
@media (max-width: 920px) { .console__list { border-right: 0; border-bottom: 1px solid var(--paper-line); } }

.console__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--paper-line);
}
.console__title { font-family: var(--font-display); font-weight: 580; font-size: 1rem; letter-spacing: var(--tr-heading); }
.console__counts { display: flex; gap: var(--s-4); }
.console__count { display: flex; align-items: baseline; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
.console__count b { font-size: 0.95rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.call-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) auto;
  gap: var(--s-4);
  align-items: center;
  width: 100%;
  padding: var(--s-4) var(--s-5);
  border: 0; border-bottom: 1px solid var(--paper-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease);
}
.call-row:hover { background: var(--paper-sunken); }
.call-row.is-selected { background: var(--signal-wash); box-shadow: inset 2px 0 0 var(--signal); }
.call-row__who { min-width: 0; }
/* block-level so the ellipsis truncation actually applies to long names */
.call-row__name { display: block; font-weight: 560; font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-row__phone { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); letter-spacing: 0.02em; margin-top: 0.1rem; font-variant-numeric: tabular-nums; }
.call-row__svc { font-size: var(--t-caption); color: var(--text-muted); min-width: 0; }
.call-row__time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); display: block; margin-top: 0.15rem; letter-spacing: 0.04em; }
@media (max-width: 560px) {
  .call-row { grid-template-columns: minmax(0, 1fr) auto; }
  .call-row__svc { grid-column: 1 / -1; }
}

.console__detail { padding: var(--s-5); background: var(--paper-raised); }
.detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-5); border-bottom: 1px solid var(--paper-line); }
.detail__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 580; letter-spacing: var(--tr-heading); }
.detail__sub { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); letter-spacing: 0.04em; margin-top: 0.2rem; }
.detail__section { padding-block: var(--s-5); border-bottom: 1px solid var(--paper-line); }
.detail__section:last-child { border-bottom: 0; }
.detail__label {
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase; color: var(--text-faint);
  margin-bottom: var(--s-3);
}
.detail__summary { font-size: var(--t-small); line-height: 1.55; color: var(--text-muted); }
.detail__appt {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid #C6EDDC; background: var(--booked-wash);
  border-radius: var(--r-md);
}
.detail__appt-date {
  flex: none; text-align: center; padding-right: var(--s-4); border-right: 1px solid #C6EDDC;
}
.detail__appt-date .d { font-family: var(--font-display); font-size: 1.4rem; font-weight: 620; line-height: 1; letter-spacing: -0.03em; }
.detail__appt-date .m { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--booked-text); margin-top: 0.2rem; }
.detail__appt-info .t { font-size: var(--t-small); font-weight: 560; }
.detail__appt-info .s { font-size: var(--t-caption); color: var(--booked-text); margin-top: 0.1rem; }

/* ---------- 18  Pricing --------------------------------------------------- */

.pricing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
@media (max-width: 900px) { .pricing__grid { grid-template-columns: minmax(0, 1fr); } }

.plan { display: flex; flex-direction: column; position: relative; }
.plan--featured { border-color: var(--signal); box-shadow: var(--shadow-3); }
.plan__flag {
  position: absolute; top: -1px; right: var(--s-6);
  transform: translateY(-50%);
  padding: 0.22rem 0.6rem;
  background: var(--signal); color: #fff;
  border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.plan__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 580; letter-spacing: var(--tr-heading); }
.plan__for { font-size: var(--t-caption); color: var(--text-muted); margin-top: var(--s-2); }
.plan__price {
  margin-top: var(--s-5); padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--paper-line);
  display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap;
}
.plan__amount {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem);
  font-weight: 620; letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan__amount[data-pending="true"] { font-size: 1.4rem; color: var(--escalate); letter-spacing: -0.01em; }
.plan__period { font-size: var(--t-small); color: var(--text-muted); }
.plan__features { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.plan__features li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-small); line-height: 1.45; color: var(--text-muted); }
.plan__features li::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l2.8 2.8L12.5 5' fill='none' stroke='%234A8CFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.plan .btn { margin-top: var(--s-6); }

.pending-banner {
  display: flex; align-items: flex-start; gap: var(--s-4);
  margin-bottom: var(--s-7);
  padding: var(--s-4) var(--s-5);
  border: 1px solid #F4E0BC;
  background: var(--escalate-wash);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  color: var(--escalate-text);
  line-height: 1.5;
}
.pending-banner .data { color: var(--escalate); flex: none; padding-top: 0.15rem; }
.pending-banner[hidden] { display: none; }

/* ---------- 19  FAQ ------------------------------------------------------- */

.faq { max-width: 860px; }
.faq__item { border-bottom: 1px solid var(--paper-line); }
.faq__item:first-child { border-top: 1px solid var(--paper-line); }

.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0;
  background: none; border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.06rem; font-weight: 560; letter-spacing: var(--tr-heading);
  color: var(--text);
  transition: color var(--d-fast) var(--ease);
}
.faq__q:hover { color: var(--signal-text); }
.faq__icon {
  flex: none; width: 20px; height: 20px; position: relative;
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: var(--text-muted); border-radius: 1px;
  transition: transform var(--d-base) var(--ease), background-color var(--d-base) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__q[aria-expanded="true"] .faq__icon::before,
.faq__q[aria-expanded="true"] .faq__icon::after { background: var(--signal); }

.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-base) var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a p {
  padding-bottom: var(--s-5);
  font-size: var(--t-small); color: var(--text-muted); line-height: 1.6;
  max-width: 68ch;
}
.faq__a p + p { padding-top: var(--s-4); }

/* An answer that still needs approved wording must look unfinished. */
.faq__a .pending-inline {
  color: var(--escalate-text);
  border-left: 2px solid var(--escalate);
  background: var(--escalate-wash);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}

/* ---------- 20  Final CTA ------------------------------------------------- */

.final { position: relative; background: var(--ink); color: var(--text-on-ink); overflow: hidden; }
.final .clip-stage { position: absolute; inset: 0; z-index: 0; }
.final .clip-stage__scrim {
  background:
    radial-gradient(60% 55% at 25% 40%, rgba(74,140,255,0.13), transparent 66%),
    linear-gradient(180deg, rgba(10,12,16,0.86), rgba(10,12,16,0.94));
}
.final .wrap { position: relative; z-index: 3; }
.final__inner { max-width: 780px; }
.final h2 { color: var(--text-on-ink); }
.final .lede { margin-top: var(--s-5); }
.final .btn-row { margin-top: var(--s-7); }

/* the overview card that stands in for Clip 3's screen content */
.overview {
  position: absolute; right: var(--gutter); top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: min(360px, 32vw);
  background: rgba(18, 22, 29, 0.8);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
@media (max-width: 1100px) { .overview { display: none; } }
.overview__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--s-4); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--ink-line);
}
.overview__title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 580; letter-spacing: var(--tr-heading); }
.overview__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-bottom: var(--s-5); }
.overview__stat .n {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 620;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.overview__stat .l {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-on-ink-faint); margin-top: 0.3rem; line-height: 1.3;
}
.overview__stat[data-tone="booked"] .n { color: var(--booked-tint); }
.overview__stat[data-tone="escalate"] .n { color: var(--escalate-tint); }
.overview__line {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 0.5rem 0;
  border-top: 1px solid var(--ink-line);
  font-size: var(--t-caption);
  color: var(--text-on-ink-muted);
}
.overview__line .t { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-on-ink-faint); letter-spacing: 0.04em; }

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

.site-footer {
  background: var(--ink); color: var(--text-on-ink-muted);
  border-top: 1px solid var(--ink-line);
  padding-block: var(--s-8) var(--s-6);
}
.footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--ink-line);
}
@media (max-width: 860px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

.footer__brand .brand { color: var(--text-on-ink); }
.footer__blurb { margin-top: var(--s-4); font-size: var(--t-caption); line-height: 1.55; max-width: 34ch; }
.footer__col h4 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  color: var(--text-on-ink-faint); font-weight: 500;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.footer__col a { color: var(--text-on-ink-muted); text-decoration: none; font-size: var(--t-small); transition: color var(--d-fast) var(--ease); }
.footer__col a:hover { color: var(--text-on-ink); }
.footer__bottom {
  padding-top: var(--s-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.05em; color: var(--text-on-ink-faint);
}

/* ---------- 23  Company frame + product ladder ---------------------------
   The thesis block under the hero. Rendered as a normal light section so it
   reads as chapter one of the page, not a second dark hero competing with
   the opening statement.                                                   */

.company__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: var(--s-9); align-items: center;
}
@media (max-width: 980px) { .company__grid { grid-template-columns: minmax(0,1fr); gap: var(--s-7); } }

.verb-row {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-6);
}
.verb-row span {
  padding: 0.34rem 0.72rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-pill);
  background: var(--paper-raised);
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  color: var(--text-muted);
}

.ladder {
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--shadow-2);
}
.ladder__label {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 580;
  letter-spacing: var(--tr-heading); color: var(--text);
  padding-bottom: var(--s-5); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--paper-line);
}
.ladder__live {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-4);
  border: 1px solid rgba(47,191,135,0.42);
  background: var(--booked-wash);
  border-radius: var(--r-md);
}
.ladder__icon {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  background: var(--booked); display: grid; place-items: center;
}
.ladder__icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ladder__live > div { flex: 1; min-width: 140px; }
.ladder__name { font-family: var(--font-display); font-weight: 580; font-size: 1.02rem; letter-spacing: var(--tr-heading); color: var(--text); }
.ladder__note { font-size: var(--t-caption); color: var(--booked-text); margin-top: 0.12rem; }

.ladder__next { margin-top: var(--s-5); }
.ladder__next-label {
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: var(--s-4);
}
.section--ink .channel-chip {
  background: rgba(255,255,255,0.03);
  border-color: var(--ink-soft);
  color: var(--text-on-ink-muted);
}
.section--ink .channel-chip::before { background: var(--ink-soft); }
.section--ink .channel-chip:hover { border-color: var(--signal); color: var(--text-on-ink); }
.section--ink .channel-chip:hover::before { background: var(--signal); }

/* ---------- 24  Industry strip ------------------------------------------- */

/* Company and the trades strip now sit on one continuous light surface, so
   their two default section paddings stacked into ~235px of empty page. They
   belong to the same thought — close the gap above and spend the space on
   separating the trades row from the tools marquee instead. */
.company { padding-bottom: var(--s-8); }
#industries { padding-top: var(--s-7); }

.strip {
  display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: var(--s-7); align-items: center;
}
@media (max-width: 900px) { .strip { grid-template-columns: minmax(0,1fr); gap: var(--s-5); } }
.strip__text { margin-top: var(--s-3); font-size: var(--t-small); color: var(--text-muted); line-height: 1.5; }
.strip__items { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.trade {
  padding: 0.55rem 1rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-pill);
  background: var(--paper-raised);
  font-size: var(--t-small); font-weight: 520;
  transition: border-color var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.trade:hover { border-color: #C9D0DA; transform: translateY(-2px); }
.trade--other {
  border-style: dashed; background: transparent;
  color: var(--signal-text); text-decoration: none; cursor: pointer;
}
.trade--other:hover { border-style: solid; border-color: var(--signal); }

/* ---------- 25  Governance beat ------------------------------------------ */

.governance {
  margin-top: var(--s-7);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--s-8); align-items: center;
  padding: var(--s-7);
  border: 1px solid #F0E2C6;
  border-left: 3px solid var(--escalate);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--escalate-wash), var(--paper-raised) 70%);
}
@media (max-width: 900px) { .governance { grid-template-columns: minmax(0,1fr); gap: var(--s-6); padding: var(--s-6); } }
.governance__thread::before { background: #EBD9BC; }

/* ---------- 26  How It Works video slot ---------------------------------- */

.video-slot { margin-bottom: var(--s-8); }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--ink-line);
  box-shadow: var(--shadow-3);
  display: grid; place-items: center;
}
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 30% 30%, rgba(74,140,255,0.16), transparent 65%);
}
.video-placeholder {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  text-align: center; padding: var(--s-6);
}
.video-placeholder__play {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--ink-soft);
  background: rgba(255,255,255,0.06);
  display: grid; place-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.video-placeholder__play svg { width: 20px; height: 20px; fill: var(--text-on-ink); margin-left: 3px; }
.video-placeholder__label {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 580;
  letter-spacing: var(--tr-heading); color: var(--text-on-ink);
}
.video-placeholder__meta {
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase; color: var(--text-on-ink-faint);
}
.video-chapters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2);
  margin-top: var(--s-2); max-width: 620px;
}
.video-chapters span {
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--ink-line); border-radius: var(--r-sm);
  font-size: var(--t-caption); color: var(--text-on-ink-muted);
  background: rgba(255,255,255,0.03);
}

/* ---------- 27  Three-way comparison ------------------------------------- */

.compare--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1040px) { .compare--3 { grid-template-columns: minmax(0,1fr); } }
.compare__col--service { background: var(--paper-sunken); }
.compare__col--service .compare__owner { color: var(--text-muted); }
.compare__col--service .who { background: var(--paper-line); color: var(--text-muted); border: 1px solid #D6DBE3; }

/* ---------- 28  Proof / Hear It ------------------------------------------ */

.proof__head {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--s-8); align-items: center; margin-bottom: var(--s-8);
}
@media (max-width: 980px) { .proof__head { grid-template-columns: minmax(0,1fr); gap: var(--s-6); } }

.sample {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column;
}
.sample__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.sample__title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 580; letter-spacing: var(--tr-heading); color: var(--text-on-ink); }
.sample__desc { margin-top: var(--s-3); font-size: var(--t-small); color: var(--text-on-ink-muted); line-height: 1.5; }

.sample__player {
  margin-top: var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
}
.sample__btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--ink-soft); background: rgba(255,255,255,0.05);
  color: var(--text-on-ink); display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.sample__btn:hover { background: rgba(74,140,255,0.18); border-color: var(--signal); }
.sample__btn svg { width: 13px; height: 13px; fill: currentColor; }
.sample__wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; min-width: 0; overflow: hidden; }
.sample__wave i {
  flex: 1; min-width: 2px; border-radius: 1px;
  background: var(--ink-soft);
  transition: background-color 200ms var(--ease);
}
.sample__wave i.is-played { background: var(--signal); }
.sample__time {
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--text-on-ink-faint); font-variant-numeric: tabular-nums; flex: none;
}

/* max-height rather than the 0fr → 1fr grid trick: fr units are not reliably
   interpolable, and where they aren't the row freezes at 0 and the transcript
   never opens at all. The cap is generous enough for the longest transcript. */
.sample__transcript {
  overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height var(--d-slow) var(--ease), opacity var(--d-base) var(--ease);
}
.sample.is-open .sample__transcript { max-height: 1400px; opacity: 1; }
/* Cards size to their own content — otherwise opening one transcript
   stretches its closed neighbours into tall empty boxes. */
#proof-grid { align-items: start; }

/* No nested scroll region here on purpose. A max-height + overflow-y child
   gives the grid row a zero automatic minimum, which makes the 0fr → 1fr
   reveal resolve to 0px and never open. Letting the transcript size itself
   also avoids a scroll-inside-scroll, and align-items:start above keeps the
   neighbouring cards from stretching to match. */
.sample__turns {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--ink-line);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.sturn { display: flex; gap: var(--s-3); align-items: flex-start; opacity: 0.4; transition: opacity var(--d-base) var(--ease); }
.sturn.is-active { opacity: 1; }
.sturn__t { flex: none; width: 34px; font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-on-ink-faint); padding-top: 0.28rem; }
.sturn__text {
  font-size: var(--t-caption); line-height: 1.5; color: var(--text-on-ink-muted);
  background: rgba(255,255,255,0.04); border-radius: var(--r-sm);
  padding: 0.4rem 0.6rem;
}
.sturn--ai .sturn__text { background: rgba(74,140,255,0.14); color: #DCE9FF; }
.sturn--rule .sturn__text {
  background: rgba(224,160,60,0.14); color: var(--escalate-tint);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.sample__foot {
  margin-top: auto; padding-top: var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.sample__label {
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-on-ink-faint);
}

/* ---------- 29  Integrations --------------------------------------------- */

.integration { display: flex; flex-direction: column; }
.integration__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.integration__outcome { font-family: var(--font-display); font-size: 1.08rem; font-weight: 580; letter-spacing: var(--tr-heading); line-height: 1.3; }
.integration__detail { margin-top: var(--s-3); padding-bottom: var(--s-5); font-size: var(--t-small); color: var(--text-muted); line-height: 1.55; }
.integration__systems {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: auto; padding-top: var(--s-5);
  border-top: 1px solid var(--paper-line);
}
.integration__system {
  padding: 0.28rem 0.62rem;
  border: 1px solid var(--paper-line); border-radius: var(--r-sm);
  background: var(--paper-sunken); font-size: var(--t-caption); color: var(--text-muted);
}

/* ---------- 30  Pricing additions ---------------------------------------- */

.plan__amount[data-quote="true"] { font-size: 1.35rem; letter-spacing: -0.01em; color: var(--text-muted); }
.plan__credits {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--signal-wash); border: 1px solid #D3E2FF;
}
.plan__credits .c { font-family: var(--font-display); font-weight: 580; font-size: var(--t-small); color: var(--signal-text); }
.plan__credits .o { font-size: var(--t-caption); color: var(--text-muted); margin-top: 0.1rem; }
.credit-note { margin-top: var(--s-6); text-align: center; font-size: var(--t-small); color: var(--text-muted); }
.credit-note strong { color: var(--text); font-weight: 580; }

/* ---------- 31  Modal ---------------------------------------------------- */

.modal {
  width: min(520px, calc(100vw - 2 * var(--gutter)));
  max-height: min(94vh, 880px);
  padding: 0; border: 1px solid var(--paper-line); border-radius: var(--r-xl);
  background: var(--paper-raised); color: var(--text);
  box-shadow: var(--shadow-3); overflow: auto; overscroll-behavior: contain;
}
.modal::backdrop { background: rgba(10, 12, 16, 0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in var(--d-base) var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }

.modal__card { position: relative; padding: var(--s-6); }
.modal__close {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--paper-line); border-radius: 50%;
  background: var(--paper-raised); color: var(--text-muted); cursor: pointer;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.modal__close:hover { color: var(--text); border-color: #C9D0DA; }
.modal__close svg { width: 14px; height: 14px; }
.modal .display-3 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.85rem); }
.modal__sub { margin-top: var(--s-3); font-size: var(--t-small); color: var(--text-muted); line-height: 1.55; }
.modal__micro { margin-top: var(--s-3); text-align: center; font-size: var(--t-caption); color: var(--text-faint); }
.modal .btn { margin-top: var(--s-5); }

.field { margin-top: var(--s-4); }
.field label {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  font-size: var(--t-small); font-weight: 540; margin-bottom: var(--s-3);
}
.field__req, .field__opt { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.field__req { color: var(--signal-text); }
.field__opt { color: var(--text-faint); }
.field input, .field select {
  width: 100%; padding: 0.72rem 0.9rem;
  border: 1px solid var(--paper-line); border-radius: var(--r-md);
  background: var(--paper-raised); font-size: var(--t-small);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.field input:hover, .field select:hover { border-color: #C9D0DA; }
.field input:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(74, 140, 255, 0.16);
}
.field select {
  appearance: none; cursor: pointer; padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5l4 4 4-4' fill='none' stroke='%235A6472' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px;
}
.field.is-invalid input, .field.is-invalid select { border-color: var(--missed); }
.field__error { margin-top: var(--s-2); font-size: var(--t-caption); color: #C0272C; }
.field__error:empty { display: none; }

.modal__status { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-md); font-size: var(--t-caption); line-height: 1.5; }
.modal__status[hidden] { display: none; }
.modal__status[data-tone="info"]  { background: var(--signal-wash);   border: 1px solid #D3E2FF; color: var(--signal-text); }
.modal__status[data-tone="error"] { background: var(--missed-wash);   border: 1px solid #F7D3D4; color: #C0272C; }
.modal__status[data-tone="ok"]    { background: var(--booked-wash);   border: 1px solid #C6EDDC; color: var(--booked-text); }

/* ---------- 32  Call Online + mobile CTA --------------------------------- */

.btn__pip { width: 6px; height: 6px; border-radius: 50%; background: var(--booked); flex: none; animation: pulse-dot 1.8s var(--ease-in-out) infinite; }
.btn--call { padding-left: 1.1rem; }
.btn[hidden] { display: none; }

.call-soon { text-align: center; padding: var(--s-5) 0 0; }
.call-soon__ring {
  width: 92px; height: 92px; margin: 0 auto var(--s-5);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--signal-wash); border: 1px solid #D3E2FF;
}
.call-soon__ring svg { width: 34px; height: 34px; stroke: var(--signal); fill: none; stroke-width: 1.5; }
.call-soon p { font-size: var(--t-small); color: var(--text-muted); line-height: 1.6; max-width: 40ch; margin-inline: auto; }
.call-soon .chip { margin-bottom: var(--s-4); }

.mobile-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  display: none; gap: var(--s-3);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(245, 246, 248, 0.94);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--paper-line);
  transform: translateY(110%); transition: transform var(--d-base) var(--ease-out);
}
.mobile-cta.is-on { transform: translateY(0); }
.mobile-cta .btn { flex: 1; }
@media (max-width: 900px) {
  .mobile-cta { display: flex; }
  .site-footer { padding-bottom: calc(var(--s-6) + 76px); }
}

/* ---------- 33  Acceptance-review fixes ----------------------------------
   Anchor offsets, touch targets, mobile density, sample labelling, legal.  */

/* C4 — in-page anchors must clear the 69px fixed header */
main section[id] { scroll-margin-top: 84px; }

/* H7 — touch targets: quiet visuals, ≥44px hit areas */
.nav__link { padding-block: 0.65rem; }
.brand { padding-block: 0.5rem; }
.btn--sm { padding-block: 0.72rem; }
.sample__btn { width: 44px; height: 44px; }
.footer__col a { display: inline-block; padding-block: 0.35rem; }
.calc__field input[type="range"] { height: 44px; }
.calc__field input[type="range"]::-webkit-slider-thumb { margin-top: -8px; width: 20px; height: 20px; }
/* chip stays visually small; the hit area grows to meet it */
.calc__preset { position: relative; }
.calc__preset::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}

/* Discreet illustration labels (approved: hero + samples) */
.sample-note {
  margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-on-ink-faint);
  text-align: right;
}

/* Modal consent line (links to Privacy / Terms) */
.modal__consent {
  margin-top: var(--s-4);
  font-size: 0.75rem; line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}
.modal__consent a { color: var(--signal-text); text-decoration: underline; text-underline-offset: 2px; }

/* H4/18 — mobile density: tighten padding, keep every strategic section */
@media (max-width: 640px) {
  .company__grid { gap: var(--s-6); }
  .ladder { padding: var(--s-5); }
  .verb-row { gap: 0.35rem; }
  .verb-row span { padding: 0.26rem 0.55rem; font-size: 0.6875rem; }
  .channel-chips { gap: 0.4rem; }
  .channel-chip { padding: 0.4rem 0.7rem; font-size: var(--t-caption); }
  .loss-flow__step, .governance { padding: var(--s-5); }
  .panel-card__body { padding: var(--s-4); min-height: 0; }
  .compare__col.card { padding: var(--s-5); }
}

/* ---------- 34  Legal pages ----------------------------------------------
   privacy.html / terms.html share the site chrome; content is a measure-
   width document with the mono utility face for structural labels.        */

.legal-hero {
  background: var(--ink); color: var(--text-on-ink);
  padding: 132px 0 var(--s-8);
}
.legal-hero h1 { color: var(--text-on-ink); }
.legal-hero .lede { color: var(--text-on-ink-muted); margin-top: var(--s-4); }
.legal-meta {
  margin-top: var(--s-5);
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  color: var(--text-on-ink-faint);
}
.legal-body { padding-block: var(--s-9); }
.legal-doc { max-width: 72ch; }
.legal-doc h2 {
  font-family: var(--font-display); font-size: var(--t-heading);
  font-weight: 580; letter-spacing: var(--tr-heading);
  margin: var(--s-8) 0 var(--s-4);
}
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 { font-size: 1.02rem; font-weight: 580; margin: var(--s-6) 0 var(--s-3); }
.legal-doc p, .legal-doc li { color: var(--text-muted); line-height: 1.65; }
.legal-doc p + p { margin-top: var(--s-4); }
.legal-doc ul { margin: var(--s-4) 0; padding-left: 1.2rem; }
.legal-doc li + li { margin-top: var(--s-2); }
.legal-doc strong { color: var(--text); font-weight: 580; }
.legal-doc a { color: var(--signal-text); }

/* Internal-review flags: unresolved business decisions inside legal drafts.
   These MUST be resolved and this styling removed before public launch.    */
.legal-flag {
  margin: var(--s-4) 0;
  padding: var(--s-4);
  border-left: 3px solid var(--escalate);
  background: var(--escalate-wash);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-small); color: var(--escalate-text); line-height: 1.55;
}
.legal-flag .data { display: block; margin-bottom: var(--s-2); color: var(--escalate-text); }

.legal-toc {
  margin: var(--s-6) 0 0; padding: var(--s-5);
  background: var(--paper-sunken); border-radius: var(--r-md);
  font-size: var(--t-small);
}
.legal-toc ol { margin: var(--s-3) 0 0; padding-left: 1.2rem; }
.legal-toc a { color: var(--signal-text); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

/* ---------- 35  Tools marquee ---------------------------------------------
   Typographic wordmarks of the approved integrations, drifting slowly.
   Deliberately NOT redrawn third-party logos. Two identical tracks give a
   seamless loop; hover pauses; reduced-motion renders a static wrapped row. */

.tools-strip {
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid var(--paper-line);
}
.tools-strip__caption {
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--tr-data); text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  margin-bottom: var(--s-5);
}
.marquee {
  overflow: hidden;
  display: flex;
  /* fade the loop edges so entries appear and leave softly */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: var(--s-8);
  flex: none;
  padding-right: var(--s-8);   /* keeps the seam between copies even */
  animation: marquee-drift 44s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.marquee__item {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600;
  letter-spacing: var(--tr-heading);
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--d-base) var(--ease);
}
.marquee__item:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: var(--s-3); }
  .marquee__track[aria-hidden="true"] { display: none; }  /* no loop needed when static */
}

/* ---------- 22  Reveal-on-scroll ----------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .hero__track { height: auto; }
  .hero__sticky { position: relative; height: auto; min-height: 0; padding-block: 120px var(--s-9); }
  .thread__item { opacity: 1; filter: none; transform: none; }
  .hero__outcome { opacity: 1; transform: none; }
  /* The ambient layer holds a composed still rather than disappearing:
     the traffic stays visible, parked at spaced-out resting positions. */
  .hero__plate,
  .hero__plate::after,
  .hero__grid::before,
  .hero__traffic i { animation: none; }
  .hero__traffic i {
    opacity: var(--o);
    transform: translate3d(var(--rest), 0, 0);
  }
  .dialer__wave i { animation: none; height: 14px; }
  .chip--live::before { animation: none; }
  .btn::after { display: none; }
}