/*
Theme Name: Cranium
Theme URI: https://cranium.ai/
Author: Cranium
Description: Custom theme for Cranium — end-to-end AI security & governance. Premium dark-mode editorial system built from the official Cranium design system. No third-party page-builder plugins.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: cranium
*/

/* ============================================================
   CRANIUM DESIGN SYSTEM  (source of truth: CRANIUM-DESIGN-SYSTEM.md)
   ============================================================ */
:root{
  --ink:#06030f;
  --ink-2:#0a0518;
  --ink-3:#100a26;
  --indigo:#4500f9;
  --purple:#8752fa;
  --lav:#cd82ff;
  --white:#f4f1ff;
  --mut:#a59fc4;
  --mut-2:#6b6491;
  --line:rgba(168,150,255,.13);
  --line-2:rgba(168,150,255,.07);
  --grad:linear-gradient(118deg,#4500f9,#8752fa 55%,#cd82ff);
  --ease:cubic-bezier(.19,1,.22,1);
  --maxw:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{background:var(--ink);color:var(--white);font-family:'Montserrat',system-ui,sans-serif;line-height:1.6;overflow-x:hidden;position:relative}
.no-scroll{overflow:hidden}
::selection{background:var(--purple);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 40px}
.serif{font-family:'Outfit',Georgia,serif;font-weight:400;letter-spacing:-.018em;line-height:1.02}
.serif em{font-style:normal;font-weight:400}
.mono{font-family:'Space Grotesk',sans-serif}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* kicker */
.kicker{display:inline-flex;align-items:center;gap:14px;font-family:'Space Grotesk';font-size:11.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--mut)}
.kicker .ix{color:var(--lav)}
.kicker::before{content:"";width:30px;height:1px;background:linear-gradient(90deg,var(--lav),transparent)}

/* texture */
.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.glow{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Space Grotesk';font-weight:600;font-size:14.5px;letter-spacing:.01em;padding:14px 26px;border-radius:100px;cursor:pointer;border:none;transition:transform .55s var(--ease),box-shadow .55s var(--ease),background .4s;will-change:transform}
.btn .arr{transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 26px rgba(105,40,250,.34)}
.btn-primary:hover{box-shadow:0 14px 50px rgba(135,82,250,.5)}
.btn-ghost{background:rgba(255,255,255,.035);color:#fff;border:1px solid var(--line);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(205,130,255,.45)}
.link-arrow{font-family:'Space Grotesk';font-weight:600;font-size:14px;color:var(--lav);display:inline-flex;align-items:center;gap:8px;transition:gap .4s var(--ease)}
.link-arrow:hover{gap:13px}

/* ============ HEADER + MEGA MENU ============ */
header{position:fixed;top:0;left:0;width:100%;z-index:1000;transition:background .5s,backdrop-filter .5s,border-color .5s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(6,3,15,.78);backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo img{height:30px;width:auto}
.nav-main{display:flex;align-items:center;height:100%}
.nav-item{position:relative;height:100%;display:flex;align-items:center}
.nav-item>a{position:relative;display:flex;align-items:center;gap:6px;padding:0 18px;height:100%;font-size:14.5px;color:var(--mut);font-weight:500;transition:color .3s;cursor:pointer}
.nav-item>a .chev{width:9px;height:9px;opacity:.6;transition:transform .35s var(--ease)}
.nav-item>a::after{content:"";position:absolute;left:18px;right:18px;bottom:25px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;opacity:0;transition:transform .4s var(--ease),opacity .3s}
.nav-item:hover>a{color:#fff}
.nav-item:hover>a::after{transform:scaleX(1);opacity:1}
.nav-item:hover>a .chev{transform:rotate(180deg)}
.nav-right{display:flex;align-items:center;gap:24px}
.nav-login{font-size:14.5px;color:var(--mut);font-weight:500;transition:color .3s}
.nav-login:hover{color:#fff}

.mega{position:absolute;top:calc(100% - 4px);left:50%;transform:translateX(-50%) translateY(16px) scale(.98);
  background:rgba(9,4,21,.94);backdrop-filter:blur(30px) saturate(160%);border:1px solid var(--line);border-radius:22px;
  padding:22px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--ease);
  box-shadow:0 40px 100px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);z-index:1001}
.mega::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;background:inherit;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.nav-item.wide .mega{width:720px}
.nav-item.res .mega{width:660px}
.nav-item:not(.wide):not(.res) .mega{width:310px;left:0;transform:translateX(0) translateY(16px) scale(.98)}
.nav-item:not(.wide):not(.res) .mega::before{left:46px}
.nav-item:hover .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
.nav-item:not(.wide):not(.res):hover .mega{transform:translateX(0) translateY(0) scale(1)}
.mega-grid{display:grid;gap:22px}
.mega-grid.cols-2{grid-template-columns:1fr 1fr}
.mega-grid.cols-feat{grid-template-columns:1.05fr .95fr}
.mega-grid.cols-res{grid-template-columns:.85fr 1.15fr}
.mega-col h5{font-family:'Space Grotesk';font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-2);margin-bottom:8px;font-weight:600}
.mega-link{display:flex;align-items:center;gap:13px;padding:10px 12px;margin:0 -8px;border-radius:13px;transition:background .35s,transform .35s var(--ease)}
.mega-link:hover{background:linear-gradient(100deg,rgba(135,82,250,.16),rgba(135,82,250,.04));transform:translateX(3px)}
.mega-link .mi{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(135,82,250,.1);color:var(--lav);flex-shrink:0;transition:background .35s,color .35s,transform .4s var(--ease)}
.mega-link .mi svg{width:17px;height:17px}
.mega-link:hover .mi{background:var(--grad);color:#fff;transform:scale(1.08) rotate(-3deg)}
.mega-link .mt{display:flex;flex-direction:column;gap:1px;min-width:0}
.mega-link b{font-size:14px;font-weight:600;color:#fff}
.mega-link span{font-size:12px;color:var(--mut-2)}
.mega-link .ma{margin-left:auto;color:var(--lav);opacity:0;transform:translateX(-7px);transition:.4s var(--ease);flex-shrink:0}
.mega-link:hover .ma{opacity:1;transform:translateX(0)}
/* feature card */
.mega-feat{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;min-height:300px;background:#0c0620}
.mega-feat .mf-thumb{position:relative;height:140px;overflow:hidden;background:linear-gradient(135deg,#4500f9,#8752fa 55%,#cd82ff)}
.mega-feat .mf-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 80% 10%,transparent,rgba(12,6,32,.85)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='140'%3E%3Cg fill='none' stroke='rgba(255,255,255,.25)' stroke-width='1'%3E%3Ccircle cx='150' cy='40' r='30'/%3E%3Ccircle cx='150' cy='40' r='52'/%3E%3Cpath d='M0 110 L60 80 L110 100 L200 50'/%3E%3C/g%3E%3C/svg%3E") right top/contain no-repeat;transition:transform .6s var(--ease)}
.mega-feat:hover .mf-thumb::after{transform:scale(1.06)}
.mega-feat .mf-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.mega-feat .tag{font-family:'Space Grotesk';font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--lav);font-weight:600}
.mega-feat h4{font-family:'Outfit';font-size:1.3rem;line-height:1.1;margin-top:9px;font-weight:500}
.mega-feat .ml{margin-top:auto;padding-top:16px}
/* blog/resource cards */
.res-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.res-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.02);transition:transform .4s var(--ease),border-color .4s}
.res-card:hover{transform:translateY(-4px);border-color:rgba(205,130,255,.45)}
.res-thumb{height:88px;position:relative;overflow:hidden}
.res-thumb .rt-img{position:absolute;inset:0;transition:transform .6s var(--ease)}
.res-thumb .rt-img::after{content:"";position:absolute;inset:0;opacity:.6;background:radial-gradient(110% 130% at 85% 15%,transparent,rgba(9,4,21,.75)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='90'%3E%3Cg fill='none' stroke='rgba(255,255,255,.3)' stroke-width='1'%3E%3Ccircle cx='120' cy='28' r='20'/%3E%3Ccircle cx='120' cy='28' r='36'/%3E%3Cpath d='M0 70 L40 52 L80 64 L160 30'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat}
.res-card:hover .rt-img{transform:scale(1.07)}
.res-body{padding:11px 13px 14px}
.res-body .rc-tag{font-family:'Space Grotesk';font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lav);font-weight:600}
.res-body .rc-title{font-size:12.8px;font-weight:600;color:#fff;line-height:1.25;margin-top:6px}
.res-more{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.res-mini{display:flex;flex-direction:column;gap:3px;padding:9px 10px;margin:0 -10px;border-radius:10px;transition:background .3s}
.res-mini:hover{background:linear-gradient(100deg,rgba(135,82,250,.14),rgba(135,82,250,.03))}
.res-mini .rm-tag{font-family:'Space Grotesk';font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--lav);font-weight:600}
.res-mini .rm-t{font-size:12.3px;color:#fff;font-weight:500;line-height:1.3}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:1100}
.burger span{width:25px;height:2px;background:#fff;border-radius:2px;transition:.45s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;background:rgba(6,3,15,.98);backdrop-filter:blur(22px);z-index:1050;padding:108px 30px 40px;transform:translateY(-100%);transition:transform .65s var(--ease);visibility:hidden;overflow-y:auto}
.mobile-menu.open{transform:translateY(0);visibility:visible}
.m-group{border-bottom:1px solid var(--line)}
.m-head{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;color:#fff;font-family:'Outfit';font-size:1.7rem;font-weight:500;padding:18px 0;cursor:pointer;text-align:left}
.m-head .pm{font-family:'Space Grotesk';color:var(--lav);font-size:1.4rem;transition:transform .4s}
.m-group.open .m-head .pm{transform:rotate(45deg)}
.m-sub{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.m-sub a{display:block;color:var(--mut);font-size:1rem;padding:9px 0 9px 4px}
.m-cta{margin-top:30px;display:flex;flex-direction:column;gap:12px}
.m-cta .btn{font-size:16px;padding:17px}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:80px}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero-svg{position:absolute;z-index:2;inset:0;pointer-events:none}
.hero-veil{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(95% 80% at 78% 42%,transparent 34%,rgba(6,3,15,.6) 72%,var(--ink) 100%),linear-gradient(90deg,var(--ink) 4%,rgba(6,3,15,.55) 34%,transparent 60%),linear-gradient(0deg,var(--ink),transparent 24%)}
.hero-inner{position:relative;z-index:4;width:100%}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:40px}
.hero-copy{max-width:700px}
.h-rise{opacity:0;transform:translateY(28px);animation:rise 1s var(--ease) forwards}
.h-rise.d1{animation-delay:.05s}.h-rise.d2{animation-delay:.18s}.h-rise.d3{animation-delay:.34s}.h-rise.d4{animation-delay:.5s}.h-rise.d5{animation-delay:.64s}
@keyframes rise{to{opacity:1;transform:none}}
.hero h1{font-family:'Outfit';font-weight:600;font-size:clamp(2.4rem,4.7vw,4.4rem);line-height:1.02;letter-spacing:-.025em;margin:24px 0 0}
.hero h1 .l1,.hero h1 em{white-space:nowrap}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{font-size:clamp(1.04rem,1.4vw,1.22rem);color:var(--mut);max-width:46ch;margin:30px 0 0;font-weight:400}
.hero-cta{display:flex;gap:15px;margin-top:38px;flex-wrap:wrap}
.hero-trust{margin-top:46px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-trust .dot{width:5px;height:5px;border-radius:50%;background:var(--lav)}
.hero-trust span{font-size:13px;color:var(--mut-2);font-family:'Space Grotesk';letter-spacing:.02em}
.hero-trust b{color:var(--mut);font-weight:500}
.hero-words{display:flex;gap:9px;flex-wrap:wrap;margin-top:34px}
.hw{font-family:'Space Grotesk';font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding:7px 15px;border:1px solid var(--line);border-radius:100px}
.hw.on{color:var(--lav);border-color:rgba(205,130,255,.4);background:rgba(205,130,255,.06)}
.scroll-cue{position:absolute;bottom:26px;left:40px;z-index:4;display:flex;align-items:center;gap:12px;color:var(--mut-2);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-family:'Space Grotesk'}
.scroll-cue .bar{width:46px;height:1px;background:var(--mut-2);position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;inset:0;width:40%;background:var(--lav);animation:slide 2.4s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-100%)}60%,100%{transform:translateX(280%)}}

/* hero side stat readout */
.hero-readout{position:absolute;right:clamp(40px,4.5vw,128px);top:50%;transform:translateY(-50%);z-index:4;text-align:right;display:flex;flex-direction:column;gap:22px;max-width:240px}
.ro{opacity:0;animation:rise 1s var(--ease) forwards}
.ro:nth-child(1){animation-delay:.7s}.ro:nth-child(2){animation-delay:.82s}.ro:nth-child(3){animation-delay:.94s}
.ro .n{font-family:'Outfit';font-size:2rem;font-weight:500;line-height:1.22;padding-bottom:2px}
.ro .l{font-family:'Space Grotesk';font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut-2);margin-top:6px;white-space:nowrap}

/* ============ TRUST STRIP ============ */
.trust{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2);position:relative;z-index:5}
.trust-in{display:flex;align-items:center;gap:40px}
.trust-lab{font-family:'Space Grotesk';font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-2);white-space:nowrap;flex-shrink:0}
.trust-marq{flex:1;min-width:0;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)}
.trust-track{display:flex;align-items:center;gap:54px;width:max-content;animation:marq 38s linear infinite}
.trust:hover .trust-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.aw-item{display:flex;align-items:center;gap:12px;flex-shrink:0;color:var(--mut)}
.aw-item .seal{width:22px;height:22px;color:var(--lav);opacity:.85;flex-shrink:0}
.aw-item b{font-family:'Space Grotesk';font-weight:600;color:#fff;font-size:14px}
.aw-item span{font-size:13px;color:var(--mut-2)}
/* customer logo marquee — uniform single color + height, counter-scrolling */
.trust-in--cust{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
/* Proof band — logo-free social proof (awards + certs + one customer voice).
   Replaces the customer-logo strip while logo permissions are pending. */
.proof-band{padding:44px 0 38px}
.pb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,70px);align-items:center}
.pb-awards{display:flex;align-items:center;gap:28px}
.pb-badges{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pb-badges img{height:60px;width:auto;border-radius:10px;border:1px solid var(--line);filter:saturate(.95);opacity:.92}
.pb-quote{margin:0;padding-left:26px;border-left:2px solid transparent;
  border-image:linear-gradient(180deg,#4500f9,#cd82ff) 1}
.pb-quote blockquote{color:var(--mut);font-size:.98rem;line-height:1.65;font-style:italic}
.pb-quote figcaption{margin-top:10px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-2)}
.pb-certs{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;color:var(--mut-2);font-size:12px;letter-spacing:.08em}
.pb-certs .dot{width:4px;height:4px;border-radius:50%;background:var(--lav)}
@media(max-width:880px){
  .pb-grid{grid-template-columns:1fr;gap:26px}
  .pb-awards{flex-direction:column;align-items:flex-start;gap:16px}
  .pb-badges img{height:52px}
}
.cust-track{gap:56px;animation-duration:52s;animation-direction:reverse}
.cust-item{display:flex;align-items:center;flex-shrink:0;white-space:nowrap}
.cust-logo{height:26px;width:auto;max-width:160px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.7;transition:opacity .3s}
.cust-item:hover .cust-logo{opacity:1}
.cust-fallback{display:none}
.cust-item.is-text .cust-fallback{display:inline;font-family:'Space Grotesk';font-weight:600;
  font-size:18px;letter-spacing:.005em;color:rgba(244,241,255,.66);transition:color .3s}
.cust-item.is-text:hover .cust-fallback{color:#fff}

/* ============ CUSTOMER TRUST WALL ============
   Sits immediately under the hero — the first thing after the promise is the
   proof. Static centred row (not the old marquee: a short approved list reads
   as thin when it loops). Every mark is flattened to one white and given its
   own optical height via --ch, so no single brand outshouts the rest. */
.cwall{position:relative;z-index:5;overflow:hidden;padding:34px 0 32px;
  background:radial-gradient(62% 150% at 50% 0%,rgba(69,0,249,.17),transparent 72%),var(--ink-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cwall::before,.cwall::after{content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(205,130,255,.40),transparent)}
.cwall::before{top:0}
.cwall::after{bottom:0}
.cwall .wrap{position:relative;z-index:2}
.cw-lab{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,22px);
  font-family:'Space Grotesk';font-size:11px;font-weight:600;letter-spacing:.24em;
  line-height:1.5;text-transform:uppercase;color:var(--mut);text-align:center;text-wrap:balance}
.cw-lab::before,.cw-lab::after{content:"";height:1px;flex:0 0 auto;width:clamp(18px,7vw,92px)}
.cw-lab::before{background:linear-gradient(90deg,transparent,var(--lav))}
.cw-lab::after{background:linear-gradient(90deg,var(--lav),transparent)}
.cw-row{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(26px,5vw,72px);margin-top:24px}
.cw-item{display:flex;align-items:center;justify-content:center;min-height:38px}
.cw-item img{height:var(--ch,30px);width:auto;max-width:190px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.64;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cw-item:hover img{opacity:1;transform:translateY(-3px)}
/* Desktop: label left, logos right, all on ONE line. The stacked centred
   version made the band ~207px tall, which read as a section rather than a
   strip. Scoped to min-width so the collapsed layouts below are untouched.
   Threshold is 900px, not the theme's usual 1021: a 1024px laptop reports
   ~1009px of viewport once the scrollbar is out, and those machines should
   get the one-row band, not the tall stacked one. */
@media(min-width:900px){
  .cwall{padding:26px 0 24px}
  .cwall .wrap{display:flex;align-items:center;gap:clamp(30px,3.4vw,52px)}
  .cw-lab{flex:0 0 auto;justify-content:flex-start;text-align:left;
    white-space:nowrap;line-height:1.45;text-wrap:none}
  .cw-lab::before{display:none}
  .cw-lab::after{width:1px;height:40px;
    background:linear-gradient(180deg,transparent,rgba(205,130,255,.45),transparent)}
  .cw-row{flex:1 1 auto;margin-top:0;justify-content:space-between;
    gap:clamp(18px,2.4vw,44px);flex-wrap:nowrap}
}
@media(max-width:899px){
  .cwall{padding:30px 0 28px}
  .cw-row{gap:clamp(24px,4.6vw,48px);margin-top:22px}
  .cw-item img{height:calc(var(--ch,30px) * .92)}
}
@media(max-width:760px){
  .cwall{padding:30px 0 28px}
  .cw-lab{font-size:10px;letter-spacing:.2em;gap:12px}
  .cw-lab::before,.cw-lab::after{width:clamp(14px,5vw,40px)}
  /* 2x2 grid, not flex-wrap: four logos across a phone wrap 3+1, and a lone
     logo on its own line reads as unfinished the same way a text orphan does. */
  .cw-row{display:grid;grid-template-columns:repeat(2,1fr);justify-items:center;
    gap:24px 16px;margin-top:20px}
  .cw-item{min-height:32px;width:100%}
  .cw-item img{height:calc(var(--ch,30px) * .82);max-width:100%}
}

/* ============ EVENT RECAP — SHARED COMPONENTS (.evr-*) ============
   For recap pages built from a small photo set. Global on purpose: the Black
   Hat recap keeps its own .rc-* classes inside that template's <style> block,
   which is exactly why they cannot be reused anywhere else. Anything a second
   recap page needs lives here instead. */
.evr-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,34px);margin-top:44px}
.evr-shot{margin:0;display:flex;flex-direction:column}
.evr-shot-img{position:relative;overflow:hidden;border-radius:20px;
  border:1px solid var(--line);background:var(--ink-2);
  box-shadow:0 34px 80px -38px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.evr-shot-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(6,3,15,.42));opacity:.9}
.evr-shot-img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  transform:scale(1.008);transition:transform 1.1s var(--ease)}
.evr-shot:hover .evr-shot-img img{transform:scale(1.045)}
.evr-shot figcaption{margin-top:18px;display:flex;flex-direction:column;gap:7px}
.evr-shot figcaption b{font-family:'Outfit',sans-serif;font-weight:500;font-size:1.16rem;
  line-height:1.25;letter-spacing:-.012em;color:var(--white);text-wrap:balance}
.evr-shot figcaption span{color:var(--mut);font-size:.95rem;line-height:1.62;text-wrap:balance}
@media(max-width:860px){
  .evr-pair{grid-template-columns:1fr;gap:34px;margin-top:34px}
  .evr-shot-img{border-radius:16px}
  .evr-shot figcaption{margin-top:15px}
  .evr-shot figcaption b{font-size:1.08rem}
}
/* .evr-split: section head + two PORTRAIT frames on one row (desktop),
   head on its own row with the pair below (tablet), stacked (phone). Column
   assignment is scoped to the tablet query so the phone grid never grows a
   phantom implicit column. */
.evr-split{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,34px);align-items:end}
.evr-split .sec-head{align-self:center;padding-right:clamp(0px,2vw,24px)}
.evr-shot--tall .evr-shot-img img{aspect-ratio:3/4}
@media(max-width:1020px){
  .evr-split{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .evr-split .sec-head{grid-column:1/-1;padding-right:0}
}
@media(max-width:560px){
  .evr-split{grid-template-columns:minmax(0,1fr);row-gap:34px}
}

/* ============ SECTION ============ */
section.block{position:relative;padding:150px 0;z-index:5;overflow:hidden}
.sec-head{max-width:780px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head h2{font-family:'Outfit';font-weight:600;font-size:clamp(2.3rem,4.8vw,3.9rem);line-height:1.02;letter-spacing:-.02em;margin-top:22px}
.sec-head h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec-head p{color:var(--mut);font-size:1.12rem;margin-top:24px;max-width:58ch}
.sec-head.center p{margin-left:auto;margin-right:auto}

/* reveal (only hides when JS present) */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.s1{transition-delay:.08s}.js .reveal.s2{transition-delay:.16s}.js .reveal.s3{transition-delay:.24s}.js .reveal.s4{transition-delay:.32s}.js .reveal.s5{transition-delay:.4s}.js .reveal.s6{transition-delay:.48s}

/* ============ PROBLEM ============ */
.problem{background:var(--ink)}
.risk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:80px;border-top:1px solid var(--line)}
.risk{padding:44px 30px 40px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);position:relative;transition:background .5s}
.risk:last-child{border-right:none}
.risk:hover{background:linear-gradient(180deg,rgba(135,82,250,.07),transparent)}
.risk .rnum{font-family:'Space Grotesk';font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--mut-2);margin-bottom:30px}
.risk .ricon{width:54px;height:54px;margin-bottom:26px}
.risk h3{font-family:'Outfit';font-size:1.55rem;font-weight:500;margin-bottom:12px}
.risk p{color:var(--mut);font-size:1rem}
.risk .tagline{margin-top:22px;font-family:'Space Grotesk';font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--lav);font-weight:600}

/* ============ PILLARS ============ */
.plan{background:linear-gradient(180deg,var(--ink),var(--ink-2) 55%,var(--ink))}
.pillar{display:grid;grid-template-columns:1fr .92fr;gap:56px;align-items:center;padding:52px 0;border-bottom:1px solid var(--line)}
.pillar:first-of-type{border-top:1px solid var(--line)}
.pillar:nth-child(even) .pillar-vis{order:-1}
.pillar-copy .pnum{font-family:'Outfit';font-size:1.35rem;color:var(--mut-2);font-style:normal}
.pillar-copy h3{font-family:'Outfit';font-size:clamp(2rem,3.6vw,3rem);font-weight:600;letter-spacing:-.02em;margin:8px 0 0;line-height:1.12}
.pillar-copy .pdesc{color:var(--mut);font-size:1.05rem;margin-top:16px;max-width:42ch}
.pillar-copy .pmeta{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.pillar-copy .pmeta div{display:flex;align-items:center;gap:13px;font-size:.94rem;color:var(--white)}
.pillar-copy .pmeta .pk{width:6px;height:6px;border-radius:50%;background:var(--lav);box-shadow:0 0 10px var(--lav)}
.pillar-copy .replaced{margin-top:20px;font-family:'Space Grotesk';font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut-2)}
.pillar-vis{position:relative;aspect-ratio:1.5;max-height:320px;width:100%;margin-left:auto;border:1px solid var(--line);border-radius:22px;background:linear-gradient(165deg,rgba(255,255,255,.03),rgba(255,255,255,0));overflow:hidden;display:flex;align-items:center;justify-content:center}
.pillar-vis::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 45%,rgba(135,82,250,.16),transparent 70%)}
.pillar-vis svg{width:auto;height:78%;max-width:80%;position:relative;z-index:1}
.plan-foot{margin-top:64px;text-align:center}
.plan-foot .cont-line{font-family:'Outfit';font-style:normal;font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:500}
.plan-foot .cont-line .grad-text{font-style:normal}

/* ============ CONTINUOUSLY ============ */
.cont{background:var(--ink);overflow:hidden}
.cont-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center}
.cont-copy h2{font-family:'Outfit';font-weight:600;font-size:clamp(2.3rem,4.8vw,3.8rem);line-height:1.02;margin-top:22px}
.cont-copy h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cont-copy p{color:var(--mut);font-size:1.12rem;margin-top:24px;max-width:44ch}
.cycle-list{margin-top:36px}
.cycle-item{display:flex;align-items:flex-start;gap:18px;padding:18px 0;border-top:1px solid var(--line);transition:padding-left .4s var(--ease)}
.cycle-item .ci-ix{font-family:'Space Grotesk';font-size:12px;font-weight:600;color:var(--mut-2);padding-top:3px;width:24px;flex-shrink:0;transition:color .4s}
.cycle-item .ci-tx b{font-family:'Space Grotesk';font-weight:600;font-size:1.05rem;color:var(--mut);transition:color .4s}
.cycle-item .ci-tx p{margin:0;font-size:.92rem;color:var(--mut-2);max-height:0;overflow:hidden;transition:max-height .5s var(--ease),margin .4s}
.cycle-item.on{padding-left:12px}
.cycle-item.on .ci-ix{color:var(--lav)}
.cycle-item.on .ci-tx b{color:#fff}
.cycle-item.on .ci-tx p{max-height:60px;margin-top:5px}
.cont-vis{position:relative;aspect-ratio:1;max-width:560px;margin:0 auto;width:100%}
#loop-svg{width:100%;height:100%;overflow:visible}

/* ============ PRODUCT (Cranium ONE) ============ */
.product{background:linear-gradient(180deg,var(--ink-2),var(--ink) 60%)}
.product .glow{width:680px;height:520px;background:var(--purple);top:14%;left:50%;transform:translateX(-50%);opacity:.16}
.prod-cta{margin-top:40px;display:flex;justify-content:center;gap:15px;flex-wrap:wrap}
/* Cranium ONE peek — the real product runs in an isolated iframe (its own CSS never touches the theme).
   The negative margin gives the peek's glow room to breathe; the iframe pads the same amount back. */
.one-peek{margin:60px -48px -40px;position:relative}
.one-peek-frame{display:block;width:100%;height:970px;border:0;background:transparent;color-scheme:dark}
/* Height fallbacks per mode (the peek posts its exact height once loaded; these keep layout from jumping) */
@media(max-width:1279px){.one-peek-frame{height:calc((100vw - 80px) * .785 + 44px)}}

.bezel{margin-top:60px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#080414;box-shadow:0 50px 130px rgba(0,0,0,.6),0 0 0 1px rgba(205,130,255,.06);position:relative}
.bezel::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.bf-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.bf-dots{display:flex;gap:7px}.bf-dots i{width:11px;height:11px;border-radius:50%;display:block}
.bf-dots i:nth-child(1){background:#ff5d6c}.bf-dots i:nth-child(2){background:#f5b23d}.bf-dots i:nth-child(3){background:#37d39b}
.bf-url{flex:1;max-width:420px;margin:0 auto;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:6px 14px;font-family:'Space Grotesk';font-size:12px;color:var(--mut-2);text-align:center}
.bf-url b{color:var(--mut);font-weight:500}
.bf-live{display:flex;align-items:center;gap:7px;font-family:'Space Grotesk';font-size:11px;color:var(--mut-2);letter-spacing:.04em}
.bf-live .pip{width:7px;height:7px;border-radius:50%;background:#37d39b;box-shadow:0 0 9px #37d39b;animation:pip 2s ease-in-out infinite}
@keyframes pip{0%,100%{opacity:1}50%{opacity:.3}}
.dash{display:grid;grid-template-columns:218px 1fr;min-height:540px}
.dash-side{border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:5px;background:rgba(255,255,255,.012)}
.ds-brand{display:flex;align-items:center;gap:9px;padding:4px 8px 16px}
.ds-brand img{height:20px}
.ds-brand{align-items:flex-start}
.ds-brand .one{font-family:'Space Grotesk';font-weight:700;font-size:9px;letter-spacing:.13em;color:#fff;background:var(--purple);padding:3px 7px 2px;border-radius:100px;line-height:1;align-self:flex-start;margin-top:-1px}
.ds-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;font-family:'Space Grotesk';font-size:13px;font-weight:500;color:var(--mut-2);transition:background .3s,color .3s;cursor:default}
.ds-nav svg{width:16px;height:16px;flex-shrink:0}
.ds-nav.act{background:linear-gradient(100deg,rgba(135,82,250,.22),rgba(135,82,250,.05));color:#fff}
.ds-nav.act svg{color:var(--lav)}
.ds-nav .cnt{margin-left:auto;font-size:10px;opacity:.7}
.ds-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:11px 8px 2px;border-top:1px solid var(--line)}
.ds-user .av{width:30px;height:30px;border-radius:8px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:12px;color:#fff}
.ds-user .un{font-size:12px;color:#fff;font-weight:600;font-family:'Space Grotesk'}
.ds-user .ur{font-size:10.5px;color:var(--mut-2)}
.dash-main{padding:18px 20px 24px;min-width:0}
.dm-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.dm-tab{border:1px solid var(--line);border-radius:11px;padding:11px 14px;display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-size:13px;color:var(--mut);background:rgba(255,255,255,.015)}
.dm-tab .tn{font-size:10px;color:var(--mut-2)}
.dm-tab .tc{margin-left:auto;font-weight:700;color:#fff}
.dm-tab.act{border-color:rgba(205,130,255,.5);background:linear-gradient(100deg,rgba(135,82,250,.16),transparent)}
.dm-tab.act .dot{color:var(--lav)}
.dm-h{font-family:'Outfit';font-size:1.5rem;font-weight:500}
.dm-sub{color:var(--mut-2);font-size:.9rem;margin:2px 0 18px}
.dm-grid{display:grid;grid-template-columns:300px 1fr;gap:16px}
.pcard{border:1px solid var(--line);border-radius:14px;padding:18px;background:rgba(255,255,255,.018)}
.pcard .pc-lab{font-family:'Space Grotesk';font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);font-weight:600}
.pcard .pc-h{font-size:1rem;font-weight:600;color:#fff;margin-top:3px}
.gauge-wrap{display:flex;justify-content:center;margin:6px 0 2px}
.posture-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;text-align:center}
.posture-stats div .pn{font-family:'Space Grotesk';font-size:1.5rem;font-weight:700;line-height:1}
.posture-stats div .pl{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut-2);margin-top:4px}
.threatbar{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.threatbar .tt{display:flex;justify-content:space-between;font-family:'Space Grotesk';font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut-2)}
.threatbar .tt b{color:#f5b23d}
.threatbar .seg{display:flex;gap:4px;margin-top:8px}
.threatbar .seg i{height:5px;border-radius:3px;flex:1;background:rgba(255,255,255,.08)}
.threatbar .seg i.on{background:#f5b23d}
.signals{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.sig{border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(255,255,255,.012);position:relative;overflow:hidden}
.sig .sl{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mut)}
.sig .sl i{width:7px;height:7px;border-radius:2px}
.sig .sv{font-family:'Space Grotesk';font-size:1.7rem;font-weight:700;margin-top:7px;line-height:1}
.sig .sv span{font-size:.7rem;color:var(--mut-2);font-weight:500}
.sig .sd{position:absolute;top:14px;right:14px;font-family:'Space Grotesk';font-size:11px;font-weight:600}
.sig .spark{margin-top:8px;width:100%;height:30px;display:block}
.up{color:#ff5d6c}.upw{color:#f5b23d}
.policy{grid-column:1/-1;border:1px solid var(--line);border-radius:14px;padding:18px;background:rgba(255,255,255,.018);display:grid;grid-template-columns:1fr 1.5fr;gap:24px;align-items:center}
.policy .pp .ppn{font-family:'Space Grotesk';font-size:1.9rem;font-weight:700;line-height:1}
.policy .pp .ppl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut-2);margin-top:4px}
.policy .pp-row{display:flex;gap:26px;margin-top:4px}
.pstack{height:12px;border-radius:6px;overflow:hidden;display:flex}
.pstack i{height:100%}
.plegend{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:14px}
.plegend div{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mut)}
.plegend div i{width:9px;height:9px;border-radius:2px}
.plegend div b{margin-left:auto;color:#fff;font-family:'Space Grotesk'}

/* ============ PROOF ============ */
.proof{background:linear-gradient(180deg,var(--ink),var(--ink-3))}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-b{padding:46px 24px;border-right:1px solid var(--line)}
.stat-b:last-child{border-right:none}
.stat-b .n{font-family:'Outfit';font-size:clamp(2.6rem,5vw,3.8rem);font-weight:600;line-height:1}
.stat-b .l{color:var(--mut);font-size:.94rem;margin-top:14px;max-width:22ch}
.awards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:70px}
.aw-card{position:relative;padding:28px 24px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02);transition:transform .55s var(--ease),border-color .5s}
.aw-card:hover{transform:translateY(-6px);border-color:rgba(205,130,255,.32)}
.aw-card .src{font-family:'Outfit';font-weight:500;font-size:1.2rem}
.aw-card .txt{color:var(--mut);font-size:.9rem;margin-top:12px}
.pull{margin-top:96px;text-align:center;max-width:1000px;margin-left:auto;margin-right:auto}
.pull p{font-family:'Outfit';font-weight:500;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.22;letter-spacing:-.01em}
.pull p em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pull .by{margin-top:26px;font-family:'Space Grotesk';font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-2)}

/* ============ FINAL CTA ============ */
.final{position:relative;padding:160px 0;background:var(--ink);overflow:hidden}
.final-card{position:relative;border-radius:34px;padding:96px 48px;text-align:center;overflow:hidden;border:1px solid rgba(205,130,255,.2);background:linear-gradient(150deg,rgba(69,0,249,.16),rgba(205,130,255,.08))}
.final h2{font-family:'Outfit';font-weight:600;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1;letter-spacing:-.022em;max-width:16ch;margin:14px auto 0}
.final h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.final p{color:var(--mut);font-size:1.16rem;margin:26px auto 42px;max-width:50ch}
.final-cta{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}
.final-cta .btn{font-size:16px;padding:17px 34px}

/* ============ FOOTER ============ */
footer{background:var(--ink-2);border-top:1px solid var(--line);padding:84px 0 38px}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.foot-brand img{height:28px;margin-bottom:22px}
.foot-brand p{color:var(--mut);font-size:.95rem;max-width:28ch}
.foot-soc{display:flex;gap:12px;margin-top:26px}
.foot-soc a{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--mut);transition:.35s}
.foot-soc a:hover{color:#fff;border-color:var(--lav);transform:translateY(-3px)}
.foot-col h4{font-family:'Space Grotesk';font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-2);margin-bottom:18px}
.foot-col a{display:block;color:var(--mut);font-size:.93rem;padding:7px 0;transition:color .3s}
.foot-col a:hover{color:#fff}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:30px;margin-top:30px;border-top:1px solid var(--line)}
.foot-legal a{color:var(--mut-2);font-size:.8rem;letter-spacing:.02em;transition:color .2s}
.foot-legal a:hover{color:var(--lav)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:18px;color:var(--mut-2);font-size:.85rem;flex-wrap:wrap;gap:12px}
.foot-bot .mono{letter-spacing:.04em}

/* ===== animated gradient border (full outline, follows each card's radius) ===== */
@keyframes edgeflow{to{background-position:200% 50%}}
.aw-card{position:relative}
/* partial bottom + left accent (follows rounded corner) — awards, pillars, final CTA & Cranium ONE frame */
.aw-card::after,.pillar-vis::after,.final-card::after,.bezel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:4;pointer-events:none;--t:2.5px;padding:var(--t);
  background:linear-gradient(225deg,transparent 34%,rgba(135,82,250,.7) 64%,#cd82ff 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  filter:drop-shadow(0 0 6px rgba(135,82,250,.3));opacity:.85}
.bezel::before{filter:drop-shadow(0 0 11px rgba(135,82,250,.42))}
/* inner Cranium ONE panels — soft left & right side glow (shadow-like, no hard border) */
.pcard,.policy{position:relative}
.pcard::after,.sig::after,.policy::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(120,60,250,.5),transparent 15%),linear-gradient(270deg,rgba(205,130,255,.42),transparent 15%);
  opacity:.6}

/* ============ RESPONSIVE ============ */
@media(max-width:1180px){
  .hero-readout{display:none}
  .hero-grid{grid-template-columns:1fr}
}
@media(max-width:920px){
  .nav-main,.nav-right{display:none}
  .burger{display:flex}
  .wrap{padding:0 26px}
  section.block{padding:104px 0}
  .risk-grid{grid-template-columns:1fr;border-top:none}
  .risk{border-right:none}
  .pillar{grid-template-columns:1fr;gap:36px;padding:64px 0}
  .pillar:nth-child(even) .pillar-vis{order:0}
  .pillar-vis{max-width:420px}
  .cont-grid{grid-template-columns:1fr;gap:44px}
  .cont-vis{order:-1;max-width:420px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat-b:nth-child(2){border-right:none}
  .stat-b:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .awards-grid{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr;gap:34px}
  .foot-brand{grid-column:1/-1}
  .scroll-cue{left:26px}
  .bezel{margin-top:42px}
  .one-peek{margin:42px 0 -40px}
  .one-peek-frame{height:calc((100vw - 52px) * .75 + 290px)}
  .dash{grid-template-columns:1fr}
  .dash-side{display:none}
  .dm-tabs{grid-template-columns:1fr 1fr}
  .dm-grid{grid-template-columns:1fr}
  .policy{grid-template-columns:1fr;gap:18px}
}
@media(max-width:651px){.one-peek-frame{height:calc((100vw - 52px) * 1.25 + 300px)}}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .one-peek-frame{height:calc((100vw - 40px) * 1.25 + 300px)}
  .hero h1{font-size:clamp(2.6rem,11vw,3.6rem)}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .trust-in{flex-direction:column;align-items:stretch;gap:18px}
  .trust-marq{width:100%}
  .trust-lab{align-self:flex-start}
  .stats{grid-template-columns:1fr}
  .stat-b{border-right:none;border-bottom:1px solid var(--line)}
  /* awards stay a 2-up grid on phones — full-width badges read like billboards */
  .awards-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:44px}
  .aw-card{padding:14px 12px 16px;border-radius:14px}
  .aw-badge{border-radius:9px;margin-bottom:10px}
  .aw-card .src{font-size:.98rem}
  .aw-card .txt{font-size:.8rem;margin-top:8px;line-height:1.45}
  .final-card{padding:60px 24px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .h-rise,.ro{opacity:1!important;transform:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
}

/* ---- pillar SVG animations ---- */
/* ---- pillar SVG animations (CSS, always-on, robust) ---- */
@media (prefers-reduced-motion: no-preference){
  .d-sweep{animation:spin 4.5s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .d-blips circle{animation:blip 4.5s ease-in-out infinite}
  .d-blips circle:nth-child(2){animation-delay:1.1s}.d-blips circle:nth-child(3){animation-delay:2.2s}.d-blips circle:nth-child(4){animation-delay:3.3s}
  @keyframes blip{0%,70%{opacity:.25}80%{opacity:1}100%{opacity:.25}}
  .s-scan{animation:scan 3.2s var(--ease) infinite}
  @keyframes scan{0%{transform:translateY(0)}50%{transform:translateY(120px)}100%{transform:translateY(0)}}
  .s-check{stroke-dasharray:70;stroke-dashoffset:70;animation:draw 3.2s var(--ease) infinite}
  @keyframes draw{0%,55%{stroke-dashoffset:70}72%,100%{stroke-dashoffset:0}}
  .anim-govern .g-scan,.anim-govern .g-scanline{animation:gscan 4.5s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes gscan{0%{transform:translateY(0)}66%{transform:translateY(116px)}100%{transform:translateY(116px)}}
  .g-ck{stroke-dasharray:14;stroke-dashoffset:14;animation:gck 4.5s var(--ease) infinite}
  .g-row:nth-child(1) .g-ck{animation-delay:.55s}.g-row:nth-child(2) .g-ck{animation-delay:1.2s}.g-row:nth-child(3) .g-ck{animation-delay:1.85s}.g-row:nth-child(4) .g-ck{animation-delay:2.5s}
  @keyframes gck{0%{stroke-dashoffset:14}8%{stroke-dashoffset:0}88%{stroke-dashoffset:0}100%{stroke-dashoffset:14}}
  .g-badge{opacity:0;animation:gbadge 4.5s var(--ease) infinite}
  @keyframes gbadge{0%,60%{opacity:0;transform:scale(.4) rotate(-25deg)}73%{opacity:1;transform:scale(1.14) rotate(0)}80%,93%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0}}
  .g-doc{animation:gdoc 4.5s ease infinite}
  @keyframes gdoc{0%,66%{filter:none}80%{filter:drop-shadow(0 0 9px rgba(205,130,255,.55))}93%,100%{filter:none}}
  .p-dash{animation:spin 14s linear infinite}
  .p-ring{animation:spin 3.4s var(--ease) infinite}
  .p-pulse{transform-origin:100px 100px;animation:pulse 3.4s ease-out infinite}
  @keyframes pulse{0%{transform:scale(.7);opacity:.7}70%,100%{transform:scale(1.1);opacity:0}}
  .p-check{stroke-dasharray:64;stroke-dashoffset:64;animation:draw2 3.4s var(--ease) infinite}
  @keyframes draw2{0%,40%{stroke-dashoffset:64}60%,100%{stroke-dashoffset:0}}
}

/* ============================================================
   THEME EXTENSIONS — blog, archive, search, WP core, a11y
   (kept on-system: hairlines, partial-accent cards, gradient word)
   ============================================================ */

/* a11y helpers */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--ink-2);color:#fff;padding:12px 18px;border:1px solid var(--line);border-radius:0 0 10px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--lav);outline-offset:3px;border-radius:4px}

/* inner-page hero spacing */
body.inner .hero--inner .hero-copy{max-width:760px}

/* post grid + cards (archive / related / search) */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:linear-gradient(165deg,rgba(255,255,255,.03),rgba(255,255,255,0));transition:transform .5s var(--ease),border-color .5s}
.post-card:hover{transform:translateY(-6px);border-color:rgba(205,130,255,.34)}
.post-card-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0c0620}
.post-card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post-card:hover .post-card-thumb img{transform:scale(1.05)}
.post-card-fallback{position:absolute;inset:0}
.post-card-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.post-card-title{font-family:'Outfit';font-size:1.18rem;font-weight:600;line-height:1.16;margin:8px 0 0;color:#fff}
.post-card-excerpt{color:var(--mut);font-size:.92rem;margin-top:10px}
.post-card-meta{margin-top:auto;padding-top:16px;color:var(--mut-2);font-size:11px;letter-spacing:.08em}

/* pagination */
.post-pagination{margin-top:60px;display:flex;justify-content:center}
.post-pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.post-pagination .page-numbers{display:inline-flex;min-width:42px;height:42px;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--line);border-radius:100px;color:var(--mut);font-family:'Space Grotesk';font-size:14px;transition:.3s}
.post-pagination .page-numbers:hover{color:#fff;border-color:var(--lav)}
.post-pagination .page-numbers.current{background:var(--grad);color:#fff;border-color:transparent}

/* single post */
.post-hero-img{margin:20px 0 0;border:1px solid var(--line);border-radius:22px;overflow:hidden;position:relative}
.post-hero-img img{width:100%;height:auto;display:block}
.post-byline{margin-top:22px;color:var(--mut-2);font-size:12px;letter-spacing:.08em}
.post-body{max-width:760px;margin:0 auto;color:var(--mut);font-size:1.08rem;line-height:1.78}
.post-body>*{margin:0 auto}
.post-body h2{font-family:'Outfit';color:#fff;font-size:1.9rem;font-weight:600;letter-spacing:-.02em;margin:46px 0 16px;line-height:1.1}
.post-body h3{font-family:'Outfit';color:#fff;font-size:1.4rem;font-weight:600;margin:36px 0 12px}
.post-body p{margin:0 0 22px}
.post-body a{color:var(--lav);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(205,130,255,.4)}
.post-body a:hover{text-decoration-color:var(--lav)}
.post-body ul,.post-body ol{margin:0 0 22px;padding-left:1.4em}
.post-body li{margin:0 0 10px}
.post-body blockquote{margin:30px 0;padding:6px 0 6px 26px;border-left:2px solid var(--purple);font-family:'Outfit';font-size:1.4rem;color:#fff;line-height:1.4}
.post-body img{border-radius:14px;border:1px solid var(--line);margin:26px auto}
.post-body figure{margin:26px 0}
.post-body figcaption{color:var(--mut-2);font-size:.84rem;text-align:center;margin-top:10px}
.post-body code{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-family:'Space Grotesk';font-size:.88em}
.post-body pre{background:#0a0518;border:1px solid var(--line);border-radius:14px;padding:20px;overflow:auto;margin:26px 0}
.post-tags{margin:46px auto 0;max-width:760px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.post-tag{font-family:'Space Grotesk';font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);border-radius:100px;padding:6px 14px}
.post-tag:hover{color:#fff;border-color:var(--lav)}

/* WordPress core alignment / caption classes */
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignleft{float:left;margin:6px 26px 18px 0}
.alignright{float:right;margin:6px 0 18px 26px}
.alignwide{width:min(1040px,92vw);margin-left:50%;transform:translateX(-50%)}
.wp-caption,.wp-block-image{max-width:100%}
.wp-caption-text,.wp-element-caption{color:var(--mut-2);font-size:.84rem;text-align:center;margin-top:8px}
.wp-block-button__link{display:inline-flex;background:var(--grad);color:#fff;font-family:'Space Grotesk';font-weight:600;padding:14px 26px;border-radius:100px;text-decoration:none}

/* search form */
.cranium-search{display:flex;gap:10px;max-width:520px}
.cranium-search input[type=search]{flex:1;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:100px;padding:13px 20px;color:#fff;font-family:'Montserrat'}
.cranium-search input[type=search]:focus{outline:none;border-color:var(--lav)}

@media(max-width:920px){.post-grid{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}

/* ============================================================
   WordPress admin bar — offset the fixed header so the nav
   isn't hidden behind it. Scoped to .admin-bar => logged-in
   (admin) view only; logged-out visitors are unaffected.
   ============================================================ */
body.admin-bar header{top:32px}
body.admin-bar .mobile-menu{top:32px}
@media screen and (max-width:782px){
  body.admin-bar header{top:46px}
  body.admin-bar .mobile-menu{top:46px}
}

/* Mega-menu feature card: real image fill (suppress the placeholder mesh) */
.mega-feat .mf-thumb.has-img{background:#0c0620}
.mega-feat .mf-thumb.has-img::after{display:none}
.mega-feat .mf-thumb.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.mega-feat:hover .mf-thumb.has-img img{transform:scale(1.06)}

/* ============================================================
   BLACK HAT USA 2026 — homepage hero highlight (floating card)
   Dismissible for the browser session via #bhFlagClose + main.js.
   ============================================================ */
.bh-flag{position:absolute;z-index:6;right:clamp(20px,4.5vw,128px);bottom:clamp(20px,4vh,40px);
  width:280px;max-width:calc(100vw - 40px);padding:18px 20px 16px;
  background:rgba(12,6,32,.82);border:1px solid rgba(205,130,255,.34);border-radius:18px;
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 18px 50px rgba(8,3,24,.55),0 0 0 1px rgba(255,255,255,.02) inset;
  animation:bhRise .9s var(--ease) .6s both}
.bh-flag[hidden]{display:none}
@property --bh-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.bh-flag::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--bh-ang),
    rgba(135,82,250,.22) 0deg,rgba(135,82,250,.22) 265deg,
    var(--lav) 318deg,#fff 338deg,var(--lav) 358deg,rgba(135,82,250,.22) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:bhOrbit 3.2s linear infinite}
.bh-flag-link{display:block}
.bh-flag-kicker{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk';font-weight:600;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lav)}
.bh-flag-dot{width:6px;height:6px;border-radius:50%;background:var(--lav);box-shadow:0 0 0 4px rgba(205,130,255,.16);
  animation:bhPulse 2.4s var(--ease) infinite}
.bh-flag-title{display:block;font-family:'Outfit';font-weight:600;font-size:18px;line-height:1.15;color:var(--white);margin:9px 0 4px}
.bh-flag-meta{display:block;font-size:11.5px;color:var(--mut);line-height:1.45}
.bh-flag-cta{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-family:'Space Grotesk';font-weight:600;
  font-size:12.5px;color:#fff;background:var(--grad);padding:9px 16px;border-radius:100px;
  box-shadow:0 6px 22px rgba(105,40,250,.34);transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.bh-flag-cta .arr{transition:transform .45s var(--ease)}
.bh-flag-link:hover .bh-flag-cta{box-shadow:0 12px 34px rgba(135,82,250,.5)}
.bh-flag-link:hover .bh-flag-cta .arr{transform:translateX(4px)}
.bh-flag-x{position:absolute;top:10px;right:10px;z-index:2;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.04);color:var(--mut);cursor:pointer;
  transition:color .3s,background .3s,border-color .3s}
.bh-flag-x svg{width:13px;height:13px}
.bh-flag-x:hover{color:var(--white);background:rgba(255,255,255,.1);border-color:rgba(205,130,255,.45)}
@keyframes bhRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes bhPulse{0%,100%{box-shadow:0 0 0 4px rgba(205,130,255,.16)}50%{box-shadow:0 0 0 7px rgba(205,130,255,0)}}
@keyframes bhOrbit{to{--bh-ang:360deg}}

/* ============================================================
   BLOG / RESOURCE HUB — large pill filter + resource cards
   ============================================================ */
.hub-filter{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;margin-bottom:36px;
  border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.02);
  backdrop-filter:blur(8px);max-width:100%}
.hub-pill{font-family:'Space Grotesk';font-weight:600;font-size:14.5px;letter-spacing:.01em;color:var(--mut);
  padding:12px 24px;border-radius:100px;border:none;background:transparent;cursor:pointer;white-space:nowrap;
  transition:color .3s,background .45s var(--ease),box-shadow .45s var(--ease)}
.hub-pill:hover{color:var(--white)}
.hub-pill.is-active{color:#fff;background:var(--grad);box-shadow:0 6px 22px rgba(105,40,250,.36)}
.post-card.is-hidden{display:none}
/* /events/ tour list: Up next / Played tabs (reuses .hub-filter + .hub-pill).
   The pills only filter the .tour-panel elements; main.js's hub filter bails
   unless #hubGrid exists, so the two never collide. */
.tour-tabs{margin-top:48px}
.tour-tabs .hub-filter{margin-bottom:0}
.tour-tabs .tickets{margin-top:26px}
.hub-pill .tf-n{display:inline-block;min-width:22px;margin-left:8px;padding:2px 7px;border-radius:100px;
  font-size:11.5px;line-height:1.5;text-align:center;background:rgba(255,255,255,.08);color:inherit}
.hub-pill.is-active .tf-n{background:rgba(255,255,255,.22)}
.tour-panel[hidden]{display:none}
.tour-panel-h{display:none;margin:40px 0 0;font-family:'Space Grotesk';font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lav)}
.no-tabs .tour-panel-h{display:block}
/* denser stubs everywhere except the headline stop, so the list scans faster */
@media(min-width:921px){
  .tour-panel .ticket:not(.ticket--main){padding:19px 30px}
  .tour-panel .ticket:not(.ticket--main) .tk-body h3{font-size:1.3rem}
  .tour-panel .ticket:not(.ticket--main) .tk-date .yr{font-size:1.75rem}
}
.tickets.tour-panel{gap:16px}
.no-tabs .hub-filter{display:none}
.tour-empty{color:var(--mut);margin-top:26px}
/* phone stub: the rotated Sold-out stamp was kissing the city line */
@media(max-width:600px){.tk-stub .tk-stamp{margin:12px 0 2px 2px}}
.hub-empty{color:var(--mut);margin-top:6px}

/* resource (ebook / white paper) card variant */
.res-card .post-card-thumb{background:#06030f}
.res-badge{position:absolute;top:12px;left:12px;z-index:2;font-family:'Space Grotesk';font-weight:600;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(8,3,24,.62);
  border:1px solid rgba(205,130,255,.42);backdrop-filter:blur(6px);padding:5px 11px;border-radius:100px}
.res-meta{display:flex;flex-direction:column;gap:9px;text-transform:none;letter-spacing:0}
.res-dl{display:inline-flex;align-items:center;gap:7px;color:var(--lav);font-family:'Space Grotesk';
  font-weight:600;font-size:12px}
.res-dl svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.res-card:hover .res-dl{gap:11px}
.res-card:hover .res-dl svg{transform:translateY(2px)}
@media(max-width:560px){
  .hub-filter{gap:4px;padding:5px}
  .hub-pill{font-size:13px;padding:10px 16px}
}
@media(max-width:920px){
  .bh-flag{bottom:18px;right:16px;width:248px;padding:15px 17px 14px}
  .bh-flag-title{font-size:16.5px}
}
@media(max-width:560px){
  .bh-flag{left:16px;right:16px;bottom:16px;width:auto;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .bh-flag{animation:none}
  .bh-flag-dot{animation:none}
  .bh-flag::before{animation:none;background:var(--grad);opacity:.55}
}

/* ---------------------------------------------------------------------------
 * Multi-part blog series (inc/series.php) — top flag + bottom navigator
 * ------------------------------------------------------------------------- */
.series-flag{display:inline-flex;align-items:center;gap:11px;margin-top:22px;padding:9px 16px 9px 13px;
  border:1px solid var(--line);border-radius:100px;background:rgba(135,82,250,.07);
  font-family:'Space Grotesk';font-size:12px;letter-spacing:.04em;color:var(--mut);
  text-decoration:none;transition:border-color .4s var(--ease),background .4s,transform .5s var(--ease)}
.series-flag:hover{border-color:rgba(205,130,255,.34);background:rgba(135,82,250,.12);transform:translateY(-1px)}
.series-flag-dot{width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px var(--lav);flex-shrink:0}
.series-flag-ix{color:var(--lav);font-weight:600;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}
.series-flag-sep{width:1px;height:13px;background:var(--line)}
.series-flag-title{color:var(--white);font-weight:500}

.series-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:none;max-width:880px}
.series-step{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:22px;
  padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.018);
  text-decoration:none;color:inherit;transition:border-color .45s var(--ease),background .45s,transform .55s var(--ease)}
a.series-step:hover{border-color:rgba(205,130,255,.32);background:rgba(135,82,250,.06);transform:translateY(-2px)}
.series-step-thumb{position:relative;width:104px;height:62px;border-radius:11px;overflow:hidden;flex-shrink:0;
  background-color:var(--ink-3);background-size:cover;background-position:center;
  border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.series-step-num{position:absolute;left:8px;bottom:7px;font-family:'Space Grotesk';font-weight:700;font-size:12px;
  letter-spacing:.04em;color:#fff;padding:2px 7px;border-radius:7px;background:rgba(6,3,15,.66);backdrop-filter:blur(4px);line-height:1.1}
.series-step-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.series-step-kicker{font-family:'Space Grotesk';font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lav)}
.series-step-kicker em{font-style:normal;color:var(--mut-2)}
.series-step-title{font-family:'Outfit';font-weight:600;font-size:1.06rem;line-height:1.28;color:var(--white)}
.series-step-arrow{color:var(--lav);font-size:1.2rem;padding-right:8px;transition:transform .45s var(--ease)}
a.series-step:hover .series-step-arrow{transform:translateX(5px)}

/* Current part: highlighted, not a link */
.series-step.is-current{position:relative;background:linear-gradient(118deg,rgba(69,0,249,.12),rgba(205,130,255,.05));
  border-color:rgba(205,130,255,.30);cursor:default}
.series-step.is-current::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--grad)}
.series-step.is-missing{opacity:.5;cursor:default}

@media(max-width:560px){
  .series-step{grid-template-columns:74px 1fr;gap:15px;padding:12px}
  .series-step-thumb{width:74px;height:50px}
  .series-step-arrow{display:none}
  .series-step-title{font-size:.98rem}
}

/* ============================================================
   SHARED FORM + CONTACT COMPONENTS  (global — used by Contact,
   Get-a-Demo, Privacy Requests, and any future form/contact page).
   Previously these lived only inside individual page templates,
   which silently broke any new page that reused the classes.
   Keep them here so every page inherits them. See CLAUDE.md.
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:40px;align-items:start}
.contact-options{margin-top:28px;display:flex;flex-direction:column;gap:20px}
.copt{display:flex;gap:16px;align-items:flex-start}
.copt .pk{width:8px;height:8px;border-radius:50%;background:var(--lav);box-shadow:0 0 12px var(--lav);margin-top:8px;flex-shrink:0}
.copt b{color:#fff;font-family:'Outfit';font-size:1.1rem}
.copt p{color:var(--mut);font-size:.95rem;margin-top:4px}
.copt a{color:var(--lav)}
.contact-hq{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.ch-lab{font-family:'Space Grotesk';font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-2)}
.contact-hq address{font-style:normal;color:var(--mut);font-size:.98rem;margin-top:12px;line-height:1.7}
.contact-hq address a{color:var(--lav)}
.demo-trust{margin-top:30px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--mut-2);font-size:12px;letter-spacing:.08em}
.demo-trust .dot{width:4px;height:4px;border-radius:50%;background:var(--lav)}
.demo-form-card{position:relative;border:1px solid rgba(205,130,255,.2);border-radius:24px;padding:34px;background:linear-gradient(150deg,rgba(69,0,249,.1),rgba(205,130,255,.05));overflow:hidden}
.demo-form-card>*{position:relative;z-index:1}
.demo-form-card .glow{z-index:0;position:absolute}  /* the >* rule would otherwise put the blur-blob in flow */
.demo-form label{display:block;font-size:.82rem;color:var(--mut);font-family:'Space Grotesk';letter-spacing:.03em;margin-top:14px}
.demo-form .df-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo-form input,.demo-form textarea,.demo-form select{width:100%;margin-top:6px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:#fff;font-family:'Montserrat';font-size:.95rem}
.demo-form textarea{resize:vertical;min-height:84px}
.demo-form select{appearance:none;-webkit-appearance:none}
.demo-form input:focus,.demo-form textarea:focus,.demo-form select:focus{outline:none;border-color:var(--lav)}
.df-fine{color:var(--mut-2);font-size:.76rem;margin-top:14px}
.df-fine a{color:var(--lav)}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;gap:32px}}

/* --- Embedded HubSpot forms (portal 23882293: contact / demo / privacy).
   IMPORTANT: by default HubSpot renders these inside a cross-origin IFRAME that
   parent CSS cannot reach, so the rules below are DORMANT until each form is
   switched to "Set as raw HTML form" in HubSpot (Marketing > Forms > [form] >
   embed; needs Marketing/Content Hub Pro+). Once raw, the form renders inline in
   our DOM, the embeds' cssRequired:"" suppresses HubSpot's own CSS, and these
   rules fully theme it — no !important needed. .cranium-hs-form is added via the
   embed's cssClass. Until then the forms work but show HubSpot's default look. */
.demo-form-card .hs-form-frame{margin-top:4px}
/* HubSpot wraps rows in <fieldset> — with its default CSS stripped (cssRequired:"")
   the browser's 2px groove border shows. Reset it fully. */
.cranium-hs-form fieldset{border:0;padding:0;margin:0;max-width:none;min-width:0;margin-bottom:0}
/* The field "help text" renders as a <legend> that duplicates the input's
   placeholder ("Enter email" twice) — hide it; the placeholder carries it. */
.cranium-hs-form legend.hs-field-desc{display:none}
/* reCAPTCHA badge hidden per Google's sanctioned method: the required
   attribution text (with Privacy/Terms links) is shown in the .df-fine line
   under each form instead. https://developers.google.com/recaptcha/docs/faq */
.cranium-hs-form .hs_recaptcha{display:none}
.grecaptcha-badge{visibility:hidden}
.cranium-hs-form .form-columns-2{display:flex;gap:12px}
.cranium-hs-form .form-columns-2 .hs-form-field{width:auto;flex:1 1 0;float:none}
.cranium-hs-form .form-columns-2 .input{margin-right:0}
.cranium-hs-form .hs-form-field{margin-top:14px}
.cranium-hs-form .hs-form-field>label{display:block;font-size:.82rem;color:var(--mut);
  font-family:'Space Grotesk';font-weight:500;letter-spacing:.03em}
.cranium-hs-form .hs-form-required{color:var(--lav);margin-left:2px}
.cranium-hs-form .hs-field-desc{color:var(--mut-2);font-size:.78rem;margin:4px 0 0}
.cranium-hs-form .hs-input{width:100%;margin-top:6px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:#fff;
  font-family:'Montserrat';font-size:.95rem;box-sizing:border-box;transition:border-color .3s,box-shadow .3s}
.cranium-hs-form textarea.hs-input{resize:vertical;min-height:84px}
.cranium-hs-form select.hs-input{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a59fc4' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.cranium-hs-form select.hs-input option{background:#0c0620}
.cranium-hs-form .hs-input::placeholder{color:var(--mut-2)}
.cranium-hs-form .hs-input:focus{outline:none;border-color:var(--lav);box-shadow:0 0 0 3px rgba(205,130,255,.15)}
.cranium-hs-form input[type=checkbox].hs-input,.cranium-hs-form input[type=radio].hs-input{width:auto;margin:4px 8px 0 0}
.cranium-hs-form .hs-form-booleancheckbox-display,.cranium-hs-form .inputs-list li{display:flex;align-items:flex-start;
  gap:8px;font-size:.82rem;color:var(--mut);font-family:'Space Grotesk';list-style:none;margin:0}
.cranium-hs-form .inputs-list{padding:0;margin:6px 0 0}
.cranium-hs-form .hs_submit .actions{margin-top:18px}
.cranium-hs-form .hs-button{width:100%;background:var(--grad);color:#fff;border:none;border-radius:999px;
  padding:15px 24px;font-family:'Outfit';font-weight:600;font-size:1rem;cursor:pointer;
  box-shadow:0 6px 26px rgba(105,40,250,.34);transition:transform .3s var(--ease),box-shadow .3s}
.cranium-hs-form .hs-button:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(105,40,250,.44)}
.cranium-hs-form .legal-consent-container,.cranium-hs-form .hs-richtext{color:var(--mut-2);font-size:.78rem;
  margin-top:14px;line-height:1.55}
.cranium-hs-form .legal-consent-container a,.cranium-hs-form .hs-richtext a{color:var(--lav)}
.cranium-hs-form .hs-error-msgs{list-style:none;padding:0;margin:6px 0 0}
.cranium-hs-form .hs-error-msg{color:#ff8fb0;font-size:.76rem;font-family:'Space Grotesk'}
@media(max-width:560px){.cranium-hs-form .form-columns-2{flex-direction:column;gap:0}}

/* ==========================================================================
   AI TRUST LOOP COMPONENTS (global — loop strip on stage pages, pillar
   explore-links on the homepage + platform overview, Observe pillar anim)
   ========================================================================== */
/* Full-bleed loop strip: pills distribute across the whole content width
   (flush with the header's Get-a-Demo edge); the active stage wears an
   animated conic-gradient border so you always know where you are. */
@property --ls-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.loop-strip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;width:100%;margin:34px 0 8px;
  font-family:'Space Grotesk',monospace;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase}
.ls-stage{display:inline-flex;align-items:center;gap:11px;padding:15px 30px;border-radius:999px;
  border:1.5px solid var(--line);color:var(--mut);text-decoration:none;transition:color .18s,border-color .18s,background .18s}
.ls-stage .ls-ix{color:var(--lav);font-weight:600;font-size:.8rem}
.ls-stage:hover{color:#fff;border-color:var(--purple)}
.ls-stage.on{color:#fff;position:relative;border:1.5px solid transparent;
  background:linear-gradient(#0c0620,#0c0620) padding-box,
    conic-gradient(from var(--ls-angle),#4500f9,#8752fa 25%,#cd82ff 50%,#8752fa 75%,#4500f9) border-box;
  animation:ls-spin 3.2s linear infinite,ls-glow 3.2s ease-in-out infinite;
  box-shadow:0 10px 34px -12px rgba(135,82,250,.85)}
@keyframes ls-spin{to{--ls-angle:360deg}}
@keyframes ls-glow{0%,100%{box-shadow:0 10px 34px -12px rgba(135,82,250,.85)}50%{box-shadow:0 10px 44px -8px rgba(205,130,255,.95)}}
@media (prefers-reduced-motion:reduce){.ls-stage.on{animation:none}}
.ls-arr{color:var(--dim,#6b6491);font-size:1.05rem}
.ls-cont{color:var(--lav);letter-spacing:.2em;font-weight:600}
@media(max-width:1100px){.loop-strip{justify-content:flex-start;font-size:.82rem}.ls-stage{padding:11px 20px}}
@media(max-width:720px){.loop-strip{gap:8px}.ls-stage{padding:8px 14px}.ls-arr{display:none}}

.pillar-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:'Outfit';font-weight:600;
  font-size:.95rem;color:var(--lav);text-decoration:none;transition:gap .18s,color .18s}
.pillar-link:hover{color:#fff;gap:12px}

/* Observe pillar animation (homepage trust loop) */
.anim-observe .o-wave{stroke-dasharray:240;stroke-dashoffset:240;animation:o-draw 3.2s ease-in-out infinite}
@keyframes o-draw{0%{stroke-dashoffset:240}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-240}}
.anim-observe .o-ping{transform-origin:143px 74px;animation:o-ping 3.2s ease-out infinite}
@keyframes o-ping{0%,54%{transform:scale(.2);opacity:0}62%{transform:scale(1);opacity:.9}90%,100%{transform:scale(1.7);opacity:0}}
.anim-observe .o-dot{animation:o-dot 3.2s ease-out infinite}
@keyframes o-dot{0%,54%{opacity:0}60%,82%{opacity:1}100%{opacity:0}}

/* ==========================================================================
   EVENT TOUR COMPONENTS (global — /events/ + event detail pages)
   ========================================================================== */
/* marquee */
.bh-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2);padding:16px 0;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bh-marq-track{display:inline-block;font-family:'Outfit';font-weight:700;font-size:1.25rem;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px rgba(205,130,255,.5);animation:bhmarq 26s linear infinite}
@keyframes bhmarq{to{transform:translateX(-50%)}}

/* tickets */
.tickets{margin-top:60px;display:grid;gap:22px}
.ticket{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:28px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(165deg,rgba(255,255,255,.03),rgba(255,255,255,0));padding:26px 30px;position:relative;overflow:hidden}
.ticket--main{border-color:rgba(205,130,255,.28)}
.ticket--main::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;--t:2px;padding:var(--t);background:linear-gradient(225deg,transparent 34%,rgba(135,82,250,.7) 64%,#cd82ff 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;filter:drop-shadow(0 0 6px rgba(135,82,250,.3))}
.tk-date{text-align:center;border-right:1px dashed var(--line);padding-right:24px}
.tk-date .mon{display:block;font-family:'Space Grotesk';font-weight:700;letter-spacing:.1em;color:var(--lav);font-size:1.1rem}
.tk-date .yr{display:block;font-family:'Outfit';font-weight:700;font-size:2rem;color:#fff;line-height:1}
.tk-tag{font-family:'Space Grotesk';font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lav);font-weight:600}
.tk-body h3{font-family:'Outfit';font-size:1.5rem;font-weight:600;color:#fff;margin:6px 0 2px}
.tk-body p{color:var(--mut);font-size:.95rem}
.ticket--past{opacity:.72}
.tk-stamp{display:inline-block;font-family:'Space Grotesk';font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ff5d6c;border:2px solid #ff5d6c;border-radius:8px;padding:8px 14px;transform:rotate(-8deg);font-size:.9rem;opacity:.85}

a.ticket{text-decoration:none;transition:border-color .2s,transform .2s}
a.ticket:hover{border-color:rgba(205,130,255,.45);transform:translateY(-2px)}
.tk-go{font-family:'Outfit';font-weight:600;color:var(--lav);white-space:nowrap;font-size:.95rem}
a.ticket:hover .tk-go{color:#fff}
@media(max-width:720px){.ticket{grid-template-columns:1fr;gap:12px;text-align:left}.tk-date{border-right:0;border-bottom:1px dashed var(--line);padding:0 0 12px;text-align:left;display:flex;gap:10px;align-items:baseline}}

/* event chips (moved from the events takeover page) */
.bh-chip{display:inline-flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-size:12.5px;font-weight:600;letter-spacing:.12em;color:var(--white);padding:9px 18px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.bh-chip .d{width:7px;height:7px;border-radius:50%;background:var(--lav);box-shadow:0 0 10px var(--lav)}
.bh-chip--hot{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 30px rgba(105,40,250,.4)}

/* ==========================================================================
   NO-ORPHAN POLICY — a single word must never sit alone on a line.

   Measured in Chrome on the tour-stop set-list cards (2026-09-09):
   'text-wrap: pretty' did NOT clear the orphan there — it still stranded
   "artifact." on its own line — while 'balance' pulled the last two words
   up together. So short blocks (headings, card copy, taglines, chips) get
   'balance', which is what the browsers actually optimise for text under
   ~6 lines; long-form body copy keeps 'pretty', where balance would be
   the wrong tool. Unsupported browsers fall back to normal wrapping.

   CSS cannot save copy that strands a word no matter how it wraps — a
   two-word heading wider than its column, say. Shorten that copy instead.
   ========================================================================== */
h1,h2,h3,h4,h5,.bh-title,.bh-tagline,.tk-body h3,.bh-chip,.btn{text-wrap:balance}
.risk p,.risk .tagline,.tagline,.hero-sub,.sec-head p,.tk-body p,
.ev-card-where,.ev-card-city,.ev-card-when{text-wrap:balance}
p,li{text-wrap:pretty}

/* ==========================================================================
   EVENT HERO CARD — the official event logo, right of the tour-stop hero.
   Markup: cranium_event_logo_card() in inc/events-data.php, passed to
   cranium_page_hero() as 'aside' (which adds .hero--has-aside).
   Two columns >=1021px; stacks under the copy below that.
   ========================================================================== */
.hero--has-aside .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:64px;align-items:center}
body.inner .hero--has-aside .hero-copy{max-width:none}
.hero-aside{position:relative;z-index:4;min-width:0}

.ev-card{position:relative;padding:38px 34px 32px;border-radius:26px;border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(135,82,250,.11),rgba(10,5,24,.55) 58%,rgba(10,5,24,.72));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(10px);overflow:hidden;text-align:center}
.ev-card::before{content:"";position:absolute;top:0;left:26px;right:26px;height:1px;background:var(--grad);opacity:.85}
.ev-card::after{content:"";position:absolute;width:280px;height:200px;left:50%;top:-90px;transform:translateX(-50%);
  background:var(--purple);filter:blur(70px);opacity:.22;pointer-events:none}
.ev-card>*{position:relative;z-index:1}

.ev-card-logo{display:flex;align-items:center;justify-content:center;min-height:96px}
.ev-card-logo img{display:block;width:100%;max-width:290px;height:auto}

.ev-card-meta{display:flex;flex-direction:column;gap:5px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.ev-card-when{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lav)}
.ev-card-where{font-size:.95rem;line-height:1.4;color:var(--white);font-weight:500}
.ev-card-city{font-size:.85rem;line-height:1.4;color:var(--mut)}

.ev-card-link{display:inline-flex;align-self:center;align-items:center;gap:7px;margin-top:20px;padding:9px 18px;
  border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.04);
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--white);
  text-decoration:none;transition:border-color .4s,background .4s,transform .4s var(--ease)}
.ev-card-link:hover{border-color:rgba(205,130,255,.45);background:rgba(135,82,250,.14);transform:translateY(-2px)}

@media(max-width:1020px){
  .hero--has-aside .hero-inner{grid-template-columns:1fr;gap:44px}
  .hero-aside{max-width:440px}
  .ev-card{padding:32px 26px 28px}
}
@media(max-width:760px){
  .hero-aside{max-width:none}
  .ev-card-logo img{max-width:240px}
}

/* ==========================================================================
   HERO ART + ILLUSTRATION LIFE (global — Platform & Solutions)
   ========================================================================== */
.hero--inner{position:relative;overflow:hidden}
.hero--inner .wrap{position:relative;z-index:2}
.hero-art{position:absolute;top:0;right:0;bottom:0;width:66%;z-index:1;pointer-events:none}
.hero-art img,.hero-art video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:.92;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 52%);mask-image:linear-gradient(90deg,transparent 0,#000 52%)}
.hero-art::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--ink) 0%,rgba(6,3,15,.85) 14%,rgba(6,3,15,.35) 38%,transparent 62%),
  linear-gradient(180deg,rgba(6,3,15,.55) 0%,transparent 32%,transparent 62%,var(--ink) 100%);
  /* the ink itself fades out at the container's left edge so it never draws
     a hard seam against the ambient stage-sky glowing behind the hero */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
@media (prefers-reduced-motion:no-preference){
  .hero-art img{animation:heroDrift 22s ease-in-out infinite alternate}
  .hero-art video{animation:none}
  @keyframes heroDrift{from{transform:scale(1.02) translateX(0)}to{transform:scale(1.1) translateX(-2.5%)}}
}
@media(max-width:900px){.hero-art{width:100%;opacity:.4}}

/* every stroke illustration gently breathes (universal life, zero markup) */
@media (prefers-reduced-motion:no-preference){
  .pillar-vis svg,.risk .ricon{animation:vis-breathe 4.5s ease-in-out infinite}
  @keyframes vis-breathe{0%,100%{filter:drop-shadow(0 0 4px rgba(135,82,250,.12))}50%{filter:drop-shadow(0 0 16px rgba(135,82,250,.45))}}
}

/* SVG animation utilities (element-level; add classes inside inline SVGs)
   transform-box makes per-element transforms behave like CSS elements. */
@media (prefers-reduced-motion:no-preference){
  .a-spin{animation:a-spin 7s linear infinite;transform-box:fill-box;transform-origin:center}
  @keyframes a-spin{to{transform:rotate(360deg)}}
  .a-pulse{animation:a-pulse 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes a-pulse{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
  .a-ping{animation:a-ping 2.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes a-ping{0%,20%{transform:scale(.5);opacity:.9}80%,100%{transform:scale(1.9);opacity:0}}
  .a-draw{stroke-dasharray:70 200;stroke-dashoffset:70;animation:a-draw 3.4s ease-in-out infinite}
  @keyframes a-draw{0%{stroke-dashoffset:70}40%,68%{stroke-dashoffset:0}100%{stroke-dashoffset:-200}}
  .a-grow{animation:a-grow 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
  @keyframes a-grow{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
  .a-swing{animation:a-swing 3.4s ease-in-out infinite;transform-box:view-box;transform-origin:60px 76px}
  @keyframes a-swing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(16deg)}}
  .a-blink{animation:a-blink 2.8s ease-in-out infinite}
  @keyframes a-blink{0%,100%{opacity:.25}50%{opacity:1}}
  .a-drift{animation:a-drift 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes a-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
}

/* Trust Loop station map (stage pages) — interactive "you are here" dial:
   orbiting evidence particles, clickable stage nodes, per-stage glyph,
   arc that draws itself in on reveal. Stats stack as ledger rows beside it. */
.loop-grid{display:grid;grid-template-columns:1fr 460px;gap:64px;align-items:center;margin-bottom:0}
@media(max-width:980px){.loop-grid{grid-template-columns:1fr;gap:30px}}
.lg-left{display:flex;flex-direction:column;gap:36px;min-width:0}
.stats--stack{display:block;margin-top:0;border-top:0;border-bottom:0}
.stats--stack .stat-b{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:24px;padding:20px 4px;border-right:0;border-top:1px solid var(--line)}
.stats--stack .stat-b:last-child{border-bottom:1px solid var(--line)}
.stats--stack .stat-b .n{font-size:clamp(2rem,3vw,2.9rem)}
.stats--stack .stat-b .l{margin-top:0;max-width:none}
.loop-dial-wrap{display:flex;justify-content:center}
.loop-dial{width:100%;max-width:460px;display:block;overflow:visible}
.loop-dial a{cursor:pointer;outline:none}
.loop-dial a text{transition:fill .2s}
.loop-dial a:hover text,.loop-dial a:focus text{fill:#fff}
.loop-dial a .ld-nring{transition:stroke-width .2s,filter .2s}
.loop-dial a:hover .ld-nring,.loop-dial a:focus .ld-nring{stroke-width:3.4;filter:drop-shadow(0 0 9px rgba(205,130,255,.85))}
.loop-dial .ld-arc{transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1) .35s}
.loop-dial-wrap.in .ld-arc{stroke-dashoffset:0 !important}
@media (prefers-reduced-motion:no-preference){
  .loop-dial .ld-dash{animation:a-spin 80s linear infinite;transform-box:view-box;transform-origin:220px 220px}
  .loop-dial .ld-halo{animation:ld-halo 3.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes ld-halo{0%,18%{transform:scale(.55);opacity:.85}75%,100%{transform:scale(1.9);opacity:0}}
  .loop-dial .ld-active{animation:ld-breathe 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes ld-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
}
@media (prefers-reduced-motion:reduce){.loop-dial .ld-particle{display:none}}

/* nav Get-a-Demo: flowing brand gradient (same family as the loop-strip pill) */
@media (prefers-reduced-motion:no-preference){
  .nav-right .btn-primary{background:linear-gradient(118deg,#4500f9,#8752fa 30%,#cd82ff 50%,#8752fa 70%,#4500f9);
    background-size:230% 100%;animation:grad-slide 5.5s ease-in-out infinite}
  @keyframes grad-slide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
}

/* pillar cinemagraphs — video fills the 3:2 card, poster as fallback */
.pillar-vis--video{display:block;padding:0}
.pillar-vis--video video,.pillar-vis--video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.pillar-vis--video::before{z-index:1;background:radial-gradient(80% 80% at 50% 50%,transparent 55%,rgba(6,3,15,.35) 100%)}

/* ==========================================================================
   LOOP RAIL v3 — typographic wayfinding (replaces the pill loop-strip; the
   old .loop-strip styles above are retired). No buttons: a hairline track,
   station dots, mono labels. The traveled path fills with the brand
   gradient and a comet glides along it; the active station's dot pings.
   ========================================================================== */
.loop-rail{display:block;width:100%;margin:44px 0 10px;
  font-family:'Space Grotesk',monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase}
.lr-main{position:relative;flex:1;display:flex;justify-content:space-between;padding-top:27px;min-width:0}
.lr-track{position:absolute;left:0;right:0;top:8px;height:1px;background:var(--line)}
.lr-fill{position:absolute;left:0;top:0;height:1px;
  background:linear-gradient(90deg,#4500f9,#8752fa 55%,#cd82ff);box-shadow:0 0 14px rgba(135,82,250,.75)}
.lr-fill::after{content:'';position:absolute;top:-1.5px;left:0;width:52px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,transparent,#e9d9ff);filter:blur(.6px);opacity:0;
  animation:lr-comet 3.6s ease-in-out infinite}
@keyframes lr-comet{0%{left:0;opacity:0}14%{opacity:1}86%{opacity:1}100%{left:calc(100% - 52px);opacity:0}}
.lr-stop{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--mut);
  transition:color .18s}
.lr-stop .lr-ix{font-size:.7rem;color:var(--lav);opacity:.75;letter-spacing:.2em}
.lr-stop:hover{color:#fff}
.lr-stop.done{color:#b9aee0}
.lr-dot{position:absolute;top:4.5px;left:var(--lr-x);transform:translateX(-50%);width:8px;height:8px;
  border-radius:50%;background:#221b3a;border:1px solid var(--line);transition:background .18s,border-color .18s}
.lr-stop:hover .lr-dot{border-color:var(--purple)}
.lr-stop.done .lr-dot{background:#8752fa;border-color:#8752fa;box-shadow:0 0 10px rgba(135,82,250,.7)}
.lr-stop.on{color:#fff}
.lr-stop.on .lr-name{font-weight:700;letter-spacing:.2em;
  background:linear-gradient(90deg,#a98cff,#cd82ff,#e9d9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lr-stop.on .lr-dot{width:12px;height:12px;top:2.5px;border:0;
  background:radial-gradient(circle at 35% 30%,#fff,#cd82ff 45%,#4500f9);box-shadow:0 0 18px rgba(205,130,255,.95)}
.lr-stop.on .lr-dot::after{content:'';position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(205,130,255,.65);animation:lr-ping 2.4s ease-out infinite}
@keyframes lr-ping{0%{transform:scale(.45);opacity:.9}75%,100%{transform:scale(1.6);opacity:0}}
/* the loop's return path: the line flows back right-to-left across the full
   section width and CONTINUOUSLY rides its center as a shimmering gradient */
.lr-return{display:flex;align-items:center;gap:22px;margin-top:36px}
.lr-ret{flex:1;height:1px;
  background-image:repeating-linear-gradient(90deg,rgba(135,82,250,.55) 0 9px,transparent 9px 20px);
  animation:lr-flow 1.3s linear infinite}
@keyframes lr-flow{to{background-position:-20px 0}}
.lr-chev{color:var(--lav);font-size:1.1rem;letter-spacing:-.08em;line-height:1;animation:lr-chevpulse 1.3s ease-in-out infinite alternate}
@keyframes lr-chevpulse{from{opacity:.4}to{opacity:1}}
.lr-cont{font-weight:700;font-size:1.05rem;letter-spacing:.52em;margin-right:-.52em;white-space:nowrap;
  background:linear-gradient(100deg,#8752fa 0%,#f0e6ff 28%,#cd82ff 52%,#8752fa 74%,#f0e6ff 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(135,82,250,.6));animation:lr-shimmer 4.2s linear infinite}
@keyframes lr-shimmer{to{background-position:250% 0}}
@media (prefers-reduced-motion:reduce){.lr-fill::after,.lr-stop.on .lr-dot::after,.lr-ret,.lr-cont,.lr-chev{animation:none}}
@media(max-width:1100px){.loop-rail{font-size:.76rem}}
@media(max-width:720px){
  .lr-track,.lr-dot{display:none}
  .lr-main{flex-wrap:wrap;gap:12px 18px;padding-top:0}
  .lr-return{margin-top:20px;gap:14px}
  .lr-cont{font-size:.9rem}}

/* ==========================================================================
   DIAL SECTION — editorial typography (stage pages' "Why it matters").
   Ghost stage-word watermark behind the grid + indexed ledger rows with
   gradient display numerals.
   ========================================================================== */
.loop-grid[data-word]{position:relative;isolation:isolate}
.loop-grid[data-word]::before{content:attr(data-word);position:absolute;z-index:-1;left:-.05em;top:-.62em;
  font-family:'Outfit',sans-serif;font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:-.015em;
  font-size:clamp(5.2rem,13vw,12.5rem);white-space:nowrap;pointer-events:none;user-select:none;
  color:transparent;-webkit-text-stroke:1.5px rgba(135,82,250,.17);
  background:linear-gradient(180deg,rgba(135,82,250,.13),rgba(135,82,250,0) 78%);
  -webkit-background-clip:text;background-clip:text}
@media(max-width:980px){.loop-grid[data-word]::before{top:-.5em;font-size:clamp(4rem,15vw,7rem)}}
.stats--stack{counter-reset:ledger}
.stats--stack .stat-b{grid-template-columns:58px 168px 1fr;gap:20px;padding:26px 6px;transition:background .25s}
.stats--stack .stat-b::before{counter-increment:ledger;content:"/ 0" counter(ledger);
  font-family:'Space Grotesk',monospace;font-size:.7rem;letter-spacing:.3em;color:var(--lav);opacity:.8}
.stats--stack .stat-b .n{font-size:clamp(2.7rem,4.2vw,3.9rem);font-weight:700;letter-spacing:-.03em;
  background:linear-gradient(115deg,#fff 8%,#cd82ff 58%,#8752fa 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stats--stack .stat-b .l{font-size:.97rem}
.stats--stack .stat-b:hover{background:linear-gradient(90deg,rgba(135,82,250,.08),transparent 72%)}
@media(max-width:720px){.stats--stack .stat-b{grid-template-columns:44px 1fr;grid-template-rows:auto auto}
  .stats--stack .stat-b .l{grid-column:1/-1}}

/* ==========================================================================
   STAGE SKY — ambient living background on the five Trust Loop stage pages.
   Three slow-drifting aurora blobs tinted per stage + a diagonal light beam
   + film grain, all fixed behind the content. Transform/opacity only.
   ========================================================================== */
.stage-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  --sk1:#4500f9;--sk2:#8752fa;--sk3:#cd82ff}
.stage-sky[data-stage="discover"]{--sk1:#5a1cff;--sk2:#3a28c9;--sk3:#8752fa}
.stage-sky[data-stage="observe"]{--sk1:#8752fa;--sk2:#cd82ff;--sk3:#4a2ad4}
.stage-sky[data-stage="govern"]{--sk1:#7a3ffb;--sk2:#cd82ff;--sk3:#4a2ad4}
.stage-sky[data-stage="secure"]{--sk1:#5a1cff;--sk2:#8752fa;--sk3:#cd82ff}
.stage-sky[data-stage="prove"]{--sk1:#cd82ff;--sk2:#5a1cff;--sk3:#8752fa}
.stage-sky i{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform;display:block}
.sk-a{width:58vw;height:58vw;left:-16vw;top:-20vw;opacity:.5;
  background:radial-gradient(circle at 38% 36%,var(--sk1),transparent 64%);
  animation:sk-a 26s ease-in-out infinite alternate}
.sk-b{width:50vw;height:50vw;right:-18vw;top:6vh;opacity:.4;
  background:radial-gradient(circle at 58% 42%,var(--sk2),transparent 62%);
  animation:sk-b 34s ease-in-out infinite alternate}
.sk-c{width:56vw;height:56vw;left:20vw;bottom:-30vw;opacity:.34;
  background:radial-gradient(circle at 50% 50%,var(--sk3),transparent 60%);
  animation:sk-c 40s ease-in-out infinite alternate}
@keyframes sk-a{to{transform:translate(7vw,5vh) scale(1.14)}}
@keyframes sk-b{to{transform:translate(-6vw,9vh) scale(1.1) rotate(8deg)}}
@keyframes sk-c{to{transform:translate(-8vw,-6vh) scale(1.18)}}
.sk-beam{left:50%;top:-42vh;width:130vmax;height:130vmax;border-radius:0;filter:blur(60px);opacity:.22;
  transform:translateX(-50%);transform-origin:50% 50%;
  background:conic-gradient(from 190deg at 50% 50%,transparent 0 40%,var(--sk2) 46%,var(--sk3) 50%,transparent 56%,transparent 100%);
  animation:sk-beam 60s linear infinite}
@keyframes sk-beam{to{transform:translateX(-50%) rotate(360deg)}}
.sk-grain{inset:0;width:auto;height:auto;border-radius:0;filter:none;opacity:.16;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:280px 280px;animation:none}
.stage-sky::after{content:'';position:absolute;inset:0;
  background:radial-gradient(125% 95% at 50% 0%,transparent 55%,rgba(6,3,15,.45) 100%)}
@media (prefers-reduced-motion:reduce){.stage-sky i{animation:none}}

/* stage-page "What X does" heads: editorial split — headline left, lede right,
   aligned to the headline's baseline with a rule, so the row reads balanced */
.sec-head--split{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.82fr);column-gap:76px;
  align-items:end;max-width:none;margin-bottom:70px}
.sec-head--split .kicker{grid-column:1/-1}
.sec-head--split h2{margin-bottom:0}
.sec-head--split p{margin-top:0;padding-left:28px;padding-bottom:6px;max-width:46ch;
  border-left:1px solid rgba(135,82,250,.4)}
@media(max-width:980px){.sec-head--split{display:block;margin-bottom:44px}
  .sec-head--split p{padding-left:0;padding-bottom:0;border-left:0;margin-top:22px}}

/* ==========================================================================
   TYPOGRAPHY GUARD — no orphans / widows anywhere, at any width. `pretty`
   is inherited from body so EVERY text container (present and future) avoids
   a single word stranded on its last line; headings balance their lines.
   ========================================================================== */
body{text-wrap:pretty}
h1,h2,h3,h4,.sec-head h2,.pillar-copy h3,.five-h{text-wrap:balance}

/* cycling loop-dial (homepage Continuously) — smooth handoff between stages */
.ld-arcg{transition:transform 1.15s cubic-bezier(.65,.05,.25,1)}
.ld-nring{transition:r .45s var(--ease),fill .45s,stroke .45s}
.loop-dial .ld-lab{transition:fill .45s}
.loop-dial .ld-halo,.loop-dial a>g{transition:opacity .45s}

/* homepage award cards — real badge artwork instead of text names */
.aw-badge{display:block;width:100%;aspect-ratio:747/520;object-fit:cover;border-radius:12px;
  border:1px solid var(--line);margin-bottom:16px;filter:saturate(.95)}
/* "New · 2026" pill on freshly won badges — gradient hairline, soft violet glow,
   sits on the badge artwork's top-right corner. Reads as a sticker, not a button. */
.aw-art{position:relative}
.aw-new{position:absolute;top:-14px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px 6px 9px;border-radius:999px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;white-space:nowrap;
  background:linear-gradient(rgba(12,8,36,.82),rgba(12,8,36,.82)) padding-box,var(--grad) border-box;
  border:1px solid transparent;box-shadow:0 6px 22px rgba(69,0,249,.45),0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.aw-new i{font-style:normal}
.aw-new::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--lav);
  box-shadow:0 0 10px var(--lav);animation:awPulse 2.4s ease-in-out infinite}
@keyframes awPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.aw-new::before{animation:none}}
.aw-card:has(.aw-new):hover{border-color:rgba(205,130,255,.5);box-shadow:0 18px 50px -24px rgba(135,82,250,.55)}
@media(max-width:560px){
  /* phones: tiles are tiny — shrink to a bare NEW, no dot, riding the tile's top-right edge clear of the artwork */
  .aw-new{top:-9px;right:6px;padding:3px 7px;font-size:8px;letter-spacing:.14em;gap:0}
  .aw-new i,.aw-new::before{display:none}
}

/* ==========================================================================
   HOMEPAGE "FIVE" — the StoryBrand plan reveal. A colossal gradient numeral
   anchors the headline; the five moves sit beneath as a linked index with
   draw-in underlines. The numeral's gradient slowly shimmers.
   ========================================================================== */
.five-head{text-align:center;max-width:none}
.five-lock{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,46px);margin-top:26px}
.five-num{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(10rem,21vw,19rem);line-height:.8;
  background:linear-gradient(165deg,#f4f1ff 0%,#cd82ff 34%,#8752fa 62%,#4500f9 100%);
  background-size:130% 220%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 48px rgba(135,82,250,.42));animation:fiveShine 7s ease-in-out infinite alternate}
@keyframes fiveShine{from{background-position:0% 0%}to{background-position:100% 100%}}
@media (prefers-reduced-motion:reduce){.five-num{animation:none}}
.five-h{font-family:'Outfit',sans-serif;font-weight:600;font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.04;
  letter-spacing:-.02em;text-align:left;margin:0}
.five-h em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.five-sub{color:var(--mut);font-size:1.12rem;max-width:58ch;margin:30px auto 0}
.five-index{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:12px clamp(16px,2.6vw,34px);
  margin-top:36px;font-family:'Space Grotesk',monospace;font-size:.86rem;letter-spacing:.18em;text-transform:uppercase}
.five-index a{color:var(--mut);text-decoration:none;display:inline-flex;gap:8px;align-items:baseline;position:relative;
  padding-bottom:6px;transition:color .25s}
.five-index a i{font-style:normal;font-size:.68rem;color:var(--lav);letter-spacing:.22em}
.five-index a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--grad);transition:right .35s var(--ease)}
.five-index a:hover{color:#fff}
.five-index a:hover::after{right:0}
.five-index .fi-cont{color:var(--lav);letter-spacing:.26em;font-weight:600}
@media(max-width:720px){.five-lock{flex-direction:column;gap:6px}.five-h{text-align:center}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   CALLOUT WORDS — the italic emphasis inside pillar h3s is a deliberate
   signature: gradient ink, a hair of italic, and a hand-drawn underline
   swash that glows. One accent word per heading.
   ========================================================================== */
.pillar-copy h3 em,.five-h em{font-style:italic}
.pillar-copy h3 em{display:inline-block;position:relative;padding:0 .04em .1em 0;
  background:linear-gradient(105deg,#a98cff,#cd82ff 55%,#8752fa);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(135,82,250,.35))}
.pillar-copy h3 em::after{content:'';position:absolute;left:-1%;right:1%;bottom:-.06em;height:.24em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238752fa'/%3E%3Cstop offset='1' stop-color='%23cd82ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 8 Q 22 3 42 7 T 82 6 T 118 5' fill='none' stroke='url(%23g)' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  opacity:.95;filter:drop-shadow(0 0 8px rgba(205,130,255,.55))}

/* customer marquee: square icon marks pair with the brand name */
.cust-item.with-icon .cust-fallback{display:inline;margin-left:10px;font-family:'Space Grotesk';font-weight:600;
  font-size:17px;color:rgba(244,241,255,.66);transition:color .3s}
.cust-item.with-icon:hover .cust-fallback{color:#fff}

/* ==========================================================================
   LOOP CLOSE — the homepage plan's closing ceremony. The rail runs in from
   both edges, loops a ring carrying the five stations, a comet rides the
   whole circuit, and CONTINUOUSLY lands as the bookend to the giant 5.
   ========================================================================== */
.loop-close{position:relative;margin-top:34px;text-align:center}
.lc-pre{display:block;font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;color:var(--lav);margin-bottom:-8px}
.lc-rail{display:block;width:100%;height:auto;max-height:250px}
.lc-arc{animation:lcSpin 28s linear infinite}
@keyframes lcSpin{to{transform:rotate(360deg)}}
.lc-ticks circle{fill:#0a0518;stroke:#8752fa;stroke-width:2;animation:lcTick 12s ease-in-out infinite}
.lc-ticks circle:nth-child(2){animation-delay:2.4s}
.lc-ticks circle:nth-child(3){animation-delay:4.8s}
.lc-ticks circle:nth-child(4){animation-delay:7.2s}
.lc-ticks circle:nth-child(5){animation-delay:9.6s}
@keyframes lcTick{0%,100%{fill:#0a0518}4%,9%{fill:#cd82ff}}
.lc-marquee{overflow:hidden;margin-top:-4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.lc-track{display:inline-flex;align-items:baseline;gap:.5em;white-space:nowrap;padding-left:.25em;
  animation:lcMar 80s linear infinite;will-change:transform}
@keyframes lcMar{to{transform:translateX(-50%)}}
.lc-track .w{font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(3rem,7.2vw,5.8rem);line-height:1.15;
  letter-spacing:-.02em;
  background:linear-gradient(100deg,#8752fa,#cd82ff 55%,#a98cff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lc-track .w.ghost{background:none;-webkit-text-fill-color:transparent;color:transparent;
  -webkit-text-stroke:1.5px rgba(135,82,250,.34);filter:none}
.lc-track .dot{color:var(--lav);font-size:clamp(1.4rem,3vw,2.4rem);opacity:.55}
@media (prefers-reduced-motion:reduce){.lc-arc,.lc-ticks circle,.lc-track{animation:none}.lc-comet{display:none}}
/* tighten the seam into the Continuously section */
.cont{padding-top:60px}

/* the plan's name, underlined — the signature swash draws itself in
   left-to-right when the section scrolls into view. */
.lh-loop{position:relative;display:inline-block;font-style:normal;padding:0 .02em .04em;white-space:nowrap}
.lh-loop::after{content:'';position:absolute;left:-1%;right:1%;bottom:.02em;height:.2em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238752fa'/%3E%3Cstop offset='1' stop-color='%23cd82ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 8 Q 22 3 42 7 T 82 6 T 118 5' fill='none' stroke='url(%23g)' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  filter:drop-shadow(0 0 8px rgba(205,130,255,.55));
  clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.6,.05,.25,1) .4s}
.five-head.in .lh-loop::after{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.lh-loop::after{clip-path:none;transition:none}}
.five-tag{font-family:'Outfit',sans-serif;font-weight:500;font-size:clamp(1.2rem,2.1vw,1.55rem);color:#fff;
  margin-top:30px;letter-spacing:-.01em}
.five-tag em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Continuously section — the list drives the dial. Items are real controls
   with a filling progress bar, hover states, and an explore link on the
   active row. Hovering the list pauses the auto-advance. */
.cycle-item{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}
.cycle-item:hover .ci-tx b{color:#e6defc}
.cycle-item:hover .ci-ix{color:var(--lav)}
.cycle-item:focus-visible{box-shadow:inset 2px 0 0 var(--lav)}
.ci-bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,#4500f9,#8752fa,#cd82ff);box-shadow:0 0 10px rgba(135,82,250,.6)}
.cycle-item.on .ci-bar{animation:ciFill 4.6s linear forwards}
@keyframes ciFill{from{width:0}to{width:100%}}
#cycleList:hover .cycle-item.on .ci-bar{animation-play-state:paused}
.ci-go{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-family:'Outfit';font-weight:600;
  font-size:.88rem;color:var(--lav);text-decoration:none;opacity:0;transform:translateY(4px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),gap .2s}
.ci-go:hover{color:#fff;gap:11px}
.cycle-item.on .ci-go{opacity:1;transform:none}
.cycle-item.on .ci-tx p{max-height:96px}
@media (prefers-reduced-motion:reduce){.cycle-item.on .ci-bar{animation:none;width:100%}}

/* ==========================================================================
   ATTACK SURFACE — the word multiplies itself, the art divides beside it,
   and the risk cards breathe.
   ========================================================================== */
.attack-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,5vw,72px);align-items:center}
.attack-head .sec-head,.ah-copy{max-width:none}
.ah-copy h2{font-family:'Outfit';font-weight:600;font-size:clamp(2.3rem,4.8vw,3.9rem);line-height:1.02;letter-spacing:-.02em;margin-top:22px}
.ah-copy h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ah-copy p{color:var(--mut);font-size:1.12rem;margin-top:24px;max-width:58ch}
.ah-vis{max-height:380px}
/* the word that multiplies: ghost copies breathe outward behind it */
.w-multiply{position:relative;display:inline-block}
.w-multiply::before,.w-multiply::after{content:attr(data-word);position:absolute;left:0;top:0;z-index:-1;
  color:transparent;-webkit-text-stroke:1px rgba(135,82,250,.38);pointer-events:none}
.w-multiply::before{animation:wmA 9s ease-in-out infinite}
.w-multiply::after{animation:wmB 9s ease-in-out infinite}
@keyframes wmA{0%,100%{transform:translate(0,0);opacity:0}30%,62%{transform:translate(.16em,-.34em);opacity:.75}92%{opacity:0;transform:translate(.22em,-.46em)}}
@keyframes wmB{0%,100%{transform:translate(0,0);opacity:0}38%,70%{transform:translate(.34em,-.7em);opacity:.4}96%{opacity:0;transform:translate(.44em,-.9em)}}
@media (prefers-reduced-motion:reduce){.w-multiply::before,.w-multiply::after{display:none}}
/* risk cards: icons breathe on hover, taglines carry the gradient tick */
.risk .ricon{transition:transform .6s var(--ease),filter .6s}
.risk:hover .ricon{transform:scale(1.08);filter:drop-shadow(0 0 14px rgba(135,82,250,.55))}
.risk .tagline{position:relative;padding-left:30px}
.risk .tagline::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:20px;height:3px;border-radius:3px;background:var(--grad)}
@media(max-width:980px){.attack-head{grid-template-columns:1fr}.ah-vis{max-height:320px}}

/* risk cards are destinations: a stretched link makes the whole card
   clickable; the explore line rises on hover */
.risk:has(.risk-link){cursor:pointer}
.risk-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:'Outfit';font-weight:600;
  font-size:.92rem;color:var(--lav);text-decoration:none;opacity:0;transform:translateY(5px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),gap .2s}
.risk-link::after{content:'';position:absolute;inset:0}
.risk:hover .risk-link,.risk:focus-within .risk-link{opacity:1;transform:none}
.risk-link:hover{gap:12px;color:#fff}
@media(hover:none){.risk-link{opacity:1;transform:none}}

/* ==========================================================================
   ATTACK NET v2 — the multiplication runs through the section's background
   and off the page: x2 x4 x8 x16 generations ignite in a slow spreading
   wave; strays escape past the edges. Pure background element.
   ========================================================================== */
.problem{overflow:visible}
.attack-net{position:absolute;top:-30px;right:-6vw;width:min(62vw,1000px);height:calc(100% + 110px);
  pointer-events:none;z-index:0;opacity:.9}
.problem .wrap{position:relative;z-index:1}
.attack-sec{max-width:640px}
.an-t{stroke:rgba(168,150,255,.10);stroke-width:1;stroke-dasharray:2 8}
.an-lab{font-family:'Space Grotesk',monospace;font-size:15px;letter-spacing:2px;fill:#6b6491}
.an-b{fill:none;stroke:rgba(135,82,250,.22);stroke-width:1.2}
.an-strayb{stroke:rgba(135,82,250,.14)}
.an-n{fill:#0a0518;stroke:#8752fa;stroke-width:1.6}
.an-g0{fill:url(#ang);stroke:#cd82ff;stroke-width:1.4}
.an-stray{stroke:rgba(135,82,250,.5)}
.an-n{animation:anIgnite 14s ease-in-out infinite}
.an-g0{animation:anSeed 14s ease-in-out infinite}
.an-g1{animation-delay:2.2s}.an-g2{animation-delay:4.4s}.an-g3{animation-delay:6.6s}.an-g4{animation-delay:8.8s}
.an-stray{animation-delay:11s}
@keyframes anIgnite{0%,100%{fill:#0a0518;stroke:#8752fa}12%,30%{fill:#cd82ff;stroke:#cd82ff}46%{fill:#0a0518}}
@keyframes anSeed{0%,100%{filter:drop-shadow(0 0 6px rgba(205,130,255,.5))}10%,28%{filter:drop-shadow(0 0 18px rgba(205,130,255,.95))}}
@media (prefers-reduced-motion:reduce){.an-n,.an-g0{animation:none}}
@media(max-width:980px){.attack-net{display:none}.attack-sec{max-width:none}}
/* tighten the section's air */
.risk-grid{margin-top:56px}
.problem{padding-bottom:70px}

/* ==========================================================================
   PRODUCT VIDEO SLOT — a real player seat (demo / pitch video), not a
   cinemagraph. Poster + pulsing play + lightbox. Swap the data-video source
   when the produced video lands.
   ========================================================================== */
.demo-slot{position:relative;display:block;width:100%;aspect-ratio:16/9;max-height:380px;border-radius:22px;
  overflow:hidden;cursor:pointer;padding:0;border:1.5px solid transparent;
  background:linear-gradient(#0a0518,#0a0518) padding-box,
    linear-gradient(160deg,rgba(205,130,255,.55),rgba(69,0,249,.3) 60%,rgba(205,130,255,.15)) border-box}
.demo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.9);transition:opacity .5s,transform 6s var(--ease)}
.demo-slot:hover img{opacity:.65;transform:scale(1.03)}
.ds-scrim{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,transparent 40%,rgba(6,3,15,.55) 100%)}
.ds-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#4500f9,#8752fa 60%,#cd82ff);box-shadow:0 18px 50px -12px rgba(105,40,250,.65)}
.ds-play svg{margin-left:4px}
.ds-play::after{content:'';position:absolute;inset:-14px;border-radius:50%;border:1.5px solid rgba(205,130,255,.5);
  animation:dsPing 3.6s ease-out infinite}
@keyframes dsPing{0%{transform:scale(.8);opacity:.9}70%,100%{transform:scale(1.25);opacity:0}}
.demo-slot:hover .ds-play{transform:translate(-50%,-50%) scale(1.06)}
/* still variant — same frame, but visibly NOT clickable (no video yet) */
.demo-slot--still{cursor:default}
.demo-slot--still:hover img{opacity:.5;transform:none}
.ds-tag{position:absolute;left:22px;bottom:18px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#f4f1ff;
  background:rgba(6,3,15,.55);border:1px solid rgba(205,130,255,.3);border-radius:999px;padding:8px 15px;backdrop-filter:blur(4px)}
@media (prefers-reduced-motion:reduce){.ds-play::after{animation:none}}
/* lightbox */
.vmodal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(6,3,15,.88);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s}
.vmodal.open{opacity:1}
.vmodal video{width:min(1080px,88vw);aspect-ratio:16/9;border-radius:18px;background:#000;
  box-shadow:0 40px 120px -30px rgba(69,0,249,.6)}
.vmodal .vx{position:absolute;top:26px;right:34px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:none;color:#fff;font-size:20px;cursor:pointer;font-family:'Outfit'}
.vmodal .vnote{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-family:'Space Grotesk';
  font-size:.72rem;letter-spacing:.2em;color:#a59fc4;text-transform:uppercase}

/* Cranium ONE — the product name carries a slow living shimmer */
em.shine{background:linear-gradient(100deg,#4500f9 0%,#8752fa 28%,#cd82ff 50%,#8752fa 72%,#4500f9 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:oneShine 9s linear infinite}
@keyframes oneShine{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){em.shine{animation:none}}

/* Command Deck — the Continuously section is a centered title card:
   claim, explanation, then the loop itself, enthroned and larger. */
.cmdeck .sec-head.center p{max-width:66ch}
.cmdeck-dial{margin-top:18px}
.cmdeck .loop-dial{max-width:600px}
.cmdeck{padding-bottom:70px}

/* ==========================================================================
   "One platform. Five moves." — the type does the talking (platform page).
   Line one is monumental and still, with a slow light sweep (the ONE
   platform). Line two moves: each letter of "moves." drifts on a quiet,
   staggered 9s wave. The oversized scale is what balances the split head.
   ========================================================================== */
.opfm{display:flex;flex-direction:column;gap:.06em;
  font-size:clamp(3.2rem,6.2vw,5.9rem);line-height:1.03;letter-spacing:-.02em}
.opfm .op1{background:linear-gradient(100deg,#fff 0%,#fff 40%,#b9a8ff 50%,#fff 60%,#fff 100%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:opSheen 12s linear infinite}
@keyframes opSheen{to{background-position:-240% 0}}
/* animated inline-blocks fall out of the parent's background-clip:text,
   so each letter carries its own gradient clip */
.fm-moves span{display:inline-block;background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:fmDrift 9s ease-in-out infinite}
.fm-moves span:nth-child(2){animation-delay:.9s}
.fm-moves span:nth-child(3){animation-delay:1.8s}
.fm-moves span:nth-child(4){animation-delay:2.7s}
.fm-moves span:nth-child(5){animation-delay:3.6s}
.fm-moves span:nth-child(6){animation-delay:4.5s}
@keyframes fmDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-.06em)}}
/* the big lockup centers against the long paragraph instead of sinking */
.sec-head--split:has(.opfm){align-items:center}
@media (prefers-reduced-motion:reduce){.opfm .op1,.fm-moves span{animation:none}}

/* ==========================================================================
   HOMEPAGE HERO — "The Synaptic Storm" cinemagraph + tour announcement bar
   ========================================================================== */
.hero-kick{font-family:'Space Grotesk';font-size:11.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--lav);display:block;margin-bottom:20px}
.hero-art-home{position:absolute;top:0;right:4.5%;bottom:0;width:74%;z-index:1;pointer-events:none}
.hero-art-home video{width:100%;height:100%;object-fit:cover;object-position:right center;display:block;opacity:.92;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
.hero-art-home::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--ink) 0%,rgba(6,3,15,.8) 12%,rgba(6,3,15,.3) 34%,transparent 58%),
  linear-gradient(270deg,rgba(6,3,15,.82) 0%,rgba(6,3,15,.35) 16%,transparent 32%),
  linear-gradient(180deg,rgba(6,3,15,.5) 0%,transparent 30%,transparent 64%,var(--ink) 100%)}
.hero-readout .n{text-shadow:0 2px 20px rgba(6,3,15,.95),0 0 40px rgba(6,3,15,.8)}
.hero-readout .l{text-shadow:0 1px 12px rgba(6,3,15,.95)}
@media(max-width:900px){.hero-art-home{width:100%;right:0;opacity:.4}}

/* Tour announcement bar — pinned above the header on the homepage. Dismissible
   for the browser session (#tourBarClose + main.js). Retheme the copy in
   front-page.php when the tour moves to the next stop. */
.tour-bar-wrap{position:fixed;top:0;left:0;right:0;z-index:1001;display:flex;align-items:center;
  background:linear-gradient(90deg,#0a0518,#150b30 46%,#0a0518);border-bottom:1px solid rgba(205,130,255,.2)}
.tour-bar-wrap[hidden]{display:none}  /* [hidden] alone loses to display:flex */
.tour-bar{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;height:40px;
  font-family:'Space Grotesk';font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);text-decoration:none;padding:0 12px}
.tour-bar .d{width:7px;height:7px;border-radius:50%;background:var(--lav);box-shadow:0 0 10px var(--lav);flex-shrink:0;
  animation:tourPulse 2.4s ease-in-out infinite}
@keyframes tourPulse{0%,100%{opacity:1}50%{opacity:.35}}
.tour-bar b{color:var(--lav-2,#cd82ff);font-weight:600}
.tour-bar .m{color:var(--mut-2,#8f85c0);font-weight:400}
.tour-bar .go{color:#fff;white-space:nowrap;transition:gap .2s}
.tour-bar:hover .go{text-decoration:underline;text-underline-offset:3px}
.tour-bar-x{background:none;border:0;color:#8f85c0;width:34px;height:34px;margin-right:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:50%;transition:color .3s,background .3s}
.tour-bar-x:hover{color:#fff;background:rgba(255,255,255,.06)}
.tour-bar-x svg{width:14px;height:14px}
html.has-tourbar header{top:40px}
html.has-tourbar body.admin-bar header{top:72px}
/* logged-in admins: drop below the WP admin bar so the strip stays visible */
body.admin-bar .tour-bar-wrap{top:32px}
@media screen and (max-width:782px){body.admin-bar .tour-bar-wrap{top:46px}
  html.has-tourbar body.admin-bar header{top:86px}}
@media(max-width:760px){.tour-bar .m{display:none}}
@media(max-width:560px){.tour-bar{gap:9px;font-size:10px;letter-spacing:.08em}}


/* ==========================================================================
   PLATFORM — CUSTOMER IMPACT. Headline left, the payoff number right, then
   the case story as one journey line that literally brightens from blind
   spots to full control.
   ========================================================================== */
.ci-head{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:60px;margin-bottom:64px}
.ci-head h2{margin-bottom:0}
.ci-stat{text-align:right;padding-bottom:4px}
.ci-num{font-family:'Outfit';font-weight:600;font-size:clamp(4rem,7vw,6.6rem);line-height:.88;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums}
.ci-pct{font-size:.55em}
.ci-lab{font-family:'Space Grotesk';font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mut-2);margin-top:12px;line-height:1.7}
.ci-flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:52px}
.ci-flow::before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(135,82,250,.14),rgba(135,82,250,.5) 55%,rgba(205,130,255,.95))}
.ci-step{position:relative;padding-top:30px}
.ci-step::before{content:"";position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--grad);box-shadow:0 0 12px rgba(135,82,250,.6);opacity:.75}
.ci-step--out::before{opacity:1;box-shadow:0 0 20px rgba(205,130,255,.95)}
.ci-tag{font-family:'Space Grotesk';font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lav);margin-bottom:12px}
.ci-step p{color:var(--mut);font-size:.98rem;line-height:1.64}
.ci-step--out p{color:#cfc7ef}
@media(max-width:880px){
  .ci-head{grid-template-columns:1fr;row-gap:26px;margin-bottom:44px}
  .ci-stat{text-align:left}
  .ci-flow{grid-template-columns:1fr;gap:34px}
  .ci-flow::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto;
    background:linear-gradient(180deg,rgba(135,82,250,.14),rgba(205,130,255,.95))}
  .ci-step{padding-top:0;padding-left:30px}
}


/* ============================================================
   TOUR HERO — shared by /events/ (the takeover) and the event
   recap pages. Lives here, not in a template <style> block, so
   any page can use it. Chips/marquee/tickets are global above.
   ============================================================ */
.bh-hero{position:relative;min-height:94svh;display:flex;align-items:center;overflow:hidden;padding:120px 0 80px}
.bh-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 28%;z-index:0;filter:saturate(1.05)}
.bh-hero-veil{position:absolute;inset:0;z-index:1;background:
	radial-gradient(120% 90% at 50% 8%,transparent 30%,rgba(6,3,15,.55) 70%,var(--ink) 100%),
	linear-gradient(180deg,rgba(6,3,15,.55),rgba(6,3,15,.2) 36%,rgba(6,3,15,.86) 86%,var(--ink) 100%)}
/* .bh-hero--dim: deepen the scrim behind the hero copy. The base veil is
   deliberately CLEAR through the middle so the photo reads, which works over a
   dark stage shot and washes the eyebrow out over a brightly lit booth wall.
   This adds a soft centred scrim only where the text sits. */
.bh-hero--dim .bh-hero-veil{background:
	radial-gradient(74% 56% at 50% 43%,rgba(6,3,15,.74),rgba(6,3,15,.36) 62%,transparent 80%),
	radial-gradient(120% 90% at 50% 8%,transparent 34%,rgba(6,3,15,.6) 72%,var(--ink) 100%),
	linear-gradient(180deg,rgba(6,3,15,.62),rgba(6,3,15,.3) 36%,rgba(6,3,15,.88) 86%,var(--ink) 100%)}
.bh-hero-inner{position:relative;z-index:3;text-align:center}
.bh-eyebrow{display:inline-block;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--lav);margin-bottom:14px}
.bh-title{font-family:'Outfit';font-weight:700;font-size:clamp(3.4rem,12vw,9rem);line-height:.92;letter-spacing:-.02em;margin:0;color:#fff;text-shadow:0 0 60px rgba(135,82,250,.45)}
.bh-title em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 30px rgba(205,130,255,.4))}
/* .bh-title--long: for a title whose longest line runs ~14 characters (the widow
   killer glues its last two words, so it cannot wrap). Scales a touch smaller so
   it fits a 390px phone; desktop still caps at 9rem. */
.bh-title--long{font-size:clamp(2.1rem,10.4vw,9rem)}
/* /events/ only: the chrome album-cover wordmark replaces the text title. Alpha WebP over the band photo. */
.bh-title--chrome{display:block;line-height:0;text-shadow:none;margin:6px auto 0;filter:drop-shadow(0 14px 44px rgba(135,82,250,.5)) drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.bh-title--chrome img{display:block;width:min(100%,880px);height:auto;margin:0 auto}
@media(max-width:760px){.bh-title--chrome img{width:100%}}
.bh-tagline{font-family:'Outfit';font-weight:400;font-size:clamp(1.1rem,2.4vw,1.7rem);color:var(--mut);margin:18px 0 0}
.bh-tagline b{color:#fff;font-weight:600}
.bh-meta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
@media(max-width:600px){.bh-meta .bh-chip{font-size:11px;padding:8px 14px}}

/* ============================================================
   PERK GRID — benefits list. Shared by /company/careers/ and every
   role detail page, so it lives here rather than in a template
   <style> block.
   ============================================================ */
.perk-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 48px;margin-top:48px}
.perk{display:flex;gap:16px;align-items:flex-start}
.perk .pk{width:8px;height:8px;border-radius:50%;background:var(--lav);box-shadow:0 0 12px var(--lav);margin-top:8px;flex-shrink:0}
.perk b{color:#fff;font-family:'Outfit';font-size:1.1rem}
.perk p{color:var(--mut);font-size:.95rem;margin-top:4px}
.perk b{display:block}
@media(max-width:760px){.perk-grid{grid-template-columns:1fr}}

/* ============================================================
   SUPADEMO EMBED — "See it in action" split section.
   Used on all five AI Trust Loop pillar pages (Discover,
   Observe, Govern, Secure, Prove), so it lives here rather
   than in a template <style> block. Supademo's embed
   background is transparent, so the demo window floats
   directly on the page — no frame, no box, no border.
   --sd-ar tunes the aspect ratio (Secure exports 1.29).
   ============================================================ */
.sd-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:18px 72px;align-items:center}
.sd-copy h2{font-family:'Outfit';font-weight:600;font-size:clamp(2rem,3.2vw,2.9rem);line-height:1.05;letter-spacing:-.02em;margin-top:22px}
.sd-copy h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sd-sub{color:var(--mut);font-size:1.06rem;margin-top:20px;max-width:46ch}
.sd-steps{margin-top:32px;border-top:1px solid var(--line)}
.sd-step{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);align-items:baseline}
.sd-step .sn{font-family:'Space Grotesk';font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--lav);flex-shrink:0}
.sd-step b{display:block;color:#fff;font-family:'Outfit';font-weight:600;font-size:1.02rem}
.sd-step p{color:var(--mut);font-size:.93rem;margin-top:2px}
.sd-foot{margin-top:26px;font-family:'Space Grotesk';font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--mut-2)}
.sd-tools{display:flex;justify-content:flex-end;margin-top:0}
@media(min-width:1021px){.sd-tools{grid-column:2}}
.sd-expand{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:none;border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--mut);font-family:'Space Grotesk';font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;transition:color .3s,border-color .3s}
.sd-expand:hover{color:#fff;border-color:rgba(205,130,255,.45)}
.sd-expand svg{width:13px;height:13px;flex-shrink:0}
.sd-embed:fullscreen{aspect-ratio:auto;border-radius:0}
.sd-embed:fullscreen iframe{inset:0;width:100%;height:100%;border-radius:0}
.sd-embed{position:relative;width:100%;aspect-ratio:var(--sd-ar,1.33);border-radius:24px;
  background:linear-gradient(160deg,#f7f5fd,#e7e2f4);
  box-shadow:0 0 0 1px rgba(205,130,255,.22),0 40px 110px -35px rgba(69,0,249,.55)}
.sd-embed iframe{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);border:0;display:block;background:transparent;border-radius:13px;overflow:hidden}
@media(max-width:1020px){.sd-grid{grid-template-columns:1fr;gap:40px}.sd-copy{max-width:560px}}
/* Mobile: hook first, demo immediately after, steps below — one column, big screen presence. */
@media(max-width:760px){
  .sd-grid{display:grid;grid-template-columns:1fr;gap:0}
  .sd-copy{display:contents}
  .sd-copy h2{font-size:clamp(2.05rem,8.6vw,2.6rem);margin-top:18px}
  .sd-sub{margin-top:14px;font-size:1.02rem}
  .sd-embed{order:1;margin-top:28px;border-radius:18px}
  .sd-embed iframe{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:14px}
  .sd-tools{order:2;margin-top:12px;grid-column:1}
  .sd-steps{order:3;margin-top:26px}
  .sd-step{padding:14px 0;gap:15px}
  .sd-step b{font-size:1rem}
  .sd-step p{font-size:.9rem}
  .sd-foot{order:4;margin-top:22px;font-size:.62rem;letter-spacing:.18em;line-height:1.9}
}

/* ==========================================================================
   DEAL REGISTRATION (global — /deal-registration/ and
   /deal-registration-archer/. Both templates share every rule here; the only
   difference between the pages is the hero lockup and the HubSpot form id.
   Component CSS lives here, NOT in a template <style> block — see CLAUDE.md.)
   ========================================================================== */
.dreg-hero{padding:150px 0 54px}
.dreg-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(30px,4vw,60px);align-items:center}
.dreg-h1{font-family:'Outfit';font-weight:600;font-size:clamp(2.5rem,5vw,4.1rem);line-height:1.02;letter-spacing:-.025em;margin-top:22px}
.dreg-h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dreg-hero-sub{color:var(--mut);font-size:clamp(1.02rem,1.3vw,1.16rem);margin-top:20px;max-width:46ch}
/* the partner lockup, right-weighted in the hero */
/* Sizes are FIXED px, not vw: the .wrap caps at 1280px, so a vw-scaled lockup
   keeps growing past the column on wide monitors and overflows. The two marks
   are sized so their INK heights are optically matched (the Cranium PNG carries
   ~22% vertical padding; archer-lockup.png is archer.png trimmed to its ink). */
.dreg-lock{display:flex;align-items:center;justify-content:flex-end;gap:26px;flex-wrap:nowrap;min-width:0}
.dreg-lock img{height:40px;width:auto;object-fit:contain;flex-shrink:0}
.dreg-lock img.dreg-lock-partner{height:31px;filter:brightness(0) invert(1);opacity:.94}
.dreg-lock .dreg-x{width:1px;height:46px;background:linear-gradient(180deg,transparent,rgba(205,130,255,.55),transparent);flex-shrink:0}

/* form + criteria split. NB: the theme sets section.block{padding:150px 0},
   which outranks a bare .dreg-block — keep the `section` on these two. */
section.dreg-block{padding:26px 0 0}
.dreg-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(36px,5vw,74px);align-items:start}
.dreg-formcard{position:relative;border-radius:26px;padding:clamp(24px,3vw,36px);overflow:hidden;
  border:1.5px solid transparent;
  background:linear-gradient(160deg,#0e0824,#0a0518) padding-box,
    linear-gradient(160deg,rgba(205,130,255,.5),rgba(69,0,249,.32) 60%,rgba(205,130,255,.12)) border-box;
  box-shadow:0 30px 80px -34px rgba(69,0,249,.45)}
.dreg-formcard-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.dreg-formcard-title{font-family:'Outfit';font-weight:600;font-size:1.5rem;color:#fff;line-height:1.15}
.dreg-formcard-hint{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lav)}
/* HubSpot renders either inline (raw HTML form) or in an iframe — keep both full-bleed in the card. */
.dreg-formcard .hs-form-frame{margin-top:4px;min-height:120px}
.dreg-formcard .hs-form-frame iframe{width:100%!important;max-width:100%!important;border:0}

/* criteria rail */
.dreg-crit{display:flex;flex-direction:column;gap:clamp(26px,3vw,38px)}
.dreg-crit-b{border-top:1px solid var(--line);padding-top:22px}
.dreg-crit-b:first-child{border-top:0;padding-top:0}
.dreg-crit-ix{font-family:'Space Grotesk';font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--lav)}
.dreg-crit-b h2{font-family:'Outfit';font-weight:600;font-size:clamp(1.42rem,2.2vw,1.85rem);line-height:1.12;letter-spacing:-.015em;color:#fff;margin-top:10px}
.dreg-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.dreg-list>li{position:relative;padding-left:26px;color:var(--mut);font-size:.98rem;line-height:1.62}
.dreg-list>li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--lav);box-shadow:0 0 12px rgba(205,130,255,.55)}

/* discounts + terms */
section.dreg-cards-block{padding:70px 0 120px}
.dreg-cards{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,3vw,40px);align-items:stretch}
.dreg-card{position:relative;border:1px solid var(--line);border-radius:24px;padding:clamp(26px,3.2vw,42px);
  background:linear-gradient(160deg,rgba(69,0,249,.09),rgba(205,130,255,.035));overflow:hidden}
.dreg-card::before{content:"";position:absolute;top:0;left:clamp(26px,3.2vw,42px);right:clamp(26px,3.2vw,42px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(205,130,255,.5),transparent)}
.dreg-card h2{font-family:'Outfit';font-weight:600;font-size:clamp(1.24rem,1.7vw,1.5rem);letter-spacing:.12em;
  text-transform:uppercase;color:#fff;text-align:center}
.dreg-card h3{font-family:'Outfit';font-weight:600;font-size:clamp(1.24rem,1.7vw,1.5rem);letter-spacing:.12em;
  text-transform:uppercase;color:#fff;text-align:center;margin-top:44px}
/* rate ledger — label left, gradient figure right */
.dreg-rates{margin-top:26px;display:flex;flex-direction:column}
.dreg-rate{display:flex;align-items:baseline;gap:14px;padding:15px 2px;border-bottom:1px solid var(--line-2);transition:background .25s}
.dreg-rate:last-child{border-bottom:0}
.dreg-rate:hover{background:linear-gradient(90deg,rgba(135,82,250,.07),transparent 75%)}
.dreg-rate .rl{color:var(--mut);font-size:.98rem;flex:0 1 auto}
.dreg-rate .rd{flex:1 1 auto;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 7px);transform:translateY(-3px)}
.dreg-rate .rv{font-family:'Outfit';font-weight:600;font-size:1.3rem;letter-spacing:-.01em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;flex:0 0 auto}
.dreg-rate.is-total .rl{color:#fff;font-weight:600}
.dreg-rate.is-total{border-top:1px solid var(--line);margin-top:4px}
/* terms — nested outline */
.dreg-terms{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:15px}
.dreg-terms>li{position:relative;padding-left:26px;color:var(--mut);font-size:.97rem;line-height:1.62}
.dreg-terms>li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--lav);box-shadow:0 0 12px rgba(205,130,255,.55)}
.dreg-terms ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.dreg-terms ul>li{position:relative;padding-left:24px;color:var(--mut-2);font-size:.92rem;line-height:1.6}
.dreg-terms ul>li::before{content:"";position:absolute;left:1px;top:.58em;width:7px;height:7px;border-radius:50%;
  background:transparent;border:1.5px solid var(--lav);box-shadow:none}
.dreg-foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);color:var(--mut-2);font-size:.8rem;line-height:1.7}
.dreg-foot a{color:var(--lav)}

@media(max-width:1020px){
  .dreg-hero{padding:126px 0 40px}
  .dreg-hero-grid{grid-template-columns:1fr;gap:30px}
  .dreg-lock{justify-content:flex-start;gap:24px}
  .dreg-lock img{height:38px}
  .dreg-lock img.dreg-lock-partner{height:29px}
  .dreg-lock .dreg-x{height:44px}
  .dreg-grid{grid-template-columns:1fr;gap:38px}
  .dreg-cards{grid-template-columns:1fr}
  section.dreg-block{padding:16px 0 0}
  section.dreg-cards-block{padding:56px 0 92px}
}
@media(max-width:760px){
  .dreg-hero{padding:112px 0 26px}
  section.dreg-block{padding:10px 0 0}
  section.dreg-cards-block{padding:44px 0 74px}
  .dreg-lock{gap:13px}
  .dreg-lock img{height:26px}
  .dreg-lock img.dreg-lock-partner{height:20px}
  .dreg-lock .dreg-x{height:30px}
  .dreg-crit{gap:26px}
  /* Narrow labels wrap; a wrapping flex row would drop the % onto its own
     line and strand the dotted leader. Grid keeps the figure pinned right,
     baseline-aligned to the label's first line, and the leader is dropped. */
  .dreg-rate{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:baseline}
  .dreg-rate .rd{display:none}
  .dreg-rate .rv{font-size:1.18rem}
  .dreg-card h3{margin-top:34px}
  .dreg-list>li,.dreg-terms>li{font-size:.94rem}
}

/* =====================================================================
   DOCUMENTATION (docs.cranium.ai) — header mega footer row + /resources/
   bento grid. Data: inc/docs-data.php. Added 2.2.9.
   ===================================================================== */
.mega-foot{display:flex;align-items:center;gap:22px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.mega-foot .mf-lab{font-family:'Space Grotesk';font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-2);font-weight:600;margin-right:auto}
.mega-foot a{font-family:'Space Grotesk';font-size:13px;font-weight:600;color:var(--lav);display:inline-flex;align-items:center;gap:6px;transition:gap .4s var(--ease),color .3s}
.mega-foot a:hover{gap:11px;color:#fff}

.docs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.docs-head .sec-head{margin-bottom:0}
.docs-head .btn{white-space:nowrap}
.docs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.doc-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 28px 26px;border-radius:20px;
  background:linear-gradient(160deg,rgba(135,82,250,.09),rgba(12,6,32,.6) 45%,rgba(6,3,15,.4));
  border:1px solid var(--line);overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
.doc-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(205,130,255,.55),rgba(69,0,249,.05) 50%,rgba(205,130,255,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s;z-index:-1}
.doc-card::after{content:'';position:absolute;width:260px;height:260px;right:-90px;top:-110px;border-radius:50%;
  background:radial-gradient(circle,rgba(135,82,250,.28),transparent 68%);opacity:0;transition:opacity .6s;z-index:-1}
.doc-card:hover,.doc-card:focus-within{transform:translateY(-5px);border-color:transparent;box-shadow:0 30px 70px -30px rgba(69,0,249,.7)}
.doc-card:hover::before,.doc-card:hover::after,.doc-card:focus-within::before{opacity:1}
.doc-card.span2{grid-column:span 2}
.dc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dc-tag{font-family:'Space Grotesk';font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lav);padding:6px 10px;border-radius:999px;background:rgba(135,82,250,.14);border:1px solid rgba(205,130,255,.22)}
.dc-move{font-family:'Space Grotesk';font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);font-weight:600}
.dc-move b{color:var(--mut);font-weight:600}
.doc-card h3{font-family:'Outfit';font-size:1.32rem;font-weight:500;line-height:1.2;margin:4px 0 0;color:#fff}
.doc-card.span2 h3{font-size:1.7rem}
.doc-card.span2 p{font-size:1.06rem;max-width:62ch}
.doc-card p{color:var(--mut);font-size:.96rem;line-height:1.55;margin:0}
.dc-link{margin-top:auto;padding-top:10px;font-family:'Space Grotesk';font-weight:600;font-size:13.5px;color:var(--lav);
  display:inline-flex;align-items:center;gap:8px;transition:gap .4s var(--ease),color .3s}
.dc-link::after{content:'';position:absolute;inset:0}
.doc-card:hover .dc-link{gap:13px;color:#fff}
.dc-num{position:absolute;right:26px;bottom:18px;font-family:'Space Grotesk';font-size:64px;font-weight:700;line-height:1;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(205,130,255,.16);pointer-events:none;
  transition:-webkit-text-stroke-color .5s,transform .6s var(--ease)}
.doc-card:hover .dc-num{-webkit-text-stroke-color:rgba(205,130,255,.45);transform:translateY(-4px)}
@media(max-width:1180px){.docs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){.docs-grid{margin-top:40px}.doc-card.span2 h3{font-size:1.45rem}}
@media(max-width:560px){.docs-grid{grid-template-columns:1fr;gap:12px}.doc-card{padding:24px 22px 22px}.doc-card.span2{grid-column:span 1}.docs-head .btn{width:100%;justify-content:center}}

/* ============================================================
   RESOURCE GATE — HubSpot email capture before ebook / white paper
   downloads (inc/resource-gate.php + assets/js/resource-gate.js).
   ============================================================ */
html.rg-lock{overflow:hidden}
.rg{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:16px}
.rg[hidden]{display:none}
.rg-backdrop{position:absolute;inset:0;background:rgba(4,2,12,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .32s var(--ease)}
.rg-dialog{position:relative;width:min(540px,100%);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;
  border:1px solid transparent;border-radius:24px;
  background:linear-gradient(160deg,#0e0824,#0a0518) padding-box,
    linear-gradient(160deg,rgba(205,130,255,.55),rgba(69,0,249,.34) 60%,rgba(205,130,255,.12)) border-box;
  box-shadow:0 40px 120px -30px rgba(69,0,249,.6),0 0 0 1px rgba(0,0,0,.2);
  opacity:0;transform:translateY(18px) scale(.97);transition:opacity .32s var(--ease),transform .42s var(--ease)}
.rg.is-open .rg-backdrop{opacity:1}
.rg.is-open .rg-dialog{opacity:1;transform:none}
.rg-x{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(8,3,24,.6);border:1px solid rgba(205,130,255,.3);backdrop-filter:blur(6px);cursor:pointer;
  transition:border-color .3s,transform .3s var(--ease)}
.rg-x:hover{border-color:var(--lav);transform:rotate(90deg)}
.rg-x svg{width:18px;height:18px}
.rg-cover{position:relative;aspect-ratio:16/6.4;overflow:hidden;background:#06030f;border-radius:23px 23px 0 0}
.rg-cover img{width:100%;height:100%;object-fit:cover;object-position:center 4%;display:block}
.rg-cover::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(180deg,transparent,#0d0722)}
.rg-body{padding:6px clamp(22px,4vw,34px) clamp(24px,4vw,32px)}
.rg-kicker{font-family:'Space Grotesk';font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--lav)}
.rg-title{font-family:'Outfit';font-weight:600;font-size:clamp(1.45rem,3.4vw,1.85rem);line-height:1.12;letter-spacing:-.015em;
  color:#fff;margin-top:10px;text-wrap:balance}
.rg-sub{color:var(--mut);font-size:.95rem;margin-top:10px}
.rg-form{margin-top:8px;min-height:120px}
.rg-form iframe{width:100%!important;max-width:100%!important;border:0}
.rg-fine{margin-top:14px}
.rg-loading{display:flex;gap:8px;justify-content:center;align-items:center;min-height:120px}
.rg-loading span{width:8px;height:8px;border-radius:50%;background:var(--lav);opacity:.3;animation:rgDot 1s infinite var(--ease)}
.rg-loading span:nth-child(2){animation-delay:.15s}.rg-loading span:nth-child(3){animation-delay:.3s}
@keyframes rgDot{50%{opacity:1;transform:translateY(-4px)}}
.rg-err{color:var(--mut);font-size:.92rem;padding:18px 0}
.rg-err a,.rg-done a{color:var(--lav);text-decoration:underline;text-underline-offset:3px}
.rg-done{text-align:center;padding:18px 0 4px}
.rg-check{width:56px;height:56px;margin:0 auto;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--grad);
  box-shadow:0 10px 34px rgba(105,40,250,.5)}
.rg-check svg{width:26px;height:26px}
.rg-done h3{font-family:'Outfit';font-weight:600;font-size:1.3rem;color:#fff;margin-top:16px}
.rg-done p{color:var(--mut);font-size:.94rem;margin-top:6px}
.rg-close-btn{margin-top:20px;font-family:'Space Grotesk';font-weight:600;font-size:14px;color:#fff;cursor:pointer;
  padding:12px 24px;border-radius:999px;border:1px solid rgba(205,130,255,.4);background:rgba(255,255,255,.03);transition:border-color .3s,background .3s}
.rg-close-btn:hover{border-color:var(--lav);background:rgba(135,82,250,.14)}
/* the form's own inline thank-you never shows — we swap to .rg-done */
.rg-form .submitted-message{display:none}
@media(max-width:560px){.rg{padding:10px;align-items:end}.rg-dialog{max-height:calc(100dvh - 20px);border-radius:22px}
  .rg-cover{border-radius:21px 21px 0 0;aspect-ratio:16/7}}
@media(prefers-reduced-motion:reduce){.rg-dialog,.rg-backdrop{transition:none}}



/* ============================================================
   OWASP TOP 10 MAP — rows rendered by cranium_owasp_rows()
   (inc/owasp-data.php). Used on /solutions/owasp-top-10/ and the
   AI Compliance page.
   ============================================================ */
.ow-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ow-row{display:grid;grid-template-columns:86px minmax(0,1fr) 230px;gap:22px;align-items:start;padding:24px 6px;border-bottom:1px solid var(--line);transition:background .3s}
.ow-row:hover{background:linear-gradient(90deg,rgba(135,82,250,.07),transparent 70%)}
.ow-id{font-family:'Space Grotesk';font-weight:600;font-size:.82rem;letter-spacing:.14em;color:var(--lav);padding-top:4px}
.ow-main h4{font-family:'Outfit';font-weight:600;font-size:1.18rem;color:#fff;line-height:1.25}
.ow-risk{color:var(--mut);font-size:.9rem;margin-top:4px}
.ow-how{color:#d8d2ee;font-size:.95rem;line-height:1.6;margin-top:10px;max-width:72ch}
.ow-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ow-lvl{font-family:'Space Grotesk';font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(205,130,255,.35);color:#e9e3ff;background:rgba(135,82,250,.12)}
.ow-strong .ow-lvl{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 20px rgba(105,40,250,.35)}
.ow-visibility .ow-lvl{color:var(--mut);background:transparent}
.ow-none .ow-lvl{color:var(--mut-2);background:transparent;border-color:var(--line);border-style:dashed}
.ow-none .ow-main h4,.ow-none .ow-id{opacity:.6}
.ow-moves{display:flex;gap:5px}
.ow-moves i{font-style:normal;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-family:'Space Grotesk';font-weight:600;font-size:11px;
  color:var(--mut-2);border:1px solid var(--line)}
.ow-moves i.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,#4500f9,#8752fa 60%,#cd82ff)}
.ow-list--compact .ow-row{padding:16px 6px;grid-template-columns:70px minmax(0,1fr) auto}
.ow-list--compact .ow-main h4{font-size:1.02rem}
.ow-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 4px;color:var(--mut);font-size:.85rem;align-items:center}
.ow-legend .ow-moves i{width:22px;height:22px;font-size:10px}
.ow-legend span{display:inline-flex;align-items:center;gap:8px}
.ow-tally{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ow-tally span{font-family:'Space Grotesk';font-weight:600;font-size:12px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);color:var(--mut)}
.ow-tally b{color:#fff;margin-right:6px}
.ow-note{color:var(--mut-2);font-size:.82rem;margin-top:18px;max-width:80ch}
@media(max-width:900px){
  .ow-row{grid-template-columns:62px minmax(0,1fr);gap:8px 16px}
  .ow-side{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap}
  .ow-list--compact .ow-row{grid-template-columns:56px minmax(0,1fr)}
}
.ow-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
@media(max-width:560px){.ow-row,.ow-list--compact .ow-row{grid-template-columns:1fr;gap:6px}.ow-id{padding:0}.ow-side{grid-column:1;margin-top:6px}}

/* Platform mega-menu "Why Cranium" card styles live in assets/css/mega-why.css
   (enqueued on every page, including the takeover homepages that drop this file). */