/* pages/clients.css — rules only the clients page needs, on top of story.css (#4303 T2): the hero's client-portal
   composition, the portal shell the six stages share (co-branded sidebar, book table, case card, fee decision,
   thread, analytics, metrics), and the page chrome the prototype set inline. Every name and amount is fictional. */
.hero h1{font-size:clamp(40px,5.5vw,78px)}
.i{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
/* the icon sprite is referenced by <use>, never shown */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- hero composition: the client portal assembles in 3D ---------- */
.pbox{position:absolute;z-index:1;right:max(16px,6vw);top:calc(50% - 9svh);transform:translateY(-50%);display:grid;justify-items:center;gap:22px;pointer-events:none;--hk:1}
.hwrap{width:calc(560px * var(--hk));height:calc(330px * var(--hk));perspective:1100px;position:relative}
.hw{position:absolute;left:0;top:0;width:560px;height:330px;transform-origin:0 0;transform:scale(var(--hk)) rotateY(-16deg) rotateX(7deg);transform-style:preserve-3d;
  background:var(--v-card);border:1px solid var(--v-border-hi);border-radius:12px;font:11px/1.4 var(--ui);color:var(--v-text);
  box-shadow:0 50px 110px rgba(0,0,0,.6),0 0 60px rgba(0,224,255,.08),inset 0 1px 0 rgba(255,255,255,.05)}
.hw::before{content:"";position:absolute;inset:-40px;border-radius:40px;background:radial-gradient(60% 60% at 50% 50%,rgba(0,224,255,.22),transparent 70%);filter:blur(30px);opacity:0;z-index:-1;animation:glowin 1.6s ease forwards;animation-delay:1.2s}
.hw .hpulse{animation:hfloat 6s ease-in-out infinite;animation-delay:4.4s}
@keyframes hfloat{50%{transform:translateY(-4px)}}
.hw .hin{position:absolute;inset:0;border-radius:12px;overflow:hidden}
.hside{position:absolute;left:0;top:0;bottom:0;width:140px;background:rgba(14,20,34,.75);border-right:1px solid var(--v-border);padding:12px 10px;display:grid;align-content:start;gap:4px;
  opacity:0;animation:hslam .9s cubic-bezier(.2,1.35,.35,1) forwards;animation-delay:.35s}
@keyframes hslam{0%{opacity:0;transform:translateX(-90px) translateZ(140px) scale(1.2);filter:blur(14px)}40%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}
.hmain{position:absolute;left:140px;right:0;top:0;bottom:0}
.htb{height:34px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--v-border);background:rgba(14,20,34,.5);opacity:0;animation:fadein .6s ease forwards;animation-delay:.9s}
.htb .app{font:700 9.5px var(--ui-mono);letter-spacing:.14em;color:var(--v-cyan)}
.htb .t{font-weight:600;font-size:11px}
.hrows{padding:6px 10px 0}
.hrow{display:grid;grid-template-columns:72px 30px minmax(0,1fr) 92px 50px;gap:8px;align-items:center;height:26px;border-bottom:1px solid rgba(31,42,66,.8);font-size:10px;white-space:nowrap}
.hrow.hd{color:var(--v-text3);font:600 8.5px var(--ui-mono);letter-spacing:.1em;text-transform:uppercase;height:22px}
.hrow:not(.hd){opacity:0;animation:hrowin .7s cubic-bezier(.2,1.2,.3,1) forwards;animation-delay:calc(1.05s + var(--i) * .12s)}
@keyframes hrowin{0%{opacity:0;transform:translateY(16px) translateZ(60px);filter:blur(8px)}100%{opacity:1;transform:none;filter:blur(0)}}
.hrow .mono{font-size:9.5px}
.hcard{position:absolute;right:12px;bottom:12px;width:150px;padding:10px 12px;border-radius:10px;background:var(--v-card2);border:1px solid var(--v-border-hi);box-shadow:0 20px 50px rgba(0,0,0,.5);
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 10px;align-items:center;opacity:0;animation:hpop .8s cubic-bezier(.2,1.3,.3,1) forwards;animation-delay:2.0s;transform-style:preserve-3d}
@keyframes hpop{0%{opacity:0;transform:translateZ(90px) scale(.8)}100%{opacity:1;transform:none}}
.hcard svg{width:56px;height:56px;grid-row:1/3}
.hcard .trk{fill:none;stroke:#1f2a42;stroke-width:9}
.hcard .val{fill:none;stroke:var(--v-amber);stroke-width:9;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:314.16;transform:rotate(-90deg);transform-origin:50% 50%;animation:hdial 1.3s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:2.5s;filter:drop-shadow(0 0 6px rgba(251,191,36,.5))}
@keyframes hdial{to{stroke-dashoffset:100.5}}
.hcard .n{font:700 20px/1 var(--ui-mono);opacity:0;animation:fadein .5s ease forwards;animation-delay:3.3s}
.hcard .lbl{font-size:8.5px}
.hfee{position:absolute;right:12px;top:46px;width:214px;height:46px;perspective:400px;opacity:0;animation:hpop .8s cubic-bezier(.2,1.3,.3,1) forwards;animation-delay:1.8s}
.hfee .face{position:absolute;inset:0;border-radius:9px;border:1px solid var(--v-border-hi);background:var(--v-card2);padding:7px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px;backface-visibility:hidden;box-shadow:0 16px 40px rgba(0,0,0,.45)}
.hfee .face b{font-size:10px;font-weight:600;white-space:nowrap}.hfee .face small{font-size:9px;color:var(--v-text2);grid-column:1;white-space:nowrap}
.hfee .face .chip{grid-column:2;grid-row:1/3;font-size:9.5px;padding:2px 7px}
.hfee .face.b{transform:rotateX(180deg)}
.hfee .flip{position:absolute;inset:0;transform-style:preserve-3d;animation:hflip 1s cubic-bezier(.3,1.25,.4,1) forwards;animation-delay:3.4s}
@keyframes hflip{to{transform:rotateX(180deg)}}
.hfee .face.b{box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 24px rgba(52,211,153,.25)}
.hglint{position:absolute;inset:0;border-radius:12px;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);background-size:300% 100%;background-position:120% 0;background-repeat:no-repeat;mix-blend-mode:screen;pointer-events:none;
  animation:glint 1.4s cubic-bezier(.45,0,.2,1) forwards;animation-delay:3.6s}
.htrace{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none}
.htrace rect{fill:none;stroke:var(--v-cyan);stroke-width:1.6;rx:12;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px var(--v-cyan));animation:trace 1.6s ease-in-out forwards,traceout 1.2s ease forwards;animation-delay:1.3s,3.6s}
.hside .brand{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.lg{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#6b9fd4,#00e0ff);display:grid;place-items:center;font:700 13px var(--ui-mono);color:#06101f;flex:none}
.bn{font-size:10.5px;font-weight:600;line-height:1.2}
.hside .lbl,.side .lbl{font-size:8.5px}
.hnav,.snav{display:grid;gap:2px}
.hnav span,.snav span{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:6px;font-size:10.5px;color:var(--v-text2)}
.hnav span.on,.snav span.on{background:rgba(0,224,255,.10);color:var(--v-cyan)}
.ub{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--v-cyan);box-shadow:0 0 10px var(--v-cyan)}
.ub.live{animation:pulse 1.4s ease-in-out infinite}
.hside .live{position:absolute;left:10px;bottom:12px;display:flex;gap:6px;align-items:center;font:600 8.5px var(--ui-mono);letter-spacing:.12em;color:var(--v-emerald);text-transform:uppercase;opacity:0;animation:fadein .6s ease forwards;animation-delay:4.2s}
@media (max-width:1200px){.pbox{right:max(12px,3vw)}}
@media (max-width:820px){.pbox{right:auto;left:50%;top:11svh;transform:translateX(-50%);opacity:.8}.hwrap{overflow:hidden;border-radius:12px}.hw{transform:scale(var(--hk))}.marktag{font-size:10px;letter-spacing:.16em;white-space:nowrap}}
@media (prefers-reduced-motion:reduce){
  .hw::before,.hside,.htb,.hrow,.hcard,.hcard .n,.hcard .val,.hfee,.hfee .flip,.hglint,.htrace rect,.hside .live,.hw .hpulse{animation:none!important}
  .hside,.htb,.hrow,.hcard,.hcard .n,.hfee,.hside .live{opacity:1!important;transform:none!important;filter:none!important}
  .hw::before{opacity:1}.hcard .val{stroke-dashoffset:100.5}.hfee .flip{transform:rotateX(180deg)}.htrace rect{stroke-dashoffset:0;opacity:.28}.hglint{display:none}
}

/* ---------- portal shell (shared by the six stages) ---------- */
.pw{position:absolute;top:40px;left:0;right:0;bottom:0;display:grid;grid-template-columns:156px minmax(0,1fr)}
.side{position:relative;background:rgba(14,20,34,.55);border-right:1px solid var(--v-border);padding:14px 12px;display:grid;align-content:start;gap:6px}
.side .brand{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.side .who{position:absolute;left:12px;right:12px;bottom:12px;font-size:10.5px;color:var(--v-text2);line-height:1.3}
.side .who b{display:block;color:var(--v-text);font-weight:600}
.main{position:relative;overflow:hidden;padding:12px 14px;font-size:11px}
.tool{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:nowrap}
.sch{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:6px;border:1px solid var(--v-border);background:var(--v-recess);color:var(--v-text3);font-size:10.5px;min-width:230px}
.fc{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:6px;border:1px solid var(--v-border);color:var(--v-text2);font-size:10.5px;white-space:nowrap;transition:all .35s}
.fc .i{width:11px;height:11px}
.fc.on{border-color:var(--v-cyan);color:var(--v-cyan);background:rgba(0,224,255,.10);box-shadow:0 0 0 2px rgba(0,224,255,.12)}
.fc.lnk{border-color:transparent;color:var(--v-steel)}
.xbtn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:6px;border:1px solid var(--v-border-hi);color:var(--v-text);font-size:10.5px;font-weight:600;white-space:nowrap;transition:all .25s}
.xbtn.pri{background:var(--v-cyan);color:#06101f;border-color:transparent}
.xbtn.press,.pbtn.press{transform:scale(.96);box-shadow:0 0 0 3px rgba(0,224,255,.25)}
table.bk{width:100%;border-collapse:collapse;table-layout:fixed;font-size:10px}
.bk th{font:600 8.5px var(--ui-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--v-text3);text-align:left;padding:5px 6px;border-bottom:1px solid var(--v-border);white-space:nowrap;overflow:hidden}
.bk td{padding:0 6px;height:30px;border-bottom:1px solid rgba(31,42,66,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;transition:opacity .4s}
.bk td.v{font:10px var(--ui-mono);overflow:visible;text-overflow:clip;letter-spacing:-.01em}
.bk td.r{text-align:right;font-family:var(--ui-mono)}
.bk tr.dim td{opacity:.22}
.bk tr.sel td{background:linear-gradient(90deg,rgba(0,224,255,.12),rgba(0,224,255,.03))}
.bk tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--v-cyan)}
.cs{font-family:var(--ui-mono);color:var(--v-text);display:inline-flex;align-items:center;gap:3px}
.cs .i{width:10px;height:10px;color:var(--v-steel)}
.fr{display:inline-grid;place-items:center;min-width:24px;height:18px;padding:0 5px;border-radius:5px;font:700 10px var(--ui-mono)}
.fr.sv{color:var(--v-red);background:rgba(248,113,113,.14)}.fr.hi{color:var(--v-amber);background:rgba(251,191,36,.14)}.fr.md{color:var(--v-steel);background:rgba(107,159,212,.14)}.fr.sm{color:var(--v-emerald);background:rgba(52,211,153,.14)}
.chip.xs{font-size:9.5px;padding:2px 7px}
.chip.r{color:var(--v-red);background:rgba(248,113,113,.14)}
.dcs{display:inline-flex;gap:3px;position:relative}
.dc{display:inline-grid;place-items:center;height:17px;padding:0 4px;border-radius:4px;font:700 8.5px var(--ui-mono);letter-spacing:.02em;position:relative;transition:all .4s}
.dc.ok{color:var(--v-emerald);background:rgba(52,211,153,.14)}.dc.miss{color:var(--v-red);background:rgba(248,113,113,.14)}.dc.rev{color:var(--v-amber);background:rgba(251,191,36,.14)}
.dc.scan{color:var(--v-steel);background:rgba(107,159,212,.12)}
.dc.scan::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--v-cyan);border-right-color:transparent;animation:spin .8s linear infinite;background:var(--v-card)}
.tip{position:absolute;left:50%;bottom:calc(100% + 5px);transform:translate(-50%,4px);white-space:nowrap;font:600 9px var(--ui);padding:3px 7px;border-radius:5px;background:#1b2740;border:1px solid var(--v-border-hi);color:var(--v-text);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;z-index:5}
.tip.show{opacity:1;transform:translate(-50%,0)}
.ld{color:var(--v-red);font-weight:700}.lw{color:var(--v-amber);font-weight:600}
.tft{display:flex;gap:14px;align-items:center;margin-top:8px;font-size:9.5px;color:var(--v-text3)}
.tft .dc{height:14px;font-size:8px}
.lhp{position:absolute;z-index:6;background:#151d30;border:1px solid var(--v-border-hi);border-radius:9px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:10px;font-size:10.5px;width:250px;
  opacity:0;transform:translateY(-6px) scale(.98);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.lhp.show{opacity:1;transform:none}
.lhp .sch{min-width:0;width:100%;height:24px;margin-bottom:6px}
.lhp .pr{display:flex;justify-content:space-between;align-items:center;padding:6px 6px;border-radius:5px;gap:8px}
.lhp .pr.hov{background:rgba(0,224,255,.10)}
.lhp .pr b{font:600 10.5px var(--ui-mono);color:var(--v-text2)}
.lhp .pr .cb{width:12px;height:12px;border-radius:3px;border:1.5px solid var(--v-border-hi);display:inline-grid;place-items:center;margin-right:6px;flex:none}
.lhp .pr .cb.on{background:var(--v-cyan);border-color:var(--v-cyan);color:#06101f}
.toast{position:absolute;right:14px;bottom:14px;z-index:6;display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:8px;background:#151d30;border:1px solid var(--v-border-hi);box-shadow:0 20px 50px rgba(0,0,0,.5);font-size:10.5px;color:var(--v-text);
  opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.toast.show{opacity:1;transform:none}
.toast .ok{width:18px;height:18px;border-radius:50%;background:rgba(52,211,153,.18);color:var(--v-emerald);display:grid;place-items:center}
.toast .ok .i{width:11px;height:11px;stroke-width:2.2}
.cur{position:absolute;z-index:7;width:20px;height:20px;border-radius:50%;border:2px solid var(--v-cyan);opacity:0;pointer-events:none;transform:scale(1.8)}
.cur.go{animation:clk .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes clk{0%{opacity:0;transform:scale(1.8)}30%{opacity:1}100%{opacity:0;transform:scale(.6)}}

/* case card rail */
.ccard{position:absolute;right:0;top:0;bottom:0;width:330px;z-index:4;background:var(--v-card2);border-left:1px solid var(--v-border-hi);padding:14px 16px;box-shadow:-30px 0 60px rgba(0,0,0,.45);
  opacity:0;transform:translateX(28px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1);font-size:11px}
.ccard.on{opacity:1;transform:none}
.ccard .hd{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-bottom:8px}
.ccard .hd b{font-size:13px;font-weight:600;display:block}
.kv2{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:10.5px}
.kv2 div{display:grid;gap:1px}.kv2 dt{color:var(--v-text3);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-family:var(--ui-mono)}.kv2 dd{margin:0}
.frc{display:grid;grid-template-columns:104px minmax(0,1fr);gap:4px 14px;align-items:center}
.dial{width:104px;height:104px;grid-row:1/4}
.dial .trk{fill:none;stroke:#1f2a42;stroke-width:9}
.dial .val{fill:none;stroke:var(--v-amber);stroke-width:9;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:314.16;transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 0 6px rgba(251,191,36,.45))}
.dial text{fill:var(--v-text);font:700 26px var(--ui-mono);text-anchor:middle}
.dial .sub{fill:var(--v-text3);font:600 8px var(--ui-mono);letter-spacing:.1em}
.sig{display:grid;gap:5px;margin-top:8px;font-size:10.5px;color:var(--v-text)}
.sig div{display:flex;gap:8px;align-items:start;min-height:16px}
.sig i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--v-amber);margin-top:5px;box-shadow:0 0 8px rgba(251,191,36,.6)}
.sig .caret{height:12px}

/* fee approvals */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kpi{border:1px solid var(--v-border);border-radius:8px;padding:8px 10px;background:var(--v-recess)}
.kpi b{display:block;font:700 18px/1.1 var(--ui-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .lbl{font-size:8.5px;margin-top:3px;display:block}
.kpi.a b{color:var(--v-amber)}.kpi.g b{color:var(--v-emerald)}
.ttl{font:600 9px var(--ui-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-text3);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.ttl .lg2{display:flex;gap:10px;text-transform:none;letter-spacing:0;font:500 9px var(--ui)}
.ttl .lg2 span{display:inline-flex;align-items:center;gap:4px}.ttl .lg2 i{width:8px;height:8px;border-radius:2px;display:inline-block}
.ln{width:100%;height:100%;display:block;overflow:visible}
.ln path,.ln polyline{fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s ease}
.ln.on path,.ln.on polyline{stroke-dashoffset:0}
.ln .fill{fill:url(#gfill);stroke:none;opacity:0;transition:opacity 1s ease .6s}
.ln.on .fill{opacity:1}
.tabs{display:flex;gap:16px;border-bottom:1px solid var(--v-border);margin:10px 0 0;font-size:10.5px;color:var(--v-text2)}
.tabs span{padding:4px 2px 6px;border-bottom:2px solid transparent;transition:all .3s}
.tabs span.on{color:var(--v-text);border-bottom-color:var(--v-cyan)}
.tabs span small{color:var(--v-text3);margin-left:4px}
.dec{position:absolute;left:600px;top:66px;width:470px;z-index:5;font-size:11px}
.dec .pad{padding:14px 16px}
.amts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 4px}
.amts .lbl{font-size:8.5px;margin-bottom:4px;display:block}
.amts .req{font:600 18px/1.2 var(--ui-mono)}
.inp{height:30px;border-radius:6px;border:1px solid var(--v-border-hi);background:var(--v-recess);padding:0 9px;display:flex;align-items:center;font:600 13px var(--ui-mono);color:var(--v-text);transition:box-shadow .3s}
.inp.focus{box-shadow:0 0 0 2px rgba(0,224,255,.25);border-color:var(--v-cyan)}
.inp .pre{color:var(--v-text3);margin-right:2px}
.inp.nt{font:11px var(--ui);height:28px;color:var(--v-text)}
.tb .app,.tb .t{white-space:nowrap}.tb .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.inp .ph{color:var(--v-text3)}
.diff{font-size:10px;color:var(--v-amber);margin-top:4px;opacity:0;transition:opacity .4s}
.diff.show{opacity:1}
.rvw{margin-top:10px;border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.08);border-radius:8px;padding:9px 11px;font-size:10.5px;color:var(--v-text)}
.rvw b{display:block;color:var(--v-amber);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--ui-mono);margin-bottom:4px}
.rvw .ck2{display:flex;gap:8px;align-items:center;margin-top:8px;color:var(--v-text2)}
.cbx{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--v-border-hi);display:inline-grid;place-items:center;flex:none;transition:all .3s;color:#06101f}
.cbx .i{width:10px;height:10px;stroke-width:2.4;opacity:0;transition:opacity .2s}
.cbx.on{background:var(--v-cyan);border-color:var(--v-cyan)}.cbx.on .i{opacity:1}
.btns{display:flex;gap:8px;margin-top:12px;align-items:center}
.pbtn{height:30px;padding:0 12px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;border:1px solid var(--v-border-hi);color:var(--v-text);transition:all .25s}
.pbtn.ok{background:var(--v-emerald);color:#06101f;border-color:transparent}
.pbtn.dis{opacity:.4}
.cfm,.res{margin-top:10px;border-radius:8px;padding:10px 12px;font-size:10.5px;display:none}
.cfm{border:1px solid var(--v-border-hi);background:var(--v-recess)}
.cfm b{display:block;font-size:12px;margin-bottom:3px}
.cfm .btns{margin-top:8px}
.res{border:1px solid rgba(52,211,153,.4);background:rgba(52,211,153,.10);color:var(--v-text)}
.res b{color:var(--v-emerald)}
.cfm.show,.res.show{display:block;animation:fadein .4s ease}
.ap{color:var(--v-emerald);font-weight:700}
.upd{display:inline-grid;place-items:center;min-width:16px;height:16px;border-radius:8px;padding:0 5px;font:700 9px var(--ui-mono);color:#06101f;background:var(--v-cyan)}

/* thread */
.thr{position:absolute;left:14px;right:244px;top:12px;bottom:12px;display:flex;flex-direction:column}
.thr .hd{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--v-border);font-size:11.5px}
.thr .hd b{font-weight:600}
.msgs{flex:1;display:flex;flex-direction:column;gap:7px;padding:10px 0;overflow:hidden;justify-content:flex-end}
.day{display:flex;align-items:center;gap:10px;font:600 8.5px var(--ui-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-text3)}
.day::before,.day::after{content:"";flex:1;height:1px;background:var(--v-border)}
.msg{max-width:72%;padding:7px 10px;border-radius:10px;font-size:10.5px;line-height:1.45;position:relative}
.msg .au{display:block;font:600 9px var(--ui-mono);letter-spacing:.06em;color:var(--v-text3);margin-bottom:2px}
.msg.bcr{align-self:flex-start;background:var(--v-recess);border:1px solid var(--v-border);border-bottom-left-radius:3px}
.msg.bcr.new{border-color:rgba(0,224,255,.45)}
.msg.me{align-self:flex-end;background:rgba(0,224,255,.12);border:1px solid rgba(0,224,255,.3);border-bottom-right-radius:3px}
.msg .stt{display:block;font:9px var(--ui-mono);color:var(--v-text3);margin-top:3px;text-align:right}
.msg .stt.sent{color:var(--v-emerald)}
.ev{align-self:center;display:inline-flex;gap:6px;align-items:center;font-size:10px;color:var(--v-emerald);background:rgba(52,211,153,.12);border-radius:999px;padding:3px 10px}
.typing{align-self:flex-start;display:flex;gap:3px;padding:8px 10px;background:var(--v-recess);border:1px solid var(--v-border);border-radius:10px;opacity:0;transition:opacity .3s,display .3s allow-discrete}
.typing.show{opacity:1}
@starting-style{.typing.show{opacity:0}}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--v-text3);animation:pulse 1s ease-in-out infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.cmp{display:flex;gap:8px;align-items:center;border:1px solid var(--v-border-hi);border-radius:8px;padding:0 6px 0 10px;height:34px;background:var(--v-recess);font-size:10.5px;color:var(--v-text3)}
.cmp .tx{flex:1;color:var(--v-text);white-space:nowrap;overflow:hidden}
.cmp .tx.ph{color:var(--v-text3)}
.cmp .snd{width:24px;height:24px;border-radius:6px;background:var(--v-cyan);color:#06101f;display:grid;place-items:center;transition:transform .2s}
.cmp .snd .i{width:12px;height:12px;stroke-width:2}
.fsum{position:absolute;right:14px;top:12px;width:218px;border:1px solid var(--v-border);border-radius:9px;padding:10px 12px;background:var(--v-recess);font-size:10.5px}
.fsum .kv2{grid-template-columns:1fr;gap:7px}
.unr{position:absolute;left:150px;top:92px;width:280px;z-index:8;background:#151d30;border:1px solid var(--v-border-hi);border-radius:9px;box-shadow:0 24px 60px rgba(0,0,0,.6);padding:8px;font-size:10.5px;
  opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.unr.show{opacity:1;transform:none}
.unr .ttl{margin:2px 4px 6px}
.unr .ur{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:7px 8px;border-radius:6px;transition:background .3s}
.unr .ur.hov{background:rgba(0,224,255,.12)}
.unr .ur b{font-weight:600}.unr .ur small{color:var(--v-text2);font-size:10px;grid-column:1}
.unr .ur .upd{grid-row:1/3;align-self:center}
.unr::before{content:"";position:absolute;left:-6px;top:14px;width:10px;height:10px;background:#151d30;border-left:1px solid var(--v-border-hi);border-bottom:1px solid var(--v-border-hi);transform:rotate(45deg)}

/* analytics */
.url{display:flex;align-items:center;gap:8px;height:26px;padding:0 10px;border-radius:6px;border:1px solid var(--v-border);background:var(--v-recess);font:10px var(--ui-mono);color:var(--v-text2);margin-bottom:8px}
.url .pth{color:var(--v-text)}.url .q{color:var(--v-cyan)}
.url .cp{margin-left:auto;display:inline-flex;gap:5px;align-items:center;color:var(--v-steel);font:600 9.5px var(--ui);padding:2px 7px;border-radius:5px;border:1px solid var(--v-border-hi);transition:all .25s}
.url .cp.done{color:var(--v-emerald);border-color:rgba(52,211,153,.5)}
.rng{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.rng .fc{height:22px;font-size:10px}
.rng .dt{margin-left:auto;display:inline-flex;gap:6px;align-items:center;color:var(--v-text3);font-size:10px}
.rng .dt span{height:22px;padding:0 8px;border:1px solid var(--v-border);border-radius:5px;display:inline-grid;place-items:center;font-family:var(--ui-mono);color:var(--v-text2)}
.cg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;margin-top:10px}
.card{border:1px solid var(--v-border);border-radius:9px;padding:10px 12px;background:var(--v-recess);min-height:0}
.vb{display:flex;align-items:flex-end;gap:3px;height:120px}
.vb i{flex:1;display:block;height:var(--h);border-radius:2px 2px 0 0;background:var(--c,var(--v-cyan));transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 30ms);opacity:.85}
.vb.on i{transform:scaleY(1)}
.vb.grp{gap:6px}.vb.grp span{flex:1;display:flex;gap:2px;align-items:flex-end;height:100%}
.vb.grp i{flex:1}
.ovl{position:relative}.ovl .ln{position:absolute;inset:0}
.ax{display:flex;justify-content:space-between;font:8.5px var(--ui-mono);color:var(--v-text3);margin-top:4px}
.hb{display:grid;gap:7px;font-size:10px}
.hb div{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:2px 8px;align-items:center}
.hb .bar2{grid-column:1/-1;height:6px}
.hb b{font:600 10px var(--ui-mono);text-align:right;color:var(--v-text2)}
.hb .bar2 i{transition-delay:calc(var(--i) * 120ms)}
.lay{position:absolute;left:14px;right:14px;top:142px;bottom:12px;transition:opacity .5s ease,transform .5s ease,visibility .5s}
.lay.hide{opacity:0;transform:translateY(8px);pointer-events:none}
.dl{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:5px;border:1px solid var(--v-border-hi);font-size:9.5px;font-weight:600;color:var(--v-text);margin-right:4px;transition:all .25s}
.dl .i{width:11px;height:11px}
.dl.press{background:rgba(0,224,255,.15);border-color:var(--v-cyan);color:var(--v-cyan)}

/* metrics */
.per{display:inline-flex;border:1px solid var(--v-border);border-radius:6px;padding:2px;gap:2px;font-size:10px}
.per span{padding:3px 10px;border-radius:4px;color:var(--v-text2);transition:all .3s}
.per span.on{background:rgba(0,224,255,.14);color:var(--v-cyan)}
.mg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 168px 148px;gap:10px}
.mg .card{overflow:hidden}
.age .bar2{grid-column:2}
.fw{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fw .kpi{padding:6px 10px}.fw .kpi b{font-size:15px}
.donut{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center}
.donut svg{width:96px;height:96px}
.donut circle{fill:none;stroke-width:14;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray 1.1s cubic-bezier(.2,.7,.2,1),stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.donut .lgd{display:grid;gap:5px;font-size:10px}
.donut .lgd div{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:6px;align-items:center}
.donut .lgd i{width:8px;height:8px;border-radius:2px}
.donut .lgd b{font:600 10px var(--ui-mono);color:var(--v-text2)}
.age{display:grid;gap:6px;font-size:10px}
.age div{display:grid;grid-template-columns:40px minmax(0,1fr) 28px;gap:8px;align-items:center}
.age .bar2{height:8px}
.age .bar2 i{background:var(--c);transition-delay:calc(var(--i) * 100ms)}
.age b{font:600 10px var(--ui-mono);text-align:right;color:var(--v-text2)}
.bands{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px;margin:6px 0 8px}
.bands i{display:block;height:100%;width:var(--w);background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 120ms)}
.bands.on i{transform:scaleX(1)}
.bl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;font-size:9.5px;color:var(--v-text2)}
.bl b{display:block;font:600 11px var(--ui-mono);color:var(--v-text)}
.urg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ut{border-radius:8px;padding:8px 10px;border:1px solid var(--v-border)}
.ut b{display:block;font:700 20px/1.1 var(--ui-mono)}.ut span{font-size:9px;color:var(--v-text2);display:block;margin-top:2px}
.ut.red{border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.10)}.ut.red b{color:var(--v-red)}
.ut.amb{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.10)}.ut.amb b{color:var(--v-amber)}
.ut.stl b{color:var(--v-steel)}
.card .n2{font:700 18px/1 var(--ui-mono)}
@media (prefers-reduced-motion:reduce){.ub.live,.dc.scan::after,.typing i,.cur.go,.cfm.show,.res.show{animation:none!important}.vb i,.bands i,.ln path,.ln polyline,.donut circle,.bar2 i,.ccard,.lhp,.toast,.unr,.lay,.typing{transition:none!important}}

/* ---------- after the story: the integrations rows stagger by --i (the prototype set it inline) ---------- */
#integrations .srow:nth-child(1){--i:0}
#integrations .srow:nth-child(2){--i:1}
#integrations .srow:nth-child(3){--i:2}
#integrations .srow:nth-child(4){--i:3}
.contact__lede{margin-top:14px}
.contact__lede a{color:inherit;text-decoration-color:var(--line);text-underline-offset:3px}
.contact__lede a:hover{color:var(--fg)}

/* ---------- until the engine boots (or with JS off) the stages read in their end state, as story.css does for
   [data-at]: the case card is open, the charts are drawn. The markup carries the end values; reset() replays. ---------- */
html:not(.story) .ccard{opacity:1;transform:none}
html:not(.story) :is(.vb i,.bands i){transform:none}
html:not(.story) .ln :is(path,polyline){stroke-dashoffset:0}
html:not(.story) .ln .fill{opacity:1}
html:not(.story) .dial .val{stroke-dashoffset:100.5}
/* the hero composition's scale is set by clients.js; these steps keep it inside a phone screen before (or without) it */
@media (max-width:820px){.pbox{--hk:.6}}
@media (max-width:383px){.pbox{--hk:.48}}
/* reduced motion: the integrations index colour lands at once (story.css stops the row, not its .id) */
@media (prefers-reduced-motion:reduce){#integrations .srow .id{transition:none}}
/* a reveal or popover that is not showing is hidden outright, not just transparent: assistive tech and the contrast
   check skip it, and it can never catch a pointer. visibility flips at once on show, so the fade still plays. */
html.story .stage [data-at]:not(.on),.lhp:not(.show),.toast:not(.show),.tip:not(.show),.unr:not(.show),.lay.hide{visibility:hidden}
/* the hero window's glow (::before, inset -40px + blur) reaches past the right edge between 821 and ~1100px */
.hero{overflow-x:clip}
/* the unread counts sit in the popover's narrow right column instead of stretching across the first */
.unr .ur .upd{grid-column:2;justify-self:end}
/* the typing dots take no room until they show, so the finished thread has no gap above the reply */
.typing:not(.show){display:none}
/* the endless loops run only while the engine plays their stage (clients.js sets .art.playing), as the hero's run only
   while it plays: off screen, before the first play and with the engine missing they hold still */
.art:not(.playing) :is(.ub.live,.dot.live),.art:not(.playing) .dc.scan::after{animation:none}
/* #4310 T9: the case and fee panes are real <dl>s (dt/dd need one); keep the old <div> box */
dl.kv2{margin:0}