/* ============================================================
   Commercial AI Brains — shared by the index section (#brains)
   and the dedicated page (cerebro.html).
   Uses the tokens defined in site.css; adds no new colours.
   ============================================================ */

/* ---------- index section ---------- */
.brain-feature{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;align-items:start;margin-bottom:44px}

.brain-console{padding:16px}
.bc-body{display:grid;grid-template-columns:170px 1fr;gap:12px}
.bc-rail{list-style:none;margin:0;padding:10px;border:1px solid var(--line-soft);border-radius:12px;background:var(--glass);
  display:flex;flex-direction:column;gap:2px}
.bc-rail li{font-size:12.5px;color:var(--muted);padding:7px 10px;border-radius:8px;line-height:1.25}
.bc-rail li.on{background:linear-gradient(100deg,rgba(20,162,194,.28),rgba(47,91,224,.16));color:var(--ink);font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(34,192,224,.35)}
.bc-rail li.more{color:var(--muted-2);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;margin-top:4px}
.bc-main{display:flex;flex-direction:column;gap:10px}
.bc-main .kpis{margin-bottom:0}
.bc-chart{width:100%;height:86px;display:block;margin-top:4px}
.bc-foot{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.05em;margin-top:13px;text-align:right}

.brain-copy{display:flex;flex-direction:column;gap:20px}
.bpoint{border-left:2px solid var(--line);padding-left:18px;transition:border-color .25s}
.bpoint:hover{border-color:var(--teal)}
.bpoint h3{font-size:17.5px;font-weight:600;margin-bottom:7px}
.bpoint p{color:var(--muted);font-size:14.5px}
.brain-copy .btn{align-self:flex-start;margin-top:4px}

.brain-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.bstat{background:var(--navy-850);padding:24px 22px}
.bstat b{display:block;font-family:var(--font-display);font-weight:800;font-size:32px;letter-spacing:-.03em;
  background:linear-gradient(100deg,var(--teal-bright),var(--blue) 75%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bstat b.w{font-size:21px;line-height:1.5}
.bstat span{display:block;color:var(--muted);font-size:13.5px;margin-top:6px}

/* ---------- dedicated page: cerebro.html ---------- */
.page-hero{padding:64px 0 42px}
.page-hero h1{font-size:clamp(32px,4.6vw,52px);font-weight:800;max-width:20ch}
.page-hero .sub{color:var(--muted);font-size:18px;margin-top:20px;max-width:700px}
/* flex (not inline-flex) so the eyebrow that follows starts on its own line */
.back-link{display:flex;width:max-content;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:22px;transition:color .2s}
.back-link:hover{color:var(--teal-bright)}

/* the honesty banner — synthetic data notice */
.synth-note{display:flex;align-items:flex-start;gap:13px;border:1px solid rgba(242,138,49,.35);border-radius:14px;
  padding:15px 18px;background:rgba(242,138,49,.08);margin-top:34px;max-width:760px}
.synth-note .badge{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);
  border:1px solid rgba(242,138,49,.45);border-radius:999px;padding:5px 10px;flex:none;margin-top:1px}
.synth-note p{color:var(--muted);font-size:14px}

/* how it works — 4-step flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flow-step{border:1px solid var(--line);border-radius:16px;padding:24px 22px;background:var(--card);position:relative}
.flow-step .fnum{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--teal-bright);display:block;margin-bottom:14px}
.flow-step h3{font-size:17px;font-weight:600;margin-bottom:9px}
.flow-step p{color:var(--muted);font-size:14px}
.flow-step::after{content:"";position:absolute;top:50%;right:-11px;width:6px;height:6px;border-top:1.5px solid var(--teal);
  border-right:1.5px solid var(--teal);transform:rotate(45deg);opacity:.7}
.flow-step:last-child::after{display:none}

/* model catalogue */
.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.model{border:1px solid var(--line);border-radius:16px;padding:22px 21px;background:var(--card);
  display:flex;flex-direction:column;gap:12px;transition:transform .25s,border-color .25s,background .25s}
.model:hover{transform:translateY(-5px);border-color:var(--teal);background:var(--card-2)}
.model .mtop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.model .mnum{font-family:var(--font-mono);font-size:11px;color:var(--muted-2)}
.model .mtag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-bright);
  border:1px solid var(--line);border-radius:999px;padding:4px 9px}
.model h3{font-size:17px;font-weight:600}
.model .mq{color:var(--muted);font-size:14px;flex:1}
/* The mini charts keep their 120x32 aspect (distorting them would turn the
   scatter dots into ellipses), so the strip has to be tall enough for the
   artwork to scale up to a readable width. */
.model .mviz{height:72px;border-radius:10px;background:var(--glass);border:1px solid var(--line-soft);padding:9px 10px}
.model .mviz svg{width:100%;height:100%;display:block;overflow:visible}
.model .mout{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);letter-spacing:.04em;
  border-top:1px solid var(--line-soft);padding-top:11px;line-height:1.5}
.model .mout b{color:var(--muted);font-weight:500}

/* big synthetic demo panels */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,rgba(18,37,81,.72),rgba(10,20,48,.72));
  padding:22px;display:flex;flex-direction:column}
.panel.wide{grid-column:1 / -1}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:6px}
.panel-head h3{font-size:18px;font-weight:600}
.panel-head .phint{color:var(--muted);font-size:13.5px;margin-top:7px;max-width:52ch}
.panel .ptag{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 10px;white-space:nowrap;flex:none}
.panel-viz{margin-top:16px;flex:1}
.panel-viz svg{width:100%;height:auto;display:block;overflow:visible}
.panel-foot{font-family:var(--font-mono);font-size:10px;color:var(--muted-2);letter-spacing:.05em;margin-top:14px}

/* legend used by several panels */
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-family:var(--font-mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.04em}
.legend i{display:inline-block;width:11px;height:3px;border-radius:2px;margin-right:7px;vertical-align:middle}

/* assistant panel */
.assist{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.assist .bubble{max-width:86%}
.assist .a-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-2);margin-top:10px;letter-spacing:.04em}

/* deliverables */
.deliver{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.deliver-col{border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:var(--card)}
.deliver-col h3{font-size:18px;font-weight:600;margin-bottom:16px}
.deliver-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.deliver-col li{color:var(--muted);font-size:14.5px;padding-left:24px;position:relative;line-height:1.5}
.deliver-col li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:3px;
  background:linear-gradient(135deg,var(--teal),var(--blue))}
.deliver-col.stack li::before{background:linear-gradient(135deg,var(--orange),var(--crimson))}

@media (max-width:980px){
  .brain-feature{grid-template-columns:1fr}
  .brain-stats{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr}
  .flow-step::after{display:none}
  .model-grid{grid-template-columns:1fr 1fr}
  .panels{grid-template-columns:1fr}
  .deliver{grid-template-columns:1fr}
}
@media (max-width:680px){
  .bc-body{grid-template-columns:1fr}
  .bc-rail{flex-direction:row;flex-wrap:wrap}
  .bc-rail li{font-size:11.5px;padding:6px 9px}
  .brain-stats{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .model-grid{grid-template-columns:1fr}
  .panel-head{flex-direction:column}
}