/* ── Betamaxx identity: same tokens as the app ── */
:root{
  --accent:#0091a8;        /* brand teal-cyan */
  --accent-soft:#d8f1f6;
  --brand-2:#b0217e;       /* brand magenta */
  --bg:#f6f8fa;
  --surface:#ffffff;
  --border:#d0d7de;
  --text:#1f2328;
  --muted:#57606a;
  --radius:10px;
  --shadow:0 1px 3px rgba(31,35,40,.06),0 8px 24px rgba(31,35,40,.06);
}
.hero .lede{font-size:19px;color:var(--text);font-weight:500;max-width:660px;margin:0 auto 14px}
/* v0.25.311 (ticket 6ac5ebe5) item 2: the hero carries a proof line under the
   subtext. It is quiet on purpose: it is a fact that supports the promise, not
   a second promise competing with it. */
.hero .proof-line{font-size:13.5px;color:var(--muted);letter-spacing:.2px;max-width:660px;margin:0 auto 26px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── header ── */
header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:20}
header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo img{height:30px;display:block}
nav{display:flex;align-items:center;gap:22px}
nav a{color:var(--muted);font-size:14.5px;font-weight:600;white-space:nowrap}
nav a:hover{color:var(--accent);text-decoration:none}
/* v0.25.305 (ticket 6ac295d9): the nav gained a seventh item, so the labels are
   short and the gaps tighten below 1200px. Without this the two-word labels
   wrapped onto a second line inside a 64px bar. */
@media(max-width:1200px){nav{gap:14px}nav a{font-size:13.5px}nav a.cta{padding:8px 14px}}
nav a.cta{background:linear-gradient(90deg,var(--accent),var(--brand-2));color:#fff;padding:9px 18px;border-radius:999px;font-weight:700;white-space:nowrap}
nav a.cta:hover{filter:brightness(1.06);text-decoration:none}
@media(max-width:640px){nav a:not(.cta){display:none}}

/* ── hero ── */
.hero{position:relative;overflow:hidden;padding:72px 0 64px;text-align:center;background:
  radial-gradient(1200px 500px at 20% -10%,rgba(0,145,168,.10),transparent 60%),
  radial-gradient(1000px 500px at 85% 0%,rgba(176,33,126,.08),transparent 60%),
  var(--bg)}
.hero .kicker{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:6px 16px;font-size:13px;font-weight:600;color:var(--accent);margin-bottom:24px;box-shadow:var(--shadow)}
.hero .kicker .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--brand-2))}
.hero h1{font-size:clamp(36px,5.6vw,60px);line-height:1.08;margin:0 0 20px;letter-spacing:-1.6px;font-weight:800;padding-top:2px}
.hero h1 .grad{background:linear-gradient(90deg,var(--accent),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:19px;color:var(--muted);max-width:720px;margin:0 auto 40px}
.hero p strong{color:var(--text)}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;border-radius:var(--radius);padding:14px 28px;font-size:15.5px;font-weight:700;cursor:pointer;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.05);text-decoration:none;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--brand-2));color:#fff}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow)}

/* ── the loop diagram ── */
.loop{display:flex;align-items:stretch;justify-content:center;gap:0;margin:56px auto 0;max-width:920px;flex-wrap:wrap}
.loop .node{flex:1;min-width:150px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 16px;box-shadow:var(--shadow);position:relative}
.loop .node .n-ic{margin-bottom:6px;display:flex;justify-content:center}
.loop .node .n-t{font-weight:700;font-size:14.5px}
.loop .node .n-s{color:var(--muted);font-size:12.5px;margin-top:2px}
.loop .arrow{align-self:center;color:var(--accent);font-size:20px;padding:0 10px;font-weight:800}
@media(max-width:760px){.loop{flex-direction:column;gap:10px}.loop .arrow{transform:rotate(90deg);padding:0}}

/* ── v0.25.305 (ticket 6ac295d9): the closed loop, told as a loop ──────────
   The hero visual used to be a software workflow. It is now the product
   thesis in one picture: signals in, understanding, ONE human gate, the
   factory, production proof, and the loop returning to the users. The gate is
   the only magenta node on the page, because the decision is the only thing
   the machine does not own. */
.cycle{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:8px;margin:44px auto 0;max-width:1032px}
/* v0.25.309 (ticket 6ac4f1fb): the loop gained a seventh node (it now ends on
   the users experiencing the change), which pushed the row past one line and
   left the last node stretched into a full-width banner. Nodes now have a
   sensible basis and a cap, so seven fit on one line on a desktop and a short
   second line stays a compact, centred cluster instead of a banner. */
.cycle .c-node{flex:1 1 118px;min-width:104px;max-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 10px;box-shadow:var(--shadow);text-align:center}
.cycle .c-t{font-weight:800;font-size:14px;letter-spacing:-.2px}
.cycle .c-s{color:var(--muted);font-size:12px;margin-top:3px;line-height:1.35}
.cycle .c-node.gate{border:2px solid var(--brand-2);background:#fdf2f9}
.cycle .c-node.gate .c-t{color:var(--brand-2)}
.cycle .c-node.gate .c-s{color:var(--brand-2);font-weight:700}
.cycle .c-node.prod{border-color:var(--accent);background:var(--accent-soft)}
.cycle .c-arrow{align-self:center;color:var(--accent);font-size:18px;font-weight:800}
.cycle .c-return{flex-basis:100%;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);color:var(--muted);font-size:13.5px}
/* v0.25.316 (ticket 6ac63236): the loop ended on "Users experience the change"
   and the only thing joining it back to the first node was a muted caption with
   a small ↺ in it. It read as a note about the diagram rather than as part of
   the diagram, so the loop never visibly closed. The return is now a real arrow
   in the same accent weight as the forward arrows, and it is a link to the node
   it returns to, so the click lands somewhere and :target shows where. */
.cycle .c-back{display:inline-flex;align-items:center;gap:6px;margin-right:8px;color:var(--accent);font-weight:700;text-decoration:none}
.cycle .c-back:hover,.cycle .c-back:focus-visible{text-decoration:underline}
.cycle .c-back-arrow{font-size:18px;font-weight:800;line-height:1}
.cycle .c-node:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
@media(max-width:760px){.cycle{flex-direction:column;gap:8px}.cycle .c-arrow{transform:rotate(90deg)}.cycle .c-back-arrow{transform:rotate(90deg)}.cycle .c-node{min-width:0;max-width:none;width:100%}}
/* v0.25.316 (ticket 6ac63238): a heading break chosen for the desktop column orphans
   a single word once the line is narrow. The break is marked, and dropped below the
   breakpoint the rest of the sheet already uses, so the line wraps on its own there.
   The source keeps a space before the break: with it suppressed the two text nodes
   would otherwise butt together and render "whatdoes". */
@media(max-width:760px){.sec-head h2 br.wide{display:none}}

/* the human gate, also in the four-step model */
.loop .node.gate{border:2px solid var(--brand-2);background:#fdf2f9}
.loop .node.gate .n-t{color:var(--brand-2)}
.loop .node.gate .n-ic svg{color:var(--brand-2)}
.loop .node.gate .n-s{color:var(--brand-2);font-weight:700}
.loop-return{max-width:640px;margin:22px auto 0;text-align:center;color:var(--muted);font-size:16px;font-weight:500}

/* ── v0.25.305: the difference in one picture (today's chain versus the loop) */
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;max-width:880px;margin:0 auto}
.col-head{font-size:12.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.col-head.bmx{color:var(--accent)}
.contrast .col{margin:0;padding:22px 24px;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.contrast .col li{position:relative;padding:0 0 15px 22px;color:var(--muted);font-size:14.5px;line-height:1.4}
.contrast .col li:last-child{padding-bottom:0}
.contrast .col li::before{content:"";position:absolute;left:3px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--border)}
.contrast .col li:not(:last-child)::after{content:"";position:absolute;left:6.5px;top:19px;bottom:1px;width:1px;background:var(--border)}
.contrast .col.today li::before{background:#fbeaea;border:1px solid #cf222e55}
.contrast .col.bmx li{color:var(--text)}
.contrast .col.bmx li::before{background:var(--accent)}
.col-cap{margin:0;font-size:13.5px;color:var(--muted)}
.col-cap.bmx-cap{color:var(--accent);font-weight:600}
@media(max-width:760px){.contrast{grid-template-columns:1fr}.col-head.bmx,.col-cap.bmx-cap{margin-top:18px}}

/* a11y: the loop is stated in words too, so it survives without CSS */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── sections ── */
section{padding:88px 0}
section.alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec-head{max-width:760px;margin:0 auto 56px;text-align:center}
.sec-head .tag{font-size:13px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.sec-head h2{font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 16px;letter-spacing:-1px}
.sec-head p{color:var(--muted);font-size:17px;margin:0}

/* v0.25.306 (ticket 6ac2a77c): the trimmed page carries real prose instead of
   card grids. Narrow, left-aligned, one measure — centred paragraphs at 760px
   are unreadable, and the review's ask was less text, not more boxes. */
.prose{max-width:680px;margin:0 auto;color:var(--muted);font-size:16.5px;line-height:1.62}
.prose p{margin:0 0 18px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text)}
.prose a{color:var(--accent);font-weight:600}

/* vision leads the story: bigger type, gradient edge, more presence */
.vision-lead{padding:96px 0;position:relative;background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.vision-lead .sec-head{max-width:860px;margin-bottom:64px}
.vision-lead .sec-head h2{font-size:clamp(32px,4.8vw,52px);letter-spacing:-1.6px}
.vision-lead .sec-head p{font-size:18px;max-width:720px;margin:0 auto}
.vision-lead .scard{background:var(--surface)}

.story{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.scard{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:30px;box-shadow:var(--shadow)}
section.alt .scard{background:var(--bg)}
.scard .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);margin-bottom:16px}
.scard .ic svg,.loop .node .n-ic svg{width:22px;height:22px;color:var(--accent)}
.pipe .p-ic svg{width:15px;height:15px;color:inherit}
.scard .num{position:absolute;top:22px;right:22px;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--brand-2));color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
/* v0.25.311 (ticket 6ac5ebe5) item 10: each step is named for what the reader
   does, so the verb sits above the benefit as a small label. Same typographic
   voice as .sec-head .tag, one size down. */
.scard .step{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.scard h3{margin:0 0 8px;font-size:19px;letter-spacing:-.3px}
.scard p{margin:0;color:var(--muted);font-size:15px}
.scard ul{margin:14px 0 0;padding-left:18px}
.scard li{color:var(--muted);font-size:14.5px;margin:7px 0;line-height:1.45}
.scard .hl{color:var(--accent);font-weight:700}

/* v0.25.306: the human gate carries from the hero loop into the step list, so
   the one move that is not automated looks like it everywhere it appears */
.scard.gate{border:2px solid var(--brand-2);background:#fdf2f9}
.scard.gate .ic{background:#fff}
/* section.alt .scard (above) outranks .scard.gate, so a gate card placed
   inside an alt section kept its magenta border but lost the pink fill — the
   half of the "this is a human gate" signal that is not the outline. Found in
   the browser on the factory page, where the phases sit on an alt band. */
section.alt .scard.gate{background:#fdf2f9}
.scard.gate .ic svg{color:var(--brand-2)}
.scard.gate h3{color:var(--brand-2)}

/* ── factory pipeline ── */
.pipeline{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.pipe{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;box-shadow:var(--shadow)}
.pipe .p-ic{display:inline-flex}
.pipe.sec{border-color:var(--brand-2);color:var(--brand-2);background:#fdf2f9}
.pipe.prod{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pipe-sep{align-self:center;color:var(--border);font-weight:800}

/* ── audiences ── */
.aud{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.aud .a{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:var(--shadow)}
.aud .a .who{font-size:13px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--brand-2);margin-bottom:8px}
.aud .a h3{margin:0 0 8px;font-size:17px}
.aud .a p{margin:0;color:var(--muted);font-size:14.5px}

/* ── result band ── */
.result{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;max-width:900px;margin:0 auto}
.rbox{text-align:center;padding:36px 28px;background:linear-gradient(160deg,rgba(0,145,168,.06),rgba(176,33,126,.06));border:1px solid var(--border);border-radius:18px}
.rbox .big{font-size:44px;font-weight:800;letter-spacing:-1.5px;background:linear-gradient(90deg,var(--accent),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.rbox .lbl{font-weight:700;margin-top:6px}
.rbox p{color:var(--muted);font-size:14.5px;margin:8px 0 0}

/* v0.25.306: proof is shown as numbers, not announced as "proof, not
   promises". Only figures we can stand behind go in here. */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;max-width:760px;margin:32px auto 0}
.stats .stat{flex:1;min-width:240px;text-align:center;padding:30px 24px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.stats .stat .n{font-size:44px;font-weight:800;letter-spacing:-1.5px;background:linear-gradient(90deg,var(--accent),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats .stat .l{color:var(--muted);font-size:14.5px;margin-top:6px}

/* v0.25.308 (ticket 6ac4e9d2): the agentic software factory page. The
   requirement checklist is that page's spine, so it is a component and not
   one-off markup. The counter resets on .checks and increments on every item,
   which numbers the six groups continuously: an agent auditing itself can
   answer "one to thirteen, yes; fourteen, no" instead of reciting prose. */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px;counter-reset:ck}
.check-group{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 28px;box-shadow:var(--shadow)}
.check-group h3{margin:0 0 4px;font-size:17px;letter-spacing:-.3px}
.check-group .cg-note{margin:0 0 12px;color:var(--muted);font-size:13.5px;line-height:1.45}
.check-group ol{margin:0;padding:0;list-style:none}
.check-group li{position:relative;padding:10px 0 10px 32px;border-top:1px solid var(--border);color:var(--muted);font-size:14.5px;line-height:1.5;counter-increment:ck}
.check-group li:first-child{border-top:0}
.check-group li::before{content:counter(ck);position:absolute;left:0;top:10px;width:21px;height:21px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:11.5px;display:flex;align-items:center;justify-content:center}
.check-group li strong{color:var(--text)}
/* .rbox is a centred stat box; the two callouts on this page are left-aligned
   text with a list, which it cannot hold. */
.callout{max-width:880px;margin:32px auto 0;padding:30px 32px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.callout h3{margin:0 0 14px;font-size:18px;letter-spacing:-.3px}
.callout ol,.callout ul{margin:0;padding-left:22px}
.callout li{color:var(--muted);font-size:15px;line-height:1.55;margin:9px 0}
.callout li strong,.callout li em{color:var(--text)}

/* ── beta form ── */
.beta{padding:88px 0}
.beta .card{max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:40px;box-shadow:var(--shadow)}
.beta h2{font-size:28px;margin:0 0 8px;letter-spacing:-.8px;text-align:center}
.beta .sub{text-align:center;color:var(--muted);margin:0 0 30px}
label{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin:16px 0 5px}
input,textarea{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:15px;width:100%;font-family:inherit}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,145,168,.15)}
.beta button{width:100%;margin-top:24px;border:none}
#betaMsg{margin-top:16px;font-size:14px;min-height:22px;text-align:center}
#betaMsg.ok{color:#1a7f37}
#betaMsg.err{color:#cf222e}

/* ── footer ── */
footer{border-top:1px solid var(--border);padding:36px 0;color:var(--muted);font-size:13.5px;background:var(--surface)}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent)}

@media(max-width:640px){
  .hero{padding:40px 0 56px}
  section{padding:64px 0}
  .hero p{font-size:16.5px}
  .hero .kicker{margin-bottom:18px}
  .hero .lede{font-size:18px;margin-bottom:12px}
  /* v0.25.282 (ticket 6abe16ee): the two hero clauses each get one line on a
     phone instead of breaking into four */
  .hero h1{font-size:29px;letter-spacing:-.9px;margin-bottom:16px}
  .hero p:not(.lede){margin-bottom:28px}
}

/* ── v0.25.203 (ticket 6ab2addc): beta maxing moved out of the title bar
   into the page as a thesaurus entry under the logo (was .brand-teaser) ── */
.brand{display:flex;align-items:center;gap:12px}
/* ── v0.25.206 (ticket 6ab2fdf7): the entry reads like a dictionary/thesaurus
   line — serif face, italic headword, pronunciation, part of speech and an
   em-dash definition (formal copy, shorter than the PO's draft) ── */
.hero .thesaurus{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 7px;justify-content:flex-start;margin:0 0 26px;font-family:Georgia,'Iowan Old Style','Palatino Linotype','Book Antiqua','Times New Roman',serif;font-size:14.5px;color:var(--muted)}
.hero .thesaurus .th-word{font-weight:700;font-style:italic;color:var(--text)}
.hero .thesaurus .th-pron{font-size:12.5px;color:var(--muted)}
.hero .thesaurus .th-pos{font-style:italic;font-size:12.5px;color:var(--accent)}
.hero .thesaurus .th-def{font-size:13.5px;opacity:.85}
.hero .thesaurus .th-def::before{content:"— ";color:var(--accent)}
.aud .a .more{display:inline-block;margin-top:14px;font-size:14px;font-weight:700}
.paradigm{text-align:center;color:var(--muted);max-width:720px;margin:44px auto 0;font-size:16.5px}
.paradigm strong{color:var(--text)}
/* v0.25.311 (ticket 6ac5ebe5) items 7 and 11: the two lines the page is built
   on get a voice of their own instead of hiding inside a paragraph. Same
   gradient the stat boxes already use, so it reads as emphasis the page
   already owns rather than a new component. */
.first-line{text-align:center;max-width:820px;margin:44px auto 0;font-size:clamp(20px,2.6vw,27px);line-height:1.3;font-weight:800;letter-spacing:-.6px;background:linear-gradient(90deg,var(--accent),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.first-sub{text-align:center;max-width:680px;margin:14px auto 0;color:var(--muted);font-size:17px}
#fit{padding:60px 0}
#fit .first-line{margin-top:0}

/* ── v0.25.282 (ticket 6abe16ee): the hero says one thing, so the typed
   subtitle, its caret and the sr-only fallback are gone (see site.js);
   scroll reveal still respects prefers-reduced-motion ── */
.hero-single{margin-bottom:18px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}