/* Cliqto Media: shared styles (design 08 "Organic Waves").
   Breakpoints: phone ≤720 · tablet 721–1023 · desktop ≥1024. */
/* self-hosted fonts (latin) */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/dm-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --blue:#2f8ac8; --indigo:#5144b2; --violet:#7d0f94;
  --orange:#ff5615; --amber:#ff9f0a; --yellow:#ffd51c;
  --ink:#1d1840; --ink-2:#4a4570; --lav:#f3f0fb; --lav-2:#e8e2f7; --line:#d9d1f0;
  --grad:linear-gradient(120deg,var(--blue) 0%,var(--indigo) 52%,var(--violet) 100%);
  --warm:linear-gradient(135deg,var(--orange),var(--amber));
  --head:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --r:18px; --pad:32px; --nav-h:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h)}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--lav);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,7vw,4.9rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.8rem,4vw,2.75rem);font-weight:700}
h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:var(--head);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin-bottom:14px}
.muted{color:var(--ink-2);font-size:.95rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* prototype badge (remove before launch) */
.proto-badge{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;font:500 11px/1 var(--body);letter-spacing:.02em;color:#fff;background:rgba(29,24,64,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:7px 10px;border-radius:999px;text-decoration:none;opacity:.75}
.proto-badge:hover{opacity:1}

/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:40;background:linear-gradient(90deg,var(--orange),var(--amber),var(--yellow));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .98rem/1 var(--head);text-decoration:none;padding:15px 24px;min-height:44px;border-radius:999px;border:1.5px solid transparent;transition:transform .25s var(--ease),box-shadow .25s,background-color .2s,color .2s,border-color .2s;white-space:nowrap;position:relative}
.btn:focus-visible,.nav a:focus-visible,.nav button:focus-visible,.card--tool:focus-visible,.link:focus-visible,.tcard:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;box-shadow:0 0 0 2px #1d1840}
.btn--accent{background:var(--warm);color:#1d1840;box-shadow:0 10px 28px -10px rgba(255,86,21,.75);overflow:hidden}
.btn--accent::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn--accent:hover::after{transform:translateX(120%)}
.btn--accent:hover{box-shadow:0 16px 36px -10px rgba(255,86,21,.9)}
.btn--outline{border-color:rgba(255,255,255,.75);color:#fff;background:rgba(255,255,255,.04)}
.btn--outline:hover{background:rgba(255,255,255,.14)}
.btn .arr{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* nav: transparent over the hero, solid after scrolling */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;color:#fff;transition:background-color .35s,box-shadow .35s,color .35s,height .35s}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h);transition:height .35s var(--ease)}
.nav--solid{background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);color:var(--ink);box-shadow:0 1px 0 var(--line),0 10px 30px -20px rgba(50,30,120,.35)}
.nav--solid .nav__in{height:64px}
.nav--solid .btn--outline{border-color:var(--indigo);color:var(--indigo)}
.nav--solid .btn--outline:hover{background:var(--lav)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.08rem var(--head);letter-spacing:-.01em;position:relative;z-index:2}
.brand img{background:#fff;border-radius:50%;padding:3px;width:34px;height:34px;transition:transform .6s var(--ease)}
.brand:hover img{transform:rotate(-30deg)}
.nav__links{display:flex;align-items:center;gap:28px}
.nav__links a{text-decoration:none;font-weight:500;position:relative}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--warm);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.nav__links a:not(.btn):hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
.nav__links .btn{padding:11px 18px;font-size:.9rem}
.nav__toggle{display:none;position:relative;z-index:2;width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.14);color:inherit;cursor:pointer}
.nav--solid .nav__toggle{background:var(--lav-2)}
.nav__toggle span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),opacity .2s}
.nav__toggle span:nth-child(1){top:16px}.nav__toggle span:nth-child(2){top:21px}.nav__toggle span:nth-child(3){top:26px}
.nav--open .nav__toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav--open .nav__toggle span:nth-child(2){opacity:0}
.nav--open .nav__toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;background:var(--grad);background-size:160% 160%;min-height:min(92vh,820px);display:flex;align-items:center;padding:calc(var(--nav-h) + 40px) 0 104px;animation:gradShift 18s ease-in-out infinite alternate}
@keyframes gradShift{from{background-position:0% 30%}to{background-position:100% 70%}}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 18% 55%,rgba(30,20,90,.42),transparent 70%);pointer-events:none;z-index:1}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__in{position:relative;z-index:2;width:100%;will-change:transform,opacity}
.hero__copy{max-width:680px}
.hero .eyebrow{color:rgba(255,255,255,.88);display:inline-flex;align-items:center;gap:10px}
.hero .eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--orange),var(--yellow))}
.hero h1{text-shadow:0 2px 30px rgba(20,10,70,.25)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .ln>span{display:inline-block}
.hl{background:linear-gradient(90deg,#ffb33a,var(--yellow),#ffb33a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);max-width:580px;color:rgba(255,255,255,.92)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.scroll-cue{position:absolute;left:50%;bottom:76px;z-index:2;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.6);border-radius:14px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* stats */
.stats{position:relative;z-index:3;margin-top:-52px}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--r);box-shadow:0 24px 60px -28px rgba(50,30,120,.45);overflow:hidden}
.stats__grid>div{padding:26px 28px;border-left:1px solid var(--lav-2)}
.stats__grid>div:first-child{border-left:0}
.stats b{display:block;font:800 clamp(1.8rem,3.2vw,2.4rem)/1.1 var(--head);letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stats span{color:var(--ink-2);font-size:.92rem}

/* marquee of data sources */
.marquee{padding:44px 0 0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee ul{display:flex;gap:12px;list-style:none;margin:0;padding:0 6px}
.marquee li{font:600 .92rem/1 var(--head);color:var(--indigo);background:#fff;border:1px solid var(--line);border-radius:999px;padding:12px 18px;white-space:nowrap;display:flex;align-items:center;gap:10px}
.marquee li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad)}
.marquee li:nth-child(4n)::before{background:var(--warm)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* blocks */
.block{padding:104px 0}
.block--color{background:var(--grad);color:#fff;position:relative;overflow:hidden}
.block--color .eyebrow{color:rgba(255,255,255,.85)}
.block--tint{background:var(--lav-2)}
.waves-deco{position:absolute;inset:auto -10% 0 -10%;width:120%;height:160px;pointer-events:none;opacity:.5;animation:drift 16s ease-in-out infinite alternate}
.waves-deco .flow,.work__visual .flow{stroke-dasharray:160 1240;animation:flow 7s linear infinite}
@keyframes drift{to{transform:translateX(6%)}}
@keyframes flow{to{stroke-dashoffset:-1400}}
.block__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.block__head h2{margin:0}
.link{font:600 1rem var(--head);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px;transition:border-color .2s}
.block--color .link{color:#fff;border-color:var(--yellow)}

.cards{display:grid;gap:22px}
.cards--3{grid-template-columns:repeat(3,1fr)}
#what h2{margin-bottom:40px}
.card{background:#fff;border-radius:var(--r);padding:30px;border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.card>*{position:relative}
.card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(81,68,178,.12),transparent 60%);pointer-events:none}
.card:hover::before{opacity:1}
.card p{color:var(--ink-2);margin:0}
.card__num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--grad);color:#fff;font:700 .95rem var(--head);margin-bottom:22px;transition:transform .5s var(--ease)}
.card:hover .card__num{transform:rotate(-8deg) scale(1.06)}
.card__wave{position:absolute;right:22px;top:30px;width:70px;height:24px;opacity:.55}
.card__wave path{stroke-dasharray:90;stroke-dashoffset:90;transition:stroke-dashoffset 1.2s var(--ease)}
.in .card__wave path,.no-js .card__wave path,.card:hover .card__wave path{stroke-dashoffset:0}
.card--tool{display:block;text-decoration:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);color:#fff;z-index:1;backdrop-filter:blur(2px)}
.card--tool::before{background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.22),transparent 60%)}
.card--tool:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.card--tool p{color:rgba(255,255,255,.85)}
.card--tool h3::after{content:" →";display:inline-block;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s var(--ease);color:var(--yellow)}
.card--tool:hover h3::after{opacity:1;transform:none}
.tag{display:inline-block;font:600 .74rem/1 var(--head);letter-spacing:.06em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.16);margin-bottom:18px}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.work__visual{aspect-ratio:4/3;border-radius:24px;background:var(--grad);background-size:180% 180%;animation:gradShift 12s ease-in-out infinite alternate;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.work__visual svg{position:absolute;inset:0 -10%;width:120%;height:100%;animation:drift 10s ease-in-out infinite alternate}
.work__visual span{position:relative;font:800 clamp(3.5rem,8vw,6rem)/1 var(--head);color:#fff;letter-spacing:-.04em;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(-3deg)}}
#about .split{align-items:start}
#about h2{margin:0}

.cta{text-align:center;padding:120px 0}
.cta__in{position:relative;z-index:1}
.cta h2{font-size:clamp(2rem,5vw,3.4rem)}
.cta h2 em{font-style:normal}
.cta p{color:rgba(255,255,255,.88);font-size:1.12rem;margin-bottom:30px}
.cta .waves-deco{inset:0 -10%;height:100%;opacity:.35}

/* footer */
.footer{background:#17123a;color:rgba(255,255,255,.75);padding:44px 0 28px;font-size:.93rem}
.footer__in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer__brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--head);font-weight:600}
.footer__brand img{background:#fff;border-radius:50%;padding:2px}
.footer nav{display:flex;gap:20px;flex-wrap:wrap}
.footer nav a{text-decoration:none}
.footer nav a:hover{color:#fff}
.footer__note{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem;color:rgba(255,255,255,.55)}

/* ---------- motion (only with JS; without JS everything is visible) ----------
   .mo is set by motion.js after it has shown everything on the first screen: on a slow network
   the page stays readable until the script arrives (docs/13 A7). The hero entrance is pure CSS from the first paint,
   so it never waits for the network (scan 2, role 08). */
.mo [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .45s ease-out,transform .55s var(--ease);transition-delay:calc(var(--d,0) * 60ms)}
.mo [data-reveal].no-anim{transition:none}
.mo [data-reveal].in{opacity:1;transform:none}
.js .hero [data-in]{animation:hero-in .45s ease-out both;animation-delay:calc(var(--i,0) * 45ms)}
.js .hero h1 .ln>span{animation:hero-up .55s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes hero-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hero-up{from{transform:translateY(105%)}to{transform:none}}

/* ---------- tablet 721–1023 ---------- */
@media (max-width:1023px){
  :root{--pad:28px}
  .nav__links{gap:20px}
  .cards--3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:36px}
  .work__visual{max-width:640px}
  .block{padding:88px 0}
}
@media (min-width:721px) and (max-width:1023px) and (orientation:portrait){
  .hero{min-height:min(72vh,760px)}
}
/* ---------- phone ≤720 ---------- */
@media (max-width:720px){
  :root{--pad:16px;--nav-h:68px}
  body{font-size:16px}
  .nav__toggle{display:block}
  .nav__links{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:96px 24px calc(40px + env(safe-area-inset-bottom));background:var(--grad);color:#fff;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .nav--open .nav__links{opacity:1;visibility:visible}
  .nav__links a:not(.btn){font:700 2rem/1.3 var(--head);letter-spacing:-.02em;transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .5s}
  .nav__links a:not(.btn)::after{display:none}
  .nav__links .btn{margin-top:24px;padding:15px 24px;font-size:1rem;border-color:#fff;color:#fff;transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .5s}
  .nav--open .nav__links a{transform:none;opacity:1}
  .nav--open .nav__links a:nth-child(2){transition-delay:.06s}
  .nav--open .nav__links a:nth-child(3){transition-delay:.12s}
  .nav--open .nav__links a:nth-child(4){transition-delay:.18s}
  .nav--open .nav__links a:nth-child(5){transition-delay:.24s}
  .nav--open .nav__links a:nth-child(6){transition-delay:.3s}
  .nav--open{color:#fff}
  .nav--open.nav--solid{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .no-js .nav__in,.no-js .nav--solid .nav__in{height:auto;min-height:var(--nav-h);flex-wrap:wrap;padding:10px 0}.no-js .nav__links{position:static;opacity:1;visibility:visible;flex-direction:row;flex-wrap:wrap;flex-basis:100%;padding:6px 0 0;background:none;gap:4px 14px}.no-js .hero{padding-top:calc(var(--nav-h) + 72px)}
  .no-js .nav__links a:not(.btn){font-size:.95rem;opacity:1;transform:none}
  .no-js .nav__links .btn{display:none}
  .no-js .nav__toggle{display:none}
  .hero{padding:calc(var(--nav-h) + 36px) 0 96px;min-height:0}
  .hero__cta .btn{flex:1 1 100%}
  .scroll-cue{display:none}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stats__grid>div{padding:20px 18px}
  .stats__grid>div:nth-child(3){border-left:0}
  .stats__grid>div:nth-child(n+3){border-top:1px solid var(--lav-2)}
  .marquee{padding-top:32px}
  .marquee li{font-size:.85rem;padding:10px 14px}
  .cards--3{grid-template-columns:1fr}
  .block{padding:72px 0}
  .card{padding:24px}
  .cta{padding:84px 0}
  .cta .btn{white-space:normal;word-break:break-all}
  .footer__in{flex-direction:column;align-items:flex-start}
}
@media (max-width:360px){.brand span{display:none}}

/* touch: no hover lifts */
@media (hover:none){
  .card:hover,.btn:hover{transform:none}
  .card::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .mo [data-reveal],.js .hero [data-in],.js .hero h1 .ln>span{opacity:1;transform:none}
  .card__wave path{stroke-dashoffset:0}
  .marquee__track{flex-wrap:wrap;width:auto}
  .marquee ul[aria-hidden]{display:none}
  .marquee ul{flex-wrap:wrap;justify-content:center;row-gap:10px}
  .marquee{-webkit-mask:none;mask:none}
}

/* hover lift (beats the reveal transform reset) */
.card:hover,.js .card.in:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(50,30,120,.45);transition-delay:0s}
.card--tool:hover,.js .card--tool.in:hover{box-shadow:0 22px 44px -22px rgba(15,8,60,.6)}
.btn[data-magnetic]{transition:transform .3s var(--ease),box-shadow .25s}
@media (hover:none){.card:hover,.js .card.in:hover{transform:none}}

/* =====================================================================
   Multi-page components (tools/build.py)
   ===================================================================== */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}
.btn--sm{padding:11px 18px;font-size:.9rem}
.btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3);cursor:default}
.prose .btn--accent,.aside-cta .btn--accent{color:#1d1840}
.narrow{max-width:860px}
code{font:500 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--lav-2);padding:.12em .4em;border-radius:6px}

/* page hero (inner pages) */
.hero--page{min-height:0;padding:calc(var(--nav-h) + 56px) 0 88px;align-items:flex-end}
.hero--page h1{font-size:clamp(2.1rem,5.2vw,3.7rem);max-width:900px}
.hero--page .lead{max-width:720px}
.hero__note{margin-top:22px;font-size:.95rem;color:rgba(255,255,255,.82);max-width:640px}
.hero__in--tool{display:grid;grid-template-columns:1fr auto;column-gap:40px}
.hero__in--tool>*:not(.hero__mark){grid-column:1}
.hero__mark{grid-column:2;grid-row:1 / span 6;align-self:center;width:150px;height:150px;border-radius:36px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--indigo);box-shadow:0 30px 60px -30px rgba(10,5,50,.6);animation:float 7s ease-in-out infinite}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.88rem;margin-bottom:26px;color:rgba(255,255,255,.75)}
.crumbs a{text-decoration:none;color:#fff}
.crumbs a:hover{text-decoration:underline}
.crumbs__sep{opacity:.5}
.hero .eyebrow .icon{width:16px;height:16px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0}
.facts div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:10px 14px;backdrop-filter:blur(4px)}
.facts dt{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.facts dd{margin:2px 0 0;font:600 .95rem var(--head)}
.facts a{color:#fff}

/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;font:600 .72rem/1 var(--head);letter-spacing:.04em;padding:6px 10px;border-radius:999px;white-space:nowrap;text-transform:none}
.pill::before{content:"";width:7px;height:7px;border-radius:50%}
.pill--live{background:#e3f7ec;color:#0f7a45}.pill--live::before{background:#18b868;box-shadow:0 0 0 3px rgba(24,184,104,.2);animation:pulse 2s ease-in-out infinite}
.pill--soon{background:#fff3df;color:#a35a00}.pill--soon::before{background:var(--amber)}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(24,184,104,0)}}

/* logos (monochrome SVG via mask, brand color) */
.logo{display:inline-block;width:22px;height:22px;flex:none;background:var(--c,var(--ink));-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.logo--sm{width:18px;height:18px}
.logo--btn{width:16px;height:16px}
.logo--xl{width:76px;height:76px}
.logo--txt{-webkit-mask:none;mask:none;background:var(--grad);color:#fff;border-radius:6px;font:700 .75rem/22px var(--head);text-align:center}
.marquee li::before{display:none}
.logo-note{max-width:640px;margin:20px auto 0;padding:0 16px;text-align:center;font-size:.82rem;line-height:1.5;color:var(--ink-2)}
.marquee__label{text-align:center;margin:56px 0 -20px;font:600 .8rem var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.marquee--rev{padding-top:14px}
.marquee--rev .marquee__track{animation-direction:reverse;animation-duration:48s}
.logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.logos li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;font:600 .92rem var(--head);transition:transform .3s var(--ease),box-shadow .3s}
.logos li:hover{transform:translateY(-3px);box-shadow:0 14px 30px -20px rgba(50,30,120,.45)}
.logos--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.prose .logos{margin:1.4em 0}

/* icons */
.icon{width:24px;height:24px;flex:none}
.icon--xs{width:15px;height:15px}
.icon--sm{width:18px;height:18px}
.icon--xl{width:70px;height:70px;color:var(--indigo)}

/* tool cards */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tcard{display:flex;gap:14px;align-items:flex-start;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.tcard::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);transform:scaleY(0);transform-origin:50% 0;transition:transform .35s var(--ease)}
.tcard:hover,.js .tcard.in:hover{transform:translateY(-3px);border-color:#c5b9ec;box-shadow:0 18px 36px -24px rgba(50,30,120,.5);transition-delay:0s}
.tcard:hover::after{transform:scaleY(1)}
.tcard h3{font-size:1.02rem;margin:8px 0 4px}
.tcard p{font-size:.9rem;color:var(--ink-2);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tcard__body{min-width:0;flex:1}
.tcard__top{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.tcard__cat{font:600 .72rem var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--indigo)}
.tmark{width:44px;height:44px;border-radius:12px;background:var(--lav);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .4s var(--ease)}
.tcard:hover .tmark{transform:rotate(-6deg) scale(1.06)}
.tmark--cat{background:var(--grad);color:#fff}
.tmark--img{background:none;overflow:hidden;box-shadow:0 6px 14px -8px rgba(15,8,60,.45)}
.tmark--img img{width:100%;height:100%;object-fit:cover;display:block}
.hero__mark--img{overflow:hidden;background:none}
.hero__mark--img img{width:100%;height:100%;object-fit:cover;display:block}
.tmark--svc{background:#fff;box-shadow:inset 0 0 0 1px rgba(29,24,64,.08)}
.tmark--multi{background:#fff;box-shadow:inset 0 0 0 1px rgba(29,24,64,.08)}
.tmulti{display:grid;gap:3px;place-items:center;width:100%;height:100%;padding:5px}
.tmulti--2{grid-template-columns:1fr 1fr}
.tmulti--3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.tmulti--3 .tmulti__i:first-child{grid-column:1 / span 2}
.tmulti__i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;border-radius:5px;overflow:hidden}
.tmulti__i img{width:100%;height:100%;object-fit:contain;display:block}
.tmulti__i .logo{width:80%;height:80%}
.hero__mark--multi .tmulti{padding:12%;gap:6%}
.hero__mark--multi .tmulti__i{border-radius:18%}
.tinl{display:inline-flex;gap:2px;vertical-align:-.2em;margin-right:.4em}
.tinl__i{display:inline-flex;width:1.05em;height:1.05em;border-radius:.25em;overflow:hidden}
.tinl__i img{width:100%;height:100%;object-fit:contain}
.tinl__i .logo{width:100%;height:100%}
.tmark--svc img{display:block;object-fit:contain;max-width:70%;max-height:70%}
.hero__mark--svc img{display:block;object-fit:contain;max-width:64%;max-height:64%}
.tico{display:inline-block;width:1.15em;height:1.15em;border-radius:.3em;background:center/cover no-repeat;vertical-align:-.2em;margin-right:.4em}
.tico--logo{border-radius:0;background:var(--c,var(--ink))}
.tico--svc{border-radius:.25em;background-size:contain;background-color:#fff}
.card__top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.card__top .tag{margin-bottom:0}
.card--tool .tmark{background:#fff}

.tmark--cat .icon{width:22px;height:22px}
.block--color .tcard{color:var(--ink)}
.tgrid--catalog .tcard[hidden]{display:none}

/* catalog filter */
.block--catalog{padding-top:56px}
.filter{position:sticky;top:64px;z-index:5;background:rgba(243,240,251,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:20px;padding:16px;margin-bottom:26px;box-shadow:0 12px 30px -26px rgba(50,30,120,.6)}
.filter__row{display:flex;gap:12px;flex-wrap:wrap}
.search{flex:1 1 300px;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:0 18px;transition:border-color .2s,box-shadow .2s}
.search:focus-within{border-color:var(--indigo);box-shadow:0 0 0 4px rgba(81,68,178,.14)}
.search svg{width:18px;height:18px;fill:none;stroke:var(--ink-2);stroke-width:2;flex:none}
.search input{border:0;outline:0;background:none;font:500 1rem var(--body);color:var(--ink);padding:13px 0;width:100%;min-width:0}
.seg{display:flex;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:3px}
.seg button,.chip{font:600 .86rem/1 var(--head);border:0;background:none;color:var(--ink-2);padding:10px 14px;min-height:44px;border-radius:999px;cursor:pointer;transition:background-color .2s,color .2s}
.seg button.is-on{background:var(--ink);color:#fff}
.chips{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);white-space:nowrap;text-decoration:none}
.chip span{font-size:.72rem;background:var(--lav-2);color:var(--indigo);padding:3px 7px;border-radius:999px}
.chip:hover{border-color:var(--indigo);color:var(--ink)}
.chip.is-on{background:var(--grad);color:#fff;border-color:transparent}
.chip.is-on span{background:rgba(255,255,255,.22);color:#fff}
.chips--links{flex-wrap:wrap;overflow:visible}
.chips--links .chip{white-space:normal;max-width:100%;line-height:1.25}
.filter__count{margin:10px 2px 0;font-size:.86rem;color:var(--ink-2)}
.empty{text-align:center;padding:40px;font-size:1.05rem}

/* category cards */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ccard{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.ccard::before{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:var(--grad);opacity:.08;transition:transform .6s var(--ease),opacity .4s}
.ccard:hover,.js .ccard.in:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(50,30,120,.5);transition-delay:0s}
.ccard:hover::before{transform:scale(2.4);opacity:.12}
.ccard__icon{width:44px;height:44px;padding:10px;border-radius:12px;background:var(--grad);color:#fff;margin-bottom:16px;transition:transform .5s var(--ease)}
.ccard:hover .ccard__icon{transform:rotate(-8deg) scale(1.08)}
.ccard__icon--logo{display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:inset 0 0 0 1px var(--line,#e6e3f5)}
.ccard__icon--logo .logo{width:24px;height:24px}
.ccard h3{font-size:1.05rem;margin-bottom:6px}
.ccard p{font-size:.88rem;color:var(--ink-2);margin:0 0 14px;flex:1}
.ccard__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 .82rem var(--head);color:var(--indigo)}
.ccard__logos{display:flex;gap:6px}

/* docs layout */
.block--doc{padding:72px 0 96px}
.doc{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start}
.doc--single{grid-template-columns:minmax(0,860px);justify-content:center}
.doc__aside{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}
.toc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 12px;max-height:calc(100vh - 340px);overflow:auto}
.toc__h{font:700 .78rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:block;text-decoration:none;font-size:.9rem;padding:6px 10px;margin:0 -10px;border-radius:8px;color:var(--ink-2);border-left:2px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
.toc a:hover{background:var(--lav);color:var(--ink)}
.toc a.is-on{color:var(--indigo);background:var(--lav);border-left-color:var(--orange);font-weight:600}
.aside-cta{background:var(--grad);color:#fff;border-radius:18px;padding:22px;position:relative;overflow:hidden}
.aside-cta::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:var(--warm);opacity:.35;filter:blur(10px)}
.aside-cta>*{position:relative;z-index:1}
.aside-cta__h{font:700 1.05rem var(--head);margin-bottom:6px}
.aside-cta p{font-size:.9rem;color:rgba(255,255,255,.88)}
.aside-cta .link{display:inline-block;margin-top:14px;color:#fff;border-color:var(--yellow);font-size:.9rem}

/* prose */
.prose{font-size:1.04rem;min-width:0}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:clamp(1.5rem,3vw,2rem);margin:2.2em 0 .6em;scroll-margin-top:90px}
.prose h3{margin:1.6em 0 .5em;scroll-margin-top:90px}
.prose a:not(.btn):not(.tcard):not(.chip){color:var(--indigo);text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:not(.btn):not(.tcard):not(.chip):hover{color:#b33c00}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--indigo);font-weight:700}
.prose blockquote{margin:1.5em 0;padding:16px 22px;border-left:4px solid var(--amber);background:#fff;border-radius:0 14px 14px 0}
.prose blockquote p{margin:0}
.prose .tgrid{grid-template-columns:repeat(2,1fr);margin:1.4em 0}
.prose .faq{margin:1em 0 2em}
.updated{margin-top:48px;font-size:.88rem;color:var(--ink-2)}
.callout{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;padding:14px 18px}
.banner{margin:1.5em 0;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 50px -36px rgba(50,30,120,.6)}
.banner img{width:100%;height:auto}

/* md blocks */
.md-note,.md-tip,.md-warn{position:relative;border-radius:16px;padding:18px 20px 18px 56px;margin:1.6em 0;background:#fff;border:1px solid var(--line)}
.md-note::before,.md-tip::before,.md-warn::before{position:absolute;left:18px;top:17px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 .85rem var(--head);color:#fff}
.md-note::before{content:"i";background:var(--blue)}
.md-tip{background:#f1fbf5;border-color:#bfe8cf}.md-tip::before{content:"✓";background:#18b868}
.md-warn{background:#fff7ea;border-color:#ffd9a3}.md-warn::before{content:"!";background:var(--orange)}
.md-note>*:last-child,.md-tip>*:last-child,.md-warn>*:last-child{margin-bottom:0}
.md-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:1.6em 0}
.md-cards .card{padding:22px}
.md-cards .card h3{margin-top:0;font-size:1.05rem}
.md-cards .card p,.md-cards .card li{font-size:.95rem;color:var(--ink-2)}
.md-cards .card>*:last-child{margin-bottom:0}
.md-steps{margin:1.6em 0}
.md-steps ol{list-style:none;padding:0;counter-reset:st}
.md-steps li{counter-increment:st;position:relative;padding:4px 0 18px 58px;margin:0}
.md-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;font:700 1rem/40px var(--head);text-align:center}
.md-steps li:not(:last-child)::after{content:"";position:absolute;left:19px;top:46px;bottom:4px;width:2px;background:linear-gradient(var(--line),transparent)}
.md-cta{background:var(--grad);color:#fff;border-radius:20px;padding:28px;margin:2em 0;position:relative;overflow:hidden}
.md-cta::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:var(--warm);opacity:.3;filter:blur(18px)}
.md-cta>*{position:relative;z-index:1}
.md-cta h2,.md-cta h3{margin-top:0;color:#fff}
.md-cta a:not(.btn){color:#fff!important;font-weight:600;display:inline-block;margin:4px 0}
.md-cta p:last-child{margin-bottom:0}
.md-cta ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:6px 22px}
.md-cta li{margin:0;padding:0;font-weight:600}
.md-cta li::before{content:"\2713";margin-right:7px}
.cws-badge{display:inline-block;line-height:0;border-radius:8px;margin:0 0 14px;transition:transform .15s,box-shadow .15s}
.cws-badge img{display:block;width:206px;height:auto}
.cws-badge:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.md-cta .cws-badge+p{font-size:.92rem;opacity:.9}
.store-badges{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:0 0 16px}
.store-badge{display:inline-block;line-height:0}
.store-badge img{display:block;height:58px;width:auto}
.store-badge:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:6px}
.md-cta .store-badges+p{font-size:.92rem;opacity:.9}

/* tables */
.table{overflow-x:auto;margin:1.4em 0;border:1px solid var(--line);border-radius:14px;background:#fff;-webkit-overflow-scrolling:touch}
.table table{border-collapse:collapse;width:100%;font-size:.92rem}
.table th{text-align:left;font:700 .78rem var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--lav);padding:12px 14px;white-space:nowrap}
.table td{padding:11px 14px;border-top:1px solid var(--lav-2);vertical-align:top}
.table tr:hover td{background:#faf8ff}
.req{display:inline-block;font:600 .68rem var(--head);color:var(--orange);background:#fff1e9;border-radius:6px;padding:2px 6px;margin-left:4px}
details.more{margin:-.6em 0 1.4em}
details.more summary{cursor:pointer;font:600 .92rem var(--head);color:var(--indigo);padding:8px 0}

/* tool page sections */
.tsec{padding-top:8px;scroll-margin-top:84px}
.tsec+.tsec{margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}
.tsec>h2{margin-top:0}
.mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mini{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.mini h3{font-size:1rem;margin:0 0 6px}
.mini p{font-size:.92rem;color:var(--ink-2);margin:0}
.checks{list-style:none;padding:0!important}
.checks li{position:relative;padding-left:32px}
.checks li::before{content:"";position:absolute;left:0;top:.3em;width:20px;height:20px;border-radius:50%;background:var(--grad) ;-webkit-mask:radial-gradient(circle,#000 99%,transparent);}
.checks li::after{content:"";position:absolute;left:7px;top:calc(.3em + 5px);width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.block--color .checks li::before{background:var(--warm)}
.tips{list-style:none;padding:0!important;display:grid;gap:10px}
.tips li{background:#fff7ea;border:1px solid #ffe2b5;border-radius:14px;padding:14px 16px 14px 48px;position:relative;margin:0}
.tips li::before{content:"★";position:absolute;left:16px;top:13px;color:var(--amber)}
.steps{list-style:none;padding:0!important;counter-reset:st;display:grid;gap:10px}
.steps li{counter-increment:st;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px 14px 60px;position:relative;margin:0}
.steps li::before{content:counter(st);position:absolute;left:14px;top:11px;width:32px;height:32px;border-radius:10px;background:var(--grad);color:#fff;font:700 .9rem/32px var(--head);text-align:center}
.cl{list-style:none;padding:0!important;border-left:2px solid var(--line);margin-left:6px!important}
.cl>li{position:relative;padding:0 0 18px 22px}
.cl>li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--indigo)}
.cl__t{font:700 .98rem var(--head);margin:0 0 4px}
.cl ul{font-size:.93rem;color:var(--ink-2);margin:0}
.price-lead{font-size:1.05rem}

/* code boxes */
.codebox{border-radius:16px;overflow:hidden;max-width:100%;min-width:0;background:#17123a;color:#e9e5ff;margin:1.2em 0;box-shadow:0 28px 60px -36px rgba(20,10,70,.8);border:1px solid rgba(255,255,255,.06)}
.codebox__bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 10px 18px;background:rgba(255,255,255,.05);font:600 .78rem var(--head);letter-spacing:.04em;color:rgba(255,255,255,.6)}
.codebox__bar::before{content:"";width:46px;height:10px;margin-right:12px;background:radial-gradient(circle,#ff5f57 4px,transparent 4.5px) 0 0/16px 10px no-repeat,radial-gradient(circle,#febc2e 4px,transparent 4.5px) 16px 0/16px 10px no-repeat,radial-gradient(circle,#28c840 4px,transparent 4.5px) 32px 0/16px 10px no-repeat}
.codebox__bar span{flex:1}
.copy{font:600 .78rem var(--head);background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:8px;padding:7px 12px;min-height:44px;min-width:64px;cursor:pointer;transition:background-color .2s}
.copy:hover{background:rgba(255,255,255,.2)}
.copy.is-done{background:#0e7a43}
.code{margin:0;padding:18px 20px;overflow:auto;max-width:100%;max-height:520px;white-space:pre;-webkit-overflow-scrolling:touch;font:500 .84rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2}
.prose .code{background:#17123a;color:#e9e5ff;border-radius:14px}
.code code{background:none;padding:0;font:inherit;color:inherit}
.code .ln-row{display:block}
.js .code[data-lines].is-anim .ln-row{opacity:0;transform:translateX(-8px);animation:lineIn .45s var(--ease) forwards;animation-delay:calc(var(--n) * 28ms)}
@keyframes lineIn{to{opacity:1;transform:none}}
.code .k{color:#9ecbff}.code .s{color:#ffd58a}.code .n{color:#7ee2b8}.code .b{color:#ff9fd0}
.codebox--dark{margin:0}

/* home extras */
.hsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:hs;position:relative}
.hsteps::before{content:"";position:absolute;left:8%;right:8%;top:32px;height:2px;background:linear-gradient(90deg,var(--blue),var(--violet),var(--orange));opacity:.35}
.hsteps li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.hsteps__n{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:-60px 0 18px;border-radius:50%;background:var(--grad);color:#fff;font:800 1.4rem var(--head);box-shadow:0 0 0 8px var(--lav)}
.hsteps li{margin-top:32px}
.hsteps p{color:var(--ink-2);margin:0}
.price-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 30px 60px -40px rgba(50,30,120,.6)}
.price-card__h{font:700 .78rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.price-card__row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px dashed var(--line)}
.price-card__row b{font-family:var(--head);color:var(--indigo)}
.price-card .muted{margin:14px 0 18px}
.price-card .btn{color:#fff}
.usegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.use{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;gap:14px}
.use__n{font:800 1.4rem/1 var(--head);background:var(--warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.use p{margin:0;color:var(--ink-2)}
.split--top{align-items:start}
.cta__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}

/* FAQ */
.faq{display:grid;gap:10px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.faq__item[open]{border-color:#c5b9ec;box-shadow:0 18px 40px -30px rgba(50,30,120,.55)}
.faq__item summary{list-style:none;cursor:pointer;padding:18px 56px 18px 22px;font:600 1.02rem/1.4 var(--head);position:relative}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--lav-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235144b2' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .35s var(--ease),background-color .3s}
.faq__item[open] summary::after{transform:rotate(135deg);background-color:#ffe5d6}
.faq__a{padding:0 22px 18px;color:var(--ink-2)}
.faq__a>*:last-child{margin-bottom:0}
.faq__item.is-opening .faq__a{animation:faqIn .4s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}

/* footer (mega) */
.footer{padding:72px 0 28px}
.footer__top{display:grid;grid-template-columns:1.4fr 1.6fr 1fr 1fr 1fr;gap:36px}
.footer__about p{margin:14px 0 0;font-size:.9rem;max-width:300px}
.footer__social{display:flex;flex-wrap:wrap;gap:8px 14px}
.footer__social a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);display:inline-flex;align-items:center;gap:6px}
.footer__social .logo--sm{width:15px;height:15px}
.footer__h{font:700 .78rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:0 0 8px;font-size:.9rem}
.footer li a{text-decoration:none;transition:color .2s}
.footer li a:hover{color:#fff}
.footer__cats{columns:2;column-gap:20px}
.footer__bottom{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;color:rgba(255,255,255,.55)}
.footer__bottom p{margin:0 0 6px}
.footer__bottom a{color:rgba(255,255,255,.8)}

/* nav current page on inner pages */
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}

@media (max-width:1023px){
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .catgrid{grid-template-columns:repeat(2,1fr)}
  .doc{grid-template-columns:minmax(0,1fr);gap:32px}
  .doc__aside{position:static;order:-1}
  .doc__aside .toc{max-height:none}
  .prose--tool+.doc__aside,.doc>.doc__aside{order:2}
  .footer__top{grid-template-columns:1fr 1fr 1fr}
  .footer__about{grid-column:1 / -1}
  .mini-cards,.usegrid{grid-template-columns:repeat(2,1fr)}
  .hero__mark{width:110px;height:110px;border-radius:28px}
  .logo--xl{width:56px;height:56px}
  .nav__links{gap:16px}
  .nav__links a:not(.btn){font-size:.95rem}
}
@media (max-width:720px){
  .tgrid,.catgrid,.prose .tgrid,.md-cards,.mini-cards,.usegrid,.hsteps{grid-template-columns:1fr}
  .hsteps::before{display:none}
  .hero--page{padding:calc(var(--nav-h) + 28px) 0 64px}
  .hero__in--tool{grid-template-columns:1fr}
  .hero__mark{grid-column:1;grid-row:auto;width:72px;height:72px;border-radius:20px;margin-bottom:18px;order:-1}
  .hero__in--tool .crumbs{order:-2}
  .logo--xl{width:40px;height:40px}
  .icon--xl{width:38px;height:38px}
  .facts div{flex:1 1 calc(50% - 10px)}
  .filter{top:56px;padding:12px;border-radius:16px}
  .seg{width:100%}.seg button{flex:1}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__cats{columns:1}
  .block--doc{padding:48px 0 72px}
  .doc__aside .aside-cta{display:none}
  .faq__item summary{padding:16px 50px 16px 18px;font-size:.98rem}
  .table table{font-size:.86rem}
  .code{font-size:.78rem}
  .crumbs{font-size:.8rem;margin-bottom:18px}
  .tcard{padding:16px}
  .md-note,.md-tip,.md-warn{padding-left:50px}
}
@media (hover:none){.tcard:hover,.ccard:hover,.logos li:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.hero__mark{animation:none}.js .code[data-lines].is-anim .ln-row{opacity:1;transform:none}}

/* Voxlo client block: black mark assembles from its voxel faces, then floats */
.work__visual--voxlo{background:#f7f5f1;animation:none;flex-direction:column;border:1px solid rgba(17,17,17,.08)}
.work__visual--voxlo::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(17,17,17,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.05) 1px,transparent 1px);background-size:28px 28px;-webkit-mask:radial-gradient(circle at 50% 45%,#000 30%,transparent 75%);mask:radial-gradient(circle at 50% 45%,#000 30%,transparent 75%)}
.vx-stage{position:relative;width:min(42%,210px)}
.work__visual .vx{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:797/885;overflow:visible;animation:vxFloat 6s ease-in-out 1.6s infinite}
.vx-shadow{position:absolute;left:18%;right:18%;bottom:-14%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(17,17,17,.22),transparent);animation:vxShadow 6s ease-in-out 1.6s infinite}
.work__visual .vx-cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;font:600 .78rem/1 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:#6b665e;animation:none}
.vx-p{transition:transform .8s cubic-bezier(.25,1.35,.45,1),opacity .35s linear;transition-delay:var(--t,0ms)}
.mo [data-reveal]:not(.in) .vx-p{transform:translate(var(--dx),var(--dy));opacity:0;transition:none}
.work__visual--voxlo:hover .vx-p:nth-child(odd){transform:translateY(-6px);transition-delay:0ms;transition-duration:.35s}
.work__visual--inline{aspect-ratio:16/7;margin:8px 0 24px}
.work__visual--inline .vx-stage{width:min(28%,150px)}
@keyframes vxFloat{50%{transform:translateY(-10px)}}
@keyframes vxShadow{50%{transform:scaleX(.82);opacity:.7}}
@media (prefers-reduced-motion:reduce){.work__visual .vx,.vx-shadow{animation:none}.mo [data-reveal]:not(.in) .vx-p{transform:none;opacity:1}}

/* =====================================================================
   v2 "marketing automation" components (solutions, home)
   ===================================================================== */
/* hero facts (inner pages) */
.hero__facts{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero__facts li{font:600 .82rem/1 var(--head);padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);color:#fff}

/* home hero: copy + example run */
.hero__in--home{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.hero--home h1{font-size:clamp(2.4rem,6vw,4.4rem)}
.feed{position:relative;background:rgba(255,255,255,.96);color:var(--ink);border-radius:22px;padding:6px;box-shadow:0 40px 80px -40px rgba(10,5,50,.75),0 0 0 1px rgba(255,255,255,.4);transform:rotate(1.2deg)}
.feed::before{content:"";position:absolute;inset:-14px -14px auto auto;width:90px;height:90px;border-radius:50%;background:var(--warm);filter:blur(28px);opacity:.55;z-index:-1}
.feed__bar{display:flex;align-items:center;gap:10px;padding:12px 14px;font:600 .8rem var(--head);color:var(--ink-2)}
.feed__bar span:nth-child(2){flex:1}
.feed__dot{width:9px;height:9px;border-radius:50%;background:#18b868;box-shadow:0 0 0 0 rgba(24,184,104,.5);animation:pulse 2s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(24,184,104,0)}100%{box-shadow:0 0 0 0 rgba(24,184,104,0)}}
.feed__live{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;background:var(--lav-2);color:var(--indigo);padding:4px 8px;border-radius:999px}
.feed ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.feed li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--lav)}
.feed__ico{flex:none;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center}
.feed li:nth-child(3n+2) .feed__ico{background:var(--warm)}
.feed__ico .icon{width:18px;height:18px}
.feed__txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.feed__txt b{font:700 .82rem var(--head)}
.feed__txt span{font-size:.84rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed__foot{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 10px;font:600 .8rem var(--head);color:var(--indigo)}
.feed__to{display:flex;gap:8px}
.feed__to .logo{--c:var(--indigo)}
.js .feed li{opacity:0;transform:translateY(10px) scale(.98)}
.js.ready .feed li{animation:feedIn .5s var(--ease) forwards;animation-delay:calc(.7s + var(--r) * .28s)}
@keyframes feedIn{to{opacity:1;transform:none}}

/* solution cards */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.scard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.scard::before{content:"";position:absolute;right:-50px;top:-50px;width:140px;height:140px;border-radius:50%;background:var(--grad);opacity:.07;transition:transform .6s var(--ease),opacity .4s}
.scard:hover,.js .scard.in:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(50,30,120,.5);border-color:#c5b9ec;transition-delay:0s}
.scard:hover::before{transform:scale(2.6);opacity:.11}
.scard>*{position:relative}
.scard__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.scard__icon{width:48px;height:48px;padding:11px;border-radius:14px;background:var(--grad);color:#fff;transition:transform .5s var(--ease)}
.scard:nth-child(3n+2) .scard__icon{background:var(--warm)}
.scard:hover .scard__icon{transform:rotate(-8deg) scale(1.08)}
.scard__logos{display:flex;gap:7px;opacity:.75}
.scard h3{font-size:1.12rem;margin-bottom:6px}
.scard p{font-size:.92rem;color:var(--ink-2);margin:0 0 16px;flex:1}
.scard__meta{font:600 .84rem var(--head);color:var(--indigo);display:flex;align-items:center;gap:6px}
.scard__meta .arr{transition:transform .25s var(--ease)}
.scard:hover .scard__meta .arr{transform:translateX(4px)}
.block--tint .scard{border-color:transparent}
.custom-strip{display:flex;align-items:center;gap:16px;margin-top:18px;padding:18px 22px;border-radius:var(--r);border:1.5px dashed #b9abea;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.5);transition:background-color .25s,border-color .25s}
.custom-strip:hover{background:#fff;border-color:var(--indigo)}
.custom-strip>span:nth-child(2){flex:1}
.custom-strip__ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--lav-2);color:var(--indigo);display:flex;align-items:center;justify-content:center}
.custom-strip__ico .icon{width:20px;height:20px}
.custom-strip .arr{font-weight:700;color:var(--indigo);transition:transform .25s var(--ease)}
.custom-strip:hover .arr{transform:translateX(4px)}
.card__sol{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font:600 .78rem var(--head);color:var(--yellow)}

/* pipeline (always on a colour block) */
.pipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:1}
.pipe::before{content:"";position:absolute;left:12%;right:12%;top:38px;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 8px,transparent 8px 16px);background-size:32px 2px;animation:dash 1.2s linear infinite}
@keyframes dash{to{background-position:32px 0}}
.pipe__step{position:relative;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:var(--r);padding:24px;backdrop-filter:blur(2px)}
.pipe__ico{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:-4px 0 18px;border-radius:16px;background:#fff;color:var(--indigo);box-shadow:0 16px 30px -16px rgba(10,5,50,.7)}
.pipe__step:last-child .pipe__ico{background:var(--warm);color:#fff}
.pipe__ico .icon{width:26px;height:26px}
.pipe__ico .logo{width:26px;height:26px}
.pipe__ico--multi{display:grid;grid-template-columns:repeat(2,18px);gap:4px;place-content:center}
.pipe__ico--multi .logo{width:18px;height:18px}
.pipe__step:last-child .pipe__ico .logo{--c:#fff!important}
.pipe__n{position:absolute;right:20px;top:20px;font:800 .9rem var(--head);color:rgba(255,255,255,.5)}
.pipe h3{color:#fff;margin-bottom:6px;font-size:1.06rem}
.pipe p{margin:0;font-size:.92rem;color:rgba(255,255,255,.85)}

/* by hand vs automated */
.compare{display:grid;grid-template-columns:1fr 1fr;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 30px 60px -44px rgba(50,30,120,.6)}
.compare__col{padding:24px}
.compare__col--before{background:var(--lav)}
.compare__col--after{background:#fff;position:relative}
.compare__col--after::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--warm)}
.compare__h{font:700 .78rem var(--head);letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px;color:var(--ink-2)}
.compare__col--after .compare__h{color:var(--orange)}
.compare ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.compare li{position:relative;padding-left:26px;font-size:.94rem;line-height:1.45}
.compare__col--before li{color:var(--ink-2)}
.compare__col--before li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:2px;background:#b3a9d6;border-radius:2px}
.compare__col--after li::before{content:"";position:absolute;left:0;top:.2em;width:17px;height:17px;border-radius:50%;background:var(--grad)}
.compare__col--after li::after{content:"";position:absolute;left:6px;top:calc(.2em + 4px);width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* example result row */
.sheet{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -44px rgba(50,30,120,.6)}
.sheet__bar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--lav);border-bottom:1px solid var(--line);font:600 .78rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2)}
.sheet__dots{display:flex;gap:5px}.sheet__dots i{width:9px;height:9px;border-radius:50%;background:#d5cdee}
.sheet table{width:100%;border-collapse:collapse;font-size:.9rem}
.sheet th{width:38%;text-align:left;font:600 .8rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--indigo);padding:10px 16px;background:#faf8ff;border-right:1px solid var(--lav-2);vertical-align:top}
.sheet td{padding:10px 16px;word-break:break-word}
.sheet tr+tr th,.sheet tr+tr td{border-top:1px solid var(--lav-2)}
.sheet__note{margin:10px 0 28px;font-size:.84rem}
.split__side .eyebrow{margin-top:4px}
.logos--dest{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.logos--dest li{padding:10px 14px;font-size:.86rem}
.split--flow{grid-template-columns:1fr 1fr;align-items:start}

/* example workflow timeline */
.wsteps{list-style:none;margin:8px 0 0;padding:0;counter-reset:ws;position:relative}
.wsteps::before{content:"";position:absolute;left:19px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--blue),var(--violet),var(--orange));opacity:.4}
.wsteps li{counter-increment:ws;position:relative;padding:0 0 22px 60px}
.wsteps li:last-child{padding-bottom:0}
.wsteps li::before{content:counter(ws);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;font:800 .95rem/40px var(--head);text-align:center;box-shadow:0 0 0 6px var(--lav)}
.wsteps h3{font-size:1.02rem;margin:6px 0 4px}
.wsteps p{margin:0;color:var(--ink-2);font-size:.94rem}

/* teams */
.teams{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.team{background:#fff;border-radius:var(--r);padding:24px;border:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.team:hover{border-color:var(--line);box-shadow:0 22px 40px -30px rgba(50,30,120,.5)}
.team h3{font-size:1.06rem;margin-bottom:6px}
.team p{color:var(--ink-2);font-size:.92rem;margin:0 0 14px}
.team ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.team a{display:inline-flex;align-items:center;gap:6px;font:600 .82rem/1 var(--head);text-decoration:none;color:var(--indigo);background:var(--lav);padding:9px 12px;border-radius:999px;transition:background-color .2s,color .2s}
.team a:hover{background:var(--grad);color:#fff}

/* before / after rows (home) */
.bva{display:grid;gap:10px}
.bva__head,.bva__row{display:grid;grid-template-columns:200px 1fr 36px 1fr;gap:18px;align-items:center}
.bva__head{padding:0 22px 8px;font:700 .74rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.bva__head span:last-child{color:var(--orange)}
.bva__row{background:#fff;border-radius:16px;padding:18px 22px;text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
.bva__row:hover,.js .bva__row.in:hover{transform:translateX(4px);box-shadow:0 18px 36px -26px rgba(50,30,120,.55);transition-delay:0s}
.bva__task{display:flex;align-items:center;gap:10px;font:700 .95rem var(--head)}
.bva__task .icon{flex:none;width:30px;height:30px;padding:6px;border-radius:9px;background:var(--grad);color:#fff}
.bva__before{color:var(--ink-2);font-size:.92rem;text-decoration:line-through;text-decoration-color:rgba(74,69,112,.35)}
.bva__arr{font:800 1.2rem var(--head);color:var(--orange);text-align:center}
.bva__after{font-size:.94rem;font-weight:500}

/* numbers (case) */
.numbers{display:flex;gap:12px;margin:22px 0 24px}
.numbers div{flex:1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.numbers b{display:block;font:800 1.8rem/1.1 var(--head);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.numbers span{font-size:.85rem;color:var(--ink-2)}

/* three ways */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.way{display:flex;flex-direction:column;position:relative;text-decoration:none;color:var(--ink);background:#fff;border-radius:var(--r);padding:28px;transition:transform .35s var(--ease),box-shadow .35s}
.way:hover,.js .way.in:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(50,30,120,.5);transition-delay:0s}
.way__n{position:absolute;right:24px;top:22px;font:800 2.2rem/1 var(--head);color:var(--lav-2)}
.way__ico{width:48px;height:48px;padding:11px;border-radius:14px;background:var(--grad);color:#fff;margin-bottom:18px}
.way:nth-child(2) .way__ico{background:var(--warm)}
.way p{color:var(--ink-2);font-size:.94rem;flex:1}
.way .link{align-self:flex-start;color:var(--indigo)}
.ways__note{text-align:center;margin:24px auto 0;max-width:620px}

/* footer v2 */
.footer__top{grid-template-columns:1.3fr 1fr 1.6fr 1fr 1fr}
.footer__legal a{text-decoration:none}
.footer__legal a:hover{color:#fff}

@media (max-width:1023px){
  .hero__in--home{grid-template-columns:1fr;gap:44px}
  .hero--home .hero__copy{max-width:720px}
  .feed{max-width:520px;transform:none}
  .sgrid,.teams,.ways{grid-template-columns:repeat(2,1fr)}
  .pipe{grid-template-columns:repeat(2,1fr)}
  .pipe::before{display:none}
  .split--flow{grid-template-columns:1fr}
  .bva__head,.bva__row{grid-template-columns:170px 1fr 28px 1fr;gap:14px}
  .footer__top{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:720px){
  .sgrid,.teams,.ways,.pipe{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .compare__col--after::before{left:0;right:0;top:0;bottom:auto;width:auto;height:3px}
  .bva__head{display:none}
  .bva__row{grid-template-columns:1fr;gap:6px;padding:16px 18px}
  .bva__arr{display:none}
  .bva__after::before{content:"→ ";color:var(--orange);font-weight:800}
  .feed li{padding:9px 10px}
  .feed__txt span{white-space:normal}
  .numbers{gap:8px}
  .numbers div{padding:12px}
  .numbers b{font-size:1.5rem}
  .custom-strip{padding:16px;align-items:flex-start}
  .custom-strip .arr{display:none}
  .wsteps li{padding-left:54px}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (hover:none){.scard:hover,.way:hover,.bva__row:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.js .feed li{opacity:1;transform:none}.feed{transform:none}}
.split--task{grid-template-columns:.9fr 1.1fr;gap:56px}
@media (max-width:1023px){.split--task{grid-template-columns:1fr;gap:32px}}

/* catalog: start from a task */
.tasks-strip{display:flex;flex-direction:column;gap:12px;margin:0 0 28px;padding:18px 20px;border-radius:18px;background:var(--lav);border:1px solid var(--line)}
.tasks-strip p{margin:0;font-size:15px}
.tasks-strip .chips{margin:0}
/* pipeline inside light prose pages */
.pipe--light{margin:22px 0 28px}
.pipe--light::before{background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);background-size:32px 2px}
.pipe--light .pipe__step{background:#fff;border-color:var(--line);backdrop-filter:none;box-shadow:0 18px 40px -30px rgba(40,20,120,.35)}
.pipe--light .pipe__ico{background:var(--lav);color:var(--indigo);box-shadow:none}
.pipe--light .pipe__step:last-child .pipe__ico{background:var(--warm);color:#fff}
.pipe--light .pipe__n{color:var(--ink-2)}
.prose .pipe--light h3{color:var(--ink);margin:0 0 6px;font-size:1rem}
.prose .pipe--light p{color:var(--ink-2);font-size:.9rem;margin:0}
.prose .pipe--light li{margin:0}
.prose .pipe--light{grid-template-columns:repeat(2,1fr)}
.prose .pipe--light::before{display:none}
@media (max-width:560px){.prose .pipe--light{grid-template-columns:1fr}}

/* v3: product lines, extensions */
.catgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ccard__img{width:44px;height:44px;border-radius:12px;margin-bottom:16px}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:1.5em 0}
.shots .banner{margin:0}
.shots .banner a{display:block;cursor:zoom-in}
.shots__note{margin-top:-.6em;font-size:.86rem}
/* scan 2 (04): "coming soon" is a status label, it must not look like a button */
.soon-tag{display:inline-block;max-width:100%;padding:8px 14px;border:1.5px dashed currentColor;border-radius:999px;font-size:.9rem;font-weight:600;opacity:.85;white-space:normal}
@media (max-width:720px){.catgrid--2,.shots{grid-template-columns:1fr}}
/* affiliate note next to Apify CTAs (FTC: disclosure near the link) */
.aff-note{font-size:.82rem;line-height:1.45;color:#fff;margin:14px 0 0;max-width:62ch}
.aff-note a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.aff-note a:hover{color:var(--yellow)}
.hero .aff-note,.cta .aff-note{opacity:.92}
.cta .aff-note{margin:18px auto 0;text-align:center}
.aside-cta .aff-note{background:rgba(20,16,50,.45);border-radius:10px;padding:8px 10px;font-size:.78rem}

/* ---------- nav dropdowns (2026-10-20): CSS only, hover / focus-within; phones list the items ---------- */
.nav__item{position:relative;display:flex;align-items:center}
.nav__caret{display:inline-block;width:6px;height:6px;margin:0 0 3px 7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);opacity:.7;transition:transform .3s var(--ease)}
.nav__sub{position:absolute;top:100%;left:-14px;min-width:230px;margin-top:14px;padding:8px;display:flex;flex-direction:column;background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 0 0 1px var(--line),0 24px 50px -24px rgba(40,20,110,.45);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .25s var(--ease),visibility .2s;z-index:5}
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav__links .nav__sub a{display:block;padding:9px 12px;border-radius:10px;font-weight:500;font-size:.92rem;white-space:nowrap;color:var(--ink)}
.nav__links .nav__sub a::after{display:none}
.nav__links .nav__sub a:hover,.nav__links .nav__sub a:focus-visible,.nav__links .nav__sub a[aria-current]{background:var(--lav-2);color:var(--indigo)}
.nav__sub a:last-child{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;font-weight:600}
@media (hover:hover){.nav__item:hover .nav__sub{opacity:1;visibility:visible;transform:none}.nav__item:hover .nav__caret{transform:translateY(2px) rotate(225deg)}}
.nav__item:focus-within .nav__sub,.nav__item.open .nav__sub{opacity:1;visibility:visible;transform:none}
@media (max-width:720px){
  .nav__links{justify-content:flex-start;overflow-y:auto;gap:18px}
  .nav__item{flex-direction:column;align-items:flex-start;width:100%}
  .nav__links a.nav__top{font-size:1.6rem}
  .nav__caret{display:none}
  .nav__sub{position:static;margin:4px 0 0;padding:0 0 0 2px;min-width:0;background:none;box-shadow:none;opacity:1;visibility:visible;transform:none;color:#fff;flex-direction:row;flex-wrap:wrap;gap:2px 16px}
  .nav__sub::before{display:none}
  .nav__links .nav__sub a{padding:4px 0;font:500 1rem/1.4 var(--body);letter-spacing:0;color:rgba(255,255,255,.85);background:none}
  .nav__links .nav__sub a:hover,.nav__links .nav__sub a[aria-current]{background:none;color:#fff;text-decoration:underline}
  .nav__sub a:last-child{margin-top:0;border-top:0;font-weight:500}
  .nav--open .nav__item:nth-child(2) a{transition-delay:.06s}
  .nav--open .nav__item:nth-child(3) a{transition-delay:.12s}
  .nav--open .nav__item:nth-child(4) a{transition-delay:.18s}
  .no-js .nav__sub{display:none}
}
/* home: three pillars */
.pillar__ico{display:inline-flex;width:48px;height:48px;padding:11px;border-radius:14px;background:var(--grad);color:#fff;margin-bottom:18px}
.pillar__ico .icon{width:26px;height:26px}
.pillar .link{display:inline-block;margin-top:8px}
.block__lead{max-width:760px;margin:-20px 0 36px;font-size:1.08rem;color:var(--ink-2)}
.block__more{margin-top:28px}
.hero--home h1{font-size:clamp(2.2rem,5vw,4rem)}

/* ---------------------------------------------------------------- company pages (Home, About, Partners), 2026-10-20 */
.m-hero{min-height:min(92vh,860px)}
.m-hero--page{min-height:0;padding:calc(var(--nav-h) + 56px) 0 96px}
.m-hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.m-hero__in>.aff-note{grid-column:1/-1}
.m-hero__copy{max-width:640px}
.m-hero--home h1{font-size:clamp(2.6rem,6.4vw,5rem)}
.m-hero--page h1{font-size:clamp(2.1rem,4.8vw,3.6rem)}
.m-hero .lead{max-width:560px}
/* portfolio mosaic */
.m-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.m-tile{display:flex;flex-direction:column;gap:6px;min-height:150px;padding:18px;border-radius:var(--r);text-decoration:none;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:transform .35s var(--ease),background-color .3s,border-color .3s}
a.m-tile:hover{transform:translateY(-4px);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
.m-tile b{font:700 1.02rem/1.2 var(--head)}
.m-tile__kind{font:700 .68rem/1 var(--head);letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-top:auto}
.m-tile__site{font-size:.8rem;opacity:.8;overflow-wrap:anywhere}
.m-tile--voxlo{grid-column:span 2;background:#fff;color:var(--ink);border-color:#fff}
a.m-tile--voxlo:hover{background:#fff}
.m-tile--voxlo .m-prop__vis{background:var(--lav)}
.m-tile--next{border-style:dashed;background:transparent}
.m-tile--social{grid-column:span 2}
/* property visual (logo box) */
.m-prop__vis{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:52px;height:52px;padding:0 12px;border-radius:14px;background:rgba(255,255,255,.16);color:#fff}
.m-prop__vis .icon{width:26px;height:26px}
.m-prop__vis img{width:34px;height:34px}
.m-vx{width:30px;height:34px}
.m-logo{width:24px;height:24px;background:#fff}
/* facts strip under the hero */
.m-facts{background:#fff;border-bottom:1px solid var(--line)}
.m-facts__row{list-style:none;margin:0;padding:28px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.m-facts__row li{display:flex;flex-direction:column;gap:2px;padding-left:16px;border-left:3px solid;border-image:linear-gradient(var(--orange),var(--yellow)) 1}
.m-facts__row b{font:800 1.25rem/1.2 var(--head);letter-spacing:-.01em}
.m-facts__row span{color:var(--ink-2);font-size:.92rem}
/* section heads */
.m-head{max-width:720px;margin-bottom:48px}
.m-head h2{margin-bottom:.35em}
.m-head__lead{color:var(--ink-2);font-size:1.1rem;margin:0}
.block--color .m-head__lead{color:rgba(255,255,255,.88)}
.m-head .link{display:inline-block;margin-top:18px}
.m-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.m-split--top{align-items:start}
.m-split--wide{grid-template-columns:1fr 1fr}
.m-split .m-head{margin-bottom:0}
.m-note{margin:28px 0 0;font-size:.92rem;color:var(--ink-2)}
.m-note--light{color:rgba(255,255,255,.85)}
.m-note--light a{color:#fff}
/* model flow */
.m-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;counter-reset:f}
.m-flow__step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 22px}
.m-flow__dot{display:inline-flex;width:46px;height:46px;border-radius:14px;align-items:center;justify-content:center;background:var(--grad);color:#fff;margin-bottom:14px}
.m-flow__n{position:absolute;top:20px;right:22px;font:800 1.6rem/1 var(--head);color:var(--lav-2)}
.m-flow__step h3{margin-bottom:.3em}
.m-flow__step p{margin:0;color:var(--ink-2);font-size:.96rem}
.m-sec#how .m-flow{grid-template-columns:repeat(4,1fr)}
/* portfolio cards */
.m-props{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.m-prop{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .35s var(--ease),box-shadow .35s}
.m-prop:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(50,30,120,.45)}
.m-prop__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.m-prop .m-prop__vis{background:var(--grad)}
.m-prop--voxlo .m-prop__vis{background:var(--lav)}
.m-prop--site .m-prop__vis{background:var(--lav)}
.m-prop--next{border-style:dashed;background:transparent}
.m-prop--next .m-prop__vis{background:var(--lav-2);color:var(--indigo)}
.m-prop__kind{font:700 .72rem/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);margin:0 0 8px}
.m-prop h3{font-size:1.3rem;margin-bottom:.35em}
.m-prop>p{color:var(--ink-2);margin:0 0 18px}
.m-prop>.link,.m-prop__links{margin-top:auto;align-self:flex-start}
.m-prop__links{display:flex;flex-wrap:wrap;gap:14px}
.m-props .m-prop--voxlo{grid-column:span 2;background:linear-gradient(135deg,#fff 55%,var(--lav) 100%)}
.m-prop--voxlo .m-prop__vis{width:72px;height:72px}
.m-prop--voxlo .m-vx{width:40px;height:46px}
/* pills and chips */
.m-pill{display:inline-flex;align-items:center;gap:6px;font:700 .72rem/1 var(--head);letter-spacing:.06em;text-transform:uppercase;padding:7px 11px;border-radius:999px;white-space:nowrap}
.m-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.m-pill--live{background:#e3f6ea;color:#17803d}
.m-pill--soon{background:#fff3dc;color:#a35a00}
.m-pill--next{background:var(--lav-2);color:var(--indigo)}
.m-chips{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.m-chips li{font-size:.84rem;padding:5px 11px;border-radius:999px;background:var(--lav);color:var(--ink-2);border:1px solid var(--line)}
.m-chips--lg li{font:600 .95rem var(--head);padding:9px 15px;background:#fff;color:var(--ink)}
.m-chips--open li{border-style:dashed;background:transparent}
/* audiences */
.m-verts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.m-vert{display:grid;grid-template-columns:56px 1fr 220px 120px;gap:20px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line);transition:background-color .25s}
.m-vert:hover{background:#fff}
.m-vert__ico{display:inline-flex;width:48px;height:48px;border-radius:14px;align-items:center;justify-content:center;background:var(--grad);color:#fff}
.m-vert--next .m-vert__ico{background:var(--lav-2);color:var(--indigo)}
.m-vert__name{display:flex;flex-direction:column}
.m-vert__name b{font:700 1.15rem/1.3 var(--head)}
.m-vert__name span{color:var(--ink-2);font-size:.95rem}
.m-vert__where{font:600 .92rem var(--head);color:var(--ink-2)}
.m-vert .m-pill{justify-self:end}
/* formats */
.m-formats,.m-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.m-why4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.m-format,.m-principle{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.m-format h3,.m-principle h3{margin-bottom:.3em}
.m-format p,.m-principle p{margin:0;color:var(--ink-2);font-size:.96rem}
.m-format__ico{display:inline-flex;width:46px;height:46px;border-radius:14px;align-items:center;justify-content:center;background:var(--lav-2);color:var(--indigo);margin-bottom:16px}
.block--color .m-principle{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);position:relative;z-index:1}
.block--color .m-principle p{color:rgba(255,255,255,.85)}
.block--color .m-principle .m-format__ico{background:rgba(255,255,255,.16);color:#fff}
/* standards (dark band) */
.m-standards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1}
.m-standards li{border-top:2px solid rgba(255,255,255,.4);padding-top:22px}
.m-standards__n{display:block;font:800 2.6rem/1 var(--head);margin-bottom:14px;background:linear-gradient(90deg,var(--amber),var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.m-standards p{margin:0;color:rgba(255,255,255,.88)}
.block--color .m-head{position:relative;z-index:1}
/* partners teaser */
.m-partner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.m-partner p{color:var(--ink-2)}
.m-ways{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.m-ways a,.m-type{display:grid;grid-template-columns:1fr auto;column-gap:16px;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.m-ways a:hover,.m-type:hover{transform:translateX(4px);border-color:var(--indigo);box-shadow:0 14px 30px -22px rgba(50,30,120,.5)}
.m-ways b{font:700 1.05rem var(--head)}
.m-ways span:not(.arr){grid-column:1;color:var(--ink-2);font-size:.92rem}
.m-ways .arr,.m-type .arr{grid-column:2;grid-row:1/span 2;align-self:center;color:var(--indigo);font-size:1.2rem}
/* hero side cards */
.m-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.m-card h3{margin-bottom:.6em}
.m-card p{color:var(--ink-2)}
.m-card>p:last-child{margin-bottom:0}
.m-card--muted{background:transparent;border-style:dashed}
.m-card__h{font:700 .78rem/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);margin:0 0 16px}
.m-hero .m-card{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.m-hero .m-card__h{color:rgba(255,255,255,.85)}
.m-card--facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.m-card--facts .m-card__h{grid-column:1/-1;margin:0}
.m-card--facts dt{font-size:.8rem;opacity:.75;margin-bottom:4px}
.m-card--facts dd{margin:0;font:700 1.12rem/1.25 var(--head)}
.m-hero .m-list li{color:#fff}
.m-hero .m-list--yes li::before{background:var(--yellow);color:var(--ink)}
.m-hero .m-mail{color:#fff;border-color:var(--yellow)}
.m-mail{display:inline-block;font:700 1.05rem var(--head);text-decoration:none;border-bottom:2px solid var(--amber);margin:4px 0 12px;overflow-wrap:anywhere}
/* lists */
.m-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.m-list li{position:relative;padding-left:34px;color:var(--ink)}
.m-list li::before{position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;font:700 .75rem/22px var(--head);text-align:center}
.m-list--yes li::before{content:"✓";background:#e3f6ea;color:#17803d}
.m-list--no li::before{content:"✕";background:#fde6e1;color:#c2381b}
.m-list--dot li::before{content:"";width:10px;height:10px;top:8px;left:6px;background:var(--grad)}
.m-num{margin:0 0 18px;padding-left:22px;display:grid;gap:10px;color:var(--ink-2)}
.m-num b{color:var(--ink)}
.m-versus{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* about: who / story / facts / channels / contacts */
.m-quote{font:800 clamp(1.7rem,3.4vw,2.6rem)/1.15 var(--head);letter-spacing:-.025em;margin:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-sec#who p:not(.m-quote):not(.eyebrow){font-size:1.08rem;color:var(--ink-2)}
.m-story{list-style:none;margin:0;padding:0;position:relative}
.m-story::before{content:"";position:absolute;left:44px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--blue),var(--violet))}
.m-story__item{display:grid;grid-template-columns:90px 1fr;gap:24px;padding:0 0 30px;position:relative}
.m-story__item:last-child{padding-bottom:0}
.m-story__year{justify-self:center;position:relative;z-index:1;font:800 .95rem/1 var(--head);color:#fff;background:var(--grad);padding:10px 12px;border-radius:999px;height:max-content}
.m-story__item--next .m-story__year{background:#fff;color:var(--indigo);border:2px dashed var(--indigo)}
.m-story h3{margin:4px 0 .3em}
.m-story p{margin:0;color:var(--ink-2)}
.m-why{margin-top:56px;gap:40px}
.m-why p{color:var(--ink-2)}
.m-sheet{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.m-sheet div{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line)}
.m-sheet div:last-child{border-bottom:0}
.m-sheet dt{color:var(--ink-2);font-size:.92rem}
.m-sheet dd{margin:0;font-weight:600}
.m-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.m-chan{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;transition:transform .3s var(--ease),box-shadow .3s}
.m-chan:hover{transform:translateY(-3px);box-shadow:0 14px 30px -20px rgba(50,30,120,.45)}
.m-chan .m-logo,.m-chan__txt{grid-row:1/span 2;width:48px;height:48px;border-radius:12px}
.m-chan .m-logo{-webkit-mask-size:60%;mask-size:60%;background:var(--c,var(--ink))}
.m-chan__txt{display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font:800 1.1rem var(--head)}
.m-chan b{font:700 1.05rem var(--head)}
.m-chan span:not(.m-logo):not(.m-chan__txt){color:var(--ink-2);font-size:.9rem}
.m-contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.m-contacts--2{grid-template-columns:repeat(2,1fr)}
/* partners */
.m-types{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.m-type{grid-template-columns:1fr;row-gap:6px;padding:24px}
.m-type b{font:700 1.1rem var(--head)}
.m-type span:not(.arr):not(.m-format__ico){color:var(--ink-2);font-size:.93rem}
.m-type .arr{grid-column:1;grid-row:auto;align-self:start;margin-top:8px}
.m-type .m-format__ico{margin-bottom:8px}
.m-sub{font-size:1rem;margin:0 0 12px;color:var(--indigo)}
.m-chips--lg+.m-sub{margin-top:28px}
.m-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative;z-index:1}
.m-steps li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:var(--r);padding:22px}
.m-steps__n{display:inline-flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;background:var(--warm);color:var(--ink);font:800 1.05rem var(--head);margin-bottom:14px}
.m-steps h3{font-size:1.05rem;margin-bottom:.3em}
.m-steps p{margin:0;color:rgba(255,255,255,.86);font-size:.93rem}
.m-more{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.m-more .m-card{display:flex;flex-direction:column;scroll-margin-top:calc(var(--nav-h) + 20px)}
.m-more .m-card .link{margin-top:auto;align-self:flex-start}
.m-not{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.m-not li{position:relative;padding:16px 18px 16px 50px;background:#fff;border:1px solid var(--line);border-radius:14px}
.m-not li::before{content:"✕";position:absolute;left:16px;top:16px;width:22px;height:22px;border-radius:50%;background:#fde6e1;color:#c2381b;font:700 .75rem/22px var(--head);text-align:center}

@media (max-width:1023px){
  .m-hero__in,.m-split,.m-split--wide,.m-partner{grid-template-columns:1fr;gap:40px}
  .m-props,.m-formats,.m-principles,.m-more,.m-contacts,.m-channels{grid-template-columns:repeat(2,1fr)}
  .m-why4,.m-types,.m-standards,.m-sec#how .m-flow{grid-template-columns:repeat(2,1fr)}
  .m-steps{grid-template-columns:repeat(3,1fr)}
  .m-facts__row{grid-template-columns:repeat(2,1fr)}
  .m-vert{grid-template-columns:52px 1fr auto}
  .m-vert__where{grid-column:2;grid-row:2;margin-top:-10px}
  .m-vert .m-pill{grid-column:3;grid-row:1}
}
@media (max-width:720px){
  .m-hero{min-height:0}
  .m-mosaic{grid-template-columns:1fr 1fr;gap:10px}
  .m-tile{min-height:120px;padding:14px}
  .m-tile--social{grid-column:span 2}
  .m-props,.m-formats,.m-principles,.m-more,.m-contacts,.m-contacts--2,.m-channels,.m-why4,.m-types,.m-standards,.m-flow,.m-sec#how .m-flow,.m-steps,.m-versus,.m-not{grid-template-columns:1fr}
  .m-props .m-prop--voxlo{grid-column:auto}
  .m-card--facts{grid-template-columns:1fr 1fr}
  .m-facts__row{gap:18px}
  .m-head{margin-bottom:32px}
  .m-vert{grid-template-columns:44px 1fr;gap:4px 14px}
  .m-vert__ico{width:44px;height:44px}
  .m-vert__where{grid-column:2;grid-row:auto;margin:6px 0 0}
  .m-vert .m-pill{grid-column:2;grid-row:auto;justify-self:start;margin-top:8px}
  .m-sheet div{grid-template-columns:1fr;gap:2px}
  .m-story::before{left:30px}
  .m-story__item{grid-template-columns:62px 1fr;gap:14px}
  .m-story__year{font-size:.8rem;padding:8px 9px}
}
.m-props .m-prop--next{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;column-gap:22px;align-items:center;padding:22px 26px}
.m-prop--next .m-prop__top{margin:0;grid-row:1/span 3;flex-direction:column;gap:10px;align-items:center}
.m-prop--next>*:not(.m-prop__top){grid-column:2}
.m-prop--next>.link{grid-column:3;grid-row:1/span 3;align-self:center;margin:0}
.m-prop--next>p{margin:0}
@media (max-width:1023px){.m-props .m-prop--voxlo{grid-column:1/-1}}
@media (max-width:720px){.m-props .m-prop--next{display:flex}.m-prop--next .m-prop__top{flex-direction:row;justify-content:space-between;width:100%;margin-bottom:18px}.m-prop--next>p{margin-bottom:18px}}
.m-mosaic .m-prop__vis{align-self:flex-start;margin-bottom:10px}
.m-mosaic .m-tile--social{grid-column:auto}
.m-mosaic .m-tile--voxlo{grid-column:span 2;grid-row:span 2;padding:26px}
.m-tile--voxlo .m-prop__vis{width:96px;height:96px;border-radius:22px}
.m-tile--voxlo .m-vx{width:54px;height:62px}
.m-tile--voxlo b{font-size:1.5rem}
.m-tile--social .m-prop__vis{gap:6px;padding:0 10px}
.m-tile--social .m-logo{width:18px;height:18px}
@media (max-width:720px){.m-mosaic .m-tile--voxlo{grid-row:auto}.m-mosaic .m-tile--next{grid-column:span 2}.m-tile--voxlo .m-prop__vis{width:64px;height:64px}.m-tile--voxlo .m-vx{width:36px;height:42px}}
.uc-frame{max-width:640px;margin:0 auto 32px;color:var(--ink-2,#555);font-size:15px;line-height:1.6;text-align:center}
.uc-frame a{font-weight:600}
.nots{list-style:none;padding:0!important}
.nots li{position:relative;padding-left:32px}
.nots li::before,.nots li::after{content:"";position:absolute;left:4px;top:calc(.3em + 9px);width:12px;height:2px;border-radius:2px;background:var(--ink-2)}
.nots li::before{transform:rotate(45deg)}.nots li::after{transform:rotate(-45deg)}

/* tool page v2 (docs/13 stage 3) */
.tprice{grid-column:1;margin:18px 0 0;display:flex;flex-direction:column;gap:2px;font-size:.95rem;opacity:.92}
.tprice b{font:700 1.25rem var(--head)}
.tprice span{font-size:.88rem;opacity:.85}
.cta-note{display:block;width:100%;margin-top:8px;font-size:.82rem;opacity:.8}
.tgot{grid-column:1;margin-top:22px;max-width:560px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px}
.tgot__h{margin:0 0 6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.tgot table{width:100%;border-collapse:collapse;font-size:.9rem}
.tgot th{text-align:left;font:600 .82rem ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.75;padding:4px 14px 4px 0;white-space:nowrap;vertical-align:top}
.tgot td{padding:4px 0;overflow-wrap:anywhere}
.tsteps{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:ts}
.tsteps li{counter-increment:ts;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 16px 16px 58px;position:relative;display:flex;flex-direction:column;gap:4px}
.tsteps li::before{content:counter(ts);position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;font:800 1rem/32px var(--head);text-align:center}
.tsteps b{font-family:var(--head)}
.tsteps span{color:var(--ink-2);font-size:.92rem}
.term{text-decoration:underline dotted;text-underline-offset:3px}
.byline{display:flex;gap:12px;align-items:center;background:var(--lav);border-radius:14px;padding:12px 16px;font-size:.92rem}
.byline img{flex:none}
.tsec--plain{margin-top:-8px}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fit__col{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff}
.fit__col h3{margin-top:0}
.fit__col--no{background:transparent}
.folds{display:flex;flex-direction:column;gap:10px}
.fold{border:1px solid var(--line);border-radius:14px;background:#fff}
.fold>summary{cursor:pointer;padding:14px 18px;font:700 1rem var(--head);list-style:none;display:flex;justify-content:space-between;gap:12px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";font-weight:400;font-size:1.3rem;line-height:1}
.fold[open]>summary::after{content:"−"}
.fold__in{padding:0 18px 16px;min-width:0;overflow-x:auto}
.afacts{margin:8px 0 14px;display:grid;gap:6px;font-size:.86rem}
.afacts div{display:flex;justify-content:space-between;gap:10px}
.afacts dt{opacity:.75;white-space:nowrap}
.afacts dd{margin:0;text-align:right}
.afacts a{color:#fff}
@media (max-width:720px){
  .tsteps,.fit{grid-template-columns:1fr}
  .tgot th{white-space:normal}
}
.hero:has(.hero__in--v2){min-height:0;padding-bottom:64px}
.hero__in--v2 h1{font-size:clamp(2rem,4.2vw,3.4rem)}
.hero__in--v2 .hero__cta{margin-top:20px;gap:0 14px}
.hero__in--v2 .aff-note{grid-column:1;margin-top:10px;font-size:.8rem;max-width:560px}
.tsec.tsec--plain,.tsec--plain+.tsec{margin-top:28px;padding-top:0;border-top:0}
.tsec .codebox .code{max-height:420px}
.prose .tsteps{padding:0}
.byline{background:#fff;border:1px solid var(--line)}
@media (max-width:720px){
  .hero__in--v2 .hero__mark{width:72px;height:72px;border-radius:18px;margin-bottom:10px;animation:none}
  .hero__in--v2 .hero__mark>*{max-width:44px;max-height:44px}
  .hero__in--v2 .hero__mark .logo--xl,.hero__in--v2 .hero__mark .icon--xl{width:44px;height:44px}
  .hero:has(.hero__in--v2){padding-top:calc(var(--nav-h) + 16px);padding-bottom:40px}
  .hero__in--v2 .lead{font-size:1.05rem}
}
/* tool page v2, mockup review round 1 */
.ydata{border:1px solid var(--line);border-radius:14px;background:#fff;padding:6px 18px}
.aside-links{font-size:.82rem;margin:10px 0 0;opacity:.9}.aside-links a{color:#fff}
.tsec .codebox .code code{white-space:pre}
.tsec .codebox .code{overflow-x:auto;scrollbar-width:thin}
/* scan 2 (03): a visible scrollbar so cut code lines are clearly scrollable */
.code{scrollbar-width:thin;scrollbar-color:rgba(233,229,255,.45) transparent}
.code::-webkit-scrollbar{height:8px;width:8px}
.code::-webkit-scrollbar-thumb{background:rgba(233,229,255,.4);border-radius:8px}
.code::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
@media (max-width:720px){
  .table--price thead{display:none}
  .table--price tr{display:grid;grid-template-columns:1fr auto;border-top:1px solid var(--lav-2)}
  .table--price td{border-top:0}
  .table--price td:nth-child(3){grid-column:1/-1;padding-top:0;color:var(--ink-2);font-size:.84rem}
}
/* Home: "What are you looking for?" (docs/13 stage 5) */
.m-look{padding-top:40px;padding-bottom:40px}
.m-look__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--lav-2);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:28px}
.m-look__top p{margin:0;max-width:60ch}
.m-look h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 14px}
.m-ways--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* channel tables: service mark before the name (2026-10-20) */
.t-chan{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
/* Home hero: interactive Cliqto mark (owner, 2026-10-20). motion.js sets --rx/--ry (tilt) and --ax/--ay (arrow depth). */
.m-hero--home h1{font-size:clamp(2.2rem,4.3vw,3.6rem)}
.m-orb{--R:min(225px,38vw);--rx:0deg;--ry:0deg;--ax:0px;--ay:0px;position:relative;width:calc(var(--R)*2 + 72px);aspect-ratio:1;margin:0 auto;perspective:900px;display:grid;place-items:center;user-select:none;-webkit-tap-highlight-color:transparent}
.m-orb__ring{position:absolute;inset:36px;border-radius:50%;border:1px dashed rgba(255,255,255,.32)}
.m-orb__ring--2{inset:calc(36px + var(--R)*.3);border:1px solid rgba(255,255,255,.14);background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.m-orb__ring--2::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid transparent;border-top-color:#ff9f0a;animation:orb-spin 7s linear infinite}
.m-orb__sats{position:absolute;inset:0;margin:0;padding:0;list-style:none;animation:orb-spin 70s linear infinite}
.m-orb__sats li{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;transform:rotate(var(--a)) translateY(calc(var(--R) * -1)) rotate(calc(var(--a) * -1))}
.m-orb__sats li>span{display:grid;place-items:center;width:100%;height:100%;border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(20,10,60,.25);animation:orb-spin 70s linear infinite reverse}
.m-orb__sats .m-logo{width:26px;height:26px;background:var(--c,var(--ink))}
.m-orb__vx .m-vx{width:26px;height:30px}
.m-orb__disc{position:relative;display:grid;place-items:center;width:calc(var(--R)*1.12);aspect-ratio:1;border-radius:50%;background:#fff;cursor:pointer;
  box-shadow:0 30px 70px rgba(20,10,60,.35),inset 0 -8px 24px rgba(81,68,178,.12);transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.m-orb.is-live .m-orb__disc{transition:transform .12s linear}
.m-orb__svg{width:64%;height:auto;overflow:visible;filter:drop-shadow(0 6px 10px rgba(81,68,178,.18))}
.m-orb__c{transform:translate(calc(var(--ax) * -.4),calc(var(--ay) * -.4));transition:transform .3s}
.m-orb__arrow{transform-box:fill-box;transform-origin:20% 10%;transform:translate(var(--ax),var(--ay));transition:transform .3s;animation:orb-nudge 3.2s ease-in-out infinite}
.m-orb.is-click .m-orb__arrow{animation:orb-click .45s cubic-bezier(.3,1.6,.5,1)}
.m-orb__ripple{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.m-orb.is-click .m-orb__ripple{animation:orb-ripple .7s ease-out}
@keyframes orb-spin{to{rotate:360deg}}
@keyframes orb-nudge{0%,70%,100%{scale:1}78%{scale:.92}86%{scale:1.03}}
@keyframes orb-click{0%{scale:1}35%{scale:.82}100%{scale:1}}
@keyframes orb-ripple{0%{box-shadow:0 0 0 0 rgba(255,159,10,.55)}100%{box-shadow:0 0 0 46px rgba(255,159,10,0)}}
@media (max-width:1023px){.m-orb{--R:min(170px,34vw);margin-top:24px}}
@media (max-width:720px){.m-orb{--R:min(120px,30vw)}.m-orb__sats li{width:42px;height:42px;margin:-21px}.m-orb__sats li>span{border-radius:12px}.m-orb__sats .m-logo,.m-orb__vx .m-vx{width:20px;height:22px}}
@media (prefers-reduced-motion:reduce){.m-orb__sats,.m-orb__sats li>span,.m-orb__ring--2::after,.m-orb__arrow{animation:none}}