/* Plugboard marketing site. One stylesheet for every page: tokens, layout,
   navigation, sections, forms, the workflow story, pricing, security, compare,
   booking and legal. Page files carry structure only. */

/* Palette: slate and ember, shared with the application (apps/web globals.css).
   Slate scale 0d1b2a / 1b263b / 415a77 / 778da9 / e0e1dd; ember #d8431c is the
   application's brand default, darkened 12% for solid buttons and lifted 45%
   towards white for text on slate, the same two derivations the app uses. */
:root, html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #eeefec;
  --panel: #ffffff;
  --text: #1b263b;
  --text-hi: #0d1b2a;
  --muted: #415a77;
  --line: #d9dbd6;
  --line-2: #b9c0ca;
  --brand: #be3b19;
  --brand-hover: #a63315;
  --accent-ink: #be3b19;
  --accent-soft: color-mix(in srgb, #d8431c 18%, transparent);
  --navy: #0d1b2a;
  --navy-2: #1b263b;
  --navy-text: #e0e1dd;
  --navy-muted: #8a9db5;
  --peach: #eb9a80;
  --ok: #1f7a3a;
  --ok-soft: #e3f3e8;
  --invalid: #be123c;
  --glass-line: rgba(255, 255, 255, .7);
  --shadow: 0 2px 4px rgba(13, 27, 42, .05), 0 18px 40px -18px rgba(13, 27, 42, .3);
}
/* Layout tokens sit on :root alone: a theme selector must never outrank the
   gutter media query below, or the page shifts when the theme changes. */
:root { --r: 12px; --r-sm: 8px; --r-1: 10px; --r-2: 14px; --r-3: 20px; --r-4: 28px; --maxw: 1200px; --gutter: 20px; --head: 64px; --sec: clamp(72px, 7vw, 112px); --measure: 56ch; --h2: clamp(30px, 4vw, 48px); --h2-lg: clamp(34px, 4.6vw, 56px); --shadow-2: 0 2px 4px rgba(13, 27, 42, .06), 0 32px 60px -28px rgba(13, 27, 42, .45); --shadow-3: 0 4px 8px rgba(0, 0, 0, .25), 0 40px 80px -30px rgba(0, 0, 0, .7); }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1b2a;
  --bg-2: #111f30;
  --panel: #1b263b;
  --text: #e0e1dd;
  --text-hi: #f5f6f3;
  --muted: #8a9db5;
  --line: #2b3a52;
  --line-2: #415a77;
  --accent-ink: #eb9a80;
  --accent-soft: color-mix(in srgb, #d8431c 22%, transparent);
  --ok: #6fd28f;
  --ok-soft: #1e3a2a;
  --invalid: #fb7185;
  --glass-line: rgba(255, 255, 255, .08);
  --shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .7);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .3), 0 32px 60px -28px rgba(0, 0, 0, .8);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--head) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.65 "Segoe UI", system-ui, -apple-system, sans-serif; overflow-x: clip; }
@font-face { font-family: Manrope; src: url("/fonts/manrope-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: Manrope; src: url("/fonts/manrope-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
h1, h2, h3, h4 { font-family: Manrope, "Segoe UI", sans-serif; font-weight: 700; color: var(--text-hi); letter-spacing: -.03em; line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.035em; line-height: 1.06; font-weight: 800; }
h2 { font-size: clamp(27px, 3.2vw, 38px); }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent-ink); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .18s, text-decoration-thickness .18s; }
a:not(.btn, .tile, .brand, .btn-arrow, .feature, .card):hover { text-decoration-thickness: 2px; color: var(--brand-hover); }
.section-navy a:not(.btn):hover, .close a:not(.btn):hover { color: #fff; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.2em; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 3px; }
:where(.section-navy, .hero2, .site-head-dark, .counter, .plan-card, .close) :where(a, button, summary):focus-visible { outline-color: var(--peach); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-soft); color: var(--text-hi); }
.section-navy ::selection { background: var(--peach); color: var(--navy); }
.scroller { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.scroller::-webkit-scrollbar { height: 8px; }
.scroller::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.scroller::-webkit-scrollbar-track { background: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--brand); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); z-index: 50; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
.em { color: var(--accent-ink); }
.hero2 .em { color: var(--peach); }
[hidden] { display: none !important; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 22px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); color: #fff; }
.btn-ghost { background: var(--bg); color: var(--text-hi); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-2); border-color: var(--muted); }
.btn-lg { min-height: 52px; padding-inline: 26px; font-size: 16px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Header and navigation. The phone menu is a native <details>; the theme
   switch only appears once site.js has loaded. */
/* The header is the app's Modern navigation material: a frosted slate band
   with a lit top edge. Opaque where backdrop-filter is unavailable. */
.site-head { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--glass-line); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-head { background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(22px) saturate(165%); backdrop-filter: blur(22px) saturate(165%); }
}
@media (prefers-reduced-transparency: reduce) { .site-head { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav { display: flex; align-items: center; gap: 10px; min-height: var(--head); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: Manrope, "Segoe UI", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.03em; color: var(--text-hi); text-decoration: none; margin-right: auto; }
.brand svg { width: 28px; height: 28px; }
.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 22px; height: 22px; }
.menu[open] > summary .ico-open, .menu:not([open]) > summary .ico-close { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 2 * var(--gutter))); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.menu-panel a { display: block; padding: 11px 14px; border-radius: var(--r-sm); color: var(--text-hi); text-decoration: none; font-weight: 600; font-size: 15px; }
.menu-panel a:hover { background: var(--bg-2); }
.menu-panel a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }
.menu-panel .btn { margin-top: 8px; color: #fff; text-align: center; }
.theme { display: inline-flex; visibility: hidden; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); color: var(--muted); cursor: pointer; }
.js .theme { visibility: visible; }
.theme svg { width: 20px; height: 20px; }
.theme .sun, html[data-theme="dark"] .theme .moon { display: none; }
html[data-theme="dark"] .theme .sun { display: block; }
/* Desktop gets a plain link list; a closed <details> hides its contents
   whatever the CSS says, so the phone menu cannot double as the desktop nav. */
.nav-links { display: none; list-style: none; margin: 0; padding: 0; gap: 4px; }
.nav-links a { position: relative; display: block; padding: 8px 12px; border-radius: 999px; color: var(--text-hi); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.nav-links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a:hover { background: var(--bg-2); }
.nav-links a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }
.nav > .btn-primary, .nav > .btn-ghost { display: none; }
@media (min-width: 1040px) {
  .nav { gap: 14px; }
  .menu { display: none; }
  .nav-links { display: flex; }
  .nav > .btn-primary, .nav > .btn-ghost { display: inline-flex; }
}

/* AI workflow story uses the existing slate/ember palette and a readable sequence. */
.hero-ai-link { margin: 20px 0 0; }
.hero-ai-link a { color: var(--peach); font-weight: 600; }
.hero-ai-link a:hover { color: #fff; }
.ai-workflow-grid { display: grid; gap: 40px; }
.ai-workflow-copy h2 { font-size: var(--h2); }
.ai-workflow-copy p { max-width: 54ch; }
.ai-workflow-copy .btn { margin-top: 12px; }
.ai-workflow-steps { list-style: none; margin: 0; padding: 0; }
.ai-workflow-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--line-2); }
.ai-workflow-steps li:first-child { padding-top: 0; border-top: 0; }
.ai-step-number { color: var(--accent-ink); font: 700 24px/1.2 Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.ai-workflow-steps h3 { margin-bottom: 8px; }
.ai-workflow-steps p, .ai-decision-list dd { color: var(--muted); margin: 0; }
.ai-workflow-preview { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line-2); max-width: 100%; }
.ai-decision-list { margin: 0; }
.ai-decision-list > div { padding: 20px 0; border-bottom: 1px solid var(--line-2); }
.ai-decision-list > div:first-child { padding-top: 0; }
.ai-decision-list dt { font: 700 20px/1.3 Manrope, sans-serif; margin-bottom: 8px; color: var(--text-hi); }
@media (min-width: 960px) { .ai-workflow-grid { grid-template-columns: .9fr 1.1fr; gap: 80px; } }

/* One scroll-led stage on the AI page; compact controls on small screens. */
.ai-page-hero { padding: 64px 0 48px; }
.ai-page-hero > .wrap { display: grid; gap: 28px; align-items: end; }
.ai-page-hero h1 { margin: 0; font-size: clamp(36px, 4.8vw, 62px); }
.ai-page-hero .lede { max-width: 45ch; }
.ai-story { background: var(--bg-2); }
.ai-story-stage { padding-block: 32px; }
.ai-story-top, .ai-story-bottom { display: flex; justify-content: space-between; gap: 20px; align-items: center; font-size: 13px; color: var(--muted); }
.ai-story-top p { margin: 0; }
.ai-story-tabs { display: none; gap: 8px; margin: 24px 0 32px; }
.ai-story-tabs button { flex: 1; background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid var(--line-2); padding: 14px 8px; text-align: left; font: 600 16px/1.3 "Segoe UI", sans-serif; cursor: pointer; position: relative; transition: color .2s; }
.ai-story-tabs button::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: calc(var(--fill, 0) * 100%); background: var(--accent-ink); }
.ai-story-tabs button span { font-variant-numeric: tabular-nums; margin-right: 8px; }
.ai-story-tabs button[aria-selected="true"] { color: var(--accent-ink); }
.ai-story-panel { display: grid; gap: 28px; align-items: center; margin-bottom: 48px; }
.ai-story-copy h2 { font-size: clamp(28px, 3.2vw, 44px); max-width: 17ch; }
.ai-story-copy .lede { font-size: 18px; }
.ai-story-boundary { color: var(--muted); font-size: 14px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.ai-story-panel .xp-shot { width: 100%; margin: 0; }
.ai-story-panel .hero-frame-foot { font-size: 11px; padding: 10px 14px; }
.ai-story-bottom { border-top: 1px solid var(--line-2); padding-top: 20px; margin-top: 28px; }
.ai-story-bottom [data-story-count] { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.ai-story.is-ready .ai-story-tabs { display: flex; }
.ai-story.is-ready .ai-story-panels { display: grid; }
.ai-story.is-ready .ai-story-panel { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; transform: translateY(16px); clip-path: inset(0 0 4% 0); transition: opacity .3s ease, transform .5s cubic-bezier(.16,1,.3,1), clip-path .5s cubic-bezier(.16,1,.3,1), visibility .3s; }
.ai-story.is-ready .ai-story-panel.is-active { visibility: visible; opacity: 1; transform: none; clip-path: inset(0); }
.ai-details { padding-block: 56px; }
.ai-details-heading { max-width: 64ch; margin-bottom: 28px; }
.ai-disclosures > details { scroll-margin-top: 96px; }
.ai-disclosure-body { padding: 0 0 6px; max-width: 80ch; }
.ai-disclosure-body .wrap { width: 100%; padding: 0; margin: 0; }
.ai-disclosure-body :is(.split,.grid,.ai-workflow-grid) { display: block; }
.ai-disclosure-body :is(.card,.callout) { background: transparent; border: 0; box-shadow: none; padding: 12px 0; }
.ai-disclosure-body :is(h3,.wrap + .wrap) { margin-top: 20px; }
.ai-disclosure-body .sec-head { margin: 0; }
@media (min-width: 960px) {
  .ai-page-hero > .wrap { grid-template-columns: 1.15fr 1fr; gap: 72px; }
  .ai-story-panel { grid-template-columns: .8fr 1.2fr; gap: 48px; }
  .ai-story-stage { padding-block: 24px; }
  .ai-story-tabs { margin-block: 16px 24px; }
  .ai-story-bottom { margin-top: 20px; padding-top: 16px; }
  .ai-story.is-pinned .xp-shot img { max-height: calc(100svh - 380px); width: 100%; object-fit: contain; }
  .ai-story.is-pinned { height: calc(100svh + 2600px); }
  .ai-story.is-pinned .ai-story-stage { position: sticky; top: calc(var(--head) + 12px); }
}
@media (max-width: 599px) {
  .ai-page-hero { padding: 40px 0; }
  .ai-story-top p { max-width: 22ch; }
  .ai-story-tabs { gap: 4px; margin: 16px 0 24px; }
  .ai-story-tabs button { font-size: 13px; padding: 12px 2px; }
  .ai-story-tabs button span { display: block; margin-bottom: 5px; }
  .ai-story-copy h2 { max-width: 22ch; }
  .ai-story-copy .lede { font-size: 16px; }
  .ai-story-panel .hero-frame-foot { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-story.is-ready .ai-story-panel { transform: none; clip-path: none; transition: opacity .1s; }
}
@media print {
  .ai-story.is-ready .ai-story-panel { grid-area: auto; visibility: visible; opacity: 1; transform: none; clip-path: none; }
  .ai-story.is-pinned { height: auto; }
  .ai-story.is-pinned .ai-story-stage { position: static; }
}

/* Isolated workflow illustrations: one finite sequence per active stage. */
.flow-demo { margin: 0; background: var(--panel); border-radius: 16px; box-shadow: var(--shadow-2); overflow: hidden; }
.flow-demo svg { width: 20px; height: 20px; flex: none; }
.flow-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.flow-head strong { font: 700 15px/1.3 Manrope,sans-serif; }
.flow-symbol { display: grid; place-items: center; width: 34px; height: 34px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 8px; }
.flow-example { margin-left: auto; font-size: 11px; color: var(--muted); }
.flow-canvas { padding: 24px; min-height: 360px; display: flex; flex-direction: column; justify-content: center; }
.flow-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.flow-message h3 { font-size: 21px; margin: 0 0 10px; }
.flow-message p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.flow-connector { display: flex; justify-content: center; color: var(--accent-ink); padding: 12px 0; }
.flow-fields { border-block: 1px solid var(--line); }
.flow-fields > div { display: grid; grid-template-columns: 80px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 0; font-size: 13px; }
.flow-fields > div + div { border-top: 1px solid var(--line); }
.flow-fields span { color: var(--muted); }
.flow-fields strong { font-weight: 600; }
.flow-fields em { color: var(--accent-ink); font-style: normal; font-size: 11px; }
.flow-result { display: flex; align-items: center; gap: 10px; color: var(--ok); font-size: 13px; margin-top: 20px; }
.flow-sources { display: flex; gap: 16px; }
.flow-sources > div { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.flow-sources svg { color: var(--accent-ink); }
.flow-draft { border-block: 1px solid var(--line); padding: 16px 0; }
.flow-draft-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; font-size: 13px; }
.flow-draft-head span { color: var(--accent-ink); }
.flow-line { font-size: 14px; line-height: 1.65; margin-bottom: 10px; }
.flow-citations { color: var(--muted); font-size: 11px; margin-top: 14px; }
.flow-approval, .flow-resolved, .flow-knowledge { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.flow-approval { margin-top: 20px; color: var(--accent-ink); }
.flow-resolved { color: var(--ok); }
.flow-knowledge { padding-top: 14px; border-top: 1px solid var(--line); }
.flow-knowledge svg { color: var(--accent-ink); }
.flow-knowledge strong { display: block; }
.flow-demo :is(.flow-approval,.flow-resolved,.flow-knowledge) p { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.flow-caption { padding: 14px 24px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.flow-replay { display: none; flex: none; align-items: center; gap: 6px; margin-left: auto; min-height: 44px; padding: 4px 0 4px 8px; background: transparent; border: 0; color: var(--accent-ink); cursor: pointer; font: inherit; }
.is-ready .flow-replay, .js .xp .flow-replay { display: flex; }
.flow-replay svg { width: 15px; height: 15px; }
@keyframes flow-arrive { from { opacity: 0; transform: translateY(9px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
/* The new card slides up out of the stack behind the old one; two card edges show above it, then fold in. */
@keyframes card-behind { from { opacity: .35; transform: translate3d(0, -34px, 0) scale(.93); box-shadow: 0 -10px 0 -5px #2a3a54, 0 -10px 0 -4px rgba(255,255,255,.14), 0 -20px 0 -10px #1f2d44, 0 -20px 0 -9px rgba(255,255,255,.1); } 55% { opacity: 1; transform: none; box-shadow: 0 -10px 0 -5px #2a3a54, 0 -10px 0 -4px rgba(255,255,255,.14), 0 -20px 0 -10px #1f2d44, 0 -20px 0 -9px rgba(255,255,255,.1); } to { opacity: 1; transform: none; box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .js .xp-panel[data-active] .flow-demo { animation: card-behind 1.1s cubic-bezier(.22,1,.36,1) both; }
  :is(.is-active,[data-active]) .flow-running .flow-beat { animation: flow-arrive .55s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--beat,0ms); }
  .is-active .flow-running .flow-line { animation-duration: .75s; }
  /* The AI walkthrough is scroll-paced, so each card's beats play at about twice the speed. */
  .ai-story-panel.is-active .flow-running .flow-beat { animation-duration: .35s; animation-delay: calc(var(--beat, 0ms) * .5); }
}
@media (max-width: 599px) {
  .flow-head { padding: 14px 16px; gap: 9px; }
  .flow-head strong { font-size: 13px; }
  .flow-canvas { padding: 20px 16px; min-height: 370px; }
  .flow-fields > div { grid-template-columns: 64px minmax(0,1fr); gap: 5px 8px; }
  .flow-fields em { grid-column: 2; }
  .flow-message h3 { font-size: 19px; }
  .flow-sources { gap: 12px; flex-direction: column; }
  .flow-caption { padding: 10px 16px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .is-ready .flow-replay, .js .xp .flow-replay { display: none; } }
.home-flow { align-self: start; width: 100%; }
.home-flow .flow-canvas { padding: 12px 22px 16px; min-height: 0; }
.home-flow-intro { margin: 4px 0 10px; font-size: 13px; color: var(--muted); }
.home-flow-feed { list-style: none; margin: 0; padding: 0; }
.home-flow-feed li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 8px 12px; padding: 15px 0; }
.home-flow-feed li + li { border-top: 1px solid var(--line); }
.home-flow-mark { display: grid; place-items: center; align-self: start; width: 30px; height: 30px; border-radius: 8px; color: var(--accent-ink); background: var(--accent-soft); }
.home-flow-mark svg { width: 16px; height: 16px; }
.home-flow-feed strong { font-size: 15px; color: var(--text-hi); }
.home-flow-feed p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.home-flow-state { grid-column: 2; color: var(--accent-ink); font-size: 11px; font-weight: 600; }
.home-flow-feed li { position: relative; grid-template-columns: 38px minmax(0,1fr); }
.home-flow-mark { width: 38px; height: 38px; border-radius: 12px; border: 1px solid color-mix(in srgb,var(--accent-ink) 22%,transparent); position: relative; z-index: 1; }
.home-flow-mark svg { width: 20px; height: 20px; stroke-width: 1.65; }
.home-flow-feed li:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 54px; bottom: -14px; width: 2px; background: var(--line-2); transform-origin: top; }
.home-flow-state { justify-self: start; padding: 3px 9px; border-radius: 5px; background: var(--accent-soft); }
.xp-playback { display: block; margin: 10px 18px 0 auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--panel); font: inherit; font-size: 12px; cursor: pointer; }
.xp-playback[hidden] { display: none; }
.xp-playback:hover { color: var(--text-hi); border-color: var(--accent-ink); }
.ai-workflow-steps li { position: relative; grid-template-columns: 48px minmax(0,1fr); gap: 20px; border-top: 0; padding: 20px 0; }
.ai-step-number { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-2); color: var(--accent-ink); position: relative; z-index: 1; }
.ai-step-number svg { width: 23px; height: 23px; stroke-width: 1.65; }
.ai-workflow-steps li:not(:last-child)::after { content: ''; position: absolute; left: 23px; top: 68px; bottom: -20px; width: 2px; background: var(--line-2); transform-origin: top; }
.ai-workflow-steps li:first-child::after { top: 48px; }
@keyframes workflow-link { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes workflow-icon { from { transform: scale(.8); opacity: .35; } to { transform: scale(1); opacity: 1; } }
@keyframes workflow-status { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  [data-active] .flow-running .home-flow-mark { animation: workflow-icon .5s var(--ease-out) both; animation-delay: calc(var(--beat) + 120ms); }
  [data-active] .flow-running .home-flow-state { animation: workflow-status .45s var(--ease-out) both; animation-delay: calc(var(--beat) + 420ms); }
  [data-active] .flow-running .home-flow-feed li::after { animation: workflow-link .65s ease-out both; animation-delay: calc(var(--beat) + 250ms); }
  .ai-workflow-steps .step-arrived > div { animation: workflow-status .65s var(--ease-out) both; animation-delay: var(--step-delay); }
  .ai-workflow-steps .step-arrived .ai-step-number { animation: workflow-icon .65s var(--ease-out) both; animation-delay: var(--step-delay); }
  .ai-workflow-steps .step-arrived::after { animation: workflow-link .8s ease-out both; animation-delay: calc(var(--step-delay) + 300ms); }
}

/* Sections */
.section { padding-block: var(--sec); }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.section-navy { background: var(--navy); color: var(--navy-text); }
.section-navy :is(h1, h2, h3) { color: #fff; }
.section-navy .em, .section-navy .eyebrow { color: var(--peach); }
.section-navy .muted { color: var(--navy-muted); }
.section-navy a:not(.btn) { color: var(--peach); }
.section-navy .btn-ghost { background: transparent; color: #fff; border-color: var(--navy-muted); }
.section-navy .btn-ghost:hover { background: var(--navy-2); }
.section-navy .list-check li::before { border-color: var(--peach); }
.sec-head { max-width: 720px; margin-bottom: 32px; }
.sec-head p { font-size: 17px; }
.lede { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; max-width: var(--measure); }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-2); padding: 22px; box-shadow: inset 0 1px 0 var(--glass-line); }
.card :is(h2, h3) { font-size: 18px; margin-bottom: 6px; }
.card p { font-size: 15px; }
.chip { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 7px; margin-bottom: 10px; }
.callout { border: 1px solid var(--line-2); background: var(--bg-2); padding: 18px 22px; border-radius: var(--r); }
.section-navy .callout { background: var(--navy-2); border-color: var(--navy-muted); }
.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list-check li { position: relative; padding-left: 26px; }
.list-check li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 13px; height: 7px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
.list-cols { columns: 2; column-gap: 32px; }
.list-cols li { break-inside: avoid; margin-bottom: 10px; }
@media (max-width: 640px) { .list-cols { columns: 1; } }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 16.5px; color: var(--text-hi); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--muted); flex: none; }
.faq details[open] > summary::after { content: "\2212"; }
.faq details > p, .faq details > ul { padding-bottom: 18px; max-width: 70ch; font-size: 15.5px; }

/* Product images */
.shot { margin: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow), inset 0 1px 0 var(--glass-line); }
.shot img { width: 100%; }

/* Split section */
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* Pricing */
.price-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 8px; }
.price { font-family: Manrope, "Segoe UI", sans-serif; font-weight: 700; font-size: clamp(48px, 7vw, 72px); letter-spacing: -.04em; line-height: 1; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.price-unit { font-size: 18px; color: var(--muted); }
.price-sub { font-size: 16px; color: var(--muted); margin-top: 8px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 3px; background: var(--bg); }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-block; padding: 8px 14px; border-radius: 5px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
/* A selected view is quiet, so it never competes with the ember commit button. */
.seg input:checked + span { background: var(--accent-soft); color: var(--accent-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.calc { display: grid; gap: 24px; }
@media (min-width: 900px) { .calc { grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: start; } }
.calc-inputs { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; }
.field label, .field .label { font-weight: 600; font-size: 14.5px; color: var(--text-hi); }
.field .hint { font-size: 13px; color: var(--muted); }
.field > .seg, .field > .stepper { justify-self: start; }
.field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); color: var(--text-hi); font-size: 16px; }
.field textarea { min-height: 110px; resize: vertical; }
.field :is(input, select, textarea):focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.field [aria-invalid="true"] { border-color: var(--invalid); }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; background: var(--bg); }
.stepper input { width: 72px !important; text-align: center; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper button { width: 44px; border: 0; background: var(--bg-2); color: var(--text-hi); font-size: 20px; cursor: pointer; display: none; }
.js .stepper button { display: block; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--brand); }
.check b { display: block; color: var(--text-hi); font-weight: 600; }
.receipt { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.receipt li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.receipt li span:last-child { font-weight: 600; color: var(--text-hi); white-space: nowrap; }
.receipt .total { border-top: 2px solid var(--text-hi); margin-top: 6px; padding-top: 14px; font-size: 17px; }
.receipt .total span:last-child { font-family: Manrope, "Segoe UI", sans-serif; font-size: 26px; letter-spacing: -.03em; }
.receipt .sub { border: 0; padding-top: 0; color: var(--muted); font-size: 14px; }
.receipt .sub span:last-child { color: var(--muted); font-weight: 400; }
.examples { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.examples th, .examples td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.examples th { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.examples td:last-child, .examples th:last-child, .examples td:nth-last-child(2), .examples th:nth-last-child(2) { text-align: right; white-space: nowrap; }
.examples td:last-child { font-weight: 600; color: var(--text-hi); }
.rates div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.rates div:last-child { border-bottom: 1px solid var(--line); }
.rates b { color: var(--text-hi); white-space: nowrap; text-align: right; }

/* Comparison */
.vs { display: grid; gap: 16px; }
@media (min-width: 760px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs .card ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.vs .card li { position: relative; padding-left: 26px; font-size: 15px; }
.vs .card li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.vs .now li::before { content: "\2013"; color: var(--muted); }
.vs .pb li::before { content: "\2713"; color: var(--ok); }
.vs .pb { border-color: var(--accent-ink); }
/* position: relative keeps the absolutely positioned .sr-only labels inside
   the scroll box; without it they widen the whole page on a phone. */
.scroller { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.matrix th, .matrix td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix thead th { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.matrix tbody tr:nth-child(odd) { background: var(--bg-2); }
.matrix tbody th { font-weight: 600; color: var(--text-hi); }
.cap { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; text-decoration: none; font-weight: 700; }
.cap-yes { background: var(--ok-soft); color: var(--ok); }
.cap-no { background: var(--accent-soft); color: var(--accent-ink); }
.cap-unknown { background: var(--bg); border: 1px solid var(--line-2); color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; margin-bottom: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.sources { margin-top: 20px; }
.sources summary { cursor: pointer; font-weight: 600; color: var(--text-hi); padding: 10px 0; }
.sources .grid { margin-top: 12px; }
.sources h3 { font-size: 16px; }
.sources p { font-size: 14px; }
.sources a { font-size: 14px; margin-right: 12px; }

/* Booking */
.book-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .book-grid { grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; } }
.expect { display: grid; gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; }
.expect li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.expect svg { width: 24px; height: 24px; color: var(--accent-ink); margin-top: 2px; }
.expect b { display: block; color: var(--text-hi); }
.expect p { font-size: 15px; }
.form-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: inset 0 1px 0 var(--glass-line); }
.form-card fieldset { border: 0; padding: 0; margin: 0 0 26px; display: grid; gap: 16px; min-width: 0; }
.form-card legend { font-family: Manrope, "Segoe UI", sans-serif; font-weight: 700; font-size: 18px; color: var(--text-hi); margin-bottom: 14px; letter-spacing: -.02em; padding: 0; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
.choices { display: grid; gap: 10px; }
@media (min-width: 620px) { .choices { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; }
.status { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); font-size: 15px; }
.status.error { border-color: var(--invalid); }
.done h2 { font-size: 26px; }
@media (max-width: 640px) { .form-card { padding: 18px; } }

/* Legal */
.legal main { max-width: 78ch; margin-inline: auto; padding-block: 48px 72px; }
.legal h1 { font-size: clamp(32px, 4vw, 42px); }
.legal main h2 { font-size: 24px; margin-top: 40px; }
.legal main h3 { font-size: 17px; margin-top: 24px; }
.legal .meta { color: var(--muted); font-size: 14px; }
.legal .lede { max-width: none; margin-top: 18px; }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0 20px; font-size: 14.5px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.legal .callout { margin: 24px 0; }
.legal li { margin-bottom: 6px; }

/* Footer */
.site-foot { background: var(--bg-2); border-top: 1px solid var(--line); padding: 64px 0 32px; font-size: 14px; }
/* On the homepage the closing lozenge sits half over the footer. */
.home .site-foot { margin-top: -56px; padding-top: 120px; border-top: 0; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-legal a { color: var(--muted); }
.foot-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.foot-about { grid-column: span 1; max-width: 34ch; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.foot-grid h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; font-family: inherit; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-grid a { color: var(--text); text-decoration: none; }
.foot-grid a:hover { color: var(--accent-ink); text-decoration: underline; }
.foot-about .brand { margin-bottom: 10px; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* Homepage, October 2026. Motion grammar is the app's (apps/web globals.css):
   rise for children arriving, emerge for a surface growing out of blur, one
   decelerating curve. site.js adds .in to [data-reveal] once, on entry. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.2, .9, .3, 1.15); }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes emerge { from { opacity: 0; transform: scale(.86); filter: blur(6px) saturate(1.4); } 60% { filter: blur(0) saturate(1.1); } to { opacity: 1; transform: none; filter: none; } }
@keyframes open { from { opacity: 0; clip-path: inset(8% 6% round 24px); transform: scale(.94) translateY(12px); filter: blur(10px) saturate(1.3); } 55% { filter: blur(0) saturate(1.05); } to { opacity: 1; clip-path: inset(0 round 12px); transform: none; filter: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { to { box-shadow: 0 0 0 9px transparent; } }
@keyframes dots { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out); transition-delay: var(--d, 0s); }
  .js :is(.xp, .counter, .plan-card, .close)[data-reveal] { filter: blur(6px); }
  .js [data-reveal].in { opacity: 1; transform: none; filter: none; }
  .js [data-reveal-group] > * { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger, .06s)); }
  .js [data-reveal-group].in > * { opacity: 1; transform: none; }
}

/* Header on the slate hero */
.site-head-dark { background: var(--navy); border-bottom-color: var(--navy-2); color: var(--navy-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .site-head-dark { background: color-mix(in srgb, var(--navy) 84%, transparent); } }
.site-head-dark .brand, .site-head-dark .nav-links a, .site-head-dark .theme, .site-head-dark .menu > summary { color: #fff; }
.site-head-dark .nav-links a:hover { background: var(--navy-2); }
.site-head-dark .nav-links a[aria-current="page"] { background: color-mix(in srgb, var(--peach) 16%, transparent); color: var(--peach); }
.site-head-dark .theme, .site-head-dark .menu > summary { background: transparent; border-color: var(--navy-muted); }
.site-head-dark .btn-ghost { background: transparent; color: #fff; border-color: var(--navy-muted); }
.site-head-dark .btn-ghost:hover { background: var(--navy-2); border-color: var(--navy-text); }

/* Hero: headline on slate, the dashboard booting in below it the way the app
   boots: chrome first, then the cards, then their rows. */
.hero2 { position: relative; background: var(--navy); color: var(--navy-text); padding-top: calc(84px + var(--head)); overflow: clip; }
.hero2::before { content: ""; position: absolute; left: 50%; top: -300px; width: 1100px; height: 800px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, #d8431c 24%, transparent), transparent); pointer-events: none; }
.hero2-copy { position: relative; text-align: center; display: grid; justify-items: center; gap: 22px; }
.hero2 h1 { color: #fff; font-size: clamp(40px, 6.4vw, 78px); letter-spacing: -.04em; line-height: 1.02; margin: 0; max-width: 14ch; font-weight: 800; }
.hero2 .lede { margin: 0; max-width: 58ch; color: var(--navy-text); font-size: clamp(17px, 1.5vw, 20px); }
.hero2 .actions { justify-content: center; }
.hero2 .btn-ghost { background: transparent; color: #fff; border-color: var(--navy-muted); }
.hero2 .btn-ghost:hover { background: var(--navy-2); border-color: var(--navy-text); }
.hero2-proof { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14.5px; color: var(--navy-muted); }
.hero2-proof li { display: inline-flex; align-items: center; gap: 7px; }
.hero2-proof svg { width: 16px; height: 16px; color: var(--peach); }
.hero2-proof a { color: var(--peach); }
.hero2-proof a:hover { color: #fff; }
.hero2-stage { margin-top: 52px; padding-bottom: 32px; background: linear-gradient(to bottom, var(--navy) 0 30%, color-mix(in srgb, var(--navy) 55%, var(--bg)) 48%, var(--bg) 82%); }
@media (max-width: 560px) { .hero2 .actions { flex-direction: column; align-items: stretch; width: min(100%, 340px); } .hero2-proof { flex-direction: column; align-items: flex-start; width: min(100%, 340px); gap: 10px; } }
.hero2-frame { position: relative; max-width: 1120px; margin: 0 auto; background: transparent; border-radius: var(--r-2) var(--r-2) 0 0; overflow: hidden; border: 0; box-shadow: none; }
.frame-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #1b263b; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #415a77; }
.frame-bar span { margin-inline: auto; font-size: 12.5px; color: var(--navy-muted); background: rgba(255, 255, 255, .06); border-radius: 6px; padding: 3px 14px; letter-spacing: .01em; }
.boot-wrap { position: relative; overflow: hidden; }
.boot-img { position: relative; display: block; width: 100%; transition: opacity .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-boot]:not(.done) .boot-img { opacity: 0; }
  .js [data-boot]:not(.done) .boot-wrap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, #e4ecf7, #eef3f9); }
}
html[data-theme="dark"] [data-boot]:not(.done) .boot-wrap::before { background: linear-gradient(120deg, #0b1628, #081120); }
.boot-plates { position: absolute; inset: 0; pointer-events: none; }
.plate { position: absolute; background-repeat: no-repeat; animation: rise .44s var(--ease-out) both; animation-delay: var(--d);
  /* Feather the screenshot crop into its ground instead of exposing a box. */
  mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 8px), transparent), linear-gradient(to bottom, transparent, #000 5px, #000 calc(100% - 5px), transparent);
  mask-composite: intersect;
}
.plate-card { background: #f7faff; border: 0; border-radius: 12px; animation-name: emerge; animation-duration: .46s; }
html[data-theme="dark"] .plate-card { background: #1b2d3d; }
.plate-band { mask-image: none; }

/* Reported repair result and explicitly modelled AI savings. */
.repair-results { padding-top: var(--sec); padding-bottom: 0; scroll-margin-top: calc(var(--head) + 24px); }
.repair-results h2 { margin: 0 0 32px; font-size: var(--h2); font-weight: 800; }
.repair-results-grid { display: grid; gap: 24px; }
.repair-result-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel); }
.repair-result-metric { display: grid; align-content: start; padding: 28px; background: var(--bg-2); border-radius: calc(var(--r-2) - 1px) calc(var(--r-2) - 1px) 0 0; border-bottom: 1px solid var(--line); }
.repair-result-stat { display: grid; gap: 12px; margin: 0; }
.repair-result-up-to { color: var(--muted); font-size: 16px; font-weight: 600; }
.repair-result-number { font-family: Manrope, "Segoe UI", sans-serif; font-size: clamp(72px, 8vw, 96px); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.repair-result-digits { display: inline-block; min-width: 2ch; text-align: right; }
.repair-result-number .repair-result-unit { font-size: .6em; margin-left: 4px; }
.repair-result-label { max-width: 14ch; font-family: Manrope, "Segoe UI", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--text-hi); }
.repair-result-detail { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 28px; }
.repair-result-detail h3 { margin: 0 0 24px; font-size: 22px; }
.repair-result-comparison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; width: 100%; margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.repair-result-comparison dt { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.repair-result-comparison dd { margin: 0; font-family: Manrope, "Segoe UI", sans-serif; font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.repair-result-comparison dd span { font-size: 16px; }
.repair-result-detail > a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; font-weight: 600; }
.repair-result-detail > a svg { width: 18px; height: 18px; flex: 0 0 18px; }
@media (min-width: 980px) { .repair-results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .repair-result-detail h3 { min-height: 2.3em; } }
@supports (grid-template-rows: subgrid) { @media (min-width: 980px) { .repair-results-grid { row-gap: 0; } .repair-result-card { grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; } } }
@media (max-width: 480px) { .repair-result-metric, .repair-result-detail { padding: 24px; } }
@keyframes repairResultReveal { from { opacity: .8; transform: translate3d(0, 10px, 0); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .repair-result-card[data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .repair-result-card[data-reveal].in { animation: repairResultReveal .65s var(--ease-out) both; }
}

/* Connector wall: a counter card beside the twelve featured tiles. */
.wall { padding-block: var(--sec); border-bottom: 1px solid var(--line); }
.wall-head { text-align: center; display: grid; justify-items: center; gap: 12px; margin-bottom: 40px; }
.wall-head h2 { font-size: var(--h2); letter-spacing: -.035em; margin: 0; max-width: 18ch; font-weight: 800; }
.wall-head p { margin: 0; font-size: 17px; color: var(--muted); max-width: var(--measure); }
.wall-grid { display: grid; gap: 16px; }
@media (min-width: 980px) { .wall-grid { grid-template-columns: 330px 1fr; gap: 24px; align-items: stretch; } }
.counter { position: relative; overflow: hidden; background: var(--navy); color: var(--navy-text); border-radius: var(--r-3); padding: 30px 28px 26px; display: grid; gap: 14px; align-content: start; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.counter::before { content: ""; position: absolute; right: -120px; top: -140px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #d8431c 38%, transparent), transparent); pointer-events: none; }
.counter-big { position: relative; font-family: Manrope, "Segoe UI", sans-serif; font-weight: 800; font-size: clamp(72px, 8vw, 104px); letter-spacing: -.055em; line-height: .9; color: #fff; font-variant-numeric: tabular-nums; margin-top: 4px; }
.counter-big small { font-size: .46em; color: var(--peach); vertical-align: top; margin-left: 2px; line-height: 1.6; }
.counter-label { font-size: 18px; font-weight: 700; color: #fff; margin: 0; letter-spacing: -.01em; }
.counter-sub { margin: -8px 0 0; font-size: 14.5px; color: var(--navy-muted); max-width: 30ch; }
.counter-stats { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid #2b3a52; }
.counter-stats li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid #2b3a52; font-size: 14px; color: var(--navy-muted); }
.counter-stats b { font-family: Manrope, "Segoe UI", sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.03em; color: #fff; }
.counter-stats span { text-align: right; max-width: 22ch; }
.counter .btn-arrow { margin-top: 8px; justify-self: start; }
.btn-arrow { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; border-radius: 999px; border: 1px solid var(--navy-muted); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; background: transparent; transition: border-color .25s, background-color .25s; }
.btn-arrow i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; transition: transform .45s var(--spring), background-color .25s; }
.btn-arrow i svg { width: 18px; height: 18px; transition: transform .45s var(--spring); }
.btn-arrow:hover { border-color: var(--peach); background: rgba(255, 255, 255, .05); }
.btn-arrow:hover i { background: var(--brand-hover); }
.btn-arrow:hover i svg { transform: translateX(2px); }
.btn-arrow:active i { transform: scale(.94); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tiles li { display: contents; }
.tile { --c: var(--muted); text-decoration: none; display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 136px; padding: 18px 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: inset 0 1px 0 var(--glass-line); text-align: center; color: var(--text-hi); }
.tile-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-1); background: color-mix(in srgb, var(--c) 12%, var(--panel)); color: var(--c); transition: background-color .3s, color .3s, transform .45s var(--spring); }
.tile-logo svg { width: 24px; height: 24px; }
.tile-logo img { width: 26px; height: 26px; object-fit: contain; border-radius: 5px; }
.tile-mono { font-family: Manrope, "Segoe UI", sans-serif; font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.tile:hover .tile-logo { transform: scale(1.08) rotate(-4deg); }
.tile:hover .tile-logo:not(.tile-logo-img) { background: var(--c); color: #fff; }
html[data-theme="dark"] .tile-logo { color: var(--c-dark, var(--c)); background: color-mix(in srgb, var(--c-dark, var(--c)) 20%, var(--panel)); }
html[data-theme="dark"] .tile:hover .tile-logo:not(.tile-logo-img) { background: var(--c-dark, var(--c)); color: var(--navy); }
.tile-name { font-family: Manrope, "Segoe UI", sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; line-height: 1.2; text-wrap: balance; margin-top: 2px; }
.tile-cat { font-size: 12px; color: var(--muted); }
.tiles-featured { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 980px) { .tiles-featured { grid-template-columns: repeat(4, 1fr); } }

/* Product explorer: one stage, seven panels. The selected tab fills a bar
   for the panel's duration and the next panel opens when it completes. */
.explorer { padding-block: var(--sec); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.explorer-head { text-align: center; display: grid; justify-items: center; gap: 12px; margin-bottom: 36px; }
.explorer-head h2 { font-size: var(--h2); letter-spacing: -.035em; margin: 0; max-width: 20ch; font-weight: 800; }
.explorer-head p { margin: 0; font-size: 17px; color: var(--muted); max-width: var(--measure); }
.xp { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-4); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-line); overflow: hidden; }
.xp-view-gate { position: absolute; top: 0; left: 0; width: 100%; height: min(360px, 50vh); pointer-events: none; }
.xp-tabs { display: none; gap: 2px; padding: 10px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--bg-2) 60%, var(--panel)); }
.js .xp-tabs { display: flex; }
.xp-tabs::-webkit-scrollbar { display: none; }
.xp-tab { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px 17px; border: 0; background: transparent; border-radius: var(--r-1); font-weight: 600; font-size: 15px; color: var(--muted); cursor: pointer; white-space: nowrap; transition: color .2s, background-color .2s, box-shadow .2s; }
.xp-tab svg { width: 18px; height: 18px; }
.xp-tab:hover { color: var(--text-hi); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.xp-tab[aria-selected="true"] { color: var(--text-hi); background: var(--panel); box-shadow: 0 1px 2px rgba(13, 27, 42, .08), 0 8px 20px -12px rgba(13, 27, 42, .35), inset 0 1px 0 var(--glass-line); }
.xp-tab:focus-visible { outline-offset: -2px; }
.xp-bar { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 3px; border-radius: 3px; background: var(--line); opacity: .45; transition: opacity .2s; overflow: hidden; }
.xp-tab[aria-selected="true"] .xp-bar { opacity: 1; }
.xp-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent-ink); transform-origin: left; transform: scaleX(0); }
.xp.playing .xp-tab[aria-selected="true"] .xp-bar::after { animation: xpFill var(--dur, 4.5s) linear forwards; }
.xp.playing.paused .xp-tab[aria-selected="true"] .xp-bar::after { animation-play-state: paused; }
@keyframes xpFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.xp-stage { --stage-pad: clamp(22px, 4vw, 44px); position: relative; display: grid; padding: var(--stage-pad); }
.xp-panel { min-width: 0; grid-area: 1 / 1; display: grid; gap: 26px; align-items: start; align-content: start; }
.js .xp-panel { transition: opacity .42s var(--ease-out), transform .42s var(--ease-out), visibility 0s linear .42s; }
.js .xp-panel:not([data-active]) { visibility: hidden; opacity: 0; transform: translateY(10px); pointer-events: none; }
.js .xp-panel[data-active] { visibility: visible; opacity: 1; transform: none; transition-delay: .08s, .08s, 0s; }
.xp-copy h3 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; margin-bottom: 10px; }
.xp-sub { color: var(--muted); font-size: 16.5px; margin-bottom: 22px; max-width: 46ch; }
.xp-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.xp-lines li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 10px 12px; margin-inline: -12px; border-radius: var(--r-2); border: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.xp-lines li:hover { background: var(--bg-2); border-color: var(--line); }
.xp-li-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-1); background: var(--accent-soft); color: var(--accent-ink); transition: transform .45s var(--spring); }
.xp-li-ico svg { width: 18px; height: 18px; }
.xp-lines li:hover .xp-li-ico { transform: scale(1.08) rotate(-4deg); }
.xp-lines b { display: block; color: var(--text-hi); font-weight: 700; font-size: 15.5px; }
.xp-lines p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.xp-copy .small { margin-top: 20px; }
.xp-shot { margin: 0; border-radius: var(--r-2); overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow-2); }
.xp-shot .frame-bar, .xp-desk .frame-bar { height: 32px; }
.xp-shot img { width: 100%; display: block; }
.xp-shot-portal { position: relative; overflow: visible; border: 0; background: transparent; box-shadow: none; padding: 0 0 7% 9%; }
.xp-desk { border-radius: var(--r-2); overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow-2); }
.xp-phone { position: absolute; left: 0; bottom: 0; width: 25%; border-radius: 18px; border: 4px solid #0d1b2a; background: #0d1b2a; overflow: hidden; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .12); }
.xp-phone img { display: block; width: 100%; }
@media (min-width: 960px) { .xp-panel { grid-template-columns: .85fr 1.15fr; gap: 48px; } }
@media (prefers-reduced-motion: no-preference) {
  .js .xp-panel[data-active] .xp-copy > :is(h3, .xp-sub, .small) { animation: rise .5s var(--ease-out) both; }
  .js .xp-panel[data-active] .xp-sub { animation-delay: .05s; }
  .js .xp-panel[data-active] .xp-lines > li { animation: rise .5s var(--ease-out) both; animation-delay: calc(.12s + var(--i, 0) * .07s); }
  .js .xp-panel[data-active] .xp-copy .small { animation-delay: .45s; }
  .js .xp-panel[data-active] .xp-shot:not(.xp-shot-portal), .js .xp-panel[data-active] .xp-desk { animation: open .7s var(--ease-out) .05s both; }
  .js .xp-panel[data-active] .xp-phone { animation: rise .6s var(--ease-out) .4s both; }
  .js .xp-panel[data-active] .brain { animation: open .7s var(--ease-out) .05s both; }
  .js .xp-panel[data-active] .brain-feed li { animation: rise .5s var(--ease-out) both; animation-delay: calc(.45s + var(--i, 0) * .24s); }
}
@media (prefers-reduced-motion: reduce) { .xp-bar { display: none; } }

/* The assistant, shown as this morning's work rather than a chat box. */
.brain { width: min(100%, 520px); margin-inline: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-2), inset 0 1px 0 var(--glass-line); overflow: hidden; }
.brain-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 50%, var(--panel)); }
.brain-orb { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(from 0deg, #d8431c, #f7a325, #d8431c); box-shadow: 0 0 0 4px color-mix(in srgb, #d8431c 14%, transparent); animation: spin 8s linear infinite; }
.brain-orb::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; opacity: .95; }
.brain-head b { display: block; color: var(--text-hi); font-family: Manrope, "Segoe UI", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.brain-head span { font-size: 13px; color: var(--muted); }
.brain-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ok); letter-spacing: .02em; }
.brain-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); animation: pulse 2s ease-out infinite; }
.brain-feed { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
.brain-feed li { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: var(--r-1); transition: background-color .2s; }
.brain-feed li:hover { background: var(--bg-2); }
.brain-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-1); background: var(--k-soft, var(--accent-soft)); color: var(--k, var(--accent-ink)); }
.brain-ico svg { width: 16px; height: 16px; }
[data-kind="merge"] { --k: #2f5bd7; --k-soft: #e6ecfb; }
[data-kind="automation"] { --k: #6d3fc0; --k-soft: #eee8fa; }
[data-kind="draft"] { --k: #0f766e; --k-soft: #dff4f1; }
[data-kind="pattern"] { --k: #b45309; --k-soft: #fdf0dc; }
[data-kind="summary"] { --k: #415a77; --k-soft: #e8ecf1; }
[data-kind="approval"] { --k: #1f7a3a; --k-soft: #e3f3e8; }
html[data-theme="dark"] [data-kind] { --k-soft: color-mix(in srgb, var(--k) 22%, var(--panel)); }
.brain-feed p { margin: 0; font-size: 14.5px; color: var(--text-hi); line-height: 1.4; }
.brain-feed small { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.brain-chip { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); white-space: nowrap; }
.brain-chip-wait { background: var(--accent-soft); color: var(--accent-ink); }
.brain-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.brain-dots { display: inline-flex; gap: 3px; }
.brain-dots i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); animation: dots 1.2s infinite ease-in-out; }
.brain-dots i:nth-child(2) { animation-delay: .15s; }
.brain-dots i:nth-child(3) { animation-delay: .3s; }

/* Fixed-size module cards turn in place; the surrounding grid never moves. */
.features { background: var(--navy); color: var(--navy-text); padding-block: var(--sec); }
.features-head { max-width: 760px; margin-bottom: 40px; }
.features-head h2 { color: #fff; font-size: var(--h2); font-weight: 800; }
.features .em { color: var(--peach); }
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.module-card { position: relative; min-width: 0; perspective: 1200px; }
.module-turn { display: grid; height: 100%; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform .65s var(--ease-out); }
.module-card[data-flipped] .module-turn { transform: rotateY(180deg); }
.module-front, .module-back { grid-area: 1 / 1; min-width: 0; min-height: 320px; padding: 28px; border: 1px solid #33455f; border-radius: 14px; background: var(--navy-2); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* Separate the two faces to avoid coplanar flicker during the turn. */
.module-front { transform: rotateY(0deg) translateZ(1px); display: flex; flex-direction: column; align-items: flex-start; }
.feature-ico { display: grid; place-items: center; width: 44px; height: 44px; color: var(--peach); margin-bottom: 24px; }
.feature-ico svg { width: 30px; height: 30px; }
.module-title { color: #fff; font: 700 20px/1.35 Manrope, sans-serif; margin-bottom: 10px; }
.module-description { color: var(--navy-text); font-size: 16px; line-height: 1.6; max-width: 35ch; }
.module-back { transform: rotateY(180deg) translateZ(1px); display: flex; flex-direction: column; background: #213249; border-color: #536781; }
.module-back h3 { color: #fff; font-size: 18px; line-height: 1.4; padding-right: 30px; margin: 0 0 16px; }
.module-back ul { list-style: none; margin: 0 0 22px; padding: 0; font-size: 16px; line-height: 1.5; }
.module-back li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.module-back li + li { margin-top: 12px; }
.module-point-icon { width: 20px; height: 20px; margin-top: 2px; color: var(--peach); }
.module-card[data-flipped] .module-point-icon { animation: module-icon-arrive .5s var(--ease-out) both; animation-delay: calc(.3s + var(--i, 0) * .06s); }
@keyframes module-icon-arrive { from { opacity: .4; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.module-back a { color: var(--peach); font-size: 15px; margin-top: auto; align-self: flex-start; }
.module-toggle { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; color: var(--navy-muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; transition: color .2s, background-color .2s; }
.module-toggle svg { width: 20px; height: 20px; }
.module-toggle:hover, .module-toggle:focus-visible { color: var(--peach); background: rgba(255,255,255,.06); outline-color: var(--peach); }
.module-card[data-flipped] .module-toggle { color: var(--peach); }
html:not(.js) .module-toggle { display: none; }
html:not(.js) .module-turn { display: block; }
html:not(.js) .module-front, html:not(.js) .module-back { transform: none; }
html:not(.js) .module-back { min-height: 0; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
 .module-card .module-turn, .module-card[data-flipped] .module-turn { transform: none; }
 .module-front, .module-back { transform: none; }
 .js .module-card:not([data-flipped]) .module-back, .js .module-card[data-flipped] .module-front { visibility: hidden; }
}

/* Pricing summary */
.plan { padding-block: var(--sec); }
.plan-grid { display: grid; gap: 32px; align-items: start; }
.plan h2 { font-size: var(--h2); letter-spacing: -.035em; font-weight: 800; }
.plan p { font-size: 17px; max-width: 52ch; }
.plan-trial { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); font-size: 15px; max-width: 52ch; }
.plan-trial svg { flex: none; width: 22px; height: 22px; color: var(--accent-ink); margin-top: 1px; }
.plan .actions { margin-top: 22px; }
.plan-card { position: relative; overflow: hidden; background: var(--navy); color: var(--navy-text); border-radius: var(--r-3); padding: 26px 28px 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.plan-card::before { content: ""; position: absolute; right: -120px; top: -160px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #d8431c 34%, transparent), transparent); pointer-events: none; }
.plan-card-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.plan-card-title { margin: 0; font-weight: 700; color: #fff; font-family: Manrope, "Segoe UI", sans-serif; font-size: 18px; letter-spacing: -.02em; }
.plan-badge { font-size: 12.5px; font-weight: 700; color: var(--navy); background: var(--peach); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.plan-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px 18px; }
.plan-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 7px 0; font-size: 14.5px; }
.plan-ico { width: 34px; height: 34px; border-radius: var(--r-1); display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--peach); border: 1px solid #2b3a52; }
.plan-ico svg { width: 17px; height: 17px; }
@media (min-width: 860px) { .plan-grid { grid-template-columns: 1.05fr .95fr; gap: 64px; } .plan-list { grid-template-columns: 1fr 1fr; } }

/* Trust band: alignment badges, then a four-column ledger whose icons draw
   themselves as the band arrives. */
.trust { padding-block: var(--sec); }
.trust-head { display: grid; gap: 12px; justify-items: center; text-align: center; max-width: var(--measure); margin-inline: auto; }
.trust-head h2 { font-size: var(--h2); letter-spacing: -.035em; margin: 0; font-weight: 800; }
.trust-head p { margin: 0; font-size: 17px; }
.trust-badges { list-style: none; margin: 30px 0 34px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.trust-badges li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 999px; border: 1px solid #2b3a52; background: var(--navy-2); color: #fff; font-weight: 600; font-size: 14.5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.trust-badges svg { width: 18px; height: 18px; color: var(--peach); }
.trust-badges small { font-size: 12px; color: var(--navy-muted); font-weight: 500; }
.ledger { display: grid; border: 1px solid #33455f; border-radius: var(--r-3); background: var(--navy-2); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10); }
.ledger-col { padding: 26px 26px 28px; border-top: 1px solid #2b3a52; }
.ledger-col:first-child { border-top: 0; }
@media (min-width: 900px) { .ledger { grid-template-columns: repeat(4, 1fr); } .ledger-col { border-top: 0; border-left: 1px solid #2b3a52; } .ledger-col:first-child { border-left: 0; } }
.ledger-ico { width: 48px; height: 48px; border-radius: var(--r-1); display: grid; place-items: center; background: color-mix(in srgb, var(--peach) 14%, transparent); color: var(--peach); margin-bottom: 16px; }
.ledger-ico svg { width: 24px; height: 24px; }
.ledger h3 { color: #fff; font-size: 18px; margin-bottom: 12px; }
.ledger ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ledger li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--navy-text); line-height: 1.45; }
.ledger li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--peach); }
.trust .actions { margin-top: 32px; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .trust-badges svg :is(path, circle, rect) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .trust-badges.in svg :is(path, circle, rect) { animation: draw .9s var(--ease-out) forwards; animation-delay: calc(.3s + var(--i, 0) * .1s); }
  .js .ledger-ico svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .ledger.in .ledger-ico svg :is(path, circle, rect, line, polyline, polygon, ellipse) { animation: draw 1.2s var(--ease-out) forwards; animation-delay: calc(.2s + var(--i, 0) * .14s); }
}

/* FAQ in two columns, closing block */
.faq2 { padding-top: var(--sec); padding-bottom: 40px; background: var(--bg-2); border-top: 1px solid var(--line); }
.faq2 h2 { font-size: var(--h2); font-weight: 800; text-align: center; margin-bottom: 28px; }
/* Each question is its own card; opening one grows that card alone. */
.faq-cols { display: grid; gap: 10px; align-content: start; }
@media (min-width: 860px) { .faq-cols { grid-template-columns: 1fr 1fr; gap: 12px 16px; } }
.faq-cols details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-2); padding: 0 20px; box-shadow: inset 0 1px 0 var(--glass-line); transition: border-color .2s; }
.faq-cols details:last-child { border-bottom: 1px solid var(--line); }
.faq-cols details[open], .faq-cols details:hover { border-color: var(--line-2); }
.faq-cols summary { padding: 16px 0; }
.faq-cols summary::after { content: ""; width: 9px; height: 9px; margin: .35em 6px 0 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .3s var(--ease-out); }
.close-wrap { padding-top: 16px; padding-bottom: 16px; background: var(--bg-2); }
.close-wrap .wrap { max-width: 1320px; }
.close { position: relative; overflow: hidden; background: var(--navy); color: var(--navy-text); border-radius: clamp(28px, 5vw, 56px); padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px); z-index: 1; text-align: center; display: grid; justify-items: center; gap: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.close::before { content: ""; position: absolute; left: 50%; bottom: -60%; width: 900px; height: 500px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #d8431c 26%, transparent), transparent); pointer-events: none; }
.close > * { position: relative; }
.close h2 { color: #fff; font-size: var(--h2-lg); letter-spacing: -.035em; margin: 0; font-weight: 800; }
.close .em { color: var(--peach); }
.close p { margin: 0; font-size: 17px; max-width: var(--measure); }
.close .actions { justify-content: center; margin-top: 6px; }
.close .btn-ghost { background: transparent; color: #fff; border-color: var(--navy-muted); }
.close .btn-ghost:hover { background: var(--navy-2); }

/* The app's interactive-tile grammar: a 3px lift at 1.006 with a restrained
   spring, a reflection that shifts across the face, a brighter inner edge, and
   .988 compression on press. Only on things that go somewhere. */
.tile { position: relative; overflow: hidden; isolation: isolate; }
.tile::after { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%); transform: translateX(-70%); opacity: 0; pointer-events: none; z-index: -1; }
html[data-theme="dark"] .tile::after { background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .10) 50%, transparent 62%); }
@media (prefers-reduced-motion: no-preference) {
  .tile, .btn, .xp-tab, .cat-nav a, .menu-panel a { transition: transform .4s var(--spring), box-shadow .4s var(--spring), background-color .18s, border-color .18s, color .18s; }
  .feature { transition: transform .4s var(--spring), box-shadow .4s var(--spring), background-color .18s, border-color .18s; }
  .tile::after { transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
  .tile:hover, .feature:hover { transform: translateY(-3px) scale(1.006); }
  .tile:hover { box-shadow: 0 2px 4px rgba(13, 27, 42, .05), 0 18px 40px -18px rgba(13, 27, 42, .3), inset 0 1px 0 rgba(255, 255, 255, .95); border-color: var(--line-2); }
  .feature:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .14); }
  .tile:hover::after { transform: translateX(70%); opacity: 1; }
  .tile:active, .feature:active, .btn:active, .xp-tab:active, .cat-nav a:active, .menu-panel a:active { transform: scale(.988); transition-duration: .09s; }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(190, 59, 25, .7); }
}

/* Icon chips on the light pages: the pricing inclusions and the security cards. */
.incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.incl li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 11px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-2); font-size: 15px; box-shadow: inset 0 1px 0 var(--glass-line); }
.incl .plan-ico { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.card-ico { width: 40px; height: 40px; border-radius: var(--r-1); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 14px; transition: transform .45s var(--spring), background-color .25s, color .25s; }
.card-ico svg { width: 20px; height: 20px; }
.card-ico + .chip { display: block; width: fit-content; }
a.card { display: block; color: inherit; }
a.card:hover .card-ico { transform: rotate(-6deg) scale(1.08); background: var(--brand); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  a.card { transition: transform .4s var(--spring), box-shadow .4s var(--spring), border-color .18s; }
  a.card:hover { transform: translateY(-3px) scale(1.006); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-line); border-color: var(--line-2); }
}

/* Connectors page: the full, categorised list. */
.page-hero { padding: 56px 0 28px; }
.page-hero h1 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -.04em; }
.page-hero .lede { max-width: 66ch; }
.cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.cat-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-hi); text-decoration: none; background: var(--bg); transition: background-color .2s, border-color .2s; }
.cat-nav a:hover { background: var(--bg-2); border-color: var(--muted); }
.cat-nav span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cats { padding-bottom: 24px; }
.cat { padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--head) + 16px); }
.cat-head { display: grid; gap: 6px; margin-bottom: 20px; max-width: 64ch; }
.cat-head h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 0; }
.cat-head p { margin: 0; color: var(--muted); }
.tiles-detail { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.tiles-detail .tile { min-height: 150px; }
.tiles-detail .tile-cat { text-wrap: balance; line-height: 1.35; }
.connector-state { display:inline-block; padding:3px 7px; border:1px solid var(--line-2); border-radius:5px; color:var(--text-hi); background:var(--bg-2); font-size:12px; line-height:1.4; font-weight:600; vertical-align:middle; }
.connector-roadmap { padding:56px 0 16px; scroll-margin-top:88px; }
.connector-preview-list { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.connector-preview-list > div { padding:18px 0; border-top:1px solid var(--line); min-width:0; }
.connector-preview-list dt { font-weight:700; margin-bottom:8px; }
.connector-preview-list dt .connector-state { margin-left:6px; }
.connector-preview-list dd { margin:0; color:var(--muted); line-height:1.65; max-width:72ch; }
.connector-plan-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.connector-plan-groups section { border-top:1px solid var(--line); padding-top:18px; }
.connector-plan-groups h3 { margin:0 0 8px; font-size:19px; }
.connector-plan-groups p { color:var(--muted); margin:0 0 14px; }
.connector-plan-groups ul { margin:0; padding-left:20px; line-height:1.9; }
.connector-plan-note { max-width:74ch; color:var(--muted); margin:32px 0 20px; }
@media (max-width:760px) { .connector-preview-list, .connector-plan-groups { grid-template-columns:minmax(0,1fr); gap:24px; } .connector-preview-list { gap:0; } }

@media (min-width: 640px) { :root { --gutter: 40px; } }

/* Theme-aware surfaces and the transition from hero to page navigation. */
/* The header overlays the same hero gradient. Scrolling gradually develops
   its slate glass surface and draws the edge out from the centre. */
.home .site-head {
  --nav-progress: 0;
  isolation: isolate;
  margin-bottom: calc(-1 * var(--head));
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.home .site-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  opacity: var(--nav-progress);
  box-shadow: 0 10px 28px -18px rgba(0,0,0,.5);
  pointer-events: none;
}
.home .site-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--navy-muted);
  opacity: calc(var(--nav-progress) * .35);
  transform: scaleX(var(--nav-progress));
  pointer-events: none;
}
@supports (backdrop-filter: blur(1px)) {
  .home .site-head::before { background: color-mix(in srgb, var(--navy) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
html:not(.js) .home .site-head { --nav-progress: 1; }
@media (prefers-reduced-transparency: reduce) { .home .site-head::before { background: var(--navy); backdrop-filter: none; -webkit-backdrop-filter: none; } }
html[data-theme="dark"] a:not(.btn, .tile, .brand, .btn-arrow, .feature, .card):hover { color: #ffc0a9; }
html[data-theme="dark"] .tile-logo { color: color-mix(in srgb, var(--c-dark, var(--c)) 65%, white); }
html[data-theme="dark"] [data-kind] { --k: #a9c5ff; --k-soft: #283d5a; }
html[data-theme="dark"] [data-kind="draft"] { --k: #8cdecf; --k-soft: #203f43; }
html[data-theme="dark"] [data-kind="pattern"] { --k: #ffd096; --k-soft: #463a2d; }
html[data-theme="dark"] [data-kind="approval"] { --k: #9bdfac; --k-soft: #244135; }
html[data-theme="dark"] [data-kind="automation"] { --k: #d2b5fa; --k-soft: #39314e; }
.boot-wrap { background: var(--panel); }
.boot-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero-frame-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 16px 24px; color: var(--muted); font-size: 14px; background: var(--bg); }
.hero-frame-foot a { font-weight: 600; }
.counter { align-content: stretch; gap: 20px; border: 1px solid #33455f; border-radius: var(--r-2); }
.counter::before { display: none; }
.connector-mark { width: 64px; height: 64px; color: var(--peach); }
.connector-mark svg { width: 100%; height: 100%; }
.counter-label { font-size: 27px; line-height: 1.2; }
.counter-sub { font-size: 16px; color: var(--navy-text); margin: 0; }
.counter-stats { margin: 0; }
.counter-stats span { text-align: left; max-width: none; }
.counter .btn-arrow { align-self: end; margin-top: 4px; }
.brain-feed li { grid-template-columns: 32px minmax(0, 1fr) auto; }
.brain-chip { white-space: normal; max-width: 100px; text-align: center; }
.brain-head { flex-wrap: wrap; }
.xp-tabs { scroll-padding-inline: 10px; }
.xp-tab { padding-inline: 12px; }
html:not(.js) .xp-stage { display: block; }
html:not(.js) .xp-panel + .xp-panel { margin-top: 48px; }
.site-foot { background: var(--bg-2); }
html[data-theme="dark"] .plan-card { background: var(--navy-2); }
.foot-bottom { align-items: baseline; row-gap: 16px; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 12px 20px; }
@media (max-width: 599px) {
 .hero-frame-foot { padding: 12px 16px; font-size: 12px; }
 .brain-feed li { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
 .brain-feed li > :is(small, .brain-chip) { grid-column: 2; justify-self: start; max-width: none; }
 .brain-feed p { font-size: 14px; }
}

/* Theme switch. site.js runs the change inside a view transition, so the old
   and new pages crossfade as one image. Browsers without it get a colour
   transition on every surface for the .45s the html carries .theming. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); mix-blend-mode: normal; }
html.theming, html.theming *, html.theming *::before, html.theming *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, fill .45s ease !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0s; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Connector intro. Static by default: a band of connector names after the
   hero. html.intro-on (set in the page head when motion is allowed) turns it
   into a sticky stage over the pinned hero, and site.js scrubs it with
   transform, opacity and filter only. Geometry is in design units (the
   LinkedIn film's 1080-wide frame), multiplied by --u, one design unit in px. */
.intro { display: flex; flex-direction: column; }
.intro-pin { order: 1; }
.intro-stage { order: 2; padding: 56px var(--gutter) 64px; text-align: center; border-bottom: 1px solid var(--line); }
.intro-bg, .intro-ring, .intro-spacer { display: none; }
.intro-title { margin: 0 auto 20px; max-width: 18ch; font: 800 var(--h2)/1.1 Manrope, "Segoe UI", sans-serif; letter-spacing: -.035em; color: var(--text-hi); text-wrap: balance; }
.intro-names { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.intro-names li { padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--text-hi); }
.intro-note { margin: 20px 0 0; font-size: 13.5px; color: var(--muted); }

html.intro-on .intro { display: block; }
.intro-on .intro-stage {
  /* Ellipse, as in the film: rx 384, ry 318, tile 128 with 34 corners, hub 166. */
  --rx: 384; --ry: 318; --tile: 128; --tr: 34; --hub: 166; --rw: 896; --rh: 764; --pin: 1.8;
  --u: min(calc((100vw - 80px) / var(--rw)), calc((100svh - var(--head) - 120px) / var(--rh)), .72px);
  position: sticky; top: 0; z-index: 2; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
  padding: var(--head) 0 0; border: 0; overflow: hidden; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
@media (max-width: 639px) {
  /* A circle and smaller tiles on phones, and a shorter pin. */
  .intro-on .intro-stage { --rx: 330; --ry: 330; --tile: 112; --tr: 30; --hub: 150; --rw: 772; --rh: 772; --pin: 1;
    --u: min(calc((100vw - 40px) / var(--rw)), calc((100svh - var(--head) - 120px) / var(--rh))); gap: 24px; }
}
.intro-on .intro-bg { display: block; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 45%, color-mix(in srgb, #d8431c 16%, transparent), transparent 70%), var(--navy); }
.intro-on .intro-ring { display: block; position: relative; flex: none; width: calc(var(--rw) * var(--u)); height: calc(var(--rh) * var(--u)); }
.intro-cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro-cables path { fill: none; stroke: url(#intro-cable); stroke-width: 3.2; stroke-linecap: round; opacity: .62; }
.intro-cables circle { fill: #fff; opacity: 0; filter: drop-shadow(0 0 6px var(--peach)); }
.intro-tile { position: absolute; z-index: 1; display: grid; place-items: center; width: calc(var(--tile) * var(--u)); height: calc(var(--tile) * var(--u));
  left: calc(50% + cos(var(--a)) * var(--rx) * var(--u) - var(--tile) * var(--u) / 2);
  top: calc(50% + sin(var(--a)) * var(--ry) * var(--u) - var(--tile) * var(--u) / 2);
  border-radius: calc(var(--tr) * var(--u)); background: #fff; box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .08); }
.intro-tile img { width: 60%; height: 60%; object-fit: contain; }
.intro-glow { position: absolute; left: 50%; top: 50%; width: calc(560 * var(--u)); height: calc(560 * var(--u)); margin: calc(-280 * var(--u)) 0 0 calc(-280 * var(--u)); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #d8431c 50%, transparent), color-mix(in srgb, #d8431c 16%, transparent) 55%, transparent); opacity: .75; }
.intro-mark { position: absolute; z-index: 2; left: 50%; top: 50%; width: calc(var(--hub) * var(--u)); height: calc(var(--hub) * var(--u)); margin: calc(var(--hub) * var(--u) / -2) 0 0 calc(var(--hub) * var(--u) / -2); transform-origin: 50% 50%; }
.intro-mark::before { content: ""; position: absolute; inset: 0; border-radius: 28.6%; box-shadow: 0 calc(26 * var(--u)) calc(56 * var(--u)) rgba(0, 0, 0, .45); opacity: var(--shade, 1); }
.intro-mark svg { position: relative; display: block; width: 100%; height: 100%; }
.intro-mark-solid { opacity: 0; }
.intro-on .intro-mark { cursor: pointer; }
/* The ring stands alone; the ownership line is a caption on the bottom edge. */
.intro-on .intro-copy { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; padding-inline: var(--gutter); }
.intro-on :is(.intro-title, .intro-names) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.intro-on .intro-note { margin: 0; color: var(--navy-muted); }
.intro-on .intro-pin { position: sticky; top: 0; z-index: 1; }
.intro-on .intro-spacer { display: block; height: calc(var(--pin, 1.8) * 100svh); }
@media (max-width: 639px) { .intro-on .intro-spacer { height: 100svh; } }
/* The screenshot starts hidden behind the stage; site.js phases it in. */
.intro-on .hero2-frame { opacity: 0; filter: blur(10px); transform: scale(1.04); will-change: transform, opacity, filter; }
.intro-on.intro-ready .hero2-frame.intro-settled { will-change: auto; }
/* Hovering a tile lifts its logo, rims the tile and lights its cable (site.js
   also sends a pulse down it). The tile itself is never transitioned, because
   site.js drives its transform while the ring retracts. */
.intro-cables path { transition: opacity .3s var(--ease-out); }
.intro-cables path.is-lit { opacity: .95; }
@media (hover: hover) {
  .intro-tile img { transition: transform .35s var(--ease-out); }
  .intro-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px color-mix(in srgb, var(--peach) 75%, transparent), 0 0 calc(40 * var(--u)) color-mix(in srgb, #d8431c 45%, transparent); opacity: 0; transition: opacity .3s var(--ease-out); pointer-events: none; }
  .intro-tile:hover img { transform: scale(1.08); }
  .intro-tile:hover::after { opacity: 1; }
}

/* AI walkthrough, bolder. The stages read as one loading rule across the top,
   each stage opens on an outlined numeral, and each example is a lit navy card
   with layered edges. Same tokens as the rest of the site; scoped to .ai-story. */
.ai-story { background: var(--bg-2); }
.ai-story-tabs { gap: 14px; margin: 18px 0 26px; }
.ai-story-tabs button { padding: 0 0 26px; border: 0; font: 800 clamp(14px, 1.7vw, 22px)/1.2 Manrope, sans-serif; letter-spacing: -.02em; color: var(--muted); }
.ai-story-tabs button span { display: block; margin: 0 0 6px; font: 700 12px/1 "Segoe UI", sans-serif; letter-spacing: .08em; color: inherit; }
.ai-story-tabs button[aria-selected="true"] { color: var(--text-hi); }
.ai-story-tabs button[aria-selected="true"] span { color: var(--accent-ink); }
.ai-story-tabs button::before, .ai-story-tabs button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 14px; -webkit-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 7px); mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 7px); }
.ai-story-tabs button::before { right: 0; background: var(--line-2); opacity: .7; }
.ai-story-tabs button::after { width: calc(var(--fill, 0) * 100%); height: 14px; background: linear-gradient(90deg, #d8431c, #f7a325); }
.ai-story-panels { counter-reset: stage; }
.ai-story-panel { counter-increment: stage; }
.ai-story-copy::before { content: counter(stage, decimal-leading-zero); display: block; margin: 0 0 10px -.04em; font: 800 clamp(72px, 9vw, 132px)/.85 Manrope, sans-serif; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, #d8431c 70%, transparent); }
.ai-story-copy h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.035em; max-width: 14ch; }
.ai-story .flow-demo {
  --panel: #1b2a3f; --muted: #a9b9cc; --line: rgba(255, 255, 255, .1); --accent-ink: #ffac8d; --ok: #6fd28f; --accent-soft: #d8431c;
  position: relative; color: #e0e1dd; background: linear-gradient(160deg, #1f2e44, #0f1b2b); border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px;
  box-shadow: 0 -12px 0 -7px rgba(27, 38, 59, .16), 0 -24px 0 -14px rgba(27, 38, 59, .09), 0 46px 90px -34px rgba(13, 27, 42, .65), 0 26px 50px -26px rgba(13, 27, 42, .7);
}
.ai-story .flow-demo :is(h3, strong) { color: #fff; }
.ai-story .flow-symbol { color: #e0e1dd; background: rgba(255, 255, 255, .08); border-radius: 10px; }
.ai-story .flow-canvas { gap: 0; }
.ai-story .flow-message { padding: 18px 20px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 14px; }
.ai-story .flow-message h3 { font-size: clamp(19px, 1.9vw, 25px); line-height: 1.2; letter-spacing: -.02em; }
.ai-story .flow-label { color: var(--accent-ink); font-weight: 700; letter-spacing: .04em; }
.ai-story .flow-connector svg { width: 22px; height: 22px; color: #7f90a8; }
.ai-story .flow-fields { border: 0; padding: 2px 16px; border-radius: 14px; }
.ai-story .flow-fields > div, .ai-story .flow-fields > div + div { padding: 12px 0; background: none; border: 0; border-radius: 0; }
.ai-story .flow-fields > div + div { border-top: 1px solid var(--line); }
.ai-story .flow-fields em { padding: 0; font-weight: 600; color: #c4b5fd; background: none; }
.ai-story .flow-sources > div { padding: 8px 12px; color: #e0e1dd; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 999px; }
.ai-story .flow-draft { padding: 16px 18px; border-radius: 14px; }
.ai-story .flow-draft-head span { padding: 0 5px; color: #fff; background: #7c3aed; border-radius: 4px; font-size: 11px; font-weight: 600; }
.ai-story :is(.flow-result, .flow-approval, .flow-resolved, .flow-knowledge) { padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(111, 210, 143, .1); }
.ai-story .flow-approval { background: color-mix(in srgb, #d8431c 20%, transparent); }
.ai-story .flow-knowledge { background: rgba(255, 255, 255, .05); }
.ai-story .flow-result { margin-top: 16px; }
.ai-story .flow-caption { color: #a9b9cc; }
.ai-story .flow-replay { color: #ffac8d; }
@media (max-width: 639px) {
  .ai-story-tabs { gap: 6px; }
  .ai-story-tabs button { padding-bottom: 20px; }
  .ai-story-tabs button::before, .ai-story-tabs button::after { height: 10px; }
  .ai-story-copy::before { font-size: 64px; }
}

/* The application's AI border (.sb-ai-card in apps/web globals.css), used the way
   the app uses it: one quiet card per stage marks what the model produced (the
   suggested fields, the drafted reply, the wrap-up note) and everything else
   stays plain. The border fades in after the item lands, then turns slowly. */
@property --ai-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --ai-a { syntax: '<number>'; initial-value: 1; inherits: false; }
@keyframes ai-turn { to { --ai-angle: 360deg; } }
@keyframes ai-fade { from { --ai-a: 0; } to { --ai-a: 1; } }
.ai-story .ai-story-panel :is(.flow-fields, .flow-draft, #story-panel-3 .flow-message) {
  --ai-face: #111c2f;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ai-face), var(--ai-face)) padding-box,
    conic-gradient(from var(--ai-angle), rgb(242 84 45 / calc(.9 * var(--ai-a))), rgb(56 189 248 / calc(.7 * var(--ai-a))), rgb(167 139 250 / calc(.9 * var(--ai-a))), rgb(242 84 45 / calc(.9 * var(--ai-a)))) border-box;
}
@media (prefers-reduced-motion: no-preference) {
  .ai-story .ai-story-panel.is-active .flow-running :is(.flow-fields, .flow-draft) {
    --ai-d: 1000ms;
    animation-name: ai-turn, ai-fade; animation-duration: 6s, 1s; animation-timing-function: linear, ease-out;
    animation-delay: 0s, var(--ai-d); animation-iteration-count: infinite, 1; animation-fill-mode: none, both;
  }
  .ai-story #story-panel-3.is-active .flow-running .flow-message {
    --ai-d: 1400ms;
    animation-name: flow-arrive, ai-turn, ai-fade; animation-duration: .35s, 6s, 1s; animation-timing-function: cubic-bezier(.16, 1, .3, 1), linear, ease-out;
    animation-delay: calc(var(--beat, 0ms) * .5), 0s, 1400ms; animation-iteration-count: 1, infinite, 1; animation-fill-mode: both, none, both;
  }
  .ai-story .ai-story-panel.is-active .flow-running .flow-draft { --ai-d: 1100ms; }
}

/* Primary buttons: a sheen crosses the button once on hover or keyboard focus. */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .34) 50%, transparent 64%); transform: translateX(-130%); }
  .btn-primary:is(:hover, :focus-visible)::after { transform: translateX(130%); transition: transform .75s cubic-bezier(.16, 1, .3, 1); }
}

/* "Your school IT, working together": the areas become a navy rail beside the
   light stage on desktop, in the manner of a long editorial list with one row lit.
   Below 960px the tabs stay the horizontal strip they were. */
@media (min-width: 960px) {
  .js .xp { display: grid; grid-template-columns: clamp(196px, 18vw, 244px) minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .js .xp-tabs { grid-column: 1; grid-row: 1 / -1; }
  .js .xp-stage { grid-column: 2; grid-row: 1; }
  .js .xp-playback { grid-column: 2; grid-row: 2; justify-self: end; margin: 0 18px 14px 0; }
  .js .xp-tabs { flex-direction: column; gap: 2px; padding: 14px; overflow: visible; border-bottom: 0; background: var(--navy); }
  .js .xp-tab { justify-content: flex-start; flex: none; gap: 14px; padding: 14px 14px 20px; color: var(--navy-muted); font: 800 17px/1.2 Manrope, sans-serif; letter-spacing: -.01em; border-radius: 12px; }
  .js .xp-tab svg { width: 20px; height: 20px; flex: none; }
  .js .xp-tab:hover { color: #fff; background: rgba(255, 255, 255, .05); }
  .js .xp-tab[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: none; }
  .js .xp-tab[aria-selected="true"] svg { color: var(--peach); }
  .js .xp-tab .xp-bar { left: 14px; right: 14px; bottom: 9px; background: rgba(255, 255, 255, .16); }
  .js .xp-tab .xp-bar::after { background: var(--peach); }
  .js .xp-panel { grid-template-columns: 1fr; gap: 30px; }
}
@media (min-width: 1200px) { .js .xp-panel { grid-template-columns: .9fr 1.1fr; gap: 40px; } }
.explorer .wrap:not(.explorer-head) { max-width: 1320px; }

/* "More of your day, in one place": a bento. Widths vary, hairline cards sit on a
   faint dot grid, and the AI card is the one filled with the brand colour. */
.module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.module-card:nth-child(4) { grid-column: span 2; }
@media (max-width: 639px) { .module-grid { grid-template-columns: minmax(0, 1fr); } .module-card:nth-child(4) { grid-column: auto; } }
@media (min-width: 1024px) {
  .module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .module-card:is(:nth-child(1), :nth-child(4), :nth-child(7), :nth-child(8)) { grid-column: span 2; }
}
.module-front, .module-back { min-height: 300px; border-color: #2b3c55; border-radius: 18px; }
.module-front {
  background: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px) 0 0 / 20px 20px, linear-gradient(165deg, #1f3047, #17253a);
  transition: border-color .3s var(--ease-out);
}
.module-card:not([data-flipped]):hover .module-front { border-color: color-mix(in srgb, var(--peach) 45%, transparent); }
.feature-ico { width: 52px; height: 52px; margin-bottom: auto; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.module-title { margin-top: 28px; font-size: 22px; letter-spacing: -.02em; }
.module-card:nth-child(4) .module-front { background: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.2px) 0 0 / 20px 20px, linear-gradient(150deg, #d8431c, #9e3013); border-color: color-mix(in srgb, var(--peach) 40%, transparent); }
.module-card:nth-child(4) :is(.feature-ico) { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); }
.module-card:nth-child(4) .module-description { color: #fff; }
.module-card:nth-child(4):not([data-flipped]) .module-toggle { color: #fff; }

/* The moving parts of the intro get their own layers. */
.intro-on :is(.intro-tile, .intro-mark, .intro-glow, .intro-bg, .intro-copy) { will-change: transform, opacity; }

/* "Your school IT, working together": each area opens on an outlined numeral, the
   stage sits on a faint dot grid with a soft wash, and the worked examples are
   dark cards against it. */
.xp { background: radial-gradient(color-mix(in srgb, var(--line-2) 70%, transparent) 1px, transparent 1.3px) 0 0 / 22px 22px, var(--panel); }
.xp-stage { counter-reset: area; }
.xp-panel { counter-increment: area; align-self: start; }
.js .xp-copy h3 { margin-top: 0; }
.xp-copy::before { content: counter(area, decimal-leading-zero); display: block; margin: 0 0 6px -.04em; font: 800 clamp(44px, 4.4vw, 60px)/.9 Manrope, sans-serif; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.6px color-mix(in srgb, #d8431c 65%, transparent); }
.xp .flow-demo {
  --panel: #1b2a3f; --muted: #a9b9cc; --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .16); --text-hi: #fff; --accent-ink: #ffac8d; --accent-soft: rgba(216, 67, 28, .24); --ok: #6fd28f;
  color: #e0e1dd; background: linear-gradient(160deg, #1f2e44, #0f1b2b); border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px;
  box-shadow: 0 -12px 0 -7px rgba(27, 38, 59, .14), 0 -24px 0 -14px rgba(27, 38, 59, .08), 0 40px 70px -34px rgba(13, 27, 42, .6);
}
.xp .flow-demo :is(h3, strong) { color: #fff; }
.xp .flow-demo .flow-symbol { color: #e0e1dd; background: rgba(255, 255, 255, .08); }
.xp .flow-demo .home-flow-mark { border-color: rgba(255, 172, 141, .3); }
.xp .flow-demo .home-flow-feed li:not(:last-child)::after { background: rgba(255, 255, 255, .16); }
.xp .flow-demo .home-flow-state { color: #ffcab6; }
.xp .flow-demo .flow-replay { color: #ffac8d; }

/* Desktop: the card keeps one size on every tab and fits a laptop screen. */
@media (min-width: 960px) {
  .js .xp-stage { --stage-pad: clamp(20px, 2.6vw, 32px); }
  .js .xp-copy h3 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 8px; }
  .js .xp-sub { font-size: 15.5px; margin-bottom: 14px; }
  .js .xp-lines { gap: 2px; }
  .js .xp-lines li { padding: 7px 10px; }
  .js .xp-copy .small { margin-top: 12px; }
  .js .xp-panel { gap: 24px; }
  .js .home-flow .flow-canvas, .js .xp .flow-canvas { min-height: 0; }
}
@media (min-width: 960px) {
  .js .xp-copy::before { font-size: clamp(38px, 3.6vw, 48px); margin-bottom: 2px; }
  .js .xp-lines p { font-size: 13.5px; line-height: 1.45; }
  .js .xp-lines b { font-size: 15px; }
  .js .xp-lines li { padding: 5px 8px; gap: 10px; }
  .js .home-flow .flow-canvas { padding: 6px 20px 10px; }
  .js .home-flow-feed li { padding: 10px 0; }
  .js .home-flow-feed p { font-size: 12.5px; line-height: 1.45; }
  .js .home-flow-intro { margin: 2px 0 4px; }
  .js .home-flow-feed li:not(:last-child)::after { top: 48px; bottom: -10px; }
}

/* Module cards, tightened: faces size to their content, the back is compact, and
   the wide cards lay their content out in a row so neither face leaves a void. */
.module-front, .module-back { min-height: 236px; padding: 24px; }
.feature-ico { width: 46px; height: 46px; border-radius: 13px; }
.module-title { margin-top: 20px; font-size: 20px; }
.module-description { font-size: 15px; line-height: 1.55; }
.module-back h3 { font-size: 15px; margin: 0 0 12px; color: var(--peach); }
.module-back ul { margin: 0 0 14px; font-size: 14.5px; line-height: 1.45; }
.module-back li + li { margin-top: 8px; }
.module-back a { font-size: 14px; }
@media (min-width: 1024px) {
  .module-card:is(:nth-child(1), :nth-child(4), :nth-child(7), :nth-child(8)) .module-front { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico title" "ico desc"; column-gap: 24px; align-content: center; align-items: center; }
  .module-card:is(:nth-child(1), :nth-child(4), :nth-child(7), :nth-child(8)) .feature-ico { grid-area: ico; margin: 0; width: 64px; height: 64px; border-radius: 18px; }
  .module-card:is(:nth-child(1), :nth-child(4), :nth-child(7), :nth-child(8)) .module-title { grid-area: title; margin: 0 0 6px; align-self: end; font-size: 22px; }
  .module-card:is(:nth-child(1), :nth-child(4), :nth-child(7), :nth-child(8)) .module-description { grid-area: desc; max-width: 46ch; align-self: start; }
  .module-card:is(:nth-child(1), :nth-child(4), :nth-child(7), :nth-child(8)) .module-back ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .module-card:is(:nth-child(1), :nth-child(4), :nth-child(7), :nth-child(8)) .module-back li + li { margin-top: 0; }
  .module-card:is(:nth-child(1), :nth-child(4), :nth-child(7), :nth-child(8)) .module-back { justify-content: center; }
}
@media (min-width: 1024px) {
  .module-card:is(:nth-child(1), :nth-child(4), :nth-child(7), :nth-child(8)) .module-back a { margin-top: 18px; }
}

/* Explorer icons arrive with a little life: the tile pops with a slight overshoot
   while its glyph draws, staggered down the list; the example card's icons draw as
   each step lands. */
@keyframes ico-pop { from { opacity: 0; transform: scale(.45) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.12) rotate(3deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .xp-panel[data-active] .xp-li-ico { animation: ico-pop .65s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(.2s + var(--i, 0) * .08s); }
  .js .xp-panel[data-active] .xp-li-ico svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .8s var(--ease-out) forwards; animation-delay: calc(.4s + var(--i, 0) * .08s); }
  .js [data-active] .flow-running .home-flow-mark svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .7s var(--ease-out) forwards; animation-delay: calc(var(--beat, 0ms) + 260ms); }
}

/* "Explore connectors": on hover the pill fills with ember from the left, the
   chip turns white, and the arrow hands over to a second arrow sliding in. */
.btn-arrow { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(var(--brand), var(--brand)) left / 0% 100% no-repeat; transition: background-size .5s cubic-bezier(.16, 1, .3, 1), border-color .25s; }
.btn-arrow i { position: relative; overflow: hidden; transition: background-color .3s, color .3s, transform .45s var(--spring); }
.btn-arrow i svg { position: absolute; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.btn-arrow i svg:last-child { transform: translateX(-160%); }
.btn-arrow:is(:hover, :focus-visible) { background: linear-gradient(var(--brand), var(--brand)) left / 100% 100% no-repeat; border-color: var(--brand); }
.btn-arrow:is(:hover, :focus-visible) i { background: #fff; color: var(--brand); }
.btn-arrow:is(:hover, :focus-visible) i svg:first-child { transform: translateX(160%); }
.btn-arrow:is(:hover, :focus-visible) i svg:last-child { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btn-arrow, .btn-arrow i svg { transition: none; }
}

/* "Connect your school": the three groups are rows with icon tiles; hovering or focusing
   one lights its connector tiles and dims the rest. */
.counter { background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px) 0 0 / 20px 20px, var(--navy); }
.counter-stats { display: grid; gap: 6px; border-top: 0; margin-top: 4px; }
.counter-stats li { justify-content: flex-start; align-items: center; gap: 14px; padding: 10px 12px; margin-inline: -12px; border: 1px solid transparent; border-radius: 14px; color: var(--navy-text); font-size: 15px; font-weight: 600; cursor: default; transition: background-color .25s, border-color .25s; }
.counter-stats li::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .4; transition: transform .35s var(--ease-out), opacity .25s; }
.cs-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; color: var(--peach); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); transition: background-color .25s, color .25s, transform .4s var(--spring); }
.cs-ico svg { width: 20px; height: 20px; }
.counter-stats li:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); outline: 0; }
.counter-stats li:is(:hover, :focus-visible) .cs-ico { background: var(--brand); color: #fff; transform: rotate(-6deg) scale(1.06); }
.counter-stats li:is(:hover, :focus-visible)::after { opacity: 1; transform: translateX(3px) rotate(45deg); }
.counter-note { margin: 4px 0 0; font-size: 13.5px; color: var(--navy-muted); }
.counter-note a { color: var(--peach); }
.tiles-featured .tile { transition: opacity .3s var(--ease-out), border-color .25s, background-color .25s; }
.wall-grid:has(.counter-stats [data-g]:is(:hover, :focus-visible)) .tile { opacity: .32; }
.wall-grid:has(.counter-stats [data-g="people"]:is(:hover, :focus-visible)) .tile[data-g="people"],
.wall-grid:has(.counter-stats [data-g="devices"]:is(:hover, :focus-visible)) .tile[data-g="devices"],
.wall-grid:has(.counter-stats [data-g="infra"]:is(:hover, :focus-visible)) .tile[data-g="infra"] { opacity: 1; border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
@media (min-width: 960px) {
  .js .xp-tabs { padding: 12px; gap: 1px; }
  .js .xp-tab { padding: 12px 14px 18px; font-size: 16px; }
}

/* One accent per area, used sparingly: a tint across the stage, the numeral, the icon
   tiles, the lit tab and a top edge on the example card. Everything else stays calm. */
.xp-panel { --ac-ink: color-mix(in srgb, var(--ac, #e2552d) 72%, #000); }
html[data-theme="dark"] .xp-panel { --ac-ink: color-mix(in srgb, var(--ac, #e2552d) 68%, #fff); }
.xp-copy::before { -webkit-text-stroke-color: color-mix(in srgb, var(--ac, #e2552d) 75%, transparent); }
.xp-li-ico { background: color-mix(in srgb, var(--ac, #e2552d) 15%, var(--panel)); color: var(--ac-ink); }
@media (min-width: 960px) {
  .js .xp-panel { position: relative; isolation: isolate; }
  .js .xp-panel::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--stage-pad) * -1); pointer-events: none;
    background: radial-gradient(60% 62% at 80% 36%, color-mix(in srgb, var(--ac) 20%, transparent), transparent 72%), linear-gradient(140deg, color-mix(in srgb, var(--ac) 9%, transparent), transparent 52%); }
  .js .xp-tab { --ac-on: color-mix(in srgb, var(--ac, #e2552d) 60%, #fff); }
  .js .xp-tab[aria-selected="true"] { background: color-mix(in srgb, var(--ac, #e2552d) 24%, transparent); }
  .js .xp-tab[aria-selected="true"] svg { color: var(--ac-on); }
  .js .xp-tab .xp-bar::after { background: var(--ac-on); }
}
.xp .flow-demo { border-top: 2px solid var(--ac, #e2552d); --accent-ink: color-mix(in srgb, var(--ac, #e2552d) 55%, #fff); --accent-soft: color-mix(in srgb, var(--ac, #e2552d) 26%, transparent); }
.xp .flow-demo .home-flow-mark { border-color: color-mix(in srgb, var(--ac, #e2552d) 40%, transparent); }
.xp .flow-demo .home-flow-state { color: color-mix(in srgb, var(--ac, #e2552d) 40%, #fff); }
@media (min-width: 960px) { .js .xp-copy::before { margin-bottom: 14px; } .js .xp-copy h3 { margin-top: 0; } }
.xp-copy::before { margin-bottom: 12px; }
/* Two accents only: ember for every area, violet for AI (the application's AI colour). */
.xp-tab, .xp-panel { --ac: #e2552d; }
#tab-assistant, #panel-assistant { --ac: #8b5cf6; }

/* "Less sorting. Less chasing. More work resolved.": a timeline that fills as you scroll,
   in the AI colour. Each step lights when the fill reaches it; its icon draws in. */
.ls-line { display: block; }
.ai-workflow-steps { --ai: #8b5cf6; --ai-ink: color-mix(in srgb, #8b5cf6 72%, #000); }
html[data-theme="dark"] .ai-workflow-steps { --ai-ink: color-mix(in srgb, #8b5cf6 62%, #fff); }
.ai-workflow-steps li::before { content: ""; position: absolute; left: 23px; top: 68px; bottom: -20px; width: 2px; z-index: 0; background: linear-gradient(var(--ai), color-mix(in srgb, var(--ai) 35%, transparent)); transform-origin: top; }
.ai-workflow-steps li:first-child::before { top: 48px; }
.ai-workflow-steps li:last-child::before { display: none; }
.ai-workflow-steps.ls-js li::before { transform: scaleY(var(--f, 0)); }
.ai-workflow-steps.ls-js li > div { opacity: .38; transform: translateX(-6px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.ai-workflow-steps.ls-js li.is-lit > div { opacity: 1; transform: none; }
.ai-workflow-steps.ls-js .ai-step-number { transition: background-color .4s, border-color .4s, color .4s, box-shadow .5s; }
.ai-workflow-steps.ls-js li:not(.is-lit) .ai-step-number { color: var(--muted); border-color: var(--line-2); }
.ai-workflow-steps li.is-lit .ai-step-number, .ai-workflow-steps:not(.ls-js) .ai-step-number { color: var(--ai-ink); border-color: var(--ai); background: color-mix(in srgb, var(--ai) 13%, var(--panel)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ai) 12%, transparent); }
@keyframes ls-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ai) 45%, transparent); } to { box-shadow: 0 0 0 16px transparent; } }
@keyframes ls-rise { from { opacity: 0; transform: translateY(.45em); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -.2em 0); } }
@keyframes ls-underline { to { background-size: 100% .09em; } }
@keyframes ls-dim { to { opacity: .55; } }
@media (prefers-reduced-motion: no-preference) {
  .ai-workflow-steps li.is-lit .ai-step-number { animation: ls-ring .9s var(--ease-out) 1; }
  .ai-workflow-steps.ls-js li:not(.is-lit) .ai-step-number svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .ai-workflow-steps.ls-js li.is-lit .ai-step-number svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .8s var(--ease-out) .12s forwards; }
  .ai-workflow-copy.ls-js .ls-line { opacity: 0; }
  .ai-workflow-copy.ls-in .ls-line { animation: ls-rise .8s var(--ease-out) both; }
  .ai-workflow-copy.ls-in .ls-line:not(.em) { animation: ls-rise .8s var(--ease-out) both, ls-dim .6s ease-out 1.1s forwards; }
  .ai-workflow-copy.ls-in .ls-line:nth-child(2) { animation-delay: .14s, 1.1s; }
  .ai-workflow-copy.ls-in .ls-line.em { width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0% .09em no-repeat; padding-bottom: .08em; animation: ls-rise .8s var(--ease-out) .28s both, ls-underline .9s var(--ease-out) 1s forwards; }
}

/* Pricing: the trial badge counts up and catches the light; the plan's icons pop and draw in. */
.plan-badge { position: relative; overflow: hidden; }
.plan-days { display: inline-block; min-width: 1.15em; text-align: right; font-variant-numeric: tabular-nums; }
@keyframes plan-sheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@media (prefers-reduced-motion: no-preference) {
  .plan-badge::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .7) 50%, transparent 64%); transform: translateX(-130%); }
  .js .plan-card.in .plan-badge::after { animation: plan-sheen 1.1s cubic-bezier(.16, 1, .3, 1) 1.5s 1 both; }
  .js .plan-list.seen .plan-ico { animation: ico-pop .7s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(.15s + var(--i, 0) * .09s); }
  .js .plan-list .plan-ico svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .plan-list.seen .plan-ico svg :is(path, circle, rect, line, polyline, polygon, ellipse) { animation: draw .9s var(--ease-out) forwards; animation-delay: calc(.3s + var(--i, 0) * .09s); }
  .js [data-reveal].in .plan-trial svg { animation: ico-pop .7s cubic-bezier(.34, 1.4, .64, 1) .35s backwards; }
}

/* FAQ: the heading and a prompt sit in a sticky left column; the questions are one calm
   column of rows. Each row's round button turns ember when open and the row lifts into a
   card. Answers open and close with a real height animation (see site.js). */
.faq2 .faq-wrap { display: grid; gap: 32px; }
.faq-head h2 { text-align: left; margin: 0 0 14px; max-width: 12ch; }
.faq-head p { margin: 0 0 22px; font-size: 16.5px; color: var(--muted); max-width: 34ch; }
@media (min-width: 960px) {
  .faq2 .faq-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 72px; align-items: start; }
  .faq-head { position: sticky; top: calc(var(--head) + 28px); }
}
.faq2 .faq-cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.faq-cols details { padding: 0 22px; border-radius: 18px; box-shadow: none; transition: border-color .3s, background-color .3s, box-shadow .4s var(--ease-out); }
.faq-cols summary { padding: 20px 0; gap: 20px; align-items: center; font: 700 18px/1.35 Manrope, "Segoe UI", sans-serif; letter-spacing: -.01em; transition: color .25s; }
.faq-cols summary:focus-visible { outline-offset: 6px; border-radius: 12px; }
.faq-cols details:hover { border-color: var(--line-2); }
.faq-cols details[open]:not(.is-closing) { background: var(--panel); border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); box-shadow: 0 18px 40px -26px rgba(13, 27, 42, .35); }
.faq-cols details[open]:not(.is-closing) > summary { color: var(--accent-ink); }
.faq-cols summary::after {
  content: ""; flex: none; width: 36px; height: 36px; margin: 0; border: 0; border-radius: 50%; color: var(--text-hi);
  background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat, var(--bg-2);
  transform: none; transition: background-size .35s var(--ease-out), background-color .3s, color .3s, transform .45s var(--ease-out);
}
.faq-cols details:hover > summary:hover::after, .faq-cols details > summary:focus-visible::after { background-color: color-mix(in srgb, var(--brand) 14%, var(--bg-2)); }
.faq-cols details[open]:not(.is-closing) > summary::after { content: ""; color: #fff; transform: rotate(180deg); background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 0 no-repeat, var(--brand); }
.faq-body { overflow: hidden; }
.faq-body-in { padding: 0 0 22px; }
.faq-body-in > p, .faq-body-in > ul { margin: 0; padding: 0; max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .faq-cols summary::after { transition: none; } }
.js .faq2 .faq-cols[data-reveal-group] > details { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), border-color .3s, background-color .3s, box-shadow .4s var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger, .06s)), calc(var(--i, 0) * var(--stagger, .06s)), 0s, 0s, 0s; }

/* ---- Pricing: the hero price is a lit navy card ---- */
.price-card { position: relative; overflow: hidden; display: grid; gap: 6px; justify-items: start; padding: 28px 30px 24px; color: var(--navy-text); background: var(--navy); border: 1px solid #33455f; border-radius: var(--r-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -36px rgba(13, 27, 42, .55); }
.price-card::before { content: ""; position: absolute; right: -110px; top: -130px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #d8431c 34%, transparent), transparent); pointer-events: none; }
.price-card > * { position: relative; }
.price-card .price { color: #fff; }
.price-card .price-unit, .price-card .price-sub { color: var(--navy-muted); }
.price-card .price-block { margin-top: 12px; }
.price-points { width: 100%; margin: 14px 0 0; padding: 16px 0 0; list-style: none; display: grid; gap: 10px; border-top: 1px solid #2b3a52; }
.price-points li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.price-points svg { flex: none; box-sizing: content-box; width: 16px; height: 16px; padding: 4px; border-radius: 50%; color: #fff; background: var(--brand); }
.price-fine { margin: 6px 0 0; font-size: 13px; color: var(--navy-muted); }
@media (prefers-reduced-motion: no-preference) {
  .js .price-card.in .plan-badge::after { animation: plan-sheen 1.1s cubic-bezier(.16, 1, .3, 1) 1.2s 1 both; }
  .js .price-card .price-points svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .price-card.in .price-points li { animation: rise .5s var(--ease-out) both; animation-delay: calc(.4s + var(--k, 0) * .08s); }
  .js .price-card.in .price-points svg path { animation: draw .6s var(--ease-out) forwards; animation-delay: calc(.6s + var(--k, 0) * .08s); }
}
.price-points li:nth-child(1) { --k: 0; } .price-points li:nth-child(2) { --k: 1; } .price-points li:nth-child(3) { --k: 2; }
.price-points li:nth-child(4) { --k: 3; } .price-points li:nth-child(5) { --k: 4; }

/* ---- Pricing: calculator with sliders, a sticky receipt and a total that glides ---- */
.calc .field input.rng[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; max-width: 380px; min-height: 0; height: 6px; margin: 10px 0 4px; padding: 0; border: 0; border-radius: 999px; box-shadow: none; outline: 0; cursor: pointer; background: linear-gradient(90deg, var(--brand) var(--p, 0%), var(--line-2) var(--p, 0%)); }
.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 2px 8px rgba(13, 27, 42, .25); transition: transform .2s var(--ease-out); }
.rng::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 2px 8px rgba(13, 27, 42, .25); }
.rng:is(:hover, :active)::-webkit-slider-thumb { transform: scale(1.14); }
.calc .field input.rng[type="range"]:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 8px; box-shadow: none; }
.hint-save { color: var(--accent-ink); font-weight: 600; }
.hint-save:empty { display: none; }
@media (min-width: 860px) { .calc .card { position: sticky; top: calc(var(--head) + 20px); align-self: start; } }
@keyframes receipt-flash { from { background: color-mix(in srgb, var(--brand) 18%, transparent); } to { background: transparent; } }
.receipt li.flash { animation: receipt-flash 1s var(--ease-out); }
@keyframes calc-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); } to { box-shadow: 0 0 0 18px transparent; } }
.calc .card.pulse { animation: calc-pulse .9s var(--ease-out); }

/* ---- Pricing: worked examples load into the calculator ---- */
.examples th:nth-last-child(3), .examples td:nth-last-child(3) { text-align: right; white-space: nowrap; }
.examples td:last-child { font-weight: 400; }
.examples tbody tr { transition: background-color .25s; }
.examples tbody tr:is(:hover, .is-loaded) { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.examples .try { padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--accent-ink); background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.examples .try:hover { border-color: var(--brand); background: var(--accent-soft); }
.examples tr.is-loaded .try { color: #fff; background: var(--brand); border-color: var(--brand); }

/* ---- Pricing: what's included, icons pop and draw like the homepage ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .incl .plan-ico svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .incl.seen .plan-ico { animation: ico-pop .7s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(.12s + var(--i, 0) * .07s); }
  .js .incl.seen .plan-ico svg :is(path, circle, rect, line, polyline, polygon, ellipse) { animation: draw .9s var(--ease-out) forwards; animation-delay: calc(.27s + var(--i, 0) * .07s); }
}

/* ---- FAQ on pricing and compare: the shared component, on the page background ---- */
.faq2.faq-plain { background: var(--bg); border-top: 0; }
.faq2.faq-plain .faq-head h2 { max-width: 14ch; }

/* ---- Compare: where Plugboard differs, a highlighted column, sticky header, grouped rows ---- */
.diff { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
@media (min-width: 860px) { .diff { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.diff li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 16px 18px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: var(--r-2); }
.diff svg { box-sizing: border-box; width: 30px; height: 30px; padding: 7px; border-radius: 50%; color: var(--accent-ink); background: var(--accent-soft); }
.diff b { display: block; margin-bottom: 2px; font: 700 16px/1.3 Manrope, "Segoe UI", sans-serif; color: var(--text-hi); }
.diff p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.scroller { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-3); }
@media (min-width: 1100px) { .scroller { overflow: clip; } }
.matrix { min-width: 760px; }
.matrix thead th { position: sticky; top: var(--head); z-index: 3; padding-block: 16px; background: var(--panel); box-shadow: 0 1px 0 var(--line-2); }
.matrix thead th:nth-child(2) { color: var(--accent-ink); box-shadow: inset 0 3px 0 var(--brand), 0 1px 0 var(--line-2); }
.matrix tbody tr:nth-child(odd) { background: transparent; }
.matrix tbody tr:not(.group) { transition: background-color .25s; }
.matrix tbody tr:not(.group):hover { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.matrix :is(td, th):nth-child(2) { background: color-mix(in srgb, var(--brand) 7%, var(--panel)); }
.matrix thead th:nth-child(2) { background: color-mix(in srgb, var(--brand) 10%, var(--panel)); }
.matrix tr.group th { padding: 24px 12px 8px; text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: transparent; border-bottom: 1px solid var(--line-2); }
.cap-unknown { background: transparent; border-color: transparent; color: var(--muted); opacity: .55; font-weight: 600; }
@media (max-width: 1099px) { .matrix tbody th[scope="row"], .matrix thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--panel); } }
@media (prefers-reduced-motion: no-preference) {
  .js .matrix tbody.in .cap-yes { animation: ico-pop .5s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(.25s + var(--i, 0) * .035s); }
  .js .diff.seen li svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .6s var(--ease-out) forwards; animation-delay: calc(.4s + var(--i, 0) * .1s); }
}

/* ---- Compare: one cracked screen, two ways ---- */
.vs .card li:nth-child(1) { --k: 0; } .vs .card li:nth-child(2) { --k: 1; } .vs .card li:nth-child(3) { --k: 2; }
.vs .card li:nth-child(4) { --k: 3; } .vs .card li:nth-child(5) { --k: 4; } .vs .card li:nth-child(6) { --k: 5; }
.vs .pb { box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--brand) 60%, transparent); }
@keyframes vs-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes vs-tick { from { opacity: 0; transform: scale(0); } 60% { transform: scale(1.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .js .vs.in .card li { animation: vs-in .5s var(--ease-out) backwards; animation-delay: calc(.25s + var(--k, 0) * .09s); }
  .js .vs.in .pb li { animation-delay: calc(.9s + var(--k, 0) * .12s); }
  .js .vs.in .pb li::before { animation: vs-tick .45s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(1s + var(--k, 0) * .12s); }
}

/* ---- Compare: a navy hero where four tools fold into one desk ---- */
.cmp-hero { padding-block: clamp(56px, 7vw, 96px); }
.cmp-hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .cmp-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.cmp-hero h1 { max-width: 14ch; }
.fold { position: relative; display: grid; place-items: center; min-height: 320px; }
.fold > * { grid-area: 1 / 1; }
.fold-tool { padding: 10px 18px; font-weight: 600; font-size: 15px; color: var(--navy-text); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; transform: translate(var(--x), var(--y)); }
.fold-desk { position: relative; display: grid; justify-items: center; gap: 8px; max-width: 280px; padding: 28px 26px; text-align: center; color: var(--navy-text); background: linear-gradient(160deg, #1f2e44, #0f1b2b); border: 1px solid color-mix(in srgb, var(--peach) 35%, transparent); border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(216, 67, 28, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset; }
.fold-desk b { font: 800 22px/1.2 Manrope, "Segoe UI", sans-serif; color: #fff; letter-spacing: -.02em; }
.fold-desk > span:last-child { font-size: 14px; line-height: 1.5; color: var(--navy-muted); }
.fold-mark { display: block; width: 56px; height: 56px; }
.fold-mark svg { width: 100%; height: 100%; }
@keyframes fold-in { 0%, 22% { opacity: 1; transform: translate(var(--x), var(--y)); } 70% { opacity: .9; } 100% { opacity: 0; transform: translate(0, 0) scale(.35); } }
@keyframes fold-desk { 0%, 55% { transform: scale(.94); box-shadow: 0 10px 30px -20px rgba(216, 67, 28, .2); } 80% { transform: scale(1.04); } 100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .fold.in .fold-tool { animation: fold-in 1.5s cubic-bezier(.6, 0, .2, 1) .35s both; }
  .js .fold.in .fold-desk { animation: fold-desk 1.9s cubic-bezier(.16, 1, .3, 1) .35s both; }
}
@media (prefers-reduced-motion: reduce) { .fold-tool { display: none; } }
@media (max-width: 559px) { .fold { min-height: 260px; } .fold-tool { --k: .55; transform: translate(calc(var(--x) * .55), calc(var(--y) * .7)); } }

/* ---- Compare: the verified tally and Plugboard's buying card ---- */
.matrix tfoot th, .matrix tfoot td { padding: 16px 10px; border-top: 2px solid var(--line-2); border-bottom: 0; font-size: 14px; color: var(--muted); }
.matrix tfoot th { font-weight: 700; color: var(--text-hi); }
.matrix tfoot b { font: 800 20px/1 Manrope, "Segoe UI", sans-serif; color: var(--text-hi); }
.matrix tfoot td:nth-child(2) b { color: var(--accent-ink); }
.buy .card { transition: border-color .3s, box-shadow .4s var(--ease-out); }
.buy .card:not(.pb) { background: var(--bg-2); }
.model-fig { margin: 4px 0 12px; font: 800 clamp(30px, 3.6vw, 40px)/1 Manrope, "Segoe UI", sans-serif; letter-spacing: -.03em; color: var(--text-hi); }
.model-fig span { font: 600 15px/1.4 "Segoe UI", sans-serif; letter-spacing: 0; color: var(--muted); }
.model-fig.muted { color: var(--muted); }

/* ---- Compare: leaving is easy, and moving over is short ---- */
.lock-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.lock-grid li { display: grid; gap: 8px; align-content: start; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-3); transition: border-color .3s, transform .4s var(--ease-out); }
.lock-grid li:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); transform: translateY(-3px); }
.lock-grid h3 { margin: 6px 0 0; font-size: 18px; }
.lock-grid p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.lock-ico, .sw-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--accent-ink); background: var(--accent-soft); }
.lock-ico svg, .sw-ico svg { width: 22px; height: 22px; }
.switch { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: sw; }
@media (min-width: 900px) { .switch { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.switch li { position: relative; display: grid; gap: 8px; align-content: start; padding-top: 4px; }
.switch h3 { margin: 6px 0 0; font-size: 18px; }
.switch p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.sw-ico { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; background: var(--panel); border: 1.5px solid var(--brand); }
@media (min-width: 900px) { .switch li:not(:last-child)::after { content: ""; position: absolute; top: 30px; left: 60px; right: -22px; height: 2px; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 25%, transparent)); transform-origin: left; } }
@media (prefers-reduced-motion: no-preference) {
  .js .switch.seen li:not(:last-child)::after { animation: sw-line .7s var(--ease-out) backwards; animation-delay: calc(.5s + var(--i, 0) * .22s); }
  .js .switch.seen .sw-ico { animation: ico-pop .55s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(.2s + var(--i, 0) * .22s); }
  .js :is(.switch, .lock-grid) svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .switch.seen svg :is(path, circle, rect, line, polyline, polygon, ellipse) { animation: draw .85s var(--ease-out) forwards; animation-delay: calc(.35s + var(--i, 0) * .22s); }
  .js .lock-grid.seen .lock-ico { animation: ico-pop .55s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(.25s + var(--i, 0) * .08s); }
  .js .lock-grid.seen svg :is(path, circle, rect, line, polyline, polygon, ellipse) { animation: draw .85s var(--ease-out) forwards; animation-delay: calc(.4s + var(--i, 0) * .08s); }
}
@keyframes sw-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cap-na { background: transparent; border-color: transparent; color: var(--muted); opacity: .4; font-weight: 600; }
/* Legend marks: the circles keep their own centred layout. */
.legend { align-items: center; gap: 10px 22px; }
.legend > span { gap: 10px; line-height: 1; }
.legend span.cap { display: inline-grid; place-items: center; flex: none; gap: 0; width: 26px; height: 26px; font-size: 13px; line-height: 1; }
.legend .cap-unknown, .legend .cap-na { opacity: .85; }
/* Pricing alignment: the devices box matches the other compact inputs; the examples and rate card share a top edge. */
.calc .field input#devices { max-width: 200px; }
#examples .split { align-items: start; }
#examples .rates div:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 599px) {
  .examples thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .examples, .examples tbody { display: block; }
  .examples tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .examples td { display: block; padding: 0; border: 0; text-align: left !important; white-space: normal !important; }
  .examples td:first-child { grid-column: 1 / -1; margin-bottom: 6px; font-weight: 600; color: var(--text-hi); }
  .examples td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .examples td:last-child { grid-column: 1 / -1; margin-top: 10px; }
}

/* ---- Calculator sliders: the visible bar and thumb are drawn separately and glide ---- */
.rng-wrap { position: relative; width: 100%; max-width: 380px; height: 28px; margin: 6px 0 2px; --f: 0; }
.rng-track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.rng-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(11px + (100% - 22px) * var(--f)); background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 65%, #f7a325), var(--brand)); border-radius: inherit; }
.rng-thumb { position: absolute; top: 50%; left: calc(11px + (100% - 22px) * var(--f)); width: 22px; height: 22px; margin: -11px 0 0 -11px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 2px 8px rgba(13, 27, 42, .25); pointer-events: none; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.rng-wrap:hover .rng-thumb { transform: scale(1.1); }
.rng-wrap:has(.rng:active) .rng-thumb { transform: scale(1.2); box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 18%, transparent), 0 2px 8px rgba(13, 27, 42, .25); }
.rng-wrap:has(.rng:focus-visible) .rng-thumb { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.calc .field input.rng[type="range"] { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; border: 0; background: none; box-shadow: none; outline: 0; cursor: pointer; touch-action: pan-y; }
.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 28px; }
.rng::-moz-range-thumb { width: 22px; height: 28px; border: 0; }

/* ---- Billing pill: a highlight slides between the options ---- */
.seg.seg-js { position: relative; }
.seg.seg-js::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 5px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent); transition: transform .45s cubic-bezier(.34, 1.3, .64, 1), width .45s cubic-bezier(.34, 1.3, .64, 1); }
.seg.seg-js label > span { position: relative; z-index: 1; transition: color .3s var(--ease-out); }
.seg.seg-js input:checked + span { background: transparent; }
@keyframes seg-pop { 50% { transform: translateX(var(--x, 0)) scale(1.05, 1.14); } }
@media (prefers-reduced-motion: no-preference) { .seg.seg-js.pop::before { animation: seg-pop .45s var(--ease-out); } }
@media (prefers-reduced-motion: reduce) { .seg.seg-js::before, .seg.seg-js label > span, .rng-thumb { transition: none; } }

/* ---- Calculator add-ons: the checkbox fills, draws its tick and rings; the row lifts; the receipt line slides in ---- */
.calc .check { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-2); cursor: pointer; transition: border-color .25s, background-color .25s, box-shadow .35s var(--ease-out); }
.calc .check:hover { border-color: var(--line-2); }
.calc .check:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); background: color-mix(in srgb, var(--brand) 5%, var(--panel)); box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--brand) 70%, transparent); }
.calc .check input[type="checkbox"] { -webkit-appearance: none; appearance: none; display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin: 2px 0 0; border: 1.5px solid var(--line-2); border-radius: 7px; background: var(--bg); cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s var(--ease-out); }
.calc .check input[type="checkbox"]::after { content: ""; width: 11px; height: 6px; margin-top: -2px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) scale(0); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.calc .check input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
.calc .check input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
.calc .check input[type="checkbox"]:active { transform: scale(.88); }
.calc .check input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
@keyframes check-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }
@keyframes check-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes line-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .calc .check input[type="checkbox"]:checked { animation: check-ring .5s var(--ease-out); }
  .calc .check input[type="checkbox"]:checked::after { animation: check-draw .3s ease-out .05s backwards; }
  .receipt li[data-line]:not([hidden]) { animation: line-in .4s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) { .calc .check, .calc .check input[type="checkbox"], .calc .check input[type="checkbox"]::after { transition: none; } }
/* Receipt card: the quote button sits the same distance from the line above and the note below. */
.calc .card p:has(> .btn) { margin-top: 6px !important; }
.calc .card p:has(> .btn) + p { margin-top: 15px !important; }
/* Receipt rows: labels and amounts share a text baseline, including the larger total. */
.receipt li { align-items: baseline; }
.receipt .total { align-items: baseline; }
.receipt .total span:last-child { line-height: 1; }

/* The explorer's panel entrances run faster: the copy, the icons and the example card's steps. */
.js .xp-panel { transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s; }
@media (prefers-reduced-motion: no-preference) {
  .js .xp-panel[data-active] .xp-copy > :is(h3, .xp-sub, .small) { animation-duration: .34s; }
  .js .xp-panel[data-active] .xp-sub { animation-delay: .03s; }
  .js .xp-panel[data-active] .xp-lines > li { animation-duration: .34s; animation-delay: calc(.07s + var(--i, 0) * .042s); }
  .js .xp-panel[data-active] .xp-copy .small { animation-delay: .24s; }
  .js .xp-panel[data-active] :is(.xp-shot:not(.xp-shot-portal), .xp-desk, .brain) { animation-duration: .45s; animation-delay: .03s; }
  .js .xp-panel[data-active] .xp-li-ico { animation-duration: .44s; animation-delay: calc(.12s + var(--i, 0) * .05s); }
  .js .xp-panel[data-active] .xp-li-ico svg :is(path, circle, rect, line, polyline, polygon, ellipse) { animation-duration: .55s; animation-delay: calc(.24s + var(--i, 0) * .05s); }
  .js .xp-panel[data-active] .flow-running .flow-beat { animation-duration: .38s; animation-delay: calc(var(--beat, 0ms) * .6); }
  .js .xp-panel[data-active] .flow-running .home-flow-mark { animation-duration: .34s; animation-delay: calc(var(--beat, 0ms) * .6 + 70ms); }
  .js .xp-panel[data-active] .flow-running .home-flow-mark svg :is(path, circle, rect, line, polyline, polygon, ellipse) { animation-duration: .48s; animation-delay: calc(var(--beat, 0ms) * .6 + 160ms); }
  .js .xp-panel[data-active] .flow-running .home-flow-state { animation-duration: .3s; animation-delay: calc(var(--beat, 0ms) * .6 + 260ms); }
  .js .xp-panel[data-active] .flow-running .home-flow-feed li::after { animation-duration: .42s; animation-delay: calc(var(--beat, 0ms) * .6 + 150ms); }
}

/* ---- Stage numbers: hover fills the outline from the bottom, and it drains back out ---- */
@property --nr { syntax: '<length>'; inherits: false; initial-value: 0px; }
.has-num::before { display: none !important; }
.num { display: block; width: fit-content; margin: 0 0 12px -.04em; font: 800 clamp(44px, 4.4vw, 60px)/.9 Manrope, "Segoe UI", sans-serif; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.6px color-mix(in srgb, var(--ac, #d8431c) 75%, transparent); background: radial-gradient(circle at var(--mx, 50%) var(--my, 100%), var(--ac, #d8431c) calc(var(--nr) - 26px), transparent var(--nr)); -webkit-background-clip: text; background-clip: text; cursor: default; user-select: none; -webkit-user-select: none; transition: --nr 1.2s cubic-bezier(.4, .12, .3, 1); }
@media (min-width: 960px) { .xp-copy .num { margin-bottom: 14px; font-size: clamp(38px, 3.6vw, 48px); } }
.ai-story-copy .num { margin-bottom: 10px; font-size: clamp(72px, 9vw, 132px); line-height: .85; -webkit-text-stroke-width: 2px; }
@media (max-width: 639px) { .ai-story-copy .num { font-size: 64px; } }
.num.on { --nr: var(--rmax, 240px); }
@media (prefers-reduced-motion: reduce) { .num { transition: none; } }

/* ---- Small hover effects, so the page answers the pointer ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:active, .btn-arrow:active { transform: scale(.97); transition-duration: .1s; }
  .xp-tab svg { transition: transform .4s var(--spring); }
  .xp-tab:hover svg { transform: translateX(2px) rotate(-8deg); }
  .incl li { transition: transform .35s var(--ease-out), border-color .25s, box-shadow .35s var(--ease-out); }
  .incl li:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: 0 14px 28px -22px rgba(13, 27, 42, .45); }
  .incl .plan-ico, .plan-list .plan-ico { transition: transform .4s var(--spring), background-color .25s; }
  .incl li:hover .plan-ico, .plan-list li:hover .plan-ico { transform: rotate(-6deg) scale(1.1); }
  .lock-ico, .sw-ico { transition: transform .4s var(--spring); }
  .lock-grid li:hover .lock-ico { transform: rotate(-6deg) scale(1.1); }
  .switch li:hover .sw-ico { transform: scale(1.1); }
  .diff li { transition: border-color .3s, transform .35s var(--ease-out); }
  .diff li:hover { border-color: color-mix(in srgb, var(--brand) 60%, var(--line)); transform: translateY(-2px); }
  .matrix .cap-yes { transition: transform .3s var(--spring); }
  .matrix .cap-yes:hover { transform: scale(1.2); }
  .price-card::before { transition: transform .9s var(--ease-out); }
  .price-card:hover::before { transform: scale(1.18) translate(-12px, 10px); }
  .plan-badge:hover::after { animation: plan-sheen 1s var(--ease-out) 1 both; }
  .module-card:not([data-flipped]):hover .feature-ico { transform: rotate(-6deg) scale(1.08); }
  .feature-ico { transition: transform .4s var(--spring); }
  .tile-logo { transition: transform .35s var(--spring), background-color .25s; }
  .counter-stats li { transition: background-color .25s, border-color .25s, transform .35s var(--ease-out); }
  .counter-stats li:hover { transform: translateX(3px); }
}
/* Rail: the tabs share any spare height equally, so the gap above the first tab and below the last match. */
@media (min-width: 960px) { .js .xp-tabs > .xp-tab { flex: 1 0 auto; } }

/* Icon entrances wait until their group is properly in view (.seen, set by site.js), so they are seen, not missed.
   Until then the icons rest in their start state so there is no flash when the entrance begins. */
@media (prefers-reduced-motion: no-preference) {
  .js .plan-list:not(.seen) .plan-ico, .js .incl:not(.seen) .plan-ico, .js .lock-grid:not(.seen) .lock-ico, .js .switch:not(.seen) .sw-ico { opacity: 0; transform: scale(.45) rotate(-14deg); }
}

/* "What's included" and the homepage plan card: the items wait until the group is in view, then arrive in
   turn (lift and scale, text sliding in, a brief ember edge on the pricing tiles), with their icons just behind. */
@keyframes item-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes item-text { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes item-flash { 0% { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 10%, transparent); } 100% { border-color: var(--line); box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .js :is(.incl, .plan-list):not(.seen) > li { opacity: 0; transform: translateY(16px) scale(.97); }
  .js .incl.seen > li { animation: item-in .65s var(--ease-out) backwards, item-flash 1.1s ease-out backwards; animation-delay: calc(.05s + var(--i, 0) * .065s), calc(.3s + var(--i, 0) * .065s); }
  .js .incl.seen > li > span:last-child { animation: item-text .55s var(--ease-out) backwards; animation-delay: calc(.2s + var(--i, 0) * .065s); }
  .js .plan-list.seen > li { animation: item-in .65s var(--ease-out) backwards; animation-delay: calc(.05s + var(--i, 0) * .09s); }
  .js .plan-list.seen > li > span:last-child { animation: item-text .55s var(--ease-out) backwards; animation-delay: calc(.2s + var(--i, 0) * .09s); }
}

/* "The detail, when you need it": the same component as the FAQ (card rows, round +/- buttons, an ember open state,
   animated open and close), one column wide; the questions inside it are flat rows, not cards in a card. */
.ai-disclosures.faq-cols { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 4px; }
.ai-disclosure-body .faq-cols { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 8px; }
.ai-disclosure-body .faq-cols details { padding: 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.ai-disclosure-body .faq-cols details:last-child { border-bottom: 1px solid var(--line); }
.ai-disclosure-body .faq-cols details[open]:not(.is-closing) { background: none; border-color: var(--line); box-shadow: none; }
.ai-disclosure-body .faq-cols summary { font-size: 16.5px; padding: 16px 0; }
/* Rows nested inside an open row keep their own border colour when the parent is hovered. */
.ai-disclosure-body .faq-cols details:hover { border-color: var(--line); }

/* The intro mark's shadow fade composites on its own layer instead of repainting the mark. */
.intro-mark::before { will-change: opacity; }
/* Bigger tap targets in the footer on touch screens (the links were 21px tall). */
@media (pointer: coarse) {
  .foot-grid ul { gap: 0; }
  .foot-grid a, .foot-legal a { display: inline-block; padding-block: 11px; }
  .foot-legal { row-gap: 0; }
}
/* Module cards on phones read as a feature list (icon, title, one line), the way iOS apps list features; the
   toggle swaps the details in place of a 3D turn, so each card is as tall as what it shows. */
@media (max-width: 639px) {
  .module-grid { gap: 10px; }
  .js .module-turn, .js .module-card[data-flipped] .module-turn { display: block; transform: none; transition: none; }
  .js .module-front, .js .module-back { transform: none; min-height: 0; padding: 18px 58px 18px 18px; }
  .js .module-front { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .js .module-front .feature-ico { grid-row: span 2; align-self: start; margin: 0; width: 42px; height: 42px; }
  .js .module-front .module-title { margin: 0 0 2px; font-size: 17px; }
  .js .module-front .module-description { font-size: 14.5px; line-height: 1.5; }
  .js .module-card:not([data-flipped]) .module-back, .js .module-card[data-flipped] .module-front { display: none; }
  .js .module-card[data-flipped] .module-back { animation: rise .35s var(--ease-out) both; }
  .module-toggle { top: 8px; right: 8px; }
}
/* Compare marks are drawn, not typed: the font's tick and cross sat off-centre in their circles. */
.cap > span[aria-hidden] { display: contents; }
.cap svg { display: block; }
/* Below 1100px the table scrolls inside its own box, where a sticky header's page offset only pushed the
   header row down and left a blank band. Phones also get a narrower capability column so more vendors show. */
@media (max-width: 1099px) { .matrix thead th { top: 0; } }
@media (max-width: 639px) {
  .matrix { min-width: 620px; }
  .matrix tbody th[scope="row"], .matrix thead th:first-child { width: 168px; }
}
/* Below 960px the explorer is a row of swipeable cards, the way phone apps show a feature tour (Mercury, Speak,
   Beside on Mobbin): the next card peeks in, the tab chips follow the swipe and a chip tap swipes to its card
   (site.js). Every card is live, so nothing re-animates as it arrives; the illustrative workflow stays on
   larger screens. */
@media (max-width: 959px) {
  .js .xp { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .js .xp-tabs, .js .xp-stage { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .js .xp-tabs { border-bottom: 0; background: none; }
  .js .xp-stage { display: flex; align-items: stretch; gap: 12px; padding-block: 8px 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .js .xp-stage::-webkit-scrollbar { display: none; }
  .js .xp-panel { flex: 0 0 min(calc(100% - 40px), 520px); align-self: stretch; gap: 0; scroll-snap-align: start; scroll-snap-stop: always; padding: 22px 20px 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--panel); box-shadow: var(--shadow); }
  .js .xp-panel .flow-demo { display: none; }
  .js .xp-copy .num { margin-bottom: 10px; font-size: 36px; }
  .js .xp-copy h3 { font-size: 23px; }
  .js .xp-sub { font-size: 15.5px; line-height: 1.55; margin-bottom: 14px; }
  .js .xp-lines { gap: 0; }
  .js .xp-lines li { padding-block: 8px; }
}