/* ============================================================
   BUILT AI: shared design system
   Used by every page. Indigo + ink, editorial, institutional.
   ============================================================ */
:root{
  --ink:#0f1424;--ink-2:#2a3142;--ink-3:#525a70;--ink-4:#6b7285;
  --indigo:#4b2fd6;--indigo-2:#5b3fe6;--indigo-deep:#2a1a6e;--indigo-deeper:#1e1352;
  --indigo-wash:#f4f2fe;--indigo-line:#e6e1fb;
  --red:#e0322b;--green:#1ca672;--amber:#d98a1a;
  --paper:#ffffff;--paper-2:#fafafb;--line:#e8e9ee;--line-2:#eef0f4;
  --shadow-sm:0 1px 2px rgba(15,20,36,.04),0 1px 3px rgba(15,20,36,.06);
  --shadow-md:0 4px 16px rgba(15,20,36,.06),0 12px 40px rgba(15,20,36,.07);
  --shadow-lg:0 8px 30px rgba(15,20,36,.08),0 30px 80px rgba(15,20,36,.10);
  --shadow-indigo:0 20px 60px rgba(75,47,214,.18);
  --max:1240px;--measure:680px;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:'Newsreader',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--indigo);color:#fff}
/* Reduced motion: keep content visible but DO NOT kill all motion globally.
   We only neutralize large scroll-translations; gentle/ambient motion stays. */
@media (prefers-reduced-motion:reduce) and (min-width:100000px){
  .reveal{opacity:1!important;transform:none!important;transition:opacity .4s ease!important}
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.narrow{max-width:880px;margin:0 auto;padding:0 32px}
section{position:relative}
.sec-pad{padding:104px 0}
@media(max-width:768px){.sec-pad{padding:64px 0}.wrap,.narrow{padding:0 20px}}

/* scroll progress */
.scroll-bar{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--indigo),var(--indigo-2));z-index:1100;width:0%;transition:width .1s linear}

/* ---------- typographic atoms ---------- */
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);font-weight:600;display:flex;align-items:center;gap:10px}
.eyebrow.dim{color:var(--ink-4)}
.section-marker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;row-gap:6px;padding-bottom:18px;margin-bottom:56px;border-bottom:1px solid var(--line)}
.section-marker .left{color:var(--ink-3)}
.section-marker .left b{color:var(--indigo);font-weight:600}
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.06;font-weight:800}
.h1{font-size:clamp(34px,5vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.h2{font-size:clamp(28px,3.8vw,48px);font-weight:800;letter-spacing:-.028em;line-height:1.05}
.h3{font-size:clamp(21px,2.4vw,30px);font-weight:700;letter-spacing:-.02em}
.lead{font-size:clamp(18px,2vw,23px);line-height:1.5;color:var(--ink-3);font-weight:400}
.indigo{color:var(--indigo)}
.serif{font-family:var(--serif)}

/* ---------- long-form prose ---------- */
.prose{max-width:var(--measure)}
.prose p{font-size:18px;line-height:1.72;color:var(--ink-2);margin-bottom:24px}
.prose p.big{font-size:21px;line-height:1.6}
.prose h2{font-size:clamp(26px,3vw,38px);margin:60px 0 20px;letter-spacing:-.02em}
.prose h3{font-size:clamp(20px,2.2vw,26px);margin:44px 0 14px;letter-spacing:-.015em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 24px;padding-left:0;list-style:none}
.prose ul li,.prose ol li{font-size:18px;line-height:1.65;color:var(--ink-2);margin-bottom:14px;padding-left:30px;position:relative}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:2px;background:var(--indigo)}
.prose ol{counter-reset:li}
.prose ol li{counter-increment:li}
.prose ol li::before{content:counter(li);position:absolute;left:0;top:1px;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--indigo)}
.prose b,.prose strong{color:var(--ink);font-weight:700}
.prose a.link{color:var(--indigo);font-weight:600;border-bottom:1px solid var(--indigo-line);transition:border-color .2s}
.prose a.link:hover{border-color:var(--indigo)}
.prose .pull{font-family:var(--serif);font-style:italic;font-size:clamp(23px,2.8vw,32px);line-height:1.35;color:var(--ink);margin:48px 0;padding-left:26px;border-left:3px solid var(--indigo)}
.prose .callout{background:var(--indigo-wash);border:1px solid var(--indigo-line);border-radius:14px;padding:26px 28px;margin:36px 0}
.prose .callout p:last-child{margin-bottom:0}
.prose .callout .ct{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);font-weight:600;margin-bottom:12px}
.prose figure{margin:40px 0}
.prose figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-4);margin-top:12px;text-align:center}
.prose hr{border:none;border-top:1px solid var(--line);margin:48px 0}

/* ---------- buttons ---------- */
.btn{font-family:var(--sans);font-weight:600;font-size:14.5px;padding:10px 20px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,color .2s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn-ghost{color:var(--ink-2);background:transparent;border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-4);color:var(--ink)}
.btn-primary{background:var(--indigo);color:#fff;box-shadow:0 6px 18px rgba(75,47,214,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(75,47,214,.4);background:var(--indigo-2)}
.btn-white{background:#fff;color:var(--indigo-deeper);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.btn-outline-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.btn-outline-w:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-lg{padding:15px 28px;font-size:16px;border-radius:12px}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.scrolled{border-bottom:1px solid var(--line);box-shadow:0 1px 20px rgba(15,20,36,.03)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 32px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.brand .logo{width:30px;height:30px;border-radius:8px;background:#5c3fdd;display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 12px rgba(75,47,214,.3);overflow:hidden}
.brand .logo img{width:100%;height:100%;object-fit:cover;display:block}
.brand .logo svg{width:17px;height:17px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links .navitem{position:relative}
.nav-links a{font-size:14.5px;color:var(--ink-3);font-weight:500;transition:color .2s;cursor:pointer;display:flex;align-items:center;gap:5px}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a .chev{width:9px;height:9px;opacity:.6}
.dropdown{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:10px;width:300px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:50}
.navitem:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dropdown a{display:block;padding:11px 13px;border-radius:10px;transition:background .15s}
.dropdown a:hover{background:var(--indigo-wash)}
.dropdown a .dt{font-weight:600;font-size:14px;color:var(--ink);display:block}
.dropdown a .dd{font-size:12.5px;color:var(--ink-4);margin-top:2px}
.nav-cta{display:flex;gap:12px;align-items:center}
.nav-burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.nav-burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
@media(max-width:1080px){.nav-links{display:none}.nav-burger{display:flex}.nav-cta .btn-ghost{display:none}}
.mobile-menu{position:fixed;inset:68px 0 0 0;background:rgba(8,10,18,.97);z-index:999;transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s linear .35s;padding:12px 24px 40px;display:flex;flex-direction:column;overflow-y:auto}
.mobile-menu.open{transform:translateX(0);visibility:visible;transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s}
.mobile-menu a{font-size:17px;font-weight:500;color:#fff;padding:13px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-menu .mm-group{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:20px 6px 6px}
.mobile-menu a.sub{font-size:17px;font-weight:500;padding-left:6px;color:#fff}
.mobile-menu .btn{margin-top:22px;justify-content:center;border-bottom:none}
.nav-burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.on span:nth-child(2){opacity:0}
.nav-burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- page hero (interior) ---------- */
.page-hero{padding:130px 0 56px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero.dark{background:var(--indigo-deeper);color:#fff;border-bottom:none}
.page-hero-grid{position:absolute;inset:0;z-index:0;background-image:radial-gradient(circle at 1px 1px, rgba(75,47,214,.10) 1px, transparent 0);background-size:30px 30px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 75% 20%, #000, transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 75% 20%, #000, transparent 75%);opacity:.8}
.page-hero.dark .page-hero-grid{background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0)}
.page-hero-inner{position:relative;z-index:2}
.breadcrumb{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:22px;display:flex;gap:10px;align-items:center}
.page-hero.dark .breadcrumb{color:rgba(255,255,255,.5)}
.breadcrumb a:hover{color:var(--indigo)}
.breadcrumb .sep{opacity:.5}
.page-hero h1{margin-bottom:24px;max-width:18ch}
.page-hero .lead{max-width:60ch}
.page-hero.dark .lead{color:rgba(255,255,255,.65)}

/* ---------- reusable cards ---------- */
.card{border:1px solid var(--line);border-radius:16px;padding:28px;background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--indigo-line)}
.stat-strip{display:grid;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-strip .st{padding:30px 24px;border-right:1px solid var(--line)}
.stat-strip .st:last-child{border-right:none}
.stat-strip .st .v{font-size:clamp(34px,4.4vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat-strip .st .v .u{font-size:.42em;color:var(--indigo);font-weight:700}
.stat-strip .st .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-top:11px}

/* before/after table */
.cmp-table{width:100%;border-collapse:collapse;margin:8px 0}
.cmp-table th,.cmp-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top}
.cmp-table thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
.cmp-table thead th.us{color:var(--indigo)}
.cmp-table td:first-child{font-weight:600;color:var(--ink)}
.cmp-table .col-old{color:var(--ink-4)}
.cmp-table .col-us{color:var(--ink-2);background:var(--indigo-wash)}
.cmp-table .col-us b{color:var(--indigo)}

/* comparison table: horizontal scroll on phones */
@media(max-width:760px){.cmp-table{display:block;overflow-x:auto}}

/* numbered feature blocks */
.feat-list{border-top:1px solid var(--line)}
.feat-list .f{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line)}
.feat-list .f .n{font-family:var(--mono);font-size:14px;color:var(--indigo);font-weight:600;padding-top:4px}
.feat-list .f h3{font-size:21px;font-weight:700;margin-bottom:8px;letter-spacing:-.02em}
.feat-list .f p{font-size:16px;color:var(--ink-3);line-height:1.6;max-width:62ch}

/* CTA band */
.cta{background:var(--indigo-deeper);color:#fff;padding:100px 0;position:relative;overflow:hidden}
.cta-grid{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);background-size:34px 34px;opacity:.5}
.cta-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(120,90,255,.25),transparent 65%);filter:blur(80px);top:-220px;left:50%;transform:translateX(-50%)}
.cta-inner{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto}
.cta-inner h2{font-size:clamp(34px,5vw,62px);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;margin-bottom:20px}
.cta-inner p{font-size:clamp(17px,2vw,20px);color:rgba(255,255,255,.62);line-height:1.5;margin-bottom:32px;max-width:54ch;margin-left:auto;margin-right:auto}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
.footer{background:var(--ink);color:#fff;padding:70px 0 40px}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand .brand{color:#fff;margin-bottom:16px}
.footer-brand p{color:rgba(255,255,255,.5);font-size:14px;line-height:1.55;max-width:38ch}
.footer-col .ft{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:18px}
.footer-col a{display:block;color:rgba(255,255,255,.7);font-size:14px;margin-bottom:12px;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding-top:30px;flex-wrap:wrap;gap:16px}
.footer-bot .copy,.footer-bot .loc{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.4)}
.footer-bot .copy a{color:rgba(255,255,255,.6);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);transition:color .2s,border-color .2s}
.footer-bot .copy a:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.footer-bot .loc{letter-spacing:.1em;text-transform:uppercase}
@media(max-width:760px){.footer-top{grid-template-columns:1fr 1fr;gap:32px}}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* utility */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.mono-label{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);font-weight:600}
.tag-row{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:11px;color:var(--ink-4);padding:4px 10px;border:1px solid var(--line);border-radius:20px}

/* ============================================================
   FIGURE / GRAPHICS SYSTEM: drop-in visuals for any page
   ============================================================ */
/* figure shell used inside .prose and standalone */
.fig{margin:44px 0;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}
.fig.flush{border:none;border-radius:0;box-shadow:none;background:transparent}
.fig-head{padding:18px 24px 0}
.fig-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);font-weight:500;margin-bottom:8px}
.fig-title{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.3}
.fig-body{padding:22px 24px 24px}
.fig-cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-4);padding:0 24px 20px;line-height:1.5}
.prose .fig{max-width:none}
.prose .fig p{margin-bottom:0}
@media(max-width:600px){.fig-head{padding:16px 18px 0}.fig-body{padding:18px 18px 20px}.fig-cap{padding:0 18px 16px}}

/* dark variant */
.fig.dark{background:linear-gradient(155deg,var(--indigo-deep),var(--indigo-deeper));border-color:transparent;color:#fff}
.fig.dark .fig-eyebrow{color:#b9a8ff}
.fig.dark .fig-title{color:#fff}
.fig.dark .fig-cap{color:rgba(255,255,255,.5)}

/* --- horizontal flow / pipeline graphic --- */
.flow-graphic{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;overflow-x:auto}
.flow-step{flex:1;min-width:130px;padding:18px 16px;position:relative;display:flex;flex-direction:column;gap:6px}
.flow-step:not(:last-child)::after{content:"";position:absolute;right:-1px;top:18px;bottom:18px;width:1px;background:var(--line)}
.flow-step .fs-n{width:30px;height:30px;border-radius:9px;background:var(--indigo-wash);border:1px solid var(--indigo-line);display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--indigo);margin-bottom:8px}
.flow-step .fs-t{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.flow-step .fs-d{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.flow-step .fs-arrow{position:absolute;right:-7px;top:26px;z-index:2;color:var(--indigo);background:#fff;font-size:13px;line-height:1}
.fig.dark .flow-step .fs-n{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.fig.dark .flow-step .fs-t{color:#fff}
.fig.dark .flow-step .fs-d{color:rgba(255,255,255,.6)}
.fig.dark .flow-step:not(:last-child)::after{background:rgba(255,255,255,.14)}
@media(max-width:600px){.flow-graphic{flex-direction:column}.flow-step:not(:last-child)::after{right:18px;left:18px;top:auto;bottom:-1px;width:auto;height:1px}}

/* --- stacked layers diagram (e.g. document hierarchy) --- */
.layers{display:flex;flex-direction:column;gap:8px}
.layer{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--line);border-radius:11px;background:#fff;position:relative;transition:transform .2s,border-color .2s}
.layer:hover{transform:translateX(4px);border-color:var(--indigo-line)}
.layer .l-rank{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);width:64px;flex-shrink:0}
.layer .l-main{flex:1}
.layer .l-t{font-size:14px;font-weight:700;color:var(--ink)}
.layer .l-d{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.layer .l-badge{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:20px;flex-shrink:0}
.layer.wins{border-color:var(--indigo);background:var(--indigo-wash)}
.layer.wins .l-badge{background:var(--indigo);color:#fff}
.layer .l-badge.base{background:#eef0f4;color:var(--ink-4)}
.layer .l-badge.over{background:#fef5e7;color:var(--amber)}

/* --- bar comparison (before/after) --- */
.bars{display:flex;flex-direction:column;gap:18px}
.bar-row{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.bar-row .br-label{font-size:13px;font-weight:600;color:var(--ink-2)}
.bar-track{position:relative;height:34px;display:flex;align-items:center}
.bar-fill{height:34px;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-family:var(--mono);font-size:12px;font-weight:600;color:#fff;min-width:max-content;transition:width 1s cubic-bezier(.16,1,.3,1)}
.bar-fill.old{background:var(--ink-4)}
.bar-fill.new{background:var(--indigo)}
.bars.animate .bar-fill{width:0!important}
.bars.in .bar-fill{width:var(--w)!important}
@media(max-width:600px){.bar-row{grid-template-columns:1fr;gap:6px}.bar-row .br-label{margin-bottom:2px}}

/* --- donut / ratio stat --- */
.ratio-graphic{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.donut{--p:37;--size:128px;width:var(--size);height:var(--size);border-radius:50%;flex-shrink:0;background:conic-gradient(var(--indigo) calc(var(--p)*1%), var(--line-2) 0);display:grid;place-items:center;position:relative}
.donut::before{content:"";position:absolute;inset:14px;background:#fff;border-radius:50%}
.donut .d-val{position:relative;z-index:2;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.donut .d-val span{font-size:14px;color:var(--indigo)}
.ratio-text{flex:1;min-width:200px}
.ratio-text .rt-t{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.ratio-text .rt-d{font-size:14px;color:var(--ink-3);line-height:1.55}

/* --- timeline (vertical) --- */
.tl{display:flex;flex-direction:column}
.tl-ev{display:grid;grid-template-columns:auto 1fr;gap:16px;padding-bottom:22px;position:relative}
.tl-ev:not(:last-child)::after{content:"";position:absolute;left:9px;top:22px;bottom:0;width:2px;background:var(--line)}
.tl-ev .tl-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--indigo);background:#fff;z-index:2;display:grid;place-items:center}
.tl-ev .tl-dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--indigo)}
.tl-ev.done .tl-dot{background:var(--indigo)}
.tl-ev.done .tl-dot::after{background:#fff}
.tl-ev.flag .tl-dot{border-color:var(--red)}
.tl-ev.flag .tl-dot::after{background:var(--red)}
.tl-ev .tl-t{font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.tl-ev .tl-d{font-size:13px;color:var(--ink-3);line-height:1.5;margin-top:3px}
.tl-ev .tl-d code{font-family:var(--mono);font-size:11.5px;background:#f5f5f8;padding:1px 6px;border-radius:4px;color:var(--ink)}

/* --- inline stat tiles (3-4 up) --- */
.stat-tiles{display:grid;gap:14px}
.stat-tile{border:1px solid var(--line);border-radius:13px;padding:20px;background:#fff}
.stat-tile .v{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.stat-tile .v .u{font-size:.45em;color:var(--indigo);font-weight:700}
.stat-tile .l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-top:10px}
.stat-tile .d{font-size:13px;color:var(--ink-3);line-height:1.5;margin-top:8px}


/* --- two-column "vs" diagram --- */
.vs-graphic{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch}
.vs-side{padding:22px 22px}
.vs-side.bad{background:var(--paper-2)}
.vs-side.good{background:var(--indigo-wash)}
.vs-side .vs-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:14px}
.vs-side.bad .vs-h{color:var(--ink-4)}
.vs-side.good .vs-h{color:var(--indigo)}
.vs-side ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.vs-side li{font-size:13.5px;line-height:1.45;padding-left:24px;position:relative;color:var(--ink-2)}
.vs-side.bad li::before{content:"\00d7";position:absolute;left:4px;top:-1px;color:var(--ink-4);font-weight:700;font-size:16px;width:auto;height:auto;background:none;border-radius:0}
.vs-side.good li::before{content:"";position:absolute;left:5px;top:6px;width:9px;height:5px;border-left:2px solid var(--indigo);border-bottom:2px solid var(--indigo);transform:rotate(-45deg);background:none;border-radius:0}
.vs-divider{width:48px;display:grid;place-items:center;background:#fff;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.vs-divider span{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-4);letter-spacing:.08em}
@media(max-width:600px){.vs-graphic{grid-template-columns:1fr}.vs-divider{width:auto;height:40px;border-left:none;border-right:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}}

/* --- mini node graph (inputs->core->outputs) reusable --- */
.minigraph{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;padding:36px 30px;border-radius:18px;color:var(--indigo);background:radial-gradient(130% 130% at 50% 0%,#f7f5ff 0%,#fdfcff 62%,#fff 100%);border:1px solid var(--indigo-line);box-shadow:inset 0 1px 0 #fff,0 18px 50px rgba(75,47,214,.1);overflow:hidden}
.minigraph::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(75,47,214,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(75,47,214,.06) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(120% 115% at 50% 42%,#000 30%,transparent 82%);mask-image:radial-gradient(120% 115% at 50% 42%,#000 30%,transparent 82%)}
.minigraph .mg-col{display:flex;flex-direction:column;gap:11px;position:relative;z-index:2}
.minigraph .mg-node{position:relative;border:1px solid var(--indigo-line);border-radius:10px;padding:11px 14px 11px 34px;background:linear-gradient(180deg,#fff,#faf9ff);font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:left;box-shadow:0 1px 2px rgba(15,20,36,.05);transition:border-color .2s,transform .2s,box-shadow .2s}
.minigraph .mg-node::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--indigo);box-shadow:0 0 0 3px rgba(75,47,214,.13),0 0 8px rgba(75,47,214,.5)}
.minigraph .mg-node:hover{border-color:var(--indigo);transform:translateX(2px);box-shadow:0 4px 16px rgba(75,47,214,.14)}
.minigraph .mg-col.out .mg-node{padding:11px 34px 11px 14px;text-align:right}
.minigraph .mg-col.out .mg-node::before{left:auto;right:14px}
.minigraph .mg-core{position:relative;z-index:3;width:162px;height:162px;border-radius:32px;background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.6),transparent 44%),radial-gradient(circle at 68% 80%,#8a70ff 0%,#5b3fe6 50%,#4322c4 100%);color:#fff;display:grid;place-items:center;text-align:center;padding:18px;font-size:13.5px;font-weight:800;line-height:1.16;letter-spacing:-.01em;text-shadow:0 1px 10px rgba(30,12,90,.55);box-shadow:0 0 0 1px rgba(255,255,255,.28),0 22px 60px rgba(75,47,214,.5),inset 0 2px 14px rgba(255,255,255,.5),inset 0 -14px 34px rgba(40,18,120,.55);animation:corePulse 3.6s ease-in-out infinite}
.minigraph .mg-core::before{content:"";position:absolute;inset:-24px;border-radius:50%;z-index:-1;background:conic-gradient(from 0deg,rgba(124,99,255,0),rgba(168,148,255,.8) 18%,rgba(124,99,255,0) 40%,rgba(124,99,255,.75) 60%,rgba(124,99,255,0) 84%,rgba(168,148,255,.65));-webkit-mask:radial-gradient(closest-side,transparent 64%,#000 67%);mask:radial-gradient(closest-side,transparent 64%,#000 67%);filter:blur(6px);animation:coreSpin 9s linear infinite}
.minigraph .mg-core::after{content:"";position:absolute;inset:-10px;border-radius:42px;border:1.5px solid rgba(150,128,255,.5);z-index:-1;animation:coreRing 3s ease-out infinite}
@keyframes coreRing{0%{transform:scale(.92);opacity:.9}70%{opacity:0}100%{transform:scale(1.24);opacity:0}}
@keyframes coreSpin{to{transform:rotate(360deg)}}
@keyframes corePulse{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.28),0 22px 60px rgba(75,47,214,.5),inset 0 2px 14px rgba(255,255,255,.5),inset 0 -14px 34px rgba(40,18,120,.55)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.42),0 26px 82px rgba(99,70,255,.72),inset 0 2px 14px rgba(255,255,255,.55),inset 0 -14px 34px rgba(40,18,120,.5)}}
.minigraph .mg-col.out{text-align:right}
/* narrow-container placements stack vertically (a viewport media query can't see the container's own width) */
.minigraph.stacked{grid-template-columns:1fr;gap:14px}
.minigraph.stacked .mg-core{order:-1;margin:0 auto}
.minigraph.stacked .mg-col.out .mg-node{padding:11px 14px 11px 34px;text-align:left}
.minigraph.stacked .mg-col.out .mg-node::before{left:14px;right:auto}
.minigraph.stacked .mg-flow{display:none}
@media(max-width:600px){.minigraph{grid-template-columns:1fr;gap:14px;padding:24px 16px}.minigraph .mg-core{order:-1;margin:0 auto}.minigraph .mg-col.out .mg-node{padding:11px 14px 11px 34px;text-align:left}.minigraph .mg-col.out .mg-node::before{left:14px;right:auto}}

/* SVG line chart container */
.chart-fig{width:100%}
.chart-fig svg{width:100%;height:auto;display:block}

/* ============================================================
   ALWAYS-ON AMBIENT MOTION (does not depend on scroll)
   Makes the page visibly alive the moment it loads.
   ============================================================ */
/* drifting hero glows */
.hero2-glow{animation:drift 14s ease-in-out infinite alternate}
.hero2-glow.a{animation-duration:16s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,22px) scale(1.08)}100%{transform:translate(18px,-14px) scale(.96)}}
/* gentle float on the hero product frame */
.hero2-visual .ui-frame{animation:floatUI .9s cubic-bezier(.16,1,.3,1) both, hoverFloat 7s ease-in-out 1s infinite}
@keyframes hoverFloat{0%,100%{transform:perspective(1800px) rotateY(-7deg) rotateX(2deg) translateY(0)}50%{transform:perspective(1800px) rotateY(-7deg) rotateX(2deg) translateY(-12px)}}
@media(max-width:1080px){.hero2-visual .ui-frame{animation:none}}
/* live dot pulse already exists; add a subtle ring */
.pill .dot{position:relative}
/* nav brand logo subtle breathing glow */
.brand .logo{animation:logoGlow 4.5s ease-in-out infinite}
@keyframes logoGlow{0%,100%{box-shadow:0 4px 12px rgba(75,47,214,.3)}50%{box-shadow:0 4px 22px rgba(75,47,214,.55)}}
/* mock dashboard: the "live" reconciled bar gently pulses, and a KPI ticks */
.mock-h .live{animation:liveBreath 3s ease-in-out infinite}
@keyframes liveBreath{0%,100%{opacity:1}50%{opacity:.55}}
/* animated count handled in JS; this makes any .tick element shimmer */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* respect reduced motion for the AMBIENT loops only */
/* ambient/decorative motion is intentionally kept alive; only large scroll-translations are reduced (see .reveal above) */

/* ============================================================
   LAYOUT SYSTEM v2: breaks the centered-slide rhythm
   Asymmetric splits, sticky visuals, full-bleed bands,
   article reading layout, product UI frames.
   ============================================================ */

/* full-bleed: section background spans the viewport, content stays in grid */
.bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.band{position:relative}
.band.ink{background:var(--ink);color:#fff}
.band.indigo{background:var(--indigo-deeper);color:#fff}
.band.wash{background:var(--indigo-wash)}
.band.paper2{background:var(--paper-2)}
.band-pad{padding:96px 0}
@media(max-width:768px){.band-pad{padding:60px 0}}

/* sticky split: a visual that pins while text scrolls past it (asymmetric, off-center) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:start}
.split.text-right{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.split.text-right .split-text{order:2}
.split.text-right .split-visual{order:1}
.split-visual{position:sticky;top:104px}
.split-text > * + *{margin-top:0}
.split-text .block{padding:14vh 0;min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.split-text .block:first-child{padding-top:4vh}
.split-text .block:last-child{padding-bottom:4vh}
.split-text .block .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);font-weight:500;margin-bottom:16px}
.split-text .block h3{font-size:clamp(24px,2.8vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.08;margin-bottom:16px}
.split-text .block p{font-size:17px;line-height:1.6;color:var(--ink-3);max-width:46ch}
.split-text .block p + p{margin-top:14px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}.split-visual{position:static;top:auto}.split.text-right .split-text{order:1}.split.text-right .split-visual{order:2}.split-text .block{padding:24px 0;min-height:0;display:block}}

/* offset feature: big number/visual on one side, copy on the other, alternating */
.offset{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.offset>*{min-width:0}
.offset.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr)}
.offset.media-lg{grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr)}
.offset.flip .offset-media{order:2}
.offset.flip .offset-copy{order:1}
@media(max-width:880px){.offset,.offset.flip,.offset.media-lg{grid-template-columns:1fr;gap:28px}.offset.flip .offset-media{order:1}.offset.flip .offset-copy{order:2}}

/* asymmetric section head: eyebrow + headline left, supporting copy right (not centered) */
.head-split{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start;margin-bottom:48px}
.head-split .hs-title h2{margin:0}
.head-split .hs-aside{padding-bottom:0;padding-left:22px;border-left:2px solid var(--indigo-line)}
.band.ink .head-split .hs-aside,.band.indigo .head-split .hs-aside{border-left-color:rgba(255,255,255,.22)}
@media(max-width:820px){.head-split{grid-template-columns:1fr;gap:16px}.head-split .hs-aside{padding-left:16px}}

/* ribbon: edge-to-edge horizontal scroll of cards/logos for rhythm */
.ribbon{display:flex;gap:18px;overflow-x:auto;padding:4px 0 18px;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}
.ribbon::-webkit-scrollbar{display:none}
.ribbon > *{scroll-snap-align:start;flex:0 0 auto}

/* ============ PRODUCT UI FRAME (real browser/app chrome) ============ */
.ui-frame{border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.band.ink .ui-frame,.band.indigo .ui-frame{box-shadow:0 30px 90px rgba(0,0,0,.45);border-color:rgba(255,255,255,.1)}
.ui-bar{height:40px;background:#f7f7f9;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 14px}
.ui-bar .dots{display:flex;gap:7px}
.ui-bar .dots i{width:11px;height:11px;border-radius:50%;display:block}
.ui-bar .dots i:nth-child(1){background:#ff5f57}.ui-bar .dots i:nth-child(2){background:#febc2e}.ui-bar .dots i:nth-child(3){background:#28c840}
.ui-bar .ui-url{flex:1;max-width:340px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:7px;height:23px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.ui-bar .ui-url svg{width:11px;height:11px;opacity:.6}
.ui-frame.app .ui-bar{background:#fbfbfc}

/* dashboard mock (compact, reusable) */
.mock{display:flex;font-size:12.5px;min-height:420px}
.mock-side{width:158px;border-right:1px solid var(--line-2);padding:16px 12px;background:#fcfcfd;flex-shrink:0}
.mock-side .grp{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin:16px 0 7px}
.mock-side .grp:first-child{margin-top:0}
.mock-side .it{padding:6px 9px;border-radius:7px;color:var(--ink-3);font-size:12px;font-weight:500;margin-bottom:1px}
.mock-side .it.on{background:var(--indigo-wash);color:var(--indigo);font-weight:600}
.mock-main{flex:1;padding:18px 20px;min-width:0}
.mock-bc{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
.mock-h{display:flex;align-items:center;gap:11px;margin-bottom:16px;flex-wrap:wrap}
.mock-h .mt{font-size:20px;font-weight:800;letter-spacing:-.02em}
.mock-h .live{font-family:var(--mono);font-size:10px;color:var(--green);display:flex;align-items:center;gap:6px;font-weight:500}
.mock-h .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(28,166,114,.16);animation:pulse 2.4s infinite}
.mock-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:10px;overflow:hidden;margin-bottom:14px}
.mock-kpi{background:#fff;padding:12px 13px}
.mock-kpi .kl{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.mock-kpi .kv{font-size:19px;font-weight:800;letter-spacing:-.02em}
.mock-kpi .kv .su{font-size:11px;color:var(--ink-3)}
.mock-kpi .kd{font-size:10px;margin-top:3px;font-weight:600}
.mock-kpi .kd.up{color:var(--green)}.mock-kpi .kd.down{color:var(--red)}.mock-kpi .kd.flat{color:var(--ink-4)}
.mock-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.mock-card{border:1px solid var(--line-2);border-radius:11px;padding:13px;background:#fff;min-width:0}
.mock-card .mch{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.mock-card .mch .t{font-size:12px;font-weight:700;letter-spacing:-.01em}
.mock-card .mch .b{font-family:var(--mono);font-size:8.5px;color:var(--ink-4);padding:2px 7px;border:1px solid var(--line);border-radius:20px}
.mock-card .mch .b.hot{color:var(--indigo);border-color:var(--indigo-line);background:var(--indigo-wash)}
.mrow{display:flex;flex-direction:column;gap:9px}
.mrow .r{display:flex;gap:8px;align-items:flex-start;font-size:11px;line-height:1.35;color:var(--ink-2)}
.mrow .r .tg{font-family:var(--mono);font-size:8px;font-weight:600;padding:2px 6px;border-radius:4px;flex-shrink:0;margin-top:1px}
.mrow .r .tg.hi{background:#fdeceb;color:var(--red)}.mrow .r .tg.me{background:#fef5e7;color:var(--amber)}.mrow .r .tg.lo{background:#eef0f4;color:var(--ink-4)}
.mrow .r b{color:var(--ink);font-weight:700}
.mrow .w{display:flex;justify-content:space-between;align-items:center;font-size:11px}
.mrow .w b{font-weight:700;color:var(--ink)}
.mrow .w .v{font-family:var(--mono);font-weight:700}
.mrow .w .v.r{color:var(--red)}.mrow .w .v.a{color:var(--amber)}.mrow .w .v.g{color:var(--green)}
.mock-foot{margin-top:13px;padding-top:10px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--ink-4);flex-wrap:wrap;gap:6px}
@media(max-width:900px){.mock-side{display:none}.mock-kpis{grid-template-columns:repeat(3,1fr)}.mock-cards{grid-template-columns:1fr}}

/* chat mock (embedded analyst) */
.chatmock{display:grid;grid-template-columns:1fr 210px;min-height:360px;font-size:13px}
.cm-main{padding:18px}
.cm-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid var(--line-2);margin-bottom:15px}
.cm-top .who{display:flex;align-items:center;gap:9px;font-weight:700;font-size:13.5px}
.cm-top .who .av{width:24px;height:24px;border-radius:7px;background:var(--indigo);display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800}
.cm-top .tn{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);border:1px solid var(--line);border-radius:20px;padding:3px 9px}
.cm-user{background:var(--indigo-wash);border:1px solid var(--indigo-line);border-radius:14px 14px 4px 14px;padding:10px 14px;font-size:13px;color:var(--ink-2);margin-left:auto;max-width:80%;width:fit-content;margin-bottom:14px;font-weight:500}
.cm-ai{border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:14px 16px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.cm-ai .w2{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin-bottom:8px}
.cm-ai p{margin-bottom:8px}.cm-ai p:last-child{margin-bottom:0}
.cm-ai b{color:var(--ink);font-weight:700}
.cm-ai .chip{display:inline-block;background:#fdeceb;color:var(--red);font-family:var(--mono);font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:4px}
.cm-actions{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.cm-actions button{font-family:var(--sans);font-size:11px;font-weight:600;padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer}
.cm-actions button.pri{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.cm-side{border-left:1px solid var(--line-2);padding:16px 15px;background:#fcfcfd}
.cm-side .sh{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:10px}
.cm-side .src{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.cm-side .src .sd{display:flex;align-items:center;gap:7px;color:var(--ink-2);font-weight:500}
.cm-side .src .sd::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--indigo);flex-shrink:0}
.cm-side .src .ref{font-family:var(--mono);font-size:9px;color:var(--ink-4)}
.cm-side .code{font-family:var(--mono);font-size:10px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px;line-height:1.5;margin-top:14px}
.cm-side .code .hl{color:var(--red);font-weight:600}
@media(max-width:760px){.chatmock{grid-template-columns:1fr}.cm-side{border-left:none;border-top:1px solid var(--line-2)}}

/* ============ ARTICLE READING LAYOUT ============ */
.article-shell{display:grid;grid-template-columns:200px minmax(0,1fr) 200px;gap:48px;align-items:start;max-width:1180px;margin:0 auto;padding:0 32px}
.article-rail{position:sticky;top:104px}
.article-rail .rail-h{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px}
.toc{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line)}
.toc a{font-size:13px;color:var(--ink-4);padding:6px 0 6px 16px;margin-left:-2px;border-left:2px solid transparent;line-height:1.35;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--ink-2)}
.toc a.active{color:var(--indigo);border-left-color:var(--indigo);font-weight:600}
.article-aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px}
.aside-card{border:1px solid var(--line);border-radius:14px;padding:18px}
.aside-card .ac-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:10px}
.aside-card .ac-t{font-size:14px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;line-height:1.25}
.aside-card .ac-d{font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-bottom:12px}
.aside-card .ac-btn{font-size:12.5px;font-weight:600;color:var(--indigo);display:inline-flex;gap:6px;align-items:center}
.share-rail{display:flex;flex-direction:column;gap:8px}
.share-rail a{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;color:var(--ink-3);transition:.2s}
.share-rail a:hover{border-color:var(--indigo);color:var(--indigo)}
.share-rail a svg{width:16px;height:16px}
/* drop cap on first paragraph */
.prose.dropcap > p:first-of-type::first-letter{float:left;font-family:var(--serif);font-size:64px;line-height:.82;font-weight:600;color:var(--indigo);padding:6px 12px 0 0}
@media(max-width:1080px){.article-shell{grid-template-columns:minmax(0,1fr);max-width:720px}.article-rail,.article-aside{display:none}}
/* key takeaways box */
.takeaways{border:1px solid var(--indigo-line);background:var(--indigo-wash);border-radius:16px;padding:26px 28px;margin:0 0 40px}
.takeaways .tk-h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);font-weight:600;margin-bottom:14px}
.takeaways ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.takeaways li{font-size:15px;line-height:1.5;color:var(--ink-2);padding-left:26px;position:relative}
.takeaways li::before{content:"";position:absolute;left:3px;top:7px;width:9px;height:5px;border-left:2px solid var(--indigo);border-bottom:2px solid var(--indigo);transform:rotate(-45deg);background:none;border-radius:0}
/* article meta row */
.art-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:40px}
.art-meta .am-av{width:38px;height:38px;border-radius:10px;background:var(--indigo);display:grid;place-items:center;flex-shrink:0}
.art-meta .am-av svg{width:20px;height:20px}
.art-meta .am-by{font-size:14px;font-weight:700}
.art-meta .am-sub{font-family:var(--mono);font-size:11px;color:var(--ink-4);letter-spacing:.02em;margin-top:2px}
.art-meta .am-tags{margin-left:auto;display:flex;gap:8px}

/* ============================================================
   DATA-VIZ: capacity & cost charts (proposal-grade, animated)
   ============================================================ */
.viz{border:1px solid var(--line);border-radius:18px;background:#fff;padding:28px;box-shadow:var(--shadow-sm);margin:32px 0}
.viz-h{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.viz-legend{display:flex;gap:20px;flex-wrap:wrap;margin:10px 0 18px}
.viz-legend .lg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);font-weight:500}
.viz-legend .lg i{width:16px;height:4px;border-radius:3px;display:block}
.viz-legend .lg i.dot{width:11px;height:11px;border-radius:50%}
.viz-svg{width:100%;height:auto;display:block;overflow:visible}
.viz-src{font-family:var(--mono);font-size:11px;color:var(--ink-4);margin-top:16px;line-height:1.5}
.viz-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--amber);font-weight:600;text-align:center;margin-top:12px}
/* chart element animation hooks (fired by .anim on the .viz) */
.viz .vline{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1) .15s}
.viz.anim .vline{stroke-dashoffset:0}
.viz .vbar{transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.viz.anim .vbar{transform:scaleY(1)}
.viz .vbar.d1{transition-delay:.05s}.viz .vbar.d2{transition-delay:.15s}.viz .vbar.d3{transition-delay:.25s}.viz .vbar.d4{transition-delay:.35s}.viz .vbar.d5{transition-delay:.45s}.viz .vbar.d6{transition-delay:.55s}.viz .vbar.d7{transition-delay:.65s}.viz .vbar.d8{transition-delay:.75s}
.viz .vdot,.viz .vlabel{opacity:0;transition:opacity .5s ease}
.viz.anim .vdot{opacity:1;transition-delay:1.1s}
.viz.anim .vlabel{opacity:1;transition-delay:1.25s}
.viz .vbarlabel{opacity:0;transition:opacity .5s ease}
.viz.anim .vbarlabel{opacity:1;transition-delay:.7s}
/* hover interactivity */
.viz .hit{fill:transparent;cursor:pointer}
.viz .vdot.hl{r:7}
.viz-tip{position:absolute;background:var(--ink);color:#fff;font-size:12px;padding:8px 11px;border-radius:9px;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap;z-index:20;box-shadow:var(--shadow-md);transform:translate(-50%,-115%)}
.viz-tip.show{opacity:1}
.viz-tip b{font-weight:700}
.viz-tip .tipsub{color:rgba(255,255,255,.6);font-family:var(--mono);font-size:10px;display:block;margin-top:2px}
.viz-wrap{position:relative}
/* cost comparison cards */
.cost-cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0}
.cost-cmp .cc{border:1px solid var(--line);border-radius:16px;padding:24px}
.cost-cmp .cc.win{border-color:var(--indigo);background:linear-gradient(180deg,var(--indigo-wash),#fff)}
.cost-cmp .cc .cch{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:18px}
.cost-cmp .cc.win .cch{color:var(--indigo)}
.cost-cmp .cc .ccrow{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.cost-cmp .cc .ccrow:last-of-type{border-bottom:none}
.cost-cmp .cc .ccrow .lab{color:var(--ink-3)}
.cost-cmp .cc .ccrow .val{font-weight:700;font-family:var(--mono);color:var(--ink)}
.cost-cmp .cc .ccrow.total{border-top:2px solid var(--ink);margin-top:6px;padding-top:14px}
.cost-cmp .cc .ccrow.total .val{font-size:20px}
.cost-cmp .cc.win .ccrow.total .val{color:var(--indigo)}
@media(max-width:680px){.cost-cmp{grid-template-columns:1fr}}
.saving-banner{background:var(--indigo);color:#fff;border-radius:16px;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin:18px 0;flex-wrap:wrap}
.saving-banner .sl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);line-height:1.6}
.saving-banner .sl b{color:#fff;font-weight:700}
.saving-banner .sv{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1}

/* ============================================================
   GO-DEEPER DISCLOSURE: light by default, expand on demand
   ============================================================ */
.more{margin-top:18px}
.more-detail{max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .4s ease,visibility 0s linear .5s}
.more.open .more-detail{opacity:1;visibility:visible;transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .4s ease,visibility 0s}
.more-detail-inner{padding-top:4px}
.more-detail-inner > *:first-child{margin-top:0}
.more-toggle{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--indigo);background:none;border:none;cursor:pointer;padding:8px 0;transition:gap .2s}
.more-toggle:hover{gap:12px}
.more-toggle .chev{width:18px;height:18px;border:1.5px solid var(--indigo-line);border-radius:50%;display:grid;place-items:center;transition:transform .35s,background .2s,border-color .2s;flex-shrink:0}
.more-toggle .chev svg{width:9px;height:9px;stroke:var(--indigo);fill:none;stroke-width:2;transition:stroke .2s}
.more-toggle:hover .chev{background:var(--indigo-wash);border-color:var(--indigo)}
.more.open .more-toggle .chev{transform:rotate(180deg)}
.more-toggle .lbl-more{display:inline}
.more-toggle .lbl-less{display:none}
.more.open .more-toggle .lbl-more{display:none}
.more.open .more-toggle .lbl-less{display:inline}
/* on dark bands */
.band.ink .more-toggle,.band.indigo .more-toggle{color:#b9a8ff}
.band.ink .more-toggle .chev,.band.indigo .more-toggle .chev{border-color:rgba(255,255,255,.25)}
.band.ink .more-toggle .chev svg,.band.indigo .more-toggle .chev svg{stroke:#b9a8ff}
.band.ink .more-toggle:hover .chev,.band.indigo .more-toggle:hover .chev{background:rgba(255,255,255,.08);border-color:#b9a8ff}


/* lighter section intro: a one-liner under a headline */
.sec-intro{font-size:clamp(17px,1.9vw,21px);line-height:1.5;color:var(--ink-3);max-width:56ch}

/* ============================================================
   CASE STUDY components
   ============================================================ */
.cs-hero{padding:128px 0 0;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.cs-hero-grid{position:absolute;inset:0;z-index:0;background-image:radial-gradient(circle at 1px 1px, rgba(75,47,214,.09) 1px, transparent 0);background-size:30px 30px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 75% 15%, #000, transparent 72%);mask-image:radial-gradient(ellipse 70% 60% at 75% 15%, #000, transparent 72%);opacity:.7}
.cs-hero-inner{position:relative;z-index:2;padding-bottom:48px}
.cs-company{display:flex;align-items:center;gap:16px;margin:22px 0 26px}
.cs-company .cs-logo{font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.cs-company .cs-ticker{font-family:var(--mono);font-size:12px;color:var(--ink-4);padding:5px 10px;border:1px solid var(--line);border-radius:6px;font-weight:500;white-space:nowrap}
.cs-hero h1{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.04;max-width:22ch;margin-bottom:22px}
.cs-hero .cs-lead{font-size:clamp(17px,2vw,22px);line-height:1.5;color:var(--ink-3);max-width:60ch}
/* company facts strip */
.cs-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.cs-facts .f{padding:22px 26px;border-right:1px solid var(--line)}
.cs-facts .f:last-child{border-right:none}
.cs-facts .f .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-bottom:8px}
.cs-facts .f .v{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3}
.cs-facts .f .v.sm{font-size:13.5px;font-weight:600;color:var(--ink-2)}
@media(max-width:760px){.cs-facts{grid-template-columns:1fr 1fr}.cs-facts .f:nth-child(2){border-right:none}}
/* at-a-glance outcome metrics */
.cs-glance{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs-glance .g{border:1px solid var(--line);border-radius:16px;padding:26px;background:#fff}
.cs-glance .g.feat{background:linear-gradient(180deg,var(--indigo-wash),#fff);border-color:var(--indigo-line)}
.cs-glance .g .v{font-size:clamp(30px,4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.cs-glance .g .v .u{font-size:.45em;color:var(--indigo);font-weight:700}
.cs-glance .g .l{font-size:13.5px;color:var(--ink-3);line-height:1.45;margin-top:12px}
@media(max-width:760px){.cs-glance{grid-template-columns:1fr!important}}
/* illustrative label */
.illus{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);background:#fef5e7;border-radius:5px;padding:2px 7px;font-weight:600;display:inline-block;vertical-align:middle;margin-left:8px}
.illus-note{font-family:var(--mono);font-size:11px;color:var(--ink-4);line-height:1.5;margin-top:14px}
/* challenge/solution/result blocks */
.cs-csr{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.cs-csr .blk{display:grid;grid-template-columns:180px 1fr;gap:32px;padding:34px 0;border-bottom:1px solid var(--line)}
.cs-csr .blk .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);font-weight:600;padding-top:4px}
.cs-csr .blk .body h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.cs-csr .blk .body p{font-size:16px;line-height:1.62;color:var(--ink-2);margin-bottom:14px}
.cs-csr .blk .body p:last-child{margin-bottom:0}
.cs-csr .blk .body ul{list-style:none;margin:6px 0 0;padding:0}
.cs-csr .blk .body li{font-size:15.5px;line-height:1.55;color:var(--ink-2);padding-left:26px;position:relative;margin-bottom:10px}
.cs-csr .blk .body li::before{content:"";position:absolute;left:4px;top:8px;width:8px;height:5px;border-left:2px solid var(--indigo);border-bottom:2px solid var(--indigo);transform:rotate(-45deg);background:none;border-radius:0}
@media(max-width:760px){.cs-csr .blk{grid-template-columns:1fr;gap:10px;padding:26px 0}}
/* big testimonial */
.cs-quote{padding:50px 0}
.cs-quote .mk{font-family:var(--serif);font-size:72px;line-height:.4;color:var(--indigo)}
.cs-quote p{font-family:var(--serif);font-size:clamp(24px,3.2vw,38px);line-height:1.32;color:var(--ink);margin:26px 0 30px;max-width:24ch;font-weight:400}
.cs-quote .by .nm{font-weight:700;font-size:16px}
.cs-quote .by .ti{font-size:14px;color:var(--ink-3);margin-top:2px}
.cs-quote .by .co{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-4);margin-top:8px}
/* recovery flow diagram (case study) */
.recflow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.recflow .rf-step{flex:1 1 0;min-width:150px;border:1px solid var(--line);border-radius:14px;padding:20px 18px;background:#fff;display:flex;flex-direction:column}
.recflow .rf-step.feat{background:linear-gradient(180deg,var(--indigo-wash),#fff);border-color:var(--indigo-line)}
.recflow .rf-ic{width:36px;height:36px;border-radius:9px;background:var(--indigo-wash);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:14px;margin-bottom:14px}
.recflow .rf-step.feat .rf-ic{background:var(--indigo);color:#fff}
.recflow .rf-t{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px;line-height:1.2}
.recflow .rf-d{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.recflow .rf-arr{display:flex;align-items:center;justify-content:center;color:var(--ink-4);font-size:18px;padding:0 6px;flex:0 0 auto}
@media(max-width:860px){.recflow{flex-direction:column}.recflow .rf-arr{transform:rotate(90deg);padding:8px 0}.recflow .rf-step{min-width:0}}

/* ============================================================
   ANIMATION LAYER: graphics come alive on scroll
   The .anim hook is added by site.js when a figure enters view.
   ============================================================ */

/* staggered flow-step entrance */
.flow-graphic .flow-step{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.anim .flow-graphic .flow-step{opacity:1;transform:none}
.anim .flow-graphic .flow-step:nth-child(1){transition-delay:.05s}
.anim .flow-graphic .flow-step:nth-child(2){transition-delay:.16s}
.anim .flow-graphic .flow-step:nth-child(3){transition-delay:.27s}
.anim .flow-graphic .flow-step:nth-child(4){transition-delay:.38s}
.anim .flow-graphic .flow-step:nth-child(5){transition-delay:.49s}
.anim .flow-graphic .flow-step:nth-child(6){transition-delay:.6s}
/* the connecting arrow pulses once it lands */
.flow-step .fs-arrow{opacity:0;transition:opacity .4s ease}
.anim .flow-step .fs-arrow{opacity:1;animation:arrowNudge 1.8s ease-in-out infinite;transition-delay:.6s}
@keyframes arrowNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}

/* layers stagger + the winning layer pulses */
.layers .layer{opacity:0;transform:translateX(-12px);transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1),border-color .2s}
.anim .layers .layer{opacity:1;transform:none}
.anim .layers .layer:nth-child(1){transition-delay:.05s}
.anim .layers .layer:nth-child(2){transition-delay:.16s}
.anim .layers .layer:nth-child(3){transition-delay:.27s}
.anim .layers .layer:nth-child(4){transition-delay:.38s}
.anim .layers .layer:nth-child(5){transition-delay:.49s}
.layers .layer.wins{position:relative}
.anim .layers .layer.wins::after{content:"";position:absolute;inset:-2px;border-radius:13px;border:2px solid var(--indigo);opacity:0;animation:winPulse 2.4s ease-out 1s infinite;pointer-events:none}
@keyframes winPulse{0%{opacity:.5;transform:scale(1)}70%{opacity:0;transform:scale(1.015)}100%{opacity:0}}

/* donut conic sweep (animate --p from 0) */
.donut{--p:0}
.donut .d-val{opacity:0;transition:opacity .5s ease .5s}
.anim .donut{transition:--p 1.3s cubic-bezier(.16,1,.3,1)}
.anim .donut .d-val{opacity:1}
@property --p{syntax:'<number>';inherits:false;initial-value:0}

/* timeline progressive fill */
.tl .tl-ev{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.anim .tl .tl-ev{opacity:1;transform:none}
.anim .tl .tl-ev:nth-child(1){transition-delay:.05s}
.anim .tl .tl-ev:nth-child(2){transition-delay:.2s}
.anim .tl .tl-ev:nth-child(3){transition-delay:.35s}
.anim .tl .tl-ev:nth-child(4){transition-delay:.5s}
.anim .tl .tl-ev:nth-child(5){transition-delay:.65s}
.anim .tl .tl-ev:nth-child(6){transition-delay:.8s}
.tl .tl-ev::after{transform:scaleY(0);transform-origin:top;transition:transform .5s ease}
.anim .tl .tl-ev::after{transform:scaleY(1)}
.tl .tl-ev.flag .tl-dot{position:relative}
.anim .tl .tl-ev.flag .tl-dot::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--red);opacity:0;animation:winPulse 2s ease-out 1s infinite}

/* stat-tile entrance */
.stat-tile{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.anim .stat-tile{opacity:1;transform:none}
.anim .stat-tile:nth-child(2){transition-delay:.1s}
.anim .stat-tile:nth-child(3){transition-delay:.2s}
.anim .stat-tile:nth-child(4){transition-delay:.3s}

/* vs-graphic halves slide in */
.vs-graphic .vs-side.bad{opacity:0;transform:translateX(-14px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.vs-graphic .vs-side.good{opacity:0;transform:translateX(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.vs-graphic .vs-divider span{opacity:0;transition:opacity .5s ease .35s}
.anim .vs-graphic .vs-side{opacity:1;transform:none}
.anim .vs-graphic .vs-divider span{opacity:1}
.anim .vs-graphic .vs-side.good{transition-delay:.12s}

/* minigraph nodes pulse + core glow */
.minigraph .mg-node{opacity:0;transform:scale(.94);transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.anim .minigraph .mg-node{opacity:1;transform:none}
.anim .minigraph .mg-col.out .mg-node{transition-delay:.25s}
.minigraph .mg-core{position:relative}
.anim .minigraph .mg-core{will-change:box-shadow}
@keyframes coreGlow{0%,100%{opacity:.5}50%{opacity:1}}

/* SVG draw-in: line paths animate stroke-dashoffset to 0 */
.chart-fig svg .draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .2s}
.anim .chart-fig svg .draw{stroke-dashoffset:0}
.chart-fig svg .fade{opacity:0;transition:opacity .6s ease}
.anim .chart-fig svg .fade{opacity:1;transition-delay:1.2s}
.chart-fig svg .grow{transform:scale(0);transform-origin:center;transform-box:fill-box;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.anim .chart-fig svg .grow{transform:scale(1);transition-delay:1.3s}

/* reduced motion: only disable the infinite looping pulses; keep entrance reveals */
/* graphics loops kept alive intentionally */

/* ============================================================
   FUTURISTIC LAYER v3
   Living knowledge-graph backdrop (canvas), holographic product
   sweep, ambient dark-band aurora. Mounted by site.js on any
   <canvas class="netfx" data-network>.
   ============================================================ */
.netfx{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
/* HERO: graph lives around the floating product UI, fades out under the headline */
.hero2 .netfx{z-index:1;opacity:.95;-webkit-mask-image:radial-gradient(ellipse 78% 94% at 80% 42%, #000 36%, transparent 80%);mask-image:radial-gradient(ellipse 78% 94% at 80% 42%, #000 36%, transparent 80%)}
@media(max-width:1080px){.hero2 .netfx{opacity:.45;-webkit-mask-image:radial-gradient(ellipse 96% 56% at 68% 16%, #000 28%, transparent 76%);mask-image:radial-gradient(ellipse 96% 56% at 68% 16%, #000 28%, transparent 76%)}}
/* DARK CTA bands: graph across the band */
.cta2 .netfx,.cta .netfx{z-index:1;opacity:.9;-webkit-mask-image:radial-gradient(ellipse 86% 96% at 42% 32%, #000 42%, transparent 84%);mask-image:radial-gradient(ellipse 86% 96% at 42% 32%, #000 42%, transparent 84%)}
/* interior page + case-study heroes: graph biased to the right, away from copy */
.page-hero .netfx,.cs-hero .netfx{z-index:1;opacity:.92;-webkit-mask-image:radial-gradient(ellipse 82% 96% at 80% 26%, #000 32%, transparent 80%);mask-image:radial-gradient(ellipse 82% 96% at 80% 26%, #000 32%, transparent 80%)}
@media(max-width:760px){.page-hero .netfx,.cs-hero .netfx{opacity:.5}}

/* knowledge-graph data-flow connectors (drawn by site.js into .minigraph) */
.minigraph{position:relative}
.minigraph .mg-col,.minigraph .mg-core{position:relative;z-index:1}
.mg-flow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.mg-flow path{fill:none;stroke:currentColor;stroke-width:1.75;opacity:.32;stroke-dasharray:4 7;animation:dashFlow 1.2s linear infinite}
.mg-flow circle{fill:currentColor;filter:drop-shadow(0 0 5px currentColor)}
@keyframes dashFlow{to{stroke-dashoffset:-22}}

/* keep page-hero dot grid + glow stacking sane when a canvas is added */
.page-hero .page-hero-inner,.cs-hero .cs-hero-inner{position:relative;z-index:2}

/* holographic light sweep across the hero product frame */
.hero2-visual .ui-frame{position:relative}
.hero2-visual .ui-frame::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:16px;background:linear-gradient(115deg,transparent 38%,rgba(124,99,255,.12) 47%,rgba(255,255,255,.55) 50%,rgba(124,99,255,.12) 53%,transparent 62%);background-size:260% 100%;background-position:170% 0;mix-blend-mode:screen;opacity:0;animation:holoSweep 8.5s ease-in-out 2s infinite}
@keyframes holoSweep{0%{background-position:170% 0;opacity:0}6%{opacity:1}26%{background-position:-70% 0;opacity:0}100%{background-position:-70% 0;opacity:0}}

/* ambient aurora drifting behind dark bands (very subtle, additive to existing glow) */
.cta2 .cta-glow,.cta .cta-glow{animation:auroraDrift 18s ease-in-out infinite alternate}
@keyframes auroraDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,30px) scale(1.12)}100%{transform:translate(-40px,-20px) scale(.95)}}

/* scanning highlight on the hero metric strip values (gives a 'live readout' feel) */
.hero2-strip .it .v b{position:relative}

@media(max-width:760px){
  .hero2-visual .ui-frame::after{display:none}
}

/* ===== logos marquee (continuous scroll) ===== */
.logos2-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logos2-track{display:flex;align-items:center;gap:clamp(28px,5vw,64px);width:max-content;animation:logosMarq 34s linear infinite}
.logos2-marquee:hover .logos2-track{animation-play-state:paused}
@keyframes logosMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logos2-track .lg{white-space:nowrap}

/* ===== live dashboard mock (ticking KPIs + data sweep) ===== */
.mock-kpis{position:relative;overflow:hidden}
.mock-kpis::after{content:"";position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(90deg,transparent,rgba(75,47,214,.07),transparent);animation:kpiSweep 5.5s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes kpiSweep{0%{transform:translateX(-120%)}55%{transform:translateX(360%)}100%{transform:translateX(360%)}}
.mock-kpi .kv{transition:color .25s,transform .25s}
.mock-kpi .kv.tick{color:var(--indigo);transform:translateY(-1px)}
.mrow .w .v.flash{animation:vFlash .7s ease}
@keyframes vFlash{0%{background:rgba(75,47,214,.16)}100%{background:transparent}}
.mrow .w .v{border-radius:4px;padding:0 3px}

/* ===== analyst chatmock: typing caret + live sources ===== */
.cm-ai .caret{display:inline-block;width:7px;height:14px;background:var(--indigo);margin-left:2px;vertical-align:-2px;animation:caretBlink 1.05s step-end infinite;border-radius:1px}
@keyframes caretBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.cm-ai .chip{white-space:nowrap}
.cm-side .src{transition:background .3s,border-color .3s}
.cm-side .src.live{background:var(--indigo-wash);border-radius:6px}
.cm-side .src.live .sd::before{box-shadow:0 0 0 4px rgba(75,47,214,.14)}

/* ============================================================
   PRODUCT MOCKUPS v2: extra in-app surfaces used as page
   "product shots" (cashflow model, audit log, extraction).
   Reuse .ui-frame / .mock / .mock-side / .mock-main.
   ============================================================ */
/* ===== product gallery: auto-scrolling animated screenshots ===== */
.galwrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.shotrail{display:flex;gap:28px;width:max-content;animation:shotScroll 60s linear infinite}
.shotrail:hover{animation-play-state:paused}
@keyframes shotScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.shotrail .shot{flex:0 0 540px;width:540px}
.shotrail .mock{min-height:312px}
.shotrail .ui-frame{position:relative;overflow:hidden}
.shot-sweep::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(124,99,255,.10) 47%,rgba(255,255,255,.5) 50%,rgba(124,99,255,.10) 53%,transparent 60%);background-size:260% 100%;background-position:170% 0;mix-blend-mode:screen;opacity:0;animation:holoSweep 7s ease-in-out infinite}
.shotrail .shot:nth-child(2) .shot-sweep::after{animation-delay:1.4s}
.shotrail .shot:nth-child(3) .shot-sweep::after,.shotrail .shot:nth-child(6) .shot-sweep::after{animation-delay:2.8s}
.shot-cap{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.55);margin-top:14px;text-align:center}
@media(max-width:760px){.shotrail .shot{flex-basis:330px;width:330px}}

/* shotrail: richer live-dashboard motion */
.shotrail .shot .ui-frame{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.shotrail .shot:hover .ui-frame{transform:translateY(-8px) scale(1.015);box-shadow:0 28px 66px rgba(10,12,25,.45)}
/* cascading row scan through the cashflow grid (feels like a live recompute) */
@keyframes cellScan{0%,78%,100%{background:transparent}9%{background:var(--indigo-wash)}}
.shotrail .mgrid tbody tr td{animation:cellScan 6.5s ease-in-out infinite}
.shotrail .mgrid tbody tr:nth-child(2) td{animation-delay:.55s}
.shotrail .mgrid tbody tr:nth-child(3) td{animation-delay:1.1s}
.shotrail .mgrid tbody tr:nth-child(4) td{animation-delay:1.65s}
.shotrail .mgrid tbody tr:nth-child(5) td{animation-delay:2.2s}
/* "Running" status pills breathe */
@keyframes runGlow{0%,100%{box-shadow:0 0 0 0 rgba(28,166,114,0)}50%{box-shadow:0 0 0 3px rgba(28,166,114,.13)}}
.shotrail .alog .st.ok{animation:runGlow 2.2s ease-in-out infinite}
/* breach-forecast badge pulses to draw the eye */
@keyframes hotPulse{0%,100%{box-shadow:0 0 0 0 rgba(75,47,214,0)}50%{box-shadow:0 0 0 4px rgba(75,47,214,.14)}}
.shotrail .mock-card .mch .b.hot{animation:hotPulse 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){
  .shotrail .mgrid tbody tr td,.shotrail .alog .st.ok,.shotrail .mock-card .mch .b.hot{animation:none}
  .shotrail .shot:hover .ui-frame{transform:none}
}

/* spreadsheet / cashflow model grid (cite-every-cell) */
.mgrid{font-size:11.5px;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mgrid th,.mgrid td{border:1px solid var(--line-2);padding:7px 10px;text-align:right;white-space:nowrap}
.mgrid thead th{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);background:#fbfbfd;font-weight:500}
.mgrid td:first-child,.mgrid th:first-child{text-align:left;font-weight:600;color:var(--ink-2)}
.mgrid tbody tr:hover td{background:var(--indigo-wash)}
.mgrid td.cited{position:relative;color:var(--indigo);font-weight:700;cursor:default}
/* platform.html cashflow: live "recomputed live" motion */
@keyframes cfScan{0%,80%,100%{background:transparent}10%{background:var(--indigo-wash)}}
.live-cf tbody tr td{animation:cfScan 7s ease-in-out infinite}
.live-cf tbody tr:nth-child(2) td{animation-delay:.5s}
.live-cf tbody tr:nth-child(3) td{animation-delay:1s}
.live-cf tbody tr:nth-child(4) td{animation-delay:1.5s}
.live-cf tbody tr:nth-child(5) td{animation-delay:2s}
.live-cf tbody tr:nth-child(6) td{animation-delay:2.5s}
@keyframes cfCited{0%,100%{box-shadow:0 0 0 0 rgba(75,47,214,0)}50%{box-shadow:0 0 0 3px rgba(75,47,214,.16)}}
.live-cf td.cited{animation:cfCited 2.6s ease-in-out infinite;border-radius:4px}
@keyframes cfBottom{0%,100%{color:var(--ink)}50%{color:var(--indigo)}}
.live-cf tr.gtot:last-child td:not(:first-child){animation:cfBottom 4.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.live-cf tbody tr td,.live-cf td.cited,.live-cf tr.gtot:last-child td:not(:first-child){animation:none}}
.mgrid td.cited::after{content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--indigo);box-shadow:0 0 0 2px rgba(75,47,214,.15)}
.mgrid td.neg{color:var(--red)}
.mgrid tr.gtot td{border-top:2px solid var(--ink);font-weight:800;color:var(--ink);background:#fcfcfd}
.mgrid-trace{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-top:11px;display:flex;gap:8px;align-items:center;line-height:1.5}
.mgrid-trace b{color:var(--indigo);font-weight:600}
.mgrid-trace .pin{width:7px;height:7px;border-radius:50%;background:var(--indigo);flex-shrink:0}

/* governance / audit log */
.alog{display:flex;flex-direction:column}
.alog .ar{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line-2);font-size:12px}
.alog .ar:last-child{border-bottom:none}
.alog .ar .ts{font-family:var(--mono);font-size:9.5px;color:var(--ink-4)}
.alog .ar .act{color:var(--ink-2);line-height:1.4;min-width:0}
.alog .ar .act b{color:var(--ink);font-weight:700}
.alog .ar .act .ref{font-family:var(--mono);font-size:9.5px;color:var(--ink-4);margin-left:6px}
.alog .ar .st{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:5px;white-space:nowrap}
.alog .ar .st.ok{background:#e7f6ef;color:var(--green)}
.alog .ar .st.wait{background:#fef5e7;color:var(--amber)}
.alog .ar .st.block{background:#fdeceb;color:var(--red)}
.gov-banner{display:flex;align-items:center;gap:12px;background:var(--indigo-wash);border:1px solid var(--indigo-line);border-radius:10px;padding:11px 15px;margin-bottom:14px}
.gov-banner .gb-v{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--indigo);line-height:1}
.gov-banner .gb-l{font-size:12px;color:var(--ink-3);line-height:1.4}
.gov-banner .gb-l b{color:var(--ink);font-weight:700}

/* two-column inner layout inside a mock-main (extraction / scenarios) */
.mock-split{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.mock-panel{border:1px solid var(--line-2);border-radius:11px;padding:13px;min-width:0}
.mock-panel .mp-h{font-size:12px;font-weight:700;letter-spacing:-.01em;margin-bottom:11px;display:flex;justify-content:space-between;align-items:center}
.mock-panel .mp-h .b{font-family:var(--mono);font-size:8.5px;color:var(--ink-4);padding:2px 7px;border:1px solid var(--line);border-radius:20px}
.kvrow{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.kvrow:last-child{border-bottom:none}
.kvrow .kk{color:var(--ink-3)}
.kvrow .vv{font-weight:700;color:var(--ink);font-family:var(--mono);display:flex;align-items:center;gap:6px}
.kvrow .vv .src{font-family:var(--mono);font-size:8.5px;color:var(--indigo);background:var(--indigo-wash);border:1px solid var(--indigo-line);border-radius:4px;padding:1px 5px;font-weight:600}
/* product-shot caption */
.prodshot-cap{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-4);margin-top:18px;line-height:1.5}
@media(max-width:760px){.mock-split{grid-template-columns:1fr}.mgrid{font-size:10.5px}.mgrid th,.mgrid td{padding:6px 7px}}

/* ===== hero self-tour fade ===== */

/* ===== knowledge-graph nodes: always-on sequential pulse ===== */
.minigraph .mg-node::before{animation:nodePulse 2.6s ease-in-out infinite}
.minigraph .mg-col .mg-node:nth-child(2)::before{animation-delay:.5s}
.minigraph .mg-col .mg-node:nth-child(3)::before{animation-delay:1s}
.minigraph .mg-col .mg-node:nth-child(4)::before{animation-delay:1.5s}
.minigraph .mg-col.out .mg-node:nth-child(1)::before{animation-delay:.3s}
.minigraph .mg-col.out .mg-node:nth-child(3)::before{animation-delay:1.3s}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 3px rgba(75,47,214,.13),0 0 6px rgba(75,47,214,.4)}50%{box-shadow:0 0 0 5px rgba(75,47,214,.05),0 0 14px 1px rgba(75,47,214,.7)}}

/* ===== Christine: deploy AI analysts live ===== */
.christine{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:start}
@media(max-width:900px){.christine{grid-template-columns:1fr;gap:34px}}
.chris-roster{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.chris-rh{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:2px}
.chris-an{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(255,255,255,.04);transition:border-color .2s,background .2s}
.chris-an:hover{border-color:rgba(164,141,255,.5);background:rgba(255,255,255,.06)}
.chris-an .av{width:38px;height:38px;border-radius:10px;background:linear-gradient(150deg,#7156ff,#4b2fd6);display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex-shrink:0}
.chris-an .meta{flex:1;min-width:0}
.chris-an .nm{font-weight:700;font-size:14.5px;color:#fff}
.chris-an .role{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:2px}
.chris-an .deploy{font-family:var(--sans);font-size:12px;font-weight:600;padding:8px 14px;border-radius:9px;border:1px solid rgba(164,141,255,.5);background:transparent;color:#c5b6ff;cursor:pointer;white-space:nowrap;transition:.2s}
.chris-an .deploy:hover{background:rgba(124,99,255,.18)}
.chris-an .deploy.on{background:#1ca672;border-color:#1ca672;color:#fff;cursor:default}
.chris-feat{display:flex;flex-direction:column;gap:22px}
.chris-feat .cf{border-left:2px solid rgba(164,141,255,.4);padding-left:18px}
.chris-feat .cf .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#b9a8ff;font-weight:500;margin-bottom:8px}
.chris-feat .cf h3{font-size:19px;font-weight:700;letter-spacing:-.02em;color:#fff;margin-bottom:7px}
.chris-feat .cf p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.6)}

/* analyst avatar shows the Built AI mark */
.cm-top .who .av{overflow:hidden;background:#5c3fdd}
.cm-top .who .av img{width:100%;height:100%;object-fit:cover;display:block}

/* comparison matrix: Built AI logo in the header */
.matrix thead th.us .vendor{display:flex;align-items:center;justify-content:center;gap:7px}

/* product gallery: animated auto-scrolling rail (live product wall) */
.shotrail .shot[aria-hidden="true"]{display:block}
@media(max-width:900px){.shotrail{grid-template-columns:none}.shotrail .shot{flex:0 0 330px;width:330px}}

/* ============================================================
   FIXES v5: compact stat-tiles in narrow cards, dynamic analyst
   chat (types the question, streams the answer), Christine avatar.
   ============================================================ */
/* stat-tiles inside a narrow card (offset/figure): compact 3-up, number + label only */
.offset-media .stat-tiles,.fig-body .stat-tiles{grid-template-columns:repeat(3,1fr);gap:8px}
.offset-media .stat-tiles .stat-tile,.fig-body .stat-tiles .stat-tile{display:flex;flex-direction:column;min-width:0;padding:14px 11px}
.offset-media .stat-tiles .stat-tile .v,.fig-body .stat-tiles .stat-tile .v{font-size:clamp(18px,1.7vw,26px);margin-bottom:8px;white-space:normal;overflow-wrap:break-word}
.offset-media .stat-tiles .stat-tile .v .u,.fig-body .stat-tiles .stat-tile .v .u{font-size:.42em;white-space:normal}
.offset-media .stat-tiles .stat-tile .l,.fig-body .stat-tiles .stat-tile .l{font-size:10.5px;line-height:1.3}
.offset-media .stat-tiles .stat-tile .d,.fig-body .stat-tiles .stat-tile .d{display:none}
@media(max-width:560px){.offset-media .stat-tiles,.fig-body .stat-tiles{grid-template-columns:1fr;gap:8px}.offset-media .stat-tiles .stat-tile .d,.fig-body .stat-tiles .stat-tile .d{display:block;margin-top:5px}}
/* In the half-width offset-media column (desktop 2-col offset), three number
   tiles side by side get crushed and wrap mid-word ("SOC 2" -> "so C2").
   There, stack the tiles as compact number + label rows so they stay legible. */
@media(min-width:881px){
  .offset-media .stat-tiles{grid-template-columns:1fr;gap:10px}
  .offset-media .stat-tiles .stat-tile{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;padding:13px 16px}
  .offset-media .stat-tiles .stat-tile .v{font-size:clamp(22px,2vw,30px);margin:0;white-space:nowrap}
  .offset-media .stat-tiles .stat-tile .l{margin:0;line-height:1.35}
}

/* dynamic analyst chat: typing indicator + streamed answer */
.cm-typing{display:inline-flex;gap:5px;align-items:center;padding:6px 2px}
.cm-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-4);animation:cmDot 1s infinite}
.cm-typing i:nth-child(2){animation-delay:.15s}.cm-typing i:nth-child(3){animation-delay:.3s}
@keyframes cmDot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:.9;transform:translateY(-3px)}}
.cm-ai.cm-streaming > *{opacity:0;transform:translateY(6px)}
.cm-ai.cm-streaming > *.cm-on{opacity:1;transform:none;transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.cm-user .ucaret{display:inline-block;width:6px;height:13px;background:var(--indigo);margin-left:1px;vertical-align:-2px;border-radius:1px;animation:caretBlink 1.05s step-end infinite}
.cm-side.cm-dim .src{opacity:.28}
.cm-side .src.seen{opacity:1}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.cm-ai.cm-streaming > *{transform:none}.cm-ai.cm-streaming > *.cm-on{transform:none}}

/* Christine portrait avatar (designed stand-in; swap .cp-av's text for an <img> once a real portrait is supplied) */
.christine-portrait{display:flex;align-items:center;gap:16px;margin:18px 0 0}
.christine-portrait .cp-av{width:64px;height:64px;border-radius:50%;flex-shrink:0;background:linear-gradient(150deg,#7d63ff,#4b2fd6);display:grid;place-items:center;color:#fff;font-weight:800;font-size:26px;letter-spacing:-.02em;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 30px rgba(75,47,214,.45);position:relative;overflow:hidden}
.christine-portrait .cp-av::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.35),transparent 55%)}
.christine-portrait .cp-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.christine-portrait .cp-meta .nm{font-weight:700;font-size:15px;color:#fff;letter-spacing:-.01em}
.christine-portrait .cp-meta .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#b9a8ff;margin-top:3px;display:flex;align-items:center;gap:7px}
.christine-portrait .cp-meta .role .dot{width:6px;height:6px;border-radius:50%;background:#43e0a0;box-shadow:0 0 0 3px rgba(67,224,160,.2);animation:pulse 2.4s infinite}

/* ============================================================
   GENERATIVE v6: OpenAI-style knowledge "bloom" core (original
   radial line-art mark) + clearly-marked photo placeholders for
   real, non-generative imagery the user supplies.
   ============================================================ */
.minigraph .mg-core.is-bloom{background:none;box-shadow:none;animation:none;border-radius:0;width:auto;min-width:150px;height:auto;padding:0;display:flex;flex-direction:column;align-items:center;gap:13px;text-shadow:none}
.minigraph .mg-core.is-bloom::before,.minigraph .mg-core.is-bloom::after{display:none}
.mg-core-mark{position:relative;width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 32%,rgba(124,99,255,.13),rgba(75,47,214,.04));border:1px solid var(--indigo-line);box-shadow:0 6px 22px rgba(75,47,214,.12);animation:none}
.mg-core-mark::before{content:"";position:absolute;inset:-9px;border-radius:50%;z-index:-1;background:conic-gradient(from 0deg,rgba(124,99,255,0),rgba(124,99,255,.3) 18%,rgba(124,99,255,0) 40%,rgba(124,99,255,.26) 62%,rgba(124,99,255,0) 84%,rgba(124,99,255,.22));-webkit-mask:radial-gradient(closest-side,transparent 66%,#000 70%);mask:radial-gradient(closest-side,transparent 66%,#000 70%);filter:blur(5px);opacity:.6;animation:coreSpin 16s linear infinite}
.mg-core-mark .kg-bloom{width:56px;height:56px;color:var(--indigo);overflow:visible;opacity:.85}
.kg-bloom .kg-petals{transform-origin:50px 50px;animation:bloomSpin 28s linear infinite}
.kg-bloom .kg-petals ellipse{opacity:.55;stroke-width:1.7}
.kg-bloom .kg-nodes circle{fill:var(--indigo);filter:none;animation:bloomNode 3s ease-in-out infinite}
.kg-bloom .kg-nodes circle:nth-child(2){animation-delay:.4s}.kg-bloom .kg-nodes circle:nth-child(3){animation-delay:.8s}.kg-bloom .kg-nodes circle:nth-child(4){animation-delay:1.2s}.kg-bloom .kg-nodes circle:nth-child(5){animation-delay:1.6s}.kg-bloom .kg-nodes circle:nth-child(6){animation-delay:2s}
.kg-bloom .kg-center{fill:var(--indigo)}
@keyframes bloomSpin{to{transform:rotate(360deg)}}
@keyframes bloomNode{0%,100%{opacity:.55}50%{opacity:1}}
.mg-core-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);font-weight:600;text-align:center;max-width:140px;line-height:1.3}
.band.ink .mg-core-lbl,.band.indigo .mg-core-lbl{color:#cbbcff}
.band.ink .mg-core-mark,.band.indigo .mg-core-mark{background:radial-gradient(circle at 40% 32%,rgba(255,255,255,.1),rgba(255,255,255,.03));border-color:rgba(255,255,255,.2)}
.band.ink .mg-core-mark .kg-bloom,.band.indigo .mg-core-mark .kg-bloom{color:#cbbcff}
.band.ink .kg-bloom .kg-nodes circle,.band.indigo .kg-bloom .kg-nodes circle{fill:#cbbcff}
.band.ink .kg-bloom .kg-center,.band.indigo .kg-bloom .kg-center{fill:#dcd2ff}


/* Christine portrait: circular photo */
.christine-portrait .cp-av.has-photo{width:72px;height:72px;background:#1a1530;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 10px 30px rgba(75,47,214,.42);overflow:hidden}
.christine-portrait .cp-av.has-photo::after{display:none}
.christine-portrait .cp-av.has-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;border-radius:50%}

/* ============================================================
   CINEMATIC HERO: choreographed entrance (masked headline reveal
   + staggered copy). Armed by site.js so no-JS renders it static.
   ============================================================ */
.hero-h1 .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero-h1 .line > span{display:block}
.hero-h1 .line.g > span{color:var(--indigo)}
.hero2.hero-armed .hero-h1 .line > span{transform:translateY(116%)}
.hero2.hero-armed .hero2-meta,.hero2.hero-armed .sub,.hero2.hero-armed .hero2-actions{opacity:0;transform:translateY(16px)}
.hero2.hero-armed.is-hero-in .hero-h1 .line > span{animation:heroLineUp 1s cubic-bezier(.16,1,.3,1) forwards}
.hero2.hero-armed.is-hero-in .hero-h1 .line:nth-child(1) > span{animation-delay:.12s}
.hero2.hero-armed.is-hero-in .hero-h1 .line:nth-child(2) > span{animation-delay:.26s}
.hero2.hero-armed.is-hero-in .hero-h1 .line:nth-child(3) > span{animation-delay:.40s}
.hero2.hero-armed.is-hero-in .hero2-meta{animation:heroFadeUp .8s ease forwards .06s}
.hero2.hero-armed.is-hero-in .sub{animation:heroFadeUp .8s ease forwards .64s}
.hero2.hero-armed.is-hero-in .hero2-actions{animation:heroFadeUp .8s ease forwards .78s}
@keyframes heroLineUp{from{transform:translateY(116%)}to{transform:none}}
@keyframes heroFadeUp{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){
  .hero2.hero-armed .hero-h1 .line > span{transform:none}
  .hero2.hero-armed.is-hero-in .hero-h1 .line > span{animation:none}
  .hero2.hero-armed .hero-h1,.hero2.hero-armed .hero2-meta,.hero2.hero-armed .sub,.hero2.hero-armed .hero2-actions{opacity:0;transition:opacity .8s ease}
  .hero2.hero-armed.is-hero-in .hero-h1{opacity:1;transition-delay:.05s}
  .hero2.hero-armed.is-hero-in .hero2-meta{opacity:1;transition-delay:.15s}
  .hero2.hero-armed.is-hero-in .sub{opacity:1;transition-delay:.45s}
  .hero2.hero-armed.is-hero-in .hero2-actions{opacity:1;transition-delay:.58s}
}

/* ============================================================
   COMPARISON MATRIX: spotlight the Built AI column on scroll-in.
   site.js adds .anim to .matrix-wrap when it enters view.
   ============================================================ */
.matrix .uscol .dotc{transform:scale(.001)}
.matrix-wrap.anim .uscol .dotc{animation:matPop .6s cubic-bezier(.34,1.56,.64,1) both}
.matrix-wrap.anim tbody tr:nth-child(1) .uscol .dotc{animation-delay:.12s}
.matrix-wrap.anim tbody tr:nth-child(2) .uscol .dotc{animation-delay:.22s}
.matrix-wrap.anim tbody tr:nth-child(3) .uscol .dotc{animation-delay:.32s}
.matrix-wrap.anim tbody tr:nth-child(4) .uscol .dotc{animation-delay:.42s}
.matrix-wrap.anim tbody tr:nth-child(5) .uscol .dotc{animation-delay:.52s}
.matrix-wrap.anim tbody tr:nth-child(6) .uscol .dotc{animation-delay:.62s}
.matrix-wrap.anim tbody tr:nth-child(7) .uscol .dotc{animation-delay:.72s}
@keyframes matPop{0%{transform:scale(.001)}65%{transform:scale(1.28)}100%{transform:scale(1)}}
/* the Built AI column lifts and brightens */
.matrix .uscol{transition:background .5s ease}
.matrix-wrap.anim .uscol{background:linear-gradient(180deg,var(--indigo-wash),rgba(75,47,214,.11))}
.matrix thead th.us .vendor{transition:transform .4s ease}
.matrix-wrap.anim thead th.us .vendor{transform:scale(1.05)}
/* ripple ring on each Built AI full-support dot once it lands */
.matrix .dotc.full.us{position:relative}
.matrix .dotc.full.us::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0}
.matrix-wrap.anim .dotc.full.us::after{animation:usRing 2.4s ease-out 1s 2}
@keyframes usRing{0%{opacity:1;box-shadow:0 0 0 0 rgba(75,47,214,.45)}100%{opacity:0;box-shadow:0 0 0 13px rgba(75,47,214,0)}}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.matrix .uscol .dotc{transform:none}.matrix-wrap.anim .uscol .dotc{animation:none}.matrix-wrap.anim .dotc.full.us::after{animation:none}}

/* ============================================================
   PHOTO BANDS: full-bleed cinematic imagery (institutional photo
   set). Pass the image via --img. Dark scrim keeps text legible;
   gentle Ken Burns drift, disabled under reduced motion.
   ============================================================ */
.photo-band{position:relative;padding:118px 0;background:#0a0d18;overflow:hidden}
.photo-band::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--img);background-size:cover;background-position:center;opacity:.5;animation:bandZoom 26s ease-in-out infinite alternate}
.photo-band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,10,20,.93),rgba(8,10,20,.6) 56%,rgba(8,10,20,.32))}
.photo-band > .wrap{position:relative;z-index:2}
@keyframes bandZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(max-width:768px){.photo-band{padding:72px 0}.photo-band::after{background:linear-gradient(180deg,rgba(8,10,20,.82),rgba(8,10,20,.74))}}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.photo-band::before{animation:none}}

/* page hero → dark cinematic photo hero via .is-photo + --img (one-line per page) */
.page-hero.is-photo{position:relative;background:#0a0d18}
.page-hero.is-photo::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--img);background-size:cover;background-position:center;opacity:.42;animation:bandZoom 28s ease-in-out infinite alternate}
.page-hero.is-photo::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(8,10,20,.9),rgba(8,10,20,.55) 58%,rgba(8,10,20,.32))}
.page-hero.is-photo .page-hero-inner{position:relative;z-index:3}
.page-hero.is-photo .page-hero-grid{opacity:.18}
.page-hero.is-photo .netfx{opacity:.5;mix-blend-mode:screen}
.page-hero.is-photo .h1{color:#fff}
.page-hero.is-photo .lead{color:rgba(255,255,255,.78)}
.page-hero.is-photo .breadcrumb,.page-hero.is-photo .breadcrumb a,.page-hero.is-photo .breadcrumb span,.page-hero.is-photo .breadcrumb .sep{color:rgba(255,255,255,.62)}
.page-hero.is-photo .breadcrumb a:hover{color:#fff}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.page-hero.is-photo::before{animation:none}}
/* dark CTA band with a photo behind the graph */
.cta2.cta-photo{background-image:linear-gradient(rgba(18,14,42,.86),rgba(14,11,34,.92)),var(--img);background-size:cover;background-position:center}

/* ============================================================
   MOTION v4: site-wide staggered group reveals + soft parallax
   Applied automatically by site.js to content grids/rows, so
   sections cascade in on scroll instead of popping as a block.
   Classes are stripped after the entrance so native hover
   transitions (card lift, etc.) are never delayed.
   ============================================================ */
.is-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--si,0) * 88ms)}
.is-stagger.in > *{opacity:1;transform:none}
[data-parallax]{will-change:transform}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){
  .is-stagger > *{opacity:1!important;transform:none!important;transition-delay:0s!important}
  [data-parallax]{transform:none!important}
}

/* ============================================================
   PROGRESSIVE DISCLOSURE v1: keep depth, lighten the default read
   site.js wraps each section's supporting prose (everything after
   the lead paragraph) into a generated "Continue reading" expander,
   reusing the .more disclosure look. Content stays in the DOM.
   ============================================================ */
.more.auto{margin-top:18px;border-top:1px solid var(--line);padding-top:4px}
.more.auto > .more-toggle{padding-top:12px}
.more.auto .more-detail-inner > *:first-child{margin-top:18px}
.band.ink .more.auto,.band.indigo .more.auto{border-top-color:rgba(255,255,255,.14)}
/* article prose: the generated expander sits flush with the reading column */
.prose .more.auto{margin-top:16px}

/* ============================================================
   FIX + ENHANCE: graphics that receive .anim on themselves
   site.js adds .anim to the graphic element directly, so the
   stagger rules must use a COMPOUND selector (.tl.anim) not a
   descendant one (.anim .tl) or the children never reveal.
   ============================================================ */
/* timeline: bare .tl (not wrapped in .fig) now reveals correctly */
.tl.anim .tl-ev{opacity:1;transform:none}
.tl.anim .tl-ev:nth-child(1){transition-delay:.05s}
.tl.anim .tl-ev:nth-child(2){transition-delay:.18s}
.tl.anim .tl-ev:nth-child(3){transition-delay:.31s}
.tl.anim .tl-ev:nth-child(4){transition-delay:.44s}
.tl.anim .tl-ev:nth-child(5){transition-delay:.57s}
.tl.anim .tl-ev:nth-child(6){transition-delay:.7s}
.tl.anim .tl-ev::after{transform:scaleY(1)}

/* recovery flow: staggered step entrance + arrow fade + hover lift */
.recflow .rf-step{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s}
.recflow .rf-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--indigo-line)}
.recflow.anim .rf-step{opacity:1;transform:none}
.recflow.anim .rf-step:nth-child(1){transition-delay:.05s}
.recflow.anim .rf-step:nth-child(3){transition-delay:.16s}
.recflow.anim .rf-step:nth-child(5){transition-delay:.27s}
.recflow.anim .rf-step:nth-child(7){transition-delay:.38s}
.recflow.anim .rf-step:nth-child(9){transition-delay:.49s}
.recflow .rf-arr{opacity:0;transition:opacity .4s ease}
.recflow.anim .rf-arr{opacity:1;transition-delay:.32s;animation:arrowNudge 1.9s ease-in-out .8s infinite}
.recflow.anim .rf-step.feat{position:relative}
.recflow.anim .rf-step.feat::after{content:"";position:absolute;inset:-2px;border-radius:16px;border:2px solid var(--indigo);opacity:0;animation:winPulse 2.6s ease-out 1.3s infinite;pointer-events:none}

@media (prefers-reduced-motion:reduce) and (min-width:100000px){
  .recflow.anim .rf-arr,.recflow.anim .rf-step.feat::after{animation:none!important}
}

/* ============================================================
   CASE-STUDY HERO with a cinematic photo (.cs-hero.is-photo + --img)
   ============================================================ */
.cs-hero.is-photo{background:#0a0d18}
.cs-hero.is-photo::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--img);background-size:cover;background-position:center;opacity:.42;animation:bandZoom 30s ease-in-out infinite alternate}
.cs-hero.is-photo::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(8,10,20,.93),rgba(8,10,20,.62) 58%,rgba(8,10,20,.34))}
.cs-hero.is-photo .cs-hero-inner{position:relative;z-index:3}
.cs-hero.is-photo .cs-hero-grid{opacity:.16}
.cs-hero.is-photo .netfx{opacity:.5;mix-blend-mode:screen}
.cs-hero.is-photo h1,.cs-hero.is-photo .cs-company .cs-logo{color:#fff}
.cs-hero.is-photo .cs-lead{color:rgba(255,255,255,.78)}
.cs-hero.is-photo .cs-ticker{color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.26)}
.cs-hero.is-photo .breadcrumb,.cs-hero.is-photo .breadcrumb a,.cs-hero.is-photo .breadcrumb span,.cs-hero.is-photo .breadcrumb .sep{color:rgba(255,255,255,.62)}
.cs-hero.is-photo .breadcrumb a:hover{color:#fff}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.cs-hero.is-photo::before{animation:none}}

/* dark CTA band with a photo behind the graph (matches .cta2.cta-photo) */
.cta.cta-photo{background-image:linear-gradient(rgba(18,14,42,.86),rgba(14,11,34,.92)),var(--img);background-size:cover;background-position:center}

/* ============================================================
   RECOVERY AUDIT MOCK: table + "traced to source" side panel
   ============================================================ */
.mock-recovery{display:block}
.mock-recovery .mr-split{display:grid;grid-template-columns:1.55fr 1fr;gap:0}
.mock-recovery .mr-trace{border-left:1px solid var(--line-2);padding:18px 22px;background:#fcfcfd}
.mock-recovery .mr-trace .tr-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px}
.mock-recovery .trace-item{padding:12px 0;border-bottom:1px solid var(--line-2)}
.mock-recovery .trace-item:last-child{border-bottom:none}
.mock-recovery .trace-item .ti-k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);font-weight:600;margin-bottom:5px}
.mock-recovery .trace-item .ti-v{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.mock-recovery .trace-item .ti-d{font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.mock-recovery .ti-bar{height:6px;border-radius:4px;background:var(--line-2);margin-top:8px;overflow:hidden}
.mock-recovery .ti-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--indigo),var(--indigo-2));width:0;transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.mock-recovery.lit .ti-bar i{width:var(--w,95%)}
@media(max-width:760px){.mock-recovery .mr-split{grid-template-columns:1fr}.mock-recovery .mr-trace{border-left:none;border-top:1px solid var(--line-2)}}

/* ============================================================
   MOBILE SAFETY: several pages set grid-template-columns inline
   (per element) for their desktop layout. Inline styles beat the
   responsive stylesheet rules, so those grids stayed multi-column
   and overflowed the viewport on phones. Collapse any inline
   repeat() grid to a single column at phone widths.
   ============================================================ */
@media(max-width:560px){
  [style*="grid-template-columns:repeat"]{grid-template-columns:1fr !important}
}

/* ============================================================
   HOWARD HUGHES CASE STUDY: motion for the 4-step integration
   flow, the recovery-audit mock, hero glance tiles, proof band,
   and pull-quote. These animations always play (the reduced-motion
   gating is intentionally omitted here at the site owner's request).
   ============================================================ */
/* integration flow: a highlight travels through the steps like data moving through the pipeline */
.intflow .rf-step{position:relative}
.intflow .rf-step::before{content:"";position:absolute;inset:-1px;border-radius:14px;border:1.5px solid var(--indigo);opacity:0;pointer-events:none;z-index:1}
.intflow.anim .rf-step:nth-child(1)::before{animation:intRing 5s ease-in-out infinite}
.intflow.anim .rf-step:nth-child(3)::before{animation:intRing 5s ease-in-out 1.2s infinite}
.intflow.anim .rf-step:nth-child(5)::before{animation:intRing 5s ease-in-out 2.4s infinite}
.intflow.anim .rf-step:nth-child(7)::before{animation:intRing 5s ease-in-out 3.6s infinite}
.intflow.anim .rf-step:nth-child(1) .rf-ic{animation:intIc 5s ease-in-out infinite}
.intflow.anim .rf-step:nth-child(3) .rf-ic{animation:intIc 5s ease-in-out 1.2s infinite}
.intflow.anim .rf-step:nth-child(5) .rf-ic{animation:intIc 5s ease-in-out 2.4s infinite}
.intflow.anim .rf-step:nth-child(7) .rf-ic{animation:intIcFeat 5s ease-in-out 3.6s infinite}
.intflow.anim .rf-arr:nth-child(2){animation:intArr 5s ease-in-out .55s infinite}
.intflow.anim .rf-arr:nth-child(4){animation:intArr 5s ease-in-out 1.75s infinite}
.intflow.anim .rf-arr:nth-child(6){animation:intArr 5s ease-in-out 2.95s infinite}
@keyframes intRing{0%,16%,100%{opacity:0}5%,10%{opacity:.5}}
@keyframes intIc{0%,16%,100%{background:var(--indigo-wash);color:var(--indigo);box-shadow:none;transform:scale(1)}5%,11%{background:var(--indigo);color:#fff;box-shadow:0 6px 16px rgba(75,47,214,.32);transform:scale(1.13)}}
@keyframes intIcFeat{0%,16%,100%{box-shadow:0 2px 8px rgba(75,47,214,.28);transform:scale(1)}5%,11%{box-shadow:0 9px 22px rgba(75,47,214,.5);transform:scale(1.13)}}
@keyframes intArr{0%,22%,100%{color:var(--ink-4);transform:translateX(0)}7%,15%{color:var(--indigo);transform:translateX(5px)}}
/* recovery audit mock: running compute sweep + live status dot */
.mock-recovery tbody td{transition:background .35s ease, box-shadow .35s ease}
.mock-recovery tbody tr.calc td{background:var(--indigo-wash)}
.mock-recovery tbody tr.calc td:first-child{box-shadow:inset 3px 0 0 var(--indigo)}
.rec-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}
.mock-recovery.lit .rec-live-dot{animation:recPulse 2.2s ease-out infinite}
@keyframes recPulse{0%{box-shadow:0 0 0 0 rgba(28,166,114,.5)}70%{box-shadow:0 0 0 7px rgba(28,166,114,0)}100%{box-shadow:0 0 0 0 rgba(28,166,114,0)}}
/* --- extra life: hero glance tiles, proof stats, quote --- */
.cs-glance .g{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1),border-color .2s ease,box-shadow .2s ease}
.cs-glance.in .g{opacity:1;transform:none}
.cs-glance.in .g:nth-child(1){transition-delay:.05s}
.cs-glance.in .g:nth-child(2){transition-delay:.14s}
.cs-glance.in .g:nth-child(3){transition-delay:.23s}
.cs-glance.in .g:nth-child(4){transition-delay:.32s}
.cs-glance .g:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--indigo-line)}
.cs-glance .g .v{position:relative;display:inline-block}
.cs-glance .g .v::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--indigo),var(--indigo-2));transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.cs-glance.in .g .v::after{transform:scaleX(1)}
.cs-glance.in .g:nth-child(1) .v::after{transition-delay:.35s}
.cs-glance.in .g:nth-child(2) .v::after{transition-delay:.44s}
.cs-glance.in .g:nth-child(3) .v::after{transition-delay:.53s}
.cs-glance.in .g:nth-child(4) .v::after{transition-delay:.62s}
.cs-glance .g.feat{position:relative}
.cs-glance.in .g.feat::after{content:"";position:absolute;inset:-1px;border-radius:16px;border:1.5px solid var(--indigo);opacity:0;pointer-events:none;animation:glanceBreath 3.6s ease-in-out 1s infinite}
@keyframes glanceBreath{0%,100%{opacity:0}50%{opacity:.4}}
.proof-stats > div{opacity:0;transform:translateY(20px);transition:opacity .75s ease,transform .75s cubic-bezier(.16,1,.3,1)}
.proof-stats.in > div{opacity:1;transform:none}
.proof-stats.in > div:nth-child(1){transition-delay:.1s}
.proof-stats.in > div:nth-child(2){transition-delay:.28s}
.proof-stats.in > div:nth-child(3){transition-delay:.46s}
.proof-stats.in > div:nth-child(3) > div:first-child{animation:proofGlow 3.6s ease-in-out 1.4s infinite}
@keyframes proofGlow{0%,100%{text-shadow:0 0 0 rgba(150,120,255,0)}50%{text-shadow:0 0 24px rgba(150,120,255,.55)}}
.cs-quote.in .mk{animation:quoteFloat 6s ease-in-out infinite}
@keyframes quoteFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ============================================================
   CREDIBILITY: client logo strip, security trust line,
   proof stats, awards & recognition, footer award badge.
   ============================================================ */

/* --- client logo strip (homepage) --- */
.hp-logos-label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);text-align:center;font-weight:600;margin-bottom:38px}
.hp-clogos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(26px,4.5vw,56px);margin-top:30px}
.hp-clogo{font-size:clamp(17px,1.7vw,21px);font-weight:700;letter-spacing:-.01em;color:var(--ink-3);opacity:.7;white-space:nowrap;transition:opacity .18s ease,color .18s ease}
a.hp-clogo{border-bottom:0}
.hp-clogo:hover{opacity:1;color:var(--ink)}
.hp-clogo img{width:auto;display:block;filter:grayscale(1);opacity:.68;transition:filter .25s ease,opacity .25s ease}
.hp-clogo:hover img{filter:grayscale(0);opacity:1}
@media(max-width:600px){.hp-clogos{gap:18px 26px}.hp-clogo{font-size:16px}}

/* --- security trust strip (quiet single-line band) --- */
.hp-sec{background:var(--paper-2);border-bottom:1px solid var(--line)}
.hp-sec-line{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink-3);text-align:center;padding:13px 20px;line-height:1.6}
.hp-sec-line b{color:var(--ink-2);font-weight:600}
.hp-sec-line .sep{color:var(--indigo);margin:0 10px;opacity:.55}
@media(max-width:640px){.hp-sec-line{font-size:11px}.hp-sec-line .sep{margin:0 6px}}

/* --- proof stats band --- */
.hp-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hp-stat{background:#fff;padding:32px 24px;text-align:center}
.hp-stat .v{font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.hp-stat .v .u{font-size:.62em;color:var(--indigo);font-weight:700}
.hp-stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-top:14px;line-height:1.45}
@media(max-width:820px){.hp-proof-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.hp-proof-grid{grid-template-columns:1fr}}

/* --- awards & recognition --- */
.awards-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1160px;margin:0 auto}
.award{border:1px solid var(--line);border-radius:13px;padding:24px 20px;background:#fff;text-align:center;display:flex;flex-direction:column;align-items:center}
.award-logo{display:flex;align-items:center;justify-content:center;height:48px;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink-3);opacity:1}
.award-logo img{max-height:48px;width:auto;object-fit:contain}
.award-name{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin-top:16px;line-height:1.3}
.award-org{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);line-height:1.55;margin-top:8px}
@media(max-width:1000px){.awards-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.awards-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.awards-grid{grid-template-columns:1fr}}
/* impactful layered entrance for the awards section */
.hp-awards .mono-label,.hp-awards h2{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.hp-awards .reveal.in .mono-label{opacity:1;transform:none;transition-delay:.02s}
.hp-awards .reveal.in h2{opacity:1;transform:none;transition-delay:.1s}
@keyframes awardIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
@keyframes logoPop{from{opacity:0;transform:scale(.66) translateY(8px)}to{opacity:1;transform:none}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes awardSheen{0%{left:-60%;opacity:0}28%{opacity:1}100%{left:135%;opacity:0}}
.hp-awards .award{opacity:0;position:relative;overflow:hidden;transition:border-color .2s ease,box-shadow .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.hp-awards .award::before{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;background:linear-gradient(100deg,transparent,rgba(75,47,214,.13),transparent);transform:skewX(-18deg);opacity:0;pointer-events:none;z-index:1}
.hp-awards .award-logo{opacity:0}
.hp-awards .reveal.in .award{animation:awardIn .72s cubic-bezier(.16,1,.3,1) both}
.hp-awards .reveal.in .award::before{animation:awardSheen 1.1s ease-out both}
.hp-awards .reveal.in .award-logo{animation:logoPop .6s cubic-bezier(.34,1.56,.64,1) both}
.hp-awards .reveal.in .award-logo img{animation:logoFloat 5.5s ease-in-out infinite both}
.hp-awards .reveal.in .award:nth-child(1){animation-delay:.14s}
.hp-awards .reveal.in .award:nth-child(2){animation-delay:.26s}
.hp-awards .reveal.in .award:nth-child(3){animation-delay:.38s}
.hp-awards .reveal.in .award:nth-child(4){animation-delay:.50s}
.hp-awards .reveal.in .award:nth-child(5){animation-delay:.62s}
.hp-awards .reveal.in .award:nth-child(1)::before{animation-delay:.50s}
.hp-awards .reveal.in .award:nth-child(2)::before{animation-delay:.62s}
.hp-awards .reveal.in .award:nth-child(3)::before{animation-delay:.74s}
.hp-awards .reveal.in .award:nth-child(4)::before{animation-delay:.86s}
.hp-awards .reveal.in .award:nth-child(5)::before{animation-delay:.98s}
.hp-awards .reveal.in .award:nth-child(1) .award-logo{animation-delay:.32s}
.hp-awards .reveal.in .award:nth-child(2) .award-logo{animation-delay:.44s}
.hp-awards .reveal.in .award:nth-child(3) .award-logo{animation-delay:.56s}
.hp-awards .reveal.in .award:nth-child(4) .award-logo{animation-delay:.68s}
.hp-awards .reveal.in .award:nth-child(5) .award-logo{animation-delay:.80s}
.hp-awards .reveal.in .award:nth-child(1) .award-logo img{animation-delay:1.04s}
.hp-awards .reveal.in .award:nth-child(2) .award-logo img{animation-delay:1.16s}
.hp-awards .reveal.in .award:nth-child(3) .award-logo img{animation-delay:1.28s}
.hp-awards .reveal.in .award:nth-child(4) .award-logo img{animation-delay:1.40s}
.hp-awards .reveal.in .award:nth-child(5) .award-logo img{animation-delay:1.52s}
.hp-awards .award:hover{border-color:var(--indigo);box-shadow:var(--shadow-lg);transform:translateY(-7px)}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){
  .hp-awards .award,.hp-awards .award-logo{opacity:1;animation:none}
  .hp-awards .award-logo img{animation:none}
  .hp-awards .award::before{display:none}
  .hp-awards .mono-label,.hp-awards h2{opacity:1;transform:none}
}

/* --- acquisitions hero proof line --- */
.acq-hero-proof{display:flex;gap:clamp(34px,6vw,76px);margin-top:34px;flex-wrap:wrap}
.ahp .v{font-size:clamp(38px,5vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff}
.ahp .v .u{color:#b9a8ff;font-weight:700}
.ahp .l{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:12px}

/* --- footer award badge --- */
.foot-award{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--indigo);border:1px solid var(--indigo-line);background:var(--indigo-wash);border-radius:5px;padding:2px 8px;margin-right:12px;vertical-align:middle}

/* --- compliance framework badges (honest "in process", not official cert seals) --- */
.cert-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cert-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13.5px;letter-spacing:.04em;font-weight:600;color:var(--indigo);border:1px solid var(--indigo-line);background:var(--indigo-wash);border-radius:9px;padding:9px 15px}
.cert-badge svg{width:17px;height:17px;flex:none}

/* --- security page: at-a-glance summary + section lead-ins --- */
.sec-glance{border:1px solid var(--indigo-line);background:var(--indigo-wash);border-radius:16px;padding:22px 24px;margin:0 0 48px}
.sec-glance .sg-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);font-weight:600;margin-bottom:14px}
.sg-chips{display:flex;flex-wrap:wrap;gap:9px}
.sg-chip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--indigo-line);border-radius:9px;padding:8px 13px}
.sg-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--indigo);flex:none}
.prose .sec-lead{font-size:18.5px;font-weight:700;color:var(--ink);line-height:1.5;margin:0 0 18px}

/* --- Trust Center panel (security page) --- */
.trust-wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,360px);gap:56px;align-items:center}
.trust-copy h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;line-height:1.08;color:var(--ink)}
.trust-copy p{max-width:var(--measure);color:var(--ink-3);font-size:17px;line-height:1.65;margin:0}
.trust-chips{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 4px}
.trust-chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--indigo-line);border-radius:9px;padding:8px 13px}
.trust-chip .tc-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none;box-shadow:0 0 0 3px rgba(217,138,26,.14)}
.trust-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.trust-badge-col{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.trust-badge{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;box-shadow:var(--shadow-md);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.trust-badge:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--indigo-line)}
.tb-top{display:flex;align-items:center;justify-content:space-between}
.tb-shield{width:44px;height:44px;border-radius:11px;background:var(--indigo-wash);border:1px solid var(--indigo-line);display:flex;align-items:center;justify-content:center;color:var(--indigo)}
.tb-shield svg{width:22px;height:22px}
.tb-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--green)}
.tb-live .tc-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;animation:tbPulse 2.2s ease-in-out infinite}
@keyframes tbPulse{0%,100%{box-shadow:0 0 0 0 rgba(28,166,114,.35)}50%{box-shadow:0 0 0 5px rgba(28,166,114,0)}}
.tb-title{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.tb-sub{font-size:13.5px;color:var(--ink-3);line-height:1.45;margin-top:-6px}
.tb-foot{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;font-weight:600;color:var(--indigo);border-top:1px solid var(--line-2);padding-top:13px;margin-top:2px}
.tb-foot .arrow{transition:transform .18s ease}
.trust-badge:hover .tb-foot .arrow{transform:translate(2px,-2px)}
.tb-powered{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);text-align:center}
@media(max-width:860px){.trust-wrap{grid-template-columns:1fr;gap:32px}.trust-badge-col{max-width:360px}}

/* --- asset-management ROI calculator controls --- */
.roi-controls{border:1px solid var(--indigo-line);background:var(--indigo-wash);border-radius:16px;padding:22px 24px;margin-bottom:22px}
.roi-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);font-weight:600;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.roi-h span{color:var(--ink-4);font-size:10px;letter-spacing:.08em}
.roi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.roi-field{display:flex;flex-direction:column;gap:11px}
.roi-lab{font-size:13px;color:var(--ink-3);font-weight:500;display:flex;flex-direction:column;gap:4px}
.roi-lab b{font-size:16px;color:var(--ink);font-weight:800;font-family:var(--mono);letter-spacing:-.01em}
.roi-field input[type=range]{width:100%;accent-color:var(--indigo);height:4px;cursor:pointer}
@media(max-width:760px){.roi-grid{grid-template-columns:1fr;gap:16px}}

/* ROI live results strip (inside the assumptions panel) */
.roi-out{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--indigo-line)}
.roi-out-lab{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);font-weight:600;margin-bottom:5px}
.roi-out-val{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.roi-out-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.roi-metric{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--indigo-line);border-radius:10px;padding:12px 14px}
.rm-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.rm-v{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink);font-family:var(--mono)}
@media(max-width:760px){.roi-out{grid-template-columns:1fr;gap:16px}.roi-out-grid{grid-template-columns:repeat(2,1fr)}}
#vizHeadcount .viz-wrap,#vizScaling .viz-wrap{max-width:800px;margin:0 auto}

/* --- resources featured thesis card --- */
.featured-thesis{transition:box-shadow .35s ease,transform .35s cubic-bezier(.16,1,.3,1);border-color:var(--line)}
.featured-thesis:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--indigo-line)}
.featured-thesis:hover .arrow{transform:translateX(4px)}
.thesis-panel::before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 30% 30%,rgba(124,99,255,.38),transparent 55%),radial-gradient(circle at 74% 72%,rgba(80,60,200,.32),transparent 55%);filter:blur(30px);opacity:.7;animation:thesisAurora 12s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes thesisAurora{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-4%) scale(1.14)}}
.featured-thesis:hover .thesis-panel::before{opacity:1}
.thesis-panel::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-16deg);animation:thesisSweep 6.5s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes thesisSweep{0%{left:-45%}42%,100%{left:135%}}
.thesis-evo{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.thesis-evo .ev,.thesis-evo .ar{opacity:0;transform:translateY(8px);display:inline-block}
@keyframes evoIn{to{opacity:1;transform:none}}
.featured-thesis.in .thesis-evo .ev,.featured-thesis.in .thesis-evo .ar{animation:evoIn .55s cubic-bezier(.16,1,.3,1) forwards}
.featured-thesis.in .thesis-evo .ev:nth-child(1){animation-delay:.15s}
.featured-thesis.in .thesis-evo .ar:nth-child(2){animation-delay:.35s}
.featured-thesis.in .thesis-evo .ev:nth-child(3){animation-delay:.5s}
.featured-thesis.in .thesis-evo .ar:nth-child(4){animation-delay:.7s}
.featured-thesis.in .thesis-evo .ev:nth-child(5){animation-delay:.85s}
.featured-thesis.in .thesis-evo .ar:nth-child(6){animation-delay:1.05s}
.featured-thesis.in .thesis-evo .ev.now{animation:evoIn .55s cubic-bezier(.16,1,.3,1) 1.2s forwards,nowGlow 2.8s ease-in-out 2s infinite}
@keyframes nowGlow{0%,100%{text-shadow:0 0 0 rgba(168,146,255,0)}50%{text-shadow:0 0 20px rgba(168,146,255,.8)}}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){
  .thesis-panel::before,.thesis-panel::after{animation:none}
  .featured-thesis.in .thesis-evo .ev,.featured-thesis.in .thesis-evo .ar,.thesis-evo .ev,.thesis-evo .ar{opacity:1;transform:none;animation:none}
  .featured-thesis:hover{transform:none}
}


/* ============================================================
   PRODUCT SCREENSHOTS: Built AI master design system
   Everything inside a .ui-frame renders with the real product's
   tokens (ShadCN Violet + Geist / Geist Mono, Tailwind Slate),
   so screenshots match the app itself, not the marketing chrome.
   Token remap is inherited by every mock surface: .mock, .mgrid,
   .chatmock, .gov-banner, .alog, .mock-recovery.
   ============================================================ */
.ui-frame{
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ink:#0F172A;--ink-2:#334155;--ink-3:#64748B;--ink-4:#94A3B8;
  --indigo:#5C3FDD;--indigo-2:#7C3AED;--indigo-deep:#4C1D95;--indigo-deeper:#2E1065;
  --indigo-wash:#EDE9FE;--indigo-line:#DDD6FE;
  --red:#DC2626;--green:#059669;--amber:#B45309;
  --paper:#FFFFFF;--paper-2:#F8FAFC;--line:#E2E8F0;--line-2:#E2E8F0;
  font-family:var(--sans);
  border-radius:14px;
}
/* browser chrome: neutral slate dots, slate-50 bar (matches homepage frame) */
.ui-frame .ui-bar,.ui-frame.app .ui-bar{background:#F8FAFC;border-bottom-color:var(--line)}
.ui-frame .ui-bar .dots i{width:10px;height:10px}
.ui-frame .ui-bar .dots i:nth-child(1),.ui-frame .ui-bar .dots i:nth-child(2),.ui-frame .ui-bar .dots i:nth-child(3){background:#E2E8F0}
.ui-frame .ui-bar .ui-url{border-radius:6px;color:#64748B}
/* surfaces */
.ui-frame .mock-side,.ui-frame .cm-side,.ui-frame .mock-recovery .mr-trace{background:#F8FAFC}
.ui-frame .mock-side .it{border-radius:6px}
/* in-app type: Geist weights top out at SemiBold, plain-sans breadcrumb */
.ui-frame .mock-bc{font-family:var(--sans);font-size:11.5px;letter-spacing:0;text-transform:none;color:#64748B}
.ui-frame .mock-h .mt,.ui-frame .mock-h h4{font-size:17px;font-weight:600;letter-spacing:-.01em}
.ui-frame .mock-h .live::before{background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.16)}
/* KPI tiles: separate bordered cards, mono values (matches homepage frame) */
.ui-frame .mock-kpis{gap:8px;background:transparent;border:none;border-radius:0;overflow:visible}
.ui-frame .mock-kpi{border:1px solid var(--line);border-radius:8px;padding:10px 11px}
.ui-frame .mock-kpi .kl{font-family:var(--sans);font-size:10px;letter-spacing:0;text-transform:none;color:#64748B;margin-bottom:3px}
.ui-frame .mock-kpi .kv{font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:0}
.ui-frame .mock-kpi .kd{font-weight:500}
/* cards + badges */
.ui-frame .mock-card{border-radius:8px}
.ui-frame .mock-card .mch .t{font-weight:600}
.ui-frame .mock-card .mch .b{border-radius:6px}
/* bold runs use SemiBold, never 700/800 */
.ui-frame .mrow .r b,.ui-frame .mrow .w b,.ui-frame .mrow .w .v,.ui-frame .cm-ai b,.ui-frame .alog .ar .act b,.ui-frame .gov-banner .gb-l b,.ui-frame .mock-recovery .trace-item .ti-v,.ui-frame .cm-side .code .hl{font-weight:600}
/* priority tags: Tailwind tint pairs (matches homepage frame) */
.ui-frame .mrow .r .tg.hi{background:#FEF2F2;color:#DC2626}
.ui-frame .mrow .r .tg.me{background:#FFFBEB;color:#B45309}
.ui-frame .mrow .r .tg.lo{background:#F1F5F9;color:#64748B}
/* cashflow grid */
.ui-frame .mgrid thead th{background:#F8FAFC}
.ui-frame .mgrid td.cited{font-weight:600}
.ui-frame .mgrid td.cited::after{box-shadow:0 0 0 2px rgba(92,63,221,.15)}
.ui-frame .mgrid tr.gtot td{border-top:2px solid #334155;font-weight:600;background:#F8FAFC}
/* governance banner + audit log */
.ui-frame .gov-banner{border-radius:8px}
.ui-frame .gov-banner .gb-v{font-family:var(--mono);font-weight:600}
.ui-frame .alog .ar .st.ok{background:#ECFDF5;color:#059669}
.ui-frame .alog .ar .st.wait{background:#FFFBEB;color:#B45309}
.ui-frame .alog .ar .st.block{background:#FEF2F2;color:#DC2626}
/* analyst chat */
.ui-frame .cm-top .who{font-weight:600}
.ui-frame .cm-top .who .av{border-radius:6px;font-weight:600}
.ui-frame .cm-user{border-radius:10px 10px 4px 10px}
.ui-frame .cm-ai{border-radius:4px 10px 10px 10px}
.ui-frame .cm-ai .chip{background:#FEF2F2;color:#DC2626}
.ui-frame .cm-actions button{border-radius:6px}
.ui-frame .cm-side .code{border-radius:6px}
/* recovery audit: flat violet fill, no gradient */
.ui-frame .mock-recovery .ti-bar i{background:var(--indigo)}

/* mock sidebar items: Lucide icon + label rows (matches homepage frame) */
.ui-frame .mock-side .it{display:flex;align-items:center;gap:8px}
.ui-frame .mock-side .it svg{width:13px;height:13px;flex-shrink:0}

/* ============================================================
   MOBILE FIXES (audit): comparison tables fit 390px, mock tables
   scroll instead of clipping, inline two-column dashboards stack
   on phones.
   ============================================================ */
@media(max-width:480px){.cmp-table th,.cmp-table td{padding:12px 10px;font-size:13px}}
@media(max-width:760px){.mock-main{overflow-x:auto}}
@media(max-width:560px){
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.25fr"],[style*="grid-template-columns: 1.25fr"]{grid-template-columns:1fr !important}
}