/* ============================================================
   BizzBuzz marketing site -- multi-page. Carries forward the token
   system/section patterns built for the original single-page landing
   (same dark/orange-amber/waveform identity), extended with mega-menu,
   card, and pipeline components needed for a real multi-page IA.
   Fully independent from dashboard_app/css/tokens.css + components.css.
   ============================================================ */

:root {
  /* True black, not near-black gray -- #0a0a0b/#131315 both still read as
     "charcoal" next to real black once seen side by side. --bg-raised and
     --surface are tied to --bg via var() (not a separately-chosen hex)
     specifically so they can never drift back into a lighter gray again;
     the whole site is one flat black, cards/panels defined only by their
     border. --surface-2 stays lighter on purpose: it's hover/active
     feedback on an already-dark surface, not a resting-state fill. */
  --bg: #000000;
  --bg-raised: var(--bg);
  --surface: var(--bg);
  --surface-2: #1a1a1d;
  --text: #f5f3ef;
  --muted: #8b8a8e;
  --muted-2: #616166;
  --voice: #e8a857;
  --voice-dim: rgba(232, 168, 87, 0.14);
  --action: #4fd1ae;
  --action-dim: rgba(79, 209, 174, 0.14);
  --border: rgba(245, 243, 239, 0.08);
  --border-strong: rgba(245, 243, 239, 0.16);

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Headline-only face -- a light-weight geometric grotesque, the same
     "one distinctive display face used sparingly + a workhorse UI face
     everywhere else" pairing ElevenLabs builds its whole type system on
     (their proprietary Waldenburg + Inter). Applied to the shared heading
     classes below (.l-heading*, .l-hero h1, .l-cap__name) -- deliberately
     NOT to the homepage's cinematic ai-journey captions (.ai-journey__
     caption h2, .ai-journey__headline), which stay on --font-display/800
     untouched per the explicit decision to keep that scene as-is. */
  --font-heading: 'Space Grotesk', var(--font-display);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.6s;
  --dur-slow: 1.2s;

  --max-w: 1280px;
  --radius-sm: 6px;
  --radius-md: 12px;

  color-scheme: dark;
}

/* ------------------------------------------------------------ reset */
.landing, .landing *, .landing *::before, .landing *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.landing {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.landing img, .landing svg { max-width: 100%; display: block; }
/* Deliberately a bare element selector, not `.landing a` -- this file is
   only ever loaded on .landing-bodied marketing pages anyway, so nothing
   is lost by dropping the class qualifier, and it matters: `.landing a`
   (specificity 0,1,1) was silently beating every single-class button
   color override (`.l-nav__cta`, `.l-cta--primary`, etc., all 0,1,0),
   forcing every CTA button's text to the surrounding text color instead
   of its own intended color -- invisible white-on-white on the nav's
   "Book a demo" pill, low-contrast white-on-amber on every primary CTA
   site-wide. */
a { color: inherit; text-decoration: none; }
.landing button { font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; }
.landing ul { list-style: none; }
.landing::selection, .landing *::selection { background: var(--voice); color: #1a1206; }
.landing :focus-visible { outline: 2px solid var(--voice); outline-offset: 3px; border-radius: 3px; }
.landing main { flex: 1; }

/* ------------------------------------------------------------ layout helpers */
/* padding-left/-right only (never the `padding` shorthand) -- .l-shell's
   job is purely a horizontal width constraint, and it's routinely
   combined with other classes (e.g. .l-page-header) that set their own
   vertical padding. The shorthand form used to also set padding-top/
   -bottom to 0 on this rule and its <=1024px override below, silently
   collapsing .l-page-header's top spacing to 0 at exactly the width
   where the fixed nav most needs it -- headers overlapped the nav on
   every tablet/mobile viewport. */
.l-shell { max-width: var(--max-w); margin: 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }
.l-shell--narrow { max-width: 860px; }
.l-section { padding: var(--space-6) 0; position: relative; }
.l-section--tight { padding: var(--space-5) 0; }
.l-section--border-top { border-top: 1px solid var(--border); }
.l-eyebrow { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--voice); letter-spacing: 0.01em; margin-bottom: var(--space-2); }
.l-heading { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(2rem, 4.5vw, 3.75rem); }
.l-heading--display { font-family: var(--font-heading); font-weight: 400; letter-spacing: -0.02em; line-height: 0.98; font-size: clamp(2.75rem, 8.5vw, 7.5rem); }
.l-heading--page { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.025em; line-height: 1; font-size: clamp(2.5rem, 6vw, 5rem); }
.l-body { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.6; max-width: 42rem; }
.l-body--lg { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
.l-mono { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }
.l-center { text-align: center; }
.l-center .l-body { margin-left: auto; margin-right: auto; }

.l-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 1.75rem; border-radius: 999px; font-weight: 600; font-size: 0.9375rem;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.l-cta--primary { background: var(--voice); color: #1a1206; }
.l-cta--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px -8px var(--voice-dim); }
.l-cta--ghost { border: 1px solid var(--border-strong); color: var(--text); }
.l-cta--ghost:hover { border-color: var(--voice); background: var(--voice-dim); }
.l-cta--sm { padding: 0.6rem 1.2rem; font-size: 0.8125rem; }

.l-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.l-reveal.is-visible { opacity: 1; transform: none; }

.l-link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--voice); font-size: 0.9375rem; font-weight: 600; }
.l-link-arrow svg { transition: transform var(--dur-fast) var(--ease); }
.l-link-arrow:hover svg { transform: translateX(3px); }

.l-page-header { padding: calc(var(--space-6) + var(--space-3)) 0 var(--space-5); text-align: center; }
.l-page-header .l-body { margin: var(--space-3) auto 0; }
.l-page-header--left { text-align: left; }
.l-page-header--left .l-body { margin-left: 0; }

/* Text left / orb right hero, e.g. the capabilities page. Reuses the same
   geometric-orb.js visual as the homepage's full-width band, just sized
   to sit inline beside copy instead of spanning the viewport. */
.l-page-header--split { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: var(--space-5); text-align: left; }
.l-page-header--split .l-body { margin-left: 0; }
.l-page-header__orb {
  position: relative;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--voice-dim), transparent 70%);
  animation: l-orb-heartbeat 1.8s var(--ease) infinite;
}
.l-page-header__orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Two quick beats then a rest, like a pulse monitor, rather than a smooth
   single-frequency scale loop. */
@keyframes l-orb-heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.07); }
  24% { transform: scale(1); }
  36% { transform: scale(1.045); }
  48% { transform: scale(1); }
}
@media (max-width: 900px) {
  .l-page-header--split { grid-template-columns: 1fr; text-align: center; }
  .l-page-header--split .l-body { margin: var(--space-3) auto 0; }
  .l-page-header__orb { height: 240px; margin-top: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .l-page-header__orb { animation: none; }
}

/* ============================================================ NAV + MEGA MENU */
.l-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: var(--space-3) 0; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); border-bottom: 1px solid transparent; }
.l-nav.is-scrolled { background: rgba(10, 10, 11, 0.82); backdrop-filter: blur(16px); }
.l-nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.l-nav__brand { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.5rem; }
.l-nav__brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--voice); flex: none; }
.l-nav__links { display: flex; gap: var(--space-3); font-size: 0.9375rem; color: var(--muted); }
.l-nav__item { position: relative; }
.l-nav__link { display: flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.25rem; }
.l-nav__link:hover, .l-nav__item.is-open .l-nav__link { color: var(--text); }
.l-nav__link svg { width: 10px; height: 10px; opacity: 0.6; transition: transform var(--dur-fast) var(--ease); }
.l-nav__item.is-open .l-nav__link svg { transform: rotate(180deg); }
.l-nav__actions { display: flex; align-items: center; gap: var(--space-2); }
.l-nav__login { font-size: 0.9375rem; color: var(--muted); padding: 0.5rem 0.25rem; }
.l-nav__login:hover { color: var(--text); }
.l-nav__cta { padding: 0.55rem 1.25rem; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 0.875rem; font-weight: 600; transition: background var(--dur-fast) var(--ease); }
.l-nav__cta:hover { background: var(--voice); }
.l-nav__burger { display: none; width: 28px; height: 20px; position: relative; }
.l-nav__burger span { position: absolute; left: 0; right: 0; height: 2px; background: var(--text); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.l-nav__burger span:nth-child(1) { top: 0; } .l-nav__burger span:nth-child(2) { top: 9px; } .l-nav__burger span:nth-child(3) { top: 18px; }

.l-mega {
  position: absolute; top: calc(100% + 1.1rem); left: 50%; transform: translateX(-50%) translateY(6px);
  width: min(640px, 90vw);
  background: rgba(19, 19, 21, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  padding: var(--space-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.l-nav__item.is-open .l-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.l-mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem; }
.l-mega__item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease); }
.l-mega__item:hover { background: var(--surface-2); }
.l-mega__icon { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex: none; color: var(--voice); font-family: var(--font-mono); font-size: 0.75rem; }
.l-mega__name { font-weight: 600; font-size: 0.9375rem; color: var(--text); }
.l-mega__desc { font-size: 0.8125rem; color: var(--muted); margin-top: 0.15rem; }

.l-mobile-nav { position: fixed; inset: 0; z-index: 199; background: var(--bg); display: flex; flex-direction: column; padding: calc(var(--space-3) * 3) var(--space-4) var(--space-4); transform: translateY(-100%); transition: transform var(--dur-med) var(--ease); overflow-y: auto; }
.l-mobile-nav.is-open { transform: none; }
.l-mobile-nav a { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); display: block; }
.l-mobile-nav details { border-bottom: 1px solid var(--border); }
.l-mobile-nav summary { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; padding: var(--space-2) 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.l-mobile-nav summary::-webkit-details-marker { display: none; }
.l-mobile-nav details[open] summary { color: var(--voice); }
.l-mobile-nav__sub { padding: 0 0 var(--space-2) var(--space-2); display: flex; flex-direction: column; gap: 0.25rem; }
.l-mobile-nav__sub a { font-size: 1rem; font-weight: 500; padding: 0.4rem 0; border-bottom: none; color: var(--muted); }
.l-mobile-nav__actions { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }

/* ============================================================ HERO */
.l-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--space-6) + var(--space-3)) 0 var(--space-5); position: relative; }
.l-hero--page { min-height: auto; padding: calc(var(--space-6) + var(--space-3)) 0 var(--space-4); }
/* Subtle per-industry accent -- a wrapper sets --theme-tint inline (see
   industry_detail.html); only the hero's live-dot and problem-card top edge
   pick it up, brand color system (amber/teal) otherwise unchanged across
   industries. */
.l-industry-theme .l-hero__kicker .l-live-dot { background: var(--theme-tint, var(--action)); }
.l-industry-theme .l-problem-card { border-top: 2px solid var(--theme-tint, var(--voice)); }
.l-hero__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 45% at 50% 15%, rgba(232, 168, 87, 0.08), transparent 60%), radial-gradient(ellipse 80% 60% at 50% 100%, rgba(79, 209, 174, 0.05), transparent 60%); pointer-events: none; }
/* Taller than the hero itself (not inset:0, clipped exactly to its box)
   so the cursor trail has room to fade out on its own before reaching an
   edge -- a canvas exactly the size of its container hard-cuts anything
   drawn near the boundary, which read as a visible line where the trail
   met the next section. .l-hero has no overflow set (default visible),
   so this overflow is never clipped. The mask fades the canvas's own
   pixels to transparent well before that extended edge too, belt and
   suspenders against any hard cutoff. */
/* tubes-cursor.js (the external library, not our code) sets an inline
   height on the canvas itself, matching its DIRECT parent's clientHeight
   -- so sizing has to happen on that parent, not the canvas. This wrapper
   is that parent: bottom:-40vh (not height:calc(100% + 40vh) -- .l-hero
   only sets min-height, never an explicit height, and percentage heights
   on an absolutely positioned child compute to auto against an
   auto-height containing block) makes the wrapper itself taller than the
   hero, so the library reads a bigger box and gives the trail real room
   to fade out before an edge, instead of hard-clipping exactly at the
   hero's own boundary the way it did sized directly to .l-hero. */
.l-hero__tubes-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -40vh;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 65%, transparent 100%);
  mask-image: linear-gradient(180deg, black 0%, black 65%, transparent 100%);
}
.l-hero__tubes { position: absolute; inset: 0; display: block; }
.l-hero__content { text-align: center; position: relative; z-index: 1; }
.l-hero__content--left { text-align: left; max-width: 44rem; }
.l-hero__content--left .l-hero__sub { margin-left: 0; }
.l-hero__kicker { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--voice); margin-bottom: var(--space-3); display: inline-flex; align-items: center; gap: 0.5rem; }
.l-hero__kicker .l-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--action); animation: l-pulse 2s var(--ease) infinite; }
.l-hero h1 { font-family: var(--font-heading); font-weight: 400; letter-spacing: -0.02em; line-height: 0.98; font-size: clamp(2.5rem, 8vw, 6.5rem); max-width: 20ch; margin: 0 auto; }
.l-hero--page h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); max-width: 18ch; margin: 0 auto; }
.l-hero__content--left h1 { margin: 0; }
.l-hero h1 .l-hero__line-2 { color: var(--muted); }
.l-hero__sub { color: var(--muted); font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); max-width: 40rem; margin: var(--space-3) auto 0; line-height: 1.55; }
.l-hero__ctas { margin-top: var(--space-4); display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.l-hero__content--left .l-hero__ctas { justify-content: flex-start; }

/* --- waveform / signal visualization --- */
.l-waveform { margin: var(--space-6) auto 0; max-width: 860px; position: relative; }
.l-waveform--compact { margin-top: var(--space-4); max-width: 100%; }
.l-waveform__panel { border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface), var(--bg-raised)); border-radius: var(--radius-md); padding: var(--space-4); position: relative; overflow: hidden; }
.l-waveform__status { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); margin-bottom: var(--space-3); }
.l-waveform__status-live { color: var(--action); display: inline-flex; align-items: center; gap: 0.4rem; }
.l-waveform__status-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--action); animation: l-pulse 2s var(--ease) infinite; }
.l-bars { display: flex; align-items: center; justify-content: center; gap: 4px; height: 96px; }
.l-bars rect { fill: var(--voice); transform-origin: center; animation: l-bar-wave 1.4s ease-in-out infinite; }
@keyframes l-bar-wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
.l-transcript { margin-top: var(--space-3); font-family: var(--font-mono); font-size: 0.9375rem; min-height: 3.6em; }
.l-transcript__line { opacity: 0; transition: opacity 0.4s var(--ease); margin-bottom: 0.5rem; }
.l-transcript__line.is-visible { opacity: 1; }
.l-transcript__speaker { color: var(--muted-2); margin-right: 0.5rem; }
.l-transcript__speaker--ai { color: var(--voice); }
.l-transcript__state { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--border-strong); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text); }
.l-transcript__state--action { border-color: var(--action); color: var(--action); background: var(--action-dim); }
.l-waveform__demo-btn { margin-top: var(--space-3); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.55rem 1.1rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: border-color var(--dur-fast), color var(--dur-fast); }
.l-waveform__demo-btn:hover { border-color: var(--voice); color: var(--voice); }
@keyframes l-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================ VALUE STRIP */
.l-value-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.l-value { border-top: 1px solid var(--border); padding-top: var(--space-2); }
.l-value__name { font-weight: 700; font-size: 1.0625rem; margin-bottom: 0.3rem; }
.l-value__desc { color: var(--muted); font-size: 0.875rem; }

/* value-slider.js enhances the grid above into a draggable WebGL
   carousel -- .is-enhanced only appears once the module actually mounts
   (WebGL present, motion allowed), so the plain grid is the untouched
   layout the whole time it hasn't. The grid stays in the DOM afterwards,
   visually hidden but still reachable by assistive tech, rather than
   display:none -- the carousel only ever shows one slide's full
   description at a time. */
.l-value-slider.is-enhanced { position: relative; height: 480px; }
.l-value-slider.is-enhanced .l-value-strip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.l-value-slider__stage { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; outline: none; }
.l-value-slider__stage.is-dragging { cursor: grabbing; }
.l-value-slider__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.l-value-slider__dots { position: absolute; right: var(--space-4); bottom: var(--space-3); display: flex; gap: 0.5rem; pointer-events: auto; }
.l-value-slider__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; padding: 0; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.l-value-slider__dot.is-active { background: var(--voice); border-color: var(--voice); }
@media (max-width: 900px) {
  .l-value-slider.is-enhanced { height: 400px; }
}
@media (max-width: 600px) {
  .l-value-slider.is-enhanced { height: 340px; }
}

/* ============================================================ SCRAMBLE MOTTO
   Scroll-assembled headline between the value slider and the capability
   grid -- letters start scattered in 3D and settle into place as the
   section scrolls through view. Pure CSS, no JS: sibling-index() computes
   each letter's scatter offset, and a named view-timeline drives one
   shared custom property from scroll position, read by every letter
   through inheritance. Ported from a CodePen the user supplied; the
   original animated off its own dedicated page's entire scroll distance
   (a document that exists only to host this one effect), which breaks
   the moment it's one section among many -- scoped to a view-timeline on
   its own track here instead, so its progress depends only on scrolling
   through this section, not the whole page. Falls back to plain static
   text (no scatter, no track height) wherever animation-timeline/
   sibling-index() aren't supported -- same "always ships a working
   resting state" rule as every other visual on this site. */
@property --scramble-offset {
  syntax: "<number>";
  inherits: true;
  initial-value: 75;
}
.l-scramble-track {
  position: relative;
  /* Clips the sticky stage to this track's own box -- clip-path, not
     overflow:hidden. overflow:hidden looks equivalent but isn't: any
     ancestor with overflow other than visible becomes the containing
     scroller for a position:sticky descendant, which broke the stage's
     pin against real page scroll entirely (and the view-timeline
     progress with it) the moment it was tried here. clip-path clips the
     same rendering without taking part in that scroll-container
     determination, so the stage still pins against the document as
     before, but no longer paints past this track's own bottom edge into
     whatever section follows. */
  clip-path: inset(0);
  height: 280vh;
  view-timeline-name: --scramble-progress;
  view-timeline-axis: block;
}
.l-scramble-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: l-scramble-scroll 1s linear;
  animation-timeline: --scramble-progress;
  /* Ends well before the track finishes scrolling by (not cover 100%) --
     otherwise the letters only finish assembling at the exact instant the
     sticky pin releases, so the settled headline is never actually
     readable before the next section scrolls in underneath it. */
  animation-range: cover 10% cover 55%;
  animation-timing-function: steps(100);
  /* Without an explicit fill-mode, the custom property reverts to its
     un-animated initial-value (75, fully scattered) the instant scroll
     passes the range's end boundary -- "both" holds the settled (0) value
     for the rest of the pin instead of snapping back to scrambled. */
  animation-fill-mode: both;
}
@keyframes l-scramble-scroll {
  to { --scramble-offset: 0; }
}
.l-scramble-bg { position: absolute; inset: 0; z-index: 0; }
.l-scramble-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.l-scramble { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 1ch; max-width: 60rem; padding: 0 var(--space-4); color: var(--text); }
.l-scramble > p { perspective: 300px; transform-style: preserve-3d; margin: 0; display: flex; align-items: center; gap: 0; }
.l-scramble > p:nth-child(2) { color: var(--voice); }
.l-scramble > p > span {
  --i: sibling-index();
  --dir: calc(1 - 2 * mod(var(--i), 2));
  --rand: calc(mod((var(--i) * 7 + 20), 4) - 4);
  --wave: sin(calc(var(--i) * 17deg));
  --start-y: calc((var(--rand) + var(--wave)) * var(--dir) * var(--scramble-offset) * 1px);
  --z: calc(abs(var(--rand) * 2 + var(--wave)));
  --depth-factor: calc(var(--scramble-offset) * 0.02);
  --start-z: calc(var(--z) * var(--depth-factor) * 13px);
  transform: translate3d(0, var(--start-y), var(--start-z));
  display: inline-block;
  position: relative;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 4vw + 0.5rem, 4.25rem);
}
@supports not (animation-timeline: view()) {
  .l-scramble-track { height: auto; }
  .l-scramble-stage { position: static; height: auto; padding: var(--space-6) 0; animation: none; }
  .l-scramble > p > span { transform: none; }
}
@media (max-width: 767px) {
  .l-scramble-track { height: 220vh; }
  .l-scramble > p > span { font-size: clamp(1.5rem, 6vw, 2.5rem); }
}

/* ============================================================ PROBLEM / GENERIC CHAIN */
.l-problem__chain { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-4) 0; font-family: var(--font-mono); font-size: clamp(0.9375rem, 1.4vw, 1.125rem); color: var(--muted-2); }
.l-problem__chain span:nth-child(odd) { color: var(--muted); }
.l-problem__chain .l-arrow { color: var(--muted-2); }

/* ============================================================ PROBLEM CARDS (industry/capability pages) */
.l-problem-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.l-problem-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface); font-size: 0.9375rem; color: var(--text); }

/* ============================================================ ACTION DEMO (what it does) */
.l-flow-demo { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); max-width: 640px; margin: var(--space-5) auto 0; }
.l-flow-demo__step { width: 100%; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.l-flow-demo__step-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); margin-bottom: 0.4rem; }
.l-flow-demo__step-body { font-size: 1.0625rem; }
.l-flow-demo__step--voice .l-flow-demo__step-label { color: var(--voice); }
.l-flow-demo__step--action { border-color: var(--action); background: var(--action-dim); }
.l-flow-demo__step--action .l-flow-demo__step-label { color: var(--action); }
.l-flow-demo__connector { width: 1px; height: var(--space-3); background: var(--border-strong); }
.l-flow-demo__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-3); }
.l-flow-demo__action-chip { font-family: var(--font-mono); font-size: 0.75rem; color: var(--action); border: 1px solid var(--action); background: var(--action-dim); border-radius: 999px; padding: 0.3rem 0.8rem; }

/* ============================================================ CAPABILITIES ROWS + CARDS */
.l-capabilities__list { margin-top: var(--space-4); }
.l-cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--border); transition: background var(--dur-fast) var(--ease); }
.l-cap:last-child { border-bottom: 1px solid var(--border); }
.l-cap__name { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.02em; font-size: clamp(2rem, 4vw, 3.25rem); color: var(--muted-2); transition: color var(--dur-fast) var(--ease); }
.l-cap:hover .l-cap__name, .l-cap:focus-within .l-cap__name { color: var(--voice); }
.l-cap__desc { color: var(--muted); font-size: 1.0625rem; max-width: 32rem; }
.l-cap__visual { height: 84px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); position: relative; overflow: hidden; display: flex; align-items: center; padding: 0 var(--space-3); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); gap: var(--space-2); }
.l-cap__visual .l-node { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); flex: none; }
.l-cap:hover .l-cap__visual .l-node--from { background: var(--voice); }
.l-cap:hover .l-cap__visual .l-node--to { background: var(--action); }
.l-cap__visual .l-node-line { flex: 1; height: 1px; background: var(--border-strong); position: relative; }
.l-cap__visual .l-node-line::after { content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--voice); opacity: 0; transition: opacity var(--dur-fast), left var(--dur-slow) var(--ease); }
.l-cap:hover .l-cap__visual .l-node-line::after { opacity: 1; left: calc(100% - 5px); }
.l-cap--link { cursor: pointer; }

.l-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
/* Cursor-follow spotlight (site.js sets --mx/--my on pointermove) plus a
   scroll-in rise via the shared .l-reveal observer -- the same amber-glow
   hover language as the primary CTA button and the mega-menu, so a plain
   card grid picks up the same "crafted" feel as the rest of the page
   instead of sitting there as a flat, static list. */
.l-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.l-card:hover { border-color: var(--voice); transform: translateY(-4px); box-shadow: 0 20px 44px -26px var(--voice-dim); }
.l-card__glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--voice-dim), transparent 70%);
}
.l-card:hover .l-card__glow { opacity: 1; }
/* 52px with a real line icon inside (not the old 2-letter placeholder
   text) -- .l-card__icon svg is sized explicitly since an <svg> with no
   width/height attribute otherwise renders at its 300x150 CSS default. */
.l-card__icon { position: relative; width: 52px; height: 52px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: linear-gradient(160deg, var(--voice-dim), transparent 75%); display: flex; align-items: center; justify-content: center; color: var(--voice); margin-bottom: var(--space-3); transition: border-color var(--dur-fast) var(--ease); }
.l-card__icon svg { width: 24px; height: 24px; display: block; }
.l-card:hover .l-card__icon { border-color: var(--voice); }
.l-card__name { position: relative; font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.l-card__desc { position: relative; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; flex: 1; }
.l-card__link { position: relative; margin-top: var(--space-3); }

/* ============================================================ SECTION ATMOSPHERE
   A very faint fixed-size dot grid + one off-center radial glow behind a
   section -- amber/teal at near-zero opacity, never the section's only
   background layer (::before paints behind normal-flow children with no
   z-index juggling needed). Meant to be barely noticed, not a "visual
   effect": the brief was explicit about no purple gradients, no heavy
   glow. */
.l-section--atmosphere { position: relative; }
/* True full-bleed background, not just "fill the section's own box" --
   this section IS a .l-shell (padded + max-width, centered), so a plain
   inset:0 pseudo-element only covered the space inside that padding,
   leaving the shell's own left/right gutters (and, on screens wider than
   --max-w, the margin outside it too) as plain unfilled black either
   side of the content. left:50%/width:100vw/-50vw break the pseudo out
   of the shell's own width entirely so it spans the true viewport at any
   size, while every real child stays exactly where it already was
   (unaffected -- only this ::before moves). */
.l-section--atmosphere::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
  background-image:
    radial-gradient(560px circle at 6% -4%, var(--voice-dim), transparent 60%),
    radial-gradient(560px circle at 92% 85%, var(--action-dim), transparent 60%),
    radial-gradient(rgba(245, 243, 239, 0.05) 1px, transparent 1px);
  background-size: auto, auto, 30px 30px;
  background-position: 0 0, 0 0, 0 0;
  opacity: 0.7;
}
.l-section--atmosphere > * { position: relative; }

.l-section-head { max-width: 46rem; margin-bottom: var(--space-2); }
/* No literal <h2> here (the scramble section right above already
   delivers "One receptionist, every capability" as the big moment) --
   bump this line up to read as the section's heading anyway, so it isn't
   visually smaller than the industries section's real <h2> right below. */
.l-section-head .l-body { font-size: clamp(1.375rem, 2vw, 1.75rem); color: var(--text); font-weight: 500; line-height: 1.4; }

/* ---- capabilities: product-oriented bento (one featured tile + a grid
   of the rest) instead of identical cards, per-slug line icons instead of
   two-letter placeholders. */
.l-bento { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-3); align-items: stretch; margin-top: var(--space-4); }
.l-bento__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.l-bento__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  /* A fixed, clearly-visible amber stroke -- the plain var(--border) other
     cards use is a near-invisible rgba(245,243,239,0.08), which vanished
     against this card's own warm gradient background entirely (a low-
     alpha 0.32 amber border was still too close in hue/brightness to that
     background to actually read as an edge -- confirmed by cropping the
     rendered card directly, not just eyeballing a full-page screenshot). */
  border: 1px solid rgba(232, 168, 87, 0.6);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: linear-gradient(160deg, var(--voice-dim), var(--surface) 60%);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.l-bento__feature:hover { border-color: var(--voice); transform: translateY(-4px); box-shadow: 0 24px 56px -28px var(--voice-dim); }
.l-bento__feature .l-card__icon { width: 56px; height: 56px; margin-bottom: 0; }
.l-bento__feature .l-card__icon svg { width: 26px; height: 26px; }
.l-bento__feature-top { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.l-bento__feature-tag { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--voice); border: 1px solid var(--voice); border-radius: 999px; padding: 0.3rem 0.75rem; }
.l-bento__feature-name { position: relative; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.l-bento__feature-desc { position: relative; color: var(--muted); font-size: 1rem; line-height: 1.65; max-width: 34rem; margin-bottom: var(--space-3); }
.l-bento__feature .l-bars { display: block; width: 100%; height: 40px; margin: auto 0 var(--space-3); }
.l-bento__feature .l-card__link { margin-top: 0; }
.l-bento__grid .l-reveal:nth-child(1) { transition-delay: 0.05s; }
.l-bento__grid .l-reveal:nth-child(2) { transition-delay: 0.1s; }
.l-bento__grid .l-reveal:nth-child(3) { transition-delay: 0.15s; }
.l-bento__grid .l-reveal:nth-child(4) { transition-delay: 0.2s; }

/* ---- industries: two-column (intro left, card grid right) instead of a
   centered header stacked over an identical card grid -- gives it its
   own shape so it stops reading as a repeat of the capabilities section
   right above it. */
.l-industries { display: grid; grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr); gap: var(--space-5); align-items: start; }
.l-industries__intro .l-heading { margin: var(--space-2) 0 var(--space-2); font-size: clamp(2rem, 3vw, 2.75rem); }
.l-industries__intro .l-body { margin: 0 0 var(--space-3); max-width: none; }
.l-industries__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.l-industries__grid .l-reveal:nth-child(1) { transition-delay: 0.05s; }
.l-industries__grid .l-reveal:nth-child(2) { transition-delay: 0.1s; }
.l-industries__grid .l-reveal:nth-child(3) { transition-delay: 0.15s; }
.l-industries__grid .l-reveal:nth-child(4) { transition-delay: 0.2s; }

@media (max-width: 900px) {
  .l-bento { grid-template-columns: 1fr; }
  .l-industries { grid-template-columns: 1fr; }
  .l-industries__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .l-bento__grid { grid-template-columns: 1fr; }
  .l-industries__grid { grid-template-columns: 1fr; }
}

/* ============================================================ SIGNAL RAIL / PIPELINE (call in motion, workflows) */
.l-rail { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin: var(--space-5) auto 0; position: relative; }
.l-rail::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px; background: var(--border-strong); }
.l-rail__node { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); padding: var(--space-3) 0; position: relative; }
.l-rail__dot { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted-2); z-index: 1; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.l-rail__node.is-visible .l-rail__dot { border-color: var(--voice); color: var(--voice); background: var(--voice-dim); }
.l-rail__node.is-visible.l-rail__node--action .l-rail__dot { border-color: var(--action); color: var(--action); background: var(--action-dim); }
.l-rail__label { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.25rem; }
.l-rail__body { font-size: 1.125rem; color: var(--text); }
.l-rail__body span { color: var(--muted); }

.l-pipeline-block { margin-bottom: var(--space-5); }
.l-pipeline-block__title { font-weight: 700; font-size: 1.375rem; margin-bottom: var(--space-1); }

/* ============================================================ TRANSFER (AI -> Human) */
.l-transfer__stage { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-5) auto 0; max-width: 480px; }
.l-transfer__node { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }
.l-transfer__node-icon { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.l-transfer__node--ai .l-transfer__node-icon { border-color: var(--voice); color: var(--voice); }
.l-transfer__node--human .l-transfer__node-icon { border-color: var(--action); color: var(--action); }
.l-transfer__link { flex: 1; height: 1px; background: var(--border-strong); position: relative; min-width: 60px; }
.l-transfer__link::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--voice); animation: l-transfer-glow 2.4s var(--ease) infinite; }
@keyframes l-transfer-glow { 0% { left: 0; background: var(--voice); } 50% { background: var(--voice); } 51% { background: var(--action); } 100% { left: calc(100% - 7px); background: var(--action); } }

/* ============================================================ LEAD CAPTURE */
.l-lead { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.l-lead__field { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.9rem; }
.l-lead__score { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; border: 1px solid var(--action); color: var(--action); background: var(--action-dim); }

/* ============================================================ CALENDAR */
.l-calendar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); max-width: 520px; margin: var(--space-4) 0; }
.l-calendar__day { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); text-align: center; }
.l-calendar__day--available { border-color: var(--action); color: var(--action); background: var(--action-dim); }
.l-calendar__slot { display: block; margin-top: 0.4rem; font-size: 0.75rem; }

/* ============================================================ CAMPAIGNS */
.l-campaign { max-width: 560px; margin: var(--space-4) 0; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--surface); }
.l-campaign__bar { height: 8px; border-radius: 999px; background: var(--bg-raised); overflow: hidden; margin: var(--space-2) 0 var(--space-3); }
.l-campaign__bar-fill { height: 100%; background: var(--voice); border-radius: 999px; width: 0; transition: width 1.4s var(--ease); }
.l-campaign__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); font-family: var(--font-mono); font-size: 0.75rem; text-align: center; }
.l-campaign__stat-value { font-size: 1.375rem; font-weight: 700; color: var(--text); display: block; }
.l-campaign__stat-label { color: var(--muted); }

/* ============================================================ INDUSTRIES LIST */
.l-industries { margin-top: var(--space-3); }
.l-industry { display: flex; align-items: baseline; justify-content: space-between; padding: var(--space-3) 0; border-top: 1px solid var(--border); cursor: default; }
.l-industries .l-industry:last-child { border-bottom: 1px solid var(--border); }
.l-industry__name { font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.02em; color: var(--muted-2); transition: color var(--dur-fast) var(--ease); }
.l-industry:hover .l-industry__name { color: var(--text); }
.l-industry__example { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); max-width: 24rem; text-align: right; opacity: 0; transform: translateX(8px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.l-industry:hover .l-industry__example { opacity: 1; transform: none; }
.l-industry-link { display: block; }

/* ============================================================ PRODUCT PREVIEW */
.l-preview { border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); overflow: hidden; margin-top: var(--space-4); }
.l-preview__chrome { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem var(--space-3); border-bottom: 1px solid var(--border); background: var(--bg-raised); }
.l-preview__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.l-preview__title { margin-left: var(--space-2); font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.l-preview__body { padding: var(--space-4); }
.l-preview__row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-size: 0.9375rem; gap: var(--space-2); }
.l-preview__row:last-child { border-bottom: none; }
.l-preview__row .l-muted { color: var(--muted); font-family: var(--font-mono); font-size: 0.8125rem; }
.l-preview-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.l-preview-tab { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 1rem; }
.l-preview-tab[aria-selected="true"] { color: var(--voice); border-color: var(--voice); }

/* ============================================================ PROVIDER-AGNOSTIC ENGINE */
.l-engine { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: var(--space-4) auto; max-width: 560px; flex-wrap: wrap; }
.l-engine__box { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.l-engine__nodes { display: flex; gap: 0.4rem; }
.l-engine__nodes span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }

/* ============================================================ RELIABILITY / WHY BIZZBUZZ GRID */
.l-reliability__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.l-reliability__item { border-top: 1px solid var(--border); padding: var(--space-2) 0; font-size: 0.9375rem; color: var(--muted); }
.l-reliability__item strong { color: var(--text); display: block; margin-bottom: 0.2rem; font-weight: 600; }

/* ============================================================ INTEGRATIONS */
.l-integrations__group { margin-bottom: var(--space-4); }
.l-integrations__group-title { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--voice); margin-bottom: var(--space-2); }
.l-integrations__row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.l-integration-chip { border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.5rem 1.1rem; font-size: 0.9375rem; }

/* ============================================================ PRICING */
.l-pricing__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-4); align-items: start; }
.l-plan { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); position: relative; overflow: hidden; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.l-plan:hover { transform: translateY(-4px); }
.l-plan::before { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 168, 87, 0.16), transparent 60%); }
.l-plan:hover::before { opacity: 1; }
.l-plan--featured { border-color: var(--voice); background: linear-gradient(180deg, var(--voice-dim), transparent 60%); }
.l-plan__badge { position: absolute; top: -0.6rem; left: var(--space-3); background: var(--voice); color: #1a1206; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.2rem 0.6rem; border-radius: 999px; }
.l-plan__name { font-weight: 700; font-size: 1.0625rem; margin-bottom: var(--space-2); }
.l-plan__price { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.l-plan__price small { font-size: 0.9375rem; font-weight: 500; color: var(--muted); }
.l-plan__credits { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); margin: var(--space-2) 0 var(--space-3); }
.l-plan__features { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: var(--space-3); font-size: 0.875rem; color: var(--muted); }
.l-plan__features li::before { content: "—"; color: var(--muted-2); margin-right: 0.5rem; }
.l-plan .l-cta { width: 100%; justify-content: center; }
.l-pricing__note { margin-top: var(--space-4); max-width: 44rem; color: var(--muted); font-size: 0.9375rem; }
.l-pricing__note strong { color: var(--text); font-weight: 600; }
.l-pricing__faq-link { margin-top: var(--space-3); }

/* ============================================================ FAQ */
.l-faq { max-width: 44rem; margin-top: var(--space-4); }
.l-faq--wide { max-width: none; }
.l-faq__category { margin-bottom: var(--space-4); }
.l-faq__category-title { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--voice); margin-bottom: var(--space-2); }
.l-faq details { border-top: 1px solid var(--border); padding: var(--space-3) 0; }
.l-faq details:last-child { border-bottom: 1px solid var(--border); }
.l-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 1.0625rem; font-weight: 600; gap: var(--space-2); }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after { content: "+"; font-family: var(--font-mono); font-weight: 400; color: var(--muted); transition: transform var(--dur-fast) var(--ease); flex: none; }
.l-faq details[open] summary::after { transform: rotate(45deg); color: var(--voice); }
.l-faq__answer { color: var(--muted); font-size: 0.9375rem; padding-top: var(--space-2); max-width: 38rem; }

/* ============================================================ RESOURCES */
.l-resource-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }

/* ============================================================ DEMO FORM */
.l-demo-form { max-width: 560px; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.l-demo-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.l-field { display: flex; flex-direction: column; gap: 0.4rem; }
.l-field label { font-size: 0.8125rem; color: var(--muted); }
.d-input { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0.75rem 1rem; color: var(--text); font-family: inherit; font-size: 0.9375rem; width: 100%; transition: border-color var(--dur-fast) var(--ease); }
.d-input:focus { outline: none; border-color: var(--voice); }
.d-input--area { resize: vertical; min-height: 5rem; }
.l-demo-form__submit { margin-top: var(--space-1); align-self: flex-start; }
.l-demo-confirm { border: 1px solid var(--action); background: var(--action-dim); border-radius: var(--radius-md); padding: var(--space-4); max-width: 560px; margin-top: var(--space-4); }
.l-demo-confirm strong { color: var(--action); display: block; margin-bottom: 0.4rem; font-size: 1.125rem; }
.l-field-error { color: #e8767a; font-size: 0.8125rem; }
.l-field-help { color: var(--muted-2); font-size: 0.8125rem; }
.l-demo-form__fineprint { color: var(--muted-2); font-size: 0.75rem; margin-top: var(--space-1); }

/* ============================================================ FINAL CTA */
.l-final { text-align: center; padding: var(--space-6) 0 var(--space-4); position: relative; }
.l-final__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 50%, var(--voice-dim), transparent 65%); pointer-events: none; }
.l-final h2 { position: relative; z-index: 1; }
.l-final .l-body { margin: var(--space-3) auto var(--space-4); position: relative; z-index: 1; }
.l-final__ctas { margin-top: var(--space-4); position: relative; z-index: 1; display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.l-final .l-body + .l-final__ctas { margin-top: 0; }
.l-final__rail { max-width: 320px; margin: var(--space-4) auto 0; position: relative; z-index: 1; }

/* ============================================================ FOOTER */
.l-footer { border-top: 1px solid var(--border); padding: var(--space-4) 0 var(--space-3); }
.l-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.l-footer__brand { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.5rem; }
.l-footer__tag { color: var(--muted); font-size: 0.875rem; max-width: 20rem; }
.l-footer__col-title { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-2); margin-bottom: var(--space-2); }
.l-footer__col a { display: block; color: var(--muted); font-size: 0.875rem; padding: 0.3rem 0; }
.l-footer__col a:hover { color: var(--text); }
.l-footer__bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: var(--space-3); font-size: 0.8125rem; color: var(--muted-2); flex-wrap: wrap; gap: var(--space-2); }

/* ============================================================ RESPONSIVE */
@media (max-width: 1024px) {
  .l-shell { padding-left: var(--space-3); padding-right: var(--space-3); }
  .l-cap { grid-template-columns: 1fr; }
  .l-cap__visual { height: 64px; }
  .l-pricing__grid { grid-template-columns: repeat(2, 1fr); }
  .l-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .l-value-strip { grid-template-columns: repeat(2, 1fr); }
  /* The full nav (Product/Industries/Capabilities/Workflows/Integrations/
     Pricing + Sign in + Book a Demo) simply doesn't fit in tablet-portrait
     widths (iPad-class devices land at 768-1024px) -- it used to only
     switch to the burger menu below 768px, leaving a real gap where the
     desktop nav wrapped/overflowed. */
  .l-nav__links, .l-nav__login { display: none; }
  .l-nav__burger { display: block; }
}

@media (max-width: 768px) {
  .l-hero { min-height: 92svh; padding-top: var(--space-5); }
  .l-hero__ctas { flex-direction: column; align-items: stretch; }
  .l-hero__ctas .l-cta { justify-content: center; }
  .l-waveform { margin-top: var(--space-5); }
  .l-bars { height: 64px; }
  .l-transfer__stage { flex-direction: column; }
  .l-transfer__link { width: 1px; height: 48px; min-width: 0; }
  .l-transfer__link::after { left: -3px; top: 0; animation-name: l-transfer-glow-vertical; }
  @keyframes l-transfer-glow-vertical { 0% { top: 0; background: var(--voice); } 50% { background: var(--voice); } 51% { background: var(--action); } 100% { top: calc(100% - 7px); background: var(--action); } }
  .l-calendar { grid-template-columns: repeat(2, 1fr); }
  .l-campaign__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-1); }
  .l-industry { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .l-industry__example { opacity: 1; transform: none; text-align: left; }
  .l-pricing__grid { grid-template-columns: 1fr; }
  .l-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .l-section { padding: var(--space-5) 0; }
  .l-value-strip { grid-template-columns: 1fr; }
  .l-demo-form__row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .l-footer__grid { grid-template-columns: 1fr; }
  .l-reliability__grid { grid-template-columns: 1fr; }
}

/* ============================================================ VISUAL SYSTEM
   Three.js/Canvas2D containers -- see marketing/static/marketing/js/visuals/.
   Every container ships a CSS-only resting state (a static glow/gradient)
   so the page looks complete even before a module mounts, fails to load,
   or is skipped outright under reduced motion / on mobile. */

/* Reusable "live call" status header + stepper (site.js extends the
   existing runDemo() transcript timeline to drive these) */
.l-call-status { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); margin-bottom: var(--space-2); }
.l-call-status__live { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--action); }
.l-call-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-3); }
.l-call-steps [data-step] { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.3rem 0.7rem; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.l-call-steps [data-step].is-active { color: var(--voice); border-color: var(--voice); background: var(--voice-dim); }
.l-call-steps [data-step].is-done { color: var(--action); border-color: var(--action); }

/* Global ambient background (particle-field.js) */
#l-bg-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
#l-bg-field canvas { width: 100%; height: 100%; display: block; opacity: 0.55; }

/* Product page: multiple floating panels in one perspective stage, not one
   tilted card -- transcript / lead score / call status / calendar /
   recording, each at a different depth (product-tilt.js). */
.l-preview-stage { position: relative; perspective: 1400px; margin-top: var(--space-5); min-height: 520px; }
.l-preview--tilt { transform-style: preserve-3d; transition: transform 0.05s linear; will-change: transform; max-width: 480px; margin: 0 auto; }
.l-preview__satellite {
  position: absolute; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.7rem 1rem; font-size: 0.8125rem; color: var(--text); pointer-events: none; display: none;
  transition: transform 0.05s linear; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.l-preview__satellite .l-mono { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); display: block; margin-bottom: 0.2rem; }
@media (min-width: 900px) {
  .l-preview__satellite { display: block; }
}

/* Looping "small animated visualization" on capability rows -- was
   hover-only, now loops continuously and only pauses under reduced motion. */
.l-cap__visual .l-node-line::after { animation: l-cap-signal 2.6s var(--ease) infinite; opacity: 1; }
@keyframes l-cap-signal { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }

/* Signal-pulse on pipeline rails once scrolled into view (scroll-scenes.js
   toggles .is-pulsing) -- the cheap, section-scoped stand-in for a full
   scroll-scrubbed background. */
.l-rail.is-pulsing::before {
  background: linear-gradient(180deg, transparent, var(--voice) 45%, var(--action) 55%, transparent);
  background-size: 100% 200%;
  animation: l-rail-signal 2.8s linear infinite;
}
@keyframes l-rail-signal { 0% { background-position: 0 100%; } 100% { background-position: 0 -100%; } }

@media (max-width: 767px) {
  .l-preview-stage { min-height: 380px; }
}

/* ============================================================ AI JOURNEY
   Homepage-only cinematic scroll sequence -- see marketing/static/
   marketing/js/immersive/. Desktop (motion allowed): an 800vh scroll
   driver with a pinned full-viewport scene (GSAP ScrollTrigger applies
   position:fixed to .ai-journey__pin at runtime; before JS runs, or if it
   never activates, this renders as one ordinary full-height section). */
.ai-journey { position: relative; height: 800vh; background: var(--bg); }
.ai-journey__pin { position: relative; height: 100vh; overflow: hidden; background: var(--bg); }
.ai-journey__pin canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ai-journey__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 65% 55% at 50% 50%, transparent 35%, var(--bg) 100%);
}
.ai-journey__captions { position: absolute; inset: 0; pointer-events: none; text-align: center; }
.ai-journey__caption {
  /* Position only in intent -- but opacity:0 is a REQUIRED default, not
     decoration: all 8 stage captions stack at this exact same centered
     position, and per-frame visibility is only ever written once
     ai-journey.js's tick() loop starts running (which waits on Three.js/
     WebGL to finish loading -- a real, sometimes-slow async gap on a cold
     cache). Without an opacity:0 default here, every stage's full text
     -- including the "outcome" stage's CTA buttons -- renders fully
     opaque and overlapping for that entire loading window, which is
     exactly the bug this comment is guarding against (confirmed via a
     real first-load repro: this shows up reliably on an uncached Three.js
     fetch and disappears on a refresh only because the browser cache
     makes the race unnoticeably short, not because the race is gone).
     The "intro" stage is the one exception, immediately below -- it's
     the page's hero, meant to be visible at rest before any scrolling or
     JS at all. */
  position: absolute; top: 50%; left: 50%; max-width: 640px; width: 90%;
  transform: translate(-50%, -50%); pointer-events: none;
  opacity: 0;
}
.ai-journey__caption[data-stage="intro"] { opacity: 1; }
.ai-journey__caption h2 { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: var(--space-2); }
/* Single-word stage headings get a bigger, more editorial moment than the
   multi-line ones (which already wrap two lines and don't need to grow). */
.ai-journey__caption[data-stage="voice"] h2,
.ai-journey__caption[data-stage="listening"] h2,
.ai-journey__caption[data-stage="understanding"] h2,
.ai-journey__caption[data-stage="action"] h2 { font-size: clamp(3rem, 10vw, 5.5rem); }
.ai-journey__caption p { color: var(--muted); font-size: 1.125rem; max-width: 34rem; margin: 0 auto; }
.ai-journey__headline { font-weight: 800; font-size: clamp(2.25rem, 6vw, 4.25rem); letter-spacing: -0.03em; line-height: 1.05; margin-top: var(--space-2); }
.ai-journey__char, .ai-journey__word { display: inline-block; will-change: transform, opacity, filter; }
.ai-journey__char-group { display: inline-block; white-space: nowrap; }

/* The simple, trigger-once-on-enter reveal used by ordinary headings
   sitewide (text-scenes.js's revealOnEnter) -- deliberately a separate
   class from .ai-journey__char/__word above, which are scrubbed via
   per-frame inline styles that a CSS transition here would fight. */
.l-reveal-char, .l-reveal-word {
  display: inline-block; opacity: 1; transform: translateY(0); filter: blur(0);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.l-reveal-char.is-hidden, .l-reveal-word.is-hidden { opacity: 0; transform: translateY(20px); filter: blur(4px); }
.ai-journey__ctas { margin-top: var(--space-4); display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.ai-journey__scroll-hint {
  position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em;
  opacity: 1; transition: opacity 0.4s var(--ease);
}
.ai-journey__scroll-hint.is-hidden { opacity: 0; }

/* Mobile and reduced-motion both collapse to the same short, static,
   four-beat progression (Voice -> Understanding -> Action -> Outcome) --
   no pin, no WebGL scene is ever constructed on these paths (see
   scroll-controller.js's no-op check), this is just the layout for
   whatever static markup is already in the DOM either way. */
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .ai-journey { height: auto; padding: var(--space-6) 0; }
  .ai-journey__pin { position: static; height: auto; overflow: visible; }
  .ai-journey__pin canvas { display: none; }
  .ai-journey__vignette { display: none; }
  .ai-journey__scroll-hint { display: none; }
  .ai-journey__captions { position: static; display: flex; flex-direction: column; gap: var(--space-6); }
  .ai-journey__caption {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    width: auto; max-width: none; margin: 0 auto; padding: 0 var(--space-3);
  }
  .ai-journey__caption[data-stage="intro"],
  .ai-journey__caption[data-stage="listening"],
  .ai-journey__caption[data-stage="intent"],
  .ai-journey__caption[data-stage="handoff"] { display: none; }
  /* The single-word cinematic heading size boost (clamp min 3rem) is
     sized for the desktop/tablet pinned experience -- at mobile widths a
     lone unbreakable word like "UNDERSTANDING" has nowhere to wrap and
     simply overflows the viewport at that size. This fallback is a plain
     static stack, so the ordinary heading size is the right one here. */
  .ai-journey__caption[data-stage="voice"] h2,
  .ai-journey__caption[data-stage="listening"] h2,
  .ai-journey__caption[data-stage="understanding"] h2,
  .ai-journey__caption[data-stage="action"] h2 { font-size: clamp(2rem, 9vw, 3rem); }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .landing *, .landing *::before, .landing *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .l-reveal { opacity: 1; transform: none; }
  .l-bars rect { transform: scaleY(0.6); }
  .l-transcript__line { opacity: 1; }
  .l-rail__node .l-rail__dot { border-color: var(--voice); color: var(--voice); background: var(--voice-dim); }
  .l-industry__example { opacity: 1; transform: none; }
}