/* buildexponential.org - shared stylesheet.
   Dark instrument-panel aesthetic. Two semantic colors grounded in the product:
   teal = what the AI does, amber = where the human taps (the gate). Stepped near-black
   surfaces, Geist + Geist Mono, IntersectionObserver-gated motion. No framework, no build. */

:root {
  /* teal-biased near-black surfaces, stepped like an instrument panel */
  --bg:      #0a1211;
  --bg-1:    #0e1a18;
  --bg-2:    #122320;
  --bg-3:    #16302b;
  --line:    #1b2b28;
  --line-2:  #274740;
  --ink:     #eaf3f1;
  --muted:   #93a7a2;
  --faint:   #5f736e;
  /* the two semantic colors */
  --brand:      #2dd4bf;   /* the machine / the brain */
  --brand-deep: #0f766e;
  --brand-glow: rgba(45, 212, 191, .16);
  --gate:       #f0a94b;   /* the human gate / approval */
  --gate-glow:  rgba(240, 169, 75, .16);
  --good:       #4ade80;
  --crit:       #f2555a;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1120px;
  /* Dark-only for now: the light palette isn't tuned yet, so we pin the whole
     site to dark regardless of system preference or any stored theme. The light
     values are preserved below (behind an unreachable selector) for when we
     revisit it — flip `color-scheme` and restore the media query to bring it back. */
  color-scheme: dark;
}
/* Light palette parked until it's properly designed. Kept for reference; the
   selector never matches, so system-light users still get the dark instrument panel. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]).__light-disabled {
    --bg: #f6f8f7; --bg-1: #eef2f0; --bg-2: #e7edeb; --bg-3: #dde7e3;
    --line: #dde5e2; --line-2: #c6d3ce; --ink: #0f201d; --muted: #475854; --faint: #7d8f8a;
    --brand: #0f766e; --brand-deep: #0b5a50; --brand-glow: rgba(15,118,110,.12);
    --gate: #b45309; --gate-glow: rgba(180,83,9,.12); --good: #16a34a; --crit: #dc2626;
  }
}
:root[data-theme="dark"],
:root[data-theme="light"] {
  --bg: #0a1211; --bg-1: #0e1a18; --bg-2: #122320; --bg-3: #16302b; --line: #1b2b28;
  --line-2: #274740; --ink: #eaf3f1; --muted: #93a7a2; --faint: #5f736e;
  --brand: #2dd4bf; --brand-deep: #0f766e; --brand-glow: rgba(45,212,191,.16);
  --gate: #f0a94b; --gate-glow: rgba(240,169,75,.16); --good: #4ade80; --crit: #f2555a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; position: relative; min-height: 100vh;
}
/* layered ambient background: fixed dot-grid + a soft teal bloom up top */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 0);
  background-size: 34px 34px;
}
body::after {
  content: ""; position: fixed; left: 50%; top: -260px; width: 900px; height: 620px;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--brand-glow), transparent 62%);
  filter: blur(46px);
}
.site { position: relative; z-index: 1; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }
::selection { background: var(--brand); color: #04211d; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
img, svg, canvas { max-width: 100%; }

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 50; padding: 14px 0;
  transition: border-color .2s ease, background .2s ease;
  border-bottom: 1px solid transparent;
}
.hdr.scrolled {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.hdr .row { display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px; letter-spacing: -.03em; }
.brand .mk {
  width: 24px; height: 24px; display: grid; place-items: center; flex: none;
}
.brand .mk svg { width: 24px; height: 24px; display: block; }
.brand .os { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); align-self: flex-start; margin-top: 2px; }
/* domain wordmark: BuildExponential + teal .Org accent, same size/weight, inline */
.brand .tld { color: var(--brand); }
.hdr .sp { flex: 1; }
.hdr nav { display: flex; align-items: center; gap: 22px; }
.hdr nav a.nl { color: var(--muted); font-size: 14px; font-weight: 500; transition: color .15s; }
.hdr nav a.nl:hover { color: var(--ink); }
.hdr nav a.nl.gh { display: inline-flex; align-items: center; gap: 6px; }
.hdr nav a.nl.gh svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
  /* Space is tight on mobile, but Proof is the trust page - keep it reachable; hide the rest. */
  .hdr nav a.nl { display: none; }
  .hdr nav a.nl[href="/proof.html"] { display: inline-flex; }
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px;
  padding: 10px 17px; border-radius: 10px; background: var(--brand); color: #04211d;
  border: 1px solid color-mix(in srgb, var(--brand) 60%, #000); transition: filter .15s, transform .15s;
  box-shadow: 0 8px 24px -12px var(--brand);
}
.btn:hover { filter: brightness(1.07); }
.btn .ar { transition: transform .15s; }
.btn:hover .ar { transform: translateX(3px); }
.btn.ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line-2); box-shadow: none;
}
.btn.ghost:hover { border-color: var(--brand); filter: none; background: var(--bg-1); }
.btn.lg { padding: 13px 24px; font-size: 15px; border-radius: 12px; }

/* ── shared section furniture ───────────────────────────────────────────── */
section { padding: 92px 0; position: relative; }
.divide { border-top: 1px solid var(--line); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 22px;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 10px 1px var(--brand);
}
.eyebrow.gate { color: var(--gate); }
.eyebrow.gate::before { background: var(--gate); box-shadow: 0 0 10px 1px var(--gate); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 { font-size: clamp(40px, 6.4vw, 74px); font-weight: 560; line-height: .98; letter-spacing: -.04em; }
h2 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 560; line-height: 1.03; letter-spacing: -.032em; }
h2 em, h1 em { font-style: normal; color: var(--brand); }
h2 em.gate, h1 em.gate { color: var(--gate); }
.sub { font-size: clamp(16px, 1.9vw, 19px); line-height: 1.55; color: var(--muted); max-width: 60ch; }
.lead-h { max-width: 22ch; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { padding: 56px 0 40px; }
.hero .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .hero .grid { grid-template-columns: 1fr; gap: 8px; } }
.hero h1 { margin-bottom: 22px; }
.hero .sub { margin-bottom: 30px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cta-alt { margin-top: 13px; font-size: 14px; }
.cta-alt a { color: var(--brand); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.cta-alt a:hover { text-decoration: underline; }
.hero .micro { margin-top: 20px; font-family: var(--mono); font-size: 12.5px; color: var(--faint); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hero .micro b { color: var(--muted); font-weight: 500; }
.hero .oshint { margin-top: 11px; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.hero .oshint b { color: var(--muted); font-weight: 500; }
/* github icon-link inside a ghost button */
.btn .gh-ic { width: 16px; height: 16px; }
.diagram-wrap {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, var(--bg-1), var(--bg));
}
.diagram-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.diagram-cap {
  position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}

/* ── logo strip ─────────────────────────────────────────────────────────── */
.trust { padding: 34px 0; }
.trust .lbl { text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 22px; }
.trust .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.trust .pill {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted); background: var(--bg-1);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px;
}
.trust .pill b { color: var(--brand); font-weight: 500; }

/* ── problem beats ──────────────────────────────────────────────────────── */
.beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 12px; }
@media (max-width: 820px) { .beats { grid-template-columns: 1fr; } }
.beat { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--bg-1); }
.beat .n { font-family: var(--mono); font-size: 12px; color: var(--brand); margin-bottom: 14px; }
.beat h3 { font-size: 19px; font-weight: 560; letter-spacing: -.01em; margin-bottom: 8px; }
.beat p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ── the OS tiles (with animated artifact mocks) ────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 14px; }
.tile {
  border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: var(--bg-1);
  grid-column: span 2; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
}
.tile.wide { grid-column: span 3; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr; } .tile, .tile.wide { grid-column: 1 / -1; } }
.tile .th { display: flex; align-items: baseline; gap: 10px; }
.tile .th .k { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.tile h3 { font-size: 18px; font-weight: 560; letter-spacing: -.01em; }
.tile p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }
.tile-src { margin-top: auto; font-family: var(--mono); font-size: 12px; color: var(--faint); text-decoration: none; align-self: flex-start; transition: color .15s; }
.tile-src:hover { color: var(--brand); }
.mock {
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); padding: 12px;
  font-family: var(--mono); font-size: 12px; min-height: 128px; position: relative;
}

/* approval card mock */
.mk-appr .hd { display: flex; align-items: center; gap: 8px; color: var(--gate); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.mk-appr .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gate); box-shadow: 0 0 8px var(--gate); }
.mk-appr .ln { color: var(--muted); margin: 3px 0; opacity: 0; transform: translateY(4px); }
.mk-appr .ln b { color: var(--ink); font-weight: 500; }
.mk-appr.in .ln { animation: fadeUp .5s ease forwards; }
.mk-appr.in .ln:nth-child(2) { animation-delay: .05s; }
.mk-appr.in .ln:nth-child(3) { animation-delay: .18s; }
.mk-appr.in .ln:nth-child(4) { animation-delay: .31s; }
.mk-appr .btns { display: flex; gap: 8px; margin-top: 12px; opacity: 0; }
.mk-appr.in .btns { animation: fadeUp .5s ease .5s forwards; }
.mk-appr .b1, .mk-appr .b2 { font-size: 11px; padding: 5px 12px; border-radius: 7px; }
.mk-appr .b1 { background: var(--gate); color: #241300; }
.mk-appr .b2 { border: 1px solid var(--line-2); color: var(--muted); }

/* brain map mock */
.mk-map { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-content: center; }
.mk-map .c { height: 20px; border-radius: 5px; background: var(--bg-3); border: 1px solid var(--line); opacity: .5; }
.mk-map.in .c { animation: lightUp .5s ease forwards; }
.mk-map.in .c:nth-child(3n) { animation-delay: .12s; }
.mk-map.in .c:nth-child(4n) { animation-delay: .26s; }
.mk-map.in .c.hot { animation-delay: .4s; }

/* decision-log diff mock */
.mk-diff .r { margin: 2px 0; padding: 1px 6px; border-radius: 4px; opacity: 0; transform: translateX(-4px); }
.mk-diff.in .r { animation: slideIn .45s ease forwards; }
.mk-diff.in .r:nth-child(2) { animation-delay: .1s; }
.mk-diff.in .r:nth-child(3) { animation-delay: .22s; }
.mk-diff.in .r:nth-child(4) { animation-delay: .34s; }
.mk-diff .r.add { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.mk-diff .r.del { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); text-decoration: line-through; opacity: .0; }
.mk-diff .r.ctx { color: var(--faint); }

@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes slideIn { to { opacity: 1; transform: none; } }
@keyframes lightUp { to { opacity: 1; background: color-mix(in srgb, var(--brand) 22%, var(--bg-3)); border-color: var(--brand); } }

/* ── engagement strip ───────────────────────────────────────────────────── */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
@media (max-width: 820px) { .phases { grid-template-columns: 1fr; } }
.phase { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--bg-1); position: relative; }
.phase .step { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; }
.phase h3 { font-size: 21px; font-weight: 560; margin: 8px 0 4px; }
.phase .dur { font-family: var(--mono); font-size: 12px; color: var(--brand); margin-bottom: 12px; }
.phase p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }
.phase .own { margin-top: 34px; }

/* ── comparison table ───────────────────────────────────────────────────── */
.cmp-scroll { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.cmp th, table.cmp td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp thead th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
table.cmp thead th.us { color: var(--brand); }
table.cmp tbody th { font-weight: 500; color: var(--ink); }
table.cmp td { color: var(--muted); }
table.cmp td.us { color: var(--ink); background: color-mix(in srgb, var(--brand) 6%, transparent); }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: none; }

/* ── the will/won't contract ────────────────────────────────────────────── */
.contract { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
@media (max-width: 720px) { .contract { grid-template-columns: 1fr; } }
.col { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--bg-1); }
.col h3 { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.col.will h3 { color: var(--good); }
.col.wont h3 { color: var(--gate); }
.col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.col li { font-size: 14.5px; line-height: 1.5; color: var(--muted); padding-left: 26px; position: relative; }
.col li::before { position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 600; }
.col.will li::before { content: "✓"; color: var(--good); }
.col.wont li::before { content: "✕"; color: var(--gate); }

/* ── proof band ─────────────────────────────────────────────────────────── */
.proof-band { text-align: center; }
.proof-band .chips { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.proof-band .chip { font-family: var(--mono); font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); background: var(--bg-1); border-radius: 999px; padding: 8px 15px; }
.proof-band .chip b { color: var(--brand); font-weight: 500; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { width: 100%; margin: 14px auto 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 4px; font-size: 17px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { font-family: var(--mono); color: var(--brand); flex: none; transition: transform .2s; }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq .ans { padding: 0 4px 20px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 68ch; }

/* ── final CTA ──────────────────────────────────────────────────────────── */
.finale {
  text-align: center; border: 1px solid var(--line-2); border-radius: 22px; padding: 56px 32px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%), var(--bg-1);
}
.finale h2 { margin-bottom: 12px; }
.finale p { color: var(--muted); max-width: 52ch; margin: 0 auto 26px; font-size: 16px; line-height: 1.5; }
.finale .re { margin-top: 18px; font-family: var(--mono); font-size: 12.5px; color: var(--faint); }

/* ── footer ─────────────────────────────────────────────────────────────── */
footer.ft { border-top: 1px solid var(--line); padding: 44px 0 60px; }
footer.ft .cols { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
footer.ft .brand { margin-bottom: 0; }
footer.ft .about { max-width: 34ch; color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-top: 12px; }
footer.ft .sp { flex: 1; }
footer.ft .fcol { display: flex; flex-direction: column; gap: 10px; }
footer.ft .fcol .h { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
footer.ft .fcol a { color: var(--muted); font-size: 13.5px; }
footer.ft .fcol a:hover { color: var(--ink); }
footer.ft .base { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; }
footer.ft .base .sp { flex: 1; }
.theme { background: transparent; border: 1px solid var(--line-2); color: var(--muted); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 14px; }
.theme:hover { color: var(--ink); border-color: var(--brand); }

/* ── scroll reveal (progressive enhancement) ────────────────────────────── */
/* Content is visible by default. Only when JS is present (html.js) do we hide
   it to animate in - so a JS failure never leaves the page blank. */
html.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv.d1 { transition-delay: .06s; } html.js .rv.d2 { transition-delay: .12s; } html.js .rv.d3 { transition-delay: .18s; } html.js .rv.d4 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .mk-appr .ln, .mk-appr .btns, .mk-diff .r { opacity: 1; transform: none; animation: none; }
  .mk-map .c { opacity: 1; }
  body::after { display: none; }
}

/* ── inner-page hero (method / proof / apply) ───────────────────────────── */
.phead { padding: 64px 0 8px; }
.phead h1 { font-size: clamp(36px, 5.4vw, 60px); margin-bottom: 18px; }
.phead .sub { font-size: clamp(17px, 2vw, 20px); }
.prose { max-width: 720px; }
.prose h2 { margin: 48px 0 14px; }
.prose h3 { font-size: 21px; font-weight: 560; letter-spacing: -.01em; margin: 32px 0 8px; }
.prose p { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 16px; }
.prose p b, .prose li b { color: var(--ink); font-weight: 560; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 8px 0; }
.prose .callout { border-left: 2px solid var(--brand); background: var(--bg-1); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 24px 0; }
.prose .callout p { margin: 0; color: var(--ink); }

/* ── apply form ─────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; margin-top: 20px; }
@media (max-width: 860px) { .form-grid { grid-template-columns: 1fr; } }
.form-card { border: 1px solid var(--line); border-radius: 18px; background: var(--bg-1); padding: 28px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 7px; }
.field label .req { color: var(--gate); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--ink); font-family: var(--sans); font-size: 14.5px; padding: 11px 13px;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-top: 6px; }
.form-status { margin-top: 14px; font-size: 14px; min-height: 20px; }
.form-status.ok { color: var(--good); }
.form-status.err { color: var(--crit); }
.aside li { position: relative; padding-left: 26px; }
.aside ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.aside li::before { content: "→"; position: absolute; left: 0; color: var(--brand); font-family: var(--mono); }
.aside li b { color: var(--ink); }
.aside li span { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ── tier band (Free vs Enterprise) ─────────────────────────────────────── */
.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
@media (max-width: 820px) { .tier-grid { grid-template-columns: 1fr; } }
.tier {
  border: 1px solid var(--line); border-radius: 20px; padding: 30px; background: var(--bg-1);
  display: flex; flex-direction: column;
}
.tier.feature {
  border-color: var(--line-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent 58%), var(--bg-1);
  box-shadow: 0 30px 70px -46px var(--brand);
}
.tier .tname { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tier .tname h3 { font-size: 22px; font-weight: 560; letter-spacing: -.02em; }
.tier .badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); border-radius: 999px; padding: 3px 9px;
}
.tier .badge.g { color: var(--gate); border-color: color-mix(in srgb, var(--gate) 40%, transparent); }
.tier .price { font-size: 34px; font-weight: 560; letter-spacing: -.03em; margin: 2px 0; }
.tier .price .per { font-size: 13px; color: var(--faint); font-weight: 400; font-family: var(--mono); letter-spacing: 0; }
.tier .tsub { font-size: 14.5px; color: var(--muted); line-height: 1.5; margin: 6px 0 22px; }
.tier ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.tier li { font-size: 14.5px; line-height: 1.5; color: var(--muted); padding-left: 26px; position: relative; }
.tier li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand); font-family: var(--mono); font-weight: 600; }
.tier li.g::before { content: "★"; color: var(--gate); }
.tier .btn { justify-content: center; }

/* ── download page ───────────────────────────────────────────────────────── */
.dl-note {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted); line-height: 1.5;
  border: 1px solid var(--line); background: var(--bg-1); border-radius: 12px; padding: 13px 16px; margin: 6px 0 30px;
}
.dl-note b { color: var(--gate); font-weight: 500; }
.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 720px) { .dl-grid { grid-template-columns: 1fr; } }
.dl-card {
  border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: var(--bg-1);
  display: flex; flex-direction: column; gap: 3px;
}
.dl-card.primary {
  border-color: var(--line-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent 58%), var(--bg-1);
}
.dl-card .os-name { font-size: 18px; font-weight: 560; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.dl-card .soon {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gate);
  border: 1px solid color-mix(in srgb, var(--gate) 40%, transparent); border-radius: 999px; padding: 2px 7px;
}
.dl-card .os-meta { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-bottom: 16px; }
.dl-card .btn { justify-content: center; margin-top: auto; }
.dl-card .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; box-shadow: none; }
/* Go-live is one attribute: dropping aria-disabled on a card's button auto-hides its "soon" badge. */
.dl-card:has(.btn:not([aria-disabled])) .soon { display: none; }
.dl-req { margin-top: 30px; }
.dl-req .eyebrow { color: var(--faint); }
.dl-req .eyebrow::before { background: var(--faint); box-shadow: none; }
.src-run { margin-top: 8px; }
.src-run .eyebrow { color: var(--brand); }
.src-lede { color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 640px; margin: 10px 0 12px; }
.src-block {
  font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--ink);
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; overflow-x: auto; white-space: pre; margin: 0 0 12px;
}
.src-block .c { color: var(--faint); }
.src-note { font-size: 13px; color: var(--muted); }

/* ── "just ask. you approve." interactive row ───────────────────────────── */
/* Borrowed structure: you → [tiny animated demo] → gated result. Recolored to
   BuildEx's semantics - teal is the agent working, amber is the human tap. */
.asks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
@media (max-width: 820px) { .asks { grid-template-columns: 1fr; } }
.ask { border: 1px solid var(--line); border-radius: 18px; background: var(--bg-1); padding: 24px 26px; }
.ask .you { display: flex; gap: 11px; align-items: flex-start; }
.ask .you .tag { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; padding-top: 3px; }
.ask .you p { font-size: 16.5px; color: var(--ink); font-weight: 500; line-height: 1.4; margin: 0; }
.ask .res { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.ask .res .tag { font-family: var(--mono); font-size: 11px; color: var(--gate); white-space: nowrap; padding-top: 2px; }
.ask .res p { font-size: 14px; color: var(--muted); line-height: 1.45; margin: 0; }
.ask-stage { position: relative; margin: 16px 0 2px; height: 104px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.ask-stage svg { width: 100%; height: 104px; display: block; }
.ask-stage .a { animation-play-state: paused; }
.ask.in .ask-stage .a { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .ask-stage .a { animation: none !important; } }
.as-cell { fill: var(--brand); opacity: .12; transform-box: fill-box; animation: as-cellfill 4s ease-in-out infinite; }
@keyframes as-cellfill { 0%{opacity:.1} 14%{opacity:1} 80%{opacity:1} 100%{opacity:.1} }
.as-row { fill: color-mix(in srgb, var(--muted) 42%, transparent); }
.as-row.flag { animation: as-rowflash 3.4s ease-in-out infinite; }
@keyframes as-rowflash { 0%,100%{fill:color-mix(in srgb,var(--muted) 42%,transparent)} 50%{fill:var(--gate)} }
.as-pip { fill: var(--gate); opacity: 0; transform-box: fill-box; animation: as-pipfly 3.4s ease-in-out infinite; }
@keyframes as-pipfly { 0%,40%{transform:translateX(0);opacity:0} 50%{opacity:1} 74%{transform:translateX(72px);opacity:0} 100%{opacity:0} }
.as-band { fill: var(--brand); opacity: 0; animation: as-scan 3.4s ease-in-out infinite; }
@keyframes as-scan { 0%{transform:translateY(-18px);opacity:0} 12%{opacity:.14} 88%{opacity:.14} 100%{transform:translateY(94px);opacity:0} }
.as-bub { transform-box: fill-box; transform-origin: center; animation: as-bubblein 4.4s ease-in-out infinite; }
@keyframes as-bubblein { 0%{opacity:0;transform:scale(.92)} 12%{opacity:1;transform:scale(1)} 92%{opacity:1} 100%{opacity:0} }
.as-type { transform-box: fill-box; transform-origin: left center; animation: as-typeline 4.4s ease-in-out infinite; }
@keyframes as-typeline { 0%,22%{transform:scaleX(0)} 44%{transform:scaleX(1)} 92%{transform:scaleX(1)} 100%{transform:scaleX(0)} }
.as-add { transform-box: fill-box; transform-origin: left center; opacity: 0; animation: as-addin 4.4s ease-in-out infinite; }
@keyframes as-addin { 0%,20%{opacity:0;transform:translateX(-8px)} 40%{opacity:1;transform:none} 92%{opacity:1} 100%{opacity:0} }
.as-check { fill: none; stroke: var(--gate); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34; animation: as-draw 4.4s ease-in-out infinite; }
@keyframes as-draw { 0%,62%{stroke-dashoffset:34} 78%{stroke-dashoffset:0} 92%{stroke-dashoffset:0} 100%{stroke-dashoffset:34} }
/* neutral shells the builders reuse (color via class, not var() attributes) */
.as-shell { fill: color-mix(in srgb, var(--muted) 8%, transparent); stroke: var(--line-2); }
.as-faint { fill: color-mix(in srgb, var(--muted) 45%, transparent); }
.as-teal { fill: var(--brand); }
.as-tealsoft { fill: color-mix(in srgb, var(--brand) 16%, transparent); stroke: color-mix(in srgb, var(--brand) 42%, transparent); }

/* ── BuildEx acronym explainer (method page) ────────────────────────────── */
.acro { display: flex; gap: 12px; margin: 14px 0 8px; }
@media (max-width: 640px) { .acro { flex-direction: column; } }
.acro .part { border: 1px solid var(--line); background: var(--bg-1); border-radius: 16px; padding: 20px 22px; flex: 1; }
.acro .part .big { font-family: var(--mono); font-size: clamp(30px, 5vw, 46px); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--faint); }
.acro .part .big .hi { color: var(--brand); }
.acro .part .exp { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.4; }
.acro .part .exp b { color: var(--ink); font-weight: 560; }

/* ── theory page: concept blocks (text + visual, alternating) ────────────── */
.concept { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.concept.rev .ctext { order: 2; }
@media (max-width: 860px) { .concept { grid-template-columns: 1fr; gap: 24px; } .concept.rev .ctext { order: 0; } }
.ctext .eyebrow { margin-bottom: 16px; }
.ctext h2 { margin-bottom: 14px; }
.ctext p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; max-width: 46ch; }
.ctext p:last-child { margin-bottom: 0; }
.ctext p b { color: var(--ink); font-weight: 560; }

/* exponential curve */
.viz-curve { border: 1px solid var(--line); border-radius: 20px; padding: 12px 16px;
  background: radial-gradient(120% 120% at 70% 0%, var(--bg-1), var(--bg)); }
.viz-curve svg { width: 100%; height: auto; display: block; }

/* models are a commodity; the brain stays */
.swap { display: flex; align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-1); padding: 30px; }
.swap .chips { display: flex; flex-direction: column; gap: 10px; }
.swap .chip { font-family: var(--mono); font-size: 13px; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 15px; color: var(--muted); background: var(--bg-2); opacity: .45; animation: swapcyc 4.5s ease-in-out infinite; }
.swap .chip:nth-child(1) { animation-delay: 0s; } .swap .chip:nth-child(2) { animation-delay: 1.5s; } .swap .chip:nth-child(3) { animation-delay: 3s; }
@keyframes swapcyc { 0%,66%,100% { opacity: .45; border-color: var(--line-2); color: var(--muted); } 8%,24% { opacity: 1; border-color: var(--brand); color: var(--ink); } }
.swap .arrow { color: var(--faint); font-family: var(--mono); font-size: 20px; flex: none; }
.swap .brainbox { flex: 1; border: 1px solid var(--brand); border-radius: 14px; padding: 20px; text-align: center;
  background: linear-gradient(180deg, var(--brand-glow), transparent); }
.swap .brainbox b { color: var(--ink); font-size: 15px; } .swap .brainbox small { color: var(--faint); font-family: var(--mono); font-size: 11px; display: block; margin-top: 3px; }
@media (max-width: 480px) { .swap { flex-direction: column; align-items: stretch; } .swap .arrow { transform: rotate(90deg); text-align: center; } }
@media (prefers-reduced-motion: reduce) { .swap .chip { animation: none; opacity: .8; } }

/* the autonomy ladder */
.ladder { display: flex; flex-direction: column; gap: 10px; }
.rung { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-1); padding: 15px 18px; }
.rung .lbl { font-size: 14.5px; color: var(--ink); }
.rung .state { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.rung .state.open { color: var(--good); border-color: color-mix(in srgb, var(--good) 42%, transparent); }
.rung .state.earned { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 42%, transparent); }
.rung .state.gated { color: var(--gate); border-color: color-mix(in srgb, var(--gate) 42%, transparent); }

/* approval-hours timeline */
.tl { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-1); padding: 24px 26px; }
.tl-track { position: relative; height: 26px; border-radius: 8px; overflow: visible;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 24%, transparent), color-mix(in srgb, var(--brand) 9%, transparent)); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.tl-track .tap { position: absolute; top: -6px; width: 2px; height: 38px; background: var(--gate); box-shadow: 0 0 8px var(--gate); }
.tl-track .tap::after { content: "▲"; position: absolute; top: -12px; left: -4px; font-size: 8px; color: var(--gate); }
.tl-track .play { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .45; animation: tlsweep 5s linear infinite; }
@keyframes tlsweep { 0% { left: 0; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .tl-track .play { animation: none; left: 62%; } }
.tl-legend { display: flex; gap: 20px; margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.tl-legend .k { display: inline-flex; align-items: center; gap: 7px; }
.tl-legend .sw { width: 12px; height: 12px; border-radius: 3px; }
.tl-legend .sw.teal { background: color-mix(in srgb, var(--brand) 40%, transparent); }
.tl-legend .sw.amber { background: var(--gate); }

/* applications: a catalog of loops */
.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
@media (max-width: 820px) { .apps { grid-template-columns: 1fr; } }
.appc { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-1); padding: 20px 22px; }
.appc h3 { font-size: 16px; font-weight: 560; letter-spacing: -.01em; margin-bottom: 13px; }
.appc .flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.appc .flow span { font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.appc .flow span.g { color: var(--gate); border-color: color-mix(in srgb, var(--gate) 35%, transparent); }
.appc .flow i { color: var(--faint); font-style: normal; }