/* ============================================================================
   FORMULOMICS™ TEMPORAL — dual-clock time machine + predictive lead chart
   ========================================================================== */

.sec-temporal{
  background:
    radial-gradient(120% 80% at 80% 0%, #16131f 0%, transparent 55%),
    radial-gradient(100% 70% at 0% 100%, #141a1f 0%, transparent 55%),
    #0B0A08;
  color:var(--d-1);position:relative;overflow:hidden;
}
.sec-temporal::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(90deg,var(--hairline-d2) 1px,transparent 1px);
  background-size:calc(100%/7) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
.sec-temporal .wrap{position:relative;z-index:1}

/* two-clock legend */
.clocks{display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap;margin-top:clamp(28px,4vw,42px)}
.clock{display:flex;align-items:center;gap:13px;border:1px solid var(--hairline-d);border-radius:12px;padding:15px 19px;background:rgba(20,18,16,.5);min-width:230px;flex:1}
.clock .ci{font-size:19px;line-height:1;flex-shrink:0}
.clock.derive .ci{color:var(--accent-hot)}
.clock.confirm .ci{color:#6C8CC8}
.clock .cl{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--d-3)}
.clock .cv{font-family:var(--disp);font-weight:600;font-size:15px;margin-top:3px;color:var(--d-1)}
.clock.derive .cv{color:var(--accent-hot)}
.clock.confirm .cv{color:#9DB6E0}
.clock .cd{font-size:11.5px;color:var(--d-2);margin-top:4px;line-height:1.4}
.clock.lead{background:linear-gradient(90deg,rgba(242,98,42,.07),rgba(108,140,200,.07))}
.clock.lead .ci{color:var(--d-1)}

/* ── TIME MACHINE ─────────────────────────────────────────────────────── */
.tm{margin-top:clamp(34px,5vw,54px);border:1px solid var(--hairline-d);border-radius:18px;
  background:linear-gradient(180deg,rgba(21,23,28,.92),rgba(14,13,11,.92));overflow:hidden;
  box-shadow:0 40px 100px -60px rgba(0,0,0,.9)}
.tm-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border-bottom:1px solid var(--hairline-d2);flex-wrap:wrap}
.tm-bar .tb-id{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-3)}
.tm-bar .tb-play{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-hot);
  border:1px solid rgba(242,98,42,.4);background:rgba(242,98,42,.07);border-radius:20px;padding:6px 13px;cursor:pointer;transition:.3s;display:inline-flex;gap:8px;align-items:center}
.tm-bar .tb-play:hover{background:rgba(242,98,42,.16);color:#fff}

/* year rail */
.tm-rail{padding:20px 20px 6px;position:relative}
.tm-rail-line{position:absolute;left:34px;right:34px;top:34px;height:2px;background:var(--hairline-d);z-index:0}
.tm-rail-fill{position:absolute;left:34px;top:34px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-hot));z-index:1;width:0;transition:width .6s var(--ease)}
.tm-years{display:flex;justify-content:space-between;position:relative;z-index:2}
.tm-yr{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;background:none;border:none;padding:0;flex:1}
.tm-yr .yd{width:13px;height:13px;border-radius:50%;background:#2A2C33;border:2px solid #3A3D45;transition:.3s var(--ease)}
.tm-yr .yn{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--d-3);transition:.3s}
.tm-yr .yc{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--d-4);transition:.3s}
.tm-yr:hover .yn{color:var(--d-2)}
.tm-yr.on .yd{background:var(--accent-hot);border-color:#fff;box-shadow:0 0 0 4px rgba(242,98,42,.18),0 0 16px rgba(242,98,42,.5)}
.tm-yr.on .yn{color:#fff}
.tm-yr.on .yc{color:var(--accent-hot)}
.tm-yr.past .yd{background:var(--accent);border-color:var(--accent)}

/* readout body */
.tm-body{display:grid;grid-template-columns:340px 1fr;gap:1px;background:var(--hairline-d2);border-top:1px solid var(--hairline-d2);margin-top:14px}
.tm-readout,.tm-caption{background:rgba(12,11,9,.6);padding:clamp(20px,2.6vw,30px)}
.tm-fri-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--d-3);margin-bottom:12px}
.tm-fri-val{display:flex;align-items:baseline;gap:12px}
.tm-fri-c{font-family:var(--disp);font-weight:600;font-size:clamp(54px,8vw,80px);line-height:.82;letter-spacing:-.03em;transition:color .5s}
.tm-fri-arrow{font-family:var(--disp);font-size:22px;color:var(--d-4)}
.tm-fri-d{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.5vw,38px);line-height:1;color:var(--accent-hot)}
.tm-fri-tier{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-top:12px}
/* gauge reuse for temporal */
.tm-gauge{margin-top:20px}
.tm-axes{display:flex;gap:18px;margin-top:22px;flex-wrap:wrap}
.tm-axes .ax{flex:1;min-width:90px}
.tm-axes .ax .axn{font-family:var(--disp);font-weight:600;font-size:26px;line-height:1}
.tm-axes .ax .axn.c{color:var(--d-1)}
.tm-axes .ax .axn.d{color:var(--accent-hot)}
.tm-axes .ax .axn.n{color:var(--d-4)}
.tm-axes .ax .axl{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-3);margin-top:7px;line-height:1.4}

.tm-cap-era{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-hot);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.tm-cap-era .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-hot)}
.tm-cap-title{font-family:var(--disp);font-weight:600;font-size:clamp(20px,2.5vw,27px);letter-spacing:-.02em;line-height:1.12;margin-bottom:12px;color:var(--d-1)}
.tm-cap-body{font-size:14px;color:var(--d-2);line-height:1.62;max-width:54ch}
.tm-cap-body b{color:var(--d-1);font-weight:600}
.tm-cap-body .fore{color:var(--accent-hot);font-weight:600}
.tm-newly{margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline-d2);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-3);display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* gene panel */
.tm-panel{background:rgba(12,11,9,.6);border-top:1px solid var(--hairline-d2);padding:clamp(18px,2.4vw,26px)}
.tm-panel-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--d-3);margin-bottom:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.tm-panel-lbl .key{display:flex;gap:14px;color:var(--d-4)}
.tm-panel-lbl .key b{font-weight:400}
.tm-genes{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.tg{border:1px solid var(--hairline-d);border-radius:10px;padding:13px 13px 12px;background:rgba(255,255,255,.015);position:relative;transition:.45s var(--ease);min-height:96px}
.tg .tg-sym{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--d-1)}
.tg .tg-axis{font-size:10.5px;color:var(--d-3);line-height:1.35;margin-top:6px}
.tg .tg-state{position:absolute;bottom:11px;left:13px;font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.tg .tg-ev{position:absolute;top:11px;right:12px;font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--d-4);border:1px solid var(--hairline-d);border-radius:10px;padding:2px 6px}
.tg{padding-bottom:30px}
/* states */
.tg.conf{border-color:var(--tgc);background:var(--tgbg)}
.tg.conf .tg-state{color:var(--tgc)}
.tg.conf.high{--tgc:#F87171;--tgbg:rgba(220,38,38,.10)}
.tg.conf.mod{--tgc:#FBBF24;--tgbg:rgba(245,158,11,.09)}
.tg.conf.low{--tgc:#4ADE80;--tgbg:rgba(22,163,74,.09)}
.tg.deriv{border-color:rgba(242,98,42,.45);border-style:dashed;background:rgba(242,98,42,.05)}
.tg.deriv .tg-sym{color:var(--accent-hot)}
.tg.deriv .tg-state{color:var(--accent-hot)}
.tg.na{opacity:.4;border-style:dotted}
.tg.na .tg-sym{color:var(--d-3)}
.tg.na .tg-state{color:var(--d-4)}
@media(max-width:1000px){.tm-body{grid-template-columns:1fr}.tm-genes{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tm-genes{grid-template-columns:repeat(2,1fr)}.tm-rail-line,.tm-rail-fill{left:24px;right:24px}.tm-yr .yc{display:none}}

/* ── PREDICTIVE LEAD CHART ────────────────────────────────────────────── */
.lead-wrap{margin-top:clamp(34px,5vw,52px)}
.lead-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.lead-axis{position:relative;height:22px;margin-left:var(--lead-pad,160px);border-bottom:1px solid var(--hairline-d)}
.lead-tick{position:absolute;top:3px;font-family:var(--mono);font-size:9.5px;color:var(--d-3);transform:translateX(-50%)}
.lead-tick::after{content:"";position:absolute;left:50%;top:14px;width:1px;height:7px;background:var(--hairline-d)}
.lead-row{display:flex;align-items:center;margin:7px 0}
.lead-label{width:var(--lead-pad,160px);flex:0 0 var(--lead-pad,160px);padding-right:14px;display:flex;align-items:center;gap:9px;justify-content:flex-end;text-align:right}
.lead-label .ll-sym{font-family:var(--mono);font-weight:600;font-size:12.5px;color:var(--d-1)}
.lead-label .ll-sev{font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:10px;border:1px solid var(--hairline-d);color:var(--d-3)}
.lead-label .ll-sev.high{color:#F87171;border-color:rgba(248,113,113,.4)}
.lead-label .ll-sev.mod{color:#FBBF24;border-color:rgba(251,191,36,.4)}
.lead-label .ll-sev.low{color:#4ADE80;border-color:rgba(74,222,128,.4)}
.lead-track{position:relative;flex:1;height:30px}
.lead-band{position:absolute;top:9px;height:12px;border-radius:7px;width:0;
  background:repeating-linear-gradient(135deg,rgba(242,98,42,.22),rgba(242,98,42,.22) 5px,rgba(242,98,42,.06) 5px,rgba(242,98,42,.06) 10px);
  border:1px solid rgba(242,98,42,.4);transition:width 1.1s var(--ease)}
.lead-mk{position:absolute;top:5px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:10px;transform:translateX(-50%) scale(0);border:2px solid #0B0A08;transition:transform .5s var(--ease);z-index:2}
.lead-mk.d{background:var(--accent-hot);color:#fff}
.lead-mk.c{background:#6C8CC8;color:#fff}
.lead-mk.same{background:#4ADE80;color:#0B0A08}
.lead-val{position:absolute;top:-12px;font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--accent-hot);transform:translateX(-50%);white-space:nowrap;opacity:0;transition:opacity .5s .4s}
.lead-row.lit .lead-band{width:var(--bw)}
.lead-row.lit .lead-mk{transform:translateX(-50%) scale(1)}
.lead-row.lit .lead-val{opacity:1}
.lead-legend{display:flex;gap:20px;margin-left:var(--lead-pad,160px);margin-top:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--d-3)}
.lead-legend span{display:flex;align-items:center;gap:7px}
.lead-legend .d{width:12px;height:12px;border-radius:50%}
@media(max-width:680px){
  :root{}
  .lead-wrap{--lead-pad:96px}
  .lead-label .ll-sev{display:none}
}

/* ── DILIGENCE VERDICT + USE CASES ────────────────────────────────────── */
.dv{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(16px,2vw,24px);align-items:stretch}
.dv-card{border:1px solid rgba(242,98,42,.3);border-radius:18px;padding:clamp(26px,3vw,40px);
  background:linear-gradient(160deg,rgba(242,98,42,.10),rgba(20,18,16,.4));position:relative;overflow:hidden}
.dv-card .dv-k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-hot);margin-bottom:18px}
.dv-card .dv-q{font-family:var(--disp);font-weight:600;font-size:clamp(22px,3vw,34px);letter-spacing:-.02em;line-height:1.16;margin-bottom:18px}
.dv-card .dv-q .hot{color:var(--accent-hot)}
.dv-card .dv-b{font-size:14px;color:var(--d-2);line-height:1.65}
.dv-card .dv-b b{color:var(--d-1);font-weight:600}
.dv-uses{display:flex;flex-direction:column;gap:10px}
.dv-use{border:1px solid var(--hairline-d);border-radius:13px;padding:18px 20px;background:rgba(20,18,16,.5);transition:.4s var(--ease)}
.dv-use:hover{border-color:rgba(242,98,42,.35);transform:translateX(3px)}
.dv-use .du-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hot);margin-bottom:7px}
.dv-use h4{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.01em;margin-bottom:5px;color:var(--d-1)}
.dv-use p{font-size:12.5px;color:var(--d-2);line-height:1.55}
@media(max-width:880px){.dv{grid-template-columns:1fr}}