/* ============================================================
   OI SOVEREIGN AI FABRIC · EXHIBITION KIOSK
   Landscape, resolution independent. Bentley + Slate.
   ============================================================ */

@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Bold.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Black.woff2') format('woff2');font-weight:900;font-display:block}

:root{
  /* ---- one reference pixel of a 1920 x 1080 canvas, on any screen ---- */
  --s: min(0.0520833vw, 0.0925926vh);

  /* ---- palette (Infrastructure dark) ---- */
  --bg:#0D1510; --bg-deep:#080E09;
  --surface:#121A14; --surface2:#192018; --surface3:#1F2A1E;
  --g1:#34B17D; --g2:#0D613E; --g3:#1A4A36; --g4:#1A3529; --g5:#0D1F16;
  --sage:#96C091; --amber:#F2B231; --coral:#F06B6B;
  --text-bright:#F0F7F3;
  --text-mid:rgba(240,247,243,.88);
  --text-dim:rgba(220,235,228,.62);
  --text-faint:rgba(212,228,220,.42);
  --border:rgba(52,177,125,.12);
  --border-mid:rgba(52,177,125,.26);
  --border-bright:rgba(52,177,125,.55);

  --font:'Satoshi',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:'SF Mono','Fira Mono',ui-monospace,Menlo,monospace;

  /* ---- motion ---- */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-std:cubic-bezier(.4,0,.2,1);
  --e-in:cubic-bezier(.55,0,1,.45);
  --e-spring:cubic-bezier(.34,1.4,.5,1);
  --t-micro:160ms; --t-std:320ms; --t-screen:560ms; --t-hero:780ms;

  /* ---- radii (rounded rect only, never pills or circles) ---- */
  --r-xs:calc(4*var(--s)); --r-sm:calc(8*var(--s)); --r-md:calc(14*var(--s)); --r-lg:calc(20*var(--s));
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{
  height:100%;width:100%;overflow:hidden;background:var(--bg-deep);
  color:var(--text-mid);font-family:var(--font);
  font-size:calc(16*var(--s));
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior:none;touch-action:manipulation;user-select:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}

/* ============================== BACKGROUND ============================== */
#weave{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.ambient{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.amb{position:absolute;filter:blur(calc(120*var(--s)))}
.amb-a{width:70vw;height:70vw;right:-18vw;top:-26vw;
  background:radial-gradient(closest-side,rgba(52,177,125,.19),rgba(52,177,125,.11) 34%,rgba(52,177,125,.05) 58%,rgba(52,177,125,0) 80%)}
.amb-b{width:64vw;height:64vw;left:-22vw;bottom:-30vw;
  background:radial-gradient(closest-side,rgba(13,97,62,.24),rgba(13,97,62,.13) 36%,rgba(13,97,62,.05) 62%,rgba(13,97,62,0) 82%)}
.bands{position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(112deg,rgba(240,247,243,.028) 0 calc(1*var(--s)),rgba(240,247,243,0) calc(1*var(--s)) calc(96*var(--s))),
             repeating-linear-gradient(22deg,rgba(52,177,125,.022) 0 calc(1*var(--s)),rgba(52,177,125,0) calc(1*var(--s)) calc(148*var(--s)));
  mask-image:linear-gradient(160deg,#000 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.08) 100%)}

/* ============================== TYPE TOKENS ============================== */
.kicker{font-size:calc(13*var(--s));font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--g1);font-family:var(--mono)}
.kicker .sep{opacity:.5;margin:0 calc(2*var(--s))}
.mini{font-size:calc(11*var(--s));font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--text-faint);font-family:var(--mono)}
.accent{color:var(--g1)}
.caret{display:inline-block;margin-left:calc(8*var(--s));transition:transform var(--t-std) var(--e-out)}

/* ============================== CHROME ============================== */
.chrome{position:fixed;top:0;left:0;right:0;height:calc(76*var(--s));z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(40*var(--s));
  background:linear-gradient(180deg,rgba(8,14,9,.94),rgba(8,14,9,.6) 62%,rgba(8,14,9,0));
  backdrop-filter:blur(calc(14*var(--s)))}
.chrome-l,.chrome-r{display:flex;align-items:center;gap:calc(18*var(--s))}
.mark{display:block;transition:opacity var(--t-std) var(--e-out),transform var(--t-std) var(--e-out)}
.mark img{width:calc(148*var(--s));height:auto}
.mark:active{transform:scale(.96)}
.chrome-rule{width:calc(1*var(--s));height:calc(24*var(--s));background:var(--border-mid);opacity:0;transition:opacity var(--t-std)}
.chrome-ctx{font-family:var(--mono);font-size:calc(11.5*var(--s));letter-spacing:.26em;color:var(--text-faint);
  opacity:0;transform:translateX(calc(-8*var(--s)));transition:opacity var(--t-std) var(--e-out),transform var(--t-std) var(--e-out)}
html:not([data-screen="attract"]) .chrome-rule{opacity:1}
html:not([data-screen="attract"]) .chrome-ctx{opacity:1;transform:none}

.status{display:inline-flex;align-items:center;gap:calc(8*var(--s));
  font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.2em;color:var(--g1);
  border:calc(1*var(--s)) solid var(--border-mid);border-radius:var(--r-xs);
  padding:calc(6*var(--s)) calc(10*var(--s));background:rgba(52,177,125,.06)}
.status i{width:calc(5*var(--s));height:calc(5*var(--s));border-radius:calc(1.5*var(--s));background:var(--g1);animation:blip 2.6s var(--e-std) infinite}
@keyframes blip{0%,72%,100%{opacity:1}80%{opacity:.25}}
.clock{font-family:var(--mono);font-size:calc(11.5*var(--s));letter-spacing:.18em;color:var(--text-faint);
  font-variant-numeric:tabular-nums}

.btn-talk,.btn-back{font-family:var(--mono);font-size:calc(11.5*var(--s));letter-spacing:.2em;font-weight:600;
  padding:calc(11*var(--s)) calc(18*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border-bright);color:var(--text-bright);
  background:linear-gradient(180deg,rgba(52,177,125,.14),rgba(52,177,125,.05));
  transition:transform var(--t-micro) var(--e-out),background var(--t-std),border-color var(--t-std),opacity var(--t-std)}
.btn-talk:active,.btn-back:active{transform:scale(.965);background:rgba(52,177,125,.24)}
.btn-back{border-color:var(--border-mid);background:rgba(240,247,243,.05)}
.btn-back .caret{margin:0 calc(8*var(--s)) 0 0}
.btn-talk,.btn-back{display:none}
html[data-screen="home"] .btn-talk,
html[data-screen="fabric"] .btn-talk,
html[data-screen="segment"] .btn-talk,
html[data-screen="deploy"] .btn-talk{display:inline-block}
html[data-screen="fabric"] .btn-back,
html[data-screen="segment"] .btn-back,
html[data-screen="deploy"] .btn-back,
html[data-screen="talk"] .btn-back,
html[data-screen="about"] .btn-back{display:inline-block}
html[data-screen="attract"] .chrome-r .status,
html[data-screen="attract"] .clock{opacity:.45}

/* ============================== SCREEN SYSTEM ============================== */
#app{position:fixed;inset:0;z-index:10}
.screen{position:absolute;inset:0;display:none;flex-direction:column;
  padding:calc(94*var(--s)) calc(40*var(--s)) calc(28*var(--s))}
.screen.is-active{display:flex}
.screen.is-entering{animation:screenIn var(--t-screen) var(--e-out) both}
.screen.is-leaving{animation:screenOut 220ms var(--e-out) both;pointer-events:none}
@keyframes screenIn{from{opacity:0;transform:translateY(calc(22*var(--s))) scale(.988);filter:blur(calc(3*var(--s)))}
  to{opacity:1;transform:none;filter:none}}
@keyframes screenOut{from{opacity:1;transform:none}55%{opacity:.06}to{opacity:0;transform:translateY(calc(-14*var(--s))) scale(.99)}}

/* stagger helper */
.stg{opacity:0;transform:translateY(calc(18*var(--s)));
  animation:stgIn 620ms var(--e-out) both;animation-delay:calc(var(--d,0)*1ms)}
@keyframes stgIn{to{opacity:1;transform:none}}

/* ============================== ATTRACT ============================== */
.screen-attract{align-items:center;justify-content:center;text-align:center}
.attract-core{display:flex;flex-direction:column;align-items:center;gap:calc(4*var(--s));max-width:calc(1500*var(--s))}
.attract-kicker{margin-bottom:calc(26*var(--s));animation:stgIn 900ms var(--e-out) both}
.attract-title{font-size:calc(158*var(--s));line-height:.94;font-weight:900;letter-spacing:-.035em;color:var(--text-bright)}
.attract-title .line{display:block;overflow:hidden}
.attract-title .line>*{display:block}
.attract-title .l1{background:linear-gradient(176deg,#FFFFFF 4%,#C8DCD2 62%,#93AFA3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:riseIn 1s var(--e-out) both .1s}
.attract-title .l2{animation:riseIn 1s var(--e-out) both .22s;
  text-shadow:0 0 calc(70*var(--s)) rgba(52,177,125,.32)}
@keyframes riseIn{from{opacity:0;transform:translateY(calc(70*var(--s)))}to{opacity:1;transform:none}}
.attract-sub{margin-top:calc(30*var(--s));font-size:calc(23*var(--s));line-height:1.55;color:var(--text-dim);
  max-width:calc(760*var(--s));animation:stgIn 900ms var(--e-out) both .5s}
.attract-strip{display:flex;align-items:center;gap:calc(14*var(--s));margin-top:calc(40*var(--s));
  font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.28em;color:var(--text-faint);
  animation:stgIn 900ms var(--e-out) both .66s}
.attract-strip b{width:calc(3*var(--s));height:calc(3*var(--s));background:var(--g1);opacity:.6;border-radius:calc(1*var(--s))}
.touch-cta{position:relative;margin-top:calc(62*var(--s));
  font-family:var(--mono);font-size:calc(13*var(--s));letter-spacing:.3em;font-weight:600;color:var(--text-bright);
  padding:calc(19*var(--s)) calc(42*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border-bright);background:rgba(52,177,125,.08);
  animation:stgIn 900ms var(--e-out) both .82s;overflow:hidden}
.touch-ring{position:absolute;inset:calc(-2*var(--s));border-radius:var(--r-sm);
  border:calc(1.5*var(--s)) solid var(--g1);opacity:0;animation:ringPulse 3s var(--e-out) infinite 1.4s}
@keyframes ringPulse{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.09)}}
.touch-cta:active{transform:scale(.97);background:rgba(52,177,125,.2)}

/* ============================== HOME ============================== */
.screen-home{gap:calc(22*var(--s))}
.home-head{display:flex;flex-direction:column;gap:calc(10*var(--s));max-width:calc(1180*var(--s))}
.home-title{font-size:calc(58*var(--s));line-height:1.02;font-weight:700;letter-spacing:-.028em;color:var(--text-bright)}
.home-sub{font-size:calc(17.5*var(--s));line-height:1.5;color:var(--text-dim);max-width:calc(900*var(--s))}
.home-grid{flex:1;min-height:0;display:grid;gap:calc(18*var(--s));
  grid-template-columns:1fr 1fr minmax(calc(230*var(--s)),.58fr);
  grid-template-rows:1fr 1fr}
.card-deploy{grid-column:3;grid-row:1 / span 2}
.home-foot{display:flex;align-items:center;gap:calc(16*var(--s));
  font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.24em;color:var(--text-faint)}
.home-foot b{width:calc(3*var(--s));height:calc(3*var(--s));background:var(--g1);opacity:.55;border-radius:calc(1*var(--s))}

/* ---- cards ---- */
.card{position:relative;overflow:hidden;text-align:left;
  border-radius:var(--r-lg);border:calc(1*var(--s)) solid var(--border);
  background:linear-gradient(150deg,rgba(25,32,24,.92),rgba(13,21,16,.82) 58%,rgba(8,14,9,.9));
  display:flex;isolation:isolate;
  transition:transform 420ms var(--e-out),border-color 420ms var(--e-out),box-shadow 420ms var(--e-out);
  animation:cardIn 700ms var(--e-out) both;animation-delay:calc(var(--i)*70ms + 80ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(calc(34*var(--s))) scale(.975)}to{opacity:1;transform:none}}
.card::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;
  box-shadow:inset 0 calc(1*var(--s)) 0 rgba(240,247,243,.07)}
.card:active{transform:scale(.985);border-color:var(--border-bright)}
.card-glow{position:absolute;width:78%;aspect-ratio:1;right:-16%;bottom:-28%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(52,177,125,.22),rgba(52,177,125,.1) 42%,rgba(52,177,125,.03) 68%,rgba(52,177,125,0) 84%);
  filter:blur(calc(16*var(--s)));opacity:.75;transition:opacity 500ms var(--e-out)}
.card:active .card-glow{opacity:1}
.card-bracket{position:absolute;inset:calc(14*var(--s));z-index:3;pointer-events:none;
  background:
    linear-gradient(var(--g1),var(--g1)) left top/calc(26*var(--s)) calc(1.5*var(--s)) no-repeat,
    linear-gradient(var(--g1),var(--g1)) left top/calc(1.5*var(--s)) calc(26*var(--s)) no-repeat,
    linear-gradient(var(--g1),var(--g1)) right bottom/calc(26*var(--s)) calc(1.5*var(--s)) no-repeat,
    linear-gradient(var(--g1),var(--g1)) right bottom/calc(1.5*var(--s)) calc(26*var(--s)) no-repeat;
  opacity:.34;transition:opacity 420ms var(--e-out),inset 420ms var(--e-out)}
.card:active .card-bracket{opacity:.9}

.card-fabric{padding:calc(30*var(--s)) calc(32*var(--s));align-items:center}
.card-body{position:relative;z-index:2;display:flex;flex-direction:column;gap:calc(9*var(--s));flex:1;min-width:0}
.card-tag{font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.28em;color:var(--text-faint)}
.card-tag b{color:var(--g1);font-weight:700}
.card-title{font-size:calc(40*var(--s));line-height:1.02;font-weight:700;letter-spacing:-.028em;color:var(--text-bright);margin-top:calc(2*var(--s))}
.card-role{font-size:calc(15.5*var(--s));line-height:1.42;color:var(--g1);max-width:calc(330*var(--s));font-weight:500}
.card-plain{font-size:calc(14.5*var(--s));line-height:1.5;color:var(--text-dim);max-width:calc(330*var(--s))}
.card-cta{margin-top:auto;display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:calc(11*var(--s));letter-spacing:.24em;color:var(--text-bright);
  padding-top:calc(14*var(--s));border-top:calc(1*var(--s)) solid var(--border);width:fit-content;min-width:calc(150*var(--s))}
.card-cta .caret{margin-left:auto;padding-left:calc(18*var(--s));color:var(--g1)}
.card:active .card-cta .caret{transform:translateX(calc(5*var(--s)))}

.card-art{position:relative;z-index:1;flex:0 0 auto;width:44%;aspect-ratio:1;display:grid;place-items:center}
.card-art img{width:118%;height:118%;object-fit:contain;
  filter:drop-shadow(0 calc(26*var(--s)) calc(44*var(--s)) rgba(0,0,0,.6));
  animation:float 9s var(--e-std) infinite;transition:transform 620ms var(--e-out)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-9*var(--s)))}}
.card:active .card-art img{transform:scale(1.04)}
.card-sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(104deg,transparent 34%,rgba(150,192,145,.13) 47%,rgba(240,247,243,.05) 51%,transparent 64%);
  background-size:260% 100%;animation:sheen 7.5s var(--e-std) infinite}
@keyframes sheen{0%,62%{background-position:170% 0}100%{background-position:-70% 0}}

/* ---- tall deployment card ---- */
.card-deploy{flex-direction:column;padding:calc(26*var(--s))}
.card-art-tall{width:100%;flex:1 1 auto;min-height:0;aspect-ratio:auto}
.card-art-tall img{width:100%;height:100%;object-fit:contain;animation-duration:11s}
.rack-scan{position:absolute;left:12%;right:12%;height:calc(2*var(--s));z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(52,177,125,.75),transparent);
  filter:blur(calc(1*var(--s)));animation:scan 5.4s var(--e-std) infinite}
@keyframes scan{0%{top:12%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:86%;opacity:0}}
.card-deploy .card-body{flex:0 0 auto;gap:calc(8*var(--s))}
.card-deploy .card-title{font-size:calc(33*var(--s))}
.card-deploy .card-role{font-size:calc(13.5*var(--s));color:var(--text-dim);max-width:none}
.card-deploy .card-cta{margin-top:calc(16*var(--s));min-width:0;width:100%}

/* ============================== FABRIC DETAIL ============================== */
.screen-fabric{flex-direction:row;gap:calc(34*var(--s))}
.fab-rail{flex:0 0 calc(430*var(--s));display:flex;flex-direction:column;gap:calc(12*var(--s));min-height:0;padding-top:calc(6*var(--s))}
.fab-title{font-size:calc(62*var(--s));line-height:.98;font-weight:700;letter-spacing:-.03em;color:var(--text-bright)}
.fab-sub{font-size:calc(17*var(--s));line-height:1.42;color:var(--g1);font-weight:500}
.fab-plain{font-size:calc(15*var(--s));line-height:1.6;color:var(--text-dim);padding-bottom:calc(4*var(--s))}
.fab-caps{display:flex;flex-direction:column;gap:calc(7*var(--s));flex:1;min-height:0;overflow:hidden}
.cap{border:calc(1*var(--s)) solid var(--border);border-radius:var(--r-sm);
  background:rgba(25,32,24,.55);overflow:hidden;
  transition:border-color 340ms var(--e-out),background 340ms var(--e-out);
  animation:stgIn 560ms var(--e-out) both;animation-delay:calc(var(--i)*46ms + 140ms)}
.cap-btn{width:100%;display:flex;align-items:center;gap:calc(12*var(--s));
  padding:calc(11*var(--s)) calc(14*var(--s));text-align:left}
.cap-n{font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.16em;color:var(--g1);
  border:calc(1*var(--s)) solid var(--border-mid);border-radius:var(--r-xs);
  padding:calc(3*var(--s)) calc(6*var(--s));flex:0 0 auto}
.cap-t{font-size:calc(14.5*var(--s));font-weight:600;color:var(--text-bright);line-height:1.25;flex:1}
.cap-x{font-family:var(--mono);font-size:calc(15*var(--s));color:var(--text-faint);transition:transform 340ms var(--e-out)}
.cap.is-open{border-color:var(--border-bright);background:rgba(52,177,125,.07)}
.cap.is-open .cap-x{transform:rotate(45deg);color:var(--g1)}
.cap-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows 380ms var(--e-out)}
.cap.is-open .cap-d{grid-template-rows:1fr}
.cap-d>div{overflow:hidden}
.cap-d p{font-size:calc(13*var(--s));line-height:1.62;color:var(--text-dim);padding:0 calc(14*var(--s)) calc(13*var(--s)) calc(50*var(--s))}

.fab-stage{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(14*var(--s))}
.stage-head{display:flex;justify-content:flex-end}
.seg{position:relative;display:inline-flex;padding:calc(4*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border);background:rgba(8,14,9,.6)}
.seg-btn{position:relative;z-index:2;display:inline-flex;align-items:center;gap:calc(8*var(--s));
  font-family:var(--mono);font-size:calc(11*var(--s));letter-spacing:.22em;font-weight:600;
  padding:calc(10*var(--s)) calc(22*var(--s));border-radius:var(--r-xs);
  color:var(--text-faint);transition:color 320ms var(--e-out)}
.seg-btn.is-on{color:var(--bg-deep)}
.seg-thumb{position:absolute;z-index:1;top:calc(4*var(--s));bottom:calc(4*var(--s));
  border-radius:var(--r-xs);background:var(--g1);
  transition:left 420ms var(--e-out),width 420ms var(--e-out)}
.live-dot{width:calc(5*var(--s));height:calc(5*var(--s));border-radius:calc(1.5*var(--s));background:var(--coral);
  animation:blip 1.6s var(--e-std) infinite}
.seg-btn.is-on .live-dot{background:var(--bg-deep)}

.stage-panels{position:relative;flex:1;min-height:0}
.stage-panel{position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transform:scale(.985);
  transition:opacity 380ms var(--e-out),transform 380ms var(--e-out)}
.stage-panel.is-on{opacity:1;pointer-events:auto;transform:none}

/* ---- architecture panel ---- */
.arch-art{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.arch-art img{position:relative;z-index:2;width:auto;height:86%;max-width:74%;object-fit:contain;
  filter:drop-shadow(0 calc(40*var(--s)) calc(70*var(--s)) rgba(0,0,0,.66));
  animation:float 11s var(--e-std) infinite}
.arch-halo{position:absolute;z-index:0;width:74%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(52,177,125,.22),rgba(52,177,125,.1) 40%,rgba(52,177,125,.03) 66%,rgba(52,177,125,0) 84%);
  filter:blur(calc(22*var(--s)));animation:breathe 7s var(--e-std) infinite}
@keyframes breathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.arch-plinth{position:absolute;z-index:1;bottom:6%;width:52%;height:calc(1.5*var(--s));
  background:linear-gradient(90deg,transparent,rgba(52,177,125,.6),transparent)}
.arch-pins{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible}
.arch-pins .pin-line{stroke:var(--g1);stroke-width:1.2;fill:none;opacity:.55;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:drawLine 700ms var(--e-out) both;animation-delay:calc(var(--pd)*1ms)}
@keyframes drawLine{to{stroke-dashoffset:0}}
.arch-pins .pin-dot{fill:var(--g1);animation:stgIn 400ms var(--e-out) both;animation-delay:calc(var(--pd)*1ms + 500ms)}
.arch-pins .pin-box{fill:rgba(8,14,9,.86);stroke:rgba(52,177,125,.4);stroke-width:1;
  animation:stgIn 460ms var(--e-out) both;animation-delay:calc(var(--pd)*1ms + 420ms)}
.arch-pins .pin-t{fill:#F0F7F3;font-family:'Satoshi',sans-serif;font-size:15px;font-weight:600;
  animation:stgIn 460ms var(--e-out) both;animation-delay:calc(var(--pd)*1ms + 480ms)}
.arch-pins .pin-s{fill:rgba(220,235,228,.62);font-family:'SF Mono',monospace;font-size:11px;letter-spacing:1.6px;
  animation:stgIn 460ms var(--e-out) both;animation-delay:calc(var(--pd)*1ms + 540ms)}

/* ---- console panel ---- */
.console{flex:1;min-height:0;border-radius:var(--r-md);overflow:hidden;
  border:calc(1*var(--s)) solid var(--border-mid);background:rgba(8,14,9,.76);
  display:flex;flex-direction:column}
.console-caption{flex:0 0 auto;padding-top:calc(12*var(--s));display:flex;align-items:center;gap:calc(16*var(--s))}
.console-caption p{font-size:calc(14*var(--s));line-height:1.45;color:var(--text-dim);flex:1}
.console-steps{display:flex;gap:calc(5*var(--s));flex:0 0 auto}
.console-steps i{display:block;width:calc(30*var(--s));height:calc(3*var(--s));border-radius:calc(1*var(--s));
  background:rgba(240,247,243,.14);overflow:hidden;position:relative}
.console-steps i.done::after,.console-steps i.now::after{content:"";position:absolute;inset:0;background:var(--g1);
  transform-origin:left;transform:scaleX(1)}
.console-steps i.now::after{animation:stepFill var(--dur,3000ms) linear both}
@keyframes stepFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* console interior primitives */
.cs-bar{flex:0 0 auto;display:flex;align-items:center;gap:calc(10*var(--s));
  padding:calc(11*var(--s)) calc(16*var(--s));border-bottom:calc(1*var(--s)) solid var(--border);
  background:rgba(25,32,24,.6)}
.cs-dots{display:flex;gap:calc(5*var(--s))}
.cs-dots i{width:calc(7*var(--s));height:calc(7*var(--s));border-radius:calc(2*var(--s));background:rgba(240,247,243,.18)}
.cs-path{font-family:var(--mono);font-size:calc(11*var(--s));color:var(--text-faint);letter-spacing:.08em}
.cs-badge{margin-left:auto;font-family:var(--mono);font-size:calc(10*var(--s));letter-spacing:.2em;color:var(--g1);
  border:calc(1*var(--s)) solid var(--border-mid);border-radius:var(--r-xs);padding:calc(4*var(--s)) calc(8*var(--s))}
.cs-body{flex:1;min-height:0;padding:calc(18*var(--s));display:flex;flex-direction:column;gap:calc(14*var(--s));overflow:hidden}

/* generic console atoms */
.k-row{display:flex;gap:calc(10*var(--s));align-items:stretch}
.k-panel{border:calc(1*var(--s)) solid var(--border);border-radius:var(--r-sm);background:rgba(25,32,24,.5);
  padding:calc(13*var(--s));display:flex;flex-direction:column;gap:calc(9*var(--s));min-width:0}
.k-h{font-family:var(--mono);font-size:calc(10*var(--s));letter-spacing:.22em;color:var(--text-faint)}
.k-v{font-size:calc(26*var(--s));font-weight:900;color:var(--text-bright);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.k-v.accent{color:var(--g1)}
.k-sm{font-size:calc(12.5*var(--s));line-height:1.45;color:var(--text-dim)}
.k-chip{display:inline-flex;align-items:center;gap:calc(6*var(--s));font-family:var(--mono);font-size:calc(10*var(--s));
  letter-spacing:.14em;padding:calc(5*var(--s)) calc(8*var(--s));border-radius:var(--r-xs);
  border:calc(1*var(--s)) solid var(--border);color:var(--text-dim);background:rgba(8,14,9,.5);
  transition:all 320ms var(--e-out)}
.k-chip.on{border-color:var(--border-bright);color:var(--g1);background:rgba(52,177,125,.12)}
.k-chip.warn{border-color:rgba(242,178,49,.45);color:var(--amber);background:rgba(242,178,49,.08)}
.k-chip.bad{border-color:rgba(240,107,107,.45);color:var(--coral);background:rgba(240,107,107,.08)}

/* ============================== DEPLOYMENT ============================== */
.screen-deploy{gap:calc(20*var(--s))}
.dep-head{display:flex;flex-direction:column;gap:calc(9*var(--s));max-width:calc(1150*var(--s))}
.dep-title{font-size:calc(54*var(--s));line-height:1.02;font-weight:700;letter-spacing:-.028em;color:var(--text-bright)}
.dep-sub{font-size:calc(16.5*var(--s));line-height:1.5;color:var(--text-dim);max-width:calc(880*var(--s))}
.dep-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);gap:calc(16*var(--s))}
.dcard{position:relative;overflow:hidden;text-align:left;display:flex;flex-direction:column;
  border-radius:var(--r-lg);border:calc(1*var(--s)) solid var(--border);
  background:linear-gradient(160deg,rgba(25,32,24,.9),rgba(13,21,16,.8) 60%,rgba(8,14,9,.9));
  padding:calc(22*var(--s));gap:calc(10*var(--s));
  animation:cardIn 660ms var(--e-out) both;animation-delay:calc(var(--i)*80ms + 90ms);
  transition:transform 420ms var(--e-out),border-color 420ms var(--e-out)}
.dcard:active{transform:scale(.985);border-color:var(--border-bright)}
.dcard-art{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center}
.dcard-art img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 calc(22*var(--s)) calc(38*var(--s)) rgba(0,0,0,.6));animation:float 10s var(--e-std) infinite}
.dcard-art img{animation-delay:calc(var(--i)*-2.2s)}
.dcard-tag{font-family:var(--mono);font-size:calc(10*var(--s));letter-spacing:.26em;color:var(--text-faint)}
.dcard-title{font-size:calc(25*var(--s));line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--text-bright)}
.dcard-desc{font-size:calc(13.5*var(--s));line-height:1.5;color:var(--text-dim)}
.dcard-best{font-size:calc(12*var(--s));line-height:1.45;color:var(--text-faint);
  padding-top:calc(10*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.dcard-best b{color:var(--text-dim);font-weight:600}
.dcard-time{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8*var(--s))}
.dcard-time strong{font-size:calc(19*var(--s));font-weight:900;color:var(--g1);letter-spacing:-.01em}
.dcard-stack{display:flex;flex-wrap:wrap;gap:calc(4*var(--s))}
.dep-foot{font-size:calc(11*var(--s));line-height:1.5;color:var(--text-faint);max-width:calc(1400*var(--s))}

/* ============================== TALK ============================== */
.screen-talk{align-items:center;justify-content:center}
.talk-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(10*var(--s));
  width:100%;max-width:calc(1180*var(--s))}
.talk-title{font-size:calc(112*var(--s));line-height:1;font-weight:900;letter-spacing:-.04em;color:var(--text-bright);
  margin-top:calc(10*var(--s))}
.talk-sub{font-size:calc(19*var(--s));line-height:1.5;color:var(--text-dim);margin-bottom:calc(26*var(--s))}
.talk-body{display:flex;align-items:stretch;gap:calc(34*var(--s));width:100%;justify-content:center}
.qr-card{display:flex;flex-direction:column;align-items:center;gap:calc(14*var(--s));
  padding:calc(22*var(--s));border-radius:var(--r-lg);
  border:calc(1*var(--s)) solid var(--border-mid);background:rgba(25,32,24,.5)}
.qr-frame{background:#FFFFFF;border-radius:var(--r-sm);padding:calc(14*var(--s));
  width:calc(236*var(--s));height:calc(236*var(--s));display:grid;place-items:center}
.qr-frame img{width:100%;height:100%;image-rendering:pixelated}
.qr-url{font-family:var(--mono);font-size:calc(12.5*var(--s));letter-spacing:.1em;color:var(--g1)}
.talk-side{flex:0 1 calc(520*var(--s));display:flex;flex-direction:column;gap:calc(12*var(--s));text-align:left}
.talk-rows{display:flex;flex-direction:column;gap:calc(10*var(--s));flex:1}
.talk-row{display:flex;flex-direction:column;gap:calc(4*var(--s));
  padding:calc(14*var(--s)) calc(18*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border);background:rgba(25,32,24,.4)}
.talk-row strong{font-size:calc(17*var(--s));font-weight:600;color:var(--text-bright)}
.btn-about{display:flex;align-items:center;gap:calc(16*var(--s));text-align:left;
  padding:calc(18*var(--s)) calc(20*var(--s));border-radius:var(--r-md);
  border:calc(1*var(--s)) solid var(--border-bright);
  background:linear-gradient(120deg,rgba(52,177,125,.16),rgba(52,177,125,.05));
  transition:transform var(--t-micro) var(--e-out),background var(--t-std)}
.btn-about:active{transform:scale(.98);background:rgba(52,177,125,.26)}
.about-ic{display:flex;flex-direction:column;gap:calc(3*var(--s));flex:0 0 auto}
.about-ic i{display:block;height:calc(3*var(--s));border-radius:calc(1*var(--s));background:var(--g1)}
.about-ic i:nth-child(1){width:calc(26*var(--s))}
.about-ic i:nth-child(2){width:calc(18*var(--s));opacity:.7}
.about-ic i:nth-child(3){width:calc(22*var(--s));opacity:.45}
.about-tx{flex:1;display:flex;flex-direction:column;gap:calc(3*var(--s))}
.about-tx strong{font-size:calc(19*var(--s));font-weight:700;color:var(--text-bright);letter-spacing:-.01em}
.about-tx small{font-size:calc(13*var(--s));color:var(--text-dim)}
.btn-about .caret{color:var(--g1);font-size:calc(20*var(--s))}

/* ============================== ABOUT ============================== */
.screen-about{padding:calc(94*var(--s)) 0 0;flex-direction:row}
.about-rail{position:absolute;left:calc(40*var(--s));top:calc(110*var(--s));bottom:calc(34*var(--s));
  width:calc(2*var(--s));background:rgba(240,247,243,.08);border-radius:calc(1*var(--s));z-index:5}
.about-progress{position:absolute;left:0;top:0;width:100%;height:0;background:var(--g1);border-radius:calc(1*var(--s))}
.about-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:none}
.about-scroll::-webkit-scrollbar{display:none}
.about-doc{max-width:calc(1480*var(--s));margin:0 auto;padding:0 calc(64*var(--s)) calc(90*var(--s));
  display:flex;flex-direction:column;gap:calc(46*var(--s))}
.ab-sec{display:flex;flex-direction:column;gap:calc(14*var(--s));
  opacity:0;transform:translateY(calc(26*var(--s)));transition:opacity 620ms var(--e-out),transform 620ms var(--e-out)}
.ab-sec.seen{opacity:1;transform:none}
.ab-h{font-size:calc(38*var(--s));line-height:1.06;font-weight:700;letter-spacing:-.025em;color:var(--text-bright)}
.ab-hero-h{font-size:calc(76*var(--s));line-height:.98;font-weight:900;letter-spacing:-.035em;color:var(--text-bright)}
.ab-lead{font-size:calc(19*var(--s));line-height:1.6;color:var(--text-mid);max-width:calc(1050*var(--s))}
.ab-p{font-size:calc(15.5*var(--s));line-height:1.68;color:var(--text-dim);max-width:calc(1000*var(--s))}
.ab-rule{height:calc(1*var(--s));background:var(--border);width:100%}
.ab-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(12*var(--s))}
.ab-stat{padding:calc(20*var(--s));border-radius:var(--r-md);border:calc(1*var(--s)) solid var(--border);
  background:rgba(25,32,24,.5);display:flex;flex-direction:column;gap:calc(6*var(--s))}
.ab-stat b{font-size:calc(38*var(--s));font-weight:900;color:var(--g1);letter-spacing:-.03em;line-height:1}
.ab-stat span{font-size:calc(12.5*var(--s));line-height:1.4;color:var(--text-dim)}
.ab-badges{display:flex;flex-wrap:wrap;gap:calc(8*var(--s))}
.ab-badge{font-family:var(--mono);font-size:calc(11*var(--s));letter-spacing:.18em;color:var(--g1);
  border:calc(1*var(--s)) solid var(--border-mid);border-radius:var(--r-xs);
  padding:calc(8*var(--s)) calc(12*var(--s));background:rgba(52,177,125,.06)}
.ab-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(14*var(--s))}
.ab-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(14*var(--s))}
.ab-card{padding:calc(20*var(--s));border-radius:var(--r-md);border:calc(1*var(--s)) solid var(--border);
  background:rgba(25,32,24,.45);display:flex;flex-direction:column;gap:calc(8*var(--s))}
.ab-card .mini{color:var(--g1);opacity:.9}
.ab-card h4{font-size:calc(19*var(--s));font-weight:700;color:var(--text-bright);line-height:1.2;letter-spacing:-.015em}
.ab-card p{font-size:calc(13.5*var(--s));line-height:1.58;color:var(--text-dim)}
.ab-card .big{font-size:calc(30*var(--s));font-weight:900;color:var(--g1);letter-spacing:-.02em;line-height:1}
.ab-layers{display:flex;flex-direction:column;gap:calc(8*var(--s))}
.ab-layer{display:flex;align-items:center;gap:calc(16*var(--s));padding:calc(15*var(--s)) calc(18*var(--s));
  border-radius:var(--r-sm);border:calc(1*var(--s)) solid var(--border);background:rgba(25,32,24,.45)}
.ab-layer .ln{font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.2em;color:var(--g1);
  flex:0 0 calc(126*var(--s))}
.ab-layer strong{font-size:calc(17*var(--s));font-weight:700;color:var(--text-bright);flex:0 0 calc(188*var(--s))}
.ab-layer span{font-size:calc(13.5*var(--s));line-height:1.5;color:var(--text-dim);flex:1}
.ab-layer.wrap-all{border-color:var(--border-bright);background:rgba(52,177,125,.07)}
.ab-people{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(12*var(--s))}
.ab-person{padding:calc(18*var(--s));border-radius:var(--r-md);border:calc(1*var(--s)) solid var(--border);
  background:rgba(25,32,24,.45);display:flex;flex-direction:column;gap:calc(8*var(--s))}
.ab-person .pn{font-size:calc(17*var(--s));font-weight:700;color:var(--text-bright);line-height:1.2}
.ab-person .pr{font-family:var(--mono);font-size:calc(10*var(--s));letter-spacing:.18em;color:var(--g1)}
.ab-person ul{list-style:none;display:flex;flex-direction:column;gap:calc(5*var(--s));margin-top:calc(4*var(--s))}
.ab-person li{font-size:calc(12*var(--s));line-height:1.45;color:var(--text-dim);padding-left:calc(11*var(--s));position:relative}
.ab-person li::before{content:"";position:absolute;left:0;top:calc(7*var(--s));
  width:calc(3*var(--s));height:calc(3*var(--s));background:var(--g1);opacity:.7;border-radius:calc(1*var(--s))}
.ab-sectors{display:flex;flex-wrap:wrap;gap:calc(7*var(--s))}
.ab-sector{font-size:calc(13*var(--s));color:var(--text-mid);padding:calc(9*var(--s)) calc(14*var(--s));
  border-radius:var(--r-xs);border:calc(1*var(--s)) solid var(--border);background:rgba(25,32,24,.45)}
.ab-foot{display:flex;align-items:center;gap:calc(18*var(--s));padding-top:calc(22*var(--s));
  border-top:calc(1*var(--s)) solid var(--border)}
.ab-foot img{width:calc(150*var(--s))}
.ab-foot span{font-family:var(--mono);font-size:calc(11.5*var(--s));letter-spacing:.2em;color:var(--text-faint)}
.ab-end{margin-left:auto;font-family:var(--mono);font-size:calc(11.5*var(--s));letter-spacing:.2em;color:var(--g1)}
.about-hint{position:absolute;left:50%;bottom:calc(20*var(--s));transform:translateX(-50%);z-index:6;
  font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.26em;color:var(--text-faint);
  display:flex;align-items:center;gap:calc(8*var(--s));transition:opacity 400ms var(--e-out);pointer-events:none}
.about-hint i{display:block;width:calc(2*var(--s));height:calc(14*var(--s));background:var(--g1);border-radius:calc(1*var(--s));
  animation:hintDrop 1.8s var(--e-std) infinite}
@keyframes hintDrop{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(calc(5*var(--s)));opacity:1}}

/* ============================== FLIP + OVERLAY ============================== */
.flip-layer{position:fixed;inset:0;z-index:80;pointer-events:none}
.flip-ghost{position:fixed;object-fit:contain;will-change:transform;z-index:81;pointer-events:none;
  filter:drop-shadow(0 calc(40*var(--s)) calc(70*var(--s)) rgba(0,0,0,.66))}

.idle-veil{position:fixed;inset:0;z-index:70;background:var(--bg-deep);opacity:0;pointer-events:none;
  transition:opacity 520ms var(--e-std)}
.idle-veil.on{opacity:1}

.staff-reset{position:fixed;right:calc(14*var(--s));bottom:calc(10*var(--s));z-index:90;
  font-family:var(--mono);font-size:calc(9*var(--s));letter-spacing:.2em;color:rgba(212,228,220,.16);
  padding:calc(6*var(--s)) calc(9*var(--s));border-radius:var(--r-xs);border:calc(1*var(--s)) solid rgba(212,228,220,.08)}
.staff-reset:active{color:var(--g1);border-color:var(--border-mid)}
html[data-screen="attract"] .staff-reset{display:none}

/* ---- touch ripple ---- */
.ripple{position:fixed;z-index:95;pointer-events:none;width:calc(12*var(--s));height:calc(12*var(--s));
  margin:calc(-6*var(--s)) 0 0 calc(-6*var(--s));border-radius:var(--r-xs);
  border:calc(1.5*var(--s)) solid var(--g1);animation:rip 620ms var(--e-out) forwards}
@keyframes rip{from{opacity:.7;transform:scale(1) rotate(0deg)}to{opacity:0;transform:scale(9) rotate(45deg)}}

/* ============================== SAFETY ============================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* very wide screens: keep a measure, do not stretch */
@media (min-aspect-ratio:2/1){
  .home-grid,.dep-grid{max-width:calc(2100*var(--s));width:100%;margin:0 auto}
  .screen{padding-left:calc(56*var(--s));padding-right:calc(56*var(--s))}
}
/* portrait guard: the kiosk is landscape, tell staff */
@media (max-aspect-ratio:1/1){
  body::after{content:"ROTATE THE DISPLAY TO LANDSCAPE";position:fixed;inset:0;z-index:999;
    display:grid;place-items:center;background:var(--bg-deep);color:var(--g1);
    font-family:var(--mono);font-size:calc(22*var(--s));letter-spacing:.3em;text-align:center;padding:10vw}
}

/* ============================================================
   CONSOLE INTERIORS
   ============================================================ */

/* ---------- ENGINE ---------- */
.eg-pol{display:flex;gap:calc(6*var(--s));flex-wrap:wrap}
.eg-main{flex:1;min-height:0;display:grid;grid-template-columns:1fr calc(210*var(--s));gap:calc(12*var(--s))}
.eg-nodes{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:calc(10*var(--s))}
.eg-node{border:calc(1*var(--s)) solid var(--border);border-radius:var(--r-sm);background:rgba(25,32,24,.45);
  padding:calc(12*var(--s));display:flex;flex-direction:column;gap:calc(10*var(--s))}
.eg-nh{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8*var(--s));
  font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.14em;color:var(--text-dim)}
.eg-nh b{color:var(--text-faint);font-weight:400;font-size:calc(9.5*var(--s))}
.eg-cells{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:calc(6*var(--s))}
.eg-cells i{display:block;border-radius:var(--r-xs);border:calc(1*var(--s)) solid rgba(240,247,243,.09);
  background:rgba(240,247,243,.03);position:relative;overflow:hidden;
  transition:background 480ms var(--e-out),border-color 480ms var(--e-out),box-shadow 480ms var(--e-out)}
.eg-cells i.on{background:color-mix(in srgb,var(--c) 34%,transparent);border-color:var(--c);
  box-shadow:inset 0 0 calc(14*var(--s)) color-mix(in srgb,var(--c) 26%,transparent)}
.eg-cells i.on::after{content:"";position:absolute;left:calc(4*var(--s));right:calc(4*var(--s));bottom:calc(4*var(--s));
  height:calc(2*var(--s));background:var(--c);border-radius:calc(1*var(--s));opacity:.9}
.eg-cells i.mig{background:repeating-linear-gradient(90deg,
  color-mix(in srgb,var(--c) 40%,transparent) 0 calc(6*var(--s)),
  rgba(8,14,9,.7) calc(6*var(--s)) calc(9*var(--s)))}
.eg-side{display:flex;flex-direction:column;gap:calc(10*var(--s))}
.eg-side .k-panel{flex:0 0 auto}
.eg-bar{height:calc(5*var(--s));border-radius:calc(2*var(--s));background:rgba(240,247,243,.1);overflow:hidden}
.eg-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g2),var(--g1));
  border-radius:calc(2*var(--s));transition:width 900ms var(--e-out)}
.eg-ten{flex:1 !important;gap:calc(7*var(--s)) !important}
.eg-tr{display:flex;align-items:center;gap:calc(8*var(--s));font-size:calc(12.5*var(--s));color:var(--text-dim)}
.eg-tr i{width:calc(9*var(--s));height:calc(9*var(--s));border-radius:calc(2*var(--s));flex:0 0 auto}
.eg-tr b{margin-left:auto;font-family:var(--mono);font-size:calc(12*var(--s));color:var(--text-bright);
  font-variant-numeric:tabular-nums}

/* ---------- AGENT ---------- */
.ag-main{flex:1;min-height:0;display:grid;grid-template-columns:calc(240*var(--s)) 1fr;gap:calc(14*var(--s))}
.ag-trace{display:flex;flex-direction:column;gap:calc(4*var(--s));
  border-right:calc(1*var(--s)) solid var(--border);padding-right:calc(14*var(--s))}
.ag-step{display:flex;align-items:center;gap:calc(10*var(--s));padding:calc(9*var(--s)) calc(10*var(--s));
  border-radius:var(--r-xs);font-size:calc(13.5*var(--s));color:var(--text-faint);
  transition:background 340ms var(--e-out),color 340ms var(--e-out)}
.ag-step i{width:calc(7*var(--s));height:calc(7*var(--s));border-radius:calc(2*var(--s));
  background:rgba(240,247,243,.2);flex:0 0 auto;transition:background 340ms var(--e-out),box-shadow 340ms}
.ag-step span{flex:1}
.ag-step b{font-family:var(--mono);font-size:calc(9*var(--s));letter-spacing:.16em;color:var(--g1)}
.ag-step.done{color:var(--text-dim)}
.ag-step.done i{background:var(--g1);opacity:.55}
.ag-step.now{background:rgba(52,177,125,.1);color:var(--text-bright)}
.ag-step.now i{background:var(--g1);box-shadow:0 0 0 calc(3*var(--s)) rgba(52,177,125,.18);animation:blip 1.4s var(--e-std) infinite}
.ag-meta{display:flex;flex-direction:column;gap:calc(2*var(--s));padding:calc(8*var(--s)) calc(10*var(--s));
  font-size:calc(12*var(--s));color:var(--text-dim)}
.ag-meta:first-of-type{margin-top:auto;border-top:calc(1*var(--s)) solid var(--border);padding-top:calc(12*var(--s))}
.ag-stage{min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:calc(10*var(--s))}
.ag-stage>div{display:flex;flex-direction:column;gap:calc(10*var(--s));min-height:0}
.ag-audit{flex:0 0 auto;display:flex;gap:calc(6*var(--s));flex-wrap:wrap;
  padding-top:calc(12*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.ag-type{font-size:calc(23*var(--s));line-height:1.4;color:var(--text-bright);font-weight:500;
  border-left:calc(2*var(--s)) solid var(--g1);padding-left:calc(16*var(--s));
  animation:stgIn 520ms var(--e-out) both}
.ag-pl{display:flex;align-items:center;gap:calc(10*var(--s));font-size:calc(14.5*var(--s));color:var(--text-mid);
  padding:calc(10*var(--s)) calc(12*var(--s));border-radius:var(--r-xs);background:rgba(25,32,24,.5);
  animation:stgIn 460ms var(--e-out) both;animation-delay:calc(var(--d)*1ms)}
.ag-pl i{width:calc(5*var(--s));height:calc(5*var(--s));border-radius:calc(1.5*var(--s));background:var(--g1);flex:0 0 auto}
.ag-tl{display:flex;align-items:center;gap:calc(12*var(--s));padding:calc(11*var(--s)) calc(13*var(--s));
  border-radius:var(--r-xs);border:calc(1*var(--s)) solid var(--border);background:rgba(8,14,9,.5);
  animation:stgIn 460ms var(--e-out) both;animation-delay:calc(var(--d)*1ms)}
.ag-tl b{font-family:var(--mono);font-size:calc(13*var(--s));color:var(--g1);flex:0 0 auto;font-weight:400}
.ag-tl span{font-size:calc(13*var(--s));color:var(--text-dim);flex:1}
.ag-tl em{font-family:var(--mono);font-size:calc(11*var(--s));color:var(--text-faint);font-style:normal}
.ag-dg{display:grid;grid-template-columns:1fr 1fr;gap:calc(9*var(--s))}
.ag-dc{position:relative;padding:calc(14*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border-mid);background:rgba(52,177,125,.06);
  display:flex;flex-direction:column;gap:calc(4*var(--s));
  animation:stgIn 460ms var(--e-out) both;animation-delay:calc(var(--d)*1ms)}
.ag-dc strong{font-size:calc(15*var(--s));color:var(--text-bright);font-weight:600}
.ag-dc span{font-size:calc(12.5*var(--s));color:var(--text-dim)}
.ag-dc i{position:absolute;right:calc(12*var(--s));top:calc(14*var(--s));
  width:calc(6*var(--s));height:calc(6*var(--s));border-radius:calc(2*var(--s));background:var(--g1);
  animation:blip 1.6s var(--e-std) infinite}
.ag-appr{padding:calc(20*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid rgba(242,178,49,.4);background:rgba(242,178,49,.07);
  animation:stgIn 480ms var(--e-out) both}
.ag-appr p{font-size:calc(19*var(--s));line-height:1.45;color:var(--text-bright)}
.ag-ab{display:flex;gap:calc(8*var(--s));margin-top:calc(4*var(--s))}
.ag-note{font-family:var(--mono);font-size:calc(11*var(--s));color:var(--text-faint);letter-spacing:.08em}
.ag-res{display:flex;align-items:baseline;gap:calc(14*var(--s));padding:calc(12*var(--s)) calc(14*var(--s));
  border-radius:var(--r-xs);background:rgba(25,32,24,.55);animation:stgIn 460ms var(--e-out) both}
.ag-res b{font-size:calc(30*var(--s));font-weight:900;color:var(--g1);letter-spacing:-.02em;
  flex:0 0 calc(74*var(--s));font-variant-numeric:tabular-nums}
.ag-res span{font-size:calc(14.5*var(--s));color:var(--text-mid)}
.ag-src{font-size:calc(13*var(--s));line-height:1.5;color:var(--text-dim)}

/* ---------- RUNTIME ---------- */
.rt-main{flex:1;min-height:0;display:grid;grid-template-columns:calc(264*var(--s)) 1fr;gap:calc(14*var(--s))}
.rt-checks{display:flex;flex-direction:column;gap:calc(6*var(--s));
  border-right:calc(1*var(--s)) solid var(--border);padding-right:calc(14*var(--s))}
.rt-ck{display:flex;align-items:center;gap:calc(10*var(--s));font-size:calc(12.5*var(--s));
  color:var(--text-faint);line-height:1.3;transition:color 420ms var(--e-out)}
.rt-ck i{width:calc(13*var(--s));height:calc(13*var(--s));border-radius:calc(3*var(--s));flex:0 0 auto;
  border:calc(1*var(--s)) solid rgba(240,247,243,.18);position:relative;transition:all 420ms var(--e-out)}
.rt-ck.ok{color:var(--text-mid)}
.rt-ck.ok i{background:var(--g1);border-color:var(--g1)}
.rt-ck.ok i::after{content:"";position:absolute;left:calc(4*var(--s));top:calc(1.5*var(--s));
  width:calc(4*var(--s));height:calc(7*var(--s));border:solid var(--bg-deep);
  border-width:0 calc(2*var(--s)) calc(2*var(--s)) 0;transform:rotate(42deg)}
.rt-out{margin-top:auto;padding-top:calc(12*var(--s));border-top:calc(1*var(--s)) solid var(--border);
  display:flex;flex-direction:column;gap:calc(4*var(--s))}
.rt-out b{font-family:var(--mono);font-size:calc(19*var(--s));color:var(--g1);letter-spacing:.12em}
.rt-topo{min-width:0;display:grid;place-items:center}
.rt-topo svg{width:100%;height:100%}
.rt-plane>rect{fill:rgba(25,32,24,.4);stroke:rgba(52,177,125,.14);stroke-width:1}
.rt-lbl{fill:rgba(212,228,220,.42);font-family:'SF Mono',monospace;font-size:9px;letter-spacing:2px}
.rt-t{fill:#F0F7F3;font-family:'Satoshi',sans-serif;font-size:13px;font-weight:600;text-anchor:middle}
.rt-s{fill:rgba(212,228,220,.42);font-family:'SF Mono',monospace;font-size:7.5px;letter-spacing:1.2px;text-anchor:middle}
.rt-t2{fill:rgba(220,235,228,.55);font-family:'SF Mono',monospace;font-size:9.5px;letter-spacing:.6px;text-anchor:middle;
  transition:fill 480ms}
.rt-pod rect,.rt-ctl rect,.rt-node rect{fill:rgba(8,14,9,.6);stroke:rgba(240,247,243,.1);stroke-width:1;
  transition:fill 520ms var(--e-out),stroke 520ms var(--e-out)}
.rt-pod.on rect,.rt-ctl.on rect,.rt-node.on rect{fill:rgba(52,177,125,.1);stroke:rgba(52,177,125,.5)}
.rt-pod.on .rt-t2,.rt-ctl.on .rt-t2,.rt-node.on .rt-t2{fill:#F0F7F3}
.rt-gpu{fill:rgba(240,247,243,.08);transition:fill 520ms var(--e-out)}
.rt-gpu.on{fill:var(--g1)}
.rt-reg rect:first-of-type{fill:rgba(8,14,9,.7);stroke:rgba(52,177,125,.3);stroke-width:1}
.rt-reg.on rect:first-of-type{stroke:rgba(52,177,125,.6)}
.rt-regbar-t{fill:rgba(240,247,243,.1)}
.rt-regbar{fill:var(--g1);transition:width 2600ms var(--e-out)}
.rt-links path{stroke:rgba(52,177,125,.18);stroke-width:1.2;fill:none;
  stroke-dasharray:5 6;transition:stroke 600ms var(--e-out)}
.rt-links.on path{stroke:rgba(52,177,125,.7);animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}
.rt-deny{stroke:var(--coral);stroke-width:1.6;fill:none;stroke-dasharray:4 5;opacity:0;
  transition:opacity 420ms var(--e-out)}
.rt-deny.on{opacity:.9;animation:dash 1.1s linear infinite}
.rt-den-tag{opacity:0;transition:opacity 420ms var(--e-out)}
.rt-den-tag.on{opacity:1}
.rt-den-tag rect{fill:rgba(240,107,107,.14);stroke:var(--coral);stroke-width:1}
.rt-den-tag text{fill:var(--coral);font-family:'SF Mono',monospace;font-size:9px;letter-spacing:1.4px;text-anchor:middle}

/* ---------- SECURITY ---------- */
.sc-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(10*var(--s))}
.sc-stage{position:relative;padding:calc(13*var(--s)) calc(15*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border);background:rgba(25,32,24,.4);
  display:flex;flex-direction:column;gap:calc(3*var(--s));overflow:hidden;
  transition:border-color 420ms var(--e-out),background 420ms var(--e-out)}
.sc-stage .sc-n{font-family:var(--mono);font-size:calc(9.5*var(--s));letter-spacing:.2em;color:var(--text-faint)}
.sc-stage strong{font-size:calc(16*var(--s));font-weight:600;color:var(--text-dim);transition:color 420ms}
.sc-stage>span:last-of-type{font-size:calc(12*var(--s));color:var(--text-faint)}
.sc-stage i{position:absolute;left:0;bottom:0;height:calc(2*var(--s));width:0;background:var(--g1);
  transition:width 620ms var(--e-out)}
.sc-stage.on{border-color:var(--border-bright);background:rgba(52,177,125,.08)}
.sc-stage.on strong{color:var(--text-bright)}
.sc-stage.on i{width:100%}
.sc-main{flex:1;min-height:0;display:grid;grid-template-columns:1fr calc(230*var(--s));gap:calc(12*var(--s))}
.sc-stream{display:flex;flex-direction:column;gap:calc(9*var(--s));min-width:0}
.sc-rows{display:flex;flex-direction:column;gap:calc(7*var(--s))}
.sc-row{display:flex;align-items:center;gap:calc(12*var(--s));padding:calc(11*var(--s)) calc(13*var(--s));
  border-radius:var(--r-xs);border:calc(1*var(--s)) solid var(--border);background:rgba(8,14,9,.5);
  border-left-width:calc(3*var(--s));border-left-color:var(--g1);
  animation:stgIn 440ms var(--e-out) both;animation-delay:calc(var(--d)*1ms)}
.sc-row b{font-family:var(--mono);font-size:calc(12.5*var(--s));color:var(--text-bright);font-weight:400;
  flex:0 0 calc(190*var(--s));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-row span{font-size:calc(12.5*var(--s));color:var(--text-dim);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-row em{font-family:var(--mono);font-size:calc(10*var(--s));letter-spacing:.16em;font-style:normal;
  color:var(--g1);flex:0 0 auto}
.sc-row.warn{border-left-color:var(--amber)} .sc-row.warn em{color:var(--amber)}
.sc-row.bad{border-left-color:var(--coral);background:rgba(240,107,107,.06)} .sc-row.bad em{color:var(--coral)}
.sc-row.pend{border-left-color:rgba(240,247,243,.2)} .sc-row.pend em{color:var(--text-faint)}
.sc-side{display:flex;flex-direction:column;gap:calc(10*var(--s))}
.sc-meter{height:calc(5*var(--s));border-radius:calc(2*var(--s));background:rgba(240,247,243,.1);overflow:hidden}
.sc-meter i{display:block;height:100%;border-radius:calc(2*var(--s));background:var(--coral);
  transition:width 1000ms var(--e-out),background 800ms var(--e-out)}
.sc-meter i[data-lv="md"]{background:var(--amber)} .sc-meter i[data-lv="lo"]{background:var(--g1)}
[data-r="score"]{transition:color 800ms var(--e-out);color:var(--coral)}
[data-r="score"][data-lv="md"]{color:var(--amber)} [data-r="score"][data-lv="lo"]{color:var(--g1)}
.sc-kv{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8*var(--s));
  font-size:calc(12.5*var(--s));color:var(--text-dim)}
.sc-kv b{font-family:var(--mono);font-size:calc(13*var(--s));color:var(--text-bright);font-variant-numeric:tabular-nums}
.sc-kv b.bad{color:var(--coral)}
.sc-frames{display:flex;flex-wrap:wrap;gap:calc(5*var(--s))}
.sc-frames .k-chip{font-size:calc(9*var(--s));padding:calc(4*var(--s)) calc(6*var(--s))}

/* ============================================================
   REFINEMENTS  (override earlier rules)
   ============================================================ */

/* ---- cards: sheen sweeps the whole card, not the art box ---- */
.card-sheen{position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:screen;border-radius:var(--r-lg);
  background:linear-gradient(104deg,transparent 36%,rgba(150,192,145,.10) 47%,rgba(240,247,243,.04) 51%,transparent 62%);
  background-size:240% 100%;animation:sheen 8.5s var(--e-std) infinite}
.card-fabric{align-items:stretch}
.card-art{width:42%;aspect-ratio:auto;align-self:stretch}
.card-art img{width:100%;height:100%;scale:1.1}
.card-deploy .card-art-tall img{scale:1.04}

/* ---- fabric rail facts ---- */
.fab-facts{flex:0 0 auto;display:flex;gap:calc(8*var(--s));padding-top:calc(14*var(--s));
  border-top:calc(1*var(--s)) solid var(--border);margin-top:calc(4*var(--s))}
.fact{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(3*var(--s));
  animation:stgIn 560ms var(--e-out) both;animation-delay:calc(var(--i)*80ms + 420ms)}
.fact b{font-size:calc(21*var(--s));font-weight:900;color:var(--g1);letter-spacing:-.02em;line-height:1.05}
.fact span{font-size:calc(11*var(--s));line-height:1.35;color:var(--text-faint)}

/* ---- architecture panel ---- */
.arch-art img{height:92%;max-width:84%}
.arch-glance{flex:0 0 auto;display:flex;gap:calc(8*var(--s));justify-content:center;flex-wrap:wrap;
  padding-top:calc(10*var(--s))}
.arch-glance .gl{font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);border:calc(1*var(--s)) solid var(--border);border-radius:var(--r-xs);
  padding:calc(8*var(--s)) calc(13*var(--s));background:rgba(25,32,24,.45);
  animation:stgIn 520ms var(--e-out) both;animation-delay:calc(var(--i)*90ms + 900ms)}

/* ---- engine console: smaller accelerator cells, per node footer ---- */
.eg-cells{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr);align-content:center}
.eg-cells i{display:grid;place-items:center;max-height:calc(58*var(--s))}
.eg-cells i em{font-family:var(--mono);font-size:calc(10*var(--s));font-style:normal;letter-spacing:.06em;
  color:rgba(240,247,243,.26);transition:color 420ms var(--e-out)}
.eg-cells i.on em{color:rgba(8,14,9,.82);font-weight:700}
.eg-cells i.on::after{display:none}
.eg-nf{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--mono);font-size:calc(9.5*var(--s));letter-spacing:.18em;color:var(--text-faint);
  padding-top:calc(8*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.eg-nf b{color:var(--g1);font-weight:400;font-variant-numeric:tabular-nums}

/* ---- agent console: the run surface accumulates ---- */
.ag-stage{overflow-y:auto;scrollbar-width:none;padding-right:calc(4*var(--s))}
.ag-stage::-webkit-scrollbar{display:none}
.ag-stage>div+div{padding-top:calc(12*var(--s));border-top:calc(1*var(--s)) solid var(--border)}

/* ---- security console: verdict rows fill the stream ---- */
.sc-stream{flex:1;min-height:0}
.sc-rows{flex:1;min-height:0}
.sc-row{flex:1;min-height:0}

/* ---- deployment cards: equal art share so titles align ---- */
.dcard-art{flex:0 0 46%}

/* ---- fabric card: text group centred, CTA pinned ---- */
.card-tag{margin-top:auto}
.card-art img{scale:1.18}

/* ---- deployment card: the rack bleeds to the card edge, text on a scrim ---- */
.card-deploy{padding:0}
.card-art-tall{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.card-art-tall img{width:100%;height:100%;object-fit:cover;object-position:50% 36%;scale:1;
  animation:float 13s var(--e-std) infinite}
.card-art-tall::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,14,9,.55) 0%,rgba(8,14,9,0) 22%,rgba(8,14,9,0) 40%,
    rgba(8,14,9,.72) 62%,rgba(8,14,9,.94) 80%,rgba(8,14,9,.985) 100%)}
.card-deploy .card-body{position:relative;z-index:3;margin-top:auto;padding:calc(26*var(--s));flex:0 0 auto}
.card-deploy .card-tag{margin-top:0}
.card-deploy .card-glow{bottom:-34%;opacity:.55}

/* ---- engine console: fixed cell rows, centred node grid, event log ---- */
.eg-main{flex:1;min-height:0}
.eg-nodes{grid-template-rows:auto auto;align-content:center;gap:calc(12*var(--s))}
.eg-node{gap:calc(10*var(--s))}
.eg-cells{flex:0 0 auto;grid-template-rows:calc(50*var(--s)) calc(50*var(--s));align-content:center}
.eg-cells i{max-height:none}
.eg-log{flex:0 0 auto;display:flex;flex-direction:column;gap:calc(7*var(--s));
  padding-top:calc(12*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.eg-lines{display:flex;flex-direction:column;gap:calc(4*var(--s))}
.eg-line{display:flex;gap:calc(14*var(--s));font-family:var(--mono);font-size:calc(11.5*var(--s));
  color:var(--text-dim);animation:stgIn 420ms var(--e-out) both;animation-delay:calc(var(--d)*1ms)}
.eg-line em{font-style:normal;color:var(--text-faint);flex:0 0 calc(58*var(--s));font-variant-numeric:tabular-nums}
.eg-line span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-engine{justify-content:center}
.cs-engine .eg-main{flex:0 0 auto}
.eg-ten{flex:0 0 auto !important}
.ag-meta:first-of-type{margin-top:0;border-top:0;padding-top:calc(8*var(--s))}
.ag-step + .ag-meta{margin-top:auto;border-top:calc(1*var(--s)) solid var(--border);padding-top:calc(12*var(--s))}

/* ---- runtime console: scope svg fills to direct rects, add an audit log ---- */
.rt-pod>rect,.rt-ctl>rect,.rt-node>rect{fill:rgba(8,14,9,.6);stroke:rgba(240,247,243,.1);stroke-width:1;
  transition:fill 520ms var(--e-out),stroke 520ms var(--e-out)}
.rt-pod.on>rect,.rt-ctl.on>rect,.rt-node.on>rect{fill:rgba(52,177,125,.1);stroke:rgba(52,177,125,.5)}
.rt-gpu{fill:rgba(240,247,243,.08);stroke:none}
.rt-gpu.on{fill:var(--g1);stroke:none}
.rt-audit{margin-top:calc(16*var(--s));display:flex;flex-direction:column;gap:calc(7*var(--s));
  padding-top:calc(12*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.rt-alines{display:flex;flex-direction:column;gap:calc(5*var(--s))}
.rt-al{display:flex;gap:calc(10*var(--s));font-family:var(--mono);font-size:calc(10.5*var(--s));
  color:var(--text-dim);line-height:1.35;animation:stgIn 420ms var(--e-out) both;animation-delay:calc(var(--d)*1ms)}
.rt-al em{font-style:normal;color:var(--text-faint);flex:0 0 calc(34*var(--s));font-variant-numeric:tabular-nums}
.rt-al.warn span{color:var(--amber)} .rt-al.bad span{color:var(--coral)}

/* ---- security console: denser verdict stream ---- */
.sc-row{padding:calc(9*var(--s)) calc(13*var(--s));gap:calc(14*var(--s))}
.sc-row i{font-family:var(--mono);font-size:calc(10.5*var(--s));font-style:normal;color:var(--text-faint);
  flex:0 0 calc(56*var(--s));font-variant-numeric:tabular-nums}
.sc-row b{flex:0 0 calc(182*var(--s))}
.sc-side .k-panel{flex:0 0 auto}
.rt-lbl-e{text-anchor:end}
.rt-node>rect.rt-gpu,.rt-node.on>rect.rt-gpu{fill:rgba(240,247,243,.08);stroke:none}
.rt-node>rect.rt-gpu.on,.rt-node.on>rect.rt-gpu.on{fill:var(--g1);stroke:none}

/* ---- attract: let descenders breathe, sweep the strip ---- */
.attract-title{line-height:1.02;font-size:calc(148*var(--s))}
.attract-title .line{overflow:visible}
.attract-strip span{position:relative;transition:color 500ms var(--e-out)}
.attract-strip{overflow:hidden}
.attract-strip::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(220*var(--s));
  pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(52,177,125,.32),transparent);
  animation:stripSweep 6.5s var(--e-std) infinite 1.6s}
.attract-strip{position:relative}
@keyframes stripSweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(calc(100vw))}}

/* ============================================================
   DEPLOYMENT DETAIL
   ============================================================ */
.dcard{cursor:pointer}
.dcard-cta{display:inline-flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.24em;color:var(--text-bright);
  padding-top:calc(11*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.dcard-cta .caret{color:var(--g1)}
.dep-detail{position:absolute;inset:calc(94*var(--s)) calc(40*var(--s)) calc(28*var(--s));z-index:20;
  display:flex;gap:calc(30*var(--s));
  border-radius:var(--r-lg);border:calc(1*var(--s)) solid var(--border-mid);
  background:linear-gradient(150deg,rgba(18,26,20,.985),rgba(8,14,9,.99));
  backdrop-filter:blur(calc(18*var(--s)));padding:calc(32*var(--s));
  opacity:0;pointer-events:none;transform:translateY(calc(26*var(--s))) scale(.99);
  transition:opacity 420ms var(--e-out),transform 420ms var(--e-out)}
.dep-detail.on{opacity:1;pointer-events:auto;transform:none}
.dep-close{position:absolute;right:calc(26*var(--s));top:calc(24*var(--s));z-index:3;
  font-family:var(--mono);font-size:calc(11*var(--s));letter-spacing:.22em;
  padding:calc(10*var(--s)) calc(16*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border-mid);background:rgba(240,247,243,.05);color:var(--text-bright)}
.dep-close .caret{margin:0 calc(8*var(--s)) 0 0;color:var(--g1)}
.dep-close:active{transform:scale(.96);background:rgba(52,177,125,.2)}
.dep-d-left{flex:0 0 calc(400*var(--s));display:flex;flex-direction:column;gap:calc(10*var(--s));min-width:0}
.dep-d-title{font-size:calc(40*var(--s));line-height:1.04;font-weight:700;letter-spacing:-.025em;color:var(--text-bright)}
.dep-d-desc{font-size:calc(14.5*var(--s));line-height:1.6;color:var(--text-dim)}
.dep-d-art{flex:1;min-height:0;display:grid;place-items:center;position:relative}
.dep-d-art img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 calc(28*var(--s)) calc(48*var(--s)) rgba(0,0,0,.62));animation:float 11s var(--e-std) infinite}
.dep-d-meta{display:flex;gap:calc(20*var(--s));padding-top:calc(14*var(--s));
  border-top:calc(1*var(--s)) solid var(--border)}
.dep-d-meta>div{display:flex;flex-direction:column;gap:calc(5*var(--s))}
.dep-d-meta>div:first-child{flex:1}
.dep-d-meta p{font-size:calc(13*var(--s));line-height:1.45;color:var(--text-dim)}
.dep-d-meta strong{font-size:calc(19*var(--s));font-weight:900;color:var(--g1);letter-spacing:-.01em}
.dep-d-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(12*var(--s))}
.dep-stack{display:flex;flex-direction:column;gap:calc(6*var(--s))}
.dep-bar,.dep-found{display:flex;align-items:baseline;gap:calc(16*var(--s));
  padding:calc(13*var(--s)) calc(18*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border-mid);background:rgba(52,177,125,.08);
  animation:stgIn 520ms var(--e-out) both;animation-delay:calc(var(--i)*70ms + 120ms)}
.dep-bar strong{font-size:calc(17*var(--s));font-weight:700;color:var(--text-bright);flex:0 0 calc(180*var(--s))}
.dep-bar span{font-size:calc(13*var(--s));color:var(--text-dim)}
.dep-found{flex-direction:column;align-items:stretch;gap:calc(5*var(--s));margin-top:calc(6*var(--s));
  border-color:var(--border);background:rgba(25,32,24,.6);border-left-width:calc(3*var(--s));border-left-color:var(--g1)}
.dep-found strong{font-family:var(--mono);font-size:calc(11.5*var(--s));letter-spacing:.2em;color:var(--g1);font-weight:600}
.dep-found span{font-size:calc(13*var(--s));line-height:1.5;color:var(--text-dim)}
.dep-groups{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(14*var(--s));
  padding-top:calc(14*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.dep-group{display:flex;flex-direction:column;gap:calc(9*var(--s));
  animation:stgIn 520ms var(--e-out) both;animation-delay:calc(var(--i)*90ms + 320ms)}
.dep-group ul{list-style:none;display:flex;flex-direction:column;gap:calc(6*var(--s))}
.dep-group li{font-size:calc(13*var(--s));line-height:1.4;color:var(--text-dim);
  padding-left:calc(13*var(--s));position:relative}
.dep-group li::before{content:"";position:absolute;left:0;top:calc(7*var(--s));
  width:calc(4*var(--s));height:calc(4*var(--s));background:var(--g1);opacity:.75;border-radius:calc(1*var(--s))}

/* ---- deployment detail: fill the column, close button in the rail ---- */
.dep-close{position:static;align-self:flex-start;margin-bottom:calc(8*var(--s))}
.dep-stack{flex:1.05;min-height:0;justify-content:stretch}
.dep-bar{flex:1;align-items:center}
.dep-found{flex:0 0 auto}
.dep-groups{flex:1;align-content:start}
.dep-d-art{flex:1;min-height:0;padding:calc(10*var(--s)) 0}
.dep-stack{flex:0.92}
.dep-group{border:calc(1*var(--s)) solid var(--border);border-radius:var(--r-sm);
  background:rgba(25,32,24,.42);padding:calc(16*var(--s));gap:calc(11*var(--s))}
.dep-group ul{flex:1;gap:calc(8*var(--s))}
.dep-group li{font-size:calc(13.5*var(--s))}
.dcard-art{flex:0 0 54%}

/* ============================================================
   QA PASS 1 REMEDIATION
   ============================================================ */

/* contrast: quiet labels were below the booth legibility floor */
:root{ --text-faint:rgba(212,228,220,.55) }
.home-foot{font-size:calc(12*var(--s));color:var(--text-dim)}
.about-hint{font-size:calc(12*var(--s));color:var(--text-dim)}
.fact span{color:var(--text-dim)}
.dep-foot{color:var(--text-dim)}
.eg-nf,.cs-path{color:var(--text-dim)}

/* A · agent run surface: blocks keep their natural height and the panel
   scrolls, instead of flex shrinking and colliding with the next section */
.ag-stage>div{flex:0 0 auto}
.ag-dg{grid-template-columns:repeat(4,1fr)}
.ag-dc{padding:calc(12*var(--s))}
.ag-dc strong{font-size:calc(14*var(--s))}
.ag-dc span{font-size:calc(11.5*var(--s))}
.ag-dc i{right:calc(9*var(--s));top:calc(11*var(--s))}
.ag-tl{padding:calc(9*var(--s)) calc(13*var(--s))}
.ag-pl{padding:calc(9*var(--s)) calc(12*var(--s))}
.ag-appr{padding:calc(16*var(--s))}
.ag-appr p{font-size:calc(17*var(--s))}
.ag-type{font-size:calc(21*var(--s))}

/* B · accelerator index digits were unreadable at 1.11:1 */
.eg-cells i em{color:rgba(240,247,243,.58)}
.eg-cells i.on em{color:rgba(240,247,243,.92);font-weight:700;
  text-shadow:0 calc(1*var(--s)) calc(3*var(--s)) rgba(8,14,9,.85)}

/* C · on ultrawide the page header must share the grid container */
@media (min-aspect-ratio:2/1){
  .home-head,.home-foot,.dep-head,.dep-foot{max-width:calc(2100*var(--s));width:100%;margin-left:auto;margin-right:auto}
  .talk-wrap{max-width:calc(1480*var(--s))}
  .qr-frame{width:calc(300*var(--s));height:calc(300*var(--s))}
  .talk-title{font-size:calc(132*var(--s))}
}

/* D · deployment card footers pin to the bottom so all four line up */
.dcard-best{margin-top:auto;min-height:calc(46*var(--s))}
.dcard-time{flex:0 0 auto}
.dcard-cta{flex:0 0 auto}

/* F · engine console: close the dead band above the policy row */
.cs-engine{justify-content:flex-start;gap:calc(16*var(--s))}
.cs-engine .eg-main{flex:1;min-height:0}
.eg-nodes{align-content:stretch}
.eg-cells{grid-template-rows:minmax(0,1fr) minmax(0,1fr);max-height:calc(120*var(--s))}
.eg-cells i{max-height:calc(56*var(--s))}

/* G · close the void in the fabric left rail */
.fab-caps{justify-content:space-between}

/* H · home card eyebrows share a baseline across all four cards */
.card-tag{margin-top:0}
.card-fabric .card-body{justify-content:flex-start}
.card-plain{margin-bottom:auto}

/* K · runtime audit log: no single word orphan wraps */
.rt-main{grid-template-columns:calc(292*var(--s)) 1fr}
.rt-al{font-size:calc(10*var(--s))}
.rt-al em{flex:0 0 calc(30*var(--s))}
/* A2 · trim the run surface so a full six step run fits with no scroll */
.ag-stage>div{gap:calc(8*var(--s))}
.ag-stage>div+div{padding-top:calc(10*var(--s))}
.ag-pl,.ag-tl{padding:calc(7*var(--s)) calc(12*var(--s))}
.ag-res{padding:calc(10*var(--s)) calc(13*var(--s))}
.ag-appr{padding:calc(14*var(--s))}
/* G2 · capability rows fill the rail, which also gives them booth sized
   touch targets instead of leaving a 275px void under the list */
.fab-caps{justify-content:flex-start;gap:calc(8*var(--s))}
.cap{flex:1 1 auto;display:flex;flex-direction:column;min-height:calc(46*var(--s))}
.cap-btn{flex:1;padding:calc(12*var(--s)) calc(15*var(--s))}
.cap.is-open{flex:1.6 1 auto}
.cap.is-open .cap-btn{flex:0 0 auto}
/* F2 · node panels fill the console, cells keep a readable fixed size and
   distribute evenly inside each panel */
.cs-engine .eg-main{flex:1;min-height:0}
.eg-nodes{grid-template-rows:1fr 1fr;align-content:stretch}
.eg-cells{grid-template-rows:calc(56*var(--s)) calc(56*var(--s));max-height:none;align-content:space-evenly}
.eg-cells i{max-height:none}
.eg-node{justify-content:flex-start}
/* F3 · node panel footer pins to the base, side rail carries a policy note */
.eg-node{justify-content:space-between}
.eg-cells{flex:1;align-content:center}
.eg-pol-note strong{font-size:calc(19*var(--s));font-weight:700;color:var(--text-bright);letter-spacing:-.01em}
.eg-pol-note .k-sm{color:var(--text-dim)}

/* ---- residual overflow found by the resolution sweep ----
   1. the architecture halo was sized from width, so on a wide stage it grew
      taller than its box and pushed scroll overflow up the tree
   2. the runtime topology svg has no definite height in an auto sized grid row,
      so on 21:9 it fell back to its intrinsic ratio and clipped the node layer */
.arch-halo{width:auto;height:86%;aspect-ratio:1;max-width:78%}
.eg-main,.ag-main,.rt-main,.sc-main{grid-template-rows:minmax(0,1fr)}
.rt-topo,.rt-checks,.eg-nodes,.eg-side,.sc-stream,.sc-side,.ag-trace,.ag-stage{min-height:0}
.rt-topo{overflow:hidden}
.rt-topo svg{width:100%;height:100%;max-height:100%}
/* the architecture render's percentage height had no definite grid row to
   resolve against below 1600px wide, so it fell back to its intrinsic size and
   overflowed the stage. Give the row a definite track. */
.arch-art{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.arch-art img{max-height:92%}

/* ============================================================
   FABRIC HUB
   ============================================================ */
.screen-hub{flex-direction:row;gap:calc(30*var(--s))}
.hub-rail{flex:0 0 calc(392*var(--s));display:flex;flex-direction:column;gap:calc(10*var(--s));min-height:0}
.hub-title{font-size:calc(58*var(--s));line-height:.98;font-weight:700;letter-spacing:-.03em;color:var(--text-bright)}
.hub-sub{font-size:calc(16*var(--s));line-height:1.4;color:var(--g1);font-weight:500}
.hub-art{position:relative;flex:1;min-height:0;display:grid;place-items:center;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);margin:calc(6*var(--s)) 0}
.hub-art img{position:relative;z-index:2;width:auto;height:94%;max-height:94%;max-width:88%;object-fit:contain;
  filter:drop-shadow(0 calc(34*var(--s)) calc(60*var(--s)) rgba(0,0,0,.66));animation:float 11s var(--e-std) infinite}
.hub-lead{font-size:calc(14*var(--s));line-height:1.6;color:var(--text-dim)}
.hub-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(12*var(--s))}
.hub-eyebrow{font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.28em;color:var(--text-faint);
  padding-top:calc(4*var(--s))}
.hub-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;
  gap:calc(14*var(--s))}

.hcard{position:relative;overflow:hidden;text-align:left;display:flex;flex-direction:column;gap:calc(7*var(--s));
  padding:calc(20*var(--s));border-radius:var(--r-md);border:calc(1*var(--s)) solid var(--border);
  background:linear-gradient(155deg,rgba(25,32,24,.9),rgba(13,21,16,.82) 58%,rgba(8,14,9,.9));
  animation:cardIn 600ms var(--e-out) both;animation-delay:calc(var(--i)*60ms + 60ms);
  transition:transform 380ms var(--e-out),border-color 380ms var(--e-out),background 380ms var(--e-out)}
.hcard:active{transform:scale(.984);border-color:var(--border-bright);background:rgba(52,177,125,.08)}
.hcard-bracket{position:absolute;inset:calc(11*var(--s));pointer-events:none;
  background:linear-gradient(var(--g1),var(--g1)) right top/calc(20*var(--s)) calc(1.5*var(--s)) no-repeat,
             linear-gradient(var(--g1),var(--g1)) right top/calc(1.5*var(--s)) calc(20*var(--s)) no-repeat;
  opacity:.3;transition:opacity 380ms var(--e-out)}
.hcard:active .hcard-bracket{opacity:.9}
.hcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(10*var(--s))}
.hcard-eyebrow{font-family:var(--mono);font-size:calc(9.5*var(--s));letter-spacing:.2em;color:var(--text-faint);line-height:1.5}
.hcard-glyph{font-size:calc(20*var(--s));color:var(--g1);line-height:1;opacity:.9}
.hcard-name{font-size:calc(21*var(--s));line-height:1.18;font-weight:700;letter-spacing:-.015em;color:var(--text-bright)}
.hcard-tag{font-size:calc(12.5*var(--s));line-height:1.5;color:var(--text-dim)}
.hcard-pv{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:calc(6*var(--s)) 0}
.hcard-foot{display:flex;align-items:center;justify-content:space-between;gap:calc(10*var(--s));
  padding-top:calc(11*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.hcard-tech{font-family:var(--mono);font-size:calc(9*var(--s));letter-spacing:.16em;color:var(--text-faint)}
.hcard-foot .caret{color:var(--g1);margin:0}
.hcard:active .caret{transform:translateX(calc(4*var(--s)))}

/* ---- card previews, small living diagrams ---- */
.pv{display:block;width:100%}
.pv i,.pv b,.pv u,.pv s{display:block}
.pv-cells{display:grid;grid-template-columns:repeat(8,1fr);gap:calc(4*var(--s))}
.pv-cells i{height:calc(15*var(--s));border-radius:calc(3*var(--s));background:rgba(240,247,243,.07);
  border:calc(1*var(--s)) solid rgba(240,247,243,.08)}
.pv-cells i.on{background:rgba(52,177,125,.3);border-color:rgba(52,177,125,.55);
  animation:pvPulse 3.2s var(--e-std) infinite;animation-delay:calc(var(--d)*1ms)}
@keyframes pvPulse{0%,100%{opacity:.55}50%{opacity:1}}
.pv-rows{display:flex;flex-direction:column;gap:calc(7*var(--s))}
.pv-rows b{display:flex;align-items:center;gap:calc(8*var(--s));height:calc(17*var(--s));
  border-radius:calc(3*var(--s));border:calc(1*var(--s)) solid var(--border);
  border-left:calc(3*var(--s)) solid var(--g1);padding:0 calc(8*var(--s));
  animation:pvSlide 3.6s var(--e-out) infinite;animation-delay:calc(var(--d)*1ms)}
.pv-rows u{height:calc(3*var(--s));border-radius:calc(1*var(--s));background:rgba(240,247,243,.2)}
.pv-rows s{margin-left:auto;width:calc(20*var(--s));height:calc(3*var(--s));border-radius:calc(1*var(--s));background:var(--g1);opacity:.8}
@keyframes pvSlide{0%,100%{opacity:.5;transform:translateX(0)}50%{opacity:1;transform:translateX(calc(3*var(--s)))}}
.pv-flow{display:flex;align-items:center;gap:calc(5*var(--s))}
.pv-flow b{flex:1;height:calc(30*var(--s));border-radius:calc(4*var(--s));
  border:calc(1*var(--s)) solid var(--border-mid);background:rgba(52,177,125,.09);
  animation:pvPulse 3s var(--e-std) infinite;animation-delay:calc(var(--d)*1ms)}
.pv-flow u{width:calc(10*var(--s));height:calc(1.5*var(--s));background:var(--g1);opacity:.5}
.pv-kpi{display:flex;flex-direction:column;gap:calc(9*var(--s))}
.pv-kpi b{height:calc(6*var(--s));border-radius:calc(2*var(--s));background:rgba(240,247,243,.1);overflow:hidden}
.pv-kpi u{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--g2),var(--g1));
  border-radius:calc(2*var(--s));animation:pvBar 3.4s var(--e-out) infinite}
@keyframes pvBar{0%,100%{transform:scaleX(.82);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}}
.pv-log{display:flex;flex-direction:column;gap:calc(6*var(--s))}
.pv-log b{height:calc(4*var(--s));width:var(--w);border-radius:calc(1*var(--s));background:rgba(52,177,125,.4);
  animation:pvType 3.8s var(--e-out) infinite;animation-delay:calc(var(--d)*1ms);transform-origin:left}
@keyframes pvType{0%{transform:scaleX(0);opacity:0}18%,86%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.35}}
.pv-run{display:flex;flex-direction:column;gap:calc(6*var(--s))}
.pv-run b{height:calc(12*var(--s));border-radius:calc(3*var(--s));background:rgba(240,247,243,.07);
  border-left:calc(3*var(--s)) solid var(--g1);animation:pvStep 4s var(--e-out) infinite;animation-delay:calc(var(--d)*1ms)}
@keyframes pvStep{0%,100%{opacity:.28}25%,55%{opacity:1}}
.pv-check{display:flex;flex-direction:column;gap:calc(8*var(--s))}
.pv-check b{display:flex;align-items:center;gap:calc(8*var(--s));animation:pvStep 4.2s var(--e-out) infinite;animation-delay:calc(var(--d)*1ms)}
.pv-check i{width:calc(11*var(--s));height:calc(11*var(--s));border-radius:calc(3*var(--s));background:var(--g1);flex:0 0 auto}
.pv-check u{height:calc(3*var(--s));border-radius:calc(1*var(--s));background:rgba(240,247,243,.2)}
.pv-topo{position:relative;display:flex;flex-direction:column;gap:calc(9*var(--s));padding:calc(2*var(--s)) 0}
.pv-topo b{height:calc(20*var(--s));border-radius:calc(4*var(--s));border:calc(1*var(--s)) solid var(--border-mid);
  background:rgba(52,177,125,.07)}
.pv-topo s{position:absolute;left:50%;top:calc(10*var(--s));bottom:calc(10*var(--s));width:calc(1.5*var(--s));
  background:linear-gradient(180deg,transparent,var(--g1),transparent);opacity:.6;animation:pvPulse 2.6s var(--e-std) infinite}

/* ============================================================
   SEGMENT PAGE
   ============================================================ */
.screen-seg{flex-direction:row;gap:calc(28*var(--s))}
.seg-rail{flex:0 0 calc(388*var(--s));display:flex;flex-direction:column;gap:calc(11*var(--s));min-height:0}
.seg-title{font-size:calc(38*var(--s));line-height:1.06;font-weight:700;letter-spacing:-.025em;color:var(--text-bright)}
.seg-lead{font-size:calc(15*var(--s));line-height:1.6;color:var(--text-mid)}
.seg-proof{list-style:none;display:flex;flex-direction:column;gap:calc(9*var(--s));
  padding:calc(15*var(--s)) calc(16*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border);background:rgba(25,32,24,.45)}
.seg-proof li{font-size:calc(13.5*var(--s));line-height:1.5;color:var(--text-dim);
  padding-left:calc(16*var(--s));position:relative}
.seg-proof li::before{content:"";position:absolute;left:0;top:calc(7*var(--s));
  width:calc(5*var(--s));height:calc(5*var(--s));background:var(--g1);border-radius:calc(1.5*var(--s))}
.seg-tech{display:flex;flex-wrap:wrap;gap:calc(5*var(--s))}
.seg-cases{margin-top:auto;display:flex;flex-direction:column;gap:calc(8*var(--s));
  padding-top:calc(14*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.case-chips{display:flex;gap:calc(8*var(--s))}
.case{flex:1;display:flex;flex-direction:column;gap:calc(3*var(--s));text-align:left;
  padding:calc(12*var(--s)) calc(14*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border);background:rgba(25,32,24,.45);
  font-size:calc(14*var(--s));font-weight:600;color:var(--text-dim);
  transition:all 320ms var(--e-out)}
.case span{font-family:var(--mono);font-size:calc(9*var(--s));letter-spacing:.18em;color:var(--text-faint);font-weight:400}
.case.on{border-color:var(--border-bright);background:rgba(52,177,125,.13);color:var(--text-bright)}
.case.on span{color:var(--g1)}
.case:active{transform:scale(.98)}
.case-note{font-size:calc(12*var(--s));line-height:1.5;color:var(--text-faint)}
.seg-restart{display:inline-flex;align-items:center;gap:calc(9*var(--s));align-self:flex-start;
  font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.22em;
  padding:calc(11*var(--s)) calc(16*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border-mid);background:rgba(240,247,243,.04);color:var(--text-bright)}
.seg-restart:active{transform:scale(.97);background:rgba(52,177,125,.2)}

.seg-stage{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(12*var(--s))}
.sim{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-md);border:calc(1*var(--s)) solid var(--border-mid);background:rgba(8,14,9,.78);
  transition:opacity 220ms var(--e-out)}
.sim.swap{opacity:.25}
.sim-body{flex:1;min-height:0;display:flex;gap:calc(14*var(--s));padding:calc(16*var(--s))}
.sim-rail{flex:0 0 calc(212*var(--s));display:flex;flex-direction:column;gap:calc(4*var(--s));min-height:0;
  border-right:calc(1*var(--s)) solid var(--border);padding-right:calc(14*var(--s))}
.sim-rail[hidden]{display:none}
.sim-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:calc(11*var(--s));overflow:hidden}
.sim-side{flex:0 0 calc(228*var(--s));display:flex;flex-direction:column;gap:calc(9*var(--s));min-height:0}
.sim-side[hidden]{display:none}
.sim-audit{flex:0 0 auto;display:flex;gap:calc(6*var(--s));flex-wrap:wrap;padding:calc(12*var(--s)) calc(16*var(--s));
  border-top:calc(1*var(--s)) solid var(--border)}
.sim-audit[hidden]{display:none}
.rl{display:flex;align-items:center;gap:calc(9*var(--s));padding:calc(8*var(--s)) calc(9*var(--s));
  border-radius:var(--r-xs);font-size:calc(13*var(--s));color:var(--text-faint);transition:all 300ms var(--e-out)}
.rl i{width:calc(6*var(--s));height:calc(6*var(--s));border-radius:calc(2*var(--s));background:rgba(240,247,243,.2);flex:0 0 auto}
.rl span{flex:1}
.rl b{font-family:var(--mono);font-size:calc(8.5*var(--s));letter-spacing:.16em;color:var(--g1)}
.rl.done{color:var(--text-dim)} .rl.done i{background:var(--g1);opacity:.55}
.rl.now{background:rgba(52,177,125,.1);color:var(--text-bright)}
.rl.now i{background:var(--g1);box-shadow:0 0 0 calc(3*var(--s)) rgba(52,177,125,.18);animation:blip 1.3s var(--e-std) infinite}
.rl-meta{margin-top:auto;display:flex;flex-direction:column;gap:calc(9*var(--s));
  padding-top:calc(12*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.rl-meta>div{display:flex;flex-direction:column;gap:calc(2*var(--s));font-size:calc(12*var(--s));color:var(--text-dim)}

.sim-foot{flex:0 0 auto;display:flex;align-items:center;gap:calc(16*var(--s))}
.sim-steps{display:flex;gap:calc(6*var(--s))}
.stp{position:relative;width:calc(46*var(--s));height:calc(26*var(--s));border-radius:var(--r-xs);
  border:calc(1*var(--s)) solid var(--border);background:rgba(25,32,24,.55);overflow:hidden;
  display:grid;place-items:center;transition:border-color 300ms var(--e-out)}
.stp span{position:relative;z-index:2;font-family:var(--mono);font-size:calc(10*var(--s));color:var(--text-faint);transition:color 300ms}
.stp i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--g1);transform:scaleX(0);transform-origin:left}
.stp.done i{transform:scaleX(1)} .stp.done span{color:var(--bg-deep)}
.stp.now{border-color:var(--border-bright)}
.stp.now i{animation:stepFill var(--dur,2600ms) linear both}
.stp.now span{color:var(--text-bright);mix-blend-mode:difference}
.stp:active{transform:scale(.94)}
.sim-cap{flex:1;font-size:calc(14*var(--s));line-height:1.45;color:var(--text-dim)}
.sim-hint{font-family:var(--mono);font-size:calc(9.5*var(--s));letter-spacing:.24em;color:var(--text-faint)}

/* ============================================================
   SIMULATION BLOCKS
   ============================================================ */
.sb{display:flex;flex-direction:column;gap:calc(9*var(--s));flex:0 0 auto;min-height:0}
.sb-in{animation:stgIn 380ms var(--e-out) both}
.sb-rows,.sb-cells,.sb-topo,.sb-checks{flex:1;min-height:0}
.sim-main>.sb-log,.sim-main>.sb-chart{flex:0 0 auto}

.sb-chips .chip-row{display:flex;gap:calc(6*var(--s));flex-wrap:wrap}
.sb-chips .k-chip{cursor:pointer}

.sb-cells{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:calc(10*var(--s))}
.nd{border:calc(1*var(--s)) solid var(--border);border-radius:var(--r-sm);background:rgba(25,32,24,.45);
  padding:calc(11*var(--s));display:flex;flex-direction:column;justify-content:space-between;gap:calc(8*var(--s));min-height:0}
.nd-h{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8*var(--s));
  font-family:var(--mono);font-size:calc(10*var(--s));letter-spacing:.12em;color:var(--text-dim)}
.nd-h b{color:var(--text-faint);font-weight:400;font-size:calc(9*var(--s))}
.nd-c{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:calc(46*var(--s)) calc(46*var(--s));
  gap:calc(6*var(--s));align-content:center;min-height:0}
.nd-c i{display:grid;place-items:center;border-radius:var(--r-xs);
  border:calc(1*var(--s)) solid color-mix(in srgb,var(--c) 60%,transparent);
  background:color-mix(in srgb,var(--c) 26%,transparent);transition:all 420ms var(--e-out)}
.nd-c i:not(.on){border-color:rgba(240,247,243,.09);background:rgba(240,247,243,.03)}
.nd-c em{font-family:var(--mono);font-size:calc(9.5*var(--s));font-style:normal;color:rgba(240,247,243,.5)}
.nd-c i.on em{color:rgba(240,247,243,.92);font-weight:700;text-shadow:0 calc(1*var(--s)) calc(3*var(--s)) rgba(8,14,9,.85)}
.nd-f{display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--mono);font-size:calc(9*var(--s));letter-spacing:.16em;color:var(--text-faint);
  padding-top:calc(7*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.nd-f b{color:var(--g1);font-weight:400}

.sb-rows .rw-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(6*var(--s))}
.rw{flex:1;min-height:0;display:flex;align-items:center;gap:calc(12*var(--s));
  padding:calc(9*var(--s)) calc(13*var(--s));border-radius:var(--r-xs);
  border:calc(1*var(--s)) solid var(--border);background:rgba(8,14,9,.5);
  border-left-width:calc(3*var(--s));border-left-color:var(--g1);
  animation:stgIn 380ms var(--e-out) both;animation-delay:calc(var(--d)*1ms)}
.sb-rows.dense .rw{flex:0 0 auto}
.rw b{font-family:var(--mono);font-size:calc(12*var(--s));color:var(--text-bright);font-weight:400;
  flex:0 0 calc(196*var(--s));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw span{font-size:calc(12.5*var(--s));color:var(--text-dim);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw i{font-family:var(--mono);font-size:calc(10*var(--s));font-style:normal;color:var(--text-faint);flex:0 0 auto}
.rw em{font-family:var(--mono);font-size:calc(9.5*var(--s));letter-spacing:.14em;font-style:normal;
  color:var(--g1);flex:0 0 calc(96*var(--s));text-align:right}
.rw.warn{border-left-color:var(--amber)} .rw.warn em{color:var(--amber)}
.rw.bad{border-left-color:var(--coral);background:rgba(240,107,107,.06)} .rw.bad em{color:var(--coral)}
.rw.pend{border-left-color:rgba(240,247,243,.2)} .rw.pend em{color:var(--text-faint)}

.sb-log .lg-list{display:flex;flex-direction:column;gap:calc(4*var(--s))}
.lg{display:flex;gap:calc(12*var(--s));font-family:var(--mono);font-size:calc(11*var(--s));color:var(--text-dim);
  animation:stgIn 360ms var(--e-out) both;animation-delay:calc(var(--d)*1ms)}
.lg em{font-style:normal;color:var(--text-faint);flex:0 0 calc(46*var(--s));font-variant-numeric:tabular-nums}
.lg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg.warn span{color:var(--amber)} .lg.bad span{color:var(--coral)}

.sb-checks .ck-list{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly}
.ck{display:flex;align-items:center;gap:calc(11*var(--s));font-size:calc(13.5*var(--s));
  color:var(--text-faint);transition:color 400ms var(--e-out)}
.ck i{width:calc(15*var(--s));height:calc(15*var(--s));border-radius:calc(4*var(--s));flex:0 0 auto;
  border:calc(1*var(--s)) solid rgba(240,247,243,.18);position:relative;transition:all 400ms var(--e-out)}
.ck.ok{color:var(--text-mid)} .ck.ok i{background:var(--g1);border-color:var(--g1)}
.ck.ok i::after{content:"";position:absolute;left:calc(4.5*var(--s));top:calc(1.5*var(--s));
  width:calc(4.5*var(--s));height:calc(8*var(--s));border:solid var(--bg-deep);
  border-width:0 calc(2*var(--s)) calc(2*var(--s)) 0;transform:rotate(42deg)}

.sb-flow .fl-row{display:flex;align-items:stretch;gap:calc(6*var(--s))}
.fl-col{flex:1;display:flex;flex-direction:column;gap:calc(7*var(--s));
  animation:stgIn 420ms var(--e-out) both;animation-delay:calc(var(--d)*1ms)}
.fl-n{flex:1;display:flex;flex-direction:column;justify-content:center;gap:calc(3*var(--s));
  padding:calc(12*var(--s));border-radius:var(--r-sm);border:calc(1*var(--s)) solid rgba(240,247,243,.1);
  background:rgba(8,14,9,.5);transition:all 420ms var(--e-out)}
.fl-n strong{font-size:calc(14*var(--s));font-weight:600;color:var(--text-dim)}
.fl-n span{font-size:calc(11*var(--s));color:var(--text-faint)}
.fl-n.done{border-color:var(--border-mid);background:rgba(52,177,125,.08)}
.fl-n.done strong{color:var(--text-bright)}
.fl-n.now{border-color:var(--border-bright);background:rgba(52,177,125,.14)}
.fl-n.now strong{color:var(--text-bright)}
.fl-n.bad{border-color:rgba(240,107,107,.5);background:rgba(240,107,107,.08)}
.fl-n.bad strong{color:var(--coral)}
.fl-j{align-self:center;width:calc(10*var(--s));height:calc(1.5*var(--s));background:var(--g1);opacity:.45;flex:0 0 auto}

.sb-tiles .tl-row{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(8*var(--s))}
.tl{position:relative;padding:calc(12*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border-mid);background:rgba(52,177,125,.06);
  display:flex;flex-direction:column;gap:calc(3*var(--s));
  animation:stgIn 400ms var(--e-out) both;animation-delay:calc(var(--d)*1ms)}
.tl strong{font-size:calc(13.5*var(--s));color:var(--text-bright);font-weight:600}
.tl span{font-size:calc(11.5*var(--s));color:var(--text-dim)}
.tl i{position:absolute;right:calc(9*var(--s));top:calc(11*var(--s));width:calc(5*var(--s));height:calc(5*var(--s));
  border-radius:calc(1.5*var(--s));background:var(--g1);animation:blip 1.5s var(--e-std) infinite}

.msg-t{font-size:calc(20*var(--s));line-height:1.4;color:var(--text-bright);font-weight:500;
  border-left:calc(2*var(--s)) solid var(--g1);padding-left:calc(15*var(--s))}
.msg-tags{display:flex;gap:calc(6*var(--s))}

.sb-list .li{display:flex;align-items:center;gap:calc(10*var(--s));font-size:calc(14*var(--s));color:var(--text-mid);
  padding:calc(8*var(--s)) calc(12*var(--s));border-radius:var(--r-xs);background:rgba(25,32,24,.5);
  animation:stgIn 380ms var(--e-out) both;animation-delay:calc(var(--d)*1ms)}
.sb-list .li i{width:calc(5*var(--s));height:calc(5*var(--s));border-radius:calc(1.5*var(--s));background:var(--g1);flex:0 0 auto}

.sb-note{padding:calc(14*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border);background:rgba(25,32,24,.5);gap:calc(6*var(--s))}
.sb-note p{font-size:calc(13*var(--s));line-height:1.55;color:var(--text-dim)}
.sim-main>.sb-note p{font-size:calc(17*var(--s));color:var(--text-bright)}
.sb-note.warn{border-color:rgba(242,178,49,.4);background:rgba(242,178,49,.07)}
.sb-note.bad{border-color:rgba(240,107,107,.4);background:rgba(240,107,107,.07)}
.sb-note.good{border-color:var(--border-bright);background:rgba(52,177,125,.08)}
.nt-a{display:flex;gap:calc(7*var(--s));margin-top:calc(3*var(--s))}
.nt-f{font-family:var(--mono);font-size:calc(10*var(--s));color:var(--text-faint);letter-spacing:.08em}

.sb-result .rs{display:flex;align-items:baseline;gap:calc(14*var(--s));padding:calc(11*var(--s)) calc(13*var(--s));
  border-radius:var(--r-xs);background:rgba(25,32,24,.55);animation:stgIn 400ms var(--e-out) both;animation-delay:calc(var(--d)*1ms)}
.sb-result .rs b{font-size:calc(28*var(--s));font-weight:900;color:var(--g1);letter-spacing:-.02em;
  flex:0 0 calc(88*var(--s));font-variant-numeric:tabular-nums}
.sb-result .rs span{font-size:calc(14*var(--s));color:var(--text-mid)}
.rs-f{font-size:calc(12.5*var(--s));line-height:1.5;color:var(--text-dim)}

.sb-kpi{padding:calc(13*var(--s));border-radius:var(--r-sm);border:calc(1*var(--s)) solid var(--border);
  background:rgba(25,32,24,.5);gap:calc(6*var(--s))}
.kv{font-size:calc(26*var(--s));font-weight:900;color:var(--text-bright);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.kv.accent{color:var(--g1)}
.sb-kpi.bad .kv{color:var(--coral)} .sb-kpi.warn .kv{color:var(--amber)} .sb-kpi.good .kv{color:var(--g1)}
.ks{font-size:calc(12.5*var(--s));line-height:1.4;color:var(--text-dim);word-break:break-word}
.kbar{height:calc(5*var(--s));border-radius:calc(2*var(--s));background:rgba(240,247,243,.1);overflow:hidden}
.kbar i{display:block;height:100%;background:linear-gradient(90deg,var(--g2),var(--g1));
  border-radius:calc(2*var(--s));transition:width 700ms var(--e-out)}
.sb-kpi.bad .kbar i{background:var(--coral)} .sb-kpi.warn .kbar i{background:var(--amber)}

.sb-legend{padding:calc(13*var(--s));border-radius:var(--r-sm);border:calc(1*var(--s)) solid var(--border);
  background:rgba(25,32,24,.5);gap:calc(7*var(--s))}
.lgd{display:flex;align-items:center;gap:calc(8*var(--s));font-size:calc(12.5*var(--s));color:var(--text-dim)}
.lgd i{width:calc(9*var(--s));height:calc(9*var(--s));border-radius:calc(2*var(--s));flex:0 0 auto}
.lgd b{margin-left:auto;font-family:var(--mono);font-size:calc(12*var(--s));color:var(--text-bright);
  font-variant-numeric:tabular-nums}

.sb-bars{gap:calc(10*var(--s))}
.br{display:flex;align-items:center;gap:calc(10*var(--s));font-size:calc(12.5*var(--s));color:var(--text-dim)}
.br>span{flex:0 0 calc(96*var(--s))}
.br-t{flex:1;height:calc(8*var(--s));border-radius:calc(2*var(--s));background:rgba(240,247,243,.09);overflow:hidden}
.br-t i{display:block;height:100%;background:linear-gradient(90deg,var(--g2),var(--g1));border-radius:calc(2*var(--s));
  transition:width 700ms var(--e-out)}
.br.warn .br-t i{background:var(--amber)} .br.bad .br-t i{background:var(--coral)}
.br>b{font-family:var(--mono);font-size:calc(11.5*var(--s));color:var(--text-bright);flex:0 0 calc(32*var(--s));text-align:right}

.sb-chart{gap:calc(7*var(--s))}
.sb-chart svg{width:100%;height:calc(88*var(--s))}
.sb-chart line{stroke:rgba(240,247,243,.07);stroke-width:.5}
.sb-chart polyline{fill:none;stroke:var(--g1);stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:400;stroke-dashoffset:400;animation:drawLine 900ms var(--e-out) forwards}
.ch-h{font-family:var(--mono);font-size:calc(10*var(--s));color:var(--text-faint)}

.sb-topo{display:grid;place-items:center;overflow:hidden}
.sb-topo svg{width:100%;height:100%;max-height:100%}

/* ---- hub card previews fill their panel ---- */
.hcard-pv{flex:1;min-height:0;display:block;padding:calc(13*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border);background:rgba(8,14,9,.45);overflow:hidden}
.pv{height:100%}
.pv-cells{grid-template-rows:repeat(4,1fr);height:100%;gap:calc(5*var(--s))}
.pv-cells i{height:auto}
.pv-rows{height:100%;justify-content:space-between}
.pv-rows b{flex:1;height:auto}
.pv-flow{height:100%}
.pv-flow b{height:100%}
.pv-kpi{height:100%;justify-content:space-around}
.pv-log{height:100%;justify-content:space-around}
.pv-log b{height:calc(5*var(--s))}
.pv-run{height:100%;justify-content:space-between}
.pv-run b{flex:1;height:auto}
.pv-check{height:100%;justify-content:space-around}
.pv-topo{height:100%;justify-content:space-between}
.pv-topo b{flex:1;height:auto}

/* ---- segment rail: let the proof list breathe into the column ---- */
.seg-proof{flex:1;min-height:0;justify-content:space-evenly}
.seg-proof li{font-size:calc(14*var(--s))}
.pv-flow{align-items:center}
.pv-flow b{height:calc(60*var(--s));flex:1}
.pv-flow u{width:calc(12*var(--s))}
.pv-log b{height:calc(6*var(--s))}
.pv-check u{height:calc(4*var(--s))}
.pv-check i{width:calc(13*var(--s));height:calc(13*var(--s))}
.pv-kpi b{height:calc(8*var(--s))}
.pv-rows b{border-left-width:calc(3*var(--s))}
/* segment rail: one deliberate gap, not three */
.seg-proof{flex:0 0 auto;justify-content:flex-start;gap:calc(10*var(--s))}
/* node cells stay readable rather than becoming blocks, plus a node bar */
.nd-c{grid-template-rows:repeat(2,minmax(0,calc(86*var(--s))));align-content:center}
.nd-b{flex:0 0 auto;height:calc(4*var(--s));border-radius:calc(1.5*var(--s));background:rgba(240,247,243,.08);overflow:hidden}
.nd-b i{display:block;height:100%;background:linear-gradient(90deg,var(--g2),var(--g1));
  border-radius:calc(1.5*var(--s));transition:width 600ms var(--e-out)}
.nd{gap:calc(9*var(--s))}
/* rows fill but never balloon; a console reads as rows, not slabs */
.rw{max-height:calc(78*var(--s))}
.sb-rows .rw-list{justify-content:flex-start}
.sim-main>.sb-flow{flex:1}
.sim-main>.sb-checks{flex:1.4}
/* booth distance: generous rows read better than a dense table with a void under it */
.rw{max-height:calc(124*var(--s));padding:calc(12*var(--s)) calc(15*var(--s))}
.sb-rows.dense .rw{max-height:calc(48*var(--s));padding:calc(9*var(--s)) calc(13*var(--s))}
.rw b{font-size:calc(13*var(--s))}
.rw span{font-size:calc(13.5*var(--s))}
.rw em{font-size:calc(10.5*var(--s))}
/* distribute rows down the column instead of leaving one large void beneath */
.sb-rows:not(.dense) .rw-list{justify-content:space-between}
/* the dash reveal misbehaves once the viewBox is stretched, fade instead */
.sb-chart polyline{stroke-dasharray:none;stroke-dashoffset:0;animation:stgIn 480ms var(--e-out) both}
.sb-chart svg{height:calc(96*var(--s))}
.pv-run b{background:rgba(52,177,125,.1);border:calc(1*var(--s)) solid var(--border);
  border-left:calc(3*var(--s)) solid var(--g1)}
.pv-flow b{background:rgba(52,177,125,.12)}

/* ============================================================
   VISUAL ENGINE SURFACE
   ============================================================ */
.viz-wrap{flex:1;min-height:0;position:relative}
#vizCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ============================================================
   DEPLOYMENT DETAIL · generated hero plate + animated stack
   ============================================================ */
.dep-detail{padding:0;overflow:hidden;background:var(--bg-deep)}
/* the generated plate is a full height band on the left, text sits on its foot */
.dep-hero{position:absolute;inset:0;background-size:cover;z-index:0;
  transform:scale(1.05);animation:heroDrift 26s var(--e-std) infinite alternate}
@keyframes heroDrift{from{transform:scale(1.05) translateY(calc(-10*var(--s)))}
  to{transform:scale(1.14) translateY(calc(10*var(--s)))}}
.dep-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,14,9,.58) 0%,rgba(8,14,9,.10) 22%,
    rgba(8,14,9,.34) 46%,rgba(8,14,9,.88) 68%,rgba(8,14,9,.97) 86%)}
.dep-d-inner{position:relative;z-index:2;flex:1;display:flex;gap:calc(26*var(--s));padding:0}
.dep-d-left{flex:0 0 42%;position:relative;overflow:hidden;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  padding:calc(28*var(--s));justify-content:flex-end}
.dep-d-left>*:not(.dep-hero):not(.dep-scrim){position:relative;z-index:2}
.dep-d-right{padding:calc(28*var(--s)) calc(30*var(--s)) calc(28*var(--s)) 0}
.dep-d-title{font-size:calc(44*var(--s))}
.dep-d-desc{font-size:calc(15*var(--s));color:var(--text-mid)}
.dep-d-chips{display:flex;flex-wrap:wrap;gap:calc(5*var(--s));margin-top:calc(12*var(--s))}
.dep-d-meta{margin-top:auto}
.dep-viz{flex:1.15;min-height:0;position:relative;border-radius:var(--r-md);
  border:calc(1*var(--s)) solid var(--border);background:rgba(8,14,9,.55);overflow:hidden}
#depCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dep-groups{flex:1;padding-top:calc(14*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.dep-group{background:rgba(8,14,9,.55);backdrop-filter:blur(calc(10*var(--s)))}
.dep-detail .dep-close{position:absolute;top:calc(24*var(--s));left:calc(28*var(--s));
  background:rgba(8,14,9,.62);backdrop-filter:blur(calc(12*var(--s)))}
.dep-d-title{text-shadow:0 calc(2*var(--s)) calc(18*var(--s)) rgba(8,14,9,.9)}
.dep-d-left .dcard-tag{margin-top:auto}
/* the plate and its scrim must stay absolutely positioned inside the left band */
.dep-d-left>.dep-hero,.dep-d-left>.dep-scrim{position:absolute !important}
.dep-d-left>.dep-hero{z-index:0 !important}
.dep-d-left>.dep-scrim{z-index:1 !important}
.dep-detail .dep-close{position:absolute !important;top:calc(24*var(--s));left:calc(28*var(--s));
  width:auto;align-self:auto;margin:0;z-index:4}
.dep-detail .dep-close{right:auto !important;bottom:auto !important}
/* deepen the foot of the plate so the title always reads */
.dep-scrim{background:linear-gradient(180deg,rgba(8,14,9,.60) 0%,rgba(8,14,9,.08) 20%,
  rgba(8,14,9,.22) 38%,rgba(8,14,9,.80) 56%,rgba(8,14,9,.95) 72%,rgba(8,14,9,.985) 100%)}

/* ---- hub: bigger identity render, live miniature previews ---- */
.hub-rail{flex:0 0 calc(452*var(--s))}
.hub-art{margin:calc(10*var(--s)) calc(-26*var(--s));flex:1.35}
.hub-art img{height:100%;max-height:100%;max-width:100%}
.hub-title{font-size:calc(64*var(--s))}
.hcard-pv{position:relative;padding:0;overflow:hidden;background:rgba(8,14,9,.55)}
.hcard-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hcard-live{position:absolute;right:calc(9*var(--s));top:calc(9*var(--s));z-index:2;
  font-family:var(--mono);font-size:calc(8.5*var(--s));letter-spacing:.2em;color:var(--g1);
  padding:calc(3*var(--s)) calc(7*var(--s));border-radius:var(--r-xs);
  border:calc(1*var(--s)) solid var(--border-mid);background:rgba(8,14,9,.72)}
.hcard-pv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,14,9,.30),rgba(8,14,9,0) 26%,rgba(8,14,9,0) 74%,rgba(8,14,9,.34))}

/* ---- step rail with names, and a real explainer ---- */
.sim-foot{align-items:stretch;gap:calc(20*var(--s))}
.sim-steps{gap:calc(7*var(--s));align-items:stretch}
.stp{width:auto;height:auto;min-width:calc(104*var(--s));padding:calc(9*var(--s)) calc(13*var(--s));
  display:flex;align-items:center;gap:calc(8*var(--s));justify-content:flex-start;text-align:left}
.stp em{position:relative;z-index:2;font-family:var(--mono);font-size:calc(9.5*var(--s));font-style:normal;
  color:var(--text-faint);transition:color 300ms}
.stp span{position:relative;z-index:2;font-family:var(--font);font-size:calc(12.5*var(--s));font-weight:600;
  letter-spacing:0;color:var(--text-dim);white-space:nowrap;transition:color 300ms}
.stp.done em,.stp.done span{color:var(--bg-deep)}
.stp.now em{color:rgba(240,247,243,.7)} .stp.now span{color:var(--text-bright);mix-blend-mode:normal}
.stp.now i{opacity:.22}
.sim-explain{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(4*var(--s));justify-content:center}
.sim-eyebrow{font-family:var(--mono);font-size:calc(10*var(--s));letter-spacing:.24em;color:var(--g1)}
.sim-eyebrow b{color:var(--text-bright);font-weight:600}
.sim-eyebrow .sep{opacity:.5;margin:0 calc(3*var(--s))}
.sim-cap{font-size:calc(15*var(--s));line-height:1.45;color:var(--text-mid)}

/* ============================================================
   ARABIC · typeface, toggle and right to left
   ============================================================ */
@font-face{font-family:'PlexArabic';src:url('assets/fonts/PlexArabic-400.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'PlexArabic';src:url('assets/fonts/PlexArabic-500.woff2') format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'PlexArabic';src:url('assets/fonts/PlexArabic-700.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'PlexArabic';src:url('assets/fonts/PlexArabic-700.woff2') format('woff2');font-weight:900;font-display:block}

.lang{position:relative;display:inline-flex;padding:calc(3*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border);background:rgba(8,14,9,.6)}
.lang-b{position:relative;z-index:2;font-family:var(--mono);font-size:calc(10.5*var(--s));letter-spacing:.16em;
  font-weight:600;padding:calc(7*var(--s)) calc(13*var(--s));border-radius:var(--r-xs);
  color:var(--text-faint);transition:color 300ms var(--e-out)}
.lang-b[data-lang="ar"]{font-family:'PlexArabic',var(--mono);letter-spacing:0;font-size:calc(12*var(--s))}
.lang-b.is-on{color:var(--bg-deep)}
.lang-thumb{position:absolute;z-index:1;top:calc(3*var(--s));bottom:calc(3*var(--s));border-radius:var(--r-xs);
  background:var(--g1);transition:left 380ms var(--e-out),width 380ms var(--e-out)}

html[lang="ar"]{--font:'PlexArabic','IBM Plex Sans Arabic',system-ui,sans-serif;
  --mono:'PlexArabic','IBM Plex Sans Arabic',system-ui,sans-serif}
html[lang="ar"] .kicker,html[lang="ar"] .mini,html[lang="ar"] .hcard-eyebrow,
html[lang="ar"] .sim-eyebrow,html[lang="ar"] .hcard-tech,html[lang="ar"] .k-chip,
html[lang="ar"] .ab-badge,html[lang="ar"] .home-foot,html[lang="ar"] .attract-strip,
html[lang="ar"] .status,html[lang="ar"] .dcard-tag{letter-spacing:0}
html[lang="ar"] .attract-title{letter-spacing:0;line-height:1.16;font-size:calc(122*var(--s))}
html[lang="ar"] .home-title,html[lang="ar"] .hub-title,html[lang="ar"] .dep-title,
html[lang="ar"] .talk-title,html[lang="ar"] .seg-title,html[lang="ar"] .ab-hero-h,
html[lang="ar"] .ab-h,html[lang="ar"] .card-title,html[lang="ar"] .hcard-name,
html[lang="ar"] .dep-d-title,html[lang="ar"] .dcard-title{letter-spacing:0;line-height:1.26}
html[lang="ar"] .talk-title{font-size:calc(92*var(--s))}
html[lang="ar"] .hub-title{font-size:calc(54*var(--s))}
html[lang="ar"] .card-title{font-size:calc(34*var(--s))}
html[lang="ar"] .ab-hero-h{font-size:calc(62*var(--s))}

/* right to left corrections for the few places that are not pure flex */
[dir="rtl"] .about-rail{left:auto;right:calc(40*var(--s))}
[dir="rtl"] .staff-reset{right:auto;left:calc(14*var(--s))}
[dir="rtl"] .caret{transform:scaleX(-1)}
[dir="rtl"] .card:active .card-cta .caret,[dir="rtl"] .hcard:active .caret{transform:scaleX(-1) translateX(calc(4*var(--s)))}
[dir="rtl"] .rw em,[dir="rtl"] .br>b,[dir="rtl"] .lgd b{text-align:left}
[dir="rtl"] .rw{border-left-width:calc(1*var(--s));border-right-width:calc(3*var(--s));
  border-right-color:var(--g1);border-right-style:solid}
[dir="rtl"] .rw.warn{border-right-color:var(--amber)}
[dir="rtl"] .rw.bad{border-right-color:var(--coral)}
[dir="rtl"] .rw.pend{border-right-color:rgba(240,247,243,.2)}
[dir="rtl"] .seg-proof li{padding-left:0;padding-right:calc(16*var(--s))}
[dir="rtl"] .seg-proof li::before{left:auto;right:0}
[dir="rtl"] .dep-group li,[dir="rtl"] .ab-person li{padding-left:0;padding-right:calc(13*var(--s))}
[dir="rtl"] .dep-group li::before,[dir="rtl"] .ab-person li::before{left:auto;right:0}
[dir="rtl"] .sb-list .li i,[dir="rtl"] .ag-pl i{order:-1}
[dir="rtl"] .msg-t{border-left:0;border-right:calc(2*var(--s)) solid var(--g1);
  padding-left:0;padding-right:calc(15*var(--s))}
[dir="rtl"] .dep-d-left{border-radius:0 var(--r-lg) var(--r-lg) 0}
[dir="rtl"] .dep-detail .dep-close{left:auto !important;right:calc(28*var(--s))}
[dir="rtl"] .dep-found{border-left-width:calc(1*var(--s));border-right-width:calc(3*var(--s));
  border-right-color:var(--g1);border-right-style:solid}
[dir="rtl"] .card-cta .caret{margin-left:0;margin-right:auto;padding-left:0;padding-right:calc(18*var(--s))}
[dir="rtl"] .attract-title,[dir="rtl"] .talk-wrap,[dir="rtl"] .attract-core{text-align:center}
[dir="rtl"] .stp{text-align:right}

/* ============================================================
   ROUND 3 · clearer text, proof cards, scenario, touch
   ============================================================ */

/* faded grey removed: body copy and labels lift to a readable level */
:root{ --text-mid:rgba(240,247,243,.94); --text-dim:rgba(240,247,243,.82); --text-faint:rgba(240,247,243,.66) }

/* the few places that are deliberately quiet stay quiet */
.staff-reset{color:rgba(212,228,220,.16)}
.bands{opacity:.5}

/* proof points become stacked mini cards under the subtitle */
.seg-proof{display:flex;flex-direction:column;gap:calc(8*var(--s));padding:0;border:0;background:none;flex:0 0 auto}
.pcard{display:flex;align-items:flex-start;gap:calc(12*var(--s));
  padding:calc(14*var(--s)) calc(15*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border-mid);background:rgba(52,177,125,.06);
  animation:stgIn 480ms var(--e-out) both;animation-delay:calc(var(--i)*80ms + 120ms)}
.pcard i{flex:0 0 auto;width:calc(7*var(--s));height:calc(7*var(--s));border-radius:calc(2*var(--s));
  background:var(--g1);margin-top:calc(7*var(--s))}
.pcard span{font-size:calc(14*var(--s));line-height:1.5;color:var(--text-bright);font-weight:500}

/* what the demo shows */
.seg-scenario{margin-top:auto;display:flex;flex-direction:column;gap:calc(7*var(--s));
  padding-top:calc(15*var(--s));border-top:calc(1*var(--s)) solid var(--border)}
.seg-scenario p{font-size:calc(14.5*var(--s));line-height:1.55;color:var(--text-bright)}
.seg-scenario .mini{color:var(--g1)}

/* illustrative marker, always visible on a demo surface */
.sim-illus{position:absolute;right:calc(16*var(--s));top:calc(-30*var(--s));z-index:3;
  font-family:var(--mono);font-size:calc(9*var(--s));letter-spacing:.2em;color:var(--text-faint);
  padding:calc(4*var(--s)) calc(9*var(--s));border-radius:var(--r-xs);
  border:calc(1*var(--s)) solid var(--border);background:rgba(8,14,9,.7)}
.sim-foot{position:relative}
[dir="rtl"] .sim-illus{right:auto;left:calc(16*var(--s))}

/* brighter body copy across the build */
.seg-lead,.hub-lead,.home-sub,.dep-sub,.attract-sub,.card-plain,.hcard-tag,.dcard-desc,
.ab-p,.ab-card p,.ab-layer span,.ab-person li,.dep-group li,.talk-sub,.sim-cap,
.dep-d-desc,.case-note,.fact span,.dcard-best{color:var(--text-dim)}
.k-sm,.ks,.rw span,.lg span,.ck,.nd-h,.br,.sc-kv,.rl,.rl-meta>div{color:var(--text-dim)}
.mini,.kicker,.hcard-eyebrow,.dcard-tag,.hcard-tech,.k-h,.sim-hint,.home-foot,
.attract-strip,.dep-foot,.about-hint{color:var(--text-faint)}

/* touch: no hover dependence, generous targets, no callouts or selection */
*{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.hcard,.card,.dcard,.stp,.lang-b,.btn-talk,.btn-back,.seg-restart,.dep-close,.cap-btn{
  touch-action:manipulation;cursor:pointer}
.stp{min-height:calc(44*var(--s))}
.lang-b{min-height:calc(38*var(--s))}
@media (hover:none){
  .card:active,.hcard:active,.dcard:active{transform:scale(.975)}
}
/* deployment detail: the official render leads, copy sits under it */
.dep-d-left{justify-content:flex-start;gap:calc(12*var(--s));padding-top:calc(24*var(--s))}
.dep-render{flex:1;min-height:0;display:grid;place-items:center;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);margin:calc(4*var(--s)) 0}
.dep-render img{width:auto;height:100%;max-height:100%;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 calc(30*var(--s)) calc(54*var(--s)) rgba(0,0,0,.7));
  animation:float 12s var(--e-std) infinite}
.dep-d-left .dcard-tag{margin-top:0}
.dep-d-title{text-shadow:none}
.dep-detail .dep-close{position:static !important;align-self:flex-start;margin:0 0 calc(4*var(--s))}
[dir="rtl"] .dep-detail .dep-close{align-self:flex-start}

/* touch press feedback, immediate and obvious on a panel */
.is-press{transform:scale(.97) !important;filter:brightness(1.25)}
.card.is-press,.hcard.is-press,.dcard.is-press{transform:scale(.982) !important;
  border-color:var(--border-bright) !important;background:rgba(52,177,125,.10)}
.stp.is-press,.lang-b.is-press,.btn-talk.is-press,.btn-back.is-press,
.seg-restart.is-press,.dep-close.is-press,.btn-about.is-press,.touch-cta.is-press{
  background:rgba(52,177,125,.28) !important}
html,body{overscroll-behavior:none;touch-action:none}
.about-scroll{touch-action:pan-y}
/* the certification is the headline credential on Security Fabric */
.hub-cert{display:flex;align-items:flex-start;gap:calc(13*var(--s));
  padding:calc(15*var(--s)) calc(16*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border-bright);background:rgba(52,177,125,.11);
  animation:stgIn 560ms var(--e-out) both .2s}
.hub-cert[hidden]{display:none}
.cert-mark{flex:0 0 auto;font-size:calc(19*var(--s));color:var(--g1);line-height:1.1}
.cert-tx{display:flex;flex-direction:column;gap:calc(4*var(--s))}
.cert-tx strong{font-family:var(--mono);font-size:calc(11*var(--s));letter-spacing:.18em;color:var(--g1)}
.cert-tx span{font-size:calc(13*var(--s));line-height:1.5;color:var(--text-bright)}
html[lang="ar"] .cert-tx strong{letter-spacing:0;font-size:calc(13*var(--s))}

/* ============================================================
   DECK MODE · driven by a presentation remote
   ============================================================ */
.deck-nav{display:none;align-items:center;gap:calc(4*var(--s));
  padding:calc(3*var(--s));border-radius:var(--r-sm);
  border:calc(1*var(--s)) solid var(--border);background:rgba(8,14,9,.6)}
html[data-deck] .deck-nav{display:inline-flex}
html[data-deck] .btn-back,html[data-deck] .btn-talk,html[data-deck] .staff-reset{display:none !important}
.deck-b{display:grid;place-items:center;min-width:calc(38*var(--s));min-height:calc(36*var(--s));
  border-radius:var(--r-xs);font-size:calc(19*var(--s));line-height:1;color:var(--g1);
  transition:background 240ms var(--e-out)}
.deck-b:active,.deck-b.is-press{background:rgba(52,177,125,.28)}
.deck-pos{font-family:var(--mono);font-size:calc(11*var(--s));letter-spacing:.18em;
  color:var(--text-bright);padding:0 calc(6*var(--s));font-variant-numeric:tabular-nums}
[dir="rtl"] .deck-b span{transform:scaleX(-1)}

/* presenter blank, for when the room should look at the speaker */
.deck-blank{position:fixed;inset:0;z-index:120;background:#000;opacity:0;pointer-events:none;
  transition:opacity 260ms var(--e-std)}
.deck-blank.on{opacity:1;pointer-events:auto}

/* the splash reads as the opening slide rather than a touch prompt */
html[data-deck] .touch-ring{display:none}