/* ============================================================
   THE SCIENCE PAGE
   Zoom skin. Content and citations carried from the live
   /the-science page, verified 2026-09-21.
   ============================================================ */

/* ---------- citation stat strip ---------- */
.cites{background:var(--tint-soft);padding:64px 0;border-bottom:1px solid var(--line)}
.cite-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cite{background:#fff;border:1px solid var(--steel);border-radius:var(--r-lg);padding:28px;text-align:center}
.cite b{display:block;font-family:var(--ff-display);font-size:clamp(34px,4vw,46px);font-weight:500;line-height:1;color:var(--blue)}
.cite p{font-size:14px;line-height:1.5;margin-top:12px}
.cite cite{display:block;font-style:normal;font-size:11.5px;color:#6B7280;margin-top:14px;letter-spacing:.01em}

/* ---------- two brains ---------- */
.brains{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.brain{border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column}
.brain.fast{background:linear-gradient(346deg,#7A1F12,#2A0A05);color:#fff}
.brain.slow{background:linear-gradient(360deg,var(--blue-ink),var(--blue));color:#fff}
.brain .kicker{font-size:11px;font-weight:700;letter-spacing:.11em;opacity:.75;margin-bottom:12px}
.brain h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:16px}
.brain p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82);margin-bottom:14px}
.brain .pull{
  margin-top:auto;padding:14px 16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.12);font-size:14px;line-height:1.55;color:#fff;
}
.brain .pull b{font-weight:600}

/* ---------- the 0.5 second timeline ---------- */
.tl{margin-top:8px;border-left:2px solid var(--steel);padding-left:0}
.tl-step{display:grid;grid-template-columns:54px 1fr;gap:20px;padding:0 0 30px 26px;position:relative}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{
  content:"";position:absolute;left:-8px;top:6px;width:14px;height:14px;border-radius:999px;
  background:#fff;border:3px solid var(--blue);
}
.tl-step.hit::before{border-color:#C2410C;background:#C2410C}
.tl-n{font-family:var(--ff-display);font-size:30px;font-weight:500;color:var(--steel);line-height:1}
.tl-step.hit .tl-n{color:#C2410C}
.tl-b h3{font-size:19px;margin-bottom:6px}
.tl-b p{font-size:14.5px;color:var(--grey);line-height:1.55}
.tl-note{
  margin-top:26px;background:var(--tint);border-radius:var(--r-md);padding:20px 22px;
  font-size:15px;line-height:1.6;
}
.tl-note b{font-weight:600}

/* ---------- methods ---------- */
.methods{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.method{border:1px solid var(--steel);border-radius:var(--r-lg);padding:28px;background:#fff;display:flex;flex-direction:column}
.method .tag{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--blue);margin-bottom:10px}
.method h3{font-size:21px;margin-bottom:4px}
.method .sub{font-size:13px;color:var(--grey);margin-bottom:14px}
.method p{font-size:14.5px;line-height:1.6;color:var(--grey);margin-bottom:12px}
.method cite{
  display:block;font-style:normal;margin-top:auto;padding-top:16px;
  border-top:1px solid var(--line);font-size:12px;color:#6B7280;
}

/* ---------- case studies ---------- */
.cases{display:grid;gap:20px}
.case{border:1px solid var(--steel);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.case-top{padding:26px 28px 0}
.case-top h3{font-size:clamp(20px,2.2vw,25px);margin-bottom:6px}
.case-top .sub{font-size:13.5px;color:var(--grey)}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:22px}
.case-cell{padding:22px 28px;border-top:1px solid var(--line)}
.case-cell + .case-cell{border-left:1px solid var(--line)}
.case-cell h4{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--blue);margin:0 0 10px}
.case-cell p{font-size:14px;line-height:1.55;color:var(--grey)}
.case-cell.win{background:var(--tint-soft)}
.case-quote{
  padding:20px 28px;background:var(--offwhite);border-top:1px solid var(--line);
  display:flex;gap:14px;align-items:center;
}
.case-quote p{font-family:var(--ff-display);font-size:16px;line-height:1.5;flex:1}
.case-quote span{font-size:12.5px;color:var(--grey);white-space:nowrap}

/* ---------- the two people ---------- */
.people{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.person{border:1px solid var(--steel);border-radius:var(--r-lg);padding:30px;background:#fff}
.person .tag{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--blue);margin-bottom:12px}
.person h3{font-size:22px;margin-bottom:10px}
.person p{font-size:14.5px;line-height:1.6;color:var(--grey)}

@media (max-width:900px){
  .cite-row,.brains,.methods,.people{grid-template-columns:1fr}
  .case-grid{grid-template-columns:1fr}
  .case-cell + .case-cell{border-left:0}
  .case-quote{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:640px){
  .tl-step{grid-template-columns:38px 1fr;gap:14px;padding-left:20px}
  .tl-n{font-size:23px}
}