:root{
  --bg-base:#0A0E1A; --bg-raised:#111725; --bg-card:#161D2E; --frame:#0D1220;
  --brand:#4B7BFF; --brand-600:#3E6BFF; --brand-glow:rgba(75,123,255,.35);
  --ink:#F2F5FA; --text-2:rgba(242,245,250,.68); --text-3:rgba(242,245,250,.45);
  --hairline:rgba(255,255,255,.08); --inset-top:rgba(255,255,255,.06);
  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --max:1280px; --radius-card:16px; --radius-btn:12px; --radius-frame:20px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg-base);color:var(--ink);font-family:var(--font-body);letter-spacing:.02em;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.08;font-weight:700}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 0px}
@media(min-width:768px) {.wrap{padding:0 0px}}
.section{padding:96px 0}
@media(min-width:768px){.section{padding:128px 0}}
.raised{background:var(--bg-raised)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--brand)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--brand);box-shadow:0 0 0 4px rgba(75,123,255,.18)}
.muted{color:var(--text-2)}
.lead{color:var(--text-2);font-size:17px;line-height:1.6}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-btn);padding:12px 20px;font-size:15px;font-weight:600;border:1px solid transparent;transition:.2s var(--ease)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-600);transform:translateY(-2px);box-shadow:0 18px 40px -16px var(--brand-glow)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.15);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.btn svg{width:16px;height:16px}
.card{background:var(--bg-card);border:1px solid var(--hairline);box-shadow:inset 0 1px 0 var(--inset-top);border-radius:var(--radius-card)}
.grid-texture{background-image:linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);background-size:44px 44px}
.brand-glow{background:radial-gradient(closest-side,var(--brand-glow),rgba(75,123,255,0));filter:blur(6px)}
.frame{position:relative;border-radius:var(--radius-frame);overflow:hidden;background:var(--frame);border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(75,123,255,.10),0 30px 80px -30px rgba(0,0,0,.8),0 0 70px -18px var(--brand-glow)}
.frame .chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);background:var(--frame)}
.frame .dot{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.15)}
.frame .bar{margin-left:12px;flex:1;height:24px;border-radius:6px;background:rgba(255,255,255,.06)}
.frame img{width:100%;height:100%;object-fit:cover;object-position:top}
/* branded placeholder so a slow/missing shot never shows a broken-image icon */
.frame .shot,.svc .img{background:radial-gradient(120% 120% at 50% 0%,rgba(75,123,255,.10),var(--frame) 60%)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.from-left{transform:translateX(-32px)}
.reveal.from-right{transform:translateX(32px)}
.reveal.in{opacity:1;transform:none}
/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--brand),#7CA0FF);box-shadow:0 0 12px var(--brand-glow)}
.header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.3s;border-bottom:1px solid transparent; padding: 0 20px;}
.header.scrolled{background:rgba(10,14,26,.85);backdrop-filter:blur(12px);border-bottom-color:var(--hairline)}
.header .inner{height:68px;display:flex;align-items:center;justify-content:space-between}
.logo{height:38px;width:auto}
.nav{display:none;align-items:center;gap:4px}
.nav a,.nav button{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--text-2);font-size:15px;font-weight:500;padding:8px 12px;border-radius:8px;transition:color .2s}
.nav a:hover,.nav button:hover,.nav .has-menu.open{color:#fff}
.nav svg{width:16px;height:16px;transition:transform .2s}
.nav .has-menu.open svg{transform:rotate(180deg)}
.header-cta{display:none;align-items:center;gap:12px}
.header-cta a.signin{color:var(--text-2);font-size:15px;font-weight:500}
.header-cta a.signin:hover{color:#fff}
.burger{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:none;border:none;color:var(--ink);border-radius:8px}
.burger svg{width:24px;height:24px}
@media(min-width:1024px){.nav,.header-cta{display:flex}.burger{display:none}}
.mega{position:absolute;left:0;right:0;top:68px;background:rgba(22,29,46,.97);backdrop-filter:blur(18px);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);display:none;opacity:0;transform:translateY(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.mega.open{display:block;opacity:1;transform:none}
.mega .wrap{padding:32px 40px}
.mega-products{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mega-products.cols-4{grid-template-columns:repeat(4,1fr)}
.mega-products a{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:16px;transition:background .2s,transform .2s var(--ease)}
.mega-products a:hover{background:rgba(255,255,255,.05);transform:translateY(-2px)}
.mega-products a .name{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink)}
.mega-products a .desc{font-size:13px;color:var(--text-2);line-height:1.35}
.mega-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 24px}
.mega-list.cols-3{grid-template-columns:repeat(3,1fr)}
.mega-list a{padding:8px 12px;border-radius:8px;font-size:15px;color:var(--text-2)}
.mega-list a:hover{background:rgba(255,255,255,.05);color:#fff}
.drawer{display:none;border-top:1px solid var(--hairline);background:var(--bg-base);max-height:calc(100vh - 68px);overflow-y:auto}
.drawer.open{display:block}
.drawer .wrap{padding:8px 24px 24px}
.acc-head,.drawer .lnk{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;border-bottom:1px solid var(--hairline);color:var(--ink);font-size:16px;font-weight:500;padding:16px 0}
.acc-panel{display:none;padding-left:4px}
.acc-panel.open{display:block}
.acc-panel a{display:block;padding:8px 0;font-size:15px;color:var(--text-2)}
.acc-head svg{width:16px;height:16px}
.drawer-cta{display:flex;flex-direction:column;gap:12px;padding:20px 0}
.drawer-cta .signin{text-align:center;font-size:15px;font-weight:500}
.hero{position:relative;overflow:hidden;padding:68px 20px 68px 20px;background:var(--bg-base)}
.hero .glow{position:absolute;right:-128px;top:-40px;width:640px;height:640px;pointer-events:none}
/* ambient drifting mesh — slow, subtle atmosphere */
.hero .mesh{position:absolute;inset:-20% -10% auto -10%;height:120%;pointer-events:none;opacity:.7;
  background:
    radial-gradient(38% 46% at 18% 22%,rgba(75,123,255,.18),transparent 60%),
    radial-gradient(30% 40% at 82% 12%,rgba(124,160,255,.12),transparent 60%),
    radial-gradient(40% 50% at 68% 78%,rgba(75,123,255,.10),transparent 60%);
  animation:meshdrift 22s ease-in-out infinite alternate;filter:blur(8px)}
@keyframes meshdrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,1.5%,0) scale(1.05)}100%{transform:translate3d(2%,-1%,0) scale(1.02)}}
.hero .texture{position:absolute;inset:0;pointer-events:none}
.hero .grid{position:relative;display:grid;grid-template-columns:1fr;gap:48px;align-items:center;padding:64px 0}
@media(min-width:1024px){.hero .grid{grid-template-columns:45fr 55fr;gap:32px;padding:112px 0}}
.hero h1{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.02;margin-top:20px}
@media(min-width:640px){.hero h1{font-size:52px}}
@media(min-width:1024px){.hero h1{font-size:46px}}
.hero h1 .accent{color:var(--brand)}
/* Rotating hero message: the white introduction stays fixed while the blue line types and deletes. */
.hero-heading-prefix{display:block}
.hero-rotating-wrap{display:block;min-height:2.15em}
.type-caret{
  display:inline-block;
  width:2px;
  height:.82em;
  margin-left:.08em;
  vertical-align:-.06em;
  border-radius:2px;
  background:var(--brand);
  animation:typeCaretBlink .8s steps(1,end) infinite;
}
@keyframes typeCaretBlink{0%,46%{opacity:1}47%,100%{opacity:0}}
@media(max-width:639px){.hero-rotating-wrap{min-height:2.1em}}
.hero p.lead{margin-top:24px;font-size:18px}
@media(min-width:1024px){.hero p.lead{font-size:20px}}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.trust{list-style:none;margin-top:40px;display:flex;flex-direction:column;gap:12px}
.trust li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-2)}
.trust .tick{margin-top:2px;flex:none;width:20px;height:20px;border-radius:99px;background:rgba(75,123,255,.18);color:var(--brand);display:flex;align-items:center;justify-content:center}
.trust .tick svg{width:12px;height:12px}
/* staged hero entrance */
.hero-stage{opacity:0;transform:translateY(16px);animation:heroIn .7s var(--ease) forwards}
.hero-stage.s1{animation-delay:.05s}.hero-stage.s2{animation-delay:.13s}.hero-stage.s3{animation-delay:.21s}.hero-stage.s4{animation-delay:.29s}.hero-stage.s5{animation-delay:.37s}
@keyframes heroIn{to{opacity:1;transform:none}}
.hero .visual{position:relative;will-change:transform}
@media(min-width:1024px){.hero .visual{margin-right:-40px}}
.hero .phone{position:absolute;bottom:-40px;left:-24px;width:150px}
@media(min-width:1024px){.hero .phone{width:168px}}
.pill{display:none;align-items:center;gap:12px;border-radius:16px;padding:12px 16px;box-shadow:0 20px 45px -20px rgba(0,0,0,.7);position:absolute;will-change:transform}
@media(min-width:640px){.pill.p1{display:flex}}
@media(min-width:1024px){.pill.p2{display:flex}}
.pill .ic{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.pill .ic svg{width:16px;height:16px}
.pill .m{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1.1}
.pill .c{font-size:12px;opacity:.8}
.pill.brand{background:var(--brand);color:#fff}.pill.brand .ic{background:rgba(255,255,255,.15)}
.pill.p1{right:-8px;top:32px;animation:floaty 6s ease-in-out infinite}
.pill.p2{right:-16px;bottom:24px;background:var(--bg-card);border:1px solid var(--hairline);color:var(--ink);animation:floaty 7s ease-in-out infinite .8s}
.pill.p2 .ic{background:rgba(75,123,255,.15);color:var(--brand)}.pill.p2 .c{color:var(--text-2);opacity:1}
.pill.p2 .live{width:8px;height:8px;border-radius:99px;background:#3ED598;box-shadow:0 0 0 0 rgba(62,213,152,.6);animation:pulse 2s ease-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,213,152,.55)}70%{box-shadow:0 0 0 8px rgba(62,213,152,0)}100%{box-shadow:0 0 0 0 rgba(62,213,152,0)}}
/* stats / proof band */
.stats{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--bg-base);position:relative;overflow:hidden}
.stats::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 50% 0%,rgba(75,123,255,.06),transparent 60%);pointer-events:none}
.stats .wrap{padding:44px 24px}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px}
@media(min-width:768px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{position:relative;text-align:center}
.stat+.stat::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:1px;height:44px;background:var(--hairline);display:none}
@media(min-width:768px){.stat+.stat::before{display:block}}
.stat .n{font-family:var(--font-display);font-weight:800;font-size:38px;letter-spacing:-.03em;line-height:1;background:linear-gradient(180deg,#fff,#B9C6E6);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(min-width:768px){.stat .n{font-size:44px}}
.stat .l{margin-top:10px;font-size:13px;font-weight:500;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em}
.clients{border-bottom:1px solid var(--hairline);background:var(--bg-base)}
.clients .wrap{padding:36px 24px}
.clients p{text-align:center;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3)}
.clients .logos{display:flex;justify-content:center;margin-top:28px}
.clients img{max-height:64px;width:100%;max-width:980px;object-fit:contain;opacity:.55;transition:opacity .3s;filter:brightness(0) invert(1)}
.clients .logos:hover img{opacity:.85}
.clients .mobile-logos{display:none}
@media(max-width:767px){.clients .desktop-logos{display:none}.clients .mobile-logos{display:flex}.clients .mobile-logos img{max-height:120px;max-width:420px}}
.eco-head{position:relative;max-width:640px;margin:0 auto;text-align:center}
.eco-head h2{font-size:32px;margin-top:16px}
@media(min-width:768px){.eco-head h2{font-size:44px}}
.eco-head p{margin-top:16px}
/* === SIGNATURE: connected ecosystem orbit === */
.orbit{position:relative;max-width:560px;margin:64px auto 0;aspect-ratio:1}
.orbit .ring-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.orbit .halo{position:absolute;left:50%;top:50%;width:66%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,var(--brand-glow),transparent);animation:halo 4.5s ease-in-out infinite;z-index:1;pointer-events:none}
.orbit-rotor{position:absolute;inset:0;animation:orbitspin 80s linear infinite;z-index:2}
.orbit .lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.orbit .lines line{stroke:var(--brand);stroke-width:.35;opacity:.4;stroke-dasharray:1.4 2.6;animation:dashflow 3.4s linear infinite}
.node{position:absolute;transform:translate(-50%,-50%)}
.node .inner{display:flex;flex-direction:column;align-items:center;gap:6px;animation:orbitspin 80s linear infinite reverse}
.node .ic{width:48px;height:48px;border-radius:16px;background:var(--bg-card);border:1px solid var(--hairline);box-shadow:inset 0 1px 0 var(--inset-top),0 10px 30px -12px rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;color:var(--brand);transition:transform .25s var(--ease),border-color .25s}
.node .inner:hover .ic{transform:scale(1.12);border-color:rgba(75,123,255,.6)}
.node .ic svg{width:20px;height:20px}
.node span{font-size:12px;font-weight:600;background:rgba(10,14,26,.8);padding:2px 8px;border-radius:99px}
.orbit .center{position:absolute;left:50%;top:50%;width:56%;transform:translate(-50%,-50%);z-index:3}
@keyframes orbitspin{to{transform:rotate(360deg)}}
@keyframes dashflow{to{stroke-dashoffset:-24}}
@keyframes halo{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.96)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.05)}}
.benefits{position:relative;margin-top:64px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.benefits{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.benefits{grid-template-columns:repeat(4,1fr)}}
.benefit{padding:24px;height:100%;transition:transform .25s var(--ease),border-color .25s}
.benefit:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.benefit .ic{width:44px;height:44px;border-radius:12px;background:rgba(75,123,255,.15);color:var(--brand);display:flex;align-items:center;justify-content:center}
.benefit .ic svg{width:20px;height:20px}
.benefit h3{font-size:18px;margin-top:16px}
.benefit p{font-size:14px;color:var(--text-2);margin-top:8px;line-height:1.5}
.products-head{max-width:640px}
.products-head h2{font-size:32px;margin-top:16px}
@media(min-width:768px){.products-head h2{font-size:44px}}
.mini-nav{position:sticky;top:68px;z-index:30;margin-top:40px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:rgba(10,14,26,.85);backdrop-filter:blur(12px)}
.mini-nav .row{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.mini-nav .row::-webkit-scrollbar{display:none}
.mini-nav a{white-space:nowrap;border-bottom:2px solid transparent;padding:16px;font-size:14px;font-weight:600;color:var(--text-2);transition:.2s}
.mini-nav a.active{border-bottom-color:var(--brand);color:var(--brand)}
.mini-nav a:hover{color:#fff}
.prow{padding:80px 20px}
@media(min-width:768px){.prow{padding:112px 0}}
.prow .grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:1024px){.prow .grid{grid-template-columns:1fr 1fr;gap:64px}}
.plabel{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--brand)}
.prow h3{font-size:26px;margin-top:12px}
@media(min-width:768px){.prow h3{font-size:34px}}
.prow .desc{margin-top:16px;font-size:17px;color:var(--text-2);line-height:1.6;max-width:520px}
.feats{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px}
.feats li{display:flex;align-items:center;gap:12px;font-size:15px}
.feats .tick{width:20px;height:20px;border-radius:99px;background:rgba(75,123,255,.18);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.feats .tick svg{width:12px;height:12px}
.explore{display:inline-flex;align-items:center;gap:6px;margin-top:28px;font-size:15px;font-weight:600;color:var(--brand);transition:gap .2s var(--ease)}
.explore:hover{gap:10px}
.explore svg{width:16px;height:16px}
/* product visual + single tasteful floating feature chip (replaces duplicate crop) */
.vis{position:relative}
.shot-chip{position:absolute;display:none;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;background:rgba(13,18,32,.86);border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 40px -18px rgba(0,0,0,.8);font-size:13px;font-weight:600;color:var(--ink);backdrop-filter:blur(6px);animation:floaty 7s ease-in-out infinite;z-index:2}
@media(min-width:640px){.shot-chip{display:inline-flex}}
.shot-chip .d{width:8px;height:8px;border-radius:99px;background:var(--brand);box-shadow:0 0 0 4px rgba(75,123,255,.18);flex:none}
.shot-chip.br{right:-14px;bottom:-16px}
.shot-chip.bl{left:-16px;bottom:-18px;animation-delay:.9s}
.survey-center{max-width:640px;margin:0 auto;text-align:center}
.survey-center h3{margin:12px auto 0;max-width:560px;font-size:26px}
@media(min-width:768px){.survey-center h3{font-size:34px}}
.survey-center .desc{margin:16px auto 0;max-width:560px}
.survey-feats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:24px}
.survey-feats span{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.survey-feats svg{width:14px;height:14px;color:var(--brand)}
.steps{margin-top:56px;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}
.step .top{display:flex;align-items:center;gap:12px}
.step .num{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--brand)}
.step .line{height:1px;flex:1;background:rgba(255,255,255,.1)}
.step .ic{margin-top:20px;width:48px;height:48px;border-radius:16px;background:rgba(75,123,255,.15);color:var(--brand);display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease)}
.step:hover .ic{transform:translateY(-3px)}
.step .ic svg{width:20px;height:20px}
.step h3{margin-top:16px;font-size:18px}
.step p{margin-top:8px;font-size:14px;color:var(--text-2);line-height:1.5}
.services-head{display:flex;flex-direction:column;gap:24px;justify-content:space-between;align-items:flex-start}
@media(min-width:768px){.services-head{flex-direction:row;align-items:flex-end}}
.services-head h2{font-size:32px;margin-top:16px}
@media(min-width:768px){.services-head h2{font-size:44px}}
.chiprow{display:flex;flex-wrap:wrap;gap:8px 24px}
.chiprow span{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.chiprow svg{width:14px;height:14px;color:var(--brand)}
.svc-grid{margin-top:48px;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.svc-grid{grid-template-columns:repeat(4,1fr)}}
.svc{display:flex;flex-direction:column;overflow:hidden;height:100%;transition:transform .25s var(--ease),border-color .25s}
.svc:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.svc .img{aspect-ratio:1.6;overflow:hidden}
.svc .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.svc:hover .img img{transform:scale(1.05)}
.svc .body{padding:20px;display:flex;flex-direction:column;flex:1}
.svc h3{font-size:17px}
.svc p{margin-top:8px;font-size:13px;color:var(--text-2);flex:1;line-height:1.5}
.svc .explore{margin-top:16px;font-size:14px}
.value-grid{margin-top:48px;display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:24px;overflow:hidden}
@media(min-width:640px){.value-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.value-grid{grid-template-columns:repeat(3,1fr)}}
.value{background:var(--bg-card);padding:32px;transition:background .25s}
.value:hover{background:var(--bg-raised)}
.value .ic{width:44px;height:44px;border-radius:12px;background:rgba(75,123,255,.15);color:var(--brand);display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease)}
.value:hover .ic{transform:translateY(-3px)}
.value .ic svg{width:20px;height:20px}
.value h3{margin-top:20px;font-size:18px}
.value p{margin-top:8px;font-size:14px;color:var(--text-2);line-height:1.5}
.pricing-head{max-width:720px;margin:0 auto;text-align:center}
.pricing-head h2{margin:16px auto 0;max-width:620px;font-size:32px}
@media(min-width:768px){.pricing-head h2{font-size:44px}}
.tiers{margin-top:48px;display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:700px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.tiers{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}}
.tier{padding:24px;display:flex;flex-direction:column;height:100%;border-radius:20px;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.card.tier:hover{transform:translateY(-4px);border-color:rgba(75,123,255,.45);box-shadow:0 24px 60px -34px var(--brand-glow)}
.tier h3{font-size:18px}
.tier .price{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.02em;margin-top:14px;line-height:1.15}
.tier .price span{font-size:.62em;font-weight:600;color:var(--text-2)}
.tier .price-note{font-size:12px;color:var(--text-2);margin-top:8px;min-height:18px}
.tier .feature-list{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:11px;flex:1}
.tier .feature-list>li{position:relative;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.feature-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:1px;font-weight:800;font-size:17px;line-height:1}
.feature-icon.yes{color:#63E6BE}
.feature-icon.no{color:#F04D82}
.feature-label{min-width:0}
.info-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:4px;border:0;border-radius:99px;background:rgba(255,255,255,.88);color:#121827;font-size:10px;font-weight:800;line-height:1;vertical-align:1px;padding:0}
.tip-bubble{position:absolute;left:28px;top:-10px;z-index:8;width:min(280px,calc(100vw - 72px));padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#0D1220;color:var(--ink);box-shadow:0 18px 48px -22px rgba(0,0,0,.95);font-size:12px;line-height:1.45;opacity:0;visibility:hidden;transform:translateY(4px);transition:.18s var(--ease);pointer-events:none}
.tip-bubble ul{margin:0;padding-left:16px;display:block}
.tip-bubble li{display:list-item;margin:4px 0;font-size:12px}
.feature-list>li:hover .tip-bubble,.feature-list>li:focus-within .tip-bubble{opacity:1;visibility:visible;transform:none}
.tier .btn{margin-top:26px;width:100%}
@media(max-width:699px){.tip-bubble{left:0;top:28px}}
.tst-grid{margin-top:48px;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:1024px){.tst-grid{grid-template-columns:1.3fr 1fr}}
.tst-feat-wrap{position:relative;height:100%}
.tst-feat-wrap .brand-glow{position:absolute;inset:-24px}
.tst-feat{position:relative;padding:32px;display:flex;flex-direction:column;justify-content:space-between;height:100%;border-radius:24px;min-height:460px}
@media(min-width:768px){.tst-feat{padding:40px}}
.tst-feat .q{width:36px;height:36px;color:var(--brand)}
.tst-feat blockquote{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.28;letter-spacing:-.02em;margin-top:24px}
@media(min-width:768px){.tst-feat blockquote{font-size:30px}}
.tst-side{display:flex;flex-direction:column;gap:24px}
.tst-card{padding:24px;border-radius:16px;transition:transform .25s var(--ease),border-color .25s;display:flex;flex-direction:column;justify-content:space-between;flex:1}
.tst-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2)}
.tst-card blockquote{font-size:15px;line-height:1.6;color:var(--ink)}
.tst-grid figcaption{display:flex;align-items:center;gap:12px;margin-top:20px}
.tst-grid .avatar{width:44px;height:44px;border-radius:99px;overflow:hidden;border:1px solid var(--hairline);background:var(--bg-card);flex:none}
.tst-grid .avatar img{width:100%;height:100%;object-fit:cover}
.tst-grid figcaption .n{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.tst-grid figcaption .r{display:block;font-size:13px;color:var(--text-2)}
.cta{position:relative;overflow:hidden;background:var(--bg-base)}
.cta .wash{position:absolute;top:0;bottom:0;right:0;width:70%;pointer-events:none;background:radial-gradient(60% 80% at 80% 50%,rgba(75,123,255,.35),rgba(10,14,26,0) 70%)}
.cta .grid{position:relative;display:grid;grid-template-columns:1fr;gap:48px;align-items:center;padding:96px 0}
@media(min-width:768px){.cta .grid{padding:128px 0}}
@media(min-width:1024px){.cta .grid{grid-template-columns:1fr 1fr}}
.cta h2{font-size:34px;line-height:1.06}
@media(min-width:768px){.cta h2{font-size:52px}}
.cta p{margin-top:20px;max-width:512px;font-size:18px;color:var(--text-2);line-height:1.6}
.cta .actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.cta .persp{display:none}
@media(min-width:1024px){.cta .persp{display:block;margin-right:-96px;transform:perspective(1600px) rotateY(-14deg) rotateX(3deg);transition:transform .6s var(--ease)}.cta .persp:hover{transform:perspective(1600px) rotateY(-8deg) rotateX(2deg)}}
.footer{border-top:1px solid var(--hairline);background:var(--bg-base)}
.footer .wrap{padding:64px 24px}
@media(min-width:768px){.footer .wrap{padding:80px 40px}}
.fcols{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
@media(min-width:768px){.fcols{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.fcols{grid-template-columns:repeat(6,1fr)}}
.fbrand{grid-column:span 2}
@media(min-width:768px){.fbrand{grid-column:span 3}}
@media(min-width:1024px){.fbrand{grid-column:span 1}}
.fbrand p{margin-top:16px;max-width:220px;font-size:14px;color:var(--text-2);line-height:1.5}
.socials{display:flex;gap:8px;margin-top:20px}
.socials a{width:36px;height:36px;border:1px solid var(--hairline);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:border-color .2s,transform .2s var(--ease)}
.socials a:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.socials img{width:16px;height:16px;opacity:.7;filter:brightness(0) invert(1);transition:opacity .2s}
.socials a:hover img{opacity:1}
.fcol h4{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.fcol ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.fcol a{font-size:14px;color:var(--text-2)}
.fcol a:hover{color:#fff}
.contact li{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--text-2);margin-top:12px}
.contact svg{width:16px;height:16px;color:var(--brand);flex:none;margin-top:2px}
.offices{margin-top:12px;font-size:12px;color:var(--text-3);line-height:1.5}
.badges{margin-top:56px;padding-top:32px;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.badges img{height:36px;width:auto;max-width:110px;object-fit:contain;opacity:.7;filter:brightness(0) invert(1);transition:opacity .2s}
.badges img:hover{opacity:1}
.badges a{display:inline-flex}
.copy{margin-top:32px;display:flex;flex-direction:column;gap:8px;justify-content:space-between;font-size:13px;color:var(--text-3)}
@media(min-width:768px){.copy{flex-direction:row;align-items:center}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-stage{opacity:1;transform:none;animation:none}
  .type-caret{display:none}
  *{animation:none!important}
}


/* =========================================================
   CONSISTENT PAGE GUTTERS + LIGHTWEIGHT MOBILE MOTION
   Every main content container uses exactly 20px on both sides.
   ========================================================= */
.wrap{
  width:100%;
  padding-left:20px !important;
  padding-right:20px !important;
}

/* Avoid double gutters: the inner .wrap owns horizontal spacing. */
.header{padding-left:0 !important;padding-right:0 !important}
.hero{padding-left:0 !important;padding-right:0 !important}

/* Keep all navigation variants on the same 20px alignment line. */
.mega .wrap{padding-left:20px !important;padding-right:20px !important}
.drawer .wrap{padding-left:20px !important;padding-right:20px !important}
.mini-nav .wrap{padding-left:20px !important;padding-right:20px !important}

/* Remove decorative desktop overflow so major visuals remain aligned. */
.hero .visual{margin-right:0 !important}
.cta .persp{margin-right:0 !important}

/* Images and cards must never exceed the aligned content area. */
.vis,.frame,.card,.svc,.tier,.tst-feat,.tst-card{max-width:100%}

@media(max-width:1023px){
  /* Simple, smooth reveal for phones and tablets: fade + slight upward motion. */
  .reveal,
  .reveal.from-left,
  .reveal.from-right{
    opacity:0;
    transform:translate3d(0,10px,0);
    transition-property:opacity,transform;
    transition-duration:.42s;
    transition-timing-function:cubic-bezier(.22,.75,.32,1);
    transition-delay:0s !important;
  }
  .reveal.in,
  .reveal.from-left.in,
  .reveal.from-right.in{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  /* Lighter hero entrance without long staggered movement. */
  .hero-stage{
    transform:translate3d(0,8px,0);
    animation-duration:.42s;
  }
  .hero-stage.s1{animation-delay:.02s}
  .hero-stage.s2{animation-delay:.06s}
  .hero-stage.s3{animation-delay:.10s}
  .hero-stage.s4{animation-delay:.14s}
  .hero-stage.s5{animation-delay:.18s}

  /* Stop continuous or blur-heavy effects that can stutter during scrolling. */
  .hero .mesh{
    animation:none !important;
    filter:none !important;
    opacity:.42;
  }
  .orbit .halo,
  .pill,
  .pill.p2 .live,
  .shot-chip,
  .badge::after{
    animation:none !important;
  }
  .brand-glow{filter:none}
  .tst-feat-wrap>.brand-glow{display:none}

  /* Solid translucent surfaces scroll more smoothly than live backdrop blur. */
  .header.scrolled,
  .mini-nav{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:rgba(10,14,26,.97);
  }
  .shot-chip{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  /* Keep floating visual details inside the same 20px content boundary. */
  .hero .phone{left:12px;bottom:12px}
  .pill.p1{right:12px}
  .shot-chip.br{right:10px;bottom:10px}
  .shot-chip.bl{left:10px;bottom:10px}

  /* Softer shadows reduce paint cost while retaining depth. */
  .frame{
    box-shadow:0 0 0 1px rgba(75,123,255,.10),0 18px 42px -30px rgba(0,0,0,.88);
  }
}

@media(hover:none) and (pointer:coarse){
  .btn:hover,
  .benefit:hover,
  .svc:hover,
  .value:hover,
  .card.tier:hover,
  .tst-card:hover,
  .socials a:hover,
  .node .inner:hover .ic{
    transform:none !important;
  }
  .svc:hover .img img{transform:none !important}
}



/* Syno Answers page — built on the exact homepage visual system */
.answers-page .hero{padding-bottom:86px}
.answers-page .hero .grid{grid-template-columns:44fr 56fr;gap:42px}
.answers-page .hero h1{font-size:48px}
.answers-page .hero .visual{margin-right:-76px}
.answers-page .hero .frame{transform:perspective(1200px) rotateY(-1.5deg)}
.answers-page .hero .shot img{object-position:left top}
.answers-page .answer-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:13px;background:rgba(13,18,32,.9);border:1px solid rgba(255,255,255,.13);box-shadow:0 20px 45px -20px rgba(0,0,0,.8);backdrop-filter:blur(8px);font-size:12px;font-weight:600}
.answers-page .answer-chip.top{right:-12px;top:26px}.answers-page .answer-chip.bottom{left:-18px;bottom:-18px}
.answers-page .answer-chip .live{width:8px;height:8px;border-radius:99px;background:#3ed598;box-shadow:0 0 0 5px rgba(62,213,152,.14)}
.answers-page .answer-chip .metric{font-family:var(--font-display);font-size:19px;color:#7ca0ff;font-weight:700}
.answers-page .answer-nav{margin-top:0}
.answers-page .answer-nav .row{justify-content:flex-start}
.answers-page .answer-nav a.active{color:var(--brand);border-bottom-color:var(--brand)}
.answers-page .answer-section[id]{scroll-margin-top:120px}
.answers-page .answer-section{position:relative;overflow:hidden}
.answers-page .answer-section>.wrap{padding-left:20px;padding-right:20px}
.answers-page .answer-head{max-width:720px;margin:0 auto;text-align:center}
.answers-page .answer-head h2{font-size:32px;margin-top:16px}
.answers-page .answer-head p{max-width:620px;margin:16px auto 0}
.answers-page .answer-facts{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.answers-page .answer-fact{padding:24px;min-height:220px}
.answers-page .answer-fact .num{font-family:var(--font-display);font-size:13px;color:var(--brand);font-weight:700;letter-spacing:.12em}
.answers-page .answer-fact .line{height:1px;margin:22px 0 38px;background:linear-gradient(90deg,var(--brand),transparent)}
.answers-page .answer-fact h3{font-size:18px}.answers-page .answer-fact p{margin-top:9px;color:var(--text-2);font-size:14px;line-height:1.55}
.answers-page .detail-grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.answers-page .detail-card{padding:26px;min-height:245px}
.answers-page .detail-card .ic{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(75,123,255,.15);color:var(--brand);font-family:var(--font-display);font-weight:700;font-size:12px}
.answers-page .detail-card h3{font-size:20px;margin-top:22px}.answers-page .detail-card p{color:var(--text-2);font-size:14px;line-height:1.6;margin-top:10px}
.answers-page .detail-card ul{list-style:none;margin-top:17px;display:grid;gap:9px}.answers-page .detail-card li{display:flex;gap:9px;color:var(--text-2);font-size:13px}
.answers-page .detail-card .tiny-tick{color:var(--brand)}
.answers-page .product-row .grid{grid-template-columns:42fr 58fr}
.answers-page .product-row.reverse .grid{grid-template-columns:58fr 42fr}
.answers-page .product-row .frame .shot{aspect-ratio:16/10}
.answers-page .product-row .frame img{object-position:left top}
.answers-page .coverage-shell{margin-top:56px;padding:7px}
.answers-page .coverage-shell .shot{aspect-ratio:1.5}
.answers-page .coverage-shell .shot img{object-position:center}
.answers-page .coverage-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:24px}
.answers-page .coverage-pills span{padding:8px 12px;border:1px solid var(--hairline);border-radius:99px;background:rgba(255,255,255,.035);color:var(--text-2);font-size:12px}
.answers-page .output-grid{margin-top:54px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.answers-page .output-card{padding:28px;min-height:260px}
.answers-page .output-card.featured{background:linear-gradient(145deg,rgba(75,123,255,.20),var(--bg-card));border-color:rgba(75,123,255,.35)}
.answers-page .file-badge{width:50px;height:50px;display:grid;place-items:center;border-radius:13px;background:rgba(75,123,255,.15);color:#7ca0ff;font-size:10px;font-weight:800;letter-spacing:.06em}
.answers-page .output-card h3{font-size:20px;margin-top:26px}.answers-page .output-card p{font-size:14px;line-height:1.6;color:var(--text-2);margin-top:10px}
.answers-page .output-card small{display:block;margin-top:22px;color:var(--brand);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.answers-page .answer-pricing{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:54px auto 0}
.answers-page .answer-price{padding:32px;min-height:420px}
.answers-page .answer-price.featured{background:linear-gradient(150deg,rgba(75,123,255,.23),var(--bg-card) 60%);border-color:rgba(75,123,255,.38)}
.answers-page .answer-price .label{color:var(--brand);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.answers-page .answer-price .price-row{display:flex;align-items:flex-end;gap:14px;margin-top:28px;padding-bottom:26px;border-bottom:1px solid var(--hairline)}
.answers-page .answer-price .price{font-family:var(--font-display);font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:.9}
.answers-page .answer-price .unit{font-size:11px;line-height:1.4;color:var(--text-2)}
.answers-page .answer-price .feats{margin-top:26px}.answers-page .answer-price .note{display:block;color:var(--text-3);font-size:11px;line-height:1.5;margin-top:28px}
.answers-page .single-testimonial{max-width:760px;margin:50px auto 0}
@media(min-width:768px){.answers-page .answer-head h2{font-size:44px}}
@media(max-width:1023px){.answers-page .hero .grid{grid-template-columns:1fr}.answers-page .hero .visual{margin-right:0}.answers-page .hero h1{font-size:44px}.answers-page .answer-facts{grid-template-columns:repeat(2,1fr)}.answers-page .product-row .grid,.answers-page .product-row.reverse .grid{grid-template-columns:1fr}.answers-page .product-row.reverse .visual-order{order:2}.answers-page .product-row.reverse .copy-order{order:1}}
@media(max-width:767px){.answers-page .hero h1{font-size:38px}.answers-page .answer-chip{display:none}.answers-page .answer-facts,.answers-page .detail-grid,.answers-page .output-grid,.answers-page .answer-pricing{grid-template-columns:1fr}.answers-page .answer-fact{min-height:190px}.answers-page .coverage-shell .shot{aspect-ratio:1.5}.answers-page .answer-price{min-height:390px}.answers-page .answer-nav .row{justify-content:flex-start}}

/* Syno Answers — centered "Start your study" closing CTA */
.answers-page .answers-cta{padding:96px 0}
@media(min-width:768px){.answers-page .answers-cta{padding:128px 0}}
.answers-page .answers-cta .wash{width:100%;background:radial-gradient(60% 90% at 50% 0%,rgba(75,123,255,.28),rgba(10,14,26,0) 70%)}
.answers-page .answers-cta .cta-center{position:relative;max-width:720px;margin:0 auto;text-align:center;padding:0 8px}
.answers-page .answers-cta .cta-center .eyebrow{justify-content:center}
.answers-page .answers-cta .cta-center h2{margin-top:16px}
.answers-page .answers-cta .cta-center p{margin:20px auto 0;max-width:560px}
.answers-page .answers-cta .cta-center .actions{margin-top:32px;justify-content:center}

/* =========================================================
   SYNO PANEL — panel-specific pieces on the shared system
   ========================================================= */

/* Four-up value grid (Premium Panel Network, Audience integrations, …) */
.product-page #monetise .value-grid,
.product-page .value-grid.cols-4{grid-template-columns:1fr}
@media(min-width:640px){.product-page #monetise .value-grid,.product-page .value-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.product-page #monetise .value-grid,.product-page .value-grid.cols-4{grid-template-columns:repeat(4,1fr)}}

/* ---------------------------------------------------------
   Pinned "panel app" scroll experience (#engage)
   Default = clean stacked blocks (mobile / no-JS / reduced motion).
   JS adds .appscroll-on for the pinned crossfade on desktop.
   No overflow:hidden on ancestors of the sticky stage (would break it).
   --------------------------------------------------------- */
.product-page .appscroll{position:relative;background:var(--bg-raised);padding:96px 0}
@media(min-width:768px){.product-page .appscroll{padding:128px 0}}
.product-page .appscroll[id]{scroll-margin-top:120px}
.product-page .appscroll-track{position:relative}
.product-page .appscroll-stage{padding:0 20px}
.product-page .appscroll-head{max-width:720px;margin:0 auto;text-align:center}
.product-page .appscroll-head h2{font-size:32px;margin-top:16px}
@media(min-width:768px){.product-page .appscroll-head h2{font-size:44px}}
/* Tabs — interactive on every layout (buttons) */
.product-page .appscroll-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px}
.product-page .appscroll-dot{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--hairline);border-radius:99px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-2);background:rgba(255,255,255,.03);cursor:pointer;transition:.25s var(--ease)}
.product-page .appscroll-dot i{font-style:normal;font-family:var(--font-display);font-size:11px;opacity:.55}
.product-page .appscroll-dot:hover{color:#fff;border-color:rgba(255,255,255,.25)}
.product-page .appscroll-dot.is-active{color:#fff;border-color:rgba(75,123,255,.5);background:rgba(75,123,255,.15)}
.product-page .appscroll-dot.is-active i{color:var(--brand);opacity:1}
/* Persistent frame — the chrome and frame never move or fade.
   Shot keeps a fixed ratio matching the screenshots (~1.47:1) so its shape
   never changes with viewport/zoom, and `contain` shows each screen fully. */
.product-page .appscroll-frame .shot{position:relative;aspect-ratio:var(--shot-ratio, 1.6);overflow:hidden;background:#fff}
.product-page .appscroll-frame .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .5s var(--ease)}
.product-page .appscroll-frame .shot img.is-active{opacity:1}
/* Copy — one visible at a time */
.product-page .appscroll-copy{display:none}
.product-page .appscroll-copy.is-active{display:block}
.product-page .appscroll-copy h3{font-size:26px;margin-top:12px}
@media(min-width:768px){.product-page .appscroll-copy h3{font-size:32px}}
.product-page .appscroll-copy p{margin-top:16px;color:var(--text-2);font-size:16px;line-height:1.6;max-width:520px}
.product-page .appscroll-copy .feats{margin-top:22px}
/* Static / mobile layout: image on top, active copy below */
.product-page .appscroll-body{max-width:var(--max);margin:40px auto 0;display:flex;flex-direction:column;gap:32px}
.product-page .appscroll-frame{order:-1}

/* ---------------- pinned mode (desktop, JS on) ---------------- */
.product-page .appscroll-on{padding:0}
.product-page .appscroll-on .appscroll-track{height:calc(var(--steps, 3) * 100vh)}
.product-page .appscroll-on .appscroll-stage{position:sticky;top:120px;height:calc(100vh - 120px);min-height:560px;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px, 3.5vh, 40px);overflow:hidden;padding-top:24px;padding-bottom:24px}
.product-page .appscroll-on .appscroll-head{flex:none}
/* Two-up: copy left, persistent frame right */
.product-page .appscroll-on .appscroll-body{flex:0 0 auto;min-height:0;width:100%;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
/* Copies: stacked in place; only the text crossfades + slides */
.product-page .appscroll-on .appscroll-copies{position:relative;min-width:0;height:100%}
.product-page .appscroll-on .appscroll-copy{display:flex;flex-direction:column;justify-content:center;position:absolute;inset:0;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.product-page .appscroll-on .appscroll-copy.is-active{opacity:1;transform:none;pointer-events:auto}
.product-page .appscroll-on .appscroll-copy p{max-width:460px}
/* Frame stays fixed in the right column; images swap inside it. Its width is
   the smaller of the column and what the fixed ratio allows in the available
   height — so the shape is constant and it never collides with the head/tabs. */
.product-page .appscroll-on .appscroll-frame{order:0;min-width:0;align-self:center;width:min(100%, calc((100vh - 410px) * var(--shot-ratio, 1.5)));margin-left:auto;margin-right:auto}
@media(prefers-reduced-motion:reduce){
  .product-page .appscroll-on .appscroll-copy{transform:none;transition:opacity .2s}
  .product-page .appscroll-frame .shot img{transition:opacity .2s}
}

/* =========================================================
   CAREER — listing rows + job-detail article
   ========================================================= */
/* Listing rows */
.career-page .job-list{max-width:760px;margin:52px auto 0;display:flex;flex-direction:column;gap:16px}
.career-page .job-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:inset 0 1px 0 var(--inset-top);color:var(--ink);transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s}
.career-page .job-row:hover{border-color:rgba(75,123,255,.5);transform:translateY(-2px);background:var(--bg-raised)}
.career-page .job-row .meta-line{min-width:0}
.career-page .job-row .role{font-family:var(--font-display);font-weight:600;font-size:17px}
.career-page .job-row .sep{margin:0 12px;color:var(--brand)}
.career-page .job-row .loc{color:var(--text-2);font-weight:500;font-size:15px}
.career-page .job-row .arrow{flex:none;width:42px;height:42px;border-radius:99px;border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;color:var(--brand);transition:.25s var(--ease)}
.career-page .job-row:hover .arrow{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateX(4px)}
.career-page .job-row .arrow svg{width:18px;height:18px}
@media(max-width:520px){
  .career-page .job-row{padding:18px 18px}
  .career-page .job-row .meta-line{display:flex;flex-direction:column;gap:3px}
  .career-page .job-row .sep{display:none}
}
@media(hover:none) and (pointer:coarse){.career-page .job-row:hover{transform:none}}

/* Job-detail header */
.career-page .job-head{max-width:820px;margin:0 auto;text-align:center}
.career-page .back-link{display:flex;width:fit-content;align-items:center;gap:8px;color:var(--text-2);font-size:14px;font-weight:600;margin:0 0 28px}
.career-page .back-link:hover{color:#fff}
.career-page .back-link svg{width:16px;height:16px}
.career-page .job-head h1{font-size:38px;line-height:1.06;letter-spacing:-.02em}
@media(min-width:768px){.career-page .job-head h1{font-size:50px}}
.career-page .job-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.career-page .job-meta span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--hairline);border-radius:99px;background:rgba(255,255,255,.03);color:var(--text-2);font-size:13px;font-weight:600}
.career-page .job-meta svg{width:14px;height:14px;color:var(--brand);flex:none}

/* Job-detail prose */
.career-page .job-prose{max-width:760px;margin:44px auto 0}
.career-page .job-prose>p:first-child{font-size:18px;color:var(--text-2);line-height:1.7}
.career-page .job-prose h2{font-size:22px;margin-top:44px}
.career-page .job-prose p{color:var(--text-2);font-size:16px;line-height:1.7;margin-top:16px}
.career-page .job-prose ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px}
.career-page .job-prose ul ul{margin:12px 0 0 26px}
.career-page .job-prose li{position:relative;padding-left:30px;color:var(--text-2);font-size:15px;line-height:1.6}
.career-page .job-prose li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:99px;background:rgba(75,123,255,.15)}
.career-page .job-prose li::after{content:"";position:absolute;left:6px;top:7px;width:6px;height:3px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.career-page .job-prose strong{color:var(--ink);font-weight:600}
.career-page .job-prose a{color:var(--brand)}
.career-page .job-prose a:hover{text-decoration:underline}
.career-page .job-prose .fine{font-size:13px;color:var(--text-3);font-style:italic;line-height:1.6;margin-top:14px}
.career-page .job-apply{max-width:760px;margin:48px auto 0;padding:32px;text-align:center;border-radius:var(--radius-card)}
.career-page .job-apply h2{font-size:24px}
.career-page .job-apply p{color:var(--text-2);margin:12px auto 0;max-width:520px}
.career-page .job-apply .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}

/* =========================================================
   SYNO SURVEY — screenshot galleries + big showcase
   ========================================================= */
.survey-page .survey-showcase{max-width:1000px;margin:56px auto 0}
.survey-page .survey-showcase .shot{aspect-ratio:1.6}
.survey-page .survey-showcase .frame img{object-position:top center}
.survey-page .shot-gallery{margin-top:52px;display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:860px){
  .survey-page .shot-gallery.cols-3{grid-template-columns:repeat(3,1fr)}
  .survey-page .shot-gallery.cols-2{grid-template-columns:repeat(2,1fr);max-width:900px;margin-left:auto;margin-right:auto}
}
.survey-page .shot-gallery figure{min-width:0;display:flex;flex-direction:column}
.survey-page .shot-gallery .frame .shot{aspect-ratio:1.6;overflow:hidden}
.survey-page .shot-gallery .frame img{object-position:top center}
.survey-page .shot-gallery figcaption{padding:20px 4px 0}
.survey-page .shot-gallery h3{font-size:18px;margin-top:8px}
.survey-page .shot-gallery p{margin-top:8px;color:var(--text-2);font-size:14px;line-height:1.55}

/* =========================================================
   CONTACT — regional contact cards
   ========================================================= */
.contact-page .contact-grid{margin-top:52px;display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:600px){.contact-page .contact-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.contact-page .contact-grid{grid-template-columns:repeat(3,1fr)}}
.contact-page .contact-card{padding:26px;display:flex;flex-direction:column;transition:transform .25s var(--ease),border-color .25s}
.contact-page .contact-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.contact-page .contact-card .chead{display:flex;align-items:center;gap:16px}
.contact-page .contact-card .avatar{width:64px;height:64px;border-radius:99px;overflow:hidden;flex:none;border:1px solid var(--hairline);background:var(--bg-raised)}
.contact-page .contact-card .avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}
.contact-page .contact-card .who{display:flex;flex-direction:column;min-width:0}
.contact-page .contact-card .name{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.2}
.contact-page .contact-card .city{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:13px;font-weight:600;color:var(--text-2)}
.contact-page .contact-card .city img{width:18px;height:auto;border-radius:2px}
.contact-page .contact-card ul{list-style:none;margin-top:22px;padding-top:22px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:12px}
.contact-page .contact-card li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--text-2);line-height:1.45}
.contact-page .contact-card li svg{width:16px;height:16px;color:var(--brand);flex:none;margin-top:2px}
.contact-page .contact-card a{color:var(--text-2);transition:color .2s}
.contact-page .contact-card a:hover{color:#fff}
@media(hover:none) and (pointer:coarse){.contact-page .contact-card:hover{transform:none}}

/* =========================================================
   TESTIMONIALS — quote cards
   ========================================================= */
.testimonials-page .tstm-grid{margin-top:52px;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.testimonials-page .tstm-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.testimonials-page .tstm-grid{grid-template-columns:repeat(3,1fr)}}
.testimonials-page .tstm-card{padding:28px;display:flex;flex-direction:column;transition:transform .25s var(--ease),border-color .25s}
.testimonials-page .tstm-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.testimonials-page .tstm-card .q{width:34px;height:34px;color:var(--brand);flex:none}
.testimonials-page .tstm-card blockquote{margin-top:18px;font-size:15px;line-height:1.65;color:var(--ink);flex:1}
.testimonials-page .tstm-card figcaption{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:22px;border-top:1px solid var(--hairline)}
.testimonials-page .tstm-card .avatar{width:50px;height:50px;border-radius:99px;overflow:hidden;flex:none;border:1px solid var(--hairline);background:var(--bg-raised)}
.testimonials-page .tstm-card .avatar img{width:100%;height:100%;object-fit:cover}
.testimonials-page .tstm-card .n{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)}
.testimonials-page .tstm-card .r{display:block;font-size:13px;color:var(--text-2);margin-top:3px}
@media(hover:none) and (pointer:coarse){.testimonials-page .tstm-card:hover{transform:none}}

/* =========================================================
   PARTNERS — partner cards with logo plates
   ========================================================= */
.partners-page .partner-grid{margin-top:52px;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.partners-page .partner-grid{grid-template-columns:repeat(2,1fr)}}
.partners-page .partner-card{padding:28px;display:flex;flex-direction:column;transition:transform .25s var(--ease),border-color .25s}
.partners-page .partner-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.partners-page .logo-plate{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;width:120px;height:80px;background:rgba(255,255,255,.05);border:1px solid var(--hairline);border-radius:12px}
.partners-page .logo-plate img{max-height:60px;max-width:96px;width:auto;object-fit:contain}
.partners-page .partner-card h3{font-size:20px;margin-top:24px}
.partners-page .partner-card p{margin-top:12px;color:var(--text-2);font-size:15px;line-height:1.6}
.partners-page .partner-card .plink{margin-top:16px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;font-size:14px;transition:gap .2s var(--ease)}
.partners-page .partner-card .plink:hover{gap:10px}
.partners-page .partner-card .plink svg{width:15px;height:15px}
@media(hover:none) and (pointer:coarse){.partners-page .partner-card:hover{transform:none}}

/* =========================================================
   EU PROJECTS — single project detail
   ========================================================= */
.eu-page .eu-visual{max-width:900px;margin:0 auto}
.eu-page .eu-visual .shot{aspect-ratio:16/9}
.eu-page .eu-visual .frame img{object-position:center}
.eu-page .eu-body{max-width:760px;margin:44px auto 0}
.eu-page .eu-body p{color:var(--text-2);font-size:16px;line-height:1.7;margin-top:18px}
.eu-page .eu-body h3{font-size:20px;margin-top:36px}
.eu-page .eu-body strong{color:var(--ink);font-weight:600}
.eu-page .eu-body a{color:var(--brand)}
.eu-page .eu-body a:hover{text-decoration:underline}

/* Shared header lead spacing + EU hero image gap */
.pricing-head p{max-width:640px;margin:18px auto 0;color:var(--text-2);font-size:17px;line-height:1.6}
.eu-page .eu-visual{margin-top:48px}
@media(min-width:768px){.eu-page .eu-visual{margin-top:56px}}

/* =========================================================
   LEGAL & QUALITY — hub + verbatim legal document prose
   ========================================================= */
/* Hub */
.legal-page .legal-groups{margin-top:52px;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.legal-page .legal-groups{grid-template-columns:repeat(3,1fr);align-items:start}}
.legal-page .legal-col{padding:26px}
.legal-page .legal-col h3{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);font-weight:700}
.legal-page .legal-col ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.legal-page .legal-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--hairline);border-radius:12px;background:rgba(255,255,255,.02);color:var(--ink);font-weight:600;font-size:15px;transition:border-color .2s var(--ease),background .2s,transform .2s var(--ease)}
.legal-page .legal-link:hover{border-color:rgba(75,123,255,.5);background:rgba(75,123,255,.08);transform:translateX(2px)}
.legal-page .legal-link svg{width:16px;height:16px;color:var(--brand);flex:none}
@media(hover:none) and (pointer:coarse){.legal-page .legal-link:hover{transform:none}}
/* Inner page back link */
.legal-page .legal-back,.california-page .legal-back{display:flex;width:fit-content;align-items:center;gap:8px;color:var(--text-2);font-size:14px;font-weight:600;margin:0 0 28px}
.legal-page .legal-back:hover,.california-page .legal-back:hover{color:#fff}
.legal-page .legal-back svg,.california-page .legal-back svg{width:16px;height:16px}
/* Inner prose — neutralize legacy bootstrap grid, keep text exact but readable */
.legal-page .legal-prose{max-width:820px;margin:0 auto}
.legal-page .legal-prose .container{width:auto;max-width:none;margin:0;padding:0}
.legal-page .legal-prose .row{display:block;margin:0}
.legal-page .legal-prose [class*="col-"]{width:100%;max-width:100%;flex:none;padding:0}
.legal-page .legal-prose .scroll-spy-desktop,.legal-page .legal-prose #navbar-example3,.legal-page .legal-prose .scroll-spy-mobile,.legal-page .legal-prose .scrollspy-mobile{display:none}
.legal-page .legal-prose h1{font-size:32px;line-height:1.12}
@media(min-width:768px){.legal-page .legal-prose h1{font-size:40px}}
.legal-page .legal-prose h2{font-size:24px;margin-top:40px}
.legal-page .legal-prose h3{font-size:19px;margin-top:30px}
.legal-page .legal-prose h4,.legal-page .legal-prose h5,.legal-page .legal-prose h6{font-size:16px;margin-top:24px}
.legal-page .legal-prose p{color:var(--text-2);font-size:15px;line-height:1.75;margin-top:14px}
.legal-page .legal-prose ul,.legal-page .legal-prose ol{color:var(--text-2);font-size:15px;line-height:1.7;margin-top:14px;padding-left:24px}
.legal-page .legal-prose li{margin-top:6px}
.legal-page .legal-prose a{color:var(--brand)}
.legal-page .legal-prose a:hover{text-decoration:underline}
.legal-page .legal-prose strong,.legal-page .legal-prose b{color:var(--ink)}
.legal-page .legal-prose table{width:100%;border-collapse:collapse;margin-top:20px;font-size:14px;display:block;overflow-x:auto}
.legal-page .legal-prose th,.legal-page .legal-prose td{border:1px solid var(--hairline);padding:10px 12px;text-align:left;color:var(--text-2);vertical-align:top}
.legal-page .legal-prose th{color:var(--ink);background:rgba(255,255,255,.04)}
.legal-page .legal-prose hr{border:0;border-top:1px solid var(--hairline);margin:28px 0}

/* Legal — two-column layout with sticky auto TOC */
.legal-page .legal-layout{display:block}
.legal-page .legal-prose :is(h1,h2,h3,h4,h5,h6){scroll-margin-top:100px}
.legal-page .legal-toc{border:1px solid var(--hairline);border-radius:14px;background:rgba(255,255,255,.02);margin:0 0 28px;overflow:hidden}
.legal-page .legal-toc-title{cursor:pointer;list-style:none;padding:14px 18px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);display:flex;align-items:center;justify-content:space-between}
.legal-page .legal-toc-title::-webkit-details-marker{display:none}
.legal-page .legal-toc-title::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease);opacity:.7}
.legal-page .legal-toc[open] .legal-toc-title::after{transform:rotate(-135deg)}
.legal-page #legalToc{display:flex;flex-direction:column;padding:6px 8px 12px;gap:2px}
.legal-page .legal-toc-link{display:block;padding:8px 12px;border-radius:8px;color:var(--text-2);font-size:14px;line-height:1.4;border-left:2px solid transparent;transition:color .15s,background .15s,border-color .15s}
.legal-page .legal-toc-link:hover{color:#fff;background:rgba(255,255,255,.04)}
.legal-page .legal-toc-link.is-top{font-weight:700;color:var(--ink)}
.legal-page .legal-toc-link.active{color:#fff;background:rgba(75,123,255,.12);border-left-color:var(--brand)}
@media(min-width:1024px){
  .legal-page .legal-layout--toc{display:grid;grid-template-columns:264px minmax(0,1fr);gap:56px;align-items:start}
  .legal-page .legal-layout--toc .legal-prose{max-width:none;margin:0}
  .legal-page .legal-toc{position:sticky;top:92px;max-height:calc(100vh - 120px);display:flex;flex-direction:column;margin:0}
  .legal-page .legal-toc-title{cursor:default;pointer-events:none}
  .legal-page .legal-toc-title::after{display:none}
  .legal-page #legalToc{overflow:auto}
}

/* Legal — ESOMAR accordion (verbatim Bootstrap markup, re-themed for dark) */
.legal-page .first-questions-block{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:8px}
.legal-page h5.esomar{font-size:20px;color:var(--ink);font-weight:700;margin-top:44px}
.legal-page h5.esomar.first-h{margin-top:0}
.legal-page .esomar-button{cursor:pointer;border:1px solid rgba(75,123,255,.5);background:rgba(75,123,255,.1);color:#fff;font-weight:600;font-size:14px;padding:10px 18px;border-radius:10px;transition:background .2s,border-color .2s}
.legal-page .esomar-button:hover{background:rgba(75,123,255,.2);border-color:var(--brand)}
.legal-page .accordion{margin-top:16px}
.legal-page .accordion-item{border:1px solid var(--hairline);border-radius:12px;margin-top:10px;overflow:hidden;background:rgba(255,255,255,.02);transition:border-color .2s}
.legal-page .accordion-item:hover{border-color:rgba(255,255,255,.14)}
.legal-page .legal-prose h2.accordion-header{margin:0;font-size:inherit}
.legal-page .accordion-button{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--ink);font-weight:600;font-size:15.5px;line-height:1.55;padding:18px 54px 18px 20px;position:relative;cursor:pointer}
.legal-page .accordion-button::after{content:"";position:absolute;right:22px;top:24px;width:9px;height:9px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:transform .2s var(--ease)}
.legal-page .accordion-button:not(.collapsed)::after{transform:rotate(-135deg)}
.legal-page .accordion-button:not(.collapsed){color:#fff}
.legal-page .accordion-collapse.collapse{display:none}
.legal-page .accordion-body{padding:2px 20px 20px;color:var(--text-2);font-size:15px;line-height:1.7}
.legal-page .accordion-body p{margin-top:0}
.legal-page .accordion-body ul{margin-top:10px;padding-left:22px}
.legal-page .accordion-body a{color:var(--brand)}
.legal-page .accordion-body a:hover{text-decoration:underline}

/* =========================================================
   CUSTOMERS — success stories (case-study cards)
   ========================================================= */
.customers-page .cust-featured{display:grid;grid-template-columns:1fr;overflow:hidden;margin-top:44px;transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.customers-page .cust-featured:hover{border-color:rgba(75,123,255,.5);transform:translateY(-3px)}
.customers-page .cust-featured-media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--bg-raised)}
.customers-page .cust-featured-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.customers-page .cust-featured:hover .cust-featured-media img{transform:scale(1.04)}
.customers-page .cust-featured-body{padding:30px;display:flex;flex-direction:column;gap:14px}
.customers-page .cust-featured-body h3{font-size:24px;line-height:1.2;color:var(--ink)}
.customers-page .cust-featured-body p{color:var(--text-2);font-size:15px;line-height:1.65}
@media(min-width:860px){
  .customers-page .cust-featured{grid-template-columns:1.15fr 1fr;align-items:stretch}
  .customers-page .cust-featured-media{aspect-ratio:auto;min-height:340px}
  .customers-page .cust-featured-body{padding:40px;justify-content:center}
  .customers-page .cust-featured-body h3{font-size:28px}
}
/* Grid of remaining stories */
.customers-page .cust-grid{margin-top:24px;display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.customers-page .cust-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.customers-page .cust-grid{grid-template-columns:repeat(3,1fr)}}
.customers-page .cust-card{display:flex;flex-direction:column;overflow:hidden;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.customers-page .cust-card:hover{border-color:rgba(75,123,255,.5);transform:translateY(-4px)}
.customers-page .cust-card-media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--bg-raised)}
.customers-page .cust-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.customers-page .cust-card:hover .cust-card-media img{transform:scale(1.05)}
.customers-page .cust-card-body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.customers-page .cust-card-body h4{font-size:17px;line-height:1.35;color:var(--ink);margin-bottom:2px}
.customers-page .cust-card .cust-date{margin-top:auto}
/* Shared bits */
.customers-page .cust-chip{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:rgba(75,123,255,.1);border:1px solid rgba(75,123,255,.28);padding:5px 11px;border-radius:999px}
.customers-page .cust-date{display:inline-flex;align-items:center;gap:7px;color:var(--text-3);font-size:13px;font-weight:500}
.customers-page .cust-date svg{width:15px;height:15px;opacity:.8}
.customers-page .cust-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.customers-page .cust-readmore{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:600;font-size:14px}
.customers-page .cust-readmore svg{width:16px;height:16px;color:var(--brand);transition:transform .2s var(--ease)}
.customers-page .cust-featured:hover .cust-readmore svg{transform:translateX(4px)}

/* =========================================================
   NEWS & CASES — filterable article grid + load more
   ========================================================= */
.news-page .news-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:36px}
.news-page .news-filter{cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:var(--text-2);background:rgba(255,255,255,.03);border:1px solid var(--hairline);padding:9px 18px;border-radius:999px;transition:color .2s var(--ease),background .2s,border-color .2s}
.news-page .news-filter:hover{color:#fff;border-color:rgba(255,255,255,.2)}
.news-page .news-filter.is-active{color:#fff;background:rgba(75,123,255,.14);border-color:rgba(75,123,255,.55)}
.news-page .news-grid{margin-top:32px;display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.news-page .news-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.news-page .news-grid{grid-template-columns:repeat(3,1fr)}}
.news-page .news-card{display:flex;flex-direction:column;overflow:hidden;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.news-page .news-card:hover{border-color:rgba(75,123,255,.5);transform:translateY(-4px)}
.news-page .news-card-media{position:relative;overflow:hidden;aspect-ratio:18/10;background:var(--bg-raised)}
.news-page .news-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.news-page .news-card:hover .news-card-media img{transform:scale(1.05)}
.news-page .news-chip{position:absolute;top:12px;left:12px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(10,12,20,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);padding:5px 10px;border-radius:999px}
.news-page .news-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.news-page .news-card-body h4{font-size:16.5px;line-height:1.4;color:var(--ink)}
.news-page .news-date{display:inline-flex;align-items:center;gap:7px;color:var(--text-3);font-size:13px;font-weight:500;margin-top:auto}
.news-page .news-date svg{width:15px;height:15px;opacity:.8}
.news-page .news-empty{text-align:center;color:var(--text-2);margin-top:40px;font-size:16px}
.news-page .news-more-wrap{display:flex;justify-content:center;margin-top:40px}
.news-page .news-more[hidden]{display:none}

/* =========================================================
   BRAND TRACKING — funnel diagram, extended add-ons, price card
   ========================================================= */
.bt-page .bt-metrics{margin-top:44px;display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
@media(min-width:960px){.bt-page .bt-metrics{grid-template-columns:1.05fr .95fr;gap:48px}}
/* Funnel */
.bt-page .bt-funnel{padding:28px;display:flex;flex-direction:column;gap:14px}
.bt-page .bt-funnel-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:4px}
.bt-page .bt-stage{position:relative;width:var(--w,100%);min-width:180px;padding:16px 20px;border-radius:12px;border:1px solid rgba(75,123,255,.28);background:linear-gradient(90deg,rgba(75,123,255,.20),rgba(75,123,255,.07));transition:transform .25s var(--ease),border-color .25s var(--ease)}
.bt-page .bt-stage:hover{border-color:rgba(75,123,255,.6);transform:translateX(3px)}
.bt-page .bt-stage-name{display:block;color:#fff;font-weight:700;font-size:16px;line-height:1.3}
.bt-page .bt-stage-note{display:block;margin-top:3px;color:var(--text-2);font-size:13px;line-height:1.45}
/* Funnel connector arrows */
.bt-page .bt-stage:not(:last-child)::after{content:"";position:absolute;left:26px;bottom:-11px;width:8px;height:8px;border-right:2px solid rgba(75,123,255,.55);border-bottom:2px solid rgba(75,123,255,.55);transform:rotate(45deg)}
/* Metric list + extended block */
.bt-page .bt-metrics-list h3{font-size:20px;color:var(--ink);margin-bottom:16px}
.bt-page .bt-extended{margin-top:28px;padding:22px;border:1px dashed var(--hairline);border-radius:14px;background:rgba(255,255,255,.02)}
.bt-page .bt-extended-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);background:rgba(75,123,255,.1);border:1px solid rgba(75,123,255,.28);padding:5px 11px;border-radius:999px}
.bt-page .bt-extended p{margin-top:12px;color:var(--text-2);font-size:15px;line-height:1.65}
.product-page .bt-chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.product-page .bt-chip{font-size:13px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--hairline);padding:7px 13px;border-radius:999px}
.product-page .bt-chip.is-more{color:var(--text-3);background:transparent;border-style:dashed}
/* Price card */
.product-page .bt-price{margin-top:40px;display:grid;grid-template-columns:1fr;overflow:hidden}
@media(min-width:820px){.product-page .bt-price{grid-template-columns:300px minmax(0,1fr)}}
.product-page .bt-price-figure{padding:34px;display:flex;flex-direction:column;justify-content:center;gap:4px;background:linear-gradient(160deg,rgba(75,123,255,.18),rgba(75,123,255,.05));border-bottom:1px solid var(--hairline)}
@media(min-width:820px){.product-page .bt-price-figure{border-bottom:0;border-right:1px solid var(--hairline)}}
.product-page .bt-price-from{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.product-page .bt-price-amount{font-family:var(--font-display);font-size:40px;line-height:1.05;color:#fff;font-weight:800}
.product-page .bt-price-unit{color:var(--text-2);font-size:14px}
.product-page .bt-price-body{padding:30px 34px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.product-page .bt-price-body p{color:var(--text-2);font-size:15px;line-height:1.7}

/* =========================================================
   GABOR GRANGER — demand/revenue curve diagram
   ========================================================= */
.gg-page .gg-metrics{margin-top:44px;display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
@media(min-width:960px){.gg-page .gg-metrics{grid-template-columns:1.1fr .9fr;gap:48px}}
.gg-page .gg-curve{padding:26px}
.gg-page .gg-curve-label{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.gg-page .gg-svg{width:100%;height:auto;display:block;margin-top:10px;overflow:visible}
.gg-page .gg-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;padding-top:16px;border-top:1px solid var(--hairline)}
.gg-page .gg-key{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-size:13.5px;font-weight:600}
.gg-page .gg-key i{width:18px;height:3px;border-radius:2px;flex:none}
.gg-page .gg-key i.is-rev{background:var(--brand)}
.gg-page .gg-key i.is-dem{background:linear-gradient(90deg,rgba(255,255,255,.55) 0 60%,transparent 60%),rgba(255,255,255,.2);background-size:9px 3px;background-repeat:repeat-x}
.gg-page .gg-curve-note{margin-top:12px;color:var(--text-3);font-size:12.5px;line-height:1.5}
.gg-page .gg-metrics-list h3{font-size:20px;color:var(--ink);margin-bottom:16px}
/* Two-up capability grid (the base grid goes to 3 columns, which would leave a hole) */
@media(min-width:900px){.gg-page .value-grid.cols-2,.product-page .gg-page .value-grid.cols-2{grid-template-columns:repeat(2,1fr)}}

/* Gabor Granger — balance the metrics columns, and breathe before the price CTA */
.gg-page .gg-metrics-list{padding:28px;display:flex;flex-direction:column;justify-content:center}
.gg-page .gg-metrics-list h3{margin-bottom:26px}
.gg-page .gg-metrics-list .feats{margin-top:0;gap:16px}
.gg-page .gg-metrics-list .feats li{font-size:15.5px}
@media(min-width:960px){
  .gg-page .gg-metrics{grid-template-columns:1.06fr .94fr;gap:32px;align-items:stretch}
}
/* The price CTA sat too close to the last bullet */
.product-page .bt-price-body > .btn{margin-top:12px}
/* The price card is a flex column with its own gap; drop the list's extra top margin */
.product-page .bt-price-body .feats{margin-top:0}

/* =========================================================
   MOODSCORE — three factors, 0-100 scale, video link
   ========================================================= */
.ms-page .ms-factors{margin-top:44px;display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch}
@media(min-width:900px){.ms-page .ms-factors{grid-template-columns:repeat(3,1fr)}}
.ms-page .ms-factor{padding:28px;display:flex;flex-direction:column;gap:14px}
.ms-page .ms-factor .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.12);border:1px solid rgba(75,123,255,.28);color:var(--brand);flex:none}
.ms-page .ms-factor .ic svg{width:22px;height:22px}
.ms-page .ms-factor h3{font-size:19px;color:var(--ink)}
.ms-page .ms-factor p{color:var(--text-2);font-size:15px;line-height:1.7}
/* Results: scale card + copy */
.ms-page .ms-results{margin-top:40px;display:grid;grid-template-columns:1fr;gap:28px;align-items:stretch}
@media(min-width:960px){.ms-page .ms-results{grid-template-columns:.95fr 1.05fr;gap:40px}}
.ms-page .ms-scale{padding:28px;display:flex;flex-direction:column}
.ms-page .ms-scale-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.ms-page .ms-scale-track{position:relative;height:14px;margin-top:22px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(75,123,255,.35) 55%,var(--brand))}
.ms-page .ms-scale-bench{position:absolute;top:-9px;left:62%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.ms-page .ms-scale-bench i{width:3px;height:32px;border-radius:2px;background:#fff;box-shadow:0 0 0 3px rgba(10,12,20,.55)}
.ms-page .ms-scale-bench::after{content:"Benchmark";position:absolute;top:36px;white-space:nowrap;font-size:12px;font-weight:700;color:#fff}
.ms-page .ms-scale-ends{display:flex;justify-content:space-between;margin-top:34px;color:var(--text-3);font-size:13px;font-weight:600}
.ms-page .ms-scale-note{margin-top:16px;color:var(--text-2);font-size:14px;line-height:1.6}
.ms-page .ms-scale .feats{margin-top:20px}
.ms-page .ms-results-copy h3{font-size:20px;color:var(--ink);margin-bottom:14px}
.ms-page .ms-results-copy p{color:var(--text-2);font-size:15px;line-height:1.75}
.ms-page .ms-access{margin-top:26px;padding:22px;border:1px dashed var(--hairline);border-radius:14px;background:rgba(255,255,255,.02)}
.ms-page .ms-access-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);background:rgba(75,123,255,.1);border:1px solid rgba(75,123,255,.28);padding:5px 11px;border-radius:999px}
.ms-page .ms-access p{margin-top:12px}
.ms-page .ms-access .bt-chips{margin-top:14px}
/* Price card actions: button + video link */
.ms-page .ms-price-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;margin-top:12px}
.ms-page .ms-video-link{display:inline-flex;align-items:center;gap:10px;color:var(--text-2);font-size:14.5px;font-weight:600;line-height:1.4}
.ms-page .ms-video-link:hover{color:#fff}
.ms-page .ms-play{width:30px;height:30px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.14);border:1px solid rgba(75,123,255,.35);color:var(--brand)}
.ms-page .ms-play svg{width:14px;height:14px;margin-left:1px}

/* =========================================================
   SYNO LIBRARY — search / analyze / action capability cards
   ========================================================= */
.lib-page .lib-caps{margin-top:44px;display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch}
@media(min-width:900px){.lib-page .lib-caps{grid-template-columns:repeat(3,1fr)}}
.lib-page .lib-cap{padding:28px;display:flex;flex-direction:column;gap:14px}
.lib-page .lib-cap .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.12);border:1px solid rgba(75,123,255,.28);color:var(--brand);flex:none}
.lib-page .lib-cap .ic svg{width:22px;height:22px}
.lib-page .lib-cap h3{font-size:19px;color:var(--ink)}
.lib-page .lib-cap p{color:var(--text-2);font-size:15px;line-height:1.7}
.lib-page .lib-cap .feats{margin-top:0}
.lib-page .lib-cap .feats li{align-items:flex-start;line-height:1.55}
.lib-page .lib-cap .feats .tick{margin-top:2px}

/* =========================================================
   VAN WESTENDORP — four price-sensitivity curves, roles grid
   ========================================================= */
.vw-page .vw-metrics{margin-top:44px;display:grid;grid-template-columns:1fr;gap:28px;align-items:stretch}
@media(min-width:1000px){.vw-page .vw-metrics{grid-template-columns:1.15fr .85fr;gap:32px}}
.vw-page .vw-chart{padding:26px;display:flex;flex-direction:column}
.vw-page .vw-chart-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.vw-page .vw-svg{width:100%;height:auto;display:block;margin-top:8px;overflow:visible}
.vw-page .vw-svg path[class^="vw-c"]{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vw-page .vw-svg .vw-c1{stroke:#4b7bff}
.vw-page .vw-svg .vw-c2{stroke:#a78bfa}
.vw-page .vw-svg .vw-c3{stroke:#f87171}
.vw-page .vw-svg .vw-c4{stroke:#34d399}
.vw-page .vw-legend{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:14px;padding-top:16px;border-top:1px solid var(--hairline)}
.vw-page .vw-key{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-size:13.5px;font-weight:600}
.vw-page .vw-key i{width:18px;height:3px;border-radius:2px;flex:none}
.vw-page .vw-key i.k1{background:#4b7bff}
.vw-page .vw-key i.k2{background:#a78bfa}
.vw-page .vw-key i.k3{background:#f87171}
.vw-page .vw-key i.k4{background:#34d399}
.vw-page .vw-chart-note{margin-top:12px;color:var(--text-3);font-size:12.5px;line-height:1.5}
/* Metric list card */
.vw-page .vw-metrics-list{padding:28px;display:flex;flex-direction:column;justify-content:center}
.vw-page .vw-metrics-list h3{font-size:19px;line-height:1.35;color:var(--ink);margin-bottom:24px}
.vw-page .vw-metrics-list .feats{margin-top:0;gap:14px}
.vw-page .vw-report-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline);color:var(--text-2);font-size:14.5px}
/* Who it's for */
.vw-page .vw-who{margin-top:44px;display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch}
@media(min-width:640px){.vw-page .vw-who{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.vw-page .vw-who{grid-template-columns:repeat(3,1fr)}}
.vw-page .vw-role{padding:24px;display:flex;flex-direction:column;gap:12px}
.vw-page .vw-role .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.12);border:1px solid rgba(75,123,255,.28);color:var(--brand);flex:none}
.vw-page .vw-role .ic svg{width:21px;height:21px}
.vw-page .vw-role h3{font-size:17px;line-height:1.3;color:var(--ink)}
.vw-page .vw-role p{color:var(--text-2);font-size:14.5px;line-height:1.6}
/* The Who heading is a full sentence — keep it from stretching too wide */
.vw-page #who .answer-head h2{font-size:26px;line-height:1.25}
@media(min-width:768px){.vw-page #who .answer-head h2{font-size:30px}}
/* Five role cards: centre the short last row instead of leaving a hole */
@media(min-width:640px) and (max-width:999px){
  .vw-page .vw-who{grid-template-columns:repeat(4,1fr)}
  .vw-page .vw-role{grid-column:span 2}
  .vw-page .vw-role:nth-child(5){grid-column:2 / 4}
}
@media(min-width:1000px){
  .vw-page .vw-who{grid-template-columns:repeat(6,1fr)}
  .vw-page .vw-role{grid-column:span 2}
  .vw-page .vw-role:nth-child(4){grid-column:2 / 4}
  .vw-page .vw-role:nth-child(5){grid-column:4 / 6}
}

/* =========================================================
   ACADEMIC RESEARCH — partner/logos split, help cards, projects
   ========================================================= */
.ac-page .ac-partner,.ac-page .ac-security{display:grid;grid-template-columns:1fr;gap:28px;align-items:stretch}
@media(min-width:960px){
  .ac-page .ac-partner{grid-template-columns:1.15fr .85fr;gap:48px}
  .ac-page .ac-security{grid-template-columns:1.15fr .85fr;gap:48px}
}
.ac-page .ac-partner-copy p,.ac-page .ac-security-copy p{color:var(--text-2);font-size:15.5px;line-height:1.75;margin-top:16px}
/* Logo plates: the university marks are white PNGs, so they need a dark plate */
.ac-page .ac-unis,.ac-page .ac-badges{padding:26px;display:flex;flex-direction:column;justify-content:center}
.ac-page .ac-unis-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.ac-page .ac-unis-grid{margin-top:20px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ac-page .ac-unis-grid a{display:flex;align-items:center;justify-content:center;min-height:92px;padding:16px;border:1px solid var(--hairline);border-radius:14px;background:rgba(255,255,255,.05);transition:border-color .2s var(--ease),background .2s,transform .2s var(--ease)}
.ac-page .ac-unis-grid a:hover{border-color:rgba(75,123,255,.5);background:rgba(75,123,255,.09);transform:translateY(-2px)}
.ac-page .ac-unis-grid img{max-height:52px;max-width:100%;width:auto;object-fit:contain}
.ac-page .ac-badges-grid{margin-top:20px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.ac-page .ac-badges-grid img{height:64px;width:auto;object-fit:contain;padding:10px 14px;border:1px solid var(--hairline);border-radius:14px;background:rgba(255,255,255,.05)}
/* How we help */
.ac-page .ac-help{margin-top:44px;display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch}
@media(min-width:900px){.ac-page .ac-help{grid-template-columns:repeat(3,1fr)}}
.ac-page .ac-help-card{padding:28px;display:flex;flex-direction:column;gap:14px}
.ac-page .ac-help-card .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.12);border:1px solid rgba(75,123,255,.28);color:var(--brand);flex:none}
.ac-page .ac-help-card .ic svg{width:22px;height:22px}
.ac-page .ac-help-card h3{font-size:18px;line-height:1.35;color:var(--ink)}
.ac-page .ac-help-card p{color:var(--text-2);font-size:15px;line-height:1.7}
/* Recent projects */
.ac-page .ac-projects{margin-top:40px;padding:32px}
.ac-page .ac-projects h3{font-size:19px;line-height:1.35;color:var(--ink)}
.ac-page .ac-project-list{list-style:none;margin-top:22px;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:820px){.ac-page .ac-project-list{grid-template-columns:repeat(2,1fr);gap:16px 28px}}
.ac-page .ac-project-list li{display:flex;align-items:flex-start;gap:13px;padding:16px 18px;border:1px solid var(--hairline);border-radius:12px;background:rgba(255,255,255,.02);color:var(--text-2);font-size:15px;line-height:1.6}
.ac-page .ac-project-ic{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.12);border:1px solid rgba(75,123,255,.28);color:var(--brand)}
.ac-page .ac-project-ic svg{width:16px;height:16px}

/* =========================================================
   ADVERTISING TARGETING — media tiles, outcomes, person card
   ========================================================= */
.at-page .at-media{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(min-width:820px){.at-page .at-media{grid-template-columns:repeat(4,1fr)}}
.at-page .at-medium{padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.at-page .at-medium:hover{border-color:rgba(75,123,255,.5);transform:translateY(-3px)}
.at-page .at-medium .ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.12);border:1px solid rgba(75,123,255,.28);color:var(--brand);flex:none}
.at-page .at-medium .ic svg{width:24px;height:24px}
.at-page .at-medium h3{font-size:16.5px;color:var(--ink)}
/* Outcomes strip */
.at-page .at-outcomes{margin-top:36px;padding:26px;border:1px dashed var(--hairline);border-radius:16px;background:rgba(255,255,255,.02)}
.at-page .at-outcomes-label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.at-page .at-outcome-row{margin-top:20px;display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:820px){.at-page .at-outcome-row{grid-template-columns:repeat(3,1fr);gap:28px}}
.at-page .at-outcome{display:flex;align-items:flex-start;gap:14px}
.at-page .at-outcome .ic{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.12);border:1px solid rgba(75,123,255,.28);color:var(--brand)}
.at-page .at-outcome .ic svg{width:19px;height:19px}
.at-page .at-outcome h4{font-size:15.5px;color:var(--ink)}
.at-page .at-outcome p{margin-top:4px;color:var(--text-2);font-size:14px;line-height:1.55}
/* Feature cards */
.at-page .at-features{margin-top:44px;display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch}
@media(min-width:900px){.at-page .at-features{grid-template-columns:repeat(3,1fr)}}
.at-page .at-feature{padding:28px;display:flex;flex-direction:column;gap:14px}
.at-page .at-feature .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.12);border:1px solid rgba(75,123,255,.28);color:var(--brand);flex:none}
.at-page .at-feature .ic svg{width:22px;height:22px}
.at-page .at-feature h3{font-size:18px;color:var(--ink)}
.at-page .at-feature p{color:var(--text-2);font-size:15px;line-height:1.7}
.at-page .at-related{margin-top:28px;text-align:center;color:var(--text-2);font-size:15px}
.at-page .at-related a{color:var(--brand);font-weight:600}
.at-page .at-related a:hover{text-decoration:underline}
/* Person contact card */
.at-page .at-person{margin-top:40px;margin-left:auto;margin-right:auto;max-width:520px;padding:28px;display:flex;align-items:center;gap:22px}
.at-page .at-person-photo{width:96px;height:96px;border-radius:999px;object-fit:cover;flex:none;border:1px solid var(--hairline)}
.at-page .at-person-body h3{font-size:20px;color:var(--ink)}
.at-page .at-person-mail{display:inline-flex;align-items:center;gap:9px;margin-top:8px;color:var(--brand);font-weight:600;font-size:15px}
.at-page .at-person-mail:hover{text-decoration:underline}
.at-page .at-person-mail svg{width:17px;height:17px}
@media(max-width:559px){.at-page .at-person{flex-direction:column;text-align:center;gap:16px}}

/* =========================================================
   EYE-TRACKING SURVEYS — heat map diagram, tech notes, compare
   ========================================================= */
.et-page .et-lede{max-width:820px;margin:26px auto 0;text-align:center;color:var(--text-2);font-size:15.5px;line-height:1.75}
/* Heat map + insight list */
.et-page .et-shows{margin-top:44px;display:grid;grid-template-columns:1fr;gap:28px;align-items:stretch}
@media(min-width:1000px){.et-page .et-shows{grid-template-columns:1.1fr .9fr;gap:32px}}
.et-page .et-heat{padding:26px;display:flex;flex-direction:column}
.et-page .et-heat-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.et-page .et-svg{width:100%;height:auto;display:block;margin-top:12px}
.et-page .et-legend{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:16px;padding-top:16px;border-top:1px solid var(--hairline)}
.et-page .et-key{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-size:13.5px;font-weight:600}
.et-page .et-key i{width:18px;height:10px;border-radius:5px;flex:none}
.et-page .et-key i.et-hot{background:linear-gradient(90deg,#ff4d4d,#ff9d3d)}
.et-page .et-key i.et-cool{background:linear-gradient(90deg,#ffd24d,rgba(255,210,77,.15))}
.et-page .et-key i.et-path{height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 5px,transparent 5px 11px)}
.et-page .et-heat-note{margin-top:12px;color:var(--text-3);font-size:12.5px;line-height:1.5}
.et-page .et-shows-list{padding:28px;display:flex;flex-direction:column;justify-content:center}
.et-page .et-shows-list h3{font-size:19px;line-height:1.35;color:var(--ink);margin-bottom:22px}
.et-page .et-shows-list .feats{margin-top:0;gap:15px}
.et-page .et-shows-note{margin-top:24px;padding-top:20px;border-top:1px solid var(--hairline);color:var(--text-2);font-size:15px;line-height:1.7}
/* Technical notes */
.et-page .et-tech{margin-top:44px;display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch}
@media(min-width:640px){.et-page .et-tech{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.et-page .et-tech{grid-template-columns:repeat(4,1fr)}}
.et-page .et-tech-item{padding:24px;display:flex;flex-direction:column;gap:14px}
.et-page .et-tech-item .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.12);border:1px solid rgba(75,123,255,.28);color:var(--brand);flex:none}
.et-page .et-tech-item .ic svg{width:21px;height:21px}
.et-page .et-tech-item p{color:var(--text-2);font-size:14.5px;line-height:1.6}
/* Say vs saw */
.et-page .et-compare{margin-top:44px;display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch;justify-items:stretch}
@media(min-width:900px){.et-page .et-compare{grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}}
.et-page .et-compare-side{padding:26px}
.et-page .et-compare-side.is-primary{border-color:rgba(75,123,255,.45);background:linear-gradient(160deg,rgba(75,123,255,.12),rgba(75,123,255,.03))}
.et-page .et-compare-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.et-page .et-compare-tag.is-said{color:var(--text-2);background:rgba(255,255,255,.06);border:1px solid var(--hairline)}
.et-page .et-compare-tag.is-saw{color:var(--brand);background:rgba(75,123,255,.12);border:1px solid rgba(75,123,255,.32)}
.et-page .et-compare-side p{margin-top:14px;color:var(--text-2);font-size:15px;line-height:1.7}
.et-page .et-compare-plus{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--brand)}

/* =========================================================
   PREMIUM PANEL NETWORK — two-sided bridge, access & quality
   ========================================================= */
.pn-page .pn-bridge{margin-top:44px;padding:32px 26px;display:grid;grid-template-columns:1fr;gap:18px;align-items:center;text-align:center}
@media(min-width:900px){.pn-page .pn-bridge{grid-template-columns:1fr auto 1.05fr auto 1fr;gap:14px;padding:38px 32px}}
.pn-page .pn-side,.pn-page .pn-hub{display:flex;flex-direction:column;align-items:center;gap:12px}
.pn-page .pn-side .ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid var(--hairline);color:var(--text-2);flex:none}
.pn-page .pn-side .ic svg{width:24px;height:24px}
.pn-page .pn-side h3{font-size:17px;color:var(--ink)}
.pn-page .pn-side p{color:var(--text-2);font-size:14px;line-height:1.6;max-width:26ch}
/* Hub */
.pn-page .pn-hub{padding:22px 18px;border-radius:18px;border:1px solid rgba(75,123,255,.42);background:linear-gradient(160deg,rgba(75,123,255,.16),rgba(75,123,255,.04))}
.pn-page .pn-hub-ring{width:58px;height:58px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.18);border:1px solid rgba(75,123,255,.5);color:var(--brand);box-shadow:0 0 0 8px rgba(75,123,255,.06)}
.pn-page .pn-hub-ring svg{width:28px;height:28px}
.pn-page .pn-hub h3{font-size:17.5px;color:#fff;line-height:1.3}
.pn-page .pn-hub p{color:var(--text-2);font-size:13.5px}
/* Connectors: horizontal on desktop, rotated on mobile */
.pn-page .pn-link{display:flex;align-items:center;justify-content:center}
.pn-page .pn-arrow{width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.10);border:1px solid rgba(75,123,255,.3);color:var(--brand)}
.pn-page .pn-arrow svg{width:18px;height:18px}
@media(max-width:899px){.pn-page .pn-arrow{transform:rotate(90deg)}}
/* What you get */
.pn-page .pn-access{margin-top:44px;display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch}
@media(min-width:640px){.pn-page .pn-access{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.pn-page .pn-access{grid-template-columns:repeat(4,1fr)}}
.pn-page .pn-access-card{padding:26px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.pn-page .pn-access-card:hover{border-color:rgba(75,123,255,.5);transform:translateY(-3px)}
.pn-page .pn-access-card .ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.12);border:1px solid rgba(75,123,255,.28);color:var(--brand);flex:none}
.pn-page .pn-access-card .ic svg{width:24px;height:24px}
.pn-page .pn-access-card h3{font-size:16px;line-height:1.4;color:var(--ink)}
/* Quality & trust */
.pn-page .pn-quality{margin-top:44px;display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch}
@media(min-width:900px){.pn-page .pn-quality{grid-template-columns:repeat(3,1fr)}}
.pn-page .pn-quality-card{padding:28px;display:flex;flex-direction:column;gap:14px}
.pn-page .pn-quality-card .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(75,123,255,.12);border:1px solid rgba(75,123,255,.28);color:var(--brand);flex:none}
.pn-page .pn-quality-card .ic svg{width:22px;height:22px}
.pn-page .pn-quality-card h3{font-size:18px;line-height:1.35;color:var(--ink)}
.pn-page .pn-quality-card p{color:var(--text-2);font-size:15px;line-height:1.7}
/* Balance walkthrough headings so a single short word never sits alone */
.appscroll-head h2{text-wrap:balance}
/* Wide enough for the longest walkthrough heading to sit on one line
   (Library needs ~855px at 44px); still wraps naturally on smaller screens. */
@media(min-width:1024px){.product-page .appscroll-head{max-width:900px}}

/* Full-width dashboard showcase on the service pages (same treatment as the
   Answers coverage block). Images are 1500x1000, so the frame is 1.5. */
.product-page .svc-showcase{margin-top:56px;padding:7px}
.product-page .svc-showcase .shot{aspect-ratio:1.5}
.product-page .svc-showcase .shot img{object-position:center}
.product-page .svc-showcase-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:24px}
.product-page .svc-showcase-pills span{padding:8px 12px;border:1px solid var(--hairline);border-radius:99px;background:rgba(255,255,255,.035);color:var(--text-2);font-size:12px}

/* =========================================================
   STAT BAND — FIT-TO-COLUMN TYPE
   The band mixes short numbers ("9", "12.4M+") with whole phrases
   ("Recruit -> reward", "Randomization"). One fixed size cannot serve both:
   at 38px a phrase overflowed a 155px mobile column and broke mid-word.
   Each grid carries --stat-ch = the longest line its values can be forced
   onto, in characters, and the size is derived from the column's own width
   so the value always fits whatever the viewport.
   ========================================================= */
/* Each stat borrows the band's rows, so every value in a row shares one track
   height and the labels below them start on the same line even when one value
   wraps. 193cqw/ch is measured, not guessed: the widest line this display face
   produces is ~0.49em per character, which leaves ~6% slack. */
/* The query container is the grid, not the stat: container-type on a grid item
   makes its own `subgrid` compute away. Column width is derived from the grid's
   width instead — (100cqw - gaps) / columns. */
.stat-grid{container-type:inline-size;grid-auto-rows:auto}
.stat{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:10px}
.stat .n{
  align-self:end;
  font-size:clamp(18px,8vw,30px);                 /* fallback where cqw is unsupported */
  font-size:clamp(18px,calc(1.93 * (100cqw - 24px) / 2 / var(--stat-ch,7)),30px);
  line-height:1.06;
  text-wrap:balance;
  hyphens:none;                                   /* never break "End-to-end" mid-word */
  overflow-wrap:break-word;                       /* last resort, beats overflowing */
}
@media(min-width:768px){
  .stat .n{
    font-size:clamp(20px,3.4vw,44px);
    font-size:clamp(20px,calc(1.93 * (100cqw - 72px) / 4 / var(--stat-ch,7)),44px);
  }
}
.stat .l{margin-top:0;font-size:12px;letter-spacing:.06em;line-height:1.3;text-wrap:balance}
@media(min-width:768px){.stat .l{font-size:13px;letter-spacing:.08em}}

/* =========================================================
   HERO — MOBILE COMPOSITION
   The phone mock is 9:18, so at 150px wide it stands ~324px tall while the
   1.6 dashboard frame is only ~240px tall on a 375px screen. Anchored to the
   frame's bottom-left it therefore rose clear above the frame and covered the
   dashboard rather than layering over a corner of it.
   Below 600px it instead hangs off the frame's bottom-right corner, cropped
   to 9:14 so it is shorter than the frame it sits on. .frame img already
   anchors to object-position:top, so the crop takes the bottom of the phone
   screen and keeps its header and first rows.
   ========================================================= */
.phone-shot{aspect-ratio:9/18}
/* (superseded — see FRAMES, CHROME & PHONE at the end of this file) */


/* =========================================================
   SWEB-161 — MOBILE CORRECTIONS
   ========================================================= */

/* 1. The browser chrome above a screenshot is a fixed 49px, which reads as
   11% of a desktop frame but 20% of the same frame on a phone — the bar
   started to out-weigh the picture under it. Scale it with the frame.
   The phone mock and the orbit's centre already carry a compact chrome. */
/* (superseded — see FRAMES, CHROME & PHONE at the end of this file) */

/* 2. The orbit's centre frame was 56% of the ring's width. The side nodes sit
   at 50% ± 34.6% carrying a 48px icon, so the clearance is
   0.346*W - 24 - centre/2: 9px at 1440, and negative — overlapping — on a
   phone. 46%/50% buys room on every screen. */
.orbit .center{width:43%}
@media(min-width:768px){.orbit .center{width:46%}}
@media(min-width:1024px){.orbit .center{width:48%}}

/* 5. The burger's glyph stopped 8.7px short of the drawer's + icons: it is a
   24px icon centred in a 40px tap target, while the + is a 16px icon flush
   to the content edge. Pinning the glyph to the button's trailing edge puts
   both on the same line without shrinking the tap target. */
.burger{justify-content:flex-end}


/* =========================================================
   BEZELLED FRAMES — PASS THE CURVE INWARD
   .svc-showcase (the full-width dashboard on every service page) and
   .coverage-shell (Answers) inset their contents by a 7px bezel, unlike every
   other .frame on the site, whose chrome and shot run edge to edge and are
   rounded by the frame's own overflow:hidden.
   Inset, that no longer works: the chrome and the shot still had square
   corners, so where the frame curves away at radius 20 it sliced them off on
   the diagonal instead of rounding them. A child inset by b inside a corner
   of radius r has to carry radius r - b to stay concentric.
   ========================================================= */
.svc-showcase,.coverage-shell{--bezel:7px}
.svc-showcase .chrome,.coverage-shell .chrome{
  border-radius:calc(var(--radius-frame) - var(--bezel)) calc(var(--radius-frame) - var(--bezel)) 0 0;
}
.svc-showcase .shot,.coverage-shell .shot{
  overflow:hidden;                                   /* the img itself must be clipped too */
  border-radius:0 0 calc(var(--radius-frame) - var(--bezel)) calc(var(--radius-frame) - var(--bezel));
}


/* Sub-processor tables in the Privacy policy (SWEB-162).
   The generic .legal-prose table rule makes the table itself the scroll box,
   which crushes six prose columns into the content width. These tables put
   the scrolling on a wrapper and hold a readable min-width instead. */
.legal-page .legal-prose .subproc-title{margin-top:40px;margin-bottom:14px;font-size:18px;font-weight:600;color:var(--ink)}
/* The wrapper draws the frame and owns the scrolling, so the clipped edge
   reads as a contained, scrollable panel rather than a table running out of
   the column. The scrollbar stays visible for the same reason. */
.legal-page .legal-prose .subproc-table-wrap{width:100%;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.02);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) rgba(255,255,255,.08)}
.legal-page .legal-prose .subproc-table-wrap::-webkit-scrollbar{height:10px}
.legal-page .legal-prose .subproc-table-wrap::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.legal-page .legal-prose .subproc-table-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:99px}
.legal-page .legal-prose .subproc-table-wrap::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45)}
.legal-page .legal-prose table.subproc-table{display:table;table-layout:fixed;width:100%;min-width:900px;margin-top:0;overflow:visible;border:0}
/* The wrapper already draws the outer edge. */
.legal-page .legal-prose .subproc-table tr > *:first-child{border-left:0}
.legal-page .legal-prose .subproc-table tr > *:last-child{border-right:0}
.legal-page .legal-prose .subproc-table thead th{border-top:0}
.legal-page .legal-prose .subproc-table tbody tr:last-child > *{border-bottom:0}
.legal-page .legal-prose .subproc-table th,
.legal-page .legal-prose .subproc-table td{overflow-wrap:break-word;line-height:1.4}
.legal-page .legal-prose .subproc-table a{overflow-wrap:anywhere}

/* Bare URLs in the legal prose (item-26 carries a couple of long ones) have no
   break opportunity, so they pushed the page 62px wider than the viewport on a
   phone. Same complaint as the tables: nothing may exceed the column. */
.legal-page .legal-prose a{overflow-wrap:anywhere}


/* =========================================================
   MEGA MENU — LIST LEFT, LIVE PREVIEW RIGHT
   The menu now shows the product's actual interface rather than describing
   it. The preview reuses the .frame / .chrome / .shot component from the
   homepage, so the menu introduces no new visual language, and the shots
   crossfade in place the way the Syno Cloud panel does.
   The list drops to two columns because a third would starve beside the
   preview. Desktop only: below 1024px this menu is replaced by the drawer.
   ========================================================= */
.mega-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:40px;
  align-items:start;
}
.mega-split .mega-products,
.mega-split .mega-products.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}

/* The leading rule is the only place --brand appears in this menu, so it
   reads as "this is the one you are looking at". */
.mega-split .mega-products a{position:relative}
.mega-split .mega-products a::before{
  content:"";
  position:absolute;
  left:6px; top:14px; bottom:14px;
  width:2px; border-radius:2px;
  background:var(--brand);
  opacity:0;
  transition:opacity .18s var(--ease);
}
.mega-split .mega-products a.is-active::before{opacity:1}
.mega-split .mega-products a.is-active{background:rgba(255,255,255,.05)}
/* the row lifts on hover elsewhere; here the preview does the moving */
.mega-split .mega-products a:hover{transform:none}

.mega-preview{position:relative}
.mega-preview .frame{width:100%}
/* The chrome is sized for a full-width frame: 49px is a tenth of a hero shot
   but a fifth of this one. Scale it to the frame it sits on. */
.mega-preview .shot{position:relative;aspect-ratio:1.6;overflow:hidden}
.mega-preview .shot img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:top;
  opacity:0;
  transition:opacity .3s var(--ease);
  will-change:opacity;
}
.mega-preview .shot img.is-active{opacity:1}

/* At the narrow end of the desktop range the list would be squeezed, so the
   preview gives back width before it gives up existing. */
@media(max-width:1199px){
  .mega-split{grid-template-columns:minmax(0,1fr) 320px;gap:28px}
}

@media(prefers-reduced-motion:reduce){
  .mega-preview .shot img{transition:none}
  .mega-split .mega-products a::before{transition:none}
}

/* =========================================================
   FRAMES, CHROME & PHONE — PROPORTIONAL, NOT FIXED
   The browser bar above every screenshot was a fixed 49px on desktop and
   31px on phones, whatever the frame's size: 4% of a 1240px showcase but
   20% of the orbit's centre, and 9% of every frame on a phone. Real
   browser chrome is about 5% of the window. Each frame is now a size
   container, so its bar, dots and address field are a share of its own
   width and stay in proportion at any size.
   The corners were a flat 20px too, which reads as a pill on a 150px
   frame. They now scale with the viewport, and the small frames take a
   tighter radius of their own.
   ========================================================= */
:root{--radius-frame:clamp(10px, calc(4px + 1.1vw), 18px)}
.frame{container-type:inline-size}
.frame .chrome{
  gap:clamp(3px, .75cqw, 7px);
  padding:clamp(3px, 1.3cqw, 11px) clamp(7px, 1.9cqw, 16px);
}
.frame .chrome .dot{width:clamp(4px, 1.05cqw, 10px);height:clamp(4px, 1.05cqw, 10px)}
/* the address field sits centred, like a browser's, instead of running the
   full width; the ::after balances the dots so centred means centred */
.frame .chrome .bar{
  flex:0 1 46%;margin:0 auto;
  height:clamp(6px, 2.4cqw, 20px);border-radius:clamp(3px, .7cqw, 6px);
}
.frame .chrome::after{content:"";flex:0 0 auto;width:calc(3 * clamp(4px, 1.05cqw, 10px) + 2 * clamp(3px, .75cqw, 7px))}
.orbit .center{--radius-frame:clamp(7px, 1.4vw, 12px)}
.mega-preview .frame{--radius-frame:12px}
@media(max-width:767px){.svc-showcase,.coverage-shell{--bezel:5px}}

/* The orbit's product tiles: 16px on a 48px tile is a third of its side,
   which reads as a blob. A quarter keeps the shape. */
.node .ic{border-radius:12px}

/* The hero phone keeps the same browser bar as every other frame, so the
   two read as one family — but at phone proportions (19.5:9, not the old
   9:14 crop) and with the bar scaled to the phone's own width: a sliver,
   not a desktop title bar shrunk onto a narrow screen. Corner radii are
   given per axis so they come out round on a tall box. */
.phone-frame{border-radius:12% / 5.6%}
.phone-frame .phone-shot{aspect-ratio:401/767}  /* the screenshot's own shape: 9:19.5 sliced ~6% off each side */
.phone-frame .chrome{
  gap:clamp(2px, 2.4cqw, 4px);
  padding:clamp(2px, 2.6cqw, 6px) clamp(6px, 7cqw, 12px);
}
.phone-frame .chrome .dot{width:clamp(3px, 3.2cqw, 6px);height:clamp(3px, 3.2cqw, 6px)}
.phone-frame .chrome .bar{height:clamp(5px, 6cqw, 10px);border-radius:clamp(2px, 2cqw, 4px)}
.phone-frame .chrome::after{width:calc(3 * clamp(3px, 3.2cqw, 6px) + 2 * clamp(2px, 2.4cqw, 4px))}
/* On a phone the device hangs off the dashboard's bottom-right corner,
   narrower than before so that, at its true height, it overlaps the
   dashboard rather than covering it. */
@media(max-width:599px){
  .hero .phone{left:auto;right:6px;bottom:-30px;width:29%;max-width:116px}
}

/* =========================================================
   SERVICES HEADER — DESKTOP
   Side by side, the heading and the three checks were squeezing each
   other: the heading broke with "clicks" alone on its second line and the
   checks wrapped two-and-one. The heading now balances its lines, the
   checks hold one row, and they only sit beside the heading where there
   is room for both (1100px+); below that they sit under it.
   ========================================================= */
.services-head h2{text-wrap:balance}
@media(min-width:768px){.services-head{flex-direction:column;align-items:flex-start}}
@media(min-width:1100px){
  .services-head{flex-direction:row;align-items:flex-end;gap:48px}
  .services-head > div:first-child{flex:1 1 auto;min-width:0}
  .services-head .chiprow{flex:none;flex-wrap:nowrap;padding-bottom:6px}
  .chiprow span{white-space:nowrap}
}


/* A case study whose client does not allow its logo or photography shows
   its name as text instead (front matter: mediaText). Black ground and a
   white mark, so it sits in the grid exactly like the logo tiles beside it. */
.customers-page .cust-wordmark{
  position:absolute;inset:0;display:grid;place-items:center;
  background:#000;color:#fff;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1;
  font-size:clamp(30px, 3.4vw, 44px);
  transition:transform .5s var(--ease);
}
.customers-page .cust-featured-media .cust-wordmark{font-size:clamp(40px, 5vw, 64px)}
.customers-page .cust-card:hover .cust-wordmark,
.customers-page .cust-featured:hover .cust-wordmark{transform:scale(1.05)}

/* The Products / Services button of the section you are in: same weight as
   an open menu, plus a short brand rule underneath. */
.nav .has-menu.is-current{color:#fff;position:relative}
.nav .has-menu.is-current::after{content:"";position:absolute;left:14px;right:30px;bottom:2px;height:2px;border-radius:2px;background:var(--brand)}


/* =========================================================
   PRICING PAGE — PLANS IN THE FIRST SCREEN
   The intro and the plans were two full sections, each with its own
   section padding and a band change between them, so the plans started
   around 930px down — below the fold on a 1080px screen. Now the intro
   is a compact lead-in and the plans follow straight on, on the same
   ground, so the price row is visible on arrival.
   ========================================================= */
.pricing-page #top-head{padding-top:clamp(112px, 14vh, 140px);padding-bottom:clamp(24px, 3vh, 36px)}
.pricing-page #top-head h2{margin-top:12px}
.pricing-page #top-head p{margin-top:14px}
.pricing-page #pricing{padding-top:0;background:transparent;border-top:0}
/* plain top-bar links get the same "you are here" mark */
.nav > a.is-current{color:#fff;position:relative}
.nav > a.is-current::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--brand)}


/* =========================================================
   ARTICLES — blog posts and case studies (layout: site-article.njk)
   The bodies are legacy HTML from the old site: section headings are
   mostly h5 with h6 below them, plus quote boxes, partner rows, embeds,
   a few tables and download buttons. These rules give that markup the
   site's reading style without editing 106 posts.
   ========================================================= */
.article-page .article-col{max-width:820px;margin:0 auto}
.article-page .article-head{padding-top:clamp(112px, 14vh, 140px);padding-bottom:28px}
.article-page .article-head .article-col{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.article-page .article-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-2);margin-bottom:6px;transition:color .2s}
.article-page .article-back:hover{color:#fff}
.article-page .article-back svg{width:16px;height:16px}
.article-page .article-head h1{font-size:clamp(30px, 4.2vw, 46px);line-height:1.1;text-wrap:balance}
.article-page .article-head .news-date{margin-top:4px}

.article-page .article-hero{margin:0 0 40px;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--hairline);background:var(--bg-raised);aspect-ratio:16/9;position:relative}
.article-page .article-hero img{width:100%;height:100%;object-fit:cover}
.article-page .article-wordmark{position:absolute;inset:0;display:grid;place-items:center;background:#000;color:#fff;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:clamp(40px, 6vw, 72px);line-height:1}
.article-page .news-card-media .article-wordmark{font-size:clamp(30px, 3vw, 40px)}

/* prose */
.article-page .article-prose{padding-bottom:clamp(64px, 9vw, 112px);color:var(--text-2);font-size:17px;line-height:1.75;overflow-wrap:break-word}
.article-page .article-prose > :first-child{margin-top:0}
.article-page .article-prose p{margin-top:18px}
.article-page .article-prose :is(h2,h3,h4,h5){font-family:var(--font-display);color:var(--ink);letter-spacing:-.015em;line-height:1.25;margin-top:44px}
.article-page .article-prose :is(h2,h3){font-size:clamp(22px, 2.4vw, 28px)}
.article-page .article-prose :is(h4,h5){font-size:clamp(20px, 2vw, 23px)}
.article-page .article-prose h6{font-family:var(--font-display);font-size:17px;color:var(--ink);margin-top:28px;letter-spacing:-.01em}
.article-page .article-prose :is(h2,h3,h4,h5,h6) + p{margin-top:10px}
.article-page .article-prose ul,.article-page .article-prose ol{margin-top:16px;padding-left:22px}
.article-page .article-prose li{margin-top:8px}
.article-page .article-prose li::marker{color:var(--brand)}
.article-page .article-prose a{color:var(--brand);text-decoration:underline;text-decoration-color:rgba(75,123,255,.4);text-underline-offset:3px}
.article-page .article-prose a:hover{text-decoration-color:currentColor}
.article-page .article-prose :is(strong,b){color:var(--ink)}
.article-page .article-prose img{max-width:100%;height:auto;border-radius:12px;margin-top:20px}
.article-page .article-prose :is(iframe,video){display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:12px;margin-top:24px;background:#000}
.article-page .article-prose table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin-top:24px;font-size:14.5px;line-height:1.5}
.article-page .article-prose :is(th,td){border:1px solid var(--hairline);padding:10px 12px;text-align:left;vertical-align:top}
.article-page .article-prose th{color:var(--ink);background:rgba(255,255,255,.04)}
.article-page .article-prose hr{border:0;border-top:1px solid var(--hairline);margin:36px 0}
.article-page .article-prose br + br{display:none}  /* doubled <br> in old posts read as accidental gaps */

/* quote with a person: card, brand rule, round portrait */
.article-page .article-prose .quotation-box{position:relative;margin:36px 0;padding:26px 28px 26px 112px;border-radius:var(--radius-card);border:1px solid var(--hairline);border-left:3px solid var(--brand);background:rgba(255,255,255,.03);color:var(--ink);font-size:18px;line-height:1.6;min-height:120px}
.article-page .article-prose .quotation-box > p:first-child:not(:has(*)){display:none}  /* the decorative “ */
.article-page .article-prose .quotation-box p{margin:0 !important}
.article-page .article-prose .quotation-box .profile{position:absolute;left:26px;top:26px;width:64px;height:64px;margin:0;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.12)}
.article-page .article-prose .quotation-mark{display:none}  /* Font Awesome icon; the site doesn't load the font */
@media(max-width:600px){
  .article-page .article-prose .quotation-box{padding:22px}
  .article-page .article-prose .quotation-box .profile{position:static;display:block;width:56px;height:56px;margin-bottom:14px}
}

/* partner rows: logo beside its description */
.article-page .article-prose .partners-div{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:center;margin-top:20px;padding:16px;border:1px solid var(--hairline);border-radius:var(--radius-card);background:rgba(255,255,255,.02)}
.article-page .article-prose .partners-div img{margin:0;border-radius:10px}
.article-page .article-prose .partners-div p{margin:0}
@media(max-width:600px){.article-page .article-prose .partners-div{grid-template-columns:1fr}}

/* buttons inside posts (downloads, "read the full interview") */
.article-page .article-prose button{display:inline-flex;align-items:center;justify-content:center;width:auto !important;margin-top:20px;padding:12px 20px;border-radius:var(--radius-btn);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:#fff;font:600 15px/1 var(--font-body, inherit);cursor:pointer;transition:border-color .2s,background .2s}
.article-page .article-prose button:hover{border-color:var(--brand);background:rgba(75,123,255,.12)}

/* the one Bootstrap accordion: the site doesn't load Bootstrap's JS, so
   show its content rather than leave a button that does nothing */
.article-page .article-prose .accordion-item{margin-top:24px;border:1px solid var(--hairline);border-radius:var(--radius-card);overflow:hidden}
.article-page .article-prose .accordion-header{margin:0}
.article-page .article-prose .accordion-button{width:100% !important;margin:0;justify-content:flex-start;border:0;border-radius:0;background:rgba(255,255,255,.04);pointer-events:none}
.article-page .article-prose .accordion-collapse{display:block !important}
.article-page .article-prose .accordion-body{padding:4px 20px 20px}

/* related */
.article-page .article-related-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.article-page .article-related-head h2{font-size:clamp(26px, 3vw, 34px)}
.article-page .article-related .news-grid{margin-top:28px}
.article-page .article-prose .partners-div a{display:block}
.article-page .article-prose .partners-div img{display:block;width:100%;max-width:140px}
.article-page .article-related{padding-top:clamp(48px, 6vw, 72px)}


/* =========================================================
   PANEL BOOK — /panelbook/
   The table markup is the legacy include (src/_includes/data-table.njk:
   table.panelbook, a <ul><li> with a flag in each country cell); it is
   styled here rather than rewritten so the quarterly update stays a
   one-file job.
   ========================================================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.panelbook-page .pb-section{padding-top:0}

.panelbook-page .pb-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:720px;margin:0 auto 28px}
.panelbook-page .pb-fig{padding:18px 20px;border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--bg-card);text-align:center}
.panelbook-page .pb-n{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(24px, 3vw, 34px);letter-spacing:-.03em;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums}
.panelbook-page .pb-l{display:block;margin-top:6px;font-size:13px;color:var(--text-3)}

.panelbook-page .pb-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:16px}
.panelbook-page .pb-tools[hidden]{display:none}
.panelbook-page .pb-search{position:relative;flex:1 1 260px;max-width:360px}
.panelbook-page .pb-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.panelbook-page .pb-search input{width:100%;height:44px;padding:0 14px 0 42px;border-radius:var(--radius-btn);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:15px}
.panelbook-page .pb-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(75,123,255,.2)}
.panelbook-page .pb-regions{display:flex;flex-wrap:wrap;gap:8px}
.panelbook-page .pb-regions button{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--hairline);background:transparent;color:var(--text-2);font:600 13.5px/1 var(--font-body);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.panelbook-page .pb-regions button:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.panelbook-page .pb-regions button[aria-pressed="true"]{color:#fff;border-color:var(--brand);background:rgba(75,123,255,.16)}

/* the table: framed, scrolls sideways on small screens with the country
   column pinned, header pinned under the site header while scrolling down */
.panelbook-page .pb-table-wrap{border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--bg-card);overflow:auto;max-height:min(70vh, 760px);-webkit-overflow-scrolling:touch}
.panelbook-page .pb-table-wrap:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.panelbook-page table.panelbook{width:100%;min-width:900px;border-collapse:separate;border-spacing:0;border:0;font-size:14px;font-variant-numeric:tabular-nums}
.panelbook-page table.panelbook :is(th,td){padding:11px 14px;border:0;border-bottom:1px solid var(--hairline);text-align:right;white-space:nowrap;color:var(--text-2)}
.panelbook-page table.panelbook :is(th,td):is(:first-child,:nth-child(2)){text-align:left}
.panelbook-page table.panelbook thead th{position:sticky;top:0;z-index:2;background:#151b2b;color:var(--ink);font-weight:700;font-size:12.5px;letter-spacing:.02em}
.panelbook-page table.panelbook td:nth-child(3){color:#fff;font-weight:700}
.panelbook-page table.panelbook :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--bg-card)}
.panelbook-page table.panelbook thead th:first-child{z-index:3;background:#151b2b}
.panelbook-page table.panelbook tbody tr:hover td{background:rgba(75,123,255,.07)}
.panelbook-page table.panelbook tbody tr:last-child td{border-bottom:0}
.panelbook-page table.panelbook td ul{list-style:none;margin:0;padding:0}
.panelbook-page table.panelbook td li{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600}
.panelbook-page table.panelbook td img{width:22px;height:16px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.panelbook-page .pb-sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.panelbook-page .pb-sort:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.panelbook-page th[aria-sort] .pb-sort::after{content:"";width:0;height:0;border:4px solid transparent;opacity:.35;border-top-color:currentColor;transform:translateY(2px)}
.panelbook-page th[aria-sort="descending"] .pb-sort::after{opacity:1}
.panelbook-page th[aria-sort="ascending"] .pb-sort::after{opacity:1;border-top-color:transparent;border-bottom-color:currentColor;transform:translateY(-2px)}
.panelbook-page .pb-empty{margin-top:16px;color:var(--text-3);text-align:center}

.panelbook-page .pb-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:32px;padding:28px;border:1px solid var(--hairline);border-radius:var(--radius-card);background:linear-gradient(135deg,rgba(75,123,255,.12),rgba(75,123,255,.02))}
.panelbook-page .pb-cta p{flex:1 1 420px;margin:0;color:var(--text-2);font-size:16px;line-height:1.65}
.panelbook-page .pb-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:600px){.panelbook-page .pb-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.panelbook-page .pb-fig{padding:14px 8px}}
@media(max-width:600px){.panelbook-page .pb-n{font-size:clamp(17px, 5.2vw, 22px)}.panelbook-page .pb-l{font-size:12px}.panelbook-page table.panelbook :is(th,td){padding:10px 12px}}
@media(max-width:600px){.panelbook-page .pb-summary{grid-template-columns:1.5fr 1fr 1fr}}


/* =========================================================
   CONTACT — MESSAGE FORM (#message on /contact/)
   Visible labels above fields, one column on phones and two for the short
   fields on wider screens, errors under the field they belong to, and a
   single primary action with its own sending state.
   ========================================================= */
.contact-page .contact-msg{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:18px;font-size:14px;font-weight:600;color:var(--brand)}
.contact-page .contact-msg svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.contact-page .contact-msg:hover svg{transform:translateX(3px)}
.contact-page .contact-card ul{margin-bottom:0}

.contact-page #message{scroll-margin-top:80px}
.contact-page .msg-split{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
@media(min-width:1000px){.contact-page .msg-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}}
.contact-page .msg-intro h2{margin-top:14px;font-size:clamp(28px, 3.4vw, 40px);line-height:1.1}
.contact-page .msg-intro p{margin-top:14px;color:var(--text-2);font-size:16px;line-height:1.65;max-width:44ch}
.contact-page .msg-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.contact-page .msg-points li{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:15px}
.contact-page .msg-points svg{width:18px;height:18px;flex:none;color:var(--brand);padding:3px;border-radius:50%;background:rgba(75,123,255,.14)}
@media(min-width:1000px){.contact-page .msg-intro{position:sticky;top:110px}}

.contact-page .msg-card{padding:clamp(22px, 3vw, 34px)}
.contact-page .msg-form{display:grid;grid-template-columns:1fr;gap:18px 16px}
@media(min-width:640px){.contact-page .msg-form{grid-template-columns:1fr 1fr}.contact-page .msg-form .field--full{grid-column:1 / -1}}
.contact-page .msg-form[hidden]{display:none}
.contact-page .field{display:flex;flex-direction:column;gap:7px;min-width:0}
.contact-page .field > label{font-size:14px;font-weight:600;color:var(--ink)}
.contact-page .field :is(input:not([type=checkbox]),select,textarea){
  width:100%;min-height:48px;padding:12px 14px;border-radius:var(--radius-btn);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;
  font:inherit;font-size:16px;line-height:1.4;transition:border-color .15s,box-shadow .15s,background .15s;
  -webkit-appearance:none;appearance:none}
.contact-page .field textarea{min-height:150px;resize:vertical}
.contact-page .field select{padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab4cc' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.contact-page .field select option{background:#0f1422;color:#fff}
.contact-page .field select:invalid{color:var(--text-3)}
.contact-page .field :is(input,select,textarea):hover{border-color:rgba(255,255,255,.24)}
.contact-page .field :is(input:not([type=checkbox]),select,textarea):focus{outline:none;border-color:var(--brand);background:rgba(75,123,255,.06);box-shadow:0 0 0 3px rgba(75,123,255,.22)}
.contact-page .field.is-invalid :is(input:not([type=checkbox]),select,textarea){border-color:#ff6b7a}
.contact-page .field.is-invalid :is(input:not([type=checkbox]),select,textarea):focus{box-shadow:0 0 0 3px rgba(255,107,122,.2)}
.contact-page .field-err{min-height:0;font-size:13px;color:#ff8a96}
.contact-page .field-err:empty{display:none}

/* consent: a real checkbox, visually replaced but still focusable */
.contact-page .check{position:relative;display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:14px;line-height:1.55;color:var(--text-2)}
.contact-page .check input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.contact-page .check .box{flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.04);transition:background .15s,border-color .15s}
.contact-page .check input:checked + .box{background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--brand)}
.contact-page .check input:focus-visible + .box{box-shadow:0 0 0 3px rgba(75,123,255,.35)}
.contact-page .field--check.is-invalid .box{border-color:#ff6b7a}
.contact-page .check a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

.contact-page .msg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:4px}
.contact-page .msg-send{min-width:150px;justify-content:center;gap:10px}
.contact-page .msg-send:disabled{opacity:.8;cursor:progress}
.contact-page .msg-spinner{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:msgspin .7s linear infinite}
.contact-page .msg-send.is-busy .msg-spinner{display:inline-block}
@keyframes msgspin{to{transform:rotate(360deg)}}

.contact-page .msg-status{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--radius-btn);margin-bottom:22px}
.contact-page .msg-status[hidden]{display:none}
.contact-page .msg-status svg{flex:none;width:26px;height:26px}
.contact-page .msg-status strong{display:block;color:#fff;font-size:16px}
.contact-page .msg-status p{margin:4px 0 0;color:var(--text-2);font-size:14.5px;line-height:1.55}
.contact-page .msg-status a{color:inherit;text-decoration:underline}
.contact-page .msg-status--ok{background:rgba(62,213,152,.1);border:1px solid rgba(62,213,152,.35);margin-bottom:0}
.contact-page .msg-status--ok svg{color:#3ed598}
.contact-page .msg-status--err{background:rgba(255,107,122,.08);border:1px solid rgba(255,107,122,.35)}
.contact-page .msg-status--err svg{color:#ff8a96}
.contact-page .msg-again{margin-top:12px;padding:0;border:0;background:none;color:var(--brand);font:600 14px/1 var(--font-body);cursor:pointer}
@media(prefers-reduced-motion:reduce){.contact-page .msg-spinner{animation:none}}
.contact-page .contact-card a.contact-msg{color:var(--brand)}
.contact-page .contact-card a.contact-msg:hover{color:#8fb0ff}


/* =========================================================
   ABOUT US
   ========================================================= */
.about-page .about-hero{padding-top:clamp(112px, 14vh, 140px)}
.about-page .about-split{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:1000px){.about-page .about-split{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px}}
.about-page .about-copy h1{margin-top:14px;font-size:clamp(34px, 4.6vw, 54px);line-height:1.05}
.about-page .about-copy p{margin-top:18px;color:var(--text-2);font-size:16.5px;line-height:1.75;max-width:62ch}
.about-page .about-copy p:first-of-type{color:var(--ink);font-size:18px}
.about-page .about-links{padding-top:0}
.about-page .about-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:900px){.about-page .about-link-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.about-page .about-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);transition:border-color .2s,transform .2s var(--ease)}
.about-page .about-link svg{width:18px;height:18px;flex:none;color:var(--brand);transition:transform .2s var(--ease)}
.about-page .about-link:hover{border-color:rgba(75,123,255,.5);transform:translateY(-2px)}
.about-page .about-link:hover svg{transform:translateX(3px)}

/* =========================================================
   LEGAL — full-width variant for table documents (DPA annex)
   ========================================================= */
.legal-page .legal-layout--wide .legal-prose{max-width:none}

/* =========================================================
   CALIFORNIA REQUEST — the contact form, one legal intro beside it
   ========================================================= */
.california-page #message{padding-top:clamp(112px, 14vh, 140px)}
.california-page .legal-back{margin-bottom:28px}
.california-page .msg-intro h1{margin-top:14px;font-size:clamp(28px, 3.4vw, 40px);line-height:1.12}
.california-page .msg-intro a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

/* =========================================================
   EMBED PAGES — report, video, newsletter sign-up
   ========================================================= */
.embed-page main > .section:first-child{padding-top:clamp(112px, 14vh, 140px)}
.embed-page .embed-head{text-align:center;max-width:720px;margin:0 auto 36px}
.embed-page .embed-head h1{margin-top:12px;font-size:clamp(30px, 4vw, 46px);line-height:1.1}
.embed-page .embed-head p{margin-top:12px;color:var(--text-2);font-size:17px}
.embed-page .embed-frame{max-width:1180px;margin:0 auto}
.embed-page .embed-frame iframe,.embed-page .embed-frame video{display:block;width:100%;border:0;background:#000}
.embed-page .embed-frame--report iframe{height:min(78vh, 760px);min-height:460px;background:#fff}
.embed-page .embed-frame--video video{aspect-ratio:16/9;height:auto}
.embed-page .embed-signup{max-width:540px;margin:0 auto;padding:10px;border-radius:var(--radius-card);background:#fff;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(75,123,255,.25)}
.embed-page .embed-signup iframe{display:block;width:100%;height:520px;border:0;border-radius:calc(var(--radius-card) - 6px)}

/* reCAPTCHA v3 badge hidden on the form pages (/contact/ and the California
   request form share .contact-page). Note: Google's terms allow hiding it only
   when the page shows the "protected by reCAPTCHA" notice instead — decided to
   hide it without the notice. visibility, not display: reCAPTCHA keeps working. */
.contact-page .grecaptcha-badge{visibility:hidden !important}