/* Ambipath next, v2 theme: two inks.
   Cobalt is the agent. Amber is the brand and its customer. Everything else is graphite on stone.
   Agent paths are dotted and the brand's relationship is solid, the same dots-to-solid idea as the Ambipath mark.
   Loads after /css/site.css, redefines its tokens and restyles nav, buttons and footer for body.v. */

:root {
  --paper: #F1F2EE; --surface: #FFFFFF; --tint: #E8EAE4;
  --ink: #10132B; --ink-2: #4B5066; --ink-3: #6E7387;
  --rule: #DADCD5; --rule-2: #C4C7BE;
  --cobalt: #3443E0; --cobalt-2: #2633B8; --cobalt-wash: #E3E6FB;
  --amber: #F28A33; --amber-deep: #B85A14; --amber-ink: #1B1206; --amber-wash: #FCE9D8;
  --night: #0B1240; --night-ink: #EEF0FA; --night-ink-2: #AEB4DA; --night-ink-3: #8188BE;
  --ok: #2C7A55; --stop: #B23B22;
  --sans: "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Funnel Display", "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --board: "Martian Mono", ui-monospace, Menlo, monospace;
  --voice: var(--display);
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --v-max: 1240px; --v-gut: 40px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A0E2C; --surface: #121839; --tint: #1A2149;
    --ink: #EDEFF8; --ink-2: #B0B5CF; --ink-3: #8389A9; --rule: #232A55; --rule-2: #313A6C;
    --cobalt: #8691FF; --cobalt-2: #A3ABFF; --cobalt-wash: #1E2770; --amber-deep: #F7A35C; --amber-wash: #3A2512;
    --night: #05081F;
  }
}
:root[data-theme="dark"] {
  --paper: #0A0E2C; --surface: #121839; --tint: #1A2149;
  --ink: #EDEFF8; --ink-2: #B0B5CF; --ink-3: #8389A9; --rule: #232A55; --rule-2: #313A6C;
  --cobalt: #8691FF; --cobalt-2: #A3ABFF; --cobalt-wash: #1E2770; --amber-deep: #F7A35C; --amber-wash: #3A2512;
  --night: #05081F;
}

body.v { background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); }
body.v ::selection { background: var(--cobalt); color: #fff; }

/* Nav, buttons and footer in this theme */
body.v .nav { background: color-mix(in srgb, var(--paper) 86%, transparent); border-bottom-color: var(--rule); }
body.v .brand span { font: 640 20px/1 var(--display); letter-spacing: -.025em; }
body.v .navlinks a { font-weight: 500; }
body.v .btn { border-radius: 8px; background: var(--ink); color: var(--paper); box-shadow: none; font: 600 16px/1 var(--sans); min-height: 50px; padding: 0 22px; position: relative; overflow: hidden; }
body.v .btn::after { display: none; }
body.v .btn::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
body.v .btn:hover { background: var(--ink); transform: none; box-shadow: none; }
body.v .btn:hover::before { transform: scaleX(1); }
body.v .btn.small-btn { min-height: 40px; padding: 0 16px; font-size: 15px; }
body.v .textlink { font-weight: 500; text-decoration-color: var(--amber); }
body.v .mnav a { font: 640 26px/1.2 var(--display); letter-spacing: -.025em; }
body.v .mnav a.btn { color: var(--paper); }
body.v :focus-visible { outline-color: var(--cobalt); }
body.v footer.foot { border-top: 1px solid var(--rule); }
body.v .foot-col p { font-weight: 600; color: var(--ink); }
.nav-cta .cta-s { display: none; }
@media (max-width: 440px) { .nav-cta .cta-l { display: none; } .nav-cta .cta-s { display: inline; } }

/* Layout and type. The width axis is the type treatment: headlines run wide and heavy */
.v-wrap { max-width: var(--v-max); margin-inline: auto; padding-inline: var(--v-gut); position: relative; }
.v-band { padding-block: 120px; border-top: 1px solid var(--rule); position: relative; }
.v-h1 { font: 640 clamp(42px, 5.6vw, 84px)/.96 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.v-h1 .then { display: block; color: var(--ink-3); font-weight: 560; }
.v-h2 { font: 640 clamp(32px, 3.6vw, 52px)/1.0 var(--display); letter-spacing: -.038em; text-wrap: balance; max-width: 17em; }
.v-h3 { font: 640 23px/1.12 var(--display); letter-spacing: -.025em; }
.v-kicker { font: 500 15px/1.3 var(--sans); color: var(--ink-3); }
.v-lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.v-body { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 31em; text-wrap: pretty; }
.v-fine { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.v-head { display: grid; gap: 18px; margin-bottom: 64px; }
.v-actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }

/* Tags shared by panels */
.v-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 4px; font: 600 12px/1.4 var(--sans); background: var(--tint); color: var(--ink-2); white-space: nowrap; }
.v-chip.agent { background: var(--cobalt-wash); color: var(--cobalt); }
.v-chip.agent::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px dotted currentColor; }
.v-chip.amber { background: var(--amber-wash); color: var(--amber-deep); }
.v-chip.ok { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }
.v-chip.stop { background: color-mix(in srgb, var(--stop) 12%, transparent); color: var(--stop); }

/* The shift */
.v-shift { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 88px; align-items: start; }
.v-bars { display: grid; gap: 20px; padding-top: 8px; }
.v-bar-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: end; }
.v-bar-row .yr { font: 600 15px/1.25 var(--sans); }
.v-bar-row .yr small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); }
.v-bar-track { position: relative; height: 40px; margin-top: 10px; }
.v-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.v-bar.now { width: 5.4%; background: var(--cobalt); }
.v-bar.lo { width: 49%; background: var(--cobalt); }
.v-bar.hi { width: 100%; background: repeating-linear-gradient(90deg, var(--cobalt) 0 3px, transparent 3px 8px); opacity: .45; }
.v-bar-val { display: block; font: 640 30px/1 var(--display); letter-spacing: -.035em; white-space: nowrap; }
.v-bar-val.inside { color: #fff; left: 18px; }
.v-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 52px; border-top: 1px solid var(--ink); }
.v-fact { padding: 22px 24px 0 0; display: grid; gap: 8px; align-content: start; }
.v-fact + .v-fact { padding-left: 24px; border-left: 1px solid var(--rule); }
.v-fact strong { font: 640 46px/1 var(--display); letter-spacing: -.045em; }
.v-fact span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* The five parts */
.v-part { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 88px; align-items: center; padding-block: 72px; border-top: 1px solid var(--rule); }
.v-part:first-of-type { border-top: 0; padding-top: 0; }
.v-part-copy { display: grid; gap: 16px; align-content: start; }
.v-part-copy .n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 640 15px/1 var(--sans); color: var(--cobalt); border: 2px dotted var(--cobalt); }
.v-part-copy .n.solid { border: 0; background: var(--amber); color: var(--amber-ink); }
.v-part-copy .more { font-size: 15px; line-height: 1.5; color: var(--ink-3); max-width: 30em; }
@media (min-width: 1081px) { .v-part.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); } .v-part.flip .v-part-copy { order: 2; } }

.v-panel { background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--rule), 0 40px 70px -50px rgba(16,19,43,.5); overflow: hidden; font-size: 14.5px; }
.v-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--rule); color: var(--ink-3); font-size: 14px; }
.v-panel-head b { color: var(--ink); font-weight: 600; }
.v-visit { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--rule); }
.v-visit:first-child { border-top: 0; }
.v-visit time, .v-dash-row time { color: var(--ink-3); font: 400 13.5px/1 var(--ui); font-variant-numeric: tabular-nums; }
.v-visit .what { color: var(--ink-2); min-width: 0; }
.v-visit .what b { color: var(--ink); font-weight: 600; }
.v-visit.agent { box-shadow: inset 3px 0 0 var(--cobalt); }
.v-split { display: grid; gap: 10px; padding: 18px 20px 20px; border-top: 1px solid var(--rule); }
.v-split-bar { height: 10px; border-radius: 3px; background: var(--tint); overflow: hidden; }
.v-split-bar i { display: block; height: 100%; width: 4.1%; background: var(--cobalt); }
.v-split-key { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink-3); }

.v-rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--rule); }
.v-rule:first-child { border-top: 0; }
.v-rule small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.v-seg { display: inline-flex; padding: 3px; border-radius: 7px; background: var(--tint); font: 600 12.5px/1 var(--sans); }
.v-seg span { padding: 7px 10px; border-radius: 5px; color: var(--ink-3); }
.v-seg span.sel { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(16,19,43,.12); }
.v-log { padding: 14px 20px 16px; border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--stop) 6%, var(--surface)); display: grid; gap: 4px; line-height: 1.45; color: var(--ink-2); }
.v-log b { color: var(--stop); font-weight: 600; }

.v-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 20px; }
.v-item .name { font: 640 17px/1.25 var(--sans); }
.v-item .name small { display: block; font: 400 13.5px/1.4 var(--sans); color: var(--ink-3); margin-top: 4px; }
.v-item .price { text-align: right; white-space: nowrap; }
.v-item .price s { color: var(--ink-3); font-size: 14px; margin-right: 8px; }
.v-item .price b { font: 640 24px/1 var(--sans); }
.v-weigh { margin: 0; border-top: 1px solid var(--rule); }
.v-weigh div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 12px 20px; border-top: 1px solid var(--rule); line-height: 1.4; }
.v-weigh div:first-child { border-top: 0; }
.v-weigh dt { color: var(--ink-3); }
.v-weigh dd { margin: 0; }

/* Parts four and five sit on the night band, where the visit turns into a relationship */
.v-nightband { background: var(--night); color: var(--night-ink); border-top: 0; overflow: clip; }
.v-nightband .v-body { color: var(--night-ink-2); }
.v-nightband .v-kicker, .v-nightband .v-part-copy .more { color: var(--night-ink-3); }
.v-nightband .v-part { border-top-color: rgba(255,255,255,.1); }
.v-nightband .v-part-copy .n.solid { background: var(--amber); }
.v-nightband .v-h2 { color: #fff; }
.v-voice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px; align-items: start; }
.v-chat { background: rgba(255,255,255,.05); border-radius: 18px; padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.v-chat.with { background: rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 60px 90px -50px rgba(0,0,0,.8); }
.v-chat-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 13.5px; color: var(--night-ink-3); }
.v-chat-top b { color: var(--night-ink); font-weight: 600; }
.v-bub { max-width: 90%; padding: 10px 14px; border-radius: 18px; font: 400 15px/1.38 var(--ui); letter-spacing: -.01em; }
.v-bub.me { align-self: flex-end; background: #0A84FF; color: #fff; border-bottom-right-radius: 6px; }
.v-bub.them { align-self: flex-start; background: rgba(255,255,255,.1); color: #E6E8F6; border-bottom-left-radius: 6px; }
.v-bub .say { font: 500 16px/1.35 var(--display); color: #FFD2AA; }
.v-card { border-radius: 14px; background: #fff; color: #14182E; overflow: hidden; font-family: var(--ui); box-shadow: 0 0 0 2px var(--amber); }
.v-card-top { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid #EEF0F4; font: 600 13.5px/1 var(--ui); }
.v-card-top span { margin-left: auto; font: 500 11.5px/1 var(--ui); color: #6A6F85; }
.v-card-body { padding: 13px; display: grid; gap: 11px; }
.v-card .hi { font: 500 19px/1.22 var(--display); letter-spacing: -.01em; }
.v-card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 13px/1.3 var(--ui); }
.v-card-row b { font-weight: 600; display: block; }
.v-card-row span { color: #5A6075; }
.v-card-row .add { font: 600 12.5px/1 var(--ui); color: #14182E; border: 1.5px solid #14182E; border-radius: 8px; padding: 8px 11px; flex: none; }

/* Part five: the agent hands the decision to the brand's own app */
.v-phone { width: 300px; border-radius: 42px; padding: 9px; background: #05071A; box-shadow: 0 0 0 1.5px #3A3F5C, 0 60px 90px -40px rgba(0,0,0,.8); }
.v-phone-in { border-radius: 34px; background: #fff; color: #14182E; overflow: hidden; font-family: var(--ui); padding: 46px 16px 18px; display: grid; gap: 12px; position: relative; }
.v-phone-in::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #05071A; }
.v-phone .t { font: 700 20px/1.2 var(--ui); letter-spacing: -.02em; }
.v-phone .s { font: 400 13.5px/1.4 var(--ui); color: #4B5066; }
.v-phone .v-pick { padding: 11px 12px; font-size: 13.5px; }
.v-phone .face { display: flex; justify-content: center; align-items: center; gap: 8px; height: 46px; border-radius: 12px; background: #14182E; color: #fff; font: 600 15px/1 var(--ui); }
.v-notif { background: rgba(255,255,255,.1); border-radius: 18px; padding: 13px 14px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 11px; align-items: start; box-shadow: 0 0 0 1px rgba(255,255,255,.1); font-family: var(--ui); color: #fff; }
.v-notif b { display: block; font: 600 14px/1.3 var(--ui); }
.v-notif span { display: block; font: 400 13.5px/1.35 var(--ui); color: #D7DAF0; margin-top: 2px; }
.v-notif time { font: 400 12px/1 var(--ui); color: var(--night-ink-3); }
.v-when { display: grid; gap: 14px; }
.v-when div { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.v-when b { font: 600 15px/1.3 var(--sans); color: #fff; }
.v-when span { font-size: 14.5px; line-height: 1.45; color: var(--night-ink-2); }

/* Studio */
.v-studio-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.v-dash { background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--rule), 0 50px 90px -60px rgba(16,19,43,.6); font-size: 14px; }
.v-dash-top { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--rule); color: var(--ink-3); }
.v-dash-top b { color: var(--ink); font-weight: 600; }
.v-dash-top .v-chip { margin-left: auto; }
.v-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.v-kpi { padding: 16px 18px; display: grid; gap: 4px; }
.v-kpi + .v-kpi { border-left: 1px solid var(--rule); }
.v-kpi span { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.v-kpi strong { font: 640 30px/1 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.v-kpi small { font-size: 12px; color: var(--ink-3); }
.v-kpi.k-agent strong { color: var(--cobalt); }
.v-kpi.k-amber strong { color: var(--amber-deep); }
.v-dash-row { display: grid; grid-template-columns: 50px 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--rule); }
.v-dash-rows .v-dash-row:first-child { border-top: 0; }
.v-dash-row .ag { font-weight: 600; }
.v-propose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; background: var(--amber-wash); }
.v-propose p { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.v-propose p b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; }
.v-propose .go { font: 600 13.5px/1 var(--sans); background: var(--ink); color: var(--paper); border-radius: 6px; padding: 10px 14px; white-space: nowrap; }

/* Data */
.v-data-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 88px; align-items: start; }

/* Agents strip */
.v-agents { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.v-agent { padding: 22px 18px 0 0; display: grid; gap: 8px; align-content: start; }
.v-agent b { font: 640 27px/1 var(--display); letter-spacing: -.035em; }
.v-agent span { font-size: 14px; line-height: 1.4; color: var(--ink-3); }

/* FAQ */
.v-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 80px; align-items: start; }
.v-faq { border-top: 1px solid var(--ink); }
.v-faq details { border-bottom: 1px solid var(--rule); }
.v-faq summary { list-style: none; cursor: pointer; padding: 24px 48px 24px 0; position: relative; font: 600 20px/1.3 var(--display); letter-spacing: -.015em; }
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::before, .v-faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 2px; background: var(--ink-3); transition: transform .25s ease; }
.v-faq summary::after { transform: rotate(90deg); }
.v-faq details[open] summary::after { transform: rotate(0deg); }
.v-faq details p { padding: 0 0 26px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 40em; }

/* Closing */
.v-close { background: var(--cobalt); color: #fff; border-top: 0; overflow: clip; }
.v-close-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: end; position: relative; }
.v-close .v-h2 { color: #fff; font-size: clamp(36px, 4.4vw, 64px); }
.v-close .btn { background: #fff; color: #1B238F; }
.v-close .btn:hover { background: #fff; }
.v-close .textlink { color: #fff; }
.v-founders { color: #D6DAFF; font-size: 15px; line-height: 1.5; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.28); }
.v-close-dots { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.2) 1.5px, transparent 1.9px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 100%); mask-image: linear-gradient(105deg, transparent 40%, #000 100%); pointer-events: none; }
:root[data-theme="dark"] .v-close, .v-close { --cobalt-fixed: #3443E0; background: #3443E0; }

/* Responsive */
@media (max-width: 1080px) {
  .v-shift, .v-part, .v-studio-grid, .v-data-grid, .v-close-grid, .v-faq-grid { grid-template-columns: 1fr; gap: 48px; }
  .v-agents { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 760px) {
  :root { --v-gut: 20px; }
  .v-band { padding-block: 84px; }
  .v-hero { padding-top: 36px; }
  .v-facts { grid-template-columns: 1fr; }
  .v-fact + .v-fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 24px; }
  .v-bar-row { grid-template-columns: 1fr; gap: 8px; }
  .v-bar-val { font-size: 22px; }
  .v-voice { grid-template-columns: 1fr; }
  .v-phone { margin-inline: auto; width: 280px; }
  .v-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-kpi:nth-child(3) { border-left: 0; }
  .v-kpi:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .v-dash-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .v-dash-row .ag { display: none; }
  .v-weigh div { grid-template-columns: 1fr; gap: 2px; }
  .v-agents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-rule { grid-template-columns: 1fr; gap: 10px; }
  .v-propose { grid-template-columns: 1fr; }
  .v-faq summary { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
}

/* Part five: the notification sits over the phone, the way it arrives */
.v-hand { position: relative; display: flex; justify-content: flex-end; padding-top: 56px; }
.v-hand .v-notif { position: absolute; left: 0; top: 0; width: min(330px, 70%); z-index: 2; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(40,48,110,.82); }
.v-hand .v-phone { margin-right: 6%; }
body.v .v-close .btn { background: #fff; color: #1B238F; }
.v-nightband .v-part { align-items: start; }
@media (max-width: 760px) {
  .v-hand { display: grid; justify-content: stretch; gap: 16px; padding-top: 0; }
  .v-hand .v-notif { position: relative; width: auto; }
  .v-hand .v-phone { margin: 0 auto; }
}
.v-screen-top > .v-logo, .v-card-top > .v-logo { margin-left: 0; }
.v-logo::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.v-notif > .v-logo { display: grid; margin-top: 0; }
.v-agentcard { background: #3443E0; }

/* ---------- Night: nav and hero share the cobalt night ---------- */
body.v .nav { background: color-mix(in srgb, var(--night) 88%, transparent); border-bottom-color: rgba(255,255,255,.08); color: var(--night-ink); }
body.v .nav .brand, body.v .nav .navlinks a { color: var(--night-ink); }
body.v .nav .navlinks a { opacity: .78; }
body.v .nav .navlinks a:hover { opacity: 1; }
body.v .nav .btn { background: var(--amber); color: var(--amber-ink); }
body.v .nav .btn::before { background: #fff; }
body.v .menu-btn { background: rgba(255,255,255,.1); }
body.v .menu-btn span { background: var(--night-ink); }
body.v .mnav { background: var(--night); border-top-color: rgba(255,255,255,.1); }
body.v .mnav a { color: var(--night-ink); border-bottom-color: rgba(255,255,255,.1); }
body.v .mnav a.btn { background: var(--amber); color: var(--amber-ink); }

.v-hero { background: var(--night); color: var(--night-ink); padding-block: 56px 72px; overflow: clip; position: relative; }
.v-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(154,163,255,.09) 1.2px, transparent 1.6px) 0 0 / 24px 24px; -webkit-mask-image: radial-gradient(70% 80% at 70% 50%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 80% at 70% 50%, #000 0%, transparent 75%); pointer-events: none; }
.v-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; min-height: min(760px, calc(100svh - 72px - 128px)); }
.v-hero-copy { display: grid; gap: 28px; position: relative; z-index: 2; }
.v-hero .v-h1 { color: #fff; font-size: clamp(40px, 4.6vw, 70px); }
.v-hero .v-h1 .then { color: var(--night-ink-3); }
.v-hero .v-lede { color: var(--night-ink-2); max-width: 27em; }
.v-hero .btn { background: var(--amber); color: var(--amber-ink); }
.v-hero .btn::before { background: #fff; }
.v-hero .textlink { color: #fff; }

/* ---------- Steps with a sticky stage ---------- */
.v-night { background: var(--night); color: var(--night-ink); border-top: 0; }
.v-night .v-h2 { color: #fff; }
.v-night .v-body { color: var(--night-ink-2); }
.v-night .more { color: var(--night-ink-3); }
.v-steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
.v-steps-list { list-style: none; margin: 0; padding: 0; }
.v-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding-block: 36px; border-top: 1px solid rgba(255,255,255,.1); min-height: 62vh; align-content: center; }
.v-step:first-child { border-top: 0; }
.v-step .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 640 16px/1 var(--display); color: #9AA3FF; border: 2px dotted #9AA3FF; transition: transform .3s ease; }
.v-step .n.solid { border: 0; background: var(--amber); color: var(--amber-ink); }
.v-step-copy { display: grid; gap: 14px; align-content: start; }
.v-step .v-h3 { color: #fff; font-size: 26px; }
.v-step .more { font-size: 15px; line-height: 1.5; max-width: 30em; }
.js .v-step { opacity: .38; transition: opacity .4s ease; cursor: pointer; }
.js .v-step.on { opacity: 1; cursor: default; }
.v-steps-stage { position: sticky; top: calc(50vh - 330px + 36px); height: 660px; display: grid; align-items: center; }
.v-stage-item { grid-area: 1 / 1; opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.v-stage-item.on { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 1081px) { .js .v-step-panel { display: none; } }
@media (max-width: 1080px) {
  .v-steps { grid-template-columns: 1fr; }
  .v-steps-stage { display: none; }
  .v-step { min-height: 0; padding-block: 48px; }
  .js .v-step { opacity: 1; }
  .v-step-panel { margin-top: 18px; }
}
.v-when { margin: 6px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.v-when div { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 3px; }
.v-when dt { font: 600 14.5px/1.3 var(--sans); color: #fff; }
.v-when dd { margin: 0; font-size: 14px; line-height: 1.4; color: var(--night-ink-2); }

/* The phone in step five, drawn at real proportions */
.v-hand { position: relative; display: block; padding: 64px 0 0; min-height: 640px; }
.v-hand .v-notif { position: absolute; left: 0; top: 0; width: 330px; z-index: 2; background: rgba(46,56,128,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.v-phone { width: 300px; flex: none; margin-left: auto; margin-right: 8%; border-radius: 46px; padding: 10px; background: #05071A; box-shadow: 0 0 0 1.5px #3A3F5C, 0 60px 90px -40px rgba(0,0,0,.8); }
.v-phone-in { aspect-ratio: 9 / 19; border-radius: 37px; background: #fff; color: #14182E; overflow: hidden; font-family: var(--ui); padding: 14px 18px 22px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.v-phone-in > * { flex: none; }
.v-phone-in::before { content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 88px; height: 26px; border-radius: 20px; background: #05071A; }
.v-phone-bar { height: 24px; display: flex; align-items: center; padding-left: 8px; font: 600 14px/1 var(--ui); margin-bottom: 8px; }
.v-phone .t { font: 700 22px/1.18 var(--ui); letter-spacing: -.02em; }
.v-phone .s { font: 400 14px/1.4 var(--ui); color: #4B5066; }
.v-phone .v-pick { padding: 12px 13px; font-size: 14px; }
.v-seat { display: flex; justify-content: space-between; font: 400 14px/1 var(--ui); color: #4B5066; padding: 4px 2px; }
.v-seat b { color: #14182E; font-weight: 600; }
.v-phone .face { margin-top: auto; display: flex; justify-content: center; align-items: center; height: 50px; border-radius: 14px; background: #14182E; color: #fff; font: 600 15.5px/1 var(--ui); }
.v-notif { background: rgba(255,255,255,.1); border-radius: 18px; padding: 13px 14px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 11px; align-items: start; box-shadow: 0 0 0 1px rgba(255,255,255,.12); font-family: var(--ui); color: #fff; }
.v-notif b { display: block; font: 600 14px/1.3 var(--ui); }
.v-notif > span:nth-child(2) > span { display: block; font: 400 13.5px/1.35 var(--ui); color: #D7DAF0; margin-top: 2px; }
.v-notif time { font: 400 12px/1 var(--ui); color: var(--night-ink-3); }
.v-notif > .v-logo { display: grid; margin: 0; }

@media (max-width: 1080px) {
  .v-hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
}
@media (max-width: 760px) {
  .v-hero { padding-block: 32px 40px; }
  .v-when { grid-template-columns: 1fr; }
  .v-hand { min-height: 0; padding-top: 0; display: grid; gap: 16px; }
  .v-hand .v-notif { position: relative; width: auto; }
  .v-phone { margin: 0 auto; width: min(300px, 86vw); }
}

/* Brand screen parts shared by the hero card, the agent card and the phone */
.v-screen-top { display: flex; align-items: center; gap: 9px; font: 600 13.5px/1 var(--ui); color: #14182E; }
.v-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--amber); display: grid; place-items: center; flex: none; }
.v-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1.5px solid #E3E5EC; font: 500 14px/1.25 var(--ui); color: #14182E; }
.v-pick > span { display: block; }
.v-pick small { display: block; color: #6A6F85; font-weight: 400; font-size: 12.5px; margin-top: 3px; }
.v-pick b { font-weight: 600; }
.v-pick.sel { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.v-pts { display: grid; gap: 6px; font: 400 12.5px/1.3 var(--ui); color: #4B5066; }
.v-pts i { display: block; height: 5px; border-radius: 5px; background: #EEF0F4; overflow: hidden; }
.v-pts i::after { content: ""; display: block; width: 89%; height: 100%; background: var(--amber); }

/* Hero refinements */
.v-hero .v-h1 { font-size: clamp(38px, 4vw, 60px); line-height: .98; }
body.v .v-hero .btn { background: var(--amber); color: var(--amber-ink); }
body.v .v-hero .btn:hover { background: #F59A4A; }
.v-step-copy .more { margin-top: -4px; }


.v-seat { border-top: 1px solid #EEF0F4; padding: 10px 2px 0; }

/* ---------- Request tiles ---------- */
.v-mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(196px, auto); gap: 14px; }
.v-tile { position: relative; background: var(--surface); border-radius: 16px; padding: 18px 18px 0; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 0 0 1px var(--rule), 0 24px 40px -34px rgba(16,19,43,.45); overflow: hidden; transition: opacity .4s ease, transform .4s ease; }
.v-tile.big { grid-column: span 2; }
.v-tile.leaving { opacity: .25; transform: scale(.985); }
.t-top { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
.t-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--cobalt-wash); display: grid; place-items: center; flex: none; }
.t-icon svg { width: 22px; height: 22px; fill: var(--cobalt); }
.t-ag { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--cobalt); }
.t-ag i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px dotted currentColor; }
.t-q { quotes: none; font: 500 20px/1.25 var(--display); color: var(--ink); min-height: 2.5em; text-wrap: pretty; }
.v-tile.big .t-q { font-size: 30px; line-height: 1.15; }
.v-tile.typing .t-q::after { content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 2px; vertical-align: -2px; background: var(--cobalt); animation: blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.t-checks { display: flex; gap: 5px; margin-top: auto; }
.t-checks i { width: 10px; height: 10px; border-radius: 2px; border: 1.5px dotted var(--cobalt); transition: background .2s ease, border-color .2s ease; }
.t-checks i.on { background: var(--cobalt); border: 1.5px solid var(--cobalt); }
.t-checks i.x { border: 0; background: linear-gradient(45deg, transparent 40%, var(--stop) 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, var(--stop) 40% 60%, transparent 60%); }
.v-tile.done .t-checks i { background: var(--cobalt); border-style: solid; }
.v-tile.done[data-st="stop"] .t-checks i:nth-child(n+2) { background: transparent; border-color: var(--rule-2); border-style: dotted; }
.t-out { margin: 0 -18px; padding: 14px 18px 16px; display: grid; gap: 3px; background: var(--amber-wash); border-top: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); transform: translateY(100%); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.v-tile.done .t-out { transform: none; opacity: 1; }
.t-out b { font: 640 16px/1.25 var(--display); color: var(--ink); }
.t-out span { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.v-tile[data-st="hand"] .t-out { background: var(--surface); box-shadow: inset 0 0 0 2px var(--amber); border-top: 0; border-radius: 0 0 16px 16px; }
.v-tile[data-st="stop"] .t-out { background: color-mix(in srgb, var(--stop) 9%, var(--surface)); border-top-color: color-mix(in srgb, var(--stop) 35%, transparent); }
.v-tile[data-st="stop"] .t-out b { color: var(--stop); }
.v-tile.big .t-out b { font-size: 20px; }
@media (max-width: 1080px) { .v-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .v-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .v-tile.big { grid-column: auto; }
  .v-tile.big .t-q { font-size: 24px; }
  .v-mosaic .v-tile:nth-child(n+7) { display: none; }
}

/* Steps on night: inactive steps stay readable */
.js .v-step { opacity: .5; }
.v-night .more { color: #A3A9D6; }
.v-night .v-body { color: #C4C9EA; }

/* Panels on the night band keep light-panel ink so nothing inherits the band's pale text */
.v-night .v-panel, .v-night .v-stage-item .v-panel { --ink: #10132B; --ink-2: #4B5066; --ink-3: #6E7387; --surface: #FFFFFF; --rule: #DADCD5; --rule-2: #C4C7BE; --tint: #E8EAE4; --cobalt: #3443E0; --cobalt-wash: #E3E6FB; --amber-deep: #B85A14; color: var(--ink); }

/* Hero type fits the narrower column */
.v-hero .v-h1 { font-size: clamp(36px, 3.6vw, 54px); }



/* ---------- Hero: headline row, then the arrivals board ---------- */
.v-hero { padding-block: 64px 88px; }
.v-hero-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; }
.v-hero .v-h1 { font-size: clamp(40px, 5vw, 76px); line-height: .98; letter-spacing: -.035em; font-weight: 700; }
.v-hero .v-h1 .then { font-weight: 600; }
.v-side { display: grid; gap: 26px; padding-bottom: 6px; }
.v-arrivals { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: stretch; }

/* The board */
.bd { background: #060A2B; border-radius: 18px; padding: 6px 6px 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 50px 90px -50px rgba(0,0,0,.9); overflow: hidden; }
.bd-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 12px; }
.bd-title { display: flex; align-items: center; gap: 10px; font: 600 15px/1 var(--display); color: #fff; }
.live { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(242,138,51,.6); animation: live 1.8s ease-out infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(242,138,51,0); } 100% { box-shadow: 0 0 0 0 rgba(242,138,51,0); } }
.bd-count { font: 400 13px/1 var(--board); color: var(--night-ink-3); }
.bd-count b { color: #fff; font-weight: 600; }
.bd-head, .bd-row { display: grid; grid-template-columns: 54px 112px minmax(0, 1fr) 92px 112px 210px; gap: 14px; align-items: center; padding: 0 16px; }
.bd-head { height: 34px; font: 500 11.5px/1 var(--board); color: var(--night-ink-3); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
.bd-row { min-height: 62px; border-bottom: 1px solid rgba(255,255,255,.055); color: var(--night-ink-2); position: relative; transition: background .6s ease; }
.bd-row.fresh { background: linear-gradient(90deg, rgba(52,67,224,.22), rgba(52,67,224,0) 70%); animation: row-in .5s cubic-bezier(.2,.8,.2,1); }
@keyframes row-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.c-t { font: 400 13px/1 var(--board); color: var(--night-ink-3); }
.c-a { display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sans); color: #C9CEFF; }
.c-a i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px dotted #9AA3FF; flex: none; }
.c-q { display: flex; align-items: center; gap: 10px; min-width: 0; }
.c-q .t-icon { width: 30px; height: 30px; border-radius: 8px; background: rgba(154,163,255,.12); }
.c-q .t-icon svg { width: 17px; height: 17px; fill: #9AA3FF; }
.c-q .q { font: 500 15px/1.3 var(--sans); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-k { font-size: 13px; color: var(--night-ink-3); }
.c-s { display: flex; gap: 2px; flex-wrap: nowrap; overflow: hidden; font: 600 13px/1 var(--board); }

.bd-key { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px 16px 16px; font-size: 13px; color: var(--night-ink-3); }
.bd-key span { display: inline-flex; gap: 8px; align-items: center; }
.bd-key i { width: 11px; height: 11px; border-radius: 3px; }
.k-ok { background: var(--amber); }
.k-hand { background: transparent; box-shadow: inset 0 0 0 2px var(--amber); }
.k-stop { background: var(--stop); }

/* Latest handshake panel */
.hs-panel { background: #0E1450; border-radius: 18px; padding: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 16px; }
.hs-title { font: 600 15px/1 var(--display); color: #fff; }
.hs-nodes { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.hs-node { display: grid; justify-items: center; gap: 5px; text-align: center; width: 104px; }
.hs-node i { width: 34px; height: 34px; border-radius: 50%; }
.hs-node.pa i { border: 2.5px dotted #9AA3FF; }
.hs-node.ba i { border-radius: 9px; background: var(--amber); position: relative; }
.hs-node.ba i::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; }
.hs-node b { font: 600 13.5px/1.2 var(--sans); color: #fff; }
.hs-node span { font-size: 11.5px; color: var(--night-ink-3); }
.hs-wire { height: 2px; margin-top: -32px; position: relative; background: repeating-linear-gradient(90deg, rgba(154,163,255,.4) 0 4px, transparent 4px 9px); }
.hs-panel.talking .hs-wire { background: repeating-linear-gradient(90deg, #9AA3FF 0 4px, transparent 4px 9px); background-size: 18px 2px; animation: wire .45s linear infinite; }
.hs-panel.joined .hs-wire { background: var(--amber); }
.hs-panel.broken .hs-wire { background: linear-gradient(90deg, var(--stop) 0 42%, transparent 42% 58%, var(--stop) 58%); }
.hs-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; flex: 1; }
.hs-log li { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); animation: log-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes log-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hs-log b { font: 600 12px/1.2 var(--sans); color: var(--night-ink-3); }
.hs-log span { font-size: 14px; line-height: 1.4; color: #fff; }
.hs-log li.pa { box-shadow: inset 2px 0 0 #9AA3FF; }
.hs-log li.ba { box-shadow: inset 2px 0 0 var(--amber); }
.hs-log li.rule b { color: #9AA3FF; }
.hs-log li.rule.stop span { color: #FF8A73; }
.hs-log li.say { background: #fff; }
.hs-log li.say b { color: #B85A14; }
.hs-log li.say span { color: #14182E; font: 600 15px/1.35 var(--display); }
.hs-log li.ok { background: rgba(242,138,51,.16); }

@media (max-width: 1180px) {
  .v-arrivals { grid-template-columns: 1fr; }
  .bd-head, .bd-row { grid-template-columns: 48px 92px minmax(0, 1fr) 84px 190px; }
  .bd-head span:nth-child(5), .c-k { display: none; }
}
@media (max-width: 1080px) { .v-hero-top { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 760px) {
  .v-arrivals { margin-top: 40px; }
  .bd-head { display: none; }
  .bd-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "t a h" "q q q" "s s s"; gap: 8px 10px; padding: 12px 14px; }
  .c-t { grid-area: t; } .c-a { grid-area: a; } .c-h { grid-area: h; } .c-q { grid-area: q; } .c-s { grid-area: s; }
  .c-q .q { white-space: normal; }
  .bd-row:nth-child(n+5) { display: none; }
}
.v-hero .v-h1 { font-size: clamp(40px, 4.3vw, 64px); }
.bd-head, .bd-row { grid-template-columns: 46px 96px minmax(0, 1fr) 80px 92px 176px; gap: 12px; }
.c-q .q { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14.5px; }
.hs { width: 70px; }
.hs-panel { overflow: hidden; }
@media (max-width: 1180px) { .bd-head, .bd-row { grid-template-columns: 46px 90px minmax(0, 1fr) 76px 176px; } }
.bd-head, .bd-row { grid-template-columns: 46px 96px minmax(0, 1fr) 80px 92px 186px; }
@media (max-width: 1180px) { .bd-head, .bd-row { grid-template-columns: 46px 90px minmax(0, 1fr) 76px 186px; } }
@media (max-width: 760px) { .bd-count { display: none; } .bd-row { grid-template-columns: 40px minmax(0, 1fr) auto; } .bd-key { display: grid; gap: 8px; } }

/* ---------- Inner pages ---------- */
.v-hero-sub { padding-block: 72px 96px; }
.v-hero-sub .v-h1 { font-size: clamp(38px, 4.2vw, 62px); }

.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cap { background: var(--surface); border-radius: 16px; padding: 24px; display: grid; gap: 14px; align-content: start; box-shadow: 0 0 0 1px var(--rule), 0 24px 40px -34px rgba(16,19,43,.45); }
.cap .n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 640 15px/1 var(--display); color: var(--cobalt); border: 2px dotted var(--cobalt); }
.cap .n.solid { border: 0; background: var(--amber); color: var(--amber-ink); }
.cap ul { margin: 0; padding: 12px 0 0; list-style: none; display: grid; gap: 8px; border-top: 1px solid var(--rule); }
.cap li { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); padding-left: 18px; position: relative; }
.cap li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--cobalt); }
.cap-studio { background: var(--night); box-shadow: none; }
.cap-studio .v-h3 { color: #fff; } .cap-studio .v-body { color: var(--night-ink-2); } .cap-studio .textlink { color: #fff; }

.reach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.reach article { padding: 24px; border-radius: 16px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: grid; gap: 14px; align-content: start; }
.reach .t-icon, .uc .t-icon, .uc-chip .t-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(154,163,255,.14); display: grid; place-items: center; }
.reach .t-icon svg { width: 24px; height: 24px; fill: #9AA3FF; }
.reach .v-h3 { color: #fff; }

.facts4 { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.facts4 div { padding: 22px 24px 0 0; display: grid; gap: 8px; align-content: start; }
.facts4 div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.facts4 dt { font: 640 20px/1.2 var(--display); }
.facts4 dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

/* Studio page */
.studio { margin-top: 64px; background: var(--surface); color: #10132B; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 60px 100px -50px rgba(0,0,0,.8); --ink: #10132B; --ink-2: #4B5066; --ink-3: #6E7387; --rule: #DADCD5; --rule-2: #C4C7BE; --tint: #E8EAE4; --surface: #FFFFFF; --cobalt: #3443E0; --cobalt-wash: #E3E6FB; --amber-deep: #B85A14; --amber-wash: #FCE9D8; }
.studio-bar { display: flex; align-items: center; gap: 20px; padding: 12px 18px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.studio-name { display: flex; align-items: center; gap: 10px; font: 600 15px/1 var(--display); }
.studio-name span:last-child { font: 400 13px/1 var(--sans); color: var(--ink-3); }
.studio-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--tint); margin-left: auto; }
.studio-tabs button { appearance: none; border: 0; background: transparent; padding: 9px 14px; border-radius: 7px; font: 600 14px/1 var(--sans); color: var(--ink-3); cursor: pointer; }
.studio-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,19,43,.15); }
.studio-view { min-height: 440px; }
.st-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.st-split > :last-child { border-left: 1px solid var(--rule); padding: 18px 20px; }
.st-sub { font: 600 12.5px/1.3 var(--sans); color: var(--ink-3); margin-bottom: 10px; }
.st-bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13.5px; margin-bottom: 10px; }
.st-bar i { height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--cobalt) var(--w), var(--tint) var(--w)); }
.st-bar b { font-weight: 600; text-align: right; }
.st-log p { font-size: 14px; line-height: 1.45; color: var(--ink-2); padding: 10px 0; border-top: 1px solid var(--rule); }
.st-log b { color: var(--stop); font-weight: 600; margin-right: 6px; }
.st-field { padding: 16px 20px; border-top: 1px solid var(--rule); }
.st-field:first-child { border-top: 0; }
.st-input { padding: 11px 13px; border-radius: 10px; border: 1.5px solid var(--rule); font: 500 15px/1.35 var(--display); }
.st-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.st-preview .v-card { max-width: 360px; }
.st-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-res { padding: 24px 20px; display: grid; gap: 12px; align-content: start; }
.st-res + .st-res { border-left: 1px solid var(--rule); }
.st-pair { display: grid; grid-template-columns: 72px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13.5px; }
.st-pair i { height: 26px; border-radius: 4px; background: linear-gradient(90deg, var(--amber) var(--w), var(--tint) var(--w)); }
.st-pair.hold i { background: linear-gradient(90deg, var(--rule-2) var(--w), var(--tint) var(--w)); }
.st-pair b { font: 640 18px/1 var(--display); text-align: right; }
.st-pair .lab { color: var(--ink-3); }
.st-note { padding: 0 20px 20px; }
.props { display: grid; gap: 14px; }
.prop { background: var(--surface); border-radius: 14px; padding: 20px; box-shadow: 0 0 0 1px var(--rule), 0 24px 40px -34px rgba(16,19,43,.45); display: grid; gap: 8px; }
.prop h3 { font: 600 19px/1.3 var(--display); }
.prop-go { display: flex; gap: 8px; margin-top: 6px; }
.prop-go span { font: 600 13.5px/1 var(--sans); padding: 10px 14px; border-radius: 7px; }
.prop-go .go { background: var(--ink); color: var(--paper); }
.prop-go .no { box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink-2); }
.hold-split { display: grid; grid-template-columns: 9fr 1fr; gap: 6px; align-self: center; }
.hold-split div { border-radius: 12px; padding: 22px 18px; display: grid; gap: 8px; align-content: end; min-height: 200px; }
.hs90 { background: var(--amber); color: var(--amber-ink); }
.hs10 { background: var(--tint); color: var(--ink-2); padding: 22px 10px !important; }
.hold-split b { font: 700 40px/1 var(--display); letter-spacing: -.03em; }
.hold-split span { font-size: 14px; line-height: 1.35; }
.hs10 b { font-size: 22px; }

/* Use cases */
.uc-chips { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 10px; }
.uc-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #fff; text-decoration: none; font: 600 14px/1 var(--sans); transition: background .2s ease; }
.uc-chip:hover { background: rgba(255,255,255,.12); }
.uc-chip .t-icon { width: 30px; height: 30px; border-radius: 50%; }
.uc-chip .t-icon svg { width: 17px; height: 17px; fill: #9AA3FF; }
.uc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.uc { background: var(--surface); border-radius: 18px; padding: 24px; display: grid; gap: 18px; align-content: start; box-shadow: 0 0 0 1px var(--rule), 0 24px 40px -34px rgba(16,19,43,.45); scroll-margin-top: 96px; }
.uc header { display: flex; align-items: center; gap: 14px; }
.uc .t-icon { background: var(--cobalt-wash); }
.uc .t-icon svg { width: 24px; height: 24px; fill: var(--cobalt); }
.uc-reqs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.uc-reqs li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; outline: 1.5px dotted color-mix(in srgb, var(--cobalt) 55%, transparent); outline-offset: -1.5px; font: 500 15.5px/1.3 var(--display); }
.uc-reqs .h-ag { color: var(--cobalt); }
.uc-dl { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.uc-dl div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.uc-dl dt { font: 600 13px/1.35 var(--sans); color: var(--ink-3); }
.uc-dl dd { margin: 0; font-size: 15px; line-height: 1.45; }
.uc-dl .rel dd { color: var(--amber-deep); font-weight: 600; }
.h-ag { display: inline-flex; align-items: center; gap: 7px; }
.h-ag i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px dotted currentColor; flex: none; }

/* Pricing */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: t; }
.timeline li { position: relative; padding: 24px 0 0; display: grid; gap: 10px; align-content: start; border-top: 3px solid var(--rule); }
.timeline li:nth-child(3) { border-top-color: var(--amber); }
.timeline li:nth-child(4) { border-top-color: var(--ink); }
.timeline b { font: 600 13px/1 var(--sans); color: var(--ink-3); }
.timeline p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.pilot-form { display: grid; gap: 16px; background: rgba(255,255,255,.05); border-radius: 18px; padding: 24px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.pilot-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pilot-form .field { display: grid; gap: 7px; }
.pilot-form textarea { min-height: 96px; padding: 12px 15px; }
.pilot-form .btn { justify-self: start; }
.v-night .v-faq summary { color: #fff; }

@media (max-width: 1080px) {
  .cap-grid, .reach { grid-template-columns: 1fr 1fr; }
  .facts4, .timeline { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .facts4 div:nth-child(3) { border-left: 0; padding-left: 0; }
  .uc-grid { grid-template-columns: 1fr; }
  .st-split, .st-results { grid-template-columns: 1fr; }
  .st-split > :last-child, .st-res + .st-res { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 760px) {
  .cap-grid, .reach, .facts4, .timeline { grid-template-columns: 1fr; }
  .facts4 div + div { border-left: 0; padding-left: 0; }
  .studio-tabs { margin-left: 0; overflow-x: auto; max-width: 100%; }
  .uc-dl div { grid-template-columns: 1fr; gap: 4px; }
  .pilot-form .row2 { grid-template-columns: 1fr; }
  .hold-split { grid-template-columns: 4fr 1fr; }
}
body.v .v-night .btn, body.v .pilot-form .btn { background: var(--amber); color: var(--amber-ink); }

/* ---------- Live visit board, realistic ---------- */
.bd-head, .bd-row { grid-template-columns: 46px 96px minmax(0, 1fr) 118px 104px 196px; }
.bd-row { min-height: 60px; }
.bd-row.fresh { background: rgba(52,67,224,.16); }
.c-t { font: 400 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.bd-head { font: 600 12px/1 var(--sans); }
.bd-count { font: 400 13px/1 var(--sans); }
.bagent { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); }
.bagent.wait { color: #C9CEFF; }
.bagent.yes { color: #fff; }
.bagent.no { color: #FF8A73; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; font: 600 12.5px/1 var(--sans); white-space: nowrap; animation: pill-in .3s ease; }
@keyframes pill-in { from { opacity: .3; } to { opacity: 1; } }
.p-wait { background: rgba(255,255,255,.07); color: var(--night-ink-2); }
.p-run { background: rgba(52,67,224,.35); color: #DDE1FF; }
.p-ok { background: rgba(242,138,51,.16); color: #FFB777; }
.p-ask { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px var(--amber); }
.p-hand { background: var(--amber); color: #1B1206; }
.p-stop { background: rgba(255,106,77,.14); color: #FF8A73; }
.spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.ck { width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -1px); flex: none; }
.xx { width: 10px; height: 10px; flex: none; background: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, currentColor 42% 58%, transparent 58%); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: live 1.6s ease-out infinite; flex: none; }
.ph { width: 8px; height: 12px; border-radius: 2px; border: 1.5px solid currentColor; flex: none; }
.hs-log li.offer { box-shadow: inset 2px 0 0 #FFB777; }
.hs-log li.offer span { color: #FFD9B5; }
@media (max-width: 1180px) { .bd-head, .bd-row { grid-template-columns: 46px 90px minmax(0, 1fr) 110px 196px; } }
@media (max-width: 760px) { .bd-row { grid-template-columns: 40px minmax(0, 1fr) auto; } }

/* ---------- The shift, as three cards ---------- */
.sx { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; }
.sx-card { margin: 0; background: var(--surface); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 0 0 1px var(--rule), 0 30px 50px -40px rgba(16,19,43,.5); }
.sx-grow { background: var(--night); color: #fff; box-shadow: none; }
.sx-big { font: 700 clamp(48px, 5.4vw, 84px)/.95 var(--display); letter-spacing: -.045em; }
.sx-grow .sx-big { color: var(--amber); }
.sx-say { font: 500 18px/1.35 var(--display); max-width: 20em; }
.sx-grow .v-fine { color: var(--night-ink-3); }
.sx-card figcaption { margin-top: auto; }
.sx-dots { display: grid; gap: 14px; margin-top: 8px; }
.sx-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13px; color: var(--night-ink-3); }
.sx-cells { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.sx-cells i { aspect-ratio: 1; border-radius: 3px; background: #9AA3FF; }
.sx-row:first-child .sx-cells i { background: transparent; border: 1.5px dotted #9AA3FF; }
.sx-row.now .sx-cells i { background: var(--amber); }
.rv .sx-row.now .sx-cells i { opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1.4); }
.rv .sx-grow.in .sx-row.now .sx-cells i { opacity: 1; transform: none; }
.sx-ret-chart { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; height: 170px; align-items: end; margin-top: 4px; }
.sx-day { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 8px; }
.sx-day .d { font-size: 13px; color: var(--ink-3); }
.sx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; height: 100%; border-bottom: 1px solid var(--rule-2); }
.sx-pair i { position: relative; height: var(--h); border-radius: 4px 4px 0 0; }
.sx-pair i b { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); font: 640 14px/1 var(--display); color: var(--ink); }
i.mu { background: var(--cobalt); }
i.cg { background: var(--rule-2); }
.sx-key { display: flex; gap: 16px; font-size: 13px; color: var(--ink-3); }
.sx-key span { display: inline-flex; align-items: center; gap: 7px; }
.sx-key i { width: 10px; height: 10px; border-radius: 2px; }
.sx-spend-bars { display: grid; gap: 14px; margin-top: 8px; }
.sx-spend-bars div { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--ink-3); }
.sx-spend-bars i { height: 18px; border-radius: 3px; width: var(--w); background: var(--cobalt); }
.sx-spend-bars i.rng { background: linear-gradient(90deg, var(--cobalt) var(--lo), color-mix(in srgb, var(--cobalt) 30%, transparent) var(--lo)); }
.sx-spend-bars b { grid-column: 2; font: 640 15px/1 var(--display); color: var(--ink); }
@media (max-width: 1080px) { .sx { grid-template-columns: 1fr 1fr; } .sx-grow { grid-column: 1 / -1; } }
@media (max-width: 760px) { .sx { grid-template-columns: 1fr; } }

/* ---------- One request, three brand personalities ---------- */
.persona { display: grid; gap: 14px; max-width: 560px; }
.persona-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.persona-tabs button { appearance: none; border: 0; cursor: pointer; padding: 9px 14px; border-radius: 999px; font: 600 13.5px/1 var(--sans); background: rgba(255,255,255,.08); color: var(--night-ink-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.persona-tabs button[aria-pressed="true"] { background: var(--amber); color: var(--amber-ink); box-shadow: none; }
.persona [data-v] { display: none; }
.persona[data-p="trail"] [data-v="trail"], .persona[data-p="dept"] [data-v="dept"], .persona[data-p="value"] [data-v="value"] { display: revert; animation: v-rise .35s ease both; }
.persona .v-bub.them[data-v] { display: none; }
.persona[data-p="trail"] .v-bub[data-v="trail"], .persona[data-p="dept"] .v-bub[data-v="dept"], .persona[data-p="value"] .v-bub[data-v="value"] { display: block; }
.persona .v-card-row[data-v] { display: none; }
.persona[data-p="trail"] .v-card-row[data-v="trail"], .persona[data-p="dept"] .v-card-row[data-v="dept"], .persona[data-p="value"] .v-card-row[data-v="value"] { display: flex; }
.persona .v-card-top .in { margin-left: auto; font: 500 11.5px/1 var(--ui); color: #6A6F85; }
.persona[data-p="dept"] .v-logo { background: #14182E; }
.persona[data-p="value"] .v-logo { background: #2C7A55; }
.persona[data-p="dept"] .hi { font-family: Georgia, serif; font-weight: 400; }
.persona[data-p="value"] .hi { font-weight: 700; }
.uc-dl .voice dd { font: 500 15.5px/1.4 var(--display); }

.sx-pair { height: 140px; }
.sx-ret-chart { height: auto; }
.persona .v-card-top .nm { margin-left: 0; font: 600 13.5px/1 var(--ui); color: #14182E; }
.bd-head, .bd-row { grid-template-columns: 46px 96px minmax(0, 1fr) 112px 186px; }
.qq { display: grid; gap: 3px; min-width: 0; }
.qq small { font-size: 12.5px; color: var(--night-ink-3); }
.c-q .q { -webkit-line-clamp: 1; }
@media (max-width: 1180px) { .bd-head, .bd-row { grid-template-columns: 46px 90px minmax(0, 1fr) 106px 186px; } }
@media (max-width: 760px) { .bd-row { grid-template-columns: 40px minmax(0, 1fr) auto; } .c-q .q { -webkit-line-clamp: 2; } }

/* ================= Polish pass ================= */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* Hero: live dot field behind everything */
.v-hero > .v-wrap { position: relative; z-index: 1; }
.v-field-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.rv .v-hero::before { display: none; }
.v-hero::after { content: ""; position: absolute; left: 50%; top: 58%; width: 1200px; height: 700px; transform: translate(-50%, -20%); background: radial-gradient(closest-side, rgba(52,67,224,.38), rgba(52,67,224,0)); pointer-events: none; z-index: 0; }
.v-hero .v-h1 { text-shadow: 0 2px 40px rgba(11,18,64,.6); }

/* The board: lit frame, glow that follows the cursor, a slight lean */
.v-arrivals { position: relative; transform: perspective(2000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.v-arrivals::before { content: ""; position: absolute; inset: -60px -40px; z-index: -1; pointer-events: none; background: radial-gradient(600px circle at var(--gx, 40%) var(--gy, 30%), rgba(242,138,51,.16), transparent 60%), radial-gradient(800px circle at 30% 80%, rgba(52,67,224,.35), transparent 65%); filter: blur(10px); }
.bd, .hs-panel { position: relative; isolation: isolate; }
.bd::before, .hs-panel::before, .lit::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ang), rgba(154,163,255,.12) 0deg, rgba(154,163,255,.9) 50deg, rgba(242,138,51,.95) 90deg, rgba(154,163,255,.12) 150deg, rgba(154,163,255,.12) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ang 7s linear infinite; }
.hs-panel::before { animation-delay: -3.5s; }
@keyframes ang { to { --ang: 360deg; } }
.bd { background: linear-gradient(180deg, #0A0F3A, #060A2B 40%); box-shadow: 0 60px 120px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04); }
.hs-panel { background: linear-gradient(180deg, #131A5C, #0D1350); box-shadow: 0 60px 120px -50px rgba(0,0,0,.95); }

.bd-top { padding: 16px 18px 10px; }
.bd-title { font-size: 16px; }
.bd-meta { display: flex; align-items: center; gap: 14px; }
.bd-pm { font: 400 13px/1 var(--sans); color: var(--night-ink-3); }
.bd-pm b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-spark { width: 120px; height: 28px; display: block; }
.bd-filters { display: flex; align-items: center; gap: 6px; padding: 4px 18px 14px; flex-wrap: wrap; }
.bd-filters button { appearance: none; border: 0; cursor: pointer; padding: 7px 12px; border-radius: 999px; font: 600 12.5px/1 var(--sans); color: var(--night-ink-2); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background .2s ease, color .2s ease; }
.bd-filters button:hover { color: #fff; background: rgba(255,255,255,.1); }
.bd-filters button[aria-pressed="true"] { background: #fff; color: #10132B; box-shadow: none; }
.bd-hint { margin-left: auto; font-size: 12.5px; color: var(--night-ink-3); }
#arrivals[data-filter="ok"] .bd-row:not([data-st="ok"]), #arrivals[data-filter="hand"] .bd-row:not([data-st="hand"]), #arrivals[data-filter="stop"] .bd-row:not([data-st="stop"]) { display: none; }
.bd-rows { min-height: 360px; }
.bd-row { cursor: pointer; overflow: hidden; }
.bd-row:hover { background: rgba(255,255,255,.035); }
.bd-row:focus-visible { outline: 2px solid #9AA3FF; outline-offset: -2px; border-radius: 6px; }
.bd-row.sel { background: rgba(242,138,51,.08); box-shadow: inset 3px 0 0 var(--amber); }
.bd-row.fresh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(154,163,255,.22), transparent); transform: translateX(-100%); animation: sweep 1.4s cubic-bezier(.4,0,.2,1) .1s; pointer-events: none; }
@keyframes sweep { to { transform: translateX(100%); } }
.p-ok, .p-hand { animation: pop .45s cubic-bezier(.2,.8,.3,1.5); }
@keyframes pop { 0% { transform: scale(.8); opacity: .3; } 100% { transform: none; opacity: 1; } }
.p-hand { box-shadow: 0 0 20px rgba(242,138,51,.45); }

/* Panel: dots travel between the two agents while they talk */
.hs-wire { overflow: visible; }
.hs-panel.talking .hs-wire::after, .hs-panel.joined .hs-wire::after { content: ""; position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(154,163,255,.9); animation: travel 1.1s linear infinite; }
.hs-panel.joined .hs-wire::after { background: #FFD2A8; box-shadow: 0 0 10px 2px rgba(242,138,51,.9); animation-duration: 1.8s; }
.hs-panel.replay .hs-wire::after { display: none; }
@keyframes travel { from { left: 0; } to { left: calc(100% - 6px); } }
.hs-node.ba i { box-shadow: 0 0 0 0 rgba(242,138,51,.5); }
.hs-panel.joined .hs-node.ba i { animation: live 2s ease-out infinite; }

/* Cursor spotlight on cards */
.spot { position: relative; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(52,67,224,.09), transparent 60%); opacity: 0; transition: opacity .3s ease; z-index: 1; }
.spot:hover::after { opacity: 1; }
.v-night .spot::after, .sx-grow.spot::after, .reach .spot::after { background: radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(242,138,51,.14), transparent 60%); }
.v-tile, .cap, .uc, .sx-card, .tier, .prop { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, opacity .4s ease; }
.v-tile:hover, .cap:hover, .uc:hover, .sx-card:hover, .tier:hover, .prop:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--rule), 0 40px 60px -40px rgba(16,19,43,.55); }
.sx-grow:hover { box-shadow: 0 40px 60px -40px rgba(11,18,64,.8); }

/* Reveals */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.rise.up:not(.leaving) { opacity: 1; transform: none; }
.rise.up:hover { transition-delay: 0s !important; }

/* Steps rail */
.v-steps-list { position: relative; }
.v-rail { position: absolute; left: 19px; top: 60px; bottom: 60px; width: 2px; background: rgba(255,255,255,.08); z-index: 0; }
.v-rail i { display: block; height: 100%; background: linear-gradient(#9AA3FF, var(--amber)); transform-origin: top; transform: scaleY(0); }
.v-step .n { position: relative; z-index: 1; background: var(--night); }
.v-step .n.solid { background: var(--amber); }
.js .v-step.on .n { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(154,163,255,.12); }
.js .v-step.on .n.solid { box-shadow: 0 0 0 6px rgba(242,138,51,.18); }
@media (max-width: 1080px) { .v-rail { display: none; } }

/* Buttons get a soft sheen on hover */
body.v .btn { background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); background-size: 250% 100%; background-position: 120% 0; transition: background-position .7s ease, transform .2s ease; }
body.v .btn:hover { background-position: -20% 0; }
body.v .btn:active { transform: translateY(1px); }

/* Section headings: tighter display setting */
.v-h2 { letter-spacing: -.04em; font-weight: 700; }

@media (max-width: 760px) { .bd-meta .bd-pm, .bd-spark, .bd-hint { display: none; } .v-arrivals { transform: none; } }
@media (prefers-reduced-motion: reduce) { .bd::before, .hs-panel::before { animation: none; } .rise { opacity: 1; transform: none; } }
.sx-pair i.cg.unk { background: repeating-linear-gradient(135deg, var(--rule-2) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1.5px var(--rule-2); }
.sx-pair i.cg.unk b { color: var(--ink-3); font-weight: 600; }

/* Pricing: the pilot window and the tiers */
.pilot-window { margin-top: 56px; padding: 20px 22px; border-radius: 18px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.pw-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pw-title { display: flex; align-items: center; gap: 10px; font: 640 17px/1 var(--display); color: #fff; }
.pw-note { font-size: 14px; color: var(--night-ink-3); }
.pw-track { display: grid; grid-template-columns: 1fr 2fr; gap: 6px; }
.pw-seg { position: relative; border-radius: 10px; padding: 14px 16px; display: grid; gap: 4px; overflow: hidden; }
.pw-seg span { font: 600 12px/1 var(--sans); }
.pw-seg b { font: 640 16px/1.2 var(--display); }
.pw-seg.now { background: var(--amber); color: var(--amber-ink); }
.pw-seg.now::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); background-size: 250% 100%; animation: shine 2.8s ease-in-out infinite; }
@keyframes shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.pw-seg.later { background: repeating-linear-gradient(135deg, rgba(154,163,255,.1) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1px rgba(154,163,255,.25); color: var(--night-ink-2); }
.tiers { margin-top: 20px; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; align-items: stretch; }
.tier { border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 14px; color: #fff; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.tier.pilot { background: linear-gradient(180deg, #1B2380, #121A5E); box-shadow: inset 0 0 0 1.5px var(--amber), 0 50px 90px -40px rgba(242,138,51,.45); }
.tier.later { opacity: .82; }
.tier.later:hover { opacity: 1; }
.tier-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: 600 12.5px/1 var(--sans); padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--night-ink-2); }
.tier.pilot .tier-tag { background: rgba(242,138,51,.18); color: #FFC48F; }
.tier-name { font: 700 30px/1 var(--display); letter-spacing: -.03em; }
.tier-price { display: grid; gap: 6px; }
.tier-price b { font: 700 52px/1 var(--display); letter-spacing: -.045em; }
.tier.pilot .tier-price b { color: var(--amber); }
.tier.later .tier-price b { font-size: 40px; }
.tier-price span { font-size: 14.5px; color: var(--night-ink-2); }
.tier-for { font-size: 15.5px; line-height: 1.45; color: var(--night-ink-2); padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; flex: 1; }
.tier li { font-size: 15px; line-height: 1.4; color: #E6E8F6; padding-left: 24px; position: relative; }
.tier li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 10px; height: 5px; border-left: 2px solid #9AA3FF; border-bottom: 2px solid #9AA3FF; transform: rotate(-45deg); }
.tier.pilot li::before { border-color: var(--amber); }
.tier .btn { align-self: flex-start; margin-top: 6px; }
.tier-after { font: 600 13.5px/1 var(--sans); color: var(--night-ink-3); padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.14); }
.tier.spot::after { background: radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(242,138,51,.12), transparent 60%); }
.tier:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.tier.pilot:hover { box-shadow: inset 0 0 0 1.5px var(--amber), 0 60px 100px -40px rgba(242,138,51,.55); }
@media (max-width: 1080px) { .tiers { grid-template-columns: 1fr; } .pw-track { grid-template-columns: 1fr; } }
.tier li { display: block; }
.tier ul { margin: 0; border-top: 0; padding-top: 0; color: inherit; }
.tier { gap: 14px; align-content: initial; }

/* ---------- Lit frames: the Home board treatment, reused ---------- */
.lit-wrap { position: relative; transform: perspective(2200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.lit-wrap::before { content: ""; position: absolute; inset: -60px -40px; z-index: -1; pointer-events: none; background: radial-gradient(600px circle at var(--gx, 50%) var(--gy, 30%), rgba(242,138,51,.15), transparent 60%), radial-gradient(900px circle at 30% 90%, rgba(52,67,224,.38), transparent 65%); filter: blur(12px); }
.lit { position: relative; isolation: isolate; }

/* ---------- Product: sequence diagram ---------- */
.seq-wrap { margin-top: 64px; }
.seq { background: linear-gradient(180deg, #0A0F3A, #060A2B 50%); border-radius: 22px; padding: 18px 22px 26px; box-shadow: 0 60px 120px -50px rgba(0,0,0,.95); }
.seq-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; }
.seq-tabs { display: flex; gap: 6px; }
.seq-tabs button, .seq-replay { appearance: none; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; font: 600 13px/1 var(--sans); color: var(--night-ink-2); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.seq-tabs button[aria-selected="true"] { background: #fff; color: #10132B; box-shadow: none; }
.seq-replay { display: inline-flex; gap: 8px; align-items: center; }
.seq-replay::before { content: ""; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.seq-heads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 0 18px; border-top: 1px solid rgba(255,255,255,.07); }
.sh { display: grid; justify-items: center; gap: 6px; text-align: center; }
.sh i { width: 40px; height: 40px; border-radius: 50%; }
.sh.pa i { border: 2.5px dotted #9AA3FF; }
.sh.ba i { border-radius: 11px; background: var(--amber); position: relative; box-shadow: 0 0 30px rgba(242,138,51,.5); }
.sh.ba i::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #fff; }
.sh.sy i { border-radius: 11px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); background: repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, transparent 2px 9px); }
.sh b { font: 640 15px/1.2 var(--display); color: #fff; }
.sh span { font-size: 12px; color: var(--night-ink-3); }
.seq-body { list-style: none; margin: 0; padding: 6px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; position: relative;
  background: linear-gradient(rgba(154,163,255,.28), rgba(154,163,255,.28)) calc(16.666% - 1px) 0 / 2px 100% no-repeat, linear-gradient(rgba(242,138,51,.4), rgba(242,138,51,.4)) calc(50% - 1px) 0 / 2px 100% no-repeat, linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)) calc(83.333% - 1px) 0 / 2px 100% no-repeat; }
.sq { position: relative; display: grid; gap: 8px; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.js .sq { opacity: .16; transform: translateY(6px); }
.js .sq.on { opacity: 1; transform: none; }
.sq.a12, .sq.a21 { grid-column: 1 / 3; }
.sq.a23, .sq.a32 { grid-column: 2 / 4; }
.sq.s1 { grid-column: 1 / 2; }
.sq.s2 { grid-column: 2 / 3; }
.sq .lbl { display: block; margin: 0 25%; text-align: center; font-size: 14.5px; line-height: 1.4; color: #fff; padding: 0 6px; text-wrap: balance; }
.sq.s1 .lbl, .sq.s2 .lbl { margin: 0 10px; padding: 12px 14px; border-radius: 12px; text-align: left; background: rgba(154,163,255,.14); box-shadow: inset 0 0 0 1px rgba(154,163,255,.3); position: relative; z-index: 1; }
.sq.say .lbl { background: #fff; color: #14182E; font: 600 14.5px/1.4 var(--display); box-shadow: 0 20px 40px -20px rgba(242,138,51,.6); }
.sq.ans .lbl { color: #FFD9B5; font-weight: 600; }
.arw { position: relative; display: block; height: 2px; margin: 0 calc(25% - 1px); background: #9AA3FF; }
.sq.a23 .arw, .sq.a32 .arw { background: rgba(255,255,255,.55); }
.sq.ans .arw { background: var(--amber); }
.arw::after { content: ""; position: absolute; top: -5px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.sq.a12 .arw::after, .sq.a23 .arw::after { right: -2px; border-left: 9px solid #9AA3FF; }
.sq.a23 .arw::after { border-left-color: rgba(255,255,255,.55); }
.sq.a32 .arw::after, .sq.a21 .arw::after { left: -2px; border-right: 9px solid rgba(255,255,255,.55); }
.sq.a21 .arw::after { border-right-color: var(--amber); }
.arw i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 3px rgba(154,163,255,.9); opacity: 0; }
.sq.cur .arw i { opacity: 1; animation: pkt-r 1s cubic-bezier(.5,0,.3,1) forwards; }
.sq.a32.cur .arw i, .sq.a21.cur .arw i { animation-name: pkt-l; }
.sq.ans.cur .arw i { box-shadow: 0 0 14px 3px rgba(242,138,51,.9); }
@keyframes pkt-r { from { left: 0; } to { left: calc(100% - 8px); } }
@keyframes pkt-l { from { left: calc(100% - 8px); } to { left: 0; } }
.sq.cur .lbl { text-shadow: 0 0 24px rgba(154,163,255,.5); }
.sq.s1.cur .lbl, .sq.s2.cur .lbl { box-shadow: inset 0 0 0 1px #9AA3FF, 0 0 30px rgba(154,163,255,.35); }
.sq.say.cur .lbl { box-shadow: 0 0 40px rgba(242,138,51,.55); }
@media (max-width: 760px) {
  .seq { padding: 14px; }
  .seq-top { flex-wrap: wrap; }
  .sh b { font-size: 13px; } .sh span { display: none; }
  .sq .lbl { margin: 0 4%; font-size: 13px; }
  .sq.s1 { grid-column: 1 / 3; } .sq.s2 { grid-column: 1 / 4; }
}

/* ---------- Studio frame and live rows ---------- */
.studio-wrap { margin-top: 64px; }
.studio-wrap .studio { margin-top: 0; }
.v-dash-row.fresh { animation: row-in .5s cubic-bezier(.2,.8,.2,1); background: rgba(52,67,224,.06); }
.v-dash-row { transition: background 1s ease; position: relative; overflow: hidden; }
.v-dash-row.fresh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(52,67,224,.14), transparent); transform: translateX(-100%); animation: sweep 1.3s ease .1s; }

/* ---------- Use cases showcase ---------- */
.uc-chips { margin-top: 44px; }
.uc-chips .uc-chip { appearance: none; border: 0; cursor: pointer; }
.uc-chip[aria-selected="true"] { background: #fff; color: #10132B; box-shadow: none; }
.uc-chip[aria-selected="true"] .t-icon { background: var(--cobalt-wash); }
.uc-chip[aria-selected="true"] .t-icon svg { fill: #3443E0; }
.ucx-wrap { margin-top: 28px; }
.ucx { background: linear-gradient(180deg, #0A0F3A, #060A2B 55%); border-radius: 22px; padding: 26px; box-shadow: 0 60px 120px -50px rgba(0,0,0,.95); min-height: 440px; }
.js .ucx-cat { display: none; }
.js .ucx-cat.on { display: block; animation: v-rise .5s ease both; }
.ucx-cat + .ucx-cat { margin-top: 40px; }
.js .ucx-cat + .ucx-cat { margin-top: 0; }
.ucx-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ucx-head .t-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(154,163,255,.14); display: grid; place-items: center; }
.ucx-head .t-icon svg { width: 26px; height: 26px; fill: #9AA3FF; }
.ucx-head h2 { color: #fff; font-size: 26px; }
.ucx-live { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; font: 600 12.5px/1 var(--sans); color: var(--night-ink-3); }
.ucx-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; padding-top: 22px; }
.ucx-sub { font: 600 12.5px/1.3 var(--sans); color: var(--night-ink-3); margin-bottom: 12px; }
.ucx-rows { display: grid; gap: 8px; }
.ucx-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.ucx-row .q { font: 500 15px/1.3 var(--sans); color: #fff; }
.ucx-pill { min-width: 150px; display: flex; justify-content: flex-end; }
.ucx-dl { margin: 18px 0 0; display: grid; gap: 0; }
.ucx-dl div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ucx-dl dt { font: 600 13px/1.35 var(--sans); color: var(--night-ink-3); }
.ucx-dl dd { margin: 0; font-size: 15px; line-height: 1.45; color: #E6E8F6; }
.ucx-right { display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: 16px; background: #fff; color: #14182E; box-shadow: 0 30px 60px -30px rgba(242,138,51,.5); }
.ucx-right .ucx-sub { color: #B85A14; }
.ucx-quote { font: 700 clamp(24px, 2.4vw, 32px)/1.18 var(--display); letter-spacing: -.025em; }
.ucx-rel { margin-top: auto; padding-top: 16px; border-top: 1px solid #ECEBEF; }
.ucx-rel .ucx-sub { color: #6E7387; margin-bottom: 6px; }
.ucx-rel p:last-child { font-size: 15px; line-height: 1.45; color: #4B5066; }
@media (max-width: 1080px) { .ucx-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .ucx { padding: 16px; }
  .ucx-row { grid-template-columns: 1fr; gap: 6px; }
  .ucx-pill { justify-content: flex-start; min-width: 0; }
  .ucx-dl div { grid-template-columns: 1fr; gap: 4px; }
  .uc-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .uc-chip { flex: none; }
}

/* Pricing: the pilot tier carries the lit frame */
.tier.pilot.lit::before { border-radius: 20px; }