/* ==========================================================================
   industric.ai — The agent foundry
   Machine chrome, organic matter. All labels, plates, and controls speak
   monospace; the display face is condensed factory signage; the specimen
   board holds the one organic thing on the page.
   Day shift: bone paper. Night shift: warm black — the hot shop.
   ========================================================================== */

/* --- Tokens ---------------------------------------------------------------
   Every colour is declared once with light-dark(): first value day shift,
   second night shift. Flipping `color-scheme` on :root flips the page.
   ------------------------------------------------------------------------ */

:root {
  color-scheme: light dark;

  --fg:        light-dark(#1A170F, #EDE9DC);
  --fg-2:      light-dark(rgba(26 23 15 / 0.74), rgba(237 233 220 / 0.75));
  --fg-3:      light-dark(rgba(26 23 15 / 0.52), rgba(237 233 220 / 0.52));

  --solid:     light-dark(#1A170F, #EDE9DC);   /* primary button plate */
  --on-solid:  light-dark(#EFEBDE, #14110B);

  --line:      light-dark(rgba(26 23 15 / 0.20), rgba(237 233 220 / 0.17));
  --line-2:    light-dark(rgba(26 23 15 / 0.38), rgba(237 233 220 / 0.32));

  --accent:      #C2662C;                       /* fired terracotta, both shifts */
  --accent-text: light-dark(#95491A, #E4A268);

  /* Flat ground: bone paper by day, warm black by night. */
  --bg-0:      light-dark(#EAE6D9, #0E0C09);
  --bg-1:      light-dark(#E3DECD, #080604);

  --panel:     light-dark(#E0DBC8, #1B1710);   /* backing blocks, cards, bars */
  --grid:      light-dark(rgba(26 23 15 / 0.12), rgba(237 233 220 / 0.08));

  --pad: clamp(20px, 4.5vw, 64px);
  /* Bars stay full-bleed; their contents stop widening past --hold, so the
     hero does not stretch to the edges of a very large display. */
  --hold: 1500px;
  --gutter: max(var(--pad), (100% - var(--hold)) / 2);

  --display: "Big Shoulders", "Arial Narrow", ui-sans-serif, sans-serif;
  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

:root[data-theme="light"] { color-scheme: only light; }
:root[data-theme="dark"]  { color-scheme: only dark; }

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

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

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow-x: clip;
  background: linear-gradient(180deg, var(--bg-0), var(--bg-1)) fixed;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

:where(a) { color: inherit; text-decoration: none; }

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

/* Machine chrome: one class for every monospace label on the page. */
.mch {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Notice bar ----------------------------------------------------------- */

.notice {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  padding: 9px var(--gutter);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color .18s ease;
}

.notice:hover { color: var(--fg); }
.notice__mark { color: var(--accent-text); }

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

.masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.wordmark__mark { width: 30px; height: 30px; flex: none; }

/* Monochromatic mark: ink on day shift, bone on night shift. */
.mk-hex { fill: var(--solid); }
.mk-a   { fill: var(--on-solid); }
.mk-b   { fill: color-mix(in srgb, var(--on-solid) 84%, var(--solid)); }

.wordmark__text {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(12px, 2.2vw, 28px);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.nav a { padding: 6px 2px; transition: color .18s ease; }
.nav a:hover,
.nav a[aria-current="page"] { color: var(--accent-text); }

.masthead__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Shift toggle: the icon shows the shift you are switching to — sun on the
   night shift, moon on the day shift. */
.shift {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}

.shift:hover { border-color: var(--fg-3); color: var(--fg); }

.shift__icon {
  grid-area: 1 / 1;
  width: 18px; height: 18px;
}

.ico-solid { fill: currentColor; }

.ico-rays {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Day shift offers the moon; night shift offers the sun. */
.shift__icon--sun  { display: none; }
.shift__icon--moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shift__icon--sun  { display: block; }
  :root:not([data-theme="light"]) .shift__icon--moon { display: none; }
}

:root[data-theme="dark"] .shift__icon--sun  { display: block; }
:root[data-theme="dark"] .shift__icon--moon { display: none; }
:root[data-theme="light"] .shift__icon--sun  { display: none; }
:root[data-theme="light"] .shift__icon--moon { display: block; }

/* --- Buttons: machine plates ---------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.btn--primary {
  padding: 12px 18px;
  background: var(--solid);
  color: var(--on-solid);
}

.btn--primary:hover { background: var(--accent); color: #FFF6E9; }

.btn--ghost {
  padding: 12px 18px;
  border: 1px solid var(--line-2);
  color: var(--fg);
  background: transparent;
}

.btn--ghost:hover { border-color: var(--accent-text); color: var(--accent-text); }

.btn--lg { padding: 15px 24px; font-size: 13px; }

.btn__arrow { font-family: var(--sans); }

/* --- Hero: pitch left, specimen board right -------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(28px, 5vh, 60px) var(--gutter);
}

.pitch { max-width: 620px; }

.eyebrow {
  margin: 0 0 24px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 12px;
  background: var(--accent);
  vertical-align: 1px;
}

.title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.9rem, 7vw, 6.7rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.title__l { display: block; }

/* The last line comes out of the kiln fired — terracotta among raw ink. */
.title__l--hot { color: var(--accent-text); }

.title__dot { color: var(--fg); }

.lede {
  margin: 26px 0 0;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  color: var(--fg-2);
  text-wrap: pretty;
}

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

/* The terminal moment: proof there is a real tool under the paint. */
.term {
  margin: 26px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-2);
}

.term__ps { color: var(--accent-text); margin-right: 10px; }

.term__cursor {
  display: inline-block;
  width: 8px; height: 15px;
  margin-left: 6px;
  vertical-align: -2px;
  background: var(--accent);
  animation: blink 1.15s steps(2, start) infinite;
}

@keyframes blink { to { visibility: hidden; } }

/* --- The specimen board ----------------------------------------------------
   Collage: graph paper, a cream backing block, two charcoal fiber slabs,
   and the terracotta specimen over them. Layered like a lab worksheet.
   ------------------------------------------------------------------------ */

.board {
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 1 / 1.06;
  justify-self: center;
}

/* Graph paper, fading toward the edges. */
.board::before {
  content: "";
  position: absolute;
  inset: 2% 0 10% 4%;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 27px 27px;
  -webkit-mask-image: radial-gradient(120% 100% at 60% 40%, #000 55%, transparent 98%);
          mask-image: radial-gradient(120% 100% at 60% 40%, #000 55%, transparent 98%);
}

/* Registration triangle, bottom left — a plotter's mark. */
.board::after {
  content: "";
  position: absolute;
  left: 3%; bottom: 12%;
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-bottom: 14px solid var(--line-2);
}

.board__backing {
  position: absolute;
  background: var(--panel);
}

.board__backing--a { left: -3%; top: 15%; width: 40%; height: 34%; }
.board__backing--b { right: -2%; bottom: 8%; width: 42%; height: 40%; }

.board__fiber {
  position: absolute;
  display: block;
}

.board__fiber--a { left: -1%; top: 18%; width: 42%; }
.board__fiber--b { right: 0; bottom: 6%; width: 44%; transform: scaleX(-1); }

.board__specimen {
  position: absolute;
  left: 7%; top: 0;
  width: 80%;
  display: block;
}

/* Stacking: paper < backing-a < fiber-a < specimen < backing-b < fiber-b */
.board__backing--a { z-index: 1; }
.board__fiber--a   { z-index: 2; }
.board__specimen   { z-index: 3; }
.board__backing--b { z-index: 4; }
.board__fiber--b   { z-index: 5; }
.board::after      { z-index: 6; }

.board__caption {
  position: absolute;
  left: 0; top: 100%;
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  z-index: 6;
}

/* --- Load sequence --------------------------------------------------------- */

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

@keyframes settle {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
}

.eyebrow            { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards; }
.title__l:nth-child(1) { animation: rise .7s cubic-bezier(.2,.7,.2,1) .06s backwards; }
.title__l:nth-child(2) { animation: rise .7s cubic-bezier(.2,.7,.2,1) .14s backwards; }
.title__l:nth-child(3) { animation: rise .7s cubic-bezier(.2,.7,.2,1) .22s backwards; }
.lede               { animation: rise .7s cubic-bezier(.2,.7,.2,1) .32s backwards; }
.cta                { animation: rise .7s cubic-bezier(.2,.7,.2,1) .4s backwards; }
.hero__definition   { animation: rise .7s cubic-bezier(.2,.7,.2,1) .48s backwards; }
.term               { animation: rise .7s cubic-bezier(.2,.7,.2,1) .48s backwards; }
.board              { animation: settle .9s cubic-bezier(.2,.7,.2,1) .3s backwards; }

/* --- Use cases page -------------------------------------------------------- */

.hero--page {
  grid-template-columns: 1fr;
  align-content: start;
  gap: clamp(36px, 6vh, 64px);
}

.pitch--page { max-width: 760px; }

.title--sm { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }

.cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.case {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--panel);
  transition: border-color .18s ease;
}

.case:hover { border-color: var(--accent-text); }

.case__code {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.case__name {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.case__desc {
  margin: 0;
  flex: 1;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

.case__meta {
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

@media (max-width: 1060px) {
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .cases { grid-template-columns: 1fr; }
}

/* --- Fab process strip ------------------------------------------------------
   The one numbered sequence on the page — because it is a real sequence.
   ------------------------------------------------------------------------ */

.strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 15px var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.strip__label { margin: 0; color: var(--fg-3); }

.strip__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fg-2);
}

.strip__steps li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.step__no {
  padding: 1px 5px;
  border: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 10px;
}

.strip__where { margin: 0 0 0 auto; color: var(--fg-3); }

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

/* The board needs its own column to read; below this the hero stacks. */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: clamp(36px, 6vh, 56px);
    padding-top: clamp(24px, 5vh, 48px);
  }
  .board { justify-self: start; width: min(480px, 100%); }
  .pitch { max-width: 36rem; }
  .strip__where { margin-left: 0; }
}

/* Too narrow for one masthead row: the nav drops to a second row rather than
   disappearing, so every link stays reachable without a drawer. */
@media (max-width: 720px) {
  .masthead {
    grid-template-columns: 1fr auto;
    gap: 12px 16px;
  }
  .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: clamp(12px, 4vw, 24px);
    font-size: 11px;
  }
}

/* Phones: the board sits centred under the copy and the type tightens up. */
@media (max-width: 560px) {
  .board { justify-self: center; }
  .title { font-size: clamp(2.6rem, 13vw, 4.2rem); }
  .lede { margin-top: 20px; }
  .cta { margin-top: 26px; gap: 10px; }
  .btn--lg { padding: 13px 18px; font-size: 12px; }
  .notice { font-size: 10px; letter-spacing: 0.08em; }
  .strip { font-size: 10px; letter-spacing: 0.1em; }
}

/* Very small screens (320px class). The masthead's own minimum width is what
   spills first, so every part of it gives back a few pixels. */
@media (max-width: 380px) {
  :root { --pad: 16px; }

  .masthead { gap: 10px; }
  .wordmark { gap: 9px; }
  .wordmark__mark { width: 26px; height: 26px; }
  .wordmark__text { font-size: 20px; }
  .masthead__actions { gap: 8px; }
  .shift { width: 32px; height: 32px; }
  .shift__icon { width: 16px; height: 16px; }
  .masthead .btn--primary { padding: 10px 12px; font-size: 11px; }

  .cta { display: grid; }
  .btn--lg { justify-content: center; }
}

/* Short and wide (laptops with lots of browser chrome, landscape phones):
   height is the scarce axis, so trim the vertical rhythm. */
@media (max-height: 680px) and (min-width: 900px) {
  .hero { padding-block: 22px; }
  .lede { margin-top: 18px; }
  .cta { margin-top: 24px; }
  .term { margin-top: 20px; }
  .board { width: min(58vh, 100%); }
}

/* --- Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001s !important;
    animation-duration: .001s !important;
    animation-delay: 0s !important;
  }
  .term__cursor { animation: none; }
}

/* --- Image-led landing page ----------------------------------------------- */

.landing {
  --fg: #F7F8FA;
  --fg-2: rgba(235 239 244 / 0.76);
  --fg-3: rgba(218 225 233 / 0.56);
  --solid: #F7F8FA;
  --on-solid: #05080B;
  --line: rgba(229 235 242 / 0.16);
  --line-2: rgba(235 240 246 / 0.34);
  --accent: #68ADFF;
  --accent-text: #7DB9FF;
  --panel: rgba(7 11 10 / 0.78);
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  grid-template-rows: auto 1fr;
  position: relative;
  isolation: isolate;
  background: #070A09;
  color: var(--fg);
}

.landing::before,
.landing::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.landing::before {
  z-index: -3;
  background: url("assets/foundry-video-poster.webp") 58% center / cover no-repeat;
  transform: scale(1.002);
}

.landing::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3 7 6 / 0.96) 0%, rgba(3 7 6 / 0.87) 29%, rgba(3 7 6 / 0.42) 55%, rgba(3 7 6 / 0.10) 78%),
    linear-gradient(180deg, rgba(3 6 5 / 0.62) 0%, transparent 28%, transparent 66%, rgba(3 6 5 / 0.82) 100%);
}

.landing .notice {
  position: relative;
  min-height: 34px;
  padding-block: 7px;
  border-color: rgba(224 231 225 / 0.11);
  background: rgba(4 8 7 / 0.78);
  backdrop-filter: blur(14px);
  color: rgba(232 235 228 / 0.68);
}

.landing .notice__mark { color: var(--accent-text); }

.landing .masthead {
  position: relative;
  min-height: 76px;
  padding-block: 15px;
  border-color: rgba(224 231 225 / 0.13);
  background: rgba(5 9 8 / 0.82);
}

.landing .wordmark__mark { width: 32px; height: 32px; }
.landing .mk-hex { fill: #EEEAE0; }
.landing .mk-a { fill: #101411; }
.landing .mk-b { fill: #101411; }

.landing .wordmark__text {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: lowercase;
}

.landing .nav {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(232 235 228 / 0.66);
}

.landing .nav a {
  position: relative;
  padding-block: 8px;
}

.landing .nav a::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.landing .nav a:hover { color: var(--fg); }
.landing .nav a:hover::after { transform: scaleX(1); }

.landing .masthead .btn--primary {
  min-height: 42px;
  padding: 11px 18px;
  border: 1px solid rgba(255 222 179 / 0.45);
  background: rgba(10 15 13 / 0.55);
  color: var(--fg);
  backdrop-filter: blur(10px);
}

.landing .masthead .btn--primary:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-solid);
}

.hero--landing {
  display: flex;
  min-height: calc(100svh - 172px);
  align-items: center;
  padding-block: clamp(54px, 9vh, 108px);
}

.hero--landing .pitch {
  width: min(760px, 100%);
  max-width: none;
}

.hero--landing .eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 23px;
  color: rgba(219 229 222 / 0.72);
  letter-spacing: 0.16em;
}

.hero--landing .eyebrow::before { display: none; }

.eyebrow__signal {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #61BFB1;
  box-shadow: 0 0 0 4px rgba(97 191 177 / 0.13), 0 0 18px rgba(97 191 177 / 0.8);
}

.hero--landing .title {
  max-width: 760px;
  font-size: clamp(3.3rem, 6.7vw, 6.8rem);
  font-weight: 600;
  line-height: 0.93;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 2px 34px rgba(0 0 0 / 0.42);
}

.hero--landing .title__l--hot { color: var(--accent-text); }
.hero--landing .title__dot { color: #68ADFF; }

.hero--landing .lede {
  max-width: 42ch;
  margin-top: 25px;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: rgba(231 235 228 / 0.78);
  text-shadow: 0 2px 20px rgba(0 0 0 / 0.55);
}

.hero--landing .cta { margin-top: 31px; }

/* Definition bridge - understated sentence that closes the hero and hands off to the next section. */
.hero__definition {
  grid-column: 1 / -1;
  margin: 30px 0 0;
  max-width: 52ch;
  font-size: clamp(0.86rem, 0.95vw, 0.98rem);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: rgba(231 235 228 / 0.54);
  text-shadow: 0 2px 16px rgba(0 0 0 / 0.5);
  text-wrap: pretty;
}

.hero--landing .btn--primary {
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--on-solid);
  box-shadow: 0 10px 34px rgba(0 0 0 / 0.28);
}

.hero--landing .btn--primary:hover {
  border-color: #8EC3FF;
  background: #8EC3FF;
  color: #0D100E;
}

.hero--landing .btn--ghost {
  border-color: rgba(224 231 225 / 0.38);
  background: rgba(6 11 9 / 0.38);
  color: var(--fg);
  backdrop-filter: blur(10px);
}

.hero--landing .btn--ghost:hover {
  border-color: #68ADFF;
  color: #8EC3FF;
  background: rgba(6 11 9 / 0.58);
}

.hero__status {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  margin-top: clamp(46px, 8vh, 88px);
  padding-top: 16px;
  border-top: 1px solid rgba(224 231 225 / 0.2);
  font-family: var(--mono);
}

.hero__status p {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(235 238 232 / 0.78);
}

.hero__status span {
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
  color: rgba(194 208 200 / 0.48);
}

.landing .strip {
  min-height: 62px;
  border-color: rgba(224 231 225 / 0.13);
  background: rgba(5 9 8 / 0.77);
  backdrop-filter: blur(14px);
}

.landing .step__no {
  border-color: rgba(224 231 225 / 0.18);
  color: #68ADFF;
}

@media (max-width: 900px) {
  .landing::before { background-position: 62% center; }

  .landing::after {
    background:
      linear-gradient(90deg, rgba(3 7 6 / 0.94) 0%, rgba(3 7 6 / 0.80) 52%, rgba(3 7 6 / 0.35) 100%),
      linear-gradient(180deg, rgba(3 6 5 / 0.64) 0%, transparent 35%, rgba(3 6 5 / 0.84) 100%);
  }

  .hero--landing {
    gap: 0;
    padding-top: clamp(52px, 8vh, 84px);
  }
}

@media (max-width: 720px) {
  .landing .masthead { background: rgba(5 9 8 / 0.68); }

  .hero--landing {
    min-height: calc(100svh - 205px);
    padding-bottom: 48px;
  }

  .hero--landing .title { font-size: clamp(3rem, 13.4vw, 5rem); }
  .hero__status { gap: 16px 24px; margin-top: 44px; }
}

@media (max-width: 560px) {
  .landing::before { background-position: 61% center; }

  .landing::after {
    background:
      linear-gradient(90deg, rgba(3 7 6 / 0.93), rgba(3 7 6 / 0.69)),
      linear-gradient(180deg, rgba(3 6 5 / 0.74) 0%, rgba(3 6 5 / 0.24) 34%, rgba(3 6 5 / 0.88) 100%);
  }

  .landing .notice {
    white-space: nowrap;
  }

  .notice__mobile-hide { display: none; }
  .landing .masthead__actions .btn { padding-inline: 14px; }
  .hero--landing .eyebrow { margin-bottom: 18px; }
  .hero--landing .lede { max-width: 33ch; }

  .hero__status p:nth-child(2) { order: 3; flex-basis: 100%; }
}

@media (max-width: 380px) {
  .landing .masthead { grid-template-columns: 1fr auto; }
  .landing .wordmark__text { font-size: 19px; }
  .landing .masthead__actions .btn { padding-inline: 11px; }
  .hero--landing .title { font-size: clamp(2.7rem, 13.5vw, 3.3rem); }
}

@media (max-height: 680px) and (max-width: 560px) {
  .hero--landing {
    min-height: 0;
    padding-block: 18px 8px;
  }

  .hero--landing .eyebrow { margin-bottom: 12px; }
  .hero--landing .lede { margin-top: 12px; }
  .hero--landing .cta { margin-top: 14px; }
  .hero__definition { margin-top: 18px; }
  .hero__status { display: none; }
}

@media (max-height: 680px) and (min-width: 900px) {
  .hero--landing { padding-block: 34px; }
  .hero--landing .title { font-size: clamp(3.2rem, 7.7vh, 5.3rem); }
  .hero__status { margin-top: 34px; }
}

/* --- Foundry control surface ---------------------------------------------- */

.landing {
  --display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --brand: "Geomini", var(--display);
}

.landing::before {
  background-position: 42% center;
}

.hero__video {
  position: fixed;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
  pointer-events: none;
  filter: contrast(1.03) saturate(1.04);
}

.landing::after {
  background:
    linear-gradient(90deg, rgba(2 6 5 / 0.92) 0%, rgba(2 6 5 / 0.72) 30%, rgba(2 6 5 / 0.23) 65%, rgba(2 6 5 / 0.08) 100%),
    linear-gradient(180deg, rgba(2 5 4 / 0.58) 0%, transparent 34%, transparent 62%, rgba(2 5 4 / 0.82) 100%);
}

.landing .notice {
  justify-content: flex-end;
  background: rgba(3 7 6 / 0.9);
}

.landing .masthead {
  min-height: 82px;
  background: rgba(3 8 6 / 0.74);
}

.landing .wordmark__text {
  font-family: var(--brand);
  font-size: 21px;
  font-weight: 400;
}

.landing .masthead .btn--primary {
  position: relative;
  min-width: 132px;
  border-color: rgba(247 248 250 / 0.36);
  background: rgba(5 10 8 / 0.54);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

.hero--landing {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-height: 100%;
  padding-block: 0;
  isolation: isolate;
}

.hero--landing::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 var(--gutter);
  opacity: 0.46;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(25% - 1px), rgba(217 228 220 / 0.07) 25%, transparent calc(25% + 1px)),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(217 228 220 / 0.07) 50%, transparent calc(50% + 1px)),
    linear-gradient(90deg, transparent calc(75% - 1px), rgba(217 228 220 / 0.07) 75%, transparent calc(75% + 1px));
}

.hero__axis,
.hero__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 34px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(213 224 217 / 0.42);
}

.hero__axis {
  justify-content: space-between;
  border-right: 1px solid rgba(218 228 221 / 0.17);
}

.hero__axis span:nth-child(2),
.hero__axis span:nth-child(3),
.hero__rail span:first-child {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.hero__axis span:first-child,
.hero__rail span:last-child {
  color: var(--accent-text);
}

.hero__rail {
  gap: 16px;
  border-left: 1px solid rgba(218 228 221 / 0.17);
}

.hero__rail i {
  position: relative;
  width: 1px;
  min-height: 60px;
  flex: 1;
  overflow: hidden;
  background: rgba(218 228 221 / 0.16);
}

.hero__rail i::after {
  content: "";
  position: absolute;
  inset: 0 0 52%;
  background: #68ADFF;
  box-shadow: 0 0 12px rgba(104 173 255 / 0.7);
}

.hero--landing .pitch {
  width: 100%;
  min-width: 0;
  max-width: 1180px;
  align-self: center;
  padding-block: clamp(34px, 5.6vh, 66px);
}

.hero__overline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  max-width: 1080px;
  padding-top: 12px;
  border-top: 1px solid rgba(219 228 222 / 0.22);
}

.hero--landing .eyebrow,
.hero__descriptor {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero--landing .eyebrow {
  margin: 0;
  color: rgba(226 233 228 / 0.72);
}

.hero__descriptor {
  color: rgba(221 230 224 / 0.48);
}

.hero--landing .title {
  max-width: 980px;
  margin-top: clamp(22px, 3.2vh, 38px);
  font-family: var(--display);
  font-size: clamp(4rem, 7vw, 6.8rem);
  font-weight: 650;
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 4px 36px rgba(0 0 0 / 0.38);
}

.hero--landing .title__l--hot {
  padding-left: clamp(26px, 7vw, 108px);
  font-size: 0.76em;
  line-height: 1.12;
  color: var(--fg);
  white-space: nowrap;
}

.hero--landing .title__l--work {
  padding-left: clamp(0px, 2.2vw, 32px);
  white-space: nowrap;
}

.hero--landing .title__dot { color: #68ADFF; }

.hero__lower {
  display: grid;
  grid-template-columns: minmax(260px, 420px) auto;
  align-items: end;
  gap: 28px clamp(32px, 5vw, 76px);
  max-width: 930px;
  margin-top: clamp(30px, 4.5vh, 52px);
  margin-left: clamp(0px, 10vw, 150px);
  padding-left: 17px;
  border-left: 2px solid var(--accent);
}

.hero--landing .lede {
  max-width: 40ch;
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(0.96rem, 1.15vw, 1.08rem);
  line-height: 1.55;
  color: rgba(233 237 231 / 0.78);
}

.hero--landing .cta {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
}

.hero--landing .btn {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.hero--landing .btn--primary {
  box-shadow: none;
}

.landing .strip {
  position: relative;
}

@media (max-width: 1080px) {
  .hero--landing .title {
    font-size: clamp(3.8rem, 7.5vw, 5.8rem);
  }

  .hero__lower {
    margin-left: clamp(0px, 6vw, 70px);
  }
}

@media (max-width: 900px) {
  .landing::before { background-position: 60% center; }

  .landing::after {
    background:
      linear-gradient(90deg, rgba(2 6 5 / 0.9), rgba(2 6 5 / 0.5)),
      linear-gradient(180deg, rgba(2 5 4 / 0.62) 0%, transparent 38%, rgba(2 5 4 / 0.84) 100%);
  }

  .hero--landing {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: calc(100svh - 178px);
    padding-top: 0;
  }

  .hero__axis,
  .hero__rail { display: none; }

  .hero--landing .pitch {
    max-width: 760px;
    padding-block: clamp(52px, 8vh, 86px);
  }

  .hero--landing .title {
    font-size: clamp(3.6rem, 9vw, 5.2rem);
  }

  .hero__lower {
    margin-left: clamp(0px, 7vw, 56px);
  }
}

@media (max-width: 720px) {
  .landing .notice { justify-content: center; }

  .hero--landing {
    min-height: calc(100svh - 211px);
  }

  .hero--landing .pitch {
    padding-block: clamp(42px, 7vh, 68px);
  }

  .hero--landing .title {
    font-size: clamp(2.25rem, 11vw, 4.2rem);
    line-height: 0.84;
  }

  .hero__lower {
    grid-template-columns: 1fr;
    align-items: start;
    margin-top: 32px;
    margin-left: 0;
  }

  .hero--landing .lede { max-width: 35ch; }
}

@media (max-width: 560px) {
  .landing::before { background-position: 62% center; }

  .hero__descriptor { display: none; }

  .hero--landing .pitch {
    padding-block: 38px;
  }

  .hero--landing .title {
    margin-top: 22px;
    font-size: clamp(2.25rem, 11vw, 3.85rem);
  }

  .hero--landing .title__l--hot { padding-left: 0.42em; }
  .hero--landing .title__l--work { padding-left: 0; }

  .hero__lower {
    gap: 22px;
    margin-top: 28px;
    padding-left: 13px;
  }

  .hero--landing .cta {
    display: grid;
    width: min(100%, 350px);
  }
}

@media (max-width: 380px) {
  .landing .notice { font-size: 9px; }

  .hero--landing .title {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }
}

@media (max-height: 680px) and (max-width: 560px) {
  .hero--landing {
    min-height: 0;
  }

  .hero--landing .pitch {
    padding-block: 18px 10px;
  }

  .hero--landing .title { margin-top: 15px; }
  .hero__lower { gap: 14px; margin-top: 18px; }
}

@media (max-height: 700px) and (min-width: 901px) {
  .hero--landing .pitch { padding-block: 28px; }
  .hero--landing .title { font-size: clamp(3.7rem, 9.2vh, 6rem); }
  .hero__lower { margin-top: 25px; }
}

/* --- Final landing alignment and scroll depth ----------------------------- */

.landing {
  --hero-scroll: 0px;
}

.landing::before {
  transform: translate3d(0, calc(var(--hero-scroll) * 0.1), 0) scale(1.04);
  transform-origin: center;
  will-change: transform;
}

.hero__video {
  transform: translate3d(0, calc(var(--hero-scroll) * 0.1), 0) scale(1.04);
  transform-origin: center;
  will-change: transform;
}

.hero--landing {
  min-height: calc(112svh - 82px);
}

.hero--landing .pitch {
  transform: translate3d(0, calc(var(--hero-scroll) * -0.14), 0);
  will-change: transform;
}

.hero--landing .title__l--hot,
.hero--landing .title__l--work {
  padding-left: 0;
}

.hero--landing .title__l--hot {
  font-size: 1em;
  line-height: inherit;
}

.hero__lower {
  margin-left: 0;
}

@media (min-width: 721px) {
  .hero--landing .pitch {
    align-self: start;
    padding-top: clamp(76px, 11vh, 126px);
  }

  .hero__lower {
    grid-template-columns: minmax(0, 430px);
    max-width: 430px;
    gap: 24px;
  }
}

@media (max-width: 720px) {
  .landing::before {
    background-position: 50% center;
  }

  .hero__video {
    object-position: 50% center;
  }

  .hero--landing {
    min-height: calc(112svh - 153px);
  }
}

@media (max-height: 680px) and (max-width: 560px) {
  .hero--landing {
    min-height: calc(108svh - 145px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }

  .landing::before,
  .hero--landing .pitch {
    transform: none;
    will-change: auto;
  }
}

/* --- Use cases: black, white, signal blue --------------------------------- */

.usecases-page {
  --fg: #F7F8FA;
  --fg-2: rgba(235 239 244 / 0.72);
  --fg-3: rgba(218 225 233 / 0.5);
  --solid: #F7F8FA;
  --on-solid: #05080B;
  --line: rgba(229 235 242 / 0.13);
  --line-2: rgba(235 240 246 / 0.3);
  --accent: #68ADFF;
  --accent-text: #7DB9FF;
  --panel: #0A0D11;
  --display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --brand: "Geomini", var(--display);
  color-scheme: only dark;
  grid-template-rows: auto 1fr;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(104 173 255 / 0.055) 50%, transparent calc(50% + 1px)),
    #05080B;
  color: var(--fg);
}

.usecases-page .masthead {
  min-height: 82px;
  padding-block: 15px;
  border-color: var(--line);
  background: rgba(5 8 11 / 0.92);
}

.usecases-page .wordmark__mark {
  width: 32px;
  height: 32px;
}

.usecases-page .mk-hex { fill: #F7F8FA; }
.usecases-page .mk-a { fill: #05080B; }
.usecases-page .mk-b { fill: #05080B; }

.usecases-page .wordmark__text {
  font-family: var(--brand);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
}

.usecases-page .nav {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(235 239 244 / 0.62);
}

.usecases-page .nav a {
  position: relative;
  padding-block: 8px;
}

.usecases-page .nav a[aria-current="page"] {
  color: var(--fg);
}

.usecases-page .nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  height: 1px;
  background: var(--accent);
}

.usecases-page .masthead .btn--primary {
  min-height: 42px;
  min-width: 132px;
  justify-content: center;
  padding: 11px 18px;
  border: 1px solid rgba(247 248 250 / 0.38);
  background: transparent;
  color: var(--fg);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

.usecases-page .masthead .btn--primary:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-solid);
}

.usecases-page .hero--page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: clamp(44px, 6vh, 68px);
  padding-block: clamp(58px, 7vw, 92px) clamp(54px, 6vw, 80px);
}

.usecases-page .pitch--page {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.6fr);
  align-items: end;
  gap: 0 clamp(44px, 6vw, 92px);
  max-width: none;
}

.usecases-page .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 20px;
  color: var(--accent-text);
}

.usecases-page .eyebrow::before {
  background: var(--accent);
}

.usecases-page .title--sm {
  grid-column: 1;
  max-width: 930px;
  font-family: var(--display);
  font-size: clamp(3.4rem, 5.8vw, 5.7rem);
  font-weight: 650;
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: none;
}

.usecases-page .title__l--hot {
  color: var(--fg);
}

.usecases-page .title__dot {
  color: var(--accent);
}

.usecases-page .lede {
  grid-column: 2;
  max-width: 42ch;
  margin: 0 0 7px;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  color: var(--fg-2);
}

/* The catalogue should be usable immediately; do not hold its orientation
   copy behind the global landing-page entrance sequence. */
.usecases-page .hero--page :is(.eyebrow, .title__l, .lede) {
  animation: none;
}

.usecases-page .case-directory {
  display: grid;
  gap: 26px;
  padding-block: clamp(28px, 4vw, 48px);
  border-block: 1px solid var(--line);
}

.usecases-page .case-directory__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.7fr);
  align-items: end;
  gap: 32px clamp(44px, 6vw, 92px);
}

.usecases-page .case-directory__kicker {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.usecases-page .case-directory__intro h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}

.usecases-page .case-directory__intro > p {
  max-width: 48ch;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-2);
  text-wrap: pretty;
}

.usecases-page .case-directory__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.usecases-page .case-directory__grid a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 18px;
  min-height: 152px;
  padding: 21px 22px 19px;
  overflow: hidden;
  background: rgba(10 13 17 / 0.96);
  transition: background .18s ease, color .18s ease;
}

.usecases-page .case-directory__grid a::after {
  content: "↘";
  position: absolute;
  right: 19px;
  top: 17px;
  color: var(--fg-3);
  font: 400 15px/1 var(--mono);
  transition: color .18s ease, transform .18s ease;
}

.usecases-page .case-directory__grid a:hover,
.usecases-page .case-directory__grid a:focus-visible {
  outline: none;
  background: #101722;
}

.usecases-page .case-directory__grid a:hover::after,
.usecases-page .case-directory__grid a:focus-visible::after {
  color: var(--accent);
  transform: translate(2px, 2px);
}

.usecases-page .case-directory__number {
  grid-column: 1;
  align-self: start;
  color: var(--accent-text);
  font: 500 10px/1.2 var(--mono);
  letter-spacing: 0.12em;
}

.usecases-page .case-directory__grid strong {
  grid-column: 1 / -1;
  align-self: end;
  max-width: 15ch;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.15;
}

.usecases-page .case-directory__grid small {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  margin-right: 28px;
  color: var(--fg-3);
  font: 500 9px/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.usecases-page .cases {
  gap: 12px;
}

.usecases-page .case-search {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 880px) minmax(120px, 1fr);
  gap: 9px 20px;
  align-items: end;
  margin-bottom: clamp(22px, 3vw, 38px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.usecases-page .case-search__label {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.usecases-page .case-search__field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: none;
}

.usecases-page .case-search__field svg {
  position: absolute;
  left: 17px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--fg-3);
  stroke-width: 1.6;
  pointer-events: none;
}

.usecases-page .case-search__field input {
  width: 100%;
  min-height: 52px;
  padding: 13px 84px 13px 48px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  outline: none;
  background: rgba(10 13 17 / 0.9);
  color: var(--fg);
  font: 500 15px/1.4 var(--sans);
  appearance: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.usecases-page .case-search__field input::placeholder {
  color: var(--fg-3);
  opacity: 1;
}

.usecases-page .case-search__field input:placeholder-shown {
  padding-right: 16px;
}

.usecases-page .case-search__field input:focus {
  border-color: var(--accent);
  background: #0C1118;
  box-shadow: 0 0 0 3px rgba(104 173 255 / 0.12);
}

.usecases-page .case-search__field input::-webkit-search-cancel-button {
  display: none;
}

.usecases-page .case-search__clear {
  position: absolute;
  right: 13px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.usecases-page .case-search__clear:hover {
  color: var(--fg);
}

.usecases-page .case-search__status {
  justify-self: end;
  margin: 0 0 15px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}

.usecases-page .case-search__status span {
  color: var(--fg);
}

.usecases-page .case-search__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(50px, 8vw, 100px) 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg-2);
  text-align: center;
}

.usecases-page .case-search__empty strong {
  color: var(--fg);
  font-weight: 600;
}

.usecases-page :is(.case, .case-group, .case-search__clear, .case-search__empty)[hidden] {
  display: none;
}

.usecases-page .case-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 24px;
  margin-top: clamp(36px, 6vw, 72px);
  padding: 0 2px 18px;
  border-bottom: 1px solid rgba(104 173 255 / 0.35);
  scroll-margin-top: 110px;
}

.usecases-page .case-search + .case-group,
.usecases-page .case-group.is-first-match {
  margin-top: 0;
}

.usecases-page .case-group p {
  grid-column: 1;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.usecases-page .case-group h2 {
  grid-column: 2 / -1;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.usecases-page .case {
  min-height: 350px;
  gap: 14px;
  padding: 22px 23px 20px;
  border-color: var(--line);
  border-radius: 4px;
  background: rgba(10 13 17 / 0.9);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.usecases-page .case:hover {
  transform: translateY(-2px);
  border-color: rgba(104 173 255 / 0.6);
  background: #0C1118;
}

.usecases-page .case__code {
  color: var(--fg-3);
}

.usecases-page .case__code span:last-child {
  color: var(--accent-text);
}

.usecases-page .case__name {
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.usecases-page .case__section {
  margin-top: 2px;
}

.usecases-page .case__section h3 {
  margin: 0 0 7px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.usecases-page .case__section p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

.usecases-page .case__section--ai {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.usecases-page .case__section--ai h3 {
  color: rgba(125 185 255 / 0.78);
}

.usecases-page .case__outcomes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.7fr);
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.usecases-page .case__outcomes h3 {
  margin: 0 0 7px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.usecases-page .case__outcomes div:last-child h3 {
  color: rgba(125 185 255 / 0.78);
}

.usecases-page .case__outcomes p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-2);
}

@media (max-width: 1060px) {
  .usecases-page .case-directory__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .usecases-page .case-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .usecases-page .case-group h2 {
    grid-column: 2;
  }
}

@media (max-width: 900px) {
  .usecases-page .pitch--page {
    grid-template-columns: minmax(0, 1fr);
  }

  .usecases-page .title--sm,
  .usecases-page .lede {
    grid-column: 1;
  }

  .usecases-page .lede {
    max-width: 58ch;
    margin: 24px 0 0;
  }

  .usecases-page .case-directory__intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 720px) {
  .usecases-page .masthead {
    grid-template-columns: 1fr auto;
    gap: 12px 16px;
  }

  .usecases-page .hero--page {
    padding-block: 46px 64px;
  }

  .usecases-page .case-directory__grid {
    grid-template-columns: 1fr;
  }

  .usecases-page .case-directory__grid a {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 17px 46px 17px 18px;
  }

  .usecases-page .case-directory__number {
    grid-column: 1;
    grid-row: 1;
  }

  .usecases-page .case-directory__grid strong {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    font-size: 1rem;
  }

  .usecases-page .case-directory__grid small {
    display: none;
  }

  .usecases-page .case-directory__grid a::after {
    top: 50%;
    transform: translateY(-50%);
  }

  .usecases-page .case-directory__grid a:hover::after,
  .usecases-page .case-directory__grid a:focus-visible::after {
    transform: translate(2px, calc(-50% + 2px));
  }

  .usecases-page .case-group {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .usecases-page .case-group h2 {
    grid-column: 1;
  }

  .usecases-page .case-search {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .usecases-page .case-search__status {
    justify-self: start;
    margin: 3px 0 0;
  }

  .usecases-page .case {
    min-height: 0;
    padding: 22px;
  }
}

@media (max-width: 380px) {
  .usecases-page .masthead .btn--primary {
    min-width: 0;
    padding-inline: 11px;
  }

  .usecases-page .title--sm {
    font-size: clamp(2.8rem, 14vw, 3.4rem);
  }
}

/* --- Contained video stage ------------------------------------------------ */

.landing::before {
  background-position: center;
  filter: blur(10px) brightness(0.62) saturate(0.82);
  transform: translate3d(0, calc(var(--hero-scroll) * 0.06), 0) scale(1.08);
}

.hero__video {
  inset: auto;
  top: 50%;
  left: 54%;
  width: min(864px, 88vw);
  height: auto;
  aspect-ratio: 864 / 496;
  object-fit: contain;
  object-position: center;
  transform: translate3d(-50%, calc(-50% + var(--hero-scroll) * 0.1), 0);
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0 0 0 / 0.3) 5%,
      rgba(0 0 0 / 0.82) 12%,
      #000 18%,
      #000 86%,
      rgba(0 0 0 / 0.82) 93%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0 0 0 / 0.28) 6%,
      rgba(0 0 0 / 0.84) 14%,
      #000 20%,
      #000 80%,
      rgba(0 0 0 / 0.84) 89%,
      rgba(0 0 0 / 0.28) 96%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0 0 0 / 0.3) 5%,
      rgba(0 0 0 / 0.82) 12%,
      #000 18%,
      #000 86%,
      rgba(0 0 0 / 0.82) 93%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0 0 0 / 0.28) 6%,
      rgba(0 0 0 / 0.84) 14%,
      #000 20%,
      #000 80%,
      rgba(0 0 0 / 0.84) 89%,
      rgba(0 0 0 / 0.28) 96%,
      transparent 100%
    );
          mask-composite: intersect;
}

@media (min-width: 1200px) {
  .hero__video {
    left: 68%;
  }
}

@media (max-width: 720px) {
  .hero__video {
    width: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing::before {
    transform: scale(1.08);
  }
}

/* Compact hero headline scale. */
.hero--landing .title {
  font-size: clamp(3.4rem, 6vw, 5.8rem);
}

@media (max-width: 900px) {
  .hero--landing .title {
    font-size: clamp(3rem, 8vw, 4.6rem);
  }
}

@media (max-width: 720px) {
  .hero--landing .title {
    font-size: clamp(2.2rem, 9.5vw, 3.6rem);
  }
}

@media (max-width: 380px) {
  .hero--landing .title {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
}

/* --- Landing main --------------------------------------------------------- */

.landing > main {
  min-width: 0;
}

/* --- Runtime governance --------------------------------------------------- */

.gov {
  position: relative;
  z-index: 2;
  padding: clamp(76px, 9vw, 132px) var(--gutter) clamp(88px, 11vw, 156px);
  border-top: 1px solid rgba(235 240 246 / 0.14);
  background: #05080B;
  color: #F7F8FA;
}

.gov__inner {
  width: 100%;
  max-width: var(--hold);
  margin-inline: auto;
}

.gov__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
  align-items: end;
  gap: 32px clamp(56px, 9vw, 140px);
  max-width: none;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.gov__head,
.gov__intro-side { min-width: 0; }

.gov__eyebrow {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7DB9FF;
}

.gov__title {
  max-width: 13ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.6rem, 5.2vw, 5.4rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.gov__deck {
  max-width: 56ch;
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.65;
  color: rgba(235 239 244 / 0.68);
  text-wrap: pretty;
}

.gov__proofs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
}

.gov__proofs li {
  padding: 7px 9px;
  border: 1px solid rgba(125 185 255 / 0.24);
  background: rgba(125 185 255 / 0.045);
  color: rgba(235 239 244 / 0.62);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .07em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Two-column body: cards left, synced visual stage right. */
.gov__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: 0;
  border: 1px solid rgba(235 240 246 / 0.16);
  background:
    linear-gradient(rgba(235 240 246 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(235 240 246 / 0.025) 1px, transparent 1px),
    rgba(229 235 242 / 0.018);
  background-size: 24px 24px;
  box-shadow: 0 36px 90px rgba(0 0 0 / 0.24);
}

.gov__console-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(235 240 246 / 0.16);
  background: rgba(229 235 242 / 0.035);
  color: rgba(235 239 244 / 0.46);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.gov__console-bar span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #86C5A0;
}

.gov__console-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #86C5A0;
  box-shadow: 0 0 0 5px rgba(134 197 160 / 0.08);
}

.gov__cards {
  min-width: 0;
  padding: 10px clamp(20px, 2.5vw, 36px) 28px;
}

.gov-card {
  border-top: 1px solid rgba(235 240 246 / 0.14);
  transition: border-color .22s ease, background .22s ease;
}
.gov-card.is-active {
  border-top-color: rgba(104 173 255 / 0.55);
}
.gov-card:last-child { border-bottom: 1px solid rgba(235 240 246 / 0.14); }

.gov-card > h3 { margin: 0; }

.gov-card__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  padding: 22px 4px 22px 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: color .22s ease;
}
.gov-card__head:hover { color: #FFF; }

.gov-card__no {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(235 239 244 / 0.45);
  transition: color .22s ease;
}
.gov-card.is-active .gov-card__no { color: #7DB9FF; }
.gov-card__head:hover .gov-card__no { color: rgba(125 185 255 / 0.8); }

.gov-card__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
  color: rgba(235 239 244 / 0.86);
  transition: color .22s ease;
}
.gov-card.is-active .gov-card__title { color: #F7F8FA; }
.gov-card__head:hover .gov-card__title { color: #F7F8FA; }

/* Chevron mark — rotates on expand. Pure CSS, no icon dependency. */
.gov-card__chev {
  flex: none;
  position: relative;
  width: 14px;
  height: 14px;
  align-self: center;
  margin-top: 2px;
  color: #7DB9FF;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.gov-card__chev::before,
.gov-card__chev::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
}
.gov-card__chev::before { width: 14px; height: 1.5px; }
.gov-card__chev::after  { width: 1.5px; height: 14px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.gov-card.is-active .gov-card__chev::after { transform: scaleY(0); }

/* Smooth open/close via the grid-rows 0fr -> 1fr trick. The body holds a
   single .gov-card__panel wrapper whose overflow is clipped while closed. */
.gov-card__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.2,.7,.2,1);
}
.gov-card.is-active .gov-card__body { grid-template-rows: 1fr; }

.gov-card__panel {
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.gov-card__text {
  margin: 0 0 22px;
  max-width: 54ch;
  padding-right: clamp(8px, 2vw, 36px);
  font-size: 15px;
  line-height: 1.62;
  color: rgba(235 239 244 / 0.66);
  text-wrap: pretty;
}

/* On desktop, the in-card visual is hidden — JS moves it into the stage.
   Without JS (or while the layout is mobile) it renders in place. */
.gov-card__visual { min-width: 0; }

/* --- Desktop stage (right column) ---------------------------------------- */

.gov__stage {
  min-width: 0;
  align-self: stretch;
  padding: clamp(22px, 2.7vw, 40px);
  border-left: 1px solid rgba(235 240 246 / 0.16);
  background: rgba(3 6 9 / 0.42);
}

.gov__stage .gov-card__visual {
  position: relative;
  display: none;
}
.gov__stage .gov-card__visual.is-active { display: block; }

/* Crossfade when the active stage panel changes. */
.gov__stage .gov-card__visual.is-active {
  animation: gov-fade .42s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes gov-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Desktop governance is a short scroll narrative. The control console pins
   after the introduction while scroll progress advances its four policies. */
@media (min-width: 1101px) {
  .gov__inner { min-height: 220svh; }
  .gov__layout {
    position: sticky;
    top: 84px;
  }
}

/* --- Product-interface panels ------------------------------------------- */

.gv-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: linear-gradient(180deg, rgba(229 235 242 / 0.05), rgba(229 235 242 / 0.02));
  border: 1px solid rgba(235 240 246 / 0.16);
  border-radius: 0;
  overflow: hidden;
}
.gv-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: #68ADFF;
  opacity: .85;
}

.gv-panel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(235 240 246 / 0.14);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(235 239 244 / 0.6);
}
.gv-panel__tag {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7DB9FF;
}
.gv-panel__file { color: rgba(235 239 244 / 0.85); }
.gv-panel__state { margin-left: auto; color: rgba(235 239 244 / 0.55); }
.gv-panel__state--ok { color: #86C5A0; }
.gv-panel__state--live { display: inline-flex; align-items: center; gap: 7px; color: #86C5A0; }
.gv-panel__state--wait { color: #E4A268; }

.gv-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #86C5A0;
  box-shadow: 0 0 0 0 rgba(134 197 160 / 0.6);
  animation: gv-pulse 2.4s ease-out infinite;
}
@keyframes gv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(134 197 160 / 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(134 197 160 / 0); }
  100% { box-shadow: 0 0 0 0 rgba(134 197 160 / 0); }
}

/* Rego code block — internal horizontal scroll only when needed. */
.gv-code {
  margin: 0;
  padding: 18px 16px 20px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(235 239 244 / 0.86);
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
}
.gv-code code { font-family: inherit; }
.gv-code .t-k { color: #7DB9FF; }
.gv-code .t-s { color: #86C5A0; }
.gv-code .t-c { color: rgba(235 239 244 / 0.38); font-style: italic; }

.gv-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid rgba(235 240 246 / 0.14);
  background: rgba(7 11 16 / 0.4);
}
.gv-meta > div { padding: 6px 0; }
.gv-meta dt {
  margin: 0 0 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(235 239 244 / 0.42);
}
.gv-meta dd { margin: 0; font-size: 13px; color: rgba(235 239 244 / 0.85); }
.gv-meta dd b { color: #86C5A0; font-weight: 500; }
.gv-meta .gv-meta--no { color: #E08A6B; }

/* Runtime enforcement stream. */
.gv-stream {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
}
.gv-act {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-top: 1px solid rgba(235 240 246 / 0.1);
}
.gv-act__verb {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #7DB9FF;
}
.gv-act__desc {
  font-size: 13.5px;
  color: rgba(235 239 244 / 0.84);
}
.gv-act__dec {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.gv-act__dec--ok { color: #86C5A0; border-color: rgba(134 197 160 / 0.35); background: rgba(134 197 160 / 0.08); }
.gv-act--no .gv-act__dec--no { color: #E08A6B; border-color: rgba(224 138 107 / 0.4); background: rgba(224 138 107 / 0.1); }
.gv-act--no { background: rgba(224 138 107 / 0.05); }

.gv-reason {
  margin: 0;
  padding: 14px 16px 18px;
  border-top: 1px solid rgba(235 240 246 / 0.14);
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(235 239 244 / 0.62);
}
.gv-reason b { color: rgba(235 239 244 / 0.85); font-weight: 500; }
.gv-reason__k { color: #E08A6B; font-weight: 500; }

/* Approval gate panel. */
.gv-req {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 18px 16px 6px;
}
.gv-req > div { padding: 8px 0; }
.gv-req dt {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(235 239 244 / 0.42);
}
.gv-req dd { margin: 0; font-size: 14px; color: rgba(235 239 244 / 0.88); }
.gv-req--wait { color: #E4A268; }

.gv-actions {
  display: flex;
  gap: 12px;
  padding: 16px 16px 0;
}
.gv-btn {
  flex: 1 1 0;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: default;
  transition: transform .12s ease;
}
.gv-btn--deny {
  color: rgba(235 239 244 / 0.72);
  border-color: rgba(235 240 246 / 0.22);
  background: transparent;
}
.gv-btn--approve {
  color: #05080B;
  border-color: #68ADFF;
  background: #68ADFF;
}

.gv-aside {
  margin: 16px 16px 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(235 240 246 / 0.14);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(235 239 244 / 0.5);
}

/* Decision ledger. The columns mirror the data security teams export: when,
   who did what, and which deterministic decision was applied. */
.gv-audit-head,
.gv-audit > li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.gv-audit-head {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(235 240 246 / 0.1);
  color: rgba(235 239 244 / 0.36);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gv-audit {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gv-audit > li {
  padding: 15px 16px;
  border-bottom: 1px solid rgba(235 240 246 / 0.1);
  color: rgba(235 239 244 / 0.72);
  font-size: 12.5px;
  line-height: 1.45;
}

.gv-audit > li.is-blocked { background: rgba(224 138 107 / 0.045); }

.gv-audit time {
  color: rgba(235 239 244 / 0.42);
  font-family: var(--mono);
  font-size: 10px;
}

.gv-audit b { color: rgba(235 239 244 / 0.9); font-weight: 500; }

.gv-audit em {
  padding: 4px 8px;
  border: 1px solid;
  font-family: var(--mono);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gv-audit--ok { color: #86C5A0; border-color: rgba(134 197 160 / 0.32); }
.gv-audit--no { color: #E08A6B; border-color: rgba(224 138 107 / 0.38); }

.gv-audit-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 14px 16px;
  background: rgba(7 11 16 / 0.4);
}

.gv-audit-foot > div + div {
  padding-left: 14px;
  border-left: 1px solid rgba(235 240 246 / 0.1);
}

.gv-audit-foot dt {
  margin-bottom: 3px;
  color: rgba(235 239 244 / 0.36);
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gv-audit-foot dd {
  margin: 0;
  color: rgba(235 239 244 / 0.78);
  font-size: 12px;
}

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

/* Tablet and below: single-column accordion. The shared desktop stage is
   hidden and each visual renders inside its own card body, directly beneath
   its description. */
@media (max-width: 1100px) {
  .gov__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gov__stage { display: none; }
  .gov__cards { padding-inline: clamp(18px, 4vw, 32px); }
  .gov-card__visual { margin-bottom: 28px; }
}

@media (max-width: 840px) {
  .gov__intro { grid-template-columns: 1fr; align-items: start; }
  .gov__intro-side { max-width: 60ch; }
}

/* Phone: tighten rhythm and let dense interface panels go single-column. */
@media (max-width: 720px) {
  .gov { padding-block: 64px 80px; }
  .gov__title { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .gov__deck { margin-top: 20px; }

  .gov-card__head { gap: 14px; padding: 19px 2px 19px 0; }
  .gov-card__title { font-size: clamp(1.15rem, 4.6vw, 1.45rem); }
  .gov-card__text { margin-bottom: 18px; padding-right: 0; font-size: 14.5px; }

  .gv-code { font-size: 11.5px; }
  .gv-meta { grid-template-columns: 1fr; }
  .gv-req { grid-template-columns: 1fr; }
  .gv-act { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .gv-act__desc { font-size: 12.5px; }
  .gov__console-bar { align-items: flex-start; flex-direction: column; gap: 4px; }
  .gv-audit-head { display: none; }
  .gv-audit > li { grid-template-columns: 68px minmax(0, 1fr); }
  .gv-audit em { grid-column: 2; justify-self: start; }
  .gv-audit-foot { grid-template-columns: 1fr; gap: 10px; }
  .gv-audit-foot > div + div { padding: 10px 0 0; border-top: 1px solid rgba(235 240 246 / 0.1); border-left: 0; }
}

/* Focused/hover affordances match the site's accent outline. */
.gov-card__head:focus-visible {
  outline: 2px solid #68ADFF;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gov-card__body,
  .gov-card__chev,
  .gov-card__chev::after,
  .gov__stage .gov-card__visual.is-active,
  .gv-dot { transition: none; animation: none; }
}



.landing .masthead,
.usecases-page .masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 72px;
  padding-block: 11px;
  transition:
    min-height .22s ease,
    padding .22s ease,
    background .22s ease,
    border-color .22s ease;
}

.landing .masthead.is-scrolled,
.usecases-page .masthead.is-scrolled {
  min-height: 60px;
  padding-block: 7px;
  border-color: var(--line);
  background: #05080B;
  backdrop-filter: none;
  box-shadow: none;
}

.landing .masthead .wordmark__mark,
.usecases-page .masthead .wordmark__mark,
.landing .masthead .wordmark__text,
.usecases-page .masthead .wordmark__text,
.landing .masthead .btn,
.usecases-page .masthead .btn {
  transition: width .22s ease, height .22s ease, min-height .22s ease, font-size .22s ease, padding .22s ease;
}

.landing .masthead.is-scrolled .wordmark__mark,
.usecases-page .masthead.is-scrolled .wordmark__mark {
  width: 28px;
  height: 28px;
}

.landing .masthead.is-scrolled .wordmark__text,
.usecases-page .masthead.is-scrolled .wordmark__text {
  font-size: 19px;
}

.landing .masthead.is-scrolled .btn,
.usecases-page .masthead.is-scrolled .btn {
  min-height: 36px;
  padding-block: 8px;
}

@media (max-width: 720px) {
  .landing .masthead.is-scrolled,
  .usecases-page .masthead.is-scrolled {
    row-gap: 7px;
  }

  .landing .masthead.is-scrolled .nav a,
  .usecases-page .masthead.is-scrolled .nav a {
    padding-block: 3px;
  }
}

/* --- Section 2: AI on the critical path --------------------------------------
   A light contrast pause against the surrounding dark surfaces: the foundry's
   day-shift bone paper (the --bg-0 / #EAE6D9 family) becomes a full-bleed warm
   pale-stone ground, with dark graphite ink. A warm amber accent (shared with
   the hero period and the Platform diagram) is used selectively — the brighter
   #C2662C marks the agent mark, pulses, and accent fills (graphical elements
   that read on light), while a darker #9A4A14 carries the period after the
   headline for text-grade contrast.
   Hairlines and tonal steps separate; no heavy shadows. The structure,
   spacing, grid, radii, and technical line-work visuals are unchanged.
   ------------------------------------------------------------------------- */

.surfaces {
  --s-bg:      #E9E4D4;            /* warm pale stone, full-bleed */
  --s-fg:      #1A170F;            /* day-shift graphite ink */
  --s-fg-2:    rgba(26 23 15 / 0.72);
  --s-fg-3:    rgba(26 23 15 / 0.5);
  --s-line:    rgba(26 23 15 / 0.16);
  --s-line-2:  rgba(26 23 15 / 0.18);
  --s-accent:  #9A4A14;            /* readable warm amber for text on light */
  --s-accent-2: #C2662C;           /* warm amber: agent mark, pulses, fills */

  position: relative;
  z-index: 2;
  padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(88px, 11vw, 156px);
  border-top: 1px solid var(--s-line);
  background: var(--s-bg);
  color: var(--s-fg);
}

.surfaces__inner {
  width: 100%;
  max-width: var(--hold);
  margin-inline: auto;
}

.surfaces__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  align-items: last baseline;
  gap: 32px clamp(48px, 8vw, 120px);
}

/* The kicker sits directly above the headline, tight — one unit. It uses
   the same uppercase mono register as the nav (small, wide tracking, muted),
   not the display face and not the accent, so it reads as a kicker rather
   than competing with the headline as prose. */
.surfaces__kicker {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--s-fg-3);
}

.surfaces__head { min-width: 0; }

.surfaces__title {
  max-width: 820px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 5.8vw, 6rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: 0;
  color: var(--s-fg);
  text-wrap: balance;
}

/* The period after the title is the one accent mark in the section — the same
   sparing signal as the dot after "factories" in the hero. The darker
   #9A4A14 carries the glyph (text-grade contrast on the pale-stone ground)
   while the brighter #C2662C remains on the graphical agent marks and
   pulses below. Both warm ambers are shared with the Platform diagram. */
.surfaces__dot { color: var(--s-accent); }

.surfaces__deck {
  max-width: 52ch;
  margin: 0;
  align-self: last baseline;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.65;
  color: var(--s-fg-2);
  text-wrap: pretty;
}

.surfaces__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(32px, 3.6vw, 48px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--s-line);
}

/* Blocks stretch to the tallest column; content top-aligns so the three
   visuals read as a set across the top. Block 01 is shorter, so its column
   carries trailing negative space rather than padded copy. */
.surf {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.surf__visual {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 16 / 11;
  margin-bottom: 28px;
  color: rgba(26 23 15 / 0.42);
}

.surf__visual svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: .82;
  stroke-linejoin: round;
  stroke-linecap: round;
}

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

/* Product-interface proofs replace abstract diagrams. They borrow the dense,
   operational UI language of the Exo control plane while staying within the
   landing page's graphite and fired-clay palette. */
.surf-product {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 16 / 11;
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
  overflow: hidden;
  border: 1px solid rgba(26 23 15 / 0.72);
  background:
    linear-gradient(rgba(237 233 220 / 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237 233 220 / 0.026) 1px, transparent 1px),
    #0D0F0E;
  background-size: 18px 18px;
  color: #EDE9DC;
  box-shadow: 9px 9px 0 rgba(26 23 15 / 0.08);
  transform: translateY(0);
  transition: border-color .25s ease, box-shadow .3s ease,
    transform .3s cubic-bezier(.2, .75, .25, 1);
}

.surf:hover .surf-product {
  border-color: rgba(194 102 44 / 0.88);
  box-shadow: 12px 14px 0 rgba(26 23 15 / 0.09);
  transform: translateY(-4px);
}

.surf-product__bar,
.surf-product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.surf-product__bar {
  min-height: 38px;
  border-bottom: 1px solid rgba(237 233 220 / 0.14);
  color: rgba(237 233 220 / 0.6);
  background: rgba(237 233 220 / 0.025);
}

.surf-product__bar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.surf-product__bar span > i {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--s-accent-2);
  box-shadow: 0 0 0 4px rgba(194 102 44 / 0.1);
}

.surf-product__bar b {
  color: #86C5A0;
  font-size: inherit;
  font-weight: 600;
}

.surf-product__foot {
  min-height: 36px;
  margin-top: auto;
  border-top: 1px solid rgba(237 233 220 / 0.12);
  color: rgba(237 233 220 / 0.42);
}

.surf-product__foot b {
  color: #E4A268;
  font-size: inherit;
  font-weight: 600;
  text-align: right;
}

/* Native infrastructure execution. */
.surf-product__content {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 14px;
}

.sp-command {
  padding: 11px 12px;
  border: 1px solid rgba(237 233 220 / 0.15);
  background: rgba(237 233 220 / 0.025);
}

.sp-command > span {
  display: block;
  margin-bottom: 7px;
  color: #7DB9FF;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sp-command code {
  color: rgba(237 233 220 / 0.82);
  font-family: var(--mono);
  font-size: 9.5px;
  white-space: nowrap;
}

.sp-command code i { color: var(--s-accent-2); font-style: normal; }

.sp-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) .7fr .6fr;
  align-content: center;
  padding: 8px 12px 0;
  color: rgba(237 233 220 / 0.36);
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sp-result > * {
  min-width: 0;
  padding: 7px 0;
  border-bottom: 1px solid rgba(237 233 220 / 0.08);
}

.sp-result b { color: rgba(237 233 220 / 0.72); font-weight: 500; }
.sp-result em { color: #86C5A0; font-style: normal; }

/* MCP connector registry. */
.sp-mcp-list {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 8px;
  padding: 14px;
}

.sp-mcp-list > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(237 233 220 / 0.13);
  background: rgba(237 233 220 / 0.025);
  transition: border-color .25s ease, background-color .25s ease;
}

.sp-mcp-list > div > i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(194 102 44 / 0.45);
  color: #E4A268;
  font-family: var(--mono);
  font-size: 7px;
  font-style: normal;
  font-weight: 600;
}

.sp-mcp-list span { min-width: 0; }
.sp-mcp-list span b,
.sp-mcp-list span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-mcp-list span b { color: rgba(237 233 220 / 0.82); font-size: 10px; font-weight: 500; }
.sp-mcp-list span small { margin-top: 2px; color: rgba(237 233 220 / 0.38); font-size: 8px; }
.sp-mcp-list em { color: #86C5A0; font-family: var(--mono); font-size: 7px; font-style: normal; text-transform: uppercase; }

.surf:hover .sp-mcp-list > div { border-color: rgba(194 102 44 / 0.3); }

/* Browser runtime: a live legacy interface with an agent cursor. */
.sp-browser {
  flex: 1;
  min-height: 0;
  margin: 13px;
  border: 1px solid rgba(237 233 220 / 0.18);
  background: rgba(237 233 220 / 0.025);
}

.sp-browser__chrome {
  height: 25px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(237 233 220 / 0.12);
}

.sp-browser__chrome > i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(237 233 220 / 0.32);
}

.sp-browser__chrome > span {
  flex: 1;
  margin-left: 4px;
  padding: 4px 7px;
  background: rgba(237 233 220 / 0.05);
  color: rgba(237 233 220 / 0.4);
  font-family: var(--mono);
  font-size: 6.5px;
}

.sp-browser__app { height: calc(100% - 25px); display: grid; grid-template-columns: 32px 1fr; }
.sp-browser__app aside { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; border-right: 1px solid rgba(237 233 220 / 0.1); }
.sp-browser__app aside i { height: 5px; background: rgba(237 233 220 / 0.12); }
.sp-browser__app main { position: relative; padding: 12px; overflow: hidden; }
.sp-browser__heading { display: block; width: 42%; height: 7px; margin-bottom: 13px; background: rgba(237 233 220 / 0.18); }
.sp-browser__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-browser__fields i { height: 26px; border: 1px solid rgba(237 233 220 / 0.16); background: rgba(237 233 220 / 0.025); }
.sp-browser__fields i:last-child { grid-column: 1 / -1; }
.sp-browser__button { position: absolute; right: 12px; bottom: 11px; width: 32%; height: 9px; background: rgba(194 102 44 / 0.65); }
.sp-browser__cursor { position: absolute; left: 46%; top: 43%; color: #E4A268; font-family: var(--mono); font-size: 15px; font-weight: 400; filter: drop-shadow(0 2px 3px rgba(0 0 0 / .45)); }

.surfaces--ambient .sp-browser__cursor,
.surf:hover .sp-browser__cursor { animation: sp-browser-work 6s ease-in-out infinite; }

.surfaces--ambient .sp-mcp-list > div,
.surf:hover .sp-mcp-list > div { animation: sp-mcp-ready 2.8s ease-in-out infinite; }
.surfaces--ambient .sp-mcp-list > div:nth-child(2),
.surf:hover .sp-mcp-list > div:nth-child(2) { animation-delay: .2s; }
.surfaces--ambient .sp-mcp-list > div:nth-child(3),
.surf:hover .sp-mcp-list > div:nth-child(3) { animation-delay: .4s; }
.surfaces--ambient .sp-mcp-list > div:nth-child(4),
.surf:hover .sp-mcp-list > div:nth-child(4) { animation-delay: .6s; }

@keyframes sp-browser-work {
  0%, 18% { transform: translate(0, 0); }
  34%, 48% { transform: translate(54px, -8px); }
  64%, 78% { transform: translate(64px, 42px); }
  92%, 100% { transform: translate(96px, 62px); }
}

@keyframes sp-mcp-ready {
  0%, 100% { background-color: rgba(237 233 220 / 0.025); }
  45% { background-color: rgba(194 102 44 / 0.075); }
}

/* One accented element per visual — the rest stays monochrome line work.
   The agent mark and pulses keep the brighter brand blue; on the pale-stone
   ground it reads as a confident graphical accent against dark line work. */
.surf__visual .accent { stroke: var(--s-accent); }
.surf__visual .accent-fill { fill: var(--s-accent-2); stroke: none; }

/* The bounding frame is the constant across the set; what varies lives
   inside it. It carries its own stroke, independent of the inner line
   work (which stays on currentColor). The frames never move. */
.surf__frame {
  fill: rgba(255 253 245 / 0.14);
  stroke: rgba(26 23 15 / 0.28);
}

.surf__chrome { stroke: rgba(26 23 15 / 0.2); }

.surf__agent-card,
.surf__system-box,
.surf__app,
.surf__gateway,
.surf__browser,
.surf__ui {
  fill: rgba(255 253 245 / 0.12);
  stroke: rgba(26 23 15 / 0.3);
}

.surf__gateway { fill: rgba(194 102 44 / 0.08); stroke: rgba(154 74 20 / 0.62); }
.surf__system-icon { stroke: rgba(26 23 15 / 0.58); }
.surf__browser-dot { fill: rgba(26 23 15 / 0.42); stroke: none; }

.surf__visual text {
  fill: rgba(26 23 15 / 0.55);
  stroke: none;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .04em;
  text-anchor: middle;
}

.surf__svg-kicker {
  font-size: 5.5px;
  letter-spacing: .13em !important;
  text-anchor: start !important;
}

.surf__svg-label { font-size: 4.2px; }
.surf__svg-gateway { fill: var(--s-accent) !important; font-size: 7px; }

.surf__system-box,
.surf__app,
.surf__gateway {
  transition: fill .25s ease, stroke .25s ease;
}

.surf:hover :is(.surf__system-box, .surf__app, .surf__gateway) {
  fill: rgba(194 102 44 / 0.08);
  stroke: rgba(154 74 20 / 0.56);
}

.surf__no {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--s-fg-3);
}

.surf__title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--s-fg);
}

.surf__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--s-fg-2);
  text-wrap: pretty;
}

/* Closing line — a summary statement, not a fourth block. Sits full width
   beneath the three columns. Marked by the hero's thin vertical rule (a
   muted 1px left marker), not the accent period, which belongs to the hero
   and the headline. Set apart in size from the block body so it reads as a
   summary rather than competing with the headline. */
.surfaces__close {
  max-width: 60ch;
  margin: clamp(36px, 4.4vw, 60px) 0 0;
  padding-left: 18px;
  border-left: 1px solid var(--s-line-2);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--s-fg-2);
  text-wrap: pretty;
}

/* Responsive: the three columns drop to one before the visuals crowd. */
@media (max-width: 980px) {
  .surfaces__grid {
    grid-template-columns: 1fr;
    gap: clamp(36px, 6vw, 56px);
  }
  .surf__visual { max-width: 520px; margin-bottom: 22px; }
}

@media (max-width: 760px) {
  .surfaces__intro {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .surfaces__deck { max-width: 58ch; margin-bottom: 0; }
}

@media (max-width: 560px) {
  .surfaces { padding-block: 56px 84px; }
  .surfaces__title { font-size: clamp(2.65rem, 12vw, 3.6rem); }
  .surf__visual { max-width: 100%; margin-bottom: 20px; }
}

/* Entrance: each visual draws itself in via SVG stroke-dashoffset — lines
   trace on rather than fading in as a block. The hidden state is opt-in via
   JS (the .surfaces--anim class and per-element .is-stroke marker), so the
   section renders fully without scripting or under reduced motion. Fires
   once; the observer unobserves after the first reveal. */

.surfaces--anim .surf:nth-child(1) .surf__visual { --draw-delay: 0ms; }
.surfaces--anim .surf:nth-child(2) .surf__visual { --draw-delay: 120ms; }
.surfaces--anim .surf:nth-child(3) .surf__visual { --draw-delay: 240ms; }

.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(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}

.surfaces--anim .surf__visual .is-stroke {
  stroke-dasharray: var(--stroke-len);
  stroke-dashoffset: var(--stroke-len);
  transition-property: stroke-dashoffset, stroke, fill;
  transition-duration: .7s, .2s, .2s;
  transition-timing-function: cubic-bezier(.2,.7,.2,1), ease-out, ease-out;
  transition-delay: var(--draw-delay, 0ms), 0s, 0s;
}

/* The filled endpoint dots have no stroke to trace — they fade in once the
   accent line they cap has finished drawing. */
.surfaces--anim .surf__visual .accent-fill {
  opacity: 0;
  transition: opacity .45s ease-out;
  transition-delay: calc(var(--draw-delay, 0ms) + .45s);
}

.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:hover .surf-product { transform: translateY(-4px); }

.surfaces--anim.is-revealed .surf__visual .is-stroke {
  stroke-dashoffset: 0;
}

.surfaces--anim.is-revealed .surf__visual .accent-fill {
  opacity: 1;
}

/* Stagger the three blocks left to right: 120ms between each. */
.surfaces--anim.is-revealed .surf:nth-child(2) .surf__no,
.surfaces--anim.is-revealed .surf:nth-child(2) .surf-product,
.surfaces--anim.is-revealed .surf:nth-child(2) .surf__title,
.surfaces--anim.is-revealed .surf:nth-child(2) .surf__text { transition-delay: .12s; }
.surfaces--anim.is-revealed .surf:nth-child(3) .surf__no,
.surfaces--anim.is-revealed .surf:nth-child(3) .surf-product,
.surfaces--anim.is-revealed .surf:nth-child(3) .surf__title,
.surfaces--anim.is-revealed .surf:nth-child(3) .surf__text { transition-delay: .24s; }
.surfaces--anim.is-revealed .surfaces__close { transition-delay: .36s; }

/* Reduced motion: render the static final state — no traced entrance, no
   ambient motion. The pulses stay hidden (opacity 0, no animation); the
   static composition (frame, mechanism, systems, agent mark) is fully
   visible without scripting. */
@media (prefers-reduced-motion: reduce) {
  .surfaces--anim .surfaces__intro > *,
  .surfaces--anim .surf-product,
  .surfaces--anim .surf__no,
  .surfaces--anim .surf__title,
  .surfaces--anim .surf__text,
  .surfaces--anim .surfaces__close,
  .surfaces--anim .surf__visual .is-stroke,
  .surfaces--anim .surf__visual .accent-fill {
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  .surf__visual .surf__pulse,
  .surf__visual .surf__agent--ui,
  .surf__visual .surf__field,
  .surf-product * {
    animation: none;
  }
  .surf__visual .surf__pulse { visibility: hidden; }
  .surf__traversal { opacity: 1; }
}

/* --- Ambient motion (rev5) ----------------------------------------------
   The mechanism operating. A consistent accent AGENT MARK is the constant
   across the three visuals; what varies is HOW it reaches the systems:
     01 native tools — a pulse departs the agent for each system, in turn,
        along short orthogonal connectors (out, then up or down, then in)
     02 MCP servers — a pulse rides the shared rail out to each of many
        SaaS endpoints, in turn (one connection, multiplexed to many)
     03 browser agents — the agent mark itself moves field to field inside
        the UI; each field highlights briefly as it lands. Hover reveals
        the full traversal path as a continuous accent line.
   The frames and the static mechanism structure never move; only the
   accent elements move (the pulses, the 03 agent mark). One shared 8s
   cycle so the three read as one system. Linear easing, no bounce. The
   loops are paused by default and run only while the section is in the
   viewport (.surfaces--ambient, toggled by the IntersectionObserver in
   script.js) and only after the entrance draw-in has completed. Each
   pulse fades out before resetting so no teleport is visible. */

.surf__pulse {
  fill: #C2662C;
  stroke: none;
  opacity: 0;
  visibility: hidden;
  transform-box: fill-box;
  offset-rotate: 0deg;
  animation: surf-pulse 8s linear infinite;
  animation-play-state: paused;
}

@keyframes surf-pulse {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  22%  { offset-distance: 100%; opacity: 1; }
  30%  { opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* 01 — native tools: one pulse per system, each departing the agent along a
   short orthogonal connector (out, up/down, in). No diagonals — the three
   read as separate connections, not a wedge. Fired in sequence. */
.surf__tool-pulse:nth-of-type(1) { offset-path: path('M48,55 H72 V35 H106'); animation-delay: 0s; }
.surf__tool-pulse:nth-of-type(2) { offset-path: path('M48,55 H106'); animation-delay: 2.67s; }
.surf__tool-pulse:nth-of-type(3) { offset-path: path('M48,55 H72 V85 H106'); animation-delay: 5.33s; }

/* 02 — MCP servers: one pulse per SaaS endpoint, each routed agent → rail →
   endpoint, fired in sequence (branch rotation). The shared vertical rail is
   the one protocol connection; the fan-out is the multiplexing to many. 12
   endpoints (vs 01's three) so density reads at a glance. A shorter per-pulse
   window keeps the ambient one-thing-at-a-time across the denser field. */
.surf__mcp-pulse { animation-name: surf-mcp-pulse; }

@keyframes surf-mcp-pulse {
  0%   { offset-distance: 0%;   opacity: 0; }
  2%   { opacity: 1; }
  6%   { offset-distance: 100%; opacity: 1; }
  8%   { opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

.surf__mcp-pulse:nth-of-type(1) { offset-path: path('M48,55 H95 H104 V29 H116'); animation-delay: 0s; }
.surf__mcp-pulse:nth-of-type(2) { offset-path: path('M48,55 H95 H104 V42 H116'); animation-delay: 1.33s; }
.surf__mcp-pulse:nth-of-type(3) { offset-path: path('M48,55 H116'); animation-delay: 2.66s; }
.surf__mcp-pulse:nth-of-type(4) { offset-path: path('M48,55 H95 H104 V68 H116'); animation-delay: 3.99s; }
.surf__mcp-pulse:nth-of-type(5) { offset-path: path('M48,55 H95 H104 V81 H116'); animation-delay: 5.32s; }
.surf__mcp-pulse:nth-of-type(6) { offset-path: path('M48,55 H95 H104 V94 H116'); animation-delay: 6.65s; }

/* 03 — browser agents: the frame itself is the UI (header band, sidebar
   column, four field rectangles). The agent mark sits INSIDE the frame and
   moves field to field; no external connector, no browser chrome, no cursor.
   Each field brightens briefly as the agent lands. The traversal path is
   hidden during ambient (one thing at a time) and revealed on hover as a
   continuous accent line — the whole route at once. The field and agent
   animations are scoped to .surfaces--ambient (not the paused pattern used by
   the pulses) so they do not override the entrance trace/fade of the fields
   and the agent mark before the ambient loop begins. */
.surf__field {
  fill: none;
  stroke: rgba(26 23 15 / 0.42);
}

@keyframes surf-field-hi {
  0%, 15%  { stroke: rgba(26 23 15 / 0.85); }
  22%      { stroke: rgba(26 23 15 / 0.42); }
  100%     { stroke: rgba(26 23 15 / 0.42); }
}

.surf__field--1 { animation-delay: 0s; }
.surf__field--2 { animation-delay: 1.76s; }
.surf__field--3 { animation-delay: 3.52s; }
.surf__field--4 { animation-delay: 5.28s; }

.surf__traversal {
  stroke: #C2662C;
  stroke-width: 1.25;
  fill: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.surf:hover .surf__traversal { opacity: 1; }

.surf__agent--ui {
  offset-path: path('M94,52 H128 V70 L109.5,88');
  offset-distance: 0%;
  offset-rotate: 0deg;
  transform-box: fill-box;
}

@keyframes surf-agent-ui {
  0%   { offset-distance: 0%;    opacity: 1; }
  15%  { offset-distance: 0%;    opacity: 1; }
  22%  { offset-distance: 40.9%; opacity: 1; }
  37%  { offset-distance: 40.9%; opacity: 1; }
  44%  { offset-distance: 66.5%; opacity: 1; }
  59%  { offset-distance: 66.5%; opacity: 1; }
  66%  { offset-distance: 100%;  opacity: 1; }
  82%  { offset-distance: 100%;  opacity: 1; }
  88%  { offset-distance: 100%;  opacity: 0; }
  92%  { offset-distance: 0%;    opacity: 0; }
  100% { offset-distance: 0%;    opacity: 1; }
}

/* Run the loops only while the section is in view and the entrance has
   completed. The JS toggles .surfaces--ambient on the section; entrance
   .is-revealed is separate and fires once. The pulses are visibility: hidden
   by default and only become visible here, so no circular mark is ever seen
   in the rest state, in reduced motion, or frozen mid-path when the section
   scrolls out of view. The 03 fields and agent use a scoped animation so
   their keyframes do not override the entrance trace/fade. */
.surfaces--ambient .surf__visual .surf__pulse { animation-play-state: running; visibility: visible; }
.surfaces--ambient .surf__visual .surf__field { animation: surf-field-hi 8s linear infinite; }
.surfaces--ambient .surf__visual .surf__agent--ui { animation: surf-agent-ui 8s linear infinite; }

/* --- Platform: the agent factory system map (vertical architecture) --------
   A vertically layered operating architecture reading top to bottom: teams
   and workflows, harness selection, persistent runtime, shared infrastructure,
   deployment environments. A control rail governs the system from the right.
   The map occupies ~62% of the width; the capability selector occupies ~38%
   as a vertical editorial list. Same warm cream as Access (no seam), warm
   rust accent, no blue, no em dashes, square corners throughout.
   ------------------------------------------------------------------------- */

.platform {
  --p-bg:       #E9E4D4;            /* exact Access cream, sampled */
  --p-fg:       #1A170F;            /* graphite ink (= --s-fg) */
  --p-fg-2:     rgba(26 23 15 / 0.72);
  --p-fg-3:     rgba(26 23 15 / 0.5);
  --p-ink:      rgba(26 23 15 / 0.42);
  --p-line:     rgba(26 23 15 / 0.16);
  --p-accent-2: #C2662C;                /* warm rust = Access --s-accent-2 */

  position: relative;
  z-index: 2;
  background: var(--p-bg);
  color: var(--p-fg);
  padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(56px, 8vw, 104px);
  scroll-margin-top: 100px;
}

.platform__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--hold);
  margin-inline: auto;
}

/* --- Introduction (matches the Access header layout) --------------------- */
.platform__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  align-items: last baseline;
  gap: 32px clamp(48px, 8vw, 120px);
  max-width: none;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.platform__head { min-width: 0; }

.platform__kicker {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--p-fg-3);
}

.platform__title {
  max-width: min(100%, 34ch);
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--p-fg);
  text-wrap: balance;
}

.platform__deck {
  max-width: 52ch;
  margin: 0;
  align-self: last baseline;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.65;
  color: var(--p-fg-2);
  text-wrap: pretty;
}

/* --- Composition: map + selector side by side ---------------------------- */
.platform__composition {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* --- Map (desktop): sticky, vertically centred in the viewport ------------ */
.platform__map {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  width: 100%;
}

.platform__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  fill: none;
  stroke: var(--p-ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  font-family: var(--mono);
}
.platform__svg .pf-accent-edge { stroke: var(--p-accent-2); }
.platform__svg .pf-fill { fill: rgba(26 23 15 / 0.05); }
.platform__svg .pf-accent-fill { fill: rgba(194 102 44 / 0.14); }
.platform__svg .pf-build {
  fill: none;
  stroke: var(--p-ink);
  stroke-width: 0.9;
  stroke-dasharray: 3 2.25;
  opacity: 0.78;
}
.platform__svg .pf-dot { fill: var(--p-ink); stroke: none; }
.platform__svg .pf-faint { opacity: 0.42; }
.platform__svg .pf-cap {
  fill: var(--p-fg-3);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-anchor: middle;
}

/* Active-only contextual labels: hidden in resting state, revealed on hover. */
.platform__svg .pf-active-only { opacity: 0; transition: opacity .25s ease; }
.platform__svg .pf-active-only .pf-cap { fill: var(--p-accent-2); }

/* Ambient spine signal: slow, muted, paused off-screen or when a zone is active. */
.platform__svg .pf-signal {
  fill: none;
  stroke: var(--p-ink);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  opacity: 0.4;
  animation: pf-march 6s linear infinite;
  animation-play-state: paused;
}
.platform--anim.platform--inview .platform__map .pf-signal { animation-play-state: running; }

@keyframes pf-march { to { stroke-dashoffset: -16; } }

/* --- Capability selector (vertical, unboxed, hairline-separated) ---------- */
.platform__caps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.platform__cap {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: clamp(28px, 8vh, 96px) 0 clamp(28px, 8vh, 96px) clamp(14px, 1.8vw, 20px);
  border: none;
  border-bottom: 1px solid var(--p-line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}
.platform__cap:first-child { border-top: 1px solid var(--p-line); }
.platform__cap:focus-visible {
  outline: 2px solid var(--p-accent-2);
  outline-offset: -2px;
}

/* Left-edge accent marker on the active item (not a box).
   Opacity-driven (not scale) so transitions are opacity/colour only.
   The marker is a pseudo-element of the cap, not of .platform__cap-body,
   so the inactive dimming on the body never affects it. */
.platform__cap::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(28px, 8vh, 96px);
  bottom: clamp(28px, 8vh, 96px);
  width: 2px;
  background: var(--p-accent-2);
  opacity: 0;
  transition: opacity .25s ease-out;
}
.platform__cap.is-active::before { opacity: 1; }

.platform__cap-mini { display: none; flex: none; width: 44px; }
.platform__cap-mini .platform__svg { stroke-width: 1.2; }

.platform__cap-body { min-width: 0; transition: opacity .25s ease-out; }

/* Inactive summaries: dimmed to ~50% (legible floor for scanning).
   Applied to the body only, never to the cap wrapper — the rust ::before
   marker stays at full strength on the active item. */
@media (min-width: 981px) {
  .platform__cap:not(.is-active) .platform__cap-body { opacity: 0.5; }
}

.platform__cap-spec {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--p-fg-3);
}

.platform__cap-title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--p-fg);
  text-wrap: balance;
}

.platform__cap-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--p-fg-2);
  text-wrap: pretty;
}

/* --- Active zone (scroll-driven via [data-active]) ----------------------- */
/* The selected layer stays full; other capability layers recede slightly.
   The shared substrate (foundation + connection spine) always stays full.
   Active zone connectors light rust and march; contextual labels appear. */
.platform__map .pf-zone { transition: opacity .25s ease-out; }

.platform[data-active="deploy"] .platform__map .pf-zone:not([data-zone="deploy"]):not([data-zone="foundation"]):not([data-zone="conn"]) { opacity: .28; }
.platform[data-active="runtime"] .platform__map .pf-zone:not([data-zone="runtime"]):not([data-zone="foundation"]):not([data-zone="conn"]) { opacity: .28; }
.platform[data-active="teams"] .platform__map .pf-zone:not([data-zone="teams"]):not([data-zone="foundation"]):not([data-zone="conn"]) { opacity: .28; }
.platform[data-active="harness"] .platform__map .pf-zone:not([data-zone="harness"]):not([data-zone="foundation"]):not([data-zone="conn"]) { opacity: .28; }
.platform[data-active="controls"] .platform__map .pf-zone:not([data-zone="controls"]):not([data-zone="foundation"]):not([data-zone="conn"]) { opacity: .28; }

/* Pause ambient spine while a zone is active (always, under scroll-driven). */
.platform[data-active] .platform__map .pf-signal { animation-play-state: paused; }

/* Active zone: connectors become rust and march. */
.platform[data-active="deploy"] .pf-zone[data-zone="deploy"] .pf-build,
.platform[data-active="runtime"] .pf-zone[data-zone="runtime"] .pf-build,
.platform[data-active="teams"] .pf-zone[data-zone="teams"] .pf-build,
.platform[data-active="harness"] .pf-zone[data-zone="harness"] .pf-build,
.platform[data-active="controls"] .pf-zone[data-zone="controls"] .pf-build {
  stroke: var(--p-accent-2);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 1;
  animation: pf-march 1.1s linear infinite;
}

/* Reveal contextual labels for the active zone. */
.platform[data-active="teams"] .pf-zone[data-zone="teams"] .pf-active-only,
.platform[data-active="runtime"] .pf-zone[data-zone="runtime"] .pf-active-only,
.platform[data-active="deploy"] .pf-zone[data-zone="deploy"] .pf-active-only,
.platform[data-active="controls"] .pf-zone[data-zone="controls"] .pf-active-only,
.platform[data-active="harness"] .pf-zone[data-zone="harness"] .pf-active-only,
.platform[data-active="foundation"] .pf-zone[data-zone="foundation"] .pf-active-only {
  opacity: 1;
}

/* --- Entrance (opt-in via .platform--anim + .is-revealed) ----------------- */
/* Map fades in opacity-only (no transform — transform on a sticky element
   can break sticky positioning in some browsers). Caps fade up. */
.platform--anim .platform__map {
  opacity: 0;
  transition: opacity .6s ease-out;
}
.platform--anim .platform__cap {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.platform--anim.is-revealed .platform__map { opacity: 1; }
.platform--anim.is-revealed .platform__cap {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--cap-i, 0) * 90ms + 120ms);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 760px) {
  .platform__intro {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .platform__deck { max-width: 58ch; }
}

@media (max-width: 980px) {
  /* Tablet: single column, no sticky, no scroll-driven dimming. */
  .platform__composition {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 44px);
  }
  .platform__map {
    position: static;
    height: auto;
    max-width: 640px;
    margin-inline: auto;
  }
  .platform__cap .platform__cap-body { opacity: 1; }
  .platform__caps {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .platform__cap {
    flex: 1 1 280px;
    border-bottom: 1px solid var(--p-line);
  }
  .platform__cap:first-child { border-top: 1px solid var(--p-line); }
}

@media (max-width: 720px) {
  /* Mobile: hide desktop map, stack capability summaries in a single column.
     No sticky, no dimming, no active state, no horizontal overflow. */
  .platform__map { display: none; }
  .platform__intro { margin-bottom: clamp(20px, 4vw, 28px); }
  .platform__composition { grid-template-columns: 1fr; gap: 0; }
  .platform__caps { flex-direction: column; }
  .platform__cap {
    flex: none;
    padding: clamp(20px, 4vw, 28px) 0 clamp(20px, 4vw, 28px) clamp(14px, 1.8vw, 20px);
  }
  .platform__cap .platform__cap-body { opacity: 1; }
  .platform__cap-mini { display: block; }
  /* Desktop and mobile share one DOM order: teams, harness, runtime, deploy, controls. */
}

@media (max-width: 560px) {
  .platform { padding-block: clamp(44px, 7vw, 64px); }
  .platform__cap-title { font-size: 1.2rem; }
  .platform__cap-text { font-size: 13.5px; }
}

/* --- Reduced motion: remove transitions, switch states instantly.
   Sticky positioning and the active state itself remain. ------------------ */
@media (prefers-reduced-motion: reduce) {
  .platform__svg .pf-signal { animation: none; }
  .platform__svg .pf-active-only { transition: none; }
  .platform__map .pf-zone { transition: none; }
  .platform__cap::before { transition: none; }
  .platform__cap .platform__cap-body { transition: none; }
  .platform[data-active] .pf-zone .pf-build { animation: none; }
  .platform--anim .platform__map,
  .platform--anim .platform__cap { opacity: 1 !important; transform: none !important; }
  .platform--anim .platform__cap { transition: none; }
}

/* --- Platform blueprint refresh -----------------------------------------
   A legible system overview replaces the dense isometric map. The visual
   reads in the same direction as the product: teams enter at the top, work
   passes through the shared factory, and runs land in either deployment.
   The control plane sits beside the runtime because it governs every run. */

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

.platform__intro {
  margin-bottom: clamp(36px, 5vw, 64px);
}

.platform__blueprint {
  margin: 0;
  border: 1px solid rgba(26 23 15 / 0.28);
  background:
    linear-gradient(rgba(26 23 15 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26 23 15 / 0.035) 1px, transparent 1px),
    rgba(255 253 245 / 0.22);
  background-size: 24px 24px;
  box-shadow: 0 28px 70px rgba(62 45 24 / 0.08);
}

.platform__blueprint-bar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(26 23 15 / 0.2);
  background: rgba(26 23 15 / 0.055);
  color: var(--p-fg-3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.platform__blueprint-bar span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: right;
}

.platform__blueprint-bar i {
  width: 6px;
  height: 6px;
  background: var(--p-accent-2);
  box-shadow: 0 0 0 4px rgba(194 102 44 / 0.12);
}

.blueprint {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(22px, 4vw, 54px);
}

.blueprint__zone {
  transition: opacity .25s ease, border-color .25s ease, background-color .25s ease;
}

.blueprint__label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 20px;
}

.blueprint__label > span,
.blueprint__runtime-copy > span,
.blueprint__controls-head > span {
  color: var(--p-accent-2);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.blueprint__label strong,
.blueprint__runtime-copy strong,
.blueprint__controls-head strong {
  color: var(--p-fg);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
}

.blueprint__teams,
.blueprint__deploy {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  border: 1px solid rgba(26 23 15 / 0.3);
  background: rgba(233 228 212 / 0.9);
}

.blueprint__teams .blueprint__label,
.blueprint__deploy .blueprint__label {
  border-right: 1px solid rgba(26 23 15 / 0.18);
}

.blueprint__team-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

.blueprint__team-grid > span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  border-left: 1px solid rgba(26 23 15 / 0.1);
  color: var(--p-fg-2);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.blueprint__team-grid > span:first-child { border-left: 0; }

.blueprint__team-grid i {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(26 23 15 / 0.2);
  background: rgba(255 255 255 / 0.2);
  color: var(--p-fg-3);
  font-family: var(--mono);
  font-size: 7px;
  font-style: normal;
  letter-spacing: 0.06em;
}

.blueprint__flow {
  position: relative;
  height: clamp(34px, 4vw, 48px);
}

.blueprint__flow > span {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 1px;
  background: rgba(26 23 15 / 0.26);
}

.blueprint__flow > span::before,
.blueprint__flow > span::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
}

.blueprint__flow > span::before {
  bottom: 0;
  width: 7px;
  height: 7px;
  border-right: 1px solid rgba(26 23 15 / 0.48);
  border-bottom: 1px solid rgba(26 23 15 / 0.48);
  rotate: 45deg;
}

.blueprint__flow > span::after {
  top: 1px;
  width: 5px;
  height: 5px;
  background: var(--p-accent-2);
  animation: blueprint-flow 2.8s ease-in-out infinite;
}

@keyframes blueprint-flow {
  0% { translate: -50% 0; opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { translate: -50% calc(clamp(34px, 4vw, 48px) - 6px); opacity: 0; }
}

.blueprint__factory {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.28fr);
  border: 1px solid rgba(26 23 15 / 0.42);
  background: rgba(233 228 212 / 0.94);
  box-shadow: 8px 8px 0 rgba(26 23 15 / 0.06);
}

.blueprint__factory-tag {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid rgba(26 23 15 / 0.34);
  background: var(--p-bg);
  color: var(--p-fg-2);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.blueprint__factory-tag i {
  width: 6px;
  height: 6px;
  background: var(--p-accent-2);
}

.blueprint__factory-main { min-width: 0; }

.blueprint__harness {
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid rgba(26 23 15 / 0.18);
}

.blueprint__harness .blueprint__label {
  border-right: 1px solid rgba(26 23 15 / 0.14);
}

.blueprint__harness-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  padding: 12px;
  gap: 8px;
}

.blueprint__harness-row > span {
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid rgba(26 23 15 / 0.19);
  background: rgba(255 255 255 / 0.18);
  color: var(--p-fg-2);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.blueprint__runtime {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1fr);
  min-height: 142px;
  background: #17140E;
  color: #E9E4D4;
}

.blueprint__runtime-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 24px 20px;
  border-right: 1px solid rgba(233 228 212 / 0.16);
}

.blueprint__runtime-copy strong {
  color: #F2EDE0;
  font-size: clamp(20px, 2vw, 28px);
}

.blueprint__runtime-copy small {
  max-width: 38ch;
  color: rgba(233 228 212 / 0.58);
  font-size: 11px;
  line-height: 1.5;
}

.blueprint__runtime-jobs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: 10px;
  padding: 20px;
}

.blueprint__runtime-jobs > span {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 72px;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid rgba(233 228 212 / 0.18);
  color: rgba(233 228 212 / 0.64);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.blueprint__runtime-jobs i {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(233 228 212 / 0.42);
  background: rgba(233 228 212 / 0.08);
}

.blueprint__runtime-jobs .is-live {
  border-color: rgba(194 102 44 / 0.76);
  color: #E4A268;
}

.blueprint__runtime-jobs .is-live i {
  border-color: var(--p-accent-2);
  background: var(--p-accent-2);
  box-shadow: 0 0 0 5px rgba(194 102 44 / 0.13);
  animation: blueprint-pulse 2s ease-in-out infinite;
}

@keyframes blueprint-pulse {
  50% { box-shadow: 0 0 0 8px rgba(194 102 44 / 0); }
}

.blueprint__foundation {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(26 23 15 / 0.2);
  background: rgba(26 23 15 / 0.05);
}

.blueprint__foundation > span {
  padding: 13px 10px;
  border-left: 1px solid rgba(26 23 15 / 0.12);
  color: var(--p-fg-2);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

.blueprint__foundation > span:first-child {
  border-left: 0;
  color: var(--p-fg-3);
  text-align: left;
}

.blueprint__controls {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(26 23 15 / 0.34);
  background: rgba(194 102 44 / 0.09);
}

.blueprint__controls-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 20px 18px;
}

.blueprint__controls ul {
  list-style: none;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0 20px 20px;
}

.blueprint__controls li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(26 23 15 / 0.12);
  color: var(--p-fg-2);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.blueprint__controls li:first-child { border-top: 1px solid rgba(26 23 15 / 0.12); }

.blueprint__controls li i {
  position: relative;
  width: 20px;
  height: 8px;
  flex: none;
  border: 1px solid rgba(26 23 15 / 0.26);
  background: rgba(255 255 255 / 0.22);
}

.blueprint__controls li i::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 4px;
  height: 4px;
  background: var(--p-accent-2);
}

.blueprint__deploy-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.blueprint__deploy-row > span {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(26 23 15 / 0.2);
  background: rgba(255 255 255 / 0.18);
}

.blueprint__deploy-row i {
  grid-row: 1 / 3;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(26 23 15 / 0.38);
  box-shadow: 4px -4px 0 -1px var(--p-bg), 4px -4px 0 rgba(26 23 15 / 0.24);
}

.blueprint__deploy-row b {
  color: var(--p-fg);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.blueprint__deploy-row small {
  color: var(--p-fg-3);
  font-size: 10px;
  line-height: 1.4;
}

/* The product thesis, expressed as a convergence rail rather than another
   paragraph: six previously separate infrastructure layers terminate in one
   operating plane. */
.platform__convergence {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.45fr) minmax(0, .7fr);
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(26 23 15 / 0.82);
  background:
    linear-gradient(rgba(237 233 220 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237 233 220 / 0.025) 1px, transparent 1px),
    #0D0F0E;
  background-size: 18px 18px;
  color: #EDE9DC;
  box-shadow: 8px 8px 0 rgba(26 23 15 / 0.08);
}

.platform__convergence-lead,
.platform__convergence-result {
  min-width: 0;
  padding: clamp(22px, 2.6vw, 34px);
}

.platform__convergence-lead {
  border-right: 1px solid rgba(237 233 220 / 0.13);
}

.platform__convergence-lead p,
.platform__convergence-result span {
  margin: 0 0 12px;
  color: rgba(237 233 220 / 0.48);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.platform__convergence-lead h3 {
  max-width: 18ch;
  margin: 0;
  color: #EDE9DC;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.15vw, 2.15rem);
  font-weight: 500;
  line-height: 1.05;
  text-wrap: balance;
}

.platform__convergence-lead h3 span { color: #E4A268; }

.platform__convergence-layers {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: stretch;
  margin: 0;
  padding: 0;
}

.platform__convergence-layers li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(237 233 220 / 0.1);
  color: rgba(237 233 220 / 0.76);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
  transition: color .2s ease, background-color .2s ease;
}

.platform__convergence-layers li:nth-child(odd) {
  border-right: 1px solid rgba(237 233 220 / 0.1);
}

.platform__convergence-layers li:nth-last-child(-n + 2) { border-bottom: 0; }

.platform__convergence-layers i {
  width: 7px;
  height: 7px;
  flex: none;
  border: 1px solid rgba(228 162 104 / 0.7);
  background: rgba(194 102 44 / 0.16);
  box-shadow: 0 0 0 4px rgba(194 102 44 / 0.06);
}

.platform__convergence-layers li:hover {
  color: #EDE9DC;
  background: rgba(194 102 44 / 0.08);
}

.platform__convergence-result {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(237 233 220 / 0.13);
}

.platform__convergence-result::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1px;
  width: 2px;
  height: 42px;
  background: #C2662C;
  transform: translateY(-50%);
}

.platform__convergence-result strong {
  color: #EDE9DC;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.45vw, 1.35rem);
  font-weight: 500;
  line-height: 1.18;
}

/* Capability cards double as a legend for the blueprint. */
.platform__composition {
  display: block;
  margin-top: clamp(36px, 5vw, 64px);
}

.platform__capabilities-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: end;
  gap: 28px clamp(48px, 8vw, 120px);
  margin-bottom: clamp(24px, 3vw, 36px);
}

.platform__capabilities-intro > div > p {
  margin: 0 0 12px;
  color: var(--p-accent-2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.platform__capabilities-intro h3 {
  max-width: 20ch;
  margin: 0;
  color: var(--p-fg);
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 600;
  line-height: 1.02;
  text-wrap: balance;
}

.platform__capabilities-intro > p {
  max-width: 48ch;
  margin: 0;
  color: var(--p-fg-2);
  font-size: 15px;
  line-height: 1.65;
  text-wrap: pretty;
}

.platform__caps {
  counter-reset: platform-cap;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}

.platform__caps > li {
  min-width: 0;
  counter-increment: platform-cap;
}

.platform__caps > li:nth-child(-n + 3) { grid-column: span 2; }
.platform__caps > li:nth-child(n + 4) { grid-column: span 3; }

.platform__cap {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--p-line);
  background: rgba(255 253 245 / 0.16);
  cursor: pointer;
  box-shadow: 0 0 0 rgba(62 45 24 / 0);
  transform: translateY(0);
  transition: border-color .2s ease, background-color .2s ease,
    box-shadow .28s ease, transform .28s cubic-bezier(.2, .75, .25, 1);
}

.platform__cap:first-child { border-top: 1px solid var(--p-line); }

.platform__cap:hover,
.platform__cap.is-active {
  border-color: rgba(194 102 44 / 0.62);
  background: rgba(194 102 44 / 0.055);
}

.platform__cap:hover,
.platform__cap:focus-visible {
  z-index: 1;
  box-shadow: 0 18px 38px rgba(62 45 24 / 0.11);
  transform: translateY(-5px);
}

.platform__cap::before {
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
}

.platform__cap::after {
  content: "0" counter(platform-cap);
  position: absolute;
  top: clamp(22px, 2.4vw, 32px);
  right: clamp(22px, 2.4vw, 32px);
  color: var(--p-fg-3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.platform__cap-mini {
  width: 82px;
  height: 82px;
  display: block;
  flex: none;
  padding: 10px;
  border: 1px solid rgba(26 23 15 / 0.14);
  background:
    linear-gradient(rgba(26 23 15 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26 23 15 / 0.04) 1px, transparent 1px),
    rgba(255 255 255 / 0.14);
  background-size: 12px 12px;
  background-position: 0 0;
  transform: translateY(0);
  transition: border-color .25s ease, background-position .5s ease,
    transform .35s cubic-bezier(.2, .75, .25, 1);
}

.platform__cap:hover .platform__cap-mini,
.platform__cap:focus-visible .platform__cap-mini {
  border-color: rgba(194 102 44 / 0.42);
  background-position: 6px 6px;
  transform: translateY(-3px);
}

.platform__cap-mini .platform__svg {
  width: 100%;
  height: 100%;
}

.platform__cap-mini :is(polygon, rect) {
  transform-box: fill-box;
  transform-origin: center;
}

.platform__cap:hover .platform__cap-mini .pf-build,
.platform__cap:focus-visible .platform__cap-mini .pf-build {
  stroke: var(--p-accent-2);
  animation: pf-march .7s linear infinite;
}

.platform__cap:hover .platform__cap-mini .pf-accent-fill,
.platform__cap:focus-visible .platform__cap-mini .pf-accent-fill {
  animation: platform-node-pulse 1.2s ease-in-out infinite;
}

/* Team and harness cubes rise one after another. */
.platform__caps > li:nth-child(1) .platform__cap:hover polygon:nth-of-type(-n + 3),
.platform__caps > li:nth-child(1) .platform__cap:focus-visible polygon:nth-of-type(-n + 3),
.platform__caps > li:nth-child(2) .platform__cap:hover polygon:nth-of-type(-n + 3),
.platform__caps > li:nth-child(2) .platform__cap:focus-visible polygon:nth-of-type(-n + 3) {
  animation: platform-node-rise 1.35s ease-in-out infinite;
}

.platform__caps > li:nth-child(1) .platform__cap:hover polygon:nth-of-type(n + 4):nth-of-type(-n + 6),
.platform__caps > li:nth-child(1) .platform__cap:focus-visible polygon:nth-of-type(n + 4):nth-of-type(-n + 6),
.platform__caps > li:nth-child(2) .platform__cap:hover polygon:nth-of-type(n + 4),
.platform__caps > li:nth-child(2) .platform__cap:focus-visible polygon:nth-of-type(n + 4) {
  animation: platform-node-rise 1.35s .14s ease-in-out infinite;
}

.platform__caps > li:nth-child(1) .platform__cap:hover polygon:nth-of-type(n + 7),
.platform__caps > li:nth-child(1) .platform__cap:focus-visible polygon:nth-of-type(n + 7) {
  animation: platform-node-rise 1.35s .28s ease-in-out infinite;
}

/* Deployment targets make the two environment choices visibly branch. */
.platform__caps > li:nth-child(5) .platform__cap:hover rect:first-of-type,
.platform__caps > li:nth-child(5) .platform__cap:focus-visible rect:first-of-type {
  transform: translateX(-2px);
}

.platform__caps > li:nth-child(5) .platform__cap:hover rect:nth-of-type(2),
.platform__caps > li:nth-child(5) .platform__cap:focus-visible rect:nth-of-type(2) {
  transform: translateX(2px);
}

.platform__caps > li:nth-child(5) .platform__cap-mini rect {
  transition: transform .35s cubic-bezier(.2, .75, .25, 1);
}

@keyframes platform-node-rise {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-2.5px); }
}

@keyframes platform-node-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .48; }
}

.platform__cap-body {
  display: block;
}

.platform__cap-spec { min-height: 0; }

.platform__cap-title {
  max-width: 20ch;
  min-height: 0;
  margin-bottom: 12px;
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
}

.platform__cap-text {
  max-width: 52ch;
  margin-top: 0;
}

/* The final two cards are wider enterprise concerns: controls and deploy. */
.platform__caps > li:nth-child(n + 4) .platform__cap {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: start;
}

.platform__caps > li:nth-child(n + 4) .platform__cap-title { max-width: none; }

@media (min-width: 981px) {
  .platform__cap:not(.is-active) .platform__cap-body { opacity: 1; }

  .platform[data-active] .blueprint__zone { opacity: .3; }
  .platform[data-active="teams"] .blueprint__zone[data-blueprint-zone="teams"],
  .platform[data-active="harness"] .blueprint__zone[data-blueprint-zone="harness"],
  .platform[data-active="runtime"] .blueprint__zone[data-blueprint-zone="runtime"],
  .platform[data-active="controls"] .blueprint__zone[data-blueprint-zone="controls"],
  .platform[data-active="deploy"] .blueprint__zone[data-blueprint-zone="deploy"] { opacity: 1; }

  .platform[data-active="teams"] .blueprint__zone[data-blueprint-zone="teams"],
  .platform[data-active="harness"] .blueprint__zone[data-blueprint-zone="harness"],
  .platform[data-active="controls"] .blueprint__zone[data-blueprint-zone="controls"],
  .platform[data-active="deploy"] .blueprint__zone[data-blueprint-zone="deploy"] {
    border-color: rgba(194 102 44 / 0.72);
    background-color: rgba(194 102 44 / 0.08);
  }

  /* Capability cards are an animated legend: each active card brings its
     matching architecture layer to life without moving the overall layout. */
  .platform[data-active] .blueprint__flow > span::after { animation-duration: 1.15s; }

  .platform[data-active="teams"] .blueprint__team-grid > span {
    animation: blueprint-team-online 1.8s ease-in-out infinite;
  }
  .platform[data-active="teams"] .blueprint__team-grid > span:nth-child(2) { animation-delay: .12s; }
  .platform[data-active="teams"] .blueprint__team-grid > span:nth-child(3) { animation-delay: .24s; }
  .platform[data-active="teams"] .blueprint__team-grid > span:nth-child(4) { animation-delay: .36s; }
  .platform[data-active="teams"] .blueprint__team-grid > span:nth-child(5) { animation-delay: .48s; }

  .platform[data-active="harness"] .blueprint__harness-row > span {
    animation: blueprint-harness-route 1.65s ease-in-out infinite;
  }
  .platform[data-active="harness"] .blueprint__harness-row > span:nth-child(2) { animation-delay: .2s; }
  .platform[data-active="harness"] .blueprint__harness-row > span:nth-child(3) { animation-delay: .4s; }

  .platform[data-active="runtime"] .blueprint__runtime-jobs > span {
    animation: blueprint-runtime-cycle 1.8s ease-in-out infinite;
  }
  .platform[data-active="runtime"] .blueprint__runtime-jobs > span:nth-child(2) { animation-delay: .18s; }
  .platform[data-active="runtime"] .blueprint__runtime-jobs > span:nth-child(3) { animation-delay: .36s; }

  .platform[data-active="controls"] .blueprint__controls li i::after {
    animation: blueprint-control-toggle 1.4s ease-in-out infinite;
  }
  .platform[data-active="controls"] .blueprint__controls li:nth-child(2) i::after { animation-delay: .14s; }
  .platform[data-active="controls"] .blueprint__controls li:nth-child(3) i::after { animation-delay: .28s; }
  .platform[data-active="controls"] .blueprint__controls li:nth-child(4) i::after { animation-delay: .42s; }

  .platform[data-active="deploy"] .blueprint__deploy-row > span {
    animation: blueprint-deploy-ready 1.7s ease-in-out infinite;
  }
  .platform[data-active="deploy"] .blueprint__deploy-row > span:nth-child(2) { animation-delay: .25s; }
}

@keyframes blueprint-team-online {
  0%, 100% { background-color: transparent; }
  42% { background-color: rgba(194 102 44 / 0.1); }
}

@keyframes blueprint-harness-route {
  0%, 100% { border-color: rgba(26 23 15 / 0.19); color: var(--p-fg-2); }
  42% { border-color: rgba(194 102 44 / 0.72); color: var(--p-accent-2); }
}

@keyframes blueprint-runtime-cycle {
  0%, 100% { border-color: rgba(233 228 212 / 0.18); background-color: transparent; }
  42% { border-color: rgba(194 102 44 / 0.78); background-color: rgba(194 102 44 / 0.08); }
}

@keyframes blueprint-control-toggle {
  0%, 100% { transform: translateX(0); }
  45%, 65% { transform: translateX(-10px); }
}

@keyframes blueprint-deploy-ready {
  0%, 100% { border-color: rgba(26 23 15 / 0.2); background-color: rgba(255 255 255 / 0.18); }
  42% { border-color: rgba(194 102 44 / 0.68); background-color: rgba(194 102 44 / 0.08); }
}

@media (max-width: 1240px) {
  .platform__caps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .platform__cap-spec,
  .platform__cap-title { min-height: 0; }
}

@media (max-width: 920px) {
  .blueprint__factory { grid-template-columns: 1fr; }
  .blueprint__controls {
    border-top: 1px solid rgba(26 23 15 / 0.25);
    border-left: 0;
  }
  .blueprint__controls-head { padding-bottom: 12px; }
  .blueprint__controls ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-top: 0;
  }
  .blueprint__controls li,
  .blueprint__controls li:first-child {
    padding: 10px;
    border-top: 1px solid rgba(26 23 15 / 0.12);
    border-bottom: 1px solid rgba(26 23 15 / 0.12);
  }
  .blueprint__controls li + li { border-left: 1px solid rgba(26 23 15 / 0.12); }
}

@media (max-width: 760px) {
  .platform__blueprint-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .platform__blueprint-bar span:last-child { text-align: left; }
  .blueprint { padding: 22px 14px; }
  .blueprint__teams,
  .blueprint__deploy { grid-template-columns: 1fr; }
  .blueprint__teams .blueprint__label,
  .blueprint__deploy .blueprint__label {
    border-right: 0;
    border-bottom: 1px solid rgba(26 23 15 / 0.18);
  }
  .blueprint__team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blueprint__team-grid > span {
    justify-content: flex-start;
    border-top: 1px solid rgba(26 23 15 / 0.1);
  }
  .blueprint__team-grid > span:nth-child(odd) { border-left: 0; }
  .blueprint__team-grid > span:last-child { grid-column: 1 / -1; }
  .blueprint__harness,
  .blueprint__runtime { grid-template-columns: 1fr; }
  .blueprint__harness .blueprint__label,
  .blueprint__runtime-copy {
    border-right: 0;
    border-bottom: 1px solid rgba(26 23 15 / 0.14);
  }
  .blueprint__foundation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blueprint__foundation > span {
    border-top: 1px solid rgba(26 23 15 / 0.12);
  }
  .blueprint__foundation > span:nth-child(odd) { border-left: 0; }
  .blueprint__foundation-title { grid-column: 1 / -1; }
  .blueprint__controls ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blueprint__controls li:nth-child(odd) { border-left: 0; }
  .blueprint__deploy-row { grid-template-columns: 1fr; }
  .platform__convergence {
    grid-template-columns: 1fr;
    margin-top: 14px;
  }
  .platform__convergence-lead,
  .platform__convergence-result { padding: 22px; }
  .platform__convergence-lead {
    border-right: 0;
    border-bottom: 1px solid rgba(237 233 220 / 0.13);
  }
  .platform__convergence-result {
    border-top: 1px solid rgba(237 233 220 / 0.13);
    border-left: 0;
  }
  .platform__convergence-result::before {
    top: -1px;
    left: 22px;
    width: 42px;
    height: 2px;
    transform: none;
  }
  .platform__capabilities-intro { grid-template-columns: 1fr; gap: 14px; }
  .platform__caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform__caps > li:nth-child(n) { grid-column: auto; }
  .platform__cap {
    flex: 1;
    padding: 20px;
  }
  .platform__caps > li:nth-child(n + 4) .platform__cap {
    display: flex;
  }
  .platform__cap-mini { width: 64px; height: 64px; }
}

@media (max-width: 520px) {
  .blueprint__harness-row,
  .blueprint__runtime-jobs { grid-template-columns: 1fr; }
  .blueprint__runtime-jobs > span {
    min-height: 0;
    flex-direction: row;
    align-items: center;
  }
  .platform__caps { grid-template-columns: 1fr; }
  .platform__caps > li:nth-child(n) { grid-column: 1; }
  .platform__cap {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 0;
  }
  .platform__cap-body { display: block; }
  .platform__cap-spec { padding-right: 22px; }
  .platform__cap-text { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .blueprint__flow > span::after,
  .blueprint__runtime-jobs .is-live i { animation: none; }
  .blueprint__zone,
  .platform__cap { transition: none; }
  .platform__cap:hover,
  .platform__cap:focus-visible,
  .platform__cap:hover .platform__cap-mini,
  .platform__cap:focus-visible .platform__cap-mini { transform: none; }
  .platform__cap:hover .platform__cap-mini *,
  .platform__cap:focus-visible .platform__cap-mini * { animation: none; }
  .platform[data-active] .blueprint * { animation: none !important; }
}



/* --- Footer (dark close) -------------------------------------------------- */
/* Joins the dark gov section with no seam: same #05080B plate and the same
   hairline. No accent here; the close stays neutral. Square corners only.   */
.footer {
  background: #05080B;
  color: var(--fg);
  border-top: 1px solid rgba(235 240 246 / 0.14);
}

.footer__inner {
  width: 100%;
  max-width: none;
  padding: clamp(56px, 8vw, 96px) var(--gutter) clamp(32px, 4vw, 48px);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgba(235 240 246 / 0.14);
}

.footer__brand {
  max-width: 30ch;
}

.footer .wordmark {
  color: var(--fg);
}

.footer__tagline {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-3);
}

.footer__cols {
  display: flex;
  gap: clamp(40px, 5vw, 88px);
}

.footer__col {
  min-width: 0;
}

.footer__heading {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.footer__links a {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  color: rgba(232 235 228 / 0.7);
  text-decoration: none;
  transition: color .18s ease;
}

.footer__links a:hover {
  color: var(--fg);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  padding-top: clamp(28px, 3vw, 40px);
}

.footer__legal {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

@media (max-width: 560px) {
  .footer__top {
    flex-direction: column;
    align-items: stretch;
  }
  .footer__cols {
    flex-direction: column;
    gap: 32px;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* --- Blog: dispatches from the agent factory ----------------------------- */

.blog-page {
  grid-template-rows: auto 1fr auto;
}

.blog-index,
.article-main {
  width: 100%;
  max-width: none;
  padding-inline: var(--gutter);
}

.blog-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.75fr);
  align-items: center;
  gap: clamp(48px, 8vw, 128px);
  min-height: clamp(500px, 67svh, 720px);
  padding-block: clamp(72px, 10vw, 132px);
  border-bottom: 1px solid var(--line);
}

.blog-hero__copy {
  max-width: 800px;
}

.blog-hero .eyebrow {
  margin-bottom: 24px;
  color: var(--accent-text);
}

.blog-hero .eyebrow::before {
  background: var(--accent);
}

.blog-hero__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.5rem, 6.5vw, 6.8rem);
  font-weight: 650;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.blog-hero__title span,
.blog-card h2 span,
.article-header h1 > span {
  color: var(--accent);
}

.blog-hero__lede {
  max-width: 55ch;
  margin: 30px 0 0;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.65;
  color: var(--fg-2);
  text-wrap: pretty;
}

.blog-signal {
  position: relative;
  border: 1px solid var(--line-2);
  background:
    linear-gradient(rgba(104 173 255 / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104 173 255 / 0.055) 1px, transparent 1px),
    #080C11;
  background-size: 24px 24px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.blog-signal::after {
  content: "";
  position: absolute;
  top: 0;
  right: 17px;
  width: 1px;
  height: 25px;
  background: var(--line-2);
  transform: rotate(-45deg);
  transform-origin: top;
}

.blog-signal__rail {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.blog-signal__rail:last-child {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.blog-signal__core {
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: 54px;
}

.blog-signal__core svg {
  width: min(180px, 58%);
  filter: drop-shadow(0 0 28px rgba(104 173 255 / 0.18));
}

.blog-signal__core svg path {
  fill: #68ADFF;
}

.blog-signal__core svg rect {
  fill: #080C11;
}

.blog-signal__core > span {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.blog-signal__core > span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: #68ADFF;
  box-shadow: 0 0 10px rgba(104 173 255 / 0.8);
}

.blog-feed {
  padding-block: clamp(72px, 9vw, 128px) clamp(96px, 12vw, 168px);
}

.blog-feed__head {
  display: grid;
  grid-template-columns: minmax(150px, 0.5fr) minmax(0, 1.5fr) auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.blog-feed__head p,
.blog-feed__head > span {
  margin: 0 0 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.blog-feed__head > span {
  color: var(--fg-3);
}

.blog-feed__head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.1vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.blog-card {
  display: grid;
  grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1.5fr) minmax(180px, 0.45fr);
  min-height: 390px;
  border: 1px solid var(--line);
  background: rgba(10 13 17 / 0.9);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.blog-card:hover {
  transform: translateY(-2px);
  border-color: rgba(104 173 255 / 0.62);
  background: #0C1118;
}

.blog-card__number {
  padding: 25px;
  border-right: 1px solid var(--line);
  font-family: var(--mono);
  font-size: clamp(2rem, 4.5vw, 4.6rem);
  font-weight: 500;
  line-height: 1;
  color: rgba(104 173 255 / 0.2);
  writing-mode: vertical-rl;
}

.blog-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(30px, 5vw, 66px);
}

.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.blog-card__meta span:first-child {
  color: var(--accent-text);
}

.blog-card h2 {
  margin: 42px 0 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 5.3rem);
  font-weight: 650;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.blog-card__summary {
  max-width: 62ch;
  margin: 24px 0 38px;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.65;
  text-wrap: pretty;
}

.blog-card__link {
  margin-top: auto;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
}

.blog-card__stamp {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  padding: 28px;
  border-left: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.blog-card__stamp i {
  align-self: stretch;
  width: 1px;
  margin-block: 18px;
  background: linear-gradient(transparent, var(--accent), transparent);
}

.blog-card__stamp span:last-child {
  color: var(--accent-text);
}

/* Blog article */

.article-main {
  padding-block: clamp(58px, 8vw, 110px) clamp(100px, 13vw, 180px);
}

.article {
  max-width: 1120px;
  margin-inline: auto;
}

.article-header {
  max-width: 960px;
}

.article-header__back {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin-bottom: clamp(62px, 8vw, 104px);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  transition: color .18s ease;
}

.article-header__back:hover {
  color: var(--accent-text);
}

.article-header__eyebrow {
  margin: 0 0 24px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.article-header__eyebrow span {
  margin-inline: 10px;
  color: var(--fg-3);
}

.article-header h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 9vw, 9rem);
  font-weight: 650;
  line-height: 0.84;
  letter-spacing: -0.055em;
}

.article-header__deck {
  max-width: 52ch;
  margin: 38px 0 0;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

.article-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 46px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.article-header__meta span:first-child {
  color: var(--fg-2);
}

.article-plate {
  margin-block: clamp(68px, 9vw, 112px) clamp(78px, 10vw, 126px);
  border: 1px solid var(--line-2);
  background:
    linear-gradient(rgba(104 173 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104 173 255 / 0.05) 1px, transparent 1px),
    #080C11;
  background-size: 32px 32px;
}

.article-plate__top,
.article-plate__bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.article-plate__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 7vw, 92px);
  min-height: clamp(340px, 46vw, 540px);
  padding: 54px;
}

.article-plate__mark svg {
  width: clamp(130px, 19vw, 220px);
  filter: drop-shadow(0 0 34px rgba(104 173 255 / 0.16));
}

.article-plate__hex {
  fill: #68ADFF;
}

.article-plate__cut {
  fill: #080C11;
}

.article-plate__mark p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 4.6rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.article-plate__bottom {
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  color: var(--accent-text);
}

.article-plate__bottom i {
  width: clamp(36px, 7vw, 90px);
  height: 1px;
  background: var(--line-2);
}

.article-prose {
  max-width: 730px;
  margin-inline: auto;
  font-size: clamp(1.02rem, 1.25vw, 1.12rem);
  line-height: 1.82;
  color: rgba(235 239 244 / 0.76);
}

.article-prose p {
  margin: 0 0 1.55em;
}

.article-prose__lead {
  margin-bottom: 1.7em !important;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.6;
  color: var(--fg);
}

.article-prose h2 {
  margin: 2.4em 0 0.75em;
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 3.15rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--fg);
  text-wrap: balance;
}

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

.article-prose blockquote {
  margin: clamp(54px, 8vw, 82px) 0;
  padding: 30px 0 30px clamp(24px, 4vw, 42px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}

.article-prose blockquote p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--fg);
}

.article-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: clamp(70px, 10vw, 110px);
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid var(--line-2);
  background: #0A0D11;
}

.article-cta p {
  max-width: 27ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--fg);
}

.article-cta .btn {
  flex: none;
  min-height: 45px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-solid);
}

@media (max-width: 900px) {
  .blog-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .blog-signal {
    width: min(560px, 100%);
  }

  .blog-card {
    grid-template-columns: minmax(90px, 0.22fr) minmax(0, 1fr);
  }

  .blog-card__stamp {
    display: none;
  }
}

@media (max-width: 680px) {
  .blog-hero {
    gap: 46px;
    padding-block: 58px 72px;
  }

  .blog-hero__title {
    font-size: clamp(3rem, 14vw, 4.7rem);
  }

  .blog-signal__core {
    min-height: 280px;
    padding: 40px;
  }

  .blog-feed__head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .blog-feed__head p {
    grid-column: 1 / -1;
  }

  .blog-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .blog-card__number {
    padding: 18px 22px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.5rem;
    writing-mode: horizontal-tb;
  }

  .blog-card__content {
    padding: 28px 24px 34px;
  }

  .blog-card h2 {
    margin-top: 32px;
  }

  .article-header h1 {
    font-size: clamp(3.5rem, 18vw, 6rem);
  }

  .article-header__back {
    margin-bottom: 54px;
  }

  .article-plate__mark {
    flex-direction: column;
    align-items: flex-start;
    min-height: 430px;
    padding: 42px;
  }

  .article-plate__top span:last-child {
    display: none;
  }

  .article-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 380px) {
  .blog-page .nav {
    gap: 12px;
    font-size: 10px;
  }

  .blog-signal__rail span:last-child {
    display: none;
  }

  .article-plate__mark {
    padding: 30px;
  }
}

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

.demo-page {
  grid-template-rows: auto 1fr auto;
}

.demo-main {
  width: 100%;
  max-width: none;
  padding-inline: var(--gutter);
}

.demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.72fr);
  align-items: center;
  gap: clamp(60px, 10vw, 160px);
  min-height: calc(100svh - 72px);
  padding-block: clamp(64px, 8vw, 112px);
}

.demo-intro {
  max-width: 760px;
}

.demo-intro .eyebrow {
  margin-bottom: 24px;
  color: var(--accent-text);
}

.demo-intro .eyebrow::before {
  background: var(--accent);
}

.demo-intro h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.8rem, 6.8vw, 7rem);
  font-weight: 650;
  line-height: 0.91;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

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

.demo-intro__lede {
  max-width: 54ch;
  margin: 30px 0 0;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.65;
  color: var(--fg-2);
  text-wrap: pretty;
}

.demo-notes {
  max-width: 590px;
  margin: clamp(52px, 7vw, 86px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.demo-notes li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.demo-notes li > span {
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}

.demo-notes strong {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}

.demo-notes p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-3);
}

.demo-panel {
  position: relative;
  border: 1px solid var(--line-2);
  background:
    linear-gradient(rgba(104 173 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104 173 255 / 0.035) 1px, transparent 1px),
    #080C11;
  background-size: 28px 28px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.demo-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 17px;
  width: 1px;
  height: 25px;
  background: var(--line-2);
  transform: rotate(-45deg);
  transform-origin: top;
}

.demo-panel__rail {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.demo-panel__rail span:first-child {
  color: var(--accent-text);
}

.demo-form {
  padding: clamp(28px, 4vw, 48px);
}

.demo-form__heading {
  margin-bottom: 34px;
}

.demo-form__heading p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.demo-form__heading span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
}

.demo-field + .demo-field {
  margin-top: 20px;
}

.demo-field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.demo-field input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  outline: 0;
  background: rgba(5 8 11 / 0.9);
  color: var(--fg);
  font: 500 15px/1.4 var(--sans);
  appearance: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.demo-field input::placeholder {
  color: var(--fg-3);
  opacity: 1;
}

.demo-field input:hover {
  border-color: rgba(235 240 246 / 0.45);
}

.demo-field input:focus {
  border-color: var(--accent);
  background: #0C1118;
  box-shadow: 0 0 0 3px rgba(104 173 255 / 0.12);
}

.demo-field input:user-invalid {
  border-color: #D46B6B;
}

.demo-form__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 56px;
  margin-top: 30px;
  padding: 14px 18px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: #05080B;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.demo-form__submit:hover {
  border-color: #9AC8FF;
  background: #9AC8FF;
}

.demo-form__status {
  min-height: 18px;
  margin: 9px 0 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--accent-text);
}

.demo-form__privacy {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 8.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}

@media (max-width: 980px) {
  .demo-layout {
    grid-template-columns: 1fr;
    gap: 64px;
    min-height: 0;
  }

  .demo-intro,
  .demo-panel {
    width: min(680px, 100%);
  }
}

@media (max-width: 680px) {
  .demo-layout {
    gap: 52px;
    padding-block: 54px 76px;
  }

  .demo-intro h1 {
    font-size: clamp(3.2rem, 15vw, 5rem);
  }

  .demo-notes {
    margin-top: 46px;
  }

  .demo-form {
    padding: 28px 20px 26px;
  }
}

@media (max-width: 380px) {
  .demo-page .nav {
    gap: 12px;
    font-size: 10px;
  }

  .demo-panel__rail span:last-child {
    display: none;
  }
}