@font-face{font-family:"ImperumSans";src:url("/fonts/imperum-sans.73894e04.woff2") format("woff2");font-weight:100 900;font-display:swap}


/* ============ TOKENS ============ */
:root{color-scheme:dark;
  
  --paper:#F1F4FA;             /* the hero's ground */
  --surface-0:#F6F8FB;         /* gutters, wells, grey bands */
  --surface-1:#FFFFFF;         /* cards */
  --surface-2:#EEF2F8;         /* chips, inset fields */
  --band-white:#FFFFFF;
  --band-gray:#F6F8FB;
  --bg:#FFFFFF;
  --bg-soft:#F6F8FB;
  --ink:#091324;               /* 16.86:1 on paper */
  --ink-2:#3A465C;             /* 8.62:1 */
  --ink-3:#4C586D;             /* 6.44:1 — meta labels */
  --caption-ink:#454F63;
  --line:#E2E8F0;              /* hairline-strong: card borders, band rules */
  --line-soft:rgba(9,19,36,.07);/* in-card separators */
  --line-strong:#D8E0EC;       /* frame lines on paper, quiet button border */

  --red:#EF3341;
  --red-deep:#D9202E;          /* red as text on white, 5.00:1 */
  --cyan-t:#0E7490;--green-t:#15803D;--amber-t:#B45309;
  --ring:#0E7490;

  --r-sm:10px;--r-md:16px;--r-lg:24px;
  --sh-1:0 1px 2px rgba(9,19,36,.04),0 10px 28px -12px rgba(9,19,36,.18);   
  --sh-2:0 2px 4px rgba(9,19,36,.05),0 16px 38px -12px rgba(9,19,36,.22);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.2,.8,.2,1);
  --dur-micro:150ms;
  color-scheme:light;
}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size:140px 140px;mix-blend-mode:overlay;opacity:.07;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--surface-0);color:var(--ink-2);
  font-family:"ImperumSans",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.meta{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.mono{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;letter-spacing:0;font-variant-numeric:tabular-nums;font-weight:500}
.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}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}

/* reveals — quiet: 12px, 600ms */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(12px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--rd,0ms)}


.nav{position:fixed;top:clamp(10px,1.6svh,16px);left:0;right:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:32px;width:min(1240px,calc(100% - 32px));margin:0 auto;
  padding:10px 12px 10px 28px}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;
  background:linear-gradient(120deg,rgba(255,255,255,.72),rgba(255,255,255,.58) 55%,rgba(255,255,255,.68));
  box-shadow:inset 0 0 0 1px rgba(9,19,36,.10),0 10px 30px rgba(9,19,36,.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  pointer-events:none;
  transition:box-shadow var(--dur-micro) var(--ease-snap)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav::before{background:rgba(255,255,255,.94)}
}
/* scrolled state — set by initNav()'s IntersectionObserver on a sentinel 40px
   down the document (no scroll listener). One step deeper than the resting shadow. */
.nav[data-scrolled]::before{
  box-shadow:inset 0 0 0 1px rgba(9,19,36,.12),0 16px 44px rgba(9,19,36,.18)}
/* the wordmark carries the CTA red (#E00030 = the left stop of the .btn-solid /
   .nav-btn.solid pair). Every path in the lockup is fill="currentColor", so one
   colour declaration paints the mark and the type together. */
.nav-logo{display:block;line-height:0;color:#E00030;justify-self:start}
/* overflow:visible + a padded viewBox: the wordmark's last path ends exactly on
   the viewBox edge (x=858.23), so the outer svg's default overflow:hidden shaved
   the anti-aliased column off the final m. */
.nav-logo svg{display:block;width:150px;height:auto;overflow:visible}
.nav-links{display:flex;gap:36px;justify-self:center;
  font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;
  text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;font-weight:500}
.nav-links a{position:relative;color:var(--ink-3);text-decoration:none;transition:color var(--dur-micro)}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform 180ms var(--ease-snap)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-ctas{display:flex;align-items:center;justify-self:end;grid-column:3}  /* stays in column 3 when .nav-links is display:none */
.nav-btn{display:inline-flex;align-items:center;text-decoration:none;font-size:15px;font-weight:500;
  height:40px;padding:0 20px;border-radius:999px;letter-spacing:-.01em;white-space:nowrap;
  transition:background var(--dur-micro),transform var(--dur-micro) var(--ease-snap),box-shadow var(--dur-micro),color var(--dur-micro)}
.nav-btn.solid{background:var(--ink);color:var(--paper)}
.nav-btn.solid:hover{background:#1B2740;transform:translateY(-1px);box-shadow:0 4px 14px -6px rgba(9,19,36,.35)}
.nav-btn.solid:active{transform:translateY(0)}
/* past the hero: the D6 red pair (same stops as .btn-solid) */
.nav[data-past-hero] .nav-btn.solid{background:linear-gradient(90deg,#E00030,#E31E42);color:#fff;
  box-shadow:0 1px 2px rgba(9,19,36,.06),0 10px 24px -10px rgba(224,0,48,.45)}
.nav[data-past-hero] .nav-btn.solid:hover{background:linear-gradient(90deg,#C9002B,#CF1A3B);
  box-shadow:0 1px 2px rgba(9,19,36,.06),0 14px 30px -10px rgba(224,0,48,.5)}

/* the hamburger — two plain strokes that morph to an x. Shown wherever the links hide. */
.mb-btn{display:none;position:relative;align-items:center;justify-content:center;
  width:40px;height:40px;margin-left:8px;padding:0;border:0;border-radius:999px;
  background:transparent;cursor:pointer;color:var(--ink);flex:none;
  transition:background var(--dur-micro)}
.mb-btn:hover{background:rgba(9,19,36,.06)}
.mb-s{position:absolute;left:11px;width:18px;height:2px;border-radius:1px;
  background:currentColor;
  transition:transform var(--dur-micro) var(--ease-snap),translate var(--dur-micro) var(--ease-snap)}
.mb-s:nth-child(1){translate:0 -3.5px}
.mb-s:nth-child(2){translate:0 3.5px}
.mb-btn[aria-expanded="true"] .mb-s:nth-child(1){translate:0 0;transform:rotate(45deg)}
.mb-btn[aria-expanded="true"] .mb-s:nth-child(2){translate:0 0;transform:rotate(-45deg)}
@media (max-width:999px){
  .nav-links{display:none}
  .mb-btn{display:inline-flex}
}
@media (max-width:740px){
  .nav{width:calc(100% - 24px);top:10px;padding:7px 8px 7px 18px;gap:10px}
  .nav-logo svg{width:122px}
  .mb-btn{width:36px;margin-left:2px}
  .mb-s{left:9px}
}
/* the backdrop. z:-2 inside the header's stacking context: under the glass
   ::before (-1) and every grid item, but the whole context sits at z-index:50,
   so it still veils the page below. */
.mb-backdrop{position:fixed;inset:0;z-index:-2;background:rgba(9,19,36,.28)}
.mb-backdrop[hidden]{display:none}
/* the panel — a full-width sheet under the pill. initNav() sets top from the
   header's live rect on open. Closed = visibility (transitions only, keyed off
   aria-hidden; hidden content leaves the focus order). */
.mb-panel{position:fixed;left:12px;right:12px;z-index:1;
  display:flex;flex-direction:column;
  max-height:calc(100svh - 96px);overflow:auto;
  background:var(--surface-1);border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(9,19,36,.08),0 24px 64px -16px rgba(9,19,36,.30);
  padding:10px 18px 18px;
  visibility:hidden;opacity:0;translate:0 -6px;
  transition:opacity var(--dur-micro) var(--ease-snap),
             translate var(--dur-micro) var(--ease-snap),
             visibility 0s var(--dur-micro)}
.mb-panel[aria-hidden="false"]{visibility:visible;opacity:1;translate:0 0;
  transition:opacity var(--dur-micro) var(--ease-snap),
             translate var(--dur-micro) var(--ease-snap),
             visibility 0s 0s}
.mb-links{display:flex;flex-direction:column}
.mb-links a{display:block;padding:15px 6px;font-size:17px;font-weight:500;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line-soft);border-radius:10px;
  transition:background var(--dur-micro)}
.mb-links a:hover{background:var(--surface-2)}
.mb-links a:last-child{border-bottom:0}
.mb-cta{justify-content:center;margin-top:12px}


.nav-links .nl{appearance:none;background:none;border:0;padding:0 0 2px;margin:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink-3);position:relative;
  transition:color var(--dur-micro)}
.nav-links .nl:hover,.nav-links .nl[aria-expanded="true"]{color:var(--ink)}
.nav-links .nl::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--ease-snap)}
.nav-links .nl:hover::after,.nav-links .nl[aria-expanded="true"]::after{transform:scaleX(1)}
.nav-links .nl:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.nav-ctas{gap:6px}
/* the mega panel. Absolute inside the fixed header (which is never transformed),
   so left/right 0 = the pill's own edges. */
.mm{position:absolute;top:100%;left:0;right:0;z-index:1;padding-top:8px;pointer-events:none}
.mm-panel{position:absolute;left:0;right:0;top:8px;
  display:grid;gap:8px 28px;padding:22px 26px 24px;
  background:var(--surface-1);border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(9,19,36,.08),0 24px 64px -16px rgba(9,19,36,.30);
  visibility:hidden;opacity:0;translate:0 -6px;pointer-events:none;
  transition:opacity var(--dur-micro) var(--ease-snap),translate var(--dur-micro) var(--ease-snap),visibility 0s var(--dur-micro)}
.mm-panel[aria-hidden="false"]{visibility:visible;opacity:1;translate:0 0;pointer-events:auto;
  transition:opacity var(--dur-micro) var(--ease-snap),translate var(--dur-micro) var(--ease-snap),visibility 0s 0s}
.mm-cols-1{grid-template-columns:repeat(4,minmax(0,1fr))}
.mm-cols-1 .mm-col{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 16px}
.mm-cols-1 .mm-h{grid-column:1/-1}
.mm-cols-2{grid-template-columns:1.1fr 1fr}
.mm-cols-3{grid-template-columns:1fr .85fr 1.15fr}
.mm-cols-4{grid-template-columns:1fr 1.25fr .85fr .9fr}
.mm-h.mm-h2{margin-top:28px}
.mm-col{min-width:0}
.mm-h{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink-4,#8A97AD);margin:0 0 8px;padding:0 10px}
.mm-item{display:block;padding:9px 10px 10px;border-radius:12px;text-decoration:none;color:var(--ink);
  transition:background var(--dur-micro)}
.mm-item:hover,.mm-item:focus-visible{background:var(--surface-2);outline:none}
.mm-item b{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:530;letter-spacing:-.005em;line-height:1.25;text-transform:none}
.mm-item span{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--ink-3);text-transform:none;letter-spacing:0;font-family:"ImperumSans",Inter,system-ui,sans-serif}
.mm-tag{font-style:normal;font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;letter-spacing:0;
  text-transform:none;color:var(--ink-3);background:var(--surface-2);border-radius:4px;padding:2px 6px;line-height:1.3;white-space:nowrap;font-weight:500}
.mm-item:hover .mm-tag{background:#fff}
.mm-sub{display:block;position:relative;margin:0 0 1px;padding:4px 10px 4px 26px;border-radius:8px;
  text-decoration:none;color:var(--ink-2);font-size:12.5px;font-weight:500;letter-spacing:0;line-height:1.35;
  font-family:"ImperumSans",Inter,system-ui,sans-serif;text-transform:none}
.mm-sub::before{content:"";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45}
.mm-sub:hover,.mm-sub:focus-visible{background:var(--surface-2);color:var(--ink);outline:none}
a.mm-item.has-subs{padding-bottom:4px}
.mm-subs{margin:0 0 8px}
/* mobile accordion */
.mb-sec{border-bottom:1px solid var(--line-soft)}
.mb-sec:last-child{border-bottom:0}
.mb-acc{display:flex;width:100%;align-items:center;justify-content:space-between;appearance:none;background:none;border:0;
  padding:15px 6px;font:inherit;font-size:17px;font-weight:500;letter-spacing:-.01em;color:var(--ink);cursor:pointer;border-radius:10px}
.mb-acc:hover{background:var(--surface-2)}
.mb-chev{width:16px;height:16px;transition:transform var(--dur-micro) var(--ease-snap)}
.mb-acc[aria-expanded="true"] .mb-chev{transform:rotate(180deg)}
.mb-body{padding:0 6px 12px}
.mb-body[hidden]{display:none}
.mb-h{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink-4,#8A97AD);margin:22px 0 4px;padding:0 8px}
.mb-body>.mb-h:first-child{margin-top:2px}
.mb-links .mb-item{display:block;padding:9px 8px;border:0;border-radius:8px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.mb-links .mb-item:hover{background:var(--surface-2)}
.mb-links .mb-sub{display:block;position:relative;margin:0 0 1px;padding:5px 8px 5px 24px;border:0;border-radius:8px;
  text-decoration:none;color:var(--ink-2);font-size:13px;font-weight:500;line-height:1.35}
.mb-links .mb-sub::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45}
.mb-links .mb-sub:hover{background:var(--surface-2);color:var(--ink)}
.mb-links .mb-item b{display:flex;align-items:center;gap:8px;font-weight:500}
.mb-links .mb-item span{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:1px}
.mb-ctas{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.mb-ctas .nav-btn{justify-content:center;margin:0}

/* radius is a FIXED 28px: on the 56px pill the browser clamps it to a capsule, so
   the shape never morphs, it only grows. (999px -> 28px interpolated as a swelling
   blob: the closed radius stays a capsule until the box is tall enough, then snaps.) */
.nav::before{bottom:calc(-1 * var(--mm-h,0px));border-radius:28px;
  transition:box-shadow var(--dur-micro) var(--ease-snap),
    bottom 240ms var(--ease-snap) 100ms,
    background 240ms var(--ease-snap) 100ms}
.nav[data-menu-open]::before{
  background:linear-gradient(120deg,rgba(255,255,255,.90),rgba(255,255,255,.86) 55%,rgba(255,255,255,.89));
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(9,19,36,.10),0 24px 64px -16px rgba(9,19,36,.30);
  transition:box-shadow var(--dur-micro) var(--ease-snap),
    bottom 420ms var(--ease-grow) 0ms,
    background 300ms var(--ease-snap) 0ms}
/* hairline under the pill row once open, so the top row still reads as the nav */
.nav::after{content:"";position:absolute;left:24px;right:24px;top:100%;height:1px;z-index:1;
  background:var(--line-soft);opacity:0;pointer-events:none;transition:opacity 160ms var(--ease-snap) 60ms}
.nav[data-menu-open]::after{opacity:1;transition-delay:180ms}
.mm{height:var(--mm-h,0px);overflow:hidden;padding-top:0;
  transition:height 240ms var(--ease-snap) 100ms}
.nav[data-menu-open] .mm{transition:height 420ms var(--ease-grow) 0ms}
.nav{--ease-grow:cubic-bezier(.16,1,.3,1)}
.mm-panel{background:none;box-shadow:none;border-radius:0;translate:0 0;
  transition:opacity 120ms var(--ease-snap),visibility 0s 120ms}
.mm-panel[aria-hidden="false"]{translate:0 0;transition:opacity 120ms var(--ease-snap),visibility 0s 0s}
.mm-col{opacity:0;translate:0 8px;transition:opacity 120ms var(--ease-snap),translate 120ms var(--ease-snap)}
.mm-panel[aria-hidden="false"] .mm-col{opacity:1;translate:0 0;
  transition:opacity 260ms var(--ease-snap),translate 260ms var(--ease-snap);
  transition-delay:calc(140ms + var(--i,0) * 50ms)}
.mm-col:nth-child(2){--i:1}.mm-col:nth-child(3){--i:2}.mm-col:nth-child(4){--i:3}
@media (prefers-reduced-motion:reduce){
  .nav::before,.nav[data-menu-open]::before,.mm,.nav[data-menu-open] .mm{transition:none}
  .mm-col,.mm-panel[aria-hidden="false"] .mm-col{translate:0 0;transition:opacity 120ms;transition-delay:0ms}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:16px;font-weight:530;letter-spacing:-.005em;line-height:1;
  padding:16px 28px;border-radius:999px;
  transition:background .15s,border-color .15s,transform .15s var(--ease),box-shadow .15s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}

.btn-solid{position:relative;overflow:hidden;background:linear-gradient(90deg,#E00030,#E31E42);color:#fff;box-shadow:0 1px 2px rgba(9,19,36,.06),0 10px 24px -10px rgba(224,0,48,.45)}
.btn-solid:hover{background:linear-gradient(90deg,#C9002B,#CF1A3B);box-shadow:0 1px 2px rgba(9,19,36,.06),0 14px 30px -10px rgba(224,0,48,.5)}
.btn-quiet{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.btn-quiet:hover{border-color:#B9C4D3}
.btn-sm{padding:12px 20px;font-size:15px}
/* on crimson */
.btn-white{background:#fff;color:var(--crimson-2)}
.btn-white:hover{background:#F4F4F6}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32)}
.btn-outline:hover{border-color:rgba(255,255,255,.55)}

@property --rim-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn,.nav-btn{
  --lift:0px;--sc:1;
  position:relative;isolation:isolate;overflow:hidden;
  -webkit-tap-highlight-color:transparent;cursor:pointer;
  transform:translateY(var(--lift)) scale(var(--sc));
  transition:transform 260ms cubic-bezier(.34,1.45,.64,1),box-shadow 260ms var(--ease),
             background 200ms var(--ease),border-color 200ms,color 200ms;
  will-change:transform}
.btn{font-size:19px;font-weight:600;letter-spacing:-.01em;padding:18px 34px;gap:10px}
.btn-sm{font-size:16.5px;padding:14px 26px}
.btn svg{width:16px;height:16px;transition:transform 260ms cubic-bezier(.34,1.45,.64,1)}
.nav-btn{height:46px;padding:0 26px;font-size:16.5px;font-weight:600}
.btn:hover,.nav-btn:hover{--lift:-2px;--sc:1.02}
.btn:hover svg,.nav-btn:hover svg{transform:translateX(4px)}
.btn:active,.nav-btn:active{--lift:1px;--sc:.97;transition-duration:60ms}
.btn:focus-visible,.nav-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* sheen (::before) and rim light (::after) */
.btn-solid::before,.nav-btn.solid::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translateX(-120%);opacity:0}
.btn-solid:hover::before,.nav-btn.solid:hover::before{animation:btn-sheen 720ms var(--ease) 60ms forwards}
@keyframes btn-sheen{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:1}}
.btn-solid::after,.nav-btn.solid::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;padding:1.25px;
  background:conic-gradient(from var(--rim-a),transparent 0 62%,rgba(255,255,255,.95) 78%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity 300ms var(--ease)}
.btn-solid:hover::after,.nav-btn.solid:hover::after{opacity:1;animation:btn-rim 1.8s linear infinite}
@keyframes btn-rim{to{--rim-a:360deg}}


.btn-solid,.nav[data-past-hero] .nav-btn.solid{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 45%),linear-gradient(90deg,#F90033,#FF3961);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(120,0,25,.28),
             0 1px 2px rgba(120,0,25,.18),0 10px 24px -10px rgba(249,0,51,.50)}
.btn-solid:hover,.nav[data-past-hero] .nav-btn.solid:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%),linear-gradient(90deg,#FF0F44,#FF4E72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(120,0,25,.28),
             0 2px 4px rgba(120,0,25,.16),0 18px 34px -10px rgba(249,0,51,.58)}
.btn-solid:active,.nav[data-past-hero] .nav-btn.solid:active{
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0) 50%),linear-gradient(90deg,#E4002F,#F02F57);
  box-shadow:inset 0 2px 6px rgba(120,0,25,.38),inset 0 1px 0 rgba(120,0,25,.20),
             0 1px 2px rgba(120,0,25,.16),0 4px 10px -6px rgba(249,0,51,.40)}
/* release: overshoot + ring. --rp = ring colour, set per variant. */
.btn-solid,.nav[data-past-hero] .nav-btn.solid{--rp:249,0,51}
.nav-btn.solid{--rp:9,19,36}
.btn-quiet{--rp:9,19,36}
.is-released{animation:btn-spring 480ms cubic-bezier(.34,1.56,.64,1) both}
.is-released:hover{animation-name:btn-spring-hover}
@keyframes btn-spring{
  0%{transform:translateY(1px) scale(.97);box-shadow:0 0 0 0 rgba(var(--rp),.42),0 1px 2px rgba(120,0,25,.16)}
  40%{transform:translateY(-3px) scale(1.035)}
  100%{transform:translateY(0) scale(1);box-shadow:0 0 0 14px rgba(var(--rp),0),0 10px 24px -10px rgba(var(--rp),.50)}}
@keyframes btn-spring-hover{
  0%{transform:translateY(1px) scale(.97);box-shadow:0 0 0 0 rgba(var(--rp),.42),0 1px 2px rgba(120,0,25,.16)}
  40%{transform:translateY(-3.5px) scale(1.04)}
  100%{transform:translateY(-2px) scale(1.02);box-shadow:0 0 0 14px rgba(var(--rp),0),0 18px 34px -10px rgba(var(--rp),.58)}}

/* small solids (16.5px = normal text) keep the D6 pair, 4.99/4.64:1 on white */
.path .btn{font-size:16.5px;padding:14px 26px}
.btn-solid.btn-sm,.path .btn-solid{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 45%),linear-gradient(90deg,#E00030,#E31E42)}
.btn-solid.btn-sm:hover,.path .btn-solid:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%),linear-gradient(90deg,#E8153F,#EA3556)}
.btn-solid.btn-sm:active,.path .btn-solid:active{background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0) 50%),linear-gradient(90deg,#C9002B,#CF1A3B)}
/* nav CTA in the hero: ink, same mechanics, white rim light */
.nav-btn.solid{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 45%),var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(9,19,36,.18),0 8px 20px -10px rgba(9,19,36,.45)}
.nav-btn.solid:hover{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 45%),#1B2740;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 4px rgba(9,19,36,.14),0 14px 30px -10px rgba(9,19,36,.45)}
.nav-btn.solid:active{background:#0B1528;box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 2px 6px -4px rgba(9,19,36,.4)}
/* quiet: lifts and sinks too, no sheen */
.btn-quiet{box-shadow:0 1px 2px rgba(9,19,36,.04),0 8px 20px -12px rgba(9,19,36,.18)}
.btn-quiet:hover{border-color:#B9C4D3;box-shadow:0 2px 4px rgba(9,19,36,.05),0 14px 30px -12px rgba(9,19,36,.22)}
.btn-quiet:active{background:#F4F6F9;box-shadow:inset 0 2px 5px rgba(9,19,36,.10)}
.btn-ghost,.btn-arrow{overflow:visible}
.btn-ghost:hover,.btn-arrow:hover,.btn-ghost:active,.btn-arrow:active{--lift:0px;--sc:1}
.mb-ctas .nav-btn{height:48px}
@media (prefers-reduced-motion:reduce){
  .btn,.nav-btn,.btn svg,.nav-btn svg{transition:none;transform:none}
  .btn::before,.btn::after,.nav-btn::before,.nav-btn::after,.is-released{animation:none!important}
}

/* text link */
.tlink{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:530;color:var(--ink)}
.tlink svg{width:14px;height:14px;transition:transform .18s var(--ease)}
.tlink:hover svg{transform:translateX(2px)}
.tlink.red{color:var(--red-deep)}

.arr-i{width:14px;height:14px}



.hero{position:relative;overflow:hidden;background:var(--paper);min-height:100svh;display:flex;flex-direction:column;padding:150px 0 0;text-align:center}
.hero-grid{display:flex;flex-direction:column;align-items:center;gap:0;flex:1 1 auto;width:100%}
.hero-copy{max-width:980px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.h1{
  margin:0;
  font-size:clamp(38px,4.4vw,64px);line-height:1.06;letter-spacing:-.028em;white-space:nowrap;
  font-weight:500;color:var(--ink);
}
.sub{margin:20px auto 0;max-width:62ch;font-size:clamp(14px,1.2vw,16.5px);line-height:1.65;color:var(--ink-2)}
.cta-row{display:flex;justify-content:center;align-items:center;gap:12px;margin:36px 0 0;flex-wrap:wrap}
.hero .cta-row{justify-content:center;margin-top:30px}
/* the slot: everything under the copy down to the hero's bottom edge. min-height keeps the sphere from
   collapsing on short viewports (the hero then grows past 100svh). */
.atom-slot{width:100%;flex:1 1 auto;min-height:380px;margin-top:0}


.bp{position:absolute;left:0;right:0;bottom:62px;height:1px;z-index:2;pointer-events:none;
  --recog-half:410px;--recog-fade:120px;
  background:linear-gradient(to right,
    var(--line) 0,
    var(--line) calc(50% - var(--recog-half) - var(--recog-fade)),
    rgba(226,232,240,0) calc(50% - var(--recog-half)),
    rgba(226,232,240,0) calc(50% + var(--recog-half)),
    var(--line) calc(50% + var(--recog-half) + var(--recog-fade)),
    var(--line) 100%)}
.bp .cm{position:absolute;top:-5px;width:11px;height:11px;color:rgba(9,19,36,.30)}
.bp .cm-l{left:max(20px,calc(50% - 625px))}
.bp .cm-r{right:max(20px,calc(50% - 625px))}
.bp .cm svg{display:block;width:11px;height:11px;stroke:currentColor;stroke-width:1}

.recog{position:absolute;left:50%;bottom:47px;transform:translateX(-50%);z-index:3;margin:0;
  display:flex;align-items:center;justify-content:center;gap:28px;white-space:nowrap}
.recog .meta{color:rgba(0,0,0,.45);font-size:15px} /* recog round: same grey as the marks (brightness(0) at .45) */

.recog .r-mark{display:block}
.recog .r-mark svg{display:block;height:21px;width:auto;filter:brightness(0);opacity:.45;transition:opacity var(--dur-micro)}
.recog .r-mark:hover svg{opacity:.7}
.recog .r-gartner svg{height:22px}
.recog .r-gigaom svg{height:21px}
.recog .r-idc svg{height:21px}
.recog .r-qks svg{height:21px}
.recog .r-ecso svg{height:29px} 
/* the reveal must not move the row off the line while the transform runs: translateX only */
.js .recog.rv{transform:translate(-50%,12px)}
.js .recog.rv.in{transform:translate(-50%,0)}

/* the blurred colour field behind the right half — the one from the footer family */

.hero-aura{position:absolute;inset:0;pointer-events:none;-webkit-mask:linear-gradient(180deg,#000 62%,rgba(0,0,0,.45) 100%);mask:linear-gradient(180deg,#000 62%,rgba(0,0,0,.45) 100%)}
.hero-aura i{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;display:none} 
.hero-aura .a1{width:680px;height:680px;right:-100px;top:-60px;opacity:.22;
  background:radial-gradient(circle,#FF6A4E,transparent 66%);animation:drift1 24s ease-in-out infinite alternate}

.hero-aura .a2{width:720px;height:720px;left:-180px;bottom:-140px;opacity:.26;
  background:radial-gradient(circle,#FF5A48,transparent 66%);animation:drift2 30s ease-in-out infinite alternate}
.hero-aura::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(9,19,36,.4) .7px,transparent 1px);
  background-size:3px 3px;
  
  opacity:.085;
}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(-110px,80px) scale(1.14)}}
@keyframes drift2{from{transform:translate(0,0) scale(.96)}to{transform:translate(90px,-70px) scale(1.1)}}
@keyframes drift3{from{transform:translate(0,0) scale(1.08)}to{transform:translate(-70px,-90px) scale(.94)}}
.hero .wrap{position:relative;z-index:1}

.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:260px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
/* the canvas spans the whole hero so the cables can leave from the corners; .atom-slot only reserves the space */
.atom-stage{position:absolute;inset:0;z-index:0;pointer-events:none;margin:0}
.atom-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* three stops, set from JS: crisp to --fade0 (just above the core's centre), crossfading to the blurred twin
   by --fade1 (the fold line), the blur fading out to --fade2 (the hero's bottom edge) */
.atom-stage{--fade0:60%;--fade1:80%;--fade2:100%}
#atom{-webkit-mask:linear-gradient(180deg,#000 var(--fade0),transparent var(--fade1));mask:linear-gradient(180deg,#000 var(--fade0),transparent var(--fade1))}
#atom-blur{filter:blur(16px);-webkit-mask:linear-gradient(180deg,transparent var(--fade0),rgba(0,0,0,.7) var(--fade1),transparent var(--fade2));mask:linear-gradient(180deg,transparent var(--fade0),rgba(0,0,0,.7) var(--fade1),transparent var(--fade2))}
/* S2 head, centred to match the hero */
.sec-head.center{text-align:center}
.sec-head.center .lead{margin:18px auto 0;max-width:62ch}

/* ============ SECTION SCAFFOLD ============ */

.sec{padding:56px 0 72px}
.band-w{background:var(--band-white)}
.band-g{background:var(--band-gray)}
.kick{display:block;margin:0 0 20px;color:var(--ink-3)}
.h2{margin:0;font-size:clamp(30px,3.2vw,42px);line-height:1.16;letter-spacing:-.016em;font-weight:300;color:var(--ink)}
.lead{margin:16px 0 0;max-width:56ch;font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.sec-head{margin:0 0 44px}
.sec-head.split{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}

/* ============ S2 — PROBLEM: aurora feature panels ============ */
.lead.side{max-width:36ch;font-size:15px;margin:0;padding-bottom:6px}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fitem h3{margin:20px 0 6px;font-size:16.5px;font-weight:590;letter-spacing:-.012em;color:var(--ink)}
.fitem>p{margin:0;font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.fpanel{
  position:relative;border-radius:18px;overflow:hidden;
  aspect-ratio:1/0.92;background:var(--ink);   
  display:flex;align-items:center;justify-content:center;
}
.mock{
  position:relative;z-index:1;width:80%;
  background:#fff;border-radius:12px;padding:16px 18px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6);
}
.mock .mrow{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line-soft)}
.mock .mrow:last-of-type{border-bottom:0}
.mock .dot{width:6px;height:6px;border-radius:50%;flex:none}
.mock .ml{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.mock .mr{margin-left:auto;font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;letter-spacing:0;color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:500}
.mock .more{margin-top:10px;text-align:center;font-size:12px;font-weight:500;color:var(--red-deep)}
.tools{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,auto);gap:14px 16px}
.tchip{
  background:#fff;border-radius:10px;padding:10px 14px;
  font-size:12.5px;font-weight:500;color:var(--ink-2);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.55);
}
.tools .tchip{transform:rotate(var(--r)) translateY(var(--y));animation:chipBob var(--bd) ease-in-out var(--bo) infinite alternate}
.tools .tchip:nth-child(1){--r:-4deg;--y:4px;--bd:2.8s;--bo:0s}
.tools .tchip:nth-child(2){--r:3deg;--y:-6px;--bd:3.4s;--bo:-1.2s}
.tools .tchip:nth-child(3){--r:-2deg;--y:8px;--bd:3.1s;--bo:-2s}
.tools .tchip:nth-child(4){--r:5deg;--y:-2px;--bd:3.6s;--bo:-.6s}
.tools .tchip:nth-child(5){--r:-5deg;--y:-8px;--bd:2.9s;--bo:-1.7s}
.tools .tchip:nth-child(6){--r:2deg;--y:6px;--bd:3.3s;--bo:-2.5s}
@keyframes chipBob{
  0%{transform:rotate(var(--r)) translateY(calc(var(--y) - 5px)) scale(.98)}
  50%{transform:rotate(calc(var(--r) + 2deg)) translateY(var(--y)) scale(1.03)}
  100%{transform:rotate(var(--r)) translateY(calc(var(--y) + 5px)) scale(.98)}
}
.mock .q{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em;padding:2px 2px 10px;border-bottom:1px solid var(--line-soft)}
/* shimmer as a translated pseudo (transform), not a background-position paint loop */
.mock .ghost{position:relative;overflow:hidden;height:7px;border-radius:4px;margin:10px 2px 0;background:var(--surface-2)}
.mock .ghost::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-100%);animation:shimmerX 1.8s linear infinite}
@keyframes shimmerX{to{transform:translateX(100%)}}
.mock .ghost.g2::after{animation-delay:.15s}
.mock .ghost.g3::after{animation-delay:.3s}
.mock .ghost.g2{width:72%}
.mock .ghost.g3{width:46%}
.mock .noctx{
  display:inline-block;margin:14px 2px 2px;padding:5px 9px;border-radius:6px;
  background:rgba(239,51,65,.10);color:var(--red-deep);
  font-size:11px;font-weight:600;
}

/* the outcome statement — milky-to-white wash with the footer's woven dot mesh */
.outcome{
  position:relative;margin:0;padding:104px 48px;border-radius:24px;overflow:hidden;
  background:var(--surface-0);box-shadow:inset 0 0 0 1px var(--line-soft);text-align:center;
}
.outcome::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 88% 112%,rgba(239,51,65,.05),transparent 68%);
}
.outcome>*{position:relative;z-index:1}
.outcome .h2{margin:0 auto;max-width:24ch}
.outcome>p{margin:18px auto 0;max-width:56ch;font-size:16px;color:var(--ink-2)}
.outcome .row{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:32px;flex-wrap:wrap}
.outcome .btn{white-space:nowrap}
.btn-ghost{background:transparent;border:0;padding:12px 8px;color:var(--red-deep)}
.btn svg{width:14px;height:14px;flex:none}
.btn-ghost svg{stroke:currentColor}
.btn-ghost:hover{opacity:.8}
.outcome .btn svg{width:16px;height:16px;flex:none}

/* ============ S3 — PROCESS: bento cards on crimson ============
   Same grammar as the S2 aurora panels: dark ground, red glow rising from
   the bottom edge, woven dot mesh, and a white product surface inside.
   Cards sit on the crimson band as glass so the band still reads through. */
.band{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(80% 90% at 12% 0%,rgba(255,255,255,.10),transparent 55%),
    linear-gradient(168deg,var(--crimson-1) 0%,var(--crimson-2) 52%,var(--crimson-3) 100%);
}
.band .h2{color:#fff}
.band .lead{color:rgba(255,255,255,.78)}
.band .kick{color:rgba(255,255,255,.55)}
.band>.wrap{position:relative;z-index:1}
.actions{display:flex;gap:12px;margin-top:48px;flex-wrap:wrap}

.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.scard{
  position:relative;grid-column:span 2;
  display:flex;flex-direction:column;
  border-radius:18px;overflow:hidden;padding:24px 24px 0;
  background:var(--surface-0);
  border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .3s,box-shadow .45s var(--ease);
}
.scard.wide{grid-column:span 3}
.scard::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 45% at 85% 112%,rgba(239,51,65,.06),transparent 68%),
    radial-gradient(60% 40% at 8% 115%,rgba(239,51,65,.04),transparent 70%);
  opacity:.9;transition:opacity .45s var(--ease);
}
.scard>*{position:relative;z-index:1}
.scard:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--sh-2)}
.scard:hover::before{opacity:1}
.shead{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sico{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);
  transition:background .3s,transform .45s var(--ease);
}
.sico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.scard:hover .sico{border-color:var(--red-deep);color:var(--red-deep);transform:rotate(-8deg)}
.shead h3{margin:0;font-size:17px;font-weight:590;letter-spacing:-.014em;color:var(--ink)}
.shead .n{margin-left:auto;color:var(--ink-3)}
.scard>p{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.smock{margin-top:auto;padding-top:22px;display:flex;align-items:flex-end;justify-content:center}
.sm{
  width:100%;height:204px;overflow:hidden;
  background:#fff;border-radius:12px 12px 0 0;padding:12px 16px;
  border:1px solid var(--line);border-bottom:0;
  box-shadow:0 20px 44px -24px rgba(9,19,36,.28);
  color:var(--ink-2);
  transform:translateY(10px);transition:transform .45s var(--ease);
}
.scard:hover .sm{transform:translateY(4px)}
.scard.wide .sm{height:220px}

.sm{font-family:inherit;letter-spacing:-.005em}
.sm .r{display:flex;align-items:center;gap:10px;padding:0 2px;height:34px;border-bottom:1px solid var(--line-soft);font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.sm .r:last-child{border-bottom:0}
.sm .r .dot{width:6px;height:6px;border-radius:50%;flex:none}
.sm .r .ml{flex:none}
.sm .r .mr{margin-left:auto;font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;color:var(--ink-3);letter-spacing:0;font-weight:500}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;font-size:10.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.pill.ok{background:rgba(34,197,94,.13);color:var(--green-t)}
.pill.red{background:rgba(239,51,65,.10);color:var(--red-deep)}
.pill.amb{background:rgba(245,158,11,.10);color:var(--amber-t)}
.pill.ink{background:var(--surface-2);color:var(--ink)}
.pill.ok::before,.pill.amb::before,.pill.red::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.amb::before{animation:blink 1.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* 01 connect — sources arrive one by one (entrances via [data-e], see the motion block) */
.sm .r .pill[data-e]{transition-delay:calc(var(--d,0s) + var(--sd,.25s) + .3s)}

/* 02 enrich — hub graphic, pulses run from each context source to the case */
.hub{width:auto;height:82%;display:block;overflow:visible}   /* percent height needs a flex parent with a definite height (.sm has one) */
.sm.scene[data-scene="s3-enrich"]{display:flex;align-items:center;justify-content:center}
.hub .l{stroke:#DCDFE6;stroke-width:1.2;fill:none}
.hub .pz{stroke:#EF3341;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-dasharray:12 400;stroke-dashoffset:412;animation:pulse 3.6s cubic-bezier(.4,0,.2,1) infinite}
.js .scene:not(.done) .hub .pz{animation-play-state:paused}   /* idle packets wait for the entrance */
.hub .pz{animation-delay:var(--d,0s)}   /* inline --d; the old :nth-of-type stagger counted the .l paths and never matched */
@keyframes pulse{0%{stroke-dashoffset:412;opacity:0}8%{opacity:1}60%,100%{stroke-dashoffset:0;opacity:0}}
.hub .chip rect{fill:var(--surface-2);stroke:var(--line)}
.hub .chip text{fill:var(--ink-2);font-family:"ImperumSans",system-ui,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-anchor:middle;dominant-baseline:middle}
.hub .core{animation:coreBreath 3.6s ease-in-out infinite}
.hub .core circle.o{fill:#fff;stroke:#DCDFE6;stroke-width:1}
.hub .core circle.i{fill:var(--ink)}
.hub .core text{fill:#fff;font-family:"ImperumSans",system-ui,sans-serif;font-size:10.5px;letter-spacing:.1em;text-anchor:middle;dominant-baseline:middle;font-weight:600}
@keyframes coreBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.hub .core{transform-origin:160px 86px;transform-box:view-box}

/* 03 investigate — agent progress bars fill in sequence, loop */
.ag{display:flex;align-items:center;gap:10px;padding:0 2px;height:34px;font-size:13px;font-weight:500;color:var(--ink)}
.ag .ml{width:128px;flex:none;white-space:nowrap}
.ag .bar{flex:1;height:5px;border-radius:3px;background:#EEF0F4;overflow:hidden}
.ag .bar i{display:block;height:100%;width:100%;border-radius:3px;background:var(--ink)}
.ag .bar i[data-e]{transition-duration:.9s;transition-delay:calc(var(--d,0s) + var(--sd,.25s) + .25s)}
.ag .st b[data-e]{transition-delay:calc(var(--d,0s) + var(--sd,.25s) + 1.1s)}
.ag .st{width:76px;flex:none;text-align:right;font-size:11px;font-weight:600;color:var(--ink-3)}
.ag .st b{font-weight:600;color:var(--green-t)}

/* 04 prioritize — verdict card, confidence meter counts up, loop */
.vd .t{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--line-soft);font-size:11px;color:var(--ink-3)}
.vd .t>span:first-child{font-family:"ImperumSans",system-ui,sans-serif;letter-spacing:0;font-weight:500}
.vd .k{display:flex;align-items:center;justify-content:space-between;padding:10px 2px 0;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.vd .k .v{letter-spacing:-.01em;font-size:14px;font-weight:600;color:var(--ink)}
.vd .meter{height:5px;border-radius:3px;background:var(--surface-2);margin:8px 2px 0;overflow:hidden}
.vd .meter i{display:block;height:100%;width:100%;border-radius:3px;background:linear-gradient(90deg,#D50329,#FF3961)}
.vd .meter i[data-e]{transition-duration:1s}
.vd .pct{font-variant-numeric:tabular-nums}
.vd .nx{margin-top:12px;padding:8px 10px;border-radius:8px;background:var(--surface-0);border:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--ink);display:flex;gap:10px;align-items:center;white-space:nowrap}
.vd .nx span{color:var(--ink-3);text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600}

/* 05 respond — routine actions complete, one waits, the audit log ticks */
.sm .r .pill.amb[data-e]{transition-delay:calc(var(--d,0s) + var(--sd,.25s))}
.aud{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:11px;color:var(--ink-3)}
.aud .cur{width:6px;height:12px;background:var(--red-deep);animation:blink 1s steps(2,start) infinite}
.aud .ct{color:var(--ink);font-weight:600}


.sec-head.center{text-align:center}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
.lyr{margin:0 -32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lyr-row{display:grid;grid-template-columns:5fr 7fr;align-items:center;min-height:420px}
.lyr-t,.lyr-p{min-width:0}   /* grid items default to min-width:auto — a 400px stage would widen the column */
.lyr-row+.lyr-row{border-top:1px solid var(--line)}
.lyr-t{padding:clamp(36px,4vw,52px) clamp(28px,3.4vw,48px) clamp(36px,4vw,52px) 32px}
.lyr-p{position:relative;display:flex;align-items:center;justify-content:center;align-self:stretch;
  padding:clamp(28px,3.4vw,40px) 32px clamp(28px,3.4vw,40px) clamp(24px,3vw,40px);border-left:1px dashed var(--line-strong)}
.lyr-row.rev{grid-template-columns:7fr 5fr}
.lyr-row.rev .lyr-t{grid-column:2;grid-row:1;padding-left:clamp(28px,3.4vw,48px);padding-right:32px}
.lyr-row.rev .lyr-p{grid-column:1;grid-row:1;border-left:0;border-right:1px dashed var(--line-strong);padding-left:32px;padding-right:clamp(24px,3vw,40px)}

.lyr-well{position:relative;width:100%;max-width:560px;min-width:0;height:332px;padding:20px;border-radius:12px;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line-soft);overflow:hidden;display:grid;place-items:center}

.lyr-well::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(60% 60% at 100% 100%,rgba(255,106,78,.16),transparent 70%),radial-gradient(50% 50% at 0% 0%,rgba(255,90,72,.10),transparent 70%)}
.lyr-well::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:radial-gradient(rgba(9,19,36,.4) .7px,transparent 1px);background-size:3px 3px;opacity:.085}
.lyr-well .pv{position:relative;z-index:1}
.lyr-well .grain-l{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.lyr h3{margin:0 0 12px;font-size:clamp(26px,2.4vw,32px);line-height:1.14;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.lyr-t>p{margin:0 0 22px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:40ch}
.chips{display:grid;grid-template-columns:repeat(2,max-content);gap:8px 28px;margin:0 0 26px;padding:0;list-style:none}
.chip{position:relative;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;letter-spacing:0;color:var(--ink-2);white-space:nowrap}
.chip::before{content:"";width:5px;height:5px;border-radius:1.5px;background:var(--red);flex:none;transform:rotate(45deg)}
.chip small{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;letter-spacing:0;color:var(--ink-3);font-weight:500}
.js .lyr-row .chip{opacity:0;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .lyr-row.in .chip{opacity:1;transform:none}
.js .lyr-row.in .chip:nth-child(1){transition-delay:calc(var(--rd,0ms) + 240ms)}
.js .lyr-row.in .chip:nth-child(2){transition-delay:calc(var(--rd,0ms) + 310ms)}
.js .lyr-row.in .chip:nth-child(3){transition-delay:calc(var(--rd,0ms) + 380ms)}
.js .lyr-row.in .chip:nth-child(4){transition-delay:calc(var(--rd,0ms) + 450ms)}
.lyr .tlink{font-size:15px}
/* inner stagger on reveal */
.js .lyr-t>*{opacity:0;transform:translateY(8px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .lyr-row.in .lyr-t>*{opacity:1;transform:none}
.js .lyr-row.in .lyr-t>:nth-child(1){transition-delay:calc(var(--rd,0ms) + 60ms)}
.js .lyr-row.in .lyr-t>:nth-child(2){transition-delay:calc(var(--rd,0ms) + 130ms)}
.js .lyr-row.in .lyr-t>:nth-child(3){transition-delay:calc(var(--rd,0ms) + 200ms)}
.js .lyr-row.in .lyr-t>:nth-child(4){transition-delay:calc(var(--rd,0ms) + 270ms)}
.pv{position:relative;display:grid;place-items:center}
.pv{font-family:inherit;letter-spacing:-.005em}
.pv .win{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(9,19,36,.04),0 18px 40px -26px rgba(9,19,36,.28)}

.pv .wh{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.pv .row{display:flex;align-items:center;gap:9px;padding:0 12px;height:34px;border-bottom:1px solid var(--line-soft);font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.pv .row:last-child{border-bottom:0}
.pv .dot{width:6px;height:6px;border-radius:50%;flex:none;background:#C9CED8}
.pv .pill{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:2px 7px;border-radius:6px;background:var(--surface-2);color:var(--ink-2)}
.pv .pill.ok{color:var(--green-t);background:rgba(34,197,94,.13)}
.pv .pill.red{color:var(--red-deep);background:rgba(239,51,65,.10)}
.pv .pill.amb{color:var(--amber-t);background:rgba(245,158,11,.10)}
.pv .helm{color:var(--red);display:block}

/* --- 01 · Autonomous SOC: alert queue -> agent core -> verdict --- */
.pv1{position:relative;width:390px;height:292px}
.pv1 .queue{position:absolute;left:0;top:14px;width:250px}
.pv1 .core{position:absolute;right:20px;top:30px;width:64px;height:64px;display:grid;place-items:center}
.pv1 .core .helm{width:26px;height:38px}
.pv1 .core::before,.pv1 .core::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--red);opacity:0;animation:pvRing 3s ease-out infinite}
.pv1 .core::after{animation-delay:1.5s}
@keyframes pvRing{0%{transform:scale(.55);opacity:.55}100%{transform:scale(1.35);opacity:0}}
.pv1 .core b{position:absolute;inset:12px;border-radius:50%;background:#fff;border:1px solid var(--line-strong);z-index:-1}
.pv1 .link{position:absolute;left:250px;top:62px;width:52px;height:1px;background:linear-gradient(90deg,var(--line-strong),var(--red));overflow:hidden}
.pv1 .link i{position:absolute;top:-1px;left:0;width:10px;height:3px;border-radius:2px;background:var(--red);animation:pvPkt 1.4s linear infinite}
@keyframes pvPkt{from{transform:translateX(-12px)}to{transform:translateX(58px)}}
.pv1 .verdict{position:absolute;right:0;bottom:0;width:236px;padding:10px 12px 12px}
.pv1 .verdict .vt{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3);margin-bottom:8px}
.pv1 .verdict .vl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.pv1 .verdict .meter{margin-top:10px;height:4px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.pv1 .verdict .meter i{display:block;height:100%;width:100%;background:var(--red)}
.pv1 .verdict .meter i[data-e]{transition-duration:.9s}

/* --- 02 · AI Assistant: typed question -> grounded answer --- */
.pv2{width:380px;display:flex;flex-direction:column;gap:10px}
.pv2 .q{align-self:flex-end;max-width:100%;background:var(--ink);color:#fff;border-radius:12px 12px 3px 12px;padding:10px 14px;font-size:13px;font-weight:500}
.pv2 .q span{display:inline-block;white-space:nowrap;vertical-align:bottom}
.pv2 .a{align-self:flex-start;width:100%;padding:0}
.pv2 .a .ah{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line)}
.pv2 .a .ah .helm{width:11px;height:16px}
.pv2 .a .ah span{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.pv2 .a .ab{padding:10px 12px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.pv2 .a .ab b{color:var(--ink);font-weight:600}
.pv2 .src{display:flex;gap:6px;padding:0 12px 11px;flex-wrap:wrap}
.pv2 .src .pill{margin:0}

/* --- 03 · Studio + MCP Gateway: tools -> helmet gateway -> any AI --- */
.pv3{position:relative;width:400px;height:244px}
.pv3 .col{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:12px}
.pv3 .col.l{left:0}.pv3 .col.r{right:0;align-items:flex-end}
.pv3 .node{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:7px;box-shadow:0 1px 2px rgba(9,19,36,.04)}
.pv3 .node .dot{background:#C9CED8}
.pv3 .node.ai{border-color:var(--line-strong);color:var(--ink)}
.pv3 .gw{position:absolute;left:50%;top:50%;width:88px;height:88px;transform:translate(-50%,-50%);display:grid;place-items:center}
.pv3 .gw::before{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;border:1px solid var(--line-strong);box-shadow:0 18px 40px -26px rgba(9,19,36,.35)}
.pv3 .gw::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px dashed #E1E4EA;animation:pvSpin 24s linear infinite}
@keyframes pvSpin{to{transform:rotate(360deg)}}
.pv3 .gw .helm{position:relative;width:30px;height:44px}
.pv3 .gl{position:absolute;left:50%;top:calc(50% + 58px);transform:translateX(-50%);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3);white-space:nowrap}
.pv3 .perm{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
.pv3 svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pv3 .wires path{fill:none;stroke:#DCDFE6;stroke-width:1}
.pv3 .wires path.flow{stroke:var(--red);stroke-dasharray:6 90;stroke-dashoffset:96;animation:pvFlow 3s linear infinite}
.pv3 .wires path.flow.d1{animation-delay:.4s}.pv3 .wires path.flow.d2{animation-delay:.8s}
.pv3 .wires path.flow.d3{animation-delay:1.2s}.pv3 .wires path.flow.d4{animation-delay:1.6s}.pv3 .wires path.flow.d5{animation-delay:2s}
@keyframes pvFlow{to{stroke-dashoffset:0}}

/* --- 04 · SecOps Platform: modules on top of an integration grid --- */
.pv4{position:relative;width:400px;height:250px}
.pv4 .grid{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.pv4 .grid i{position:relative;aspect-ratio:1;border-radius:4px;background:#fff;border:1px solid var(--line)}
/* the tint idle is opacity on a pre-tinted pseudo, not a background/border-color paint loop */
.pv4 .grid i::after{content:"";position:absolute;inset:-1px;border-radius:4px;background:#FFF0F1;border:1px solid #F2B6BB;opacity:0;animation:tileTint 6s var(--ease) infinite;animation-delay:calc(var(--i) * 70ms + 1.4s)}
@keyframes tileTint{0%,8%{opacity:0}14%,52%{opacity:1}62%,100%{opacity:0}}
.js .scene .pv4 .grid i{opacity:0;transition:opacity .4s var(--ease);transition-delay:calc(var(--i) * 25ms + .9s + var(--sd,.25s))}
.js .scene.play .pv4 .grid i,.js .scene.done .pv4 .grid i{opacity:1}
.js .scene.done .pv4 .grid i,.js .scene.reset .pv4 .grid i{transition:none}
.pv4 .mods{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pv4 .mod{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 10px 10px;box-shadow:0 1px 2px rgba(9,19,36,.04)}
.pv4 .mod .ic{width:16px;height:16px;border-radius:5px;border:1px solid var(--line-strong);display:grid;place-items:center;margin-bottom:9px}
.pv4 .mod .ic i{width:6px;height:6px;border-radius:2px;background:var(--red)}
.pv4 .mod .ml{font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.pv4 .mod .ms{font-size:11px;color:var(--ink-3);margin-top:3px;white-space:nowrap}
.pv4 .cnt{position:absolute;left:0;top:112px;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3);display:flex;align-items:center;gap:10px}
.pv4 .cnt b{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pv4 .cnt .bar{width:120px;height:1px;background:var(--line-strong);position:relative;overflow:hidden}
.pv4 .cnt .bar i{position:absolute;inset:0;background:var(--red)}
.pv4 .cnt .bar i[data-e]{transition-duration:1s}

/* ============ S5 — WHY: tabs ============ */
.why{max-width:920px;margin:0 auto}

.wtabs{display:flex;justify-content:center;gap:4px;border-bottom:1px solid var(--line);margin:0 0 44px}
.wtab{
  position:relative;flex:0 1 auto;background:none;border:0;cursor:pointer;
  padding:14px 18px;font:inherit;font-size:16px;font-weight:500;color:var(--ink-3);white-space:nowrap;
  transition:color .2s var(--ease);
}
.wtab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.wtab:hover{color:var(--ink-2)}
.wtab[aria-selected="true"]{color:var(--ink)}
.wtab[aria-selected="true"]::after{transform:scaleX(1)}
.wtab:focus-visible{outline:2px solid var(--ring);outline-offset:-2px;border-radius:6px}
.wpanels{display:grid}
.wpanel{grid-area:1/1;display:flex;flex-direction:column;align-items:center;text-align:center;visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility 0s .35s}
.wpanel.on{visibility:visible;opacity:1;transition:opacity .35s var(--ease),visibility 0s}
.wpanel h3{margin:0;font-size:clamp(24px,2.3vw,30px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.wpanel p{margin:14px 0 0;max-width:64ch;font-size:16px;line-height:1.65;color:var(--ink-2)}

.wviz{
  position:relative;width:100%;height:360px;margin:36px 0 32px;overflow:hidden;
  border-radius:var(--r-lg);background:var(--surface-0);box-shadow:inset 0 0 0 1px var(--line-soft);
}
.wviz::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 55% at 88% 112%,rgba(239,51,65,.05),transparent 68%)}
.wviz .pv{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:100%;place-items:center}   /* 100% track: a scene wider than the well overflows both sides, not just the right */

.wv{position:relative;width:390px;height:300px;font-family:inherit;letter-spacing:-.005em}
.wv .lbl{font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.wv .tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:3px 8px;border-radius:6px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.wv .tag i{width:5px;height:5px;border-radius:50%;background:#C9CED8}
.wv .tag.ok{color:var(--green-t);background:rgba(34,197,94,.13)}.wv .tag.ok i{background:var(--green-t)}
.wv .tag.red{color:var(--red-deep);background:rgba(239,51,65,.10)}.wv .tag.red i{background:var(--red)}
.wv .tag.amb{color:var(--amber-t);background:rgba(245,158,11,.10)}.wv .tag.amb i{background:var(--amber-t)}
.wv svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wv .wires .ln{fill:none;stroke:var(--line-strong);stroke-width:1}
.wv .wires .pk{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-dasharray:10 600;stroke-dashoffset:610;animation:pkRun 2.4s linear infinite;animation-delay:var(--d,0s)}
@keyframes pkRun{0%{stroke-dashoffset:610;opacity:0}8%{opacity:1}70%{stroke-dashoffset:0;opacity:1}72%,100%{stroke-dashoffset:0;opacity:0}}
.js .wv.scene:not(.done) .wires .pk{animation-play-state:paused}   /* packets wait for the entrance */
.wv .node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;width:96px}
.wv .box{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--ink);box-shadow:0 1px 2px rgba(9,19,36,.04),0 12px 28px -18px rgba(9,19,36,.3)}
.wv .box svg{width:18px;height:18px}
.wv .core{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;color:var(--red)}
.wv .core b{position:absolute;inset:0;border-radius:50%;background:#fff;border:1px solid var(--line-strong);box-shadow:0 12px 28px -18px rgba(9,19,36,.3)}
.wv .core svg{position:relative;width:24px;height:24px}
.wv .core::before,.wv .core::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--red);opacity:0;animation:pvRing 3s ease-out infinite}
.wv .core::after{animation-delay:1.5s}
/* scene 1: sovereign — four homes wired to the lock, one dashed line that stops at an X */
.wv1 .node.a{left:4px;top:8px}.wv1 .node.b{right:4px;top:8px}
.wv1 .node.a,.wv1 .node.b{flex-direction:column-reverse}   /* label above, so the wire meets the icon, not the caption */.wv1 .node.c{left:4px;bottom:8px}.wv1 .node.d{right:4px;bottom:8px}
.wv1 .out{position:absolute;left:228px;top:150px;height:0;width:150px}
.wv1 .out .ln{position:absolute;left:0;top:0;width:52px;height:1px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 4px,transparent 4px 8px)}
.wv1 .blk{position:absolute;left:58px;top:-11px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(239,51,65,.10);border:1px solid rgba(239,51,65,.35);color:var(--red-deep);animation:wvBlink 3.2s ease-in-out infinite;will-change:transform}
.wv1 .blk svg{width:10px;height:10px}
.wv1 .ext{position:absolute;left:88px;top:-20px;width:72px;font-size:11.5px;line-height:1.3;font-weight:500;color:var(--ink-3)}
@keyframes wvBlink{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
/* scene 2: forensics — the rail grows once, four events dock on it */
.wv2 .rail{position:absolute;left:22px;top:18px;bottom:18px;width:1px;background:var(--line)}
.wv2 .rail i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--red)}
.wv2 .rail i[data-e]{transition-duration:2.2s;transition-timing-function:var(--ease-out)}
.wv2 .ev{position:absolute;left:0;display:flex;align-items:center;gap:12px}
.wv2 .ev .pt{width:9px;height:9px;border-radius:50%;background:#fff;border:1.5px solid var(--red);margin-left:18px;flex:none}
.wv2 .ev .card{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px -18px rgba(9,19,36,.3)}
.wv2 .ev .card .lbl{color:var(--ink)}
.wv2 .ev .t{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;color:var(--ink-3);letter-spacing:0;font-weight:500}
.wv2 .ev.rc .pt{background:var(--red);position:relative}
.wv2 .ev.rc .card{border-color:rgba(239,51,65,.35)}
.wv2 .ev.rc .pt::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1px solid var(--red);animation:pvRing 2s ease-out infinite}
/* scene 3: studio — three agents, the gateway, three approved tools */
.wv3{width:560px}
/* .ag is also S3's investigate row (height:34px): reset the row metrics here */
.wv3 .ag{position:absolute;left:0;width:196px;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;font-size:14px;text-align:left;padding:10px 12px 10px 16px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(9,19,36,.04)}
.wv3 .ag .lbl{display:block;white-space:nowrap;line-height:1.25;font-size:14px;font-weight:600}
.wv3 .ag small{display:block;font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;color:var(--ink-3);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.wv3 .ag small.cap{font-family:inherit}
.wv3 .ag::before{content:"";position:absolute;left:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--red)}
.wv3 .mcp{position:absolute;left:236px;top:50%;width:136px;transform:translateY(-50%);padding:14px 12px;border-radius:12px;background:#fff;border:1px solid var(--line-strong);text-align:center;box-shadow:0 12px 28px -18px rgba(9,19,36,.3);z-index:1}
.wv3 .mcp .lbl{color:var(--ink);font-weight:600;font-size:15px}
.wv3 .mcp small{display:block;margin-top:5px;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.wv3 .mcp::before{content:"";position:absolute;inset:-6px;border-radius:16px;border:1px solid var(--red);opacity:.25}
.wv3 .tool{position:absolute;left:412px}
.wv3 .tool .tag{font-size:12px;padding:5px 10px}
/* scene 4: control — actions cross the gate; the sensitive one waits for the analyst */
.wv4 .gate{position:absolute;left:50%;top:26px;bottom:26px;width:1px;margin-left:-.5px;background:var(--line-strong)}
.wv4 .gate::before,.wv4 .gate::after{content:"";position:absolute;left:-4px;width:9px;height:9px;border-radius:50%;background:#fff;border:1px solid var(--line-strong)}
.wv4 .gate::after{bottom:0}
.wv4 .glab{position:absolute;left:50%;top:0;transform:translateX(-50%)}
.wv4 .col{position:absolute;bottom:0}
.wv4 .col.l{left:0}.wv4 .col.r{right:0}
.wv4 .glab,.wv4 .col{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.wv4 .act{position:absolute;left:0;display:flex;align-items:center;gap:8px;padding:7px 10px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px -18px rgba(9,19,36,.3);transform:translateX(212px)}
.wv4 .act .lbl{color:var(--ink)}
.wv4 .act .tag.amb{display:none}
.wv4 .act.hold .tag.amb{display:inline-flex;position:absolute;right:10px;opacity:0}
.wv4 .act.hold .tag.ok{position:relative}
.wv4 .audit{position:absolute;right:0;bottom:22px;width:110px;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:10px}
.wv4 .audit .lbl{color:var(--ink-3);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;margin-bottom:6px}
.wv4 .audit b{display:block;height:3px;border-radius:2px;background:#E1E4EA;margin-top:4px}
.wv4 .audit b.hot{background:var(--red)}
.wv4 .audit b[data-e]{transition-duration:.6s}
/* the one place a once-only keyframe is right: enter, pause at the gate, cross. Static CSS above is the END state;
   .play runs the keyframe once; .done drops it (nothing is ever held by a finished animation). */
.js .wv4.scene:not(.play):not(.done) .act{opacity:0}
.js .wv4.scene.play .act{animation:actCross 2.2s var(--ease-out) both;animation-delay:calc(var(--d,0s) + var(--sd,.25s))}
.js .wv4.scene.play .act.hold{animation:actHold 3.8s var(--ease-out) both;animation-delay:calc(var(--d,0s) + var(--sd,.25s))}
.js .wv4.scene.play .act.hold .tag.amb{animation:tagAmb 3.8s linear both;animation-delay:calc(var(--d,0s) + var(--sd,.25s))}
.js .wv4.scene.play .act.hold .tag.ok{animation:tagOk 3.8s linear both;animation-delay:calc(var(--d,0s) + var(--sd,.25s))}
.js .wv4.scene.play .act .tag.ok:not(.hold *){animation:tagIn 2.2s linear both;animation-delay:calc(var(--d,0s) + var(--sd,.25s))}
@keyframes actCross{0%{opacity:0;transform:translateX(-24px)}18%{opacity:1;transform:translateX(0)}55%{transform:translateX(0)}100%{opacity:1;transform:translateX(212px)}}
@keyframes actHold{0%{opacity:0;transform:translateX(-24px)}10%{opacity:1;transform:translateX(0)}78%{transform:translateX(0)}100%{opacity:1;transform:translateX(212px)}}
@keyframes tagIn{0%,22%{opacity:0}34%,100%{opacity:1}}
@keyframes tagAmb{0%,14%{opacity:0}22%,60%{opacity:1}66%,100%{opacity:0}}
@keyframes tagOk{0%,62%{opacity:0;transform:scale(.8)}70%,100%{opacity:1;transform:none}}
.js .wv4.scene.done .act .tag.amb{opacity:0}
.wpanel .btn{white-space:nowrap}
.wpanel .btn svg{width:16px;height:16px;flex:none;margin-left:6px}


.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.path{
  position:relative;display:flex;flex-direction:column;
  padding:32px 32px 30px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.path:hover{border-color:var(--line-strong);box-shadow:var(--sh-2)}
.path-k{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;min-height:24px}
.path h3{margin:0 0 20px;font-size:22px;line-height:1.3;letter-spacing:-.02em;font-weight:600;color:var(--ink)}
.path .inc{display:block;margin:0 0 12px;padding-top:16px;border-top:1px solid var(--line-soft)}
.path ul{margin:0 0 28px;padding:0;list-style:none;display:grid;gap:10px}
.path li{position:relative;padding-left:26px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.path li::before{
  content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--line-strong);background:#fff;
}
.path li::after{
  content:"";position:absolute;left:4.5px;top:7.5px;width:7px;height:4px;
  border-left:1.5px solid var(--red-deep);border-bottom:1.5px solid var(--red-deep);
  transform:rotate(-45deg);
}
.path .btn{align-self:flex-start;margin-top:auto;font-size:17px;padding:17px 30px} 
.path .btn-quiet{background:#fff}
.path.pfeat{border:1.5px solid rgba(239,51,65,.35);padding:31px 31px 29px;box-shadow:0 1px 2px rgba(9,19,36,.04),0 16px 40px -24px rgba(217,32,46,.22)}
.path.pfeat:hover{border-color:rgba(239,51,65,.55);box-shadow:0 2px 4px rgba(9,19,36,.05),0 20px 44px -24px rgba(217,32,46,.28)}
.path .tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid rgba(239,51,65,.35);color:var(--red-deep);font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap}

/* ============ S7 — TRUST: bento grid ============ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(232px,auto);gap:14px}
.bcard{
  position:relative;display:flex;flex-direction:column;padding:26px 26px 24px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:18px;overflow:hidden;
}
.bcard.w2{grid-column:span 2}
.bcard h3{margin:0 0 6px;font-size:16.5px;font-weight:590;letter-spacing:-.012em;color:var(--ink)}
.bcard p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:40ch}
.bcard .tlink{margin-top:auto;padding-top:18px}
.bcard .num{
  display:block;margin:0 0 4px;font-variant-numeric:tabular-nums;
  font-size:clamp(32px,2.8vw,40px);font-weight:600;letter-spacing:-.025em;color:var(--ink);line-height:1.05;
}
.bcard .num small{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-3);font-weight:500}
.bcard .viz{margin-top:auto;padding-top:18px}

.bcard.feat{flex-direction:row;gap:28px;align-items:flex-start}
.bcard.feat .copy,.bcard.feat .viz{position:relative;z-index:1}
.bcard.feat .copy{display:flex;flex-direction:column;flex:1 1 0;align-self:stretch}
.bcard.feat .viz{flex:0 0 46%;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;align-self:stretch;justify-content:center}
.drow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:500;box-shadow:var(--sh-1)}
.drow .st{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
.drow .st i{width:6px;height:6px;border-radius:50%;background:var(--green-t)}
.drow.hold .st i{background:var(--amber-t)}
.drow.hold .st{color:var(--amber-t)}
/* stat mini visuals */

.b-chips{display:flex;flex-wrap:wrap;gap:6px}
.b-chips span{padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:500;color:var(--ink-2)}
/* action stream — a live ticker of real response actions rolling through */
.stream{position:relative;height:118px;overflow:hidden;padding-top:0!important;
  -webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 80%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 80%,transparent)}
.stream .track{display:flex;flex-direction:column;gap:6px;animation:streamUp 16s linear infinite;will-change:transform}
.arow{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;background:#fff;border:1px solid var(--line);
  font-size:12.5px;font-weight:500;color:var(--ink);box-shadow:0 1px 2px rgba(9,19,36,.03)}
.arow b{font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow span{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);padding:2px 7px;border:1px solid var(--line);border-radius:6px;white-space:nowrap}
.arow i{position:relative;width:14px;height:14px;border-radius:50%;background:#E6F6EC;flex:none}
.arow i::after{content:"";position:absolute;left:4px;top:3.5px;width:5px;height:3px;border-left:1.5px solid #15803D;border-bottom:1.5px solid #15803D;transform:rotate(-45deg)}
.arow.amb i{background:#FFF1DE}
.arow.amb i::after{border:0;left:5.5px;top:4px;width:3px;height:6px;border-left:1.5px solid #B45309;border-bottom:1.5px solid #B45309;transform:none;border-radius:0 0 0 1px}
@keyframes streamUp{to{transform:translateY(calc(-50% - 3px))}}

/* agent constellation — seven native agents around the core, over a field of templates */
.constel{position:relative;height:120px;padding-top:0!important;margin-top:18px}
.constel::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(9,19,36,.16) .8px,transparent 1px);background-size:9px 9px;
  -webkit-mask:radial-gradient(60% 70% at 50% 50%,#000 30%,transparent 100%);mask:radial-gradient(60% 70% at 50% 50%,#000 30%,transparent 100%)}
.constel .links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.constel .links line{stroke:rgba(9,19,36,.16);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 5;animation:linkFlow 3.2s linear infinite;animation-delay:calc(var(--i)*-.45s)}
@keyframes linkFlow{to{stroke-dashoffset:-16}}
.constel .core{position:absolute;left:50%;top:52%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,#FF8A9B,#FF3961 55%,#B8121F);box-shadow:0 0 0 5px rgba(255,57,97,.12),0 0 18px rgba(255,57,97,.35)}
/* the pulse is opacity on a pre-drawn halo, not an animated box-shadow */
.constel .core::after{content:"";position:absolute;inset:-10px;border-radius:50%;box-shadow:0 0 0 4px rgba(255,57,97,.06),0 0 26px 6px rgba(255,57,97,.3);opacity:0;animation:haloPulse 3.2s ease-in-out infinite}
@keyframes haloPulse{0%,100%{opacity:0}50%{opacity:1}}
.constel .node{position:absolute;width:26px;height:26px;border-radius:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;background:#fff;border:1px solid var(--line-strong);
  font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);
  box-shadow:0 2px 6px -2px rgba(9,19,36,.18)}
.constel .node::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--red);box-shadow:0 0 0 4px rgba(255,57,97,.14);opacity:0;animation:nodeBeat2 4.9s var(--ease) infinite;animation-delay:calc(var(--i)*.7s)}
@keyframes nodeBeat2{0%,100%{opacity:0}8%,16%{opacity:1}}
.constel .spark{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--red);opacity:0;transform:translate(-50%,-50%);
  animation:spark 5.6s ease-in-out infinite;animation-delay:calc(var(--i)*.95s)}
@keyframes spark{0%,70%,100%{opacity:0;transform:translate(-50%,-50%) scale(.6)}78%{opacity:.9;transform:translate(-50%,-50%) scale(1.4)}90%{opacity:0}}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badges span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink)}
.badges span b{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--red-deep)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* bento: entrances via [data-e]; the hold row swaps its tag once (a once-only keyframe pair, static END state) */
.drow.hold{position:relative}
.drow .st.ok2{position:absolute;right:12px;color:var(--green-t)}
.drow .st.ok2 i{background:var(--green-t)}
.drow.hold .st.amb{opacity:0}
.js .scene:not(.play):not(.done) .drow.hold .st.ok2{opacity:0}
.js .scene.play .drow.hold .st.amb{animation:tagAmb 3.2s linear both;animation-delay:calc(var(--d,0s) + var(--sd,.25s))}
.js .scene.play .drow.hold .st.ok2{animation:tagOk 3.2s linear both;animation-delay:calc(var(--d,0s) + var(--sd,.25s))}
.js .scene.done .drow.hold .st.amb{opacity:0}
.js .scene .b-chips span{opacity:0;transition:opacity .45s var(--ease);transition-delay:calc(var(--i) * .1s + .3s + var(--sd,.25s))}
.js .scene.play .b-chips span,.js .scene.done .b-chips span{opacity:1}
.js .scene.done .b-chips span,.js .scene.reset .b-chips span{transition:none}
.split .num{font-size:clamp(26px,2.2vw,32px)}

/* ============ S8 — FAQ ============ */
.faq-head{text-align:center;margin:0 0 40px}
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{
  border:1px solid var(--line);border-radius:16px;background:var(--bg);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.faq details:hover{border-color:var(--line-strong)}
.faq details[open]{border-color:rgba(239,51,65,.35);box-shadow:0 0 0 3px rgba(239,51,65,.05),0 10px 30px -18px rgba(9,19,36,.25)}
.faq summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:18px 18px 18px 20px;font-size:16px;font-weight:540;letter-spacing:-.008em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red-deep)}
.faq .n{flex:none;width:22px;font-size:11.5px;font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
.faq .q{flex:1}
.faq .pl{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);transition:background .25s var(--ease),transform .3s var(--ease)}
.faq .pl::before,.faq .pl::after{
  content:"";position:absolute;top:50%;left:50%;background:#fff;
  transition:transform .3s var(--ease),background .25s var(--ease);
}
.faq .pl::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.faq .pl::after{width:1.5px;height:12px;transform:translate(-50%,-50%)}
.faq details[open] .pl{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-strong);transform:rotate(45deg)}
.faq details[open] .pl::before,.faq details[open] .pl::after{background:var(--ink)}
.faq .a{overflow:hidden;transition:height .38s cubic-bezier(.4,0,.2,1)}
.faq .a>p{opacity:0;transition:opacity .22s ease}
.faq details.is-open .a>p{opacity:1;transition-delay:.06s}
.faq details p{margin:0;padding:0 64px 22px 58px;font-size:14.5px;line-height:1.68;color:var(--ink-2)}
.faq-foot{text-align:center;margin:36px 0 0;font-size:14px;color:var(--ink-3)}
.faq-foot a{display:inline-block;margin-top:6px;color:var(--ink);font-weight:540;text-decoration:underline;text-underline-offset:4px}
.faq-foot a:hover{color:var(--red-deep)}

/* ============ FINAL CTA ============ */

.final{position:relative;overflow:hidden;padding:96px 0 128px}
.final .wrap{position:relative}
.final-aura{position:absolute;inset:-80px -120px;pointer-events:none;z-index:0;
  /* the ellipse reaches zero AT the aura's own box edge, so the box never shows as a clip */
  -webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 22%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 22%,transparent 100%)}
.final-aura i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.final-aura .a1{width:620px;height:620px;right:-60px;top:-140px;opacity:.22;
  background:radial-gradient(circle,#FF3961,transparent 64%);animation:drift1 13s ease-in-out infinite alternate}
.final-aura .a2{width:520px;height:520px;left:-40px;bottom:-160px;opacity:.18;
  background:radial-gradient(circle,#EF3341,transparent 64%);animation:drift2 16s ease-in-out infinite alternate}
.final-aura .a3{width:680px;height:680px;left:30%;top:-260px;opacity:.20;
  background:radial-gradient(circle,#FFB3BA,transparent 66%);animation:drift3 14s ease-in-out infinite alternate}
.final-aura .a4{width:460px;height:460px;left:44%;bottom:-220px;opacity:.10;
  background:radial-gradient(circle,#A31120,transparent 66%);animation:drift1 18s ease-in-out infinite alternate-reverse}
.final-panel{
  position:relative;z-index:1;border-radius:var(--r-lg);padding:80px 64px;text-align:left;color:var(--ink);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.46));
  -webkit-backdrop-filter:blur(28px) saturate(1.3);backdrop-filter:blur(28px) saturate(1.3);
  border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(9,19,36,.05),0 1px 2px rgba(9,19,36,.04),0 30px 60px -40px rgba(9,19,36,.18);
}
.final-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,transparent 38%,transparent 62%,rgba(255,255,255,.35) 100%);
}
.final-panel .cta-atom{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.final-panel>*{position:relative;z-index:1}
.final-panel .h2{color:var(--ink);max-width:18ch;margin:0}
.final-panel .cta-row{justify-content:flex-start}
.final-panel p{margin:18px 0 0;max-width:52ch;font-size:16px;line-height:1.65;color:var(--ink-2)}
.final-panel .cta-row{margin-top:36px}
@media (max-width:760px){.final-panel{text-align:center}.final-panel .h2,.final-panel p{margin-left:auto;margin-right:auto}.final-panel .cta-row{justify-content:center}}


.ft{color:var(--ink)}
.ft-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:32px 24px;
  padding:clamp(48px,6vw,72px) 0 clamp(40px,5vw,56px)}
.ft-h{margin:0 0 14px;font-size:12.5px;font-weight:600;text-transform:none;
  letter-spacing:0;color:var(--ink)}
.ft-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ft-list a,.ft-list span{font-size:14px;line-height:1.4;color:var(--ink-3);text-decoration:none}
.ft-list a{transition:color var(--dur-micro)}
.ft-list a:hover{color:var(--ink)}
.ft-bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:20px 0 26px;border-top:1px solid var(--line)}
.ft-mark{display:block;line-height:0;color:var(--ink);flex:none}
.ft-mark svg{display:block;width:116px;height:auto}
.ft-legal{margin:0;font-size:13px;color:var(--ink-3)}
@media (max-width:900px){
  .ft-cols{grid-template-columns:1fr 1fr;gap:36px 24px}
}
@media (max-width:740px){
  .ft-cols{grid-template-columns:1fr;gap:32px}
  .ft-bar{flex-direction:column;align-items:flex-start;gap:14px}
}


.js .scene [data-e]{transition:opacity .55s var(--ease),transform .55s var(--ease),clip-path 1.5s steps(40,end);transition-delay:calc(var(--d,0s) + var(--sd,.25s))}
.js .scene:not(.play):not(.done) [data-e]{opacity:0}
.js .scene:not(.play):not(.done) [data-e="up"]{transform:translateY(6px)}
.js .scene:not(.play):not(.done) [data-e="left"]{transform:translateX(-10px)}
.js .scene:not(.play):not(.done) [data-e="right"]{transform:translateX(10px)}
.js .scene:not(.play):not(.done) [data-e="pop"]{transform:scale(.92)}
[data-e="x"]{transform:scaleX(var(--sx,1));transform-origin:left center}
[data-e="y"]{transform:scaleY(1);transform-origin:top center}
[data-e="type"]{clip-path:inset(0 0 0 0)}
.js .scene:not(.play):not(.done) [data-e="x"]{opacity:1;transform:scaleX(0)}
.js .scene:not(.play):not(.done) [data-e="y"]{opacity:1;transform:scaleY(0)}
.js .scene:not(.play):not(.done) [data-e="type"]{opacity:1;clip-path:inset(0 100% 0 0)}
.js .scene.done [data-e],.js .scene.reset [data-e]{transition:none}
/* out of view: every idle loop pauses (pseudo-elements included) */
.js section:not(.live) *,.js section:not(.live) *::before,.js section:not(.live) *::after{animation-play-state:paused!important}
/* a hidden tab panel's loops do not run either */
.wpanel:not(.on) *,.wpanel:not(.on) *::before,.wpanel:not(.on) *::after{animation-play-state:paused!important}
/* capture: settle() adds html.settled — every loop freezes on its current frame */
.settled *,.settled *::before,.settled *::after{animation-play-state:paused!important}

/* ============ STRUCTURAL FRAME LINES ============
   Two vertical hairlines at the container edges, fading in from the top of
   section 2 and running to the footer. Horizontal rules with + markers at
   every section boundary. Over the dark bands the hairlines simply vanish. */
#frame{position:relative}
#frame::before,#frame::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;pointer-events:none;z-index:0;
  
  background:linear-gradient(to bottom,rgba(226,232,240,0),var(--line) 160px);
}
#frame::before{left:max(20px,calc(50% - 620px))}
#frame::after{left:min(calc(100% - 21px),calc(50% + 620px))}
.xrule{position:relative;height:0;border-top:1px solid var(--line);z-index:1;margin:0}
.xrule i{
  position:absolute;top:-1px;width:7px;height:7px;transform:translate(-50%,-50%);pointer-events:none;
  background:#fff;border:1px solid #B9C4D3;
}
.xrule .l{left:max(20px,calc(50% - 620px))}
.xrule .r{left:min(calc(100% - 21px),calc(50% + 620px))}

/* ============ RESPONSIVE ============ */
@media (max-width:1040px){
  .probs{grid-template-columns:1fr}
  .prob{border-right:0;border-bottom:1px solid var(--line);padding:28px 0 28px!important}
  .prob:last-child{border-bottom:0}
  .prob .n{margin-bottom:16px}
  .steps{grid-template-columns:1fr 1fr}
  .scard,.scard.wide{grid-column:auto}
  .scard.wide .sm{height:172px}
  .wtabs{overflow-x:auto;justify-content:flex-start}
  .wtab{flex:0 0 auto;white-space:nowrap;padding:14px 16px}
  .bento{grid-template-columns:1fr 1fr}
  .bcard.feat{flex-direction:column}
  .bcard.feat .viz{flex:none;width:100%;margin-top:18px}
  .bcard.w2:not(.feat){grid-column:span 1}
  .bcard.w2.rec{grid-column:span 2}
}
@media (max-width:840px){
  .h1{white-space:normal}
  .lyr-row,.lyr-row.rev{grid-template-columns:1fr;min-height:0}
  .lyr-t,.lyr-row.rev .lyr-t{grid-column:1;grid-row:1;padding:32px 32px 8px}
  .lyr-p,.lyr-row.rev .lyr-p{grid-column:1;grid-row:2;border:0;padding:8px 32px 32px}
  .lyr .pv{transform:scale(.86)}
  .wv{transform:scale(.86)}
  .wviz{height:280px}
  .steps{grid-template-columns:1fr}
  .paths{grid-template-columns:1fr;gap:20px}
  .sec{padding:80px 0}
  .hero{padding-top:136px}
}
@media (max-width:560px){
  .wpanel p br,#s5-h br,#s5-h+.lead br{display:none}
  .wrap{padding:0 20px}
  .final-panel{padding:56px 24px}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .bcard,.bcard.w2{grid-column:span 1}
}

/* ============ RESPONSIVE — mobile pass ============ */
@media (max-width:1040px){
  .feat{grid-template-columns:1fr 1fr}
  .fpanel{aspect-ratio:4/3}
}
@media (max-width:840px){
  .hero{padding:104px 0 0}
  .hero-aura .a2{width:380px;height:380px;left:-140px;bottom:-60px;opacity:.16}
  .bp{bottom:96px;--recog-half:280px;--recog-fade:60px}
  .bp .cm{display:none}
  .recog{bottom:62px;flex-wrap:wrap;gap:12px 18px;white-space:normal;width:min(560px,calc(100% - 40px));justify-content:center}
  .h1{font-size:clamp(32px,8.6vw,40px)}
  .atom-slot{min-height:300px}
  .recog .r-ecso{flex-basis:100%;display:flex;justify-content:center}
  .recog .meta{font-size:11px}
  .recog .r-mark svg,.recog .r-gigaom svg,.recog .r-idc svg{height:15px}
  .recog .r-gartner svg,.recog .r-qks svg{height:16px}
  .recog .r-ecso svg{height:21px}
  .h2 br{display:none}
  .feat{grid-template-columns:1fr}
  .fpanel{aspect-ratio:4/3}
  .sec-head.split .lead.side{max-width:none}
  .outcome{padding:64px 24px;border-radius:18px}
  .outcome .big{font-size:22px}
  .outcome::after,.outcome .ring{display:none}
  .lyr .pv{transform:scale(.8)}
  .wrow{padding:22px 0}
  .wtabs{justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:32px}
  .wtabs::-webkit-scrollbar{display:none}
  .wtab{white-space:nowrap;flex:none}
  .path{padding:28px 22px}
  .path.pfeat{padding:27px 21px}
  .faq summary{font-size:15px;padding:16px 14px 16px 16px}
  .faq details p{padding:0 20px 20px 52px}
  .final-panel .h2{font-size:26px}
  .btn{padding:15px 22px;font-size:15px}
}
@media (max-width:560px){
  .hero .cta-row{gap:10px}
  .hero .cta-row .btn{flex:1 1 auto;justify-content:center}
  .proof{display:grid;grid-template-columns:repeat(4,max-content);gap:12px 16px;margin-top:36px;justify-content:start}
  .proof .meta{grid-column:1/-1}
  .proof .r-mark{justify-self:center}
  .proof .r-ecso{grid-column:1/-1;justify-self:start}
  .proof .r-gartner svg,.proof .r-qks svg{height:14px}
  .proof .r-gigaom svg,.proof .r-idc svg{height:13px}
  .fpanel{aspect-ratio:1/0.9}
  .mock{width:84%}
  .tools{gap:12px 10px}
  .tchip{padding:9px 11px;font-size:9.5px}
  .lyr{margin:0 -20px}
  .lyr-t,.lyr-row.rev .lyr-t{padding:28px 20px 8px}
  .lyr-p,.lyr-row.rev .lyr-p{padding:8px 20px 28px}
  .lyr-well{padding:10px;height:auto}
  .lyr .pv{transform:scale(.82)}
  .wv{transform:scale(.82)}
  .wv3{transform:scale(.625)}
  .wv3 .ag small{display:none;font-size:14px}   /* hidden, but G19 still reads the computed size */
  .wv3 .ag{margin-top:10px;left:4px}   /* keeps the red dot inside the well */
  .wv3 .tag,.wv3 .tool .tag,.wv3 .mcp small{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* every loop and entrance off; the JS also marks every scene .done, so the page is the settled frame */
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .lyr-t>*,.js .lyr-row .chip{opacity:1;transform:none}
  .js .scene [data-e],.js .scene .pv4 .grid i,.js .scene .b-chips span{opacity:1}
  .js .scene [data-e="up"],.js .scene [data-e="left"],.js .scene [data-e="right"],.js .scene [data-e="pop"]{transform:none}
  .js .scene [data-e="x"]{transform:scaleX(var(--sx,1))}
  .js .scene [data-e="y"]{transform:scaleY(1)}
  .js .scene [data-e="type"]{clip-path:none}
  .hub .pz,.wv .wires .pk,.pv1 .link i,.pv4 .grid i::after,.constel .node::after,.constel .core::after,.constel .spark,.wv .core::before,.wv .core::after,.pv1 .core::before,.pv1 .core::after,.wv2 .ev.rc .pt::after,.mock .ghost::after{opacity:0}
  .wv4 .act{opacity:1;transform:translateX(212px)}
  .wv4 .act .tag.amb,.drow.hold .st.amb{opacity:0}
  .drow.hold .st.ok2{opacity:1}
  .wpanel{transition:none}
  .scard:hover{transform:none}
  .path:hover{transform:none}
}
/* ghost arrow link, same as Platform Overview: red text, small arrow that slides on hover */
.btn-arrow{color:var(--red-deep);white-space:nowrap;padding-left:0;padding-right:0;gap:8px}
.btn-arrow:hover{background:transparent;color:var(--red)}
.btn-arrow svg{flex:none;width:16px;height:16px;transition:transform .3s var(--ease)}
.btn-arrow:hover svg{transform:translateX(4px)}



/* ---- S1 problem panels: two extra mock rows the homepage never needed ---- */
.mock .vol{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line-soft);font-size:13px;font-weight:500;color:var(--ink)}
.mock .vol:last-of-type{border-bottom:0}
.mock .vol .gone{margin-left:auto;font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--red-deep);background:rgba(239,51,65,.10);
  padding:2px 7px;border-radius:6px;white-space:nowrap}
.mock .vol .kept{margin-left:auto;font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink-3);background:var(--surface-2);
  padding:2px 7px;border-radius:6px;white-space:nowrap}
.mock .unk{display:flex;align-items:baseline;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line-soft);font-size:13px}
.mock .unk:last-of-type{border-bottom:0}
.mock .unk span{color:var(--ink-3);font-weight:500;width:96px;flex:none}
.mock .unk b{font-weight:600;color:var(--ink-3);font-style:normal}
.mock .unk.hit b{color:var(--ink)}
.mock .doc{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-top:4px;border-radius:10px;
  background:#fff;border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink)}
.mock .doc .ic{width:18px;height:18px;flex:none;color:var(--ink-3)}
.mock .doc .ic svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.mock .dead{display:block;margin-top:12px;text-align:center;font-size:12px;font-weight:500;color:var(--ink-3)}

/* ---- S2 six-step flow: one number strip per card, same .shead grammar ---- */
.sm .cat{display:flex;flex-wrap:wrap;gap:6px;padding:6px 2px 0}
.sm .cat span{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:11.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.sm .cat span i{width:6px;height:6px;border-radius:2px;transform:rotate(45deg);background:var(--c,#94A2B8);flex:none}
.sm .mini{display:flex;align-items:flex-end;gap:2px;height:58px;padding:0 2px;margin-top:6px}
.sm .mini i{flex:1;min-width:0;height:var(--h);border-radius:2px 2px 0 0;background:#DDE2EA;transform-origin:bottom center}
.sm .mini i.hot{background:var(--red)}
.sm .fnd{margin-top:8px;padding:10px;border-radius:8px;background:var(--surface-0);border:1px solid var(--line);
  font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.sm .fnd b{display:block;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--ink-3);margin-bottom:5px}
.sm .fnd em{font-style:normal;font-weight:600;color:var(--ink)}

/* ---- S3 artifact catalog ---- */
.arts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.acol{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px 18px;
  box-shadow:0 1px 2px rgba(9,19,36,.03)}
.acol h3{display:flex;align-items:center;gap:10px;margin:0;font-size:16.5px;font-weight:590;
  letter-spacing:-.012em;color:var(--ink)}
.acol h3 .os{flex:none;width:24px;height:24px;border-radius:8px;border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--red-deep);background:var(--surface-0)}
.acol h3 .os svg{display:block;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.acol .cnt{display:block;margin:12px 0 4px;color:var(--ink-3)}
.afct{padding:10px 0 9px;border-top:1px solid var(--line-soft)}
.afct b{display:block;font-size:13.5px;font-weight:530;letter-spacing:-.005em;color:var(--ink)}
.afct code{display:block;margin-top:3px;font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;
  letter-spacing:0;line-height:1.4;color:var(--ink-3);word-break:break-word;font-weight:500}
.acol .more{display:block;margin-top:auto;padding-top:0;border-top:1px solid var(--line-soft);
  padding:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}

/* the three detection engines, one definition each */
.dets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.det{min-width:0;padding:20px 22px 18px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.det h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:16px;font-weight:590;letter-spacing:-.012em;color:var(--ink)}
.det h3 .k{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink-3);background:var(--surface-2);border-radius:5px;padding:3px 7px}
.det p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.hunt{display:flex;align-items:flex-start;gap:14px;margin-top:18px;padding:16px 20px;border-radius:14px;
  background:var(--surface-0);box-shadow:inset 0 0 0 1px var(--line-soft)}
.hunt .ic{flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--line-strong);background:#fff;
  display:grid;place-items:center;color:var(--red-deep)}
.hunt .ic svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hunt p{margin:0;font-size:14px;line-height:1.62;color:var(--ink-2)}
.hunt p b{font-weight:600;color:var(--ink)}

/* ---- S4 the forensic timeline: this page's own surface ---- */
.tl{display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:20px;align-items:start}
.tl-main{min-width:0}
.tl-well{position:relative;min-width:0;padding:20px 22px 22px;border-radius:16px;background:var(--surface-0);
  box-shadow:inset 0 0 0 1px var(--line-soft)}
.tl-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.tl-head .who{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.tl-head .who i{width:7px;height:7px;border-radius:50%;background:var(--green-t);flex:none}
.tl-head .sep{color:var(--ink-3)}
.tl-head .rt{margin-left:auto;display:flex;align-items:center;gap:14px}
.tl-head .rt .mono{color:var(--ink-3)}

/* density histogram + the brush window */
.tl-hist{position:relative;height:88px;margin:22px 0 0;display:flex;align-items:flex-end;gap:2px}
.tl-hist .b{flex:1 1 0;min-width:0;height:var(--h,20%);border-radius:2px 2px 0 0;background:#DDE2EA}
.tl-hist .b.hot{background:var(--red)}
.tl-hist .b[data-e="y"]{transform-origin:bottom center}
.tl-brush{position:absolute;top:-10px;bottom:-8px;left:var(--x);width:var(--w);border-radius:9px;
  background:rgba(239,51,65,.06);box-shadow:inset 0 0 0 1px rgba(239,51,65,.38)}
.tl-brush i{position:absolute;top:50%;width:3px;height:26px;margin-top:-13px;border-radius:2px;background:var(--red);opacity:.75}
.tl-brush i.l{left:-2px}
.tl-brush i.r{right:-2px}
.tl-brush span{position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);white-space:nowrap;
  font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0;
  color:var(--red-deep);background:rgba(239,51,65,.10);border-radius:6px;padding:2px 8px}
.tl-axis{display:flex;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft)}
.tl-axis span{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;letter-spacing:0;color:var(--ink-3);font-weight:500}

/* the swim lanes */
.tl-lanes{margin-top:16px}
.tl-lane{position:relative;display:flex;align-items:center;height:46px;border-bottom:1px solid var(--line-soft)}
.tl-lane:last-child{border-bottom:0}
.tl-lane .nm{flex:none;width:118px;display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.tl-lane .nm i{flex:none;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--c,#94A2B8)}
.tl-rail{position:relative;flex:1 1 auto;min-width:0;height:1px;background:var(--line);margin-right:8px}
.tl-rail[data-e="x"]{transform-origin:left center}
.tl-ev{position:absolute;top:50%;left:var(--x);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#fff;border:1.5px solid var(--c,#94A2B8)}
.tl-ev.on{width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--red);border-color:var(--red);
  box-shadow:0 0 0 5px rgba(239,51,65,.13)}
.tl-gap{position:absolute;top:50%;left:var(--x);width:var(--w);height:0;border-top:1px dashed rgba(9,19,36,.30)}
.tl-gap::before,.tl-gap::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:rgba(9,19,36,.30)}
.tl-gap::before{left:0}
.tl-gap::after{right:0}
/* the label clears the rail entirely, so the dashes read as one unbroken span */
.tl-gap span{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);white-space:nowrap;
  font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;letter-spacing:0;color:var(--ink-3);font-weight:500}

/* the record the selected dot opens */
.tl-detail{min-width:0;padding:18px 20px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(9,19,36,.04),0 20px 44px -30px rgba(9,19,36,.30)}
.tl-detail .dh{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.tl-detail .dh .meta{color:var(--ink-3)}
.tl-detail .dh .pill{margin-left:auto}
.tl-detail h3{margin:14px 0 0;font-size:15px;font-weight:600;letter-spacing:-.014em;line-height:1.35;color:var(--ink)}
.tl-detail .kv{display:flex;align-items:baseline;gap:10px;margin-top:11px;font-size:12.5px}
.tl-detail .kv span{flex:none;width:74px;color:var(--ink-3);font-weight:500}
.tl-detail .kv b{font-weight:600;color:var(--ink);word-break:break-word}
.tl-detail .kv b.mono{font-weight:500;font-size:11.5px;color:var(--ink-2)}
.tl-detail .raw{margin-top:14px;padding:11px 12px;border-radius:10px;background:var(--surface-0);
  border:1px solid var(--line-soft);font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;
  line-height:1.75;color:var(--ink-2);white-space:pre-wrap;word-break:break-word;font-weight:500}
.tl-detail .raw u{text-decoration:none;color:var(--red-deep)}
.tl-detail .fx{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft);
  font-size:12.5px;font-weight:500;color:var(--ink-2)}
.tl-detail .fx svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--red-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* the nine categories, as they are named in the workspace */
.tl-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin:24px 0 0;padding:0;list-style:none}
.tl-legend li{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.tl-legend li i{flex:none;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--c,#94A2B8)}

/* ---- S5 the custody chain ---- */
.cust{position:relative;margin:0;padding:0;list-style:none}
.cust li{position:relative;display:flex;align-items:center;gap:10px;padding:9px 0 9px 24px;font-size:12.5px;color:var(--ink-2)}
.cust li::before{content:"";position:absolute;left:4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:#fff;border:1.5px solid var(--red);z-index:1}
.cust li::after{content:"";position:absolute;left:7.5px;top:calc(50% + 4px);height:calc(100% - 8px);width:1px;background:var(--line-strong)}
.cust li::after{background:rgba(239,51,65,.45)}
.cust li:last-child::after{display:none}
.cust li b{font-weight:530;color:var(--ink);white-space:nowrap}
.cust li code{margin-left:auto;font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;letter-spacing:0;color:var(--ink-3);font-weight:500}

.drow .st.hi{color:var(--red-deep)}
.drow .st.hi i{background:var(--red)}
.drow .st.md{color:var(--amber-t)}
.drow .st.md i{background:var(--amber-t)}
.bcard .num + p{margin-top:14px}
.bcard .tool-l{display:flex;flex-wrap:wrap;gap:6px}
.bcard .tool-l span{padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;color:var(--ink-2);font-weight:500}

/* ---- responsive ---- */
@media (max-width:1180px){
  .tl{grid-template-columns:1fr}
  .tl-detail{position:static}
}
@media (max-width:1040px){
  .arts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dets{grid-template-columns:1fr}
  .tl-lane .nm{width:104px}
}
@media (max-width:840px){
  .tl-well{padding:18px 16px 18px}
  .tl-hist{height:72px}
  .tl-legend{gap:9px 16px}
}
@media (max-width:560px){
  .h1 br{display:none}
  .arts{grid-template-columns:1fr}
  .tl-lane{height:auto;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 0}
  .tl-lane .nm{width:auto}
  .tl-rail{width:100%;align-self:stretch;margin:8px 0 6px}
  .tl-hist{height:60px}
  .tl-head .rt{margin-left:0;width:100%}
  .hunt{flex-direction:column;gap:10px}
}
/* ============================================================================
   /solutions/digital-forensics V2 HERO
   The sphere is gone. The hero visual is this page's own: a reconstruction.
   Records come back from the endpoint scattered, land on five lanes over one
   clock, the quiet span draws itself, the sequence reads back on the right,
   and the root cause lands last. Built on the sheet's motion engine: every
   entrance is a two-stop [data-e] transition, so no-JS and reduced-motion
   render the settled frame. Time and evidence are teal (--cyan-t); red is
   kept for the one record the eye should land on, and the CTA.
   ============================================================================ */
.hero{--tl:#0E7490;--tl-soft:rgba(14,116,144,.14);padding-bottom:104px}
/* 104 = 80 (fold line) + the row's half height + the 24px the well keeps above the line; measured at 1440x900 the hero lands on exactly 900 */
/* the colour field: teal + amber instead of the home page's coral, same geometry, same alphas */
.hero-aura .a1{background:radial-gradient(circle,#2A9DB8,transparent 66%);opacity:.16}
.hero-aura .a2{background:radial-gradient(circle,#E0A25A,transparent 66%);opacity:.09}

.hero-viz{position:relative;z-index:1;width:100%;flex:1 1 auto;min-height:0;margin:28px 0 0;display:flex;align-items:flex-start;justify-content:center}
.hv-well{position:relative;width:min(1240px,calc(100% - 40px));text-align:left;padding:14px 22px 16px;border-radius:18px;
  background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px var(--line-soft),0 1px 2px rgba(9,19,36,.03),0 24px 60px -36px rgba(9,19,36,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hv-head{display:flex;align-items:center;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.hv-head .who{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.hv-head .who i{width:7px;height:7px;border-radius:50%;background:var(--tl);flex:none}
.hv-head .mono{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;letter-spacing:0;color:var(--ink-3);font-weight:500}
.hv-head .rt{margin-left:auto;color:var(--tl);font-weight:600}

.hv-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;align-items:stretch;margin-top:4px}
.hv-lanes{position:relative;min-width:0;padding-bottom:26px}
.hv-lane{position:relative;display:flex;align-items:center;height:36px;border-bottom:1px solid var(--line-soft)}
.hv-lane:last-of-type{border-bottom:0}
.hv-lane .nm{position:relative;z-index:2;flex:none;width:126px;display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.hv-lane .nm i{flex:none;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--c,#94A2B8)}
.hv-rail{position:relative;flex:1 1 auto;min-width:0;height:1px;background:var(--tl-soft);margin-right:6px}
.hv-rail[data-e="x"]{transform-origin:left center}
/* records: anchored on the rail at --x (measured from the rail's left edge = 126px + the lane's left) */
.hv-rec{position:absolute;top:50%;left:calc(126px + (100% - 132px) * var(--x) / 100);transform:translateY(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px 0 8px;border-radius:7px;white-space:nowrap;
  background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(9,19,36,.05),0 8px 20px -14px rgba(9,19,36,.35);
  font-size:11.5px;font-weight:500;color:var(--ink-2)}
.hv-rec::before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff;border:1.5px solid var(--c,#94A2B8)}
.hv-rec b{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--tl)}
.hv-rec.rc{border-color:var(--red);box-shadow:0 0 0 4px rgba(239,51,65,.12),0 8px 20px -14px rgba(217,32,46,.5);color:var(--ink)}
.hv-rec.rc::before{background:var(--red);border-color:var(--red)}
.hv-rec.rc b{color:var(--red-deep)}
/* the fly-in: hidden state is displaced by --sx/--sy and faded, the transition lands it on the rail */
.js .scene [data-e="fly"]{transition-duration:.85s,.85s;transition-timing-function:var(--ease-out)}
.js .scene:not(.play):not(.done) [data-e="fly"]{opacity:0;transform:translate(var(--sx,0),calc(-50% + var(--sy,0))) scale(.94)}
/* the quiet span on the process lane */
.hv-gap{position:absolute;top:50%;left:calc(126px + (100% - 132px) * var(--x) / 100);width:calc((100% - 132px) * var(--w) / 100);height:0;border-top:1px dashed rgba(9,19,36,.32);z-index:1}
.hv-gap::before,.hv-gap::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:rgba(9,19,36,.32)}
.hv-gap::before{left:0}
.hv-gap::after{right:0}
.hv-gap span{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);white-space:nowrap;
  font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink-3);font-weight:500}
/* the clock */
.hv-axis{position:absolute;left:126px;right:6px;bottom:0;display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid var(--line)}
.hv-axis span{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;letter-spacing:0;color:var(--ink-3);font-weight:500}
/* the cursor: one vertical hairline at the root cause, teal, through all five lanes */
.hv-cursor{position:absolute;top:0;bottom:26px;left:calc(126px + (100% - 132px) * var(--x) / 100);width:1px;background:linear-gradient(180deg,rgba(14,116,144,0),var(--tl) 20%,var(--tl) 80%,rgba(14,116,144,0));z-index:1}

/* the read-back column */
.hv-read{min-width:0;display:flex;flex-direction:column;padding:12px 14px 12px 16px;border-radius:14px;background:var(--surface-0);box-shadow:inset 0 0 0 1px var(--line-soft)}
.hv-read .meta{color:var(--ink-3);margin-bottom:8px}
.hv-read p{margin:0;display:flex;align-items:baseline;gap:10px;padding:4px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px;line-height:1.4;white-space:nowrap;color:var(--ink-2)}
.hv-read p b{flex:none;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;align-self:center;
  font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:600;color:var(--tl);background:var(--tl-soft)}
.hv-read .verdict{margin-top:auto;padding:8px 0 0;border-bottom:0;align-items:center;gap:10px}
.hv-read .verdict svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--red-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hv-read .verdict span{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-2)}
.hv-read .verdict em{font-style:normal;font-weight:600;color:var(--red-deep);font-size:12px}
.hv-read [data-e="type"]{transition-duration:.55s,.55s,.9s}

/* the docked row: the same grammar as the recognitions row, plain text and three OS marks */
.recog.proof{gap:18px;bottom:70px}
/* the hero ground fades to white over a shorter run so the clock is not washed out */
.hero::after{height:140px}
.recog.proof .p-os{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.recog.proof .p-os svg{width:13px;height:13px;fill:var(--ink-3)}
.recog.proof .p-cust{position:relative;padding-left:18px}
.recog.proof .p-cust::before{content:"";position:absolute;left:0;top:50%;width:1px;height:12px;margin-top:-6px;background:var(--line-strong)}
.bp{--recog-half:350px}

/* S4 picks up the hero's clock colour, so the two timelines read as one motif */
.tl-brush{background:rgba(14,116,144,.07);box-shadow:inset 0 0 0 1px rgba(14,116,144,.42)}
.tl-brush i{background:var(--cyan-t)}
.tl-brush span{color:var(--cyan-t);background:rgba(14,116,144,.10)}
.tl-head .who i{background:var(--cyan-t)}

@media (prefers-reduced-motion:reduce){
  .js .scene [data-e="fly"]{opacity:1;transform:translateY(-50%)}
}
@media (max-width:1100px){
  .hv-body{grid-template-columns:minmax(0,1fr) 250px}
}
@media (max-width:900px){
  .hv-body{grid-template-columns:1fr}
  .hv-read{display:none}
  .hv-rec{font-size:11.5px}
}
@media (max-width:640px){
  .hero{padding-bottom:170px}   /* the proof row wraps to two lines here */
  .hero-viz{margin-top:22px}
  .hv-well{padding:14px 14px 16px}
  .hv-head .mono:not(.rt){display:none}
  .hv-lane{height:44px}
  .hv-lane .nm{width:24px}
  .hv-lane .nm i{margin-left:2px}
  .hv-lane .nm{font-size:0}
  .hv-rec,.hv-gap,.hv-cursor{left:calc(24px + (100% - 30px) * var(--x) / 100)}
  .hv-gap{width:calc((100% - 30px) * var(--w) / 100)}
  .hv-rec{height:24px;padding:0 7px 0 6px;font-size:0;gap:0}
  .hv-rec b{font-size:10px}
  .hv-axis{left:24px}
  .hv-axis span:nth-child(2),.hv-axis span:nth-child(4){display:none}
  .recog.proof{gap:10px 14px}
  .recog.proof .p-cust{flex-basis:100%;justify-content:center;padding-left:0}
  .recog.proof .p-cust::before{display:none}
}

@media (min-width:1101px){
  .hero{text-align:left;padding:118px 0 104px;justify-content:center}
  .hero .wrap.hero-grid{max-width:none;width:auto;display:grid;grid-template-columns:clamp(380px,34%,500px) minmax(0,1fr);column-gap:56px;align-items:center;
    padding-left:max(32px,calc((100% - 1176px)/2));padding-right:32px}
  .hero-copy{max-width:none;margin:0;align-items:flex-start}
  .h1{white-space:normal;font-size:clamp(34px,3vw,44px)}
  .h1 br{display:none}
  .sub{margin:22px 0 0;max-width:48ch}
  .hero .cta-row{justify-content:flex-start;margin-top:30px}
  .hero-aura .a1{right:-160px;top:-120px}
  .hero-viz{margin:0;width:100%;flex:none;align-items:center}
  .hv-well{width:100%}
  .hv-body{grid-template-columns:1fr;gap:12px}
  .hv-lanes{padding-bottom:26px}
  /* the read-back: six cells, three across */
  .hv-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 16px;padding:10px 14px 10px}
  .hv-read .meta{grid-column:1/-1;margin-bottom:4px}
  .hv-read p{padding:5px 0;overflow:hidden;text-overflow:ellipsis}
  .hv-read .verdict{grid-column:1/-1;margin-top:0;padding:7px 0 2px;border-bottom:0}
}
@media (min-width:1101px) and (max-height:720px){
  .hero{padding-top:96px;padding-bottom:96px}
  .h1{font-size:clamp(32px,2.9vw,40px)}
  .sub{margin-top:16px}
  .hero .cta-row{margin-top:24px}
  .hv-lane{height:32px}
}

.hero{--pl:#1D4ED8;--am:#B45309}
.hero-aura .a1{background:radial-gradient(circle,#3B6FD4,transparent 66%);opacity:.15}
.hero-aura .a2{background:radial-gradient(circle,#E0A25A,transparent 66%);opacity:.08}

/* ---- hero well: one case, eight phases, two lanes ---- */
.vp-well{position:relative;width:100%;text-align:left;padding:20px 24px 18px;border-radius:20px;
  background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px var(--line-soft),0 1px 2px rgba(9,19,36,.03),0 24px 60px -36px rgba(9,19,36,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink-2);font-size:14px;letter-spacing:-.005em}
.vp-head{display:flex;align-items:center;gap:16px;padding:0 2px 13px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.vp-head .who{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink);font-size:15px}
.vp-head .who i{width:7px;height:7px;border-radius:50%;background:var(--pl)}
.vp-head .mono{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;color:var(--ink-3);letter-spacing:0;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.vp-head .rt{margin-left:auto;color:var(--pl);font-weight:600}

/* the phase strip */
.vp-phases{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin:13px 0 0;padding:0 0 12px;list-style:none}
.vp-phases li{position:relative;display:flex;align-items:center;gap:6px;padding:9px 9px;border-radius:10px;background:#fff;border:1px solid var(--line);
  font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden}
.vp-phases li .k{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.vp-phases li .on{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--pl);flex:none}
.vp-phases li .on.hold{background:var(--am)}
.vp-rail{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--line-strong),rgba(29,78,216,.55));transform-origin:left center}

/* the two-lane log: Pilot left, the analyst right, one spine down the middle */
.vp-log{position:relative;display:grid;gap:5px;padding-top:10px}
.vp-log::before{content:"";position:absolute;left:50%;top:30px;bottom:8px;width:1px;margin-left:-.5px;background:var(--line)}
.vp-legend{display:grid;grid-template-columns:1fr 34px 1fr;margin:0 0 2px;padding:0}
.vp-legend .lg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none}
.vp-legend .lg::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.vp-legend .lg.p{grid-column:1;color:var(--pl)}
.vp-legend .lg.a{grid-column:3;color:var(--am)}
.vp-row{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center}
.vp-row .dot{grid-column:2;grid-row:1;justify-self:center;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #fff,inset 0 0 0 2.5px var(--pl);z-index:1}
.vp-row.a .dot{box-shadow:0 0 0 1px #fff,inset 0 0 0 2.5px var(--am)}
.vp-row .card{grid-row:1;min-width:0;padding:7px 11px;border-radius:11px;background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(9,19,36,.03);font-size:13px;line-height:1.45;color:var(--ink-2)}
.vp-row.p .card{grid-column:1;border-right:2px solid var(--pl)}
.vp-row.a .card{grid-column:3;border-left:2px solid var(--am);background:rgba(180,83,9,.045)}
.vp-row .card b{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3);margin-right:7px;white-space:nowrap}
.vp-row.a .card b{color:var(--am)}
.vp-row .card .pill{margin-left:7px;vertical-align:1px}

/* proof row under the CTAs, three items with icons */
.hero-viz{flex-direction:column;align-items:stretch}
.vp-proof{display:flex;justify-content:center;gap:10px 22px;margin:26px 0 0;flex-wrap:wrap}
.vp-proof span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--ink-3);white-space:nowrap}
.vp-proof svg{width:15px;height:15px;fill:none;stroke:currentColor;opacity:.85;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hero .bp{background:linear-gradient(to right,rgba(226,232,240,0),var(--line) 12%,var(--line) 88%,rgba(226,232,240,0))}
@media (max-width:1100px){.vp-proof{margin-top:16px}}

/* ---- the split (from _df3/hero.css, well renamed) ---- */
@media (min-width:1101px){
  .hero{text-align:left;padding:104px 0 92px;justify-content:center}
  .hero .wrap.hero-grid{max-width:none;width:auto;display:grid;grid-template-columns:clamp(360px,32%,470px) minmax(0,1fr);column-gap:48px;align-items:center;
    padding-left:max(32px,calc((100% - 1176px)/2));padding-right:32px}
  .hero-copy{max-width:none;margin:0;align-items:flex-start}
  .h1{white-space:normal;font-size:clamp(33px,2.75vw,41px)}
  .sub{margin:22px 0 0;max-width:48ch}
  .hero .cta-row{justify-content:flex-start;margin-top:30px}
  .hero-copy .vp-proof{justify-content:flex-start}
  .hero-aura .a1{right:-160px;top:-120px}
  .hero-viz{margin:0;width:100%;flex:none;align-items:center}
}
@media (min-width:1101px){
  /* the chips carry the phase word only, the ledger carries the numbers: eight names
     do not fit with their numbers in a 760-850px column */
  .vp-phases li{padding:8px 8px;font-size:11.5px;gap:5px}
  .vp-phases li .k{display:none}
  .vp-row .card{font-size:12.5px;line-height:1.42;padding:6px 10px}
}
@media (min-width:1101px) and (max-height:800px){
  .hero{padding-top:96px;padding-bottom:92px}
  .h1{font-size:clamp(32px,2.9vw,40px)}
  .sub{margin-top:16px}
  .hero .cta-row{margin-top:24px}
  .vp-well{padding:16px 20px 14px}
  .vp-log{gap:5px;padding-top:9px}
  .vp-row .card{padding:6px 10px;font-size:12.5px;line-height:1.4}
}
@media (max-width:1100px){
  .vp-well{width:min(1240px,calc(100% - 40px));margin:0 auto}
  .hero-viz{margin-top:28px}
}
@media (max-width:760px){
  /* phones: the chips show their numbers only, the log becomes one column with the
     spine on the left, the actor stays readable from the card's colour and its legend */
  .vp-phases{grid-template-columns:repeat(8,1fr);gap:4px}
  .vp-phases li{padding:7px 0;font-size:0;gap:0;justify-content:center}
  .vp-phases li .k{display:inline;font-size:10.5px;color:var(--ink)}
  .vp-phases li .on{display:none}
  .vp-head{gap:10px}
  .vp-head .mono{display:none}
  .vp-log::before{left:5px;top:34px}
  .vp-legend{grid-template-columns:auto auto;gap:14px;justify-content:start;margin-bottom:6px}
  .vp-legend .lg.p,.vp-legend .lg.a{grid-column:auto}
  .vp-row{grid-template-columns:11px minmax(0,1fr);column-gap:12px}
  .vp-row .dot{grid-column:1;justify-self:start}
  .vp-row.p .card,.vp-row.a .card{grid-column:2}
  .vp-row.p .card{border-right:1px solid var(--line);border-left:2px solid var(--pl)}
  .vp-row .card{font-size:12.5px}
  .vp-row .card .pill{display:inline-flex;margin:4px 0 0}
  .vp-row.a .card b::after{content:"\00a0\00b7\00a0you"}
}

/* ---- S1: two columns ---- */
.vp-two{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:960px;margin:-8px auto 0}
.vp-two p{margin:0;font-size:16.5px;line-height:1.65;color:var(--ink-2)}
@media (max-width:900px){.vp-two{grid-template-columns:1fr;gap:20px}}

/* ---- S2: Triage next to Pilot ---- */
.vp-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vp-col{display:flex;flex-direction:column;padding:24px 24px 22px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.vp-col.now{border-color:rgba(29,78,216,.28);box-shadow:0 1px 2px rgba(9,19,36,.04),0 14px 34px -16px rgba(29,78,216,.28)}
.vp-col .ch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.vp-col .ch h3{margin:0;font-size:19px;font-weight:590;letter-spacing:-.016em;color:var(--ink)}
.vp-col .ch .pill{font-size:11px;padding:4px 10px}
.vp-col dl{margin:0;padding:0}
.vp-col dt{margin:16px 0 4px;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.vp-col dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.vp-col dd b{font-weight:590;color:var(--ink)}
.vp-col .foot{margin:auto 0 0;padding-top:18px}
@media (max-width:900px){.vp-vs{grid-template-columns:1fr}}

/* ---- S3: the ledger ---- */
.vp-ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.vp-ledger li{display:grid;grid-template-columns:64px minmax(0,1fr) 132px;gap:0 28px;align-items:start;padding:22px 4px;border-bottom:1px solid var(--line)}
.vp-ledger .n{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--ink-3);padding-top:4px}
.vp-ledger h3{margin:0 0 6px;font-size:19px;font-weight:590;letter-spacing:-.016em;color:var(--ink)}
.vp-ledger p{margin:0;max-width:66ch;font-size:15px;line-height:1.62;color:var(--ink-2)}
.vp-ledger .tag{justify-self:end;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;margin-top:2px}
.vp-ledger .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.vp-ledger .tag.det{background:var(--surface-2);color:var(--ink-2)}
.vp-ledger .tag.ret{background:rgba(14,116,144,.10);color:var(--cyan-t)}
.vp-ledger .tag.mdl{background:rgba(29,78,216,.10);color:#1D4ED8}
.vp-ledger .tag.act{background:rgba(180,83,9,.10);color:var(--amber-t)}
@media (max-width:760px){
  .vp-ledger li{grid-template-columns:40px minmax(0,1fr);gap:4px 16px;padding:20px 0}
  .vp-ledger .tag{grid-column:2;justify-self:start;margin-top:10px}
}

/* ---- S4: three modes ---- */
.vp-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vp-mcard{display:flex;flex-direction:column;padding:24px 24px 22px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.vp-mcard .mh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.vp-mcard .mh .mono{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;color:var(--ink-3);letter-spacing:0;font-weight:500}
.vp-mcard h3{margin:0 0 8px;font-size:18px;font-weight:590;letter-spacing:-.014em;color:var(--ink);line-height:1.3}
.vp-mcard>p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.vp-split{margin:auto 0 0;display:grid;gap:10px}
.vp-split div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:start;padding-top:12px;border-top:1px solid var(--line-soft)}
.vp-split .lb{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3);padding-top:2px}
.vp-split .tx{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.vp-split .alone .lb{color:var(--green-t)}
.vp-split .waits .lb{color:var(--am)}
@media (max-width:1000px){.vp-modes{grid-template-columns:1fr}}

/* ---- S5: bento extras ---- */
.drow .st.hi{color:var(--am)}
.vp-report{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
.vp-report li{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--ink)}
.vp-report li b{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:600;color:#1D4ED8;background:rgba(29,78,216,.12);flex:none}
.vp-case{display:flex;flex-direction:column;gap:8px}
.vp-case .crow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--ink)}
.vp-case .crow .lb{flex:none;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.vp-case .crow .pill{margin-left:auto}
.vp-case .crow.neg{color:var(--ink-2)}
.vp-case .crow.neg .lb{color:var(--am)}
.vp-gate{display:flex;flex-direction:column;gap:8px}
.vp-gate .grow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--ink);white-space:nowrap}
.vp-gate .grow .mono{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;color:var(--ink-3);font-weight:500}
.vp-gate .grow .pill{margin-left:auto}
.vp-words{display:flex;flex-wrap:wrap;gap:6px}
.vp-words span{padding:5px 10px;border-radius:8px;background:rgba(180,83,9,.08);border:1px solid rgba(180,83,9,.18);font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:500;color:var(--am)}
.bcard.w2:not(.feat) p{max-width:52ch}
@media (max-width:640px){.vp-gate .grow{white-space:normal;flex-wrap:wrap}}