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

@font-face{font-family:"ImperumDisplay";src:url("/fonts/imperum-display.29c2a2a8.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* ============ TOKENS ============ */
:root{color-scheme:dark;
  
  --paper:#F1F4FA;             /* the hero's ground */
  --surface-0:#FAFAFA;         /* gutters, wells, grey bands */
  --surface-1:#FFFFFF;         /* cards */
  --surface-2:#EEF2F8;         /* chips, inset fields */
  --band-white:#FFFFFF;
  --band-gray:#FAFAFA;
  --bg:#FFFFFF;
  --bg-soft:#FAFAFA;
  --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}

/* ============ BDA — stage columns, loop arc, proof band, stage sections, new-slot ============ */
/* Stage accent, one place. Set on any element that carries data-stage, so the hero
   columns and the body sections cannot drift out of agreement. */
[data-stage]{--sc:var(--ink-3)}
[data-stage="before"]{--sc:#0E7490}
[data-stage="during"]{--sc:#D9202E}
[data-stage="after"]{--sc:#15803D}


.hero{min-height:100svh;padding:118px 0 40px;justify-content:center}
.hero .wrap{max-width:1420px;flex:0 0 auto}
.hero .h1{white-space:normal;font-size:clamp(30px,3.3vw,48px);letter-spacing:-.024em}
.hero .h1 em{font-style:normal;color:inherit}   
.hero .sub{margin-top:14px;font-size:clamp(15px,1.2vw,17.5px);color:var(--ink-2);max-width:52ch}
.hero .cta-row{margin-top:24px}
.hero-copy{max-width:1100px}
.hero-grid{gap:0;justify-content:flex-start}
.hero .btn{font-size:17px;padding:15px 30px}

.hero .h1{background-image:linear-gradient(102.4deg,#808F9A 8.7%,#424C5E 46.5%,#091324 84.3%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* the slot: as wide as the viewport up to 1600 (so the board never scales past 1:1), height from the board's aspect
   but never more than what the screen leaves under the copy; the svg letterboxes inside (xMidYMid meet). The taps
   are drawn 600 past the viewBox and overflow:visible lets them reach the frame at any width; .hero clips them. */
.pcb-slot{position:relative;z-index:2;width:100%;max-width:1600px;margin:40px auto 0;aspect-ratio:1600/524;max-height:calc(100svh - 420px);min-height:260px;contain:layout paint}
.pcb-slot .pcb{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}

@media (max-width:1219px){
  .pcb-slot{aspect-ratio:auto;max-height:none;min-height:0;max-width:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pcb-slot::-webkit-scrollbar{display:none}
  .pcb-slot .pcb{position:static;width:1220px;height:auto}
  .pcb-hits{display:none}
}
/* the board's own grammar: the tab strip's trace values on the hero's paper. r2 lightens the neutrals
   toward the reference file (~/Downloads/index.html: wire #EEEEEE, joint #E1E3E7, pin #B7C2D1) but stops
   at #D7DDE7 -- #EEEEEE measures a luminance drop of 3.2 against the paper after the 0.90 downscale and
   FAILS the gate's pixel test, which needs 4. One accent, declared once. */
.pcb{--pcb-acc:#D9202E}
.pcb text{font-family:"ImperumSans",system-ui,sans-serif}
.pcb .lbl{fill:var(--ink);font-weight:500}
.pcb .ico{fill:none;stroke:var(--ink-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pcb .cap{fill:#fff;stroke:var(--line);stroke-width:1}
.pcb .pillr{fill:#fff;stroke:var(--line-strong);stroke-width:1}   /* the two anchors keep the heavier edge */
.pcb .chipr{fill:url(#pcb-chip)}
.pcb .pillt{fill:var(--ink);font-weight:700}
.pcb .pills{fill:var(--ink-2);font-weight:500}
.pcb .chipt{fill:#fff;font-weight:700}
.pcb .chips{fill:#B9C0CC;font-weight:500}
.pcb .tr{fill:none;stroke:#D7DDE7;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.pcb .tr.acc{stroke:var(--pcb-acc);stroke-width:1.5}
.pcb .via{fill:none;stroke:#CBD3DF;stroke-width:1}
.pcb .via.acc{stroke:var(--pcb-acc)}
.pcb .pad,.pcb .dot{fill:#CBD3DF}
.pcb .pad.acc{fill:var(--pcb-acc)}
.pcb .pin{fill:#B7C2D1}
.pcb .pin.acc{fill:var(--pcb-acc)}

/* ---- the animated layer. EVERY node the JS creates carries .acc, so the gate's "nothing red outside
   the .acc set" check holds even if it measures mid-flight; and none of them reuses a counted class
   (tr / via / pad / dot / pin), so the element counts are untouched too. ---- */
.pcb .pk{fill:none;stroke:var(--pcb-acc);stroke-linecap:round}
.pcb .pkh{fill:var(--pcb-acc)}
.pcb .rdot{fill:#A9B4C6}                 /* the quiet net's flow: a shade under the pins, never red */
.pcb .rdot.acc{fill:var(--pcb-acc)}      /* only the four crimson traces carry red flow */
.pcb .ring,.pcb .rip,.pcb .hl{fill:none;stroke:var(--pcb-acc);stroke-linecap:round}
.pcb .tr.lit{stroke:var(--ink-2);stroke-width:1.4}   /* hover: darken, never redden --
   a red path.tr without .acc trips the gate's stray-red rule, and adding .acc would make the
   crimson-route count 5 instead of 4. The capsule's own border carries the accent instead. */
.pcb-fx,.pcb-fx2{will-change:opacity}

/* ---- the hover layer: 21 real buttons over the board, sized from the svg by JS ---- */
.pcb-hits{position:absolute;inset:0;pointer-events:none}
.pcb-hit{position:absolute;margin:0;padding:0;border:0;background:none;border-radius:12px;
  cursor:pointer;pointer-events:auto;-webkit-appearance:none;appearance:none}
.pcb-hit:focus{outline:none}
.pcb-hit:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.pcb-hit .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


.pcb-card{position:absolute;z-index:6;left:0;top:0;width:max-content;max-width:268px;text-align:left;
  background:var(--surface-1);border:1px solid var(--line);border-radius:12px;padding:11px 14px 12px;
  box-shadow:0 2px 4px -2px rgba(9,19,36,.08),0 18px 44px -20px rgba(9,19,36,.22);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(var(--pc-dy,-4px))}
.pcb-card.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.pcb-card .pc-k{margin:0 0 3px;font-size:11.5px;font-weight:600;letter-spacing:.055em;color:var(--ink-3)}
.pcb-card .pc-d{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.pcb-card .pc-l{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:12.5px;
  font-weight:600;color:var(--red-deep);text-decoration:none}
.pcb-card .pc-l i{font-style:normal;transition:transform .2s var(--ease-snap)}
.pcb-card .pc-l:hover i{transform:translateX(3px)}
.pcb-card .pc-l:hover span{text-decoration:underline}
.pcb-card [hidden]{display:none}


.pcb .capg.is-on rect.cap{stroke:var(--pcb-acc)}
.pcb.is-focused .capg:not(.is-on) rect.cap,
.pcb.is-focused .capg:not(.is-on) text,
.pcb.is-focused .capg:not(.is-on) .ico{opacity:.5}

@media (prefers-reduced-motion:no-preference){
  .pcb-card{transition:opacity 160ms var(--ease-snap),transform 220ms var(--ease-out),visibility 0s 220ms}
  .pcb-card.is-open{transition:opacity 160ms var(--ease-snap),transform 220ms var(--ease-out),visibility 0s}
  .pcb-card-in>*{opacity:0;transform:translateY(4px);
    transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
  .pcb-card.is-open .pcb-card-in>*{opacity:1;transform:none}
  
  .pcb-card.is-open .pcb-card-in>:nth-child(1){transition-delay:60ms}
  .pcb-card.is-open .pcb-card-in>:nth-child(2){transition-delay:120ms}
  .pcb-card.is-open .pcb-card-in>:nth-child(3){transition-delay:180ms}
  .pcb .capg rect.cap{transition:stroke 150ms var(--ease-snap)}
  .pcb .capg rect.cap,.pcb .capg text,.pcb .capg .ico{transition:opacity var(--dur-micro),stroke 150ms var(--ease-snap)}
}


/* Equal vertical spacing keeps recognition text and logos centered between the rules. */
.sec.pfband{padding:64px 0}
@media(max-width:840px){.sec.pfband{padding:80px 0}}
.pfband .wrap{display:grid;grid-template-columns:minmax(0,1fr);row-gap:30px;padding-left:32px}
/* .recog ships absolutely docked on the hero fold line; here it is a static row */
.pfband .recog{position:static;transform:none;display:flex;flex-wrap:nowrap;
  justify-content:flex-start;align-items:center;gap:0 30px;white-space:normal;margin:0}
.pfband .recog .meta{flex:0 0 152px}
.pfband .marks{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;
  justify-content:space-between;align-items:center}
.js .pfband .recog.rv{transform:translateY(10px)}
.js .pfband .recog.rv.in{transform:none}
.pfband .t-mark{display:block}
.pfband .t-mark img{display:block;max-height:32px;max-width:150px;width:auto;height:auto;
  filter:brightness(0);opacity:.45;transition:opacity var(--dur-micro)}
.pfband .t-mark:hover img{opacity:.7}

/* ---- the three body stage sections: sticky side, module rows ---- */
.stgsec-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:start}
.stgsec-side{position:sticky;top:118px;padding-left:20px;border-left:2px solid var(--sc)}
.stgsec-side .h2{font-size:clamp(26px,2.6vw,36px)}
.stgsec-side .lead{margin-top:14px;font-size:16px;max-width:44ch}
.stgsec-side .tlink{margin-top:22px;display:inline-flex}
.tlink.red,.tlink.red:hover{color:var(--ink)}   

.pnsec .tlink.red,.pnsec .tlink.red:hover{background:linear-gradient(90deg,#E00030,#E31E42);-webkit-background-clip:text;background-clip:text;color:transparent}
.pnsec .tlink.red svg{color:#E31E42}
.stgsec-rows{margin:0;padding:0;list-style:none;counter-reset:mrow}
.stgsec-rows>li+li{border-top:1px solid var(--line)}  
.mrow{
  display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);gap:24px;
  padding:18px 4px;text-decoration:none;color:inherit;
  transition:background-color .16s linear;
}
a.mrow:hover{background:var(--surface-0)}
.mrow-h{min-width:0}
.mrow-h b{display:block;font-size:16.5px;font-weight:590;letter-spacing:-.014em;color:var(--ink);line-height:1.28}
a.mrow:hover .mrow-h b{color:var(--red-deep)}
.mrow-h em{
  display:block;margin-top:5px;font-style:normal;
  font-size:12.5px;color:var(--ink-3);font-weight:500}
.mrow-c{margin:0;font-size:14.8px;line-height:1.62;color:var(--ink-2);min-width:0}
.mrow-c .arr-i{margin-left:6px;vertical-align:-2px;color:var(--red-deep);opacity:0;
  transition:opacity .16s linear,transform .26s var(--ease)}
a.mrow:hover .mrow-c .arr-i{opacity:1;transform:translateX(3px)}
span.mrow{cursor:default}
span.mrow .mrow-h b{color:var(--ink-3)}
span.mrow .mrow-c{color:var(--ink-3);opacity:.82}
/* the loop callout that closes the AFTER section */
.loopcard{
  margin:44px 0 0;padding:22px 26px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface-1);box-shadow:var(--sh-1);
  display:flex;gap:16px;align-items:flex-start;
}
.loopcard svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--sc)}
.loopcard p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.loopcard b{color:var(--ink);font-weight:590}


.sec.newpsec{--band:#0C1019;--hair:rgba(246,247,251,.10);padding:0;position:relative;z-index:2;background:var(--band);overflow-x:clip}

div#frame::before,div#frame::after{z-index:1}

.sec.newpsec::before,.sec.newpsec::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--hair);pointer-events:none;z-index:3}
.sec.newpsec::before{left:max(20px,calc(50% - 620px))}
.sec.newpsec::after{left:min(calc(100% - 21px),calc(50% + 620px))}
div.xrule{z-index:3}   

.nav.over-dark::before{background:rgba(255,255,255,.97);box-shadow:inset 0 0 0 1px rgba(9,19,36,.10),0 10px 30px rgba(0,0,0,.35)}
/* ---- part 1: flag + name, then the dome ---- */
.newp{position:relative;padding:72px 0 0;border-radius:0;background:var(--band);color:#F6F7FB;overflow:hidden}   /* overflow: clips the disc at the horizon */
.newp-body{padding:0 max(20px,calc(50% - 620px))}   /* the dome box IS the rail span, so the rim ends land on the rails at every width */
.newp-head{max-width:820px;margin:0 auto;padding:0 40px;text-align:center;position:relative;z-index:1}
.newp-flag{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:rgba(246,247,251,.62);font-weight:500}
.newp-flag .pn-glyph{color:var(--red)}   /* the BEFORE/DURING ring glyph, in red, replaces the static dot */

.newp .newp-name{margin:16px 0 0;max-width:none;color:#fff;font-weight:400;font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-.024em;text-wrap:balance}


.newpsec .btn-outline::before{display:none}
.newpsec .btn-outline{border:1px solid rgba(246,247,251,.32);background:transparent;color:#fff}
.newpsec .btn-outline:hover{border-color:rgba(246,247,251,.58);background:rgba(246,247,251,.06)}
.newpsec .btn-outline:focus-visible{outline:2px solid #fff;outline-offset:3px}
.newpsec .btn-outline .arr-i{width:14px;height:14px}
/* the dome. viewBox 1200 x HY, the disc centre below the fold so the horizon at y HY is exactly the 1200 chord:
   the rim's two ends are the box's two bottom corners = the rails. aspect-ratio + sweep origin come from
   newest_css() so they can never drift from NEWP_CX/CY/R. */
.newp-viz{position:relative;width:100%;margin:12px 0 0;min-width:0;clip-path:inset(-140px 0 0 0)}   /* the glow may rise above the apex, never into the side margins */
.newp-viz svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.newp-viz text{fill:rgba(246,247,251,.78);font-weight:500}
.newp-viz .nrn{stroke:rgba(246,247,251,.05);stroke-width:1}   /* Attio's vertical rain behind the dome */
.newp-viz .rr{fill:none;stroke:rgba(246,247,251,.12);stroke-width:1}
.newp-viz .rs{stroke:rgba(246,247,251,.07);stroke-width:1}
.newp-viz .rim{fill:none;stroke:url(#nrim);stroke-width:1.6;stroke-linecap:round}
/* the glow sits on a warm dark under-stroke, never straight on the navy: red at low alpha over
   navy composites violet, so the fade passes through warm brown instead */
.newp-viz .rim-u{fill:none;stroke:url(#nrimu);stroke-width:26;filter:url(#nblur2);opacity:.9}
.newp-viz .rim-g{fill:none;stroke:url(#nrim);stroke-width:7;filter:url(#nblur1);opacity:.72}
.newp-viz .nsweep{transform-box:view-box;animation:nsweep 12s linear infinite}
.newp-viz .nsweep path{fill:url(#nwedge)}
.newp-viz .nsweep line{stroke:var(--red);stroke-width:1.4;stroke-linecap:round}
@keyframes nsweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.newp-viz .nb{fill:rgba(246,247,251,.32);transform-box:fill-box;transform-origin:center;animation:12s var(--ease) infinite}
.newp-viz .nb.hot{fill:rgba(246,247,251,.32)}
.newp-viz .nl{opacity:0;animation:12s var(--ease) infinite}
.newp-viz .nl .c{font-size:11px}
.newp-viz .nl .v{font-size:10px;fill:rgba(246,247,251,.5)}
.newp-viz .nl.hot .c{fill:var(--red)}
.newp-viz .nl .tick{stroke:rgba(246,247,251,.28);stroke-width:1}
.newp-viz .nl.hot .tick{stroke:rgba(239,51,65,.7)}
/* ---- part 2: the "Signals" block. Side hairlines ON the rails, top/bottom rules viewport edge to edge
   (the top one is the horizon carried past the rim's ends), a vertical divider at the midpoint. ---- */
.nf-wrap{padding:0 max(20px,calc(50% - 620px))}
.nf{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-left:1px solid var(--hair);border-right:1px solid var(--hair)}
.nf::before,.nf::after{content:"";position:absolute;left:-100vw;right:-100vw;height:1px;background:var(--hair);pointer-events:none}
.nf::before{top:0}.nf::after{bottom:0}
.nf-copy{min-width:0;padding:64px 48px 56px 40px}
.nf-media{position:relative;display:grid;min-width:0;align-items:center;padding:40px 24px;border-left:1px solid var(--hair)}
.nf-label{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:12.5px;font-weight:500;color:rgba(246,247,251,.55)}
.nf-label .pn-glyph{color:rgba(246,247,251,.55)}
.nf-h2{margin:18px 0 0;max-width:520px;font-size:clamp(28px,2.9vw,40px);line-height:1.12;letter-spacing:-.02em;font-weight:400;color:#fff;text-wrap:balance}
.nf-h2 b{font-weight:500}
.nf-h2 span{display:block;color:rgba(246,247,251,.5);font-family:"ImperumSans",system-ui,sans-serif;letter-spacing:-.015em}
.nf-more{margin-top:22px;font-size:13.5px;padding:9px 16px;gap:8px}
.nf-list{list-style:none;margin:44px 0 0;padding:0}
.nf-item{position:relative;border-top:1px solid var(--hair)}
.nf-item:last-child{border-bottom:1px solid var(--hair)}
.nf-t{appearance:none;display:block;width:100%;text-align:left;background:none;border:0;margin:0;padding:18px 0;font:inherit;font-size:16.5px;font-weight:500;letter-spacing:-.01em;
  color:rgba(246,247,251,.5);cursor:pointer;transition:color .25s var(--ease)}
.nf-item.is-on .nf-t,.nf-t:hover{color:#fff}
.nf-t:focus-visible{outline:2px solid #E31E42;outline-offset:3px;border-radius:4px}

.nf-d{height:0;overflow:hidden;transition:height .45s var(--ease)}
.nf-item.is-on .nf-d{height:var(--nf-open,96px)}
.nf-desc{margin:0 0 22px;max-width:46ch;font-size:14.5px;line-height:1.58;color:rgba(246,247,251,.62);opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.nf-item.is-on .nf-desc{opacity:1;transform:none;transition-delay:.12s}
/* the progress line IS the clock (JS_NEWF advances on its animationend); rest = the hairline, fill #8F99A8 as measured on attio.com */
.nf-bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--hair);overflow:hidden;pointer-events:none}
.nf-bar i{position:absolute;inset:0;background:#8F99A8;transform:scaleX(0);transform-origin:left center}
.nf-item.is-on .nf-bar i{animation:nfbar var(--nf-step,7s) linear both}
@keyframes nfbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.nf:not(.on) .nf-bar i{animation-play-state:paused}
.nf-fig{grid-area:1/1;margin:0;min-width:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(6px);visibility:hidden;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.nf-fig.is-on{opacity:1;transform:none;visibility:visible;transition:opacity .4s var(--ease) .1s,transform .4s var(--ease) .1s,visibility 0s}
.nf-fig .pn-svg{width:100%;max-width:620px;height:auto}
.nf-fig:not(.is-on) .pn-svg *,.nf:not(.on) .pn-svg *{animation-play-state:paused!important}
/* ---- part 3: the closer card ---- */

.nc-wrap{padding:0 max(20px,calc(50% - 620px))}

.nc{margin:0;position:relative;overflow:hidden;min-height:300px;display:grid;grid-template-columns:minmax(0,1fr);
  align-content:stretch;padding:48px;border:1px solid rgba(246,247,251,.12);border-radius:16px}
.nc-copy{position:relative;z-index:1;max-width:660px;display:flex;flex-direction:column;justify-content:space-between}
.nc-lead{margin:0;max-width:44ch;font-size:clamp(18px,1.55vw,22px);line-height:1.42;letter-spacing:-.012em;color:#fff;font-weight:500}
.nc-lead span{color:rgba(246,247,251,.55);font-weight:400}
.nc-cta{margin:28px 0 0}   /* the floor when the card is shorter than its content; space-between wins above it */
.nc .btn{font-size:16px;padding:14px 26px}
/* the dot field is a BLEEDING layer, not a grid track: it runs to the card's top, right and bottom
   edges (clipped by the 16px radius) so the block is filled, and fades out to the left so the 88px
   gutter between the copy and the first dot column stops reading as a hole. */
.nc-fig{position:absolute;inset:0;width:100%;margin:0;min-width:0;pointer-events:none}
.nc-grid{display:block;width:100%;height:100%}
/* TRAP: a <use> clones its target into a shadow tree that document selectors CANNOT reach, so
   `.nc-grid circle{fill:...}` never touches the cloned dots - they inherit from the <use> instead,
   and the default fill is BLACK. Every colour here is set on the <use> (or the <g> around it). */
.nc-grid use{fill:#F6F7FB}
.nc-grid .ncbase{opacity:.12}                       /* the resting field */
.nc-grid .nclit{opacity:.5}                        /* the same field again, shown only through the band */
/* the red has to be set ON the <use>, not on the <g> around it: `.nc-grid use{fill:#F6F7FB}` matches
   the element DIRECTLY, and a direct declaration always beats an inherited one whatever the parent's
   specificity. .9 not .5, because red under alpha .108 over this navy composites violet. */
.nc-grid .nchot use{fill:#EF3341;opacity:.9}
/* ONE animated element: the band's gradient is spreadMethod="repeat", so translating it by exactly
   one period loops seamlessly. 1,500 per-dot animations would be the same picture at 1,500x the cost. */
.nc-grid .ncsw{animation:ncsw var(--ncw-t,6s) linear infinite}
/* the wave: --i is the dot's DIAGONAL index, so the light travels across the field. opacity and fill
   only - r is not reliably CSS-animatable. The red dots peak at .95: red at low alpha over this navy
   composites violet, so a faded red dot would go purple on the way out. */
/* the delay spread must EQUAL the period, or the wave crosses and then the field sits dead:
   max --i is (cols-1)+(rows-1) = 55, so 55 x .1s = the 5.5s cycle and the band never stops. */

@keyframes ncsw{to{transform:translate(var(--ncw-x),var(--ncw-y))}}
@media (max-width:1080px){
  .newp{padding-top:56px}
  .newp-viz .nl .c{font-size:13px}.newp-viz .nl .v{font-size:12px}
}
@media (max-width:900px){
  .nf{grid-template-columns:minmax(0,1fr)}
  .nf-copy{padding:48px 24px 40px}
  .nf-media{border-left:0;border-top:1px solid var(--hair);padding:32px 12px}
  .nf-h2{font-size:clamp(26px,6vw,34px)}
  .nc{padding:32px 24px;min-height:260px}
}
@media (max-width:760px){
  .newp{padding-top:48px}
  .newp-head{padding:0 22px}
  .newp-viz .nl{display:none}
  .nf-t{padding:16px 0;font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .nf-d,.nf-desc,.nf-fig,.nf-t{transition:none}
  .nf-bar i{animation:none;transform:scaleX(1)}
  .nc-grid .ncsw{animation:none}   /* the band parks mid-field: a static diagonal of lit dots */
}


h1,.h1,h2,.h2,.pn-h2,.newp-name,.nf-h2,.qt blockquote,.sc-h2{font-family:"ImperumDisplay","ImperumSans",system-ui,sans-serif}

.sec.pnsec{padding:0}  
.pn-head{padding:84px 32px 60px;max-width:1240px;margin:0 auto}
.pn-eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  font-size:12.5px;color:var(--ink-3);font-weight:500}
.pn-glyph{width:18px;height:18px;flex:none;color:var(--ink-3)}
.pn-glyph .ring{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:44 12;stroke-dashoffset:0;transform-origin:50% 50%;animation:pnring 3.2s var(--ease) infinite}
.pn-glyph .core{fill:currentColor;animation:pncore 3.2s var(--ease) infinite}
@keyframes pnring{0%{stroke-dasharray:44 12;transform:rotate(0)}55%,70%{stroke-dasharray:56 0;transform:rotate(180deg)}100%{stroke-dasharray:44 12;transform:rotate(360deg)}}
@keyframes pncore{0%,45%{r:2.2}60%,72%{r:3.4}100%{r:2.2}}
.pn-h2{margin:18px 0 0;max-width:980px;font-size:clamp(26px,2.75vw,38px);line-height:1.18;letter-spacing:-.02em;font-weight:400}
.pn-h2 b{font-weight:500;color:var(--ink)}
.pn-h2 span{display:block;color:var(--ink-3);font-weight:400;font-family:"ImperumSans",system-ui,sans-serif;letter-spacing:-.015em}  
.pn-frame{border-top:1px solid var(--line)}
.pn-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);max-width:1240px;margin:0 auto;padding:0;align-items:start}
.pn-navcol{position:relative;border-right:1px solid var(--line);align-self:stretch}
.pn-nav{position:sticky;top:118px;padding:72px 12px 40px 56px;min-height:min(calc(100svh - 118px),640px);display:flex;flex-direction:column}
.pn-nav ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pn-nav ol a{
  display:block;padding:5px 0;font-size:15.5px;font-weight:520;letter-spacing:-.008em;text-decoration:none;
  color:var(--ink-3);opacity:.5;transition:opacity .22s var(--ease),color .22s var(--ease);
}
.pn-nav ol a:hover{opacity:.85}
.pn-nav ol a.is-on{color:var(--ink);opacity:1}
.pn-bar{position:absolute;left:-1px;top:0;width:2px;height:28px;background:linear-gradient(180deg,#E00030,#E31E42);border-radius:1px;
  transform:translateY(72px);transition:transform .45s var(--ease),height .45s var(--ease);will-change:transform}
.pn-nav .tlink{margin-top:auto;padding-top:36px;align-self:flex-start;font-size:14px}
.pn-panels{min-width:0}
.pn,.pn-media{min-width:0}
.pn{border-bottom:1px solid var(--line);scroll-margin-top:118px}
.pn:last-child{border-bottom:0}
.pn-top{padding:76px 56px 52px}
.pn-h{margin:0;max-width:620px;font-size:clamp(19px,1.75vw,24px);line-height:1.32;letter-spacing:-.014em;font-weight:400;text-wrap:balance}
.pn-h b{font-weight:520;color:var(--ink)}
.pn-h span{color:var(--ink-3)}
.pn-top .tlink{margin-top:22px}
.pn-media{
  position:relative;border-top:1px solid var(--line);background:var(--surface-0);
  height:560px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pn-media .pn-cap{
  position:absolute;top:18px;left:24px;margin:0;font-size:12.5px;color:var(--ink-3);font-weight:500}
.pn-fig{width:min(100% - 48px,880px);margin:0;
  opacity:0;filter:blur(6px);transform:translateY(18px);
  -webkit-mask-image:linear-gradient(to right,#000 40%,transparent 100%);mask-image:linear-gradient(to right,#000 40%,transparent 100%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:opacity .5s var(--ease),filter .7s var(--ease),transform .7s var(--ease),-webkit-mask-size .9s ease-out,mask-size .9s ease-out;
}
.pn.on .pn-fig{opacity:1;filter:none;transform:none;-webkit-mask-size:260% 100%;mask-size:260% 100%}
.pn:not(.on) .pn-svg *{animation-play-state:paused!important}
@media (max-width:1180px){
  .pn-grid{grid-template-columns:minmax(0,240px) minmax(0,1fr)}
  .pn-nav{padding:56px 20px 32px 40px}
  .pn-top{padding:60px 40px 44px}
  .pn-media{height:480px}
}
@media (max-width:900px){
  .pn-head{padding:64px 24px 40px}
  .pn-grid{grid-template-columns:minmax(0,1fr)}
  .pn-navcol{min-width:0;border-right:0;border-bottom:1px solid var(--line);position:sticky;top:64px;z-index:5;background:var(--band-white)}
  .pn-nav{position:static;min-height:0;padding:0;display:block}
  .pn-nav ol{min-width:0;flex-direction:row;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pn-nav ol::-webkit-scrollbar{display:none}
  .pn-nav li{flex:none}
  .pn-nav ol a{padding:14px 18px;font-size:14px;white-space:nowrap;border-bottom:2px solid transparent}
  .pn-nav ol a.is-on{border-image:linear-gradient(90deg,#E00030,#E31E42) 1}
  .pn-bar,.pn-nav .tlink{display:none}
  .pn{scroll-margin-top:118px}
  .pn-top{padding:44px 24px 32px}
  /* no aspect-ratio here: with min-height it derives a WIDTH from the height and the page scrolls sideways */
  .pn-media{height:auto;min-height:0;padding:60px 0 36px}
  .pn-fig{width:calc(100% - 16px);min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .pn-fig{opacity:1;filter:none;transform:none;-webkit-mask-image:none;mask-image:none;transition:none}
  .pn-glyph *{animation:none!important}
  .pn-bar{transition:none}
}


.bnsec{padding:0 0 96px}
.bnsec .pn-head{padding-bottom:44px}

.bnsec .wrap{max-width:none;padding:0 max(20px,calc(50% - 620px))}
.bn-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-left:1px solid var(--line)}

.bnsec{overflow-x:clip}
.bn-grid::before,.bn::after{content:"";position:absolute;left:-100vw;right:-100vw;height:1px;background:var(--line);pointer-events:none}
.bn-grid::before{top:0}
.bn::after{bottom:-1px}
.bn{
  position:relative;display:flex;flex-direction:column;min-width:0;background:var(--band-white);
  border-right:1px solid var(--line);
}
.bn-body{padding:36px 28px 0;display:flex;flex-direction:column;align-items:flex-start;flex:1 0 auto}  /* grows, so the link below pins to one line across the row */
.bn-ico{width:22px;height:22px;color:var(--ink);margin-bottom:22px}
.bn-ico svg{display:block;width:100%;height:100%}
.bn-h{margin:0;font-size:17.5px;font-weight:500;line-height:1.3;color:var(--ink)}  
.bn-c{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.bn-body .tlink{margin-top:auto;padding-top:14px;font-size:14px;font-weight:500}

.bn-media{position:relative;margin:26px 28px 32px;padding:0;min-width:0;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;background:#FAFAFA;border-radius:8px;overflow:hidden}
.bn-fig{margin:0;width:100%;min-width:0;opacity:0;filter:blur(5px);transform:translateY(10px);
  transition:opacity .5s var(--ease),filter .7s var(--ease),transform .7s var(--ease)}
.bn.on .bn-fig{opacity:1;filter:none;transform:none}
.bn:not(.on) .bn-svg *{animation-play-state:paused!important}
.bn-svg{display:block;width:100%;height:auto}
/* the full-width seventh cell */
.bn.wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);align-items:center}
.bn.wide .bn-body{padding:36px 28px 36px}
.bn.wide .bn-media{margin:28px 28px 28px 0}
@media (max-width:1080px){
  .bn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bn.wide{grid-template-columns:minmax(0,1fr)}
  .bn.wide .bn-body{padding-bottom:0}
  .bn.wide .bn-media{margin:26px 28px 32px}
}
@media (max-width:700px){
  .bnsec{padding-bottom:64px}
  .bn-grid{grid-template-columns:minmax(0,1fr)}
  .bn-body,.bn.wide .bn-body{padding:28px 20px 0}
  .bn-media,.bn.wide .bn-media{margin:20px 20px 26px;padding:0}
}
@media (prefers-reduced-motion:reduce){
  .bn-fig{opacity:1;filter:none;transform:none;transition:none}
}


.sec.tbsec{padding:0;overflow-x:clip}   /* like .pnsec: no empty band under the panel; the next section's .xrule closes it */
.tbsec .pn-head{padding-bottom:96px}
.tb-wrap{padding:0 max(20px,calc(50% - 620px))}   /* the wrap's edges ON #frame's rails, like the bento */
.tb-nav{position:relative;z-index:2}   /* above the panel, so the terminal pads paint over its hairline */
.tb-nav ol{list-style:none;margin:0;padding:4px 40px 92px;position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tb-nav ol::-webkit-scrollbar{display:none}
.tb-nav li{position:relative;flex:none;padding:0}
.tb-nav button{appearance:none;background:#fff;border:1px solid #D5DBE3;border-radius:6px;margin:0;padding:10px 12px;font:inherit;font-size:15px;font-weight:500;letter-spacing:-.008em;color:var(--ink-3);cursor:pointer;white-space:nowrap;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.tb-nav button:hover{background:#F8FAFC;border-color:#AAB6C5;color:var(--ink)}
.tb-nav button.is-on{color:#E00030;border-color:#E31E42;background:#FFF2F5}
.tb-nav button:focus-visible{outline:2px solid #E31E42;outline-offset:2px}
.tb-nav li.tb-pcb-li{position:absolute;left:0;bottom:0;margin:0;padding:0;height:92px;pointer-events:none;list-style:none}   /* li.: outranks .tb-nav li{position:relative} */
.tb-pcb{display:block;height:92px;overflow:visible}
.tb-tr{fill:none;stroke:#C4CDDA;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.tb-tr.feed{stroke:var(--line)}   /* the panel hairline continuing inside */
.tb-via.feed{stroke:#C4CDDA;fill:#fff}
.tb-tr.is-on{stroke:var(--tb-grad);stroke-width:1.5}
.tb-via{fill:#fff;stroke:#C4CDDA;stroke-width:1}
.tb-padc{fill:#fff;stroke:#C4CDDA;stroke-width:1;transition:fill .25s var(--ease),stroke .25s var(--ease)}
.tb-padc.is-on{fill:var(--tb-grad);stroke:transparent}
.tb-halo{fill:rgba(227,30,66,.10);opacity:0;transition:opacity .25s var(--ease)}
.tb-halo.is-on{opacity:1}

.tb-panel{position:relative;z-index:1;margin-top:-12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:600px;
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.tb-panel::before{content:"";position:absolute;z-index:1;top:0;left:-100vw;right:-100vw;height:1px;background:var(--line);pointer-events:none}
.tb-copy{position:relative;display:grid;min-width:0;background:var(--band-white);border-right:1px solid var(--line)}
.tb-c{grid-area:1/1;display:flex;flex-direction:column;min-width:0;padding:44px 48px 40px;
  opacity:0;transform:translateY(6px);visibility:hidden;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.tb-c.is-on{opacity:1;transform:none;visibility:visible;transition:opacity .4s var(--ease) .1s,transform .4s var(--ease) .1s,visibility 0s}
.tb-claim{margin:0;max-width:440px;font-size:clamp(20px,1.75vw,24px);line-height:1.3;letter-spacing:-.015em;font-weight:500;color:var(--ink);text-wrap:balance}
.tb-foot{margin-top:22px}   
.tb-desc{margin:0;max-width:480px;font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.tb-desc b{font-weight:500;color:var(--ink)}
.tb-foot .tlink{margin-top:16px;font-size:14px}
.tb-media{position:relative;display:grid;min-width:0;background:#FAFAFA;overflow:hidden}
.tb-media .pn-cap{position:absolute;top:18px;left:24px;z-index:1;margin:0;font-size:12.5px;color:var(--ink-3);font-weight:500}
.tb-fig{grid-area:1/1;margin:0;min-width:0;display:flex;align-items:center;justify-content:center;padding:52px 24px 24px;
  opacity:0;transform:translateY(6px);visibility:hidden;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.tb-fig.is-on{opacity:1;transform:none;visibility:visible;transition:opacity .4s var(--ease) .1s,transform .4s var(--ease) .1s,visibility 0s}
.tb-fig .pn-svg{width:100%;max-width:620px;height:auto}
.tb-fig:not(.is-on) .pn-svg *,.tbsec:not(.on) .pn-svg *{animation-play-state:paused!important}
@media (max-width:1180px){
  .tb-c{padding:36px 36px 32px}
}
@media (max-width:900px){
  .tbsec .pn-head{padding:64px 24px 56px}
  /* the strip scrolls, and overflow-x:auto also clips vertically: 8px of bottom padding keeps the pads whole, the bus + pulse move up with them */
  /* the strip scrolls, and overflow-x:auto also clips vertically: the PCB svg lives in the ol's own 92px bottom padding */
  .tb-nav ol{justify-content:flex-start;gap:28px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 20px 92px}
  .tb-nav ol::-webkit-scrollbar{display:none}
  .tb-nav button{font-size:14px}
  .tb-panel{margin-top:-12px;grid-template-columns:minmax(0,1fr);min-height:0}
  .tb-copy{border-right:0;border-bottom:1px solid var(--line)}
  .tb-c{padding:32px 24px 28px}
  .tb-foot{margin-top:18px}
  .tb-fig{padding:52px 12px 20px}
}
@media (prefers-reduced-motion:reduce){
  .tb-c,.tb-fig,.tb-padc,.tb-halo,.tb-nav button{transition:none}
}


.sec.afsec{padding:0 0 96px;overflow-x:clip}
.afsec .pn-head{padding-bottom:64px}
.af-wrap{padding:0 max(20px,calc(50% - 620px))}   /* the grid's edges ON #frame's rails, like the bento and the tabs */
.af-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.af-card{position:relative;min-width:0;background:var(--band-white);border:1px solid var(--line);border-radius:12px;padding:40px;overflow:hidden}
.af-card.wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:40px;align-items:start}
.af-card.half{display:flex;flex-direction:column}
.af-claim{margin:0;max-width:440px;font-size:clamp(20px,1.75vw,24px);line-height:1.3;letter-spacing:-.015em;font-weight:500;color:var(--ink);text-wrap:balance}
.af-desc{margin:22px 0 0;max-width:480px;font-size:14.5px;line-height:1.55;color:var(--ink-3)}   /* stacked 22 under the claim (section standards) */
.af-desc b{font-weight:500;color:var(--ink)}
.af-copy .tlink{margin-top:16px;font-size:14px;display:inline-flex}
.af-media{position:relative;min-width:0}
.af-card.half .af-media{margin-top:auto;padding-top:28px}   /* the scene sits on the card floor; a pair's height slack opens between copy and scene, never under the scene (Skiff) */
.af-media .pn-cap{margin:0 0 12px;font-size:12.5px;color:var(--ink-3);font-weight:500}
.af-fig{margin:0;min-width:0;opacity:0;filter:blur(5px);transform:translateY(10px);
  transition:opacity .5s var(--ease),filter .7s var(--ease),transform .7s var(--ease)}
.af-card.on .af-fig{opacity:1;filter:none;transform:none}
.af-card:not(.on) .pn-svg *{animation-play-state:paused!important}
.af-fig .pn-svg{display:block;width:100%;height:auto}
@media (max-width:1080px){
  .af-grid{grid-template-columns:minmax(0,1fr)}
  .af-card.wide{grid-template-columns:minmax(0,1fr)}
  .af-card.wide .af-media{margin-top:28px}
}
@media (max-width:700px){
  .afsec .pn-head{padding:64px 24px 40px}
  .sec.afsec{padding-bottom:64px}
  .af-card{padding:24px;border-radius:10px}
  .af-card.half .af-media{padding-top:22px}
  .af-card.wide .af-media{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .af-fig{opacity:1;filter:none;transform:none;transition:none}
}
.newp-viz{aspect-ratio:1200/440}
.newp-viz .nsweep{transform-origin:600px 690px}
@keyframes nb0{0%,9.4%{opacity:.32;transform:scale(1)}11.0%{opacity:1;transform:scale(2)}14.4%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:.32;transform:scale(1)}}
@keyframes nl0{0%,10.6%{opacity:0;transform:translateY(5px)}13.9%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes nv0{0%,15.4%{opacity:0}18.4%,90%{opacity:1}96%,100%{opacity:0}}
.newp-viz .nb0{animation-name:nb0}.newp-viz .nl0{animation-name:nl0}.newp-viz .nl0 .v{opacity:0;animation:nv0 12s var(--ease) infinite}
@keyframes nb1{0%,15.6%{opacity:.32;transform:scale(1)}17.2%{opacity:1;transform:scale(2)}20.6%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:.32;transform:scale(1)}}
@keyframes nl1{0%,16.8%{opacity:0;transform:translateY(5px)}20.1%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes nv1{0%,21.6%{opacity:0}24.6%,90%{opacity:1}96%,100%{opacity:0}}
.newp-viz .nb1{animation-name:nb1}.newp-viz .nl1{animation-name:nl1}.newp-viz .nl1 .v{opacity:0;animation:nv1 12s var(--ease) infinite}
@keyframes nb2{0%,21.7%{opacity:.32;transform:scale(1)}23.3%{opacity:1;transform:scale(2)}26.7%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:.32;transform:scale(1)}}
@keyframes nl2{0%,22.9%{opacity:0;transform:translateY(5px)}26.2%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes nv2{0%,27.7%{opacity:0}30.7%,90%{opacity:1}96%,100%{opacity:0}}
.newp-viz .nb2{animation-name:nb2}.newp-viz .nl2{animation-name:nl2}.newp-viz .nl2 .v{opacity:0;animation:nv2 12s var(--ease) infinite}
@keyframes nb3{0%,28.9%{opacity:.32;transform:scale(1)}30.5%{opacity:1;transform:scale(2)}33.9%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:.32;transform:scale(1)}}
@keyframes nl3{0%,30.1%{opacity:0;transform:translateY(5px)}33.4%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes nv3{0%,34.9%{opacity:0}37.9%,90%{opacity:1}96%,100%{opacity:0}}
.newp-viz .nb3{animation-name:nb3}.newp-viz .nl3{animation-name:nl3}.newp-viz .nl3 .v{opacity:0;animation:nv3 12s var(--ease) infinite}
@keyframes nb4{0%,34.4%{opacity:.32;transform:scale(1)}36.0%{opacity:1;transform:scale(2)}39.4%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:.32;transform:scale(1)}}
@keyframes nl4{0%,35.6%{opacity:0;transform:translateY(5px)}38.9%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes nv4{0%,40.4%{opacity:0}43.4%,90%{opacity:1}96%,100%{opacity:0}}
.newp-viz .nb4{animation-name:nb4}.newp-viz .nl4{animation-name:nl4}.newp-viz .nl4 .v{opacity:0;animation:nv4 12s var(--ease) infinite}
@keyframes nb5{0%,40.6%{opacity:.32;transform:scale(1)}42.2%{opacity:1;transform:scale(2)}45.6%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:.32;transform:scale(1)}}
@keyframes nl5{0%,41.8%{opacity:0;transform:translateY(5px)}45.1%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes nv5{0%,46.6%{opacity:0}49.6%,90%{opacity:1}96%,100%{opacity:0}}
.newp-viz .nb5{animation-name:nb5}.newp-viz .nl5{animation-name:nl5}.newp-viz .nl5 .v{opacity:0;animation:nv5 12s var(--ease) infinite}
.newp-viz .nb.lit{fill:#F6F7FB}.newp-viz .nb.hot{fill:var(--red)}
/* ---- panel scenes (shared grammar) ---- */
.pn-svg{display:block;width:100%;height:auto;font-family:inherit}
.pn-svg .pl{fill:#fff;stroke:var(--line);stroke-width:1}
.pn-svg .nd{fill:#fff;stroke:#DDE3EC;stroke-width:1}
.pn-svg .nd.bad{stroke:var(--red)}
.pn-svg .nd.stop{fill:#FFF5F5;stroke:#F3B4B9;stroke-dasharray:4 4}
.pn-svg .nd.hint{fill:#F0FAFC;stroke:#BFE3EA}
.pn-svg .tx{fill:var(--ink);font-weight:520}
.pn-svg .tx.redt{fill:var(--red-deep)}
.pn-svg .tx.faintt{fill:var(--ink-3)}
.pn-svg .big{fill:var(--ink);font-weight:500;letter-spacing:-.03em}
.pn-svg .mo{fill:var(--ink-3)}
.pn-svg .mo.redt{fill:var(--red-deep)}
.pn-svg .mo.faint{fill:#9AA5B8}
.pn-svg .ln{fill:#DCE3EC}
.pn-svg .ln.faint{fill:#EBEFF5}
.pn-svg .ln.red{fill:#F6A3A9}
.pn-svg .ed{fill:none;stroke:#D5DCE6;stroke-width:1}
.pn-svg .ed.red{stroke:var(--red);stroke-dasharray:3 4}
.pn-svg .ed.hi{stroke:var(--ink);stroke-width:2;stroke-dasharray:400;stroke-dashoffset:400}
.pn-svg .ch rect{fill:#EEF2F7;stroke:none}
.pn-svg .ch text{fill:var(--ink-2);font-weight:520}
.pn-svg .ch.red rect{fill:#FDE8EA}.pn-svg .ch.red text{fill:var(--red-deep)}
.pn-svg .ch.amber rect{fill:#FEF3DC}.pn-svg .ch.amber text{fill:#8A5A00}
.pn-svg .ch.ink rect{fill:var(--ink)}.pn-svg .ch.ink text{fill:#fff}
.pn-svg .sd{fill:#B7C2D3}
.pn-svg .pk{stroke:none}.pn-svg .pk.red{fill:var(--red)}.pn-svg .pk.ink{fill:var(--ink);opacity:0}.pn-svg .pk.grey{fill:#9AA5B8}


.pn-svg .ch.bl rect{fill:rgba(24,144,255,.09)}.pn-svg .ch.bl text{fill:#0B6BD6}
.pn-svg .ch.gn rect{fill:rgba(22,202,46,.11)}.pn-svg .ch.gn text{fill:#178A3C}
.pn-svg .ch.am rect{fill:rgba(255,166,77,.18)}.pn-svg .ch.am text{fill:#B4540A}
.pn-svg .ch.or rect{fill:rgba(255,119,61,.12)}.pn-svg .ch.or text{fill:#C2410C}
.pn-svg .ch.rd rect{fill:rgba(244,34,45,.08)}.pn-svg .ch.rd text{fill:#D0263A}
.pn-svg .ch.gy rect{fill:rgba(20,20,30,.055)}.pn-svg .ch.gy text{fill:var(--ink-2)}
.pn-svg .ch.red rect{fill:rgba(244,34,45,.08)}.pn-svg .ch.red text{fill:#D0263A}
.pn-svg .ch.amber rect{fill:rgba(255,166,77,.18)}.pn-svg .ch.amber text{fill:#B4540A}
.pn-svg .tint.bl{fill:rgba(24,144,255,.06)}.pn-svg .tint.gn{fill:rgba(22,202,46,.07)}.pn-svg .tint.am{fill:rgba(255,166,77,.12)}
.pn-svg .tint.or{fill:rgba(255,119,61,.09)}.pn-svg .tint.rd{fill:rgba(244,34,45,.06)}
.pn-svg .nd.am{stroke:#F1CB8C}.pn-svg .nd.or{stroke:#F5B79A}.pn-svg .nd.bl{stroke:#A9D2FA}
.pn-svg .tint.ring{stroke-width:1}
.pn-svg .tint.ring.rd{stroke:#F3CDD0}.pn-svg .tint.ring.bl{stroke:#CBE1FA}.pn-svg .tint.ring.gn{stroke:#C6E7CA}.pn-svg .tint.ring.am{stroke:#F4DCBB}.pn-svg .tint.ring.or{stroke:#F7D6C6}
.pn-svg .dot{stroke:none}.pn-svg .dot.bl{fill:#1890FF}.pn-svg .dot.gn{fill:#1DA34A}.pn-svg .dot.am{fill:#F5A623}.pn-svg .dot.or{fill:#FF773D}.pn-svg .dot.rd{fill:#E5484D}
.pn-svg .ico{stroke:none}.pn-svg .ico.bl{fill:#8CC4F7}.pn-svg .ico.gn{fill:#8FD9A3}.pn-svg .ico.am{fill:#F5C97A}.pn-svg .ico.or{fill:#F7B08C}
.pn-svg .tx.bl{fill:#0B6BD6}.pn-svg .tx.gn{fill:#178A3C}.pn-svg .tx.am{fill:#B4540A}.pn-svg .tx.or{fill:#C2410C}.pn-svg .tx.rd{fill:#D0263A}
.pn-svg .tx.mid{fill:var(--ink-2);font-weight:450}.pn-svg .tx.wh{fill:#fff}
.pn-svg .big.bl{fill:#0B6BD6}.pn-svg .big.gn{fill:#178A3C}.pn-svg .big.rd{fill:#D0263A}
.pn-svg .bsolid{fill:var(--ink)}
.pn-svg .arr{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.pn-svg .arr.wh{stroke:#fff}

/* 1 Defensum (Exposure dashboards): the needle swings Critical -> Low, both scores re-score, the trend draws, coverage fills */
.s1 .s1a{animation:s1a 10s infinite}.s1 .s1b{animation:s1b 10s infinite}
@keyframes s1a{0%,30%{opacity:1}36%,88%{opacity:0}94%,100%{opacity:1}}
@keyframes s1b{0%,32%{opacity:0}40%,88%{opacity:1}96%,100%{opacity:0}}
.s1 .s1band{fill:none;stroke-width:12}
.s1 .s1band.bl{stroke:rgba(24,144,255,.22)}.s1 .s1band.gn{stroke:rgba(22,202,46,.22)}.s1 .s1band.am{stroke:rgba(255,166,77,.34)}
.s1 .s1band.or{stroke:rgba(255,119,61,.26)}.s1 .s1band.rd{stroke:rgba(244,34,45,.18)}
.s1 .s1lit{fill:none;stroke-width:12;opacity:0}
.s1 .s1lit.bl{stroke:#1890FF}.s1 .s1lit.gn{stroke:#1DA34A}.s1 .s1lit.am{stroke:#F5A623}.s1 .s1lit.or{stroke:#FF773D}.s1 .s1lit.rd{stroke:#E5484D}
.s1 .s1lit4{animation:s1a 10s infinite}.s1 .s1lit1{animation:s1b 10s infinite}
.s1 .s1needle line{stroke:#E31E42;stroke-width:2.5;stroke-linecap:round}.s1 .s1needle circle{fill:var(--ink)}
.s1 .s1needle{transform-origin:450px 262px;animation:s1nd 10s var(--ease) infinite}
@keyframes s1nd{0%,30%{transform:rotate(61.2deg)}42%,88%{transform:rotate(-34.2deg)}100%{transform:rotate(61.2deg)}}
.s1 .s1area{fill:rgba(24,144,255,.07);opacity:0;animation:s1ar 10s var(--ease) infinite}
@keyframes s1ar{0%,20%{opacity:0}60%,88%{opacity:1}100%{opacity:0}}
.s1 .s1line{fill:none;stroke:#1890FF;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:s1ln 10s var(--ease) infinite}
@keyframes s1ln{0%,20%{stroke-dashoffset:420}60%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:420}}
.s1 .s1fw{fill:#1DA34A;transform-origin:646px 0;animation:s1fw 10s var(--ease) infinite;animation-delay:calc(var(--i) * .3s)}
@keyframes s1fw{0%,48%{transform:scaleX(0)}66%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* 2 Sentinel (PII Leaks radar): 6 s sweep, contacts paint on pass and decay to the product's alpha floor */
.s2 .s2disc{fill:url(#s2disc);stroke:#D5DCE6;stroke-width:1}
.s2 .s2q{fill:#EEF2F7;opacity:.55}
.s2 .s2ring{fill:none;stroke:#DCE3EC;stroke-width:1}
.s2 .s2spoke{stroke:#D5DCE6;stroke-width:1}
.s2 .s2tick{stroke:#C4CDDA;stroke-width:1}
.s2 .s2hub{fill:#fff;stroke:#D5DCE6;stroke-width:1}
.s2 .s2sweep{transform-origin:450px 268px;animation:s2rot 6s linear infinite}
@keyframes s2rot{to{transform:rotate(360deg)}}
.s2 .s2wedge{fill:#1C1D1F}.s2 .s2w0{opacity:.10}.s2 .s2w1{opacity:.05}.s2 .s2w2{opacity:.02}
.s2 .s2head{stroke-width:2;stroke-linecap:round}
.s2 .s2b{transform-box:fill-box;transform-origin:center;animation:6s ease-in-out infinite}
.s2 .s2grey{fill:#9AA5B8}
.s2 .s2pulse{fill:none;stroke-width:1.5;opacity:0;animation:6s linear infinite}
.s2 .s2pr1{animation-delay:.15s}.s2 .s2pr2{animation-delay:.3s}
.s2 .s2lead{stroke:#C9D3E0;stroke-width:1;stroke-dasharray:2 3}
@keyframes s2b0{0%,81.3%{transform:scale(1)}83.3%{transform:scale(1.40)}87.3%,100%{transform:scale(1)}}
.s2 .s2b0{animation-name:s2b0}
@keyframes s2b1{0%,91.1%{transform:scale(1)}93.1%{transform:scale(1.40)}97.1%,100%{transform:scale(1)}}
.s2 .s2b1{animation-name:s2b1}
@keyframes s2b2{0%,9.7%{transform:scale(1)}11.7%{transform:scale(1.60)}15.7%,100%{transform:scale(1)}}
.s2 .s2b2{animation-name:s2b2}
@keyframes s2p2{0%,9.7%{r:6;opacity:0}11.7%{r:7;opacity:.45}29.7%,100%{r:22;opacity:0}}
.s2 .s2p2{animation-name:s2p2}
@keyframes s2b3{0%,18.0%{transform:scale(1)}20.0%{transform:scale(1.40)}24.0%,100%{transform:scale(1)}}
.s2 .s2b3{animation-name:s2b3}
@keyframes s2b4{0%,57.7%{transform:scale(1)}59.7%{transform:scale(1.60)}63.7%,100%{transform:scale(1)}}
.s2 .s2b4{animation-name:s2b4}
@keyframes s2p4{0%,57.7%{r:6;opacity:0}59.7%{r:7;opacity:.45}77.7%,100%{r:22;opacity:0}}
.s2 .s2p4{animation-name:s2p4}
@keyframes s2b5{0%,33.6%{transform:scale(1)}35.6%{transform:scale(1.40)}39.6%,100%{transform:scale(1)}}
.s2 .s2b5{animation-name:s2b5}

/* 3 Vulnerabilities (corpus table + drawer): four sources land in the drawer and the row's count ticks, the risk
   signals fill, the score lands, rows re-rank, the KEV switch flips and the non-KEV rows dim */
.s3 .s3car{fill:none;stroke:#9AA5B8;stroke-width:1.3}
.pn-svg .s3mag{fill:none;stroke:#9AA5B8;stroke-width:1.4}
.s3 .s3tr{fill:#DCE3EC}.s3 .s3tr.on{fill:#E5484D;opacity:0}.s3 .s3kn{fill:#fff;stroke:#C9D3E0;stroke-width:1}
.s3 .s3kev .s3tr.on{animation:s3on 10s infinite}.s3 .s3kev .s3kn{animation:s3kn 10s var(--ease) infinite}
@keyframes s3on{0%,62%{opacity:0}66%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes s3kn{0%,62%{transform:none}66%,90%{transform:translateX(14px)}94%,100%{transform:none}}
.s3 .s3r{animation:s3row 10s var(--ease) infinite}
.s3 .s3r.nokev{animation:s3row 10s var(--ease) infinite,s3fade 10s infinite}
@keyframes s3row{0%,36%{transform:none}50%,92%{transform:translateY(var(--to))}100%{transform:none}}
@keyframes s3fade{0%,64%{opacity:1}70%,90%{opacity:.4}96%,100%{opacity:1}}
.s3 .s3cnt{opacity:0}
.s3 .s3cnt1{animation:s3c1 10s infinite}.s3 .s3cnt2{animation:s3c2 10s infinite}.s3 .s3cnt3{animation:s3c3 10s infinite}.s3 .s3cnt4{animation:s3c4 10s infinite}
@keyframes s3c1{0%,6%{opacity:0}6.5%,11%{opacity:1}11.5%,100%{opacity:0}}
@keyframes s3c2{0%,11%{opacity:0}11.5%,16%{opacity:1}16.5%,100%{opacity:0}}
@keyframes s3c3{0%,16%{opacity:0}16.5%,21%{opacity:1}21.5%,100%{opacity:0}}
@keyframes s3c4{0%,21%{opacity:0}21.5%,98%{opacity:1}100%{opacity:0}}
.s3 .s3src{opacity:0;animation:s3src 10s var(--ease) infinite}
.s3 .s3src1{animation-delay:.5s}.s3 .s3src2{animation-delay:1s}.s3 .s3src3{animation-delay:1.5s}
@keyframes s3src{0%,6%{opacity:0;transform:translateX(8px)}10%,96%{opacity:1;transform:none}100%{opacity:0}}
.s3 .s3sig{opacity:.3;animation:s3sig 10s infinite;animation-delay:calc(var(--i) * .15s)}
@keyframes s3sig{0%,24%{opacity:.3}28%,96%{opacity:1}100%{opacity:.3}}
.s3 .s3sc0{animation:s3sc0 10s infinite}.s3 .s3sc1{opacity:0;animation:s3sc1 10s infinite}
@keyframes s3sc0{0%,30%{opacity:1}33%,96%{opacity:0}100%{opacity:1}}
@keyframes s3sc1{0%,31%{opacity:0}34%,97%{opacity:1}100%{opacity:0}}

/* 4 Cognitio (actor catalogue): the alias types in and resolves; the rows are clickable (JS_PANELS s4: .is-on) */
.s4 .s4iso{fill:#EEF2F7}.s4 .isot{fill:var(--ink-2);font-weight:600}
.s4 .s4row{cursor:pointer}.s4 .s4row .s4ring{fill:none;stroke-width:1;opacity:0;transition:opacity .3s var(--ease)}
.s4 .s4row.is-on .s4ring{opacity:.45}.s4 .s4row.is-on .nd{stroke:#fff;fill:#FFF8F9}
.s4 .s4p{opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}.s4 .s4p.is-on{opacity:1}
.s4 .s4ph{animation:s4ph 12s infinite}@keyframes s4ph{0%,28%{opacity:1}31%,74%{opacity:0}77%,100%{opacity:1}}
.s4 .s4ty{opacity:0;animation:s4ty 12s infinite}@keyframes s4ty{0%,30%{opacity:0}31%,72%{opacity:1}74%,100%{opacity:0}}
.s4 .s4cv{fill:#fff;animation:s4cv 12s steps(9) infinite}@keyframes s4cv{0%,31%{transform:none}40%,100%{transform:translateX(72px)}}
.s4 .s4res{opacity:0;animation:s4res 12s var(--ease) infinite}@keyframes s4res{0%,42%{opacity:0;transform:translateX(-4px)}45%,72%{opacity:1;transform:none}74%,100%{opacity:0}}

/* 5 Optimus (Detection Estate): Splunk drops to 61%, its pipe stops and turns red, the tile ticks 2 -> 3, the fix waits, Approve heals */
.s5 .s5av{fill:var(--ink)}.s5 .s5ini{fill:#fff;font-weight:600}
.s5 .s5e{fill:none;stroke:#C4CDDA;stroke-width:1.2;stroke-dasharray:5 4;animation:s5march 1.2s linear infinite}
@keyframes s5march{to{stroke-dashoffset:-9}}
.s5 .s5e.bad{animation:s5badm 10s linear infinite}
@keyframes s5badm{0%{stroke-dashoffset:0;stroke:#C4CDDA}22%{stroke-dashoffset:-40;stroke:#C4CDDA}24%{stroke:#E5484D}76%{stroke-dashoffset:-40;stroke:#E5484D}78%{stroke:#C4CDDA}100%{stroke-dashoffset:-90}}
.s5 .s5ring{fill:none;stroke:#E5484D;stroke-width:1;opacity:0;animation:s5rg 10s infinite}
.s5 .s5ok{animation:s5okk 10s infinite}.s5 .s5brk{opacity:0;animation:s5ring 10s infinite}
@keyframes s5ring{0%,22%{opacity:0}26%,76%{opacity:1}80%,100%{opacity:0}}
@keyframes s5rg{0%,22%{opacity:0}26%,76%{opacity:.55}80%,100%{opacity:0}}
@keyframes s5okk{0%,22%{opacity:1}26%,76%{opacity:0}80%,100%{opacity:1}}
.s5 .s5v0{animation:s5okk 10s infinite}.s5 .s5v1{opacity:0;animation:s5ring 10s infinite}
.s5 .s5dl.rm{fill:rgba(244,34,45,.07)}.s5 .s5dl.ad{fill:rgba(22,202,46,.09)}
.s5 .s5pend{animation:s5pend 10s infinite}@keyframes s5pend{0%,26%{opacity:0}30%,70%{opacity:1}72%,100%{opacity:0}}
.s5 .s5ok2{opacity:0;animation:s5ok2 10s infinite}@keyframes s5ok2{0%,72%{opacity:0}76%,92%{opacity:1}96%,100%{opacity:0}}
.s5 .s5btn{transform-box:fill-box;transform-origin:center;animation:s5btn 10s infinite}@keyframes s5btn{0%,70%{transform:none}72%{transform:scale(.94)}74%,100%{transform:none}}

/* 6 Agent Studio (Virtus Architect -> graph): plays ONCE under .play (JS_PANELS adds it the first time the panel is
   seen; Replay re-adds it). The natural state is the finished run, so reduced motion and no-JS show the graph held. */
.s6 .s6se{fill:#3A4252}.s6 .s6gl{fill:#fff}
.s6 .s6port{fill:#fff;stroke-width:1.5}.s6 .s6port.t{stroke:#178A3C}.s6 .s6port.f{stroke:#C4CDDA}
.s6 .s6e{fill:none;stroke:#C4CDDA;stroke-width:1.2}
.s6 .s6ce0{stroke:#178A3C}.s6 .s6ce1{stroke:#C4CDDA;stroke-dasharray:4 4}

.s6 .s6r{fill:none;stroke:rgba(22,202,46,.55);stroke-width:1.2}
.s6 .s6w{fill:none;stroke:#F5A623;stroke-width:1.5;opacity:0}
.s6 .s6shield{fill:#F7B08C}.s6 .s6warn{fill:#F5A623}
.s6 .s6c,.s6 .s6hd,.s6 .s6ban{opacity:0}.s6 .s6done{opacity:1}
.s6 .s6cv{fill:#fff}.s6 .s6st,.s6 .s6pl{opacity:0}
.s6 .s6cr{fill:var(--ink);opacity:0}
.s6 .s6lbg{fill:#fff}
.s6 .s6replay{cursor:pointer}
.s6 .s6n{transform-box:fill-box;transform-origin:center}
.s6.play .s6c{animation:s6c 12s var(--ease) both}@keyframes s6c{0%{opacity:0;transform:translateY(6px)}3%,38%{opacity:1;transform:none}42%,100%{opacity:0}}
/* The caret rides the reveal edge in the same steps as its line's cover, and is only visible while
   that line is actually being typed — otherwise both carets sit in the box at once, which reads as
   two empty fields rather than one prompt being written. */
.s6.play .s6cv1{animation:s6cv1 12s steps(50) both}@keyframes s6cv1{0%,4.00%{transform:none}13.39%,100%{transform:translateX(310.3px)}}
.s6.play .s6cr1{animation:s6cv1 12s steps(50) both,s6cro1 12s both}
@keyframes s6cro1{0%,3.90%{opacity:0}4.00%,13.39%{opacity:1}13.49%,100%{opacity:0}}
.s6.play .s6cv2{animation:s6cv2 12s steps(45) both}@keyframes s6cv2{0%,13.39%{transform:none}22.00%,100%{transform:translateX(284.7px)}}
.s6.play .s6cr2{animation:s6cv2 12s steps(45) both,s6cro2 12s both}
@keyframes s6cro2{0%,13.29%{opacity:0}13.39%,22.00%{opacity:1}22.10%,100%{opacity:0}}
.s6.play .s6st{animation:s6st 12s both}@keyframes s6st{0%,23%{opacity:0}25%,29%{opacity:1}31%,100%{opacity:0}}
.s6.play .s6sp{transform-box:fill-box;transform-origin:center;animation:s6sp .9s ease-in-out infinite alternate}@keyframes s6sp{from{transform:scale(.7);opacity:.5}to{transform:scale(1.15);opacity:1}}
.s6.play .s6pl{animation:s6pl 12s both}@keyframes s6pl{0%,31%{opacity:0}33%,100%{opacity:1}}
.s6.play .s6hp{animation:s6hp 12s both}@keyframes s6hp{0%,40%{opacity:0}44%,100%{opacity:1}}
.s6.play .s6hd{animation:s6hd 12s both}@keyframes s6hd{0%,42%{opacity:0}45%,78%{opacity:1}80%,100%{opacity:0}}
.s6.play .s6ban{animation:s6ban 12s var(--ease) both}@keyframes s6ban{0%,79%{opacity:0;transform:translateY(4px)}81%,90%{opacity:1;transform:none}92%,100%{opacity:0}}
.s6.play .s6done{animation:s6dn 12s both}@keyframes s6dn{0%,92%{opacity:0}95%,100%{opacity:1}}
.s6.play .s6n{animation:s6n 12s var(--ease) both;animation-delay:calc(var(--i) * .28s)}
@keyframes s6n{0%,42%{opacity:0;transform:scale(.94)}45%,100%{opacity:1;transform:none}}
.s6.play .s6e{stroke-dasharray:240;animation:s6e 12s linear both;animation-delay:calc(var(--i) * .28s)}
@keyframes s6e{0%,43%{stroke-dashoffset:240}46%,100%{stroke-dashoffset:0}}
.s6.play .s6ce0{animation:s6e 12s linear both,s6ce 12s both;animation-delay:calc(var(--i) * .28s),0s}
@keyframes s6ce{0%,75%{stroke:#C4CDDA}77%,100%{stroke:#178A3C}}
.s6.play .s6port.t{animation:s6pt 12s both}@keyframes s6pt{0%,75%{stroke:#C4CDDA}77%,100%{stroke:#178A3C}}
.s6.play .s6r{animation:s6r 12s both;animation-delay:calc(var(--j) * .48s)}
@keyframes s6r{0%,62%{opacity:0}64%,100%{opacity:1}}
.s6.play .s6w{animation:s6w 12s both}@keyframes s6w{0%,78%{opacity:0}80%{opacity:1}83%{opacity:.3}86%{opacity:1}89%{opacity:.3}91%,100%{opacity:0}}
.s6.play .s6ap{transform-box:fill-box;transform-origin:center;animation:s6ap 12s both}@keyframes s6ap{0%,89%{transform:none}90%{transform:scale(.94)}91%,100%{transform:none}}
.s6.play .s6n5 .s6se{transform-box:fill-box;transform-origin:center;animation:s6end 12s both}@keyframes s6end{0%,94%{transform:scale(1)}96%{transform:scale(1.3)}98%,100%{transform:scale(1)}}

/* 7 Magister (mentor Overview): the months grow in, the review waits, Approve closes it in place and September's Approved bar steps up */
.s7 .s7grid{stroke:#E8ECF2;stroke-width:1;stroke-dasharray:3 3}
.s7 .s7bar{transform-box:fill-box;transform-origin:bottom;animation:s7bar 10s var(--ease) infinite;animation-delay:calc(var(--i) * .12s)}
.s7 .s7ap{fill:#1DA34A}.s7 .s7ch{fill:#FF9A5C}
@keyframes s7bar{0%{transform:scaleY(0)}8%,90%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
.s7 .s7plus{animation:s7plus 10s var(--ease) infinite}@keyframes s7plus{0%,54%{transform:scaleY(0)}60%,90%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
.s7 .s7d0{animation:s7d0 10s infinite}.s7 .s7d1{opacity:0;animation:s7d1 10s infinite}
@keyframes s7d0{0%,54%{opacity:1}58%,90%{opacity:0}94%,100%{opacity:1}}
@keyframes s7d1{0%,56%{opacity:0}60%,90%{opacity:1}94%,100%{opacity:0}}
.s7 .s7pend{animation:s7pend 10s infinite}.s7 .s7appr{opacity:0;animation:s7appr 10s infinite}
@keyframes s7pend{0%,50%{opacity:1}54%,90%{opacity:0}94%,100%{opacity:1}}
@keyframes s7appr{0%,52%{opacity:0}56%,90%{opacity:1}94%,100%{opacity:0}}
.s7 .s7btn{transform-box:fill-box;transform-origin:center;animation:s7btn 10s infinite}@keyframes s7btn{0%,50%{transform:none}52%{transform:scale(.94)}54%,100%{transform:none}}
.s7 .s7hint{animation:s7hint 10s var(--ease) infinite}@keyframes s7hint{0%,18%{opacity:.35}26%,100%{opacity:1}}


.pn-svg .av circle{fill:#E8ECF2;stroke:#C9D3E0;stroke-width:1}
.pn-svg .av .avh{fill:#9AA5B8;stroke:none}.pn-svg .av .avb{fill:#9AA5B8;stroke:none}
.pn-svg .ch.gr rect{stroke:none}.pn-svg .ch.gr text{fill:#fff}
.pn-svg .tk{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pn-svg .tk.ink{stroke:var(--ink);stroke-width:1.8}
.pn-svg .dl{opacity:0;animation:dl 8s infinite;animation-delay:calc(var(--i) * var(--st,.4s))}
@keyframes dl{0%,2%{opacity:0}8%,80%{opacity:1}88%,100%{opacity:0}}
.pn-svg .dsh{stroke-width:2;stroke-dasharray:420;stroke-dashoffset:420}
/* 1 Triage: the seven stages light left to right, then the verdict card and its confidence bar */
.d1 .d1rail{stroke-width:2;stroke-dasharray:400;stroke-dashoffset:400;animation:d1rail 8s linear infinite}
@keyframes d1rail{0%{stroke-dashoffset:400}34%,80%{stroke-dashoffset:0}88%,100%{stroke-dashoffset:400}}
.d1 .dl{--st:.36s}
.d1 .d1v{animation:d1v 8s var(--ease) infinite}@keyframes d1v{0%,34%{opacity:.35;transform:translateY(6px)}42%,88%{opacity:1;transform:none}96%,100%{opacity:.35}}
.d1 .d1conf{transform-origin:150px 188px;animation:d1conf 8s var(--ease) infinite}@keyframes d1conf{0%,40%{transform:scaleX(0)}54%,88%{transform:scaleX(.82)}96%,100%{transform:scaleX(0)}}
.d1 .d1pre{animation:d1pre 8s infinite}@keyframes d1pre{0%,58%{opacity:0}64%,88%{opacity:1}96%,100%{opacity:0}}
/* 2 Router: eight signals fill, "Scored", the edge draws to lane 2, "Assigned" */
.d2 .dl{--st:.22s}
.d2 .d2sc{animation:d2sc 8s infinite}@keyframes d2sc{0%,24%{opacity:0}30%,80%{opacity:1}88%,100%{opacity:0}}
.d2 .d2e{stroke-width:2;stroke-dasharray:400;stroke-dashoffset:400;animation:d2e 8s linear infinite}
@keyframes d2e{0%,30%{stroke-dashoffset:400}44%,80%{stroke-dashoffset:0}88%,100%{stroke-dashoffset:400}}
.d2 .d2l1 .nd{animation:d2l 8s infinite}@keyframes d2l{0%,44%{stroke:#C9D3E0}50%,80%{stroke:var(--ink);stroke-width:1.6}88%,100%{stroke:#C9D3E0}}
.d2 .d2as{animation:d2as 8s infinite}@keyframes d2as{0%,48%{opacity:0;transform:translateY(4px)}54%,80%{opacity:1;transform:none}88%,100%{opacity:0}}
/* 3 Pilot: eight ticks, then the nine rows fill, Running -> Done */
.d3 .dl{--st:.3s}
.d3 .d3r{animation:d3r 8s infinite;animation-delay:calc(1.2s + var(--i) * .22s)}
@keyframes d3r{0%,20%{opacity:.25}28%,80%{opacity:1}88%,100%{opacity:.25}}
.d3 .d3run{animation:d3run 8s infinite}.d3 .d3done{animation:d3done 8s infinite}
@keyframes d3run{0%,2%{opacity:0}5%,62%{opacity:1}66%,100%{opacity:0}}
@keyframes d3done{0%,64%{opacity:0}68%,88%{opacity:1}94%,100%{opacity:0}}
/* 4 Agents: each agent's dot lights in turn */
.d4 .dl{--st:.5s}
/* 5 Automatio: the edges draw step by step, the gate holds red until Approve fires, then Contain */
.d5 .d5e{stroke-width:2;stroke-dasharray:60;stroke-dashoffset:60;animation:d5e 8s linear infinite}
.d5 .d5e1{animation-delay:1.2s}.d5 .d5e2{animation-delay:5.2s}
@keyframes d5e{0%,2%{stroke-dashoffset:60}10%,24%{stroke-dashoffset:0}26%,100%{stroke-dashoffset:60}}
.d5 .d5n .nd{animation:d5n 8s infinite}.d5 .d5n1 .nd{animation-delay:1.2s}.d5 .d5n3 .nd{animation-delay:5.2s}
@keyframes d5n{0%,8%{stroke:#C9D3E0}12%,80%{stroke:var(--ink);stroke-width:1.6}88%,100%{stroke:#C9D3E0}}
.d5 .d5n2 .nd{animation:d5gate 8s infinite}
@keyframes d5gate{0%,26%{stroke:#F3B4B9;fill:#FFF5F5}30%,62%{stroke:#E00030;fill:#FFF5F5}66%,80%{stroke:var(--ink);fill:#fff;stroke-dasharray:0}88%,100%{stroke:#F3B4B9;fill:#FFF5F5}}
.d5 .d5ap{transform-origin:94px 185px;animation:d5ap 8s infinite}@keyframes d5ap{0%,62%{transform:none}64%{transform:scale(.94)}66%,100%{transform:none}}
.d5 .d5w{animation:d5w 8s infinite}.d5 .d5ok{animation:d5ok 8s infinite}
@keyframes d5w{0%,30%{opacity:0}34%,62%{opacity:1}66%,100%{opacity:0}}
@keyframes d5ok{0%,66%{opacity:0}70%,86%{opacity:1}92%,100%{opacity:0}}
/* 6 War Room: the rail draws, five events land in turn */
.d6 .d6rail{stroke-width:2;stroke-dasharray:400;stroke-dashoffset:400;animation:d6rail 8s linear infinite}
@keyframes d6rail{0%{stroke-dashoffset:400}50%,80%{stroke-dashoffset:0}88%,100%{stroke-dashoffset:400}}
.d6 .d6e{animation:d6e 8s var(--ease) infinite;animation-delay:calc(.3s + var(--i) * .8s)}
@keyframes d6e{0%,2%{opacity:0;transform:translateY(4px)}8%,80%{opacity:1;transform:none}88%,100%{opacity:0}}
.d6 .d6dot{stroke:#fff;stroke-width:2}
.d6 .d6av circle:first-child{stroke:#E00030}
/* 7 Assistant: the question lands, the sources pull in, the answer fills, citations pop */
.d7 .d7q{animation:d7q 8s var(--ease) infinite}@keyframes d7q{0%{opacity:0;transform:translateY(6px)}6%,90%{opacity:1;transform:none}100%{opacity:0}}
.d7 .d7e{stroke-width:2;stroke-dasharray:200;stroke-dashoffset:200;animation:d7e 8s linear infinite;animation-delay:calc(.6s + var(--i) * .3s)}
@keyframes d7e{0%,4%{stroke-dashoffset:200}16%,80%{stroke-dashoffset:0}88%,100%{stroke-dashoffset:200}}
.d7 .d7d{animation-delay:calc(1.4s + var(--i) * .3s)}
.d7 .d7s .nd{animation:d7s 8s infinite;animation-delay:calc(1.4s + var(--i) * .3s)}
@keyframes d7s{0%,4%{stroke:#C9D3E0}10%,80%{stroke:#9AA5B8}88%,100%{stroke:#C9D3E0}}
.d7 .d7a{animation:d7a 8s var(--ease) infinite}@keyframes d7a{0%,26%{opacity:0;transform:translateY(6px)}34%,90%{opacity:1;transform:none}100%{opacity:0}}
.d7 .d7a .ln{transform-origin:42px 0;animation:d7ln 8s var(--ease) infinite}
.d7 .d7a .ln:nth-of-type(3){animation-delay:.4s}.d7 .d7a .ln:nth-of-type(4){animation-delay:.8s}  /* rect 1 is the plate */
@keyframes d7ln{0%,32%{transform:scaleX(0)}44%,100%{transform:scaleX(1)}}
.d7 .d7c{animation:d7c 8s var(--ease) infinite}
@keyframes d7c{0%,50%{opacity:0;transform:translateY(3px)}58%,90%{opacity:1;transform:none}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .pn-svg *{animation:none!important}
  .pn-svg .ed.hi{stroke-dashoffset:0}
  .pn-svg .dl{opacity:1}
  /* BEFORE scenes rest in their finished state */
  .s1 .s1a{opacity:0}.s1 .s1b{opacity:1}.s1 .s1needle{transform:rotate(-34.2deg)}.s1 .s1line{stroke-dashoffset:0}.s1 .s1area{opacity:1}
  .s3 .s3r{transform:translateY(var(--to))}.s3 .s3cnt4,.s3 .s3src,.s3 .s3sig,.s3 .s3sc1{opacity:1}.s3 .s3sc0{opacity:0}
  .s5 .s5ok2{opacity:1}.s5 .s5pend{opacity:0}
  .s7 .s7appr{opacity:1}.s7 .s7pend{opacity:0}.s7 .s7d1{opacity:1}.s7 .s7d0{opacity:0}
}


.pn-svg .to{opacity:0}
.pn-svg .tu,.pn-svg .tp{transform-box:fill-box;transform-origin:center}
.pn-svg .tsx{transform-box:fill-box;transform-origin:left center}
.pn-svg .td{stroke-dasharray:var(--l);stroke-dashoffset:0;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pn-svg.play .ti{animation:tin .35s var(--ease) both;animation-delay:var(--d,0s)}
.pn-svg.play .to{animation:tout .3s var(--ease) both;animation-delay:var(--o,var(--d,0s))}
/* in-then-out: the out animation must NOT fill backwards (its from-frame is opacity 1 and would show the element from t=0) */
.pn-svg.play .ti.to{animation:tin .35s var(--ease) both,tout .3s var(--ease) forwards;animation-delay:var(--d,0s),var(--o,var(--d,0s))}
.pn-svg.play .tu{animation:tup .45s var(--ease) both;animation-delay:var(--d,0s)}
.pn-svg.play .tu.to{animation:tup .45s var(--ease) both,tout .3s var(--ease) forwards;animation-delay:var(--d,0s),var(--o,var(--d,0s))}
.pn-svg.play .td{animation:tdraw var(--t,.6s) linear both;animation-delay:var(--d,0s)}
.pn-svg.play .tp{animation:tpress .3s var(--ease) both;animation-delay:var(--p,var(--d,0s))}
.pn-svg.play .to.tp{animation:tpress .3s var(--ease) both,tout .3s var(--ease) both;animation-delay:var(--p,var(--d,0s)),var(--o,var(--d,0s))}
.pn-svg.play .tu.tp{animation:tup .45s var(--ease) both,tpress .3s var(--ease) both;animation-delay:var(--d,0s),var(--p,var(--d,0s))}
.pn-svg.play .tsx{animation:tsx .5s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes tin{from{opacity:0}to{opacity:1}}
@keyframes tout{from{opacity:1}to{opacity:0}}
@keyframes tup{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes tdraw{from{stroke-dashoffset:var(--l)}to{stroke-dashoffset:0}}
@keyframes tpress{0%,100%{transform:none}50%{transform:scale(.94)}}
@keyframes tsx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pn-svg .dot.gy0{fill:#C9D3E0}
.pn-svg .tint.gy{fill:rgba(20,20,30,.05)}
/* t1 Triage */
.t1 .t1num{fill:#fff;font-weight:600}
/* t2 Casebook */
.t2 .t2bar{fill:#1890FF;opacity:.7}
.t2 .t2ring{fill:none;stroke-width:1.5}
/* t3 Pilot */
.t3 .t3act{fill:#fff;stroke-width:2}
/* t4 Agents */
.t4 .t4ring{fill:none;stroke-width:1.5}
/* t5 Automatio */
.pn-svg .ico.gy{fill:#C9D3E0}
.t5 .t5waitring{fill:rgba(255,166,77,.10);stroke:#F5A623;stroke-width:1.5;stroke-dasharray:4 4}
.t5 .t5cv{fill:#fff;transform:translateX(80px)}
.t5.play .t5cv{animation:t5cv .8s steps(7) both;animation-delay:var(--d,0s)}
@keyframes t5cv{from{transform:none}to{transform:translateX(80px)}}
/* t7 Assistant */
.t7 .t7cv{fill:rgba(20,20,30,0);transform:translateX(260px)}
.t7.play .t7cv{fill:#F2F3F6;animation:t7cv 1.1s steps(31) both;animation-delay:var(--d,0s)}
@keyframes t7cv{from{transform:none}to{transform:translateX(260px)}}
.t7 .t7av circle:first-child{fill:var(--ink);stroke:var(--ink)}.t7 .t7av .avh,.t7 .t7av .avb{fill:#fff}


.nf-media .pn-svg .pl{fill:#11161F;stroke:rgba(246,247,251,.10)}
.nf-media .pn-svg .nd{fill:#141A25;stroke:rgba(246,247,251,.16)}
.nf-media .pn-svg .tx{fill:rgba(246,247,251,.88)} .nf-media .pn-svg .tx.mid{fill:rgba(246,247,251,.7)}
.nf-media .pn-svg .mo{fill:rgba(246,247,251,.5)} .nf-media .pn-svg .mo.faint{fill:rgba(246,247,251,.36)}
.nf-media .pn-svg .ed{stroke:rgba(246,247,251,.14)} .nf-media .pn-svg .ln{fill:rgba(246,247,251,.12)} .nf-media .pn-svg .ln.faint{fill:rgba(246,247,251,.06)}
.nf-media .pn-svg .arr{stroke:rgba(246,247,251,.85)} .nf-media .pn-svg .bsolid{fill:#F6F7FB} .nf-media .pn-svg .tx.wh{fill:#0C1019}
.nf-media .pn-svg .tint.gy{fill:rgba(246,247,251,.07)} .nf-media .pn-svg .tint.rd{fill:rgba(244,34,45,.18)}
.nf-media .pn-svg .tx.rd{fill:#FF7A85} .nf-media .pn-svg .tx.gy{fill:rgba(246,247,251,.8)}
.nf-media .pn-svg .ch.gy rect{fill:rgba(246,247,251,.09)} .nf-media .pn-svg .ch.gy text{fill:rgba(246,247,251,.8)}
.nf-media .pn-svg .ch.bl rect{fill:rgba(24,144,255,.20)} .nf-media .pn-svg .ch.bl text{fill:#7CB8FF}
.nf-media .pn-svg .ch.gn rect{fill:rgba(22,202,46,.18)} .nf-media .pn-svg .ch.gn text{fill:#5AD27B}
.nf-media .pn-svg .ch.am rect{fill:rgba(255,166,77,.20)} .nf-media .pn-svg .ch.am text{fill:#F2B85E}
.nf-media .pn-svg .ch.or rect{fill:rgba(255,119,61,.20)} .nf-media .pn-svg .ch.or text{fill:#FF9B70}
.nf-media .pn-svg .ch.rd rect{fill:rgba(244,34,45,.20)} .nf-media .pn-svg .ch.rd text{fill:#FF7A85}
.nf-media .pn-svg .dot.gn{fill:#5AD27B} .nf-media .pn-svg .dot.am{fill:#F2B85E} .nf-media .pn-svg .dot.rd{fill:#FF7A85}
/* n2 Watches: the disc, one turn then hold */
.n2 .n2r{fill:none;stroke:rgba(246,247,251,.12);stroke-width:1}
.n2 .n2c{fill:rgba(246,247,251,.7)}
.n2 .n2b{fill:#F6F7FB}
.n2 .n2w{fill:rgba(246,247,251,.05)}
.n2 .n2h{stroke:rgba(246,247,251,.6);stroke-width:1.2;stroke-linecap:round}
.n2 .n2sweep{transform-box:view-box}
.n2.play .n2sweep{animation:n2rot 3.6s linear both}
@keyframes n2rot{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* n3 Decides: the landing ring */
.n3 .n3ring{fill:none;stroke-width:1.5}


.pn-svg .a-ul{stroke:none}
.a1 .a1ring,.a4 .a4ring{fill:none;stroke-width:1.5}



/* ---- the quote. No heading, no eyebrow (standing rule). Attio's two-tone: the
   claim in ink, the closing clause in grey. Ground is the hero's own 3px dot
   mesh, masked to a soft ellipse so it never reaches the rails. ---- */
.qt{position:relative;overflow:hidden;padding:116px 0 120px}
.qt::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(9,19,36,.4) .7px,transparent 1px);background-size:3px 3px;opacity:.075;
  -webkit-mask:radial-gradient(74% 68% at 50% 50%,#000 10%,transparent 78%);
          mask:radial-gradient(74% 68% at 50% 50%,#000 10%,transparent 78%)}
.qt .wrap{position:relative;z-index:1}
.qt figure{margin:0}
.qt blockquote{margin:0 auto;max-width:21ch;text-align:center;font-weight:400;
  font-size:clamp(27px,3.4vw,46px);line-height:1.18;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.qt blockquote .tail{color:var(--ink-2)}
.qt figcaption{margin:32px 0 0;text-align:center}

/* ---- the scale band. ONE full-width chart living in the frame rails, with the copy
   laid ON TOP of it — not a two-column split with a chart panel beside the copy. The
   curve runs corner to corner of the rail box and terminates exactly on the top-right
   rail, so nothing bleeds past the frame. The stat rules are --line-strong, NOT red:
   red is buttons only, and the section spends its one live accent on the curve. ---- */
.sc{position:relative;padding:0;overflow:hidden}
.sc .wrap{max-width:none;padding:0}
/* the chart IS the rail box: left/right sit exactly on #frame's two rails at every width */
.sc-fig{position:absolute;top:0;bottom:0;
  left:max(20px,calc(50% - 620px));right:max(20px,calc(50% - 620px));
  pointer-events:none;z-index:0}
.sc-fig svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.sc-copy{position:relative;z-index:1;min-width:0;max-width:600px;
  margin-left:calc(max(20px,50% - 620px) + 32px);padding:112px 40px 128px 0}
.sc-h2{margin:0;font-weight:400;font-size:clamp(26px,2.9vw,38px);line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.sc-h2 .g{color:var(--ink-2)}
.sc-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 34px;margin:40px 0 0;padding:0;list-style:none;max-width:440px}
.sc-stats li{border-left:2px solid var(--line-strong);padding-left:16px;min-width:0}
.sc-stats b{display:block;font-size:clamp(24px,2.1vw,29px);font-weight:500;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1}
.sc-stats span{display:block;margin-top:5px;font-size:13px;line-height:1.4;color:var(--ink-3)}


.tr{padding:88px 0 96px;text-align:center}
.tr-h2{margin:0;font-weight:300;font-size:clamp(26px,2.9vw,38px);line-height:1.16;letter-spacing:-.016em;color:var(--ink)}
.tr-sub{margin:16px auto 0;max-width:56ch;font-size:16px;line-height:1.6;color:var(--ink-2)}
.tmarquee{margin-top:56px}
.tlogos{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:38px 60px;max-width:1000px;margin:0 auto;padding:0;list-style:none}
/* each mark sits in a fixed 48px slot with its sector under it — the slot is what
   keeps the labels on one line while the marks run aspect ratios 1.0-5.2 */
.tlogos li{display:grid;grid-template-rows:48px auto;gap:13px;justify-items:center;align-items:center;flex:0 0 auto}
.tlogos img{display:block;height:var(--lh,38px);width:auto;filter:brightness(0);opacity:.45;
  transition:opacity var(--dur-micro)}
.tlogos li:hover img{opacity:.72}
.tlogos span{font-size:12.5px;font-weight:500;line-height:1;color:var(--ink-3)}
.tlogos img[alt="Halkbank"],.tlogos img[alt="Tessa Group"]{--lh:30px}
.tlogos img[alt="AEK"]{--lh:44px}
.tlogos img[alt="Dana Gas"],.tlogos img[alt="Bank of Africa"]{--lh:48px}
.js .tmarquee.on{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.js .tmarquee.on .ttrack{display:flex;width:max-content;animation:tscroll 52s linear infinite}
.js .tmarquee.on .tlogos{flex-wrap:nowrap;max-width:none;margin:0;padding-right:60px}
.js .tmarquee.on:hover .ttrack{animation-play-state:paused}
@keyframes tscroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .js .tmarquee.on{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .js .tmarquee.on .ttrack{display:block;width:auto;animation:none}
  .js .tmarquee.on .tlogos{flex-wrap:wrap;max-width:1000px;margin:0 auto;padding-right:0}
  .js .tmarquee.on .tlogos[aria-hidden="true"]{display:none}
}

/* ---- the dark foot: CTA, FAQ and footer share one ground ---- */
.final.findark{--band:#0C1019;--hair:rgba(246,247,251,.10);
  background:var(--band);color:#F6F7FB;padding:112px 0 104px;position:relative;z-index:2;overflow:hidden}
/* the page rails are var(--line) at z-index 0 and read as bright lines over the band;
   redraw them in the band's own hairline, above it, exactly as .newpsec does */
.final.findark::before,.final.findark::after{content:"";position:absolute;top:0;bottom:0;width:1px;
  background:var(--hair);pointer-events:none;z-index:3}
.final.findark::before{left:max(20px,calc(50% - 620px))}
.final.findark::after{left:min(calc(100% - 21px),calc(50% + 620px))}
.final.findark .wrap{position:relative;z-index:1;text-align:center}
.final.findark .h2{color:#fff;font-weight:400;max-width:20ch;margin:0 auto;letter-spacing:-.02em}
.final.findark p{margin:20px auto 0;max-width:60ch;font-size:16px;line-height:1.65;color:rgba(246,247,251,.66)}
.final.findark .cta-row{justify-content:center;margin-top:38px}
.final.findark .btn-outline{border:1px solid rgba(246,247,251,.32);background:transparent;color:#fff}
.final.findark .btn-outline:hover{border-color:rgba(246,247,251,.58);background:rgba(246,247,251,.06)}
.final.findark .btn-outline:focus-visible{outline:2px solid #fff;outline-offset:3px}
.final.findark .btn-outline::before,.final.findark .btn-outline::after{display:none}
.final.findark .btn-outline .arr-i{width:14px;height:14px}

.ft.ftdark{background:#0C1019;color:#F6F7FB;position:relative;z-index:2}
.ft.ftdark .ft-h{color:#8A93A3}
.ft.ftdark .ft-list a,.ft.ftdark .ft-list span{color:#B9C0CC}
.ft.ftdark .ft-list a:hover{color:#fff}
.ft.ftdark .ft-bar{border-top:1px solid rgba(246,247,251,.10)}
.ft.ftdark .ft-mark{color:#fff}       /* the lockup paths are fill="currentColor" — no asset swap */
.ft.ftdark .ft-legal{color:#7A8494}

/* ---- breakpoints ---- */
@media (max-width:1180px){
  .stgsec-grid{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:40px}
  .mrow{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:18px}
}
@media (max-width:1080px){
  .pfband .marks{flex-wrap:wrap;justify-content:flex-start;gap:16px 28px}
  .hero{padding-top:120px}
  .stages{grid-template-columns:1fr;gap:14px;margin-top:34px}
  .stages>.stg:not(:last-child)::after{display:none}
  .loop .arc{left:6%;right:6%}
  .loop::after{left:6%}
  .stgsec-grid{grid-template-columns:1fr;gap:34px}
  .stgsec-side{position:static;top:auto}
}
@media (max-width:760px){
  .hero .h1{max-width:none}
  .pfband .wrap{padding-left:32px}
  .pfband .recog{flex-wrap:wrap;gap:14px 20px;justify-content:center}
  .pfband .recog .meta{flex:0 0 100%;text-align:center}
  .pfband .marks{flex:0 1 100%;justify-content:center;gap:14px 20px}
  .pfband .t-mark img{max-height:24px;max-width:104px}
  .mrow{grid-template-columns:1fr;gap:7px;padding:15px 2px}
  .mrow-h em{margin-top:3px}
}
@media (prefers-reduced-motion:reduce){
  .loop.go .arc-fill{animation:none;clip-path:inset(-3px 0)}
  .loop.go .loop-txt svg{animation:none}
  .newp-viz .nsweep,.newp-viz .nb,.newp-viz .nl{animation:none}
  .newp-viz .nl{opacity:1}
}

@media (max-width:1080px){
  .sc-copy{padding-top:88px;padding-bottom:104px;max-width:560px}
}
@media (max-width:900px){
  .sc-fig{top:auto;height:230px}
  .sc-copy{padding-bottom:262px}
}
@media (max-width:760px){
  .qt{padding:80px 0 84px}
  .qt blockquote{max-width:none}
  .tr{padding:64px 0 72px}
  .tlogos{gap:26px 40px}
  .tlogos li{grid-template-rows:38px auto;gap:11px}
  .tlogos img{height:calc(var(--lh,38px)*.78)}
  .sc-copy{padding-top:72px;padding-bottom:228px;max-width:none;margin-right:20px}
  .sc-fig{height:190px}
  .sc-stats{gap:22px 24px;max-width:none}
  .final.findark{padding:80px 0 76px}
}

/* ============ 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)}