/* ╔══════════════════════════════════════════════════════════════════╗
   ║  GENERATED FILE — DO NOT EDIT.                                   ║
   ║  Edit the component files in styles/ then run ./build-css.sh     ║
   ║  Anything typed here is destroyed on the next build.             ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══ styles/01-tokens.css ═══════════════════════════════════════════ */
/* ══ 01-tokens ══════════════════════════════════════════════════════
   Design tokens (:root variables), reset, base page setup.
   Blocks: —
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   blaZop — AI-native Autonomous Operations Platform
   Design system: deep-space navy, gear cyan, bolt yellow.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#F2F7F5; --bg2:#E6F1ED; --panel:#FFFFFF; --panel2:#ECF4F1;
  --line:#D3E4DE; --line2:#BAD3CB;
  --ink:#0F2A25; --muted:#43645C; --dim:#77948C;
  --blue:#1C75BC; --blue2:#3B9BE8; --cyan:#1798B3; --yellow:#FEEB3B; --red:#E14B5F;
  --grad:linear-gradient(120deg,var(--blue),var(--blue2));
  --grad-logo:linear-gradient(120deg,#1C75BC 0%,#FEE705 62%,#FEEB3B 100%);
  --wash:linear-gradient(150deg,#E8F3EF 0%,#CBE5DC 55%,#AFD6C9 100%);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Space Grotesk",var(--font);
  --display2:"Bricolage Grotesque",var(--display);
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --round:"Outfit",var(--font);
  --r:18px; --r-lg:26px;
  --shadow:0 24px 60px rgba(23,43,77,.14);
  --glow:0 0 34px rgba(28,117,188,.18);
}

/* below the mobile breakpoint the rails would sit ~4px off the content edge —
   all clutter, no frame — so they come off */
@media(max-width:640px){
  html::before{display:none}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ═══ styles/02-base.css ═══════════════════════════════════════════ */
/* ══ 02-base ══════════════════════════════════════════════════════
   Typography, .container, .eyebrow, .gtext, page transitions.
   Blocks: .container, .eyebrow, .gtext, .section
   ══════════════════════════════════════════════════════════════ */
/* ── whole-site page transitions ─────────────────────────────────
   this is a static multi-page site (real navigations, not an SPA), so
   "smooth transitions across the site" = smoothing the two moments a
   plain <a href> would otherwise hard-cut: arriving on a page, and
   leaving it. everything else (card hovers, reveal-on-scroll, the
   dropdowns) already animates per-component below. */
@keyframes bz-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bz-page-out{to{opacity:0;transform:translateY(-8px)}}
body{animation:bz-page-in .5s cubic-bezier(.2,.6,.2,1) both}
body.is-leaving{animation:bz-page-out .22s cubic-bezier(.4,0,1,1) forwards}
@media (prefers-reduced-motion:reduce){
  body{animation:none}
  body.is-leaving{animation:none}
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:rgba(254,231,5,.5)}
.container{width:min(1240px,calc(100% - 44px));margin-inline:auto}

/* ── type ─────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-logo);opacity:.9}
.section__head{max-width:820px;margin-bottom:52px}
.section__head.section__head--center{margin-inline:auto;text-align:center}
.section__head.section__head--center .eyebrow::after{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-logo);opacity:.9}
.section__head h2{font-size:clamp(30px,3.6vw,48px);line-height:1.08;margin:16px 0 14px}
.section__head p{color:var(--muted);font-size:17px;margin:0}
.gtext{background:linear-gradient(120deg,#1C75BC,#2E8FD4 58%,#C08F00);-webkit-background-clip:text;background-clip:text;color:transparent}


/* Anchor targets clear the floating header. Every in-page jump
   (nav "Book a Demo" → contact.html#demo, #platform, #resources, #team …)
   lands with the section's top BELOW the fixed nav instead of under it. */
[id]{scroll-margin-top:112px}
/* NO overflow rule on html. `overflow-x:clip` on the root was tried
   (2026-09-04) as a mobile guard and it killed every position:sticky effect —
   Chromium treats the clipped root as the sticky containing block, so the GSI
   Day stack and the MSP dive never pinned. Mobile width is guarded by the
   cookie bar wrapping (31-cookie-bar.css), which was the actual cause. */

/* ═══ styles/03-buttons.css ═══════════════════════════════════════════ */
/* ══ 03-buttons ══════════════════════════════════════════════════════
   The .btn block and its variants.
   Blocks: .btn
   ══════════════════════════════════════════════════════════════ */
/* ── buttons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border-radius:12px;font-weight:600;font-size:15px;
  border:1px solid transparent;transition:transform .22s,box-shadow .22s,border-color .22s,background .22s;
  position:relative;overflow:hidden;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn.btn--primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px rgba(28,117,188,.3)}
.btn.btn--primary:hover{box-shadow:0 14px 44px rgba(62,193,213,.5)}
.btn.btn--primary::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-120%);animation:shine 4.2s ease-in-out infinite}
@keyframes shine{0%,55%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}
.btn.btn--ghost{border-color:var(--line2);color:var(--ink);background:rgba(255,255,255,.75)}
.btn.btn--ghost:hover{border-color:var(--cyan);box-shadow:var(--glow)}
.btn.btn--large{padding:16px 30px;font-size:16px;border-radius:14px}
.btn .btn__arrow{transition:transform .22s}
.btn:hover .btn__arrow{transform:translateX(4px)}


/* ═══ styles/04-nav.css ═══════════════════════════════════════════ */
/* ══ 04-nav ══════════════════════════════════════════════════════
   Sticky header and the primary nav.
   Blocks: .brand, .dropdown, .nav, .site-header
   ══════════════════════════════════════════════════════════════ */
/* ── nav ──────────────────────────────────────────────────────── */
/* glass nav: bare at rest — the panel and its float-inset only materialise
   once you scroll or reach for it */
.site-header{position:fixed;top:0;left:0;right:0;z-index:80;background:none;border:0;
  transition:top .38s cubic-bezier(.4,1,.4,1)}
.site-header.is-scrolled,.site-header:hover,.site-header:focus-within{top:12px}
.site-header__shell{border-radius:20px;padding:0 22px;
  background:transparent;border:1px solid transparent;box-shadow:none;
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  transition:background .38s,border-color .38s,box-shadow .38s,backdrop-filter .38s}
.site-header.is-scrolled .site-header__shell,
.site-header:hover .site-header__shell,
.site-header:focus-within .site-header__shell{
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(18px) saturate(165%);-webkit-backdrop-filter:blur(18px) saturate(165%);
  border-color:rgba(255,255,255,.7);
  box-shadow:0 12px 38px rgba(20,45,38,.14)}
.site-header .nav__link{color:var(--muted);padding:9px 14px;border-radius:10px;
  transition:color .2s,background .2s}
.nav__home{font-weight:600}
.site-header .nav__link:hover{color:var(--ink);background:rgba(23,152,179,.11)}
.site-header .brand__word{color:var(--ink)}
.site-header .mobile-toggle{color:var(--ink);border-color:var(--line2)}
.site-header .mobile-toggle[aria-expanded="true"]{color:var(--ink);
  border-color:var(--cyan);background:rgba(23,152,179,.10)}
/* over a dark band the bar flips light so links stay readable */
.site-header.is-on-dark .nav__link{color:#C9D6E2}
.site-header.is-on-dark .nav__link:hover{color:#fff;background:rgba(62,193,213,.20)}
.site-header.is-on-dark .brand__word{color:#F2FAF7}
.site-header.is-on-dark .mobile-toggle{color:#F2FAF7;border-color:rgba(255,255,255,.25)}
.site-header.is-on-dark.is-scrolled .site-header__shell,
.site-header.is-on-dark:hover .site-header__shell,
.site-header.is-on-dark:focus-within .site-header__shell{
  background:rgba(10,12,20,.55);border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 38px rgba(0,0,0,.4)}
.site-header__shell{position:relative;height:76px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand .logo-mark{width:38px;height:38px}
.brand__word{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.02em}
.brand__word b{color:var(--cyan);font-weight:700}
.brand__sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);border-left:1px solid var(--line);padding-left:12px;line-height:1.5}
/* brand pinned to the centre of the bar; mark stays big enough for the ignite */
.site-header__shell .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.site-header__shell .brand .logo-mark{width:54px;height:54px;
  filter:drop-shadow(0 0 16px rgba(62,193,213,.4)) drop-shadow(0 0 24px rgba(250,164,10,.28))}
.site-header__shell .brand__word{font-size:22px;letter-spacing:-.01em}
.site-header__shell .brand__sub{display:none}
.nav{display:flex;align-items:center;gap:6px}
.nav--left{flex:1;justify-content:flex-start}
.nav--right{flex:1;justify-content:flex-end}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#3A506B;
  font-family:var(--round);font-size:14.8px;font-weight:500;letter-spacing:-.002em;
  padding:26px 13px;transition:color .2s}
.nav__link:hover{color:#0E1C30}
.nav__link .nav__caret{font-size:9px;opacity:.85;transition:transform .25s}
.nav__item:hover .nav__caret{transform:rotate(180deg)}
/* Light panels drawn from the hero's own palette: the same 150° sweep as
   --wash and the same three blob hues (#0F766A teal, #3EC1D5 cyan, #6EBEAF
   mint), here as faint tints over near-white rather than light sources over
   black. The menu reads as the hero in daylight. */
:root{
  --dd-1:#FFFFFF; --dd-2:#FAFDFC; --dd-3:#F1F8F6;
  --dd-ink:#0F2A25; --dd-mute:#456760; --dd-dim:#54706A;
  --dd-hair:rgba(15,42,37,.10);
}
.dropdown{position:absolute;top:60px;left:50%;transform:translateX(-50%) translateY(12px);
  background:
    radial-gradient(620px 300px at 12% -6%,rgba(15,118,106,.10),transparent 70%),
    radial-gradient(520px 300px at 88% 4%,rgba(62,193,213,.09),transparent 72%),
    radial-gradient(500px 340px at 50% 112%,rgba(110,190,175,.08),transparent 70%),
    linear-gradient(150deg,var(--dd-1) 0%,var(--dd-2) 46%,var(--dd-3) 100%);
  backdrop-filter:blur(20px);border:1px solid var(--dd-hair);
  border-radius:var(--r);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 28px 70px rgba(20,45,38,.16);
  padding:10px;opacity:0;visibility:hidden;
  /* Opens instantly, closes on a short delay. The bridge below handles a straight
     drop into the panel; this handles the diagonal, where the pointer leaves the
     button sideways — past its edge but not yet over the panel — for a few frames.
     visibility gets 0s and an explicit delay rather than a duration: transitioned
     over a duration it flips at the halfway point, which left the panel dead for
     ~100ms and then popped it in at 92% opacity. Here it holds `visible` for the
     whole fade-out and snaps back on open. */
  transition:opacity .2s ease .16s,visibility 0s linear .36s,transform .24s ease .16s;
  z-index:90}
.nav__item:hover .dropdown,.nav__item:focus-within .dropdown{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition:opacity .2s ease,visibility 0s linear,transform .24s ease}
/* ...but if you've landed on a sibling button, the old panel goes at once —
   otherwise it lingers under the new one for the length of the close delay. */
.nav:has(.nav__item:hover) .nav__item:not(:hover) .dropdown{
  transition:opacity .2s ease,visibility 0s linear .2s,transform .24s ease}
/* The panel hangs ~16px below the button, and that gap is a dead zone: the pointer
   had to cross it to reach the menu, and crossing it closed the menu first.
   This is an invisible bridge across the gap. It exists ONLY while the item is
   hovered/focused, so it can never open a menu by itself, and hovering it counts
   as hovering the item — so the menu holds while you travel. It lives on
   .nav__item, not inside .dropdown, because .mega's own overflow:auto clips a
   pseudo-element placed at a negative top.
   .wide items are position:static, so their bridge measures against .site-header__shell
   and spans the whole bar — which is what a diagonal to the far column needs. */
.nav__item:hover::after,.nav__item:focus-within::after{
  content:"";position:absolute;left:0;width:360px;top:36px;height:24px;z-index:89}
.nav__item.nav__item--wide:hover::after,.nav__item.nav__item--wide:focus-within::after{
  left:0;right:0;width:auto;top:42px;height:26px}
/* left-nav panels anchor to the item's left edge so they never clip offscreen */
.nav--left .dropdown{left:0;transform:translateY(12px)}
.nav--left .nav__item:hover .dropdown,.nav--left .nav__item:focus-within .dropdown{transform:translateY(0)}
.dropdown a{display:flex;gap:13px;align-items:flex-start;padding:13px 15px;border-radius:12px;transition:background .18s}
.dropdown a:hover{background:rgba(23,152,179,.09)}
.dropdown .dot{width:9px;height:9px;border-radius:3px;margin-top:6px;flex-shrink:0;background:var(--cyan)}
/* per-item icon badge used in the Platform / Products / Solutions dropdowns —
   set the item's brand colour via inline style="--c:#hex" */
/* On light, a glow just muddies — the icon reads through a tinted tile and a
   soft accent-coloured lift instead, deepening on hover. --c is set inline per
   row; the fallback is the darker --cyan, which has the contrast to hold on
   near-white (the light #3EC1D5 does not). */
.dropdown .dropdown__icon{width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
  background:color-mix(in srgb,var(--c,var(--cyan)) 22%,#fff);
  border:1px solid color-mix(in srgb,var(--c,var(--cyan)) 48%,transparent);
  box-shadow:0 2px 6px color-mix(in srgb,var(--c,var(--cyan)) 18%,transparent);
  transition:background .18s,border-color .18s,box-shadow .22s,transform .18s}
.dropdown a:hover .dropdown__icon,.dropdown a:focus-visible .dropdown__icon{
  background:color-mix(in srgb,var(--c,var(--cyan)) 22%,#fff);
  border-color:color-mix(in srgb,var(--c,var(--cyan)) 52%,transparent);
  box-shadow:0 4px 12px color-mix(in srgb,var(--c,var(--cyan)) 26%,transparent)}
.dropdown .dropdown__icon svg{width:18px;height:18px;
  stroke:color-mix(in srgb,var(--c,var(--cyan)) 90%,#083B33);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .22s}
.dropdown a:hover .dropdown__icon svg{stroke:color-mix(in srgb,var(--c,var(--cyan)) 96%,#0F2A25)}
.dropdown b{display:block;font-family:var(--round);font-size:14.2px;font-weight:500;
  letter-spacing:-.004em;color:var(--dd-ink)}
.dropdown span{display:block;font-size:12.5px;color:var(--dd-mute);margin-top:2px}
@media (prefers-reduced-motion:reduce){
  .dropdown .dropdown__icon,.dropdown .dropdown__icon svg{transition:none}
}
.dropdown--products{width:640px;display:grid;grid-template-columns:1fr 1fr}
.dropdown--platform,.dropdown--solutions{width:560px;display:grid;grid-template-columns:1fr 1fr}
.dropdown--company{width:340px}


/* ═══ styles/05-nav-dropdown.css ═══════════════════════════════════════════ */
/* ══ 05-nav-dropdown ══════════════════════════════════════════════════════
   The Stripe-style mega dropdown panels.
   Blocks: .dropdown, .mega, .mobile-menu, .mobile-toggle, .nav, .site-header
   ══════════════════════════════════════════════════════════════ */
/* ── mega panels (Stripe-style): Platform mirrors the homepage three decks,
      Solutions leads with business model ─────────────────────────────────
   .nav__item.nav__item--wide goes position:static so the panel measures against the
   .site-header__shell instead of the tiny button — left:0/right:0 = full bar width. */
.nav__item.nav__item--wide{position:static}
.dropdown.mega{left:0;right:0;width:auto;top:77px;padding:26px 26px 0;
  display:block;grid-template-columns:none;
  border-radius:22px;max-height:calc(100vh - 110px);overflow:auto}
.mega__grid{display:grid;gap:0}
/* Core features are engine parts; the product suite is what you actually buy;
   outcomes sit between. Widths and scale follow that, not thirds. */
.mega__grid.mega__grid--3{grid-template-columns:1fr 1.18fr 1.1fr}
/* Business model leads and takes the room; industry is a narrow rail of names. */
.mega__grid.mega__grid--solutions{grid-template-columns:1.02fr .82fr 1fr .82fr}
.mega .mega__col{min-width:0;padding:0 22px}
.mega .mega__col:first-child{padding-left:4px}
.mega .mega__col:last-child{padding-right:4px}
.mega .mega__col-line{border-left:1px solid var(--line)}
/* column header: accent pip, ink label, then a hairline that fades out across
   the column — on light the heading leads by weight and the rule, not by glow */
.mega .mega__col-head{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:0 10px 11px;
  font-family:var(--round);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dd-ink);font-weight:600;position:relative;white-space:nowrap}
.mega .mega__col-head::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--hc,var(--cyan)) 70%,transparent),
    color-mix(in srgb,var(--hc,var(--cyan)) 18%,transparent) 45%,transparent)}
.mega .mega__dot{width:7px;height:7px;border-radius:2px;flex-shrink:0;
  background:var(--hc,var(--cyan))}
/* deeper than the dark-panel pips — the pastels vanished on near-white */
.mega .mega__col-head:has(.mega__dot.mega__dot--1){--hc:#1798B3}
.mega .mega__col-head:has(.mega__dot.mega__dot--2){--hc:#8B5CF6}
.mega .mega__col-head:has(.mega__dot.mega__dot--3){--hc:#0E9F6E}
/* rows sit tighter than the small dropdowns — three decks have to fit */
.mega a{display:flex;padding:10px 12px;gap:12px;align-items:center;border-radius:11px;position:relative}
/* Hierarchy is scale: engine parts smallest, what-you-buy biggest. */
.dropdown--platform .mega__col:first-child a{padding:9px 12px;gap:11px}
.dropdown--platform .mega__col:first-child b{font-size:13.2px}
.dropdown--platform .mega__col:first-child .dropdown__icon{width:28px;height:28px;border-radius:9px}
.dropdown--platform .mega__col:first-child .dropdown__icon svg{width:15px;height:15px}
.dropdown--platform .mega__col:nth-child(2) a{padding:11px 12px}
.dropdown--platform .mega__col:nth-child(2) b{font-size:14.8px;font-weight:600}
.dropdown--platform .mega__col:nth-child(2) .dropdown__icon{width:35px;height:35px;border-radius:11px}
.dropdown--platform .mega__col:nth-child(2) .dropdown__icon svg{width:18.5px;height:18.5px}
.dropdown--platform .mega__col:nth-child(3) a{padding:8.5px 10px}
/* Core features, Outcomes, By use case and By industry now jump straight to
   their matching card in the deck / on the Solutions page (see .nav-deck-link
   in 44-nav-highlight.css), so they carry a real href and get the same
   pointer + hover lift as every other row — no more cursor:default override. */
.dropdown--platform .mega__col:nth-child(3) b{font-size:14px}
.mega a>div{min-width:0;flex:1}
/* partner rows show a real brand mark, so the tile drops the accent tint and
   just holds the logo — a coloured wash behind AWS/Azure/GCP reads as ours. */
.mega .dropdown__icon.is-logo{background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden}
.mega .dropdown__icon.is-logo img{width:20px;height:20px;object-fit:contain;display:block}
.mega .dropdown__icon{width:30px;height:30px;border-radius:9px;margin-top:0}
.mega .dropdown__icon svg{width:16.5px;height:16.5px}
.mega b{font-size:13.4px;line-height:1.28}
/* The line under each Platform item. It used to be clipped to one line with an
   ellipsis, and `display:flex;justify-content:center` centred the overflowing
   text so it read as indented too. It now wraps and shows in full. */
/* Target ONLY the description span. The icon tile is a <span> too, so a broad
   `.dropdown--platform .mega__grid span` also hit it — overriding its
   display:flex and pushing it 3px down out of centre. */
.dropdown--platform a>div>span{display:flex;font-size:11.6px;line-height:1.5;margin-top:3px;
  color:var(--dd-dim);white-space:normal;overflow:visible;text-align:left}
/* who already runs it, under the vertical list */
.mega .mega__ind-note{margin:12px 9px 0;padding-top:11px;border-top:1px solid var(--line);
  font-family:var(--round);font-size:11.8px;line-height:1.6;color:var(--dd-dim)}
.mega .mega__ind-note b{display:inline;font-size:11.8px;font-weight:600;color:var(--dd-mute)}
/* by-industry: a narrow rail of names — it gives its width to the other two */
.mega .mega__ind-rail a{padding:6px 9px;gap:9px}
.mega .mega__ind-rail .dropdown__icon{width:26px;height:26px;border-radius:8px}
.mega .mega__ind-rail .dropdown__icon svg{width:14.5px;height:14.5px}
.mega .mega__ind-rail b{font-size:12.5px;letter-spacing:-.008em}
/* business-model column — the lead column: who you are decides everything else,
   so these read as raised cards, not list rows */
.mega .mega__col-biz .mega__col-head{margin-bottom:14px}
.mega .mega__bizcard{position:relative;overflow:hidden;margin-bottom:10px;padding:17px 15px;
  align-items:center;border:1px solid var(--line);
  background:linear-gradient(140deg,#FFFFFF,#F6FBF9);
  box-shadow:0 1px 2px rgba(20,45,38,.04);
  transition:background .2s,border-color .2s,transform .2s,box-shadow .24s}
/* accent edge lights up on hover */
.mega .mega__bizcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--c);opacity:.55;transition:opacity .2s}
.mega .mega__bizcard .dropdown__icon{width:36px;height:36px}
.mega .mega__bizcard b{font-family:var(--display2);font-size:16px;font-weight:700;letter-spacing:-.02em}
.mega .mega__bizcard:hover{transform:translateY(-1px);
  background:linear-gradient(140deg,color-mix(in srgb,var(--c) 9%,#fff),#FFFFFF);
  border-color:color-mix(in srgb,var(--c) 46%,var(--line));
  box-shadow:0 8px 22px color-mix(in srgb,var(--c) 18%,transparent)}
.mega .mega__bizcard:hover::before{opacity:1}
.mega .mega__bizcard.mega__bizcard--featured{background:linear-gradient(140deg,rgba(90,169,255,.10),rgba(62,193,213,.05));
  border-color:rgba(90,169,255,.32)}
/* footer strip — the loop line plus the two ways out */
.mega__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:16px;
  padding:13px 14px;border-top:1px solid var(--line);
  background:linear-gradient(90deg,rgba(15,118,106,.08),rgba(62,193,213,.05) 60%,transparent);
  border-radius:0 0 20px 20px;margin-inline:-22px;padding-inline:26px}
.mega__foot .mega__foot-key{flex:1;min-width:200px;font-family:var(--round);font-size:11.5px;
  letter-spacing:.02em;color:var(--dd-dim)}
.mega__foot .mega__foot-link{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:10px;
  font-family:var(--round);font-size:13px;font-weight:600;color:var(--dd-ink);
  background:#FFFFFF;
  border:1px solid var(--line2);transition:background .18s,border-color .18s,box-shadow .22s}
.mega__foot .mega__foot-link i{font-style:normal;transition:transform .2s}
.mega__foot .mega__foot-link:hover{background:#fff;border-color:var(--cyan);
  box-shadow:0 4px 14px rgba(23,152,179,.18)}
.mega__foot .mega__foot-link:hover i{transform:translateX(3px)}
/* While a panel is down the bar commits to the same light glass, on light AND
   dark bands — otherwise the .is-on-dark bar stays dark above a light panel and
   the two read as separate objects. Placed after the .is-on-dark rules so it wins
   on source order. */
.site-header:has(.nav__item:hover .dropdown) .site-header__shell,
.site-header:has(.nav__item:focus-within .dropdown) .site-header__shell,
.site-header:has(.mobile-toggle[aria-expanded="true"]) .site-header__shell{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(165%);-webkit-backdrop-filter:blur(18px) saturate(165%);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 18px 48px rgba(20,45,38,.16)}
.site-header:has(.nav__item:hover .dropdown) .nav__link,
.site-header:has(.nav__item:focus-within .dropdown) .nav__link{color:var(--muted)}
/* the open item stays marked while you're down in its panel */
.site-header:has(.nav__item:hover .dropdown) .nav__link:hover,
.site-header:has(.nav__item:focus-within .dropdown) .nav__link:hover,
.site-header .nav__item:hover>.nav__link,
.site-header .nav__item:focus-within>.nav__link{
  color:var(--ink);background:rgba(23,152,179,.11);box-shadow:none}
.site-header:has(.nav__item:hover .dropdown) .brand__word,
.site-header:has(.nav__item:focus-within .dropdown) .brand__word,
.site-header:has(.mobile-toggle[aria-expanded="true"]) .brand__word{color:var(--ink)}

@media(max-width:1240px){
  .mega b{font-size:12.6px}
  .mega .mega__col{padding:0 12px}
  .dropdown--platform .mega__col:nth-child(2) a>div{padding-right:74px}
  .dropdown--platform .mega__col:nth-child(3) a>div{padding-right:78px}
  /* tighter bar: give the name columns back a little, shrink the labels */
  .mega__grid.mega__grid--3{grid-template-columns:1fr 1.16fr 1.08fr}
  .mega__grid.mega__grid--solutions{grid-template-columns:1fr .8fr 1fr .8fr}
  .mega .mega__col-head{font-size:10.6px;letter-spacing:.11em}
}
/* solid fill under the gradient + no shine sweep: inside the blurred fixed header the
   animated overlay washes the button out to near-black in some browsers */
.nav__demo{margin-left:14px;padding:11px 20px;font-size:14px;
  background-color:var(--blue);background-image:var(--grad);color:#fff;font-weight:700}
.nav__demo::after{display:none}
.mobile-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line2);
  border-radius:10px;color:var(--ink);width:42px;height:42px;font-size:17px}
/* mobile menu is the same navigation surface — same daylight wash as the panels */
.mobile-menu{display:none;position:fixed;top:92px;left:0;right:0;height:calc(100vh - 92px);height:calc(100dvh - 92px);z-index:70;
  background:
    radial-gradient(700px 420px at 8% 0%,rgba(15,118,106,.10),transparent 70%),
    radial-gradient(600px 400px at 96% 12%,rgba(62,193,213,.08),transparent 72%),
    linear-gradient(150deg,var(--dd-1) 0%,var(--dd-2) 44%,var(--dd-3) 100%);
  backdrop-filter:blur(18px);padding:26px 24px;overflow:auto;color:var(--dd-ink)}
.mobile-menu.is-open{display:block}
.mobile-menu h5{font-family:var(--round);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dd-ink);margin:26px 0 6px;padding-bottom:8px;position:relative}
.mobile-menu h5::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--cyan),rgba(23,152,179,.18) 45%,transparent)}
.mobile-menu a{display:block;padding:11px 0;font-family:var(--round);font-size:17px;
  font-weight:500;letter-spacing:-.004em;
  color:var(--dd-ink);border-bottom:1px solid var(--line)}
.mobile-menu a:active{color:var(--cyan)}
.mobile-menu .btn{margin-top:26px;width:100%}


/* ═══ styles/06-hero.css ═══════════════════════════════════════════ */
/* ══ 06-hero ══════════════════════════════════════════════════════
   Home-page hero: title, rotating pill, background blobs.
   Blocks: .hero, .logo-mark
   ══════════════════════════════════════════════════════════════ */
/* ── hero ─────────────────────────────────────────────────────── */
main{position:relative;z-index:0}
main::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;
  background:linear-gradient(180deg,rgba(242,247,245,0) 68%,var(--bg) 100%),var(--wash)}
/* min-height leaves room for the partner belt to break the fold — the whole
   point of moving it up here is that it's seen before anyone scrolls */
.hero{position:relative;min-height:calc(100vh - 152px);display:flex;flex-direction:column;justify-content:center;
  padding:112px 0 20px;overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__bg .grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(16,122,110,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,122,110,.09) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 30%,transparent 75%)}
/* liquid-glass gradient: logo-colored blobs drifting like Stripe's hero */
.hero__bg .hero__blob{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform;mix-blend-mode:multiply}
.hero__bg .hero__blob--1{width:54vw;height:54vw;left:-14vw;top:-20vw;
  background:radial-gradient(circle at 35% 35%,rgba(15,118,106,.42),rgba(15,118,106,0) 66%);
  animation:blob1 26s ease-in-out infinite alternate}
.hero__bg .hero__blob--2{width:48vw;height:48vw;right:-12vw;top:-10vw;
  background:radial-gradient(circle at 60% 40%,rgba(110,190,175,.55),rgba(110,190,175,0) 66%);
  animation:blob2 33s ease-in-out infinite alternate}
.hero__bg .hero__blob--3{width:42vw;height:42vw;left:20vw;bottom:-18vw;
  background:radial-gradient(circle at 50% 50%,rgba(62,193,213,.38),rgba(62,193,213,0) 66%);
  animation:blob3 29s ease-in-out infinite alternate}
.hero__bg .hero__blob--4{width:36vw;height:36vw;right:4vw;bottom:-8vw;
  background:radial-gradient(circle at 50% 50%,rgba(224,242,236,.75),rgba(224,242,236,0) 66%);
  animation:blob4 38s ease-in-out infinite alternate}
@keyframes blob1{to{transform:translate(15vw,11vh) scale(1.2) rotate(18deg)}}
@keyframes blob2{to{transform:translate(-13vw,15vh) scale(.88)}}
@keyframes blob3{to{transform:translate(11vw,-11vh) scale(1.24)}}
@keyframes blob4{to{transform:translate(-9vw,-13vh) scale(1.14)}}
.hero__inner{position:relative;text-align:center;max-width:1000px;margin-inline:auto}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(40px,5.4vw,66px);line-height:1.04;letter-spacing:-.035em;margin:14px 0 14px}
.hero h1 em{font-style:normal;color:var(--dim)}
/* the gear IS the O: Group.svg fills its box edge-to-edge, so cap-height ≈ box */
.hero__title .hero__title-logo{display:inline-block;width:.6em;height:.6em;vertical-align:-.02em;margin:0 .015em}
.logo-mark svg{width:100%;height:100%;display:block}

.hero__copy{
  margin:0 auto 24px;
  max-width:800px;
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.65;
  color:var(--muted);
}

.hero__copy strong{
  color:var(--ink);
}
.hero__pill{display:inline-flex;align-items:center;gap:7px;vertical-align:1px;
  padding:0px 10px 1px;border-radius:999px;background:rgba(28,117,188,.12);
  border:1px solid rgba(28,117,188,.26);white-space:nowrap;
  transition:background .35s,border-color .35s}
.hero__pill .dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--blue);
  transition:background .35s}
.hero__pill .w{display:inline-block;font-size: 14px;font-weight:700;color:var(--ink);text-align:center;
  transition:transform .19s ease,opacity .19s ease}
.hero__pill.hero__pill--2{background:rgba(23,152,179,.13);border-color:rgba(23,152,179,.3)}
.hero__pill.hero__pill--2 .dot{background:#0F7E97}
.hero__pill.hero__pill--3{background:rgba(122,95,208,.13);border-color:rgba(122,95,208,.3)}
.hero__pill.hero__pill--3 .dot{background:#7A5FD0}
.hero__pill.hero__pill--4{background:rgba(14,127,79,.12);border-color:rgba(14,127,79,.3)}
.hero__pill.hero__pill--4 .dot{background:#0E7F4F}
.hero__pill.hero__pill--5{background:rgba(183,126,27,.13);border-color:rgba(183,126,27,.32)}
.hero__pill.hero__pill--5 .dot{background:#B77E1B}
@media (prefers-reduced-motion:reduce){.hero__pill .w{transition:none}}
.hero .lead strong{color:var(--ink)}
.hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}


/* ── "across every cloud" — the three hyperscalers, turning ──────
   Stacked in one grid cell so the line never reflows as they swap; the flip is
   the engine stage's rotateX move brought down to inline scale. Under reduced
   motion the stack becomes a row and all three simply sit there. */
/* "cloud", the turning mark and the comma travel as one word — otherwise the
   logo wraps to the next line on its own and reads as a stray glyph. */
.nobr{white-space:nowrap}
.cloudflip{display:inline-grid;width:1.15em;height:1.15em;margin:0 .1em 0 .34em;
  vertical-align:-.22em;perspective:420px}
.cloudflip img{grid-area:1/1;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:rotateX(90deg);transform-origin:50% 50%;
  transition:opacity .2s ease,transform .26s cubic-bezier(.2,.7,.3,1)}
.cloudflip img.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .cloudflip{display:inline-flex;gap:.2em;width:auto;height:auto}
  .cloudflip img{width:1.05em;height:1.05em;opacity:1;transform:none;transition:none}
}

/* ═══ styles/06b-hero-podium.css ═══════════════════════════════════════════ */
/* ══ 06b-hero-podium ══════════════════════════════════════════════════
   The engine podium standing in the hero (trial placement, 2026-09-02 —
   remove this file + the .hero__pod block in index.html to back it out).
   Scene art is GENERATED by tools/gen-podium.py; edit there, not here.
   Blocks: hero__inner--split, hero__words, hero__pod, pd-glass
   ══════════════════════════════════════════════════════════════ */
.hero__inner--split{display:grid;grid-template-columns:1.02fr .98fr;gap:30px;
  align-items:center;text-align:left;max-width:1230px}
.hero__inner--split .hero__copy{margin-inline:0}
.hero__inner--split .hero__actions{justify-content:flex-start}
.hero__pod{position:relative;aspect-ratio:1080/800;container-type:inline-size}
.hero__pod .pd-scene{position:absolute;inset:0;width:100%;height:100%}
.hero__pod .pd-scene a{cursor:pointer;outline:none;
  transform-box:fill-box;transform-origin:center;
  transition:transform .18s ease,filter .18s ease}
.hero__pod .pd-scene a:hover,.hero__pod .pd-scene a:focus-visible{transform:scale(1.1);
  filter:drop-shadow(0 0 7px rgba(28,117,188,.45)) brightness(1.08)}
.hero__pod .pd-scene a:hover text,.hero__pod .pd-scene a:focus-visible text{fill:var(--blue)}
.hero__pod .pd-glass{position:absolute;left:50%;top:20%;width:32%;
  /* turned the way the stack's left faces point (right edge receding), but
     with PERSPECTIVE, not the axonometric skew — the skew bent the letters,
     a perspective turn keeps the logo reading at full size */
  transform:translateX(-55%) perspective(500px) rotateY(-14deg) rotateX(-8deg) rotateZ(4deg);
  background:linear-gradient(118deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.32) 48%,rgba(236,246,241,.26) 100%);
  backdrop-filter:blur(6px) saturate(125%);-webkit-backdrop-filter:blur(6px) saturate(125%);
  border:1px solid rgba(255,255,255,.9);outline:1px solid rgba(197,214,206,.35);
  /* lit edges are what sell thickness: bright top edge, soft left edge,
     a faint inner sheen — then a much quieter throw shadow than before */
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 1.5px 0 0 rgba(255,255,255,.6),
    inset 0 -18px 30px -22px rgba(151,205,183,.35),
    0 24px 44px rgba(23,43,77,.12);
  border-radius:8% / 9%;padding:5.5% 2.4% 4.6%;text-align:center;
  /* type scales WITH the pod: at component scale (1080) glass font was
     ~6.3% of glass width — keep that ratio or the logo row overflows and
     flex crushes the mark (it is the only shrinkable item in the row) */
  font-size:clamp(6px,2cqw,15px)}
.hero__pod .pd-glass::before{content:"";position:absolute;left:6%;right:6%;top:99%;height:30%;
  border-radius:12%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 55%,transparent 80%);
  filter:blur(3px)}
.hero__pod .pd-glass::after{content:"";position:absolute;left:10%;right:10%;bottom:-1px;height:2px;
  pointer-events:none;border-radius:99px;background:rgba(255,255,255,.9);
  box-shadow:0 0 10px 1px rgba(255,255,255,.8)}
.hero__pod .pd-glass .pd-logo{display:flex;align-items:center;justify-content:center;gap:.35em}
.hero__pod .pd-mark{width:2.7em;height:2.7em;flex:0 0 auto}
.hero__pod .pd-mark .lg-ytoothg{opacity:0 !important}
.hero__pod .pd-word{font-family:var(--display);font-weight:700;font-size:1.72em;
  letter-spacing:-.02em;color:var(--ink)}
.hero__pod .pd-word i{font-style:normal;color:var(--blue)}
.hero__pod .pd-word.gtext{color:transparent}
.hero__pod .pd-sub{margin-top:.7em;font-family:var(--display);font-weight:600;
  font-size:1.16em;line-height:1.35;color:#22443C}
@media(max-width:960px){
  .hero__inner--split{grid-template-columns:1fr;text-align:center;gap:6px}
  .hero__inner--split .hero__copy{margin-inline:auto}
  .hero__inner--split .hero__actions{justify-content:center}
  .hero__pod{max-width:560px;margin-inline:auto;width:100%}
}

/* ── podium animation pass ────────────────────────────────────────
   Purely additive motion layered on top of the existing scene: a slow
   idle float + soft glow behind the whole podium, a breathing glass
   card, and a light sweep across the glass. No geometry, path, or
   layout in the generated SVG/markup above is touched — this only
   adds transform/opacity/filter animation and a decorative glow. ── */
@keyframes pdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pdGlow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.85;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes pdGlassBreathe{0%,100%{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 1.5px 0 0 rgba(255,255,255,.6),inset 0 -18px 30px -22px rgba(151,205,183,.35),
    0 24px 44px rgba(23,43,77,.12),0 0 0 0 rgba(28,117,188,0)}
  50%{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 1.5px 0 0 rgba(255,255,255,.6),inset 0 -18px 30px -22px rgba(151,205,183,.35),
    0 24px 44px rgba(23,43,77,.12),0 0 26px 4px rgba(28,117,188,.16)}}
@keyframes pdSweep{0%{transform:translateX(-120%) rotate(8deg)}100%{transform:translateX(220%) rotate(8deg)}}
@keyframes pdIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
/* the glass card already carries a static transform (offset + perspective
   tilt) — the float keyframe must restate it in full on every step, or the
   animation would blank it out and the card would jump out of place */
@keyframes pdGlassFloat{
  0%,100%{transform:translateX(-55%) perspective(500px) rotateY(-14deg) rotateX(-8deg) rotateZ(4deg) translateY(0)}
  50%{transform:translateX(-55%) perspective(500px) rotateY(-14deg) rotateX(-8deg) rotateZ(4deg) translateY(-8px)}
}

.hero__pod{animation:pdIn .9s cubic-bezier(.2,.6,.2,1) both}
.hero__pod .pd-scene{animation:pdFloat 6.5s ease-in-out infinite}
.hero__pod::before{content:"";position:absolute;left:50%;top:52%;width:64%;aspect-ratio:1/1;
  pointer-events:none;border-radius:50%;filter:blur(46px);transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(28,117,188,.22),rgba(111,181,152,.14) 55%,transparent 72%);
  animation:pdGlow 5.5s ease-in-out infinite}
.hero__pod .pd-glass{animation:pdGlassFloat 6.5s ease-in-out infinite,pdGlassBreathe 4.2s ease-in-out infinite}
.hero__pod .pd-glass span.pd-logo{position:relative;overflow:hidden;border-radius:6px}
.hero__pod .pd-glass span.pd-logo::after{content:"";position:absolute;top:-40%;left:-20%;width:26%;height:180%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55) 50%,transparent);
  animation:pdSweep 5s ease-in-out infinite;animation-delay:1.2s;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .hero__pod,.hero__pod .pd-scene,.hero__pod::before,.hero__pod .pd-glass,
  .hero__pod .pd-glass span.pd-logo::after{animation:none}
}

/* ═══ styles/07-bento.css ═══════════════════════════════════════════ */
/* ══ 07-bento ══════════════════════════════════════════════════════
   Section 2 — the MSP / GSI / Enterprise bento.
   Blocks: .bento
   ══════════════════════════════════════════════════════════════ */
/* ── section 2 · audience bento (MSP / GSI / Enterprise) ──────── */
#models{padding:40px 0 84px;background:var(--bg)}
#models::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(900px 480px at 8% 10%,rgba(28,117,188,.06),transparent 60%),
  radial-gradient(820px 460px at 94% 34%,rgba(23,152,179,.06),transparent 60%),
  radial-gradient(760px 420px at 50% 96%,rgba(175,214,201,.30),transparent 65%)}
.bento__lead{margin:0 0 44px;max-width:900px;font-family:var(--display);font-size:clamp(22px,2.6vw,32px);
  line-height:1.3;letter-spacing:-.015em;font-weight:600;color:var(--dim)}
.bento__lead b{font-family:var(--display2);color:var(--ink);font-weight:700}
.bento__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.bento__card{position:relative;z-index:0;overflow:hidden;display:flex;flex-direction:column;
  border-radius:var(--r-lg);padding:26px 28px 28px;background:var(--panel);
  border:1px solid var(--line);box-shadow:0 12px 34px rgba(20,45,38,.07);
  text-decoration:none;color:inherit;
  transition:border-color .3s,box-shadow .3s,transform .3s}
/* animated mesh — blurred blobs drifting under the content (per owner Figma 3792:8644) */
.bento__mesh{position:absolute;inset:0;z-index:-1;pointer-events:none}
.bento__mesh i{position:absolute;border-radius:50%;aspect-ratio:1/1;filter:blur(64px);
  will-change:transform;animation:16s ease-in-out infinite alternate}
@keyframes mdriftA{to{transform:translate(9%,-11%) scale(1.18)}}
@keyframes mdriftB{to{transform:translate(-11%,7%) scale(1.12)}}
@keyframes mdriftC{to{transform:translate(7%,9%) scale(.9)}}
@media (prefers-reduced-motion:reduce){.bento__mesh i{animation:none}}
/* MSP · green→teal→blue sweep along the bottom */
.bento--msp .bento__mesh .a{width:max(62%,300px);left:-16%;bottom:-34%;background:rgba(55,214,122,.50);animation-name:mdriftA;animation-duration:18s}
.bento--msp .bento__mesh .b{width:max(66%,320px);left:26%;bottom:-40%;background:rgba(23,179,154,.46);animation-name:mdriftB;animation-duration:23s}
.bento--msp .bento__mesh .c{width:max(58%,280px);right:-18%;bottom:-26%;background:rgba(28,117,188,.42);animation-name:mdriftC;animation-duration:15s}
.bento--msp .bento__mesh .d{width:max(44%,220px);left:-12%;top:-22%;background:rgba(124,217,234,.30);animation-name:mdriftB;animation-duration:21s}
/* GSI · rose→sand→green hugging the right edge */
.bento--gsi .bento__mesh .a{width:max(56%,260px);right:-24%;top:-14%;background:rgba(232,140,125,.42);animation-name:mdriftB;animation-duration:17s}
.bento--gsi .bento__mesh .b{width:max(50%,230px);right:-28%;top:36%;background:rgba(232,200,119,.38);animation-name:mdriftA;animation-duration:21s}
.bento--gsi .bento__mesh .c{width:max(56%,260px);right:-18%;bottom:-24%;background:rgba(59,201,142,.44);animation-name:mdriftC;animation-duration:14s}
/* Enterprise · full-field: coral→amber→yellow up top, teal wave + blue below */
.bento--ent .bento__mesh .a{width:max(34%,280px);left:-8%;top:-42%;background:rgba(240,119,107,0.24);animation-name:mdriftA;animation-duration:19s}
.bento--ent .bento__mesh .b{width:max(34%,280px);left:26%;top:-48%;background:rgba(245,165,76,0.22);animation-name:mdriftB;animation-duration:16s}
.bento--ent .bento__mesh .c{width:max(32%,260px);right:-10%;top:-38%;background:rgba(242,210,75,0.23);animation-name:mdriftC;animation-duration:22s}
.bento--ent .bento__mesh .d{width:max(58%,420px);left:16%;bottom:-64%;background:rgba(23,179,154,0.25);animation-name:mdriftB;animation-duration:25s}
.bento--ent .bento__mesh .e{width:max(38%,300px);right:-14%;bottom:-46%;background:rgba(28,117,188,0.24);animation-name:mdriftA;animation-duration:18s}
/* white clearing so the enterprise copy column stays readable over the field */
.bento--ent::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(58% 88% at 20% 62%,rgba(255,255,255,.88),rgba(255,255,255,.42) 52%,transparent 74%)}
a.bento__card:hover{border-color:var(--blue);box-shadow:0 22px 54px rgba(20,45,38,.15);transform:translateY(-3px)}
.bento--msp{grid-column:span 7}
.bento--gsi{grid-column:span 5}
.bento--ent{grid-column:span 12}
.bento__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bento__word{display:flex;flex-direction:column;gap:7px;min-width:0}
.bento__word b{font-family:var(--display2);font-size:clamp(38px,3.8vw,58px);font-weight:800;
  letter-spacing:-.035em;line-height:.98;color:var(--ink)}
.bento__word span{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.bento__arrow{font-style:normal;font-size:15px;color:var(--dim);width:32px;height:32px;flex:0 0 32px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  transition:color .25s,background .25s,border-color .25s,transform .25s}
a.bento__card:hover .bento__arrow{color:#fff;background:var(--blue);border-color:var(--blue);transform:translate(1px,-1px)}
.bento__card h3{margin:18px 0 0;font-family:var(--display2);font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.24;letter-spacing:-.015em;color:var(--ink)}
.bento__card h3 b{display:block;background:linear-gradient(120deg,#1C75BC,#2E8FD4 58%,#0F7E97);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bento__sub{margin:11px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:62ch}
.bento__sub b{font-weight:700;color:var(--ink)}
.bento__sub b.c{color:var(--blue)}
/* Notion-style rotating stage pill (GSI card) */
.bento__pill{display:inline-flex;align-items:center;gap:7px;vertical-align:-3px;
  padding:2px 12px 3px;border-radius:999px;background:rgba(139,92,246,.15);
  transition:background .3s;white-space:nowrap}
.bento__pill .dot{width:8px;height:8px;border-radius:50%;background:#7A5FD0;
  flex:0 0 8px;transition:background .3s}
.bento__pill .w{display:inline-block;font-weight:700;color:var(--ink);text-align:center;
  transition:transform .18s ease,opacity .18s ease,width .25s ease}
.bento__pill.bento__pill--build{background:rgba(90,169,255,.17)}
.bento__pill.bento__pill--build .dot{background:#2F7BD0}
.bento__pill.bento__pill--operate{background:rgba(62,230,143,.17)}
.bento__pill.bento__pill--operate .dot{background:#0E7F4F}
.bento__pill.bento__pill--optimize{background:rgba(255,215,90,.22)}
.bento__pill.bento__pill--optimize .dot{background:#B77E1B}
/* MSP · the bridge */
.bento__bridge{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:12px;
  margin:26px -8px 0;border:1px solid rgba(255,255,255,.65);border-radius:16px;padding:18px 16px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%)}
.bento__col{display:flex;flex-direction:column;gap:10px}
.bento__col em{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);text-align:center}
.bento__chips{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.bento__col:last-of-type .bento__chips{grid-template-columns:1fr}
.bento__chips span{font-size:11.5px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.88);
  border:1px solid var(--line);border-radius:999px;padding:6px 10px;white-space:nowrap;text-align:center}
.bento__core{justify-self:stretch;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;
  padding:18px 20px;border-radius:15px;color:#EAF7FB;
  background:linear-gradient(180deg,#12303B 0%,#0C222B 100%);border:1px solid rgba(124,217,234,.3);
  box-shadow:0 16px 38px rgba(9,26,32,.32),0 0 0 1px rgba(124,217,234,.12)}
.bento__line{font-family:var(--display2);font-weight:700;font-size:clamp(17px,1.5vw,20px);
  line-height:1.18;letter-spacing:-.01em;color:#F2FAF7;margin-top:2px}
.bento__line b{color:#9CD8E6}
.bento__brand{display:flex;align-items:center;gap:7px}
.bento__logo{width:44px;height:44px;flex:0 0 44px;margin:-6px 0}
.bento__brand b{font-size:17px;letter-spacing:.01em;font-family:var(--display)}
.bento__arr{font-style:normal;font-size:20px;font-weight:700;color:var(--blue)}
/* dark stat tiles (MSP) */
.bento__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:auto;padding-top:22px}
.bento__stats>div{border-radius:14px;padding:16px 16px 14px;
  background:linear-gradient(180deg,#12303B 0%,#0C222B 100%);border:1px solid rgba(124,217,234,.18)}
.bento__stats b{display:block;font-family:var(--display);font-size:clamp(22px,2.3vw,29px);font-weight:700;
  letter-spacing:-.02em;color:#7CD9EA}
.bento__stats>div:nth-child(2) b{color:#5AE6A8}
.bento__stats>div:nth-child(3) b{color:#B9A6FF}
.bento__stats span{display:block;margin-top:5px;font-size:12.5px;font-weight:500;line-height:1.35;color:#CDE1DB;text-wrap:balance}
/* GSI · day-one gains */
.bento__gains{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:22px}
.bento__gain-key{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.bento__gain{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:15px;
  border:1px solid var(--line);border-left:4px solid #0F7E94;border-radius:12px;
  padding:13px 15px;background:rgba(255,255,255,.82);
  box-shadow:0 8px 20px rgba(20,45,38,.06);
  backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%)}
.bento__gain>b{display:grid;place-items:center;align-self:stretch;padding:12px 6px;border-radius:9px;
  background:rgba(15,126,148,.10);font-family:var(--display);
  font-size:clamp(19px,1.8vw,24px);letter-spacing:-.02em;color:#0F7E97}
.bento__gain:nth-of-type(2){border-left-color:#B77E1B}
.bento__gain:nth-of-type(2)>b{color:#B77E1B;background:rgba(183,126,27,.10)}
.bento__gain:nth-of-type(3){border-left-color:#6A4FC9}
.bento__gain:nth-of-type(3)>b{color:#6A4FC9;background:rgba(106,79,201,.10)}
.bento__gain strong{display:block;font-size:15px;color:var(--ink)}
.bento__gain div span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
/* Enterprise · CMP brief */
.bento__ent{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px;align-items:center;margin-top:4px}
.bento__ent-copy h3{margin-top:14px}
.bento__why{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.bento__why li{position:relative;padding-left:20px;font-size:13px;line-height:1.45;color:var(--muted)}
.bento__why li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:3px;
  background:linear-gradient(135deg,#1C75BC,#1798B3)}
.bento__caps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bento__cap{border:1px solid rgba(255,255,255,.7);border-top:3px solid var(--blue);border-radius:12px;
  padding:13px 14px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%)}
.bento__cap b{display:block;font-size:13.5px;color:var(--ink)}
.bento__cap span{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--muted)}
.bento__cap.bento__cap--2{border-top-color:#0E7F4F}
.bento__cap.bento__cap--3{border-top-color:#D98E2B}
.bento__cap.bento__cap--4{border-top-color:#C24545}
.bento__cap.bento__cap--5{border-top-color:#7A5FD0}
.bento__cap.bento__cap--6{border-top-color:#1798B3}


/* ═══ styles/08-section-band.css ═══════════════════════════════════════════ */
/* ══ 08-section-band ══════════════════════════════════════════════════════
   The .section block and its band variants.
   Blocks: .section
   ══════════════════════════════════════════════════════════════ */
/* ── sections ─────────────────────────────────────────────────── */
.section{padding:30px 0;position:relative}
.section.section--alt{background:var(--bg2);}


/* ═══ styles/09-platform-deck.css ═══════════════════════════════════════════ */
/* ══ 09-platform-deck ══════════════════════════════════════════════════════
   The dark platform deck (stacked capability cards).
   Blocks: .deck
   ══════════════════════════════════════════════════════════════ */
/* ── platform · dark deck band (one-page brochure) ────────────── */
/* overflow:clip — the 600px glow blobs (::before/::after) poke out to 647px on
   phones and widen the layout viewport (page zooms out). Safe here: no
   position:sticky lives inside #platform. */
#platform{overflow:clip;padding:88px 0 84px;background:rgb(6,4,14);
  border-top:1px solid rgba(139,92,246,.32);border-bottom:1px solid rgba(139,92,246,.32)}
#platform::before{content:"";position:absolute;width:600px;height:600px;left:12%;top:52%;
  pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(139,92,246,.13) 0%,rgba(139,92,246,0) 100%)}
#platform::after{content:"";position:absolute;width:500px;height:500px;right:10%;top:14%;
  pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(93,95,239,.11) 0%,rgba(93,95,239,0) 100%)}
#platform .container{position:relative;z-index:1}
#platform .section__head{margin-bottom:20px}
#platform .section__head p{margin-top:12px;font-size:15px;color:#A1A1AA}
#platform .section__head p b{color:#C9B8FF;font-weight:600}
#platform .section__head h2{font-size:clamp(26px,2.9vw,38px);color:#F2FAF7}
#platform .eyebrow{color:#A78BFA}
.deck{display:flex;flex-direction:column;gap:14px}
.deck__pack{display:grid;grid-template-columns:148px minmax(0,1fr);gap:22px;align-items:center}
.deck__title{font-family:var(--display);font-size:19px;font-weight:700;line-height:1.15;
  letter-spacing:-.02em;text-align:left;margin:0;color:#EDEDF4}
/* horizontal deck: a hand of tall dark cards; the active one expands wide
   in place while the rest compress and dim beside it */
.deck__cards{display:flex;align-items:stretch;height:212px;padding-right:20px}
.deck__card{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;
  border-radius:14px;padding:13px 10px 13px 28px;overflow:hidden;
  margin-left:-18px;z-index:var(--z,1);
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.02) 50%,rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:flex-grow .45s cubic-bezier(.35,1,.3,1),background .3s,border-color .3s,box-shadow .3s}
.deck__card:first-child{margin-left:0}
.deck__card .deck__num{font-family:var(--mono);font-size:11.5px;font-weight:700;color:#55566A}
.deck__card b{display:block;margin-top:7px;font-family:var(--display);font-size:13.5px;line-height:1.24;
  color:#A6A7B4;font-weight:700;letter-spacing:-.015em;hyphens:manual;
  transition:font-size .28s cubic-bezier(.35,1,.35,1),color .28s}
.deck__card>b::after{content:"";display:block;width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#A78BFA,rgba(167,139,250,0));
  box-shadow:0 0 8px rgba(167,139,250,.45);margin-top:7px;
  transition:width .3s,box-shadow .3s,opacity .3s;opacity:.75}
.deck__card:hover>b::after,.deck__card:focus>b::after{width:40px;opacity:1;
  background:linear-gradient(90deg,#C9B8FF,rgba(167,139,250,.15));
  box-shadow:0 0 14px rgba(167,139,250,.85)}
.deck__icon{display:block;height:36px;margin-top:10px;transition:height .3s,margin .3s}
.deck__icon svg{width:36px;height:36px;stroke:#A78BFA;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:width .3s,height .3s;
  filter:drop-shadow(0 0 9px rgba(139,92,246,.4))}
.deck__card:hover .deck__icon,.deck__card:focus .deck__icon{height:22px;margin-top:6px}
.deck__card:hover .deck__icon svg,.deck__card:focus .deck__icon svg{width:22px;height:22px}
.deck__desc{display:block;font-size:11.8px;line-height:1.45;color:#CDD5E4;margin-top:7px;
  min-width:0;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .3s .1s,max-height .32s cubic-bezier(.35,1,.35,1)}
.deck__badge{position:absolute;left:28px;bottom:12px;font-style:normal;font-size:10.5px;font-weight:600;
  color:#FFD75A;border:1px solid rgba(255,215,90,.45);background:rgba(255,215,90,.08);
  text-shadow:0 0 8px rgba(255,215,90,.5);
  border-radius:999px;padding:3px 10px;opacity:0;transition:opacity .3s .15s;
  white-space:nowrap;pointer-events:none;max-width:calc(100% - 56px);overflow:hidden;text-overflow:ellipsis}
/* sourced data chips — the payload of a hovered card */
.deck__chips{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:5px;
  opacity:0;transition:opacity .3s .15s;pointer-events:none}
/* cards that carry a pbadge (product suite) reserve room below the chips so the
   badge never sits on top of them — this was overlapping/garbling the last chip row */
a.deck__card .deck__chips{margin-bottom:32px}
.deck__chips i{font-style:normal;font-family:var(--font);font-size:10.5px;font-weight:700;
  letter-spacing:.01em;color:#C9B8FF;border:1px solid rgba(139,92,246,.4);
  background:rgba(139,92,246,.12);border-radius:999px;padding:3px 10px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.deck__chips i::before{content:"";width:5px;height:5px;border-radius:50%;background:#8B5CF6}
.deck__chips i.g{color:#4BF39F;border-color:rgba(75,243,159,.65);background:rgba(62,230,143,.13);
  text-shadow:0 0 11px rgba(75,243,159,.8)}
.deck__chips i.g::before{background:#4BF39F;box-shadow:0 0 9px rgba(75,243,159,1)}
.deck__chips i.y{color:#FFE06A;border-color:rgba(255,224,106,.6);background:rgba(255,215,90,.12);
  text-shadow:0 0 11px rgba(255,224,106,.75)}
.deck__chips i.y::before{background:#FFE06A;box-shadow:0 0 9px rgba(255,224,106,1)}
.deck__chips i.r{color:#FF8B8B;border-color:rgba(255,139,139,.6);background:rgba(255,107,107,.12);
  text-shadow:0 0 11px rgba(255,139,139,.7)}
.deck__chips i.r::before{background:#FF8B8B;box-shadow:0 0 9px rgba(255,139,139,1)}
.deck__card:hover,.deck__card:focus{outline:none;z-index:60;
  background:linear-gradient(90deg,#151233,#0A0912);
  border-color:rgba(139,92,246,.55);
  box-shadow:0 0 0 1px rgba(139,92,246,.32),0 24px 64px rgba(0,0,0,.6),
    0 12px 48px rgba(93,95,239,.35),inset 0 1px 0 rgba(255,255,255,.1)}
/* expanded width normalised across decks: 9-card deck grows harder than 7-card decks */
.deck__pack:nth-of-type(1) .deck__card:hover,.deck__pack:nth-of-type(1) .deck__card:focus{flex-grow:5.5}
.deck__pack:nth-of-type(2) .deck__card:hover,.deck__pack:nth-of-type(2) .deck__card:focus,
.deck__pack:nth-of-type(3) .deck__card:hover,.deck__pack:nth-of-type(3) .deck__card:focus{flex-grow:3.7}
.deck__card:hover b,.deck__card:focus b{font-size:19px;color:#F4F4F5}
.deck__card:hover b::after,.deck__card:focus b::after{width:28px;background:#8B5CF6}
.deck__card:hover .deck__desc,.deck__card:focus .deck__desc{opacity:1;max-height:96px}
.deck__card:hover .deck__badge,.deck__card:focus .deck__badge,
.deck__card:hover .deck__chips,.deck__card:focus .deck__chips{opacity:1}
/* the resting card isn't empty: lifecycle stage + keywords (owner narrative) */
.deck__stage{position:absolute;left:28px;right:12px;bottom:14px;display:flex;flex-direction:column;
  align-items:flex-start;gap:6px;opacity:1;transition:opacity .25s;pointer-events:none}
.deck__stage i{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.1em;padding:2px 8px;border-radius:6px;border:1px solid}
.deck__stage i.sd{color:#A78BFA;border-color:rgba(139,92,246,.45)}
.deck__stage i.sb{color:#5AA9FF;border-color:rgba(90,169,255,.45)}
.deck__stage i.so{color:#3EE68F;border-color:rgba(62,230,143,.4)}
.deck__stage i.sx{color:#FFD75A;border-color:rgba(255,215,90,.4)}
.deck__stage i.sa{color:#B9BAC6;border-color:rgba(255,255,255,.25)}
.deck__stage span{font-family:var(--mono);font-size:9.5px;color:#C2C9DA;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck__card:hover .deck__stage,.deck__card:focus .deck__stage{opacity:0}
/* outcomes: metrics glow dimly even at rest */
/* every deck: the metric is the indicator — luminescent, display-face, with its
   caption unfurling in mono once the card opens */
.deck__chips i,.deck__chips i.g,.deck__chips i.y,.deck__chips i.r{background:none;border:0;padding:0;gap:7px;
  align-items:baseline;font-size:inherit;letter-spacing:0}
.deck__chips{align-items:flex-start}
.deck__chips i::before{width:5px;height:5px;align-self:center;opacity:.95;
  transition:box-shadow .3s,width .3s,height .3s}
.deck__chips strong{font-family:var(--display);font-size:12.5px;font-weight:700;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:font-size .3s cubic-bezier(.35,1,.35,1),text-shadow .3s}
.deck__chips em{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.085em;text-transform:uppercase;color:#DCE3F0;white-space:nowrap;
  max-width:0;opacity:0;overflow:hidden;
  transition:max-width .34s cubic-bezier(.35,1,.35,1),opacity .26s}
.deck__chips i.g strong{color:#4BF39F;text-shadow:0 0 10px rgba(75,243,159,.55)}
.deck__chips i.y strong{color:#FFE06A;text-shadow:0 0 10px rgba(255,224,106,.5)}
.deck__chips i.r strong{color:#FF8B8B;text-shadow:0 0 10px rgba(255,139,139,.5)}
/* open state — stacked rows, brighter metrics, captions revealed */
.deck__card:hover .deck__chips,.deck__card:focus .deck__chips{flex-direction:column;gap:7px}
.deck__card:hover .deck__chips strong,.deck__card:focus .deck__chips strong{font-size:14px}
.deck__card:hover .deck__chips i.g strong,.deck__card:focus .deck__chips i.g strong{text-shadow:0 0 16px rgba(75,243,159,.95)}
.deck__card:hover .deck__chips i.y strong,.deck__card:focus .deck__chips i.y strong{text-shadow:0 0 16px rgba(255,224,106,.9)}
.deck__card:hover .deck__chips i.r strong,.deck__card:focus .deck__chips i.r strong{text-shadow:0 0 16px rgba(255,139,139,.9)}
.deck__card:hover .deck__chips em,.deck__card:focus .deck__chips em{max-width:230px;opacity:1}
.deck__card:hover .deck__chips i::before,.deck__card:focus .deck__chips i::before{width:6px;height:6px}
.deck__card:hover .deck__chips i.g::before,.deck__card:focus .deck__chips i.g::before{box-shadow:0 0 10px rgba(75,243,159,1)}
.deck__card:hover .deck__chips i.y::before,.deck__card:focus .deck__chips i.y::before{box-shadow:0 0 10px rgba(255,224,106,1)}
.deck__card:hover .deck__chips i.r::before,.deck__card:focus .deck__chips i.r::before{box-shadow:0 0 10px rgba(255,139,139,1)}
/* outcomes alone keep their metrics visible before the card is opened */
#outDeck .deck__chips{flex-direction:row;flex-wrap:wrap;gap:6px 12px;opacity:1;filter:none;
  overflow:visible;-webkit-mask-image:none;mask-image:none;
  transition:gap .3s cubic-bezier(.35,1,.35,1)}
.deck__cards:hover .deck__card:not(:hover):not(:focus){opacity:.42}


/* ═══ styles/10-partner-belt.css ═══════════════════════════════════════════ */
/* ══ 10-partner-belt ═══════════════════════════════════════════════
   "Partners & customers" — an infinite, seamless horizontal marquee.
   Blocks: .partners, .marquee, .partner__logo
   ══════════════════════════════════════════════════════════════ */

.partners{position:relative;padding:64px 0 72px;overflow:hidden}

/* full-bleed track, edge-faded so items scroll in/out softly rather
   than being cut off hard at the viewport edge */
.marquee{position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;align-items:center;gap:56px;width:max-content;
  animation:marqueeScroll 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;align-items:center;gap:56px;flex-shrink:0}
@keyframes marqueeScroll{to{transform:translateX(-50%)}}

/* ── partner wordmark chip ─────────────────────────────────────── */
.partner__logo{
  --brand:#7E988F;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  font-family:var(--display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
  white-space:nowrap;
  color:color-mix(in srgb, var(--brand) 62%, #3E5B54);
  opacity:.88;
  transition:color .28s ease, opacity .28s ease, transform .28s ease;
}
.partner__logo:hover{opacity:1;transform:translateY(-1px)}

.partner__logo i{display:block;width:7px;height:7px;border-radius:50%;
  background:var(--brand);flex:0 0 7px}
.partner__logo-img{display:none;width:auto;height:26px;object-fit:contain}
.partner__logo.has-art i{display:none}
.partner__logo.has-art .partner__logo-img{display:block}
.partner__logo.is-wordmark.has-art .partner__wordmark{display:none}

.partner__logo.aws{--brand:#E8871E}
.partner__logo.cisco{--brand:#1BA0D7}
.partner__logo.nutanix{--brand:#7047A8}
.partner__logo.azure{--brand:#2E8FD4}
.partner__logo.coforge{--brand:#1C75BC}
.partner__logo.persistent{--brand:#E8871E}
.partner__logo.gbm{--brand:#17987A}
.partner__logo.tii{--brand:#7047A8}
.partner__logo.liberty{--brand:#17987A}
.partner__logo.virginia{--brand:#17987A}
.partner__logo.newcastle{--brand:#17987A}
.partner__logo.hyperops{--brand:#7047A8}

@media (max-width:900px){
  .partners{padding:48px 0 56px}
  .marquee__track,.marquee__set{gap:40px}
  .partner__logo{font-size:17px}
  .partner__logo-img{height:22px}
}
@media (max-width:600px){
  .partners{padding:40px 0 48px}
  .marquee__track,.marquee__set{gap:30px}
  .partner__logo{font-size:15px}
  .partner__logo i{width:5px;height:5px;flex-basis:5px}
  .partner__logo-img{height:19px}
}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .marquee{overflow-x:auto}
}

/* every asset logo rides the belt now; PNG marks normalise to the svg size */
.partner__logo .partner__logo-img{width:28px;height:28px;object-fit:contain}
.partner__logo.hyperops .partner__logo-img{width:auto;height:22px}
/* the three cloud providers are LINKS — same lift the podium logos use */
a.partner__logo{text-decoration:none;border-radius:10px;
  transition:transform .18s ease,filter .18s ease}
a.partner__logo:hover,a.partner__logo:focus-visible{transform:scale(1.08);
  filter:drop-shadow(0 0 7px rgba(28,117,188,.35))}
a.partner__logo:hover .partner__wordmark,
a.partner__logo:focus-visible .partner__wordmark{color:var(--blue)}
a.partner__logo:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ═══ styles/11-reduced-motion.css ═══════════════════════════════════════════ */
/* ══ 11-reduced-motion ══════════════════════════════════════════════════════
   prefers-reduced-motion overrides.
   Blocks: —
   ══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){


  .partner__logo{
    transition:none;
  }

}



/* ═══ styles/12-responsive-nav.css ═══════════════════════════════════════════ */
/* == 12-responsive-nav ========================================================
   Nav responsive rules.
   Blocks: -

   The partner-belt rules that used to live here were removed: they were stale
   leftovers from the deleted 10-partner-belt.css and, being later in the
   cascade, would have silently overridden the fresh sizing/animation rules
   that file now defines for itself. That component owns its own responsive
   behaviour again.
   ================================================================================ */

/* ═══ styles/13a-testimonials.css ═══════════════════════════════════════════ */
/* ══ 13a-testimonials ══════════════════════════════════════════════════════
   Testimonial split panel and the "by operating model" rows.
   Blocks: .opmodel, .res, .resources, .testimonial
   ══════════════════════════════════════════════════════════════ */
/* ── testimonials · split panel (per Figma 3843:9993) ─────────── */
#feedback{padding:30px 0 60px}
#for-you{background:linear-gradient(180deg,var(--bg2),var(--bg));
  border-top:1px solid var(--line2);padding:80px 0 60px}
.testimonial{display:grid;grid-template-columns:1fr 1.12fr;gap:52px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 18px 50px rgba(20,45,38,.08);padding:52px 56px;position:relative}
.testimonial__left h2{font-size:clamp(24px,2.4vw,32px);margin:14px 0 26px}
/* the book the quotes sit in — always on screen, whichever quote is showing */
.testimonial__portfolio-key{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.testimonial__portfolio{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;max-width:400px}
.testimonial__portfolio>div{border-left:2px solid var(--line2);padding-left:14px}
.testimonial__portfolio b{display:block;font-family:var(--display);font-size:clamp(26px,2.6vw,34px);
  font-weight:700;letter-spacing:-.025em;line-height:1;color:var(--ink)}
.testimonial__portfolio span{display:block;margin-top:5px;font-size:12.5px;line-height:1.4;color:var(--dim)}
.testimonial__portfolio>div:nth-child(1){border-left-color:#0E7F4F}
.testimonial__portfolio>div:nth-child(2){border-left-color:#2F6FBF}
.testimonial__portfolio>div:nth-child(3){border-left-color:#B77E1B}
.testimonial__portfolio>div:nth-child(4){border-left-color:#6A4FC9}
/* what this particular customer reported — the figure leads, the words follow */
.testimonial__stats{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 30px;
  margin:0 0 26px;transition:opacity .18s}
.testimonial__stat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:11px;align-items:center;max-width:230px}
.testimonial__stat i{font-style:normal;grid-row:1/3;width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center}
.testimonial__stat i svg{width:22px;height:22px;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.testimonial__stat b{font-family:var(--display);font-size:29px;font-weight:700;
  letter-spacing:-.03em;line-height:1;align-self:end}
.testimonial__stat>span{font-size:12.5px;color:var(--dim);line-height:1.35;align-self:start;
  margin-top:3px}
/* an outcome the customer described but didn't put a figure on */
.testimonial__tag{align-self:center;font-size:12.5px;color:var(--muted);
  border:1px dashed var(--line2);border-radius:999px;padding:7px 14px}
.testimonial__stat.testimonial__stat--green i{background:rgba(14,127,79,.1)}
.testimonial__stat.testimonial__stat--green i svg{stroke:#0E7F4F}
.testimonial__stat.testimonial__stat--green b{color:#0E7F4F}
.testimonial__stat.testimonial__stat--red i{background:rgba(225,75,95,.1)}
.testimonial__stat.testimonial__stat--red i svg{stroke:#C94B4B}
.testimonial__stat.testimonial__stat--red b{color:#C94B4B}
.testimonial__stat.testimonial__stat--blue i{background:rgba(28,117,188,.1)}
.testimonial__stat.testimonial__stat--blue i svg{stroke:#2F6FBF}
.testimonial__stat.testimonial__stat--blue b{color:#2F6FBF}
.testimonial__right{position:relative;padding-left:52px;border-left:1px solid var(--line);
  transition:opacity .18s}
.testimonial__right .testimonial__stats{padding-right:76px}
.testimonial.is-swapping .testimonial__right,.testimonial.is-swapping .testimonial__stats{opacity:0}
.testimonial__mark{display:block;margin-bottom:14px}
.testimonial__mark svg{width:40px;height:30px;display:block;opacity:.85}
.testimonial__org{position:absolute;top:0;right:0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;color:var(--blue);border:1px solid rgba(28,117,188,.35);
  border-radius:999px;padding:4px 12px}
.testimonial__right blockquote{margin:0;font-style:italic;font-size:clamp(18px,1.7vw,22px);
  line-height:1.55;color:#33544D}
.testimonial__who{margin-top:22px}
.testimonial__who b{display:block;font-size:14px;color:var(--ink)}
.testimonial__who span{font-size:12.5px;color:var(--muted)}
.testimonial__dots{display:flex;justify-content:center;gap:10px;margin-top:26px}
.testimonial__dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:var(--line2);
  transition:background .25s,transform .25s;cursor:pointer}
.testimonial__dot.is-on{background:var(--blue);transform:scale(1.3)}

/* built-for · split layout with visual (owner variant 03) */
.opmodel__split{display:grid;grid-template-columns:.8fr 1.45fr;gap:64px;align-items:center}
.opmodel__left h2{font-size:clamp(30px,3vw,42px);line-height:1.12;margin:16px 0 14px}
.opmodel__left h2 .a-msp{color:#7A5FD0}
.opmodel__left h2 .a-gsi{color:#0E7F4F}
.opmodel__left h2 .a-ent{color:var(--blue)}
.opmodel__left>p{color:var(--muted);font-size:16px;margin:0 0 18px;max-width:30ch}
.opmodel__bar{display:block;width:44px;height:3px;border-radius:2px;background:var(--grad-logo);margin-bottom:28px}
.opmodel__iso{width:min(280px,80%);display:block}
@keyframes isoBob{to{transform:translateY(-7px)}}
.opmodel__iso .l1{animation:isoBob 4.5s ease-in-out infinite alternate}
.opmodel__iso .l2{animation:isoBob 5.5s .6s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.opmodel__iso .l1,.opmodel__iso .l2{animation:none}}
.opmodel__dc{display:inline-block;margin-top:20px;margin-left: 36px;font-size:13.5px;font-weight:600;color:var(--muted);transition:color .2s}
.opmodel__dc:hover{color:var(--blue)}
.opmodel__rows{display:flex;flex-direction:column;gap:16px}
.opmodel__row{display:grid;grid-template-columns:56px 1fr 1.15fr 30px;gap:22px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 24px;
  box-shadow:0 10px 30px rgba(20,45,38,.06);
  transition:transform .25s,border-color .25s,box-shadow .25s}
.opmodel__row:hover{transform:translateY(-2px);border-color:var(--a);box-shadow:0 16px 40px rgba(20,45,38,.12)}
.opmodel__icon{width:56px;height:56px;border-radius:50%;background:var(--ab);display:grid;place-items:center}
.opmodel__icon svg{width:26px;height:26px;stroke:var(--a);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.opmodel__text h3{font-size:18px;color:var(--a);margin:0 0 5px}
.opmodel__text p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.opmodel__row ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.opmodel__row li{position:relative;padding-left:16px;font-size:12.5px;color:var(--muted);line-height:1.4}
.opmodel__row li::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;
  border-radius:50%;background:var(--a);opacity:.6}
.opmodel__go{font-style:normal;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--dim);font-size:16px;transition:.25s}
.opmodel__row:hover .opmodel__go{background:var(--a);border-color:var(--a);color:#fff}

/* resources */
/* the blog band, light: a quiet wash — the cards carry the color */
#resources{background:linear-gradient(165deg,var(--bg2) 0%,var(--bg) 55%,var(--bg2) 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1px 0 30px}
.resources{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#resources .res:hover{border-color:rgba(23,152,179,.45);box-shadow:var(--glow)}
.res{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;transition:.25s}
.res:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:var(--shadow)}
.res .thumb{aspect-ratio:16/10;overflow:hidden}
.res img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.res:hover img{transform:scale(1.05)}
.res h3{font-size:17px;margin:18px 20px 5px}
.res p{margin:0 20px 20px;color:var(--muted);font-size:13.5px}

/* CTA */

/* ═══ styles/13b-cta-footer.css ═══════════════════════════════════════════ */
/* ══ 13b-cta-footer ══════════════════════════════════════════════════════
   Closing CTA band and the site footer.
   Blocks: .cta, .cta-inner, .cta-note, .footer, .nutshell
   ══════════════════════════════════════════════════════════════ */
.cta{position:relative;padding:60px 0;overflow:hidden;border-top:1px solid var(--line);
  background:radial-gradient(ellipse 70% 90% at 50% 115%,rgba(15,118,106,.22),transparent 70%),var(--wash)}
.cta .footer__boltmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:460px;
  opacity:.06;pointer-events:none;animation:flash 5s ease-in-out infinite}
@keyframes flash{0%,100%{opacity:.05}50%{opacity:.09}}
.cta-inner{position:relative;text-align:center;max-width:780px;margin-inline:auto}
.cta h2{font-size:clamp(34px,4.4vw,58px);line-height:1.06;margin:18px 0 16px}
.cta p{color:var(--muted);font-size:17.5px;margin:0 0 36px}
.cta-note{margin-top:22px;font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.08em}

/* the page ends dark: no white void under the footer on short pages */
html{background:rgb(6,4,14)}
/* footer */
/* dark footer — same recipe as the deck band: solid, sharp violet hairline */
.footer{border-top:1px solid rgba(139,92,246,.32);padding:30px 0 40px;
  background:rgb(6,4,14);position:relative;overflow:hidden}
.footer .brand{margin-bottom:0}
.footer .brand__word{color:#F2FAF7}
.footer__top{display:grid;grid-template-columns:1.15fr 1.6fr;gap:56px;align-items:start;
  position:relative;z-index:1}
.footer__brand>p{color:#A9B4C6;font-size:14px;max-width:300px;margin:14px 0 0;line-height:1.55}
/* three audience paths, icon-led — the only nav that earns space here */
.footer__paths{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.footer__path{position:relative;display:block;padding:18px 18px 16px;border-radius:16px;
  border:1px solid rgba(139,92,246,.3);
  background:linear-gradient(180deg,rgba(24,22,48,.92),rgba(12,10,26,.94));
  transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}
/* the arrow says "click me" before the cursor ever arrives */
.footer__path::after{content:"\2192";position:absolute;right:16px;top:15px;font-size:17px;
  color:#8FC2FF;opacity:.55;transition:transform .2s,opacity .2s,color .2s}
.footer__path:hover{transform:translateY(-3px);border-color:rgba(143,194,255,.65);
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 22px rgba(90,169,255,.18)}
.footer__path:hover::after{transform:translateX(4px);opacity:1;color:#EAF2FF}
.footer__path i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  color:#8FC2FF;background:rgba(90,169,255,.14);margin-bottom:12px}
.footer__path i svg{width:20px;height:20px}
.footer__path b{display:block;font-size:15px;color:#F2FAF7;letter-spacing:-.01em;padding-right:26px}
.footer__path em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;color:#8F9FBB;margin-top:4px}
.footer__mini{display:inline-flex;gap:18px;flex-wrap:wrap}
.footer__base{margin-top:30px;padding-top:22px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;color:#8A93AC;font-size:12.5px;position:relative;z-index:1}
.footer__base a{color:#F2F6FD;font-size:13.5px;font-weight:600;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(143,194,255,.75)}
.footer__base a:hover{color:#8FC2FF;text-decoration-color:#8FC2FF}
.footer__mini{gap:22px}
/* about: belief keywords, not essays */
.nutshell__beliefs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0}
.nutshell__beliefs span{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line2);border-radius:99px;padding:9px 18px;
  background:var(--panel)}
/* footer social row */
.footer__social{display:flex;gap:10px;margin-top:22px}
.footer__social a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:color-mix(in srgb,var(--c) 72%,#FFF);
  border:1px solid color-mix(in srgb,var(--c) 42%,transparent);
  background:color-mix(in srgb,var(--c) 16%,transparent);
  transition:transform .2s,background .2s,color .2s,box-shadow .2s}
.footer__social a:hover{transform:translateY(-3px);background:var(--c);color:#fff;
  box-shadow:0 8px 20px color-mix(in srgb,var(--c) 34%,transparent)}
.footer__social svg{width:18px;height:18px;fill:currentColor}
/* X's brand colour is near-black — invisible on the dark ground; lift it */
.footer__social .s-x{--c:#DDE3EC!important}   /* beats the inline style=--c */
.footer__social .s-x:hover{color:#0F1419}
.footer .footer__ghostword{position:absolute;bottom:-70px;left:50%;transform:translateX(-50%);z-index:0;
  font-family:var(--display);font-weight:700;font-size:min(24vw,300px);line-height:1;
  pointer-events:none;user-select:none;letter-spacing:-.04em;
  color:transparent;
  background:linear-gradient(180deg,#1B1638 0%,#0C0922 100%);
  -webkit-background-clip:text;background-clip:text}

/* the decorative bolt spilled 35px past small viewports — clamp, keep centred */
@media(max-width:640px){
  .cta .footer__boltmark{width:min(460px,94vw)}
}

/* ═══ styles/13c-articles.css ═══════════════════════════════════════════ */
/* ══ 13c-articles ══════════════════════════════════════════════════
   Resource articles (migrated from blazop.com) + the resource cards on
   the home #resources band. Article PAGES are GENERATED by
   tools/gen-articles.py from content/articles/*.json — edit the JSON or
   the generator, never the pages.
   Blocks: arthero, article, artflow, artcmp, artkeys, artmore, res--link
   ══════════════════════════════════════════════════════════════ */
.arthero{padding:150px 0 26px}
.arthero .container{max-width:860px}
.arthero h1{margin:14px 0 14px;font-family:var(--display2);font-weight:700;
  font-size:clamp(30px,4.2vw,46px);letter-spacing:-.025em;line-height:1.1}
.arthero__dek{margin:0;max-width:60ch;font-size:16.5px;line-height:1.65;color:var(--muted)}
.arthero__meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.arthero__meta i{font-style:normal;color:var(--line2)}

.article{max-width:820px;margin-inline:auto;padding:8px 20px 30px}
.article h2{margin:44px 0 14px;font-family:var(--display2);font-weight:700;
  font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;line-height:1.25}
.article p{margin:0 0 16px;font-size:15.5px;line-height:1.8;color:#33544D}
.article ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:9px}
.article ul li{position:relative;padding-left:24px;font-size:14.5px;
  line-height:1.65;color:#33544D}
.article ul li::before{content:"";position:absolute;left:2px;top:.62em;
  width:12px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan))}
.article .pullq{margin:34px 0;padding:6px 0 6px 26px;
  border-left:3px solid var(--cyan);
  font-family:var(--display);font-weight:600;font-size:clamp(17px,1.9vw,21px);
  line-height:1.55;letter-spacing:-.01em;color:#16342E}

/* flow: the article's argument as a numbered chain */
.artflow{margin:36px 0;display:grid;gap:0;counter-reset:af}
.artflow__step{position:relative;display:grid;grid-template-columns:44px 1fr;
  gap:16px;padding:14px 0}
.artflow__step::before{counter-increment:af;content:counter(af);
  display:grid;place-items:center;width:40px;height:40px;border-radius:13px;
  font-family:var(--mono);font-weight:700;font-size:14px;color:#fff;
  background:linear-gradient(150deg,var(--blue),var(--cyan))}
.artflow__step:not(:last-child)::after{content:"";position:absolute;
  left:19.5px;top:56px;bottom:-12px;width:1.5px;
  background:repeating-linear-gradient(180deg,var(--line2) 0 4px,transparent 4px 9px)}
.artflow__step b{display:block;font-family:var(--display);font-weight:700;
  font-size:15.5px;letter-spacing:-.01em}
.artflow__step b em{font-style:normal;font-weight:600;color:var(--cyan);margin-left:8px;font-size:13px}
.artflow__step span{display:block;margin-top:3px;font-size:13.5px;line-height:1.6;color:var(--muted)}

/* compare: the old way against the blaZop way, row by row */
.artcmp{margin:36px 0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--panel)}
.artcmp__head,.artcmp__row{display:grid;grid-template-columns:.7fr 1fr 1fr}
.artcmp__head{font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.artcmp__head span{padding:12px 16px}
.artcmp__head span:nth-child(2){color:#A94A5B;background:rgba(225,75,95,.06)}
.artcmp__head span:nth-child(3){color:#0B6B4B;background:rgba(14,159,110,.07)}
.artcmp__row{border-bottom:1px solid var(--line);font-size:13px;line-height:1.55}
.artcmp__row:last-child{border-bottom:0}
.artcmp__row>*{padding:13px 16px}
.artcmp__row b{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--ink)}
.artcmp__row .old{color:#7A5560;background:rgba(225,75,95,.045)}
.artcmp__row .new{color:#33544D;background:rgba(14,159,110,.05)}

/* takeaways: what to remember */
.artkeys{margin:38px 0;padding:24px 26px;border:1px solid var(--line);
  border-left:3px solid var(--cyan);border-radius:var(--r);background:var(--panel)}
.artkeys h3{margin:0 0 14px;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.artkeys ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.artkeys li{position:relative;padding-left:26px;font-size:14px;line-height:1.6;color:#33544D}
.artkeys li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;
  border-radius:6px;background:rgba(23,152,179,.12);border:1px solid rgba(23,152,179,.35)}
.artkeys li::after{content:"";position:absolute;left:5px;top:5px;width:4px;height:8px;
  border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(40deg)}

/* related reading + back link */
.artmore{max-width:820px;margin:10px auto 40px;padding:0 20px}
.artmore h3{font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.artmore__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.artmore__grid a{display:flex;flex-direction:column;padding:12px 12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);text-decoration:none;color:var(--ink);
  font-size:13px;font-weight:600;line-height:1.45;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.artmore__grid a:hover{transform:translateY(-2px);border-color:var(--line2);
  box-shadow:0 10px 24px rgba(23,43,77,.08)}
.artmore__thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;
  margin-bottom:12px;border:1px solid var(--line)}
.artmore__grid a>span{padding:0 4px}
.artmore__grid a em{display:block;font-style:normal;margin-top:auto;padding:8px 4px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--cyan)}

/* home #resources: article cards with generated thumbs (no image assets) */
.res--link{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.res--link h3{flex:0 0 auto}
.res--link p{flex:0 0 auto}
/* the CTA hugs the card's bottom edge whatever the title/dek line count —
   that is what makes "Read the article" line up across the row */
.res--link .res__cta{margin-top:auto}
.res__tgen{aspect-ratio:16/10;display:grid;place-items:center;position:relative;
  overflow:hidden;background:
    radial-gradient(120% 130% at 18% 8%,color-mix(in srgb,var(--tc,#1798B3) 20%,#fff) 0%,transparent 55%),
    linear-gradient(150deg,color-mix(in srgb,var(--tc,#1798B3) 9%,#fff),color-mix(in srgb,var(--tc,#1798B3) 26%,#EAF2EE))}
.res__tgen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s}
.res--link:hover .res__tgen img{transform:scale(1.04)}
.res__tgen span{position:absolute;z-index:1;left:12px;top:12px;padding:4px 9px;border-radius:7px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(4px);font-family:var(--mono);
  font-size:9px;font-weight:600;letter-spacing:.22em;
  color:color-mix(in srgb,var(--tc,#1798B3) 62%,#43645C)}
.res__cta{display:block;margin:0 20px 18px;font-style:normal;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--cyan)}

@media(max-width:900px){
  .artmore__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .arthero{padding-top:126px}
  .artcmp__head{display:none}
  .artcmp__row{grid-template-columns:1fr}
  .artcmp__row b{padding-bottom:2px}
  .artcmp__row .old{border-top:1px dashed var(--line)}
  /* stacked rows lose the column headers — each cell says whose it is */
  .artcmp__row .old::before,.artcmp__row .new::before{display:block;margin-bottom:3px;
    font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.16em}
  .artcmp__row .old::before{content:"THE LONG WAY";color:#A94A5B}
  .artcmp__row .new::before{content:"THE BLAZOP WAY";color:#0B6B4B}
  .artmore__grid{grid-template-columns:1fr}
}

.article__cta{margin-top:34px}
.article__cta a{display:inline-block;padding:12px 22px;border-radius:12px;
  font-weight:600;font-size:14px;text-decoration:none;color:#fff;
  background:var(--grad);box-shadow:var(--glow);
  transition:transform .18s,box-shadow .18s}
.article__cta a:hover{transform:translateY(-2px)}

/* the blog cards ride a scroll-snap carousel driven by a meatball menu —
   the same dot control the testimonials use */
.resources{grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 32px)/3);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding-bottom:6px}
.resources::-webkit-scrollbar{display:none}
.resources>.res{scroll-snap-align:start}
.resources__dots{margin-top:24px}
@media(max-width:900px){.resources{grid-auto-columns:72%}}
@media(max-width:640px){.resources{grid-auto-columns:86%}}
@media (prefers-reduced-motion:reduce){.resources{scroll-behavior:auto}}

/* Blog meatballs — the SAME control as the testimonial section (round dots,
   blue active at 1.3x). They sit UNDER the carousel as a sibling: putting
   them inside .resources makes them an extra grid column that scrolls away. */
.resources__dots{margin-top:26px}
.resources__dots .testimonial__dot{background:#9DBFB4}
.resources__dots .testimonial__dot:hover{background:#77948C}
.resources__dots .testimonial__dot.is-on{background:var(--blue);transform:scale(1.3)}

/* ══ 13c-articles · resource-page theming pass ═══════════════════════
   Each article page sets its own --accent (matching the color of its
   card on the home #resources band) via an inline body style. Every
   rule below reads that variable with a safe fallback, so nothing here
   changes layout — only color, glow and motion on top of the rules
   above. All animation respects the site-wide prefers-reduced-motion
   kill switch in 11-reduced-motion / 29-reveal.
   ══════════════════════════════════════════════════════════════ */
@keyframes artBlobFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-6%) scale(1.08)}}
@keyframes artDotPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--accent,#3EC1D5) 45%,transparent)}
  50%{opacity:.55;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent,#3EC1D5) 0%,transparent)}}
@keyframes artRingPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent,#3EC1D5) 38%,transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent,#3EC1D5) 0%,transparent)}}
@keyframes artShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* hero: colorful animated wash keyed to the page's accent + a warm
   yellow counter-blob, both blurred and drifting slowly */
.arthero{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(60% 70% at 14% 0%,color-mix(in srgb,var(--accent,#3EC1D5) 16%,transparent),transparent 70%),
    radial-gradient(55% 65% at 96% 10%,color-mix(in srgb,var(--yellow) 12%,transparent),transparent 70%),
    var(--bg)}
.arthero::before,.arthero::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  border-radius:50%;filter:blur(64px);animation:artBlobFloat 13s ease-in-out infinite}
.arthero::before{width:320px;height:320px;left:-8%;top:-22%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent,#3EC1D5) 40%,transparent),transparent 72%)}
.arthero::after{width:280px;height:280px;right:-6%;top:0;animation-delay:-6.5s;
  background:radial-gradient(circle,color-mix(in srgb,var(--yellow) 34%,transparent),transparent 72%)}
.arthero .eyebrow{color:var(--accent,var(--blue))}
.arthero .eyebrow::before{background:linear-gradient(90deg,var(--accent,#3EC1D5),color-mix(in srgb,var(--accent,#3EC1D5) 25%,var(--yellow)))}
.arthero__meta{position:relative}
.arthero__meta span:first-child{position:relative;padding-left:15px}
.arthero__meta span:first-child::before{content:"";position:absolute;left:0;top:52%;translate:0 -50%;
  width:6px;height:6px;border-radius:50%;background:var(--accent,var(--cyan));
  animation:artDotPulse 2.4s ease-in-out infinite}

/* body copy: a small accent kicker on every H2, a livelier pull-quote */
.article h2{position:relative;padding-left:20px}
.article h2::before{content:"";position:absolute;left:0;top:.4em;width:9px;height:9px;
  border-radius:3px;background:var(--accent,var(--cyan));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#3EC1D5) 15%,transparent)}
.article .pullq{position:relative;padding:18px 24px 18px 40px;border-radius:0 var(--r) var(--r) 0;
  border-left-color:var(--accent,var(--cyan));
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#3EC1D5) 8%,var(--panel)) 0%,var(--panel) 65%);
  box-shadow:0 18px 38px -22px color-mix(in srgb,var(--accent,#3EC1D5) 60%,transparent)}
.article .pullq::before{content:"\201C";position:absolute;left:10px;top:-4px;
  font-family:var(--display2);font-size:48px;line-height:1;
  color:color-mix(in srgb,var(--accent,#3EC1D5) 55%,transparent)}

/* flow chain: accent-tinted number badges that softly pulse, steps that
   nudge right on hover to feel clickable-alive even though they're not */
.artflow__step{transition:transform .25s ease}
.artflow__step:hover{transform:translateX(6px)}
.artflow__step::before{background:linear-gradient(150deg,var(--accent,var(--blue)),color-mix(in srgb,var(--accent,#3EC1D5) 30%,var(--yellow)));
  animation:artRingPulse 2.8s ease-in-out infinite}
.artflow__step:nth-child(2)::before{animation-delay:-.4s}
.artflow__step:nth-child(3)::before{animation-delay:-.8s}
.artflow__step:nth-child(4)::before{animation-delay:-1.2s}
.artflow__step:nth-child(5)::before{animation-delay:-1.6s}

/* compare rows: gentle tint sweep on hover */
.artcmp__row{transition:background-color .2s ease}
.artcmp__row:hover{background:color-mix(in srgb,var(--accent,#3EC1D5) 6%,transparent)}

/* takeaways panel: accent wash + list items nudge on hover */
.artkeys{border-left-color:var(--accent,var(--cyan));
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent,#3EC1D5) 7%,var(--panel)) 0%,var(--panel) 70%)}
.artkeys h3{color:var(--accent,var(--cyan))}
.artkeys li{transition:transform .2s ease}
.artkeys li:hover{transform:translateX(4px)}
.artkeys li::before{background:color-mix(in srgb,var(--accent,#3EC1D5) 16%,transparent);
  border-color:color-mix(in srgb,var(--accent,#3EC1D5) 45%,transparent)}
.artkeys li::after{border-color:var(--accent,var(--cyan))}

/* keep-reading cards: a top accent bar that draws in on hover, glow lift */
.artmore__grid a{position:relative}
.artmore__grid a::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:1;
  background:linear-gradient(90deg,var(--accent,var(--cyan)),transparent);
  transform:scaleX(0);transform-origin:0;transition:transform .35s ease}
.artmore__grid a:hover::before{transform:scaleX(1)}
.artmore__grid a:hover{box-shadow:0 18px 36px -18px color-mix(in srgb,var(--accent,#3EC1D5) 50%,transparent)}

/* final CTA button: a soft light sweep so it reads as alive, not static */
.article__cta a{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--accent,var(--blue)),color-mix(in srgb,var(--accent,#3EC1D5) 35%,var(--blue2)))}
.article__cta a::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);
  background-size:220% 100%;animation:artShimmer 4.5s ease-in-out infinite}

/* home #resources cards: colored glow keyed to each card's own --tc */
.res--link:hover{box-shadow:0 18px 38px -16px color-mix(in srgb,var(--tc,#1798B3) 55%,transparent)}
.res__tgen{transition:box-shadow .3s ease}

@media (prefers-reduced-motion:reduce){
  .arthero::before,.arthero::after,.arthero__meta span:first-child::before,
  .artflow__step::before,.article__cta a::after{animation:none}
}

/* ═══ styles/13d-hero-cta-transition.css ═══════════════════════════════════════════ */
/* ══ 13d-hero-cta-transition ═══════════════════════════════════════
   Hero → CTA handoff. Instead of a flat seam where the hero's wash
   background meets the CTA's border-top line, the hero PINS to the
   viewport for a stretch of scroll while the CTA section rides up
   over it as a rounded, elevated "sheet" — the reveal itself becomes
   the transition. Same family of move as the panel-stacking scroll
   sections on Stripe / Linear / Mercury-style marketing sites.
   Scoped to .hero-stack (home page only — see index.html) so no
   other page's .cta band is touched.
   Blocks: .hero-stack, .hero (extended), .cta (extended), .cta__handle
   ══════════════════════════════════════════════════════════════ */

.hero-stack{position:relative;z-index:0;padding-bottom:34vh}
.hero-stack .hero{position:sticky;top:0;z-index:0;
  transform:scale(calc(1 - var(--stack-p,0) * .05));transition:transform .05s linear}

/* dims the pinned hero as the CTA sheet rides up over it, so the covered
   layer visibly recedes instead of just vanishing behind the seam */
.hero-stack .hero::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:rgba(4,14,11,.5);opacity:var(--stack-p,0);transition:opacity .05s linear}

.hero-stack + .cta{position:relative;z-index:1;
  margin-top:-34vh;border-radius:48px 48px 0 0;overflow:hidden;
  box-shadow:0 -60px 120px -30px rgba(4,14,11,.45),0 -1px 0 rgba(255,255,255,.5) inset;
  transition:box-shadow .4s}

/* sheet "handle" — the same affordance as a mobile bottom-sheet — reads as
   "this panel was pulled up over the one behind it" */
.cta__handle{position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:52px;height:5px;border-radius:99px;background:rgba(15,42,37,.16);z-index:2}

@media (max-width:900px){
  /* less scroll distance to spare on smaller screens — shorten the hold */
  .hero-stack{padding-bottom:16vh}
  .hero-stack + .cta{margin-top:-16vh}
}

@media (prefers-reduced-motion:reduce){
  /* motion-sensitive visitors get the plain stacked layout: no pin, no
     scale, no scrim — just the sections in normal flow */
  .hero-stack{padding-bottom:0}
  .hero-stack .hero{position:relative;transform:none}
  .hero-stack .hero::after{display:none}
  .hero-stack + .cta{margin-top:0;border-radius:0;box-shadow:none}
}

/* ═══ styles/13e-jobs.css ═══════════════════════════════════════════ */
/* ══ 13e-jobs ═════════════════════════════════════════════════════════
   Job-detail pages (job-<slug>.html, generated by tools/gen-jobs.py from
   content/jobs/*.json). Same page as careers.html (body.pg-careers), each
   with its own --accent. Two-column body: article-styled main column
   (reuses .article typography from 13c-articles.css) + a sticky Apply
   card (reuses .form/.form__field/.form__card from 33-contact-form.css).
   Blocks: jobhero, jobgrid, jobfacts, jobapply, jobsmore
   ══════════════════════════════════════════════════════════════ */

/* ── hero strip ───────────────────────────────────────────────────── */
.jobhero{position:relative;overflow:hidden;padding:132px 0 40px;
  background:
    radial-gradient(120% 90% at 8% -20%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 60%),
    linear-gradient(168deg,#FBFDFC 0%,#F1F6F4 58%,#EAF1EF 100%)}
.jobhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 40%,transparent),transparent)}
.jobhero .container{position:relative;z-index:1}
.jobhero__back{display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted);text-decoration:none}
.jobhero__back:hover{color:var(--accent)}
.jobhero .eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 72%,#0F2A25)}
.jobhero .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--accent)}
.jobhero h1{margin:0 0 20px;font-family:var(--display2);font-weight:700;
  font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em;line-height:1.14;max-width:16ch}
.jobhero__meta{display:flex;flex-wrap:wrap;gap:22px;margin:0;padding:0;list-style:none}
.jobhero__meta li{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--muted)}
.jobhero__meta svg{width:16px;height:16px;flex-shrink:0;color:var(--accent);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── two-column body ──────────────────────────────────────────────── */
.jobgrid{display:grid;grid-template-columns:1fr .58fr;gap:40px;align-items:start;
  padding:44px 20px 10px;max-width:1120px}
.jobgrid__main{padding:0;max-width:none}
.jobgrid__main h2:first-child{margin-top:0}
.jobkeytech{padding:14px 16px;border-radius:12px;background:var(--panel2);
  border:1px solid var(--line);font-size:14px;color:var(--muted)}
.jobkeytech b{color:var(--ink)}
.jobgrid__aside{position:sticky;top:100px}

/* quick-facts strip, closes out the main column */
.jobfacts{list-style:none;margin:40px 0 0;padding:22px 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px;border-top:1px solid var(--line)}
.jobfacts div{display:grid;gap:3px}
.jobfacts b{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.jobfacts span{font-size:14px;font-weight:600;color:var(--ink)}

/* ── apply card ───────────────────────────────────────────────────── */
.jobapply{padding:28px 26px 26px}
.jobapply .eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent)}
.jobapply h3{margin:0 0 12px;font-family:var(--display2);font-weight:700;
  font-size:clamp(18px,1.8vw,21px);letter-spacing:-.02em}
.jobapply__note{margin:0 0 20px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.jobapply__note a{color:var(--accent);font-weight:600}
.jobapply__file{position:relative;border:1.5px dashed var(--line2);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:0;transition:border-color .18s,background .18s}
.jobapply__file:has(input:focus-visible),.jobapply__file:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 4%,transparent)}
.jobapply__file.has-file{border-color:var(--accent);border-style:solid}
.jobapply__file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;z-index:1}
.jobapply__file-label{display:flex;align-items:center;gap:12px;pointer-events:none}
.jobapply__file-icon{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;
  border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.jobapply__file-icon svg{width:18px;height:18px;color:var(--accent)}
.jobapply__file-text b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.jobapply__file-text i{display:block;margin-top:2px;font-style:normal;font-size:11.5px;font-weight:400;color:var(--dim)}
/* filename chip shown after file is picked */
.jobapply__filename{display:flex;align-items:center;gap:6px;margin-top:10px;padding:7px 10px;
  border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,transparent);
  font-size:12px;font-weight:600;color:color-mix(in srgb,var(--accent) 80%,var(--ink));
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  word-break:break-all;pointer-events:none}
.jobapply__filename::before{content:"✓";font-size:11px;font-weight:700;
  color:var(--accent);flex-shrink:0}
.jobapply .btn{width:100%;justify-content:center}

/* ── other open roles ─────────────────────────────────────────────── */
.jobsmore{margin-top:56px;padding:44px 0;border-top:1px solid var(--line)}
.jobsmore h3{margin:0 0 18px;font-family:var(--display2);font-weight:700;font-size:19px}
.jobsmore__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.jobsmore__card{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--line);
  text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.jobsmore__card:hover{transform:translateY(-2px);box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.jobsmore__card b{display:block;font-family:var(--display);font-weight:700;font-size:14.5px;margin-bottom:4px}
.jobsmore__card span{font-size:12px;color:var(--dim)}
.jobsmore__card i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:var(--panel2);border:1px solid var(--line2);color:var(--accent)}
.jobsmore__card i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:900px){
  .jobgrid{grid-template-columns:1fr;padding:34px 20px 10px}
  .jobgrid__aside{position:static}
  .jobsmore__grid{grid-template-columns:1fr}
}

/* ── Job apply success popup ─────────────────────────────────────────
   Full-viewport modal that slides up and fades in when the candidate
   submits the apply form. Backdrop click / Escape / "Got it" / 6-second
   auto-timer all dismiss it. The progress bar at the bottom visualises
   the 6-second countdown so the candidate knows it will self-dismiss.
   ──────────────────────────────────────────────────────────────────── */
#jobSuccessPopup{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;padding:20px;pointer-events:none;opacity:0;
  transition:opacity .28s ease}
#jobSuccessPopup:not([hidden]){pointer-events:auto}
#jobSuccessPopup.is-open{opacity:1}
.jsuccess__backdrop{position:absolute;inset:0;background:rgba(4,14,11,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.jsuccess__panel{position:relative;z-index:1;width:100%;max-width:440px;
  background:#fff;border-radius:24px;padding:36px 32px 28px;text-align:center;
  box-shadow:0 32px 80px -12px rgba(4,14,11,.28),0 0 0 1px rgba(255,255,255,.6) inset;
  transform:translateY(28px) scale(.96);transition:transform .32s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden}
#jobSuccessPopup.is-open .jsuccess__panel{transform:translateY(0) scale(1)}
.jsuccess__close{position:absolute;top:14px;right:14px;display:grid;place-items:center;
  width:32px;height:32px;border:none;background:var(--panel2);border-radius:50%;
  cursor:pointer;color:var(--muted);transition:background .18s,color .18s}
.jsuccess__close:hover{background:var(--line2);color:var(--ink)}
.jsuccess__close svg{width:16px;height:16px}
.jsuccess__icon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;
  border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:2px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.jsuccess__icon svg{width:26px;height:26px;color:var(--accent)}
.jsuccess__title{margin:0 0 10px;font-family:var(--display2);font-weight:700;
  font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.jsuccess__body{margin:0 0 22px;font-size:14px;line-height:1.7;color:var(--muted)}
.jsuccess__body a{color:var(--accent);font-weight:600}
.jsuccess__btn{width:100%;justify-content:center}
.jsuccess__progress{position:absolute;bottom:0;left:0;right:0;height:3px;
  background:var(--line)}
.jsuccess__bar{height:100%;width:100%;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--yellow)));
  transition:width 6s linear}

/* ── role badge — shown at top of apply card ─────────────────────── */
.jobapply__role-badge{display:flex;flex-direction:column;gap:3px;
  padding:12px 14px;margin-bottom:16px;border-radius:12px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.jobapply__role-label{font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.jobapply__role-title{font-family:var(--display);font-size:15px;font-weight:700;
  color:var(--ink);line-height:1.3}

/* ═══ styles/14-engine-stage.css ═══════════════════════════════════════════ */
/* ══ 14-engine-stage ══════════════════════════════════════════════════════
   "Put the engine in your enterprise" connected-systems stage.
   Blocks: .engine, .sr-only
   ══════════════════════════════════════════════════════════════ */
/* ── "put the engine in your enterprise" · connected-systems stage ─ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);border:0}
.engine__wrap{margin:44px auto 40px;max-width:1100px}
.engine{container-type:inline-size;position:relative;margin:0;aspect-ratio:1000/700;
  border-radius:24px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 50%,#123243 0%,#0B1F2B 55%,#07161F 100%);
  border:1px solid rgba(124,217,234,.22);
  box-shadow:0 40px 100px rgba(6,20,25,.45),0 0 0 1px rgba(20,45,38,.05)}
.engine__dots{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(124,217,234,.16) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 50%,#000 40%,transparent 100%);
  mask-image:radial-gradient(75% 70% at 50% 50%,#000 40%,transparent 100%)}
.engine__wires{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none}
.engine__wires .engine__wire-base{stroke:rgba(124,217,234,.3);stroke-width:1.4;stroke-dasharray:2 3}
/* one-shot discharge: the bolt's energy leaving the engine */
.engine__wires .engine__wire-fire{stroke:#FEE705;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:26 74;
  opacity:0;filter:drop-shadow(0 0 6px rgba(254,231,5,.95))}
.engine__wires .engine__wire-fire.go{animation:fireRun .8s cubic-bezier(.32,0,.2,1) 1}
.engine__wires .engine__wire-fire.in{stroke:#7CD9EA;filter:drop-shadow(0 0 6px rgba(124,217,234,.95))}
.engine__wires .engine__wire-fire.in.go{animation:fireRun .62s cubic-bezier(.3,0,.25,1) 1}
@keyframes fireRun{0%{opacity:0;stroke-dashoffset:100}12%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}
/* nodes are placed on the design grid; % keeps them locked as the stage scales */
.engine__node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  z-index:2;font-size:12px}
@container (min-width:1px){.engine__node{font-size:1.25cqw}}
/* your-systems panel */
.engine__panel{width:53%;border:1px solid rgba(124,217,234,.24);border-radius:1.4cqw;
  background:rgba(10,32,42,.82);padding:1.1cqw 1.4cqw;text-align:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.engine__panel em{display:block;font-style:normal;font-family:var(--mono);font-size:.85em;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6FA8B8;margin-bottom:.75cqw}
.engine__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.6cqw}
.engine__chips span{font-size:.95em;font-weight:600;color:#DDEEF3;white-space:nowrap;
  background:rgba(124,217,234,.09);border:1px solid rgba(124,217,234,.26);
  border-radius:99px;padding:.35cqw 1cqw}
.engine__chips .slot{color:#7CD9EA;border-style:dashed;border-color:rgba(124,217,234,.55);
  min-width:7.2cqw;text-align:center;transition:opacity .28s ease}
.engine__chips .slot.is-out{opacity:0}
/* labelled blocks + pills */
.engine__block,.engine__pill{white-space:nowrap;font-weight:600;color:#EAF7FB;
  border:1px solid rgba(124,217,234,.3);border-radius:.9cqw;
  background:linear-gradient(180deg,rgba(21,49,58,.95),rgba(9,26,32,.95));
  padding:.75cqw 1.4cqw;box-shadow:0 .8cqw 2cqw rgba(0,0,0,.35)}
.engine__pill{border-radius:99px;color:#7CD9EA;border-color:rgba(124,217,234,.4);
  background:linear-gradient(180deg,#14323F,#0B2029);font-family:var(--mono);
  font-size:.95em;letter-spacing:.03em;box-shadow:0 0 0 .5cqw rgba(11,31,40,.9)}
.engine__orch{border-color:rgba(139,92,246,.45);color:#D6C9FF;
  background:linear-gradient(180deg,rgba(33,26,66,.95),rgba(14,11,30,.95))}
/* one shared highlight the conductor applies as the story lands on a node */
.engine__block.is-lit,.engine__target.is-lit{border-color:rgba(254,231,5,.65);color:#FEE705;
  box-shadow:0 0 1.6cqw rgba(254,231,5,.35),0 .8cqw 2cqw rgba(0,0,0,.35)}
.engine__chips span.is-lit{color:#FEE705;border-color:rgba(254,231,5,.6);
  box-shadow:0 0 1cqw rgba(254,231,5,.4)}
.engine__rseg.is-lit{box-shadow:0 0 1.4cqw rgba(124,217,234,.35)}
.engine__rseg.engine__rseg--0.is-lit{border-color:#A78BFA}.engine__rseg.engine__rseg--1.is-lit{border-color:#5AA9FF}.engine__rseg.engine__rseg--2.is-lit{border-color:#3EE68F}
.engine__block,.engine__target,.engine__chips span,.engine__rseg{transition:color .3s,border-color .3s,box-shadow .3s}
/* what fans out of the engine */
.engine__caps{display:flex;gap:.7cqw;white-space:nowrap}
.engine__caps span{font-family:var(--mono);font-size:.78em;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;border:1px solid;border-radius:.6cqw;
  padding:.55cqw 1cqw;background:rgba(10,25,33,.92);
  box-shadow:0 .7cqw 1.8cqw rgba(0,0,0,.35);
  transition:color .3s,border-color .3s,box-shadow .3s,background .3s}
.engine__caps .c-cc{color:#7CD9EA;border-color:rgba(124,217,234,.45)}
.engine__caps .c-v{color:#C9B8FF;border-color:rgba(139,92,246,.45)}
.engine__caps .c-y{color:#FFE06A;border-color:rgba(255,224,106,.45)}
.engine__caps .c-b{color:#8FC2FF;border-color:rgba(90,169,255,.45)}
.engine__caps .c-g{color:#4BF39F;border-color:rgba(75,243,159,.45)}
.engine__caps span.is-hot{color:#06222C;box-shadow:0 0 1.8cqw rgba(254,231,5,.4),0 .7cqw 1.8cqw rgba(0,0,0,.35)}
.engine__caps .c-cc.is-hot{background:#7CD9EA;border-color:#7CD9EA}
.engine__caps .c-v.is-hot{background:#C9B8FF;border-color:#C9B8FF}
.engine__caps .c-y.is-hot{background:#FFE06A;border-color:#FFE06A}
.engine__caps .c-b.is-hot{background:#8FC2FF;border-color:#8FC2FF}
.engine__caps .c-g.is-hot{background:#4BF39F;border-color:#4BF39F}
/* the engine core — the real mark, ignited on first view */
.engine__core{position:relative;display:grid;place-items:center;gap:.6cqw;width:68%;aspect-ratio:1}
.engine__halo{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:150%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(23,152,179,.42) 0%,rgba(23,152,179,.16) 42%,transparent 68%);
  animation:corePulse 4.6s ease-in-out infinite}
.engine__core.is-firing .engine__halo{opacity:1;
  background:radial-gradient(circle,rgba(254,231,5,.5) 0%,rgba(254,231,5,.2) 38%,rgba(23,152,179,.14) 58%,transparent 72%)}
@keyframes corePulse{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.engine__core .logo-mark{position:relative;width:7cqw;height:7cqw;
  filter:drop-shadow(0 0 1.4cqw rgba(23,152,179,.55))}
.engine__core.is-firing .logo-mark{filter:drop-shadow(0 0 2cqw rgba(254,231,5,.7))}
.engine__core em{position:relative;font-style:normal;font-family:var(--mono);font-size:.8em;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#7CD9EA;white-space:nowrap}
/* flipping tool tiles */
.engine__tiles{display:grid;grid-template-columns:repeat(3,4.4cqw);gap:.9cqw;
  background:#0A1F29;box-shadow:0 0 0 .7cqw #0A1F29;border-radius:.4cqw}
.engine__tile{aspect-ratio:1;perspective:22cqw}
.engine__tile .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  animation:tileFlip 6.4s cubic-bezier(.6,0,.32,1) infinite;animation-delay:calc(var(--d,0s))}
@keyframes tileFlip{0%,40%{transform:rotateX(0)}50%,90%{transform:rotateX(180deg)}100%{transform:rotateX(360deg)}}
.engine__tile .face{position:absolute;inset:0;display:grid;place-items:center;border-radius:.8cqw;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:rgba(124,217,234,.07);border:1px solid rgba(124,217,234,.22)}
.engine__tile .face.engine__face--back{transform:rotateX(180deg)}
.engine__tile svg{width:2.4cqw;height:2.4cqw;fill:none;stroke:#7CD9EA;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.engine__tile .in.one{display:grid;place-items:center;border-radius:.8cqw;animation:none;
  background:rgba(90,230,168,.06);border:1px solid rgba(90,230,168,.22);
  transition:border-color .3s,background .3s,box-shadow .3s}
.engine__tile.engine__tile--out svg{stroke:#5AE6A8}
.engine__tile.engine__tile--out.is-lit .in.one{border-color:rgba(254,231,5,.7);background:rgba(254,231,5,.1);
  box-shadow:0 0 1.4cqw rgba(254,231,5,.4)}
/* outcomes badge + targets */
.engine__out{display:grid;place-items:center;gap:.3cqw;width:6.4%;aspect-ratio:1;border-radius:1cqw;
  background:linear-gradient(180deg,#13372F,#0A2019);border:1px solid rgba(90,230,168,.4);
  box-shadow:0 0 0 .5cqw rgba(11,31,40,.9)}
.engine__out svg{width:2.4cqw;height:2.4cqw;fill:none;stroke:#5AE6A8;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.engine__out span{font-family:var(--mono);font-size:.75em;letter-spacing:.06em;color:#5AE6A8}
.engine__target{width:10.8%;display:flex;align-items:center;justify-content:center;gap:.55cqw;
  font-weight:600;color:#CDE1DB;white-space:nowrap;
  border:1px solid rgba(124,217,234,.22);border-radius:.9cqw;padding:.8cqw .25cqw;
  background:rgba(12,34,43,.9)}
.engine__target .cloudlogo{width:1.7cqw;height:1.7cqw;flex:0 0 auto}
.engine__target .cloudlogo.cl--aws{width:2.1cqw;height:2.1cqw;margin-top:.25cqw}
.engine__flip{display:inline-flex;align-items:center;justify-content:center;gap:.55cqw;
  min-width:7.4cqw;transition:transform .17s ease,opacity .17s ease}
.engine__flip.is-turned{transform:rotateX(88deg);opacity:.1}
.engine__flip b{font-weight:600}
/* the AI workforce as a legible rail — no ring around the mark */
.engine__orbitwrap{width:17%;aspect-ratio:1;display:grid;place-items:center}
.engine__crew{display:flex;justify-content:center;gap:.45cqw;margin-top:.7cqw}
.engine__crew i{width:1.5cqw;height:.32cqw;border-radius:99px;background:rgba(124,217,234,.3);
  transition:background .45s ease,box-shadow .45s ease,transform .45s ease}
.engine__crew i.is-on{background:#FEE705;transform:scaleY(1.9);
  box-shadow:0 0 .9cqw rgba(254,231,5,.9)}
.engine__agent{position:absolute;top:107%;left:50%;transform:translateX(-50%);text-align:center;
  white-space:nowrap}
.engine__agent b{display:block;font-family:var(--mono);font-size:.95em;color:#FEE705;
  letter-spacing:.04em;transition:opacity .25s}
.engine__agent b.is-out{opacity:0}
.engine__agent span{font-size:.8em;color:#6FA8B8}
.engine__status{position:absolute;left:50%;transform:translateX(-50%);top:4.6%;z-index:2;
  /* fixed width (see .engine__sbox) centred on the mark — the dot cannot drift */
  white-space:nowrap;
  font-family:var(--mono);font-size:1.05cqw;letter-spacing:.05em;color:#C8DED7}
.engine__status .engine__sbox{display:grid;justify-items:center}
.engine__status .engine__sbox>*{grid-area:1/1;font:inherit;display:inline-flex;align-items:center;gap:.6cqw}
/* the dot rides inside each line — dot + text move as one centred unit */
.engine__status .engine__sbox>*::before{content:"";width:.55cqw;height:.55cqw;border-radius:50%;
  flex:0 0 auto;background:#5AE6A8;box-shadow:0 0 .8cqw rgba(90,230,168,.9)}
.engine__status .engine__sbox>em{visibility:hidden}      /* ghost sizers — see engine JS */
.engine__status .engine__sbox>b{transition:opacity .3s ease}
.engine__status .engine__sbox>b.is-out{opacity:0}
/* Day 0/1/2 lifecycle rail */
.engine__rail{width:62%;display:grid;grid-template-columns:repeat(3,1fr);gap:.7cqw}
.engine__rseg{text-align:center;border-radius:.7cqw;padding:.7cqw .4cqw;border:1px solid;
  background:rgba(10,28,36,.85)}
.engine__rseg b{display:block;font-family:var(--mono);font-size:.85em;font-weight:700;letter-spacing:.1em}
.engine__rseg span{display:block;margin-top:.15cqw;font-size:.78em;color:#8FA9B2}
.engine__rseg.engine__rseg--0{border-color:rgba(139,92,246,.45)}.engine__rseg.engine__rseg--0 b{color:#A78BFA}
.engine__rseg.engine__rseg--1{border-color:rgba(90,169,255,.45)}.engine__rseg.engine__rseg--1 b{color:#5AA9FF}
.engine__rseg.engine__rseg--2{border-color:rgba(62,230,143,.45)}.engine__rseg.engine__rseg--2 b{color:#3EE68F}
@media (prefers-reduced-motion:reduce){
  .engine__tile .in,.engine__halo,.engine__wires .engine__wire-fire{animation:none}
  .engine__wires .engine__wire-fire{display:none}
}
/* stacked on small screens: the wires and side rails step aside */
@media (max-width:860px){
  .engine{aspect-ratio:auto;container-type:normal;display:flex;flex-direction:column;
    align-items:center;gap:14px;padding:26px 18px}
  .engine__wires,.engine__dots{display:none}
  .engine__node{position:static;transform:none;font-size:12.5px;width:auto}
  .engine__panel{width:100%;padding:14px;border-radius:14px}
  .engine__panel em{font-size:10px;margin-bottom:9px;letter-spacing:.12em}
  .engine__chips{gap:7px}
  .engine__chips span{padding:5px 11px;font-size:12px}
  .engine__chips .slot{min-width:76px}
  .engine__block,.engine__pill{padding:9px 16px;border-radius:11px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
  .engine__tiles{border-radius:6px}
  .engine__pill{border-radius:99px;font-size:11.5px;box-shadow:none}
  .engine__tiles,.engine__out{box-shadow:none;background:none}
  .engine__out{background:linear-gradient(180deg,#13372F,#0A2019)}
  .engine__core{width:130px;height:130px;gap:8px}
  .engine__halo{width:150%;animation:none}
  .engine__core .logo-mark{width:66px;height:66px;filter:drop-shadow(0 0 12px rgba(23,152,179,.5))}
  .engine__core em{font-size:9.5px}
  .engine__tiles{grid-template-columns:repeat(6,minmax(0,40px));gap:8px;width:100%;max-width:280px}
  .engine__tile{perspective:200px}
  .engine__tile .face{border-radius:9px}
  .engine__tile svg{width:21px;height:21px}
  .engine__out{width:auto;height:auto;aspect-ratio:auto;grid-auto-flow:column;
    padding:9px 15px;border-radius:99px}
  .engine__out svg{width:18px;height:18px}
  .engine__out span{font-size:10.5px}
  .engine__target{width:auto;padding:9px 14px;border-radius:11px;font-size:12px;gap:6px}
  .engine__target .cloudlogo{width:16px;height:16px}
  .engine__target .cloudlogo.cl--aws{width:19px;height:19px;margin-top:2px}
  .engine__status{position:static;transform:none;order:11;font-size:11px;margin-inline:auto}
  .engine__status .engine__sbox>*{gap:6px}
  .engine__status .engine__sbox>*::before{width:6px;height:6px;box-shadow:0 0 5px rgba(90,230,168,.9)}
  .engine__caps{flex-wrap:wrap;justify-content:center;gap:7px;white-space:normal;order:8}
  .engine__outs{order:7}
  .engine__flip{min-width:74px;gap:6px}
  .engine__caps span{font-size:12px;padding:8px 14px;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
  /* relative keeps the ring anchored, but left/top must be cleared or the
     desktop --x/--y offsets shunt the whole wrapper sideways */
  .engine__orbitwrap{position:relative;left:auto;top:auto;width:auto;height:auto;flex:0 0 auto}
  .engine__crew{gap:5px;margin-top:8px}
  .engine__crew i{width:16px;height:3px}
  .engine__agent{position:static;transform:none;margin-top:10px}
  .engine__agent b{font-size:11.5px}.engine__agent span{font-size:10.5px}
  .engine__rail{width:100%;max-width:340px;grid-template-columns:1fr;gap:7px}
  .engine__rseg{padding:9px 12px;border-radius:10px;text-align:left}
  .engine__rseg b{font-size:11px}.engine__rseg span{font-size:11px;margin-top:2px}
  /* story order with the new nodes */
  .engine__orbitwrap{order:5}
  .engine__rail{order:10}
  .engine__targets-row{display:contents}
  /* vertical story order */
  .engine__panel{order:1}
  .engine__block:not(.engine__orch){order:2}
  .engine__tiles{order:3}
  .engine__pill{order:4}
  .engine__pill-r{order:6}
  .engine__out{order:7}
  .engine__target{order:9}
  .engine__orch{order:8}
  .engine__target{order:9}
}


/* ═══ styles/15-subpage-blocks.css ═══════════════════════════════════════════ */
/* ══ 15-subpage-blocks ══════════════════════════════════════════════════════
   Shared subpage blocks: night panels, why-cards, numcards.
   Blocks: .bento, .cursor-note, .flownote, .night, .numcards, .overlay, .page-hero, .section, .whycard
   ══════════════════════════════════════════════════════════════ */
/* ── subpage components (reuse the overlay design language) ───── */
.page-hero__chip{display:inline-block;margin:4px 0 18px;font-family:var(--mono);font-size:11px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);
  border:1px solid rgba(28,117,188,.35);background:rgba(28,117,188,.07);
  border-radius:999px;padding:6px 14px}
.overlay__plays.overlay__plays--three{grid-template-columns:repeat(3,1fr)}
.flownote{margin:18px 0 0;font-size:13.5px;color:var(--dim);text-align:center}
.section .overlay__flow{justify-content:center}
.section .overlay__pains{max-width:1160px;margin-inline:auto}
.section .overlay__tiles{max-width:960px;margin-inline:auto}
.overlay__tiles.overlay__tiles--four{grid-template-columns:repeat(4,1fr);max-width:none}
.numcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.numcards__item{border:1px solid var(--line);border-left:4px solid #C24545;border-radius:14px;
  background:var(--panel);padding:20px 22px;box-shadow:0 10px 26px rgba(20,45,38,.06)}
.numcards__item i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700;color:#C24545}
.numcards__item b{display:block;margin:8px 0 6px;font-size:15.5px;color:var(--ink);line-height:1.3}
.numcards__item p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.bento__why.bento__why--big{max-width:640px;margin-inline:auto}
.bento__why.bento__why--big li{font-size:15px;padding-left:24px}
.bento__why.bento__why--big li::before{top:8px}
.overlay__play.overlay__play--win em{display:block;font-style:italic;font-size:13px;color:var(--blue);margin:4px 0 10px}
.overlay__play.overlay__play--win ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.overlay__play.overlay__play--win li{position:relative;padding-left:16px;font-size:13px;line-height:1.45;color:var(--muted)}
.overlay__play.overlay__play--win li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--blue);opacity:.55}
.winpane__pill{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:700;color:var(--blue);
  background:rgba(28,117,188,.08);border-radius:999px;padding:7px 16px}
/* dark hero + why-now panel (Azure Local) */
.page-hero.page-hero--night{background:linear-gradient(160deg,#0A1626 0%,#0C1B30 60%,#10233C 100%)}
.page-hero.page-hero--night h1{color:#F2FAF7}
.page-hero.page-hero--night .page-hero__body{color:#B9CBDD}
.page-hero.page-hero--night .eyebrow{color:#00619d}
.page-hero.page-hero--night .page-hero__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.whycard--now{border:1px solid rgba(124,196,240,.4);border-radius:16px;padding:24px 26px;
  background:rgba(16,35,60,.7);color:#CDE1F3}
.whycard--now em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#7CC4F0;margin-bottom:14px}
.whycard--now ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.whycard--now li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.5}
.whycard--now li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:#7CC4F0}
/* night success-story panel */
.night{background:linear-gradient(160deg,#0A1626,#0C1B30);border:1px solid rgba(124,196,240,.3);
  border-radius:26px;padding:52px 56px;color:#CDE1F3;box-shadow:0 30px 80px rgba(6,20,30,.35)}
.night h2{color:#F2FAF7;font-size:clamp(26px,3vw,38px);margin:14px 0 0}
.night .eyebrow{color:#7CC4F0}
.night__sub{margin:14px 0 24px;font-style:italic;font-size:15px;line-height:1.6;color:#B9CBDD;max-width:78ch}
.night .overlay__tiles>div{background:rgba(20,42,70,.75);border-color:rgba(124,196,240,.28)}
.night .overlay__tiles span{color:#B9CBDD}
.cursor-note{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.whycard{background:#fff;border-radius:14px;padding:20px 22px;color:var(--muted)}
.whycard em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.whycard p{margin:0;font-size:13px;line-height:1.55}
.whycard--us{margin-top:26px;border:1px solid rgba(124,196,240,.35);border-radius:16px;padding:24px 28px}
.whycard--us>b{display:block;font-size:16px;color:#7CC4F0;margin-bottom:12px}
.whycard--us p{margin:0 0 8px;font-size:13.5px;line-height:1.6}
.whycard--us p b{color:#F2FAF7}
.night__foot{margin:24px 0 0;text-align:center;font-size:13.5px;color:#B9CBDD}
.night__foot a{color:#7CC4F0;font-weight:600}
@media (max-width:1080px){
  .overlay__plays.overlay__plays--three,.numcards,.cursor-note{grid-template-columns:1fr 1fr}
  .overlay__tiles.overlay__tiles--four{grid-template-columns:repeat(2,1fr)}
  .page-hero.page-hero--night .page-hero__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .overlay__plays.overlay__plays--three,.numcards,.cursor-note,.overlay__tiles.overlay__tiles--four{grid-template-columns:1fr}
  .night{padding:32px 24px}
}


/* ═══ styles/16-about-team.css ═══════════════════════════════════════════ */
/* ══ 16-about-team ══════════════════════════════════════════════════════
   About — the team night panel.
   Blocks: .team
   ══════════════════════════════════════════════════════════════ */
/* ── about · team night panel ─────────────────────────────────── */
.team--night{position:relative;overflow:hidden;border-radius:26px;padding:56px 56px 70px;
  color:#CDE1F3;border:1px solid rgba(124,217,234,.28);
  background:
    radial-gradient(640px 420px at 12% -10%,rgba(23,152,179,.28),transparent 60%),
    radial-gradient(560px 400px at 96% 16%,rgba(122,95,208,.26),transparent 62%),
    radial-gradient(700px 460px at 55% 118%,rgba(14,127,79,.22),transparent 62%),
    linear-gradient(160deg,#07131A 0%,#0B1F2E 52%,#131A38 100%);
  box-shadow:0 34px 90px rgba(4,14,20,.45)}
/* faint node-dot texture across the whole panel, like a circuit/network field */
.team--night::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(rgba(124,217,234,.35) 1px,transparent 1.4px),
    radial-gradient(rgba(255,215,90,.22) 1px,transparent 1.4px);
  background-size:46px 46px,74px 74px;
  background-position:0 0,23px 30px;
  mask-image:radial-gradient(closest-side,rgba(0,0,0,1) 60%,rgba(0,0,0,0) 100%)}
.team--night .eyebrow{color:#7CD9EA}
.team--night h2{color:#F2FAF7;font-size:clamp(26px,3vw,38px);margin:14px 0 0}
.team__sub{margin:12px 0 30px;font-style:italic;font-size:15px;color:#9FC0D6}
.team__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  column-gap:16px;row-gap:34px;align-items:start;perspective:1600px;padding-top:10px}

.team__card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;border-radius:18px;padding:38px 22px 30px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(124,217,234,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transform-style:preserve-3d;will-change:transform;
  box-shadow:0 22px 50px rgba(4,14,20,.5),0 0 0 1px rgba(124,217,234,.06) inset,
    0 0 34px rgba(124,217,234,.12);
  transition:transform .35s cubic-bezier(.16,.8,.3,1),border-color .3s,box-shadow .45s;

  opacity:0;transform:translateY(26px) rotateX(-8deg) scale(.94)}
/* alternating float height so the row reads as a floating grid, not a flat list */
.team__grid .team__card:nth-child(4n+1){margin-top:0}
.team__grid .team__card:nth-child(4n+2){margin-top:34px}
.team__grid .team__card:nth-child(4n+3){margin-top:16px}
.team__grid .team__card:nth-child(4n+4){margin-top:50px}

.team--night.is-visible .team__card{
  opacity:1;transform:translateY(0) rotateX(0) scale(1);
  transition:opacity .55s cubic-bezier(.34,1.56,.64,1),transform .55s cubic-bezier(.34,1.56,.64,1)}
.team--night.is-visible .team__card:nth-child(1){transition-delay:.03s}
.team--night.is-visible .team__card:nth-child(2){transition-delay:.11s}
.team--night.is-visible .team__card:nth-child(3){transition-delay:.19s}
.team--night.is-visible .team__card:nth-child(4){transition-delay:.27s}
.team--night.is-visible .team__card:nth-child(5){transition-delay:.35s}

.team__card::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(124,217,234,.18),transparent 62%)}
.team__card:hover{border-color:rgba(124,217,234,.55);
  box-shadow:0 26px 60px rgba(4,14,20,.55),0 0 0 1px rgba(124,217,234,.22) inset,
    0 0 60px rgba(124,217,234,.32)}
.team__card:hover::before{opacity:1}

/* glowing isometric platform each card appears to float above */
.team__card::after{content:"";position:absolute;left:50%;bottom:-26px;width:150px;height:64px;
  transform:translateX(-50%);pointer-events:none;
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  background:linear-gradient(160deg,rgba(124,217,234,.32),rgba(255,215,90,.14) 55%,transparent 100%);
  border:1px solid rgba(124,217,234,.5);
  box-shadow:0 0 46px 8px rgba(124,217,234,.28),0 0 90px 18px rgba(255,215,90,.08);
  opacity:.9;transition:opacity .3s,box-shadow .3s}
.team__grid .team__card:nth-child(odd)::after{
  background:linear-gradient(160deg,rgba(255,215,90,.3),rgba(124,217,234,.14) 55%,transparent 100%);
  border-color:rgba(255,215,90,.45);
  box-shadow:0 0 46px 8px rgba(255,215,90,.22),0 0 90px 18px rgba(124,217,234,.08)}
.team__card:hover::after{opacity:1;box-shadow:0 0 60px 12px rgba(124,217,234,.4),0 0 110px 24px rgba(255,215,90,.16)}

.team__avatar-wrap{position:relative;flex:0 0 76px;width:76px;height:76px;margin:0 auto 10px}
.team__avatar-wrap::before{content:"";position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(from 0deg,#7CD9EA,#5AE6A8,#B9A6FF,#FFD75A,#7CD9EA);
  animation:tRingSpin 6s linear infinite;opacity:.9;
  filter:drop-shadow(0 0 10px rgba(124,217,234,.4))}
.team__card:hover .team__avatar-wrap::before{animation-duration:2.2s}
@keyframes tRingSpin{to{transform:rotate(360deg)}}
.team__avatar{position:relative;flex:0 0 76px;width:76px;height:76px;border-radius:50%;object-fit:cover;
  border:3px solid #0B1F2E;background:linear-gradient(135deg,#7CD9EA,#5AE6A8);z-index:1;
  box-shadow:0 8px 20px rgba(0,0,0,.4)}

.team__item{position:absolute;top:16px;right:16px;width:26px;height:26px;border-radius:7px;
  display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#9FC0D6;transition:background .2s,color .2s,border-color .2s,transform .2s;z-index:2}
.team__item:hover{background:#0A66C2;color:#fff;border-color:#0A66C2;transform:translateY(-1px) scale(1.08)}
.team__item svg{width:13px;height:13px;display:block}
.team__card b{display:block;font-size:17px;color:#F2FAF7;letter-spacing:.01em}
.team__card em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#FFD75A;margin:4px 0 12px}
.team__card p{margin:0;font-size:13px;line-height:1.6;color:#A9C2D4}
.team__grid .team__card:nth-child(5){grid-column:1/-1;max-width:calc(50% - 8px);margin-inline:auto;margin-top:20px}
@media (max-width:1080px){
  .team__grid{grid-template-columns:1fr;row-gap:44px}
  .team__grid .team__card:nth-child(n){margin-top:0}
  .team__grid .team__card:nth-child(5){max-width:none}
}
@media (max-width:640px){.team--night{padding:32px 24px 54px}}
@media (prefers-reduced-motion:reduce){
  .team__avatar-wrap::before{animation:none}
  .team__card{transition:none}
}



/* ═══ styles/17-infographics.css ═══════════════════════════════════════════ */
/* ══ 17-infographics ══════════════════════════════════════════════════════
   Reusable mini infographics (bars, gauges, timeline, orbit, funnel).
   Blocks: .funnel, .gauge, .infographic, .matrix, .orbit, .proofstrip, .timeline
   ══════════════════════════════════════════════════════════════ */
/* ── mini infographics (non-verbose, reusable) ────────────────── */
.infographic{margin:30px auto 0;max-width:760px}
.infographic.mt{margin-top:56px}
.proofstrip.mt{margin-top:52px}
.infographic__cap{text-align:center;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:52px 0 -8px;opacity:0;
  transform:translateY(10px)}
.infographic__cap.is-visible{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
/* layer stack: top consumers → blaZop core → base estate */
.infographic__stack{display:flex;flex-direction:column;gap:0;align-items:stretch}
.infographic__stack .band{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:13px;padding:13px 18px;background:var(--panel);
  box-shadow:0 8px 22px rgba(20,45,38,.06)}
.infographic__stack .band em{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);width:100%;text-align:center}
.infographic__stack .band span{font-size:12px;font-weight:600;color:var(--ink);background:var(--panel2);
  border:1px solid var(--line);border-radius:999px;padding:4px 11px;white-space:nowrap}
.infographic__stack .band.core{background:linear-gradient(180deg,#12303B,#0C222B);
  border-color:rgba(124,217,234,.3);box-shadow:0 14px 34px rgba(9,26,32,.3)}
.infographic__stack .band.core em{color:#7CD9EA}
.infographic__stack .band.core span{background:rgba(124,217,234,.1);border-color:rgba(124,217,234,.3);color:#CDE1DB}
.infographic__stack .infographic__stack-arrow{text-align:center;color:var(--blue);font-weight:700;font-size:16px;
  line-height:1;padding:6px 0}
/* loop: nodes + return arrow */
.infographic__loop{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.infographic__loop span{font-size:13px;font-weight:600;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;white-space:nowrap;
  box-shadow:0 6px 16px rgba(20,45,38,.06)}
.infographic__loop i{font-style:normal;color:var(--blue);font-weight:700}
.infographic__loop .ret{color:var(--cyan);background:rgba(23,152,179,.08);border-color:rgba(23,152,179,.35);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em}
/* compare: from → to */
.infographic__compare{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch}
.infographic__compare .side{border-radius:14px;padding:18px 20px;border:1px solid}
.infographic__compare .from{background:rgba(225,75,95,.05);border-color:rgba(225,75,95,.25)}
.infographic__compare .to{background:rgba(14,127,79,.05);border-color:rgba(14,127,79,.3)}
.infographic__compare em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.infographic__compare .from em{color:#C24545}
.infographic__compare .to em{color:#0E7F4F}
.infographic__compare .side div{display:flex;flex-wrap:wrap;gap:7px}
.infographic__compare .side span{font-size:12px;font-weight:600;border-radius:999px;padding:4px 11px}
.infographic__compare .from span{color:#9B3B3B;background:rgba(225,75,95,.08);border:1px solid rgba(225,75,95,.22)}
.infographic__compare .to span{color:#0B6440;background:rgba(14,127,79,.08);border:1px solid rgba(14,127,79,.25)}
.infographic__compare .infographic__compare-arrow{align-self:center;color:var(--blue);font-size:22px;font-weight:700}
/* bars: label · track · value */
.infographic__bars{display:grid;gap:15px;max-width:640px;margin-inline:auto}
.infographic__bar{display:grid;grid-template-columns:170px 1fr 74px;align-items:center;gap:14px}
.infographic__bar em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted);text-align:right}
.infographic__bar .track{height:11px;border-radius:99px;background:var(--panel2);overflow:hidden;
  border:1px solid var(--line)}
.infographic__bar .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.infographic__bar.neg .fill{background:linear-gradient(90deg,#C97070,#C24545)}
.infographic__bar.pos .fill{background:linear-gradient(90deg,#12A56A,#0E7F4F)}
.infographic__bar b{font-family:var(--display);font-size:16px;color:var(--ink);letter-spacing:-.01em}
@media (max-width:640px){
  .infographic__compare{grid-template-columns:1fr}
  .infographic__compare .infographic__compare-arrow{transform:rotate(90deg);justify-self:center}
  .infographic__bar{grid-template-columns:1fr;gap:5px}
  .infographic__bar em{text-align:left}
}

/* ── infographics · set two (gauges, timeline, matrix, orbit, funnel) ── */
/* radial gauges — arc for real percentages, complete ring for counts */
.infographic__gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;
  max-width:780px;margin-inline:auto}
.gauge{text-align:center}
.gauge .dial{position:relative;width:104px;height:104px;margin:0 auto 10px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:8;stroke-linecap:butt}
.gauge .tr{stroke:var(--line)}
.gauge .fl{stroke:var(--blue);stroke-dasharray:calc(var(--p) * 2.827) 283;
  transition:stroke-dasharray .6s ease}
.gauge.g .fl{stroke:#0E7F4F}.gauge.y .fl{stroke:#B77E1B}.gauge.p .fl{stroke:#7A5FD0}
.gauge.count .fl{stroke-linecap:butt;opacity:.5}
.gauge .val{position:absolute;inset:0;margin:0;display:grid;place-items:center;
  font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.gauge b{display:block;font-size:13.5px;color:var(--ink)}
.gauge span{display:block;margin-top:2px;font-size:12px;color:var(--muted);line-height:1.4}
/* timeline rail */
.infographic__timeline{position:relative;display:grid;gap:16px;max-width:820px;margin-inline:auto;
  grid-auto-flow:column;grid-auto-columns:1fr}
.infographic__timeline::before{content:"";position:absolute;left:6%;right:6%;top:11px;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:2px;opacity:.45}
.timeline__point{position:relative;text-align:center;padding-top:30px}
.timeline__point i{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:16px;height:16px;
  border-radius:50%;background:var(--panel);border:3px solid var(--blue);
  box-shadow:0 0 0 4px rgba(28,117,188,.12)}
.timeline__point:nth-child(2) i{border-color:#1798B3;box-shadow:0 0 0 4px rgba(23,152,179,.12)}
.timeline__point:nth-child(3) i{border-color:#0E7F4F;box-shadow:0 0 0 4px rgba(14,127,79,.12)}
.timeline__point:nth-child(4) i{border-color:#B77E1B;box-shadow:0 0 0 4px rgba(183,126,27,.12)}
.timeline__point:nth-child(5) i{border-color:#7A5FD0;box-shadow:0 0 0 4px rgba(122,95,208,.12)}
.timeline__point b{display:block;font-size:13.5px;color:var(--ink)}
.timeline__point span{display:block;margin-top:3px;font-size:12px;color:var(--muted);line-height:1.4}
/* capability matrix */
.infographic__matrix{max-width:720px;margin-inline:auto;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:var(--panel)}
.matrix__row{display:grid;grid-template-columns:1.6fr repeat(var(--c,3),1fr);align-items:center}
.matrix__row+.matrix__row{border-top:1px solid var(--line)}
.matrix__row.head{background:var(--panel2)}
.matrix__row.head span{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);text-align:center;padding:11px 6px}
.matrix__row em{font-style:normal;font-size:13px;font-weight:600;color:var(--ink);padding:12px 16px}
.matrix__row i{justify-self:center;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:12px;font-weight:700}
.matrix__row i.y{background:rgba(14,127,79,.12);color:#0E7F4F}
.matrix__row i.n{background:rgba(225,75,95,.1);color:#C24545}
.matrix__row i.p{background:rgba(183,126,27,.12);color:#B77E1B}
/* orbit — a centre with satellites */
.infographic__orbitm{position:relative;width:min(400px,90vw);aspect-ratio:1;margin:0 auto}
.orbit__ring{position:absolute;inset:14%;border-radius:50%;border:1px dashed var(--line2)}
.orbit__c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;aspect-ratio:1;
  border-radius:50%;display:grid;place-items:center;text-align:center;padding:8px;
  background:linear-gradient(180deg,#12303B,#0C222B);border:1px solid rgba(124,217,234,.3);
  box-shadow:0 14px 34px rgba(9,26,32,.3)}
.orbit__c b{font-family:var(--display);font-size:15px;color:#EAF7FB;line-height:1.15}
.orbit__c span{display:block;margin-top:2px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:#7CD9EA}
.orbit__sat{position:absolute;inset:14%;transform:rotate(var(--a));pointer-events:none}
.orbit__s{position:absolute;left:50%;top:0;white-space:nowrap;
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  font-size:12px;font-weight:600;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:99px;padding:6px 13px;
  box-shadow:0 6px 16px rgba(20,45,38,.08)}
/* funnel */
.infographic__funnel{display:grid;gap:9px;max-width:560px;margin-inline:auto}
.funnel{display:flex;align-items:center;gap:12px;border-radius:11px;padding:12px 16px;
  border:1px solid var(--line);background:var(--panel2);margin-inline:auto;
  width:var(--w,100%);min-width:fit-content;max-width:100%}
.funnel b{font-size:13.5px;color:var(--ink);white-space:nowrap}
.funnel span{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.funnel.a{background:rgba(28,117,188,.07);border-color:rgba(28,117,188,.25)}
.funnel.b{background:rgba(23,152,179,.07);border-color:rgba(23,152,179,.25)}
.funnel.c{background:rgba(14,127,79,.07);border-color:rgba(14,127,79,.28)}
.funnel.d{background:rgba(122,95,208,.07);border-color:rgba(122,95,208,.25)}
@media (max-width:760px){
  .infographic__timeline{grid-auto-flow:row;gap:12px}
  .infographic__timeline::before{left:11px;right:auto;top:8%;bottom:8%;width:2px;height:auto}
  .timeline__point{text-align:left;padding:0 0 0 34px}
  .timeline__point i{top:2px;left:11px;transform:translateX(-50%)}
  .matrix__row{grid-template-columns:1.3fr repeat(var(--c,3),1fr)}
  .matrix__row em{padding:10px 12px;font-size:12.5px}
  .funnel{width:100% !important}
}

/* ── ig entrance choreography · staggered, gated by .is-visible (added by the
   existing reveal IntersectionObserver, since every .infographic carries .reveal) ── */
.infographic__gauges .gauge{opacity:0;transform:translateY(16px) scale(.95)}
.infographic__gauges.is-visible .gauge{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.infographic__gauges.is-visible .gauge:nth-child(1){transition-delay:.05s}
.infographic__gauges.is-visible .gauge:nth-child(2){transition-delay:.18s}
.infographic__gauges.is-visible .gauge:nth-child(3){transition-delay:.31s}
.infographic__gauges:not(.is-visible) .gauge .fl{stroke-dasharray:0 283 !important}
.infographic__gauges.is-visible .gauge .fl{transition:stroke-dasharray 1.2s cubic-bezier(.16,.8,.3,1) .15s}
.infographic__gauges.is-visible .gauge:nth-child(2) .fl{transition-delay:.28s}
.infographic__gauges.is-visible .gauge:nth-child(3) .fl{transition-delay:.41s}

.infographic__stack .band,.infographic__stack .infographic__stack-arrow{opacity:0;transform:translateY(14px)}
.infographic__stack.is-visible .band,.infographic__stack.is-visible .infographic__stack-arrow{opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
.infographic__stack.is-visible .band:nth-child(1){transition-delay:.05s}
.infographic__stack.is-visible .infographic__stack-arrow:nth-of-type(1){transition-delay:.26s}
.infographic__stack.is-visible .band:nth-child(3){transition-delay:.36s}
.infographic__stack.is-visible .infographic__stack-arrow:nth-of-type(2){transition-delay:.57s}
.infographic__stack.is-visible .band:nth-child(5){transition-delay:.67s}

.infographic__timeline::before{transform:scaleX(0);transform-origin:left center}
.infographic__timeline.is-visible::before{transform:scaleX(1);
  transition:transform 1s cubic-bezier(.16,.8,.3,1) .05s}
.infographic__timeline .timeline__point{opacity:0;transform:translateY(14px)}
.infographic__timeline.is-visible .timeline__point{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.infographic__timeline.is-visible .timeline__point:nth-child(2){transition-delay:.16s}
.infographic__timeline.is-visible .timeline__point:nth-child(3){transition-delay:.32s}
.infographic__timeline.is-visible .timeline__point:nth-child(4){transition-delay:.48s}
.infographic__timeline.is-visible .timeline__point:nth-child(5){transition-delay:.64s}
@media (max-width:760px){
  .infographic__timeline::before{transform:scaleY(0);transform-origin:top center}
  .infographic__timeline.is-visible::before{transform:scaleY(1)}
}

.infographic__matrix .matrix__row{opacity:0;transform:translateX(-12px)}
.infographic__matrix .matrix__row.head{opacity:1;transform:none}
.infographic__matrix.is-visible .matrix__row{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.infographic__matrix.is-visible .matrix__row:nth-child(2){transition-delay:.1s}
.infographic__matrix.is-visible .matrix__row:nth-child(3){transition-delay:.2s}
.infographic__matrix.is-visible .matrix__row:nth-child(4){transition-delay:.3s}
.infographic__matrix.is-visible .matrix__row:nth-child(5){transition-delay:.4s}

.infographic__funnel .funnel{opacity:0;transform:scaleX(.85)}
.infographic__funnel.is-visible .funnel{opacity:1;transform:scaleX(1);
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,.8,.3,1)}
.infographic__funnel.is-visible .funnel:nth-child(1){transition-delay:.05s}
.infographic__funnel.is-visible .funnel:nth-child(2){transition-delay:.18s}
.infographic__funnel.is-visible .funnel:nth-child(3){transition-delay:.31s}
.infographic__funnel.is-visible .funnel:nth-child(4){transition-delay:.44s}

.infographic__bars:not(.is-visible) .fill{width:0 !important}
.infographic__bars.is-visible .fill{transition:width 1.1s cubic-bezier(.16,.8,.3,1)}
.infographic__bars.is-visible .infographic__bar:nth-child(1) .fill{transition-delay:.1s}
.infographic__bars.is-visible .infographic__bar:nth-child(2) .fill{transition-delay:.25s}
.infographic__bars.is-visible .infographic__bar:nth-child(3) .fill{transition-delay:.4s}

.infographic__compare .side{opacity:0;transform:translateY(14px)}
.infographic__compare.is-visible .side{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
.infographic__compare.is-visible .from{transition-delay:.05s}
.infographic__compare.is-visible .to{transition-delay:.2s}
.infographic__compare .infographic__compare-arrow{opacity:0}
.infographic__compare.is-visible .infographic__compare-arrow{opacity:1;transition:opacity .5s ease .32s}

/* ── orbit infographic · logo hub, spinning ring, drawn connectors ──── */
.infographic__orbitm .orbit__ring{opacity:0;transform:scale(.7)}
.infographic__orbitm.is-visible .orbit__ring{opacity:1;transform:scale(1);
  transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.56,.64,1);
  animation:omRingSpin 48s linear infinite;animation-play-state:paused}
.infographic__orbitm.is-visible .orbit__ring{animation-play-state:running}
@keyframes omRingSpin{to{transform:rotate(360deg) scale(1)}}
.orbit__c{opacity:0;transform:translate(-50%,-50%) scale(.55)}
.infographic__orbitm.is-visible .orbit__c{opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:opacity .5s ease .08s,transform .5s cubic-bezier(.34,1.56,.64,1) .08s}
.infographic__orbitm.is-visible .orbit__c{animation:omPulse 3.4s ease-in-out .7s infinite}
@keyframes omPulse{
  0%,100%{box-shadow:0 14px 34px rgba(9,26,32,.3),0 0 0 0 rgba(124,217,234,.28)}
  50%{box-shadow:0 14px 34px rgba(9,26,32,.3),0 0 0 12px rgba(124,217,234,0)}
}
.orbit__c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.orbit__logo{display:block;flex:none;width:34px;height:34px;margin-bottom:2px;
  filter:drop-shadow(0 0 8px rgba(124,217,234,.4))}
.orbit__logo svg{width:100%;height:100%;display:block}
@media (max-width:520px){.orbit__logo{width:26px;height:26px}}
.orbit__sat::before{content:"";position:absolute;left:50%;top:50%;width:2px;height:38%;
  background:linear-gradient(180deg,rgba(124,217,234,0),rgba(124,217,234,.6));
  transform:translateX(-50%) scaleY(0);transform-origin:top center}
.infographic__orbitm.is-visible .orbit__sat::before{transform:translateX(-50%) scaleY(1);
  transition:transform .5s cubic-bezier(.16,.8,.3,1)}
.infographic__orbitm.is-visible .orbit__sat:nth-of-type(1)::before{transition-delay:.16s}
.infographic__orbitm.is-visible .orbit__sat:nth-of-type(2)::before{transition-delay:.26s}
.infographic__orbitm.is-visible .orbit__sat:nth-of-type(3)::before{transition-delay:.36s}
.infographic__orbitm.is-visible .orbit__sat:nth-of-type(4)::before{transition-delay:.46s}
.infographic__orbitm.is-visible .orbit__sat:nth-of-type(5)::before{transition-delay:.56s}
.infographic__orbitm.is-visible .orbit__sat:nth-of-type(6)::before{transition-delay:.66s}
.orbit__sat .orbit__s{opacity:0;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a))) scale(.4)}
.infographic__orbitm.is-visible .orbit__sat .orbit__s{opacity:1;
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a))) scale(1);
  transition:opacity .5s cubic-bezier(.34,1.56,.64,1),transform .5s cubic-bezier(.34,1.56,.64,1)}
.infographic__orbitm.is-visible .orbit__sat:nth-of-type(1) .orbit__s{transition-delay:.3s}
.infographic__orbitm.is-visible .orbit__sat:nth-of-type(2) .orbit__s{transition-delay:.4s}
.infographic__orbitm.is-visible .orbit__sat:nth-of-type(3) .orbit__s{transition-delay:.5s}
.infographic__orbitm.is-visible .orbit__sat:nth-of-type(4) .orbit__s{transition-delay:.6s}
.infographic__orbitm.is-visible .orbit__sat:nth-of-type(5) .orbit__s{transition-delay:.7s}
.infographic__orbitm.is-visible .orbit__sat:nth-of-type(6) .orbit__s{transition-delay:.8s}
.orbit__s{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.infographic__orbitm.is-visible .orbit__sat:hover .orbit__s{border-color:rgba(124,217,234,.55);
  box-shadow:0 10px 24px rgba(20,45,38,.2);
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a))) scale(1.08)}


/* ═══ styles/18-audience-pages.css ═══════════════════════════════════════════ */
/* ══ 18-audience-pages ══════════════════════════════════════════════════════
   MSP / GSI / Enterprise page blocks: proof, capability, mesh, flowband.
   Blocks: .behind, .capability, .flowband, .gain, .gains, .infographic, .mesh, .orbit, .overlay
   ══════════════════════════════════════════════════════════════ */
/* ── audience subpages: overlay-window identity extended ──────── */
.page-hero.page-hero--mesh{isolation:isolate}
.page-hero.page-hero--mesh .bento__mesh{z-index:-1}
.page-hero.page-hero--mesh .bento__mesh::after{content:"";position:absolute;inset:0;
  background:radial-gradient(74% 66% at 50% 26%,rgba(255,255,255,.92),rgba(255,255,255,.5) 52%,transparent 76%)}
/* MSP hero = the MSP bento card: green→teal→blue sweeping the bottom, cyan whisper top-left */
.mesh--msp .bento__mesh .a{width:max(40%,360px);left:-10%;bottom:-38%;background:rgba(55,214,122,0.28);animation-name:mdriftA;animation-duration:19s}
.mesh--msp .bento__mesh .b{width:max(44%,400px);left:30%;bottom:-44%;background:rgba(23,179,154,0.25);animation-name:mdriftB;animation-duration:24s}
.mesh--msp .bento__mesh .c{width:max(38%,340px);right:-12%;bottom:-30%;background:rgba(28,117,188,0.23);animation-name:mdriftC;animation-duration:16s}
.mesh--msp .bento__mesh .d{width:max(26%,220px);left:-8%;top:-26%;background:rgba(124,217,234,0.17);animation-name:mdriftB;animation-duration:21s}
/* GSI hero = the GSI bento card: rose/sand/green hugging the right edge only */
.page-hero.mesh--gsi{background:linear-gradient(150deg,#EEF4F2 0%,#E6EEED 45%,#E0EAEA 100%)}   /* lighter base (owner, 2026-09-04) */
.mesh--gsi .bento__mesh .a{width:max(42%,380px);right:-12%;top:-20%;background:rgba(226,108,90,0.26);animation-name:mdriftB;animation-duration:18s}
.mesh--gsi .bento__mesh .b{width:max(36%,320px);right:-14%;top:40%;background:rgba(233,183,66,0.23);animation-name:mdriftA;animation-duration:22s}
.mesh--gsi .bento__mesh .c{width:max(42%,380px);right:-8%;bottom:-28%;background:rgba(28,168,116,0.25);animation-name:mdriftC;animation-duration:15s}
.mesh--gsi .bento__mesh .d{width:max(30%,260px);left:-10%;bottom:-24%;background:rgba(23,120,152,0.18);animation-name:mdriftB;animation-duration:20s;display:block}
.mesh--gsi .bento__mesh::after{background:radial-gradient(58% 62% at 34% 42%,rgba(255,255,255,.88),rgba(255,255,255,.34) 48%,transparent 72%)}
/* Enterprise hero = the enterprise bento card: coral→amber→yellow up top, teal wave + blue below */
.mesh--ent .bento__mesh .a{width:max(22%,220px);left:-6%;top:-30%;background:rgba(240,119,107,0.24);animation-name:mdriftA;animation-duration:19s}
.mesh--ent .bento__mesh .b{width:max(22%,220px);left:30%;top:-34%;background:rgba(245,165,76,0.22);animation-name:mdriftB;animation-duration:16s}
.mesh--ent .bento__mesh .c{width:max(36%,340px);left:22%;bottom:-46%;background:rgba(23,179,154,0.25);animation-name:mdriftB;animation-duration:25s}
.mesh--ent .bento__mesh .d{width:max(24%,240px);right:-8%;bottom:-30%;background:rgba(28,117,188,0.24);animation-name:mdriftA;animation-duration:18s}
.mesh--ent .bento__mesh::after{background:radial-gradient(66% 72% at 42% 40%,rgba(255,255,255,.92),rgba(255,255,255,.52) 54%,transparent 78%)}
/* hero eyebrow becomes a visible badge (extra specificity: the subpage block
   later in the file paints eyebrows in the page accent, which washes out) */
section.page-hero .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;
  color:color-mix(in srgb,var(--accent,#1C75BC) 45%,#14323C);
  background:rgba(255,255,255,.72);border:1px solid var(--line2);
  border-radius:999px;padding:9px 18px;backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(20,45,38,.08)}
section.page-hero .eyebrow::before{width:26px}
/* the proven strip, at full volume */
.proofstrip.proofstrip--big{padding:18px 24px;border-radius:16px;gap:16px}
.proofstrip.proofstrip--big i{font-size:10.5px;padding:5px 13px}
.proofstrip.proofstrip--big span{font-size:15.5px;color:#DCE9E4}
.proofstrip.proofstrip--big b{font-family:var(--display);font-size:21px;letter-spacing:-.01em;color:#7CD9EA;
  text-shadow:0 0 14px rgba(124,217,234,.55)}
.proofstrip.proofstrip--big b+b{color:#5AE6A8;text-shadow:0 0 14px rgba(90,230,168,.55)}
/* numbered revenue plays */
.overlay__plays.overlay__plays--num .overlay__play{position:relative;padding-top:44px;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.overlay__plays.overlay__plays--num .overlay__play:hover{transform:translateY(-3px);border-color:rgba(28,117,188,.4);
  box-shadow:0 18px 40px rgba(20,45,38,.13)}
.overlay__play .proof__num{position:absolute;top:16px;left:18px;font-family:var(--mono);font-size:11px;
  font-weight:700;letter-spacing:.08em;color:var(--blue)}
.overlay__play .proof__tag{position:absolute;top:12px;right:14px;font-family:var(--mono);font-size:9.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid;
  border-radius:6px;padding:3px 9px}
.overlay__play .proof__tag.g{color:#0E7F4F;border-color:rgba(14,127,79,.4)}
.overlay__play .proof__tag.y{color:#B77E1B;border-color:rgba(183,126,27,.4)}
.overlay__play .proof__tag.v{color:#6A4FC9;border-color:rgba(106,79,201,.4)}
.overlay__play .proof__tag.b{color:#1C75BC;border-color:rgba(28,117,188,.4)}
/* the intelligence layer, as a real diagram */
.infographic__stack2{display:flex;flex-direction:column;max-width:860px;margin-inline:auto}
.flowband{border:1px solid var(--line);border-radius:16px;background:var(--panel);
  padding:18px 22px 20px;text-align:center;box-shadow:0 12px 30px rgba(20,45,38,.07)}
.flowband>em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  margin-bottom:12px}
.flowband__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.flowband__chips span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--ink);background:var(--panel2);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;white-space:nowrap}
.flowband__chips svg{width:15px;height:15px;fill:none;stroke:var(--blue);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.flowband.core{background:linear-gradient(180deg,#12303B,#0C222B);
  border-color:rgba(124,217,234,.35);
  box-shadow:0 18px 44px rgba(9,26,32,.35),0 0 0 1px rgba(124,217,234,.12)}
.flowband.core>em{color:#7CD9EA}
.flowband.core .flowband__chips span{color:#DDEEF3;background:rgba(124,217,234,.09);
  border-color:rgba(124,217,234,.3)}
.flowband.core .flowband__chips svg{stroke:#7CD9EA}
.flowband__arrow{align-self:center;display:flex;flex-direction:column;align-items:center;
  height:34px;justify-content:center;position:relative}
.flowband__arrow i{width:2px;height:100%;
  background:repeating-linear-gradient(180deg,var(--blue) 0 4px,transparent 4px 9px);
  animation:s2flow 1.1s linear infinite;opacity:.75}
@keyframes s2flow{to{transform:translateY(9px)}}
.flowband__arrow::after{content:"";position:absolute;bottom:-1px;border:5px solid transparent;
  border-top:7px solid var(--blue);opacity:.85}
/* one pane, every client — the live orbit */
.infographic__orbitm.is-live .orbit__c{width:38%;background:linear-gradient(180deg,#12303B,#0C222B);
  box-shadow:0 18px 44px rgba(9,26,32,.4),0 0 34px rgba(23,152,179,.35)}
.infographic__orbitm.is-live .orbit__c .logo-mark{width:34px;height:34px;margin-bottom:2px}
.orbit__l{position:absolute;left:50%;top:50%;width:2px;height:29%;
  transform-origin:top center;transform:rotate(calc(var(--a) + 180deg));
  background:linear-gradient(180deg,rgba(23,152,179,.05),rgba(23,152,179,.5));
  animation:omSpoke 7.2s ease-in-out infinite;animation-delay:var(--dd)}
@keyframes omSpoke{0%,10%{opacity:1;filter:drop-shadow(0 0 6px rgba(124,217,234,.9))}
  14%,100%{opacity:.35;filter:none}}
.infographic__orbitm.is-live .orbit__sat{pointer-events:none}
.infographic__orbitm.is-live .orbit__sat .orbit__s{opacity:1;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  animation:omGlow 7.2s ease-in-out infinite;animation-delay:var(--dd)}
@keyframes omGlow{0%,10%{border-color:var(--cyan);color:var(--ink);
    box-shadow:0 0 0 3px rgba(23,152,179,.14),0 10px 24px rgba(20,45,38,.14)}
  14%,100%{border-color:var(--line);box-shadow:0 6px 16px rgba(20,45,38,.08)}}
@media (prefers-reduced-motion:reduce){
  .flowband__arrow i,.orbit__l,.infographic__orbitm.is-live .orbit__s{animation:none}}
/* keyword highlights on audience pages */
.overlay__pains li b,.overlay__play p b{font-weight:700;color:var(--ink)}
.overlay__pains.overlay__pains--versus li b{font-weight:700;letter-spacing:-.005em}
.overlay__play b .highlight--green,.overlay__pains .highlight--green,b.highlight--green{color:#0E7F4F}
b.highlight--yellow{color:#B77E1B}b.highlight--violet{color:#6A4FC9}b.highlight--blue{color:#1C75BC}

/* ── pains vs demands, with icons and a transition between them ── */
.overlay__pains.overlay__pains--versus{display:grid;grid-template-columns:1fr auto 1fr;gap:38px;align-items:start;
  max-width:1160px;margin-inline:auto}
.overlay__pains.overlay__pains--versus ul{gap:16px}
.overlay__pains.overlay__pains--versus li{display:flex;align-items:flex-start;gap:16px;padding-left:0;
  font-size:16.5px;line-height:1.5;color:var(--muted)}
.overlay__pains.overlay__pains--versus li::before{display:none}
.overlay__pains.overlay__pains--versus em{font-size:11.5px;letter-spacing:.16em;margin-bottom:18px}
.overlay__pains .proofstrip__icon{flex:0 0 42px;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  margin-top:-3px}
.overlay__pains .proofstrip__icon svg{width:23px;height:23px;fill:none;stroke-width:1.75;stroke-linecap:round;
  stroke-linejoin:round}
.overlay__pains div:first-child .proofstrip__icon{background:rgba(225,75,95,.13);
  border:1px solid rgba(194,69,69,.22)}
.overlay__pains div:first-child .proofstrip__icon svg{stroke:#C24545}
.overlay__pains div:last-child .proofstrip__icon{background:rgba(14,127,79,.13);
  border:1px solid rgba(14,127,79,.22)}
.overlay__pains div:last-child .proofstrip__icon svg{stroke:#0E7F4F}
.versus__bridge{align-self:center;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:0 4px}
.versus__bridge b{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);writing-mode:vertical-rl;transform:rotate(180deg)}
.versus__bridge i{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#12303B,#0C222B);border:1px solid rgba(124,217,234,.35);
  box-shadow:0 12px 28px rgba(9,26,32,.28);color:#7CD9EA;font-style:normal;font-size:23px}
.versus__bridge s{display:block;width:2px;height:52px;text-decoration:none;
  background:repeating-linear-gradient(180deg,var(--line2) 0 4px,transparent 4px 9px)}
/* ── gain cards with a prominent figure ───────────────────────── */
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1060px;margin-inline:auto}
.gain{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--panel);
  padding:26px 24px 24px;box-shadow:0 12px 30px rgba(20,45,38,.07);
  transition:transform .25s,border-color .25s,box-shadow .25s}
.gain:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(20,45,38,.13)}
.gain>i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;margin-bottom:16px}
.gain>i svg{width:22px;height:22px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gain>b{display:block;font-family:var(--display);font-size:clamp(34px,3.6vw,46px);font-weight:700;
  letter-spacing:-.03em;line-height:1}
.gain>em{display:block;font-style:normal;margin:8px 0 10px;font-size:16px;font-weight:700;color:var(--ink)}
.gain>p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.gain>p b{color:var(--ink)}
.gain.g{border-top:3px solid #0E7F4F}
.gain.g>b{color:#0E7F4F}.gain.g>i{background:rgba(14,127,79,.1)}.gain.g>i svg{stroke:#0E7F4F}
.gain.y{border-top:3px solid #B77E1B}
.gain.y>b{color:#B77E1B}.gain.y>i{background:rgba(183,126,27,.1)}.gain.y>i svg{stroke:#B77E1B}
.gain.v{border-top:3px solid #6A4FC9}
.gain.v>b{color:#6A4FC9}.gain.v>i{background:rgba(106,79,201,.1)}.gain.v>i svg{stroke:#6A4FC9}
/* on a dark band the gains invert */
.section.section--dark .gain{background:linear-gradient(180deg,rgba(24,22,48,.94),rgba(12,10,26,.96));
  border-color:rgba(139,92,246,.24);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.section.section--dark .gain>em{color:#F2FAF7}
.section.section--dark .gain>p{color:#B7BFD2}
.section.section--dark .gain>p b{color:#FFF}
.section.section--dark .gain.g>b{color:#4BF39F;text-shadow:0 0 18px rgba(75,243,159,.4)}
.section.section--dark .gain.y>b{color:#FFE06A;text-shadow:0 0 18px rgba(255,224,106,.35)}
.section.section--dark .gain.v>b{color:#C9B8FF;text-shadow:0 0 18px rgba(139,92,246,.4)}
.section.section--dark .gain.g>i{background:rgba(75,243,159,.12)}.section.section--dark .gain.g>i svg{stroke:#4BF39F}
.section.section--dark .gain.y>i{background:rgba(255,224,106,.12)}.section.section--dark .gain.y>i svg{stroke:#FFE06A}
.section.section--dark .gain.v>i{background:rgba(139,92,246,.16)}.section.section--dark .gain.v>i svg{stroke:#C9B8FF}
.section.section--dark .funnel{background:rgba(24,22,48,.85);border-color:rgba(139,92,246,.3)}
.section.section--dark .funnel b{color:#F2FAF7}
.section.section--dark .funnel span{color:#A9B4C6}
.section.section--dark .funnel.a{background:rgba(28,117,188,.16);border-color:rgba(90,169,255,.4)}
.section.section--dark .funnel.b{background:rgba(23,152,179,.16);border-color:rgba(124,217,234,.4)}
.section.section--dark .funnel.c{background:rgba(14,127,79,.18);border-color:rgba(75,243,159,.4)}
.section.section--dark .funnel.d{background:rgba(122,95,208,.18);border-color:rgba(201,184,255,.4)}
.section.section--dark .flownote{color:#9AA6B8}
.section.section--dark .infographic__timeline::before{opacity:.6}
.section.section--dark .timeline__point b{color:#F2FAF7}
.section.section--dark .timeline__point span{color:#A9B4C6}
.section.section--dark .timeline__point i{background:#141227}
.section.section--dark .infographic__bar em{color:#A9B4C6}
.section.section--dark .infographic__bar b{color:#F2FAF7}
.section.section--dark .infographic__bar .track{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
@media (max-width:860px){
  .overlay__pains.overlay__pains--versus{grid-template-columns:1fr;gap:24px}
  .overlay__pains.overlay__pains--versus li{font-size:15px;gap:13px}
  .overlay__pains .proofstrip__icon{flex:0 0 36px;width:36px;height:36px;border-radius:11px}
  .overlay__pains .proofstrip__icon svg{width:20px;height:20px}
  .versus__bridge i{width:48px;height:48px;font-size:20px}
  .versus__bridge{flex-direction:row;justify-self:center}
  .versus__bridge b{writing-mode:horizontal-tb;transform:none}
  .versus__bridge s{width:52px;height:2px;
    background:repeating-linear-gradient(90deg,var(--line2) 0 4px,transparent 4px 9px)}
  .gains{grid-template-columns:1fr}
}

/* ── capability grid infographic (CCoE) ───────────────────────── */
.capability__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1120px;margin-inline:auto}
.capability__card{position:relative;border:1px solid var(--line);border-top:3px solid var(--a,#1C75BC);
  border-radius:16px;background:var(--panel);padding:22px 20px 20px;
  box-shadow:0 12px 30px rgba(20,45,38,.07);
  transition:transform .25s,border-color .25s,box-shadow .25s}
.capability__card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(20,45,38,.14)}
.capability__card>i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  margin-bottom:14px;background:color-mix(in srgb,var(--a,#1C75BC) 12%,transparent)}
.capability__card>i svg{width:21px;height:21px;fill:none;stroke:var(--a,#1C75BC);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.capability__card>b{display:block;font-size:15px;color:var(--ink);line-height:1.25}
.capability__card>p{margin:7px 0 0;font-size:12.8px;line-height:1.5;color:var(--muted)}
.capability__card>p b{color:var(--ink);font-weight:700}
.capability__card>p b.k{color:var(--a,#1C75BC)}
/* ── iconic proof strip ───────────────────────────────────────── */
.proof__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin-inline:auto}
.proof__card{text-align:center;border:1px solid var(--line);border-radius:18px;background:var(--panel);
  padding:28px 22px 24px;box-shadow:0 12px 30px rgba(20,45,38,.07)}
.proof__card>i{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  margin:0 auto 14px;background:color-mix(in srgb,var(--a,#1C75BC) 12%,transparent)}
.proof__card>i svg{width:26px;height:26px;fill:none;stroke:var(--a,#1C75BC);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.proof__card>b{display:block;font-family:var(--display);font-size:clamp(30px,3.2vw,42px);font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--a,#1C75BC)}
.proof__card>em{display:block;font-style:normal;margin:9px 0 5px;font-size:15px;font-weight:700;color:var(--ink)}
.proof__card>span{display:block;font-size:12.8px;color:var(--muted)}
/* behind-every-request icon rail */
.behind{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1000px;
  margin:26px auto 0}
.behind span{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;box-shadow:0 8px 20px rgba(20,45,38,.06)}
.behind svg{width:16px;height:16px;fill:none;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round;stroke:var(--k,#1C75BC);flex:0 0 auto}
.section.section--dark .capability__card,.section.section--dark .proof__card,.section.section--dark .behind span{
  background:linear-gradient(180deg,rgba(20,26,44,.94),rgba(10,14,26,.96));
  border-color:rgba(124,217,234,.2);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.section.section--dark .capability__card>b,.section.section--dark .proof__card>em,.section.section--dark .behind span{color:#F2FAF7}
.section.section--dark .capability__card>p,.section.section--dark .proof__card>span{color:#A9B4C6}
.section.section--dark .capability__card>p b{color:#FFF}
/* keep each card's accent on its keywords, lifted for the dark ground */
.section.section--dark .capability__card>p b.k{color:color-mix(in srgb,var(--a,#1C75BC) 55%,#F2F7FF)}
.section.section--dark .capability__card{border-top-color:color-mix(in srgb,var(--a,#1C75BC) 68%,#EAF2FF)}
.section.section--dark .capability__card>i{background:color-mix(in srgb,var(--a,#1C75BC) 22%,transparent)}
.section.section--dark .capability__card>i svg{stroke:color-mix(in srgb,var(--a,#1C75BC) 55%,#F2F7FF)}

/* ═══ styles/19-enterprise-field.css ═══════════════════════════════════════════ */
/* ══ 19-enterprise-field ══════════════════════════════════════════════════════
   Enterprise page background field.
   Blocks: —
   ══════════════════════════════════════════════════════════════ */
/* ── enterprise page: a vivid Stripe field, not a white sheet ─── */
body.pg-ent{background:
  radial-gradient(1100px 640px at 4% -6%,rgba(240,119,107,.20),transparent 62%),
  radial-gradient(1000px 620px at 96% 4%,rgba(245,175,86,.18),transparent 62%),
  radial-gradient(1200px 760px at 20% 48%,rgba(23,179,154,.18),transparent 62%),
  radial-gradient(1100px 700px at 88% 74%,rgba(28,117,188,.20),transparent 62%),
  linear-gradient(180deg,#E9F1EF,#DCE8E9 55%,#D6E4E8 100%)}
body.pg-ent .section:not(.section--dark),body.pg-ent .section.section--alt{background:transparent}
body.pg-ent .section.section--alt{border-block:1px solid rgba(20,45,38,.07)}
body.pg-ent .capability__card,body.pg-ent .proof__card,body.pg-ent .behind span,body.pg-ent .bento__why.bento__why--big li{
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%)}
body.pg-ent .capability__card,body.pg-ent .proof__card{background:rgba(255,255,255,.72)}
body.pg-ent .behind span{background:rgba(255,255,255,.7)}
body.pg-ent .section.section--wash::before,body.pg-ent .section.section--wash::after{display:none}
@media (max-width:1080px){.capability__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.capability__grid,.proof__grid{grid-template-columns:1fr}}


/* ═══ styles/20-stat-visuals.css ═══════════════════════════════════════════ */
/* ══ 20-stat-visuals ══════════════════════════════════════════════════════
   One visual per headline stat: bloom, globe, timer, queue, tickets, leverage, day2, cmdb.
   Blocks: .backbone, .bbw, .bloom, .cmdb, .day2, .globe, .k-ai, .k-hu, .leverage
   ══════════════════════════════════════════════════════════════ */
/* ── 600+ on ONE platform: the phyllotaxis bloom ─────────────── */
.bbw{display:block;max-width:1180px;margin-inline:auto}
.backbone__stats.four{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 30px;margin-bottom:40px}
.viz__bloom{text-align:center}
.viz__bloom svg{width:min(400px,82%);height:auto}
.bloom__dot{fill:#8FDCEC;opacity:var(--o,.7);
  transform-box:fill-box;transform-origin:center}
/* the bloom grows outward from the core, once, when its chapter arrives */
.viz.is-on .bloom__dot{animation:blPop .5s cubic-bezier(.3,1.4,.4,1) both;animation-delay:var(--d)}
@keyframes blPop{from{opacity:0;transform:scale(0)}
  70%{opacity:var(--o,.7);transform:scale(1.5)}
  to{opacity:var(--o,.7);transform:scale(1)}}
.bloom__ring{fill:none;stroke:rgba(124,217,234,.45);stroke-width:1.2}
/* every few seconds the core beats — the platform is running, not parked */
.bloom__beat{fill:none;stroke:rgba(124,217,234,.55);stroke-width:1.2;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:blBeat 5s ease-out 2.4s infinite}
@keyframes blBeat{0%{transform:scale(1);opacity:.75}
  60%{transform:scale(5.2);opacity:0}100%{transform:scale(5.2);opacity:0}}
.bloom__core{stroke:rgba(124,217,234,.6);stroke-width:1.5;
  filter:drop-shadow(0 0 10px rgba(124,217,234,.55))}
.viz.is-on .bloom__core{animation:blCore .5s ease-out both}
@keyframes blCore{from{opacity:0}to{opacity:1}}
/* what the colours mean */
.matrix__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:16px}
.matrix__legend span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.07em;color:#8CA6AE;white-space:nowrap}
.matrix__legend i{width:10px;height:10px;border-radius:3px;flex:0 0 10px}
.lg-base i{background:#7CD9EA;opacity:.55}
/* the stage: one visual per metric, stacked so nothing reflows */
.mzstage{display:grid;min-height:352px;align-items:center}
.viz{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
.viz.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s ease}
/* ── 20+ countries: pins land on the planet, one per country ── */
.viz__globe{text-align:center}
.viz__globe svg{width:min(340px,74%);height:auto}
.globe__sphere{fill:none;stroke:rgba(124,217,234,.16);stroke-width:1}
.globe__dot{fill:rgba(124,217,234,.2)}
.globe__pin{fill:#FEE705;filter:drop-shadow(0 0 6px rgba(254,231,5,.85));
  transform-box:fill-box;transform-origin:center}
.viz.is-on .globe__pin{animation:glPop .5s cubic-bezier(.3,1.5,.4,1) both;animation-delay:var(--d)}
@keyframes glPop{from{opacity:0;transform:scale(0)}
  70%{opacity:1;transform:scale(1.45)}to{opacity:1;transform:scale(1)}}
.globe__ring{fill:none;stroke:#FEE705;stroke-width:1.2;opacity:0;
  transform-box:fill-box;transform-origin:center}
.viz.is-on .globe__ring{animation:glLand 1s ease-out both;animation-delay:calc(var(--d) + .3s)}
.globe__live{fill:none;stroke:#FEE705;stroke-width:1;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:glLive 6.4s ease-out infinite;animation-delay:calc(2.8s + var(--d))}
@keyframes glLive{0%{transform:scale(.7);opacity:.8}
  16%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
@keyframes glLand{from{opacity:.85;transform:scale(.6)}to{opacity:0;transform:scale(2.6)}}
/* ── 15 min: the quarter-hour literally closes ───────────────── */
.viz__timer{display:grid;gap:26px;max-width:640px;margin-inline:auto;padding:6px 0;justify-items:center}
.timer__ghost{display:flex;align-items:center;gap:14px;width:100%;max-width:560px}
.timer__ghost em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#B08080;flex:0 0 auto}
.timer__gbar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);overflow:hidden}
.timer__gbar b{display:block;height:100%;width:14%;border-radius:99px;
  background:linear-gradient(90deg,#8A4B4B,#C97070)}
.viz.is-on .timer__gbar b{animation:tmCreep 3.2s linear both}
@keyframes tmCreep{from{width:4%}to{width:14%}}
.timer__ghost span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#B08080;flex:0 0 auto}
.timer__main{display:flex;align-items:center;justify-content:center;gap:44px;flex-wrap:wrap}
.timer__clock{position:relative;width:170px}
.timer__clock svg{width:100%;height:auto;display:block}
.timer__tick{stroke:rgba(124,217,234,.3);stroke-width:1.6}
.timer__base{fill:none;stroke:rgba(255,255,255,.08);stroke-width:7}
.timer__ring{fill:none;stroke:#4BF39F;stroke-width:7;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:0;
  filter:drop-shadow(0 0 8px rgba(75,243,159,.5));
  transform:rotate(-90deg);transform-box:fill-box;transform-origin:center}
.viz.is-on .timer__ring{animation:tmSweep 3.2s cubic-bezier(.3,.1,.3,1) both}
@keyframes tmSweep{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.timer__mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.timer__mid b{font-family:var(--display);font-size:36px;line-height:1;color:#EAF7FB}
.timer__mid span{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:#7CD9EA;margin-top:3px}
.timer__steps{display:flex;flex-direction:column;gap:10px}
.timer__step{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:#CFE8DF;border:1px solid rgba(124,217,234,.35);border-radius:99px;padding:7px 16px;
  background:rgba(124,217,234,.07)}
.timer__step.fin{color:#06222C;border-color:#4BF39F;background:#4BF39F;font-weight:700}
/* one-shot: each stage snaps on at its moment, then stays */
.viz.is-on .timer__step{animation:tmOn .3s both;animation-delay:var(--d)}
.viz.is-on .timer__step.fin{animation:tmOn .3s both,tmLive 3.4s ease-in-out 3.6s infinite;
  animation-delay:var(--d),3.6s}
@keyframes tmLive{0%,100%{box-shadow:none}50%{box-shadow:0 0 18px rgba(75,243,159,.55)}}
@keyframes tmOn{from{color:#7E9AA3;border-color:rgba(124,217,234,.18);background:transparent;font-weight:400}
  to{}}
/* ── Zero: the queue that never forms ────────────────────────── */
.viz__queue{display:grid;gap:24px;max-width:800px;margin-inline:auto;padding:6px 0}
.queue__lane em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:11px}
.queue__lane.is-ghost em{color:#B08080}
.queue__lane.is-live em{color:#6FD9A8}
.queue__rail{position:relative;display:flex;align-items:center;gap:7px;height:44px;
  border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:0 14px;
  background:rgba(255,255,255,.03);overflow:hidden}
.queue__pile{display:flex;gap:5px}
.queue__stuck{width:13px;height:20px;border-radius:3px;background:#C97070;opacity:.55}
.viz.is-on .queue__stuck{animation:qPile .5s ease-out both;animation-delay:var(--d)}
@keyframes qPile{from{opacity:0;transform:translateX(-14px)}to{opacity:.55;transform:none}}
.queue__agent{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#B08080}
.queue__chip{position:absolute;left:-18px;width:13px;height:20px;border-radius:3px;background:#7CD9EA;
  box-shadow:0 0 8px rgba(124,217,234,.7);
  animation:qFly 4.4s linear infinite;animation-delay:var(--d)}
@keyframes qFly{0%{left:-18px;opacity:0}8%{opacity:1}
  62%{left:calc(100% - 190px);opacity:1;background:#7CD9EA}
  70%{left:calc(100% - 178px);opacity:1;background:#4BF39F;transform:scale(1.35)}
  78%,100%{left:calc(100% - 172px);opacity:0;transform:scale(.6)}}
.queue__node{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#4BF39F;border:1px solid rgba(75,243,159,.4);
  border-radius:99px;padding:5px 12px;background:rgba(75,243,159,.09)}
.queue__depth{display:flex;align-items:baseline;justify-content:center;gap:14px;margin-top:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8CA6AE}
.queue__depth b{font-family:var(--display);font-size:54px;line-height:1;color:#4BF39F;
  text-shadow:0 0 26px rgba(75,243,159,.45);animation:qBreathe 4.2s ease-in-out infinite}
@keyframes qBreathe{0%,100%{text-shadow:0 0 22px rgba(75,243,159,.4)}
  50%{text-shadow:0 0 44px rgba(75,243,159,.75)}}
@media (prefers-reduced-motion:reduce){
  .bloom__dot,.bloom__core,.bloom__beat,.globe__pin,.globe__ring,.globe__live,.timer__ring,.timer__step,
  .timer__gbar b,.queue__chip,.queue__stuck,.queue__depth b{animation:none}
}
@media (max-width:820px){
  .mzstage{min-height:300px}
  .timer__main{gap:26px}
  .timer__clock{width:136px}
  .queue__depth b{font-size:42px}
}
/* ── 60%+ : a hundred tickets, sorted ────────────────────────── */
.tickets{max-width:660px;margin-inline:auto;text-align:center}
.tickets__label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#8CA6AE}
.tickets__grid{display:grid;grid-template-columns:repeat(20,1fr);gap:6px;margin:16px 0 18px}
.tickets__cell{width:100%;aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.09);
  animation:vsFill 6s ease-in-out infinite;animation-delay:var(--d)}
.tickets__cell.tickets__cell--ai{--c:#4BF39F}.tickets__cell.tickets__cell--human{--c:#B79BFF}
@keyframes vsFill{0%,6%{background:rgba(255,255,255,.09);box-shadow:none}
  16%,86%{background:var(--c);box-shadow:0 0 6px color-mix(in srgb,var(--c) 60%,transparent)}
  96%,100%{background:rgba(255,255,255,.09);box-shadow:none}}
.tickets__key{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.tickets__key span{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:#A9BCC6}
.tickets__key i{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.tickets__key b{font-family:var(--display);font-size:16px;margin-right:3px}
.k-ai i{background:#4BF39F;box-shadow:0 0 7px rgba(75,243,159,.8)}.k-ai b{color:#4BF39F}
.k-hu i{background:#B79BFF;box-shadow:0 0 7px rgba(183,155,255,.8)}.k-hu b{color:#C9B8FF}
/* ── 3–5× : one engineer, then and now ───────────────────────── */
.viz__leverage{display:grid;gap:22px;max-width:720px;margin-inline:auto}
.leverage__row{display:flex;align-items:center;gap:16px;border-radius:14px;padding:16px 20px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
.leverage__row.is-live{border-color:rgba(75,243,159,.3);background:rgba(75,243,159,.06)}
.leverage__eng{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#8CA6AE;white-space:nowrap}
.leverage__arrow{color:#5F8B96;font-size:16px}
.leverage__set{display:flex;gap:7px}
.leverage__c{width:22px;height:28px;border-radius:5px;background:rgba(124,217,234,.22);
  border:1px solid rgba(124,217,234,.3)}
.leverage__row.is-live .leverage__c{background:rgba(75,243,159,.26);border-color:rgba(75,243,159,.45);
  animation:lvPop 4.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes lvPop{0%,8%{opacity:.25;transform:translateY(5px)}
  20%,88%{opacity:1;transform:none}100%{opacity:.25;transform:translateY(5px)}}
.leverage__lab{margin-left:auto;text-align:right}
.leverage__lab b{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.01em;color:#EAF2F5}
.leverage__row.is-live .leverage__lab b{color:#4BF39F}
.leverage__lab em{font-style:normal;font-size:12px;color:#8CA6AE}
/* ── Day 2+ : where it stops, and where it doesn't ───────────── */
.viz__day2{display:grid;gap:24px;max-width:760px;margin-inline:auto}
.day2__lane em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:11px}
.day2__lane.is-ghost em{color:#B08080}.day2__lane.is-live em{color:#6FD9A8}
.day2__track{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.day2__seg{flex:0 0 auto;border-radius:9px;padding:10px 16px;font-size:13px;font-weight:600;
  border:1px solid rgba(255,255,255,.12);color:#C6D2D8;background:rgba(255,255,255,.04);
  animation:d2On 5s ease-in-out infinite;animation-delay:var(--d)}
.day2__lane.is-live .day2__seg{border-color:rgba(75,243,159,.3)}
@keyframes d2On{0%,6%{opacity:.35}18%,90%{opacity:1}100%{opacity:.35}}
.day2__end{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#C97070;border:1px dashed rgba(201,112,112,.5);border-radius:99px;padding:8px 14px}
.day2__on{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:#06222C;background:#4BF39F;
  border-radius:99px;padding:8px 14px}
.day2__on i{width:6px;height:6px;border-radius:50%;background:#06222C;
  animation:d2Beat 1.3s ease-in-out infinite}
@keyframes d2Beat{0%,100%{opacity:.3}50%{opacity:1}}
/* ── 500+ : the living CMDB — symptom → trace → root cause ───── */
.viz__cmdb{text-align:center}
.viz__cmdb svg{width:min(560px,92%);height:auto}
.cmdb__e{stroke:rgba(124,217,234,.16);stroke-width:1.2}
.cmdb__lay{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;fill:#5E8794}
.cmdb__n{fill:#0D2833;stroke:rgba(124,217,234,.5);stroke-width:1.4}
.cmdb__lb{font-family:var(--mono);font-size:9px;letter-spacing:.06em}
.cmdb__lb.sym{fill:#FFD98A}
.cmdb__lb.root{fill:#4BF39F}
/* base = the story told, standing still (this is the reduced-motion frame) */
.cmdb__sym{fill:#3A2E12;stroke:#FFE06A;stroke-width:1.8}
.cmdb__tr{stroke:#4BF39F;stroke-width:2;stroke-dasharray:100;stroke-dashoffset:0;
  filter:drop-shadow(0 0 4px rgba(75,243,159,.5))}
.cmdb__root{fill:#0E3A26;stroke:#4BF39F;stroke-width:2}
.cmdb__ring{fill:none;stroke:rgba(75,243,159,.55);stroke-width:1.4}
/* the loop: calm → symptom flares → trace draws down → root flips green */
.cmdb__sym{animation:cmSym 8s ease-in-out infinite}
@keyframes cmSym{
  0%,8%{fill:#0D2833;stroke:rgba(124,217,234,.5);stroke-width:1.4}
  13%,50%{fill:#3A2E12;stroke:#FFE06A;stroke-width:1.8}
  60%,84%{fill:#0E3A26;stroke:#4BF39F;stroke-width:1.6}
  92%,100%{fill:#0D2833;stroke:rgba(124,217,234,.5);stroke-width:1.4}}
.cmdb__tr{animation:cmTr 8s ease-in-out infinite;animation-delay:var(--d)}
@keyframes cmTr{
  0%,14%{stroke-dashoffset:100;opacity:0}
  15%{opacity:1}
  26%,72%{stroke-dashoffset:0;opacity:1}
  80%,100%{stroke-dashoffset:100;opacity:0}}
.cmdb__root{animation:cmRoot 8s ease-in-out infinite}
@keyframes cmRoot{
  0%,34%{fill:#0D2833;stroke:rgba(124,217,234,.5);stroke-width:1.4}
  39%,48%{fill:#43201B;stroke:#FF9F7A;stroke-width:2}
  53%,86%{fill:#0E3A26;stroke:#4BF39F;stroke-width:2}
  94%,100%{fill:#0D2833;stroke:rgba(124,217,234,.5);stroke-width:1.4}}
.cmdb__ring{transform-origin:center;transform-box:fill-box;
  animation:cmRing 8s ease-out infinite}
@keyframes cmRing{
  0%,50%{transform:scale(1);opacity:0}
  53%{transform:scale(1);opacity:.9}
  70%{transform:scale(2.4);opacity:0}
  100%{transform:scale(2.4);opacity:0}}
.cmdb__lb.sym{animation:cmLbS 8s ease-in-out infinite}
@keyframes cmLbS{0%,10%{opacity:0}14%,58%{opacity:1}66%,100%{opacity:0}}
.cmdb__lb.root{animation:cmLbR 8s ease-in-out infinite}
@keyframes cmLbR{0%,50%{opacity:0}55%,88%{opacity:1}96%,100%{opacity:0}}
/* the deal compounds: year chips after Day 2 */
.day2__yr{flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:#6FD9A8;border:1px dashed rgba(75,243,159,.4);
  border-radius:99px;padding:7px 12px;
  animation:d2On 5s ease-in-out infinite;animation-delay:var(--d)}
@media (prefers-reduced-motion:reduce){
  .tickets__cell,.leverage__c,.day2__seg,.day2__yr,.day2__on i,
  .cmdb__sym,.cmdb__tr,.cmdb__root,.cmdb__ring,.cmdb__lb.sym,.cmdb__lb.root{animation:none}
  .tickets__cell.tickets__cell--ai{background:#4BF39F}.tickets__cell.tickets__cell--human{background:#B79BFF}}
@media (max-width:820px){
  /* 10×10 still reads as "a hundred", but cap the width or the cells balloon */
  .tickets__grid{grid-template-columns:repeat(10,1fr);gap:5px;max-width:330px;margin-inline:auto}
  .leverage__row{flex-wrap:wrap;gap:10px}
  .leverage__lab{margin-left:0;text-align:left;width:100%}
}
/* the caption follows the chapter */
.matrix__cap{position:relative;min-height:26px;margin-top:20px;text-align:center}
.matrix__cap span{position:absolute;left:0;right:0;font-family:var(--mono);font-size:12px;
  letter-spacing:.05em;color:#9DBBB4;opacity:0;transform:translateY(5px);
  transition:opacity .4s,transform .4s;pointer-events:none}
.matrix__cap span.is-on{opacity:1;transform:none}
/* the figures become the control */
.backbone__stat{display:block;width:100%;text-align:left;background:none;border:0;padding:0 0 0 15px;
  border-left:2px solid transparent;cursor:pointer;font:inherit;
  transition:border-color .35s,opacity .35s}
[data-lens] .backbone__stat:not(.is-on){opacity:.46}
[data-lens] .backbone__stat.is-on{opacity:1}
.backbone__stats.is-static .backbone__stat{cursor:default}
.backbone__stat.g.is-on{border-left-color:#4BF39F}
.backbone__stat.y.is-on{border-left-color:#FFE06A}
.backbone__stat.b.is-on{border-left-color:#8FC2FF}
.backbone__stat.v.is-on{border-left-color:#C9B8FF}
.backbone__stat:focus-visible{outline:2px solid #7CD9EA;outline-offset:6px;border-radius:6px}
/* the words that matter glow in the figure's own colour */
.backbone__stat span b{font-weight:700}
.backbone__stat.g span b{color:#4BF39F}
.backbone__stat.y span b{color:#FFE06A}
.backbone__stat.b span b{color:#8FC2FF}
.backbone__stat.v span b{color:#C9B8FF}
@media (max-width:900px){
  .backbone__stats.four{grid-template-columns:1fr 1fr;gap:26px 22px;margin-bottom:30px}
}


/* ═══ styles/21-backbone.css ═══════════════════════════════════════════ */
/* ══ 21-backbone ══════════════════════════════════════════════════════
   The backbone band — big stats plus its hub/spoke dataviz.
   Blocks: .backbone
   ══════════════════════════════════════════════════════════════ */
/* ── the backbone band (Stripe-inspired: big stats + a dataviz) ── */
.backbone{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  max-width:1160px;margin-inline:auto}
.backbone__stats{display:grid;grid-template-columns:1fr 1fr;gap:34px 30px}
.backbone__stat>b{display:block;font-family:var(--display);font-size:clamp(38px,4.4vw,58px);
  font-weight:700;letter-spacing:-.035em;line-height:1;color:#F2FAF7}
.backbone__stat>span{display:block;margin-top:9px;font-size:14px;line-height:1.5;color:#A9BCC6;max-width:24ch}
.backbone__stat.g>b{color:#4BF39F}.backbone__stat.y>b{color:#FFE06A}
.backbone__stat.b>b{color:#8FC2FF}.backbone__stat.v>b{color:#C9B8FF}
.backbone__viz{position:relative}
.backbone__viz svg{width:100%;height:auto;display:block;overflow:visible}
.backbone__viz .backbone__ring{fill:none;stroke:rgba(124,217,234,.18);stroke-dasharray:3 5}
.backbone__viz .backbone__spoke{stroke:rgba(124,217,234,.3);stroke-width:1.2}
.backbone__viz .backbone__arc{fill:none;stroke-width:2.4;stroke-linecap:round;opacity:.9}
.backbone__viz .backbone__node{fill:#0B1F2B;stroke-width:2}
.backbone__viz .backbone__pulse{fill:none;stroke:#7CD9EA;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:14 86;filter:drop-shadow(0 0 6px rgba(124,217,234,.9));
  animation:wireRun 3.4s linear infinite}
.backbone__viz .backbone__label{font-family:var(--mono);font-size:11px;fill:#9DBBB4;letter-spacing:.06em}
.backbone__viz .backbone__hub{fill:url(#bbHub);stroke:rgba(124,217,234,.5);stroke-width:1.5}
@media (max-width:900px){
  .backbone{grid-template-columns:1fr;gap:34px}
  .backbone__stats{gap:26px 22px}
}


/* ═══ styles/22-section-wash.css ═══════════════════════════════════════════ */
/* ══ 22-section-wash ══════════════════════════════════════════════════════
   Stripe/Notion-style section washes.
   Blocks: .section
   ══════════════════════════════════════════════════════════════ */
/* ── Stripe/Notion-style section washes (subpages) ────────────── */
.section.section--wash{position:relative;overflow:hidden;background:var(--bg)}
.section.section--wash>.container{position:relative;z-index:1}
.section.section--wash::before,.section.section--wash::after{content:"";position:absolute;pointer-events:none;
  border-radius:50%;filter:blur(70px)}
.section.section--wash::before{width:760px;height:520px;left:-12%;top:-24%;
  background:radial-gradient(circle,rgba(55,214,122,.20),transparent 68%)}
.section.section--wash::after{width:700px;height:520px;right:-14%;bottom:-28%;
  background:radial-gradient(circle,rgba(23,152,179,.20),transparent 68%)}
.section.section--wash.w2::before{background:radial-gradient(circle,rgba(28,117,188,.18),transparent 68%);
  left:auto;right:-14%;top:-26%}
.section.section--wash.w2::after{background:radial-gradient(circle,rgba(124,217,234,.22),transparent 68%);
  right:auto;left:-12%;bottom:-26%}
.section.section--wash.w3::before{width:820px;background:radial-gradient(circle,rgba(23,179,154,.18),transparent 68%);
  left:16%;top:-30%}
.section.section--wash.w3::after{width:640px;background:radial-gradient(circle,rgba(90,169,255,.16),transparent 68%);
  right:4%;bottom:-24%}
/* a hairline that reads as a deliberate seam, Stripe-style */
.section.section--wash+.section.section--wash{border-top:1px solid var(--line)}


/* ═══ styles/23-engine-condensed.css ═══════════════════════════════════════════ */
/* ══ 23-engine-condensed ══════════════════════════════════════════════════════
   Condensed engine stage used on subpages.
   Blocks: .enginemini
   ══════════════════════════════════════════════════════════════ */
/* ── condensed engine (subpages) — the homepage stage, MSP-flavoured ── */
.enginemini{container-type:inline-size;position:relative;margin:0 auto;max-width:1000px;
  aspect-ratio:1000/440;border-radius:24px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 100% at 50% 46%,#123243 0%,#0B1F2B 55%,#07161F 100%);
  border:1px solid rgba(124,217,234,.22);
  box-shadow:0 36px 90px rgba(6,20,25,.4)}
.enginemini .engine__dots{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(124,217,234,.16) 1px,transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(72% 68% at 50% 50%,#000 40%,transparent 100%);
  mask-image:radial-gradient(72% 68% at 50% 50%,#000 40%,transparent 100%)}
.enginemini svg.enginemini__wires{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  pointer-events:none}
.enginemini .enginemini__wire-base{stroke:rgba(124,217,234,.3);stroke-width:1.4;stroke-dasharray:2 3;fill:none}
.enginemini .enginemini__wire-fire{stroke:#7CD9EA;stroke-width:2.6;stroke-linecap:round;fill:none;
  stroke-dasharray:26 74;opacity:0;filter:drop-shadow(0 0 6px rgba(124,217,234,.95))}
.enginemini .enginemini__wire-fire.go{animation:fireRun .72s cubic-bezier(.32,0,.2,1) 1}
.enginemini__node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  z-index:2;font-size:13px}
@container (min-width:1px){.enginemini__node{font-size:1.35cqw}}
.enginemini__band{width:56%;border:1px solid rgba(124,217,234,.26);border-radius:1.4cqw;
  background:rgba(10,32,42,.82);padding:1.1cqw 1.4cqw;text-align:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.enginemini__band>em{display:block;font-style:normal;font-family:var(--mono);font-size:.8em;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6FA8B8;margin-bottom:.8cqw}
.enginemini__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.65cqw}
.enginemini__chips span{display:inline-flex;align-items:center;gap:.5cqw;font-size:.92em;font-weight:600;
  color:#DDEEF3;white-space:nowrap;background:rgba(124,217,234,.09);
  border:1px solid rgba(124,217,234,.26);border-radius:99px;padding:.4cqw 1cqw;
  transition:color .3s,border-color .3s,box-shadow .3s,background .3s}
.enginemini__chips svg,.enginemini__cap svg,.enginemini__t svg{width:1.5cqw;height:1.5cqw;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.enginemini__chips span.is-lit,.enginemini__cap.is-lit,.enginemini__t.is-lit{color:#FEE705;border-color:rgba(254,231,5,.6);
  box-shadow:0 0 1.3cqw rgba(254,231,5,.35)}
.enginemini__core{width:13%;aspect-ratio:1;display:grid;place-items:center;gap:.4cqw;
  border-radius:50%;background:linear-gradient(180deg,#17414F,#0A2029);
  border:1px solid rgba(124,217,234,.5);
  box-shadow:0 0 0 1px rgba(124,217,234,.16),0 1.4cqw 3cqw rgba(0,0,0,.5),0 0 4cqw rgba(23,152,179,.35);
  transition:box-shadow .35s,border-color .35s}
.enginemini__core.is-firing{border-color:rgba(254,231,5,.75);
  box-shadow:0 0 0 1px rgba(254,231,5,.35),0 1.4cqw 3cqw rgba(0,0,0,.5),0 0 6cqw rgba(254,231,5,.45)}
.enginemini__core .logo-mark{width:5cqw;height:5cqw;filter:drop-shadow(0 0 1cqw rgba(23,152,179,.55))}
.enginemini__core em{font-style:normal;font-family:var(--mono);font-size:.72em;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#7CD9EA;white-space:nowrap}
.enginemini__cap,.enginemini__t{display:inline-flex;align-items:center;gap:.55cqw;white-space:nowrap;
  font-weight:600;color:#CDE1DB;border:1px solid rgba(124,217,234,.24);border-radius:.8cqw;
  padding:.6cqw 1cqw;background:rgba(12,34,43,.92);
  transition:color .3s,border-color .3s,box-shadow .3s}
.enginemini__cap{color:#C9B8FF;border-color:rgba(139,92,246,.4)}
.enginemini__cap.is-lit{color:#FEE705;border-color:rgba(254,231,5,.6);box-shadow:0 0 1.3cqw rgba(254,231,5,.35)}
.enginemini__status{position:absolute;left:50%;bottom:3.4%;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:.6cqw;white-space:nowrap;
  font-family:var(--mono);font-size:1.05cqw;letter-spacing:.05em;color:#9DBBB4}
.enginemini__status i{width:.55cqw;height:.55cqw;border-radius:50%;background:#5AE6A8;
  box-shadow:0 0 .8cqw rgba(90,230,168,.9)}
.enginemini__status span{transition:opacity .18s}
.enginemini__status span.is-out{opacity:0}
@media (max-width:820px){
  .enginemini{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:12px;
    padding:24px 16px;container-type:normal}
  .enginemini svg.enginemini__wires,.enginemini .engine__dots{display:none}
  .enginemini__node{position:static;transform:none;font-size:12.5px;width:auto}
  .enginemini__band{width:100%;padding:14px;border-radius:14px}
  .enginemini__band>em{font-size:10px;margin-bottom:9px}
  .enginemini__chips span{padding:6px 12px;font-size:12px;gap:6px}
  .enginemini__chips svg,.enginemini__cap svg,.enginemini__t svg{width:14px;height:14px}
  .enginemini__core{width:112px;height:112px;gap:5px}
  .enginemini__core .logo-mark{width:46px;height:46px}
  .enginemini__core em{font-size:9px}
  .enginemini__cap,.enginemini__t{padding:8px 13px;border-radius:10px;font-size:12px}
  .enginemini__caps-row{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
  .enginemini__status{position:static;transform:none;font-size:11px}
  .enginemini__status i{width:6px;height:6px}
}

/* ═══ styles/24-dark-band.css ═══════════════════════════════════════════ */
/* ══ 24-dark-band ══════════════════════════════════════════════════════
   Dark band sections on subpages.
   Blocks: .section
   ══════════════════════════════════════════════════════════════ */
/* ── dark band section (subpages) ─────────────────────────────── */
/* solid band + sharp violet hairlines — same recipe as the homepage deck band.
   (the old 90px feather over the light page read as a grey halo at the edges) */
.section.section--dark{background:rgb(6,4,14);
  border-top:1px solid rgba(139,92,246,.32);border-bottom:1px solid rgba(139,92,246,.32);
  position:relative;overflow:clip}
.section.section--dark::before{content:"";position:absolute;width:600px;height:600px;left:12%;top:52%;
  pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(139,92,246,.13),transparent 70%)}
.section.section--dark::after{content:"";position:absolute;width:500px;height:500px;right:10%;top:14%;
  pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(93,95,239,.11),transparent 70%)}
.section.section--dark .container{position:relative;z-index:1}
/* adjacent dark sections read as one continuous chapter — drop the inner seam */
.section.section--dark:has(+ .section.section--dark){border-bottom:0}
.section.section--dark+.section.section--dark{border-top:0;margin-top:-1px;padding-top:40px}
.section.section--dark .section__head h2{color:#F2FAF7}
.section.section--dark .section__head p{color:#A9B4C6}
.section.section--dark .eyebrow{color:#A78BFA}
.section.section--dark .overlay__play{background:linear-gradient(180deg,rgba(24,22,48,.94),rgba(12,10,26,.96));
  border-color:rgba(139,92,246,.24);box-shadow:0 14px 34px rgba(0,0,0,.4);backdrop-filter:none}
.section.section--dark .overlay__play:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.55);
  box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 34px rgba(139,92,246,.18)}
.section.section--dark .overlay__play b{color:#F2FAF7}
.section.section--dark .overlay__play p{color:#B7BFD2}
.section.section--dark .overlay__play p b{color:#FFF}
.section.section--dark .overlay__play .proof__num{color:#A78BFA}
.section.section--dark .overlay__play .proof__tag.g{color:#4BF39F;border-color:rgba(75,243,159,.45)}
.section.section--dark .overlay__play .proof__tag.y{color:#FFE06A;border-color:rgba(255,224,106,.45)}
.section.section--dark .overlay__play .proof__tag.v{color:#C9B8FF;border-color:rgba(139,92,246,.5)}
.section.section--dark .overlay__play .proof__tag.b{color:#8FC2FF;border-color:rgba(90,169,255,.45)}
.section.section--dark .highlight--green{color:#4BF39F}

/* ═══ styles/25-client-orbit.css ═══════════════════════════════════════════ */
/* ══ 25-client-orbit ══════════════════════════════════════════════════════
   The client orbit visual.
   Blocks: .infographic
   ══════════════════════════════════════════════════════════════ */
/* ── the client orbit, properly dressed ───────────────────────── */
.infographic__orbitm.is-live{filter:drop-shadow(0 24px 50px rgba(20,45,38,.1))}
.infographic__orbitm.is-live::before{content:"";position:absolute;inset:-6%;border-radius:50%;
  background:radial-gradient(circle,rgba(23,152,179,.14) 0%,rgba(23,152,179,.05) 45%,transparent 68%);
  pointer-events:none}
.infographic__orbitm.is-live .orbit__ring{border-color:rgba(23,152,179,.28)}
.infographic__orbitm.is-live .orbit__c{background:
  radial-gradient(120% 120% at 30% 20%,rgba(35,92,110,.95),transparent 60%),
  linear-gradient(160deg,#123243,#08161E);
  border:1px solid rgba(124,217,234,.4);
  box-shadow:0 22px 50px rgba(9,26,32,.45),0 0 44px rgba(23,152,179,.4),
    inset 0 1px 0 rgba(255,255,255,.1)}
.infographic__orbitm.is-live .orbit__l{background:linear-gradient(180deg,rgba(23,152,179,0),rgba(23,152,179,.55))}
.infographic__orbitm.is-live .orbit__sat .orbit__s{background:linear-gradient(180deg,#fff,#F3F8F7);
  border:1px solid rgba(20,45,38,.1);box-shadow:0 8px 20px rgba(20,45,38,.1)}
.infographic__orbitm.is-live .orbit__sat:nth-of-type(1) .orbit__s{--h:#1798B3}
.infographic__orbitm.is-live .orbit__sat:nth-of-type(2) .orbit__s{--h:#0E7F4F}
.infographic__orbitm.is-live .orbit__sat:nth-of-type(3) .orbit__s{--h:#7A5FD0}
.infographic__orbitm.is-live .orbit__sat:nth-of-type(4) .orbit__s{--h:#B77E1B}
.infographic__orbitm.is-live .orbit__sat:nth-of-type(5) .orbit__s{--h:#C24545}
.infographic__orbitm.is-live .orbit__sat:nth-of-type(6) .orbit__s{--h:#1C75BC}
@keyframes omGlowC{0%,10%{border-color:var(--h,#1798B3);color:var(--ink);
    background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--h,#1798B3) 9%,#fff));
    box-shadow:0 0 0 4px color-mix(in srgb,var(--h,#1798B3) 12%,transparent),
      0 12px 26px rgba(20,45,38,.16)}
  16%,100%{border-color:rgba(20,45,38,.1);background:linear-gradient(180deg,#fff,#F3F8F7);
    box-shadow:0 8px 20px rgba(20,45,38,.1)}}
.infographic__orbitm.is-live .orbit__sat .orbit__s{animation-name:omGlowC}


/* ═══ styles/26-winpane.css ═══════════════════════════════════════════ */
/* ══ 26-winpane ══════════════════════════════════════════════════════
   Audience overlay windows (.overlay backdrop + .winpane).
   Blocks: .overlay, .proofstrip, .winpane
   ══════════════════════════════════════════════════════════════ */
/* ── audience windows · Stripe-style overlays ─────────────────── */
.overlay{position:fixed;inset:0;z-index:200;visibility:hidden;transition:visibility 0s .32s}
.overlay.is-on{visibility:visible;transition:visibility 0s}
.overlay__bg{position:absolute;inset:0;background:rgba(8,20,18,.52);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;transition:opacity .3s}
.overlay.is-on .overlay__bg{opacity:1}
.winpane{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.965);
  width:min(1140px,calc(100% - 32px));max-height:92vh;overflow:hidden;
  background:var(--panel);border:1px solid rgba(255,255,255,.75);border-radius:24px;
  box-shadow:0 64px 150px rgba(6,20,18,.5),0 24px 50px rgba(6,20,18,.3),
    0 0 0 1px rgba(20,45,38,.06);
  opacity:0;pointer-events:none;outline:none;
  transition:opacity .28s,transform .34s cubic-bezier(.3,1,.35,1)}
/* each window carries its section-2 mesh identity. it sits directly on .winpane (which no
   longer scrolls) so the tint always covers the full card, top to bottom, no matter how
   tall the content inside .winpane__scroll is or how far the user has scrolled it. */
.winpane__mesh{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:0}
.winpane__mesh::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 55% at 32% 20%,rgba(255,255,255,.85),rgba(255,255,255,.35) 55%,transparent 78%)}
/* the actual scrollable content — a separate inner box so the decorative mesh (a sibling,
   pinned to .winpane) never scrolls away from the lower part of the card */
.winpane__scroll{
  position:relative;
  z-index:1;
  height:auto;
  max-height:calc(92vh - 2px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-gutter:stable;
  padding:38px 46px 34px;
}
#win-msp .bento__mesh .a{width:max(56%,320px);left:-14%;bottom:-30%;background:rgba(55,214,122,.36);animation-name:mdriftA;animation-duration:19s}
#win-msp .bento__mesh .b{width:max(60%,340px);left:28%;bottom:-36%;background:rgba(23,179,154,.32);animation-name:mdriftB;animation-duration:24s}
#win-msp .bento__mesh .c{width:max(52%,300px);right:-16%;bottom:-24%;background:rgba(28,117,188,.3);animation-name:mdriftC;animation-duration:16s}
#win-msp .bento__mesh .d{width:max(38%,240px);left:-10%;top:-20%;background:rgba(124,217,234,.24);animation-name:mdriftB;animation-duration:21s}
#win-gsi .bento__mesh .a{width:max(50%,300px);right:-20%;top:-14%;background:rgba(232,140,125,.3);animation-name:mdriftB;animation-duration:18s}
#win-gsi .bento__mesh .b{width:max(44%,270px);right:-24%;top:38%;background:rgba(232,200,119,.28);animation-name:mdriftA;animation-duration:22s}
#win-gsi .bento__mesh .c{width:max(50%,300px);right:-14%;bottom:-24%;background:rgba(59,201,142,.32);animation-name:mdriftC;animation-duration:15s}
#win-ent .bento__mesh .a{width:max(30%,240px);left:-8%;top:-24%;background:rgba(240,119,107,.3);animation-name:mdriftA;animation-duration:19s}
#win-ent .bento__mesh .b{width:max(30%,240px);left:28%;top:-28%;background:rgba(245,165,76,.28);animation-name:mdriftB;animation-duration:16s}
#win-ent .bento__mesh .c{width:max(28%,220px);right:-8%;top:-20%;background:rgba(242,210,75,.3);animation-name:mdriftC;animation-duration:22s}
#win-ent .bento__mesh .d{width:max(52%,340px);left:18%;bottom:-40%;background:rgba(23,179,154,.32);animation-name:mdriftB;animation-duration:25s}
#win-ent .bento__mesh .e{width:max(34%,250px);right:-12%;bottom:-28%;background:rgba(28,117,188,.3);animation-name:mdriftA;animation-duration:18s}
.overlay.is-on .winpane.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.winpane__x{position:absolute;z-index:2;top:18px;right:18px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.85);color:var(--muted);font-size:15px;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(20,45,38,.12);
  transition:background .2s,border-color .2s,color .2s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.winpane__x:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.winpane h3{font-family:var(--display2);font-size:clamp(25px,2.9vw,37px);line-height:1.14;
  margin:10px 0 0;letter-spacing:-.015em}
#win-gsi{width:min(880px,calc(100% - 32px))}
#win-msp{width:min(1020px,calc(100% - 32px))}
.winpane__deep{display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  padding:11px 22px;border-radius:12px;background:var(--ink);color:#fff;
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 10px 26px rgba(15,42,37,.3);transition:transform .22s,box-shadow .22s,background .22s}
.winpane__deep i{font-style:normal;transition:transform .22s}
.winpane__deep:hover{transform:translateY(-2px);background:var(--blue);box-shadow:0 14px 34px rgba(28,117,188,.4)}
.winpane__deep:hover i{transform:translateX(4px)}
.winpane__sub{margin:9px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:64ch}
.overlay__plays{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.overlay__play{border:1px solid rgba(255,255,255,.7);border-radius:14px;padding:16px 18px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 10px 26px rgba(20,45,38,.08)}
.overlay__play b{font-size:14px;color:var(--ink)}
.overlay__play p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.proofstrip{display:flex;align-items:center;gap:14px;margin-top:16px;border-radius:12px;
  padding:12px 16px;background:linear-gradient(180deg,#12303B,#0C222B);color:#CDE1DB;
  border:1px solid rgba(124,217,234,.2);box-shadow:0 14px 32px rgba(6,20,18,.3)}
.proofstrip i{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;color:#0B3B2E;background:#5AE6A8;border-radius:999px;padding:3px 10px}
.proofstrip span{font-size:13px}
.proofstrip b{color:#7CD9EA}
.overlay__pains{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.overlay__pains em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.overlay__pains em.bad{color:#C24545}
.overlay__pains em.good{color:#0E7F4F}
.overlay__pains ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.overlay__pains li{position:relative;padding-left:16px;font-size:13px;line-height:1.45;color:var(--muted)}
.overlay__pains li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%}
.overlay__pains div:first-child li::before{background:#C24545;opacity:.65}
.overlay__pains div:last-child li::before{background:#0E7F4F;opacity:.65}
.overlay__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:15px}
.overlay__tiles>div{border-radius:13px;padding:14px 16px;background:linear-gradient(180deg,#12303B,#0C222B);
  border:1px solid rgba(124,217,234,.18);box-shadow:0 14px 32px rgba(6,20,18,.28)}
.overlay__tiles b{display:block;font-family:var(--display);font-size:22px;color:#7CD9EA;letter-spacing:-.02em}
.overlay__tiles>div:nth-child(2) b{color:#5AE6A8}
.overlay__tiles>div:nth-child(3) b{color:#B9A6FF}
.overlay__tiles span{display:block;margin-top:3px;font-size:11.5px;color:#CDE1DB;text-wrap:balance}
.overlay__flow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.overlay__flow span{font-size:12.5px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.8);border-radius:999px;padding:7px 14px;white-space:nowrap;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 16px rgba(20,45,38,.08)}
.overlay__flow i{font-style:normal;color:var(--blue);font-weight:700}
.winpane__note{margin:11px 0 0;font-size:12.5px;color:var(--dim)}
.overlay__cta{display:flex;align-items:center;gap:22px;margin-top:22px;flex-wrap:wrap}
.winpane__scroll::-webkit-scrollbar{width:10px}
.winpane__scroll::-webkit-scrollbar-thumb{background:rgba(20,45,38,.2);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
.winpane__k{display:block;font-style:normal;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-top:26px}
.overlay__prods{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:12px}
.overlay__prods>div{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:13px;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 8px 22px rgba(20,45,38,.07)}
.overlay__prods i{font-style:normal;flex:0 0 24px;display:grid;place-items:center}
.overlay__prods svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.overlay__prods b{font-size:13.5px;color:var(--ink)}
@media (max-width:640px){
  .winpane{inset:0;left:0;top:0;width:100%;max-height:100%;border-radius:0;
    transform:translateY(14px)}
  .winpane__scroll{max-height:100%;padding:64px 22px 40px}
  .overlay.is-on .winpane.is-on{transform:none}
  .overlay__plays,.overlay__pains,.overlay__tiles{grid-template-columns:1fr}
  .overlay__prods{grid-template-columns:1fr 1fr}
}


/* ═══ styles/27-subpage-hero.css ═══════════════════════════════════════════ */
/* ══ 27-subpage-hero ══════════════════════════════════════════════════════
   Subpage hero, flow rail, framed window, split visual.
   Blocks: .built, .cap, .caps, .flowrail, .framewin, .outcomes, .page-hero, .solutions-grid
   ══════════════════════════════════════════════════════════════ */
/* ── subpages ─────────────────────────────────────────────────── */
.page-hero{position:relative;padding:168px 0 20px;overflow:hidden}
.page-hero .hero__bg .glow1{background:radial-gradient(closest-side,color-mix(in srgb,var(--accent,#1C75BC) 26%,transparent),transparent)}
.page-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative}
.page-hero__grid.page-hero__grid--solo{grid-template-columns:1fr;max-width:820px;margin-inline:auto;text-align:center}
.page-hero__grid.page-hero__grid--solo .hero__actions{justify-content:center}
.page-hero__grid.page-hero__grid--solo .built{justify-content:center}
.page-hero__grid.page-hero__grid--solo .page-hero__sub{max-width:620px;margin-left:auto;margin-right:auto;text-wrap:balance}
.page-hero__grid.page-hero__grid--solo .page-hero__body{max-width:900px;margin-left:auto;margin-right:auto;}
.page-hero .eyebrow{color:var(--accent,var(--cyan))}
.page-hero .eyebrow::before{background:var(--accent,var(--cyan))}
.page-hero h1{font-size:clamp(36px,4.6vw,62px);line-height:1.05;letter-spacing:-.03em;margin:20px 0 18px}
.page-hero .page-hero__sub{font-size:clamp(17px,1.9vw,22px);color:var(--ink);font-weight:500;margin:0 0 14px;line-height:1.4}
.page-hero .page-hero__body{color:var(--muted);font-size:16px;margin:0 0 30px}
.built{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:26px}
.built small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.built span{font-size:11.5px;color:var(--muted);border:1px solid var(--line);padding:5px 12px;border-radius:999px}
.framewin{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:var(--panel);
  box-shadow:var(--shadow),0 0 60px color-mix(in srgb,var(--accent,#3EC1D5) 10%,transparent)}
.framewin__bar{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
.framewin__bar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.framewin__bar i:first-child{background:var(--accent,var(--cyan));opacity:.7}
.framewin img{width:100%;display:block}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cap{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--panel);
  transition:.25s;position:relative;overflow:hidden}
.cap::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--accent,var(--cyan));
  opacity:0;transition:.25s}
.cap:hover{border-color:var(--accent,var(--cyan));transform:translateY(-4px);
  box-shadow:0 0 30px color-mix(in srgb,var(--accent,#3EC1D5) 12%,transparent)}
.cap:hover::before{opacity:1}
.cap i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--accent,var(--cyan))}
.cap h3{font-size:16.5px;margin-top:12px;font-weight:600}
.flowrail{display:flex;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);overflow:hidden}
.flowrail .flowrail__step{flex:1;padding:24px 20px;position:relative;text-align:center}
.flowrail .flowrail__step+.flowrail__step{border-left:1px solid var(--line)}
.flowrail b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--dim);margin-bottom:8px}
.flowrail span{font-size:14px;font-weight:600}
.flowrail .flowrail__step::after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  z-index:2;color:var(--accent,var(--cyan));background:var(--panel);font-size:14px}
.flowrail .flowrail__step:last-child::after{display:none}
.outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.outcomes__item{border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;background:var(--panel);
  text-align:center;transition:.25s}
.outcomes__item:hover{border-color:var(--accent,var(--cyan));transform:translateY(-4px)}
.outcomes__item strong{display:block;font-family:var(--display);font-size:26px;font-weight:700;
  color:var(--accent,var(--cyan));letter-spacing:-.02em}
.outcomes__item span{color:var(--muted);font-size:13.5px}
.page-hero__split{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center}
.solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.solutions-grid article{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:var(--panel);transition:.25s}
.solutions-grid article:hover{border-color:var(--cyan);transform:translateY(-4px);box-shadow:var(--glow)}
.solutions-grid h3{font-size:18px;margin-bottom:8px}
.solutions-grid p{margin:0;color:var(--muted);font-size:14px}


/* ═══ styles/28-industries.css ═══════════════════════════════════════════ */
/* ══ 28-industries ══════════════════════════════════════════════════════
   Industries band (solutions page).
   Blocks: .industry
   ══════════════════════════════════════════════════════════════ */
/* ── industries band (solutions.html #ind-*) — nav "By industry" lands here ── */
.industry__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.industry__grid article{position:relative;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px 22px;background:var(--panel);transition:.25s}
.industry__grid article:hover{border-color:color-mix(in srgb,var(--c) 55%,var(--line));
  transform:translateY(-4px);box-shadow:var(--glow)}
.industry__grid .industry__icon{width:40px;height:40px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;margin-bottom:14px;
  background:color-mix(in srgb,var(--c) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 26%,transparent)}
.industry__grid .industry__icon svg{width:21px;height:21px;stroke:var(--c);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.industry__grid h3{font-size:16.5px;margin:0 0 8px;line-height:1.3}
.industry__grid p{margin:0 0 14px;color:var(--muted);font-size:13.5px;line-height:1.6}
.industry__grid .industry__chip{display:inline-block;font-style:normal;font-family:var(--mono);
  font-size:10px;letter-spacing:.06em;padding:4px 9px;border-radius:7px;
  background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--ink)}


/* ═══ styles/29-reveal.css ═══════════════════════════════════════════ */
/* ══ 29-reveal ══════════════════════════════════════════════════════
   Scroll-reveal base and its delay modifiers.
   Blocks: .reveal
   ══════════════════════════════════════════════════════════════ */
/* ── reveal ───────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal.reveal--d1{transition-delay:.1s}.reveal.reveal--d2{transition-delay:.2s}.reveal.reveal--d3{transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}


/* ═══ styles/30-responsive.css ═══════════════════════════════════════════ */
/* ══ 30-responsive ══════════════════════════════════════════════════════
   Site-wide responsive overrides. Keep LAST-ish: order matters.
   Blocks: —
   ══════════════════════════════════════════════════════════════ */
/* ── responsive ───────────────────────────────────────────────── */
@media(max-width:1080px){
  .nav,.nav__demo{display:none}
  .mobile-toggle{display:grid;place-items:center}
  .brand__sub{display:none}
  .page-hero__split{grid-template-columns:1fr}
  /* the decks unstack: no overlap, no hover — every card shows everything */
  .deck__pack{grid-template-columns:1fr;gap:12px}
  .deck__title{text-align:left;font-size:18px}
  .deck__cards{flex-direction:column;height:auto;padding-right:0;gap:8px}
  .deck__card{flex:none;margin-left:0;padding:14px 16px;border-radius:12px}
  .deck__card:hover,.deck__card:focus{flex-grow:0;box-shadow:0 10px 26px rgba(0,0,0,.35)}
  .deck__card b{margin-top:5px;font-size:14.5px}
  .deck__card b::after{display:none}
  .deck__desc{min-width:0;opacity:1;margin-top:5px}
  /* "Active layer" only meant something as a hover state — keep just the
     product cards' value tags, which say something on their own */
  a.deck__card .deck__badge{position:static;opacity:1;align-self:flex-start;margin-top:10px}
  a.deck__card .deck__chips{margin-bottom:0}
  .deck__chips{opacity:1;pointer-events:auto}
  .deck__chips{flex-direction:column;gap:7px}
  #outDeck .deck__chips{flex-direction:column;gap:7px}
  .deck__chips em{max-width:230px;opacity:1}
  .deck__desc{opacity:1;max-height:none}
  .deck__cards:hover .deck__card:not(:hover):not(:focus){opacity:1}
  .testimonial{grid-template-columns:1fr;gap:30px;padding:36px 30px}
  .testimonial__right{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:30px}
  .testimonial__right .testimonial__stats{padding-right:0}
  .testimonial__right{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:28px}
  .testimonial__org{top:28px}
  .deck__stage{position:static;margin-top:10px;flex-direction:row;align-items:center}
  .bento--msp,.bento--gsi,.bento--ent{grid-column:span 12}
  .bento__ent{grid-template-columns:1fr;gap:18px}
  .bento__caps{grid-template-columns:repeat(2,1fr)}
  /* stacked enterprise card: clearing follows the copy up top */
  .bento--ent::after{background:radial-gradient(120% 46% at 50% 16%,
    rgba(255,255,255,.9),rgba(255,255,255,.45) 55%,transparent 76%)}
  .caps,.solutions-grid{grid-template-columns:repeat(2,1fr)}
  .industry__grid{grid-template-columns:repeat(2,1fr)}
  .opmodel__split{grid-template-columns:1fr;gap:38px}
  .opmodel__row{grid-template-columns:48px 1fr 26px}
  .opmodel__row ul{grid-column:1/-1}
  .outcomes{grid-template-columns:repeat(2,1fr)}
  .page-hero__grid{grid-template-columns:1fr;gap:40px}
  .flowrail{flex-direction:column}
  .flowrail .flowrail__step+.flowrail__step{border-left:0;border-top:1px solid var(--line)}
  .flowrail .flowrail__step::after{right:50%;top:auto;bottom:-9px;transform:translateX(50%) rotate(90deg)}
}
@media(max-width:640px){
  .container{width:calc(100% - 32px)}
  .section{padding:76px 0}
  .hero{padding-top:130px}
  .bento__stats{grid-template-columns:1fr}
  .bento__bridge{grid-template-columns:1fr}
  .bento__arr{transform:rotate(90deg);justify-self:center}
  .bento__col:last-of-type .bento__chips{grid-template-columns:1fr 1fr}
  .bento__caps{grid-template-columns:1fr}
  .bento__gain{grid-template-columns:76px 1fr}
  .caps,.outcomes,.solutions-grid,.industry__grid{grid-template-columns:1fr}
  .testimonial{padding:30px 22px}
  .testimonial__stats{gap:20px;flex-wrap:wrap}
}


/* ═══ styles/31-cookie-bar.css ═══════════════════════════════════════════ */
/* ══ 31-cookie-bar ══════════════════════════════════════════════════════
   Cookie consent bar.
   Blocks: .cookie-bar
   ══════════════════════════════════════════════════════════════ */
/* ── cookie consent bar ───────────────────────────────────────── */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:500;max-width:640px;
  margin-inline:auto;background:var(--panel);border:1px solid var(--line2);border-radius:14px;
  box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.cookie-bar.is-shown{opacity:1;transform:none;pointer-events:auto}
.cookie-bar p{margin:0;font-size:13px;line-height:1.5;color:var(--muted);flex:1 1 260px}
.cookie-bar a{color:var(--cyan);text-decoration:underline}
.cookie-bar__actions{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.cookie-bar__actions .btn{padding:9px 16px;font-size:13px;border-radius:9px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.cookie-bar{transition:none}}
@media (max-width:480px){.cookie-bar{left:10px;right:10px;bottom:10px;padding:14px}}


/* The bar must never be wider than the phone: unwrapped, its text + two
   buttons ran to ~620px on a 393px screen, which widened the layout viewport
   and made mobile browsers zoom the whole page out to ~60% (the "page in half"
   bug). Wrap it, and cap it to the viewport. */
.cookie-bar{max-width:calc(100vw - 24px);box-sizing:border-box;flex-wrap:wrap}
@media(max-width:640px){
  .cookie-bar{flex-direction:column;align-items:stretch;gap:12px;left:12px;right:12px;width:auto}
  .cookie-bar p{flex:0 0 auto}   /* the row rule's 260px basis would become HEIGHT here */
  .cookie-bar__actions{display:flex;gap:10px;width:100%}
  .cookie-bar__actions .btn{flex:1 1 0;justify-content:center;padding-inline:12px}
}

/* ═══ styles/32-legal-pages.css ═══════════════════════════════════════════ */
/* ══ 32-legal-pages ══════════════════════════════════════════════════════
   Privacy / terms prose pages.
   Blocks: .legal
   ══════════════════════════════════════════════════════════════ */
/* ── legal / static prose pages (privacy, terms) ─────────────── */
.legal{max-width:760px;margin-inline:auto}
.legal .legal__updated{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 30px}
.legal h2{font-size:22px;margin:44px 0 12px;letter-spacing:-.01em}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:16px;margin:22px 0 8px;color:var(--ink)}
.legal p,.legal li{color:var(--muted);font-size:15px;line-height:1.7}
.legal ul{padding-left:20px;margin:10px 0}
.legal li{margin:6px 0}
.legal a{color:var(--cyan)}
.legal strong{color:var(--ink)}


/* ═══ styles/33-contact-form.css ═══════════════════════════════════════════ */
/* ══ 33-contact-form ══════════════════════════════════════════════════════
   Contact / Book-a-demo: an aside (what happens next + channels) beside the
   form card. The form script keys on ids (bzForm, fIntent, fSubmit, fDone,
   fdTitle, fCopy, fAgain), field names, .form__field + its <s>, and the
   `is-invalid` class — keep those.
   Blocks: form__wrap, form__aside, form__steps, form__channels, form__card,
           form__intent, form, form__field, form__done
   ══════════════════════════════════════════════════════════════ */
.form__section{padding-top:0}
.form__wrap{display:grid;grid-template-columns:.86fr 1.14fr;gap:26px;align-items:start;max-width:1120px}

/* ── the aside: night panel, same family as the About team card ── */
.form__aside{position:sticky;top:104px;border-radius:var(--r-lg);padding:30px 30px 26px;
  color:#CDE1F3;border:1px solid rgba(124,217,234,.28);
  background:linear-gradient(160deg,#07131A 0%,#0B1F2E 52%,#131A38 100%);
  box-shadow:0 30px 70px rgba(4,14,20,.35)}
.form__aside .eyebrow{color:#7CD9EA}
.form__aside h3{margin:12px 0 22px;font-family:var(--display2);font-weight:700;
  font-size:clamp(20px,2vw,25px);letter-spacing:-.02em;line-height:1.2;color:#F2FAF7}
.form__steps{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.form__steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.form__steps i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  font-family:var(--mono);font-style:normal;font-weight:700;font-size:11px;color:#7CD9EA;
  background:rgba(124,217,234,.10);border:1px solid rgba(124,217,234,.35)}
.form__steps b{display:block;font-size:14px;font-weight:600;color:#F2FAF7}
.form__steps span{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:#9FB6C6}
.form__channels{display:grid;gap:8px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10)}
.form__channels a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 12px;border-radius:10px;text-decoration:none;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
  transition:background .18s,border-color .18s}
.form__channels a:hover{background:rgba(124,217,234,.08);border-color:rgba(124,217,234,.35)}
.form__channels b{font-size:12.5px;font-weight:600;color:#E5F1F9}
.form__channels span{font-family:var(--mono);font-size:11px;color:#7CD9EA;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── the form card ── */
.form__card{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px 34px 30px;box-shadow:var(--shadow);overflow:hidden}
.form__card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan) 55%,#5AE6A8)}
/* intent chips: pick the reason first, everything else adapts */
.form__intent{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.form__intent button{font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:9px 16px;border-radius:99px;border:1px solid var(--line2);
  background:transparent;color:var(--muted);transition:all .18s}
.form__intent button:hover{border-color:var(--blue);color:var(--blue);
  background:color-mix(in srgb,var(--blue) 6%,transparent)}
.form__intent button.is-on{color:#fff;border-color:transparent;
  background:var(--grad);box-shadow:0 6px 16px rgba(28,117,188,.28)}
.form__intent button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* class display rules beat the UA [hidden] rule — restate it */
.form[hidden],.form__intent[hidden],.form__done[hidden]{display:none}
.form{display:grid;gap:16px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* floating labels, pure CSS via :placeholder-shown */
.form__field{position:relative}
.form__field input,.form__field textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);
  padding:22px 14px 9px;border:1px solid var(--line2);border-radius:12px;
  background:#FFFFFF;transition:border-color .18s,box-shadow .18s,background .18s}
.form__field input:hover,.form__field textarea:hover{border-color:#9DBFB4}
.form__field textarea{resize:vertical;min-height:112px;padding-top:26px}
.form__field label{position:absolute;left:15px;top:15px;font-size:14.5px;color:var(--dim);
  pointer-events:none;transition:all .16s ease}
.form__field label i{font-style:normal;font-size:11.5px;opacity:.7}
.form__field input:focus,.form__field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent)}
.form__field input:not(:placeholder-shown)+label,.form__field input:focus+label,
.form__field textarea:not(:placeholder-shown)+label,.form__field textarea:focus+label{
  top:7px;font-size:11px;letter-spacing:.04em;color:var(--cyan);font-weight:600}
.form__field s{display:block;text-decoration:none;font-size:12px;color:var(--red);
  min-height:0;margin:0 0 0 4px;transition:min-height .15s}
.form__field.is-invalid input,.form__field.is-invalid textarea{border-color:var(--red);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 12%,transparent)}
.form__field.is-invalid s{min-height:18px;padding-top:5px}
.form__submit{justify-self:start;margin-top:4px}
.form__note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);margin:0}
.form__note::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:#3EE68F;box-shadow:0 0 0 3px rgba(62,230,143,.18)}
/* the confirmation, in place of the form */
.form__done{text-align:center;padding:14px 0 6px}
.form__done-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 16px;color:#0E7F4F;background:color-mix(in srgb,#3EE68F 18%,transparent);
  border:1px solid color-mix(in srgb,#0E7F4F 40%,transparent)}
.form__done-icon svg{width:24px;height:24px}
.form__done b{display:block;font-family:var(--display);font-size:21px;color:var(--ink);margin-bottom:6px}
.form__done p{color:var(--muted);font-size:14.5px;margin:0 0 20px}
.form__done-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

@media (max-width:900px){
  .form__wrap{grid-template-columns:1fr}
  .form__aside{position:static;order:2}
  .form__card{order:1}
  .footer__top{grid-template-columns:1fr;gap:32px}
  .footer__paths{grid-template-columns:1fr}
}
@media (max-width:640px){
  .form__card{padding:24px 18px 22px}
  .form__row{grid-template-columns:1fr}
  .form__aside{padding:24px 20px 22px}
}

/* ═══ styles/34-page-404.css ═══════════════════════════════════════════ */
/* ══ 34-page-404 ══════════════════════════════════════════════════════
   404 page.
   Blocks: .error404
   ══════════════════════════════════════════════════════════════ */
/* ── 404 page ─────────────────────────────────────────────────── */
.error404{text-align:center;max-width:560px;margin-inline:auto}
.error404 .error404__num{font-family:var(--display2);font-size:clamp(64px,12vw,120px);font-weight:800;
  line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin:0 0 8px}
.error404 .hero__actions{justify-content:center}


/* ═══ styles/35-msp-dive.css ═══════════════════════════════════════════ */
/* ══ 35-msp-dive ══════════════════════════════════════════════════════
   MSP "dive" — one pane to one client to blaZop working.
   Blocks: .dive
   ══════════════════════════════════════════════════════════════ */
/* ── the dive: one pane → one client → blaZop working (MSP backbone) ── */
.dive__zoom{height:330vh;margin-top:14px}
.dive__pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding:16px 0}
.dive__stage{position:relative;width:min(1180px,100%);aspect-ratio:16/9.6;max-height:74vh;
  border-radius:20px;overflow:hidden;border:1px solid rgba(139,92,246,.32);
  background:radial-gradient(120% 130% at 50% -10%,#191430 0%,#0A0818 52%,#06040E 100%);
  box-shadow:0 40px 90px rgba(0,0,0,.55)}
.dive__l,.dive__in{position:absolute;inset:0;will-change:transform,opacity;backface-visibility:hidden}
.dive__mid{opacity:0}
/* window chrome */
.dive__win{position:absolute;inset:4.5% 5%;display:flex;flex-direction:column;border-radius:14px;
  border:1px solid rgba(255,255,255,.1);background:rgba(15,12,32,.9);overflow:hidden}
.dive__bar{display:flex;align-items:center;gap:7px;padding:10px 14px;flex:0 0 auto;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:#8F87B8}
.dive__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)}
.dive__bar em{margin-left:auto;font-style:normal;color:#C9B8FF}
/* phases 1+2: the MSP network — same coordinates, two states */
.dive__net{position:absolute;inset:4.5% 5%}
.dive__nt{position:absolute;left:1%;top:0;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;color:#8F87B8}
.dive__nt.r{left:auto;right:1%;color:#6FD9A8}
.dive__wires{position:absolute;inset:6% 4%;width:92%;height:88%;fill:none}
.dive__net.is-chaos .dive__wires path{stroke:rgba(203,213,235,.24);stroke-width:1.3}
.dive__net.is-calm .dive__wires line{stroke:rgba(124,217,234,.5);stroke-width:1.4}
/* clients keep their own stacks in BOTH phases — that IS vendor-agnostic */
.dive__cl{position:absolute;left:calc(4% + var(--x)*.92);top:calc(6% + var(--y)*.88);
  transform:translate(-50%,-50%);text-align:center;
  border:1px solid rgba(160,180,230,.42);border-radius:13px;padding:11px 17px 10px;
  background:linear-gradient(180deg,rgba(30,28,58,.97),rgba(14,12,30,.97));
  box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 22px rgba(120,140,220,.16),
    inset 0 1px 0 rgba(255,255,255,.09)}
.dive__cl b{display:block;font-size:14px;font-weight:700;color:#FFF;
  text-shadow:0 0 14px rgba(160,190,255,.35)}
/* the stack, worn on the sleeve: real vendor marks */
.dive__vs{display:flex;justify-content:center;gap:12px;margin-top:7px}
.dive__v{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:9.5px;font-weight:600;letter-spacing:.05em;color:#DCE4F6;white-space:nowrap}
.dive__v .dive__vendor-logo{height:15px;width:auto;display:block;
  filter:drop-shadow(0 0 6px rgba(140,170,255,.35))}
.dive__v .dive__vendor-logo--aws{height:17px;margin-top:2px}
.dive__cl.is-ok{border-color:rgba(75,243,159,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 24px rgba(75,243,159,.2),
    inset 0 1px 0 rgba(255,255,255,.09)}
.dive__cl.is-ok b{color:#FFF;text-shadow:0 0 14px rgba(75,243,159,.45)}
.dive__cl.is-ok .dive__v{color:#D9F5E7}
/* the pile of issues (phase 1) / the same spots, resolved (phase 2) */
/* named, burning: the issues are the argument for the whole section */
.dive__iss{position:absolute;left:calc(4% + var(--x)*.92);top:calc(6% + var(--y)*.88);
  transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;white-space:nowrap;
  color:#C9A29A;border:1px solid rgba(233,90,80,.6);border-radius:99px;padding:6px 14px;
  background:rgba(46,13,15,.92);box-shadow:0 0 14px rgba(233,90,80,.22);
  animation:zxIss 2.6s ease-in-out infinite;animation-delay:var(--d)}
.dive__iss b{color:#FF8A7A;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.dive__iss .dive__issue-icon{width:12px;height:12px;color:#FF8A7A;flex:0 0 auto}
@keyframes zxIss{0%,100%{box-shadow:0 0 10px rgba(233,90,80,.18);border-color:rgba(233,90,80,.55)}
  50%{box-shadow:0 0 22px rgba(233,90,80,.5);border-color:rgba(255,138,122,.95)}}
.dive__ok{position:absolute;left:calc(4% + var(--x)*.92);top:calc(6% + var(--y)*.88);
  transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.03em;white-space:nowrap;
  color:#8FBFA8;border:1px solid rgba(75,243,159,.5);border-radius:99px;padding:5px 13px;
  background:rgba(9,32,22,.92);box-shadow:0 0 12px rgba(75,243,159,.16)}
.dive__ok b{color:#4BF39F;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.dive__ok .dive__issue-icon{width:11px;height:11px;color:#4BF39F;flex:0 0 auto}
/* the hub: neutral chrome — only the issues themselves get to be red */
.dive__hub{position:absolute;left:calc(4% + 50% * .92);top:calc(6% + 47% * .88);
  transform:translate(-50%,-50%);text-align:center;
  border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:14px 22px;
  background:rgba(15,13,30,.96);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.dive__hub b{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;color:#F3E9EA}
.dive__hub em{display:block;font-style:normal;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.07em;color:#9AA6C0;margin-top:3px;white-space:nowrap}
/* keywords pop; people read those, not lines */
.dive__hub em .hl,.dive__nt .hl{font-style:normal;font-weight:700;color:#FF8A7A}
.dive__hub.is-lit em .hl{color:#FEE705}
.dive__nt.r .hl{color:#4BF39F}
/* the hub's own status strip: what today feels like / what blaZop leaves behind */
.dive__hrows{display:grid;gap:4px;margin-top:9px;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.12)}
.dive__hr{display:flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:#B7C1D6;white-space:nowrap}
.dive__hr b{color:#FF9F8A;font-weight:700}
.dive__hr .dive__issue-icon{width:11px;height:11px;color:#FF7A66;flex:0 0 auto}
.dive__hrows.is-ok{border-top-color:rgba(75,243,159,.3)}
.dive__hrows.is-ok .dive__hr{color:#9FE5C6}
.dive__hrows.is-ok .dive__hr b{color:#4BF39F}
.dive__hrows.is-ok .dive__hr .dive__issue-icon{color:#4BF39F}
.dive__hub.is-lit{border-color:rgba(254,231,5,.5);background:rgba(16,13,34,.94);
  box-shadow:0 0 34px rgba(254,231,5,.16)}
.dive__hub.is-lit em{color:#6FD9A8}
.dive__hubmark{display:block;width:54px;height:54px;margin:0 auto 4px}
.dive__hubmark svg{width:100%;height:100%;display:block}
.dive__tag{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-style:normal;font-size:8.5px;
  letter-spacing:.09em;padding:3px 8px;border-radius:99px;border:1px solid;white-space:nowrap}
.dive__tag.g{color:#4BF39F;border-color:rgba(75,243,159,.45)}
.dive__tag.y{color:#FFE06A;border-color:rgba(255,224,106,.4)}
.dive__tag.v{color:#C9B8FF;border-color:rgba(139,92,246,.55)}
.dive__bzchip{margin:0 auto 12px;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#EAE5FA;
  padding:7px 14px;border-radius:99px;border:1px solid rgba(201,155,255,.5);
  background:rgba(139,92,246,.14);box-shadow:0 0 22px rgba(139,92,246,.28)}
.dive__bzchip i{width:6px;height:6px;border-radius:50%;background:#4BF39F;
  box-shadow:0 0 7px rgba(75,243,159,.9)}
/* L3: blaZop working */
.dive__win.dive__dark{background:rgba(9,7,22,.95)}
/* L3: the mark at the centre, the estate wired to it — the logo manages everything */
.dive__bzwrap{position:relative;flex:1;min-height:0;margin:4px 8px}
.dive__spokes{position:absolute;inset:0;width:100%;height:100%}
.dive__spokes line{stroke:rgba(139,92,246,.28);stroke-width:1;stroke-dasharray:3 5}
.dive__mark{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  width:112px;height:112px;filter:drop-shadow(0 0 26px rgba(254,231,5,.22))}
.dive__mark svg{width:100%;height:100%;display:block}
.dive__bzlab{position:absolute;left:50%;top:calc(47% + 64px);transform:translateX(-50%);
  font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#C9B8FF;white-space:nowrap}
.dive__icb{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:#CFC9E8;white-space:nowrap;
  padding:8px 15px;border-radius:99px;border:1px solid rgba(255,255,255,.14);
  background:rgba(16,13,34,.92);
  animation:zbOn 6s ease-in-out infinite;animation-delay:var(--d)}
.dive__icb .dive__issue-icon{width:14px;height:14px;color:#8FB8CE;flex:0 0 auto;
  animation:zbIco 6s ease-in-out infinite;animation-delay:var(--d)}
/* one domain handled at a time, sweeping the ring — "always on", not noise */
@keyframes zbOn{0%,9%{border-color:rgba(75,243,159,.6);color:#EAFBF3;
    box-shadow:0 0 16px rgba(75,243,159,.22)}
  14%,100%{border-color:rgba(255,255,255,.14);color:#CFC9E8;box-shadow:none}}
@keyframes zbIco{0%,9%{color:#4BF39F}14%,100%{color:#8FB8CE}}
.dive__foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 12px 14px;flex:0 0 auto}
.dive__foot .dive__tag{margin-left:0;display:inline-flex;align-items:center;gap:6px}
.dive__foot .dive__tag .dive__issue-icon{width:12px;height:12px;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.dive__icb,.dive__icb .dive__issue-icon,.dive__iss{animation:none}}
/* captions */
.dive__caps{position:absolute;left:0;right:0;bottom:3vh;text-align:center;pointer-events:none;min-height:52px}
.dive__caps p{position:absolute;left:0;right:0;bottom:0;margin:0;opacity:0;transform:translateY(8px);
  transition:opacity .45s ease,transform .45s ease}
.dive__caps p.is-on{opacity:1;transform:none}
.dive__caps b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(17px,2vw,24px);color:#F2FAF7}
.dive__caps span{display:block;margin-top:4px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:#9C93C6}
.dive__caps span b{display:inline;font:inherit;font-weight:700;color:#4BF39F}
/* reduced motion / fallback: no pin, final frame only */
.dive__static{height:auto}
.dive__static .dive__pin{position:static;height:auto;padding:0 0 60px}
@media (max-width:860px){
  .dive__zoom{height:280vh}
  .dive__stage{aspect-ratio:4/5;max-height:64vh}
  .dive__bar{font-size:8.5px;padding:8px 10px}
  .dive__cl{padding:6px 9px;border-radius:9px}
  .dive__cl b{font-size:9px}
  .dive__vs{gap:7px;margin-top:4px}
  .dive__v{font-size:6.5px;gap:3px}
  .dive__v .dive__vendor-logo{height:9px}.dive__v .dive__vendor-logo--aws{height:10px}
  .dive__hub{padding:7px 8px;border-radius:11px}
  .dive__hub b{font-size:9px;letter-spacing:.08em}.dive__hub em{font-size:6px}
  .dive__hubmark{width:32px;height:32px}
  /* no room for labels at phone width: the badges carry the state alone */
  .dive__iss,.dive__ok{padding:4px;border-radius:50%;gap:0}
  .dive__iss .t,.dive__ok .t{display:none}
  .dive__iss .dive__issue-icon{width:10px;height:10px}
  .dive__ok .dive__issue-icon{width:9px;height:9px}
  .dive__hrows{gap:3px;margin-top:6px;padding-top:5px}
  .dive__hr{font-size:6.5px}.dive__hr .dive__issue-icon{width:8px;height:8px}
  .dive__nt{font-size:7.5px}
  .dive__caps b{font-size:16px}
  .dive__caps span{font-size:10px}
  .dive__mark{width:78px;height:78px}
  .dive__bzlab{top:calc(47% + 48px);font-size:8.5px}
  .dive__icb{font-size:8px;padding:5px 9px;gap:5px}
}



/* ═══ styles/36-gsi-pipeline.css ═══════════════════════════════════════════ */
/* ══ 36-gsi-pipeline ══════════════════════════════════════════════════════
   GSI Day 0/1/2 sticky stacked pipeline + the .console product window.
   Blocks: .console, .pipeline, .section
   ══════════════════════════════════════════════════════════════ */
/* ══ GSI delivery pipeline — stacked sticky cards (Explee-style) ══════════
   Three cards, one per Day. Each is position:sticky with a stepped top, so
   scrolling stacks them: the next slides over the last, leaving an 18px peek
   of each earlier card's coloured ribbon. Pure CSS — no scroll listeners.
   Left half argues the Day; right half is a dark product window SHOWING the
   platform doing that Day's work — an artifact, not an icon. */
/* its own dark band, NOT .section.section--dark — that class carries overflow:clip,
   and a clipping ancestor kills position:sticky, which is the whole trick */
.section.section--pipeline{background:rgb(7,10,17);position:relative;
  border-top:1px solid rgba(139,92,246,.32);border-bottom:1px solid rgba(139,92,246,.32)}
.section.section--pipeline .section__head h2{color:#F2FAF7}
.section.section--pipeline .section__head p{color:#A9B4C6}
.section.section--pipeline .eyebrow{color:#A78BFA}
.pipeline__stack{display:flex;flex-direction:column;gap:88px;margin-top:10px}
.pipeline__card{position:sticky;top:calc(106px + var(--n)*18px);z-index:calc(2 + var(--n));
  display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center;
  background:linear-gradient(180deg,#121B26 0%,#0C141D 100%);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);
  border-top:3px solid var(--dc);
  padding:40px 44px;min-height:410px;overflow:hidden;
  box-shadow:0 -14px 34px rgba(0,0,0,.5),0 30px 70px rgba(0,0,0,.55)}
/* the day, ghosted huge behind the copy — same move as the deck's pnum */
.pipeline__ghost{position:absolute;left:-14px;bottom:-72px;z-index:0;
  font-family:var(--display2);font-weight:800;font-size:280px;line-height:1;
  color:color-mix(in srgb,var(--dc) 7%,transparent);pointer-events:none}
.pipeline__copy{position:relative;z-index:1}
.pipeline__day{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;color:var(--dc);
  border:1px solid color-mix(in srgb,var(--dc) 45%,transparent);
  background:color-mix(in srgb,var(--dc) 10%,transparent);
  border-radius:999px;padding:5px 13px;margin-bottom:16px}
.pipeline__copy h3{margin:0 0 12px;font-family:var(--display2);font-weight:700;
  font-size:clamp(23px,2.3vw,30px);letter-spacing:-.02em;line-height:1.15;color:#F2FAF7}
.pipeline__copy>p{margin:0 0 20px;font-size:14.5px;line-height:1.65;color:#A9B8C6}
.pipeline__checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pipeline__checks li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;
  line-height:1.5;color:#A9B8C6}
.pipeline__checks li b{color:#EAF2F8}
.pipeline__checks li i{flex:0 0 18px;height:18px;margin-top:1px;border-radius:6px;position:relative;
  background:color-mix(in srgb,var(--dc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--dc) 35%,transparent)}
.pipeline__checks li i::after{content:"";position:absolute;left:5px;top:4px;width:5px;height:8px;
  border-right:2px solid var(--dc);border-bottom:2px solid var(--dc);transform:rotate(42deg)}

/* the artifact: a dark product window on the light card — software, not clip-art */
.console{position:relative;z-index:1;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,#0E2229 0%,#0A1920 55%,#081218 100%);
  border:1px solid rgba(124,217,234,.20);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.5)}
.console__chrome{display:flex;align-items:center;gap:6px;padding:11px 15px;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:#7FA3AD}
.console__chrome i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)}
.console__chrome span{margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console__chrome em{white-space:nowrap}
.console__chrome em{margin-left:auto;font-style:normal;color:var(--dc)}
.console__body{padding:8px 15px 14px}
.console__row{display:flex;align-items:center;gap:10px;padding:10px 8px;
  border-bottom:1px dashed rgba(255,255,255,.07);
  font-family:var(--mono);font-size:11.5px;color:#8FB0B8;min-width:0}
.console__row b{color:#EAF6F3;font-weight:600;white-space:nowrap}
.console__row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console__row u{text-decoration:none;color:#C7DCE2;margin-left:auto;white-space:nowrap}
.console__row k{color:#3EE68F;white-space:nowrap;flex-shrink:0}
.console__row u+k{margin-left:0}
.console__row k:last-child{margin-left:auto}
.console__row u+k{margin-left:12px}
.console__dot{width:8px;height:8px;border-radius:3px;flex-shrink:0;background:var(--c)}
/* the one live row: an order actually running */
.console__row.is-live{border-bottom:0}
.console__progress{margin-left:auto;flex:0 0 92px;height:7px;border-radius:99px;
  background:rgba(255,255,255,.09);overflow:hidden}
.console__progress i{display:block;height:100%;width:72%;border-radius:99px;
  background:linear-gradient(90deg,#2F6FBF,#7CD9EA)}
@media (prefers-reduced-motion:no-preference){
  .console__progress i{animation:plprog 2.6s ease-in-out infinite alternate}
  @keyframes plprog{from{width:46%}to{width:88%}}
}
.console__row.is-live .t{color:#7CD9EA}
.console__chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:12px 8px 4px}
.console__chips em{font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;color:#7FA3AD;margin-right:2px}
.console__chips span{font-family:var(--mono);font-size:10.5px;color:#CDE4E9;
  background:rgba(124,217,234,.09);border:1px solid rgba(124,217,234,.28);
  border-radius:7px;padding:4px 10px}
.console__years{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 8px 4px;
  font-family:var(--mono);font-size:10.5px}
.console__years em{font-style:normal;letter-spacing:.08em;color:#7FA3AD;margin-right:4px}
.console__years span{color:#B9F5D8;background:rgba(62,230,143,.10);
  border:1px solid rgba(62,230,143,.3);border-radius:7px;padding:4px 11px}
.console__years i{font-style:normal;color:#3EE68F}
.console__status{margin:10px 8px 0;padding:9px 12px;border-radius:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:color-mix(in srgb,var(--dc) 55%,#DDEBEF);
  background:color-mix(in srgb,var(--dc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--dc) 30%,transparent)}
@media(max-width:960px){
  .pipeline__card{grid-template-columns:1fr;gap:26px;padding:28px 24px;min-height:0;
    top:calc(96px + var(--n)*14px)}
  .pipeline__ghost{font-size:190px;bottom:auto;top:-40px;right:-8px;left:auto}
  .console__row span{display:none}
  .console__row u{margin-left:auto}
}



/* ═══ styles/37-product-stats.css ═══════════════════════════════════════════ */
/* ══ 37-product-stats ══════════════════════════════════════════════════════
   Product-page stat tiles and the standalone console.
   Blocks: .console, .infographic, .section
   ══════════════════════════════════════════════════════════════ */
/* ── product-page stats: real numbers, not dials stuck at 100% ──
   (the old ig-gauges drew a full circle whatever the value — a donut that
   always reads "100%" is decoration pretending to be data) */
.infographic__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 34px;
  max-width:860px;margin-inline:auto}
.infographic__stats>div{border-left:3px solid var(--sc,var(--cyan));padding-left:18px}
.infographic__stats b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(30px,3vw,42px);letter-spacing:-.03em;line-height:1;color:var(--sc,var(--ink))}
.infographic__stats em{display:block;font-style:normal;margin-top:7px;font-size:14px;
  font-weight:600;color:var(--ink)}
.infographic__stats span{display:block;margin-top:2px;font-size:12.5px;color:var(--dim);line-height:1.45}
@media(max-width:640px){.infographic__stats{grid-template-columns:1fr;gap:18px}}

/* the same product window the GSI pipeline uses, standing alone on a page */
.console--standalone{max-width:800px;margin:30px auto 0}
.section.section--dark .console--standalone,.section.section--wash .console--standalone{box-shadow:0 24px 60px rgba(4,14,18,.5)}


/* ═══ styles/38-about-nutshell.css ═══════════════════════════════════════════ */
/* ══ 38-about-nutshell ══════════════════════════════════════════════════════
   About — "in a nutshell" dark glow panel.
   Blocks: .nutshell
   ══════════════════════════════════════════════════════════════ */
/* ── about · "in a nutshell" dark glow panel (page-scoped, does not touch
   the shared .infographic__gauges/.infographic__loop/.nutshell__beliefs classes used on solutions.html) ── */
.nutshell{position:relative;overflow:hidden;border-radius:26px;
  padding:20px 46px 44px;margin-top:44px;isolation:isolate;
  border:1px solid rgba(124,217,234,.28);
  background:
    radial-gradient(620px 400px at 10% -12%,rgba(23,152,179,.26),transparent 60%),
    radial-gradient(560px 380px at 96% 10%,rgba(122,95,208,.24),transparent 62%),
    radial-gradient(680px 440px at 50% 120%,rgba(14,127,79,.22),transparent 62%),
    linear-gradient(160deg,#07131A 0%,#0B1F2E 52%,#131A38 100%);
  box-shadow:0 34px 90px rgba(4,14,20,.45)}
.nutshell::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:
    radial-gradient(rgba(124,217,234,.32) 1px,transparent 1.4px),
    radial-gradient(rgba(255,215,90,.2) 1px,transparent 1.4px);
  background-size:46px 46px,74px 74px;background-position:0 0,23px 30px;
  mask-image:radial-gradient(closest-side,rgba(0,0,0,1) 60%,rgba(0,0,0,0) 100%)}
.nutshell__dot{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none;z-index:0;
  background:radial-gradient(circle,#7CD9EA,transparent 70%);opacity:.7;animation:nnTwinkle 3.6s ease-in-out infinite}
.nutshell__dot1{top:14%;left:8%;width:5px;height:5px;animation-delay:.2s}
.nutshell__dot2{top:60%;right:10%;width:4px;height:4px;background:radial-gradient(circle,#FFD75A,transparent 70%);animation-delay:1.1s}
.nutshell__dot3{bottom:16%;left:20%;width:4px;height:4px;background:radial-gradient(circle,#B9A6FF,transparent 70%);animation-delay:1.9s}
@keyframes nnTwinkle{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.9;transform:scale(1.6)}}

.nutshell .infographic,.nutshell .infographic__cap,.nutshell .nutshell__beliefs,.nutshell .proofstrip{position:relative;z-index:1}
.nutshell .infographic__cap{color:#7CD9EA;opacity:.9}
.nutshell .infographic__cap.is-visible{opacity:1}

/* gauges: bigger dial, glowing gradient ring, dark disc backdrop */
.nutshell .gauge .dial{width:132px;height:132px;margin-bottom:14px;
  filter:drop-shadow(0 0 18px rgba(124,217,234,.22))}
.nutshell .gauge .dial::before{content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.05),transparent 70%);z-index:-1}
.nutshell .gauge circle{stroke-width:6.5}
.nutshell .gauge .tr{stroke:rgba(255,255,255,.1)}
.nutshell .gauge .fl{filter:drop-shadow(0 0 6px currentColor)}
.nutshell .gauge.g .fl{stroke:#4BF39F;color:#4BF39F}
.nutshell .gauge.y .fl{stroke:#FFD75A;color:#FFD75A}
.nutshell .gauge.p .fl{stroke:#C9B8FF;color:#C9B8FF}
.nutshell .gauge .val{color:#F6FBFA;font-family:var(--display);font-weight:700;font-size:22px;
  text-shadow:0 0 18px rgba(124,217,234,.3)}
.nutshell .gauge b{color:#F2FAF7;font-size:14.5px}
.nutshell .gauge span{color:#9FC0D6}

/* lifecycle loop: glowing connected nodes instead of flat white pills */
.nutshell .infographic__loop{gap:0;position:relative}
.nutshell .infographic__loop span{background:rgba(255,255,255,.06);border:1px solid rgba(124,217,234,.32);
  color:#F2FAF7;box-shadow:0 0 0 1px rgba(124,217,234,.08) inset,0 10px 26px rgba(4,14,20,.4);
  padding:10px 20px;margin:0 2px; margin-top: 8px; position:relative;z-index:1;transition:border-color .25s,box-shadow .25s,transform .25s}
.nutshell .infographic__loop span:hover{border-color:rgba(124,217,234,.7);transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(124,217,234,.2) inset,0 16px 34px rgba(4,14,20,.5),0 0 26px rgba(124,217,234,.28)}
.nutshell .infographic__loop i{color:#FFD75A;font-weight:700;text-shadow:0 0 10px rgba(255,215,90,.5);
  animation:nnArrowPulse 1.8s ease-in-out infinite}
.nutshell .infographic__loop i:nth-of-type(2){animation-delay:.2s}
.nutshell .infographic__loop i:nth-of-type(3){animation-delay:.4s}
@keyframes nnArrowPulse{0%,100%{opacity:.55;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
.nutshell .infographic__loop .ret{color:#7CD9EA;background:rgba(23,152,179,.14);border-color:rgba(124,217,234,.4);
  box-shadow:0 0 24px rgba(23,152,179,.18)}

/* belief chips: glowing outline badges with a live dot */
.nutshell .nutshell__beliefs span{color:#CDE1F3;border:1px solid rgba(124,217,234,.3);
  background:rgba(255,255,255,.05);display:inline-flex;align-items:center;gap:7px;
  transition:border-color .25s,box-shadow .25s,transform .25s,background .25s}
.nutshell .nutshell__beliefs span::before{content:"";width:5px;height:5px;border-radius:50%;
  background:#5AE6A8;box-shadow:0 0 8px rgba(90,230,168,.8)}
.nutshell .nutshell__beliefs span:hover{border-color:rgba(124,217,234,.6);background:rgba(124,217,234,.08);
  transform:translateY(-2px);box-shadow:0 10px 22px rgba(4,14,20,.35)}

.nutshell .proofstrip{position:relative;z-index:1;background:rgba(255,255,255,.05);
  border:1px solid rgba(124,217,234,.22)}
.nutshell .proofstrip span{color:#CDE1F3}
@media (max-width:640px){.nutshell{padding:38px 22px 32px}}


/* ═══ styles/39-about-spotlight.css ═══════════════════════════════════════════ */
/* ══ 39-about-spotlight ══════════════════════════════════════════════════════
   About — team spotlight card + filmstrip.
   Blocks: .filmstrip, .spotlight
   ══════════════════════════════════════════════════════════════ */
/* ── about · team spotlight (big card + click-through filmstrip) ─ */
.spotlight{position:relative;z-index:1;margin-top:8px}
.spotlight__card{position:relative;display:grid;grid-template-columns:220px 1fr;gap:36px;
  border-radius:20px;padding:28px 30px;height:300px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid rgba(124,217,234,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 26px 60px rgba(4,14,20,.5),0 0 40px rgba(124,217,234,.08);
  transition:opacity .22s ease,transform .22s ease}
.spotlight__card.is-switching{opacity:0;transform:translateY(10px) scale(.985)}
/* the photo always fills its grid cell edge-to-edge — height comes from the
   card's fixed height above, never from how long that member's bio runs */
.spotlight__photo{position:relative;border-radius:16px;overflow:hidden;height:100%;
  box-shadow:0 18px 40px rgba(4,14,20,.5),0 0 0 1px rgba(124,217,234,.18) inset}
.spotlight__photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(6,14,20,.5));border-radius:16px}
.spotlight__photo img{width:100%;height:100%;object-fit:cover;display:block}
.spotlight__info{display:flex;flex-direction:column;justify-content:center;padding-right:96px;
  min-height:0;overflow:hidden}
.spotlight__head b{display:block;font-size:24px;color:#F6FBFA;font-family:var(--display);letter-spacing:-.01em}
.spotlight__head em{display:block;font-style:normal;color:#9FC0D6;font-size:14px;margin-top:4px}
.spotlight__social{display:flex;gap:10px;margin-top:16px}
.spotlight__social:empty{display:none}
.spotlight__social a{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#CDE1F3;
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.spotlight__social a:hover{background:#0A66C2;border-color:#0A66C2;color:#fff;transform:translateY(-2px)}
.spotlight__social svg{width:16px;height:16px}
.spotlight__div{border:none;border-top:1px solid rgba(255,255,255,.12);margin:18px 0}
.spotlight__desc-label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#FFD75A;margin-bottom:8px}
/* hard-clamped to 3 lines — a longer bio gets an ellipsis instead of ever
   pushing the card (and the photo above) taller than its neighbours */
.spotlight__desc p{margin:0;font-size:14px;line-height:1.65;color:#A9C2D4;max-width:52ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

.spotlight__arrow{position:absolute;top:-56px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(124,217,234,.3);color:#7CD9EA;cursor:pointer;z-index:2;
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.spotlight__arrow svg{width:18px;height:18px}
.spotlight__arrow:hover{background:rgba(124,217,234,.16);border-color:rgba(124,217,234,.6);
  transform:translateY(-1px);box-shadow:0 0 22px rgba(124,217,234,.3)}
.spotlight__arrow.spotlight__arrow--prev{right:60px}
.spotlight__arrow.spotlight__arrow--next{right:12px}
.spotlight__count{position:absolute;right:14px;bottom:-30px;font-family:var(--mono);font-size:11.5px;
  color:#7CD9EA;letter-spacing:.06em}

.filmstrip{display:flex;gap:12px;margin-top:44px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.filmstrip__thumb{flex:0 0 auto;width:78px;height:78px;border-radius:12px;padding:0;overflow:hidden;
  border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);cursor:pointer;
  filter:grayscale(.55) brightness(.75);opacity:.75;
  transition:border-color .25s,filter .25s,opacity .25s,transform .25s,box-shadow .25s}
.filmstrip__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.filmstrip__thumb:hover{filter:grayscale(.15) brightness(.92);opacity:1;transform:translateY(-3px)}
.filmstrip__thumb.is-active{border-color:#7CD9EA;filter:none;opacity:1;
  box-shadow:0 0 0 3px rgba(124,217,234,.18),0 10px 26px rgba(4,14,20,.5)}

@media (max-width:760px){
  .spotlight__card{grid-template-columns:1fr;height:auto;padding:24px 20px 28px}
  .spotlight__photo{height:220px}
  .spotlight__info{padding-right:0}
  .spotlight__arrow{top:auto;bottom:-56px}
  .spotlight__arrow.spotlight__arrow--prev{left:0;right:auto}
  .spotlight__arrow.spotlight__arrow--next{right:0}
  .spotlight__count{bottom:-58px;left:50%;transform:translateX(-50%);right:auto}
  .filmstrip{margin-top:56px}
}


/* Dot pagination, the same control the testimonials carousel uses. The panel it
   sits on is near-black, so the two keys are re-pitched for that surface: the
   testimonials' --line2 / --blue would sink into it. Inactive dots take the
   panel's own cyan at low alpha, the active one takes it solid. */
.spotlight__dots{display:flex;justify-content:center;gap:10px;margin-top:22px}
.spotlight__dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;
  background:rgba(124,217,234,.28);cursor:pointer;
  transition:background .25s,transform .25s}
.spotlight__dot:hover{background:rgba(124,217,234,.55)}
.spotlight__dot.is-on{background:#7CD9EA;transform:scale(1.3)}
.spotlight__dot:focus-visible{outline:2px solid #7CD9EA;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .spotlight__dot{transition:none}
}

/* on phones the filmstrip ran past the right edge with no way to reach the
   hidden thumbs — let the strip scroll itself instead of clipping */
@media(max-width:640px){
  .filmstrip{overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:6px}
  .filmstrip::-webkit-scrollbar{display:none}
}

/* ═══ styles/40-about-story.css ═══════════════════════════════════════════ */
/* ══ 40-about-story ═══════════════════════════════════════════════════
   About → "Our story": the company history as numbered chapters on a rail.
   Facts are the owner's own (blazop.com/company + this site); the original
   site publishes NO dates, so chapters are ordered, not dated — don't add
   years unless the owner supplies them.
   Blocks: story, story__ch, story__k, story__vision
   ══════════════════════════════════════════════════════════════ */
.story{list-style:none;margin:8px 0 0;padding:34px 0 0;position:relative;
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
/* the rail the chapters hang from */
.story::before{content:"";position:absolute;left:8%;right:8%;top:16px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,#1C75BC,#1798B3 30%,#0E9F6E 55%,#B77E1B 78%,#6A4FC9)}
.story__ch{position:relative;display:flex;flex-direction:column;padding:44px 18px 20px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.story__ch:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 40%,var(--line));
  box-shadow:0 18px 40px rgba(23,43,77,.10)}
/* the numbered node sits ON the rail */
.story__ch i{position:absolute;left:50%;top:-34px;transform:translateX(-50%);
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--mono);font-style:normal;font-weight:700;font-size:12px;color:#fff;
  background:var(--c);box-shadow:0 0 0 5px var(--bg),0 8px 18px color-mix(in srgb,var(--c) 35%,transparent)}
.story__ch b{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;
  letter-spacing:-.01em;line-height:1.25;margin-bottom:8px;color:var(--ink)}
.story__ch p{margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--muted)}
/* pinned to the card's bottom edge so the kickers share one baseline across
   the rail, whatever each chapter's paragraph length */
.story__k{margin-top:auto;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c)}
.story__vision{max-width:760px;margin:30px auto 0;text-align:center;font-size:14.5px;
  color:var(--muted)}
.story__vision b{display:block;margin-top:6px;font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.9vw,21px);letter-spacing:-.01em;color:var(--ink)}
@media(max-width:1024px){
  .story{grid-template-columns:repeat(3,1fr);row-gap:56px}
  .story::before{display:none}
}
@media(max-width:640px){
  .story{grid-template-columns:1fr;row-gap:14px;padding:0 0 0 30px}
  .story::before{display:block;left:11px;right:auto;top:10px;bottom:10px;width:2px;height:auto;
    background:linear-gradient(180deg,#1C75BC,#1798B3 30%,#0E9F6E 55%,#B77E1B 78%,#6A4FC9)}
  .story__ch{padding:18px 18px 16px 18px}
  .story__ch i{left:-30px;top:16px;transform:none;width:26px;height:26px;border-radius:8px;font-size:10px}
}

/* ═══ styles/41-media.css ═══════════════════════════════════════════ */
/* ══ 41-media ══════════════════════════════════════════════════════
   Resources media pages — platform videos, webinars, demos.
   Pages are GENERATED by tools/gen-media.py from content/media.json.
   Each page sets --ma / --ma2 (its accent pair) on .mediapage; every
   gradient below derives from those two, so a page re-skins from two hex
   values. Restrained by design: colour lives in gradients and edges, the
   reading surfaces stay near-white.
   Blocks: mediapage, mhero, vfilter, vgroup, vcard, vplay, vlight, mcta
   ══════════════════════════════════════════════════════════════ */
.mediapage{--ma:#1798B3;--ma2:#1C75BC}

/* ── hero: a wide soft field, not a slab of colour ─────────────────── */
.mhero{position:relative;overflow:hidden;padding:150px 0 56px;
  background:
    radial-gradient(120% 90% at 12% -20%,color-mix(in srgb,var(--ma) 16%,transparent),transparent 62%),
    radial-gradient(90% 80% at 96% 8%,color-mix(in srgb,var(--ma2) 13%,transparent),transparent 60%),
    linear-gradient(168deg,#FBFDFC 0%,#F1F6F4 58%,#EAF1EF 100%)}
.mhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ma) 42%,transparent),transparent)}
.mhero__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--ma) 12%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--ma) 12%,transparent) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 20%,transparent 72%)}
.mhero .container{position:relative;z-index:1;max-width:940px}
.mhero h1{margin:16px 0 16px;font-family:var(--display2);font-weight:700;
  font-size:clamp(32px,4.6vw,52px);letter-spacing:-.03em;line-height:1.08}
.mhero h1 span{display:block;
  background:linear-gradient(100deg,var(--ma2) 8%,var(--ma) 58%,#7BAE7F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mhero__dek{margin:0;max-width:62ch;font-size:16.5px;line-height:1.7;color:var(--muted)}
.mhero__meta{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  padding:7px 15px;border-radius:999px;font-family:var(--mono);font-size:10.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ma) 72%,#0F2A25);
  background:color-mix(in srgb,var(--ma) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--ma) 28%,transparent)}
.mhero__meta i{width:6px;height:6px;border-radius:50%;background:var(--ma);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ma) 18%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .mhero__meta i{animation:mpulse 2.8s ease-in-out infinite}
  @keyframes mpulse{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ma) 18%,transparent)}
    50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--ma) 5%,transparent)}}
}

/* ── the feature player: one big card at the top of demos/webinars ── */
.vfeature{position:relative;margin:-10px auto 0;max-width:1000px;padding:0 20px}
.vfeature__inner{position:relative;border-radius:22px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--ma) 22%,var(--line));
  box-shadow:0 30px 70px rgba(23,43,77,.16),0 0 0 1px rgba(255,255,255,.7) inset;
  background:linear-gradient(160deg,#0C1B22,#08131A)}
.vfeature .vcard__thumb{aspect-ratio:16/9}
.vfeature__body{padding:20px 24px 22px;background:#fff}
.vfeature__body h2{margin:0 0 7px;font-family:var(--display2);font-weight:700;
  font-size:clamp(19px,2.1vw,24px);letter-spacing:-.02em}
.vfeature__body p{margin:0;font-size:14.5px;line-height:1.65;color:var(--muted);max-width:72ch}

/* ── filter chips ──────────────────────────────────────────────────── */
.vfilter{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 0 38px}
.vfilter button{appearance:none;font:inherit;cursor:pointer;
  padding:8px 17px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--muted);background:#fff;border:1px solid var(--line);
  transition:color .2s,border-color .2s,background .2s,transform .2s,box-shadow .2s}
.vfilter button:hover{transform:translateY(-1px);border-color:var(--line2)}
.vfilter button.is-on{color:#fff;border-color:transparent;
  background:linear-gradient(120deg,var(--ma2),var(--ma));
  box-shadow:0 8px 20px color-mix(in srgb,var(--ma) 30%,transparent)}
.vfilter button:focus-visible{outline:2px solid var(--ma);outline-offset:3px}

/* ── groups ────────────────────────────────────────────────────────── */
.vgroup{margin:0 0 54px}
.vgroup__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.vgroup__kicker{font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.2em;padding:5px 11px;border-radius:7px;
  color:color-mix(in srgb,var(--ma) 76%,#0F2A25);
  background:color-mix(in srgb,var(--ma) 9%,#fff);
  border:1px solid color-mix(in srgb,var(--ma) 26%,transparent)}
.vgroup__head h2{margin:0;font-family:var(--display2);font-weight:700;
  font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em}
.vgroup__head p{flex:1 1 260px;margin:0;font-size:13.5px;line-height:1.6;color:var(--dim)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(316px,1fr));gap:22px}

/* ── the video card ────────────────────────────────────────────────── */
.vcard{display:flex;flex-direction:column;text-align:left;cursor:pointer;
  appearance:none;font:inherit;color:inherit;padding:0;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s}
.vcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ma) 40%,var(--line));
  box-shadow:0 20px 44px rgba(23,43,77,.14)}
.vcard:focus-visible{outline:2px solid var(--ma);outline-offset:3px}
.vcard__thumb{position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(160deg,#0E2229,#08131A)}
.vcard__thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1),opacity .3s}
.vcard:hover .vcard__thumb img{transform:scale(1.05)}
/* a soft accent veil so wildly different thumbnails still feel like one set */
.vcard__thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ma2) 20%,transparent) 0%,transparent 42%,rgba(6,16,20,.55) 100%);
  transition:opacity .28s}
.vcard:hover .vcard__thumb::after{opacity:.72}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;z-index:2;
  background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
  box-shadow:0 10px 26px rgba(6,16,20,.4);
  transition:transform .28s cubic-bezier(.2,.7,.3,1.3),background .28s}
.vplay::before{content:"";width:0;height:0;margin-left:4px;
  border-left:17px solid color-mix(in srgb,var(--ma) 82%,#0F2A25);
  border-top:11px solid transparent;border-bottom:11px solid transparent}
.vcard:hover .vplay{transform:translate(-50%,-50%) scale(1.12);background:#fff}
@media (prefers-reduced-motion:no-preference){
  .vcard:hover .vplay{animation:vring 1.6s ease-out infinite}
  @keyframes vring{0%{box-shadow:0 10px 26px rgba(6,16,20,.4),0 0 0 0 rgba(255,255,255,.55)}
    100%{box-shadow:0 10px 26px rgba(6,16,20,.4),0 0 0 22px rgba(255,255,255,0)}}
}
.vcard__body{flex:1 1 auto;display:flex;flex-direction:column;padding:17px 18px 18px}
.vcard__series{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--ma) 70%,#43645C);
  margin-bottom:7px}
.vcard__body h3,.vcard__body .vcard__title{margin:0 0 7px;font-family:var(--display);font-weight:700;
  font-size:16px;letter-spacing:-.015em;line-height:1.3}
.vcard__body p{margin:0 0 14px;font-size:13.2px;line-height:1.6;color:var(--muted)}
.vcard__who{display:block;margin:-6px 0 12px;font-size:12.5px;color:var(--dim)}
.vcard__cue{margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:color-mix(in srgb,var(--ma) 78%,#43645C)}
.vcard__cue i{font-style:normal;transition:transform .25s}
.vcard:hover .vcard__cue i{transform:translateX(4px)}

/* ── lightbox: play in place, no trip to YouTube ───────────────────── */
.vlight{position:fixed;inset:0;z-index:400;display:none;place-items:center;padding:22px;
  background:rgba(6,14,18,.82);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.vlight.is-open{display:grid}
.vlight.is-in{opacity:1}
.vlight__box{width:min(1080px,100%);border-radius:18px;overflow:hidden;
  background:#000;box-shadow:0 40px 90px rgba(0,0,0,.5);
  transform:scale(.97);transition:transform .28s cubic-bezier(.2,.7,.3,1.2)}
.vlight.is-in .vlight__box{transform:none}
.vlight__frame{position:relative;aspect-ratio:16/9}
.vlight__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vlight__bar{display:flex;align-items:center;gap:14px;padding:13px 16px;background:#0B1720}
.vlight__bar b{font-family:var(--display);font-weight:600;font-size:14.5px;color:#EAF6F3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlight__bar a{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:11px;
  color:#8FB0B8;text-decoration:none}
.vlight__bar a:hover{color:#EAF6F3}
.vlight__x{position:absolute;top:-46px;right:0;width:36px;height:36px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font-size:19px;line-height:1;
  transition:background .2s,transform .2s}
.vlight__x:hover{background:rgba(255,255,255,.26);transform:rotate(90deg)}
.vlight__wrap{position:relative;width:min(1080px,100%)}

/* ── closing CTA ───────────────────────────────────────────────────── */
.mcta{position:relative;overflow:hidden;margin:10px 0 0;padding:64px 0 70px;
  background:
    radial-gradient(90% 120% at 18% 0%,color-mix(in srgb,var(--ma) 15%,transparent),transparent 60%),
    radial-gradient(80% 110% at 88% 100%,color-mix(in srgb,var(--ma2) 14%,transparent),transparent 62%),
    linear-gradient(170deg,#F7FAF9,#EFF5F2)}
.mcta .container{position:relative;z-index:1;text-align:center;max-width:720px}
.mcta h2{margin:0 0 12px;font-family:var(--display2);font-weight:700;
  font-size:clamp(24px,3vw,34px);letter-spacing:-.025em}
.mcta p{margin:0 0 26px;font-size:15.5px;line-height:1.7;color:var(--muted)}
.mcta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── entrance animation, staggered by card ─────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .vcard{opacity:0;transform:translateY(14px)}
  .vcard.is-in{opacity:1;transform:none;
    transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
}
@media (prefers-reduced-motion:reduce){
  .vcard,.vcard__thumb img,.vplay,.vlight,.vlight__box{transition:none}
}
@media(max-width:640px){
  .mhero{padding-top:126px}
  .vgrid{grid-template-columns:1fr;gap:18px}
  .vlight{padding:14px}
  .vlight__x{top:-42px}
}

/* ═══ styles/42-blog.css ═══════════════════════════════════════════ */
/* ══ 42-blog ══════════════════════════════════════════════════════
   Home page, replacing the old asset-download "Resources" grid: an
   editorial preview strip. Each thumbnail is a CSS gradient + a single
   line-icon (no photography needed, no broken-image risk), one gradient
   per card so the row doesn't read as three identical tiles.
   Blocks: .blog, .blog__post, .blog__thumb, .blog__body, .blog__cta
   ══════════════════════════════════════════════════════════════ */

.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}

.blog__post{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.blog__post:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:var(--shadow)}

.blog__thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;cursor:default}
.blog__thumb--a{background:linear-gradient(135deg,#0F7E97 0%,#17A8A0 55%,#5AE6A8 100%)}
.blog__thumb--b{background:linear-gradient(135deg,#7A5FD0 0%,#A78BFA 55%,#FFB37A 100%)}
.blog__thumb--c{background:linear-gradient(135deg,#1C75BC 0%,#2E8FD4 55%,#C08F00 100%)}
.blog__thumb::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.4px);
  background-size:22px 22px}
.blog__thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.22) 100%)}
.blog__thumb-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 12px 26px rgba(4,14,20,.2);transition:transform .35s}
.blog__thumb-icon svg{width:26px;height:26px}
.blog__post:hover .blog__thumb-icon{transform:translate(-50%,-50%) scale(1.08) rotate(-4deg)}

.blog__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.blog__tag{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line2);border-radius:99px;
  padding:5px 12px;margin-bottom:12px}
.blog__body h3{margin:0 0 8px;font-size:17px;line-height:1.32;font-family:var(--display)}
.blog__body h3 a{color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;transition:background-size .25s}
.blog__post:hover .blog__body h3 a{background-size:100% 1px}
.blog__body p{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.55;flex:1}
.blog__meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);
  padding-top:14px;border-top:1px solid var(--line)}
.blog__meta i{opacity:.6;font-style:normal}

.blog__cta{display:flex;justify-content:center;margin-top:34px}

@media (max-width:900px){.blog{grid-template-columns:1fr;gap:16px}}

/* ═══ styles/43-careers.css ═══════════════════════════════════════════ */
/* ══ 43-careers ══════════════════════════════════════════════════════
   Careers / job-openings page. Sets --ma/--ma2 like the media pages,
   but its own page (not generated). Adds a CSS-only "climb toward the
   flag" hero animation, a quick-facts icon row, a job filter bar and
   job listing cards.
   Blocks: chero, cclimb, cfacts, cfilters, cjobs, cjob, csummit
   ══════════════════════════════════════════════════════════════ */
body.pg-careers{--ma:#1C75BC;--ma2:#3EE68F}

/* ── hero ─────────────────────────────────────────────────────────── */
.chero{position:relative;overflow:hidden;padding:148px 0 74px;
  background:
    radial-gradient(120% 90% at 8% -20%,color-mix(in srgb,var(--ma) 15%,transparent),transparent 60%),
    radial-gradient(90% 80% at 100% 0%,color-mix(in srgb,var(--ma2) 16%,transparent),transparent 58%),
    linear-gradient(168deg,#FBFDFC 0%,#F1F6F4 58%,#EAF1EF 100%)}
.chero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ma) 40%,transparent),transparent)}
.chero__grid{position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(color-mix(in srgb,var(--ma) 12%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--ma) 12%,transparent) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 80% 70% at 30% 20%,#000 20%,transparent 72%)}
.chero .container{position:relative;z-index:1}
.chero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.chero__eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ma) 72%,#0F2A25)}
.chero__eyebrow::before{content:"";width:22px;height:1.5px;background:var(--ma)}
.chero h1{margin:0 0 18px;font-family:var(--display2);font-weight:700;
  font-size:clamp(32px,4.4vw,50px);letter-spacing:-.03em;line-height:1.12}
.chero h1 .gtext2{background:linear-gradient(100deg,var(--ma) 8%,var(--ma2) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.chero__dek{margin:0 0 30px;max-width:52ch;font-size:16.5px;line-height:1.7;color:var(--muted)}
.chero__row{display:flex;flex-wrap:wrap;gap:14px}
.chero__row .btn__play{display:inline-grid;place-items:center;width:20px;height:20px;
  border-radius:50%;background:var(--ma);color:#fff;font-size:9px}

/* ── quick-facts row ──────────────────────────────────────────────── */
.cfacts{list-style:none;margin:44px 0 0;padding:22px 0 0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:18px;border-top:1px solid var(--line)}
.cfacts li{display:flex;align-items:center;gap:11px}
.cfacts .cfacts__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  flex-shrink:0;background:color-mix(in srgb,var(--c) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent);color:var(--c)}
.cfacts .cfacts__ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cfacts b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cfacts span{display:block;font-size:11.5px;color:var(--dim);margin-top:1px}

/* ── the climb visual ─────────────────────────────────────────────── */
.cclimb{position:relative;aspect-ratio:1/.86;max-width:460px;margin-inline:auto}
.cclimb svg{width:100%;height:100%;overflow:visible}
.cclimb__peak{fill:url(#cclimb-peak-grad)}
.cclimb__peak2{fill:color-mix(in srgb,var(--ma) 10%,#fff);opacity:.7}
.cclimb__step{fill:#fff;stroke:var(--line2);stroke-width:1.4}
.cclimb__pole{stroke:#7A8B85;stroke-width:2;stroke-linecap:round}
.cclimb__flag{fill:var(--ma2);transform-origin:2px 2px;
  animation:cflagwave 2.4s ease-in-out infinite}
@keyframes cflagwave{0%,100%{transform:skewY(0deg)}50%{transform:skewY(-6deg)}}
.cclimb__label{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;
  fill:color-mix(in srgb,var(--ma) 70%,#0F2A25);opacity:0;
  animation:clabelin .7s ease forwards}
.cclimb__label--1{animation-delay:.5s}.cclimb__label--2{animation-delay:1.1s}.cclimb__label--3{animation-delay:1.7s}
@keyframes clabelin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* climbing figures: each walks the same stair path on a staggered, looping timeline */
.cclimb__hiker{offset-path:path("M 34 240 L 90 240 L 90 190 L 150 190 L 150 140 L 210 140 L 210 92 L 262 92 L 262 46 L 300 46");
  offset-rotate:0deg;animation:cwalk 7s linear infinite}
.cclimb__hiker--2{animation-delay:-2.3s}
.cclimb__hiker--3{animation-delay:-4.6s}
@keyframes cwalk{
  0%{offset-distance:0%;opacity:0}
  6%{opacity:1}
  92%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
.cclimb__hiker .cclimb__bob{animation:chikerbob .32s ease-in-out infinite alternate}
@keyframes chikerbob{from{transform:translateY(0)}to{transform:translateY(-2.4px)}}
@media (prefers-reduced-motion:reduce){
  .cclimb__flag,.cclimb__hiker,.cclimb__hiker .cclimb__bob{animation:none}
  .cclimb__label{opacity:1;animation:none}
}
@media (max-width:900px){
  .chero__inner{grid-template-columns:1fr}
  .cclimb{max-width:360px;margin-top:8px}
  .cfacts{grid-template-columns:repeat(2,1fr)}
}

/* ── filter bar ───────────────────────────────────────────────────── */
.cfilters{position:relative;z-index:2;margin:-34px auto 0;max-width:1080px;padding:0 20px}
.cfilters__bar{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;
  box-shadow:var(--shadow)}
.cfilters__field{position:relative;display:flex;align-items:center;gap:9px;
  padding:0 12px;border-radius:11px;border:1px solid var(--line);background:#fff;min-height:46px}
.cfilters__field svg{width:16px;height:16px;flex-shrink:0;color:var(--dim);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cfilters__field input,.cfilters__field select{appearance:none;border:none;background:transparent;
  outline:none;font:inherit;font-size:13.8px;color:var(--ink);width:100%;cursor:pointer}
.cfilters__field input{cursor:text}
.cfilters__field input::placeholder{color:var(--dim)}
.cfilters .btn{min-height:46px}
@media (max-width:900px){
  .cfilters__bar{grid-template-columns:1fr 1fr;grid-template-areas:"kw kw" "cat type" "loc loc" "go go"}
  .cfilters__bar>:nth-child(1){grid-area:kw}
  .cfilters__bar>:nth-child(2){grid-area:cat}
  .cfilters__bar>:nth-child(3){grid-area:type}
  .cfilters__bar>:nth-child(4){grid-area:loc}
  .cfilters__bar>:nth-child(5){grid-area:go}
}

/* ── results head ─────────────────────────────────────────────────── */
.cjobs__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:46px 0 18px}
.cjobs__count{margin:0;font-family:var(--display2);font-weight:700;font-size:21px;letter-spacing:-.01em}
.cjobs__sub{display:block;margin-top:3px;font-size:12.5px;color:var(--dim);font-weight:400;font-family:var(--font)}
.cjobs__view{display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.cjobs__view button{display:grid;place-items:center;width:32px;height:32px;border-radius:7px;border:none;
  background:transparent;color:var(--dim);cursor:pointer;transition:background .18s,color .18s}
.cjobs__view button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cjobs__view button.is-on{background:#fff;color:var(--ma);box-shadow:0 2px 8px rgba(23,43,77,.1)}

/* ── job list / grid ──────────────────────────────────────────────── */
.cjobs__list{display:grid;gap:12px}
.cjobs__list.is-grid{grid-template-columns:repeat(2,1fr)}
.cjob{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 22px;border-radius:16px;background:var(--panel);border:1px solid var(--line);
  text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.cjob:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--ma) 30%,var(--line))}
.cjob__main{min-width:0}
.cjob__title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.cjob__title-row h3{margin:0;font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.cjob__new{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  padding:3px 8px;border-radius:99px;color:#0E7F4F;background:color-mix(in srgb,#3EE68F 18%,#fff);
  border:1px solid color-mix(in srgb,#0E7F4F 30%,transparent)}
.cjob__meta{display:flex;flex-wrap:wrap;gap:16px;margin:0;padding:0;list-style:none}
.cjob__meta li{display:flex;align-items:center;gap:6px;font-size:12.8px;color:var(--muted)}
.cjob__meta svg{width:14px;height:14px;flex-shrink:0;color:var(--dim);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cjob__go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--panel2);border:1px solid var(--line2);color:var(--ma);transition:background .2s,transform .2s,color .2s}
.cjob__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cjob:hover .cjob__go{background:var(--grad);color:#fff;border-color:transparent}
.cjob:hover .cjob__go svg{transform:translateX(2px)}
.cjobs__empty{display:none;text-align:center;padding:50px 20px;color:var(--dim);font-size:14px}
.cjobs__empty.is-shown{display:block}
@media (max-width:640px){
  .cjobs__list.is-grid{grid-template-columns:1fr}
  .cjob{flex-direction:column;align-items:stretch;text-align:left}
  .cjob__go{align-self:flex-end;margin-top:-34px}
}

/* ── "not the right fit" strip ────────────────────────────────────── */
.csummit{margin-top:70px;padding:44px 0;border-top:1px solid var(--line);text-align:center}
.csummit h2{margin:0 0 8px;font-family:var(--display2);font-weight:700;font-size:clamp(20px,2.2vw,26px)}
.csummit p{margin:0 0 22px;color:var(--muted);font-size:14.5px}

/* ═══ styles/44-nav-highlight.css ═══════════════════════════════════════════ */
/* ══ 44-nav-highlight ═════════════════════════════════════════════════════
   Supports script.js's "jump from nav dropdown to the matching card":
   Platform → Core features / Autonomous outcomes → #platform deck card.
   Solutions → By use case / By industry → the matching card on solutions.html.
   Blocks: .nav-deck-link, .js-nav-closing, .js-nav-highlight
   ══════════════════════════════════════════════════════════════ */

/* clicking a row navigates (same page or cross page) — the dropdown must not
   linger over the page while it scrolls/animates in. script.js adds this to
   <body> for a short window after the click, regardless of where the pointer
   still is, then clears it once the destination card has been reached. */
body.js-nav-closing .dropdown{opacity:0 !important;visibility:hidden !important;
  pointer-events:none !important;transition:opacity .16s ease,visibility 0s linear !important}

/* the four columns this now applies to (Core features, Outcomes, By use case,
   By industry) keep the compact row sizing they already had — only the
   pointer affordance changes, restored to the same hover lift every other
   dropdown row gets. */
.nav-deck-link{cursor:pointer}

/* ── landing highlight ────────────────────────────────────────────────────
   Two coats: a short pulse-ring flash so the eye finds the card immediately,
   plus (on the dark platform deck) the same lift the card gets on hover —
   script.js also calls .focus() on deck cards, which triggers that lift via
   the existing :focus rules in 09-platform-deck.css; this class is the extra
   flash layered on top so the jump reads as a destination, not a coincidence. */
.js-nav-highlight{animation:navPulseLight 900ms ease-out 2}

@keyframes navPulseLight{
  0%{box-shadow:0 0 0 0 rgba(23,152,179,.45)}
  45%{box-shadow:0 0 0 10px rgba(23,152,179,0),0 10px 32px -6px rgba(23,152,179,.55)}
  100%{box-shadow:0 0 0 0 rgba(23,152,179,0)}
}

/* dark deck cards (Platform section) get a violet flash that matches the
   deck's own accent instead of the light-page cyan above. */
.deck__card.js-nav-highlight{animation-name:navPulseDark;z-index:65}
@keyframes navPulseDark{
  0%{box-shadow:0 0 0 0 rgba(167,139,250,.7),0 24px 64px rgba(0,0,0,.6)}
  45%{box-shadow:0 0 0 12px rgba(167,139,250,0),0 0 46px 10px rgba(167,139,250,.7),0 24px 64px rgba(0,0,0,.6)}
  100%{box-shadow:0 0 0 0 rgba(167,139,250,0),0 24px 64px rgba(0,0,0,.6)}
}

/* solutions.html cards aren't hover-to-expand like the deck — hold the same
   lift their :hover state already defines for the length of the flash, so
   the destination reads clearly even before the pointer arrives. */
.solutions-grid article.js-nav-highlight{border-color:var(--cyan);transform:translateY(-4px);box-shadow:var(--glow)}
.industry__grid article.js-nav-highlight{border-color:color-mix(in srgb,var(--c) 55%,var(--line));
  transform:translateY(-3px);box-shadow:0 10px 26px -8px color-mix(in srgb,var(--c) 45%,transparent)}

@media (prefers-reduced-motion:reduce){
  .js-nav-highlight,.deck__card.js-nav-highlight{animation:none;outline:2px solid rgba(23,152,179,.85);outline-offset:3px}
}