/* ==========================================================================
   Salient Mentions marketing site
   Shared stylesheet for index.html (AI Citations) and managed-geo.html (Managed GEO)
   Plain CSS, no build step. Sections follow the page order.
   ========================================================================== */

/* ---------- Fonts (self hosted) ---------- */
@font-face{font-family:"Switzer";src:url("../fonts/Switzer-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/Switzer-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/SpaceGrotesk-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/SpaceGrotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Metric matched fallbacks keep layout shift low while the web fonts load */
@font-face{font-family:"Switzer Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");ascent-override:97%;descent-override:25%;line-gap-override:0%;size-adjust:100.5%}
@font-face{font-family:"Space Grotesk Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");ascent-override:90%;descent-override:27%;line-gap-override:0%;size-adjust:109%}

/* ---------- Tokens ---------- */
:root{
  --ink:#0A0F2E;          /* brand navy: text, pills, emphasis */
  --ink-2:#8C91A7;        /* second line of two tone headlines (22px and up) */
  --text-2:#5B6075;       /* body copy */
  --text-3:#9A9EB0;       /* eyebrow prefix */
  --muted:#6B7088;        /* small captions and fine print (AA on white) */
  --line:#E9EAF0;         /* dividers */
  --card-line:#EBEBEF;    /* card borders */
  --surface:#F6F6F8;      /* big rounded panels */
  --surface-2:#F9F9FA;
  --gold:#C8A84B;
  --gold-light:#E8C96A;
  --gold-pale:#F0D880;
  --gold-text:#8A6A14;
  --o-hl:#FFF1B8; --o-gold:#F6C445; --o-amber:#F39A2E; --o-rose:#E0569B; --o-orchid:#C86DD7; --o-violet:#7C5CFF;
  --f-lav:#E7DEFF; --f-blush:#F6D9EC; --f-peach:#FBE2BE; --f-gp:#F7C98A;
  --ok-bg:#E4F5DA; --ok-text:#2C6418;
  --error:#B42318;        /* form errors, 6.6:1 on white */
  --font-sans:"Switzer","Switzer Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-accent:"Space Grotesk","Space Grotesk Fallback",ui-sans-serif,system-ui,-apple-system,Arial,sans-serif;
  --gutter:16px;
  --section:96px;
  --header-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --num-grad:linear-gradient(90deg,#BC8B26 0%,#DC7A26 46%,#CF5F84 74%,#B064D6 100%);
}
@media (min-width:768px){:root{--gutter:24px;--section:112px;--header-h:76px}}
@media (min-width:1024px){:root{--section:128px;--header-h:82px}}
@media (min-width:1440px){:root{--gutter:40px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.4;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga" 1}
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
::selection{background:rgba(246,196,69,.35);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:12px;z-index:200;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:500;font-size:15px;transform:translateY(-200%);transition:transform .2s var(--ease)}
.skip-link:focus{transform:none}

.container{width:100%;max-width:calc(1360px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-top:var(--section)}
.tone-2{color:var(--ink-2)}
.nowrap{white-space:nowrap}

/* ---------- Type ---------- */
.eyebrow{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.3;color:var(--ink);letter-spacing:.005em}
.eyebrow__brand,.eyebrow__sep{color:#6E7389}
.eyebrow--center{justify-content:center}
.eyebrow--on-dark{color:#fff}
.eyebrow--on-dark .eyebrow__brand,.eyebrow--on-dark .eyebrow__sep{color:rgba(255,255,255,.55)}

.h-display,.h-section,.h-big{font-weight:400;letter-spacing:-.025em;color:var(--ink)}
.h-display>span,.h-section>span,.h-big>span{display:block}
.h-display,.h-section,.h-big,.closer__text,.bento__statement,.quote__text,.pcard2__title,.bcard__title,.path__title{text-wrap:balance}
.body,.lead,.acc__body,.sol__text,.step__body,.bcard__text,.msol__text,.bento__text,.pcard2__text,.nstat__text{text-wrap:pretty}
/* no single word last lines: balance short headings and card display text, pretty for running text */
.bento__title,.sol__title,.msol__title,.step__title,.faq__q,.acc__btn,.footer__title,.prices__item,
.pcard__prompt,.doc__title,.mock__quote,.netmock__quote,.mini__prompt,.stat__label,.nstat__label,.pcard__mode,.report__prompt{text-wrap:balance}
/* short card descriptions and table cells (two to five lines) balance cleanly; pretty leaves some single words */
.pcard2__text,.bcard__text,.sol__text,.msol__text,.bento__text,.ctable td{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
.h-display{font-size:32px;line-height:1.1}
.h-section{font-size:30px;line-height:1.1}
.h-big{font-size:32px;line-height:1.1}
@media (min-width:768px){.h-display{font-size:40px}.h-section{font-size:36px}.h-big{font-size:38px}}
@media (min-width:1024px){.h-display{font-size:46px}.h-section{font-size:40px}.h-big{font-size:44px}}

.lead{font-size:18px;line-height:1.6;color:var(--text-2);letter-spacing:-.005em}
@media (min-width:1024px){.lead{font-size:22px;line-height:36px}}
.body{font-size:16px;line-height:1.35;color:var(--text-2);letter-spacing:.005em}
.section-head{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left}
.section-head--center{align-items:center;text-align:center}
.section-head .body{margin-top:4px;max-width:540px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:10px 18px;border-radius:999px;font-family:var(--font-sans);font-size:15px;line-height:20px;font-weight:500;white-space:nowrap;letter-spacing:.005em;transition:transform .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease);will-change:transform}
.btn:active{transform:scale(.97)}
.btn--ink{background:var(--ink);color:#fff;box-shadow:0 4px 6px -1px rgba(10,15,46,.12),0 2px 4px -2px rgba(10,15,46,.12)}
.btn--ink:hover{background:#1B2150;transform:scale(1.04);box-shadow:0 10px 15px -3px rgba(10,15,46,.16),0 4px 6px -4px rgba(10,15,46,.12)}
.btn--ink:active{transform:scale(.97)}
.btn--light{background:var(--surface);color:var(--ink)}
.btn--light:hover{background:#ECECF1}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:#F3F3F6;transform:scale(1.04)}
.btn--sm{height:40px;padding:10px 16px}
.btn .icon-arrow{width:12px;height:12px;flex:none}
.btn:focus-visible{outline-offset:3px;border-radius:999px}

/* ---------- Grain and glows ---------- */
.grain{position:absolute;inset:0;background-image:var(--grain);background-size:160px 160px;mix-blend-mode:soft-light;opacity:.55;pointer-events:none}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background-color .3s var(--ease),box-shadow .3s var(--ease),backdrop-filter .3s var(--ease)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .3s var(--ease)}
.site-header.is-scrolled{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
.site-header.is-scrolled::after{opacity:1}
.site-header__inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;height:var(--header-h);transition:height .3s var(--ease)}
.site-header.is-scrolled .site-header__inner{height:calc(var(--header-h) - 10px)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand__link{display:block;border-radius:6px;transition:opacity .2s var(--ease)}
.brand__link:hover{opacity:.82}
.brand__logo{height:20px;width:auto}
.beta{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:12px;line-height:1;font-weight:500;letter-spacing:.01em;color:#7A5C0E;background:linear-gradient(180deg,rgba(240,216,128,.30),rgba(232,201,106,.18));border:1px solid rgba(138,106,20,.18)}
.seg{display:none}
.seg__list{display:flex;align-items:center;gap:6px;padding:6px;border-radius:32px;border:1px solid #ECECF1;background:linear-gradient(90deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.14) 70.6%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.seg__item{display:flex;align-items:center;height:36px;padding:8px 16px;border-radius:40px;font-size:16px;line-height:20px;font-weight:500;color:rgba(10,15,46,.72);white-space:nowrap;transition:background-color .3s var(--ease),color .3s var(--ease)}
.seg__item:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.seg__item[aria-current="page"]{background:var(--ink);color:#fff}
.seg__item[aria-current="page"]:hover{background:var(--ink);color:#fff}
.seg__item:focus-visible{border-radius:40px}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.nav-link{display:none;font-size:16px;line-height:20px;font-weight:500;color:var(--ink);padding:6px 0;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s var(--ease)}
.nav-link:hover{background-size:100% 1px}
.menu-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(10,15,46,.1);background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s var(--ease)}
.menu-btn:hover{background:#fff}
.menu-btn svg{width:18px;height:18px}
.menu-btn .icon-close{display:none}
.menu-btn[aria-expanded="true"] .icon-open{display:none}
.menu-btn[aria-expanded="true"] .icon-close{display:block}
@media (min-width:768px){
  .brand__logo{height:22px}
  .site-header__inner{grid-template-columns:1fr auto 1fr;gap:24px}
  .seg{display:block}
  .menu-btn{display:none}
  .nav-link{display:inline-block}
  .header-actions{gap:24px}
}
@media (min-width:768px) and (max-width:1023px){
  .header-actions{gap:16px}
  .site-header__inner{gap:16px}
  .brand__logo{height:19px}
  .seg__item{padding:8px 14px;font-size:15px}
}

/* Mobile toggle row (scrolls away with the page, like Navii) */
.seg-mobile{display:flex;justify-content:center;padding-top:calc(var(--header-h) + 4px)}
.seg-mobile .seg__item{font-size:15px;padding:8px 14px}
@media (min-width:768px){.seg-mobile{display:none}}

/* Mobile menu sheet */
.menu{position:fixed;inset:0;z-index:55;visibility:hidden;pointer-events:none}
.menu.is-open{visibility:visible;pointer-events:auto}
.menu__scrim{position:absolute;inset:0;background:rgba(10,15,46,.18);opacity:0;transition:opacity .3s var(--ease)}
.menu.is-open .menu__scrim{opacity:1}
.menu__sheet{position:absolute;left:8px;right:8px;top:8px;border-radius:24px;background:#fff;box-shadow:0 30px 60px -20px rgba(10,15,46,.35),0 0 0 1px rgba(10,15,46,.06);padding:calc(var(--header-h) + 4px) 20px 24px;transform:translateY(-12px);opacity:0;transition:transform .35s var(--ease-out),opacity .25s var(--ease);overflow:hidden}
.menu.is-open .menu__sheet{transform:none;opacity:1}
.menu__sheet .seg__list{justify-content:center;background:var(--surface);border-color:transparent}
.menu__sheet .seg__item{flex:1;justify-content:center}
.menu__links{margin-top:20px;border-top:1px solid var(--line)}
.menu__links a{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;font-size:18px;line-height:1.3;border-bottom:1px solid var(--line)}
.menu__links svg{width:12px;height:12px;color:var(--ink-2)}
.menu__cta{margin-top:20px;display:grid;gap:10px}
.menu__cta .btn{width:100%;height:48px}
@media (min-width:768px){.menu{display:none}}
html.menu-open,html.menu-open body{overflow:hidden}
.site-header.menu-active{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header.menu-active::after{opacity:0}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate}
main{position:relative;isolation:isolate}
/* The glow is cleared in a soft ellipse around the wordmark at every width, so
   the gray "mentions" always sits on near white */
.hero-glow{position:absolute;left:0;right:0;top:0;height:560px;overflow:hidden;z-index:-1;pointer-events:none;background:#fff;isolation:isolate;
  --logo-x:calc(max(var(--gutter),(100% - 1360px) / 2) + 92px);--logo-y:calc(var(--header-h) / 2);--clear-w:300px;--clear-h:120px;
  -webkit-mask-image:radial-gradient(var(--clear-w) var(--clear-h) at var(--logo-x) var(--logo-y),transparent 0,transparent 30%,#000 100%);
  mask-image:radial-gradient(var(--clear-w) var(--clear-h) at var(--logo-x) var(--logo-y),transparent 0,transparent 30%,#000 100%)}
@media (min-width:768px){.hero-glow{height:640px;--clear-w:360px;--clear-h:130px}}
@media (min-width:1024px){.hero-glow{--logo-x:calc(max(var(--gutter),(100% - 1360px) / 2) + 64px);--clear-w:360px;--clear-h:140px}}
.hero-glow__blob{position:absolute;left:50%;top:-250px;width:max(640px,90vw);height:440px;transform:translateX(-46%);border-radius:50%;filter:blur(56px);opacity:.64;
  background:
    radial-gradient(closest-side at 24% 58%,rgba(224,86,155,.95),rgba(224,86,155,0) 100%),
    radial-gradient(closest-side at 42% 62%,rgba(246,183,60,1),rgba(246,183,60,0) 100%),
    radial-gradient(closest-side at 60% 58%,rgba(243,140,52,1),rgba(243,140,52,0) 100%),
    radial-gradient(closest-side at 78% 52%,rgba(150,108,255,.9),rgba(150,108,255,0) 100%),
    radial-gradient(closest-side at 50% 30%,rgba(255,241,184,.9),rgba(255,241,184,0) 100%)}
.hero-glow .grain{opacity:.6}
@media (min-width:768px){.hero-glow__blob{top:-330px;width:max(980px,90vw);height:560px;filter:blur(64px);opacity:.92}}
@media (min-width:1024px){.hero-glow__blob{top:-300px;height:600px;filter:blur(72px)}}
.hero__inner{display:flex;flex-direction:column;align-items:center;gap:32px;padding-top:96px;text-align:center}
.hero__text{display:flex;flex-direction:column;gap:8px;align-items:center}
.hero__hello{font-size:15px;line-height:20px;letter-spacing:.01em;color:var(--ink)}
.hero__media{padding-top:40px}
@media (min-width:768px){
  .hero__inner{flex-direction:row;justify-content:space-between;align-items:flex-end;text-align:left;padding-top:210px}
  .hero__text{align-items:flex-start}
  .hero__hello{font-size:18px;line-height:22px}
}
@media (min-width:1024px){.hero__hello{font-size:20px;line-height:22px;letter-spacing:.01em}}

/* ---------- Video frame (hero film and managed intro film) ---------- */
/* The navy lives on the fallback layer, not the frame: once a poster or the film
   shows, the fallback fades out and the rounded corners anti-alias against the
   white page instead of leaving a dark fringe around a light picture */
.vframe{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;isolation:isolate;background:transparent;box-shadow:0 1px 0 rgba(10,15,46,.04)}
@media (min-width:768px){.vframe{border-radius:16px}}
/* The fallback is painted in the poster's own palette (gold, amber, rose, orchid, violet with grain),
   so when the poster decodes only its content fades in, and a missing file still reads on brand */
.vframe__fallback{position:absolute;inset:0;display:grid;place-items:center;z-index:0;border-radius:inherit;transition:opacity .6s var(--ease);
  background:
    radial-gradient(42% 52% at 20% 14%,rgba(253,211,124,.95),rgba(253,211,124,0) 72%),
    radial-gradient(40% 46% at 12% 92%,rgba(249,201,188,.9),rgba(249,201,188,0) 72%),
    radial-gradient(48% 62% at 90% 92%,rgba(159,103,231,.95),rgba(159,103,231,0) 72%),
    radial-gradient(46% 56% at 58% 42%,rgba(231,122,134,.75),rgba(231,122,134,0) 72%),
    linear-gradient(105deg,#F5A955 0%,#F0934F 24%,#E77A86 50%,#D26899 68%,#BD66CA 84%,#A367E2 100%)}
.vframe.has-poster .vframe__fallback,.vframe.is-playing .vframe__fallback{opacity:0}
.vframe__mark{position:relative;z-index:1;width:clamp(44px,5.4vw,76px);height:auto;border-radius:22%;box-shadow:0 14px 34px -12px rgba(10,15,46,.6)}
.vframe__fallback .grain{opacity:.5}
.vframe__video,.flow__video{background-color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
.vframe__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:1;border-radius:inherit}
/* Poster still above the video: fades in once decoded, fades out when the film
   is really playing. The video stays hidden until then, so the frame goes
   fallback, poster, film without a black or empty frame (site.js sets the classes). */
.vframe__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;display:none;opacity:0;pointer-events:none;border-radius:inherit;transition:opacity .6s var(--ease)}
.js .vframe__poster{display:block}
.vframe.has-poster .vframe__poster{opacity:1}
.vframe.is-playing .vframe__poster{opacity:0}
.js .vframe__video{opacity:0}
.vframe:not(.has-poster) .vframe__video{transition:opacity .6s var(--ease)}
.vframe.is-playing .vframe__video{opacity:1}
/* Still mode (reduced motion, or autoplay refused): the video shows its own poster with native controls */
.vframe.is-static .vframe__video{opacity:1}
.vframe.is-static .vframe__poster{display:none}
/* Missing film: keep the poster still if there is one, otherwise the designed fallback */
.vframe.is-missing .vframe__video{opacity:0;visibility:hidden}
.vframe.is-missing.has-poster .vframe__poster{display:block;opacity:1}
.vframe.is-missing .vframe__mute{display:none}
.vframe__mute{position:absolute;top:12px;right:12px;z-index:3;display:none;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(10,15,46,.5);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .2s var(--ease),transform .2s var(--ease)}
.js .vframe__mute{display:grid}
.vframe__mute:hover{background:rgba(10,15,46,.72)}
.vframe__mute:active{transform:scale(.94)}
.vframe__mute svg{width:20px;height:20px}
.vframe__mute .icon-sound{display:none}
.vframe__mute[aria-pressed="true"] .icon-muted{display:none}
.vframe__mute[aria-pressed="true"] .icon-sound{display:block}
.vframe__mute:focus-visible{outline-color:#fff;border-radius:50%}
@media (min-width:768px){.vframe__mute{top:16px;right:16px}}

/* ---------- Orb (shared) ---------- */
.orb{--s:64px;position:relative;flex:none;width:var(--s);height:var(--s);border-radius:50%;
  background:
    radial-gradient(circle at 36% 32%,#FFF1B8 0%,rgba(255,241,184,0) 30%),
    radial-gradient(circle at 46% 46%,#F6C445 0%,#F39A2E 36%,rgba(243,154,46,0) 62%),
    radial-gradient(circle at 72% 74%,#7C5CFF 0%,rgba(124,92,255,0) 56%),
    radial-gradient(circle at 24% 78%,#E0569B 0%,rgba(224,86,155,0) 52%),
    radial-gradient(circle at 50% 50%,#F2A93B 0%,#C86DD7 72%,rgba(200,109,215,0) 74%);
  filter:blur(calc(var(--s) * .07))}
.orb--breathe{animation:orb-breathe 7s var(--ease) infinite}
@keyframes orb-breathe{0%,100%{transform:scale(1);filter:blur(calc(var(--s) * .07)) saturate(1)}50%{transform:scale(1.07);filter:blur(calc(var(--s) * .085)) saturate(1.12)}}

/* ---------- Network: marquee of prompt cards ---------- */
.network__marquee{margin-top:48px}
@media (min-width:1024px){.network__marquee{margin-top:64px}}
.marquee-wrap{position:relative}
/* Full bleed: the track runs from viewport edge to viewport edge and fades out
   softly at both sides, so no card is ever cut hard at the container gutter */
.marquee{--fade:clamp(28px,8vw,168px);position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}
/* the row starts on the container edge (the loop stays seamless: the margin is outside the translated box) */
.marquee__track{display:flex;align-items:flex-end;width:max-content;margin-left:max(var(--gutter),calc((100% - 1360px) / 2));animation:marquee var(--marquee-dur,110s) linear infinite}
.marquee__group{display:flex;align-items:flex-end;gap:20px;padding-right:20px}
.marquee:hover .marquee__track,.marquee-wrap.is-paused .marquee__track,.marquee-wrap.is-offscreen .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee__bar{position:absolute;left:0;right:0;bottom:-48px;z-index:2;display:flex;justify-content:flex-end;pointer-events:none}
.marquee__pause{position:relative;pointer-events:auto;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 11px;border-radius:999px;background:#fff;border:1px solid var(--card-line);font-size:13px;line-height:1;font-weight:500;color:var(--ink);opacity:0;transform:translateY(-4px);transition:opacity .25s var(--ease),transform .25s var(--ease),background-color .2s var(--ease)}
.marquee__pause:hover{background:var(--surface)}
.marquee-wrap:hover .marquee__pause,.marquee__pause:focus-visible,.marquee-wrap.is-paused .marquee__pause{opacity:1;transform:none}
@media (hover:none){.marquee__pause{opacity:1;transform:none}}
.marquee__pause svg{width:11px;height:11px}
.marquee__pause .icon-play{display:none}
.marquee-wrap.is-paused .marquee__pause .icon-play{display:block}
.marquee-wrap.is-paused .marquee__pause .icon-pause{display:none}

.pcard{display:flex;flex-direction:column;gap:20px;width:300px;padding:20px;border-radius:20px;border:1px solid var(--card-line);background:#fff}
@media (min-width:768px){.pcard{width:360px}}
.pcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pcard__mode{display:flex;align-items:center;gap:12px;font-size:12px;line-height:14px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);padding-top:2px}
.pcard__mode::before{content:"";flex:none;width:3px;height:3px;border-radius:50%;background:var(--ink)}
.pcard__badge{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#F3F4F7;color:#5E6378}
.pcard__badge svg{width:18px;height:18px}
.pcard__niche{font-size:16px;line-height:20px;letter-spacing:.01em;color:var(--ink)}
.pcard__prompt{margin-top:10px;font-family:var(--font-accent);font-weight:300;font-size:20px;line-height:26px;letter-spacing:-.005em;color:var(--ink)}
@media (min-width:768px){.pcard__prompt{font-size:22px;line-height:28px}}

/* ---------- Stats (gradient numerals) ---------- */
.stats{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:var(--section)}
@media (min-width:768px){.stats{flex-direction:row;justify-content:center;gap:120px}}
@media (min-width:1024px){.stats{gap:200px}}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center}
.stat__num{font-family:var(--font-accent);font-weight:300;font-size:40px;line-height:1.3;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@media (min-width:1024px){.stat__num{font-size:56px;line-height:1.45}}
.grad-text,.grad-text .count__final,.grad-text .count__live{background:var(--num-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.grad-text.count{background:none}
.count{display:inline-grid;vertical-align:baseline}
.count>span{grid-area:1/1;white-space:nowrap}
.count__live{opacity:0}
.count.is-counting .count__final{opacity:0}
.count.is-counting .count__live{opacity:1}
.stat .count>span{justify-self:center}
.nstat .count>span{justify-self:start}
.stat__label{font-size:15px;line-height:20px;color:var(--ink)}
@media (min-width:1024px){.stat__label{font-size:20px;line-height:28px}}

/* ---------- Flow: accordion plus walkthrough panel ---------- */
.flow__grid{display:grid;grid-template-columns:1fr;row-gap:32px;align-items:start}
.flow__head{grid-row:1}
.flow__media{grid-row:2}
.flow__list{grid-row:3}
/* Desktop: the panel spans both rows. The accordion row is 1fr so the panel's
   extra height collects under the accordion instead of opening a gap above it;
   head to accordion keeps Navii's head to content spacing (48 to 60px). */
@media (min-width:1024px){
  .flow__grid{grid-template-columns:400px 1fr;grid-template-rows:auto 1fr;column-gap:56px;row-gap:48px}
  .flow__head{grid-column:1;grid-row:1}
  .flow__media{grid-column:2;grid-row:1 / span 2}
  .flow__list{grid-column:1;grid-row:2;align-self:start}
}
@media (min-width:1280px){.flow__grid{grid-template-columns:460px 1fr;column-gap:80px;row-gap:60px}}
.flow__panel{position:relative;display:flex;align-items:center;justify-content:center;border-radius:24px;overflow:hidden;padding:16px;
  background:radial-gradient(108.81% 69.12% at -5.7% 78.57%,rgba(243,154,46,.17) 0%,rgba(243,154,46,0) 100%),radial-gradient(70% 60% at 108% -6%,rgba(200,109,215,.10) 0%,rgba(200,109,215,0) 100%),rgba(246,246,248,.75)}
@media (min-width:768px){.flow__panel{height:432px;padding:32px}}
@media (min-width:1024px){.flow__panel{height:420px;padding:40px}}
@media (min-width:1280px){.flow__panel{height:540px;padding:48px}}
.flow__screen{position:relative;width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;isolation:isolate;background:#fff;box-shadow:0 0 0 1px rgba(10,15,46,.05),0 24px 48px -24px rgba(10,15,46,.28),0 8px 18px -10px rgba(10,15,46,.12)}
@media (min-width:768px){
  .flow__panel{container-type:size}
  /* fit a 16:10 screen inside the padded panel, whichever side is tighter */
  .flow__screen{width:min(100cqw,160cqh);height:auto;max-width:100%;border-radius:12px}
}
.flow__placeholder{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#fff,#FAFAFB)}
.flow__placeholder .orb{--s:clamp(64px,12vw,120px)}
.flow__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .7s var(--ease)}
.flow__video.is-active{opacity:1}
.flow__noscript{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover}
/* With JS a clip shows only once its poster (its first frame) or video frame is ready */
.js .flow__video.is-active:not(.is-ready){opacity:0}

.acc{width:100%}
@media (min-width:1024px){.flow__list .acc{max-width:373px}}
.acc__item{position:relative;border-top:1px solid var(--line)}
.acc__item:first-child{border-top:0}
.acc__btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:12px 0;text-align:left;font-size:16px;line-height:20px;font-weight:500;color:var(--ink);transition:opacity .2s var(--ease)}
.acc__btn:hover{opacity:.7}
.acc__btn:focus-visible{outline-offset:2px}
.acc__panel{display:grid;grid-template-rows:0fr;visibility:hidden;opacity:0;transition:grid-template-rows .45s var(--ease),opacity .35s var(--ease),visibility 0s linear .45s}
.acc__item.is-open>.acc__panel{grid-template-rows:1fr;visibility:visible;opacity:1;transition:grid-template-rows .45s var(--ease),opacity .45s var(--ease) .05s,visibility 0s}
.acc__inner{min-height:0;overflow:hidden}
.acc__body{padding-bottom:12px;font-size:16px;line-height:20px;letter-spacing:.005em;color:var(--text-2)}
.acc__progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:transparent;overflow:hidden;pointer-events:none}
.acc__progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--o-amber) 60%,var(--o-orchid))}
.acc--auto-off .acc__progress{display:none}

/* ---------- Solutions (2 x 2 on index) ---------- */
.sol-head{max-width:560px;margin-bottom:40px}
@media (min-width:1024px){.sol-head{margin-bottom:60px}}
.sol-grid{display:grid;grid-template-columns:1fr;row-gap:48px;column-gap:20px}
@media (min-width:1024px){.sol-grid{grid-template-columns:1fr 1fr;row-gap:120px}}
.sol{display:flex;flex-direction:column;gap:24px}
.sol__panel{position:relative;container-type:inline-size;display:flex;align-items:center;justify-content:center;height:clamp(300px,82vw,420px);padding:24px 16px;border-radius:20px;overflow:hidden;background:var(--surface-2)}
@media (min-width:768px){.sol__panel{height:420px;padding:48px 32px}}
@media (min-width:1024px){.sol__panel{height:514px;border-radius:24px;padding:60px 40px}}
.wash-1{background:radial-gradient(108.81% 69.12% at -5.7% 78.57%,rgba(243,154,46,.20) 0%,rgba(243,154,46,0) 100%),var(--surface-2)}
.wash-2{background:radial-gradient(79.88% 79.25% at 48.13% -32.51%,rgba(224,86,155,.16) 0%,rgba(224,86,155,0) 100%),var(--surface-2)}
.wash-3{background:radial-gradient(72.64% 72.58% at 53.36% 118.95%,rgba(246,196,69,.30) 0%,rgba(246,196,69,0) 100%),var(--surface-2)}
.wash-4{background:radial-gradient(108.81% 69.12% at 105.7% -5%,rgba(200,109,215,.17) 0%,rgba(200,109,215,0) 100%),var(--surface-2)}
.sol__caption{display:flex;flex-direction:column;gap:12px;max-width:300px}
.sol__title{font-size:16px;line-height:20px;font-weight:500;color:var(--ink)}
.sol__text{font-size:16px;line-height:20px;letter-spacing:.005em;color:var(--text-2)}
.center-cta{display:flex;justify-content:center}

/* ---------- Mock UI cards (all sizes in em, scaled by the panel width) ---------- */
.mock-scale{font-size:clamp(10.25px,2.45cqi,16px)}
/* two columns of panels from 1024: keep the mock text legible in the narrower panels */
@media (min-width:1024px){.mock-scale{font-size:clamp(11.5px,2.45cqi,16px)}}
.mock{position:relative;display:inline-flex;flex-direction:column;gap:1.5em;padding:1.875em;border-radius:2.06em;background:linear-gradient(91deg,rgba(255,255,255,.88) .6%,rgba(255,255,255,.7) 97.3%);box-shadow:0 .0625em .125em rgba(10,15,46,.03),0 1.5em 3em -1.5em rgba(10,15,46,.10);max-width:34em;text-align:left;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mock__head{display:flex;align-items:center;gap:1em}
.mock__head .orb{--s:3.75em}
.mock__msg{display:flex;flex-direction:column;gap:.5em;min-width:0}
.mock__label{font-size:1em;line-height:1.3;letter-spacing:-.01em;color:rgba(10,15,46,.6)}
.mock__quote{font-size:1.375em;line-height:1.3;letter-spacing:-.012em;color:var(--ink)}
.mock__inner{display:flex;align-items:center;gap:1.25em;padding:1.25em 1.5em;border-radius:1em;border:1px solid rgba(10,15,46,.06);background:linear-gradient(91deg,rgba(255,255,255,.95) .6%,rgba(255,255,255,.78) 97.3%)}
.mock__tile{flex:none;display:grid;place-items:center;width:3em;height:3em;border-radius:.75em;background:linear-gradient(135deg,#FBF3DA,#F5E3AE);color:var(--gold-text)}
.mock__tile svg{width:1.35em;height:1.35em}
.mock__tile--ink{background:var(--ink);color:var(--gold-light)}
.mock__meta{display:flex;flex-direction:column;gap:.15em;flex:1;min-width:0}
.mock__title{font-size:1em;line-height:1.4;font-weight:500;color:var(--ink)}
.mock__sub{font-size:.875em;line-height:1.45;color:#4D5163}
.mock__end{display:flex;align-items:center;gap:.75em;flex:none}
.mock__icon-btn{display:grid;place-items:center;width:1.25em;height:1.25em;color:#6B7088}
.mock__icon-btn svg{width:100%;height:100%}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.3em .85em;border-radius:1.5em;font-size:.875em;line-height:1.45;white-space:nowrap}
.chip svg{width:1em;height:1em;flex:none}
.chip--ok{background:var(--ok-bg);color:var(--ok-text)}
.chip--gold{background:rgba(240,216,128,.38);color:#7A5C0E}
.chip--ink{background:var(--ink);color:#fff}
.chip--line{border:1px solid rgba(10,15,46,.1);color:var(--ink);background:rgba(255,255,255,.7)}
.chip--muted{background:#EFF0F4;color:#575B6E}
.mock__rows{display:flex;flex-direction:column;gap:.15em;width:100%}
.mock__row{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.7em 0;border-top:1px solid rgba(10,15,46,.06);font-size:1em;line-height:1.35}
.mock__row:first-child{border-top:0}
.mock__row-label{display:flex;align-items:center;gap:.6em;color:var(--ink)}
.mock__check{display:grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;background:var(--ok-bg);color:var(--ok-text)}
.mock__check svg{width:.85em;height:.85em}
.mock__code{width:100%;padding:1.1em 1.25em;border-radius:1em;background:#0D1235;color:#E6E7F0;font-family:var(--font-accent);font-weight:400;font-size:.95em;line-height:1.75;letter-spacing:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mock__code-line{display:flex;gap:.55em;white-space:nowrap}
.mock__code-key{color:#9DA2BC}
.mock__code-str{color:var(--gold-pale)}
.mock__code-num{color:#C9B6FF}
.mock__code-ln{color:rgba(255,255,255,.28);width:1em;text-align:right;flex:none}
.mock__tag{align-self:flex-start;display:inline-flex;align-items:center;gap:.45em;font-size:.8em;letter-spacing:.06em;text-transform:uppercase;color:#4D5163;font-weight:500}
.mock__tag::before{content:"";width:.4em;height:.4em;border-radius:50%;background:var(--o-amber)}
.mock-ghost{position:absolute;top:-1em;right:-1em;bottom:1em;left:1em;opacity:.3;z-index:0;pointer-events:none}
.mock-ghost .mock{width:100%;height:100%;box-shadow:none}
.mock-stack{position:relative}
.mock-stack>.mock{position:relative;z-index:1}

/* Constellation: many site nodes flowing into one brand node */
.constel{position:relative;width:24em;height:7.5em;margin:0 auto 1.25em}
.constel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.constel .orb{--s:3.6em;position:absolute;left:50%;top:50%;margin:-1.8em 0 0 -1.8em}

.float-a{animation:float-a 9s var(--ease) infinite}
.float-b{animation:float-b 11s var(--ease) infinite}
@keyframes float-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes float-b{0%,100%{transform:translateY(-4px)}50%{transform:translateY(5px)}}

/* ---------- Comparison table ---------- */
.compare__wrap{margin-top:40px}
@media (min-width:1024px){.compare__wrap{margin-top:60px}}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:thin}
.table-scroll:focus-visible{outline-offset:-2px}
.ctable{width:100%;min-width:760px;table-layout:fixed;text-align:left}
/* the four column table fits a tablet without scrolling (the five column one still scrolls) */
@media (min-width:768px){.ctable:not(.ctable--checks){min-width:0}}
.ctable th,.ctable td{padding:24px 20px 24px 0;vertical-align:middle;font-size:16px;line-height:20px;letter-spacing:.01em;font-weight:400;color:var(--ink);border-bottom:1px solid var(--line)}
.ctable thead th{font-size:18px;line-height:24px;font-weight:500;color:var(--ink);vertical-align:middle}
.ctable tbody th{font-weight:400}
.ctable th{text-wrap:balance}

.ctable .is-us{font-weight:500}
.ctable__brand{display:flex;align-items:center;gap:10px}
.ctable__brand img{flex:none;width:26px;height:26px;border-radius:7px}
.ctable col.c-label{width:200px}
.ctable col.c-us{width:34%}
@media (max-width:1023px){
  .ctable th,.ctable td{font-size:15px}
  /* Row labels stay pinned on the gutter line, aligned with the headings at rest
     and while scrolling; a white strip covers the gutter so nothing shows beside them */
  .ctable [scope="row"],.ctable thead tr>:first-child{position:sticky;left:0;z-index:2;background:#fff;padding-left:0}
  .ctable [scope="row"]::before,.ctable thead tr>:first-child::before{content:"";position:absolute;top:0;bottom:-1px;right:100%;width:calc(var(--gutter) + 1px);background:#fff;pointer-events:none}
  .ctable [scope="row"]::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:14px;background:linear-gradient(90deg,rgba(10,15,46,.07),rgba(10,15,46,0));opacity:0;transition:opacity .2s var(--ease);pointer-events:none}
  .compare__wrap.is-scrolled .ctable [scope="row"]::after{opacity:1}
  .ctable col.c-label{width:150px}
}

/* Managed comparison: highlighted column with check marks */
.ctable--checks{min-width:980px}
.ctable--checks th,.ctable--checks td{border-bottom:0;padding:18px 20px;font-size:14px;line-height:22px;color:var(--text-2);vertical-align:top}
.ctable--checks tbody th{font-size:18px;line-height:24px;font-weight:500;color:var(--ink);padding-left:36px}
.ctable--checks thead th{padding-top:40px;padding-bottom:36px}
.ctable--checks .is-us{position:relative;background:var(--surface);font-weight:400;color:var(--ink)}
.ctable--checks thead .is-us{border-radius:24px 24px 0 0}
/* the brand column header is the wordmark on both tables */
.ctable__logo{display:flex;justify-content:flex-start}
.ctable__logo img{width:149px;height:auto}
.ctable--checks tbody tr:last-child .is-us{border-radius:0 0 24px 24px;padding-bottom:32px}
.ctable--checks tbody tr:last-child td{padding-bottom:32px}
.ctable--checks td:not(.is-us)+td,.ctable--checks .is-us+td{border-left:0}
.ctable--checks td.has-rule,.ctable--checks th.has-rule{box-shadow:inset 1px 0 0 var(--line)}
.ctable__check{display:flex;gap:12px;align-items:flex-start}
.ctable__check svg{flex:none;width:14px;height:14px;margin-top:4px;color:#A6761A}
.ctable--checks col.c-label{width:22%}
.ctable--checks col.c-us{width:19.5%}
@media (max-width:1023px){
  .ctable--checks tbody th{font-size:15px;line-height:20px;padding-left:0}
  .ctable--checks th,.ctable--checks td{font-size:14px}
  .ctable--checks col.c-label{width:170px}
}

/* ---------- Price list ---------- */
.prices{margin-top:40px;border-top:1px solid var(--line)}
@media (min-width:768px){.prices{margin-top:56px}}
.prices__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:24px;row-gap:4px;padding:22px 0;border-bottom:1px solid var(--line)}
.prices__item{font-size:18px;line-height:1.3;color:var(--ink)}
.prices__price{font-size:18px;line-height:1.3;font-weight:500;color:#6E7389;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (min-width:768px){.prices__row{padding:24px 0}.prices__item,.prices__price{font-size:20px}}
.closer{margin-top:48px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.closer__text{font-size:24px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);max-width:760px}
@media (min-width:768px){.closer__text{font-size:36px}}

/* ---------- Proof ---------- */
.proof__top{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media (min-width:1024px){.proof__top{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:64px;align-items:end}}
@media (min-width:1280px){.proof__top{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:72px}}
.quote{display:flex;flex-direction:column}
.quote__mark{width:44px;height:auto;margin:24px 0 36px}
@media (min-width:1024px){.quote__mark{width:80px;margin:32px 0 56px}}
.quote__text{font-family:var(--font-accent);font-weight:300;font-size:26px;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
@media (min-width:768px){.quote__text{font-size:36px}}
@media (min-width:1280px){.quote__text{font-size:48px;line-height:1.1;letter-spacing:-.02em}}
.quote--short .quote__text{font-size:34px}
@media (min-width:768px){.quote--short .quote__text{font-size:52px}}
@media (min-width:1280px){.quote--short .quote__text{font-size:68px;line-height:1.05}}
.quote__cite{margin-top:24px;display:flex;flex-direction:column;gap:4px;font-style:normal}
.quote__name{font-size:18px;line-height:1.35;color:var(--ink);font-weight:500}
.quote__role{font-size:16px;line-height:1.4;color:var(--text-2)}
/* Source card for a quote (testimonials mode), linked to its source */
.source{position:relative;display:flex;flex-direction:column;gap:16px;max-width:480px;padding:24px;border-radius:20px;border:1px solid var(--card-line);background:#fff;color:var(--ink);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.source:hover{border-color:#DCDDE5;box-shadow:0 18px 40px -28px rgba(10,15,46,.28)}
.source:focus-visible{border-radius:20px}
.source__top{display:flex;align-items:center;gap:14px}
.source__play{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px}
.source__play .orb{--s:48px;position:absolute;inset:0}
.source__btn{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 6px 16px -6px rgba(10,15,46,.5)}
.source__btn svg{width:14px;height:14px;margin-left:2px}
.source__show{font-size:14px;line-height:1.3;font-weight:500;letter-spacing:.01em}
.source__title{font-size:18px;line-height:1.35;letter-spacing:-.01em;text-wrap:balance}
@media (min-width:1280px){.source__title{font-size:20px}}
.source__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.source__date{font-size:14px;line-height:1.3;color:var(--muted)}
.source__cta{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:1.3;font-weight:500;white-space:nowrap}
.source__cta svg{width:10px;height:10px;flex:none;transition:transform .25s var(--ease)}
.source:hover .source__cta svg{transform:translate(2px,-2px)}
/* Statement version (managed): the line is the section heading */
.proof__head{max-width:920px}
.proof--statement .proof-cards{margin-top:48px}
@media (min-width:1024px){.proof--statement .proof-cards{margin-top:64px}}
.proof-cards{margin-top:56px;display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:768px){.proof-cards{grid-template-columns:repeat(3,1fr);gap:24px}}
@media (min-width:1024px){.proof-cards{margin-top:96px}}
.pcard2{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:200px;padding:28px;border-radius:24px;background:#F5F5F7;overflow:hidden;isolation:isolate}
@media (min-width:1024px){.pcard2{min-height:320px;padding:32px}}
.pcard2::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.9}
.pcard2--a::before{background:radial-gradient(90% 70% at 0% 100%,rgba(246,196,69,.30),rgba(246,196,69,0) 70%)}
.pcard2--b::before{background:radial-gradient(90% 70% at 100% 0%,rgba(200,109,215,.18),rgba(200,109,215,0) 70%)}
.pcard2--c::before{background:radial-gradient(90% 70% at 50% 120%,rgba(224,86,155,.16),rgba(224,86,155,0) 70%)}
.pcard2__title{font-family:var(--font-accent);font-weight:300;font-size:26px;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
@media (min-width:768px) and (max-width:1023px){.pcard2__title{font-size:20px}.pcard2{padding:20px}}
@media (min-width:1280px){.pcard2__title{font-size:34px}}
.pcard2__text{font-size:16px;line-height:1.4;color:var(--text-2);max-width:320px}

/* ---------- Paths ---------- */
.paths__sub{max-width:360px}
.paths__grid{margin-top:40px;display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:1024px){.paths__grid{grid-template-columns:1fr 1fr;gap:24px}}
.path{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:30px 20px 40px 30px;border:1px solid var(--card-line);border-radius:20px;background:#fff;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
@media (min-width:768px){.path{padding:40px 20px 40px 30px}}
.path:hover{border-color:#DCDDE5;box-shadow:0 18px 40px -28px rgba(10,15,46,.28)}
.path__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%}
.path__title{font-size:20px;line-height:1.15;letter-spacing:-.015em;font-weight:400;color:var(--ink)}
@media (min-width:768px){.path__title{font-size:25px;line-height:1.1}}
.path__arrow{flex:none;width:12px;height:12px;margin:6px 4px 0 0;color:var(--ink);transition:transform .25s var(--ease)}
.path:hover .path__arrow{transform:translate(2px,-2px)}
.path .btn::after{content:"";position:absolute;inset:0;border-radius:20px}
/* buttons line up across the two cards even when one title wraps */
.path .btn{margin-top:auto}

/* ---------- FAQ ---------- */
.faq__grid{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:1024px){.faq__grid{grid-template-columns:400px 1fr;gap:56px}}
@media (min-width:1280px){.faq__grid{grid-template-columns:460px 1fr;gap:80px}}
.faq__head .body{max-width:360px}
.faq .acc__item{border-top:1px solid var(--line)}
.faq .acc__item:first-child{border-top:1px solid var(--line)}
.faq .acc__item:last-child{border-bottom:1px solid var(--line)}
.faq .acc__btn{padding:22px 0;font-size:17px;line-height:1.35;font-weight:500}
.faq .acc__btn:hover{opacity:1}
.faq .acc__btn:hover .faq__q{opacity:.72}
@media (min-width:768px){.faq .acc__btn{font-size:19px}}
.faq__q{transition:opacity .2s var(--ease)}
.faq__icon{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--card-line);background:#fff;transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:var(--ink);border-radius:1px;transition:transform .35s var(--ease),background-color .25s var(--ease)}
.faq__icon::after{transform:rotate(90deg)}
.acc__item.is-open .faq__icon{background:var(--ink);border-color:var(--ink)}
.acc__item.is-open .faq__icon::before,.acc__item.is-open .faq__icon::after{background:#fff}
.acc__item.is-open .faq__icon::after{transform:rotate(0deg)}
.faq .acc__body{padding:0 48px 24px 0;font-size:16px;line-height:1.6;color:var(--text-2);max-width:720px}

/* ---------- Final CTA ---------- */
.final{text-align:center}
.final__actions{margin-top:36px;display:flex;justify-content:center}
.final__p{margin:16px auto 0;max-width:880px}

/* ---------- Footer ---------- */
.footer{position:relative;isolation:isolate;overflow:hidden;margin-top:0}
.footer__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,#fff 0%,rgba(255,255,255,.86) 12%,rgba(255,255,255,0) 42%),
    radial-gradient(70% 90% at 0% 70%,rgba(231,222,255,1) 0%,rgba(231,222,255,0) 70%),
    radial-gradient(60% 80% at 35% 85%,rgba(246,217,236,1) 0%,rgba(246,217,236,0) 72%),
    radial-gradient(60% 80% at 75% 90%,rgba(251,226,190,1) 0%,rgba(251,226,190,0) 70%),
    radial-gradient(55% 75% at 105% 105%,rgba(247,201,138,1) 0%,rgba(247,201,138,0) 70%),
    linear-gradient(100deg,#E7DEFF 0%,#F6D9EC 40%,#FBE2BE 75%,#F7C98A 100%)}
.footer__bg .grain{opacity:.5}
.footer__inner{padding-top:128px}
@media (min-width:1024px){.footer__inner{padding-top:200px;padding-inline:calc(var(--gutter) + 40px)}}
.footer__top{display:grid;grid-template-columns:1fr;gap:56px}
/* brand block beside the link columns only once the tagline has room for two lines */
@media (min-width:1280px){.footer__top{grid-template-columns:1fr auto;gap:64px}}
.footer__logo{height:24px;width:auto}
.footer__tagline{margin-top:20px;font-size:18px;line-height:28px;color:var(--ink)}
.footer__powered{margin-top:20px;display:inline-flex;align-items:center;gap:6px;font-size:18px;line-height:28px;color:var(--ink)}
.footer__cols{display:grid;grid-template-columns:1fr;gap:40px}
@media (min-width:640px){.footer__cols{display:flex;gap:48px}}
@media (min-width:1024px){.footer__cols{gap:80px}}
@media (min-width:1280px){.footer__cols{justify-content:flex-end}}
.footer__title{font-size:18px;line-height:28px;font-weight:500;letter-spacing:.01em;color:var(--ink)}
.footer__list{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.footer__link{display:inline;font-size:18px;line-height:28px;letter-spacing:.01em;color:var(--ink);background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 92%;transition:background-size .25s var(--ease)}
.footer__link:hover{background-size:100% 1px}
@media (pointer:coarse){
  .footer__list{gap:0}
  .footer__link{display:inline-block;padding:8px 0}
  .footer .brand__link{padding:7px 0}
  .legal a{display:inline-block;padding:11px 0}
}
.footer__link svg,.footer__powered svg{display:inline-block;width:10px;height:10px;margin-left:6px;vertical-align:.06em}
.footer__bottom{margin:64px 0 0;padding:20px 0 48px;border-top:1px solid rgba(10,15,46,.08);display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media (min-width:1024px){.footer__bottom{margin:80px 0 0;padding:20px 0 80px}}
@media (min-width:1280px){.footer__bottom{grid-template-columns:1fr auto;gap:48px}}
.badges{display:flex;flex-wrap:wrap;gap:16px 24px}
.badge{display:flex;align-items:center;gap:10px}
.badge svg{width:30px;height:30px;flex:none;color:var(--ink)}
.badge__title{font-size:14px;line-height:16px;font-weight:500;color:var(--ink)}
.badge__sub{font-size:14px;line-height:16px;color:var(--ink)}
.legal{display:flex;flex-wrap:wrap;gap:8px 48px;font-size:16px;line-height:1.4;color:var(--ink)}
@media (min-width:1280px){.legal{gap:80px;justify-content:flex-end}}
.legal a{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s var(--ease)}
.legal a:hover{background-size:100% 1px}

/* ==========================================================================
   Managed GEO page
   ========================================================================== */
.mhero{position:relative;isolation:isolate}
.mhero__top{display:grid;grid-template-columns:1fr;gap:24px;padding-top:96px}
@media (min-width:768px){.mhero__top{padding-top:210px}}
/* split from 1280: at 1024 the left column is too narrow for the two tone h1 */
@media (min-width:1280px){.mhero__top{grid-template-columns:1fr minmax(0,500px);gap:40px}}
.mhero__side{display:flex;flex-direction:column;gap:24px}
.mhero__p{max-width:640px;font-size:16px;line-height:1.35;letter-spacing:.005em;color:var(--text-2)}
.mhero__actions{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:1280px){.mhero__side{align-items:flex-end;text-align:right}.mhero__actions{justify-content:flex-end;margin-top:16px}}

.bento{margin-top:40px;display:grid;grid-template-columns:1fr;gap:40px}
@media (min-width:768px){.bento{grid-template-columns:1fr 1fr;gap:24px}}
@media (min-width:1280px){.bento{grid-template-columns:656fr 328fr 328fr;gap:24px}}
.bento__main{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:520px;padding:48px 24px;border-radius:24px;overflow:hidden;text-align:center;isolation:isolate;
  background:radial-gradient(90% 55% at 50% -12%,rgba(246,196,69,.20) 0%,rgba(224,86,155,.07) 45%,rgba(224,86,155,0) 75%),#F7F7F9}
@media (min-width:768px){.bento__main{grid-column:1 / -1}}
@media (min-width:1024px){.bento__main{min-height:560px;padding:60px 48px}}
@media (min-width:1280px){.bento__main{grid-column:auto;min-height:708px}}
.bento__orb{position:relative;width:220px;height:220px;display:grid;place-items:center}
.bento__orb .orb{--s:150px}
@media (min-width:1024px){.bento__orb{width:260px;height:260px}.bento__orb .orb{--s:180px}}
.wave{display:flex;align-items:center;justify-content:center;gap:9px;height:64px;margin-top:8px}
.wave i{display:block;width:6px;height:var(--h,10px);border-radius:3px;background:#D5D7E0;transform-origin:50% 50%}
.wave i.is-mid{background:#BFC2CF}
.wave--live i{animation:wave 2.4s var(--ease) infinite;animation-delay:var(--d,0s)}
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(var(--k,1.5))}}
.bento__kicker{margin-top:40px;font-size:17px;line-height:1.4;color:var(--muted)}
@media (min-width:1024px){.bento__kicker{font-size:18px}}
.bento__statement{margin-top:16px;max-width:440px;font-size:22px;line-height:1.36;letter-spacing:-.02em;color:var(--ink)}
@media (min-width:1024px){.bento__statement{font-size:26px;line-height:36px}}
.bento__card{display:flex;flex-direction:column;gap:24px}
.bento__visual{position:relative;container-type:inline-size;display:flex;align-items:center;justify-content:center;height:440px;padding:20px;border-radius:24px;overflow:hidden;isolation:isolate}
@media (min-width:1024px){.bento__visual{height:500px}}
@media (min-width:1280px){.bento__visual{height:566px}}
.bento__visual--light{background:radial-gradient(100% 60% at 50% 110%,rgba(224,86,155,.13),rgba(224,86,155,0) 70%),radial-gradient(80% 50% at 0% 0%,rgba(246,196,69,.16),rgba(246,196,69,0) 70%),#F7F7F9}
.bento__visual--warm{background:
    radial-gradient(70% 55% at 18% 12%,rgba(255,241,184,.95),rgba(255,241,184,0) 70%),
    radial-gradient(70% 60% at 85% 25%,rgba(243,154,46,.85),rgba(243,154,46,0) 70%),
    radial-gradient(75% 60% at 20% 85%,rgba(224,86,155,.75),rgba(224,86,155,0) 70%),
    radial-gradient(70% 60% at 95% 95%,rgba(124,92,255,.75),rgba(124,92,255,0) 70%),
    linear-gradient(160deg,#F9D47A,#F2A06A 45%,#D97BB3 75%,#9C7BF0)}
.bento__visual .grain{opacity:.5}
.bento__caption{display:flex;flex-direction:column;gap:12px;max-width:300px}
.bento__title{font-size:16px;line-height:20px;font-weight:500;color:var(--ink)}
.bento__text{font-size:16px;line-height:20px;color:var(--text-2)}
.mock-scale--narrow{font-size:clamp(10px,4.6cqi,14px)}
.mini{width:100%;max-width:22em;display:flex;flex-direction:column;gap:1em}
.mini__pill{align-self:center;display:inline-flex;align-items:center;gap:.6em;padding:.55em 1em .55em .6em;border-radius:2em;background:rgba(255,255,255,.85);box-shadow:0 .5em 1.5em -1em rgba(10,15,46,.3);font-size:1em;line-height:1.3;color:var(--ink);white-space:nowrap}
.mini__pill .orb{--s:1.5em}
.mini__card{display:flex;flex-direction:column;gap:.9em;padding:1.4em;border-radius:1.4em;background:rgba(255,255,255,.9);box-shadow:0 .1em .2em rgba(10,15,46,.04),0 1.5em 3em -1.6em rgba(10,15,46,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left}
.mini__card--glass{background:rgba(255,255,255,.78)}
.mini__head{display:flex;align-items:center;justify-content:space-between;gap:.8em}
.mini__label{display:flex;align-items:center;gap:.6em;font-size:.95em;line-height:1.3;color:rgba(10,15,46,.62)}
.mini__label .orb{--s:1.6em}
.mini__list{display:flex;flex-direction:column}
.mini__item{display:flex;align-items:center;gap:.7em;padding:.75em 0;border-top:1px solid rgba(10,15,46,.07);font-size:1.05em;line-height:1.3;color:var(--ink)}
.mini__item:first-child{border-top:0;padding-top:.2em}
.mini__item svg{width:1em;height:1em;flex:none;color:#7A7F96}
.mini__chips{display:flex;flex-wrap:wrap;gap:.45em}
.mini__prompt{font-family:var(--font-accent);font-weight:300;font-size:1.35em;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.mini__ba{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.6em 1em;padding-top:.9em;border-top:1px solid rgba(10,15,46,.07);font-size:1em}
.mini__ba dt{color:var(--muted)}
.mini__ba dd{justify-self:start}
.caret{display:inline-block;width:1px;height:1.1em;background:var(--ink);margin-left:1px;vertical-align:-.15em;animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* Trust strip */
.trust{text-align:center}
.trust__line{font-size:15px;line-height:1.4;color:var(--text-2)}
@media (min-width:768px){.trust__line{font-size:16px}}
.trust__chips{margin:24px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tchip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--card-line);background:#fff;font-size:15px;line-height:1;color:var(--text-2);white-space:nowrap}
.tchip--model{color:var(--ink);font-weight:500}
.tchip--model::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--o-gold),var(--o-amber) 50%,var(--o-orchid))}
@media (min-width:768px){.tchip{height:42px;padding:0 17px;font-size:15.5px}}
/* Until the whole set fits on one line (1440), the separator ends the row of
   models; on phones each group of chat modes (account type, web search,
   intelligence) also starts its own row */
.trust__sep,.trust__break{display:block;flex-basis:100%;height:0}
@media (max-width:767px){.trust__chips{gap:8px}.tchip{height:36px;padding:0 13px;gap:7px;font-size:14px}}
@media (max-width:374px){.tchip{padding:0 11px;font-size:13.5px}}
@media (min-width:768px){.trust__break{display:none}}
@media (min-width:1440px){.trust__sep{flex-basis:auto;width:1px;height:28px;align-self:center;background:var(--line);margin:0 6px}}

/* Intro (film) */
.intro__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.intro__actions{margin-top:28px;display:flex;justify-content:center}
.intro__media{margin-top:28px}

/* How it works (six steps) */
.how__grid{display:grid;grid-template-columns:1fr;gap:40px}
/* heading beside the steps only from 1280 (at 1024 the 900px steps would leave it 36px) */
@media (min-width:1280px){.how__grid{grid-template-columns:minmax(300px,1fr) minmax(0,900px);gap:60px}}
.steps{display:grid;grid-template-columns:1fr;row-gap:0}
@media (min-width:640px){.steps{grid-template-columns:1fr 1fr;row-gap:40px}}
@media (min-width:1024px){.steps{grid-template-columns:repeat(3,1fr);row-gap:48px}}
.step{padding:20px 0;border-top:1px solid var(--line)}
@media (min-width:640px){.step{padding:0 20px;border-top:0;border-left:1px solid var(--line)}}
@media (min-width:640px) and (max-width:1023px){.step:nth-child(2n+1){border-left:0;padding-left:0}}
@media (min-width:1024px){.step:nth-child(3n+1){border-left:0;padding-left:0}}
.step__num{font-size:14px;line-height:18px;color:var(--muted)}
.step__title{margin-top:12px;font-size:16px;line-height:20px;font-weight:500;color:var(--ink)}
.step__body{margin-top:10px;font-size:15px;line-height:1.45;color:var(--text-2)}

/* Gray band */
.band{margin-top:var(--section);background:var(--surface);padding:40px 0 44px}
@media (min-width:1024px){.band{padding:44px 0 40px}}
.band__cards{margin-top:40px;display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:768px){.band__cards{grid-template-columns:repeat(3,1fr);gap:20px}}
.bcard{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:220px;padding:24px;border-radius:24px;border:1px solid #E4E5EB;background:rgba(255,255,255,.45)}
@media (min-width:1024px){.bcard{min-height:262px}}
.bcard__title{font-family:var(--font-accent);font-weight:300;font-size:24px;line-height:1.25;letter-spacing:-.01em;color:var(--ink);max-width:300px}
@media (min-width:1024px){.bcard__title{font-size:26px;line-height:33px}}
.bcard__text{font-size:16px;line-height:1.3;color:var(--text-2)}
.fact{margin-top:40px;font-size:18px;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
@media (min-width:1024px){.fact{margin-top:48px;font-size:22px}}
.fact__label{color:#686D84}

/* Managed solutions (three panels) */
.msol__grid{margin-top:40px;display:grid;grid-template-columns:1fr;gap:40px}
@media (min-width:768px){.msol__grid{grid-template-columns:1fr 1fr;gap:24px;row-gap:48px}}
@media (min-width:1280px){.msol__grid{grid-template-columns:328fr 328fr 656fr;align-items:start;row-gap:0}}
.msol{display:flex;flex-direction:column;gap:24px}
@media (min-width:768px) and (max-width:1279px){.msol--wide{grid-column:1 / -1}}
.msol__panel{position:relative;container-type:inline-size;display:flex;align-items:center;justify-content:center;height:480px;border-radius:24px;overflow:hidden;isolation:isolate;background:#F7F7F9}
@media (min-width:1024px){.msol__panel{height:520px}}
@media (min-width:1280px){.msol__panel{height:566px}.msol--wide .msol__panel{height:516px}}
.msol__panel--orbit{background:radial-gradient(60% 40% at 50% 50%,rgba(255,255,255,1),rgba(255,255,255,0)),#F8F8FA}
.msol__panel--navy{background:radial-gradient(80% 60% at 50% 115%,rgba(200,168,75,.32),rgba(200,168,75,0) 70%),radial-gradient(70% 50% at 100% 0%,rgba(124,92,255,.22),rgba(124,92,255,0) 70%),var(--ink)}
.msol__panel--navy .grain{opacity:.35}
.msol__panel--report{padding:24px;background:radial-gradient(108.81% 69.12% at -5.7% 78.57%,rgba(243,154,46,.18) 0%,rgba(243,154,46,0) 100%),radial-gradient(60% 50% at 100% 0%,rgba(224,86,155,.10),rgba(224,86,155,0) 70%),var(--surface-2)}
.msol__caption{display:flex;flex-direction:column;gap:12px;max-width:300px}
.msol__title{font-size:16px;line-height:20px;font-weight:500;color:var(--ink)}
.msol__text{font-size:16px;line-height:20px;color:var(--text-2)}

/* Orbit visual: chips travel a tall ellipse around the orb (positions set in site.js) */
.orbit{position:absolute;inset:0}
.orbit__dot{position:absolute;left:var(--x);top:var(--y);width:var(--s,28px);height:var(--s,28px);border-radius:50%;transform:translate(-50%,-50%);filter:blur(var(--b,6px));opacity:var(--o,.8);background:radial-gradient(circle at 40% 40%,#F6C445,#F39A2E 45%,#E0569B 80%,rgba(224,86,155,0) 82%)}
.orbit__dot--v{background:radial-gradient(circle at 40% 40%,#C86DD7,#7C5CFF 60%,rgba(124,92,255,0) 72%)}
.orbit__ring{position:absolute;left:50%;top:50%;width:calc(var(--rx,96px) * 2);height:calc(var(--ry,200px) * 2);transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(10,15,46,.13)}
.orbit__halo{position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;border:1px solid rgba(10,15,46,.06)}
.orbit__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.orbit__center .orb{--s:124px}
.orbit__mark{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:13px;box-shadow:0 8px 24px -8px rgba(10,15,46,.45)}
.orbit__chip{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(10,15,46,.05),0 14px 30px -16px rgba(10,15,46,.35);font-size:14px;line-height:1;font-weight:500;color:var(--ink);white-space:nowrap;will-change:transform;
  transform:translate3d(calc(var(--px,50%) - 50%),calc(var(--py,50%) - 50%),0)}
.orbit__chip i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface);color:var(--ink)}
.orbit__chip svg{width:13px;height:13px}
/* Without JS the chips sit at four fixed points on the ellipse */
.orbit__chip:nth-child(1){--px:calc(50% + 0px);--py:calc(50% - var(--ry,200px))}
.orbit__chip:nth-child(2){--px:calc(50% + var(--rx,96px));--py:calc(50% - var(--ry,200px) * .1)}
.orbit__chip:nth-child(3){--px:calc(50% + 0px);--py:calc(50% + var(--ry,200px))}
.orbit__chip:nth-child(4){--px:calc(50% - var(--rx,96px));--py:calc(50% + var(--ry,200px) * .1)}
.orbit__chips{position:absolute;inset:0}

/* Content cards visual (stacked documents) */
.docs{position:relative;width:calc(100% - 56px);max-width:19em;height:27.6em;font-size:clamp(10px,4.3cqi,14px)}
.doc{position:absolute;left:0;right:0;display:flex;flex-direction:column;gap:.65em;padding:1.25em 1.35em 1.35em;border-radius:1.2em;background:#fff;box-shadow:0 .1em .2em rgba(0,0,0,.08),0 1.4em 2.6em -1.2em rgba(0,0,0,.55);text-align:left}
.doc__type{display:inline-flex;align-items:center;gap:.5em;font-size:.78em;letter-spacing:.07em;text-transform:uppercase;font-weight:500;color:#5E6378}
.doc__type i{display:block;width:.55em;height:.55em;border-radius:50%;background:var(--o-amber)}
.doc__title{font-family:var(--font-accent);font-weight:300;font-size:1.28em;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.doc__lines{display:flex;flex-direction:column;gap:.42em;margin-top:.15em}
.doc__lines span{display:block;height:.4em;border-radius:.3em;background:#EEEFF3}
.doc__lines span:nth-child(2){width:86%}
.doc__lines span:nth-child(3){width:62%}
.doc--1{top:0;transform:rotate(-4deg) translateX(-.4em);z-index:1}
.doc--2{top:8.7em;transform:rotate(2.5deg) translateX(.6em);z-index:2}
.doc--3{top:17.4em;transform:rotate(-1.2deg);z-index:3}
.doc--1 .doc__type i{background:var(--o-gold)}
.doc--2 .doc__type i{background:var(--o-rose)}
.doc--3 .doc__type i{background:var(--o-violet)}

/* Report table mock */
.report{width:100%;max-width:41em;font-size:clamp(9px,2.2cqi,14px);padding:1.6em;border-radius:1.6em;background:rgba(255,255,255,.92);box-shadow:0 .1em .2em rgba(10,15,46,.04),0 2em 4em -2em rgba(10,15,46,.22);text-align:left}
.report__head{display:flex;align-items:center;justify-content:space-between;gap:1em;padding-bottom:1.2em}
.report__title{display:flex;align-items:center;gap:.7em;font-size:1.05em;font-weight:500;color:var(--ink)}
.report__title .orb{--s:1.9em}
.report__brand{font-size:.95em;color:var(--muted)}
.report table{width:100%;table-layout:auto}
.report th{padding:.75em .8em .75em 0;white-space:nowrap;font-size:.82em;line-height:1.3;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:left;border-bottom:1px solid var(--line)}
.report td{padding:1em .8em 1em 0;font-size:.98em;line-height:1.3;color:var(--ink);border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.report td:last-child,.report th:last-child{padding-right:0}
.report td.report__prompt{white-space:normal;min-width:7em}
.report tr:last-child td{border-bottom:0}
.report td .chip{font-size:.86em}
.report__prompt{font-family:var(--font-accent);font-weight:300;font-size:1.06em}
.report__foot{display:flex;align-items:center;justify-content:space-between;padding-top:1.2em;margin-top:.2em;border-top:1px solid var(--line);font-size:.9em;color:var(--muted)}
.report__foot b{font-weight:500;color:var(--ink)}

/* Navy numbers band */
.navy{position:relative;margin-top:var(--section);padding:88px 0 96px;background:var(--ink);color:#fff;isolation:isolate;overflow:hidden}
@media (min-width:1024px){.navy{padding:104px 0 96px}}
.navy__glow{position:absolute;inset:auto 0 0 0;height:70%;z-index:-1;pointer-events:none;
  background:radial-gradient(45% 70% at 8% 110%,rgba(200,109,215,.55),rgba(200,109,215,0) 70%),radial-gradient(45% 70% at 55% 120%,rgba(243,154,46,.45),rgba(243,154,46,0) 70%),radial-gradient(35% 60% at 95% 115%,rgba(200,168,75,.40),rgba(200,168,75,0) 70%)}
.navy__glow .grain{opacity:.45}
.navy .h-big{color:#fff}
.navy__panel{margin-top:40px;display:grid;grid-template-columns:1fr;gap:28px;padding:16px;border-radius:24px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (min-width:1024px){.navy__panel{grid-template-columns:minmax(0,632fr) minmax(0,632fr);gap:32px;padding:32px}}
.navy__visual{position:relative;min-height:320px;border-radius:16px;overflow:hidden;background:radial-gradient(60% 60% at 70% 50%,rgba(246,196,69,.18),rgba(246,196,69,0) 70%),#0F1540;isolation:isolate}
@media (min-width:1024px){.navy__visual{min-height:100%}}
.navy__visual svg{position:absolute;inset:0;width:100%;height:100%}
.navy__visual .grain{opacity:.35}
.navy__brand{position:absolute;right:13%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
.navy__brand .orb{--s:110px;position:absolute;left:50%;top:50%;margin:-55px 0 0 -55px;opacity:.9}
.navy__brand-node{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);font-size:14px;font-weight:500;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.navy__brand-node img{width:20px;height:20px;border-radius:5px}
.navy__stats{display:flex;flex-direction:column;padding:4px 4px 8px}
@media (min-width:1024px){.navy__stats{padding:8px 8px 8px 0}}
.nstat{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.nstat:first-child{padding-top:4px}
.nstat__line{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.nstat__num{font-family:var(--font-accent);font-weight:300;font-size:30px;line-height:1.1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
@media (min-width:1024px){.nstat__num{font-size:34px}}
.nstat__label{font-size:18px;line-height:1.3;color:#fff}
@media (min-width:1024px){.nstat__label{font-size:20px}}
.nstat__text{font-size:15px;line-height:1.4;color:rgba(255,255,255,.66)}
.navy__statement{padding-top:24px;font-size:18px;line-height:1.45;color:rgba(255,255,255,.9);max-width:560px}
@media (min-width:1024px){.navy__statement{font-size:20px}}

/* CTA band */
.cta-band{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.cta-band__small{max-width:280px;font-size:14px;line-height:1.7;color:var(--muted)}

/* Request a campaign (id="request"): the final CTA with the request form in a
   white card, on a big light panel. A static form, see DESIGN_NOTES. */
.request__panel{position:relative;display:grid;grid-template-columns:1fr;gap:32px;padding:32px 16px 16px;border-radius:24px;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 55% at 0% 100%,rgba(246,196,69,.24),rgba(246,196,69,0) 70%),radial-gradient(60% 50% at 100% 0%,rgba(200,109,215,.14),rgba(200,109,215,0) 70%),var(--surface-2)}
.request__panel>.grain{z-index:-1;opacity:.35}
@media (min-width:768px){.request__panel{gap:40px;padding:48px 32px 32px}}
@media (min-width:1024px){.request__panel{grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:56px;align-items:start;padding:56px}}
@media (min-width:1280px){.request__panel{gap:80px;padding:64px}}
.request__copy{display:flex;flex-direction:column;gap:16px;max-width:560px}
@media (min-width:1024px){.request__copy{padding-top:8px}}
.request__points{margin-top:12px;display:grid;gap:12px}
.request__point{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1.35;color:var(--ink)}
.request__point svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:#fff;color:var(--gold-text);box-shadow:0 0 0 1px rgba(10,15,46,.07)}
.request__card{position:relative;display:flex;flex-direction:column;justify-content:center;padding:24px 20px;border-radius:20px;background:#fff;border:1px solid rgba(10,15,46,.06);box-shadow:0 1px 2px rgba(10,15,46,.04),0 30px 60px -36px rgba(10,15,46,.3)}
@media (min-width:768px){.request__card{padding:32px;border-radius:24px}}
.rform{display:flex;flex-direction:column;gap:18px}
.rform[hidden]{display:none}
.rform__title{margin-bottom:2px;font-size:22px;line-height:1.2;letter-spacing:-.015em;font-weight:400;color:var(--ink)}
.rform__title:focus,.rform-done__title:focus{outline:none}
.rform__row{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:640px){.rform__row{grid-template-columns:1fr 1fr;gap:16px}}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field__label{font-size:14px;line-height:1.35;font-weight:500;color:var(--ink)}
.field__req{margin-left:2px;color:var(--gold-text)}
.field__control{width:100%;height:48px;padding:0 14px;border-radius:12px;border:1px solid #DCDDE5;background:#fff;font-family:var(--font-sans);font-size:16px;line-height:1.4;color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.field__control--area{display:block;height:auto;min-height:112px;padding:12px 14px;resize:vertical}
.field__control::placeholder{color:var(--muted);opacity:1}
.field__control:hover{border-color:#C7C9D4}
.field__control:focus{outline:none;border-color:var(--ink)}
.field__control:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:12px}
.field.is-invalid .field__control{border-color:var(--error);background:#FFFBFA}
.field__error{display:flex;align-items:flex-start;gap:6px;font-size:14px;line-height:1.4;color:var(--error)}
.field__error[hidden]{display:none}
.field__error svg{flex:none;width:16px;height:16px;margin-top:1px}
.rform__submit{width:100%;height:48px;margin-top:6px}
/* full width: no hover or press scale (a 3% press shrink would pull each side in 7px and can lose a click near the edge) */
.rform__submit:hover,.rform__submit:active{transform:none}
.rform__submit:active{background:#050821}
.rform__submit[aria-disabled="true"]{cursor:progress;opacity:.82;transform:none}
.rform__alert{display:flex;align-items:flex-start;gap:8px;padding:12px 14px;border-radius:12px;background:#FEF3F2;font-size:14px;line-height:1.45;color:var(--error)}
.rform__alert[hidden]{display:none}
.rform__alert svg{flex:none;width:16px;height:16px;margin-top:2px}
.rform__legal{font-size:12.5px;line-height:1.55;color:var(--muted);text-align:center;text-wrap:balance}
.rform__legal a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(10,15,46,.3);text-underline-offset:2px;transition:text-decoration-color .2s var(--ease)}
.rform__legal a:hover{text-decoration-color:var(--ink)}
.rform-done{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 4px;text-align:center}
.rform-done[hidden]{display:none}
.request__card.is-done .rform-done{animation:done-in .6s var(--ease-out) both}
@keyframes done-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rform-done__badge{position:relative;display:grid;place-items:center;width:88px;height:88px;margin-bottom:8px}
.rform-done__badge .orb{--s:88px;position:absolute;inset:0}
.rform-done__check{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ok-text);box-shadow:0 8px 24px -10px rgba(10,15,46,.45)}
.rform-done__check svg{width:22px;height:22px}
.rform-done__title{font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:400;color:var(--ink)}
.rform-done__text{max-width:380px;font-size:16px;line-height:1.5;color:var(--text-2);text-wrap:balance}
.rform-done__recap{width:100%;max-width:420px;margin-top:8px;border-top:1px solid var(--line);text-align:left}
.rform-done__recap>div{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.rform-done__recap dt{font-size:14px;line-height:1.4;color:var(--muted)}
.rform-done__recap dd{font-size:15px;line-height:1.4;color:var(--ink);text-align:right;overflow-wrap:anywhere}

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js [data-reveal]{opacity:0;transform:translate3d(0,20px,0);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal="soft"]{transform:translate3d(0,12px,0)}
.js [data-reveal].is-in{opacity:1;transform:none}
.no-reveal [data-reveal]{opacity:1!important;transform:none!important}
.js [data-reveal-delay="1"]{transition-delay:.08s}
.js [data-reveal-delay="2"]{transition-delay:.16s}
.js [data-reveal-delay="3"]{transition-delay:.24s}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-reveal]{opacity:1;transform:none}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:thin}
  /* a still, scrollable row that starts on the container edge */
  .marquee__track{animation:none;margin-left:0;padding-inline:max(var(--gutter),calc((100% - 1360px) / 2))}
  .marquee__group[aria-hidden="true"],.marquee__pause{display:none!important}
  .orb--breathe,.float-a,.float-b,.wave--live i,.caret{animation:none!important}
}

/* ---------- Print ---------- */
/* A clean text document: chrome, films and decorative visuals off, every
   answer expanded, tables at full width, numerals and dark bands in ink */
@media print{
  @page{margin:14mm 14mm 16mm}
  :root{--section:40px}
  html,body{background:#fff!important}
  .site-header,.menu,.skip-link,.seg-mobile,.hero-glow,.footer__bg,.navy__glow,.grain,
  .hero__media,.intro__media,.vframe,.flow__media,.network__marquee,.marquee-wrap,
  .sol__panel,.bento__visual,.bento__orb,.bento__glow,.wave,.msol__panel,.navy__visual,
  .acc__progress,.faq__icon,.orb,.path__arrow,.source__play,.table-hint{display:none!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important;box-shadow:none!important;text-shadow:none!important}
  .hero__inner,.mhero__top{padding-top:0!important}
  /* buttons: outlined pills in ink (backgrounds do not print by default) */
  .btn{background:none!important;color:var(--ink)!important;border:1px solid var(--ink);height:auto;padding:6px 14px;transform:none!important}
  /* numerals: plain ink, final value only */
  .count__live{display:none!important}
  .count .count__final{opacity:1!important}
  .grad-text,.grad-text .count__final{background:none!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important}
  /* navy numbers band prints as a light section */
  .navy{background:none!important;color:var(--ink)!important;padding:0!important}
  .navy .h-big,.navy .nstat__num,.navy .nstat__label,.navy .navy__statement,.eyebrow--on-dark{color:var(--ink)!important}
  .navy .nstat__text{color:var(--text-2)!important}
  .eyebrow--on-dark .eyebrow__brand,.eyebrow--on-dark .eyebrow__sep{color:#6E7389!important}
  .navy__panel{display:block;background:none!important;padding:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .nstat{border-color:var(--line)!important}
  /* panels lose their fills, so cards get a hairline and lose their tall minimums */
  .bento__main{min-height:0!important;padding:0!important;background:none!important;text-align:left;align-items:flex-start;overflow:visible;border-radius:0}
  .bento__kicker{margin-top:0}
  .pcard2,.bcard{min-height:0!important;gap:12px;background:none!important;border:1px solid var(--line)}
  .pcard2::before{display:none}
  .sol-grid,.msol__grid,.bento,.proof-cards,.band__cards{row-gap:20px!important}
  .band{background:none!important;padding:0!important}
  /* every accordion answer expanded */
  .acc__panel{grid-template-rows:1fr!important;visibility:visible!important;opacity:1!important}
  .faq .acc__btn{padding:14px 0 6px}
  .faq .acc__body{padding:0 0 14px}
  /* tables: full width, nothing pinned, nothing clipped */
  .table-scroll{overflow:visible!important;margin:0!important;padding:0!important}
  .ctable,.ctable--checks{min-width:0!important}
  .ctable th,.ctable td{position:static!important;padding:10px 10px 10px 0!important;font-size:9.5pt!important;line-height:1.35!important}
  .ctable--checks tbody th{padding-left:0!important}
  .ctable--checks td.has-rule,.ctable--checks th.has-rule{border-left:1px solid var(--line);padding-left:10px!important}
  .ctable--checks .is-us{padding-left:10px!important}
  .ctable [scope="row"]::before,.ctable [scope="row"]::after,.ctable thead tr>:first-child::before,.compare__wrap::after{display:none!important}
  .request__card{display:none!important}
  .request__panel{display:block;background:none!important;padding:0!important}
  .footer__inner{padding-top:40px!important}
  /* keep things whole */
  h1,h2,h3,.section-head,.eyebrow{break-after:avoid}
  .pcard2,.bcard,.path,.step,.sol,.msol,.bento__card,.nstat,.prices__row,.quote,.acc__item,.ctable tr,.badge,.compare__wrap,.footer,.trust,.tchip{break-inside:avoid}
  p,li{orphans:3;widows:3}
}

/* ==========================================================================
   Component details
   ========================================================================== */

/* Walkthrough placeholder: a quiet sketch of the app, shown until a clip or poster paints */
.skel{position:absolute;inset:0;display:grid;grid-template-columns:7fr 3fr;background:#fff}
/* App pane: the clips' top bar (9.5% high: wordmark, Beta pill, bell, workspace pill), then sidebar and main */
.skel__app{display:flex;flex-direction:column;min-height:0;border-right:1px solid #F0F0F4}
.skel__bar{flex:0 0 9.5%;min-height:0;display:flex;align-items:center;gap:1.4%;padding:0 3.6%;background:#fff;border-bottom:1px solid #EFEFF3}
.skel__logo{flex:none;height:32%;width:auto}
.skel__beta{flex:none;height:38%;aspect-ratio:2/1;border-radius:999px;background:linear-gradient(180deg,rgba(240,216,128,.42),rgba(232,201,106,.26));box-shadow:inset 0 0 0 1px rgba(138,106,20,.16)}
.skel__bell{flex:none;height:26%;aspect-ratio:1;margin:0 3.2% 0 auto;border-radius:50% 50% 34% 34%;box-shadow:inset 0 0 0 1.5px #C9CBD6}
.skel__ws{flex:none;display:flex;align-items:center;gap:7%;height:61%;aspect-ratio:246/58;padding:0 5% 0 1.4%;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #E6E7EE}
.skel__ws b{flex:none;height:76%;aspect-ratio:1;border-radius:50%;background:var(--ink)}
.skel__ws i{flex:1;height:24%;border-radius:999px;background:#E4E5EC}
.skel__body{flex:1;display:grid;grid-template-columns:2fr 8fr;min-height:0}
.skel__side{display:flex;flex-direction:column;gap:5%;padding:12% 9%;border-right:1px solid #F0F0F4;background:#FBFBFC}
.skel__side i{display:block;flex:none;height:3.6%;width:66%;margin-left:7%;border-radius:999px;background:#EEEFF3}
.skel__side i:nth-child(odd){width:56%}
.skel__side i.is-on{position:relative;height:7.4%;width:100%;margin-left:0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #ECECF1}
.skel__side i.is-on::after{content:"";position:absolute;left:12%;top:50%;width:64%;height:34%;transform:translateY(-50%);border-radius:999px;background:#E2E3EA}
.skel__main{display:flex;flex-direction:column;gap:4.4%;padding:5% 6%}
.skel__title{display:block;height:5.5%;width:34%;border-radius:999px;background:#E4E5EC}
.skel__sub{display:block;height:3%;width:54%;border-radius:999px;background:#F0F1F4;margin-bottom:3%}
.skel__row{display:grid;grid-template-columns:5fr 2fr 2fr;gap:4%;align-items:center;padding:3.4% 4%;border:1px solid #F0F0F4;border-radius:10px}
.skel__row i{display:block;height:9px;border-radius:999px;background:#EEEFF3}
.skel__row i:last-child{background:var(--ok-bg);width:72%}
.skel__orbpane{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10%;background:radial-gradient(80% 60% at 50% 45%,rgba(246,196,69,.10),rgba(246,196,69,0) 70%),#FAFAFB}
.skel__orbpane .orb{--s:clamp(48px,9vw,120px)}
/* Live pill on the same line as the top bar, like the clips */
.skel__live{position:absolute;top:2.4%;left:50%;transform:translateX(-50%);width:22%;height:4.6%;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #E6E7EE}
.skel__live::before{content:"";position:absolute;left:15%;top:50%;height:28%;aspect-ratio:1;border-radius:50%;transform:translateY(-50%);background:#34B26A}
.skel__live::after{content:"";position:absolute;left:34%;right:18%;top:50%;height:26%;transform:translateY(-50%);border-radius:999px;background:#E4E5EC}
.skel__status{display:block;width:62%;height:3.4%;border-radius:999px;background:#ECEDF2}
@media (min-width:768px) and (max-width:1279px){
  .flow__panel{height:auto;container-type:normal}
  .flow__screen{width:100%;max-width:560px;height:auto}
}
/* Below 1280 px the 4:3 clips play (their text stays legible in a narrower screen):
   the screen and the placeholder take the same shape as those clips */
@media (max-width:1279px){
  .flow__screen{aspect-ratio:4/3;container-type:inline-size}
  .skel{grid-template-columns:1fr;grid-template-rows:85.2% 14.8%}
  .skel__app{border-right:0;overflow:hidden}
  .skel__bar,.skel__side{display:none}
  .skel__body{grid-template-columns:1fr}
  .skel__main{padding:6% 4.4% 0;gap:6%}
  .skel__main>.skel__row:nth-child(n+6){display:none}
  .skel__orbpane{flex-direction:row;justify-content:flex-start;align-items:center;gap:3%;padding:0 4%;border-top:1px solid #EFEFF3;background:#F8F8FA}
  .skel__orbpane .orb{--s:7.4cqw;order:0}
  .skel__status{order:1;width:50%;height:17%}
  .skel__live{position:relative;top:auto;left:auto;transform:none;order:2;margin-left:auto;width:15%;height:57%}
}
.flow__video{z-index:1}
.flow__video.is-prev{opacity:1;z-index:1;transition:none}
.flow__video.is-active{z-index:2}

/* Index mock variants */
.mock__head--row{justify-content:flex-start}
.mock__head--row .orb{--s:2.4em}
.mock__head--row .mock__label{flex:1}
.mock--api{width:30em;max-width:100%;gap:1.1em;padding:1.6em}
.mock__tile--ok{background:var(--ok-bg);color:var(--ok-text)}
.mock__inner--rows{align-items:center;gap:1.5em}
.mock__inner--rows .mock__rows{flex:1}
.ring{position:relative;flex:none;display:grid;place-items:center;width:5.2em;height:5.2em}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:#EFEFF3;stroke-width:3.2}
.ring__fg{fill:none;stroke:url(#ring-grad);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:99 100}
.ring__val{position:relative;font-family:var(--font-accent);font-weight:400;font-size:1.15em;letter-spacing:-.02em;color:var(--ink)}
.netmock{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:34em}
.netmock__label{font-size:1em;line-height:1.3;color:rgba(10,15,46,.6)}
.netmock__quote{margin-top:.5em;font-size:1.375em;line-height:1.3;letter-spacing:-.012em;color:var(--ink)}
.mock--chips{margin-top:1.6em;padding:1.1em 1.25em;border-radius:1.6em}
.netmock__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em}
.chip--ink svg{color:var(--gold-light)}

/* Navy band network lines */
.nw-flow{fill:none;stroke:#F0D880;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:4 96;stroke-dashoffset:100;opacity:.9;animation:nw-flow 6s linear infinite}
@keyframes nw-flow{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.nw-flow{display:none}}

/* Hero glow on the Managed GEO page is quieter, like Navii's enterprise page */
.hero-glow--soft .hero-glow__blob{opacity:.42;top:-300px}
@media (min-width:768px){.hero-glow--soft .hero-glow__blob{opacity:.5;top:-380px}}

/* Bento main panel grain */
.bento__main .grain{opacity:.35}

/* Managed hero h1 */
@media (min-width:1024px){.h-display--m{font-size:42px}}

/* Managed hero: "Managed GEO" as a small first line inside the h1, like the index hero line */
.h-kicker{margin-bottom:8px;font-size:15px;line-height:20px;letter-spacing:.01em;color:var(--ink)}
@media (min-width:768px){.h-kicker{font-size:18px;line-height:22px}}
@media (min-width:1024px){.h-kicker{font-size:20px}}
/* Compare tables: a soft edge hints that the table scrolls sideways */
.compare__wrap{position:relative}
.table-hint{display:none;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;line-height:1.3;color:var(--muted);transition:opacity .3s var(--ease)}
.table-hint svg{width:14px;height:14px;flex:none}
.table-hint__mouse{display:none}
@media (hover:hover) and (pointer:fine){.table-hint__touch{display:none}.table-hint__mouse{display:inline}}
.compare__wrap.is-scrollable .table-hint{display:flex}
.compare__wrap.is-scrolled .table-hint{opacity:0}
@media (max-width:1023px){.ctable thead th{font-size:16px;line-height:22px}.ctable__logo img{width:130px}}
/* Phones: narrower columns, so the next column peeks in at the right edge */
@media (max-width:767px){
  .ctable{min-width:654px}
  .ctable col.c-label{width:120px}
  .ctable col.c-us{width:178px}
  .ctable--checks{min-width:856px}
  .ctable--checks col.c-label{width:120px}
  .ctable--checks col.c-us{width:184px}
}
@media (max-width:1023px){
  .compare__wrap::after{content:"";position:absolute;top:0;bottom:0;right:calc(var(--gutter) * -1);width:40px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 85%);transition:opacity .2s var(--ease)}
  .compare__wrap.is-end::after{opacity:0}
}

/* Report mock on narrow panels: drop to a stacked list so it stays readable */
@container (max-width:520px){
  .report{font-size:13px;padding:1.2em}
  .report thead{display:none}
  .report table,.report tbody,.report tr,.report td{display:block;width:100%}
  .report tr{display:grid;grid-template-columns:1fr 1fr;gap:.5em .8em;padding:1em 0;border-bottom:1px solid var(--line)}
  .report tr:last-child{border-bottom:0;padding-bottom:.2em}
  .report td{padding:0;border:0;white-space:normal}
  .report td.report__prompt{grid-column:1 / -1;font-size:1.12em}
  .report td:nth-child(2),.report td:nth-child(3){color:var(--text-2)}
  .report td:nth-child(4)::before{content:"Before";display:block;margin-bottom:.35em;font-size:.78em;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .report td:nth-child(5)::before{content:"After";display:block;margin-bottom:.35em;font-size:.78em;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
}

/* AA on light gray panels: the second tone gets a touch darker where the
   background is not white or the text is under 24px */
.band .tone-2{color:#7E8399}
.bento__statement .tone-2{color:#6B7088}