/* Open Product placeholder on the brand kit v1 (Exploded mark).
   Ink and paper carry the page. Redline means one thing, the pulled quarter in the mark and anything inferred.
   Light is drafting paper. Dark is a blueprint. */
:root {
  --paper: #f6f7f4; --panel: #fbfcf9; --ink: #191d21; --dim: #59616a; --line: #b9c0c4; --grid: #e4e7e3; --mark: #d0223a; --on-ink: #f6f7f4;
  --disp: "Archivo", "Arial Narrow", Arial, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #0f2236; --panel: #12283f; --ink: #e8eef5; --dim: #9fb1c4; --line: #34506d; --grid: #183150; --mark: #ff6b7d; --on-ink: #0f2236; color-scheme: dark }
}
:root[data-theme="dark"] { --paper: #0f2236; --panel: #12283f; --ink: #e8eef5; --dim: #9fb1c4; --line: #34506d; --grid: #183150; --mark: #ff6b7d; --on-ink: #0f2236; color-scheme: dark }

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
html, body { overflow-x: clip }
body {
  margin: 0; background-color: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--body);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px; background-attachment: fixed;
}
h1, h2, h3, p, figure, dl, dd { margin: 0 }
h1, h2, h3 { text-wrap: balance }
a { color: inherit }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.gut { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.wrap { max-width: 1160px; margin: 0 auto }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden }
.eyebrow { font: 500 12px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim) }
.btn { display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; background: var(--ink); color: var(--on-ink); padding: 16px 18px; text-decoration: none; border: 1.5px solid var(--ink); border-radius: 0; cursor: pointer; transition: background .15s, color .15s }
.btn:hover { background: transparent; color: var(--ink) }
.btn.ghost { background: transparent; color: var(--ink) }
.btn.ghost:hover { background: var(--ink); color: var(--on-ink) }
.btn:disabled { opacity: .6; cursor: progress }

/* Mark: ink ring, redline quarter. The quarter is the only decorative red on the page. */
.k { stroke: var(--ink); fill: none }
.r { stroke: var(--mark); fill: none }
.ax { stroke: var(--ink); fill: none; opacity: .55 }
.wm { fill: var(--ink) }
.by { fill: var(--dim) }
.gly { width: 1em; height: 1em; flex: none; vertical-align: -.15em; stroke: currentColor; fill: none }

/* Nav. Lockup with the compact symbol, since the header shows it under 48px. Clear space x = H/4.
   Logo left, menus centred, actions right. Clear at the top of the page; translucent with a hairline once scrolled
   or while a menu is open. Every menu opens the one shared panel (assets/nav.js). */
.nav { --ease: cubic-bezier(.22, 1, .36, 1); position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px) }
/* The bar's backdrop lives on a layer behind it, not on .nav itself: a blurred ancestor would stop the panel's
   own blur from seeing the page, and would trap the fixed phone sheet inside the bar. */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-bottom: 1px solid transparent; transition: background-color .25s, border-color .25s, backdrop-filter .25s }
.nav.scrolled::before, .nav.menu-open::before { background: color-mix(in srgb, var(--paper) 80%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--line) }
.nav.sheet-open::before { background: var(--paper); border-bottom-color: var(--line) }
.nav-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding-block: 10px }
.lockup { display: block; padding: 8px 0; line-height: 0; justify-self: start }
.lockup svg { height: 30px; width: auto; display: block }
.lockup .mark { display: none }
.nav ul { list-style: none; margin: 0; padding: 0 }
.nav-main ul { display: flex; gap: 2px; align-items: center }
.nav-trigger, .nav-link { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); background: none; border: 0; padding: 11px 12px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color .15s }
.nav-trigger:hover, .nav-trigger[aria-expanded="true"], .nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink) }
.chev { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1.5; fill: none; transition: transform .35s var(--ease) }
[aria-expanded="true"] > .chev, details[open] > summary .chev { transform: rotate(180deg) }
.nav-actions { display: flex; align-items: center; gap: 6px; justify-self: end }
.nav-cta { font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; text-decoration: none; background: var(--ink); color: var(--on-ink); border: 1.5px solid var(--ink); padding: 10px 14px; transition: background .15s, color .15s }
.nav-cta:hover { background: transparent; color: var(--ink) }
.nav :focus-visible { outline: 1.5px solid var(--mark); outline-offset: 2px }

/* The shared panel: it takes the open pane's size and slides under its trigger. Corner ticks as on .sheet. */
.nav-panel { position: absolute; top: calc(100% + 6px); left: 0; width: var(--pw, 0); height: var(--ph, 0); transform: translate(var(--px, 0), -6px); opacity: 0; visibility: hidden; background: color-mix(in srgb, var(--panel) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--ink) 45%, transparent); transition: opacity .2s, visibility 0s .2s, transform .35s var(--ease), width .35s var(--ease), height .35s var(--ease) }
.nav-panel::before, .nav-panel::after { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--ink); background: var(--paper); z-index: 1 }
.nav-panel::before { top: -4px; left: -4px }
.nav-panel::after { bottom: -4px; right: -4px }
.menu-open .nav-panel { opacity: 1; visibility: visible; transform: translate(var(--px, 0), 0); transition: opacity .2s, visibility 0s, transform .35s var(--ease), width .35s var(--ease), height .35s var(--ease) }
.nav-panel.jump { transition: opacity .2s, visibility 0s }
.nav-clip { position: relative; width: 100%; height: 100%; overflow: hidden }
.nav-pane { position: absolute; top: 0; left: 0; width: max-content; display: flex; gap: 20px; padding: 20px; opacity: 0; transform: translateX(var(--dx, 0)); pointer-events: none; transition: opacity .25s, transform .35s var(--ease) }
.nav-pane.on { opacity: 1; pointer-events: auto }
.nav-links { width: 300px; display: grid; gap: 2px; align-content: start }
.nav-links a { display: grid; gap: 4px; padding: 10px 12px; text-decoration: none; color: var(--ink); transition: background-color .15s }
.nav-links a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent) }
.nav-links b { font: 600 15px/1.25 var(--body) }
.nav-links span { font-size: 13px; line-height: 1.45; color: var(--dim) }
.nav-card { width: 236px; display: grid; gap: 6px; align-content: start; text-decoration: none; color: var(--ink) }
.nav-card .img { display: block; background: var(--paper); border: 1px solid var(--line); line-height: 0; overflow: hidden }
.nav-card img { width: 100%; height: auto; transition: transform .5s var(--ease) }
.nav-card:hover img { transform: scale(1.04) }
.nav-card .tag { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); margin-top: 6px }
.nav-card b { font: 600 15px/1.3 var(--body) }

/* Phones: a menu button and a full-height sheet, menus as accordions, Sign up pinned at the bottom. */
.nav-toggle, .nav-sheet { display: none }
@media (max-width: 899px) {
  .nav-main, .nav-actions, .nav-panel { display: none }
  .nav-bar { grid-template-columns: minmax(0, 1fr) auto }
  .nav-toggle { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; justify-self: end }
  .nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease) }
  .sheet-open .nav-toggle span:first-child { transform: translateY(3.75px) rotate(45deg) }
  .sheet-open .nav-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg) }
  .nav-sheet { display: flex; flex-direction: column; position: fixed; inset: 0; top: var(--sheet-top, 66px); background: var(--paper); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, visibility 0s .25s, transform .35s var(--ease) }
  .sheet-open .nav-sheet { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, visibility 0s, transform .35s var(--ease) }
  .sheet-body { flex: 1; overflow-y: auto; padding: 8px max(16px, env(safe-area-inset-left, 0px)) 24px }
  .nav-sheet details, .sheet-link { border-bottom: 1px solid var(--line) }
  .nav-sheet summary, .sheet-link { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font: 600 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); text-decoration: none; cursor: pointer; list-style: none }
  .nav-sheet summary::-webkit-details-marker { display: none }
  .nav-sheet .nav-links { width: auto; padding-bottom: 12px }
  .nav-sheet .nav-links a { padding-inline: 0 }
  .sheet-foot { padding: 16px max(16px, env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line) }
  .sheet-foot .btn { width: 100% }
}
.no-scroll, .no-scroll body { overflow: hidden }

/* Hero */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; padding-block: 56px 72px; align-items: center }
h1 { font: 800 clamp(42px, 6.6vw, 84px)/0.94 var(--disp); font-stretch: 112%; letter-spacing: -.01em; text-transform: uppercase; margin-top: 18px }
h1 em { font-style: normal; background: linear-gradient(90deg, var(--ink) 0 7px, transparent 7px 9.5px, var(--ink) 9.5px 11px, transparent 11px 13.5px) 0 calc(100% - .11em) / 13.5px 2px repeat-x }
.lede { font-size: 18px; line-height: 1.6; max-width: 33em; margin-top: 24px }
.hero-copy { container-type: inline-size; min-width: 0 }
.hero-h1 { font-size: min(84px, 9.9cqi) }
.hero-h1 .ln { display: block; white-space: nowrap }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px }
.sheet { background: var(--panel); border: 1.5px solid var(--ink); min-width: 0; position: relative }
.sheet::before, .sheet::after { content: ""; position: absolute; width: 10px; height: 10px; border: 1.5px solid var(--ink); background: var(--paper) }
.sheet::before { top: -6px; left: -6px }
.sheet::after { bottom: -6px; right: -6px }
.sheet > svg { display: block; width: 100%; height: auto }
.d-ink { stroke: var(--ink); fill: none }
.d-faint { stroke: var(--line); fill: none }
.d-mark { stroke: var(--mark); fill: none }
.d-dot { fill: var(--panel); stroke: var(--ink) }
.d-txt { fill: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .06em }
.d-txt.m { fill: var(--mark) }
.d-arrow { fill: var(--ink) }
.tb { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); font: 400 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em }
.tb > div { padding: 9px 11px; border-left: 1px solid var(--line); min-width: 0 }
.tb > div:first-child { border-left: 0 }
.tb .logo { display: grid; place-items: center; padding: 6px 10px; border-right: 1px solid var(--ink) }
.tb .logo svg { width: 48px; height: 48px; display: block }
.tb span { color: var(--dim) }
.tb b { display: block; font-weight: 500; font-size: 12.5px; margin-top: 3px; letter-spacing: .02em }

/* Bands */
.band { border-top: 1.5px solid var(--ink); background: var(--paper) }
.band > .wrap { padding-block: 72px }
h2 { font: 800 clamp(30px, 3.8vw, 46px)/1 var(--disp); font-stretch: 110%; text-transform: uppercase; letter-spacing: 0; margin-top: 14px }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 48px; align-items: start }
.prose { font-size: 17px; line-height: 1.65; max-width: 36em; display: grid; gap: 14px }
.prose.dim { color: var(--dim) }

/* Layers table */
.scroll { overflow-x: auto; min-width: 0; margin-top: 8px; -webkit-overflow-scrolling: touch }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top }
th { font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); border-bottom: 1.5px solid var(--ink) }
td:first-child { font: 500 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; color: var(--dim) }
.src { font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; border: 1px solid currentColor; padding: 4px 6px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px }
.src.inf { color: var(--mark) }
.src .gly { width: 11px; height: 11px }
/* Layer groups (Product, Process, Model, Learning), as in the deck */
.grp th { color: var(--ink); padding-top: 22px; border-bottom: 1px solid var(--ink) }
tbody:first-of-type .grp th { padding-top: 14px }

/* Claims */
.claim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1.5px solid var(--ink); margin-top: 32px; background: var(--panel) }
.claim > div { padding: 24px; min-width: 0 }
.claim > div + div { border-left: 1px solid var(--line) }
.claim h3 { font: 500 11.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); margin-bottom: 16px }
.tags { display: flex; flex-wrap: wrap; gap: 8px }
.key { display: grid; gap: 8px; margin-top: 20px; font-size: 14px; line-height: 1.45 }
.key p { display: flex; gap: 10px; align-items: baseline }
.key .gly { width: 14px; height: 14px; position: relative; top: 2px }
.key i { width: 14px; height: 0; border-top: 1.8px dashed var(--mark); flex: none; position: relative; top: -3px }
.ladder { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: rung }
.ladder li { counter-increment: rung; font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 30px 6px 0; position: relative; text-align: center; min-width: 0; overflow-wrap: anywhere }
.ladder li::before { content: counter(rung); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 11px; background: var(--panel); z-index: 1 }
.ladder li::after { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 1.5px; background: var(--line) }
.ladder li:first-child::after { left: 50% }
.ladder li:last-child::after { right: 50% }
.ladder li:last-child::before { background: var(--ink); color: var(--on-ink) }
.vis { display: flex; gap: 0; margin-top: 22px; border: 1px solid var(--line); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em }
.vis span { flex: 1; padding: 10px 8px; text-align: center; border-left: 1px solid var(--line) }
.vis span:first-child { border-left: 0 }
.fine { font-size: 13px; color: var(--dim); margin-top: 8px }

/* Three versions */
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--ink); margin-top: 32px; background: var(--panel) }
.stage { padding: 26px; border-left: 1px solid var(--line); display: grid; gap: 12px; align-content: start; min-width: 0 }
.stage:first-child { border-left: 0 }
.stage .n { font: 800 52px/1 var(--disp); font-stretch: 125% }
.stage .tag { font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dim) }
.stage.ours .tag { color: var(--ink) }
.stage.theirs { background: repeating-linear-gradient(135deg, transparent 0 8px, var(--grid) 8px 9px) }
.stage p { font-size: 15.5px; line-height: 1.55 }

/* Release */
.release { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start }
.spec { border: 1.5px solid var(--ink); font: 400 13px/1.4 var(--mono); background: var(--panel); min-width: 0 }
.spec div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line) }
.spec div:last-child { border-bottom: 0 }
.spec dt { color: var(--dim); text-transform: uppercase; font-size: 11.5px; letter-spacing: .08em }
.spec dd { font-weight: 500; text-align: right }
form { margin-top: 28px; max-width: 500px }
.field { display: flex; flex-wrap: wrap }
.field input[type=email] { flex: 1 1 220px; min-width: 0; font: 400 16px var(--body); padding: 15px 14px; border: 1.5px solid var(--ink); border-right: 0; background: var(--panel); color: var(--ink); border-radius: 0; -webkit-appearance: none; appearance: none }
.field input::placeholder { color: var(--dim) }
.field .btn { flex: 0 0 auto }
.roles { border: 0; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px }
.roles legend { font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); margin-bottom: 8px; padding: 0 }
.roles label { font: 400 13.5px/1 var(--body); border: 1px solid var(--line); padding: 9px 11px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; background: var(--panel) }
.roles input { accent-color: var(--ink); margin: 0 }
.roles label:has(input:checked) { border-color: var(--ink) }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.note { font: 500 13px/1.5 var(--mono); min-height: 1.5em; margin-top: 14px; color: var(--ink) }
.note.err { color: var(--mark) }

/* Footer */
.foot { border-top: 1.5px solid var(--ink); background: var(--paper); padding-bottom: env(safe-area-inset-bottom, 0px) }
.foot .wrap { padding-block: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font: 400 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dim) }
.foot svg { height: 40px; width: auto; display: block }

@media (min-width: 881px) { .lockup svg { height: 34px } }
@media (max-width: 880px) {
  .hero .wrap, .two, .release, .claim { grid-template-columns: minmax(0, 1fr) }
  .hero .wrap { padding-block: 36px 56px; gap: 40px }
  .band > .wrap { padding-block: 56px }
  .stages { grid-template-columns: minmax(0, 1fr) }
  .stage { border-left: 0; border-top: 1px solid var(--line) }
  .stage:first-child { border-top: 0 }
  .claim > div + div { border-left: 0; border-top: 1px solid var(--line) }
}
@media (max-width: 520px) {
  .tb { grid-template-columns: auto repeat(2, minmax(0, 1fr)) }
  .tb .logo { grid-row: span 2 }
  .tb > div:nth-child(4) { border-left: 1px solid var(--line) }
  .tb > div:nth-child(n+4) { border-top: 1px solid var(--line) }
  .field input[type=email] { border-right: 1.5px solid var(--ink); flex-basis: 100% }
  .field .btn { flex: 1 1 100%; margin-top: 8px }
  .ladder li { font-size: 9.5px; padding-inline: 2px }
}
/* Layers table, narrow: layer and source on one line, then what it holds */
@media (max-width: 560px) {
  table, thead, tbody { display: block; min-width: 0 }
  tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center }
  th, td { padding: 0; border: 0 }
  th:last-child, td:last-child { justify-self: end }
  th:nth-child(2) { display: none }
  thead tr { padding-bottom: 10px; border-bottom: 1.5px solid var(--ink) }
  tbody tr { padding-block: 12px; border-bottom: 1px solid var(--line) }
  td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; margin-top: 6px }
  .grp th { grid-column: 1 / -1; justify-self: start; padding-top: 0; border: 0 }
  tbody tr.grp { padding-block: 18px 8px; border-bottom: 1px solid var(--ink) }
}
/* Narrow phones: the mark alone. */
@media (max-width: 600px) {
  .lockup .full { display: none }
  .lockup .mark { display: block; height: 30px }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .btn, .nav, .nav *, .nav *::before, .nav *::after { transition: none !important }
}

/* Footer links */
.foot-links { display: flex; gap: 20px; flex-wrap: wrap }
.foot-links a { text-decoration: none }
.foot-links a:hover { color: var(--ink) }

/* Inner pages: What we're building, Sign in */
.page-head .wrap { padding-block: 56px 48px; max-width: 1160px }
.page-head h1 { font-size: clamp(36px, 5.4vw, 68px); max-width: 15ch }
.page-head .lede { margin-top: 22px; max-width: 36em }
.head-copy h1.lines { font-size: min(68px, 7.4cqi); max-width: none }
.head-copy h1.lines .ln { display: block; white-space: nowrap }
.stack { list-style: none; margin: 0; padding: 0; border: 1.5px solid var(--ink); background: var(--panel) }
.stack li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 20px; padding: 16px 18px; border-top: 1px solid var(--line); align-items: baseline }
.stack li:first-child { border-top: 0 }
.stack .when { font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dim) }
.stack .when.now { color: var(--ink) }
.stack p { font-size: 16.5px; line-height: 1.55 }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1.5px solid var(--ink) }
.rules li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px }
@media (max-width: 560px) {
  .stack li { grid-template-columns: minmax(0, 1fr); gap: 4px }
}

/* Home. One picture per section: the file, what's open, the chapters, a real OPD, claims, uses, versions. */
.lede-2 { margin-top: 14px }
.lines-p { display: grid; gap: 2px }
.lines-p .ln { display: block }
.prose.lines-p { gap: 2px }
.closer { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font: 600 clamp(19px, 2.1vw, 26px)/1.3 var(--body); color: var(--ink) }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 36px }
.sec-head .prose { font-size: 17px }
.fine-gap { margin-top: 16px }
.eyebrow.ink { color: var(--ink) }
.text-link { font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; text-decoration: none; border-bottom: 1.5px solid var(--ink); padding-bottom: 4px; white-space: nowrap }
.text-link:hover { color: var(--mark); border-color: var(--mark) }
.row-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 18px }
.row-foot .fine { margin: 0; max-width: 46em }

/* Hero: the product, exploded, bracketed into its four chapters */
.opd-file-body { display: grid; grid-template-columns: minmax(0, .95fr) 24px minmax(0, 1fr); align-items: center; gap: 4px; padding: 22px 22px 18px }
.opd-file picture, .viewer picture { display: block; line-height: 0 }
.opd-file img { width: 100%; height: auto; display: block }
.brace { width: 24px; height: 82%; align-self: center }
.chaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.chaps li { border: 1px solid var(--line); background: var(--paper); padding: 11px 12px; display: grid; gap: 4px }
.chaps .n { font: 600 11px/1 var(--mono); letter-spacing: .12em; color: var(--mark) }
.chaps b { font: 800 17px/1 var(--disp); font-stretch: 110%; text-transform: uppercase }
.chaps li > span:last-child { font-size: 13px; line-height: 1.4; color: var(--dim) }
.tb.tb-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }

/* 01 What's open */
.open-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.oc { background: var(--panel); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.oc.us { border: 1.5px solid var(--ink) }
.oc-what { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim) }
.oc-big { font: 800 28px/1 var(--disp); font-stretch: 112%; text-transform: uppercase }
.oc { container-type: inline-size }
.oc-big { font-size: min(28px, 9.6cqi); white-space: nowrap }
.oc-fig { display: block; width: 100%; height: auto; max-height: 132px; margin-bottom: 6px; stroke-width: 1.5; stroke-linejoin: round }
.oc-fig .f { fill: var(--panel) }
.oc-fig .e { stroke-width: .75; opacity: .45 }
.oc-fig .r { stroke: var(--mark) }
.oc-fig .t { stroke-width: 3.5; stroke-linecap: round }
.oc-fig .lbl { fill: var(--dim); stroke: none; font: 500 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; text-anchor: middle }
.oc-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line) }
.oc-meta > div { padding: 9px 12px; min-width: 0 }
.oc-meta > div + div { border-left: 1px solid var(--line) }
.oc-meta dt { display: flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim) }
.oc-meta dt .dot { width: 8px; height: 8px }
.oc-meta dd { margin-top: 6px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.oc-meta b { font-weight: 600 }
.head-copy { container-type: inline-size; min-width: 0 }
h2.lines .ln { display: block; white-space: nowrap }
.head-copy h2.lines { font-size: min(46px, 6.5cqi) }
.oc-rows { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--grid) }
.oc-rows li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--grid); font-size: 14.5px }
.st { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap }
.dot { width: 10px; height: 10px; box-sizing: border-box; display: inline-block; flex: none }
.dot.y { background: var(--ink) }
.dot.s { border: 1.5px solid var(--ink); background: linear-gradient(90deg, var(--ink) 50%, transparent 50%) }
.dot.n { border: 1.5px solid var(--mark) }
.legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px; color: var(--dim) }

/* 02 Four chapters; each layer opens that layer of Plus One */
.ch4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--ink); background: var(--panel) }
.c4 { border-left: 1px solid var(--line); display: grid; grid-row: span 4; grid-template-rows: subgrid; min-width: 0 }
.c4:first-child { border-left: 0 }
.c4h { padding: 20px 20px 16px; border-bottom: 1.5px solid var(--ink); display: grid; gap: 6px; align-content: start }
.rn { font: 800 44px/1 var(--disp); font-stretch: 112%; color: var(--mark) }
.c4h h3 { font: 800 22px/1 var(--disp); font-stretch: 112%; text-transform: uppercase }
.c4h p { font-size: 14px; color: var(--dim); line-height: 1.4 }
.ly { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px 20px; border-top: 1px solid var(--grid); align-items: start; text-decoration: none; color: var(--ink); transition: background-color .15s }
.c4h + .ly { border-top: 0 }
.ly:hover { background: color-mix(in srgb, var(--ink) 5%, transparent) }
.ly svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.ly b { font: 600 15px/1.3 var(--body); display: block }
.ly b::after { content: " →"; color: var(--dim); font-weight: 400 }
.ly > span > span { display: block; font-size: 13px; line-height: 1.4; color: var(--dim); margin-top: 3px }

/* 03 A real OPD */
.sample { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start }
.viewer { margin: 0; background: var(--panel); border: 1.5px solid var(--ink) }
.viewer img { width: 100%; height: auto; display: block }
.viewer figcaption { padding: 10px 12px; border-top: 1px solid var(--line) }
.how { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--dim) }
.mk { display: inline-block; width: 8px; height: 8px; background: var(--ink); flex: none }
.mk.inf { background: transparent; border: 1.5px solid var(--mark); width: 5px; height: 5px }
.mk.sim { background: transparent; border: 1.5px dashed var(--ink); width: 5px; height: 5px }
.mk.tgt { background: transparent; border: 1.5px solid var(--ink); width: 5px; height: 5px; border-radius: 50% }
.sample-name { font: 800 34px/1 var(--disp); font-stretch: 112%; text-transform: uppercase; margin: 10px 0 8px }
.nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); margin-top: 22px }
.nums div { display: flex; flex-direction: column; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line) }
.nums dd { order: -1; font: 800 42px/1 var(--disp); font-stretch: 108% }
.nums dt { font-size: 14px; color: var(--dim); margin-top: 6px }
.nums .how { margin-top: 8px }

/* 04 Claims and trust */
.claims { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start }
.vals { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px }
.vals li { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--line); padding: 16px 18px }
.vals .k { display: block; font-size: 14px; color: var(--dim) }
.vals b { display: block; font: 800 28px/1 var(--disp); font-stretch: 108%; margin-top: 6px }
.vals .src { padding: 7px 9px; font-size: 11px }
.src.sim { border-style: dashed }
.trust { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--ink) }
.trust li { padding: 16px 14px; border-left: 1px solid var(--line); background: var(--panel); min-width: 0 }
.trust li:first-child { border-left: 0 }
.trust li.on { background: var(--ink); color: var(--on-ink) }
.trust b { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase }
.trust span { display: block; font-size: 13.5px; line-height: 1.4; margin-top: 6px; opacity: .85 }
.trust-axis { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-top: 10px }
.claim .trust { margin-top: 0 }

/* 05 Uses */
.uses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.uses li { background: var(--panel); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.uses svg { width: 40px; height: 40px; stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.uses svg .r { stroke: var(--mark) }
.who { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim) }
.uses h3 { font: 800 20px/1.05 var(--disp); font-stretch: 110%; text-transform: uppercase }
.uses p { font-size: 15px; line-height: 1.55; color: var(--dim) }

/* 06 Three versions, on one axis */
.timeline { list-style: none; margin: 0; padding: 34px 0 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1.5px; background: var(--ink) }
.timeline li { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.timeline li::before { content: ""; position: absolute; top: -27px; left: 0; width: 14px; height: 14px; box-sizing: border-box; background: var(--ink); border: 1.5px solid var(--ink) }
.timeline li.yours::before { background: var(--paper) }
.timeline .n { font: 800 52px/1 var(--disp); font-stretch: 112% }
.timeline .yours .n { color: var(--dim) }
.timeline p { font-size: 15.5px; line-height: 1.55 }
.pill { align-self: flex-start; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--ink); padding: 5px 7px }
.pill.ink { background: var(--ink); color: var(--on-ink) }

@media (max-width: 1000px) {
}
@media (max-width: 880px) {
  .sec-head, .sample, .claims { grid-template-columns: minmax(0, 1fr) }
  .sec-head { gap: 16px }
  .ch4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .c4:nth-child(3) { border-left: 0 }
  .c4:nth-child(-n+2) { border-bottom: 1.5px solid var(--ink) }
  .open-grid, .uses { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .oc.us { grid-column: 1 / -1 }
}
@media (max-width: 600px) {
  .opd-file-body { grid-template-columns: minmax(0, 1fr); padding: 16px }
  .opd-file img { max-width: 340px; margin: 0 auto }
  .brace { display: none }
  .chaps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .tb.tb-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .tb.tb-4 > div:nth-child(3) { border-left: 0 }
  .tb.tb-4 > div:nth-child(n+3) { border-top: 1px solid var(--line) }
  .ch4, .open-grid, .uses, .timeline { grid-template-columns: minmax(0, 1fr) }
  .c4 { border-left: 0; border-bottom: 1.5px solid var(--ink) }
  .c4:last-child { border-bottom: 0 }
  .timeline { padding-top: 0 }
  .timeline::before, .timeline li::before { display: none }
  .nums dd { font-size: 34px }
  .vals b { font-size: 22px }
  .trust { grid-template-columns: minmax(0, 1fr) }
  .trust li { border-left: 0; border-top: 1px solid var(--line) }
  .trust li:first-child { border-top: 0 }
}

/* Docs (/opd): jobs, the layer explorer, a claim taken apart, the update flow, agent prompts. All px-. */
.px-jump { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 26px; font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em }
.px-jump a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 3px }
.px-jump a:hover { color: var(--ink); border-color: var(--ink) }
.px-n { font: 800 34px/1 var(--disp); font-stretch: 112%; color: var(--mark) }
.px-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--ink); background: var(--panel) }
.px-job { padding: 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.px-job:first-child { border-left: 0 }
.px-job h3, .px-flow h3 { font: 800 24px/1.05 var(--disp); font-stretch: 110%; text-transform: uppercase }
.px-job > p { font-size: 15.5px; line-height: 1.55; color: var(--dim) }
.px-chs { display: flex; flex-wrap: wrap; gap: 6px }
.px-chs span { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--ink); padding: 5px 7px; color: var(--ink) }
.px-job .px-fact { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font: 400 13px/1.45 var(--mono); color: var(--ink) }
.px-fact b { display: block; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px }

.px-explorer { display: grid; grid-template-columns: 236px minmax(0, 1fr); border: 1.5px solid var(--ink); background: var(--panel); align-items: start }
.px-rail { padding: 18px 0; border-right: 1px solid var(--line); align-self: stretch }
.px-rail ul { list-style: none; margin: 0 0 10px; padding: 0 }
.px-ch { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mark); padding: 12px 20px 8px }
.px-tab { display: block; padding: 9px 20px; font-size: 15px; text-decoration: none; color: var(--ink); border-left: 3px solid transparent; transition: background-color .15s }
.px-tab:hover { background: color-mix(in srgb, var(--ink) 5%, transparent) }
.px-tab[aria-current="true"] { background: var(--ink); color: var(--on-ink); border-left-color: var(--mark) }
.is-tabs .px-rail { position: sticky; top: 76px; align-self: start; border-right: 0 }
.is-tabs .px-cards { border-left: 1px solid var(--line); align-self: stretch }
.px-card { padding: 28px; display: grid; gap: 18px; min-width: 0; scroll-margin-top: 84px }
.px-card[hidden] { display: none }
.px-card + .px-card { border-top: 1.5px solid var(--ink) }
.is-tabs .px-card + .px-card { border-top: 0 }
.px-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px }
.px-chap { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mark); flex-basis: 100% }
.px-head h3 { font: 800 clamp(26px, 3vw, 34px)/1 var(--disp); font-stretch: 112%; text-transform: uppercase }
.px-q { font: 600 clamp(19px, 2vw, 23px)/1.3 var(--body); max-width: 30em }
.px-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start }
.px-body > div { display: grid; gap: 16px; min-width: 0 }
.px-holds { font-size: 16px; line-height: 1.55; color: var(--dim) }
.px-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid var(--ink) }
.px-stats div { display: flex; flex-direction: column; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line) }
.px-stats dd { order: -1; font: 800 36px/1 var(--disp); font-stretch: 108% }
.px-stats dt { font-size: 13px; color: var(--dim); margin-top: 6px }
.px-rec { border: 1px solid var(--line); background: var(--paper); font: 400 13px/1.45 var(--mono); min-width: 0 }
.px-rec-id { padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 500; letter-spacing: .02em }
.px-rec dl { display: grid; padding: 4px 0 }
.px-rec dl div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px; padding: 6px 12px }
.px-rec dt { color: var(--dim) }
.px-rec dd { overflow-wrap: anywhere }
.px-rec-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px }
.px-quote { padding: 14px 12px; font: 400 15px/1.5 var(--body); color: var(--ink) }
.px-fig { margin: 0; border: 1px solid var(--line); background: var(--paper); min-width: 0 }
.px-fig picture, .px-fig img { display: block; width: 100%; height: auto }
.px-fig img { max-height: 420px; object-fit: contain }
.px-fig figcaption { padding: 9px 12px; border-top: 1px solid var(--line) }
.px-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line) }
.px-meta div { padding: 12px 16px 0 0 }
.px-meta dt { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim) }
.px-meta dd { font-size: 15px; margin-top: 6px }
.px-foot { display: flex; flex-wrap: wrap; gap: 12px 24px }

.px-anat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-bottom: 32px }
.px-rec-lg { font-size: 14px; border: 1.5px solid var(--ink) }
.px-rec-lg dl div { grid-template-columns: 11em minmax(0, 1fr); padding-block: 9px; border-top: 1px solid var(--grid) }
.px-rec-lg dl div:first-child { border-top: 0 }
.px-pin { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border: 1.5px solid var(--mark); color: var(--mark); font: 600 11px/1 var(--mono); vertical-align: 1px }
.px-pins { list-style: none; margin: 0; padding: 0; counter-reset: pin; display: grid; gap: 0; border-top: 1.5px solid var(--ink) }
.px-pins li { counter-increment: pin; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5 }
.px-pins li::before { content: counter(pin); grid-column: 1; grid-row: 1 / span 2; width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--mark); color: var(--mark); font: 600 11px/1 var(--mono); margin-top: 2px }
.px-pins b { font-weight: 600 }
.px-pins li > * { grid-column: 2 }
.px-pins .tags { margin-top: 2px }

.px-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--ink); background: var(--panel) }
.px-flow li { padding: 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; position: relative; min-width: 0 }
.px-flow li:first-child { border-left: 0 }
.px-flow li + li::before { content: "→"; position: absolute; left: -11px; top: 26px; width: 20px; text-align: center; background: var(--panel); color: var(--dim); font: 500 14px/1 var(--mono) }
.px-flow p { font-size: 15px; line-height: 1.55; color: var(--dim) }

.px-prompts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.px-prompts li { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding-bottom: 14px }
.px-prompts .px-quote { font-size: 16.5px; padding: 18px 18px 0 }
.px-prompts .who { padding: 0 18px }

@media (max-width: 880px) {
  .px-jobs, .px-flow, .px-prompts, .px-anat { grid-template-columns: minmax(0, 1fr) }
  .px-job, .px-flow li { border-left: 0; border-top: 1px solid var(--line) }
  .px-job:first-child, .px-flow li:first-child { border-top: 0 }
  .px-flow li + li::before { content: "↓"; left: 24px; top: -10px; width: auto; padding: 0 6px }
  .px-explorer { grid-template-columns: minmax(0, 1fr) }
  .px-rail { border-right: 0; border-bottom: 1.5px solid var(--ink); padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: baseline }
  .px-ch { padding: 0; white-space: nowrap }
  .px-rail ul { margin: 0; display: flex; flex-wrap: wrap; gap: 6px }
  .px-tab { border: 1px solid var(--line); padding: 6px 9px; font-size: 13px }
  .px-card { padding: 22px 16px }
  .px-body { grid-template-columns: minmax(0, 1fr) }
  .px-fig img { max-height: 320px }
}
@media (max-width: 520px) {
  .px-rail { grid-template-columns: minmax(0, 1fr) }
  .px-rec dl div, .px-rec-lg dl div { grid-template-columns: minmax(0, 1fr); gap: 2px }
  .px-meta { grid-template-columns: minmax(0, 1fr) }
}