/* ============================================================
   OMNI · Cowbell brand 2025 · shared framework
   Linked by the landing + all detail pages. Page-specific CSS
   stays inline per page. Brand tokens, scene system, type,
   the Hum + Bell graphics, and reusable components.

   CACHE-BUSTING: this file is served with a 30-day max-age. Pages
   link it as omni-brand.css?v=<hash>. When you change this file,
   bump the ?v= value in every linking page or returning visitors
   keep the stale copy for up to 30 days. Regenerate the hash with:
   md5 -q omni-brand.css | cut -c1-8
   ============================================================ */

@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('assets/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('assets/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:800;font-display:swap;src:url('assets/fonts/inter-800.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url('assets/fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:700;font-display:swap;src:url('assets/fonts/barlow-700.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:800;font-display:swap;src:url('assets/fonts/barlow-800.woff2') format('woff2')}

:root{
  /* primary */
  --cb-blue:#0057A8; --cb-blue-deep:#073A78; --cb-blue-bright:#3F8EE0; --cb-navy:#08203F;
  /* neutral ramp */
  --n0:#FFFFFF; --n100:#F4F3F5; --n300:#D0D0D0; --n500:#8D8D8F; --n700:#444244; --n900:#0A0A0F;
  /* the Hum secondary palette */
  --hum-indigo:#3F46B4; --hum-indigo-d:#3132A8; --hum-teal:#079799; --hum-cyan:#81D4FF;
  --hum-magenta:#CD58A6; --hum-magenta-d:#9D269B; --hum-orange:#E69B24; --hum-gold:#F2D138; --hum-gold-d:#C9881A;
  /* text on dark / on light */
  --t-hi:#FFFFFF; --t-mid:rgba(255,255,255,.72); --t-lo:rgba(255,255,255,.46);
  --ink:#0A0A0F; --ink-mid:rgba(10,10,15,.66); --ink-lo:rgba(10,10,15,.46); --line-d:rgba(255,255,255,.14); --line-l:rgba(10,10,15,.12);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Barlow","Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ac:var(--cb-blue-bright);            /* per-scene accent, overridden inline */
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; background:var(--cb-navy)}
body{font-family:var(--font); background:var(--cb-navy); color:var(--t-hi); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip}

/* ---------- nav ---------- */
nav{position:fixed; inset:0 0 auto 0; z-index:50; height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 max(20px,1.6vw); backdrop-filter:saturate(160%) blur(16px); background:rgba(8,32,63,.62); border-bottom:1px solid rgba(255,255,255,.08)}
nav .wm{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.01em; display:flex; align-items:center}
nav .wm .byc{font-family:var(--font); font-weight:500; font-size:13px; opacity:.6; margin:0 6px 0 8px}
nav .wm .cowbell-logo{height:20px; width:auto}
nav .links{display:flex; gap:20px; font-size:13px; color:var(--t-mid)} nav .links a{color:inherit; text-decoration:none; transition:color .2s; white-space:nowrap} nav .links a:hover,nav .links a.active{color:#fff} nav .links a.nav-exit{display:inline-flex; align-items:center; margin-left:2px} nav .links a.nav-exit svg{width:17px; height:17px; display:block}
.navtoggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:0 8px; margin-right:-8px; background:none; border:0; cursor:pointer}
.navtoggle span{display:block; height:2px; width:22px; background:#fff; border-radius:2px; transition:transform .25s, opacity .2s}
@media(max-width:1180px){
  .navtoggle{display:flex}
  nav .links{position:absolute; top:54px; right:0; left:0; flex-direction:column; align-items:flex-start; gap:2px; padding:10px max(22px,4vw) 16px; background:rgba(8,32,63,.97); border-bottom:1px solid rgba(255,255,255,.10); backdrop-filter:saturate(160%) blur(16px); transform:translateY(-10px); opacity:0; pointer-events:none; transition:opacity .22s, transform .22s}
  nav .links a{padding:9px 0; font-size:15px; width:100%}
  nav.open .links{transform:none; opacity:1; pointer-events:auto}
  nav.open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav.open .navtoggle span:nth-child(2){opacity:0}
  nav.open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(prefers-reduced-motion:reduce){nav .links{transition:none} .navtoggle span{transition:none}}
.wm-omni{font-family:var(--font); font-weight:700; letter-spacing:-.01em;
  background:linear-gradient(118deg, var(--cb-blue-bright) 0%, #5FC2F4 48%, var(--hum-cyan) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}

/* ---------- scene framework (landing: full-height) ---------- */
.scene{min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px max(22px,6vw); position:relative; overflow:hidden}
.scene.tight{min-height:auto; padding:104px max(22px,6vw)}
.s-navy{background:var(--cb-navy); color:var(--t-hi)}
.s-deep{background:radial-gradient(125% 95% at 50% 0%, #0c2d54 0%, var(--cb-navy) 60%, #061a33 100%); color:var(--t-hi)}
.s-blue{background:linear-gradient(160deg, var(--cb-blue) 0%, var(--cb-blue-deep) 100%); color:#fff}
.s-light{background:var(--n0); color:var(--ink)}
.s-paper{background:var(--n100); color:var(--ink)}
.wrapn{width:100%; max-width:1080px; margin:0 auto; position:relative; z-index:2}

/* ---------- detail-page section (content-height, alternating) ---------- */
.section{padding:96px max(22px,6vw); text-align:center; position:relative; overflow:hidden; scroll-margin-top:54px}
/* Short-viewport (14in laptop) base: on wide-but-short screens, .scene sections
   (min-height:100svh, vertically-centered) overflow the fold. Trim padding +
   shrink the heading/lead scale so they fit. Mirrors the homepage's inline base
   (index.html does not link this sheet). Only sub-page .scene sections are hit
   (currently omni-agents #platform/#voices; cyber-pulse/slide have no .scene).
   Per-page ID overrides (in the page's own inline style) layer on top. */
@media (max-height:940px){
  .scene{padding-top:64px; padding-bottom:40px}
  .scene:not(.closing) h2{font-size:clamp(26px,3.6vw,44px); line-height:1.08}
  .scene .lead{font-size:clamp(15px,1.7vw,18px); line-height:1.35}
}
.section > *{position:relative; z-index:2}
.section h2{font-family:var(--display); font-weight:700; letter-spacing:-.025em; line-height:1.08; font-size:clamp(30px,4.6vw,52px)}
.section .sub{color:var(--t-mid); font-size:18px; margin:14px auto 0; max-width:62ch; line-height:1.5}
.s-light .section .sub,.section.s-light .sub,.s-paper .section .sub,.section.s-paper .sub{color:var(--ink-mid)}

/* ---------- the Hum: halftone dot texture ---------- */
.hum{position:absolute; z-index:0; pointer-events:none; color:var(--ac); opacity:.16;
  background-image:radial-gradient(currentColor 1.2px, transparent 1.6px); background-size:8px 8px}
.hum.tl{inset:-2% 50% 52% -2%; clip-path:polygon(0 0,100% 0,0 100%)}
.hum.br{inset:52% -2% -2% 50%; clip-path:polygon(100% 0,100% 100%,0 100%)}
.hum.tr{inset:-2% -2% 55% 52%; clip-path:polygon(0 0,100% 0,100% 100%)}
.hum.full{inset:0; opacity:.07}
.s-light .hum,.s-paper .hum{opacity:.13}
/* the Bell mark as a bleeding background shape (assets/bell/*.svg) */
.bell-bg{position:absolute; z-index:0; pointer-events:none; height:auto}
/* Hum-in-Bell: dot halftone clipped to the Bell polygon with a soft radial fade */
.hum-bell{position:absolute; z-index:0; pointer-events:none; aspect-ratio:379/380; color:var(--ac);
  clip-path:polygon(12.2% 86.7%, 0% 50.7%, 52.1% 0%, 88.1% 4.2%, 100% 27.9%, 85% 100%);
  background-image:radial-gradient(currentColor 1.5px, transparent 1.9px); background-size:9px 9px;
  -webkit-mask-image:radial-gradient(62% 60% at 50% 46%, #000 26%, transparent 80%); mask-image:radial-gradient(62% 60% at 50% 46%, #000 26%, transparent 80%)}
/* soft scrim between a centered Hum-bell and text, so copy stays readable (dark scenes only) */
.bell-scrim{position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(44% 52% at 50% 50%, rgba(6,22,45,.92) 0%, rgba(6,22,45,.58) 48%, rgba(6,22,45,0) 78%)}

/* ---------- type ---------- */
.kicker{font-size:15px; font-weight:740; letter-spacing:.16em; text-transform:uppercase; color:var(--ac)}
.eyebrow{font-size:15px; font-weight:740; letter-spacing:.16em; text-transform:uppercase; color:var(--ac)}
h1.display{font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:.98; font-size:clamp(46px,8.5vw,104px)}
.scene h2{font-family:var(--display); font-weight:700; letter-spacing:-.025em; line-height:1.04; font-size:clamp(32px,5.4vw,68px)}
.ac-text{color:var(--ac)}
.lead{font-weight:430; font-size:clamp(18px,2vw,24px); line-height:1.45; color:var(--t-mid); letter-spacing:-.01em}
.s-light .lead,.s-paper .lead{color:var(--ink-mid)}
.lead.narrow{max-width:24ch} .lead.mid{max-width:36ch} .lead.wide{max-width:48ch}
.prose{color:var(--t-mid); font-size:16px; line-height:1.62; max-width:66ch; margin-left:auto; margin-right:auto}
.s-light .prose,.s-paper .prose{color:var(--ink-mid)}
.center{margin-left:auto; margin-right:auto}
.mt-s{margin-top:18px} .mt-m{margin-top:28px} .mt-l{margin-top:46px}
.cred{margin-top:22px; font-size:14.5px; color:var(--t-lo); letter-spacing:.01em; line-height:1.5}
.chips{margin-top:24px; font-size:13px; font-weight:660; letter-spacing:.18em; text-transform:uppercase; color:var(--ac)}
.explore{display:inline-flex; align-items:center; gap:7px; margin-top:28px; font-size:15px; font-weight:620; color:var(--ac); text-decoration:none; transition:gap .2s}
.explore:hover{gap:12px}
.nochat{font-weight:660; white-space:nowrap}
.s-light .nochat,.s-paper .nochat{color:var(--ink)}
.cue{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); width:22px; height:34px; border:1.5px solid rgba(255,255,255,.32); border-radius:12px; display:flex; justify-content:center; padding-top:7px; z-index:3}
.cue::before{content:""; width:3px; height:7px; border-radius:3px; background:rgba(255,255,255,.62); animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0; transform:translateY(-3px)}40%{opacity:1}80%{opacity:0; transform:translateY(9px)}}

/* ---------- detail-page hero + footer + crumbs ---------- */
.dhero{padding:132px max(22px,6vw) 80px; text-align:center; position:relative; overflow:hidden; background:radial-gradient(125% 95% at 50% 0%, #0c2d54 0%, var(--cb-navy) 60%, #061a33 100%); color:var(--t-hi)}
.dhero .wrapn{position:relative; z-index:2}
.dhero h1{font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:1; font-size:clamp(44px,8vw,92px); margin-top:14px}
.dhero .lead{margin:22px auto 0; max-width:50ch}
.crumb{display:flex; gap:9px; align-items:center; justify-content:center; font-size:12.5px; color:var(--t-lo); margin-bottom:8px}
.crumb a{color:var(--t-mid); text-decoration:none} .crumb a:hover{color:#fff}
.connect{display:flex; gap:11px; flex-wrap:wrap; justify-content:center; margin-top:10px}
.connect a{font-size:13.5px; color:var(--t-hi); border:1px solid var(--line-d); border-radius:999px; padding:9px 16px; text-decoration:none; transition:border-color .2s}
.connect a:hover{border-color:var(--ac)}
.s-light .connect a,.s-paper .connect a{color:var(--ink); border-color:var(--line-l)}
.dfoot{border-top:1px solid var(--line-d); padding:36px max(22px,6vw); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:14px; color:var(--t-mid); background:#050d1a}
.dfoot a{color:var(--t-hi); text-decoration:none} .dfoot a:hover{color:var(--ac)}
/* compliance footer (A3.1): legal links + trademark line, full-width row under the prev/next nav */
.dfoot-legal{width:100%; border-top:1px solid var(--line-d); margin-top:18px; padding-top:18px; display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:center; font-size:13px}
.dfoot-legal a{color:var(--t-mid); text-decoration:none} .dfoot-legal a:hover{color:var(--ac)}
.dfoot-legal .tm{width:100%; text-align:center; font-size:11.5px; color:var(--t-lo); margin-top:2px; line-height:1.5}

/* shared site footer: the landing-page footer promoted to a reusable component so
   content detail pages match the homepage. Scoped to .site-footer (NEVER a bare
   footer{} rule) so it can't clobber the deck-slide page's <footer class="foot">.
   .chapter-nav is the thin prev/next pager that sits directly above it. */
.chapter-nav{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:20px max(22px,6vw); background:#050d1a; border-top:1px solid var(--line-d); font-size:14px; color:var(--t-mid)}
.chapter-nav a{color:var(--t-hi); text-decoration:none} .chapter-nav a:hover{color:var(--ac)}
.site-footer{background:var(--cb-blue); color:#fff; padding:46px max(22px,6vw) 40px; scroll-snap-align:end}
.site-footer .f-wrap{max-width:1180px; margin:0 auto}
.site-footer .f-top{display:flex; align-items:center; justify-content:space-between; gap:20px 40px; flex-wrap:wrap}
.site-footer .f-brand{display:flex; align-items:center; gap:9px}
.site-footer .f-brand a{display:inline-flex; align-items:center; text-decoration:none}
.site-footer .f-brand .fb-omni{font-family:var(--font); font-weight:700; font-size:23px; letter-spacing:-.01em; color:#fff; line-height:1}
.site-footer .f-brand .fb-by{font-size:13px; color:rgba(255,255,255,.66)}
.site-footer .f-brand img{height:22px; width:auto; display:block}
.site-footer .f-nav{display:flex; flex-wrap:wrap; align-items:center; gap:12px clamp(24px,2.6vw,36px)}
.site-footer .f-nav a{color:rgba(255,255,255,.9); text-decoration:none; font-size:15px; transition:color .2s}
.site-footer .f-nav a:hover{color:#fff}
.site-footer .f-div{height:1px; background:rgba(255,255,255,.16); margin:24px 0 22px}
.site-footer .f-bottom{display:flex; align-items:center; justify-content:space-between; gap:18px 40px; flex-wrap:wrap}
.site-footer .f-bottom-l{display:flex; flex-direction:column; gap:9px; min-width:0}
.site-footer .f-legal{display:flex; flex-wrap:wrap; gap:8px 22px}
.site-footer .f-legal a{color:rgba(255,255,255,.85); text-decoration:none; font-size:13px; transition:color .2s}
.site-footer .f-legal a:hover{color:#fff}
.site-footer .f-fine{font-size:12px; color:rgba(255,255,255,.56); line-height:1.5}
.site-footer .f-social{display:flex; align-items:center; gap:13px; flex:none}
.site-footer .f-social a{width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.12); transition:background .2s, transform .2s}
.site-footer .f-social a:hover{background:rgba(255,255,255,.24); transform:translateY(-2px)}
.site-footer .f-social svg{width:17px; height:17px; display:block}
@media(max-width:760px){
  .site-footer .f-top{flex-direction:column; align-items:flex-start; gap:18px}
  .site-footer .f-bottom{flex-direction:column; align-items:flex-start; gap:20px}
}
/* a11y (A3.3): skip link + keyboard focus ring, shared across sub-pages */
.skip{position:absolute; left:8px; top:-48px; z-index:200; background:#0057A8; color:#fff; padding:10px 16px; border-radius:6px; text-decoration:none; font-weight:600; transition:top .18s}
.skip:focus{top:8px}
:focus-visible{outline:2px solid #81D4FF; outline-offset:2px}
@media(prefers-reduced-motion:reduce){.skip{transition:none}}

/* ---------- agents: layers + lineup ---------- */
.layers{width:100%; max-width:920px; margin:42px auto 0; display:flex; flex-direction:column; gap:12px}
.layer3{border:1px solid var(--line-l); border-radius:16px; padding:22px 24px; text-align:left; display:grid; grid-template-columns:minmax(180px,1fr) 1.7fr; gap:22px; align-items:center; background:rgba(10,10,15,.02)}
.s-navy .layer3,.s-deep .layer3,.s-blue .layer3{border-color:var(--line-d); background:rgba(255,255,255,.03)}
.layer3 .lr{font-size:11px; font-weight:720; letter-spacing:.1em; text-transform:uppercase; color:var(--ac)}
.layer3 .ln{font-size:clamp(19px,2.3vw,25px); font-weight:660; margin-top:5px; letter-spacing:-.02em; font-family:var(--display)}
.layer3 .ld{font-size:14.5px; color:var(--ink-mid); line-height:1.5}
.s-navy .layer3 .ld,.s-deep .layer3 .ld,.s-blue .layer3 .ld{color:var(--t-mid)}
@media(max-width:620px){.layer3{grid-template-columns:1fr; gap:7px}}
.lineup{width:100%; max-width:1000px; margin:18px auto 0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.lineup .ag{font-size:12.5px; color:var(--ink-mid); border:1px solid var(--line-l); border-radius:999px; padding:7px 14px}
.lineup .ag b{color:var(--ink); font-weight:600}
.products{margin-top:26px; font-size:14.5px; color:var(--ink-mid)} .products b{color:var(--ink); font-weight:600}
.s-navy .products,.s-deep .products,.s-blue .products{color:var(--t-mid)} .s-navy .products b,.s-deep .products b,.s-blue .products b{color:var(--t-hi)}

/* ---------- 3/4-card dimensions (factors, connectors, agent roster) ---------- */
.aidim{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:980px; margin:42px auto 0; text-align:left}
@media(max-width:760px){.aidim{grid-template-columns:1fr !important}}
.adc{border:1px solid var(--line-d); border-radius:16px; padding:24px; background:rgba(255,255,255,.03)}
.s-light .adc,.s-paper .adc{border-color:var(--line-l); background:rgba(10,10,15,.02)}
.adc .role{font-size:11px; font-weight:720; letter-spacing:.08em; text-transform:uppercase; color:var(--ac); margin-bottom:7px}
.adc .dn{font-size:21px; font-weight:660; letter-spacing:-.02em; font-family:var(--display)}
.adc .dd{font-size:13.5px; color:var(--t-mid); margin-top:9px; line-height:1.5}
.s-light .adc .dd,.s-paper .adc .dd{color:var(--ink-mid)}
.adc .aico{width:42px; height:42px; display:block; margin-bottom:13px}
.aiform{font-size:15px; color:var(--t-mid); margin-top:26px} .aiform b{color:var(--t-hi); font-weight:600}
.s-light .aiform,.s-paper .aiform{color:var(--ink-mid)} .s-light .aiform b,.s-paper .aiform b{color:var(--ink)}

/* ---------- governance cards + pills ---------- */
.pills{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:840px; margin:28px auto 0}
.pills .p{font-size:13px; font-weight:560; color:var(--t-mid); border:1px solid var(--line-d); border-radius:999px; padding:7px 14px}
.s-light .pills .p,.s-paper .pills .p{color:var(--ink-mid); border-color:var(--line-l)}
.pills .p.gate{border-color:var(--ac); color:var(--t-hi)} .s-light .pills .p.gate,.s-paper .pills .p.gate{color:var(--ink)}
.gov{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:1000px; margin:42px auto 0; text-align:left}
@media(max-width:760px){.gov{grid-template-columns:1fr}}
.gc{border:1px solid var(--line-d); border-radius:16px; padding:24px; background:rgba(255,255,255,.03)}
.s-light .gc,.s-paper .gc{border-color:var(--line-l); background:rgba(10,10,15,.02)}
.gc .h{font-size:12px; font-weight:720; letter-spacing:.08em; text-transform:uppercase; color:var(--ac); margin-bottom:14px}
.gc ul{list-style:none} .gc li{font-size:14.5px; color:var(--t-mid); padding-left:20px; position:relative; margin:11px 0; line-height:1.45}
.s-light .gc li,.s-paper .gc li{color:var(--ink-mid)}
.gc li::before{content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--ac); opacity:.7}
.gc li b{color:var(--t-hi); font-weight:560} .s-light .gc li b,.s-paper .gc li b{color:var(--ink)}
.gov-aud{margin-top:28px; font-size:13.5px; color:var(--t-lo); letter-spacing:.01em} .s-light .gov-aud,.s-paper .gov-aud{color:var(--ink-lo)}

/* ---------- stat row ---------- */
.srow{display:flex; flex-wrap:wrap; justify-content:center; max-width:920px; margin:42px auto 0}
.srow .s{padding:8px 26px; border-left:1px solid var(--line-l)} .srow .s:first-child{border-left:0}
.s-navy .srow .s,.s-deep .srow .s,.s-blue .srow .s{border-color:var(--line-d)}
.srow .sn{font-family:var(--display); font-size:clamp(28px,3.6vw,42px); font-weight:700; letter-spacing:-.03em; color:var(--ac)} .srow .sl{font-size:12.5px; color:var(--ink-lo); margin-top:4px}
.s-navy .srow .sl,.s-deep .srow .sl,.s-blue .srow .sl{color:var(--t-lo)}
@media(max-width:560px){.srow .s{border-left:0; padding:10px}}

/* ---------- chips / quotes / flag / integrations / tag ---------- */
.mchips{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; max-width:720px; margin:26px auto 0}
.mchips span{font-size:13.5px; font-weight:560; color:var(--ink); border:1px solid var(--line-l); border-radius:999px; padding:8px 16px; background:var(--n0)}
.s-navy .mchips span,.s-deep .mchips span,.s-blue .mchips span{color:var(--t-mid); border-color:var(--line-d); background:rgba(255,255,255,.04)}
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1140px; margin:46px auto 0; text-align:left}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}
.qcard{margin:0; border:1px solid var(--line-l); border-radius:16px; padding:26px 24px; background:var(--n0); display:flex; flex-direction:column}
.s-navy .qcard,.s-deep .qcard,.s-blue .qcard{border-color:var(--line-d); background:rgba(255,255,255,.03)}
.qcard blockquote{margin:0; font-size:17px; line-height:1.5; color:var(--ink); font-weight:430}
.s-navy .qcard blockquote,.s-deep .qcard blockquote,.s-blue .qcard blockquote{color:var(--t-hi)}
.qcard blockquote::before{content:"\201C"; color:var(--ac); font-size:30px; line-height:0; vertical-align:-10px; margin-right:3px}
.qcard figcaption{margin-top:16px; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ac)}
.qcard .qtask{margin-top:14px; padding-top:14px; border-top:1px solid var(--line-l); font-size:12.5px; color:var(--ink-mid); line-height:1.45}
.s-navy .qcard .qtask,.s-deep .qcard .qtask,.s-blue .qcard .qtask{border-color:var(--line-d); color:var(--t-mid)}
.qcard .qtask b{color:var(--ink); font-weight:600} .s-navy .qcard .qtask b,.s-deep .qcard .qtask b,.s-blue .qcard .qtask b{color:var(--t-hi)}
.flag{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cb-blue-deep); background:#fff; padding:9px 17px; border-radius:999px}
.integrations{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:38px}
.intg{display:flex; flex-direction:column; align-items:center; gap:13px; min-width:142px; padding:26px 28px; border:1px solid rgba(255,255,255,.2); border-radius:14px; background:rgba(255,255,255,.08); transition:border-color .2s, transform .2s}
.intg:hover{border-color:rgba(255,255,255,.6); transform:translateY(-3px)}
.intg img{width:46px; height:46px; display:block} .intg img.invert{filter:brightness(0) invert(1)}
.intg span{font-size:14.5px; font-weight:600; color:#fff}
.intg.ghost .plus{font-size:32px; line-height:1; color:rgba(255,255,255,.6); font-weight:300} .intg.ghost span{color:var(--t-mid)}
.tag-i{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:660; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-lo); border:1px solid var(--line-l); padding:6px 13px; border-radius:999px}
.s-navy .tag-i,.s-deep .tag-i,.s-blue .tag-i{color:var(--t-lo); border-color:var(--line-d)}
.tag-i::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--ac)}

/* ---------- reveal ---------- */
.js .rv{opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.js .rv.in{opacity:1; transform:none}
.js .rv.d1{transition-delay:.08s} .js .rv.d2{transition-delay:.16s} .js .rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1; transform:none} .cue{display:none} html{scroll-behavior:auto}}
@media print{.scene,.dhero,.section{min-height:auto; padding:34px 24px; page-break-inside:avoid} .rv{opacity:1!important; transform:none!important} nav,.cue{display:none} *{-webkit-print-color-adjust:exact; print-color-adjust:exact}}