/* NinetyTen Labs marketing site. Light, calm and confident, with depth and motion as the fun layer.
   Tokens first; every section reads from them. Motion is off under reduced motion. */
:root{
 --bg:#faf9f7;--bg2:#f2f0ec;--card:#fff;--ink:#101014;--ink2:#2c2c34;--muted:#62626d;--dim:#71717b;
 --line:rgba(16,16,20,.08);--line2:rgba(16,16,20,.14);
 --peach:#ff8a5c;--pink:#ff4f9a;--violet:#8b7bff;--accent:#ff4f9a;
 --grad:linear-gradient(100deg,#ff8a5c,#ff4f9a 48%,#8b7bff);
 --grad-ink:linear-gradient(100deg,#cc4216,#d42a78 48%,#6d5ae6); /* same hues, deep enough for white text (4.5:1) */
 --night:#0b0a10;--night2:#15131c;--nline:rgba(255,255,255,.09);
 --r:18px;--r-lg:28px;--pill:999px;
 --shadow:0 40px 80px -40px rgba(52,24,70,.35),0 10px 24px -14px rgba(52,24,70,.22);
 --ease:cubic-bezier(.22,1,.36,1);
 --wrap:1200px;--pad:clamp(72px,9vw,120px);
 color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 Geist,system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
p{margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:100}.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--grad)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--muted);max-width:560px}
.muted{color:var(--muted)}
.sec{padding:var(--pad) 0;position:relative}
.sec-head{display:grid;gap:14px;max-width:720px;margin-bottom:48px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head h2,.h2{font-size:clamp(36px,5vw,64px)}
.rule{border-top:1px solid var(--line)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--pill);border:0;background:var(--ink);color:#fff;font:500 15px/1 Geist,sans-serif;text-decoration:none;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn::before{content:'';position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .25s var(--ease);z-index:-1}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(255,79,154,.55)}.btn:hover::before{opacity:1}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}.btn-ghost::before{display:none}.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.link-arrow{display:inline-flex;gap:6px;align-items:center;font-weight:500;text-decoration:none}.link-arrow::after{content:'\2192';transition:transform .2s var(--ease)}.link-arrow:hover::after{transform:translateX(3px)}

/* nav */
.nav{position:sticky;top:0;z-index:50;transition:background .25s,box-shadow .25s}
/* The glass sits on a layer behind the bar, not on the bar itself: a blur on the bar would trap the
   fixed phone menu inside the bar's 68px box (the menu shrank to a sliver once the page scrolled). */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:background .25s,box-shadow .25s}
.nav.scrolled::before{background:rgba(250,249,247,.74);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center}.brand-logo{height:15px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px;flex:1}
.nav-a,.dd-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;border:0;background:none;font:500 14px/1 Geist,sans-serif;color:var(--ink2);text-decoration:none;cursor:pointer}
.nav-a:hover,.dd-btn:hover,.dd-btn[aria-expanded=true]{background:rgba(16,16,20,.05)}
.dd{position:relative}
.dd-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:320px;padding:8px;border-radius:16px;background:rgba(255,255,255,.94);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:var(--shadow),0 0 0 1px var(--line);display:grid;gap:2px;animation:pop .22s var(--ease)}
.dd-panel[hidden]{display:none}
.dd-panel a{display:grid;gap:2px;padding:10px 12px;border-radius:10px;text-decoration:none}.dd-panel a:hover{background:var(--bg2)}
.dd-panel b{font-weight:500;font-size:14px}.dd-panel span{font-size:13px;color:var(--muted)}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:auto}
.burger{display:none;width:40px;height:40px;border:0;background:none;border-radius:10px;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease)}.burger span:first-child{top:16px}.burger span:last-child{top:23px}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.burger[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.sheet{position:fixed;inset:var(--sheet-top,68px) 0 0;background:var(--bg);padding:16px 24px 40px;overflow:auto;display:grid;align-content:start;gap:2px;z-index:49}
.sheet[hidden]{display:none}
.sheet a{padding:12px 0;font-size:18px;text-decoration:none;border-bottom:1px solid var(--line)}.sheet .btn{margin-top:20px;border:0;font-size:16px}
.sheet-h{font:500 11px/1 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:18px 0 4px}

/* depth layers: moved by site.js at their own scroll rate */
.depth{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.depth>*{position:absolute}
.blob{border-radius:50%;filter:blur(60px);opacity:.55}
.b1{width:520px;height:520px;background:radial-gradient(circle at 30% 30%,#ffb08f,transparent 65%);top:-120px;right:8%}
.b2{width:560px;height:560px;background:radial-gradient(circle at 60% 40%,#ff7ab8,transparent 62%);top:120px;right:-160px;opacity:.4}
.b3{width:520px;height:520px;background:radial-gradient(circle at 50% 50%,#a99cff,transparent 64%);top:260px;left:-200px;opacity:.35}
.gridlines{inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 60% at 60% 30%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 30%,#000 20%,transparent 75%);opacity:.7}
.sheen{inset:-20% -10%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);animation:sheen 16s linear infinite}
@keyframes sheen{from{transform:translateX(-40%)}to{transform:translateX(40%)}}

/* hero */
.hero{position:relative;padding:40px 0 48px;overflow:clip}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:40px;min-height:min(740px,calc(100svh - 68px))}
.hero h1{font-size:clamp(48px,6.3vw,92px);letter-spacing:-.05em;line-height:.95;margin:22px 0}
.hero .lede{margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hero-note{margin-top:18px;font-size:13px;color:var(--dim)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:var(--pill);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--ink2);backdrop-filter:blur(8px)}
.pill b{padding:3px 8px;border-radius:var(--pill);background:var(--grad);color:#fff;font-weight:500;font-size:11px}
.page-hero{padding:88px 0 40px}.page-hero .hero-in{grid-template-columns:1fr;min-height:0;max-width:820px}
.page-hero h1{font-size:clamp(44px,6vw,80px)}
.hero-glow{display:none}

/* phones */
.phone{position:relative;aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#1a1820;box-shadow:var(--shadow),0 0 0 6px #fff,0 0 0 7px var(--line);isolation:isolate}
.phone>video,.phone>img{width:100%;height:100%;object-fit:cover}
.phone .tag{position:absolute;left:10px;top:10px;z-index:3;padding:5px 9px;border-radius:var(--pill);background:rgba(10,10,14,.45);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);color:#fff;font-size:11px;font-weight:500}
.stage{position:relative;height:640px}
.stage .phone{position:absolute;width:210px}
.stage .p1{left:50%;top:40px;z-index:3;width:250px;margin-left:-125px}
.stage .p2{left:2%;top:120px;transform:rotate(-8deg);z-index:2}
.stage .p3{right:1%;top:110px;transform:rotate(7deg);z-index:2}
.stage .p4{left:-10%;top:330px;transform:rotate(-14deg) scale(.78);z-index:1}
.stage .p5{right:-11%;top:340px;transform:rotate(13deg) scale(.76);z-index:1}
.chip{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:14px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);font-size:13px;font-weight:500;white-space:nowrap;animation:float 6s ease-in-out infinite}
.chip i{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--grad);color:#fff;font-style:normal;font-size:12px}
.chip small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.c1{left:0;top:30px}.c2{right:-2%;top:6px;animation-delay:-2s}.c3{left:2%;bottom:70px;animation-delay:-4s}.c4{right:2%;bottom:34px;animation-delay:-1s}
@keyframes float{50%{transform:translateY(-8px)}}

/* live captions over video (the hero and the styles demo) */
.caps{position:absolute;left:7%;right:7%;bottom:15%;z-index:2;text-align:center;font:800 22px/1.15 Geist,sans-serif;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5);pointer-events:none}
.caps span{display:inline-block;margin:0 .1em;opacity:0;transform:translateY(6px) scale(.9);transition:all .18s var(--ease)}
.caps span.on{opacity:1;transform:none}
.caps span.now{color:#ffd24a}
.caps.s-pop span.now{color:#ffd24a;transform:scale(1.16)}
.caps.s-highlight span.now{color:#fff;background:var(--pink);border-radius:6px;padding:0 .14em}
.caps.s-boxed{font-weight:700;text-shadow:none}.caps.s-boxed span{background:rgba(0,0,0,.78);padding:.06em .22em;border-radius:4px;margin:0 .03em}.caps.s-boxed span.now{color:#fff;background:#000}
.caps.s-minimal{font:500 16px/1.3 Geist,sans-serif;letter-spacing:0;bottom:8%;text-shadow:0 1px 6px rgba(0,0,0,.7)}.caps.s-minimal span{opacity:1;transform:none}.caps.s-minimal span.now{color:#fff}
.caps.s-editorial{font:italic 500 27px/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.01em}.caps.s-editorial span.now{color:#ffd9c2}
.caps.s-neon{color:#b8fff7;text-shadow:0 0 8px #00e5ff,0 0 20px #ff4f9a;font-weight:800}.caps.s-neon span.now{color:#fff}
.caps.s-type{font:500 18px/1.3 'Geist Mono',monospace;letter-spacing:0;text-transform:lowercase}.caps.s-type span{transform:none;transition:opacity .05s}.caps.s-type span.now{color:#fff;box-shadow:2px 0 0 #fff}
.caps.s-clean{font:600 19px/1.2 Geist,sans-serif}.caps.s-clean span.now{color:#fff}

/* marquee */
.marquee{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.logo{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:500;color:var(--ink2);white-space:nowrap}
.logo svg{width:24px;height:24px;fill:currentColor}
.platforms{padding:20px 0 40px;position:relative;z-index:1}
.platforms p{text-align:center;font-size:13px;color:var(--muted);margin-bottom:22px}

/* format rail */
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px max(24px,calc((100vw - var(--wrap))/2 + 24px)) 40px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.fmt{flex:none;width:240px;scroll-snap-align:start;display:grid;gap:14px;align-content:start}
.fmt:nth-child(even){margin-top:48px}
.fmt .phone{box-shadow:var(--shadow),0 0 0 5px #fff,0 0 0 6px var(--line)}
.fmt h3{font-size:17px;letter-spacing:-.02em}.fmt p{font-size:14px;color:var(--muted);margin-top:4px}
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rail-btns{display:flex;gap:8px}
.rail-btns button{width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer;font-size:18px;color:var(--ink)}
.rail-btns button:hover{box-shadow:inset 0 0 0 1px var(--ink)}

/* carousel mock (a real, swipeable carousel) */
.carousel{background:#fbf7f2}
.carousel .slides{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.carousel .slides::-webkit-scrollbar{display:none}
.slide{flex:none;width:100%;height:100%;scroll-snap-align:center;padding:30px 22px 34px;display:flex;flex-direction:column;justify-content:space-between;background:#fbf7f2;color:#15131b}
.slide h4{margin:0;font-size:24px;line-height:1.05;letter-spacing:-.035em;font-weight:650}
.slide p{font-size:13.5px;line-height:1.45;color:#4d4b55}
.slide .n{font:500 11px/1 'Geist Mono',monospace;color:#9a96a3}
.slide.cover{background:linear-gradient(160deg,#ff8a5c,#ff4f9a 55%,#8b7bff);color:#fff}.slide.cover p,.slide.cover .n{color:rgba(255,255,255,.88)}.slide.cover h4{font-size:30px}
.slide.dark{background:#16141d;color:#fff}.slide.dark p{color:#bdbac6}
.slide .big{font-size:60px;font-weight:650;letter-spacing:-.05em;line-height:1}
.dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:5px;justify-content:center;z-index:2}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.22);transition:all .25s}.dots i.on{width:16px;border-radius:4px;background:#15131b}
.dots.light i{background:rgba(255,255,255,.5)}.dots.light i.on{background:#fff}

/* text post mock */
.post{background:#fff;padding:18px 16px;display:flex;flex-direction:column;gap:12px;color:#15131b;font-size:13px;line-height:1.5}
.post-h{display:flex;gap:10px;align-items:center}.post-h span{width:36px;height:36px;border-radius:50%;background:var(--grad);flex:none}.post-h b{font-size:13px;display:block}.post-h small{font-size:11px;color:#8d8a96}
.post .link{border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}.post .link div{height:90px;background:linear-gradient(135deg,#ffd9c8,#ffc2e0 50%,#d8d1ff)}.post .link p{padding:8px 10px;font-size:12px;font-weight:600}
.post .react{display:flex;gap:14px;font-size:11px;color:#8d8a96;margin-top:auto}

/* caption styles demo */
.styles{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.styles .phone{width:min(330px,78vw);margin:0 auto}
.style-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.style-chips button{height:40px;padding:0 16px;border-radius:var(--pill);border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line2);font:500 14px/1 Geist,sans-serif;color:var(--ink);cursor:pointer;transition:all .2s var(--ease)}
.style-chips button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.style-chips button:hover{box-shadow:inset 0 0 0 1px var(--ink)}

/* blueprint (study the greats) */
.bp{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.bp-board{position:relative;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);padding:18px;overflow:hidden}
.bp-top{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.bp-top .search{flex:1;height:38px;border-radius:12px;background:var(--bg2);display:flex;align-items:center;padding:0 12px;font-size:13px;color:var(--muted);gap:8px}
.bp-top .search b{color:var(--ink);font-weight:500}
.bp-top .go{height:38px;padding:0 14px;border-radius:12px;background:var(--grad);color:#fff;font-size:13px;display:flex;align-items:center;font-weight:500}
.bp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.bp-tile{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:var(--bg2);opacity:0;transform:translateY(-40px) rotate(var(--rot,0deg)) scale(.9)}
.in .bp-tile{animation:fly .7s var(--ease) forwards;animation-delay:calc(var(--i)*50ms)}
@keyframes fly{to{opacity:1;transform:none}}
.bp-tile img{width:100%;height:100%;object-fit:cover}
.bp-tile .g{position:absolute;inset:0;background:linear-gradient(160deg,var(--c1),var(--c2))}
.bp-tile em{position:absolute;left:5px;bottom:5px;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.92);font:500 9.5px/1.3 Geist,sans-serif;font-style:normal;color:var(--ink)}
.bp-tile.hot{box-shadow:0 0 0 2px var(--pink),0 0 22px rgba(255,79,154,.55)}
.in .bp-tile.hot{animation:fly .7s var(--ease) forwards,glow 2.6s ease-in-out 1.4s infinite;animation-delay:calc(var(--i)*50ms),1.4s}
@keyframes glow{50%{box-shadow:0 0 0 2px var(--violet),0 0 30px rgba(139,123,255,.6)}}
.bp-card{position:absolute;right:18px;bottom:18px;width:260px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);font-size:12.5px;z-index:3}

.bp-card b{display:block;font-size:13px;margin-bottom:6px}.bp-card ol{margin:0;padding-left:18px}.bp-card li{margin:3px 0;color:var(--ink2)}
.bp-card small{display:block;margin-top:8px;color:var(--muted)}
.niches{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.niches span{padding:7px 12px;border-radius:var(--pill);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.points{display:grid;gap:16px;margin-top:28px}
.points div{display:flex;gap:12px;align-items:flex-start}.points i{flex:none;width:28px;height:28px;border-radius:9px;background:var(--grad);color:#fff;display:grid;place-items:center;font:600 12px/1 'Geist Mono',monospace;font-style:normal}
.points b{display:block;font-weight:500}.points span{color:var(--muted);font-size:15px}

/* the loop (dark, sticky) */
.night{background:var(--night);color:#fff;position:relative;overflow:clip}
.night .lede,.night .muted,.night .eyebrow{color:#a9a6b4}
.night .depth .blob{opacity:.26}
.loop{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;position:relative;z-index:1}
.loop-sticky{position:sticky;top:96px;height:calc(100vh - 140px);max-height:620px;display:grid;place-items:center}
.screen{position:relative;width:min(470px,100%);height:520px;border-radius:26px;background:var(--night2);box-shadow:0 0 0 1px var(--nline),0 60px 120px -40px rgba(255,79,154,.4);overflow:hidden}
.screen-bar{display:flex;gap:6px;padding:14px 16px;border-bottom:1px solid var(--nline);align-items:center;font:500 11px/1 'Geist Mono',monospace;color:#8f8b9c}
.screen-bar i{width:8px;height:8px;border-radius:50%;background:#2c2935}.screen-bar span{margin-left:10px}
.scene{position:absolute;inset:44px 0 0;padding:22px;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.scene.on{opacity:1;transform:none}
.scene h5{margin:0 0 14px;font:500 12px/1 'Geist Mono',monospace;color:#8f8b9c;letter-spacing:.06em;text-transform:uppercase}
.steps{padding:10vh 0 16vh;position:relative}
.step{min-height:52vh;display:flex;flex-direction:column;justify-content:center;gap:12px;opacity:.25;transition:opacity .4s}
.step.on{opacity:1}
.step .num{font:500 12px/1 'Geist Mono',monospace;color:#8f8b9c}
.step h3{font-size:clamp(36px,4.2vw,56px)}
.step p{color:#a9a6b4;font-size:18px;max-width:430px}
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mini-grid span{aspect-ratio:9/16;border-radius:8px;background:#221f2b;position:relative;overflow:hidden}
.mini-grid span.hot{box-shadow:0 0 0 2px var(--pink),0 0 18px rgba(255,79,154,.5)}
.mini-grid span img{width:100%;height:100%;object-fit:cover;opacity:.9}
.mini-label{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}.mini-label em{font-style:normal;font-size:11px;padding:5px 9px;border-radius:999px;background:#211e2a;color:#d6d3de}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal span{aspect-ratio:1;border-radius:8px;background:#1d1a25;position:relative;font:500 9px/1 'Geist Mono',monospace;color:#6c6878;padding:5px}
.cal span.film{background:var(--grad);color:#fff}
.cal span i{position:absolute;left:5px;bottom:5px;width:7px;height:7px;border-radius:50%}
.cal .r i{background:#ff8a5c}.cal .c i{background:#8b7bff}.cal .t i{background:#ff4f9a}
.legend{display:flex;gap:14px;margin-top:14px;font-size:11px;color:#a9a6b4}.legend span{display:flex;gap:6px;align-items:center}.legend i{width:7px;height:7px;border-radius:50%}
.rec{position:relative;height:100%;border-radius:16px;overflow:hidden}.rec video{width:100%;height:100%;object-fit:cover}
.rec b{position:absolute;left:12px;top:12px;display:flex;gap:6px;align-items:center;font:500 11px/1 'Geist Mono',monospace;background:rgba(0,0,0,.5);padding:6px 9px;border-radius:999px}
.rec b::before{content:'';width:7px;height:7px;border-radius:50%;background:#ff3b5c;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.timeline{display:grid;gap:10px}
.tl-row{height:44px;border-radius:10px;background:#1d1a25;position:relative;overflow:hidden;display:flex;align-items:center;gap:2px;padding:0 8px}
.tl-row b{flex:1;height:var(--h);background:#4a4458;border-radius:2px}
.tl-cut{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(255,79,154,.35) 0 6px,rgba(255,79,154,.12) 6px 12px);border-left:1px solid var(--pink);border-right:1px solid var(--pink)}
.tl-cut em{position:absolute;top:3px;left:4px;font:500 9px/1 'Geist Mono',monospace;font-style:normal;color:#ffd0e4}
.tl-cap{display:flex;gap:6px;flex-wrap:wrap}.tl-cap span{font-size:11px;padding:6px 9px;border-radius:8px;background:#211e2a;color:#d6d3de}.tl-cap span.on{background:var(--grad);color:#fff}
.versions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.versions div{aspect-ratio:9/16;border-radius:10px;overflow:hidden;position:relative}.versions img{width:100%;height:100%;object-fit:cover}
.versions em{position:absolute;left:6px;top:6px;font:500 10px/1 'Geist Mono',monospace;font-style:normal;background:rgba(0,0,0,.55);padding:4px 6px;border-radius:6px}
.sched{display:grid;gap:8px}
.sched div{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#1d1a25;font-size:13px}
.sched svg{width:18px;height:18px;fill:#fff;flex:none}.sched small{margin-left:auto;color:#8f8b9c;font:500 11px/1 'Geist Mono',monospace}
.sched .ok{margin-left:8px;font-size:11px;padding:3px 7px;border-radius:999px;background:rgba(255,79,154,.18);color:#ffc0dc}
.dm{display:grid;gap:10px}
.bubble{max-width:80%;padding:10px 13px;border-radius:16px;font-size:13px;line-height:1.4}
.bubble.them{background:#211e2a;border-bottom-left-radius:4px}
.bubble.us{margin-left:auto;background:var(--grad);border-bottom-right-radius:4px}
.bubble.card{margin-left:auto;background:#fff;color:#15131b;border-bottom-right-radius:4px;padding:0;overflow:hidden;width:220px}
.bubble.card div{height:80px;background:linear-gradient(135deg,#ffd9c8,#ffc2e0 50%,#d8d1ff)}.bubble.card p{padding:9px 12px;font-weight:600;font-size:12.5px}
.dm-meta{font:500 10px/1 'Geist Mono',monospace;color:#8f8b9c;text-align:center}

/* month */
.month{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.month-cal{background:#fff;border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.month-cal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-weight:600}
.month-cal header small{font-weight:400;color:var(--muted)}
.mc{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mc span{aspect-ratio:1/.86;border-radius:10px;background:var(--bg2);padding:6px;font:500 10px/1 'Geist Mono',monospace;color:var(--dim);position:relative;overflow:hidden}
.mc span.film{background:var(--ink);color:#fff}
.mc span.film::after{content:'Film';position:absolute;left:6px;bottom:6px;font:600 11px/1 Geist,sans-serif;color:#fff}
.mc span i{position:absolute;left:6px;right:6px;bottom:6px;height:14px;border-radius:5px}

.mc .r i{background:linear-gradient(90deg,#ffb08f,#ff8a5c)}.mc .c i{background:linear-gradient(90deg,#b7adff,#8b7bff)}.mc .t i{background:linear-gradient(90deg,#ff9ccb,#ff4f9a)}
.mc-legend{display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}.mc-legend span{display:flex;align-items:center;gap:6px}.mc-legend i{width:12px;height:8px;border-radius:3px}

/* compare */
.cmp-wrap{overflow-x:auto;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.cmp{width:100%;min-width:780px;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:14px 12px;text-align:center;border-bottom:1px solid var(--line)}
.cmp thead th{font-weight:500;font-size:13px;color:var(--muted);padding-top:20px}
.cmp th:first-child,.cmp td:first-child{text-align:left;position:sticky;left:0;background:#fff;z-index:1;min-width:230px;padding-left:22px}
.cmp tr:last-child td{border-bottom:0}
.cmp .us{background:linear-gradient(180deg,rgba(255,79,154,.07),rgba(139,123,255,.07))}
.cmp th.us{color:var(--ink);font-weight:600}
.yes,.part,.no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:600}
.yes{background:var(--ink);color:#fff}.us .yes{background:var(--grad)}
.part{box-shadow:inset 0 0 0 1.5px var(--dim);color:var(--muted);font-size:10px}
.no{color:#8f8c98}
.cmp-note{margin-top:16px;font-size:13px;color:var(--dim);display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.cmp-note span{display:inline-flex;gap:6px;align-items:center}.cmp-note .yes,.cmp-note .part{width:18px;height:18px;font-size:10px}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:var(--r-lg);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.plan.main{background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:var(--shadow)}
.price{display:flex;align-items:baseline;gap:6px}.price span{font-size:48px;font-weight:600;letter-spacing:-.04em}.price small{color:var(--muted)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.plan li{display:flex;gap:10px}.plan li::before{content:'';flex:none;width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--grad)}
.plan li.plan-plus{font-weight:600}.plan li.plan-plus::before{display:none}
.plan .btn{margin-top:auto}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.plan-badge{position:absolute;top:-12px;right:20px;padding:5px 10px;border-radius:var(--pill);background:var(--grad);color:#fff;font-size:12px;font-weight:500}
.toggle{display:inline-flex;padding:3px;border-radius:var(--pill);background:var(--bg2)}
.toggle button{height:30px;padding:0 12px;border-radius:var(--pill);border:0;background:none;font:500 13px/1 Geist,sans-serif;color:var(--muted);cursor:pointer}
.toggle button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.credits-strip{margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.buy-any{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}.buy-any b{font-weight:600}.buy-any span{color:var(--muted);font-size:14px}

/* doors, tiles, features (secondary pages share these) */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile,.door{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--r-lg);background:#fff;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.door:hover{transform:translateY(-3px);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.tile h3,.door h3{font-size:22px;letter-spacing:-.03em}
.tile p,.door p{color:var(--muted);font-size:15px}
.tile .k,.door .k{font:500 11px/1 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.tile a{color:var(--ink)}
.tile .tile-note{margin-top:auto;padding-top:4px;font-size:13px;color:var(--dim)}
@media (min-width:561px) and (max-width:980px){.grid3.feats{grid-template-columns:1fr 1fr}}
.door .mediabox{height:200px;border-radius:16px;overflow:hidden;margin:-10px -10px 8px}.door .mediabox video,.door .mediabox img{width:100%;height:100%;object-fit:cover}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feat-copy{display:grid;gap:16px}.feat-copy h2{font-size:clamp(34px,4.4vw,56px)}
.panel{border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);padding:24px;overflow:hidden}
.panel .phone{width:min(260px,70%);margin:0 auto}
.faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.faq details{border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);padding:0 20px}
.faq summary{padding:18px 0;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';color:var(--muted);transition:transform .2s}.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 18px;color:var(--muted)}

/* final CTA */
.final{position:relative;overflow:hidden;background:var(--night);color:#fff;padding:clamp(96px,12vw,150px) 0 0;text-align:center}
.final-in{position:relative;z-index:1;display:grid;justify-items:center;gap:22px}
.final h2{font-size:clamp(44px,7vw,96px);letter-spacing:-.05em}
.final .lede{color:#a9a6b4;margin:0 auto}
.final .btn{background:#fff;color:var(--ink)}.final .btn:hover{color:#fff}
.final-reel{margin-top:64px;height:220px;overflow:hidden;mask-image:linear-gradient(#000 40%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(#000 40%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in}

.final-track{display:flex;gap:16px;width:max-content;animation:marq 60s linear infinite}
.final-reel .phone{flex:none;width:130px;height:231px;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.final-reel .phone:nth-child(even){margin-top:36px}

/* footer */
.foot{background:var(--night);color:#d8d6de;border-top:1px solid var(--nline);padding:56px 0 28px;font-size:14px}
.foot-in{display:grid;grid-template-columns:1.2fr 2fr;gap:40px}
.foot-brand p{margin-top:14px;color:#8f8b9c}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot-cols p{font:500 11px/1 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#8f8b9c;margin-bottom:12px}
.foot-cols a{display:block;padding:5px 0;text-decoration:none;color:#d8d6de}.foot-cols a:hover{color:#fff}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--nline);color:#8f8b9c;font-size:13px}

/* reveals */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* responsive */
@media (max-width:980px){
 .nav-links,.signin{display:none}.burger{display:block}
 .hero-in,.styles,.bp,.loop,.month,.feat{grid-template-columns:1fr}
 .hero-in{min-height:0;gap:8px}
 .stage{height:540px}
 .stage .p1{width:220px;margin-left:-110px}.stage .p2{width:170px;left:0}.stage .p3{width:170px;right:0}.stage .p4,.stage .p5{display:none}
 .loop-sticky{position:relative;top:0;height:auto;max-height:none;order:-1}
 .screen{height:460px}
 .steps{padding:24px 0 0}.step{min-height:0;padding:16px 0 16px 18px;opacity:1;border-left:2px solid var(--nline);cursor:pointer;transition:border-color .3s}
 .step.on{border-left-color:var(--pink)}
 .step.on .num{color:#ffc0dc}
 .plans,.grid3{grid-template-columns:1fr}
 .foot-in{grid-template-columns:1fr}
 .bp-card{position:relative;right:auto;bottom:auto;width:auto;margin-top:12px}
}
@media (max-width:560px){
 .wrap,.nav-in{padding:0 16px}
 .hero{padding-top:16px}
 .hero h1{margin:16px 0}
 .stage{height:430px;margin-top:28px}
 .stage .p1{width:180px;margin-left:-90px;top:24px}.stage .p2,.stage .p3{width:130px;top:90px}
 .chip{font-size:12px;padding:7px 10px}.c3,.c4{display:none}.c1{left:0;top:6px}.c2{right:0;top:auto;bottom:10px}
 .fmt{width:200px}.fmt:nth-child(even){margin-top:0}
 .bp-grid{grid-template-columns:repeat(4,1fr)}.bp-grid .bp-tile:nth-child(n+17){display:none}
 .foot-cols{grid-template-columns:1fr 1fr}
 .credits-strip{grid-template-columns:1fr}
 .screen{height:420px}
 .rail{padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .rv,.bp-tile,.sq:not(.off){opacity:1!important;transform:none!important}
 .final-track{width:auto;justify-content:center}
 .final-track .phone:nth-child(n+9){display:none}
 .caps span{opacity:1;transform:none}
 .marquee-track{flex-wrap:wrap;justify-content:center;width:auto}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* caption presets that mirror the app's styles */
.caps.s-punchy{font:900 24px/1 Geist,sans-serif;text-transform:uppercase;letter-spacing:-.03em}.caps.s-punchy span.now{color:#7bff5a}
.caps.s-popline{font:600 19px/1.25 Geist,sans-serif}.caps.s-popline span.now{color:#5ee7ff}
.caps.s-educator{font:700 17px/1.4 Geist,sans-serif;color:#15131b;text-shadow:none}.caps.s-educator span{background:#fff;padding:0 .2em;border-radius:4px;margin:.05em}.caps.s-educator span.now{background:#ffe36e;color:#15131b}
.caps.s-deep{font:600 14px/1.6 Geist,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:#efe9df}.caps.s-deep span.now{color:#fff}
/* legal pages */
.legal{padding-top:64px}.legal-in{max-width:760px}
.legal h1{font-size:clamp(36px,5vw,56px);margin:14px 0 10px}
.legal h2{font-size:22px;letter-spacing:-.02em;margin:36px 0 10px}
.legal p,.legal li{font-size:16px;line-height:1.7;color:var(--ink2)}
.legal ul{padding-left:20px;display:grid;gap:8px}
.legal a{color:var(--pink)}
/* trust strip */
.trust{padding:8px 0 24px}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.trust-in div{display:grid;gap:4px;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.trust-in b{font-weight:600;font-size:15px;letter-spacing:-.01em}.trust-in span{font-size:14px;color:var(--muted)}
/* segment page heroes with product in view */
.page-hero.with-media .hero-in{grid-template-columns:1.1fr .9fr;max-width:var(--wrap)}
.hero-media{position:relative;height:440px}
.hero-media .phone{position:absolute;width:200px}
.hero-media .phone:first-child{right:34%;top:10px;transform:rotate(-6deg);z-index:1}
.hero-media .phone:last-child{right:4%;top:40px;transform:rotate(5deg);z-index:2;width:220px}
.trust-line{margin-top:14px;font-size:14px;color:var(--muted);text-align:center}
/* tap targets and readable sizes on phones */
@media (max-width:980px){.page-hero.with-media .hero-in{grid-template-columns:1fr}.hero-media{height:380px}.trust-in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
 .burger{width:44px;height:44px}.burger span{left:13px;right:13px}.burger span:first-child{top:18px}.burger span:last-child{top:25px}
 .toggle button{height:44px;padding:0 16px}
 .foot-cols p,.eyebrow,.slide .n,.phone .tag,.fmt p,.cmp-note{font-size:12px}
 .foot-cols a{padding:9px 0}
 .hero-media{height:320px}.hero-media .phone{width:150px}.hero-media .phone:last-child{width:165px}
 .trust-in{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------------------------
   Living previews. Every mock of what the app makes moves: clips play with a playhead, captions land
   word by word, boards scan, calendars fill, schedules tick over, DMs arrive. Sequences are driven by
   site.js ([data-seq] steps its [data-s] children); everything here animates transform and opacity
   only, and all of it stops under reduced motion (the block above), leaving the finished state. */

/* captions scale with the phone they sit on, so a small phone never gets a giant caption */
.phone{container-type:inline-size}
.phone .caps{font-size:clamp(10px,8.8cqw,22px)}
.phone .caps.s-punchy{font-size:clamp(11px,9.6cqw,24px)}
.phone .caps.s-popline,.phone .caps.s-clean{font-size:clamp(10px,7.6cqw,19px)}
.phone .caps.s-educator{font-size:clamp(9px,6.8cqw,17px)}
.phone .caps.s-deep{font-size:clamp(8px,5.6cqw,14px)}
.phone .caps.s-editorial{font-size:clamp(11px,10.8cqw,27px)}
.phone .caps.s-type{font-size:clamp(9px,7.2cqw,18px)}

/* playhead bar across the top of every playing clip */
.phone .prog{position:absolute;left:12px;right:12px;top:6px;height:2px;border-radius:2px;background:rgba(255,255,255,.28);z-index:3;overflow:hidden;font-style:normal}
.phone .prog::after{content:'';position:absolute;inset:0;background:#fff;transform:scaleX(var(--t,0));transform-origin:left;transition:transform .26s linear}
.phone .tag{top:14px}

/* the sequencer: a child waits until its step comes round */
.sq{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.sq.on{opacity:1;transform:none}
.sq.off{opacity:0;transform:scale(.9)}
.sq-pop{transform:scale(.7)}
.sq-pop.on{transform:none;transition:opacity .3s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1)}

/* hero: cards arrive one by one, then float */
.chip{scale:1}
.stage.in .chip{animation:chipin .7s var(--ease) both,float 6s ease-in-out infinite}
.stage.in .c1{animation-delay:.6s,0s}
.stage.in .c2{animation-delay:1s,-2s}
.stage.in .c3{animation-delay:1.4s,-4s}
.stage.in .c4{animation-delay:1.8s,-1s}
.stage:not(.in) .chip{opacity:0}
@keyframes chipin{from{opacity:0;scale:.8}to{opacity:1;scale:1}}

/* written post: a soft hover */
.post .react span{transition:color .2s}

/* blueprint board: meter, scan line, labels landing */
.bp-meter{display:flex;align-items:center;gap:12px;margin:-2px 0 12px;font:500 11px/1 'Geist Mono',monospace;color:var(--muted)}
.bp-meter span{flex:none;min-width:17ch}
.bp-meter b{display:inline-block;min-width:2ch;text-align:right;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.bp-meter .bar{flex:1;height:4px;border-radius:4px;background:var(--bg2);overflow:hidden}
.bp-meter .bar i{display:block;height:100%;background:var(--grad);transform:scaleX(var(--p,1));transform-origin:left;transition:transform .2s linear}
.bp-grid{position:relative}
.bp-scan{position:absolute;left:-4px;right:-4px;top:0;height:34%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,79,154,.14) 70%,rgba(255,79,154,.55));border-bottom:2px solid var(--pink);border-radius:0 0 6px 6px;opacity:0;transform:translateY(-100%)}
.bp-board.run:not(.done) .bp-scan{opacity:1;animation:scan 1.6s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes scan{from{transform:translateY(-60%)}to{transform:translateY(240%)}}
.caret::after{content:'';display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--pink);animation:blink 1s steps(1) infinite}
.bp-board .go{transition:transform .2s var(--ease)}
.bp-board.run:not(.done) .go{animation:press 1.6s ease-in-out infinite}
@keyframes press{50%{transform:scale(.95);opacity:.85}}
.bp-tile video{width:100%;height:100%;object-fit:cover}

/* the loop screen: story-style segments show where you are */
.segs{margin-left:auto;display:flex;gap:4px;width:120px}
.segs b{flex:1;height:2px;border-radius:2px;background:#2c2935;overflow:hidden}
.segs i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.segs b.done i{transform:scaleX(1)}
.segs b.now i{transform:scaleX(1)}
.segs.auto b.now i{transform:scaleX(0);animation:segfill var(--seg,4.2s) linear forwards}
@keyframes segfill{to{transform:scaleX(1)}}
.mini-grid .sq-lit{opacity:.35;transform:none;transition:opacity .35s var(--ease),box-shadow .35s}
.mini-grid .sq-lit.on{opacity:1}
.mini-grid span.hot{box-shadow:none}
.mini-grid span.hot.on{box-shadow:0 0 0 2px var(--pink),0 0 18px rgba(255,79,154,.5)}
.cal .sq-dot{transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.cal .sq-dot.on{transform:none}
.cal span.film{animation:filmpulse 2.4s ease-in-out infinite}
@keyframes filmpulse{50%{box-shadow:0 0 0 3px rgba(255,79,154,.25)}}
.rec b span{font-variant-numeric:tabular-nums}
.tl-head{position:absolute;inset:0 8px;pointer-events:none;animation:sweep 4.8s linear infinite}
.tl-head i{position:absolute;left:0;top:-2px;bottom:-2px;width:2px;background:#fff;box-shadow:0 0 10px #fff;border-radius:2px}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(100%)}}
.tl-cap span{transition:background .3s,color .3s}
.versions .pick.on{box-shadow:0 0 0 2px var(--pink),0 0 18px rgba(255,79,154,.45)}
.versions .pick.on em{background:var(--grad)}
.sched div{position:relative}
.sched .ok{font-style:normal}
.dm{position:relative}
.typing{display:flex;gap:4px;align-self:end;margin-left:auto;margin-bottom:-48px;padding:12px 14px;border-radius:16px;border-bottom-right-radius:4px;background:#211e2a;width:max-content}
.typing i{width:6px;height:6px;border-radius:50%;background:#a9a6b4;animation:typing 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{30%{transform:translateY(-3px);opacity:1}0%,60%,100%{opacity:.4}}
.lead{position:absolute;left:22px;right:22px;bottom:20px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;color:#15131b;box-shadow:0 20px 40px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,79,154,.4);transform-origin:bottom center}
.lead-av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--grad)}
.lead b{display:block;font-size:13px}
.lead small{display:block;font-size:11.5px;color:#55525e}
.lead em{font-style:normal;color:var(--pink);margin-right:6px}

/* month: posts fill in and the count ticks up */
.mc .sq-bar{transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.mc .sq-bar.on{transform:none}
.month-cal header b{display:inline-block;min-width:2ch;text-align:right;font-weight:400;font-variant-numeric:tabular-nums}

/* compare: rows settle in one after another */
.cmp-wrap tbody tr{opacity:0}
.cmp-wrap.in tbody tr{animation:rowin .55s var(--ease) both;animation-delay:calc(var(--r)*70ms + .2s)}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cmp tbody tr:hover td{background:rgba(16,16,20,.025)}
.cmp tbody tr:hover td.us{background:linear-gradient(180deg,rgba(255,79,154,.1),rgba(139,123,255,.1))}
.cmp-note a{color:var(--ink2)}

/* hover lifts */
.tile,.plan,.trust-in div{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tile:hover,.plan:hover,.trust-in div:hover{transform:translateY(-3px);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.plan.main:hover{box-shadow:var(--shadow),0 24px 50px -24px rgba(255,79,154,.45)}
.door .mediabox video,.door .mediabox img{transition:transform .6s var(--ease)}
.door:hover .mediabox video,.door:hover .mediabox img{transform:scale(1.04)}
.door h3::after{content:'\2192';display:inline-block;margin-left:8px;transition:transform .25s var(--ease)}
.door:hover h3::after{transform:translateX(4px)}
.fmt .phone{transition:transform .3s var(--ease)}
.fmt:hover .phone{transform:translateY(-4px)}

/* focus you can see, everywhere */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:8px}

@media (prefers-reduced-motion:reduce){
 .bp-scan,.tl-head{display:none}
 .caret::after{display:none}
 .stage .chip{opacity:1!important}
 .sq.off{display:none}
 .mc .sq-bar,.cal .sq-dot{transform:none!important}
 .mini-grid .sq-lit{opacity:1!important}
 .cmp-wrap tbody tr{opacity:1}
}
.dm .bubble{justify-self:start;width:max-content}
.dm .bubble.us,.dm .bubble.card{justify-self:end}
.dm .bubble.card{width:220px}
.stage .p1 .tag{left:auto;right:12px}
@media (max-width:560px){.mini-grid span{aspect-ratio:3/4}.tl-cut em{white-space:nowrap;font-size:8px}}
@media (max-width:560px){.hero-media .phone:first-child{right:44%}.hero-media .phone:last-child{right:10%}}

/* white text sits on the deeper gradient so it stays readable */
.btn::before,.pill b,.plan-badge,.bp-top .go,.points i,.chip i{background:var(--grad-ink)}
@media (max-width:560px){.stage .p3 .tag{display:none}}

/* the animated 10 (same as the app, src/client/wordmark.css) */
/* The animated 10. One run is 3.4s: melt to a puddle, spring up as a bubble, loop the word, drop back. */
.nt-mark .nt-ten,.nt-mark .nt-side,.nt-mark .nt-puddle,.nt-mark .nt-bubble,.nt-mark .nt-drop,.nt-mark .nt-shock{transform-box:fill-box}
.nt-mark .nt-drop,.nt-mark .nt-shock{opacity:0;transform-origin:50% 0}
.nt-mark .nt-shock{transform-origin:50% 50%}
/* v2: while it melts the 10 turns liquid (a goo filter), so the drips and the puddle read as one body */
.nt-run .nt-liquid{filter:var(--goo)}
.nt-run .nt-drop{animation:nt-drop 3.4s cubic-bezier(.5,0,.75,.2) both}
.nt-run .nt-drop.d2{animation-delay:.08s}.nt-run .nt-drop.d3{animation-delay:.15s}
.nt-run .nt-shock{animation:nt-shock 3.4s ease-out both}
.nt-mark .nt-ten{transform-origin:50% 100%}
.nt-mark .nt-side{transform-origin:50% 50%}
.nt-mark .nt-puddle{transform-origin:50% 50%;opacity:0}
.nt-mark .nt-bubble{transform-origin:50% 50%;opacity:0}
.nt-mark .nt-loop{stroke-dasharray:.22 1;stroke-dashoffset:.22;opacity:0}
.nt-mark .nt-rider{opacity:0;offset-rotate:0deg;offset-distance:0%;transform-box:view-box}
.nt-run .nt-ten{animation:nt-ten 3.4s cubic-bezier(.45,0,.2,1) both}
.nt-run .nt-puddle{animation:nt-puddle 3.4s ease-in-out both}
.nt-run .nt-bubble{animation:nt-bubble 3.4s cubic-bezier(.3,.7,.3,1) both}
.nt-run .nt-loop{animation:nt-loop 3.4s linear both}
.nt-run .nt-rider{animation:nt-rider 3.4s linear both}
.nt-run .nt-left{animation:nt-hug-l 3.4s ease-in-out both}
.nt-run .nt-right{animation:nt-hug-r 3.4s ease-in-out both}
@keyframes nt-ten{
 0%{transform:none;opacity:1}
 10%{transform:scale(1.18,.72);opacity:1}
 16%{transform:scale(1.5,.08);opacity:.9}
 18%{transform:scale(1.5,.04);opacity:0}
 82%{transform:translateY(-40%) scale(.6,1.3);opacity:0}
 86%{transform:translateY(0) scale(1.22,.78);opacity:1}
 91%{transform:translateY(-10%) scale(.94,1.08)}
 96%{transform:translateY(0) scale(1.03,.97)}
 100%{transform:none;opacity:1}
}
@keyframes nt-puddle{
 0%,14%{opacity:0;transform:scale(.6,1)}
 18%{opacity:1;transform:scale(1,1)}
 24%{opacity:1;transform:scale(.55,1.8)}
 28%{opacity:0;transform:scale(.3,2.4)}
 100%{opacity:0}
}
@keyframes nt-bubble{
 0%,24%{opacity:0;transform:translateY(60%) scale(.3)}
 32%{opacity:1;transform:translateY(-55%) scale(1.05,.95)}
 38%{opacity:1;transform:translateY(-110%) scale(.8)}
 41%{opacity:0;transform:translateY(-190%) scale(.6)}
 76%{opacity:0;transform:translateY(-190%) scale(.6)}
 78%{opacity:1;transform:translateY(-150%) scale(.7)}
 83%{opacity:1;transform:translateY(-10%) scale(1.1,.9)}
 86%{opacity:0;transform:translateY(0) scale(.8)}
 100%{opacity:0}
}
@keyframes nt-loop{
 0%,40%{opacity:0;stroke-dashoffset:.22}
 42%{opacity:1;stroke-dashoffset:.22}
 76%{opacity:1;stroke-dashoffset:-.78}
 79%{opacity:0;stroke-dashoffset:-.9}
 100%{opacity:0;stroke-dashoffset:-.9}
}
/* the bubble rides the lead of the trail, all the way round */
@keyframes nt-rider{
 0%,40%{opacity:0;offset-distance:0%}
 42%{opacity:1;offset-distance:0%}
 76%{opacity:1;offset-distance:100%}
 79%{opacity:0;offset-distance:100%}
 100%{opacity:0;offset-distance:100%}
}
@keyframes nt-hug-l{0%,48%{transform:none}56%{transform:translateX(1.5%) scale(.985,1.04)}64%{transform:translateX(-.5%)}72%,85%{transform:none}
 86.5%{transform:translate(-5%,-6%) rotate(-3deg) scale(1.03)}88%{transform:translate(3%,4%) rotate(2deg)}89.5%{transform:translate(-2.5%,-3%) rotate(-1.5deg)}91%{transform:translate(1.5%,2%) rotate(1deg)}93%{transform:translate(-.8%,-1%)}95.5%,100%{transform:none}}
@keyframes nt-hug-r{0%,58%{transform:none}66%{transform:translateX(-2%) scale(.985,1.04)}74%{transform:translateX(.6%)}82%,85%{transform:none}
 86.5%{transform:translate(5%,-7%) rotate(3deg) scale(1.03)}88%{transform:translate(-3%,4%) rotate(-2deg)}89.5%{transform:translate(2.5%,-3%) rotate(1.5deg)}91%{transform:translate(-1.5%,2%) rotate(-1deg)}93%{transform:translate(.8%,-1%)}95.5%,100%{transform:none}}
@keyframes nt-drop{0%,5%{opacity:0;transform:translateY(-60%) scale(.6,.6)}8%{opacity:1;transform:translateY(0) scale(.8,1.5)}12%{opacity:1;transform:translateY(40%) scale(.9,2.2)}16%{opacity:1;transform:translateY(90%) scale(1.2,.7)}19%{opacity:0;transform:translateY(100%) scale(1.6,.4)}100%{opacity:0}}
@keyframes nt-shock{0%,85%{opacity:0;transform:scale(.3)}86.5%{opacity:.95;transform:scale(.6)}95%{opacity:0;transform:scale(2.6,1.9)}100%{opacity:0}}
/* The lone 10 has no word to loop: it melts, bubbles and bounces back. */
.nt-solo .nt-bubble{animation-name:nt-bubble-solo}
@keyframes nt-bubble-solo{
 0%,24%{opacity:0;transform:translateY(60%) scale(.3)}
 34%{opacity:1;transform:translateY(-45%) scale(1.08,.92)}
 50%{opacity:1;transform:translateY(-70%) scale(.94,1.06)}
 66%{opacity:1;transform:translateY(-45%) scale(1.04,.96)}
 80%{opacity:1;transform:translateY(-10%) scale(1.1,.9)}
 86%{opacity:0;transform:translateY(0) scale(.8)}
 100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){.nt-run *{animation:none!important}.nt-run .nt-liquid{filter:none}.nt-mark .nt-puddle,.nt-mark .nt-bubble,.nt-mark .nt-loop,.nt-mark .nt-rider,.nt-mark .nt-drop,.nt-mark .nt-shock{display:none}}

.brand .nt-mark{color:#15131b;display:block;overflow:visible}


/* Solutions menu: who it is for beside the use cases; footer gains a use cases column */
.dd-panel.dd-wide{grid-template-columns:1fr 1fr;min-width:620px;gap:4px 8px}
.dd-col{display:grid;gap:2px;align-content:start}
.dd-h{padding:8px 12px 4px;font:500 11px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.dd-panel a.dd-all{display:block;font-size:13px;font-weight:500;color:var(--ink2)}
.dd-panel a.dd-all::after{content:' \2192'}
.foot-cols{grid-template-columns:repeat(4,1fr)}
@media (max-width:560px){.foot-cols{grid-template-columns:1fr 1fr}}
/* first visit offer */
.offer-bar{position:relative;z-index:60;display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 44px 9px 16px;background:linear-gradient(100deg,#ff8a5c,#ff4f9a 48%,#8b7bff);color:#fff;font-size:14px;text-align:center}
.offer-bar p{margin:0}.offer-bar b{font-weight:700}.offer-left{font-variant-numeric:tabular-nums;opacity:.95;margin-left:6px}
.offer-go{flex:none;padding:6px 14px;border-radius:999px;background:#fff;color:#15131b;font-weight:600;text-decoration:none;font-size:13px}
.offer-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:18px;cursor:pointer}
.offer-go:focus-visible,.offer-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:640px){.offer-bar{flex-wrap:wrap;gap:6px;font-size:13px}}

/* compare: the stack receipts (home #compare and /compare) */
.stack{display:grid;grid-template-columns:1fr 1fr 1.08fr;gap:18px;align-items:stretch}
.rcpt{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--r-lg);background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.rcpt:hover{transform:translateY(-3px);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.rcpt .k,.fair .k,.cmp-foot .k{font:500 11px/1 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.rcpt h3{font-size:22px;letter-spacing:-.03em}
.rcpt ul{list-style:none;margin:0;padding:0;display:grid}
.rcpt li{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line2);font-size:15px}
.rcpt li b{font-weight:600}
.rcpt li small{display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.4}
.rcpt li em{font:500 15px/1.5 'Geist Mono',monospace;font-style:normal;white-space:nowrap}
.rcpt-miss{margin-top:auto;font-size:13px;line-height:1.45;color:var(--dim)}
.rcpt-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:14px;border-top:1px solid var(--line2)}
.rcpt-total span{font-size:13px;color:var(--muted)}
.rcpt-total b{font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1;white-space:nowrap}
.rcpt-total small{margin-left:4px;font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted)}
.rcpt.us{background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:var(--shadow)}
.rcpt.us:hover{box-shadow:var(--shadow),0 24px 50px -24px rgba(255,79,154,.45)}
.rcpt.us .rcpt-total b{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.rcpt.us .rcpt-total b small{-webkit-text-fill-color:var(--muted)}
.rcpt-us li{justify-content:flex-start;gap:10px;padding:5px 0;border:0}
.rcpt-us li::before{content:'';flex:none;width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--grad)}
.stack-foot{margin-top:18px;text-align:center;font-size:13px;color:var(--dim)}
.stack-foot .link-arrow{margin-left:6px;color:var(--ink2);font-size:13px}
.fair{margin-top:18px;padding:22px 26px;border-radius:var(--r);background:var(--bg2);display:grid;gap:12px}
.fair ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.fair li{display:flex;gap:10px}.fair li::before{content:'';flex:none;width:5px;height:5px;margin-top:9px;border-radius:50%;background:var(--dim)}

/* compare: the full matrix. It scrolls sideways inside its own box; the page never does. */
.cmp-full .cmp{min-width:1060px}
.cmp-full:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.cmp thead th small{display:block;margin-top:5px;font-size:12px;font-weight:400;color:var(--dim)}
.cmp tbody th{font-weight:500;font-size:15px;color:var(--ink);text-align:left;vertical-align:top;padding-top:18px}
.cmp-full td{vertical-align:top;padding:16px 10px}
.cmp td small{display:block;max-width:170px;margin:7px auto 0;font-size:12px;line-height:1.4;color:var(--muted)}
.cmp td.us small{color:var(--ink2)}
.cmp .st{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.addon,.talk{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:14px;font-weight:600}
.addon{box-shadow:inset 0 0 0 1.5px var(--violet);color:#6d5ae6}
.talk{box-shadow:inset 0 0 0 1.5px var(--dim);color:var(--muted);font-size:12px}
.cmp-note .addon{width:18px;height:18px;font-size:11px}
.cmp-foot{max-width:900px;display:grid;gap:14px;font-size:13px;line-height:1.55;color:var(--dim)}
.cmp-foot a{color:var(--ink2)}
.cmp-foot ul{margin:0;padding:0;list-style:none;columns:3;column-gap:24px}
.cmp-foot li{break-inside:avoid;padding:3px 0}
@media (max-width:980px){.stack{grid-template-columns:1fr}.cmp-foot ul{columns:2}}
@media (max-width:560px){
 .rcpt{padding:22px 20px}
 .rcpt-total b{font-size:34px}
 .fair{padding:18px}
 .cmp-full .cmp{min-width:860px}
 .cmp-full .cmp th:first-child,.cmp-full .cmp td:first-child{min-width:124px;width:124px;padding-left:14px;font-size:13px}
 .cmp-foot ul{columns:1}
}
@media (prefers-reduced-motion:reduce){.rcpt:hover{transform:none}}
.tile-us{background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:1.5px solid transparent}
.cmp-note .no{width:18px;height:18px}
.fair,#matrix,#stack,#better,#sources{scroll-margin-top:84px}

/* Developers: a docs layout. A sticky contents list beside one readable column; code on a dark panel. */
.dev-in{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;align-items:start}
.dev-toc{position:sticky;top:96px;display:grid;gap:4px}
.dev-toc .eyebrow{margin-bottom:8px}
.dev-toc a{font-size:14px;color:var(--muted);text-decoration:none;padding:5px 0}
.dev-toc a:hover,.dev-toc a:focus-visible{color:var(--ink)}
.dev-body{min-width:0;max-width:860px;display:grid;gap:16px}
.dev-body h2{font-size:clamp(26px,3vw,34px);margin-top:40px;scroll-margin-top:90px}
.dev-body h2:first-child{margin-top:0}
.dev-body h3{font-size:20px;letter-spacing:-.02em;margin-top:26px;scroll-margin-top:90px}
.dev-body>p{font-size:16px;line-height:1.7;color:var(--ink2)}
.dev-body a{color:var(--pink)}
.dev-body code{font:13px/1.5 'Geist Mono',ui-monospace,monospace;background:var(--bg2);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}
.dev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dev-grid .tile{padding:20px}.dev-grid .tile h3{font-size:18px;margin:0}.dev-grid .tile p{font-size:14px}
.dev-code{min-width:0}
.dev-code pre{margin:0;padding:16px 18px;border-radius:14px;background:var(--night);color:#ecebf2;overflow-x:auto;font:13px/1.65 'Geist Mono',ui-monospace,monospace;max-width:100%}
.dev-code pre code{background:none;padding:0;color:inherit;font:inherit;overflow-wrap:normal}
.dev-code pre:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.dev-table{overflow-x:auto;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);max-width:100%}
.dev-table table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.dev-table th,.dev-table td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5}
.dev-table tr:last-child td{border-bottom:0}
.dev-table th{font-weight:500;font-size:13px;color:var(--muted)}
.dev-table td small{display:block;margin-top:3px;font-size:12px;color:var(--dim)}
.dev-req{font-size:11px;color:#b0366c;font-weight:500}
.dev-loc{font-size:11px;color:var(--dim)}
.dev-jump{display:flex;flex-wrap:wrap;gap:8px}
.dev-body .dev-jump a{font-size:13px;padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink);text-decoration:none}
.dev-op{display:grid;gap:8px;padding:18px 20px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);scroll-margin-top:90px;min-width:0}
.dev-op>*,.dev-body>*{min-width:0;max-width:100%}
.dev-op h4 code{overflow-wrap:anywhere}
.dev-op h4{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:15px;font-weight:500}
.dev-op h4 code{background:none;padding:0;font-size:14px}
.dev-m{font:600 11px/1 'Geist Mono',monospace;letter-spacing:.04em;padding:5px 8px;border-radius:6px;color:#fff}
.dev-m.get{background:#2f6f5e}.dev-m.post{background:#b0366c}.dev-m.patch{background:#5a4bc2}
.dev-sum{margin:0;font-size:15px;line-height:1.6;color:var(--ink2)}
.dev-tags{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.dev-tag{font:500 12px/1 'Geist Mono',monospace;padding:5px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--muted)}
.dev-tag.paid{color:#b0366c;box-shadow:inset 0 0 0 1px rgba(255,79,154,.4)}
.dev-op details summary{cursor:pointer;font-size:14px;color:var(--muted);width:max-content;max-width:100%}
.dev-op details summary:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:4px}
.dev-op details[open] summary{margin-bottom:10px}
.dev-res{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:980px){.dev-in{grid-template-columns:1fr;gap:24px}.dev-toc{position:static;display:flex;flex-wrap:wrap;gap:6px 14px}.dev-toc .eyebrow{width:100%;margin:0}}
@media (max-width:720px){.dev-grid{grid-template-columns:1fr}}
.dev-table td code{white-space:nowrap;overflow-wrap:normal}
@media (max-width:560px){.dev-op{padding:16px}.dev-code pre{padding:14px;font-size:12px}
 .dev-table table{min-width:0}.dev-table thead{display:none}
 .dev-table tr{display:grid;gap:4px;padding:12px 14px;border-bottom:1px solid var(--line)}.dev-table tr:last-child{border-bottom:0}
 .dev-table td{display:block;padding:0;border:0}.dev-table td code{white-space:normal;overflow-wrap:anywhere}}

/* pricing: four plans, one yearly-first toggle, packs and the rate card */
.plans-bar{display:flex;justify-content:center;margin:0 0 22px}
.plans.plans-4{grid-template-columns:repeat(4,1fr)}
.plan-out{margin:-4px 0 0;font-size:14px;font-weight:500}
.packs{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}.packs b{font-weight:600}.packs small{flex-basis:100%;color:var(--muted);font-size:14px}
.rate-card{margin-top:18px;display:block}
.rate-card summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}.rate-card summary::-webkit-details-marker{display:none}
.rate-card summary::after{content:'+';color:var(--muted);transition:transform .2s}.rate-card[open] summary::after{transform:rotate(45deg)}
.rate-card summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
.rate-card table{width:100%;border-collapse:collapse;margin:16px 0 8px;font-size:15px}
.rate-card th{text-align:left;font-weight:400;padding:10px 12px 10px 0;border-top:1px solid var(--line)}
.rate-card td{text-align:right;padding:10px 0;border-top:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:1180px){.plans.plans-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.plans.plans-4{grid-template-columns:1fr}.rate-card td{white-space:normal}.rate-card table{font-size:14px}}
/* ambient layer (assets/ambient.js): the studio's breathing dot grid behind every page. Fixed, under
   the content, no pointer events. Sections with their own background simply cover it. While it runs
   the static gridlines step aside so the page never shows two grids. */
.ambient{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
.ambient.on{opacity:1}
html.amb .gridlines{display:none}
[data-par]{will-change:translate}
@media (prefers-reduced-motion:reduce){[data-par]{translate:none!important;will-change:auto}}
/* compare and /vs/ pages: what every plan includes, and the two-column table */
.every-plan{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:18px;padding:18px 22px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:15px}
.every-plan .k{font:500 11px/1 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);width:100%}
.every-plan span{display:inline-flex;gap:10px;align-items:baseline}.every-plan span::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--grad);transform:translateY(-2px)}
.cmp-vs .cmp{min-width:0}
.cmp-vs .cmp td small{max-width:300px}
.cmp-vs .cmp th:first-child,.cmp-vs .cmp td:first-child{min-width:180px}
#credits,#plans,#table,#switch{scroll-margin-top:84px}
@media (max-width:560px){
 .cmp-vs .cmp th:first-child,.cmp-vs .cmp td:first-child{min-width:104px;width:104px;padding-left:12px;font-size:13px}
 .cmp-vs .cmp th,.cmp-vs .cmp td{padding:12px 8px}
 .every-plan{padding:16px}
}
/* the table's screen-reader labels are absolutely positioned: keep them inside the scroll box, or
   (with reduced motion, where the rows get no transform) they escape it and widen the phone page */
.cmp-wrap{position:relative}
@media (prefers-reduced-motion:reduce){.cmp-wrap tbody tr{opacity:1}}
/* hero glow fades out at the hero's edges instead of stopping on a hard line, so it runs into the dot grid */
.hero>.depth{-webkit-mask-image:linear-gradient(transparent,#000 90px,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 90px,#000 72%,transparent)}

/* cookie choice (track.js): shown only when this build has an ad pixel; Decline and Accept weigh the same */
.cc{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:560px;margin:0 auto;padding:16px;border-radius:16px;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow),0 0 0 1px var(--line);display:grid;gap:12px;font-size:14px;line-height:1.5;color:var(--ink2)}
.cc p{margin:0}
.cc a{color:var(--ink);text-underline-offset:2px}
.cc-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cc-btn{height:44px;border-radius:var(--pill);border:0;background:var(--bg2);color:var(--ink);font:500 15px/1 Geist,sans-serif;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line2)}
.cc-btn:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.cc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.foot-cols button[data-consent-open]{display:block;padding:5px 0;border:0;background:none;font:inherit;color:#d8d6de;cursor:pointer;text-align:left}
.foot-cols button[data-consent-open]:hover{color:#fff}
@media (max-width:560px){.foot-cols button[data-consent-open]{padding:9px 0}}
/* niches: the /for/<slug> pages (site/generators/niche_html.py) */
.nch-away{margin-top:14px;font-size:14px;color:var(--muted)}.nch-away a{color:var(--ink)}
.nstage{position:relative;height:600px}
.nstage .phone{position:absolute;width:200px}
.nstage .p1{left:50%;top:30px;z-index:3;width:240px;margin-left:-120px}
.nstage .p2{left:0;top:110px;transform:rotate(-8deg);z-index:2}
.nstage .p3{right:0;top:100px;transform:rotate(7deg);z-index:2}
.nstage .c3{left:-2%;bottom:40px}.nstage .c4{right:0;bottom:16px}
.nslide{padding:0;justify-content:center;background:#fbf7f2}.nslide img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.nsec{padding-top:clamp(48px,6vw,80px)}
.nideas{display:grid;gap:28px}.nideas>*{min-width:0}
.nposts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.np{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.np-top{display:flex;align-items:center;gap:8px;font-size:13px}.np-top b{display:block;font-weight:600}.np-top small{display:block;color:var(--dim);font-size:11px}
.np-av{width:28px;height:28px;border-radius:50%;background:var(--grad);flex:none}
.np-media{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:190px;padding:48px 16px 16px;border-radius:12px;color:#fff;overflow:hidden}
.np-media.t1{background:linear-gradient(150deg,#2b2140,#0b0a10)}.np-media.t2{background:linear-gradient(150deg,#ff8a5c,#d42a78)}
.np-media.t3{background:linear-gradient(150deg,#8b7bff,#2c2c6a)}.np-media.t4{background:linear-gradient(150deg,#15131c,#3a2a1f)}
.np-tag{position:absolute;top:12px;left:12px;padding:4px 9px;border-radius:var(--pill);background:rgba(255,255,255,.18);backdrop-filter:blur(6px);font:500 11px/1.2 Geist,sans-serif}
.np-title{font-size:19px;letter-spacing:-.02em;line-height:1.15;font-weight:600}
.np-line{font-size:14px;color:var(--muted);line-height:1.45}
.ncar{margin:0}
.ncar-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 10px;border-radius:var(--r)}
.ncar-track img{flex:none;width:min(270px,72vw);height:auto;aspect-ratio:4/5;border-radius:14px;scroll-snap-align:start;box-shadow:inset 0 0 0 1px var(--line),0 12px 28px -18px rgba(52,24,70,.4);background:var(--bg2)}
.ncar-track:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.ncar figcaption{margin-top:8px;font-size:13px;color:var(--dim)}
.nmonth{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start;margin-top:clamp(48px,6vw,72px)}
.nm-cal{background:#fff;border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.nm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:600}.nm-top small{font-weight:400;color:var(--muted)}
.nm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.nm-h{font:500 10px/1 'Geist Mono',monospace;color:var(--dim);text-align:center;padding-bottom:4px}
.nm-d{position:relative;aspect-ratio:1/.9;border-radius:9px;background:var(--bg2);padding:5px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px}
.nm-d b{position:absolute;top:5px;left:6px;font:500 10px/1 'Geist Mono',monospace;color:var(--dim)}
.nm-d i,.nm-legend i,.nm-weeks span i{display:block;height:7px;border-radius:4px}
.k-voiceover i,i.k-voiceover{background:linear-gradient(90deg,#ffb08f,#ff8a5c)}
.k-motion i,i.k-motion{background:linear-gradient(90deg,#ff9ccb,#ff4f9a)}
.k-carousel i,i.k-carousel{background:linear-gradient(90deg,#b7adff,#8b7bff)}
.nm-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;color:var(--muted)}.nm-legend span{display:flex;align-items:center;gap:6px}.nm-legend i{width:14px}
.nm-copy h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;margin-bottom:10px}
.nm-weeks{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nm-weeks li{display:grid;gap:6px;padding:14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:14px}
.nm-weeks li>b{font-weight:600;font-size:14px}
.nm-weeks span{display:block;position:relative;padding-left:18px;color:var(--ink2);line-height:1.4}
.nm-weeks span i{position:absolute;left:0;top:.5em;width:10px}
.nm-weeks em{font-style:normal;color:var(--dim)}
.nm-note,.nm-ex{margin-top:12px;font-size:13px;color:var(--dim)}
.nfeat-h{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;margin:clamp(48px,6vw,72px) 0 18px}
.nfeat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.nnote{margin-top:18px;padding:16px 18px;border-radius:16px;background:#fff8ec;box-shadow:inset 0 0 0 1px rgba(204,66,22,.18);font-size:15px;color:var(--ink2)}
.ncta{display:grid;justify-items:start;gap:10px;margin-top:32px}
@media (max-width:980px){
 .nmonth{grid-template-columns:1fr}
 .nposts{grid-template-columns:1fr 1fr}
 .nfeat{grid-template-columns:1fr 1fr}
 .nstage{height:520px;max-width:560px;margin:24px auto 0}
}
@media (max-width:560px){
 .nposts,.nm-weeks,.nfeat{grid-template-columns:1fr}
 .np-media{min-height:150px}
 .nstage{height:420px}
 .nstage .p1{width:180px;margin-left:-90px;top:20px}.nstage .p2,.nstage .p3{width:130px;top:90px}
 .nstage .c3,.nstage .c4{display:none}
}
.nhero h1{font-size:clamp(40px,5vw,68px)}