/* VocoBook — front desk landing.
   Design language: Vocobook's own (white canvas, Manrope grotesk display,
   DM Sans body, parrot blue #1167e8, navy #07162f, amber #ff9c2a).
   Refined 2026-09-06: one icon grid, one ink scale, one motion curve. */

:root {
  /* brand */
  --blue: #1167e8;
  --blue2: #14b8f4;
  --navy: #07162f;
  --pale: #eff8ff;
  --line: #d8e7f5;
  --orange: #ff9c2a;
  --white: #fff;

  /* ink scale — three roles, every one ≥4.5:1 on every ground it is used on */
  --ink: #07162f;        /* display + strong */
  --ink-1: #33435b;      /* navigation, links      10.0:1 on white */
  --ink-2: #52627a;      /* body 16–19px            6.20 white · 5.77 pale */
  --ink-3: #4f6076;      /* labels ≤14px            6.43 white · 6.18 #f7fbff · 5.78 #eaf4ff */
  --on-blue: #d9ecff;    /* small text on blue      4.99 on #0f5dcf · 7.87 on #053f9e */
  --on-blue-2: #c2dcfa;  /* body on blue            4.94 on #0a52c4 */

  /* one motion vocabulary */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}
.shell { width: min(1180px, calc(100% - 48px)); margin: auto }

/* ---- icons: one grid. 24 viewBox, stroke 1.9, round caps, currentColor ---- */
svg { display: block; flex: none }

/* ---- nav ---- */
.nav { height: 84px; display: flex; align-items: center; justify-content: space-between }
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); font: 800 24px Manrope;
  padding: 7px 0;   /* 44px tap target on phone */
}
.brand > span:last-child > span { color: var(--blue) }
.brand-mark {
  width: 37px; height: 37px; border-radius: 13px;
  background: linear-gradient(145deg, var(--blue2), var(--blue));
  display: flex; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 8px 20px #0b73ea30;
}
.brand-mark span, .brand-mark i, .brand-mark b { width: 3px; border-radius: 3px; background: #fff; display: block }
.brand-mark span { height: 12px }
.brand-mark i { height: 20px }
.brand-mark b { height: 8px }
.nav nav { display: flex; gap: 34px }
.nav nav a, .text-link { color: var(--ink-1); text-decoration: none; font-weight: 600 }

/* ---- buttons ---- */
.button {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 14px 14px 14px 22px; border-radius: 13px;
  background: var(--blue); color: #fff; text-decoration: none; font-weight: 700; font-size: 16px;
  box-shadow: 0 10px 24px #1167e833;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.button:hover { transform: translateY(-2px); background: #0d5ad0; box-shadow: 0 14px 30px #1167e84d }
.button > span {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; background: #fff; color: var(--blue);
}
.button > span svg { width: 15px; height: 15px }
.button-small { padding: 10px 11px 10px 16px; gap: 13px }

/* ---- hero ---- */
.hero {
  min-height: 680px; padding: 62px 0 72px;
  display: grid; grid-template-columns: .96fr 1.04fr; align-items: center; gap: 38px;
}
.eyebrow, .kicker { font-size: 12px; letter-spacing: .11em; font-weight: 800; color: var(--blue) }
.eyebrow { display: flex; align-items: center; gap: 9px }
.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: #26cf90; box-shadow: 0 0 0 5px #26cf9020 }
.hero h1, .section h2, .results h2, .demo h2 {
  font-family: Manrope; font-weight: 800; letter-spacing: -.055em;
  line-height: 1.03; margin: 22px 0; text-wrap: balance;
}
.hero h1 { font-size: clamp(42px, 4.85vw, 68px) }
.hero h1 em { font-style: normal; color: var(--blue) }
.hero-copy > p { max-width: 600px; font-size: 18px; line-height: 1.62; color: var(--ink-2) }
.hero-actions { display: flex; align-items: center; gap: 27px; margin: 32px 0 }
.text-link { display: flex; align-items: center; gap: 10px }
.play {
  display: grid; place-items: center; width: 35px; height: 35px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--blue);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.play svg { width: 13px; height: 13px; fill: currentColor; margin-left: 1px }
.text-link:hover .play { border-color: var(--blue); background: var(--pale) }

.proof { display: flex; align-items: center; gap: 18px; padding-top: 16px; border-top: 1px solid var(--line); max-width: 540px }
.proof p { font-size: 14px; line-height: 1.5; color: var(--ink-3) }
.proof strong { color: var(--ink) }
/* three tinted discs — a queue of callers, not invented people */
.avatars { display: flex }
.avatars span {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff;
  margin-left: -7px; display: block;
  background: linear-gradient(145deg, #cfe8ff, #9dc9f8);
  box-shadow: inset 0 1px 2px #ffffff9c;
}
.avatars span:nth-child(2) { background: linear-gradient(145deg, #a9d3fb, #5ba2f0) }
.avatars span:nth-child(3) { background: linear-gradient(145deg, #6ea9f2, var(--blue)) }

.hero-visual { position: relative }
.image-frame {
  position: relative; border-radius: 38px; overflow: hidden;
  background: linear-gradient(145deg, #f8fbff, #dcefff);
  box-shadow: 0 30px 70px #1673d526;
}
/* one considered light: top-left highlight, cool falloff, thin inner edge */
.image-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(115% 85% at 20% 6%, #ffffff5e 0%, #ffffff00 48%),
    linear-gradient(202deg, #eff8ff00 42%, #a9d0f23d 100%);
  box-shadow: inset 0 0 0 1px #ffffffbf, inset 0 -80px 100px -60px #0a3c7338;
}
.image-frame img { display: block; width: 100%; aspect-ratio: 1.14; object-fit: cover }

.call-card, .metric-card {
  position: absolute; border: 1px solid #ffffffb5; background: #ffffffdd;
  backdrop-filter: blur(12px); box-shadow: 0 18px 50px #173b6729;
}
.call-card { left: -26px; top: 55px; padding: 13px 17px; border-radius: 17px; display: flex; align-items: center; gap: 12px }
.call-icon {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 13px; background: var(--blue); color: #fff;
}
.call-icon svg { width: 22px; height: 22px }
/* THE SIGNATURE — the one moment on the page. A ring that is being picked up. */
.call-icon::before, .call-icon::after {
  content: ''; position: absolute; inset: 0; border-radius: 13px;
  border: 2px solid var(--blue); opacity: 0;
  animation: ring 2.4s var(--ease) infinite;
}
.call-icon::after { animation-delay: 1.2s }
@keyframes ring {
  0%   { transform: scale(1);    opacity: .55 }
  70%  { opacity: 0 }
  100% { transform: scale(1.72); opacity: 0 }
}
.call-card div:nth-child(2) { display: flex; flex-direction: column; gap: 3px }
.call-card small, .metric-card small { font-size: 12px; letter-spacing: .09em; font-weight: 800 }
.call-card small { color: var(--ink-3) }
.call-card strong { font-size: 14px }
.live-dot { width: 9px; height: 9px; background: #22cc8a; border-radius: 50%; box-shadow: 0 0 0 5px #22cc8a22 }
.metric-card {
  right: 18px; bottom: 26px; border-radius: 20px; padding: 17px 20px;
  display: flex; flex-direction: column; color: #fff;
  background: linear-gradient(150deg, #0f5dcf, #053f9e);
}
.metric-card small { color: var(--on-blue) }
.metric-card strong { font-size: 18px; margin: 4px 0 }
.metric-card strong b { font-size: 34px }
.metric-card span { font-size: 12px; color: var(--on-blue) }

/* ---- ticker: spacing is gap, motion is a duplicated track ---- */
.ticker { overflow: hidden; background: var(--navy); color: #fff; padding: 17px 0; font-weight: 700 }
.ticker-track { display: flex; justify-content: center }
.ticker-run { display: flex; align-items: center; gap: 40px; font-size: 16px; white-space: nowrap }
.ticker-run > i:last-child { display: none }   /* a separator separates; it never trails */
.ticker-run:last-child { display: none }
.ticker-run i { display: flex; color: var(--blue2) }
.ticker-run i svg { width: 13px; height: 13px }
@keyframes marquee { to { transform: translateX(-50%) } }

/* ---- how it works ---- */
.section { padding: 112px 0 }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 45px; margin-bottom: 52px }
.section h2, .results h2, .demo h2 { font-size: clamp(38px, 4vw, 58px) }
.section-head > p { max-width: 420px; font-size: 18px; line-height: 1.6; color: var(--ink-2); margin-bottom: 20px }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.steps article {
  position: relative; padding: 31px; border: 1px solid var(--line); border-radius: 24px;
  min-height: 360px; background: #fff;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.steps article:hover { transform: translateY(-6px); box-shadow: 0 22px 50px #0e64bf13 }
.steps .featured { background: var(--pale); border-color: #cbe3f8 }
.number { float: right; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--ink-3) }
.icon-box {
  clear: both; width: 78px; height: 78px; display: grid; place-items: center;
  border-radius: 24px; background: linear-gradient(145deg, #1682ff, #0754c8);
  box-shadow: inset 0 2px 3px #ffffff73, 0 15px 30px #1167e83d;
  color: #fff; margin: 33px 0;
}
.icon-box svg { width: 34px; height: 34px }
.steps h3 { font: 800 24px Manrope; margin: 0 0 13px }
.steps p { font-size: 16px; line-height: 1.6; color: var(--ink-2) }
.status {
  position: absolute; left: 31px; bottom: 29px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--blue);
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor }
.status svg { width: 14px; height: 14px }

/* ---- results ---- */
.results { padding: 112px 0; background: linear-gradient(130deg, #0a52c4, #062c73); color: #fff; overflow: hidden }
.result-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 80px }
.kicker.light { color: #9fdcff }
.results p { font-size: 18px; line-height: 1.7; color: var(--on-blue-2); max-width: 500px }
.button-white { background: #fff; color: var(--ink); margin-top: 20px }
.dashboard {
  background: #f7fbff; color: var(--ink); padding: 25px; border-radius: 28px;
  box-shadow: 0 35px 80px #00173966; transform: rotate(1.5deg);
}
.dash-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 22px }
.dash-top div { display: flex; flex-direction: column }
.dash-top small { font-size: 12px; color: var(--ink-3) }
.dash-top span { font-size: 12px; color: #086b4a; background: #dff9ee; padding: 7px 11px; border-radius: 99px }
.dash-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 14px; border-top: 1px solid var(--line) }
.mini-icon { width: 42px; height: 42px; border-radius: 13px; background: #e1efff; color: #0b57c9; display: grid; place-items: center }
.mini-icon svg { width: 20px; height: 20px }
.dash-row div:nth-child(2) { display: flex; flex-direction: column; gap: 3px }
.dash-row small, .dash-row time { font-size: 12px; color: var(--ink-3) }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px }
.dash-stats div { background: #eaf4ff; border-radius: 17px; padding: 15px }
.dash-stats b { display: block; font: 800 28px Manrope; color: var(--blue) }
.dash-stats span { font-size: 12px; color: var(--ink-3) }

/* ---- demo ---- */
.demo { padding: 112px 0 }
.demo-panel {
  background: #eff8ff; border: 1px solid #d5eaff; border-radius: 0; padding: 54px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px;
}
.demo h2 { margin-bottom: 14px }
.demo p { color: var(--ink-2); max-width: 570px; font-size: 16px; line-height: 1.6 }
.call-button {
  border: 0; background: var(--navy); color: #fff; border-radius: 20px; padding: 16px;
  display: flex; align-items: center; gap: 15px; min-width: 310px; text-align: left;
  font-family: inherit; cursor: pointer; box-shadow: 0 18px 40px #07162f33;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.call-button:hover { transform: translateY(-2px); box-shadow: 0 22px 46px #07162f3d }
.call-button .ring {
  position: relative; width: 53px; height: 53px; border-radius: 17px;
  background: var(--blue); display: grid; place-items: center;
  transition: background .22s var(--ease);
}
.call-button .ring svg { width: 24px; height: 24px }
.call-button span:nth-child(2) { display: flex; flex-direction: column; gap: 4px }
.call-button small { font-size: 12px; color: #8fb1dc; font-weight: 800; letter-spacing: .08em }
.call-button strong { font-size: 16px }
.call-button i { font-style: normal; margin-left: auto; transition: transform .22s var(--ease) }
.call-button i svg { width: 20px; height: 20px }
.call-button.active .ring { background: #e04a4a; animation: pulse 1.2s var(--ease) infinite }
.call-button.active i { transform: rotate(135deg) }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px #e04a4a33 } }

/* ---- footer ---- */
footer {
  min-height: 110px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--ink-3); font-size: 14px;
}
footer .brand { font-size: 18px }
footer .brand-mark { width: 30px; height: 30px; border-radius: 9px }

/* ---- ≤900 ---- */
@media (max-width: 900px) {
  .nav nav { display: none }
  .hero { grid-template-columns: 1fr; padding-top: 35px }
  .hero-visual { margin: 15px 25px }
  .result-grid { grid-template-columns: 1fr; gap: 40px }
  .demo-panel { grid-template-columns: 1fr }
  .steps { grid-template-columns: 1fr }
  .steps article { min-height: 320px }
  .section-head { display: block }
  /* the strip no longer fits a line: it becomes a real marquee */
  .ticker-track { width: max-content; justify-content: flex-start; animation: marquee 28s linear infinite }
  .ticker-run { padding-right: 40px }
  .ticker-run > i:last-child { display: flex }
  .ticker-run:last-child { display: flex }
  .ticker:hover .ticker-track { animation-play-state: paused }
}

/* ---- ≤600 ---- */
@media (max-width: 600px) {
  .shell { width: min(1180px, calc(100% - 28px)) }
  .nav { height: 70px }
  .button-small { display: none }
  .hero { padding-bottom: 50px }
  .hero h1 { font-size: 42px }
  .hero-actions { align-items: flex-start; flex-direction: column }
  .hero-visual { margin: 10px 0 }
  .image-frame { border-radius: 24px }
  .call-card { left: 8px; top: 15px; transform: scale(.82); transform-origin: left top }
  .metric-card { right: 8px; bottom: 12px; transform: scale(.82); transform-origin: right bottom }
  .section { padding: 78px 0 }
  .section h2, .results h2, .demo h2 { font-size: 38px }
  .section-head { margin-bottom: 30px }
  .results { padding: 75px 0 }
  .dashboard { padding: 15px }
  .dash-stats { grid-template-columns: 1fr }
  .demo { padding: 75px 0 }
  .demo-panel { padding: 30px 22px }
  .call-button { min-width: 0; width: 100% }
  .ticker-run { gap: 32px; padding-right: 32px }
  footer { padding: 30px 0; gap: 22px; align-items: flex-start; flex-direction: column }
}

/* ---- a still, composed page ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .call-icon::before, .call-icon::after { display: none }
  .ticker-track { animation: none !important; width: 100%; flex-wrap: wrap; justify-content: center }
  .ticker-run:last-child { display: none }
}

/* --- the two demos: islands from the live page, restyled by token ---------- */
.vb-bits { --vb-ink: var(--navy); --vb-body: #536279; --vb-muted: #7b8da6; --vb-line: var(--line); --vb-accent: var(--blue); --vb-amber: var(--orange); --vb-surface-quiet: var(--pale); font-family: "DM Sans", sans-serif; }
.vb-bits .vb-conv__title, .vb-bits h2, .vb-bits h3 { font-family: Manrope, sans-serif; letter-spacing: -.03em; }
.hear .section-head { margin-bottom: 40px; }

/* The live demo. The island's children join the panel's grid directly
   (display: contents), so the page's own phone button can sit beside the
   island's email field, with the spectrum on the right. The island's orb and
   its three buttons are hidden: the phone button drives them (js/demo.js). */
.demo-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "head head" "cta stage" "form stage"; column-gap: 48px; row-gap: 18px; align-items: center; text-align: left; }
.demo-head { grid-area: head; max-width: 640px; margin-bottom: 26px; position: relative; z-index: 1; }
.demo-panel .call-button { grid-area: cta; justify-self: start; position: relative; z-index: 1; }
.demo-panel [data-bit="voice-desk"], .demo-panel .vb-desk { display: contents; }
.demo-panel .vb-desk__form, .demo-panel .vb-desk__talk { grid-area: form; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 420px; }
.demo-panel .vb-desk__input { width: 100%; }
.demo-panel .vb-desk__call, .demo-panel .vb-desk__hangup, .demo-panel .vb-desk__again { display: none; }
.demo-panel .vb-desk__fine, .demo-panel .vb-desk__caption, .demo-panel .vb-desk__error { margin: 0; font-size: 14px; line-height: 1.5; text-align: left; }
.demo-panel .vb-desk__caption { font-size: 17px; color: var(--navy); font-weight: 600; }
.demo-panel .vb-desk__stage { grid-area: stage; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; min-height: 300px; padding: 10px 0; }
.demo-panel .vb-desk__spectrum { transform: scale(2.1); transform-origin: center; }
.demo-panel .vb-desk__status { font-size: 13px; letter-spacing: .11em; font-weight: 800; color: var(--blue); text-transform: uppercase; }

/* the plumes: the parrot's feathers, in the panel's margins, blue like the mark */
.plumes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.plume { position: absolute; width: 120px; opacity: .38; will-change: translate; }
.plume--1 { top: 7%; right: 24%; width: 118px; rotate: -18deg; animation: drift 11s ease-in-out infinite; }
.plume--2 { top: 9%; right: 3%; width: 96px; rotate: 124deg; opacity: .3; animation: drift-rev 13s ease-in-out -4s infinite; }
.plume--3 { display: none; }
.plume--4 { bottom: -4%; right: 1%; width: 92px; rotate: -62deg; opacity: .3; animation: drift 12.5s ease-in-out -7s infinite; }
@keyframes drift { 0%, 100% { translate: 0 0 } 50% { translate: 10px 30px } }
@keyframes drift-rev { 0%, 100% { translate: 0 0 } 50% { translate: -12px -26px } }
@keyframes nudge { 0%, 100% { translate: 0 0 } 30% { translate: -6px 0 } 60% { translate: 6px 0 } }
.demo-panel .vb-desk__input.is-needed { animation: nudge .4s var(--ease); border-color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .plume { animation: none; translate: none } }
@media (max-width: 900px) {
  .plumes { display: none; }
  .demo-panel { grid-template-columns: 1fr; grid-template-areas: "head" "cta" "form" "stage"; }
  .demo-panel .vb-desk__stage { min-height: 140px; }
  .demo-panel .vb-desk__spectrum { transform: scale(1.2); }
}

/* compact demo card (Aimar: "too big, compact it") */
.demo { padding: 72px 0; }
.demo-panel { padding: 40px 44px; column-gap: 40px; row-gap: 12px; }
.demo-head { margin-bottom: 10px; max-width: 560px; }
.demo h2 { font-size: clamp(30px, 2.8vw, 40px); margin: 12px 0 8px; }
.demo p { font-size: 15px; max-width: 520px; }
.demo-panel .call-button { padding: 12px; }
.demo-panel .call-button .ring { width: 44px; height: 44px; }
.demo-panel .vb-desk__stage { min-height: 200px; gap: 14px; padding: 0; }
.demo-panel .vb-desk__orbwrap { transform: scale(1.25); margin: 14px 0 22px; }
.demo-panel .vb-desk__spectrum { transform: scale(1.5); }
.demo-panel .vb-desk__form, .demo-panel .vb-desk__talk { gap: 8px; }
.plume--1 { width: 92px; } .plume--2 { width: 76px; } .plume--4 { width: 72px; }
@media (max-width: 600px) { .demo { padding: 56px 0; } .demo-panel { padding: 28px 20px; } }

/* the phone tile rings in blue on every tap, and keeps ringing while the call is on */
.call-button .ring::before, .call-button .ring::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--blue2); opacity: 0; pointer-events: none;
}
.call-button.is-tapped .ring::before, .call-button.is-tapped .ring::after,
.call-button.active .ring::before, .call-button.active .ring::after { animation: ring 2.4s var(--ease) infinite; }
.call-button.is-tapped .ring::after, .call-button.active .ring::after { animation-delay: 1.2s }
.call-button.is-tapped .ring { animation: none; }
.call-button.active .ring { background: var(--blue); animation: none; }
.call-button.active i { transform: rotate(135deg) }
@media (prefers-reduced-motion: reduce) { .call-button .ring::before, .call-button .ring::after { animation: none !important } }

/* the recorded call: a compact landscape rectangle, words left, player right */
.hear .vb-conv { max-width: none; border-radius: 0; padding: 34px 40px 28px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-areas: "mark mark" "title clock" "lede wave" "lede panel"; column-gap: 44px; row-gap: 0; align-items: start; }
.hear .vb-conv__mark { grid-area: mark; position: static; margin: 0 0 14px; width: 38px; height: 38px; }
.hear .vb-conv__title { grid-area: title; text-align: left; margin: 0; padding: 0; max-width: none; font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; }
.hear .vb-conv__lede { grid-area: lede; text-align: left; margin: 12px 0 0; max-width: 420px; font-size: 15px; }
.hear .vb-conv__clock { grid-area: clock; margin: 0; text-align: left; }
.hear .vb-conv__wave { grid-area: wave; height: 56px; margin-top: 12px; }
.hear .vb-conv__panel { grid-area: panel; margin-top: 14px; border-radius: 0; }
.hear .vb-conv__line { min-height: 2.6em; }
@media (max-width: 900px) {
  .hear .vb-conv { grid-template-columns: 1fr; grid-template-areas: "mark" "title" "lede" "clock" "wave" "panel"; padding: 26px 22px 22px; }
  .hear .vb-conv__clock { margin-top: 16px; }
}
.hear { padding: 80px 0; }
.hear .section-head { margin-bottom: 28px; align-items: center; }
.hear .section-head h2 { font-size: clamp(30px, 2.8vw, 40px); margin: 12px 0 0; }
.hear .section-head > p { font-size: 15px; max-width: 380px; margin-bottom: 0; }

/* tighter card, a bigger agent, the feathers gathered behind it */
.demo-panel { padding: 30px 40px 28px; row-gap: 6px; column-gap: 32px; }
.demo-head { margin-bottom: 4px; }
.demo p { margin: 6px 0 0; }
.demo-panel .vb-desk__stage { min-height: 170px; gap: 6px; }
.demo-panel .vb-desk__orbwrap { transform: scale(1.55); margin: 26px 0 30px; }
.demo-panel .vb-desk__spectrum { transform: scale(1.35); }
.plume { opacity: .5; }
.plume--1 { display: block; top: 6%; right: 27%; width: 104px; rotate: -24deg; opacity: .48; }
.plume--2 { display: block; top: 4%; right: 5%; width: 88px; rotate: 118deg; opacity: .42; }
.plume--3 { display: block; top: auto; left: auto; bottom: 4%; right: 28%; width: 86px; rotate: 62deg; opacity: .4; }
.plume--4 { display: block; bottom: 2%; right: 5%; width: 96px; rotate: -58deg; opacity: .44; }
.plume--3 { bottom: auto; top: 44%; right: 33%; rotate: 20deg; }
.plume--4 { bottom: auto; top: 36%; right: 3%; rotate: -40deg; }
/* no kickers: headlines carry the section on their own */
.section-head h2, .results h2, .demo h2, .hear .section-head h2 { margin-top: 0; }
.hero h1 { margin-top: 0; }

/* --- header and hero, aligned like the reference: nav beside the logo, actions right,
       one-line headline over a stack of short lines, the bird floating on the right --- */
.nav { justify-content: flex-start; gap: 34px; }
.nav nav { gap: 28px; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-signin { color: var(--navy); text-decoration: none; font-weight: 600; font-size: 15px; }
.button-outline { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border: 1.5px solid #c9d6e6; border-radius: 10px; color: var(--navy); text-decoration: none; font-weight: 700; font-size: 15px; transition: border-color .2s var(--ease), background .2s var(--ease); }
.button-outline:hover { border-color: var(--navy); background: #fff; }
.button-outline--lg { padding: 14px 22px; border-radius: 13px; font-size: 16px; border-color: #cfdcef; background: #fff; box-shadow: 0 6px 18px #07162f0f; }
.button-outline--lg:hover { border-color: var(--blue); color: var(--blue); }
.button-outline--lg .btn-play { width: 30px; height: 30px; margin-right: 12px; padding: 9px; border-radius: 9px; background: #eaf2ff; color: var(--blue); box-sizing: border-box; }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; min-height: 0; padding: 48px 0 56px; align-items: center; }
.hero h1 { font-size: clamp(44px, 5.2vw, 76px); line-height: 1; margin: 0 0 22px; white-space: nowrap; }
.hero-lines { display: flex; flex-direction: column; gap: 4px; margin: 0 0 30px; max-width: none; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.45; color: var(--navy); font-weight: 500; }
.hero-lines em { font-style: normal; color: var(--blue); }
.hero-actions { margin: 0; gap: 14px; }
.hero-visual { justify-self: end; width: 100%; max-width: 640px; }
.hero-bird { display: block; width: 100%; height: auto; }
@media (max-width: 1100px) { .hero h1 { white-space: normal; } }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 24px; } .hero-visual { justify-self: center; max-width: 520px; margin: 0; } .nav nav { display: none; } }
@media (max-width: 600px) { .hero h1 { font-size: 40px; } .hero-lines { font-size: 17px; } .nav-signin { display: none; } .hero-actions { align-items: stretch; gap: 12px; } .hero-actions .button { justify-content: space-between; } .hero-actions .button-outline--lg { justify-content: center; } }

/* --- the button asks to be pressed: a slow ring while idle, and a drawn arrow --- */
.call-button { overflow: visible; }
.call-button.is-idle .ring::before, .call-button.is-idle .ring::after { animation: ring 4.6s var(--ease) infinite; }
.call-button.is-idle .ring::after { animation-delay: .9s; }
.call-nudge { position: absolute; left: 100%; top: -46px; margin-left: 6px; display: flex; align-items: flex-end; gap: 6px; color: var(--blue); pointer-events: none; animation: bob 2.6s ease-in-out infinite; white-space: nowrap; }
.call-nudge svg { width: 78px; height: 46px; }
.call-nudge b { font: 700 14px "DM Sans", sans-serif; color: var(--blue); transform: translateY(-30px); }
.call-button.active .call-nudge, .call-button.is-tapped .call-nudge { display: none; }
@keyframes bob { 0%, 100% { translate: 0 0 } 50% { translate: 0 6px } }
@media (max-width: 900px) { .call-nudge { display: none; } }
@media (prefers-reduced-motion: reduce) { .call-nudge { animation: none } .call-button.is-idle .ring::before, .call-button.is-idle .ring::after { animation: none } }

/* --- the landing card: after two seconds, a free call for an email --- */
.call-pop { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: min(380px, calc(100% - 32px)); background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 70px -20px #07162f55; padding: 20px 20px 16px; animation: pop-in .5s var(--ease); }
.call-pop[hidden] { display: none; }
.call-pop__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: #f1f5fa; color: var(--navy); cursor: pointer; border-radius: 50%; }
.call-pop__close svg { width: 16px; height: 16px; }
.call-pop__bird { display: block; width: 190px; height: auto; margin: -6px 0 4px -10px; }
.call-pop__body strong { display: block; font: 800 22px/1.15 Manrope, sans-serif; color: var(--navy); letter-spacing: -.03em; margin-bottom: 6px; }
.call-pop__body p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #536279; }
.call-pop__form { display: flex; flex-direction: column; gap: 10px; }
.call-pop__form input { width: 100%; padding: 13px 16px; border: 1.5px solid #c9d6e6; border-radius: 12px; font: 15px "DM Sans", sans-serif; color: var(--navy); outline: none; }
.call-pop__form input:focus { border-color: var(--blue); }
.call-pop__form .button { justify-content: space-between; }
.call-pop__later { margin-top: 10px; border: 0; background: none; color: #7b8da6; font: 600 13px "DM Sans", sans-serif; cursor: pointer; padding: 4px 0; }
@keyframes pop-in { from { opacity: 0; translate: 0 18px } to { opacity: 1; translate: 0 0 } }
@media (max-width: 600px) { .call-pop { right: 12px; left: 12px; bottom: 12px; width: auto; } .call-pop__bird { width: 150px; } }

/* --- what it does: six capabilities, same card language as the steps --- */
.caps { padding-top: 0; }
.caps .section-head { margin-bottom: 36px; align-items: end; }
.caps .section-head h2 { font-size: clamp(32px, 3.2vw, 46px); }
.caps .section-head > p { font-size: 16px; max-width: 420px; }
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.caps-grid article { padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: 24px; background: #fff; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.caps-grid article:hover { transform: translateY(-4px); box-shadow: 0 22px 50px #0e64bf13; }
.caps-grid .icon-box { width: 54px; height: 54px; border-radius: 16px; margin: 0 0 18px; }
.caps-grid .icon-box svg { width: 24px; height: 24px; }
.caps-grid h3 { font: 800 19px/1.2 Manrope, sans-serif; letter-spacing: -.02em; margin: 0 0 8px; color: var(--navy); }
.caps-grid p { margin: 0; font-size: 15px; line-height: 1.55; color: #68788e; }
@media (max-width: 900px) { .caps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .caps-grid { grid-template-columns: 1fr; } .caps .section-head { display: block; } }

/* order of the left column: language, email, THEN the phone button, then the fine print */
.demo-panel { grid-template-areas: "head head" "lang stage" "email stage" "cta stage" "fine stage"; }
.demo-panel .vb-desk__form { display: contents; }
.demo-panel .vb-desk__lang { grid-area: lang; justify-content: flex-start; margin-top: 6px; }
.demo-panel .vb-desk__input { grid-area: email; max-width: 420px; width: 100%; }
.demo-panel .call-button { grid-area: cta; margin-top: 8px; }
.demo-panel .vb-desk__fine { grid-area: fine; max-width: 420px; }
.demo-panel .vb-desk__talk { grid-column: 1; grid-row: 2 / 4; }
.demo-panel .vb-desk__stage { grid-area: stage; grid-row: 2 / 6; }
@media (max-width: 900px) {
  .demo-panel { grid-template-areas: "head" "lang" "email" "cta" "fine" "stage"; }
  .demo-panel .vb-desk__stage { grid-row: auto; }
  .demo-panel .vb-desk__input { max-width: none; }
}

/* the nudge sits beside the button now, arrow pointing at it */
.call-nudge { top: 50%; translate: 0 -50%; margin-left: 12px; align-items: center; gap: 8px; animation: bob-x 2.4s ease-in-out infinite; }
.call-nudge svg { width: 56px; height: 22px; }
.call-nudge b { transform: none; }
@keyframes bob-x { 0%, 100% { translate: 0 -50% } 50% { translate: 6px -50% } }

/* stacked (no room for two columns): everything on the centre line */
@media (max-width: 900px) {
  .demo-panel { justify-items: center; text-align: center; }
  .demo-head { margin-left: auto; margin-right: auto; }
  .demo-panel .vb-desk__lang { justify-content: center; }
  .demo-panel .vb-desk__input { max-width: 460px; }
  .demo-panel .call-button { justify-self: center; }
  .demo-panel .vb-desk__fine, .demo-panel .vb-desk__caption, .demo-panel .vb-desk__error { text-align: center; max-width: 460px; }
  .demo-panel .vb-desk__talk { align-items: center; }
}

/* during a call, everything decorative stands still */
.is-calling .plume, .is-calling .call-nudge, .is-calling .ticker-run, .is-calling .call-icon::before, .is-calling .call-icon::after { animation-play-state: paused !important; }
.is-calling .call-nudge { display: none; }
.is-calling .steps article, .is-calling .caps-grid article { transition: none; }
/* the spectrum sits a little lower under the orb */
.demo-panel .vb-desk__spectrum { margin-top: 22px; }
.demo-panel .vb-desk__status { margin-top: 6px; }

/* on the line, the button is the way out: red, and it says so */
.call-button.active { background: #d9342b; box-shadow: 0 18px 40px #d9342b40; }
.call-button.active:hover { box-shadow: 0 22px 46px #d9342b55; }
.call-button.active .ring { background: #fff; color: #d9342b; }
.call-button.active .ring::before, .call-button.active .ring::after { border-color: #ffffffaa; }
.call-button.active small { color: #ffd9d6; }
.call-button.active i { transform: rotate(135deg); }
/* stacked: the orb stands clear of the button */
@media (max-width: 900px) {
  .demo-panel .vb-desk__stage { margin-top: 34px; }
  .demo-panel .vb-desk__talk { margin-bottom: 6px; }
}

/* the recorded call's play button is the CTA of that card: big, orange, ringing until pressed */
.hear .vb-conv__play { position: relative; width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; background: var(--orange); color: #101827; box-shadow: 0 12px 30px #ff9c2a55; transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.hear .vb-conv__play svg { width: 20px; height: 20px; }
.hear .vb-conv__play:hover { transform: scale(1.06); box-shadow: 0 16px 36px #ff9c2a77; }
.hear .vb-conv__play::before, .hear .vb-conv__play::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; animation: ring 2.4s var(--ease) infinite; pointer-events: none; }
.hear .vb-conv__play::after { animation-delay: 1.2s; }
.hear .vb-conv__play[aria-label^="Pause"] { background: #fff; color: var(--navy); box-shadow: none; }
.hear .vb-conv__play[aria-label^="Pause"]::before, .hear .vb-conv__play[aria-label^="Pause"]::after { animation: none; }
.hear .vb-conv__controls { align-items: center; gap: 16px; }
.hear .vb-conv__meta::before { content: 'Play the call · '; color: #fff; font-weight: 700; }
.hear .vb-conv__play[aria-label^="Pause"] ~ .vb-conv__meta::before { content: 'Playing · '; }
@media (prefers-reduced-motion: reduce) { .hear .vb-conv__play::before, .hear .vb-conv__play::after { animation: none; } }

.btn-play { width: 14px; height: 14px; margin-right: 10px; color: var(--blue); }

/* --- hero: one big statement, "answered" in blue, one quiet line under it --- */
.hero h1 { font-size: clamp(54px, 6.2vw, 92px); white-space: normal; line-height: .98; margin: 0 0 18px; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero-sub { margin: 0 0 30px; font-size: clamp(16px, 1.25vw, 19px); font-weight: 500; color: #536279; letter-spacing: .01em; }
@media (max-width: 600px) { .hero h1 { font-size: 48px; } }

/* --- the film: full width under the ticker, the whole story in eight seconds --- */
.film { padding: 64px 0 8px; }
.film-head { max-width: 640px; margin: 0 auto 28px; text-align: center; }
.film-head .eyebrow { justify-content: center; margin: 0 0 14px; }
.film-head h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.05; margin: 0 0 12px; letter-spacing: -.02em; }
.film-head h2 em { font-style: normal; color: var(--blue); }
.film-head > p { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.film-frame { overflow: hidden; border-radius: 24px; background: #dfe9f5; box-shadow: 0 40px 90px -50px #07162f66; max-width: 880px; margin: 0 auto; }
.hero-note { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: -18px 0 26px; max-width: 520px; }
.film-video { display: block; width: 100%; height: auto; }
.is-calling .film-video { visibility: hidden; }
@media (max-width: 600px) { .film { padding: 32px 0 0; } .film-frame { border-radius: 14px; } }

/* the real dashboard, in the blue band */
.result-grid { grid-template-columns: .8fr 1.2fr; gap: 56px; }
.dash-shot { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px #00173966, 0 0 0 1px #ffffff2e; transform: rotate(-1deg); }
.dash-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .result-grid { grid-template-columns: 1fr; gap: 36px; } .dash-shot { transform: none; border-radius: 12px; } }

/* Topography ground under the hero (js/topo.js). Held well under a third of
   strength and faded out on every edge so it never competes with the headline. */
.hero { position: relative; }
.hero-bg { position: absolute; inset: -40px -8vw -20px; z-index: 0; opacity: .34; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 60%, transparent 96%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 60%, transparent 96%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.hero-bg canvas { display: block; width: 100%; height: 100%; }
.hero-copy, .hero-visual { position: relative; z-index: 1; }
@media (max-width: 640px) { .hero-bg { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .hero-bg { display: none; } }

/* ---- footer (site-foot) ---- */
.site-foot { display: block; min-height: 0; border-top: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding: 56px 0 40px; }
.foot-brand .brand { font-size: 20px; }
.foot-brand .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
.foot-brand p { max-width: 380px; margin: 16px 0 20px; line-height: 1.6; }
.foot-phone { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 700; text-decoration: none; padding: 10px 14px; border: 1.5px solid #cfdcef; border-radius: 12px; background: #fff; transition: border-color .2s var(--ease), color .2s var(--ease); }
.foot-phone svg { width: 16px; height: 16px; color: var(--blue); }
.foot-phone:hover { border-color: var(--blue); color: var(--blue); }
.foot-mail { display: block; margin-top: 12px; color: var(--ink-2); text-decoration: none; }
.foot-mail:hover { color: var(--blue); }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col h4 { margin: 0 0 6px; font: 800 12px/1 Manrope, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.foot-col a { color: var(--ink-1); text-decoration: none; }
.foot-col a:hover { color: var(--blue); }
.foot-bar { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0 26px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.call-pop__consent { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.call-pop__consent a { color: var(--blue); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 44px 0 32px; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; } .foot-bar { flex-direction: column; gap: 8px; } }

/* ---- demo call under the film: black card, dark-yellow ringing play button, voice wave ---- */
.film-audio { display: flex; align-items: center; gap: 18px; max-width: 880px; margin: 18px auto 0; padding: 16px 22px 16px 16px; border-radius: 20px; background: var(--navy); color: #fff; box-shadow: 0 18px 40px #07162f33; }
.film-audio__btn { position: relative; flex: 0 0 56px; width: 56px; height: 56px; border: 0; border-radius: 17px; background: var(--orange); color: #101827; display: grid; place-items: center; cursor: pointer; transition: background .18s var(--ease), transform .18s var(--ease); }
.film-audio__btn::before, .film-audio__btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--orange); animation: ring 2.4s var(--ease) infinite; pointer-events: none; }
.film-audio__btn::after { animation-delay: 1.2s; }
.film-audio__btn:hover { background: #ffad4d; transform: translateY(-1px); }
.film-audio__btn svg { width: 22px; height: 22px; position: relative; }
.film-audio__btn .ic-pause, .film-audio.is-playing .ic-play { display: none; }
.film-audio.is-playing .ic-pause { display: block; }
.film-audio.is-playing .film-audio__btn::before, .film-audio.is-playing .film-audio__btn::after { animation-duration: 1.2s; }
.film-audio__body { flex: 1; min-width: 0; }
.film-audio__label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.film-audio__label strong { font: 800 19px/1.2 Manrope, sans-serif; color: var(--orange); letter-spacing: -.01em; }
.film-audio__label span { font-size: 13px; color: #8fb1dc; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .04em; }
.film-audio__bar { display: flex; align-items: center; gap: 3px; height: 34px; cursor: pointer; }
.film-audio__bar i { flex: 1; min-width: 2px; border-radius: 2px; background: #2a3c5c; height: 30%; transition: background .15s linear, height .25s var(--ease); }
.film-audio__bar i.on { background: var(--orange); }
.film-audio.is-playing .film-audio__bar i.on:last-of-type { animation: wave .6s ease-in-out infinite alternate; }
@keyframes wave { from { transform: scaleY(.7) } to { transform: scaleY(1.25) } }
@media (prefers-reduced-motion: reduce) { .film-audio__btn::before, .film-audio__btn::after { animation: none; opacity: 0; } .film-audio__bar i { animation: none !important; } }

/* phone: the hear lede runs full width so no word is orphaned; footer menus in two lines */
@media (max-width: 900px) { .hear .section-head > p { max-width: none; text-wrap: pretty; } }
@media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* nothing may widen the page on a phone: the contour ground stays inside the viewport and the body clips sideways */
html, body { overflow-x: clip; }
@media (max-width: 900px) { .hero-bg { inset: -30px 0 -10px; } }

/* intros sit under their headings, not beside them */
#how .section-head, .caps .section-head { display: block; }
#how .section-head > p, .caps .section-head > p { max-width: 640px; margin: 14px 0 0; }

/* hear: the island repeats the section head; keep only the clock, wave and panel */
.hear .vb-conv__title, .hear .vb-conv__lede { display: none; }
.hear .vb-conv { grid-template-areas: "mark mark" "clock clock" "langs langs" "wave wave" "panel panel"; grid-template-columns: 1fr; }
.hear .vb-conv__langs { grid-area: langs; margin: 4px 0 6px; }
.hear .vb-conv__wave { margin-top: 8px; }

.hear .section-head h2 em { font-style: normal; color: var(--blue); }

/* phone: the footer is centred, brand, menus and bottom bar alike */
@media (max-width: 600px) {
  .foot-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px; }
  .foot-brand { display: flex; flex-direction: column; align-items: center; }
  .foot-brand p { margin: 14px auto 18px; }
  .foot-col { align-items: center; gap: 12px; }
  .foot-bar { align-items: center; text-align: center; }
}

/* header CTA: the blue button, compact; it stays on phones */
.nav .button-small { padding: 10px 10px 10px 16px; gap: 12px; font-size: 14px; border-radius: 11px; }
.nav .button-small > span { width: 26px; height: 26px; border-radius: 8px; }
.nav .button-small > span svg { width: 13px; height: 13px; }
@media (max-width: 900px) { .button-small { display: inline-flex; } }

/* ---- footer in the brand blue ---- */
.site-foot { background: var(--blue); border-top: 0; color: #d9e8ff; }
.site-foot .brand, .site-foot .brand > span:last-child > span { color: #fff; }
.site-foot .brand-mark { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.foot-brand p { color: #d9e8ff; }
.foot-phone { background: #fff; border-color: #fff; color: var(--navy); }
.foot-phone svg { color: var(--blue); }
.foot-phone:hover { background: #eaf2ff; border-color: #eaf2ff; color: var(--navy); }
.foot-mail { color: #d9e8ff; }
.foot-mail:hover, .foot-col a:hover { color: #fff; text-decoration: underline; }
.foot-col h4 { color: #a9c8ff; }
.foot-col a { color: #eaf2ff; }
.foot-bar { border-top: 1px solid rgba(255,255,255,.22); color: #c2dbff; }

/* four capabilities: four across, two on tablet, one on phone */
.caps-grid { grid-template-columns: repeat(4, 1fr); }
.caps-grid article { padding: 24px 22px 22px; }
@media (max-width: 1000px) { .caps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .caps-grid { grid-template-columns: 1fr; } }

/* ---- legal pages (privacy, terms, fees) ---- */
.legal { max-width: 820px; padding: 48px 0 96px; position: relative; }
.legal h1 { font: 800 clamp(40px, 5vw, 64px)/1.02 Manrope, sans-serif; letter-spacing: -.045em; color: var(--navy); margin: 14px 0 14px; }
.legal__date { font-size: 13px; color: var(--ink-3); margin: 0 0 22px; letter-spacing: .02em; }
.legal__lede { font-size: 19px; line-height: 1.6; color: var(--ink-1); margin: 0 0 36px; }
.legal .toc { border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; margin: 0 0 44px; background: #f7fbff; }
.legal .toc h2, .legal .toc > p { font: 800 12px/1 Manrope, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.legal .toc ol, .legal .toc ul { margin: 0; padding: 0 0 0 20px; columns: 2; column-gap: 32px; font-size: 15px; line-height: 1.9; }
.legal .toc a { color: var(--ink-1); text-decoration: none; }
.legal .toc a:hover { color: var(--blue); }
.legal .prose section { padding: 28px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.legal .prose h2 { font: 800 clamp(22px, 2.2vw, 28px)/1.15 Manrope, sans-serif; letter-spacing: -.02em; color: var(--navy); margin: 0 0 14px; }
.legal .prose h3 { font: 700 17px/1.3 Manrope, sans-serif; color: var(--navy); margin: 22px 0 8px; }
.legal .prose__n { display: inline-block; min-width: 34px; margin-right: 10px; font-size: 12px; letter-spacing: .1em; color: var(--blue); vertical-align: 6px; }
.legal .prose p, .legal .prose li { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.legal .prose p { margin: 0 0 14px; }
.legal .prose ul, .legal .prose ol { padding-left: 22px; margin: 0 0 14px; }
.legal .prose li { margin: 0 0 8px; }
.legal .prose strong { color: var(--navy); }
.legal .prose a { color: var(--blue); }
.legal .prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 16px; }
.legal .prose th, .legal .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal .prose th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.legal .needs { background: #fff4d6; color: #7a4b00; border-radius: 6px; padding: 1px 6px; font-weight: 600; }
@media (max-width: 600px) { .legal .toc ol, .legal .toc ul { columns: 1; } .legal { padding: 28px 0 64px; } }

/* the language chips must read as buttons: a label, real borders, lift on hover, orange when chosen */
.hear .vb-conv__langs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; }
.hear .vb-conv__langs::before { content: "Pick a language, then press play"; flex-basis: 100%; font: 800 clamp(20px, 2vw, 26px)/1.2 Manrope, sans-serif; letter-spacing: -.01em; text-transform: none; color: var(--orange); margin: 6px 0 8px; }
.hear .vb-conv__flag { height: 44px; padding: 0 16px 0 12px; gap: 10px; font-size: 14px; font-weight: 700; border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #fff; box-shadow: 0 6px 16px -10px #000; transition: transform .16s var(--ease), border-color .16s, background .16s, box-shadow .16s; }
.hear .vb-conv__flag svg { width: 26px; height: 18px; }
.hear .vb-conv__flag::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .55; margin-left: 2px; }
.hear .vb-conv__flag:hover { transform: translateY(-2px); border-color: #fff; background: rgba(255,255,255,.12); box-shadow: 0 12px 24px -12px #000; }
.hear .vb-conv__flag:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.hear .vb-conv__flag.is-on { background: var(--orange); border-color: var(--orange); color: #101827; box-shadow: 0 0 0 4px #ff9c2a33; }
.hear .vb-conv__flag.is-on::after { width: 5px; height: 9px; border-color: #101827; transform: rotate(45deg); opacity: 1; margin-left: 4px; }

.foot-bar a { color: var(--orange); font-weight: 700; border-bottom-color: rgba(255,156,42,.5); }
.foot-bar a:hover { color: #ffb45c; border-bottom-color: #ffb45c; }

/* phone footer, desktop style: brand on the first line, the three menus side by side on the second */
@media (max-width: 600px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; justify-items: start; text-align: left; padding: 40px 0 28px; }
  .foot-brand { grid-column: 1 / -1; align-items: flex-start; }
  .foot-brand p { margin: 14px 0 18px; max-width: none; }
  .foot-col { align-items: flex-start; gap: 10px; }
  .foot-col h4 { font-size: 11px; }
  .foot-col a { font-size: 14px; }
  .foot-bar { align-items: flex-start; text-align: left; }
}

/* success toast: shown once the demo call has ended */
.vb-toast { position: fixed; left: 50%; bottom: 26px; z-index: 70; translate: -50% 0; display: flex; align-items: center; gap: 14px; max-width: min(520px, calc(100% - 24px)); padding: 14px 18px 14px 14px; background: var(--navy); color: #fff; border-radius: 16px; box-shadow: 0 30px 70px -20px #07162f88; animation: toast-in .55s var(--ease); }
.vb-toast.is-leaving { animation: toast-out .4s var(--ease) forwards; }
.vb-toast__check { flex: 0 0 auto; width: 40px; height: 40px; }
.vb-toast__check .ring { fill: none; stroke: #3ddc84; stroke-width: 2; stroke-dasharray: 76; stroke-dashoffset: 76; animation: draw .6s var(--ease) .15s forwards; }
.vb-toast__check .tick { fill: none; stroke: #3ddc84; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw .35s var(--ease) .6s forwards; }
.vb-toast__check .burst { fill: #3ddc84; opacity: 0; transform-origin: 50% 50%; animation: burst .7s var(--ease) .75s; }
.vb-toast__text { flex: 1 1 auto; min-width: 0; }
.vb-toast__text strong { display: block; font: 800 15px/1.2 Manrope, sans-serif; letter-spacing: -.02em; }
.vb-toast__text span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: #b7c4d8; }
.vb-toast__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 10px; background: #fff; color: var(--navy); font: 700 13px "DM Sans", sans-serif; text-decoration: none; white-space: nowrap; }
.vb-toast__cta svg { width: 14px; height: 14px; }
.vb-toast__close { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #ffffff1a; color: #fff; cursor: pointer; }
.vb-toast__close svg { width: 13px; height: 13px; }
@keyframes toast-in { from { opacity: 0; translate: -50% 24px; scale: .96 } to { opacity: 1; translate: -50% 0; scale: 1 } }
@keyframes toast-out { to { opacity: 0; translate: -50% 16px } }
@keyframes draw { to { stroke-dashoffset: 0 } }
@keyframes burst { 0% { opacity: .6; transform: scale(.6) } 100% { opacity: 0; transform: scale(1.9) } }
@media (max-width: 600px) { .vb-toast { display: grid; grid-template-columns: 36px 1fr 28px; align-items: start; gap: 12px; width: calc(100% - 24px); max-width: none; bottom: 12px; padding: 14px; } .vb-toast__check { width: 36px; height: 36px; } .vb-toast__check { grid-area: 1 / 1; } .vb-toast__text { grid-area: 1 / 2; } .vb-toast__close { grid-area: 1 / 3; } .vb-toast__cta { grid-area: 2 / 1 / 3 / -1; justify-content: center; padding: 12px; } }