/* /start: Meta-ads landing page. Split layout (default): the "Try Arlo now" call stage beside the sign-up flow.
   ?layout=form: the flow alone. Loaded only when a page sets startPage. Mobile-first. */

/* == tokens == */
.theme-2026.brand-v2 {
  --fn-ink: var(--v2-ink);
  --fn-quiet: var(--v2-quiet);
  --fn-faint: var(--v2-faint);
  --fn-ground: var(--v2-ground);
  --fn-paper: var(--v2-paper);
  --fn-rule: var(--v2-rule);
  --fn-field: #cfd3d0;
  --fn-signal: var(--v2-signal);
  --fn-signal-hover: #4b42e6;
  --fn-signal-light: #6b63ff;
  --fn-signal-wash: rgba(94, 85, 253, .1);
  --fn-stage: #111418;
  --fn-stage-2: #1a1f25;
  --fn-stage-rule: rgba(255, 255, 255, .12);
  --fn-stage-text: #f5f6f4;
  --fn-stage-quiet: #a3aab0;
  --fn-voice: #8b83ff;
  --fn-live: #3ecf8e;
  --fn-wait: var(--v2-standby);
  --fn-radius: var(--v2-radius-sm);
  --fn-pill: var(--v2-radius-pill);
  --fn-ease: var(--v2-ease);
  --fn-fast: 140ms;
  --fn-slow: 320ms;
  --fn-gutter: clamp(20px, 4vw, 56px);
}

.theme-2026.brand-v2 .fn-wrap { width: min(100% - 2 * var(--fn-gutter), 1320px); margin-inline: auto; }
.theme-2026.brand-v2 .fn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme-2026.brand-v2 .fn-icon { flex: none; width: 20px; height: 20px; }

/* == header == */
.theme-2026.brand-v2 .fn-bar { border-bottom: 1px solid var(--fn-rule); background: var(--fn-ground); }
.theme-2026.brand-v2 .fn-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.theme-2026.brand-v2 .fn-bar__logo { display: block; width: auto; height: 28px; }

/* == page == */
.theme-2026.brand-v2 .fn { padding: 16px 0 0; background: radial-gradient(1100px 560px at 100% 0, rgba(94, 85, 253, .09), rgba(94, 85, 253, 0) 70%), var(--fn-ground); color: var(--fn-ink); font-family: var(--display); }
.theme-2026.brand-v2 .fn-grid { display: grid; gap: 16px; align-items: start; }
html[data-fn-layout="form"] .theme-2026.brand-v2 .fn-stage { display: none; }
html[data-fn-layout="form"] .theme-2026.brand-v2 .fn-grid { max-width: 560px; }

/* == stage: the live call (phone: orb left, title and control right) == */
.theme-2026.brand-v2 .fn-stage {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas: "head head" "orb intro" "orb talk" "slot slot" "foot foot";
  column-gap: 16px;
  row-gap: 12px;
  padding: 18px;
  overflow: hidden;
  border-radius: var(--fn-radius);
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(17, 20, 24, 0) 45%, rgba(8, 10, 12, .55) 100%),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--fn-stage);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -36px rgba(17, 20, 24, .7);
  color: var(--fn-stage-text);
  animation: fn-in var(--fn-slow) var(--fn-ease) both;
}
.theme-2026.brand-v2 .fn-stage__head { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-2026.brand-v2 .fn-stage__intro { grid-area: intro; align-self: end; }
.theme-2026.brand-v2 .fn-stage__title { margin: 0; color: var(--fn-stage-text); font: 500 24px/1.1 var(--display); letter-spacing: -.015em; }
.theme-2026.brand-v2 .fn-stage__sub { display: none; }
.theme-2026.brand-v2 .fn-stage__lede { display: none; margin: 10px auto 0; max-width: 44ch; color: var(--fn-stage-quiet); font: 400 16px/1.5 var(--display); }

.theme-2026.brand-v2 .fn-chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; margin: 0; padding: 0 12px; border: 1px solid var(--fn-stage-rule); border-radius: var(--fn-pill); background: rgba(255, 255, 255, .03); color: var(--fn-stage-text); font: 500 13px/1 var(--display); }
.theme-2026.brand-v2 .fn-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fn-voice); transition: background var(--fn-fast) linear; }
.theme-2026.brand-v2 [data-demo-state="connecting"] .fn-chip__dot { background: var(--fn-wait); animation: fn-wait 1s ease-in-out infinite alternate; }
.theme-2026.brand-v2 [data-demo-state="live"] .fn-chip__dot { background: var(--fn-live); animation: fn-pulse 1.6s ease-out infinite; }
.theme-2026.brand-v2 [data-demo-state="ended"] .fn-chip__dot { background: var(--fn-stage-quiet); }
.theme-2026.brand-v2 [data-demo-state="failed"] .fn-chip__dot { background: var(--fn-wait); }
.theme-2026.brand-v2 .fn-stage__timer { margin: 0; color: var(--fn-stage-quiet); font: 400 15px/1 var(--display); font-variant-numeric: tabular-nums; }
.theme-2026.brand-v2 [data-demo-state="live"] .fn-stage__timer { color: var(--fn-stage-text); }

/* == stage: voice orb == */
.theme-2026.brand-v2 .fn-orb { --fn-level: 0; grid-area: orb; position: relative; align-self: center; width: 96px; aspect-ratio: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.theme-2026.brand-v2 .fn-orb::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(94, 85, 253, .34), rgba(94, 85, 253, 0) 64%); opacity: calc(.75 + var(--fn-level) * .25); pointer-events: none; }
.theme-2026.brand-v2 .fn-orb__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.theme-2026.brand-v2 .fn-orb__core { position: absolute; inset: 25%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #8d86ff, var(--fn-signal) 58%, #463ddc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 30px -10px rgba(94, 85, 253, .8); transform: scale(calc(1 + var(--fn-level) * .07)); transition: background var(--fn-fast) linear; }
.theme-2026.brand-v2 .fn-orb__mic { width: 42%; height: 42%; color: #fff; }
.theme-2026.brand-v2 .fn-stage:not([data-demo-state="idle"]):not([data-retry]) .fn-orb { cursor: default; }
.theme-2026.brand-v2 :is([data-demo-state="ended"], [data-demo-state="failed"]):not([data-retry]) .fn-orb__core { background: #2a3038; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.theme-2026.brand-v2 [data-demo-state="connecting"] .fn-orb__core { animation: fn-wait 900ms ease-in-out infinite alternate; }

/* == stage: the one control (talk, end, retry, or go to the form) == */
.theme-2026.brand-v2 .fn-talk { grid-area: talk; justify-self: start; align-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 18px; border: 0; border-radius: var(--fn-pill); background: var(--fn-signal); color: #fff; font: 500 16px/1 var(--display); white-space: nowrap; cursor: pointer; transition: background var(--fn-fast) linear, box-shadow var(--fn-fast) linear; }
.theme-2026.brand-v2 .fn-talk:hover { background: var(--fn-signal-light); }
.theme-2026.brand-v2 .fn-talk:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.theme-2026.brand-v2 .fn-talk .fn-icon { width: 18px; height: 18px; }
.theme-2026.brand-v2 .fn-talk__arrow { display: none; transition: transform var(--fn-fast) var(--fn-ease); }
.theme-2026.brand-v2 .fn-talk:hover .fn-talk__arrow { transform: translateX(3px); }
.theme-2026.brand-v2 [data-demo-state="connecting"] .fn-talk { background: #262c34; cursor: progress; }
.theme-2026.brand-v2 [data-demo-state="live"] .fn-talk { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); }
.theme-2026.brand-v2 [data-demo-state="live"] .fn-talk:hover { box-shadow: inset 0 0 0 1px #fff; background: rgba(255, 255, 255, .06); }
.theme-2026.brand-v2 .fn-stage:is([data-demo-state="connecting"], [data-demo-state="live"]) .fn-talk__mic,
.theme-2026.brand-v2 .fn-stage:is([data-demo-state="ended"], [data-demo-state="failed"]):not([data-retry]) .fn-talk__mic { display: none; }
.theme-2026.brand-v2 .fn-stage:is([data-demo-state="ended"], [data-demo-state="failed"]):not([data-retry]) .fn-talk__arrow { display: block; }

/* == stage: prompts, then the transcript in the same slot == */
.theme-2026.brand-v2 .fn-slot { grid-area: slot; display: grid; min-width: 0; }
.theme-2026.brand-v2 .fn-prompts,
.theme-2026.brand-v2 .fn-transcript { grid-area: 1 / 1; min-width: 0; }
.theme-2026.brand-v2 .fn-prompts { display: grid; gap: 8px; }
.theme-2026.brand-v2 .fn-prompts__label { display: none; margin: 0; color: var(--fn-stage-quiet); font: 400 13px/1.3 var(--display); }
.theme-2026.brand-v2 .fn-prompts__list { display: flex; gap: 8px; margin: 0 -18px; padding: 0 18px 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 18px; }
.theme-2026.brand-v2 .fn-prompts__list::after { content: ""; flex: 0 0 10px; }
.theme-2026.brand-v2 .fn-prompts__list::-webkit-scrollbar { display: none; }
.theme-2026.brand-v2 .fn-prompt { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 16px; border: 1px solid var(--fn-stage-rule); border-radius: var(--fn-pill); background: rgba(255, 255, 255, .04); color: var(--fn-stage-text); font: 400 15px/1.2 var(--display); white-space: nowrap; scroll-snap-align: start; cursor: pointer; transition: border-color var(--fn-fast) linear, background var(--fn-fast) linear; }
.theme-2026.brand-v2 .fn-prompt::before { content: "\201C"; }
.theme-2026.brand-v2 .fn-prompt::after { content: "\201D"; }
.theme-2026.brand-v2 .fn-prompt:hover { border-color: rgba(255, 255, 255, .32); }
.theme-2026.brand-v2 .fn-prompt[aria-pressed="true"] { border-color: var(--fn-voice); background: rgba(94, 85, 253, .2); }
.theme-2026.brand-v2 .fn-prompt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.theme-2026.brand-v2 .fn-transcript { position: relative; display: none; flex-direction: column; gap: 12px; height: 208px; margin: 0; padding: 18px 2px 2px 0; overflow-y: auto; list-style: none; text-align: left; scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px); mask-image: linear-gradient(to bottom, transparent 0, #000 18px); }
.theme-2026.brand-v2 .fn-transcript::-webkit-scrollbar { display: none; }
.theme-2026.brand-v2 .fn-stage:is([data-demo-state="connecting"], [data-demo-state="live"], [data-demo-state="ended"]) .fn-transcript { display: flex; }
.theme-2026.brand-v2 .fn-stage:is([data-demo-state="connecting"], [data-demo-state="live"], [data-demo-state="ended"]) .fn-prompts { display: none; }
.theme-2026.brand-v2 .fn-line { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 3px; animation: fn-line-in 220ms var(--fn-ease) both; }
.theme-2026.brand-v2 .fn-line__who { color: var(--fn-voice); font: 500 13px/1.3 var(--display); }
.theme-2026.brand-v2 .fn-line--user .fn-line__who { color: var(--fn-stage-text); }
.theme-2026.brand-v2 .fn-line__time { color: var(--fn-stage-quiet); font: 400 13px/1.3 var(--display); font-variant-numeric: tabular-nums; }
.theme-2026.brand-v2 .fn-line__text { grid-column: 1 / -1; margin: 0; color: var(--fn-stage-text); font: 400 16px/1.45 var(--display); transition: opacity var(--fn-fast) linear; }
.theme-2026.brand-v2 .fn-line--user .fn-line__text { color: #d6dadd; }
.theme-2026.brand-v2 .fn-line.is-partial .fn-line__text { opacity: .6; }

/* == stage: credibility line and status small print == */
/* The small print and the demo Turnstile slot share one cell sized for either, so a visible challenge swaps in
   without changing the stage height. */
.theme-2026.brand-v2 .fn-stage__foot { grid-area: foot; display: grid; padding-top: 12px; border-top: 1px solid var(--fn-stage-rule); }
.theme-2026.brand-v2 .fn-stage__print { grid-area: 1 / 1; display: grid; align-content: start; gap: 4px; }
.theme-2026.brand-v2 .fn-stage .fn-turnstile { grid-area: 1 / 1; align-self: center; justify-self: center; }
.theme-2026.brand-v2 .fn-stage__foot.has-challenge .fn-stage__print { visibility: hidden; }
.theme-2026.brand-v2 .fn-stage__proof { margin: 0; color: var(--fn-stage-text); font: 500 14px/1.4 var(--display); }
.theme-2026.brand-v2 .fn-stage__status { min-height: 4.35em; margin: 0; color: var(--fn-stage-quiet); font: 400 13px/1.45 var(--display); }
.theme-2026.brand-v2 :is([data-demo-state="ended"], [data-demo-state="failed"]) .fn-stage__status { color: var(--fn-stage-text); }

/* == sign-up column == */
.theme-2026.brand-v2 .fn-signup { display: grid; align-content: start; gap: 12px; padding-top: 8px; scroll-margin-top: 16px; animation: fn-in var(--fn-slow) var(--fn-ease) 60ms both; }
.theme-2026.brand-v2 .fn-title { margin: 0; color: var(--fn-ink); font: 300 clamp(34px, 4.6vw, 62px)/1.02 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.theme-2026.brand-v2 .fn-title strong { display: block; color: var(--fn-signal); font-weight: 500; }
.theme-2026.brand-v2 .fn-lede { max-width: 42ch; margin: 0; color: var(--fn-quiet); font: 400 17px/1.5 var(--display); }


.theme-2026.brand-v2 .fn-form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; }
.theme-2026.brand-v2 .fn-label { margin: 6px 0 0; color: var(--fn-ink); font: 500 14px/1.3 var(--display); letter-spacing: 0; text-transform: none; }
.theme-2026.brand-v2 .fn-label:first-child { margin-top: 0; }
.theme-2026.brand-v2 .fn-input { width: 100%; height: 52px; margin: 0; padding: 0 14px; border: 1px solid var(--fn-field); border-radius: var(--fn-radius); background: var(--fn-paper); color: var(--fn-ink); font: 400 17px/1 var(--display); }
.theme-2026.brand-v2 .fn-input::placeholder { color: var(--fn-faint); }
.theme-2026.brand-v2 .fn-input:focus { border-color: var(--fn-signal); outline: none; box-shadow: 0 0 0 3px rgba(94, 85, 253, .18); }
.theme-2026.brand-v2 .fn-input[aria-invalid="true"] { border-color: var(--v2-handoff); }

.theme-2026.brand-v2 .fn-phone { display: flex; height: 62px; border: 1px solid var(--fn-field); border-radius: var(--fn-radius); background: var(--fn-paper); transition: border-color var(--fn-fast) linear, box-shadow var(--fn-fast) linear; }
.theme-2026.brand-v2 .fn-phone:focus-within { border-color: var(--fn-signal); box-shadow: 0 0 0 3px rgba(94, 85, 253, .18); }
.theme-2026.brand-v2 .fn-phone:has([aria-invalid="true"]) { border-color: var(--v2-handoff); }
.theme-2026.brand-v2 .fn-phone__cc { display: grid; place-items: center; padding: 0 14px; border-right: 1px solid var(--fn-rule); color: var(--fn-quiet); font: 500 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.theme-2026.brand-v2 .fn-input--phone { height: 100%; border: 0; border-radius: 0 var(--fn-radius) var(--fn-radius) 0; font-size: 22px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.theme-2026.brand-v2 .fn-input--phone:focus { box-shadow: none; }
.theme-2026.brand-v2 .fn-error { margin: 0; color: #a9601f; font: 400 13px/1.4 var(--display); }
.theme-2026.brand-v2 .fn-error--form { color: #b42318; font-size: 14px; }

.theme-2026.brand-v2 .fn-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; margin-top: 8px; border: 0; border-radius: var(--fn-pill); background: var(--fn-signal); color: #fff; font: 500 17px/1 var(--display); text-decoration: none; cursor: pointer; transition: background var(--fn-fast) linear, transform var(--fn-fast) var(--fn-ease); }
.theme-2026.brand-v2 .fn-button:hover { background: var(--fn-signal-hover); color: #fff; }
.theme-2026.brand-v2 .fn-button:active { transform: scale(.99); }
.theme-2026.brand-v2 .fn-button:disabled { opacity: .7; cursor: progress; }
.theme-2026.brand-v2 .fn-button:focus-visible { outline: 2px solid var(--fn-signal); outline-offset: 3px; }
.theme-2026.brand-v2 .fn-consent,
.theme-2026.brand-v2 .fn-fine { margin: 4px 0 0; color: var(--fn-quiet); font: 400 12.5px/1.5 var(--display); }
.theme-2026.brand-v2 .fn-consent a,
.theme-2026.brand-v2 .fn-fine a { color: var(--fn-ink); }
.theme-2026.brand-v2 .fn-assure { margin: 2px 0 0; color: var(--fn-ink); font: 400 14px/1.4 var(--display); text-align: center; }
/* The consent sentence stays word-for-word (it is sent as the consent record) but reads as fine print. */
.theme-2026.brand-v2 .fn-consent { margin-top: 2px; font-size: 11px; line-height: 1.4; }

/* Turnstile: a collapsed slot while the check runs invisibly. It opens only when Turnstile needs a visible challenge
   (before/after-interactive callbacks), so it never sits on top of other content; in the stage it stands in for the small print. */
.theme-2026.brand-v2 .fn-turnstile { height: 0; overflow: hidden; }
.theme-2026.brand-v2 .fn-turnstile.is-visible { display: flex; justify-content: center; height: auto; min-height: 65px; overflow: visible; }

.theme-2026.brand-v2 [data-handoff-mock] code { word-break: break-all; font-size: 12px; }


/* == footer == */
.theme-2026.brand-v2 .fn-foot { background: var(--fn-ground); color: var(--fn-quiet); font: 400 13px/1.4 var(--display); }
.theme-2026.brand-v2 .fn-foot__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.theme-2026.brand-v2 .fn-foot__links { display: flex; gap: 4px; }
.theme-2026.brand-v2 .fn-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--fn-quiet); }
.theme-2026.brand-v2 .fn-foot a:hover { color: var(--fn-ink); }

/* == motion == */
@keyframes fn-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes fn-line-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes fn-wait { to { opacity: .45; } }
@keyframes fn-pulse { from { box-shadow: 0 0 0 0 rgba(62, 207, 142, .6); } to { box-shadow: 0 0 0 7px rgba(62, 207, 142, 0); } }

/* == phone: a compact stage, then the form right under it == */
@media (max-width: 699px) {
  .theme-2026.brand-v2 .fn-bar__inner { min-height: 56px; }
  .theme-2026.brand-v2 .fn { padding-bottom: 32px; }
  .theme-2026.brand-v2 .fn-grid { gap: 12px; }

  /* Stage: orb beside the title, one full-width control, the microphone note under it. The prompts wait for the
     tap and show as "try saying" cues until Arlo's first words replace them. */
  .theme-2026.brand-v2 .fn-stage { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "head head" "orb intro" "talk talk" "slot slot" "foot foot"; column-gap: 14px; row-gap: 14px; padding: 16px; }
  .theme-2026.brand-v2 .fn-orb { width: 72px; }
  .theme-2026.brand-v2 .fn-stage__intro { align-self: center; }
  .theme-2026.brand-v2 .fn-stage__sub { display: block; margin: 4px 0 0; color: var(--fn-stage-quiet); font: 400 14px/1.4 var(--display); }
  .theme-2026.brand-v2 .fn-talk { justify-self: stretch; min-height: 48px; }
  .theme-2026.brand-v2 .fn-stage:is([data-demo-state="idle"], [data-demo-state="failed"]) .fn-slot { display: none; }
  .theme-2026.brand-v2 .fn-stage .fn-slot { min-height: 208px; }
  .theme-2026.brand-v2 .fn-prompts { display: none; align-content: start; }
  .theme-2026.brand-v2 .fn-stage:is([data-demo-state="connecting"], [data-demo-state="live"]) .fn-slot:has(.fn-transcript:empty) .fn-prompts { display: grid; }
  .theme-2026.brand-v2 .fn-stage:is([data-demo-state="connecting"], [data-demo-state="live"]) .fn-transcript:empty { display: none; }
  .theme-2026.brand-v2 .fn-prompts__label { display: block; }
  .theme-2026.brand-v2 .fn-prompts__list { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .theme-2026.brand-v2 .fn-prompts__list::after { display: none; }
  .theme-2026.brand-v2 .fn-prompt { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .theme-2026.brand-v2 .fn-stage__foot { padding-top: 0; border-top: 0; text-align: center; }
  .theme-2026.brand-v2 .fn-stage__proof { display: none; }

  /* Form: headline, one line, the field and button, all on the first screen; the demo follows. */
  .theme-2026.brand-v2 .fn-title { font-size: 34px; }
  .theme-2026.brand-v2 .fn-lede { font-size: 16px; }
  .theme-2026.brand-v2 .fn-signup { gap: 10px; padding-top: 0; }
  .theme-2026.brand-v2 .fn-phone { height: 56px; }
  .theme-2026.brand-v2 .fn-grid { gap: 24px; }
}

/* == tablet and up == */
@media (min-width: 700px) {
  .theme-2026.brand-v2 .fn-bar__inner { min-height: 76px; }
  .theme-2026.brand-v2 .fn-bar__logo { height: 32px; }
}

/* == desktop split: the orb is the centered hero == */
@media (min-width: 1024px) {
  /* The form comes first in the markup (phones show it first); on desktop the demo takes the left column. */
  html:not([data-fn-layout="form"]) .theme-2026.brand-v2 .fn-stage { grid-column: 1; grid-row: 1; }
  html:not([data-fn-layout="form"]) .theme-2026.brand-v2 .fn-signup { grid-column: 2; grid-row: 1; }
  .theme-2026.brand-v2 .fn { padding-top: 32px; }
  .theme-2026.brand-v2 .fn-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(40px, 4.5vw, 80px); align-items: stretch; }
  html[data-fn-layout="form"] .theme-2026.brand-v2 .fn-grid { grid-template-columns: minmax(0, 1fr); }
  .theme-2026.brand-v2 .fn-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: clamp(640px, calc(100vh - 76px - 64px), 760px); padding: clamp(28px, 2.6vw, 40px); text-align: center; }
  .theme-2026.brand-v2 .fn-stage__head { align-self: stretch; }
  .theme-2026.brand-v2 .fn-stage__intro { align-self: stretch; margin-top: auto; }
  .theme-2026.brand-v2 .fn-stage__title { font-size: clamp(32px, 2.8vw, 42px); }
  .theme-2026.brand-v2 .fn-stage__lede { display: block; }
  .theme-2026.brand-v2 .fn-orb { flex: none; width: clamp(200px, 17vw, 260px); }
  .theme-2026.brand-v2 .fn-talk { flex: none; align-self: center; min-height: 50px; padding: 0 24px; font-size: 17px; }
  /* Idle: the slot takes the chips' height, so the orb, control and chips sit centered in the stage. From the tap on,
     it is fixed at the transcript's height (the change lands on the tap itself, inside the input window). */
  .theme-2026.brand-v2 .fn-slot { align-self: stretch; }
  .theme-2026.brand-v2 .fn-stage:not([data-demo-state="idle"]) .fn-slot { height: 162px; }
  .theme-2026.brand-v2 .fn-prompts__label { display: block; }
  .theme-2026.brand-v2 .fn-input { height: 48px; }
  .theme-2026.brand-v2 .fn-input--phone { height: 100%; }
  .theme-2026.brand-v2 .fn-button { height: 52px; }
  .theme-2026.brand-v2 .fn-prompts { align-content: center; justify-items: center; }
  .theme-2026.brand-v2 .fn-prompts__list { flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; overflow: visible; }
  .theme-2026.brand-v2 .fn-transcript { justify-self: center; width: min(100%, 540px); height: 162px; }
  .theme-2026.brand-v2 .fn-stage__foot { align-self: stretch; margin-top: auto; }
  .theme-2026.brand-v2 .fn-stage__status { min-height: 2.9em; }
  .theme-2026.brand-v2 .fn-stage__print { min-height: 74px; }
  /* Sized so the accent phrase stays on one line in the form column. */
  .theme-2026.brand-v2 .fn-title { font-size: clamp(34px, 3.9vw, 52px); }
  /* Split: the form sits centered against the demo stage. */
  html:not([data-fn-layout="form"]) .theme-2026.brand-v2 .fn-signup { align-self: center; gap: 16px; padding: 0; }
  html[data-fn-layout="form"] .theme-2026.brand-v2 .fn-signup { max-width: 520px; padding-top: clamp(24px, 8vh, 96px); }
  html:not([data-fn-layout="form"]) .theme-2026.brand-v2 .fn-foot { margin-top: 40px; }
}

/* == industry pages: label, tool drawing behind the demo, example texts == */
.theme-2026.brand-v2 .fn-eyebrow { display: inline-flex; align-items: center; justify-self: start; gap: 8px; margin: 0; padding: 6px 12px 6px 10px; border-radius: var(--fn-pill); background: var(--fn-signal-wash); color: var(--fn-signal); font: 500 14px/1.2 var(--display); }
.theme-2026.brand-v2 .fn-eyebrow__icon { width: 18px; height: 18px; }
.theme-2026.brand-v2 .fn--industry .fn-stage { isolation: isolate; }
.theme-2026.brand-v2 .fn-stage__motif { position: absolute; z-index: -1; top: 24%; right: -7%; width: 42%; max-width: 320px; color: var(--fn-voice); opacity: .16; transform: rotate(-16deg); pointer-events: none; }

.theme-2026.brand-v2 .fn-texts { display: grid; gap: 10px; }
.theme-2026.brand-v2 .fn-texts__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; color: var(--fn-ink); font: 500 15px/1.3 var(--display); }
.theme-2026.brand-v2 .fn-texts__tag { padding: 3px 9px; border: 1px solid var(--fn-rule); border-radius: var(--fn-pill); color: var(--fn-quiet); font: 400 12px/1.2 var(--display); }
.theme-2026.brand-v2 .fn-texts__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.theme-2026.brand-v2 .fn-text { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 12px 14px; border: 1px solid var(--fn-rule); border-radius: 14px; background: rgba(255, 255, 255, .78); box-shadow: 0 14px 30px -22px rgba(17, 20, 24, .45); }
.theme-2026.brand-v2 .fn-text:nth-child(2) { margin-inline: 10px; opacity: .92; }
/* The site reveal (motion.js) fades the block in when it scrolls into view; the texts then arrive one after another. */
.theme-2026.brand-v2 .fn-texts[data-reveal="in"] .fn-text { animation: fn-text-in 460ms var(--fn-ease) both; }
.theme-2026.brand-v2 .fn-texts[data-reveal="in"] .fn-text:nth-child(1) { animation-delay: 250ms; }
.theme-2026.brand-v2 .fn-texts[data-reveal="in"] .fn-text:nth-child(2) { animation-delay: 650ms; }
.theme-2026.brand-v2 .fn-text__app { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--fn-signal); color: #fff; }
.theme-2026.brand-v2 .fn-text__app .fn-icon { width: 20px; height: 20px; }
.theme-2026.brand-v2 .fn-text__head { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--fn-ink); font: 500 13px/1.3 var(--display); }
.theme-2026.brand-v2 .fn-text__when { color: var(--fn-faint); font-weight: 400; }
.theme-2026.brand-v2 .fn-text__msg { margin: 0; color: var(--fn-ink); font: 400 14.5px/1.4 var(--display); }
.theme-2026.brand-v2 .fn-text__kind { font-weight: 500; }
@keyframes fn-text-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

@media (max-width: 699px) {
  .theme-2026.brand-v2 .fn-eyebrow { font-size: 13px; padding: 5px 11px 5px 9px; }
  .theme-2026.brand-v2 .fn-stage__motif { top: -6%; right: -9%; width: 44%; opacity: .14; }
}
@media (min-width: 1024px) {
  /* The demo spans both rows; the form and the example texts stack in the right column, centered as a group. */
  html:not([data-fn-layout="form"]) .theme-2026.brand-v2 .fn--industry .fn-stage { grid-row: 1 / span 2; }
  html:not([data-fn-layout="form"]) .theme-2026.brand-v2 .fn--industry .fn-signup { align-self: end; }
  html:not([data-fn-layout="form"]) .theme-2026.brand-v2 .fn--industry .fn-texts { grid-column: 2; grid-row: 2; align-self: start; margin-top: 20px; }
}

/* == reduced motion == */
@media (prefers-reduced-motion: reduce) {
  .theme-2026.brand-v2 .fn-stage,
  .theme-2026.brand-v2 .fn-signup,
  .theme-2026.brand-v2 .fn-line,
  .theme-2026.brand-v2 .fn-chip__dot,
  .theme-2026.brand-v2 .fn-orb__core,
  .theme-2026.brand-v2 .fn-text { animation: none; }
  .theme-2026.brand-v2 .fn-orb__core,
  .theme-2026.brand-v2 .fn-talk__arrow,
  .theme-2026.brand-v2 .fn-button { transition: none; }
  .theme-2026.brand-v2 .fn-orb__core { transform: none; }
}

/* Intercom (loaded site-wide by the tag manager) stays loaded here, but its chat bubble would
   cover the live captions on mobile and pull ad traffic out of the funnel. This file only loads
   on /start, so the bubble still shows everywhere else. */
.intercom-lightweight-app-launcher,
.intercom-launcher,
.intercom-launcher-frame,
iframe[name="intercom-launcher-frame"] { display: none !important; }