@font-face {
  font-family: "Bebas Neue";
  src: url("assets/fonts/bebas-neue-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("assets/fonts/barlow-semi-condensed-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("assets/fonts/barlow-semi-condensed-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("assets/fonts/barlow-semi-condensed-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Squada One";
  src: url("assets/fonts/squada-one-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Unbounded";
  src: url("assets/fonts/unbounded-latin-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: block;
}

@scope (.ws-landing) {
:scope {
  color-scheme: dark;

  /* ── Mono Noir ladder — mirrors apps/web/app/styles/tokens.css ───────── */
  --mn-deep: #050506;
  --mn-base: #070809;
  --mn-ink: #0a0b0c;
  --mn-panel: #101214;
  --mn-elevated: #16181c;
  --mn-text-hi: #f4f4f5;
  --mn-text: rgba(255, 255, 255, 0.9);
  --mn-text-dim: rgba(255, 255, 255, 0.55);
  --mn-text-faint: rgba(255, 255, 255, 0.35);
  --mn-text-mute: #a1a1aa;
  --mn-silver: #d4d4d8;
  --mn-hairline: rgba(255, 255, 255, 0.09);
  --mn-hairline-soft: rgba(255, 255, 255, 0.06);
  --mn-hairline-strong: rgba(255, 255, 255, 0.15);
  --mn-accent: #fff;
  --mn-proven: #fff;
  --mn-failed: #7a7a7a;
  --mn-danger: #f87171;
  /* Human approval only — never a brand accent. */
  --mn-approval: #f2b84b;
  --bone: #f4f0e6;
  --void: #050506;

  /* ── Type — one display, one body, one mono stack across the product ─── */
  --font-display: "Squada One", Unbounded, ui-sans-serif, sans-serif;
  --font-sans: "Barlow Semi Condensed", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── Landing names → Mono Noir ───────────────────────────────────────── */
  --bg: var(--mn-deep);
  --bg-deep: #000;
  --surface: var(--mn-ink);
  --surface-raised: var(--mn-panel);
  --surface-soft: rgba(14, 14, 14, 0.78);
  --text: var(--mn-text-hi);
  --muted: var(--mn-text-mute);
  --muted-strong: var(--mn-silver);
  --line: var(--mn-hairline-strong);
  --line-soft: var(--mn-hairline-soft);
  --accent: var(--mn-accent);
  --grey: var(--mn-failed);
  --success: var(--mn-proven);
  --danger: var(--mn-danger);
  --paper: var(--mn-text-hi);
  --ink: var(--void);
  --shell: calc(100vw - 36px);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --shadow-large: 0 52px 130px rgba(0, 0, 0, 0.72);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}













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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  scrollbar-color: rgba(121, 121, 121, 0.65) var(--bg-deep);
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size-adjust: from-font;
  /* Barlow Semi Condensed sets narrower and smaller on the body than a normal-
     width grotesk, so the base size and leading go up to keep the same colour. */
  font-size: 17.5px;
  line-height: 1.58;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(121, 121, 121, 0.45);
  color: #fff;
}

button,
a,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

button {
  color: inherit;
}

svg {
  display: block;
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
.hero__title {
  /* Squada One ships one weight. Without this, any heavier weight below would
     render as a synthesised bold. */
  font-family: "Squada One", Unbounded, ui-sans-serif, sans-serif;
  font-weight: 400;
  font-synthesis-weight: none;
  font-size-adjust: cap-height from-font;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 1000;
  transform: translateY(-180%);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: clamp(130px, 15vw, 220px);
}

.page-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 48% -8%, rgba(69, 69, 69, 0.2), transparent 35%),
    linear-gradient(180deg, var(--mn-ink) 0%, var(--mn-base) 52%, var(--mn-ink) 100%);
}

.page-atmosphere__glow-a,
.page-atmosphere__glow-b {
  position: absolute;
  width: 52vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.15;
}

.page-atmosphere__glow-a {
  top: 5vh;
  left: -22vw;
  background: var(--accent);
}

.page-atmosphere__glow-b {
  right: -26vw;
  top: 58vh;
  background: #979797;
  opacity: 0.08;
}

.page-atmosphere__grid {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 72%);
}

.cursor-light {
  display: none !important;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(235, 235, 235, 0.62);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  box-shadow: 0 0 12px rgba(201, 201, 201, 0.5);
}

.section-heading {
  max-width: 1100px;
  margin-bottom: clamp(64px, 8.5vw, 104px);
}

.section-heading h2,
.shipgate-copy h2,
.manifesto-title {
  margin-top: 24px;
  max-width: 900px;
  font-size: clamp(52px, 7.2vw, 104px);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 0.96;
}

.section-heading > p:last-child,
.section-heading--split > p,
.shipgate-copy > p:not(.eyebrow) {
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
}

.section-heading:not(.section-heading--split) > p:last-child {
  max-width: 650px;
  margin-top: 32px;
}

.section-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.58fr);
  align-items: end;
  gap: 80px;
  max-width: none;
}

.section-heading--split > p {
  padding-bottom: 5px;
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading--center .eyebrow {
  justify-content: center;
}

/* The h2 caps at 900px inside a 1100px heading block, so its box needs
   centring too — text-align alone leaves it 100px off-centre. */
.section-heading--center h2 {
  margin-inline: auto;
}

.section-heading--center > p:last-child {
  margin-inline: auto;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 23px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition:
    transform 240ms var(--ease),
    border-color 240ms ease,
    background 240ms ease,
    color 240ms ease,
    box-shadow 240ms ease;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  translate: -105% 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transition: translate 600ms var(--ease);
}

.button:hover {
  transform: translateY(-2px);
}

.button:hover::before {
  translate: 105% 0;
}

.button--primary {
  background: linear-gradient(135deg, #8c8c8c 0%, #626262 64%, #525252 100%);
  color: #fff;
  box-shadow: 0 13px 35px rgba(82, 82, 82, 0.26), inset 0 1px rgba(255, 255, 255, 0.35);
}

.button--primary:hover {
  box-shadow: 0 18px 46px rgba(82, 82, 82, 0.38), inset 0 1px rgba(255, 255, 255, 0.42);
}

.button--ghost {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
}

.button--ghost:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.055);
}

.button--small {
  min-height: 41px;
  padding-inline: 16px;
  font-size: 9px;
}

.button__arrow,
.button > span:last-child {
  font-size: 14px;
  transition: transform 300ms var(--ease);
}

.button:hover .button__arrow,
.button:hover > span:last-child {
  transform: translate(2px, -2px);
}

.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 38px;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: border-color 200ms ease;
}

.inline-link:hover {
  border-color: var(--accent);
}

.inline-link span {
  color: var(--accent);
}

:scope.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms var(--ease),
    transform 900ms var(--ease);
}

:scope.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  font-family: "Squada One", Unbounded, ui-sans-serif, sans-serif;
  transition:
    background 260ms ease,
    border-color 260ms ease,
    backdrop-filter 260ms ease;
}

.site-header .button {
  font-family: inherit;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line-soft);
  background: rgba(8, 8, 8, 0.76);
  backdrop-filter: blur(22px) saturate(130%);
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  min-height: 72px;
  align-items: center;
  gap: 38px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
}

.brand__mark {
  width: 29px;
  height: 29px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  filter: drop-shadow(0 0 12px rgba(121, 121, 121, 0.38));
}

.brand__mark path:first-child {
  stroke: var(--accent);
}

.brand__mark path:nth-child(2) {
  stroke: var(--accent);
}

.brand__word {
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.035em;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2.3vw, 38px);
}

.site-nav a,
.text-action {
  color: rgba(242, 242, 242, 0.58);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color 180ms ease, border-color 180ms ease;
}

.site-nav a:hover,
.text-action:hover,
.site-nav a.is-active {
  color: #fff;
}

.site-nav a.is-active {
  border-bottom: 2px solid #fff;
}

.mobile-nav-actions {
  display: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  padding: 0;
}

.menu-toggle span {
  position: absolute;
  width: 17px;
  height: 1px;
  background: #fff;
  transition: transform 220ms ease;
}

.menu-toggle span:first-child {
  transform: translateY(-4px);
}

.menu-toggle span:last-child {
  transform: translateY(4px);
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: rotate(-45deg);
}

/* Hero */

.hero {
  display: flex;
  min-height: 100svh;
  align-items: center;
  /* clip, not hidden: hidden makes the hero a scroll container, which would
     hijack the view() timeline used for the scroll-driven drift below. */
  overflow: clip;
  padding-top: 112px;
  padding-bottom: 72px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 45%, rgba(91, 91, 91, 0.13), transparent 30%),
    radial-gradient(circle at 65% 35%, rgba(102, 102, 102, 0.15), transparent 33%);
}

.hero__shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(440px, 0.88fr) minmax(520px, 1.12fr);
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
}

.hero__copy {
  position: relative;
  z-index: 4;
  isolation: isolate;
  padding-block: 25px;
}

.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(210, 210, 210, 0.19);
  border-radius: 999px;
  background: rgba(210, 210, 210, 0.035);
  padding: 7px 10px;
  color: rgba(242, 242, 242, 0.66);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.live-chip i,
.site-footer__status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
  animation: status-pulse 2.2s ease-in-out infinite;
}

.hero__title {
  margin-top: clamp(24px, 4vh, 44px);
  font-size: clamp(64px, 7.4vw, 116px);
  font-weight: 400;
  letter-spacing: -0.008em;
  line-height: 0.9;
}

.hero__title > span {
  display: block;
}

.gradient-text {
  color: inherit;
}

.hero__description {
  max-width: 605px;
  margin-top: 31px;
  color: #afafaf;
  font-size: clamp(16px, 1.34vw, 19px);
  line-height: 1.68;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 35px;
}

.hero__actions--centered {
  justify-content: center;
  margin-top: 8px;
}

/* Hero prompt — the landing's one real input. Submits `idea` to the Studio. */
.hero__prompt {
  max-width: 640px;
  margin-top: 34px;
}

.hero__prompt-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: rgba(230, 230, 230, 0.55);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__prompt-label span {
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

.hero__prompt-field {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(6, 6, 6, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 30px 80px -40px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(16px);
  transition: border-color 240ms ease, box-shadow 240ms ease;
}

.hero__prompt-field:focus-within {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 4px rgba(255, 255, 255, 0.05),
    0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

.hero__prompt-input {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  max-height: 220px;
  margin: 0;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  resize: none;
  outline: none;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hero__prompt-input::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.hero__prompt-input::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.hero__prompt-submit {
  flex-shrink: 0;
  min-height: 46px;
  padding-inline: 18px;
}

.hero__prompt-field:has(.hero__prompt-input:placeholder-shown) .hero__prompt-submit {
  opacity: 0.55;
}

.hero__prompt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 10px;
  padding-inline: 4px;
  color: rgba(230, 230, 230, 0.4);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}



/* Hero: one action. Let's build opens the onboarding, which asks what kind of
   software and then for the owner's own description. */
.hero__build-stage {
  width: min(960px, 100%);
  margin: 0.25rem auto 0;
  min-height: 4.5rem;
}

.hero__start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.hero__lets-build {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-width: min(320px, 100%);
  min-height: 3.75rem;
  padding: 1rem 2rem;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero__lets-build:hover,
.hero__lets-build:focus-visible {
  background: #f0f0f0;
  color: #000;
}

.hero__actions--secondary {
  margin-top: 18px;
}

@media (max-width: 640px) {
  .hero__prompt-field {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }

  .hero__prompt-input {
    padding-inline: 4px;
  }

  .hero__prompt-submit {
    width: 100%;
  }

  .hero__prompt-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

.hero__footnote {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  color: rgba(230, 230, 230, 0.43);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.hero__footnote b {
  color: rgba(201, 201, 201, 0.72);
  font-weight: 500;
  margin-inline: 4px;
}

.hero__footnote-line {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.hero__visual {
  position: relative;
  min-width: 0;
}

.hero__index {
  position: absolute;
  left: 20px;
  top: 50%;
  color: rgba(255, 255, 255, 0.2);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.25em;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}

.hero-stage {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 1.13;
  margin-inline: auto;
  perspective: 1200px;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 450ms var(--ease);
}

.hero-stage__bloom {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 68%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 45%, rgba(121, 121, 121, 0.26), transparent 48%),
    radial-gradient(circle at 65% 56%, rgba(201, 201, 201, 0.15), transparent 55%);
  filter: blur(24px);
  animation: bloom-breathe 5s ease-in-out infinite;
}

.hero-stage__grid {
  position: absolute;
  inset: 11% 3% 3%;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(126, 126, 126, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 126, 126, 0.13) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 70% 58% at 50% 53%, #000 20%, transparent 76%);
  transform: perspective(650px) rotateX(66deg) translateY(22%);
}

.hero-stage__floor {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 73%;
  height: 42%;
  transform: translateX(-50%) perspective(540px) rotateX(69deg) rotateZ(45deg);
  border: 1px solid rgba(121, 121, 121, 0.2);
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(201, 201, 201, 0.28) 50%, transparent 50.3%),
    linear-gradient(transparent 49.7%, rgba(121, 121, 121, 0.34) 50%, transparent 50.3%),
    linear-gradient(135deg, rgba(121, 121, 121, 0.06), rgba(201, 201, 201, 0.025));
  box-shadow: 0 0 80px rgba(121, 121, 121, 0.13);
}

.hero-stage__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: rgba(201, 201, 201, 0.8);
  stroke: rgba(128, 128, 128, 0.22);
  stroke-width: 1;
}

.hero-stage__wires path {
  fill: none;
}

.hero-stage__wires .wire-hot {
  stroke: url(#wire-gradient);
  stroke-width: 1.6;
  stroke-dasharray: 10 14;
  filter: url(#wire-glow);
  animation: wire-flow 3.4s linear infinite;
}

.hero-stage__wires .wire-hot--delay {
  animation-delay: -1.7s;
}

.module-tower {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 25%;
  flex-direction: column;
  gap: 7px;
  transform-style: preserve-3d;
}

.module-tower--intent {
  left: 2%;
  top: 20%;
}

.module-tower--compile {
  right: 2%;
  top: 20%;
}

.module-tower--prove {
  left: 3%;
  bottom: 8%;
}

.module-tower--operate {
  right: 3%;
  bottom: 8%;
}

.module-tower__label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.module-tower__label span {
  color: var(--accent);
}

.module-card {
  position: relative;
  display: flex;
  height: clamp(39px, 4.4vw, 55px);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(155, 155, 155, 0.2);
  border-radius: 8px;
  padding: 0 11px;
  background:
    linear-gradient(105deg, rgba(174, 174, 174, 0.13), rgba(23, 23, 23, 0.84) 44%, rgba(81, 81, 81, 0.18)),
    rgba(14, 14, 14, 0.9);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -15px 28px rgba(3, 3, 3, 0.32),
    0 13px 25px rgba(0, 0, 0, 0.24);
  color: rgba(242, 242, 242, 0.62);
  font-family: var(--font-mono);
  font-size: clamp(6px, 0.58vw, 8px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: float-module 4.8s ease-in-out infinite;
}

.module-card::before {
  content: "";
  position: absolute;
  inset: 0;
  translate: -130% 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.15), transparent 70%);
  animation: module-sheen 6s ease-in-out infinite;
}

.module-card:nth-of-type(3) {
  animation-delay: -1.1s;
}

.module-card:nth-of-type(4) {
  animation-delay: -2.2s;
}

.module-card span {
  margin-right: auto;
}

.module-card i {
  width: 4px;
  height: 4px;
  margin-left: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.module-card i:first-of-type {
  background: var(--accent);
  box-shadow: 0 0 7px rgba(201, 201, 201, 0.9);
}

.core-assembly {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 4;
  width: 31%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

.core-cube {
  position: absolute;
  inset: 16%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(183, 183, 183, 0.45);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(180, 180, 180, 0.24), rgba(53, 53, 53, 0.32) 48%, rgba(15, 15, 15, 0.82)),
    rgba(27, 27, 27, 0.74);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.45),
    inset 20px 0 45px rgba(96, 96, 96, 0.13),
    inset -18px -18px 38px rgba(0, 0, 0, 0.3),
    0 0 65px rgba(100, 100, 100, 0.36),
    0 30px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  transform: rotateX(4deg) rotateY(-8deg);
  animation: core-float 5.4s ease-in-out infinite;
}

.core-cube::before,
.core-cube::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.core-cube::before {
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.core-cube::after {
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 24%, transparent 68%, rgba(201, 201, 201, 0.07));
}

.core-cube__top,
.core-cube__side {
  position: absolute;
  pointer-events: none;
  opacity: 0.45;
}

.core-cube__top {
  left: 12%;
  right: 12%;
  top: -12%;
  height: 23%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, rgba(150, 150, 150, 0.23), rgba(54, 54, 54, 0.08));
  transform: perspective(200px) rotateX(62deg);
}

.core-cube__side--left {
  top: 10%;
  bottom: 10%;
  left: -8%;
  width: 16%;
  border: 1px solid rgba(121, 121, 121, 0.24);
  border-radius: 7px 2px 2px 7px;
  background: rgba(75, 75, 75, 0.13);
  transform: skewY(-22deg);
}

.core-cube__side--right {
  top: 10%;
  right: -8%;
  bottom: 10%;
  width: 16%;
  border: 1px solid rgba(201, 201, 201, 0.18);
  border-radius: 2px 7px 7px 2px;
  background: rgba(130, 130, 130, 0.08);
  transform: skewY(22deg);
}

.core-cube__face {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}

.core-cube__face svg {
  width: 38px;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 13px rgba(153, 153, 153, 0.7));
}

.core-cube__face svg path:nth-child(2) {
  stroke: var(--accent);
}

.core-cube__face span {
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-mono);
  font-size: clamp(6px, 0.62vw, 8px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.core-shadow {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 58%;
  height: 15%;
  border-radius: 50%;
  background: rgba(72, 72, 72, 0.44);
  filter: blur(22px);
  transform: translateX(-50%);
}

.core-orbit {
  position: absolute;
  inset: 2%;
  border: 1px solid rgba(121, 121, 121, 0.16);
  border-radius: 50%;
}

.core-orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 13px var(--accent);
}

.core-orbit--one {
  animation: orbit-spin 8s linear infinite;
}

.core-orbit--two {
  inset: -7%;
  border-color: rgba(201, 201, 201, 0.09);
  transform: rotate(60deg) scaleY(0.65);
  animation: orbit-spin-reverse 12s linear infinite;
}

.stage-readout {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(10, 10, 10, 0.68);
  padding: 8px 10px;
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.stage-readout span {
  color: rgba(255, 255, 255, 0.38);
}

.stage-readout strong {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
}

.stage-readout--top {
  right: 22%;
  top: 4%;
}

.stage-readout--bottom {
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
}

.stage-readout--bottom strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
}

.stage-readout--bottom i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

/* Capability ribbon */

.proof-ribbon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-top: 0;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(13, 13, 13, 0.72);
  backdrop-filter: blur(12px);
}

.proof-ribbon::before,
.proof-ribbon::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: 2;
  width: 10vw;
  pointer-events: none;
}

.proof-ribbon::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}

.proof-ribbon::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg), transparent);
}

.proof-ribbon__track {
  display: flex;
  width: max-content;
  animation: ribbon-slide 34s linear infinite;
}

.proof-ribbon__group {
  display: flex;
  min-width: max-content;
  align-items: center;
  gap: 32px;
  padding: 7px 16px;
}

.proof-ribbon__group span {
  color: rgba(234, 234, 234, 0.52);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.proof-ribbon__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.proof-ribbon__brand img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

/* The ISL symbol is wide; it needs its own box rather than the square one. */
.proof-ribbon__brand--isl .isl-mark {
  width: 25px;
  height: auto;
}

.proof-ribbon__brand--text {
  padding-left: 2px;
}

.isl-mark {
  display: block;
  color: currentColor;
}

.proof-ribbon__group i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(121, 121, 121, 0.8);
}

/* Performance */

.performance {
  background: transparent;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}

.metric-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(32px, 3.2vw, 48px);
  background: transparent;
}


.metric-card__index {
  color: rgba(255, 255, 255, 0.28);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
}

.metric-card > strong {
  display: flex;
  align-items: flex-end;
  margin-top: 58px;
  color: #fff;
  font-size: clamp(46px, 5vw, 72px);
  font-weight: 430;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.metric-card > strong small {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 18px;
  letter-spacing: -0.03em;
}

.metric-card h3 {
  margin-top: 26px;
  font-size: 15px;
  font-weight: 620;
}

.metric-card > p:last-child {
  max-width: 210px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.trust-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: clamp(40px, 5vw, 64px);
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.trust-line__items {
  display: flex;
  align-items: center;
  gap: 21px;
}

.trust-line__items span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  letter-spacing: 0.09em;
}

.trust-line__items i {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(121, 121, 121, 0.2), rgba(201, 201, 201, 0.65));
}

/* System explorer */

.system-section {
  --ribbon-h: clamp(180px, 24vh, 280px);
  position: relative;
  overflow: hidden;
  border-top: 1px solid transparent;
  padding-bottom: calc(var(--ribbon-h) + clamp(64px, 8vw, 110px));
  background:
    radial-gradient(circle at 75% 50%, rgba(201, 201, 201, 0.04), transparent 32%),
    linear-gradient(180deg, var(--mn-ink) 0%, var(--mn-ink) 20%, var(--mn-ink) 80%, var(--mn-ink) 100%);
}

.system-section::after {
  content: "/ SYSTEM ARCHITECTURE / 004";
  position: absolute;
  right: 20px;
  top: 50%;
  color: rgba(255, 255, 255, 0.16);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.24em;
  writing-mode: vertical-rl;
}

.system-explorer {
  display: grid;
  grid-template-columns: minmax(430px, 1.02fr) minmax(360px, 0.98fr);
  grid-template-areas:
    "visual tabs"
    "visual detail";
  border: 1px solid var(--line);
  background: rgba(15, 15, 15, 0.62);
  box-shadow: var(--shadow-large);
}

.system-visual {
  position: relative;
  grid-area: visual;
  min-height: 690px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(80, 80, 80, 0.15), transparent 45%),
    var(--mn-ink);
  background-size: 45px 45px, 45px 45px, auto, auto;
}

.system-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.025) 50%, transparent 72%);
  translate: -100% 0;
  animation: system-scan 7s ease-in-out infinite;
}

.system-visual__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(121, 121, 121, 0.16), transparent 65%);
  filter: blur(18px);
  transform: translate(-50%, -50%);
}

.system-visual__axis {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0.45;
  background: linear-gradient(90deg, transparent, rgba(201, 201, 201, 0.25), transparent);
}

.system-visual__axis--x {
  width: 78%;
  height: 1px;
  transform: translate(-50%, -50%);
}

.system-visual__axis--y {
  width: 1px;
  height: 78%;
  background: linear-gradient(transparent, rgba(121, 121, 121, 0.3), transparent);
  transform: translate(-50%, -50%);
}

.system-stack {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 58%;
  height: 65%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  perspective: 850px;
}

.system-layer {
  --layer-color: 232, 232, 232;
  position: absolute;
  left: 50%;
  bottom: var(--layer-bottom);
  width: 78%;
  height: 24%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(var(--layer-color), 0.24);
  border-radius: 12px;
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(var(--layer-color), 0.17), rgba(16, 16, 16, 0.88) 56%),
    rgba(14, 14, 14, 0.92);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.13),
    0 22px 40px rgba(0, 0, 0, 0.34);
  transform: translateX(-50%) perspective(600px) rotateX(58deg) rotateZ(-4deg);
  transform-origin: center;
  transition:
    border-color 400ms ease,
    box-shadow 400ms ease,
    filter 400ms ease,
    transform 560ms var(--ease),
    opacity 400ms ease;
}

.system-layer--intent {
  --layer-bottom: 8%;
  --layer-color: 202, 202, 202;
}

.system-layer--compile {
  --layer-bottom: 22%;
  --layer-color: 176, 176, 176;
}

.system-layer--prove {
  --layer-bottom: 36%;
  --layer-color: 148, 148, 148;
}

.system-layer--operate {
  --layer-bottom: 50%;
  --layer-color: 118, 118, 118;
}

.system-layer span {
  color: rgba(var(--layer-color), 0.84);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.14em;
}

.system-layer strong {
  margin-right: auto;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.9vw, 11px);
  font-weight: 600;
  letter-spacing: 0.15em;
}

.system-layer i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.system-layer i:first-of-type {
  background: rgba(var(--layer-color), 0.8);
  box-shadow: 0 0 9px rgba(var(--layer-color), 0.75);
}

.system-layer.is-active {
  z-index: 5;
  border-color: rgba(var(--layer-color), 0.65);
  filter: saturate(1.25) brightness(1.13);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.28),
    0 0 45px rgba(var(--layer-color), 0.2),
    0 30px 50px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%) translateY(-9px) perspective(600px) rotateX(58deg) rotateZ(-4deg) scale(1.025);
}

@media (hover: hover) {
  .system-visual:hover .system-layer--operate {
    transform: translateX(-50%) translateY(-38px) perspective(600px) rotateX(58deg) rotateZ(-4deg);
  }

  .system-visual:hover .system-layer--prove {
    transform: translateX(-50%) translateY(-14px) perspective(600px) rotateX(58deg) rotateZ(-4deg);
  }

  .system-visual:hover .system-layer--compile {
    transform: translateX(-50%) translateY(14px) perspective(600px) rotateX(58deg) rotateZ(-4deg);
  }

  .system-visual:hover .system-layer--intent {
    transform: translateX(-50%) translateY(38px) perspective(600px) rotateX(58deg) rotateZ(-4deg);
  }

  .system-visual:hover .system-layer--operate.is-active {
    transform: translateX(-50%) translateY(-47px) perspective(600px) rotateX(58deg) rotateZ(-4deg) scale(1.025);
  }

  .system-visual:hover .system-layer--prove.is-active {
    transform: translateX(-50%) translateY(-23px) perspective(600px) rotateX(58deg) rotateZ(-4deg) scale(1.025);
  }

  .system-visual:hover .system-layer--compile.is-active {
    transform: translateX(-50%) translateY(5px) perspective(600px) rotateX(58deg) rotateZ(-4deg) scale(1.025);
  }

  .system-visual:hover .system-layer--intent.is-active {
    transform: translateX(-50%) translateY(29px) perspective(600px) rotateX(58deg) rotateZ(-4deg) scale(1.025);
  }
}

.system-visual__annotation {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: rgba(255, 255, 255, 0.38);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.system-visual__annotation span {
  color: rgba(255, 255, 255, 0.22);
}

.system-visual__annotation strong {
  font-size: 8px;
  font-weight: 500;
}

.system-visual__annotation--one {
  left: 28px;
  bottom: 27px;
}

.system-visual__annotation--two {
  right: 28px;
  top: 27px;
  text-align: right;
}

.layer-tabs {
  grid-area: tabs;
}

.layer-tab {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 26px 28px;
  text-align: left;
  cursor: pointer;
  transition: background 220ms ease;
}

.layer-tab:hover,
.layer-tab.is-active {
  background: rgba(255, 255, 255, 0.032);
}

.layer-tab__index {
  color: rgba(255, 255, 255, 0.28);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
}

.layer-tab > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.layer-tab strong {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  font-weight: 600;
  transition: color 220ms ease;
}

.layer-tab small {
  color: rgba(255, 255, 255, 0.32);
  font-size: 10px;
}

.layer-tab > i {
  color: rgba(255, 255, 255, 0.2);
  font-size: 13px;
  font-style: normal;
  transition: color 220ms ease, transform 220ms ease;
}

.layer-tab.is-active .layer-tab__index,
.layer-tab.is-active > i {
  color: var(--accent);
}

.layer-tab.is-active strong {
  color: #fff;
}

.layer-tab.is-active > i {
  transform: translate(2px, -2px);
}

.layer-detail {
  grid-area: detail;
  min-height: 290px;
  padding: clamp(34px, 3.8vw, 46px);
}

.layer-detail__topline {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.layer-detail__topline span:first-child {
  color: var(--accent);
}

.layer-detail h3 {
  max-width: 500px;
  margin-top: 22px;
  font-size: clamp(25px, 2.4vw, 35px);
  font-weight: 520;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.layer-detail > p {
  max-width: 590px;
  margin-top: 17px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.layer-detail__proof {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 23px;
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.layer-detail__proof i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 9px var(--success);
}

.layer-detail__proof span {
  color: rgba(255, 255, 255, 0.28);
}

.layer-detail__proof strong {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  text-align: right;
}

/* ShipGate */

.shipgate-section {
  overflow: hidden;
  border-top: 1px solid transparent;
  background:
    radial-gradient(circle at 82% 46%, rgba(83, 83, 83, 0.1), transparent 34%),
    linear-gradient(180deg, var(--mn-ink) 0%, var(--mn-ink) 20%, var(--mn-base) 80%, var(--mn-base) 100%);
}

.shipgate-section::before {
  content: "";
  position: absolute;
  right: -12%;
  top: 0;
  width: 55%;
  height: 100%;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
  transform: perspective(500px) rotateY(-18deg);
}

/* The copy reads on the right, the certificate on the left. DOM order keeps
   the heading first for screen readers and for the stacked layout. */
.shipgate-layout {
  display: grid;
  grid-template-columns: minmax(560px, 1.25fr) minmax(360px, 0.75fr);
  align-items: center;
  gap: clamp(70px, 9vw, 140px);
}

.shipgate-layout .shipgate-copy {
  order: 2;
}

.shipgate-layout .proof-console {
  order: 1;
}

.shipgate-copy {
  position: relative;
  z-index: 2;
}

.shipgate-copy h2 {
  margin-top: 21px;
}

.shipgate-copy > p:not(.eyebrow) {
  margin-top: 25px;
}

.proof-flow {
  display: grid;
  grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 41px;
}

.proof-flow > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.proof-flow > div span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 7px;
}

.proof-flow > div strong {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.proof-flow > div small {
  color: rgba(255, 255, 255, 0.3);
  font-size: 8px;
  white-space: nowrap;
}

.proof-flow > i {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(201, 201, 201, 0.3));
}

.proof-console {
  position: relative;
  z-index: 2;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--shadow-large);
  perspective: 1600px;
}

.sg-cert {
  position: relative;
  overflow: visible;
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.012) 3px 4px),
    #fff;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.sg-cert__mark {
  position: absolute;
  z-index: 0;
  right: 6%;
  top: 38%;
  width: min(210px, 42%);
  height: auto;
  pointer-events: none;
  opacity: 0.11;
  mix-blend-mode: multiply;
  filter: contrast(1.15);
}

.sg-cert__head,
.sg-cert__facts,
.console-log,
.console-verdict,
.console-footer {
  position: relative;
  z-index: 1;
}

.sg-cert__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px clamp(20px, 3vw, 32px) 20px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}

.sg-cert__issuer {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.sg-cert__issuer img {
  display: block;
  width: 48px;
  height: auto;
  flex: 0 0 auto;
  mix-blend-mode: multiply;
}

.sg-cert__issuer strong {
  display: block;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.sg-cert__issuer > div span {
  display: block;
  margin-top: 4px;
  color: rgba(0, 0, 0, 0.48);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sg-cert__serial {
  margin: 0;
  color: rgba(0, 0, 0, 0.48);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-align: right;
  text-transform: uppercase;
}

.sg-cert__serial b {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.sg-cert__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}

.sg-cert__facts > div {
  padding: 13px clamp(20px, 3vw, 32px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sg-cert__facts > div:nth-child(odd) {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.sg-cert__facts > div:nth-child(n + 3) {
  border-bottom: 0;
}

.sg-cert__facts dt {
  color: rgba(0, 0, 0, 0.42);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sg-cert__facts dd {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 560;
  letter-spacing: -0.02em;
}

.console-log {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 4px clamp(20px, 3vw, 32px) 0;
  list-style: none;
}

.console-log li {
  display: grid;
  grid-template-columns: 65px 72px 1fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 11px 2px;
  font-family: var(--font-mono);
  font-size: 8px;
}

.console-log li > span {
  color: rgba(0, 0, 0, 0.38);
}

.console-log li > strong {
  color: rgba(0, 0, 0, 0.78);
  font-weight: 650;
  letter-spacing: 0.08em;
}

.console-log li > em {
  color: rgba(0, 0, 0, 0.52);
  font-style: normal;
}

.console-log li > b {
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.04);
  padding: 3px 6px;
  color: var(--ink);
  font-size: 6px;
  letter-spacing: 0.1em;
}

.console-verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px clamp(20px, 3vw, 32px) 18px;
}

.console-verdict > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.console-verdict span {
  color: rgba(0, 0, 0, 0.42);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.console-verdict strong {
  color: var(--ink);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 520;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.sg-cert__seal {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin: 0;
  border: 2px solid rgba(0, 0, 0, 0.82);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.1);
  transform: rotate(-9deg);
}

.sg-cert__seal img {
  display: block;
  width: 52px;
  height: auto;
  mix-blend-mode: multiply;
}

.sg-cert__seal figcaption {
  position: absolute;
  left: 50%;
  bottom: 10px;
  color: rgba(0, 0, 0, 0.55);
  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.console-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
  padding: 14px clamp(20px, 3vw, 32px) 16px;
  color: rgba(0, 0, 0, 0.42);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Application showcase */

.applications-section {
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 50% 44%, rgba(77, 77, 77, 0.11), transparent 38%),
    var(--mn-ink);
}

.demo-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-bottom: 0;
}

.demo-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  border: 0;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
  padding: 22px 24px;
  text-align: left;
  cursor: pointer;
  transition: background 220ms ease;
}

.demo-tab:last-child {
  border-right: 0;
}

.demo-tab:hover,
.demo-tab.is-active {
  background: rgba(121, 121, 121, 0.075);
}

.demo-tab > span {
  grid-row: span 2;
  color: rgba(255, 255, 255, 0.24);
  font-family: var(--font-mono);
  font-size: 8px;
  padding-top: 3px;
}

.demo-tab strong {
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  font-weight: 600;
}

.demo-tab small {
  color: rgba(255, 255, 255, 0.3);
  font-size: 9px;
}

.demo-tab.is-active > span {
  color: var(--accent);
}

.demo-tab.is-active strong {
  color: #fff;
}

.application-showcase {
  display: grid;
  grid-template-columns: minmax(320px, 0.7fr) minmax(620px, 1.3fr);
  min-height: 650px;
  border: 1px solid var(--line);
  background: rgba(13, 13, 13, 0.68);
}

.application-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line);
  padding: clamp(38px, 5vw, 68px);
  overflow: hidden;
}

.application-copy::before {
  content: "";
  position: absolute;
  inset: auto auto -30% -40%;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(121, 121, 121, 0.12), transparent 68%);
}

.application-copy__label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.application-copy__label span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.application-copy__index {
  margin-top: 50px;
  color: rgba(255, 255, 255, 0.24);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
}

.application-copy h3 {
  margin-top: 10px;
  font-size: clamp(43px, 5vw, 70px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 0.98;
}

.application-copy > p[data-demo-description] {
  margin-top: 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.application-features {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 24px;
}

.application-features span {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  padding: 7px 10px;
  color: rgba(255, 255, 255, 0.47);
  font-size: 8px;
  letter-spacing: 0.055em;
}

.application-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 45px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.application-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.application-stats strong {
  color: rgba(255, 255, 255, 0.82);
  font-size: 22px;
  font-weight: 510;
  letter-spacing: -0.03em;
}

.application-stats span {
  color: rgba(255, 255, 255, 0.28);
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-window {
  align-self: center;
  width: 104%;
  min-width: 0;
  margin-left: 4%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px 0 0 14px;
  background: var(--text);
  color: var(--mn-elevated);
  box-shadow: -30px 35px 90px rgba(0, 0, 0, 0.42), 0 0 55px rgba(121, 121, 121, 0.08);
}

.app-window__topbar {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 0.8fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 62px;
  border-bottom: 1px solid #dfdfdf;
  padding: 0 20px;
  background: #fff;
}

.app-window__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-window__logo {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: var(--mn-elevated);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.app-window__brand > div {
  display: flex;
  flex-direction: column;
}

.app-window__brand strong {
  font-size: 10px;
  line-height: 1.25;
}

.app-window__brand small {
  color: #8f8f8f;
  font-size: 7px;
}

.app-window__search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e3e3e3;
  border-radius: 7px;
  background: #f8f8f8;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 7px;
}

.app-window__search > span {
  width: 8px;
  height: 8px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  position: relative;
}

.app-window__search > span::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 4px;
  height: 1px;
  background: var(--muted);
  transform: rotate(45deg);
}

.app-window__search kbd {
  margin-left: auto;
  border: 1px solid #e3e3e3;
  border-radius: 3px;
  background: #fff;
  padding: 2px 4px;
  color: #8f8f8f;
  font-family: inherit;
  font-size: 6px;
}

.app-window__user span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #e5e5e5;
  color: #4a4a4a;
  font-size: 7px;
  font-weight: 800;
}

.app-window__workspace {
  display: grid;
  grid-template-columns: 125px 1fr;
  min-height: 475px;
}

.app-sidebar {
  border-right: 1px solid #dfdfdf;
  background: #fafafa;
  padding: 19px 12px;
}

.app-sidebar p {
  margin: 12px 8px 6px;
  color: var(--muted);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.app-sidebar p:first-child {
  margin-top: 0;
}

.app-sidebar a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  border-radius: 6px;
  padding: 0 8px;
  color: #7f7f7f;
  font-size: 7px;
}

.app-sidebar a.is-active {
  background: #ebebeb;
  color: #4d4d4d;
  font-weight: 700;
}

.app-sidebar a i {
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.65;
}

.app-sidebar a b {
  margin-left: auto;
  border-radius: 999px;
  background: #dddddd;
  padding: 2px 5px;
  font-size: 5px;
}

.app-content {
  min-width: 0;
  padding: 25px;
}

.app-content__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.app-content__heading small {
  color: var(--muted);
  font-size: 7px;
}

.app-content__heading h4 {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.app-content__heading button {
  border: 0;
  border-radius: 6px;
  background: #656565;
  padding: 9px 11px;
  color: #fff;
  font-size: 7px;
}

.mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 22px;
}

.mini-metrics article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #fff;
  padding: 13px;
}

.mini-metrics span {
  overflow: hidden;
  color: #909090;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-metrics strong {
  margin-top: 8px;
  font-size: 18px;
  letter-spacing: -0.04em;
}

.mini-metrics small {
  margin-top: 4px;
  color: #8e8e8e;
  font-size: 6px;
}

.app-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 9px;
  margin-top: 9px;
}

.app-chart,
.app-activity {
  min-width: 0;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.app-chart > div:first-child,
.app-activity > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-chart > div strong,
.app-activity > div strong {
  font-size: 8px;
}

.app-chart > div span,
.app-activity > div span {
  color: var(--muted);
  font-size: 6px;
}

.bar-chart {
  display: flex;
  height: 120px;
  align-items: flex-end;
  gap: 7px;
  margin-top: 18px;
  border-bottom: 1px solid #ececec;
  background-image: linear-gradient(#f1f1f1 1px, transparent 1px);
  background-size: 100% 30px;
  padding-inline: 5px;
}

.bar-chart i {
  flex: 1;
  height: var(--bar);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #7b7b7b, #4e4e4e);
  opacity: 0.9;
  transition: height 550ms var(--ease);
}

.chart-labels {
  display: flex;
  justify-content: space-around;
  margin-top: 7px;
  color: var(--muted);
  font-size: 5px;
}

.app-activity ul {
  display: grid;
  gap: 0;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.app-activity li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 8px;
  border-top: 1px solid #eeeeee;
  padding: 10px 0;
}

.app-activity li > i {
  width: 6px;
  height: 6px;
  margin-top: 3px;
  border-radius: 50%;
  background: #bbbbbb;
  box-shadow: 0 0 0 3px var(--text);
}

.app-activity li p {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.app-activity li p strong {
  overflow: hidden;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-activity li p span,
.app-activity li time {
  color: var(--muted);
  font-size: 5px;
}

/* Final CTA */

.final-section {
  overflow: hidden;
  border-top: 1px solid transparent;
  padding-top: clamp(100px, 12vw, 180px);
  padding-bottom: clamp(24px, 4vw, 40px);
  background: linear-gradient(180deg, var(--mn-base) 0%, var(--mn-base) 100%);
}

.final-cta {
  position: relative;
  min-height: 570px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: var(--mn-base);
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.4);
}

.final-cta::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: clamp(96px, 28%, 180px);
  background: linear-gradient(180deg, transparent 0%, var(--mn-ink) 100%);
}

.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 25%, transparent 70%, rgba(201, 201, 201, 0.09));
  pointer-events: none;
}

.final-cta__grid {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: radial-gradient(circle at 70% 50%, #000 10%, transparent 66%);
  transform: perspective(600px) rotateY(-12deg) scale(1.15);
}

.final-cta__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
}

.final-cta__orb--one {
  right: -5%;
  top: -30%;
  width: 55%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), rgba(65, 65, 65, 0.1) 50%, transparent 70%);
}

.final-cta__orb--two {
  right: 18%;
  bottom: -55%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 201, 201, 0.3), transparent 65%);
}

.final-cta__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: clamp(45px, 7vw, 90px);
  pointer-events: none;
}

.final-cta__content a,
.final-cta__content .button {
  pointer-events: auto;
}

.final-cta .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.final-cta .eyebrow > span {
  background: #fff;
  box-shadow: none;
}

.final-cta h2 {
  margin-top: 24px;
  font-size: clamp(58px, 8vw, 112px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.91;
}

.final-cta__content > p {
  max-width: 610px;
  margin-top: 25px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.65;
}

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 33px;
}

.button--light {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 17px 40px rgba(7, 7, 7, 0.16);
}

.button--glass {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  backdrop-filter: blur(10px);
}


/* Footer */

.site-footer {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow: clip;
  padding-block: clamp(56px, 7vw, 84px) 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  background: var(--paper);
  color: #000;
}

.kinetic-fabric {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 0;
  contain: layout paint;
}

.kinetic-fabric__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.site-footer__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.3fr);
  gap: 28px 48px;
  align-items: start;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 34ch;
}

.site-footer__pitch {
  margin: 0;
  color: rgba(0, 0, 0, 0.66);
  font-size: 13px;
  line-height: 1.45;
}

/* Network marks: the sites this one belongs to, on the footer's paper. */
.site-footer__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__marks a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  opacity: 0.72;
  transition: opacity 180ms ease;
}

.site-footer__marks a:hover {
  opacity: 1;
}

.site-footer__marks svg {
  width: 17px;
  height: 17px;
}

.site-footer__marks .isl-mark {
  width: 34px;
  height: auto;
}

.site-footer__marks img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  /* Both marks ship white-on-transparent; the footer is paper. */
  filter: invert(1);
}

.site-footer__mark--word {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.site-footer__heading {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.5 alpha measured 3.9:1 on the paper footer — under the 4.5:1 floor. */
  color: rgba(0, 0, 0, 0.68);
}

.site-footer__column ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.25;
}

.site-footer__bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 14px;
  color: #000;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
}

.site-footer__legal {
  margin: 0;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: #000;
  transition: opacity 180ms ease;
}

/* WCAG 2.2 target size: the links stay visually tight, the tap box does not. */
.site-footer__column li a,
.site-footer__meta a,
.site-footer__marks a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.site-footer a:hover {
  opacity: 0.62;
}

.site-footer__word {
  justify-self: start;
  color: #000;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.06em;
}

.back-to-top {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #000;
  font-size: inherit;
  font-weight: inherit;
}

.back-to-top span {
  color: #000;
}

.noscript-note {
  position: fixed;
  inset: auto 18px 18px;
  z-index: 200;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--mn-elevated);
  padding: 12px 16px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-align: center;
}

/* Animations */

@keyframes status-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes bloom-breathe {
  0%, 100% { transform: scale(0.96); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes wire-flow {
  to { stroke-dashoffset: -48; }
}

@keyframes float-module {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes module-sheen {
  0%, 36% { translate: -130% 0; }
  55%, 100% { translate: 130% 0; }
}

@keyframes core-float {
  0%, 100% { transform: translateY(0) rotateX(4deg) rotateY(-8deg); }
  50% { transform: translateY(-8px) rotateX(2deg) rotateY(-5deg); }
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes orbit-spin-reverse {
  from { transform: rotate(60deg) scaleY(0.65); }
  to { transform: rotate(-300deg) scaleY(0.65); }
}

@keyframes ribbon-slide {
  to { transform: translateX(-50%); }
}

@keyframes system-scan {
  0%, 25% { translate: -100% 0; }
  65%, 100% { translate: 100% 0; }
}

/* Responsive */

@media (max-width: 1180px) {
  :scope {
    --shell: min(1120px, calc(100vw - 32px));
  }

  .site-header__actions .text-action {
    display: none;
  }

  .hero__shell {
    grid-template-columns: minmax(390px, 0.82fr) minmax(480px, 1.18fr);
  }

  .hero__title {
    font-size: clamp(54px, 6vw, 78px);
  }

  .module-card {
    height: 43px;
  }

  .shipgate-layout {
    grid-template-columns: minmax(320px, 0.72fr) minmax(520px, 1.28fr);
    gap: 55px;
  }

  .application-showcase {
    grid-template-columns: 0.72fr 1.28fr;
  }

  .application-copy {
    padding: 42px;
  }
}

@media (max-width: 1100px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
  }

  .site-nav {
    gap: 22px;
  }

  .hero {
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: 132px;
    padding-bottom: 0;
  }

  .hero__shell {
    grid-template-columns: 1fr;
  }

  .hero__copy {
    max-width: 780px;
    text-align: center;
    margin-inline: auto;
  }

  .eyebrow-row,
  .hero__actions,
  .hero__footnote {
    justify-content: center;
  }

  .hero__description {
    margin-inline: auto;
  }

  .hero__visual {
    width: min(850px, 100%);
    margin: 15px auto 0;
  }

  .hero-stage {
    width: min(760px, 100%);
  }

  .hero__index,
  .system-section::after {
    display: none;
  }

  .section-heading--split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .section-heading--split > p {
    max-width: 700px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .system-explorer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "tabs"
      "detail";
  }

  .system-visual {
    min-height: 620px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .layer-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .layer-tab:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  .shipgate-layout {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  /* Stacked: the heading leads again. */
  .shipgate-layout .shipgate-copy {
    order: 1;
  }

  .shipgate-layout .proof-console {
    order: 2;
  }

  .shipgate-copy {
    max-width: 800px;
  }

  .proof-console {
    width: min(820px, 100%);
    margin-inline: auto;
  }

  .application-showcase {
    grid-template-columns: 1fr;
  }

  .application-copy {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .app-window {
    width: calc(100% - 48px);
    margin: 48px auto;
    border-radius: 14px;
  }}

@media (max-width: 860px) {
  :scope {
    --shell: calc(100vw - 28px);
  }

  .site-header__inner {
    min-height: 68px;
  }

  .menu-toggle {
    position: relative;
    display: inline-flex;
    justify-self: end;
  }

  .site-header__actions {
    display: none;
  }

  .site-nav {
    position: fixed;
    inset: 68px 17px auto;
    z-index: 1000;
    max-height: calc(100vh - 85px);
    overflow-y: auto;
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(10, 10, 10, 0.98);
    padding: 12px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(22px);
    pointer-events: none;
  }

  :scope.js .site-nav {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
    pointer-events: none;
  }

  :scope.js .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-nav a {
    border-bottom: 1px solid var(--line-soft);
    padding: 14px 12px;
    font-size: 13px;
  }

  .site-nav a.is-active {
    border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid #fff;
    background: rgba(255, 255, 255, 0.05);
  }

  .mobile-nav-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    margin-top: 6px;
    border-top: 1px solid var(--line-soft);
  }

  .mobile-nav-actions .button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .hero {
    padding-top: 120px;
  }

  .hero__title {
    font-size: clamp(49px, 11vw, 78px);
  }

  .hero-stage {
    width: 720px;
    max-width: 112%;
    left: 50%;
    transform: translateX(-50%) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }

  .module-tower {
    width: 24%;
  }

  .module-card {
    height: 42px;
  }

  .proof-flow {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .proof-flow > i {
    display: none;
  }

  .demo-tabs {
    grid-template-columns: 1fr;
  }

  .demo-tab {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .demo-tab:last-child {
    border-bottom: 0;
  }

  .app-window__search {
    display: none;
  }

  .app-window__topbar {
    grid-template-columns: 1fr auto;
  }

  .site-footer__bar {
    grid-template-columns: auto 1fr auto;
    gap: 12px 20px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 760px) {
  .section {
    padding-block: 92px;
  }

  .section-heading h2,
  .shipgate-copy h2,
  .manifesto-title {
    font-size: clamp(39px, 12vw, 57px);
  }

  .hero {
    padding-top: 112px;
    padding-bottom: 65px;
  }

  .eyebrow-row {
    flex-direction: column;
    gap: 13px;
  }

  .hero__title {
    margin-top: 26px;
    font-size: clamp(47px, 14vw, 67px);
    line-height: 0.92;
  }

  .hero__description {
    font-size: 15px;
  }

  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Three CTAs stay side by side on phones: compact metrics + no arrow glyph.
     Below ~360px the wrap lets the third button drop to its own full line. */
  .hero__actions .button {
    flex: 1 1 0;
    width: auto;
    min-height: 46px;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.04em;
    gap: 6px;
  }

  .hero__actions .button__arrow {
    display: none;
  }

  .hero__footnote {
    display: none;
  }

  .hero__visual {
    margin-top: 10px;
  }

  .hero-stage {
    width: 620px;
    max-width: 154%;
    aspect-ratio: 1.02;
  }

  .module-tower {
    width: 24%;
  }

  .module-tower--intent,
  .module-tower--compile {
    top: 22%;
  }

  .module-tower--prove,
  .module-tower--operate {
    bottom: 10%;
  }

  .module-card {
    height: 38px;
    padding-inline: 8px;
  }

  .module-card span {
    font-size: 6px;
  }

  .core-assembly {
    width: 30%;
  }

  .stage-readout--top {
    display: none;
  }

  .proof-ribbon__group {
    padding-block: 7px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: 235px;
  }

  .metric-card > strong {
    margin-top: 42px;
  }

  .trust-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .trust-line__items {
    width: 100%;
    flex-wrap: wrap;
  }

  .system-visual {
    min-height: 440px;
  }

  .system-stack {
    width: 78%;
    height: 78%;
  }

  .system-layer {
    width: 88%;
    padding: 12px;
  }

  .system-visual__annotation {
    display: none;
  }

  .layer-tabs {
    grid-template-columns: 1fr;
  }

  .layer-tab:nth-child(odd) {
    border-right: 0;
  }

  .layer-detail {
    min-height: auto;
  }

  .layer-detail__proof {
    grid-template-columns: auto 1fr;
  }

  .layer-detail__proof strong {
    grid-column: 1 / -1;
    text-align: left;
  }

  .proof-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 23px;
  }

  .sg-cert__facts {
    grid-template-columns: 1fr;
  }

  .sg-cert__facts > div:nth-child(odd) {
    border-right: 0;
  }

  .sg-cert__facts > div:nth-child(n + 3) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .sg-cert__facts > div:last-child {
    border-bottom: 0;
  }

  .console-log li {
    grid-template-columns: 56px 58px 1fr auto;
    gap: 7px;
    font-size: 6px;
  }

  .console-log li > em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sg-cert__seal {
    width: 84px;
    height: 84px;
  }

  .sg-cert__seal img {
    width: 40px;
  }

  .sg-cert__seal figcaption {
    display: none;
  }

  .console-footer span:nth-child(2) {
    display: none;
  }

  .application-copy {
    padding: 34px 24px;
  }

  .application-copy__index {
    margin-top: 37px;
  }

  .application-stats {
    gap: 10px;
  }

  .app-window {
    width: calc(100% - 24px);
    margin: 25px auto;
  }

  .app-window__workspace {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    display: none;
  }

  .app-content {
    padding: 16px;
  }

  .mini-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .mini-metrics article:last-child {
    grid-column: 1 / -1;
  }

  .app-grid {
    grid-template-columns: 1fr;
  }

  .app-activity {
    display: none;
  }  .final-cta {
    min-height: 620px;
    border-radius: 18px 18px 0 0;
  }

  .final-cta__content {
    padding: 38px 27px;
  }

  .final-cta h2 {
    font-size: clamp(46px, 13vw, 65px);
  }

  .final-cta__actions {
    flex-direction: column;
  }

  .final-cta__actions .button {
    width: 100%;
  }

  .site-footer__bar {
    font-size: 13px;
  }

  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }
}

@media (max-width: 430px) {
  :scope {
    --shell: calc(100vw - 28px);
  }

  .brand__word {
    font-size: 17px;
  }

  .hero__title {
    font-size: 48px;
  }

  .hero-stage {
    width: 590px;
  }

  .module-card i:nth-last-child(-n + 2) {
    display: none;
  }

  .stage-readout--bottom {
    bottom: 1%;
  }

  .console-log li {
    grid-template-columns: 50px 55px 1fr;
  }

  .console-log li > b {
    display: none;
  }

  .application-stats strong {
    font-size: 19px;
  }

  .app-content__heading button {
    display: none;
  }

  .bar-chart {
    height: 95px;
  }

  .final-cta__content > p {
    font-size: 14px;
  }

  .site-footer__bar {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .site-footer__word,
  .site-footer__meta,
  .back-to-top {
    justify-self: start;
  }

  .site-footer__meta {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  :scope.js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero-stage {
    transform: none !important;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   WholeStack Mono / Zeta Sphere revision
   The original structural CSS remains above so the standalone can be merged
   selectively. These rules define the approved black-and-white surface.
   ────────────────────────────────────────────────────────────────────────── */

/* Tokens for this revision are folded into the single :scope at the top. */

html {
  scrollbar-color: rgba(255, 255, 255, 0.42) #000;
}

body {
  background: var(--mn-deep);
}

::selection {
  background: var(--text);
  color: var(--ink);
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline-color: #fff;
}

.page-atmosphere {
  background:
    radial-gradient(ellipse 58% 48% at 70% 14%, rgba(255, 255, 255, 0.075), transparent 68%),
    radial-gradient(ellipse 48% 34% at 8% 76%, rgba(255, 255, 255, 0.035), transparent 72%),
    linear-gradient(180deg, var(--mn-deep) 0%, #000 62%, var(--mn-base) 100%);
}

.page-atmosphere__glow-a,
.page-atmosphere__glow-b {
  display: none;
}

.page-atmosphere__grid {
  opacity: 0.24;
  background-size: 80px 80px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.023) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.023) 1px, transparent 1px);
}

.cursor-light {
  display: none !important;
}

.eyebrow > span,
.application-copy__label span {
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.18));
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
}

.button--primary {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 15px 44px rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.8);
}

.button--primary:hover {
  background: #dcdcdc;
  border-color: #dcdcdc;
  box-shadow: 0 20px 58px rgba(255, 255, 255, 0.12);
}

.site-nav a.button,
.site-nav a.button--primary,
a.button[data-account-cta] {
  color: var(--ink);
}

.site-nav a.button:hover,
.site-nav a.button--primary:hover,
a.button[data-account-cta]:hover {
  color: var(--ink);
}


.button--ghost {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.018);
}

.button--ghost:hover {
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.055);
}

.inline-link:hover,
.inline-link span,
.hero__footnote b {
  border-color: #fff;
  color: #fff;
}

.site-header.is-scrolled {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(24px) saturate(0%);
}

.brand {
  gap: 10px;
}

.brand__logo {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
}

.brand__word {
  font-weight: 660;
  letter-spacing: -0.045em;
}

.live-chip {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.64);
}

.live-chip i,
.site-footer__status i,
.software-frame figcaption strong i {
  background: #fff;
  box-shadow: 0 0 11px rgba(255, 255, 255, 0.72);
}

.hero::before {
  background:
    radial-gradient(circle at 77% 45%, rgba(255, 255, 255, 0.085), transparent 32%),
    radial-gradient(circle at 70% 31%, rgba(255, 255, 255, 0.035), transparent 38%);
}

.hero__shell {
  grid-template-columns: minmax(440px, 0.94fr) minmax(520px, 1.06fr);
  gap: clamp(22px, 3.6vw, 58px);
}

.gradient-text {
  color: inherit;
}

.hero__description {
  color: var(--muted);
}


.applications-section {
  background:
    radial-gradient(circle at 70% 42%, rgba(255,255,255,.035), transparent 42%),
    var(--mn-deep);
}

.demo-tab:hover,
.demo-tab.is-active {
  background: rgba(255, 255, 255, 0.055);
}

.demo-tab.is-active > span {
  color: #fff;
}

.application-showcase--images {
  grid-template-columns: minmax(315px, .62fr) minmax(600px, 1.38fr);
  min-height: 650px;
  background: var(--mn-base);
}

.application-showcase--images .application-copy {
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 30%),
    var(--mn-base);
}

.application-showcase--images .application-copy::before {
  background: radial-gradient(circle, rgba(255,255,255,.055), transparent 69%);
}

.software-frame {
  position: relative;
  align-self: center;
  width: 104%;
  min-width: 0;
  margin: 48px 0 48px 4%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 16px 0 0 16px;
  background: #000;
  box-shadow: -34px 42px 110px rgba(0,0,0,.78), 0 0 42px rgba(255,255,255,.025);
  transform: perspective(1200px) rotateY(-1.8deg);
  transform-origin: left center;
  transition: opacity 210ms ease, transform 520ms var(--ease), border-color 250ms ease;
}

.software-frame:hover {
  border-color: rgba(255,255,255,.28);
  transform: perspective(1200px) rotateY(0deg) translateY(-4px);
}

.application-showcase.is-changing .software-frame {
  opacity: .42;
  transform: perspective(1200px) rotateY(-1.8deg) translateY(8px) scale(.992);
}

.software-frame__chrome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  padding: 0 15px;
  color: rgba(255,255,255,.35);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.software-frame__chrome > div {
  display: flex;
  gap: 6px;
}

.software-frame__chrome i {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
}

.software-frame__chrome span {
  justify-self: center;
  overflow: hidden;
  max-width: 330px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.software-frame__chrome b {
  justify-self: end;
  color: rgba(255,255,255,.65);
  font-size: 6px;
  font-weight: 650;
}

.software-frame__viewport {
  position: relative;
  overflow: hidden;
  background: #000;
}

.software-frame__viewport img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.03) brightness(.94);
  transform: scale(1.002);
  transition: filter 360ms ease, transform 650ms var(--ease);
}

.software-frame:hover .software-frame__viewport img {
  filter: grayscale(1) contrast(1.07) brightness(1);
  transform: scale(1.012);
}

.software-frame__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.18) 49.7%, transparent 50.3%);
  background-size: 100% 220px;
  mix-blend-mode: screen;
  animation: software-scan 7s linear infinite;
}

.software-frame figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 48px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 0 15px;
  color: rgba(255,255,255,.34);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.final-cta {
  background: var(--mn-base);
}

.final-cta__orb {
  background: radial-gradient(circle, rgba(255,255,255,.11), transparent 68%);
}

@keyframes software-scan {
  from { background-position: 0 -240px; }
  to { background-position: 0 calc(100% + 240px); }
}

@media (max-width: 1180px) {
  .hero__shell {
    grid-template-columns: minmax(390px, .9fr) minmax(480px, 1.1fr);
  }

  .application-showcase--images {
    grid-template-columns: minmax(300px, .68fr) minmax(540px, 1.32fr);
  }
}

@media (max-width: 1100px) {
  .hero__shell {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .application-showcase--images {
    grid-template-columns: 1fr;
  }

  .software-frame {
    width: calc(100% - 56px);
    margin: 48px auto;
    border-radius: 16px;
    transform: none;
  }

  .software-frame:hover,
  .application-showcase.is-changing .software-frame {
    transform: translateY(-3px);
  }
}

@media (max-width: 860px) {
  .brand__logo {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
  }
}

@media (max-width: 760px) {
  .application-showcase--images .application-copy {
    padding: 34px 25px;
  }

  .software-frame {
    width: calc(100% - 24px);
    margin: 28px auto;
    border-radius: 12px;
  }

  .software-frame__chrome {
    grid-template-columns: auto 1fr auto;
    min-height: 38px;
    padding-inline: 10px;
  }

  .software-frame__chrome span {
    max-width: 160px;
    padding-inline: 10px;
  }

  .software-frame figcaption {
    align-items: flex-start;
    flex-direction: column;
    min-height: auto;
    padding: 12px;
  }
}

@media (max-width: 430px) {
  .brand__word {
    font-size: 16px;
  }
}

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

/* ────────────────────────────────────────────────────────────────────────
   Performance contract
   - Below-the-fold sections are layout/paint isolated so hover and reveal
     work inside one section never re-lays-out its neighbours. (Not
     content-visibility: that estimates heights and makes anchors drift.)
   - Scroll-linked motion is CSS scroll-driven (no scroll listeners).
   - Everything that moves, moves via transform/opacity only.
   ──────────────────────────────────────────────────────────────────────── */

.benchmarks-section,
.manifesto-section,
.paths-section,
.extract-section,
.pricing-section {
  contain: layout paint style;
}

.image-stream__card img,
.manifesto-band__track,
.hero-ribbon {
  backface-visibility: hidden;
}

.image-stream__card img,
.manifesto-band__track,
.hero-ribbon {
  backface-visibility: hidden;
}

.hero__ribbon {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--ribbon-h, clamp(180px, 24vh, 280px));
  pointer-events: none;
  contain: strict;
  overflow: hidden;
  margin-block: 0;
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}

.hero-ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1400ms var(--ease);
}

.hero-ribbon.is-ready {
  opacity: 1;
}

.hero-ribbon__fallback {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    repeating-linear-gradient(
      172deg,
      transparent 0 26px,
      rgba(255, 255, 255, 0.05) 26px 27px,
      transparent 27px 58px,
      rgba(255, 255, 255, 0.11) 58px 59px
    );
  transition: opacity 800ms var(--ease);
}

.hero__ribbon[data-render-mode="fallback"] .hero-ribbon__fallback {
  opacity: 1;
}

@supports (animation-timeline: view()) {
  .hero__shell {
    animation: hero-dim linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }

  .hero__index {
    animation: hero-dim linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 90%;
  }

  .hero__ribbon {
    transform-origin: 50% 100%;
    animation: ribbon-runway linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }

  .image-stream {
    transform-origin: 50% 42%;
    animation: corridor-approach linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 78%;
  }
}

@keyframes ribbon-runway {
  to {
    transform: translate3d(0, 28%, -160px) scale(0.42, 1.55);
    opacity: 0;
  }
}

/* The hero does not move on scroll: it darkens and fades out in place. */
@keyframes hero-dim {
  to {
    filter: brightness(0.18);
    opacity: 0;
  }
}

@keyframes corridor-approach {
  from {
    transform: translate3d(0, 14vh, -480px) rotateX(18deg) scale(0.48);
    opacity: 0.2;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Benchmarks — a reserved, honest slot
   ──────────────────────────────────────────────────────────────────────── */

.benchmarks-section {
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 10% 100%, rgba(121, 121, 121, 0.07), transparent 30%),
    var(--mn-ink);
}

.bench-board {
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  padding: 6px;
  box-shadow: var(--shadow-large);
}

.bench-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.1fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(200px, 1fr);
  gap: 24px;
  align-items: center;
  padding: 26px 28px;
  border-bottom: 1px solid var(--line-soft);
}

.bench-row:last-child {
  border-bottom: 0;
}

.bench-row--head {
  padding-block: 16px;
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bench-row:not(.bench-row--head) {
  border-radius: 14px;
  background: linear-gradient(180deg, var(--mn-panel), var(--mn-ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  margin-top: 4px;
  border-bottom: 0;
}

.bench-name {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
}

.bench-name span {
  grid-row: span 2;
  padding-top: 5px;
  color: rgba(255, 255, 255, 0.28);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
}

.bench-name strong {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.bench-name small {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

.bench-value strong,
.bench-threshold strong {
  display: block;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 540;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bench-threshold strong {
  color: rgba(255, 255, 255, 0.5);
}

.bench-value small,
.bench-threshold small {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.bench-slot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  width: 100%;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bench-slot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: status-pulse 2.6s ease-in-out infinite;
}

.bench-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.bench-foot p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 52ch;
}

/* ────────────────────────────────────────────────────────────────────────
   Arena Showcase — Volition Red-Team Challenge & Benchmark v0.2
   ──────────────────────────────────────────────────────────────────────── */

.arena-showcase-section {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 20% 20%, rgba(121, 121, 121, 0.06), transparent 40%),
    linear-gradient(180deg, var(--mn-ink) 0%, var(--mn-deep) 50%, var(--mn-ink) 100%);
  padding: clamp(64px, 8vw, 120px) 0;
}

.arena-challenge-panel {
  margin-top: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.arena-challenge-panel__inner {
  padding: clamp(24px, 4vw, 48px);
}

.arena-challenge-panel__arms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.arena-arm-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
}

.arena-arm-card--control {
  border-left: 3px solid rgba(255, 255, 255, 0.3);
}

.arena-arm-card--volition {
  border-left: 3px solid #fff;
}

.arena-arm-card__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.arena-arm-card__status {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  color: #fff;
  margin-top: 8px;
}

.arena-arm-card__desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 8px;
}

.arena-reconstruction-quote {
  margin-top: 32px;
  padding: 20px 24px;
  border-left: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.arena-reconstruction-quote p {
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.65;
  font-style: italic;
  margin: 0;
}

.arena-challenge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
  align-items: center;
}

/* ────────────────────────────────────────────────────────────────────────
   Manifesto — position statements + intent engineering
   ──────────────────────────────────────────────────────────────────────── */

.manifesto-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid transparent;
  background:
    radial-gradient(circle at 80% 10%, rgba(121, 121, 121, 0.08), transparent 36%),
    linear-gradient(180deg, var(--mn-base) 0%, var(--mn-base) 30%, var(--mn-base) 70%, var(--mn-base) 100%);
}

.manifesto-section .shell {
  position: relative;
  z-index: 1;
}

.manifesto-field {
  display: none !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}

.manifesto-field__canvas,
.manifesto-field__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.manifesto-field__canvas {
  opacity: 0;
  transition: opacity 900ms var(--ease);
}

.manifesto-field__canvas.is-ready {
  opacity: 1;
}

.manifesto-field__fallback {
  opacity: 0;
  background:
    radial-gradient(circle at 68% 42%, rgba(255, 255, 255, 0.08), transparent 38%),
    var(--mn-base);
}

.manifesto-field[data-render-mode="fallback"] .manifesto-field__fallback {
  opacity: 1;
}

.manifesto-field[data-render-mode="webgl"]::before {
  content: "";
  position: absolute;
  left: 68%;
  top: 46%;
  width: min(72vw, 920px);
  height: min(72vw, 920px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  opacity: 0.1;
  filter: blur(120px);
  pointer-events: none;
}

.manifesto-section:has([data-topology-field][data-render-mode="webgl"]) {
  background: var(--mn-base);
}

.manifesto-band {
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.manifesto-band__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 48px;
  padding: 34px 0;
  animation: ribbon-slide 44s linear infinite;
  will-change: transform;
}

.manifesto-band__track span {
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.24);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 520;
  letter-spacing: -0.05em;
  line-height: 1;
}

.manifesto-band__track span:nth-of-type(odd) {
  color: rgba(255, 255, 255, 0.92);
  -webkit-text-stroke: 0;
}

.manifesto-band__track i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.manifesto-head {
  max-width: 1040px;
}

.manifesto-title {
  margin-top: 20px;
  max-width: 900px;
}

.manifesto-lede {
  max-width: 760px;
  margin-top: 36px;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
}

.statement-ledger {
  list-style: none;
  margin: clamp(64px, 8vw, 110px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.statement {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

:scope.js .statement {
  opacity: 0;
}

:scope.js [data-reveal].is-visible .statement {
  animation: rise-in 900ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.statement__index {
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.statement p {
  color: rgba(255, 255, 255, 0.55);
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 520;
  letter-spacing: -0.04em;
  line-height: 1.05;
  transition: transform 600ms var(--ease);
}

.statement:hover p {
  transform: translateX(12px);
}

.statement p em {
  color: #fff;
  font-style: normal;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.intent-engineering {
  margin-top: clamp(64px, 8vw, 104px);
}

.intent-engineering__shell {
  padding: 8px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: var(--shadow-large);
}

.intent-engineering__core {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--mn-panel), var(--mn-ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.intent-engineering__define {
  padding: clamp(32px, 4vw, 56px);
  border-right: 1px solid var(--line-soft);
}

.intent-engineering__define h3 {
  margin-top: 22px;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1;
}

.intent-engineering__definition {
  margin-top: 26px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.intent-engineering__definition strong {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.intent-engineering__definition > span {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 11px;
}

.intent-engineering__compare {
  display: grid;
  grid-template-rows: auto repeat(4, minmax(0, 1fr));
  margin: 0;
}

.intent-engineering__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.55fr) 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
}

.intent-engineering__row:last-child {
  border-bottom: 0;
}

.intent-engineering__row dt,
.intent-engineering__row dd {
  margin: 0;
  padding: 20px 24px;
  font-size: 13px;
  line-height: 1.5;
}

.intent-engineering__row dt {
  color: rgba(255, 255, 255, 0.38);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 24px;
}

.intent-engineering__row dd {
  color: rgba(255, 255, 255, 0.48);
}

.intent-engineering__row dd.is-whole {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(121, 121, 121, 0.07);
}

.intent-engineering__row--head dd {
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.intent-engineering__row--head dd.is-whole {
  color: #fff;
}

/* ────────────────────────────────────────────────────────────────────────
   Paths — Quick look / Build it right
   ──────────────────────────────────────────────────────────────────────── */

.paths-section {
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 20% 0%, rgba(121, 121, 121, 0.07), transparent 30%),
    var(--mn-ink);
}

.path-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 28px;
  align-items: start;
}

.path-card--quick {
  margin-top: 56px;
}

.path-card__shell {
  padding: 8px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  transition: transform 700ms var(--ease), border-color 300ms ease;
}

.path-card--right .path-card__shell {
  background: linear-gradient(135deg, rgba(201, 201, 201, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: var(--shadow-large);
}

.path-card:hover .path-card__shell {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.22);
}

.path-card__core {
  border-radius: 22px;
  padding: clamp(28px, 3.4vw, 44px);
  background: linear-gradient(180deg, var(--mn-panel), var(--mn-ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.path-card--right .path-card__core {
  background: linear-gradient(180deg, var(--mn-elevated), var(--mn-ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.path-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.path-card__index {
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.path-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.path-card__badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(210, 210, 210, 0.6);
  animation: status-pulse 2.4s ease-in-out infinite;
}

.path-card__badge--muted i {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: none;
  animation: none;
}

.path-card h3 {
  margin-top: 34px;
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 0.98;
}

.path-card__core > p {
  margin-top: 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.path-card__time {
  margin-top: 14px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 14px !important;
}

.path-card__time strong {
  color: #fff;
}

.path-card code,
.pricing-line code,
.extract-row code {
  font-family: var(--font-mono);
}

.path-card code {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.85em;
}

.proof-ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}

.proof-ladder li {
  position: relative;
  padding-top: 14px;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.proof-ladder li::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease);
}

.proof-ladder li:nth-child(2)::before { transition-delay: 140ms; }
.proof-ladder li:nth-child(3)::before { transition-delay: 280ms; }
.proof-ladder li:nth-child(4)::before { transition-delay: 420ms; }

.proof-ladder li.is-reached {
  color: #fff;
}

html:not(.js) .proof-ladder li.is-reached::before,
:scope.js [data-reveal].is-visible .proof-ladder li.is-reached::before {
  transform: scaleX(1);
}

.proof-ladder li.is-final::after {
  content: "SHIP";
  position: absolute;
  right: 0;
  top: 14px;
  color: var(--success);
  font-size: 8px;
}

.path-questions {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.path-questions li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 4px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.5;
}

.path-questions li span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  font-size: 9px;
}

.path-questions li em {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.04em;
}

.path-card__foot {
  margin-top: 26px !important;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: var(--font-mono);
  font-size: 10px !important;
  letter-spacing: 0.06em;
  line-height: 1.6 !important;
}

.path-bridge {
  max-width: 760px;
  margin-top: clamp(48px, 6vw, 80px);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

/* ────────────────────────────────────────────────────────────────────────
   Extract — existing software → business contract
   ──────────────────────────────────────────────────────────────────────── */

.extract-section {
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 90% 20%, rgba(121, 121, 121, 0.08), transparent 32%),
    var(--mn-base);
}

.extract-console {
  padding: 8px;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: var(--shadow-large);
}

.extract-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px 4px 8px;
}

.extract-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  transition: background 240ms ease, box-shadow 240ms ease;
}

.extract-tab:hover {
  background: rgba(255, 255, 255, 0.04);
}

.extract-tab.is-active {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.extract-tab > span {
  grid-row: span 2;
  padding-top: 3px;
  color: rgba(255, 255, 255, 0.25);
  font-family: var(--font-mono);
  font-size: 8px;
}

.extract-tab strong {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 600;
}

.extract-tab small {
  color: rgba(255, 255, 255, 0.3);
  font-size: 9px;
}

.extract-tab.is-active > span { color: var(--accent); }
.extract-tab.is-active strong { color: #fff; }

.extract-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--mn-panel), var(--mn-ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: opacity 220ms ease;
}

.extract-panel.is-changing {
  opacity: 0.55;
}

.extract-source {
  padding: clamp(24px, 3vw, 36px);
  border-right: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.012);
}

.extract-source__label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.extract-source__label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(210, 210, 210, 0.6);
  animation: status-pulse 2s ease-in-out infinite;
}

.extract-source__label span {
  color: #fff;
  text-transform: none;
  letter-spacing: 0.02em;
}

.extract-files {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.extract-files li {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.extract-files li span {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
}

.extract-files li small {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 9px;
}

.extract-source__note {
  margin-top: 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.extract-contract {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.extract-contract__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--line-soft);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.extract-contract__head p span { color: #fff; }
.extract-contract__head p b { color: var(--accent); font-weight: 700; }

.extract-contract__state {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
  font-size: 8px;
  white-space: nowrap;
}

.extract-rows {
  list-style: none;
  margin: 0;
  padding: 6px clamp(24px, 3vw, 36px);
}

.extract-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 6px 18px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}

.extract-row:last-child {
  border-bottom: 0;
}

:scope.js .extract-row {
  opacity: 0;
}

:scope.js [data-reveal].is-visible .extract-row {
  animation: rise-in 700ms var(--ease) both;
}

:scope.js [data-reveal].is-visible .extract-row:nth-child(2) { animation-delay: 80ms; }
:scope.js [data-reveal].is-visible .extract-row:nth-child(3) { animation-delay: 160ms; }
:scope.js [data-reveal].is-visible .extract-row:nth-child(4) { animation-delay: 240ms; }
:scope.js [data-reveal].is-visible .extract-row:nth-child(5) { animation-delay: 320ms; }
:scope.js [data-reveal].is-visible .extract-row:nth-child(6) { animation-delay: 400ms; }

.extract-row__badge {
  grid-row: span 2;
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.extract-row__badge.is-extracted {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.extract-row__badge.is-open {
  border: 1px dashed rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.7);
}

.extract-row p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.5;
}

.extract-row code {
  color: rgba(255, 255, 255, 0.38);
  font-size: 10px;
  letter-spacing: 0.03em;
}

.extract-row--open {
  margin-inline: -12px;
  padding-inline: 12px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 70%);
}

.extract-row--open p {
  color: rgba(255, 255, 255, 0.72);
}

.extract-contract__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}

.extract-contract__foot p {
  max-width: 520px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.extract-terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.extract-term {
  padding: 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.012);
}

.extract-term--wide {
  grid-column: span 2;
}

.extract-term span {
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
}

.extract-term h4 {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.extract-term p {
  max-width: 62ch;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

/* ────────────────────────────────────────────────────────────────────────
   Pricing — the receipt
   ──────────────────────────────────────────────────────────────────────── */

.pricing-section {
  border-top: 1px solid transparent;
  background:
    radial-gradient(circle at 15% 30%, rgba(121, 121, 121, 0.08), transparent 34%),
    linear-gradient(180deg, var(--mn-base) 0%, var(--mn-ink) 25%, var(--mn-ink) 75%, var(--mn-base) 100%);
}

.pricing-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(64px, 8vw, 120px);
  align-items: start;
}

.pricing-copy {
  position: relative;
}

.pricing-copy h2 {
  margin-top: 20px;
  font-size: clamp(58px, 8vw, 122px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.92;
}

.pricing-lede {
  max-width: 520px;
  margin-top: 30px;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
}

.pricing-laws {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.pricing-laws li {
  position: relative;
  padding: 16px 0 16px 48px;
  border-bottom: 1px solid var(--line-soft);
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1.55;
}

.pricing-laws li span {
  position: absolute;
  left: 0;
  top: 19px;
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--font-mono);
  font-size: 9px;
}

.pricing-laws li strong {
  color: #fff;
  font-weight: 600;
}

.pricing-laws code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.pricing-receipt-shell {
  padding: 10px;
  border-radius: 32px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--shadow-large);
  perspective: 1400px;
}

.pricing-receipt {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  transform-origin: 50% 48%;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.012) 3px 4px),
    #fff;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.pricing-receipt__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 30px clamp(24px, 3vw, 40px) 24px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}

.pricing-receipt__brand {
  display: block;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.pricing-receipt__sub {
  display: block;
  margin-top: 6px;
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pricing-receipt__no {
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono);
  font-size: 10px;
}

.pricing-lines {
  list-style: none;
  margin: 0;
  padding: 0 clamp(24px, 3vw, 40px) 36px;
}

.pricing-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.18);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

@media (hover: hover) {
  .pricing-line:hover {
    margin-inline: calc(-1 * clamp(24px, 3vw, 40px));
    padding-inline: clamp(24px, 3vw, 40px);
    background: #000;
    color: #fff;
    border-bottom-color: transparent;
    outline: none;
  }

  .pricing-line:hover h3,
  .pricing-line:hover p,
  .pricing-line:hover .pricing-line__index,
  .pricing-line:hover .pricing-line__price small {
    color: #fff;
  }

  .pricing-line:hover code {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }
}

.pricing-line:focus-visible {
  margin-inline: calc(-1 * clamp(24px, 3vw, 40px));
  padding-inline: clamp(24px, 3vw, 40px);
  background: #000;
  color: #fff;
  border-bottom-color: transparent;
  outline: none;
}

.pricing-line:focus-visible h3,
.pricing-line:focus-visible p,
.pricing-line:focus-visible .pricing-line__index,
.pricing-line:focus-visible .pricing-line__price small {
  color: #fff;
}

.pricing-line:focus-visible code {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.pricing-line:active {
  background: rgba(0, 0, 0, 0.05);
}

.pricing-line__main {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
}

.pricing-line__index {
  padding-top: 6px;
  color: rgba(0, 0, 0, 0.4);
  font-family: var(--font-mono);
  font-size: 9px;
}

.pricing-line h3 {
  font-size: 22px;
  font-weight: 620;
  letter-spacing: -0.03em;
}

.pricing-line p {
  max-width: 46ch;
  margin-top: 8px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1.6;
}

.pricing-line code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.07);
  color: var(--ink);
  font-size: 0.85em;
}

.pricing-line__price {
  text-align: right;
}

.pricing-line__price strong {
  display: block;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 560;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pricing-line__price small {
  display: block;
  margin-top: 6px;
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pricing-line--agency .pricing-line__price strong {
  font-size: 20px;
  padding-top: 8px;
}

.pricing-receipt__tear {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: radial-gradient(circle at 50% 100%, var(--mn-panel) 0 6px, transparent 7px) 0 0 / 20px 12px repeat-x;
}

/* ────────────────────────────────────────────────────────────────────────
   Responsive — new sections
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .bench-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 20px;
  }

  .bench-row--head {
    display: none;
  }

  .bench-official {
    grid-column: span 2;
  }

  .intent-engineering__core,
  .path-grid,
  .extract-panel,
  .pricing-layout {
    grid-template-columns: 1fr;
  }

  .intent-engineering__define,
  .extract-source {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .path-card--quick {
    margin-top: 0;
  }

  .pricing-copy {
    position: static;
  }
}

@media (max-width: 760px) {
  .bench-foot {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .bench-row {
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }

  .bench-official {
    grid-column: span 1;
  }

  .manifesto-band__track {
    gap: 28px;
    padding: 24px 0;
  }

  .statement {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 0;
  }

  .intent-engineering__row {
    grid-template-columns: 1fr;
  }

  .intent-engineering__row--head {
    display: none;
  }

  .intent-engineering__row dt {
    padding-bottom: 4px;
  }

  .intent-engineering__row dd {
    padding-top: 10px;
    padding-bottom: 14px;
  }

  .intent-engineering__row dd::before {
    content: "Prompt engineering";
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .intent-engineering__row dd.is-whole::before {
    content: "Intent engineering";
    color: rgba(255, 255, 255, 0.7);
  }

  .proof-ladder {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 6px;
  }

  .extract-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .extract-contract__head,
  .extract-contract__foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .extract-row {
    grid-template-columns: 1fr;
  }

  .extract-row__badge {
    grid-row: auto;
  }

  .extract-row--open {
    margin-inline: 0;
    padding-inline: 0;
    background: none;
  }

  .extract-terms {
    grid-template-columns: 1fr;
  }

  .extract-term--wide {
    grid-column: span 1;
  }

  .pricing-section {
    padding: clamp(52px, 12vw, 80px) 0;
  }

  .pricing-layout {
    gap: clamp(32px, 7vw, 48px);
  }

  .pricing-copy h2 {
    margin-top: 14px;
    font-size: clamp(36px, 10vw, 54px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .pricing-lede {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.55;
  }

  .pricing-laws {
    margin: 24px 0 0;
  }

  .pricing-laws li {
    padding: 12px 0 12px 38px;
    font-size: 13px;
    line-height: 1.5;
  }

  .pricing-laws li span {
    top: 15px;
    font-size: 8.5px;
  }

  .pricing-receipt-shell {
    padding: 6px;
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
  }

  .pricing-receipt {
    border-radius: 15px;
  }

  .pricing-receipt__head {
    padding: 18px 16px 14px;
    gap: 12px;
  }

  .pricing-receipt__brand {
    font-size: 18px;
  }

  .pricing-receipt__sub {
    font-size: 8px;
    letter-spacing: 0.1em;
  }

  .pricing-receipt__no {
    font-size: 9px;
  }

  .pricing-lines {
    padding: 0 16px 24px;
  }

  .pricing-line {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
    min-height: 48px;
  }

  .pricing-line:focus-visible {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .pricing-line__main {
    grid-template-columns: 28px 1fr;
    gap: 10px;
  }

  .pricing-line__index {
    font-size: 8.5px;
    padding-top: 4px;
  }

  .pricing-line h3 {
    font-size: 18px;
    line-height: 1.2;
  }

  .pricing-line p {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    max-width: none;
  }

  .pricing-line__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-left: 38px;
    text-align: left;
    margin-top: 2px;
  }

  .pricing-line__price strong {
    font-size: 26px;
    line-height: 1;
  }

  .pricing-line__price small {
    font-size: 8.5px;
    letter-spacing: 0.1em;
    margin-top: 0;
    white-space: nowrap;
  }

  .pricing-line--agency .pricing-line__price strong {
    font-size: 16px;
    padding-top: 0;
  }

  .hero__ribbon {
    height: 150px;
  }
}

@media (max-width: 400px) {
  .pricing-laws li {
    padding-left: 30px;
  }

  .pricing-laws li span {
    font-size: 8px;
  }

  .pricing-receipt-shell {
    padding: 4px;
    border-radius: 16px;
  }

  .pricing-receipt {
    border-radius: 13px;
  }

  .pricing-receipt__head {
    padding: 14px 12px 10px;
  }

  .pricing-lines {
    padding: 0 12px 18px;
  }

  .pricing-line__main {
    grid-template-columns: 22px 1fr;
    gap: 8px;
  }

  .pricing-line__price {
    padding-left: 30px;
  }

  .pricing-line:focus-visible {
    margin-inline: -12px;
    padding-inline: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto-band__track,
  .path-card__badge i,
  .extract-source__label i,
  .bench-slot i {
    animation: none !important;
  }

  :scope.js .statement,
  :scope.js .extract-row {
    opacity: 1;
    animation: none !important;
  }

  .proof-ladder li::before {
    transition: none;
  }

  .hero__copy,
  .hero__shell,
  .hero__ribbon,
  .hero__index,
  .image-stream {
    animation: none !important;
  }

  .hero-ribbon,
  .manifesto-field__canvas {
    transition: none;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Hero — centered, prompt-first
   ──────────────────────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.open-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  min-height: 100dvh;
}

.hero {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(6.5rem, 11.5vh, 9.5rem);
  padding-bottom: clamp(2.25rem, 4.5vh, 3.75rem);
  perspective: 1600px;
  perspective-origin: 50% 50%;
}

.hero__field {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}

.hero-field,
.hero-field__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-field {
  opacity: 0;
  transition: opacity 900ms var(--ease);
}

.hero-field.is-ready {
  opacity: 1;
}

.hero-field__fallback {
  opacity: 0;
  background:
    radial-gradient(circle at 68% 46%, rgba(255, 255, 255, 0.08), transparent 42%),
    #000;
}

.hero__field[data-render-mode="fallback"] .hero-field__fallback {
  opacity: 1;
}

.hero__field[data-render-mode="webgl"]::before {
  content: "";
  position: absolute;
  left: 68%;
  top: 46%;
  width: min(72vw, 920px);
  height: min(72vw, 920px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  opacity: 0.08;
  filter: blur(120px);
  pointer-events: none;
}

@media (max-width: 768px) {
  .hero__field[data-render-mode="webgl"]::before {
    left: 50%;
    top: 42%;
  }
}

.open-stage:has([data-hero-field][data-render-mode="webgl"]) .hero::before {
  opacity: 0;
}

.hero::before {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.075), transparent 55%),
    radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.03), transparent 44%);
}

.hero__shell--centered {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
}

.hero[data-hero-intro] {
  --shutter-hold: 920ms;
}

.hero__copy--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1080px);
  margin-inline: auto;
  padding-block: 0;
  padding-bottom: 0;
  text-align: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 50px -30px rgba(0, 0, 0, 0.9);
  text-decoration: none;
  transition: border-color 240ms ease, background 240ms ease;
}

.hero__badge:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.05);
}

.hero__badge-mark {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #fff, #5a5a5a 45%, #fff 100%);
  mask: radial-gradient(circle at 50% 50%, transparent 6px, #000 7px);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 6px, #000 7px);
}

.hero__badge-text {
  display: grid;
  gap: 2px;
  text-align: left;
}

.hero__badge-text b {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.hero__badge-text small {
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__badge-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__badge-live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  animation: status-pulse 2.2s ease-in-out infinite;
}

.hero__title--centered {
  max-width: min(100%, 12em);
  margin-top: 0;
  margin-bottom: clamp(10px, 1.4vh, 16px);
  color: #fff;
  font-size: clamp(54px, 8vw, 118px);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 0.92;
  text-transform: uppercase;
}

.hero__title--centered .gradient-text {
  display: block;
  color: #fff;
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
}

.hero__subhead {
  max-width: min(100%, 38em);
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: clamp(14px, 2vh, 20px);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.015em;
  text-align: center;
}

.shutter-line {
  display: block;
}

.shutter-word {
  display: inline-block;
  white-space: nowrap;
}

.shutter-char {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding-inline: 0.03em;
  color: #fff;
  animation: shutter-glyph 0.8s ease both;
  animation-delay: calc(var(--i) * 40ms + 300ms);
}

.shutter-char::before,
.shutter-char::after,
.shutter-char__mid::before {
  position: absolute;
  inset: 0;
  color: #fff;
  pointer-events: none;
}

.shutter-char::before,
.shutter-char::after {
  content: attr(data-char);
}

.shutter-char::before {
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  animation: shutter-slice-ltr 0.7s ease-in-out both;
  animation-delay: calc(var(--i) * 40ms);
}

.shutter-char::after {
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation: shutter-slice-ltr 0.7s ease-in-out both;
  animation-delay: calc(var(--i) * 40ms + 200ms);
}

.shutter-char__mid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.shutter-char__mid::before {
  content: attr(data-char);
  clip-path: polygon(0 35%, 100% 35%, 100% 65%, 0 65%);
  animation: shutter-slice-rtl 0.7s ease-in-out both;
  animation-delay: calc(var(--i) * 40ms + 100ms);
}

:scope.js [data-reveal][data-shutter-text]:not(.is-visible) .shutter-char,
:scope.js [data-reveal][data-shutter-text]:not(.is-visible) .shutter-char::before,
:scope.js [data-reveal][data-shutter-text]:not(.is-visible) .shutter-char::after,
:scope.js [data-reveal][data-shutter-text]:not(.is-visible) .shutter-char__mid::before {
  animation-play-state: paused;
}

:scope.js .hero[data-hero-intro] .shutter-char {
  animation-delay: calc(var(--i) * 40ms + 300ms + var(--shutter-hold));
}

:scope.js .hero[data-hero-intro] .shutter-char::before {
  animation-delay: calc(var(--i) * 40ms + var(--shutter-hold));
}

:scope.js .hero[data-hero-intro] .shutter-char::after {
  animation-delay: calc(var(--i) * 40ms + 200ms + var(--shutter-hold));
}

:scope.js .hero[data-hero-intro] .shutter-char__mid::before {
  animation-delay: calc(var(--i) * 40ms + 100ms + var(--shutter-hold));
}

:scope.js .hero[data-hero-intro] .hero__start,
:scope.js .hero[data-hero-intro] .hero__actions--centered {
  animation: prompt-rise 880ms var(--ease) both;
}

@keyframes prompt-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 84px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes helix-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes shutter-glyph {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes shutter-slice-ltr {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes shutter-slice-rtl {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.hero__description--centered {
  max-width: 560px;
  margin-top: 26px;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
}

.hero__prompt--card {
  width: min(100%, 780px);
  max-width: 780px;
  margin-inline: auto;
  margin-top: 0;
}

.hero__prompt-field--card {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: 20px;
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 60%),
    rgba(8, 8, 8, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.03),
    0 50px 120px -50px rgba(0, 0, 0, 1);
  text-align: left;
}

.hero__prompt-field--card:focus-within {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 5px rgba(255, 255, 255, 0.045),
    0 50px 120px -50px rgba(0, 0, 0, 1);
}

.hero__prompt-field--card .hero__prompt-input {
  min-height: 116px;
  max-height: 300px;
  padding: 20px 22px 8px;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
}

.hero__starters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 28px;
  margin-top: 28px;
  padding: 0;
}

.hero__starters-label {
  display: none;
}

.hero__starter-chip {
  cursor: pointer;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.76);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 450;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

/* The label crossfades like ghost text while the chip itself holds still. */
.hero__starter-chip__label {
  display: block;
  transition: opacity 1100ms var(--ease), filter 1100ms var(--ease), transform 1100ms var(--ease);
}

.hero__starter-chip.is-ghosting .hero__starter-chip__label {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-3px);
}

.hero__starter-chip:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .hero__starter-chip__label {
    transition: none;
  }
}

.hero__starter-chip:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.hero__starter-chip.is-active {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.hero__prompt-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 12px;
}

.hero__prompt-repo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.hero__prompt-repo:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.hero__prompt-repo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.hero__prompt-repo-mark {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hero__prompt-bar {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.hero__prompt-bar .hero__prompt-repo {
  min-height: 28px;
  padding: 0 12px 0 10px;
  font-size: 11px;
}

/* Starter chips sit on the prompt bar, on the same baseline as the repo badge. */
.hero__prompt-bar .hero__starters {
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 0;
}

.hero__prompt-bar .hero__starter-chip {
  min-height: 28px;
  padding: 0 12px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.12);
}

.hero__prompt-bar .hero__starter-chip:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.hero__prompt-bar .hero__prompt-repo-mark {
  width: 14px;
  height: 14px;
}

.hero__prompt-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.hero__prompt-tool svg {
  width: 14px;
  height: 14px;
}

.hero__prompt-tool:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.hero__prompt-tool:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Dictation running: the mic reads as live, not merely hovered. */
.hero__prompt-tool[data-listening] {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  animation: mic-pulse 1.5s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
  }
}

.hero__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0 12px 12px;
  list-style: none;
}

.hero__attachments li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 4px 6px 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
}

.hero__attachments span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero__attachments small {
  color: rgba(255, 255, 255, 0.42);
}

.hero__attachments button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.hero__attachments button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.repo-picker {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 60%),
    rgba(8, 8, 8, 0.9);
  backdrop-filter: blur(16px);
  text-align: left;
}

.repo-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.repo-picker__title {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.repo-picker__close {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.repo-picker__close:hover {
  color: #fff;
}

.repo-picker__body {
  padding: 12px 14px 14px;
}

.repo-picker__status {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.5;
}

.repo-picker__status a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.repo-picker__filter {
  width: 100%;
  height: 34px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font: inherit;
  font-size: 13px;
}

.repo-picker__filter:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
}

.repo-picker__list {
  display: grid;
  gap: 4px;
  max-height: 232px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.repo-picker__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.repo-picker__row:hover,
.repo-picker__row:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.repo-picker__row strong {
  font-weight: 500;
}

.repo-picker__row em {
  color: rgba(255, 255, 255, 0.4);
  font-style: normal;
  font-size: 11px;
}

.repo-picker__row[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.hero__prompt-bar .hero__prompt-submit {
  margin-left: auto;
  min-height: 28px;
  padding-inline: 12px;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.hero__prompt-bar .hero__prompt-submit .button__arrow {
  font-size: 11px;
}

/* Build-mode tabs sit on top of the composer card. The row overlaps the card
   border by 1px and the selected tab repeats the card's own surface, blur, and
   border, so the two read as one piece of glass. */
.hero__modes {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 -1px;
  padding: 0;
  border: 0;
  min-inline-size: auto;
}

.hero__mode-tab {
  position: relative;
  cursor: pointer;
}

.hero__mode-tab input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.hero__mode-tab span {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 22px 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.hero__mode-tab:hover span {
  color: rgba(255, 255, 255, 0.78);
}

.hero__mode-tab input:checked + span {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(6, 6, 6, 0.78);
  backdrop-filter: blur(16px);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Masks the card's top border where the selected tab meets it. Both surfaces
   are translucent, so the line would otherwise read through the overlap. */
.hero__mode-tab input:checked + span::after {
  content: "";
  position: absolute;
  inset: auto 1px -1px;
  height: 2px;
  background: var(--mn-ink);
}

.hero__mode-tab input:focus-visible + span {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  color: rgba(230, 230, 230, 0.42);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__trust b {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.hero__trust em {
  margin-inline: 8px;
  color: rgba(255, 255, 255, 0.25);
  font-style: normal;
}

.hero__trust .text-action {
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__ribbon {
  height: var(--ribbon-h);
}

.image-stream__card:not(.image-stream__mark) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(1.16) contrast(1.05) brightness(1.03);
  pointer-events: none;
}

.image-stream__mark {
  z-index: 4;
  --ish-w: 13cqw;
  --ish-ar: 1.05;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.55cqw, 8px);
  padding: clamp(12px, 1.4cqw, 20px);
  background: var(--mn-ink);
  color: #fff;
  text-align: center;
}

.image-stream:not([data-ready]) .image-stream__mark {
  top: 48%;
}

.image-stream__mark p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.72cqw, 9px);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.image-stream__mark strong {
  font-size: clamp(13px, 1.7cqw, 20px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.image-stream__mark-logo {
  display: block;
  width: clamp(36px, 5.2cqw, 64px);
  height: auto;
  margin-top: clamp(2px, 0.35cqw, 6px);
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}

.image-stream.is-paused .image-stream__card {
  animation-play-state: paused;
}

@media (max-width: 760px) {
  .hero {
    padding-top: 6.25rem;
    padding-bottom: 0;
  }

  .system-section {
    --ribbon-h: 160px;
  }

  .hero__badge {
    gap: 10px;
    padding: 6px 10px 6px 6px;
  }

  .hero__badge-text small,
  .hero__badge-live {
    display: none;
  }

  .hero__title--centered {
    max-width: min(100%, 10em);
    font-size: clamp(36px, 11vw, 52px);
  }

  .hero__subhead {
    font-size: 15px;
    padding-inline: 12px;
    margin-bottom: 22px;
  }

  .hero__prompt-field--card .hero__prompt-input {
    min-height: 100px;
    padding: 16px 16px 6px;
  }

  .hero__starters {
    gap: 8px 14px;
    margin-top: 16px;
  }

  .hero__starter-chip {
    font-size: 10px;
    padding: 6px 12px;
    min-height: 32px;
  }

  .hero__prompt-bar {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  /* Narrow bars cannot hold repo badge, chips, and Build on one line, so the
     chips wrap to their own row underneath instead of squeezing the CTA. */
  .hero__prompt-bar .hero__starters {
    order: 3;
    flex: 1 0 100%;
    margin-top: 2px;
  }

  .hero__prompt-bar .hero__starter-chip {
    min-height: 28px;
    font-size: 10px;
    padding: 0 10px;
  }

  .hero__prompt-repo--icon {
    min-height: 32px;
    width: 32px;
  }

  .hero__prompt-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
  }

  .hero__prompt-tool::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
  }

.hero__prompt-tool svg {
  width: 14px;
  height: 14px;
}

.hero__prompt-tool:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.hero__prompt-tool:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Dictation running: the mic reads as live, not merely hovered. */
.hero__prompt-tool[data-listening] {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  animation: mic-pulse 1.5s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
  }
}

.hero__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0 12px 12px;
  list-style: none;
}

.hero__attachments li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 4px 6px 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
}

.hero__attachments span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero__attachments small {
  color: rgba(255, 255, 255, 0.42);
}

.hero__attachments button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.hero__attachments button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.repo-picker {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 60%),
    rgba(8, 8, 8, 0.9);
  backdrop-filter: blur(16px);
  text-align: left;
}

.repo-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.repo-picker__title {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.repo-picker__close {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.repo-picker__close:hover {
  color: #fff;
}

.repo-picker__body {
  padding: 12px 14px 14px;
}

.repo-picker__status {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.5;
}

.repo-picker__status a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.repo-picker__filter {
  width: 100%;
  height: 34px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font: inherit;
  font-size: 13px;
}

.repo-picker__filter:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
}

.repo-picker__list {
  display: grid;
  gap: 4px;
  max-height: 232px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.repo-picker__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.repo-picker__row:hover,
.repo-picker__row:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.repo-picker__row strong {
  font-weight: 500;
}

.repo-picker__row em {
  color: rgba(255, 255, 255, 0.4);
  font-style: normal;
  font-size: 11px;
}

.repo-picker__row[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.hero__prompt-bar .hero__prompt-submit {
    flex: 0 0 auto;
    width: auto;
  }

  .hero__trust em,
  .hero__trust b {
    display: none;
  }

  .hero__trust > span {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
  }

  .image-stream {
    --ish-w: 62cqw;
    height: clamp(22rem, 70vh, 34rem);
  }

  .image-stream__mark {
    --ish-w: 32cqw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-stream,
  .hero__shell,
  .hero__ribbon,
  .hero__index {
    animation: none !important;
  }

  .image-stream__card {
    animation-play-state: paused;
  }

  .hero__badge-live i {
    animation: none;
  }

  .hero[data-hero-intro] {
    --shutter-hold: 0ms;
  }

  .hero__prompt--card,
  .hero-ribbon.is-ready,
  .hero-ribbon__fallback,
  .hero-field.is-ready {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .shutter-char {
    animation: none !important;
    opacity: 1;
    filter: none;
  }

  .shutter-char::before,
  .shutter-char::after,
  .shutter-char__mid {
    display: none;
  }
}

/* ── Hero field: renders edge-to-edge without vignette border ── */

/* ── Kinetic section headings ──────────────────────────────────────────────
   Every section heading gets its own reveal from the same family as the hero
   shutter: characters or lines arriving through a mask, one gesture per
   section so the page never repeats itself. */

[data-kinetic] {
  position: relative;
}

.kt-line {
  display: block;
}

.kt-word {
  position: relative;
  display: inline-block;
}

.kt-char {
  display: inline-block;
  backface-visibility: hidden;
}

/* SplitText clips masks at the padding box, so the padding here is what keeps
   ascenders and descenders from being shaved off mid-reveal. */
.kt-word-mask,
.kt-line-mask {
  display: inline-block;
  padding: 0.12em 0.03em 0.2em;
  margin: -0.12em -0.03em -0.2em;
}

.kt-line-mask {
  display: block;
}

/* blade — one light edge sweeps the line, characters land behind it. */
.kt-blade {
  position: absolute;
  top: -0.06em;
  bottom: 0.02em;
  left: 0;
  z-index: 2;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95) 45%, transparent);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.45);
  opacity: 0;
  pointer-events: none;
}

/* redact — a solid bar wipes across each word and the word is there when it
   leaves, the way a redaction lifts off a document. */
.kt-bar {
  position: absolute;
  inset: -0.04em -0.05em 0.04em;
  z-index: 2;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* fuse — each glyph is cut in half and the halves slide in from opposite
   sides to meet on the baseline. */
.kt-fuse {
  position: relative;
}

.kt-fuse__ghost {
  visibility: hidden;
}

.kt-fuse__half {
  position: absolute;
  inset: 0;
}

.kt-fuse__half--top {
  clip-path: polygon(0 0, 100% 0, 100% 52%, 0 52%);
}

.kt-fuse__half--bot {
  clip-path: polygon(0 48%, 100% 48%, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .kt-blade,
  .kt-bar {
    display: none;
  }

  .kt-char,
  .kt-line,
  .kt-fuse__half {
    opacity: 1;
    transform: none;
  }
}

/* ── FAQ Section ──────────────────────────────────────────────────────────── */

.faq-section {
  position: relative;
  z-index: 1;
  padding-block: clamp(110px, 14vw, 190px);
  border-top: 1px solid transparent;
  background: var(--mn-deep);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.faq-item {
  padding: 32px 34px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 180ms ease, background 180ms ease;
}

.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

.faq-item h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.faq-item p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

@media (max-width: 760px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}




/* ───────────────────────────────────────────────────────────────────────────
   MCP SERVERS (new) — catalog of the three independently callable servers.
   ─────────────────────────────────────────────────────────────────────────── */
.mcp-catalog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

@media (max-width: 900px) {
  .mcp-catalog {
    grid-template-columns: 1fr;
  }
}

.mcp-server {
  background: var(--surface-soft);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 300ms var(--ease), border-color 300ms;
}

.mcp-server:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.25);
}

.mcp-server__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mcp-server__head h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 6px;
}

.mcp-server__head h3 span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-left: 6px;
  vertical-align: middle;
}

.mcp-server__endpoint {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  word-break: break-all;
}

.mcp-server__blurb {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.mcp-server__tools {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mcp-server__tools code {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

.mcp-server__scopes {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mcp-server__scopes code {
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
  margin-left: 6px;
}

.mcp-install {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  padding: 24px 28px;
  margin-bottom: 32px;
}

.mcp-install__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 16px;
}

.mcp-install__head strong {
  font-size: 15px;
  color: #fff;
}

.mcp-install__head span {
  font-size: 13px;
  color: var(--muted);
}

.mcp-install__code {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.32);
  overflow-x: auto;
}

.mcp-install__code code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  white-space: pre;
}

.mcp-servers-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ───────────────────────────────────────────────────────────────────────────
   VOLITION IN DEPTH (new) — decision flow plus the properties it guarantees.
   ─────────────────────────────────────────────────────────────────────────── */
.vol-deep-flow {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 40px;
  overflow-x: auto;
  scrollbar-width: none;
}

.vol-deep-flow::-webkit-scrollbar {
  display: none;
}

@media (max-width: 900px) {
  .vol-deep-flow {
    flex-direction: column;
    align-items: stretch;
  }

  .vol-deep-flow .lifecycle-arrow {
    display: none;
  }
}

.vol-deep-step {
  flex: 1;
  min-width: 160px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-top: 2px solid var(--muted);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.vol-deep-step__index {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 12px;
}

.vol-deep-step strong {
  font-family: var(--font-display);
  font-size: 20px;
  color: #fff;
  margin-bottom: 6px;
}

.vol-deep-step small {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.vol-deep-flow .lifecycle-arrow {
  align-self: center;
}

.vol-deep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 900px) {
  .vol-deep-grid {
    grid-template-columns: 1fr;
  }
}

.vol-deep-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: transform 300ms var(--ease), border-color 300ms;
}

.vol-deep-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.25);
}

.vol-deep-card__index {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 14px;
}

.vol-deep-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 10px;
}

.vol-deep-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.vol-deep-card p code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
}

.vol-deep-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Connector between flow steps. The lean page has no lifecycle pipeline, so the
   hairline the Volition flow leans on is defined with the flow itself. */
.vol-deep-flow .lifecycle-arrow {
  display: block;
  width: 24px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--line);
}

/* Volition start — one clear next step after the builder. */
.volition-start {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.05), transparent 38%),
    var(--mn-deep);
}
.volition-start__shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: end;
}
.volition-start__title {
  margin: 1rem 0 1.5rem;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 7.5vw, 7.5rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.volition-start__body {
  max-width: 44rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
}
.volition-start__action {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(20px);
}
.volition-start__action p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.55;
}
.volition-start__action .volition-start__kicker {
  color: #fff;
  font-weight: 600;
}
.volition-start__button {
  width: 100%;
  margin-top: 0.5rem;
  justify-content: center;
}
.volition-start__arena {
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  text-decoration: none;
}
.volition-start__arena:hover,
.volition-start__arena:focus-visible {
  color: #fff;
}
@media (max-width: 760px) {
  .volition-start__shell {
    grid-template-columns: 1fr;
  }
  .volition-start__title {
    font-size: clamp(3rem, 15vw, 5.5rem);
  }
}

/* ── Volition proof: one denial, the attack receipt, and the way to try it.
   Monochrome like the rest of the page: the denial is the one inverted block. ── */
.vol-proof {
  --deny: #f4f4f4;
  position: relative;
  z-index: 1;
  /* clip, not hidden: hidden would make this a scroll container and stop the sticky backdrop. */
  overflow: clip;
  background: #000;
  isolation: isolate;
}

/* The backdrop is one screen tall and sticks while the section scrolls past:
   a HUD frame and a turning globe behind the proof. */
.vol-proof__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}



.vol-proof__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.vol-globe {
  position: absolute;
  top: 0;
  right: 0;
  width: 64%;
  height: 100%;
}

@media (max-width: 1080px) {
  .vol-globe {
    width: 100%;
    opacity: 0.75;
  }
}

.vol-proof__head {
  max-width: 900px;
}

.vol-demo__label,
.vol-proof__stats span,
.vol-proof__boundary {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.vol-proof__kicker {
  margin: 0 0 22px;
}

.vol-proof h2 {
  margin: 0;
  color: #f5f5f5;
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 80px);
  font-weight: 500;
  font-variation-settings: "wght" 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.vol-proof__head > p:last-child {
  max-width: 620px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 17px;
  line-height: 1.6;
}

.vol-demo {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 56px minmax(0, 1.35fr) 56px minmax(0, 0.9fr);
  align-items: center;
  margin: clamp(48px, 6vw, 80px) 0 0;
}

.vol-demo__panel {
  padding: 22px 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}

.vol-demo__label {
  margin: 0 0 14px;
  color: #f2f2f2;
  font-size: 13px;
  letter-spacing: 0.32em;
}

.vol-demo__note {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
}

.vol-demo__call {
  display: block;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.vol-demo__gate {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.06);
}

.vol-demo__rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-mono);
  font-size: 12px;
}

.vol-demo__rule span {
  color: rgba(255, 255, 255, 0.46);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 10px;
}

.vol-demo__rule code {
  color: #fff;
}

.vol-demo__verdict {
  margin: 14px 0;
  padding: 12px;
  background: var(--deny);
  color: #000;
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.18);
}

.vol-demo__log {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.vol-demo__log .is-denied {
  color: #fff;
  font-weight: 700;
}

.vol-demo__none {
  margin: 0 0 10px;
  color: #f2f2f2;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
}

/* The wire into Volition is live; the wire out is cut. */
.vol-demo__wire {
  position: relative;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}

.vol-demo__wire::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-right: 1px solid rgba(255, 255, 255, 0.7);
  transform: rotate(45deg);
}

.vol-demo__wire--cut {
  background: repeating-linear-gradient(90deg, var(--deny) 0 6px, transparent 6px 11px);
}

.vol-demo__wire--cut::after {
  content: "×";
  top: 50%;
  right: 50%;
  width: auto;
  height: auto;
  border: 0;
  color: var(--deny);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  background: #000;
  padding: 0 4px;
  transform: translate(50%, -50%);
}

.vol-demo figcaption {
  grid-column: 1 / -1;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 13px;
}

.vol-proof__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.vol-proof__stats > div {
  padding: 28px 28px 0 0;
}

.vol-proof__stats > div + div {
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.vol-proof__stats strong {
  display: block;
  color: #f6f6f6;
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.vol-proof__stats span {
  display: block;
  max-width: 280px;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  line-height: 1.7;
}

.vol-proof__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 28px;
  margin-top: clamp(44px, 5vw, 64px);
}

.vol-proof__boundary {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.38);
  font-size: 10px;
  letter-spacing: 0.18em;
  line-height: 1.7;
}

@media (max-width: 1080px) {
  .vol-demo {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    max-width: 620px;
  }

  .vol-demo__wire {
    justify-self: center;
    width: 1px;
    height: 40px;
  }

  .vol-demo__wire::after {
    top: auto;
    bottom: 0;
    right: -4px;
    transform: rotate(135deg);
  }

  .vol-demo__wire--cut {
    background: repeating-linear-gradient(180deg, var(--deny) 0 6px, transparent 6px 11px);
  }

  .vol-demo__wire--cut::after {
    top: 50%;
    right: 50%;
    bottom: auto;
    transform: translate(50%, -50%);
  }
}

@media (max-width: 720px) {
  .vol-proof__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .vol-proof__stats > div,
  .vol-proof__stats > div + div {
    padding: 24px 0;
    border-left: 0;
  }

  .vol-proof__stats > div + div {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Volition start — one clear next step after the builder. The Volition mark
   runs full-bleed across the top and fades into the page; the copy sits over
   its lower edge, under the wordmark, so the mark stays whole. */
.volition-start {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: 0 clamp(5rem, 10vw, 9rem);
  background: var(--mn-deep);
}

.volition-start__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  aspect-ratio: 1672 / 941;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 72%, transparent 100%);
}

.volition-start__backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.volition-start__shell {
  position: relative;
  /* Start just under the mark's tagline (about 80% down the frame). */
  padding-top: calc(100vw * 941 / 1672 * 0.8);
}
.volition-start__shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: end;
}
.volition-start__title {
  margin: 1rem 0 1.5rem;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 7.5vw, 7.5rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.volition-start__body {
  max-width: 44rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
}
.volition-start__action {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(20px);
}
.volition-start__action p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.55;
}
.volition-start__action .volition-start__kicker {
  color: #fff;
  font-weight: 600;
}
.volition-start__button {
  width: 100%;
  margin-top: 0.5rem;
  justify-content: center;
}
.volition-start__arena {
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  text-decoration: none;
}
.volition-start__arena:hover,
.volition-start__arena:focus-visible {
  color: #fff;
}
@media (max-width: 760px) {
  /* Phones crop the frame's sides so the mark is large enough to read. */
  .volition-start__backdrop {
    aspect-ratio: auto;
    height: 92vw;
  }

  .volition-start__shell {
    grid-template-columns: 1fr;
    padding-top: calc(92vw * 0.8);
  }
  .volition-start__title {
    font-size: clamp(3rem, 15vw, 5.5rem);
  }
}


/* ══════════════════════════════════════════════════════════════════════

/* Hero: sit lower on the field, with a larger single action. */
.hero__shell--centered {
  padding-top: clamp(56px, 16vh, 180px);
}

.hero__lets-build {
  min-width: min(440px, 100%);
  min-height: 5rem;
  padding: 1.25rem 3rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  gap: 0.9rem;
}

@media (max-width: 760px) {
  .hero__lets-build {
    width: 100%;
    min-height: 4.5rem;
  }
}

/* ── Built for business owners: real apps, one card at a time ──────────
   Native horizontal scroll with snap points; the buttons step one card. */
.built-section {
  overflow: clip;
}

.built-section .section-heading {
  margin-bottom: 0;
}

.built-carousel {
  margin-top: clamp(40px, 5vw, 72px);
}

.built-carousel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.built-carousel__bar > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.built-carousel__buttons {
  display: flex;
  gap: 10px;
}

.built-carousel__button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

.built-carousel__button:hover:not(:disabled),
.built-carousel__button:focus-visible {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}

.built-carousel__button:disabled {
  opacity: 0.3;
  cursor: default;
}

.built-carousel__track {
  --edge: max(16px, calc((100vw - 1120px) / 2));
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0 var(--edge) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
  list-style: none;
}

.built-carousel__track::-webkit-scrollbar {
  display: none;
}

.built-card {
  flex: 0 0 min(80vw, 460px);
  scroll-snap-align: start;
}

.built-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.built-card figure {
  margin: 0;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: #0b0b0b;
}

.built-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 600ms var(--ease), filter 600ms var(--ease);
}

/* Greyscale to sit in the page; full colour under the pointer. Touch screens
   have no hover, so they always get colour. */
@media (hover: hover) {
  .built-card img {
    filter: grayscale(0.9) brightness(0.86);
  }

  .built-card a:hover img,
  .built-card a:focus-visible img {
    filter: none;
    transform: scale(1.02);
  }
}

.built-card a:focus-visible {
  outline: none;
}

.built-card a:focus-visible figure {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.built-card__trade {
  margin: 18px 0 6px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.built-card h3 {
  margin: 0;
  color: #f5f5f5;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.built-card h3 + p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
}

.built-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-top: clamp(36px, 4.5vw, 56px);
}

@media (max-width: 860px) {
}

@media (prefers-reduced-motion: reduce) {
  .built-card img {
    transition: none;
  }
}

/* Showcase: everything on the centre line. */
.built-carousel__bar {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.built-carousel__buttons {
  justify-content: center;
}

.built-carousel__track {
  justify-content: safe center;
}

.built-card {
  text-align: center;
}

.built-cta {
  justify-content: center;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════
   ONE PAGE, ONE STORY
   The page reads as ten chapters hanging off one thread down its centre.
   Every chapter head is the same five things in the same place: the thread
   coming down from the chapter before, a numbered node, a label, a title at
   the one section size, and one lead paragraph. Sections carry no fill or
   border of their own, so the page background runs from the hero to the
   footer without a seam, and every card uses the same corner and edge.
   ══════════════════════════════════════════════════════════════════════ */
:scope {
  --section-space: clamp(112px, 12vw, 200px);
  --section-title: clamp(48px, 7.2vw, 104px);
  --block-gap: clamp(40px, 5vw, 64px);
  --panel-radius: 18px;
  --panel-line: rgba(255, 255, 255, 0.12);
  --panel-fill: rgba(255, 255, 255, 0.025);
  --thread: rgba(255, 255, 255, 0.34);
}

/* One background, top to bottom: no section paints its own band or rule. */
main > section.section:not(.hero) {
  border-top: 0;
  background: transparent;
}

main > section.section:not(.hero):not(.volition-start):not(.final-section) {
  padding-block: var(--section-space);
}

main > .final-section {
  padding-top: var(--section-space);
}

/* The hero's light dissolves into the page instead of ending on a line. */
.hero__field {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}

/* The product marquee is a line of type across the page, not a band. */
main > .proof-ribbon {
  border-block: 0;
  background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* Collapsed to no height, it only spent a WebGL loop off screen. */
main > .hero__ribbon {
  display: none;
}

/* ── Chapter heads ────────────────────────────────────────────────────── */
main .chapter {
  position: relative;
  margin-inline: auto;
  text-align: center;
}

main .chapter .eyebrow {
  justify-content: center;
  color: rgba(235, 235, 235, 0.72);
  font-size: 11px;
  letter-spacing: 0.26em;
}

/* The node carries the chapter's place; the eyebrow's rule would repeat it. */
main .chapter .eyebrow > span {
  display: none;
}

main .section-heading h2:not(.volition-start__title),
main .final-cta h2 {
  font-size: var(--section-title);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 0.96;
  text-transform: none;
}

main .chapter h2 {
  margin-inline: auto;
  text-wrap: balance;
}

.chapter__node {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 28px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  background: var(--bg);
  color: #f4f4f5;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  box-shadow:
    0 0 0 6px var(--bg),
    0 0 42px rgba(255, 255, 255, 0.08);
}

/* The thread from the chapter above, drawn down into the node as it arrives. */
.chapter__node::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  width: 1px;
  height: calc(var(--section-space) - 20px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--thread));
  transform: translateX(-50%) scaleY(1);
  transform-origin: 50% 0;
  transition: transform 1.2s var(--ease) 0.1s;
  pointer-events: none;
}

:scope.js .chapter:not(.is-visible) .chapter__node::before {
  transform: translateX(-50%) scaleY(0);
}

/* Chapter 01 picks up the hero's thread, so its line is lit from the top. */
#proof .chapter__node::before {
  background: var(--thread);
}

/* A beat inside a chapter: a lit point on the thread, no number. */
.chapter__node--beat {
  width: 11px;
  height: 11px;
  margin-bottom: 30px;
  border-color: transparent;
  background: #f4f4f5;
  box-shadow:
    0 0 0 6px var(--bg),
    0 0 26px rgba(255, 255, 255, 0.4);
}

/* The last node hands the thread to the closing card. */
main .chapter--end {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main .chapter--end .chapter__node {
  margin-bottom: 0;
}

main .chapter--end::after {
  content: "";
  width: 1px;
  height: clamp(36px, 5vw, 60px);
  background: linear-gradient(180deg, var(--thread), rgba(255, 255, 255, 0.14));
}

/* The thread starts under Let's build and runs out of the hero into 01. */
main .hero {
  position: relative;
}

.hero__thread {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: clamp(72px, 13vh, 150px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--thread));
  transform: translateX(-50%);
  pointer-events: none;
}

.chapter__foot {
  margin: var(--block-gap) 0 0;
  text-align: center;
}

/* ── One step component, used by ShipGate and Volition alike ─────────── */
main .vol-deep-flow {
  margin-bottom: var(--block-gap);
}

/* ── ShipGate: the receipt sits on the centre line under its steps ───── */
main .shipgate-section .proof-console {
  width: min(860px, 100%);
  margin-inline: auto;
}

/* ── The proof beat: the globe fades out with its section, and the
   actions under the demo sit on the centre line like the head above. ── */
main .vol-proof__backdrop {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
}

main .vol-proof__cta {
  justify-content: center;
}

main .vol-proof__boundary {
  text-align: center;
}

/* ── Volition's own call to action closes chapter 05 under its mark ─── */
main .volition-start__shell {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(32px, 4vw, 48px);
  text-align: center;
}

main .volition-start__copy {
  margin-bottom: 0;
}

main .volition-start__title {
  max-width: none;
  margin-inline: auto;
}

main .volition-start__action {
  width: min(100%, 560px);
  text-align: center;
}

/* ── Pricing: the four laws are a row of step cards over the receipt,
   the same shape as ShipGate's steps over its receipt. ── */
main .pricing-layout {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--block-gap);
}

main .pricing-copy {
  width: 100%;
}

main .pricing-laws {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  border-top: 0;
}

main .pricing-laws li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--muted);
  border-radius: var(--panel-radius);
  background: var(--surface-soft);
  text-align: center;
}

main .pricing-laws li span {
  position: static;
}

/* Both receipts sit in the same tray: 10px of glass around an 18px card. */
main .pricing-receipt-shell {
  width: min(860px, 100%);
  border-radius: 28px;
}

@media (max-width: 900px) {
  main .pricing-laws {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  main .pricing-laws {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Closing card: centred like every chapter head ───────────────────── */
main .final-cta {
  justify-content: center;
  text-align: center;
}

main .final-cta__content {
  margin-inline: auto;
}

main .final-cta .eyebrow,
main .final-cta__actions {
  justify-content: center;
}

main .final-cta__content > p {
  margin-inline: auto;
}

/* ── One card language: one corner, one edge, one fill ───────────────── */
main .vol-deep-card,
main .vol-deep-step,
main .intent-engineering__shell,
main .mcp-server,
main .mcp-install,
main .faq-item,
main .volition-start__action,
main .built-card figure,
main .pricing-receipt {
  border-radius: var(--panel-radius);
}

main .vol-deep-card,
main .intent-engineering__shell,
main .mcp-server,
main .mcp-install,
main .faq-item,
main .volition-start__action {
  border-color: var(--panel-line);
  background-color: var(--panel-fill);
}

main .final-cta {
  border-color: var(--panel-line);
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
}

/* ── Where you are in the story: a hairline under the header fills as you read ── */
@supports (animation-timeline: scroll()) {
  .site-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.62));
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: page-read linear both;
    animation-timeline: scroll(root block);
    pointer-events: none;
  }

  @keyframes page-read {
    to {
      transform: scaleX(1);
    }
  }
}

@media (max-width: 760px) {
  .chapter__node {
    width: 40px;
    height: 40px;
    margin-bottom: 22px;
    font-size: 10px;
  }

  main .chapter .eyebrow {
    font-size: 10px;
    letter-spacing: 0.22em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter__node::before,
  :scope.js .chapter:not(.is-visible) .chapter__node::before {
    transform: translateX(-50%);
    transition: none;
  }
}

}