/* =====================================================================
fractional/cx.ai — shared stylesheet
Edit tokens in :root to restyle the whole site.
===================================================================== */
:root{
--ink:#06060b;
--ink-2:#0b0b14;
--violet:#7b5cf0;
--indigo:#5468f2;
--blue:#2b8be6;
--cyan:#22d3ee;
--text:#eceef6;
--muted:#9a9cb4;
--dim:#6a6c85;
--line:rgba(255,255,255,.09);
--panel:rgba(255,255,255,.035);
--grad:linear-gradient(120deg,#7b5cf0 0%,#5468f2 42%,#2b8be6 72%,#22d3ee 100%);
--maxw:1180px;
--nav-h:150px;
color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
margin:0;background:var(--ink);color:var(--text);
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(123,92,240,.35)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- background layers ---------- */
.aurora{position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;filter:blur(90px);opacity:.45}
.blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.b1{width:62vmax;height:62vmax;left:-14vmax;top:-18vmax;background:radial-gradient(circle at 30% 30%,rgba(123,92,240,.6),transparent 62%);animation:drift1 26s ease-in-out infinite}
.b2{width:56vmax;height:56vmax;right:-16vmax;top:2vmax;background:radial-gradient(circle at 60% 40%,rgba(43,139,230,.5),transparent 62%);animation:drift2 32s ease-in-out infinite}
.b3{width:48vmax;height:48vmax;left:28vmax;bottom:-24vmax;background:radial-gradient(circle at 50% 50%,rgba(34,211,238,.32),transparent 62%);animation:drift3 38s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(10vmax,7vmax,0) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-11vmax,9vmax,0) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(8vmax,-9vmax,0) scale(1.15)}}
.grid-bg{
position:fixed;inset:0;z-index:-1;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(ellipse 90% 60% at 50% 4%,#000 10%,transparent 76%);
-webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 4%,#000 10%,transparent 76%);
}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");}
/* ---------- layout ---------- */
.wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 28px}
main{position:relative;z-index:2}
section{position:relative;z-index:2}
.band{padding:96px 0}
.band-tight{padding:64px 0}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}
/* ---------- nav ---------- */
.nav{
position:sticky;top:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;
background:rgba(6,6,11,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.nav.stuck{border-bottom-color:var(--line);background:rgba(6,6,11,.9)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:22px;width:100%}
.mark{display:flex;align-items:center;text-decoration:none;user-select:none;flex:0 0 auto}
.mark img{height:102px;width:auto;filter:brightness(1.45) saturate(1.12);transition:filter .3s}
.mark:hover img{filter:brightness(1.72) saturate(1.25) drop-shadow(0 0 18px rgba(123,92,240,.5))}
.links{display:flex;align-items:center;gap:4px}
.links a{
position:relative;text-decoration:none;font-size:14.5px;font-weight:450;color:var(--muted);
padding:9px 14px;border-radius:9px;transition:color .22s,background .22s;white-space:nowrap;
}
.links a:hover{color:var(--text);background:rgba(255,255,255,.055)}
.links a.active{color:var(--text)}
.links a.active::after{
content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--grad);
}
.nav-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.burger{
display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.04);
cursor:pointer;padding:0;place-items:center;color:var(--text);
}
.burger svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
/* mobile drawer */
.drawer{
position:fixed;inset:var(--nav-h) 0 0;z-index:49;padding:26px 28px 40px;
background:rgba(6,6,11,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
transform:translateY(-14px);opacity:0;visibility:hidden;transition:.3s;overflow-y:auto;
}
.drawer.open{transform:none;opacity:1;visibility:visible}
.drawer a{
display:block;text-decoration:none;color:var(--text);font-size:20px;font-weight:500;letter-spacing:-.02em;
padding:17px 0;border-bottom:1px solid var(--line);
}
.drawer a:last-of-type{border-bottom:0}
.drawer .btn{width:100%;justify-content:center;margin-top:22px}
/* ---------- type ---------- */
h1{margin:0 0 22px;font-weight:700;letter-spacing:-.035em;line-height:1.04;font-size:clamp(34px,5.6vw,60px)}
h2{margin:0 0 16px;font-size:clamp(26px,3.7vw,42px);font-weight:700;letter-spacing:-.03em;line-height:1.13}
h3{margin:0 0 9px;font-size:18px;font-weight:600;letter-spacing:-.015em}
h4{margin:0 0 7px;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 16px}
.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shift 9s ease-in-out infinite}
@keyframes shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);font-weight:600;margin:0 0 18px}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.eyebrow.c{justify-content:center}
.eyebrow.c::after,.eyebrow.c::before{content:"";flex:0 0 46px;height:1px;background:var(--line)}
.lead{margin:0 0 46px;max-width:62ch;color:var(--muted);font-weight:300;font-size:clamp(15.5px,1.7vw,18.5px);line-height:1.68}
.lead.c{margin-left:auto;margin-right:auto;text-align:center}
.muted{color:var(--muted)}
.small{font-size:13.5px;color:var(--dim);line-height:1.6}
blockquote{
margin:34px 0;padding:26px 30px;border-left:2px solid transparent;border-radius:0 16px 16px 0;
border-image:var(--grad) 1;border-left-width:2px;border-left-style:solid;
background:linear-gradient(90deg,rgba(123,92,240,.1),transparent 70%);
font-size:clamp(17px,2.1vw,21px);font-weight:300;line-height:1.55;letter-spacing:-.015em;color:#dfe2f0;
}
blockquote cite{display:block;margin-top:12px;font-size:13px;font-style:normal;color:var(--dim);letter-spacing:.02em}
/* ---------- pill / badge ---------- */
.pill{
display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;
border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.045);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#c9cbdd;font-weight:500;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:ping 2.1s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,211,238,.55)}70%{box-shadow:0 0 0 11px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
.tag{
display:inline-block;padding:4px 11px;border-radius:100px;border:1px solid var(--line);
background:rgba(255,255,255,.04);font-size:11.5px;color:var(--muted);letter-spacing:.02em;
}
/* ---------- buttons ---------- */
.btn{
border:0;cursor:pointer;font:inherit;font-weight:600;font-size:14.5px;letter-spacing:.01em;text-decoration:none;
display:inline-flex;align-items:center;gap:9px;
padding:12px 24px;border-radius:100px;color:#fff;background:var(--grad);background-size:180% 100%;
transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background-position .5s;
box-shadow:0 6px 26px rgba(84,104,242,.34);white-space:nowrap;
}
.btn:hover{background-position:100% 50%;box-shadow:0 10px 34px rgba(84,104,242,.48)}
.btn:active{transform:scale(.97)}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn-lg{font-size:16px;padding:16px 34px}
.btn-sm{font-size:13.5px;padding:9px 18px}
.btn-ghost{
background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--line);box-shadow:none;
}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);box-shadow:none}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-row.c{justify-content:center}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-off .rv{opacity:1!important;transform:none!important;transition:none!important}
/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:18px}
.cards-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.card{
position:relative;padding:30px 26px 28px;border:1px solid var(--line);border-radius:20px;
background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;
transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .3s;
}
.card::before{
content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(123,92,240,.16),transparent 55%);
}
.card:hover{border-color:rgba(123,92,240,.4)}
.card:hover::before{opacity:1}
.card > *{position:relative}
.card p{margin:0;font-size:14.6px;color:var(--muted);font-weight:300;line-height:1.62}
.card p + p{margin-top:12px}
.ico{
width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
background:linear-gradient(140deg,rgba(123,92,240,.28),rgba(34,211,238,.18));
border:1px solid rgba(255,255,255,.13);
}
.ico svg{width:21px;height:21px;stroke:#cfd2ea;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.num{position:absolute;right:20px;top:16px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:rgba(255,255,255,.16)}
/* ---------- engagement cards ---------- */
.engage{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.eng{
display:flex;flex-direction:column;padding:32px 28px;border:1px solid var(--line);border-radius:22px;
background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
transition:border-color .3s,transform .3s;
}
.eng:hover{border-color:rgba(123,92,240,.4);transform:translateY(-4px)}
.eng.feature{border-color:rgba(123,92,240,.4);background:linear-gradient(165deg,rgba(123,92,240,.14),rgba(255,255,255,.02) 60%)}
.eng .step{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.14em;color:var(--cyan);margin-bottom:14px}
.eng h3{font-size:20px;margin-bottom:11px}
.eng > p{font-size:14.6px;color:var(--muted);font-weight:300;line-height:1.62}
.eng ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.eng ul li{display:flex;gap:11px;font-size:14px;color:var(--muted);font-weight:300;line-height:1.55}
.eng ul li::before{
content:"";flex:0 0 auto;width:15px;height:15px;margin-top:4px;border-radius:50%;
background:linear-gradient(140deg,rgba(123,92,240,.5),rgba(34,211,238,.4));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.eng .foot{margin-top:auto;padding-top:22px;font-size:13.4px;color:var(--dim);font-weight:300;line-height:1.6}
/* ---------- bullets ---------- */
.bullets{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:13px}
.bullets li{display:flex;gap:12px;align-items:flex-start;font-size:15.2px;color:var(--muted);font-weight:300;line-height:1.6}
.bullets svg{flex:0 0 auto;width:17px;height:17px;margin-top:4px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stat{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.stat .v{font-size:clamp(28px,3.6vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.05;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .k{margin-top:6px;font-size:12.8px;color:var(--muted);font-weight:300;line-height:1.5}
/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.top{align-items:start}
/* ---------- numbered list (stall patterns) ---------- */
.steps{display:grid;gap:14px}
.step-row{
display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start;
padding:24px 26px;border:1px solid var(--line);border-radius:18px;background:var(--panel);
transition:border-color .3s,background .3s;
}
.step-row:hover{border-color:rgba(123,92,240,.35);background:rgba(255,255,255,.055)}
.step-row .n{
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;font-weight:500;
width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
background:linear-gradient(140deg,rgba(123,92,240,.24),rgba(34,211,238,.14));
border:1px solid rgba(255,255,255,.12);color:#dfe2f5;
}
.step-row p{margin:0;font-size:14.8px;color:var(--muted);font-weight:300;line-height:1.62}
/* ---------- sectors ---------- */
.sector{
padding:26px 28px;border:1px solid var(--line);border-radius:18px;background:var(--panel);
transition:border-color .3s,transform .3s;
}
.sector:hover{border-color:rgba(123,92,240,.38);transform:translateY(-3px)}
.sector h3{display:flex;align-items:center;gap:11px}
.sector .move{
margin:16px 0 0;padding-top:15px;border-top:1px solid var(--line);
font-size:13.6px;color:var(--muted);font-weight:300;line-height:1.6;
}
.sector .move b{color:var(--cyan);font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;display:block;margin-bottom:5px}
/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.person{
padding:32px 28px;border:1px solid var(--line);border-radius:22px;text-align:center;
background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
transition:border-color .3s,transform .3s;
}
.person:hover{border-color:rgba(123,92,240,.42);transform:translateY(-4px)}
.avatar{
width:96px;height:96px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
font-size:29px;font-weight:600;letter-spacing:.02em;color:#fff;
background:var(--grad);background-size:150% 150%;
box-shadow:0 10px 34px rgba(84,104,242,.32),inset 0 0 0 1px rgba(255,255,255,.2);
position:relative;overflow:hidden;
}
.avatar::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 55%)}
.avatar span{position:relative;z-index:1}
/* photo avatar: */
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;border-radius:50%;display:block}
.avatar.photo{background:rgba(255,255,255,.05);
box-shadow:0 10px 34px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.16)}
.avatar.photo::after{background:none}
.person h3{font-size:19px;margin-bottom:5px}
.person .role{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--cyan);font-weight:600;margin:0 0 16px}
.person p{margin:0;font-size:14.3px;color:var(--muted);font-weight:300;line-height:1.62}
.person .ph{margin-top:16px;font-size:11.5px;color:var(--dim);font-style:italic}
/* ---------- library (thought leadership) ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:22px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{
cursor:pointer;font:inherit;font-size:13px;font-weight:500;padding:8px 16px;border-radius:100px;
border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--muted);transition:.22s;
}
.filters button:hover{color:var(--text);border-color:rgba(255,255,255,.26)}
.filters button[aria-pressed=true]{color:#fff;border-color:transparent;background:var(--grad);box-shadow:0 4px 18px rgba(84,104,242,.3)}
.filters button .c{opacity:.65;margin-left:6px;font-size:11.5px}
.toolbar .right{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sortby,.searchbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;
background:rgba(255,255,255,.035);padding:0 14px;height:40px;transition:border-color .25s,box-shadow .25s}
.sortby:focus-within,.searchbox:focus-within{border-color:rgba(123,92,240,.6);box-shadow:0 0 0 4px rgba(123,92,240,.11)}
.sortby span{font-size:12px;color:var(--dim);letter-spacing:.04em}
.sortby select{background:transparent;border:0;outline:0;color:var(--text);font:inherit;font-size:13.5px;cursor:pointer;padding-right:2px}
.sortby select option{background:#12121c}
.searchbox svg{width:15px;height:15px;stroke:var(--dim);fill:none;stroke-width:1.9;stroke-linecap:round}
.searchbox input{background:transparent;border:0;outline:0;color:var(--text);font:inherit;font-size:13.5px;width:190px}
.searchbox input::placeholder{color:var(--dim)}
.count{margin:0 0 20px;font-size:12.5px;color:var(--dim);letter-spacing:.03em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.res{
display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;overflow:hidden;
background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
transition:border-color .3s,transform .3s;
}
.res:hover{border-color:rgba(123,92,240,.42);transform:translateY(-4px)}
.res .head{
height:112px;position:relative;display:grid;place-items:center;border-bottom:1px solid var(--line);
background:linear-gradient(135deg,rgba(123,92,240,.3),rgba(43,139,230,.18) 55%,rgba(34,211,238,.14));
}
.res .head::after{
content:"";position:absolute;inset:0;opacity:.5;
background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
background-size:26px 26px;
}
.res .head .kind{
position:relative;z-index:1;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#fff;
padding:7px 16px;border-radius:100px;background:rgba(6,6,11,.55);border:1px solid rgba(255,255,255,.2);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.res .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.res h3{font-size:18.5px;margin-bottom:4px}
.res .sub{margin:0 0 12px;font-size:13.6px;color:var(--cyan);font-style:italic;font-weight:300}
.res .blurb{margin:0 0 18px;font-size:14.2px;color:var(--muted);font-weight:300;line-height:1.62}
.res .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.res .meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
padding-top:16px;border-top:1px solid var(--line)}
.res .date{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--dim);letter-spacing:.06em}
.res .status{font-size:12px;color:var(--dim);font-style:italic}
.res a.go{
text-decoration:none;font-size:13px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:7px;
padding:8px 15px;border-radius:100px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:.25s;
}
.res a.go:hover{border-color:rgba(123,92,240,.55);background:rgba(123,92,240,.16)}
.res a.go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.empty{padding:60px 20px;text-align:center;color:var(--dim);border:1px dashed var(--line);border-radius:20px}
/* ---------- contact band ---------- */
.contact-band{
padding:64px 44px;border:1px solid var(--line);border-radius:28px;text-align:center;position:relative;overflow:hidden;
background:linear-gradient(155deg,rgba(123,92,240,.14),rgba(34,211,238,.06) 60%,rgba(255,255,255,.02));
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.contact-band::after{content:"";position:absolute;left:50%;top:-60%;width:130%;height:130%;transform:translateX(-50%);pointer-events:none;
background:radial-gradient(ellipse at center,rgba(123,92,240,.16),transparent 62%)}
.contact-band > *{position:relative;z-index:1}
.contact-band h2{max-width:22ch;margin-left:auto;margin-right:auto}
.contact-band .lead{margin-left:auto;margin-right:auto;margin-bottom:30px;text-align:center}
/* ---------- footer ---------- */
footer{margin-top:96px;padding:44px 0 52px;border-top:1px solid var(--line);position:relative;z-index:2}
.foot-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.foot-in .brand img{height:24px;filter:brightness(1.45) saturate(1.12);margin-bottom:16px}
.foot-in .brand p{font-size:13.6px;color:var(--muted);font-weight:300;max-width:34ch;line-height:1.62;margin:0}
.foot-addr{margin:40px 0 0;font-style:normal;font-size:13.4px;line-height:1.62;
color:var(--dim);font-weight:300}
.foot-addr b{display:block;font-weight:600;font-size:13.4px;letter-spacing:.01em;
text-transform:none;color:var(--muted);margin-bottom:5px}
.foot-col h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.foot-col a{display:block;text-decoration:none;color:var(--muted);font-size:14px;padding:5px 0;transition:color .22s}
.foot-col a:hover{color:#fff}
.foot-bot{margin-top:38px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;
gap:14px;justify-content:space-between;font-size:12.8px;color:var(--dim)}
/* ---------- slide-out contact form ---------- */
.sf-tab{
position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;
display:flex;align-items:center;gap:9px;cursor:pointer;padding:15px 15px 15px 17px;
border:0;border-right:0;border-radius:16px 0 0 16px;color:#fff;font:inherit;font-weight:600;font-size:14px;
background:var(--grad);background-size:180% 100%;
box-shadow:-6px 6px 30px rgba(84,104,242,.4);
transition:padding-right .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,background-position .5s,transform .3s;
}
.sf-tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.sf-tab .sf-tip{
max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
transition:max-width .34s cubic-bezier(.2,.8,.3,1),opacity .26s;
}
.sf-tab:hover,.sf-tab:focus-visible{background-position:100% 50%;box-shadow:-8px 8px 38px rgba(84,104,242,.55)}
.sf-tab:hover .sf-tip,.sf-tab:focus-visible .sf-tip{max-width:130px;opacity:1}
.sf-tab[aria-expanded=true]{transform:translateY(-50%) translateX(110%)}
.sf-scrim{
position:fixed;inset:0;z-index:69;background:rgba(4,4,10,.62);
backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
opacity:0;visibility:hidden;transition:opacity .34s,visibility .34s;
}
.sf-scrim.open{opacity:1;visibility:visible}
.sf-scrim[hidden]{display:none}
.sf-panel{
position:fixed;top:0;right:0;z-index:70;height:100dvh;width:min(452px,100%);
display:flex;flex-direction:column;
border-left:1px solid rgba(255,255,255,.13);
background:linear-gradient(200deg,#141420dd,#0a0a12f7 55%),radial-gradient(700px circle at 90% -6%,rgba(123,92,240,.34),transparent 62%),#0a0a12;
box-shadow:-30px 0 90px rgba(0,0,0,.62);
transform:translateX(104%);transition:transform .42s cubic-bezier(.22,.85,.28,1);
}
.sf-panel.open{transform:none}
.sf-panel[hidden]{display:none}
.sf-panel::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--grad)}
.sf-head{padding:30px 30px 22px;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:flex-start;flex:0 0 auto}
.sf-head .mtag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:600;margin:0 0 9px}
.sf-head h3{margin:0 0 8px;font-size:23px;font-weight:700;letter-spacing:-.025em}
.sf-head p{margin:0;font-size:14px;color:var(--muted);font-weight:300;line-height:1.58}
.sf-x{
flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;padding:0;
border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04);color:var(--muted);transition:.25s;
}
.sf-x:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.09)}
.sf-x svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.sf-body{padding:26px 30px 34px;overflow-y:auto;flex:1 1 auto}
.field{margin-bottom:15px;text-align:left}
.field label{display:block;font-size:12.5px;font-weight:500;color:#b9bccd;margin-bottom:7px}
.field label .req{color:var(--violet);margin-left:2px}
.field label .opt{color:var(--dim);font-weight:400;font-size:11.5px;margin-left:5px}
.field input,.field textarea,.field select{
width:100%;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:12px;
color:var(--text);font:inherit;font-size:14.5px;padding:12px 14px;outline:0;
transition:border-color .25s,box-shadow .25s,background .25s;
}
.field textarea{resize:vertical;min-height:104px;line-height:1.55}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 13px center;background-size:16px;padding-right:38px}
.field select option{background:#12121c;color:var(--text)}
.field input::placeholder,.field textarea::placeholder{color:#5a5c72}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(123,92,240,.65);background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(123,92,240,.13)}
.field.bad input{border-color:rgba(255,110,140,.7);box-shadow:0 0 0 4px rgba(255,110,140,.1)}
.err-msg{display:none;margin:7px 0 0;font-size:12px;color:#ff8095}
.field.bad .err-msg{display:block}
.sf-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.sf-panel .btn{width:100%;justify-content:center;margin-top:10px}
.mfoot{margin:14px 0 0;font-size:11.8px;color:var(--dim);text-align:center;line-height:1.55}
.mfoot a{color:var(--muted)}
.msuccess{display:none;text-align:center;padding:26px 0 6px}
.sf-panel.sent .mform{display:none}
.sf-panel.sent .msuccess{display:block}
.tick{
width:74px;height:74px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
background:radial-gradient(circle at 35% 30%,rgba(123,92,240,.5),rgba(34,211,238,.14) 62%,transparent 72%);
border:1px solid rgba(255,255,255,.16);animation:pop .55s cubic-bezier(.2,1.5,.4,1) both;
}
.tick svg{width:32px;height:32px;stroke:var(--cyan);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:32;stroke-dashoffset:32;animation:draw .5s .28s ease forwards}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
.msuccess h3{margin-bottom:10px;font-size:22px}
.msuccess p{margin:0 auto 22px;max-width:34ch;font-size:14.6px;color:var(--muted);font-weight:300;line-height:1.65}
.ghost{
display:inline-block;cursor:pointer;font:inherit;font-size:13.5px;font-weight:500;color:var(--muted);
padding:11px 26px;border-radius:100px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:.25s;
}
.ghost:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
body.locked{overflow:hidden}
/* ---------- responsive ---------- */
@media (max-width:980px){
.split{grid-template-columns:1fr;gap:38px}
.foot-in{grid-template-columns:1fr 1fr;gap:30px}
.foot-in .brand{grid-column:1 / -1}
}
@media (max-width:860px){
:root{--nav-h:118px}
.mark img{height:80px}
.links{display:none}
.burger{display:grid}
.nav-cta .btn{display:none}
.band{padding:70px 0}
.contact-band{padding:48px 24px}
.sf-tab{top:auto;bottom:18px;right:18px;transform:none;border-radius:100px;padding:14px 20px;box-shadow:0 8px 30px rgba(84,104,242,.45)}
.sf-tab .sf-tip{max-width:130px;opacity:1}
.sf-tab[aria-expanded=true]{transform:translateY(160%)}
}
@media (max-width:560px){
:root{--nav-h:104px}
.wrap{padding:0 20px}
.mark img{height:75px}
.toolbar{flex-direction:column;align-items:stretch}
.toolbar .right{justify-content:space-between}
.searchbox{flex:1}
.searchbox input{width:100%}
.grid{grid-template-columns:1fr}
.step-row{grid-template-columns:1fr;gap:14px}
.foot-in{grid-template-columns:1fr}
.sf-panel{width:100%;border-left:0}
.sf-head{padding:24px 20px 18px}
.sf-body{padding:22px 20px 30px}
.btn-lg{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html{scroll-behavior:auto}
.rv{opacity:1;transform:none}
}
/* =====================================================================
HERO CAROUSEL — six slides, 6s each, one animated graphic per slide
===================================================================== */
.hero{position:relative;padding:58px 0 18px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:48px;align-items:center}
.hero-copy{position:relative;min-width:0}
.hstack{display:grid;align-items:start}
.hslide{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
transform:translateY(18px);transition:opacity .431s ease,transform .431s cubic-bezier(.2,.8,.2,1)}
.hslide.on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.hslide .pill{margin-bottom:24px}
.hslide h1{margin:0 0 20px;max-width:17ch;font-size:clamp(31px,4.5vw,50px)}
.hslide .lead{margin:0;max-width:52ch}
.hero-cta{margin-top:34px}
.hero-nav{display:flex;align-items:center;gap:9px;margin-top:36px;flex-wrap:wrap}
.hdot{position:relative;width:44px;height:5px;padding:0;border:0;border-radius:100px;cursor:pointer;
background:rgba(255,255,255,.13);overflow:hidden;transition:background .3s}
.hdot:hover{background:rgba(255,255,255,.26)}
.hdot::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-radius:100px;background:var(--grad)}
.hdot.done::after{width:100%}
.hdot.on::after{animation:hfill var(--hfill,8086ms) linear forwards}
.hero.paused .hdot.on::after{animation-play-state:paused}
.hdot:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
@keyframes hfill{from{width:0}to{width:100%}}
.hplay{margin-left:8px;width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);transition:.25s}
.hplay:hover{color:#fff;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.07)}
.hplay svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hplay .i-play{display:none;fill:currentColor;stroke:none}
.hplay[aria-pressed=true] .i-pause{display:none}
.hplay[aria-pressed=true] .i-play{display:block}
.hcount{margin-left:6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;
letter-spacing:.1em;color:var(--dim)}
.hcount b{color:var(--text);font-weight:500}
/* ---------- art frame ---------- */
.hero-art{position:relative;min-width:0}
.artstack{display:grid}
.hart{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:scale(.965);
transition:opacity .431s ease,transform .431s cubic-bezier(.2,.8,.2,1)}
.hart.on{opacity:1;visibility:visible;transform:none}
.hart svg{width:100%;height:auto;display:block;overflow:visible;
transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.art-cap{margin-top:16px;min-height:36px;font-size:12.6px;line-height:1.5;color:var(--muted);
font-weight:300;transition:color .25s;padding-left:14px;border-left:2px solid rgba(255,255,255,.12)}
.hart.live .art-cap{color:var(--text);border-left-color:var(--cyan)}
.hot{cursor:pointer}
.hot *{transition:opacity .25s,filter .25s,transform .25s}
.hart:hover .hot{opacity:.42}
.hart:hover .hot:hover,.hart .hot.pinned{opacity:1;filter:drop-shadow(0 0 12px rgba(84,104,242,.55))}
.ax line{stroke:rgba(255,255,255,.07);stroke-width:1}
/* ---------- 01 roadmap ---------- */
.rd-track{stroke:rgba(255,255,255,.14);stroke-width:2;fill:none}
.rd-prog{stroke:url(#gr1);stroke-width:3;fill:none;stroke-linecap:round;
stroke-dasharray:450;stroke-dashoffset:450}
.hart.on .rd-prog{animation:draw 1.5s cubic-bezier(.3,.7,.2,1) .2s forwards}
.rd-bar{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.14);transform-box:fill-box;
transform-origin:50% 100%;transform:scaleY(0)}
.hart.on .rd-bar{animation:growY .85s cubic-bezier(.2,.8,.2,1) forwards}
.rd-q.is-last .rd-bar{fill:rgba(84,104,242,.22);stroke:rgba(84,104,242,.55)}
.rd-q.is-last .rd-cap{fill:#c9cdf5}
.rd-dot{fill:#0b0b14;stroke:url(#gr1);stroke-width:3;opacity:0}
.hart.on .rd-dot{animation:pop .5s cubic-bezier(.2,1.4,.4,1) forwards}
.rd-lab{fill:var(--dim);font-size:11.5px;text-anchor:middle;font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.rd-cap{fill:var(--text);font-size:13px;text-anchor:middle;font-weight:500}
.rd-flag rect{fill:rgba(34,211,238,.1);stroke:rgba(34,211,238,.42)}
.rd-flag text{fill:var(--cyan);font-size:12px;text-anchor:middle;font-weight:500}
.hart.on .rd-flag{animation:fadeUp .7s ease 1.1s both}
/* ---------- 02 agents ---------- */
.ag-pill{fill:rgba(255,255,255,.045);stroke:var(--line)}
.ag-t{fill:var(--muted);font-size:12.5px;text-anchor:middle}
.ag-wire{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.6;stroke-dasharray:400;stroke-dashoffset:400}
.hart.on .ag-wire{animation:draw 1.2s ease .1s forwards}
.ag-wire.out{stroke:rgba(84,104,242,.4)}
.ag-packet{fill:var(--cyan);opacity:0}
.hart.on .ag-packet{animation:fly 3.3s linear infinite}
.hart.on .ag-packet.p2{animation-name:fly2}
.hart.on .ag-packet.p3{animation-name:fly3}
.ag-ring{fill:none;stroke:rgba(84,104,242,.3);stroke-dasharray:4 8}
.hart.on .ag-ring{animation:spin 22s linear infinite;transform-box:fill-box;transform-origin:center}
.hart.on .ag-ring.r2{animation:spin 16s linear infinite reverse;stroke:rgba(34,211,238,.28)}
.ag-hub{fill:rgba(84,104,242,.2);stroke:rgba(123,92,240,.75);stroke-width:1.6}
.hart.on .ag-hub{animation:breathe 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.ag-hubt{fill:#fff;font-size:13px;text-anchor:middle;font-weight:600}
.ag-card{fill:rgba(255,255,255,.05);stroke:var(--line)}
.ag-ot{fill:var(--text);font-size:13px;text-anchor:middle;font-weight:500}
.ag-os{fill:var(--dim);font-size:11.5px;text-anchor:middle}
/* ---------- 03 cost ---------- */
.ct-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:620;stroke-dashoffset:620}
.hart.on .ct-line{animation:draw 1.6s cubic-bezier(.3,.7,.2,1) .2s forwards}
.ct-line.cost{stroke:rgba(154,156,180,.85)}
.ct-line.cx{stroke:url(#gr1);stroke:#22d3ee}
.ct-end{opacity:0}
.ct-end.cost{fill:#9a9cb4}
.ct-end.cx{fill:#22d3ee}
.hart.on .ct-end{animation:pop .5s ease 1.5s forwards}
.hart.on .ct-area{opacity:0;animation:fadeUp .9s ease 1.2s forwards}
.ct-key{font-size:12.5px;font-weight:500}
.ct-key.cost{fill:var(--muted)}
.ct-key.cx{fill:var(--cyan)}
.ct-x text{fill:var(--dim);font-size:11px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.ct-x text:nth-child(2){text-anchor:middle}
.ct-x text:last-child{text-anchor:end}
.ct-badge rect{fill:rgba(84,104,242,.12);stroke:rgba(84,104,242,.4)}
.ct-badge text{fill:#c9cdf5;font-size:12px;text-anchor:middle;font-weight:500}
.hart.on .ct-badge{animation:fadeUp .7s ease 1.6s both}
/* ---------- 04 the 2027 board ---------- */
.tb-h{fill:var(--dim);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.tb-h.r{text-anchor:end}
.tb-rule{stroke:rgba(255,255,255,.12)}
.tb-row{opacity:0;cursor:pointer}
.hart.on .tb-row{animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) both}
.tb-bg{fill:rgba(255,255,255,.03);stroke:var(--line)}
.tb-row:hover .tb-bg{fill:rgba(84,104,242,.14);stroke:rgba(84,104,242,.55)}
.tb-n{fill:var(--dim);font-size:11px;font-family:'JetBrains Mono',monospace}
.tb-n.hi{fill:var(--cyan)}
.tb-t{fill:var(--text);font-size:13.6px;font-weight:500}
.tb-spark{fill:none;stroke:rgba(154,156,180,.85);stroke-width:2.2;stroke-linecap:round;
stroke-linejoin:round;stroke-dasharray:130;stroke-dashoffset:130}
.tb-spark.hi{stroke:#22d3ee}
.hart.on .tb-spark{animation:draw 1s ease .5s forwards}
.tb-dot{fill:rgba(154,156,180,.9);opacity:0}
.tb-dot.hi{fill:#22d3ee}
.hart.on .tb-dot{animation:pop .45s ease 1.4s forwards}
.tb-track{fill:rgba(255,255,255,.06);stroke:var(--line)}
.tb-fill{fill:rgba(123,92,240,.6);transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.tb-fill.hi{fill:#5468f2}
.hart.on .tb-fill{animation:growX .9s cubic-bezier(.2,.8,.2,1) .35s forwards}
.tb-v{fill:var(--muted);font-size:12px;text-anchor:end;font-family:'JetBrains Mono',monospace}
.tb-foot{fill:var(--dim);font-size:10.5px}
/* ---------- 05 trust ---------- */
.tr-outline{fill:none;stroke:rgba(123,92,240,.55);stroke-width:2;stroke-dasharray:900;stroke-dashoffset:900}
.hart.on .tr-outline{animation:draw 1.8s ease .1s forwards}
.tr-glass{fill:rgba(84,104,242,.07);stroke:none;opacity:0}
.hart.on .tr-glass{animation:fadeUp 1s ease .9s forwards}
.tr-sweep rect{fill:rgba(34,211,238,.16)}
.hart.on .tr-sweep{animation:sweep 4.2s cubic-bezier(.4,0,.6,1) infinite}
.tr-pill{fill:rgba(255,255,255,.05);stroke:var(--line)}
.tr-check{fill:none;stroke:var(--cyan);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:40;stroke-dashoffset:40}
.tr-t{fill:var(--text);font-size:13px;font-weight:500}
.tr-row{opacity:0}
.hart.on .tr-row{animation:fadeUp .6s ease both}
.hart.on .tr-row .tr-check{animation:draw .5s ease both;animation-delay:inherit}
/* ---------- 06 pod ---------- */
.pd-orbit{fill:none;stroke:rgba(255,255,255,.09);stroke-dasharray:3 9}
.pd-orbit.inner{stroke:rgba(84,104,242,.22)}
.hart.on .pd-spin{animation:spin 34s linear infinite;transform-box:fill-box;transform-origin:center}
.hart.on .pd-node text{animation:spinBack 34s linear infinite;transform-box:fill-box;transform-origin:center}
.pd-node circle{fill:rgba(11,11,20,.9);stroke:rgba(255,255,255,.2)}
.pd-node text{fill:var(--muted);font-size:12px;text-anchor:middle}
.pd-halo{fill:rgba(84,104,242,.1)}
.hart.on .pd-halo{animation:breathe 3.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.pd-hub{fill:rgba(11,11,20,.95);stroke:rgba(123,92,240,.7);stroke-width:1.8}
.pd-ht{fill:#fff;font-size:15px;text-anchor:middle;font-weight:700}
.pd-hs{fill:var(--dim);font-size:10.5px;text-anchor:middle;letter-spacing:.05em}
.pd-dock path{stroke:rgba(34,211,238,.5);stroke-width:1.6;stroke-dasharray:2 5}
.hart.on .pd-dock{animation:fadeUp .8s ease 1s both}
/* ---------- shared art keyframes ---------- */
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes growY{to{transform:scaleY(1)}}
@keyframes growX{to{transform:scaleX(1)}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinBack{to{transform:rotate(-360deg)}}
@keyframes sweep{0%{transform:translateY(0);opacity:0}12%{opacity:.9}50%{transform:translateY(272px);opacity:.5}
62%{opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes fly{0%{opacity:0}6%{opacity:1}
0%{transform:translate(130px,103px)}45%{transform:translate(226px,197px)}
46%{transform:translate(262px,197px);opacity:1}
85%{transform:translate(396px,118px);opacity:1}100%{transform:translate(396px,118px);opacity:0}}
@keyframes fly2{0%{opacity:0}6%{opacity:1}
0%{transform:translate(130px,197px)}45%{transform:translate(226px,197px)}
46%{transform:translate(262px,197px);opacity:1}
85%{transform:translate(396px,278px);opacity:1}100%{transform:translate(396px,278px);opacity:0}}
@keyframes fly3{0%{opacity:0}6%{opacity:1}
0%{transform:translate(130px,291px)}45%{transform:translate(226px,197px)}
46%{transform:translate(262px,197px);opacity:1}
85%{transform:translate(396px,118px);opacity:1}100%{transform:translate(396px,118px);opacity:0}}
@media (max-width:980px){
.hero-in{grid-template-columns:1fr;gap:34px}
.hero-art{order:2;max-width:560px}
.hslide h1{max-width:20ch}
}
@media (max-width:560px){
.hero{padding-top:36px}
.hdot{width:32px}
.art-cap{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
.hdot.on::after{width:100%;animation:none}
.hart svg *{animation:none!important}
.ct-line,.rd-prog,.ag-wire,.tr-outline,.tr-check,.tb-spark{stroke-dashoffset:0!important}
.rd-bar,.tb-fill{transform:none!important}
.rd-dot,.ct-end,.tr-row,.tr-glass,.ct-area,.tb-row,.tb-dot{opacity:1!important}
}
/* =====================================================================
OFFERING MODALS + SAMPLE DELIVERABLE MODALS
===================================================================== */
.card.opens,.eng.opens{cursor:pointer}
.eng.opens:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.eng.opens .c-more{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);width:100%}
.eng.opens:hover .c-more,.eng.opens:focus-visible .c-more{color:var(--cyan);gap:11px}
.eng.opens .foot{padding-bottom:0}
.card.opens:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.c-more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:12.4px;
font-weight:500;color:var(--muted);transition:color .25s,gap .25s}
.c-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.card.opens:hover .c-more,.card.opens:focus-visible .c-more{color:var(--cyan);gap:11px}
.mdata-store{display:none}
.m-scrim{position:fixed;inset:0;z-index:80;background:rgba(3,3,8,.74);backdrop-filter:blur(6px);
opacity:0;transition:opacity .3s}
.m-scrim.in{opacity:1}
.m-wrap{position:fixed;inset:0;z-index:90;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start;
padding:5vh 20px;overflow-y:auto;opacity:0;transition:opacity .3s}
.m-wrap.lvl2{z-index:100}
.m-wrap[hidden],.m-scrim[hidden]{display:none!important}
.m-wrap.in{opacity:1}
.m-panel{position:relative;width:100%;max-width:760px;min-width:0;border:1px solid var(--line);border-radius:22px;
background:linear-gradient(180deg,#0e0e18 0%,#0a0a12 100%);
box-shadow:0 40px 120px rgba(0,0,0,.6);padding:44px 44px 40px;
transform:translateY(18px) scale(.985);transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.m-wrap.in .m-panel{transform:none}
.m-x{position:absolute;top:18px;right:18px;width:34px;height:34px;display:grid;place-items:center;
border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.04);
color:var(--muted);cursor:pointer;transition:.25s}
.m-x:hover{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.m-x svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.m-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:8px 15px 8px 11px;
border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.03);
color:var(--muted);font-size:12.4px;font-weight:500;cursor:pointer;transition:.25s}
.m-back:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
.m-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.m-eyebrow{margin:0 0 12px;font-size:11.5px;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:var(--cyan)}
.m-title{margin:0 0 14px;font-size:clamp(23px,2.7vw,30px);font-weight:700;letter-spacing:-.025em;
line-height:1.15;max-width:24ch}
.m-lead,.m-ctx{margin:0 0 26px;color:var(--muted);font-weight:300;font-size:15.4px;line-height:1.66;max-width:62ch}
.m-ctx{font-size:13.6px;margin-bottom:18px}
.m-h4{margin:32px 0 14px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.m-hint{margin-left:9px;font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--dim)}
.m-list{margin:0;padding:0;list-style:none}
.m-list li{position:relative;padding:0 0 11px 22px;color:var(--muted);font-weight:300;
font-size:14.4px;line-height:1.6}
.m-list li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;
background:rgba(255,255,255,.3)}
.m-list.check li::before{content:"";left:0;top:6px;width:12px;height:7px;border-radius:0;background:none;
border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg)}
.m-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.m-chip{padding:6px 13px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.03);
font-size:11.6px;color:var(--muted);font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.03em}
.m-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:6px}
.m-fact{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.m-fact span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.m-fact b{display:block;margin-top:5px;font-size:14.2px;font-weight:600;color:var(--text)}
.m-dlvs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-dlv{display:flex;flex-direction:column;gap:6px;text-align:left;padding:18px 18px 16px;cursor:pointer;
border:1px solid var(--line);border-radius:16px;background:var(--panel);transition:.25s}
.m-dlv:hover{border-color:rgba(84,104,242,.6);background:rgba(84,104,242,.09);transform:translateY(-2px)}
.m-dlv:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.m-dlv-n{font-size:14.6px;font-weight:600;color:var(--text);line-height:1.3}
.m-dlv-l{font-size:12.8px;font-weight:300;color:var(--muted);line-height:1.55}
.m-dlv-go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11.8px;font-weight:500;
color:var(--cyan);transition:gap .25s}
.m-dlv:hover .m-dlv-go{gap:10px}
.m-dlv-go svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.m-two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.m-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.m-viz{padding:22px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02);
margin-bottom:6px;overflow-x:auto}
.viz{width:100%;height:auto;display:block;min-width:420px;overflow:visible}
.v-lab{fill:var(--text);font-size:12.5px}
.v-val{fill:var(--muted);font-size:12px;text-anchor:end;font-family:'JetBrains Mono',monospace}
.v-track{fill:rgba(255,255,255,.05);stroke:var(--line)}
.v-fill{fill:rgba(255,255,255,.16)}
.v-fill.b-hi{fill:#5468f2}
.v-fill.t0{fill:rgba(123,92,240,.5)}
.v-fill.t1{fill:rgba(84,104,242,.62)}
.v-fill.t2{fill:rgba(34,211,238,.55)}
.v-arc{fill:none;stroke-width:22}
.v-arc.c0{stroke:#7b5cf0}.v-arc.c1{stroke:#5468f2}.v-arc.c2{stroke:#2b8be6}
.v-arc.c3{stroke:#22d3ee}.v-arc.c4{stroke:rgba(255,255,255,.22)}
.v-key.c0{fill:#7b5cf0}.v-key.c1{fill:#5468f2}.v-key.c2{fill:#2b8be6}
.v-key.c3{fill:#22d3ee}.v-key.c4{fill:rgba(255,255,255,.22)}
.v-mid{fill:#fff;font-size:21px;font-weight:700;text-anchor:middle}
.v-grail{fill:none;stroke:rgba(255,255,255,.09);stroke-width:14;stroke-linecap:round}
.v-gfill{fill:none;stroke:#5468f2;stroke-width:14;stroke-linecap:round}
.v-gv{fill:#fff;font-size:30px;font-weight:700;text-anchor:middle}
.v-gl{fill:var(--dim);font-size:11px;text-anchor:middle;letter-spacing:.14em;text-transform:uppercase}
.v-cap{fill:var(--muted);font-size:12.6px}
.v-rule{stroke:rgba(255,255,255,.12);stroke-dasharray:3 5}
.v-tick{fill:var(--dim);font-size:11px;font-family:'JetBrains Mono',monospace;letter-spacing:.05em}
.v-tick.mid{text-anchor:middle}.v-tick.end{text-anchor:end}
.v-grid{stroke:rgba(255,255,255,.07)}
.v-line{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.v-line.t0{stroke:#22d3ee}.v-line.t1{stroke:#9a9cb4}
.v-dot.t0{fill:#22d3ee}.v-dot.t1{fill:#9a9cb4}
.v-slab{font-size:11.5px;text-anchor:end}
.v-slab.t0{fill:#22d3ee}.v-slab.t1{fill:#9a9cb4}
.v-quad{fill:rgba(255,255,255,.02);stroke:var(--line)}
.v-qz{fill:var(--dim);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.v-pt{fill:rgba(255,255,255,.3)}
.v-pt.hot{fill:#5468f2}
.v-plab{fill:var(--muted);font-size:11.8px}
.v-plab.hot{fill:var(--text);font-weight:500}
.v-ax{fill:var(--dim);font-size:11px;letter-spacing:.06em}
.f-box{fill:rgba(255,255,255,.035);stroke:var(--line)}
.f-box.hi{fill:rgba(84,104,242,.14);stroke:rgba(84,104,242,.5)}
.f-t{fill:var(--text);font-size:13px;font-weight:600;text-anchor:middle}
.f-s{fill:var(--muted);font-size:11.6px;text-anchor:middle}
.f-n{fill:var(--dim);font-size:10.5px;font-family:'JetBrains Mono',monospace}
.f-arrow{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.m-doc{margin:16px 0 4px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
background:rgba(255,255,255,.02)}
.m-doc-h{padding:11px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03);
font-size:11.4px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.m-doc-b{margin:0;padding:18px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.2px;
line-height:1.85;color:#c6c9dd;white-space:pre-wrap}
.m-tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin-top:6px}
.m-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:460px}
.m-tbl th{padding:12px 16px;text-align:left;font-size:11.2px;letter-spacing:.09em;text-transform:uppercase;
color:var(--dim);font-weight:600;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line)}
.m-tbl td{padding:12px 16px;color:var(--muted);font-weight:300;border-bottom:1px solid rgba(255,255,255,.05)}
.m-tbl tbody tr:last-child td{border-bottom:0}
.m-tbl tbody tr:hover td{background:rgba(255,255,255,.025);color:var(--text)}
.m-foot{margin:30px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:11.8px;
color:var(--dim);font-weight:300;line-height:1.6}
@media (max-width:760px){
.m-panel{padding:36px 22px 30px;border-radius:18px}
.m-dlvs,.m-two{grid-template-columns:1fr}
.m-wrap{padding:3vh 12px}
}
.v-note{margin:14px 0 0;font-size:12.8px;line-height:1.6;color:var(--muted);font-weight:300;max-width:62ch}
.v-gwrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.viz.gauge{width:184px;min-width:184px;flex:none}
.v-gwrap .v-note{margin:0;flex:1 1 260px}
/* =====================================================================
SOLUTIONS HERO ART — one graphic per offering
===================================================================== */
/* 01 diagnostic scan */
.sc-ring{fill:none;stroke:rgba(255,255,255,.08)}
.sc-sweep{fill:url(#gr1);fill:rgba(84,104,242,.22)}
.hart.on .sc-spin{animation:spin 7s linear infinite;transform-origin:150px 200px}
.sc-dot{fill:var(--cyan);opacity:0}
.hart.on .sc-dot{animation:blip 7s ease-in-out infinite}
.sc-core{fill:rgba(11,11,20,.95);stroke:rgba(123,92,240,.8);stroke-width:1.6}
.hart.on .sc-core{animation:breathe 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sc-ct{fill:#fff;font-size:10.5px;text-anchor:middle;font-weight:600}
.sc-h{fill:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.sc-bar{fill:rgba(255,255,255,.05);stroke:var(--line);transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.sc-bar.hi{fill:rgba(84,104,242,.24);stroke:rgba(84,104,242,.6)}
.hart.on .sc-bar{animation:growX .8s cubic-bezier(.2,.8,.2,1) forwards}
.sc-bt{fill:var(--text);font-size:11.5px;font-family:'JetBrains Mono',monospace}
.sc-n{fill:var(--dim);font-size:11px;letter-spacing:.05em}
@keyframes blip{0%,100%{opacity:0}4%{opacity:1}30%{opacity:.35}}
/* 02 cadence */
.cd-h{fill:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.cd-cell{fill:rgba(255,255,255,.05)}
.cd-cell.hit{fill:rgba(84,104,242,.55)}
.hart.on .cd-cell.hit{animation:pulseC 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.cd-chip{fill:rgba(255,255,255,.04);stroke:var(--line)}
.cd-chip.hi{fill:rgba(123,92,240,.18);stroke:rgba(123,92,240,.55)}
.cd-ct{fill:var(--text);font-size:12.5px;text-anchor:middle;font-weight:500}
.cd-poly{fill:none;stroke:#22d3ee;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:520;stroke-dashoffset:520}
.hart.on .cd-poly{animation:draw 1.6s cubic-bezier(.3,.7,.2,1) .2s forwards}
.cd-end{fill:#22d3ee;opacity:0}
.hart.on .cd-end{animation:pop .5s ease 1.5s forwards}
.cd-n{fill:var(--dim);font-size:10.5px;font-family:'JetBrains Mono',monospace}
@keyframes pulseC{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.5);opacity:1}}
/* 03 decision path */
.tw-box{fill:rgba(255,255,255,.04);stroke:var(--line)}
.tw-box.hi{fill:rgba(84,104,242,.16);stroke:rgba(84,104,242,.55)}
.tw-t{fill:var(--text);font-size:13px;font-weight:600;text-anchor:middle}
.tw-s{fill:var(--muted);font-size:11.4px;text-anchor:middle}
.tw-wire{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.6;stroke-dasharray:300;stroke-dashoffset:300}
.hart.on .tw-wire{animation:draw 1.1s ease .1s forwards}
.tw-diamond{fill:rgba(34,211,238,.1);stroke:rgba(34,211,238,.55);stroke-width:1.6}
.hart.on .tw-diamond{animation:breathe 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.tw-gt{fill:var(--cyan);font-size:12px;text-anchor:middle;font-weight:500}
.tw-tok{fill:#22d3ee;opacity:0}
.hart.on .tw-tok{animation:tok 4.4s ease-in-out infinite}
.tw-n{fill:var(--dim);font-size:11.5px}
@keyframes tok{0%{transform:translate(20px,200px);opacity:0}8%{opacity:1}
34%{transform:translate(258px,200px)}66%{transform:translate(396px,116px);opacity:1}
80%{transform:translate(452px,116px);opacity:0}100%{transform:translate(452px,116px);opacity:0}}
/* 04 agent desktop */
.dk-frame{fill:rgba(255,255,255,.025);stroke:var(--line)}
.dk-split{stroke:var(--line)}
.dk-bar circle{fill:rgba(255,255,255,.18)}
.dk-title{fill:var(--dim);font-size:11.5px;letter-spacing:.08em}
.dk-line{fill:rgba(255,255,255,.14);transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.dk-line.me{fill:rgba(84,104,242,.45)}
.dk-line.ok{fill:rgba(34,211,238,.5)}
.hart.on .dk-line{animation:growX .5s ease forwards}
.dk-panel{fill:rgba(84,104,242,.08);stroke:rgba(84,104,242,.34)}
.dk-h{fill:var(--text);font-size:12.4px;font-weight:600}
.dk-cite{fill:rgba(34,211,238,.14);stroke:rgba(34,211,238,.42)}
.dk-ct{fill:var(--cyan);font-size:10.5px;text-anchor:middle;font-family:'JetBrains Mono',monospace}
.dk-ct.l{text-anchor:start}
.dk-scan rect{fill:rgba(34,211,238,.5)}
.hart.on .dk-scan{animation:dkscan 4.6s ease-in-out infinite}
@keyframes dkscan{0%{transform:translateY(0);opacity:0}10%{opacity:.9}45%{transform:translateY(98px);opacity:.5}
55%{opacity:0}100%{transform:translateY(0);opacity:0}}
/* 05 signal to insight */
.wv-h{fill:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.wv-bars rect{fill:rgba(123,92,240,.55);transform-box:fill-box;transform-origin:center}
.hart.on .wv-bars rect{animation:wv 1.6s ease-in-out infinite}
.wv-flow{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.6;stroke-dasharray:3 5}
.wv-tag{fill:rgba(255,255,255,.05);stroke:var(--line);opacity:0}
.wv-tag.hi{fill:rgba(34,211,238,.12);stroke:rgba(34,211,238,.5)}
.hart.on .wv-tag{animation:fadeUp .6s ease forwards}
.wv-tt{fill:var(--text);font-size:12.4px;text-anchor:middle;font-weight:500}
.wv-n{fill:var(--cyan);font-size:11px;font-family:'JetBrains Mono',monospace}
.wv-track{fill:rgba(255,255,255,.05);stroke:var(--line)}
.wv-fill{fill:#5468f2;transform-box:fill-box;transform-origin:0 50%;transform:scaleX(.02)}
.hart.on .wv-fill{animation:covg 2.2s cubic-bezier(.2,.8,.2,1) .3s forwards}
.wv-s{fill:var(--dim);font-size:11px}
.wv-s.e{text-anchor:end;fill:var(--cyan)}
@keyframes wv{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes covg{to{transform:scaleX(1)}}
/* 06 gates and evidence */
.gt-rail{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.6;stroke-dasharray:4 7}
.gt-pillar{fill:rgba(123,92,240,.3)}
.gt-badge{fill:rgba(255,255,255,.04);stroke:var(--line)}
.gt-bt{fill:var(--text);font-size:12.2px;text-anchor:middle;font-weight:500}
.gt-check{fill:none;stroke:var(--cyan);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:34;stroke-dashoffset:34}
.hart.on .gt-g .gt-check{animation:draw .5s ease both;animation-delay:inherit}
.gt-token{fill:#22d3ee;opacity:0}
.hart.on .gt-token{animation:gtok 5s linear infinite}
.gt-h{fill:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.gt-row{fill:rgba(255,255,255,.04);stroke:var(--line);opacity:0}
.hart.on .gt-row{animation:fadeUp .6s ease forwards}
.gt-rt{fill:var(--muted);font-size:11px;font-family:'JetBrains Mono',monospace}
@keyframes gtok{0%{transform:translate(24px,128px);opacity:0}6%{opacity:1}
92%{transform:translate(496px,128px);opacity:1}100%{transform:translate(496px,128px);opacity:0}}
@media (prefers-reduced-motion:reduce){
.sc-bar,.dk-line,.wv-fill,.wv-bars rect{transform:none!important}
.sc-dot,.wv-tag,.gt-row,.cd-end,.tw-tok,.gt-token{opacity:1!important}
.cd-poly,.tw-wire,.gt-check{stroke-dashoffset:0!important}
}
/* =====================================================================
READINESS ASSESSMENT
===================================================================== */
.m-wrap.lvl0{z-index:85}
.m-panel.wide{max-width:900px}
.assess-band{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:44px;
align-items:center;padding:48px 46px;border:1px solid var(--line);border-radius:26px;
background:linear-gradient(140deg,rgba(123,92,240,.13),rgba(34,211,238,.05) 55%,rgba(255,255,255,.02))}
.assess-band h2{margin-bottom:14px}
.assess-meta{font-size:12.4px;color:var(--dim);font-weight:300}
.assess-art svg{width:100%;height:auto;max-width:260px;margin-left:auto;display:block;overflow:visible}
.ab-rings polygon{fill:none;stroke:rgba(255,255,255,.1)}
.ab-shape{fill:rgba(84,104,242,.2);stroke:#5468f2;stroke-width:2;transform-box:fill-box;
transform-origin:center;animation:breathe 5s ease-in-out infinite}
.ab-dots circle{fill:#22d3ee}
.as-dims{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.as-dimcard{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.as-dimcard .as-n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan);letter-spacing:.1em}
.as-dimcard b{display:block;margin:6px 0 5px;font-size:14.2px;color:var(--text)}
.as-dimcard p{margin:0;font-size:12.6px;color:var(--muted);font-weight:300;line-height:1.55}
.as-head{display:flex;gap:26px;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.as-live{flex:0 0 auto;text-align:center}
.as-live .rd-svg{width:150px;height:150px}
.as-livel{display:block;margin-top:2px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.as-prog{height:5px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden;margin:6px 0 8px}
.as-prog span{display:block;height:100%;border-radius:100px;background:var(--grad);transition:width .4s ease}
.as-progl{margin:0 0 20px;font-size:11.5px;color:var(--dim);font-family:'JetBrains Mono',monospace}
.as-q{padding:20px 0 4px;border-top:1px solid var(--line)}
.as-qt{display:flex;gap:12px;margin:0 0 14px;font-size:15.4px;font-weight:500;color:var(--text);line-height:1.5}
.as-qt span{flex:0 0 auto;width:22px;height:22px;margin-top:2px;display:grid;place-items:center;
border-radius:50%;background:rgba(255,255,255,.07);font-size:11.5px;color:var(--muted);
font-family:'JetBrains Mono',monospace}
.as-opts{display:grid;gap:8px}
.as-opt{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:13px 16px;cursor:pointer;
border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.02);
color:var(--muted);font-size:13.8px;font-weight:300;line-height:1.5;transition:.2s}
.as-opt:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05);color:var(--text)}
.as-opt:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.as-mark{flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:50%;
border:1.5px solid rgba(255,255,255,.28);transition:.2s}
.as-opt.on{border-color:rgba(84,104,242,.7);background:rgba(84,104,242,.14);color:var(--text)}
.as-opt.on .as-mark{border-color:#5468f2;background:#5468f2;box-shadow:inset 0 0 0 3px #0b0b14}
.btn.is-off{opacity:.4;pointer-events:none}
.as-need{align-self:center;font-size:12px;color:var(--dim)}
.rd-grid{fill:rgba(255,255,255,.02);stroke:rgba(255,255,255,.09)}
.rd-axis{stroke:rgba(255,255,255,.09)}
.rd-shape{fill:rgba(84,104,242,.24);stroke:#5468f2;stroke-width:2;stroke-linejoin:round}
.rd-pt{fill:#22d3ee}
.rd-lab2{fill:var(--text);font-size:12px;font-weight:500}
.rd-num{fill:var(--cyan);font-size:11.5px;font-family:'JetBrains Mono',monospace}
.as-res{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:32px;align-items:center;
padding:26px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02)}
.as-radar .rd-svg{width:100%;height:auto;overflow:visible}
.as-big{font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.as-big em{font-style:normal;font-size:18px;color:var(--dim);-webkit-text-fill-color:var(--dim);margin-left:4px}
.as-ladder{display:flex;gap:6px;margin:18px 0}
.as-rung{flex:1;padding:9px 6px;border:1px solid var(--line);border-radius:11px;text-align:center;
background:rgba(255,255,255,.02)}
.as-rung b{display:block;font-size:14px;color:var(--dim)}
.as-rung span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.as-rung.past{background:rgba(84,104,242,.1);border-color:rgba(84,104,242,.3)}
.as-rung.past b{color:var(--muted)}
.as-rung.on{background:rgba(84,104,242,.28);border-color:rgba(123,92,240,.8);
box-shadow:0 0 24px rgba(84,104,242,.35)}
.as-rung.on b,.as-rung.on span{color:#fff}
.as-read{margin:0;font-size:13.6px;color:var(--muted);font-weight:300;line-height:1.6}
.as-read b{color:var(--text);font-weight:500}
.as-bars{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.as-barh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.as-barh b{font-size:13.4px;font-weight:500;color:var(--text)}
.as-barh i{font-style:normal;font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.as-bart{height:8px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden}
.as-bart span{display:block;height:100%;border-radius:100px;animation:growX .9s cubic-bezier(.2,.8,.2,1) both;
transform-origin:0 50%}
.as-bart span.lo{background:linear-gradient(90deg,#7b5cf0,#5468f2)}
.as-bart span.mid{background:linear-gradient(90deg,#5468f2,#2b8be6)}
.as-bart span.hi{background:linear-gradient(90deg,#2b8be6,#22d3ee)}
.as-offs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.as-off{padding:22px 22px 20px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.as-off.start{border-color:rgba(84,104,242,.55);background:rgba(84,104,242,.09)}
.as-offt{margin:0 0 10px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.as-off.later .as-offt{color:var(--dim)}
.as-off h5{margin:0 0 8px;font-size:16.4px;font-weight:600;line-height:1.25}
.as-offl{margin:0 0 14px;font-size:13px;color:var(--muted);font-weight:300;line-height:1.55}
.as-dls{display:grid;gap:6px;margin-bottom:14px}
.as-dl{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;
padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);
color:var(--muted);font-size:12.4px;cursor:pointer;transition:.2s}
.as-dl:hover{color:#fff;border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.1)}
.as-dl svg{width:13px;height:13px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.as-kpi td em{display:block;margin-top:3px;font-style:normal;font-size:11.6px;color:var(--dim)}
.as-kpi td.now{color:var(--text)}
.as-kpi td.next{color:var(--cyan)}
.as-kpi th:nth-child(3),.as-kpi td:nth-child(3){background:rgba(255,255,255,.02)}
@media (max-width:900px){
.assess-band{grid-template-columns:1fr;padding:34px 24px}
.assess-art{display:none}
.as-res{grid-template-columns:1fr}
.as-bars,.as-offs,.as-dims{grid-template-columns:1fr}
.as-head{flex-direction:column-reverse;align-items:flex-start;gap:14px}
.as-live{align-self:center}
}
/* =====================================================================
PRINTABLE ASSESSMENT REPORT
===================================================================== */
#fcxReport{display:none}
@media print{
@page{margin:14mm 13mm}
html,body{background:#fff!important;color:#111!important}
body{overflow:visible!important;height:auto!important}
body > *{display:none!important}
body > #fcxReport{display:block!important}
#fcxReport{position:static;width:100%;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
font-size:10.6pt;line-height:1.5;color:#111;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.rp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
padding-bottom:12px;border-bottom:2px solid #111;margin-bottom:22px}
.rp-mark{font-size:22pt;font-weight:800;letter-spacing:-.02em;color:#111}
.rp-mark i{font-style:normal;color:#5468f2}
.rp-sub{margin:2px 0 0;font-size:9pt;color:#666}
.rp-meta{text-align:right}
.rp-meta b{display:block;font-size:11pt}
.rp-meta span{font-size:9pt;color:#666}
.rp-sec{margin-bottom:26px;break-inside:avoid}
.rp-sec h1{margin:0 0 4px;font-size:22pt;font-weight:700;letter-spacing:-.02em;color:#111}
.rp-sec h2{margin:0 0 8px;font-size:12pt;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:#111;border-bottom:1px solid #ccc;padding-bottom:6px}
.rp-score{margin:0 0 10px;font-size:15pt;font-weight:700;color:#5468f2}
.rp-score i{font-style:normal;font-size:10pt;font-weight:400;color:#666;margin-left:6px}
.rp-blurb,.rp-lead{margin:0 0 14px;font-size:10.4pt;color:#333;max-width:64em}
.rp-split{display:flex;gap:22px;align-items:flex-start}
.rp-radar{flex:0 0 340px}
.rp-radar .rd-svg{width:340px;height:auto}
.rp-read{margin:0 0 12px;font-size:10.4pt;color:#333}
.rp-read b{color:#111}
.rd-grid{fill:#fff;stroke:#d5d5dd}
.rd-axis{stroke:#d5d5dd}
.rd-shape{fill:rgba(84,104,242,.2);stroke:#5468f2;stroke-width:1.6}
.rd-pt{fill:#5468f2}
.rd-lab2{fill:#111;font-size:10px;font-weight:600}
.rd-num{fill:#5468f2;font-size:9.5px}
.rp-tbl{width:100%;border-collapse:collapse;font-size:9.4pt;margin-top:4px}
.rp-tbl th{text-align:left;padding:6px 8px;border-bottom:1.5px solid #111;font-size:8.2pt;
letter-spacing:.06em;text-transform:uppercase;color:#333}
.rp-tbl td{padding:6px 8px;border-bottom:1px solid #e2e2e8;vertical-align:top;color:#333}
.rp-tbl td b{color:#111}
.rp-tbl td em{display:block;font-style:normal;font-size:8.4pt;color:#777;margin-top:2px}
.rp-tbl .rp-num2{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
color:#111;position:static;display:table-cell;width:58px}
.rp-tbl td.next{color:#3550c8}
.rp-offs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rp-off{border:1px solid #ccc;border-radius:8px;padding:12px 14px;break-inside:avoid}
.rp-off:nth-child(-n+2){border-color:#5468f2;background:#f4f5ff}
.rp-tone{margin:0 0 4px;font-size:7.8pt;letter-spacing:.14em;text-transform:uppercase;color:#5468f2}
.rp-off:nth-child(n+3) .rp-tone{color:#777}
.rp-off h4{margin:0 0 6px;font-size:11pt;font-weight:700;color:#111}
.rp-off p{margin:0 0 8px;font-size:9.4pt;color:#444}
.rp-dlh{margin:8px 0 4px!important;font-size:8.2pt!important;letter-spacing:.08em;text-transform:uppercase;color:#777}
.rp-dl{margin:0;padding-left:16px;font-size:9.4pt;color:#333}
.rp-dl li{margin-bottom:2px}
.rp-dim{break-inside:avoid;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e2e2e8}
.rp-dim h3{margin:0 0 2px;font-size:11.4pt;font-weight:700;color:#111}
.rp-sc{float:right;font-size:9pt;font-weight:600;color:#5468f2}
.rp-desc{margin:0 0 10px;font-size:9pt;color:#777}
.rp-q{margin-bottom:9px;break-inside:avoid}
.rp-qt{margin:0 0 4px;font-size:10pt;font-weight:600;color:#111}
.rp-q ul{margin:0;padding:0;list-style:none}
.rp-q li{position:relative;padding:2px 0 2px 20px;font-size:9.2pt;color:#888}
.rp-q li.on{color:#111;font-weight:600}
.rp-box{position:absolute;left:0;top:3px;width:12px;height:12px;border:1px solid #aaa;
border-radius:3px;font-size:9px;line-height:11px;text-align:center;color:#5468f2}
.rp-q li.on .rp-box{border-color:#5468f2;background:#eef0ff}
.rp-pts{margin-left:8px;font-size:8.4pt;color:#5468f2}
.rp-foot{margin-top:24px;padding-top:12px;border-top:1px solid #ccc;font-size:8.6pt;color:#777}
.rp-foot p{margin:0 0 4px}
.rp-foot b{color:#111}
}
/* =====================================================================
ENGAGEMENT DETAIL + PLAN VIEWS
===================================================================== */
.m-wrap.lvl15{z-index:96}
.m-panel.wider{max-width:1060px}
.eng .cta-row .btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.en-whos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.en-who{padding:15px 17px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.en-who b{display:block;font-size:13.8px;color:var(--text);margin-bottom:4px}
.en-who p{margin:0;font-size:12.7px;color:var(--muted);font-weight:300;line-height:1.55}
.en-acts{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.en-actt{margin:0 0 10px;font-size:11.4px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.en-act .m-list li{font-size:13.6px;padding-bottom:9px}
.en-when{white-space:nowrap;color:var(--cyan);font-size:12.4px;font-family:'JetBrains Mono',monospace}
/* ---- plan view switcher ---- */
.pl-views{display:inline-flex;gap:4px;padding:4px;margin-bottom:20px;border:1px solid var(--line);
border-radius:100px;background:rgba(255,255,255,.03)}
.pl-v{padding:8px 18px;border:0;border-radius:100px;background:transparent;cursor:pointer;
color:var(--muted);font-size:13px;font-weight:500;transition:.22s}
.pl-v:hover{color:#fff}
.pl-v.on{background:var(--grad);color:#fff;box-shadow:0 6px 20px rgba(84,104,242,.4)}
.pl-pane{display:none}
.pl-pane.on{display:block;animation:fadeUp .35s ease both}
.pl-note{margin:14px 0 0;font-size:12.2px;color:var(--dim);font-weight:300;line-height:1.6}
/* ---- gantt ---- */
.pg-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)}
.pg-chart{min-width:760px;padding:4px 0 10px}
.pg-row{display:grid;grid-template-columns:266px 1fr;gap:14px;align-items:center;padding:5px 18px}
.pg-head{position:sticky;top:0;padding-top:12px;padding-bottom:8px;
background:linear-gradient(180deg,#0f0f19,#0f0f19 70%,rgba(15,15,25,0))}
.pg-name{font-size:12.9px;color:var(--text);line-height:1.35}
.pg-name b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--cyan);
margin-right:7px}
.pg-name em{display:block;margin-top:3px;font-style:normal;font-size:11px;color:var(--dim)}
.pg-head .pg-name{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pg-track{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));align-items:center;
min-height:22px;background-image:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
background-size:calc(100% / var(--cols)) 100%}
.pg-head .pg-track{background:none}
.pg-u{font-size:10.5px;color:var(--dim);font-family:'JetBrains Mono',monospace;text-align:center}
.pg-grp{padding:16px 18px 6px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);border-top:1px solid var(--line);margin-top:4px}
.pg-grp span{border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:4px}
.pg-bar{height:20px;border-radius:6px;display:grid;place-items:center;font-size:9.5px;
font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,.85);overflow:hidden;
white-space:nowrap;cursor:default;transition:filter .2s,transform .2s}
.pg-bar:hover{filter:brightness(1.25);transform:scaleY(1.15)}
.pg-bar.t0{background:linear-gradient(90deg,rgba(123,92,240,.85),rgba(123,92,240,.5))}
.pg-bar.t1{background:linear-gradient(90deg,rgba(84,104,242,.9),rgba(84,104,242,.55))}
.pg-bar.t2{background:linear-gradient(90deg,rgba(43,139,230,.9),rgba(34,211,238,.6))}
.pg-bar.t3{background:linear-gradient(90deg,rgba(34,211,238,.85),rgba(34,211,238,.45))}
.pg-ms{padding-top:2px;padding-bottom:10px}
.pg-ms .pg-name{color:var(--dim)}
.pg-mk{display:grid;place-items:center;position:relative}
.pg-mk i{width:9px;height:9px;background:var(--cyan);transform:rotate(45deg);border-radius:2px;
box-shadow:0 0 12px rgba(34,211,238,.7)}
.pg-mk b{position:absolute;top:13px;font-size:9.5px;font-weight:500;color:var(--cyan);
white-space:nowrap;font-family:'JetBrains Mono',monospace;
padding:1px 5px;border-radius:5px;background:rgba(10,10,18,.9)}
.pg-mk:nth-of-type(even) b{top:25px}
.pg-ms{padding-bottom:22px}
/* ---- wbs + raci tables ---- */
.pl-tbl{font-size:12.6px}
.pl-tbl td{padding:10px 14px}
.wb-grp td{padding:11px 14px!important;font-size:10.8px;letter-spacing:.12em;text-transform:uppercase;
color:var(--cyan);background:rgba(84,104,242,.09)}
.wb-c{font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--dim);white-space:nowrap}
.wb-o{color:var(--text)}
.ra-tbl th.ra-r{text-align:center;white-space:nowrap;font-size:10px}
.ra-c{text-align:center}
.ra-c span{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;
font-size:11px;font-weight:700}
.ra-r{background:rgba(84,104,242,.9);color:#fff}
.ra-a{background:rgba(34,211,238,.9);color:#04202a}
.ra-c2,.ra-c span.ra-c2{background:rgba(255,255,255,.13);color:var(--text)}
.ra-i{background:rgba(255,255,255,.05);color:var(--dim)}
.ra-n{background:none}
.ra-key{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:11.8px;color:var(--muted)}
.ra-r2{display:inline-flex;align-items:center;gap:7px}
.ra-key b{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;
font-size:10.5px;font-weight:700}
@media (max-width:760px){
.en-whos,.en-acts{grid-template-columns:1fr}
.pg-row{grid-template-columns:190px 1fr;gap:10px;padding:5px 12px}
.pl-views{width:100%;justify-content:center}
}
/* =====================================================================
SAMPLE PROJECT PLAN — interactive
===================================================================== */
.m-wrap.lvl14{z-index:94}
.sp-h{margin:64px 0 24px}
.sp-h h3{font-size:23px;margin-bottom:8px;letter-spacing:-.02em}
.sp-h p{margin:0;max-width:74ch;font-size:14.8px;color:var(--muted);font-weight:300;line-height:1.65}
.sp-note{margin:16px 0 0;font-size:12.6px;color:var(--dim);font-weight:300;line-height:1.6}
.sp-more{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:11.8px;
font-weight:500;color:var(--cyan);transition:gap .25s}
.sp-more svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
/* facts */
.sp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:34px 0 42px}
.sp-fact{padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.sp-fact b{display:block;font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-fact span{display:block;margin-top:7px;font-size:12.4px;color:var(--muted);font-weight:300}
/* timeline */
.sp-timeline{position:relative;padding:26px 24px 34px;border:1px solid var(--line);border-radius:20px;
background:linear-gradient(150deg,rgba(123,92,240,.09),rgba(255,255,255,.02));overflow:hidden}
.sp-days,.sp-track,.sp-pins{display:grid;
grid-template-columns:repeat(10,minmax(0,1fr)) minmax(0,2.6fr) repeat(4,minmax(0,1fr))}
.sp-days{margin-bottom:8px}
.sp-day{font-size:10px;color:var(--dim);font-family:'JetBrains Mono',monospace;text-align:center}
.sp-track{position:relative;gap:0;align-items:stretch;min-height:104px;
background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 6.6667%)}
.sp-seg{grid-row:1;margin:0 3px;padding:13px 14px;text-align:left;cursor:pointer;border:1px solid transparent;
border-radius:14px;color:var(--text);transition:transform .25s,box-shadow .25s,filter .25s;
transform-origin:0 50%;transform:scaleX(0)}
.rv.in .sp-seg{animation:growX .7s cubic-bezier(.2,.8,.2,1) both}
.sp-seg.t0{background:linear-gradient(120deg,rgba(123,92,240,.42),rgba(123,92,240,.16));
border-color:rgba(123,92,240,.5)}
.sp-seg.t1{background:linear-gradient(120deg,rgba(84,104,242,.5),rgba(84,104,242,.2));
border-color:rgba(84,104,242,.6)}
.sp-seg.t2{background:linear-gradient(120deg,rgba(34,211,238,.34),rgba(34,211,238,.12));
border-color:rgba(34,211,238,.5)}
.sp-seg:hover{filter:brightness(1.18);box-shadow:0 12px 34px rgba(0,0,0,.4);transform:translateY(-3px)}
.sp-seg:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sp-sn{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:rgba(255,255,255,.6)}
.sp-seg b{display:block;margin:5px 0 3px;font-size:16px;letter-spacing:-.01em}
.sp-seg em{display:block;font-style:normal;font-size:11.4px;color:rgba(255,255,255,.72);line-height:1.45}
.sp-seg .sp-more{margin-top:9px;font-size:11px}
.sp-seg:hover .sp-more{gap:11px}
.sp-pins{margin-top:14px}
.sp-pin{grid-row:1;display:grid;place-items:center;opacity:0}
.rv.in .sp-pin{animation:fadeUp .5s ease both}
.sp-pin i{width:9px;height:9px;background:var(--cyan);transform:rotate(45deg);border-radius:2px;
box-shadow:0 0 14px rgba(34,211,238,.8)}
.sp-pin b{margin-top:7px;font-size:10px;font-weight:500;color:var(--cyan);white-space:nowrap;
font-family:'JetBrains Mono',monospace}
.sp-sweep{position:absolute;top:0;bottom:0;width:120px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);left:-140px}
.rv.in .sp-sweep{animation:spSweep 2.4s ease-out .5s 1}
@keyframes spSweep{from{left:-140px}to{left:105%}}
/* agenda strip */
.ag-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));gap:11px}
.ag-block{position:relative;padding:18px 18px 16px;text-align:left;cursor:pointer;border-radius:16px;
border:1px solid var(--line);background:var(--panel);transition:.25s;opacity:0}
.rv.in .ag-block{animation:fadeUp .55s ease both}
.ag-block:hover{transform:translateY(-4px);border-color:rgba(84,104,242,.6);background:rgba(84,104,242,.1)}
.ag-block:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.ag-block::before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 4px 4px}
.ag-block.t0::before{background:#7b5cf0}.ag-block.t1::before{background:#5468f2}
.ag-block.t2::before{background:#22d3ee}
.ag-t{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--cyan);display:block}
.ag-d{display:block;margin:2px 0 8px;font-size:10.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ag-block b{display:block;font-size:14.4px;font-weight:600;color:var(--text);line-height:1.35}
.ag-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;font-weight:500;
color:var(--muted);transition:.25s}
.ag-go svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.ag-block:hover .ag-go{color:var(--cyan);gap:10px}
/* deliverable cards */
.sp-dls{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.sp-dl{padding:22px 22px 20px;text-align:left;cursor:pointer;border:1px solid var(--line);
border-radius:18px;background:var(--panel);transition:.25s}
.sp-dl:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.07)}
.sp-dl:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sp-doc{display:grid;gap:4px;width:44px;padding:9px 8px;margin-bottom:14px;border-radius:6px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.sp-doc i{height:2px;border-radius:2px;background:rgba(255,255,255,.35)}
.sp-doc i:nth-child(1){width:70%}.sp-doc i:nth-child(2){width:100%}.sp-doc i:nth-child(3){width:88%}
.sp-doc i:nth-child(4){width:100%}.sp-doc i:nth-child(5){width:52%;background:var(--cyan)}
.sp-dl:hover .sp-doc i:nth-child(5){width:80%;transition:width .3s}
.sp-dlm{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.sp-dl b{display:block;margin:6px 0 8px;font-size:16px;font-weight:600;color:var(--text)}
.sp-dl p{margin:0;font-size:13px;color:var(--muted);font-weight:300;line-height:1.6}
/* effort + room panels */
.sp-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.sp-panel{padding:26px 26px 24px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.sp-phead{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}
.sp-phead h3{margin:0;font-size:18px}
.ef-head{display:grid;grid-template-columns:1fr 120px 62px;align-items:center;margin-bottom:8px}
.ef-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ef-cols i{font-style:normal;font-size:9.6px;letter-spacing:.06em;text-transform:uppercase;
color:var(--dim);text-align:center}
.ef-row{display:grid;grid-template-columns:1fr 120px 62px;align-items:center;gap:8px;padding:7px 0;
border-top:1px solid rgba(255,255,255,.05)}
.ef-role{font-size:13px;color:var(--text)}
.ef-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ef-cells i{height:9px;border-radius:3px;background:rgba(255,255,255,.06)}
.ef-cells i.l1{background:rgba(123,92,240,.45)}
.ef-cells i.l2{background:rgba(84,104,242,.7)}
.ef-cells i.l3{background:linear-gradient(90deg,#5468f2,#22d3ee)}
.ef-t{font-size:12px;text-align:right;color:var(--cyan);font-family:'JetBrains Mono',monospace}
.ef-tot{color:var(--cyan);font-family:'JetBrains Mono',monospace}
.sp-room{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sp-room li{font-size:12.9px;color:var(--muted);font-weight:300;line-height:1.5;padding-left:14px;
position:relative}
.sp-room li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;
background:rgba(84,104,242,.8)}
.sp-room b{display:block;color:var(--text);font-weight:600;font-size:13.4px}
/* risks */
.rk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.rk-card{padding:22px;text-align:left;cursor:pointer;border:1px solid var(--line);border-radius:18px;
background:var(--panel);transition:.25s}
.rk-card:hover{transform:translateY(-4px);border-color:rgba(123,92,240,.6);background:rgba(123,92,240,.09)}
.rk-card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.rk-sev{display:inline-block;margin-bottom:11px;padding:4px 11px;border-radius:100px;font-size:10.4px;
letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.rk-sev.sh{background:rgba(123,92,240,.22);color:#c9b8ff;border:1px solid rgba(123,92,240,.5)}
.rk-sev.sm{background:rgba(255,255,255,.07);color:var(--muted);border:1px solid var(--line)}
.rk-card b{display:block;margin-bottom:8px;font-size:16px;font-weight:600;color:var(--text)}
.rk-card p{margin:0;font-size:13px;color:var(--muted);font-weight:300;line-height:1.6}
/* detail modal internals */
.dt-steps{display:grid;gap:2px}
.dt-step{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:13px 0;
border-top:1px solid rgba(255,255,255,.06)}
.dt-when{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cyan)}
.dt-step b{display:block;font-size:14.2px;color:var(--text);margin-bottom:4px}
.dt-step p{margin:0;font-size:13px;color:var(--muted);font-weight:300;line-height:1.6}
.dt-note{margin-top:20px;padding:18px 20px;border-radius:14px;border-left:3px solid}
.dt-note b{display:block;font-size:11.4px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.dt-note p{margin:0;font-size:13.6px;font-weight:300;line-height:1.65;color:var(--muted)}
.dt-note.good{background:rgba(34,211,238,.07);border-color:var(--cyan)}
.dt-note.good b{color:var(--cyan)}
.dt-note.watch{background:rgba(123,92,240,.09);border-color:#7b5cf0}
.dt-note.watch b{color:#b9a6ff}
@media (max-width:860px){
.sp-two{grid-template-columns:1fr}
.sp-timeline{overflow-x:auto}
.sp-days,.sp-track,.sp-pins{min-width:640px}
.dt-step{grid-template-columns:1fr;gap:4px}
}
/* =====================================================================
WHAT WE DO — the operating loop
===================================================================== */
.wd-head{max-width:80ch;margin-bottom:44px}
.wd-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:44px;align-items:center}
.wd-ring{position:relative}
.wd-ring > svg{width:100%;height:auto;display:block;overflow:visible}
.wd-orbit{fill:none;stroke:rgba(255,255,255,.07)}
.wd-orbit.dash{stroke:rgba(255,255,255,.05);stroke-dasharray:2 10;
transform-box:fill-box;transform-origin:center}
.rv.in .wd-orbit.dash{animation:spin 60s linear infinite}
.wd-link{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1.5}
.wd-pulse{fill:none;stroke:url(#wdg);stroke-width:2.4;stroke-linecap:round;
stroke-dasharray:70 1010;transform-box:fill-box;transform-origin:center;opacity:.9}
.rv.in .wd-pulse{animation:spin 9s linear infinite}
.wd-core-halo{fill:rgba(84,104,242,.07)}
.rv.in .wd-core-halo{animation:breathe 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.wd-core-disc{fill:rgba(11,11,20,.92);stroke:rgba(255,255,255,.1)}
.wd-core-prog{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linecap:round;
stroke-dasharray:540;stroke-dashoffset:540;transform:rotate(-90deg);
transform-box:fill-box;transform-origin:center;opacity:.75}
.wd-stage.cycling .wd-core-prog{animation:wdProg 6s linear infinite}
.wd-stage.cycling.hold .wd-core-prog{animation-play-state:paused}
@keyframes wdProg{from{stroke-dashoffset:540}to{stroke-dashoffset:0}}
.wd-core-n{fill:#fff;font-size:38px;font-weight:700;text-anchor:middle;letter-spacing:-.03em}
.wd-core-l{fill:var(--dim);font-size:11px;text-anchor:middle;letter-spacing:.2em;text-transform:uppercase}
.wd-node{cursor:pointer}
.wd-node *{transition:fill .3s,stroke .3s,opacity .3s,transform .3s}
.wd-halo{fill:rgba(84,104,242,.14);opacity:0}
.wd-ring2{fill:none;stroke:rgba(84,104,242,.5);stroke-dasharray:3 6;opacity:0;
transform-box:fill-box;transform-origin:center}
.wd-disc{fill:#0e0e18;stroke:rgba(255,255,255,.14);stroke-width:1.4}
.wd-ico svg{width:24px;height:24px;overflow:visible}
.wd-ico path,.wd-ico circle{fill:none;stroke:var(--muted);stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.wd-verb{fill:var(--muted);font-size:11.4px;font-weight:600;text-anchor:middle;letter-spacing:.02em}
.wd-num{fill:var(--dim);font-size:9.5px;text-anchor:middle;font-family:'JetBrains Mono',monospace}
.wd-node:hover .wd-disc{stroke:rgba(255,255,255,.4)}
.wd-node:focus-visible{outline:none}
.wd-node:focus-visible .wd-disc{stroke:var(--cyan);stroke-width:2}
.wd-node.on .wd-halo{opacity:1}
.wd-node.on .wd-ring2{opacity:1;animation:spin 14s linear infinite}
.wd-node.on .wd-disc{fill:rgba(84,104,242,.22);stroke:rgba(123,92,240,.9);stroke-width:1.8}
.wd-node.on .wd-ico path,.wd-node.on .wd-ico circle{stroke:#fff}
.wd-node.on .wd-verb{fill:#fff}
.wd-node.on .wd-num{fill:var(--cyan)}
.wd-stage:hover .wd-node:not(.on){opacity:.55}
.wd-dots{display:none;gap:8px;justify-content:center;margin-top:18px}
.wd-dot{width:34px;height:4px;border:0;border-radius:100px;background:rgba(255,255,255,.14);cursor:pointer}
.wd-dot.on{background:var(--grad)}
.wd-detail{position:relative;display:grid;min-height:340px}
.wd-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);
transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);
padding:32px 34px;border:1px solid var(--line);border-radius:22px;
background:linear-gradient(160deg,rgba(123,92,240,.12),rgba(255,255,255,.02) 62%)}
.wd-panel.on{opacity:1;visibility:visible;transform:none}
.wd-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-family:'JetBrains Mono',monospace}
.wd-eyebrow span{padding:5px 13px;border-radius:100px;background:rgba(34,211,238,.14);
border:1px solid rgba(34,211,238,.4);color:var(--cyan);font-family:'Inter',sans-serif;
font-weight:600;letter-spacing:.1em}
.wd-panel h3{margin:0 0 12px;font-size:clamp(20px,2.3vw,26px);letter-spacing:-.02em;line-height:1.2}
.wd-q{margin:0 0 22px;font-size:15px;color:#c9cdf5;font-weight:300;line-height:1.6;
padding-left:15px;border-left:2px solid rgba(123,92,240,.7)}
.wd-highs{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px}
.wd-highs li{display:flex;gap:11px;font-size:14.2px;color:var(--muted);font-weight:300;line-height:1.55}
.wd-highs svg{flex:0 0 auto;width:16px;height:16px;margin-top:3px;stroke:var(--cyan);fill:none;
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wd-cta .btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
@media (max-width:980px){
.wd-stage{grid-template-columns:1fr;gap:26px}
.wd-ring{max-width:460px;margin:0 auto}
.wd-detail{min-height:0}
.wd-panel{position:relative;padding:26px 22px}
}
@media (max-width:620px){
.wd-ring svg{display:none}
.wd-dots{display:flex}
.wd-verb,.wd-num{display:none}
}
@media (prefers-reduced-motion:reduce){
.wd-pulse,.wd-orbit.dash,.wd-core-halo,.wd-node.on .wd-ring2{animation:none!important}
.wd-stage.cycling .wd-core-prog{animation:none!important;stroke-dashoffset:0!important}
}
/* =====================================================================
LET'S TALK — the challenge picker
===================================================================== */
.ch-wrap{position:relative;padding:56px 48px 52px;border:1px solid var(--line);border-radius:28px;
overflow:hidden;background:
radial-gradient(900px 400px at 15% 0%,rgba(123,92,240,.16),transparent 60%),
radial-gradient(760px 380px at 88% 100%,rgba(34,211,238,.12),transparent 62%),
linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.ch-wrap::before{content:"";position:absolute;inset:-40% -10%;pointer-events:none;
background:conic-gradient(from 0deg,transparent 0 62%,rgba(84,104,242,.10) 78%,transparent 92%);
animation:spin 26s linear infinite}
.ch-head{position:relative;text-align:center;max-width:76ch;margin:0 auto 38px}
.ch-head h2{margin-bottom:14px}
.ch-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ch-card{position:relative;display:flex;flex-direction:column;gap:9px;padding:24px 22px 20px;
text-align:left;cursor:pointer;border:1px solid var(--line);border-radius:20px;
background:rgba(10,10,18,.55);transition:transform .28s cubic-bezier(.2,.8,.2,1),
border-color .28s,background .28s,box-shadow .28s}
.ch-card:hover{transform:translateY(-5px);border-color:rgba(84,104,242,.6);
background:rgba(84,104,242,.12);box-shadow:0 18px 44px rgba(0,0,0,.42)}
.ch-card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.ch-card[aria-pressed=true]{border-color:rgba(123,92,240,.9);background:rgba(123,92,240,.18);
box-shadow:0 0 0 1px rgba(123,92,240,.5),0 18px 44px rgba(0,0,0,.45)}
.ch-ico{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
background:rgba(255,255,255,.06);border:1px solid var(--line);margin-bottom:4px}
.ch-ico svg{width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .28s}
.ch-card:hover .ch-ico svg,.ch-card[aria-pressed=true] .ch-ico svg{stroke:var(--cyan)}
.ch-card b{font-size:16.4px;font-weight:600;color:var(--text);line-height:1.3}
.ch-sym{font-size:13.2px;color:var(--muted);font-weight:300;line-height:1.55}
.ch-pick{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:12px;
font-size:11.6px;font-weight:500;color:var(--dim);transition:color .25s,gap .25s}
.ch-pick svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.ch-card:hover .ch-pick,.ch-card[aria-pressed=true] .ch-pick{color:var(--cyan);gap:11px}
.ch-other{border-style:dashed}
.ch-custom{position:relative;margin-top:16px;padding:22px 24px;border:1px solid rgba(34,211,238,.35);
border-radius:18px;background:rgba(34,211,238,.06);animation:fadeUp .4s ease both}
.ch-custom[hidden]{display:none}
.ch-custom label{display:block;margin-bottom:10px;font-size:12px;letter-spacing:.1em;
text-transform:uppercase;color:var(--cyan);font-weight:600}
.ch-inputrow{display:flex;gap:10px;flex-wrap:wrap}
.ch-inputrow input{flex:1 1 320px;padding:14px 18px;border-radius:12px;border:1px solid var(--line);
background:rgba(10,10,18,.7);color:var(--text);font:inherit;font-size:14.6px}
.ch-inputrow input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.ch-inputrow .btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.ch-hint{margin:10px 0 0;font-size:11.6px;color:var(--dim)}
.ch-answer{position:relative;margin-top:18px}
.ch-answer[hidden]{display:none}
.ch-panel{padding:34px 34px 30px;border:1px solid rgba(123,92,240,.45);border-radius:22px;
background:linear-gradient(160deg,rgba(123,92,240,.14),rgba(10,10,18,.72) 58%);
animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.ch-matched{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;padding:7px 15px;
border-radius:100px;background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.42);
font-size:11.6px;color:var(--cyan);font-weight:600;letter-spacing:.05em}
.ch-panel h3{margin:0 0 10px;font-size:clamp(21px,2.4vw,27px);letter-spacing:-.02em;line-height:1.2}
.ch-cause{margin:0 0 26px;font-size:15px;color:var(--muted);font-weight:300;line-height:1.68;max-width:76ch}
.ch-cause b{color:#dfe2f0;font-weight:500}
.ch-h{margin:0 0 16px;font-size:11.6px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.ch-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:26px}
.ch-step{position:relative;padding:18px 18px 16px;border:1px solid var(--line);border-radius:16px;
background:rgba(255,255,255,.03);opacity:0;animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.ch-step::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;
background:var(--grad);transform:scaleX(0);transform-origin:0 50%;
animation:growX .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:inherit}
.ch-stepn{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan);
margin-bottom:7px}
.ch-step b{display:block;font-size:14.4px;color:var(--text);margin-bottom:6px;line-height:1.3}
.ch-step p{margin:0;font-size:12.8px;color:var(--muted);font-weight:300;line-height:1.55}
.ch-proof{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;margin-bottom:26px;
border-radius:16px;background:rgba(34,211,238,.08);border-left:3px solid var(--cyan)}
.ch-proof svg{flex:0 0 auto;width:20px;height:20px;margin-top:2px;stroke:var(--cyan);fill:none;
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ch-proof b{display:block;font-size:11.4px;letter-spacing:.13em;text-transform:uppercase;
color:var(--cyan);margin-bottom:5px}
.ch-proof p{margin:0;font-size:14px;color:var(--text);font-weight:300;line-height:1.6}
.ch-fit{padding:24px 26px;border-radius:18px;background:rgba(255,255,255,.03);
border:1px solid var(--line);margin-bottom:24px}
.ch-fit p{margin:0 0 16px;font-size:14.4px;color:var(--muted);font-weight:300;line-height:1.65;max-width:74ch}
.ch-offers{display:flex;flex-wrap:wrap;gap:10px}
.ch-offer{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:100px;
border:1px solid rgba(84,104,242,.5);background:rgba(84,104,242,.14);color:var(--text);
font-size:13.2px;font-weight:500;cursor:pointer;transition:.25s}
.ch-offer:hover{background:rgba(84,104,242,.28);border-color:rgba(123,92,240,.9);transform:translateY(-2px)}
.ch-offer i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan)}
.ch-offer svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.ch-first{display:flex;gap:13px;align-items:flex-start;margin-bottom:26px;font-size:13.8px;
color:var(--muted);font-weight:300;line-height:1.6}
.ch-first b{color:var(--text);font-weight:600;white-space:nowrap}
.ch-cta{display:flex;flex-wrap:wrap;gap:11px;align-items:center;padding-top:22px;
border-top:1px solid var(--line)}
.ch-cta .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.ch-reset{background:none;border:0;color:var(--dim);font-size:12.6px;cursor:pointer;
text-decoration:underline;text-underline-offset:3px}
.ch-reset:hover{color:var(--text)}
@media (max-width:980px){ .ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
.ch-wrap{padding:36px 20px 34px;border-radius:20px}
.ch-grid{grid-template-columns:1fr}
.ch-panel{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
.ch-wrap::before{animation:none}
.ch-step,.ch-step::after,.ch-panel{animation:none!important;opacity:1!important;transform:none!important}
}
/* =====================================================================
FAQ — accordion, search, filter, pagination
===================================================================== */
.fq-tools{display:grid;gap:16px;margin-bottom:26px}
.fq-searchbox{position:relative;display:flex;align-items:center}
.fq-searchbox > svg{position:absolute;left:20px;width:18px;height:18px;stroke:var(--dim);fill:none;
stroke-width:1.9;stroke-linecap:round;pointer-events:none;transition:stroke .25s}
.fq-searchbox input{width:100%;padding:18px 52px 18px 52px;border-radius:16px;font:inherit;
font-size:15.4px;color:var(--text);border:1px solid var(--line);background:rgba(255,255,255,.03);
transition:border-color .25s,box-shadow .25s,background .25s}
.fq-searchbox input::placeholder{color:var(--dim)}
.fq-searchbox input:focus{outline:none;border-color:rgba(84,104,242,.75);background:rgba(84,104,242,.07);
box-shadow:0 0 0 4px rgba(84,104,242,.13)}
.fq-searchbox input:focus + .fq-clear,.fq-searchbox input:focus ~ svg{stroke:var(--cyan)}
.fq-clear{position:absolute;right:14px;width:30px;height:30px;display:grid;place-items:center;
border:0;border-radius:50%;background:rgba(255,255,255,.08);color:var(--muted);cursor:pointer}
.fq-clear[hidden]{display:none}
.fq-clear:hover{background:rgba(255,255,255,.16);color:#fff}
.fq-clear svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.fq-chips{display:flex;flex-wrap:wrap;gap:8px}
.fq-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;
border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);
font-size:13px;font-weight:500;cursor:pointer;transition:.22s}
.fq-chip i{font-style:normal;font-size:10.5px;font-family:'JetBrains Mono',monospace;
padding:2px 7px;border-radius:100px;background:rgba(255,255,255,.07);color:var(--dim)}
.fq-chip:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.fq-chip.on{background:var(--grad);border-color:transparent;color:#fff;
box-shadow:0 8px 24px rgba(84,104,242,.36)}
.fq-chip.on i{background:rgba(0,0,0,.26);color:#fff}
.fq-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
font-size:12.6px;color:var(--dim)}
.fq-expand{background:none;border:0;color:var(--cyan);font-size:12.6px;cursor:pointer;
text-decoration:underline;text-underline-offset:3px}
.fq-list{display:grid;gap:10px}
.fq-item{border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden;
transition:border-color .28s,background .28s,transform .28s}
.fq-item:hover{border-color:rgba(255,255,255,.2)}
.fq-item.open{border-color:rgba(84,104,242,.6);background:rgba(84,104,242,.07)}
.fq-item[hidden]{display:none}
.fq-qh{margin:0;font-size:inherit;font-weight:inherit}
.fq-btn{width:100%;display:flex;align-items:center;gap:16px;padding:22px 24px;text-align:left;
background:none;border:0;cursor:pointer;color:var(--text)}
.fq-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
.fq-cat{flex:0 0 auto;padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.06);
border:1px solid var(--line);font-size:10.4px;letter-spacing:.08em;text-transform:uppercase;
color:var(--dim);white-space:nowrap}
.fq-item.open .fq-cat{background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.42);color:var(--cyan)}
.fq-qt{flex:1;font-size:16.8px;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.fq-qt mark{background:rgba(34,211,238,.28);color:#fff;border-radius:3px;padding:0 2px}
.fq-chev{flex:0 0 auto;width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .32s cubic-bezier(.2,.8,.2,1),stroke .25s}
.fq-item.open .fq-chev{transform:rotate(180deg);stroke:var(--cyan)}
.fq-a{padding:0 24px 26px;max-width:none}
.fq-a[hidden]{display:none}
.fq-item.open .fq-a > *{animation:fadeUp .45s cubic-bezier(.2,.8,.2,1) both}
.fq-item.open .fq-a > *:nth-child(2){animation-delay:.05s}
.fq-item.open .fq-a > *:nth-child(3){animation-delay:.1s}
.fq-item.open .fq-a > *:nth-child(4){animation-delay:.15s}
.fq-item.open .fq-a > *:nth-child(n+5){animation-delay:.2s}
.fq-a p{margin:0 0 14px;font-size:14.8px;color:var(--muted);font-weight:300;line-height:1.7;max-width:80ch}
.fq-a p b{color:var(--text);font-weight:600}
.fq-h{margin:24px 0 12px!important;font-size:11.4px!important;letter-spacing:.14em;
text-transform:uppercase;color:var(--cyan)!important;font-weight:600}
.fq-list li{font-size:14.4px}
ul.fq-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
ul.fq-list li{position:relative;padding-left:22px;color:var(--muted);font-weight:300;line-height:1.62}
ul.fq-list li::before{content:"";position:absolute;left:3px;top:9px;width:5px;height:5px;
border-radius:50%;background:rgba(255,255,255,.3)}
ul.fq-list.check li::before{content:"";left:0;top:5px;width:12px;height:7px;border-radius:0;
background:none;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
transform:rotate(-45deg)}
ul.fq-list li b{color:var(--text);font-weight:600}
.fq-viz{margin:6px 0 18px;padding:22px 20px 18px;border:1px solid var(--line);border-radius:16px;
background:rgba(255,255,255,.02);overflow-x:auto}
.fq-cap{margin:14px 0 0!important;font-size:12.4px!important;color:var(--dim)!important;line-height:1.6}
.fq-note{margin:18px 0;padding:18px 20px;border-radius:14px;border-left:3px solid}
.fq-note b{display:block;font-size:11.4px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.fq-note p{margin:0!important;font-size:14px!important;line-height:1.65}
.fq-note.good{background:rgba(34,211,238,.07);border-color:var(--cyan)}
.fq-note.good b{color:var(--cyan)}
.fq-note.watch{background:rgba(123,92,240,.09);border-color:#7b5cf0}
.fq-note.watch b{color:#b9a6ff}
.fq-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 18px}
.fq-col{padding:18px 20px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.fq-col b{display:block;margin-bottom:10px;font-size:13.4px;color:var(--text)}
.fq-col p{margin:0 0 8px!important;font-size:13.4px!important;padding-left:16px;position:relative}
.fq-col p::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%}
.fq-col.bad{border-color:rgba(255,255,255,.12)}
.fq-col.bad p::before{background:rgba(255,255,255,.25)}
.fq-col.good{border-color:rgba(34,211,238,.34);background:rgba(34,211,238,.05)}
.fq-col.good p::before{background:var(--cyan)}
.fq-a .m-tblwrap{margin:6px 0 18px}
.fq-links{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.fq-links .fq-h{margin-top:0!important}
.fq-linkrow{display:flex;flex-wrap:wrap;gap:9px}
.fq-link{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:100px;
border:1px solid rgba(84,104,242,.5);background:rgba(84,104,242,.13);color:var(--text);
font-size:12.8px;font-weight:500;cursor:pointer;transition:.22s}
.fq-link:hover{background:rgba(84,104,242,.26);transform:translateY(-2px)}
.fq-link.ex{border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.1)}
.fq-link.ex:hover{background:rgba(34,211,238,.2)}
.fq-link i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--cyan)}
.fq-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.fq-empty{text-align:center;padding:64px 24px;border:1px dashed var(--line);border-radius:20px}
.fq-empty[hidden]{display:none}
.fq-empty svg{width:34px;height:34px;stroke:var(--dim);fill:none;stroke-width:1.6;margin-bottom:14px}
.fq-empty h3{margin:0 0 8px;font-size:20px}
.fq-empty p{margin:0 0 22px;color:var(--muted);font-weight:300}
.fq-pager{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:32px;flex-wrap:wrap}
.fq-pager[hidden]{display:none}
.fq-pg{min-width:40px;height:40px;padding:0 13px;display:grid;place-items:center;border-radius:11px;
border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);
font-size:13.4px;font-weight:500;cursor:pointer;transition:.2s}
.fq-pg:hover:not(:disabled){color:#fff;border-color:rgba(255,255,255,.3)}
.fq-pg.on{background:var(--grad);border-color:transparent;color:#fff}
.fq-pg:disabled{opacity:.3;cursor:default}
.fq-gap{color:var(--dim);padding:0 4px}
@media (max-width:760px){
.fq-two{grid-template-columns:1fr}
.fq-btn{padding:18px;gap:12px;flex-wrap:wrap}
.fq-qt{font-size:15.4px;flex:1 1 100%;order:3}
.fq-chev{order:2;margin-left:auto}
.fq-a{padding:0 18px 22px}
}
/* =====================================================================
SOLUTIONS — the three-view console
===================================================================== */
.sm-console{position:relative;padding:26px 26px 30px;border:1px solid var(--line);border-radius:26px;
background:radial-gradient(800px 360px at 10% 0%,rgba(123,92,240,.13),transparent 62%),
linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.sm-switch{display:inline-flex;gap:4px;padding:5px;margin-bottom:22px;border:1px solid var(--line);
border-radius:100px;background:rgba(10,10,18,.6)}
.sm-v{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border:0;border-radius:100px;
background:transparent;color:var(--muted);font-size:13.4px;font-weight:500;cursor:pointer;
transition:.24s}
.sm-v svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.sm-v:hover{color:#fff}
.sm-v.on{background:var(--grad);color:#fff;box-shadow:0 8px 26px rgba(84,104,242,.42)}
.sm-pane{display:none}
.sm-pane.on{display:block;animation:fadeUp .42s cubic-bezier(.2,.8,.2,1) both}
.sm-legend{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:12.4px;color:var(--dim)}
.sm-key{width:22px;height:2px;border-radius:2px;background:var(--grad);flex:0 0 auto}
/* ---- map ---- */
.sm-canvas{overflow-x:auto}
.sm-canvas svg{width:100%;min-width:820px;height:auto;display:block;overflow:visible}
.sm-wire{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.6;stroke-dasharray:620;
stroke-dashoffset:620}
.rv.in .sm-wire{animation:draw 1.3s cubic-bezier(.3,.7,.2,1) .25s forwards}
.sm-flow{fill:none;stroke:url(#smg);stroke-width:2.2;stroke-linecap:round;
stroke-dasharray:16 500;stroke-dashoffset:0;opacity:0}
.sm-head{fill:rgba(255,255,255,.28)}
.sm-el{fill:var(--dim);font-size:10.5px;letter-spacing:.03em;opacity:0;
transition:opacity .3s;text-anchor:middle}
.sm-el.flat{paint-order:stroke;stroke:rgba(10,10,18,.92);stroke-width:5px;stroke-linejoin:round}
.sm-edge.lit .sm-wire{stroke:rgba(84,104,242,.6)}
.sm-edge.lit .sm-flow{opacity:1;animation:smFlow 1.8s linear infinite}
.sm-edge.lit .sm-el{opacity:1;fill:var(--cyan)}
.sm-edge.lit .sm-head{fill:var(--cyan)}
@keyframes smFlow{from{stroke-dashoffset:516}to{stroke-dashoffset:0}}
.sm-console.picked .sm-edge:not(.lit){opacity:.25}
.sm-node{cursor:pointer}
.sm-node *{transition:fill .28s,stroke .28s,opacity .28s}
.sm-box{fill:rgba(14,14,24,.92);stroke:rgba(255,255,255,.16);stroke-width:1.4}
.sm-glow{fill:rgba(84,104,242,.16);opacity:0}
.sm-node:hover .sm-box{stroke:rgba(255,255,255,.42)}
.sm-node:focus-visible{outline:none}
.sm-node:focus-visible .sm-box{stroke:var(--cyan);stroke-width:2}
.sm-node.on .sm-glow{opacity:1}
.sm-node.on .sm-box{fill:rgba(84,104,242,.2);stroke:rgba(123,92,240,.95);stroke-width:1.8}
.sm-console.picked .sm-node:not(.on):not(.rel){opacity:.42}
.sm-node.rel .sm-box{stroke:rgba(34,211,238,.6)}
.sm-n{fill:var(--cyan);font-size:11px;font-family:'JetBrains Mono',monospace}
.sm-nv{fill:var(--dim);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
text-anchor:end}
.sm-node.on .sm-nv{fill:var(--cyan)}
.sm-t{fill:var(--text);font-size:13px;font-weight:500}
.sm-node.on .sm-t{fill:#fff}
/* ---- sequence ---- */
.sm-seq{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02);
padding:18px 20px 14px;overflow-x:auto}
.sm-scale{display:grid;grid-template-columns:repeat(5,1fr);margin:0 0 12px 274px;min-width:420px}
.sm-scale span{font-size:10.5px;color:var(--dim);font-family:'JetBrains Mono',monospace;
border-left:1px solid rgba(255,255,255,.08);padding-left:8px}
.sm-row{display:grid;grid-template-columns:262px 1fr 130px;gap:12px;align-items:center;
padding:9px 0;border-top:1px solid rgba(255,255,255,.05);cursor:pointer;min-width:700px;
transition:background .24s}
.sm-row:hover{background:rgba(255,255,255,.03)}
.sm-row:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.sm-rl{display:flex;align-items:center;gap:10px;font-size:13.4px;color:var(--text)}
.sm-rl i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan)}
.sm-track{position:relative;height:30px;border-radius:9px;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 20%)}
.sm-bar{position:absolute;top:3px;height:24px;border-radius:8px;display:grid;place-items:center;
transform:scaleX(0);transform-origin:0 50%}
.rv.in .sm-bar{animation:growX .8s cubic-bezier(.2,.8,.2,1) both}
.sm-bar em{font-style:normal;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.92);
letter-spacing:.04em}
.sm-bar.t0{background:linear-gradient(90deg,rgba(123,92,240,.9),rgba(123,92,240,.5))}
.sm-bar.t1{background:linear-gradient(90deg,rgba(84,104,242,.92),rgba(84,104,242,.5))}
.sm-bar.t2{background:linear-gradient(90deg,rgba(43,139,230,.9),rgba(34,211,238,.55))}
.sm-row.on .sm-bar{box-shadow:0 0 0 1px rgba(255,255,255,.5),0 8px 26px rgba(84,104,242,.5)}
.sm-console.picked .sm-row:not(.on){opacity:.45}
.sm-rw{font-size:11.8px;color:var(--dim);text-align:right;font-family:'JetBrains Mono',monospace}
/* ---- constraint matrix ---- */
.sm-fitwrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;
background:rgba(255,255,255,.02)}
.sm-fit{width:100%;border-collapse:collapse;min-width:760px}
.sm-fit th{padding:14px 16px;text-align:left;font-size:11px;letter-spacing:.09em;
text-transform:uppercase;color:var(--dim);font-weight:600;border-bottom:1px solid var(--line)}
.sm-fit thead th span{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
.sm-fit thead th i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10.5px;
color:var(--cyan)}
.sm-fit tbody th{text-transform:none;letter-spacing:0;font-weight:400;width:34%;
border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}
.sm-fit tbody th b{display:block;font-size:13.8px;color:var(--text);font-weight:600;margin-bottom:4px}
.sm-fit tbody th em{font-style:normal;font-size:11.8px;color:var(--dim);line-height:1.5}
.sm-cell{padding:12px 8px;text-align:center;border-bottom:1px solid rgba(255,255,255,.05);
border-left:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .22s}
.sm-cell span{display:inline-block;width:24px;height:24px;border-radius:8px;transition:.24s}
.sm-cell.f0 span{background:rgba(255,255,255,.05)}
.sm-cell.f1 span{background:rgba(84,104,242,.3)}
.sm-cell.f2 span{background:rgba(84,104,242,.62)}
.sm-cell.f3 span{background:linear-gradient(140deg,#5468f2,#22d3ee);
box-shadow:0 0 18px rgba(34,211,238,.45)}
.sm-cell:hover{background:rgba(255,255,255,.05)}
.sm-cell:hover span,.sm-cell:focus-visible span{transform:scale(1.28)}
.sm-fit tbody tr:hover th b{color:var(--cyan)}
/* ---- shared drawer ---- */
.sm-drawer{position:relative;display:grid;margin-top:20px}
.sm-detail{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(16px);
transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);
padding:30px 32px 26px;border:1px solid rgba(123,92,240,.45);border-radius:22px;
background:linear-gradient(160deg,rgba(123,92,240,.13),rgba(10,10,18,.7) 60%)}
.sm-detail.on{opacity:1;visibility:visible;transform:none}
.sm-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-family:'JetBrains Mono',monospace}
.sm-eyebrow span{padding:5px 13px;border-radius:100px;background:rgba(34,211,238,.14);
border:1px solid rgba(34,211,238,.4);color:var(--cyan);font-family:'Inter',sans-serif;
font-weight:600;letter-spacing:.1em}
.sm-detail h3{margin:0 0 10px;font-size:clamp(20px,2.2vw,25px);letter-spacing:-.02em}
.sm-one{margin:0 0 18px;font-size:15px;color:var(--muted);font-weight:300;line-height:1.6;max-width:70ch}
.sm-facts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.sm-facts span{padding:9px 15px;border-radius:12px;border:1px solid var(--line);
background:rgba(255,255,255,.03);font-size:13px;color:var(--text)}
.sm-facts i{font-style:normal;display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:var(--dim);margin-bottom:3px}
.sm-dbody{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px}
.sm-h{margin:0 0 12px;font-size:11.2px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.sm-dbody > div > .sm-h:not(:first-child){margin-top:22px}
.sm-meter{margin-bottom:13px}
.sm-ml{display:block;font-size:13.2px;color:var(--muted);margin-bottom:6px}
.sm-mt{display:block;height:7px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden}
.sm-mt i{display:block;height:100%;border-radius:100px;background:var(--grad);
transform:scaleX(0);transform-origin:0 50%}
.sm-detail.on .sm-mt i{animation:growX .9s cubic-bezier(.2,.8,.2,1) .12s both}
.sm-phases{display:flex;flex-wrap:wrap;gap:7px}
.sm-phase{padding:7px 13px;border-radius:100px;border:1px solid var(--line);
background:rgba(255,255,255,.03);font-size:12.2px;color:var(--muted)}
.sm-ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sm-ul li{position:relative;padding-left:20px;font-size:13.4px;color:var(--muted);font-weight:300;
line-height:1.55}
.sm-ul li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;
background:rgba(255,255,255,.28)}
.sm-ul.up li::before{left:0;top:5px;width:11px;height:6px;border-radius:0;background:none;
border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg)}
.sm-dcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:22px;
border-top:1px solid var(--line)}
.sm-dcta .btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
.sm-console{padding:20px 16px 24px}
.sm-switch{width:100%;justify-content:center;flex-wrap:wrap}
.sm-dbody{grid-template-columns:1fr}
.sm-detail{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
.sm-wire{stroke-dashoffset:0!important;animation:none!important}
.sm-flow{animation:none!important}
.sm-bar,.sm-detail.on .sm-mt i{transform:none!important;animation:none!important}
}
.ch-close{position:relative;display:flex;flex-wrap:wrap;gap:24px;align-items:center;
justify-content:space-between;margin-top:22px;padding:28px 30px;border-radius:20px;
border:1px solid rgba(84,104,242,.4);
background:linear-gradient(120deg,rgba(84,104,242,.16),rgba(34,211,238,.08) 70%,rgba(255,255,255,.02))}
.ch-closet{flex:1 1 340px;min-width:0}
.ch-closeh{margin:0 0 6px;font-size:19px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.ch-closes{margin:0;font-size:13.8px;color:var(--muted);font-weight:300;line-height:1.6;max-width:56ch}
.ch-closec{flex:0 0 auto}
.ch-closec .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
.ch-close{padding:22px 20px;gap:18px}
.ch-closec{width:100%}
.ch-closec .btn{width:100%;justify-content:center}
}
.sm-el.flat.mid{text-anchor:middle}
/* ---------- solutions hero: the cost of being wrong ---------- */
.cw-lane{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;fill:var(--dim)}
.cw-seg{fill:rgba(255,255,255,.04);stroke:var(--line);stroke-width:1;transition:all .3s ease}
.cw-seg.on{fill:rgba(123,92,240,.16);stroke:rgba(123,92,240,.5)}
.cw-st{font-size:12.5px;font-weight:600;fill:var(--text);text-anchor:middle}
.cw-st.dim{fill:var(--muted);font-weight:400}
.cw-gate{fill:rgba(34,211,238,.10);stroke:rgba(34,211,238,.45);stroke-width:1.2;transition:all .3s ease}
.cw-gate.late{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.18)}
.cw-gt{font-size:10.5px;letter-spacing:.14em;font-weight:700;fill:var(--text);text-anchor:middle}
.cw-gs{font-size:10px;font-weight:300;fill:var(--dim);text-anchor:middle}
.cw-cost{fill:rgba(255,255,255,.10);transform-box:fill-box;transform-origin:left center;
transform:scaleX(0)}
.cw-cost.sm{fill:url(#cwg)}
.rv.in .cw-cost,.hart.on .cw-cost{animation:cwGrow .9s cubic-bezier(.2,.8,.2,1) .35s both}
@keyframes cwGrow{to{transform:scaleX(1)}}
.cw-cl{font-size:11.5px;font-weight:300;fill:var(--muted)}
.cw-div{stroke:rgba(255,255,255,.08);stroke-width:1;stroke-dasharray:4 6}
.cw-note rect{fill:rgba(255,255,255,.03);stroke:var(--line);stroke-width:1;transition:stroke .3s ease}
.cw-nt{font-size:12.5px;font-weight:400;fill:var(--muted);text-anchor:middle}
.cw-row.hot:hover .cw-seg,.cw-row.hot.pinned .cw-seg{stroke:var(--cyan)}
.cw-stop.hot:hover .cw-gate,.cw-stop.hot.pinned .cw-gate{stroke:var(--cyan)}
.cw-note.hot:hover rect,.cw-note.hot.pinned rect{stroke:var(--cyan)}
@media(prefers-reduced-motion:reduce){
.rv.in .cw-cost,.hart.on .cw-cost{animation:none;transform:scaleX(1)}
}
/* ---------- hero art: strategy choice + innovation lab ---------- */
.xa-col{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
fill:var(--cyan);text-anchor:middle}
.xa-col.dim{fill:var(--dim)}
.xa-split{stroke:rgba(255,255,255,.10);stroke-width:1;stroke-dasharray:4 6}
.xa-card rect{fill:rgba(255,255,255,.035);stroke:var(--line);stroke-width:1;transition:all .3s ease}
.xa-card .xa-t{font-size:14px;font-weight:600;fill:var(--text)}
.xa-card .xa-s{font-size:11.5px;font-weight:300;fill:var(--muted)}
.xa-card.on rect{fill:rgba(123,92,240,.14);stroke:rgba(123,92,240,.55)}
.xa-card.mid rect{fill:rgba(34,211,238,.07);stroke:rgba(34,211,238,.3)}
.xa-card.off rect{fill:rgba(255,255,255,.02)}
.xa-card.off .xa-t{fill:var(--muted)}
.xa-card.off .xa-s{fill:var(--dim)}
.xa-card.hot:hover rect,.xa-card.hot.pinned rect{stroke:var(--cyan);fill:rgba(34,211,238,.12)}
.xa-foot rect{fill:rgba(255,255,255,.03);stroke:var(--line);stroke-width:1;transition:all .3s ease}
.xa-foot .xa-ft{font-size:12.5px;font-weight:400;fill:var(--muted);text-anchor:middle}
.xa-foot.hot:hover rect,.xa-foot.hot.pinned rect{stroke:var(--cyan)}
.xa-stage{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
fill:var(--dim);text-anchor:middle}
.xa-lt{font-size:12.5px;font-weight:500;fill:var(--text)}
.xa-track{stroke:rgba(255,255,255,.08);stroke-width:3;stroke-linecap:round;fill:none}
.xa-run{stroke:url(#xag);stroke-width:3;stroke-linecap:round;fill:none;
stroke-dasharray:260;stroke-dashoffset:0}
.hart.on .xa-run,.rv.in .xa-run{animation:xaRun 1.1s cubic-bezier(.3,.7,.2,1) both}
@keyframes xaRun{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
.xa-dot{fill:#0b0b14;stroke:var(--cyan);stroke-width:2}
.xa-dot.fail{stroke:var(--dim)}
.xa-badge{fill:rgba(255,255,255,.03);stroke:var(--line);stroke-width:1;transition:all .3s ease}
.xa-bt{font-size:12px;font-weight:600;fill:var(--muted);text-anchor:middle}
.xa-lane.scale .xa-badge{fill:rgba(123,92,240,.16);stroke:rgba(123,92,240,.5)}
.xa-lane.scale .xa-bt{fill:var(--text)}
.xa-lane.iterate .xa-badge{stroke:rgba(34,211,238,.34)}
.xa-lane.stop .xa-run{stroke:rgba(255,255,255,.14)}
.xa-lane.hot:hover .xa-badge,.xa-lane.hot.pinned .xa-badge{stroke:var(--cyan)}
@media(prefers-reduced-motion:reduce){.hart.on .xa-run,.rv.in .xa-run{animation:none;stroke-dashoffset:0}}
/* ---------- offering modal: real-world outcomes ---------- */
.m-outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:4px 0 6px}
.m-out{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 17px 17px}
.m-out-w{margin:0 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
font-weight:600;color:var(--cyan)}
.m-out-b{margin:0;font-size:13.4px;line-height:1.6;color:var(--muted);font-weight:300}
.m-out-foot{grid-column:1/-1;margin:2px 0 0;font-size:11.5px;color:var(--dim);font-style:italic}
/* =====================================================================
WHO WE WORK WITH — the C-suite table [cs-]
===================================================================== */
.cs{margin-top:40px}
/* ---------- the chart ---------- */
.cs-chart{
border:1px solid var(--line);border-radius:22px;padding:26px 22px 18px;
background:radial-gradient(120% 130% at 50% -10%,rgba(123,92,240,.11),transparent 62%),var(--panel);
overflow-x:auto;
}
.cs-chart svg{width:100%;min-width:820px;height:auto;display:block;overflow:visible}
@media(max-width:760px){.cs-chart{display:none}}
.cs-wire{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.3;stroke-linecap:round;
stroke-dasharray:1000;stroke-dashoffset:1000}
.rv.in .cs-wire{animation:draw 1.1s cubic-bezier(.3,.7,.2,1) .2s forwards}
.rv.in .cs-wire.bus{animation-delay:.45s}
.rv.in .cs-wire.drop{animation-delay:.75s}
.cs-glow{fill:transparent;stroke:transparent;transition:fill .4s ease,stroke .4s ease}
.cs-box{fill:rgba(255,255,255,.04);stroke:var(--line);stroke-width:1;
transition:fill .35s ease,stroke .35s ease}
.cs-ab{font-size:19px;font-weight:700;letter-spacing:-.01em;fill:var(--text);text-anchor:middle;
transition:fill .35s ease}
.cs-ab.sm{font-size:17px}
.cs-sub{font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
fill:var(--dim);text-anchor:middle;transition:fill .35s ease}
.cs-cap{font-size:10.5px;font-weight:300;fill:var(--dim);text-anchor:middle;
transition:fill .35s ease}
.cs-node{cursor:pointer}
.cs-node:focus{outline:none}
.cs-node:focus-visible .cs-box{stroke:var(--cyan);stroke-width:2}
.cs-node:hover .cs-box{stroke:rgba(123,92,240,.5);fill:rgba(255,255,255,.06)}
.cs-node:hover .cs-cap,.cs-node:hover .cs-sub{fill:var(--muted)}
.cs-node.on .cs-glow{fill:rgba(123,92,240,.13);stroke:rgba(123,92,240,.30)}
.cs-node.on .cs-box{fill:rgba(123,92,240,.20);stroke:url(#csg);stroke-width:1.6}
.cs-node.on .cs-ab{fill:#fff}
.cs-node.on .cs-cap,.cs-node.on .cs-sub{fill:var(--text)}
/* ---------- chips: the whole control on narrow screens ---------- */
.cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
@media(min-width:761px){.cs-chips{display:none}}
.cs-chip{
display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
color:inherit;font:inherit;cursor:pointer;transition:border-color .3s ease,background .3s ease;
}
.cs-chip b{font-size:13px;font-weight:700;letter-spacing:.02em}
.cs-chip span{font-size:10.5px;color:var(--dim);font-weight:300}
.cs-chip.on{border-color:rgba(123,92,240,.55);background:rgba(123,92,240,.10)}
.cs-chip.on span{color:var(--muted)}
.cs-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* ---------- the detail panel ---------- */
.cs-detail{position:relative;margin-top:22px}
.cs-panel{display:none;border:1px solid var(--line);border-radius:22px;padding:30px 30px 28px;
background:var(--panel)}
.cs-panel.on{display:block;animation:fadeUp .45s ease both}
.cs-phead{display:flex;gap:18px;align-items:flex-start;padding-bottom:22px;
border-bottom:1px solid var(--line)}
.cs-pab{
flex:0 0 auto;display:grid;place-items:center;min-width:66px;height:52px;padding:0 12px;
border-radius:14px;background:rgba(123,92,240,.16);border:1px solid rgba(123,92,240,.42);
font-size:17px;font-weight:700;letter-spacing:-.01em;color:#fff;
}
.cs-ptitle{margin:0 0 6px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
font-weight:600;color:var(--cyan)}
.cs-pneed{margin:0;font-size:16.5px;line-height:1.5;color:var(--text);font-weight:400;max-width:62ch}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding:24px 0 6px}
@media(max-width:820px){.cs-grid{grid-template-columns:1fr;gap:26px}}
.cs-h{margin:0 0 12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
font-weight:600;color:var(--dim)}
.cs-body{margin:0;font-size:14.4px;line-height:1.62;color:var(--muted);font-weight:300}
.cs-ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.cs-ul li{display:flex;gap:11px;align-items:flex-start;font-size:14.4px;color:var(--muted);
font-weight:300;line-height:1.55}
.cs-ul svg{flex:0 0 auto;width:16px;height:16px;margin-top:3px;stroke:var(--cyan);fill:none;
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cs-offers{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 28px}
.cs-offer{
display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:100px;
border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);
font:inherit;font-size:13.2px;cursor:pointer;text-decoration:none;text-align:left;
transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.cs-offer i{font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;
color:var(--cyan)}
.cs-offer svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:opacity .25s,transform .25s}
.cs-offer:hover{border-color:rgba(123,92,240,.5);color:var(--text);background:rgba(123,92,240,.08)}
.cs-offer:hover svg{opacity:1;transform:translateX(3px)}
.cs-offer:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* ---------- the two returns ---------- */
.cs-ret{border-top:1px solid var(--line);padding-top:24px}
.cs-meters{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media(max-width:820px){.cs-meters{grid-template-columns:1fr;gap:20px}}
.cs-ml{display:flex;flex-direction:column;gap:4px;margin-bottom:11px}
.cs-ml b{font-size:13.6px;font-weight:600;color:var(--text)}
.cs-ml span{font-size:12.6px;color:var(--dim);font-weight:300;line-height:1.5}
.cs-mt{display:block;height:8px;border-radius:100px;background:rgba(255,255,255,.06);overflow:hidden}
.cs-mt i{display:block;height:100%;width:0;border-radius:100px;
background:linear-gradient(90deg,#5468f2,#22d3ee)}
.cs-meter.roe .cs-mt i{background:linear-gradient(90deg,#7b5cf0,#5468f2)}
.cs-panel.on .cs-mt i{animation:csGrow 1s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes csGrow{from{width:0}to{width:var(--w)}}
.cs-foot{margin:18px 0 0;font-size:11.8px;color:var(--dim);font-style:italic;line-height:1.55}
@media(prefers-reduced-motion:reduce){
.rv.in .cs-wire{animation:none;stroke-dashoffset:0}
.cs-panel.on{animation:none}
.cs-panel.on .cs-mt i{animation:none;width:var(--w)}
}
/* ---------- founder bio: card trigger + modal header ---------- */
.bio-open{
display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:none;
font:inherit;font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--cyan);
cursor:pointer;transition:gap .25s ease,color .25s ease;
}
.bio-open:hover{gap:11px;color:#fff}
.bio-open:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}
.bio-open svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.bio-head{display:flex;align-items:center;gap:20px;margin-bottom:26px;padding-right:44px}
.bio-head .avatar.photo{flex:0 0 auto;margin:0}
.bio-head .m-title{margin:2px 0 3px}
.bio-head .eyebrow{margin:0}
.bio-role{margin:0;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
color:var(--cyan);font-weight:600}
@media(max-width:560px){
.bio-head{gap:16px;padding-right:38px}
.bio-head .avatar.photo{width:64px;height:64px}
}
.bio-cta{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
/* =====================================================================
HOW WE THINK — divergence / convergence engine [tk-]
Every transition performs the move it describes: particles diverge,
then converge into the formation that encodes the next conviction.
===================================================================== */
.tk{display:grid;grid-template-columns:1.14fr .86fr;gap:34px;align-items:stretch;margin-top:42px}
@media(max-width:980px){.tk{grid-template-columns:1fr;gap:24px}}
/* ---------- the stage ---------- */
.tk-stage{
position:relative;border:1px solid var(--line);border-radius:22px;overflow:hidden;
background:radial-gradient(130% 96% at 50% -6%,rgba(123,92,240,.12),transparent 64%),var(--panel);
}
.tk-head{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:15px 20px 13px;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.tk-chip{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--cyan)}
.tk-dc{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.tk-dc span{transition:color .3s ease,opacity .3s ease;opacity:.55}
.tk-dc .arrow{opacity:.35}
.tk-dc.is-div .d,.tk-dc.is-con .c{color:var(--text);opacity:1}
/* ---------- double diamond rail ---------- */
.tk-rail{padding:18px 22px 2px}
.tk-rail svg{width:100%;height:auto;display:block;overflow:visible}
.tk-seg{
fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.25;stroke-linecap:round;
transition:stroke .5s ease,stroke-width .5s ease,opacity .5s ease;
}
.tk-seg.on{stroke:url(#tkGrad);stroke-width:2.1}
.tk-seg.on.flow{stroke-dasharray:5 9;animation:tkFlow 1.5s linear infinite}
@keyframes tkFlow{to{stroke-dashoffset:-28}}
.tk-vert{fill:rgba(255,255,255,.16);transition:fill .5s ease,r .5s ease}
.tk-vert.on{fill:var(--cyan)}
.tk-lab{font-size:5.6px;letter-spacing:.18em;text-transform:uppercase;fill:var(--dim);
transition:fill .5s ease;font-family:inherit}
.tk-lab.on{fill:var(--text)}
/* ---------- canvas ---------- */
.tk-canvas-wrap{position:relative;aspect-ratio:16/9}
@media(max-width:620px){.tk-canvas-wrap{aspect-ratio:4/3}}
.tk-canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tk-cap{
padding:15px 22px 19px;border-top:1px solid var(--line);
font-size:13.4px;line-height:1.6;color:var(--muted);font-weight:300;min-height:76px;
transition:opacity .3s ease;
}
.tk-cap.swap{opacity:0}
.tk-cap b{color:var(--text);font-weight:500}
/* ---------- the four lenses ---------- */
.tk-col{display:flex;flex-direction:column;min-height:100%}
.tk-lenses{display:flex;flex-direction:column;gap:10px}
.tk-lens{
position:relative;display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;
width:100%;text-align:left;padding:17px 20px 18px;border:1px solid var(--line);border-radius:16px;
background:var(--panel);color:inherit;font:inherit;cursor:pointer;overflow:hidden;
transition:border-color .35s ease,background .35s ease,transform .35s ease;
}
.tk-lens:hover{border-color:rgba(123,92,240,.36);transform:translateY(-2px)}
.tk-lens:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.tk-lens .n{
font-size:11px;font-weight:600;letter-spacing:.07em;color:var(--dim);padding-top:4px;
font-variant-numeric:tabular-nums;transition:color .35s ease;
}
.tk-lens h3{margin:0;font-size:15.4px;font-weight:600;line-height:1.38;letter-spacing:-.01em}
.tk-lens .body{
display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease,margin-top .55s ease;
}
.tk-lens .body>div{overflow:hidden}
.tk-lens .body p{margin:0;font-size:13.9px;line-height:1.62;color:var(--muted);font-weight:300}
.tk-lens[aria-selected="true"]{border-color:rgba(123,92,240,.5);background:rgba(123,92,240,.075)}
.tk-lens[aria-selected="true"] .n{color:var(--cyan)}
.tk-lens[aria-selected="true"] .body{grid-template-rows:1fr;opacity:1;margin-top:10px}
.tk-lens .bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--grad);border-radius:0 2px 2px 0}
.tk-lens.timing[aria-selected="true"] .bar{animation:tkBar 7.6s linear forwards}
@keyframes tkBar{from{width:0}to{width:100%}}
.tk-hint{margin-top:auto;padding-top:18px;font-size:11.5px;color:var(--dim);letter-spacing:.015em;display:flex;
flex-wrap:wrap;align-items:center;gap:7px}
.tk-hint kbd{
font:inherit;font-size:10px;line-height:1;padding:4px 7px;border:1px solid var(--line);
border-radius:6px;color:var(--muted);background:rgba(255,255,255,.03);
}
@media(prefers-reduced-motion:reduce){
.tk-lens.timing[aria-selected="true"] .bar{animation:none;width:100%}
.tk-seg.on.flow{animation:none}
.tk-lens:hover{transform:none}
}
/* =====================================================================
THE CX AI DESIGN ENGAGEMENT PROCESS (process.py)
Tone ramp t0..t4 runs violet -> indigo -> blue -> cyan -> teal-white.
===================================================================== */
.px-band{padding-top:104px;padding-bottom:104px}
.px-band::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(ellipse 70% 40% at 12% 0%,rgba(123,92,240,.13),transparent 68%),
radial-gradient(ellipse 60% 40% at 92% 40%,rgba(34,211,238,.10),transparent 66%);
}
:root{
--t0:#7b5cf0; --t1:#5468f2; --t2:#2b8be6; --t3:#22d3ee; --t4:#5eead4;
}
.px-t0,.t0{--tc:var(--t0)} .px-t1,.t1{--tc:var(--t1)} .px-t2,.t2{--tc:var(--t2)}
.px-t3,.t3{--tc:var(--t3)} .px-t4,.t4{--tc:var(--t4)}
/* ---------- fact strip ---------- */
.px-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:38px 0 10px}
.px-fact{padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--panel);
position:relative;overflow:hidden}
.px-fact::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--grad);
transform:scaleX(0);transform-origin:0 50%;animation:pxGrow .9s .2s cubic-bezier(.2,.8,.2,1) forwards}
.px-fact b{display:block;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.px-fact span{display:block;margin-top:8px;font-size:12.6px;color:var(--muted);font-weight:300;line-height:1.5}
@keyframes pxGrow{to{transform:scaleX(1)}}
/* ---------- the animated rail ---------- */
.px-railwrap{position:relative;margin:46px 0 8px;padding:0 0 8px}
.px-track{position:absolute;left:0;right:0;top:36px;height:3px;z-index:0}
.px-trline{position:absolute;inset:0;border-radius:3px;
background:linear-gradient(90deg,rgba(123,92,240,.22),rgba(84,104,242,.3),rgba(34,211,238,.28),rgba(94,234,212,.22))}
.px-trflow{position:absolute;top:-1px;height:5px;width:22%;border-radius:5px;filter:blur(1px);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
animation:pxFlow 5.4s cubic-bezier(.5,0,.5,1) infinite;opacity:.7}
@keyframes pxFlow{0%{left:-24%}100%{left:102%}}
.px-rail{position:relative;z-index:1;display:grid;
grid-template-columns:repeat(5,minmax(0,1fr)) ;gap:0;align-items:start}
.px-rail{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr}
.px-node{
position:relative;appearance:none;border:0;background:none;cursor:pointer;text-align:center;
padding:0 8px;color:inherit;font:inherit;display:flex;flex-direction:column;align-items:center;
opacity:0;transform:translateY(14px);animation:pxUp .6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes pxUp{to{opacity:1;transform:none}}
.px-ring{
position:relative;width:74px;height:74px;border-radius:22px;display:grid;place-items:center;
border:1px solid var(--line);background:rgba(255,255,255,.035);
transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s,background .3s;
}
.px-ring svg{width:26px;height:26px;stroke:var(--muted);fill:none;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.px-pulse{position:absolute;inset:-1px;border-radius:22px;border:1px solid var(--tc);opacity:0}
.px-node:hover .px-ring{transform:translateY(-4px) scale(1.04);border-color:rgba(255,255,255,.26)}
.px-node:hover .px-ring svg{stroke:var(--text)}
.px-node.on .px-ring{
background:color-mix(in srgb,var(--tc) 22%,transparent);border-color:var(--tc);
box-shadow:0 12px 40px -10px color-mix(in srgb,var(--tc) 70%,transparent);transform:translateY(-4px) scale(1.06)}
.px-node.on .px-ring svg{stroke:#fff}
.px-node.on .px-pulse{animation:pxPulse 2.4s ease-out infinite}
@keyframes pxPulse{0%{opacity:.65;transform:scale(1)}70%{opacity:0;transform:scale(1.32)}100%{opacity:0}}
.px-nnum{margin-top:14px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;
letter-spacing:.16em;color:var(--dim);transition:color .3s}
.px-node.on .px-nnum{color:var(--tc)}
.px-node b{display:block;margin-top:5px;font-size:17px;font-weight:650;letter-spacing:-.02em;
color:var(--muted);transition:color .3s}
.px-node.on b,.px-node:hover b{color:var(--text)}
.px-node em{display:block;margin-top:3px;font-style:normal;font-size:11.4px;color:var(--dim);
font-family:'JetBrains Mono',ui-monospace,monospace}
.px-ntag{display:block;margin-top:9px;font-size:11.8px;line-height:1.45;color:var(--dim);
font-weight:300;max-width:20ch;opacity:.001;transition:opacity .35s,color .3s}
.px-node.on .px-ntag,.px-node:hover .px-ntag{opacity:1;color:var(--muted)}
.px-node:focus-visible .px-ring{outline:2px solid var(--cyan);outline-offset:3px}
.px-gatemark{display:flex;flex-direction:column;align-items:center;padding-top:31px;gap:8px;user-select:none}
.px-gatemark i{width:11px;height:11px;transform:rotate(45deg);border-radius:2px;
border:1px solid rgba(255,255,255,.28);background:rgba(6,6,11,.9)}
.px-gatemark b{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:600}
.px-railfoot{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.px-play{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:100px;cursor:pointer;
border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);font:inherit;
font-size:13px;transition:background .25s,color .25s,border-color .25s}
.px-play:hover{background:rgba(255,255,255,.09);color:var(--text);border-color:rgba(255,255,255,.24)}
.px-play svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.px-play .px-pi{fill:currentColor;stroke:none}
.px-play .px-pa{display:none}
.px-play[aria-pressed="true"] .px-pi{display:none}
.px-play[aria-pressed="true"] .px-pa{display:block}
.px-play[aria-pressed="true"]{color:var(--text);border-color:rgba(123,92,240,.5);background:rgba(123,92,240,.14)}
.px-hint{font-size:12.2px;color:var(--dim);font-weight:300}
/* ---------- the stage ---------- */
.px-stage{position:relative;margin-top:34px;border:1px solid var(--line);border-radius:26px;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014));
padding:38px 34px 34px;overflow:hidden}
.px-stage::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--grad);
background-size:250% 100%;animation:shift 9s ease-in-out infinite}
.px-deck[hidden]{display:none}
.px-deck{animation:pxDeck .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes pxDeck{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.px-dhead{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.px-dnum{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:44px;font-weight:500;
line-height:.9;letter-spacing:-.04em;color:var(--tc);opacity:.85}
.px-dtitle{flex:1 1 240px;min-width:200px}
.px-dtitle h3{margin:0;font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.px-dtag{margin:6px 0 0;font-size:13px;letter-spacing:.02em;color:var(--tc);font-weight:500}
.px-dwin{text-align:right;padding:8px 16px;border:1px solid var(--line);border-radius:12px;
background:rgba(255,255,255,.03)}
.px-dwin b{display:block;font-size:13.5px;font-weight:600}
.px-dwin span{display:block;margin-top:2px;font-size:11px;color:var(--dim);
font-family:'JetBrains Mono',ui-monospace,monospace}
.px-done{margin:20px 0 0;font-size:clamp(16px,1.9vw,19.5px);font-weight:400;line-height:1.55;
max-width:64ch;color:var(--text)}
.px-dlead{margin:12px 0 0;font-size:15px;font-weight:300;line-height:1.68;color:var(--muted);max-width:74ch}
.px-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:28px 0 4px}
.px-stat{padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.026)}
.px-stat span{display:block;font-size:10.6px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:600}
.px-stat b{display:block;margin-top:6px;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.px-sub{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:42px 0 18px;
padding-bottom:11px;border-bottom:1px solid var(--line)}
.px-sub h4{margin:0;font-size:19px;font-weight:650;letter-spacing:-.02em}
.px-sub span{font-size:12.8px;color:var(--dim);font-weight:300}
/* activities */
.px-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.px-act{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;
padding:18px 20px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.024);
opacity:0;transform:translateY(12px);animation:pxUp .55s cubic-bezier(.2,.8,.2,1) forwards;
transition:border-color .3s,background .3s,transform .3s}
.px-act:hover{border-color:color-mix(in srgb,var(--tc) 45%,var(--line));background:rgba(255,255,255,.045);transform:translateY(-2px)}
.px-ac{grid-row:1 / span 2;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;
font-weight:500;color:var(--tc);padding-top:2px}
.px-at{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.px-at b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.px-at em{font-style:normal;font-size:10.8px;color:var(--dim);
font-family:'JetBrains Mono',ui-monospace,monospace;white-space:nowrap}
.px-act p{grid-column:2;margin:7px 0 0;font-size:13.8px;line-height:1.62;color:var(--muted);font-weight:300}
/* people lanes */
.px-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.px-plane{border:1px solid var(--line);border-radius:17px;padding:20px 22px 8px;background:rgba(255,255,255,.024);
position:relative;overflow:hidden}
.px-plane::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px}
.px-plane.cli::before{background:linear-gradient(180deg,rgba(154,156,180,.6),transparent)}
.px-plane.fcx::before{background:var(--grad)}
.px-ph{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.px-ph b{font-size:13.4px;letter-spacing:.02em}
.px-ph span{font-size:11.4px;color:var(--dim);font-family:'JetBrains Mono',ui-monospace,monospace}
.px-plane ul{margin:0;padding:0;list-style:none}
.px-plane li{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.05);
opacity:0;animation:pxUp .5s cubic-bezier(.2,.8,.2,1) forwards}
.px-plane li:last-child{border-bottom:0}
.px-plane li b{font-size:13.8px;font-weight:600}
.px-plane li p{margin:5px 0 0;font-size:12.9px;line-height:1.55;color:var(--muted);font-weight:300;max-width:52ch}
.px-hrs{float:right;margin-left:12px;font-size:10.6px;padding:3px 9px;border-radius:100px;
border:1px solid var(--line);color:var(--dim);font-family:'JetBrains Mono',ui-monospace,monospace}
.px-hrs.alloc{color:var(--cyan);border-color:rgba(34,211,238,.32);background:rgba(34,211,238,.07)}
/* KPI meters */
.px-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.px-kpi{padding:18px 20px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.024);
opacity:0;transform:translateY(12px);animation:pxUp .55s cubic-bezier(.2,.8,.2,1) forwards}
.px-kt{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.px-kt b{font-size:14.4px;font-weight:600}
.px-kw{font-size:10.4px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600;white-space:nowrap}
.px-kpi p{margin:7px 0 13px;font-size:13.2px;line-height:1.58;color:var(--muted);font-weight:300}
.px-meter{display:block;height:5px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.px-meter i{display:block;height:100%;width:0;border-radius:5px;
background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 55%,transparent),var(--tc));
animation:pxFill 1.1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pxFill{to{width:var(--v)}}
/* deliverable tiles */
.px-dls{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.px-dl{position:relative;text-align:left;appearance:none;cursor:pointer;font:inherit;color:inherit;
padding:24px 22px 20px;border:1px solid var(--line);border-radius:18px;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
opacity:0;transform:translateY(14px);animation:pxUp .55s cubic-bezier(.2,.8,.2,1) forwards;
transition:border-color .3s,transform .3s,box-shadow .35s;overflow:hidden}
.px-dl::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),
color-mix(in srgb,var(--tc) 13%,transparent),transparent 42%);opacity:0;transition:opacity .35s}
.px-dl:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--tc) 55%,var(--line));
box-shadow:0 22px 50px -24px color-mix(in srgb,var(--tc) 80%,transparent)}
.px-dl:hover::after{opacity:1}
.px-dl:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.px-doc{display:block;width:34px;height:42px;border-radius:5px;border:1px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.05);padding:7px 6px 0;margin-bottom:16px;position:relative}
.px-doc i{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.28);margin-bottom:4px;
transform-origin:0 50%;transform:scaleX(0);animation:pxLine .5s cubic-bezier(.2,.8,.2,1) forwards}
.px-doc i:nth-child(1){width:88%;animation-delay:.30s}
.px-doc i:nth-child(2){width:70%;animation-delay:.37s}
.px-doc i:nth-child(3){width:82%;animation-delay:.44s}
.px-doc i:nth-child(4){width:56%;animation-delay:.51s}
.px-doc i:nth-child(5){width:74%;animation-delay:.58s;background:var(--tc)}
@keyframes pxLine{to{transform:scaleX(1)}}
.px-dn{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.4px;
letter-spacing:.14em;text-transform:uppercase;color:var(--tc);margin-bottom:8px}
.px-dl b{display:block;font-size:16.5px;font-weight:650;letter-spacing:-.02em;line-height:1.28}
.px-dl p{margin:9px 0 0;font-size:13.4px;line-height:1.6;color:var(--muted);font-weight:300}
.px-go{display:inline-flex;align-items:center;gap:7px;margin-top:15px;font-size:11.8px;
letter-spacing:.05em;color:var(--tc);font-weight:600}
.px-go svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.px-dl:hover .px-go svg{transform:translateX(4px)}
/* gate strip */
.px-gate{margin-top:34px;padding:22px 24px;border:1px dashed color-mix(in srgb,var(--tc) 45%,var(--line));
border-radius:17px;background:color-mix(in srgb,var(--tc) 7%,transparent)}
.px-gh{display:flex;align-items:center;gap:11px}
.px-gh svg{width:19px;height:19px;stroke:var(--tc);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.px-gh b{font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.px-gl{margin:10px 0 12px;font-size:12.4px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}
.px-gate ul{margin:0;padding:0;list-style:none;display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 26px}
.px-gate li{position:relative;padding-left:20px;font-size:13.4px;line-height:1.58;color:var(--muted);font-weight:300}
.px-gate li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:5px;
border-left:1.7px solid var(--tc);border-bottom:1.7px solid var(--tc);transform:rotate(-45deg)}
/* bottom CTA */
.px-cta{margin-top:46px;text-align:center;padding:38px 26px;border:1px solid var(--line);border-radius:22px;
background:radial-gradient(ellipse 80% 120% at 50% 0%,rgba(123,92,240,.14),transparent 70%),rgba(255,255,255,.02)}
.px-ctal{margin:0 auto 22px;max-width:62ch;font-size:15.4px;line-height:1.65;color:var(--muted);font-weight:300}
.px-planbtn{position:relative;overflow:hidden}
.px-planbtn::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-42%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
animation:pxSheen 4.2s ease-in-out infinite}
@keyframes pxSheen{0%,62%{left:-42%}100%{left:106%}}
.px-ctaf{margin:18px 0 0;font-size:12.2px;color:var(--dim);font-weight:300}
@media (max-width:900px){
.px-rail{grid-template-columns:1fr;gap:10px;row-gap:14px}
.px-track{display:none}
.px-gatemark{flex-direction:row;padding:0;gap:10px}
.px-node{flex-direction:row;gap:14px;text-align:left;padding:12px 14px;border:1px solid var(--line);
border-radius:16px;background:rgba(255,255,255,.024);align-items:center;flex-wrap:wrap}
.px-ring{width:52px;height:52px;border-radius:16px;flex:0 0 auto}
.px-nnum{margin-top:0}
.px-node b{margin-top:0}
.px-ntag{opacity:1;max-width:none;flex:1 1 100%}
.px-stage{padding:26px 18px 24px;border-radius:20px}
.px-dwin{text-align:left}
}
/* ---------- sample-deliverable visual primitives ---------- */
.pxv{width:100%}
.pxv-c{margin:0 0 18px;font-size:12.4px;letter-spacing:.05em;color:var(--muted);font-weight:500;line-height:1.5}
.pxv-f{margin:16px 0 0;font-size:12.1px;line-height:1.6;color:var(--dim);font-weight:300}
.pxv .t0{--tc:var(--t0)}.pxv .t1{--tc:var(--t1)}.pxv .t2{--tc:var(--t2)}
.pxv .t3{--tc:var(--t3)}.pxv .t4{--tc:var(--t4)}
.pxv-bars{display:grid;gap:9px}
.pxv-bar{display:grid;grid-template-columns:minmax(120px,1.4fr) 2.6fr auto;gap:12px;align-items:center}
.pxv-bl{font-size:12.4px;color:var(--muted);font-weight:300;line-height:1.35}
.pxv-bt{height:9px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.pxv-bt i{display:block;height:100%;border-radius:6px;transform-origin:0 50%;transform:scaleX(0);
animation:pxvBar .95s cubic-bezier(.2,.8,.2,1) forwards;
background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 50%,transparent),var(--tc))}
.pxv-bt i.t0{animation-delay:.10s}.pxv-bt i.t1{animation-delay:.17s}.pxv-bt i.t2{animation-delay:.24s}
.pxv-bt i.t3{animation-delay:.31s}.pxv-bt i.t4{animation-delay:.38s}
@keyframes pxvBar{to{transform:scaleX(1)}}
.pxv-bv{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.6px;color:var(--text);white-space:nowrap}
.pxv-flow{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.pxv-node{flex:1 1 118px;min-width:110px;padding:13px 12px;border-radius:12px;text-align:center;
border:1px solid color-mix(in srgb,var(--tc) 40%,var(--line));
background:color-mix(in srgb,var(--tc) 9%,transparent);
opacity:0;animation:pxUp .5s cubic-bezier(.2,.8,.2,1) forwards}
.pxv-node:nth-child(1){animation-delay:.08s}.pxv-node:nth-child(3){animation-delay:.16s}
.pxv-node:nth-child(5){animation-delay:.24s}.pxv-node:nth-child(7){animation-delay:.32s}
.pxv-node:nth-child(9){animation-delay:.40s}.pxv-node:nth-child(11){animation-delay:.48s}
.pxv-node:nth-child(13){animation-delay:.56s}
.pxv-node b{display:block;font-size:12.6px;font-weight:600;letter-spacing:-.01em}
.pxv-node span{display:block;margin-top:5px;font-size:11.2px;color:var(--muted);font-weight:300;line-height:1.4}
.pxv-arrow{display:grid;place-items:center;flex:0 0 18px}
.pxv-arrow svg{width:15px;height:15px;stroke:rgba(255,255,255,.28);fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.pxv-mx{display:grid;grid-template-columns:22px 1fr;grid-template-rows:1fr 22px;gap:8px;height:280px}
.pxv-ylab{grid-column:1;grid-row:1;writing-mode:vertical-rl;transform:rotate(180deg);
place-self:center;font-size:10.6px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}
.pxv-xlab{grid-column:2;grid-row:2;text-align:center;font-size:10.6px;letter-spacing:.12em;
text-transform:uppercase;color:var(--dim);font-weight:600}
.pxv-plot{grid-column:2;grid-row:1;position:relative;border-left:1px solid var(--line);
border-bottom:1px solid var(--line);border-radius:0 0 0 4px}
.pxv-q{position:absolute;width:50%;height:50%}
.pxv-q.q1{left:0;top:0;background:rgba(255,255,255,.018)}
.pxv-q.q2{right:0;top:0;background:rgba(255,80,80,.05)}
.pxv-q.q3{left:0;bottom:0;background:rgba(255,255,255,.01)}
.pxv-q.q4{right:0;bottom:0;background:rgba(255,255,255,.018)}
.pxv-dot{position:absolute;transform:translate(-50%,50%);opacity:0;
animation:pxvPop .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pxvPop{from{opacity:0;transform:translate(-50%,50%) scale(.4)}to{opacity:1;transform:translate(-50%,50%) scale(1)}}
.pxv-dot i{display:block;width:11px;height:11px;border-radius:50%;margin:0 auto;
background:var(--tc);box-shadow:0 0 0 4px color-mix(in srgb,var(--tc) 22%,transparent)}
.pxv-dot b{position:absolute;left:50%;top:16px;transform:translateX(-50%);white-space:nowrap;
font-size:10.4px;font-weight:500;color:var(--muted)}
.pxv-svg{width:100%;height:auto;display:block}
.pxv-gl{stroke:rgba(255,255,255,.07);stroke-width:1}
.pxv-ax{fill:var(--dim);font-size:10px;text-anchor:middle;font-family:'JetBrains Mono',monospace}
.pxv-ay{fill:var(--dim);font-size:9.5px;text-anchor:end;font-family:'JetBrains Mono',monospace}
.pxv-pl{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:2400;stroke-dashoffset:2400;animation:pxvDraw 1.6s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes pxvDraw{to{stroke-dashoffset:0}}
.pxv-pl.t0{stroke:var(--t0)}.pxv-pl.t1{stroke:var(--t1)}.pxv-pl.t2{stroke:var(--t2)}
.pxv-pl.t3{stroke:var(--t3)}.pxv-pl.t4{stroke:var(--t4)}
.pxv-pd{opacity:0;animation:pxvFade .3s forwards}
.pxv-pd.t0{fill:var(--t0)}.pxv-pd.t1{fill:var(--t1)}.pxv-pd.t2{fill:var(--t2)}
.pxv-pd.t3{fill:var(--t3)}.pxv-pd.t4{fill:var(--t4)}
@keyframes pxvFade{to{opacity:1}}
.pxv-keys{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;justify-content:center}
.pxv-keys.col{flex-direction:column;justify-content:center;gap:9px}
.pxv-key{display:inline-flex;align-items:center;gap:8px;font-size:11.8px;color:var(--muted);font-weight:300}
.pxv-key i{width:10px;height:10px;border-radius:3px;background:var(--tc);flex:0 0 auto}
.pxv-key b{color:var(--text);font-weight:600}
.pxv-donut{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center}
.pxv-donut svg{width:180px;height:180px;flex:0 0 auto;transform:rotate(-90deg)}
.pxv-arcbg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:16}
.pxv-arc{fill:none;stroke-width:16;stroke-linecap:butt;
animation:pxvArc 1.1s cubic-bezier(.2,.8,.2,1) both}
.pxv-arc.t0{stroke:var(--t0)}.pxv-arc.t1{stroke:var(--t1)}.pxv-arc.t2{stroke:var(--t2)}
.pxv-arc.t3{stroke:var(--t3)}.pxv-arc.t4{stroke:var(--t4)}
@keyframes pxvArc{from{opacity:0}to{opacity:1}}
.pxv-dnum{fill:#fff;font-size:30px;font-weight:700;text-anchor:middle;transform:rotate(90deg);
transform-origin:90px 90px;letter-spacing:-.03em}
.pxv-dlab{fill:var(--dim);font-size:10.5px;text-anchor:middle;transform:rotate(90deg);
transform-origin:90px 90px;letter-spacing:.1em;text-transform:uppercase}
.pxv-funnel{display:grid;gap:10px}
.pxv-fs{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:center;
opacity:0;animation:pxUp .55s cubic-bezier(.2,.8,.2,1) forwards}
.pxv-fbar{display:grid;place-items:center;height:34px;border-radius:8px;min-width:52px;
background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 75%,transparent),color-mix(in srgb,var(--tc) 38%,transparent));
border:1px solid color-mix(in srgb,var(--tc) 45%,transparent)}
.pxv-fbar b{font-size:11.6px;font-weight:600;color:#fff;font-family:'JetBrains Mono',monospace}
.pxv-fl{font-size:12.8px;color:var(--text);font-weight:500;line-height:1.35}
.pxv-fl em{display:block;font-style:normal;margin-top:3px;font-size:11.4px;color:var(--dim);font-weight:300}
.pxv-grid{display:grid;gap:4px}
.pxv-grow{display:grid;grid-template-columns:minmax(120px,1.5fr) repeat(var(--gc),minmax(0,1fr));
gap:4px;align-items:center}
.pxv-grid{--gc:5}
.pxv-gn{font-size:12.1px;color:var(--muted);font-weight:300;padding-right:8px;line-height:1.3}
.pxv-gh{font-size:9.8px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
font-weight:600;text-align:center}
.pxv-gc{height:26px;border-radius:6px;background:rgba(255,255,255,.05);
opacity:0;animation:pxvFade .4s forwards}
.pxv-gc.l0{background:rgba(255,255,255,.045)}
.pxv-gc.l1{background:rgba(123,92,240,.28)}
.pxv-gc.l2{background:rgba(84,104,242,.55)}
.pxv-gc.l3{background:linear-gradient(135deg,var(--blue),var(--cyan))}
.pxv-gkeys{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}
.pxv-gk{display:inline-flex;align-items:center;gap:7px;font-size:11.4px;color:var(--dim);font-weight:300}
.pxv-gk i{width:14px;height:10px;border-radius:3px}
.pxv-gk i.l0{background:rgba(255,255,255,.045)}
.pxv-gk i.l1{background:rgba(123,92,240,.28)}
.pxv-gk i.l2{background:rgba(84,104,242,.55)}
.pxv-gk i.l3{background:linear-gradient(135deg,var(--blue),var(--cyan))}
/* ---------- program plan: Gantt ---------- */
.pxg-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)}
.pxg{display:grid;grid-template-columns:256px repeat(var(--w),minmax(24px,1fr));
gap:0 3px;min-width:1060px;padding:12px 18px 18px;position:relative;align-items:center}
.pxg-corner{font-size:10.4px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:600}
.pxg-band{display:grid;place-items:center;height:26px;border-radius:7px;font-size:9.4px;font-weight:600;
letter-spacing:0;color:#fff;margin-bottom:8px;overflow:hidden;white-space:nowrap;padding:0 3px;
background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 68%,transparent),color-mix(in srgb,var(--tc) 32%,transparent));
border:1px solid color-mix(in srgb,var(--tc) 45%,transparent)}
.pxg-n{grid-column:1;font-size:12.5px;color:var(--text);line-height:1.32;padding:5px 14px 5px 0}
.pxg-n b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.6px;color:var(--cyan);
margin-right:7px;font-weight:500}
.pxg-n em{display:block;margin-top:3px;font-style:normal;font-size:10.6px;color:var(--dim)}
.pxg-hn{font-size:10.4px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:600}
.pxg-w{text-align:center;font-size:9.6px;color:var(--dim);font-family:'JetBrains Mono',monospace;padding-bottom:6px}
.pxg-grp{padding:16px 0 6px;font-size:10.6px;letter-spacing:.14em;text-transform:uppercase;
color:var(--tc);font-weight:700}
.pxg-bar{position:relative;z-index:2;height:22px;border-radius:6px;display:grid;place-items:center;
cursor:default;transform-origin:0 50%;transform:scaleX(0);
animation:pxGrow .5s cubic-bezier(.2,.8,.2,1) forwards;
background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 92%,transparent),color-mix(in srgb,var(--tc) 45%,transparent));
border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);
transition:filter .25s,box-shadow .25s}
.pxg-bar i{font-style:normal;font-size:9.2px;font-weight:600;color:rgba(255,255,255,.92);
font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden}
.pxg-bar:hover,.pxg-bar:focus-visible{filter:brightness(1.3);outline:none;
box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 60%,transparent)}
.pxg-bar[data-tip]:hover::after,.pxg-bar[data-tip]:focus-visible::after{
content:attr(data-tip);position:absolute;left:0;top:-6px;transform:translateY(-100%);z-index:20;
width:max-content;max-width:340px;padding:9px 13px;border-radius:10px;white-space:normal;
background:rgba(10,10,18,.97);border:1px solid var(--line);color:var(--muted);
font-size:11.6px;line-height:1.5;font-weight:300;box-shadow:0 18px 42px rgba(0,0,0,.6)}
.pxg-gate{position:relative;z-index:1;align-self:stretch;justify-self:center;width:1px;
background:repeating-linear-gradient(180deg,rgba(34,211,238,.62) 0 6px,transparent 6px 12px);
box-shadow:0 0 6px rgba(34,211,238,.35);pointer-events:none}
.pxg-gate b{position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-size:8.8px;
letter-spacing:.1em;color:var(--cyan);background:rgba(6,6,11,.92);padding:1px 5px;border-radius:4px;
border:1px solid rgba(34,211,238,.3);font-weight:700}
.pxg-mk{position:relative;display:grid;place-items:center;opacity:0;
animation:pxvFade .4s forwards;padding-bottom:4px}
.pxg-mk i{width:9px;height:9px;background:var(--cyan);transform:rotate(45deg);border-radius:2px;
box-shadow:0 0 12px rgba(34,211,238,.6)}
.pxg-mk b{position:absolute;top:12px;font-size:8.6px;font-weight:500;color:var(--cyan);white-space:nowrap;
font-family:'JetBrains Mono',monospace}
.pxg-mk.alt b{top:23px}
/* ---------- program plan: team loading ---------- */
.pxl{min-width:1000px;padding:14px 18px 18px}
.pxl-row{display:grid;grid-template-columns:236px repeat(26,minmax(0,1fr));gap:0 2px;
align-items:end;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.pxl-row.cli{background:rgba(255,255,255,.014)}
.pxl-scale{align-items:center;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:6px}
.pxl-sb{display:grid;place-items:center;height:22px;border-radius:6px;font-size:10.4px;font-weight:600;
color:#fff;background:color-mix(in srgb,var(--tc) 40%,transparent);
border:1px solid color-mix(in srgb,var(--tc) 40%,transparent)}
.pxl-head{padding:18px 0 8px;font-size:10.6px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);font-weight:700}
.pxl-n{grid-column:1;font-size:12.2px;color:var(--muted);font-weight:300;padding-right:12px;line-height:1.3}
.pxl-b{position:relative;height:30px;display:flex;align-items:flex-end;justify-content:center;
opacity:0;animation:pxvFade .5s forwards}
.pxl-b i{display:block;width:100%;height:var(--h);border-radius:4px 4px 2px 2px;
background:linear-gradient(180deg,var(--tc),color-mix(in srgb,var(--tc) 30%,transparent));
opacity:.82;transform-origin:50% 100%;transform:scaleY(0);
animation:pxScaleY .7s cubic-bezier(.2,.8,.2,1) .1s forwards}
@keyframes pxScaleY{to{transform:scaleY(1)}}
.pxl-b b{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:600;
color:rgba(255,255,255,.9);font-family:'JetBrains Mono',monospace;pointer-events:none}
.pxl-b[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:34px;
transform:translateX(-50%);z-index:20;width:max-content;max-width:280px;padding:8px 12px;
border-radius:9px;background:rgba(10,10,18,.97);border:1px solid var(--line);color:var(--muted);
font-size:11.4px;font-weight:300;box-shadow:0 16px 36px rgba(0,0,0,.55)}
/* ---------- program plan: effort ---------- */
.pxe{border:1px solid var(--line);border-radius:16px;padding:20px 22px;background:rgba(255,255,255,.02)}
.pxe-key{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:16px}
.pxe-key span{display:inline-flex;align-items:center;gap:8px;font-size:11.8px;color:var(--muted);font-weight:300}
.pxe-key i{width:12px;height:8px;border-radius:3px}
.pxe-k1 i{background:var(--indigo)}
.pxe-k2 i{background:rgba(255,255,255,.3)}
.pxe-row{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;padding:7px 0}
.pxe-n{font-size:12.8px;color:var(--text);font-weight:500}
.pxe-tr{display:grid;gap:5px}
.pxe-b{display:flex;align-items:center;justify-content:flex-end;height:17px;border-radius:5px;
padding:0 8px;transform-origin:0 50%;transform:scaleX(0);
animation:pxGrow .8s cubic-bezier(.2,.8,.2,1) forwards;min-width:64px}
.pxe-b.us{background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 88%,transparent),color-mix(in srgb,var(--tc) 40%,transparent))}
.pxe-b.you{background:rgba(255,255,255,.16)}
.pxe-b b{font-size:9.6px;font-weight:600;color:rgba(255,255,255,.93);font-family:'JetBrains Mono',monospace}
/* ---------- program plan: critical path ---------- */
.pxc-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02);
padding:22px 20px}
.pxc-chain{display:flex;align-items:stretch;gap:0;min-width:max-content}
.pxc-node{position:relative;flex:0 0 152px;padding:14px 12px 12px;margin-right:14px;border-radius:12px;
border:1px solid color-mix(in srgb,var(--tc) 42%,var(--line));
background:color-mix(in srgb,var(--tc) 9%,transparent);
opacity:0;animation:pxUp .5s cubic-bezier(.2,.8,.2,1) forwards}
.pxc-node:last-child{margin-right:0}
.pxc-node::after{content:"";position:absolute;right:-14px;top:50%;width:14px;height:2px;
background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 70%,transparent),rgba(255,255,255,.16))}
.pxc-node:last-child::after{display:none}
.pxc-w{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.2px;color:var(--tc);
letter-spacing:.08em;font-weight:600}
.pxc-node b{display:block;margin-top:6px;font-size:12.4px;font-weight:600;line-height:1.3}
.pxc-node em{display:block;margin-top:4px;font-style:normal;font-size:10.6px;color:var(--dim);
font-family:'JetBrains Mono',monospace}
.pxc-sl{display:inline-block;margin-top:9px;font-size:9.6px;padding:2px 7px;border-radius:100px;white-space:nowrap;
border:1px solid var(--line);color:var(--dim);font-family:'JetBrains Mono',monospace}
.pxc-sl.zero{color:#ffb4b4;border-color:rgba(255,120,120,.35);background:rgba(255,90,90,.1)}
.pxc-nears{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.pxc-near{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.024)}
.pxc-near b{font-size:13px;font-weight:600}
.pxc-near p{margin:7px 0 0;font-size:12.7px;line-height:1.6;color:var(--muted);font-weight:300}
.wb-grp.t0 td{color:var(--t0)}.wb-grp.t1 td{color:var(--t1)}.wb-grp.t2 td{color:var(--t2)}
.wb-grp.t3 td{color:var(--t3)}.wb-grp.t4 td{color:var(--t4)}
@media (prefers-reduced-motion:reduce){
.px-trflow,.px-pulse,.px-planbtn::after{animation:none!important}
.px-node,.px-act,.px-kpi,.px-dl,.px-deck,.pxv-fs,.pxv-node,.pxc-node,.px-plane li{
opacity:1!important;transform:none!important;animation:none!important}
.px-meter i{width:var(--v)!important;animation:none!important}
.pxg-bar,.px-fact::after,.pxe-b,.pxv-bt i,.px-doc i{transform:none!important;animation:none!important}
.pxl-b,.pxl-b i,.pxg-mk,.pxv-gc,.pxv-dot,.pxv-pd{opacity:1!important;transform:none!important;animation:none!important}
.pxv-pl{stroke-dashoffset:0!important;animation:none!important}
}
.px-stage:not(.armed) .px-deck,
.px-stage:not(.armed) .px-deck *{animation-play-state:paused!important}
.pxe-k3{font-size:11.2px;color:var(--dim);font-weight:300}
.px-pnote{margin:14px 0 12px;padding-top:13px;border-top:1px solid var(--line);
font-size:12.2px;line-height:1.6;color:var(--dim);font-weight:300}
/* =====================================================================
ACTIVITY ARTIFACTS (activities.py) — the working document behind
every activity card. Tone class t0..t4 comes from the phase.
===================================================================== */
.ax-scroll{overflow-x:auto;border-radius:16px;-webkit-overflow-scrolling:touch}
.ax-foot{margin:14px 0 0;font-size:12.1px;line-height:1.6;color:var(--dim);font-weight:300}
.ax-pill{display:inline-block;padding:3px 10px;border-radius:100px;font-size:10.6px;font-weight:600;
letter-spacing:.03em;white-space:nowrap;border:1px solid var(--line);color:var(--muted);
font-family:'JetBrains Mono',ui-monospace,monospace}
.ax-pill.ok{color:#8ef0c8;border-color:rgba(94,234,212,.34);background:rgba(94,234,212,.1)}
.ax-pill.warn{color:#ffd79a;border-color:rgba(255,190,90,.34);background:rgba(255,190,90,.1)}
.ax-pill.bad{color:#ffb0b0;border-color:rgba(255,120,120,.34);background:rgba(255,120,120,.1)}
.ax-pill.go{color:#a8c4ff;border-color:rgba(120,150,255,.36);background:rgba(120,150,255,.12)}
.ax-pill.n{opacity:.85}
/* ---- 1. document page ---- */
.ax-doc{border:1px solid var(--line);border-radius:16px;overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}
.ax-dtop{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line);
background:rgba(255,255,255,.03)}
.ax-dmark{font-size:19px;font-weight:800;letter-spacing:-.04em;color:#fff;flex:0 0 auto}
.ax-dmark i{font-style:normal;color:var(--muted);font-weight:400}
.ax-dhead b{display:block;font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.ax-dhead span{display:block;margin-top:3px;font-size:10.8px;color:var(--dim);
font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.05em}
.ax-dbody{padding:22px 26px 8px}
.ax-dh{margin:20px 0 8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:color-mix(in srgb,var(--tc) 78%,#fff);font-weight:700}
.ax-dbody>.ax-dh:first-child{margin-top:0}
.ax-dp{margin:0 0 12px;font-size:13.6px;line-height:1.68;color:var(--muted);font-weight:300;max-width:74ch}
.ax-dul,.ax-dol{margin:0 0 14px;padding-left:20px}
.ax-dul{list-style:none;padding-left:0}
.ax-dul li{position:relative;padding:0 0 8px 20px;font-size:13.4px;line-height:1.6;color:var(--muted);font-weight:300}
.ax-dul li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:2px;
background:var(--tc);transform:rotate(45deg)}
.ax-dol li{padding:0 0 8px 4px;font-size:13.4px;line-height:1.6;color:var(--muted);font-weight:300}
.ax-dol li::marker{color:var(--tc);font-weight:700;font-size:12px}
.ax-dkv{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0 0 16px}
.ax-dkv dt{font-size:10.6px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:700;padding-top:2px}
.ax-dkv dd{margin:0;font-size:13.4px;color:var(--text);font-weight:400;line-height:1.5}
.ax-dcode{margin:0 0 16px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
background:rgba(0,0,0,.34);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.8px;
line-height:1.72;color:var(--muted);overflow-x:auto;white-space:pre}
.ax-dbox{margin:0 0 16px;padding:15px 18px;border-left:3px solid var(--tc);border-radius:0 12px 12px 0;
background:color-mix(in srgb,var(--tc) 9%,transparent)}
.ax-dbox b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:color-mix(in srgb,var(--tc) 80%,#fff);font-weight:700}
.ax-dbox p{margin:7px 0 0;font-size:13.4px;line-height:1.62;color:var(--muted);font-weight:300}
.ax-dsign{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;
padding:20px 26px 24px;border-top:1px dashed var(--line);background:rgba(255,255,255,.015)}
.ax-dsg i{display:block;height:26px;border-bottom:1px solid rgba(255,255,255,.28);
background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tc) 20%,transparent))}
.ax-dsg b{display:block;margin-top:8px;font-size:12.6px;font-weight:600}
.ax-dsg span{display:block;font-size:11.2px;color:var(--dim);font-weight:300}
.ax-dsg em{display:block;margin-top:4px;font-style:normal;font-size:10.4px;color:var(--tc);
font-family:'JetBrains Mono',ui-monospace,monospace}
/* ---- 2. swimlane journey map ---- */
.ax-sw{min-width:940px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
background:rgba(255,255,255,.02)}
.ax-sw-row{display:grid;grid-template-columns:150px 1fr;align-items:stretch;
border-bottom:1px solid rgba(255,255,255,.055)}
.ax-sw-row:last-child{border-bottom:0}
.ax-sw-ln{display:flex;align-items:center;padding:12px 14px;font-size:11.4px;font-weight:600;
letter-spacing:.02em;color:var(--muted);background:rgba(255,255,255,.03);
border-right:1px solid rgba(255,255,255,.07);line-height:1.3}
.ax-sw-cells{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative}
.ax-sw-c{padding:9px 8px;border-right:1px dashed rgba(255,255,255,.06);display:flex;
align-items:center;justify-content:center}
.ax-sw-c:last-child{border-right:0}
.ax-sw-head{border-bottom:1px solid var(--line)}
.ax-sw-head .ax-sw-ln{font-size:10.4px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.ax-sw-st{padding:12px 10px;text-align:center;border-right:1px dashed rgba(255,255,255,.06)}
.ax-sw-st:last-child{border-right:0}
.ax-sw-st b{display:block;font-size:13px;font-weight:650;letter-spacing:-.01em}
.ax-sw-st span{display:block;margin-top:3px;font-size:10.4px;color:var(--dim);font-weight:300}
.ax-sw-chip{display:block;width:100%;padding:8px 10px;border-radius:9px;font-size:11.4px;
line-height:1.42;text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.04);
color:var(--muted)}
.ax-sw-chip.ai{border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.11);color:#bdf2fb}
.ax-sw-chip.hum{border-color:rgba(123,92,240,.45);background:rgba(123,92,240,.14);color:#ded4ff}
.ax-sw-chip.auto{border-color:rgba(84,104,242,.42);background:rgba(84,104,242,.13);color:#cdd6ff}
.ax-sw-chip.sys{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.4px;
border-style:dashed;color:var(--dim)}
.ax-sw-chip.pain{border-color:rgba(255,120,120,.4);background:rgba(255,90,90,.1);color:#ffc4c4}
.ax-sw-c.empty{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.022) 6px 12px)}
.ax-sw-emo .ax-sw-cells{padding:0}
.ax-sw-esvg{position:absolute;inset:0;width:100%;height:100%}
.ax-sw-esvg.dots{overflow:visible}
.ax-sw-el{fill:none;stroke:url(#none);stroke:rgba(255,255,255,.35);stroke-width:2;vector-effect:non-scaling-stroke;
stroke-dasharray:1600;stroke-dashoffset:1600;animation:pxvDraw 1.6s .2s cubic-bezier(.3,.7,.3,1) forwards}
.ax-sw-ed{stroke:rgba(6,6,11,.9);stroke-width:2}
.ax-sw-ed.hi{fill:#5eead4}.ax-sw-ed.mid{fill:#ffca7a}.ax-sw-ed.lo{fill:#ff8b8b}
.ax-sw-emo{height:76px}
.ax-sw-fl .ax-sw-ln{color:var(--tc)}
.ax-sw-flag{display:block;padding:7px 9px;border-radius:8px;font-size:10.8px;line-height:1.36;
font-weight:600;border:1px dashed color-mix(in srgb,var(--tc) 55%,transparent);
background:color-mix(in srgb,var(--tc) 11%,transparent);color:#fff;margin-bottom:5px}
.ax-sw-flag:last-child{margin-bottom:0}
.ax-sw-flag.keep{border-color:rgba(123,92,240,.5);background:rgba(123,92,240,.12)}
/* ---- 3. architecture ---- */
.ax-arch{border:1px solid var(--line);border-radius:16px;padding:22px;background:rgba(255,255,255,.02)}
.ax-ar-l{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.025)}
.ax-ar-lh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ax-ar-lh b{font-size:11px;letter-spacing:.15em;text-transform:uppercase;
color:color-mix(in srgb,var(--tc) 80%,#fff);font-weight:700}
.ax-ar-lh span{font-size:11.6px;color:var(--dim);font-weight:300}
.ax-ar-ns{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.ax-ar-n{padding:12px 13px;border-radius:11px;border:1px solid color-mix(in srgb,var(--tc) 38%,var(--line));
background:color-mix(in srgb,var(--tc) 8%,transparent);opacity:0;
animation:pxUp .5s cubic-bezier(.2,.8,.2,1) forwards}
.ax-ar-n b{display:block;font-size:12.6px;font-weight:650;line-height:1.3}
.ax-ar-n span{display:block;margin-top:5px;font-size:11.2px;color:var(--muted);font-weight:300;line-height:1.45}
.ax-ar-n em{display:inline-block;margin-top:8px;font-style:normal;font-size:9.6px;padding:2px 7px;
border-radius:100px;border:1px solid var(--line);color:var(--dim);
font-family:'JetBrains Mono',ui-monospace,monospace}
.ax-ar-arrow{display:grid;place-items:center;padding:7px 0}
.ax-ar-arrow svg{width:19px;height:19px;stroke:rgba(255,255,255,.3);fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.ax-ar-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:16px}
.ax-ar-note{padding:13px 15px;border-radius:12px;border:1px dashed var(--line);background:rgba(255,255,255,.02)}
.ax-ar-note b{font-size:11.8px;font-weight:650}
.ax-ar-note p{margin:6px 0 0;font-size:12.2px;line-height:1.55;color:var(--muted);font-weight:300}
/* ---- 4. board ---- */
.ax-bd{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(212px,1fr);gap:11px;min-width:900px}
.ax-bd-col{border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(255,255,255,.022)}
.ax-bd-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:10px;
margin-bottom:10px;border-bottom:2px solid color-mix(in srgb,var(--tc) 55%,transparent)}
.ax-bd-h b{font-size:11.6px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.ax-bd-h span{font-size:10.4px;color:var(--dim);font-family:'JetBrains Mono',ui-monospace,monospace}
.ax-bd-c{padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);
margin-bottom:8px;opacity:0;animation:pxUp .45s cubic-bezier(.2,.8,.2,1) forwards}
.ax-bd-c b{display:block;font-size:12.4px;font-weight:600;line-height:1.35}
.ax-bd-c span{display:block;margin-top:5px;font-size:10.8px;color:var(--dim);font-weight:300}
.ax-bd-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.ax-bd-tags i{font-style:normal;font-size:9.4px;padding:2px 7px;border-radius:100px;
background:color-mix(in srgb,var(--tc) 18%,transparent);color:#e6e9f8;
font-family:'JetBrains Mono',ui-monospace,monospace}
/* ---- 5. agenda ---- */
.ax-ag{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02)}
.ax-ag-r{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:14px 18px;
border-bottom:1px solid rgba(255,255,255,.05);opacity:0;
animation:pxUp .45s cubic-bezier(.2,.8,.2,1) forwards;border-left:3px solid transparent}
.ax-ag-r:last-child{border-bottom:0}
.ax-ag-r.key{border-left-color:var(--tc);background:color-mix(in srgb,var(--tc) 6%,transparent)}
.ax-ag-r.brk{opacity:.62}
.ax-ag-t b{display:block;font-size:13.6px;font-weight:650;font-family:'JetBrains Mono',ui-monospace,monospace;
color:color-mix(in srgb,var(--tc) 82%,#fff)}
.ax-ag-t span{display:block;margin-top:3px;font-size:10.4px;color:var(--dim);
font-family:'JetBrains Mono',ui-monospace,monospace}
.ax-ag-b b{font-size:14px;font-weight:600}
.ax-ag-b em{display:block;margin-top:3px;font-style:normal;font-size:10.8px;color:var(--tc);
letter-spacing:.04em;font-weight:600}
.ax-ag-b p{margin:7px 0 0;font-size:12.9px;line-height:1.58;color:var(--muted);font-weight:300;max-width:76ch}
/* ---- 6. register table ---- */
.ax-tbl{width:100%;border-collapse:collapse;font-size:12.6px;min-width:640px;
border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ax-tbl th{padding:11px 14px;text-align:left;font-size:10.2px;letter-spacing:.1em;text-transform:uppercase;
color:var(--dim);font-weight:700;background:rgba(255,255,255,.045);border-bottom:1px solid var(--line);
white-space:nowrap}
.ax-tbl th em{display:block;font-style:normal;margin-top:2px;font-size:9.6px;color:var(--tc);letter-spacing:.06em}
.ax-tbl td{padding:11px 14px;color:var(--muted);font-weight:300;border-bottom:1px solid rgba(255,255,255,.045);
vertical-align:top;line-height:1.5}
.ax-tbl tbody tr:last-child td{border-bottom:0}
.ax-tbl tbody tr:hover td{background:rgba(255,255,255,.028);color:var(--text)}
.ax-tbl td b{color:var(--text);font-weight:600}
.ax-tbl code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.2px;color:var(--cyan)}
/* ---- 7. research wall ---- */
.ax-qwall{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:11px}
.ax-q{margin:0;padding:16px 17px;border-radius:14px;border:1px solid var(--line);
background:rgba(255,255,255,.03);opacity:0;animation:pxUp .5s cubic-bezier(.2,.8,.2,1) forwards;
border-top:3px solid var(--tc)}
.ax-q.pain{border-top-color:#ff8b8b}.ax-q.ins{border-top-color:#5eead4}
.ax-q.quote{border-top-color:#7b5cf0}.ax-q.ops{border-top-color:#2b8be6}
.ax-q blockquote{margin:0;font-size:13.4px;line-height:1.6;color:var(--text);font-weight:300;font-style:italic}
.ax-q blockquote::before{content:"\201C"}
.ax-q blockquote::after{content:"\201D"}
.ax-q figcaption{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.ax-q figcaption b{display:block;font-size:11.6px;font-weight:600;font-style:normal}
.ax-q figcaption span{display:block;margin-top:3px;font-size:10.2px;color:var(--dim);
font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em}
.ax-qbars{display:grid;gap:8px;margin-top:16px;padding:16px 18px;border:1px solid var(--line);
border-radius:14px;background:rgba(255,255,255,.02)}
.ax-qb{display:grid;grid-template-columns:minmax(120px,1.3fr) 2.4fr auto;gap:12px;align-items:center}
.ax-qb span{font-size:12.2px;color:var(--muted);font-weight:300}
.ax-qb i{display:block;height:8px;border-radius:5px;transform-origin:0 50%;transform:scaleX(0);
animation:pxvBar .9s .15s cubic-bezier(.2,.8,.2,1) forwards;
background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 45%,transparent),var(--tc))}
.ax-qb b{font-size:11.2px;font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--text)}
/* ---- 8. dashboard ---- */
.ax-dashwrap{border:1px solid var(--line);border-radius:16px;padding:18px;background:rgba(255,255,255,.02)}
.ax-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.ax-dt{padding:14px 15px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.035);
opacity:0;animation:pxUp .45s cubic-bezier(.2,.8,.2,1) forwards}
.ax-dt.ok{border-color:rgba(94,234,212,.3)}.ax-dt.bad{border-color:rgba(255,120,120,.32)}
.ax-dt.warn{border-color:rgba(255,190,90,.3)}
.ax-dtl{display:block;font-size:10.2px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700}
.ax-dt b{display:block;margin-top:8px;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1}
.ax-dt em{display:inline-block;margin-top:7px;font-style:normal;font-size:11px;font-weight:600;
font-family:'JetBrains Mono',ui-monospace,monospace}
.ax-dt em.ok{color:#8ef0c8}.ax-dt em.bad{color:#ff9d9d}.ax-dt em.warn{color:#ffd79a}.ax-dt em.n{color:var(--dim)}
.ax-dts{display:block;margin-top:6px;font-size:10.4px;color:var(--dim);font-weight:300;line-height:1.4}
.ax-chart{margin-top:14px;padding:14px 12px 6px;border:1px solid var(--line);border-radius:13px;
background:rgba(0,0,0,.2)}
.ax-chart svg{width:100%;height:auto;display:block}
.ax-gl{stroke:rgba(255,255,255,.07);stroke-width:1}
.ax-ax{fill:var(--dim);font-size:9.4px;text-anchor:middle;font-family:'JetBrains Mono',monospace}
.ax-pl{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2000;
stroke-dashoffset:2000;animation:pxvDraw 1.5s cubic-bezier(.3,.7,.3,1) forwards}
.ax-pl.t0{stroke:var(--t0)}.ax-pl.t1{stroke:var(--t1)}.ax-pl.t2{stroke:var(--t2)}
.ax-pl.t3{stroke:var(--t3)}.ax-pl.t4{stroke:var(--t4)}
.ax-keys{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:8px}
.ax-key{display:inline-flex;align-items:center;gap:7px;font-size:11.2px;color:var(--muted);font-weight:300}
.ax-key i{width:10px;height:3px;border-radius:3px;background:var(--tc)}
.ax-key.t0 i{background:var(--t0)}.ax-key.t1 i{background:var(--t1)}.ax-key.t2 i{background:var(--t2)}
.ax-key.t3 i{background:var(--t3)}.ax-key.t4 i{background:var(--t4)}
/* ---- 9. decision flow ---- */
.ax-fw{display:grid;gap:0;justify-items:center}
.ax-fw-s{width:100%;max-width:560px;padding:15px 18px;border-radius:14px;border:1px solid var(--line);
background:rgba(255,255,255,.03);opacity:0;animation:pxUp .45s cubic-bezier(.2,.8,.2,1) forwards;
text-align:center}
.ax-fw-s.start{border-radius:100px;background:color-mix(in srgb,var(--tc) 16%,transparent);
border-color:color-mix(in srgb,var(--tc) 50%,transparent)}
.ax-fw-s.test{border-style:dashed;border-color:rgba(255,190,90,.4);background:rgba(255,190,90,.06)}
.ax-fw-s.stop{border-color:rgba(255,120,120,.45);background:rgba(255,90,90,.08)}
.ax-fw-s.end{border-radius:100px;border-color:rgba(94,234,212,.45);background:rgba(94,234,212,.09)}
.ax-fw-s b{display:block;font-size:13.6px;font-weight:650}
.ax-fw-s p{margin:6px 0 0;font-size:12.4px;line-height:1.55;color:var(--muted);font-weight:300}
.ax-fw-br{display:flex;gap:10px;justify-content:center;margin-top:11px;flex-wrap:wrap}
.ax-fw-br span{font-size:10.8px;padding:4px 11px;border-radius:100px;font-weight:600;
font-family:'JetBrains Mono',ui-monospace,monospace}
.ax-fw-br .yes{color:#8ef0c8;background:rgba(94,234,212,.12);border:1px solid rgba(94,234,212,.3)}
.ax-fw-br .no{color:#ff9d9d;background:rgba(255,90,90,.1);border:1px solid rgba(255,120,120,.3)}
.ax-fw-a{width:2px;height:22px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08))}
/* ---- 10. runbook checklist ---- */
.ax-ck{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02)}
.ax-ck-g{padding:13px 18px 9px;font-size:10.4px;letter-spacing:.15em;text-transform:uppercase;
color:color-mix(in srgb,var(--tc) 80%,#fff);font-weight:700;background:rgba(255,255,255,.035);
border-bottom:1px solid var(--line)}
.ax-ck-r{display:grid;grid-template-columns:22px 74px 1fr auto;gap:12px;align-items:center;
padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.045);opacity:0;
animation:pxUp .4s cubic-bezier(.2,.8,.2,1) forwards}
.ax-ck-r:last-child{border-bottom:0}
.ax-ck-b{width:17px;height:17px;border-radius:5px;border:1.6px solid rgba(255,255,255,.24);position:relative}
.ax-ck-r.done .ax-ck-b{background:color-mix(in srgb,var(--tc) 70%,transparent);
border-color:color-mix(in srgb,var(--tc) 70%,transparent)}
.ax-ck-r.done .ax-ck-b::after{content:"";position:absolute;left:4.5px;top:1.5px;width:5px;height:9px;
border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}
.ax-ck-r.now .ax-ck-b{border-color:var(--tc);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 22%,transparent)}
.ax-ck-r.next{opacity:.55}
.ax-ck-t{font-size:10.8px;color:var(--dim);font-family:'JetBrains Mono',ui-monospace,monospace}
.ax-ck-i{font-size:13px;color:var(--text);font-weight:400;line-height:1.45}
.ax-ck-r.next .ax-ck-i{color:var(--muted)}
.ax-ck-o{font-size:10.6px;color:var(--dim);white-space:nowrap;
font-family:'JetBrains Mono',ui-monospace,monospace}
/* ---- 11. scorecard ---- */
.ax-sc td{vertical-align:middle}
.ax-sc-n b{display:block;font-size:13px}
.ax-sc-n span{display:block;margin-top:3px;font-size:10.8px;color:var(--dim);font-weight:300}
.ax-sc-b{display:block;width:52px;height:5px;border-radius:4px;background:rgba(255,255,255,.09);margin-bottom:5px}
.ax-sc-b i{display:block;height:100%;border-radius:4px;background:var(--tc);transform-origin:0 50%;
transform:scaleX(0);animation:pxvBar .8s .1s cubic-bezier(.2,.8,.2,1) forwards}
.ax-sc td b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.4px}
.ax-sc-t{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:15px!important;
color:var(--text)!important;font-weight:700}
.ax-sc-v{margin-top:14px;padding:15px 18px;border-radius:13px;border:1px solid color-mix(in srgb,var(--tc) 42%,transparent);
background:color-mix(in srgb,var(--tc) 9%,transparent)}
.ax-sc-v b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:color-mix(in srgb,var(--tc) 80%,#fff);font-weight:700}
.ax-sc-v p{margin:7px 0 0;font-size:13.2px;line-height:1.6;color:var(--muted);font-weight:300}
/* ---- 12. value model ---- */
.ax-md{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02)}
.ax-md-h,.ax-md-r{display:grid;grid-template-columns:minmax(190px,1.5fr) 92px 108px minmax(150px,1.2fr);
gap:14px;padding:11px 18px;align-items:center}
.ax-md-h{background:rgba(255,255,255,.045);border-bottom:1px solid var(--line)}
.ax-md-h span{font-size:10.2px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700}
.ax-md-r{border-bottom:1px solid rgba(255,255,255,.045);opacity:0;
animation:pxUp .45s cubic-bezier(.2,.8,.2,1) forwards}
.ax-md-d b{display:block;font-size:12.9px;font-weight:600}
.ax-md-d code{display:block;margin-top:4px;font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:10.4px;color:var(--cyan);opacity:.85}
.ax-md-v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.6px;color:var(--text);font-weight:500}
.ax-md-s{height:7px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.ax-md-s i{display:block;height:100%;border-radius:5px;transform-origin:0 50%;transform:scaleX(0);
animation:pxvBar .85s .12s cubic-bezier(.2,.8,.2,1) forwards;
background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 40%,transparent),var(--tc))}
.ax-md-n{font-size:11.4px;color:var(--dim);font-weight:300;line-height:1.45}
.ax-md-tot{display:flex;align-items:baseline;gap:14px;padding:15px 18px;
background:color-mix(in srgb,var(--tc) 10%,transparent);border-top:1px solid var(--line)}
.ax-md-tot b{font-size:21px;font-weight:700;letter-spacing:-.02em}
.ax-md-tot span{font-size:12.2px;color:var(--muted);font-weight:300}
/* ---- 13. dependency network ---- */
.ax-nt{min-width:985px;width:100%;height:auto;display:block}
.ax-nt-e{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.6;stroke-dasharray:600;
stroke-dashoffset:600;animation:pxvDraw 1.4s .2s ease forwards}
.ax-nt-el{fill:var(--dim);font-size:10px;text-anchor:middle;font-family:'JetBrains Mono',monospace}
.ax-nt-n{opacity:0;animation:pxvFade .45s forwards}
.ax-nt-n rect{fill:rgba(255,255,255,.045);stroke:var(--line);stroke-width:1}
.ax-nt-n.data rect{fill:rgba(84,104,242,.16);stroke:rgba(84,104,242,.55)}
.ax-nt-n.auth rect{fill:rgba(255,190,90,.13);stroke:rgba(255,190,90,.5)}
.ax-nt-n.evid rect{fill:rgba(255,90,90,.12);stroke:rgba(255,120,120,.5)}
.ax-nt-n.nerve rect{fill:rgba(123,92,240,.16);stroke:rgba(123,92,240,.55)}
.ax-nt-n.ok rect{fill:rgba(94,234,212,.12);stroke:rgba(94,234,212,.5)}
.ax-nt-t{fill:#fff;font-size:12.5px;font-weight:600;text-anchor:middle}
.ax-nt-s{fill:var(--muted);font-size:10.4px;text-anchor:middle}
.ax-nt-lg{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px}
.ax-nt-k{display:inline-flex;align-items:center;gap:7px;font-size:11.2px;color:var(--muted);font-weight:300}
.ax-nt-k i{width:12px;height:12px;border-radius:4px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.ax-nt-k.data i{background:rgba(84,104,242,.35);border-color:rgba(84,104,242,.6)}
.ax-nt-k.auth i{background:rgba(255,190,90,.3);border-color:rgba(255,190,90,.6)}
.ax-nt-k.evid i{background:rgba(255,90,90,.28);border-color:rgba(255,120,120,.6)}
.ax-nt-k.nerve i{background:rgba(123,92,240,.35);border-color:rgba(123,92,240,.6)}
.ax-nt-k.ok i{background:rgba(94,234,212,.28);border-color:rgba(94,234,212,.6)}
/* ---- 14. conversation spec ---- */
.ax-cv{border:1px solid var(--line);border-radius:16px;padding:20px;background:rgba(255,255,255,.02);
display:grid;gap:12px}
.ax-cv-t{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:start;opacity:0;
animation:pxUp .45s cubic-bezier(.2,.8,.2,1) forwards}
.ax-cv-w{font-size:9.8px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:700;
padding-top:11px;text-align:right}
.ax-cv-b{padding:12px 15px;border-radius:14px;font-size:13.2px;line-height:1.55;font-weight:300;
border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text)}
.ax-cv-t.cust .ax-cv-b{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.07);
border-bottom-left-radius:4px}
.ax-cv-t.ai .ax-cv-b{border-color:rgba(34,211,238,.34);background:rgba(34,211,238,.09);
border-bottom-right-radius:4px}
.ax-cv-t.agent .ax-cv-b{border-color:rgba(123,92,240,.4);background:rgba(123,92,240,.11)}
.ax-cv-t.sys .ax-cv-b{border-style:dashed;background:rgba(0,0,0,.28);color:var(--dim);
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.2px}
.ax-cv-an{display:flex;gap:9px;margin-top:8px;padding-left:2px}
.ax-cv-an i{flex:0 0 2px;border-radius:2px;background:var(--tc);opacity:.6}
.ax-cv-an p{margin:0;font-size:11.6px;line-height:1.55;color:var(--dim);font-weight:300;font-style:italic}
.ax-cv-rules{margin-top:14px;padding:16px 18px;border-radius:14px;border:1px dashed var(--line);
background:rgba(255,255,255,.02)}
.ax-cv-rules b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:color-mix(in srgb,var(--tc) 80%,#fff);font-weight:700}
.ax-cv-rules ol{margin:10px 0 0;padding-left:20px}
.ax-cv-rules li{font-size:12.8px;line-height:1.6;color:var(--muted);font-weight:300;padding-bottom:6px}
.ax-cv-rules li::marker{color:var(--tc);font-weight:700}
/* ---- 15. mini timeline ---- */
.ax-tl{min-width:820px;border:1px solid var(--line);border-radius:16px;padding:14px 18px;
background:rgba(255,255,255,.02)}
.ax-tl-r{display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:center;padding:5px 0}
.ax-tl-h{border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:6px}
.ax-tl-h .ax-tl-n{font-size:10.2px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:700}
.ax-tl-n b{display:block;font-size:12.6px;font-weight:600}
.ax-tl-n em{display:block;margin-top:2px;font-style:normal;font-size:10.4px;color:var(--dim)}
.ax-tl-tr{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;align-items:center}
.ax-tl-u{font-size:9.8px;color:var(--dim);text-align:center;font-family:'JetBrains Mono',monospace}
.ax-tl-b{height:24px;border-radius:7px;display:grid;place-items:center;font-size:9.6px;font-weight:600;
color:#fff;font-family:'JetBrains Mono',ui-monospace,monospace;overflow:hidden;white-space:nowrap;
transform-origin:0 50%;transform:scaleX(0);animation:pxGrow .5s cubic-bezier(.2,.8,.2,1) forwards;
background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 88%,transparent),color-mix(in srgb,var(--tc) 42%,transparent));
border:1px solid color-mix(in srgb,var(--tc) 50%,transparent)}
.ax-tl-b.done{opacity:.55}
.ax-tl-b.block{background:repeating-linear-gradient(135deg,rgba(255,90,90,.3) 0 7px,rgba(255,90,90,.14) 7px 14px);
border-color:rgba(255,120,120,.5)}
.ax-tl-b.next{background:none;border-style:dashed;color:var(--muted)}
.ax-tl-m{display:grid;place-items:center;position:relative}
.ax-tl-m i{width:9px;height:9px;background:var(--cyan);transform:rotate(45deg);border-radius:2px}
.ax-tl-m b{position:absolute;top:12px;font-size:8.8px;color:var(--cyan);white-space:nowrap;
font-family:'JetBrains Mono',monospace}
/* ---- 16. heat grid ---- */
.ax-ht{min-width:600px;display:grid;gap:4px}
.ax-ht-r{display:grid;grid-template-columns:minmax(160px,1.4fr) repeat(var(--n),minmax(0,1fr));gap:4px;
align-items:center}
.ax-ht-n{font-size:12.2px;color:var(--muted);font-weight:300;padding-right:8px;line-height:1.32}
.ax-ht-h{font-size:9.6px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:700;
text-align:center}
.ax-ht-c{height:30px;border-radius:7px;opacity:0;animation:pxvFade .4s forwards}
.ax-ht-c.l0{background:rgba(255,255,255,.05)}
.ax-ht-c.l1{background:rgba(255,90,90,.3)}
.ax-ht-c.l2{background:rgba(255,190,90,.35)}
.ax-ht-c.l3{background:linear-gradient(135deg,rgba(43,139,230,.75),rgba(34,211,238,.6))}
.ax-ht-keys{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px}
.ax-ht-k{display:inline-flex;align-items:center;gap:7px;font-size:11.2px;color:var(--dim);font-weight:300}
.ax-ht-k i{width:14px;height:11px;border-radius:4px}
.ax-ht-k i.l0{background:rgba(255,255,255,.05)}
.ax-ht-k i.l1{background:rgba(255,90,90,.3)}
.ax-ht-k i.l2{background:rgba(255,190,90,.35)}
.ax-ht-k i.l3{background:linear-gradient(135deg,rgba(43,139,230,.75),rgba(34,211,238,.6))}
/* ---- activity modal shell + frame ---- */
.m-wrap.lvl16{z-index:97}
.m-panel.widest{max-width:1240px}
.px-act{position:relative;text-align:left;appearance:none;font:inherit;color:inherit;cursor:pointer;
padding-bottom:44px}
.px-act:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.px-ago{position:absolute;left:20px;bottom:15px;display:inline-flex;align-items:center;gap:7px;
font-size:11.2px;letter-spacing:.04em;color:var(--tc);font-weight:600;opacity:.001;
transform:translateY(4px);transition:opacity .28s,transform .28s}
.px-act:hover .px-ago,.px-act:focus-visible .px-ago{opacity:1;transform:none}
.px-ago svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.px-act:hover .px-ago svg{transform:translateX(4px)}
.ax-kind{margin:-6px 0 20px;font-size:14.6px;font-weight:600;color:var(--text)}
.ax-kind span{font-weight:300;color:var(--muted);font-size:13.8px}
.ax-metas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:26px}
.ax-m{padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.026)}
.ax-m span{display:block;font-size:9.8px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:700}
.ax-m b{display:block;margin-top:5px;font-size:13.2px;font-weight:600}
.ax-art{margin:6px 0 8px;display:grid;gap:18px}
.ax-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px 34px;margin-top:6px}
.ax-run{list-style:none;margin:0;padding:0}
.ax-run li{display:grid;grid-template-columns:26px 1fr;gap:12px;padding-bottom:12px}
.ax-run li span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--tc);
font-weight:600;padding-top:2px}
.ax-run li p{margin:0;font-size:13.4px;line-height:1.62;color:var(--muted);font-weight:300}
@media (max-width:760px){
.ax-metas{grid-template-columns:repeat(2,1fr)}
.ax-dbody{padding:18px 18px 6px}
.px-ago{opacity:1;transform:none;position:static;display:flex;margin-top:12px}
.px-act{padding-bottom:18px}
}
.ax-sw-fl .ax-sw-c{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:5px}
.ax-sw-flag{margin-bottom:0}
.ax-cv-an{grid-column:2}
/* =====================================================================
LEGAL PAGES — privacy.html / terms.html (legal.py)
===================================================================== */
.lg-hero{padding-bottom:56px}
.lg-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:34px}
.lg-m{padding:15px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.lg-m span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700}
.lg-m b{display:block;margin-top:6px;font-size:13.6px;font-weight:600;letter-spacing:-.01em}
.lg-m a{color:var(--cyan);text-decoration:none}
.lg-m a:hover{text-decoration:underline}
.lg-band{padding-top:56px}
.lg-wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start}
.lg-toc{position:sticky;top:calc(var(--nav-h) + 22px);max-height:calc(100vh - var(--nav-h) - 60px);
overflow-y:auto;padding-right:6px}
.lg-toct{margin:0 0 14px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:700}
.lg-toc nav{display:flex;flex-direction:column;gap:1px}
.lg-toc a{display:grid;grid-template-columns:26px 1fr;gap:9px;align-items:baseline;padding:7px 10px;
border-radius:8px;text-decoration:none;font-size:12.6px;line-height:1.4;color:var(--muted);
font-weight:300;transition:background .22s,color .22s;border-left:2px solid transparent}
.lg-toc a i{font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;color:var(--dim)}
.lg-toc a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.lg-toc a.on{color:var(--text);background:rgba(123,92,240,.11);border-left-color:var(--violet)}
.lg-toc a.on i{color:var(--violet)}
.lg-body{max-width:78ch}
.lg-s{padding:0 0 40px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.lg-s h3{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;margin:0 0 16px;
font-size:21px;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.lg-s h3 span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:500;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-s p{margin:0 0 14px;font-size:14.6px;line-height:1.72;color:var(--muted);font-weight:300}
.lg-s p a,.lg-ul a,.lg-ol a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(34,211,238,.35)}
.lg-s p a:hover,.lg-ul a:hover,.lg-ol a:hover{color:#fff;border-bottom-color:#fff}
.lg-s b{color:var(--text);font-weight:600}
.lg-h4{margin:22px 0 10px;font-size:12.4px;letter-spacing:.1em;text-transform:uppercase;
color:var(--text);font-weight:700}
.lg-ul{list-style:none;margin:0 0 16px;padding:0}
.lg-ul li{position:relative;padding:0 0 10px 22px;font-size:14.2px;line-height:1.68;color:var(--muted);font-weight:300}
.lg-ul li::before{content:"";position:absolute;left:3px;top:10px;width:6px;height:6px;border-radius:2px;
background:var(--grad);transform:rotate(45deg)}
.lg-ol{margin:0 0 16px;padding-left:22px}
.lg-ol li{padding:0 0 10px 4px;font-size:14.2px;line-height:1.68;color:var(--muted);font-weight:300}
.lg-ol li::marker{color:var(--violet);font-weight:700;font-size:12.5px}
.lg-note{margin:6px 0 18px;padding:16px 20px;border-left:3px solid var(--violet);border-radius:0 14px 14px 0;
background:rgba(123,92,240,.08)}
.lg-note b{display:block;font-size:11.4px;letter-spacing:.1em;text-transform:uppercase;color:#c9bcff;font-weight:700}
.lg-note p{margin:8px 0 0!important;font-size:13.8px;line-height:1.65}
.lg-caps{margin:6px 0 20px;padding:18px 22px;border:1px solid rgba(34,211,238,.34);border-radius:14px;
background:rgba(34,211,238,.07)}
.lg-caps b{display:block;font-size:11.4px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:700}
.lg-caps p{margin:10px 0 0!important;font-size:12.8px;line-height:1.7;color:var(--text);font-weight:500;
letter-spacing:.01em}
.lg-addr{margin:14px 0 6px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;
background:rgba(255,255,255,.025);font-style:normal;display:grid;gap:3px}
.lg-addr span{font-size:13.4px;color:var(--muted);font-weight:300}
.lg-addr b{color:var(--text);font-weight:650}
.lg-addr a{color:var(--cyan);text-decoration:none}
.lg-addr a:hover{text-decoration:underline}
.lg-end{margin-top:14px;padding:30px 32px;border:1px solid var(--line);border-radius:20px;
background:radial-gradient(ellipse 90% 130% at 0% 0%,rgba(123,92,240,.14),transparent 70%),rgba(255,255,255,.022)}
.lg-end h4{margin:0 0 10px;font-size:19px;font-weight:650;letter-spacing:-.02em}
.lg-end p{margin:0 0 20px;font-size:14.4px;line-height:1.68;color:var(--muted);font-weight:300;max-width:62ch}
.lg-endcta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
@media (max-width:980px){
.lg-wrap{grid-template-columns:1fr;gap:0}
.lg-toc{position:static;max-height:none;margin-bottom:34px;padding:18px 16px;border:1px solid var(--line);
border-radius:16px;background:rgba(255,255,255,.022)}
.lg-toc nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px}
.lg-body{max-width:none}
}
/* ================= FAQ hero graphics ================= */
@keyframes fqGrowX{to{transform:scaleX(1)}}
@keyframes fqRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fqJam{0%,100%{transform:scaleY(1);opacity:.9}50%{transform:scaleY(.86);opacity:1}}
@keyframes fqDim{to{opacity:.34}}
/* --- 01 containment vs resolution --- */
.fqc-inb{fill:rgba(255,255,255,.05);stroke:var(--line)}
.fqc-int{fill:var(--text);font-size:19px;font-weight:600;text-anchor:middle;letter-spacing:-.02em}
.fqc-ins{fill:var(--dim);font-size:10.5px;text-anchor:middle;letter-spacing:.1em;text-transform:uppercase}
.fqc-feed{stroke:rgba(255,255,255,.24);stroke-width:2;stroke-dasharray:4 5;fill:none;opacity:0}
.hart.on .fqc-feed{animation:fadeUp .5s ease .25s both}
.fqc-lb{fill:var(--dim);font-size:11px;letter-spacing:.15em;text-transform:uppercase}
.fqc-track{fill:rgba(255,255,255,.05);stroke:none}
.fqc-bar{transform:scaleX(0);transform-origin:30px 0;transform-box:view-box}
.fqc-bar.bar1{fill:url(#fqc1)}
.fqc-bar.bar2{fill:url(#fqc2)}
.hart.on .fqc-bar{animation:fqGrowX 1.05s cubic-bezier(.2,.8,.2,1) both}
.fqc-val{font-size:22px;font-weight:600;letter-spacing:-.024em;text-anchor:end;opacity:0}
.fqc-val.v1{fill:#8ee9f7}
.fqc-val.v2{fill:#a9f0d4}
.fqc-pct{font-size:12px;opacity:.7}
.hart.on .fqc-val.v1{animation:fadeUp .55s ease 1.2s both}
.hart.on .fqc-val.v2{animation:fadeUp .55s ease 1.6s both}
.fqc-arc{fill:none;stroke:#f87171;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:4 6;
opacity:0}
.fqc-tick,.fqc-drop{fill:none;stroke:rgba(248,113,113,.5);stroke-width:1.4;stroke-dasharray:4 5;
opacity:0}
.hart.on .fqc-arc,.hart.on .fqc-tick,.hart.on .fqc-drop{animation:fadeUp .6s ease 1.9s both}
.fqc-pk{fill:#f87171;opacity:0}
.hart.on .fqc-pk{animation:fadeUp .5s ease 2.3s both}
.fqc-flag{fill:rgba(248,113,113,.14);stroke:rgba(248,113,113,.5);opacity:0}
.fqc-ft{fill:#fbd5d5;font-size:14.6px;font-weight:600;text-anchor:middle;letter-spacing:-.018em;opacity:0}
.fqc-fs{fill:var(--dim);font-size:11px;text-anchor:middle;opacity:0}
.hart.on .fqc-flag,.hart.on .fqc-ft,.hart.on .fqc-fs{animation:fqRise .65s ease 2.15s both}
/* --- 02 the stall --- */
.fqs-ax{fill:var(--dim);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;text-anchor:middle}
.fqs-hoped{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.8;stroke-dasharray:5 6}
.fqs-hl{fill:var(--dim);font-size:10.6px;letter-spacing:.1em;opacity:0}
.hart.on .fqs-hl{animation:fadeUp .6s ease 1.7s both}
.fqs-fill{fill:url(#fqs1);opacity:0}
.hart.on .fqs-fill{animation:fadeUp .9s ease 1.1s both}
.fqs-line{fill:none;stroke:#5468f2;stroke-width:3.2;stroke-linecap:round;
stroke-dasharray:280;stroke-dashoffset:280}
.fqs-line.l2{stroke:#f8a3a3}
.hart.on .fqs-climb .fqs-line{animation:draw 1.1s cubic-bezier(.3,.7,.2,1) .2s forwards}
.hart.on .fqs-flat .fqs-line{animation:draw 1.1s cubic-bezier(.3,.7,.2,1) 1.2s forwards}
.fqs-drop{stroke:rgba(248,113,113,.42);stroke-width:1.4;stroke-dasharray:4 5;opacity:0}
.fqs-dot{fill:#f87171}
.fqs-halo{fill:none;stroke:#f87171;stroke-width:2;opacity:0;transform-box:fill-box;
transform-origin:center}
.hart.on .fqs-halo{animation:fqHalo 2.6s ease-out 2s infinite}
@keyframes fqHalo{0%{opacity:.7;transform:scale(1)}70%{opacity:0;transform:scale(3.1)}100%{opacity:0}}
.fqs-flag{fill:rgba(248,113,113,.13);stroke:rgba(248,113,113,.45);opacity:0}
.fqs-ft{fill:#fbd5d5;font-size:13.6px;font-weight:600;text-anchor:middle;letter-spacing:-.016em;opacity:0}
.fqs-fs{fill:var(--dim);font-size:10.6px;text-anchor:middle;opacity:0}
.hart.on .fqs-drop,.hart.on .fqs-flag,.hart.on .fqs-ft,.hart.on .fqs-fs{
animation:fqRise .65s ease 1.9s both}
.fqs-dot{opacity:0}
.hart.on .fqs-dot{animation:pop .5s cubic-bezier(.2,1.4,.4,1) 1.6s both}
/* --- 03 the knowledge constriction --- */
.fqk-pipe{fill:rgba(84,104,242,.17);opacity:0}
.fqk-pipe.r{fill:rgba(52,211,153,.15)}
.hart.on .fqk-pipe{animation:fadeUp .9s ease .5s both}
.fqk-wall{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;stroke-linecap:round;
stroke-dasharray:520;stroke-dashoffset:520}
.hart.on .fqk-wall{animation:draw 1.5s cubic-bezier(.3,.7,.2,1) .15s forwards}
.fqk-lab{fill:rgba(10,10,19,.82);stroke:var(--line)}
.fqk-lt{fill:var(--text);font-size:13px;font-weight:600;text-anchor:middle;letter-spacing:-.014em}
.fqk-ls{fill:var(--dim);font-size:10.4px;text-anchor:middle}
.fqk-seg{opacity:0}
.hart.on .fqk-seg{animation:fadeUp .6s ease 1.1s both}
.fqk-pipe.neck{fill:rgba(251,191,36,.3)}
.fqk-nb{fill:rgba(251,191,36,.18);stroke:rgba(251,191,36,.6);stroke-width:1.6;
transform-box:fill-box;transform-origin:center}
.hart.on .fqk-nb{animation:fqJam 2.4s ease-in-out 1.6s infinite}
.fqk-nt{fill:#fbd98a;font-size:12px;font-weight:700;text-anchor:middle;letter-spacing:-.012em}
.fqk-ns{fill:var(--dim);font-size:9.6px;text-anchor:middle}
.fqk-neck{opacity:0}
.hart.on .fqk-neck{animation:fadeUp .6s ease 1.35s both}
.fqk-p{fill:#8ee9f7}
.fqk-p.out{fill:#a9f0d4}
.fqk-flow{opacity:0}
.hart.on .fqk-flow{animation:fadeUp .6s ease 1.7s both}
/* --- 04 nobody owns the journey --- */
.fqo-col{fill:rgba(255,255,255,.04);stroke:var(--line);opacity:0}
.fqo-own{fill:rgba(84,104,242,.24);stroke:rgba(84,104,242,.6);opacity:0}
.fqo-ot{fill:#c9cbdd;font-size:11px;font-weight:600;text-anchor:middle;letter-spacing:.06em}
.fqo-ct{fill:var(--text);font-size:13.4px;font-weight:600;text-anchor:middle;letter-spacing:-.014em}
.fqo-ch{opacity:0}
.hart.on .fqo-ch:nth-of-type(1){animation:fqRise .6s ease .2s both}
.hart.on .fqo-ch:nth-of-type(2){animation:fqRise .6s ease .35s both}
.hart.on .fqo-ch:nth-of-type(3){animation:fqRise .6s ease .5s both}
.hart.on .fqo-ch:nth-of-type(4){animation:fqRise .6s ease .65s both}
.hart.on .fqo-col,.hart.on .fqo-own{opacity:1}
.fqo-line{fill:none;stroke:#22d3ee;stroke-width:3;stroke-linecap:round;
stroke-dasharray:460;stroke-dashoffset:460}
.hart.on .fqo-line{animation:draw 1.2s cubic-bezier(.3,.7,.2,1) 1s forwards}
.fqo-pk{fill:#22d3ee;opacity:0}
.hart.on .fqo-pk{animation:fadeUp .5s ease 2s both}
.fqo-tick{stroke:rgba(248,113,113,.45);stroke-width:1.4;stroke-dasharray:4 5;fill:none;opacity:0}
.fqo-gap{fill:rgba(248,113,113,.14);stroke:rgba(248,113,113,.5);stroke-dasharray:6 5;opacity:0}
.fqo-gt{fill:#fbd5d5;font-size:13.4px;font-weight:600;text-anchor:middle;letter-spacing:-.016em;opacity:0}
.fqo-gs{fill:var(--dim);font-size:10.6px;text-anchor:middle;opacity:0}
.hart.on .fqo-tick,.hart.on .fqo-gap,.hart.on .fqo-gt,.hart.on .fqo-gs{
animation:fqRise .65s ease 2.1s both}
/* --- 05 prototype against pilot --- */
.fqp-hd{fill:var(--text);font-size:15px;font-weight:600;letter-spacing:-.018em}
.fqp-hs{fill:var(--dim);font-size:10.6px;letter-spacing:.08em}
.fqp-rail{fill:rgba(255,255,255,.06)}
.fqp-fill{transform:scaleX(0);transform-origin:40px 0;transform-box:view-box}
.fqp-fill.p1{fill:url(#fqc2)}
.fqp-fill.p2{fill:#f87171;opacity:.7}
.hart.on .fqp-fill.p1{animation:fqGrowX .8s cubic-bezier(.2,.8,.2,1) .3s both}
.hart.on .fqp-fill.p2{animation:fqGrowX 1.6s cubic-bezier(.2,.8,.2,1) .8s both}
.fqp-gd{fill:rgba(52,211,153,.2);stroke:#34d399;stroke-width:2}
.fqp-gx{stroke:#34d399;stroke-width:2.4;stroke-linecap:round;fill:none}
.fqp-gate{opacity:0;transform-box:fill-box;transform-origin:center}
.hart.on .fqp-gate{animation:pop .55s cubic-bezier(.2,1.4,.4,1) 1.1s both}
.fqp-gl{fill:#a9f0d4;font-size:11px;text-anchor:middle;letter-spacing:.06em;opacity:0}
.hart.on .fqp-gl{animation:fadeUp .5s ease 1.4s both}
.fqp-cost{font-size:11.4px;letter-spacing:.06em;opacity:0}
.fqp-cost.ok{fill:#a9f0d4}
.hart.on .fqp-cost{animation:fadeUp .5s ease 1.5s both}
.fqp-load rect{fill:rgba(251,191,36,.55)}
.fqp-load{opacity:0}
.hart.on .fqp-load{animation:fqRise .5s ease both;animation-delay:inherit}
.fqp-end{fill:rgba(248,113,113,.24);stroke:#f87171;stroke-width:2;opacity:0;
transform-box:fill-box;transform-origin:center}
.hart.on .fqp-end{animation:pop .55s cubic-bezier(.2,1.4,.4,1) 2.1s both}
.fqp-el{fill:#f8a3a3;font-size:11px;letter-spacing:.06em;opacity:0}
.hart.on .fqp-el{animation:fadeUp .5s ease 2.3s both}
.fqp-nb{fill:rgba(255,255,255,.04);stroke:var(--line)}
.fqp-nt{fill:var(--muted);font-size:12.4px;text-anchor:middle;font-weight:400}
.fqp-note{opacity:0}
.hart.on .fqp-note{animation:fqRise .6s ease 2.5s both}
/* --- 06 what a board can act on --- */
.fqm-hd{fill:#8ee9f7;font-size:10.6px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.fqm-hd.dim{fill:var(--dim)}
.fqm-rb{fill:rgba(255,255,255,.045);stroke:var(--line)}
.fqm-rt{fill:var(--text);font-size:13.4px;font-weight:600;letter-spacing:-.014em}
.fqm-rt.sm{font-size:12.4px;font-weight:400;fill:var(--muted)}
.fqm-rs{fill:var(--dim);font-size:10.4px}
.fqm-sp{fill:rgba(255,255,255,.07)}
.fqm-spf{fill:url(#fqm1);transform:scaleX(0);transform-origin:330px 0;transform-box:view-box}
.hart.on .fqm-spf{animation:fqGrowX .9s cubic-bezier(.2,.8,.2,1) both}
.fqm-up{stroke:#34d399;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0}
.hart.on .fqm-up{animation:fadeUp .5s ease 1.2s both}
.fqm-row.keep{opacity:0}
.hart.on .fqm-row.keep:nth-of-type(1){animation:fqRise .6s ease .2s both}
.hart.on .fqm-row.keep:nth-of-type(2){animation:fqRise .6s ease .4s both}
.hart.on .fqm-row.keep:nth-of-type(3){animation:fqRise .6s ease .6s both}
.fqm-row.fade{opacity:0}
.hart.on .fqm-row.fade{animation:fqRise .6s ease 1.1s both,fqDim .8s ease 1.9s forwards}
.hart .fqm-row.fade .fqm-rb{stroke-dasharray:6 5}
@media (prefers-reduced-motion:reduce){
.hart.on .fqc-bar,.hart.on .fqc-val.v1,.hart.on .fqc-val.v2,.hart.on .fqc-arc,.hart.on .fqc-pk,
.hart.on .fqc-flag,.hart.on .fqc-ft,.hart.on .fqc-fs,
.hart.on .fqs-hl,.hart.on .fqs-fill,.hart.on .fqs-climb .fqs-line,.hart.on .fqs-flat .fqs-line,
.hart.on .fqs-drop,.hart.on .fqs-flag,.hart.on .fqs-ft,.hart.on .fqs-fs,.hart.on .fqs-dot,
.hart.on .fqs-halo,
.hart.on .fqk-pipe,.hart.on .fqk-wall,.hart.on .fqk-seg,.hart.on .fqk-nb,.hart.on .fqk-neck,
.hart.on .fqk-flow,
.hart.on .fqo-ch,.hart.on .fqo-line,.hart.on .fqo-pk,.hart.on .fqo-tick,.hart.on .fqo-gap,
.hart.on .fqo-gt,.hart.on .fqo-gs,
.hart.on .fqp-fill.p1,.hart.on .fqp-fill.p2,.hart.on .fqp-gate,.hart.on .fqp-gl,
.hart.on .fqp-cost,.hart.on .fqp-load,.hart.on .fqp-end,.hart.on .fqp-el,.hart.on .fqp-note,
.hart.on .fqm-spf,.hart.on .fqm-up,.hart.on .fqm-row.keep,.hart.on .fqm-row.fade{
animation:none!important;opacity:1!important;transform:none!important;
stroke-dashoffset:0!important}
}
/* ---------- header Resources dropdown ---------- */
.has-sub{position:relative;display:flex;align-items:center}
.sub-toggle{
display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14.5px;font-weight:450;
color:var(--muted);background:none;border:0;cursor:pointer;padding:9px 14px;border-radius:9px;
transition:color .22s,background .22s;white-space:nowrap;
}
.sub-toggle:hover,.has-sub:hover .sub-toggle,.has-sub:focus-within .sub-toggle{color:var(--text);background:rgba(255,255,255,.055)}
.sub-toggle .caret{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(180deg)}
.submenu{
position:absolute;top:100%;left:0;min-width:212px;padding:8px;margin-top:6px;display:grid;gap:2px;
background:rgba(10,10,18,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border:1px solid var(--line);border-radius:13px;box-shadow:0 18px 44px rgba(0,0,0,.5);
opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:60;
}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.links .submenu a{display:block;padding:9px 12px;border-radius:9px;font-size:14px;white-space:nowrap}
.links .submenu a:hover{color:var(--text);background:rgba(255,255,255,.075)}
/* drawer (mobile) Resources group */
.drawer .drawer-label{
margin:18px 0 2px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);opacity:.75;
}
.drawer a.drawer-sub{padding-left:16px;font-size:16px}
/* configurator nav fit */
@media(min-width:981px) and (max-width:1320px){
.links a{padding:9px 10px;font-size:13.6px}
.links .sub-toggle{padding:9px 10px;font-size:13.6px}
}
@media(min-width:981px) and (max-width:1120px){
.links a{padding:8px 8px;font-size:12.9px;letter-spacing:-.005em}
.links .sub-toggle{padding:8px 8px;font-size:12.9px}
.mark img{height:82px}
}
/* configurator promo band (index.html) */
.cfp{
display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:34px;align-items:center;
border:1px solid var(--line);border-radius:26px;padding:38px 40px;
background:linear-gradient(150deg,rgba(123,92,240,.14),rgba(43,139,230,.07) 52%,rgba(34,211,238,.05));
position:relative;overflow:hidden;
}
.cfp::after{
content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:34px 34px;
mask-image:radial-gradient(ellipse 70% 90% at 88% 12%,#000,transparent 72%);
-webkit-mask-image:radial-gradient(ellipse 70% 90% at 88% 12%,#000,transparent 72%);
}
.cfp > *{position:relative;z-index:1}
@media(max-width:980px){.cfp{grid-template-columns:1fr;gap:28px;padding:30px 26px;border-radius:20px}}
@media(max-width:560px){.cfp{padding:26px 20px}}
.cfp-copy h2{margin:0 0 16px;font-size:clamp(24px,3.1vw,35px);line-height:1.14;letter-spacing:-.033em;font-weight:700}
.cfp-copy .lead{margin:0 0 26px;max-width:60ch;font-size:clamp(15px,1.6vw,16.6px)}
.cfp-copy .cta-row{display:flex;flex-wrap:wrap;gap:12px}
.cfp-note{
display:flex;align-items:flex-start;gap:10px;margin:22px 0 0;max-width:62ch;
font-size:12.8px;color:var(--dim);font-weight:300;line-height:1.6;
}
.cfp-note svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;stroke:var(--cyan);fill:none;
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cfp-side{display:grid;gap:14px}
.cfp-stats{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:340px){.cfp-stats{grid-template-columns:1fr}}
.cfp-stat{
border:1px solid var(--line);border-radius:15px;padding:15px 16px;background:rgba(6,6,11,.42);
transition:border-color .3s,transform .3s;
}
.cfp-stat:hover{border-color:rgba(123,92,240,.42);transform:translateY(-2px)}
.cfp-stat b{
display:block;font-size:clamp(24px,3vw,30px);font-weight:700;letter-spacing:-.035em;line-height:1;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.cfp-stat span{display:block;margin-top:7px;font-size:12.5px;font-weight:550;color:#c3c6d6;letter-spacing:-.008em}
.cfp-stat em{display:block;margin-top:4px;font-style:normal;font-size:11.4px;color:var(--dim);font-weight:300;line-height:1.45}
.cfp-steps{
border:1px solid var(--line);border-radius:15px;padding:14px 16px 15px;background:rgba(6,6,11,.42);
display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.cfp-steps b{
width:100%;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
font-weight:700;margin-bottom:4px;
}
.cfp-steps span{
font-size:11.5px;color:var(--muted);font-weight:400;border:1px solid var(--line);border-radius:100px;
padding:4px 10px;background:rgba(255,255,255,.03);white-space:nowrap;
}
/* hero: the configurator link sits alongside the briefing CTA */
.hero-cta .btn-cfg svg{stroke-width:1.9}
/* hero: self-serve configurator link under the primary CTAs */
.hero-cfg{margin:18px 0 0;max-width:56ch}
.hero-cfg a{
display:inline-flex;align-items:flex-start;gap:10px;text-decoration:none;
font-size:13.6px;font-weight:400;color:var(--muted);line-height:1.55;
border:1px solid var(--line);border-radius:14px;padding:11px 16px;
background:linear-gradient(135deg,rgba(123,92,240,.1),rgba(34,211,238,.05));
transition:border-color .25s,color .25s,background .25s,transform .25s;
}
.hero-cfg a:hover{color:var(--text);border-color:rgba(123,92,240,.5);transform:translateY(-2px);
background:linear-gradient(135deg,rgba(123,92,240,.18),rgba(34,211,238,.08))}
.hero-cfg a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.hero-cfg svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;stroke:var(--cyan);fill:none;
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-cfg .arw{stroke:currentColor;transition:transform .25s}
.hero-cfg a:hover .arw{transform:translateX(4px)}
@media(max-width:560px){.hero-cfg a{font-size:13px;padding:10px 13px}}
/* online tools page */
.ot-hero{padding:64px 0 34px}
.ot-hero h1{margin:0 0 18px;font-size:clamp(31px,4.6vw,54px);line-height:1.08;letter-spacing:-.035em;font-weight:700}
.ot-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ot-stats{display:flex;flex-wrap:wrap;gap:34px;margin:30px 0 0}
.ot-stat{display:flex;flex-direction:column;gap:3px}
.ot-stat b{font-size:clamp(26px,3.2vw,34px);font-weight:700;letter-spacing:-.035em;line-height:1;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ot-stat span{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);font-weight:600}
.ot-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:0 0 16px}
.ot-search{flex:1 1 260px;max-width:360px}
.ot-count{margin:0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;
letter-spacing:.1em;color:var(--dim)}
.ot-chips{margin:0 0 34px}
.ot-chips button .c{opacity:.62;margin-left:8px;font-size:11px;font-family:'JetBrains Mono',ui-monospace,monospace}
.ot-group{margin:0 0 42px}
.ot-group[hidden]{display:none}
.ot-gh{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;color:var(--dim);font-weight:700}
.ot-gh span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--cyan);
border:1px solid rgba(34,211,238,.3);border-radius:100px;padding:2px 9px;background:rgba(34,211,238,.07);
letter-spacing:.06em}
.ot-gh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.ot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.ot-card{
display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;padding:22px 23px 20px;
background:linear-gradient(165deg,rgba(255,255,255,.048),rgba(255,255,255,.012));
transition:border-color .3s,transform .3s,box-shadow .3s;
}
.ot-card:hover{border-color:rgba(123,92,240,.45);transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.36)}
.ot-card[hidden]{display:none}
.ot-card.feature{
border-color:rgba(123,92,240,.32);
background:linear-gradient(160deg,rgba(123,92,240,.13),rgba(43,139,230,.06) 55%,rgba(255,255,255,.014));
}
.ot-top{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.ot-ico{
width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
border:1px solid var(--line);background:rgba(0,0,0,.28);
}
.ot-ico svg{width:19px;height:19px;stroke:var(--cyan);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ot-card.feature .ot-ico{background:linear-gradient(135deg,rgba(123,92,240,.3),rgba(34,211,238,.18));border-color:transparent}
.ot-card.feature .ot-ico svg{stroke:#fff}
.ot-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.ot-meta .k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.15em;
text-transform:uppercase;color:var(--cyan);font-weight:500}
.ot-meta .t{font-size:11.5px;color:var(--dim);font-weight:500}
.ot-card h3{margin:0 0 10px;font-size:18px;line-height:1.26;letter-spacing:-.022em;font-weight:620}
.ot-blurb{margin:0 0 15px;font-size:13.8px;color:var(--muted);font-weight:300;line-height:1.62}
.ot-blurb em{font-style:normal;color:#c9ccdb}
.ot-gives{
margin:0 0 18px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
background:rgba(0,0,0,.24);font-size:12.8px;color:#c3c6d6;font-weight:300;line-height:1.55;
}
.ot-gives b{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
font-weight:700;margin-bottom:6px}
.ot-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;
padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.ot-where{display:inline-flex;align-items:center;gap:7px;font-size:11.8px;color:var(--dim);font-weight:500}
.ot-where svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ot-foot .btn{flex:0 0 auto}
.ot-empty{border:1px dashed var(--line);border-radius:20px;padding:54px 26px;text-align:center;
color:var(--muted);background:rgba(255,255,255,.02)}
.ot-empty[hidden]{display:none}
.ot-empty h3{margin:0 0 8px}
.ot-empty p{margin:0 0 18px;font-size:14.5px;font-weight:300}
.ot-note{display:flex;gap:15px;border:1px solid rgba(34,211,238,.22);border-radius:18px;padding:20px 22px;
background:linear-gradient(135deg,rgba(34,211,238,.07),rgba(123,92,240,.045))}
.ot-note svg{width:20px;height:20px;flex:0 0 auto;margin-top:2px;stroke:var(--cyan);fill:none;
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ot-note b{display:block;font-size:14px;font-weight:600;margin-bottom:6px;letter-spacing:-.012em}
.ot-note p{margin:0;font-size:13.6px;color:var(--muted);font-weight:300;line-height:1.65;max-width:88ch}
@media(max-width:560px){.ot-grid{grid-template-columns:1fr}.ot-stats{gap:22px}}
/* ---------------------------------------------------------------------
embed mode - the page is running inside the frame on online-tools.html.
Strip the site chrome so only the tool itself shows, and zero the nav
height so every sticky offset and anchor lands correctly.
--------------------------------------------------------------------- */
html.embedded{--nav-h:0px;scroll-padding-top:14px}
html.embedded .nav,
html.embedded .drawer,
html.embedded footer,
html.embedded .sf-tab,
html.embedded .sf-panel,
html.embedded .sf-scrim,
html.embedded .fy-launch,
html.embedded .fy-panel,
html.embedded .hero,
html.embedded .ot-hero,
html.embedded .cf-hero{display:none!important}
html.embedded .band{padding-top:30px;padding-bottom:30px}
html.embedded .band-tight{padding-top:22px;padding-bottom:22px}
html.embedded .rv{opacity:1!important;transform:none!important}
html.embedded body{overflow-x:hidden}
/* hero: manual step through the slides */
.harrow{
width:30px;height:30px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;
border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.03);color:var(--muted);
transition:color .22s,border-color .22s,background .22s,transform .22s;
}
.harrow:hover{color:#fff;border-color:rgba(123,92,240,.55);background:rgba(123,92,240,.16);transform:translateY(-1px)}
.harrow:active{transform:translateY(0) scale(.94)}
.harrow:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.harrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.hprev{margin-right:5px}
.hnext{margin-left:5px}
@media(max-width:560px){.harrow{width:34px;height:34px}}
/* Resources reads as active while the visitor is on one of its pages */
.sub-toggle.active{color:var(--text)}
.sub-toggle.active::after{
content:"";position:absolute;left:14px;right:26px;bottom:2px;height:2px;border-radius:2px;background:var(--grad);
}
.has-sub{position:relative}
.sub-toggle{position:relative}
.submenu a.active{color:var(--text);background:rgba(123,92,240,.14)}
.drawer-sub.active{color:var(--text)}
/* =====================================================================
THE FULL SUITE — solutions page console, the compounding sequence,
and the hero graphics that carry the suite story.
Appended 09/2026. Everything here is namespaced .su- .seq- or by the
two-letter prefix of the graphic it belongs to.
===================================================================== */
/* ---------- accent tokens, one per practice area ---------- */
.a-violet{--ac:#7b5cf0;--ac-2:#9a7ff5;--ac-a:rgba(123,92,240,.16);--ac-b:rgba(123,92,240,.42)}
.a-indigo{--ac:#5468f2;--ac-2:#7f8df6;--ac-a:rgba(84,104,242,.16);--ac-b:rgba(84,104,242,.42)}
.a-blue {--ac:#2b8be6;--ac-2:#5fabee;--ac-a:rgba(43,139,230,.16);--ac-b:rgba(43,139,230,.42)}
.a-cyan {--ac:#22d3ee;--ac-2:#67e2f4;--ac-a:rgba(34,211,238,.16);--ac-b:rgba(34,211,238,.42)}
.a-teal {--ac:#10b3a3;--ac-2:#4fcdc0;--ac-a:rgba(16,179,163,.16);--ac-b:rgba(16,179,163,.42)}
@keyframes suUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes suIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes suPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes suRail{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes suSheen{0%{transform:translateX(-120%)}60%,100%{transform:translateX(220%)}}
/* ================================ header + counters ================= */
.su-head h2{max-width:22ch}
.su-stats{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
margin:38px 0 30px;padding:26px 30px;border:1px solid var(--line);border-radius:20px;
background:linear-gradient(140deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
position:relative;overflow:hidden;
}
.su-stats::after{
content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:var(--grad);opacity:.85;
}
.su-stat b{
display:block;font-size:clamp(38px,5.2vw,58px);line-height:1;font-weight:750;letter-spacing:-.03em;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
font-variant-numeric:tabular-nums;
}
.su-stat span{
display:block;margin-top:9px;font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.su-rule{
grid-column:1/-1;margin:6px 0 0;padding-top:20px;border-top:1px solid var(--line);
font-size:15px;line-height:1.62;color:var(--muted);font-weight:300;max-width:82ch;
}
@media(max-width:760px){.su-stats{grid-template-columns:1fr 1fr;padding:22px}}
/* ================================ console ========================== */
.su-console{
border:1px solid var(--line);border-radius:24px;overflow:hidden;
background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
box-shadow:0 30px 90px -50px rgba(0,0,0,.9);
}
/* ---- practice area rail ---- */
.su-rail{
position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
border-bottom:1px solid var(--line);background:rgba(0,0,0,.24);
}
.su-ink{
position:absolute;bottom:-1px;height:2px;border-radius:2px;background:var(--grad);
transition:left .45s cubic-bezier(.2,.85,.25,1),width .45s cubic-bezier(.2,.85,.25,1);
left:0;width:16.66%;
}
.su-tab{
appearance:none;border:0;border-right:1px solid var(--line);background:transparent;
color:var(--muted);text-align:left;padding:18px 16px 16px;cursor:pointer;
display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden;
transition:background .28s,color .28s;font:inherit;
}
.su-tab:last-child{border-right:0}
.su-tab i{
font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;
letter-spacing:.2em;color:var(--dim);transition:color .28s;
}
.su-tab b{font-size:14px;font-weight:600;line-height:1.3;color:var(--muted);transition:color .28s}
.su-tab em{
font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:10.5px;letter-spacing:.12em;color:var(--dim);
}
.su-tab::before{
content:"";position:absolute;inset:0;background:var(--ac-a,rgba(255,255,255,.06));
opacity:0;transition:opacity .3s;
}
.su-tab:hover::before{opacity:.7}
.su-tab:hover b{color:var(--text)}
.su-tab.on{background:rgba(255,255,255,.045)}
.su-tab.on b{color:var(--text)}
.su-tab.on i{color:var(--ac,var(--cyan))}
.su-tab-all i{letter-spacing:.05em}
@media(max-width:960px){
.su-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
.su-tab{border-bottom:1px solid var(--line)}
.su-ink{display:none}
}
@media(max-width:560px){.su-rail{grid-template-columns:1fr 1fr}}
/* ---- body + panels ---- */
.su-body{position:relative}
.su-area{display:none;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.su-area.on{display:grid;animation:suUp .5s cubic-bezier(.2,.8,.2,1) both}
.su-index.on{display:block}
@media(max-width:980px){.su-area.on{grid-template-columns:1fr}}
.su-brief{padding:38px 34px;border-right:1px solid var(--line);background:rgba(0,0,0,.16)}
@media(max-width:980px){.su-brief{border-right:0;border-bottom:1px solid var(--line)}}
.su-anum{
margin:0 0 12px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
letter-spacing:.22em;text-transform:uppercase;color:var(--ac);
}
.su-aname{margin:0;font-size:clamp(23px,2.4vw,30px);line-height:1.16;letter-spacing:-.02em;font-weight:680}
.su-alead{margin:14px 0 0;font-size:15.4px;line-height:1.66;color:var(--muted);font-weight:300}
.su-akick{
margin:14px 0 0;padding-left:14px;border-left:2px solid var(--ac);
font-size:14.4px;line-height:1.6;color:var(--ac-2);font-weight:420;
}
.su-settles{margin-top:28px}
.su-settles h4,.su-arts h4,.su-block h4{
margin:0 0 14px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.6px;
letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:500;
padding-bottom:9px;border-bottom:1px solid var(--line);display:flex;
align-items:baseline;justify-content:space-between;gap:12px;
}
.su-settles ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.su-settles li{
position:relative;padding-left:20px;font-size:14.6px;line-height:1.56;color:var(--text);font-weight:340;
}
.su-settles li::before{
content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--ac);
}
.su-area.on .su-settles li{animation:suIn .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.su-hands{margin-top:26px;display:grid;gap:16px;padding-top:20px;border-top:1px solid var(--line)}
.su-hands span{
display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.4px;
letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;
}
.su-hands p{margin:0;font-size:14px;line-height:1.58;color:var(--muted);font-weight:300}
/* ---- solution rows ---- */
.su-listwrap{padding:38px 34px}
.su-lh{
margin:0 0 16px;display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding-bottom:12px;border-bottom:1px solid var(--line);
}
.su-lh b{font-size:15px;font-weight:600}
.su-lh span{
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.6px;
letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.su-list{display:grid;gap:2px}
.su-row{
appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:inherit;
display:grid;grid-template-columns:34px 1fr auto 22px;align-items:center;gap:14px;
padding:15px 14px 15px 10px;border-radius:14px;text-align:left;position:relative;
transition:background .26s,transform .26s;
}
.su-row::before{
content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;
background:var(--ac);transform:scaleY(0);transform-origin:50% 50%;transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.su-row:hover{background:rgba(255,255,255,.045);transform:translateX(4px)}
.su-row:hover::before{transform:scaleY(1)}
.su-row.active{background:var(--ac-a)}
.su-row.active::before{transform:scaleY(1)}
.su-area.on .su-row{animation:suUp .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.su-rn{
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.06em;
color:var(--dim);transition:color .26s;
}
.su-row:hover .su-rn{color:var(--ac)}
.su-rt b{display:block;font-size:15.4px;font-weight:600;line-height:1.34;letter-spacing:-.005em}
.su-rt em{
display:block;margin-top:4px;font-style:normal;font-size:13.4px;line-height:1.5;
color:var(--muted);font-weight:300;
}
.su-rgo{width:19px;height:19px;fill:none;stroke:var(--dim);stroke-width:1.7;stroke-linecap:round;
stroke-linejoin:round;opacity:0;transform:translateX(-6px);transition:opacity .26s,transform .26s,stroke .26s}
.su-row:hover .su-rgo{opacity:1;transform:none;stroke:var(--ac)}
.su-rtag{
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.6px;letter-spacing:.14em;
text-transform:uppercase;padding:4px 8px;border-radius:6px;white-space:nowrap;
border:1px solid var(--line);color:var(--dim);
}
.su-rtag.core{color:var(--muted)}
.su-rtag.new{color:var(--ac);border-color:var(--ac-b);background:var(--ac-a)}
/* ---- artifact chips ---- */
.su-arts{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.su-chips{display:flex;flex-wrap:wrap;gap:7px}
.su-chip{
font-size:12.4px;line-height:1;padding:8px 11px;border-radius:8px;color:var(--muted);
border:1px solid var(--line);background:rgba(255,255,255,.028);
transition:color .24s,border-color .24s,background .24s,transform .24s;
}
.su-chip:hover{color:var(--text);border-color:var(--ac-b);background:var(--ac-a);transform:translateY(-2px)}
.su-area.on .su-chip{animation:suPop .42s cubic-bezier(.2,.9,.3,1) var(--d,0s) both}
/* ---- the index view ---- */
.su-index{padding:34px}
.su-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:12px}
.su-card{
appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;position:relative;
background:rgba(255,255,255,.024);display:block;overflow:hidden;
transition:border-color .28s,transform .28s,background .28s;
}
.su-card::before{
content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ac);
transform:scaleX(0);transform-origin:0 50%;transition:transform .34s cubic-bezier(.2,.8,.2,1);
}
.su-card:hover{border-color:var(--ac-b);transform:translateY(-3px);background:rgba(255,255,255,.045)}
.su-card:hover::before{transform:scaleX(1)}
.su-index.on .su-card{animation:suUp .46s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.su-cn{
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.4px;letter-spacing:.1em;color:var(--ac);
}
.su-ca{
display:block;margin-top:2px;font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:9.8px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.su-card b{display:block;margin-top:10px;font-size:15px;font-weight:600;line-height:1.34}
.su-card em{
display:block;margin-top:7px;font-style:normal;font-size:13.2px;line-height:1.52;
color:var(--muted);font-weight:300;
}
.su-card .su-rtag{display:inline-block;margin-top:12px}
/* ================================ detail pane ====================== */
.su-detail{display:none;padding:30px 34px 34px}
.su-detail.on{display:block;animation:suUp .5s cubic-bezier(.2,.8,.2,1) both}
.su-back{
appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;
font:inherit;font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:7px;
padding:8px 14px 8px 10px;border-radius:10px;margin-bottom:24px;transition:color .24s,border-color .24s,background .24s;
}
.su-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.su-back:hover{color:var(--text);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.su-pane{display:none}
.su-pane.on{display:block}
.su-ph{padding-bottom:24px;border-bottom:1px solid var(--line);position:relative}
.su-ph::after{
content:"";position:absolute;left:0;bottom:-1px;width:96px;height:2px;background:var(--ac);
transform:scaleX(0);transform-origin:0 50%;
}
.su-pane.on .su-ph::after{animation:growX .7s cubic-bezier(.2,.8,.2,1) .1s forwards}
.su-pmeta{
margin:0 0 12px;display:flex;align-items:center;flex-wrap:wrap;gap:9px;
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.6px;
letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.su-pa{color:var(--ac)}
.su-pdot{color:var(--dim)}
.su-badge{
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.4px;letter-spacing:.14em;
padding:4px 8px;border-radius:6px;border:1px solid var(--line);color:var(--muted);
}
.su-badge.new{color:var(--ac);border-color:var(--ac-b);background:var(--ac-a)}
.su-ph h3{margin:0;font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.025em;font-weight:700}
.su-plead{margin:16px 0 0;max-width:78ch;font-size:16.4px;line-height:1.66;color:var(--muted);font-weight:300}
.su-pane.on .su-ph h3,.su-pane.on .su-plead{animation:suUp .55s cubic-bezier(.2,.8,.2,1) both}
.su-pane.on .su-plead{animation-delay:.07s}
.su-p2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;padding:30px 0}
.su-p3{
display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr) minmax(0,1fr);gap:34px;
padding:30px 0;border-top:1px solid var(--line);
}
@media(max-width:900px){.su-p2,.su-p3{grid-template-columns:1fr;gap:30px}}
.su-cnt{
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.8px;letter-spacing:.12em;
color:var(--ac);text-transform:none;
}
.su-work{margin:0;padding:0;list-style:none;display:grid;gap:13px}
.su-work li{
position:relative;padding-left:22px;font-size:15px;line-height:1.6;color:var(--text);font-weight:330;
}
.su-work li::before{
content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;
border:1.6px solid var(--ac);
}
.su-pane.on .su-work li{animation:suIn .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.su-gets{display:grid;gap:14px}
.su-get{
padding:2px 0 2px 16px;border-left:2px solid var(--ac);position:relative;
}
.su-get b{display:block;font-size:15px;font-weight:600;line-height:1.36}
.su-get p{margin:5px 0 0;font-size:13.8px;line-height:1.56;color:var(--muted);font-weight:300}
.su-pane.on .su-get{animation:suIn .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.su-shapes{display:grid;gap:1px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line)}
.su-sh{padding:13px 16px;background:rgba(255,255,255,.028);display:block}
.su-sh span{
display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.8px;
letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:5px;
}
.su-sh b{font-size:14.6px;font-weight:600;line-height:1.4}
.su-pane.on .su-sh{animation:suUp .45s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.su-when,.su-proves{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.su-when li{
position:relative;padding-left:20px;font-size:14.4px;line-height:1.56;color:var(--muted);font-weight:300;
}
.su-when li::before{
content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:2px;background:var(--dim);
}
.su-proves li{
position:relative;padding:12px 14px 12px 34px;border-radius:12px;font-size:14.2px;line-height:1.54;
color:var(--text);font-weight:330;background:var(--ac-a);border:1px solid var(--ac-b);
}
.su-proves li::before{
content:"";position:absolute;left:13px;top:16px;width:9px;height:9px;border-radius:50%;
border:1.8px solid var(--ac);
}
.su-pane.on .su-when li,.su-pane.on .su-proves li{animation:suUp .48s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.su-pf{
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
padding-top:22px;border-top:1px solid var(--line);
}
.su-fits{margin:0;font-size:14.4px;line-height:1.56;color:var(--muted);font-weight:300;max-width:62ch}
.su-fits span{
display:inline-block;margin-right:10px;font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ac);
}
.su-pnav{display:flex;gap:8px;flex:0 0 auto}
.su-pb{
appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;font:inherit;
color:var(--muted);display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;
font-size:13px;transition:color .24s,border-color .24s,background .24s,transform .24s;
}
.su-pb svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.su-pb:hover{color:var(--text);border-color:var(--ac-b);background:var(--ac-a);transform:translateY(-1px)}
@media(max-width:620px){.su-pl{display:none}}
.su-conv{margin-top:22px;max-width:84ch;color:var(--dim)}
@media(max-width:620px){.su-pdot{display:none}.su-pmeta{gap:6px}
.su-brief,.su-listwrap,.su-index,.su-detail{padding-left:20px;padding-right:20px}
.su-console{border-radius:18px}}
/* ================================ the sequence ===================== */
.seq{position:relative;margin-top:44px;padding-left:66px}
@media(max-width:640px){.seq{padding-left:48px}}
.seq-rail{
position:absolute;left:22px;top:10px;bottom:26px;width:2px;border-radius:2px;
background:linear-gradient(180deg,var(--line),var(--line));overflow:hidden;
}
@media(max-width:640px){.seq-rail{left:14px}}
.seq-rail i{
position:absolute;inset:0;background:var(--grad);transform:scaleY(0);transform-origin:50% 0;
transition:transform 1.4s cubic-bezier(.25,.8,.3,1);
}
.seq.lit .seq-rail i{transform:scaleY(1)}
.seq-stage{position:relative;padding:0 0 34px}
.seq-stage:last-child{padding-bottom:0}
.seq.lit .seq-stage{animation:suUp .6s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.seq-pip{
position:absolute;left:-66px;top:0;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
border:1px solid var(--line);background:rgba(6,6,11,.9);transition:border-color .3s,transform .3s,box-shadow .3s;
}
@media(max-width:640px){.seq-pip{left:-48px;width:30px;height:30px;border-radius:10px}}
.seq-pip i{
font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;
letter-spacing:.06em;color:var(--muted);transition:color .3s;
}
@media(max-width:640px){.seq-pip i{font-size:10px}}
.seq-stage:hover .seq-pip{border-color:rgba(255,255,255,.28);transform:scale(1.06);
box-shadow:0 0 0 6px rgba(255,255,255,.035)}
.seq-stage:hover .seq-pip i{color:var(--text)}
.seq-body h3{margin:0;font-size:20.5px;line-height:1.24;letter-spacing:-.015em;font-weight:660}
.seq-body p{margin:8px 0 0;font-size:14.8px;line-height:1.6;color:var(--muted);font-weight:300;max-width:70ch}
.seq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.seq-chip{
appearance:none;font:inherit;cursor:pointer;font-size:12.8px;line-height:1;padding:9px 13px;
border-radius:9px;color:var(--muted);border:1px solid var(--line);background:rgba(255,255,255,.028);
transition:color .24s,border-color .24s,background .24s,transform .24s;
}
.seq-chip:hover{color:var(--text);border-color:rgba(123,92,240,.45);background:rgba(123,92,240,.14);transform:translateY(-2px)}
.seq.lit .seq-chip{animation:suPop .42s cubic-bezier(.2,.9,.3,1) var(--d,0s) both}
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:46px}
@media(max-width:820px){.cards-3{grid-template-columns:1fr}}
.su-model{padding:26px 24px}
.su-model h3{margin:0;font-size:17px;font-weight:640;letter-spacing:-.01em}
.su-model p{margin:10px 0 0;font-size:14.4px;line-height:1.6;color:var(--muted);font-weight:300}
/* =====================================================================
HERO GRAPHICS
===================================================================== */
.hart svg text{font-family:'Inter',sans-serif}
/* ---- ART_SUITE : five columns, twenty-two nodes ---- */
.sq-base{fill:rgba(255,255,255,.08)}
.sq-fill{fill:url(#sqg);transform:scaleX(0);transform-origin:46px 0}
.hart.on .sq-fill{animation:growX 1.2s cubic-bezier(.2,.8,.2,1) .15s forwards}
.sq-pad{fill:rgba(255,255,255,.028);stroke:rgba(255,255,255,.08);stroke-width:1}
.sq-col:hover .sq-pad{fill:rgba(255,255,255,.06)}
.sq-lab{fill:#6a6c85;font-size:10.5px;letter-spacing:.14em;text-anchor:middle;text-transform:uppercase}
.sq-node{opacity:0;transform-box:fill-box;transform-origin:center}
.hart.on .sq-node{animation:pop .5s cubic-bezier(.2,1.4,.4,1) var(--d,0s) forwards}
.sq-node.a1{fill:#7b5cf0}.sq-node.a2{fill:#5468f2}.sq-node.a3{fill:#2b8be6}
.sq-node.a4{fill:#22d3ee}.sq-node.a5{fill:#10b3a3}
.sq-pad.a1{stroke:rgba(123,92,240,.3)}.sq-pad.a2{stroke:rgba(84,104,242,.3)}
.sq-pad.a3{stroke:rgba(43,139,230,.3)}.sq-pad.a4{stroke:rgba(34,211,238,.3)}
.sq-pad.a5{stroke:rgba(16,179,163,.3)}
.sq-ct{font-size:15px;font-weight:700;text-anchor:middle;opacity:0}
.hart.on .sq-ct{animation:fadeUp .6s ease 1s both}
.sq-ct.a1{fill:#9a7ff5}.sq-ct.a2{fill:#7f8df6}.sq-ct.a3{fill:#5fabee}
.sq-ct.a4{fill:#67e2f4}.sq-ct.a5{fill:#4fcdc0}
.sq-tot rect{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.1)}
.sq-tt{fill:#9a9cb4;font-size:10px;letter-spacing:.2em;text-anchor:middle}
/* ---- ART_FIVE : five directions into one practice ---- */
.fv-ray{fill:none;stroke:rgba(123,92,240,.42);stroke-width:1.7;stroke-dasharray:280;stroke-dashoffset:280}
.hart.on .fv-ray{animation:draw 1.3s cubic-bezier(.3,.7,.2,1) forwards}
.hart.on .fv-ray.r2{animation-delay:.1s}.hart.on .fv-ray.r3{animation-delay:.2s}
.hart.on .fv-ray.r4{animation-delay:.3s}.hart.on .fv-ray.r5{animation-delay:.4s}
.fv-in rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.12);stroke-width:1}
.fv-in text{fill:#9a9cb4;font-size:12.5px;text-anchor:middle;font-weight:500}
.fv-in:hover rect{fill:rgba(84,104,242,.18);stroke:rgba(84,104,242,.5)}
.fv-in:hover text{fill:#eceef6}
.fv-halo{fill:none;stroke:rgba(123,92,240,.22);stroke-width:1;transform-box:fill-box;transform-origin:center}
.hart.on .fv-halo{animation:breathe 4.6s ease-in-out infinite}
.fv-halo.h2{stroke:rgba(34,211,238,.2)}
.hart.on .fv-halo.h2{animation:breathe 3.4s ease-in-out infinite reverse}
.fv-box{fill:rgba(10,10,20,.94);stroke:url(#sqg);stroke-width:1.6}
.fv-t{fill:#eceef6;font-size:13px;letter-spacing:.14em;text-anchor:middle;font-weight:650}
.fv-s{fill:#9a9cb4;font-size:11px;text-anchor:middle}
/* ---- ART_COMPOUND : each turn cheaper ---- */
.cp-cap{fill:#6a6c85;font-size:10px;letter-spacing:.2em}
.cp-slope{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1;stroke-dasharray:4 5}
.cp-n{fill:#6a6c85;font-size:10.5px;letter-spacing:.06em}
.cp-l{fill:#eceef6;font-size:12.8px;font-weight:500}
.cp-track{fill:rgba(255,255,255,.05)}
.cp-bar{transform:scaleX(0);transform-origin:150px 0}
.hart.on .cp-bar{animation:growX .8s cubic-bezier(.2,.8,.2,1) var(--d,0s) forwards}
.cp-bar.cb0{fill:#7b5cf0}.cp-bar.cb1{fill:#6a60f1}.cp-bar.cb2{fill:#5468f2}
.cp-bar.cb3{fill:#3d7aec}.cp-bar.cb4{fill:#2b8be6}.cp-bar.cb5{fill:#22d3ee}.cp-bar.cb6{fill:#10b3a3}
.cp-v{fill:#6a6c85;font-size:10.5px;text-anchor:start}
.cp-row{opacity:0}
.hart.on .cp-row{animation:fadeUp .5s ease var(--d,0s) forwards}
.cp-row:hover .cp-l{fill:#22d3ee}
.cp-note rect{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.1)}
.cp-nt{fill:#9a9cb4;font-size:12px;text-anchor:middle;letter-spacing:.04em}
/* ---- ART_RULE : three gates ---- */
.rl-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:2}
.rl-run{fill:none;stroke:url(#sqg);stroke-width:2;stroke-dasharray:440;stroke-dashoffset:440}
.hart.on .rl-run{animation:draw 2.2s cubic-bezier(.35,.6,.25,1) .3s forwards}
.rl-gate rect{fill:rgba(10,10,20,.9);stroke:rgba(255,255,255,.12);stroke-width:1}
.rl-gate{opacity:0}
.hart.on .rl-gate{animation:fadeUp .6s ease both}
.hart.on .rl-gate.g1{animation-delay:.5s}
.hart.on .rl-gate.g2{animation-delay:1.1s}
.hart.on .rl-gate.g3{animation-delay:1.7s}
.rl-gate:hover rect{stroke:rgba(34,211,238,.55);fill:rgba(34,211,238,.09)}
.rl-k{fill:#6a6c85;font-size:10.5px;letter-spacing:.16em;text-anchor:middle}
.rl-t{fill:#eceef6;font-size:13.5px;letter-spacing:.12em;text-anchor:middle;font-weight:650}
.rl-s{fill:#9a9cb4;font-size:11px;text-anchor:middle}
.rl-dot{fill:none;stroke:#22d3ee;stroke-width:1.6}
.rl-tick{fill:none;stroke:#22d3ee;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:20;stroke-dashoffset:20}
.hart.on .rl-gate.g1 .rl-tick{animation:draw .5s ease 1s forwards}
.hart.on .rl-gate.g2 .rl-tick{animation:draw .5s ease 1.6s forwards}
.hart.on .rl-gate.g3 .rl-tick{animation:draw .5s ease 2.2s forwards}
.rl-stem{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1;stroke-dasharray:3 5}
.rl-pip{fill:#7b5cf0}
.hart.on .rl-pip{animation:breathe 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.rl-foot{fill:#6a6c85;font-size:11.5px;text-anchor:middle;letter-spacing:.05em}
/* ---- ART_CRAFT : wireframe to system ---- */
.cf-frame{fill:rgba(255,255,255,.022);stroke:rgba(255,255,255,.1);stroke-width:1}
.cf-frame.lit{stroke:rgba(43,139,230,.4)}
.cf-frame.sys{stroke:rgba(16,179,163,.4)}
.cf-wire{fill:rgba(255,255,255,.13);opacity:0}
.hart.on .cf-wire{animation:fadeUp .4s ease var(--d,0s) forwards}
.cf-ui{fill:rgba(43,139,230,.35);opacity:0}
.cf-ui.h{fill:rgba(255,255,255,.72)}
.cf-ui.img{fill:rgba(43,139,230,.2);stroke:rgba(43,139,230,.45);stroke-width:1}
.cf-ui.btn{fill:#2b8be6}
.hart.on .cf-ui{animation:fadeUp .4s ease var(--d,0s) forwards}
.cf-tok{fill:rgba(16,179,163,.32);opacity:0}
.cf-tok.t2{fill:rgba(34,211,238,.32)}.cf-tok.t3{fill:rgba(43,139,230,.32)}
.cf-tok.t4{fill:rgba(84,104,242,.32)}.cf-tok.t8{fill:#10b3a3}
.hart.on .cf-tok{animation:pop .4s cubic-bezier(.2,1.3,.4,1) var(--d,0s) forwards}
.cf-lab{fill:#6a6c85;font-size:10px;letter-spacing:.18em;text-anchor:middle}
.cf-lab.lit{fill:#5fabee}.cf-lab.sys{fill:#4fcdc0}
.cf-arrow{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.6;stroke-linecap:round;
stroke-linejoin:round;opacity:0}
.hart.on .cf-arrow.a1{animation:fadeUp .5s ease .66s forwards}
.hart.on .cf-arrow.a2{animation:fadeUp .5s ease 1.06s forwards}
.cf-stage:hover .cf-frame{fill:rgba(255,255,255,.05)}
.cf-note rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.1)}
.cf-nt{fill:#9a9cb4;font-size:11.5px;text-anchor:middle}
/* ---- ART_ARTIFACTS : eighty-eight documents ---- */
.ar-doc rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.12);stroke-width:.9}
.ar-doc{opacity:0}
.hart.on .ar-doc{animation:pop .4s cubic-bezier(.2,1.3,.4,1) var(--d,0s) forwards}
.ar-ln{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1.4;stroke-linecap:round}
.ar-field:hover .ar-doc rect{stroke:rgba(84,104,242,.5);fill:rgba(84,104,242,.14)}
.ar-cap{fill:#6a6c85;font-size:10px;letter-spacing:.2em}
.ar-tot rect{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.1)}
.ar-n{fill:url(#sqg);font-size:26px;font-weight:750;text-anchor:middle}
.ar-t{fill:#9a9cb4;font-size:12.5px}
/* ---- shared practice-area furniture ---- */
.pa-cap{fill:#6a6c85;font-size:10px;letter-spacing:.2em}
.pa-foot rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.1)}
.pa-ft{fill:#9a9cb4;font-size:11.5px;text-anchor:middle;letter-spacing:.03em}
/* ---- ART_PA_STRATEGY ---- */
.pa-in rect{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.11);stroke-width:1}
.pa-in text{fill:#9a9cb4;font-size:12.5px;text-anchor:middle}
.pa-in:hover rect{fill:rgba(123,92,240,.18);stroke:rgba(123,92,240,.5)}
.pa-in:hover text{fill:#eceef6}
.pa-conv{fill:none;stroke:rgba(123,92,240,.45);stroke-width:1.5;stroke-dasharray:220;stroke-dashoffset:220}
.hart.on .pa-conv{animation:draw 1.1s cubic-bezier(.3,.7,.2,1) forwards}
.hart.on .pa-conv.c2{animation-delay:.12s}.hart.on .pa-conv.c3{animation-delay:.24s}
.hart.on .pa-conv.c4{animation-delay:.36s}
.pa-hub rect{fill:rgba(123,92,240,.14);stroke:#7b5cf0;stroke-width:1.6}
.pa-hub{opacity:0}
.hart.on .pa-hub{animation:fadeUp .6s ease .9s forwards}
.pa-ht{fill:#eceef6;font-size:13px;letter-spacing:.14em;text-anchor:middle;font-weight:650}
.pa-hs{fill:#9a7ff5;font-size:11px;text-anchor:middle;letter-spacing:.05em}
.pa-own rect{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.11);stroke-width:1}
.pa-own{opacity:0}
.hart.on .pa-own{animation:fadeUp .55s ease 1.2s forwards}
.pa-own:hover rect{fill:rgba(123,92,240,.16);stroke:rgba(123,92,240,.5)}
.pa-ot{fill:#eceef6;font-size:12.5px;text-anchor:middle;font-weight:550}
.pa-os{fill:#6a6c85;font-size:10.5px;text-anchor:middle}
/* ---- ART_PA_RESEARCH ---- */
.rs-n{fill:rgba(84,104,242,.2);stroke:rgba(84,104,242,.4);stroke-width:1;opacity:0}
.hart.on .rs-n{animation:pop .42s cubic-bezier(.2,1.3,.4,1) var(--d,0s) forwards}
.rs-wall:hover .rs-n{fill:rgba(84,104,242,.34)}
.rs-tie{fill:none;stroke:rgba(84,104,242,.5);stroke-width:1.5;stroke-dasharray:120;stroke-dashoffset:120}
.hart.on .rs-tie{animation:draw .9s ease .8s forwards}
.hart.on .rs-tie.t2{animation-delay:.95s}.hart.on .rs-tie.t3{animation-delay:1.1s}
.rs-find rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.12);stroke-width:1}
.rs-find{opacity:0}
.hart.on .rs-find{animation:fadeUp .55s ease 1.15s forwards}
.rs-find:hover rect{fill:rgba(84,104,242,.16);stroke:rgba(84,104,242,.5)}
.rs-ft{fill:#eceef6;font-size:12.2px}
.rs-ev{fill:rgba(84,104,242,.3);stroke:#5468f2;stroke-width:1.2}
.rs-evt{fill:#eceef6;font-size:9.5px;text-anchor:middle;font-weight:600}
.rs-q{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.11);stroke-width:1}
.rs-q.q2{stroke:rgba(84,104,242,.34)}.rs-q.q3{stroke:rgba(84,104,242,.24)}
.rs-mx{opacity:0}
.hart.on .rs-mx{animation:fadeUp .55s ease 1.45s forwards}
.rs-qt{fill:#eceef6;font-size:10.5px;letter-spacing:.11em;text-anchor:middle;font-weight:600}
.rs-qs{fill:#6a6c85;font-size:10px;text-anchor:middle}
.rs-mx:hover .rs-q{fill:rgba(84,104,242,.14)}
/* ---- ART_PA_DESIGN ---- */
.dz-l rect{fill:rgba(255,255,255,.032);stroke:rgba(43,139,230,.28);stroke-width:1}
.dz-l{opacity:0}
.hart.on .dz-l{animation:suUp .55s cubic-bezier(.2,.8,.2,1) both}
.hart.on .dz-l.l1{animation-delay:.15s}.hart.on .dz-l.l2{animation-delay:.4s}
.hart.on .dz-l.l3{animation-delay:.65s}.hart.on .dz-l.l4{animation-delay:.9s}
.dz-l:hover rect{fill:rgba(43,139,230,.15);stroke:rgba(43,139,230,.6)}
.dz-t{fill:#eceef6;font-size:14px;font-weight:620}
.dz-s{fill:#9a9cb4;font-size:11.4px}
.dz-n{fill:#5fabee;font-size:16px;font-weight:700;text-anchor:end}
.dz-drop{fill:none;stroke:rgba(43,139,230,.55);stroke-width:1.6;stroke-linecap:round;
stroke-linejoin:round;opacity:0}
.hart.on .dz-drop.d1{animation:fadeUp .4s ease .38s forwards}
.hart.on .dz-drop.d2{animation:fadeUp .4s ease .63s forwards}
.hart.on .dz-drop.d3{animation:fadeUp .4s ease .88s forwards}
/* ---- ART_PA_AI ---- */
.ai-ring{fill:none;stroke:rgba(34,211,238,.16);stroke-width:1;stroke-dasharray:5 7;
transform-box:fill-box;transform-origin:center}
.hart.on .ai-ring.r1{animation:spin 40s linear infinite}
.hart.on .ai-ring.r2{animation:spin 28s linear infinite reverse;stroke:rgba(34,211,238,.24)}
.ai-hub{fill:rgba(34,211,238,.14);stroke:#22d3ee;stroke-width:1.8;transform-box:fill-box;transform-origin:center}
.hart.on .ai-hub{animation:breathe 3.6s ease-in-out infinite}
.ai-ht{fill:#eceef6;font-size:13px;letter-spacing:.14em;text-anchor:middle;font-weight:650}
.ai-hs{fill:#67e2f4;font-size:10px;text-anchor:middle;letter-spacing:.04em}
.ai-chip rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.12);stroke-width:1}
.ai-chip text{fill:#9a9cb4;font-size:11.4px;text-anchor:middle}
.ai-chip{opacity:0}
.hart.on .ai-chip{animation:fadeUp .55s ease both}
.hart.on .ai-chip.c1{animation-delay:.3s}.hart.on .ai-chip.c2{animation-delay:.45s}
.hart.on .ai-chip.c3{animation-delay:.6s}
.ai-chip.c3 rect{stroke:rgba(255,255,255,.2);stroke-dasharray:4 4}
.ai-chip:hover rect{fill:rgba(34,211,238,.16);stroke:rgba(34,211,238,.55)}
.ai-chip:hover text{fill:#eceef6}
.ai-hand{fill:none;stroke:rgba(34,211,238,.45);stroke-width:1.6;stroke-dasharray:120;stroke-dashoffset:120}
.hart.on .ai-hand{animation:draw .9s ease .8s forwards}
.ai-pkt{fill:#22d3ee;opacity:0}
.hart.on .ai-pkt{opacity:1}
.ai-human rect{fill:rgba(255,255,255,.04);stroke:rgba(34,211,238,.4);stroke-width:1.4}
.ai-human{opacity:0}
.hart.on .ai-human{animation:fadeUp .6s ease 1.1s forwards}
.ai-human:hover rect{fill:rgba(34,211,238,.14);stroke:rgba(34,211,238,.7)}
.ai-ut{fill:#eceef6;font-size:12.5px;letter-spacing:.16em;text-anchor:middle;font-weight:650}
.ai-us{fill:#9a9cb4;font-size:11px;text-anchor:middle}
.ai-udot{fill:#22d3ee}
.hart.on .ai-udot{animation:breathe 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.ai-gate rect{fill:rgba(255,255,255,.045);stroke:rgba(34,211,238,.35);stroke-width:1}
.ai-gate{opacity:0}
.hart.on .ai-gate{animation:fadeUp .6s ease 1.4s forwards}
.ai-gt{fill:#9a9cb4;font-size:11px;text-anchor:middle;letter-spacing:.05em}
.ai-gline{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1;stroke-dasharray:3 5}
/* ---- ART_PA_GOVERN ---- */
.gv-step rect{fill:rgba(255,255,255,.035);stroke:rgba(16,179,163,.3);stroke-width:1}
.gv-step{opacity:0}
.hart.on .gv-step{animation:fadeUp .5s ease both}
.hart.on .gv-step.s1{animation-delay:.18s}.hart.on .gv-step.s2{animation-delay:.32s}
.hart.on .gv-step.s3{animation-delay:.46s}.hart.on .gv-step.s4{animation-delay:.6s}
.gv-step:hover rect{fill:rgba(16,179,163,.16);stroke:rgba(16,179,163,.6)}
.gv-t{fill:#eceef6;font-size:12.8px;text-anchor:middle;font-weight:600}
.gv-s{fill:#6a6c85;font-size:10px;text-anchor:middle}
.gv-flow{fill:none;stroke:rgba(16,179,163,.6);stroke-width:1.6;stroke-linecap:round;
stroke-linejoin:round;opacity:0}
.hart.on .gv-flow{animation:fadeUp .4s ease .7s forwards}
.gv-loop{fill:none;stroke:rgba(16,179,163,.3);stroke-width:1.3;stroke-dasharray:4 5;
stroke-dashoffset:0;opacity:0}
.hart.on .gv-loop{animation:fadeUp .5s ease .9s forwards}
.gv-split rect{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.12);stroke-width:1}
.gv-split{opacity:0}
.hart.on .gv-split{animation:fadeUp .6s ease 1s forwards}
.hart.on .gv-split.r{animation-delay:1.15s}
.gv-split.l:hover rect{stroke:rgba(255,255,255,.34);fill:rgba(255,255,255,.06)}
.gv-split.r:hover rect{stroke:rgba(16,179,163,.6);fill:rgba(16,179,163,.14)}
.gv-bt{font-size:13.5px;letter-spacing:.16em;text-anchor:middle;font-weight:680}
.gv-bt.stop{fill:#9a9cb4}.gv-bt.go{fill:#4fcdc0}
.gv-bs{fill:#6a6c85;font-size:10.8px;text-anchor:middle}
.gv-gate rect{fill:rgba(255,255,255,.035);stroke:rgba(16,179,163,.28);stroke-width:1}
.gv-gate{opacity:0}
.hart.on .gv-gate{animation:fadeUp .55s ease both}
.hart.on .gv-gate.g1{animation-delay:1.3s}.hart.on .gv-gate.g2{animation-delay:1.42s}
.hart.on .gv-gate.g3{animation-delay:1.54s}
.gv-gate:hover rect{fill:rgba(16,179,163,.16);stroke:rgba(16,179,163,.6)}
.gv-gt{fill:#eceef6;font-size:12.5px;text-anchor:middle;font-weight:580}
.gv-gs{fill:#6a6c85;font-size:10.2px;text-anchor:middle}
/* ================================ reduced motion =================== */
@media(prefers-reduced-motion:reduce){
.su-area.on .su-row,.su-area.on .su-settles li,.su-area.on .su-chip,
.su-index.on .su-card,.su-pane.on .su-work li,.su-pane.on .su-get,
.su-pane.on .su-sh,.su-pane.on .su-when li,.su-pane.on .su-proves li,
.seq.lit .seq-stage,.seq.lit .seq-chip,.su-area.on,.su-detail.on{animation:none!important;opacity:1!important;transform:none!important}
.seq.lit .seq-rail i{transition:none;transform:scaleY(1)}
.su-ink{transition:none}
.hart svg *{animation:none!important}
.sq-node,.sq-ct,.cp-row,.rl-gate,.pa-hub,.pa-own,.rs-n,.rs-find,.rs-mx,
.dz-l,.ai-chip,.ai-human,.ai-gate,.gv-step,.gv-split,.gv-gate,.ar-doc,
.cf-wire,.cf-ui,.cf-tok,.cf-arrow,.dz-drop,.gv-flow,.gv-loop{opacity:1!important}
.sq-fill,.cp-bar{transform:none!important}
.fv-ray,.rl-run,.pa-conv,.rs-tie,.ai-hand,.rl-tick{stroke-dashoffset:0!important}
}
/* =====================================================================
THE LENS BOARD — all twenty-two solutions as one set of tiles that
re-sorts itself. Tiles keep their practice-area color under every lens,
so the regrouping stays legible.
===================================================================== */
.su-area.su-wall.on{display:block}
.su-wall{padding:30px 34px 36px}
@media(max-width:620px){.su-wall{padding:24px 20px 28px}}
/* ---------------- lens rail + tools ---------------- */
.tw-top{
display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
padding-bottom:20px;border-bottom:1px solid var(--line);
}
.tw-lenses{
position:relative;display:inline-flex;gap:2px;padding:4px;border:1px solid var(--line);
border-radius:14px;background:rgba(0,0,0,.3);max-width:100%;overflow-x:auto;
scrollbar-width:none;
}
.tw-lenses::-webkit-scrollbar{display:none}
.tw-ink{
position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:10px;background:var(--grad);
transition:left .42s cubic-bezier(.2,.85,.25,1),width .42s cubic-bezier(.2,.85,.25,1);
box-shadow:0 6px 20px -8px rgba(84,104,242,.9);
}
.tw-lens{
position:relative;z-index:1;appearance:none;border:0;background:transparent;cursor:pointer;
font:inherit;font-size:13.2px;font-weight:450;color:var(--muted);padding:9px 15px;border-radius:10px;
white-space:nowrap;transition:color .3s;
}
.tw-lens:hover{color:var(--text)}
.tw-lens.on{color:#fff;font-weight:560}
.tw-tools{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.tw-find{
display:flex;align-items:center;gap:9px;padding:0 13px;height:40px;border-radius:11px;
border:1px solid var(--line);background:rgba(255,255,255,.028);
transition:border-color .28s,background .28s;
}
.tw-find:focus-within{border-color:rgba(123,92,240,.55);background:rgba(255,255,255,.05)}
.tw-find svg{
width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--dim);stroke-width:1.7;
stroke-linecap:round;transition:stroke .28s;
}
.tw-find:focus-within svg{stroke:var(--violet)}
.tw-find input{
appearance:none;border:0;background:transparent;outline:0;font:inherit;font-size:13.4px;
color:var(--text);width:170px;padding:0;
}
.tw-find input::placeholder{color:var(--dim)}
.tw-find input::-webkit-search-cancel-button{filter:invert(.55)}
.tw-count{
margin:0;display:flex;align-items:baseline;gap:6px;
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.6px;letter-spacing:.14em;
text-transform:uppercase;color:var(--dim);white-space:nowrap;
}
.tw-count b{font-size:17px;letter-spacing:0;color:var(--text);font-variant-numeric:tabular-nums}
@media(max-width:760px){
.tw-top{gap:14px}
.tw-lenses{order:2;width:100%}
.tw-tools{order:1;width:100%;justify-content:space-between}
.tw-find input{width:100%}
.tw-find{flex:1}
}
/* ---------------- the note under the rail ---------------- */
.tw-note{position:relative;margin:18px 0 0;min-height:46px}
.tw-n1{
position:absolute;left:0;top:0;right:0;max-width:88ch;font-size:14.4px;line-height:1.6;
color:var(--muted);font-weight:300;opacity:0;transform:translateY(6px);pointer-events:none;
transition:opacity .34s ease,transform .34s cubic-bezier(.2,.8,.2,1);
}
.tw-n1.on{opacity:1;transform:none}
/* ---------------- the board ---------------- */
.tw-board{
position:relative;height:0;margin-top:12px;
transition:height .62s cubic-bezier(.22,.9,.24,1);
}
.tw-head,.tw-tile{position:absolute;left:0;top:0;will-change:transform,opacity}
.tw-head{
height:58px;display:flex;align-items:center;gap:14px;padding:0 2px 12px;
border-bottom:1px solid var(--line);
transition:transform .62s cubic-bezier(.22,.9,.24,1),opacity .34s ease;
}
.tw-head::after{
content:"";position:absolute;left:0;bottom:-1px;width:74px;height:2px;border-radius:2px;
background:var(--ac);opacity:.9;
}
.tw-head i{
font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
letter-spacing:.16em;color:var(--ac);flex:0 0 auto;
}
.tw-hb{min-width:0}
.tw-hb b{display:block;font-size:16px;font-weight:640;letter-spacing:-.012em;line-height:1.2}
.tw-hb em{
display:block;margin-top:3px;font-style:normal;font-size:12.8px;line-height:1.45;
color:var(--dim);font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tw-hn{
margin-left:auto;flex:0 0 auto;min-width:30px;height:24px;padding:0 9px;border-radius:8px;
display:grid;place-items:center;border:1px solid var(--ac-b);background:var(--ac-a);
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--ac-2);
}
@media(max-width:620px){.tw-hb em{display:none}
.tw-head{align-items:flex-start;padding-top:2px}
.tw-hb b{font-size:15px;line-height:1.24}}
/* ---------------- tiles ---------------- */
.tw-tile{
appearance:none;border:0;background:transparent;padding:0;font:inherit;color:inherit;
cursor:pointer;text-align:left;
transition:transform .62s cubic-bezier(.22,.9,.24,1),opacity .34s ease;
}
.tw-in{
display:flex;flex-direction:column;height:100%;padding:15px 16px 13px;position:relative;
overflow:hidden;border:1px solid var(--line);border-radius:16px;
background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.014));
transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .3s,opacity .3s,
box-shadow .34s,background .3s;
}
.tw-in::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac);
transform:scaleY(0);transform-origin:50% 0;transition:transform .36s cubic-bezier(.2,.8,.2,1);
}
.tw-in::after{
content:"";position:absolute;top:0;bottom:0;width:44%;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);
transform:translateX(-160%);
}
.tw-tile:hover .tw-in,.tw-tile:focus-visible .tw-in{
transform:translateY(-5px);border-color:var(--ac-b);
background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
box-shadow:0 22px 46px -26px var(--ac-b);
}
.tw-tile:hover .tw-in::before,.tw-tile:focus-visible .tw-in::before{transform:scaleY(1)}
.tw-tile:hover .tw-in::after{animation:twSheen .85s cubic-bezier(.3,.7,.3,1)}
@keyframes twSheen{from{transform:translateX(-160%)}to{transform:translateX(320%)}}
.tw-board:hover .tw-tile:not(:hover) .tw-in{opacity:.46}
.tw-tile.hide,.tw-head.hide{opacity:0;pointer-events:none}
.tw-tile.active .tw-in{border-color:var(--ac);background:var(--ac-a)}
.tw-tile.active .tw-in::before{transform:scaleY(1)}
.tw-r{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tw-n{
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.6px;letter-spacing:.1em;
color:var(--ac);
}
.tw-t{
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.2px;letter-spacing:.14em;
text-transform:uppercase;padding:3px 7px;border-radius:5px;border:1px solid var(--line);
color:var(--dim);
}
.tw-t.new{color:var(--ac-2);border-color:var(--ac-b);background:var(--ac-a)}
.tw-tile b{
display:block;margin-top:11px;font-size:14.6px;font-weight:620;line-height:1.3;
letter-spacing:-.008em;
}
.tw-tile em{
display:block;margin-top:7px;font-style:normal;font-size:12.5px;line-height:1.5;
color:var(--muted);font-weight:300;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.tw-m{
margin-top:auto;padding-top:11px;display:flex;align-items:center;gap:7px;
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.09em;
color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tw-m s{text-decoration:none;opacity:.55}
.tw-dot{
width:6px;height:6px;border-radius:50%;background:var(--ac);flex:0 0 auto;
box-shadow:0 0 0 3px var(--ac-a);
}
/* ---------------- empty state ---------------- */
.tw-empty{
margin:26px 0 0;padding:26px;border:1px dashed var(--line);border-radius:16px;text-align:center;
font-size:14.5px;color:var(--muted);font-weight:300;
}
.tw-clear{
appearance:none;border:0;background:transparent;font:inherit;font-size:14.5px;cursor:pointer;
color:var(--text);text-decoration:underline;text-underline-offset:3px;padding:0 0 0 4px;
}
.tw-clear:hover{color:var(--cyan)}
@media(prefers-reduced-motion:reduce){
.tw-board,.tw-head,.tw-tile,.tw-in,.tw-ink,.tw-n1{transition:none!important}
.tw-tile:hover .tw-in::after{animation:none}
.tw-board:hover .tw-tile:not(:hover) .tw-in{opacity:1}
}
/* =====================================================================
THE SUITE DIAL — twenty-two arc segments at the head of the full
suite section, one per solution, cycling on their own until someone
takes over. Appended 09/2026.
===================================================================== */
.su-top{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,396px);
gap:56px;align-items:center;
}
@media(max-width:1020px){
.su-top{grid-template-columns:1fr;gap:38px}
.su-aside{max-width:420px;margin:0 auto;width:100%}
}
.su-top .su-head h2{max-width:none}
.su-aside{display:flex;flex-direction:column;gap:18px}
/* ---------------- the dial ---------------- */
.sh-dial{
position:relative;width:100%;aspect-ratio:1;outline:0;
color:var(--ac,#7b5cf0); /* the glow gradient reads currentColor */
transition:color .5s ease;
}
.sh-dial:focus-visible{border-radius:50%;box-shadow:0 0 0 3px rgba(34,211,238,.45)}
.sh-svg{width:100%;height:100%;display:block;overflow:visible}
.sh-glow{transform-box:view-box;transform-origin:210px 210px;animation:shBreathe 5.4s ease-in-out infinite}
@keyframes shBreathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}
.sh-glow,.sh-inner,.sh-sweep{pointer-events:none}
.sh-inner{fill:rgba(6,6,11,.62);stroke:rgba(255,255,255,.07);stroke-width:1}
.sh-sweep{
fill:none;stroke:rgba(255,255,255,.12);stroke-width:1;stroke-dasharray:2 9;
transform-box:view-box;transform-origin:210px 210px;animation:spin 44s linear infinite;
}
.sh-seg{cursor:pointer;opacity:0}
.sh-dial.ready .sh-seg{animation:shIn .5s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 34ms) forwards}
@keyframes shIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.sh-seg{transform-box:view-box;transform-origin:210px 210px}
.sh-arc{
fill:var(--ac);fill-opacity:.20;stroke:var(--ac);stroke-opacity:.32;stroke-width:1;
transition:fill-opacity .34s ease,stroke-opacity .34s ease;
}
.sh-seg:hover .sh-arc{fill-opacity:.45;stroke-opacity:.7}
.sh-seg.on .sh-arc{fill-opacity:.92;stroke-opacity:1}
.sh-tip{
fill:var(--ac);opacity:0;transform-box:view-box;transform-origin:210px 210px;
transform:scale(.9);transition:opacity .3s ease,transform .34s cubic-bezier(.2,1.3,.4,1);
}
.sh-seg.on .sh-tip{opacity:.95;transform:none}
.sh-dot{
fill:var(--ac);opacity:0;transform-box:view-box;transform-origin:210px 210px;
transform:scale(.4);transition:opacity .3s ease,transform .4s cubic-bezier(.2,1.5,.4,1);
}
.sh-seg.on .sh-dot{opacity:1;transform:none}
/* legend hover narrows the dial to one practice area */
.sh-dial.dim .sh-seg:not(.lit) .sh-arc{fill-opacity:.07;stroke-opacity:.12}
.sh-dial.dim .sh-seg.lit .sh-arc{fill-opacity:.62;stroke-opacity:.9}
/* ---------------- the readout ---------------- */
.sh-read{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:46%;text-align:center;pointer-events:none;
}
.sh-n{
display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
letter-spacing:.2em;color:var(--ac);margin-bottom:8px;
}
.sh-read b{
display:block;font-size:15px;font-weight:640;line-height:1.26;letter-spacing:-.012em;
text-wrap:balance;
}
.sh-read em{
display:block;margin-top:8px;font-style:normal;font-size:11px;line-height:1.35;
font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.1em;
text-transform:uppercase;color:var(--dim);
}
.sh-m{
display:block;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
font-size:11.4px;line-height:1.4;color:var(--muted);font-weight:300;
}
.sh-read.swap{animation:shSwap .42s cubic-bezier(.2,.8,.2,1)}
@keyframes shSwap{
0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
40%{opacity:0;transform:translate(-50%,-50%) scale(.95)}
100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.sh-hint{
position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);white-space:nowrap;
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.6px;letter-spacing:.14em;
text-transform:uppercase;color:var(--dim);opacity:.75;
}
/* ---------------- legend ---------------- */
.sh-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.sh-legend .sh-lg:last-child{grid-column:1/-1;justify-content:center}
.sh-lg{
appearance:none;font:inherit;cursor:pointer;display:flex;align-items:center;gap:7px;min-width:0;
padding:7px 11px;border-radius:9px;border:1px solid var(--line);
background:rgba(255,255,255,.026);color:var(--muted);font-size:12.2px;
transition:color .24s,border-color .24s,background .24s,transform .24s;
}
.sh-lg i{width:8px;height:8px;border-radius:3px;background:var(--ac);flex:0 0 auto}
.sh-lg b{font-weight:450;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-lg em{margin-left:auto}
.sh-lg em{
font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
color:var(--dim);
}
.sh-lg:hover{color:var(--text);border-color:var(--ac-b);background:var(--ac-a);transform:translateY(-2px)}
/* ---------------- the catalog pill ---------------- */
.sh-dl{
display:flex;align-items:center;gap:13px;padding:12px 18px 12px 13px;border-radius:999px;
text-decoration:none;border:1px solid var(--line);position:relative;overflow:hidden;
background:linear-gradient(120deg,rgba(123,92,240,.14),rgba(34,211,238,.09));
transition:border-color .3s,transform .3s,box-shadow .34s;
}
.sh-dl::after{
content:"";position:absolute;top:0;bottom:0;width:38%;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);
transform:translateX(-180%);
}
.sh-dl:hover{
border-color:rgba(123,92,240,.55);transform:translateY(-2px);
box-shadow:0 20px 44px -26px rgba(123,92,240,.9);
}
.sh-dl:hover::after{animation:shSheen .9s cubic-bezier(.3,.7,.3,1)}
@keyframes shSheen{from{transform:translateX(-180%)}to{transform:translateX(340%)}}
.sh-ic{
flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.06);border:1px solid var(--line);
}
.sh-ic svg{
width:18px;height:18px;fill:none;stroke:#ff6b6b;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;
}
.sh-tx{min-width:0;flex:1}
.sh-tx b{display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--text)}
.sh-tx em{
display:block;margin-top:3px;font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}
.sh-arw{
flex:0 0 auto;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .26s,transform .3s;
}
.sh-dl:hover .sh-arw{stroke:var(--cyan);transform:translateY(2px)}
@media(prefers-reduced-motion:reduce){
.sh-glow,.sh-sweep{animation:none!important}
.sh-dial.ready .sh-seg{animation:none;opacity:1}
.sh-read.swap{animation:none}
.sh-dl:hover::after{animation:none}
.sh-arc,.sh-tip,.sh-dot,.sh-dl,.sh-lg{transition:none!important}
}
/* =====================================================================
HOW WE ENGAGE — the engagement arc, one per solution. Who convenes,
the work, what leaves, what it proves. No timeline anywhere.
===================================================================== */
.eg-head h2{max-width:18ch}
/* ---------------- the picker ---------------- */
.en-pick{
display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px;margin-top:38px;
padding:18px;border:1px solid var(--line);border-radius:18px;
background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
}
.en-run{min-width:0}
.en-run-l{
display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.4px;
letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:9px;
padding-bottom:7px;border-bottom:1px solid var(--line);position:relative;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.en-run-l::after{
content:"";position:absolute;left:0;bottom:-1px;width:26px;height:1px;background:var(--ac);
}
.en-run-c{display:flex;flex-wrap:wrap;gap:5px}
.en-chip{
appearance:none;cursor:pointer;font:inherit;
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.4px;letter-spacing:.04em;
width:33px;height:31px;display:grid;place-items:center;border-radius:8px;
border:1px solid var(--line);background:rgba(255,255,255,.028);color:var(--dim);
transition:color .24s,border-color .24s,background .24s,transform .24s;
}
.en-chip:hover{color:var(--text);border-color:var(--ac-b);background:var(--ac-a);transform:translateY(-2px)}
.en-chip.on{
color:#fff;border-color:var(--ac);background:var(--ac);
box-shadow:0 8px 22px -10px var(--ac);
}
/* ---------------- the arc ---------------- */
.en-stage{margin-top:18px}
.en-arc{
border:1px solid var(--line);border-radius:22px;overflow:hidden;
background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.014));
animation:enIn .46s cubic-bezier(.2,.8,.2,1);
}
@keyframes enIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.en-ah{padding:28px 30px 24px;border-bottom:1px solid var(--line);position:relative}
.en-ah::after{
content:"";position:absolute;left:0;bottom:-1px;width:104px;height:2px;background:var(--ac);
transform:scaleX(0);transform-origin:0 50%;animation:growX .7s cubic-bezier(.2,.8,.2,1) .1s forwards;
}
.en-meta{
margin:0 0 11px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.2px;letter-spacing:.17em;
text-transform:uppercase;color:var(--dim);
}
.en-area{color:var(--ac)}
.en-arc h3{margin:0;font-size:clamp(22px,2.7vw,31px);line-height:1.14;letter-spacing:-.022em;font-weight:690}
.en-lead{margin:11px 0 0;max-width:76ch;font-size:15.4px;line-height:1.62;color:var(--muted);font-weight:300}
.en-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.en-pill{
display:inline-flex;align-items:baseline;gap:8px;padding:8px 13px;border-radius:999px;
border:1px solid var(--line);background:rgba(255,255,255,.03);
font-size:13px;color:var(--text);font-weight:450;
}
.en-pill i{
font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.2px;
letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
}
/* ---------------- the four moves ---------------- */
.en-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1080px){.en-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:660px){.en-cols{grid-template-columns:1fr}}
.en-col{
padding:24px 22px 26px;border-right:1px solid var(--line);position:relative;min-width:0;
animation:enCol .5s cubic-bezier(.2,.8,.2,1) calc(var(--c) * 90ms) both;
}
@keyframes enCol{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.en-col:last-child{border-right:0}
@media(max-width:1080px){
.en-col:nth-child(2n){border-right:0}
.en-col:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:660px){
.en-col{border-right:0;border-bottom:1px solid var(--line)}
.en-col:last-child{border-bottom:0}
}
/* the arrow between the moves */
.en-col::after{
content:"";position:absolute;right:-5px;top:50%;width:9px;height:9px;z-index:2;
border-top:1.5px solid var(--ac);border-right:1.5px solid var(--ac);
transform:translateY(-50%) rotate(45deg);opacity:.55;
}
.en-col:last-child::after{display:none}
@media(max-width:1080px){.en-col:nth-child(2n)::after{display:none}}
@media(max-width:660px){.en-col::after{display:none}}
.en-ch{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.en-ch i{
font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
letter-spacing:.18em;color:var(--ac);
}
.en-ch b{display:block;margin-top:6px;font-size:15.4px;font-weight:640;letter-spacing:-.012em}
.en-ch em{
display:block;margin-top:5px;font-style:normal;font-size:12.2px;line-height:1.46;
color:var(--dim);font-weight:300;
}
.en-col ul,.en-col ol{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.en-col li{animation:enLi .44s cubic-bezier(.2,.8,.2,1) calc(var(--c) * 90ms + var(--d,0s) + .1s) both}
@keyframes enLi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.en-seats li{
font-size:13.4px;line-height:1.4;padding:9px 12px;border-radius:9px;color:var(--text);
border:1px solid var(--ac-b);background:var(--ac-a);font-weight:450;
}
.en-work li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:9px;align-items:start}
.en-work i{
font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.8px;
color:var(--ac);padding-top:3px;
}
.en-work span{font-size:13.4px;line-height:1.5;color:var(--muted);font-weight:300}
.en-gets li{padding-left:13px;border-left:2px solid var(--ac)}
.en-gets b{display:block;font-size:13.8px;font-weight:600;line-height:1.32}
.en-gets em{
display:block;margin-top:4px;font-style:normal;font-size:12.2px;line-height:1.46;
color:var(--muted);font-weight:300;
}
.en-proves li{
position:relative;padding:11px 12px 11px 30px;border-radius:10px;font-size:13.2px;line-height:1.46;
color:var(--text);font-weight:340;background:rgba(255,255,255,.035);border:1px solid var(--line);
}
.en-proves li::before{
content:"";position:absolute;left:11px;top:15px;width:9px;height:9px;border-radius:50%;
border:1.7px solid var(--ac);
}
.en-af{
display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
padding:20px 30px 22px;border-top:1px solid var(--line);background:rgba(0,0,0,.16);
}
.en-fits{margin:0;font-size:14px;line-height:1.55;color:var(--muted);font-weight:300;max-width:64ch}
.en-fits span{
display:inline-block;margin-right:10px;font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:9.6px;letter-spacing:.17em;text-transform:uppercase;color:var(--ac);
}
.en-open{
appearance:none;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
padding:11px 17px;border-radius:11px;border:1px solid var(--ac-b);background:var(--ac-a);
color:var(--text);font-size:13.4px;font-weight:520;flex:0 0 auto;
transition:background .26s,border-color .26s,transform .26s;
}
.en-open svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;transition:transform .26s}
.en-open:hover{background:rgba(255,255,255,.08);border-color:var(--ac);transform:translateY(-2px)}
.en-open:hover svg{transform:translateX(3px)}
/* ---------------- the commercial models (kept) ---------------- */
.eg-models{
display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:12px;margin-top:34px;
}
.eg-model{
padding:20px 20px 18px;border-radius:16px;border:1px solid var(--line);position:relative;
background:rgba(255,255,255,.024);overflow:hidden;
transition:border-color .3s,transform .3s,background .3s;
}
.eg-model::before{
content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ac);
transform:scaleX(0);transform-origin:0 50%;transition:transform .36s cubic-bezier(.2,.8,.2,1);
}
.eg-model:hover{border-color:var(--ac-b);transform:translateY(-3px);background:rgba(255,255,255,.045)}
.eg-model:hover::before{transform:scaleX(1)}
.eg-mn{
display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:8px;
border:1px solid var(--ac-b);background:var(--ac-a);color:var(--ac-2);
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;
}
.eg-model b{display:block;margin-top:13px;font-size:15px;font-weight:620;line-height:1.3}
.eg-model p{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--muted);font-weight:300}
.eg-model em{
display:block;margin-top:12px;font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:9.8px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
}
.eg-foot{margin-top:26px;max-width:86ch}
.eg-foot b{color:var(--text);font-weight:600}
@media(prefers-reduced-motion:reduce){
.en-arc,.en-col,.en-col li,.en-ah::after{animation:none!important;opacity:1!important;transform:none!important}
.en-chip,.en-open,.eg-model{transition:none!important}
}
/* =====================================================================
HOME HERO 01 — THE FULL-SERVICE AGENCY
Five practice areas on one delivery line, twenty capability chips
hanging off them, and a signal that runs the whole length. Color per
area arrives as --c / --cs / --cl on the column group, so the palette
lives in the Python that draws it rather than in five CSS rules.
===================================================================== */
.fs-hd rect{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.1);stroke-width:1}
.fs-ht{fill:#9a9cb4;font-size:9.6px;letter-spacing:.19em;text-anchor:middle}
.fs-bus{stroke:rgba(255,255,255,.09);stroke-width:2}
.fs-buslit{stroke:url(#fsg);stroke-width:2.4;stroke-linecap:round;
stroke-dasharray:492;stroke-dashoffset:492}
.hart.on .fs-buslit{animation:draw 1.5s cubic-bezier(.3,.7,.2,1) .15s forwards}
.fs-cap{stroke:rgba(255,255,255,.18);stroke-width:2;stroke-linecap:round}
.fs-packet{fill:#fff;opacity:0;filter:drop-shadow(0 0 7px rgba(34,211,238,.95))}
.hart.on .fs-packet{animation:fsRun 5.4s cubic-bezier(.45,0,.55,1) 1.5s infinite}
.hart.on .fs-packet.p2{animation-delay:4.2s}
.fs-sweep{opacity:0}
.hart.on .fs-sweep{animation:fsSweep 7s linear 1.6s infinite}
.fs-col .fs-hub{fill:var(--c);opacity:0;transform-box:fill-box;transform-origin:center}
.hart.on .fs-col .fs-hub{animation:pop .5s cubic-bezier(.2,1.4,.4,1) var(--d,0s) forwards}
.fs-col .fs-ring{fill:none;stroke:var(--c);stroke-width:1.4;opacity:0;
transform-box:fill-box;transform-origin:center}
.hart.on .fs-col .fs-ring{animation:fsRing 3.2s ease-out var(--d,0s) infinite}
.fs-col .fs-stem{stroke:var(--c);stroke-width:1.4;opacity:.55;
stroke-dasharray:44;stroke-dashoffset:44}
.hart.on .fs-col .fs-stem{animation:draw .6s ease var(--d,0s) forwards}
.fs-col .fs-al{fill:var(--cl);font-size:10px;letter-spacing:.14em;text-anchor:middle;
text-transform:uppercase;font-weight:600;opacity:0}
.hart.on .fs-col .fs-al{animation:fadeUp .55s ease var(--d,0s) both}
.fs-col .fs-chip{fill:rgba(255,255,255,.04);stroke:var(--cs);stroke-width:1}
.fs-ct{fill:#c9cce0;font-size:9.8px;text-anchor:middle;letter-spacing:.015em}
.fs-cw{opacity:0}
.hart.on .fs-cw{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.fs-col:hover .fs-chip{fill:rgba(255,255,255,.1)}
.fs-col:hover .fs-ring{stroke-width:1.8}
.fs-proof rect{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.1);stroke-width:1}
.fs-pt{fill:#9a9cb4;font-size:9px;letter-spacing:.15em;text-anchor:middle}
.fs-proof{opacity:0}
.hart.on .fs-proof{animation:fadeUp .6s ease var(--d,0s) both}
.fs-proof:hover rect{fill:rgba(255,255,255,.085)}
@keyframes fsRun{0%{transform:translateX(0);opacity:0}
6%{opacity:1}88%{opacity:1}100%{transform:translateX(492px);opacity:0}}
@keyframes fsRing{0%{opacity:.6;transform:scale(.55)}
70%{opacity:0;transform:scale(2.1)}100%{opacity:0;transform:scale(2.1)}}
@keyframes fsSweep{0%{transform:translateX(0);opacity:0}
10%{opacity:1}90%{opacity:1}100%{transform:translateX(620px);opacity:0}}
@media(prefers-reduced-motion:reduce){
.fs-hub,.fs-al,.fs-cw,.fs-proof{opacity:1!important;transform:none!important}
.fs-buslit,.fs-stem{stroke-dashoffset:0!important}
.fs-packet,.fs-sweep,.fs-ring{display:none}
}
/* =====================================================================
ADD-ONS ON THE SOLUTIONS PAGE - the outer dial ring and the band that
carries the eight bundles under the suite console.
===================================================================== */
.sh-ao{cursor:pointer}
.sh-ao .sh-arc{fill-opacity:.13;stroke-opacity:.24}
.sh-ao:hover .sh-arc{fill-opacity:.40;stroke-opacity:.68}
.sh-ao.on .sh-arc{fill-opacity:.82;stroke-opacity:1}
.sh-dial.dim .sh-ao:not(.lit) .sh-arc{fill-opacity:.05;stroke-opacity:.10}
.sh-legend .sh-lg:nth-last-child(2){grid-column:1/-1;justify-content:center}
.sh-lgao{--ac:#22d3ee}
.sh-lgao i{background:linear-gradient(135deg,#7b5cf0,#22d3ee 55%,#f59e0b)}
/* ---------------- the add-on band ---------------- */
.su-ao-band{margin-top:46px;padding-top:40px;border-top:1px solid var(--line)}
.su-aoh{display:flex;gap:30px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.su-aoh > div{max-width:62ch}
.su-aoh h3{margin:14px 0 0;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.025em;line-height:1.2}
.su-aoh p{margin:12px 0 0;font-size:14.8px;line-height:1.66;font-weight:300;color:var(--muted)}
.su-aoall{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none}
.su-aoall svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.su-aogrid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:12px;margin-top:28px;
}
.su-aot{
position:relative;display:flex;flex-direction:column;gap:9px;padding:17px 17px 15px;
border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.026);
text-decoration:none;color:var(--text);overflow:hidden;
transition:border-color .26s,background .26s,transform .26s;
}
.su-aot::before{
content:"";position:absolute;inset:0 0 auto 0;height:2px;
background:linear-gradient(90deg,var(--ac),var(--ac2));opacity:.7;
}
.su-aot:hover{border-color:var(--ac);background:rgba(255,255,255,.05);transform:translateY(-3px)}
.su-aoseat{
display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:9.8px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.su-aoseat i{width:7px;height:7px;border-radius:2px;
background:linear-gradient(135deg,var(--ac),var(--ac2));flex:0 0 auto}
.su-aot b{font-size:15.4px;font-weight:600;letter-spacing:-.015em;line-height:1.28}
.su-aot em{font-style:normal;font-size:13.4px;line-height:1.55;font-weight:300;color:var(--muted)}
.su-aom{
display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:11px;
border-top:1px solid var(--line);font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
.su-aom svg{width:15px;height:15px;margin-left:auto;fill:none;stroke:var(--ac);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;transition:transform .26s}
.su-aot:hover .su-aom svg{transform:translateX(4px)}
@media(max-width:620px){
.su-ao-band{margin-top:36px;padding-top:30px}
.su-aogrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
.su-aot,.su-aom svg{transition:none!important}
}
/* ===== header: Explore the Toolkit (see build.toolkit_video_nav) ===== */
.nav-cta .nav-tkv{border-color:rgba(34,211,238,.45)}
.nav-cta .nav-tkv:hover{border-color:rgba(34,211,238,.85)}
.btn .tkv-play{fill:currentColor;stroke:none}
@media (max-width:1180px){.nav-cta .nav-tkv{font-size:0;gap:0;padding-left:10px;padding-right:10px}
.nav-cta .nav-tkv svg{margin:0}}
/* home page also carries Intro, so it needs the compact button sooner */
@media (max-width:1439px){.nav-cta [data-fx-open] ~ .nav-tkv{font-size:0;gap:0;padding-left:10px;padding-right:10px}
.nav-cta [data-fx-open] ~ .nav-tkv svg{margin:0}}
@media (max-width:1100px) and (min-width:861px){.nav-cta .btn[data-fx-open]{font-size:0;gap:0;padding-left:10px;padding-right:10px}
.nav-cta .btn[data-fx-open] svg{margin:0}}
/* ---------- header with the three areas (10/2026) ----------
Seven top-level items now: Home, the three areas, Solutions, Resources,
About Us. The header gets a wider track than the page body, tightens in
steps, and hands over to the drawer before anything can overflow. */
.nav .wrap.nav-in{max-width:1400px}
.links a,.links .sub-toggle{padding-left:11px;padding-right:11px}
@media (max-width:1600px){
.nav-cta .nav-tkv,.nav-cta [data-fx-open]{font-size:0;gap:0;padding-left:10px;padding-right:10px}
.nav-cta .nav-tkv svg,.nav-cta [data-fx-open] svg{margin:0}
}
@media (max-width:1480px){
.mark img{height:84px}
.links a,.links .sub-toggle{font-size:13.5px;padding-left:8px;padding-right:8px}
}
@media (max-width:1300px){
.links a,.links .sub-toggle{font-size:13px;padding-left:7px;padding-right:7px}
.nav-cta{gap:7px}
}
@media (max-width:1230px){
.links{display:none}
.burger{display:grid}
}
/* solutions: the four suite stats sit on one row */
.su-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:760px){.su-stats{grid-template-columns:1fr 1fr}}
