/* VALUE CREATION LAB — interactive model, built on the shared token system. */
.vl-wrap{ width:100%; }
.vl{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); border-radius:16px; overflow:hidden; background:var(--bg); }
.vl-controls{ padding:34px 34px 38px; border-right:1px solid var(--rule); }
.vl-results{ padding:34px 34px 38px; background:var(--bg-alt); }

/* company tabs */
.vl-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.vl-tab{ font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-soft); background:transparent; border:1px solid var(--rule); border-radius:999px; padding:8px 14px; cursor:pointer; transition:all .25s var(--ease); }
.vl-tab:hover{ border-color:var(--ink-soft); color:var(--ink); }
.vl-tab.on{ background:var(--ink); border-color:var(--ink); color:var(--bg); }

/* entry stats */
.vl-co{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:26px; padding-bottom:26px; border-bottom:1px solid var(--rule); }
.vl-costat{ display:flex; flex-direction:column; gap:3px; }
.vl-costat:first-child{ grid-column:1/-1; }
.vl-costat b{ font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:-.3px; color:var(--ink); }
.vl-costat span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* hold period */
.vl-years{ margin-top:24px; }
.vl-years label{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.vl-years label span{ color:var(--accent-text); }
.vl-years input[type=range]{ width:100%; margin-top:12px; accent-color:var(--accent); height:4px; }

/* exit multiple segmented control */
.vl-seglabel{ display:flex; justify-content:space-between; align-items:baseline; margin:26px 0 12px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.vl-seglabel span{ text-transform:none; letter-spacing:.02em; font-size:11px; color:var(--muted); opacity:.7; }
.vl-seg{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.vl-segbtn{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); background:transparent; border:1px solid var(--rule); border-radius:8px; padding:9px 6px; cursor:pointer; transition:all .2s var(--ease); }
.vl-segbtn:hover{ border-color:var(--ink-soft); color:var(--ink); }
.vl-segbtn.on{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* reset */
.vl-reset{ margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:transparent; border:0; padding:4px 0; cursor:pointer; border-bottom:1px solid var(--rule); }
.vl-reset:hover{ color:var(--accent-text); border-bottom-color:var(--accent); }

/* initiatives */
.vl-initslabel{ display:flex; justify-content:space-between; align-items:baseline; margin:28px 0 12px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.vl-inits{ display:flex; flex-direction:column; gap:8px; }
.vl-init{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:start; padding:14px 16px; border:1px solid var(--rule); border-radius:11px; cursor:pointer; transition:border-color .25s, background .25s; }
.vl-init:hover{ border-color:var(--ink-soft); }
.vl-init.on{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:color-mix(in srgb, var(--accent) 5%, transparent); }
.vl-init input{ margin-top:3px; width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.vl-initmain{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.vl-inittop{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--sans); font-weight:600; font-size:15px; color:var(--ink); }
.vl-initdesc{ font-family:var(--sans); font-size:13px; line-height:1.5; color:var(--ink-soft); }
.vl-initup{ font-family:var(--serif); font-weight:600; font-size:16px; color:var(--accent-text); white-space:nowrap; }
.vl-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:400; color:var(--muted); }
.vl-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }

/* results — KPIs */
.vl-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:12px; overflow:hidden; }
.vl-kpi{ background:var(--bg-alt); padding:20px 20px; }
.vl-kv{ font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:-.5px; color:var(--ink); line-height:1.1; }
.vl-kpi.big .vl-kv{ font-size:34px; letter-spacing:-1.4px; color:var(--accent-text); }
.vl-kl{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.vl-arrow{ color:var(--muted); font-weight:400; margin:0 2px; }

/* value bridge */
.vl-bridge{ margin-top:26px; }
.vl-bh{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:16px; }
.vl-bh span{ color:var(--muted); letter-spacing:.04em; text-transform:none; font-size:12px; }
.vl-brow{ display:grid; grid-template-columns:120px 1fr auto; gap:14px; align-items:center; margin-bottom:11px; }
.vl-blabel{ font-family:var(--sans); font-size:13px; color:var(--ink-soft); }
.vl-btrack{ height:14px; background:color-mix(in srgb, var(--ink) 6%, transparent); border-radius:4px; overflow:hidden; }
.vl-bfill{ height:100%; border-radius:4px; transition:width .5s var(--ease); }
.vl-bfill.base{ background:var(--ink-soft); }
.vl-bfill.grow{ background:var(--accent); }
.vl-bfill.debt{ background:var(--accent-2); }
.vl-bfill.rerate{ background:#7c3aed; }
.vl-bfill.neg{ background:#dc2626; }
.vl-bfill.exit{ background:var(--ink); }
.vl-bval{ font-family:var(--serif); font-weight:600; font-size:15px; color:var(--ink); white-space:nowrap; }
.vl-brow:last-child .vl-blabel{ font-weight:600; color:var(--ink); }

/* sources of the equity gain (attribution) */
.vl-attr{ margin-top:26px; padding:20px 22px; border:1px solid var(--rule); border-radius:12px; background:var(--bg); }
.vl-ahead{ font-family:var(--serif); font-weight:400; font-size:19px; letter-spacing:-.3px; color:var(--ink); margin-bottom:16px; }
.vl-ahead b{ font-weight:600; color:var(--accent-text); }
.vl-arow{ display:grid; grid-template-columns:180px 1fr 44px; gap:14px; align-items:center; margin-bottom:9px; }
.vl-arow:last-child{ margin-bottom:0; }
.vl-alabel{ font-family:var(--sans); font-size:13px; color:var(--ink-soft); }
.vl-aval{ font-family:var(--serif); font-weight:600; font-size:15px; color:var(--ink); text-align:right; }

.vl-note{ margin-top:24px; font-family:var(--sans); font-size:12.5px; line-height:1.6; color:var(--muted); }

@media (max-width:860px){
  .vl-arow{ grid-template-columns:120px 1fr 40px; gap:10px; }
}

/* responsive */
@media (max-width:860px){
  .vl{ grid-template-columns:1fr; }
  .vl-controls{ border-right:0; border-bottom:1px solid var(--rule); padding:24px 20px 28px; }
  .vl-results{ padding:24px 20px 28px; }
  .vl-brow{ grid-template-columns:96px 1fr auto; gap:10px; }
  .vl-kpi.big .vl-kv{ font-size:28px; }
}