/* The landing, act by act. Semantic + component tokens only; no shadows; radii 6 / 8 / pill (primary button only). */

.wrap { width: min(100% - 32px, 1200px); margin-inline: auto; }
.act { position: relative; padding-block: clamp(72px, 10vw, 140px); }
.paper { background: var(--bg); color: var(--text); }
.night { background: var(--night); color: var(--night-text); }
.night .muted { color: var(--night-text-2); }
.muted { color: var(--text-2); }
.label { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-2); }
.night .label { color: var(--night-text-2); }

/* inversion wipe: a 1px rule grows full-width at each black / paper change */
.wipe { height: 1px; background: var(--border); transform-origin: left; transform: scaleX(1); }
.night .wipe, .wipe.on-night { background: var(--night-border); }
.js .wipe[data-reveal] { transform: scaleX(0); transition: transform var(--t-4) var(--ease-out); }
.js .wipe[data-reveal].in { transform: scaleX(1); }

/* reveal: headlines and panels only, once */
.js [data-reveal]:not(.wipe) { opacity: 0; transform: translateY(6px); transition: opacity var(--t-3) var(--ease-out), transform var(--t-3) var(--ease-out); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- buttons & form ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-text); font-weight: 600; font-size: var(--step-0); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: opacity var(--t-1) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover { opacity: 0.86; } }
.night .btn { background: var(--night-action); color: var(--night-action-text); }
.btn-s { height: 36px; padding: 0 16px; font-size: var(--step--1); }
.ghost { background: transparent; border: var(--rule); border-radius: var(--radius-s); height: 36px; padding: 0 12px; font-size: var(--step--1); color: var(--text); }
.night .ghost { border-color: var(--night-border); color: var(--night-text); }

.join { display: flex; gap: 8px; max-width: 520px; }
.join input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: var(--radius-s); border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); }
.night .join input { background: var(--night-2); border-color: var(--night-border); color: var(--night-text); }
.join input::placeholder { color: var(--text-2); }
.night .join input::placeholder { color: var(--night-text-2); }
.join-msg { min-height: 1.6em; margin-top: 10px; font-family: var(--font-mono); font-size: var(--step--1); }
.join-msg.err { color: var(--signal); }
.hp { position: absolute; left: -9999px; }
@media (max-width: 560px) { .join { flex-direction: column; } .join .btn { justify-content: center; } }

/* ---------- Act 0: nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; color: var(--night-text); transition: background var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.nav.scrolled { background: var(--bg); color: var(--text); border-bottom: var(--rule); }
.nav.scrolled.over-night { background: var(--night); color: var(--night-text); border-bottom-color: var(--night-border); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; font-size: 17px; }
.wordmark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px var(--live-halo); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 3px var(--live-halo); } 50% { box-shadow: 0 0 0 5px var(--live-halo), 0 0 10px var(--live-halo); } }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: var(--step--1); }
.nav-links a { text-decoration: none; opacity: 0.8; }
.nav-links a, .nav-cta > * { white-space: nowrap; } /* a longer label (Early Access) never wraps the bar (owner, Oct 31) */
@media (max-width: 1120px) and (min-width: 861px) { .nav-links { gap: 16px; } .nav-links a[href="#humans"], .nav-links a[href="#partner"] { display: none; } }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { opacity: 1; } }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav .btn { background: var(--night-action); color: var(--night-action-text); }
.nav.scrolled:not(.over-night) .btn { background: var(--action); color: var(--action-text); }
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--radius-s); border: 1px solid currentColor; background: transparent; font-family: var(--font-mono); font-size: 12px; opacity: 0.85; }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { opacity: 1; } }
.theme-toggle .half { width: 12px; height: 12px; border-radius: 50%; border: 1px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.menu-btn { display: none; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .nav-cta .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; padding: 16px; gap: 14px; background: var(--night); color: var(--night-text); border-bottom: 1px solid var(--night-border); font-size: var(--step-1); }
}

/* ---------- Act 1: hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: flex-end; padding-top: 120px; padding-bottom: clamp(40px, 6vw, 72px); overflow: hidden; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; }
.field-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.js .field-fallback { display: none; }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { font-size: var(--step-hero); line-height: 0.92; letter-spacing: -0.035em; font-weight: 600; max-width: 11ch; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line span { display: block; }
.js .hero h1 .line span { animation: rise var(--t-4) var(--ease-out) both; }
.js .hero h1 .line:nth-child(2) span { animation-delay: 80ms; }
.js .hero h1 .line:nth-child(3) span { animation-delay: 160ms; }
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
.hero-sub { max-width: 46ch; margin-top: 28px; font-size: var(--step-1); line-height: 1.45; color: var(--night-text-2); }
.hero .join { margin-top: 32px; }
.ticker { margin-top: 36px; display: flex; gap: 14px; align-items: center; line-height: 1.6; min-height: 1.6em; font-family: var(--font-mono); font-size: var(--step--1); color: var(--night-text-2); border-top: 1px solid var(--night-border); padding-top: 14px; max-width: 760px; }
.ticker .live { display: inline-flex; align-items: center; gap: 6px; color: var(--night-text); flex: none; }
.ticker .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px var(--live-halo); animation: glow 2.4s ease-in-out infinite; }
.ticker-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.6; }
.ticker-line.write-in { animation: fadein var(--t-3) var(--ease-out); } /* a fade, never a shift: the line stays on the label's baseline */
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes writein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Act 2: problem ---------- */
.big-serif { margin-top: 18px; font-family: var(--font-serif); font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.01em; }
.notes { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--rule); }
.notes li { padding: 14px 20px 0 0; font-size: var(--step-1); letter-spacing: -0.01em; }
.notes .label { display: block; margin-bottom: 6px; }
@media (max-width: 760px) { .notes { grid-template-columns: 1fr; } }

/* ---------- Act 3: the graph ---------- */
.graph-act h2, .gov h2, .pricing h2, .faq h2 { font-size: var(--step-4); line-height: 1; letter-spacing: -0.03em; font-weight: 600; max-width: 16ch; }
.graph-act .intro { display: flex; justify-content: space-between; gap: 32px; align-items: end; flex-wrap: wrap; }
.graph-act .intro p { max-width: 40ch; color: var(--text-2); }
.pin { margin-top: 48px; }
.pin-stage { position: relative; border: var(--rule); border-radius: var(--radius-m); background: var(--night); color: var(--night-text); overflow: hidden; aspect-ratio: 16 / 9; }
.pin-stage svg { width: 100%; height: 100%; }
.g-edge { stroke: var(--star-edge); stroke-width: 1; }
.g-node circle { fill: var(--star-fill); }
.g-node text { fill: var(--night-text); font-family: var(--font-mono); font-size: 13px; }
.g-node .kind { fill: var(--night-text-3); font-size: 11px; }
.g-agent circle { fill: none; stroke: var(--star-fill); stroke-width: 1.25; }
.stage-caption { position: absolute; left: 20px; bottom: 16px; right: 20px; font-family: var(--font-mono); font-size: var(--step--1); color: var(--night-text-2); }
.stages { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: var(--rule); }
.stages li { padding: 14px 16px 0 0; font-size: var(--step--1); color: var(--text-2); }
.stages li b { display: block; font-family: var(--font-mono); font-weight: 400; color: var(--text); margin-bottom: 4px; }
.stages li.on b { text-decoration: underline; text-underline-offset: 4px; }
.pin-stage .g-portrait { display: none; }
@media (max-width: 760px) {
  .stages { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .pin-stage { aspect-ratio: auto; }
  .pin-stage svg:not(.g-portrait) { display: none; }
  .pin-stage .g-portrait { display: block; height: auto; padding-bottom: 56px; }
}
/* the pinned version: only with JS, wide screens and motion allowed (site.js adds .pinned) */
.pin.pinned { height: 260vh; }
.pin.pinned .pin-sticky { position: sticky; top: 88px; }
.js .pin.pinned [data-stage] { opacity: 0; transition: opacity var(--t-3) var(--ease-out); }
.js .pin.pinned [data-stage].shown { opacity: 1; }

/* ---------- Act 4: governance ---------- */
.gov h2 { max-width: 14ch; }
.gov .lede { margin-top: 20px; max-width: 52ch; color: var(--night-text-2); font-size: var(--step-1); line-height: 1.45; }
.gov-grid { margin-top: 56px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; border: 1px solid var(--night-border); border-radius: var(--radius-m); }
.gov-grid > * { padding: clamp(20px, 3vw, 32px); }
.gov-grid > * + * { border-left: 1px solid var(--night-border); }
@media (max-width: 900px) { .gov-grid { grid-template-columns: 1fr; } .gov-grid > * + * { border-left: 0; border-top: 1px solid var(--night-border); } }
.ledger { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.ledger th { text-align: left; font-weight: 400; color: var(--night-text-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--night-border); }
.ledger td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--night-border); vertical-align: top; }
.ledger tr.undone td { color: var(--night-text-3); }
.ledger tr.undone td.what { text-decoration: line-through; }
@media (max-width: 560px) { .ledger th:nth-child(2), .ledger td:nth-child(2) { display: none; } }
.receipt { margin-top: 14px; border: 1px solid var(--night-border); border-radius: var(--radius-m); padding: 18px; }
.receipt .rid { font-family: var(--font-mono); font-size: var(--step--1); color: var(--night-text-2); display: flex; justify-content: space-between; }
.receipt .what { margin-top: 10px; font-size: var(--step-1); position: relative; display: inline-block; }
.receipt .what::after { content: ""; position: absolute; left: 0; top: 55%; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-3) var(--ease-out); }
.receipt.undone .what { color: var(--night-text-3); }
.receipt.undone .what::after { transform: scaleX(1); }
.receipt .row { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.status { margin-top: 12px; font-family: var(--font-mono); font-size: var(--step--1); color: var(--night-text-2); }
.locks h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }
.locks p { margin-top: 10px; color: var(--night-text-2); font-size: var(--step--1); }
.split { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--night-border); border-radius: var(--radius-m); }
.split > div { padding: 16px; }
.split > div + div { border-left: 1px solid var(--night-border); }
.split .who { font-family: var(--font-mono); font-size: 12px; color: var(--night-text-3); }
.split ul { margin-top: 12px; display: grid; gap: 8px; font-size: var(--step--1); }
.split li { display: flex; gap: 8px; align-items: center; }
.split .solid, .split .hollow { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.split .solid { background: var(--night-text); }
.split .hollow { border: 1px solid var(--night-text-2); }
.split .gone { color: var(--night-text-3); }

/* ---------- Act 5: manifesto ---------- */
.manifesto { min-height: 80svh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.manifesto p { position: relative; z-index: 1; font-family: var(--font-serif); font-size: var(--step-4); line-height: 1.06; letter-spacing: -0.01em; max-width: 18ch; }
.dither { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }

/* ---------- Act 6: pricing ---------- */
.pricing .head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.pricing .head p { max-width: 38ch; color: var(--text-2); }
.plans { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; border-top: var(--rule-strong); }
.plan { padding: 28px 28px 8px 0; }
.plan + .plan { padding-left: 28px; border-left: var(--rule); }
.plan h3 { font-size: var(--step-1); font-weight: 600; }
.plan .price { margin-top: 14px; font-size: var(--step-3); letter-spacing: -0.03em; font-weight: 600; line-height: 1; }
.plan .price small { font-size: var(--step-0); font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.plan .terms { margin-top: 8px; color: var(--text-2); }
.plan dl { margin-top: 24px; display: grid; grid-template-columns: auto 1fr; border-top: var(--rule); font-size: var(--step--1); }
.plan dt, .plan dd { padding: 10px 0; border-bottom: var(--rule); }
.plan dt { color: var(--text-2); padding-right: 24px; }
.plan dd { font-family: var(--font-mono); text-align: right; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } .plan + .plan { padding-left: 0; border-left: 0; border-top: var(--rule); } }

/* ---------- Act 7: FAQ ---------- */
.faq .wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 96px); }
.faq details { border-top: var(--rule); }
.faq details:last-child { border-bottom: var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; gap: 16px; font-weight: 500; font-size: var(--step-1); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--text-2); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 20px; color: var(--text-2); max-width: 60ch; }
@media (max-width: 860px) { .faq .wrap { grid-template-columns: 1fr; } }

/* ---------- Act 8: final CTA ---------- */
.final { overflow: hidden; }
.final .wrap { position: relative; z-index: 1; }
.final h2 { font-size: var(--step-4); line-height: 1; letter-spacing: -0.03em; font-weight: 600; max-width: 12ch; }
.final .join { margin-top: 32px; }
.final .field { opacity: 0.6; }

/* ---------- Act 9: footer ---------- */
.foot { padding-block: 64px 0; overflow: hidden; border-top: 1px solid var(--night-border); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; font-family: var(--font-mono); font-size: var(--step--1); }
.foot-cols h4 { font-weight: 400; color: var(--night-text-3); font-size: 12px; margin-bottom: 12px; }
.foot-cols li + li { margin-top: 8px; }
.foot-cols a { text-decoration: none; color: var(--night-text-2); }
@media (hover: hover) and (pointer: fine) { .foot-cols a:hover { color: var(--night-text); } }
.colophon { margin-top: 48px; font-family: var(--font-mono); font-size: 12px; color: var(--night-text-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.giant { margin-top: 32px; font-weight: 600; letter-spacing: -0.05em; font-size: clamp(4rem, 17vw, 17rem); line-height: 0.78; white-space: nowrap; color: var(--night-3); transform: translateY(14%); user-select: none; }
@media (max-width: 760px) { .foot-cols { grid-template-columns: 1fr 1fr; } }

/* preview ribbon: local build only, never shipped */
.preview-flag { position: fixed; right: 12px; bottom: 12px; z-index: 30; font-family: var(--font-mono); font-size: 11px; padding: 6px 10px; border-radius: var(--radius-s); background: var(--surface); color: var(--text); border: var(--rule-strong); }

/* ---------- hero: the Nebula, the constellation, receipts drifting in ---------- */
.hero .sky-gl { opacity: 0; transition: opacity 1.4s var(--ease-out); }
.hero .sky-gl.on { opacity: 0.8; }
.drops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.drop { position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 12px; color: var(--night-text); background: var(--night-2); border: 1px solid var(--night-border); border-radius: var(--radius-s); padding: 8px 10px; white-space: nowrap; will-change: transform, opacity; }
.drop b { font-weight: 400; color: var(--night-text-3); margin-right: 8px; }

/* ---------- the agents, named ---------- */
.agents-band { padding-block: 0 clamp(48px, 7vw, 88px); }
.agents-band .wrap { border-top: 1px solid var(--night-border); padding-top: 22px; }
.agents { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); }
.agents li { display: flex; align-items: center; gap: 14px; font-size: var(--step-3); font-weight: 600; letter-spacing: -0.03em; padding: 6px 0; }
.agents li + li { border-left: 1px solid var(--night-border); padding-left: clamp(14px, 2.4vw, 32px); }
.agents .glyph { width: 14px; height: 14px; border-radius: 50%; background: var(--night-text); flex: none; }
.agents .glyph.open { background: transparent; border: 1.5px solid var(--night-text-2); }
.agents li:last-child { color: var(--night-text-2); }
@media (max-width: 760px) { .agents { grid-template-columns: 1fr 1fr; row-gap: 10px; } .agents li:nth-child(3) { border-left: 0; padding-left: 0; } }

/* ---------- partner mode ---------- */
.partner .intro, .graph-act .intro { display: flex; justify-content: space-between; gap: 32px; align-items: end; flex-wrap: wrap; }
.partner h2 { font-size: var(--step-4); line-height: 1; letter-spacing: -0.03em; font-weight: 600; max-width: 15ch; }
.partner .intro p { color: var(--text-2); }
.partner-stage { position: relative; margin: 48px 0 0; border: var(--rule); border-radius: var(--radius-m); background: var(--night); color: var(--night-text); overflow: hidden; aspect-ratio: 16 / 8; }
.partner-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pov { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); display: flex; border: 1px solid var(--night-border); border-radius: var(--radius-s); background: var(--night); }
.pov button { height: 34px; padding: 0 14px; border: 0; background: transparent; color: var(--night-text-2); font-family: var(--font-mono); font-size: 12px; border-radius: var(--radius-s); }
.pov button[aria-checked="true"] { background: var(--night-action); color: var(--night-action-text); }
.partner-foot { margin-top: 18px; display: flex; justify-content: space-between; gap: 24px; align-items: start; flex-wrap: wrap; }
.plog { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-2); display: grid; gap: 4px; min-height: 5.6em; }
.plog li:first-child { color: var(--text); }
.plog i { font-style: normal; border: var(--rule); border-radius: var(--radius-s); padding: 0 5px; font-size: 11px; }
.plog li.write-in { animation: writein var(--t-2) var(--ease-out); }
.pnote { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text); }
@media (max-width: 760px) { .partner-stage { aspect-ratio: 4 / 5; } .pov { top: 12px; } }

/* ---------- manifesto: words light up as you scroll ---------- */
.js .manifesto [data-words] .w { opacity: 0.18; transition: opacity var(--t-2) linear; }
.js .manifesto [data-words] .w.lit { opacity: 1; }

/* ---------- Act 3: watch it remember ---------- */
.mem-stage { position: relative; margin: 48px 0 0; color: var(--text); overflow: hidden; aspect-ratio: 16 / 9; } /* on the page itself: no box (owner, Oct 31) */
.mem-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.inputs { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 30%; display: grid; gap: 12px; }
.inputs li { border: var(--rule); border-radius: var(--radius-m); padding: 12px 14px; background: var(--surface); opacity: 0.38; transition: opacity var(--t-3) var(--ease-out), border-color var(--t-3) var(--ease-out), transform var(--t-3) var(--ease-out); }
.inputs li.on { opacity: 1; border-color: var(--text-2); transform: translateX(6px); }
.inputs li.done { opacity: 0.7; }
.inputs .who { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); margin-bottom: 4px; }
.inputs .said { font-size: var(--step--1); line-height: 1.4; }
.mem-count { position: absolute; right: 0; bottom: 16px; font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-2); }
.no-js .inputs li, html:not(.js) .inputs li { opacity: 1; }
@media (max-width: 700px) {
  .mem-stage { aspect-ratio: auto; height: 600px; }
  .inputs { left: 0; right: 0; top: 0; transform: none; width: auto; gap: 8px; }
  .inputs li { padding: 9px 12px; }
  .inputs li.on { transform: none; }
}

/* ---------- Act 5: two phones and the graph between them ---------- */
.duo { margin-top: 48px; display: grid; grid-template-columns: minmax(240px, 300px) 1fr minmax(240px, 300px); gap: 0; align-items: stretch; }
.phone { border: 1px solid var(--border-strong); border-radius: var(--radius-device); background: var(--surface); padding: 14px 12px 12px; display: flex; flex-direction: column; height: 520px; position: relative; z-index: 1; }
.phone-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 12px; border-bottom: var(--rule); font-weight: 600; font-size: var(--step--1); }
.phone-head .with { margin-left: auto; font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: var(--text-2); }
.pdot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text); }
.pdot.solid { background: var(--text); }
.chat { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 4px 4px; }
.b { max-width: 86%; padding: 9px 12px; border-radius: 16px; font-size: var(--step--1); line-height: 1.4; animation: writein var(--t-2) var(--ease-out); }
.b.me { align-self: flex-end; background: var(--action); color: var(--action-text); border-bottom-right-radius: 4px; }
.b.ag { align-self: flex-start; background: var(--surface-2); border: var(--rule); border-bottom-left-radius: 4px; }
.b .tag { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); margin-bottom: 2px; }
.b .dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.b .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-2); animation: blink 1s infinite; }
.b .dots i:nth-child(2) { animation-delay: 0.15s; } .b .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.backend { position: relative; margin: 36px -1px; color: var(--text); } /* on the page itself: no box (owner, Oct 31) */
.backend canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.backend-label { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; color: var(--text-2); white-space: nowrap; }
.backend-log { position: absolute; left: 16px; right: 16px; bottom: 14px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.backend-log.write-in { animation: writein var(--t-2) var(--ease-out); }
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
  .phone { height: 330px; }
  .backend { margin: -1px 18px; height: 300px; }
}

/* ---------- Act 5b: the human layer ---------- */
.humans .intro { display: flex; justify-content: space-between; gap: 32px; align-items: end; flex-wrap: wrap; }
.humans h2 { font-size: var(--step-4); line-height: 1; letter-spacing: -0.03em; font-weight: 600; max-width: 15ch; }
.peek { margin-top: 48px; display: grid; grid-template-columns: 200px 1fr; border: 1px solid var(--night-border); border-radius: var(--radius-m); min-height: 340px; background: var(--night-2); }
.peek-tabs { display: grid; align-content: start; gap: 2px; padding: 12px; border-right: 1px solid var(--night-border); }
.peek-tabs button { text-align: left; height: 38px; padding: 0 12px; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--night-text-2); font-size: var(--step--1); }
.peek-tabs button[aria-selected="true"] { background: var(--night-3); color: var(--night-text); }
.peek-panes { padding: clamp(18px, 3vw, 32px); }
.pane.on { animation: writein var(--t-3) var(--ease-out); }
.pane h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--step-2); margin-bottom: 16px; }
.pane i { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--night-text-3); border: 1px solid var(--night-border); border-radius: var(--radius-s); padding: 1px 6px; margin-left: 10px; white-space: nowrap; }
.bullets li { padding: 10px 0; border-bottom: 1px solid var(--night-border); display: flex; align-items: center; gap: 10px; }
.bullets li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--night-text-2); flex: none; }
.bullets u { text-decoration-color: var(--night-text-3); }
.lock { width: 9px; height: 7px; border: 1.2px solid var(--night-text); border-radius: 2px; position: relative; margin-right: 2px; }
.lock::before { content: ""; position: absolute; left: 1px; top: -5px; width: 5px; height: 5px; border: 1.2px solid var(--night-text); border-bottom: 0; border-radius: 4px 4px 0 0; }
.todos li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--night-border); }
.todos .box { width: 15px; height: 15px; border: 1.3px solid var(--night-text-2); border-radius: 4px; flex: none; }
.todos li.done { color: var(--night-text-3); text-decoration: line-through; }
.todos li.done .box { background: var(--night-text-2); }
.todos em, .files em { font-style: normal; margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--night-text-3); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cols h4 { font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: var(--night-text-3); margin-bottom: 8px; }
.cols p { border: 1px solid var(--night-border); border-radius: var(--radius-m); padding: 10px 12px; margin-bottom: 8px; font-size: var(--step--1); display: flex; justify-content: space-between; align-items: center; background: var(--night); }
.week { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--night-border); }
.week > div { padding: 10px 8px 16px; border-right: 1px solid var(--night-border); min-height: 150px; }
.week > div:last-child { border-right: 0; }
.week b { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--night-text-3); margin-bottom: 10px; }
.week p { font-size: 13px; border-left: 2px solid var(--night-text-2); padding-left: 8px; display: grid; gap: 4px; }
.week p i { margin-left: 0; justify-self: start; }
.mini-graph { width: 100%; max-width: 560px; }
.mini-graph line { stroke: var(--star-edge); }
.mini-graph circle { fill: var(--star-fill); }
.mini-graph text { fill: var(--night-text-2); font-family: var(--font-mono); font-size: 12px; }
.files li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--night-border); }
.files b { font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; border: 1px solid var(--night-border); border-radius: var(--radius-s); padding: 2px 6px; color: var(--night-text-2); }
@media (max-width: 760px) {
  .peek { grid-template-columns: 1fr; }
  .peek-tabs { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--night-border); }
  .peek-tabs button { flex: none; }
  .cols, .week { grid-template-columns: 1fr; }
  .week > div { min-height: 0; border-right: 0; border-bottom: 1px solid var(--night-border); }
  .pane i { margin-left: 6px; }
}

/* beta login + the not-open-yet line */
.hero-soon { margin-top: 18px; color: var(--night-text-2); font-size: var(--step--1); }
.nav-beta { color: inherit; border-color: currentColor; }
.menu-only { display: none; }
@media (max-width: 860px) { .nav-beta { display: none; } .nav-links.open .menu-only { display: block; } }
.beta-dlg { border: var(--rule-strong); border-radius: var(--radius-m); padding: 0; background: var(--surface); color: var(--text); width: min(420px, calc(100% - 32px)); }
.beta-dlg::backdrop { background: var(--night); opacity: 0.6; }
.beta-card { display: grid; gap: 14px; padding: 28px; position: relative; }
.beta-card h2 { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; }
.beta-card p { color: var(--text-2); font-size: var(--step--1); }
.beta-card input { height: 48px; padding: 0 16px; border-radius: var(--radius-s); border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); }
.beta-card .btn { justify-content: center; }
.beta-x { position: absolute; right: 14px; top: 10px; border: 0; background: transparent; font-size: 22px; color: var(--text-2); }
.beta-msg { min-height: 1.4em; }
.beta-msg.err { color: var(--signal); }

/* ---------- Act 2b: BYOAI ---------- */
.byoai-mark { margin-top: 18px; font-weight: 700; font-size: clamp(5.5rem, 24vw, 13rem); line-height: 0.86; letter-spacing: -0.055em; }
.byoai-mark span { display: inline-block; }
.byoai-sub { margin-top: 14px; font-family: var(--font-serif); font-size: var(--step-3); line-height: 1.05; color: var(--night-text-2); }
.byoai-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 7vw, 120px); align-items: end; }
.byoai-list { display: grid; border-top: 1px solid var(--night-border); }
.byoai-list li { display: grid; grid-template-columns: 8rem 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--night-border); font-size: var(--step-1); letter-spacing: -0.01em; }
@media (max-width: 1180px) { .byoai-wrap { grid-template-columns: 1fr; align-items: start; } .byoai-list { max-width: 640px; } }
@media (max-width: 480px) { .byoai-list li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Act 5c: agent chat rooms (the demo sits on the page: plain bubbles, a color dot per agent) ---------- */
.rooms .intro { display: flex; justify-content: space-between; gap: 32px; align-items: end; flex-wrap: wrap; }
.rooms h2 { font-size: var(--step-4); line-height: 1; letter-spacing: -0.03em; font-weight: 600; max-width: 14ch; }
.rooms .intro p { color: var(--text-2); }
.rooms-grid { margin-top: 48px; display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(28px, 6vw, 96px); align-items: start; border-top: var(--rule); padding-top: 28px; }
.rooms-notes li { padding: 0 0 18px; font-size: var(--step-1); letter-spacing: -0.01em; }
.rooms-notes .label { display: block; margin-bottom: 4px; }
.room-demo { margin: 0; min-height: 380px; display: flex; flex-direction: column; }
.rd-top { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.rd-live { width: 7px; height: 7px; border-radius: 50%; background: var(--text); animation: blink 1.6s infinite; }
.rd-feed { display: flex; flex-direction: column; gap: 10px; }
.rd-feed .m { max-width: 82%; align-self: flex-start; padding: 9px 13px; border-radius: 16px; border-bottom-left-radius: 4px; background: var(--surface-2); border: var(--rule); font-size: var(--step-0); line-height: 1.4; }
.rd-feed .m.alt { align-self: flex-end; border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
.rd-feed .by { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); margin-bottom: 3px; }
.rd-feed .by i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.rd-end { margin-top: 18px; }
.rd-summary { margin-top: 8px; font-family: var(--font-serif); font-size: var(--step-2); line-height: 1.15; max-width: 22ch; }
.js .room-demo.playing .rd-feed > li { display: none; }
.js .room-demo.playing .rd-feed > li.on { display: block; animation: writein var(--t-2) var(--ease-out); }
.js .room-demo.playing .rd-feed.gone > li.on { animation: rd-gone 700ms var(--ease-out) forwards; }
.js .room-demo.playing:not(.ended) .rd-end { display: none; }
.js .room-demo.ended .rd-feed { display: none; }
.js .room-demo.ended .rd-end { margin-top: 0; animation: writein var(--t-3) var(--ease-out); }
@keyframes rd-gone { to { opacity: 0; transform: translateY(-4px); filter: blur(2px); } }
@media (max-width: 900px) { .rooms-grid { grid-template-columns: 1fr; } .room-demo { min-height: 340px; } }