:root {
  --navy-950: #040c17;
  --logo-navy: #010d1d;
  --navy-900: #071426;
  --navy-850: #0c1c31;
  --navy-800: #11263e;
  --ink: #0b1727;
  --muted: #607087;
  --line: #dbe1e9;
  --line-dark: rgba(255,255,255,.13);
  --paper: #f5f3ee;
  --white: #fff;
  --accent: #6879ff;
  --accent-soft: #e9ebff;
  --accent-2: #aeb8ff;
  --chief: #6f9bf6;
  --scribe: #7ea96e;
  --captain: #c56d51;
  --warm: #f1b98d;
  --radius: 22px;
  --shadow: 0 28px 70px rgba(7,20,38,.18);
  --shell: min(1240px, calc(100% - 44px));
  --tilt: perspective(1200px) rotateY(-6deg) rotateX(1.5deg);
  --tilt-mirror: perspective(1200px) rotateY(6deg) rotateX(1.5deg);
  --sec-y: clamp(52px, 5.5vw, 84px);
}

* { box-sizing: border-box; }
/* The sticky header is ~84px tall; without this, anchor scrolls bury the target's top
   edge underneath it. Every in-page anchor lands with the section flush below the header. */
main section[id] { scroll-margin-top: 84px; }
/* "See how context travels" lands here: the thesis strip sits at the top as a divider,
   with the Three Surfaces section in view below it. */
#context-travels { scroll-margin-top: 96px; }
html.smooth { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
.section-shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 999; padding: 10px 14px; border-radius: 10px; background: var(--white); color: var(--ink); }
.skip-link:focus { top: 16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: var(--logo-navy);
  backdrop-filter: none;
}
.nav-shell {
  width: var(--shell);
  min-height: 84px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; }
/* The hero slug, echoed at header scale: quiet white, "waves." in the accent. */
.brand-slug { color: rgba(255,255,255,.55); font-size: 14px; font-weight: 720; letter-spacing: -.01em; white-space: nowrap; }
.brand-slug b { color: var(--accent-2); font-weight: inherit; }
.brand-lockup { width: 285px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a { color: rgba(255,255,255,.72); font-size: 13px; font-weight: 650; text-decoration: none; transition: color .2s ease; }
.site-nav a:hover { color: var(--white); }
.site-nav .nav-cta { padding: 10px 16px; border-radius: 999px; background: var(--accent); color: var(--white); }
.site-nav .nav-cta:hover { color: var(--white); background: #7b8aff; }
.menu-toggle { display: none; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.08); color: var(--white); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(520px, 1.16fr);
  align-items: center;
  gap: 62px;
  padding-block: clamp(40px, 4.5vw, 68px) clamp(28px, 3.2vw, 46px);
}
.hero-copy { max-width: 580px; }
.eyebrow { margin: 0 0 18px; color: #53627a; font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.hero h1, .section-heading h2, .feature-copy h2, .attestation-copy h2, .asset-test blockquote, .cta-inner h2 {
  margin: 0;
  font-weight: 670;
  letter-spacing: -.057em;
  line-height: .98;
}
.hero h1 { font-size: clamp(54px, 6.2vw, 86px); }
.hero h1 span { color: var(--accent); }
.hero-dek { margin: 28px 0 0; color: #4b5b72; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.57; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; min-height: 49px; padding: 0 20px; justify-content: center; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 720; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--accent); color: var(--white); box-shadow: 0 13px 34px rgba(104,121,255,.28); }
.button-primary:hover { box-shadow: 0 17px 42px rgba(104,121,255,.36); }
.button-secondary { border-color: var(--line); background: var(--white); color: var(--ink); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 27px; }
.hero-proof span { color: #738094; font-size: 12px; font-weight: 660; }
.hero-proof span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }

.product-window { position: relative; overflow: hidden; margin: 0; border: 1px solid rgba(22,37,58,.17); border-radius: var(--radius); background: var(--navy-900); box-shadow: var(--shadow); }
.product-window img, .product-window video { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--navy-900); }
.product-window figcaption { padding: 13px 17px 15px; background: var(--white); color: #69778a; font-size: 12px; line-height: 1.5; }
/* A turned panel means the window is live. Flat means it is a still. Tune --tilt only. */
/* White figure bg so the media box's feathered bottom edge blends into the white caption. */
.video-window { transform-origin: center; background: #fff; }
/* A left-placed video must face the other way, so both columns lean toward the center. */
.attachment-grid .video-window { --tilt: var(--tilt-mirror); }
/* Titles the clip from under the media, on the white caption base, instead of floating over it. */
.window-label { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0; background: var(--white); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.window-label + figcaption { padding-top: 7px; }
.live-dot, .chief-dot, .captain-dot { width: 7px; height: 7px; border-radius: 50%; background: #58b87d; box-shadow: 0 0 0 4px rgba(88,184,125,.13); }
.chief-dot { background: var(--chief); box-shadow: 0 0 0 4px rgba(111,155,246,.15); }
.captain-dot { background: var(--captain); box-shadow: 0 0 0 4px rgba(197,109,81,.15); }
/* Own positioning context: .product-window's box includes the figcaption, so a
   bottom-anchored toggle would land on the caption text. This wraps the video alone. */
/* A video is a composited layer, so the figure's overflow:hidden does not clip its
   corners under the 3D tilt - Chrome leaves them square. Round and promote the media
   box itself so it clips the composited video. Top corners only; figcaption rounds the base. */
.window-media { position: relative; display: block; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; transform: translateZ(0); }
/* The composited box does not anti-alias its clip path under the tilt, so the slanted
   bottom edge stair-steps. A 1px mask feather smooths it; the feather reveals the figure
   background, set white here so the softened strip blends into the caption, not a dark line. */
.window-media { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 1px), transparent); }
.window-media video { border-radius: inherit; }
/* Video windows open on a black beat, then hard-cut to playback. The cover is
   CSS-default-on so black shows from first paint (before JS); .rolling drops it. */
.video-window .window-media { background: #000; }
.video-window .window-media::after { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(0,0,0,.985); pointer-events: none; }
.video-window .window-media.rolling::after { content: none; }
.video-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 5; min-width: 58px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(5,13,24,.78); color: var(--white); font-size: 11px; font-weight: 740; cursor: pointer; backdrop-filter: blur(10px); opacity: 0; transition: opacity .18s ease; }
.window-media:hover .video-toggle, .video-toggle:focus-visible { opacity: 1; }
/* No hover to reveal it on touch, so leave it showing. */
@media (hover: none) { .video-toggle { opacity: 1; } }

.foundation-band { padding: 6px 0 60px; }
.foundation-card { background: var(--white); border: 1px solid var(--line); border-radius: 27px; padding: 26px 34px 24px; box-shadow: 0 18px 48px rgba(7,20,36,.07); }
.foundation-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.foundation-grid article { padding: 14px 28px; border-right: 1px solid var(--line); }
.foundation-grid article:first-child { padding-left: 0; }
.foundation-grid article:last-child { padding-right: 0; border-right: 0; }
.foundation-grid article > span { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.foundation-grid h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.foundation-grid p { margin: 8px 0 0; color: #5d6b7d; font-size: 13px; line-height: 1.5; }
.asset-thesis { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: #35455c; text-align: center; font-size: clamp(17px, 2vw, 23px); font-weight: 560; letter-spacing: -.02em; }

.surfaces { padding-block: calc(var(--sec-y) - 32px) var(--sec-y); }
.section-heading { max-width: 780px; margin-bottom: 50px; }
.section-heading h2, .feature-copy h2, .attestation-copy h2, .cta-inner h2 { font-size: clamp(44px, 5.2vw, 70px); }
.section-heading > p:last-child, .split-heading > p { color: #5b6b7f; font-size: 18px; line-height: 1.65; }
.section-heading > p:last-child { max-width: 700px; margin: 24px 0 0; }
/* Same tracks as .attachment-grid below, so the paragraph's left edge lands on the
   context-modes card's left edge at every width; the 24px inset then seats it just
   right of the card's 22px rounded corner. */
.split-heading { max-width: none; display: grid; grid-template-columns: minmax(520px, 1.2fr) minmax(0, .8fr); align-items: end; gap: 34px; }
.split-heading > p { margin: 0 0 0 24px; }
.surface-grid { display: grid; gap: 25px; }
.surface-card { position: relative; display: grid; grid-template-columns: minmax(260px, .75fr) minmax(480px, 1.25fr); align-items: center; gap: 34px; min-height: 370px; padding: 30px 34px; border: 1px solid var(--line); border-radius: 27px; background: var(--white); overflow: hidden; }
.surface-card > img { width: 100%; border: 1px solid rgba(19,34,54,.13); border-radius: 15px; box-shadow: 0 18px 48px rgba(7,20,36,.14); }
.surface-name { position: absolute; top: 22px; left: 34px; margin: 0; display: flex; align-items: baseline; gap: 8px; color: var(--accent); font-size: 13.5px; font-weight: 800; letter-spacing: .01em; }
.surface-kicker { color: var(--ink); text-transform: uppercase; letter-spacing: .11em; }
.bridge-name { color: var(--chief); }
.board-name { color: var(--scribe); }
.surface-copy h3 { margin: 0; font-size: clamp(31px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -.048em; }
.surface-copy > p:not(.surface-name) { margin: 18px 0 0; color: #5d6b7d; font-size: 16px; line-height: 1.62; }
.platform-badges { display: inline-flex; align-items: center; gap: 6px; align-self: center; margin-left: 2px; color: #9aa6b5; }
.platform-badges svg { display: block; }
.surface-copy > p.surface-platforms { margin: 12px 0 0; color: #8a97a8; font-size: 12.5px; font-weight: 660; letter-spacing: .02em; }
.text-link { display: inline-flex; gap: 8px; margin-top: 21px; color: var(--ink); font-size: 13px; font-weight: 750; text-decoration: none; border-bottom: 1px solid #cbd2dc; padding-bottom: 3px; }
.text-link:hover { color: var(--accent); border-color: var(--accent); }
/* Dark-ground variant (the polyphony section link): same house pattern, made
   legible on navy and pushed clear of the feature-points list above it. */
.dark-section .text-link { margin-top: 32px; color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.25); }
.dark-section .text-link:hover { color: var(--accent-2); border-color: var(--accent-2); }

.dark-section { padding-block: var(--sec-y); background: var(--navy-900); color: var(--white); }
.feature-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(520px, 1.2fr); align-items: center; gap: 72px; }
.dark-section .eyebrow { color: var(--accent-2); }
.feature-copy > p:not(.eyebrow) { color: rgba(255,255,255,.67); font-size: 18px; line-height: 1.66; }
.feature-points { display: grid; gap: 18px; margin-top: 34px; }
.feature-points > div { display: grid; grid-template-columns: 67px 1fr; gap: 14px; }
.feature-points span { color: var(--accent-2); font-size: 10px; font-weight: 820; letter-spacing: .14em; }
.feature-points p { margin: 0; color: rgba(255,255,255,.61); font-size: 14px; line-height: 1.56; }

.context-section { padding-block: var(--sec-y); }
.attachment-grid { display: grid; grid-template-columns: minmax(520px, 1.2fr) minmax(0, .8fr); align-items: stretch; gap: 34px; }
.context-modes { border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: 0 18px 48px rgba(7,20,36,.07); }
.context-modes article { padding: 24px 28px; }
.context-modes article + article { border-top: 1px solid var(--line); }
.context-modes article > span { color: var(--accent); font-size: 10px; font-weight: 820; letter-spacing: .14em; text-transform: uppercase; }
.context-modes h3 { margin: 8px 0 0; font-size: 25px; letter-spacing: -.035em; }
.context-modes p { margin: 10px 0 0; color: #647286; font-size: 14px; line-height: 1.55; }
/* Tighter than the standard 34px card gap: the flat facing edges make these
   two a docked pair, and the closer seam is what sells the connection. */
.inheritance-block { margin-top: 18px; }
.inherit-caption { margin-top: 16px; }
/* Two rows: the title, then the arrow line beneath it. The row is a grid with the
   SAME four columns as the card, so each arrow segment spans exactly one column -
   all three identical in length, each ending precisely at a divider, and none
   crossing into the Production column. */
.inherit-head { grid-column: 1 / 4; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 22px; align-items: center; padding: 22px 0 2px; }
/* Same treatment as the surface-card names ("SURFACE THREE: The Board"): the
   .surface-kicker span inside supplies the ink uppercase. */
/* The head band spans 3 of the card's 4 columns (Production owns the fourth), so
   centering in the band lands at 37.5% of the card. Shifting by 1/6 of the band
   width re-centers the title on the FULL card. */
.inherit-kicker { grid-column: 1 / -1; justify-self: center; position: relative; left: 16.667%; color: var(--ink); font-size: 17px; font-weight: 820; letter-spacing: .01em; white-space: nowrap; }
/* Production is a destination, not another accumulation: one word, centered in
   its otherwise-empty column. */
.inherit-level.production-level { grid-column: 4; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; padding: 26px; text-align: center; }
.production-level .chain-tag { margin-bottom: 0; } /* nothing below it to space */
/* Each segment starts 26px into its column (matching the card's inner padding)
   and runs to the column's right edge, so the arrowhead lands on the divider. */
.inherit-flow { position: relative; height: 1px; margin-left: 26px; background: #bac2cf; opacity: 0; transition: opacity .9s ease .25s; }
.inherit-flow.f1 { grid-column: 1; }
.inherit-flow.f2 { grid-column: 2; }
.inherit-flow.f3 { grid-column: 3; }
.inherit-flow::after { content: ""; position: absolute; right: 0; top: -3px; width: 8px; height: 8px; border-top: 1px solid #8f99a9; border-right: 1px solid #8f99a9; transform: rotate(45deg); }
.inheritance-block.visible .inherit-flow { opacity: 1; }
.inherit-lead { max-width: 840px; margin: 0; color: #5d6b7d; font-size: 16px; line-height: 1.6; }
/* No overflow:hidden here - the chain menus open ABOVE the pills and must escape
   the card; nothing inside bleeds past the radius anyway. */
/* The Board card's flat bottom meets this card's flat top across the gap: the
   two are docked - separate, but visibly one connector from Board to chain. */
.surface-card.board-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.inheritance-card { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 0 0 22px 22px; background: var(--white); box-shadow: 0 18px 48px rgba(7,20,36,.07); }
.inherit-note { margin: 13px 0 0; color: #97a1b0; font-size: 10px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.inherit-level { position: relative; padding: 18px 26px 44px; }
.inherit-level + .inherit-level::before { content: ""; position: absolute; left: 0; top: 50%; height: 58%; transform: translateY(-50%); width: 1px; background: var(--line); }
/* Production spans the card's full height, so its own left divider would tower
   over the others; draw its divider on the last context column's right edge
   instead - that box lives in the levels row, so the line matches its siblings. */
.inherit-level.production-level::before { content: none; }
.inherit-level.task-level::after { content: ""; position: absolute; right: 0; top: 50%; height: 58%; transform: translateY(-50%); width: 1px; background: var(--line); }
.level-head { display: flex; align-items: flex-start; gap: 12px; text-align: center; }
.level-head div { flex: 1; }
/* Quieter than the card's own title: the eye should travel from the bolded phrase
   on the Board surface card to the CONTEXT INHERITANCE CHAIN kicker, with the three
   level titles reading as subordinate labels, not competing headings. */
.level-head b { display: block; font-size: 14px; color: #5d6b7d; }
.level-head small { display: block; margin-top: 3px; color: #7a8798; }
/* The inheritance game: the level labels are dropdown pills - the big chip that
   governs the little chips below it. Each pill AND its menu wear the level's
   colorway, so an open menu reads as the pill unfolded. Menus open ABOVE the
   pill, keeping the pill (and the chips swapping under it) visible while you
   choose; the currently selected option lives only in the pill, never listed. */
.level-head > div { position: relative; }
/* The level names over the pills state the organizing principle - Mission,
   Stage, Card - so they carry title weight, not caption weight. An open menu
   may cover them - by design. */
.chain-tag { display: block; margin-bottom: 13px; color: var(--ink); font-size: 13px; font-weight: 820; letter-spacing: .13em; text-transform: uppercase; }
/* One width for all three pills, set by the widest content any of them can show
   (Mission context · 3 Stages); contents center within it. */
/* The pill's internal anatomy is EXACTLY a menu row's - same type, same left
   justification, same right-pinned divided count - plus the caret and stroke. */
.chain-pill { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px; width: 226px; max-width: 100%; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 740; cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
/* No chevron - the hover pop is the affordance; .open holds the pop while the
   menu is up, until a pick or a click anywhere else closes it. */
.chain-pill:hover, .chain-pill.open { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(7,20,36,.14); }
.board-level .chain-pill, .board-level .chain-menu { border: 1px solid #ecc0b4; background: #faece6; color: #a8503a; }
.board-level .chain-pill:hover, .board-level .chain-pill.open { border-color: #a8503a; }
.stage-level .chain-pill, .stage-level .chain-menu { border: 1px solid #c6dcba; background: #eaf3e3; color: #4c7a3f; }
.stage-level .chain-pill:hover, .stage-level .chain-pill.open { border-color: #4c7a3f; }
.task-level .chain-pill, .task-level .chain-menu { border: 1px solid #c8ceff; background: var(--accent-soft); color: #4f5cb6; }
.task-level .chain-pill:hover, .task-level .chain-pill.open { border-color: #4f5cb6; }
/* An open menu wears the pill's HOVER state: strong border + the lift shadow. */
.board-level .chain-menu { border-color: #a8503a; }
.stage-level .chain-menu { border-color: #4c7a3f; }
.task-level .chain-menu { border-color: #4f5cb6; }
.board-level small, .stage-level small, .task-level small { margin-top: 8px; }
/* The menu IS the pill, just taller: same 226px width, same 1px stroke, same
   capsule radius, same face and type - it reads as the button unfolded upward,
   not a foreign popover floating over it. */
/* ONE width everywhere: menu = pill = 226px, zero side padding, so every row
   box is the same size and position as the pill beneath it - text start,
   divider, and badge line up by construction, across all three levels. */
.chain-menu { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 20; width: 226px; padding: 10px 0; border-radius: 16px; transform: translateX(-50%); box-shadow: 0 7px 18px rgba(7,20,36,.14); }
.chain-menu button, .chain-menu .chain-note, .chain-menu .chain-row { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 9px 16px; border: 0; border-radius: 999px; background: none; color: inherit; font-size: 13px; font-weight: 740; text-align: left; white-space: nowrap; }
.chain-menu button { cursor: pointer; }
.chain-menu button:hover { background: rgba(255,255,255,.72); }
/* Counts sit in one standardized slot: right-aligned in menu rows, trailing in
   pills - always the same small muted figure. */
.chain-n { font-size: 11.5px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.chain-menu button .chain-n, .chain-menu .chain-row .chain-n, .chain-pill .chain-n { margin-left: auto; padding-left: 12px; border-left: 1px solid currentColor; }
.chain-note { justify-content: center; font-weight: 760; }
/* The subtitle at the top of a menu: block caps, quiet, aligned to row text. */
.chain-menu .chain-head { display: block; padding: 5px 16px 9px; font-size: 10.5px; font-weight: 820; letter-spacing: .13em; text-transform: uppercase; opacity: .55; }
.context-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
/* Chain swap animation: outgoing chips fade, incoming ones ease up from below -
   smooth and gentle, not slow. Per-chip stagger delays are set inline by the
   script (stage chips lead, card chips follow on a stage pick). */
.context-chips span { transition: opacity .26s ease, transform .26s ease; }
.context-chips span.chip-out { opacity: 0; transition-duration: .16s; }
.context-chips span.chip-in { opacity: 0; transform: translateY(12px); }
.context-chips span { padding: 8px 10px; border: 1px solid #d9dee6; border-radius: 999px; color: #59687b; background: #fbfbfc; font-size: 11px; }
.context-chips .c-board { border-color: #ecc0b4; background: #faece6; color: #a8503a; }
.context-chips .c-stage { border-color: #c6dcba; background: #eaf3e3; color: #4c7a3f; }
.context-chips .c-card { border-color: #c8ceff; background: var(--accent-soft); color: #4f5cb6; }
.attestation-card { display: grid; grid-template-columns: minmax(0, .72fr) minmax(520px, 1.28fr); gap: 58px; align-items: center; }
.attestation-copy > p:not(.eyebrow) { color: rgba(255,255,255,.66); font-size: 17px; line-height: 1.62; }
.clean-list { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.clean-list li { color: rgba(255,255,255,.75); font-size: 14px; }
.clean-list li::before { content: "✓"; margin-right: 10px; color: var(--accent-2); font-weight: 800; }
.attestation-visual { margin: 28px 0 0; }
.attestation-visual img { width: 100%; border: 1px solid rgba(210,217,227,.45); border-radius: 16px; }
.attestation-visual figcaption { margin-top: 11px; color: rgba(255,255,255,.45); font-size: 11px; }

.production-section { padding-block: calc(var(--sec-y) - 36px) var(--sec-y); }
.production-heading { max-width: 860px; }
.production-heading > p:last-child { color: #5b6b7f; }
.stage-ruler { display: grid; grid-template-columns: 3fr 5fr; gap: 10px; margin-top: 54px; }
.stage-zone { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 18px 48px rgba(7,20,36,.07); }
.stage-zone > span { display: block; margin-bottom: 16px; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.context-zone > span { color: var(--accent); }
.execution-zone > span { color: var(--captain); }
.stage-zone ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.context-zone ol { grid-template-columns: repeat(3, 1fr); }
.execution-zone ol { grid-template-columns: repeat(5, 1fr); }
.stage-zone li { padding: 10px 8px; border-radius: 10px; background: #eef0f4; color: #46566b; font-size: 11px; text-align: center; }
.spec-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(500px, 1.05fr); gap: 66px; align-items: end; }
.spec-copy h3 { margin: 0; max-width: 640px; font-size: clamp(36px, 4.5vw, 59px); line-height: 1.02; letter-spacing: -.05em; }
.spec-copy > p:not(.eyebrow) { color: #5d6b7d; font-size: 17px; line-height: 1.64; }
.axis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
.axis-grid article { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 12px 32px rgba(7,20,36,.06); }
.axis-grid span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.axis-grid h4 { margin: 7px 0 0; font-size: 18px; }
.axis-grid p { margin: 8px 0 0; color: #5d6b7d; font-size: 12px; line-height: 1.47; }
.execution-flow { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: 0 18px 48px rgba(7,20,36,.07); overflow: hidden; }
.execution-flow article { position: relative; padding: 26px; }
.execution-flow article + article::before { content: ""; position: absolute; left: 0; top: 50%; height: 58%; transform: translateY(-50%); width: 1px; background: var(--line); }
.execution-flow h3 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
.execution-flow p { margin: 12px 0 0; color: #5d6b7d; font-size: 13px; line-height: 1.55; }
.scriptable-note { margin: 32px 0 0; padding: 19px 23px; border-left: 3px solid var(--accent); background: rgba(104,121,255,.08); color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.55; }
.scriptable-note strong { color: var(--white); }

.asset-test { padding-block: var(--sec-y); padding-inline: 22px; text-align: center; background: var(--navy-900); color: var(--white); }
.asset-test .eyebrow { color: var(--accent-2); }
.asset-test blockquote { max-width: 1050px; margin: 0 auto; font-size: clamp(40px, 5.2vw, 70px); }
.asset-test > p:last-child { max-width: 720px; margin: 30px auto 0; padding-inline: 22px; color: rgba(255,255,255,.62); font-size: 18px; line-height: 1.65; }

.walkthrough-section { padding-block: var(--sec-y); }
.walkthrough-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.walkthrough-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--white); text-decoration: none; transition: transform .22s ease, box-shadow .22s ease; }
.walkthrough-card:hover { transform: translateY(-5px); box-shadow: 0 24px 55px rgba(7,20,38,.13); }
.walkthrough-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-bottom: 1px solid var(--line); }
.walkthrough-card > div { padding: 23px; }
.walkthrough-card span, .article-card > span { color: var(--accent); font-size: 10px; font-weight: 820; letter-spacing: .14em; text-transform: uppercase; }
.walkthrough-card h3, .article-card h3 { margin: 8px 0 0; font-size: 27px; letter-spacing: -.04em; }
.walkthrough-card p, .article-card p { margin: 11px 0 0; color: #657387; font-size: 14px; line-height: 1.56; }
.walkthrough-card b, .article-card b { display: inline-block; margin-top: 20px; font-size: 12px; }
.section-link-row { display: flex; justify-content: center; margin-top: 30px; }

.thinking-section { padding-block: var(--sec-y); background: #e9edf3; }
.article-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.article-card { display: flex; flex-direction: column; min-height: 310px; padding: 26px; border: 1px solid #d2d9e3; border-radius: 19px; background: rgba(255,255,255,.68); text-decoration: none; transition: background .2s ease, transform .2s ease; }
.article-card:hover { background: var(--white); transform: translateY(-4px); }
.article-card b { margin-top: auto; padding-top: 26px; }
.paper-link { margin-top: 25px; text-align: center; }
.paper-link a { color: var(--ink); font-size: 13px; font-weight: 730; }

.final-cta { position: relative; overflow: hidden; padding-block: clamp(72px, 8vw, 116px); background: var(--navy-900); color: var(--white); text-align: center; }
.cta-inner { position: relative; z-index: 2; width: min(900px, calc(100% - 44px)); margin-inline: auto; }
.cta-inner .eyebrow { color: var(--accent-2); }
.cta-inner > p:not(.eyebrow) { max-width: 650px; margin: 25px auto 0; color: rgba(255,255,255,.65); font-size: 18px; line-height: 1.6; }
.centered { justify-content: center; }
.final-cta .button-secondary { border-color: rgba(255,255,255,.23); background: rgba(255,255,255,.08); color: var(--white); }
.cta-rings i { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(174,184,255,.13); border-radius: 50%; transform: translate(-50%,-50%); }
.cta-rings i:nth-child(1) { width: 430px; height: 430px; }
.cta-rings i:nth-child(2) { width: 700px; height: 700px; }
.cta-rings i:nth-child(3) { width: 1040px; height: 1040px; }

.site-footer { padding-block: 30px; background: var(--navy-950); color: rgba(255,255,255,.55); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.footer-brand { color: var(--white); }
.footer-brand-lockup { width: 220px; height: auto; }
.footer-inner p { font-size: 12px; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { font-size: 12px; text-decoration: none; }
.footer-links a:hover { color: var(--white); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
/* Video windows never fade or slide in - the window and its black lid sit on the
   page from first paint, and the lid lifts as a hard cut, never a fade. (WebKit
   also refuses to autoplay a video that starts at opacity 0.) The tilt must be
   restated against .reveal; perspective() must precede the rotations it acts on. */
.video-window.reveal,
.video-window.reveal.visible,
.hero-window.reveal,
.hero-window.reveal.visible { opacity: 1; transform: var(--tilt); }

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

@media (max-width: 1080px) {
  .site-nav { gap: 16px; }
  .brand-slug { display: none; }
  .site-nav a { font-size: 12px; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 770px; }
  .video-window.reveal,
  .hero-window,
  .video-window.reveal.visible,
  .hero-window.reveal,
  .hero-window.reveal.visible { transform: none; }
  .surface-card { grid-template-columns: minmax(220px, .8fr) minmax(400px, 1.2fr); gap: 24px; }
  .feature-grid, .spec-grid { grid-template-columns: 1fr; }
  .attachment-grid { grid-template-columns: 1fr; }
  .context-modes { grid-template-columns: repeat(3, 1fr); }
  .attestation-card { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .execution-flow { grid-template-columns: 1fr; }
  .execution-flow article + article::before { left: 26px; right: 26px; top: 0; bottom: auto; height: 1px; width: auto; transform: none; }
}

@media (max-width: 820px) {
  :root { --shell: min(100% - 30px, 720px); }
  .menu-toggle { display: inline-flex; }
  .brand-lockup { width: 235px; }
  .site-nav { position: absolute; top: 76px; left: 15px; right: 15px; display: none; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 22px 55px rgba(7,20,38,.16); }
  .site-nav.open { display: grid; }
  .site-nav a { padding: 8px 5px; color: #46566b; }
  .site-nav a:hover { color: var(--ink); }
  .site-nav .nav-cta, .site-nav .nav-cta:hover { color: var(--white); }
  .site-nav .nav-cta { text-align: center; }
  .hero { padding-top: 62px; }
  .foundation-grid { grid-template-columns: 1fr; }
  .foundation-grid article, .foundation-grid article:first-child, .foundation-grid article:last-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .foundation-grid article:last-child { border-bottom: 0; }
  .split-heading { grid-template-columns: 1fr; gap: 22px; }
  .split-heading > p { margin-left: 0; }
  .surface-card { grid-template-columns: 1fr; padding: 25px; }
  .surface-card > img { grid-row: 1; }
  .surface-name { position: static; margin: 0 0 10px; }
  .feature-grid { gap: 44px; }
  .context-modes { grid-template-columns: 1fr; }
  .inheritance-card { grid-template-columns: 1fr; }
  .inherit-head { grid-column: 1; grid-template-columns: 1fr; padding: 20px 26px 2px; }
  .inherit-level.production-level { grid-column: 1; grid-row: auto; }
  .inherit-level.task-level::after { content: none; }
  .inherit-kicker { left: 0; white-space: normal; }
  .inherit-flow { display: none; }
  .inherit-level + .inherit-level::before { left: 26px; right: 26px; top: 0; bottom: auto; width: auto; height: 1px; }
  .stage-ruler { grid-template-columns: 1fr; }
  .walkthrough-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 560px) {
  .brand-lockup { width: 205px; }
  .hero h1 { font-size: 58px; }
  .hero-dek { font-size: 17px; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .hero-proof { gap: 9px 14px; }
  .section-heading h2, .feature-copy h2, .attestation-copy h2, .cta-inner h2 { font-size: 42px; }
  .surface-copy h3 { font-size: 34px; }
  .product-window figcaption { font-size: 11px; }
  .axis-grid { grid-template-columns: 1fr; }
  .context-zone ol, .execution-zone ol { grid-template-columns: 1fr; }
  .execution-flow { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr; }
  .article-card { min-height: 260px; }
  .asset-test blockquote { font-size: 38px; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}

/* Basement row: real, public, one click deep, visually quiet. Humans skip it; agents read it. */
.footer-basement { display: flex; flex-wrap: wrap; gap: 4px 14px; width: 100%; margin-top: 6px; }
.footer-basement a { font-size: 10.5px; color: rgba(255,255,255,.32); text-decoration: none; }
.footer-basement a:hover { color: rgba(255,255,255,.6); }
.evidence-link { margin: 10px 0 0; font-size: 13px; }
.evidence-link a { color: #6879ff; text-decoration: none; }
.evidence-link a:hover { text-decoration: underline; }
.footer-credit { width: 100%; margin: 8px 0 0; font-size: 10.5px; color: rgba(255,255,255,.28); }

/* Two pipeline boxes: context phase, then production phase cycling empty -> Live.
   Grid columns match the images' native widths so both render at one magnification. */
.pipeline-duo { display: grid; grid-template-columns: 667fr 1010fr; gap: 26px; margin-top: 64px; }
.pipe-title { margin: 0 0 10px; font-size: 13px; font-weight: 760; letter-spacing: .04em; color: #35455c; }
.pipe-card { position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 18px 48px rgba(7,20,36,.07); overflow: hidden; }
.pipe-card img { width: 100%; display: block; }
.pipe-cycle .cycle-b { position: absolute; inset: 0; opacity: 0; animation: pipecycle 5s ease-in-out infinite; }
@keyframes pipecycle { 0%, 44% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pipe-cycle .cycle-b { animation: none; opacity: 1; } }
@media (max-width: 820px) { .pipeline-duo { grid-template-columns: 1fr; gap: 20px; } }

/* Signature headline: the second line hangs right, past the end of the top line, so
   the reading motion traces "across" and the empty right of the heading is spent. */
.surfaces .section-heading { max-width: none; margin-bottom: 24px; }
.surfaces .section-heading > p:last-child { margin-top: 15px; margin-left: clamp(44px, 7vw, 110px); }
.surfaces .stagger { display: flex; flex-direction: column; }
.surfaces .stagger .l1 { white-space: nowrap; }
.surfaces .stagger .l2 { align-self: flex-start; margin-left: clamp(160px, 34vw, 520px); }
.context-section .stagger { display: flex; flex-direction: column; }
.context-section .stagger .l1 { white-space: nowrap; }
/* Trailing letter-space kept, so the comma sits one 'loose' gap away too. */
.context-section .stagger .loose-word { letter-spacing: .12em; margin-left: .18em; }
.context-section .stagger .l2 { align-self: flex-start; margin-left: clamp(100px, 21vw, 290px); }
@media (max-width: 820px) {
  .surfaces .stagger .l1 { white-space: normal; }
  .surfaces .stagger .l2 { margin-left: 0; }
  .context-section .stagger .l1 { white-space: normal; }
  .context-section .stagger .l2 { margin-left: 0; }
}