/* Void on the web. The app's own language (docs/design/tokens.md): true black, one mono face, hairlines that open a group, colour that
   means state. The page itself is square; the drawings of the phone, the iPad and the app keep the app's radii. Every motion is CSS,
   motivated by something the app really does, and all of it stops under Reduce Motion. No scripts, no cookies, no third-party requests. */

@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-Regular.woff") format("woff"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-Medium.woff") format("woff"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-Bold.woff") format("woff"); }

:root {
  color-scheme: dark;
  /* Theme.Palette */
  --ground: #000000;
  --text: #edeff2;
  --soft: #d3d5d9;
  --dim: #9a9da3;
  --faint: #5d6168;
  --mint: #7cf0b5;
  --amber: #ffb020;
  --red: #ff5f56;
  --rule: #1d2327;
  --rule-strong: #2e353b;
  --card: #0a0d0f;
  --card-line: #1d2327;
  --well: #0b0f11;
  --key: #363c43;
  --selection: #17191c;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Motion.grow, the app's spring (.34 s, damping .84), as a curve */
  --spring: cubic-bezier(0.2, 0.9, 0.25, 1);
  --story: 12s;
  --q: 10s;
}

* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
::selection { background: var(--mint); color: #000; }
img { max-width: 100%; }

a { color: var(--mint); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--mint) 45%, transparent); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--mint); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* The header: the mark and two words, a hairline under them, and the page sliding under it. */
.top { position: sticky; top: 0; z-index: 10; background: rgb(0 0 0 / 0.8); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--rule); padding-top: env(safe-area-inset-top); }
.top-row { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 24px; height: 19px; fill: var(--mint); flex: none; }
.top nav { display: flex; gap: 28px; font-size: 14px; }
.top nav a { color: var(--dim); text-decoration: none; padding: 6px 0; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--text); }
.top nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--mint); }

/* Keys: the one filled thing on the page is the mint block, like the cursor and the mark. */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.key { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border: 1px solid var(--key); color: var(--text); text-decoration: none; font-weight: 500; font-size: 15px; white-space: nowrap; transition: background-color 0.2s, border-color 0.2s, transform 0.12s; }
.key:hover { background: var(--selection); text-decoration: none; }
.key:active { transform: translateY(1px); }
.key.go { background: var(--mint); border-color: var(--mint); color: #000; }
.key.go:hover { background: #a6f6cd; border-color: #a6f6cd; }
.key.quiet { color: var(--dim); border-color: var(--rule-strong); }
.key.quiet:hover { background: none; }
.actions + .small { margin-top: 14px; }

/* The caret: the app's block cursor. */
.caret { display: inline-block; width: 0.5em; height: 0.8em; margin-left: 0.08em; vertical-align: -0.04em; background: var(--mint); animation: caret 1.1s steps(1) infinite; }
.cursor { color: var(--mint); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.lede { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; color: var(--soft); max-width: 36rem; margin: 0; text-wrap: pretty; }
p, dd, figcaption { text-wrap: pretty; }
.small { font-size: 13px; color: var(--dim); }
.mint { color: var(--mint); }
.amber { color: var(--amber); }
.red { color: var(--red); }
.dim { color: var(--dim); }

/* ---------------------------------------------------------------- the landing page */

.landing > section { position: relative; padding: 128px 0; border-top: 1px solid var(--rule-strong); }
.landing h2 { font-size: clamp(32px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; margin: 0 0 24px; max-width: 16ch; }

/* Hero: the words on the left, Void's Home living on the right. */
.landing > .hero { border-top: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 24px; min-height: min(calc(100dvh - 64px), 920px); }
.hero-copy { padding-top: clamp(56px, 15vh, 150px); }
.hero h1 { font-size: clamp(44px, 5.9vw, 86px); line-height: 0.98; letter-spacing: -0.055em; font-weight: 700; margin: 0 0 32px; }
/* Two lines, each a line of its own. */
.hero h1 .rise { display: block; white-space: nowrap; }
.rise { animation: rise 1s var(--spring) both; }
.hero h1 .rise:nth-child(2) { animation-delay: 0.08s; }
.hero .lede.rise { animation-delay: 0.18s; }
.hero .actions.rise { animation-delay: 0.28s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hero-device { position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: 36px; overflow: hidden; height: min(calc(100dvh - 64px), 920px);
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 99%); mask-image: linear-gradient(to bottom, #000 82%, transparent 99%); animation: rise 1.2s var(--spring) 0.2s both; }
/* The marketing backdrop of tokens.md: near black, a faint mint glow behind the device. */
.hero-device::before { content: ""; position: absolute; inset: 0; background: radial-gradient(48% 38% at 50% 34%, rgb(124 240 181 / 0.09), transparent 70%); pointer-events: none; }

.phone { position: relative; width: 372px; height: 806px; flex: none; padding: 11px; border: 1px solid var(--rule-strong); border-radius: 60px; background: #050607; }
.phone::after { content: ""; position: absolute; top: 24px; left: 50%; width: 112px; height: 32px; margin-left: -56px; border-radius: 20px; background: #000; box-shadow: 0 0 0 1px #121518; }
.screen { position: relative; height: 100%; border-radius: 49px; background: #000; overflow: hidden; }

/* --- Home, drawn with the app's measures (402 pt wide, here 350 px). */
.home { font-size: 12px; color: var(--soft); animation: loop var(--story) infinite; }
@keyframes loop { 0%, 95% { opacity: 1; } 97.5% { opacity: 0.25; } 100% { opacity: 1; } }
.sbar { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 4px 38px 0 52px; font-weight: 700; font-size: 14px; color: var(--text); }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.bars i { width: 3px; background: var(--text); border-radius: 1px; }
.bars i:nth-child(1) { height: 4px; } .bars i:nth-child(2) { height: 6px; } .bars i:nth-child(3) { height: 8px; } .bars i:nth-child(4) { height: 10px; }

.h-top { display: flex; align-items: center; gap: 10px; padding: 6px 14px 0; height: 40px; }
.h-mac { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 11.5px; white-space: nowrap; }
.h-mac em { color: var(--mint); font-style: normal; margin-left: -2px; }
.laptop { position: relative; width: 13px; height: 9px; border: 1.3px solid var(--text); border-radius: 2px; margin-right: 2px; }
.laptop::after { content: ""; position: absolute; left: -3.5px; right: -3.5px; bottom: -4.3px; height: 1.3px; background: var(--text); border-radius: 1px; }
.live { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); margin-left: 4px; }
.h-acct { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 11.5px; }
.chev { width: 5px; height: 5px; border-right: 1.3px solid var(--dim); border-bottom: 1.3px solid var(--dim); transform: rotate(45deg) translate(-1px, -1px); }
.h-plus { color: var(--mint); font-size: 22px; line-height: 1; font-weight: 400; padding: 0 2px 0 6px; }

.h-stats { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; padding: 10px 14px 12px; border-bottom: 1px solid var(--rule-strong); font-size: 10px; color: var(--dim); white-space: nowrap; }
.h-st { display: inline-flex; align-items: center; gap: 3px; }
.h-st:first-child { display: block; line-height: 1.25; }
.h-st > b, .h-st > .flip { color: var(--text); font-size: 13px; font-weight: 700; }
.h-st small { display: block; font-size: 10px; }
.h-st em, .h-st > em.flip { font-style: normal; color: var(--mint); font-size: 10px; font-weight: 400; }
.h-st .mint { color: var(--mint); }
.h-st .amber { color: var(--amber); }
.tick { color: var(--mint); font-style: normal; font-size: 11px; }

/* A number that changes slides to the next one, as the app's numeric transition does. */
.flip { display: inline-grid; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: bottom; }
.flip > span { display: block; }
.f-working > span { animation: flip3 var(--story) infinite; }
.f-done > span, .f-new > span { animation: flipAt30 var(--story) infinite; }
.f-need > span { animation: flipAt60 var(--story) infinite; }
@keyframes flip3 { 0%, 28% { transform: translateY(0); } 31%, 58% { transform: translateY(-100%); } 61%, 96% { transform: translateY(-200%); } 99%, 100% { transform: translateY(0); } }
@keyframes flipAt30 { 0%, 28% { transform: translateY(0); } 31%, 96% { transform: translateY(-100%); } 99%, 100% { transform: translateY(0); } }
@keyframes flipAt60 { 0%, 58% { transform: translateY(0); } 61%, 96% { transform: translateY(-100%); } 99%, 100% { transform: translateY(0); } }

.h-tools { display: grid; grid-template-columns: 1fr 1fr; align-items: center; height: 44px; margin: 12px 11px 0; border: 1px solid var(--card-line); border-radius: 12px; background: var(--card); color: var(--text); font-size: 12.5px; }
.h-tools span { display: flex; align-items: center; gap: 9px; padding: 0 13px; height: 100%; }
.h-tools span + span { border-left: 1px solid var(--rule); }
.out { margin-left: auto; color: var(--dim); font-style: normal; }
/* The concierge's orb: a disc of dots, as the app draws it. */
.orb { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, var(--mint) 0.9px, transparent 1.3px) 0 0 / 3.2px 3.2px; -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%); mask-image: radial-gradient(circle, #000 55%, transparent 72%); }
.h-find { display: flex; align-items: center; gap: 7px; height: 42px; margin: 10px 11px 0; padding: 0 13px; border: 1px solid var(--key); border-radius: 12px; color: var(--dim); font-size: 12px; }
.h-find em { color: var(--mint); font-style: normal; }

.h-ws { list-style: none; margin: 14px 0 0; padding: 0 11px; display: grid; gap: 9px; }
.ws { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 12px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--card); color: var(--dim); font-size: 13px; }
.ws-name { flex: 1; }
.badge { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--c); color: #000; font-weight: 700; font-size: 12.5px; }
/* The workspace colours kitty gives (tokens.md). */
.badge.orange { background: #f0883e; } .badge.purple { background: #a371f7; } .badge.green { background: #3fb950; } .badge.blue { background: #4f8ff7; }
/* What a workspace asks says itself on its card: amber line and wash for a decision (tokens.md, "Home tells you what needs you"). */
.ws.tone-wait { border: 1.5px solid rgb(255 176 32 / 0.85); background: #1b1810; color: var(--text); font-weight: 500; }
.wmark.wait { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--amber); color: #000; font-size: 10.5px; font-weight: 700; animation: blink 1.2s infinite; }
.ws.open { display: block; padding: 0; }
.ws-head { display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 12px; }
.hopa { border: 1.5px solid rgb(255 176 32 / 0.85); background: #1b1810; animation: rise 0.8s var(--spring) 0.69s both, hopaTone var(--story) infinite; }
/* Home's cards come up one after another, as the app's lists arrive (Motion.grow). */
.h-ws > li:not(.hopa) { animation: rise 0.8s var(--spring) both; }
.h-ws > li:nth-child(1) { animation-delay: 0.55s; } .h-ws > li:nth-child(2) { animation-delay: 0.62s; }
.h-ws > li:nth-child(4) { animation-delay: 0.76s; } .h-ws > li:nth-child(5) { animation-delay: 0.83s; }
.hopa .ws-name { color: var(--text); font-weight: 500; }
@keyframes hopaTone { 0%, 58% { border-color: rgb(255 176 32 / 0.85); background-color: #1b1810; } 61%, 96% { border-color: rgb(124 240 181 / 0.5); background-color: #101817; } 99%, 100% { border-color: rgb(255 176 32 / 0.85); background-color: #1b1810; } }

.ses { list-style: none; margin: 0; padding: 0 12px 2px; }
.s { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); }
.g { grid-row: 1 / 3; display: grid; place-items: center; width: 22px; height: 22px; }
.g > * { grid-area: 1 / 1; }
.s-name { color: var(--text); font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-name .new { font-style: normal; font-weight: 400; color: var(--mint); margin-left: 5px; }
.s-time { color: var(--dim); font-size: 10.5px; }
.s-line { grid-column: 2 / 4; display: grid; color: var(--dim); font-size: 10.5px; min-width: 0; }
.s-line em { grid-area: 1 / 1; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-line .amber { color: var(--amber); }

/* The app's glyphs: the braille spinner (BrailleSpinner's ten frames, 0.9 s), the amber ring that blinks (1.2 s), the mint ring that breathes (2.4 s). */
.spin { display: inline-grid; grid-template-rows: repeat(3, 2.5px); grid-auto-flow: column; grid-auto-columns: 2.5px; gap: 1.6px 1.8px; vertical-align: middle; }
.spin b { width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--mint); opacity: 0; animation: 0.9s step-end infinite; }
.spin b:nth-child(1) { animation-name: d1; } .spin b:nth-child(2) { animation-name: d2; } .spin b:nth-child(3) { animation-name: d3; }
.spin b:nth-child(4) { animation-name: d4; } .spin b:nth-child(5) { animation-name: d5; } .spin b:nth-child(6) { animation-name: d6; }
@keyframes d1 { 0% { opacity: 1; } 30% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes d2 { 0% { opacity: 1; } 10% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes d3 { 0% { opacity: 0; } 40%, 100% { opacity: 1; } }
@keyframes d4 { 0% { opacity: 1; } 50% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes d5 { 0% { opacity: 0; } 10% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes d6 { 0% { opacity: 0; } 20% { opacity: 1; } 80%, 100% { opacity: 0; } }

.ring { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1.6px solid currentColor; font-style: normal; font-size: 8px; font-weight: 700; line-height: 1; }
.ring.amber { color: var(--amber); }
.ring.mint { color: var(--mint); background: rgb(124 240 181 / 0.14); }
.ring.dot::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.h-st .ring { width: 13px; height: 13px; }
.blink { animation: blink 1.2s infinite; }
.breathe { animation: breathe 2.4s ease-in-out infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 66.6%, 83.3% { opacity: 0.22; } 100% { opacity: 1; } }
@keyframes breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* The story on Home's clock. Still (Reduce Motion), it is its first moment: the a1/b1 parts show, the a2/b2 parts wait. */
.merchant .a2, .backend .b2 { opacity: 0; }
.merchant .ring.a1 { animation: blink 1.2s infinite, outAt60 var(--story) infinite; }
.merchant .s-line .a1 { animation: outAt60 var(--story) infinite; }
.merchant .a2 { animation: inAt60 var(--story) infinite; }
.backend .spin.b1, .backend .s-line .b1 { animation: outAt30 var(--story) infinite; }
.backend .ring.b2 { animation: breathe 2.4s ease-in-out infinite, inAt30Filter var(--story) infinite; opacity: 1; filter: opacity(0); }
.backend .new.b2, .backend .s-line .b2 { animation: inAt30 var(--story) infinite; }
@keyframes outAt60 { 0%, 58% { filter: opacity(1); transform: none; } 61%, 96% { filter: opacity(0); transform: scale(0.7); } 99%, 100% { filter: opacity(1); transform: none; } }
@keyframes inAt60 { 0%, 58% { opacity: 0; transform: translateY(3px); } 61%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes outAt30 { 0%, 28% { filter: opacity(1); transform: none; } 31%, 96% { filter: opacity(0); transform: scale(0.7); } 99%, 100% { filter: opacity(1); transform: none; } }
@keyframes inAt30 { 0%, 28% { opacity: 0; transform: translateY(3px); } 31%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes inAt30Filter { 0%, 28% { filter: opacity(0); transform: scale(0.7); } 31%, 96% { filter: opacity(1); transform: none; } 99%, 100% { filter: opacity(0); transform: scale(0.7); } }

/* Sections that follow the hero: copy on top, the thing itself below. */
.section-copy { max-width: 40rem; }

/* --- Approve: a session asks, the answer is chosen, the push runs. One 10 second clock (--q). */
.stage { display: flex; justify-content: flex-end; margin-top: 64px; }
/* A fixed frame: the question opening and closing moves the conversation inside it, never the page. */
.sess { display: flex; flex-direction: column; width: min(100%, 760px); height: 660px; font-size: 16px; color: var(--text); }
.sess-head { display: flex; align-items: center; gap: 14px; height: 60px; border-bottom: 1px solid var(--rule-strong); font-size: 17px; }
.sess-head .back { color: var(--dim); font-size: 26px; line-height: 1; margin-right: 4px; }
.sess-head > b { color: var(--amber); font-weight: 500; animation: headName var(--q) infinite; }
.sess-head .ring { width: 18px; height: 18px; }
.sess-head .ring.dot::after { width: 7px; height: 7px; }
.sess-head .tty { margin-left: auto; color: var(--dim); }
.chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 140px); mask-image: linear-gradient(to bottom, transparent, #000 140px); }
.c-old { color: var(--soft); }
.ask, .keys { flex: none; }
.chat p { margin: 0; padding: 10px 0; }
.c-meta { color: var(--faint); font-size: 13px; }
.c-you { color: var(--mint); }
.c-you::before { content: "❯ "; }
.c-tool { display: flex; align-items: center; gap: 12px; }
.pt { width: 7px; height: 7px; border-radius: 50%; background: var(--text); margin: 0 4px 0 2px; }
.chat .c-row { border-top: 1px solid var(--rule); padding: 14px 0; }
/* Two things that take turns in one place (a word, a glyph) are stacked, and only one shows. */
.swapw { display: inline-grid; justify-items: start; align-items: center; }
.swapw > * { grid-area: 1 / 1; }
.swapw .w2, .swapw .q2 { opacity: 0; }
.pr { color: var(--dim); }
.end { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--dim); font-size: 13px; }
.ok { color: var(--mint); font-style: normal; }
/* Still: the moment the question is asked (the push running, the question open, nothing said yet). */
.chat .c-said { color: var(--text); max-height: 0; padding: 0; opacity: 0; }
.ask { overflow: hidden; margin: 8px 0 16px; border: 1.5px solid rgb(255 176 32 / 0.8); border-radius: 16px; }
.ask-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.ask-head .amber { margin-left: auto; font-size: 14px; }
.ask-row { display: flex; align-items: center; gap: 20px; padding: 16px 20px; border-top: 1px solid var(--rule); }
.ask-row .n { color: var(--dim); font-size: 14px; }
.ask-row .dim { margin-left: auto; font-size: 13px; }
.keys { display: grid; grid-template-columns: repeat(5, 1fr); height: 56px; align-items: center; border-top: 1px solid var(--rule-strong); color: var(--soft); text-align: center; font-size: 15px; }
.keys span + span { border-left: 1px solid var(--rule); }

/* --- The relay: words leave the phone, cross the relay sealed, arrive on the Mac; an answer comes back. */
.wire { position: relative; margin-top: 72px; }
.wire-nodes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.node { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.node b { font-weight: 700; }
.node small { color: var(--dim); font-size: 12px; letter-spacing: 0.04em; }
.node.mid { text-align: center; align-items: center; }
.node.end { text-align: right; align-items: flex-end; justify-self: end; }
.node.mid b { color: var(--mint); }
.lane { position: relative; height: 54px; container-type: inline-size; }
.lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule-strong); }
.lane::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 1px solid var(--mint); background: #000; transform: rotate(45deg); }
.pkt { position: absolute; z-index: 1; left: 0; top: 50%; display: grid; margin-top: -15px; font-size: 13px; line-height: 1; opacity: 0; animation: goOut 7.5s linear infinite; animation-delay: var(--d); }
.pkt i { grid-area: 1 / 1; display: block; padding: 8px 11px; font-style: normal; white-space: nowrap; background: #000; justify-self: start; }
.pkt .plain { color: #000; background: var(--mint); font-weight: 500; animation: plainA 7.5s linear infinite; animation-delay: var(--d); }
.pkt .seal { color: var(--dim); border: 1px solid var(--rule-strong); letter-spacing: 0.06em; opacity: 0; animation: sealed 7.5s linear infinite; animation-delay: var(--d); }
.pkt .late { opacity: 0; animation-name: plainB; }
.lane.back .pkt { animation-name: goBack; }
.k1 { --d: 0s; } .k2 { --d: -2.5s; } .k3 { --d: -5s; } .k4 { --d: -1.2s; } .k5 { --d: -4.95s; }
@keyframes goOut { 0% { transform: translateX(0); opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { transform: translateX(calc(100cqw - 100%)); opacity: 0; } }
@keyframes goBack { 0% { transform: translateX(calc(100cqw - 100%)); opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes plainA { 0%, 26% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes sealed { 0%, 26% { opacity: 0; } 31%, 69% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes plainB { 0%, 69% { opacity: 0; } 74%, 100% { opacity: 1; } }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 80px; }
.facts p { margin: 0; padding-top: 20px; border-top: 1px solid var(--rule-strong); color: var(--dim); font-size: 15px; }
.facts b { display: block; margin-bottom: 8px; color: var(--text); font-size: 16px; }

/* --- The real app: the App Store screens, a rail to swipe through, and the iPad. */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(210px, 21vw, 262px); gap: 28px; margin: 56px -28px 0; padding: 6px 28px 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 28px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.rail figure { margin: 0; scroll-snap-align: start; }
.frame { display: block; padding: 7px; border: 1px solid var(--rule-strong); border-radius: 40px; background: #050607; transition: transform 0.5s var(--spring), border-color 0.3s; }
.frame img { display: block; width: 100%; height: auto; border-radius: 33px; }
.rail figure:hover .frame { transform: translateY(-6px); border-color: rgb(124 240 181 / 0.45); }
figcaption { margin-top: 16px; color: var(--dim); font-size: 13px; }
.pad { margin: 96px 0 0 auto; max-width: 620px; }
.frame.wide { border-radius: 30px; padding: 9px; }
.frame.wide img { border-radius: 22px; }

/* --- The Mac: its menu, and the code it shows. */
.landing > .mac { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.mac-visual { position: relative; min-height: 520px; border-top: 1px solid var(--rule-strong); }
.mac-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 45% at 60% 35%, rgb(124 240 181 / 0.07), transparent 70%); pointer-events: none; }
.menubar { display: flex; justify-content: flex-end; align-items: center; gap: 18px; height: 32px; padding: 0 14px; border-bottom: 1px solid var(--rule); color: var(--soft); font-size: 13px; font-weight: 500; }
.menubar .brand-mark { width: 18px; height: 14px; }
.menu { position: absolute; top: 40px; right: 38px; width: 290px; padding: 6px; border: 1px solid var(--rule-strong); border-radius: 12px; background: #0e1113; font-size: 13.5px; color: var(--text); }
.menu p { margin: 0; }
.m-status { display: flex; align-items: center; gap: 8px; padding: 9px 12px 11px; color: var(--dim); border-bottom: 1px solid var(--rule); margin-bottom: 4px !important; }
.m-status .live { margin: 0; }
.m-item { padding: 7px 12px; border-radius: 7px; }
.m-item.on { background: rgb(124 240 181 / 0.12); color: var(--mint); }
.m-rule { height: 1px; background: var(--rule); margin: 5px 8px !important; }
.qr { --qr: 176px; position: absolute; left: 6%; bottom: 22px; display: flex; flex-direction: column; gap: 14px; color: var(--dim); font-size: 12px; }
.qr img { position: relative; width: var(--qr); height: var(--qr); padding: 12px; background: var(--text); border-radius: 14px; image-rendering: pixelated; }
/* A scan line passes over the code: it is waiting to be scanned. */
.qr::before { content: ""; position: absolute; left: 0; width: calc(var(--qr) + 24px); top: 0; height: 2px; background: var(--mint); box-shadow: 0 0 12px rgb(124 240 181 / 0.6); z-index: 1; animation: scan 3.2s ease-in-out infinite; }
@keyframes scan { 0% { transform: translateY(6px); opacity: 0; } 12% { opacity: 1; } 50% { transform: translateY(calc(var(--qr) + 16px)); opacity: 1; } 62%, 100% { transform: translateY(calc(var(--qr) + 16px)); opacity: 0; } }
.steps { list-style: none; counter-reset: step; margin: 40px 0 36px; padding: 0; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 16px 0; border-top: 1px solid var(--rule); color: var(--dim); font-size: 15px; }
.steps li::before { content: counter(step); grid-row: 1 / 3; color: var(--faint); }
.steps b { color: var(--text); font-weight: 700; }

/* --- Price: three plans as ruled columns; yearly is the one that is on. */
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 56px 0 28px; }
.plan { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid var(--rule-strong); }
.plan.on { border-top: 2px solid var(--mint); padding-top: 21px; }
.p-name { color: var(--dim); font-size: 13px; letter-spacing: 0.04em; }
.plan.on .p-name { color: var(--mint); }
.p-price { font-size: clamp(32px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.p-note { color: var(--dim); font-size: 14px; max-width: 18rem; }
.price .small { max-width: 44rem; }

/* --- What you need: two by two. */
.needs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 40px 0 0; }
.needs-grid div { padding: 20px 0; border-top: 1px solid var(--rule); }
.needs-grid dt { font-weight: 700; margin: 0 0 6px; }
.needs-grid dd { margin: 0; color: var(--dim); font-size: 15px; }

/* --- The last word. */
.landing > .last { padding: 160px 0 140px; }
.word { margin: 0 0 32px; font-size: clamp(96px, 19vw, 260px); line-height: 0.82; font-weight: 700; letter-spacing: -0.07em; }
.word .caret { width: 0.46em; height: 0.66em; vertical-align: 0; }

/* Scrolled into view: each section's parts come up as they enter (where the browser ties animation to scrolling). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal > * { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes reveal { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }

/* The approve story, only where things may move. */
@media (prefers-reduced-motion: no-preference) {
  .chat .c-push { animation: pushIn var(--q) infinite; }
  .c-push .w1 { animation: outAtQ var(--q) infinite; }
  .c-push .w2 { animation: inAtQ var(--q) infinite; }
  .ask { animation: askLife var(--q) infinite; }
  .ask-row.yes { animation: chosen var(--q) infinite; }
  .chat .c-said { animation: saidIn var(--q) infinite; }
  .sess-head .q1 { animation: blink 1.2s infinite, outAtQRing var(--q) infinite; }
  .sess-head .q2 { animation: spinAtQ var(--q) infinite; }
}
@keyframes pushIn { 0%, 5% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } 10%, 95% { max-height: 60px; opacity: 1; } 99%, 100% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes outAtQ { 0%, 60% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes inAtQ { 0%, 60% { opacity: 0; } 63%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes askLife { 0%, 13% { max-height: 0; opacity: 0; transform: translateY(14px); margin-top: 0; border-width: 0; } 18%, 58% { max-height: 260px; opacity: 1; transform: none; border-width: 1.5px; } 64%, 100% { max-height: 0; opacity: 0; transform: scale(0.98); margin: 0; border-width: 0; } }
@keyframes chosen { 0%, 40% { background: transparent; } 44%, 58% { background: rgb(124 240 181 / 0.12); } 62%, 100% { background: transparent; } }
@keyframes saidIn { 0%, 68% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } 73%, 95% { max-height: 80px; opacity: 1; padding-top: 14px; padding-bottom: 10px; } 99%, 100% { max-height: 0; opacity: 0; } }
@keyframes headName { 0%, 60% { color: var(--amber); } 63%, 100% { color: var(--text); } }
@keyframes outAtQRing { 0%, 60% { filter: opacity(1); } 63%, 96% { filter: opacity(0); } 99%, 100% { filter: opacity(1); } }
@keyframes spinAtQ { 0%, 60% { opacity: 0; } 63%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* ---------------------------------------------------------------- the other pages: one column */

main:not(.landing) { max-width: 46rem; padding: 72px 0 56px; }
main:not(.landing) h1 { font-size: clamp(38px, 6vw, 60px); line-height: 1.02; letter-spacing: -0.05em; font-weight: 700; margin: 0 0 22px; }
main:not(.landing) h2 { display: flex; align-items: center; gap: 12px; margin: 60px 0 20px; font-size: 13px; font-weight: 500; color: var(--dim); letter-spacing: 0.04em; }
main:not(.landing) h2::before { content: ""; width: 18px; height: 1px; background: var(--dim); }
main:not(.landing) h2::after { content: ""; flex: 1; height: 1px; background: var(--rule-strong); }
h3 { margin: 28px 0 6px; font-size: 16px; font-weight: 700; }
p { margin: 0 0 16px; }
main:not(.landing) .lede { margin-bottom: 8px; }
ul, ol { margin: 0 0 16px; padding-left: 1.3em; }
li { margin: 0 0 8px; }
li::marker { color: var(--dim); }
code { font-family: var(--mono); font-size: 0.93em; color: var(--text); }
pre { margin: 0 0 20px; padding: 16px 18px; background: var(--well); border-radius: 8px; overflow-x: auto; font-size: 14px; line-height: 1.6; }
pre code { color: var(--mint); font-size: inherit; white-space: pre; }
.prompt::before { content: "❯ "; color: var(--mint); }
dl { margin: 0; }
dt { font-weight: 700; margin: 30px 0 6px; }
dd { margin: 0 0 8px; color: var(--soft); }
.doc h2 { margin-top: 48px; }
.doc p, .doc li { max-width: 42rem; color: var(--soft); }
.meta { color: var(--dim); font-size: 14px; }
.status { margin: 0 0 28px; padding: 12px 0; border-top: 1px solid var(--amber); border-bottom: 1px solid var(--rule); color: var(--amber); font-size: 14px; }

/* The footer: the mark again, the links, the small print. */
.foot { margin-top: 0; padding: 44px 0 56px; border-top: 1px solid var(--rule-strong); color: var(--dim); font-size: 13px; }
.foot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; margin-bottom: 26px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.foot .links a { color: var(--dim); text-decoration: none; }
.foot .links a:hover { color: var(--text); }
.foot p { max-width: 40rem; margin: 0 0 8px; }

/* ---------------------------------------------------------------- narrower */

@media (max-width: 1080px) {
  .phone { zoom: 0.92; }
}
@media (max-width: 920px) {
  .landing > section { padding: 96px 0; }
  .landing > .hero { grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 0; }
  .hero-copy { padding-top: 64px; }
  .hero-device { height: 640px; padding-top: 28px; }
  .landing > .mac { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .mac-visual { order: 2; }
  .facts, .plans-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts p, .plan { padding-bottom: 22px; }
  .pad { margin: 72px auto 0; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  body { font-size: 15px; }
  .top nav { gap: 22px; }
  .hero h1 { font-size: clamp(42px, 12.5vw, 60px); }
  .phone { zoom: 0.84; }
  .hero-device { height: 560px; }
  .landing > section { padding: 80px 0; }
  .stage { margin-top: 44px; }
  .sess { font-size: 14px; }
  .sess-head { font-size: 15px; }
  .chat { height: 300px; }
  .ask-head, .ask-row { padding-left: 14px; padding-right: 14px; }
  .keys { font-size: 13px; height: 50px; }
  .wire-nodes .node small { display: none; }
  .node { font-size: 13px; }
  .rail { margin: 44px -18px 0; padding: 6px 18px 22px; scroll-padding-left: 18px; grid-auto-columns: 64vw; gap: 18px; }
  .needs-grid { grid-template-columns: minmax(0, 1fr); }
  .qr { --qr: 150px; }
  .landing > .last { padding: 112px 0 96px; }
  .actions .key { flex: 1 1 auto; justify-content: center; }
  .sess { height: 600px; }
  /* One word a lane on a phone: three would sit on each other. */
  .k2, .k3, .k5 { display: none; }
  .pkt { font-size: 12px; }
  .mac-visual { min-height: 0; display: flex; flex-direction: column; gap: 28px; }
  .menu { position: relative; top: auto; right: auto; width: 100%; }
  .qr { position: relative; left: auto; bottom: auto; }
}

/* Reduce Motion: everything holds still at its first, readable moment. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .spin b:nth-child(1), .spin b:nth-child(2), .spin b:nth-child(3), .spin b:nth-child(6) { opacity: 1; }
  .pkt { opacity: 1; }
  .k2, .k3, .k5 { display: none; }
  .lane.out .k1 { transform: translateX(calc(50cqw - 50%)); }
  .lane.back .k4 { transform: translateX(calc(50cqw - 50%)); }
  .pkt .plain { opacity: 0; }
  .pkt .seal { opacity: 1; }
  .qr::before { display: none; }
}