/* ==========================================================================
   OfficeGPU — v3 layer
   Loaded AFTER styles.css. Only adds new components and small refinements.
   Nothing here removes the v2 system; it extends it.
   ========================================================================== */

:root{
  --amber:#ffd48b;
  --red:#ff9b8b;
  --sim-grid: rgba(255,255,255,.04);
}

/* ---------- scroll progress rail (desktop only) ------------------------- */
.rail{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:18;display:none;flex-direction:column;gap:14px}
.rail a{display:flex;align-items:center;gap:10px;color:#5d6b72;font-size:9px;letter-spacing:.14em;font-weight:800;text-transform:uppercase}
.rail a i{width:22px;height:1px;background:#313c42;transition:width .3s ease,background .3s ease}
.rail a:hover{color:#c6d0d4}
.rail a.is-active{color:var(--green)}
.rail a.is-active i{width:38px;background:var(--green)}
@media (min-width:1280px){.rail{display:flex}}

/* ---------- hero refinements -------------------------------------------- */
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:block;transform:translateY(102%);animation:lineRise .9s cubic-bezier(.16,.84,.3,1) forwards}
.hero h1 .line:nth-child(2) > span{animation-delay:.09s}
@keyframes lineRise{to{transform:translateY(0)}}
.scroll-cue{margin-top:44px;display:inline-flex;align-items:center;gap:10px;color:#65737a;font-size:9px;letter-spacing:.16em;font-weight:800}
.scroll-cue i{display:block;width:26px;height:26px;border:1px solid #2b353b;border-radius:50%;position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:7px;width:1px;height:8px;background:var(--green);transform:translateX(-50%);animation:cueDrop 1.9s ease-in-out infinite}
@keyframes cueDrop{0%,100%{opacity:.15;transform:translate(-50%,0)}45%{opacity:1;transform:translate(-50%,6px)}}

/* ---------- simulator --------------------------------------------------- */
.sim{background:
  radial-gradient(900px 420px at 15% 0%, rgba(125,252,154,.05), transparent 70%),
  linear-gradient(180deg,#0a0d0f,#0b0f11);
  border-block:1px solid var(--line)}
.sim-grid{margin-top:54px;display:grid;grid-template-columns:.82fr 1.18fr;gap:26px;align-items:start}

.sim-panel{border:1px solid var(--line);border-radius:22px;background:#0d1114;overflow:hidden}
.sim-block{padding:22px 24px;border-bottom:1px solid var(--line)}
.sim-block:last-child{border-bottom:0}
.sim-block > h4{margin:0 0 14px;font-size:10px;letter-spacing:.16em;color:#7d8b91;font-weight:800;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.sim-block > h4 em{font-style:normal;color:#55636a;letter-spacing:.06em;font-size:9px;text-transform:none}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{appearance:none;cursor:pointer;border:1px solid #232c31;background:#11161a;color:#93a0a6;font:inherit;font-size:11px;font-weight:650;padding:9px 12px;border-radius:9px;transition:border-color .22s ease,color .22s ease,background .22s ease,transform .22s ease}
.chip:hover{color:#e4ebee;border-color:#39464d;transform:translateY(-1px)}
.chip[aria-pressed="true"],.chip.is-on{border-color:rgba(125,252,154,.42);background:rgba(125,252,154,.09);color:#dff7e6}
.chip small{display:block;font-size:9px;color:#6f7d83;letter-spacing:.05em;margin-top:3px;font-weight:600}
.chip[aria-pressed="true"] small{color:#8fb79c}

.sim-nodes{display:flex;flex-direction:column;gap:9px}
.sim-node{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;border:1px solid #1f272c;border-radius:12px;padding:11px 12px;background:#101518;transition:border-color .25s ease,background .25s ease}
.sim-node b{font-size:12px;font-weight:700;display:block}
.sim-node span{display:block;font-size:9px;letter-spacing:.1em;color:#6f7d83;margin-top:3px;font-weight:700}
.sim-node.is-busy{border-color:rgba(255,212,139,.28);background:rgba(255,212,139,.04)}
.sim-node .toggle{cursor:pointer;border:1px solid #2a343a;background:transparent;color:#8e9ba1;font:inherit;font-size:9px;font-weight:800;letter-spacing:.1em;padding:7px 9px;border-radius:8px;transition:all .22s ease}
.sim-node .toggle:hover{color:#e9f0f2;border-color:#404d54}
.sim-node.is-busy .toggle{color:var(--amber);border-color:rgba(255,212,139,.35)}
.sim-node .drop{cursor:pointer;border:0;background:transparent;color:#4e5b61;font-size:15px;line-height:1;padding:6px 4px;transition:color .2s ease}
.sim-node .drop:hover{color:var(--red)}
.sim-add{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.sim-add .chip{font-size:10px;padding:8px 10px}
.sim-hint{margin:12px 0 0;font-size:10px;line-height:1.6;color:#66747a}

/* stage */
.sim-stage{border:1px solid var(--line);border-radius:22px;background:#090c0e;overflow:hidden;position:relative}
.sim-stage-top{height:46px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.14em;color:#7d8b91;font-weight:800}
.sim-stage-top .verdict-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:7px;border:1px solid rgba(125,252,154,.3);color:var(--green);background:rgba(125,252,154,.07)}
.sim-stage-top .verdict-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.sim-stage[data-verdict="pool"] .verdict-pill{border-color:rgba(139,184,255,.36);color:var(--blue);background:rgba(139,184,255,.08)}
.sim-stage[data-verdict="none"] .verdict-pill{border-color:rgba(255,155,139,.4);color:var(--red);background:rgba(255,155,139,.07)}

.sim-canvas{position:relative;padding:26px 22px 8px;background-image:linear-gradient(var(--sim-grid) 1px,transparent 1px),linear-gradient(90deg,var(--sim-grid) 1px,transparent 1px);background-size:30px 30px;background-position:center}
.sim-row{display:flex;gap:10px;flex-wrap:wrap}
.sim-card{position:relative;flex:1 1 118px;min-width:118px;border:1px solid #1e262b;border-radius:12px;padding:13px;background:rgba(15,20,23,.9);transition:border-color .4s ease,box-shadow .4s ease,transform .4s ease,opacity .4s ease}
.sim-card h5{margin:0;font-size:9px;letter-spacing:.11em;color:#79868c;font-weight:800}
.sim-card strong{display:block;font-size:13px;margin:8px 0 2px}
.sim-card small{display:block;font-size:9px;color:#6d7a80;letter-spacing:.06em}
.sim-card .bar{margin-top:11px;height:4px;border-radius:3px;background:#1b2226;overflow:hidden}
.sim-card .bar i{display:block;height:100%;width:0;background:#38474e;border-radius:3px;transition:width .6s cubic-bezier(.2,.8,.2,1),background .4s ease}
.sim-card .tag{margin-top:10px;font-size:8px;letter-spacing:.13em;font-weight:800;color:#55636a}
.sim-card.is-used{border-color:rgba(125,252,154,.4);box-shadow:0 0 0 1px rgba(125,252,154,.06),0 16px 40px rgba(0,0,0,.35);transform:translateY(-2px)}
.sim-card.is-used .bar i{background:var(--green)}
.sim-card.is-used .tag{color:var(--green)}
.sim-card.is-busy{opacity:.6;border-style:dashed;border-color:rgba(255,212,139,.32)}
.sim-card.is-busy .bar i{background:var(--amber)}
.sim-card.is-busy .tag{color:var(--amber)}
.sim-card.is-idle .tag{color:#5c6a70}
.sim-card.is-used::after{content:"";position:absolute;left:50%;bottom:-14px;width:1px;height:14px;background:linear-gradient(180deg,rgba(125,252,154,.7),transparent)}

.sim-bus{margin:22px 0 0;height:2px;border-radius:2px;background:#161d21;position:relative;overflow:hidden}
.sim-bus i{position:absolute;inset:0;width:34%;background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:0;transform:translateX(-120%)}
.sim-stage[data-flow="on"] .sim-bus i{opacity:.85;animation:busFlow 1.7s linear infinite}
@keyframes busFlow{to{transform:translateX(320%)}}

.sim-engine{margin-top:20px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;border:1px solid rgba(125,252,154,.22);border-radius:14px;padding:16px 18px;background:linear-gradient(180deg,#0d1510,#0a0f0c)}
.sim-engine span{display:block;font-size:8px;letter-spacing:.16em;color:var(--green);font-weight:800;margin-bottom:7px}
.sim-engine strong{display:block;font-size:17px;letter-spacing:-.02em}
.sim-engine small{display:block;font-size:10px;color:#7b8a81;margin-top:6px;line-height:1.5}
.sim-engine .mode{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:.08em;border:1px solid rgba(125,252,154,.3);border-radius:8px;padding:9px 11px;color:var(--green);white-space:nowrap}
.sim-stage[data-verdict="pool"] .sim-engine{border-color:rgba(139,184,255,.26)}
.sim-stage[data-verdict="pool"] .sim-engine span,.sim-stage[data-verdict="pool"] .sim-engine .mode{color:var(--blue);border-color:rgba(139,184,255,.3)}
.sim-stage[data-verdict="none"] .sim-engine{border-color:rgba(255,155,139,.28)}
.sim-stage[data-verdict="none"] .sim-engine span,.sim-stage[data-verdict="none"] .sim-engine .mode{color:var(--red);border-color:rgba(255,155,139,.32)}

/* receipt: the memory arithmetic, shown openly */
.sim-receipt{border-top:1px solid var(--line);padding:20px 22px 8px}
.sim-receipt h4{margin:0 0 14px;font-size:9px;letter-spacing:.16em;color:#7d8b91;font-weight:800;text-transform:uppercase}
.sim-receipt .row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.055);font-size:12px;color:#93a0a6}
.sim-receipt .row b{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:650;color:#dce4e7;font-size:12px}
.sim-receipt .row.total{border-bottom:0;padding-top:12px;color:#eef3f5;font-weight:700}
.sim-receipt .row.total b{color:var(--green);font-size:14px}
.sim-receipt .row small{display:block;font-size:10px;color:#616f75;margin-top:2px}

.sim-notes{padding:6px 22px 24px;display:grid;gap:9px}
.sim-note{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:11px;line-height:1.6;color:#8b989e}
.sim-note i{font-style:normal;color:var(--green);font-size:11px;line-height:1.5}
.sim-note.warn i{color:var(--amber)}
.sim-note.bad i{color:var(--red)}
.sim-note b{color:#e6edef;font-weight:700}
.sim-foot{border-top:1px solid var(--line);padding:14px 22px;font-size:10px;line-height:1.7;color:#65737a;background:#0b0e10}
.sim-foot b{color:#93a0a6;font-weight:700}

@media (max-width:1040px){.sim-grid{grid-template-columns:1fr;gap:18px}}
@media (max-width:640px){
  .sim-canvas{padding:18px 14px 6px}
  .sim-card{flex:1 1 100%}
  .sim-engine{grid-template-columns:1fr}
  .sim-engine .mode{justify-self:start}
}

/* ---------- boundary marquee: what we will not build -------------------- */
.boundary{border-block:1px solid var(--line);background:#0c1013;padding-block:0;overflow:hidden}
.marquee{display:flex;gap:0;padding:16px 0;border-bottom:1px solid var(--line);white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee > div{display:flex;gap:28px;padding-right:28px;animation:marq 34s linear infinite}
.marquee span{font-size:11px;letter-spacing:.12em;font-weight:800;color:#5d6b72;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px}
.marquee span::before{content:"NO";color:var(--red);font-size:9px;border:1px solid rgba(255,155,139,.3);border-radius:5px;padding:3px 5px}
@keyframes marq{to{transform:translateX(-100%)}}
.boundary-grid{padding-block:56px;display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.boundary-grid h2{font-size:clamp(30px,3.6vw,44px);line-height:1.05;letter-spacing:-.04em;margin:14px 0 16px;font-weight:690}
.boundary-grid > div > p{color:var(--muted);font-size:15px;line-height:1.7;margin:0}
.boundary-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.boundary-card{border:1px solid var(--line);border-radius:16px;padding:20px;background:#0f1316;transition:border-color .3s ease,transform .3s ease}
.boundary-card:hover{transform:translateY(-2px);border-color:#2c373d}
.boundary-card strong{display:block;font-size:14px;margin-bottom:8px}
.boundary-card p{margin:0;font-size:12px;line-height:1.65;color:#8b989e}
.boundary-card em{font-style:normal;display:inline-block;margin-bottom:11px;font-size:8px;letter-spacing:.14em;font-weight:800;color:var(--red);border:1px solid rgba(255,155,139,.28);border-radius:5px;padding:4px 6px}
.boundary-card.yes em{color:var(--green);border-color:rgba(125,252,154,.3)}
@media (max-width:960px){.boundary-grid{grid-template-columns:1fr;gap:34px}.boundary-cards{grid-template-columns:1fr}}

/* ---------- the wedge (facts with sources) ------------------------------ */
.wedge-grid{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wedge{border:1px solid var(--line);border-radius:18px;padding:26px;background:linear-gradient(160deg,#111519,#0b0f11);position:relative;overflow:hidden}
.wedge::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(125,252,154,.5),transparent);opacity:0;transition:opacity .4s ease}
.wedge:hover::before{opacity:1}
.wedge b{display:block;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:.12em;color:var(--green);margin-bottom:16px}
.wedge h3{margin:0 0 10px;font-size:19px;line-height:1.2;letter-spacing:-.025em}
.wedge p{margin:0;font-size:13px;line-height:1.7;color:#8b989e}
.wedge a{display:inline-block;margin-top:14px;font-size:10px;letter-spacing:.08em;color:#7d8b91;border-bottom:1px solid #313c42;padding-bottom:3px}
.wedge a:hover{color:var(--green);border-color:rgba(125,252,154,.4)}
@media (max-width:960px){.wedge-grid{grid-template-columns:1fr}}

/* ---------- evidence / gates ------------------------------------------- */
.gates{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gate{border:1px solid var(--line);border-radius:16px;padding:20px;background:#0f1316}
.gate span{display:block;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;color:var(--green);letter-spacing:.1em;margin-bottom:12px}
.gate strong{display:block;font-size:14px;margin-bottom:8px}
.gate p{margin:0;font-size:12px;line-height:1.6;color:#8b989e}
.gate .state{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:8px;letter-spacing:.14em;font-weight:800;color:var(--amber);border:1px solid rgba(255,212,139,.3);border-radius:6px;padding:5px 7px}
.gate .state i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:statePulse 2s ease-in-out infinite}
@keyframes statePulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (max-width:960px){.gates{grid-template-columns:1fr}}

/* ---------- scroll-linked architecture packet --------------------------- */
.architecture{--arch-progress:0}
.arch-trace{position:absolute;left:50%;top:26px;bottom:26px;width:1px;background:linear-gradient(180deg,transparent,rgba(125,252,154,.16),transparent);transform:translateX(-50%);z-index:0;pointer-events:none}
.arch-trace i{position:absolute;left:50%;top:calc(var(--arch-progress) * 100%);width:9px;height:9px;margin-left:-4.5px;margin-top:-4.5px;border-radius:50%;background:var(--green);box-shadow:0 0 22px 5px rgba(125,252,154,.35)}

/* ---------- counters ---------------------------------------------------- */
.count{font-variant-numeric:tabular-nums}

/* ---------- small refinements ------------------------------------------ */
.button{position:relative;overflow:hidden}
.button::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-120%)}
.button:hover::after{animation:sheen .8s ease}
@keyframes sheen{to{transform:translateX(120%)}}
.feature,.fit-card,.sim-panel,.sim-stage{position:relative}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--green);transition:right .28s ease}
.nav a:hover::after{right:0}

@media (prefers-reduced-motion: reduce){
  .hero h1 .line > span{transform:none;animation:none}
  .scroll-cue i::after,.marquee > div,.sim-bus i,.gate .state i{animation:none!important}
  .sim-stage[data-flow="on"] .sim-bus i{opacity:.5;transform:none}
  .button:hover::after{animation:none}
}

/* anchors must clear the sticky header */
section[id],main[id]{scroll-margin-top:92px}
/* keep planner cards visually level */
.sim-row{align-items:stretch}
/* counters inside gate cards must stay inline (the .gate span rule is block) */
.gate p span.count{display:inline;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:inherit;letter-spacing:0;margin:0;color:var(--green);font-weight:700}
/* headline masking must not clip descenders */
.hero h1 .line{padding-bottom:.08em;margin-bottom:-.08em}