/* Hallmark · shape: terminal-led product page, hero diagram then real CLI output · genre: modern-minimal · theme: custom · job: sign up (install) · idea: "the page is zap's own terminal output, and the hero shows it deciding what goes" · vibe: "night terminal, one yellow bolt, plain proof"
 * paper: oklch(19.5% 0.018 285) · accent: oklch(88% 0.17 95) · display: Archivo Black · body: Inter · hero: head and install on the left, a looping flow diagram of zap sorting worktrees on the right · nav: lockup left, two text links and GitHub right · footer: install line again over a one-row link list · imagery: the product (real terminal output, the launch video) · signature: the hero diagram where three worktrees are zapped and one with an .env is kept
 * axes: dark/display-heavy/chromatic-yellow · posture: Stage · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5 · weakest: E, terminal blocks are wide; they scroll inside their frame on phones instead of wrapping */
/* Hallmark · waive 47b · one terminal frame per output, real zap output inside · the terminal is the product the page sells */
/* Hallmark · waive 77 · the agents section is a five-row table of folders beside its head · the table is the object, a list of where each agent keeps worktrees */
/* Hallmark · answered F18 · the two data-slot frames hold live terminal text from zap, not images, so there is nothing for a slot script to drop in */
/* Hallmark · dismissed 58 · the page total counts zap's real terminal output inside product frames; the prose outside them is under budget. The hero line runs 15 words because the 12-word version read as unclear to the owner */
/* Hallmark · waive 64 · mono is the outlier face, used only on real command lines and captured zap output · a CLI's material is its terminal text */
@import url("./tokens.css");
@import url("./base.css");


/* nav */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; }
.nav img { width: 96px; min-width: 80px; height: auto; }
.nav ul { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; align-items: center; }
.nav a { text-decoration: none; color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; }
.nav a:hover { color: var(--color-ink); }

/* buttons and the install line */
.btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border-radius: 10px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.btn:hover { background: color-mix(in oklab, var(--color-accent) 88%, white); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.install { width: min(100%, 30rem); display: flex; align-items: center; gap: var(--space-sm); max-width: 100%; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 10px; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); font-family: var(--font-outlier); font-size: var(--text-md); color: var(--color-ink); }
.install code { flex: 1; overflow-x: auto; white-space: nowrap; min-width: 0; }
.install code::before { content: "$ "; color: var(--color-muted); }
.copy { flex: none; min-height: 44px; padding: 0 var(--space-sm); border-radius: 7px; border: 1px solid var(--color-rule); background: var(--color-paper-3); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-xs); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.copy:hover { color: var(--color-ink); background: var(--color-rule); }
.copy:active { transform: translateY(1px); }
.copy:disabled { opacity: 0.5; cursor: not-allowed; }
.copy[data-done] { color: var(--color-success); }

/* hero */
.hero { min-height: calc(100svh - 64px); display: grid; align-content: center; padding-block: var(--space-2xl); }
.hero .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.hero h1 { font-size: var(--text-display); line-height: 1.02; letter-spacing: var(--tracking-display); }
.hero .lede { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 34ch; }
.hero .container > * { min-width: 0; }
.hero .actions { margin-top: var(--space-xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); justify-items: start; }
.hero .also { color: var(--color-muted); font-size: var(--text-sm); }
.hero .also a { color: var(--color-ink-2); }
@media (max-width: 60rem) { .hero { min-height: 0; } .hero .container { grid-template-columns: minmax(0, 1fr); } .hero .actions { justify-items: stretch; } .hero .btn { justify-self: start; } }

/* the hero diagram: worktrees in, zap sorts them, three zapped, two kept, on a 10 s loop */
.flow { width: 100%; height: auto; }
.flow text { font-family: var(--font-outlier); font-size: 12px; fill: var(--color-ink-2); }
.flow .lbl { font-family: var(--font-body); font-size: 11px; fill: var(--color-muted); }
.flow .wt rect { fill: var(--color-paper-2); stroke: var(--color-rule); }
.flow .core { fill: var(--color-paper-2); stroke: var(--color-accent); stroke-width: 1.5; }
.flow .core-t { font-family: var(--font-display); font-size: 22px; fill: var(--color-ink); }
.flow .wire { fill: none; stroke: var(--color-muted); stroke-width: 1.2; stroke-dasharray: 4 6; animation: flow 1.1s linear infinite; }
.flow .out { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 100 101; stroke-dashoffset: 100; animation: draw 10s var(--ease-out) infinite; } /* pathLength="100": one dash covers any curve exactly */
.flow .out.kept { stroke: var(--color-keep); }
.flow .tick { opacity: 0; animation: t1 10s infinite; }
.flow .tick.k2 { animation-name: t2; } .flow .tick.k3 { animation-name: t3; fill: var(--color-accent); }
.flow .res { opacity: 0; animation: res 10s infinite; }
.flow .res rect { fill: var(--color-paper-2); stroke: var(--color-accent); }
.flow .res.kept rect { stroke: var(--color-keep); }
.flow .res .z { fill: var(--color-accent); }
.flow .res.kept .z { fill: var(--color-keep); }
.flow .freed { opacity: 0; animation: freed 10s infinite; }
.flow .freed .big { font-family: var(--font-display); font-size: 18px; fill: var(--color-accent); }
.flow .d1 { animation-delay: 0s; } .flow .d2 { animation-delay: .2s; } .flow .d3 { animation-delay: .4s; } .flow .d4 { animation-delay: .6s; } .flow .d5 { animation-delay: .8s; }
@keyframes flow { to { stroke-dashoffset: -20; } }
@keyframes t1 { 0%, 2% { opacity: 0; } 4%, 18% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes t2 { 0%, 20% { opacity: 0; } 22%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes t3 { 0%, 36% { opacity: 0; } 38%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes draw { 0%, 38% { stroke-dashoffset: 100; } 50%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes res { 0%, 46% { opacity: 0; transform: translateX(-6px); } 54%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes freed { 0%, 64% { opacity: 0; } 70%, 94% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .flow .wire, .flow .out, .flow .tick, .flow .res, .flow .freed { animation: none; }
  .flow .out { stroke-dashoffset: 0; } .flow .res, .flow .freed { opacity: 1; }
  .flow .tick { opacity: 0; } .flow .tick.k3 { opacity: 1; }
}

/* sections */
.s { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.s-head { display: grid; gap: var(--space-md); max-width: 46rem; margin-bottom: var(--space-xl); }
.s h2 { font-size: var(--text-section); line-height: 1.05; letter-spacing: var(--tracking-display); }
.s-head p { color: var(--color-ink-2); font-size: var(--text-lead); }
.s code, .note code { font-family: var(--font-outlier); font-size: 0.9em; color: var(--color-ink); }
.note { margin-top: var(--space-lg); color: var(--color-ink-2); }

/* terminal output: one frame, real zap output inside */
.term { margin: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); overflow: hidden; }
.term[data-slot] { background: var(--color-paper-2); }
.term + .term { margin-top: var(--space-lg); }
.term figcaption { display: grid; border-bottom: 1px solid var(--color-rule); }
.term figcaption .cmd { padding: var(--space-sm) var(--space-lg); font-family: var(--font-outlier); font-size: var(--text-md); color: var(--color-ink); }
.term figcaption .desc { padding: var(--space-xs) var(--space-lg); background: var(--color-paper-3); border-top: 1px solid var(--color-rule); color: var(--color-accent); font-size: var(--text-sm); }
.term pre { margin: 0; padding: var(--space-lg); overflow-x: auto; font-family: var(--font-outlier); font-size: 0.9375rem; line-height: 1.55; color: var(--color-ink-2); }
.split .term pre { font-size: var(--text-sm); padding-inline: var(--space-md); }
.term .strong { color: var(--color-ink); font-weight: 700; }
.term .ok, .flow .ok { color: var(--color-success); }
.term .no { color: var(--color-keep); }
.term .hi { color: var(--color-accent); }
.st-merged { color: var(--color-success); }
.st-empty { color: var(--color-blue); }
.st-active { color: var(--color-muted); }
.f-stale { color: var(--color-accent); } .f-used { color: var(--color-blue); } .f-temp { color: var(--color-keep); } .f-log { color: var(--color-muted); }

/* tabs */
.tablist { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.tablist button { min-height: 44px; padding: 0 var(--space-md); border-radius: 9px; border: 1px solid var(--color-rule); background: transparent; color: var(--color-ink-2); font-family: var(--font-outlier); font-size: var(--text-md); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.tablist button:hover { color: var(--color-ink); background: var(--color-paper-2); }
.tablist button:active { transform: translateY(1px); }
.tablist button[aria-selected="true"] { background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-muted); }
.tablist button:disabled { opacity: 0.5; cursor: not-allowed; }

/* rules: removed when, kept when */
.rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
.rules h3 { font-size: var(--text-title); font-weight: 400; margin-bottom: var(--space-md); }
.rules dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-sm) var(--space-lg); }
.rules dt { font-family: var(--font-outlier); font-size: var(--text-md); color: var(--color-ink); padding-top: var(--space-3xs); }
.rules dd { margin: 0; color: var(--color-ink-2); }
@media (max-width: 48rem) { .rules { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* undo: words beside the output */
.split .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.split .s-head { margin-bottom: 0; }
@media (max-width: 60rem) { .split .container { grid-template-columns: minmax(0, 1fr); } }

/* video */
.film { width: 100%; aspect-ratio: 1; border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper-2); }
.film-wide { display: none; }
@media (min-width: 60rem) {
  #video .container { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #video .s-head { margin-bottom: var(--space-xl); }
  #video .film-sq { display: none; }
  #video .film-wide { display: block; aspect-ratio: 16 / 9; }
}

/* agents table */
.agents { width: 100%; border-collapse: collapse; font-size: var(--text-lead); }
.agents th { text-align: left; font-weight: 600; font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); }
.agents td { padding: var(--space-sm) var(--space-lg) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }

/* close and footer */
.cmds { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.cmds .install { width: 100%; }
.cmds .note { margin-top: 0; }
.foot { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl); }
.foot .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.foot ul { display: flex; flex-wrap: wrap; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.foot a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.foot a:hover { color: var(--color-ink); text-decoration: underline; }

/* phones: the install line wraps instead of clipping; the diagram's labels stay readable */
@media (max-width: 40rem) {
  .install code { white-space: normal; overflow-wrap: anywhere; }
  .flow text { font-size: 15px; } .flow .lbl { font-size: 13.5px; } .flow .core-t { font-size: 26px; }
}
/* a terminal that scrolls sideways fades at its right edge until scrolled to the end */
.term { position: relative; }
.term.scrolls::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48px; pointer-events: none; background: linear-gradient(to right, transparent, var(--color-paper-2)); transition: opacity var(--dur-short) var(--ease-out); }
.term.scrolls.scrolled-end::after { opacity: 0; }
@media (max-width: 40rem) { .nav .wide { display: none; } }
.rules .when { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-sm); color: var(--color-ink-2); }
.rules .when li::marker { color: var(--color-keep); }
/* tab panels share one grid cell, so switching never changes the height */
.js .panels { display: grid; }
.js .panels > .term { grid-area: 1 / 1; margin: 0; }
.js .panels > .term.off { visibility: hidden; }