/* Layout: one deep-space canvas fixed behind everything (the black-galaxy material of the drive). Centred cinematic hero with the drive as the product shot,
   then left-aligned editorial sections and bento tiles on a 12-column grid, max 1200px. Single committed dark world, no light theme. */
:root{
  --void:#000000;            /* the page: true black */
  --deep:#05080d;            /* tile surfaces */
  --nebula:#0b1824;          /* drive-body navy teal, raised panels */
  --star:#f3f6fa;            /* primary text, primary buttons */
  --dust:#8f9aab;            /* secondary text, blue-biased grey */
  --glint:#a6e4ff;           /* icy highlight: live, active and focus states only */
  --good:#7fe0b4;            /* semantic: passed, done */
  --line:rgba(170,195,230,.12);
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --container:1200px;
  --gx:clamp(16px,4vw,32px);
  --edge:max(var(--gx), env(safe-area-inset-left,0px), calc((100vw - var(--container)) / 2));
  --section:clamp(88px,10vw,144px);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--void);scroll-behavior:smooth;scroll-padding-top:100px;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--star);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:80;background:var(--void)}
#sky{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
main,.footer{position:relative;z-index:1}
a{color:inherit}
img,svg,canvas{max-width:100%}
button{font:inherit}
:focus-visible{outline:2px solid var(--glint);outline-offset:3px;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--star);color:#000;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:600}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.wrap{max-width:calc(var(--container) + 2 * var(--gx));margin-inline:auto;padding-left:max(var(--gx), env(safe-area-inset-left,0px));padding-right:max(var(--gx), env(safe-area-inset-right,0px))}
section{padding-block:var(--section)}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Type ---------- */
.display{font-weight:600;font-size:clamp(3rem,8.6vw,7.4rem);line-height:.95;letter-spacing:-.052em;margin:0;text-wrap:balance}
.h2{font-weight:600;font-size:clamp(2.5rem,5.8vw,4.75rem);line-height:.98;letter-spacing:-.045em;margin:0;text-wrap:balance}
.h3{font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.04;letter-spacing:-.035em;margin:0;text-wrap:balance}
.lead{font-size:clamp(1.125rem,1.7vw,1.375rem);line-height:1.5;color:var(--dust);max-width:46ch;margin:0;text-wrap:pretty}
.label{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dust);margin:0}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em}
.galaxy{color:var(--star)}
.galaxy-ready .galaxy{background-image:var(--galaxy);background-size:220% auto;background-position:0% 40%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:nebula 26s ease-in-out infinite alternate}
@keyframes nebula{to{background-position:100% 60%}}
.num{font-variant-numeric:tabular-nums}

/* ---------- Buttons ---------- */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:600 16px/1 var(--font);letter-spacing:-.01em;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .4s var(--ease),background-color .3s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--star);color:#000;overflow:hidden;box-shadow:0 0 0 0 rgba(255,255,255,0),0 8px 30px -12px rgba(166,228,255,.5)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(105deg,transparent 38%,rgba(150,210,255,.55) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0;animation:sheen 5.5s var(--ease) infinite}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 0 6px rgba(255,255,255,.07),0 14px 44px -10px rgba(166,228,255,.55)}
@keyframes sheen{0%,55%{background-position:130% 0}85%,100%{background-position:-30% 0}}
.btn-ghost{background:rgba(255,255,255,.035);color:var(--star);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost::before,.orbit-border::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a),rgba(255,255,255,.14) 0deg,rgba(255,255,255,.14) 250deg,rgba(166,228,255,.95) 320deg,rgba(255,255,255,.14) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:orbit 6s linear infinite;pointer-events:none}
.btn-ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
@keyframes orbit{to{--a:360deg}}
.btn-sm{min-height:40px;padding:0 18px;font-size:14.5px}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;padding-top:env(safe-area-inset-top,0px);padding-left:max(var(--gx), env(safe-area-inset-left,0px));padding-right:max(var(--gx), env(safe-area-inset-right,0px))}
.nav-in{position:relative;max-width:var(--container);margin:0 auto;height:68px;display:flex;align-items:center;gap:20px;padding:0 4px;border:1px solid transparent;border-radius:999px;transition:max-width .7s var(--ease),height .5s var(--ease),margin-top .5s var(--ease),padding .5s var(--ease),background-color .5s,border-color .5s}
.nav.is-scrolled .nav-in{max-width:860px;height:58px;margin-top:10px;padding:0 8px 0 18px;background:rgba(9,13,20,.62);border-color:rgba(170,200,240,.14);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:0 20px 60px -30px rgba(0,0,0,.9)}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:19px;letter-spacing:-.03em;margin-right:auto}
.logo svg{width:22px;height:22px}
.nav-links{position:relative;display:flex;gap:2px}
.nav-links a{position:relative;z-index:1;padding:8px 14px;border-radius:999px;font-size:14.5px;color:var(--dust);text-decoration:none;transition:color .3s}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:var(--star)}
.nav-pill{position:absolute;top:0;height:100%;left:0;width:0;border-radius:999px;background:rgba(255,255,255,.08);opacity:0;transition:left .5s var(--ease),width .5s var(--ease),opacity .3s}
.menu-btn{display:none;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--star);font-size:14.5px;cursor:pointer}
.menu-btn i{display:grid;gap:4px}.menu-btn i::before,.menu-btn i::after{content:"";display:block;width:14px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(2.75px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-2.75px) rotate(-45deg)}
.menu{max-width:var(--container);margin:10px auto 0;padding:10px;border-radius:24px;background:rgba(9,13,20,.92);border:1px solid rgba(170,200,240,.14);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);display:grid;gap:2px}
.menu a{display:block;padding:14px 16px;border-radius:14px;text-decoration:none;font-size:20px;font-weight:500;letter-spacing:-.02em}
.menu a:hover{background:rgba(255,255,255,.06)}
@media (max-width:860px){.nav-links{display:none}.menu-btn{display:inline-flex}}
@media (max-width:380px){.nav .btn-sm{display:none}}

/* ---------- Hero ---------- */
.hero{padding-top:calc(clamp(128px,15vw,184px) + env(safe-area-inset-top,0px));padding-bottom:clamp(32px,5vw,64px);text-align:center}
.hero-copy{display:grid;justify-items:center;gap:28px}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(10,16,24,.55);font-size:13.5px;color:var(--dust)}
.kicker .live{width:7px;height:7px}
.hero h1 .serif{font-size:1.12em;line-height:.8;padding-right:.06em;display:inline-block;filter:drop-shadow(0 0 40px rgba(130,190,255,.25))}
.hero .lead{max-width:42ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media (prefers-reduced-motion:no-preference){
  .seq>*{animation:rise 1s var(--ease) both}
  .seq>*:nth-child(2){animation-delay:.08s}.seq>*:nth-child(3){animation-delay:.18s}.seq>*:nth-child(4){animation-delay:.28s}
  @keyframes rise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}}
  .ignite{animation:ignite 1.6s var(--ease) .3s both}
  @keyframes ignite{from{opacity:0;transform:scale(.94)}}
}

.stage{position:relative;height:clamp(470px,40vw,540px);margin-top:clamp(36px,5vw,56px)}
#inf{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}

@keyframes fill{0%{transform:scaleX(.06)}45%,100%{transform:scaleX(1)}}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (max-width:1020px){
  .stage{height:auto;display:grid;gap:8px}
  #inf{position:relative;inset:auto;height:clamp(220px,58vw,420px)}
}

/* ---------- Platforms ---------- */
.platforms{padding-block:clamp(48px,7vw,88px) clamp(24px,4vw,40px)}
.platforms .label{text-align:center;margin-bottom:26px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marquee ul{display:flex;width:max-content;list-style:none;margin:0;padding:0;animation:marq 50s linear infinite}
.marquee li{padding-right:clamp(36px,5vw,64px);font-weight:600;font-size:clamp(18px,2.1vw,24px);letter-spacing:-.025em;color:rgba(243,246,250,.5);white-space:nowrap}
.marquee:hover ul{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Statement ---------- */
.statement .big{font-weight:600;font-size:clamp(1.8rem,4vw,3.4rem);line-height:1.1;letter-spacing:-.035em;margin:0;max-width:26ch;text-wrap:pretty}
.statement .big .dim{color:#5f6a7b}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:clamp(56px,7vw,88px) 0 0;padding:32px 0 0;border-top:1px solid var(--line)}
.facts b{display:block;font-weight:600;font-size:clamp(3.2rem,8vw,6.5rem);line-height:.9;letter-spacing:-.06em}
.facts span{display:block;margin-top:12px;color:var(--dust);font-size:clamp(15px,1.5vw,18px)}

/* ---------- Section heads ---------- */
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:end}
.sec-head .lead{justify-self:end}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}.sec-head .lead{justify-self:start}}

/* ---------- Services ---------- */
.group{margin-top:clamp(72px,10vw,128px)}
.group-head{display:flex;justify-content:space-between;align-items:end;gap:16px 24px;flex-wrap:wrap;padding-bottom:24px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.group-head .label{margin-bottom:14px;color:var(--glint)}
.group-head .count{font:500 13px var(--mono);color:var(--dust);margin:0}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.tile{--span:6;grid-column:span var(--span);position:relative;isolation:isolate;min-width:0;display:grid;gap:28px;align-content:start;padding:clamp(24px,3vw,40px);border-radius:30px;background:linear-gradient(180deg,rgba(15,23,35,.82),rgba(5,8,13,.94));border:1px solid var(--line);overflow:hidden}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(460px circle at var(--mx,50%) var(--my,-20%),rgba(140,200,255,.11),transparent 62%);opacity:0;transition:opacity .5s}
.tile:hover::before{opacity:1}
.tile.wide{--span:12;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center}
.tile.wide.flip .t-copy{order:2}
.t-copy{display:grid;gap:14px;align-content:start;min-width:0}
.t-name{display:flex;align-items:center;gap:10px;margin:0;font-size:15px;font-weight:500;color:var(--glint)}
.t-head{font-weight:600;font-size:clamp(1.75rem,2.8vw,2.5rem);line-height:1.04;letter-spacing:-.04em;margin:0;text-wrap:balance}
.t-desc{margin:0;color:var(--dust);max-width:44ch}
.chips-s{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:6px 0 0;padding:0}
.chips-s li{font-size:13px;padding:6px 11px;border-radius:999px;border:1px solid rgba(170,200,240,.14);color:rgba(243,246,250,.78);background:rgba(255,255,255,.02)}
@media (max-width:900px){.tile,.tile.wide{--span:12}.tile.wide{grid-template-columns:minmax(0,1fr)}.tile.wide.flip .t-copy{order:0}}

/* faux-UI kit */
.viz{position:relative;min-width:0}
.panel{background:linear-gradient(180deg,#0b121c,#070b12);border:1px solid rgba(170,200,240,.12);border-radius:16px}
.ln{display:block;height:7px;border-radius:4px;background:rgba(220,232,250,.13)}
.ln.b{background:rgba(235,242,255,.34)}
.ln.xl{height:12px;border-radius:6px}
.mini{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dust);margin:0}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--glint);box-shadow:0 0 10px var(--glint);animation:pulse 2.4s ease-in-out infinite;flex:none}
@keyframes pulse{50%{opacity:.3}}
.spacebg{background-color:#07101a;background-image:var(--space,radial-gradient(60% 60% at 62% 30%,rgba(60,130,190,.4),transparent 70%));background-size:cover;background-position:center}
.off *,.off::before,.off::after{animation-play-state:paused!important}

/* Websites */
.viz-web{padding:6px 0 18px}
.browser{overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.95)}
.b-bar{display:flex;align-items:center;gap:6px;padding:11px 12px;border-bottom:1px solid rgba(170,200,240,.08)}
.b-bar>i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.b-url{margin-inline:auto;font:500 11px/1 var(--mono);color:var(--dust);padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.05)}
.b-page{padding:18px 20px 20px;display:grid;gap:20px}
.b-nav{display:flex;align-items:center;gap:12px}
.b-logo{width:18px;height:18px;border-radius:50%;background:var(--star);margin-right:auto}
.b-nav .ln{width:38px}
.b-btn{width:58px;height:20px;border-radius:999px;background:var(--star)}
.b-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center}
.b-copy{display:grid;gap:10px}
.b-copy .ln{transform-origin:left;animation:typeline 8s var(--ease) infinite}
.b-copy .ln:nth-child(2){animation-delay:.12s}.b-copy .ln:nth-child(3){animation-delay:.24s}.b-copy .ln:nth-child(4){animation-delay:.36s}
@keyframes typeline{0%,4%{transform:scaleX(0)}16%,100%{transform:scaleX(1)}}
.b-cta{width:96px;height:28px;border-radius:999px;background:var(--star);margin-top:8px}
.b-img{aspect-ratio:4/3;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.b-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.b-cards span{height:56px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
.vitals{position:absolute;right:-8px;bottom:0;width:min(236px,62%);display:grid;gap:10px;padding:16px 18px;border-radius:18px;background:rgba(9,15,24,.9);border:1px solid rgba(170,200,240,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.vitals .row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;font-size:13.5px}
.vitals .row span{font:500 11px var(--mono);color:var(--dust)}
.vitals .row b{font-weight:600;font-variant-numeric:tabular-nums}
.vitals .row em{font-style:normal;font-size:11.5px;color:var(--good);padding:3px 9px;border-radius:999px;background:rgba(127,224,180,.1)}
@media (max-width:560px){.vitals{position:relative;right:auto;margin:-36px 8px 0 auto}.b-hero{grid-template-columns:1fr 1fr}}

/* Logo */
.viz-logo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:16px;align-items:stretch}
.logo-art{aspect-ratio:1;border-radius:18px;overflow:hidden;display:grid;place-items:center;border:1px solid rgba(170,200,240,.1);background-color:#060a10;background-image:linear-gradient(rgba(170,200,240,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(170,200,240,.06) 1px,transparent 1px);background-size:22px 22px;background-position:center}
.logo-art svg{width:80%;overflow:visible}
.guides *{fill:none;stroke:rgba(166,228,255,.3);stroke-width:.8;stroke-dasharray:3 4}
.mark-p{fill:var(--star);fill-opacity:1;stroke:var(--star);stroke-width:1.4;stroke-dasharray:620;stroke-dashoffset:0;animation:drawmark 10s var(--ease) infinite}
@keyframes drawmark{0%{stroke-dashoffset:620;fill-opacity:0}38%{stroke-dashoffset:0;fill-opacity:0}52%,90%{stroke-dashoffset:0;fill-opacity:1}100%{stroke-dashoffset:0;fill-opacity:0}}
.planet{fill:var(--glint);transform-box:fill-box;transform-origin:center;animation:planet 10s var(--ease) infinite}
@keyframes planet{0%,40%{transform:scale(0)}52%,90%{transform:scale(1)}100%{transform:scale(0)}}
.logo-side{display:grid;gap:12px;align-content:space-between;padding:16px;border-radius:18px;border:1px solid rgba(170,200,240,.1);background:#060a10}
.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.swatches i{aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.specimen{font-weight:600;font-size:clamp(40px,5vw,56px);line-height:1;letter-spacing:-.05em}

/* Apps */
.viz-apps{height:330px}
.phone{position:absolute;width:136px;aspect-ratio:9/19.2;border-radius:30px;padding:5px;background:#141922;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 70px -24px rgba(0,0,0,.95)}
.phone .isl{position:absolute;top:11px;left:50%;width:38px;height:11px;border-radius:999px;background:#000;transform:translateX(-50%);z-index:3}
.phone .scr{position:relative;height:100%;border-radius:25px;overflow:hidden;background:#070b11}
.p1{left:calc(50% - 138px);top:6px;transform:rotate(-7deg)}
.p2{left:calc(50% + 2px);top:24px;transform:rotate(6deg)}
.cam{display:grid;place-items:center}
.cam .br{position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.7)}
.cam .br.a{top:34px;left:12px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.cam .br.b{top:34px;right:12px;border-left:0;border-bottom:0;border-radius:0 4px 0 0}
.cam .br.c{bottom:52px;left:12px;border-right:0;border-top:0;border-radius:0 0 0 4px}
.cam .br.d{bottom:52px;right:12px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.cam .cnt{text-align:center;line-height:1}
.cam .cnt b{display:block;font-size:46px;font-weight:600;letter-spacing:-.05em}
.cam .cnt span{font:500 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,246,250,.7)}
.cam .shutter{position:absolute;bottom:14px;left:50%;width:30px;height:30px;margin-left:-15px;border-radius:50%;border:3px solid #fff;box-shadow:inset 0 0 0 2px #000,inset 0 0 0 20px rgba(255,255,255,.9)}
.list-scr{padding:34px 10px 10px;display:grid;gap:8px;align-content:start}
.list-scr .ttl{height:12px;width:60%;border-radius:6px;background:rgba(235,242,255,.4);margin-bottom:4px}
.lrow{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:8px;border-radius:12px;background:rgba(255,255,255,.05)}
.lrow i{width:30px;height:30px;border-radius:9px}
.lrow div{display:grid;gap:5px}
.tabbar{position:absolute;left:8px;right:8px;bottom:8px;height:36px;border-radius:18px;background:rgba(30,38,50,.85);display:flex;justify-content:space-around;align-items:center}
.tabbar i{width:14px;height:14px;border-radius:5px;background:rgba(255,255,255,.3)}
.tabbar i:first-child{background:var(--glint)}

/* Shopify apps */
.viz-shop{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:14px;align-items:center}
.admin{padding:14px;display:grid;gap:4px}
.ad-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid rgba(170,200,240,.08)}
.app-ic{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--glint),#4d8fd6);flex:none}
.ad-head b{font-size:14px;font-weight:600;margin-right:auto}
.badge{font-size:11px;color:var(--good);background:rgba(127,224,180,.1);padding:3px 9px;border-radius:999px}
.ad-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--dust);padding:8px 0}
.ad-row .mono{font:500 11px var(--mono);color:var(--star)}
.tog{width:32px;height:19px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;flex:none}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:left .3s var(--ease)}
.tog.on{background:#3d8c6c}.tog.on::after{left:15px}
.tog.flick{animation:flicktog 6s steps(1) infinite}.tog.flick::after{animation:flickknob 6s var(--ease) infinite}
@keyframes flicktog{0%,49%{background:rgba(255,255,255,.14)}50%,100%{background:#3d8c6c}}
@keyframes flickknob{0%,46%{left:2px}54%,100%{left:15px}}
.sws{display:flex;gap:5px}.sws i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.sws i:first-child{box-shadow:0 0 0 2px #070b12,0 0 0 3.5px var(--glint)}
.p-shop{position:relative;width:124px}
@media (max-width:560px){.viz-shop{grid-template-columns:minmax(0,1fr)}.p-shop{display:none}}
.shop-scr{padding:30px 8px 8px;display:grid;gap:7px;align-content:start}
.prod{aspect-ratio:1;border-radius:14px;background:radial-gradient(40% 46% at 50% 58%,#e9c9a2,#b07a4a 60%,transparent 62%),linear-gradient(160deg,#20303f,#0f1822)}
.sticky-bar{position:absolute;left:6px;right:6px;bottom:6px;display:flex;justify-content:space-between;align-items:center;gap:6px;white-space:nowrap;padding:5px 5px 5px 9px;border-radius:14px;background:rgba(20,28,40,.92);border:1px solid rgba(255,255,255,.1);font-size:10px;font-weight:600;animation:stickyup 6s var(--ease) infinite}
.sticky-bar b{background:var(--star);color:#000;border-radius:9px;padding:6px 8px;font-size:9px}
@keyframes stickyup{0%,8%{transform:translateY(140%)}20%,88%{transform:translateY(0)}100%{transform:translateY(140%)}}

/* Software */
.viz-code{overflow:hidden}
.code-bar{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid rgba(170,200,240,.08)}
.code-bar span{font:500 11.5px var(--mono);padding:8px 12px;color:var(--dust);border-radius:8px 8px 0 0}
.code-bar span.on{color:var(--star);background:rgba(255,255,255,.05)}
.code{margin:0;padding:16px 16px 12px;font:400 clamp(11px,1.15vw,13px)/1.75 var(--mono);color:#c6d3e6;white-space:pre;overflow:hidden;counter-reset:l}
.code .l{display:block;padding-left:28px;position:relative}
.code .l::before{counter-increment:l;content:counter(l);position:absolute;left:0;width:16px;text-align:right;color:#3d4757}
.kw{color:var(--glint)}.fn{color:#fff}.nm{color:#f2c9a0}.cm{color:#566173}.pr{color:#9fb0c8}
.caret{display:inline-block;width:7px;height:1.1em;vertical-align:-3px;background:var(--glint);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.term{display:flex;align-items:center;gap:10px;margin:0 12px 12px;padding:10px 12px;border-radius:10px;background:rgba(127,224,180,.07);border:1px solid rgba(127,224,180,.2);font:500 12px var(--mono);color:var(--good)}

/* SEO */
.viz-seo{padding:18px;display:grid;gap:14px}
.g-search{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);font-size:15px}
.g-search .ico{color:var(--dust)}
.g-search .q::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:3px;vertical-align:-3px;background:var(--star);animation:blink 1.1s steps(1) infinite}
.ai-ov{display:grid;gap:9px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(166,228,255,.09),rgba(166,228,255,.02));border:1px solid rgba(166,228,255,.2)}
.ai-ov .mini{color:var(--glint)}
.ai-ov .src{margin:2px 0 0;font-size:12.5px;color:var(--dust)}
.ai-ov .src b{color:var(--star);font-weight:500}
.serp{position:relative;list-style:none;margin:0;padding:0;height:224px}
.serp li{--i:0;position:absolute;left:0;right:0;top:calc(var(--i) * 56px);height:50px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;padding:0 14px;border-radius:13px;transition:top .9s var(--ease),background-color .4s}
.serp .fav{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.1)}
.serp li>div{display:grid;gap:7px}
.serp li b{font-size:12.5px;font-weight:500;color:var(--star)}
.serp .you{z-index:2;background:rgba(166,228,255,.08);box-shadow:inset 0 0 0 1px rgba(166,228,255,.32)}
.serp .you .fav{background:var(--star)}
.serp em{font:600 12px var(--mono);font-style:normal;color:var(--glint);font-variant-numeric:tabular-nums}

/* Google Business Profile */
.viz-gbp{position:relative;height:300px;border-radius:18px;overflow:hidden;border:1px solid rgba(170,200,240,.1);background:#060a10}
.viz-gbp svg.map{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg);background:rgba(220,232,250,.32)}
.pin.you{width:26px;height:26px;background:var(--glint);box-shadow:0 0 26px rgba(166,228,255,.7)}
.pin.you::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#06101a}
.ping{position:absolute;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);border:1.5px solid var(--glint);animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{transform:translate(-50%,-50%) scale(.6);opacity:.9}100%{transform:translate(-50%,-50%) scale(5);opacity:0}}
.gbp-card{position:absolute;left:14px;right:14px;bottom:14px;display:grid;gap:5px;padding:14px 16px;border-radius:18px;background:rgba(9,14,22,.92);border:1px solid rgba(170,200,240,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gbp-card b{font-size:15px;font-weight:600}
.gbp-card .stars{color:var(--glint);letter-spacing:2px;font-size:13px}
.gbp-card .meta{font-size:12.5px;color:var(--dust)}
.gbp-card .meta em{font-style:normal;color:var(--good)}
.gbp-acts{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.gbp-acts span{font-size:12px;padding:6px 11px;border-radius:999px;border:1px solid rgba(170,200,240,.18);color:var(--star)}

/* Lead generation */
.viz-leads{position:relative}
.cols{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.col{display:grid;gap:8px;align-content:start;min-height:236px;padding:10px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
.col .mini{display:flex;justify-content:space-between;padding:4px 2px 6px}
@media (max-width:480px){.col .mini span:last-child{display:none}.col .mini{letter-spacing:.06em}}
.lc{display:grid;gap:7px;padding:10px;border-radius:11px;background:#0c131d;border:1px solid rgba(170,200,240,.1)}
.lc i{font:500 9.5px var(--mono);font-style:normal;color:var(--dust);letter-spacing:.04em}
.mover{position:absolute;top:36px;width:calc((100% - 20px) / 3 - 20px);left:calc(2 * (100% - 20px) / 3 + 30px);border-color:rgba(166,228,255,.5);box-shadow:0 16px 36px -14px rgba(166,228,255,.45);animation:mover 9s var(--ease) infinite}
@keyframes mover{0%{left:10px;opacity:0}6%,24%{left:10px;opacity:1}38%,56%{left:calc((100% - 20px) / 3 + 20px)}70%,94%{left:calc(2 * (100% - 20px) / 3 + 30px);opacity:1}100%{left:calc(2 * (100% - 20px) / 3 + 30px);opacity:0}}
.toast{position:absolute;right:8px;bottom:-14px;display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;background:rgba(9,14,22,.94);border:1px solid rgba(127,224,180,.32);font-size:13px;box-shadow:0 20px 40px -16px rgba(0,0,0,.9);animation:toast 9s var(--ease) infinite}
.toast .ico{color:var(--good);width:16px;height:16px}
@keyframes toast{0%,70%{opacity:0;transform:translateY(8px)}76%,94%{opacity:1;transform:none}100%{opacity:0}}

/* Paid ads */
.viz-ads{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;align-items:stretch}
.ad-card{display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;border-radius:20px;background:#0a1019;border:1px solid rgba(170,200,240,.12)}
.ad-top{display:flex;align-items:center;gap:10px;padding:12px 14px}
.av{width:30px;height:30px;border-radius:50%;background:var(--star);display:grid;place-items:center;color:#000}
.av svg{width:16px;height:16px}
.ad-top div{display:grid;line-height:1.25}
.ad-top b{font-size:13px;font-weight:600}.ad-top span{font-size:11px;color:var(--dust)}
.ad-media{min-height:230px;display:flex;align-items:flex-end;padding:18px}
.ad-copy{font-weight:600;font-size:clamp(20px,2.2vw,26px);line-height:1.02;letter-spacing:-.035em;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.ad-cta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;font-size:11.5px;color:var(--dust)}
.ad-cta b{background:var(--star);color:#000;font-size:12px;font-weight:600;padding:8px 13px;border-radius:999px;white-space:nowrap}
.ad-side{display:grid;gap:12px;align-content:start;min-width:0}
.plats{display:flex;flex-wrap:wrap;gap:6px}
.plats span{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);font-size:12.5px;white-space:nowrap}
.plats span .live{width:6px;height:6px}
.plats span:nth-child(2n) .live{animation-delay:.6s}.plats span:nth-child(3n) .live{animation-delay:1.2s}
.budget{padding:14px 16px;display:grid;gap:10px}
.bud{display:grid;grid-template-columns:62px minmax(0,1fr) 34px;gap:10px;align-items:center;font-size:12.5px;color:var(--dust)}
.bud i{height:8px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.bud i::before{content:"";display:block;height:100%;width:100%;border-radius:5px;background:linear-gradient(90deg,#5d95e0,var(--glint));transform-origin:left;transform:scaleX(var(--v));animation:grow 7s var(--ease) infinite}
@keyframes grow{0%{transform:scaleX(0)}22%,100%{transform:scaleX(var(--v))}}
.bud b{font-weight:500;color:var(--star);text-align:right;font-variant-numeric:tabular-nums}
.spark{padding:14px 16px 10px;display:grid;gap:6px}
.spark svg{width:100%;height:64px;overflow:visible}
@media (max-width:700px){.viz-ads{grid-template-columns:minmax(0,1fr)}.ad-media{min-height:200px}}

/* Social */
.viz-social{padding:16px;display:grid;gap:14px}
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;font-weight:600}
.cal-head span{display:inline-flex;align-items:center;gap:8px;font:500 11px var(--mono);color:var(--dust)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.day{display:grid;gap:6px;align-content:start}
.day .mini{text-align:center;padding-bottom:2px}
.post{position:relative;aspect-ratio:4/5;border-radius:8px;background:var(--g);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.post i{position:absolute;left:3px;bottom:3px;font:600 7.5px/1 var(--mono);font-style:normal;padding:3px 4px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff}
.post.now{box-shadow:0 0 0 1.5px var(--glint),0 0 18px rgba(166,228,255,.4);animation:pulse 2.2s ease-in-out infinite}

/* Video */
.viz-video{display:grid;grid-template-columns:clamp(104px,26%,132px) minmax(0,1fr);gap:14px;align-items:stretch}
.v-frame{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;border:1px solid rgba(170,200,240,.14)}
.v-frame .subj{position:absolute;left:50%;bottom:0;width:62%;height:58%;transform:translateX(-50%);border-radius:48% 48% 0 0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.75))}
.v-frame .subj::before{content:"";position:absolute;left:50%;top:-34%;width:58%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:rgba(0,0,0,.6)}
.caps{position:absolute;left:6px;right:6px;bottom:20%;margin:0;text-align:center;font-weight:700;font-size:12.5px;line-height:1.35;letter-spacing:-.01em;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.caps span{padding:1px 3px;border-radius:4px;animation:word 5s steps(1) infinite;animation-delay:calc(var(--n) * 1s)}
@keyframes word{0%{background:var(--glint);color:#000;text-shadow:none}20%,100%{background:transparent;color:var(--star)}}
.v-ratio{position:absolute;top:8px;left:8px;font:500 9.5px var(--mono);padding:3px 6px;border-radius:5px;background:rgba(0,0,0,.55)}
.v-tl{position:relative;padding:14px;display:grid;gap:8px;align-content:center}
.fmts{display:flex;gap:6px;margin-bottom:6px}
.fmts span{font:500 10.5px var(--mono);padding:5px 8px;border-radius:7px;border:1px solid rgba(170,200,240,.15);color:var(--dust)}
.fmts span.on{background:var(--star);color:#000;border-color:var(--star)}
.trk{display:flex;gap:4px;height:28px}
.trk i{flex:0 0 var(--w);border-radius:7px;background:linear-gradient(180deg,rgba(166,228,255,.32),rgba(166,228,255,.12));border:1px solid rgba(166,228,255,.32)}
.trk.capt{height:16px}.trk.capt i{background:rgba(255,255,255,.16);border-color:transparent}
.trk.aud svg{width:100%;height:28px}
.playhead{position:absolute;top:44px;bottom:12px;left:14px;width:2px;border-radius:2px;background:var(--star);box-shadow:0 0 10px rgba(255,255,255,.6);animation:play 5s linear infinite}
.playhead::before{content:"";position:absolute;top:-5px;left:-4px;width:10px;height:8px;border-radius:2px;background:var(--star)}
@keyframes play{from{left:14px}to{left:calc(100% - 16px)}}

/* Email */
.viz-email{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center}
.flow{display:grid;justify-items:center}
.node{width:min(268px,100%);display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:11px;row-gap:1px;align-items:center;padding:11px 14px;border-radius:15px;background:#0b121c;border:1px solid rgba(170,200,240,.14);font-size:13.5px}
.node .ni{grid-row:span 2;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(166,228,255,.08);color:var(--glint)}
.node .ni .ico{width:16px;height:16px}
.node b{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.edge{position:relative;width:2px;height:24px;background:rgba(170,200,240,.18);overflow:hidden}
.edge::after{content:"";position:absolute;left:0;top:-8px;width:2px;height:8px;background:var(--glint);box-shadow:0 0 8px var(--glint);animation:dot 2.4s linear infinite;animation-delay:var(--d,0s)}
@keyframes dot{to{top:24px}}
.branches{position:relative;width:min(300px,100%);display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:24px}
.branches::before{content:"";position:absolute;top:0;left:25%;right:25%;height:24px;border:2px solid rgba(170,200,240,.18);border-bottom:0;border-radius:12px 12px 0 0}
.node.mini-n{grid-template-columns:minmax(0,1fr);text-align:left;font-size:12.5px}
.node.yes b{color:var(--good)}
.smart{display:grid;gap:12px;min-width:0}
.sm{padding:14px 16px;display:grid;gap:10px}
.heat{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px}
.heat i{height:22px;border-radius:3px;background:rgba(166,228,255,var(--o))}
.heat-x{display:flex;justify-content:space-between;font:500 9.5px var(--mono);color:var(--dust)}
.segs{display:flex;flex-wrap:wrap;gap:6px}
.segs span{font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.fl{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13px}
.fl li{display:flex;align-items:center;gap:9px}
.fl li span{margin-left:auto;font:500 10.5px var(--mono);color:var(--good)}
@media (max-width:700px){.viz-email{grid-template-columns:minmax(0,1fr)}}

/* Strategy */
.viz-plan{padding:18px 18px 22px;overflow:hidden}
.gantt{position:relative;display:grid;grid-template-columns:78px repeat(6,minmax(0,1fr));row-gap:12px;align-items:center}
.gantt .mini{padding-bottom:10px;border-bottom:1px solid var(--line)}
.g-r{font-size:13px;color:var(--dust)}
.gb{height:24px;border-radius:8px;margin-inline:3px;background:linear-gradient(90deg,rgba(166,228,255,.42),rgba(166,228,255,.16));border:1px solid rgba(166,228,255,.38);transform-origin:left;animation:gbar 9s var(--ease) infinite}
.gb.go{background:linear-gradient(90deg,rgba(166,228,255,.22),rgba(166,228,255,.06));border-style:dashed}
@keyframes gbar{0%{transform:scaleX(0)}18%,100%{transform:scaleX(1)}}
.today{position:absolute;top:28px;bottom:-6px;width:1px;background:var(--glint);left:calc(78px + (100% - 78px) / 6 * .5);box-shadow:0 0 10px var(--glint)}
.today span{position:absolute;bottom:-16px;left:6px;font:500 9.5px var(--mono);color:var(--glint);letter-spacing:.1em;text-transform:uppercase}
.plan-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:32px}
.plan-kpis div{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);display:grid;gap:6px}
.plan-kpis b{font-size:15px;font-weight:600}

/* ---------- AI ---------- */
.ai{position:relative}
.ai-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 36% at 36% 58%,rgba(28,90,150,.28),transparent 70%),radial-gradient(30% 30% at 78% 30%,rgba(20,70,110,.2),transparent 70%)}
.ai .h2 .galaxy{display:inline-block}
.ai-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(48px,6vw,72px)}
@media (max-width:960px){.ai-grid{grid-template-columns:minmax(0,1fr)}}
.console{border-radius:28px;background:rgba(6,10,16,.92);border:1px solid rgba(170,200,240,.15);box-shadow:0 60px 140px -50px rgba(40,120,200,.45);overflow:hidden}
.c-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.c-dots{display:flex;gap:6px}.c-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12)}
.c-title{font:500 12px var(--mono);color:var(--dust)}
.c-status{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);color:var(--dust)}
.c-status.done .live{background:var(--good);box-shadow:0 0 10px var(--good);animation:none}
.c-prompts{display:flex;flex-wrap:wrap;gap:8px;padding:16px 18px 0}
.c-prompts button{min-height:40px;padding:0 15px;border-radius:999px;border:1px solid rgba(170,200,240,.16);background:rgba(255,255,255,.035);color:var(--dust);font-size:14px;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.c-prompts button:hover{color:var(--star);border-color:rgba(170,200,240,.3)}
.c-prompts button[aria-pressed="true"]{background:var(--star);color:#000;border-color:var(--star)}
.c-body{display:grid;gap:16px;align-content:start;padding:20px 18px 22px;min-height:440px}
.c-ask{display:flex;align-items:flex-start;gap:12px;margin:0;font-size:clamp(15.5px,1.6vw,17.5px);font-weight:500;letter-spacing:-.01em}
.c-you{flex:none;margin-top:2px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#000;background:var(--star);padding:6px 8px;border-radius:6px}
.c-typed.typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--glint);animation:blink 1s steps(1) infinite}
.c-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.c-steps li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:13px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.055);font-size:14.5px;line-height:1.4}
@media (prefers-reduced-motion:no-preference){.c-steps li.in{animation:stepin .5s var(--ease)}}
@keyframes stepin{from{opacity:0;transform:translateY(8px)}}
.st{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(166,228,255,.25);border-top-color:var(--glint);animation:turn .8s linear infinite}
.st .ico{width:12px;height:12px;stroke-width:2.4;opacity:0}
.c-steps li.done .st{animation:none;border-color:transparent;background:rgba(127,224,180,.14);color:var(--good)}
.c-steps li.done .st .ico{opacity:1}
@keyframes turn{to{transform:rotate(360deg)}}
.tg{font:500 10.5px var(--mono);color:var(--dust);text-align:right}
.c-end{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(127,224,180,.06);border:1px solid rgba(127,224,180,.28)}
.c-end .ico{color:var(--good)}
.c-end b{font-weight:600}
.c-end span{color:var(--dust);font-size:14px}
.c-foot{margin:0;padding:14px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--dust);display:flex;gap:10px;align-items:center}
.ai-lists{display:grid;gap:44px}
.ai-lists h3{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.ai-lists ul{list-style:none;margin:0;padding:0}
.ai-lists li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;padding:15px 0;border-top:1px solid var(--line);color:var(--dust);font-size:15.5px}
.ai-lists li .ico{color:var(--glint);margin-top:3px}
.ai-lists li b{display:block;color:var(--star);font-weight:500;font-size:16.5px;margin-bottom:2px}

/* ---------- Work ---------- */
.work-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.paddles{display:flex;gap:10px}
.paddle{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:var(--star);background:rgba(255,255,255,.05);border:1px solid var(--line);cursor:pointer;transition:background-color .3s,opacity .3s}
.paddle:hover{background:rgba(255,255,255,.1)}
.paddle:disabled{opacity:.3;cursor:default}
.track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:44px var(--edge) 10px;scroll-padding-inline:var(--edge);scrollbar-width:none;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track::after{content:"";flex:0 0 1px}
.wcard{position:relative;isolation:isolate;flex:0 0 clamp(282px,29vw,380px);aspect-ratio:4/5.25;border-radius:30px;overflow:hidden;scroll-snap-align:start;border:1px solid var(--line);background:#06090e}
.wart{position:absolute;inset:0;overflow:hidden}
.wcap{position:absolute;left:10px;right:10px;bottom:10px;display:grid;gap:6px;padding:16px 18px 18px;border-radius:21px;background:rgba(7,11,17,.6);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}
.wcap .mini{color:rgba(243,246,250,.7)}
.wcap h3{margin:0;font-size:23px;font-weight:600;letter-spacing:-.03em}
.wcap p{margin:0;font-size:14px;line-height:1.45;color:rgba(243,246,250,.8)}
.wcap a{justify-self:start;margin-top:2px;font-size:13.5px;font-weight:500;color:var(--glint);text-decoration:none}
.wcap a:hover{text-decoration:underline}
/* art: DisCam */
.a-film{background:radial-gradient(70% 50% at 50% 30%,#2a2026,#0b0809)}
.print{position:absolute;left:50%;top:13%;width:66%;padding:7px 7px 30px;border-radius:3px;background:#f1ece2;transform:translateX(-50%) rotate(-5deg);box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.photo{position:relative;aspect-ratio:3/4;overflow:hidden;background:linear-gradient(180deg,#2c2550 0%,#7c3f5e 34%,#e57b52 60%,#f6be72 78%,#f9dfa8 100%)}
.photo .sun{position:absolute;left:58%;top:52%;width:28%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff6d6,#ffd27a 55%,rgba(255,190,110,0) 72%)}
.photo .hills{position:absolute;left:-10%;right:-10%;bottom:0;height:34%;background:radial-gradient(60% 100% at 30% 100%,#1f1424 70%,transparent 71%),radial-gradient(70% 90% at 85% 100%,#2a1a2c 70%,transparent 71%)}
.photo .leak{position:absolute;right:-20%;top:-10%;width:70%;height:60%;background:radial-gradient(closest-side,rgba(255,120,60,.55),transparent);mix-blend-mode:screen}
.photo .grain{position:absolute;inset:0;opacity:.32;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stamp{position:absolute;right:8%;bottom:6%;font:500 12px var(--mono);color:#ff9a3c;text-shadow:0 0 6px rgba(255,140,40,.9);letter-spacing:.06em}
/* art: RepCam */
.a-rep{background:radial-gradient(80% 60% at 50% 40%,#0e1c2a,#04070b)}
.a-rep .fig{position:absolute;left:50%;top:15%;width:46%;transform:translateX(-50%)}
.a-rep .fig *{vector-effect:non-scaling-stroke}
.a-rep .bones{stroke:rgba(166,228,255,.85);stroke-width:2.5;stroke-linecap:round;fill:none}
.a-rep .jt{fill:#fff}
.a-rep .up{animation:squatU 2.4s ease-in-out infinite}
.a-rep .legs{transform-box:fill-box;transform-origin:50% 100%;animation:squatL 2.4s ease-in-out infinite}
@keyframes squatU{50%{transform:translateY(17px)}}
@keyframes squatL{50%{transform:scaleY(.78)}}
.a-rep .box{position:absolute;left:24%;right:24%;top:10%;bottom:36%;border:1.5px dashed rgba(166,228,255,.45);border-radius:10px}
.a-rep .box span{position:absolute;top:-11px;left:10px;font:500 10px var(--mono);padding:3px 7px;border-radius:5px;background:var(--glint);color:#000}
.a-rep .reps{position:absolute;left:22px;top:22px;line-height:1}
.a-rep .reps b{display:block;font-size:54px;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.a-rep .reps span{font:500 10px var(--mono);letter-spacing:.16em;color:var(--dust)}
/* art: Sticky */
.a-sticky{background:radial-gradient(70% 60% at 50% 30%,#123a3a,#041010)}
.a-sticky .phone{left:50%;top:9%;width:44%;transform:translateX(-50%) rotate(-4deg)}
/* art: FX */
.a-fx{background:linear-gradient(180deg,#07111f,#03070d)}
.a-fx .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(170,200,240,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(170,200,240,.06) 1px,transparent 1px);background-size:100% 28px,40px 100%}
.a-fx svg{position:absolute;left:6%;right:6%;top:12%;width:88%;height:auto}
.a-fx .up{stroke:#6fd6a8;fill:#6fd6a8}.a-fx .dn{stroke:#e98a8a;fill:#e98a8a}
.a-fx line{stroke-width:1}
.a-fx .ma{fill:none;stroke:var(--glint);stroke-width:1.4;opacity:.8}
.a-fx .note{position:absolute;left:8%;right:14%;top:48%;padding:12px 14px;border-radius:14px;background:rgba(10,18,30,.92);border:1px solid rgba(166,228,255,.22);font-size:12.5px;line-height:1.45;color:rgba(243,246,250,.86)}
.a-fx .note .mini{color:var(--glint);margin-bottom:6px}
/* art: Gold */
.a-gold{background:radial-gradient(60% 55% at 50% 36%,#1c1712,#050404 75%)}
.gring{position:absolute;top:16%;width:46%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 210deg,#6d4f1a,#f7e09a,#b98a2e,#fff4c9,#8b6421,#ecc96b,#6d4f1a);-webkit-mask:radial-gradient(closest-side,transparent 74%,#000 76%,#000 97%,transparent 99%);mask:radial-gradient(closest-side,transparent 74%,#000 76%,#000 97%,transparent 99%);filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.gring.g1{left:18%;transform:rotate(-18deg) scaleY(.5)}
.gring.g2{left:36%;top:20%;transform:rotate(22deg) scaleY(.5)}
.glint4{position:absolute;width:22px;height:22px;transform:translate(-50%,-50%);animation:twink 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.glint4::before,.glint4::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:2px;transform:translate(-50%,-50%)}
.glint4::before{width:100%;height:1.5px;box-shadow:0 0 8px #fff}
.glint4::after{width:1.5px;height:100%;box-shadow:0 0 8px #fff}
@keyframes twink{0%,100%{opacity:.2;transform:translate(-50%,-50%) scale(.5)}50%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* art: PetQR */
.a-qr{background:radial-gradient(70% 60% at 50% 32%,#14423f,#03100f)}
.tag{position:absolute;left:50%;top:12%;width:50%;aspect-ratio:1/1.08;transform:translateX(-50%) rotate(6deg);border-radius:30% 30% 26% 26%;background:linear-gradient(160deg,#e8f2ef,#b9cfc9);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 30px 60px -20px rgba(0,0,0,.8);display:grid;place-items:center}
.tag::before{content:"";position:absolute;top:6%;left:50%;width:13%;aspect-ratio:1;margin-left:-6.5%;border-radius:50%;background:#03100f;box-shadow:inset 0 2px 3px rgba(0,0,0,.6)}
.tag canvas{width:56%;margin-top:14%;image-rendering:pixelated;border-radius:4px}
/* art: CapyChews */
.a-capy{background:radial-gradient(70% 60% at 50% 30%,#3a2412,#0d0805)}
.mailc{position:absolute;left:50%;top:9%;width:66%;transform:translateX(-50%) rotate(3deg);border-radius:16px;overflow:hidden;background:#fbf6ef;box-shadow:0 30px 60px -20px rgba(0,0,0,.85);display:grid}
.mailc .hd{height:34px;background:#ff9b4a}
.mailc .gum{display:flex;justify-content:center;gap:6px;padding:16px 10px 10px;flex-wrap:wrap}
.mailc .gum i{width:22px;height:22px;border-radius:44% 44% 40% 40%;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),inset 0 3px 0 rgba(255,255,255,.4)}
.mailc .tx{display:grid;gap:6px;padding:4px 16px 16px;justify-items:center}
.mailc .tx span{display:block;height:7px;border-radius:4px;background:#2b2118;opacity:.75}
.mailc .tx span.s{opacity:.25}
.mailc .btn-m{width:44%;height:22px;border-radius:999px;background:#2b2118;margin-top:6px}
/* art: Logs */
.a-logs{background:radial-gradient(70% 60% at 50% 70%,#5a2a0e,#120703 70%)}
.logs{position:absolute;left:50%;top:16%;width:62%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(2,1fr);gap:4px;justify-items:center}
.logs i{width:100%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle at 46% 52%,#d79e60 0 3px,#b9783f 3px 6px);box-shadow:inset 0 0 0 5px #4a2a14,inset 0 0 0 7px #2c180b,0 10px 20px rgba(0,0,0,.5)}
.logs i:first-child{grid-column:1/-1;width:50%}
.ember{position:absolute;bottom:30%;width:3px;height:3px;border-radius:50%;background:#ffb070;box-shadow:0 0 8px #ff8a3c;animation:ember 4s ease-in infinite;animation-delay:var(--d)}
@keyframes ember{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-160px) translateX(20px);opacity:0}}

/* ---------- Process ---------- */
.steps{position:relative;list-style:none;margin:clamp(48px,6vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.steps::before{content:"";position:absolute;left:22px;right:0;top:22px;height:1px;background:linear-gradient(90deg,rgba(170,200,240,.35),rgba(170,200,240,.35) 85%,transparent)}
.steps::after{content:"";position:absolute;top:21px;left:0;width:90px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--glint),transparent);animation:travel 7s linear infinite}
@keyframes travel{from{left:0}to{left:calc(100% - 90px)}}
.step{position:relative;display:grid;gap:14px;align-content:start}
.s-dot{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#05080d;border:1px solid rgba(170,200,240,.3);font:500 12.5px var(--mono);font-variant-numeric:tabular-nums}
.step h3{margin:8px 0 0;font-size:24px;font-weight:600;letter-spacing:-.03em}
.step p{margin:6px 0 0;color:var(--dust);font-size:15.5px;max-width:28ch}
@media (max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr);gap:30px}
  .steps::before{left:22px;right:auto;top:10px;bottom:10px;width:1px;height:auto;background:linear-gradient(180deg,rgba(170,200,240,.35),rgba(170,200,240,.1))}
  .steps::after{display:none}
  .step{grid-template-columns:44px minmax(0,1fr);column-gap:20px}
  .step h3{margin:6px 0 0}
}

/* ---------- Compare ---------- */
.table-wrap{margin-top:clamp(40px,5vw,64px);overflow-x:auto;border-radius:28px;border:1px solid var(--line);background:rgba(5,8,13,.85)}
.compare{width:100%;min-width:560px;border-collapse:collapse}
.compare th,.compare td{padding:20px 24px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.compare thead th{font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.compare thead th.us{color:var(--star)}
.compare tbody th{font-weight:500;font-size:16.5px;letter-spacing:-.01em}
.compare td{width:24%}
.compare .us{background:rgba(166,228,255,.035)}
.compare tr:last-child>*{border-bottom:0}
.state{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--dust)}
.state .ico{width:18px;height:18px}
.state.yes{color:var(--star)}.state.yes .ico{color:var(--good)}
.state.some .ico{color:#d9c38a}
@media (max-width:620px){.compare{min-width:0}.compare th,.compare td{padding:16px 14px}.compare td{width:64px;text-align:center}.compare tbody th{font-size:15px}.compare thead th{font-size:10px;letter-spacing:.08em}.state .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ---------- Ways to work ---------- */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,64px)}
.way{position:relative;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:14px;padding:clamp(26px,3vw,36px);border-radius:30px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,23,35,.78),rgba(5,8,13,.94))}
.way.rec{border-color:transparent;background:linear-gradient(180deg,rgba(20,34,52,.9),rgba(6,10,16,.96))}
.way.rec .tagline{position:absolute;top:22px;right:22px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#000;background:var(--glint);padding:6px 9px;border-radius:999px}
.way h3{margin:0;font-size:15px;font-weight:500;color:var(--glint)}
.way .wh{color:var(--star);margin:0;font-size:clamp(1.6rem,2.4vw,2.05rem);font-weight:600;line-height:1.05;letter-spacing:-.04em}
.way p{margin:0;color:var(--dust)}
.way ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px;align-content:start}
.way li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.way li .ico{color:var(--good);margin-top:3px;width:16px;height:16px}
.way .btn{justify-self:start;margin-top:12px}
@media (max-width:960px){.ways{grid-template-columns:minmax(0,1fr)}}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px 64px;align-items:start}
@media (max-width:900px){.faq-grid{grid-template-columns:minmax(0,1fr)}}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:clamp(17px,1.7vw,20px);font-weight:500;letter-spacing:-.015em}
.faq-list summary::-webkit-details-marker{display:none}
.plus{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);transition:transform .4s var(--ease),background-color .3s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--star);border-radius:2px}
.plus::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
details[open] .plus{transform:rotate(180deg);background:rgba(255,255,255,.06)}
details[open] .plus::after{transform:rotate(0deg)}
.faq-list summary:hover .plus{background:rgba(255,255,255,.06)}
.faq-list details p{margin:0;padding:0 56px 26px 0;color:var(--dust);max-width:64ch}
@media (prefers-reduced-motion:no-preference){details[open] p{animation:rise .5s var(--ease)}}

/* ---------- Contact ---------- */
.contact .glow{position:absolute;inset:auto 0 0;height:80%;pointer-events:none;background:radial-gradient(50% 50% at 50% 70%,rgba(30,90,150,.25),transparent 70%)}
.contact{position:relative}
.contact-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,80px);align-items:start}
@media (max-width:960px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.contact-side{display:grid;gap:28px;align-content:start}
.mail-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mail-addr{font-size:clamp(20px,2.2vw,26px);font-weight:500;letter-spacing:-.02em;user-select:all}
.copy-btn{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--star);font-size:13.5px;cursor:pointer}
.copy-btn:hover{background:rgba(255,255,255,.09)}
.copy-btn .ico{width:15px;height:15px}
.promise{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.promise li{display:flex;gap:12px;align-items:flex-start;color:var(--dust)}
.promise li .ico{color:var(--glint);margin-top:3px}
.form{display:grid;gap:20px;padding:clamp(22px,3vw,38px);border-radius:30px;background:rgba(6,10,16,.92);border:1px solid rgba(170,200,240,.15);box-shadow:0 60px 140px -60px rgba(40,120,200,.4)}
.field{display:grid;gap:8px}
.field>label,.legend{font-size:14px;color:var(--dust)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:620px){.row2{grid-template-columns:minmax(0,1fr)}}
.input{width:100%;min-height:52px;padding:14px 16px;border-radius:14px;border:1px solid rgba(170,200,240,.18);background:rgba(255,255,255,.035);color:var(--star);font:inherit;font-size:16px;transition:border-color .3s,box-shadow .3s,background-color .3s}
.input::placeholder{color:#5c6779}
.input:focus{outline:none;border-color:rgba(166,228,255,.65);box-shadow:0 0 0 4px rgba(166,228,255,.12);background:rgba(255,255,255,.05)}
.input[aria-invalid="true"]{border-color:#e98a8a}
textarea.input{min-height:120px;resize:vertical}
select.input{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238f9aab' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
select.input option{background:#0b121c;color:var(--star)}
fieldset{border:0;margin:0;padding:0;min-width:0}
.svc{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.svc input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.svc label{min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid rgba(170,200,240,.18);font-size:14px;color:rgba(243,246,250,.8);cursor:pointer;user-select:none;transition:background-color .25s,color .25s,border-color .25s}
.svc label:hover{border-color:rgba(170,200,240,.4)}
.svc input:checked+label{background:var(--star);color:#000;border-color:var(--star)}
.svc input:focus-visible+label{outline:2px solid var(--glint);outline-offset:2px}
.err{margin:0;font-size:13.5px;color:#f1a3a3}
.form .btn{justify-self:start}
.ready{display:grid;gap:14px;padding:20px;border-radius:20px;background:rgba(127,224,180,.06);border:1px solid rgba(127,224,180,.3)}
.ready h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em;display:flex;gap:10px;align-items:center}
.ready h3 .ico{color:var(--good)}
.ready p{margin:0;color:var(--dust)}
.ready .acts{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Footer ---------- */
.footer{padding-block:clamp(72px,9vw,112px) calc(32px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);overflow:hidden}
.f-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.f-grid p{margin:0;color:var(--dust);max-width:34ch}
.f-col h3{margin:0 0 14px;font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.f-col a{text-decoration:none;color:rgba(243,246,250,.85);font-size:15px}
.f-col a:hover{color:var(--star);text-decoration:underline}
.wordmark{margin:clamp(56px,8vw,96px) 0 0;font-weight:600;font-size:clamp(6rem,30vw,25rem);line-height:.78;letter-spacing:-.075em;text-align:center;user-select:none}
.f-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:var(--dust);font-size:14px}
@media (max-width:860px){.f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.f-grid>div:first-child{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee{overflow-x:auto}
}

/* ================= multi-page additions ================= */

/* brand mark */
.mk{display:block;width:34px;height:17px;overflow:visible;flex:none}
.logo{gap:11px}
.logo .mk{width:36px;height:18px}
.av .mk{width:20px;height:10px}

/* logo construction viz */
.lv-guides *{fill:none;stroke:rgba(166,228,255,.3);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.lv-main{stroke-dasharray:96;stroke-dashoffset:0;animation:lvdraw 9s var(--ease) infinite}
.lv-over{animation:lvover 9s var(--ease) infinite}
@keyframes lvdraw{0%{stroke-dashoffset:96}45%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes lvover{0%,40%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}

/* nav */
.nav-links a[aria-current="page"]{color:var(--star);background:rgba(255,255,255,.08)}
.nav-dd{display:flex}
.dd-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:8px 12px 8px 14px;border-radius:999px;border:0;background:none;color:var(--dust);font-size:14.5px;cursor:pointer;transition:color .3s,background-color .3s}
.dd-btn .ico{width:14px;height:14px;transition:transform .35s var(--ease)}
.dd-btn:hover,.dd-btn[aria-expanded="true"]{color:var(--star)}
.dd-btn[aria-current="page"]{color:var(--star);background:rgba(255,255,255,.08)}
.dd-btn[aria-expanded="true"] .ico{transform:rotate(180deg)}
.dd{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:min(1060px,calc(100vw - 32px));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:14px;border-radius:30px;background:rgba(8,12,19,.94);border:1px solid rgba(170,200,240,.15);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);box-shadow:0 40px 100px -30px rgba(0,0,0,.95)}
.dd-col{display:grid;gap:2px;align-content:start;padding:8px}
.dd-col .label{padding:6px 12px 10px;color:var(--glint)}
.dd a{display:grid;gap:2px;padding:10px 12px;border-radius:14px;text-decoration:none;transition:background-color .25s}
.dd a b{font-weight:500;font-size:15px;letter-spacing:-.01em}
.dd a span{font-size:13px;color:var(--dust)}
.dd a:hover,.dd a[aria-current="page"]{background:rgba(255,255,255,.06)}
@media (prefers-reduced-motion:no-preference){.dd:not([hidden]){animation:ddin .35s var(--ease)}}
@keyframes ddin{from{opacity:0;transform:translate(-50%,-6px)}}
@media (max-width:860px){.dd{display:none!important}}
.menu{max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}
.menu .m-group{display:grid;padding:6px 0;border-bottom:1px solid var(--line)}
.menu .m-group:last-child{border-bottom:0}
.menu .m-group .label{padding:12px 16px 6px;color:var(--glint)}
.menu .m-group a{font-size:17px;padding:10px 16px}

/* text links */
.t-link,.more{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-top:6px;font-size:15px;font-weight:500;color:var(--glint);text-decoration:none}
.t-link .ico,.more .ico{width:15px;height:15px;transition:transform .3s var(--ease)}
.t-link:hover .ico,.more:hover .ico{transform:translateX(3px)}
.t-link:hover,.more:hover{color:#d2f1ff}

/* footer */
.f-grid{grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr))}
@media (max-width:860px){.f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wordmark{font-size:clamp(4rem,21vw,19rem)}

/* ---------- service pages ---------- */
.svc-hero{padding-top:calc(clamp(120px,13vw,164px) + env(safe-area-inset-top,0px));padding-bottom:clamp(24px,4vw,48px)}
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,72px);align-items:center}
@media (max-width:980px){.svc-hero-grid{grid-template-columns:minmax(0,1fr)}}
.svc-copy{display:grid;gap:24px;justify-items:start;min-width:0}
.seq>*:nth-child(5){animation-delay:.36s}.seq>*:nth-child(6){animation-delay:.44s}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:13.5px;color:var(--dust)}
.crumbs a{color:var(--dust);text-decoration:none}.crumbs a:hover{color:var(--star)}
.crumbs [aria-current]{color:var(--star)}
.svc-h1{font-size:clamp(2.75rem,5vw,4.6rem)}
@media (max-width:440px){.nav .btn-sm{display:none}}
.ctas.left{justify-content:flex-start}
.outcomes{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:2px 0 0;padding:0}
.outcomes li{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:rgba(10,16,24,.55);font-size:13.5px;color:rgba(243,246,250,.86)}
.outcomes .ico{width:15px;height:15px;color:var(--good)}
.hero-viz{position:relative;min-width:0;padding:clamp(18px,2.6vw,32px);border-radius:34px;background:linear-gradient(180deg,rgba(15,23,35,.82),rgba(5,8,13,.94));border:1px solid var(--line);box-shadow:0 60px 140px -60px rgba(40,120,200,.45)}
.hero-viz .console{box-shadow:none;border-radius:22px}
.hero-viz .viz-gbp{height:340px}
.jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line)}
.jump .label{margin-right:8px}
.jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:999px;border:1px solid rgba(170,200,240,.16);background:rgba(255,255,255,.03);font-size:14px;color:rgba(243,246,250,.86);text-decoration:none;transition:background-color .25s,border-color .25s}
.jump a:hover{background:rgba(255,255,255,.08);border-color:rgba(170,200,240,.32)}
.svc-statement{padding-block:clamp(72px,9vw,128px)}

.subs{--c:3;display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,64px)}
.subs.c2{--c:2}.subs.c4{--c:4}
.sub{position:relative;isolation:isolate;min-width:0;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:12px;padding:clamp(24px,2.6vw,32px);border-radius:28px;background:linear-gradient(180deg,rgba(15,23,35,.82),rgba(5,8,13,.94));border:1px solid var(--line);overflow:hidden;scroll-margin-top:110px}
.sub.w2{grid-column:span 2}
.sub::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),rgba(140,200,255,.11),transparent 62%);opacity:0;transition:opacity .5s}
.sub:hover::before{opacity:1}
.sub:target{border-color:rgba(166,228,255,.45)}
.sub .k{margin:0;font-size:14.5px;font-weight:500;color:var(--glint)}
.sub h3{margin:0;font-size:clamp(1.35rem,2vw,1.7rem);font-weight:600;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.sub .b{margin:0;color:var(--dust);font-size:15.5px}
.sub ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px;align-content:start}
.sub li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:rgba(243,246,250,.86)}
.sub li .ico{width:15px;height:15px;color:var(--good);margin-top:3px}
@media (max-width:1000px){.subs.subs.subs{--c:2}}
@media (max-width:640px){.subs.subs.subs{--c:1}.sub.w2{grid-column:auto}}

.deep{margin-top:clamp(40px,5vw,64px)}
.dv-stage{position:relative;isolation:isolate;min-width:0;min-height:320px;display:grid;align-items:center;padding:clamp(20px,3.2vw,40px);border-radius:24px;overflow:hidden}
.dv-stage::before{content:"";position:absolute;inset:0;z-index:-1;background-color:#07101a;background-image:var(--space,radial-gradient(60% 60% at 62% 30%,rgba(60,130,190,.4),transparent 70%));background-size:cover;background-position:center}
.dv{position:relative;width:min(440px,100%);justify-self:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.dv-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.pill-live,.nt-t{display:inline-flex;align-items:center;gap:8px;font:500 11px var(--mono);color:var(--dust)}
.nt-t{text-transform:uppercase;letter-spacing:.12em;margin:0;font-size:10.5px}
.dv .tg{font:500 10.5px var(--mono);color:var(--dust)}
.dv-check ul{list-style:none;margin:0;padding:8px 10px 12px;display:grid;gap:2px}
.dv-check li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 8px;border-radius:10px;font-size:14px}
.dv-check .sti{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;box-sizing:border-box}
.dv-check .sti .ico{width:12px;height:12px;stroke-width:2.4}
.dv-check li.st-done .sti{background:rgba(127,224,180,.14);color:var(--good)}
.dv-check li.st-live{background:rgba(166,228,255,.05)}
.dv-check li.st-live .sti{border:2px solid rgba(166,228,255,.25);border-top-color:var(--glint);animation:turn 1s linear infinite}
.dv-check li.st-next .sti{border:1.5px dashed rgba(170,200,240,.35)}
.dv-check em{font:500 10.5px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
.dv-check li.st-done em{color:var(--good)}.dv-check li.st-live em{color:var(--glint)}
.dv-pills{padding:18px;display:grid;gap:14px}
.dv-pills .pl{display:flex;flex-wrap:wrap;gap:7px}
.dv-pills .pl span{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);font-size:13.5px}
.dv-pills .pl .live{width:6px;height:6px}
.dv-flow{display:grid;justify-items:center;gap:14px;width:min(320px,100%);box-shadow:none}
.dv-flow>.mini{justify-self:start;color:rgba(243,246,250,.8)}
.dv-flow .node{box-shadow:0 20px 40px -20px rgba(0,0,0,.9)}
.dv-note{overflow:hidden}
.dv-note .nt{margin:0;padding:18px 18px 20px;font-size:15.5px;line-height:1.6;color:rgba(243,246,250,.9)}
.dv-foot{display:flex;align-items:center;gap:9px;padding:12px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dust)}
.dv-foot .ico{width:15px;height:15px;color:var(--glint)}
.dv-metrics{padding:18px;display:grid;gap:14px}
.dv-metrics .mg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dv-metrics .mg div{display:grid;gap:8px;padding:14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.dv-metrics .mg b{font-size:16.5px;font-weight:600;letter-spacing:-.02em;line-height:1.25}

@media (min-width:901px){.steps{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}}

.get{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.get .lead{margin-top:20px}
@media (max-width:900px){.get{grid-template-columns:minmax(0,1fr)}}
.get-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.get-list li{display:flex;gap:12px;align-items:flex-start;padding:17px 0;border-top:1px solid var(--line);font-size:16px}
.get-list .ico{color:var(--good);margin-top:3px}
@media (max-width:560px){.get-list{grid-template-columns:minmax(0,1fr)}}

.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,56px)}
.rel a{position:relative;isolation:isolate;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:clamp(24px,2.6vw,32px);border-radius:28px;text-decoration:none;background:linear-gradient(180deg,rgba(15,23,35,.82),rgba(5,8,13,.94));border:1px solid var(--line);overflow:hidden;transition:transform .45s var(--ease),border-color .3s}
.rel a::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),rgba(140,200,255,.11),transparent 62%);opacity:0;transition:opacity .5s}
.rel a:hover{transform:translateY(-3px);border-color:rgba(166,228,255,.3)}
.rel a:hover::before{opacity:1}
.rel .label{color:var(--glint)}
.rel b{font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:600;letter-spacing:-.035em;line-height:1.05}
.rel .d{color:var(--dust);font-size:15.5px}
.rel .more{margin-top:8px}
@media (max-width:900px){.rel{grid-template-columns:minmax(0,1fr)}}

/* ================= v3: site structure ================= */
.dd-all{grid-column:1/-1;display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin:4px 8px 0;padding:14px 16px!important;border-top:1px solid var(--line);border-radius:0 0 14px 14px!important;font-size:14.5px;font-weight:500;color:var(--glint)}
.dd-all .ico{width:15px;height:15px}

.page-hero{padding-top:calc(clamp(128px,14vw,176px) + env(safe-area-inset-top,0px));padding-bottom:clamp(40px,6vw,72px)}
.page-hero-in{display:grid;gap:24px;justify-items:start;max-width:920px}
.sec-more{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4vw,48px)}
.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}

/* home services index */
.idx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.idx-item{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 22px;gap:18px;align-items:center;padding:22px 10px;border-bottom:1px solid var(--line);text-decoration:none;border-radius:16px;transition:background-color .3s}
.idx-item:hover{background:rgba(255,255,255,.035)}
.idx-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--glint);background:rgba(166,228,255,.06);border:1px solid rgba(166,228,255,.16)}
.idx-ic .ico{width:20px;height:20px}
.idx-t{display:grid;gap:3px;min-width:0}
.idx-t b{font-size:clamp(19px,1.8vw,22px);font-weight:600;letter-spacing:-.025em}
.idx-t .d{font-size:14.5px;color:var(--dust)}
.idx-item .arr{width:18px;height:18px;color:var(--dust);transition:transform .3s var(--ease),color .3s}
.idx-item:hover .arr{transform:translateX(4px);color:var(--star)}
@media (max-width:760px){.idx{grid-template-columns:minmax(0,1fr)}}

/* CTA band */
.cta-band{padding-block:clamp(40px,6vw,80px) var(--section)}
.cta-in{position:relative;isolation:isolate;overflow:hidden;display:grid;justify-items:center;text-align:center;gap:22px;padding:clamp(56px,8vw,112px) clamp(20px,5vw,64px);border-radius:40px;border:1px solid rgba(170,200,240,.16)}
.cta-in::before{content:"";position:absolute;inset:0;z-index:-2;background-color:#06101a;background-image:var(--space,radial-gradient(60% 60% at 62% 30%,rgba(60,130,190,.4),transparent 70%));background-size:cover;background-position:center}
.cta-in::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 80% at 50% 110%,rgba(30,90,150,.4),transparent 70%),linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6))}
.cta-in .h2{max-width:15ch}
.cta-in .lead{max-width:44ch}
.cta-in .ctas{justify-content:center}
.cta-in .mail-row{justify-content:center;margin-top:4px}
.cta-in .mail-addr{font-size:clamp(17px,1.8vw,20px)}

/* work */
.wf{display:flex;flex-wrap:wrap;gap:8px}
.wf button{min-height:40px;padding:0 15px;border-radius:999px;border:1px solid rgba(170,200,240,.16);background:rgba(255,255,255,.035);color:var(--dust);font-size:14px;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.wf button:hover{color:var(--star);border-color:rgba(170,200,240,.3)}
.wf button[aria-pressed="true"]{background:var(--star);color:#000;border-color:var(--star)}
.work-grid,.case-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.case-row{margin-top:clamp(32px,4vw,48px)}
.work-grid .wcard,.case-row .wcard{flex:none;width:auto}
@media (max-width:1000px){.work-grid,.case-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.work-grid,.case-row{grid-template-columns:minmax(0,1fr)}}
a.wcard{display:block;text-decoration:none;color:inherit;transition:transform .45s var(--ease),border-color .3s}
a.wcard:hover{transform:translateY(-4px);border-color:rgba(166,228,255,.32)}
.wcap .more{margin-top:2px;font-size:13.5px}
.empty{color:var(--dust)}

/* case study */
.case-art{position:relative;aspect-ratio:1/1.02;border-radius:34px;overflow:hidden;border:1px solid var(--line);background:#06090e;box-shadow:0 60px 140px -60px rgba(40,120,200,.45)}
.case-art .wart,.nc-art .wart{position:absolute;inset:0}
.facts-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:4px 0 0;padding-top:22px;border-top:1px solid var(--line);width:100%}
.facts-dl div{display:grid;gap:5px;min-width:0}
.facts-dl dt{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.facts-dl dd{margin:0;font-size:15.5px}
.facts-dl a{color:var(--glint);text-decoration:none}
.facts-dl a:hover{text-decoration:underline}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,4vw,40px)}
.pills span{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(170,200,240,.14);font-size:14.5px}
.pills .live{width:6px;height:6px}
.next-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-radius:34px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,23,35,.82),rgba(5,8,13,.94));text-decoration:none;color:inherit;transition:border-color .3s,transform .45s var(--ease)}
.next-card:hover{border-color:rgba(166,228,255,.32);transform:translateY(-3px)}
.nc-art{position:relative;min-height:300px}
.nc-t{display:grid;align-content:center;gap:12px;padding:clamp(28px,4vw,56px)}
.nc-t .label{color:var(--glint)}
.nc-t b{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:600;letter-spacing:-.045em;line-height:1}
.nc-t .d{color:var(--dust);max-width:44ch}
@media (max-width:760px){.next-card{grid-template-columns:minmax(0,1fr)}.nc-art{min-height:260px}}

/* examples */
.subhead{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:12px;margin-top:clamp(48px,6vw,72px);padding-bottom:18px;border-bottom:1px solid var(--line)}
.subhead h3{margin:0;font-size:clamp(20px,2vw,24px);font-weight:600;letter-spacing:-.025em}
.subhead p{margin:0;font-size:14px;color:var(--dust)}
.ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
@media (max-width:1000px){.ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ex-grid{grid-template-columns:minmax(0,1fr)}}
.ex-card{position:relative;min-width:0;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:12px;padding:clamp(24px,2.6vw,32px);border-radius:28px;border:1px dashed rgba(170,200,240,.24);background:rgba(8,12,19,.62);transition:border-color .3s}
.ex-card:hover{border-color:rgba(166,228,255,.45)}
.ex-card .label{color:var(--glint)}
.ex-card h3{margin:0;font-size:clamp(1.2rem,1.7vw,1.45rem);font-weight:600;line-height:1.15;letter-spacing:-.025em;text-wrap:balance}
.ex-card .b{margin:0;color:var(--dust);font-size:15px}
.ex-card ul,.ex-tile ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:9px;align-content:start}
.ex-card li,.ex-tile li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:rgba(243,246,250,.86)}
.ex-card li .ico,.ex-tile li .ico{width:15px;height:15px;color:var(--glint);margin-top:3px}
.ex-tile{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(36px,5vw,56px);padding:clamp(28px,4vw,56px);border-radius:34px;border:1px dashed rgba(170,200,240,.26);background:linear-gradient(180deg,rgba(15,23,35,.72),rgba(5,8,13,.9))}
.ex-tile .ex-main{display:grid;gap:16px;min-width:0}
.ex-tile .label{color:var(--glint)}
.ex-tile h3{margin:0;font-size:clamp(1.7rem,3vw,2.5rem);font-weight:600;line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
.ex-tile .sc{margin:0;color:var(--dust);font-size:17px;max-width:52ch}
.ex-tile h4{margin:8px 0 2px;font-size:15px;font-weight:600}
.ex-gets{display:grid;gap:14px;padding:clamp(20px,2.4vw,28px);border-radius:24px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.ex-gets li .ico{color:var(--good)}
.ex-note{margin:0;font-size:13px;color:var(--dust)}
@media (max-width:900px){.ex-tile{grid-template-columns:minmax(0,1fr)}}

/* sub pages */
.sibs a[aria-current="page"]{background:var(--star);color:#000;border-color:var(--star)}
.sub.feat{grid-template-rows:auto 1fr}
.sub.feat h3{font-size:clamp(1.15rem,1.6vw,1.35rem)}

/* contact */
.nsteps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:n}
.nsteps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;color:var(--dust)}
.nsteps li::before{counter-increment:n;content:counter(n);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(170,200,240,.3);font:500 12px var(--mono);color:var(--star)}
.contact-side h3{margin:8px 0 0;font-size:17px;font-weight:600}

/* ================= v3.1: mega menu, pricing, design viz, chat ================= */
.nav.is-scrolled .nav-in{max-width:940px}
.dd{width:min(1200px,calc(100vw - 32px));grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.25fr);gap:4px;padding:14px}
.dd-col a{grid-template-columns:34px minmax(0,1fr);align-items:center;gap:12px!important}
.mm-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--glint);background:rgba(166,228,255,.06);border:1px solid rgba(166,228,255,.14);transition:background-color .25s,border-color .25s}
.mm-ic .ico{width:16px;height:16px}
.dd-col a:hover .mm-ic,.dd-col a[aria-current="page"] .mm-ic{background:rgba(166,228,255,.14);border-color:rgba(166,228,255,.38)}
.mm-t{display:grid;gap:1px;min-width:0}
.mm-t b{font-weight:500;font-size:14.5px;letter-spacing:-.01em}
.mm-t span{font-size:12.5px;color:var(--dust)}
.mm-side{display:grid;gap:10px;align-content:start;padding:8px}
.dd .mm-feat{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:6px;align-content:end;min-height:206px;padding:20px;border-radius:20px;border:1px solid rgba(170,200,240,.16)}
.mm-feat::before{content:"";position:absolute;inset:0;z-index:-2;background-color:#07101a;background-image:var(--space,radial-gradient(60% 60% at 62% 30%,rgba(60,130,190,.4),transparent 70%));background-size:cover;background-position:center;transition:transform .8s var(--ease)}
.mm-feat:hover::before{transform:scale(1.05)}
.mm-feat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 10%,rgba(0,0,0,.72))}
.mm-feat .label{color:var(--glint)}
.mm-feat b{font-size:23px;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.mm-feat .d{font-size:13px;color:rgba(243,246,250,.82)}
.mm-feat .more{font-size:13.5px;margin-top:4px}
.dd .mm-case{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border:1px solid var(--line)}
.mm-case-art{position:relative;width:64px;height:64px;border-radius:12px;overflow:hidden}
.mm-case-art .wart{position:absolute;inset:0}
.mm-case .label{color:var(--glint);font-size:10.5px}
.mm-case b{font-size:15px;font-weight:600}
.mm-case .d{font-size:12.5px;color:var(--dust)}
.mm-bar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center;margin:6px 8px 0;padding:12px 4px 2px;border-top:1px solid var(--line)}
.dd .mm-bar a{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;font-size:14px;font-weight:500;color:var(--glint)}
.mm-bar .ico{width:14px;height:14px}
.mm-bar .sp{margin-left:auto;color:var(--dust);font-size:13px;padding-right:8px}
@media (max-width:1100px){.dd{grid-template-columns:repeat(4,minmax(0,1fr))}.mm-side{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.dd .mm-feat{min-height:150px}}

/* price */
.price-pill{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:500;color:var(--star);text-decoration:none;border:1px dashed rgba(166,228,255,.38);background:rgba(166,228,255,.05);transition:background-color .3s,border-color .3s}
.price-pill:hover{background:rgba(166,228,255,.1);border-color:rgba(166,228,255,.6)}
.price-pill .ico{width:16px;height:16px;color:var(--glint)}
.price-sec .subhead:first-child{margin-top:0}
.price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.price-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.price-grid.c1{grid-template-columns:minmax(0,1fr)}
@media (max-width:1100px){.price-grid,.price-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.price-grid,.price-grid.c3{grid-template-columns:minmax(0,1fr)}}
.pcard{position:relative;min-width:0;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:14px;padding:clamp(24px,2.6vw,32px);border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,23,35,.82),rgba(5,8,13,.94))}
.pcard.rec{background:linear-gradient(180deg,rgba(20,34,52,.92),rgba(6,10,16,.96));border-color:transparent}
.pcard .tagline{position:absolute;top:22px;right:22px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#000;background:var(--glint);padding:6px 9px;border-radius:999px}
.pcard h3{margin:0;font-size:15px;font-weight:500;color:var(--glint)}
.pcard .pr{color:var(--star);margin:0;font-size:clamp(2.2rem,3.4vw,2.9rem);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.pcard .pr small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--dust);margin-left:6px}
.pcard .pr.word{font-size:clamp(1.6rem,2.4vw,2rem);letter-spacing:-.035em}
.pcard .d{margin:0;color:var(--dust);font-size:15px}
.pcard ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.pcard li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.pcard li .ico{width:16px;height:16px;color:var(--good);margin-top:2px}
.pcard .btn{justify-self:start}
.pcard.wide{grid-template-columns:minmax(0,5fr) minmax(0,4fr) auto;grid-template-rows:auto;align-items:center;gap:20px 40px}
.pcard.wide .pc-a{display:grid;gap:12px}
@media (max-width:900px){.pcard.wide{grid-template-columns:minmax(0,1fr)}}
.price-note{margin:24px 0 0;color:var(--dust);font-size:15px;max-width:70ch}

/* design viz */
.viz-design{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px;align-items:stretch}
.dz-poster{position:relative;display:grid;align-content:end;gap:10px;min-height:300px;padding:22px;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -24px rgba(0,0,0,.9)}
.dz-poster::after{content:"";position:absolute;inset:10px;border:1px dashed rgba(166,228,255,.28);border-radius:10px;pointer-events:none}
.dz-poster .mini{position:absolute;top:20px;left:22px;color:rgba(243,246,250,.7)}
.dz-poster b{font-size:clamp(22px,2.4vw,30px);font-weight:600;line-height:1;letter-spacing:-.04em;max-width:9ch}
.dz-poster .mk{width:44px;height:22px}
.dz-stack{display:grid;gap:14px;align-content:stretch}
.dz-card{display:grid;align-content:space-between;gap:16px;padding:18px;border-radius:14px;background:#000;border:1px solid rgba(170,200,240,.16);aspect-ratio:85/55;box-shadow:0 24px 50px -24px rgba(0,0,0,.9);transform:rotate(-3deg);transition:transform .6s var(--ease)}
.dz-card:hover{transform:rotate(0)}
.dz-card .mk{width:34px;height:17px}
.dz-card b{font-size:14px;font-weight:600;display:block}
.dz-card em{font:500 10px var(--mono);font-style:normal;color:var(--dust)}
.dz-post{display:grid;align-content:end;gap:4px;padding:16px;border-radius:14px;background:linear-gradient(150deg,#a6e4ff,#3f7fc4 60%,#0b1824);min-height:120px;color:#04121e}
.dz-post b{font-size:22px;font-weight:600;letter-spacing:-.04em;line-height:1}
.dz-post span{font-size:12px;font-weight:500}
@media (max-width:560px){.viz-design{grid-template-columns:minmax(0,1fr)}}

/* chat assistant */
.bot{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;display:grid;justify-items:end;gap:12px;pointer-events:none}
.bot>*{pointer-events:auto}
.bot-launch{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:6px 18px 6px 6px;border-radius:999px;border:1px solid rgba(170,200,240,.22);background:rgba(9,13,20,.88);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--star);font:500 14.5px var(--font);cursor:pointer;box-shadow:0 20px 50px -20px rgba(0,0,0,.95);transition:transform .3s var(--ease),border-color .3s}
.bot-launch:hover{transform:translateY(-2px);border-color:rgba(166,228,255,.45)}
.bot.open .bot-launch .bot-l{display:none}
.bot.open .bot-launch{padding:6px}
.bot-av{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:17px;color:#04121e;background:radial-gradient(circle at 30% 25%,#eef8ff,#a6e4ff 45%,#4f8fd0 100%);background-size:cover;background-position:center;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 0 3.5px rgba(166,228,255,.5)}
.bot-av.bot-av-s{width:30px;height:30px;font-size:13px}
.bot-on{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--good);box-shadow:0 0 0 2.5px #05080d}
@media (prefers-reduced-motion:no-preference){.bot-on{animation:pulse 2.4s ease-in-out infinite}}
.bot-teaser{position:relative;width:min(340px,calc(100vw - 32px));display:grid;gap:12px;padding:16px 18px;border-radius:22px 22px 6px 22px;background:rgba(9,13,20,.95);border:1px solid rgba(170,200,240,.2);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 30px 70px -24px rgba(0,0,0,.95);cursor:pointer}
@media (prefers-reduced-motion:no-preference){.bot-teaser:not([hidden]),.bot-panel:not([hidden]){animation:botin .5s var(--ease)}}
@keyframes botin{from{opacity:0;transform:translateY(12px) scale(.98)}}
.bot-who{display:flex;align-items:center;gap:10px;padding-right:26px}
.bot-who b{font-size:14.5px;font-weight:600}
.bot-ai{font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--glint);padding:3px 7px;border-radius:999px;border:1px solid rgba(166,228,255,.32)}
.bot-teaser p{margin:0;font-size:14.5px;line-height:1.5;color:rgba(243,246,250,.92)}
.bot-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:var(--dust);font-size:20px;line-height:1;cursor:pointer}
.bot-x:hover{color:var(--star);background:rgba(255,255,255,.07)}
.bot-quick{display:flex;flex-wrap:wrap;gap:6px}
.bot-quick:empty{display:none}
.bot-quick button,.bot-quick a{min-height:34px;padding:0 13px;border-radius:999px;border:1px solid rgba(170,200,240,.22);background:rgba(255,255,255,.04);color:var(--star);font:500 13px var(--font);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:background-color .25s}
.bot-quick button:hover,.bot-quick a:hover{background:rgba(255,255,255,.1)}
.bot-quick a.pri{background:var(--star);color:#000;border-color:var(--star)}
.bot-panel{padding:0;width:min(390px,calc(100vw - 32px));height:min(590px,calc(100dvh - 120px));display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;border-radius:24px;overflow:hidden;background:rgba(7,11,17,.97);border:1px solid rgba(170,200,240,.2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 40px 100px -30px rgba(0,0,0,.95)}
.bot-head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border-bottom:1px solid var(--line)}
.bot-head>div{display:grid;gap:3px;min-width:0;margin-right:auto}
.bot-head b{font-size:15px;font-weight:600}
.bot-head span.s{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dust)}
.bot-close{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.06);color:var(--star);font-size:20px;line-height:1;cursor:pointer}
.bot-close:hover{background:rgba(255,255,255,.12)}
.bot-log{overflow-y:auto;padding:16px;display:grid;gap:10px;align-content:start;overscroll-behavior:contain}
.msg{max-width:86%;padding:10px 14px;border-radius:18px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.bot-m{justify-self:start;background:rgba(255,255,255,.065);border-bottom-left-radius:6px}
.msg.me{justify-self:end;background:var(--star);color:#000;border-bottom-right-radius:6px}
.msg.typing{color:var(--dust)}
.bot-panel .bot-quick{padding:0 16px 10px}
.bot-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.bot-in{flex:1;min-width:0;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(170,200,240,.22);background:rgba(255,255,255,.04);color:var(--star);font:inherit;font-size:16px}
.bot-in::placeholder{color:#5c6779}
.bot-in:focus{outline:none;border-color:rgba(166,228,255,.6);box-shadow:0 0 0 4px rgba(166,228,255,.1)}
.bot-send{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--star);color:#000;display:grid;place-items:center;cursor:pointer}
.bot-send .ico{width:18px;height:18px}
.bot-foot{margin:0;padding:0 16px 12px;font-size:11.5px;color:var(--dust)}
.bot-foot a{color:var(--glint)}
@media (max-width:520px){.bot-l{display:none}.bot-launch{padding:6px}}

/* ================= v3.2: results system ================= */
.dash{position:relative;display:grid;gap:14px;margin-top:clamp(36px,5vw,56px);padding:clamp(14px,2vw,22px);border-radius:32px;background:linear-gradient(180deg,rgba(14,22,34,.9),rgba(5,8,13,.96));border:1px solid rgba(170,200,240,.16);box-shadow:0 60px 140px -60px rgba(40,120,200,.5)}
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 6px 2px}
.dash-brand{display:inline-flex;align-items:center;gap:10px}
.dash-brand b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.dash-brand .mk{width:30px;height:15px}
.sample-pill{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#f1d9a0;padding:6px 10px;border-radius:999px;border:1px solid rgba(241,217,160,.35);background:rgba(241,217,160,.06)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpi{position:relative;display:grid;gap:8px;align-content:start;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(170,200,240,.1);min-width:0}
.kpi b{font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.04em;line-height:1}
.kpi .delta{position:absolute;top:14px;right:14px;font:600 11.5px var(--font);color:#06261a;background:var(--good);padding:4px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi .delta{position:static;justify-self:start}}
.dash-main{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:10px}
@media (max-width:960px){.dash-main{grid-template-columns:minmax(0,1fr)}}
.dash-chart,.dash-feed{min-width:0;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(170,200,240,.1)}
.dc-head,.df-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.dc-lg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dust)}
.dc-lg .sw{display:inline-block;width:14px;height:2px;border-radius:2px;margin-left:8px}
.dc-lg .sw.a{background:var(--glint)}
.dc-lg .sw.b{background:repeating-linear-gradient(90deg,#6a7486 0 4px,transparent 4px 7px)}
.dc-plot{position:relative;height:220px;margin-left:44px}
.dc-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dc-y{position:absolute;left:-44px;top:0;bottom:0;width:38px}
.dc-y span{position:absolute;right:0;transform:translateY(-50%);font:500 10.5px var(--mono);color:var(--dust)}
.dc-grid line{stroke:rgba(170,200,240,.09);stroke-width:1;vector-effect:non-scaling-stroke}
.dc-line{fill:none;stroke:var(--glint);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(166,228,255,.45))}
.dc-ref{fill:none;stroke:#6a7486;stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.dc-dot{fill:#05080d;stroke:var(--glint);stroke-width:2;vector-effect:non-scaling-stroke}
.dc-end{fill:#fff;filter:drop-shadow(0 0 8px rgba(166,228,255,.9))}
.dc-s{clip-path:inset(-24px -24px -24px -24px);transition:clip-path 2.2s var(--ease)}
.dc-m,.dc-pin{transition:opacity .6s ease 1.5s}
.dash.pre .dc-s{clip-path:inset(-24px 100% -24px -24px)}
.dash.pre .dc-m,.dash.pre .dc-pin{opacity:0}
.dc-plot{cursor:crosshair;touch-action:pan-y}
.dc-cross{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(166,228,255,.55) 20%,rgba(166,228,255,.55) 80%,transparent);opacity:0;pointer-events:none;transition:opacity .2s}
.dc-cross::after{content:"";position:absolute;left:-5px;top:var(--y,50%);width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:#05080d;border:2px solid var(--glint);box-sizing:border-box}
.dc-tip{position:absolute;top:0;z-index:2;min-width:132px;padding:10px 12px;border-radius:12px;background:rgba(9,14,22,.96);border:1px solid rgba(170,200,240,.22);box-shadow:0 16px 36px -14px rgba(0,0,0,.9);pointer-events:none;opacity:0;transition:opacity .2s;font-size:12px;color:var(--dust);display:grid;gap:4px}
.dc-tip b{font-size:12px;color:var(--star);font-weight:600}
.dc-tip span{display:flex;justify-content:space-between;gap:14px;align-items:center}
.dc-tip span em{font-style:normal;color:var(--star);font-variant-numeric:tabular-nums;font-weight:600}
.dc-tip i{display:inline-block;width:10px;height:2px;margin-right:6px;vertical-align:middle;background:var(--glint)}
.dc-tip i.b{background:repeating-linear-gradient(90deg,#6a7486 0 3px,transparent 3px 5px)}
.dc-plot.hov .dc-cross,.dc-plot.hov .dc-tip{opacity:1}
.dc-pin i{position:absolute;left:50%;bottom:0;width:1px;height:12px;background:rgba(166,228,255,.5)}
.dc-pin{position:absolute;transform:translate(-50%,-100%);pointer-events:none;display:grid;justify-items:center}
.dc-pin em{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;margin-bottom:12px;border-radius:999px;background:rgba(9,14,22,.94);border:1px solid rgba(170,200,240,.2);font:500 11.5px var(--font);font-style:normal;color:var(--star);white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.9)}
.dc-pin .av{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#04121e;background:radial-gradient(circle at 30% 25%,#eef8ff,#a6e4ff 45%,#4f8fd0 100%)}
.dc-x{display:flex;justify-content:space-between;margin:10px 0 0 44px;font:500 10.5px var(--mono);color:var(--dust)}
@media (max-width:560px){.dc-pin em{font-size:10.5px}.dc-pin:nth-of-type(odd){display:none}.dc-x span:nth-child(even){visibility:hidden}.dc-plot{height:180px}}
.feed-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fi{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(170,200,240,.08)}
.fi:first-child{border-color:rgba(166,228,255,.32);background:rgba(166,228,255,.06)}
@media (prefers-reduced-motion:no-preference){.fi.in{animation:fiin .6s var(--ease)}}
@keyframes fiin{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.fi-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--glint);background:rgba(166,228,255,.08);border:1px solid rgba(166,228,255,.18)}
.fi-ic .ico{width:16px;height:16px}
.fi-t,.fi-v{display:grid;gap:2px;min-width:0}
.fi-t b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-t span{font-size:12px;color:var(--dust);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-v{text-align:right}
.fi-v b{font-size:13px;font-weight:600;color:var(--good);white-space:nowrap}
.fi-v span{font:500 10.5px var(--mono);color:var(--dust);white-space:nowrap}
.dash-note{margin:14px 0 0;font-size:13px;color:var(--dust)}
.rr .dash-chart+.dash-chart{margin-top:0}

.wstats{display:flex;gap:16px;margin:2px 0 4px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.wstats span{display:grid;gap:2px;font-size:11.5px;color:rgba(243,246,250,.75)}
.wstats b{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--star)}

/* industries */
.ind-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:clamp(32px,4vw,48px)}
@media (max-width:1100px){.ind-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.ind-grid{grid-template-columns:minmax(0,1fr)}}
.ind{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border-radius:18px;background:linear-gradient(180deg,rgba(15,23,35,.8),rgba(5,8,13,.92));border:1px solid var(--line);text-decoration:none;color:inherit;transition:border-color .3s}
.ind:hover{border-color:rgba(166,228,255,.3)}
.ind-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#04121e;background:linear-gradient(150deg,#d6f2ff,#7fb8ea)}
.ind-ic .ico{width:18px;height:18px}
.ind-t{display:grid;gap:3px;min-width:0}
.ind-t b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.ind-t span{font-size:12px;color:var(--dust)}
.ind-t a{color:var(--glint);text-decoration:none;position:relative;z-index:1}
.ind-t a:hover{text-decoration:underline}
.ind-more{border-style:dashed}
.ind-more .ind-ic{background:rgba(166,228,255,.08);color:var(--glint);border:1px solid rgba(166,228,255,.2)}
.ind .arr{width:16px;height:16px;color:var(--dust)}

/* locations */
.loc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;margin-top:clamp(32px,4vw,48px);align-items:stretch}
@media (max-width:900px){.loc-grid{grid-template-columns:minmax(0,1fr)}}
.loc-map{position:relative;border-radius:30px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(70% 70% at 45% 45%,rgba(30,80,130,.28),transparent 70%),linear-gradient(180deg,rgba(10,16,26,.9),rgba(4,7,12,.96));padding:clamp(14px,3vw,30px)}
.loc-map svg{display:block;width:100%;height:auto;overflow:visible}
.loc-map .edges line{stroke:rgba(166,228,255,.22);stroke-width:1;stroke-dasharray:3 5}
.loc-map .halo{fill:rgba(166,228,255,.1)}
.loc-map .core{fill:#fff;filter:drop-shadow(0 0 6px rgba(166,228,255,.9))}
.loc-map text{fill:rgba(243,246,250,.85);font:500 13px var(--font)}
.loc-map .big text{font-weight:600;fill:var(--star)}
@media (prefers-reduced-motion:no-preference){.loc-map .halo{animation:twinkle 4s ease-in-out infinite}.loc-map .star:nth-child(3n) .halo{animation-delay:1.3s}.loc-map .star:nth-child(3n+1) .halo{animation-delay:2.6s}}
@keyframes twinkle{50%{opacity:.25}}
.loc-side{display:grid;grid-template-rows:1fr auto;gap:12px}
.loc-list{list-style:none;margin:0;padding:clamp(16px,2vw,22px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;border-radius:30px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,23,35,.8),rgba(5,8,13,.92));align-content:start}
.loc-list li{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid rgba(170,200,240,.07);font-size:15px}
.loc-dot{width:7px;height:7px;border-radius:50%;background:var(--glint);box-shadow:0 0 10px var(--glint);flex:none}
.loc-list b{font-weight:500}
.loc-more{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-radius:22px;border:1px dashed rgba(166,228,255,.3);text-decoration:none;color:inherit;transition:background-color .3s}
.loc-more:hover{background:rgba(166,228,255,.05)}
.loc-more>span{display:grid;gap:2px}
.loc-more b{font-size:16px;font-weight:600}
.loc-more span span{font-size:13px;color:var(--dust)}
.loc-more .ico{color:var(--glint)}

/* what we measure */
.msr-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:clamp(32px,4vw,48px)}
@media (max-width:1100px){.msr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.msr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.msr-grid{grid-template-columns:minmax(0,1fr)}}
.msr{display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:20px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,23,35,.8),rgba(5,8,13,.92));text-decoration:none;color:inherit;transition:border-color .3s,transform .45s var(--ease)}
.msr:hover{border-color:rgba(166,228,255,.3);transform:translateY(-3px)}
.msr b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.msr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start}
.msr li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:rgba(243,246,250,.85)}
.msr li .ico{width:14px;height:14px;color:var(--good);margin-top:3px}
.msr .more{font-size:13.5px;margin-top:0}

@media (max-width:600px){.loc-map .star:not(.big) text{display:none}.loc-map .big text{font-size:24px}.loc-map .core{r:5px}}
.kpi .num{font-variant-numeric:tabular-nums}

[hidden]{display:none!important}
.loc-map .dust circle{fill:#cfe6ff}
.loc-cap{position:absolute;left:clamp(18px,3vw,30px);bottom:clamp(14px,2.4vw,24px);font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.dc-plot.hov .dc-pin{opacity:.12;transition:opacity .25s}

/* ================= v3.3: free tools ================= */
.tool{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.tool{grid-template-columns:minmax(0,1fr)}}
.tool-form,.tool-out{border-radius:30px;padding:clamp(20px,2.6vw,32px);border:1px solid rgba(170,200,240,.15)}
.tool-form{display:grid;gap:20px;background:rgba(6,10,16,.92)}
.tool-out{position:sticky;top:96px;display:grid;gap:14px;align-content:start;background:linear-gradient(180deg,rgba(16,26,40,.92),rgba(6,10,16,.96));box-shadow:0 60px 140px -60px rgba(40,120,200,.5)}
@media (max-width:900px){.tool-out{position:static}}
.fld{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.fld>label,.fld>legend,.fld .lab{font-size:14px;color:var(--dust);padding:0;margin-bottom:8px}
fieldset.fld>legend{float:left;width:100%}
fieldset.fld>legend+*{clear:both}
.fld .hint{font-size:12.5px;color:#6f7a8c;line-height:1.45}
.input.sm{min-height:0;resize:vertical}
.input.xs{min-height:40px;padding:8px 10px;font-size:14px;border-radius:10px}
.affix{position:relative}
.affix span{position:absolute;top:50%;transform:translateY(-50%);color:var(--dust);font-size:16px;pointer-events:none}
.affix.ax-pre span{left:16px}
.affix.ax-pre .input{padding-left:32px}
.affix.ax-post span{right:16px}
.affix.ax-post .input{padding-right:36px}
.input[type=number]{-moz-appearance:textfield}
.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.seg{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;padding:4px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(170,200,240,.14)}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{display:grid;place-items:center;min-height:44px;padding:6px 10px;border-radius:12px;font-size:14px;text-align:center;color:rgba(243,246,250,.78);cursor:pointer;transition:background-color .25s,color .25s;line-height:1.25}
.seg label:hover{color:var(--star)}
.seg input:checked+label{background:var(--star);color:#05080d;font-weight:500}
.seg input:focus-visible+label{outline:2px solid var(--glint);outline-offset:2px}
.check{display:flex;gap:10px;align-items:center;font-size:14px;color:rgba(243,246,250,.85);cursor:pointer}
.check input{width:20px;height:20px;accent-color:#a6e4ff;margin:0}
.range{display:flex;align-items:center;gap:14px}
.range input{flex:1;accent-color:#a6e4ff;height:28px}
.range output{min-width:44px;text-align:center;font:600 18px var(--font);padding:6px 10px;border-radius:12px;background:rgba(166,228,255,.08);border:1px solid rgba(166,228,255,.2)}
.t-big{margin:0;font-size:clamp(40px,5vw,60px);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.t-big.neg{color:#f1a3a3}
.t-big.good{color:var(--good)}
.t-sub{margin:0;color:var(--dust);font-size:15px;line-height:1.5}
.t-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 0}
.t-stats.one{grid-template-columns:minmax(0,1fr)}
.t-stats>div{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(170,200,240,.08);min-width:0}
.t-stats>div[hidden]{display:none}
.t-stats dt{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dust);margin-bottom:6px}
.t-stats dd{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.t-note{margin:0;font-size:13px;color:var(--dust);line-height:1.5}
.verdict{margin:0;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;font-size:14.5px;line-height:1.45}
.verdict::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;margin-top:7px}
.verdict[data-k=good]{background:rgba(127,224,180,.08);border:1px solid rgba(127,224,180,.28);color:#c9f3df}
.verdict[data-k=good]::before{background:var(--good);box-shadow:0 0 10px var(--good)}
.verdict[data-k=bad]{background:rgba(241,163,163,.08);border:1px solid rgba(241,163,163,.3);color:#f6cccc}
.verdict[data-k=bad]::before{background:#f1a3a3;box-shadow:0 0 10px #f1a3a3}
.verdict[data-k=warn]{background:rgba(241,217,160,.07);border:1px solid rgba(241,217,160,.3);color:#f3e2bb}
.verdict[data-k=warn]::before{background:#f1d9a0}
.res-cta{display:grid;gap:12px;justify-items:start;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.res-cta p{margin:0;font-size:15px;line-height:1.5;color:var(--star)}
.pk-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pk-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;border:1px solid rgba(170,200,240,.08);color:var(--dust);font-size:14.5px}
.pk-list li.on{border-color:rgba(166,228,255,.45);background:rgba(166,228,255,.07);color:var(--star)}
.pk-list li b{font-weight:600;color:inherit}
.cmp{display:grid;gap:6px}
.cmp-r{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;gap:12px;align-items:center;padding:10px 14px;border-radius:12px;border:1px solid rgba(170,200,240,.08);font-size:14.5px}
.cmp-r.me{border-color:rgba(166,228,255,.45);background:rgba(166,228,255,.06)}
.cmp-r em{font-style:normal;margin-left:8px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#06261a;background:var(--good);padding:3px 7px;border-radius:999px}
.cmp-r i{font-style:normal;color:var(--dust);text-align:right;font-size:13px}
.rates{border-radius:16px;border:1px solid rgba(170,200,240,.12);padding:12px 14px}
.rates summary{cursor:pointer;font-size:14px;color:var(--dust)}
.rates[open] summary{margin-bottom:10px}
.rt{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:6px 8px;align-items:center;margin-top:10px;font-size:12.5px;color:var(--dust)}
.rt b{font-weight:500;color:var(--star);font-size:12.5px}
.code-row{padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.45);border:1px solid rgba(170,200,240,.14)}
.code-row code{font:500 13.5px/1.55 var(--mono);color:var(--glint);word-break:break-all}
.acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.acts a.copy-btn{text-decoration:none}
a.copy-btn[aria-disabled]{opacity:.45;pointer-events:none}
.warns{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.warns li{font-size:13.5px;color:#f3e2bb;padding-left:16px;position:relative;line-height:1.45}
.warns li::before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:#f1d9a0}
.presets{display:flex;flex-wrap:wrap;gap:6px}
.presets button{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(170,200,240,.18);background:transparent;color:rgba(243,246,250,.82);font:inherit;font-size:13px;cursor:pointer;transition:background-color .2s,border-color .2s}
.presets button:hover{border-color:rgba(166,228,255,.5);background:rgba(166,228,255,.06)}
.qr-box{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:center;padding:14px;border-radius:16px;border:1px solid rgba(170,200,240,.1);background:rgba(255,255,255,.025)}
.qr-box canvas{width:132px;height:132px;border-radius:10px;image-rendering:pixelated;background:#fff}
.msgs{display:grid;gap:10px}
.msg-c{display:grid;gap:8px}
.msg-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.msg-h b{font-size:14px;font-weight:600}
.msg-h>span{display:flex;gap:6px}
.msg-h .copy-btn{min-height:32px;padding:0 12px;font-size:12.5px}
.meter{display:grid;gap:6px;margin-top:-10px}
.meter i{display:block;height:5px;border-radius:5px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.meter i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:5px;background:var(--good);transition:width .3s var(--ease),background-color .3s}
.meter i::before{content:"";position:absolute;top:-2px;bottom:-2px;left:80%;width:1px;background:rgba(243,246,250,.45);z-index:1}
.meter[data-s=near] i::after{background:#f1d9a0}
.meter[data-s=over] i::after{background:#f1a3a3}
.meter span{font-size:12.5px;color:var(--dust)}
.gserp-wrap{overflow:hidden}
.gserp{box-sizing:border-box;width:640px;padding:18px 20px;border-radius:16px;background:#1f1f1f;border:1px solid rgba(255,255,255,.08);font-family:Arial,Helvetica,sans-serif}
.gserp.mob{width:390px;border-radius:22px}
.gserp-site{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.gfav{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#3c4043;color:#e8eaed;font-size:13px;font-weight:bold}
.gserp-site>span{display:grid;min-width:0}
.gserp-site b{font:normal 14px/20px Arial,Helvetica,sans-serif;color:#dadce0}
.gserp-site em{font:normal 12px/18px Arial,Helvetica,sans-serif;color:#bdc1c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gserp-t{margin:0 0 4px;font-size:20px;line-height:1.3;color:#99c3ff;overflow-wrap:anywhere}
.gserp-d{margin:0;font-size:14px;line-height:1.58;color:#bdc1c6;overflow-wrap:anywhere}
.gserp.mob .gserp-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:18px}
.gserp.mob .gserp-d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ab-grid{display:grid;grid-template-columns:28px repeat(2,minmax(0,1fr));gap:8px 10px;align-items:center}
.ab-grid>b{font-size:13px;font-weight:500;color:var(--dust)}
.ab-grid .ab-l{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.08);color:var(--star);font-weight:600}
.ab-grid .ab-l.b{background:rgba(166,228,255,.16);color:var(--glint)}
.ab-bars{display:grid;gap:8px}
.ab-bars>div{display:grid;grid-template-columns:20px minmax(0,1fr) 60px;gap:10px;align-items:center;font-size:13px}
.ab-bars span{color:var(--dust);font-weight:600}
.ab-bars i{display:block;height:10px;border-radius:0 5px 5px 0;background:rgba(255,255,255,.06);position:relative}
.ab-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:0 5px 5px 0;background:#8b95a6;transition:width .4s var(--ease)}
.ab-bars>div+div i::after{background:var(--glint)}
.ab-bars b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.colour{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 14px 6px 6px;border-radius:14px;border:1px solid rgba(170,200,240,.18);background:rgba(255,255,255,.035)}
.colour input{width:40px;height:40px;border:0;padding:0;background:none;border-radius:10px;cursor:pointer}
.colour span{font:500 14px var(--mono);color:var(--star)}
.sig-prev{padding:22px;border-radius:16px;background:#ffffff;color:#222;overflow-x:auto}
.sig-prev a{pointer-events:none}
.cx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cx i{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.08);transition:background-color .3s}
.cx i.on{background:var(--glint);box-shadow:0 0 10px rgba(166,228,255,.5)}
.brief{margin:0;padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.45);border:1px solid rgba(170,200,240,.14);font:500 13px/1.6 var(--mono);color:rgba(243,246,250,.9);white-space:pre-wrap;overflow-wrap:anywhere}

/* tool page content */
.tool-sec{padding-top:0}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px;color:var(--dust)}
.byline .bot-av{width:28px;height:28px;font-size:12px}
.byline b{color:var(--star);font-weight:500}
.ex-tbl{display:grid;gap:0;margin-top:clamp(28px,4vw,40px);border-radius:24px;overflow:hidden;border:1px solid var(--line)}
.ex-tbl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:15px}
.ex-tbl>div:last-child{border-bottom:0}
.ex-tbl dt{color:var(--dust)}
.ex-tbl dd{margin:0;color:var(--star);font-weight:500;overflow-wrap:anywhere}
.ex-res{margin:18px 0 0;padding:18px 20px;border-radius:20px;background:rgba(166,228,255,.06);border:1px solid rgba(166,228,255,.22);font-size:16px;line-height:1.55;color:var(--star)}
.how-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,40px)}
@media (max-width:900px){.how-grid{grid-template-columns:minmax(0,1fr)}}
.how-grid p{margin:0 0 14px;color:rgba(243,246,250,.82);font-size:16.5px;line-height:1.65}
.formulas{display:grid;gap:10px;align-content:start}
.formula{padding:16px 18px;border-radius:18px;border:1px solid rgba(170,200,240,.14);background:rgba(255,255,255,.03)}
.formula b{display:block;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--glint);margin-bottom:8px}
.formula span{font-size:15.5px;color:var(--star);line-height:1.5}
.tips{list-style:none;margin:clamp(28px,4vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.tips li{display:flex;gap:12px;padding:18px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,23,35,.8),rgba(5,8,13,.92));font-size:15px;line-height:1.55;color:rgba(243,246,250,.85)}
.tips li .ico{flex:none;width:18px;height:18px;color:var(--good);margin-top:2px}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(24px,3vw,32px)}
@media (max-width:900px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tool-grid{grid-template-columns:minmax(0,1fr)}}
.tcard{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:20px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,23,35,.8),rgba(5,8,13,.92));text-decoration:none;color:inherit;transition:border-color .3s,transform .45s var(--ease)}
.tcard:hover{border-color:rgba(166,228,255,.32);transform:translateY(-3px)}
.tcard .ind-ic{width:44px;height:44px}
.tcard b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.015em;margin-bottom:4px}
.tcard span.d{font-size:14px;color:var(--dust);line-height:1.5}
.tcard .free{position:absolute;top:16px;right:16px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--good)}
.tools-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;margin-top:clamp(28px,4vw,40px);padding:clamp(20px,3vw,28px);border-radius:26px;border:1px dashed rgba(166,228,255,.3)}
@media (max-width:700px){.tools-band{grid-template-columns:minmax(0,1fr)}}
.tools-band b{font-size:18px;font-weight:600}
.tools-band p{margin:4px 0 0;color:var(--dust);font-size:14.5px}
.tool-hero{padding-top:calc(clamp(112px,11vw,144px) + env(safe-area-inset-top,0px))!important;padding-bottom:clamp(24px,3vw,36px)!important}
.tool-hero .page-hero-in{gap:18px}
.tool-hero .svc-h1{font-size:clamp(2.5rem,4.4vw,3.9rem)}
.tool-hero .lead{font-size:clamp(17px,1.5vw,19px);max-width:62ch}
.gserp-t,.gserp-d{font-family:Arial,Helvetica,sans-serif;font-weight:normal}
@media (max-width:600px){.byline>span[aria-hidden]{display:none}.byline{gap:4px 12px}}
.tool-hub-sec .subhead:first-child{margin-top:0}

/* ================= v3.4: checklists and templates ================= */
.rs-intro{display:grid;gap:14px;max-width:calc(920px - 2 * var(--gx, 32px));margin:0 auto clamp(28px,3.4vw,40px)}
.rs-intro p{margin:0;font-size:16.5px;line-height:1.65;color:rgba(243,246,250,.8)}
.rs-bar{position:sticky;top:84px;z-index:5;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:14px 16px;margin-bottom:16px;border-radius:22px;background:rgba(8,13,20,.86);border:1px solid rgba(170,200,240,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
@media (max-width:700px){.rs-bar{position:static}}
.rs-prog{display:flex;gap:12px;align-items:center;min-width:0}
.rs-prog>div{display:grid;gap:2px;min-width:0}
.rs-prog b{font-size:15px;font-weight:600}
.rs-prog span{font-size:12.5px;color:var(--dust)}
.rs-ring{width:40px;height:40px;flex:none}
.rs-ring svg{width:40px;height:40px;transform:rotate(-90deg)}
.rs-ring circle{fill:none;stroke-width:3.5;stroke:rgba(255,255,255,.08)}
.rs-ring .fg{stroke:var(--good);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .5s var(--ease)}
.rs-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--glint);background:rgba(166,228,255,.08);border:1px solid rgba(166,228,255,.2)}
.rs-ic .ico{width:18px;height:18px}
.rs-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rs-acts .copy-btn{min-height:36px;font-size:13px}
.rs-tog{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--star);cursor:pointer}
.rs-tog input{accent-color:#a6e4ff;margin:0}
.ck-list{display:grid;gap:14px}
.ck-sec{padding:clamp(18px,2.4vw,26px);border-radius:26px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,23,35,.82),rgba(5,8,13,.94))}
.ck-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.ck-head h3{display:flex;align-items:center;gap:12px;margin:0;font-size:clamp(18px,1.8vw,21px);font-weight:600;letter-spacing:-.02em}
.ck-n{font:500 11px var(--mono);letter-spacing:.08em;color:var(--glint);padding:5px 8px;border-radius:8px;background:rgba(166,228,255,.08);border:1px solid rgba(166,228,255,.18)}
.ck-count{font:500 12px var(--mono);color:var(--dust);white-space:nowrap}
.ck-count.full{color:var(--good)}
.ck-sec ul{list-style:none;margin:0;padding:0;display:grid}
.ck-item{border-top:1px solid rgba(170,200,240,.07)}
.ck-item label{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:14px 4px;cursor:pointer;align-items:start}
.ck-item input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ck-box{width:24px;height:24px;margin-top:1px;border-radius:8px;border:1.5px solid rgba(170,200,240,.35);display:grid;place-items:center;transition:background-color .2s,border-color .2s}
.ck-box .ico{width:14px;height:14px;color:#05080d;opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--ease)}
.ck-item input:checked+.ck-box{background:var(--good);border-color:var(--good)}
.ck-item input:checked+.ck-box .ico{opacity:1;transform:none}
.ck-item input:focus-visible+.ck-box{outline:2px solid var(--glint);outline-offset:2px}
.ck-t{display:block;line-height:1.45}
.ck-t b{font-weight:500;font-size:16px;color:var(--star);transition:color .2s}
.ck-item.done .ck-t b{color:rgba(243,246,250,.5);text-decoration:line-through;text-decoration-color:rgba(243,246,250,.3)}
.must{display:inline-block;margin-left:8px;vertical-align:2px;font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:#f1d9a0;padding:3px 7px;border-radius:999px;border:1px solid rgba(241,217,160,.35)}
.ck-d{display:block;margin-top:4px;font-size:14px;color:var(--dust);line-height:1.55}
.must-only .ck-item:not(.is-must){display:none}
.tp-list{display:grid;gap:14px}
.tp-sec{display:grid;gap:14px;padding:clamp(18px,2.4vw,28px);border-radius:26px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,23,35,.82),rgba(5,8,13,.94))}
.tp-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.tp-h h3{margin:0 0 4px;font-size:clamp(18px,1.8vw,21px);font-weight:600;letter-spacing:-.02em}
.tp-h p{margin:0;font-size:14.5px;color:var(--dust);line-height:1.55}
.tp-f{display:grid;gap:8px}
.tp-f label{font-size:14px;color:rgba(243,246,250,.85);font-weight:500}
.tp-f textarea{min-height:0;line-height:1.55}
.tb-scroll{overflow-x:auto;border-radius:22px;border:1px solid var(--line);background:rgba(6,10,16,.92);-webkit-overflow-scrolling:touch}
.tb-scroll:focus-visible{outline:2px solid var(--glint);outline-offset:2px}
.tb-t{width:100%;min-width:900px;border-collapse:collapse;font-size:14px}
.tb-t th{position:sticky;top:0;text-align:left;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dust);padding:14px 12px;border-bottom:1px solid var(--line);background:rgba(10,16,24,.98);white-space:nowrap}
.tb-t td{padding:4px;border-bottom:1px solid rgba(170,200,240,.06);vertical-align:top}
.tb-t tbody td:not(:has(.cell,output)):not(.t-x){padding:12px}
.tb-t tfoot th,.tb-t tfoot td{padding:14px 12px;border-bottom:0;border-top:1px solid var(--line);font-weight:600;color:var(--star);font-size:15px}
.tb-t tfoot th{font:600 15px var(--font);letter-spacing:0;text-transform:none;position:static;background:none}
.tb-t .t-number{text-align:right;font-variant-numeric:tabular-nums}
.tb-t th.t-number{text-align:right}
.tb-t .t-x{width:40px;text-align:center}
.cell{width:100%;min-width:110px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--star);font:inherit;font-size:14px;padding:8px 10px;line-height:1.45;transition:border-color .2s,background-color .2s;resize:none;overflow:hidden}
.cell:hover{border-color:rgba(170,200,240,.14)}
.cell:focus{outline:none;border-color:rgba(166,228,255,.6);background:rgba(255,255,255,.04)}
textarea.cell{min-width:180px;display:block}
input.cell[type=number]{text-align:right;min-width:90px;-moz-appearance:textfield}
input.cell[type=date]{min-width:150px;color-scheme:dark}
select.cell{min-width:130px;appearance:none;-webkit-appearance:none;cursor:pointer}
select.cell option{background:#0b121c}
.tb-t output{display:block;padding:8px 10px;font-weight:600}
.rm{width:30px;height:30px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--dust);font-size:18px;line-height:1;cursor:pointer}
.rm:hover{border-color:rgba(241,163,163,.4);color:#f1a3a3}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:clamp(28px,4vw,40px)}
.guide-grid div{padding:20px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,23,35,.8),rgba(5,8,13,.92))}
.guide-grid b{display:block;font-size:16px;font-weight:600;margin-bottom:6px}
.guide-grid p{margin:0;font-size:14.5px;color:rgba(243,246,250,.78);line-height:1.6}
.tcard .kind{position:absolute;top:16px;right:16px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--glint)}
.print-view{display:none}

@media print{
  @page{margin:16mm}
  html:has(.has-print),.has-print{background:#fff!important;color:#111!important}
  .has-print #sky,.has-print .skip,.has-print .nav,.has-print .footer,.has-print .bot,.has-print main,.has-print #dd,.has-print #menu{display:none!important}
  .has-print .print-view{display:block!important;font:11pt/1.5 Arial,Helvetica,sans-serif;color:#111}
  .print-view h1{font-size:20pt;margin:0 0 12pt}
  .print-view h2{font-size:13pt;margin:16pt 0 6pt;page-break-after:avoid}
  .print-view h3{font-size:11pt;margin:8pt 0 2pt}
  .print-view p{margin:0 0 6pt}
  .pv-ck{list-style:none;margin:0;padding:0}
  .pv-ck li{position:relative;padding:4pt 0 4pt 22pt;border-bottom:.5pt solid #ddd;page-break-inside:avoid}
  .pv-ck li::before{content:"";position:absolute;left:0;top:6pt;width:11pt;height:11pt;border:1pt solid #333;border-radius:2pt}
  .pv-ck li.on::before{background:#333}
  .pv-ck b{display:block;font-weight:bold}
  .pv-ck span{display:block;color:#555;font-size:9.5pt}
  .pv-t{width:100%;border-collapse:collapse;font-size:8.5pt}
  .pv-t th,.pv-t td{border:.5pt solid #bbb;padding:4pt;text-align:left;vertical-align:top}
  .pv-t th{background:#f2f2f2}
}
.tp .rs-bar,.tb .rs-bar{position:static}
.tp-f textarea{overflow:hidden;resize:none}
.tcard .kind-l{display:block;margin-bottom:6px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--glint)}
.tcard .kind-l.free{color:var(--good)}

/* ================= v4: scroll experience =================
   Everything below is scoped to html.sx, which is only set when motion is allowed and the
   scripts run. Without it, every section keeps its plain, fully visible layout. */

/* ---------- services switcher: base layout (no motion, phones) ---------- */
.svc-sec{padding-top:0}
.wb{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,6vw,72px);margin-top:clamp(40px,5vw,64px)}
.wb-media{display:none}
.wb-list{display:grid;gap:clamp(56px,8vw,88px)}
.wb-blk{display:grid;gap:14px;align-content:center}
.blk-viz{margin-bottom:clamp(12px,2vw,20px);padding:clamp(14px,2.4vw,24px);border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,23,35,.85),rgba(5,8,13,.95));overflow:hidden}
.wb-n{display:flex;align-items:center;gap:12px;margin:0;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--glint)}
.wb-n span{display:grid;place-items:center;min-width:34px;height:24px;padding:0 6px;border-radius:7px;border:1px solid rgba(166,228,255,.24);background:rgba(166,228,255,.06);letter-spacing:.06em}
.wb-h{margin:0;font-size:clamp(34px,4.2vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.045em;max-width:14ch}
.wb-d{margin:0;font-size:clamp(16.5px,1.5vw,19px);line-height:1.55;color:var(--dust);max-width:40ch}
.wb-links{list-style:none;margin:10px 0 0;padding:0;display:grid;border-top:1px solid var(--line)}
.wb-links a{display:grid;grid-template-columns:40px minmax(0,1fr) 20px;gap:16px;align-items:center;padding:16px 6px;border-bottom:1px solid var(--line);text-decoration:none;border-radius:14px;transition:background-color .3s,padding .4s var(--ease)}
.wb-links a:hover{background:rgba(255,255,255,.035);padding-left:12px}
.wb-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--glint);background:rgba(166,228,255,.06);border:1px solid rgba(166,228,255,.16)}
.wb-t{display:grid;gap:2px;min-width:0}
.wb-t b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.wb-t span{font-size:14px;color:var(--dust);line-height:1.45}
.wb-links .arr{color:var(--dust);transition:transform .4s var(--ease),color .3s}
.wb-links a:hover .arr{transform:translateX(4px);color:var(--star)}
.hero-cap{display:none}
#work{padding-top:clamp(64px,7vw,104px)}

/* ---------- page transitions between pages ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .nav-in{view-transition-name:site-nav}
  #sky{view-transition-name:site-sky}
  ::view-transition-old(root){animation:vt-out .26s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:vt-in .55s var(--ease) .04s both}
  @keyframes vt-out{to{opacity:0;transform:scale(.99)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(16px)}}
}

/* ---------- 1. hero scene ---------- */
.sx .hero{height:236vh;height:236svh;padding:0}
.sx .hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.sx .hero-copy{position:absolute;left:0;right:0;top:calc(clamp(104px,14.5vh,168px) + env(safe-area-inset-top,0px));z-index:4;gap:24px;
  transform:translate3d(0,calc(var(--hp,0) * -18vh),0) scale(calc(1 - var(--hp,0) * .14));opacity:calc(1 - var(--hp,0) * 4.2);filter:blur(calc(var(--hp,0) * 22px));will-change:transform,opacity}
.sx .hero.h-gone .hero-copy{visibility:hidden}
.sx .hero-stage{position:absolute;inset:0;max-width:none;padding:0;margin:0}
.sx .hero .stage{position:absolute;inset:0;height:auto;margin:0;display:block}
.sx .hero #inf{position:absolute;inset:0;width:100%;height:100%}
.sx .hero-cap{--cap:clamp(0, calc((var(--hp,0) - .62) * 5), 1);display:block;position:absolute;left:0;right:0;bottom:calc(8vh + env(safe-area-inset-bottom,0px));z-index:4;margin:0;padding:0 var(--gx);text-align:center;
  font-size:clamp(30px,min(4.6vw,7.4vh),64px);font-weight:600;letter-spacing:-.045em;line-height:1.02;opacity:var(--cap);transform:translate3d(0,calc((1 - var(--cap)) * 34px),0);filter:blur(calc((1 - var(--cap)) * 10px))}
.sx .hero-cap span{color:var(--dust)}
@media (max-width:760px){
  .sx .hero{height:206svh}
  .sx .hero-copy{top:calc(96px + env(safe-area-inset-top,0px));gap:20px}
  .sx .hero-cap{bottom:calc(11svh + env(safe-area-inset-bottom,0px));font-size:clamp(26px,7.6vw,34px);padding:0 56px}
  .sx .hero-cap span{display:block}
}

/* ---------- 2. statement scene ---------- */
.wsplit .w{display:inline}
.sx .wsplit .w{--on:clamp(0, calc((var(--wp,1) * (var(--n) + 4) - var(--i)) / 4), 1);opacity:calc(.13 + .87 * var(--on));transition:opacity .18s linear}
.sx .wsplit .dim .w,.sx .wsplit.big .dim{color:#93a1b5}
.sx .statement[data-scene]{height:190vh;height:190svh;padding:0}
.sx .statement[data-scene] .st-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-content:center}
.sx .statement[data-scene] .big{font-size:clamp(2rem,4.6vw,4.2rem);max-width:24ch}
.sx .statement[data-scene] .facts{opacity:var(--fp,1);transform:translate3d(0,calc((1 - var(--fp,1)) * 40px),0)}
@media (max-width:760px){.sx .statement[data-scene]{height:170svh}.sx .statement[data-scene] .big{font-size:clamp(1.9rem,8.2vw,2.6rem)}}

/* ---------- 3. services switcher ---------- */
@media (min-width:960px){
  .sx .wb{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:start}
  .sx .wb-media{display:block;position:sticky;top:calc(50vh - min(300px,34vh));height:min(600px,68vh)}
  .sx .wb-frame{position:relative;height:calc(100% - 44px);border-radius:34px;border:1px solid rgba(170,200,240,.16);
    background:radial-gradient(80% 70% at 30% 0%,rgba(40,100,160,.22),transparent 70%),linear-gradient(180deg,rgba(14,22,34,.92),rgba(4,7,12,.97));
    box-shadow:0 70px 160px -70px rgba(40,120,200,.55),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
  .sx .wb-pane{position:absolute;inset:0;display:grid;align-content:center;padding:clamp(20px,2.6vw,34px);opacity:0;transform:translate3d(0,24px,0) scale(.965);filter:blur(8px);
    transition:opacity .6s var(--ease),transform .9s var(--ease),filter .6s var(--ease);pointer-events:none}
  .sx .wb-pane.on{opacity:1;transform:none;filter:none;transition-delay:.08s}
  .sx .wb-dots{display:flex;gap:8px;margin-top:16px}
  .sx .wb-dots i{position:relative;flex:1;height:28px;font-style:normal;border-top:2px solid rgba(255,255,255,.1)}
  .sx .wb-dots i::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--glint);transform-origin:left;transform:scaleX(var(--bp,0));box-shadow:0 0 10px rgba(166,228,255,.6)}
  .sx .wb-dots b{display:block;padding-top:8px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dust);transition:color .4s}
  .sx .wb-dots i.on b{color:var(--star)}
  .sx .wb-list{gap:0}
  .sx .wb-blk{min-height:max(76vh,560px);padding-block:12vh;opacity:.26;transition:opacity .6s var(--ease)}
  .sx .wb-blk.on{opacity:1}
  .sx .wb-blk .blk-viz{display:none}
  .sx .wb-blk:first-child{padding-top:4vh}
}

/* ---------- 4. reports tilt up ---------- */
.sx .dash{transform-origin:50% 100%;transform:perspective(1800px) translate3d(0,calc((1 - var(--tp,1)) * 70px),0) rotateX(calc((1 - var(--tp,1)) * 22deg)) scale(calc(.9 + .1 * var(--tp,1)));
  opacity:calc(.25 + .75 * var(--tp,1))}
@media (max-width:760px){.sx .dash{transform:perspective(1200px) translate3d(0,calc((1 - var(--tp,1)) * 40px),0) rotateX(calc((1 - var(--tp,1)) * 14deg)) scale(calc(.94 + .06 * var(--tp,1)))}}

/* ---------- 5. work gallery drift ---------- */
.sx #work .track{transform:translate3d(calc((1 - var(--dp,1)) * 22vw),0,0);opacity:calc(.15 + .85 * var(--dp,1))}

/* ---------- 6. process line ---------- */
.sx .steps::after{display:block;animation:none;left:22px;right:0;width:auto;top:22px;height:1px;border-radius:0;background:linear-gradient(90deg,var(--glint),#6aa9ff 70%,rgba(106,169,255,0));transform-origin:left;transform:scaleX(var(--sp,1));box-shadow:0 0 14px rgba(166,228,255,.55)}
.sx .step{--on:clamp(0, calc((var(--sp,1) * (var(--sn,5) - 1) - var(--k,0) + 1) * 2), 1)}
.sx .step .s-dot{border-color:rgba(166,228,255,calc(.25 + .55 * var(--on)));box-shadow:0 0 calc(var(--on) * 24px) rgba(166,228,255,.45);color:rgba(243,246,250,calc(.45 + .55 * var(--on)));transition:box-shadow .3s,border-color .3s}
.sx .step>div{opacity:calc(.28 + .72 * var(--on));transform:translate3d(0,calc((1 - var(--on)) * 14px),0)}
@media (max-width:900px){.sx .steps::after{left:22px;right:auto;top:10px;bottom:10px;width:1px;height:auto;background:linear-gradient(180deg,var(--glint),#6aa9ff);transform-origin:top;transform:scaleY(var(--sp,1))}}

/* ---------- 7. constellation ---------- */
.sx .loc-map .star{--on:clamp(0, calc((var(--lp,1) * 1.3 - var(--k,0)) * 5), 1);opacity:var(--on);transform-box:fill-box;transform-origin:center;transform:scale(calc(.4 + .6 * var(--on)))}
.sx .loc-map .edges line{opacity:clamp(0, calc((var(--lp,1) * 1.3 - var(--k,0)) * 4), 1)}

/* ---------- 8. closing call to action ---------- */
.sx .cta-in{transform:scale(calc(.9 + .1 * var(--ctp,1)));opacity:calc(.35 + .65 * var(--ctp,1))}

/* ---------- 9. wordmark ---------- */
.sx .fmark .wordmark{transform:translateX(-50%) translate3d(0,calc((1 - var(--wmp,1)) * .3em),0);opacity:calc(.08 + .92 * var(--wmp,1))}

/* ---------- 10. page hero visuals sink back ---------- */
.sx .svc-hero .hero-viz>*,.sx .svc-hero .case-art>*{transform:translate3d(0,calc(var(--lv,0) * 90px),0) scale(calc(1 - var(--lv,0) * .07));opacity:calc(1 - var(--lv,0) * .55)}

/* ---------- 11. reveal on enter ---------- */
.sx .rv{opacity:0;transform:translate3d(0,28px,0) scale(.985)}
.sx .rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--rd,0ms),transform 1.1s var(--ease) var(--rd,0ms)}
.sx .rv-head>*{opacity:0;transform:translate3d(0,26px,0);filter:blur(10px)}
.sx .rv-head.in>*{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease),transform 1.15s var(--ease),filter 1s var(--ease)}
.sx .rv-head.in>*:nth-child(2){transition-delay:.12s}
.sx .rv-head.in>*:nth-child(3){transition-delay:.22s}
@media print{.sx .rv,.sx .rv-head>*,.sx .wsplit .w{opacity:1!important;transform:none!important;filter:none!important}.sx .hero,.sx .statement[data-scene]{height:auto!important}.sx .hero-pin,.sx .st-pin{position:static!important;height:auto!important}}

/* ---------- small touches ---------- */
.btn:active{transform:scale(.97)}
.t-link .ico{transition:transform .4s var(--ease)}
.t-link:hover .ico{transform:translateX(3px)}

/* card hover depth */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  a.wcard{transition:transform .6s var(--ease),border-color .4s,box-shadow .6s var(--ease)}
  a.wcard:hover{transform:translateY(-6px);box-shadow:0 40px 90px -40px rgba(40,120,200,.55)}
  a.wcard .wart{transition:transform 1.1s var(--ease)}
  a.wcard:hover .wart{transform:scale(1.035)}
  .tcard,.ind,.msr,.idx-item,.rel>a{transition:transform .5s var(--ease),border-color .3s,background-color .3s}
}

/* services switcher without the scroll experience (reduced motion, no JS): alternating two-column rows */
@media (min-width:960px){
  html:not(.sx) .wb-blk{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(40px,5vw,72px);row-gap:14px;align-items:center;align-content:center}
  html:not(.sx) .wb-blk>*:not(.blk-viz){grid-column:2}
  html:not(.sx) .wb-blk .blk-viz{grid-column:1;grid-row:1 / span 5;margin:0}
  html:not(.sx) .wb-blk:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  html:not(.sx) .wb-blk:nth-child(even)>*:not(.blk-viz){grid-column:1}
  html:not(.sx) .wb-blk:nth-child(even) .blk-viz{grid-column:2}
}

/* ================= v4.1: footer ================= */
.footer{position:relative;padding:clamp(64px,8vw,104px) 0 0;border-top:0;overflow:hidden}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(166,228,255,0),rgba(166,228,255,.26) 22%,rgba(166,228,255,.26) 78%,rgba(166,228,255,0))}
.footer::after{content:"";position:absolute;left:50%;top:0;width:min(900px,90vw);height:220px;transform:translateX(-50%);background:radial-gradient(50% 100% at 50% 0%,rgba(90,160,235,.12),transparent 70%);pointer-events:none}

/* footnotes, small print first (as on product pages) */
.f-notes{display:grid;gap:8px;padding-bottom:28px;margin-bottom:clamp(36px,4vw,48px);border-bottom:1px solid var(--line)}
.f-notes p{margin:0;font-size:12.5px;line-height:1.6;color:#8a95a6;max-width:112ch}

/* brand row */
.f-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px 56px;align-items:center;padding-bottom:clamp(32px,4vw,44px);border-bottom:1px solid var(--line)}
.f-top .logo{margin:0}
.f-say{margin:0;font-size:clamp(17px,1.5vw,19px);font-weight:500;letter-spacing:-.015em;color:var(--star);line-height:1.4}
.f-say span{color:var(--dust)}
.f-reach{display:grid;justify-items:end;gap:6px}
.f-mail{font-size:15px;color:var(--star);text-decoration:none;letter-spacing:-.01em}
.f-mail:hover{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.f-reach .t-link{margin:0;font-size:14px}

/* directory */
.f-dir{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px 28px;padding:clamp(36px,4vw,48px) 0 clamp(40px,5vw,56px)}
.f-col{min-width:0}
.f-col summary{display:block;list-style:none;margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--star);cursor:default}
.f-col summary::-webkit-details-marker{display:none}
.f-col summary::marker{content:""}
.f-col summary:focus-visible{outline-offset:4px}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.f-col a{font-size:14px;line-height:1.35;color:var(--dust);text-decoration:none;transition:color .2s}
.f-col a:hover{color:var(--star);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.f-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;margin:0;padding:22px 0;border-top:1px solid var(--line);font-size:12.5px;color:#8a95a6}
.f-region{display:inline-flex;align-items:center;gap:8px}
.f-region::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--glint);box-shadow:0 0 8px var(--glint)}
@media (max-width:1100px){.f-dir{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
  .f-top{grid-template-columns:minmax(0,1fr);justify-items:start}
  .f-reach{justify-items:start}
}
@media (max-width:760px){
  .f-dir{grid-template-columns:minmax(0,1fr);gap:0;padding:8px 0 28px}
  .f-col{border-bottom:1px solid var(--line)}
  .f-col summary{display:flex;justify-content:space-between;align-items:center;margin:0;padding:17px 2px;font-size:15.5px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .f-col summary::after{content:"";width:8px;height:8px;margin-right:6px;border-right:1.5px solid var(--dust);border-bottom:1.5px solid var(--dust);transform:translateY(-3px) rotate(45deg);transition:transform .35s var(--ease)}
  .f-col[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .f-col ul{padding:2px 2px 20px;gap:14px}
  .f-col a{font-size:15.5px}
  .f-base{flex-direction:column;gap:6px;padding-bottom:26px}
}

/* ---------- the finale: a wordmark with an orbit of light ---------- */
.fmark{position:relative;isolation:isolate;font-size:clamp(4.4rem,20.5vw,18.5rem);height:1.32em;margin-top:clamp(8px,2vw,24px);overflow:hidden;user-select:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.6) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.6) 78%,transparent 100%)}
.fmark .wordmark{position:absolute;z-index:1;left:50%;top:.17em;transform:translateX(-50%);margin:0;padding:0 .06em .06em;white-space:nowrap;font:600 1em/1.05 var(--font);letter-spacing:-.068em;text-align:center;
  background-image:linear-gradient(104deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#f7f9fc 0%,#d3dce7 30%,#9aa6b8 56%,rgba(110,124,145,.5) 76%,rgba(110,124,145,0) 94%);
  background-size:260% 100%,100% 100%;background-position:160% 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.forbit{position:absolute;z-index:0;left:50%;top:.63em;width:4.05em;height:auto;transform:translate(-50%,-50%);overflow:visible;filter:drop-shadow(0 0 5px rgba(166,228,255,.75)) drop-shadow(0 0 18px rgba(110,180,255,.35))}
.fo-t{fill:none;stroke:rgba(166,228,255,.17);stroke-width:1.2;stroke-dasharray:1000;stroke-dashoffset:calc((1 - var(--wmp,1)) * 1000px)}
.fo-c{fill:none;stroke-linecap:round;stroke-dashoffset:calc(var(--l) * 1px - 380px)}
.fo-c0{stroke:rgba(166,228,255,.16);stroke-width:1.4}
.fo-c1{stroke:rgba(166,228,255,.32);stroke-width:1.9}
.fo-c2{stroke:rgba(205,238,255,.66);stroke-width:2.6}
.fo-c3{stroke:#fff;stroke-width:4}
.fo-g{opacity:clamp(0, calc((var(--wmp,1) - .78) * 5), 1);transition:opacity .4s}
@media (prefers-reduced-motion:no-preference){
  .fo-c{animation:comet 15s linear infinite}
  @keyframes comet{from{stroke-dashoffset:calc(var(--l) * 1px)}to{stroke-dashoffset:calc(var(--l) * 1px - 1000px)}}
  .fmark.lit .wordmark{animation:sheen 3.2s var(--ease) .3s 1 both}
  @keyframes sheen{from{background-position:160% 0,0 0}to{background-position:-60% 0,0 0}}
}
@media (max-width:760px){
  .fo-t{stroke-width:2.6}
  .fo-c0{stroke-width:3}.fo-c1{stroke-width:4}.fo-c2{stroke-width:5.5}.fo-c3{stroke-width:8}
}

/* the dots of the i's are stars (placed by script once the font has loaded) */
.fmark .tstar{position:absolute;z-index:2;left:calc(var(--x) * 1em);top:calc(var(--y) * 1em);width:calc(var(--td) * .98em);height:calc(var(--td) * .98em);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#fff 0 46%,rgba(214,240,255,.85) 60%,rgba(166,228,255,0) 76%);box-shadow:0 0 .05em rgba(166,228,255,.9),0 0 .18em rgba(120,190,255,.45)}
.fmark .tstar::before{content:"";position:absolute;left:50%;top:50%;width:420%;height:420%;transform:translate(-50%,-50%);opacity:.55;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(235,247,255,.95),rgba(255,255,255,0)) center/100% 1.5px no-repeat,linear-gradient(0deg,rgba(255,255,255,0),rgba(235,247,255,.95),rgba(255,255,255,0)) center/1.5px 100% no-repeat}
@media (prefers-reduced-motion:no-preference){
  .fmark .tstar{animation:twk 4.8s ease-in-out infinite}
  .fmark .tstar::before{animation:flare 4.8s ease-in-out infinite}
  .fmark .tstar + .tstar,.fmark .tstar + .tstar::before{animation-delay:-2.4s}
  @keyframes flare{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1) rotate(0)}50%{opacity:.2;transform:translate(-50%,-50%) scale(.6) rotate(45deg)}}
  @keyframes twk{0%,100%{opacity:1}50%{opacity:.72}}
}
@media print{.fmark{display:none}}
@media (max-width:760px){.footer{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}.fmark{margin-top:4px}}

/* ================= v5: Apple-style light sections =================
   Light sections alternate white (#fff) and light grey (#f5f5f7) between the dark starfield ones.
   Product "screens" (dashboards, search results, ad previews, art) stay dark inside them, like
   device screenshots on a light page. */
.lt{--star:#1d1d1f;--dust:#6e6e73;--line:rgba(0,0,0,.1);--glint:#0066cc;--good:#1a7f4f;--ink2:#424245;--bluebtn:#0071e3;
  position:relative;z-index:1;background:var(--bg);color:var(--star);color-scheme:light;padding-block:clamp(76px,9vw,132px)}
.lt-w{--bg:#ffffff;--card:#f5f5f7}
.lt-g{--bg:#f5f5f7;--card:#ffffff}

/* dark screens keep their own colours inside light sections */
.lt :is(.viz,.dash,.console,.wcard,.case-art,.nc-art,.blk-viz,.wb-frame,.dv-stage,.hero-viz,.tool,.rr,.loc-map,.way.rec,.pcard.rec){
  --star:#f3f6fa;--dust:#8f9aab;--line:rgba(170,195,230,.12);--glint:#a6e4ff;--good:#7fe0b4;--ink2:rgba(243,246,250,.86);color:var(--star);color-scheme:dark}

/* type */
.lt .statement .big .dim,.lt .big .dim{color:#86868b}
.sx .lt .wsplit .dim .w,.sx .lt .wsplit.big .dim{color:#86868b}
.galaxy-ready .lt .galaxy{background:none;-webkit-text-fill-color:currentColor;color:var(--star);animation:none}
.lt .marquee li{color:rgba(0,0,0,.42)}

/* buttons and links */
.lt .btn-primary{background:var(--bluebtn);color:#fff;box-shadow:0 10px 26px -14px rgba(0,113,227,.7)}
.lt .btn-primary::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.32) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0}
.lt .btn-primary:hover{background:#0077ed;box-shadow:0 0 0 6px rgba(0,113,227,.12),0 16px 34px -14px rgba(0,113,227,.6)}
.lt .btn-ghost{background:rgba(0,0,0,.04);color:var(--star);-webkit-backdrop-filter:none;backdrop-filter:none}
.lt .btn-ghost::before,.lt .orbit-border::before{background:conic-gradient(from var(--a),rgba(0,0,0,.15) 0deg,rgba(0,0,0,.15) 250deg,rgba(0,113,227,.85) 320deg,rgba(0,0,0,.15) 360deg)}
.lt .btn-ghost:hover{background:rgba(0,0,0,.075)}
.lt :is(.way.rec,.pcard.rec,.wcard,.dash) .btn-primary{background:#f3f6fa;color:#000;box-shadow:0 8px 30px -12px rgba(166,228,255,.5)}
.lt :is(.way.rec,.pcard.rec,.wcard,.dash) .btn-primary::after{background:linear-gradient(105deg,transparent 38%,rgba(150,210,255,.55) 50%,transparent 62%);background-size:260% 100%}
.lt :is(.way.rec,.pcard.rec) .orbit-border::before,.lt .way.rec.orbit-border::before,.lt .pcard.rec.orbit-border::before{background:conic-gradient(from var(--a),rgba(255,255,255,.14) 0deg,rgba(255,255,255,.14) 250deg,rgba(166,228,255,.95) 320deg,rgba(255,255,255,.14) 360deg)}
.lt .t-link:hover,.lt .more:hover{color:#004f9e}
.lt .copy-btn{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:var(--star)}
.lt .copy-btn:hover{background:rgba(0,0,0,.08)}
.lt .paddle{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.08);color:var(--star)}
.lt .paddle:hover{background:rgba(0,0,0,.09)}

/* cards: white on grey, grey on white, no borders, lift on hover */
.lt :is(.tile,.sub,.way,.pcard,.rel a,.ind,.msr,.tcard,.next-card,.tips li,.guide-grid>div,.ck-sec,.tp-sec,.formula,.table-wrap,.ex-tbl){background:var(--card);border-color:transparent;box-shadow:none}
.lt .tile::before,.lt .sub::before,.lt .rel a::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),rgba(0,113,227,.07),transparent 62%)}
.lt :is(.rel a,.msr,.tcard,.next-card,.ind,a.wcard):hover{border-color:transparent;box-shadow:0 22px 50px -28px rgba(0,0,0,.32)}
.lt .ex-card{background:transparent;border:1px dashed rgba(0,0,0,.2)}
.lt .ex-card:hover{border-color:rgba(0,113,227,.5)}
.lt .tools-band{background:transparent;border-color:rgba(0,0,0,.2)}
.lt :is(.sub li,.ex-card li,.ex-tile li,.msr li,.tips li,.guide-grid p,.rs-intro p,.tp-f label,.way li,.pcard li){color:var(--ink2)}
.lt :is(.way.rec li,.pcard.rec li){color:rgba(243,246,250,.86)}
.lt :is(.idx-ic,.wb-ic,.mm-ic,.rs-ic,.ck-n,.wb-n span){background:rgba(0,113,227,.08);border-color:rgba(0,113,227,.16);color:#0066cc}
.lt .ind-more .ind-ic{background:rgba(0,113,227,.08);border-color:rgba(0,113,227,.18);color:#0066cc}
.lt .chips-s li{border-color:rgba(0,0,0,.1);color:var(--ink2);background:rgba(0,0,0,.02)}
.lt .pills span{background:var(--card);border-color:rgba(0,0,0,.07)}
.lt .ex-res{background:rgba(0,113,227,.05);border-color:rgba(0,113,227,.18)}
.lt .compare .us{background:rgba(0,113,227,.05)}

/* the recommended option is a dark card among light ones */
.lt .way.rec,.lt .pcard.rec{background:radial-gradient(120% 70% at 50% 0%,rgba(40,110,190,.38),transparent 62%),#0a0d13;border-color:transparent;box-shadow:0 40px 90px -46px rgba(0,40,90,.6)}

/* screens get a dark panel when they sit on a light card */
.lt .tile .viz{border-radius:22px;padding:clamp(14px,2vw,22px);background:radial-gradient(80% 60% at 30% 0%,rgba(40,100,160,.26),transparent 70%),#070b12;box-shadow:0 30px 60px -36px rgba(0,20,50,.55)}
.lt .tile .dv-stage{box-shadow:0 30px 60px -36px rgba(0,20,50,.55)}
.lt .wcard{border-color:transparent;box-shadow:0 30px 60px -38px rgba(0,20,50,.5)}
.lt .case-art,.lt .nc-art{color:var(--star)}

/* FAQ, steps, lists */
.lt details[open] .plus,.lt .faq-list summary:hover .plus{background:rgba(0,0,0,.05)}
.lt .steps::before{background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,.16) 85%,transparent)}
.lt .steps::after{background:linear-gradient(90deg,transparent,var(--bluebtn),transparent)}
.lt .s-dot{background:var(--bg);border-color:rgba(0,0,0,.16);color:var(--star)}
.sx .lt .steps::after{background:linear-gradient(90deg,var(--bluebtn),#3d9bff 70%,rgba(61,155,255,0));box-shadow:0 0 10px rgba(0,113,227,.3)}
.sx .lt .step .s-dot{border-color:rgba(0,113,227,calc(.18 + .62 * var(--on)));box-shadow:0 0 calc(var(--on) * 18px) rgba(0,113,227,.22);color:rgba(29,29,31,calc(.45 + .55 * var(--on)))}
@media (max-width:900px){
  .lt .steps::before{background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.05))}
  .sx .lt .steps::after{background:linear-gradient(180deg,var(--bluebtn),#3d9bff)}
}

/* services showcase on light */
.lt .wb-links a:hover{background:rgba(0,0,0,.035)}
.sx .lt .wb-frame{box-shadow:0 70px 140px -60px rgba(0,30,70,.5),inset 0 1px 0 rgba(255,255,255,.05);border-color:transparent}
.sx .lt .wb-dots i{border-top-color:rgba(0,0,0,.1)}
.sx .lt .wb-dots i::before{background:var(--bluebtn);box-shadow:none}
.lt .blk-viz{border-color:transparent;background:radial-gradient(80% 60% at 30% 0%,rgba(40,100,160,.26),transparent 70%),#070b12;box-shadow:0 30px 60px -36px rgba(0,20,50,.55)}

/* checklists and templates on light */
.lt .rs-bar{background:rgba(255,255,255,.82);border-color:rgba(0,0,0,.07);box-shadow:0 14px 34px -24px rgba(0,0,0,.3)}
.lt .rs-ring circle{stroke:rgba(0,0,0,.08)}
.lt .rs-ring .fg{stroke:var(--good)}
.lt .rs-tog{border-color:rgba(0,0,0,.12)}
.lt .rs-tog input,.lt .check input{accent-color:var(--bluebtn)}
.lt .ck-item{border-top-color:rgba(0,0,0,.07)}
.lt .ck-box{border-color:rgba(0,0,0,.25)}
.lt .ck-box .ico{color:#fff}
.lt .ck-item.done .ck-t b{color:rgba(29,29,31,.42);text-decoration-color:rgba(29,29,31,.3)}
.lt .must{color:#8a5a00;border-color:rgba(138,90,0,.35)}
.lt .input{background:#fff;border-color:rgba(0,0,0,.14);color:var(--star)}
.lt .input::placeholder{color:#86868b}
.lt .input:focus{border-color:var(--bluebtn);box-shadow:0 0 0 4px rgba(0,113,227,.15);background:#fff}
.lt .tb-scroll{background:var(--card);border-color:transparent}
.lt .tb-t th{background:var(--card);color:var(--dust)}
.lt .tb-t td{border-bottom-color:rgba(0,0,0,.06)}
.lt .tb-t tfoot th,.lt .tb-t tfoot td{border-top-color:rgba(0,0,0,.1)}
.lt .cell:hover{border-color:rgba(0,0,0,.12)}
.lt .cell:focus{border-color:var(--bluebtn);background:#fff}
.lt select.cell option{background:#fff;color:#1d1d1f}
.lt input.cell[type=date]{color-scheme:light}
.lt .rm:hover{border-color:rgba(200,40,40,.35);color:#c0392b}

/* ---------- the menu bar turns to light glass over light sections ---------- */
.logo .mk-d{display:none}
.nav .nav-in,.nav .nav-links a,.nav .dd-btn,.nav .logo,.nav .menu-btn{transition-property:max-width,height,margin-top,padding,background-color,border-color,color,box-shadow;transition-duration:.7s,.5s,.5s,.5s,.45s,.45s,.35s,.45s;transition-timing-function:var(--ease)}
.nav.nav-light.is-scrolled .nav-in{background:rgba(255,255,255,.74);border-color:rgba(0,0,0,.08);box-shadow:0 14px 40px -24px rgba(0,0,0,.3)}
.nav.nav-light.is-scrolled .logo{color:#1d1d1f}
.nav.nav-light.is-scrolled .logo .mk:not(.mk-d){display:none}
.nav.nav-light.is-scrolled .logo .mk-d{display:inline-block}
.nav.nav-light.is-scrolled .nav-links a,.nav.nav-light.is-scrolled .dd-btn{color:#6e6e73}
.nav.nav-light.is-scrolled .nav-links a:hover,.nav.nav-light.is-scrolled .nav-links a[aria-current="page"],.nav.nav-light.is-scrolled .dd-btn:hover,.nav.nav-light.is-scrolled .dd-btn[aria-current="page"],.nav.nav-light.is-scrolled .dd-btn[aria-expanded="true"]{color:#1d1d1f}
.nav.nav-light.is-scrolled .nav-links a[aria-current="page"],.nav.nav-light.is-scrolled .dd-btn[aria-current="page"]{background:rgba(0,0,0,.06)}
.nav.nav-light.is-scrolled .nav-pill{background:rgba(0,0,0,.06)}
.nav.nav-light.is-scrolled .btn-primary{background:var(--bluebtn,#0071e3);color:#fff;box-shadow:0 8px 22px -12px rgba(0,113,227,.7)}
.nav.nav-light.is-scrolled .btn-primary::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.3) 50%,transparent 62%);background-size:260% 100%}
.nav.nav-light.is-scrolled .menu-btn{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);color:#1d1d1f}
.nav.nav-light{--bluebtn:#0071e3}

/* ---------- structure: one rhythm and full rows everywhere ---------- */
.wrap > .group:first-child{margin-top:0}
.sec-head + :is(.subs,.rel,.steps,.bento,.case-row,.tool-grid,.tips,.ways,.ex-tbl,.how-grid,.dash,.subhead,.guide-grid,.ind-grid,.loc-grid,.table-wrap,.msr-grid){margin-top:clamp(40px,5vw,64px)}
@media (prefers-reduced-motion:reduce){.steps::after{display:none}}
.tips,.guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.tips,.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tips,.guide-grid{grid-template-columns:minmax(0,1fr)}}
/* card grids fill their last row: 2 and 4 sit side by side, 5 becomes two then three, 7 becomes four then three */
@media (min-width:1001px){
  :is(.rel,.tool-grid,.tips,.guide-grid,.ex-grid):has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.rel,.tool-grid,.tips,.guide-grid):has(> :nth-child(4):last-child),
  :is(.rel,.tool-grid,.tips,.guide-grid):has(> :nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  :is(.rel,.tool-grid,.tips,.guide-grid):has(> :nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  :is(.rel,.tool-grid,.tips,.guide-grid):has(> :nth-child(5):last-child) > *{grid-column:span 2}
  :is(.rel,.tool-grid,.tips,.guide-grid):has(> :nth-child(5):last-child) > :nth-child(-n+2){grid-column:span 3}
  :is(.rel,.tool-grid,.tips,.guide-grid):has(> :nth-child(7):last-child){grid-template-columns:repeat(12,minmax(0,1fr))}
  :is(.rel,.tool-grid,.tips,.guide-grid):has(> :nth-child(7):last-child) > *{grid-column:span 4}
  :is(.rel,.tool-grid,.tips,.guide-grid):has(> :nth-child(7):last-child) > :nth-child(-n+4){grid-column:span 3}
}

/* closing card in a short row of work */
a.wmore{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:clamp(24px,2.6vw,34px);border-radius:30px;background:var(--card,rgba(255,255,255,.045));color:var(--star);text-decoration:none;overflow:hidden;transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
a.wmore:hover{box-shadow:0 22px 50px -28px rgba(0,0,0,.32);transform:translateY(-3px)}
a.wmore:focus-visible{outline:2px solid var(--glint);outline-offset:3px}
.wm-names{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.wm-names span{padding:7px 13px;border-radius:999px;background:var(--bg,rgba(255,255,255,.06));font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink2,rgba(243,246,250,.86))}
.wm-copy{display:grid;gap:8px;justify-items:start}
.wm-copy .label{margin:0;color:var(--glint)}
.wm-copy b{font-size:clamp(24px,2.3vw,32px);font-weight:600;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.wm-copy .d{font-size:15px;line-height:1.5;color:var(--dust);max-width:36ch}
.wm-copy .more{margin-top:6px}
a.wmore:hover .more{text-decoration:underline;text-underline-offset:.2em}
@media (min-width:1001px){.case-row .wmore.n1{grid-column:span 2}.case-row .wmore.n1 .wm-copy b{font-size:clamp(28px,3vw,40px)}}
@media (max-width:1000px){.case-row .wmore.n2{display:none}}

/* light versions of the remaining dark-only pieces */
.lt .ex-tile{background:var(--card);border:1px dashed rgba(0,0,0,.16)}
.lt .ex-gets{background:var(--bg);border-color:transparent}
.lt .how-grid p{color:var(--ink2)}
.tcard .kind-l.free{position:static}

/* the mega menu and phone menu follow the bar: light glass over light sections */
.nav.nav-light.is-scrolled :is(.dd,.menu){--star:#1d1d1f;--dust:#6e6e73;--line:rgba(0,0,0,.08);--glint:#0066cc;color:var(--star);background:rgba(251,251,253,.975);border-color:rgba(0,0,0,.07);box-shadow:0 40px 90px -40px rgba(0,0,0,.32)}
.nav.nav-light.is-scrolled :is(.dd a,.menu a):hover,.nav.nav-light.is-scrolled .dd a[aria-current="page"]{background:rgba(0,0,0,.045)}
.nav.nav-light.is-scrolled .mm-ic{background:rgba(0,113,227,.07);border-color:rgba(0,113,227,.15);color:#0066cc}
.nav.nav-light.is-scrolled .dd-col a:hover .mm-ic,.nav.nav-light.is-scrolled .dd-col a[aria-current="page"] .mm-ic{background:rgba(0,113,227,.12);border-color:rgba(0,113,227,.3)}
.nav.nav-light.is-scrolled .dd .mm-feat{--star:#f3f6fa;--dust:#8f9aab;--glint:#a6e4ff;color:var(--star);border-color:transparent}
.nav.nav-light.is-scrolled .dd .mm-case{border-color:rgba(0,0,0,.07)}

/* ================= v5.1: channel widgets in the home hero =================
   One widget per channel we run. They fly out of the infinity as the hero scrolls (sx), joined to it by
   threads of light drawn on the canvas, or sit around it when motion is reduced. Sizes are in em, so the
   whole widget scales from one font-size per screen size. */

/* ---------- the widget ---------- */
.chips{position:absolute;inset:0;z-index:3;list-style:none;margin:0;padding:0;font-size:13px;--hw:calc(10.5em + 16px)}
.chip{--ac:#5ec8ff;--icg:linear-gradient(145deg,#2c74f2,#5ec8ff);--tint:rgba(70,160,255,.16);
  position:absolute;width:21em;border-radius:1.85em;text-align:left;color:#f3f6fa;
  background:radial-gradient(130% 95% at 0% 0%,var(--tint),transparent 58%),linear-gradient(180deg,rgba(27,34,47,.95),rgba(12,17,26,.97));
  border:1px solid rgba(255,255,255,.085);box-shadow:0 2.4em 5em -2.2em rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color .35s,box-shadow .5s var(--ease)}
.chip:hover{border-color:rgba(255,255,255,.18)}
.ch{display:grid;gap:.8em;padding:1.05em 1.1em 1.1em;border-radius:inherit;color:inherit;text-decoration:none;outline:none}
.ch:focus-visible{box-shadow:0 0 0 2px var(--ac)}
.ch-h{display:flex;align-items:center;gap:.6em;min-width:0}
.ch-ic{flex:none;width:1.85em;height:1.85em;border-radius:.56em;display:grid;place-items:center;background:var(--icg);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 .4em 1em -.4em var(--ac)}
.ch-ic .ico{width:1.08em;height:1.08em;stroke-width:2.1}
.ch-l{font-size:1em;font-weight:600;letter-spacing:-.012em;white-space:nowrap}
.ch-s{margin-left:auto;display:inline-flex;align-items:center;gap:.42em;font-size:.86em;font-weight:500;color:#8f9aab;white-space:nowrap}
.s-live i{width:.52em;height:.52em;border-radius:50%;background:#34d27b;box-shadow:0 0 .6em rgba(52,210,123,.75)}
.s-rank{padding:.22em .66em;border-radius:999px;background:rgba(179,155,255,.16);color:#cdbdff;font-size:.82em;font-weight:600;letter-spacing:.01em}
.s-ok{color:#7fe0b4}
.s-ok .ico{width:1.05em;height:1.05em;stroke-width:2.4}
.s-send .dots{display:inline-flex;gap:.2em;margin-left:.05em}
.s-send .dots i{width:.26em;height:.26em;border-radius:50%;background:currentColor;opacity:.45}
.ch-b{display:grid;gap:.75em}
.ch-v{position:relative;display:block;height:5em;border-radius:.95em;overflow:hidden;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ch-c{display:flex;align-items:center;gap:.5em;font-size:1.04em;font-weight:600;letter-spacing:-.015em;line-height:1.22;color:#f3f6fa}
.ch-c .ck{flex:none;width:1.25em;height:1.25em;border-radius:50%;display:grid;place-items:center;background:rgba(52,210,123,.16);color:#5fe39a}
.ch-c .ck .ico{width:.8em;height:.8em;stroke-width:2.8}
.ch-go{flex:none;width:1em;height:1em;margin-left:auto;color:#8f9aab;opacity:0;transform:translateX(-.3em);transition:opacity .3s,transform .4s var(--ease)}
.ch:hover .ch-go,.ch:focus-visible .ch-go{opacity:1;transform:none}

/* channel colours */
.c-web{--ac:#5ec8ff;--icg:linear-gradient(145deg,#2c74f2,#5ec8ff);--tint:rgba(70,160,255,.17)}
.c-ads{--ac:#ff8a7a;--icg:linear-gradient(145deg,#ff4f6e,#ffab5e);--tint:rgba(255,110,110,.15)}
.c-seo{--ac:#b39bff;--icg:linear-gradient(145deg,#7457ff,#c09bff);--tint:rgba(150,120,255,.16)}
.c-ai{--ac:#5fe0e8;--icg:linear-gradient(145deg,#0fa9c8,#71e6c8);--tint:rgba(60,210,220,.15)}
.c-app{--ac:#62e3a0;--icg:linear-gradient(145deg,#19b06a,#8de37c);--tint:rgba(70,220,140,.14)}
.c-mail{--ac:#ffc95e;--icg:linear-gradient(145deg,#ff9417,#ffd56b);--tint:rgba(255,190,80,.14)}

/* website: the page, live */
.v-web{display:grid;grid-template-rows:1.5em minmax(0,1fr)}
.vw-top{display:flex;align-items:center;gap:.28em;padding:0 .65em;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.vw-top i{width:.4em;height:.4em;border-radius:50%;background:rgba(255,255,255,.2)}
.vw-top em{margin:0 auto;transform:translateX(-.6em);padding:.12em .8em;border-radius:999px;background:rgba(255,255,255,.055);font:500 .68em var(--mono);font-style:normal;color:rgba(243,246,250,.62)}
.vw-page{display:grid;grid-template-columns:1.05fr 1fr;gap:.6em;align-items:center;padding:.38em .65em}
.vw-copy{display:grid;gap:.3em}
.vw-copy i,.vw-copy b{display:block;transform-origin:left center}
.vw-copy i{height:.42em;border-radius:.3em;background:rgba(243,246,250,.62)}
.vw-copy i:nth-child(2){width:72%;background:rgba(243,246,250,.26)}
.vw-copy b{width:3.3em;height:.95em;margin-top:.15em;border-radius:999px;background:#f3f6fa}
.vw-img{position:relative;height:2.6em;border-radius:.5em;overflow:hidden;background:radial-gradient(60% 85% at 70% 30%,rgba(120,190,255,.55),transparent 70%),linear-gradient(135deg,#10294b,#0a1426)}
.vw-img i{position:absolute;left:66%;top:28%;width:.32em;height:.32em;border-radius:50%;background:#fff;box-shadow:0 0 .6em .15em rgba(166,228,255,.9)}

/* ads: one campaign across the platforms */
.v-ads{padding:.55em .65em}
.va-tags{position:relative;z-index:1;display:flex;gap:.3em}
.va-tags em{display:inline-flex;align-items:center;gap:.38em;padding:.18em .58em;border-radius:999px;background:rgba(255,255,255,.065);font-size:.72em;font-style:normal;font-weight:500;color:rgba(243,246,250,.82)}
.va-tags em::before{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--ac)}
.v-ads svg{position:absolute;left:0;bottom:.15em;width:calc(100% - .9em);height:2.9em;overflow:visible}
.v-ads .ar{fill:url(#vaG)}
.v-ads .ln{fill:none;stroke:var(--ac);stroke-width:2;stroke-linecap:round}
.va-dot{position:absolute;right:.9em;bottom:calc(.15em + 2.9em * .875);width:.6em;height:.6em;border-radius:50%;background:#fff;transform:translate(50%,50%);
  box-shadow:0 0 0 .22em rgba(255,138,122,.32),0 0 .9em rgba(255,138,122,.95)}

/* search: the local result, first */
.v-seo{display:grid;gap:.36em;align-content:center;padding:.4em .5em}
.vs-q{display:flex;align-items:center;gap:.42em;height:1.5em;padding:0 .65em;border-radius:999px;background:rgba(255,255,255,.065)}
.vs-q .ico{flex:none;width:.85em;height:.85em;color:#8f9aab;stroke-width:2.3}
.vs-q em{font-size:.78em;font-style:normal;color:rgba(243,246,250,.88);white-space:nowrap;clip-path:inset(0 -2px 0 0)}
.vs-q em::after{content:"";display:inline-block;width:1px;height:1.05em;margin-left:2px;vertical-align:-.18em;background:var(--ac)}
.vs-r{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55em;align-items:center;height:2.3em;padding:0 .55em;border-radius:.7em;background:rgba(150,120,255,.11);box-shadow:inset 0 0 0 1px rgba(170,150,255,.28)}
.vs-pin{width:1.55em;height:1.55em;border-radius:50%;display:grid;place-items:center;background:var(--icg);color:#fff}
.vs-pin .ico{width:.88em;height:.88em;stroke-width:2.3}
.vs-t{display:grid;min-width:0}
.vs-t b{font-size:.8em;font-weight:600;line-height:1.25}
.vs-t span{font-size:.68em;line-height:1.3;color:#8f9aab;white-space:nowrap}
.vs-t span i{font-style:normal;color:#7fe0b4}

/* assistant: an enquiry answered */
.v-ai{display:grid;gap:.32em;align-content:center;padding:.4em .55em;background:none;box-shadow:none}
.bub{display:inline-flex;align-items:center;gap:.35em;max-width:92%;padding:.38em .72em;border-radius:1em;font-size:.76em;line-height:1.25;white-space:nowrap}
.b-in{justify-self:start;background:rgba(255,255,255,.09);color:rgba(243,246,250,.92);border-bottom-left-radius:.3em;transform-origin:left bottom}
.b-out{justify-self:end;background:linear-gradient(145deg,#1d8bff,#16b6dc);color:#fff;font-weight:500;border-bottom-right-radius:.3em;transform-origin:right bottom}
.b-out .ico{width:.95em;height:.95em;stroke-width:2.6}
.b-typ{position:absolute;right:.55em;bottom:.72em;gap:.22em;padding:.55em .7em;background:rgba(255,255,255,.09);border-bottom-right-radius:.3em;opacity:0}
.b-typ i{width:.34em;height:.34em;border-radius:50%;background:rgba(243,246,250,.7)}

/* app: approved for the stores */
.v-app{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7em;align-items:center;padding:0 .7em}
.vp-ic{width:3.1em;height:3.1em;border-radius:.78em;display:grid;place-items:center;
  background:radial-gradient(70% 70% at 30% 20%,rgba(120,190,255,.35),transparent 70%),linear-gradient(145deg,#0c1a2e,#1a3d6e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 .4em 1em -.4em rgba(60,140,255,.6)}
.vp-ic .mk{width:72%;height:auto}
.vp-t{display:grid;gap:.1em;min-width:0}
.vp-t b{font-size:.92em;font-weight:600}
.vp-t span{font-size:.72em;color:#8f9aab;white-space:nowrap}
.vp-get{padding:.36em 1.05em;border-radius:999px;background:rgba(255,255,255,.1);color:#69b8ff;font-size:.78em;font-weight:700;letter-spacing:.02em}

/* email: a welcome flow that runs itself */
.v-mail{display:flex;align-items:center;padding:0 .7em}
.vm-n{display:grid;justify-items:center;gap:.3em;font-size:.7em;font-weight:500;color:rgba(243,246,250,.8);white-space:nowrap}
.vm-n i{width:2.5em;height:2.5em;border-radius:.75em;display:grid;place-items:center;background:rgba(255,200,94,.13);box-shadow:inset 0 0 0 1px rgba(255,200,94,.32);color:#ffc95e}
.vm-n i .ico{width:1.25em;height:1.25em;stroke-width:2}
.vm-l{position:relative;flex:1;height:2px;margin:0 .4em 1.05em;border-radius:2px;background:rgba(255,200,94,.35);overflow:hidden}
.vm-l::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent,#fff,transparent);transform:translateX(-110%)}

/* ---------- small motions, always on ---------- */
@media (prefers-reduced-motion:no-preference){
  .s-live i{animation:ch-ping 2.4s ease-out infinite}
  @keyframes ch-ping{0%{box-shadow:0 0 0 0 rgba(52,210,123,.6),0 0 .6em rgba(52,210,123,.75)}70%,100%{box-shadow:0 0 0 .6em rgba(52,210,123,0),0 0 .6em rgba(52,210,123,.75)}}
  .s-send .dots i{animation:ch-dot 1.2s ease-in-out infinite}
  .s-send .dots i:nth-child(2){animation-delay:.2s}
  .s-send .dots i:nth-child(3){animation-delay:.4s}
  @keyframes ch-dot{0%,100%{opacity:.25}40%{opacity:1}}
  .vs-q em::after{animation:blink 1.1s steps(1) infinite}
  .vm-l::after{animation:ch-flow 2.8s var(--ease) infinite}
  .vm-l ~ .vm-l::after{animation-delay:.7s}
  @keyframes ch-flow{0%{transform:translateX(-110%)}55%,100%{transform:translateX(240%)}}
  .b-typ i{animation:ch-dot 1s ease-in-out infinite}
  .b-typ i:nth-child(2){animation-delay:.15s}
  .b-typ i:nth-child(3){animation-delay:.3s}
}

/* ---------- desktop without the scroll scene: around the infinity ---------- */
.c-web{left:2%;top:0}
.c-seo{left:0;top:36%}
.c-app{left:4%;top:72%}
.c-ads{right:2%;top:2%}
.c-ai{right:0;top:38%}
.c-mail{right:4%;top:74%}
@media (prefers-reduced-motion:no-preference){.chip{animation:bob 9s ease-in-out infinite;animation-delay:calc(var(--k,0) * -1.5s)}}
@media (max-width:1020px){
  .chips{position:relative;inset:auto;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;font-size:12px;
    margin-inline:calc(-1 * max(var(--gx), env(safe-area-inset-left,0px)));padding:6px max(var(--gx), env(safe-area-inset-left,0px)) 14px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{position:relative;left:auto;right:auto;top:auto;flex:0 0 21em;scroll-snap-align:center;animation:none}
}

/* ---------- the scroll scene: widgets fly out of the infinity ---------- */
.sx .hero .chips{position:absolute;inset:0;display:block;overflow:visible;margin:0;padding:0;pointer-events:none}
.sx .hero .chip{position:absolute;left:50%;top:50%;right:auto;margin:0;flex:none;animation:none;visibility:hidden;opacity:var(--cp,0);will-change:transform,opacity;
  transform:translate(-50%,-50%) translate(calc(var(--cx,0px) * (.25 + .75 * var(--cp,0))),calc(var(--cy,0px) * (.25 + .75 * var(--cp,0)))) scale(calc(.55 + .45 * var(--cp,0)))}
.sx .hero .chip.vis{visibility:visible}
.sx .hero .chip.on{pointer-events:auto}
.sx .hero .c-web{--cx:calc(-1 * min(35vw,560px,50vw - var(--hw) - 14px));--cy:-25vh}
.sx .hero .c-ads{--cx:min(34vw,545px,50vw - var(--hw) - 14px);--cy:-27vh}
.sx .hero .c-seo{--cx:calc(-1 * min(39vw,610px,50vw - var(--hw)));--cy:0vh}
.sx .hero .c-ai{--cx:min(39vw,610px,50vw - var(--hw));--cy:-2vh}
.sx .hero .c-app{--cx:calc(-1 * min(31vw,500px,50vw - var(--hw) - 30px));--cy:22vh}
.sx .hero .c-mail{--cx:min(30vw,490px,50vw - var(--hw) - 30px);--cy:21vh}
@media (min-width:1680px) and (min-height:940px){.sx .hero .chips{font-size:14px}}
@media (min-width:761px) and (max-height:780px){.sx .hero .chips{font-size:11px}}
@media (min-width:761px) and (max-width:1020px){.sx .hero .chips{font-size:11.5px}}

/* arrival: each widget plays its moment once it reaches its place */
.sx .hero .chip :is(.vw-copy i,.vw-copy b){transition:transform .7s var(--ease),opacity .4s}
.sx .hero .chip .vw-copy i:nth-child(2){transition-delay:.08s}
.sx .hero .chip .vw-copy b{transition-delay:.16s}
.sx .hero .chip .vw-img{transition:transform .8s var(--ease) .1s,opacity .5s .1s}
.sx .hero .chip:not(.on) :is(.vw-copy i,.vw-copy b){transform:scaleX(.08);opacity:0}
.sx .hero .chip:not(.on) .vw-img{transform:scale(.9);opacity:0}
.sx .hero .chip .ch-c .ck{transition:transform .5s cubic-bezier(.3,1.6,.5,1) .55s,opacity .3s .55s}
.sx .hero .chip:not(.on) .ch-c .ck{transform:scale(0);opacity:0}
.sx .hero .c-ads .ln{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ease) .1s}
.sx .hero .c-ads:not(.on) .ln{stroke-dashoffset:1}
.sx .hero .c-ads :is(.ar,.va-dot){transition:opacity .6s 1s}
.sx .hero .c-ads:not(.on) :is(.ar,.va-dot){opacity:0}
.sx .hero .c-seo .vs-q em{transition:clip-path .9s steps(16) .1s}
.sx .hero .c-seo:not(.on) .vs-q em{clip-path:inset(0 100% 0 0)}
.sx .hero .c-seo .vs-r{transition:transform .6s var(--ease) 1.05s,opacity .4s 1.05s}
.sx .hero .c-seo:not(.on) .vs-r{transform:translateY(.7em);opacity:0}
.sx .hero .c-seo .s-rank{transition:opacity .4s 1.4s,transform .5s cubic-bezier(.3,1.6,.5,1) 1.4s}
.sx .hero .c-seo:not(.on) .s-rank{opacity:0;transform:scale(.6)}
.sx .hero .c-ai .b-in{transition:transform .45s cubic-bezier(.3,1.4,.5,1) .1s,opacity .3s .1s}
.sx .hero .c-ai:not(.on) .b-in{transform:scale(.6);opacity:0}
.sx .hero .c-ai .b-out{transition:transform .45s cubic-bezier(.3,1.4,.5,1) 1.3s,opacity .3s 1.3s}
.sx .hero .c-ai:not(.on) .b-out{transform:scale(.6);opacity:0}
.sx .hero .c-ai.on .b-typ{display:inline-flex;animation:ch-typ 1s linear .4s both}
@keyframes ch-typ{0%{opacity:0;transform:scale(.7)}18%,82%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.sx .hero .c-app .vp-ic{transition:transform .6s cubic-bezier(.3,1.5,.5,1) .1s}
.sx .hero .c-app:not(.on) .vp-ic{transform:scale(.5)}
.sx .hero .c-app .s-ok{transition:opacity .4s .8s,transform .5s cubic-bezier(.3,1.6,.5,1) .8s}
.sx .hero .c-app:not(.on) .s-ok{opacity:0;transform:scale(.7)}
.sx .hero .c-mail .vm-n i{transition:background-color .4s,box-shadow .4s,color .4s,transform .5s cubic-bezier(.3,1.5,.5,1)}
.sx .hero .c-mail .vm-n:nth-child(3) i{transition-delay:.45s}
.sx .hero .c-mail .vm-n:nth-child(5) i{transition-delay:.9s}
.sx .hero .c-mail:not(.on) .vm-n i{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#8f9aab;transform:scale(.86)}
.b-typ{display:none}

/* phones: four compact widgets, two above the infinity and two below */
@media (max-width:760px){
  .sx .hero .chips{font-size:12px}
  .sx .hero .chip{width:min(44vw,15em);border-radius:1.45em}
  .sx .hero .ch{gap:.55em;padding:.8em .85em .85em}
  .sx .hero .ch-h{gap:.5em}
  .sx .hero .ch-ic{width:1.7em;height:1.7em;border-radius:.5em}
  .sx .hero .ch-s{font-size:.8em}
  .sx .hero .ch-v,.sx .hero .ch-go{display:none}
  .sx .hero .ch-c{font-size:1em;line-height:1.28;align-items:flex-start}
  .sx .hero .ch-c .ck{margin-top:.05em;width:1.2em;height:1.2em}
  .sx .hero .c-web{--cx:-23vw;--cy:-27vh}
  .sx .hero .c-ads{--cx:23vw;--cy:-18vh}
  .sx .hero .c-seo{--cx:-23vw;--cy:16vh}
  .sx .hero .c-ai{--cx:23vw;--cy:25vh}
  .sx .hero .c-app,.sx .hero .c-mail{display:none}
}
/* short phones: the widgets spread a little further and the caption sits lower */
@media (max-width:760px) and (max-height:760px){
  .sx .hero .c-web{--cy:-29vh}
  .sx .hero .c-ads{--cy:-20vh}
  .sx .hero .c-seo{--cy:14vh}
  .sx .hero .c-ai{--cy:22vh}
  .sx .hero-cap{bottom:calc(7svh + env(safe-area-inset-bottom,0px))}
}
/* portrait tablets: four full widgets, two above the infinity and two below */
@media (min-width:761px) and (max-width:1020px) and (orientation:portrait){
  .sx .hero .c-web{--cx:-26vw;--cy:-30vh}
  .sx .hero .c-ads{--cx:26vw;--cy:-22vh}
  .sx .hero .c-seo{--cx:-26vw;--cy:19vh}
  .sx .hero .c-ai{--cx:26vw;--cy:27vh}
  .sx .hero .c-app,.sx .hero .c-mail{display:none}
}
/* landscape phones have no room around the infinity */
@media (max-height:500px){.sx .hero .chip{display:none}}
.sx .hero-cap{pointer-events:none}
@media print{.chip{animation:none}}

/* ---------- AI console: the plan is on screen from the start ---------- */
.c-top{position:relative}
.c-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.c-status{flex:none;transition:color .3s}
.c-status.c-ready .live{background:rgba(166,228,255,.45);box-shadow:none;animation:none}
.c-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.c-prog i{display:block;height:100%;background:linear-gradient(90deg,#6aa9ff,var(--glint));box-shadow:0 0 10px rgba(166,228,255,.6);transform-origin:left center;transform:scaleX(var(--cp,1));opacity:0;transition:transform .7s var(--ease),opacity .5s}
.c-prog:not(.fin) i{opacity:1}
.c-prog.fin i{transition:transform .7s var(--ease),opacity .6s .6s}
.c-body{min-height:0}
.c-steps li{transition:opacity .45s,background-color .45s,border-color .45s}
.c-steps li.q{opacity:.36}
.c-steps li.q .st{animation:none;border-color:rgba(166,228,255,.22)}
.c-steps li:not(.q):not(.done){background:rgba(166,228,255,.06);border-color:rgba(166,228,255,.22)}
.c-steps li .st{transition:background-color .35s,border-color .35s}
.c-steps li.done .st .ico{animation:ck-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes ck-pop{from{transform:scale(.3);opacity:0}}
.c-end{transition:opacity .5s,transform .6s var(--ease)}
.c-end.off{visibility:hidden;opacity:0;transform:translateY(8px)}
@media (max-width:560px){.c-title{font-size:11px}.c-steps li{grid-template-columns:22px minmax(0,1fr);row-gap:4px}.c-steps .tg{grid-column:2;text-align:left}}

/* ---------- industries: colour-coded tiles, a grouped list on phones ---------- */
.ind-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ind-grid .ind{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:176px;padding:20px 20px 19px;border-radius:24px;border:0}
.ind-grid .ind .ind-ic{flex:none;width:38px;height:38px;border-radius:11px;border:0;background:var(--ig,linear-gradient(145deg,#2c74f2,#5ec8ff));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.ind-grid .ind .ind-ic .ico{width:19px;height:19px;stroke-width:2}
.ind-grid .ind-t{margin-top:auto;padding-top:24px;gap:4px}
.ind-grid .ind-t b{font-size:17px;line-height:1.2;letter-spacing:-.02em}
.ind-grid .ind-t span{font-size:13.5px;line-height:1.4;color:var(--dust)}
.ind-grid .ind-t a{color:inherit;text-decoration:none}
.ind-grid .ind-t a:hover{color:var(--star);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.ind-grid div.ind:hover{box-shadow:none}
.ind-grid .ind.ind-more{position:relative;background:#1d1d1f;color:#f5f5f7;transition:background-color .3s,transform .45s var(--ease)}
.ind-grid .ind.ind-more:hover{background:#2c2c2e;transform:translateY(-3px)}
.ind-grid .ind.ind-more .ind-ic{background:rgba(255,255,255,.13);color:#fff;box-shadow:none}
.ind-grid .ind.ind-more .ind-t span{color:rgba(245,245,247,.68)}
.ind-grid .ind.ind-more .arr{position:absolute;right:18px;bottom:21px;width:16px;height:16px;color:rgba(245,245,247,.68);transition:transform .4s var(--ease)}
.ind-grid .ind.ind-more:hover .arr{transform:translateX(3px)}
.ind-grid .ind.ind-more:focus-visible{outline:2px solid #0071e3;outline-offset:3px}
@media (max-width:1100px){
  .ind-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .ind-grid .ind{min-height:160px;padding:16px 15px 15px;border-radius:20px}
  .ind-grid .ind .ind-ic{width:34px;height:34px;border-radius:10px}
  .ind-grid .ind-t b{font-size:15.5px}
  .ind-grid .ind-t span{font-size:12.5px}
  .ind-grid .ind.ind-more .arr{right:14px;bottom:16px}
}
@media (max-width:700px){
  .ind-grid{display:block;padding:2px 18px;border-radius:24px;background:var(--card,#fff)}
  .ind-grid .ind{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:14px;min-height:0;padding:13px 0;border-radius:0;background:none!important;border-top:1px solid var(--line)}
  .ind-grid .ind:first-child{border-top:0}
  .ind-grid .ind .ind-ic{width:32px;height:32px;border-radius:9px}
  .ind-grid .ind .ind-ic .ico{width:16px;height:16px}
  .ind-grid .ind-t{margin:0;padding:0;gap:1px}
  .ind-grid .ind-t b{font-size:16px}
  .ind-grid .ind-t span{font-size:13px}
  .ind-grid .ind.ind-more{grid-template-columns:32px minmax(0,1fr) auto;color:var(--star)}
  .ind-grid .ind.ind-more:hover{background:none;transform:none}
  .ind-grid .ind.ind-more .ind-ic{background:rgba(0,113,227,.1);color:#0066cc}
  .ind-grid .ind.ind-more .ind-t b{color:#0066cc}
  .ind-grid .ind.ind-more .ind-t span{color:var(--dust)}
  .ind-grid .ind.ind-more .arr{position:static;color:var(--dust)}
}

/* ---------- chat teaser: a small bubble, not a card ---------- */
.bot-teaser{width:min(292px,calc(100vw - 32px));gap:9px;padding:13px 15px 14px;border-radius:20px 20px 6px 20px;background:rgba(14,19,28,.96);border-color:rgba(255,255,255,.1);box-shadow:0 18px 44px -18px rgba(0,0,0,.7)}
.bot-teaser .bot-who{gap:8px;padding-right:22px}
.bot-teaser .bot-who b{font-size:13.5px}
.bot-teaser .bot-av.bot-av-s{width:24px;height:24px;font-size:11px;box-shadow:0 0 0 1.5px rgba(0,0,0,.6),0 0 0 2.5px rgba(166,228,255,.45)}
.bot-teaser .bot-ai{font-size:8.5px;padding:2px 6px}
.bot-teaser p{font-size:14px;line-height:1.45}
.bot-teaser .bot-quick{gap:5px}
.bot-teaser .bot-quick button,.bot-teaser .bot-quick a{min-height:30px;padding:0 11px;font-size:12.5px}
.bot-teaser .bot-x{top:6px;right:6px;width:28px;height:28px;font-size:18px}

/* ---------- work cards: one quiet line of context, no wrapping caps ---------- */
.wcap .mini{font:500 12.5px/1.3 var(--font);letter-spacing:-.005em;text-transform:none;color:rgba(243,246,250,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px) and (hover:none){.paddles{display:none}}

/* ---------- platforms: proof that sits back ---------- */
.marquee li{font-weight:500;font-size:clamp(17px,1.75vw,21px);letter-spacing:-.02em;color:rgba(243,246,250,.54);padding-right:clamp(40px,5.2vw,76px)}

/* ---------- labels: Apple-style sentence case, not monospaced capitals ----------
   Product screens (dashboards, consoles, device visuals) keep their own .mini labels. */
.label{font:600 13px/1.25 var(--font);letter-spacing:-.005em;text-transform:none}
.platforms .label{font-size:14px;font-weight:500;color:#86868b}
.dd-col .label,.menu .m-group .label{font-size:12.5px;font-weight:500;color:var(--dust)}
.mm-feat .label,.mm-case .label{font-size:12.5px}
.group-head .label,.rel .label,.nc-t .label,.ex-card .label,.ex-tile .label,.wm-copy .label{font-size:13.5px}
.wb-n{font:600 14px/1.2 var(--font);letter-spacing:-.005em;text-transform:none}
.wb-n span{font:500 11.5px/1 var(--mono);letter-spacing:.02em}
.sx .wb-dots b{font:500 12.5px/1.2 var(--font);letter-spacing:-.005em;text-transform:none}
.platforms .label{margin-inline:auto}

/* ---------- icon tiles: a white glyph on the service's own colour, as in iOS ---------- */
.tic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--tg,linear-gradient(145deg,#2c74f2,#5ec8ff));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 8px 18px -10px rgba(0,0,0,.45)}
.tic .ico{width:20px;height:20px;stroke-width:1.85}
.sub-h{display:flex;align-items:center;gap:12px;min-width:0}
.sub-h .k{min-width:0}
.sub.feat{grid-template-rows:auto auto 1fr;align-content:start}
.sub.feat .tic{margin-bottom:6px}
.sub.feat h3{font-size:clamp(1.2rem,1.6vw,1.4rem);letter-spacing:-.025em}
.rel a{grid-template-rows:auto auto auto 1fr auto}
.rel a .tic{margin-bottom:8px}
/* the mega menu and the home switcher use the same tiles */
.mm-ic[style*="--tg"],.wb-ic[style*="--tg"]{background:var(--tg);border:0;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.mm-ic[style*="--tg"] .ico,.wb-ic[style*="--tg"] .ico{stroke-width:1.9}
.dd-col a:hover .mm-ic[style*="--tg"],.dd-col a[aria-current="page"] .mm-ic[style*="--tg"]{background:var(--tg);border:0;filter:brightness(1.08)}
.lt .wb-ic[style*="--tg"]{background:var(--tg);border:0;color:#fff}
.nav.nav-light.is-scrolled .mm-ic[style*="--tg"]{background:var(--tg);border:0;color:#fff}

/* tool, checklist and template cards: colour says what kind it is */
.tcard .ind-ic{border:0;color:#fff;background:linear-gradient(145deg,#2c74f2,#5ec8ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.32)}
.tcard[href*="checklists/"] .ind-ic{background:linear-gradient(145deg,#16a862,#7fdc8c)}
.tcard[href*="templates/"] .ind-ic{background:linear-gradient(145deg,#ff9417,#ffc95e)}
.tcard .ind-ic .ico{stroke-width:1.9}
.tcard .kind-l{font:600 12.5px/1.2 var(--font);letter-spacing:-.005em;text-transform:none;color:var(--dust)}
.tcard .kind-l.free{color:var(--dust)}

/* recommended tags: sentence case pills */
.way.rec .tagline,.pcard .tagline{font:600 12px/1 var(--font);letter-spacing:0;text-transform:none;padding:7px 11px}

/* page heroes: outcomes as a quiet line of ticks, not a row of pills */
.outcomes{gap:8px 22px}
.outcomes li{padding:0;border:0;background:none;border-radius:0;font-size:14.5px;color:var(--dust)}
.outcomes .ico{width:16px;height:16px}
.tic.tic-s{width:26px;height:26px;border-radius:7.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.tic.tic-s .ico{width:14px;height:14px;stroke-width:2.1;color:#fff}
.t-name:has(.tic-s){gap:10px}
.msr .mm-ic[style*="--tg"]{color:#fff}

/* small print and counts in the interface font, sentence case */
.group-head .count{font:500 14px var(--font);letter-spacing:-.005em}
.formula b{font:600 12.5px/1.3 var(--font);letter-spacing:-.005em;text-transform:none}
.must{font:600 11px/1 var(--font);letter-spacing:0;text-transform:none;padding:4px 8px;vertical-align:1px}
.lt .must{color:#8a5a00;background:rgba(255,179,0,.12);border-color:transparent}
.lt .mm-ic[style*="--tg"]{background:var(--tg);border:0;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}

/* ================= v5.2: Start a project, a brief builder =================
   Apple configurator pattern: bold step headings with a grey question, white option tiles on light grey,
   and a dark live summary that holds the send button. */

/* ---------- hero: how it works, in three steps ---------- */
.bsteps{list-style:none;margin:clamp(12px,2vw,20px) 0 0;padding:clamp(24px,3vw,32px) 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px clamp(20px,3vw,40px);width:100%}
.bsteps li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:3px;align-content:start}
.bsteps .tic{grid-row:span 2;width:36px;height:36px;border-radius:10px}
.bsteps .tic .ico{width:18px;height:18px}
.bsteps b{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--star)}
.bsteps .d{font-size:14px;line-height:1.5;color:var(--dust)}
@media (max-width:760px){.bsteps{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ---------- layout ---------- */
.bform{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:clamp(32px,5vw,72px);align-items:start}
.b-main{min-width:0}
.b-side{display:grid;gap:14px;min-width:0}
@media (min-width:1001px) and (min-height:700px){.b-side{position:sticky;top:96px}}
@media (max-width:1000px){.bform{grid-template-columns:minmax(0,1fr)}.b-side{max-width:560px}}

/* ---------- steps ---------- */
.bstep{margin:0;padding:0;border:0;min-width:0}
.bstep + .bstep{margin-top:clamp(44px,5.5vw,64px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--line)}
.bh{display:block;float:left;width:100%;margin:0 0 24px;padding:0;font-size:clamp(28px,3vw,40px);font-weight:600;line-height:1.1;letter-spacing:-.035em;color:var(--star);text-wrap:balance}
.bh b{font-weight:600}
.bh span{color:#86868b}
.bhint{margin:0 0 22px;font-size:15.5px;line-height:1.5;color:var(--dust)}
.bhint.bh-after{margin:16px 0 0}
.bhint .t-link{display:inline-flex;margin:0;font-size:inherit}
/* the heading is floated so it is not drawn inside the fieldset border; what follows clears it */
.bstep > .bh + *{clear:left}
.bh-sub{display:block;margin-top:10px;font-size:15.5px;font-weight:400;letter-spacing:-.005em;line-height:1.5;color:var(--dust)}
.bstep::after{content:"";display:table;clear:both}

/* service tiles */
.bgrp + .bgrp{margin-top:24px}
.bgl{margin:0 0 10px;font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--dust)}
.btiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (min-width:1001px) and (max-width:1180px){.btiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.btiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.btile{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;min-height:76px;padding:14px 40px 14px 14px;border-radius:18px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.07);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow .25s,transform .3s var(--ease)}
.btile:hover{box-shadow:0 0 0 1px rgba(0,0,0,.16),0 12px 26px -18px rgba(0,0,0,.35)}
.btile:active{transform:scale(.985)}
.btile input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.btile .tic{width:34px;height:34px;border-radius:10px}
.btile .tic .ico{width:17px;height:17px}
.bt-t{display:grid;gap:2px;min-width:0}
.bt-t b{font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.25;color:var(--star)}
.bt-t span{font-size:13px;line-height:1.35;color:var(--dust)}
.bt-ck{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.2);transition:background-color .2s,box-shadow .2s}
.bt-ck .ico{width:12px;height:12px;stroke-width:3;opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.btile.on,.btile:has(input:checked){box-shadow:0 0 0 2px var(--bluebtn),0 12px 26px -18px rgba(0,113,227,.45)}
.btile.on .bt-ck,.btile:has(input:checked) .bt-ck{background:var(--bluebtn);box-shadow:none}
.btile.on .bt-ck .ico,.btile:has(input:checked) .bt-ck .ico{opacity:1;transform:none}
.btile:has(input:focus-visible){outline:2px solid var(--bluebtn);outline-offset:3px}
.bgrp > .bt-unsure{min-height:68px}
/* phones: each group becomes an inset list, as in iOS Settings */
@media (max-width:640px){
  .btiles{display:block;border-radius:18px;background:#fff;overflow:hidden}
  .btile,.bgrp > .bt-unsure{min-height:0;padding:12px 54px 12px 14px;border-radius:0;background:#fff;box-shadow:none;gap:12px}
  .bgrp > .bt-unsure{border-radius:18px}
  .btile + .btile::before{content:"";position:absolute;left:60px;right:0;top:0;height:1px;background:rgba(0,0,0,.08)}
  .btile:hover{box-shadow:none}
  .btile.on,.btile:has(input:checked){box-shadow:none;background:#fff}
  .btile:active{transform:none;background:#f2f2f4}
  .btile .tic{width:32px;height:32px;border-radius:9px}
  .btile .tic .ico{width:16px;height:16px}
  .bt-t b{font-size:16px}
  .bt-t span{font-size:13px}
  .bt-ck{top:50%;right:16px;width:24px;height:24px;margin-top:-12px}
  .bt-ck .ico{width:13px;height:13px}
  .btile:has(input:focus-visible){outline:2px solid var(--bluebtn);outline-offset:-3px}
  .bgl{margin-left:14px}
}

/* budget and timing pills */
.bpills{display:flex;flex-wrap:wrap;gap:10px}
.bpill{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bpill input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.bpill span{display:inline-flex;align-items:center;min-height:50px;padding:0 20px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--star);transition:box-shadow .2s,color .2s}
.bpill:hover span{box-shadow:0 0 0 1px rgba(0,0,0,.24)}
.bpill input:checked + span{box-shadow:0 0 0 2px var(--bluebtn)}
.bpill input:focus-visible + span{outline:2px solid var(--bluebtn);outline-offset:3px}
@media (max-width:520px){.bpills{gap:8px}.bpill span{min-height:46px;padding:0 16px;font-size:14.5px}}

/* fields with floating labels */
.bfields{display:grid;gap:12px}
.bf2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:620px){.bf2{grid-template-columns:minmax(0,1fr)}}
.flt{position:relative}
.lt .flt .input{min-height:60px;padding:26px 16px 9px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.14);font-size:16px;color:var(--star)}
.lt .flt textarea.input{min-height:150px;padding-top:30px;line-height:1.5;resize:vertical}
.flt label{position:absolute;left:17px;top:19px;max-width:calc(100% - 34px);font-size:16px;line-height:1.3;color:#6e6e73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transform-origin:left top;transition:transform .22s var(--ease),color .22s}
.flt .input:focus + label,.flt .input:not(:placeholder-shown) + label{transform:translateY(-10px) scale(.75)}
.flt .input:focus + label{color:var(--bluebtn)}
.lt .flt .input:focus{border-color:var(--bluebtn);box-shadow:0 0 0 4px rgba(0,113,227,.14)}
.lt .flt .input[aria-invalid="true"]{border-color:#d70015;box-shadow:0 0 0 4px rgba(215,0,21,.1)}
.flt .input[aria-invalid="true"] + label{color:#d70015}

/* ---------- the live brief ---------- */
.bcard{--star:#f3f6fa;--dust:#8f9aab;--line:rgba(170,195,230,.12);--glint:#a6e4ff;--good:#7fe0b4;color:var(--star);color-scheme:dark;
  position:relative;display:grid;gap:16px;padding:22px 22px 20px;border-radius:28px;scroll-margin-top:96px;
  background:radial-gradient(120% 55% at 50% 0%,rgba(40,110,190,.34),transparent 62%),#0a0d13;box-shadow:0 40px 90px -46px rgba(0,40,90,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.bc-head{display:flex;align-items:center;gap:10px}
.bc-mk{display:inline-flex}
.bc-mk .mk{width:30px;height:auto}
.bc-head b{font-size:17px;font-weight:600;letter-spacing:-.015em}
.bc-st{margin-left:auto;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;font-weight:600;color:var(--dust);transition:background-color .3s,color .3s}
.bcard.is-ready .bc-st{background:rgba(127,224,180,.16);color:var(--good)}
.bc-prog{height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.bc-prog i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3d9bff,var(--glint));transform-origin:left center;transform:scaleX(var(--bp,0));transition:transform .6s var(--ease),background .4s}
.bcard.all-done .bc-prog i{background:linear-gradient(90deg,#34c77b,var(--good))}
.bc-pl{margin:-8px 0 0;font-size:12.5px;color:var(--dust)}
.bcard.all-done .bc-pl{color:var(--good)}
.bc-rows{margin:0;display:grid}
.bc-rows>div{display:grid;gap:7px;padding:13px 0;border-top:1px solid var(--line)}
.bc-rows dt{font-size:12.5px;font-weight:600;color:var(--dust)}
.bc-rows dd{margin:0;display:flex;flex-wrap:wrap;gap:6px;font-size:15px;line-height:1.35;color:var(--star);min-width:0}
.bc-empty{color:rgba(243,246,250,.54)}
.bc-you{display:grid;gap:2px;min-width:0}
.bc-you b{font-weight:600}
.bc-you span{font-size:13.5px;color:var(--dust);overflow-wrap:anywhere}
.bc-you .bc-empty{color:rgba(243,246,250,.54)}
.bchip{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border-radius:999px;background:rgba(255,255,255,.08);font-size:13px;font-weight:500;line-height:1.2}
.bchip i{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--tg);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.bchip .ico{width:12px;height:12px;stroke-width:2.2}
@media (prefers-reduced-motion:no-preference){
  .bchip.pop{animation:bchip .45s cubic-bezier(.3,1.5,.5,1)}
  @keyframes bchip{from{opacity:0;transform:scale(.7)}}
  .bcard .ready:not([hidden]){animation:bready .5s var(--ease)}
  @keyframes bready{from{opacity:0;transform:translateY(8px)}}
}
.bcard .err{margin:-4px 0 0;font-size:13.5px;line-height:1.45;color:#ff8f8f}
.bc-act{display:grid;gap:10px}
.bc-act[hidden]{display:none}
.bc-go{width:100%;justify-content:center;min-height:52px;font-size:16px}
.bc-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--dust);text-align:center}
.bcard .ready{gap:12px;padding:18px;border-radius:18px;background:rgba(127,224,180,.07);border:1px solid rgba(127,224,180,.26)}
.bcard .ready h3{font-size:18px;outline:none}
.bcard .ready h3 .ico{width:20px;height:20px;color:var(--good);stroke-width:2.4}
.bcard .ready p{font-size:14px;line-height:1.5}
.bcard .ready .acts{gap:8px}
.bcard .ready .copy-btn{min-height:38px}

/* other ways in */
.b-alt{display:grid;gap:12px;padding:18px 20px;border-radius:22px;background:#fff}
.b-alt-h{margin:0;font-size:13px;font-weight:600;color:var(--dust)}
.b-alt .mail-row{gap:8px}
.b-alt .mail-addr{font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--star)}
.b-alt .copy-btn{min-height:32px;padding:0 11px;font-size:12.5px}
.b-ask{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:12px 0 0;border:0;border-top:1px solid var(--line);background:none;color:#0066cc;font:500 15px var(--font);text-align:left;cursor:pointer}
.b-ask .ico{width:18px;height:18px}
.b-ask .arr{margin-left:auto;width:15px;height:15px;color:var(--dust);transition:transform .35s var(--ease)}
.b-ask:hover span{text-decoration:underline;text-underline-offset:.2em}
.b-ask:hover .arr{transform:translateX(3px)}

/* ---------- phones: the brief stays in sight ---------- */
.bbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:center;gap:12px;padding:9px 9px 9px 18px;border-radius:22px;
  background:rgba(22,24,30,.9);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);color:#f5f5f7;box-shadow:0 20px 50px -18px rgba(0,0,0,.6);
  transform:translateY(calc(100% + 24px));visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s}
.bbar.show{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
.bbar-t{display:grid;gap:1px;min-width:0;flex:1}
.bbar-t b{font-size:14px;font-weight:600}
.bbar-t span{font-size:13px;color:rgba(245,245,247,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbar .btn{flex:none;min-height:42px;padding:0 18px;background:#0071e3;color:#fff;box-shadow:none}
@media (min-width:1001px){.bbar{display:none}}
.bot{transition:bottom .45s var(--ease)}
.bbar-on .bot{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media print{.bbar{display:none}}

/* ================= v5.3: the closing call to action, a bright calm sea =================
   A white card that deepens to sky blue, with four layers of sea drifting at different speeds along its foot.
   Everything is vector or CSS, so it stays sharp at any size. */
.lt.cta-band{padding-block:clamp(48px,6vw,88px) clamp(72px,9vw,120px)}
.cta-band .cta-in{--sea-h:clamp(150px,16vw,224px);
  padding:clamp(56px,7vw,100px) clamp(20px,5vw,64px) calc(var(--sea-h) * .84);
  border:1px solid rgba(0,102,204,.1);
  background:radial-gradient(85% 70% at 50% -14%,#ffffff 0%,rgba(255,255,255,0) 64%),linear-gradient(180deg,#ffffff 0%,#f6faff 44%,#e5f2ff 100%);
  box-shadow:0 70px 120px -80px rgba(0,82,170,.5),inset 0 1px 0 #fff}
.cta-band .cta-in::before,.cta-band .cta-in::after{content:none}

/* the sea */
.sea{position:absolute;left:0;right:0;bottom:0;height:var(--sea-h);z-index:-1;pointer-events:none;overflow:hidden}
.sea::before{content:"";position:absolute;left:0;right:0;top:-40%;bottom:0;background:radial-gradient(55% 60% at 50% 62%,rgba(150,210,255,.34),transparent 72%)}
.sl{position:absolute;inset:0}
.sl svg{position:absolute;left:0;bottom:0;width:200%;max-width:none;height:100%;display:block;overflow:visible;will-change:transform}
.sea .sc{fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sl4 .sc{stroke-width:1.7}
@media (prefers-reduced-motion:no-preference){
  .sl1 svg{animation:sea-l 72s linear infinite}
  .sl2 svg{animation:sea-r 54s linear infinite}
  .sl3 svg{animation:sea-l 39s linear infinite}
  .sl4 svg{animation:sea-l 28s linear infinite}
  .sl2{animation:swell 9s ease-in-out infinite alternate}
  .sl3{animation:swell 7.5s ease-in-out -2.5s infinite alternate}
  .sl4{animation:swell 6.2s ease-in-out -4s infinite alternate}
  @keyframes sea-l{to{transform:translate3d(-50%,0,0)}}
  @keyframes sea-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
  @keyframes swell{from{transform:translate3d(0,-3px,0)}to{transform:translate3d(0,3px,0)}}
}

/* sun glitter on the water */
.gl{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#fff;opacity:.7;
  box-shadow:0 0 6px 1.5px rgba(255,255,255,.95),0 0 16px 4px rgba(110,190,255,.5)}
.gl::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);opacity:.85;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0)) center/100% 1px no-repeat,
             linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0)) center/1px 100% no-repeat}
@media (prefers-reduced-motion:no-preference){
  .gl{animation:glint 5.4s ease-in-out infinite;animation-delay:var(--d,0s)}
  @keyframes glint{0%,100%{opacity:0;transform:scale(.3)}42%,58%{opacity:1;transform:scale(1)}}
}

/* the last word of the headline catches the light, like water */
.cta-in .sea-t{background:linear-gradient(100deg,#0062c4 0%,#0a84ff 34%,#1d90ff 52%,#0a84ff 70%,#0062c4 100%);background-size:240% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media (prefers-reduced-motion:no-preference){
  .cta-in .sea-t{animation:sea-sheen 10s ease-in-out infinite alternate}
  @keyframes sea-sheen{to{background-position:100% 0}}
}

/* as the card settles into place, the sea rises into it */
.sx .cta-band .sea{transform:translate3d(0,calc((1 - var(--ctp,1)) * 38%),0)}

@media (max-width:640px){
  .cta-band .cta-in{--sea-h:124px;border-radius:32px;padding-bottom:calc(var(--sea-h) * .86);box-shadow:0 34px 60px -44px rgba(0,82,170,.4),inset 0 1px 0 #fff}
  .gl:nth-of-type(n+5){display:none}
}
@media print{.sea{display:none}.cta-band .cta-in{padding-bottom:clamp(56px,7vw,100px)}}

/* ================= v5.4: phones =================
   Long runs of similar cards become swipeable rows with the next card peeking; everything else keeps
   its reading order. Spacing is tightened so pages are shorter without feeling cramped. */
.mdots{display:none}
.wb-seg{display:none}

@media (max-width:760px){
  /* ---------- rhythm ---------- */
  :root{--section:72px}
  .lt{padding-block:56px}
  .lt.cta-band{padding-block:36px 60px}
  .sec-head{row-gap:14px}
  .sec-head + :is(.subs,.rel,.steps,.bento,.case-row,.tool-grid,.tips,.ways,.ex-tbl,.how-grid,.dash,.subhead,.guide-grid,.ind-grid,.loc-grid,.table-wrap,.msr-grid){margin-top:30px}
  .group{margin-top:56px}
  .sx .hero{height:188svh}
  .sx .statement[data-scene]{height:150svh}

  /* ---------- swipeable rows ---------- */
  .mcar{--pad:max(var(--gx), env(safe-area-inset-left,0px));position:relative;display:flex!important;flex-wrap:nowrap!important;align-items:stretch;gap:12px!important;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    margin-inline:calc(-1 * var(--pad))!important;padding:6px var(--pad) 22px!important;margin-bottom:-12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mcar::-webkit-scrollbar{display:none}
  .mcar > *{flex:0 0 var(--cw,84%)!important;width:auto!important;max-width:var(--cmax,360px)!important;min-width:0;margin:0!important;scroll-snap-align:start;grid-column:auto!important}
  .mcar::after{content:"";flex:0 0 1px;margin-left:-1px}
  .mcar:focus-visible{outline:2px solid var(--bluebtn,#0071e3);outline-offset:-2px;border-radius:12px}
  /* sizes by what each card holds */
  .subs.mcar{--cw:84%}
  .subs.mcar:has(> .feat){--cw:74%;--cmax:300px}
  .bento.mcar{--cw:88%;--cmax:380px}
  .case-row.mcar{--cw:78%;--cmax:330px}
  .rel.mcar{--cw:80%}
  .ex-grid.mcar{--cw:84%}
  .ways.mcar{--cw:86%}
  .msr-grid.mcar{--cw:66%;--cmax:280px}
  .mcar > .wmore.n1{grid-column:auto}
  /* page dots */
  .mdots{display:flex;justify-content:center;gap:7px;height:6px;margin-top:16px}
  .mdots[hidden]{display:none}
  .mdots i{width:6px;height:6px;border-radius:3px;background:rgba(0,0,0,.18);cursor:pointer;transition:width .35s var(--ease),background-color .35s}
  .mdots i.on{width:18px;background:#1d1d1f}
  section:not(.lt) .mdots i{background:rgba(255,255,255,.24)}
  section:not(.lt) .mdots i.on{background:#f5f5f7}

  /* ---------- the row of sub-service links scrolls sideways ---------- */
  .jump{--pad:max(var(--gx), env(safe-area-inset-left,0px));flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);padding-bottom:4px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent)}
  .jump::-webkit-scrollbar{display:none}
  .jump > *{flex:none;white-space:nowrap}

  /* ---------- work: shorter cards in the full gallery ---------- */
  .work-grid .wcard{aspect-ratio:4/4.5}
}

/* ---------- tools, checklists and templates: one grouped list on phones, as in iOS ---------- */
@media (max-width:560px){
  .tool-grid{display:block;border-radius:20px;overflow:hidden;background:var(--card,#fff)}
  .tool-grid .tcard{position:relative;grid-template-columns:32px minmax(0,1fr) 10px;gap:14px;align-items:center;padding:13px 16px;border-radius:0;border:0;background:none!important;box-shadow:none!important;transform:none!important}
  .tool-grid .tcard + .tcard::before{content:"";position:absolute;left:62px;right:0;top:0;height:1px;background:var(--line)}
  .tool-grid .tcard::after{content:"";width:7px;height:7px;border-top:1.6px solid var(--dust);border-right:1.6px solid var(--dust);transform:rotate(45deg);justify-self:end;margin-right:3px}
  .tool-grid .tcard:active{background:rgba(0,0,0,.04)!important}
  .tool-grid .tcard .ind-ic{width:32px;height:32px;border-radius:9px}
  .tool-grid .tcard .ind-ic .ico{width:16px;height:16px}
  .tool-grid .tcard b{font-size:16px;margin-bottom:2px}
  .tool-grid .tcard span.d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.4}
  .tool-grid .tcard .kind-l{display:none}
  .tool-grid .tcard .free{display:none}
}

/* ---------- home services: four tabs on phones and tablets ---------- */
@media (max-width:959px){
  .wb-tabbed{gap:0}
  .wb-tabbed .wb-seg{position:sticky;top:calc(78px + env(safe-area-inset-top,0px));z-index:5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:3px;margin:0 0 22px;border-radius:13px;
    background:rgba(118,118,128,.14);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
  .wb-tabbed .wb-seg[hidden]{display:none}
  .wb-seg button{position:relative;z-index:1;min-height:40px;padding:0 4px;border:0;border-radius:10px;background:none;font:500 14.5px var(--font);letter-spacing:-.01em;color:var(--star);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .wb-seg button[aria-selected="true"]{font-weight:600}
  .wb-seg button:focus-visible{outline:2px solid var(--bluebtn,#0071e3);outline-offset:-2px}
  .wb-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 4);border-radius:10px;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);
    transform:translateX(calc(var(--si,0) * 100%));transition:transform .42s var(--ease)}
  .wb-tabbed .wb-list{gap:0}
  .wb-tabbed .wb-blk:not(.cur){display:none}
  .wb-tabbed .wb-blk .wb-n{display:none}
  .wb-tabbed .wb-blk .blk-viz{margin-bottom:8px}
}
@media (max-width:959px) and (prefers-reduced-motion:no-preference){
  .wb-tabbed .wb-blk.cur{animation:wbin .45s var(--ease)}
  @keyframes wbin{from{opacity:0;transform:translate3d(0,10px,0)}}
}

/* ---------- phones: visuals inside swipeable tiles and the home tabs are drawn smaller ---------- */
@media (max-width:760px){
  .bento.mcar .tile{gap:22px}
  /* every tile in a row shows the same-sized window onto its visual, so the cards match without empty space */
  .bento.mcar .tile .viz,.bento.mcar .tile .dv-stage{position:relative;height:292px;min-height:0;overflow:hidden;align-items:start;align-content:start}
  .bento.mcar .tile .viz > *,.bento.mcar .tile .dv-stage > *{zoom:.8}
  .bento.mcar .tile .viz::after,.bento.mcar .tile .dv-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(7,11,18,0),#070b12 92%)}
  .bento.mcar .tile .dv-stage::after{background:linear-gradient(180deg,rgba(7,16,26,0),#07101a 92%)}
  .bento.mcar .tile{align-content:start}
  .bento.mcar .tile .chips-s{display:none}
  .bento.mcar .t-desc{font-size:15.5px}
  .wb-tabbed .blk-viz{zoom:.82}
}

/* ---------- phones: page heroes show one strong visual, not a stack of panels ---------- */
@media (max-width:760px){
  .svc-hero .hero-viz{overflow:hidden;padding:14px;border-radius:28px}
  .sx .svc-hero .hero-viz>*{transform:translate3d(0,calc(var(--lv,0) * 36px),0) scale(calc(1 - var(--lv,0) * .04))}
  .svc-hero .viz-ads .ad-side{display:none}
  .svc-hero .viz-email .smart{display:none}
  .svc-hero .viz-design{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);zoom:.8}
  .svc-hero .viz-web{padding-bottom:6px}
  /* the AI console, here and on the home page */
  .c-prompts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:14px 16px 2px;margin:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .c-prompts::-webkit-scrollbar{display:none}
  .c-prompts button{flex:none;min-height:36px;padding:0 14px;font-size:13.5px}
  .c-body{gap:12px;padding:16px 14px 16px}
  .c-ask{font-size:15px}
  .c-steps{gap:6px}
  .c-steps li{grid-template-columns:20px minmax(0,1fr);gap:10px;padding:10px 12px;font-size:13.5px;border-radius:12px}
  .c-steps .tg{display:none}
  .c-end{padding:12px 14px;font-size:14px}
  .c-foot{display:none}
}
@media (max-width:760px){.svc-hero .viz-design .dz-stack{margin-right:12px}}

/* ================= v6: the landscape =================
   Every page is a journey down: space at the top, then isolated peaks rising through a sea of clouds where
   the dark opening gives way to daylight, then the sea in the closing card, then space again in the footer.
   The scenes are rendered images (see art/), loaded lazily, with the stars of the page showing through. */
.has-hz.has-hz{--hz-h:clamp(250px,34vw,900px);position:relative;padding-bottom:calc(var(--hz-h) * .9)}
.has-hz > .wrap,.has-hz > .marquee{position:relative;z-index:1}
.hz{--hz-fill:#fff;position:absolute;left:0;right:0;bottom:0;height:var(--hz-h);z-index:0;pointer-events:none;overflow:hidden}
.hz-g{--hz-fill:#f5f5f7}
.hz-art,.hz-art img{position:absolute;left:0;top:0;display:block;width:100%;height:100%}
.hz-art img{object-fit:cover;object-position:50% 100%}
/* the foot always meets the next section exactly, wherever the parallax has moved the art */
.hz::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(180deg,rgba(255,255,255,0),var(--hz-fill) 92%)}
.hz-g::after{background:linear-gradient(180deg,rgba(245,245,247,0),var(--hz-fill) 92%)}
/* the mist drifts slowly across the cloud sea */
.hz-mist{position:absolute;left:-12%;right:-12%;bottom:10%;height:30%;opacity:.42;
  background:radial-gradient(38% 46% at 24% 58%,rgba(255,255,255,.30),transparent 72%),radial-gradient(30% 40% at 58% 64%,rgba(235,244,255,.24),transparent 72%),
             radial-gradient(34% 44% at 86% 56%,rgba(255,255,255,.26),transparent 72%)}
@media (prefers-reduced-motion:no-preference){
  .hz-mist{animation:hz-drift 46s ease-in-out infinite alternate}
  @keyframes hz-drift{from{transform:translate3d(-5%,0,0)}to{transform:translate3d(5%,0,0)}}
}
/* the peaks settle a little slower than the page scrolls, so they feel far away */
.sx .hz-art{transform:translate3d(0,calc(var(--hzp,0) * 36px),0);will-change:transform}
/* phones use a closer, taller frame of the same scene (2:1) */
@media (max-width:760px){
  .has-hz.has-hz{--hz-h:clamp(210px,50vw,380px);padding-bottom:var(--hz-h)}
  .sx .hz-art{transform:translate3d(0,calc(var(--hzp,0) * 18px),0)}
}
/* the compact hero on tools, templates and checklists sets its padding firmly; the scene still needs its room */
.has-hz.tool-hero{padding-bottom:calc(var(--hz-h) * .9)!important}
@media (max-width:760px){.has-hz.tool-hero{padding-bottom:var(--hz-h)!important}}
/* the cloud sea already fades into the next section, so that section needs less space above it */
.has-hz + section.lt{padding-top:clamp(36px,4.6vw,76px)}
@media print{.hz{display:none}.has-hz.has-hz{padding-bottom:40px}}

/* ---------- the sea card: a pale far coast on the horizon, behind the waves ---------- */
.coast{position:absolute;left:0;right:0;bottom:calc(var(--sea-h,180px) * .4);z-index:-1;pointer-events:none}
.coast img{display:block;width:100%;height:auto}
/* room above the waves for the coast, so its summits rise below the email row, never behind it */
.cta-band .cta-in{padding-bottom:calc(var(--sea-h) * .98)}
@media (max-width:760px){.cta-band .cta-in{padding-bottom:calc(var(--sea-h) * 1.08)}}
@media print{.coast{display:none}}

/* ---------- the live ocean (see extra-ocean.js); the drawn waves stay as the fallback ---------- */
.sea canvas.ocean{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.sea-gl .sl,.sea-gl .gl{display:none}
.sea-gl::before{opacity:.45}

/* ================= v17: the chat circle as a patch of night sky =================
   Charlie's circle (the chat button, the chat header, the teaser and the bylines) is a disc of black sky with
   a white C. On the chat button the stars turn slowly and twinkle; elsewhere they stay still. */
.bot-av{isolation:isolate;overflow:visible;background:#000;color:#fff;text-shadow:0 0 10px rgba(166,228,255,.55),0 0 2px rgba(255,255,255,.6)}
.bot-av::before,.bot-av::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;pointer-events:none}
/* the steady stars, and the faintest blue at one edge of the sky */
.bot-av::before{background:
  radial-gradient(circle at 18% 30%,rgba(255,255,255,.95) 0 .7px,transparent 1.2px),
  radial-gradient(circle at 74% 18%,rgba(255,255,255,.8) 0 .6px,transparent 1.1px),
  radial-gradient(circle at 84% 62%,rgba(255,255,255,.9) 0 .8px,transparent 1.3px),
  radial-gradient(circle at 30% 78%,rgba(255,255,255,.7) 0 .6px,transparent 1.1px),
  radial-gradient(circle at 56% 88%,rgba(255,255,255,.6) 0 .5px,transparent 1px),
  radial-gradient(circle at 10% 58%,rgba(255,255,255,.55) 0 .5px,transparent 1px),
  radial-gradient(circle at 62% 8%,rgba(255,255,255,.5) 0 .5px,transparent 1px),
  radial-gradient(circle at 92% 40%,rgba(255,255,255,.5) 0 .45px,transparent .95px),
  radial-gradient(circle at 42% 14%,rgba(166,228,255,.75) 0 .6px,transparent 1.1px),
  radial-gradient(circle at 76% 84%,rgba(166,228,255,.6) 0 .55px,transparent 1.05px),
  radial-gradient(120% 120% at 85% 10%,rgba(60,110,220,.16),transparent 55%)}
/* the twinkling ones */
.bot-av::after{background:
  radial-gradient(circle at 26% 46%,rgba(255,255,255,1) 0 .9px,transparent 1.5px),
  radial-gradient(circle at 66% 32%,rgba(255,255,255,.9) 0 .7px,transparent 1.2px),
  radial-gradient(circle at 48% 70%,rgba(255,255,255,.85) 0 .6px,transparent 1.1px),
  radial-gradient(circle at 88% 76%,rgba(255,255,255,.8) 0 .6px,transparent 1.1px),
  radial-gradient(circle at 14% 16%,rgba(255,255,255,.75) 0 .55px,transparent 1.05px),
  radial-gradient(circle at 36% 92%,rgba(255,255,255,.7) 0 .5px,transparent 1px);opacity:.85}
/* the chat button itself is the sky: stars across the whole button drift slowly past the C and the label,
   in two layers at different speeds, and the nearer one twinkles. The C's own disc turns clear so the same
   sky runs behind it. */
.bot-launch{position:relative;overflow:hidden;isolation:isolate;background:#000}
.bot-launch::before,.bot-launch::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background-repeat:repeat}
.bot-launch::before{background-size:96px 56px;background-image:
  radial-gradient(circle at 8px 12px,rgba(255,255,255,.9) 0 .7px,transparent 1.2px),
  radial-gradient(circle at 31px 40px,rgba(255,255,255,.7) 0 .6px,transparent 1.1px),
  radial-gradient(circle at 52px 9px,rgba(166,228,255,.75) 0 .6px,transparent 1.1px),
  radial-gradient(circle at 66px 30px,rgba(255,255,255,.55) 0 .5px,transparent 1px),
  radial-gradient(circle at 83px 47px,rgba(255,255,255,.8) 0 .65px,transparent 1.15px),
  radial-gradient(circle at 90px 18px,rgba(255,255,255,.45) 0 .45px,transparent .95px),
  radial-gradient(circle at 20px 26px,rgba(255,255,255,.4) 0 .45px,transparent .95px)}
.bot-launch::after{background-size:72px 56px;opacity:.85;background-image:
  radial-gradient(circle at 14px 44px,rgba(255,255,255,1) 0 .9px,transparent 1.5px),
  radial-gradient(circle at 40px 16px,rgba(255,255,255,.9) 0 .75px,transparent 1.3px),
  radial-gradient(circle at 60px 36px,rgba(255,255,255,.8) 0 .6px,transparent 1.1px),
  radial-gradient(circle at 28px 6px,rgba(166,228,255,.7) 0 .55px,transparent 1.05px)}
.bot-launch > *{position:relative;z-index:1}
.bot-launch .bot-av{background:transparent;box-shadow:none}   /* no ring round the C: the button's own edge is the circle */
/* without the ring the C sits closer to its label, and the green online dot tucks in beside the C, inside the button's edge */
.bot-launch{gap:2px}
.bot-launch .bot-on{right:4px;bottom:6px;width:10px;height:10px;box-shadow:0 0 0 2px #000}
.bot-launch .bot-av::before,.bot-launch .bot-av::after{display:none}
.bot-launch::before{animation:bot-drift-far 46s linear infinite}
.bot-launch::after{animation:bot-drift-near 22s linear infinite,bot-twinkle 2.6s ease-in-out infinite alternate}
@keyframes bot-drift-far{to{background-position:-96px 0}}
@keyframes bot-drift-near{to{background-position:-72px 0}}
@keyframes bot-twinkle{0%{opacity:.3}55%{opacity:1}100%{opacity:.65}}
@media (prefers-reduced-motion:reduce){.bot-launch::before,.bot-launch::after{animation:none}}
@media print{.bot-av::before,.bot-av::after,.bot-launch::before,.bot-launch::after{display:none}}

/* ================= v22: the phone menu on one screen =================
   The main pages run in one row along the top, as they do in the bar on a computer. Every service is a pill,
   the house pill of the Menu button itself, set in rows under its group's name, so fifteen services take seven
   short rows instead of nineteen tall ones. The smaller pages and Start a project sit at the bottom, within
   reach of the thumb. The panel, its glass, its type and its light version over light sections are unchanged. */
.menu{max-height:calc(100dvh - 90px);display:flex;flex-direction:column;gap:0;padding:4px 14px 12px}

/* the main pages */
.menu .m-pages{display:flex;justify-content:space-between;margin:0 -6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.menu .m-pages a{padding:11px 6px;font-size:17px;font-weight:500;letter-spacing:-.02em;line-height:20px;border-radius:12px;white-space:nowrap}

/* the services, a group to a block */
.menu .m-svcs{display:grid;gap:12px;padding:12px 0 13px;border-bottom:1px solid var(--line)}
.menu .m-grp{display:grid;gap:6px}
.menu .m-grp .label{margin:0;padding:0;font-size:12.5px;font-weight:500;line-height:15px;letter-spacing:0;color:var(--dust)}
.menu .m-chips{display:flex;flex-wrap:wrap;gap:6px}
.menu .m-chips a{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:999px;font-size:14.5px;font-weight:500;letter-spacing:-.01em;line-height:1.15;
  background:rgba(255,255,255,.06);border:1px solid var(--line);transition:background-color .2s,border-color .2s,color .2s}
.menu .m-chips a:hover{background:rgba(255,255,255,.11)}
.menu .m-chips a:active{background:rgba(255,255,255,.15)}

/* the page you are on */
.menu :is(.m-pages,.m-chips,.m-more) a[aria-current="page"]{color:var(--glint)}
.menu .m-chips a[aria-current="page"]{background:rgba(166,228,255,.1);border-color:rgba(166,228,255,.36)}

/* the smaller pages and Start a project */
.menu .m-foot{display:grid;gap:6px;padding-top:4px}
.menu .m-more{display:flex;flex-wrap:wrap;margin:0 -8px}
.menu .m-more a{padding:10px 8px;font-size:15px;font-weight:400;letter-spacing:-.005em;line-height:18px;color:var(--dust)}
.menu :is(.m-pages,.m-more) a:hover{background:transparent;color:var(--star)}
.menu .m-cta{display:flex;width:100%;min-height:46px;padding:0 22px;font-size:16px;font-weight:600;letter-spacing:-.01em;border-radius:999px}
.menu a:focus-visible{outline:2px solid var(--glint);outline-offset:2px}

/* the light version, over light sections */
.nav.nav-light.is-scrolled .menu .m-chips a{background:rgba(0,0,0,.04)}
.nav.nav-light.is-scrolled .menu .m-chips a:hover{background:rgba(0,0,0,.075)}
.nav.nav-light.is-scrolled .menu .m-chips a[aria-current="page"]{background:rgba(0,113,227,.07);border-color:rgba(0,113,227,.32)}
.nav.nav-light.is-scrolled .menu :is(.m-pages,.m-more) a:hover{background:transparent}

/* narrower phones keep both rows of pages on one line each */
@media (max-width:384px){.menu .m-pages a{font-size:16px}}
@media (max-width:370px){
  .menu .m-pages a{padding-inline:5px;font-size:15.5px}
  .menu .m-pages{margin-inline:-5px}
  .menu .m-more a{padding-inline:7px;font-size:14px}
  .menu .m-more{margin-inline:-7px}
}
@media (max-width:340px){.menu .m-pages{flex-wrap:wrap;justify-content:flex-start;column-gap:6px}}
/* tablets: the same sheet at phone width, under the Menu button, instead of stretched across the screen */
@media (min-width:600px) and (min-height:600px){.menu{width:440px;margin:10px 0 0 auto}}
/* phones on their side: each group's name sits beside its pills, and Start a project beside the smaller pages */
@media (min-width:600px) and (max-height:599px){
  .menu .m-grp{grid-template-columns:72px minmax(0,1fr);column-gap:8px;align-items:start}
  .menu .m-grp .label{line-height:30px}
  .menu .m-foot{grid-template-columns:minmax(0,1fr) 260px;align-items:center;column-gap:16px}
}
/* shorter screens, such as phones in Safari with its bars showing: the same layout, a little tighter */
@media (max-height:650px){
  .menu{padding:2px 12px 10px}
  .menu .m-pages a{padding-block:9px}
  .menu .m-svcs{gap:9px;padding:9px 0 10px}
  .menu .m-grp{gap:5px}
  .menu .m-chips{gap:5px}
  .menu .m-chips a{min-height:29px;padding:0 12px;font-size:14px}
  .menu .m-more a{padding-block:8px}
  .menu .m-cta{min-height:42px}
}
@media (max-height:560px){
  .menu{max-height:calc(100dvh - 84px);padding-bottom:8px}
  .menu .m-pages a{padding-block:8px}
  .menu .m-svcs{gap:7px;padding:7px 0 8px}
  .menu .m-grp{gap:4px}
  .menu .m-chips a{min-height:28px}
  .menu .m-more a{padding-block:7px}
  .menu .m-foot{gap:4px;padding-top:2px}
  .menu .m-cta{min-height:40px}
}

/* the menu settles in as it opens, and the chat button and the start bar step aside while it is open */
@media (prefers-reduced-motion:no-preference){
  .menu:not([hidden]){animation:m-in .38s var(--ease)}
  .menu:not([hidden]) > *{animation:m-up .5s var(--ease) both}
  .menu:not([hidden]) > :nth-child(2){animation-delay:.04s}
  .menu:not([hidden]) > :nth-child(3){animation-delay:.08s}
  @keyframes m-in{from{opacity:0;transform:translateY(-6px) scale(.985)}}
  @keyframes m-up{from{opacity:0;transform:translateY(6px)}}
}
.bot{transition:bottom .45s var(--ease),opacity .25s,visibility .25s}
.menu-open .bot{opacity:0;visibility:hidden}
.menu-open .bbar.show{transform:translateY(calc(100% + 24px));visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s}