/* ---------- Self-hosted type -------------------------------------------------
   Cabinet Grotesk + Switzer, the two families the marketing brief specified. Served
   from our own origin, never a font CDN: this page fronts a product that holds root
   credentials, and the standing rule is that it makes no external requests at all —
   a font host would otherwise see every visitor's IP.

   Both are free for commercial use under the ITF Free Font License (fontshare.com).

   Until now the site loaded NO webfont and asked for "Avenir Next", which exists only
   on macOS. Windows and Android visitors — most of the audience — were seeing an
   entirely different headline from the one being designed and approved.

   swap, not block: the text paints immediately in the fallback and upgrades when the
   font arrives, so a slow connection never gets a blank hero. The two faces that set
   the first screen are preloaded in the document head to keep that swap brief.      */
@font-face { font-family: "Cabinet Grotesk"; font-weight: 700; font-style: normal;
             font-display: swap; src: url("/site/fonts/cabinet-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Cabinet Grotesk"; font-weight: 800; font-style: normal;
             font-display: swap; src: url("/site/fonts/cabinet-grotesk-800.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 400; font-style: normal;
             font-display: swap; src: url("/site/fonts/switzer-400.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 500; font-style: normal;
             font-display: swap; src: url("/site/fonts/switzer-500.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 600; font-style: normal;
             font-display: swap; src: url("/site/fonts/switzer-600.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 700; font-style: normal;
             font-display: swap; src: url("/site/fonts/switzer-700.woff2") format("woff2"); }

/* ServerAlly marketing site — one shared stylesheet.
   Tokens from marketing-brief/03-brand.md. No external requests. */

/* ---------- Tokens ---------- */
:root {
  --grad-start: #6366F1;
  --grad-mid: #8B5CF6;
  --grad-end: #A855F7;
  --grad: linear-gradient(120deg, #6366F1, #8B5CF6 55%, #A855F7);
  --spark: #7C3AED;
  --success: #22C55E;
  --danger: #EF4444;
  --warn: #F59E0B;
  --navy-1: #0B1020;   /* hero ground family */
  --navy-2: #12123A;
  --ink: #020817;

  --font-display: "Cabinet Grotesk", "Avenir Next", Avenir, "Segoe UI Variable Display", Seravek, "Helvetica Neue", Helvetica, system-ui, -apple-system, sans-serif;
  --font-body: "Switzer", "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", Seravek, "Helvetica Neue", Helvetica, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  /* Sized against the PM's actual 1920px screen, not my 1728px test window — the
     difference matters: 1152px left 384px of dead space each side there, which is
     what "too tight" meant. 1440px brings that to 233px and gives the headline a
     672px column, within a hair of the 686px the reference we match uses. Body text
     keeps its own narrower caps, so nothing stretches to an unreadable line. */
  --container: 1440px;
  --panel-gap: 16px;
  /* One copy of the panel field. Content spans 967px, so 940 makes consecutive
     copies overlap ~27px and the density never dips at the handover. Declared HERE,
     with the other tokens, so the responsive overrides further down can win — a
     media query adds no specificity, so a later plain :root beats it every time. */
  --collage-w: 940px;
}

/* Dark is the primary surface */
:root, html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #020817;
  --bg-soft: #060D1F;
  --card: #0A1228;
  --card-2: #0D1630;
  --text: #E7EBF5;
  --text-2: #B9C2D6;
  --muted: #8B96AD;
  --border: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.28);
  --primary: #8B9CF9;
  --primary-fill: #5048E5;
  --primary-fill-hover: #6D66F0;
  --ok-soft: rgba(34, 197, 94, 0.12);
  --danger-soft: rgba(239, 68, 68, 0.12);
  --violet-soft: rgba(139, 92, 246, 0.14);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 16px 48px -16px rgba(0,0,0,.5);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-soft: #F8FAFC;
  --card: #FFFFFF;
  --card-2: #F1F5F9;
  --text: #020817;
  --text-2: #334155;
  --muted: #64748B;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --primary: #5048E5;
  --primary-fill: #5048E5;
  --primary-fill-hover: #3B32B0;
  --ok-soft: rgba(34, 197, 94, 0.12);
  --danger-soft: rgba(239, 68, 68, 0.08);
  --violet-soft: rgba(124, 58, 237, 0.08);
  --shadow-card: 0 1px 2px rgba(2,8,23,.05), 0 12px 32px -16px rgba(2,8,23,.12);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
h1 {
  /* 66px, not 74. The longest rotating variant — "Manage any control panel" — needs
     952px at 74px in an 860px column, so it could never fit and wrapped mid-headline
     every fourth tick. Rather than drop the variant (control panels are a real part of
     what we manage) the type comes down, which also lands nearer the 60px the
     reference uses. 64px rather than 66: at 66 the longest variant cleared by only
     11px, and with no webfont loaded a Windows visitor rendered this in a different
     typeface whose metrics could easily eat that.

     Back up to 74px now that Cabinet Grotesk is self-hosted. Two things changed: the
     metrics are identical on every machine, so a small margin is genuinely enough
     rather than a guess; and Cabinet Grotesk is far narrower than the old macOS
     fallback — the longest variant measures 685px against the fallback's 823px at
     the same size. 74px puts it at 792px in an 860px column, ~68px clear. */
  font-size: clamp(44px, 5.4vw, 74px); font-weight: 800;
  line-height: 0.98; letter-spacing: -0.025em;
}
h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; }
h3 { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(139, 92, 246, 0.35); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: 96px; }
.section-tight { padding-block: 64px; }
.measure { max-width: 65ch; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--grad); }
.lede { font-size: 19px; line-height: 1.55; color: var(--text-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 16px; height: 16px; }
.btn-fill {
  background: var(--primary-fill); color: #fff;
  box-shadow: 0 8px 24px -10px rgba(80, 72, 229, 0.7);
}
.btn-fill:hover { background: var(--primary-fill-hover); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--primary); color: var(--text); background: var(--violet-soft); }
.btn-lg { padding: 15px 26px; font-size: 16.5px; border-radius: 12px; }
.on-dark .btn-ghost { color: #E7EBF5; border-color: rgba(231, 235, 245, 0.28); }
.on-dark .btn-ghost:hover { border-color: rgba(231, 235, 245, 0.6); background: rgba(231, 235, 245, 0.06); }

/* ---------- Chips & badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  background: var(--card-2); border: 1px solid var(--border); color: var(--text-2);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip-ok { background: var(--ok-soft); border-color: rgba(34,197,94,.3); color: var(--success); }
.chip-risk { background: var(--danger-soft); border-color: rgba(239,68,68,.3); color: var(--danger); }
.chip-brand { background: var(--violet-soft); border-color: rgba(139,92,246,.3); color: var(--primary); }
.badge-early {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--text); border: 1px solid var(--border-strong);
  background: linear-gradient(var(--card), var(--card)) padding-box;
}
.badge-early .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }

/* ---------- Nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 32px; height: 32px; }
.brand .word { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.brand .word b { font-weight: 700; background: linear-gradient(100deg, #6366F1, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav-links a {
  padding: 8px 13px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--text-2); white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: var(--card-2); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav-links a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; border-radius: 2px; margin-top: 1px;
  background: var(--grad);
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .btn { padding: 10px 16px; font-size: 14px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px;
  background: transparent; border: 1px solid var(--border); cursor: pointer; color: var(--text-2);
}
.icon-btn:hover { border-color: var(--border-strong); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }
html[data-theme="dark"] .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; }
.nav-burger { display: none; }
.mobile-menu { display: none; }

@media (max-width: 900px) {
  .nav-links, .nav-actions .btn-ghost { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-inner { gap: 12px; }
  .brand { margin-right: auto; }
  .mobile-menu { display: none; border-top: 1px solid var(--border); padding: 10px 24px 18px; }
  .mobile-menu.open { display: grid; gap: 2px; }
  .mobile-menu a { padding: 12px 10px; border-radius: 8px; font-size: 16px; font-weight: 500; color: var(--text); }
  .mobile-menu a:hover { background: var(--card-2); text-decoration: none; }
}

/* ---------- Drawn product panels (all generated — never screenshots) ---------- */
.panel {
  background: #FFFFFF; color: #0F172A;
  border: 1px solid #E2E8F0; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(2, 8, 23, 0.10), 0 28px 70px -28px rgba(2, 8, 23, 0.65);
  font-family: var(--font-body); font-size: 13px; line-height: 1.45;
}
.panel-pad { padding: 16px; }
.panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid #EEF2F7;
  font-weight: 600; font-size: 13px; color: #0F172A;
}
.panel-head .spacer { margin-left: auto; }
.panel .muted-ink { color: #64748B; }
.p-chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: #F1F5F9; border: 1px solid #E2E8F0; color: #475569;
}
.p-chip .dot { width: 6px; height: 6px; border-radius: 50%; }
.p-chip-server { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.p-chip-server .dot { background: #EF4444; }
.p-chip-ok { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.p-chip-runbook { background: #F5F3FF; border-color: #DDD6FE; color: #6D28D9; }
.p-chip-verify { background: #F0FDF4; border-color: #86EFAC; color: #15803D; font-size: 12px; padding: 3px 10px; }
.ally-avatar {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: var(--grad); display: grid; place-items: center;
}
.ally-avatar svg { width: 14px; height: 14px; }
.bubble-user {
  background: #5048E5; color: #fff; border-radius: 12px 12px 4px 12px;
  padding: 9px 12px; max-width: 92%; margin-left: auto; width: fit-content;
}
.bubble-ally {
  background: #F8FAFC; border: 1px solid #EEF2F7; color: #1E293B;
  border-radius: 12px 12px 12px 4px; padding: 9px 12px; max-width: 94%; width: fit-content;
}
.mission-step { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; }
.mission-step + .mission-step { border-top: 1px dashed #EEF2F7; }
.step-tick {
  width: 17px; height: 17px; border-radius: 50%; flex: none; margin-top: 1px;
  display: grid; place-items: center;
  background: #F0FDF4; border: 1px solid #86EFAC; color: #16A34A;
}
.step-tick svg { width: 9px; height: 9px; }
.step-run {
  width: 17px; height: 17px; border-radius: 50%; flex: none; margin-top: 1px;
  border: 2px solid #C7D2FE; border-top-color: #5048E5;
  animation: spin 1.6s linear infinite;
}
.step-wait {
  width: 17px; height: 17px; border-radius: 50%; flex: none; margin-top: 1px;
  border: 2px dashed #CBD5E1; background: #F8FAFC;
}
.step-shield {
  width: 17px; height: 17px; border-radius: 50%; flex: none; margin-top: 1px;
  display: grid; place-items: center; background: #FFF7ED; border: 1px solid #FDBA74; color: #C2410C;
}
.step-shield svg { width: 9px; height: 9px; }
.running-row { animation: pulse-soft 2.6s ease-in-out infinite; border-radius: 8px; }
.p-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.p-table th {
  text-align: left; font-weight: 600; color: #64748B; padding: 6px 8px;
  border-bottom: 1px solid #EEF2F7; font-size: 11px; letter-spacing: 0.02em;
}
.p-table td { padding: 6px 8px; border-bottom: 1px solid #F4F7FB; color: #1E293B; }
.p-table tr:last-child td { border-bottom: 0; }
.p-table .mono { font-size: 11px; }
.result-list { display: grid; gap: 3px; margin: 6px 0 0; padding: 0; list-style: none; }
.result-list li { display: flex; gap: 7px; align-items: baseline; color: #334155; font-size: 12.5px; }
.result-list .k { flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 0; transform: translateY(-2px); }

/* ---------- Hero ---------- */
.hero {
  /* Measured on the reference: a FLAT deep indigo (#0D033B), no gradient wash at all.
     Ours had two radial glows plus a linear gradient, which read as a soft haze where
     the reference reads as a solid stage. Same idea in our own palette rather than
     their exact hex — the pattern is the thing we are matching, not their brand. */
  position: relative;
  overflow: hidden;
  background: #0C0A2B;
  color: #E7EBF5;
}
.hero .eyebrow { color: #A7B0C8; }
/* 50/50, not 45/55: widening the container alone still left the headline in a 587px
   column against the reference's 686px, because the split was the other half of the
   problem. The visual bleeds to the viewport edge regardless, so it loses nothing. */
.hero-grid {
  /* 64/36. The headline's own length is fixed — it ends at the same x whatever this
     split says, so widening the column does nothing for the text by itself. What it
     moves is the panel field, and with it the curve. At 56/44 the curve began at 733
     while the headline ran to 956, so the title's tail sat ON the curve's transition:
     that is what read as cramped, not the column width. At 64/36 the curve begins at
     890 and the dark ground extends past the headline at its own height, so the title
     sits clear. (52/48 is the widest split that keeps a three-line headline, if that
     is ever wanted back.) */
  display: grid; grid-template-columns: 64fr 36fr; gap: 48px; align-items: center;
  padding-block: 104px 116px; min-height: 700px;
}
.hero-copy {
  display: grid; gap: 26px; justify-items: start;
  position: relative; z-index: 2;      /* above the panel field it now overlaps */
  transform: translateY(-26px);        /* sits slightly high, as in the reference */
}
.hero-copy h1 { color: #F4F6FB; }
.hero-sub { font-size: 17px; line-height: 1.6; color: #A7B0C8; max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* "Works with" — the honest replacement for the customer-logo row a launch page
   usually carries. We have no customers to name yet, but the platforms are real and
   they answer the visitor's first question before they have to ask it. */
.hero-works { margin-top: 6px; }
.hero-works-cap {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #7F8AA6; margin-bottom: 12px;
}
.hero-works-list {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  list-style: none; margin: 0; padding: 0;
  /* Capped well inside the copy column, NOT at its full 860px. The column is only the
     layout box; the dark ground actually ends where the curve begins, which at this
     height is ~190px sooner. Left to fill the column the row ran to 1101 while the
     ground stopped at 1048, so the last pill sat on the curve. This also evens the
     wrap to 6 and 6 instead of a lopsided 8 and 4. */
  max-width: 680px;
}
.hero-works-list li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: #C7D0E2;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  background: rgba(148, 163, 184, 0.06);
  white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
/* Each pill carries its own --brand, so the logo, the hover tint and the border all
   come from one value per row of markup rather than eleven near-duplicate rules. */
.hero-works-list li svg {
  width: 14px; height: 14px; flex: none;
  fill: var(--brand, currentColor);
}
.hero-works-list li:hover {
  color: #E7EBF5;
  border-color: color-mix(in oklab, var(--brand, #94A3B8) 55%, transparent);
  background: color-mix(in oklab, var(--brand, #94A3B8) 12%, transparent);
}
.hero-works-list .is-more { border-style: dashed; color: #8B96AD; background: none; }

/* Evidence strip — our replacement for a logo strip (we have no customers; these are real) */
.evidence { display: grid; gap: 12px; margin-top: 14px; }
.evidence-cap {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #7E88A3;
}
.evidence-row { display: flex; flex-wrap: wrap; gap: 8px 8px; max-width: 560px; }
.evidence-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(13, 20, 46, 0.6);
  font-size: 12.5px; font-weight: 500; color: #C0C8DC;
}
.evidence-item svg { width: 13px; height: 13px; flex: none; color: #8B9CF9; }
.evidence-item .ok { color: #4ADE80; }

/* The collage — bleeds to the viewport's right edge; .hero{overflow:hidden} crops it */
.hero-visual {
  /* The panels pass BEHIND the text column rather than starting at the midline —
     that is what makes the reference read as one continuous field of screens with
     the copy laid over it, instead of two boxes side by side. The grid cell keeps
     its 50% share for layout, but the field itself is pulled left underneath. */
  position: relative;
  min-width: 0;
  align-self: stretch;
  min-height: 620px;
  margin-block: -92px -104px;
  margin-left: -46%;
  margin-right: calc(50% - 50vw);
  background: rgba(99, 102, 241, 0.10);
  overflow: hidden;
  z-index: 0;
}
.hero-glow {
  position: absolute; inset: -16% -28% -16% -10%; pointer-events: none;
  background:
    radial-gradient(60% 50% at 55% 36%, rgba(139, 92, 246, 0.62), transparent 66%),
    radial-gradient(50% 44% at 88% 68%, rgba(80, 72, 229, 0.52), transparent 70%),
    radial-gradient(34% 30% at 30% 82%, rgba(168, 85, 247, 0.34), transparent 70%);
  filter: blur(44px);
}
.hero-arc { position: absolute; inset: 0; pointer-events: none; opacity: 0.8; }
.collage {
  /* A two-column masonry, not five hand-placed cards. The reference's panels share
     left edges and one consistent gutter; ours were positioned individually, so every
     edge was its own accident — which is exactly the "distracted" look. Letting the
     browser flow them into columns makes alignment structural rather than something
     to maintain by hand. */
  position: relative;
  flex: 0 0 var(--collage-w);
  width: var(--collage-w);
  height: auto;
  columns: 2;
  column-gap: var(--panel-gap);
  /* balance, not auto: `auto` fills each column to the container height before
     starting the next, which spilled the fifth panel into a third column and made
     the copy wider than the field. `balance` splits the panels evenly into exactly
     two, and letting the height grow past the hero lets the field bleed off the top
     and bottom the way the reference does. */
  column-fill: balance;
}
.collage .panel {
  position: static;
  width: 100%;
  margin: 0 0 var(--panel-gap);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* The whole collage glides diagonally — the OpenReplay move (60s · linear · infinite),
   as a closed lens-shaped loop so there is no seam and no visible reversal. */
@keyframes collage-pan {
  0%   { transform: translate3d(0, 0, 0); }
  46%  { transform: translate3d(-52px, -42px, 0); }
  54%  { transform: translate3d(-60px, -32px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Ambient drift — closed loops (end = start), linear + infinite: no seam, never stops. */
@keyframes drift-a {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-21px, 15px, 0); }
  50%  { transform: translate3d(-33px, -9px, 0); }
  75%  { transform: translate3d(-9px, -21px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes drift-b {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(15px, -12px, 0); }
  50%  { transform: translate3d(24px, 9px, 0); }
  75%  { transform: translate3d(8px, 18px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes drift-c {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-14px, -15px, 0); }
  50%  { transform: translate3d(-27px, 3px, 0); }
  75%  { transform: translate3d(-12px, 17px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes drift-d {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(11px, 14px, 0); }
  50%  { transform: translate3d(18px, -6px, 0); }
  75%  { transform: translate3d(5px, -15px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Self-playing feature demos (12s loops, from the animated homepage) ---------- */
@keyframes demoFade { 0% { opacity: 0; } 3%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes kW4  { 0%, 4%  { opacity: 0; transform: translateY(7px); } 8%, 86%  { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; } }
@keyframes kW17 { 0%, 17% { opacity: 0; transform: translateY(7px); } 21%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; } }
@keyframes kW24 { 0%, 24% { opacity: 0; transform: translateY(7px); } 28%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; } }
@keyframes kW34 { 0%, 34% { opacity: 0; transform: translateY(7px); } 38%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; } }
@keyframes kW40 { 0%, 40% { opacity: 0; transform: translateY(7px); } 44%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; } }
@keyframes kW45 { 0%, 45% { opacity: 0; transform: translateY(7px); } 49%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; } }
@keyframes kW51 { 0%, 51% { opacity: 0; transform: translateY(7px); } 55%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; } }
@keyframes kW57 { 0%, 57% { opacity: 0; transform: translateY(7px); } 61%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; } }
@keyframes kW62 { 0%, 62% { opacity: 0; transform: translateY(7px); } 66%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; } }
@keyframes kW68 { 0%, 68% { opacity: 0; transform: translateY(7px); } 72%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; } }
@keyframes kW74 { 0%, 74% { opacity: 0; transform: translateY(7px) scale(0.92); } 78%, 86% { opacity: 1; transform: translateY(0) scale(1); } 93%, 100% { opacity: 0; } }
@keyframes kDots { 0%, 10% { opacity: 0; } 13%, 21% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes kBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes kSpinW1 { 0%, 4%  { opacity: 0; } 6%, 15%  { opacity: 1; } 17%, 100% { opacity: 0; } }
@keyframes kSpinW2 { 0%, 17% { opacity: 0; } 19%, 32% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes kSpinW3 { 0%, 34% { opacity: 0; } 36%, 49% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes kSpinW4 { 0%, 51% { opacity: 0; } 53%, 66% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes kProg { 0%, 4% { width: 4%; } 17% { width: 30%; } 34% { width: 55%; } 51% { width: 78%; } 68%, 100% { width: 100%; } }
@keyframes kFillA { 0%, 50% { background-color: #FFFFFF; color: #5048E5; } 53%, 100% { background-color: #5048E5; color: #FFFFFF; } }
@keyframes kBeamW { 0%, 4% { opacity: 0; } 6%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes kBeam { 0% { transform: translateY(0); } 100% { transform: translateY(148px); } }
@keyframes tT1 { 0%, 10% { width: 0; animation-timing-function: steps(24, end); } 17%, 100% { width: 100%; } }
@keyframes tT2 { 0%, 24% { width: 0; animation-timing-function: steps(22, end); } 31%, 100% { width: 100%; } }
@keyframes tT3 { 0%, 40% { width: 0; animation-timing-function: steps(12, end); } 45%, 100% { width: 100%; } }
@keyframes kBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.fx .fx-btn { font-size: 12.5px; font-weight: 600; border: 1px solid #C7D2FE; border-radius: 999px; padding: 6px 14px; color: #5048E5; background: #fff; }
.fx .fx-ghost { font-size: 12.5px; font-weight: 500; color: #64748B; border: 1px solid #E2E8F0; background: #FFFFFF; border-radius: 999px; padding: 6px 14px; }
@keyframes pulse-soft {
  0%, 100% { background-color: rgba(80, 72, 229, 0); }
  50% { background-color: rgba(80, 72, 229, 0.07); }
}
@keyframes chip-land {
  0% { opacity: 0; transform: translateY(-8px) scale(0.7); }
  70% { opacity: 1; transform: translateY(0) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.land { animation: chip-land 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.9s both; }

@media (max-width: 1100px) {
  /* Stacked layout: the copy sits ABOVE the panel field rather than on top of it, so
     every overlap trick from the wide layout has to be undone. Leaving margin-left
     alone dragged the field off the left edge and put panel slivers behind the
     buttons; leaving the negative block margins alone let it climb into the copy. */
  .hero-grid { grid-template-columns: 1fr; gap: 20px; padding-block: 72px 0; min-height: 0; }
  .hero-visual {
    align-self: auto;
    height: 620px; min-height: 0;
    margin-block: 0;
    margin-left: 0;
    margin-right: -24px;
  }
  .hero-copy { transform: none; }
  .hero-carve { display: none; }   /* nothing to carve when they no longer overlap */
  /* The copy width also sets the panel width, since each panel fills its column.
     940px was sized for a half-viewport field; on a stacked layout that is wider
     than the screen, so the panels ran off the edge. */
  :root { --collage-w: 700px; }
}
@media (max-width: 640px) {
  :root { --collage-w: 300px; }
  /* A fixed break after the rotating word overflows a phone; wrap naturally instead. */
  .hero-copy h1 br { display: none; }
  .hero-visual {
    height: 470px;
    /* a 92px fade eats a third of a phone screen — keep the softness proportional */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
  }
  .collage { columns: 1; }         /* one column at phone width — two would be unreadable */
}

/* ---------- Generic sections ---------- */
.section-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: 52px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .cards-3, .cards-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards-3, .cards-2, .cards-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px; box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: 8px; }
.card .icon-tile {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: var(--violet-soft); color: var(--primary); border: 1px solid var(--border);
}
.card .icon-tile svg { width: 19px; height: 19px; }
.step-num {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--violet-soft); color: var(--primary); margin-bottom: 16px;
}

.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding-block: 44px;
}
.feature-row + .feature-row { border-top: 1px solid var(--border); }
.feature-row .fr-copy { display: grid; gap: 12px; }
.feature-row .fr-copy p { color: var(--text-2); max-width: 52ch; }
@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; gap: 28px; }
  .feature-row .fr-visual { order: -1; }
}

/* Quiet dark band (safety strip, closing CTA) */
.band-dark {
  background: linear-gradient(180deg, var(--navy-1), #0C0F2C);
  color: #E7EBF5; position: relative; overflow: hidden;
}
.band-dark .muted, .band-dark .lede { color: #A7B0C8; }
.band-dark .card { background: rgba(13, 20, 46, 0.66); border-color: rgba(148, 163, 184, 0.16); color: #E7EBF5; }
.band-dark .card p { color: #A7B0C8; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding-block: 44px 40px; background: var(--bg-soft); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 32px 64px; justify-content: space-between; align-items: flex-start; }
.footer-brand { display: grid; gap: 12px; max-width: 320px; }
.footer-links { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-links .col { display: grid; gap: 9px; }
.footer-links .col strong { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.footer-links a { color: var(--text-2); font-size: 14.5px; }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].revealed { opacity: 1; transform: none; }
html.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- How It Works — scroll narrative ---------- */
.hiw-layout { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
.scene-rail { position: sticky; top: 100px; display: grid; gap: 4px; }
.scene-rail a {
  display: flex; gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: 9px;
  color: var(--muted); font-size: 14px; font-weight: 500; border-left: 2px solid transparent;
}
.scene-rail a:hover { text-decoration: none; color: var(--text); background: var(--card-2); }
.scene-rail a.active { color: var(--text); font-weight: 600; border-left-color: var(--grad-mid); background: var(--card-2); border-radius: 0 9px 9px 0; }
.scene-rail .n { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
@media (max-width: 900px) { .hiw-layout { grid-template-columns: 1fr; } .scene-rail { display: none; } }

.scene { display: grid; gap: 20px; padding-block: 44px 84px; }
.scene + .scene { border-top: 1px solid var(--border); }
.scene-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .scene-stage { grid-template-columns: 1fr; } }
.chat-panel { display: grid; gap: 10px; }
html:not(.no-js) .chat-msg:not(.shown) { display: none; }
.chat-msg.shown { animation: msg-in 0.45s ease both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.typing-dots { display: inline-flex; gap: 4px; padding: 10px 12px; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: #94A3B8; animation: t-bounce 1.2s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes t-bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.approve-box {
  border: 1px solid #FDBA74; background: #FFF7ED; border-radius: 10px; padding: 12px;
  display: grid; gap: 10px;
}
.approve-box .q { font-size: 12.5px; color: #7C2D12; font-weight: 600; }
.approve-actions { display: flex; gap: 8px; }
.btn-approve {
  display: inline-flex; align-items: center; gap: 6px;
  background: #16A34A; color: #fff; border: 0; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-approve:hover { background: #15803D; }
.btn-stop {
  background: #fff; color: #475569; border: 1px solid #E2E8F0; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.proof-note {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card); padding: 14px 16px; font-size: 14px; color: var(--text-2);
  max-width: 720px;
}
.proof-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--success); }
.proof-note b { color: var(--text); }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.plan { display: grid; gap: 18px; align-content: start; position: relative; }
.plan .price { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.plan .price small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.plan li { display: flex; gap: 9px; align-items: baseline; font-size: 14.5px; color: var(--text-2); }
.plan li svg { width: 13px; height: 13px; flex: none; color: var(--success); transform: translateY(1.5px); }
.plan-featured { border-color: rgba(139, 92, 246, 0.55); box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35), var(--shadow-card); }
.plan-flag {
  position: absolute; top: -12px; left: 24px; white-space: nowrap;
  background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.ai-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .ai-lanes { grid-template-columns: 1fr; } }
.promise {
  display: flex; gap: 14px; align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  padding: 26px 24px; background: var(--card);
  font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 26px); font-weight: 700; letter-spacing: -0.01em;
}
.faq { display: grid; gap: 10px; max-width: 780px; }
.faq details { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); }
.faq summary {
  cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 15.5px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--muted); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 20px 18px; color: var(--text-2); font-size: 14.5px; max-width: 65ch; }

/* ---------- Security ---------- */
.sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 900px) { .sec-grid { grid-template-columns: 1fr; } }
.kv-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.kv-table td { padding: 12px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.kv-table td:first-child { color: var(--muted); width: 38%; padding-right: 20px; }
.kv-table tr:last-child td { border-bottom: 0; }

/* ---------- Proof ---------- */
.timeline { display: grid; gap: 0; position: relative; }
.tl-item { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding-block: 26px; position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: 19.5px; top: 62px; bottom: -6px; width: 1px;
  background: var(--border);
}
.tl-item:last-child::before { display: none; }
.tl-dot {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--violet-soft); border: 1px solid var(--border-strong); color: var(--primary);
  position: relative; z-index: 1;
}
.tl-dot svg { width: 17px; height: 17px; }
.tl-body { display: grid; gap: 10px; }
.tl-body p { color: var(--text-2); max-width: 62ch; }

.gif-frame {
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow-card);
}
.gif-poster { position: relative; cursor: pointer; display: block; width: 100%; border: 0; padding: 0; background: #0B1020; text-align: left; }
.gif-poster .panel { display: block; }
.gif-poster:hover .gif-play { transform: scale(1.06); }
.gif-play {
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%;
  background: rgba(2, 8, 23, 0.72); border: 1px solid rgba(231,235,245,0.3);
  display: grid; place-items: center; color: #fff; transition: transform .2s ease;
  backdrop-filter: blur(4px);
}
.gif-play svg { width: 26px; height: 26px; margin-left: 4px; }
.gif-meta { display: grid; gap: 4px; padding: 14px 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }

/* ---------- Reduced motion: freeze the ambience, keep the composition ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .collage, .collage-track, .collage .panel, .step-run, .running-row, .land, .typing-dots i,
    .hero-copy > * { animation: none !important; }
    .rot, .rot-w { transition: none !important; }
  .fx, .fx * { animation: none !important; }
  .fx .fx-dots { display: none; }
  .land { opacity: 1; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .chat-msg.shown { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ── Hero collage travel (the OpenReplay pattern) ────────────────────────────
   The reference pans a flat background image 0,0 → 100%,100% over 60s, linear,
   forever. Ours are real DOM panels, so instead we run two identical copies in a
   flex track and translate it by exactly one copy width. When copy A has fully
   left, copy B is precisely where A started, so there is no loop point to catch.
   `linear` matters as much as the duration: with any easing the eye sees it
   start and stop, and the spell breaks. Each panel keeps its own slow drift on
   top of this, which is the depth a single flat image cannot give.            */
/* Tried scaling the copy 1.22x to match the reference's larger panels. It looked worse:
   the composition became wider than the visible half, so fewer panels fit and a bare
   patch crossed the frame. The reference reads the way it does because of the tinted
   block and the axis-aligned panels, not the panel size. Density wins. */
.collage-track {
  position: absolute; inset: 0;
  display: flex; width: max-content;
  align-items: center;
  animation: collage-travel 78s linear infinite;
  will-change: transform;
}
@keyframes collage-travel {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--collage-w)), 0, 0); }
}
/* Clip on both sides: panels crop off the right edge (the reference's look) and
   never slide over the headline. The left edge is FADED rather than hard-cut —
   a straight cut leaves thin floating slivers of a panel mid-sentence, which
   reads as a rendering fault; a fade reads as depth. */
.hero-visual {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 92px, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 92px, #000 100%);
}

/* The carved cut — TWO layers, which is how the reference actually does it. I read
   its DOM rather than guessing a third time.

   My circle could never have worked. A circle is symmetric: widest at the middle,
   falling away evenly above and below. Theirs is an S — widest at the TOP, pinched
   to about a third of the way across through the MIDDLE, then flaring back out at
   the BOTTOM. That is the opposite behaviour at every height, so no arc reproduces
   it; it has to be a real path.

   Layer 1 (.hero-veil) is a plain horizontal gradient over the left half — it dims
   the panels progressively and has nothing to do with the curve.
   Layer 2 (.hero-carve) is the path itself, brighter along its own edge, which is
   what reads as "carved" rather than merely overlaid. */
.hero-veil {
  position: absolute;
  inset: 0 auto 0 0;
  width: 52%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to right, rgba(44, 34, 116, 0.92) 0%, rgba(44, 34, 116, 0) 100%);
}
.hero-carve {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  /* Measured against the reference's own proportions: its curve peaks ~28% across the
     field, pinches to ~8%, and returns to the left edge. At 42% ours peaked at 38.8%
     and pinched at 11.8% — the right shape at the wrong scale. 31% lands it on theirs. */
  width: 31%;
  min-width: 240px;
  margin-left: -52px;      /* the path's flare must clear the left edge */
  pointer-events: none;
  z-index: 1;
}
.hero-carve svg { width: 100%; height: 100%; display: block; }

/* ---------- Hero entrance ----------------------------------------------------
   A one-time staggered rise as the page loads. Deliberately NOT per-letter or
   per-word: this headline is the page's single most important sentence, and
   splitting it into spans is what breaks text selection, translation and screen
   readers. Whole blocks, 90ms apart, is the same premium feel with none of that.
   `backwards` fill matters — without it each block flashes at full opacity for one
   frame before its delay starts, which reads as a stutter on slower machines.     */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero-copy > * {
  animation: hero-rise 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.hero-copy > :nth-child(1) { animation-delay: 0.05s; }
.hero-copy > :nth-child(2) { animation-delay: 0.14s; }
.hero-copy > :nth-child(3) { animation-delay: 0.23s; }
.hero-copy > :nth-child(4) { animation-delay: 0.32s; }
.hero-copy > :nth-child(5) { animation-delay: 0.41s; }

/* ---------- Rotating word in the headline ------------------------------------
   The brand gradient goes HERE rather than on the whole headline: the word that
   changes is the one the eye should follow, so colouring it serves the animation
   instead of merely decorating the sentence. It also keeps the other five words at
   full white weight — gradient text renders optically thinner, and this is the most
   important sentence on the site.

   overflow:hidden clips the word as it slides, which is what makes it read as a
   wipe rather than a fade. inline-flex + bottom alignment keeps it on the same
   baseline as the static words at any size. */
.rot {
  display: inline-flex;
  align-items: flex-end;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  transition: width 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rot-w {
  display: inline-block;
  background: linear-gradient(100deg, #818CF8, #A78BFA 46%, #C084FC);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform 0.19s cubic-bezier(0.4, 0, 1, 1), opacity 0.19s ease;
}
/* leaving: lifts and fades */
.rot.is-out .rot-w { transform: translateY(-0.42em); opacity: 0; }
/* arriving: starts low, then the class is dropped and it eases home */
.rot.is-in .rot-w {
  transform: translateY(0.42em); opacity: 0;
  transition: none;
}

/* ---------- Feature-row cards --------------------------------------------------
   These sit in a 668px column but were capped at 420px inline, filling 63% of it and
   leaving the product text at 11-13px — small enough that the thing the section is
   trying to show could not comfortably be read. The cap is now 600px and the type
   inside steps up with it.

   Every rule here is scoped to .feature-row on purpose. The hero collage uses the
   same .panel classes, and its sizing is deliberately tuned to the travelling field
   and the curve — a global bump would have broken the hero, which is explicitly not
   to be touched. */
.feature-row .panel { font-size: 15px; }
.feature-row .panel .panel-head { font-size: 15px; padding: 13px 17px; }
.feature-row .panel .panel-pad { font-size: 15px; padding: 19px; }
.feature-row .panel .p-chip { font-size: 12.5px; }
.feature-row .panel .fx-btn,
.feature-row .panel .fx-ghost { font-size: 14px; padding: 8px 17px; }
.feature-row .panel .bubble-user,
.feature-row .panel .bubble-ally { font-size: 15px; line-height: 1.55; }
.feature-row .panel .mono { font-size: 13.5px; }
.feature-row .panel .ally-avatar { width: 26px; height: 26px; }
/* the small green/grey status lines under the cards */
.feature-row .panel [style*="font-size:12.5px"] { font-size: 14px !important; }