/* ==========================================================================
   industric.ai — landing
   Bone paper and graphite ink, with fired terracotta as the one accent on
   paper and signal blue as the one accent in the dark governance console.
   Headlines are set in an editorial serif; every label, number, and control
   speaks monospace. The hero holds one drawing: the access topology, inked
   onto drafting paper, with the sentence beneath it acting as its legend.
   ========================================================================== */

:root {
  color-scheme: light;

  --paper:    #EDE9DD;
  --paper-2:  #E6E1D2;                    /* deeper stone for the Connect section */
  --paper-3:  #F6F3EA;                    /* raised plates and backing blocks */
  --ink:      #1A170F;
  --ink-2:    rgba(26 23 15 / 0.72);
  --ink-3:    rgba(26 23 15 / 0.5);
  --rule:     rgba(26 23 15 / 0.14);
  --rule-2:   rgba(26 23 15 / 0.28);
  --grid:     rgba(26 23 15 / 0.10);

  --clay:     #C2662C;                    /* fired terracotta */
  --clay-ink: #9A4A14;                    /* terracotta that reads as text on paper */
  --clay-2:   #A2521F;
  --clay-3:   #7E421F;

  --console:   #0B0D10;
  --console-2: #11141A;
  --console-3: #171B22;
  --cream:     #EDE9DC;
  --cream-2:   rgba(237 233 220 / 0.72);
  --cream-3:   rgba(237 233 220 / 0.48);
  --c-rule:    rgba(237 233 220 / 0.10);
  --c-rule-2:  rgba(237 233 220 / 0.18);

  --signal:   #68ADFF;
  --ok:       #5ED3A5;
  --no:       #FF6A5C;
  --wait:     #F0B44C;

  --serif: "Gambetta", "Iowan Old Style", Georgia, serif;
  --sans:  "Switzer", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --brand: "Geomini", var(--sans);

  --gutter: clamp(20px, 4vw, 56px);
  --max: 1320px;
  --notch: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);

  --hero-scroll: 0px;
  --mast-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

:where(#platform, #architecture, #surfaces) { scroll-margin-top: var(--mast-h); }

body {
  position: relative;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--clay); color: #FFF6E9; }

a { color: inherit; text-decoration: none; }

:where(a, button):focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

.wrap {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Machine chrome: one voice for every label on the page. */
.mch,
.surfaces__kicker,
.surf__no,
.gov__eyebrow,
.gov__proofs li,
.gov__console-bar,
.gov-card__no,
.footer__heading,
.footer__legal {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Controls -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper-3);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  clip-path: var(--notch);
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}

.btn:hover { background: #2A261B; border-color: #2A261B; }

.btn--lg { height: 46px; padding: 0 20px; font-size: 12.5px; }

.btn__arrow { font-size: 14px; transition: transform .18s; }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }

/* The hero's button is fired clay; the masthead's stays ink. */
.hero .btn--primary { background: var(--clay); border-color: var(--clay); color: #FFF6E9; }
.hero .btn--primary:hover { background: var(--clay-2); border-color: var(--clay-2); }

/* --- Masthead -------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  min-height: var(--mast-h);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: rgba(237 233 221 / 0.86);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
          backdrop-filter: saturate(1.2) blur(12px);
  transition: min-height .25s, background-color .25s, border-color .25s;
}

.masthead.is-scrolled { min-height: 58px; background: rgba(237 233 221 / 0.94); }

/* On a page with the cloud wash, the bar sits clear over the clouds until
   the page scrolls, then frosts over the content as usual. */
body:has(.hero__wash) .masthead:not(.is-scrolled) {
  border-bottom-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.wordmark__mark { width: 28px; height: 28px; flex: none; }
.wordmark__text { font-family: var(--brand); font-size: 22px; letter-spacing: -0.01em; }

.mk-hex { fill: var(--ink); }
.mk-a, .mk-b { fill: var(--paper-3); }

.nav { display: flex; justify-content: flex-end; gap: 28px; }
.nav a {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color .18s;
}
.nav a:hover { color: var(--ink); }

.masthead__actions { display: flex; }

/* --- Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 88px);
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(56px, 9vh, 112px) 0 clamp(72px, 10vh, 128px);
}

/* Wash: a soft colour field behind the hero, in the site's palette:
   drifting clouds of cream, blue, indigo and purple with a little sky, over warm paper.
   It fades out into the plain paper at the hero's foot. */
.hero__wash {
  position: absolute;
  z-index: -4;
  /* Reach up behind the masthead so the clouds run under the top bar. */
  top: calc(-1 * var(--mast-h));
  left: 50%;
  width: 100vw;
  height: calc(100% + var(--mast-h));
  translate: -50% 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #F1ECDF 0%, var(--paper) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
          mask-image: linear-gradient(180deg, #000 70%, transparent);
}

/* Clouds: billowing noise drawn small by script.js and scaled up smooth. */
.hero__clouds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pitch { max-width: 600px; }

/* Right of the copy: the gather field (drawn by script.js). Dots drift
   apart as separate systems, gather into the industric mark, hold, and
   let go again; the pointer pushes them aside. */
.hero__fx {
  position: relative;
  justify-self: end;
  width: min(100%, 560px);
  aspect-ratio: 1;
  animation: rise 1s cubic-bezier(.2,.7,.2,1) .28s backwards;
}

.hero__fx canvas { display: block; width: 100%; height: 100%; }

.title {
  font-family: var(--serif);
  font-size: clamp(3.1rem, 5.7vw, 5.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.title__l {
  --base: var(--ink);
  display: block;
  color: var(--base);
}

/* The middle line comes out of the kiln fired: terracotta among raw ink. */
.title__l--hot { --base: var(--clay-ink); }
.title__dot { color: var(--clay); }


.title__l:nth-child(1) { animation: rise .8s cubic-bezier(.2,.7,.2,1) .05s backwards; }
.title__l:nth-child(2) { animation: rise .8s cubic-bezier(.2,.7,.2,1) .13s backwards; }
.title__l:nth-child(3) { animation: rise .8s cubic-bezier(.2,.7,.2,1) .21s backwards; }


.lede {
  max-width: 44ch;
  margin-top: 30px;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* The lede doubles as the drawing's legend: each named system lights up with
   its block, bastion, and route in the figure. */
.sys {
  color: var(--ink);
  font-weight: 500;
  background: linear-gradient(var(--clay), var(--clay)) 0 100% / 0% 1px no-repeat;
  transition: color .3s, background-size .45s cubic-bezier(.2,.7,.2,1);
  cursor: default;
}

.sys.is-active { color: var(--clay-ink); background-size: 100% 1px; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero__definition {
  max-width: 46ch;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(26 23 15 / 0.6);
  text-wrap: pretty;
}

/* Page-load sequence: ink first, then the drawing. */
.lede              { animation: rise .8s cubic-bezier(.2,.7,.2,1) .32s backwards; }
.cta               { animation: rise .8s cubic-bezier(.2,.7,.2,1) .40s backwards; }
.hero__definition  { animation: rise .8s cubic-bezier(.2,.7,.2,1) .48s backwards; }


/* Parallax. In the hero, --hero-scroll (px, set by script.js while the hero
   is on screen; left at 0 under reduced motion) moves each layer at its own
   rate: the paper and backing block
   slowest, the headline barely. Further down, scroll-driven animations let
   the drawing and the three Connect columns drift at different speeds while
   they cross the viewport; browsers without view() timelines just skip it. */
.pitch {
  transform: translate3d(0, calc(var(--hero-scroll) * -0.05), 0);
  will-change: transform;
}


@supports (animation-timeline: view()) {
  .hero__visual,
  .surf-product {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  .hero__visual { --drift: -44px; }
  .surf-product { --drift: -24px; }
}

@media (max-width: 760px) {
  .surf-product { animation: none; }
}

@keyframes drift {
  from { transform: translateY(calc(var(--drift) * -1)); }
  to   { transform: translateY(var(--drift)); }
}

/* --- Run and deploy: the drawing at the centre, two notes pinned to it ---- */

.ops {
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

.ops__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 2.9fr) minmax(0, 0.95fr);
  grid-template-areas:
    "head head head"
    "a    fig  b";
  align-items: center;
  column-gap: clamp(20px, 2.4vw, 40px);
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(80px, 11vh, 140px) 0 clamp(80px, 11vh, 140px);
}

.ops__head {
  grid-area: head;
  justify-self: center;
  max-width: 16em;
  margin-bottom: clamp(24px, 4vh, 48px);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4.6vw, 4.4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-align: center;
  text-wrap: balance;
}

.ops__dot { color: var(--clay); }

.ops__cells { display: contents; }

.ops__cell {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--rule-2);
}

/* A clay pin at the inner end of each note's rule, pointing at the drawing. */
.ops__cell::before {
  content: "";
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  background: var(--clay);
}

.ops__cell:nth-child(1) { grid-area: a; align-self: start; margin-top: 14%; }
.ops__cell:nth-child(1)::before { right: -4px; }
.ops__cell:nth-child(2) { grid-area: b; align-self: end; margin-bottom: 14%; }
.ops__cell:nth-child(2)::before { left: -4px; }

.ops__spec {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay-ink);
}

.ops__spec span { white-space: nowrap; }

.ops__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 1.9vw, 1.85rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.ops__text {
  max-width: 34ch;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.ops .hero__visual {
  grid-area: fig;
  /* Bleed into the column gaps: the labels sit at the drawing's edges. */
  margin-inline: calc(-1 * clamp(12px, 2vw, 36px));
  padding-inline: 0;
}

/* The drawing board: graph paper fading at the edges, a cream backing block
   set off-square behind the plate, and a plotter's registration mark. */
.hero__visual {
  position: relative;
  margin: 0;
  min-width: 0;
  padding: clamp(16px, 2.4vw, 34px) clamp(8px, 1.6vw, 24px);
}

.hero__visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(78% 72% at 54% 48%, #000 34%, transparent 78%);
          mask-image: radial-gradient(78% 72% at 54% 48%, #000 34%, transparent 78%);
}

.hx { display: block; width: 100%; height: auto; overflow: visible; }

/* --- The access drawing: ink and terracotta on paper ----------------------- */

.iso-t, .iso-l, .iso-r { stroke-width: 1; stroke-linejoin: round; }

/* Ground: a paper slab with its grid ruled on top. */
.iso-slab.iso-t { fill: #F4F0E5; stroke: rgba(26 23 15 / 0.22); }
.iso-slab.iso-l { fill: #DDD6C3; stroke: rgba(26 23 15 / 0.22); }
.iso-slab.iso-r { fill: #CBC3AD; stroke: rgba(26 23 15 / 0.22); }
.iso-grid line { stroke: rgba(26 23 15 / 0.07); stroke-width: 1; }
.iso-shadow { fill: rgba(26 23 15 / 0.07); }

/* System blocks: paper solids, lit from the upper left. */
.iso-block.iso-t { fill: #FBF8F0; stroke: rgba(26 23 15 / 0.55); }
.iso-block.iso-l { fill: #E6E0CF; stroke: rgba(26 23 15 / 0.45); }
.iso-block.iso-r { fill: #D2CBB6; stroke: rgba(26 23 15 / 0.45); }

/* Runtime base slab and the policy enclosure around the agents. */
.iso-base.iso-t { fill: #EFE8D8; stroke: rgba(194 102 44 / 0.8); }
.iso-base.iso-l { fill: #DCD3BE; stroke: rgba(194 102 44 / 0.6); }
.iso-base.iso-r { fill: #C9BFA7; stroke: rgba(194 102 44 / 0.6); }

.iso-policy,
.iso-policy-back { stroke: var(--clay); stroke-width: 1; }
.iso-policy-back { opacity: 0.35; stroke-dasharray: 2 3; }
.iso-policy-glass { fill: rgba(194 102 44 / 0.06); }
.iso-policy-top { fill: rgba(194 102 44 / 0.04); }

/* Agents: a field of ink cubes; a few light up as they run. */
.iso-agent.iso-t { fill: #3A3426; stroke: #3A3426; }
.iso-agent.iso-l { fill: #1F1B12; stroke: #1F1B12; }
.iso-agent.iso-r { fill: #0F0D08; stroke: #0F0D08; }
.iso-agentg.is-lit .iso-t { animation: agent-t 4.2s ease-in-out var(--d, 0s) infinite; }
.iso-agentg.is-lit .iso-l { animation: agent-l 4.2s ease-in-out var(--d, 0s) infinite; }
.iso-agentg.is-lit .iso-r { animation: agent-r 4.2s ease-in-out var(--d, 0s) infinite; }

@keyframes agent-t { 0%, 100% { fill: #3A3426; stroke: #3A3426; } 35%, 65% { fill: #E08A4E; stroke: #E08A4E; } }
@keyframes agent-l { 0%, 100% { fill: #1F1B12; stroke: #1F1B12; } 35%, 65% { fill: var(--clay); stroke: var(--clay); } }
@keyframes agent-r { 0%, 100% { fill: #0F0D08; stroke: #0F0D08; } 35%, 65% { fill: var(--clay-2); stroke: var(--clay-2); } }

/* Bastions: fired clay gates on each route. */
.iso-bast.iso-t { fill: var(--clay); stroke: var(--clay); }
.iso-bast.iso-l { fill: var(--clay-2); stroke: var(--clay-2); }
.iso-bast.iso-r { fill: var(--clay-3); stroke: var(--clay-3); }

/* Control plane: an ink slab carrying the mark. */
.iso-cp-slab.iso-t { fill: #2A261B; stroke: #2A261B; }
.iso-cp-slab.iso-l { fill: #1A170F; stroke: #1A170F; }
.iso-cp-slab.iso-r { fill: #0F0D08; stroke: #0F0D08; }
.iso-cp .mk-hex { fill: var(--paper-3); }
.iso-cp .mk-a, .iso-cp .mk-b { fill: #1A170F; }

.iso-icon {
  fill: none;
  stroke: var(--clay-ink);
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.iso-icon * { vector-effect: non-scaling-stroke; }

.iso-trace { fill: none; stroke: rgba(26 23 15 / 0.38); stroke-width: 1.2; stroke-linecap: round; }

.iso-pulse,
.iso-uplink-pulse {
  fill: none;
  stroke: var(--clay);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 90;
  stroke-dashoffset: 100;
  animation: flow 3s linear var(--d, 0s) infinite;
}

.iso-uplink { stroke: rgba(26 23 15 / 0.45); stroke-width: 1; stroke-dasharray: 3 4; }
.iso-uplink-pulse { animation-duration: 2.2s; }
.iso-port { fill: var(--paper-3); stroke: var(--clay); stroke-width: 1.2; }
.iso-leader { stroke: var(--rule-2); stroke-width: 1; }

.iso-name { font-family: var(--sans); font-size: 12.5px; font-weight: 600; fill: var(--ink); }

.iso-proto, .iso-meta, .iso-label, .iso-zone { font-family: var(--mono); letter-spacing: 0.08em; }
.iso-proto { font-size: 8.5px; fill: var(--ink-3); }
.iso-proto--link { fill: var(--clay-ink); }
.iso-label { font-size: 9.5px; font-weight: 500; fill: var(--ink-2); }
.iso-label--hi { fill: var(--ink); }
.iso-meta { font-size: 8px; fill: var(--clay-ink); }
.iso-zone { font-size: 7.5px; fill: rgba(26 23 15 / 0.55); letter-spacing: 0.14em; }

.iso-sys .iso-block,
.iso-bastion .iso-bast,
.iso-route .iso-trace,
.iso-syslabel text { transition: fill .3s, stroke .3s; }

.iso-sys.is-active .iso-block.iso-t { fill: #FBE9DB; stroke: var(--clay); }
.iso-sys.is-active .iso-block.iso-l { fill: #EBD3BF; stroke: var(--clay-2); }
.iso-sys.is-active .iso-block.iso-r { fill: #D9BBA3; stroke: var(--clay-2); }
.iso-route.is-active .iso-trace { stroke: var(--clay); }
.iso-bastion.is-active { filter: drop-shadow(0 0 5px rgba(194 102 44 / 0.7)); }
.iso-syslabel.is-active .iso-name { fill: var(--clay-ink); }
.iso-syslabel.is-active .iso-proto { fill: var(--clay-ink); }

/* Hover detail: each part of the drawing opens a small console card that
   walks through what happens there, step by step. */
.hx [data-sys], .hx [data-part] { cursor: pointer; }
.iso-cp, .iso-runtime { transition: filter .3s; }
.iso-cp.is-hover { filter: drop-shadow(0 6px 10px rgba(26 23 15 / 0.35)); }
.iso-runtime.is-hover { filter: drop-shadow(0 0 8px rgba(194 102 44 / 0.45)); }
.iso-uplink.is-hover { stroke: var(--clay); stroke-dasharray: none; }

.iso-card {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 270px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: rgba(246 243 234 / 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-family: var(--mono);
  box-shadow: 0 10px 28px -16px rgba(26 23 15 / 0.28);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.iso-card.is-open { opacity: 1; transform: none; }

.iso-card__bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px 0;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.iso-card__bar span { display: inline-flex; align-items: center; gap: 7px; }
.iso-card__bar span::before { content: ""; width: 5px; height: 5px; background: var(--clay); }
.iso-card__bar span, .iso-card__bar b { white-space: nowrap; }
.iso-card__bar b { font-weight: 400; color: var(--ink-3); }

.iso-card__title {
  padding: 8px 14px 2px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.iso-card__steps { list-style: none; margin: 0; padding: 4px 14px 10px; }
.iso-card__steps li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 6px 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
}
.iso-card__steps li:first-child { border-top: 0; }
.iso-card__steps em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 1px;
}
.iso-card__steps code { font-family: inherit; color: var(--ink); }
.iso-card__steps .is-ok { color: #2F7A5A; }
.iso-card__steps .is-warn { color: var(--clay-ink); }

.iso-card__foot {
  padding: 8px 14px 9px;
  border-top: 1px solid var(--rule);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay-ink);
}

.iso-hint {
  margin-top: 6px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (hover: none) { .iso-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .iso-card { transition: none; } }

/* --- Connect: three surfaces on stone -------------------------------------- */

.surfaces {
  padding: clamp(80px, 11vh, 140px) 0 clamp(88px, 12vh, 150px);
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}

.surfaces__inner {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.surfaces__intro {
  display: grid;
  gap: 22px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule-2);
}

.surfaces__kicker { margin-bottom: 22px; color: var(--clay-ink); }

/* Title in two lines, one line of deck beneath it. */
.surfaces__title {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4.4vw, 4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

@media (min-width: 1100px) {
  .surfaces__title .nb { display: block; white-space: nowrap; }
}

.surfaces__dot { color: var(--clay); }

/* Section verbs: Connect, Govern, Run carry the page's three beats. */
.kw {
  font-style: italic;
  color: var(--clay-ink);
}

.gov .kw { color: #E4A268; }

.surfaces__deck {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.surfaces__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--rule);
}

.surf {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  min-width: 0;
  padding: 36px 28px 44px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.surf__visual--legacy { display: none !important; }

.surf__no { color: var(--clay-ink); margin-top: 30px; }

.surf__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.surf__text {
  max-width: 44ch;
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.surfaces__close {
  margin-top: 44px;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink-2);
  text-wrap: balance;
}

/* Product plates: dark console windows set on the stone. */
.surf-product {
  display: flex;
  flex-direction: column;
  min-height: 310px;
  border: 1px solid rgba(26 23 15 / 0.5);
  background: var(--console);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 12px;
  box-shadow: 0 18px 40px -22px rgba(26 23 15 / 0.55);
  transition: box-shadow .35s cubic-bezier(.2,.7,.2,1);
}

.surf:hover .surf-product { box-shadow: 0 26px 50px -22px rgba(26 23 15 / 0.7); }

.surf-product__bar,
.surf-product__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.surf-product__bar { border-bottom: 1px solid var(--c-rule); color: var(--cream); }
.surf-product__bar span { display: inline-flex; align-items: center; gap: 8px; }
.surf-product__bar i { width: 7px; height: 7px; background: var(--clay); }
.surf-product__bar b { font-weight: 500; color: var(--cream-3); }
.surf-product__foot { margin-top: auto; flex-wrap: wrap; row-gap: 4px; border-top: 1px solid var(--c-rule); color: var(--cream-3); }
.surf-product__foot b { font-weight: 500; color: var(--clay); }

.surf-product__content { padding: 18px; }

.sp-command {
  padding: 12px 14px;
  border: 1px solid var(--c-rule-2);
  background: var(--console-2);
}
.sp-command span { display: block; margin-bottom: 8px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); }
.sp-command code { font-family: inherit; font-size: 12.5px; color: var(--cream); }
.sp-command code i { font-style: normal; margin-right: 6px; color: var(--clay); }

.sp-result {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 8px 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-rule-2);
}
.sp-result span { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-3); }
.sp-result b { font-weight: 400; color: var(--cream); }
.sp-result em { font-style: normal; color: var(--ok); }

.sp-mcp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; }
.sp-mcp-list > div {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--c-rule);
  background: var(--console-2);
}
.sp-mcp-list i {
  display: grid;
  place-items: center;
  height: 30px;
  border: 1px solid rgba(194 102 44 / 0.6);
  font-style: normal;
  font-size: 10px;
  color: var(--clay);
}
.sp-mcp-list span { display: grid; min-width: 0; }
.sp-mcp-list b { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--cream); }
.sp-mcp-list small { font-size: 10.5px; color: var(--cream-3); }
.sp-mcp-list em { font-style: normal; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ok); }
/* Three columns leave no room for the label beside the name: show status as a dot. */
@media (min-width: 761px) {
  .sp-mcp-list > div { grid-template-columns: 30px minmax(0, 1fr) 6px; }
  .sp-mcp-list em { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); font-size: 0; }
}

.sp-browser { padding: 18px; }
.sp-browser__chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border: 1px solid var(--c-rule-2);
  background: var(--console-2);
  font-size: 10.5px;
  color: var(--cream-3);
}
.sp-browser__chrome i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-rule-2); }
.sp-browser__chrome span { margin-left: 8px; }
.sp-browser__app {
  display: grid;
  grid-template-columns: 48px 1fr;
  min-height: 150px;
  border: 1px solid var(--c-rule-2);
  border-top: 0;
}
.sp-browser__app aside { display: grid; align-content: start; gap: 8px; padding: 12px 8px; border-right: 1px solid var(--c-rule); }
.sp-browser__app aside i { height: 5px; background: var(--c-rule-2); }
.sp-browser__app main { position: relative; display: grid; align-content: start; gap: 10px; padding: 12px; }
.sp-browser__heading { width: 46%; height: 7px; background: rgba(237 233 220 / 0.32); }
.sp-browser__fields { display: grid; gap: 8px; }
.sp-browser__fields i { height: 14px; border: 1px solid var(--c-rule-2); }
.sp-browser__button { width: 66px; height: 16px; justify-self: end; background: var(--clay); }
.sp-browser__cursor {
  position: absolute;
  right: 44px;
  bottom: 30px;
  font-size: 15px;
  color: var(--cream);
  animation: cursor 3.2s ease-in-out infinite;
}

/* Entrance: opted in by JS via .surfaces--anim; final state without it. */
.surfaces--anim .surfaces__intro > *,
.surfaces--anim .surf-product,
.surfaces--anim .surf__no,
.surfaces--anim .surf__title,
.surfaces--anim .surf__text,
.surfaces--anim .surfaces__close {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}

.surfaces--anim.is-revealed .surfaces__intro > *,
.surfaces--anim.is-revealed .surf-product,
.surfaces--anim.is-revealed .surf__no,
.surfaces--anim.is-revealed .surf__title,
.surfaces--anim.is-revealed .surf__text,
.surfaces--anim.is-revealed .surfaces__close { opacity: 1; transform: none; }

.surfaces--anim.is-revealed .surf:nth-child(2) > * { transition-delay: .12s; }
.surfaces--anim.is-revealed .surf:nth-child(3) > * { transition-delay: .24s; }

/* Dither field: a band at the head of the dark console, an ordered-dither
   terrain of slow waves that lights up under the cursor (drawn by script.js). */
.field {
  position: relative;
  height: clamp(180px, 22vw, 300px);
  margin: calc(clamp(88px, 12vh, 150px) * -1) 0 clamp(8px, 2vh, 24px);
  border-bottom: 1px solid var(--c-rule);
  cursor: crosshair;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
}

.field canvas { display: block; width: 100%; height: 100%; }

/* --- Govern: the dark console ---------------------------------------------- */

.gov {
  padding: clamp(88px, 12vh, 150px) 0 clamp(96px, 13vh, 160px);
  background: var(--console);
  color: var(--cream);
}

.gov__inner {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.gov__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: 32px clamp(40px, 6vw, 120px);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--c-rule-2);
}

.gov__eyebrow { margin-bottom: 22px; color: var(--signal); }

.gov__title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4.6vw, 4.4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--cream);
  text-wrap: balance;
}

.gov__deck {
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: var(--cream-2);
  text-wrap: pretty;
}

.gov__proofs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.gov__proofs li {
  padding: 7px 10px;
  border: 1px solid var(--c-rule-2);
  color: var(--cream-2);
  clip-path: var(--notch);
}

.gov__layout {
  position: relative;
  margin-top: 48px;
  border: 1px solid var(--c-rule-2);
  background: var(--console-2);
}

.gov__console-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-rule-2);
  color: var(--cream-3);
}
.gov__console-bar span { display: inline-flex; align-items: center; gap: 8px; }
.gov__console-bar span:last-child { color: var(--signal); }
.gov__console-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(104 173 255 / 0.18);
  animation: blink 2s ease-in-out infinite;
}

.gov__cards { display: grid; align-content: start; }

.gov-card { border-bottom: 1px solid var(--c-rule); }
.gov-card:last-child { border-bottom: 0; }
.gov-card h3 { margin: 0; }

.gov-card__head {
  display: grid;
  grid-template-columns: 40px 1fr 20px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 22px 26px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s;
}

.gov-card__head:hover { background: rgba(237 233 220 / 0.03); }

.gov-card__no { color: var(--cream-3); transition: color .2s; }
.gov-card.is-active .gov-card__no { color: var(--signal); }

.gov-card__title {
  font-family: var(--sans);
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--cream-2);
  transition: color .2s;
}
.gov-card.is-active .gov-card__title { color: var(--cream); }

.gov-card__chev {
  position: relative;
  width: 12px;
  height: 12px;
  justify-self: end;
}
.gov-card__chev::before,
.gov-card__chev::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--cream-2);
  transition: transform .3s;
}
.gov-card__chev::after { transform: rotate(90deg); }
.gov-card.is-active .gov-card__chev::after { transform: rotate(90deg) scaleX(0); }

.gov-card__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1);
}
.gov-card.is-active .gov-card__body { grid-template-rows: 1fr; }
.gov-card__panel { min-height: 0; overflow: hidden; }

.gov-card__text {
  max-width: 50ch;
  padding: 0 26px 26px 80px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream-2);
  text-wrap: pretty;
}

.gov-card__visual { min-width: 0; }

/* Two columns from 1101px: cards left, shared stage right. Below that the
   stage hides and each visual sits inside its own card (placed by JS). */
@media (min-width: 1101px) {
  .gov__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }
  .gov__console-bar { grid-column: 1 / -1; }
  .gov__cards { border-right: 1px solid var(--c-rule-2); }
  .gov__stage {
    position: sticky;
    top: 96px;
    align-self: start;
    display: grid;
    place-items: center;
    min-height: 560px;
    padding: 40px;
    background:
      radial-gradient(circle at 1px 1px, rgba(237 233 220 / 0.08) 1px, transparent 0) 0 0 / 16px 16px;
  }
  .gov__stage .gov-card__visual { display: none; width: 100%; }
  .gov__stage .gov-card__visual.is-active { display: block; animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
}

@media (max-width: 1100px) {
  .gov__stage { display: none; }
  .gov-card__visual { padding: 0 26px 30px; }
}

/* Governance product panels. */
.gv-panel {
  width: min(100%, 560px);
  margin-inline: auto;
  border: 1px solid var(--c-rule-2);
  background: var(--console);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cream-2);
  box-shadow: 0 30px 70px -30px rgba(0 0 0 / 0.8);
}

.gv-panel__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-rule-2);
  font-size: 10.5px;
  letter-spacing: 0.08em;
}
.gv-panel__tag { padding: 2px 6px; border: 1px solid rgba(104 173 255 / 0.6); text-transform: uppercase; color: var(--signal); }
.gv-panel__file { color: var(--cream); }
.gv-panel__state { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--cream-3); }
.gv-panel__state--ok { color: var(--ok); }
.gv-panel__state--live { color: var(--ok); }
.gv-panel__state--wait { color: var(--wait); }
.gv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: blink 2s ease-in-out infinite; }

.gv-code {
  margin: 0;
  padding: 16px 16px 18px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--cream);
  overflow-x: auto;
}
.gv-code code { font-family: inherit; }
.t-k { color: var(--signal); }
.t-s { color: var(--ok); }
.t-c { color: var(--cream-3); }

.gv-meta,
.gv-req,
.gv-audit-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-rule-2);
}
.gv-meta > div,
.gv-req > div,
.gv-audit-foot > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-right: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}
.gv-meta dt, .gv-req dt, .gv-audit-foot dt { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-3); }
.gv-meta dd, .gv-req dd, .gv-audit-foot dd { color: var(--cream); }
.gv-meta dd b { font-weight: 500; color: var(--ok); }
.gv-meta--no, .gv-req--wait { color: var(--wait) !important; }
.gv-meta--no { color: var(--no) !important; }

.gv-req { grid-template-columns: minmax(0, 1fr); }
.gv-req > div { grid-template-columns: 130px 1fr; align-items: baseline; border-right: 0; }

.gv-stream li,
.gv-audit li {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-rule);
}
.gv-stream li { grid-template-columns: 64px 1fr auto; }
.gv-act__verb {
  padding: 2px 6px;
  border: 1px solid var(--c-rule-2);
  font-size: 10.5px;
  text-align: center;
  color: var(--cream);
}
.gv-act__desc { font-family: var(--sans); font-size: 13.5px; color: var(--cream-2); }
.gv-act__dec { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.gv-act__dec--ok { color: var(--ok); }
.gv-act__dec--no { color: var(--no); }
.gv-act--no { background: rgba(255 106 92 / 0.06); }
.gv-act--no .gv-act__verb { border-color: rgba(255 106 92 / 0.55); color: var(--no); }

.gv-reason { padding: 12px 14px; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--cream-3); }
.gv-reason b { color: var(--cream); font-weight: 500; }
.gv-reason__k { margin-right: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--no); }

.gv-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--c-rule-2);
}
.gv-btn {
  height: 34px;
  border: 1px solid var(--c-rule-2);
  background: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  clip-path: var(--notch);
}
.gv-btn--approve { background: var(--cream); border-color: var(--cream); color: var(--console); }
.gv-aside { padding: 0 14px 14px; font-family: var(--sans); font-size: 12.5px; color: var(--cream-3); }

.gv-audit-head {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-rule);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-3);
}
.gv-audit li { grid-template-columns: 76px 1fr auto; }
.gv-audit time { font-size: 11px; color: var(--cream-3); }
.gv-audit span { font-family: var(--sans); font-size: 13.5px; color: var(--cream-2); }
.gv-audit b { font-weight: 500; color: var(--cream); }
.gv-audit em { font-style: normal; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.gv-audit--ok { color: var(--ok); }
.gv-audit--no { color: var(--no); }
.gv-audit .is-blocked { background: rgba(255 106 92 / 0.06); }
.gv-audit-foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gv-audit-foot > div { border-bottom: 0; }

/* --- Blog ----------------------------------------------------------------- */

.blog-index,
.article-main {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.blog-kicker {
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay-ink);
}

.blog-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: 32px clamp(40px, 6vw, 120px);
  padding: clamp(64px, 10vh, 120px) 0 40px;
  border-bottom: 1px solid var(--rule-2);
}

.blog-intro__title {
  font-family: var(--serif);
  font-size: clamp(3rem, 5.6vw, 5.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  animation: rise .8s cubic-bezier(.2,.7,.2,1) .05s backwards;
}

.blog-intro__title span,
.post__title span,
.article-header h1 span { color: var(--clay); }

.blog-intro__lede {
  max-width: 42ch;
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
  animation: rise .8s cubic-bezier(.2,.7,.2,1) .15s backwards;
}

.blog-intro__lede strong {
  font-weight: 500;
  color: var(--ink);
}

.blog-feed { padding: 40px 0 clamp(96px, 13vh, 160px); }

.blog-feed__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
}

.blog-feed__head h2,
.blog-feed__head span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* A post: photo plate on the left, text on the right, ruled underneath. */
.post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
  animation: rise .8s cubic-bezier(.2,.7,.2,1) .25s backwards;
}

.post__img {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(26 23 15 / 0.55);
  box-shadow: 0 30px 50px -30px rgba(26 23 15 / 0.55);
}

.post__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s;
}

.post:hover .post__img img { transform: scale(1.035); filter: brightness(1.08); }

.post__meta,
.article-header__meta,
.article-header__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.post__meta span:first-child { color: var(--clay-ink); }

.post__title {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  transition: color .2s;
}

.post:hover .post__title { color: var(--clay-ink); }

.post__summary {
  max-width: 46ch;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.post__link {
  display: inline-flex;
  gap: 10px;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.post__link span { transition: transform .2s; }
.post:hover .post__link span { transform: translateX(4px); }

/* Article */
.article { padding: clamp(48px, 8vh, 96px) 0 clamp(96px, 13vh, 160px); }

.article-header {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.article-header__back {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 36px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color .2s;
}

.article-header__back:hover { color: var(--clay-ink); }

.article-header__eyebrow { justify-content: center; color: var(--clay-ink); }
.article-header__eyebrow span { color: var(--ink-3); }

.article-header h1 {
  margin-top: 20px;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.2vw, 4.8rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.article-header__deck {
  max-width: 60ch;
  margin: 24px auto 0;
  font-size: clamp(1.08rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: balance;
}

.article-header__meta {
  justify-content: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.article-img {
  margin: clamp(40px, 6vh, 72px) 0 clamp(48px, 7vh, 88px);
  overflow: hidden;
  border: 1px solid rgba(26 23 15 / 0.55);
  box-shadow: 0 40px 70px -40px rgba(26 23 15 / 0.6);
}

.article-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 45%;
}

.article-prose {
  max-width: 680px;
  margin-inline: auto;
  font-size: 18px;
  line-height: 1.72;
  color: rgba(26 23 15 / 0.82);
}

.article-prose p { margin: 0 0 1.35em; text-wrap: pretty; }

.article-prose__lead {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink);
}

.article-prose h2 {
  margin: 2.2em 0 0.7em;
  padding-top: 1.1em;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2.05rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}

.article-prose strong { font-weight: 600; color: var(--ink); }

.article-prose ul { margin: 0 0 1.35em; padding-left: 1.2em; }
.article-prose li { margin: 0 0 0.7em; padding-left: 0.2em; text-wrap: pretty; }
.article-prose li::marker { color: var(--ink); }

.article-prose blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--clay);
}

.article-prose blockquote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.3;
  color: var(--clay-ink);
  text-wrap: balance;
}

/* Article figure: an interactive walkthrough set in the dark governance
   console, set to the same 680px measure as the body copy. Four steps act as
   tabs along the top. The stage beneath shows the active step's explanation
   above a panel from the control plane. Hover or focus previews a step, a
   click pins it, and when idle on screen the figure walks through the steps
   on its own. */
.article-fig { margin: 0.4em 0 2.4em; }

.gvf__frame {
  overflow: hidden;
  border: 1px solid rgba(26 23 15 / 0.55);
  background: var(--console);
  color: var(--cream);
  box-shadow: 0 40px 70px -40px rgba(26 23 15 / 0.6);
}

.gvf__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-rule-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-3);
}
.gvf__bar i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: middle;
  animation: blink 2s ease-in-out infinite;
}

.gvf__flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--c-rule-2);
  background: var(--console-2);
}

.gvf__step {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 14px 16px 16px;
  border: 0;
  border-right: 1px solid var(--c-rule);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--cream-3);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.gvf__step:last-child { border-right: 0; }
.gvf__step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.gvf__step:hover,
.gvf__step:focus-visible { background: var(--console-3); color: var(--cream-2); }
.gvf__step:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.gvf__step.is-active { background: var(--console); color: var(--cream); }
.gvf__step.is-active::after { transform: scaleX(1); }

.gvf__no { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--cream-3); }
.gvf__step.is-active .gvf__no { color: var(--signal); }
.gvf__name { font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.3; }
.gvf__sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--cream-3); }

.gvf__stage { padding: 22px 24px 26px; }

.gvf__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.gvf__panel[hidden] { display: none; }
.gvf__panel.is-active { animation: gvf-in 0.35s ease both; }
@keyframes gvf-in { from { opacity: 0; transform: translateY(6px); } }

.gvf__text {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream-2);
}
.gvf__text strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--cream);
}
.gvf__text small {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-3);
}
.gvf__panel .gv-panel { width: 100%; margin: 0; }
.gvf__panel + .gvf__panel { margin-top: 28px; }

.gv-audit--wait { color: var(--wait); }
.gv-audit .is-approved { background: rgba(94 211 165 / 0.06); }
.gv-req--ok { color: var(--ok) !important; }
.gv-req--no { color: var(--no) !important; }
.gv-btn { cursor: pointer; transition: opacity 0.2s ease; }
.gv-btn:disabled { cursor: default; opacity: 0.35; }
.gv-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.gvf__reset {
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  font: inherit;
  color: var(--signal);
  cursor: pointer;
}

/* Article figure: the agent factory as an exploded isometric stack. Three
   layers (foundation, runtime, harnesses) sit over one another and each wires
   into the control plane tower on the right. A numbered key beneath carries
   the same labels at a legible size on small screens. */
.afd__frame {
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: inset 0 0 0 1px var(--rule-2), 0 40px 70px -48px rgba(26 23 15 / 0.45);
}

.afd__svg {
  display: block;
  width: 100%;
  height: auto;
  background-image:
    linear-gradient(30deg, transparent 49.4%, var(--grid) 49.4%, var(--grid) 50.6%, transparent 50.6%),
    linear-gradient(-30deg, transparent 49.4%, var(--grid) 49.4%, var(--grid) 50.6%, transparent 50.6%);
  background-size: 34.64px 20px;
}
.afd__svg polygon { stroke-linejoin: round; }

.afd-slab .t { fill: var(--paper-3); stroke: rgba(26 23 15 / 0.55); stroke-width: 1; }
.afd-slab .l { fill: #E3DDCC; stroke: rgba(26 23 15 / 0.55); stroke-width: 1; }
.afd-slab .r { fill: #D6CFBB; stroke: rgba(26 23 15 / 0.55); stroke-width: 1; }

.afd-tool .t, .afd-agent .t { fill: #FBF9F3; stroke: rgba(26 23 15 / 0.5); stroke-width: 0.8; }
.afd-tool .l, .afd-agent .l { fill: #E6E1D2; stroke: rgba(26 23 15 / 0.5); stroke-width: 0.8; }
.afd-tool .r, .afd-agent .r { fill: #D3CCB7; stroke: rgba(26 23 15 / 0.5); stroke-width: 0.8; }
.afd-agent--hot .t { fill: #EFC7A6; }
.afd-agent--hot .l { fill: #D98E5C; }
.afd-agent--hot .r { fill: #B96A37; }

.afd-harness .t { fill: #D9884F; stroke: var(--clay-3); stroke-width: 0.8; }
.afd-harness .l { fill: var(--clay); stroke: var(--clay-3); stroke-width: 0.8; }
.afd-harness .r { fill: var(--clay-2); stroke: var(--clay-3); stroke-width: 0.8; }

.afd-run .t { fill: #9CC8FF; stroke: #2F6FBF; stroke-width: 0.8; }
.afd-run .l { fill: var(--signal); stroke: #2F6FBF; stroke-width: 0.8; }
.afd-run .r { fill: #4A8FE0; stroke: #2F6FBF; stroke-width: 0.8; }
.afd-ckpt .t { fill: var(--ink); }
.afd-ckpt .l { fill: #3A362C; }
.afd-ckpt .r { fill: #2A271F; }
.afd-ckpt polygon { stroke: var(--ink); stroke-width: 0.6; }

.afd-cp .t { fill: #262B34; stroke: #05070A; stroke-width: 1; }
.afd-cp .l { fill: var(--console-3); stroke: #05070A; stroke-width: 1; }
.afd-cp .r { fill: var(--console); stroke: #05070A; stroke-width: 1; }
.afd-led polygon { fill: var(--ok); }
.afd-led .t, .afd-led .l { fill: none; }
.afd-beacon { fill: var(--signal); }

.afd-guide { stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 2 4; }
.afd-track { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 3 3; }
.afd-link { stroke: var(--clay); stroke-width: 1.4; stroke-dasharray: 4 3; animation: afd-flow 1.2s linear infinite; }
.afd-node { fill: var(--clay); }
.afd-cp-rule { stroke: var(--c-rule-2); stroke-width: 1; }

.afd__svg text { font-family: var(--mono); letter-spacing: 0.08em; }
.afd-face { font-size: 9px; font-weight: 500; fill: var(--ink); }
.afd-face--sub { font-size: 7px; fill: var(--ink-2); }
.afd-glyph { font-size: 7.5px; font-weight: 500; fill: var(--ink-2); }
.afd-glyph--ink { fill: var(--ink-3); }
.afd-hname { font-size: 7px; font-weight: 500; letter-spacing: 0.02em !important; fill: #FFF6E9; }
.afd-cp-title { font-size: 8.5px; fill: var(--cream-3); letter-spacing: 0.12em; }
.afd-cp-row { font-family: var(--sans) !important; font-size: 12.5px; font-weight: 500; letter-spacing: 0 !important; fill: var(--cream); }

.afd-ckpt { animation: afd-ckpt 3.6s ease-in-out infinite; }
.afd-ckpt--2 { animation-delay: 1.2s; }
.afd-ckpt--3 { animation-delay: 2.4s; }
.afd-led { animation: blink 2.4s ease-in-out infinite; }
.afd-led--2 { animation-delay: 0.6s; }
.afd-led--3 { animation-delay: 1.2s; }
.afd-led--4 { animation-delay: 1.8s; }
@keyframes afd-flow { to { stroke-dashoffset: -14; } }
@keyframes afd-ckpt { 0%, 60%, 100% { opacity: 1; } 30% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .afd-link, .afd-ckpt, .afd-led { animation: none; }
}

.afd__key {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.afd__key li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  border-right: 1px solid var(--rule);
}
.afd__key li:last-child { border-right: 0; }
.afd__no { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--clay-ink); }
.afd__name { font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.afd__sub { font-family: var(--sans); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }

.article-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px 28px;
  margin-top: 3em;
  padding: 28px 30px;
  background: var(--paper-3);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.article-cta p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--ink);
}

.article-cta .btn { background: var(--clay); border-color: var(--clay); color: #FFF6E9; }
.article-cta .btn:hover { background: var(--clay-2); border-color: var(--clay-2); }

@media (max-width: 760px) {
  .blog-intro { grid-template-columns: minmax(0, 1fr); }
  .post { grid-template-columns: minmax(0, 1fr); }
  .article-header, .article-header__eyebrow, .article-header__meta { text-align: left; justify-content: flex-start; }
  .article-header__deck { margin-left: 0; }
  .article-img img { aspect-ratio: 4 / 3; }
  .article-prose { font-size: 17px; }
  .gvf__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gvf__step:nth-child(2) { border-right: 0; }
  .gvf__step:nth-child(-n + 2) { border-bottom: 1px solid var(--c-rule); }
  .gvf__step { padding: 12px 14px 14px; }
  .gvf__stage { padding: 18px 16px 20px; }
  .afd__key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afd__key li:nth-child(2) { border-right: 0; }
  .afd__key li:nth-child(-n + 2) { border-bottom: 1px solid var(--rule); }
  .afd__key li { padding: 12px 14px 14px; }
}

/* --- Demo ----------------------------------------------------------------- */

.demo-main {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(64px, 10vh, 120px) 0 clamp(96px, 13vh, 160px);
}

.demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: clamp(40px, 6vw, 112px);
}

.demo-intro { animation: rise .8s cubic-bezier(.2,.7,.2,1) .05s backwards; }

.demo-intro .eyebrow {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay-ink);
}

.demo-intro h1 {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.demo-intro h1 span { color: var(--clay); }

.demo-intro__lede {
  max-width: 44ch;
  margin-top: 24px;
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.demo-notes {
  margin-top: 44px;
  border-top: 1px solid var(--rule-2);
}

.demo-notes li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

.demo-notes li > span {
  padding-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--clay-ink);
}

.demo-notes strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.demo-notes p { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }

/* The form plate: raised paper, a mono rail, notched controls. */
.demo-panel {
  position: sticky;
  top: 96px;
  background: var(--paper-3);
  box-shadow: inset 0 0 0 1px var(--rule-2), 0 40px 70px -40px rgba(26 23 15 / 0.45);
  animation: rise .9s cubic-bezier(.2,.7,.2,1) .18s backwards;
}

.demo-panel__rail {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.demo-panel__rail span:first-child { color: var(--clay-ink); }

.demo-form { display: grid; gap: 20px; padding: 30px 26px 26px; }

.demo-form__heading p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--ink);
}

.demo-form__heading span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }

.demo-field { display: grid; gap: 8px; }

.demo-field label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.demo-field input {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--rule-2);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.demo-field input::placeholder { color: rgba(26 23 15 / 0.38); }
.demo-field input:hover { border-color: rgba(26 23 15 / 0.45); }
.demo-field input:focus {
  outline: none;
  border-color: var(--clay);
  background: #FFFDF8;
  box-shadow: 0 0 0 3px rgba(194 102 44 / 0.18);
}

.demo-form__submit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 50px;
  margin-top: 4px;
  border: 1px solid var(--clay);
  background: var(--clay);
  color: #FFF6E9;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--notch);
  transition: background-color .18s, border-color .18s;
}

.demo-form__submit:hover { background: var(--clay-2); border-color: var(--clay-2); }
.demo-form__submit:hover .btn__arrow { transform: translate(2px, -2px); }
.demo-form__submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.demo-form__status:empty { display: none; }
.demo-form__status { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--clay-ink); }

.demo-form__privacy {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .demo-layout { grid-template-columns: minmax(0, 1fr); }
  .demo-panel { position: static; }
}

/* --- FAQ / answer-engine content ------------------------------------------ */

.faq {
  border-top: 1px solid var(--rule-2);
  background: var(--paper-3);
}

.faq__inner {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(40px, 8vw, 120px);
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(72px, 9vw, 128px) 0;
}

.faq__intro { align-self: start; }

.faq__eyebrow {
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay-ink);
}

.faq__intro h2 {
  max-width: 12ch;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.faq__list { border-top: 1px solid var(--rule-2); }

.faq__list details { border-bottom: 1px solid var(--rule-2); }

.faq__list summary {
  position: relative;
  padding: 23px 42px 23px 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.faq__list summary::-webkit-details-marker { display: none; }

.faq__list summary::after {
  content: "+";
  position: absolute;
  top: 21px;
  right: 2px;
  color: var(--clay-ink);
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 400;
}

.faq__list details[open] summary::after { content: "−"; }

.faq__list details p {
  max-width: 66ch;
  padding: 0 42px 24px 0;
  color: var(--ink-2);
  line-height: 1.65;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .faq__inner { grid-template-columns: minmax(0, 1fr); }
  .faq__intro h2 { max-width: 16ch; }
}

/* --- Footer (markup injected by script.js) --------------------------------- */

.footer {
  border-top: 1px solid var(--c-rule-2);
  background: var(--console);
  color: var(--cream);
}

/* Footer dither band: the same animated terrain as the Govern header. */
.footer__field {
  height: clamp(120px, 14vw, 200px);
  border-bottom: 1px solid var(--c-rule);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 75%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 35%, #000 75%, transparent);
}

.footer__field canvas { display: block; width: 100%; height: 100%; }

.footer__inner {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: 64px 0 28px;
}

.footer .mk-hex { fill: var(--cream); }
.footer .mk-a, .footer .mk-b { fill: var(--console); }

.footer__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer__tagline { margin-top: 14px; font-family: var(--serif); font-size: 1.1rem; font-style: italic; color: var(--cream-3); }
.footer__cols { display: flex; gap: clamp(40px, 8vw, 120px); }

.footer__heading { margin: 0 0 16px; color: var(--cream-3); }
.footer__links { display: grid; gap: 10px; }
.footer__links a { font-size: 14.5px; color: var(--cream-2); transition: color .18s; }
.footer__links a:hover { color: var(--cream); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--c-rule);
}
.footer__legal { margin: 0; letter-spacing: 0.06em; text-transform: none; color: var(--cream-3); }

/* --- Motion ---------------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes flow { to { stroke-dashoffset: 0; } }

@keyframes blink { 50% { opacity: 0.4; } }

@keyframes cursor {
  0%, 100% { transform: translate(0, 0); }
  45%, 60% { transform: translate(-16px, -6px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .iso-pulse, .iso-uplink-pulse { stroke-dasharray: none; opacity: 0.3; }
  .pitch { transform: none; }
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(56px, 8vh, 96px); }
  .pitch { max-width: 680px; }
  .ops__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head head" "fig fig" "a b";
    row-gap: 32px;
  }
  .ops .hero__visual { justify-self: center; width: min(100%, 980px); margin-inline: 0; }
  .ops__cell:nth-child(1), .ops__cell:nth-child(2) { align-self: start; margin: 0; }
  .ops__cell::before { display: none; }
  .surfaces__grid { grid-template-columns: minmax(0, 1fr); }
  .surf {
    display: grid;
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 36px;
    align-items: start;
  }
  .surf-product { grid-column: 2; grid-row: 1 / span 3; }
  .surf__no { grid-column: 1; margin-top: 0; }
  .surf__title, .surf__text { grid-column: 1; }
}

@media (max-width: 760px) {
  .masthead { grid-template-columns: auto auto; gap: 16px; }
  .nav { display: none; }
  .gov__intro { grid-template-columns: minmax(0, 1fr); }
  .ops__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "a" "b"; }
  .ops__head { justify-self: start; text-align: left; }
  .surf { display: flex; flex-direction: column; align-items: stretch; padding: 30px 20px 36px; }
  .surf-product { min-height: 0; }
  .sp-command code { font-size: 11.5px; white-space: nowrap; }
  .surf__no { margin-top: 26px; }
  .gov-card__head { grid-template-columns: 32px 1fr 20px; padding: 18px 20px; }
  .gov-card__text { padding: 0 20px 22px 66px; }
  .gov-card__visual { padding: 0 20px 26px; }
  .gv-meta, .gv-audit-foot { grid-template-columns: minmax(0, 1fr); }
  .sp-mcp-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .hero__visual { display: none; }
  .title { font-size: clamp(2.6rem, 12vw, 3.3rem); }
  .cta .btn { flex: 1 1 auto; justify-content: center; }
  .btn { padding: 0 14px; }
  .gov__console-bar span:last-child { display: none; }
  .gv-stream li { grid-template-columns: 56px 1fr; }
  .gv-act__dec { grid-column: 2; }
  .gv-audit-head { display: none; }
  .gv-audit li { grid-template-columns: 1fr auto; }
  .gv-audit time { grid-column: 1 / -1; }
  .gv-req > div { grid-template-columns: minmax(0, 1fr); }
}