/* ==========================================================================
   FUTUREPROOF — PRODUCT LAYER
   Extends css/site.css. Same tokens, same motion language; adds the
   components this product needs (generative hero, calculators, dashboard
   mock, comparison columns, module index).
   ========================================================================== */

/* ---------- generative hero backdrop (no photography in this product) ---------- */
.stage__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.85}
.stage--gen .stage__veil{
  background:
    radial-gradient(120% 95% at 10% 105%, rgba(8,9,11,.97) 0%, rgba(8,9,11,.6) 46%, transparent 80%),
    linear-gradient(180deg, rgba(8,9,11,.6) 0%, rgba(8,9,11,0) 30%, rgba(8,9,11,.94) 100%);
}
.stage--gen{background:radial-gradient(90% 70% at 78% 12%, rgba(94,151,255,.16), transparent 62%),var(--ink)}

/* ---------- comparison columns ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
@media(max-width:860px){.vs{grid-template-columns:1fr}}
.vs__col{border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.4vw,36px);background:var(--ink-2)}
.vs__col--bad{border-color:rgba(255,90,90,.24)}
.vs__col--good{border-color:rgba(219,250,196,.3);background:linear-gradient(180deg,rgba(219,250,196,.05),rgba(94,151,255,.03))}
.vs__l{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.vs__l:last-child{border-bottom:0}
.vs__l i{font-style:normal;font-family:var(--mono);font-size:.9rem;line-height:1.5;flex:none}
.vs__col--bad .vs__l i{color:var(--red)}
.vs__col--good .vs__l i{color:var(--lime)}
.vs__l b{display:block;font-weight:600;font-size:.95rem;letter-spacing:-.015em;margin-bottom:4px}
.vs__l span{font-size:.88rem;color:var(--fg-mute);font-weight:300;line-height:1.55}

/* ---------- module index (the six sheets) ---------- */
.mod{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1.3fr);gap:clamp(16px,3vw,44px);
  padding:clamp(22px,2.6vw,36px) 0;border-bottom:1px solid var(--line);align-items:start;
  transition:padding-left .5s var(--ease)}
.mod:hover{padding-left:14px}
.mod__n{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--blue);padding-top:6px;white-space:nowrap}
@media(max-width:860px){.mod{grid-template-columns:1fr;gap:10px}.mod__n{padding-top:0}}

/* ---------- KPI / dashboard mock ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--ink-2);padding:clamp(16px,2vw,26px)}
.kpi__l{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);display:block}
.kpi__v{font-family:var(--mono);font-size:clamp(1.35rem,2.4vw,2rem);letter-spacing:-.045em;line-height:1;display:block;margin-top:12px}
.kpi__d{font-size:.76rem;color:var(--fg-dim);display:block;margin-top:8px}

/* ---------- calculator control rows ---------- */
.ctrl{padding:16px 0;border-bottom:1px solid var(--line)}
.ctrl:last-of-type{border-bottom:0}
.ctrl__top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.ctrl__l{font-size:.88rem;color:var(--fg-mute)}
.ctrl__v{font-family:var(--mono);font-size:1.05rem;font-weight:600;letter-spacing:-.02em;color:var(--lime)}
.ctrl .rng{margin:14px 0 0}
.ctrl__scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.62rem;color:var(--fg-dim);margin-top:6px}

.readout{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.readout>div{background:var(--ink);padding:clamp(14px,1.8vw,22px)}
.readout .kpi__v{font-size:clamp(1.2rem,2vw,1.7rem)}

/* ---------- donut allocation ---------- */
.donut{display:flex;align-items:center;gap:clamp(18px,3vw,36px);flex-wrap:wrap}
.donut__svg{width:clamp(150px,17vw,200px);height:clamp(150px,17vw,200px);flex:none;transform:rotate(-90deg)}
.donut__svg circle{fill:none;stroke-width:18;transition:stroke-dasharray .9s var(--ease)}
.donut__key{display:flex;flex-direction:column;gap:12px;min-width:190px;flex:1}
.donut__k{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--fg-mute)}
.donut__k i{width:9px;height:9px;border-radius:2px;flex:none}
.donut__k b{margin-left:auto;font-family:var(--mono);color:var(--fg);font-weight:600}

/* ---------- preset / jurisdiction grid ---------- */
.preset{display:flex;align-items:center;gap:14px;padding:clamp(16px,1.8vw,22px);border:1px solid var(--line);border-radius:12px;background:var(--ink-2);transition:border-color .45s var(--ease),transform .45s var(--ease)}
.preset:hover{border-color:var(--line-2);transform:translateY(-3px)}
.preset__f{font-size:1.5rem;line-height:1;flex:none}
.preset b{display:block;font-size:.95rem;font-weight:600;letter-spacing:-.015em}
.preset span{display:block;font-family:var(--mono);font-size:.7rem;color:var(--fg-dim);margin-top:4px;letter-spacing:.06em}

/* ---------- cell-colour legend ---------- */
.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
@media(max-width:820px){.legend{grid-template-columns:repeat(2,1fr)}}
.legend>div{background:var(--ink-2);padding:clamp(16px,2vw,24px)}
.legend__sw{width:34px;height:34px;border-radius:7px;border:1px solid var(--line-2);margin-bottom:14px}

/* ---------- formula callout ---------- */
.formula{font-family:var(--mono);font-size:.84rem;color:var(--lime);background:var(--ink);border:1px solid var(--line);border-left:2px solid var(--lime);border-radius:8px;padding:14px 16px;overflow-x:auto;white-space:nowrap;letter-spacing:.01em}

/* ---------- guarantee band ---------- */
.guarantee{border:1px solid rgba(219,250,196,.3);border-radius:16px;padding:clamp(24px,3vw,40px);background:linear-gradient(135deg,rgba(219,250,196,.07),rgba(94,151,255,.03));text-align:center}