/* ===== zlit.ai brand tokens (brand board) ===== */
:root{
  --ink:#0B0D0E; --ink-2:#111416; --ink-3:#171B1D;
  --cloud:#F7F8F5; --canvas:#E9EAE5; --white:#FFFFFF;
  --lime:#B9FF3F; --lime-hi:#D4FF80; --lime-lo:#8FE22A;
  --slate:#69706D; --mist:#E8E8E7; --blue:#5567FF;
  --text-l:#464C49;
  --on-dark:#F7F8F5; --on-dark-2:rgba(247,248,245,.66); --on-dark-3:rgba(247,248,245,.44);
  --line-d:rgba(247,248,245,.09); --line-d2:rgba(247,248,245,.18);
  --sans:"Geist","Inter",-apple-system,"Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:12px; --r:32px; --nav-h:76px; --pad-x:48px;
  --noise-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-k:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
*{box-sizing:border-box}
html{scroll-padding-top:104px;-webkit-text-size-adjust:100%}   /* smooth scrolling is site.js's, for links within a page only */
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
p{margin:0;text-wrap:pretty}
h1,h2,h3{font-family:var(--sans);margin:0;text-wrap:balance}
h1{font-size:clamp(44px,5.8vw,82px);line-height:1.06;font-weight:600;letter-spacing:-.045em;max-width:15ch}
/* section headings shrink with the window's height as the page headlines do,
   so a headline (.home h1, .phero h1) is always the biggest line on its page */
/* h1.h2: the page heading of FAQ and Support, set exactly like a section heading */
h2,h1.h2{font-size:clamp(30px,min(4.1vw,6.2svh),56px);line-height:1.14;font-weight:600;letter-spacing:-.038em;max-width:18ch}
h3{font-size:20px;line-height:1.32;font-weight:600;letter-spacing:-.018em}
em{font-style:normal}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:10px}
.light :focus-visible{outline-color:var(--ink)}

/* ---------- shared effects ---------- */
/* gradient hairline border */
.gb{position:relative}
.gb::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--gb,linear-gradient(180deg,rgba(247,248,245,.22),rgba(247,248,245,.04)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
/* cursor spotlight */
.sp>*{position:relative;z-index:1}
.sp::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--sp-c,rgba(185,255,63,.16)),transparent 62%)}
.sp:hover::after{opacity:1}

/* scroll reveal (JS only) */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
/* the first screen is already on screen when the page loads: nobody should
   wait most of two seconds for the button they came to press */
.js .home .hero-top .rv,.js .phero .rv{transition-duration:.55s}
.js .rv.in{opacity:1;transform:none}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rot{to{--ang:360deg}}
@keyframes fade{to{opacity:1}}
@keyframes shimmer{from{background-position:0 0}to{background-position:200% 0}}
@keyframes ping{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}

/* ---------- page + tiles ---------- */
.page{padding:var(--gut)}
.tile{position:relative;border-radius:var(--r);margin-top:var(--gut);overflow:hidden;overflow:clip;isolation:isolate}
.tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--noise-w);opacity:.045}
.tile.dark{color:var(--on-dark-2);background:
  radial-gradient(80% 60% at 92% -12%,rgba(185,255,63,.10),transparent 60%),
  radial-gradient(60% 60% at -10% 112%,rgba(85,103,255,.11),transparent 60%),
  linear-gradient(180deg,#0F1213 0%,#0A0C0D 100%)}
.tile.light{color:var(--text-l);background:
  radial-gradient(60% 55% at 100% 0%,rgba(185,255,63,.24),transparent 62%),
  radial-gradient(50% 45% at 0% 100%,rgba(85,103,255,.07),transparent 60%),
  linear-gradient(180deg,#FAFBF8,#F2F3EF)}
.tile.light::after{background-image:var(--noise-k);opacity:.03}
/* the home FAQ: light, but not the plain grey tile. Same warm base as the
   light tile above it, starting where that one ends and half a tone deeper; the
   blue glows at the top left, carrying on the blue at the foot of the tile
   above, and the lime moves to the bottom right */
.tile.accent{background:
  radial-gradient(62% 62% at 0% 0%,rgba(85,103,255,.10),transparent 62%),
  radial-gradient(56% 60% at 100% 100%,rgba(185,255,63,.16),transparent 60%),
  linear-gradient(180deg,#F2F3EF,#ECEEE9)}
/* one section padding everywhere: 88px in any window 765px tall or more,
   a little less in a shorter one. A section headed by the marquee counts it
   from the strip's line, so its badge sits as far down as every other one. */
.tile-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:clamp(72px,11.5svh,88px) var(--pad-x)}
.spot{position:absolute;left:0;top:0;z-index:0;width:1120px;height:1120px;margin:-560px 0 0 -560px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(185,255,63,.075),transparent);opacity:0;transition:opacity .5s var(--ease);will-change:transform}
.tile.hover .spot{opacity:1}
.gridbg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(247,248,245,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(247,248,245,.04) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(70% 60% at 72% 22%,#000 10%,transparent 80%);mask-image:radial-gradient(70% 60% at 72% 22%,#000 10%,transparent 80%)}
.stars{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 2.2s ease}
.stars.on{opacity:1}

/* headings on dark / light */
.dark h1,.dark h2{color:var(--on-dark)}
.dark h2{background:linear-gradient(180deg,#FFFFFF 42%,rgba(247,248,245,.88));-webkit-background-clip:text;background-clip:text;color:transparent}
.dark h3{color:var(--on-dark)}
.dark h2 em{background:linear-gradient(100deg,#B9FF3F 0%,#EAFFBF 20%,#B9FF3F 40%,#9DF03A 70%,#B9FF3F 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:shimmer 7s linear infinite}
.light h2,.light h1.h2,.light h3{color:var(--ink)}
.light h2 em,.light h1.h2 em{background-image:linear-gradient(90deg,#B9FF3F,#D9FF94);background-repeat:no-repeat;background-size:0% .3em;background-position:0 88%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.2s var(--ease) .45s}
.light h2.in em,html:not(.js) .light h2 em,.light h1.h2.in em,html:not(.js) .light h1.h2 em{background-size:100% .3em}

/* eyebrow pill — sans, no mono */
.eyebrow{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 16px 0 5px;border-radius:999px;margin-bottom:28px;
  font:500 13px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap}
.eyebrow b{display:inline-grid;place-items:center;height:24px;min-width:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.dark .eyebrow{color:var(--on-dark);background:linear-gradient(180deg,rgba(247,248,245,.09),rgba(247,248,245,.02))}
.dark .eyebrow b{color:var(--ink);background:linear-gradient(135deg,var(--lime-hi),var(--lime) 55%,var(--lime-lo));box-shadow:0 0 18px rgba(185,255,63,.45)}
.light .eyebrow{color:var(--ink);background:rgba(255,255,255,.72);box-shadow:0 1px 2px rgba(11,13,14,.05),0 8px 24px -12px rgba(11,13,14,.18);--gb:linear-gradient(135deg,rgba(11,13,14,.14),rgba(11,13,14,.04))}
.light .eyebrow b{color:var(--lime);background:var(--ink)}
.eyebrow .spark{padding:0;width:24px}
.spark svg{width:12px;height:12px;fill:var(--ink);animation:spin 9s linear infinite}

.lead{font-size:18px;line-height:1.62;max-width:56ch}
.dark .lead{color:var(--on-dark-2)}
/* Highlighted words in running text. On a dark surface they are simply lime,
   the way the accent reads in the module tiles ("your business") — no line
   under them (that read as a link) and no band (that got in the way of the
   letters). Lime text is unreadable on a light surface, so there the words
   get the marker from the headings, drawn in as the paragraph is revealed. */
.hl{font-weight:500}
.dark .hl{color:var(--lime-hi)}
.light .hl{color:var(--ink);background:linear-gradient(90deg,#C4FF5A,#E0FFA6) no-repeat 0 100%/100% .38em;padding-bottom:.05em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s var(--ease) .5s}
.js .light .rv:not(.in) .hl{background-size:0% .38em}

/* the heading and the text beside it end on one line: the last line of each
   sits on the same baseline (align to the bottom edge where that is not supported) */
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:30px 72px;align-items:end;align-items:last baseline}
/* the heading stays at the top: a lead taller than it would otherwise push the
   badge below where every other section has it */
.sec-head>:first-child{align-self:start}
.sec-head .lead{padding-bottom:8px}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 30px;border-radius:999px;overflow:hidden;
  font:600 15.5px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;color:var(--ink);border:0;
  background:linear-gradient(180deg,#D6FF86 0%,#B9FF3F 52%,#A2EE2C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.1),0 10px 34px -12px rgba(185,255,63,.7);
  transition:transform .45s var(--ease),box-shadow .35s var(--ease)}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;transform:skewX(-22deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transition:left .8s var(--ease)}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.1),0 0 0 6px rgba(185,255,63,.12),0 18px 50px -12px rgba(185,255,63,.85)}
.btn:hover::after{left:135%}
.btn svg{width:16px;height:16px;flex:none;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{color:var(--on-dark);background:linear-gradient(180deg,rgba(247,248,245,.08),rgba(247,248,245,.02));box-shadow:none;overflow:visible}
.btn.ghost::after{display:none}
.btn.ghost:hover{background:linear-gradient(180deg,rgba(247,248,245,.14),rgba(247,248,245,.04))}

.btn.sm{height:42px;padding:0 20px;font-size:14.5px}
.glow-wrap{position:relative;display:inline-flex;border-radius:999px;isolation:isolate;transition:transform .45s var(--ease)}
.glow-wrap::before,.glow-wrap::after{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;
  background:conic-gradient(from var(--ang),transparent 0 58%,rgba(185,255,63,.9) 76%,#fff 81%,transparent 94%);animation:rot 3.4s linear infinite}
.glow-wrap::after{inset:-6px;filter:blur(14px);opacity:.75}

/* ---------- logo ---------- */
/* wordmark spans y 80–212 of the 26–218 box: lift 12.5% so the text, not the whole mark, sits on the centre line */
.logo{display:block;height:32px;width:auto;aspect-ratio:648/192;color:var(--on-dark);--mark:var(--on-dark);overflow:visible;translate:0 -12.5%}
.logo.accent{--mark:var(--lime)}

/* ---------- nav ---------- */
.nav{position:sticky;top:var(--gut);z-index:50;height:var(--nav-h);border-radius:22px;transition:background .4s,box-shadow .4s,-webkit-backdrop-filter .4s,backdrop-filter .4s;
  --gb:linear-gradient(180deg,rgba(247,248,245,.2),rgba(247,248,245,.04))}
.nav::before{opacity:0;transition:opacity .4s}
.nav.solid{background:rgba(12,14,15,.84);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 24px 60px -24px rgba(0,0,0,.55)}
.nav.solid::before{opacity:1}
.js .nav{animation:navIn 1s var(--ease) .1s both}
@keyframes navIn{from{opacity:0;transform:translateY(-14px)}}
/* the header drops in once per visit: on every next page it is simply there
   (the head script sets .nav-seen), so moving between pages does not jolt */
.js.nav-seen .nav{animation:none}
/* arriving from another page of the site: what is on screen is shown at once (site.js) */
.now,.now *{transition:none!important}

/* ---------- page transitions ----------
   No page loads between the pages of the site (site.js, "moving between
   pages"): <main> is swapped in place, the way the legal tabs switch. The
   header never redraws, so it can't jolt, and nothing flashes white: the
   insides of the tiles fade out and in, their grounds stay. Before that a
   plain page load (the bir.ch way) still jolted the header and blinked white
   inside the team's preview frame, and the cross-document view transition
   read as a blink of the whole page. */
.nav-in{max-width:1200px;height:100%;margin:0 auto;padding-inline:var(--pad-x);display:flex;align-items:center;gap:24px}
.brand{display:block;transition:opacity .2s}
.brand:hover{opacity:.85}
.nav-links{position:relative;display:flex;gap:2px;margin-inline:auto;font-size:14.5px;color:var(--on-dark-2)}
.nav-links a{position:relative;z-index:1;padding:9px 15px;border-radius:999px;transition:color .25s}
.nav-links a:hover,.nav-links a.active{color:var(--on-dark)}
.nav-links a.active::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
/* with the script, the dot is one element that slides from link to link — between
   pages and with the scroll-spy on the home page (site.js, "moving between pages") */
.nav-dot{position:absolute;left:0;bottom:2px;z-index:2;width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 8px var(--lime);pointer-events:none;opacity:0;
  transition:transform .55s var(--ease),opacity .3s}
.nav-links.dot-on a.active::after{display:none}
.nav-hl{position:absolute;top:0;left:0;height:100%;width:0;border-radius:999px;background:rgba(247,248,245,.08);opacity:0;transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s}
.nav-in .btn{margin-left:auto}
.progress{position:absolute;left:28px;right:28px;bottom:0;height:1px;overflow:hidden;opacity:0;transition:opacity .4s}
.nav.solid .progress{opacity:1}
.progress i{display:block;height:100%;background:linear-gradient(90deg,rgba(185,255,63,0),var(--lime) 70%,#fff);transform-origin:0 50%;transform:scaleX(var(--p,0))}

.aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;will-change:transform}
.aurora .a1{width:64vmax;height:64vmax;right:-20vmax;top:-32vmax;background:radial-gradient(closest-side,rgba(185,255,63,.24),rgba(185,255,63,.07) 52%,transparent);animation:drift1 16s ease-in-out infinite alternate}
.aurora .a2{width:48vmax;height:48vmax;right:12vmax;top:14vmax;background:radial-gradient(closest-side,rgba(85,103,255,.17),transparent);animation:drift2 21s ease-in-out infinite alternate}
.aurora .a3{width:42vmax;height:42vmax;left:-14vmax;bottom:-24vmax;background:radial-gradient(closest-side,rgba(120,220,90,.12),transparent);animation:drift3 25s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(-7vmax,5vmax,0)}}
@keyframes drift2{to{transform:translate3d(6vmax,-4vmax,0)}}
@keyframes drift3{to{transform:translate3d(9vmax,-6vmax,0)}}

.w{display:inline-block;vertical-align:top;padding:0 .06em .26em;margin:0 -.06em -.26em}
/* words tied across a tag ("for <em>your business</em>.") move to a new line
   together: a line may break between two .w boxes even at a non-breaking space */
.wg{white-space:nowrap}
/* a phrase that must not break: the build wraps every hyphenated word in it
   ("20-minute", never "20- / minute") */
.nw{white-space:nowrap}
/* the mask exists only while the words rise; afterwards it would clip descenders */
.js .words:not(.done) .w{overflow:hidden}
.w>span{display:inline-block;padding-bottom:.2em;margin-bottom:-.2em;
  background:linear-gradient(180deg,#FFFFFF 45%,#D6DAD6 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
.js .words .w>span{transform:translateY(112%) rotate(5deg);transform-origin:0 100%;opacity:0;transition:transform .8s var(--ease),opacity .8s var(--ease);transition-delay:var(--d,0s)}
.js .words.in .w>span{transform:none;opacity:1}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:auto;padding-top:100px}
.stat{position:relative;padding:0 52px}
.stat:first-child{padding-left:0}
.stat+.stat::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:linear-gradient(transparent,var(--line-d2) 25%,var(--line-d2) 75%,transparent)}
.num{font-size:clamp(34px,3.4vw,48px);font-weight:500;letter-spacing:-.045em;line-height:1.05;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#FFFFFF 30%,rgba(247,248,245,.62));-webkit-background-clip:text;background-clip:text;color:transparent}
.num .u{background:linear-gradient(135deg,var(--lime-hi),var(--lime) 60%);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat p{font-size:15.5px;color:var(--on-dark-2);margin-top:8px;max-width:20ch}
/* the numbers on a light tile (home): ink digits, a deep green for × and +
   (lime text does not read on light), light-theme dividers */
.light .num{background:linear-gradient(180deg,var(--ink) 30%,rgba(11,13,14,.72));-webkit-background-clip:text;background-clip:text}
.light .num .u{background:linear-gradient(135deg,#7CC21E,#4F8A0B 70%);-webkit-background-clip:text;background-clip:text}
.light .stat p{color:var(--text-l)}
.light .stat+.stat::before{background:linear-gradient(transparent,rgba(11,13,14,.12) 25%,rgba(11,13,14,.12) 75%,transparent)}
.light .stat,.light .stat:first-child{border-top-color:rgba(11,13,14,.1)}   /* phones: the rows' dividers */
/* the numbers as cards (home): the headline figure dark and wider — it carries
   the proof — the other two light; the same asymmetry as Today / With ZLIT */
.stat-cards{grid-template-columns:1.4fr 1fr 1fr;justify-content:stretch;gap:16px;padding-top:64px}
.stat-cards .stat,.stat-cards .stat:first-child{padding:30px 30px 32px}
.stat-cards .stat+.stat::before{display:none}
.stat-cards .stat p{margin-top:12px}
.stat-cards .bt-invert{background:radial-gradient(70% 90% at 100% 0%,rgba(185,255,63,.2),transparent 62%),
  radial-gradient(120% 130% at 80% 0%,#181C1D,#0B0D0E 62%)}
.stat-cards .bt-invert .num{background:linear-gradient(180deg,#FFFFFF 30%,rgba(247,248,245,.7));-webkit-background-clip:text;background-clip:text}
.stat-cards .bt-invert .num .u{background:linear-gradient(135deg,var(--lime-hi),var(--lime) 60%);-webkit-background-clip:text;background-clip:text}
.stat-cards .bt-invert p{color:var(--on-dark-2)}
/* no filter on a moving element (Safari): the card's own lime corner is its glow */
.stat-star{position:absolute;top:26px;right:28px;width:26px;height:26px;fill:var(--lime);animation:twinkle 5.5s ease-in-out infinite}

/* ---------- comet beam (built by JS) ---------- */
.beam-x{position:absolute;z-index:0;pointer-events:none;aspect-ratio:1000/900}
.beam-x svg{display:block;width:100%;height:100%;overflow:visible}
.hero-beam{top:0;height:100%;right:max(-140px,calc(50% - 780px));transform:translate3d(calc(var(--px,0) * -18px),calc(var(--py,0) * -12px),0);transition:transform .9s var(--ease)}
.b-draw{stroke-dasharray:1 1;stroke-dashoffset:1;animation:bDraw 2.1s cubic-bezier(.65,0,.25,1) .25s forwards}
@keyframes bDraw{to{stroke-dashoffset:0}}
.b-haze{opacity:0;animation:fade 2.6s ease 1.1s forwards}
.b-body,.b-rail{opacity:0;animation:fade 1.6s ease 1.3s forwards}
.b-halo,.b-core{opacity:0;animation:fade 1.2s ease 1.95s forwards}
.b-flare{opacity:0;transform-box:view-box;transform-origin:700px 250px;animation:fade 1.4s ease 2s forwards,spin 36s linear 2s infinite}
.b-pop{opacity:0;transform-box:view-box;transform-origin:700px 250px;transform:scale(.15) rotate(-140deg);animation:pop 1.2s cubic-bezier(.2,1.5,.35,1) 1.9s forwards}
@keyframes pop{to{opacity:1;transform:none}}
.b-tw{transform-box:view-box;transform-origin:700px 250px;animation:twinkle 5.5s ease-in-out 3.2s infinite}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(6deg)}}
.b-ping{opacity:0;transform-box:view-box;transform-origin:700px 250px;animation:ping 3.8s ease-out 2.5s infinite}
.b-ping.p2{animation-delay:4.4s}
.beam-x:not(.play) *{animation-play-state:paused!important}

/* ---------- marquee ---------- */
.marquee{position:relative;z-index:2;overflow:hidden;padding:30px 0;border-bottom:1px solid rgba(11,13,14,.07);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;align-items:center;width:max-content;animation:marquee 56s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track>*{margin-right:36px;flex:none}
.mq-track span{font-size:clamp(22px,2.4vw,34px);font-weight:500;letter-spacing:-.035em;line-height:1.1;color:rgba(11,13,14,.24);white-space:nowrap}
.mq-track svg{width:20px;height:20px;fill:rgba(11,13,14,.22);animation:spin 10s linear infinite}
.mq-track svg:nth-of-type(even){fill:var(--lime-lo)}
/* an ink copy of the track, seen only through a soft window in the middle:
   whatever passes the centre of the screen lights up. The script keeps the
   two tracks in lockstep. */
.mq-lit{position:absolute;inset:0;padding:inherit;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 43%,#000 57%,transparent 80%);
  mask-image:linear-gradient(90deg,transparent 20%,#000 43%,#000 57%,transparent 80%)}
.mq-lit .mq-track span{color:var(--ink)}
.mq-lit .mq-track svg{fill:var(--ink)}
.mq-lit .mq-track svg:nth-of-type(even){fill:var(--lime-lo)}
@keyframes marquee{to{transform:translateX(-50%)}}
/* the home page's module strip: the same marquee on a dark tile, between the
   proof and the FAQ, which are both light */
.mq-strip .marquee{padding:34px 0;border-bottom:0}
.mq-strip .mq-track span{color:rgba(247,248,245,.26)}
.mq-strip .mq-track svg{fill:rgba(247,248,245,.3)}
.mq-strip .mq-track svg:nth-of-type(even),.mq-strip .mq-lit .mq-track svg:nth-of-type(even){fill:var(--lime)}
.mq-strip .mq-lit .mq-track span{color:var(--on-dark)}
.mq-strip .mq-lit .mq-track svg{fill:var(--on-dark)}
@media (max-width:760px){.mq-strip .marquee{padding:24px 0}}

/* ---------- data cards ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:72px}
.card{display:flex;flex-direction:column;padding:12px 12px 32px;border-radius:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.72));
  box-shadow:0 1px 2px rgba(11,13,14,.04),0 28px 56px -36px rgba(11,13,14,.28);
  --gb:linear-gradient(180deg,rgba(11,13,14,.11),rgba(11,13,14,.03));--sp-c:rgba(185,255,63,.2);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:0 1px 2px rgba(11,13,14,.04),0 44px 80px -40px rgba(11,13,14,.36)}
.card .k,.card h3,.card p{padding-inline:18px}
.card .k{display:flex;align-items:center;gap:9px;margin-top:28px;font-size:13px;font-weight:500;color:var(--slate)}
.card .k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime-lo);box-shadow:0 0 0 3px rgba(185,255,63,.3)}
.card h3{font-size:22px;margin:10px 0}
.card p{font-size:15.5px}
.viz{height:172px;border-radius:20px;overflow:hidden;
  background:radial-gradient(circle at 1px 1px,rgba(11,13,14,.09) 1px,transparent 1.3px) 0 0/14px 14px,linear-gradient(180deg,#F1F2EE,#FAFBF8);
  box-shadow:inset 0 0 0 1px rgba(11,13,14,.05)}
.viz svg{display:block;width:100%;height:100%;font-family:var(--sans)}
.flowdash{stroke-dasharray:8 140;animation:flowd 2.6s linear infinite}
.flowdash.f2{animation-delay:-.9s}.flowdash.f3{animation-delay:-1.7s}
@keyframes flowd{from{stroke-dashoffset:148}to{stroke-dashoffset:0}}
.pingc{transform-box:fill-box;transform-origin:center;animation:ping 2.6s ease-out infinite}
.pingc.d2{animation-delay:1.3s}
.ln{stroke-dasharray:1 1;stroke-dashoffset:1}
.card.in .ln{animation:bDraw 1.8s var(--ease) .35s forwards}
.area{opacity:0}
.card.in .area{animation:fade 1.4s ease 1s forwards}
.tip{opacity:0}
.card.in .tip{animation:tipIn .7s var(--ease) 1.7s forwards}
@keyframes tipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html:not(.js) .ln{stroke-dashoffset:0}
html:not(.js) .area,html:not(.js) .tip{opacity:1}
.arc{stroke-dasharray:0 100;animation:sweep 3.6s var(--ease) infinite}
@keyframes sweep{0%{stroke-dasharray:0 100;opacity:1}72%{stroke-dasharray:100 0;opacity:1}100%{stroke-dasharray:100 0;opacity:0}}
.fillbar{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);animation:fillbar 3.6s var(--ease) infinite}
.fillbar.b2{animation-delay:.35s}.fillbar.b3{animation-delay:.7s}
@keyframes fillbar{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* ---------- protection ---------- */
.split{display:grid;grid-template-columns:5fr 7fr;gap:56px 88px;align-items:start}
.sticky{position:sticky;top:124px}
.sticky .lead{font-size:18px}
.lvl-meter{display:flex;align-items:flex-end;gap:14px;margin-top:48px}
.lvl-meter .cur{font-size:88px;line-height:.8;font-weight:300;letter-spacing:-.06em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--lime-hi),var(--lime) 50%,rgba(185,255,63,.25));-webkit-background-clip:text;background-clip:text;color:transparent}
.lvl-meter .tot{font-size:20px;color:var(--on-dark-3);padding-bottom:4px}
.lvl-meter .bars{display:flex;gap:6px;margin-left:18px;padding-bottom:10px}
.lvl-meter .bars i{width:26px;height:4px;border-radius:4px;background:var(--line-d2);transition:background .5s,box-shadow .5s}
.lvl-meter .bars i.on{background:var(--lime);box-shadow:0 0 12px rgba(185,255,63,.7)}
.levels{position:relative;list-style:none;margin:0;padding:0 0 0 44px;display:grid;gap:14px}
.levels::before,.rail{content:"";position:absolute;left:11px;top:20px;bottom:20px;width:1px;background:var(--line-d)}
.rail{background:linear-gradient(180deg,var(--lime),rgba(185,255,63,.35));box-shadow:0 0 14px rgba(185,255,63,.7);transform-origin:50% 0;transform:scaleY(0)}
.lvl{position:relative;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;padding:30px 32px 32px 28px;border-radius:22px;
  background:linear-gradient(180deg,rgba(247,248,245,.04),rgba(247,248,245,.01));transition:background .7s var(--ease)}
.lvl::after{content:"";position:absolute;left:-38px;top:38px;width:11px;height:11px;border-radius:50%;background:#0B0D0E;box-shadow:inset 0 0 0 1px var(--line-d2);transition:background .5s,box-shadow .5s}
.lvl.on{background:linear-gradient(160deg,rgba(185,255,63,.08),rgba(247,248,245,.012) 55%);--gb:linear-gradient(160deg,rgba(185,255,63,.5),rgba(247,248,245,.06) 55%)}
.lvl.on::after{background:var(--lime);box-shadow:0 0 0 4px rgba(185,255,63,.16),0 0 18px rgba(185,255,63,.9)}
.lvl .n{grid-row:span 2;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--on-dark-2);background:rgba(247,248,245,.05);box-shadow:inset 0 0 0 1px var(--line-d);transition:all .5s var(--ease)}
.lvl.on .n{color:var(--ink);background:linear-gradient(135deg,var(--lime-hi),var(--lime));box-shadow:0 8px 24px -8px rgba(185,255,63,.8)}
.lvl h3{font-size:22px;padding-top:7px}
.lvl p{font-size:15.5px;max-width:58ch}

/* ---------- rules ---------- */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:48px 80px;align-items:start;margin-top:60px}
.row2 .lead{font-size:21px;line-height:1.55;color:var(--ink);letter-spacing:-.012em}
.flow{margin-top:44px;padding:22px;border-radius:22px;background:rgba(255,255,255,.6);box-shadow:0 1px 2px rgba(11,13,14,.04),0 28px 56px -40px rgba(11,13,14,.3);--gb:linear-gradient(180deg,rgba(11,13,14,.1),rgba(11,13,14,.03))}
.flow svg{display:block;width:100%;height:auto}
ul.feat{list-style:none;margin:0;padding:0}
ul.feat li{position:relative;display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start;padding:18px 16px;margin-inline:-16px;border-radius:18px;font-size:18px;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
ul.feat li+li::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:rgba(11,13,14,.08);transition:opacity .3s}
ul.feat li:hover{background:rgba(255,255,255,.9);box-shadow:0 16px 36px -24px rgba(11,13,14,.3)}
ul.feat li:hover::before,ul.feat li:hover+li::before{opacity:0}
ul.feat .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,#1B1F21,var(--ink));box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:transform .6s var(--ease)}
ul.feat .ic svg{width:17px;height:17px;fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
ul.feat li:hover .ic{transform:translateY(-3px) scale(1.07)}
ul.feat b{color:var(--ink);font-weight:600}
ul.feat li>span:last-child{padding-top:4px}      /* the first line centred on the 36px icon */
/* beside the paragraph, the list rises by its first row's padding so the two
   first lines sit on one line */
@media (min-width:1001px){.row2 ul.feat{margin-top:-18px}}

/* ---------- AI ---------- */
.ai-top{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.ai-top>:first-child{align-self:start}      /* the badge stays at the section padding, whatever the orb's height */
/* no taller than the text beside it (the orb itself is ~220px): a taller box
   centred the text lower and put this section's badge below every other one */
.orb-wrap{position:relative;height:340px;perspective:1000px;display:grid;place-items:center}
.orb{position:relative;width:200px;height:200px;transform-style:preserve-3d;transform:rotateX(calc(var(--py,0) * -10deg)) rotateY(calc(var(--px,0) * 14deg));transition:transform .9s var(--ease)}
.orb-core{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 112%,rgba(185,255,63,.8),rgba(185,255,63,.14) 46%,transparent 64%),radial-gradient(circle at 32% 20%,rgba(255,255,255,.16),transparent 42%),#0C0F10;
  box-shadow:inset 0 0 0 1px rgba(247,248,245,.08),inset 0 -34px 60px -24px rgba(185,255,63,.55),0 40px 120px -20px rgba(185,255,63,.5),0 0 0 18px rgba(185,255,63,.025),0 0 0 44px rgba(185,255,63,.015)}
.orb-core::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 55%,rgba(185,255,63,.95) 72%,#fff 75%,transparent 88%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.6px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.6px),#000 calc(100% - 1px));
  animation:spin 6s linear infinite}
.orb-star{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;fill:#fff;
  animation:orbStar 5s ease-in-out infinite}
@keyframes orbStar{0%,100%{transform:translateZ(2px) scale(1) rotate(0)}50%{transform:translateZ(2px) scale(1.1) rotate(8deg)}}
.orb-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(247,248,245,.14);transform-style:preserve-3d}
.orb-ring i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime),0 0 3px #fff}
.orb-ring.r1{width:300px;height:300px;margin:-150px 0 0 -150px;animation:orbit1 14s linear infinite}
.orb-ring.r2{width:390px;height:390px;margin:-195px 0 0 -195px;border-color:rgba(185,255,63,.2);animation:orbit2 24s linear infinite}
.orb-ring.r3{width:250px;height:250px;margin:-125px 0 0 -125px;border-style:dashed;border-color:rgba(247,248,245,.1);animation:orbit3 11s linear infinite}
.orb-ring.r3 i{background:#fff;width:5px;height:5px;margin-left:-2.5px;top:-3px}
@keyframes orbit1{from{transform:rotateX(74deg) rotateY(-10deg) rotateZ(0)}to{transform:rotateX(74deg) rotateY(-10deg) rotateZ(360deg)}}
@keyframes orbit2{from{transform:rotateX(70deg) rotateY(18deg) rotateZ(0)}to{transform:rotateX(70deg) rotateY(18deg) rotateZ(-360deg)}}
@keyframes orbit3{from{transform:rotateX(62deg) rotateY(42deg) rotateZ(0)}to{transform:rotateX(62deg) rotateY(42deg) rotateZ(360deg)}}
.ai-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.ai-card{padding:30px 28px 34px;border-radius:30px;background:linear-gradient(180deg,rgba(247,248,245,.055),rgba(247,248,245,.012));
  --gb:linear-gradient(180deg,rgba(247,248,245,.18),rgba(247,248,245,.03));--sp-c:rgba(185,255,63,.11);transition:transform .6s var(--ease)}
.ai-card:hover{transform:translateY(-8px)}
.ai-card .ico{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;margin-bottom:48px;color:var(--lime);
  background:linear-gradient(135deg,rgba(185,255,63,.22),rgba(185,255,63,.03));box-shadow:inset 0 0 0 1px rgba(185,255,63,.26),0 10px 30px -12px rgba(185,255,63,.45)}
.ai-card .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ai-card h3{margin-bottom:10px}
.ai-card p{font-size:15.5px}

/* ---------- migration ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:80px}
.track{position:absolute;left:32px;right:32px;top:31px;height:2px;border-radius:2px;background:rgba(11,13,14,.08);overflow:hidden}
.track i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,13,14,.35),var(--ink) 55%,var(--lime-lo));transform-origin:0 50%;transform:scaleX(0);transition:transform 2s cubic-bezier(.65,0,.25,1) .2s}
.steps.in .track i,html:not(.js) .track i{transform:scaleX(1)}
.step{position:relative;padding-right:28px}
.pin{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);
  background:linear-gradient(180deg,#FFFFFF,#EEF0EB);box-shadow:inset 0 0 0 1px rgba(11,13,14,.08),0 1px 2px rgba(11,13,14,.06),0 14px 28px -14px rgba(11,13,14,.3)}
.step:last-child .pin{background:linear-gradient(135deg,var(--lime-hi),var(--lime) 55%,var(--lime-lo));box-shadow:0 0 0 8px rgba(185,255,63,.2),0 14px 34px -8px rgba(143,226,42,.85)}
.step:last-child .pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--lime-lo);animation:ping 2.6s ease-out infinite}
.step h3{margin:30px 0 10px}
.step p{font-size:15.5px;max-width:34ch}
.js .steps .pin{opacity:0;transform:scale(.5);transition:transform .9s cubic-bezier(.2,1.5,.35,1),opacity .5s}
.js .steps .step h3,.js .steps .step p{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .steps.in .pin,.js .steps.in .step h3,.js .steps.in .step p{opacity:1;transform:none}
.js .steps.in .step:nth-child(2) *{transition-delay:.15s}
.js .steps.in .step:nth-child(3) *{transition-delay:.85s}
.js .steps.in .step:nth-child(4) *{transition-delay:1.55s}

/* ---------- build vs buy ---------- */
.bvb .tile-in{padding-bottom:150px}
.bvb h2{max-width:19ch;font-size:clamp(32px,min(4.4vw,6.8svh),60px);line-height:1.1}
.bvb .foot-row{display:grid;grid-template-columns:5fr 7fr;gap:40px 88px;margin-top:64px;padding-top:34px;border-top:1px solid var(--line-d)}
.eclipse{position:absolute;z-index:0;right:-120px;bottom:-400px;width:740px;aspect-ratio:1;pointer-events:none;transform:translateY(var(--ey,0px))}
.eclipse>*{position:absolute;border-radius:50%}
.ec-glow{inset:-40px;background:conic-gradient(from 210deg,transparent 0 55%,rgba(185,255,63,.9) 75%,#fff 79%,rgba(185,255,63,.5) 84%,transparent 95%);filter:blur(34px);opacity:.55}
.ec-body{inset:0;background:radial-gradient(circle at 50% 0%,#171B1C,#07090A 58%);box-shadow:inset 0 1px 0 rgba(247,248,245,.14),0 -40px 160px -30px rgba(185,255,63,.3)}
.ec-rim{inset:-1px;background:conic-gradient(from 0deg,transparent 0 55%,rgba(185,255,63,.95) 75%,#fff 79%,rgba(185,255,63,.5) 84%,transparent 95%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.4px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.4px));animation:spin 16s linear infinite}

/* ---------- faq ---------- */
.faq-list{display:grid;gap:8px}
.qa{border-radius:22px;background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(11,13,14,.06);transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.qa:hover{background:rgba(255,255,255,.75)}
.qa.is-open,html:not(.js) .qa[open]{background:#fff;box-shadow:inset 0 0 0 1px rgba(11,13,14,.05),0 28px 50px -34px rgba(11,13,14,.35)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 22px 22px 26px;font-size:18px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
summary::-webkit-details-marker{display:none}
.pm{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:rgba(11,13,14,.05);transition:background .4s var(--ease),transform .5s var(--ease),box-shadow .4s}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%)}
.pm::after{transform:translate(-50%,-50%) rotate(90deg)}
summary:hover .pm{background:rgba(11,13,14,.09)}
.qa.is-open .pm,html:not(.js) .qa[open] .pm{transform:rotate(135deg);background:linear-gradient(135deg,var(--lime-hi),var(--lime));box-shadow:0 8px 20px -8px rgba(143,226,42,.9)}
.ans{overflow:hidden}
.ans p{padding:0 76px 26px 26px;font-size:16.5px;max-width:70ch}

/* ---------- CTA + footer ---------- */
.cta .tile-in{padding-bottom:40px}
.cta .aurora .a1{top:-10vmax;right:-26vmax}
.cta-grid{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.cta h2{max-width:17ch}
.cta .btn{height:62px;padding:0 34px;font-size:16.5px}
.cta-art{position:relative;min-height:400px}

/* The finale's drawing: stars grow one after another along a growth curve,
   each bigger than the last, a ping as each one lands; then they fade and
   grow again. The ground is the first screen's lime and blue aurora. One 8s
   cycle for every star and its ping, offset by --i, so they stay in step.
   Transform and opacity only; site.js pauses it off screen (.off). */
.ascent{position:absolute;left:50%;top:50%;width:480px;height:420px;margin:-210px 0 0 -240px;
  transform:translate3d(calc(var(--px,0) * -14px),calc(var(--py,0) * -10px),0);transition:transform .9s var(--ease)}
.as-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.as-star{--c:185,255,63;position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  animation:asGrow 8s var(--ease) calc(var(--i) * .45s) infinite backwards}
.as-star.blue{--c:124,139,255}
.as-star svg{position:relative;display:block;width:100%;height:100%;fill:#fff}
.as-star b{position:absolute;inset:-130%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(var(--c),.42) 32%,rgba(var(--c),.1) 62%,transparent)}
/* the ping belongs to the same cycle: it starts the moment the star lands */
.as-star::before{content:"";position:absolute;inset:-10%;border-radius:50%;border:1.2px solid rgba(var(--c),.9);opacity:0;
  animation:asPing 8s ease-out calc(var(--i) * .45s) infinite backwards}
@keyframes asGrow{0%{opacity:0;transform:scale(0) rotate(-45deg)}9%{opacity:1;transform:scale(1.14) rotate(4deg)}
  13%,78%{opacity:1;transform:scale(1) rotate(0)}90%,100%{opacity:0;transform:scale(.55) rotate(0)}}
@keyframes asPing{0%,8%{opacity:0;transform:scale(.6)}9%{opacity:.85;transform:scale(.8)}26%,100%{opacity:0;transform:scale(2.6)}}
.ascent.off *,.ascent.off *::before{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){                       /* still: every star shown, no pings */
  .as-star{animation:none}
  .as-star::before{display:none}
}
/* the footer: brand on the left, three link columns (Solutions, Explore,
   Legal), then a thin line: copyright, where we are, the support address,
   and the platforms */
.site-foot{margin-top:64px;padding-top:36px;border-top:1px solid var(--line-d);font-size:14.5px;color:var(--on-dark-3)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px 48px}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.foot-brand a{border-radius:6px}
.site-foot .logo{display:block;height:26px}
.site-foot .tag{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2)}
.foot-nav{display:grid;grid-template-columns:repeat(3,auto);gap:32px clamp(40px,6vw,88px)}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-h{margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3)}
.foot-col a{color:var(--on-dark-2);transition:color .25s}
.foot-col a:hover,.foot-col a[aria-current]{color:var(--on-dark)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line-d);font-size:13.5px}
.foot-bottom a{color:var(--on-dark-2);transition:color .25s}
.foot-bottom a:hover{color:var(--on-dark)}
/* a page without the finale ends on a footer tile of its own */
.foot-tile .tile-in{padding-top:28px;padding-bottom:40px}
.foot-tile .site-foot{margin-top:0;border-top:0}
.giant-wrap{position:relative;width:56%;margin:24px 0 -3% auto}   /* a short footer: the wordmark at half width, whole, under the platforms line */
.giant{display:block;width:100%;height:auto;aspect-ratio:648/192;overflow:visible}
.giant.base{--word:url(#g-fade);--mark:url(#g-fade-lime)}
.giant.lit{position:absolute;inset:0;--word:url(#g-lit);--mark:url(#g-lit);opacity:0;transition:opacity .6s var(--ease);
  -webkit-mask-image:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),#000 10%,transparent 70%);mask-image:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),#000 10%,transparent 70%)}
.giant-wrap:hover .giant.lit{opacity:1}

/* ---------- trust badges ---------- */
.trust{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none;margin:28px 0 0;padding:0;font-size:14.5px}
.trust li{display:flex;align-items:center;gap:9px}
.trust svg{width:16px;height:16px;flex:none;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dark .trust{color:var(--on-dark-2)}
.dark .trust svg{stroke:var(--lime)}
.light .trust{color:var(--text-l)}
.light .trust svg{stroke:var(--ink)}


.wheel-wrap{position:relative;display:grid;place-items:center}
.wheel{position:relative;width:min(560px,100%);aspect-ratio:1}
.wheel svg{display:block;width:100%;height:100%;overflow:visible}
.wheel .disc{fill:rgba(247,248,245,.022);stroke:var(--line-d);stroke-width:1}
/* the arc runs the ring and the light inside the hub travels with it, so the
   two read as one moving highlight rather than a detached shelf */
.wheel .wring{fill:none;stroke:rgba(185,255,63,.55);stroke-width:1.4;stroke-dasharray:7 93;stroke-dashoffset:3.5;
  stroke-linecap:round;transform-box:view-box;transform-origin:300px 300px;animation:spin 22s linear infinite}
.wheel .hub-spin{transform-box:view-box;transform-origin:300px 300px;animation:spin 22s linear infinite}
@keyframes hubBreathe{0%,100%{opacity:.8}50%{opacity:1}}
.wheel .hub-glow{animation:hubBreathe 6s ease-in-out infinite}
.wheel .gr{cursor:pointer}
.wheel .gr:focus{outline:none}
.wheel .hub-ring{fill:none;stroke:rgba(185,255,63,.22);stroke-width:1}
.wheel .hub{fill:#0B0D0E}
.sl{cursor:pointer}
.sl .sg{fill:rgba(247,248,245,.035);stroke:rgba(247,248,245,.14);stroke-width:1;transition:fill .5s var(--ease),stroke .5s var(--ease)}
.sl .lb{font:600 13px/1 var(--sans);letter-spacing:.06em;fill:var(--on-dark-3);text-transform:uppercase;transition:fill .45s var(--ease)}
.sl:hover .sg{fill:rgba(247,248,245,.08)}
.sl:hover .lb{fill:var(--on-dark)}
.sl.on .sg{fill:rgba(185,255,63,.1);stroke:rgba(185,255,63,.34)}
.sl.on .lb{fill:var(--on-dark)}

.sl:focus{outline:none}
.sl:focus-visible .sg{stroke:var(--lime);stroke-width:2}

/* ---------- support ---------- */
.card.plain{padding:30px 12px 32px}
.card.plain .k{margin-top:0}
.card.plain h3{font-size:21px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav-links{display:none}
  .split,.row2,.sec-head,.ai-top,.cta-grid,.bvb .foot-row{grid-template-columns:1fr}
  .bvb .foot-row>span{display:none}
  .sticky{position:static}
  .lvl-meter{display:none}
  .cards3,.ai-cards{grid-template-columns:1fr}
  .orb-wrap{height:380px;margin-top:-10px}
  .cta-art{display:none}

  .giant.lit{display:none}
}
@media (max-width:760px){
  :root{--gut:8px;--r:24px;--nav-h:64px;--pad-x:20px}
  html{scroll-padding-top:84px}
  .nav{border-radius:18px}
  .progress{left:18px;right:18px}
  .logo{height:28px}
  .tile-in{padding-block:clamp(48px,7svh,64px)}
  .hero-beam{top:6px;height:430px;right:-80px;opacity:.85}
  .lead{font-size:16.5px}
  .cta-row .btn,.cta-row .glow-wrap{flex:1 1 auto}
  .cta-row .glow-wrap .btn{width:100%}
  .stats{grid-template-columns:1fr;padding-top:64px}
  .stat,.stat:first-child{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-top:1px solid var(--line-d)}
  .stat+.stat::before{display:none}
  .num{min-width:124px}
  .stat p{margin-top:0}
  .stat-cards{gap:10px;padding-top:44px}
  .stat-cards .stat,.stat-cards .stat:first-child{padding:22px 24px;border-top:0}
  .stat-cards .stat p{margin-top:0}
  .stat-star{top:18px;right:20px;width:20px;height:20px}
  .marquee{padding:22px 0}
  .cards3{margin-top:48px}
  .row2 .lead{font-size:18px}
  ul.feat li{font-size:16.5px}
  .flow{padding:14px}
  .levels{padding-left:30px}
  .levels::before,.rail{left:7px}
  .lvl{grid-template-columns:1fr;padding:24px 22px 26px}
  .lvl::after{left:-28px;top:36px}
  .lvl .n{grid-row:auto}
  .lvl h3{padding-top:6px}
  .orb-wrap{height:320px;transform:scale(.82)}
  .ai-card .ico{margin-bottom:30px}
  .steps{grid-template-columns:1fr;gap:36px;margin-top:56px}
  .track{display:none}
  .step:not(:last-child)::before{content:"";position:absolute;left:31px;top:64px;bottom:-36px;width:2px;background:linear-gradient(180deg,rgba(11,13,14,.3),var(--ink));transform-origin:50% 0;transform:scaleY(0);transition:transform .8s var(--ease)}
  .steps.in .step:not(:last-child)::before,html:not(.js) .step:not(:last-child)::before{transform:scaleY(1)}
  .steps.in .step:nth-child(3)::before{transition-delay:.7s}
  .step{display:grid;grid-template-columns:64px 1fr;gap:0 20px;padding:0}
  .pin{grid-row:span 2}
  .step h3{margin:8px 0 8px}
  .bvb .tile-in{padding-bottom:120px}
  .eclipse{width:460px;right:-180px;bottom:-300px}
  summary{font-size:16.5px;padding:18px 16px 18px 20px}
  .ans p{padding:0 20px 22px}
  .cta .btn{height:58px;padding:0 28px}
  .site-foot{margin-top:48px;padding-top:32px}
  .foot-nav{grid-template-columns:1fr 1fr;width:100%;gap:32px 24px}
  .foot-col:last-child{grid-column:1/-1}      /* Legal: full width, "Data Processing Agreement" on one line */
  .foot-bottom{margin-top:32px}
  .giant-wrap{width:auto;margin:24px 0 -7%}
}
@media (max-width:1000px){
  .nav-links{display:flex;margin-inline-start:auto}
  .nav-links a{display:none}

}
@media (max-width:760px){
  .wheel{width:min(430px,90%)}
  .trust{gap:8px 18px;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .b-comets,.pingc,.b-ping{display:none}
}

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

/* ---------- nav: dropdown + burger ---------- */
.nav-links .has-drop{position:relative}
.nav-links .has-drop>a{display:inline-flex;align-items:center;gap:6px}
.caret{width:11px;height:11px;flex:none;opacity:.7;transition:transform .35s var(--ease)}
.has-drop:hover .caret,.has-drop:focus-within .caret{transform:rotate(180deg)}
.drop{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%) translateY(-10px);
  width:min(860px,calc(100vw - 40px));padding:20px;border-radius:26px;z-index:60;
  opacity:0;visibility:hidden;pointer-events:none;
  background:rgba(12,14,15,.93);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 44px 96px -34px rgba(0,0,0,.75);
  --gb:linear-gradient(180deg,rgba(247,248,245,.2),rgba(247,248,245,.05));
  transition:opacity .28s var(--ease),transform .38s var(--ease),visibility .28s}
.drop::after{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%)}
.drop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.drop-col>span{display:block;padding:4px 12px 10px;font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark-3)}
.nav-links .drop-col a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:14px;font-size:14.5px;color:var(--on-dark-2)}
.nav-links .drop-col a:hover{background:rgba(247,248,245,.08);color:var(--on-dark)}

.burger{display:none;width:44px;height:44px;margin-left:12px;padding:0;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,rgba(247,248,245,.09),rgba(247,248,245,.02));box-shadow:inset 0 0 0 1px var(--line-d)}
.burger i{display:block;width:17px;height:1.6px;margin:3.4px auto;border-radius:2px;background:var(--on-dark);transition:transform .35s var(--ease)}
.burger[aria-expanded="true"] i:first-child{transform:translateY(2.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-2.5px) rotate(-45deg)}
/* The phone menu is an overlay: fixed over the page, out of the flow, so
   opening it moves nothing — not the hero, not the header. The header stays
   on top of it at the same height; the panel drops in just below. */
.mobmenu{position:fixed;inset:0;z-index:49;padding:calc(var(--gut) + var(--nav-h) + 10px) var(--gut) var(--gut);
  background:rgba(8,10,11,.62);opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility 0s .3s;
  overflow-y:auto;overscroll-behavior:contain}  /* a short phone with Solutions open: the panel scrolls, its buttons stay reachable */
.mobmenu.open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
.mm-panel{display:grid;gap:2px;padding:12px;border-radius:22px;background:#111416;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.7),inset 0 0 0 1px var(--line-d2);
  transform:translateY(-10px);transition:transform .35s var(--ease)}
.mobmenu.open .mm-panel{transform:none}
.mm-panel a{padding:13px 14px;border-radius:14px;font-size:16.5px;color:var(--on-dark-2)}
.mm-panel a:hover{background:rgba(247,248,245,.07);color:var(--on-dark)}
.mm-panel .btn{width:100%;margin-top:8px}
.mm-drop summary{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:14px;
  font-size:16.5px;color:var(--on-dark-2);cursor:pointer;list-style:none}
.mm-drop summary::-webkit-details-marker{display:none}
.mm-drop summary:hover,.mm-drop[open] summary{background:rgba(247,248,245,.07);color:var(--on-dark)}
.mm-drop[open] .caret{transform:rotate(180deg)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 6px;padding:12px 4px 10px}
.mm-col>span{display:block;padding:0 10px 6px;font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark-3)}
.mm-panel .mm-col a{display:block;padding:8px 10px;border-radius:12px;font-size:14.5px;line-height:1.3}
.mm-panel .mm-all{display:flex;align-items:center;justify-content:space-between;margin:8px 4px 0;padding:11px 10px;
  border-radius:12px;font-size:14.5px;font-weight:500;color:var(--on-dark);background:rgba(247,248,245,.05)}
.mm-panel .mm-all svg{width:14px;height:14px;color:var(--lime)}
/* the header keeps its height and gets a solid face while the menu is open */
.menu-open .nav{background:rgba(12,14,15,.96);box-shadow:none}
.menu-open .nav::before{opacity:1}
html.menu-open{overflow:hidden}

/* The caption under the home wheel: what the wheel is, by default; the name
   and line of whatever the pointer is on. It sits right under the wheel — the
   two are one frame, and the text beside them centres on the frame. It keeps
   the height of its longest line (a module's name and two rows), so that text
   never moves as the pointer goes round. */
.wheel-wrap{position:relative}
.wheel-cap{width:100%;margin-top:14px;min-height:82px;display:flex;flex-direction:column;gap:5px;text-align:center}
@media (max-width:1000px){.wheel-cap{min-height:106px}}   /* the longest line runs to three rows there */
.wheel-cap b{display:block;font-size:19px;font-weight:600;letter-spacing:-.018em;color:var(--on-dark)}
.wheel-cap span{max-width:56ch;margin-inline:auto;font-size:15.5px;line-height:1.5;color:var(--on-dark-2)}
.wheel a.sl{cursor:pointer}

/* ---------- wheel: four group plates ---------- */
.wheel .sl .lb{font:600 12px/1 var(--sans);letter-spacing:.04em}
.wheel .sl .lb.lb3{font-size:11px;letter-spacing:.03em}
.wheel .gp{fill:rgba(247,248,245,.05);stroke:rgba(247,248,245,.1);stroke-width:1.2;transition:fill .5s var(--ease),stroke .5s var(--ease)}
.wheel .gr:hover .gp{fill:rgba(247,248,245,.1);stroke:rgba(247,248,245,.28)}
.wheel .gr.on .gp{fill:rgba(185,255,63,.08);stroke:rgba(185,255,63,.45)}
.wheel .sl .sg{fill:rgba(247,248,245,.05);stroke:rgba(247,248,245,.15)}
.wheel .sl.on .sg{fill:rgba(185,255,63,.11);stroke:rgba(185,255,63,.36)}

/* ---------- inner page hero ---------- */
/* a page that opens on a plain light section (FAQ, Support) keeps its first
   line as far under the header as a hero does */
main > .tile.light:first-child > .tile-in{padding-top:clamp(48px,7svh,72px)}
.phero{margin-top:calc(var(--nav-h) * -1)}
/* a module in development is only its first screen and the footer: the hero
   fills the window (the footer starts below the fold), its content centred */
.phero-full{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--gut) * 2)}
.phero-full>.tile-in{width:100%}
.crumb{display:flex;align-items:center;gap:9px;margin-bottom:22px;font-size:13px;color:var(--on-dark-3)}
.crumb a{color:var(--on-dark-2)}
.crumb a:hover{color:var(--on-dark)}
.crumb svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.phero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:48px 64px;align-items:center}


.faq-page .split{grid-template-columns:5fr 7fr}

/* ---------- responsive (multi-page) ---------- */
@media (max-width:1000px){
  .nav-links{display:none}
  .burger{display:block}
  .phero-grid{grid-template-columns:1fr}
  .drop{display:none}
}

/* ---------- lead form (modal) ---------- */
html.modal-open{overflow:hidden}
html.modal-open .page *{animation-play-state:paused!important}
.modal{width:min(560px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;background:transparent;color:var(--on-dark-2);overflow:visible}
.modal::backdrop{background:rgba(7,9,10,.62);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);opacity:0;transition:opacity .4s ease}
.modal.show::backdrop{opacity:1}
.m-panel{position:relative;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;padding:34px 36px 36px;border-radius:30px;border:1px solid transparent;
  background:
    radial-gradient(90% 60% at 100% 0%,rgba(185,255,63,.15),transparent 60%) padding-box,
    radial-gradient(70% 50% at 0% 100%,rgba(85,103,255,.1),transparent 60%) padding-box,
    linear-gradient(180deg,#151819,#0B0D0E) padding-box,
    linear-gradient(160deg,rgba(185,255,63,.55),rgba(247,248,245,.12) 38%,rgba(247,248,245,.05)) border-box;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.85);
  opacity:0;transform:translateY(24px) scale(.96);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.modal.show .m-panel{opacity:1;transform:none}
.m-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:26px}
.m-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:linear-gradient(145deg,#1D2123,#0B0D0E);
  box-shadow:inset 0 0 0 1px rgba(247,248,245,.1),0 14px 34px -12px rgba(185,255,63,.55)}
.m-icon svg{width:32px;height:26px;overflow:visible;--mark:var(--lime)}
.m-close{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;color:var(--on-dark-2);background:rgba(247,248,245,.06);
  transition:background .2s,color .2s,transform .35s var(--ease)}
.m-close:hover{background:rgba(247,248,245,.12);color:var(--on-dark);transform:rotate(90deg)}
.m-close svg{width:16px;height:16px}
.m-success .m-close{position:absolute;top:22px;right:22px}
.m-title{max-width:none;margin:0 0 10px;font-size:32px;line-height:1.05;font-weight:600;letter-spacing:-.035em;color:var(--on-dark)}
.m-sub{max-width:42ch;margin-bottom:28px;font-size:15.5px;color:var(--on-dark-2)}
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-size:13px;font-weight:500;color:var(--on-dark-2)}
.ctl{position:relative}
.field input{width:100%;height:52px;padding:0 44px 0 16px;border-radius:14px;border:1px solid rgba(247,248,245,.12);background:rgba(247,248,245,.04);
  color:var(--on-dark);caret-color:var(--lime);font:400 16px var(--sans);outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .2s,background .2s,box-shadow .25s}
.field input::placeholder{color:rgba(247,248,245,.28)}
.field input:hover{border-color:rgba(247,248,245,.22)}
.field input:focus{border-color:rgba(185,255,63,.75);background:rgba(247,248,245,.06);box-shadow:0 0 0 4px rgba(185,255,63,.12)}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--on-dark);-webkit-box-shadow:0 0 0 100px #181C1D inset;transition:background-color 9999s}
.field.bad input{border-color:rgba(255,112,94,.85);box-shadow:0 0 0 4px rgba(255,112,94,.12)}
.tick{position:absolute;right:14px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;opacity:0;transform:scale(.4);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.7 2.7L14.2 7.4' fill='none' stroke='%230B0D0E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat,var(--lime);
  transition:opacity .25s,transform .45s cubic-bezier(.2,1.5,.35,1)}
.field.ok .tick{opacity:1;transform:none}
.err{display:flex;align-items:center;gap:7px;max-height:0;margin-top:-8px;overflow:hidden;opacity:0;font-size:12.5px;line-height:1.35;color:#FF9A8B;
  transition:max-height .3s var(--ease),margin-top .3s var(--ease),opacity .25s}
.err::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:currentColor}
.field.bad .err{max-height:44px;margin-top:0;opacity:1}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-slot:has(iframe){margin-top:18px;display:flex;justify-content:center}
.m-formerr{margin-top:16px;padding:12px 14px;border-radius:12px;background:rgba(255,112,94,.1);color:#FF9A8B;font-size:14.5px}
.m-submit{width:100%;height:58px;margin-top:26px}
.m-submit .spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(11,13,14,.22);border-top-color:var(--ink);animation:spin .8s linear infinite}
.m-submit.loading{pointer-events:none}
.m-submit.loading .spin{display:block}
.m-submit.loading .arr{display:none}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.m-success{padding:40px 0 2px;text-align:center}
.ok-badge{position:relative;width:96px;height:96px;margin:10px auto 30px}
.ok-badge .core{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,var(--lime-hi),var(--lime) 55%,var(--lime-lo));box-shadow:0 0 0 10px rgba(185,255,63,.12),0 22px 60px -12px rgba(185,255,63,.75);
  animation:okPop .75s cubic-bezier(.2,1.5,.35,1) both}
.ok-badge .core svg{width:44px;height:44px}
.ok-badge .core path{stroke-dasharray:1 1;stroke-dashoffset:1;animation:bDraw .6s var(--ease) .4s forwards}
.ok-badge .ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--lime);opacity:0;animation:okRing 2.6s ease-out .35s infinite}
@keyframes okRing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}}
.ok-badge .ring.r2{animation-delay:1.65s}
.ok-badge .spk{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;fill:var(--lime);opacity:0;animation:burst 1.1s var(--ease) .3s forwards}
@keyframes okPop{from{opacity:0;transform:scale(.3)}}
@keyframes burst{0%{opacity:0;transform:translate(0,0) scale(.3)}30%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1) rotate(90deg)}}
.m-success .m-title{margin-bottom:12px}
.m-success p{max-width:34ch;margin:0 auto 30px;font-size:16.5px}
.m-success p b{font-weight:500;color:var(--on-dark);word-break:break-word}
.m-success .btn{min-width:160px}
@media (max-width:560px){
  .m-panel{padding:24px 20px 24px;border-radius:24px}
  .m-grid{grid-template-columns:1fr;gap:14px}
  .m-title{font-size:28px}
  .m-sub{margin-bottom:22px}
  .m-success .m-close{top:16px;right:16px}
}

/* narrow laptops: the four-column Solutions panel is wider than the space left
   of the screen edge, so it folds into two columns under its own item */
@media (max-width:1200px){
  .drop{width:min(520px,calc(100vw - 40px))}
  .drop-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- home: launch hero, then the wheel in the same tile ---------- */
.home{margin-top:calc(var(--nav-h) * -1)}
.home .hero-top{position:relative;display:flex;min-height:min(840px,calc(100svh - var(--gut) * 2))}
/* The hero fits one screen, badge to button. A laptop browser leaves about
   800px of height (MacBook Pro 14": 1512x820), so the headline, the lead and
   every gap are sized by the window's height as well as its width; on a tall
   screen they reach the same sizes as before. */
.home .hero-top>.tile-in{width:100%;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--nav-h) + clamp(16px,4svh,96px));padding-bottom:clamp(16px,4svh,72px)}
.home h1{max-width:14ch;font-size:clamp(40px,min(5.8vw,8.2svh),82px)}
/* The headline's accent is lit, not underlined — the same lime as a heading's
   accent ("the loop"). The words are split into their own boxes for the rise,
   so the gradient sits on each word rather than on the em. It stays still:
   a moving gradient on the hero's large type would repaint it every frame.
   The module heroes (.phero: "your business") carry the same accent — left
   to the home page alone, theirs went plain white after the rebuild. */
.home h1 em,.phero h1 em{font-style:normal;color:var(--lime-hi)}
.home h1 em .w>span,.phero h1 em .w>span{background:linear-gradient(100deg,#B9FF3F 0%,#EAFFBF 45%,#9DF03A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.home .hero-top .eyebrow{margin-bottom:clamp(14px,3svh,28px)}
.home .hero-top .lead{margin:clamp(14px,3.4svh,30px) 0 clamp(18px,4svh,36px);max-width:56ch;font-size:clamp(15px,2.6svh,18px)}
.home .trust{margin-top:26px}
/* The hero and the wheel are one tile with no seam between them: no rule, the
   glow is not cut at the hero's edge but fades out on its own, and the wheel
   has stars of its own. Two canvases, not one across both: a single canvas the
   height of the whole tile repaints twice the area every frame. */
.home .hero-top .aurora{overflow:visible}
.wheel-block{position:relative}
.wheel-block>.tile-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 64px;align-items:center;
  padding-top:96px;padding-bottom:110px}
.wb-head .lead{margin-top:24px;max-width:46ch}
.wb-head .lead+.lead{margin-top:14px}      /* two paragraphs of one thought */
.wheel-block .wheel{width:min(520px,100%)}
@media (max-width:1000px){
  .wheel-block>.tile-in{grid-template-columns:1fr;padding-top:72px;padding-bottom:80px}
  .wheel-block .wheel-wrap{margin-inline:auto}
  .home .hero-top{min-height:0}
  .home .hero-top>.tile-in{padding-top:calc(var(--nav-h) + clamp(16px,4svh,72px));padding-bottom:clamp(16px,4svh,56px)}
}
/* a phone is narrow before it is short: the headline runs five lines there */
@media (max-width:760px){.home h1{font-size:clamp(34px,min(10.6vw,6.2svh),52px)}}

/* ---------- polish pass ---------- */
.nav-in>.btn{flex:none}                      /* on a 320px phone it shrank below its label */
.nav-in>.btn+.btn{margin-left:-12px}         /* Book a demo and Get started sit as a pair */

/* the spark badge keeps its lime pill on light tiles too */
.light .eyebrow b.spark{color:var(--ink);background:linear-gradient(135deg,var(--lime-hi),var(--lime) 55%,var(--lime-lo));
  box-shadow:0 6px 18px -8px rgba(143,226,42,.9)}
.light .eyebrow b.spark svg{fill:var(--ink)}


/* wheel: softer plates, a lit hub and a second, slow ring */
.wheel .disc{fill:rgba(247,248,245,.016);stroke:rgba(247,248,245,.07)}
.wheel .sl .sg{fill:url(#wh-plate);stroke:rgba(247,248,245,.13);stroke-width:1;
  transition:fill .45s var(--ease),stroke .45s var(--ease)}
.wheel .sl .lb{fill:var(--on-dark-3);transition:fill .35s var(--ease)}
.wheel .sl:focus-visible .sg{fill:url(#wh-plate-on);stroke:rgba(185,255,63,.62)}
.wheel .sl:focus-visible .lb{fill:var(--lime-hi)}
/* hover only where there is a pointer: on a phone a tap leaves :hover stuck,
   and the segment lit up and grew before its page opened */
@media (hover:hover){
  .wheel .sl:hover .sg{fill:url(#wh-plate-on);stroke:rgba(185,255,63,.62)}
  .wheel .sl:hover .lb{fill:var(--lime-hi)}
}
.wheel .sl.on .sg{fill:rgba(185,255,63,.12);stroke:rgba(185,255,63,.38)}
.wheel .sl.on .lb{fill:var(--on-dark)}
.wheel .hub-ring{stroke:rgba(185,255,63,.22)}
.wheel .hub{fill:#0B0D0E}
.wheel .hub-lit{fill:url(#wh-orb)}
.wheel .hub-rim{fill:none;stroke:rgba(185,255,63,.55);stroke-width:1.4}
.wheel .hub-core{opacity:.9}
.wheel .hub-star{fill:#fff}
/* The hub is cut in four: each quarter carries its group's name and faces its
   two segments, and lights up with them. The lit ring turns under the names,
   so it is dimmed to keep them readable. */
.wheel .hub-lit{opacity:.45}
.wheel .hub-cross{fill:none;stroke:rgba(247,248,245,.14);stroke-width:1}
.wheel .hq{cursor:pointer}
.wheel .hq:focus{outline:none}
.wheel .hq-bg{fill:transparent;transition:fill .45s var(--ease)}
.wheel .ql{font:600 13.5px/1 var(--sans);letter-spacing:-.01em;fill:var(--on-dark-2);transition:fill .45s var(--ease)}
.wheel .hq.on .hq-bg{fill:rgba(185,255,63,.09)}
.wheel .hq.on .ql,.wheel .hq:focus-visible .ql{fill:var(--lime-hi)}
@media (hover:hover){
  .wheel .hq:hover .hq-bg{fill:rgba(185,255,63,.09)}
  .wheel .hq:hover .ql{fill:var(--lime-hi)}
}
/* Scale Engine is live: its plate stays grey like the rest, its name is lit
   like a heading's accent, and a faint lime edge says the segment is on */
.wheel .sl.live .sg{stroke:rgba(185,255,63,.42)}
.wheel .sl.live .lb{fill:url(#wh-live)}
.wheel .hub-glow{fill:rgba(185,255,63,.13)}

/* ---------- page art: one animated visual per page ----------
   Only transform and opacity are animated: Safari keeps those on the GPU and
   never repaints the SVG. Everything pauses under prefers-reduced-motion.
   Every colour comes from a token, so the same drawing reads on a dark surface
   and on a light one: .art.on-light flips the palette, the geometry never
   changes. That is what lets the art sit straight on a card instead of inside
   a black box cut into the page. */
.art{position:relative;width:min(440px,100%);margin-left:auto;
  --a-fill:rgba(247,248,245,.1);--a-fill-2:rgba(247,248,245,.07);--a-fill-3:rgba(247,248,245,.14);
  --a-line:rgba(247,248,245,.13);--a-line-2:rgba(247,248,245,.24);
  --a-ink:#F7F8F5;--a-mute:rgba(247,248,245,.5);
  --a-lime:#B9FF3F;--a-lime-text:#D4FF80;
  --a-lime-soft:rgba(185,255,63,.22);--a-lime-line:rgba(185,255,63,.55)}
.art.on-light{--a-fill:rgba(11,13,14,.13);--a-fill-2:rgba(11,13,14,.09);--a-fill-3:rgba(11,13,14,.17);
  --a-line:rgba(11,13,14,.15);--a-line-2:rgba(11,13,14,.26);
  --a-ink:#0B0D0E;--a-mute:rgba(11,13,14,.58);
  --a-lime:#6FB614;--a-lime-text:#33520A;
  --a-lime-soft:rgba(111,182,20,.3);--a-lime-line:rgba(111,182,20,.72)}
.art-svg{display:block;width:100%;height:auto;overflow:visible}
.art text{font:600 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;fill:var(--a-mute)}
@keyframes artSweep{to{transform:rotate(360deg)}}
@keyframes artDraw{to{stroke-dashoffset:0}}

/* Scale Engine — the star takes off over a bar chart (the reference the team
   chose): seven bars rising evenly stand pale green, and the star flies one
   smooth arc over them to above the last; each bar turns full green under a
   flash as it passes, and from the second bar on a label says how much taller
   it is than the first. It plays once and stays — afterwards only the star
   twinkles and its glow breathes. The timings are computed in _build/art.py
   and come in the page head; the look is here. Resting values are the end
   state, which is what reduced motion shows. On the module hero the scene is
   wider than its column and spills into the gap and the padding. */
.phero .art-engine{width:132%;max-width:none;margin:0 0 0 -8%}
@media (max-width:1000px){.phero .art-engine{width:min(480px,100%);margin:8px auto 0}}
.art-engine .en-axis{fill:none;stroke:rgba(247,248,245,.2);stroke-width:1.2}
.art-engine .en-bar{transform-box:fill-box;transform-origin:50% 100%}
.art-engine .en-muted{fill:url(#en-muted)}
.art-engine .en-capm{fill:#A9BE98;opacity:.55}
.art-engine .en-green{fill:url(#en-green)}
.art-engine .en-cap{fill:#8FE22A;opacity:.75}
.art-engine .en-cap.lime{fill:#D4FF80;opacity:1}
.art-engine .en-flash{fill:url(#en-flash);opacity:0}
.art-engine .en-ghost{fill:none;stroke:rgba(247,248,245,.08);stroke-width:1.4;stroke-dasharray:1 7;stroke-linecap:round}
.art-engine .en-tr-glow{fill:none;stroke:rgba(185,255,63,.2);stroke-width:10;stroke-linecap:round}
.art-engine .en-tr-core{fill:none;stroke:#B9FF3F;stroke-width:2.6;stroke-linecap:round}
.art-engine .en-spark{fill:#fff;opacity:0}
.art-engine .en-spark.lime{fill:#D4FF80}
.art-engine .en-halo{opacity:.95;animation:enBreathe 3.2s ease-in-out 4.8s infinite}
.art-engine .en-tw{fill:#fff;transform-box:fill-box;transform-origin:50% 50%;animation:twinkle 5.5s ease-in-out infinite}
.art-engine .en-ring{fill:none;stroke:rgba(185,255,63,.9);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.art-engine .en-tag{opacity:0}
.art-engine .en-tag.keep{opacity:1}
.art-engine .en-tag rect{fill:rgba(185,255,63,.16);stroke:var(--a-lime-line)}
.art-engine .en-tag text{fill:var(--a-lime-text);letter-spacing:.04em}
@keyframes enBreathe{0%,100%{opacity:.95}50%{opacity:.7}}

/* The star, shared: every module's drawing uses the same glow, star and ping,
   so the eight read as one family. A star is white on a dark surface and ink
   on a light one; the glow and the ping are lime on both. Groups that carry a
   star scale around their own centre. */
.art [class*="-star"],.art [class*="-spark"],.art .rd-lit,.art .rd-dim{fill:#FFFFFF;transform-box:fill-box;transform-origin:50% 50%}
.art.on-light [class*="-star"],.art.on-light [class*="-spark"],.art.on-light .rd-lit{fill:var(--a-ink)}
.art [class$="ping"],.art [class*="-ping"]{fill:none;stroke:var(--a-lime);stroke-width:1.3;opacity:0;
  transform-box:fill-box;transform-origin:50% 50%}
@keyframes artPing{0%{opacity:.8;transform:scale(1)}18%{opacity:0;transform:scale(2.8)}100%{opacity:0;transform:scale(2.8)}}
@keyframes artLit{0%{opacity:0;transform:scale(.92)}6%{opacity:1;transform:none}62%{opacity:1;transform:none}72%,100%{opacity:0;transform:none}}

/* Automated launcher — one source row, a comet into every ad account, the
   campaigns there lighting up one after another. 6s loop. */
.art-launcher .al-src rect{fill:var(--a-fill);stroke:var(--a-line-2)}
.art-launcher .al-src .al-row{fill:var(--a-lime-soft);stroke:none;animation:alRow 6s ease-in-out infinite}
.art-launcher .al-line{fill:none;stroke:var(--a-mute);stroke-width:3;stroke-linecap:round}
.art-launcher .al-wires path{fill:none;stroke:var(--a-lime-line);stroke-width:1.2;stroke-dasharray:4 6;opacity:.7}
.art-launcher .al-tiles rect{fill:var(--a-fill-2);stroke:var(--a-line)}
.art-launcher .al-tiles path{fill:none;stroke:var(--a-line-2);stroke-width:3;stroke-linecap:round}
.art-launcher .al-lit rect{fill:var(--a-lime-soft);stroke:var(--a-lime-line);transform-box:fill-box;transform-origin:50% 50%;
  animation:artLit 6s var(--ease) infinite backwards}
.art-launcher .al-comet{opacity:0;animation:alFly 6s var(--ease) infinite backwards}
.art-launcher .al-head{fill:#FFFFFF}
.art-launcher .al-ping{animation:artPing 6s ease-out infinite}
.art-launcher .al-star{animation:twinkle 5.5s ease-in-out infinite}
@keyframes alFly{0%{opacity:0;transform:translate(0,0)}3%{opacity:1}14%{opacity:1;transform:translate(66px,var(--dy))}
  18%,100%{opacity:0;transform:translate(66px,var(--dy))}}
@keyframes alRow{0%,24%{opacity:1}40%,100%{opacity:.45}}

/* AI Creative Factory — the AI star on the winning ad deals a batch of
   variations out of it; the two that perform get a star of their own. 7s. */
.art-factory .af-seed rect{fill:var(--a-fill);stroke:var(--a-lime-line)}
.art-factory .af-seed .af-shot{fill:var(--a-fill-3);stroke:none}
.art-factory .af-play{fill:var(--a-lime)}
.art-factory .af-cap{fill:none;stroke:var(--a-line-2);stroke-width:3;stroke-linecap:round}
.art-factory .af-card{transform-box:fill-box;transform-origin:50% 50%;animation:afDeal 7s var(--ease) infinite backwards}
.art-factory .af-card rect{fill:var(--a-fill-2);stroke:var(--a-line)}
.art-factory .af-card .af-thumb{fill:var(--a-fill-3);stroke:none}
.art-factory .af-card path{fill:none;stroke:var(--a-line-2);stroke-width:3;stroke-linecap:round}
.art-factory .af-win{animation:afWin 7s var(--ease) infinite}
.art-factory .af-win rect{fill:var(--a-lime-soft);stroke:var(--a-lime-line)}
.art-factory .af-ping{animation:artPing 7s ease-out infinite}
.art-factory .af-star{animation:twinkle 5.5s ease-in-out infinite}
@keyframes afDeal{0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.5)}9%{opacity:1;transform:none}
  82%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
@keyframes afWin{0%,34%{opacity:0}42%,80%{opacity:1}90%,100%{opacity:0}}

/* Market Radar — the sweep finds competitor ads; each lights up as a star when
   the beam's edge crosses it (its delay is its angle), and a new one is flagged. */
.art-radar .rd-rings circle,.art-radar .rd-rings path{fill:none;stroke:var(--a-line);stroke-width:1}
.art-radar .rd-sweep{transform-box:view-box;transform-origin:220px 180px;animation:artSweep 6s linear infinite}
.art-radar .rd-sweep .rd-edge{fill:none;stroke:var(--a-lime);stroke-width:1.4;opacity:.8}
.art-radar .rd-dim{fill:var(--a-mute)}
.art-radar .rd-hit{opacity:0;animation:rdHit 6s var(--ease) infinite backwards}
.art-radar .rd-ping{animation:artPing 6s ease-out infinite}      /* no backwards fill: a ping waits unseen */
.art-radar .rd-new{opacity:0;animation:rdHit 6s var(--ease) infinite backwards}
.art-radar .rd-new rect{fill:var(--a-lime-soft);stroke:var(--a-lime-line)}
.art-radar .rd-new text{fill:var(--a-lime-text)}
.art-radar .rd-core{fill:var(--a-lime)}
@keyframes rdHit{0%{opacity:0}3%{opacity:1}45%{opacity:1}70%,100%{opacity:0}}

/* Funnel builder — people fall through the steps, some drop off on the way,
   and the ones who reach "paid" light the star there (1.6s and 2.4s in). 4s. */
.art-funnel .fs{fill:var(--a-fill-2);stroke:var(--a-line)}
.art-funnel .fs.lit{fill:var(--a-lime-soft);stroke:var(--a-lime-line)}
.art-funnel .fn-labels text{fill:var(--a-mute)}
.art-funnel .fn-labels .fn-paid{fill:var(--a-lime-text)}
.art-funnel .fd{opacity:0;animation:fnFall 4s cubic-bezier(.5,0,.8,1) infinite backwards}
.art-funnel .fd-head{fill:#FFFFFF}
.art-funnel .fn-ping{animation:fnPaid 4s ease-out infinite}
.art-funnel .fn-star{animation:twinkle 5.5s ease-in-out infinite}
@keyframes fnFall{0%{opacity:0;transform:translateY(0)}10%{opacity:1}80%{opacity:1;transform:translateY(var(--dy))}
  100%{opacity:0;transform:translateY(calc(var(--dy) + 8px))}}
@keyframes fnPaid{0%,39.9%{opacity:0;transform:scale(1)}40%{opacity:.8;transform:scale(1)}52%{opacity:0;transform:scale(2.6)}
  59.9%{opacity:0;transform:scale(1)}60%{opacity:.8;transform:scale(1)}72%{opacity:0;transform:scale(2.6)}100%{opacity:0;transform:scale(2.6)}}

/* Competitor intelligence — the scanner goes down their funnel; a change
   lights up with a star, and a comet carries it across into yours. 6s. */
.art-compare .cm-col rect{fill:var(--a-fill-2);stroke:var(--a-line)}
.art-compare .cm-tags text{fill:var(--a-mute)}
.art-compare .cm-scan{animation:cmScan 6s linear infinite}
.art-compare .cm-scan path{fill:none;stroke:var(--a-lime);stroke-width:1.4}
.art-compare .cm-flash{opacity:0;animation:cmFlash 6s var(--ease) infinite backwards}
.art-compare .cm-flash rect{fill:var(--a-lime-soft);stroke:var(--a-lime-line)}
.art-compare .cm-ping{animation:artPing 6s ease-out infinite}
.art-compare .cm-fly{opacity:0;animation:cmFly 6s var(--ease) infinite backwards}
.art-compare .cm-head{fill:#FFFFFF}
.art-compare .cm-take{fill:var(--a-lime-soft);stroke:var(--a-lime-line);animation:cmTake 6s var(--ease) infinite backwards}
@keyframes cmScan{0%{opacity:0;transform:translateY(0)}5%{opacity:1}80%{opacity:1;transform:translateY(232px)}
  88%,100%{opacity:0;transform:translateY(232px)}}
@keyframes cmFlash{0%{opacity:0}2%,24%{opacity:1}34%,100%{opacity:0}}
@keyframes cmFly{0%,3%{opacity:0;transform:translateX(0)}5%{opacity:1}12%{opacity:1;transform:translateX(60px)}
  14%,100%{opacity:0;transform:translateX(60px)}}
@keyframes cmTake{0%,11%{opacity:0}14%,62%{opacity:1}72%,100%{opacity:0}}

/* White-Label App Core — a change leaves the admin panel, flies into the
   phone, the screen updates; the version tag stays v1.0. Screens every 3s. */
.art-app .ap-admin rect{fill:var(--a-fill);stroke:var(--a-line-2)}
.art-app .ap-admin .ap-opt{fill:var(--a-fill-3);stroke:none}
.art-app .ap-admin .ap-pick{fill:var(--a-lime-soft);animation:apPick 3s ease-in-out infinite}
.art-app .ap-chip{opacity:0;animation:apChip 3s var(--ease) infinite}
.art-app .ap-chip rect{fill:var(--a-lime)}
.art-app .ap-phone rect{fill:var(--a-fill-2);stroke:var(--a-line-2)}
.art-app .ap-phone rect.ap-notch{fill:var(--a-line-2);stroke:none}
.art-app .ap-ver rect{fill:var(--a-fill);stroke:var(--a-line)}
.art-app .ap-ver text{fill:var(--a-mute)}
.art-app .ap rect{fill:var(--a-fill-3);stroke:none}
.art-app .ap rect.ap-cta{fill:var(--a-lime)}          /* beats the .ap rect fill above */
.art-app .ap rect.ap-sel{fill:var(--a-lime-soft);stroke:var(--a-lime-line)}
.art-app .ap rect.ap-me{fill:var(--a-lime-soft)}
.art-app .ap{opacity:0;animation:apScreen 9s var(--ease) infinite backwards}
.art-app .s2{animation-delay:3s}.art-app .s3{animation-delay:6s}
.art-app .ap-star{animation:twinkle 5.5s ease-in-out infinite}
.art-app .ap-ping{animation:artPing 3s ease-out infinite}
@keyframes apScreen{0%{opacity:0;transform:translateY(8px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes apChip{0%,58%{opacity:0;transform:translateX(0)}64%{opacity:1}92%{opacity:1;transform:translateX(74px)}
  100%{opacity:0;transform:translateX(74px)}}
@keyframes apPick{0%,55%{opacity:.4}62%,95%{opacity:1}100%{opacity:.4}}

/* Growth Analytics — the analytics cursor walks the chart point by point: the
   bar under it lights up and the revenue there pops above it. 9s after the
   line has drawn itself once; 1.5s a point, the move taking the last 3%. */
.art-growth .gr-grid path{fill:none;stroke:var(--a-line);stroke-width:1}
.art-growth .gr-bars rect{fill:var(--a-fill)}
.art-growth .gr-hot rect{fill:var(--a-lime-soft);stroke:var(--a-lime-line);opacity:0;animation:grHot 9s var(--ease) infinite backwards}
.art-growth .gr-line{fill:none;stroke:var(--a-lime);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:artDraw 2.6s var(--ease) .3s forwards}
.art-growth .gr-tag rect{fill:var(--a-lime-soft);stroke:var(--a-lime-line)}
.art-growth .gr-tag text{fill:var(--a-lime-text)}
.art-growth .gr-cross path{fill:none;stroke:var(--a-lime-line);stroke-width:1.2;stroke-dasharray:3 5}
.art-growth .gr-cross,.art-growth .gr-point{opacity:0;animation:grCross 9s var(--ease) 2.4s infinite backwards}
.art-growth .gr-point{animation-name:grPoint}
.art-growth .gr-val{opacity:0;animation:grHot 9s var(--ease) infinite backwards}
.art-growth .gr-val rect{fill:var(--a-lime-soft);stroke:var(--a-lime-line)}
.art-growth .gr-val text{fill:var(--a-lime-text)}
.art-growth .gr-star{animation:twinkle 5.5s ease-in-out infinite}
@keyframes grHot{0%{opacity:0}2%,15%{opacity:1}17%,100%{opacity:0}}
@keyframes grCross{0%{opacity:0;transform:translateX(71px)}2%,13.67%{opacity:1;transform:translateX(71px)}
  16.67%,30.33%{transform:translateX(131px)}33.33%,47%{transform:translateX(191px)}50%,63.67%{transform:translateX(251px)}
  66.67%,80.33%{transform:translateX(311px)}83.33%,96%{opacity:1;transform:translateX(371px)}100%{opacity:0;transform:translateX(371px)}}
@keyframes grPoint{0%{opacity:0;transform:translate(71px,228px)}2%,13.67%{opacity:1;transform:translate(71px,228px)}
  16.67%,30.33%{transform:translate(131px,208.4px)}33.33%,47%{transform:translate(191px,204px)}50%,63.67%{transform:translate(251px,181px)}
  66.67%,80.33%{transform:translate(311px,132px)}83.33%,96%{opacity:1;transform:translate(371px,96px)}100%{opacity:0;transform:translate(371px,96px)}}

/* site.js marks a drawing .off while it is out of view */
.art.off *{animation-play-state:paused!important}
@media (max-width:1000px){.art{margin:0 auto;width:min(420px,100%)}}
/* Without motion every drawing shows its story at rest: the campaigns
   launched, the batch dealt, a find on the radar and in your funnel, the
   first screen, the cursor on the last point. Nothing is left invisible. */
@media (prefers-reduced-motion:reduce){
  .art *{animation:none!important}
  .art-launcher .al-lit rect,.art-factory .af-win,.art-compare .cm-take{opacity:1}
  .art-radar .rd-hit.first,.art-radar .rd-new{opacity:1}
  .art-funnel .fd{opacity:1}
  .art-growth .gr-line{stroke-dashoffset:0}
  .art-growth .gr-cross{opacity:1;transform:translateX(371px)}
  .art-growth .gr-point{opacity:1;transform:translate(371px,96px)}
  .art-growth .gr-val:last-of-type,.art-growth .gr-hot rect:last-child{opacity:1}
  .art-app .ap{opacity:1}
  .art-app .s2,.art-app .s3{display:none}
}

/* ---------- Safari pass ----------
   Backdrop blur is the most expensive thing Safari does while scrolling, so the
   sticky nav uses a smaller radius and sits on its own compositing layer. */
.nav.solid{-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
/* the Solutions panel is centred with translateX(-50%), so it must not be
   flattened onto its own layer here — its backdrop filter already promotes it */
.nav{-webkit-transform:translateZ(0);transform:translateZ(0)}
.drop{-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.modal::backdrop{-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%)}
/* Safari keeps a filtered element off the GPU while it moves: the beam's haze
   and halo are static, the comets are plain circles now. */
.b-haze,.b-halo,.b-core{will-change:opacity}
.art-svg,.wheel svg{-webkit-transform:translateZ(0);transform:translateZ(0)}
@media (prefers-reduced-motion:reduce){
  .aurora i,.wheel .wring,}

/* reduced motion: nothing animates in, but nothing stays hidden either */
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1!important;transform:none!important}
}

/* Module hero: the text column fits one screen, crumb to buttons, like the
   home hero. The copy here is long (White-Label App Core runs to a six-line
   headline at a fixed size), so the headline and every gap are sized by the
   window's height as well as its width; the one paragraph under the headline
   keeps the home page's paragraph size. The text column is the wider one,
   which saves the long headlines a line or two. On a tall screen everything
   reaches the sizes it had before. */
.phero .tile-in{padding-top:calc(var(--nav-h) + clamp(24px,6svh,72px));padding-bottom:clamp(32px,7svh,88px)}
.phero h1{font-size:clamp(34px,min(4.4vw,7.2svh),64px);max-width:none}
.phero .crumb{margin-bottom:clamp(18px,3.4svh,32px)}
.phero .lead{margin:clamp(18px,3.8svh,34px) 0 clamp(24px,4.8svh,44px)}
.phero .trust{margin-top:clamp(22px,3.8svh,34px)}

/* wheel segments: rounded plates that lift out of the ring on hover (with a
   pointer only, as above) or keyboard focus */
.wheel .sl{transition:transform .5s var(--ease)}
.wheel .sl:focus-visible{transform:translate(var(--dx,0),var(--dy,0))}
@media (hover:hover){.wheel .sl:hover{transform:translate(var(--dx,0),var(--dy,0))}}
.wheel .gp{stroke-width:1}
.wheel .sl .sg{stroke-width:1.1}

/* ---------- support: contact form ---------- */
.contact-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 64px;align-items:start}
.contact-card{padding:28px;border-radius:30px;background:linear-gradient(180deg,rgba(247,248,245,.05),rgba(247,248,245,.015));
  --gb:linear-gradient(180deg,rgba(247,248,245,.18),rgba(247,248,245,.03))}
.contact-card .m-grid{margin-bottom:16px}
.field textarea{width:100%;min-height:132px;padding:14px 16px;border-radius:14px;border:1px solid rgba(247,248,245,.12);
  background:rgba(247,248,245,.04);color:var(--on-dark);caret-color:var(--lime);font:400 16px/1.5 var(--sans);resize:vertical;
  outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s,background .2s,box-shadow .25s}
.field textarea::placeholder{color:rgba(247,248,245,.28)}
.field textarea:focus{border-color:rgba(185,255,63,.75);background:rgba(247,248,245,.06);box-shadow:0 0 0 4px rgba(185,255,63,.12)}
.field.bad textarea{border-color:rgba(255,112,94,.85);box-shadow:0 0 0 4px rgba(255,112,94,.12)}
.s-submit{width:100%;height:56px;margin-top:22px}
.s-submit .spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(11,13,14,.22);border-top-color:var(--ink);animation:spin .8s linear infinite}
.s-submit.loading{pointer-events:none}
.s-submit.loading .spin{display:block}
.s-submit.loading .arr{display:none}
.s-done{padding:18px 4px 6px;text-align:center}
.s-done h3{margin:16px 0 8px;color:var(--on-dark)}
.s-done p{font-size:15.5px;color:var(--on-dark-2);max-width:40ch;margin:0 auto}
.s-done p b{font-weight:500;color:var(--on-dark);word-break:break-word}
.ok-badge.sm{position:relative;display:block;width:60px;height:60px;margin:0 auto}
.ok-badge.sm .core{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,var(--lime-hi),var(--lime) 55%,var(--lime-lo));box-shadow:0 0 0 8px rgba(185,255,63,.1)}
.ok-badge.sm .core svg{width:28px;height:28px}
@media (max-width:1000px){.contact-in{grid-template-columns:1fr}}
@media (max-width:560px){.contact-card{padding:20px}}

/* ---------- one gap between a heading and the text under it ---------- */
h1 + .lead,h2 + .lead,.sec-head h2 + .lead{margin-top:30px}
.sticky .lead,.ai-top .lead,.wb-head .lead{margin-top:30px}
.cta .lead{margin:30px 0 40px}
@media (max-width:760px){
  h1 + .lead,h2 + .lead,
  .phero .lead,.sticky .lead,.ai-top .lead,.wb-head .lead,
  .cta .lead{margin-top:22px}
}

.bt{position:relative;display:flex;flex-direction:column;border-radius:30px;overflow:hidden}
.light .bt{--bt-card:#F7F8F3;background:linear-gradient(180deg,#FFFFFF,#F4F6F0);
  box-shadow:inset 0 0 0 1px rgba(11,13,14,.08),0 40px 80px -55px rgba(11,13,14,.5)}
.dark .bt{--bt-card:#101314;background:linear-gradient(160deg,rgba(247,248,245,.06),rgba(247,248,245,.014) 62%);
  box-shadow:inset 0 0 0 1px rgba(247,248,245,.09)}
.bt h3{font-size:23px;letter-spacing:-.024em}
.light .bt h3{color:var(--ink)}
.dark .bt h3{color:var(--on-dark)}

/* A tile that inverts against its section. The surface carries its own
   colours, stated on the tile and not on the section, so the same two classes
   work wherever a bento needs one loud tile: bt-invert on a light section,
   bt-accent on a dark one. */
.bt.bt-invert{color:var(--on-dark-2);background:radial-gradient(120% 130% at 80% 0%,#181C1D,#0B0D0E 62%);
  box-shadow:inset 0 0 0 1px rgba(247,248,245,.1)}
.bt.bt-accent{color:#243007;background:linear-gradient(165deg,#D6FF86,#A2EE2C);box-shadow:none}
.bt.bt-invert h2,.bt.bt-invert h3,.bt.bt-invert .k{color:var(--on-dark)}
/* an accent in a dark tile is lit like the headings' accents ("the loop") */
.bt.bt-invert h3 em{font-style:normal;background:linear-gradient(100deg,#B9FF3F 0%,#EAFFBF 45%,#9DF03A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bt.bt-accent h2,.bt.bt-accent h3{color:#16210A}
.bt.bt-accent .k{color:#3D5211}
.bt.bt-invert p{color:var(--on-dark-2)}
.bt.bt-accent p{color:#2C3B0B}
.bt.bt-invert .trust li{color:var(--on-dark-2)}
.bt.bt-invert .trust svg{stroke:var(--lime)}
.bt.bt-accent .trust li{color:#2C3B0B}
.bt.bt-accent .trust svg{stroke:#16210A}
/* the pill's drop glow would be clipped by the tile, so inside one the button
   carries its edge only */
.bt .btn.solid{height:50px;padding:0 24px;font-size:15.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.1)}
.bt .btn.solid:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.1),0 0 0 5px rgba(185,255,63,.14)}
.bt.bt-accent .btn.solid{color:var(--on-dark);background:#12180B;box-shadow:none}
.bt.bt-accent .btn.solid:hover{background:#0B0D0E;box-shadow:0 0 0 5px rgba(11,13,14,.12)}

/* phones: the header keeps the logo, Get started and the burger — Book a demo
   lives in the menu behind it, where it does not wrap onto two lines */
@media (max-width:760px){
  .nav-in>.nav-demo{display:none}
  .nav-in>.nav-demo+.btn{margin-left:auto}
}
@media (max-width:420px){
  .nav-in{gap:12px}                          /* logo, Get started and the burger fit a 320px phone unsqueezed */
  .nav-in>.brand{flex:none}
  .nav-in>.btn{padding:0 16px;font-size:13.5px}
}


/* ---------- legal pages (terms, privacy, cookies, dpa) ----------
   One light tile: the title, the effective date and tabs to the other
   documents; then a sticky contents list beside the text. The text is the
   lawyers' markdown turned into HTML by _build/legal.py — a reading page,
   so no reveal on the long article (it is taller than any window, and the
   reveal waits for a share of it to be on screen). */
/* the tabs sit above the title, so switching documents never moves them (under
   a two-line title they jumped); the title keeps to one line on a desktop */
.legal-head h1{max-width:none}
.legal-date{margin-top:18px;font-size:14.5px;color:var(--slate)}
.legal-tabs{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px}
.legal-tabs a{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--text-l);
  background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(11,13,14,.08);transition:background .25s,color .25s}
.legal-tabs a:hover{background:#fff;color:var(--ink)}
.legal-tabs a[aria-current]{background:var(--ink);color:var(--on-dark);box-shadow:none}
/* switching documents happens in place (site.js): one dark pill slides from the
   old tab to the new one, the labels ride above it */
.legal-tabs a span{position:relative;z-index:2}
.legal-pill{position:absolute;left:0;top:0;z-index:1;width:0;height:0;border-radius:999px;background:var(--ink);pointer-events:none;
  opacity:0;transition:transform .45s var(--ease),width .45s var(--ease),height .45s var(--ease)}
.legal-tabs.pill-on .legal-pill{opacity:1}
.legal-tabs.pill-on a[aria-current]{background:transparent}
/* the label the pill leaves turns dark at once; the one it goes to turns light
   a beat later, once the pill is under it — so neither is ever light on light */
.legal-tabs.pill-on a{transition:background .25s,color .12s}
.legal-tabs.pill-on a[aria-current]{transition:background .25s,color .18s .14s}
.legal-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px 72px;align-items:start;margin-top:56px;padding-top:48px;border-top:1px solid rgba(11,13,14,.08)}
.legal-toc{position:sticky;top:124px;display:flex;flex-direction:column;gap:2px;max-height:calc(100svh - 148px);overflow-y:auto;font-size:14px;line-height:1.4}
.legal-toc-h{margin-bottom:10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.legal-toc a{display:grid;grid-template-columns:26px 1fr;padding:6px 0;color:var(--text-l);transition:color .25s}
.legal-toc a span{color:var(--slate);font-variant-numeric:tabular-nums}
.legal-toc a:hover,.legal-toc a.on{color:var(--ink)}
.legal-toc a.on span{color:var(--ink)}
.legal-toc a.on{font-weight:500}
.legal-doc{max-width:72ch;font-size:16.5px;line-height:1.7;color:var(--text-l)}
.legal-doc p{margin:0 0 16px}
.legal-doc h2{max-width:none;margin:56px 0 18px;font-size:24px;line-height:1.3;letter-spacing:-.02em}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{margin:32px 0 12px;font-size:18px;line-height:1.4}
.legal-doc strong{font-weight:600;color:var(--ink)}
.legal-doc a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(11,13,14,.28);text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere;transition:text-decoration-color .25s}
.legal-doc a:hover{text-decoration-color:var(--ink)}
.legal-doc hr{margin:56px 0;border:0;border-top:1px solid rgba(11,13,14,.1)}
.legal-doc .table-wrap{margin:24px 0 28px;overflow-x:auto;border-radius:16px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(11,13,14,.08)}
.legal-doc table{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px;line-height:1.6}
.legal-doc th,.legal-doc td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(11,13,14,.07)}
.legal-doc th{font-weight:600;color:var(--ink);background:rgba(11,13,14,.03)}
.legal-doc tr:last-child td{border-bottom:0}
.legal-doc td:first-child{width:26%;font-weight:500;color:var(--ink)}
@media (max-width:1000px){
  .legal-grid{grid-template-columns:minmax(0,1fr);margin-top:40px;padding-top:36px}   /* minmax: a wide table scrolls in its box, not the column past the screen */
  .legal-toc{display:none}               /* the tabs stay; the contents list is a desktop aside */
}
@media (max-width:760px){
  .legal-tabs{margin-bottom:28px}
  .legal-tabs a{height:36px;padding:0 14px;font-size:14px}
  .legal-doc{font-size:16px}
  .legal-doc h2{margin-top:44px;font-size:21px}
}
@media print{
  .nav,.mobmenu,.legal-tabs,.legal-toc,.foot-tile,.modal{display:none!important}
  .legal-grid{display:block;margin:0;padding:0;border:0}
  .tile{border-radius:0;background:none}
}