/* ==========================================================================
   Prime Looops
   Design language: floating pill bars and large rounded containers (One UI),
   rim light + pointer-following glow + widget grid (OriginOS),
   frosted surfaces, contour glow and aurora light (ColorOS).

   Performance rules this file keeps to:
   - no full-screen fixed layers, no blend modes, no animated backgrounds
   - backdrop blur only on small surfaces (nav bar, hero capsule, mobile menu)
   - sections below the fold are skipped by the renderer until needed (.cv)
   ========================================================================== */

@font-face{font-family:"Outfit";src:url("../fonts/outfit-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  --a1:#2cf2d6; --a2:#6c63ff; --a3:#ff4f8b;
  --bg:#050609; --bg-2:#0b0d13;
  --ink:#f4f5f7; --ink-2:rgba(244,245,247,.74); --ink-3:rgba(244,245,247,.58);
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.06);
  --glass:rgba(255,255,255,.035); --glass-hi:rgba(255,255,255,.075);
  --well:rgba(0,0,0,.3);
  --rim:rgba(255,255,255,.7);
  --bar:rgba(12,14,20,.72);
  --shadow:0 34px 80px -36px rgba(0,0,0,.85);
  --btn-bg:#f4f5f7; --btn-ink:#07080b;
  --glow-a:26%; --glow-b:15%; --no:#ff5a6a;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --r-xl:36px; --r-lg:28px; --r-md:20px; --r-sm:14px;
  --gut:clamp(18px,4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --sans:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1)}
}
html[data-theme="light"]{
  --a1:#00b89f; --a2:#5a4bff; --a3:#ff2e7e;
  --bg:#eceef3; --bg-2:#f7f8fb;
  --ink:#0a0c11; --ink-2:rgba(10,12,17,.76); --ink-3:rgba(10,12,17,.62);
  --line:rgba(10,12,17,.12); --line-2:rgba(10,12,17,.07);
  --glass:rgba(255,255,255,.55); --glass-hi:rgba(255,255,255,.9);
  --well:rgba(10,14,30,.05);
  --rim:rgba(255,255,255,1);
  --bar:rgba(255,255,255,.78);
  --shadow:0 30px 70px -38px rgba(40,50,100,.4);
  --btn-bg:#0a0c11; --btn-ink:#fff;
  --glow-a:20%; --glow-b:13%; --no:#e5283f;
  --noise:none;
  color-scheme:light;
}

/* ── Reset / base ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;scrollbar-color:var(--line) transparent}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.5;font-weight:350;color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;isolation:isolate;background:var(--noise),var(--bg)}
/* Ambient light: one soft glow per section, painted once with that section. Nothing here is
   fixed, animated or sized from the page height, so scrolling never repaints it. */
.hero,.section,.footer{position:relative;isolation:isolate}
.loop{overflow-x:clip}
.hero::before,.section::before,.footer::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:4%;width:min(96vw,1100px);height:min(92%,1000px);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--gc,var(--a2)) var(--gs,var(--glow-b)),transparent),transparent)}
.hero::before{--gs:var(--glow-a);left:-18%;top:-24%;height:min(112%,1100px)}
#collabs::before{--gc:var(--a1);right:-24%}
#stuck::before{--gc:var(--a3);left:-26%}
#loop::before{--gs:var(--glow-a);right:-22%;top:10%}
#services::before{--gc:var(--a1);left:-24%}
#process::before{--gc:var(--a3);right:-24%}
#principles::before{left:-26%}
#faq::before{--gc:var(--a1);right:-26%}
#brands::before{--gs:var(--glow-a);left:-22%}
#contact::before{display:none}
.footer::before{--gc:var(--a3);left:18%;top:20%;height:80%}
h1,h2,h3,h4,p,ul,ol,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
svg,img{display:block}
img{max-width:100%}
sup{font-family:var(--mono);font-size:.62em;vertical-align:top;position:relative;top:-.1em;margin-left:.15em;letter-spacing:0;color:var(--ink-3);font-weight:400}
::selection{background:var(--a2);color:#fff}
:focus-visible{outline:2px solid var(--a1);outline-offset:3px;border-radius:8px}

.wrap{width:min(100% - 2*var(--gut),1320px);margin-inline:auto}
.mono{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.sprite{position:absolute}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--btn-bg);color:var(--btn-ink);padding:12px 18px;border-radius:999px;transition:top .3s}
.skip:focus{top:16px}
.ic{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.link{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.22em;transition:text-decoration-color .3s}
.link:hover{text-decoration-color:currentColor}
.grad{font-style:normal;padding-right:.05em;background:linear-gradient(100deg,var(--a1),var(--a2) 55%,var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{height:28px;padding:0 12px;display:inline-flex;align-items:center;border-radius:999px;background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2);font-size:.6875rem;white-space:nowrap}
.tag--pin{position:absolute;top:16px;left:16px}

/* The ∞ glyph: sized and weighted to sit in a line of Outfit as two fused o's */
.oo{display:inline-block;height:.503em;width:auto;aspect-ratio:1043/503;vertical-align:-.009em;margin:0 .03em;overflow:visible;fill:none;stroke-width:128;stroke-linejoin:round}

/* sections below the fold are not laid out or painted until they come near the screen */
/* Each estimate is the section's height without its own padding, measured at three widths, so the
   scrollbar barely moves as sections arrive. They are still estimates: the script re-checks where
   an in-page link landed and corrects it. */
.cv{content-visibility:auto;contain-intrinsic-size:auto 900px}
#stuck{contain-intrinsic-size:auto 1250px}#collabs{contain-intrinsic-size:auto 3360px}#services{contain-intrinsic-size:auto 1770px}#brands{contain-intrinsic-size:auto 1170px}#process{contain-intrinsic-size:auto 670px}#principles{contain-intrinsic-size:auto 1080px}#faq{contain-intrinsic-size:auto 650px}#call{contain-intrinsic-size:auto 870px}#contact{contain-intrinsic-size:auto 760px}.footer{contain-intrinsic-size:auto 620px}
@media (max-width:1100px){#stuck{contain-intrinsic-size:auto 1320px}#collabs{contain-intrinsic-size:auto 3480px}#services{contain-intrinsic-size:auto 2140px}#brands{contain-intrinsic-size:auto 990px}#process{contain-intrinsic-size:auto 760px}#principles{contain-intrinsic-size:auto 790px}#faq{contain-intrinsic-size:auto 880px}#call{contain-intrinsic-size:auto 580px}#contact{contain-intrinsic-size:auto 1030px}.footer{contain-intrinsic-size:auto 590px}}
@media (max-width:620px){#stuck{contain-intrinsic-size:auto 1530px}#collabs{contain-intrinsic-size:auto 3620px}#services{contain-intrinsic-size:auto 3270px}#brands{contain-intrinsic-size:auto 1120px}#process{contain-intrinsic-size:auto 870px}#principles{contain-intrinsic-size:auto 1010px}#faq{contain-intrinsic-size:auto 830px}#call{contain-intrinsic-size:auto 580px}#contact{contain-intrinsic-size:auto 1170px}.footer{contain-intrinsic-size:auto 550px}}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:48px;padding:0 1.35em;border-radius:999px;font-weight:500;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;position:relative;transform:translate(var(--tx,0),var(--ty,0)) scale(var(--s,1));transition:transform .6s var(--spring),box-shadow .45s var(--ease),background .3s,color .3s;-webkit-tap-highlight-color:transparent}
.btn:active{--s:.955;transition-duration:.12s}
.btn .ic{transition:transform .5s var(--spring)}
.btn:hover .ic{transform:translateX(3px)}
.btn--sm{height:42px;font-size:.9375rem;padding:0 1.15em}
.btn--lg{height:58px;font-size:1.0625rem;padding:0 1.6em}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn--primary{background:var(--btn-bg);color:var(--btn-ink)}
.btn--primary::after{content:"";position:absolute;inset:-3px;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:conic-gradient(from var(--ang),var(--a1),var(--a2),var(--a3),var(--a1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover){.btn--primary:hover::after{opacity:1;animation:turn 2.4s linear infinite}}
@keyframes turn{to{--ang:360deg}}
.btn--primary:hover{box-shadow:-14px 6px 34px -10px color-mix(in srgb,var(--a1) 75%,transparent),0 8px 34px -10px color-mix(in srgb,var(--a2) 80%,transparent),14px 6px 34px -10px color-mix(in srgb,var(--a3) 75%,transparent)}
.btn--ghost{box-shadow:inset 0 0 0 1px var(--line);background:color-mix(in srgb,var(--bg-2) 70%,transparent)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.btn[disabled]{opacity:.6;pointer-events:none}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:background .3s,color .3s,transform .6s var(--spring)}
.icon-btn:hover{background:var(--glass-hi);color:var(--ink)}
.icon-btn:active{transform:scale(.9);transition-duration:.12s}
.icon-btn .ic{grid-area:1/1;transition:transform .7s var(--spring),opacity .3s}

/* ── Glass: rim light that follows the pointer ──────────────────────────── */
.glass{position:relative;background:linear-gradient(180deg,var(--glass-hi),var(--glass));border-radius:var(--r-lg);box-shadow:var(--shadow);isolation:isolate}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:radial-gradient(460px circle at var(--mx,22%) var(--my,-8%),var(--rim),transparent 46%),linear-gradient(var(--line),var(--line));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
[data-glow]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .6s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--a2) 26%,transparent),transparent 65%)}
@media (hover:hover){[data-glow]:hover::after{opacity:1}}

/* ── Navigation: floating pill bar ──────────────────────────────────────── */
.nav{position:fixed;inset:calc(14px + env(safe-area-inset-top,0px)) 0 auto 0;z-index:50;display:flex;justify-content:center;pointer-events:none}
.nav__bar{pointer-events:auto;position:relative;width:min(100% - 28px,1120px);height:62px;padding:0 10px 0 24px;display:flex;align-items:center;justify-content:space-between;border-radius:999px;background:var(--bar);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 0 0 1px var(--line),0 18px 44px -24px rgba(0,0,0,.6);transition:width .7s var(--ease),height .5s var(--ease)}
.nav.is-stuck .nav__bar{width:min(100% - 28px,960px);height:56px}
.brand{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:1.3125rem;letter-spacing:-.045em;white-space:nowrap;line-height:1}
.nav__links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2px}
.nav__links::before{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--w,0px);border-radius:999px;background:var(--glass-hi);opacity:var(--o,0);transform:translateX(var(--x,0px));transition:transform .6s var(--spring),width .6s var(--spring),opacity .3s}
.nav__links a{position:relative;padding:9px 15px;border-radius:999px;font-size:.9375rem;font-weight:400;color:var(--ink-2);transition:color .3s}
.nav__links a:hover,.nav__links a.is-here{color:var(--ink)}
/* how far down the page you are, drawn along the bottom edge of the bar */
.nav__bar::after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));transform:scaleX(0);transform-origin:left}
@supports (animation-timeline:scroll()){.nav__bar::after{animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}
.nav__end{display:flex;align-items:center;gap:6px}
.ic--moon{opacity:0;transform:rotate(-90deg) scale(.4)}
html[data-theme="light"] .ic--sun{opacity:0;transform:rotate(90deg) scale(.4)}
html[data-theme="light"] .ic--moon{opacity:1;transform:none}
.nav__menu{display:none}
.ic--close{opacity:0;transform:rotate(-90deg) scale(.4)}
.menu-open .ic--open{opacity:0;transform:rotate(90deg) scale(.4)}
.menu-open .ic--close{opacity:1;transform:none}

.menu{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:112px var(--gut) max(28px,env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
.menu-open .menu{opacity:1;visibility:visible;transition-delay:0s}
.menu__links{display:grid}
.menu__links a{display:flex;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--line-2);font-size:clamp(2rem,9vw,3rem);font-weight:500;letter-spacing:-.04em;line-height:1.05;opacity:0;transform:translateY(22px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.menu__links a .mono{color:var(--ink-3)}
.menu-open .menu__links a{opacity:1;transform:none}
.menu-open .menu__links a:nth-child(1){transition-delay:.04s}.menu-open .menu__links a:nth-child(2){transition-delay:.08s}.menu-open .menu__links a:nth-child(3){transition-delay:.12s}.menu-open .menu__links a:nth-child(4){transition-delay:.16s}.menu-open .menu__links a:nth-child(5){transition-delay:.2s}.menu-open .menu__links a:nth-child(6){transition-delay:.24s}
.menu .btn{width:100%}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{min-height:min(100svh,1000px);display:flex;flex-direction:column;padding-top:clamp(112px,15vh,150px)}
.hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.pill{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 16px 0 13px;border-radius:999px;background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--line);font-size:.875rem;color:var(--ink-2);white-space:nowrap}
.pill i{width:1px;height:14px;background:var(--line)}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--a1);box-shadow:0 0 12px var(--a1)}
.hero__title{font-size:clamp(3.2rem,7.7vw,9rem);line-height:.92;letter-spacing:-.055em;font-weight:600;margin:.26em 0 .2em}
.hero__title .oo{margin:0 -.06em 0 .05em}
.hero__sub{max-width:35em;font-size:clamp(1.0625rem,1.45vw,1.3125rem);line-height:1.45;color:var(--ink-2);text-wrap:balance}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(24px,3.4vh,36px)}
.hero__stage{position:relative;z-index:0;flex:1;min-height:clamp(250px,38vh,420px);display:grid;place-items:center}
@supports (animation-timeline:scroll()){
  .hero__stage{animation:stageOut linear both;animation-timeline:scroll(root);animation-range:0 85vh}
}
@keyframes stageOut{to{opacity:.3;transform:translateY(-5%) scale(.95)}}
/* the ribbon is drawn on a canvas only as large as the ribbon itself */
.hero__ribbon{position:absolute;left:50%;top:50%;width:min(100vw,calc(var(--a,500px)*2.5));height:calc(var(--a,500px)*1.34);transform:translate(-50%,-50%);pointer-events:none}
.hero__lobe{position:absolute;top:50%;left:50%;transform:translate(calc(-50% + var(--x,0px)),-50%);color:var(--ink-3);letter-spacing:.2em;font-size:.6875rem}

/* the capsule at the crossing: one surface that morphs between states */
.island{position:relative;z-index:2;height:58px;width:290px;max-width:calc(100vw - 32px);border-radius:999px;overflow:hidden;background:var(--bar);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -22px rgba(0,0,0,.7),0 0 70px -14px color-mix(in srgb,var(--a2) 70%,transparent);transition:width .85s var(--spring)}
.island__item{position:absolute;inset:0 auto 0 0;display:flex;align-items:center;gap:12px;padding:0 20px 0 9px;white-space:nowrap;opacity:0;transform:translateY(16px) scale(.96);transition:opacity .3s,transform .6s var(--ease)}
.island__item.is-on{opacity:1;transform:none;transition-delay:.14s}
.island__item.is-off{transform:translateY(-16px) scale(.96)}
.island__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2))}
.island__item:nth-child(2) .island__ic{background:linear-gradient(135deg,var(--a2),var(--a3))}
.island__item:nth-child(3) .island__ic{background:linear-gradient(135deg,var(--a3),#ffb347)}
.island__item:nth-child(4) .island__ic{background:linear-gradient(135deg,#ffb347,var(--a1))}
.island__ic--live{background:#ff3b4e!important}
.island__ic .ic{width:19px;height:19px;stroke-width:2}
.island__tx{font-size:.9688rem;font-weight:450}
.island__tag{color:var(--ink-3);font-size:.6875rem;padding-left:4px}

/* ── Brands ─────────────────────────────────────────────────────────────── */
.brands{position:relative;z-index:1;border-block:1px solid var(--line-2);background:color-mix(in srgb,var(--bg) 62%,transparent)}
.brands__in{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,64px);padding-block:clamp(22px,2.6vw,34px)}
.brands__label{color:var(--ink-3);max-width:9em;line-height:1.5}
.brands__list{display:grid;grid-auto-flow:column;grid-auto-columns:auto}
.brands__list li{display:grid;gap:5px;justify-items:center;padding:6px clamp(10px,1.5vw,24px);border-left:1px solid var(--line-2);font-size:clamp(1.05rem,2vw,1.875rem);font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--ink-2);white-space:nowrap;transition:color .3s}
.brands__list span{font-size:.625rem;letter-spacing:.08em;color:var(--ink-3)}
.brands__list li:hover{color:var(--ink)}

/* ── Sections ───────────────────────────────────────────────────────────── */
.section{padding:clamp(72px,9.6vw,138px) 0}
#stuck{padding-bottom:clamp(40px,5vw,72px)}
.head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:clamp(20px,2.4vw,32px);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.eyebrow{grid-column:1/-1;display:flex;align-items:center;gap:12px;color:var(--ink-3)}
.eyebrow span{display:inline-grid;place-items:center;height:26px;padding:0 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.head__title{grid-column:1/span 8;font-size:clamp(2.7rem,6.5vw,6.125rem);line-height:.95;letter-spacing:-.048em;font-weight:500;text-wrap:balance}
.head__lead{grid-column:9/-1;font-size:clamp(1.0625rem,1.3vw,1.1875rem);color:var(--ink-2);padding-bottom:.5em;text-wrap:pretty}
.head--stack{display:block;margin-bottom:0}
.head--stack>*+*{margin-top:clamp(20px,2.4vw,30px)}
.head--stack .head__lead{max-width:26em;padding:0}
.sub{font-size:clamp(1.75rem,3.2vw,2.75rem);font-weight:500;letter-spacing:-.04em;line-height:1.03;text-wrap:balance}
.footnote{margin-top:26px;font-size:.8125rem;line-height:1.55;color:var(--ink-3);max-width:62em}
.footnote sup{font-size:.85em;top:0;margin:0 .15em 0 0;vertical-align:baseline}
.footnote a{text-decoration:underline;text-underline-offset:.2em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{height:32px;padding:0 14px;display:inline-flex;align-items:center;border-radius:999px;font-size:.875rem;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);background:var(--glass)}

/* ── 01 Paid collabs ────────────────────────────────────────────────────── */
.avatars{display:flex;align-items:center}
.avatars img{width:62px;height:62px;border-radius:50%;object-fit:cover;margin-left:-14px;box-shadow:0 0 0 3px var(--bg-2);background:var(--glass-hi);transition:transform .7s var(--spring)}
.avatars img:first-child{margin-left:0}
.avatars span{margin-left:14px;color:var(--ink-3);white-space:nowrap}

/* the network */
.netx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,5vw,88px);align-items:center}
.netx__copy{display:grid;gap:clamp(18px,2.2vw,28px);justify-items:start}
.netx__title{display:grid}
.netx__num{font-size:clamp(5rem,12.6vw,11.6rem);font-weight:600;letter-spacing:-.07em;line-height:.84;font-variant-numeric:tabular-nums;white-space:nowrap}
.netx__num span{padding-right:.05em;background:linear-gradient(100deg,var(--a1),var(--a2) 55%,var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
.netx__line{font-size:clamp(2rem,4.3vw,4rem);font-weight:500;letter-spacing:-.045em;line-height:1;margin-top:.25em;text-wrap:balance}
.netx__lead{font-size:clamp(1.0625rem,1.3vw,1.1875rem);color:var(--ink-2);max-width:31em}
.net__ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--a1)}
/* four real figures, in a two-by-two */
.tally{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-2)}
.tally li{display:grid;gap:4px;padding:clamp(14px,1.7vw,22px) 0;border-bottom:1px solid var(--line-2)}
.tally li:nth-child(even){padding-left:clamp(14px,2vw,28px);border-left:1px solid var(--line-2)}
.tally b{font-size:clamp(2rem,3.9vw,3.5rem);font-weight:500;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums}
.tally span{color:var(--ink-2)}
.tally__k{display:flex;align-items:center;gap:9px;color:var(--ink-3);font-size:.6875rem}
/* how creators get into a collab */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);margin-top:clamp(28px,4vw,56px)}
.trio li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:2px;padding:clamp(16px,1.8vw,22px);border-radius:22px;background:linear-gradient(180deg,var(--glass-hi),var(--glass));box-shadow:inset 0 0 0 1px var(--line-2)}
.trio .net__ic{grid-row:span 2}
.trio h3{font-size:1.1875rem;font-weight:550;letter-spacing:-.02em;line-height:1.3}
.trio p{color:var(--ink-2);font-size:.9688rem;line-height:1.4}

/* a wall of real collab videos: the columns drift slowly, and each card opens its video on TikTok */
.wall{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;height:clamp(460px,46vw,640px);overflow:hidden}
.wall::before,.wall::after{content:"";position:absolute;left:0;right:0;z-index:2;height:15%;pointer-events:none}
.wall::before{top:0;background:linear-gradient(var(--bg),transparent)}
.wall::after{bottom:0;background:linear-gradient(transparent,var(--bg))}
.wall__col{display:grid;gap:12px;align-content:start}
.wall__col--b{transform:translateY(-18%)}
.cr{position:relative;display:block;aspect-ratio:9/14;border-radius:20px;overflow:hidden;background:var(--well);color:#fff}
.cr>img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cr::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(rgba(0,0,0,.28),transparent 26%,transparent 55%,rgba(0,0,0,.78));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.cr__who{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;font-size:.8125rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr__views{position:absolute;top:10px;left:10px;z-index:1;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 7px;border-radius:999px;background:rgba(8,9,13,.62);font-size:.5625rem}
.cr__views .ic{width:10px;height:10px}
@media (hover:hover){.cr:hover>img{transform:scale(1.06)}}
.cr:focus-visible{outline-offset:-3px}
@media (min-width:1101px){
  .netx{perspective:1600px}
  .wall{transform:rotateY(-9deg) rotateX(3deg);transform-origin:left center}
}
/* every column holds its cards twice, so the drift loops without a seam */
.wall.is-live .wall__col{padding-bottom:12px;animation:drift 52s linear infinite}
.wall.is-live .wall__col--b{transform:none;animation-direction:reverse}
@keyframes drift{to{transform:translateY(-50%)}}
@media (hover:hover){.wall:hover .wall__col{animation-play-state:paused}}
.wall__cap{position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px;border-radius:999px;white-space:nowrap;background:var(--bar);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:.625rem}
.wall__cap::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--a1);box-shadow:0 0 10px var(--a1)}

/* why it matters: one large comparison, centred, with the paid column raised */
.why{display:grid;justify-items:center;gap:clamp(30px,4vw,56px);margin-top:clamp(64px,8.6vw,122px)}
.why__head{display:grid;gap:18px;justify-items:center;text-align:center;max-width:50em}
.why__head p{color:var(--ink-2);max-width:43em;text-wrap:pretty}
.vsx{width:min(100%,1140px);display:grid;gap:clamp(22px,3vw,40px);padding:clamp(14px,2.6vw,36px);border-radius:var(--r-xl)}
.vsx__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4.4vw,72px);align-items:center;padding:clamp(4px,1vw,14px) clamp(4px,1vw,14px) 0}

/* the switch */
.tog{display:grid;gap:clamp(14px,1.9vw,24px);justify-items:center;text-align:center}
.tog__cap{color:var(--ink-3)}
.tog__row{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.7vw,22px)}
.tog__opt{cursor:pointer;padding:12px 2px;font-size:clamp(1.0625rem,1.85vw,1.5625rem);font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--ink-3);transition:color .4s}
.tog__opt input{position:absolute;opacity:0;pointer-events:none}
.tog__opt:hover{color:var(--ink-2)}
.tog__opt:has(input:checked){color:var(--ink)}
.tog__opt:has(input:focus-visible) span{outline:2px solid var(--a1);outline-offset:6px;border-radius:8px}
.tog__sw{--w:clamp(84px,9vw,128px);flex:none;width:var(--w);height:calc(var(--w)/1.9);padding:6px;border-radius:999px;background:var(--line);box-shadow:inset 0 0 0 1px var(--line);transition:background .5s,box-shadow .5s;-webkit-tap-highlight-color:transparent}
.tog__sw i{display:block;height:100%;aspect-ratio:1;border-radius:50%;background:var(--ink-2);box-shadow:0 4px 12px -2px rgba(0,0,0,.5);transition:transform .75s var(--spring),background .4s}
.tog__sw:active i{scale:.92}
.vsx:is(.is-paid,:has(#vsOn:checked)) .tog__sw{background:linear-gradient(100deg,var(--a1),var(--a2) 55%,var(--a3));box-shadow:0 0 44px -8px color-mix(in srgb,var(--a2) 90%,transparent)}
.vsx:is(.is-paid,:has(#vsOn:checked)) .tog__sw i{background:#fff;transform:translateX(calc(var(--w) - var(--w)/1.9))}
.tog__say{display:grid;max-width:25em;color:var(--ink-2);text-wrap:balance}
.tog__say span{grid-area:1/1;transition:opacity .4s,transform .6s var(--ease),visibility 0s}
.say--on,.vsx:is(.is-paid,:has(#vsOn:checked)) .say--off{opacity:0;visibility:hidden;transform:translateY(10px)}
.vsx:is(.is-paid,:has(#vsOn:checked)) .say--on{opacity:1;visibility:visible;transform:none}

/* the month: scattered days on one side of the switch, the same four days every week on the other */
.month{order:-1}
.month__cap{display:flex;justify-content:space-between;margin-bottom:14px;color:var(--ink-3);font-size:.6875rem}
.month__days,.month__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(5px,.7vw,9px)}
.month__days{margin-bottom:8px;text-align:center;color:var(--ink-3);font-size:.5625rem}
.month__grid i{position:relative;aspect-ratio:1.34;border-radius:clamp(8px,1vw,14px);display:grid;place-items:center;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2);transform:scale(.9);transition:transform .7s var(--spring),background .45s,box-shadow .45s;transition-delay:calc(var(--i)*13ms)}
.month__grid i::after{content:"";width:0;height:0;margin-left:3px;border-left:9px solid #fff;border-block:6px solid transparent;opacity:0;transition:opacity .3s;transition-delay:inherit}
.month__grid .c{transform:none;background:color-mix(in srgb,var(--ink) 34%,transparent)}
.month__grid .c::after{opacity:.9}
.vsx:is(.is-paid,:has(#vsOn:checked)) .month__grid .c{transform:scale(.9);background:var(--well)}
.vsx:is(.is-paid,:has(#vsOn:checked)) .month__grid .c::after{opacity:0}
.vsx:is(.is-paid,:has(#vsOn:checked)) .month__grid .p{transform:none;background:linear-gradient(140deg,var(--a1),var(--a2));box-shadow:0 8px 22px -8px color-mix(in srgb,var(--a2) 90%,transparent)}
.vsx:is(.is-paid,:has(#vsOn:checked)) .month__grid .p::after{opacity:1}

/* the table: the raised panel sits behind whichever column the switch points at */
.vs{position:relative}
.vs__hi{position:absolute;z-index:0;top:-10px;bottom:-10px;right:-10px;width:calc(41.5% + 18px);border-radius:28px;transform:translateX(calc(-100% + 18px));
  background:color-mix(in srgb,var(--ink) 7%,var(--bg-2));box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .85s var(--spring),background .5s,box-shadow .5s}
.vsx:is(.is-paid,:has(#vsOn:checked)) .vs__hi{transform:none;background:linear-gradient(180deg,color-mix(in srgb,var(--a2) 30%,var(--bg-2)),color-mix(in srgb,var(--a1) 12%,var(--bg-2)));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a2) 70%,transparent),0 34px 70px -34px color-mix(in srgb,var(--a2) 80%,transparent)}
.vs table{position:relative;z-index:1;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}
.vs th:first-child{width:17%}
.vs th,.vs td{padding:clamp(14px,1.7vw,24px) clamp(10px,1.8vw,28px);text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-2)}
.vs tbody tr:last-child>*{border-bottom:0}
.vs thead th{vertical-align:bottom;font-weight:400;padding-top:clamp(16px,2vw,26px)}
.vs__name{display:block;font-size:clamp(1.15rem,2.5vw,2.25rem);font-weight:500;letter-spacing:-.04em;line-height:1.05;color:var(--ink);transition:color .45s}
.vs__us .vs__name{color:var(--ink-3)}
.vs tbody th{font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.vs td{font-size:clamp(.9375rem,1.45vw,1.3125rem);letter-spacing:-.015em;line-height:1.25;color:var(--ink);transition:color .45s}
.vs td.vs__us{color:var(--ink-3)}
.vsx:is(.is-paid,:has(#vsOn:checked)) .vs td,.vsx:is(.is-paid,:has(#vsOn:checked)) .vs__name{color:var(--ink-3)}
.vsx:is(.is-paid,:has(#vsOn:checked)) .vs td.vs__us,.vsx:is(.is-paid,:has(#vsOn:checked)) .vs__us .vs__name{color:var(--ink)}
.vs__c{display:flex;align-items:flex-start;gap:clamp(8px,1vw,14px)}
.vs__c .ic{width:1.5em;height:1.5em;padding:.36em;margin-top:-.1em;border-radius:50%;stroke-width:3;background:color-mix(in srgb,var(--no) 20%,transparent);color:var(--no)}
.vs__us .vs__c .ic{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff}

/* the brief studio: three stages of one piece of work, in a wide panel */
.studio{display:grid;justify-items:center;gap:clamp(30px,4vw,56px);margin-top:clamp(64px,8.6vw,122px)}
.studio__head{display:grid;gap:18px;justify-items:center;text-align:center;max-width:50em}
.studio__head p{color:var(--ink-2);max-width:36em;text-wrap:pretty}
.studio__panel{width:100%;border-radius:var(--r-xl);padding:clamp(10px,1.4vw,18px);display:grid;gap:clamp(10px,1.4vw,18px)}

/* steps: a row of three, each with its own progress line */
.studio__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,.8vw,10px)}
.lab__tab{position:relative;display:flex;align-items:center;gap:clamp(8px,1.1vw,14px);min-height:68px;padding:12px clamp(12px,1.6vw,22px);border-radius:22px;text-align:left;overflow:hidden;color:var(--ink-2);background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2);transition:color .35s,background .35s,box-shadow .35s}
.lab__tab:hover{color:var(--ink);background:var(--glass-hi)}
.lab__tab.is-on{color:var(--ink);background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--line)}
.lab__n{color:var(--ink-3)}
.lab__tab b{font-size:clamp(1rem,1.5vw,1.25rem);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.brief__ic{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--a1),var(--a2));opacity:.55;transition:opacity .35s}
.lab__tab.is-on .brief__ic{opacity:1}
.lab__tab:nth-child(2) .brief__ic{background:linear-gradient(140deg,var(--a2),var(--a3))}
.lab__tab:nth-child(3) .brief__ic{background:linear-gradient(140deg,var(--a3),#ffb347)}
.lab__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));transform:scaleX(0);transform-origin:left}
.lab__tab.is-on .lab__bar{transform:none}
.is-playing .lab__tab.is-on .lab__bar{animation:labFill 6s linear forwards}
@keyframes labFill{from{transform:scaleX(0)}}

.studio__body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.72fr);gap:clamp(10px,1.4vw,18px);align-items:stretch}
.studio__stage{position:relative;border-radius:26px;overflow:hidden;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2);display:grid;grid-template-rows:auto minmax(0,1fr)}
.studio__stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 60% at 85% 0%,color-mix(in srgb,var(--a2) 22%,transparent),transparent 70%),radial-gradient(60% 60% at 0% 100%,color-mix(in srgb,var(--a3) 12%,transparent),transparent 70%)}
.studio__bar{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.studio__dots{display:flex;gap:6px}
.studio__dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.studio__file{display:flex;align-items:baseline;gap:10px;min-width:0;font-weight:500;letter-spacing:-.02em}
.studio__file .mono{color:var(--ink-3);font-size:.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab__views{position:relative;display:grid;padding:clamp(16px,2.4vw,34px);min-height:clamp(430px,45vw,650px)}
.lab__view{display:none;gap:16px;align-content:center;min-width:0}
.lab__view.is-on{display:grid}

/* stage 1: three best-selling videos under a sweeping scan */
.scan{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);align-items:center;max-width:760px;width:100%;margin-inline:auto}
.scan__card{position:relative;border-radius:22px;overflow:hidden;color:#fff;background:#14161d;box-shadow:0 18px 30px -20px rgba(0,0,0,.8)}
.scan__card.is-top{transform:translateY(-14px) scale(1.05);z-index:1;box-shadow:0 0 0 2px var(--a1),0 22px 36px -20px color-mix(in srgb,var(--a2) 90%,transparent)}
.scan__img{aspect-ratio:9/14.5}
.scan__img img,.angles__img img,.refs img{width:100%;height:100%;object-fit:cover}
.scan__card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 46%,rgba(0,0,0,.86))}
.scan__fmt{position:absolute;z-index:1;top:10px;left:10px;height:24px;padding:0 9px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(8,9,13,.62);font-size:.5625rem;white-space:nowrap}
.scan__card.is-top .scan__fmt{background:var(--a1);color:#050609;font-weight:500}
.scan__card figcaption{position:absolute;z-index:1;left:12px;right:12px;bottom:12px;display:grid;gap:5px}
.scan__card b{font-weight:550;letter-spacing:-.015em;line-height:1.2}
.scan__card figcaption .mono{font-size:.5rem;opacity:.75}
.scan__bar{position:relative;height:5px;border-radius:5px;background:rgba(255,255,255,.22);overflow:hidden}
.scan__bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:linear-gradient(90deg,var(--a1),var(--a2))}
.js .lab__view.is-on .scan__bar::after{animation:barGrow 1.1s var(--ease) .25s backwards}
@keyframes barGrow{from{width:0}}
.scan__beam{position:absolute;z-index:2;top:-5%;bottom:-5%;left:0;width:18%;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a1) 34%,transparent) 70%,var(--a1) 99%,transparent);opacity:0}
.js .lab__view.is-on .scan__beam{animation:beam 3.2s var(--ease) .2s 1 both}
@keyframes beam{0%{transform:translateX(-110%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(560%);opacity:0}}

/* stage 2: the angle behind each video */
.angles{display:grid;gap:12px;counter-reset:angle;max-width:720px;width:100%;margin-inline:auto}
.angles li{counter-increment:angle;display:grid;grid-template-columns:clamp(64px,8vw,96px) minmax(0,1fr);gap:clamp(12px,1.6vw,20px);align-items:center;padding:12px clamp(12px,1.6vw,20px) 12px 12px;border-radius:22px;background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.js .lab__view.is-on .angles li{animation:rise .6s var(--ease) backwards}
.js .lab__view.is-on .angles li:nth-child(2){animation-delay:.08s}
.js .lab__view.is-on .angles li:nth-child(3){animation-delay:.16s}
.angles__img{aspect-ratio:1;border-radius:16px;overflow:hidden}
.angles li>div:last-child{display:grid;gap:2px}
.angles b{font-size:clamp(1.125rem,1.7vw,1.5rem);font-weight:500;letter-spacing:-.03em;line-height:1.15;justify-self:start}
.angles b::before{content:"0" counter(angle);margin-right:10px;font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.06em;color:var(--a1);vertical-align:.3em}
.angles q{quotes:"“" "”";font-size:1rem;line-height:1.35}
.angles span{color:var(--ink-3);font-size:.875rem;line-height:1.35}

/* stage 3: the brief itself, as a sheet of paper */
#lv2{grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px}
.paper{--pi:#0a0c11;--pi2:rgba(10,12,17,.66);--pl:rgba(10,12,17,.1);width:min(100%,560px);display:grid;gap:clamp(12px,1.5vw,16px);padding:clamp(16px,2vw,24px);border-radius:18px;color:var(--pi);background:#f6f7f9;box-shadow:0 22px 36px -22px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.4);transform:rotate(-1.2deg)}
html[data-theme="light"] .paper{background:#fff;box-shadow:0 22px 36px -22px rgba(40,50,100,.55),0 0 0 1px rgba(10,12,17,.08)}
.js .lab__view.is-on .paper{animation:paperIn .8s var(--spring) backwards}
@keyframes paperIn{from{opacity:0;transform:translateY(22px) rotate(1deg)}}
.paper__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--pl)}
.paper__title{font-size:1.375rem;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.paper .mono{color:var(--pi2);font-size:.625rem}
.paper__stamp{height:24px;padding:0 10px;display:inline-flex;align-items:center;border-radius:999px;border:1.5px solid #00a08a;color:#008a77!important;font-weight:500;transform:rotate(4deg)}
.paper h4{margin-bottom:8px}
.paper .lab__chips{display:flex;flex-wrap:wrap;gap:6px}
.paper .lab__chips li{height:30px;padding:0 12px;display:inline-flex;align-items:center;border-radius:999px;font-size:.875rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;color:#fff;background:#0a0c11}
.paper__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.marks{display:grid;gap:9px}
.marks li{display:flex;align-items:center;gap:10px;font-size:.9688rem;line-height:1.3}
.marks .ic{width:22px;height:22px;padding:5px;border-radius:50%;stroke-width:3}
.marks--yes .ic{background:color-mix(in srgb,var(--a1) 22%,transparent);color:var(--a1)}
.marks--no .ic{background:color-mix(in srgb,var(--a3) 22%,transparent);color:var(--a3)}
.paper .marks{gap:6px}
.paper .marks li{font-size:.875rem}
.paper .marks--yes .ic{background:rgba(0,160,138,.16);color:#008a77}
.paper .marks--no .ic{background:rgba(229,40,63,.14);color:#d5203a}
.refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.refs figure{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--pl)}
.paper__foot{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;border-top:1px solid var(--pl)}
.paper__foot span{height:26px;padding:0 10px;display:inline-flex;align-items:center;border-radius:999px;background:var(--pl);color:var(--pi)!important}
.sent{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 12px;border-radius:999px;background:var(--bar);box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -22px rgba(0,0,0,.7)}
.js .lab__view.is-on .sent{animation:rise .6s var(--ease) .45s backwards}
.avatars--sm{flex:none}
.avatars--sm img{width:34px;height:34px;margin-left:-10px;box-shadow:0 0 0 2px var(--bg-2)}
.sent__tx{display:grid;line-height:1.2}
.sent__tx b{font-weight:550;letter-spacing:-.015em;font-size:.9688rem}
.sent__tx .mono{color:var(--ink-3);font-size:.5625rem}
.sent__ok{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2))}
.sent__ok .ic{width:16px;height:16px;stroke-width:2.8}

/* the words for the stage on show */
.studio__side{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:18px;padding:clamp(18px,2.4vw,34px);border-radius:26px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2)}
.side{grid-area:1/1;display:none;gap:16px;align-content:center}
.side.is-on{display:grid}
.js .side.is-on>*{animation:rise .55s var(--ease) backwards}
.js .side.is-on>:nth-child(2){animation-delay:.05s}.js .side.is-on>:nth-child(3){animation-delay:.1s}.js .side.is-on>:nth-child(4){animation-delay:.15s}
.side__k{color:var(--ink-3)}
.side h4{font-size:clamp(1.75rem,2.9vw,2.625rem);font-weight:500;letter-spacing:-.045em;line-height:1}
.side>p:not(.mono){color:var(--ink-2)}
.studio__nav{display:flex;gap:8px}
.studio__nav .icon-btn{width:48px;height:48px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}

/* the pieces of the brief move between its three views */
::view-transition{pointer-events:none}
html.vt-lab{view-transition-name:none}
html.vt-lab .lab__views{view-transition-name:lab}
html.vt-lab [style*="--vt"]{view-transition-name:var(--vt)}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.3,1.2,.4,1)}
::view-transition-old(ref-1),::view-transition-new(ref-1),::view-transition-old(ref-2),::view-transition-new(ref-2),::view-transition-old(ref-3),::view-transition-new(ref-3){width:100%;height:100%;object-fit:cover}

/* ── 02 The problem: the phone shows what you see, the notes say what is behind it ── */
.head--center{grid-template-columns:1fr;justify-items:center;text-align:center}
.head--center .eyebrow{justify-content:center}
.head--center .head__title{grid-column:auto;max-width:12em}
.head--center .head__lead{grid-column:auto;max-width:30em;padding:0}
.stall{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:stretch}
.stall__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.stall__lines path{fill:none;stroke:var(--ink-3);stroke-width:1.25;stroke-linecap:round;stroke-dasharray:1;transition:stroke .3s,stroke-width .3s}
.stall__lines circle{fill:var(--ink-2);transition:fill .3s}
.stall__lines .is-hot path{stroke:var(--ink);stroke-width:1.75}
.stall__lines .is-hot circle{fill:var(--ink)}
.js .stall.in .stall__lines path{animation:lineDraw 1s var(--ease) backwards;animation-delay:calc(.75s + var(--i)*.12s)}
@keyframes lineDraw{from{stroke-dashoffset:1}}
.notes{display:flex;flex-direction:column;justify-content:space-around;gap:clamp(28px,5vw,64px);padding-block:clamp(8px,3vw,44px)}
.notes--l{align-items:flex-end}
.notes__cap{position:absolute;top:0;color:var(--ink-3)}
.note{display:grid;gap:10px;max-width:21em;transition:opacity .4s var(--ease)}
.note__k{display:flex;align-items:center;gap:10px;color:var(--ink-3)}
.notif__ic{display:grid;place-items:center;color:#fff}
.notif__ic--a{background:linear-gradient(140deg,var(--a1),var(--a2))}
.notif__ic--b{background:linear-gradient(140deg,var(--a2),var(--a3))}
.notif__ic--c{background:linear-gradient(140deg,#ff3b4e,var(--a3))}
.notif__ic--d{background:linear-gradient(140deg,#ffb347,#ff3b4e)}
.note__k .notif__ic{width:34px;height:34px;border-radius:11px}
.note__k .notif__ic .ic{width:17px;height:17px}
.note h3{font-size:clamp(1.5rem,2.5vw,2.25rem);font-weight:500;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.note>p:last-child{color:var(--ink-2);line-height:1.45}
/* the pair in focus stays lit, the rest step back */
.stall:has(.note.is-hot) .note:not(.is-hot){opacity:.58}

.phone{align-self:center;justify-self:center;width:clamp(260px,24vw,330px);aspect-ratio:9/18.4;padding:9px;border-radius:clamp(42px,4.4vw,54px);
  background:linear-gradient(145deg,#4a4d58,#0c0d11 22%,#0c0d11 78%,#30323b);
  box-shadow:0 60px 90px -50px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.12)}
.phone__screen{position:relative;height:100%;display:flex;flex-direction:column;padding:13px 11px 20px;border-radius:clamp(34px,3.7vw,45px);overflow:hidden;color:#fff;
  background:radial-gradient(120% 55% at 15% 0%,#3d35c9,transparent 70%),radial-gradient(110% 55% at 105% 48%,#b02a6b,transparent 70%),radial-gradient(120% 55% at 0% 105%,#0f8f80,transparent 70%),#080910}
.phone__screen::before{content:"";position:absolute;top:11px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1)}
.phone__screen::after{content:"";position:absolute;bottom:7px;left:33%;right:33%;height:4px;border-radius:4px;background:rgba(255,255,255,.7)}
.phone__bar{display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-size:.625rem;font-weight:500}
.phone__sys{display:flex;align-items:center;gap:6px}
.sig{width:13px;height:9px;clip-path:polygon(0 100%,100% 0,100% 100%);background:linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 6px,transparent 6px 8px,#fff 8px 10px,transparent 10px 11px,rgba(255,255,255,.4) 11px)}
.bat{position:relative;width:20px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.bat::before{content:"";position:absolute;inset:2px 6px 2px 2px;border-radius:1.5px;background:#fff}
.lock__clock{display:grid;justify-items:center;padding:clamp(20px,3vw,34px) 0 clamp(14px,2vw,22px)}
.lock__date{font-size:.5625rem;color:rgba(255,255,255,.8)}
.lock__time{font-size:clamp(3.4rem,6vw,4.75rem);font-weight:300;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.notifs{display:grid;gap:7px}
.notif{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;padding:9px 12px 9px 9px;border-radius:17px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .35s,box-shadow .35s}
.notif .notif__ic{width:30px;height:30px;border-radius:10px}
.notif .notif__ic .ic{width:15px;height:15px}
.notif__meta{display:flex;justify-content:space-between;font-size:.5rem;color:rgba(255,255,255,.6);margin-bottom:1px}
.notif__title{font-size:.75rem;font-weight:550;letter-spacing:-.01em;line-height:1.2}
.notif.is-hot{background:rgba(255,255,255,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.js .stall.in .notif{animation:notifIn .9s var(--spring) backwards;animation-delay:calc(.25s + var(--i)*.12s)}
@keyframes notifIn{from{opacity:0;transform:translateY(40px) scale(.94)}}
.phone__dock{margin-top:auto;display:flex;justify-content:space-between;padding:0 8px}
.phone__dock i{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16)}
.stuck__kicker{margin:clamp(40px,6vw,76px) auto 0;max-width:17em;text-align:center;text-wrap:balance;font-size:clamp(1.5rem,3.1vw,2.875rem);font-weight:500;letter-spacing:-.04em;line-height:1.08;background:linear-gradient(100deg,var(--a1),var(--a2) 55%,var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── 03 The loop: one diagram, with a runner that moves as the page scrolls ── */
.loopx{display:grid;gap:clamp(20px,3vw,40px);padding:clamp(20px,3.4vw,52px);border-radius:var(--r-xl)}
.loop__svg{width:min(100%,900px);height:auto;margin-inline:auto;overflow:visible}
.loop__base{stroke:var(--line);stroke-width:24;stroke-linecap:round}
.loop__prog{stroke-width:24;stroke-linecap:round}
.node circle{fill:var(--bg-2);stroke:var(--ink-3);stroke-width:2;transform-box:fill-box;transform-origin:center;transition:fill .4s,stroke .4s,transform .7s var(--spring)}
.node text{font-family:var(--mono);font-size:19px;letter-spacing:.05em;fill:var(--ink-3);text-transform:uppercase;transition:fill .4s}
.node.is-done circle{fill:var(--ink-2);stroke:transparent}
.node.is-active circle{fill:var(--ink);stroke:transparent;transform:scale(1.5)}
.node.is-active text{fill:var(--ink)}
.loop__runner{fill:#fff;stroke:color-mix(in srgb,var(--a2) 45%,transparent);stroke-width:14;paint-order:stroke}
html[data-theme="light"] .loop__runner{fill:var(--ink)}
.legend{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line-2)}
.lg{position:relative;display:grid;gap:6px;align-content:start;padding:clamp(16px,1.8vw,24px) clamp(10px,1.2vw,18px) 4px;opacity:.66;transition:opacity .45s var(--ease)}
.lg+.lg{border-left:1px solid var(--line-2)}
.lg::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--a1),var(--a2));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.lg.is-active{opacity:1}
.lg.is-active::before{transform:none}
.lg .mono{color:var(--ink-3)}
.lg h3{font-size:clamp(1.125rem,1.6vw,1.4375rem);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.lg p{color:var(--ink-2);font-size:.9063rem;line-height:1.4}

/* ── 04 Services: widget grid ───────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.tile{grid-column:span 6;display:flex;flex-direction:column;padding:12px;border-radius:var(--r-xl)}
.tile--a,.tile--d{grid-column:span 7}
.tile--b,.tile--c{grid-column:span 5}
.tile__ui{position:relative;flex:1;min-height:270px;border-radius:26px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden;display:grid;place-items:center}
.tile__tx{padding:22px 14px 14px}
.tile__k{color:var(--ink-3);margin-bottom:12px}
.tile h3{font-size:clamp(1.5rem,2.1vw,1.9375rem);font-weight:500;letter-spacing:-.035em;line-height:1.05;margin-bottom:10px}
.tile--a h3{font-size:clamp(1.9rem,3.2vw,2.875rem)}
.tile__tx p:last-child{color:var(--ink-2);max-width:30em}

.ui-health{grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,48px);padding:clamp(22px,3vw,48px);place-items:center stretch}
.ring{position:relative;width:clamp(128px,15vw,210px);aspect-ratio:1}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring__bg{stroke:var(--line)}
.ring__fg{stroke-dasharray:100;stroke-dashoffset:9}
.js .in .ring__fg{animation:ringIn 1.6s var(--ease) .2s backwards}
@keyframes ringIn{from{stroke-dashoffset:100}}
.ring__tx{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:2px}
.ring__tx b{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.ring__tx .mono{color:var(--a1);font-size:.6875rem}
.rows{display:grid;gap:8px}
.rows li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:16px;background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--line-2);font-size:.9688rem}
.rows i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;flex:none}
.rows i .ic{width:14px;height:14px;stroke-width:2.6}
.js .tile.in .rows li{animation:rowIn .7s var(--spring) backwards}
.tile.in .rows li:nth-child(1){animation-delay:.35s}.tile.in .rows li:nth-child(2){animation-delay:.45s}.tile.in .rows li:nth-child(3){animation-delay:.55s}.tile.in .rows li:nth-child(4){animation-delay:.65s}
@keyframes rowIn{from{opacity:0;transform:translateX(18px)}}

.ui-creators{gap:22px;padding:28px;align-content:center;justify-items:center}
@media (hover:hover){.tile:hover .avatars img{transform:translateX(calc(var(--n,0)*5px))}}
.avatars img:nth-child(2){--n:1}.avatars img:nth-child(3){--n:2}.avatars img:nth-child(4){--n:3}.avatars img:nth-child(5){--n:4}
.pipe{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px 28px;color:var(--ink-2)}
.pipe li{position:relative;height:30px;padding:0 13px;display:inline-flex;align-items:center;border-radius:999px;background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.pipe li+li::before{content:"→";position:absolute;right:calc(100% + 7px);color:var(--ink-3)}

.ui-video{min-height:270px}
.clip{position:absolute;width:118px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;color:#fff;background:#14161d;box-shadow:0 18px 40px -16px rgba(0,0,0,.7);transition:transform .9s var(--spring)}
.clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(transparent 38%,rgba(0,0,0,.8));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.clip>span,.clip>b{position:relative;z-index:1}
.clip .mono{font-size:.5rem;opacity:.9;text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip b{font-size:.8125rem;font-weight:550;line-height:1.2;letter-spacing:-.01em}
.clip i{top:10px;right:10px;z-index:1}
.clip--1{transform:translateX(-128px) rotate(-7deg) scale(.92)}
.clip--3{transform:translateX(128px) rotate(7deg) scale(.92)}
.clip--2{z-index:1}
@media (hover:hover){
  .tile:hover .clip--1{transform:translateX(-138px) rotate(-11deg) scale(.92)}
  .tile:hover .clip--3{transform:translateX(138px) rotate(11deg) scale(.92)}
  .tile:hover .clip--2{transform:translateY(-6px) scale(1.04)}
}

.ui-live{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);padding:clamp(18px,2vw,28px);place-items:stretch}
.ui-live__stage{position:relative;display:grid;place-items:center;min-height:150px;border-radius:18px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-2)}
.rows--show{align-content:center}
.rows--show li{justify-content:flex-start;gap:14px;padding:13px 16px}
.rows--show .mono{color:var(--ink-3);font-size:.6875rem}
.livepill{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 10px;border-radius:999px;background:#ff3b4e;color:#fff;font-weight:500}
.livepill i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.wave{display:flex;align-items:center;gap:5px;height:84px;margin-top:22px}
.wave i{width:5px;height:100%;border-radius:6px;background:linear-gradient(var(--a3),var(--a2));transform:scaleY(.2);animation:wave 1.3s ease-in-out infinite alternate;animation-delay:calc(var(--k)*-.17s)}
.wave i:nth-child(1){--k:1}.wave i:nth-child(2){--k:5}.wave i:nth-child(3){--k:2}.wave i:nth-child(4){--k:7}.wave i:nth-child(5){--k:3}.wave i:nth-child(6){--k:9}.wave i:nth-child(7){--k:4}.wave i:nth-child(8){--k:8}.wave i:nth-child(9){--k:1.5}.wave i:nth-child(10){--k:6}.wave i:nth-child(11){--k:2.5}.wave i:nth-child(12){--k:7.5}.wave i:nth-child(13){--k:3.5}.wave i:nth-child(14){--k:5.5}
@keyframes wave{to{transform:scaleY(1)}}

.ui-ads{padding:44px 24px 0;place-items:end stretch}
.bars{display:flex;align-items:flex-end;gap:10px;height:150px}
.bars i{position:relative;flex:1;height:var(--h);border-radius:10px 10px 0 0;background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--line-2);transform-origin:bottom}
.js .tile.in .bars i{animation:barIn .9s var(--spring) backwards}
.tile.in .bars i:nth-child(1){animation-delay:.2s}.tile.in .bars i:nth-child(2){animation-delay:.26s}.tile.in .bars i:nth-child(3){animation-delay:.32s}.tile.in .bars i:nth-child(4){animation-delay:.5s}.tile.in .bars i:nth-child(5){animation-delay:.38s}.tile.in .bars i:nth-child(6){animation-delay:.44s}
@keyframes barIn{from{transform:scaleY(0)}}
.bars .is-win{background:linear-gradient(var(--a1),var(--a2));box-shadow:0 0 34px -4px color-mix(in srgb,var(--a2) 80%,transparent)}
.bars .is-win span{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);color:var(--a1);font-size:.625rem;font-style:normal}

.ui-report{place-items:end stretch}
.spark{width:100%;height:150px}
.js .tile.in .spark{animation:sparkIn 1.8s var(--ease) .3s backwards}
@keyframes sparkIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.spark__area{fill:color-mix(in srgb,var(--a2) 16%,transparent)}
.spark__line{fill:none;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* ── 05 Brands: a roster on one side, one brand's numbers on the other ──── */
.board{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(10px,1.4vw,18px);padding:clamp(10px,1.4vw,18px);border-radius:var(--r-xl)}
.board__list{display:grid;gap:8px;grid-auto-rows:1fr}
.rost{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n tx rev" "n spark rev";column-gap:14px;row-gap:6px;align-items:center;padding:16px 18px 18px;border-radius:22px;text-align:left;overflow:hidden;color:var(--ink-2);background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2);transition:color .35s,background .35s,box-shadow .35s,transform .5s var(--spring)}
.rost:hover{color:var(--ink);background:var(--glass-hi)}
.rost:active{transform:scale(.985)}
.rost.is-on{color:var(--ink);background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--line),0 20px 40px -26px rgba(0,0,0,.7)}
.rost__n{grid-area:n;align-self:start;padding-top:.35em;color:var(--ink-3)}
.rost__tx{grid-area:tx;display:grid;min-width:0}
.rost__tx b{font-size:clamp(1.125rem,1.6vw,1.375rem);font-weight:500;letter-spacing:-.035em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rost__tx span{color:var(--ink-3);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rost__spark{grid-area:spark;width:100%;height:26px;overflow:visible}
.rost__spark polyline{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke .35s}
.rost.is-on .rost__spark polyline{stroke:var(--a1)}
.rost__rev{grid-area:rev;font-size:clamp(1.125rem,1.7vw,1.5rem);font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rost__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));transform:scaleX(0);transform-origin:left}
.rost.is-on .rost__bar{transform:none}
.is-playing .rost.is-on .rost__bar{animation:labFill 6.5s linear forwards}

.board__stage{position:relative;display:grid;gap:clamp(16px,2vw,26px);align-content:start;padding:clamp(18px,2.6vw,38px);border-radius:26px;overflow:hidden;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2)}
.board__stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 55% at 100% 0%,color-mix(in srgb,var(--a2) 26%,transparent),transparent 70%),radial-gradient(50% 50% at 0% 100%,color-mix(in srgb,var(--a1) 12%,transparent),transparent 70%)}
.board__stage>*{position:relative}
.board__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.board__cat{color:var(--a1)}
.board__src{gap:8px}
.board__live{width:7px;height:7px;border-radius:50%;background:var(--a1);box-shadow:0 0 10px var(--a1)}
.board__name{font-size:clamp(1.75rem,3.2vw,2.75rem);font-weight:500;letter-spacing:-.045em;line-height:1.05}
.board__hero{display:grid;gap:4px}
.board__rev{font-size:clamp(4rem,10.6vw,9.5rem);font-weight:600;letter-spacing:-.065em;line-height:.86;font-variant-numeric:tabular-nums;white-space:nowrap;justify-self:start;padding-right:.05em;background:linear-gradient(100deg,var(--a1),var(--a2) 55%,var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
.board__revk{color:var(--ink-2);margin-top:.7em}
.chart{position:relative;margin-top:4px}
.chart svg{display:block;width:100%;height:clamp(150px,17vw,230px);overflow:visible}
.chart__grid line{stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke}
.chart__line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.js .board.in .chart svg{animation:sparkIn 1.5s var(--ease) .2s backwards}
.js .board .chart.is-swap svg{animation:sparkIn 1.1s var(--ease) backwards}
.chart__peak{position:absolute;left:var(--px);top:var(--py);display:block;pointer-events:none;transition:left .6s var(--ease),top .6s var(--ease)}
.chart__peak i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--a2) 45%,transparent)}
html[data-theme="light"] .chart__peak i{background:var(--ink)}
.chart__peak.is-left b{right:auto;left:8px}
.chart__peak b{position:absolute;bottom:14px;right:8px;white-space:nowrap;height:26px;padding:0 10px;display:inline-flex;align-items:center;border-radius:999px;font-size:.75rem;font-weight:500;letter-spacing:-.01em;color:var(--btn-ink);background:var(--btn-bg)}
.chart__months{position:relative;height:1.6em;margin-top:8px;color:var(--ink-3);font-size:.625rem}
.chart__months span{position:absolute;top:0;white-space:nowrap}
.board__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2)}
.board__stats li{display:grid;gap:6px;align-content:start;padding:clamp(14px,1.6vw,20px) clamp(8px,1.2vw,18px) 0 0}
.board__stats li+li{padding-left:clamp(8px,1.2vw,18px);border-left:1px solid var(--line-2)}
.board__stats b{font-size:clamp(1.6rem,2.9vw,2.625rem);font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.board__stats span{display:grid;gap:3px;color:var(--ink-2);font-size:.9375rem;line-height:1.25}
.board__stats small{color:var(--ink-3);font-size:.5625rem}
.board__also{margin-top:22px;display:flex;align-items:center;gap:12px;color:var(--ink-3)}
.board__also b{font-family:var(--sans);font-size:1.125rem;font-weight:500;letter-spacing:-.03em;text-transform:none;color:var(--ink-2)}

/* ── 06 Process: an editing timeline ────────────────────────────────────── */
.tl{display:grid;gap:18px}
.tl__bar{border-radius:var(--r-lg);padding:16px 16px 18px}
.tl__ruler,.tl__track{display:grid;grid-template-columns:minmax(0,1.9fr) repeat(12,minmax(0,1fr))}
.tl__ruler{color:var(--ink-3);font-size:.625rem;padding-bottom:12px}
.tl__ruler span{padding:0 0 6px 6px;border-left:1px solid var(--line)}
.tl__track{position:relative;height:clamp(60px,6.6vw,84px)}
.tl__clip{grid-column:var(--s)/var(--e);container-type:inline-size;margin:0 2px;border-radius:16px;display:flex;align-items:center;gap:10px;padding:0 16px;text-align:left;white-space:nowrap;overflow:hidden;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2);transition:background .35s,color .35s,transform .6s var(--spring)}
.tl__clip b{font-size:clamp(1rem,1.5vw,1.25rem);font-weight:500;letter-spacing:-.03em}
.tl__clip .mono{color:var(--ink-3);transition:color .35s}
.tl__clip:hover{background:var(--glass-hi);color:var(--ink)}
.tl__clip:active{transform:scale(.97)}
.tl__clip.is-on{background:var(--btn-bg);color:var(--btn-ink)}
.tl__clip.is-on .mono{color:inherit;opacity:.6}
@container (max-width:124px){.tl__clip b{display:none}}
@container (max-width:124px){.tl__clip .mono{margin-inline:auto}}
.tl__clip:has(b){justify-content:flex-start}
.tl__head{position:absolute;top:-30px;bottom:-10px;left:0;width:2px;margin-left:-1px;border-radius:2px;background:var(--a3);pointer-events:none;transform:translateX(var(--x,0px));box-shadow:0 0 14px var(--a3)}
.tl__head::before{content:"";position:absolute;top:0;left:50%;width:12px;height:12px;border-radius:3px;background:var(--a3);transform:translate(-50%,-3px) rotate(45deg)}
.tl__panels{display:grid}
.tl__panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.7fr);gap:clamp(20px,3vw,48px);align-items:start;padding:clamp(22px,3.2vw,48px);border-radius:var(--r-xl);visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s}
.tl__panel.is-on{visibility:visible;opacity:1;transition-delay:0s}
.js .tl__panel.is-on>*{animation:rise .6s var(--ease) backwards}
.js .tl__panel.is-on>:nth-child(2){animation-delay:.06s}
.js .tl__panel.is-on>:nth-child(3){animation-delay:.12s}
.tl__what .mono{color:var(--ink-3)}
.tl__what h3{font-size:clamp(2.4rem,5vw,4.5rem);font-weight:500;letter-spacing:-.05em;line-height:1;margin:.12em 0 .28em}
.tl__what p:last-child{color:var(--ink-2);max-width:26em}
.tl__todo{display:grid;gap:10px}
.tl__todo li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2);font-size:.9688rem;line-height:1.3}
.tl__todo .ic{width:24px;height:24px;padding:5px;border-radius:50%;stroke-width:3;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2))}
.tl__out{display:grid;gap:12px;align-content:start;padding:20px;border-radius:22px;font-size:clamp(1.25rem,1.9vw,1.625rem);font-weight:500;letter-spacing:-.03em;line-height:1.1;background:linear-gradient(140deg,color-mix(in srgb,var(--a2) 30%,transparent),color-mix(in srgb,var(--a3) 18%,transparent));box-shadow:inset 0 0 0 1px var(--line)}
.tl__out .mono{color:var(--ink-2);letter-spacing:.06em;font-weight:400}

/* ── 06 Principles ──────────────────────────────────────────────────────── */
.rules{border-top:1px solid var(--line)}
.rule{position:relative;display:grid;grid-template-columns:clamp(60px,9vw,130px) minmax(0,1.1fr) minmax(0,.9fr);column-gap:24px;align-items:baseline;padding:clamp(26px,3.6vw,48px) 0;border-bottom:1px solid var(--line)}
.rule::before{content:"";position:absolute;inset:0 calc(var(--gut)*-.5);border-radius:var(--r-lg);background:linear-gradient(90deg,var(--glass-hi),transparent);opacity:0;transition:opacity .5s;z-index:-1}
.rule>*{transition:transform .7s var(--ease)}
@media (hover:hover){.rule:hover::before{opacity:1}.rule:hover>*{transform:translateX(14px)}}
.rule__n.mono{font-family:var(--sans);font-size:clamp(1.25rem,2vw,1.75rem);font-weight:500;letter-spacing:-.03em;background:linear-gradient(100deg,var(--a1),var(--a2) 55%,var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent;justify-self:start}
.rule::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));transform:scaleX(0);transform-origin:left}
@supports (animation-timeline:view()){
  .rule::after{animation:grow linear both;animation-timeline:view();animation-range:cover 22% cover 52%}
}
@supports (animation-timeline:view()){
  .rule{animation:focus linear both;animation-timeline:view();animation-range:cover 6% cover 94%}
}
@keyframes focus{0%,100%{opacity:.4}32%,68%{opacity:1}}
.rule h3{font-size:clamp(1.9rem,4.2vw,3.75rem);font-weight:500;letter-spacing:-.045em;line-height:1}
.rule p{color:var(--ink-2);max-width:29em}

/* ── 07 FAQ: a conversation. Tap a question, the answer comes back as a reply ── */
.faq{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq__head{order:2;position:sticky;top:132px}
.chat{order:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-radius:var(--r-xl);overflow:hidden}
.chat.is-live{height:clamp(540px,72vh,660px)}
.chat__bar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.chat__av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--btn-bg);color:var(--btn-ink)}
.chat__av svg{width:70%;height:auto;overflow:visible}
.chat__name{font-size:1.125rem;font-weight:550;letter-spacing:-.025em;line-height:1.2}
.chat__bar .mono{display:flex;align-items:center;gap:7px;color:var(--ink-3);font-size:.6875rem}
.chat__bar .mono::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--a1)}
.chat__thread{display:grid;align-content:start;gap:10px;padding:20px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-behavior:smooth}
.chat__thread:focus-visible{outline-offset:-4px}
.msg{max-width:min(88%,35em);padding:13px 18px;border-radius:22px;line-height:1.45}
.msg--us{justify-self:start;border-bottom-left-radius:7px;background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.msg--me{justify-self:end;border-bottom-right-radius:7px;margin-top:8px;background:var(--btn-bg);color:var(--btn-ink);font-weight:500;letter-spacing:-.01em}
.js .msg.is-new{animation:msgIn .55s var(--spring) backwards}
@keyframes msgIn{from{opacity:0;transform:translateY(16px) scale(.95)}}
.msg--typing{display:flex;gap:5px;padding:18px}
.msg--typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:typing 1s ease-in-out infinite}
.msg--typing i:nth-child(2){animation-delay:.15s}.msg--typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.chat__tray{display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px 20px;border-top:1px solid var(--line-2);background:var(--well)}
.chat__tray:empty{display:none}
.qchip{height:40px;padding:0 16px;border-radius:999px;font-size:.9375rem;letter-spacing:-.01em;white-space:nowrap;color:var(--ink-2);background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--line);transition:color .3s,box-shadow .3s,transform .5s var(--spring),opacity .3s}
.qchip:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3)}
.qchip:active{transform:scale(.94)}
.qchip.is-gone{opacity:0;transform:scale(.8)}
.qchip--go{color:var(--btn-ink);background:var(--btn-bg);box-shadow:none;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.qchip--go:hover{color:var(--btn-ink);box-shadow:none}
/* the plain list: what the conversation is built from, and what shows when scripts are off */
.chat.is-live .qa{display:none}
/* while the script is still on its way the list keeps the panel's place without flashing */
.js .chat:not(.is-live) .qa{visibility:hidden;height:clamp(420px,60vh,560px);overflow:hidden}
.chat:not(.is-live) .chat__thread,.chat:not(.is-live) .chat__tray{display:none}
.qa{padding:8px 20px 20px}
.qa__row{padding:16px 0;border-bottom:1px solid var(--line-2)}
.qa__row:last-child{border-bottom:0}
.qa dt{font-size:1.125rem;font-weight:550;letter-spacing:-.02em;line-height:1.3}
.qa dd{margin:6px 0 0;color:var(--ink-2)}

/* ── 08 Book a call: one headline, one sentence, one very large button ──── */
.callx{overflow-x:clip;text-align:center}
.callx::before{display:none}
.callx__in{display:grid;justify-items:center;gap:clamp(18px,2.2vw,28px)}
.callx .eyebrow{justify-content:center}
.callx__title{font-size:clamp(3.3rem,11.4vw,9.75rem);font-weight:600;letter-spacing:-.058em;line-height:.9;white-space:nowrap}
.callx__lead{max-width:34em;font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--ink-2);text-wrap:balance}
.callx__facts{justify-content:center}

/* the dial: a slow ring of type around a round button, on ripples that spread from its centre */
.dial{position:relative;isolation:isolate;display:grid;place-items:center;width:min(clamp(248px,33vw,432px),54svh);aspect-ratio:1;margin:clamp(18px,2.4vw,36px) 0 clamp(18px,2.6vw,40px);border-radius:50%;-webkit-tap-highlight-color:transparent}
.dial::before{content:"";position:absolute;z-index:-2;inset:-105%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--a2) 34%,transparent),color-mix(in srgb,var(--a3) 10%,transparent) 46%,transparent 72%)}
.dial::after{content:"";position:absolute;z-index:-1;inset:-120%;border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,transparent 0 71px,var(--line) 71px 72px);
  -webkit-mask-image:radial-gradient(closest-side,transparent 26%,#000 34%,transparent);mask-image:radial-gradient(closest-side,transparent 26%,#000 34%,transparent)}
@supports (animation-timeline:view()){
  .dial::after{animation:ripple linear both;animation-timeline:view();animation-range:entry 10% cover 55%}
}
@keyframes ripple{from{opacity:0;transform:scale(.72)}}
.dial__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:turnRing 30s linear infinite}
.dial__ring text{font-family:var(--mono);font-size:14.5px;text-transform:uppercase;fill:var(--ink-2)}
@keyframes turnRing{to{transform:rotate(1turn)}}
.dial__core{position:relative;width:61%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;justify-items:center;gap:8px;background:var(--btn-bg);color:var(--btn-ink);font-size:clamp(1.0625rem,1.85vw,1.625rem);letter-spacing:-.025em;transform:translate(var(--tx,0),var(--ty,0)) scale(var(--s,1));transition:transform .7s var(--spring),box-shadow .5s var(--ease)}
.dial__core b{font-weight:550}
.dial__core .ic{width:1.5em;height:1.5em}
.dial__core::after{content:"";position:absolute;inset:-7px;border-radius:50%;padding:3px;pointer-events:none;opacity:.55;transition:opacity .4s;
  background:conic-gradient(from var(--ang),var(--a1),var(--a2),var(--a3),var(--a1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover){
  .dial:hover .dial__core{--s:1.06;box-shadow:-18px 8px 50px -12px color-mix(in srgb,var(--a1) 70%,transparent),0 12px 50px -12px color-mix(in srgb,var(--a2) 80%,transparent),18px 8px 50px -12px color-mix(in srgb,var(--a3) 70%,transparent)}
  .dial:hover .dial__core::after{opacity:1;animation:turn 2.4s linear infinite}
  .dial:hover .dial__ring{animation-duration:12s}
}
.dial:active .dial__core{--s:.95;transition-duration:.12s}
.dial:focus-visible{outline-offset:8px}

/* ── Booking overlay: the calendar opens over the page ───────────────────── */
.book{width:min(1080px,100vw - 28px);height:min(860px,100dvh - 28px);max-width:none;max-height:none;padding:0;border:0;border-radius:clamp(22px,2.6vw,34px);overflow:hidden;color:var(--ink);background:var(--bg-2);box-shadow:0 0 0 1px var(--line),0 50px 120px -30px rgba(0,0,0,.8);
  opacity:0;transform:translateY(26px) scale(.975);transition:opacity .3s,transform .5s var(--ease),overlay .5s allow-discrete,display .5s allow-discrete}
.book[open]{display:grid;grid-template-rows:auto minmax(0,1fr);opacity:1;transform:none}
@starting-style{.book[open]{opacity:0;transform:translateY(26px) scale(.975)}}
.book::backdrop{background:color-mix(in srgb,var(--bg) 86%,transparent);opacity:0;transition:opacity .4s,overlay .5s allow-discrete,display .5s allow-discrete}
.book[open]::backdrop{opacity:1}
@starting-style{.book[open]::backdrop{opacity:0}}
html:has(.book[open]){overflow:hidden}
.book__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 14px 14px 18px;border-bottom:1px solid var(--line-2)}
.book__ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--a1),var(--a2))}
.book__title{font-size:1.25rem;font-weight:550;letter-spacing:-.03em;line-height:1.15}
.book__head .mono{color:var(--ink-3);font-size:.6875rem}
.book__frame{position:relative;background:#fff}
.book__frame iframe{position:relative;z-index:1;display:block;width:100%;height:100%;border:0}
.book__load{position:absolute;inset:0;display:grid;place-content:center;color:#5b5e66}
.book__load::after{content:"";justify-self:center;margin-top:16px;width:34px;height:34px;border-radius:50%;border:3px solid #e3e5ea;border-top-color:#6c63ff;animation:turnRing .9s linear infinite}
.book.is-ready .book__load{display:none}

/* ── 09 Free audit: a panel with a three-question flow ──────────── */
.section--cta{padding-bottom:clamp(48px,6vw,88px)}
.finale{position:relative;isolation:isolate;overflow:hidden;border-radius:clamp(30px,4vw,56px);padding:clamp(22px,5vw,76px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow);
  background:radial-gradient(70% 90% at 0% 0%,color-mix(in srgb,var(--a2) 36%,transparent),transparent 62%),radial-gradient(60% 80% at 100% 100%,color-mix(in srgb,var(--a3) 26%,transparent),transparent 62%),radial-gradient(50% 70% at 0% 100%,color-mix(in srgb,var(--a1) 20%,transparent),transparent 62%),var(--bg-2)}
/* the mark, very large and very quiet, behind the copy */
.finale__mark{position:absolute;z-index:-1;left:-9%;bottom:-13%;width:82%;height:auto;fill:none;stroke-width:128;opacity:.1}
.ask{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,84px);align-items:center}
.ask__copy{display:grid;gap:clamp(18px,2.2vw,28px)}
.ask__title{font-size:clamp(2.8rem,5.9vw,5.5rem);font-weight:500;letter-spacing:-.05em;line-height:.94;text-wrap:balance}
.ask__lead{font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--ink-2);max-width:24em}
.ask__next{display:grid}
.ask__next li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding-bottom:20px}
.ask__next li:last-child{padding-bottom:0}
.ask__next li:not(:last-child)::before{content:"";position:absolute;left:21.5px;top:48px;bottom:4px;width:1px;background:var(--line)}
.ask__ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 55%,transparent);box-shadow:inset 0 0 0 1px var(--line);color:var(--a1)}
.ask__next div{display:grid;gap:1px;padding-top:1px}
.ask__next b{font-weight:550;letter-spacing:-.02em;font-size:1.0625rem}
.ask__next div span{color:var(--ink-2);font-size:.9688rem;line-height:1.4}
.ask__direct{display:grid}
.ask__direct a{display:inline-flex;align-items:center;gap:10px;min-height:44px}

.flow{position:relative;display:grid;gap:clamp(18px,2.2vw,26px);padding:clamp(20px,3vw,40px);border-radius:clamp(26px,3vw,40px);background:color-mix(in srgb,var(--bg) 78%,transparent);box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -40px rgba(0,0,0,.6)}
.flow__top{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink-3)}
.flow__bar{display:flex;gap:6px;flex:1;max-width:240px}
.flow__bar li{position:relative;flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.flow__bar li::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--a1),var(--a2));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.flow__bar li.is-on::after{transform:none}
/* earlier answers stay in view as chips; tap one to change it */
.flow__trail{display:flex;flex-wrap:wrap;gap:8px;margin-top:-6px}
.flow__trail button{display:inline-flex;align-items:center;gap:8px;height:32px;max-width:100%;padding:0 12px 0 10px;border-radius:999px;font-size:.875rem;color:var(--ink-2);background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--line-2);transition:color .3s,box-shadow .3s;animation:rise .5s var(--ease) backwards}
.flow__trail button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3)}
.flow__trail .ic{width:14px;height:14px;padding:2px;border-radius:50%;stroke-width:3.2;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2));box-sizing:content-box}
.flow__trail span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flow__step{display:none;gap:12px;min-width:0}
.flow__step.is-on{display:grid}
.js .flow__step.is-on{animation:rise .5s var(--ease) backwards}
.flow legend,.flow__done h3{padding:0;margin-bottom:clamp(14px,1.8vw,22px);font-size:clamp(1.6rem,2.8vw,2.375rem);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.flow__done h3{margin-bottom:0}
.flow__done>p{color:var(--ink-2)}
.flow__ok{width:56px;height:56px;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.flow__ok>*{stroke-dasharray:1}
.js .flow__done.is-on .flow__ok circle{animation:lineDraw .8s var(--ease) .1s backwards}
.js .flow__done.is-on .flow__ok path{animation:lineDraw .5s var(--ease) .65s backwards}
.choices{display:grid;gap:10px}
.choice{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 22px;gap:16px;align-items:center;padding:15px 18px 15px 15px;border-radius:22px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;transition:background .3s,box-shadow .3s,transform .5s var(--spring)}
.choice input{position:absolute;inset:0;opacity:0;cursor:pointer}
.choice__ic{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--glass-hi);color:var(--ink-2);transition:background .3s,color .3s}
.choice__tx{display:grid;gap:1px}
.choice b{font-weight:550;letter-spacing:-.02em;font-size:1.0625rem;line-height:1.3}
.choice small{color:var(--ink-3);font-size:.9375rem;line-height:1.35}
.choice::after{content:"";width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .35s var(--ease)}
.choice:hover{background:var(--glass-hi)}
.choice:active{transform:scale(.985)}
.choice:has(input:checked){background:var(--glass-hi);box-shadow:inset 0 0 0 1.5px var(--a2),0 0 0 4px color-mix(in srgb,var(--a2) 18%,transparent)}
.choice:has(input:checked) .choice__ic{background:linear-gradient(140deg,var(--a1),var(--a2));color:#fff}
.choice:has(input:checked)::after{box-shadow:inset 0 0 0 7px var(--a2)}
.choice:has(input:focus-visible){outline:2px solid var(--a1);outline-offset:3px}

.field{position:relative}
.field input,.field textarea{display:block;width:100%;padding:25px 18px 9px;border-radius:18px;border:1px solid var(--line-2);background:var(--well);outline:0;transition:border-color .3s,box-shadow .4s var(--ease);resize:none;-webkit-appearance:none;appearance:none}
.field input{height:62px}
.field textarea{min-height:92px;line-height:1.4;field-sizing:content}
.field label{position:absolute;left:19px;top:19px;color:var(--ink-3);pointer-events:none;transform-origin:left top;transition:transform .45s var(--ease)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-11px) scale(.74)}
.field input:focus,.field textarea:focus{border-color:color-mix(in srgb,var(--a2) 80%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--a2) 22%,transparent)}
.field.is-bad input{border-color:#ff5d6c;box-shadow:0 0 0 4px rgba(255,93,108,.18)}
.flow__sum{margin:0;padding:16px 18px;border-radius:18px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2);font-family:var(--mono);font-size:.8125rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-2)}
.flow__send{display:flex;flex-wrap:wrap;gap:10px}
.flow__also{color:var(--ink-2);font-size:.9688rem}
.flow__nav{display:flex;align-items:center;gap:14px}
.flow__note{flex:1;font-size:.875rem;color:var(--ink-3);line-height:1.4}
.flow__note.is-bad{color:#ff7a86}
.flow__note a{text-decoration:underline;text-underline-offset:.2em}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer{padding:clamp(40px,6vw,88px) 0 28px}
.footer__top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding-bottom:clamp(32px,5vw,72px)}
.footer__tag{font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:500;letter-spacing:-.04em;line-height:1.05;max-width:11em}
.footer__col{display:grid;align-content:start;justify-items:start}
.footer__col .mono{color:var(--ink-3);margin-bottom:8px}
.footer__col a{display:inline-flex;align-items:center;min-height:40px;min-width:44px;color:var(--ink-2);transition:color .3s}
.footer__col a:hover{color:var(--ink)}
.footer__socials{display:grid;justify-items:start}
.footer__socials:empty{display:none}
.footer__mark{display:block;text-align:center;white-space:nowrap;font-size:clamp(3rem,15.4vw,15.25rem);font-weight:600;letter-spacing:-.058em;line-height:.92;padding:.05em 0 .12em;border-top:1px solid var(--line)}
.footer__word{display:inline-block}
@supports (animation-timeline:view()){
  .footer__word{animation:markIn linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
}
@keyframes markIn{from{opacity:.15;transform:translateY(36%)}}
.footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:20px;border-top:1px solid var(--line-2);color:var(--ink-3);font-size:.6875rem}
.footer__base a{display:inline-block;padding:13px 0;margin:-13px 0}
.footer__base a:hover{color:var(--ink)}

/* ── Motion: reveal + word split ────────────────────────────────────────── */
/* The resting state is the finished page. Entrances are animations that play when a block
   scrolls in, so nothing depends on an observer firing to become readable. */
.js [data-reveal].in{animation:rise .8s var(--ease) backwards;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
/* the first screen is held back until the script is ready, then always plays on load */
.js .hero [data-reveal]:not(.in),.js .hero [data-split]:not(.in){opacity:0}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .06em .16em;margin:-.1em -.06em -.16em}
.w>span{display:inline-block}
.js .in .w>span{animation:wordUp .9s var(--ease) backwards;animation-delay:calc(var(--i,0)*55ms)}
@keyframes wordUp{from{transform:translateY(115%)}}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ── Without JavaScript the page still reads top to bottom ──────────────── */
html:not(.js) .loop__svg,html:not(.js) .stall__lines,html:not(.js) .hero__ribbon,html:not(.js) .tl__head,html:not(.js) .flow__top,html:not(.js) .flow__nav,html:not(.js) .flow__done{display:none}
html:not(.js) .lg{opacity:1}
html:not(.js) .tl__panel{grid-area:auto;visibility:visible;opacity:1}
html:not(.js) .lab__view,html:not(.js) .side{display:grid;grid-area:auto;margin-bottom:18px}
html:not(.js) .studio__nav{display:none}
html:not(.js) .tl__panels{gap:18px}
html:not(.js) .flow__step{display:grid;margin-bottom:18px}
html:not(.js) #themeToggle,html:not(.js) .nav__menu{display:none}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .head__title{grid-column:1/-1}
  .head__lead{grid-column:1/span 8;padding-bottom:0}
  .netx,.ask,.board{grid-template-columns:1fr}
  .board__list{grid-auto-rows:auto;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding-bottom:2px}
  .board__list::-webkit-scrollbar{display:none}
  .rost{scroll-snap-align:start;grid-template-areas:"n tx tx" "n spark rev"}
  .studio__body{grid-template-columns:1fr}
  .studio__side{order:-1;grid-template-rows:auto;grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .lab__views{min-height:0}
  .finale__mark{width:130%;left:-20%;bottom:auto;top:-4%}
  .stall{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,48px)}
  .stall__lines,.notes__cap{display:none}
  .phone{grid-column:1/-1;grid-row:1;width:300px}
  .notes{padding:0;justify-content:flex-start}
  .notes--l{align-items:flex-start}
  .legend{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg:nth-child(4){border-left:0}
  .lg:nth-child(n+4){border-top:1px solid var(--line-2)}
  .wall{height:clamp(360px,58vw,520px)}
  .trio{grid-template-columns:1fr}
  .vsx__top{grid-template-columns:1fr}
  .month{order:0;max-width:560px;width:100%;margin-inline:auto}
  .tile,.tile--b,.tile--c{grid-column:span 6}
  .tile--a,.tile--d{grid-column:1/-1}
  .tl__panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tl__what{grid-column:1/-1}
  .rule{grid-template-columns:clamp(48px,8vw,90px) minmax(0,1fr)}
  .rule p{grid-column:2;margin-top:12px}
}
@media (max-width:920px){
  .nav__links{display:none}
  .nav__menu{display:grid}
  .nav__bar{padding-left:20px}
}
@media (max-width:860px){
  .faq{grid-template-columns:1fr}
  .faq__head{position:static;order:0}
  .chat{order:1}
  .head__lead{grid-column:1/-1}
  .brands__in{grid-template-columns:1fr;gap:14px}
  .brands__label{max-width:none}
  .brands__list li{padding:8px clamp(8px,1.6vw,16px);font-size:clamp(1.05rem,2.5vw,1.3rem)}
  @media (max-width:560px){
    .brands__list{display:flex;flex-wrap:wrap;row-gap:10px}
    .brands__list li{justify-items:start;padding:4px 13px;font-size:clamp(1.0625rem,4.9vw,1.375rem)}
  }
  .node text{display:none}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__tag{grid-column:1/-1}
}
@media (max-width:620px){
  body{font-size:1rem}
  .nav{inset:calc(10px + env(safe-area-inset-top,0px)) 0 auto 0}
  .nav__bar,.nav.is-stuck .nav__bar{width:calc(100% - 20px);height:56px;padding:0 7px 0 18px}
  .brand{font-size:1.1875rem}
  .nav__end{gap:2px}
  .nav__end .btn{height:42px;padding:0 14px;font-size:.875rem}
  .hero{padding-top:100px;min-height:min(100svh,840px)}
  .pill{font-size:.75rem;height:32px;gap:8px;padding:0 12px 0 10px}
  .hero__title{font-size:clamp(3rem,13.6vw,4.6rem);margin:.3em 0 .26em}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1 1 100%}
  .hero__stage{min-height:230px}
  .island{height:52px}
  .island__ic{width:36px;height:36px}
  .island__item{padding:0 16px 0 8px;gap:10px}
  .island__tx{font-size:.875rem}
  .island__tag{display:none}
  .avatars img{width:50px;height:50px;margin-left:-12px}
  .wall{gap:8px;height:400px}
  .wall__col{gap:8px}
  .cr{border-radius:14px}
  .cr__views{top:7px;left:7px;height:20px;padding:0 7px 0 6px;font-size:.5rem}
  .cr__who{left:9px;right:9px;bottom:8px;font-size:.6875rem}
  @media (max-width:380px){.cr__who{left:7px;right:7px;font-size:.625rem;letter-spacing:-.02em}}
  .stall{grid-template-columns:1fr}
  .phone{width:min(78vw,290px)}
  .notes{gap:26px}
  .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg:nth-child(n){border-left:0}
  .lg:nth-child(even){border-left:1px solid var(--line-2)}
  .lg:nth-child(n+3){border-top:1px solid var(--line-2)}
  .wall__cap{bottom:10px;height:30px;padding:0 12px;font-size:.5625rem}
  .wall.is-live .wall__col{padding-bottom:8px}
  .vs table,.vs thead,.vs tbody{display:block}
  .vs tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .vs thead th:first-child{display:none}
  .vs th,.vs td{padding:12px 12px 14px}
  .vs tbody th:first-child{grid-column:1/-1;width:auto;border-bottom:0;padding:14px 12px 0;font-size:.5625rem}
  .vs__c{flex-direction:column;gap:7px}
  .vs__hi{border-radius:22px;top:-6px;bottom:-6px;right:-6px;width:calc(50% + 10px);transform:translateX(calc(-100% + 10px))}
  .ui-creators{padding:24px 12px}
  .board__list{grid-auto-columns:max-content}
  .rost{grid-template-columns:auto auto;grid-template-areas:"n tx" "n rev";row-gap:2px;padding:12px 18px 15px 14px}
  .rost__tx span,.rost__spark{display:none}
  .rost__rev{font-size:1rem;color:var(--ink-3)}
  .rost.is-on .rost__rev{color:var(--a1)}
  .board__top{flex-direction:column-reverse;gap:10px}
  .board__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board__stats li:nth-child(3){padding-left:0;border-left:0}
  .board__stats li:nth-child(n+3){border-top:1px solid var(--line-2);margin-top:14px}
  .chart__months span:nth-child(even){display:none}
  .studio__file .mono{display:none}
  .avatars--sm img:nth-child(n+4){display:none}
  .sent__tx .mono{display:none}
  .sent__tx b{white-space:nowrap;font-size:.875rem}
  .studio__steps{gap:6px}
  .lab__tab{flex-direction:column;align-items:flex-start;gap:6px;min-height:0;padding:12px 12px 14px;border-radius:18px}
  .lab__tab .brief__ic{display:none}
  .lab__tab b{font-size:.9375rem}
  .studio__bar{padding:12px 14px}
  .studio__dots{display:none}
  .studio__bar{grid-template-columns:minmax(0,1fr) auto}
  .scan__card{border-radius:16px}
  .scan__card.is-top{transform:translateY(-8px) scale(1.04)}
  .scan__fmt{top:7px;left:7px;height:20px;padding:0 7px;font-size:.5rem}
  .scan__card figcaption{left:8px;right:8px;bottom:8px}
  .scan__card b{font-size:.8125rem}
  .scan__card figcaption .mono{display:none}
  .paper{transform:none}
  .paper__cols{grid-template-columns:1fr;gap:12px}
  .sent{border-radius:22px}
  .studio__side{grid-template-columns:1fr}
  .studio__nav{display:none}
  .refs figure{border-radius:12px}
  .bento{gap:12px}
  .tile,.tile--a,.tile--b,.tile--c,.tile--d{grid-column:1/-1}
  .tile__ui{min-height:230px}
  .ui-health,.ui-live{grid-template-columns:1fr;justify-items:center}
  .ui-health .rows,.ui-live .rows,.ui-live__stage{width:100%}
  .clip{width:98px;border-radius:16px}
  .clip--1,.tile:hover .clip--1{transform:translateX(-102px) rotate(-7deg) scale(.92)}
  .clip--3,.tile:hover .clip--3{transform:translateX(102px) rotate(7deg) scale(.92)}
  .pipe{gap:8px 19px;font-size:.6875rem}
  .pipe li{padding:0 9px}
  .pipe li+li::before{right:calc(100% + 4px)}
  .tl__bar{padding:12px 10px 14px}
  .tl__ruler,.tl__track{grid-template-columns:minmax(0,2.6fr) repeat(12,minmax(0,1fr))}
  .tl__ruler{font-size:.5625rem}
  .tl__ruler span{padding-left:3px}
  .tl__clip{padding:0 10px;border-radius:12px;margin:0 1px}
  .tl__panel{grid-template-columns:1fr}
  .rule{grid-template-columns:1fr;row-gap:10px}
  .rule p{grid-column:1;margin-top:4px}
  .callx__title{font-size:clamp(2.9rem,14.4vw,5rem)}
  .book{width:100vw;height:100dvh;border-radius:0}
  .book__out{display:none}
  .book__bar{grid-template-columns:auto minmax(0,1fr) auto;padding:10px 10px 10px 14px}
  .choice{grid-template-columns:42px minmax(0,1fr) 20px;gap:12px;padding:13px 14px 13px 13px}
  .choice__ic{width:42px;height:42px;border-radius:14px}
  .flow__nav{flex-wrap:wrap}
  .flow__note{flex-basis:100%;order:3}
  .flow__nav #flowNext{flex:1}
  .chat.is-live{height:min(82svh,640px)}
  .chat__thread{padding:16px}
  .qchip{height:44px;padding:0 14px;font-size:.875rem}
  .chat__bar{padding:14px 16px}
  .chat__tray{flex-wrap:nowrap;overflow-x:auto;padding:14px 16px 16px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:16px;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .chat__tray::-webkit-scrollbar{display:none}
  .chat__tray .qchip{flex:none;scroll-snap-align:start}
  .chat__tray .qchip:last-child{margin-right:48px}
  .msg{max-width:92%}
  .footer__base{flex-direction:column}
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important}
  .wave i{transform:scaleY(.7)}
  .dial::after,.wall.is-live .wall__col,.hero__stage,.footer__word,.nav__bar::after,.rule,.rule::after{animation:none!important}
  .js .hero [data-reveal]:not(.in),.js .hero [data-split]:not(.in){opacity:1}
}