/* =========================================================================
   THE DEPLOYER — marketing site
   Editorial tech journal on warm parchment.

   The system in one paragraph: the page canvas is Parchment (#f6f3f1), never
   pure white. Headings are an editorial serif locked at weight 400 — the
   stroke contrast and -0.02em tracking carry the emphasis, never bold. Every
   functional string (nav, buttons, body copy, badges, logs) is monospace.
   Elevation is a 1px Ash hairline plus a surface change, never a drop shadow.
   Buttons and tags are pills; cards are 40px rounds. Lake Blue is spent on one
   primary action at a time; the pastel palette is decorative only and lives in
   blurred gradient washes and illustrations.
   ========================================================================= */

/* ============================ TOKENS ============================ */
:root {
  /* Core palette */
  --parchment:        #f6f3f1;
  --lake-blue:        #2b59d1;
  --periwinkle-mist:  #cfdaf5;
  --sky-blue:         #a0b5eb;
  --mint:             #a7fccd;
  --coral:            #ff9473;
  --gold:             #ecda98;
  --crimson:          #f37a0a;
  --off-black:        #242424;
  --ink:              #000000;
  --graphite:         #4e4d4d;
  --smoke:            #797776;
  --ash:              #cecac8;

  /* Semantic surfaces / text. Components reference these, so the dark theme can
     re-point them without touching the palette above. */
  --canvas:      var(--parchment);
  --surface:     var(--parchment);
  --surface-2:   #efebe8;          /* parchment, one step down — quiet fills */
  --text:        var(--off-black);
  --text-2:      var(--graphite);
  --text-3:      var(--smoke);
  --line:        var(--ash);
  --line-soft:   rgba(206, 202, 200, .55);
  --accent:      var(--lake-blue);
  --accent-hover:#244cb5;
  --accent-ink:  #ffffff;

  /* The inverted panel type (console, closing CTA). Deliberately identical in
     both themes: a black block set into the page, like a code sample printed
     in a journal. */
  --invert-bg:   var(--off-black);
  --invert-text: var(--parchment);
  --invert-line: rgba(246, 243, 241, .16);
  --invert-dim:  rgba(246, 243, 241, .56);

  /* Type */
  /* One face for everything, headlines included. Monospace is ~25% wider per
     character than the editorial serif this replaced, so the display sizes
     below are scaled down to keep the same line lengths. */
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-display: var(--font-mono);

  --text-caption:     12px;
  --text-body-sm:     14px;
  --text-body:        16px;
  --text-label:       18px;
  --text-body-lg:     20px;
  /* Display steps re-cut for monospace. The old serif values (24/32/40/48/80)
     overflow badly in a fixed-width face. */
  --text-subheading:  19px;
  --text-heading-sm:  25px;
  --text-heading:     29px;
  --text-heading-lg:  34px;
  --text-display:     54px;

  /* Layout */
  --page:        1432px;
  --measure:     1180px;   /* the reading column; wide media breaks out of it */
  --gutter:      40px;
  --section-gap: 120px;
  --card-pad:    40px;

  /* Shape */
  --r-card:  40px;
  --r-inner: 24px;
  --r-pill:  9999px;

  /* Decorative wash strength. Kept deliberately faint: these are soft halos in
     the margins, not a gradient background. If the canvas stops reading as
     warm paper, this number is too high. */
  --wash: .30;

  color-scheme: light;
}

[data-theme="dark"] {
  /* The same system printed on ink rather than paper. The warm neutral is kept
     so it reads as the parchment's night edition, not a second brand. Nothing
     outside the documented palette is introduced. */
  --canvas:      #17150e;
  --surface:     #1d1b19;
  --surface-2:   #232120;
  --text:        var(--parchment);
  --text-2:      #bdb7b3;
  --text-3:      #8e8985;
  --line:        rgba(206, 202, 200, .20);
  --line-soft:   rgba(206, 202, 200, .12);
  --accent:      #4a76e8;              /* Lake Blue, lifted for contrast on ink */
  --accent-hover:#5b83ee;
  --accent-ink:  #ffffff;
  --wash: .34;
  color-scheme: dark;
}

/* ============================ RESET / BASE ============================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Clears the sticky header when an anchor link jumps to a section. Keep this
     a little larger than .nav-inner's height at each breakpoint. */
  scroll-padding-top: 104px;
  /* MUST be `clip`, never `hidden`. `overflow-x: hidden` makes this element a
     scroll container, which silently stops `position: sticky` from working
     anywhere inside it — that is what un-stuck the header. `clip` prevents the
     sideways scroll without creating a scroller. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: 1.35;
  letter-spacing: -.025em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;   /* `hidden` here breaks the sticky header — see <html> above */
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* Grid and flex children default to min-width:auto, so a single long
   unbreakable string — a secret name, a URL, a package id — can push its whole
   column wider than a phone screen and hand the page a sideways scroll. Every
   track that carries prose or code is explicitly allowed to shrink. */
.security-grid > *, .agents-layout > *, .problem-grid > *, .steps > *,
.feature-grid > *, .stacks-grid > *, .docs-grid > *, .pricing-grid > *,
.voices-grid > *, .catalog-grid > *, .footer-inner > *, .footer-cols > *,
.cf-row > *, .ct-row > *, .log-line > *, .hero-visual > * { min-width: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* Medium, not regular: at 400 a monospace headline reads as body copy set
     large. The weight is now what separates a heading from a paragraph, since
     the family no longer does. */
  font-weight: 500;
  /* Monospace needs far more negative tracking than the serif did, or the
     fixed advance width leaves headlines looking gappy. */
  letter-spacing: -.045em;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

code {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: .1em .55em;
  /* Deliberately not `nowrap`: an unbreakable token in running copy is the
     classic cause of a phone-width overflow. */
  overflow-wrap: anywhere;
}

::selection { background: var(--periwinkle-mist); color: var(--off-black); }

:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================ AMBIENT WASHES ============================
   Decorative only: heavily blurred pastel gradients, never sharp-edged, never
   carrying meaning. Coral → Sky, Sky → Mint, Gold → Crimson. */
.bg-aurora, .bg-grid, .bg-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bg-aurora { overflow: hidden; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: var(--wash);
}
.orb-1 { width: 38vw; height: 38vw; top: -18vw; right: -14vw; background: linear-gradient(140deg, var(--coral), var(--sky-blue)); }
.orb-2 { width: 32vw; height: 32vw; top: 62vh;  left: -18vw;  background: linear-gradient(200deg, var(--sky-blue), var(--mint)); opacity: calc(var(--wash) * .8); }
.orb-3 { width: 30vw; height: 30vw; top: 150vh; right: -12vw; background: linear-gradient(160deg, var(--gold), var(--crimson)); opacity: calc(var(--wash) * .45); }
.orb-4 { width: 32vw; height: 32vw; top: 232vh; left: -14vw;  background: linear-gradient(30deg, var(--periwinkle-mist), var(--sky-blue)); opacity: calc(var(--wash) * .6); }

/* The washes breathe very slowly, so the parchment is never quite still.
   Mouse-driven pointers only — this is exactly the compositing work that blows
   the per-tab GPU budget on iOS. */
@media (pointer: fine) {
  .orb { animation: drift 28s ease-in-out infinite alternate; }
  .orb-2 { animation-duration: 36s; animation-delay: -7s; }
  .orb-3 { animation-duration: 32s; animation-delay: -14s; }
  .orb-4 { animation-duration: 40s; animation-delay: -4s; }
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3vw, 2vw, 0) scale(1.09); }
}

/* A whisper of a grid, so the parchment reads as ruled paper up close. */
.bg-grid {
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: .30;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.bg-noise {
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ============================ SHARED TYPOGRAPHY ============================ */
.section {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.section-head { max-width: 800px; margin-bottom: 64px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-caption);
  letter-spacing: -.033em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 24px;
}
.eyebrow i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-2);
}

.section-title {
  font-size: var(--text-heading-lg);
  letter-spacing: -.045em;
  color: var(--text);
}
.section-title em { font-style: italic; }

.section-lede {
  margin-top: 24px;
  font-size: var(--text-body-lg);
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--text-2);
  max-width: 68ch;
}

/* Editorial figure captions under the two product visuals. */
.figcap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 20px;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
  text-align: left;
}
.figcap span {
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-2);
}

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 14px 30px;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: -.02em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .18s ease;
}
.btn-arrow { font-size: .8em; line-height: 1; }

/* The only saturated fill in the system — one primary action at a time. */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-dark {
  background: var(--text);
  color: var(--canvas);
  border-color: var(--text);
}
.btn-dark:hover { background: var(--graphite); border-color: var(--graphite); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.btn-ghost:hover { background: var(--text); color: var(--canvas); }

/* Ghost sitting on an inverted (off-black) card */
.btn-invert-ghost {
  background: transparent;
  color: var(--invert-text);
  border-color: rgba(246, 243, 241, .5);
}
.btn-invert-ghost:hover { background: var(--invert-text); color: var(--off-black); }

/* .btn-glass is emitted by script.js for the inert "coming soon" plan buttons.
   Periwinkle Mist is the documented surface for a disabled control. */
.btn-glass {
  background: var(--periwinkle-mist);
  color: var(--graphite);
  border-color: transparent;
}
[data-theme="dark"] .btn-glass {
  background: color-mix(in srgb, var(--periwinkle-mist) 16%, var(--surface));
  color: var(--text-2);
}
.btn-glass[disabled] { cursor: default; }

.btn-sm  { padding: 11px 22px; font-size: var(--text-caption); }
.btn-lg  { padding: 17px 34px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { pointer-events: none; }

/* Hero / announcement pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-2);
  transition: border-color .22s ease, color .22s ease, transform .18s ease;
}
.pill:hover { border-color: var(--text); color: var(--text); }
.pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 40%, transparent);
  flex: none;
}
.pill-sep { color: var(--ash); }
.pill-arrow { font-size: 1.05em; }

/* ============================ CARDS ============================ */
/* Cards carry a soft top-light and a tinted corner glow rather than one flat
   fill — enough to give the surface some life without turning into the gradient
   soup this design replaced. `--tint` is re-pointed per card further down, so a
   grid of them reads as a set of related colours instead of eight identical
   beige rectangles. */
.card {
  --tint: 255, 148, 115;
  position: relative;
  background:
    radial-gradient(115% 65% at 100% 0%, rgba(var(--tint), .17), transparent 60%),
    linear-gradient(180deg, #fbf9f8 0%, var(--surface) 58%);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
}
[data-theme="dark"] .card {
  background:
    radial-gradient(115% 65% at 100% 0%, rgba(var(--tint), .09), transparent 60%),
    linear-gradient(180deg, #221f1d 0%, var(--surface) 58%);
}

/* Circular hairline tile holding a line icon — the pill language, at 46px. */
.ico-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text);
  flex: none;
}
.ico-tile.lg { width: 54px; height: 54px; }

.ico {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-tile.lg .ico { width: 24px; height: 24px; }
.ico .soft { opacity: .42; }
.ico .fillsoft { fill: currentColor; stroke: none; opacity: .35; }

.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--coral);
  display: inline-block;
  flex: none;
  animation: breathe 2.4s ease-in-out infinite;
}
.pulse-dot.ok { background: var(--mint); }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ============================ ANNOUNCEMENT BAR ============================ */
.announce {
  position: relative;
  z-index: 60;
  background: var(--ink);
  color: var(--parchment);
}
.announce.hide { display: none; }
.announce-inner {
  max-width: var(--page);
  margin: 0 auto;
  min-height: 44px;
  padding: 8px var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}
.announce p {
  font-size: var(--text-body-sm);
  letter-spacing: -.02em;
  color: rgba(246, 243, 241, .88);
}
.announce-pill {
  margin-left: auto;
  flex: none;
  padding: 6px 16px;
  border: 1px solid rgba(246, 243, 241, .5);
  border-radius: var(--r-pill);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  transition: background-color .2s ease, color .2s ease;
}
.announce-pill:hover { background: var(--parchment); color: var(--ink); }
.announce-x {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: rgba(246, 243, 241, .6);
  border-radius: var(--r-pill);
}
.announce-x svg { width: 14px; height: 14px; }
.announce-x:hover { color: var(--parchment); }

/* ============================ NAV ============================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }

/* Reading position, drawn on the header's own hairline. */
.nav-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width .12s linear;
}

.nav-inner {
  max-width: var(--page);
  margin: 0 auto;
  height: 80px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
/* 7B parachute mark, FULL cut (four cords). The kit forbids the ink rigging on a
   dark ground, so `--rig` flips to the violet tint there; the canopy never
   changes colour. Note the kit rates the full cut for 96px and up — at header
   size the 0.5u cords are delicate, so it is set as large as the bar allows
   rather than shrunk. Do NOT thicken the cords to compensate; that is an
   explicit brand rule. */
.brand-mark {
  --rig: #14150F;
  width: 44px; height: 44px;
  display: block;
  flex: none;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
[data-theme="dark"] .brand-mark { --rig: #9B8FF0; }
.brand-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.brand-mark .bm-canopy,
.brand-mark .bm-cords { stroke: var(--rig); }
.brand-mark .bm-box { fill: var(--rig); }
.brand:hover .brand-mark { transform: translateY(-2px); }

/* Wordmark is the same monospace as everything else, at SemiBold. NOTE: the 7B
   brand kit specifies IBM Plex Sans SemiBold here — this deviates from it on
   purpose, because the site is deliberately single-face. */
.brand-name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.045em;
  color: var(--text);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: 12px;
}
.nav-links a {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-2);
  padding: 6px 0;
  white-space: nowrap;   /* "How it works" must never break across two lines */
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-links a:hover { color: var(--text); border-bottom-color: var(--text); }
/* Scroll-spy: the section currently under the header keeps its rule drawn. */
.nav-links a.active { color: var(--text); border-bottom-color: var(--text); }

.nav-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.theme-toggle {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-2);
  cursor: pointer;
  flex: none;
  transition: border-color .2s ease, color .2s ease;
}
.theme-toggle:hover { border-color: var(--text); color: var(--text); }
.theme-toggle svg { width: 16px; height: 16px; }
.ico-moon { display: none; }
[data-theme="dark"] .ico-sun { display: none; }
[data-theme="dark"] .ico-moon { display: block; }

.nav-burger {
  display: none;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  position: relative;
  flex: none;
}
/* Geometry is expressed from the centre, so the icon stays centred whatever
   size the button takes at a given breakpoint. */
.nav-burger span {
  position: absolute;
  left: 50%;
  margin-left: -7px;
  width: 14px; height: 1.4px;
  background: var(--text);
  transition: transform .25s ease;
}
.nav-burger span:nth-child(1) { top: calc(50% - 3px); }
.nav-burger span:nth-child(2) { top: calc(50% + 3px); }
.nav-burger.open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* The drawer overlays the page instead of sitting in flow. In flow it lived
   inside the sticky header, so opening it pushed every section ~550px down and
   closing it pulled them back — which landed anchor jumps in the wrong place.
   `.nav` is sticky, so it is already the containing block for this. */
.nav-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  padding: 8px var(--gutter) 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  max-height: calc(100dvh - 66px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-body-sm);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--text-2);
}
.nav-mobile a.active { color: var(--text); }
.nav-mobile-row { display: flex; gap: 12px; margin-top: 24px; }
.nav-mobile-row .btn { flex: 1; border-bottom: 0; }

/* ============================ HERO ============================ */
.hero {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 76px var(--gutter) 0;
  text-align: center;
}
.hero-copy { display: flex; flex-direction: column; align-items: center; }

.hero-title {
  margin-top: 30px;
  font-size: var(--text-display);
  letter-spacing: -.05em;
  line-height: 1.16;
  max-width: 20ch;
}
.hero-title em { font-style: italic; color: var(--graphite); }
[data-theme="dark"] .hero-title em { color: var(--text-2); }

.hero-sub {
  margin-top: 30px;
  max-width: 66ch;
  font-size: var(--text-body-lg);
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--text-2);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  width: 100%;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
}
.hero-trust-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.tlogo {
  font-size: var(--text-body-sm);
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--text-2);
  filter: grayscale(1);
}

/* The figure is a two-column spread: the black console, and a margin column of
   hairline annotation cards beside it. Nothing overlaps the log text. */
.hero-visual {
  position: relative;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 244px;
  grid-template-rows: auto 1fr auto;
  gap: 16px 24px;
}
.hero-visual .console { grid-column: 1; grid-row: 1 / span 2; }
.hero-notes {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-note-rule { flex: 1; border-left: 1px solid var(--line); margin-left: 22px; min-height: 24px; }
.hero-visual .figcap { grid-column: 1 / -1; grid-row: 3; }

.float-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  padding: 20px 22px;
  text-align: left;
}
.fc-health { display: flex; align-items: center; gap: 12px; }
.fc-label, .fc-health-s {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
}
.fc-value {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  letter-spacing: -.02em;
  margin: 4px 0 6px;
}
.fc-value span { color: var(--text-3); }
.fc-trend { font-size: var(--text-caption); color: var(--text-2); letter-spacing: -.033em; }
.fc-health-t { font-size: var(--text-body-sm); letter-spacing: -.02em; margin-bottom: 3px; }
.fc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); flex: none; }

/* ============================ CONSOLE (inverted panel) ============================ */
.surface { position: relative; }

.console {
  position: relative;
  background: var(--invert-bg);
  color: var(--invert-text);
  border-radius: var(--r-card);
  overflow: hidden;
  text-align: left;
}
/* A single light sweep across the panel as the page settles — the first thing
   that moves on landing, and it runs once rather than looping. */
.console::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(246, 243, 241, .11) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: sweep 1.8s cubic-bezier(.4, 0, .2, 1) .3s 1 both;
}
@keyframes sweep { to { transform: translateX(100%); } }
.console-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--invert-line);
}
.dots { display: flex; gap: 6px; flex: none; }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(246, 243, 241, .24); }
.console-title {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--invert-dim);
}
.console-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border: 1px solid var(--invert-line);
  border-radius: var(--r-pill);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--invert-dim);
  flex: none;
}

/* Fixed height, not min-height. A new log line streams in every 2.6s and their
   heights vary (messages wrap to two rows on narrow screens), so a box that
   sizes to its content silently re-shifts every section below the hero — which
   is enough to make an in-flight anchor jump land in the wrong place.
   `flex-end` keeps the newest lines pinned to the bottom, so the overflow is
   clipped off the top exactly like a real terminal. */
.console-body {
  padding: 22px 28px;
  height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 11px;
}
.log-line {
  display: grid;
  grid-template-columns: 66px 96px 1fr;
  gap: 16px;
  align-items: baseline;
  font-size: var(--text-body-sm);
  letter-spacing: -.028em;
  animation: logIn .4s ease both;
}
@keyframes logIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.log-line .lt { color: rgba(246, 243, 241, .34); }
.log-line .lb {
  text-transform: uppercase;
  font-size: var(--text-caption);
  letter-spacing: -.033em;
  color: var(--invert-dim);
  border: 1px solid var(--invert-line);
  border-radius: var(--r-pill);
  padding: 2px 0;
  text-align: center;
}
.log-line .lm { color: rgba(246, 243, 241, .84); }
.log-line .lm b { font-weight: 500; color: var(--parchment); }
/* Level colour lives on the badge only — a whisper of the decorative palette. */
.log-line.ok   .lb { color: var(--mint);     border-color: color-mix(in srgb, var(--mint) 34%, transparent); }
.log-line.run  .lb { color: var(--gold);     border-color: color-mix(in srgb, var(--gold) 34%, transparent); }
.log-line.info .lb { color: var(--sky-blue); border-color: color-mix(in srgb, var(--sky-blue) 34%, transparent); }

.console-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 28px;
  border-top: 1px solid var(--invert-line);
}
.stepbar {
  flex: 1;
  height: 2px;
  background: var(--invert-line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.stepbar-fill {
  height: 100%;
  width: 0;              /* climbs from zero on the first streamed line */
  background: var(--parchment);
  border-radius: var(--r-pill);
  transition: width .7s cubic-bezier(.4, 0, .2, 1);
}
.console-step {
  flex: none;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--invert-dim);
  white-space: nowrap;   /* the phase name changes; wrapping would resize the box */
}

/* ============================ MARQUEE ============================ */
.marquee-section {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 120px auto 0;
  padding: 0 var(--gutter);
}
.marquee-caption {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
  text-align: center;
  margin-bottom: 24px;
}
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: slide 46s linear infinite;
}
.marquee-track span {
  font-size: var(--text-body-sm);
  letter-spacing: -.02em;
  color: var(--text-2);
  white-space: nowrap;
}
.marquee-track i { color: var(--ash); font-style: normal; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================ PROBLEM ============================ */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.pc-card-new { background: var(--surface-2); }

.pc-tag {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
  margin-bottom: 28px;
}
.pc-tag.good { color: var(--text); border-color: var(--text); }

.problem-card ul { display: flex; flex-direction: column; gap: 18px; }
.problem-card li {
  position: relative;
  padding-left: 26px;
  font-size: var(--text-body);
  line-height: 1.45;
  letter-spacing: -.025em;
  color: var(--text-2);
}
.problem-card li::before {
  content: '';
  position: absolute;
  left: 0; top: .6em;
  width: 12px; height: 1px;
  background: var(--ash);
}
.pc-new li { color: var(--text); }
.pc-new li em { font-family: var(--font-display); font-size: 1.14em; font-style: italic; }
.problem-arrow { color: var(--text-3); display: grid; place-items: center; }

/* ============================ STEPS ============================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.step { display: flex; flex-direction: column; }
.step::after {
  content: attr(data-step);
  position: absolute;
  top: var(--card-pad); right: var(--card-pad);
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  letter-spacing: -.02em;
  color: var(--ash);
}
[data-theme="dark"] .step::after { color: var(--text-3); }
.step h3 { margin: 26px 0 12px; font-size: var(--text-subheading); }
.step p {
  font-size: var(--text-body);
  line-height: 1.5;
  letter-spacing: -.025em;
  color: var(--text-2);
}

/* ============================ AGENTS ============================ */
.agents-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}
.agents-tabs { display: flex; flex-direction: column; gap: 6px; }
.agent-tab {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: background-color .2s ease, border-color .2s ease;
}
.agent-tab:hover { border-color: var(--line); }
.agent-tab.active { background: var(--periwinkle-mist); border-color: transparent; color: var(--off-black); }
[data-theme="dark"] .agent-tab.active {
  background: color-mix(in srgb, var(--periwinkle-mist) 15%, var(--surface));
  color: var(--text);
}
.at-ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; }
.at-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.at-txt b { font-weight: 500; font-size: var(--text-body-sm); letter-spacing: -.02em; }
.at-txt small { font-size: var(--text-caption); letter-spacing: -.033em; color: var(--text-3); }
.agent-tab.active .at-txt small { color: var(--graphite); }
[data-theme="dark"] .agent-tab.active .at-txt small { color: var(--text-3); }

.agents-panel { min-height: 470px; }
.agent-detail { display: none; }
.agent-detail.active { display: block; animation: fadeUp .4s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ad-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.ad-ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  flex: none;
}
.ad-head h3 { font-size: var(--text-heading-sm); }
.agent-detail > p {
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: -.025em;
  color: var(--text-2);
  max-width: 74ch;
}
.ad-list { margin-top: 32px; border-top: 1px solid var(--line-soft); }
.ad-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-body-sm);
  letter-spacing: -.02em;
  color: var(--text-2);
}
.ad-list li b { font-weight: 500; color: var(--text); }
.c-ok   { border-bottom: 1px solid var(--mint); }
.c-warn { border-bottom: 1px solid var(--gold); }
.c-bad  { border-bottom: 1px solid var(--coral); }

/* ============================ WORKFLOW CANVAS ============================
   The diagram is a wide figure that breaks out of the reading column, the way
   a plate does in a printed spread. Done with margin rather than a transform,
   because .reveal already owns transform on this element. */
.canvas-figure {
  position: relative;
  width: min(1300px, calc(100vw - 2 * var(--gutter)));
  margin-left: calc(50% - min(650px, 50vw - var(--gutter)));
}
.canvas {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--line);
}
.canvas-name, .canvas-valid {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
}
.canvas-valid { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

.canvas-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* panning the board must not swipe the page */
}
.canvas-scroll::-webkit-scrollbar { display: none; }

/* Shown only where a board actually has to be panned (phones and small tablets). */
.pan-hint {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
}
.pan-hint::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--line);
}

/* Fixed internal coordinate system: node positions are hand-placed so nothing
   can ever collide. Narrower viewports pan the board instead of reflowing it. */
.canvas-stage {
  position: relative;
  min-width: 1180px;
  height: 470px;
}
/* The soft green hub glow from the pipeline-diagram language. */
.canvas-hub {
  position: absolute;
  left: 50%; top: 50%;
  width: 380px; height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mint) 62%, transparent), transparent);
  filter: blur(34px);
  opacity: .85;
  pointer-events: none;
}
[data-theme="dark"] .canvas-hub { opacity: .2; }

.canvas-edges {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.canvas-edges path {
  fill: none;
  stroke: var(--ash);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  animation: flow 22s linear infinite;
}
[data-theme="dark"] .canvas-edges path { stroke: rgba(206, 202, 200, .34); }
@keyframes flow { to { stroke-dashoffset: -180; } }

/* Pulses travelling the edges — appended by script.js with an animateMotion. */
.canvas-edges .edge-pulse {
  fill: var(--off-black);
  stroke: none;
  opacity: .5;
  animation: none;
}
[data-theme="dark"] .canvas-edges .edge-pulse { fill: var(--parchment); opacity: .55; }

/* Pipeline node tags: parchment fill, 1px ash, full pill. */
.node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--parchment);
  border: 1px solid var(--ash);
  border-radius: var(--r-pill);
  z-index: 2;
  transition: border-color .2s ease, transform .2s ease;
}
[data-theme="dark"] .node { background: var(--surface); border-color: var(--line); }
.node-ic { display: grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--text); }
.node b {
  display: block;
  font-weight: 500;
  font-size: var(--text-body-sm);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.node small {
  display: block;
  font-size: var(--text-caption);
  letter-spacing: -.033em;
  color: var(--text-3);
  white-space: nowrap;
}
/* Badges ride the node's top edge as a tag, so they cost the pill no width. */
.node-badge {
  position: absolute;
  top: -9px; right: 18px;
  padding: 2px 10px;
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--text-3);
}
[data-theme="dark"] .node-badge { background: var(--surface); }

.n-source { left: 24px;  top: 50%; transform: translateY(-50%); }
.n-ci     { left: 262px; top: 52px; }
.n-reg    { left: 262px; bottom: 52px; }
.n-proxy  { left: 500px; top: 50%; transform: translateY(-50%); }
.n-app    { left: 730px; top: 52px; }
.n-web    { left: 730px; bottom: 52px; }
.n-db     { right: 24px; top: 52px; }
.n-mon    { right: 24px; bottom: 52px; }

.node:hover { border-color: var(--text); }
.n-source:hover, .n-proxy:hover { transform: translateY(-50%) scale(1.02); }
.n-ci:hover, .n-reg:hover, .n-app:hover, .n-web:hover, .n-db:hover, .n-mon:hover { transform: scale(1.02); }

/* ============================ FEATURES ============================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature { display: flex; flex-direction: column; }
/* Cards stretch to the tallest in their row. The paragraph absorbs the slack so
   the plate always sits flush to the card's foot — otherwise short-copy cards
   leave a 30–55px band of card colour hanging below the picture. */
.feature > p { flex: 1 1 auto; }
.feature h3 { margin: 26px 0 14px; font-size: var(--text-subheading); }
.feature p {
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: -.025em;
  color: var(--text-2);
}

/* Wide cards set their title and body side by side. A single monospace
   paragraph run across the full 1020px grid is an unreadable measure — this
   halves it and gives the section a second rhythm against the plain cards. */
.f-wide {
  grid-column: span 3;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  column-gap: 64px;
  align-items: start;
}
.f-wide > .ico-tile { grid-column: 1; grid-row: 1; }
.f-wide > h3 {
  grid-column: 1; grid-row: 2;
  margin: 26px 0 0;
  font-size: var(--text-heading-sm);
  max-width: 18ch;
}
.f-wide > p { grid-column: 2; grid-row: 2; margin: 26px 0 0; }
.f-wide > .f-chips { grid-column: 2; grid-row: 3; }
.f-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.f-chips span {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-2);
}

/* ============================ CARD ILLUSTRATIONS ============================
   Small purpose-built pictures of the product, each on a soft coral → sky →
   mint wash. This is what carries the visual weight of the page; a grid of
   icon + title + paragraph reads as a spec sheet no matter how good the type
   is. Everything here is inline markup — no image assets, themeable, crisp at
   any density — and nothing animates its own height, so the sections below
   never shift (see the console note above). */
/* The picture BLEEDS to the card's edges and takes the larger share of its
   height. An inset thumbnail with padding around it reads as a diagram in a
   manual; a full-bleed plate reads as a product. */
.f-art {
  position: relative;
  overflow: hidden;
  margin: 32px calc(var(--card-pad) * -1) calc(var(--card-pad) * -1);
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 var(--r-card) var(--r-card);
  padding: 30px 26px 34px;
  min-height: 248px;      /* tight enough that the panel fills the plate */
  display: flex;
  align-items: center;
  justify-content: center;
  /* A gradient you can actually see. The earlier version was a blurred wash at
     low opacity, which just greyed out and made every card look identical. */
  background: linear-gradient(168deg, #f9ded1 0%, #f6e3dc 24%, #eae7f0 58%, #dde5f8 82%, #dfeee6 100%);
}
[data-theme="dark"] .f-art {
  background: linear-gradient(168deg, #3a2b25 0%, #332a2a 30%, #26272f 62%, #232935 85%, #23302b 100%);
  border-top-color: var(--line);
}

/* Four colourways cycling through the pastel palette, so the grid has rhythm.
   Every plate using the same gradient was most of why the section read as flat.
   The card's own corner glow (--tint) is matched to its plate. */
.feature:nth-of-type(4n + 2) { --tint: 160, 181, 235; }   /* sky   */
.feature:nth-of-type(4n + 3) { --tint: 167, 252, 205; }   /* mint  */
.feature:nth-of-type(4n + 4) { --tint: 236, 218, 152; }   /* gold  */

.feature:nth-of-type(4n + 2) .f-art {
  background: linear-gradient(168deg, #dce8fa 0%, #e4e9f7 28%, #ebe5f1 60%, #f7e4da 88%, #f9ece0 100%);
}
.feature:nth-of-type(4n + 3) .f-art {
  background: linear-gradient(168deg, #dcf1e5 0%, #e3efea 26%, #e8eaf4 58%, #eee5f0 82%, #f8e7da 100%);
}
.feature:nth-of-type(4n + 4) .f-art {
  background: linear-gradient(168deg, #f8edd6 0%, #f5e9de 26%, #ece8f0 58%, #dee6f8 84%, #ddefe7 100%);
}
[data-theme="dark"] .feature:nth-of-type(4n + 2) .f-art {
  background: linear-gradient(168deg, #232b3a 0%, #262a35 30%, #2b2830 62%, #352b26 88%, #3a2e26 100%);
}
[data-theme="dark"] .feature:nth-of-type(4n + 3) .f-art {
  background: linear-gradient(168deg, #223229 0%, #26302c 28%, #272a33 60%, #2d2830 84%, #382c26 100%);
}
[data-theme="dark"] .feature:nth-of-type(4n + 4) .f-art {
  background: linear-gradient(168deg, #3a3324 0%, #352e28 28%, #2b2830 60%, #242a37 86%, #233029 100%);
}
.f-art > * { position: relative; z-index: 1; width: 100%; }

/* Panels float ON the plate in white, with real depth. Shadows are banned on
   the page's own cards — inside an illustration they are what sells it. */
.mini {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(36, 36, 36, .05);
  border-radius: 13px;
  padding: 15px 17px;
  font-size: var(--text-caption);
  letter-spacing: -.033em;
  color: var(--off-black);
  box-shadow: 0 1px 2px rgba(36, 36, 36, .07), 0 14px 30px -16px rgba(36, 36, 36, .38);
}
[data-theme="dark"] .mini {
  background: #14171d;
  border-color: rgba(246, 243, 241, .08);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 30px -16px rgba(0, 0, 0, .8);
}

/* A window title strip on each panel: adds the fine detail the cards were
   missing, and gives the panel enough height to sit properly on the plate. */
.mini-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -15px -17px 14px;
  padding: 11px 17px;
  border-bottom: 1px solid rgba(36, 36, 36, .07);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--smoke);
}
[data-theme="dark"] .mini-head { border-bottom-color: rgba(246, 243, 241, .09); color: var(--text-3); }
.mini-head::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(36, 36, 36, .16);
  box-shadow: 9px 0 0 rgba(36, 36, 36, .16), 18px 0 0 rgba(36, 36, 36, .16);
  margin-right: 18px;
}
[data-theme="dark"] .mini-head::before {
  background: rgba(246, 243, 241, .2);
  box-shadow: 9px 0 0 rgba(246, 243, 241, .2), 18px 0 0 rgba(246, 243, 241, .2);
}
.mini-head em { font-style: normal; margin-left: auto; color: var(--lake-blue); }
[data-theme="dark"] .mini-head em { color: #a9bef5; }

/* ---- Product-node language, mirroring how the reference draws a pipeline ---- */
.pnode {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid rgba(36, 36, 36, .05);
  border-radius: 11px;
  padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(36, 36, 36, .07), 0 12px 26px -16px rgba(36, 36, 36, .4);
}
[data-theme="dark"] .pnode {
  background: #14171d;
  border-color: rgba(246, 243, 241, .08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 26px -16px rgba(0, 0, 0, .8);
}
.pnode-ic {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid rgba(36, 36, 36, .12);
  border-radius: 50%;
  color: var(--off-black);
}
[data-theme="dark"] .pnode-ic { border-color: rgba(246, 243, 241, .16); color: var(--parchment); }
.pnode-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pnode b { display: block; font-weight: 500; font-size: 12px; color: var(--off-black); }
[data-theme="dark"] .pnode b { color: var(--parchment); }
.pnode-sub {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(36, 36, 36, .05);
  font-size: 10px;
  color: var(--graphite);
}
[data-theme="dark"] .pnode-sub { background: rgba(246, 243, 241, .09); color: var(--text-2); }

/* Navy stubs + a rule between nodes, then a blue rule chip on the wire. */
.pconn { display: flex; flex-direction: column; align-items: center; gap: 0; }
.pconn i { display: block; width: 1.5px; height: 13px; background: rgba(36, 36, 36, .28); }
[data-theme="dark"] .pconn i { background: rgba(246, 243, 241, .3); }
.pchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  background: #eef2fe;
  border: 1px solid #b9c8f5;
  color: var(--lake-blue);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
[data-theme="dark"] .pchip { background: rgba(43, 89, 209, .18); border-color: rgba(122, 155, 240, .45); color: #a9bef5; }
.pchip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* -- Multi-cloud: four providers around a hub -- */
/* Stacks two pieces of artwork on one plate, for the tall wide-card plates. */
.art-stack { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.art-note {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--graphite);
}
[data-theme="dark"] .art-note { color: var(--text-2); }

.art-grid4 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 58px 76px;
  width: 100%;
  max-width: 330px;
}
.art-grid4::before {           /* connectors running behind the panels */
  content: '';
  position: absolute;
  inset: 22px 34px;
  background:
    linear-gradient(rgba(36, 36, 36, .22) 0 0) center/1.5px 100% no-repeat,
    linear-gradient(rgba(36, 36, 36, .22) 0 0) center/100% 1.5px no-repeat;
}
[data-theme="dark"] .art-grid4::before {
  background:
    linear-gradient(rgba(246, 243, 241, .26) 0 0) center/1.5px 100% no-repeat,
    linear-gradient(rgba(246, 243, 241, .26) 0 0) center/100% 1.5px no-repeat;
}
.art-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid rgba(36, 36, 36, .05);
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(36, 36, 36, .07), 0 12px 26px -16px rgba(36, 36, 36, .4);
}
[data-theme="dark"] .art-tile {
  background: #14171d;
  border-color: rgba(246, 243, 241, .08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 26px -16px rgba(0, 0, 0, .8);
}
.art-tile b { font-weight: 500; font-size: 12px; color: var(--off-black); }
[data-theme="dark"] .art-tile b { color: var(--parchment); }
.art-tile small {
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(36, 36, 36, .05);
  font-size: 10px;
  color: var(--graphite);
}
[data-theme="dark"] .art-tile small { background: rgba(246, 243, 241, .09); color: var(--text-2); }
.art-hub {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(36, 36, 36, .05);
  border-radius: 50%;
  color: var(--off-black);
  box-shadow: 0 1px 2px rgba(36, 36, 36, .07), 0 12px 26px -14px rgba(36, 36, 36, .45);
}
[data-theme="dark"] .art-hub {
  background: #14171d;
  border-color: rgba(246, 243, 241, .08);
  color: var(--parchment);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 26px -14px rgba(0, 0, 0, .8);
}
.art-hub svg { width: 24px; height: 24px; }
/* The ring of dots turns slowly, the one piece of ambient motion in the card. */
.art-hub .ring { transform-origin: 12px 12px; animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* -- Zero downtime: old version draining, new version health-gated -- */
.roll-row { display: flex; align-items: center; gap: 10px; }
.roll-row + .roll-row { margin-top: 12px; }
.roll-tag {
  flex: none;
  min-width: 34px;
  padding: 3px 8px;
  border: 1px solid var(--ash);
  border-radius: var(--r-pill);
  text-align: center;
  font-size: 10px;
}
[data-theme="dark"] .roll-tag { border-color: var(--line); }
.roll-bar {
  flex: 1;
  height: 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ash) 55%, transparent);
  overflow: hidden;
}
.roll-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--off-black); }
[data-theme="dark"] .roll-bar i { background: var(--parchment); }
.roll-bar .drain { animation: drain 6s ease-in-out infinite; }
.roll-bar .grow  { background: var(--mint); animation: grow 6s ease-in-out infinite; }
@keyframes grow  { 0%, 8% { width: 0; } 55%, 100% { width: 100%; } }
@keyframes drain { 0%, 55% { width: 100%; } 92%, 100% { width: 0; } }
.roll-state { flex: none; font-size: 10px; color: var(--smoke); min-width: 58px; text-align: right; }
.roll-state.ok { color: var(--off-black); }
[data-theme="dark"] .roll-state.ok { color: var(--text); }

/* -- Monitoring: a sparkline that draws itself -- */
.art-spark { width: 100%; }
.art-spark svg { display: block; width: 100%; height: 76px; overflow: visible; }
.art-spark path {
  fill: none;
  stroke: var(--off-black);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  animation: draw 7s ease-in-out infinite;
}
[data-theme="dark"] .art-spark path { stroke: var(--parchment); }
@keyframes draw { 0% { stroke-dashoffset: 340; } 45%, 100% { stroke-dashoffset: 0; } }
.art-spark .base { stroke: var(--ash); stroke-width: 1; stroke-dasharray: 3 4; animation: none; }
.spark-chips { display: flex; gap: 6px; margin-top: 12px; }
.spark-chips span {
  padding: 3px 9px;
  border: 1px solid var(--ash);
  border-radius: var(--r-pill);
  font-size: 10px;
  color: var(--graphite);
}
[data-theme="dark"] .spark-chips span { border-color: var(--line); color: var(--text-2); }

/* -- Copilot: an instruction and the diff it proposes back -- */
.art-chat { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.chat-you {
  align-self: flex-end;
  max-width: 82%;
  padding: 9px 14px;
  border-radius: 14px 14px 4px 14px;
  background: var(--periwinkle-mist);
  color: var(--off-black);
  font-size: var(--text-caption);
  letter-spacing: -.033em;
}
.chat-diff { font-family: var(--font-mono); }
.chat-diff b { display: block; font-weight: 500; margin-bottom: 8px; }
.diff-line { padding: 2px 0 2px 16px; position: relative; color: var(--graphite); }
[data-theme="dark"] .diff-line { color: var(--text-2); }
.diff-line::before { position: absolute; left: 2px; }
.diff-line.add::before { content: '+'; color: #2f7a52; }
.diff-line.del::before { content: '\2212'; color: #b05a3c; }
.diff-line.add { background: color-mix(in srgb, var(--mint) 34%, transparent); }
.diff-line.del { background: color-mix(in srgb, var(--coral) 22%, transparent); }
.chat-confirm { display: flex; gap: 6px; margin-top: 10px; }
.chat-confirm span {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 10px;
  text-transform: uppercase;
  border: 1px solid var(--ash);
}
[data-theme="dark"] .chat-confirm span { border-color: var(--line); }
.chat-confirm .yes { background: var(--off-black); color: var(--parchment); border-color: var(--off-black); }
[data-theme="dark"] .chat-confirm .yes { background: var(--parchment); color: var(--off-black); border-color: var(--parchment); }

/* Shared status dot for the illustrations below. */
.adot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ash); }
.adot.ok { background: var(--mint); }
.adot.warn { background: var(--gold); }
.adot.bad { background: var(--coral); }

/* -- Self-healing: the escalation ladder, lighting up in order -- */
.art-steps { display: flex; flex-direction: column; gap: 11px; }
.astep {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: .25;
  animation: stepIn 6s ease-in-out infinite;
}
.astep:nth-child(2) { animation-delay: .9s; }
.astep:nth-child(3) { animation-delay: 1.8s; }
@keyframes stepIn { 0% { opacity: .25; } 18%, 100% { opacity: 1; } }

/* -- DNS: the records it writes, then the live verification -- */
.art-dns { display: flex; flex-direction: column; gap: 8px; }
.dns-row { display: flex; align-items: center; gap: 10px; }
.dns-row b {
  flex: none;
  min-width: 46px;
  padding: 2px 8px;
  border: 1px solid var(--ash);
  border-radius: var(--r-pill);
  font-weight: 400;
  font-size: 10px;
  text-align: center;
}
[data-theme="dark"] .dns-row b { border-color: var(--line); }
.dns-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dns-row i { font-style: normal; color: var(--smoke); white-space: nowrap; }
[data-theme="dark"] .dns-row i { color: var(--text-3); }
.dns-verify {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 10px;
  color: var(--graphite);
}
[data-theme="dark"] .dns-verify { color: var(--text-2); }
/* A hairline arc that sweeps while the delegation is "checked". */
.dns-spin {
  width: 12px; height: 12px;
  flex: none;
  border-radius: 50%;
  border: 1.4px solid var(--ash);
  border-top-color: var(--off-black);
  animation: spin 1.4s linear infinite;
}
[data-theme="dark"] .dns-spin { border-top-color: var(--parchment); }

/* -- Standalone services: attaching one to an app -- */
.art-attach { display: flex; flex-direction: column; gap: 14px; }
.att-row { display: flex; align-items: center; gap: 0; }
.att-tile {
  flex: none;
  padding: 7px 13px;
  border: 1px solid var(--ash);
  border-radius: var(--r-pill);
  font-size: 10px;
  white-space: nowrap;
}
[data-theme="dark"] .att-tile { border-color: var(--line); }
.att-tile.app { background: var(--periwinkle-mist); border-color: transparent; color: var(--off-black); }
.att-line {
  flex: 1;
  height: 1px;
  background: var(--ash);
  position: relative;
  overflow: hidden;
}
.att-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--off-black);
  transform-origin: left;
  animation: wire 4s ease-in-out infinite;
}
[data-theme="dark"] .att-line::after { background: var(--parchment); }
@keyframes wire { 0% { transform: scaleX(0); } 45%, 100% { transform: scaleX(1); } }
.att-verdict { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--graphite); }
[data-theme="dark"] .att-verdict { color: var(--text-2); }

/* -- Browser terminal: a command typing itself -- */
.art-term { font-size: 11px; line-height: 1.9; }
.term-line { display: flex; align-items: center; gap: 8px; }
.term-prompt { color: var(--smoke); }
.term-cmd {
  overflow: hidden;
  white-space: nowrap;
  /* width, never height — a height animation would re-shift the page */
  animation: type 5s steps(22, end) infinite;
}
@keyframes type { 0% { width: 0; } 45%, 100% { width: 11.5em; } }
.term-out { color: var(--smoke); padding-left: 16px; }
[data-theme="dark"] .term-out { color: var(--text-3); }
.term-cursor {
  display: inline-block;
  width: 6px; height: 12px;
  background: var(--off-black);
  animation: blink 1.1s steps(2, start) infinite;
}
[data-theme="dark"] .term-cursor { background: var(--parchment); }
@keyframes blink { 50% { opacity: 0; } }

/* In a wide card the picture takes the right-hand column instead of sitting
   under the copy, which is what stops three stacked wide cards looking alike. */
/* A wide card's plate is as tall as the whole card, so its artwork is scaled up
   to match — otherwise a small panel is marooned in a big field of gradient. */
.f-wide > .f-art { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; align-self: stretch; padding: 40px 34px; }
.f-wide .f-art > * { max-width: 370px; margin-inline: auto; }
.f-wide .art-grid4 { gap: 78px 92px; max-width: 370px; }
.f-wide .art-chat { gap: 14px; }
.f-wide.has-art > p { grid-column: 1; grid-row: 3; margin-top: 14px; }
.f-wide.has-art > .f-chips { grid-column: 1; grid-row: 4; }

/* ============================ STATS ============================ */
.stats-wrap {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 56px 0;
}
.stat { text-align: center; padding: 0 20px; }
.stat-div { height: 72px; background: var(--line); }
.stat-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display);
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--text);
}
.stat-label {
  margin-top: 16px;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  line-height: 1.5;
  color: var(--text-3);
}

/* ============================ SECURITY ============================ */
.security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.sec-list { margin-top: 48px; border-top: 1px solid var(--line); }
.sec-item {
  display: flex;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.sec-ic {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  flex: none;
}
.sec-item b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-subheading);
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.sec-item p {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  letter-spacing: -.02em;
  color: var(--text-2);
}

/* The single Periwinkle Mist surface on the page — it is meant to pull the eye. */
.vault {
  position: sticky;
  top: 120px;
  overflow: hidden;
  background: var(--periwinkle-mist);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  color: var(--off-black);
}
[data-theme="dark"] .vault {
  background: color-mix(in srgb, var(--periwinkle-mist) 14%, var(--surface));
  border: 1px solid var(--line);
  color: var(--text);
}
.vault-wash {
  position: absolute;
  right: -70px; top: -70px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--coral), var(--sky-blue) 55%, var(--mint));
  filter: blur(46px);
  opacity: .55;
  pointer-events: none;
}
.vault-cap {
  position: relative;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: rgba(36, 36, 36, .55);
  margin-bottom: 24px;
}
[data-theme="dark"] .vault-cap { color: var(--text-3); }
.vault-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(36, 36, 36, .14);
  font-size: var(--text-caption);
  letter-spacing: -.033em;
}
[data-theme="dark"] .vault-row { border-bottom-color: var(--line-soft); }
.vault-k { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-v { color: rgba(36, 36, 36, .6); white-space: nowrap; }
[data-theme="dark"] .vault-v { color: var(--text-3); }
.vault-v b { font-weight: 500; color: var(--off-black); }
[data-theme="dark"] .vault-v b { color: var(--text); }
.vault-badge {
  flex: none;
  padding: 3px 12px;
  border: 1px solid rgba(36, 36, 36, .22);
  border-radius: var(--r-pill);
  text-transform: uppercase;
  font-size: 10px;
}
[data-theme="dark"] .vault-badge { border-color: var(--line); }

.vault-flow {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}
.vf-node {
  padding: 8px 16px;
  background: var(--parchment);
  border-radius: var(--r-pill);
  font-size: var(--text-caption);
  letter-spacing: -.033em;
  color: var(--off-black);
}
.vf-node.ok { background: var(--mint); }
.vf-arrow { font-size: 10px; text-transform: uppercase; letter-spacing: -.02em; color: rgba(36, 36, 36, .55); }
[data-theme="dark"] .vf-arrow { color: var(--text-3); }
.vault-note {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(36, 36, 36, .14);
  font-size: var(--text-caption);
  letter-spacing: -.033em;
  color: rgba(36, 36, 36, .7);
}
[data-theme="dark"] .vault-note { border-top-color: var(--line-soft); color: var(--text-2); }

/* ============================ CATALOG ============================ */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.cat {
  padding: 28px 32px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color .2s ease;
}
.cat:hover { background: var(--surface-2); }
.cat-cat {
  display: block;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
  margin-bottom: 14px;
}
.cat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-subheading);
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.cat small { font-size: var(--text-caption); letter-spacing: -.033em; color: var(--text-3); }

/* ============================ STACKS ============================ */
.stacks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.stack { display: flex; flex-direction: column; padding: 32px; }
.stack-lang {
  align-self: flex-start;
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-2);
  margin-bottom: 24px;
}
.stack b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-subheading);
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.stack small {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  letter-spacing: -.02em;
  color: var(--text-2);
}
.stacks-note {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: -.025em;
  color: var(--text-2);
  max-width: 88ch;
}

/* ============================ COMPARE ============================ */
.compare-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.compare-wrap::-webkit-scrollbar { display: none; }
.compare-table { min-width: 760px; border-top: 1px solid var(--line); }
.ct-row {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.ct-row > div {
  padding: 20px 24px;
  font-size: var(--text-body-sm);
  letter-spacing: -.02em;
  color: var(--text-2);
  text-align: center;
}
.ct-row > div.ct-k { text-align: left; color: var(--text); }
.ct-head > div {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
  padding-top: 16px;
  padding-bottom: 16px;
}
/* Our column is tinted, not coloured: the periwinkle surface at low strength. */
.ct-row > .ct-us { background: color-mix(in srgb, var(--periwinkle-mist) 42%, transparent); color: var(--text); }
[data-theme="dark"] .ct-row > .ct-us { background: color-mix(in srgb, var(--periwinkle-mist) 9%, transparent); }
.ct-head > .ct-us { color: var(--text); }
.ct-row > .yes { color: var(--text); }
.ct-row > .no  { color: var(--text-3); }
.ct-row > .mid { color: var(--text-2); }

/* ============================ VOICES ============================ */
.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.voice { display: flex; flex-direction: column; justify-content: space-between; margin: 0; }
.voice blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--text);
}
.voice blockquote::before { content: '\201C'; }
.voice blockquote::after  { content: '\201D'; }
.voice figcaption { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.v-avatar {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--text-body-sm);
  color: var(--text-2);
  flex: none;
}
.voice figcaption b { display: block; font-weight: 500; font-size: var(--text-body-sm); letter-spacing: -.02em; }
.voice figcaption small {
  display: block;
  font-size: var(--text-caption);
  letter-spacing: -.033em;
  color: var(--text-3);
  margin-top: 3px;
}
.voices-disclaimer {
  margin-top: 28px;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
}

/* ============================ PRICING ============================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.price { display: flex; flex-direction: column; }
/* The purchasable plan is the one with a surface behind it. */
.price-feature { background: var(--surface-2); }
/* Not-yet-purchasable plans (`is_purchasable: false` from the API, and the
   static fallback cards) sit back visually. Deliberately NOT dimmed with the
   `opacity` property — `.reveal` owns that, and reduced-motion forces it to 1. */
.price-locked { --tint: 206, 202, 200; }
.price-locked h3,
.price-locked .price-tag { color: var(--text-2); }
.price-locked li b { color: var(--text-2); }
.price-locked:hover { transform: none; border-color: var(--line); }

.price-ribbon, .price-soon {
  align-self: flex-start;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  margin-bottom: 28px;
}
.price-ribbon { background: var(--text); color: var(--canvas); }
.price-soon { border: 1px solid var(--line); color: var(--text-3); }

.price h3 { font-size: var(--text-heading-sm); }
.price-tag {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  letter-spacing: -.02em;
  margin-top: 16px;
  color: var(--text);
}
.price-tag span {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--text-3);
  margin-left: 8px;
}
.price-desc {
  margin-top: 16px;
  font-size: var(--text-body-sm);
  line-height: 1.55;
  letter-spacing: -.02em;
  color: var(--text-2);
}
.price ul {
  margin: 32px 0;
  border-top: 1px solid var(--line-soft);
  flex: 1;
}
.price li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-body-sm);
  letter-spacing: -.02em;
  color: var(--text-2);
}
.price li b { font-weight: 500; color: var(--text); }
.price-foot {
  margin-top: 18px;
  font-size: var(--text-caption);
  letter-spacing: -.033em;
  color: var(--text-3);
  text-align: center;
}
.price-foot a { border-bottom: 1px solid var(--line); }

/* ============================ DOCS ============================ */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.doc-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  transition: border-color .2s ease;
}
.doc-card:hover { border-color: var(--text); }
.doc-card b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-subheading);
  letter-spacing: -.02em;
  margin: 24px 0 10px;
}
.doc-card small {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  letter-spacing: -.02em;
  color: var(--text-2);
}
.doc-go {
  margin-top: auto;
  padding-top: 24px;
  font-size: var(--text-body-lg);
  color: var(--text-3);
  transition: transform .2s ease, color .2s ease;
}
.doc-card:hover .doc-go { color: var(--text); transform: translateX(5px); }
.docs-cta { margin-top: 40px; text-align: center; }

/* ============================ FAQ ============================ */
.faq-list { border-top: 1px solid var(--line); max-width: 1000px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 36px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus {
  margin-left: auto;
  flex: none;
  width: 20px; height: 20px;
  position: relative;
  transition: transform .28s ease;
}
.faq-plus::before, .faq-plus::after {
  content: '';
  position: absolute;
  background: var(--text);
  transition: opacity .2s ease;
}
.faq-plus::before { left: 0; top: 9.5px; width: 20px; height: 1.3px; }
.faq-plus::after  { top: 0; left: 9.5px; width: 1.3px; height: 20px; }
.faq-item[open] .faq-plus { transform: rotate(90deg); }
.faq-item[open] .faq-plus::after { opacity: 0; }
.faq-a {
  padding: 0 60px 36px 0;
  max-width: 84ch;
  font-size: var(--text-body);
  line-height: 1.65;
  letter-spacing: -.025em;
  color: var(--text-2);
  animation: fadeUp .32s ease both;
}
.faq-a em { font-family: var(--font-display); font-size: 1.1em; font-style: italic; }

/* ============================ FINAL CTA ============================ */
.cta-card {
  position: relative;
  overflow: hidden;
  background: var(--invert-bg);
  color: var(--invert-text);
  border-radius: var(--r-card);
  padding: 96px 64px;
  text-align: center;
}
.cta-glow {
  position: absolute;
  left: 50%; bottom: -190px;
  width: 620px; height: 380px;
  transform: translateX(-50%);
  background: linear-gradient(120deg, var(--coral), var(--sky-blue) 50%, var(--mint));
  filter: blur(74px);
  opacity: .34;
  pointer-events: none;
}
.cta-card .eyebrow { color: var(--invert-dim); position: relative; }
.cta-title {
  position: relative;
  font-size: var(--text-heading-lg);
  letter-spacing: -.045em;
  max-width: 24ch;
  margin: 0 auto;
}
.cta-title em { font-style: italic; color: rgba(246, 243, 241, .64); }
.cta-sub {
  position: relative;
  margin: 26px auto 0;
  max-width: 62ch;
  font-size: var(--text-body-lg);
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--invert-dim);
}
.cta-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

/* ============================ CONTACT ============================ */
.contact-card { max-width: 880px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cf-field { display: flex; flex-direction: column; gap: 10px; }
.cf-field > span {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
}
.cf-field input, .cf-field textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  letter-spacing: -.02em;
  color: var(--text);
  background: var(--canvas);
  border: 1px solid var(--line);
  padding: 14px 22px;
  transition: border-color .2s ease;
}
.cf-field input { border-radius: var(--r-pill); }
.cf-field textarea { border-radius: var(--r-inner); resize: vertical; min-height: 140px; line-height: 1.55; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--text-3); }
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--text); }
.cf-field input.err, .cf-field textarea.err { border-color: var(--crimson); }

.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 8px; }
.cf-note { font-size: var(--text-caption); letter-spacing: -.033em; color: var(--text-3); }
.cf-note.ok  { color: var(--text); }
.cf-note.bad { color: var(--crimson); }

/* ============================ FOOTER ============================ */
.footer {
  position: relative;
  z-index: 1;
  margin-top: var(--section-gap);
  border-top: 1px solid var(--line);
}
.footer-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 72px var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 64px;
}
.footer-brand p {
  margin-top: 24px;
  max-width: 40ch;
  font-size: var(--text-body-sm);
  line-height: 1.55;
  letter-spacing: -.02em;
  color: var(--text-2);
}
.footer-social { display: flex; gap: 10px; margin-top: 28px; }
.fsoc {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-2);
  transition: border-color .2s ease, color .2s ease;
}
.fsoc:hover { border-color: var(--text); color: var(--text); }

.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.footer-col a {
  font-size: var(--text-body-sm);
  letter-spacing: -.02em;
  color: var(--text-2);
  transition: color .2s ease;
}
.footer-col a:hover { color: var(--text); }

.footer-bar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 24px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -.033em;
  color: var(--text-3);
}
.footer-links { display: flex; gap: 24px; }
.footer-links a:hover { color: var(--text); }

/* ============================ MOTION ============================
   NOTE: .reveal owns `opacity`. Never dim an element with the opacity property
   — reduced-motion forces opacity:1 !important and will fight you. Use
   filter: grayscale(1) opacity(.62) instead. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* Cards lift a little under the cursor. `.reveal.in` sets transform:none, so
   these rules have to come after it in the file to win on source order. */
.feature, .step, .stack, .doc-card, .cat, .price, .voice {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .28s ease, background-color .28s ease;
}
.feature:hover, .step:hover, .stack:hover, .doc-card:hover, .price:hover, .voice:hover {
  transform: translateY(-4px);
  border-color: var(--text);
}
.cat:hover { transform: translateY(-2px); }

.ico-spin-hover { transition: transform .6s ease; }
.feature:hover .ico-spin-hover { transform: rotate(-180deg); }
.ico-pulse { animation: nudge 3.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateX(2px); } }

/* ============================ RESPONSIVE ============================ */
/* The hint appears only in the band where the board genuinely pans: narrower
   than the 1180px diagram, but still wide enough that it has not yet reflowed
   into the vertical chain at 1024px. */
@media (min-width: 1025px) and (max-width: 1264px) {
  .canvas-figure .pan-hint { display: flex; }
}

@media (max-width: 1180px) {
  :root { --section-gap: 96px; --text-display: 46px; --text-heading-lg: 30px; }
  .agents-layout { grid-template-columns: 300px 1fr; }
  .security-grid { gap: 40px; }
  .hero-visual { grid-template-columns: minmax(0, 1fr) 220px; }
}

/* Nav crowding. Nine links plus two buttons only fit above ~1280px, so the two
   least-used entries drop out first (they stay in the burger drawer and the
   footer), then the gaps tighten, then Sign in goes — the blue Start free
   button is the last thing to give up its space. */
@media (max-width: 1280px) {
  .nav-links a[href="#faq"], .nav-links a[href="#contact"] { display: none; }
}
@media (max-width: 1180px) {
  .nav-inner { gap: 20px; }
  .nav-links { gap: 16px; margin-left: 0; }
}
@media (max-width: 1080px) {
  .nav-signin { display: none; }
}

@media (max-width: 1024px) {
  :root { --gutter: 28px; --card-pad: 32px; --text-display: 40px; }
  .nav-links, .nav-signin, .nav-start { display: none; }
  .nav-burger { display: block; }
  .steps, .feature-grid, .catalog-grid, .stacks-grid, .voices-grid, .docs-grid, .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Not enough width left for a side-by-side title and body — stack them, and
     the wide card becomes a normal card that happens to span the row. */
  .f-wide {
    grid-column: span 2;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .f-wide > .ico-tile, .f-wide > h3, .f-wide > p, .f-wide > .f-chips, .f-wide > .f-art { grid-column: 1; }
  .f-wide > h3 { grid-row: 2; max-width: 26ch; }
  .f-wide > p, .f-wide.has-art > p { grid-row: 3; margin-top: 14px; }
  .f-wide > .f-chips, .f-wide.has-art > .f-chips { grid-row: 4; }
  .f-wide > .f-art { grid-row: 5; margin-top: 28px; }
  .agents-layout { grid-template-columns: 1fr; }
  .agents-tabs {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .agents-tabs::-webkit-scrollbar { display: none; }
  .agent-tab { width: auto; flex: none; }
  .agents-panel { min-height: 0; }
  .security-grid { grid-template-columns: 1fr; }
  /* `relative`, not `static`: the card must stay the containing block for its
     absolutely-positioned gradient wash, or the wash escapes to the page and
     drags a phone-width sideways scroll along with it. */
  .vault { position: relative; top: auto; }
  .problem-grid { grid-template-columns: 1fr; }
  .problem-arrow { transform: rotate(90deg); margin: 4px auto; }
  .footer-inner { grid-template-columns: 1fr; gap: 48px; }

  /* A 1180px board panned through a tablet or phone window shows two nodes and
     a lot of empty paper. Below desktop the pipeline becomes a legible vertical
     chain instead: same nodes, same order, nothing to pan. */
  .canvas-scroll { overflow-x: visible; }
  .canvas-stage {
    min-width: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 30px 20px;
  }
  .canvas-edges, .canvas-hub { display: none; }
  .node {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    transform: none;
    width: 100%;
    max-width: 520px;
  }
  .node:hover, .n-source:hover, .n-proxy:hover, .n-ci:hover,
  .n-reg:hover, .n-app:hover, .n-web:hover, .n-db:hover, .n-mon:hover { transform: none; }
  /* Hairline chains the pills together, standing in for the curved edges. */
  .node + .node::before {
    content: '';
    position: absolute;
    left: 30px; top: -22px;
    width: 1px; height: 22px;
    background: var(--line);
  }
  .node-badge { position: static; margin-left: auto; }
  /* Read top-to-bottom as the pipeline actually runs. GitHub stays first in the
     DOM, so it is the one pill without a connector above it. */
  .n-source { order: 1; } .n-ci { order: 2; } .n-reg { order: 3; } .n-proxy { order: 4; }
  .n-app { order: 5; } .n-web { order: 6; } .n-db { order: 7; } .n-mon { order: 8; }
}

/* The comparison table stops being a table and becomes stacked rows: the
   criterion on its own line, the three verdicts in a row underneath. Kicks in
   just above the width where the 760px table would start to pan. */
@media (max-width: 820px) {
  .compare-table { min-width: 0; }
  .ct-row { grid-template-columns: repeat(3, 1fr); padding: 6px 0 14px; }
  .ct-row > div { padding: 6px 8px; }
  .ct-row > div.ct-k { grid-column: 1 / -1; padding: 14px 8px 4px; font-size: var(--text-body); }
  .ct-head { padding: 0; }
  .ct-head > div:first-child { display: none; }
  .ct-head > div { padding: 12px 8px; }
}

@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --card-pad: 26px;
    --section-gap: 72px;
    --r-card: 28px;
    --text-display: 30px;
    --text-heading-lg: 24px;
    --text-heading: 23px;
    --text-heading-sm: 21px;
    --text-subheading: 17px;
    --text-body-lg: 17px;
  }
  html { scroll-padding-top: 86px; }
  .nav-inner { height: 66px; gap: 16px; }
  .brand-name { font-size: 19px; }
  .announce-inner { gap: 12px; padding: 10px var(--gutter); }
  .announce p { font-size: var(--text-caption); }
  .announce-pill { display: none; }
  .announce-x { margin-left: auto; }

  .hero { padding-top: 56px; }
  .hero-title { max-width: none; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-trust { margin-top: 44px; }
  .hero-visual { margin-top: 48px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .hero-visual .console { grid-column: 1; grid-row: 1; }
  .hero-notes { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; }
  .hero-notes .float-card { flex: 1 1 220px; }
  .hero-note-rule { display: none; }
  .hero-visual .figcap { grid-row: 3; }

  .console-head { padding: 16px 18px; gap: 10px; }
  .console-title { display: none; }
  .console-body { padding: 16px 18px; height: 360px; }   /* entries wrap to two rows here */
  .log-line { grid-template-columns: 74px 1fr; gap: 6px 12px; }
  .log-line .lt { grid-column: 1; }
  .log-line .lb { grid-column: 2; justify-self: start; padding: 2px 10px; }
  .log-line .lm { grid-column: 1 / -1; }
  .console-foot { padding: 14px 18px; flex-direction: column; align-items: stretch; gap: 12px; }

  .steps, .feature-grid, .catalog-grid, .stacks-grid, .voices-grid, .docs-grid, .pricing-grid {
    grid-template-columns: 1fr;
  }
  .f-wide { grid-column: span 1; }
  .catalog-grid { border-left: 0; }
  .cat { border-right: 0; padding: 24px 0; }

  .stats-wrap { grid-template-columns: 1fr 1fr; gap: 40px 0; padding: 40px 0; }
  .stat-div { display: none; }
  .stat { padding: 0 8px; }

  .canvas-toolbar { padding: 14px 18px; gap: 10px; }
  .canvas-valid { font-size: 10px; }

  /* Vault rows hold long, unbreakable secret names. Stacking them lets the card
     narrow past their intrinsic width instead of pushing the whole page wide. */
  .vault-row { flex-wrap: wrap; gap: 4px 12px; padding: 12px 0; }
  .vault-k { flex: 1 0 100%; white-space: normal; overflow-wrap: anywhere; }
  .vault-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .vault-flow { gap: 6px; margin-top: 26px; }
  /* The note wraps to two lines here, so the dot aligns to the first one. */
  .vault-note { align-items: flex-start; }
  .vault-note .pulse-dot { margin-top: 5px; }
  .sec-item { gap: 16px; padding: 24px 0; }

  .faq-item summary { font-size: 19px; padding: 26px 0; gap: 16px; }
  .faq-a { padding-right: 0; padding-bottom: 28px; }

  .cta-card { padding: 56px 26px; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1 1 100%; }
  .cf-row { grid-template-columns: 1fr; }
  .cf-actions { gap: 14px; }
  .cf-actions .btn { width: 100%; }
  .footer-inner { padding: 56px var(--gutter); gap: 40px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bar { padding-bottom: 32px; }
}

/* ---------- Phones ----------
   Monospace runs wide, so the body scale steps down here or a 335px column only
   fits ~33 characters. Anything that scrolls sideways on purpose gets a visible
   cue, because on a phone an off-screen edge is otherwise invisible. */
@media (max-width: 480px) {
  :root {
    --gutter: 18px;
    --card-pad: 22px;
    --section-gap: 64px;
    --text-body: 15px;
    --text-body-sm: 13px;
    --text-body-lg: 16px;
    --text-display: 26px;
    --text-heading-lg: 21px;
    --text-heading: 20px;
    --text-heading-sm: 19px;
    --text-subheading: 16px;
  }
  html { scroll-padding-top: 78px; }
  .nav-inner { height: 60px; gap: 12px; }
  .brand { padding: 6px 0; }
  .brand-name { font-size: 17px; }
  /* Barely shrunk on phones — the full cut's hairline cords need the size. */
  .brand-mark { width: 40px; height: 40px; }
  /* Thumb-sized controls: 40px is the smallest that is comfortable to hit. */
  .theme-toggle, .nav-burger { width: 40px; height: 40px; }
  .nav-mobile { max-height: calc(100dvh - 60px); }

  .announce-inner { min-height: 0; gap: 10px; }
  .announce p { font-size: 11px; line-height: 1.4; }
  .announce-x { width: 36px; height: 36px; }

  /* Footer and fine-print links are one line of 12–13px type; padding gives
     them a tappable box without changing how they look. */
  .footer-col { gap: 2px; }
  .footer-col a, .footer-links a, .price-foot a { display: inline-block; padding: 7px 0; }
  .footer-links { gap: 20px; }

  .hero { padding-top: 44px; }
  .hero-title { margin-top: 24px; line-height: 1.12; }
  /* Monospace at ~37 characters a line turns this paragraph into ten centred
     rows, which is hard to track. Left-aligning it under a centred headline is
     the usual editorial fix and reads far better on a phone. */
  .hero-sub { margin-top: 22px; text-align: left; }
  /* Both halves of the pill will not sit on one 375px line, so each gets its
     own: "Free plan, no card required" / "3 projects included →". */
  .pill { flex-wrap: wrap; justify-content: center; text-align: center; gap: 4px 8px; }
  .pill-sep, .pill-dot { display: none; }
  .pill-t { flex: 1 0 100%; }
  .hero-actions { margin-top: 30px; gap: 10px; }
  .hero-trust { margin-top: 36px; padding-top: 24px; gap: 10px 16px; }
  .hero-trust-logos { gap: 8px 18px; }

  .btn { padding: 13px 22px; }
  .btn-lg { padding: 15px 24px; }
  .pill { padding: 8px 14px 8px 12px; font-size: 11px; gap: 8px; }

  .section-head { margin-bottom: 40px; }
  .eyebrow { margin-bottom: 18px; }

  .canvas-stage { height: 420px; }
  .agents-tabs { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; }

  .ico-tile { width: 40px; height: 40px; }
  .ico-tile.lg { width: 46px; height: 46px; }
  .ico-tile .ico { width: 18px; height: 18px; }
  .step::after { top: 20px; right: 22px; }
  .step h3, .feature h3 { margin-top: 20px; }

  .stats-wrap { padding: 32px 0; gap: 32px 0; }
  .stat-label { margin-top: 10px; }

  .cat { padding: 20px 0; }
  .stack, .doc-card { padding: 24px; }
  .cta-card { padding: 44px 20px; }
  .cta-title { max-width: none; }
  .faq-item summary { font-size: 17px; padding: 22px 0; gap: 12px; }
  .faq-plus { width: 16px; height: 16px; }
  .faq-plus::before { top: 7.5px; width: 16px; }
  .faq-plus::after { left: 7.5px; height: 16px; }
  .footer-cols { grid-template-columns: 1fr; gap: 26px; }
  .footer-bar { flex-direction: column; gap: 12px; }
}

/* ============================ TOUCH DEVICES ============================
   iOS gives each tab a compositing budget. Large blurred layers that animate
   are the expensive part, so on coarse pointers the washes shrink, stop
   moving, and half of them are dropped, and smooth scrolling is turned off.
   (This design uses no backdrop-filter anywhere, which is most of the win.) */
@media (hover: none) and (pointer: coarse) {
  :root { --wash: .40; }
  html { scroll-behavior: auto; }
  .orb { filter: blur(42px); will-change: auto; }
  .orb-3, .orb-4 { display: none; }
  .bg-noise { display: none; }
  .canvas-edges path { animation: none; }
  .marquee-track { animation-duration: 70s; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none; }
}

/* ============================ PRINT ============================ */
@media print {
  .bg-aurora, .bg-grid, .bg-noise, .nav, .announce, .footer { display: none; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}