/* Phantom Editor landing page. Direction: "The product performs", palette "Forest and lime", Albert Sans. */

:root {
  --bg: #0f1f10;
  --surface: #162a17;
  --surface-2: #1c3320;
  --ink: #ffffff;
  --muted: #9aa39a;
  --accent: #c6f19d;
  --accent-strong: #d8f8b8;
  --accent-ink: #0f1f10;
  --black: #000000;
  --white: #ffffff;
  --white-ink: #0f1f10;
  --white-muted: #556456;
  --leaf: #2f7a1c;

  --font: "Albert Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; /* taste-skill-ignore: literal code and terminal output only */

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.4rem, 0.9rem + 5.6vw, 5rem);

  --margin: clamp(1.25rem, 2.8vw, 2.5rem);
  --section: clamp(6rem, 13vw, 13rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, p, figure, ul, ol, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { max-width: 60ch; text-wrap: pretty; }
code, pre { font-family: var(--mono); }

.display { font-size: var(--step-display); line-height: 1; letter-spacing: -0.035em; }
.head { font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.035em; }
.lead { font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.015em; font-weight: 500; }
.small { font-size: var(--step-small); line-height: 1.45; }
.nums { font-variant-numeric: tabular-nums; }
.wrap { padding-inline: var(--margin); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.15rem; background: var(--accent); color: var(--accent-ink); font-weight: 500; text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button-quiet { background: var(--surface-2); color: var(--ink); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-strong); }
  .button-quiet:hover { background: #24402a; }
  .link:hover { text-decoration-color: currentColor; }
}
.sq { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--accent); color: var(--accent-ink); transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.sq:active { transform: scale(0.94); }
.sq[disabled] { background: var(--surface-2); color: var(--muted); cursor: default; }

/* segmented control: a real control of the tool's flags */
.seg { display: inline-flex; background: var(--surface); }
.seg button { min-height: 2.25rem; padding: 0 0.75rem; white-space: nowrap; font-size: var(--step-small); color: var(--muted); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.seg-page { background: var(--surface-2); }
.seg-page button { min-height: 2.75rem; padding: 0 1.1rem; font-size: var(--step-body); color: var(--ink); }

/* ---------- terminal fragments (the product's own interface) ---------- */
[data-ui].term { background: var(--black); color: #e9efe9; }
[data-ui] .term-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0.25rem 0.25rem 0.25rem 1rem; background: #0a140b; }
[data-ui] .term-title { font-size: var(--step-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui] .term-body { padding: 1rem 1.1rem 1.25rem; font-size: 13px; line-height: 1.6; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #2a3d2b transparent; }
[data-ui] .term-body b { font-weight: 700; color: #ffffff; }
[data-ui] .t-ok { color: var(--accent); }
[data-ui] .t-dim { color: #7f8b80; }
[data-ui] .t-info { color: #7fe3e8; }
[data-ui] .t-warn { color: #ffa24d; }
[data-ui] .t-bad { color: #ff7b72; }
[data-ui] .term-body b.t-ok { color: var(--accent); }
[data-ui] .term-body b .t-bad { color: #ff7b72; }
pre.cmd { padding: 0.9rem 1rem; background: var(--black); color: #e9efe9; font-size: 13px; line-height: 1.6; overflow-x: auto; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: max(100svh, 46rem); overflow: hidden; }
.nav { display: flex; align-items: baseline; justify-content: space-between; padding: 1.6rem var(--margin) 0; }
.wordmark { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.03em; text-decoration: none; }
.nav-links { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); font-size: 1rem; }
.hero-copy { position: relative; z-index: 1; padding: clamp(4rem, 10svh, 6.5rem) var(--margin) 0; max-width: 56rem; }
.hero-sub { margin-top: 1.5rem; max-width: 40ch; }
.hero-copy .actions { margin-top: 1.75rem; }
.stage { position: absolute; left: 36%; right: 0; top: 43%; bottom: 0; background: var(--accent); clip-path: polygon(0 3.5rem, 9rem 3.5rem, 9rem 0, 100% 0, 100% 100%, 0 100%); }
.stage .term { position: absolute; left: 3.5rem; top: 6rem; width: min(47rem, calc(100% - 3.5rem)); }
#status .proj .less { display: none; }
#status[data-flag="--less"] .full { display: none; }
#status[data-flag="--less"] .proj .less { display: inline; }
#status[data-flag="--pending"] .proj[data-state="finished"],
#status[data-flag="--finished"] .proj[data-state="pending"] { display: none; }

/* ---------- pipeline ---------- */
.pipeline { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; min-height: max(88svh, 44rem); margin-top: 0; }
.pipe-left { background: var(--black); padding: clamp(3rem, 7vw, 6rem) var(--margin) 2rem; }
#clause { font-size: clamp(2.4rem, 5.56vw, 5rem); }
.pipe-text { margin-top: 1.75rem; max-width: 34ch; }
.pipe-right { background: var(--surface); display: grid; place-items: center; padding: 3rem var(--margin) 2rem; min-width: 0; }
.folder { width: min(36rem, 100%); }
[data-ui].folder .term-body { padding: 1.6rem 1.75rem 1.8rem; font-size: 15px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-ui] .frow { color: #7f8b80; transition: color var(--t-ui) ease; }
[data-ui] .frow .mark::before { content: "✗"; } /* taste-skill-ignore */
[data-ui] .frow.is-there { color: var(--accent); }
[data-ui] .frow.is-there .mark::before { content: "✓"; } /* taste-skill-ignore */
.pipe-slider { grid-column: 1 / -1; position: relative; padding: 0 var(--margin) 2.25rem; background: var(--surface); }
.pipe-slider::before { content: ""; position: absolute; inset: 0 50% 0 0; background: var(--black); }
.pipe-slider > * { position: relative; }
.track { position: relative; height: 2.5rem; }
.track::before, .track-fill { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; background: #3c4f3d; }
.track-fill { background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0.5)); transition: transform 200ms var(--ease-out); }
.pipe-slider input { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; display: block; width: 100%; height: 2.5rem; margin: 0; background: transparent; cursor: grab; touch-action: pan-y; }
.pipe-slider input::-webkit-slider-runnable-track { height: 8px; background: transparent; }
.pipe-slider input::-moz-range-track { height: 8px; background: transparent; }
.pipe-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -12px; background: var(--accent); border: 0; border-radius: 0; }
.pipe-slider input::-moz-range-thumb { width: 32px; height: 32px; background: var(--accent); border: 0; border-radius: 0; }
.stage-names { display: flex; justify-content: space-between; margin-top: 0.4rem; padding-inline: 16px; font-size: 1rem; }
.stage-names li { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.stage-names li:first-child { justify-content: flex-start; margin-left: -16px; }
.stage-names li:last-child { justify-content: flex-end; margin-right: -16px; }
.stage-names button { padding: 0.35rem 0.25rem; color: var(--muted); transition: color var(--t-hover) ease; }
.stage-names .is-on button { color: var(--ink); font-weight: 500; }
#clause, #stage-text, .folder { transition: opacity 200ms ease; }
.is-swapping #clause, .is-swapping #stage-text { opacity: 0; }

/* ---------- outputs ---------- */
.outputs { padding-block: calc(var(--section) * 0.75) calc(var(--section) * 0.6); }
.outputs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.arrows { display: flex; gap: 8px; }
.row { display: flex; align-items: flex-start; gap: clamp(3rem, 7vw, 7rem); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem calc(50vw - min(27rem, 43vw)) 2rem; scrollbar-width: none; cursor: grab; }
.row::-webkit-scrollbar { display: none; }
.row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.out { flex: none; display: grid; grid-template-columns: min(33rem, 86vw) minmax(0, 21rem); gap: 2.5rem; scroll-snap-align: center; width: min(54rem, 86vw); }
.out [data-ui].term { background: var(--surface); transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
.out [data-ui] .term-bar { background: var(--surface-2); transition: background-color var(--t-ui) ease; }
.out [data-ui] .term-body { color: var(--muted); min-height: 15rem; }
.out [data-ui] .term-body b, .out [data-ui] .term-body span { color: inherit; }
.out figcaption { align-self: start; }
.out figcaption p { margin-top: 0.9rem; font-size: 1rem; color: var(--ink); }
.js .out figcaption { visibility: hidden; opacity: 0; transition: opacity var(--t-ui) ease, visibility 0s linear var(--t-ui); }
.js .out.is-lit figcaption { visibility: visible; opacity: 1; transition-delay: 0s; }
/* the panel at the centre is lit: the product's light theme */
.out.is-lit [data-ui].term { background: var(--white); color: var(--white-ink); }
.out.is-lit [data-ui] .term-bar { background: #e6eee2; }
.out.is-lit [data-ui] .term-title { color: var(--white-ink); }
.out.is-lit [data-ui] .term-body { color: var(--white-ink); }
.out.is-lit [data-ui] .term-body b { color: #000; }
.out.is-lit [data-ui] .t-ok { color: var(--leaf); }
.out.is-lit [data-ui] .t-dim { color: var(--white-muted); }
.out.is-lit [data-ui] .t-info { color: #0b6f78; }
.out.is-lit [data-ui] .t-warn { color: #a85400; }
.out.is-lit [data-ui] .t-bad { color: #b3261e; }

/* ---------- b-roll ---------- */
.broll { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.broll-field { grid-column: 1 / 8; position: sticky; top: 0; align-self: start; height: 100svh; display: grid; place-items: center; background: var(--black); color: var(--muted); transition: background-color var(--t-ui) ease; }
.broll-field[data-theme="light"] { background: var(--white); color: var(--white-muted); }
.broll-field video { width: 100%; max-height: 100svh; object-fit: contain; background: transparent; }
.field-note { position: absolute; left: var(--margin); bottom: 1.5rem; font-size: var(--step-small); }
.broll-col { grid-column: 9 / 13; padding: clamp(4rem, 9vw, 7rem) var(--margin) 22svh 0; }
.broll-intro p { margin-top: 1.25rem; }
.broll-intro .seg { margin-top: 2rem; }
.clip { margin-top: 42svh; max-width: 44ch; }
.clip p { margin-top: 0.9rem; }
.clip .cmd { margin-top: 1.25rem; }
.clip .button { margin-top: 1rem; }
.clip.is-on .button { background: var(--accent); color: var(--accent-ink); }

/* ---------- videos ---------- */
.videos { position: relative; background: var(--white); color: var(--white-ink); padding-block: calc(var(--section) * 0.8); }
.ledger { width: min(44rem, 100% - 2 * var(--margin)); margin-left: max(var(--margin), 12vw); }
.ledger-note { margin-top: 0.75rem; color: var(--white-muted); font-size: 1rem; }
.rows { margin-top: 2.25rem; }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) 4rem 4.5rem; align-items: center; column-gap: 1rem; min-height: 3.25rem; padding-block: 0.4rem; font-size: var(--step-body); text-decoration: none; transition: color var(--t-hover) ease; }
.vtitle { font-weight: 500; }
.vlen { color: var(--white-muted); font-size: 1rem; }
.vdate { text-align: right; font-size: 1rem; }
.vphone { display: none; }
.rows:has(.vrow:hover) .vrow:not(:hover), .rows:has(.vrow:focus-visible) .vrow:not(:focus-visible) { color: var(--white-muted); }
.videos :focus-visible { outline-color: var(--white-ink); }
.preview { position: absolute; top: calc(var(--section) * 0.8); left: calc(max(var(--margin), 12vw) + 44rem + 4rem); width: min(30rem, 100vw - max(var(--margin), 12vw) - 44rem - 4rem - var(--margin)); aspect-ratio: 16 / 9; background: #e6eee2; transition: transform 450ms var(--ease-out); }
.preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 150ms ease; }
.preview img.is-on { opacity: 1; }

/* ---------- commands ---------- */
.commands { padding-block: var(--section) calc(var(--section) * 0.5); }
.commands-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3.5rem; }
.agenda { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.tabs { display: grid; gap: 6px; position: sticky; top: 1rem; }
.tabs button { display: grid; align-content: center; gap: 0.1rem; min-height: 4rem; padding: 0.5rem 1rem; background: var(--surface); text-align: left; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.tabs button:active { transform: scale(0.98); }
.tab-name { font-size: var(--step-body); font-weight: 500; line-height: 1.2; }
.tab-what { font-size: var(--step-small); color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--black); border-left: 6px solid var(--accent); padding-left: calc(1rem - 6px); }
.tabs button[aria-selected="true"] .tab-what { color: var(--ink); }
.js .panel[data-off] { display: none; }
.panel + .panel { margin-top: 3rem; }
.js .panel + .panel { margin-top: 0; }
.panel-h { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.015em; margin-bottom: 1rem; }
.panel-h span { color: var(--muted); margin-left: 0.6rem; }
.bands { display: grid; gap: 4px; }
.band { display: grid; grid-template-columns: 24% minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; min-height: 4.75rem; padding: 0.8rem 1.25rem; background: var(--surface); }
.band:nth-child(even) { background: var(--surface-2); }
.band-name { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.band-main { display: grid; gap: 0.2rem; min-width: 0; }
.band-what { font-weight: 500; }
.band code { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.band-engine { font-size: var(--step-small); color: var(--muted); text-align: right; max-width: 11rem; }

/* ---------- cta ---------- */
.cta { padding-block: 30svh 22svh; }
.cta p { font-size: var(--step-lead); max-width: 34ch; line-height: 1.35; }
.cta .actions { margin-top: 1.5rem; }

/* ---------- footer of tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; padding: 0 10px 10px; }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; min-height: 13.75rem; padding: 1.25rem; background: var(--surface); min-width: 0; }
.tile ul { display: grid; gap: 0.35rem; }
.tile .small { color: var(--muted); }
.t-say { grid-column: span 4; }
.t-nav { grid-column: span 2; justify-content: flex-start; }
.t-install { grid-column: span 4; }
.t-install .cmd { padding: 0; background: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.t-links { grid-column: span 2; justify-content: flex-end; font-size: var(--step-lead); font-weight: 500; }
.t-mark { grid-column: span 8; min-height: 20rem; background: var(--white); color: var(--white-ink); align-items: center; justify-content: center; overflow: hidden; }
.t-mark span { font-size: 15.5vw; font-weight: 600; letter-spacing: -0.055em; line-height: 0.8; }
.t-go { grid-column: span 4; min-height: 20rem; background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.t-go .lead { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.035em; line-height: 1; max-width: 8ch; }
.t-go svg { align-self: flex-end; transition: transform var(--t-ui) var(--ease-out); }
.t-go:focus-visible { outline-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .t-go:hover svg { transform: translate(6px, -6px); }
  .tabs button:hover { background: var(--surface-2); }
  .tabs button[aria-selected="true"]:hover { background: var(--black); }
  .stage-names button:hover { color: var(--ink); }
  .seg button:hover { color: var(--ink); }
  .seg button[aria-pressed="true"]:hover { color: var(--accent-ink); }
}

/* ---------- motion ---------- */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.lines [data-line] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* the signature move: the status readout opens like a shutter */
  .js .stage .shutter { clip-path: inset(0 0 100% 0); animation: shutter 1100ms var(--ease-in-out) 500ms forwards; }
  .js .stage .shutter .term-body { transform: scale(1.06); transform-origin: 0 0; animation: settle 1500ms var(--ease-soft) 500ms forwards; }
  .js video.shutter[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js video.shutter[data-reveal].is-in { clip-path: inset(0); }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes line-up { to { transform: none; } }
@keyframes shutter { to { clip-path: inset(0); } }
@keyframes settle { to { transform: none; } }

/* ---------- tablet ---------- */
@media (max-width: 64em) {
  .stage { left: 22%; top: 50%; }
  .broll-field { grid-column: 1 / 7; }
  .broll-col { grid-column: 7 / 13; padding-left: var(--margin); }
  .out { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; width: min(33rem, 86vw); }
  .stage .term-title { display: none; }
  [data-ui] .term-bar { justify-content: flex-start; }
  .row { padding-inline: calc(50vw - min(16.5rem, 43vw)); }
  .ledger { margin-left: var(--margin); }
  .preview { display: none; }
  .vphone { display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin: 1rem 0 0.6rem; }
  .band { grid-template-columns: 30% minmax(0, 1fr); }
  .band-engine { display: none; }
  .t-say, .t-install { grid-column: span 6; }
  .t-nav, .t-links { grid-column: span 6; min-height: 0; }
  .t-mark, .t-go { grid-column: span 12; min-height: 14rem; }
}

/* ---------- the pipeline stacks ---------- */
@media (max-width: 56em) {
  .pipeline { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .pipe-right { order: 1; padding: 2rem var(--margin); min-height: 46svh; }
  .pipe-slider { order: 2; background: var(--black); padding-top: 1.25rem; padding-bottom: 0.5rem; }
  .pipe-left { order: 3; padding: 1.5rem var(--margin) 3.5rem; min-height: 19rem; }
  .pipe-slider input::-webkit-slider-thumb { width: 40px; height: 40px; margin-top: -16px; }
  .pipe-slider input::-moz-range-thumb { width: 40px; height: 40px; }
  .stage-names { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0.75rem 0 0; padding: 0; }
  .stage-names li, .stage-names li:first-child, .stage-names li:last-child { width: auto; justify-content: flex-start; margin: 0; }
  .stage-names button { min-height: 2.5rem; padding-left: 0; }
  [data-ui].folder .term-body { font-size: 13px; padding: 1.1rem; }
  #clause { font-size: clamp(2.4rem, 9vw, 4rem); }
}

/* ---------- phone ---------- */
@media (max-width: 44em) {
  .nav-links li:not(:last-child) { display: none; }
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero-copy { padding-top: 3.5rem; }
  .display { font-size: 10vw; }
  .stage { position: relative; left: auto; top: auto; margin-top: 3rem; height: 27rem; clip-path: polygon(0 2.5rem, 4.5rem 2.5rem, 4.5rem 0, 100% 0, 100% 100%, 0 100%); }
  .stage .term { left: 1rem; top: 3.5rem; width: 47rem; }

  .outputs-head { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
  .row { gap: 4vw; padding-inline: 7vw; }
  .out { width: 86vw; }

  .broll { display: block; }
  .broll-field { height: 42svh; z-index: 2; }
  .field-note { bottom: 0.6rem; }
  .broll-col { padding: 3rem var(--margin) 4rem; }
  .clip { margin-top: 5rem; }
  .seg-page button { flex: 1; }
  .seg-page { display: flex; }

  .ledger { width: auto; margin-inline: var(--margin); }
  .vrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.1rem; min-height: 3.25rem; padding-block: 0.6rem; }
  .vtitle { grid-column: 1 / -1; }
  .vlen { grid-column: 1; }
  .vdate { grid-column: 2; color: var(--white-muted); }

  .commands-head { flex-direction: column; align-items: stretch; margin-bottom: 2rem; }
  .agenda { grid-template-columns: 1fr; gap: 1rem; }
  .tabs { grid-auto-flow: column; grid-auto-columns: 7.5rem; overflow-x: auto; top: 0; margin-inline: calc(var(--margin) * -1); padding: 6px var(--margin); background: var(--bg); z-index: 2; scrollbar-width: none; }
  .tabs button[aria-selected="true"] { border-left: 0; padding-left: 1rem; border-bottom: 6px solid var(--accent); }
  .band { grid-template-columns: 1fr; row-gap: 0.3rem; padding: 1rem; }
  .panel-h span { display: block; margin: 0; font-size: 1rem; }

  .cta { padding-block: 20svh 14svh; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 6px 6px; }
  .tile { min-height: 0; padding: 1.25rem; }
  .t-mark { grid-column: 1 / -1; order: 1; min-height: 10rem; }
  .t-mark span { font-size: 24vw; }
  .t-go { grid-column: 1 / -1; order: 2; min-height: 11rem; }
  .t-nav { grid-column: auto; order: 3; }
  .t-links { grid-column: auto; order: 4; justify-content: flex-start; font-size: var(--step-body); }
  .t-install { grid-column: 1 / -1; order: 5; }
  .t-say { grid-column: 1 / -1; order: 6; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; }
}