/* ============================================================
   GENERATED FILE — DO NOT EDIT

   Source: shared/css/flow.css
   Regenerate with:  node tools/sync-engine.mjs
   Verify with:      node tools/sync-engine.mjs --check

   Edits made here will be overwritten and will fail the drift check.
   ============================================================ */
/* ============================================================
   MPS ROI Calculator — GUIDED FLOW (UX proposal prototype)
   Layers on top of styles.css. Reuses all existing design tokens.
   ============================================================ */

/* ============================================================
   COLOUR SEMANTICS — customer presentation
   ------------------------------------------------------------
   One rule, applied everywhere in Present mode: a colour states
   WHOSE money it is and WHICH DIRECTION it moves. Never decoration.

   The anchor is the engine's own Cost Savings Trend chart, which
   already draws the "no MPS" line red-dashed and the "with MPS"
   line green. Everything below extends that, it does not replace it.

     RED     .v-today   The customer's current state. Money going out
                        today, and the waste inside it. Never used for
                        anything that happens after signature.

     GREEN   .v-gain    What the customer gets back. Savings, volume
                        removed, sheets and trees, productivity.
                        Never used for a Ricoh price.

     BLUE    .v-offer   Ricoh's proposal. The offer itself — MPS annual
                        cost, contract value, proposed click rates.
                        Deliberately not green: it is a price, not a
                        saving, and colouring it green oversells.

     ORANGE  .v-commit  What the customer must commit before the gain
                        arrives: investment, and payback period (time
                        at risk). Also every warning state.

     GREY    .v-ref     Reference only, no claim attached: page volumes,
                        device counts, a rate quoted as a stated fact.

   Two scales stay deliberately OUTSIDE this system, and are labelled
   as such on the page so nobody reads them as cost colours:
     - Ricoh Optimization Index tier (grey/orange/yellow/teal) — a
       maturity scale owned by calculator.js.
     - TCO bars in Act 01, which are all current-state cost and so are
       all red; solid = already on the print invoice, outlined = hidden
       from it. Bar treatment carries that split, not hue.
   ============================================================ */
.v-today  { color: var(--waste)   !important; }
.v-gain   { color: var(--save)    !important; }
.v-offer  { color: var(--cv)      !important; }
.v-commit { color: var(--pay)     !important; }
.v-ref    { color: var(--neutral) !important; }

/* Tile top-rules follow the same five meanings */
.mtile.t-today  { border-top-color: var(--waste); }
.mtile.t-gain   { border-top-color: var(--save); }
.mtile.t-offer  { border-top-color: var(--cv); }
.mtile.t-commit { border-top-color: var(--pay); }
.mtile.t-ref    { border-top-color: var(--neutral); }

/* Today → proposed transitions: red fact, grey arrow, blue offer */
.move{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.move-from{color:var(--waste);font-weight:800}
.move-arr{color:var(--neutral);opacity:.6;font-weight:700;font-size:.8em}
.move-to{color:var(--cv);font-weight:800}

/* ── SAVINGS BRIDGE (Act 04) ──
   Act 03 puts two annual costs side by side; the headline saving is larger than
   their difference because routing, remote-site and mobility benefits are added
   outside those two figures. Anyone in the room can subtract, so the reconciliation
   is shown rather than left to be discovered. */
.bridge{background:var(--panel);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-top:14px}
.bridge-h{padding:12px 20px;border-bottom:1.5px solid var(--div)}
.bridge-t{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.bridge-note{display:block;font-size:10.5px;color:var(--lbl);opacity:.6;line-height:1.55;margin-top:4px;font-style:italic}
.bridge-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:9px 20px;border-bottom:1px solid var(--div)}
.br-n{font-size:12.5px;color:var(--lbl)}
.br-s{display:block;font-size:10px;opacity:.45;font-style:italic;margin-top:1px}
.br-tag{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:9px;
  white-space:nowrap}
.br-tag.cash{color:var(--save);background:rgba(0,229,160,.11);border:1px solid rgba(0,229,160,.28)}
.br-tag.soft{color:var(--pay);background:rgba(245,166,35,.11);border:1px solid rgba(245,166,35,.3)}
.br-v{font-size:16px;font-weight:800;text-align:right;min-width:104px;font-variant-numeric:tabular-nums}
.bridge-row.total{background:rgba(0,200,160,.06);border-top:1.5px solid var(--teal);border-bottom:none}
.bridge-row.total .br-n{font-weight:700;font-size:13px;color:var(--teal)}
.bridge-row.total .br-v{font-size:22px}
.bridge-split{display:flex;gap:22px;flex-wrap:wrap;padding:10px 20px;border-top:1px solid var(--div)}
.bsp{display:flex;align-items:baseline;gap:7px;font-size:11px;color:var(--lbl)}
.bsp b{font-size:14px;font-weight:800}
@media (max-width:720px){.bridge-row{grid-template-columns:1fr auto}.br-tag{display:none}}
@media print{.bridge{border:1px solid #ddd;box-shadow:none}}

/* Scenario-owned fields: readable, clearly not yours to type in until Custom is chosen */
.si.locked, .if.locked{opacity:.55;cursor:not-allowed;border-style:dashed;border-color:var(--div)}
.si.locked:focus, .if.locked:focus{border-color:var(--div)}
.scenario-note{padding:8px 20px 10px;font-size:10.5px;line-height:1.55;color:var(--lbl);opacity:.62;
  font-style:italic;border-bottom:1px solid var(--div);background:rgba(0,200,160,.04)}

/* Sensitivity presets */
.sens-presets{display:flex;gap:6px;padding:8px 20px;flex-wrap:wrap;border-bottom:1px solid var(--div)}
.sens-btn{flex:1;min-width:96px;background:transparent;border:1.5px solid var(--div);color:var(--lbl);
  font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.05em;padding:6px 8px;border-radius:5px;
  cursor:pointer;transition:all var(--tr);white-space:nowrap}
.sens-btn:hover{border-color:var(--teal);color:var(--teal)}
.sens-btn.on{background:rgba(0,200,160,.12);border-color:var(--teal);color:var(--teal)}
.sens-btn.locked{opacity:.4;cursor:not-allowed}
.sens-btn.locked:hover{border-color:var(--div);color:var(--lbl)}

/* Productivity block inside the bridge — visually detached from the cash total above it */
.bridge-aside{border-top:2px solid var(--div);background:rgba(245,166,35,.05)}
.bridge-aside-h{padding:10px 20px 2px;font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pay)}
.bridge-aside-n{padding:0 20px 8px;font-size:10px;font-style:italic;opacity:.6;color:var(--lbl);line-height:1.5}

/* ── COLOUR KEY (present mode) ── */
.legend{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:9px 16px;margin-top:10px;
  background:var(--panel);border-radius:var(--r);box-shadow:var(--sh)}
.legend-t{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lbl);
  opacity:.45;margin-right:2px}
.legend-i{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--lbl);opacity:.82}
.legend-sw{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.legend-i b{font-weight:700;letter-spacing:.02em}
@media print{.legend{border:1px solid #ddd;box-shadow:none}}

/* Vendor-neutral wordmark, used where an edition ships without a partner logo. */
.logo-word{display:inline-block;font-size:19px;font-weight:800;letter-spacing:.04em;color:var(--lbl);
  line-height:1;white-space:nowrap}
.logo-word b{color:var(--teal);font-weight:800}
.print-cover-word{font-size:20px;font-weight:800;letter-spacing:.04em;color:#0D1B2A}
.print-cover-word b{color:#0E7490}

/* ── MODE SWITCH (header) ── */
.mode-switch{display:flex;background:var(--input-bg);border-radius:7px;padding:3px;gap:2px}
.mode-btn{background:transparent;border:none;color:var(--lbl);font-family:inherit;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 16px;border-radius:5px;cursor:pointer;transition:all var(--tr)}
.mode-btn:hover{color:var(--teal)}
.mode-btn.active{background:var(--teal);color:var(--bg)}
[data-theme="light"] .mode-btn.active{color:#fff}

/* ── MODE VISIBILITY ── */
.mode-pane{display:none}
.mode-pane.active{display:block}

/* ============================================================ BUILD MODE */
.build-layout{display:grid;grid-template-columns:236px 1fr 296px;gap:20px;align-items:start}

/* Step rail (left) */
.step-nav{position:sticky;top:82px;background:var(--panel);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.step-nav-h{padding:12px 18px;font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--lbl);opacity:.5;
  text-transform:uppercase;border-bottom:1px solid var(--div)}
.step-item{display:flex;align-items:flex-start;gap:11px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--div);
  transition:background var(--tr);position:relative;text-align:left;width:100%;background:transparent;border-left:none;
  border-right:none;border-top:none;font-family:inherit}
.step-item:last-child{border-bottom:none}
.step-item:hover{background:rgba(0,200,160,.05)}
.step-item.active{background:rgba(0,200,160,.09)}
.step-item.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal)}
.step-num{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--div);color:var(--lbl);font-size:11px;
  font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--tr)}
.step-item.active .step-num{border-color:var(--teal);color:var(--teal)}
.step-item.done .step-num{background:var(--teal);border-color:var(--teal);color:var(--bg);font-size:12px}
[data-theme="light"] .step-item.done .step-num{color:#fff}
.step-txt{flex:1;min-width:0}
.step-title{display:block;font-size:12px;font-weight:600;color:var(--lbl);line-height:1.3}
.step-item.active .step-title{color:var(--teal)}
.step-sub{display:block;font-size:9.5px;opacity:.5;color:var(--lbl);margin-top:2px;line-height:1.35}

/* A .sd nested inside a .sl reads as a sub-label, not a sibling flex column */
.sl .sd{display:block;flex:none;padding-right:0;margin-top:2px}

/* ── YES / NO SWITCH ──
   The underlying <select> stays in the DOM (visually hidden) so calculator.js keeps
   reading .value === 'yes' and localStorage save/restore keeps working untouched.
   The switch is a proxy that writes to it and dispatches a native change event. */
.sel-proxied{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tgl{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;flex-shrink:0}
.tgl-track{width:40px;height:21px;border-radius:11px;background:var(--input-bg);border:1.5px solid var(--div);
  position:relative;transition:background var(--tr),border-color var(--tr);flex-shrink:0}
.tgl-track::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--neutral);transition:transform var(--tr),background var(--tr)}
.tgl[aria-checked="true"] .tgl-track{background:rgba(0,200,160,.18);border-color:var(--teal)}
.tgl[aria-checked="true"] .tgl-track::after{transform:translateX(19px);background:var(--teal)}
.tgl-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--neutral);
  min-width:24px;transition:color var(--tr)}
.tgl[aria-checked="true"] .tgl-lbl{color:var(--teal)}
.tgl:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* Placeholder shown in place of a conditional block's fields, so the block itself
   never disappears from the step and its inputs stay discoverable. */
.cond-off{padding:12px 20px;font-size:10.5px;line-height:1.6;color:var(--lbl);opacity:.62;font-style:italic}
.cond-off b{font-style:normal;font-weight:700;color:var(--lbl);opacity:.85}
/* Flags an input group that produces imputed value rather than an invoice reduction. */
.cond-warn{padding:9px 20px;font-size:10px;line-height:1.55;color:var(--pay);
  background:rgba(245,166,35,.09);border-bottom:1px solid rgba(245,166,35,.25)}
.cond-warn b{font-weight:700}

/* Step body (centre) */
.step{display:none;flex-direction:column;gap:16px}
.step.active{display:flex}
.step-head{background:var(--panel);border-radius:var(--r);box-shadow:var(--sh);padding:16px 22px;border-left:3px solid var(--teal)}
.step-head h2{font-size:16px;font-weight:700;color:var(--teal);letter-spacing:.04em;margin-bottom:5px}
.step-head p{font-size:11.5px;color:var(--lbl);opacity:.72;line-height:1.6}
.step-head .cfo-q{display:block;margin-top:8px;font-style:italic;font-size:11px;color:var(--cv);opacity:.9}

.step-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.step-cols.one{grid-template-columns:1fr}

/* Step footer nav */
.step-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 2px 0}
.nav-btn{background:transparent;border:1.5px solid var(--div);color:var(--lbl);font-family:inherit;font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:9px 20px;border-radius:6px;cursor:pointer;
  transition:all var(--tr)}
.nav-btn:hover{border-color:var(--teal);color:var(--teal)}
.nav-btn.primary{background:var(--teal);border-color:var(--teal);color:var(--bg)}
[data-theme="light"] .nav-btn.primary{color:#fff}
.nav-btn.primary:hover{opacity:.85}
.nav-btn:disabled{opacity:.3;cursor:not-allowed}
.nav-btn.ghost{border-color:transparent;opacity:.6}

/* Live rail (right) */
.live-rail{position:sticky;top:82px;display:flex;flex-direction:column;gap:12px}
.rail-card{background:var(--panel);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.rail-h{padding:11px 16px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);border-bottom:1.5px solid var(--teal);display:flex;justify-content:space-between;align-items:center}
.rail-live{display:flex;align-items:center;gap:5px;font-size:8.5px;letter-spacing:.1em;opacity:.75}
.rail-live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--save);animation:railpulse 2s infinite}
@keyframes railpulse{0%,100%{opacity:1}50%{opacity:.25}}
.rail-row{display:flex;flex-direction:column;gap:2px;padding:10px 16px;border-bottom:1px solid var(--div)}
.rail-row:last-child{border-bottom:none}
.rail-lbl{font-size:10px;color:var(--lbl);opacity:.62;letter-spacing:.04em}
.rail-val{font-size:19px;font-weight:800;letter-spacing:-.02em}
.rail-val.big{font-size:23px}
.rail-hint{font-size:9.5px;opacity:.45;font-style:italic}

/* Only the figures that cannot yet be computed are dimmed — the rail stays live
   for everything the entered data already supports. */
.rail-val.pending{opacity:.2}
.rail-locked .rail-val{opacity:.2}
.rail-lock-note{padding:11px 16px;font-size:10px;line-height:1.55;color:var(--pay);
  background:rgba(245,166,35,.09);border-top:1px solid rgba(245,166,35,.28)}

/* Readiness checklist */
.ready-item{display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:10.5px;color:var(--lbl);
  border-bottom:1px solid var(--div)}
.ready-item:last-child{border-bottom:none}
.ready-tick{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--div);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:9px;color:transparent}
.ready-item.ok .ready-tick{background:var(--save);border-color:var(--save);color:var(--bg)}
[data-theme="light"] .ready-item.ok .ready-tick{color:#fff}
.ready-item.ok{opacity:.5}

/* Step-local echo strip (immediate "what did that change?" feedback) */
.echo{background:var(--adv-bg);border-radius:var(--r);padding:12px 18px;display:flex;gap:26px;flex-wrap:wrap;
  border:1px solid var(--div)}
.echo-item{display:flex;flex-direction:column;gap:2px;min-width:112px}
.echo-lbl{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lbl);opacity:.55}
.echo-val{font-size:17px;font-weight:800;letter-spacing:-.02em}

/* ============================================================ PRESENT MODE */
.story-nav{position:sticky;top:62px;z-index:150;background:var(--panel);border-bottom:1px solid var(--div);
  box-shadow:var(--sh);display:flex;gap:2px;padding:8px 20px;overflow-x:auto;margin:0 -20px 4px}
.story-nav-btn{background:transparent;border:none;color:var(--lbl);font-family:inherit;font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:7px 14px;border-radius:6px;cursor:pointer;white-space:nowrap;
  transition:all var(--tr);opacity:.6;display:flex;align-items:center;gap:7px}
.story-nav-btn:hover{opacity:1;color:var(--teal);background:rgba(0,200,160,.06)}
.story-nav-btn.current{opacity:1;color:var(--teal);background:rgba(0,200,160,.11)}
.snb-n{font-size:9px;opacity:.55;font-weight:800}

.story{display:flex;flex-direction:column;gap:26px;padding-top:14px}
.act{scroll-margin-top:132px}
.act-head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--div)}
.act-n{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--teal);opacity:.65;flex-shrink:0}
.act-t{font-size:19px;font-weight:700;color:var(--lbl);letter-spacing:-.01em}
.act-sub{font-size:11.5px;opacity:.6;font-style:italic;margin-left:auto;text-align:right;line-height:1.5;max-width:44%}
.act-edit{background:transparent;border:1px solid var(--div);color:var(--lbl);font-family:inherit;font-size:9.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:5px;cursor:pointer;
  opacity:.5;transition:all var(--tr);flex-shrink:0}
.act-edit:hover{opacity:1;border-color:var(--teal);color:var(--teal)}

/* Hero number block.
   Scoped to `.act >` on purpose: the public site's marketing banner is also
   `.hero`, and flow.css loads after styles.css, so an unscoped rule turned the
   landing headline into a 270px grid column. */
.act>.hero{background:var(--panel);border-radius:var(--r);box-shadow:var(--sh);padding:22px 26px;display:grid;
  grid-template-columns:270px 1fr;gap:30px;align-items:center}
.hero-main{display:flex;flex-direction:column;gap:3px}
.hero-lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lbl);opacity:.6}
.hero-val{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.hero-note{font-size:11px;opacity:.55;font-style:italic;line-height:1.5;margin-top:4px}

/* TCO breakdown bars */
.tco-list{display:flex;flex-direction:column;gap:7px;min-width:0}
.tco-row{display:grid;grid-template-columns:152px 1fr 94px 44px;gap:11px;align-items:center;font-size:11.5px}
.tco-name{color:var(--lbl);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Track is deliberately neutral, not --input-bg: a blue-grey rail reads as a second
   data series next to red bars. It is empty space, so it must look like empty space. */
.tco-track{display:block;height:9px;background:rgba(138,171,184,.12);border-radius:5px;overflow:hidden}
/* Default (.on-invoice) is the solid bar: spend the customer already sees. */
.tco-fill{display:block;height:100%;border-radius:5px;transition:width .45s ease;background:var(--waste)}
/* Hidden spend is OUTLINED, not filled. Edge-vs-area is a separate visual channel from
   brightness, so it cannot collapse toward the track tone the way a faded red did — and
   unlike a diagonal hatch it does not shimmer at 9px. Survives greyscale print. */
.tco-fill.hidden-cost{
  background:rgba(255,78,78,.15);
  box-shadow:inset 0 0 0 1.5px var(--waste);
}
[data-theme="light"] .tco-fill.hidden-cost{background:rgba(214,48,48,.13)}
.tco-amt{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.tco-pct{text-align:right;font-size:10px;opacity:.5;font-variant-numeric:tabular-nums}
.tco-empty{font-size:11px;opacity:.45;font-style:italic;padding:8px 0}
/* Act 01 is all current-state cost, so it is all red. Shade — not hue — separates
   the part hidden from the print invoice from the part already on it. */
.tco-key{display:flex;gap:20px;flex-wrap:wrap;margin-top:11px;padding-top:9px;border-top:1px solid var(--div)}
.tco-key-i{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--lbl);opacity:.62}
.tco-key-sw{width:18px;height:8px;border-radius:4px;flex-shrink:0;background:var(--waste)}
.tco-key-sw.outline{background:rgba(255,78,78,.15);box-shadow:inset 0 0 0 1.5px var(--waste)}
[data-theme="light"] .tco-key-sw.outline{background:rgba(214,48,48,.13)}

/* True cost of a click */
.click-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.click-card{background:var(--panel);border-radius:var(--r);box-shadow:var(--sh);padding:16px 20px}
.click-h{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--lbl);opacity:.6;margin-bottom:12px}
.click-cmp{display:flex;align-items:flex-end;gap:14px}
.click-side{display:flex;flex-direction:column;gap:2px}
.click-side .ck-k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.5}
.click-side .ck-v{font-size:23px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.click-arrow{font-size:19px;color:var(--waste);padding-bottom:5px;font-weight:700}
.click-mult{margin-left:auto;text-align:right;padding-bottom:3px}
.click-mult .cm-v{font-size:21px;font-weight:800;color:var(--waste);letter-spacing:-.02em}
.click-mult .cm-k{font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:.5}
.click-foot{margin-top:11px;padding-top:10px;border-top:1px solid var(--div);font-size:10.5px;opacity:.55;line-height:1.55}

/* Metric grid (generic KPI tiles) */
.mgrid{display:grid;gap:14px}
.mgrid.c2{grid-template-columns:repeat(2,1fr)}
.mgrid.c3{grid-template-columns:repeat(3,1fr)}
.mgrid.c4{grid-template-columns:repeat(4,1fr)}
.mtile{background:var(--panel);border-radius:var(--r);box-shadow:var(--sh);padding:15px 18px;display:flex;
  flex-direction:column;gap:3px;border-top:2.5px solid var(--div)}
.mtile.w{border-top-color:var(--waste)} .mtile.s{border-top-color:var(--save)}
.mtile.p{border-top-color:var(--pay)}   .mtile.c{border-top-color:var(--cv)}
.mtile-k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--lbl);opacity:.6;line-height:1.4}
.mtile-v{font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.mtile-n{font-size:10px;opacity:.48;font-style:italic;line-height:1.45;margin-top:1px}

/* Gate (present mode with incomplete model) */
.gate{background:var(--panel);border-radius:var(--r);box-shadow:var(--sh);padding:38px 30px;text-align:center;
  border:1.5px dashed rgba(245,166,35,.4)}
.gate-icon{font-size:28px;margin-bottom:10px;opacity:.85}
.gate h3{font-size:15px;color:var(--pay);margin-bottom:7px;font-weight:700}
.gate p{font-size:12px;color:var(--lbl);opacity:.7;line-height:1.7;max-width:540px;margin:0 auto 16px}
.gate-missing{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.gate-chip{font-size:10.5px;padding:4px 11px;border-radius:12px;background:rgba(245,166,35,.13);
  border:1px solid rgba(245,166,35,.32);color:var(--pay);font-weight:600}
.story.gated > .act{opacity:.14;pointer-events:none;filter:saturate(.25)}

/* Prototype banner */
.proto-bar{background:rgba(0,200,255,.09);border:1px solid rgba(0,200,255,.3);border-radius:var(--r);
  padding:11px 18px;font-size:11px;line-height:1.65;color:var(--lbl)}
.proto-bar b{color:var(--cv)}
.proto-bar code{background:var(--input-bg);padding:1px 5px;border-radius:3px;font-size:10px}

/* ── RESPONSIVE ── */
@media (max-width:1240px){
  .build-layout{grid-template-columns:200px 1fr 262px}
  .tco-row{grid-template-columns:122px 1fr 84px 40px}
  .act>.hero{grid-template-columns:230px 1fr;gap:22px}
}
@media (max-width:1040px){
  .build-layout{grid-template-columns:1fr}
  .step-nav,.live-rail{position:static}
  .step-nav{display:grid;grid-template-columns:repeat(2,1fr)}
  .step-nav-h{grid-column:1/-1}
  .live-rail{flex-direction:row;flex-wrap:wrap}
  .live-rail .rail-card{flex:1;min-width:240px}
  .act>.hero{grid-template-columns:1fr;gap:18px}
  .mgrid.c4,.mgrid.c3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .step-cols,.click-grid{grid-template-columns:1fr}
  .mgrid.c4,.mgrid.c3,.mgrid.c2{grid-template-columns:1fr}
  .step-nav{grid-template-columns:1fr}
  .act-sub{display:none}
  .act-head{flex-wrap:wrap}
}

/* ── PRINT: force present mode, drop all chrome ── */
@media print{
  .mode-switch,.story-nav,.proto-bar,.act-edit,.step-nav,.live-rail,.step-foot,.gate{display:none !important}
  .mode-pane{display:none !important}
  #paneStory{display:block !important}
  .story.gated > .act{opacity:1;filter:none}
  .act{break-inside:avoid;page-break-inside:avoid}
  .act>.hero,.click-card,.mtile{background:#fff !important;box-shadow:none !important;border:1px solid #ddd}
}