/* ------------------------------------------------------------------ *
 * Casola — landing page styles.
 * Refined, light, editorial. Fraunces (display) + Hanken Grotesk (body).
 * No framework. Custom properties drive the palette; the avatar stage is a
 * single surface that morphs via [data-state] (set by the widget).
 * ------------------------------------------------------------------ */

:root {
  color-scheme: light dark;
  /* Palette — warm paper + ink, one confident accent. */
  --paper: #f6f3ee;
  --paper-2: #efeae1;
  --card: #fffdf9;
  --ink: #16140f;
  --ink-soft: #45403a;
  --muted: #6b6358;
  --line: rgba(22, 20, 15, 0.1);
  --line-strong: rgba(22, 20, 15, 0.18);
  --accent: #FF6600;
  --accent-grad: linear-gradient(135deg, #FF8C00, #D44200);
  --accent-ink: #ffffff;
  --good: #2f6b5e;

  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(22, 20, 15, 0.06), 0 2px 8px rgba(22, 20, 15, 0.05);
  --shadow-lg: 0 18px 50px -20px rgba(22, 20, 15, 0.35),
    0 4px 14px rgba(22, 20, 15, 0.08);

  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ----- reset ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Subtle paper grain + a warm light from the top. */
  background-image: radial-gradient(
    120% 80% at 50% -10%,
    #fbf8f2 0%,
    var(--paper) 55%,
    var(--paper-2) 100%
  );
  min-height: 100vh;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ----- header ----- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--gutter);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__mark {
  height: 1.2em;
  width: auto;
}
.site-header .wordmark { line-height: 1; }
.site-header .wordmark__mark { height: 2em; }
.site-nav {
  display: flex;
  gap: 4px;
  align-items: center;
}
.site-header__left {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 15px;
  padding: 8px 4px;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.site-nav a:hover {
  color: var(--ink);
  border-color: var(--accent);
}

/* ----- buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.2s, background 0.2s, opacity 0.2s;
  will-change: transform;
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}
.btn--primary:active {
  transform: translateY(0);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--ink);
}
.btn--sm {
  padding: 8px 16px;
  font-size: 14px;
}
.btn[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

/* ----- hero ----- */
.hero {
  max-width: var(--maxw);
  margin: clamp(24px, 6vw, 72px) auto clamp(48px, 8vw, 96px);
  padding: 0 var(--gutter);
  display: grid;
  /* the device column leads: a landscape laptop needs the width more than the copy does */
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.hero__copy > * {
  opacity: 0;
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero__copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero__copy > *:nth-child(2) { animation-delay: 0.14s; }
.hero__copy > *:nth-child(3) { animation-delay: 0.23s; }
.hero__copy > *:nth-child(4) { animation-delay: 0.32s; }
.hero__copy > *:nth-child(5) { animation-delay: 0.41s; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 18px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.8vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 22px;
  text-wrap: balance;
}
.hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 28px;
}
.hero__fineprint {
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}
.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ----- laptop device (MacBook Pro 16", M5 Pro/Max, 2026) + avatar stage -----
   Geometry is derived from Apple's published figures for that machine:
   display 3456x2234 @ 254ppi (= 34.56 x 22.34 cm), lid 35.57 x 24.81 cm.
   Bezels are percentages so they track the device width; percentage padding
   resolves against the containing block's WIDTH, which is what we want here.
   (The notch is eyeballed — Apple doesn't publish its size.) */
:root {
  --lap-ar: 3456 / 2234; /* the panel's exact native ratio ≈ 1.547 */
  --lap-bezel: 1.42%; /* 0.505cm side bezel of a 35.57cm lid */
  /* Traced off the render, NOT the spec sheet: the closed depth (24.81) less the
     panel (22.34) implies a ~2cm chin, but on an open machine part of the lid's
     bottom disappears into the hinge, so only ~1.2cm of chin is ever visible. */
  --lap-chin: 3.3%;
  --lap-deck-flare: 1.16; /* the deck sits 16% wider than the panel */
  --lap-lid-r: 12px;
  --lap-screen-r: 5px;
  /* Mobile full-bleed crop focus. The framed screen pillarboxes instead — the
     avatar stream is 352x480 portrait and its head spans ~55% of frame height,
     which cannot survive a cover crop into 1.54 (only ~48% of height survives). */
  --stage-focus: center 28%;
  /* band the floating controls sit in, and the anchor everything else stacks
     above. Kept tight: the panel is short, and every px here pushes the persona
     circles further up onto the avatar's face. The px floor keeps the band from
     collapsing under --ctl on short screens. */
  --dock-h: max(15%, 56px);
  --ctl: 46px;
  --font-apple: -apple-system, "SF Pro Display", "SF Pro Text", system-ui,
    "Segoe UI", Roboto, sans-serif;
}

.laptop-stack {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.laptop {
  width: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s forwards;
}

.demo-hint {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

/* hide the hint once a session is active */
.laptop-stack:has(#stage:not([data-state="idle"]):not([data-state="selecting"])) .demo-hint {
  opacity: 0;
  visibility: hidden;
}

/* the lid carries the aluminium; Space Black to match the site's dark material.
   The chin below the panel is ~4x the side bezel on a real MBP — and stays blank:
   the 2021-onward MacBook Pro has no wordmark there. */
.laptop__lid {
  position: relative;
  width: 100%;
  padding: var(--lap-bezel) var(--lap-bezel) var(--lap-chin);
  /* square at the bottom so it runs straight into the deck — only the device's
     outer top corners are rounded */
  border-radius: var(--lap-lid-r) var(--lap-lid-r) 0 0;
  background: linear-gradient(150deg, #5b5b60, #2a2a2d 38%, #1c1c1e 62%, #444448);
  box-shadow:
    0 40px 90px -28px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.1);
  font-family: var(--font-apple);
}

/* The deck: 16% wider than the panel, its own sides vertical (no taper), butted
   straight against the lid with square top corners. Sized off the panel rather
   than the lid so the overhang stays put if the bezel token changes; centred by
   align-self, which lets it overflow the lid evenly on both sides.
   aspect-ratio is tuned to hold the thickness at the ~4.9% of the lid's width
   that Apple's render shows — retune it if --lap-deck-flare changes. */
.laptop__base {
  position: relative;
  align-self: center;
  width: calc((100% - 2 * var(--lap-bezel)) * var(--lap-deck-flare));
  aspect-ratio: 23 / 1;
  border-radius: 0 0 10px 10px;
  /* Shading sampled down Apple's render of the front edge. Anodised aluminium
     reads as four zones: a lit top chamfer, the face falling away, a shadowed
     core, then light bouncing back up off the desk before the contact shadow.
     The 90deg layer is the broad falloff toward the rounded ends. */
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.47) 0%,
      rgba(0, 0, 0, 0.47) 4%,
      rgba(0, 0, 0, 0.3) 10%,
      rgba(0, 0, 0, 0.14) 20%,
      rgba(0, 0, 0, 0) 33%,
      rgba(0, 0, 0, 0) 67%,
      rgba(0, 0, 0, 0.14) 80%,
      rgba(0, 0, 0, 0.3) 90%,
      rgba(0, 0, 0, 0.47) 96%,
      rgba(0, 0, 0, 0.47) 100%
    ),
    linear-gradient(
      180deg,
      #525254 0%,
      #3b3b3d 4%,
      #3d3d3f 10%,
      #373739 20%,
      #2f2f31 30%,
      #292a2b 40%,
      #1c1c1e 50%,
      #0d0d0f 60%,
      #0b0b0d 68%,
      #0f0f11 75%,
      #1e1e20 83%,
      #1f1f21 86%,
      #0b0b0d 90%,
      #000 95%
    );
  box-shadow: 0 22px 34px -14px rgba(0, 0, 0, 0.55);
}
/* thumb scoop: a lit recess in the top of the front edge, as in the render */
.laptop__base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 45%;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
}

/* the screen */
.stage {
  position: relative;
  aspect-ratio: var(--lap-ar);
  border-radius: var(--lap-screen-r);
  overflow: hidden;
  background: #000;
  isolation: isolate;
  /* query container for the persona rail, which has to size itself off THIS
     box's height. Safe: the panel's height comes from aspect-ratio (or 100dvh
     on mobile), never from its contents, which is what contain: size requires. */
  container-type: size;
}

/* The stream is portrait (352x480) in a landscape screen, so it pillarboxes.
   Fill the gutters with a blurred, scaled copy of the persona face — the same
   thing Teams/Zoom do with a portrait camera. --persona-face is set by
   widget/persona.ts on selection; unset (no personas) resolves to `none`. */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--persona-face, none);
  background-size: cover;
  background-position: center 30%;
  filter: blur(40px) saturate(1.2);
  transform: scale(1.15);
}

.stage__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* must stay transparent: the element spans the full screen, so any background
     here would paint over the blurred backdrop in the pillarbox gutters */
  background: transparent;
}

/* The notch sits in the display panel, as on a real MBP. Apple doesn't publish
   its size, so these are traced off the product render: 12% of panel width,
   ~3.4% tall, centred. */
.laptop__notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12%;
  height: 3.4%;
  border-radius: 0 0 7px 7px;
  background: #000;
  z-index: 8;
}

/* status pill: whatever the widget's state machine last wrote into #status, plus an
   optional second line in #status-detail */
.call-top {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* no chip before the widget has anything to say (it fills #status on boot) */
.call-top:has(#status:empty) {
  opacity: 0;
}
/* Once live, the chip is a dot and a word, so it moves to the far corner the way a
   call app badges a running session. Clear of the persona rail — that owns the right
   edge, but only in idle/selecting, and is display:none by the time this applies. */
.stage[data-state="live"] .call-top {
  left: auto;
  right: 12px;
}
.stage__status {
  font-family: var(--font-apple);
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
}
.stage__detail {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.stage__detail:empty {
  display: none;
}

/* name plate: a glass chip floating in the control band, clear of the captions
   ribbon above it and of the centred controls beside it */
.call-name {
  position: absolute;
  bottom: calc((var(--dock-h) - 28px) / 2);
  left: 14px;
  z-index: 7;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 32%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  font-family: var(--font-apple);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}
/* the persona circles are the identity affordance pre-call; the plate is call chrome */
.stage[data-state="idle"] .call-name,
.stage[data-state="selecting"] .call-name {
  display: none;
}

/* turnstile: dark modal overlay centered on screen */
.stage__turnstile[hidden] {
  display: none;
}
.stage[data-state="verifying"] #turnstile-host {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
}

/* live caption ribbon above controls.
   Hidden on the hero: the ribbon is empty between ASR turns, so its scrim banded
   the panel above the controls for most of a call. Restore with `display: flex`. */
.stage__captions[hidden] {
  display: none;
}
.stage__captions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--dock-h);
  z-index: 4;
  padding: 30px 18px 14px;
  background: linear-gradient(to top, rgba(8, 6, 4, 0.78), transparent);
  color: #fff;
  font-family: var(--font-apple);
  font-size: 15px;
  line-height: 1.45;
  display: none;
  flex-direction: column;
  gap: 3px;
}
.caption-line {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  transition: opacity 600ms ease;
}
.caption-line--partial {
  opacity: 0.78;
  font-style: italic;
}
.caption-line--reply {
  color: color-mix(in srgb, var(--accent) 35%, #fff);
  font-weight: 600;
}
.caption-line--fading {
  opacity: 0;
}

/* Persona contact circles inside the laptop screen.
   .persona-row is the positioned scroll container: the radiogroup (#persona-list) and the
   static Add tile are siblings inside it, sharing one gap so they read as a single list.
   Stacked as a vertical rail down the screen's right edge: four tiles in a row won't fit
   a landscape panel without sitting on the avatar's face, and the right pillarbox gutter
   beside the portrait stream is dead space anyway. Scrolls if the tiles outgrow it. */
.persona-row {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  /* Tile width, sized off the PANEL's height (cqh resolves against .stage — see
     its container-type). Three 4/3 tiles + the Add button + gaps must fit:
       3*(0.75T + 9) + 30 + 15  <=  H - 20   ->   T <= 0.444H - 41
     44cqh - 43px tracks that line with ~3px to spare. Set here, not on :root:
     :root has no ancestor container, so cqh there would silently resolve
     against the viewport instead. */
  --persona-tile: clamp(48px, calc(44cqh - 43px), 96px);
  --persona-add-h: 30px; /* the Add slot is a short button, not a full tile */
  display: flex;
  flex-direction: column;
  /* `safe` matters: on the shortest panels the four tiles outgrow the rail, and
     plain `center` would push the first one past the top edge where scrolling
     cannot reach it. `safe` falls back to flex-start once it overflows. */
  justify-content: safe center;
  align-items: center;
  gap: 5px;
  padding: 0 4px; /* side padding gives hover scale room to breathe */
  overflow-x: visible;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.persona-row::-webkit-scrollbar {
  display: none;
}

.persona-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px; /* matches .persona-row's, so the Add tile spaces like a card */
}
/* Author `display:flex` above outranks the UA stylesheet's [hidden] rule, so
   showPersonaList(false) (widget/ui.ts) needs this to actually hide the picker. */
.persona-list[hidden] {
  display: none;
}

.stage:not([data-state="idle"]):not([data-state="selecting"]) .persona-row {
  display: none;
}

/* Override editorial card styles — turn each card into a contact circle */
.persona-list .persona-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 2px;
  text-align: center;
  width: auto;
  flex-shrink: 0;
  grid-template-columns: none;
  transition: transform 0.18s ease;
}
.persona-list .persona-card:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: transparent;
  box-shadow: none;
}
.persona-list .persona-card[aria-checked="true"] {
  border-color: transparent;
  box-shadow: none;
}
.persona-list .persona-card[aria-checked="true"]::after {
  display: none;
}

/* Participant tiles — rectangles, as in a video call, not contact circles.
   4/3 is deliberate: it reveals ~56% of the portrait source's height and the
   head spans ~55%, so the whole head survives the crop. A 16/9 tile would show
   only ~42% and decapitate it, the same trap the main panel hits.
   --persona-tile is the WIDTH; the ratio drives the height. */
.persona-list .persona-card__poster {
  width: var(--persona-tile);
  min-width: var(--persona-tile);
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
  object-position: center 18%; /* head sits high in the source */
  flex-shrink: 0;
  border: 2.5px solid transparent;
  background: rgba(255, 255, 255, 0.2);
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* david's source frames him tight — crown at the top edge, shirt at the bottom — so the
   18% above lands on his face. mei's and mia's are shot looser: a band of headroom over
   the crown, chin near mid-frame. The same 18% spends their tile on hair and background
   and clips the jaw. Slide their window down onto david's framing. The lever: the 4/3
   window reveals ~56–59% of a portrait source, so its top edge sits at P x ~42% — each
   +1pp of P slides the crop ~0.42pp down the source.
   Keyed on the box persona key, which renderCard puts on the button; these ids are
   already baked into this app via build-widget.mjs's PERSONA_ALLOWLIST default, so this
   borrows coupling rather than inventing it. A renamed, new, or custom persona falls
   back to the 18% above — a looser tile, not a break. */
.persona-list .persona-card[data-persona="mei"] .persona-card__poster,
.persona-list .persona-card[data-persona="mia"] .persona-card__poster {
  object-position: center 44%;
}
.persona-list .persona-card[aria-checked="true"] .persona-card__poster {
  border-color: var(--accent);
}

/* Add-your-own tile — a link, not a radio; sits outside #persona-list */
.persona-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 2px;
  flex-shrink: 0;
  text-align: center;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.persona-add:hover {
  transform: translateY(-3px) scale(1.06);
}
/* Tile-width but short — buying that height back is what lets the three real
   tiles grow (~72px -> ~96px at 1440). Full-tile on mobile, where the row runs
   horizontally and height is not the scarce axis. */
.persona-add__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--persona-tile);
  min-width: var(--persona-tile);
  height: var(--persona-add-h);
  border-radius: 8px;
  /* dashed, unlike the solid-photo tiles — reads as an empty slot to fill */
  border: 2.5px dashed rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  transition: border-color 0.2s, background 0.2s;
}
.persona-add:hover .persona-add__icon {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.2);
}

/* Name labels are dropped: they cost ~25px per tile, which is the difference
   between four tiles fitting the rail and not. Nothing is lost to assistive
   tech — the card's accessible name still comes from the poster's alt, and the
   Add tile from its aria-label — and the CTA ("Talk to David") names the
   selection for everyone else. */
.persona-list .persona-card__name,
.persona-add__name {
  display: none;
}

/* .persona-card__body from pre-rendered cards: flatten into flex flow */
.persona-list .persona-card__body {
  display: contents;
}

/* Hide tag inside the call screen */
.persona-list .persona-card__tag {
  display: none;
}

/* Controls float over the stream rather than sitting on a bar, so the avatar
   reads the full height of the panel. --dock-h is the band they float in; the
   captions and persona circles still anchor above it. */
.call-controls {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--dock-h);
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  /* A transparent band, not a bar: it spans the full panel width above the
     persona rail, whose Add tile falls inside it at every desktop height. */
  pointer-events: none;
}
.call-controls > * {
  pointer-events: auto;
}

/* frosted "Liquid Glass" round mute button */
.ft-btn {
  width: var(--ctl);
  height: var(--ctl);
  border-radius: 50%;
  border: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ft-btn--mute[aria-pressed="true"],
.ft-btn--mute.is-muted {
  background: #fff;
  color: #111;
}

/* primary / end button */
.stage__cta {
  height: var(--ctl);
  min-width: 110px;
  padding: 0 20px;
  border-radius: 999px;
  background: #34c759;
  color: #fff;
  box-shadow: none;
  border-color: transparent;
  font-family: var(--font-apple);
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* hover lift: only in pre-call states so it doesn't fight the red hang-up */
.stage[data-state="idle"] .stage__cta:hover,
.stage[data-state="selecting"] .stage__cta:hover {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.06);
}
/* red round hang-up in call states */
.stage[data-state="live"] .stage__cta,
.stage[data-state="waiting"] .stage__cta,
.stage[data-state="ready"] .stage__cta,
.stage[data-state="connecting"] .stage__cta {
  width: var(--ctl);
  height: var(--ctl);
  min-width: unset;
  padding: 0;
  border-radius: 50%;
  background: #ff3b30;
  font-size: 0;
  display: grid;
  place-items: center;
  align-content: center;
}
.stage[data-state="live"] .stage__cta::before,
.stage[data-state="waiting"] .stage__cta::before,
.stage[data-state="ready"] .stage__cta::before,
.stage[data-state="connecting"] .stage__cta::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 7 24 8.86'%3E%3Cpath d='M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 7 24 8.86'%3E%3Cpath d='M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* mute only shown during a live call */
.stage:not([data-state="live"]) .ft-btn--mute {
  display: none;
}

/* live dot — green in the call context */
.live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #30d158;
  margin-right: 6px;
  vertical-align: middle;
  animation: pulse 1.4s ease-in-out infinite;
}

/* spinner on dark screen */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 6px;
  animation: spin 0.8s linear infinite;
}

/* ----- personas ----- */
.personas,
.how,
.products,
.enterprise,
.companion {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(36px, 7vw, 80px) var(--gutter);
}
.section-head {
  margin-bottom: clamp(20px, 3vw, 34px);
  max-width: 60ch;
}
.section-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.section-head__sub {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
.persona-card {
  --accent: #888;
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 14px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, border-color 0.2s, box-shadow 0.2s;
}
.persona-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: var(--shadow-lg);
}
.persona-card[aria-checked="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-lg);
}
.persona-card[aria-checked="true"]::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.persona-card__poster {
  width: 64px;
  height: 64px;
  border-radius: 11px;
  object-fit: cover;
  background: var(--paper-2);
}
.persona-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}
.persona-card__tag {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 1px;
}

/* ----- products ----- */
.products {
  border-top: 1px solid var(--line);
}
.products--page,
.enterprise--page {
  border-top: none;
  padding-top: clamp(48px, 8vw, 96px);
}
/* ----- product story (editorial rows) ----- */
.story {
  display: flex;
  flex-direction: column;
}
.story-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding: clamp(40px, 6vw, 72px) 0;
  border-top: 1px solid var(--line);
}
.story-row:nth-child(even) .story-row__media {
  order: 2;
}
.story-viz {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--line);
  position: relative;
  overflow: hidden;
  background: var(--card);
}
.story-viz__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* live slot: gradient fallback + LIVE badge */
.story-viz--live {
  background: linear-gradient(135deg, #0c0c18 0%, #0d1a2e 100%);
}
.story-viz--live::after {
  content: "● LIVE";
  position: absolute;
  top: 16px;
  right: 16px;
  background: #c0392b;
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 1;
}
/* batch slot: gradient fallback */
.story-viz--batch {
  background: linear-gradient(145deg, #0e0e1a 0%, #171728 100%);
}
/* world slot: gradient fallback */
.story-viz--world {
  background: linear-gradient(180deg, #08081a 0%, #0d1730 55%, #182444 100%);
}
/* story text body */
.story-row__body {
  display: flex;
  flex-direction: column;
}
.story-row__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 14px;
}
.story-row__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.story-row__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 14px;
}
.story-row__blurb {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 18px;
}
.story-row__bullets {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.story-row__bullets li {
  font-size: 0.95rem;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
}
.story-row__bullets li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ----- companion ----- */
.companion {
  border-top: 1px solid var(--line);
}
.companion-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
.companion-point {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 3vw, 32px);
  transition: transform 0.18s ease, box-shadow 0.2s;
}
.companion-point:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.companion-point__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.companion-point__body {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* ----- how it works ----- */
.how {
  border-top: 1px solid var(--line);
}
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 36px);
  counter-reset: step;
}
.steps li {
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 14px;
}
.steps h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.steps p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* ----- enterprise lead form ----- */
.enterprise {
  border-top: 1px solid var(--line);
}
.lead-form {
  max-width: 680px;
}
.lead-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.lead-form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lead-form__row--full {
  grid-column: 1 / -1;
}
.lead-form__row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.lead-form__row input,
.lead-form__row select,
.lead-form__row textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: border-color 0.18s;
  width: 100%;
}
.lead-form__row input:focus,
.lead-form__row select:focus,
.lead-form__row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.lead-form__row textarea {
  resize: vertical;
  min-height: 100px;
}
.lead-form__honeypot {
  display: none;
}
.lead-form__privacy {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  max-width: 56ch;
}
.lead-form__submit {
  margin-top: 8px;
}
.lead-form__noscript {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}
.lead-status {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
}
.lead-status[hidden] {
  display: none;
}
.lead-status--success {
  background: color-mix(in srgb, var(--good) 10%, var(--card));
  color: var(--good);
  border: 1.5px solid color-mix(in srgb, var(--good) 25%, transparent);
}
.lead-status--error {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: color-mix(in srgb, var(--accent) 85%, var(--ink));
  border: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ----- enterprise page: hero ----- */
.ent-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(24px, 4vw, 48px);
}

/* ----- enterprise page: trust panel ----- */
.trust {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(36px, 7vw, 80px) var(--gutter);
}
.trust__grid {
  list-style: none;
  padding: 0;
  margin: clamp(20px, 3vw, 32px) 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1.2vw, 14px);
}
.trust__point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.96rem;
  color: var(--ink-soft);
  padding: 11px 14px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}
.trust__point::before {
  content: "✓";
  color: var(--good);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.trust__links {
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.trust__links a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trust__links a:hover {
  opacity: 0.8;
}

/* ----- companion-grid 2-column variant (agreement cards) ----- */
.companion-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* ----- companion-point tag label ----- */
.companion-point__tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 8px;
}

/* ----- pricing page: price list ----- */
.price-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 760px;
  margin-top: clamp(20px, 3vw, 32px);
}
.price-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(24px, 3.5vw, 36px) clamp(22px, 3.5vw, 34px);
}
.price-row + .price-row {
  border-left: 1.5px solid var(--line);
}
.price-row__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.04em;
  color: var(--ink);
  white-space: nowrap;
}
.price-row:first-child .price-row__value {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.price-row__label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 3px;
}
.price-row__note {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ----- enterprise page: FAQ accordion ----- */
.faq__list {
  max-width: 68ch;
}
.faq__item {
  border-top: 1px solid var(--line);
}
.faq__item:last-child {
  border-bottom: 1px solid var(--line);
}
.faq__q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  cursor: pointer;
  padding: 18px 36px 18px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--ink);
  position: relative;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { display: none; }
.faq__q::after {
  content: "+";
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  position: absolute;
  right: 0;
}
details[open] > .faq__q::after {
  transform: rotate(45deg);
}
.faq__a {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
  padding: 0 0 20px;
  max-width: 60ch;
}
.faq__examples {
  list-style: none;
  padding: 0 0 20px;
  margin: -8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 60ch;
}
.faq__examples li {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
}
.faq__examples li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.8rem;
  top: 2px;
}

/* ----- footer ----- */
.site-footer {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-2) 60%, transparent);
}
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) var(--gutter);
}
.site-footer__legal {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13.5px;
  max-width: 44ch;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}
.site-footer__links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.site-footer__links a:hover {
  color: var(--ink);
  border-color: var(--accent);
}

/* ----- browser-support banner ----- */
.browser-banner {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  background: var(--ink);
  color: var(--paper);
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-size: 14.5px;
  z-index: 90;
}
.browser-banner[hidden] {
  display: none;
}
.browser-banner--noscript {
  position: static;
  transform: none;
  margin: 0 auto 22px;
}

/* ----- animations ----- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.78); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 6px 18px -4px rgba(52,199,89,0.45); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgba(52,199,89,0.18), 0 6px 22px -2px rgba(52,199,89,0.7);
             transform: scale(1.035); }
}

/* breathing glow — idle and selecting only; must not apply when CTA morphs to red hang-up */
.stage[data-state="idle"] .stage__cta,
.stage[data-state="selecting"] .stage__cta {
  animation: cta-glow 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__copy > *,
  .laptop {
    opacity: 1;
  }
}

/* Mobile menu — hidden by default (desktop), styles added in the 900px block below */
.nav-toggle { display: none; }
.mobile-menu { display: none; }

/* ----- responsive ----- */

/* Desktop: the laptop is width-constrained by its grid column; the height guard
   only bites on short viewports (the phone was the other way round) */
@media (min-width: 901px) {
  .hero {
    min-height: calc(100dvh - 96px);
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
  }
  /* The grid column governs the width; the height term only bites on short
     viewports. max() floors it — without one, `100dvh - 260px` heads to zero
     (and then negative) on a squat window and collapses the device to nothing.
     Under ~500px tall the hero just scrolls, which beats a 60px laptop. */
  .laptop {
    max-width: min(100%, max(380px, calc((100dvh - 260px) * var(--lap-ar))));
    margin-inline: auto;
  }
  .laptop-stack {
    align-self: center;
  }
}

/* Mobile: full-bleed avatar, copy below the fold */
@media (max-width: 900px) {
  /* Overlay pages (homepage dark hero): take header out of flow */
  .site-header[data-hero-overlay="true"] {
    position: absolute;
    inset-inline: 0;
    top: 0;
    background: transparent;
  }
  /* Scope white text to overlay pages only */
  .site-header[data-hero-overlay="true"] .wordmark,
  .site-header[data-hero-overlay="true"] .site-nav a {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  }
/* Keep header above the overlay on all pages */
  .site-header {
    z-index: 30;
  }
  /* Hide inline desktop nav and CTA */
  .site-header .site-nav,
  .site-header > .nav-cta {
    display: none;
  }
  /* Show hamburger button */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: currentColor;
    margin-left: auto;
  }
  .nav-toggle__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 16px;
    position: relative;
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: '';
    position: absolute;
    left: 0;
  }
  .nav-toggle__bars::before { top: -7px; }
  .nav-toggle__bars::after  { top: 7px; }
  /* Morph to ✕ when open */
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: rotate(-45deg) translate(5px, -5px);
  }
  /* Full-screen overlay */
  .mobile-menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 20;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: color-mix(in srgb, var(--ink) 92%, transparent);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
  }
  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
  }
  .mobile-menu__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .mobile-menu__nav a {
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 1.6rem;
    text-decoration: none;
  }
  .mobile-menu__cta {
    margin-top: 8px;
  }
  body.is-menu-open {
    overflow: hidden;
  }
  .hero {
    display: flex;
    flex-direction: column;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }
  /* No laptop chrome on mobile: the video goes full-bleed portrait, as before. */
  .laptop-stack {
    order: -1;
    width: 100vw;
    height: 100dvh;
  }
  .laptop {
    flex: 1;
    border-radius: 0;
    background: #000;
  }
  .demo-hint {
    display: none;
  }
  .laptop__lid {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
  }
  .laptop__notch,
  .laptop__base {
    display: none;
  }
  .stage {
    width: 100%;
    height: 100dvh;
    aspect-ratio: auto;
    border-radius: 0;
  }
  /* a portrait screen fits the portrait stream: crop to fill, no pillarbox to mask */
  .stage::before {
    display: none;
  }
  .stage__video {
    object-fit: cover;
    object-position: var(--stage-focus);
    background: #14110d;
  }
  .hero__copy {
    order: 0;
    padding: var(--gutter);
  }
  /* bigger touch targets, and the controls sit proportionally on a tall screen */
  :root {
    --ctl: 58px;
  }
  .call-controls {
    height: auto;
    bottom: calc(4% + env(safe-area-inset-bottom));
  }
  /* the plate is toolbar chrome and there is no toolbar here; it would also land
     on top of the captions ribbon, which shares this offset */
  .call-name {
    display: none;
  }
  /* Safe-area insets so overlays clear notch / home indicator */
  .stage__captions {
    bottom: calc(13% + env(safe-area-inset-bottom));
  }
  /* The rail is a landscape-panel answer. This screen is portrait and full-bleed
     — there's width for the original row and no gutter to tuck a rail into, so
     put it back along the bottom at full size. */
  .persona-row {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    top: auto;
    left: 0;
    right: 0;
    bottom: calc(14% + env(safe-area-inset-bottom));
    padding: 8px 10px 0;
    overflow-x: auto;
    overflow-y: visible;
    /* fixed, not the rail's cqh formula: width is the scarce axis here, not
       height, and the panel is a full 100dvh tall so the formula would max out.
       The Add slot goes back to a full tile to line up with the row. */
    --persona-tile: 78px;
    --persona-add-h: calc(78px * 3 / 4);
  }
  .persona-add__icon {
    font-size: 26px;
  }
  .persona-list {
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
  }
  .persona-list .persona-card,
  .persona-add {
    padding: 4px 2px;
  }
  /* clear the overlaid header (84px tall at every mobile width) — the hero has no
     frame here, so the pill would otherwise sit on top of the wordmark */
  .call-top {
    top: calc(92px + env(safe-area-inset-top));
  }
  .persona-grid {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .story-row {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
  }
  .story-row:nth-child(even) .story-row__media {
    order: 0;
  }
  .story-viz {
    aspect-ratio: 16/9;
  }
  .companion-grid {
    grid-template-columns: 1fr;
  }
  .lead-form__grid {
    grid-template-columns: 1fr;
  }
  .trust__grid {
    grid-template-columns: 1fr;
  }
  .companion-grid--2 {
    grid-template-columns: 1fr;
  }
  .price-list {
    grid-template-columns: 1fr;
  }
  .price-row + .price-row {
    border-left: none;
    border-top: 1.5px solid var(--line);
  }
  .price-row__value {
    font-size: 1.7rem;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
}

/* ----- legal pages ----- */
.legal {
  border-top: 1px solid var(--line);
}
.legal--page {
  border-top: none;
  padding-top: clamp(48px, 8vw, 96px);
}
.legal__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 10vw, 120px);
}
.legal__prose {
  max-width: 70ch;
}
.legal__prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 650;
  color: var(--ink);
  margin: 2.5em 0 0.6em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line);
}
.legal__prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.legal__prose p {
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0.9em 0;
}
.legal__prose ul,
.legal__prose ol {
  color: var(--ink-soft);
  line-height: 1.75;
  padding-left: 1.5em;
  margin: 0.9em 0;
}
.legal__prose li {
  margin: 0.4em 0;
}
.legal__prose strong {
  color: var(--ink);
  font-weight: 600;
}
.legal__prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal__prose a:hover {
  opacity: 0.8;
}
.legal__prose blockquote {
  border-left: 3px solid var(--line-strong);
  margin: 1.2em 0;
  padding: 0.6em 1em;
  color: var(--ink-soft);
}
.legal__prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2em 0;
}

/* ----- Cookie consent banner ----- */
.cookie-banner {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--ink);
  color: var(--paper);
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 9000;
  max-width: min(680px, calc(100vw - 2rem));
  width: max-content;
  font-size: 0.92rem;
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner__text {
  flex: 1 1 200px;
  line-height: 1.4;
}
.cookie-banner__text a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.8;
}
.cookie-banner__text a:hover {
  opacity: 1;
}
.cookie-banner__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.cookie-banner .btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(246, 243, 238, 0.35);
  color: var(--paper);
  padding: 0.45em 1em;
  border-radius: 8px;
  font-size: inherit;
  font-weight: 500;
  transition: border-color 0.15s, opacity 0.15s;
}
.cookie-banner .btn--ghost:hover {
  border-color: rgba(246, 243, 238, 0.65);
}
/* Accept button inside the cookie banner has equal weight to Reject (CNIL/EDPB) */
.cookie-banner__btn--accept {
  border-color: rgba(246, 243, 238, 0.7);
  font-weight: 600;
}
.cookie-banner__btn--accept:hover {
  border-color: rgba(246, 243, 238, 1);
}
/* Footer "Cookie settings" button — styled to match footer links */
.site-footer__cookie-btn {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.site-footer__cookie-btn:hover {
  opacity: 1;
}

/* ------------------------------------------------------------------ *
 * Dark theme
 * ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17150f;
    --paper-2: #201d16;
    --card: #232019;
    --ink: #f4f0e8;
    --ink-soft: #d2ccc0;
    --muted: #9c9486;
    --line: rgba(244, 240, 232, 0.12);
    --line-strong: rgba(244, 240, 232, 0.22);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 55px -20px rgba(0, 0, 0, 0.75), 0 4px 14px rgba(0, 0, 0, 0.45);
    --accent: #ff7a2e;
    --good: #3fbf9f;
  }

  /* Override the hardcoded light gradient on body */
  body {
    background-image: radial-gradient(
      120% 80% at 50% -10%,
      #241f17 0%,
      var(--paper) 55%,
      #100e0a 100%
    );
  }

  /* Cookie banner: intentionally dark (ink bg + paper text) — keep dark when vars flip */
  .cookie-banner {
    background: #16140f;
    color: #f6f3ee;
  }
  .cookie-banner__text a {
    color: #f6f3ee;
  }
  .cookie-banner .btn--ghost {
    border-color: rgba(246, 243, 238, 0.35);
    color: #f6f3ee;
  }
  .cookie-banner .btn--ghost:hover {
    border-color: rgba(246, 243, 238, 0.65);
  }
  .cookie-banner__btn--accept {
    border-color: rgba(246, 243, 238, 0.7);
  }
  .cookie-banner__btn--accept:hover {
    border-color: rgba(246, 243, 238, 1);
  }

  /* Mobile menu: intentionally dark scrim + light text — pin so it doesn't flash white */
  .mobile-menu {
    background: color-mix(in srgb, #16140f 92%, transparent);
  }
  .mobile-menu__nav a {
    color: #f6f3ee;
  }
}