/* You Break We Fix : phosphor bench theme. See DESIGN.md. */

:root{
  --bg: oklch(0.11 0 0);
  --surface: oklch(0.16 0.01 115);
  --surface-2: oklch(0.20 0.012 115);
  --line: oklch(0.32 0.015 115);
  --ink: oklch(0.94 0.012 115);
  --muted: oklch(0.72 0.02 115);
  --phosphor: oklch(0.86 0.17 115);
  --phosphor-dim: oklch(0.55 0.10 115);
  --amber: oklch(0.76 0.13 75);
  --on-phosphor: oklch(0.13 0.02 115);
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Red Hat Text', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --wrap: 1120px;
  --space-section: clamp(4rem, 9vw, 7.5rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --z-nav: 100;
  --z-skip: 200;
}

*,*::before,*::after{ 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(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; height:auto; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-0.02em;
  text-wrap:balance;
  margin:0 0 1rem;
}
h1{ font-size:clamp(2.4rem, 6vw, 4.2rem); }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); }
h3{ font-size:1.25rem; font-weight:700; line-height:1.25; }
p{ margin:0 0 1rem; max-width:70ch; }
a{ color:var(--phosphor); text-underline-offset:3px; }
a:hover{ color:var(--ink); }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }

.wrap{ width:min(var(--wrap), 100% - 2.5rem); margin-inline:auto; }
.wrap-narrow{ max-width:640px; }
.wrap-narrow h1{ margin-top:2.5rem; }
.cta-row{ margin-top:1.5rem; }

.skip{
  position:absolute; left:-999px; top:0; z-index:var(--z-skip);
  background:var(--phosphor); color:var(--on-phosphor);
  padding:.6rem 1rem; font-weight:600; border-radius:0 0 6px 0;
}
.skip:focus{ left:0; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:var(--z-nav);
  background:color-mix(in oklab, var(--bg) 96%, transparent);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; gap:1.5rem; min-height:64px; }
.brand{
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  color:var(--ink); text-decoration:none; letter-spacing:-0.01em;
}
.brand svg{ flex:none; }
.brand .fix{ color:var(--phosphor); }
.nav-links{ margin-left:auto; display:flex; gap:1.6rem; align-items:center; }
.nav-links a{ color:var(--muted); text-decoration:none; font-weight:500; font-size:.95rem; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.btn{ color:var(--on-phosphor); }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-weight:600; text-decoration:none;
  padding:.85rem 1.6rem; border-radius:6px; border:1px solid transparent;
  font-size:1rem; line-height:1.2; cursor:pointer; font-family:var(--font-body);
  transition:transform .25s var(--ease-out), background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn-primary{
  background:var(--phosphor); color:var(--on-phosphor);
  box-shadow:0 0 24px color-mix(in oklab, var(--phosphor) 22%, transparent);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 38px color-mix(in oklab, var(--phosphor) 34%, transparent); color:var(--on-phosphor); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ background:var(--surface); color:var(--ink); }
.btn:active{ transform:translateY(0); }
.nav .btn{ padding:.55rem 1.1rem; font-size:.92rem; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:clamp(4rem,10vw,7rem) 0 var(--space-section); }
.hero-grid{ display:grid; gap:3rem; align-items:center; grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.hero .lede{ font-size:1.2rem; color:var(--muted); max-width:52ch; }
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.hero-note{ margin-top:1.4rem; color:var(--muted); font-size:.85rem; }
.hero-trace{
  position:absolute; inset:0; z-index:-1; opacity:.5; pointer-events:none;
}
.hero-trace svg{ width:100%; height:100%; }

/* readout panel */
.readout{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1.5rem 1.6rem;
  font-family:var(--font-mono);
  font-size:.85rem;
  line-height:2.1;
  color:var(--muted);
  box-shadow:0 24px 60px oklch(0 0 0 / .45);
}
.readout::before,.readout::after{
  content:""; position:absolute; width:14px; height:14px;
  border:1px solid var(--phosphor-dim); pointer-events:none;
}
.readout::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.readout::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.readout .rl{ display:flex; justify-content:space-between; gap:1.5rem; border-bottom:1px dashed color-mix(in oklab, var(--line) 60%, transparent); }
.readout .rl:last-child{ border-bottom:0; }
.readout .ok{ color:var(--phosphor); }
.readout .warn{ color:var(--amber); }
.readout-head{
  display:flex; justify-content:space-between; gap:1rem;
  color:var(--phosphor); border-bottom:1px solid var(--line);
  padding-bottom:.6rem; margin-bottom:.6rem; letter-spacing:.06em;
}
.blink{ animation:blink 1.2s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- sections ---------- */
.section{ padding-block:var(--space-section); }
.section-tight{ padding-block:calc(var(--space-section) * .6); }
.section-head{ max-width:62ch; margin-bottom:3rem; }
.section-head p{ color:var(--muted); font-size:1.1rem; }

/* menu-board rows */
.board{ border-top:1px solid var(--line); }
.board-row{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,3fr);
  gap:1.5rem; align-items:baseline;
  padding:1.35rem .75rem;
  border-bottom:1px solid var(--line);
  transition:background-color .3s var(--ease-out);
}
.board-row:hover{ background:var(--surface-2); }
.board-row h3{ margin:0; }
.board-row .fixes{ color:var(--muted); margin:0; font-size:.98rem; }
.board-row .eta{
  font-family:var(--font-mono); font-size:.85rem; color:var(--phosphor);
  text-align:right; white-space:nowrap;
}
.board-row .eta small{ display:block; color:var(--muted); font-size:.86em; }

/* steps: a real sequence, numbers earned */
.steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:2.5rem; counter-reset:step; }
.step{ position:relative; padding-top:.5rem; }
.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--font-mono); font-size:.85rem; color:var(--amber);
  display:block; margin-bottom:.9rem;
}
.step h3{ margin-bottom:.5rem; }
.step p{ color:var(--muted); margin:0; }

/* bench manifesto */
.bench{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:3rem; align-items:start; }
.bench-claims{ margin:0; padding:0; list-style:none; display:grid; gap:1.1rem; }
.bench-claims li{ padding-left:1.6rem; position:relative; }
.bench-claims li::before{
  content:""; position:absolute; left:0; top:.55em; width:.7rem; height:2px;
  background:var(--phosphor);
}
.bench-claims strong{ color:var(--ink); }
.bench-claims li{ color:var(--muted); }

/* scope divider */
.scope{ display:block; width:100%; height:70px; }
.scope path{ stroke:var(--phosphor-dim); stroke-width:1.5; fill:none; }

/* FAQ */
.faq{ max-width:760px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; padding:1.2rem 2.4rem 1.2rem 0; font-weight:600; font-size:1.06rem;
  list-style:none; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:.4rem; top:50%; translate:0 -50%;
  font-family:var(--font-mono); color:var(--phosphor); font-size:1.1rem;
  transition:rotate .3s var(--ease-out);
}
.faq details[open] summary::after{ rotate:45deg; }
.faq details p{ color:var(--muted); padding:0 0 1.3rem; margin:0; }

/* CTA band */
.cta-band{
  background:var(--surface);
  border-block:1px solid var(--line);
  text-align:center;
}
.cta-band .wrap{ max-width:720px; }
.cta-band p{ color:var(--muted); margin-inline:auto; }
.cta-band .btn{ margin-top:1.4rem; }

/* ---------- forms ---------- */
.form-grid{ display:grid; gap:1.3rem; max-width:640px; }
.form-grid .two{ display:grid; gap:1.3rem; grid-template-columns:1fr 1fr; }
label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:.4rem; }
input,select,textarea{
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:6px;
  padding:.75rem .9rem; font:inherit; font-size:1rem;
}
input::placeholder,textarea::placeholder{ color:var(--muted); }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:transparent; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ color:var(--muted); font-size:.85rem; margin-top:.9rem; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:3rem 0 3.5rem; }
.foot{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start; color:var(--muted); font-size:.9rem; }
.foot a{ color:var(--muted); }
.foot a:hover{ color:var(--ink); }
.foot .cols{ display:flex; gap:3rem; flex-wrap:wrap; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.foot .tag{ font-family:var(--font-mono); font-size:.78rem; color:var(--phosphor-dim); margin-top:.8rem; }

/* ---------- motion ---------- */
.reveal{ transition:opacity .6s var(--ease-out), translate .6s var(--ease-out); }
.js .reveal.pending{ opacity:0; translate:0 18px; }
.js .reveal.in{ opacity:1; translate:0 0; }
.trace-draw path{ stroke-dasharray:1400; stroke-dashoffset:0; }
.js .trace-draw.pending path{ stroke-dashoffset:1400; }
.js .trace-draw.in path{ animation:draw 2.4s var(--ease-out) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion: reduce){
  .reveal,.btn{ transition:none; }
  .js .reveal.pending{ opacity:1; translate:0 0; }
  .js .trace-draw.pending path{ stroke-dashoffset:0; }
  .js .trace-draw.in path{ animation:none; }
  .blink{ animation:none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-grid,.bench{ grid-template-columns:1fr; }
  .hero-trace{ opacity:.3; }
  .board-row{ grid-template-columns:1fr; gap:.35rem; }
  .board-row .eta{ text-align:left; margin-top:.35rem; }
  .nav-links a:not(.btn){ display:none; }
}
@media (max-width: 520px){
  .form-grid .two{ grid-template-columns:1fr; }
  body{ font-size:1rem; }
  .hero-trace{ display:none; }
}