/* M.A.T.E. corporate hub, shared system
   Palette + type per the M.A.T.E. Design Charter v0.1 */
:root{
  --ink:#15181f;
  --mast-h:88px;
  --ink-muted:#424a56;
  --brand-primary:#2862ea;
  --brand-primary-deep:#0a4cb0;
  --brand-surface:#e3e5e7;
  --brand-surface-soft:#f2f3f4;
  --brand-accent:#f49f00;
  --brand-marmalade:#f49f00;
  --brand-paper:#ffffff;
  --hair:#d3d6d9;
  --maxw:1180px;
  --idx:64px;
  --ease:cubic-bezier(.2,.6,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--brand-paper);color:var(--ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.028em;line-height:1.1;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:var(--brand-primary);text-decoration:none}
a:hover{color:var(--brand-primary-deep);text-decoration:underline;text-underline-offset:3px}
strong,b{font-weight:700}
:focus-visible{outline:3px solid var(--brand-primary);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;font-size:14px;z-index:200}
.skip:focus{left:16px;top:16px;color:#fff;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%}

/* ---- masthead: static, scrolls away ---- */
.masthead{padding:21px 0;background:var(--brand-primary)}
.mast-in{display:flex;align-items:center;gap:32px;flex-wrap:nowrap}
.mast-logo img{height:34px;width:auto}
.mast-nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.mast-nav a{font-size:14px;font-weight:400;letter-spacing:.01em;color:rgba(255,255,255,.86);text-decoration:none;transition:color .15s;white-space:nowrap;flex:none}
.mast-nav a:hover,.mast-nav a[aria-current="page"]{color:#fff}
.mast-nav a[aria-current="page"]{font-weight:700}
.mast-cta{font-size:14px;font-weight:700;letter-spacing:.01em;color:#fff!important;background:transparent;border:1.5px solid rgba(255,255,255,.7);padding:10px 22px;border-radius:999px;transition:background .16s,border-color .16s,transform .18s var(--ease);white-space:nowrap;flex:none}
.mast-cta:hover{background:rgba(255,255,255,.14);border-color:#fff;text-decoration:none;transform:translateY(-2px)}
.mast-toggle{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;color:#fff}
.mast-toggle svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6}
.mast-mobile{display:none;flex-direction:column;padding:12px 0 6px}
.mast-mobile.open{display:flex}
.mast-mobile a{padding:14px 0;font-size:15px;letter-spacing:.01em;color:#fff;border-bottom:1px solid rgba(255,255,255,.24);text-decoration:none}

/* ---- page hero ---- */
.hero{padding:clamp(56px,7vw,104px) 0 clamp(52px,6vw,88px);position:relative}
.hero.full{padding:clamp(10px,2.2svh,64px) 0;height:calc(100svh - var(--mast-h,88px));min-height:340px;display:flex;align-items:center;overflow:hidden}
.hero.full>.wrap{width:100%;transform:scale(var(--hero-fit,1));transform-origin:left center}
.hero.figured{position:relative;overflow:hidden}
.hero.figured::after{content:"";position:absolute;right:-10%;top:-30%;width:58%;aspect-ratio:1;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(40,98,234,.4),rgba(40,98,234,.2) 44%,rgba(40,98,234,0) 72%);animation:bloom 26s ease-in-out infinite alternate}
@keyframes bloom{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-9%,7%,0) scale(1.12)}100%{transform:translate3d(4%,-5%,0) scale(.96)}}
@media(prefers-reduced-motion:reduce){.hero.figured::after{animation:none}}
/* subpage heroes: the drifting bloom is replaced by a breathing corner glow, anchored bottom right and clipped by the section */
.hero.figured:not(.inverted)::after{right:-15%;top:auto;bottom:-34%;width:42%;background:radial-gradient(circle,rgba(40,98,234,.26),rgba(40,98,234,.12) 46%,rgba(40,98,234,0) 74%);transform-origin:100% 100%;animation:corner-breathe 24s ease-in-out infinite alternate}
@keyframes corner-breathe{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.09);opacity:1}}
.hero.figured>.wrap{position:relative;z-index:1}
.orb{position:absolute;z-index:0;pointer-events:none;right:-14%;top:-26%;width:clamp(570px,66vw,900px);aspect-ratio:1;border-radius:50%;border:2px solid rgba(244,159,0,.42);animation:orb-drift 34s ease-in-out infinite alternate}
.orb-glow{position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,rgba(244,159,0,0) 0 62%,rgba(244,159,0,.55) 80%,var(--brand-marmalade) 92%,rgba(244,159,0,0) 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 7px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 7px));filter:blur(2px) drop-shadow(0 0 14px rgba(244,159,0,.6));animation:orb-spin 7s linear infinite}
@keyframes orb-drift{0%{transform:translate3d(0,0,0) scale(1)}35%{transform:translate3d(-5%,4%,0) scale(1.04)}70%{transform:translate3d(-2%,-4%,0) scale(.98)}100%{transform:translate3d(3%,2%,0) scale(1.02)}}
@keyframes orb-spin{to{transform:rotate(360deg)}}
.hero.figured:not(.inverted) .orb{border-color:rgba(244,159,0,.55);right:-16%;top:-58%}
@media(max-width:700px){.orb{right:-36%;top:-8%;width:118vw}}
@media(prefers-reduced-motion:reduce){.orb,.orb-glow{animation:none}}
.hero.inverted{background:var(--brand-primary);color:#fff}
.hero.inverted h1,.hero.inverted .tagline{color:#fff}
.hero.inverted .eyebrow,.hero.inverted .eyebrow.accent{color:#fff}
.hero.inverted .stand{color:rgba(255,255,255,.88)}
.hero.inverted .stand strong{color:#fff}
.hero.inverted a{color:#fff}
.hero.inverted.figured::after{background:radial-gradient(circle,rgba(255,255,255,.34),rgba(255,255,255,.13) 44%,rgba(255,255,255,0) 72%)}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-primary);margin:0 0 clamp(12px,2.6svh,26px)}
.eyebrow.on-dark{color:var(--brand-accent)}
.eyebrow.accent{color:var(--brand-primary);font-size:13px;letter-spacing:.12em}
.hero h1{font-weight:900;font-size:clamp(30px,min(5.1vw,7.4svh),68px);letter-spacing:-.038em;line-height:1.02;max-width:16ch}
.hero .stand{font-size:clamp(15.5px,min(1.85vw,2.5svh),21.5px);color:var(--ink-muted);max-width:60ch;margin-top:clamp(14px,2.6svh,30px);line-height:1.55}
.hero .stand strong{color:var(--ink);font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.hero .actions{margin-top:clamp(18px,3.4svh,40px)}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;padding:17px 34px;border-radius:999px;border:1.5px solid transparent;text-decoration:none;white-space:nowrap;transition:background .16s,border-color .16s,color .16s,transform .18s var(--ease)}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--brand-primary);color:#fff!important}
.btn-primary:hover{background:var(--brand-primary-deep)}
.btn-quiet{border-color:var(--hair);color:var(--ink)!important;background:transparent}
.btn-quiet:hover{border-color:var(--ink)}
.btn-on-dark{background:#fff;color:var(--brand-primary)!important}
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn-live{position:relative}
.btn-live::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:3px;pointer-events:none;background:conic-gradient(from var(--spin),var(--brand-marmalade) 0 58%,rgba(250,205,120,.9) 78%,#fbd88f 90%,var(--brand-marmalade) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 7px rgba(244,159,0,.55));animation:btn-spin 4.5s linear infinite}
@keyframes btn-spin{to{--spin:360deg}}
@media(prefers-reduced-motion:reduce){.btn-live::before{background:var(--brand-marmalade);filter:none}}
.btn-on-dark:hover{background:var(--brand-surface)}
.btn-quiet-dark{border-color:rgba(255,255,255,.35);color:#fff!important}
.btn-quiet-dark:hover{border-color:#fff}

/* ---- numbered sections ---- */
.sec{padding:clamp(56px,8vw,104px) 0}
.sec.tint{background:var(--brand-surface-soft)}
.sec.field{background:var(--brand-surface)}
/* Design Charter v0.4 s3: Blue Ruin text fails 4.5:1 on Arctic Dawn (4.1:1). Blue as a shape only; text and links become Bitumen, links underlined. */
.sec.field .marker,.sec.field .pull .blue{color:var(--ink)}
.sec.field a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sec.field a:not(.btn):hover{color:var(--ink);text-decoration-thickness:2px}
.sec-grid{display:grid;grid-template-columns:var(--idx) minmax(0,1fr);gap:0 28px;align-items:start}
.idx{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--brand-primary);padding-top:12px;position:sticky;top:28px}
.sec-body{max-width:74ch;min-width:0}
.sec h2{font-size:clamp(26px,3.3vw,40px);letter-spacing:-.032em;max-width:22ch}
.sec .lede{font-size:clamp(17px,1.55vw,19.5px);color:var(--ink-muted);margin-top:22px;max-width:64ch}
.sec .lede strong{color:var(--ink);font-weight:700}
.sec p+p{margin-top:20px}
.sec h3{font-size:19.5px;margin-top:0;letter-spacing:-.02em}
.rule{height:2px;background:var(--brand-primary);border:0;margin:0}
.sec h2,.band h2{width:fit-content}
.sec h2::after,.band h2::after{content:"";display:block;height:3px;margin-top:18px;background:var(--brand-primary);transform:scaleX(var(--draw,0));transform-origin:left center}
.band h2::after,.sec.band-blue h2::after{background:#fff}
.sec h2.draw-anim::after,.band h2.draw-anim::after{transition:transform .8s var(--ease)}
@media(prefers-reduced-motion:reduce){.sec h2::after,.band h2::after{transform:none}}

/* ---- tinted band (matches the M.A.T.E. Engine sections) ---- */
.sec.dark,.sec.engine{background:rgba(40,98,234,.07)}

/* ---- fact list (machine readable) ---- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px 40px;margin:0}
.facts div{min-width:0}
.facts dt{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px}
.facts dd{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}

/* ---- stacked list of points ---- */
.points{display:grid;gap:38px;margin-top:44px}
.points.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:38px 48px}
.points li>h3{margin-bottom:10px}
.points li p{color:var(--ink-muted);font-size:16px}
.marker{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-primary);margin-bottom:12px}

/* ---- comparison rows ---- */
.rows{margin-top:44px;border-top:1px solid var(--hair)}
.rows li{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,2.2fr);gap:12px 40px;padding:26px 0;border-bottom:1px solid var(--hair)}
.rows .k{font-size:16px;font-weight:700;color:var(--ink)}
.rows .v{font-size:16px;color:var(--ink-muted);line-height:1.6}
.rows-acc .row-item{border-bottom:1px solid var(--hair)}
.rows-acc summary{display:flex;align-items:center;gap:20px;padding:22px 2px;cursor:pointer;list-style:none}
.rows-acc summary::-webkit-details-marker{display:none}
.rows-acc summary .k{transition:color .15s}
.rows-acc summary:hover .k{color:var(--brand-primary)}
.rows-acc summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--brand-primary);border-bottom:2px solid var(--brand-primary);transform:rotate(45deg) translateY(-2px);transition:transform .28s var(--ease)}
.rows-acc .row-item[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.rows-acc .row-item>.v{display:block;padding:0 2px 26px;max-width:66ch;animation:faq-in .32s var(--ease)}

/* ---- pull statement ---- */
.pull{font-size:clamp(22px,2.95vw,35px);font-weight:700;letter-spacing:-.03em;line-height:1.24;max-width:20ch;margin:0}
.pull .blue{color:var(--brand-primary)}

/* ---- cinematic video band ---- */
.sec.cine{position:relative;overflow:hidden;background:var(--ink) url("cine-carwash.jpg") 50% 42%/cover no-repeat;color:#fff;padding:clamp(88px,12vw,150px) 0}
.cine-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cine-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(21,24,31,.62),rgba(21,24,31,.78))}
.sec.cine>.wrap{position:relative;z-index:2}
.sec.cine .pull{color:#fff;max-width:30ch}
.sec.cine .pull .blue{color:var(--brand-marmalade)}
@media(max-width:760px){.cine-video{display:none}}
@media(prefers-reduced-motion:reduce){.cine-video{display:none}}

/* ---- status chip (never colour alone: always carries a word) ---- */
.chip{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:999px;background:var(--brand-surface);color:var(--ink)}
/* ---- Blue Ruin band with a slow sheen ---- */
.sec.band-blue{position:relative;z-index:1;color:#fff;background-color:var(--brand-primary);background-image:radial-gradient(46% 62% at 26% 34%,rgba(255,255,255,.20) 0%,rgba(255,255,255,.10) 40%,rgba(255,255,255,0) 74%),radial-gradient(42% 56% at 76% 70%,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 42%,rgba(255,255,255,0) 76%);background-size:170% 170%,170% 170%;background-repeat:no-repeat;animation:sheen 28s ease-in-out infinite alternate}
@keyframes sheen{from{background-position:16% 26%,84% 74%}to{background-position:30% 40%,70% 60%}}
.sec.band-blue>.wrap{position:relative;z-index:1}
.sec.band-blue .phone{object-fit:contain;background:transparent;border-radius:0}
.sec.band-blue h2,.sec.band-blue h3,.sec.band-blue p{color:#fff}
.sec.band-blue .eyebrow{color:#fff}
.sec.band-blue .lede{color:#fff}
.sec.band-blue a{color:#fff}
@media(prefers-reduced-motion:reduce){.sec.band-blue{animation:none}}

/* ---- live answer demo ---- */
.sec-demo{overflow:hidden}
.demo-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:52px 56px;align-items:start;max-width:none}
.demo-points{grid-column:1/-1}
.demo-points .points.two{margin-top:0;gap:34px 56px}
.demo{position:relative;background:var(--brand-surface-soft);border-radius:22px;padding:28px;margin:26px 22px}
.demo::before,.demo::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(32px);pointer-events:none}
.demo::before{inset:-84px -70px -58px -76px;background:radial-gradient(50% 50% at 50% 50%,#2862ea 0%,#2862ea 62%,rgba(40,98,234,.92) 76%,rgba(40,98,234,0) 92%);animation:demoglow 11s var(--ease) infinite}
.demo::after{width:72%;padding-bottom:56%;right:-14%;bottom:-17%;background:radial-gradient(50% 50% at 50% 50%,#2862ea 0%,#2862ea 54%,rgba(40,98,234,.7) 70%,rgba(40,98,234,0) 88%);animation:demodrift 17s var(--ease) infinite}
@keyframes demoglow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
@keyframes demodrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8%,-9%,0) scale(1.14)}}
.demo-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--brand-surface)}
.demo-head .ai-mark{height:17px;margin:0}
.demo-veh{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted);margin-left:auto}
.chat{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 0 4px}
.msg{max-width:84%;border-radius:16px;padding:13px 16px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.msg p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.msg.you{align-self:flex-end;background:rgba(244,159,0,.16);border-bottom-right-radius:5px}
.msg.ai{align-self:flex-start;background:var(--brand-paper);border-bottom-left-radius:5px}
.chat.anim .msg{opacity:0;transform:translateY(7px)}
.chat.anim .msg.in{opacity:1;transform:none;transition:opacity .34s var(--ease),transform .34s var(--ease)}
.msg .pill{display:inline-block;margin-top:13px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-primary);text-decoration:none}
.msg .pill:hover{text-decoration:underline;text-underline-offset:3px}
.msg.typing{position:absolute;left:0;display:flex;gap:5px;padding:16px;opacity:1;transform:none}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-muted);opacity:.45;animation:dot 1.1s infinite}
.msg.typing i:nth-child(2){animation-delay:.16s}.msg.typing i:nth-child(3){animation-delay:.32s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:.9;transform:translateY(-3px)}}
.demo-note{margin-top:16px;font-size:13px;color:var(--ink-muted)}
@media(min-width:901px){.demo-layout{align-items:center}}
@media(max-width:900px){.demo-layout{grid-template-columns:1fr;gap:44px}.demo{margin:24px 0;padding:22px 20px}.demo::before{inset:-48px -20px -36px -20px}.demo::after{width:62%;padding-bottom:48%;right:-4%;bottom:-9%}.msg{max-width:88%}}
@media(max-width:560px){.msg{max-width:92%}}
@media(prefers-reduced-motion:reduce){.msg.typing i{animation:none}.demo::before,.demo::after{animation:none}}

/* ---- M.A.T.E. AI lockup ---- */
.ai-mark{height:34px;width:auto;display:block;margin-bottom:24px}
.sec.dark .ai-mark,.hero .ai-mark{margin-bottom:26px}
@media(max-width:600px){
  .btn{white-space:normal;text-align:center;justify-content:center;padding:16px 26px}
  .actions .btn{flex:1 1 100%}
}
@media(max-width:520px){.ai-mark{height:27px}}

/* ---- router tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(298px,100%),1fr));gap:18px;margin-top:8px}
.tile{display:flex;flex-direction:column;background:var(--brand-surface-soft);padding:36px 34px 32px;border-radius:22px;text-decoration:none;color:inherit;min-height:248px;transition:background .18s,transform .2s var(--ease)}
.tile:hover{background:var(--brand-surface);text-decoration:none;color:inherit;transform:translateY(-3px)}
@media(hover:hover) and (min-width:901px){.tile{box-shadow:inset 0 0 0 0 transparent;transition:background .18s,transform .18s var(--ease),box-shadow .18s}.tile:hover{box-shadow:inset 0 0 0 2px var(--brand-marmalade)}.tile.dark:hover{box-shadow:inset 0 0 0 2px var(--brand-marmalade)}}
.tile .who{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:20px}
.tile .who:has(+.tile-logo){color:var(--brand-primary)}
.tile h3{font-size:23px;letter-spacing:-.028em;margin-bottom:12px}
.tile p{font-size:15px;line-height:1.6;color:var(--ink-muted);flex:1}
.tile .go{margin-top:26px;font-size:14px;font-weight:700;color:var(--brand-primary);display:inline-flex;align-items:center;gap:9px}
.tile .go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .18s}
.tile:hover .go svg{transform:translateX(4px)}
.tile.dark{background:rgba(40,98,234,.07);color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(40,98,234,.22)}
.tile.dark .who{color:var(--brand-primary)}
.tile.dark h3{color:var(--ink)}
.tile.dark p{color:var(--ink-muted)}
.tile.dark .go{color:var(--brand-primary)}
.tile.dark:hover{background:rgba(40,98,234,.12)}
.tagline{font-size:clamp(17px,min(2.1vw,3.1svh),26px);font-weight:700;letter-spacing:-.032em;margin-top:clamp(14px,2.6svh,28px);color:var(--ink)}
.tile-thumb{width:100%;height:118px;object-fit:contain;object-position:left center;margin-bottom:22px}
.tile{position:relative}
.tile-logo{display:flex;align-items:center;height:30px;margin-bottom:22px}
.tile-logo img{height:26px;width:auto;max-width:100%}
.tile .who:has(+.tile-logo){margin-bottom:16px}
.tile h3{margin-bottom:12px}
@media(max-width:560px){.tile-logo{height:26px;margin-bottom:20px}.tile-logo img{height:22px}}

/* ---- media block: image beside text ---- */
.media{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.media img{width:100%;height:100%;max-height:460px;object-fit:cover;border-radius:22px;display:block}
.media.flip .media-txt{order:2}
@media(max-width:840px){.media{grid-template-columns:1fr;gap:34px}.media.flip .media-txt{order:0}}

/* ---- animated stat dial, carded on imagery ---- */
.media-fig{position:relative;min-width:0}
.media-fig>img{aspect-ratio:5/4;height:auto;max-height:none}
.stat{position:absolute;left:22px;bottom:22px;right:22px;display:flex;flex-direction:row;align-items:center;gap:16px;margin:0;padding:14px;background:var(--brand-paper);border-radius:22px;box-shadow:0 12px 34px rgba(16,24,40,.16)}
.dial{position:relative;flex:0 0 auto;width:104px;height:104px;background:var(--brand-paper);border-radius:50%;display:grid;place-items:center}
.dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.dial circle{fill:none;stroke-width:10;stroke-linecap:round}
.dial .track{stroke:var(--brand-surface)}
.dial .val{stroke:var(--brand-primary);stroke-dasharray:314.16;stroke-dashoffset:314.16;transition:stroke-dashoffset 1.7s var(--ease)}
.dial.in .val{stroke-dashoffset:94.25}
.dial b{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1}
.dial .num{font-size:26px;font-weight:900;letter-spacing:-.045em;color:var(--ink)}
.dial .unit{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-top:6px}
.stat figcaption{font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--ink);padding-right:6px;text-wrap:pretty}
@media(max-width:840px){.media-fig>img{aspect-ratio:16/10}.stat{position:static;right:auto;left:auto;margin-top:16px;padding:0;box-shadow:none;background:none;gap:18px}}
@media(max-width:420px){.dial{width:92px;height:92px}.dial .num{font-size:23px}.stat{gap:14px}.stat figcaption{font-size:15px}}
@media(prefers-reduced-motion:reduce){.dial .val{stroke-dashoffset:94.25}}

/* ---- audience strip ---- */
.who-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:26px 22px;margin-top:48px}
.who-grid figure{margin:0}
.who-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;border-radius:20px;margin-bottom:16px}
.who-grid h3{font-size:16px;margin-bottom:6px}
.who-grid p{font-size:14px;color:var(--ink-muted);line-height:1.5}

.chip.accent{background:var(--brand-accent);color:var(--ink)}
.sec.field .chip{background:var(--brand-paper)}
.chip::before{content:"";width:7px;height:7px;background:currentColor;border-radius:50%;flex:none}
.chip.live::before{background:#1a8f4c;box-shadow:0 0 0 3px rgba(26,143,76,.18)}
.rows .k .chip{margin-left:10px;vertical-align:middle;padding:5px 11px;font-size:10.5px}

/* ---- FAQ ---- */
.faq{margin-top:44px;border-top:1px solid var(--hair)}
.faq>div{border-bottom:1px solid var(--hair);padding:30px 0}
.faq h3{font-size:18.5px;max-width:44ch}
.faq p{margin-top:14px;color:var(--ink-muted);font-size:16px;max-width:70ch}
.faq-acc .faq-item{border-bottom:1px solid var(--hair)}
.faq-acc summary{display:flex;align-items:flex-start;gap:20px;padding:26px 4px;cursor:pointer;list-style:none}
.faq-acc summary::-webkit-details-marker{display:none}
.faq-acc summary h3{margin:0;transition:color .15s}
.faq-acc summary:hover h3{color:var(--brand-primary)}
.faq-acc summary::after{content:"";margin-left:auto;flex:none;width:10px;height:10px;margin-top:6px;border-right:2px solid var(--brand-primary);border-bottom:2px solid var(--brand-primary);transform:rotate(45deg);transition:transform .28s var(--ease)}
.faq-acc .faq-item[open] summary::after{transform:rotate(225deg)}
.faq-acc .faq-item>p{margin:0 4px 30px;animation:faq-in .32s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}


/* ---- CTA band ---- */
.band{color:#fff;padding:clamp(56px,8vw,96px) 0}
.band h2{font-size:clamp(26px,3.5vw,42px);font-weight:900;letter-spacing:-.035em;color:#fff;max-width:18ch;line-height:1.06}
.band p{margin-top:22px;color:var(--brand-surface);max-width:52ch;font-size:18px}
.band{position:relative;overflow:hidden;background:var(--brand-primary)}
.band p.on-blue,.band>.wrap>p{color:rgba(255,255,255,.88)}
.band::after{content:"";position:absolute;right:-10%;top:-140px;width:52%;aspect-ratio:1;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.34),rgba(255,255,255,.13) 44%,rgba(255,255,255,0) 72%);animation:bloom 26s ease-in-out infinite alternate}
.band>.wrap{position:relative;z-index:1}
.band .orb{right:-13%;top:-230px;width:clamp(520px,58vw,840px)}
@media(max-width:700px){.band .orb{right:-40%;top:-150px;width:118vw}}
@media(prefers-reduced-motion:reduce){.band::after{animation:none}}

/* ---- footer ---- */
footer{background:var(--brand-paper);padding:64px 0 44px;font-size:14px;color:var(--ink-muted)}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
.foot-top img{height:32px;width:auto;margin-bottom:18px}
.foot-top p{font-size:14px;max-width:34ch;color:var(--ink-muted)}
footer h2{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 16px}
.foot-col a{display:block;margin-bottom:11px;color:var(--ink-muted);text-decoration:none;font-size:14px}
.foot-col a:hover{color:var(--brand-primary);text-decoration:underline;text-underline-offset:3px}
a.mail{cursor:pointer}
.foot-social{display:flex;gap:18px;align-items:center}
.foot-social a{display:grid;place-items:center;width:28px;height:28px;color:var(--brand-primary);transition:color .15s,transform .18s var(--ease)}
.foot-social a:hover{color:var(--brand-primary-deep);transform:translateY(-2px)}
.foot-social svg{width:24px;height:24px;fill:currentColor;stroke:none}
.foot-brands a{display:block;margin-bottom:16px;transition:transform .18s var(--ease)}
.foot-brands a:hover{transform:translateX(3px)}
.foot-brands img{height:19px;width:auto;display:block}
.sec-body:has(.sec-mark){position:relative}
.sec-mark{display:block;height:30px;width:auto;margin:0 0 22px}
@media(min-width:761px){.sec-mark{position:absolute;top:2px;right:0;margin:0;height:27px}.sec-body:has(.sec-mark)>.eyebrow{padding-right:230px}}
@media(max-width:760px){.sec-body:has(.sec-mark){display:flex;flex-direction:column}.sec-mark{order:1;align-self:flex-start;width:auto;height:22px;margin:26px 0 0}.sec-body:has(.sec-mark)>.rows,.sec-body:has(.sec-mark)>.points,.sec-body:has(.sec-mark)>.actions,.sec-body:has(.sec-mark)>.pull{order:2}}
@media(max-width:560px){.foot-brands img{height:17px}.sec-mark{height:24px}}
.foot-bottom{margin-top:34px;padding-top:24px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;font-size:13px}

@media(max-width:860px){
  :root{--mast-h:84px}
  .mast-nav{display:none}
  .mast-toggle{display:block}
  .mast-logo img{height:32px}
  .sec-grid{grid-template-columns:1fr;gap:0}
  .idx{position:static;padding:0 0 16px}
  .foot-top{grid-template-columns:1fr 1fr}
  .rows li{grid-template-columns:1fr}
}
@media(max-width:600px){
  .btn{white-space:normal;text-align:center;justify-content:center;padding:16px 26px}
  .actions .btn{flex:1 1 100%}
}
@media(max-width:520px){
  :root{--mast-h:78px}
  body{font-size:16px}
  .mast-logo img{height:28px}
  .foot-top{grid-template-columns:1fr}
  .actions .btn{width:100%;justify-content:center}
}
@media(max-height:620px) and (min-width:0px){
  .hero.full{padding:10px 0}
  .hero.full h1{font-size:clamp(24px,min(4.6vw,8.6svh),44px);line-height:1.04}
  .hero.full .stand{font-size:clamp(13.5px,min(1.7vw,2.9svh),17px);line-height:1.45;margin-top:clamp(10px,2svh,18px);max-width:56ch}
  .hero.full .tagline{font-size:clamp(15px,min(1.9vw,3.4svh),20px);margin-top:clamp(8px,1.8svh,16px)}
  .hero.full .eyebrow{margin-bottom:clamp(8px,1.8svh,16px)}
  .hero.full .actions{margin-top:clamp(12px,2.6svh,22px)}
  .hero.full .btn{padding:13px 26px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}