/* ============================================================
   Builders Intelligence — the SAME design system as Development
   Potential (see Development-Potential/DESIGN-STANDARD.md).
   Only the two accent colours differ, per Brad's brief:
     Development Potential  #0089ba + #00c9a7
     Builders Intelligence  #4ffbdf + #00d2fc

   Both of Brad's colours are very light, so they cannot carry
   text on a pale ground. They are used where they work — fills,
   washes, rules, chart marks — and a darkened companion carries
   text and buttons. That keeps his palette without failing
   contrast.
   ============================================================ */
:root{
  color-scheme: light;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s8:64px; --s10:80px; --s12:96px; --s16:128px;

  --blue:#00d2fc;          /* Brad's cyan — fills, rules, chart marks */
  --teal:#4ffbdf;          /* Brad's aqua — same */
  /* Both of Brad's colours are far too pale to carry text on a light ground,
     so text uses a deepened version of the SAME hue. Matched in darkness to
     Development Potential's #0089ba / #00c9a7 so the two sites read as one
     family — an earlier attempt darkened them too far and drifted green. */
  --blue-ink:#0086b0;
  --teal-ink:#0a9e85;
  --link:#00789e;
  --down:#a8422c;

  --blue-w:#ddf3fb;
  --teal-w:#dcf8f1;
  --down-w:#f8e9e4;

  --ink:#0a0e11;
  --ink-2:#4b545c;
  --ink-3:#7d868d;
  --line:#d8d5cc;
  --hair:#c3bfb4;
  --grid:#e6e4dd;
  --bg:#e9e7df;
  --surface:#f7f6f1;

  --wrap:1240px;
  --ax:11px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --blue:#00d2fc; --teal:#4ffbdf; --blue-ink:#68e3ff; --teal-ink:#7dfce6;
    --link:#68e3ff; --down:#e88066;
    --blue-w:#07303a; --teal-w:#083029; --down-w:#331c16;
    --ink:#f0efe9; --ink-2:#a7afb5; --ink-3:#7c858c;
    --line:#242a2f; --hair:#333a40; --grid:#1d2328; --bg:#0b0e11; --surface:#12171b;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --blue:#00d2fc; --teal:#4ffbdf; --blue-ink:#68e3ff; --teal-ink:#7dfce6;
  --link:#68e3ff; --down:#e88066;
  --blue-w:#07303a; --teal-w:#083029; --down-w:#331c16;
  --ink:#f0efe9; --ink-2:#a7afb5; --ink-3:#7c858c;
  --line:#242a2f; --hair:#333a40; --grid:#1d2328; --bg:#0b0e11; --surface:#12171b;
}
*{box-sizing:border-box}
img{max-width:100%}
/* Android Chrome inflates text in wide blocks ("font boosting"), which pushed
   grid columns wider than the screen and clipped the right-hand cells on a real
   phone. Pin it so the layout controls the size, not the browser. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--s4)}
.lab{font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3)}
.chip{display:inline-block; vertical-align:top; line-height:1.1; padding:5px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
.chip.b{background:var(--blue-w); color:var(--blue-ink)}
.chip.t{background:var(--teal-w); color:var(--teal-ink)}
.chip.d{background:var(--down-w); color:var(--down)}
.num{font-variant-numeric:tabular-nums}

.top{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:var(--s3); min-height:60px; flex-wrap:wrap; padding-block:10px}
.brand{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--ink); text-decoration:none}
.brand i{width:11px; height:11px; border-radius:3px; background:linear-gradient(135deg,var(--blue),var(--teal)); flex:none; font-style:normal}
.nav{display:flex; gap:var(--s3); margin-left:auto; flex-wrap:wrap}
.nav a{font-size:13.5px; color:var(--ink-2); text-decoration:none; padding-bottom:3px; border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink); font-weight:500; border-bottom-color:var(--blue)}
.nav a.only{color:var(--ink-3)}
.nav a.only::after{content:" ·"; color:var(--blue-ink)}

.open{padding-block:var(--s10) 0; background:linear-gradient(170deg,var(--blue-w) 0%,rgba(0,0,0,0) 62%)}
.open h1{margin:var(--s3) 0 0; font-weight:700; font-size:clamp(40px,9vw,104px); line-height:.99; letter-spacing:-.05em; max-width:14ch; text-wrap:balance}
.open h1 em{font-style:normal; background:linear-gradient(100deg,#0095c4,#13bf9e); -webkit-background-clip:text; background-clip:text; color:transparent}
.open .sub{margin:var(--s3) 0 0; font-size:19px; line-height:1.55; color:var(--ink-2); max-width:52ch}

.sec{padding-block:var(--s10)}
.sec-top{border-top:3px solid var(--blue); padding-top:var(--s4); margin-bottom:var(--s5)}
.sec-top.t{border-top-color:var(--teal)}
.sec-top.d{border-top-color:var(--down)}
.sec-top h2{margin:var(--s2) 0 0; font-size:clamp(27px,4.2vw,42px); line-height:1.12; letter-spacing:-.035em; font-weight:700; max-width:20ch}
.lead{margin:var(--s3) 0 0; font-size:17.5px; line-height:1.65; color:var(--ink-2); max-width:66ch}
.lead b{color:var(--ink); font-weight:600}
.src{margin:var(--s3) 0 0; font-size:13px; color:var(--ink-3); line-height:1.6}
.src a{color:var(--link); font-weight:600}

.chain{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2px; background:var(--hair); border:1px solid var(--hair); margin-top:var(--s6); border-radius:10px; overflow:hidden}
.step{background:var(--surface); padding:var(--s3) var(--s3) var(--s4); min-width:0}
.step .lab,.step .v,.step .d{overflow-wrap:anywhere}
.step .lab{display:block; margin-bottom:var(--s2)}
.step .v{display:block; font-size:clamp(22px,5.6vw,29px); font-weight:700; letter-spacing:-.03em; line-height:1.1}
.step .d{display:inline-block; margin-top:var(--s2); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:999px}
.step .d.up{background:var(--teal-w); color:var(--teal-ink)}
.step .d.dn{background:var(--down-w); color:var(--down)}
.step .d.flat{background:var(--blue-w); color:var(--blue-ink)}
.step.break{background:var(--down-w)}

.charts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:var(--s8) var(--s6); margin-top:var(--s8)}
.charts.one{grid-template-columns:1fr}
.chart{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:var(--s4); display:flex; flex-direction:column}
.chart h3{margin:var(--s2) 0 var(--s1); font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.25}
.chart .why{margin:0 0 var(--s3); font-size:15px; color:var(--ink-2); line-height:1.55}
.plot{width:100%; height:auto; display:block; overflow:visible}
.plot .gl{stroke:var(--grid); stroke-width:1; fill:none}
.plot .ax{fill:var(--ink-3); font-size:var(--ax); font-family:inherit; font-variant-numeric:tabular-nums}
.plot .nm{fill:var(--ink); font-size:var(--ax); font-family:inherit}
.plot .ln{fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.plot .dot{stroke:var(--surface); stroke-width:2}
.plot .ref{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3; fill:none}
.key{display:flex; gap:var(--s2) var(--s3); flex-wrap:wrap; margin-top:var(--s2); font-size:12.5px; color:var(--ink-2)}
.key i{display:inline-block; width:14px; height:3px; border-radius:2px; margin-right:6px; vertical-align:middle; font-style:normal}

details{border-top:1px solid var(--line); margin-top:var(--s2)}
details summary{list-style:none; cursor:pointer; min-height:44px; display:flex; align-items:center; gap:var(--s1); font-size:14.5px; font-weight:500; color:var(--link)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; margin-left:auto; font-size:18px; line-height:1; color:var(--ink-3)}
details[open] summary::after{content:"\2013"}
details .body{padding-bottom:var(--s3); font-size:15.5px; color:var(--ink-2); line-height:1.65; max-width:64ch}
details .body p{margin:0 0 var(--s2)}
details .body p:last-child{margin:0}

.band{padding-block:var(--s8); border-top:1px solid var(--line)}
.band-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8)}
.band h3{margin:var(--s3) 0 0; font-weight:700; font-size:clamp(29px,5vw,52px); line-height:1.05; letter-spacing:-.045em; text-wrap:balance}
.band .say{margin:var(--s3) 0 0; font-size:17.5px; line-height:1.6; color:var(--ink-2); max-width:42ch}
.band .go{display:inline-block; margin-top:var(--s4); font-size:15px; font-weight:600; padding:12px 20px; border-radius:999px; background:var(--blue-ink); color:#fff; text-decoration:none}
.band.teal .go{background:var(--teal-ink)}
.rows{border-radius:12px; overflow:hidden}
.row{display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:var(--s3); padding:var(--s3); border-bottom:1px solid var(--line); background:var(--surface)}
.row:last-of-type{border-bottom:0}
.row .k{font-size:15px; font-weight:600; min-width:9.5rem; overflow-wrap:anywhere}
.row .t{font-size:15.5px; color:var(--ink-2); line-height:1.6}
.row .t b{color:var(--ink); font-weight:600}
.row.locked{background:var(--blue-w)}

.close{border-top:3px solid var(--teal); padding-block:var(--s6) var(--s10)}
.close p{margin:var(--s3) 0 0; font-size:clamp(21px,3vw,28px); line-height:1.3; letter-spacing:-.03em; max-width:26ch; font-weight:600}
.foot{border-top:1px solid var(--line); padding-block:var(--s5); font-size:13px; color:var(--ink-3); line-height:1.7}

@media(max-width:880px){
  body{font-size:16.5px}
  .wrap{padding-inline:var(--s3)}
  .open{padding-block:var(--s8) 0}
  .sec,.band{padding-block:var(--s8)}
  .charts{grid-template-columns:1fr; gap:var(--s5)}
  .band-in{grid-template-columns:1fr; gap:var(--s5)}
  .row{grid-template-columns:1fr; gap:4px}
  .row .k{min-width:0}
  :root{--ax:17px}
  .plot .ln{stroke-width:3.5}
  .chart{padding:var(--s3)}
}
@media(max-width:560px){
  .chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{width:100%; margin-left:0; gap:var(--s2)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}


/* ---- the live tool, embedded ----
   The working tool is what people came for, so it sits directly under the
   page title, above the explanation. It is served from the existing
   deployment and still carries the old styling inside the frame — that is
   stated on the page rather than hidden, and goes away when the tool itself
   is restyled to this standard. */
.tool-wrap{margin-top:var(--s5); border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden}
.tool-frame{display:block; width:100%; height:78vh; min-height:560px; border:0; background:var(--surface)}
@media(max-width:880px){
  .tool-frame{height:70vh; min-height:460px}
    }