/*
 * Design tokens — the shared half of this block is contracted with the Smartox
 * dashboard (see the platform repo's docs/design/tokens.md). Before changing any
 * value under "Shared", reconcile it against that doc: the two projects deploy
 * separately and have no common build, so this file and the dashboard's
 * globals.css are kept in step by hand.
 *
 * Names below mirror the dashboard's token names so the two :root blocks diff
 * line by line. The legacy aliases at the bottom keep this stylesheet's existing
 * 5.7k lines working unchanged.
 */
:root {
  /* ---- Shared: palette (identical in both projects) ---- */
  --ink: #17172e;
  --muted: #6c6c86;
  --canvas: #f7f7fc;
  --surface: #ffffff;
  --surface-2: #f1effa;
  --line: #e9e7f3;
  --brand: #7452f7;
  --brand-bright: #9a80ff;
  --accent: #eee9ff;      /* soft brand tint — dashboard calls this `accent` */
  --accent-ink: #5f3ee4;  /* brand-dark: the readable violet for text on tint */
  --cyan: #0db5e8;
  --cyan-ink: #0b7c9c;    /* raw cyan is 2.39:1 on white — text uses this */
  /* Status set, aligned with the dashboard's. `success` was #16a164 here and
     #16b364 there — one digit apart and invisible, but it is the sort of drift
     the contract exists to stop. The `-ink` halves are darkened variants,
     because the raw hue is too light for text on its own tint. */
  --success: #16b364;
  --success-ink: #067648;
  --warning: #f59e0b;
  --warning-ink: #b54708;
  --danger: #ef4444;
  /* Tinted status surfaces. The dashboard mixes these on the fly with
     `bg-<token>/15`; plain CSS cannot, so the three tints are named here and
     must be kept in step with that recipe. */
  --success-soft: #e9f8f0;
  --warning-soft: #fff3d6;
  --danger-soft: #fdeceb;

  /* Two borders sat between `line` and nothing at all, hand-written twenty-odd
     times each at slightly different values: the darker edge a surface takes on
     hover, and the violet-tinted edge used on brand-tinted surfaces. */
  /* Body copy sits between `ink` and `muted` — headings are ink, secondary text
     is muted, and the paragraphs in between were written at a dozen slightly
     different greys. The dashboard has no equivalent because its prose is
     short enough to be `ink` or `muted` outright. */
  --body: #55556e;

  --line-strong: #ded8f4;
  --accent-line: #ddd4ff;
  /* The dark stack the industries section is built on. `navy` is its ground;
     the two above it are the glass cards and their borders. The dashboard's
     constant-dark pair (`night`/`navy`) is neutral where these are violet, so
     they are this project's own — recorded, not shared. */
  --navy: #111226;
  --navy-2: #252635;
  --navy-3: #303047;

  /* ---- Shared: industry tones ----
     One tone per industry, carried from this page's #industries cards into the
     dashboard's onboarding picker and agent templates. Decorative only — none
     clears AA at text size on light, so never set label text in a tone. */
  --tone-1: #a68cff;
  --tone-2: #52d5f5;
  --tone-3: #4fd6a0;
  --tone-4: #ffb964;

  /* ---- Shared: radius ladder ----
     The dashboard anchors on 10px and this page on 28px; both are rungs of the
     same ladder. New work on either side picks a rung, never a raw pixel value.
     The two large rungs are marketing-scale and stay unused in the dashboard
     outside its hero surfaces. */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;   /* dashboard base */
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-3xl: 24px;
  --r-hero: 28px; /* marketing base */

  /* ---- This project only: marketing-scale depth and layout ---- */
  --shadow-sm: 0 12px 34px rgba(40, 32, 84, 0.08);
  --shadow-lg: 0 32px 80px rgba(39, 28, 92, 0.15);
  --container: 1180px;

  /* ---- Legacy aliases ----
     Pre-contract colour names still referenced throughout this file. The
     `--radius-*` aliases that sat here are gone: every rule now picks a rung
     from the ladder above. */
  --brand-dark: var(--accent-ink);
  --brand-soft: var(--accent);
}

@font-face {
  font-family: "Phosphor";
  src: url("assets/icons/Phosphor.woff2") format("woff2");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Phosphor-Fill";
  src: url("assets/icons/Phosphor-Fill.woff2") format("woff2");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}

.ph,
.ph-fill {
  speak: never;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}

.ph {
  font-family: "Phosphor" !important;
}

.ph-fill {
  font-family: "Phosphor-Fill" !important;
}

.ph-arrow-right::before { content: "\e06c"; }
.ph-arrow-up-right::before { content: "\e092"; }
.ph-books::before { content: "\e758"; }
.ph-broadcast::before { content: "\e0f2"; }
.ph-buildings::before { content: "\e102"; }
.ph-chart-line-up::before { content: "\e156"; }
.ph-chats-circle::before { content: "\e17e"; }
.ph-clock-countdown::before { content: "\ed2c"; }
.ph-dots-three::before { content: "\e1fe"; }
.ph-eye::before { content: "\e220"; }
.ph-file-magnifying-glass::before { content: "\e238"; }
.ph-first-aid-kit::before { content: "\e570"; }
.ph-graduation-cap::before { content: "\e62c"; }
.ph-list::before { content: "\e2f0"; }
.ph-pause::before { content: "\e39e"; }
.ph-phone::before { content: "\e3b8"; }
.ph-phone-call::before { content: "\e3ba"; }
.ph-phone-incoming::before { content: "\e3be"; }
.ph-phone-list::before { content: "\e3cc"; }
.ph-phone-x::before { content: "\e3c4"; }
.ph-play-circle::before { content: "\e3d2"; }
.ph-plus::before { content: "\e3d4"; }
.ph-sliders-horizontal::before { content: "\e434"; }
.ph-squares-four::before { content: "\e464"; }
.ph-storefront::before { content: "\e470"; }
.ph-translate::before { content: "\e4a2"; }
.ph-user-sound::before { content: "\eca8"; }
.ph-users-three::before { content: "\e68e"; }
.ph-waveform::before { content: "\e802"; }
.ph-waves::before { content: "\e6de"; }
.ph-x::before { content: "\e4f6"; }
.ph-fill.ph-battery-full::before { content: "\e0c0"; }
.ph-fill.ph-book-open-text::before { content: "\e8f2"; }
.ph-fill.ph-check-circle::before { content: "\e184"; }
.ph-fill.ph-file-text::before { content: "\e23a"; }
.ph-fill.ph-globe::before { content: "\e288"; }
.ph-fill.ph-lock-key::before { content: "\e2fe"; }
.ph-fill.ph-note::before { content: "\e348"; }
.ph-fill.ph-phone-incoming::before { content: "\e3be"; }
.ph-fill.ph-play::before { content: "\e3d0"; }
.ph-fill.ph-sparkle::before { content: "\e6a2"; }
.ph-fill.ph-star::before { content: "\e46a"; }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 98px;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--ink);
  font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

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

p,
h1,
h2,
h3 {
  margin-top: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  border-radius: var(--r-md);
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

.section {
  padding: 112px 0;
}

.section-compact {
  padding: 54px 0;
}

/* ---- Pill geometry ----
   Every rounded chip on this page — the hero eyebrow, a status chip, a plan's
   tier name, a connection label, an agent's role — is the dashboard's single
   `Badge` component wearing different names. There were six recipes here,
   disagreeing on padding (8/13, 7/11, 6/13, 13/16), size (12/13/14px) and
   weight (600/700), so the same idea looked different depending where you met
   it.

   Geometry is settled once, below. Each selector keeps only its *tone* —
   background, colour, border — which is the one thing that genuinely differs,
   and which mirrors the dashboard's `bg-<token>/15` + `text-<token>-ink` rule. */
.eyebrow-pill,
.status-chip,
.agent-role,
.connection-label,
.pricing-name,
.agent-tags span,
.connection-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  white-space: nowrap;
}

/* ---- Focus ----
   There were four focus rules on the whole site, three of them on one component.
   Everything else fell back to the browser default, which several resets here
   had already suppressed — so most of the page could be tabbed through with no
   visible focus at all.

   Matches the dashboard's `focus-visible:ring-[3px] ring-brand/30`: a 3px brand
   ring at 30%, offset so it reads as a halo rather than a border change. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 30%, transparent);
  outline-offset: 2px;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.scrolled {
  border-color: var(--line);
  box-shadow: 0 8px 30px rgba(23, 23, 46, 0.05);
}

.header-inner {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand img {
  width: 168px;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.desktop-nav a,
.text-link {
  position: relative;
  color: var(--body);
  font-size: 16px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.desktop-nav a:hover,
.text-link:hover {
  color: var(--ink);
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
}

.header-actions,
.hero-actions,
.hero-proof {
  display: flex;
  align-items: center;
}

.header-actions {
  gap: 18px;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--brand);
  border-radius: var(--r-xl);
  background: var(--brand);
  box-shadow: 0 12px 30px rgba(116, 82, 247, 0.22);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  padding: 0 23px;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  background: var(--brand-dark);
  box-shadow: 0 16px 36px rgba(116, 82, 247, 0.3);
  transform: translateY(-2px);
}

.button-small {
  min-height: 44px;
  border-radius: var(--r-xl);
  padding-inline: 18px;
  font-size: 16px;
}

.button-secondary {
  border-color: var(--line);
  background: #fff;
  box-shadow: none;
  color: var(--ink);
}

.button-secondary:hover {
  border-color: #cfc8ee;
  background: var(--canvas);
  box-shadow: 0 12px 28px rgba(31, 25, 65, 0.08);
}

.button-light {
  border-color: #fff;
  background: #fff;
  box-shadow: none;
  color: var(--brand-dark);
}

.button-light:hover {
  background: var(--canvas);
  box-shadow: 0 12px 34px rgba(18, 12, 46, 0.2);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 24px;
}

.mobile-nav {
  display: none;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 790px;
  padding-top: 176px;
  background:
    radial-gradient(circle at 82% 26%, rgba(116, 82, 247, 0.14), transparent 27%),
    radial-gradient(circle at 60% 92%, rgba(13, 181, 232, 0.09), transparent 26%),
    #fff;
}

.hero::before {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: linear-gradient(rgba(116, 82, 247, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 82, 247, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(3px);
  pointer-events: none;
}

.hero-glow-one {
  top: 130px;
  right: -180px;
  width: 460px;
  height: 460px;
  background: rgba(116, 82, 247, 0.07);
}

.hero-glow-two {
  bottom: 20px;
  left: 42%;
  width: 260px;
  height: 260px;
  background: rgba(13, 181, 232, 0.06);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(470px, 0.92fr);
  gap: 78px;
}

.eyebrow-pill,
/* Contracted with the dashboard's EYEBROW recipe (components/ui/typography.ts).
   The tracking and the transform are the shared half; the size and weight are
   this page's marketing density. */
.eyebrow {
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.eyebrow-pill {
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--accent) 55%, #fff);
  text-transform: none;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 5px rgba(22, 161, 100, 0.1);
}

.hero h1 {
  max-width: 690px;
  margin: 24px 0;
  font-size: clamp(3.6rem, 5.4vw, 5.65rem);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 0.96;
}

.hero h1 span {
  color: var(--brand);
}

.hero-lede {
  max-width: 620px;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.62;
}

.hero-actions {
  flex-wrap: wrap;
  gap: 12px;
}

.hero-proof {
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
  color: #5f5f78;
  font-size: 14px;
}

.hero-proof div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-proof i {
  color: var(--success);
  font-size: 18px;
}

.hero-visual {
  position: relative;
  min-height: 510px;
}

.call-orbit {
  position: absolute;
  border: 1px solid rgba(116, 82, 247, 0.13);
  border-radius: 50%;
}

.orbit-one {
  inset: 1% 3% 2% 3%;
}

.orbit-two {
  inset: 10% 11% 10% 11%;
}

.hero-call-card {
  position: absolute;
  z-index: 3;
  top: 48px;
  right: 40px;
  left: 24px;
  overflow: hidden;
  border: 1px solid rgba(116, 82, 247, 0.15);
  border-radius: var(--r-hero);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-lg);
  padding: 25px;
  backdrop-filter: blur(18px);
}

.call-card-topline,
.caller-row,
.assistant-row,
.knowledge-match {
  display: flex;
  align-items: center;
}

.call-card-topline {
  justify-content: space-between;
  margin-bottom: 22px;
}

.status-chip {
  background: var(--success-soft);
  color: var(--success-ink);
}

.status-chip span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 1.8s ease-in-out infinite;
}

.call-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.caller-row {
  gap: 14px;
  padding-bottom: 18px;
}

.caller-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--r-xl);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 22px;
}

.caller-row strong,
.caller-row span,
.assistant-row strong,
.assistant-row .label {
  display: block;
}

.caller-row strong,
.assistant-row strong {
  font-size: 16px;
}

.caller-row span,
.assistant-row .label {
  color: var(--muted);
  font-size: 14px;
}

.assistant-row {
  gap: 13px;
  border-radius: var(--r-2xl);
  background: var(--canvas);
  padding: 14px;
}

.assistant-row img {
  width: 40px;
  height: 52px;
  border-radius: var(--r-xl);
  object-fit: cover;
}

.sound-wave {
  display: flex;
  height: 30px;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}

.sound-wave span,
.mini-wave span,
.large-wave span {
  width: 3px;
  border-radius: 99px;
  background: var(--brand);
  animation: waveform 1.2s ease-in-out infinite;
}

.sound-wave span:nth-child(1),
.sound-wave span:nth-child(5) { height: 9px; }
.sound-wave span:nth-child(2),
.sound-wave span:nth-child(4) { height: 18px; animation-delay: 0.14s; }
.sound-wave span:nth-child(3) { height: 27px; animation-delay: 0.28s; }

.conversation {
  display: grid;
  gap: 9px;
  margin: 20px 0;
}

.conversation p {
  max-width: 85%;
  margin: 0;
  border-radius: var(--r-xl);
  font-size: 14px;
  padding: 10px 13px;
}

.customer-line {
  background: var(--surface-2);
  color: var(--body);
}

.agent-line {
  justify-self: end;
  background: var(--brand);
  color: #fff;
}

.knowledge-match {
  gap: 8px;
  border-top: 1px solid var(--line);
  color: var(--body);
  font-size: 14px;
  padding-top: 17px;
}

.knowledge-match i {
  color: var(--brand);
}

.floating-note {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--muted);
  font-size: 12px;
  padding: 11px 14px;
}

.floating-note i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 16px;
}

.floating-note strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.note-one {
  top: 4px;
  right: -20px;
}

.note-two {
  bottom: 18px;
  left: -15px;
}

.outcomes {
  border-block: 1px solid var(--surface-2);
  background: #fff;
  padding-block: 96px;
}

.outcomes > .container {
  width: min(calc(100% - 64px), 1440px);
}

.trust-label {
  margin-bottom: 38px;
  color: var(--brand-dark);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.outcome-card {
  display: flex;
  min-height: 410px;
  flex-direction: column;
  border: 1px solid transparent;
  border-radius: 36px;
  background: var(--accent-line);
  color: var(--navy-2);
  padding: 42px 36px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.outcome-card:nth-child(2) {
  background: #5536dc;
  color: #fff;
}

.outcome-card:nth-child(3) {
  background: #3b3947;
  color: #fff;
}

.outcome-card:nth-child(4) {
  background: var(--accent);
  color: var(--navy-2);
}

.outcome-card:hover {
  border-color: rgba(255, 255, 255, 0.58);
  box-shadow: 0 24px 54px rgba(42, 31, 91, 0.18);
  transform: translateY(-8px);
}

.outcome-pill {
  align-self: flex-start;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 13px 16px;
}

.outcome-card strong {
  display: block;
  max-width: 260px;
  margin-top: 54px;
  color: inherit;
  font-size: clamp(2.2rem, 3vw, 3.25rem);
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.outcome-card p {
  max-width: 280px;
  margin: auto 0 0;
  color: rgba(39, 34, 57, 0.76);
  font-size: 18px;
  line-height: 1.48;
}

.outcome-card:nth-child(2) p,
.outcome-card:nth-child(3) p {
  color: rgba(255, 255, 255, 0.82);
}

.section-heading {
  max-width: 700px;
  margin-bottom: 50px;
}

.section-heading.centered {
  margin-inline: auto;
  text-align: center;
}

.section-heading h2,
.phone-demo-copy h2,
.cta-copy h2 {
  margin: 13px 0 18px;
  font-size: clamp(2.35rem, 4vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.section-heading p,
.phone-demo-copy > p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 18px;
}

.steps-section {
  background: #fff;
}

.steps-section > .container {
  width: min(calc(100% - 64px), 1440px);
}

.feature-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: var(--r-xl);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 24px;
}

.journey-shell {
  margin-top: 54px;
  border-radius: 42px;
  background: var(--surface-2);
  padding: 82px 34px;
}

.journey-track {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-step {
  position: relative;
  min-width: 0;
}

.journey-step-low {
  transform: translateY(44px);
}

.journey-step-high {
  transform: translateY(-44px);
}

.journey-card {
  display: flex;
  min-height: 438px;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-hero);
  background: #fff;
  box-shadow: 0 22px 46px rgba(39, 30, 82, 0.11);
  padding: 28px 26px 22px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.journey-card:hover {
  border-color: #c8bdfa;
  box-shadow: 0 28px 60px rgba(39, 30, 82, 0.16);
  transform: translateY(-8px);
}

.journey-card-top {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 30px;
}

.journey-card-top span {
  display: inline-grid;
  min-width: 54px;
  height: 38px;
  place-items: center;
  border-radius: var(--r-xl);
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(96, 61, 226, 0.22);
}

.journey-card-top > i {
  color: var(--brand);
  font-size: 46px;
}

.journey-card h3 {
  margin: 34px 0 16px;
  font-size: 24px;
  letter-spacing: -0.035em;
  line-height: 1.13;
}

.journey-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}

.journey-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  color: var(--brand);
  padding-top: 18px;
}

.journey-card-footer strong {
  font-size: 14px;
}

.journey-card-footer i {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  font-size: 18px;
}

.journey-next {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -52px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 24px rgba(39, 30, 82, 0.14);
  color: var(--brand);
  transform: translateY(-50%);
}

.journey-next i {
  font-size: 20px;
}

.journey-step-low .journey-next {
  transform: translateY(-50%) rotate(-12deg);
}

.journey-step-high .journey-next {
  transform: translateY(-50%) rotate(12deg);
}

.onboarding-story-section {
  overflow: visible;
  background: var(--canvas);
  padding-bottom: 0;
  /* One height for both blocks in the stage. The frame's width is derived from
     it, so the copy card and the product frame are always exactly as tall as
     each other — the mismatch that made short windows look broken. */
  --stage-h: min(calc(100vh - 140px), 605px);
}

/* Wider than the page container: at 1180px the frame and a readable copy card
   cannot both fit side by side once the frame's 16:10 shape fixes its width. */
.onboarding-story-section > .container {
  width: min(1400px, calc(100vw - 48px));
}

.onboarding-scroll {
  position: relative;
  height: 470vh;
}

.onboarding-sticky {
  position: sticky;
  top: 78px;
  display: grid;
  min-height: calc(100vh - 78px);
  align-items: center;
  /* The frame column is `auto` so it takes exactly the width its height implies
     and nothing is left floating in dead space; the copy card takes the rest. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  padding: 26px 0;
}

.onboarding-story-copy {
  display: flex;
  overflow: hidden;
  min-width: 0;
  height: var(--stage-h);
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-hero);
  background: var(--surface);
  box-shadow: 0 24px 65px rgba(42, 32, 88, 0.1);
  padding: 28px;
}

.onboarding-progress-label {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-progress-track {
  overflow: hidden;
  flex-shrink: 0;
  height: 7px;
  border-radius: 999px;
  background: var(--line-strong);
}

.onboarding-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width 0.18s linear;
}

.onboarding-step-intro {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  padding: 4px 2px 18px;
}

.onboarding-step-kicker {
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.onboarding-step-intro h3 {
  margin: 7px 0 11px;
  font-size: clamp(1.6rem, 2.15vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.02;
}

.onboarding-step-intro p {
  display: -webkit-box;
  overflow: hidden;
  max-width: 440px;
  margin: 0;
  -webkit-box-orient: vertical;
  /* Safety net: the steps carry different amounts of copy, and one long line
     used to push the step list straight out through the bottom of the card. */
  -webkit-line-clamp: 3;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.onboarding-step-nav {
  display: grid;
  flex-shrink: 0;
  gap: 6px;
}

.onboarding-step-nav button {
  display: grid;
  width: 100%;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  background: transparent;
  color: #85839a;
  cursor: pointer;
  grid-template-columns: 34px 1fr auto;
  gap: 11px;
  padding: 7px 11px;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.onboarding-step-nav button span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
}

.onboarding-step-nav button > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--r-xl);
  background: var(--surface-2);
  color: #77738c;
  font-size: 18px;
}

.onboarding-step-nav button strong {
  font-size: 16px;
  font-weight: 600;
}

.onboarding-step-nav button:hover {
  background: var(--canvas);
  color: var(--ink);
}

.onboarding-step-nav button.active {
  border-color: var(--accent-line);
  background: var(--canvas);
  box-shadow: 0 12px 30px rgba(47, 37, 94, 0.1);
  color: var(--ink);
  transform: translateX(3px);
}

.onboarding-step-nav button.active span {
  background: var(--brand);
  color: #fff;
}

.onboarding-step-nav button.active > i {
  background: var(--brand-soft);
  color: var(--brand);
}

/* The frame tracks the 16:10 shape of the product captures, so a full set of
   equally sized screenshots fills it exactly — no dead space under a short one,
   no cropping of a tall one. Height still yields to the viewport first. */
.onboarding-product-frame {
  overflow: hidden;
  /* Both dimensions come from the shared stage height, so the 16:10 capture plus
     the 62px chrome bar fills the frame exactly — no letterboxing, and the same
     height as the copy card beside it. */
  height: var(--stage-h);
  /* The bar is a fixed height, so the width must come from the picture area
     that is left below it, not from a ratio of the whole frame. */
  width: calc((var(--stage-h) - 62px) * 1.6);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-hero);
  background: #fff;
  box-shadow: 0 36px 90px rgba(38, 29, 82, 0.18);
}

.onboarding-frame-bar {
  position: relative;
  display: flex;
  height: 62px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 0 22px;
}

.onboarding-frame-bar > img {
  width: 128px;
}

.onboarding-frame-dots {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}

.onboarding-frame-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d8d4e6;
}

.onboarding-frame-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 12px;
  padding: 7px 10px;
}

.onboarding-screen-stack {
  position: relative;
  height: calc(100% - 62px);
  background: var(--canvas);
}

.onboarding-screen {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  inset: 0;
  padding: 27px;
  transform: translateY(28px) scale(0.985);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-screen.active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Real product screenshots, not a mock. They are full-page captures, so the
   frame shows the top of the screen and crops the tail rather than shrinking
   the text to an unreadable size. */
.shot-screen {
  padding: 0;
}

/* Fill the frame regardless of the capture's aspect ratio: a short capture no
   longer leaves dead space under it, and a tall one crops its tail instead of
   shrinking the text. Top-anchored so every screen's header is always shown. */
.shot-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

/* Kept as a hook for a capture that should be centred rather than top-anchored
   (a short, self-contained screen such as the signup split-panel). */
.shot-screen.shot-center img {
  object-position: center;
}

.signup-screen {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  padding: 0;
}

.signup-brand-panel {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background: var(--navy);
  color: #fff;
  padding: 30px;
}

.mini-brand {
  width: 116px;
}

.signup-brand-panel small,
.signup-form-panel > small,
.mini-screen-heading > span,
.mini-onboarding-top > small {
  color: #a99bff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.signup-brand-panel h4 {
  margin: 12px 0 15px;
  font-size: 34px;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.signup-brand-panel h4 span {
  color: rgba(255, 255, 255, 0.6);
}

.signup-brand-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
}

.signup-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signup-proof span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 9px;
  padding: 5px 8px;
}

.signup-proof i {
  color: #59d79a;
}

.signup-form-panel {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 34px 44px;
}

.signup-form-panel h4 {
  margin: 6px 0 20px;
  font-size: 30px;
  letter-spacing: -0.04em;
}

.signup-form-panel label,
.twilio-connect-card label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: #45445b;
  font-size: 10px;
  font-weight: 700;
}

.signup-form-panel input,
.twilio-connect-card label span {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  padding: 10px 12px;
}

.signup-form-panel button,
.mini-screen-footer button,
.website-input button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 11px 14px;
}

.mini-screen-heading {
  max-width: 520px;
  margin-bottom: 22px;
}

.mini-screen-heading h4 {
  margin: 7px 0 8px;
  font-size: 28px;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.mini-screen-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.mini-screen-heading.compact {
  margin-bottom: 16px;
}

.mini-screen-heading.compact h4 {
  margin-top: 0;
  font-size: 24px;
}

.plan-screen,
.business-screen,
.knowledge-screen,
.agent-choice-screen,
.connect-screen {
  display: flex;
  flex-direction: column;
}

.mini-plan-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.mini-plan-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  padding: 17px;
}

.mini-plan-card.selected {
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(80, 55, 190, 0.12);
}

.mini-plan-card em {
  position: absolute;
  top: -11px;
  left: 50%;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  padding: 4px 7px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.mini-plan-card > strong {
  font-size: 14px;
}

.mini-plan-card b {
  font-size: 26px;
  letter-spacing: -0.04em;
}

.mini-plan-card b small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}

.mini-plan-card > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 9px;
}

.mini-plan-card > span i,
.mini-screen-footer > span i {
  color: var(--success);
}

.mini-screen-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}

.mini-screen-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 9px;
}

.mini-onboarding-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 17px;
}

.mini-stepper {
  display: flex;
  align-items: center;
}

.mini-stepper span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #aaa7ba;
  font-size: 8px;
  font-weight: 800;
}

.mini-stepper span.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.mini-stepper i {
  width: 26px;
  height: 1px;
  background: var(--line);
}

.branch-card {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  padding: 17px;
}

.hours-row.closed {
  grid-template-columns: 1fr auto;
}

.hours-row.closed em {
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  padding: 5px 9px;
}

.branch-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 13px;
  border-radius: var(--r-lg);
  background: var(--brand-soft);
  color: var(--body);
  font-size: 9px;
  padding: 9px 10px;
}

.branch-note i {
  color: var(--brand);
  font-size: 12px;
}

/* Dashed "add" affordance carries the leftover height, so the screen reads as
   a real form with room to grow rather than a panel that ran out of content. */
.mini-add-row {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed #d5d1e4;
  border-radius: var(--r-xl);
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  margin-top: 11px;
  padding: 12px;
}

.mini-add-row i {
  font-size: 12px;
}

.branch-card-head,
.branch-card-head > span {
  display: flex;
  align-items: center;
}

.branch-card-head {
  justify-content: space-between;
}

.branch-card-head > span {
  gap: 8px;
  font-size: 12px;
}

.branch-card-head i {
  color: var(--brand);
  font-size: 18px;
}

.branch-card-head small {
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 8px;
  padding: 4px 7px;
}

.branch-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 15px 0;
}

.branch-fields label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 8px;
}

.branch-fields span,
.hours-row > span {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--canvas);
  color: var(--ink);
  font-size: 9px;
  padding: 8px 9px;
}

.hours-row {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 70px auto 70px;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.hours-row strong {
  font-size: 9px;
}

.hours-row i {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.knowledge-setup-grid {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 11px;
}

.website-picker,
.knowledge-additions > div,
.twilio-connect-card {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  padding: 15px;
}

.website-picker > strong {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
}

.website-input {
  display: flex;
  gap: 7px;
  margin-bottom: 10px;
}

.website-input > span {
  overflow: hidden;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--muted);
  font-size: 9px;
  padding: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-input button {
  font-size: 8px;
  padding: 7px 9px;
}

.website-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 9px 0;
}

.website-picker label > i {
  color: var(--success);
}

.website-picker label span,
.website-picker label b,
.website-picker label small {
  display: block;
}

.website-picker label b {
  font-size: 9px;
}

.website-picker label small {
  color: var(--muted);
  font-size: 8px;
}

.knowledge-additions {
  display: grid;
  gap: 10px;
}

.knowledge-additions > div {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

/* Was `margin-bottom: auto`, which pinned the label to the bottom of a card
   that stretches to the frame height — at 680px that opened a void taller than
   the content itself. The card now reads top-down and the leftover space is
   absorbed by the grid instead. */
.knowledge-additions i {
  width: fit-content;
  border-radius: var(--r-lg);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 18px;
  padding: 8px;
}

.knowledge-additions strong,
.knowledge-additions span {
  display: block;
}

.knowledge-additions strong {
  margin: 9px 0 3px;
  font-size: 10px;
}

.knowledge-additions span {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-agent-grid {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mini-agent-card {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  padding: 13px;
  text-align: center;
}

.mini-agent-card.selected {
  border-color: var(--brand);
  background: var(--canvas);
}

.mini-selected {
  position: absolute;
  top: 9px;
  right: 9px;
  color: var(--brand);
}

.mini-agent-card > img {
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: var(--r-xl);
  object-fit: cover;
}

.mini-agent-card > strong {
  font-size: 12px;
}

.mini-agent-card > small {
  color: var(--brand);
  font-size: 8px;
  font-weight: 600;
}

.mini-agent-card p {
  margin: 9px 0;
  color: var(--muted);
  font-size: 8px;
}

.mini-agent-card button {
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink);
  font-size: 8px;
  padding: 6px 8px;
}

.ready-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  border: 1px solid rgba(22, 161, 100, 0.24);
  border-radius: var(--r-xl);
  background: var(--success-soft);
  padding: 11px 13px;
}

.ready-banner > img {
  width: 38px;
  height: 38px;
  border-radius: var(--r-lg);
  object-fit: cover;
}

.ready-banner span,
.ready-banner strong,
.ready-banner small {
  display: block;
}

.ready-banner strong {
  font-size: 12px;
}

.ready-banner small {
  color: var(--muted);
  font-size: 8px;
}

.ready-banner em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--success-soft);
  color: #12744a;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  padding: 5px 7px;
}

.twilio-connect-card {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
}

.twilio-connect-card label {
  margin: 0;
}

.twilio-connect-card p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: auto 0 0;
  color: var(--muted);
  font-size: 8px;
  grid-column: span 2;
}

.twilio-connect-card p i {
  color: var(--brand);
}

.phone-demo-section {
  /* `clip` rather than `hidden`: both trim the floating tags, but `hidden`
     makes this a scroll container, and the sticky stage inside would then have
     nothing to stick to. */
  overflow: clip;
  background: var(--canvas);
  padding-bottom: 0;
}

/*
 * The call story advances on scroll, the same way the onboarding section does.
 * This spacer is the distance the reader travels through it — roughly one
 * viewport per stage — while the grid stays pinned.
 */
.phone-demo-scroll {
  position: relative;
  height: 300vh;
}

.phone-demo-sticky {
  position: sticky;
  top: 78px;
  min-height: calc(100vh - 78px);
  padding: 26px 0;
}

.phone-demo-grid {
  display: grid;
  align-items: center;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 100px;
}

.phone-demo-copy > p {
  max-width: 520px;
}

.call-stage-list {
  display: grid;
  gap: 8px;
  margin-top: 32px;
}

.call-stage {
  display: grid;
  width: 100%;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  grid-template-columns: 40px 1fr;
  padding: 12px;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.call-stage > span {
  grid-row: 1 / 3;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--line);
  color: #85809a;
  font-size: 14px;
  font-weight: 700;
}

.call-stage strong {
  color: var(--ink);
  font-size: 16px;
}

.call-stage small {
  font-size: 14px;
}

.call-stage.active {
  border-color: var(--line-strong);
  background: #fff;
  box-shadow: 0 10px 28px rgba(58, 43, 120, 0.07);
}

.call-stage.active > span {
  background: var(--brand);
  color: #fff;
}

.phone-stage {
  position: relative;
  min-height: 625px;
}

.phone-device {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 340px;
  height: 610px;
  overflow: hidden;
  border: 9px solid var(--navy-2);
  border-radius: 48px;
  background: #fff;
  box-shadow: 0 32px 70px rgba(33, 26, 72, 0.22);
  transform: translateX(-50%);
}

.phone-device::before {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 50%;
  width: 100px;
  height: 24px;
  border-radius: var(--r-2xl);
  background: var(--navy-2);
  content: "";
  transform: translateX(-50%);
}

.phone-status {
  display: flex;
  height: 54px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  color: var(--navy-2);
  font-size: 14px;
  font-weight: 600;
}

.phone-screen {
  position: relative;
  height: calc(100% - 54px);
  overflow: hidden;
  border-radius: 34px 34px 0 0;
  background: var(--surface-2);
  padding: 26px 22px;
}

.phone-agent {
  display: flex;
  align-items: center;
  gap: 12px;
}

.phone-agent img {
  width: 52px;
  height: 52px;
  border-radius: var(--r-xl);
  object-fit: cover;
}

.phone-agent strong,
.phone-agent span {
  display: block;
}

.phone-agent strong {
  font-size: 16px;
}

.phone-agent span {
  color: var(--success);
  font-size: 14px;
  font-weight: 600;
}

.incoming-state,
.answering-state,
.complete-state {
  position: absolute;
  right: 22px;
  bottom: 45px;
  left: 22px;
  text-align: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.answering-state,
.complete-state {
  opacity: 0;
  transform: translateY(16px);
}

.phone-pulse {
  display: grid;
  width: 82px;
  height: 82px;
  margin: 0 auto 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 12px rgba(116, 82, 247, 0.12), 0 0 0 25px rgba(116, 82, 247, 0.05);
  color: #fff;
  font-size: 30px;
}

.incoming-state small,
.answering-state small {
  color: var(--brand);
  font-weight: 600;
}

.incoming-state h3,
.complete-state h3 {
  margin: 8px 0 3px;
  font-size: 28px;
}

.incoming-state p,
.answering-state p,
.complete-state p {
  color: var(--muted);
}

.large-wave {
  display: flex;
  height: 95px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 34px 0 22px;
}

.large-wave span {
  width: 7px;
  height: 48px;
}

.large-wave span:nth-child(2), .large-wave span:nth-child(6) { height: 70px; animation-delay: 0.12s; }
.large-wave span:nth-child(3), .large-wave span:nth-child(5) { height: 92px; animation-delay: 0.24s; }
.large-wave span:nth-child(4) { height: 60px; animation-delay: 0.36s; }

.complete-icon {
  color: var(--success);
  font-size: 86px;
}

.phone-stage[data-phone-stage="ringing"] .phone-device {
  animation: phone-vibrate 0.72s ease-in-out infinite;
}

.phone-stage[data-phone-stage="answering"] .incoming-state,
.phone-stage[data-phone-stage="complete"] .incoming-state {
  opacity: 0;
  transform: translateY(-14px);
}

.phone-stage[data-phone-stage="answering"] .answering-state,
.phone-stage[data-phone-stage="complete"] .complete-state {
  opacity: 1;
  transform: translateY(0);
}

.phone-stage[data-phone-stage="complete"] .answering-state {
  opacity: 0;
  transform: translateY(-14px);
}

.phone-tag {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-2xl);
  box-shadow: 0 18px 40px rgba(39, 29, 86, 0.18);
  color: #46465d;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 14px;
}

.phone-tag i {
  color: currentColor;
  font-size: 18px;
}

.tag-language {
  top: 205px;
  left: -2%;
  background: #ffd044;
  color: var(--navy-2);
  transform: rotate(-2deg);
}

.tag-knowledge {
  right: -2%;
  bottom: 110px;
  background: var(--accent-ink);
  color: #fff;
  transform: rotate(2deg);
}

/* ---------- AI support team : roster + stage ---------- */
.agent-section {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.agent-section::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  width: 1200px;
  height: 700px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(116, 82, 247, 0.12), transparent);
  pointer-events: none;
}

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

.agent-studio {
  display: grid;
  gap: 22px;
  grid-template-columns: 340px 1fr;
  align-items: stretch;
}

/* ----- roster ----- */
.agent-roster {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-hero);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.agent-roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 0 6px 12px;
  border-bottom: 1px solid var(--line);
}

.agent-roster-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.agent-roster-head b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.agent-row {
  --accent: var(--brand);
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--r-2xl);
  background: transparent;
  cursor: pointer;
  padding: 11px 13px;
  text-align: left;
  transition: background 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
}

.agent-row[data-agent-row="clara"] { --accent: var(--brand); }
.agent-row[data-agent-row="sofia"] { --accent: var(--cyan); }
.agent-row[data-agent-row="maya"]  { --accent: #16a164; }
.agent-row[data-agent-row="alex"]  { --accent: var(--warning); }

/* left accent rail on the selected row */
.agent-row::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-row:hover {
  background: var(--surface-2);
}

.agent-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.agent-row.active {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.agent-row.active::before {
  height: 62%;
}

.agent-row-avatar {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-2);
}

.agent-row-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.7) brightness(0.98);
  transition: filter 0.3s ease, transform 0.4s ease;
}

.agent-row:hover .agent-row-avatar img,
.agent-row.active .agent-row-avatar img {
  filter: none;
  transform: scale(1.06);
}

.agent-row.active .agent-row-avatar {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent);
}

.agent-row-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.agent-row-text strong {
  color: var(--ink);
  font-size: 16px;
  letter-spacing: -0.01em;
}

.agent-row-text small {
  color: var(--muted);
  font-size: 12px;
}

.agent-row-bars {
  display: flex;
  height: 20px;
  margin-left: auto;
  align-items: center;
  gap: 3px;
}

.agent-row-bars b {
  width: 3px;
  height: 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 40%, transparent);
  transition: background 0.3s ease;
}

.agent-row.active .agent-row-bars b {
  background: var(--accent);
  animation: waveform 1.1s ease-in-out infinite;
}

.agent-row-bars b:nth-child(2) { height: 13px; animation-delay: 0.12s; }
.agent-row-bars b:nth-child(3) { height: 18px; animation-delay: 0.24s; }
.agent-row-bars b:nth-child(4) { height: 10px; animation-delay: 0.36s; }

.agent-roster-foot {
  display: flex;
  margin-top: auto;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--r-2xl);
  background: var(--brand-soft);
  padding: 14px;
  color: #4b3f75;
  font-size: 12px;
  line-height: 1.5;
}

.agent-roster-foot i {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 16px;
}

/* ----- stage ----- */
.agent-stage {
  position: relative;
  display: grid;
  min-height: 545px;
  overflow: hidden;
  border-radius: var(--r-hero);
  background: linear-gradient(150deg, #221a44, var(--navy) 62%, var(--navy));
  box-shadow: var(--shadow-lg);
}

/* every panel shares one grid cell, so the stage grows to fit the tallest agent */
.agent-panel {
  --accent: var(--brand);
  position: relative;
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1;
  opacity: 0;
  padding: 26px 30px;
  transform: scale(0.99);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  visibility: hidden;
  pointer-events: none;
}

.agent-panel[data-agent-panel="clara"] { --accent: #8b6bff; }
.agent-panel[data-agent-panel="sofia"] { --accent: #29c3f2; }
.agent-panel[data-agent-panel="maya"]  { --accent: #24c98a; }
.agent-panel[data-agent-panel="alex"]  { --accent: var(--warning); }

.agent-panel.active {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  pointer-events: auto;
}

/* accent aura behind the portrait */
.agent-panel::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
  pointer-events: none;
}

.agent-portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  max-width: 430px;
  height: 88%;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(to left, #000 52%, transparent 98%),
    linear-gradient(to top, transparent 2%, #000 22%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, #000 52%, transparent 98%),
    linear-gradient(to top, transparent 2%, #000 22%);
  mask-composite: intersect;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.6s ease 0.1s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.agent-panel.active .agent-portrait {
  opacity: 1;
  transform: translateX(0);
}

.agent-panel-top,
.agent-panel-body,
.agent-panel-foot {
  position: relative;
  z-index: 2;
}

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

.agent-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
}

.agent-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: agentPulse 2s ease-in-out infinite;
}

@keyframes agentPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); }
  70%      { box-shadow: 0 0 0 8px transparent; }
}

.agent-voice-id {
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.agent-panel-body {
  display: flex;
  max-width: 55%;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 26px 0 28px;
}

.agent-role {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: #fff;
}

.agent-panel-body h3 {
  margin: 16px 0 10px;
  background: linear-gradient(100deg, #fff 34%, color-mix(in srgb, var(--accent) 78%, #fff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 52px;
  letter-spacing: -0.05em;
  line-height: 1.02;
}

.agent-panel-body > p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.6;
}

.agent-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

.agent-tags span {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.84);
}

/* transcript bubbles */
.agent-chat {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.agent-chat p {
  max-width: 92%;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0;
  padding: 11px 15px;
  transform: translateY(8px);
}

.agent-panel.active .agent-chat p {
  animation: agentChatIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.agent-panel.active .agent-chat p:nth-child(1) { animation-delay: 0.3s; }
.agent-panel.active .agent-chat p:nth-child(2) { animation-delay: 0.55s; }

@keyframes agentChatIn {
  to { opacity: 1; transform: translateY(0); }
}

.agent-chat-in {
  align-self: flex-start;
  border-radius: var(--r-2xl) var(--r-2xl) var(--r-2xl) 5px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
}

.agent-chat-out {
  align-self: flex-end;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: var(--r-2xl) var(--r-2xl) 5px var(--r-2xl);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: #fff;
}

/* footer: player + stats */
.agent-panel-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 20px;
}

.voice-preview {
  position: relative;
  display: flex;
  width: 260px;
  min-height: 56px;
  flex: 0 0 auto;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-2xl);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  padding: 9px 15px 9px 9px;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.25s ease;
}

.voice-preview:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: rgba(255, 255, 255, 0.11);
}

.voice-preview > i {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--r-xl);
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 48%, transparent);
  transition: transform 0.25s ease;
}

.voice-preview:hover > i {
  transform: scale(1.07);
}

.voice-preview small {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.voice-preview.playing small {
  color: var(--accent);
}

/*
 * The waveform doubles as the progress bar. It takes the whole gap between the
 * play button and the clock, and script.js gives every bar its height from one
 * shape array so the two players stay identical apart from colour.
 */
.voice-line {
  position: relative;
  display: flex;
  height: 24px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}

.voice-line b {
  width: 3px;
  height: 55%; /* placeholder; script.js gives each bar its real height */
  flex: 0 0 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.3s ease;
}

/*
 * The played portion: a duplicate of the bars in the accent colour, laid over
 * the dim ones and clipped from the right to the fraction of the clip that has
 * played, so the wave fills left to right in step with the audio.
 */
.voice-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: inherit;
  clip-path: inset(0 calc(100% - var(--voice-progress, 0%)) 0 0);
  pointer-events: none;
}

.voice-line-fill b {
  background: var(--accent);
}

.agent-stats {
  display: flex;
  gap: 26px;
}

.agent-stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agent-stats b {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.agent-stats span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  white-space: nowrap;
}

.product-section {
  background: var(--canvas);
}

.product-tabs {
  display: flex;
  width: fit-content;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: #fff;
  padding: 6px;
}

.product-tab {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0 16px;
  transition: background 0.2s ease, color 0.2s ease;
}

.product-tab:hover {
  color: var(--ink);
}

.product-tab.active {
  background: var(--navy);
  color: #fff;
}

.product-browser {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3xl);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.browser-bar {
  display: grid;
  height: 56px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  color: var(--muted);
  grid-template-columns: 1fr auto 1fr;
  padding: 0 18px;
}

.browser-dots {
  display: flex;
  gap: 7px;
}

.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d9d6e4;
}

.browser-address {
  display: flex;
  min-width: 260px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  font-size: 12px;
  padding: 6px 16px;
}

.browser-bar > i {
  justify-self: end;
}

.product-screen-wrap {
  position: relative;
  aspect-ratio: 1862 / 969;
  overflow: hidden;
  background: var(--canvas);
}

.product-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: contain;
  object-position: center top;
  transform: scale(1.01);
  transition: opacity 0.35s ease, transform 0.45s ease;
}

.product-screen[data-product-screen="overview"] {
  object-fit: contain;
  object-position: center top;
}

.product-screen.active {
  opacity: 1;
  transform: scale(1);
}

.product-caption {
  min-height: 68px;
  margin-top: 22px;
  text-align: center;
}

.product-caption > div {
  display: none;
}

.product-caption > div.active {
  display: block;
}

.product-caption strong,
.product-caption span {
  display: block;
}

.product-caption strong {
  font-size: 20px;
}

.product-caption span {
  margin-top: 3px;
  color: var(--muted);
}

.connections-section {
  background: #fff;
}

.connections-section .section-heading {
  max-width: 760px;
}

.connection-accordion {
  display: flex;
  height: 340px;
  gap: 16px;
}

.connection-card {
  position: relative;
  flex: 0.78;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-hero);
  background: #fff;
  box-shadow: 0 14px 32px rgba(30, 25, 56, 0.07);
  cursor: pointer;
  transition: flex 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.connection-card:hover,
.connection-card:focus-visible {
  border-color: #cfc5fc;
  box-shadow: 0 20px 42px rgba(30, 25, 56, 0.12);
  outline: none;
  transform: translateY(-4px);
}

.connection-card.active {
  flex: 2.3;
  border-color: #c9bcff;
  background: var(--canvas);
  box-shadow: 0 24px 52px rgba(88, 60, 200, 0.15);
}

.connection-icon {
  position: absolute;
  top: 30px;
  left: 30px;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: var(--r-2xl);
  color: #fff;
  font-size: 32px;
  transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1), left 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.connection-card.active .connection-icon {
  transform: scale(1.06);
}

.connection-card:not(.active) .connection-icon {
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
}

.connection-icon-purple {
  background: var(--accent-ink);
}

.connection-icon-blue {
  background: #3879d9;
}

.connection-icon-green {
  background: #0ba879;
}

.connection-icon-amber {
  background: var(--warning);
}

.connection-icon-coral {
  background: var(--danger);
}

.connection-collapsed {
  position: absolute;
  right: 22px;
  bottom: 30px;
  left: 22px;
  transition: opacity 0.18s ease, transform 0.25s ease;
}

.connection-collapsed strong,
.connection-collapsed span {
  display: block;
}

.connection-collapsed strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

.connection-collapsed span {
  overflow: hidden;
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.connection-card.active .connection-collapsed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.connection-card:not(.active) .connection-collapsed {
  top: 182px;
  right: 16px;
  bottom: auto;
  left: 16px;
  text-align: center;
}

.connection-expanded {
  position: absolute;
  top: 34px;
  right: 38px;
  bottom: 34px;
  left: 126px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.22s ease, transform 0.35s ease;
}

.connection-card.active .connection-expanded {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s;
}

.connection-label {
  border: 1px solid var(--accent-line);
  background: #fff;
  color: var(--accent-ink);
  text-transform: uppercase;
}

.connection-expanded h3 {
  margin: 18px 0 9px;
  font-size: clamp(2rem, 2.7vw, 2.75rem);
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.connection-expanded p {
  max-width: 510px;
  margin: 0;
  color: var(--body);
  font-size: 16px;
  line-height: 1.55;
}

.connection-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.connection-tags span {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: #4c465c;
}

.connection-arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #d9d5e6;
  border-radius: 50%;
  background: #fff;
  color: #655e75;
  transition: background 0.25s ease, color 0.25s ease, transform 0.35s ease;
}

.connection-card.active .connection-arrow {
  background: var(--accent-ink);
  color: #fff;
  transform: rotate(180deg);
}

.features-section {
  background: #fff;
}

.feature-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.bento-card {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: #fff;
  padding: 28px;
}

.bento-card h3 {
  margin: 22px 0 10px;
  font-size: 24px;
  letter-spacing: -0.025em;
}

.bento-card p {
  color: var(--muted);
}

/*
 * The knowledge card and the navy card each take a full row, which leaves the
 * three small cards a row of their own. Spanning two of three columns instead
 * would strand an empty cell beside each of them.
 */
.bento-large {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  background: var(--surface-2);
}

.bento-wide {
  display: flex;
  min-height: 250px;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
  gap: 40px;
  background: var(--navy);
  color: #fff;
}

.bento-wide p {
  max-width: 500px;
  color: #b9b9cd;
}

.bento-wide .feature-icon {
  background: rgba(255, 255, 255, 0.09);
  color: #b7a8ff;
}

.knowledge-stack {
  display: grid;
  align-content: center;
  gap: 10px;
}

.knowledge-stack > div {
  display: grid;
  align-items: center;
  border: 1px solid rgba(116, 82, 247, 0.12);
  border-radius: var(--r-xl);
  background: #fff;
  grid-template-columns: 42px 1fr auto;
  padding: 12px;
}

.knowledge-stack i {
  color: var(--brand);
  font-size: 20px;
}

.knowledge-stack strong,
.knowledge-stack small {
  display: block;
}

.knowledge-stack strong {
  font-size: 14px;
}

.knowledge-stack small {
  color: var(--muted);
  font-size: 12px;
}

.knowledge-stack b {
  border-radius: 999px;
  background: #e9f8f0;
  color: var(--success-ink);
  font-size: 10px;
  padding: 5px 8px;
}

.mini-wave {
  display: flex;
  height: 82px;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
}

.mini-wave span {
  width: 7px;
  height: 45px;
}

.mini-wave span:nth-child(2n) { height: 70px; animation-delay: 0.16s; }
.mini-wave span:nth-child(3n) { height: 28px; animation-delay: 0.3s; }

.transcript-mini {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  margin-top: 22px;
}

.transcript-mini span {
  align-self: start;
  border-radius: var(--r-md);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 6px;
}

.transcript-mini .you {
  background: var(--surface-2);
  color: var(--body);
}

.transcript-mini .ai {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.transcript-mini p {
  margin: 0;
  border-radius: var(--r-lg);
  background: var(--canvas);
  color: var(--body);
  font-size: 12px;
  padding: 8px 10px;
}

.call-history-mini {
  display: grid;
  gap: 7px;
  margin-top: 24px;
}

.call-history-mini > div {
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 36px 1fr auto;
  padding: 9px 0;
}

.call-history-mini span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--r-lg);
}

.call-ok {
  background: #e9f8f0;
  color: var(--success);
}

.call-missed {
  background: var(--danger-soft);
  color: var(--danger);
}

.call-history-mini b {
  font-size: 14px;
}

.call-history-mini small {
  color: var(--muted);
}

.control-pills {
  display: grid;
  flex: 0 0 auto;
  gap: 10px;
}

.control-pills span {
  display: flex;
  min-width: 210px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.06);
  color: var(--line);
  font-size: 14px;
  padding: 10px 12px;
}

.control-pills i {
  color: #54d194;
}

.audience-section {
  background: var(--canvas);
}

.audience-grid,
.faq-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 110px;
}

.audience-grid .section-heading,
.faq-grid .section-heading {
  margin-bottom: 0;
}

/*
 * The question list is far taller than the heading beside it, which left the
 * heading stranded at the top while the reader scrolled. Sticking it keeps the
 * section's title and its "talk to our team" link in view for the whole list.
 * align-self is what makes that work — a stretched grid item has no room to
 * move within.
 */
.faq-grid .section-heading {
  position: sticky;
  top: 110px;
  align-self: start;
}

.audience-grid .button {
  margin-top: 28px;
}

.audience-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.audience-list article {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: #fff;
  padding: 22px;
}

.audience-list article > i {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: var(--r-xl);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 20px;
}

.audience-avatar {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 64px;
  height: 64px;
  border: 4px solid #fff;
  border-radius: var(--r-2xl);
  box-shadow: 0 10px 24px rgba(38, 31, 74, 0.14);
  object-fit: cover;
}

.audience-list article > div {
  max-width: calc(100% - 24px);
}

/*
 * Scoped to the text block. Unqualified, this also caught the player's
 * <span class="voice-line">, turning the waveform's flex row into a block and
 * collapsing every bar to nothing.
 */
.audience-list article > div strong,
.audience-list article > div span {
  display: block;
}

.audience-list article > div strong {
  margin-bottom: 6px;
}

.audience-list article > div span {
  color: var(--muted);
  font-size: 14px;
}

/*
 * The studio's player on a white card: light pill, brand-violet controls, and a
 * waveform that doubles as the progress bar.
 */
.voice-preview-mini {
  width: 100%;
  min-height: 52px;
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--canvas);
  backdrop-filter: none;
  color: var(--ink);
  padding: 8px 16px 8px 8px;
}

.voice-preview-mini:hover {
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
  background: var(--brand-soft);
}

.voice-preview-mini > i {
  width: 36px;
  height: 36px;
  border-radius: var(--r-xl);
  background: var(--brand);
  font-size: 14px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 40%, transparent);
}

.voice-preview-mini .voice-line b {
  background: color-mix(in srgb, var(--brand) 38%, transparent);
}

.voice-preview-mini .voice-line-fill b {
  background: var(--brand);
}

.voice-preview-mini small {
  color: var(--muted);
  font-size: 12px;
}

.voice-preview-mini.playing small {
  color: var(--brand);
}

.testimonials-section {
  background: #fff;
}

.testimonial-grid {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.testimonial-card {
  display: flex;
  min-height: 310px;
  flex-direction: column;
  grid-column: span 5;
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: var(--canvas);
  box-shadow: none;
  padding: 34px;
}

.testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  color: #54a917;
  font-size: 18px;
}

.testimonial-card blockquote {
  margin: 0 0 30px;
  color: var(--navy-3);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.48;
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.testimonial-initials {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--r-xl);
  background: var(--danger-soft);
  color: var(--navy-2);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.testimonial-initials-blue {
  background: #e1e5ff;
}

.testimonial-initials-green {
  background: #d6f4e6;
}

.testimonial-initials-gold {
  background: var(--warning-soft);
}

.testimonial-person strong,
.testimonial-person small {
  display: block;
}

.testimonial-person strong {
  font-size: 16px;
}

.testimonial-person small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
}

.video-testimonial-card {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  grid-column: span 2;
  border: 0;
  border-radius: var(--r-3xl);
  background: var(--navy);
  box-shadow: 0 18px 42px rgba(27, 23, 52, 0.17);
  color: #fff;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.video-testimonial-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-testimonial-card:hover > img,
.video-testimonial-card:focus-visible > img {
  transform: scale(1.04);
}

.video-testimonial-card:focus-visible {
  outline: 3px solid rgba(111, 76, 255, 0.4);
  outline-offset: 4px;
}

.video-card-play,
.video-modal-play {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-2xl);
  background: var(--brand);
  box-shadow: 0 14px 32px rgba(54, 32, 154, 0.28);
  color: #fff;
}

.video-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66px;
  height: 66px;
  font-size: 24px;
  transform: translate(-50%, -62%);
  transition: transform 0.2s ease, background 0.2s ease;
}

.video-testimonial-card:hover .video-card-play {
  background: var(--brand-dark);
  transform: translate(-50%, -62%) scale(1.06);
}

.video-card-copy {
  position: absolute;
  right: 14px;
  bottom: 56px;
  left: 14px;
  border-radius: var(--r-xl);
  background: rgba(16, 14, 28, 0.78);
  padding: 12px 14px;
}

.video-card-copy strong,
.video-card-copy small {
  display: block;
}

.video-card-copy strong {
  font-size: 14px;
  line-height: 1.25;
}

.video-card-copy small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.video-card-stars {
  position: absolute;
  bottom: 20px;
  left: 18px;
  display: flex;
  gap: 3px;
  color: #fff;
  font-size: 14px;
}

.video-modal[hidden] {
  display: none;
}

.video-modal {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.video-modal-backdrop {
  position: absolute;
  border: 0;
  background: rgba(12, 11, 20, 0.72);
  cursor: default;
  inset: 0;
}

.video-modal-dialog {
  position: relative;
  overflow: hidden;
  width: min(980px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-2xl);
  background: #fff;
  box-shadow: 0 30px 90px rgba(8, 6, 18, 0.34);
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
}

.video-modal-header span {
  display: block;
  margin-bottom: 2px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.video-modal-header h3 {
  font-size: 20px;
}

.video-modal-close {
  display: grid;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  font-size: 22px;
  place-items: center;
}

.video-modal-player {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  margin: 0 16px;
  border-radius: var(--r-xl);
  background: #09080e;
}

.video-modal-player > img {
  width: 100%;
  height: 500px;
  opacity: 0.74;
  object-fit: cover;
}

.video-modal-player-copy {
  position: absolute;
  top: 26px;
  left: 28px;
  max-width: 360px;
  border-radius: var(--r-2xl);
  background: rgba(12, 11, 20, 0.82);
  color: #fff;
  padding: 16px 18px;
}

.video-modal-player-copy strong,
.video-modal-player-copy small {
  display: block;
}

.video-modal-player-copy strong {
  margin-top: 10px;
  font-size: 20px;
}

.video-modal-player-copy small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
}

.video-preview-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #bcb0ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.video-modal-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  cursor: pointer;
  font-size: 28px;
  transform: translate(-50%, -50%);
}

.video-modal-controls {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: grid;
  align-items: center;
  grid-template-columns: 22px auto 1fr 22px 22px;
  gap: 12px;
  border-radius: var(--r-xl);
  background: rgba(8, 7, 13, 0.8);
  color: #fff;
  padding: 12px 14px;
}

.video-modal-controls small {
  font-size: 12px;
}

.video-modal-progress {
  overflow: hidden;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.video-modal-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--brand);
}

.video-modal-player.previewing .video-modal-progress i {
  animation: testimonial-preview-progress 8s linear forwards;
}

.video-modal-player.previewing > img {
  animation: testimonial-preview-photo 8s ease-in-out forwards;
}

.video-modal-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  padding: 14px 20px 18px;
  text-align: center;
}

body.video-modal-open {
  overflow: hidden;
}

@keyframes testimonial-preview-progress {
  to {
    width: 100%;
  }
}

@keyframes testimonial-preview-photo {
  to {
    transform: scale(1.035);
  }
}

.testimonial-note,
.pricing-note {
  margin: 28px auto 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.pricing-section {
  background: var(--canvas);
}

.hero-trial-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
}

.hero-trial-note::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--success);
  vertical-align: middle;
}

.pricing-grid {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* Five tiers do not fit the 1180px container without becoming slivers, so this
   section opts into a wider measure than the rest of the page. */
.pricing-section > .container {
  width: min(calc(100% - 64px), 1460px);
}

/* The trial is the entry point, not a tier — same card, quieter edge, so the
   eye lands on the paid ladder first. */
.pricing-free {
  background: var(--canvas);
}

/* The add-on price rides on the "1 phone number included" bullet rather than
   getting its own line: it is a qualifier on that number, and a separate bullet
   read as an extra thing you get. */
.pricing-addon {
  display: block;
  color: var(--muted);
  font-weight: 500;
}

/* Enterprise has no figure to show, so "Let's talk" sits in the price slot at a
   size that does not pretend to be one. */
.pricing-enterprise .pricing-price strong {
  font-size: 2.1rem;
}

.pricing-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 560px;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: #fff;
  box-shadow: 0 12px 38px rgba(38, 28, 82, 0.06);
  padding: 24px 20px;
}

.pricing-popular {
  border: 2px solid var(--brand);
  box-shadow: 0 24px 64px rgba(81, 54, 197, 0.16);
  transform: translateY(-12px);
}

.pricing-popular.reveal {
  transform: translateY(10px);
}

.pricing-popular.reveal.visible {
  transform: translateY(-12px);
}

.popular-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 10px 24px rgba(116, 82, 247, 0.24);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.pricing-card-head {
  min-height: 178px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}

.pricing-name {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.pricing-price {
  display: flex;
  align-items: end;
  gap: 10px;
  margin: 18px 0 12px;
}

.pricing-price strong {
  font-size: 50px;
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.pricing-price span {
  color: var(--muted);
  font-size: 12px;
}

.pricing-card-head > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.pricing-card ul {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 13px;
  margin: 24px 0 30px;
  padding: 0;
  list-style: none;
}

.pricing-card li {
  display: grid;
  align-items: start;
  color: var(--body);
  font-size: 14px;
  grid-template-columns: 20px 1fr;
}

.pricing-card li i {
  margin-top: 3px;
  color: var(--success);
  font-size: 16px;
}

.pricing-card li > span {
  min-width: 0;
}

.pricing-card li strong {
  color: var(--ink);
  white-space: nowrap;
}

.pricing-button {
  width: 100%;
}

.faq-section {
  background: #fff;
}

.text-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 24px;
  color: var(--brand-dark);
  font-weight: 600;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
  padding: 22px 0;
  text-align: left;
}

.faq-item button i {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 20px;
  transition: transform 0.25s ease;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-answer p {
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  padding-right: 35px;
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.open .faq-answer p {
  padding-bottom: 22px;
}

.faq-item.open button i {
  transform: rotate(45deg);
}

.cta-section {
  padding: 30px 0 90px;
  background: #fff;
}

.cta-card {
  position: relative;
  display: grid;
  overflow: hidden;
  align-items: center;
  border-radius: var(--r-hero);
  background: linear-gradient(135deg, var(--brand), #5433d2);
  color: #fff;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 70px;
  padding: 64px;
}

.cta-card::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  mask-image: linear-gradient(90deg, transparent, #000);
  pointer-events: none;
}

.cta-copy,
.contact-form {
  position: relative;
  z-index: 1;
}

.eyebrow.light {
  color: var(--line-strong);
}

.cta-copy h2 {
  margin-bottom: 15px;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
}

.cta-copy p {
  max-width: 600px;
  margin: 0;
  color: var(--line-strong);
  font-size: 18px;
}

.contact-form {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-2xl);
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  backdrop-filter: blur(10px);
}

.contact-form label span {
  display: block;
  margin-bottom: 8px;
  color: #e6e1ff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.contact-form input {
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-xl);
  outline: none;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  padding: 0 14px;
}

.contact-form input:focus {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

.contact-form .button {
  width: 100%;
}

.form-message {
  min-height: 20px;
  margin: 10px 0 0;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.site-footer {
  background: var(--navy);
  color: #fff;
  padding: 70px 0 24px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  padding-bottom: 55px;
}

.footer-brand img {
  width: 172px;
}

.footer-brand p {
  max-width: 350px;
  margin-top: 22px;
  color: #9999af;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.footer-links div {
  display: grid;
  align-content: start;
  gap: 10px;
}

.footer-links strong {
  margin-bottom: 7px;
  font-size: 14px;
}

.footer-links a {
  color: #9c9caf;
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #76768d;
  font-size: 12px;
  padding-top: 22px;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  transition-delay: var(--delay, 0ms);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 161, 100, 0.28); }
  50% { box-shadow: 0 0 0 7px rgba(22, 161, 100, 0); }
}

@keyframes waveform {
  0%, 100% { transform: scaleY(0.48); }
  50% { transform: scaleY(1); }
}

@keyframes phone-vibrate {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  15% { transform: translateX(calc(-50% - 5px)) rotate(-1.2deg); }
  30% { transform: translateX(calc(-50% + 5px)) rotate(1.2deg); }
  45% { transform: translateX(calc(-50% - 4px)) rotate(-0.8deg); }
  60% { transform: translateX(calc(-50% + 4px)) rotate(0.8deg); }
}

/* Five tiers need a lot of width, so they step down twice before halving. */
@media (max-width: 1400px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1080px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .mobile-nav {
    position: fixed;
    top: 78px;
    right: 20px;
    left: 20px;
    display: grid;
    visibility: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    background: #fff;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    padding: 12px;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  .mobile-nav.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-nav a {
    border-radius: var(--r-lg);
    color: var(--muted);
    padding: 12px 14px;
  }

  .mobile-nav a:hover {
    background: var(--surface-2);
    color: var(--ink);
  }

  .hero-grid {
    grid-template-columns: 1fr 0.95fr;
    gap: 35px;
  }

  .hero h1 {
    font-size: clamp(3.2rem, 6vw, 4.6rem);
  }

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

  .journey-shell {
    padding: 76px 28px;
  }

  .journey-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 72px 24px;
  }

  .journey-step-low,
  .journey-step-high {
    transform: none;
  }

  .journey-card {
    min-height: 390px;
  }

  .journey-next {
    right: -36px;
  }

  .journey-step:nth-child(2) .journey-next {
    top: auto;
    right: 50%;
    bottom: -59px;
    transform: translateX(50%) rotate(90deg);
  }

  .onboarding-sticky {
    grid-template-columns: 0.62fr 1.38fr;
    gap: 26px;
  }

  .onboarding-step-intro h3 {
    font-size: clamp(2rem, 3.8vw, 3rem);
  }

  .onboarding-product-frame {
    min-height: 550px;
  }

  .onboarding-screen {
    padding: 23px;
  }

  .signup-screen {
    padding: 0;
  }

  .signup-brand-panel {
    padding: 25px;
  }

  .signup-form-panel {
    padding: 28px 34px;
  }

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

  .testimonial-card,
  .video-testimonial-card {
    grid-column: auto;
  }

  .video-testimonial-card {
    min-height: 390px;
  }

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

  .phone-demo-grid {
    gap: 45px;
  }

  .agent-studio {
    grid-template-columns: 290px 1fr;
  }

  .agent-panel {
    padding: 24px 26px;
  }

  .agent-panel-body {
    max-width: 62%;
  }

  .agent-panel-body h3 {
    font-size: 42px;
  }

  .agent-panel-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .voice-preview {
    width: 100%;
  }

  .feature-bento {
    grid-template-columns: 1fr 1fr;
  }

  .bento-large,
  .bento-wide {
    grid-column: span 2;
  }


  .audience-grid,
  .faq-grid {
    gap: 55px;
  }

  .cta-card {
    gap: 40px;
    padding: 50px;
  }
}

@media (max-width: 820px) {
  .section {
    padding: 86px 0;
  }

  .desktop-only {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-top: 142px;
  }

  .hero-grid,
  .phone-demo-grid,
  .audience-grid,
  .faq-grid,
  .cta-card,
  .footer-top {
    grid-template-columns: 1fr;
  }

  /* One column here, so the heading sits above the list, not beside it. */
  .faq-grid .section-heading {
    position: static;
  }

  .hero-grid {
    gap: 60px;
  }

  .journey-shell {
    margin-top: 38px;
    border-radius: var(--r-hero);
    padding: 64px 20px;
  }

  .journey-card {
    min-height: 370px;
    padding: 24px 22px 20px;
  }

  .journey-card h3 {
    font-size: 24px;
  }

  .onboarding-story-section {
    padding-bottom: 0;
  }

  .onboarding-scroll {
    height: 450vh;
  }

  .phone-demo-sticky {
    top: 70px;
    min-height: calc(100vh - 70px);
    padding: 16px 0;
  }

  /* Stacked, so the pinned block is taller and needs less travel per stage. */
  .phone-demo-scroll {
    height: 260vh;
  }

  .onboarding-sticky {
    top: 70px;
    min-height: calc(100vh - 70px);
    align-content: center;
    align-items: start;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 0;
  }

  .onboarding-story-copy {
    height: auto;
  }

  .onboarding-story-copy {
    padding: 22px;
    border-radius: var(--r-3xl);
  }

  .onboarding-step-intro {
    min-height: 118px;
    padding: 15px 0 10px;
  }

  .onboarding-step-intro h3 {
    margin: 7px 0 9px;
    font-size: clamp(1.9rem, 6vw, 2.7rem);
  }

  .onboarding-step-intro p {
    max-width: 680px;
    font-size: 14px;
  }

  .onboarding-step-nav {
    display: flex;
    overflow-x: auto;
    gap: 7px;
    padding: 2px 2px 8px;
    scrollbar-width: none;
  }

  .onboarding-step-nav::-webkit-scrollbar {
    display: none;
  }

  .onboarding-step-nav button {
    min-width: 158px;
    grid-template-columns: 32px 1fr auto;
    gap: 8px;
    padding: 8px;
  }

  .onboarding-step-nav button > i {
    width: 32px;
    height: 32px;
    border-radius: var(--r-lg);
    font-size: 16px;
  }

  .onboarding-step-nav button span {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }

  .onboarding-step-nav button.active {
    transform: translateY(-2px);
  }

  .onboarding-product-frame {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .onboarding-screen-stack {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .onboarding-frame-bar {
    height: 48px;
  }

  .onboarding-screen-stack {
    height: calc(100% - 48px);
  }

  .hero-visual {
    min-height: 520px;
  }

  .hero-call-card {
    right: 7%;
    left: 7%;
  }

  .note-one {
    right: 0;
  }

  .note-two {
    left: 0;
  }

  .phone-demo-grid {
    gap: 60px;
  }

  .phone-demo-copy {
    max-width: 620px;
  }

  .agent-studio {
    grid-template-columns: 1fr;
  }

  .agent-roster {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    padding: 16px;
  }

  .agent-roster-head {
    display: none;
  }

  .agent-roster-foot {
    grid-column: span 2;
    margin-top: 2px;
  }

  .agent-stage {
    min-height: 620px;
  }

  .agent-panel-body {
    max-width: 100%;
  }

  .agent-portrait {
    width: 52%;
    height: 62%;
    opacity: 0.55;
  }

  .agent-panel.active .agent-portrait {
    opacity: 0.55;
  }

  .agent-chat {
    max-width: 82%;
  }

  .connection-accordion {
    height: 670px;
    flex-direction: column;
    gap: 12px;
  }

  .connection-card {
    flex: 1;
  }

  .connection-card.active {
    flex: 3.5;
  }

  .connection-icon {
    top: 18px;
    left: 20px;
    width: 58px;
    height: 58px;
    border-radius: var(--r-2xl);
    font-size: 28px;
  }

  .connection-collapsed {
    top: 50%;
    right: 64px;
    bottom: auto;
    left: 100px;
    transform: translateY(-50%);
  }

  .connection-collapsed span {
    margin-top: 3px;
  }

  .connection-card:not(.active) .connection-icon {
    top: 50%;
    left: calc(50% - 88px);
    transform: translate(-50%, -50%);
  }

  .connection-card:not(.active) .connection-collapsed {
    top: 50%;
    right: auto;
    left: calc(50% - 44px);
    width: 176px;
    text-align: left;
    transform: translateY(-50%);
  }

  .connection-card.active .connection-collapsed {
    transform: translateY(calc(-50% + 10px));
  }

  .connection-expanded {
    top: 26px;
    right: 64px;
    bottom: 26px;
    left: 112px;
  }

  .connection-expanded h3 {
    font-size: 36px;
  }

  .connection-arrow {
    right: 18px;
    bottom: 18px;
  }

  .audience-grid,
  .faq-grid {
    gap: 50px;
  }

  .testimonial-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-popular,
  .pricing-popular.reveal,
  .pricing-popular.reveal.visible {
    transform: none;
  }

  .cta-card {
    gap: 35px;
  }

  .footer-top {
    gap: 50px;
  }
}

@media (max-width: 600px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .section {
    padding: 72px 0;
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .header-inner {
    min-height: 70px;
  }

  .brand img {
    width: 136px;
  }

  .header-actions .button {
    display: none;
  }

  .mobile-nav {
    top: 70px;
    right: 14px;
    left: 14px;
  }

  .hero {
    padding-top: 120px;
  }

  .onboarding-story-section > .container {
    width: min(calc(100% - 20px), var(--container));
  }

  .onboarding-scroll {
    height: 560vh;
  }

  .onboarding-sticky {
    padding: 10px 0;
  }

  .onboarding-story-copy {
    padding: 20px 18px;
  }

  .onboarding-progress-label {
    margin-bottom: 6px;
  }

  .onboarding-step-intro {
    min-height: 132px;
    padding: 12px 2px 8px;
  }

  .onboarding-step-intro h3 {
    font-size: 1.75rem;
  }

  .onboarding-step-intro p {
    font-size: 12px;
  }

  .onboarding-step-kicker {
    font-size: 10px;
  }

  .onboarding-step-nav button {
    min-width: 152px;
  }

  .onboarding-step-nav button strong {
    font-size: 12px;
  }

  .onboarding-product-frame {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: var(--r-2xl);
  }

  .onboarding-frame-bar {
    height: 44px;
    padding: 0 12px;
  }

  .onboarding-frame-bar > img {
    width: 96px;
  }

  .onboarding-frame-secure {
    font-size: 9px;
  }

  .onboarding-screen-stack {
    height: calc(100% - 44px);
  }

  .onboarding-screen {
    padding: 16px;
  }

  .signup-screen {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .signup-brand-panel {
    display: none;
  }

  .signup-form-panel {
    padding: 22px 26px;
  }

  .signup-form-panel h4 {
    margin-bottom: 14px;
    font-size: 24px;
  }

  .signup-form-panel label {
    margin-bottom: 9px;
  }

  .mini-screen-heading {
    margin-bottom: 12px;
  }

  .mini-screen-heading h4,
  .mini-screen-heading.compact h4 {
    font-size: 20px;
  }

  .mini-plan-grid {
    gap: 6px;
  }

  .mini-plan-card {
    gap: 7px;
    padding: 12px 8px;
  }

  .mini-plan-card > strong {
    font-size: 12px;
  }

  .mini-plan-card b {
    font-size: 20px;
  }

  .mini-plan-card > span {
    align-items: flex-start;
    font-size: 7px;
  }

  .mini-screen-footer {
    margin-top: 10px;
    padding-top: 10px;
  }

  .mini-screen-footer > span {
    max-width: 52%;
  }

  .mini-screen-footer button {
    font-size: 9px;
    padding: 9px 10px;
  }

  .branch-fields {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 9px 0;
  }

  .branch-fields label:last-child {
    display: none;
  }

  .hours-row {
    grid-template-columns: 1fr 52px auto 52px;
    gap: 5px;
    padding: 7px 0;
  }

  .hours-row > span {
    padding: 6px;
  }

  .knowledge-setup-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-additions {
    display: none;
  }

  .website-picker {
    padding: 12px;
  }

  .website-picker label {
    padding: 7px 0;
  }

  .mini-agent-grid {
    gap: 6px;
  }

  .mini-agent-card {
    padding: 9px 5px;
  }

  .mini-agent-card > img {
    width: 43px;
    height: 43px;
  }

  .mini-agent-card p {
    display: none;
  }

  .mini-agent-card button {
    margin-top: 8px;
    font-size: 7px;
    padding: 5px;
  }

  .twilio-connect-card {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .twilio-connect-card p {
    display: none;
  }

  .hero h1 {
    font-size: clamp(2.9rem, 14vw, 4rem);
  }

  .hero-lede {
    font-size: 18px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-proof {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .hero-visual {
    min-height: 500px;
  }

  .hero-call-card {
    top: 30px;
    right: 0;
    left: 0;
    padding: 18px;
  }

  .floating-note {
    display: none;
  }

  .outcome-grid,
  .audience-list,
  .feature-bento {
    grid-template-columns: 1fr;
  }

  .outcomes {
    padding-block: 72px;
  }

  .outcomes > .container {
    width: min(calc(100% - 28px), 1440px);
  }

  .outcome-card {
    min-height: 360px;
    padding: 32px 28px;
  }

  .outcome-card strong {
    margin-top: 44px;
    font-size: 2.75rem;
  }

  .testimonial-card,
  .pricing-card {
    min-height: auto;
    padding: 24px;
  }

  .video-testimonial-card {
    min-height: 420px;
  }

  .testimonial-card blockquote {
    font-size: 18px;
  }

  .video-modal {
    padding: 12px;
  }

  .video-modal-header {
    padding: 14px 16px;
  }

  .video-modal-player {
    min-height: 500px;
    margin: 0 10px;
  }

  .video-modal-player > img {
    height: 500px;
  }

  .video-modal-player-copy {
    top: 16px;
    right: 16px;
    left: 16px;
  }

  .video-modal-controls {
    right: 14px;
    bottom: 14px;
    left: 14px;
    grid-template-columns: 20px auto 1fr 20px;
    gap: 8px;
  }

  .video-modal-controls > span:last-child {
    display: none;
  }

  .steps-section > .container {
    width: min(calc(100% - 28px), 1440px);
  }

  .journey-shell {
    padding: 28px 16px;
  }

  .journey-track {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .journey-card {
    min-height: 348px;
  }

  .journey-step .journey-next,
  .journey-step:nth-child(2) .journey-next {
    top: auto;
    right: 50%;
    bottom: -52px;
    width: 42px;
    height: 42px;
    transform: translateX(50%) rotate(90deg);
  }

  .journey-card-top {
    gap: 22px;
  }

  .journey-card-top > i {
    font-size: 40px;
  }

  .journey-card h3 {
    margin-top: 25px;
    font-size: 24px;
  }

  .phone-stage {
    min-height: 560px;
    transform: scale(0.9);
    transform-origin: top center;
  }

  .phone-device {
    width: 320px;
    height: 580px;
  }

  .phone-tag {
    display: none;
  }

  .agent-roster {
    grid-template-columns: 1fr;
  }

  .agent-roster-foot {
    grid-column: span 1;
    font-size: 12px;
  }

  .agent-row {
    padding: 9px 11px;
  }

  .agent-row-avatar {
    width: 40px;
    height: 40px;
  }

  .agent-stage {
    min-height: 600px;
    border-radius: var(--r-3xl);
  }

  .agent-panel {
    padding: 20px;
  }

  .agent-voice-id {
    display: none;
  }

  .agent-panel-body h3 {
    font-size: 34px;
  }

  .agent-panel-body > p {
    font-size: 14px;
  }

  .agent-portrait {
    width: 62%;
    height: 50%;
    opacity: 0.32;
  }

  .agent-panel.active .agent-portrait {
    opacity: 0.32;
  }

  .agent-chat {
    max-width: 100%;
    margin-top: 18px;
  }

  .agent-chat p {
    max-width: 100%;
    font-size: 12px;
    padding: 9px 13px;
  }

  .agent-panel-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-top: 16px;
  }

  .voice-preview {
    width: 100%;
    min-height: 50px;
  }

  .agent-stats {
    justify-content: space-between;
    gap: 12px;
  }

  .agent-stats b {
    font-size: 18px;
  }

  .connection-accordion {
    height: 720px;
    flex-direction: column;
    gap: 12px;
  }

  .connection-card {
    flex: 1;
  }

  .connection-card.active {
    flex: 4.2;
  }

  .connection-icon {
    top: 16px;
    left: 18px;
    width: 56px;
    height: 56px;
    border-radius: var(--r-2xl);
    font-size: 26px;
  }

  .connection-collapsed {
    top: 50%;
    right: 60px;
    bottom: auto;
    left: 94px;
    transform: translateY(-50%);
  }

  .connection-collapsed span {
    margin-top: 3px;
  }

  .connection-card.active .connection-collapsed {
    transform: translateY(calc(-50% + 10px));
  }

  .connection-expanded {
    top: 24px;
    right: 58px;
    bottom: 24px;
    left: 100px;
  }

  .connection-expanded h3 {
    font-size: 34px;
  }

  .connection-arrow {
    right: 16px;
    bottom: 16px;
  }

  .product-tabs {
    width: 100%;
  }

  .product-tab {
    flex: 1 1 45%;
    justify-content: center;
  }

  .browser-address {
    min-width: 170px;
  }

  .browser-bar {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }

  .product-screen-wrap {
    aspect-ratio: 4 / 3;
  }

  .product-screen {
    object-fit: cover;
    object-position: top left;
  }

  .product-screen[data-product-screen="overview"] {
    object-fit: cover;
    object-position: top left;
  }

  .bento-large,
  .bento-wide {
    display: flex;
    min-height: auto;
    align-items: stretch;
    flex-direction: column;
    grid-column: auto;
  }


  .control-pills,
  .control-pills span {
    width: 100%;
  }

  .cta-card {
    border-radius: var(--r-3xl);
    padding: 30px 22px;
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

/* ---------------------------------------------------------------------------
   Short viewports (most laptops are ~800-900px tall).

   The onboarding story is a sticky, full-height stage: if its content is taller
   than the viewport there is nowhere for the overflow to go, so the bottom of
   the step list and the bottom of the product frame are simply cut off. Every
   other breakpoint here is width-based, which is why a 1920x900 laptop — a wide
   screen, so no width query fires — was the worst case.

   These rules cap the stage at the visible height and compact what is inside it
   so all six steps and the whole frame stay on screen.
   --------------------------------------------------------------------------- */
@media (max-height: 920px) and (min-width: 821px) {
  .onboarding-sticky {
    gap: 26px;
    padding: 16px 0;
  }

  .onboarding-story-copy {
    border-radius: var(--r-3xl);
    padding: 20px 22px;
  }

  .onboarding-step-intro {
    min-height: 0;
    padding: 16px 2px 14px;
  }

  .onboarding-step-intro h3 {
    margin: 8px 0 10px;
    font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  }

  .onboarding-step-intro p {
    font-size: 14px;
    line-height: 1.5;
  }

  .onboarding-step-nav {
    gap: 6px;
  }

  .onboarding-step-nav button {
    border-radius: var(--r-xl);
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    padding: 7px 10px;
  }

  .onboarding-step-nav button > i {
    width: 32px;
    height: 32px;
    border-radius: var(--r-lg);
    font-size: 16px;
  }

  .onboarding-step-nav button strong {
    font-size: 14px;
  }

  .onboarding-step-nav button span {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  /* The 590px floor is what forced the frame past the fold. Let it shrink to
     whatever the stage has left instead. */
  .onboarding-product-frame {
    width: calc((var(--stage-h) - 52px) * 1.6); /* bar is 52px here */
  }

  .onboarding-screen-stack {
    background: var(--canvas);
  }

  .onboarding-frame-bar {
    height: 52px;
    padding: 0 18px;
  }

  .onboarding-frame-bar > img {
    width: 108px;
  }

  .onboarding-screen-stack {
    height: calc(100% - 52px);
  }
}

@media (max-height: 780px) and (min-width: 821px) {
  .onboarding-story-copy {
    padding: 16px;
  }

  .onboarding-step-intro {
    padding: 10px 2px 10px;
  }

  .onboarding-step-intro h3 {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  }

  .onboarding-step-intro p {
    font-size: 14px;
  }

  .onboarding-step-nav button {
    padding: 5px 9px;
  }

  .onboarding-step-nav button > i {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Industries ---------- */
.industries-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #2a1f63 0%, #1d1746 45%, #171238 100%);
  padding: 96px 0 88px;
}

/* faint engineering grid, like graph paper under the cards */
.industries-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}

.industries-glow {
  position: absolute;
  top: -260px;
  left: 50%;
  width: 1000px;
  height: 700px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 107, 255, 0.42), transparent);
  pointer-events: none;
}

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

.industries-section .section-heading {
  margin-bottom: 46px;
}

.industries-section .section-heading h2 {
  color: #fff;
}

.industries-section .section-heading h2 span {
  background: linear-gradient(100deg, #c7b7ff, #6fd8ff 62%, #9df0d0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.industries-section .section-heading p {
  color: rgba(255, 255, 255, 0.66);
}

.eyebrow-light {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  padding: 7px 15px;
}

.industry-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}

.industry-card {
  --tone: #8b6bff;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--r-2xl);
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(6px);
  padding: 22px 20px 24px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease,
    background 0.35s ease, box-shadow 0.35s ease;
}

.industry-card[data-tone="1"] { --tone: var(--tone-1); }
.industry-card[data-tone="2"] { --tone: var(--tone-2); }
.industry-card[data-tone="3"] { --tone: var(--tone-3); }
.industry-card[data-tone="4"] { --tone: var(--tone-4); }

/* accent bloom that fades in from the top-left on hover */
.industry-card::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 42%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.industry-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--tone) 52%, transparent);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: 0 24px 48px rgba(10, 6, 34, 0.4);
}

.industry-card:hover::before {
  opacity: 1;
}

.industry-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--tone) 34%, transparent);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--tone) 15%, transparent);
  color: var(--tone);
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease,
    box-shadow 0.35s ease;
}

.industry-icon svg {
  width: 22px;
  height: 22px;
}

.industry-card:hover .industry-icon {
  transform: translateY(-2px) scale(1.06);
  background: var(--tone);
  color: #171238;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tone) 45%, transparent);
}

.industry-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 7px;
  color: #fff;
  font-size: 16px;
  letter-spacing: -0.015em;
}

.industry-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.5;
}

/* ----- "also answering for" ticker, in place of a see-all button ----- */
.industry-more {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 26px;
}

.industry-more-label {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.industry-ticker {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.industry-ticker-track {
  display: flex;
  width: max-content;
  gap: 10px;
  animation: industryScroll 42s linear infinite;
}

.industry-ticker:hover .industry-ticker-track {
  animation-play-state: paused;
}

.industry-ticker-track span {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  padding: 8px 16px;
  white-space: nowrap;
}

@keyframes industryScroll {
  to { transform: translateX(-50%); }
}

@media (max-width: 1080px) {
  .industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 820px) {
  .industries-section {
    padding: 72px 0 66px;
  }

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

  .industry-more {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .industry-more-label {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .industry-grid {
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .industry-card {
    display: grid;
    align-items: start;
    gap: 0 15px;
    grid-template-columns: 44px 1fr;
    padding: 16px;
  }

  .industry-icon {
    margin-bottom: 0;
    grid-row: span 2;
  }

  .industry-card h3 {
    margin-bottom: 4px;
    align-self: center;
  }
}

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

/* More than answering: the capabilities grid. */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.capability-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  padding: 30px 28px;
  box-shadow: 0 1px 2px rgba(23, 23, 46, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.capability-card:hover {
  border-color: var(--accent-line);
  box-shadow: 0 18px 40px -24px rgba(116, 82, 247, 0.35);
  transform: translateY(-2px);
}

.capability-card i {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 22px;
}

.capability-card strong {
  margin-top: 6px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
}

.capability-card p {
  margin: 0;
  color: var(--body);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 1080px) {
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .capability-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .capability-card { padding: 24px 22px; border-radius: 22px; }
}

/* Talk to sales window */
body.sales-modal-open { overflow: hidden; }

.sales-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.sales-modal[hidden] { display: none; }

.sales-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 18, 38, 0.55);
  backdrop-filter: blur(4px);
}

.sales-modal-card {
  position: relative;
  display: flex;
  width: min(480px, 100%);
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  padding: 34px 32px 28px;
  box-shadow: 0 30px 80px -30px rgba(17, 18, 38, 0.45);
}

.sales-modal-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sales-modal-card p {
  margin: 0;
  color: var(--body);
  font-size: 15px;
  line-height: 1.6;
}

.sales-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}

.sales-modal-close:hover { background: var(--surface-2); color: var(--ink); }

.sales-modal-email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  background: var(--accent);
  padding: 10px 10px 10px 16px;
}

.sales-modal-email span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--accent-ink);
  font-size: 16px;
  font-weight: 600;
}

.sales-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sales-modal-actions .button { justify-content: center; }

.sales-modal-mailto {
  align-self: center;
  color: var(--muted);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sales-modal-mailto:hover { color: var(--ink); }

@media (max-width: 600px) {
  .sales-modal-card { padding: 28px 22px 22px; border-radius: 22px; }
  .sales-modal-actions { grid-template-columns: 1fr; }
}

/* ---- Legal pages (privacy.html, terms.html) ----
   Long-form reading under the fixed header, in the header's own `.container`
   so the content lines up with the logo and "Get started" at every width. */
.legal {
  padding: 150px 0 96px;
  background: var(--canvas);
}

.legal-head {
  margin-bottom: 34px;
}

.legal-head h1 {
  margin: 12px 0 10px;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.legal-head p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.legal-body {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--body);
  padding: 44px 48px;
  overflow-wrap: break-word;
}

.legal-body h2 {
  margin: 38px 0 12px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.3;
}

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

.legal-body h3 {
  margin: 22px 0 8px;
  color: var(--ink);
  font-size: 17px;
}

.legal-body p,
.legal-body li {
  font-size: 16px;
  line-height: 1.7;
}

.legal-body p {
  margin: 0 0 14px;
}

.legal-body ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal-body li + li {
  margin-top: 6px;
}

.legal-body strong {
  color: var(--ink);
}

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

.legal-callout {
  margin: 0 0 18px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background: var(--accent);
  color: var(--ink);
  padding: 16px 20px;
}

.legal-callout p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .legal {
    padding: 112px 0 64px;
  }

  .legal-body {
    padding: 28px 20px;
  }

  .legal-body h2 {
    font-size: 20px;
  }
}