/* ============================================================
   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.
   ============================================================ */

/* W1: a metric-matched stand-in for Inter while the web font loads (same numbers Next.js / fontaine use for Inter over Arial), so text does not
   re-wrap when Inter arrives -- that re-wrap was a measurable layout shift on phones. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans'); ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; size-adjust: 107.4%; }

: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', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Headline-only face -- matches the "clio" logo wordmark's own rounded
     geometric letterforms (thick uniform strokes, fully rounded
     terminals), 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).
     Previously Space Grotesk -- switched to Fredoka specifically to read
     as the same typeface family as the logo, not just a same-brand
     accent color. 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: 'Fredoka', 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; }

/* Long-form legal/document prose (privacy policy, terms) -- the rest of
   the site is card/section driven and has no existing style for a plain
   run of headings + paragraphs + lists, so this is scoped to .l-legal
   rather than overloading .l-body (which is single-paragraph, width-
   capped, and used inside hero/card layouts all over the site). */
.l-legal { color: var(--text); font-size: 1.0625rem; line-height: 1.7; padding-bottom: var(--space-6); }
.l-legal p, .l-legal ul { color: var(--muted); margin: 0 0 var(--space-2); }
.l-legal h2 { font-family: var(--font-heading); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--text); margin: var(--space-4) 0 var(--space-2); }
.l-legal h3 { font-family: var(--font-heading); font-weight: 500; font-size: 1.125rem; color: var(--text); margin: var(--space-3) 0 var(--space-1); }
.l-legal ul { padding-left: 1.25rem; }
.l-legal li { margin-bottom: 0.4rem; }
.l-legal li::marker { color: var(--voice); }
.l-legal a { color: var(--voice); text-decoration: underline; text-underline-offset: 2px; }
.l-legal > p:first-of-type { color: var(--text); font-size: 1.125rem; }
.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-weight: 400; 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: 500; 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: 400; 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 (see
   capabilities-hero.js for the Lottie animation mounted inside). */
.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;
}
@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); }
}

/* ============================================================ 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-logo { height: 32px; width: auto; display: block; }
.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; }
button.l-nav__link { background: none; border: 0; font: inherit; color: inherit; cursor: default; }
.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-nav__row { position: relative; }
.l-nav__item--wide { position: static; }
button.l-nav__link { position: relative; cursor: pointer; }
/* Hover bridge: an invisible strip under the trigger so the pointer can travel
   from the button down into the panel without the menu ever closing. */
button.l-nav__link::after { content: ""; position: absolute; left: -0.75rem; right: -0.75rem; top: 100%; height: 2.25rem; pointer-events: none; }
.l-nav__item.is-open > button.l-nav__link::after, .l-nav__item.is-open > button.l-nav__link::after { pointer-events: auto; }
.l-nav__item.is-open > button.l-nav__link, .l-nav__item.is-open > button.l-nav__link { color: var(--text); }
.l-mega {
  position: absolute; top: calc(100% + 0.4rem); left: 50%; transform: translateX(-50%) translateY(8px);
  width: 340px;
  background: rgba(18, 18, 20, 0.96); color: var(--text);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 70px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s linear 0.16s;
}
.l-mega--cols-2 { width: 580px; }
.l-mega--cols-3 { width: min(900px, 100%); left: auto; right: 0; transform: translateY(8px); }
.l-nav__item.is-open .l-mega, .l-nav__item.is-open .l-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
.l-nav__item.is-open .l-mega--cols-3, .l-nav__item.is-open .l-mega--cols-3 { transform: translateY(0); }
/* panel-side bridge, covers the remaining gap up to the nav bar */
.l-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.l-mega__grid { display: grid; grid-template-columns: 1fr; gap: 0.25rem 0.75rem; padding: 1rem; }
.l-mega--cols-2 .l-mega__grid { grid-template-columns: repeat(2, 1fr); }
.l-mega--cols-3 .l-mega__grid { grid-template-columns: repeat(3, 1fr); }
.l-mega__item { position: relative; display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 2rem 0.6rem 0.6rem; border-radius: 10px; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.l-mega__item::after { content: "→"; position: absolute; right: 0.85rem; color: var(--voice); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.l-mega__item:hover, .l-mega__item:focus-visible { background: var(--voice-dim); outline: none; }
.l-mega__item:hover::after, .l-mega__item:focus-visible::after { opacity: 1; transform: none; }
.l-mega__icon { width: 38px; height: 38px; padding: 9px; flex: none; border-radius: 10px; background: var(--voice-dim); color: var(--voice); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.l-mega__item:hover .l-mega__icon, .l-mega__item:focus-visible .l-mega__icon { background: var(--voice); color: #000; }
.l-mega__name { display: block; font-weight: 600; font-size: 0.9rem; color: var(--text); }
.l-mega__desc { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.4; }
.l-mega__footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 1.5rem; background: var(--surface-2); border-top: 1px solid var(--border); }
.l-mega__footer p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); max-width: 34ch; }
.l-mega--cols-1 .l-mega__footer { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.l-mega__cta { flex: none; padding: 0.65rem 1.25rem; border-radius: 999px; background: var(--voice); color: #000; font-size: 0.8125rem; font-weight: 600; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.l-mega__cta:hover { background: #f0b86e; transform: translateY(-1px); }

.l-nav__item.is-instant .l-mega { transition: none; }

.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-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.l-hero__tagline { font-family: var(--font-heading); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(1.5rem, 3.6vw, 2.75rem); max-width: 24ch; margin: var(--space-2) auto 0; color: var(--voice); }
.l-hero__content--left .l-hero__tagline { margin-left: 0; }
.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: 400;
  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: 400; 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: 500; 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--center { margin-left: auto; margin-right: auto; text-align: center; }
.l-section-head--center .l-body { margin-left: auto; margin-right: auto; }
.l-caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 900px) { .l-caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .l-caps-grid { grid-template-columns: 1fr; } }
.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: 500; 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: flex; flex-direction: column; gap: var(--space-5); }
.l-industries__intro .l-heading { margin: var(--space-2) 0 var(--space-2); font-size: clamp(2rem, 3vw, 2.75rem); }
.l-industries__intro { text-align: center; max-width: 46rem; margin: 0 auto; }
.l-industries__intro .l-body { margin: 0 auto var(--space-3); max-width: 38rem; }
.l-industries__intro .l-link-arrow { justify-content: center; }
.l-industries__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 1100px) { .l-industries__grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-2); } }
@media (max-width: 560px) { .l-industries__grid { grid-template-columns: 1fr; } }
.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; }
}
@media (max-width: 560px) {
  .l-bento__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 */
/* Flex (not grid) on purpose: `plans` comes straight from the DB, so the
   count doesn't always divide evenly into a fixed column count -- grid's
   shared column tracks leave a leftover last-row card stranded under
   column 1 with dead space beside it. Flex-wrap + justify-content:center
   centers whatever ends up alone on the last row instead, and flex's
   default stretch (cross-axis) keeps every card in a row the same
   height regardless of how many feature bullets it lists. */
.l-pricing__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.l-plan { flex: 1 1 230px; max-width: 300px; display: flex; flex-direction: column; 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%); }
/* Corner ribbon, not a pill -- a rotated bar tucked into the card's top-
   right corner, clipped to follow its rounded edge by `.l-plan`'s own
   `overflow: hidden` (no separate clip-path needed). Purely a CSS
   shape, not an image, so it recolors/rescales with the rest of the
   theme for free. */
.l-plan__ribbon {
  position: absolute;
  top: 1.35rem;
  right: -2.6rem;
  width: 9.5rem;
  padding: 0.3rem 0;
  background: linear-gradient(135deg, var(--voice), #c9871f);
  color: #1a1206;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.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; margin-top: auto; }
.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 */
.faq-list { display: flex; flex-direction: column; gap: 0.9rem; max-width: 44rem; margin-top: var(--space-4); }
.faq-list--wide { max-width: none; }
.faq-item { transition: opacity var(--dur-fast) var(--ease); }
.faq-item[hidden] { display: none; }
.faq-header { margin: 0; font: inherit; }
.faq-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 1.1rem 1.35rem; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 16px; color: var(--text); font: inherit; font-size: 1.0625rem; font-weight: 600; text-align: left; cursor: pointer; user-select: none; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.faq-trigger:hover { border-color: rgba(232, 168, 87, 0.5); }
.faq-trigger:focus-visible, .faq-item[data-state="open"] .faq-trigger { outline: none; border-color: var(--voice); box-shadow: 0 0 0 3px rgba(232, 168, 87, 0.22), 0 0 0 4px rgba(232, 168, 87, 0.55); background: linear-gradient(180deg, rgba(232, 168, 87, 0.08), transparent 80%), var(--surface-2); }
.faq-q { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.faq-q-icon { flex: none; width: 22px; height: 22px; color: var(--voice); }
.faq-chevron { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.faq-chevron svg { width: 16px; height: 16px; }
.faq-item:hover .faq-chevron { color: var(--voice); }
.faq-item[data-state="open"] .faq-chevron { transform: rotate(180deg); background: var(--voice); color: #1a1206; }
.faq-content[hidden] { display: none; }
.faq-answer-wrap { padding: 0.9rem 0 0.35rem 2.75rem; }
.faq-answer { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border-strong); border-radius: 16px; background: rgba(245, 243, 239, 0.04); }
.faq-answer-text { color: var(--muted); font-size: 0.9375rem; line-height: 1.7; }
.faq-answer-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--voice-dim); color: var(--voice); display: flex; align-items: center; justify-content: center; }
.faq-answer-icon svg { width: 18px; height: 18px; }
.faq-item[data-state="open"] .faq-answer { animation: l-faq-in var(--dur-med) var(--ease); }
@media (max-width: 639px) { .faq-answer-wrap { padding-left: 1rem; } }
@keyframes l-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Homepage-only: pairs the FAQ list with the ambient chatbot animation
   (see faq-chatbot.js) filling the empty space beside it -- the FAQ
   list itself keeps its own .l-faq styling/max-width unchanged. */
.l-faq-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.7fr); gap: var(--space-5); align-items: center; }
.l-faq-row { margin-top: var(--space-5); }
.l-faq-row .faq-list { margin-top: 0; max-width: none; gap: 1.25rem; }
.l-faq-row .faq-trigger { padding: 1.35rem 1.5rem; border-radius: 18px; line-height: 1.4; }
.l-faq-row .faq-trigger:focus-visible, .l-faq-row .faq-item[data-state="open"] .faq-trigger { box-shadow: 0 18px 40px -26px rgba(232, 168, 87, 0.45); }
.l-faq-row .faq-answer-wrap { padding: 0.75rem 0 0.25rem 0; }
.l-faq-row .faq-answer { padding: 1.35rem 1.5rem; gap: 1.25rem; align-items: center; }
.l-faq-row .faq-answer-text { font-size: 1rem; line-height: 1.75; }
.l-faq-visual { width: 100%; max-width: 360px; aspect-ratio: 952 / 784; justify-self: center; }

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


/* ============================================================ FINAL CTA */
.cta-section { padding: var(--space-5) var(--space-3) var(--space-6); }
.cta-card { position: relative; max-width: 64rem; margin: 0 auto; border: 1px solid var(--border-strong); border-radius: 24px; overflow: hidden; background: radial-gradient(ellipse 60% 120% at 100% 0%, rgba(232, 168, 87, 0.16), transparent 70%), var(--surface-2); filter: blur(12px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
.cta-card.is-visible { filter: none; }
.cta-inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); text-align: left; }
.cta-inner h2 { max-width: 26ch; font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.625rem, 3vw, 2.25rem); letter-spacing: -0.02em; line-height: 1.15; }
.cta-inner p { max-width: 40rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2); margin-top: var(--space-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 1.75rem; border-radius: 999px; font-size: 0.9375rem; font-weight: 600; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.btn-demo-pill { background: var(--voice); color: #1a1206; }
.btn-demo-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(232, 168, 87, 0.6); }
.btn-demo-pill .arrow { transition: transform var(--dur-fast) var(--ease); }
.btn-demo-pill:hover .arrow { transform: translateX(4px); }
.btn-ghost-outline { border: 1px solid var(--border-strong); color: var(--text); }
.btn-ghost-outline:hover { border-color: var(--voice); background: var(--voice-dim); }
@media (prefers-reduced-motion: reduce) { .cta-card { filter: none; } }

/* ============================================================ 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.6fr repeat(3, 1fr); gap: var(--space-4) var(--space-3); margin-bottom: var(--space-4); }
.l-footer__brand-logo { height: 36px; width: auto; display: block; margin-bottom: 1rem; }
.l-footer__tag { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; max-width: 20rem; }
.l-footer__social { display: flex; gap: 0.6rem; margin-top: var(--space-3); }
.l-footer__social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--text); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.l-footer__social a:hover { border-color: var(--voice); background: var(--voice-dim); }
.l-footer__social svg { width: 16px; height: 16px; }
.l-footer__col-title { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); margin-bottom: var(--space-2); }
.l-footer__col a { display: block; color: var(--muted); font-size: 0.9375rem; padding: 0.4rem 0; }
.l-footer__col a:hover { color: var(--text); }
.l-footer__col a.l-footer__more { color: var(--voice); font-weight: 600; margin-top: 0.15rem; }
.l-footer__col a.l-footer__more:hover { color: var(--voice); opacity: 0.85; }
.l-footer__col a.l-footer__contact { display: flex; align-items: center; gap: 0.75rem; }
.l-footer__contact svg { width: 16px; height: 16px; flex: none; color: var(--voice); }
.l-footer__legal { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.l-footer__legal 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-plan { flex-basis: calc(50% - var(--space-2) / 2); max-width: none; }
  .l-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .l-value-strip { grid-template-columns: repeat(2, 1fr); }
  .l-faq-row { grid-template-columns: 1fr; }
  .l-faq-visual { max-width: 240px; margin: 0 auto; }
  /* 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__signin { 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-plan { flex-basis: 100%; max-width: none; }
  .l-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .l-section { padding: var(--space-5) 0; }
  .l-value-strip { 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; }
}

/* ============================================================ BOOK A DEMO (v2) */
.bd-accent { color: var(--voice); }
.bd-hero .l-body { max-width: 52rem; }
.bd-hero__ctas { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }
.bd-section { padding: var(--space-6) 0; }
.bd-section--alt { background: var(--surface-2); }
.bd-head { text-align: center; max-width: 46rem; margin: 0 auto var(--space-4); }
.bd-head h2 { font-family: var(--font-heading); font-weight: 400; letter-spacing: -0.02em; font-size: clamp(1.75rem, 3.5vw, 2.75rem); margin-bottom: 0.75rem; }
.bd-head h3 { font-size: 1.0625rem; font-weight: 500; color: var(--voice); margin-bottom: 0.5rem; }
.bd-head p { color: var(--muted); line-height: 1.6; }

.bd-success-banner { text-align: center; max-width: 40rem; margin: 0 auto var(--space-4); border: 1px solid var(--action); background: var(--action-dim); border-radius: var(--radius-md); padding: var(--space-4); }
.bd-success-banner__tick { width: 52px; height: 52px; margin: 0 auto var(--space-2); border-radius: 50%; background: var(--action); color: #04120e; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; }
.bd-success-banner h2 { color: var(--action); font-size: 1.5rem; margin-bottom: 0.4rem; }
.bd-success-banner p { color: var(--muted); }
.bd-success-banner a { color: var(--voice); }

.bd-schedule-card { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 20px; padding: var(--space-4); }
.bd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.bd-step { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.bd-step:hover { transform: translateY(-4px); border-color: var(--voice); }
.bd-step__num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--voice); }
.bd-step__icon { width: 32px; height: 32px; color: var(--voice); }
.bd-step__t { font-size: 1.125rem; font-weight: 600; color: var(--text); }
.bd-step__d { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; flex: 1; }
.bd-tag { align-self: flex-start; font-size: 0.75rem; color: var(--voice); background: var(--voice-dim); border-radius: 999px; padding: 0.3rem 0.75rem; }
.bd-cta-row { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.bd-lg { padding: 1.05rem 2.25rem; font-size: 1.0625rem; cursor: pointer; }
.bd-email-link { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.bd-email-link:hover { color: var(--text); }

.bd-carousel { overflow: hidden; }
.bd-track { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(var(--space-4), calc((100vw - var(--max-w)) / 2 + var(--space-4))) var(--space-2); scrollbar-width: thin; }
.bd-card { flex: 0 0 min(340px, 80vw); scroll-snap-align: start; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: var(--space-3); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.bd-card:hover { border-color: var(--voice); transform: translateY(-4px); }
.bd-card__num { font-family: var(--font-heading); font-size: 2.5rem; color: var(--voice); opacity: 0.85; }
.bd-card__row { display: flex; gap: 0.75rem; align-items: flex-start; }
.bd-card__row p { color: var(--text); line-height: 1.55; }
.bd-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--voice-dim); color: var(--voice); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; margin-top: 2px; }

.bd-contact-card { display: grid; grid-template-columns: 1fr 1.1fr; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 20px; overflow: hidden; }
.bd-contact-left { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); border-right: 1px solid var(--border); }
.bd-contact-left h3, .bd-contact-right h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; margin-bottom: 0.5rem; }
.bd-contact-left > div > p { color: var(--muted); line-height: 1.6; }
.bd-reasons { display: flex; flex-direction: column; gap: var(--space-2); }
.bd-reason { display: flex; gap: 0.9rem; align-items: flex-start; }
.bd-reason__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--voice); }
.bd-reason__icon svg { width: 20px; height: 20px; }
.bd-reason .t { font-weight: 600; color: var(--text); }
.bd-reason .d { color: var(--muted); font-size: 0.875rem; line-height: 1.5; margin-top: 0.15rem; }
.bd-contact-right { padding: var(--space-4); }
.bd-contact-right form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }

.bd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.bd-field { display: flex; flex-direction: column; gap: 0.4rem; }
.bd-field label, .bd-group-label { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.bd-field input[type="text"], .bd-field input[type="email"], .bd-field input[type="tel"], .bd-field select, .bd-field textarea {
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.8rem 1rem; color: var(--text); font-family: inherit; font-size: 1rem; width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.bd-field textarea { resize: vertical; min-height: 6rem; }
.bd-field input:hover, .bd-field select:hover, .bd-field textarea:hover { border-color: rgba(245, 243, 239, 0.3); }
.bd-field input:focus, .bd-field select:focus, .bd-field textarea:focus { outline: none; border-color: var(--voice); box-shadow: 0 0 0 4px var(--voice-dim); }
.bd-field.has-error input, .bd-field.has-error textarea { border-color: #e8767a; }
.bd-err { color: #e8767a; font-size: 0.8125rem; }
.bd-err:empty { display: none; }
.bd-status { font-size: 0.875rem; color: var(--muted); }
.bd-status:empty { display: none; }
.bd-status.error, .bd-form-error { color: #e8767a; font-size: 0.875rem; }
.bd-form-error:empty { display: none; }
.bd-block { width: 100%; justify-content: center; cursor: pointer; }
.bd-block:disabled { opacity: 0.6; cursor: wait; }
.bd-faq .faq-list { margin-left: auto; margin-right: auto; }
.bd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* booking dialog */
.bd-modal { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: var(--space-2); opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast); }
.bd-modal.open { opacity: 1; visibility: visible; }
.bd-modal__card { position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; width: min(940px, 100%); max-height: calc(100vh - 2rem); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 20px; overflow: hidden; transform: translateY(14px) scale(0.98); transition: transform var(--dur-fast) var(--ease); }
.bd-modal.open .bd-modal__card { transform: none; }
.bd-modal__close { position: absolute; top: 0.75rem; right: 0.9rem; z-index: 2; width: 36px; height: 36px; border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--muted); }
.bd-modal__close:hover { color: var(--text); background: var(--border); }
.bd-modal__intro { padding: var(--space-4); background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.9rem; overflow-y: auto; }
.bd-modal__logo { height: 30px; width: auto; align-self: flex-start; }
.bd-modal__intro h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; }
.bd-meta { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--muted); font-size: 0.875rem; }
.bd-meta svg { width: 18px; height: 18px; flex: none; color: var(--voice); margin-top: 1px; }
.bd-meta[hidden] { display: none; }
.bd-modal__desc { color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.bd-modal__body { padding: var(--space-4); overflow-y: auto; }
.bd-modal__body h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; margin-bottom: var(--space-2); outline: none; }
.bd-modal__body section { display: flex; flex-direction: column; gap: var(--space-2); }
.bd-modal__body section[hidden] { display: none; }
.bd-modal__body form { display: flex; flex-direction: column; gap: var(--space-2); }
.bd-choice-list, .bd-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bd-choice-list { flex-direction: column; margin-top: 0.4rem; }
.bd-choice { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 400; color: var(--muted); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.bd-choice-list .bd-choice { border-radius: var(--radius-sm); padding: 0.85rem 1rem; font-size: 1rem; }
.bd-choice:hover { border-color: var(--voice); }
.bd-choice:has(input:checked) { border-color: var(--voice); background: var(--voice-dim); color: var(--text); }
.bd-choice input { accent-color: var(--voice); }
.bd-note { font-size: 0.8125rem; color: var(--muted-2); }
.bd-note a { color: var(--voice); }
.bd-back { align-self: flex-start; color: var(--muted); font-size: 0.875rem; padding: 0.25rem 0; }
.bd-back:hover { color: var(--text); }

.bd-cal-wrap { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.bd-cal-wrap.has-date { grid-template-columns: 1fr 1fr; }
.bd-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); font-weight: 600; }
.bd-cal__nav { width: 32px; height: 32px; border-radius: 50%; font-size: 1.25rem; color: var(--text); border: 1px solid var(--border-strong); }
.bd-cal__nav:hover:not(:disabled) { border-color: var(--voice); background: var(--voice-dim); }
.bd-cal__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.bd-cal__weekdays, .bd-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.bd-cal__weekdays { font-size: 0.75rem; color: var(--muted-2); margin-bottom: 4px; }
.bd-day { aspect-ratio: 1; border-radius: 50%; font-size: 0.875rem; color: var(--text); transition: background var(--dur-fast) var(--ease); }
.bd-day:hover:not(:disabled) { background: var(--voice-dim); }
.bd-day:disabled { color: var(--muted-2); opacity: 0.4; cursor: not-allowed; }
.bd-day.is-today { border: 1px solid var(--border-strong); }
.bd-day.is-selected { background: var(--voice); color: #1a1206; font-weight: 700; }
.bd-slots { display: flex; flex-direction: column; gap: 0.6rem; }
.bd-slots[hidden] { display: none; }
.bd-slots h4 { font-size: 0.9375rem; font-weight: 600; }
.bd-tz { font-size: 0.75rem; color: var(--muted-2); }
.bd-slot-list { display: flex; flex-direction: column; gap: 0.5rem; }
.bd-slot { border: 1px solid var(--voice); color: var(--voice); border-radius: var(--radius-sm); padding: 0.7rem; font-weight: 600; transition: background var(--dur-fast) var(--ease); }
.bd-slot:hover { background: var(--voice-dim); }
.bd-slot.is-selected { background: var(--voice); color: #1a1206; }
#bd-slots-next:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 900px) {
  .bd-steps, .bd-contact-card { grid-template-columns: 1fr; }
  .bd-contact-left { border-right: 0; border-bottom: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .bd-modal__card { grid-template-columns: 1fr; overflow-y: auto; }
  .bd-modal__intro { border-right: 0; border-bottom: 1px solid var(--border); }
  .bd-cal-wrap.has-date, .bd-grid { grid-template-columns: 1fr; }
  .bd-schedule-card { padding: var(--space-3); }
}

html { scroll-behavior: smooth; }
#question { scroll-margin-top: 4rem; }

/* ---- "Just have a question" upgrades */
.bd-head .l-eyebrow { margin-bottom: 0.75rem; }
.bd-contact-card { box-shadow: 0 40px 80px -50px rgba(232, 168, 87, 0.3); }
.bd-live { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--action); background: var(--action-dim); border-radius: 999px; padding: 0.35rem 0.8rem; margin-bottom: var(--space-2); }
.bd-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--action); animation: bd-pulse 1.8s ease-out infinite; }
@keyframes bd-pulse { 0% { box-shadow: 0 0 0 0 rgba(79, 209, 174, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(79, 209, 174, 0); } }
.bd-reason { padding: 0.5rem; margin: -0.5rem; border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease); }
.bd-reason:hover { background: var(--border); }
.bd-direct { margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.bd-direct__title { font-size: 0.8125rem; color: var(--muted-2); }
.bd-direct__row { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); font-size: 0.9375rem; width: fit-content; transition: color var(--dur-fast) var(--ease); }
.bd-direct__row svg { width: 18px; height: 18px; color: var(--voice); }
.bd-direct__row:hover { color: var(--voice); }
.bd-sub { color: var(--muted-2); font-size: 0.8125rem; }
.bd-req { color: var(--voice); }
.bd-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bd-chip { cursor: pointer; }
.bd-chip input { position: absolute; opacity: 0; pointer-events: none; }
.bd-chip span { display: inline-block; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.45rem 0.95rem; font-size: 0.8125rem; color: var(--muted); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.bd-chip:hover span { border-color: var(--voice); color: var(--text); }
.bd-chip input:checked + span { background: var(--voice); border-color: var(--voice); color: #1a1206; font-weight: 600; }
.bd-chip input:focus-visible + span { box-shadow: 0 0 0 4px var(--voice-dim); }

.bd-input { position: relative; display: flex; align-items: center; }
.bd-input input, .bd-input textarea { padding-right: 2.5rem !important; }
.bd-input--prefix input { padding-left: 4rem !important; }
.bd-input__prefix { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 0.9rem; border-right: 1px solid var(--border-strong); color: var(--muted); font-size: 0.9375rem; pointer-events: none; }
.bd-input__state { position: absolute; right: 0.85rem; width: 18px; height: 18px; border-radius: 50%; font-size: 0.7rem; display: none; align-items: center; justify-content: center; font-weight: 700; }
.bd-input.is-valid .bd-input__state { display: flex; background: var(--action-dim); color: var(--action); }
.bd-input.is-valid .bd-input__state::before { content: "\2713"; }
.bd-input.is-invalid .bd-input__state { display: flex; background: rgba(232, 118, 122, 0.16); color: #e8767a; }
.bd-input.is-invalid .bd-input__state::before { content: "!"; }
.bd-input.is-valid input, .bd-input.is-valid textarea { border-color: rgba(79, 209, 174, 0.5); }
.bd-input.is-invalid input, .bd-input.is-invalid textarea { border-color: #e8767a; }
.bd-input textarea { align-self: stretch; }
.bd-hint { font-size: 0.75rem; color: var(--muted-2); }
.bd-msg-foot { display: flex; justify-content: space-between; gap: 1rem; }
.bd-count { margin-left: auto; font-size: 0.75rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.bd-count.is-near { color: var(--voice); }
.bd-note--center { text-align: center; }
.bd-block.is-loading { position: relative; }
.bd-block.is-loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bd-spin 0.7s linear infinite; }
@keyframes bd-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .bd-direct { margin-top: 0; } }

/* ---- reason dropdown + clearly visible submit button */
.bd-select { position: relative; }
.bd-select::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--voice); border-bottom: 2px solid var(--voice); transform: rotate(45deg); pointer-events: none; transition: transform var(--dur-fast) var(--ease); }
.bd-select:focus-within::after { transform: rotate(225deg); margin-top: -2px; }
.bd-select select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem !important; cursor: pointer; }
.bd-select select option { background: var(--surface-2); color: var(--text); }
.landing button.bd-block {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; padding: 1rem 1.5rem; margin-top: 0.25rem;
  background: var(--voice); color: #1a1206; font-size: 1.0625rem; font-weight: 700;
  border-radius: 999px; box-shadow: 0 10px 30px -10px rgba(232, 168, 87, 0.6);
}
.landing button.bd-block:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(232, 168, 87, 0.8); filter: brightness(1.06); }
.landing button.bd-block:active:not(:disabled) { transform: translateY(0); }
.landing button.bd-block:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.landing button.bd-block:disabled { opacity: 0.7; cursor: wait; }

/* ---- reason items as small boxes */
.bd-reasons { gap: 0.75rem; }
.bd-reason { padding: 0.9rem 1rem; margin: 0; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md); align-items: center; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.bd-reason:hover { background: var(--bg); border-color: var(--voice); transform: translateY(-2px); }
.bd-reason__icon { background: var(--voice-dim); border-color: transparent; }

/* ============================================================ FAQ PAGE */
.fq-accent { color: var(--voice); }
.fq-hero .l-body { max-width: 50rem; }
.fq-hero__lead { font-family: var(--font-heading); font-size: clamp(1.125rem, 2.2vw, 1.5rem); color: var(--voice); margin: var(--space-3) auto 0; max-width: 40rem; }
.fq-hero__ctas { display: flex; justify-content: center; margin-top: var(--space-4); }
.fq-search { position: relative; max-width: 34rem; margin: var(--space-4) auto 0; }
.fq-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.fq-search input { width: 100%; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.95rem 2.75rem 0.95rem 3rem; color: var(--text); font-family: inherit; font-size: 1rem; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.fq-search input::placeholder { color: var(--muted-2); }
.fq-search input:focus { outline: none; border-color: var(--voice); box-shadow: 0 0 0 4px var(--voice-dim); }
.fq-search input::-webkit-search-cancel-button { display: none; }
.fq-search__clear { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; font-size: 1.25rem; line-height: 1; color: var(--muted); }
.fq-search__clear:hover { color: var(--text); background: var(--border); }
.fq-search__clear[hidden] { display: none; }

.fq-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.fq-nav { position: sticky; top: 6rem; }
.fq-nav__title { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: var(--space-2); }
.fq-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--border-strong); }
.fq-nav li[hidden] { display: none; }
.fq-nav a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); font-size: 0.9375rem; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.fq-nav a:hover { color: var(--text); background: var(--border); }
.fq-nav a.is-active { color: var(--voice); border-left-color: var(--voice); background: var(--voice-dim); font-weight: 600; }
.fq-nav__count { margin-left: auto; font-size: 0.75rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.fq-nav__dot { display: none; }

.fq-content { min-width: 0; }
.fq-cat { scroll-margin-top: 6rem; margin-bottom: var(--space-5); }
.fq-cat[hidden], .fq-content .faq-item[hidden] { display: none; }
.fq-cat__title { display: flex; align-items: baseline; gap: 0.9rem; font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.01em; margin-bottom: var(--space-2); }
.fq-cat__num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--voice); }
.fq-content .faq-list { max-width: none; margin-top: 0; }
.fq-empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; color: var(--muted); }
.fq-empty a { color: var(--voice); text-decoration: underline; text-underline-offset: 3px; }

.fq-ask__card { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-4); align-items: center; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 20px; padding: var(--space-5) var(--space-4); box-shadow: 0 40px 80px -50px rgba(232, 168, 87, 0.35); scroll-margin-top: 6rem; }
.fq-ask { scroll-margin-top: 6rem; }
.fq-ask__text h2 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.75rem, 3.5vw, 2.5rem); letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.fq-ask__text p { color: var(--muted); line-height: 1.6; }
.fq-ask__form { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.fq-ask__form input[type="email"] { flex: 1 1 14rem; min-width: 0; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.95rem 1.25rem; color: var(--text); font-family: inherit; font-size: 1rem; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.fq-ask__form input[type="email"]:focus { outline: none; border-color: var(--voice); box-shadow: 0 0 0 4px var(--voice-dim); }
.fq-ask__form input.is-invalid { border-color: #e8767a; }
.landing .fq-ask__form button { background: var(--voice); color: #1a1206; font-weight: 700; cursor: pointer; }
.fq-ask__err { flex-basis: 100%; color: #e8767a; font-size: 0.8125rem; }
.fq-ask__err:empty { display: none; }
.fq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 900px) {
  .fq-body { grid-template-columns: 1fr; gap: var(--space-3); }
  .fq-nav { position: static; }
  .fq-nav ul { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; border-left: 0; }
  .fq-nav a { margin: 0; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.8125rem; }
  .fq-nav a.is-active { border-color: var(--voice); }
  .fq-nav__count { display: none; }
  .fq-ask__card { grid-template-columns: 1fr; padding: var(--space-4) var(--space-3); }
}

/* ---- blog */
.bl-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-3); }
.bl-search { display: flex; align-items: center; gap: 0.6rem; min-width: min(320px, 100%); padding: 0.6rem 1rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--muted); }
.bl-search:focus-within { border-color: var(--voice); }
.bl-search input { flex: 1; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 0.9375rem; }
.bl-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bl-pill { padding: 0.45rem 1rem; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.875rem; color: var(--muted); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.bl-pill:hover { color: var(--text); border-color: var(--voice); }
.bl-pill.is-active { color: var(--voice); border-color: var(--voice); background: var(--voice-dim); font-weight: 600; }
.bl-featured-wrap { padding-bottom: var(--space-3); }
.bl-featured { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.bl-featured:hover, .bl-card:hover { border-color: var(--voice); transform: translateY(-4px); }
.bl-featured__cover, .bl-card__cover { position: relative; display: block; background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--tint) 45%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--tint) 18%, var(--bg)), var(--bg)); }
.bl-featured__cover { min-height: 280px; }
.bl-card__cover { aspect-ratio: 16 / 9; }
.bl-card__cat { position: absolute; left: 1rem; top: 1rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(10, 10, 11, 0.7); color: var(--text); font-family: var(--font-mono); font-size: 0.75rem; }
.bl-featured__body, .bl-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--space-3); }
.bl-featured__body { justify-content: center; padding: var(--space-4); }
.bl-featured__title { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -0.02em; line-height: 1.2; }
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.bl-card { display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.bl-card__meta { font-size: 0.8125rem; color: var(--muted-2); }
.bl-card__title { font-family: var(--font-heading); font-weight: 500; font-size: 1.1875rem; letter-spacing: -0.01em; line-height: 1.3; }
.bl-card__excerpt { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; flex: 1; }
.bl-card__more { margin-top: 0.4rem; color: var(--voice); font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }
.bl-empty { text-align: center; padding: var(--space-5) 0; }
.bl-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.bl-pager__count { font-size: 0.875rem; color: var(--muted-2); }
.bl-article-head { max-width: 760px; }
.bl-back { display: inline-block; margin-bottom: var(--space-2); font-size: 0.875rem; color: var(--muted); }
.bl-article { max-width: 760px; padding-bottom: var(--space-5); }
.bl-article h2 { font-family: var(--font-heading); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; margin: var(--space-4) 0 var(--space-2); }
.bl-article h3 { font-family: var(--font-heading); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; margin: var(--space-3) 0 var(--space-2); }
.bl-article p, .bl-article li { color: var(--muted); font-size: 1.0625rem; line-height: 1.75; }
.bl-article p { margin-bottom: var(--space-2); }
.bl-article a { color: var(--voice); text-decoration: underline; }
.bl-article ul, .bl-article ol { padding-left: 1.25rem; margin-bottom: var(--space-2); }
.bl-article__cover { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.bl-article-author { max-width: 760px; padding-bottom: var(--space-4); border-top: 1px solid var(--border-strong); padding-top: var(--space-3); }
.bl-article-author__name { font-weight: 600; margin-bottom: 0.3rem; }
.bl-article-author__bio { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
@media (max-width: 860px) {
  .bl-featured { grid-template-columns: 1fr; }
  .bl-featured__cover { min-height: 180px; }
  .bl-featured__body { padding: var(--space-3); }
}

/* ---- workflows page */
.wf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.wf-overview { padding-bottom: var(--space-4); }
.wf-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); }
.wf-chip { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.wf-chip:hover { border-color: var(--voice); transform: translateY(-4px); box-shadow: 0 20px 44px -26px var(--voice-dim); }
.wf-chip__num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--voice-dim); color: var(--voice); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; }
.wf-chip__name { font-family: var(--font-heading); font-weight: 500; font-size: 1.0625rem; }
.wf-chip__steps { font-size: 0.8125rem; color: var(--muted-2); }
.wf-decide { padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); text-align: center; }
.wf-decide__title { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: var(--space-2); }
.wf-decide__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; }
.wf-decide__step { padding: 0.5rem 1rem; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.9375rem; }
.wf-decide__step--accent { border-color: var(--voice); color: var(--voice); background: var(--voice-dim); font-weight: 600; }
.wf-decide__arrow { color: var(--muted-2); }
.wf-section { scroll-margin-top: 6rem; }
.wf-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
.wf-split--flip .wf-copy { order: 2; }
.wf-badge { display: inline-block; margin-bottom: var(--space-2); padding: 0.25rem 0.8rem; border: 1px solid var(--voice); border-radius: 999px; color: var(--voice); background: var(--voice-dim); font-family: var(--font-mono); font-size: 0.75rem; }
.wf-points { list-style: none; padding: 0; margin: var(--space-3) 0; display: flex; flex-direction: column; gap: 0.75rem; }
.wf-points li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.wf-points svg { flex: none; margin-top: 0.15rem; color: var(--action); }
.wf-panel { padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 30px 60px -40px var(--voice-dim); }
.wf-panel__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: var(--space-2); }
@media (max-width: 860px) {
  .wf-split { grid-template-columns: 1fr; gap: var(--space-3); }
  .wf-split--flip .wf-copy { order: 0; }
  .wf-decide__arrow { display: none; }
}

/* ---------- Pricing page: hero / plan cards / compare modal / vs / FAQ / CTA ---------- */
.pr-accent { color: var(--voice); }
.pr-hero .l-body { max-width: 50rem; }
.pr-hero__ctas { display: flex; justify-content: center; margin-top: var(--space-4); }
.pr-compare-wrap { display: flex; justify-content: center; margin: var(--space-4) 0; }
.pr-compare-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.1rem; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.pr-compare-btn svg { color: var(--action); }
.pr-compare-btn:hover { border-color: var(--voice); background: var(--voice-dim); }
.pr-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: 0 auto; padding-top: 0.75rem; }
.pr-grid--1 { max-width: 28rem; }
.pr-grid--2 { max-width: 48rem; }
@media (min-width: 640px) { .pr-grid:not(.pr-grid--1) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pr-grid.pr-grid--3 { grid-template-columns: repeat(3, 1fr); } .pr-grid.pr-grid--4, .pr-grid.pr-grid--5, .pr-grid.pr-grid--6 { grid-template-columns: repeat(4, 1fr); } .pr-plan { padding: 1.75rem 1.4rem; } }
.pr-plan { position: relative; display: flex; flex-direction: column; padding: 1.75rem; border: 1px solid var(--border-strong); border-radius: 24px; background: var(--surface-2); transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity 0.8s var(--ease); }
.pr-plan:hover { transform: translateY(-4px); border-color: rgba(232, 168, 87, 0.5); }
.pr-plan--featured { border-color: var(--voice); background: linear-gradient(180deg, var(--voice-dim), transparent 60%), var(--surface-2); box-shadow: 0 18px 44px -24px rgba(232, 168, 87, 0.55); }
.pr-plan__badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); padding: 0.25rem 0.8rem; border-radius: 999px; background: var(--voice); color: #1a1206; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.pr-plan__badge--inline { position: static; transform: none; display: inline-block; margin-top: 0.4rem; font-size: 0.65rem; padding: 0.15rem 0.6rem; }
.pr-plan__name { font-size: 1.25rem; font-weight: 700; }
.pr-plan__price { margin-top: 1rem; }
.pr-plan__amount { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.pr-plan__per { font-size: 0.875rem; color: var(--muted); }
.pr-plan__tax { margin-top: 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.pr-plan__features { display: flex; flex-direction: column; flex: 1; gap: 0.65rem; margin: 1.25rem 0 1.5rem; font-size: 0.875rem; color: var(--muted); }
.pr-plan__features li { display: flex; align-items: flex-start; gap: 0.5rem; }
.pr-plan__features li::before { content: "\2713"; flex: none; color: var(--voice); font-weight: 700; }
.pr-plan .l-cta { width: 100%; justify-content: center; }
.pr-foot { margin-top: var(--space-4); text-align: center; font-size: 0.875rem; color: var(--muted); }
.pr-foot a { color: var(--voice); font-weight: 600; }

.pr-modal { margin: auto; padding: 0; border: 1px solid var(--border-strong); border-radius: 24px; width: min(1000px, 94vw); max-height: 90vh; overflow: hidden; background: #121214; color: var(--text); }
.pr-modal::backdrop { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(3px); }
.pr-modal__box { display: flex; flex-direction: column; max-height: 90vh; }
.pr-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.pr-modal__head h2 { font-size: 1.25rem; font-weight: 700; }
.pr-modal__head p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted); }
.pr-modal__close { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; background: var(--border); color: var(--text); font-size: 1.25rem; cursor: pointer; }
.pr-modal__close:hover { background: var(--border-strong); }
.pr-modal__scroll { overflow: auto; }
.pr-modal__foot { padding: 1rem 1.5rem; border-top: 1px solid var(--border); font-size: 0.875rem; color: var(--muted); }
.pr-modal__foot a { color: var(--voice); font-weight: 600; }
.pr-table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }
.pr-table thead { position: sticky; top: 0; background: #121214; z-index: 1; }
.pr-table th, .pr-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
.pr-table thead th { text-align: center; padding-top: 1rem; padding-bottom: 1rem; }
.pr-table thead th:first-child, .pr-table tbody th { text-align: left; padding-left: 1.5rem; font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.pr-table th.is-hl { background: var(--voice-dim); }
.pr-table__plan { display: block; font-size: 1rem; font-weight: 700; color: var(--text); }
.pr-table__price { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted); font-weight: 400; }
.pr-table__price b { font-size: 1.125rem; color: var(--text); }
.pr-table td { text-align: center; }
.pr-val { font-size: 0.875rem; font-weight: 600; }
.pr-yes { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--action-dim); color: var(--action); font-size: 0.8rem; font-weight: 700; }
.pr-no { color: var(--muted-2); }

.pr-vs { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 1024px) { .pr-vs { grid-template-columns: 1fr 1fr; } }
.pr-vs__chip { display: none; position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--text); color: #000; font-size: 0.875rem; font-weight: 700; }
@media (min-width: 1024px) { .pr-vs__chip { display: flex; } }
.pr-vs__card { position: relative; padding: 1.75rem; border-radius: 24px; background: var(--surface-2); border: 1px solid rgba(239, 100, 100, 0.35); }
.pr-vs__card--new { border: 2px solid var(--voice); box-shadow: 0 18px 44px -24px rgba(232, 168, 87, 0.55); }
.pr-vs__card h3 { margin-top: 0.75rem; font-size: 1.25rem; font-weight: 700; }
.pr-vs__sub { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted); }
.pr-vs__card ul { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.25rem 0; font-size: 0.875rem; }
.pr-vs__card li { display: flex; align-items: flex-start; gap: 0.6rem; }
.pr-vs__tag { display: inline-block; padding: 0.2rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.pr-vs__tag--old { background: rgba(239, 100, 100, 0.14); color: #ef6464; }
.pr-vs__tag--new { background: var(--action-dim); color: var(--action); }
.pr-vs__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: 0.7rem; font-weight: 700; }
.pr-vs__ico--old { background: rgba(239, 100, 100, 0.16); color: #ef6464; }
.pr-vs__ico--new { background: var(--action-dim); color: var(--action); }
.pr-vs__verdict { font-size: 0.875rem; font-weight: 600; color: #ef6464; }
.pr-vs__rec { position: absolute; top: -0.75rem; right: 1.5rem; padding: 0.25rem 0.8rem; border-radius: 999px; background: var(--voice); color: #1a1206; font-size: 0.75rem; font-weight: 700; }
.pr-faq .faq-list { margin-left: auto; margin-right: auto; }

/* Pricing hero fills the first viewport */
.pr-hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: var(--space-6); padding-bottom: var(--space-5); }

/* Compare Plans button: clearly a button, with room to breathe */
.pr-compare-wrap { margin: var(--space-4) 0 var(--space-5); }
.pr-compare-wrap .pr-compare-btn { gap: 0.65rem; padding: 0.9rem 1.75rem; border: 1.5px solid var(--voice); border-radius: 999px; background: var(--voice-dim); color: var(--text); font-size: 1rem; font-weight: 600; box-shadow: 0 10px 30px -14px rgba(232, 168, 87, 0.6); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.pr-compare-wrap .pr-compare-btn svg { width: 20px; height: 20px; color: var(--voice); transition: color var(--dur-fast) var(--ease); }
.pr-compare-wrap .pr-compare-btn::after { content: "\2192"; transition: transform var(--dur-fast) var(--ease); }
.pr-compare-wrap .pr-compare-btn:hover, .pr-compare-wrap .pr-compare-btn:focus-visible { background: var(--voice); color: #1a1206; transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(232, 168, 87, 0.8); outline: none; }
.pr-compare-wrap .pr-compare-btn:hover svg, .pr-compare-wrap .pr-compare-btn:focus-visible svg { color: #1a1206; }
.pr-compare-wrap .pr-compare-btn:hover::after { transform: translateX(3px); }

/* ---------- Blogs list: heading, 3-up card grid, "View all blogs" ---------- */
.bl-section { padding-top: calc(var(--space-6) + var(--space-3)); padding-bottom: var(--space-6); }
.bl-head { text-align: center; max-width: 46rem; margin: 0 auto var(--space-5); }
.bl-head p { margin-top: var(--space-2); color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }
.bl-latest { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.bl-latest .bl-extra { display: none; }
.bl-latest.is-open .bl-extra { display: flex; }
.bl-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem 0.75rem 1.5rem; background: var(--surface-2); }
.bl-card:hover { border-color: rgba(232, 168, 87, 0.5); transform: translateY(-4px); }
.bl-cover { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 10; padding: 1.25rem; overflow: hidden; border-radius: calc(var(--radius-md) - 4px); background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--tint) 45%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--tint) 20%, #0b0b0c), #0b0b0c); }
.bl-cover-text { position: relative; z-index: 1; font-family: var(--font-heading); font-size: 1.1875rem; font-weight: 500; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bl-cover-art { position: absolute; right: -1.25rem; top: -1.25rem; width: 9rem; height: 9rem; color: var(--tint); opacity: 0.22; }
.bl-meta { display: flex; justify-content: space-between; gap: 1rem; padding: 0 0.75rem; font-size: 0.8125rem; color: var(--muted-2); }
.bl-title { padding: 0 0.75rem; font-family: var(--font-heading); font-weight: 500; font-size: 1.1875rem; letter-spacing: -0.01em; line-height: 1.3; }
.bl-title a:hover { color: var(--voice); }
.bl-excerpt { padding: 0 0.75rem; flex: 1; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-read { align-self: flex-start; margin: 0.25rem 0.75rem 0; color: var(--voice); font-size: 0.875rem; font-weight: 600; }
.bl-read::after { content: " \2192"; display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.bl-read:hover::after { transform: translateX(3px); }
.bl-more-wrap { display: flex; justify-content: center; margin-top: var(--space-5); }
.bl-more { padding: 0.9rem 2rem; border: 1.5px solid var(--voice); border-radius: 999px; background: var(--voice-dim); color: var(--text); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.bl-more:hover, .bl-more:focus-visible { background: var(--voice); color: #1a1206; transform: translateY(-2px); outline: none; }
.bl-more-wrap[hidden] { display: none; }
@media (max-width: 1023px) { .bl-latest { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .bl-latest { grid-template-columns: 1fr; } }