/* ============================================================
   WAM SUPERLISA — Updates
   Three aesthetic directions in one file, switch via Tweaks.
   Palette rails from handoff: dark minimalism, mono numerals,
   single accent, outline tags. The three directions diverge
   on layout, rhythm and type — not on the core palette.
   ============================================================ */

/* ---------- Tokens (shared, overridable per variant) ---------- */
:root {
  /* Palette — cue taken from magnets.tg: crisp white base, deep ink text,
     saturated magnets-blue as the single action accent, warm red as the
     secondary / critical accent. Dark mode is our default for the product
     site, so we mirror the same hues against near-black.
     Surface tiers: --bg is the page canvas, --elev is the card/hero surface,
     --elev-2 is nested/hover. Page bg and card bg MUST be visibly distinct. */
  --bg: #09090b;
  --elev: #17171c;
  --elev-2: #22222a;
  --fg: #f4f4f6;
  --dim: #8a8a92;
  --faint: #55555d;
  --hair: rgba(255, 255, 255, 0.06);
  --hair-2: rgba(255, 255, 255, 0.14);
  --accent: #3564E7;               /* magnets blue */
  --accent-dim: rgba(53, 100, 231, 0.15);
  --accent-2: #EE5353;             /* magnets red */
  --tag-add: #3564E7;              /* added  — blue */
  --tag-chg: #E0A93A;              /* changed — amber */
  --tag-fix: #EE5353;              /* fixed  — red */

  /* Status row indicators — shared across /status, home kicker, status bars */
  --status-ok:   #3FD16F;
  --status-warn: #E0A93A;
  --status-down: #EE5353;

  --nav-bg: rgba(9, 9, 11, 0.82);
  --card-hover: var(--elev-2);
  --body-sub: #cacacd;
  --rule-strong: var(--fg);

  /* Type — grotesques only. Geist as the workhorse grotesk, JetBrains Mono
     for numerals and tag labels. No serifs anywhere. */
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:  "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --grotesk: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  /* Heading scale — responsive clamp; used by .wam-hero-title and .wam-section-h
     so page-scoped prefixes can co-style titles without re-declaring sizes. */
  --fs-hero:    clamp(42px, 6.5vw, 72px);
  --fs-section: clamp(28px, 3.8vw, 48px);
  --fs-sub:     clamp(18px, 1.8vw, 22px);

  /* Radius scale — lg for hero/card shells, md for inner tiles, sm for code
     blocks/chips, pill for buttons. */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   60px;
  --radius-pill: 999px;
  --radius: 0px;

  --shell-pad: 28px;
  --shell-max: 1240px;

  /* Vertical rhythm — canonical gap between major page sections. Individual
     hero/section blocks use their own padding, but anywhere we gap top-level
     sections explicitly, use this token. Mobile: no separate token — sections
     already collapse via their own @media rules. */
  --section-gap: 80px;
}

/* ---------- Light theme — magnets.tg cue: bright white, ink text,
   same blue/red accents, airy hairlines ---------- */
:root[data-theme="light"] {
  --bg: #f2f2f4;
  --elev: #ffffff;
  --elev-2: #fafafb;
  --fg: #0b0b0d;
  --dim: #6a6a72;
  --faint: #a8a8b0;
  --hair: rgba(11, 11, 13, 0.08);
  --hair-2: rgba(11, 11, 13, 0.18);
  --accent: #3564E7;
  --accent-dim: rgba(53, 100, 231, 0.10);
  --accent-2: #EE5353;
  --tag-add: #1f4bc9;
  --tag-chg: #a8761a;
  --tag-fix: #c93838;
  --status-ok:   #1c9b4a;
  --status-warn: #a8761a;
  --status-down: #c93838;
  --nav-bg: rgba(242, 242, 244, 0.82);
  --card-hover: var(--elev-2);
  --body-sub: #45454d;
  --rule-strong: #0b0b0d;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }

::selection { background: var(--accent); color: var(--bg); }

/* ---------- Shared nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, backdrop-filter .2s ease;
}
.nav.is-scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--hair);
}
.nav__inner {
  max-width: var(--shell-max); margin: 0 auto;
  padding: 14px var(--shell-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; justify-self: start; }
.brand__marks { display: flex; align-items: center; gap: 10px; }
.brand__sep { width: 1px; height: 18px; background: var(--hair-2); }
.brand__mark img { display: block; height: 24px; width: auto; filter: none; }
[data-theme="light"] .brand__mark img { filter: invert(1); }
.brand__mark--agents img { height: 22px; }
.brand__mark--wam img { height: 20px; }
.brand__label {
  font-family: var(--grotesk); font-size: 13px; letter-spacing: -0.01em;
  color: var(--fg); font-weight: 500;
}
.nav__links {
  display: flex; gap: 2px;
  justify-self: center;
  font-family: var(--grotesk); font-size: 14px; letter-spacing: -0.005em;
  font-weight: 500;
}
.nav__link {
  padding: 8px 12px; color: var(--dim); transition: color .15s;
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: none;
}
.nav__link:hover { color: var(--fg); }
.nav__link--active { color: var(--fg); }
.nav__link--active::before {
  content: ""; width: 4px; height: 4px; background: var(--accent);
  display: inline-block;
}
.nav__controls {
  display: flex; align-items: center; gap: 14px;
  justify-self: end;
  /* Optical alignment — the 36px control boxes centre their icons/glyphs
     ~10px inside the box edge, so the visible right edge would otherwise
     sit further from the screen edge than the logo does on the left.
     Pull the cluster out so the glyphs line up with --shell-pad. */
  margin-right: -10px;
}
/* Each control is a standalone 36px square — theme toggle, lang toggle,
   burger — separated by gap so each reads as its own function. */
.nav__theme,
.nav__lang {
  height: 36px;
  min-width: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  background: none;
  color: var(--dim);
  font-family: var(--grotesk); font-size: 12px; font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.nav__theme:hover,
.nav__lang:hover { color: var(--fg); border-color: var(--hair); }

/* Theme icon swaps with the current theme (data-theme on <body>): sun in
   light mode, moon in dark mode. Reflects state — tap to flip. */
.nav__theme-icon { display: none; }
body[data-theme="dark"] .nav__theme-icon--moon { display: block; }
body[data-theme="light"] .nav__theme-icon--sun { display: block; }

/* ---------- Mobile burger + drawer ---------- */
.nav__burger {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color .15s;
}
.nav__burger:hover { border-color: var(--fg); }
.nav__burger-bars {
  position: relative;
  width: 16px; height: 12px;
  display: inline-block;
}
.nav__burger-bars span {
  position: absolute; left: 0; right: 0;
  height: 1.5px; background: currentColor;
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav__burger-bars span:nth-child(1) { top: 0; }
.nav__burger-bars span:nth-child(2) { top: 5.25px; }
.nav__burger-bars span:nth-child(3) { top: 10.5px; }
.nav__burger[aria-expanded="true"] .nav__burger-bars span:nth-child(1) {
  top: 5.25px; transform: rotate(45deg);
}
.nav__burger[aria-expanded="true"] .nav__burger-bars span:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded="true"] .nav__burger-bars span:nth-child(3) {
  top: 5.25px; transform: rotate(-45deg);
}
.nav__drawer {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--hair);
  padding: 8px var(--shell-pad) 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.nav__drawer.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__drawer-link {
  padding: 14px 8px;
  color: var(--fg);
  font-family: var(--grotesk);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav__drawer-link:last-child { border-bottom: 0; }
.nav__drawer-link--active { color: var(--accent); }
.nav__drawer-link--active::before {
  content: ""; width: 4px; height: 4px; background: var(--accent);
  display: inline-block;
}

/* ---------- Variant picker (on-page, subtle) ---------- */
.variant-rail {
  border-bottom: 1px solid var(--hair);
  background: var(--bg);
}
.variant-rail__inner {
  max-width: var(--shell-max); margin: 0 auto;
  padding: 10px var(--shell-pad);
  display: flex; align-items: center; gap: 16px;
  font-family: var(--grotesk); font-size: 12px; letter-spacing: -0.005em;
  color: var(--dim); text-transform: none;
}
.variant-rail__label { color: var(--faint); }
.variant-rail__opts { display: flex; gap: 2px; }
.variant-rail__opt {
  padding: 6px 10px; border: 1px solid transparent; color: var(--dim);
}
.variant-rail__opt:hover { color: var(--fg); }
.variant-rail__opt[aria-pressed="true"] {
  border-color: var(--hair-2); color: var(--fg);
}

/* ---------- Shared heading scale (WAM typography) ----------
   Base typography for hero/section titles across pages.
   Page-scoped titles (e.g. .pr-hero__title, .dc-step__title) inherit
   these sizes via shared class names — see docs.astro / pricing.astro. */
.wam-hero-title {
  font-family: var(--grotesk);
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.wam-hero-title em {
  font-style: normal;
  color: color-mix(in oklab, var(--fg) 60%, transparent);
}
.wam-section-h {
  font-family: var(--grotesk);
  font-size: var(--fs-section);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.wam-section-h em {
  font-style: normal;
  color: var(--accent);
}

/* Shared hero kicker — small labeled line with accent dot.
   Used on /pricing, /docs, /, /updates, legal pages. Page-specific
   classes (.manifesto__kicker, .lg-hero__kicker, etc.) keep only
   layout/margin; typography lives here. */
.wam-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--grotesk);
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--dim);
  font-weight: 500;
}
.wam-kicker i {
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  display: inline-block;
}

/* Shared hero lede — single-paragraph hero subtitle. Used on
   /pricing, /docs, /updates, legal pages. Manifesto on / uses a
   different 2-column body-intro pattern (.manifesto__lede) and
   stays separate. */
.wam-hero-lede {
  font-family: var(--grotesk);
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--body-sub);
  font-weight: 400;
  margin: 0;
}

/* ============================================================
   VARIANT A — EDITORIAL
   Newspaper-journal rhythm. Serif headlines, grid of leading,
   dateline block, drop-cap intro on the hero release.
   ============================================================ */
.ed {
  max-width: var(--shell-max); margin: 0 auto;
  padding: 0 var(--shell-pad) 24px;
}
.ed__masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  padding-bottom: 20px;
  margin-bottom: 48px;
}
.ed__masthead-meta {
  font-family: var(--grotesk); font-size: 13px; letter-spacing: -0.005em;
  color: var(--dim); font-weight: 500;
  display: flex; gap: 20px;
}
.ed__masthead-meta span b { color: var(--fg); font-weight: 500; }
.ed__masthead-title {
  font-family: var(--grotesk); font-size: 88px; line-height: 0.9;
  letter-spacing: -0.045em; font-weight: 600;
  text-align: center;
}
.ed__masthead-right {
  text-align: right;
  font-family: var(--grotesk); font-size: 13px; letter-spacing: -0.005em;
  color: var(--dim); font-weight: 500;
}
.ed__masthead-right b { display: block; color: var(--fg); font-weight: 500; font-size: 14px; }

.ed__hero {
  display: block;
  padding: 80px 80px 72px;
  margin: 0 calc(var(--shell-pad) * -1) 0;
  background: var(--elev);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Soft animated blob — accent blue, very subtle */
.ed__hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto auto;
  width: 80%; height: 180%;
  background:
    radial-gradient(closest-side at 60% 40%, color-mix(in oklch, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(closest-side at 40% 60%, color-mix(in oklch, var(--accent) 35%, transparent), transparent 70%);
  filter: blur(60px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  animation: wam-blob 18s ease-in-out infinite alternate;
  border-radius: 50%;
}
[data-theme="light"] .ed__hero::before { opacity: 0.35; }

/* Grain overlay */
.ed__hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}
[data-theme="light"] .ed__hero::after { opacity: 0.12; mix-blend-mode: multiply; }

.ed__hero > * { position: relative; z-index: 2; }

@keyframes wam-blob {
  0%   { transform: translate(0%, 0%) scale(1) rotate(0deg); }
  33%  { transform: translate(-8%, 6%) scale(1.1) rotate(12deg); }
  66%  { transform: translate(6%, -4%) scale(0.95) rotate(-8deg); }
  100% { transform: translate(-4%, 8%) scale(1.05) rotate(6deg); }
}

.ed__hero-meta {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--grotesk); font-size: 13px; letter-spacing: -0.005em;
  color: var(--dim); font-weight: 500;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.ed__hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 600;
}
.ed__hero-badge i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: wam-pulse 2s ease-out infinite;
}
.ed__hero-meta .ed__v {
  font-family: var(--grotesk); font-size: 13px; color: var(--fg);
  font-weight: 600; letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center;
}
.ed__hero-meta .ed__v b { color: var(--accent); font-weight: 600; }
.ed__hero-meta .ed__hero-date,
.ed__hero-meta .ed__hero-tag { color: var(--dim); }

/* ed hero h2/intro: typography from .wam-hero-title / .wam-hero-lede */
.ed__hero-body h2 {
  margin-bottom: 24px;
  text-wrap: balance;
  max-width: 22ch;
}
.ed__hero-body .ed__intro {
  margin-bottom: 36px;
  max-width: 64ch;
}
.ed__hero-cols {
  column-count: 3; column-gap: 48px;
  padding-top: 28px;
}
.ed__section { break-inside: avoid; margin-bottom: 28px; }
.ed__section-title {
  font-family: var(--grotesk); font-size: 12px; letter-spacing: -0.005em;
  color: var(--dim); font-weight: 600;
  margin-bottom: 8px; display: flex; justify-content: space-between;
}
.ed__section-title span:last-child { color: var(--faint); }
.ed__li {
  font-family: var(--grotesk); font-size: 14.5px; line-height: 1.5;
  padding: 6px 0; display: grid; grid-template-columns: 22px 1fr; gap: 6px;
  letter-spacing: -0.003em;
}
.ed__li::before {
  content: "—"; color: var(--dim); font-family: var(--grotesk);
}
@keyframes wam-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(53,100,231,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(53,100,231,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,100,231,0); }
}
.ed__hero-aside,
.ed__hero-stamp { display: none; }

.ed__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 0 calc(var(--shell-pad) * -1);
  padding: 0;
}
.ed__grid { background: transparent; }
.ed__card {
  padding: 36px 40px;
  cursor: pointer; transition: background .15s, color .15s;
  background: var(--elev);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* Living grain on cards — barely visible texture, slowly drifts */
.ed__card::after {
  content: "";
  position: absolute; inset: -30%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.04;
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
  animation: wam-grain 28s ease-in-out infinite;
  transition: opacity .25s ease;
  will-change: transform;
}
[data-theme="light"] .ed__card::after { opacity: 0.06; mix-blend-mode: multiply; }

.ed__card:nth-child(2n)::after { animation-duration: 32s; animation-delay: -6s; }
.ed__card:nth-child(3n)::after { animation-duration: 24s; animation-delay: -14s; }
.ed__card:nth-child(4n)::after { animation-duration: 36s; animation-delay: -20s; }

.ed__card > * { position: relative; z-index: 2; }

.ed__card:hover { background: var(--accent); color: #fff; }
.ed__card:hover::after { opacity: 0.08; mix-blend-mode: overlay; }
.ed__card:hover h3,
.ed__card:hover p,
.ed__card:hover .ed__card-top,
.ed__card:hover .ed__card-top .ed__v-small,
.ed__card:hover .ed__pill { color: #fff; }
.ed__card:hover .ed__pill { border-color: rgba(255,255,255,0.35); }
.ed__card-top .ed__v-small b { color: var(--accent); font-weight: 600; }
.ed__card:hover .ed__card-top .ed__v-small b { color: #fff; }

@keyframes wam-grain {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  20%  { transform: translate3d(-4%, 3%, 0) scale(1.02); }
  40%  { transform: translate3d(3%, -4%, 0) scale(1.01); }
  60%  { transform: translate3d(-3%, -3%, 0) scale(1.03); }
  80%  { transform: translate3d(4%, 2%, 0) scale(1); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.ed__card-top {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px; font-family: var(--grotesk); font-size: 12px;
  letter-spacing: -0.005em; color: var(--dim); font-weight: 500;
}
.ed__card-top .ed__v-small {
  font-family: var(--grotesk); font-size: 28px; line-height: 1;
  color: var(--fg); letter-spacing: -0.03em; font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}
.ed__card h3 {
  font-family: var(--grotesk); font-size: 28px; line-height: 1.08;
  font-weight: 600; letter-spacing: -0.028em; margin-bottom: 14px;
  text-wrap: balance;
}
.ed__card p {
  font-family: var(--grotesk); font-size: 15px; line-height: 1.5;
  color: var(--body-sub); margin-bottom: 18px; letter-spacing: -0.003em;
}
.ed__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.ed__pill {
  font-family: var(--grotesk); font-size: 12px; letter-spacing: -0.005em;
  padding: 6px 12px;
  border: 1px solid var(--hair-2); color: var(--dim);
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: baseline; gap: 6px;
  font-weight: 500;
  line-height: 1;
}
.ed__pill b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

.ed__foot {
  margin-top: 40px; padding-top: 24px;
  font-family: var(--grotesk); font-size: 13px; letter-spacing: -0.005em;
  color: var(--dim); font-weight: 500;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.ed__foot-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  line-height: 1.6;
}
.ed__foot-line b { color: var(--fg); font-weight: 500; }
.ed__foot-dot { color: var(--faint); }
.ed__foot a { color: var(--dim); text-decoration: none; }
.ed__foot a:hover { color: var(--fg); }
.ed__foot-mark {
  color: var(--fg); font-family: "Archivo Black", var(--grotesk);
  font-size: 16px; letter-spacing: -0.01em; font-weight: 900;
  text-transform: none;
}

/* ---- /updates mobile polish (see issue #138) ----
   Tablet/phone tuning for .ed__* classes. The shared 960px block earlier
   in this file handles grid collapse and title scaling; the rules below
   reduce padding and typography scale that the default rules don't cover,
   and add the 600px step that matches the pattern used by other pages. */
@media (max-width: 960px) {
  .ed__hero { padding: 48px 36px 40px; margin: 0; border-radius: var(--radius-lg); }
  .ed__hero-body h2 { max-width: none; }
  .ed__hero-cols { padding-top: 20px; }
  .ed__grid { margin: 0; gap: 1px; background: var(--hair-2); }
  .ed__grid > .ed__card { background: var(--elev); }
  .ed__card-top { flex-wrap: wrap; row-gap: 6px; }
  .ed__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 600px) {
  .ed { padding: 0 16px 20px; }
  .ed__masthead { margin-bottom: 32px; padding-bottom: 16px; }
  .ed__masthead-title { font-size: 44px; }
  .ed__masthead-meta { gap: 12px; flex-wrap: wrap; }
  .ed__hero { padding: 36px 24px 32px; }
  .ed__hero-meta { gap: 12px; margin-bottom: 20px; }
  .ed__hero-body h2 { font-size: 32px; }
  .ed__hero-body .ed__intro { font-size: 16px; margin-bottom: 24px; }
  .ed__card { padding: 24px 20px; }
  .ed__card h3 { font-size: 24px; }
  .ed__card-top .ed__v-small { font-size: 24px; }
  .ed__pills { gap: 6px; }
  .ed__pill { padding: 5px 10px; font-size: 11px; }
}

/* ============================================================
   VARIANT B — TERMINAL
   Full-width monospace canvas. Log-file cadence, block cursor,
   fixed left gutter line numbers, no serifs at all.
   ============================================================ */
.term {
  font-family: var(--mono);
  max-width: 1100px; margin: 0 auto;
  padding: 32px var(--shell-pad) 120px;
  font-size: 13px; line-height: 1.65;
}
.term__prompt {
  color: var(--dim);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hair-2);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
}
.term__prompt .term__sig { color: var(--accent); }
.term__prompt .term__cmd { color: var(--fg); }
.term__prompt .term__cur {
  display: inline-block; width: 8px; height: 14px;
  background: var(--fg); animation: blink 1.1s steps(2, start) infinite;
  vertical-align: middle;
}
@keyframes blink { to { visibility: hidden; } }

.term__banner {
  padding: 12px 0 24px;
  font-size: 11px; color: var(--dim); white-space: pre;
  overflow-x: auto;
}
.term__banner b { color: var(--fg); }
.term__banner .term__accent { color: var(--accent); }

.term__release {
  padding: 36px 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  position: relative;
}
.term__release + .term__release { border-top: 1px solid var(--hair-2); }
.term__release--first { border-top: 0; }
.term__release:hover { background: transparent; }
.term__release:hover .term__body h3 { color: var(--accent); }

.term__gutter {
  color: var(--faint); font-size: 11px;
  display: flex; flex-direction: column; gap: 6px;
}
.term__gutter .term__vbig {
  color: var(--fg); font-size: 24px; line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.term__gutter .term__vbig b { color: var(--accent); }
.term__gutter .term__date { color: var(--dim); }
.term__gutter .term__tag {
  display: inline-block; padding: 2px 6px;
  border: 1px solid var(--hair-2); text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.12em; color: var(--dim);
  width: fit-content;
}
.term__gutter .term__tag--minor { color: var(--accent); border-color: var(--accent); }

.term__body h3 {
  font-family: var(--mono); font-size: 18px; font-weight: 500;
  margin-bottom: 6px; letter-spacing: -0.005em;
}
.term__body h3::before {
  content: "// "; color: var(--dim); font-weight: 400;
}
.term__body .term__intro {
  color: var(--body-sub); font-size: 13px; margin-bottom: 18px;
  max-width: 72ch;
}
.term__block { margin-top: 18px; }
.term__block-h {
  color: var(--dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  display: flex; justify-content: space-between;
}
.term__block-h .term__pfx { font-weight: 500; }
.term__block--added .term__pfx { color: var(--tag-add); }
.term__block--changed .term__pfx { color: var(--tag-chg); }
.term__block--fixed .term__pfx { color: var(--tag-fix); }

.term__li {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px;
  padding: 3px 0; font-size: 13px; color: var(--fg);
}
.term__li .term__li-mk { color: var(--faint); }
.term__block--added .term__li .term__li-mk { color: var(--tag-add); }
.term__block--changed .term__li .term__li-mk { color: var(--tag-chg); }
.term__block--fixed .term__li .term__li-mk { color: var(--tag-fix); }

.term__foot {
  margin-top: 64px; padding-top: 20px;
  border-top: 1px solid var(--hair-2);
  color: var(--faint); font-size: 11px;
  display: flex; justify-content: space-between;
}
.term__foot a { color: var(--dim); border-bottom: 1px dotted var(--hair-2); }
.term__foot a:hover { color: var(--fg); }

/* ============================================================
   VARIANT C — BRUTALIST
   Raw grid, oversized version numerals as sculpture, hard
   borders everywhere, blocky tags, tight line-height on heads.
   ============================================================ */
.br {
  max-width: 1360px; margin: 0 auto;
  padding: 0 var(--shell-pad) 120px;
}
.br__hero {
  padding: 56px 0 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: end;
}
.br__hero-num {
  font-family: var(--grotesk); font-weight: 600;
  font-size: clamp(140px, 22vw, 320px); line-height: 0.82;
  letter-spacing: -0.06em; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.br__hero-num b { color: var(--accent); font-weight: 500; }
.br__hero-right h2 {
  font-family: var(--grotesk); font-size: 44px; line-height: 1.0;
  letter-spacing: -0.04em; font-weight: 700;
  margin-bottom: 20px; text-wrap: balance;
}
.br__hero-right p {
  font-size: 17px; line-height: 1.5; color: var(--body-sub);
  max-width: 48ch; margin-bottom: 24px;
}
.br__hero-meta {
  display: inline-flex; gap: 20px;
  font-family: var(--grotesk); font-size: 13px; letter-spacing: -0.005em;
  font-weight: 500;
}
.br__hero-meta > div {
  color: var(--dim);
}
.br__hero-meta b { color: var(--fg); font-weight: 500; }

.br__hero-blocks {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px; margin-top: 56px;
}
.br__block {
  padding: 0;
}
.br__block:last-child { /* no border */ }
.br__block-h {
  font-family: var(--grotesk); font-size: 12px; letter-spacing: -0.005em;
  font-weight: 600; margin-bottom: 14px;
  display: flex; justify-content: space-between; color: var(--dim);
}
.br__block-h b { color: var(--fg); font-weight: 500; }
.br__block--add .br__block-h b { color: var(--tag-add); }
.br__block--chg .br__block-h b { color: var(--tag-chg); }
.br__block--fix .br__block-h b { color: var(--tag-fix); }
.br__block ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.br__block li {
  font-size: 14px; line-height: 1.4; color: var(--fg);
  padding-left: 16px; position: relative;
}
.br__block li::before {
  content: ""; width: 6px; height: 6px; background: var(--fg);
  position: absolute; left: 0; top: 8px;
}
.br__block--add li::before { background: var(--tag-add); }
.br__block--chg li::before { background: var(--tag-chg); }
.br__block--fix li::before { background: var(--tag-fix); }

.br__log {
  margin-top: 72px;
}
.br__log-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 0;
  border-bottom: 1px solid var(--hair-2);
}
.br__log-head h2 {
  font-family: var(--grotesk); font-size: 30px; font-weight: 700;
  letter-spacing: -0.035em;
}
.br__log-head span {
  font-family: var(--grotesk); font-size: 13px; letter-spacing: -0.005em;
  color: var(--dim); font-weight: 500;
}

.br__row {
  display: grid; grid-template-columns: 240px 1fr 320px;
  border-bottom: 1px solid var(--hair-2);
  transition: background .15s;
}
.br__row:hover { background: transparent; }
.br__row:hover .br__row-main h3 { color: var(--accent); }
.br__row > div { padding: 32px 24px 32px 0; }
.br__row-v {
  font-family: var(--grotesk); font-weight: 600;
  font-size: 56px; line-height: 0.95; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 160px;
}
.br__row-v b { color: var(--accent); font-weight: 500; }
.br__row-v .br__row-meta {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); font-weight: 400;
  display: flex; justify-content: space-between; align-items: center;
}
.br__row-main h3 {
  font-family: var(--grotesk); font-size: 22px; font-weight: 600;
  line-height: 1.1; letter-spacing: -0.028em; margin-bottom: 10px;
  text-wrap: balance;
}
.br__row-main p {
  font-size: 14px; line-height: 1.5; color: var(--body-sub);
  max-width: 56ch;
}
.br__row-stats {
  font-family: var(--grotesk); font-size: 13px; letter-spacing: -0.005em;
  color: var(--dim); font-weight: 500;
  display: flex; flex-direction: column; gap: 8px;
  justify-content: center;
}
.br__row-stats .br__stat {
  display: flex; justify-content: space-between;
  padding: 4px 0;
}
.br__row-stats .br__stat b { color: var(--fg); font-weight: 500; }
.br__row-stats .br__stat--add b { color: var(--tag-add); }
.br__row-stats .br__stat--chg b { color: var(--tag-chg); }
.br__row-stats .br__stat--fix b { color: var(--tag-fix); }

.br__foot {
  margin-top: 64px; padding-top: 20px;
  border-top: 1px solid var(--hair-2);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
.br__foot > div {
  padding: 0;
  font-family: var(--grotesk); font-size: 13px; letter-spacing: -0.005em;
  color: var(--dim); font-weight: 500;
}
.br__foot b { display: block; color: var(--fg); font-weight: 500; font-size: 13px; margin-top: 4px; }

/* ---------- Tweaks panel ---------- */
.tweaks {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  background: var(--elev); border: 1px solid var(--hair-2);
  padding: 16px; min-width: 240px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  display: none; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.tweaks.open { display: block; }
.tweaks__h {
  display: flex; justify-content: space-between;
  margin-bottom: 12px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px;
}
.tweaks__group { margin-bottom: 14px; }
.tweaks__label { color: var(--faint); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 6px; }
.tweaks__row { display: flex; gap: 2px; }
.tweaks__row button {
  flex: 1; padding: 6px 8px; border: 1px solid var(--hair);
  color: var(--dim); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tweaks__row button[aria-pressed="true"] {
  border-color: var(--fg); color: var(--fg); background: var(--elev-2);
}
.tweaks__swatches { display: flex; gap: 6px; }
.tweaks__swatch {
  width: 22px; height: 22px; border: 1px solid var(--hair-2);
  padding: 0; position: relative;
}
.tweaks__swatch[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: -3px;
  border: 1px solid var(--fg);
}

/* ---------- Font family switcher ---------- */
[data-font="geist"]     { --grotesk: "Geist", sans-serif; --sans: "Geist", sans-serif; }
[data-font="space"]     { --grotesk: "Space Grotesk", sans-serif; --sans: "Space Grotesk", sans-serif; }
[data-font="manrope"]   { --grotesk: "Manrope", sans-serif; --sans: "Manrope", sans-serif; }
[data-font="unbounded"] { --grotesk: "Unbounded", sans-serif; --sans: "Manrope", sans-serif; }
[data-font="onest"]     { --grotesk: "Onest", sans-serif; --sans: "Onest", sans-serif; }
[data-font="jakarta"]   { --grotesk: "Plus Jakarta Sans", sans-serif; --sans: "Plus Jakarta Sans", sans-serif; }

/* Unbounded is display-only — dial heads down a touch */
[data-font="unbounded"] .ed__masthead-title,
[data-font="unbounded"] .br__hero-right h2 { letter-spacing: -0.05em; }
[data-font="unbounded"] .ed__hero-body h2 { font-size: 46px; letter-spacing: -0.045em; }
[data-font="unbounded"] .ed__card h3,
[data-font="unbounded"] .br__row-main h3 { font-weight: 500; letter-spacing: -0.035em; }

/* ---------- Grid experiments ---------- */
[data-grid="wide"]       { --shell-max: 1440px; }
[data-grid="standard"]   { --shell-max: 1240px; }
[data-grid="asymmetric"] { --shell-max: 1240px; }
[data-grid="dense"]      { --shell-max: 1440px; }
[data-grid="loose"]      { --shell-max: 1040px; }
.ed, .term, .br, .nav__inner, .variant-rail__inner { max-width: var(--shell-max); }

/* Editorial grid variants */
[data-grid="wide"] .ed__hero       { grid-template-columns: 180px 1fr 280px; gap: 64px; }
[data-grid="asymmetric"] .ed__hero { grid-template-columns: 1fr 2.4fr; gap: 56px; }
[data-grid="asymmetric"] .ed__hero-aside { display: none; }
[data-grid="dense"] .ed__grid       { grid-template-columns: repeat(3, 1fr); }
[data-grid="dense"] .ed__card:nth-child(odd)  { border-right: 1px solid var(--hair-2); }
[data-grid="dense"] .ed__card:nth-child(3n)   { border-right: 0; }
[data-grid="dense"] .ed__card   { padding: 28px 24px; }
[data-grid="dense"] .ed__card h3 { font-size: 22px; }
[data-grid="dense"] .ed__hero-cols { column-count: 3; }
[data-grid="loose"] .ed__hero   { grid-template-columns: 1fr; gap: 24px; }
[data-grid="loose"] .ed__hero-stamp,
[data-grid="loose"] .ed__hero-aside { flex-direction: row; flex-wrap: wrap; gap: 16px; }
[data-grid="loose"] .ed__hero-cols { column-count: 1; }
[data-grid="loose"] .ed__grid   { grid-template-columns: 1fr; }
[data-grid="loose"] .ed__card:nth-child(odd) { border-right: 0; }
[data-grid="loose"] .ed__card  { padding: 48px 0; }

/* Brutalist grid variants */
[data-grid="asymmetric"] .br__hero  { grid-template-columns: 1.3fr 1fr; }
[data-grid="wide"] .br__hero        { grid-template-columns: 1fr 1.2fr; }
[data-grid="dense"] .br__row        { grid-template-columns: 180px 1fr 260px 180px; }
[data-grid="dense"] .br__row::after { content: ""; border-left: 1px solid var(--rule-strong); }
[data-grid="dense"] .br__hero-blocks { grid-template-columns: repeat(4, 1fr); }
[data-grid="dense"] .br__hero-blocks .br__block:nth-child(4) { display: none; }
[data-grid="loose"] .br__hero       { grid-template-columns: 1fr; gap: 24px; }
[data-grid="loose"] .br__hero-blocks { grid-template-columns: 1fr; }
[data-grid="loose"] .br__block      { border-right: 0; border-bottom: 1px solid var(--rule-strong); }
[data-grid="loose"] .br__row        { grid-template-columns: 1fr; }
[data-grid="loose"] .br__row-v      { border-right: 0; border-bottom: 1px solid var(--rule-strong); min-height: auto; }
[data-grid="loose"] .br__row-stats  { border-left: 0; border-top: 1px solid var(--rule-strong); }

/* Terminal grid variants */
[data-grid="wide"] .term      { max-width: 1280px; }
[data-grid="loose"] .term     { max-width: 820px; }
[data-grid="dense"] .term     { max-width: 1440px; font-size: 12.5px; }
[data-grid="asymmetric"] .term__release { grid-template-columns: 180px 1fr; gap: 48px; }

.tweaks__row--wrap { flex-wrap: wrap; gap: 4px; }
.tweaks__row--wrap button { flex: 1 0 30%; }
@media (max-width: 960px) {
  .nav__inner { grid-template-columns: auto 1fr auto; padding: 12px var(--shell-pad); }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  /* Brand collapses to a single iconic row — the marks lockup alone is
     enough on mobile, and the label was wrapping to 2 lines, making the
     nav bar visually taller than all the 36px pill controls. */
  .brand__label { display: none; }
  .brand { gap: 0; }
  .ed { padding: 0 20px 24px; }
  .ed__masthead { grid-template-columns: 1fr; text-align: left; }
  .ed__masthead-title { font-size: 56px; text-align: left; }
  .ed__masthead-right { text-align: left; }
  .ed__hero { grid-template-columns: 1fr; gap: 20px; }
  .ed__hero-meta { flex-wrap: wrap; row-gap: 8px; }
  .ed__hero-body h2 { font-size: 40px; }
  .ed__hero-cols { column-count: 1; }
  .ed__card { padding: 28px 24px; }
  .ed__grid { grid-template-columns: 1fr; }
  .ed__card:nth-child(odd) { border-right: 0; }
  .br__hero { grid-template-columns: 1fr; gap: 32px; }
  .br__hero-blocks { grid-template-columns: 1fr; }
  .br__block { border-right: 0; border-bottom: 1px solid var(--fg); }
  .br__row { grid-template-columns: 1fr; }
  .br__row-v { border-right: 0; border-bottom: 1px solid var(--fg); min-height: auto; }
  .br__row-stats { border-left: 0; border-top: 1px solid var(--fg); }
  .br__foot { grid-template-columns: 1fr 1fr; }
}

/* ---------- Shell: Masthead (page-title band after nav) ---------- */
.wam-mast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  padding: 32px var(--shell-pad) 20px;
  margin: 0 auto 24px;
  max-width: var(--shell-max);
}
.wam-mast__meta {
  font-family: var(--grotesk);
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--dim);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.wam-mast__meta b { color: var(--fg); font-weight: 500; }
.wam-mast__meta--right { justify-content: flex-end; text-align: right; }
.wam-mast__meta--right b {
  display: block;
  color: var(--fg);
  font-weight: 500;
  font-size: 14px;
}
.wam-mast__meta--right span { display: block; color: var(--dim); }
.wam-mast__title {
  font-family: var(--grotesk);
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-weight: 600;
  text-align: center;
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
}
@media (max-width: 960px) {
  .wam-mast { grid-template-columns: 1fr; text-align: left; }
  .wam-mast__meta--right { justify-content: flex-start; text-align: left; }
  .wam-mast__title { font-size: 56px; text-align: left; }
}

/* ---- Page: Status ---- */

.status-page {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad) 24px;
}

/* ---------- HERO / OVERALL ---------- */
.st-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0 calc(var(--shell-pad) * -1) 0;
  border-radius: var(--radius-lg);
  padding: 80px 80px 72px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.st-hero__kicker {
  color: var(--status-ok);
  margin-bottom: 24px;
}
.st-hero__kicker i {
  width: 8px; height: 8px;
  background: var(--status-ok);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--status-ok) 22%, transparent);
  animation: st-pulse 2.4s ease-in-out infinite;
}
@keyframes st-pulse {
  0%,100%{ box-shadow: 0 0 0 4px color-mix(in oklab, var(--status-ok) 22%, transparent); }
  50%    { box-shadow: 0 0 0 8px color-mix(in oklab, var(--status-ok) 8%, transparent); }
}
.st-hero__title {
  margin: 0 0 24px;
}
.st-hero__title em { font-style: normal; color: var(--status-ok); }
.st-hero__lede {
  margin: 0 0 28px;
}
.st-hero__stamp {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 16px;
}
.st-hero__stamp b { color: var(--fg); font-weight: 500; }

.st-hero__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.st-metric {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
}
.st-metric__label {
  font-family: var(--grotesk);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
}
.st-metric__value {
  font-family: var(--grotesk);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.st-metric__value small {
  font-size: 20px;
  color: var(--dim);
  font-weight: 500;
  margin-left: 4px;
  letter-spacing: -0.01em;
}
.st-metric__foot {
  font-family: var(--grotesk);
  font-size: 12px;
  color: var(--dim);
}

/* ---------- COMPONENTS STATUS ---------- */
.st-components {
  margin: 0 calc(var(--shell-pad) * -1) 0;
  border-radius: var(--radius-lg);
  padding: 64px 80px;
}
.st-components__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
}
.st-components__h h2 {
  margin: 0;
}
.st-components__h-sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.st-components__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.st-row {
  display: grid;
  grid-template-columns: 220px 1fr 120px;
  gap: 32px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--hair-2);
}
.st-row:last-child { border-bottom: 0; }
.st-row__name {
  font-family: var(--grotesk);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  display: flex; align-items: center; gap: 12px;
}
.st-row__dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
}
.st-row__dot--ok      { background: var(--status-ok);   box-shadow: 0 0 0 3px color-mix(in oklab, var(--status-ok)   20%, transparent); }
.st-row__dot--warn    { background: var(--status-warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--status-warn) 20%, transparent); }
.st-row__dot--down    { background: var(--status-down); box-shadow: 0 0 0 3px color-mix(in oklab, var(--status-down) 20%, transparent); }
.st-row__dot--unknown { background: var(--dim); opacity: 0.5; box-shadow: 0 0 0 3px color-mix(in oklab, var(--dim) 14%, transparent); }
.st-row__bars {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  align-items: center;
  height: 26px;
}
.st-bar {
  width: 5px;
  height: 100%;
  border-radius: 2px;
  background: var(--status-ok);
  opacity: 0.85;
}
.st-bar--warn  { background: var(--status-warn); }
.st-bar--down  { background: var(--status-down); }
.st-bar--na    { background: var(--hair-2); opacity: 0.5; }
.st-row__meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--dim);
  text-align: right;
}
.st-row__meta b { color: var(--fg); font-weight: 500; }
.st-row--unknown { opacity: 0.5; }
.st-history-placeholder {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 16px 0 0;
  opacity: 0.7;
}

/* ---------- INCIDENTS ---------- */
.st-incidents {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
  margin: 0 calc(var(--shell-pad) * -1);
}
.st-log {
  border-radius: var(--radius-lg);
  padding: 64px 80px;
}
.st-log__h {
  margin: 0 0 32px;
}
.st-log__items {
  display: flex;
  flex-direction: column;
}
.st-inc {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hair-2);
}
.st-inc:last-child { border-bottom: 0; }
.st-inc__date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.st-inc__date b { color: var(--fg); font-weight: 500; }
.st-inc__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--grotesk);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.st-inc__badge-dot { width: 7px; height: 7px; border-radius: 50%; }
.st-inc__badge--ok   { color: var(--status-ok); }
.st-inc__badge--warn { color: var(--status-warn); }
.st-inc__badge--down { color: var(--status-down); }
.st-inc__badge--ok   .st-inc__badge-dot { background: var(--status-ok); }
.st-inc__badge--warn .st-inc__badge-dot { background: var(--status-warn); }
.st-inc__badge--down .st-inc__badge-dot { background: var(--status-down); }
.st-inc__title {
  font-family: var(--grotesk);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 8px;
}
.st-inc__body {
  font-family: var(--grotesk);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--dim);
  margin: 0 0 8px;
}
.st-inc__body b { color: var(--fg); font-weight: 500; }
.st-inc__foot {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex; gap: 18px;
}

.st-subscribe {
  border-radius: var(--radius-lg);
  padding: 64px 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.st-subscribe__kicker {
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
  margin-bottom: 20px;
}
.st-subscribe__title {
  margin: 0 0 18px;
}
.st-subscribe__title em { font-style: normal; color: var(--accent); }
.st-subscribe__body {
  font-family: var(--grotesk);
  font-size: 15px;
  line-height: 1.55;
  color: var(--dim);
  margin: 0;
}
.st-subscribe__body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.st-subscribe__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-subscribe__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair-2);
  text-decoration: none;
  color: var(--fg);
  transition: color 0.2s;
}
.st-subscribe__link:last-child { border-bottom: 0; }
.st-subscribe__link:hover { color: var(--accent); }
.st-subscribe__link-name {
  font-family: var(--grotesk);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 12px;
}
.st-subscribe__link-kind {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- MOBILE ---------- */
@media (max-width: 960px) {
  .st-hero { grid-template-columns: 1fr; padding: 48px 36px 40px; gap: 36px; }
  .st-components { padding: 40px 36px; }
  .st-row { grid-template-columns: 1fr auto; gap: 16px; }
  .st-row__bars { grid-column: 1/-1; justify-content: flex-start; }
  .st-incidents { grid-template-columns: 1fr; }
  .st-log, .st-subscribe { padding: 40px 36px; }
  .st-inc { grid-template-columns: 1fr; gap: 12px; }
}

/* Surfaces via shared --elev token; see :root for values. */
.st-hero,
.st-components,
.st-log,
.st-subscribe { background: var(--elev); }

/* Blob + grain from Home/Updates hero */
.st-hero > * { position: relative; z-index: 2; }
.st-hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto auto;
  width: 80%; height: 180%;
  background:
    radial-gradient(closest-side at 60% 40%, color-mix(in oklch, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(closest-side at 40% 60%, color-mix(in oklch, var(--accent) 35%, transparent), transparent 70%);
  filter: blur(60px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  animation: wam-blob 18s ease-in-out infinite alternate;
  border-radius: 50%;
}
[data-theme="light"] .st-hero::before { opacity: 0.35; }
.st-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}
[data-theme="light"] .st-hero::after { opacity: 0.12; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) {
  .st-hero::before { animation: none !important; }
}

/* ---- Page: Pricing ---- */

.pricing-page {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad) 24px;
}

/* ---------- HERO: single plan card ---------- */
.pr-hero {
  position: relative;
  margin: 0 calc(var(--shell-pad) * -1) 0;
  padding: 80px 80px 72px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: start;
}
.pr-hero { background: var(--elev); }
.pr-hero > * { position: relative; z-index: 2; }

.pr-hero__trust {
  font-family: var(--grotesk);
  font-size: 13px;
  color: var(--dim);
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 24px;
  margin-top: 8px;
}
.pr-hero__trust b { color: var(--fg); font-weight: 500; }

/* ---------- Plan card (right side of hero) ---------- */
.pr-plan {
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.pr-plan__label {
  font-family: var(--grotesk);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
  font-weight: 500;
}

.pr-plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.pr-plan__price-num {
  font-family: var(--grotesk);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.pr-plan__price-cur {
  font-family: var(--grotesk);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  color: var(--dim);
}
.pr-plan__period {
  font-family: var(--grotesk);
  font-size: 15px;
  color: var(--dim);
  margin-bottom: 28px;
}
.pr-plan__period b { color: var(--fg); font-weight: 500; }

.pr-plan__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 24px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--grotesk);
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  letter-spacing: -0.01em;
  transition: filter 0.2s;
}
.pr-plan__cta:hover { filter: brightness(1.1); }
.pr-plan__cta-note {
  font-family: var(--grotesk);
  font-size: 12px;
  color: var(--dim);
  text-align: center;
  margin-top: 14px;
  letter-spacing: -0.005em;
}

/* ---------- FEATURES list ---------- */
.pr-features {
  margin: 0 calc(var(--shell-pad) * -1) 0;
  border-radius: var(--radius-lg);
  padding: 64px 80px;
}
.pr-features { background: var(--elev); }
.pr-features__h {
  font-family: var(--grotesk);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 32px;
}
.pr-features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 64px;
}
.pr-feat {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 20px 0;
}

.pr-feat__n {
  font-family: var(--grotesk);
  font-size: 12px;
  font-weight: 500;
  color: var(--dim);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.pr-feat__body {
  font-family: var(--grotesk);
  font-size: 17px;
  line-height: 1.45;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.pr-feat__body b { color: var(--fg); font-weight: 600; }
.pr-feat__body code {
  font-family: var(--mono);
  font-size: 14px;
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  padding: 2px 6px;
  border-radius: 6px;
}

/* ---------- INFO TILES (Tokens / Data / Cancel / Entity) ---------- */
.pr-info {
  margin: 0 calc(var(--shell-pad) * -1) 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
/* Unified tile — used on /pricing and /docs. Pricing tiles have
   no footer; docs tiles add a <div class="wam-tile__meta"> footer. */
.wam-tile {
  background: var(--elev);
  border-radius: var(--radius-lg);
  padding: 48px 56px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wam-tile__kicker {
  font-family: var(--grotesk);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px;
}
.wam-tile__title {
  /* typography from .wam-section-h */
  margin: 0 0 14px;
}
.wam-tile__body {
  font-family: var(--grotesk);
  font-size: 15px;
  color: var(--dim);
  line-height: 1.55;
  margin: 0;
}
.wam-tile__body b { color: var(--fg); font-weight: 500; }
.wam-tile__body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
}
.wam-tile__body code {
  font-family: var(--mono);
  font-size: 13px;
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--fg);
}
.wam-tile__meta {
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
}

/* ---------- Hero blob + grain ---------- */
.pr-hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto auto;
  width: 80%; height: 180%;
  background:
    radial-gradient(closest-side at 60% 40%, color-mix(in oklch, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(closest-side at 40% 60%, color-mix(in oklch, var(--accent) 35%, transparent), transparent 70%);
  filter: blur(60px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  animation: wam-blob 18s ease-in-out infinite alternate;
  border-radius: 50%;
}
[data-theme="light"] .pr-hero::before { opacity: 0.35; }
.pr-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}
[data-theme="light"] .pr-hero::after { opacity: 0.12; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) {
  .pr-hero::before { animation: none !important; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 960px) {
  .pr-hero {
    grid-template-columns: 1fr;
    padding: 48px 36px 40px;
    gap: 40px;
  }
  .pr-features {
    padding: 40px 36px;
  }
  .pr-features__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pr-info { grid-template-columns: 1fr; }
  .wam-tile { padding: 32px 28px; min-height: 0; }
}

/* ---- Page: Docs ---- */

.docs-page {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad) 24px;
}

/* ---------- HERO ---------- */
.dc-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0 calc(var(--shell-pad) * -1) 0;
  border-radius: var(--radius-lg);
  padding: 80px 80px 72px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: end;
}
.dc-hero__kicker {
  /* typography from .wam-kicker */
}
.dc-hero__title {
  /* typography from .wam-hero-title */
  margin: 0 0 24px;
}
.dc-hero__lede {
  /* typography from .wam-hero-lede */
  margin: 0;
}
.dc-hero__toc {
  font-family: var(--grotesk);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
}
.dc-hero__toc-h {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
  margin-bottom: 18px;
}
.dc-hero__toc a {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair-2);
  color: var(--fg);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: color 0.2s;
}
.dc-hero__toc a:last-child { border-bottom: 0; }
.dc-hero__toc a:hover { color: var(--accent); }
.dc-hero__toc .num {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--dim);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.dc-hero__toc .arr {
  color: var(--dim);
  transition: transform 0.2s, color 0.2s;
}
.dc-hero__toc a:hover .arr {
  color: var(--accent);
  transform: translateX(3px);
}

/* ---------- STEPS ---------- */
.dc-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0 calc(var(--shell-pad) * -1);
}
.dc-step {
  border-radius: var(--radius-lg);
  padding: 48px 56px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  position: relative;
}
.dc-step__num {
  font-family: var(--grotesk);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--dim);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dc-step__num-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.dc-step__title {
  /* typography from .wam-section-h */
  margin: 0;
}
.dc-step__body {
  font-family: var(--grotesk);
  font-size: 16px;
  line-height: 1.55;
  color: var(--dim);
  margin: 0;
}
.dc-step__body b { color: var(--fg); font-weight: 500; }
.dc-step__body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
}
.dc-step__body code {
  font-family: var(--mono);
  font-size: 14px;
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--fg);
}

/* ---------- COMMANDS ---------- */
.dc-cmds {
  margin: 0 calc(var(--shell-pad) * -1) 0;
  border-radius: var(--radius-lg);
  padding: 64px 80px;
}
.dc-cmds__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
}
.dc-cmds__h h2 {
  /* typography from .wam-section-h */
  margin: 0;
}
.dc-cmds__h-sub {
  font-family: var(--grotesk);
  font-size: 13px;
  color: var(--dim);
  letter-spacing: -0.005em;
}
.dc-cmds__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 48px;
}
.dc-cmd {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair-2);
}
.dc-cmd__lh {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dc-cmd code {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--accent);
  font-weight: 500;
}
.dc-cmd__scope {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.dc-cmd__desc {
  font-family: var(--grotesk);
  font-size: 15px;
  color: var(--fg);
  letter-spacing: -0.005em;
  line-height: 1.4;
}
/* remove the last row's borders */
.dc-cmds__grid .dc-cmd:nth-last-child(-n+3) { border-bottom: 0; }

/* ---------- INFO TILES (Media / Memory / Support) ---------- */
.dc-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 calc(var(--shell-pad) * -1);
}
/* .dc-tile typography now lives in .wam-tile (see above). */

/* ---------- MOBILE ---------- */
@media (max-width: 960px) {
  .dc-hero { grid-template-columns: 1fr; padding: 48px 36px 40px; gap: 40px; }
  .dc-steps { grid-template-columns: 1fr; }
  .dc-step { padding: 32px 28px; min-height: 0; }
  .dc-cmds { padding: 40px 36px; }
  .dc-cmds__grid { grid-template-columns: 1fr; gap: 0; }
  .dc-cmd { grid-template-columns: 1fr; gap: 4px; }
  .dc-cmds__grid .dc-cmd:nth-last-child(-n+3) { border-bottom: 1px solid var(--hair-2); }
  .dc-cmds__grid .dc-cmd:last-child { border-bottom: 0; }
  .dc-info { grid-template-columns: 1fr; }
}

/* Surfaces via shared --elev token; see :root for values. */
.dc-hero,
.dc-cmds,
.dc-step { background: var(--elev); }

/* Ported blob + grain from Home/Updates hero */
.dc-hero > * { position: relative; z-index: 2; }
.dc-hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto auto;
  width: 80%; height: 180%;
  background:
    radial-gradient(closest-side at 60% 40%, color-mix(in oklch, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(closest-side at 40% 60%, color-mix(in oklch, var(--accent) 35%, transparent), transparent 70%);
  filter: blur(60px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  animation: wam-blob 18s ease-in-out infinite alternate;
  border-radius: 50%;
}
[data-theme="light"] .dc-hero::before { opacity: 0.35; }
.dc-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}
[data-theme="light"] .dc-hero::after { opacity: 0.12; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) {
  .dc-hero::before { animation: none !important; }
}

/* ---- Page: Home (manifesto) ---- */
.home {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad) 24px;
}
.home .view[hidden] { display: none; }

.manifesto {
  padding-top: 0;
}

.manifesto__hero {
  position: relative;
  margin: 0 calc(var(--shell-pad) * -1) 0;
  padding: 80px 80px 72px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}
.manifesto__hero { background: var(--elev); }

.manifesto__hero > * { position: relative; z-index: 2; }

.manifesto__hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto auto;
  width: 80%; height: 180%;
  background:
    radial-gradient(closest-side at 60% 40%, color-mix(in oklch, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(closest-side at 40% 60%, color-mix(in oklch, var(--accent) 35%, transparent), transparent 70%);
  filter: blur(60px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  animation: wam-blob 18s ease-in-out infinite alternate;
  border-radius: 50%;
}
[data-theme="light"] .manifesto__hero::before { opacity: 0.35; }

.manifesto__hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}
[data-theme="light"] .manifesto__hero::after { opacity: 0.12; mix-blend-mode: multiply; }

@keyframes wam-blob {
  0%   { transform: translate(0%, 0%) scale(1) rotate(0deg); }
  33%  { transform: translate(-8%, 6%) scale(1.1) rotate(12deg); }
  66%  { transform: translate(6%, -4%) scale(0.95) rotate(-8deg); }
  100% { transform: translate(-4%, 8%) scale(1.05) rotate(6deg); }
}

/* Manifesto kicker/title: typography from .wam-kicker / .wam-hero-title */
.manifesto__kicker {
  margin-bottom: 28px;
}
.manifesto__title {
  text-wrap: balance;
  max-width: 22ch;
  margin-bottom: 48px;
}

.manifesto__lede {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1000px;
  margin-top: 40px;
}
.manifesto__lede p {
  font-family: var(--grotesk);
  font-size: 18px; line-height: 1.5; letter-spacing: -0.005em;
  color: var(--body-sub);
  text-wrap: pretty;
}
.manifesto__lede p b { color: var(--fg); font-weight: 500; }

.manifesto__cta {
  display: flex; gap: 12px; margin-top: 40px;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 18px 24px; border-radius: var(--radius-pill);
  font-family: var(--grotesk); font-size: 16px; font-weight: 600;
  letter-spacing: -0.005em;
  transition: filter .15s, color .15s, border-color .15s;
  border: 1px solid transparent;
  text-decoration: none;
}
.btn--primary {
  background: var(--accent); color: #fff;
}
.btn--primary:hover { filter: brightness(1.1); }
.btn--ghost {
  color: var(--fg); border-color: var(--hair-2);
}
.btn--ghost:hover { border-color: var(--fg); }
.btn svg { opacity: .9; }

.manifesto__body {
  margin-top: 0;
  display: grid; gap: 0;
  margin-left: calc(var(--shell-pad) * -1);
  margin-right: calc(var(--shell-pad) * -1);
}
.manifesto__section {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 32px;
  padding: 48px 56px;
  align-items: baseline;
  background: var(--bg);
  border-radius: var(--radius-lg);
}
.manifesto__section { background: var(--elev); }
.manifesto__num {
  font-family: "Archivo Black", var(--grotesk);
  font-size: 40px; line-height: 1; letter-spacing: -0.03em;
  color: var(--accent);
}
.manifesto__section h3 {
  font-family: var(--grotesk);
  font-size: 22px; line-height: 1.15; letter-spacing: -0.02em;
  font-weight: 600; color: var(--fg);
  max-width: 16ch;
  text-wrap: balance;
}
.manifesto__section p {
  font-size: 14px; line-height: 1.5; color: var(--body-sub);
  max-width: 44ch;
}
.manifesto__section-cta {
  margin-top: 10px;
  font-family: var(--grotesk); font-size: 13px; font-weight: 500;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}

.manifesto__stations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 calc(var(--shell-pad) * -1) 0;
  padding: 0;
}
.manifesto__station {
  padding: 40px 32px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none;
  transition: background .15s, color .15s;
  cursor: pointer;
}
.manifesto__station { background: var(--elev); }
.manifesto__station:hover { background: var(--accent); color: #fff; }
.manifesto__station:hover .manifesto__station-meta { color: rgba(255,255,255,.7); }
.manifesto__station-num {
  font-family: "Archivo Black", var(--grotesk);
  font-size: 14px; color: var(--dim);
}
.manifesto__station:hover .manifesto__station-num { color: rgba(255,255,255,.8); }
.manifesto__station-title {
  font-family: var(--grotesk);
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
}
.manifesto__station-meta {
  font-family: var(--grotesk); font-size: 13px;
  color: var(--dim); margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
  .manifesto__hero::before { animation: none !important; }
}

@media (max-width: 960px) {
  .manifesto__hero { padding: 48px 36px 40px; }
  .manifesto__title { font-size: clamp(42px, 9vw, 64px); }
  .manifesto__section {
    display: block;
    padding: 32px 28px;
  }
  .manifesto__num {
    display: block;
    font-size: 32px;
    margin-bottom: 12px;
  }
  .manifesto__section h3 {
    max-width: none;
    margin-bottom: 12px;
  }
  .manifesto__section p { max-width: none; }
  .manifesto__stations { grid-template-columns: repeat(2, 1fr); }
  .manifesto__lede { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 600px) {
  .manifesto__stations { grid-template-columns: 1fr; }
  .manifesto__cta { flex-direction: column; align-items: stretch; }
  .manifesto__cta .btn { justify-content: center; }
}
.ed, .nav__inner, .variant-rail__inner { max-width: var(--shell-max, 1240px); }

/* ---- Page: Updates (editorial) ---- */

/* PR link inside changelog items */
.ed__pr-link {
  color: var(--accent);
  text-decoration: none;
  font-size: inherit;
}
.ed__pr-link:hover { text-decoration: underline; }

/* Pill color modifiers for section types */
.ed__pill--added   { border-color: var(--accent); color: var(--accent); }
.ed__pill--added b { color: var(--accent); }
.ed__pill--fixed   { border-color: var(--tag-fix); color: var(--tag-fix); }
.ed__pill--fixed b { color: var(--tag-fix); }
.ed__pill--changed { border-color: var(--tag-chg); color: var(--tag-chg); }
.ed__pill--changed b { color: var(--tag-chg); }