/* ═══════════════════════════════════════════════════════════
   Science page components
   ═══════════════════════════════════════════════════════════ */

/* ── masthead ───────────────────────────────────────────── */
.mast{padding-top:clamp(120px,15vh,180px);padding-bottom:clamp(46px,6vw,84px);position:relative}
.mast .grid2{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,5vw,72px);align-items:end}
.mast .h1{margin:26px 0 0;max-width:15ch;font-size:clamp(38px,5.8vw,74px)}
.mast .lede{margin-top:24px;max-width:52ch}
@media (max-width:900px){.mast .grid2{grid-template-columns:1fr;gap:40px}}

/* index card */
.toc{border-radius:var(--r-lg);border:1px solid var(--bd);background:var(--surf);
  backdrop-filter:blur(14px);padding:22px}
.toc h5{font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:14px}
.toc a{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:8px 10px;border-radius:10px;
  font-size:14px;color:var(--fg-2);transition:.25s var(--e)}
.toc a:hover{background:var(--surf-2);color:var(--fg)}
.toc a i{font:500 11px/1.5 var(--mono);font-style:normal;color:var(--v-lt)}

/* ── confidence key ─────────────────────────────────────── */
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(30px,4vw,52px)}
.keys .card-b{padding:20px 22px}
.keys p{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--fg-2)}
@media (max-width:800px){.keys{grid-template-columns:1fr}}

.conf{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.conf::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px 1px currentColor}
.c1{color:#9DE86B;background:rgba(157,232,107,.09);border:1px solid rgba(157,232,107,.26)}
.c2{color:#FFC062;background:rgba(255,192,98,.09);border:1px solid rgba(255,192,98,.26)}
.c3{color:#8FA0B8;background:rgba(143,160,184,.08);border:1px solid rgba(143,160,184,.22)}

/* ── findings ───────────────────────────────────────────── */
.finds{display:flex;flex-direction:column;gap:12px;margin-top:clamp(32px,4vw,52px)}
.find{display:grid;grid-template-columns:64px 1fr .82fr;gap:clamp(20px,2.6vw,36px);
  padding:clamp(22px,2.6vw,34px)}
.find .fn{font:500 12px/1.4 var(--mono);letter-spacing:.1em;color:var(--v-lt)}
.find h3{margin:16px 0 14px}
.find .fp{font-size:15px;line-height:1.7;color:var(--fg-2)}
.find .fp+.fp{margin-top:12px}
.find .fp b{color:var(--fg);font-weight:500}
.find .fp a{color:var(--c-lt);border-bottom:1px solid rgba(34,211,238,.35)}
.built{align-self:start;border-radius:var(--r);padding:22px 24px;
  background:linear-gradient(160deg,rgba(139,92,246,.14),rgba(34,211,238,.05));
  border:1px solid rgba(139,92,246,.22)}
.built h4{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-lt);margin-bottom:12px}
.built p{font-size:14px;line-height:1.68;color:var(--fg-2)}
.built code,.find code{font:500 12px/1 var(--mono);color:var(--c-lt);
  background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.2);
  padding:2px 6px;border-radius:5px;white-space:nowrap}
@media (max-width:1000px){
  .find{grid-template-columns:52px 1fr}
  .find .built{grid-column:2}
}
@media (max-width:600px){
  .find{grid-template-columns:1fr;gap:0}
  .find .fn{margin-bottom:10px}
  .find .built{margin-top:20px}
}

/* ── chart ──────────────────────────────────────────────── */
.chartbox{margin-top:clamp(28px,3.4vw,44px);border-radius:var(--r-xl);
  border:1px solid var(--bd);background:linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  padding:clamp(22px,3vw,40px);overflow:hidden}
.chartbox svg{width:100%;height:auto}
.ax{stroke:rgba(255,255,255,.22);stroke-width:1}
.gl{stroke:rgba(255,255,255,.06);stroke-width:1}
.bd1{fill:rgba(139,92,246,.07)}
.bd2{fill:rgba(139,92,246,.14)}
.cv{fill:none;stroke:url(#gline);stroke-width:2.4;stroke-linecap:round}
.cv2{fill:none;stroke:#22D3EE;stroke-width:1.6;stroke-dasharray:5 6;opacity:.7}
.al{font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;fill:var(--fg-3)}
.alv{fill:#A78BFA}.alc{fill:#67E8F9}
.chartbox .cap{margin-top:24px;font-size:14px;line-height:1.68;color:var(--fg-3);max-width:74ch}
.chartbox .cap b{color:var(--v-lt);font-weight:500}

/* ── claims ─────────────────────────────────────────────── */
.claims{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:clamp(30px,4vw,52px)}
.claims .card-b{padding:26px 28px 28px}
.claims .x{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.3);color:#FB7185;
  font-size:14px;line-height:1;margin-bottom:16px}
.claims h4{margin-bottom:9px}
.claims p{font-size:14px;line-height:1.68;color:var(--fg-2)}
@media (max-width:820px){.claims{grid-template-columns:1fr}}

/* ── protocol ───────────────────────────────────────────── */
.proto{display:flex;flex-direction:column;gap:12px;margin-top:clamp(30px,4vw,52px)}
.step{display:grid;grid-template-columns:56px 1fr 250px;gap:clamp(18px,2.4vw,34px);
  padding:24px clamp(20px,2.4vw,30px);align-items:start}
.step .sn{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font:500 12px/1 var(--mono);color:#08090C;background:var(--grad)}
.step h4{margin-bottom:8px}
.step p{font-size:14.5px;line-height:1.68;color:var(--fg-2)}
.step .hint{align-self:start;border-radius:12px;border:1px solid var(--bd);
  background:rgba(0,0,0,.3);padding:14px 16px}
.step .hint .r{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-top:1px solid var(--bd);font:500 11.5px/1.4 var(--mono)}
.step .hint .r:first-child{border-top:0;padding-top:0}
.step .hint em{font-style:normal;color:var(--fg-3);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.step .hint b{color:var(--c-lt);font-weight:500;text-align:right}
@media (max-width:900px){
  .step{grid-template-columns:56px 1fr}
  .step .hint{grid-column:2;margin-top:14px}
}
@media (max-width:560px){
  .step{grid-template-columns:1fr}
  .step .hint{grid-column:1}
}

/* ── references ─────────────────────────────────────────── */
.refs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:clamp(30px,4vw,52px)}
.refs .card-b{padding:24px 26px 26px}
.refs .rt{display:inline-block;font:500 10px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-lt);padding:5px 10px;border-radius:999px;
  background:rgba(34,211,238,.09);border:1px solid rgba(34,211,238,.22);margin-bottom:14px}
.refs h4{margin-bottom:8px;font-size:17px}
.refs p{font-size:13.5px;line-height:1.62;color:var(--fg-2)}
.refs .src{margin-top:12px;font:400 11.5px/1.6 var(--mono);color:var(--fg-3)}
@media (max-width:820px){.refs{grid-template-columns:1fr}}

/* ── note ───────────────────────────────────────────────── */
.note{margin-top:clamp(24px,3vw,40px);padding:22px 26px;border-radius:var(--r);
  border:1px solid var(--bd);background:var(--surf);
  font-size:14.5px;line-height:1.7;color:var(--fg-3);max-width:80ch}