/* BoardBrain — site design system v2 */
:root{
  --paper:#FFFAF3; --bg:#FFF1E6; --bg-alt:#FBE7D3;
  --ink:#0E0E0E; --ink-soft:#2B2B2B; --ink-mute:#6E6354; --rule:#D9CBB8;
  --accent:#C8102E; --accent-dark:#8E0C20; --d-accent:#E84B5D; --amber:#C48510; --bronze:#C9A96E;
  --green:#1F7A3F; --navy:#2E5A88;
  --d-bg:#1A1613; --d-paper:#25211D; --d-ink:#F2E8D5; --d-ink-soft:#D8CDB8;
  --d-mute:#A29377; --d-rule:#3A3329;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--paper)}
img,svg{max-width:100%;display:block}
a{color:inherit}

/* ── wordmark & monogram ── */
.bb-wm,.bb-wm-r{font-family:var(--serif);font-weight:900;letter-spacing:-1px}
.bb-wm{color:var(--ink)}.bb-wm-r{color:var(--accent)}
.dark .bb-wm{color:var(--d-ink)}
.bb-mark{display:inline-block;vertical-align:middle;flex-shrink:0;transform-origin:center}
.bb-mark .bb-mark-board{fill:var(--ink)}
.bb-mark .bb-mark-brain{fill:var(--accent)}
.bb-mark .bb-mark-chamber{fill:var(--paper);opacity:0}
.dark .bb-mark .bb-mark-board{fill:var(--d-ink)}
@keyframes bb-mark-heart{0%,50%,100%{transform:scale(1);opacity:1}8%{transform:scale(1.04);opacity:.94}16%{transform:scale(1);opacity:1}26%{transform:scale(1.065);opacity:.85}36%{transform:scale(1);opacity:1}}
@keyframes bb-mark-chamber-l{0%,4%,22%,100%{opacity:0}9%,16%{opacity:.95}}
@keyframes bb-mark-chamber-r{0%,22%,40%,100%{opacity:0}27%,34%{opacity:.95}}
.bb-beat .bb-mark{animation:bb-mark-heart 1.4s ease-in-out 2}
.bb-beat .bb-mark .bb-mark-chamber-l{animation:bb-mark-chamber-l 1.4s ease-in-out 2}
.bb-beat .bb-mark .bb-mark-chamber-r{animation:bb-mark-chamber-r 1.4s ease-in-out 2}
.brand-lockup:hover .bb-mark{animation:bb-mark-heart 1.4s ease-in-out infinite}
.brand-lockup:hover .bb-mark .bb-mark-chamber-l{animation:bb-mark-chamber-l 1.4s ease-in-out infinite}
.brand-lockup:hover .bb-mark .bb-mark-chamber-r{animation:bb-mark-chamber-r 1.4s ease-in-out infinite}

/* ── header ── */
header.site{position:sticky;top:0;z-index:900;background:rgba(255,250,243,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.site-bar{max-width:var(--maxw);margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand-lockup{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-lockup .bb-mark{width:40px;height:22px}
.brand-name{font-size:21px;line-height:1}
nav.main{display:flex;gap:26px;align-items:center}
nav.main a{font-size:13.5px;font-weight:500;text-decoration:none;color:var(--ink-soft);letter-spacing:.2px;padding:4px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a.active{border-bottom-color:var(--accent);color:var(--ink)}
.btn{display:inline-block;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.3px;text-decoration:none;padding:11px 22px;border:1px solid var(--ink);color:var(--ink);background:transparent;transition:background .2s,color .2s;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.dark .btn{border-color:var(--d-ink);color:var(--d-ink)}
.dark .btn:hover{background:var(--d-ink);color:var(--d-bg)}
.nav-burger{display:none;background:none;border:none;font-size:22px;color:var(--ink);cursor:pointer}

/* ── sections ── */
section.band{padding:130px 32px}
section.band.tight{padding:90px 32px}
.wrap{max-width:var(--maxw);margin:0 auto}
.dark{background:var(--d-bg);color:var(--d-ink)}
.dark .muted{color:var(--d-mute)}
.alt{background:var(--bg)}
.label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-mute);display:flex;align-items:center;gap:10px;margin-bottom:28px}
.label::after{content:"";flex:0 0 26px;height:1px;background:var(--rule)}
.dark .label{color:var(--bronze)}
.dark .label::after{background:var(--d-rule)}
h1,h2,h3{font-family:var(--serif);font-weight:800;line-height:1.08;letter-spacing:-.5px}
h1{font-size:clamp(44px,6vw,82px)}
h2{font-size:clamp(30px,3.4vw,42px);margin-bottom:22px}
h3{font-size:22px;margin-bottom:10px}
.red{color:var(--accent)}
p.lede{font-size:clamp(18px,1.6vw,21px);color:var(--ink-soft);max-width:62ch}
.dark p.lede{color:var(--d-ink-soft)}
p+p{margin-top:14px}
.muted{color:var(--ink-mute)}
.prose{max-width:68ch}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}

/* ── grid helpers ── */
.cols{display:grid;gap:48px}
.cols.c57{grid-template-columns:5fr 7fr}
.cols.c75{grid-template-columns:7fr 5fr}
.cols.c48{grid-template-columns:4fr 8fr}
.cols.c2{grid-template-columns:1fr 1fr}

/* ── hairline list rows ── */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:80px 1fr 2fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.row .idx{font-family:var(--mono);font-size:13px;color:var(--ink-mute)}
.dark .rows{border-color:var(--d-rule)}
.dark .row{border-color:var(--d-rule)}
.row h3{margin:0}
.row p{font-size:15.5px;color:var(--ink-soft);margin:0}
.dark .row p{color:var(--d-ink-soft)}
.row.link{text-decoration:none;color:inherit;transition:background .15s}
.row.link:hover{background:var(--bg)}
.dark .row.link:hover{background:var(--d-paper)}

/* ── stats ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.stat{background:var(--paper);padding:34px 30px}
.stat .big{font-family:var(--mono);font-size:clamp(34px,3.4vw,52px);font-weight:700;line-height:1;color:var(--ink);letter-spacing:-1px}
.stat .big .unit{font-size:.55em;font-weight:600;color:var(--ink-mute)}
.stat .what{margin-top:12px;font-size:14.5px;color:var(--ink-soft);line-height:1.45}
.stat .src{margin-top:10px;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-mute)}
.stat.hot .big{color:var(--accent)}

/* ── pull quote ── */
.pull{border-left:2px solid var(--accent);padding:8px 0 8px 34px;max-width:62ch}
.pull blockquote{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:600;font-style:italic;line-height:1.35;color:var(--ink)}
.dark .pull blockquote{color:var(--d-ink)}
.pull cite{display:block;margin-top:16px;font-family:var(--sans);font-style:normal;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-mute)}

/* ── chart frames ── */
.chart-frame{border:1px solid var(--rule);background:var(--paper);padding:30px}
.dark .chart-frame{border-color:var(--d-rule);background:var(--d-paper)}
.chart-title{font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-mute);margin-bottom:18px}
.chart-src{margin-top:14px;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-mute)}

/* ── responsive utility grids (replace inline grids) ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px}

/* ── redaction (sample brief) ── */
.redact{background:var(--ink);color:var(--ink);border-radius:1px;padding:0 6px;user-select:none}
.dark .redact{background:var(--d-ink);color:var(--d-ink)}

/* ── product still (framed mini dashboard) ── */
.terminal{border:1px solid var(--d-rule);background:var(--d-paper);box-shadow:0 24px 60px -30px rgba(0,0,0,.5)}
.terminal .t-bar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--d-rule);font-family:var(--mono);font-size:11px;color:var(--d-mute);letter-spacing:1px}
.terminal .t-dot{width:7px;height:7px;border-radius:50%;background:var(--d-rule)}
.terminal .t-dot.live{background:var(--accent)}
.terminal .t-body{padding:22px}

/* ── tier table ── */
.tiers{border-top:1px solid var(--rule)}
.tier{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.tier .t-name{font-family:var(--serif);font-size:20px;font-weight:800}
.tier p{font-size:15px;color:var(--ink-soft);margin:0}

/* ── form ── */
form.brief{display:grid;gap:18px;max-width:560px}
form.brief label{font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:6px}
form.brief input,form.brief select,form.brief textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:12px 14px;outline:none}
form.brief input:focus,form.brief select:focus,form.brief textarea:focus{border-color:var(--ink)}

/* ── footer ── */
footer.site{background:var(--d-bg);color:var(--d-ink);padding:70px 32px 40px;border-top:3px solid var(--accent)}
footer.site .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px}
footer.site .f-tag{margin-top:14px;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--d-mute);display:flex;align-items:center;gap:8px}
footer.site .f-tag::before{content:"";width:22px;height:1px;background:var(--d-rule)}
footer.site h4{font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--bronze);margin-bottom:16px}
footer.site a{display:block;font-size:14.5px;color:var(--d-ink-soft);text-decoration:none;padding:4px 0}
footer.site a:hover{color:var(--d-ink)}
footer.site .legal{max-width:var(--maxw);margin:54px auto 0;padding-top:22px;border-top:1px solid var(--d-rule);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--d-mute)}

/* ── reveal motion (gated behind .js so a no-JS visitor sees everything) ── */
html.js .rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out}
html.js .rv.in{opacity:1;transform:none}
html.js .draw path.anim,html.js .draw line.anim,html.js .draw polyline.anim{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
html.js .draw.in path.anim,html.js .draw.in line.anim,html.js .draw.in polyline.anim{animation:drawline .9s ease-out forwards}
@keyframes drawline{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .draw path.anim,.draw line.anim,.draw polyline.anim{stroke-dashoffset:0}
  .bb-beat .bb-mark,.brand-lockup:hover .bb-mark{animation:none}
  html{scroll-behavior:auto}
}

/* ── responsive ── */
@media (max-width:960px){
  section.band{padding:72px 22px}
  .cols.c57,.cols.c75,.cols.c48,.cols.c2{grid-template-columns:1fr}
  .stats,.g3{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:48px 1fr;grid-template-rows:auto auto}
  .row p{grid-column:2}
  .tier{grid-template-columns:1fr}
  footer.site .wrap{grid-template-columns:1fr}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--rule);flex-direction:column;gap:0;padding:10px 22px 18px}
  nav.main.open{display:flex}
  nav.main a{padding:10px 0;font-size:16px}
  .nav-burger{display:block}
  .site-bar{padding:12px 22px}
}

/* v2: anchor offset under sticky header */
section[id]{scroll-margin-top:84px}

/* v2: how-it-works 3-step grid */
.g3steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:44px}
@media (max-width:960px){.g3steps{grid-template-columns:1fr;gap:30px}}

/* v2: brand lockup on dark footer */
footer.site .bb-mark .bb-mark-board{fill:var(--d-ink)}
footer.site .bb-wm{color:var(--d-ink)}