/* Self-hosted General Sans (Fontshare) */
@font-face {
  font-family: "General Sans";
  src: url("../assets/fonts/GeneralSans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../assets/fonts/GeneralSans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../assets/fonts/GeneralSans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../assets/fonts/GeneralSans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bolo v4 — sleek black & white
   Type: General Sans 400–700 self-hosted
   Soft radii, hairlines, subtle depth, restrained motion */

:root {
  --paper: #f6f6f4;
  --ink: #0a0a0a;
  --muted: #6a6a66;
  --line: rgba(10, 10, 10, 0.1);
  --surface: rgba(255, 255, 255, 0.72);
  --night: #0c0c0c;
  --night-ink: #f6f6f4;
  --night-muted: #9c9c96;
  --night-line: rgba(255, 255, 255, 0.1);
  --night-card: rgba(255, 255, 255, 0.04);

  --font-display: "General Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "General Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-title: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  --wrap: 1120px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow: 0 12px 40px rgba(10, 10, 10, 0.06);
  --shadow-hover: 0 18px 50px rgba(10, 10, 10, 0.1);
  --focus: 2px solid var(--ink);
}
@media (max-width: 720px) {
  :root { --space-5: 48px; --space-6: 64px; }
}

*, *::before, *::after { box-sizing: border-box; }
/* Focused controls stop 72px down, ring clear of the sticky header; nav jumps still land sections flush under it. */
html { scroll-behavior: smooth; scroll-padding-top: 72px; scroll-padding-bottom: 24px; -webkit-tap-highlight-color: transparent; }
main section[id] { scroll-margin-top: -8px; }
/* The header and its menu never scroll away, so focus inside them must not move the page: their scroll targets sit clear of the page's 72px top and 24px bottom bands. */
.header-row :is(a, button) { scroll-margin: -72px 0 72px; }
.drawer { scroll-padding: 8px 0 24px; }
.drawer a { scroll-margin: -8px 0 -24px; }
main:focus { outline: none; }
p, li { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mask-inner { transform: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: var(--focus); outline-offset: 3px; }
.stage, .close, .site-footer { --focus: 2px solid var(--night-ink); }

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong { font-weight: 600; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus {
  left: var(--space-2); top: var(--space-2); z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
}

.wrap {
  width: min(100% - 2 * var(--space-3), var(--wrap));
  margin-inline: auto;
}
@media (min-width: 900px) {
  .wrap { width: min(100% - 2 * var(--space-5), var(--wrap)); }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand__logo { height: 31px; width: auto; display: block; }
.nav {
  display: none;
  gap: var(--space-3);
  margin-left: auto;
  margin-right: var(--space-2);
}
.nav a {
  text-decoration: none;
  font-size: var(--step-small);
  color: #4a4a46;
  transition: color 180ms ease;
}
.nav a:hover { color: var(--ink); }
.header-row > .btn { display: none; }
.menu-toggle {
  margin-left: auto;
  width: 40px; height: 40px;
  display: grid; place-content: center; gap: 6px;
  border-radius: var(--radius-pill);
}
.menu-toggle span {
  display: block; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform 180ms ease;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
/* The phone menu opens over the page (it never pushes the page down), above a scrim that takes taps outside it. */
.drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid; gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-height: calc(100vh - 65px);
  max-height: calc(100dvh - 65px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-scrim {
  position: fixed;
  top: 65px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 10, 0.32);
  cursor: pointer;
}
.menu-scrim[hidden] { display: none; }
.drawer[hidden] { display: none; }
.drawer .drawer__cta { justify-self: start; margin-top: var(--space-1); padding: 0 22px; border-bottom: 0; }
.drawer a {
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) {
  .nav { display: flex; }
  .header-row > .btn { display: inline-flex; }
  .menu-toggle { display: none; }
  .drawer, .menu-scrim { display: none !important; }
}
.header-row > .btn,
.header-row > .btn:hover { box-shadow: none; }

/* Buttons — pills */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step-small);
  border-radius: var(--radius-pill);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, opacity 180ms ease, color 180ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--ink {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.18);
}
.btn--ink:hover { box-shadow: 0 12px 28px rgba(10, 10, 10, 0.22); }
.btn--paper {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover {
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.28);
  background: rgba(10, 10, 10, 0.03);
}
/* Press feedback in black and white (Android's default tap flash is cyan). */
.btn:active { transform: scale(0.98); }
.btn--lg { min-height: 52px; padding: 0 28px; font-size: var(--step-body); }
.btn--sm { min-height: 36px; padding: 0 16px; }
.btn:disabled,
.btn:disabled:hover {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.32;
}

/* Hero: claim and proof points share one row on desktop, everything on the page grid. */
.hero { padding: var(--space-5) 0; }
@media (min-width: 960px) {
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    grid-template-areas:
      "context context"
      "title feats"
      "lead ."
      "actions .";
    column-gap: var(--space-5);
  }
  .hero__context { grid-area: context; }
  .hero__title { grid-area: title; }
  .hero__feats { grid-area: feats; align-self: end; }
  .hero__standfirst { grid-area: lead; }
  .hero__actions { grid-area: actions; }
}
.hero__context {
  margin: 0 0 var(--space-2);
  font-size: var(--step-small);
  color: var(--muted);
  max-width: 28ch;
  line-height: 1.45;
}
.hero__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 1.2rem + 5.5vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #000;
  text-wrap: balance;
}
.mask-line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.mask-inner { display: block; }
/* The page's one load moment. Keyed to the class the head script sets, so it starts at first paint and never hides text already shown. */
.js .mask-inner {
  animation: rise 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rise {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

.hero__standfirst {
  margin: 0 0 var(--space-4);
  font-size: var(--step-lead);
  line-height: 1.4;
  color: var(--ink);
  max-width: 38ch;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Feature — borderless */
.feat {
  display: grid;
  gap: var(--space-4);
}
.feat__prime {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.feat__card {
  padding: 0;
  background: transparent;
  border: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.feat__card--prime { padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.feat__card--prime:nth-child(-n+2) {
  padding-top: 0;
  border-bottom: 1px solid var(--line);
}
.feat__card--prime:nth-child(n+3) { padding-bottom: 0; }
.feat__card--prime:nth-child(even) {
  padding-left: var(--space-3);
  padding-right: 0;
  border-left: 1px solid var(--line);
}
@media (min-width: 900px) {
  .feat__prime { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feat__prime > .feat__card--prime {
    padding: 0 var(--space-3);
    border: 0;
    border-left: 1px solid var(--line);
  }
  .feat__prime > .feat__card--prime:first-child { padding-left: 0; border-left: 0; }
  .feat__prime > .feat__card--prime:last-child { padding-right: 0; }
}
.feat__label {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #000;
}
.feat__body {
  margin: 0;
  font-size: var(--step-small);
  color: var(--muted);
  line-height: 1.4;
  max-width: 36ch;
}
.feat__more {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px var(--space-4);
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) {
  .feat__more { grid-template-columns: 1fr 1fr; }
}
.feat__more li {
  padding: 0;
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}

/* Stage / call */
.stage {
  background: var(--night);
  color: var(--night-ink);
  padding: var(--space-6) 0;
}
.stage__grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 980px) {
  .stage__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    gap: var(--space-5);
  }
  .stage__sticky { position: sticky; top: 88px; }
  /* The stuck card and its target note fit under the header on short laptop screens too. */
  .stage .call__feed { height: clamp(180px, 100vh - 550px, 280px); }
}
/* Too short to hold the whole card under the header: let it scroll with the page. */
@media (min-width: 980px) and (max-height: 739px) {
  .stage__sticky { position: static; }
}
.stage .brand-film__note { color: var(--night-muted); }
.stage__head { margin-bottom: var(--space-4); }
@media (max-width: 979px) {
  .stage__copy { display: contents; }
  .stage__head { order: -1; margin-bottom: 0; }
  .stage__copy .stage__cta { margin: calc(var(--space-4) - var(--space-5)) 0 0; }
}
.stage__copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-title);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.stage__blocks { display: grid; gap: var(--space-4); }
.stage__lead {
  margin: 0 0 8px;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 22ch;
  color: var(--night-ink);
}
.stage__blocks p {
  margin: 0;
  color: var(--night-muted);
  max-width: 42ch;
  text-wrap: pretty;
}

.call {
  background: var(--night-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--night-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: var(--space-3);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.call__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: var(--step-small);
  color: var(--night-muted);
}
.call__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--night-ink);
  font-weight: 500;
}
.call__live::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--night-ink);
  border-radius: 50%;
}
.call__bar strong { color: var(--night-ink); font-weight: 500; }
.call__meta { font-variant-numeric: tabular-nums; }
/* Each field is as wide as the longest text the demo puts in it, so the bar never re-wraps mid-call. */
.call__bar [data-phase] { min-width: 6.75em; }
.call__bar [data-session] { min-width: 7.24em; }
.call__bar [data-lang] { min-width: 9.45em; }
.call__bar [data-latency] { display: inline-block; min-width: 2.37em; }

.call__parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.party {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  padding: var(--space-2);
  min-height: 88px;
}
.party__label {
  font-size: var(--step-small);
  color: var(--night-muted);
  margin-bottom: 10px;
}
.wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 48px;
  overflow: hidden;
}
.wave-bar {
  flex: 1;
  background: rgba(255, 255, 255, 0.18);
  height: 16%;
  min-width: 2px;
  border-radius: 2px;
}
.wave-bar.is-live { background: var(--night-ink); }

.call__feed {
  flex: none;
  display: grid;
  align-content: start;
  gap: 12px;
  height: 280px;
  overflow: auto;
  padding-right: 4px;
}
/* Once older lines scroll out of view, fade the top edge so the cut reads as scrolled, not clipped. */
.call__feed.is-scrolled {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
}
.call__feed.is-scrolled:focus-visible { -webkit-mask-image: none; mask-image: none; }
html:not(.js) .call__feed noscript { display: contents; }
/* Without JS the card is just the transcript: no fixed-height feed, no reserved demo height. */
html:not(.js) .call { min-height: 0; }
html:not(.js) .call__feed { height: auto; overflow: visible; }
html:not(.js) .stage__sticky { position: static; }
.call__feed noscript .bubble { margin: 0; }
.bubble {
  max-width: 92%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--night-line);
  border-radius: 14px;
  font-size: var(--step-small);
  line-height: 1.4;
}
.bubble--staff { justify-self: start; border-radius: 14px 14px 14px 6px; }
.bubble--patient {
  justify-self: end;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px 14px 6px 14px;
}
.bubble__who {
  display: block;
  color: var(--night-muted);
  margin-bottom: 4px;
  font-size: 0.75rem;
}
.bubble__text { color: var(--night-ink); }

.call__chart {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  font-size: var(--step-small);
}
.call__play {
  align-self: start;
  color: var(--night-ink);
  box-shadow: inset 0 0 0 1px var(--night-line);
  background: transparent;
}
.call__play:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* How: the four steps in order, two by two on wider screens */
.how { padding: var(--space-6) 0; }
.how h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--step-title);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4) var(--space-5);
}
@media (min-width: 900px) {
  .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.how__steps li {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.how__steps h3 {
  margin: 0 0 var(--space-1);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.how__steps p {
  margin: 0;
  color: var(--muted);
  max-width: 46ch;
}

/* Close */
.close {
  background: var(--night);
  color: var(--night-ink);
  min-height: min(80svh, 760px);
  display: grid;
  align-items: end;
  padding: var(--space-6) 0 var(--space-5);
}
.close__inner {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
.close h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 0.6rem + 8vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 700;
  max-width: 12ch;
  color: #fff;
}
.close__sub {
  margin: 0;
  max-width: 36ch;
  color: var(--night-muted);
  font-size: var(--step-lead);
}
.close .btn { margin-top: var(--space-2); }
@media (max-width: 720px) {
  .close { min-height: 0; }
}

/* Footer */
.site-footer {
  background: var(--night);
  color: var(--night-muted);
  padding: 0 0 var(--space-4);
  font-size: var(--step-small);
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--night-line);
}
.footer-row a {
  padding-block: 4px;
  color: var(--night-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--night-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.footer-row a:hover { text-decoration-color: var(--night-ink); }
@media (max-width: 640px) {
  .footer-row { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}

/* Funnel — soft panel */
.funnel {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 10, 10, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: var(--space-2);
}
.funnel.is-open { display: flex; }
/* While the dialog locks scrolling, the full-width bands keep the page scrollbar's width as a transparent right edge: nothing behind the dialog moves, and their backgrounds still reach the edge. */
:is(.site-header, main > section, .site-footer) { border-right: var(--locked-gutter, 0px) solid transparent; }
/* The panel keeps its top edge, so Back and Close stay put from step to step. */
.funnel { align-items: flex-start; padding-top: clamp(16px, 8vh - 16px, 96px); }
.funnel > .funnel__panel { margin-top: 0; }
.funnel__panel {
  background: var(--paper);
  color: var(--ink);
  width: min(560px, 100%);
  margin: auto;
  max-height: min(900px, 100%);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.funnel__top {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
}
.funnel__progress {
  height: 3px;
  background: var(--line);
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
}
.funnel__progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--ink);
  border-radius: inherit;
  transition: width 220ms ease;
}
.funnel__progress-label {
  font-size: var(--step-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.funnel__back,
.funnel__close {
  font-size: var(--step-small);
  color: var(--muted);
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  transition: background 160ms ease, color 160ms ease;
}
.funnel__back:hover,
.funnel__close:hover {
  background: rgba(10, 10, 10, 0.05);
  color: var(--ink);
}
.funnel__back[hidden] { display: inline-flex; visibility: hidden; }
.funnel__track { flex: 1; overflow: auto; scrollbar-gutter: stable both-edges; padding: 6px; margin: -6px; }
.funnel-step h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}
.funnel-step h3:focus { outline: none; }
.funnel-hint {
  margin: -8px 0 var(--space-3);
  color: var(--muted);
  font-size: var(--step-small);
}
.funnel-options { display: grid; gap: 10px; }
.funnel-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
  padding: 14px 18px;
  background: rgba(10, 10, 10, 0.03);
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: var(--step-body);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.funnel-option:active { background: rgba(10, 10, 10, 0.1); }
.funnel-option:hover {
  background: rgba(10, 10, 10, 0.05);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.funnel-option.is-selected {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 2px 4px rgba(10, 10, 10, 0.16);
}
.funnel-option .key {
  flex: none;
  min-width: 1.4em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.funnel-option.is-selected .key { color: #aaa; }
.funnel-options--multi .funnel-option { align-items: center; }
.funnel__track .btn--ink,
.funnel__track .btn--ink:hover { box-shadow: 0 2px 4px rgba(10, 10, 10, 0.16); }
.funnel-form { display: grid; gap: var(--space-3); }
.funnel-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: var(--step-small);
  color: var(--muted);
}
.funnel-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.funnel-field input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}
.funnel-field input[aria-invalid="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.funnel-error {
  margin: calc(6px - var(--space-3)) 0 0;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--ink);
}
.funnel-continue,
.funnel-done { margin-top: var(--space-3); }
/* Continue stays in view on a paper strip while a long list of options scrolls under it; the strip also covers the track's 6px bottom padding, so no option shows below it. The fade above the strip lets taps through to an option under it. */
.funnel-actions {
  --fade: var(--space-2);
  position: sticky;
  bottom: -6px;
  margin-top: var(--fade);
  margin-bottom: -6px;
  padding-top: var(--space-1);
  padding-bottom: 6px;
  background: var(--paper);
}
.funnel-actions::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--fade);
  background: linear-gradient(to bottom, rgba(246, 246, 244, 0), var(--paper));
  pointer-events: none;
}
.funnel-actions .funnel-continue { margin-top: 0; }
.funnel-calendly {
  min-height: 420px;
  background: rgba(10, 10, 10, 0.03);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  padding: var(--space-3);
  text-align: center;
  color: var(--muted);
}
.funnel-email {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
.funnel-email p { margin: 0; max-width: 40ch; }
.funnel-email p:last-child {
  margin-top: calc(var(--space-1) - var(--space-3));
  font-size: var(--step-small);
  color: var(--muted);
}
/* Options tighten first: up to 910px tall, step 3's seven options would otherwise run under Continue on phones. */
@media (max-height: 910px) {
  .funnel-option { padding-block: 10px; }
}
@media (max-height: 860px) {
  .funnel__panel { padding-block: var(--space-3); }
  .funnel__top { margin-bottom: var(--space-3); }
}
@media (max-height: 700px) {
  .funnel__panel { padding-block: var(--space-2); }
  .funnel__top { margin-bottom: var(--space-2); }
  .funnel-step h3,
  .funnel-hint { margin-bottom: var(--space-2); }
  .funnel-options { gap: 6px; }
  .funnel-continue { margin-top: var(--space-2); }
}
@media (max-height: 500px) {
  .funnel-options { grid-template-columns: 1fr 1fr; }
}
/* Phone-height screens: the seven language options take two columns, so all of them clear Continue. An odd last option spans both. */
@media (max-height: 820px) {
  .funnel-options--multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funnel-options--multi .funnel-option:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Narrow phones: smaller type and padding keep each language's longest word clear of its option's right edge. */
@media (max-height: 820px) and (max-width: 400px) {
  .funnel-options--multi .funnel-option { font-size: 0.9375rem; line-height: 1.3; padding-inline: 12px; gap: 6px; }
  .funnel-options--multi .funnel-option .key { min-width: 1em; }
}
@media (max-height: 820px) and (max-width: 343px) {
  .funnel-options--multi .funnel-option { font-size: 0.875rem; padding-inline: 10px; gap: 5px; }
}
@media (max-height: 600px) {
  .funnel { padding-top: 8px; }
  .funnel-option { padding-block: 8px; }
  .funnel-actions { --fade: var(--space-1); }
}

@media (max-width: 720px) {
  .hero { padding-top: var(--space-4); }
  .call { min-height: 0; }
  .party { min-height: 0; padding: 12px; }
  .party__label { margin-bottom: 8px; }
  .wave { height: 32px; gap: 2px; }
}


/* Hero proof points: a list under the headline, a hairline column beside it on desktop */
.hero__feats {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 36rem;
}
.hero__feats li {
  margin: 0;
  font-size: var(--step-small);
  color: var(--ink);
  line-height: 1.35;
}
.hero__feats strong {
  font-weight: 700;
}
@media (min-width: 640px) {
  .hero__feats {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
  }
}
@media (min-width: 960px) {
  .hero__feats {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: none;
    margin-bottom: var(--space-3);
  }
  .hero__feats li {
    padding: 12px 0;
    border-top: 1px solid var(--line);
    font-size: var(--step-body);
  }
}
.stage__cta,
.feat-section__cta,
.how__cta {
  margin-top: var(--space-4);
}
.feat-section__cta { text-align: left; margin-bottom: 0; }
.how__cta { margin-bottom: 0; }

/* —— Try it translator —— */
.try {
  padding: var(--space-6) 0 var(--space-5);
}
.try__head {
  max-width: 36rem;
  margin-bottom: var(--space-4);
}
.try__head h2,
.feat-section__head h2,
.brand-film__head h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: var(--step-title);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}
.try__head h2,
.brand-film__head h2,
.feat-section__head h2,
.stage__copy h2,
.save h2,
.how h2 { text-wrap: balance; }
.try__sub {
  margin: 0;
  font-size: var(--step-body);
  color: var(--muted);
  line-height: 1.55;
}

.try__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 4vw, 36px);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 24px 60px rgba(10, 10, 10, 0.05);
  isolation: isolate;
}
.try__glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  background: radial-gradient(circle, rgba(10, 10, 10, 0.08) 0%, transparent 68%);
  transition: opacity 220ms ease;
  will-change: transform, opacity;
}
.try__row,
.try__stage { position: relative; z-index: 1; }
.try__row + .try__row { margin-top: var(--space-3); }
.try__label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--muted);
}
.try__chips,
.try__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip,
.lang {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  background: rgba(10, 10, 10, 0.04);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.chip:hover,
.lang:hover {
  background: rgba(10, 10, 10, 0.08);
}
.chip:active,
.lang:active { background: rgba(10, 10, 10, 0.14); }
.chip.is-active:active,
.lang.is-active:active { background: #2a2a2a; }
.chip:focus-visible,
.lang:focus-visible,
.try__run:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
}
.chip.is-active,
.lang.is-active {
  background: var(--ink);
  color: var(--paper);
}
.lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
}
.lang span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.lang.is-active span { opacity: 0.85; }

.try__stage {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.try__wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 48px;
  padding: 0 4px;
}
.try-wave__bar {
  flex: 1;
  max-width: 6px;
  height: 18%;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.18);
  transition: height 60ms linear, background 200ms ease;
}
.try-wave__bar.is-live {
  background: rgba(10, 10, 10, 0.55);
}

.try__io {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .try__io {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}
.try__source,
.try__out {
  padding: 4px 0;
}
.try__meta {
  display: block;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 8px;
}
.try__source p,
.try__result {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
  min-height: 2.6em;
}
.try__source p.is-fading {
  opacity: 0.28;
  filter: blur(2px);
  transition: opacity 320ms ease, filter 320ms ease;
}
.try__out-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}
.try__timer {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.try__result.is-ready {
  animation: trySettle 420ms ease;
}
@keyframes trySettle {
  from { opacity: 0.6; }
  to { opacity: 1; }
}
.try__run {
  justify-self: start;
  border-radius: var(--radius-pill);
}

/* —— Brand film —— */
.brand-film {
  padding: var(--space-5) 0;
}
.brand-film__head {
  max-width: 36rem;
  margin-bottom: var(--space-4);
}
.brand-film__frame {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: var(--night);
  aspect-ratio: 16 / 9;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 28px 70px rgba(10, 10, 10, 0.18);
}
.brand-film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0a0a0a;
}
.brand-film__lede {
  margin: 0;
  max-width: 34rem;
  color: var(--muted);
  line-height: 1.5;
}
figure.brand-film__frame { margin: 0; }
.brand-film__controls {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.film-btn {
  appearance: none;
  border: 0;
  border-radius: var(--radius-pill);
  min-height: 40px;
  padding: 0 18px;
  font: 500 0.875rem/1 var(--font-display);
  color: var(--night-ink);
  background: rgba(12, 12, 12, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.film-btn:hover { background: rgba(12, 12, 12, 0.88); }
.film-btn:focus-visible {
  outline: 2px solid var(--night-ink);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 6px var(--ink);
}
.film-btn[hidden],
.brand-film__controls[hidden] { display: none; }
/* Phone caption line (js/captions.js): room for three lines, the same footprint as the buttons it replaces while a film plays. */
.film-cc {
  margin: 12px 0 0;
  min-height: 51px;
  font-size: 13px;
  line-height: 17px;
  color: var(--ink);
}
[data-film-toggle] { min-width: 5rem; }
.brand-film__note {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.brand-film__transcript {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--ink);
}
.brand-film__transcript summary {
  width: fit-content;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--muted);
}
.brand-film__transcript summary:hover { color: var(--ink); }
.brand-film__transcript ol {
  margin: 12px 0 0;
  padding-left: 1.25rem;
  max-width: 36rem;
  line-height: 1.55;
}
.brand-film__transcript li + li { margin-top: 6px; }
@media (max-width: 640px) {
  .brand-film__controls { gap: 6px; }
  .film-btn { padding: 8px 12px; font-size: 0.8125rem; }
}

.tour-film {
  position: relative;
  margin: 0 0 12px;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 28px 70px rgba(10, 10, 10, 0.18);
}
.tour-film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--paper);
}
.tour-film__play {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  appearance: none;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 16px 26px;
  font: 500 1rem/1 var(--font-display);
  color: var(--paper);
  background: var(--ink);
  box-shadow: 0 12px 30px rgba(10, 10, 10, 0.3);
  white-space: nowrap;
  cursor: pointer;
}
.tour-film__play:hover { box-shadow: 0 16px 36px rgba(10, 10, 10, 0.36); }
.tour-film__play[hidden] { display: none; }
.tour-film__tri {
  width: 0;
  height: 0;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.tour-film__transcript { margin-bottom: var(--space-4); }
.save__film { margin-top: var(--space-5); }
/* Below 900px the narrated films' play buttons sit under the frame, clear of the poster; their space stays while a film plays. */
@media (max-width: 899px) {
  .tour-film { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .tour-film__video { height: auto; border-radius: 28px; box-shadow: 0 28px 70px rgba(10, 10, 10, 0.18); }
  .tour-film__play { position: static; margin-top: 12px; }
  .tour-film__play[hidden] { display: inline-flex; visibility: hidden; }
}
@media (max-width: 640px) {
  .brand-film__frame { display: flow-root; aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .brand-film__video { height: auto; border-radius: 18px; box-shadow: 0 28px 70px rgba(10, 10, 10, 0.18); }
  .tour-film__video { border-radius: 18px; }
  .brand-film__controls { position: static; margin-top: 12px; }
  .film-btn { background: var(--ink); }
  .tour-film__play { gap: 8px; padding: 9px 14px; font-size: 0.8125rem; }
  .tour-film__play[hidden] { display: none; }
  .tour-film__tri { border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
  .tour-film__play, .film-btn { min-height: 44px; }
  .tour-film__play, .brand-film__controls { margin-bottom: 7px; }
}
@media (min-width: 641px) {
  .brand-film__frame:has(> video:focus-visible) { outline: var(--focus); outline-offset: 3px; }
}
@media (min-width: 900px) {
  .tour-film:has(> video:focus-visible) { outline: var(--focus); outline-offset: 3px; }
  .tour-film--dark .tour-film__play {
    --focus: 2px solid var(--paper);
    left: 40px;
    bottom: 36px;
    color: var(--ink);
    background: var(--paper);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  }
  .tour-film--dark .tour-film__play:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7); }
}

/* —— Features section (after video) —— */
.feat-section {
  padding: var(--space-5) 0;
}
.feat-section__head {
  max-width: 36rem;
  margin-bottom: var(--space-4);
}

@media (max-width: 720px) {
  .try { padding: var(--space-5) 0 var(--space-4); }
  .try__panel { border-radius: 22px; padding: 18px; }
  .chip, .lang { font-size: 0.8125rem; padding: 9px 12px; }
  /* Two swipeable rows of languages keep the chips and the result on screen together; the next column always peeks in. */
  .try__langs {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: max-content;
    overflow-x: auto;
    margin-inline: -18px;
    padding: 6px 18px;
    scroll-padding-inline: 18px 32px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 32px), transparent);
  }
  .try__langs::-webkit-scrollbar { display: none; }
  .lang { flex: none; }
}
.chip { text-wrap: balance; text-align: left; }
/* Ten languages read as two even rows of five, not nine and a straggler. */
@media (min-width: 721px) {
  .try__langs { display: grid; grid-template-columns: repeat(5, max-content); }
  .try__langs .lang { justify-content: center; }
}
@media (max-width: 400px) {
  .call { padding: var(--space-2); }
  .call__bar [data-session] { display: none; }
}
/* Landscape phones: a film fits the screen height. */
@media (orientation: landscape) and (max-height: 500px) {
  .brand-film__frame,
  .tour-film { max-width: calc((100svh - 96px) * 16 / 9); }
}
/* Forced colours drop backgrounds and shadows: controls get a border in their text colour, the menu icon and progress bar take system colours,
   and a selected option takes the user's highlight colours (no text backplate) with a ring in the text colour when focused. */
@media (forced-colors: active) {
  .btn, .drawer .drawer__cta, .chip, .lang, .film-btn, .call__play, .tour-film__play, .try__run { border: 1px solid; }
  .menu-toggle span { background: ButtonText; }
  .funnel__progress { forced-color-adjust: none; height: 5px; border: 1px solid CanvasText; background: Canvas; }
  .funnel__progress i { background: CanvasText; }
  .chip.is-active, .lang.is-active, .funnel-option.is-selected { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; box-shadow: none; }
  .chip.is-active:active, .lang.is-active:active { background: Highlight; }
  .funnel-option.is-selected .key { color: HighlightText; }
  .lang.is-active span { opacity: 1; }
  .chip.is-active:focus-visible, .lang.is-active:focus-visible, .funnel-option.is-selected:focus-visible { outline-color: CanvasText; }
  :is(.site-header, main > section, .site-footer) { border-right-color: Canvas; }
}
/* The logo is a black image: on a dark forced-colours theme it turns white. */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .brand__logo { filter: invert(1); }
}

@media (prefers-reduced-motion: reduce) {
  .try__source p.is-fading {
    filter: none;
    transition: opacity 120ms ease;
  }
  .try__result.is-ready { animation: none; }
  .try-wave__bar { transition: none; }
  .try__glow { display: none; }
}

/* Savings */
.save{padding:var(--space-6) 0}
.save__grid{display:grid;gap:var(--space-5);align-items:start}
@media(min-width:900px){.save__grid{grid-template-columns:1fr 1fr}}
.save h2{font-size:var(--step-title);font-weight:700;line-height:1.1;letter-spacing:-0.03em;margin:0 0 var(--space-3)}
.save__lead{font-size:var(--step-lead);line-height:1.4;margin:0 0 var(--space-3)}
.save__note{color:var(--muted);margin:0}
.save__calc{display:grid;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--surface);backdrop-filter:blur(14px);box-shadow:var(--shadow)}
@media(max-width:720px){.save__calc{padding:var(--space-3)}}
@media(max-width:359px){.save__calc .btn--lg{padding-inline:20px;font-size:var(--step-small)}.save__calc .save__out strong{font-size:1.9rem}.save__calc .save__year{min-height:3.1em}}
.save__field{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:var(--step-small);color:var(--muted)}
.save__val{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.save__field input{grid-column:1/-1;width:100%;margin:0;accent-color:var(--ink)}
.save__out{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding-top:var(--space-2);border-top:1px solid var(--line)}
.save__out>span:first-child{width:100%;color:var(--muted);font-size:var(--step-small)}
.save__out strong{font-size:clamp(2.25rem,1.6rem + 2.5vw,3.25rem);font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.save__per{color:var(--muted)}
.save__year{width:100%;font-size:var(--step-small);color:var(--muted)}


.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nowrap { white-space: nowrap; }

@media (pointer: coarse) {
  .chip, .lang, .film-btn, .tour-film__play, .call__play { min-height: 44px; }
  .menu-toggle { width: 44px; height: 44px; }
  .brand, .funnel__back, .funnel__close, .funnel-option { min-height: 44px; }
  .brand-film__transcript summary { padding-block: 12px; }
  .save__calc input[type="range"] { height: 44px; }
  /* A 44px tap target that keeps the footer's spacing and the focus ring's place. */
  .footer-row a { position: relative; }
  .footer-row a::after { content: ""; position: absolute; inset: -8px 0; }
}