/* atlas site v11 (2026-10-13). Light page, purple marks, dark bands. Motion lives in site.js (GSAP + ScrollTrigger + Lenis). */
:root{
  --bg:#F3F2EF; --paper:#FFFFFF; --ink:#0E0E0E; --ink2:#3A3A40; --mute:#8C8C93; --mute2:#B9B9BF;
  --line:rgba(14,14,14,.08); --line2:rgba(14,14,14,.14);
  --p:#8858F8; --p2:#B49BFF; --psoft:#EEE8FF; --dark:#0E0E0E; --dark2:#18171C;
  --r:26px; --rs:16px;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--dark);-webkit-text-size-adjust:100%}
/* page scrollbar (Etele, 2026-10-24): html is dark on purpose, so Chrome and Safari drew the pale thumb meant for
   dark pages, which nearly vanished on the light page. Explicit colours: a mid-grey thumb on a light track. */
html{scrollbar-color:#A3A29E #EEEDEA}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--p);color:#fff}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
section{position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* type */
h1,h2,h3{font-weight:500;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(42px,7.4vw,96px)}
h2{font-size:clamp(34px,5.2vw,68px)}
h3{font-size:clamp(20px,2vw,24px);letter-spacing:-.03em;line-height:1.15}
.g{color:var(--mute)}
.dark .g{color:#77767E}
em.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--p)}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink2);max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink2);padding:7px 14px 7px 10px;border-radius:99px;background:var(--paper);border:1px solid var(--line)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--p);box-shadow:0 0 0 4px rgba(136,88,248,.15)}
.dark .eyebrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#cfcfd6}
.head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;margin-bottom:56px}
.head.l{align-items:flex-start;text-align:left}
.head p{max-width:620px;color:var(--ink2);font-size:18px}
.dark .head p{color:#a9a8b0}
.fine{font-size:13px;color:var(--mute);line-height:1.5}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 8px 0 24px;border-radius:99px;font-weight:500;font-size:16px;transition:transform .3s var(--ease),background .3s,box-shadow .3s;white-space:nowrap}
.btn .ar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;transition:transform .35s var(--ease)}
.btn:hover .ar{transform:rotate(-45deg)}
.btn:active{transform:scale(.97)}
.btn.black{background:var(--ink);color:#fff}
.btn.black .ar{background:var(--p);color:#fff}
.btn.black:hover{box-shadow:0 12px 30px -10px rgba(136,88,248,.6)}
.btn.white{background:#fff;color:var(--ink)}
.btn.white .ar{background:var(--p);color:#fff}
.btn.soft{background:var(--paper);border:1px solid var(--line);padding:0 24px}
.btn.ghostd{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14);padding:0 24px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* nav */
.nav{position:fixed;top:14px;left:0;right:0;z-index:50;pointer-events:none}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav a,.nav button{pointer-events:auto}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:19px;letter-spacing:-.03em}
.logo img{width:32px;height:32px;border-radius:9px}
.nav .right{display:flex;align-items:center;gap:8px}
.nav .login{font-size:14px;padding:10px 14px;border-radius:99px;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav .cta{font-size:14px;font-weight:500;padding:10px 18px;border-radius:99px;background:var(--ink);color:#fff;transition:background .2s}
.nav .cta:hover{background:var(--p)}

/* hero */
.hero{padding:150px 0 0;overflow:hidden;min-height:100svh;display:flex;flex-direction:column}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-bg .grid{position:absolute;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 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);opacity:.7}
.hero-bg .glow{position:absolute;width:900px;height:600px;left:50%;top:48%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(136,88,248,.22),rgba(136,88,248,0));filter:blur(10px)}
.hero .copy{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.hero h1 .ln{display:block}
.hero .lead{text-align:center}
.hero .micro{font-size:14px;color:var(--ink2);display:flex;align-items:center;gap:10px}
.hero .micro b{font-weight:600}
.dots{display:flex}
.dots span{width:24px;height:24px;border-radius:50%;border:2px solid var(--bg);margin-left:-7px;background:linear-gradient(135deg,#d9d2ff,#b49bff)}
.dots span:first-child{margin-left:0}
.dots span:nth-child(2){background:linear-gradient(135deg,#ffd1b8,#ff8a5c)}
.dots span:nth-child(3){background:linear-gradient(135deg,#d6f5b0,#8fd14f)}
.word{display:inline-block}

.fan{position:relative;height:clamp(330px,40vw,470px);margin-top:auto;z-index:2}
.fan .stage{position:absolute;left:50%;bottom:-60px;width:0;height:0;perspective:1400px}
.card{position:absolute;left:0;bottom:0;width:var(--w,210px);aspect-ratio:var(--ar,9/16);border-radius:22px;overflow:hidden;transform-origin:50% 100%;box-shadow:0 30px 60px -24px rgba(20,10,60,.45),0 0 0 1px rgba(255,255,255,.35) inset;will-change:transform;margin-left:calc(var(--w,210px) / -2)}
.card .face{position:absolute;inset:0;background:var(--bgc,linear-gradient(160deg,#9b76ff,#5b2fe0))}
.card .face::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.35),transparent 50%)}
.card .kind{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:600;letter-spacing:.02em;padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.88);color:var(--ink)}
.card .name{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;color:#fff;font-weight:600;font-size:15px;letter-spacing:-.02em;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.card .name small{display:block;font-weight:400;font-size:11px;opacity:.85}
/* placeholder chrome per format */
.ph{position:absolute;inset:0;z-index:1}
.ph .cap{position:absolute;left:14%;right:14%;top:58%;display:flex;flex-direction:column;align-items:center;gap:6px}
.ph .cap b{height:12px;border-radius:4px;background:#fff;width:90%}
.ph .cap b:nth-child(2){width:60%;background:var(--p)}
.ph .hdr{position:absolute;top:16%;left:12%;right:12%;height:30px;border-radius:8px;background:rgba(14,14,14,.82)}
.ph .play{position:absolute;left:50%;top:38%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.34);display:grid;place-items:center}
.ph .play::after{content:"";border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.ph .bar{position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.ph .bar::after{content:"";position:absolute;inset:0;right:55%;background:#fff;border-radius:2px}
.ph .t1,.ph .t2,.ph .t3{position:absolute;left:12%;height:14px;border-radius:5px;background:rgba(255,255,255,.95)}
.ph .t1{top:26%;width:70%;height:22px}
.ph .t2{top:38%;width:55%;height:22px;background:var(--ink)}
.ph .t3{top:52%;width:62%;opacity:.7}
.ph .dotsrow{position:absolute;bottom:44px;left:0;right:0;display:flex;justify-content:center;gap:5px}
.ph .dotsrow i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)}
.ph .dotsrow i:first-child{background:#fff;width:16px;border-radius:3px}
.ph .segs{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px}
.ph .segs i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.45)}
.ph .segs i:first-child{background:#fff}
.ph .blob{position:absolute;left:18%;right:18%;top:28%;aspect-ratio:1;border-radius:42% 58% 55% 45%/50% 40% 60% 50%;background:rgba(255,255,255,.22)}
.ph .shot{position:absolute;left:16%;right:16%;top:46%;height:28%;border-radius:12px;background:rgba(255,255,255,.9);box-shadow:0 10px 20px -8px rgba(0,0,0,.3)}
.slot-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.tag{position:absolute;z-index:30;font-size:13px;font-weight:500;padding:6px 12px;border-radius:10px;color:#fff;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(0,0,0,.3)}
.tag::before{content:"";position:absolute;width:0;height:0;border:7px solid transparent}
.tag.a{background:var(--p);border-bottom-left-radius:3px}
.tag.b{background:var(--ink);border-bottom-right-radius:3px}
.tag.c{background:#fff;color:var(--ink);border-top-left-radius:3px}
.cursor{position:absolute;z-index:4;display:flex;align-items:flex-start;gap:2px}
.cursor svg{width:18px;height:18px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.cursor span{margin-top:14px;font-size:12px;font-weight:500;padding:4px 9px;border-radius:99px;color:#fff}

/* creators */
.creators{padding:120px 0 110px;overflow:hidden}
.av-row{display:flex;gap:18px;width:max-content;will-change:transform}
.av{width:84px;height:84px;border-radius:22px;flex:none;background:var(--paper);border:1.5px dashed var(--line2);position:relative;overflow:hidden;display:grid;place-items:center}
.av svg{width:30px;height:30px;color:var(--mute2)}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av:nth-child(3n){transform:translateY(16px)}
.av:nth-child(4n+1){transform:translateY(-10px)}
.creators .center{text-align:center;padding:64px 0;display:flex;flex-direction:column;align-items:center;gap:16px}
.creators .center p{color:var(--ink2);max-width:520px}

/* proof bento */
.proof{padding:40px 0 120px}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.bx{border-radius:var(--r);padding:26px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;min-height:220px;position:relative;overflow:hidden}
.bx .num{font-size:clamp(48px,6vw,84px);font-weight:500;letter-spacing:-.06em;line-height:.95}
.bx p{font-size:15px;color:var(--ink2);max-width:340px}
.bx .lbl{font-size:12px;font-weight:500;color:var(--mute);text-transform:lowercase;letter-spacing:.02em}
.bx.c6{grid-column:span 6}.bx.c4{grid-column:span 4}.bx.c3{grid-column:span 3}.bx.c5{grid-column:span 5}.bx.c7{grid-column:span 7}
.bx.purple{background:var(--p);color:#fff;border:0}
.bx.purple p,.bx.purple .lbl{color:rgba(255,255,255,.85)}
.bx.black{background:var(--dark);color:#fff;border:0}
.bx.black p,.bx.black .lbl{color:#a9a8b0}
.bx.lav{background:var(--psoft);border:0}
.bx .orb{position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#c9b6ff,#8858f8 55%,#4b23b8);opacity:.9}
.bx.black .orb{opacity:.55}
.bx .row{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.results{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.result{border-radius:var(--r);border:1.5px dashed var(--line2);min-height:190px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;color:var(--mute);font-size:14px;position:relative;overflow:hidden}
.result .q{display:flex;gap:10px;align-items:center}
.result .q span{width:40px;height:40px;border-radius:50%;background:rgba(14,14,14,.05)}
.result .lines i{display:block;height:10px;border-radius:5px;background:rgba(14,14,14,.05);margin-top:8px}
.result .lines i:nth-child(2){width:80%}.result .lines i:nth-child(3){width:55%}
@media (max-width:900px){.bx.c6,.bx.c4,.bx.c3,.bx.c5,.bx.c7{grid-column:span 12}.results{grid-template-columns:1fr}.bx{min-height:170px}}
@media (min-width:600px) and (max-width:900px){.bx.c3,.bx.c4{grid-column:span 6}}

/* why it works: pinned scatter to grid */
.why{padding:40px 0 0}
.assemble{position:relative;height:100svh;min-height:640px;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:40px}
.assemble .txt{display:flex;flex-direction:column;gap:22px;max-width:480px}
.assemble .txt p{color:var(--ink2);font-size:18px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:560px;justify-self:end}
.tile{aspect-ratio:4/5;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 18px 40px -20px rgba(20,10,60,.35)}
.tile .face{position:absolute;inset:0}
.tile span{position:absolute;left:10px;bottom:10px;right:10px;font-size:12px;font-weight:600;color:#fff;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.tile small{position:absolute;top:10px;left:10px;font-size:10px;font-weight:600;padding:3px 7px;border-radius:99px;background:rgba(255,255,255,.88);color:var(--ink)}
@media (max-width:900px){.assemble{grid-template-columns:1fr;height:auto;min-height:0;padding:40px 0}.tiles{justify-self:center}}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:30px 0 120px}
.pl{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column}
.pl .vis{height:250px;border-radius:18px;background:var(--bg);position:relative;overflow:hidden}
.pl .tx{padding:22px 14px 14px;display:flex;flex-direction:column;gap:10px}
.pl .tx p{font-size:15px;color:var(--ink2)}
.pl .n{font-size:12px;font-weight:600;color:var(--p)}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}
/* pillar 1: timeline */
.tl{position:absolute;inset:22px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.tl .trk{height:34px;border-radius:9px;display:flex;gap:4px}
.tl .trk i{border-radius:7px;background:var(--paper);border:1px solid var(--line);flex:var(--f,1)}
.tl .trk.v i{background:linear-gradient(135deg,#b49bff,#8858f8);border:0}
.tl .trk.c i{background:var(--ink);border:0;height:18px;align-self:center}
.tl .trk.z i{background:transparent;border:1.5px dashed var(--p)}
.tl .ph2{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--p);left:20%}
.tl .ph2::before{content:"";position:absolute;top:-4px;left:-5px;width:12px;height:12px;border-radius:50%;background:var(--p)}
.tl .lab{display:flex;justify-content:space-between;font-size:11px;color:var(--mute)}
/* pillar 2: notifications */
.notes{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px}
.note{width:100%;max-width:280px;background:var(--paper);border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 10px 24px -14px rgba(0,0,0,.35);border:1px solid var(--line)}
.note .ic{width:30px;height:30px;border-radius:9px;background:var(--psoft);display:grid;place-items:center;color:var(--p);flex:none}
.note .ic svg{width:16px;height:16px}
.note b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.note small{font-size:11px;color:var(--mute)}
.notes .illu{position:absolute;right:12px;bottom:10px;font-size:10px;color:var(--mute2)}
/* pillar 3: checks */
.checks{position:absolute;inset:20px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.chk{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13px}
.chk i{width:20px;height:20px;border-radius:50%;background:var(--p);display:grid;place-items:center;flex:none}
.chk i::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.checks .ttl{font-size:12px;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:8px;margin-bottom:2px}
.checks .ttl img{width:18px;height:18px;border-radius:5px}

/* marquee */
.marquee{background:var(--p);color:#fff;overflow:hidden;padding:22px 0;transform:rotate(-1.2deg);margin:0 -20px}
.mq{display:flex;gap:38px;width:max-content;font-size:clamp(26px,3.4vw,44px);font-weight:500;letter-spacing:-.04em;white-space:nowrap}
.mq span{display:flex;align-items:center;gap:38px}
.mq span::after{content:"";width:12px;height:12px;border-radius:50%;background:#fff;opacity:.6}

/* problem */
.problem{padding:150px 0 120px}
.dead{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:14px;min-height:280px;position:relative}
.dc .x{width:40px;height:40px;border-radius:12px;background:var(--bg);display:grid;place-items:center;color:var(--ink2)}
.dc .x svg{width:20px;height:20px}
.dc p{color:var(--ink2);font-size:15px}
.dc .cost{margin-top:auto;font-size:13px;font-weight:500;color:var(--mute);padding-top:14px;border-top:1px solid var(--line)}
.answer{margin-top:14px;border-radius:var(--r);background:var(--dark);color:#fff;padding:30px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.answer p{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.03em;line-height:1.2;max-width:760px;position:relative}
.answer .glow{position:absolute;right:-100px;top:-120px;width:420px;height:420px;background:radial-gradient(closest-side,rgba(136,88,248,.55),transparent);pointer-events:none}
@media (max-width:900px){.dead{grid-template-columns:1fr}.dc{min-height:0}}

/* how it works */
.how{background:var(--dark);color:#fff;padding:130px 0;border-radius:40px 40px 0 0}
.how .grid2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.steps{display:flex;flex-direction:column}
.step{padding:34px 0;border-top:1px solid rgba(255,255,255,.1);opacity:.35;transition:opacity .5s}
.step.on{opacity:1}
.step .k{font-size:13px;font-weight:600;color:var(--p2);margin-bottom:10px}
.step h3{margin-bottom:10px}
.step p{color:#a9a8b0;font-size:16px;max-width:460px}
.screen{position:sticky;top:110px;height:min(560px,72svh);border-radius:28px;background:var(--dark2);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.screen .top{height:44px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.screen .top i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.screen .top span{margin-left:10px;font-size:12px;color:#77767e}
.scene{position:absolute;inset:44px 0 0;padding:28px;display:flex;flex-direction:column;justify-content:center;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .6s var(--ease)}
.scene.on{opacity:1;transform:none}
.file{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border-radius:14px;padding:12px 14px;font-size:14px}
.file .ic{width:36px;height:36px;border-radius:10px;background:rgba(136,88,248,.2);display:grid;place-items:center;color:var(--p2)}
.file .ic svg{width:18px;height:18px}
.file .meta{flex:1}
.file .meta small{display:block;color:#77767e;font-size:12px}
.file .pb{height:4px;border-radius:2px;background:rgba(255,255,255,.08);margin-top:7px;overflow:hidden}
.file .pb i{display:block;height:100%;background:var(--p);width:var(--v,100%)}
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sty{aspect-ratio:9/13;border-radius:14px;position:relative;overflow:hidden;border:2px solid transparent}
.sty.pick{border-color:var(--p);box-shadow:0 0 0 4px rgba(136,88,248,.25)}
.sty span{position:absolute;left:8px;bottom:8px;font-size:11px;font-weight:600}
.edit{display:flex;gap:16px;height:100%}
.edit .phone{width:44%;border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(160deg,#3b2a6e,#141120)}
.edit .tracks{flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px}
.edit .tracks .tr{height:26px;border-radius:7px;display:flex;gap:3px}
.edit .tracks .tr i{flex:var(--f,1);border-radius:6px;background:rgba(255,255,255,.08)}
.edit .tracks .tr.v i{background:linear-gradient(135deg,#9d7bff,#6a3ff0)}
.edit .tracks .tr.v i.cut{background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 6px,transparent 6px 12px);flex:.4}
.edit .tracks .lb{font-size:11px;color:#77767e}
.edit .exp{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.edit .exp span{font-size:11px;padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.08);color:#cfcfd6}
.slides{display:flex;gap:10px;justify-content:center;align-items:center;height:100%}
.slides .sl{width:28%;aspect-ratio:4/5;border-radius:14px;position:relative;overflow:hidden;flex:none}
.slides .sl.st{aspect-ratio:9/16;width:22%}
@media (max-width:900px){.how .grid2{grid-template-columns:1fr}.screen{position:relative;top:0;height:420px;order:-1}}

/* examples: cover flow */
.examples{padding:130px 0 90px;overflow:hidden}
.tabs{display:inline-flex;padding:5px;border-radius:99px;background:var(--paper);border:1px solid var(--line);gap:2px}
.tabs button{font-size:14px;font-weight:500;padding:9px 16px;border-radius:99px;color:var(--ink2);transition:background .25s,color .25s}
.tabs button.on{background:var(--ink);color:#fff}
.flow{position:relative;margin-top:10px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.flow.grab{cursor:grabbing}
.flow-track{position:absolute;left:50%;top:20px;width:0;height:100%}
.fc{position:absolute;left:0;top:0;will-change:transform,opacity;transform-origin:50% 50%}
.fc .in{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 34px 60px -30px rgba(20,14,40,.5),0 0 0 1px rgba(14,14,14,.04)}
.fc .in .face{position:absolute;inset:0}
.fc .lab{margin-top:18px;text-align:center;font-size:14px;color:var(--mute);transition:color .4s}
.fc.on .lab{color:var(--ink);font-weight:500}
.flow-ui{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px;font-size:13px;color:var(--mute)}
.fbtn{width:42px;height:42px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:transform .3s var(--ease),background .2s}
.fbtn:hover{background:var(--ink);color:#fff}
.fbtn:active{transform:scale(.92)}
.flow:focus-visible{box-shadow:inset 0 0 0 2px var(--p);border-radius:20px}

/* cost */
.cost{padding:110px 0 120px}
.tbl{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl table{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:12px;font-weight:600;color:var(--mute);text-transform:lowercase;background:rgba(14,14,14,.02)}
.tbl tr:last-child td{border-bottom:0}
.tbl td b{font-weight:600}
.tbl td small{display:block;color:var(--mute);font-size:13px}
.tbl .at{background:var(--psoft);color:#4b23b8;font-weight:600}
.tbl th.at{color:#4b23b8;background:#e5dcff}
.tbl .big{font-size:18px;font-weight:600;letter-spacing:-.02em}
.tblnote{margin-top:16px;max-width:820px}
@media (max-width:820px){
  .cost .tbl thead{display:none}
  .cost .tbl tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
  .cost .tbl td{border:0;padding:10px 18px}
  .cost .tbl td:first-child{grid-column:1/-1;padding-top:18px}
  .cost .tbl td[data-l]::before{content:attr(data-l);display:block;font-size:11px;color:var(--mute);text-transform:lowercase}
  .cost .tbl td.at{grid-column:1/-1;padding-bottom:16px}
}

/* agencies */
.agency{padding:0 0 120px}
.agbox{border-radius:36px;background:var(--dark);color:#fff;padding:clamp(34px,6vw,72px);display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.agbox p{color:#a9a8b0;font-size:18px;margin:20px 0 30px;max-width:560px}
.agbox .glow{position:absolute;left:-120px;bottom:-200px;width:560px;height:560px;background:radial-gradient(closest-side,rgba(136,88,248,.4),transparent)}
.agbox .stack{position:relative;height:300px}
.agbox .stack .card{left:50%;bottom:10px}
@media (max-width:900px){.agbox{grid-template-columns:1fr}.agbox .stack{height:260px}}

/* faq */
.faq{padding:20px 0 130px}
.faq .cols{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.qa{border-top:1px solid var(--line2)}
.qa details{border-bottom:1px solid var(--line2)}
.qa summary{list-style:none;cursor:pointer;padding:24px 0;font-size:19px;font-weight:500;letter-spacing:-.02em;display:flex;justify-content:space-between;gap:20px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{width:30px;height:30px;border-radius:50%;background:var(--paper);border:1px solid var(--line);flex:none;position:relative;transition:transform .35s var(--ease),background .3s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;background:var(--ink);transform:translate(-50%,-50%)}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa details[open] summary i{transform:rotate(45deg);background:var(--p);border-color:var(--p)}
.qa details[open] summary i::before,.qa details[open] summary i::after{background:#fff}
.qa .a{padding:0 50px 24px 0;color:var(--ink2);font-size:16px}
@media (max-width:900px){.faq .cols{grid-template-columns:1fr;gap:20px}}

/* final */
.final{background:var(--dark);color:#fff;padding:150px 0 130px;text-align:center;overflow:hidden;border-radius:40px 40px 0 0}
.final .glow{position:absolute;left:50%;top:60%;width:1100px;height:700px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(136,88,248,.45),rgba(136,88,248,0));pointer-events:none}
.final .in{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px}
.final h2{font-size:clamp(40px,6.4vw,88px);max-width:980px}
.final p{color:#a9a8b0;max-width:560px;font-size:18px}
.foot{background:var(--dark);color:#77767e;padding:30px 0 40px;font-size:14px;border-top:1px solid rgba(255,255,255,.07)}
.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot .links{display:flex;gap:20px;flex-wrap:wrap}
.foot a:hover{color:#fff}
.foot .logo{color:#fff}

/* book page */
.book{padding:140px 0 100px;min-height:100svh}
.book .cols{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start}
.book .side{display:flex;flex-direction:column;gap:22px;position:sticky;top:110px}
.book .side ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.book .side li{display:flex;gap:12px;align-items:flex-start;color:var(--ink2);font-size:16px}
.book .side li i{width:22px;height:22px;border-radius:50%;background:var(--psoft);flex:none;display:grid;place-items:center;margin-top:2px}
.book .side li i::after{content:"";width:8px;height:4px;border-left:2px solid var(--p);border-bottom:2px solid var(--p);transform:rotate(-45deg) translate(1px,-1px)}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,3vw,34px)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:500}
.form input,.form select,.form textarea{font:inherit;font-size:16px;padding:13px 14px;border-radius:14px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.form textarea{min-height:90px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--p);box-shadow:0 0 0 4px rgba(136,88,248,.15)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{flex-direction:row}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{font-size:14px;font-weight:500;padding:9px 14px;border-radius:99px;border:1px solid var(--line2);background:var(--bg);cursor:pointer;transition:all .2s}
.chips input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips input:focus-visible+span{box-shadow:0 0 0 4px rgba(136,88,248,.25)}
.form .err{color:#c0392b;font-size:14px;min-height:20px}
.form .bot{display:none}
#cal{min-height:640px;display:none}
#cal.on{display:block}
.booked-step{display:none;gap:10px;align-items:center;margin-bottom:16px;font-size:14px;color:var(--ink2)}
.booked-step.on{display:flex}
.booked-step i{width:22px;height:22px;border-radius:50%;background:var(--p);display:grid;place-items:center}
.booked-step i::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
@media (max-width:900px){.book .cols{grid-template-columns:1fr}.book .side{position:relative;top:0}.form{grid-template-columns:1fr}}

/* reveal defaults (site.js animates; without JS everything shows) */
.js [data-r]{opacity:0;transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){.js [data-r]{opacity:1;transform:none}*{scroll-behavior:auto!important}}
.staging{position:fixed;bottom:12px;left:12px;z-index:60;font-size:11px;font-weight:600;padding:5px 10px;border-radius:99px;background:#ffd400;color:#000}
.hero{padding-top:128px}
.hero h1{font-size:clamp(36px,4.5vw,66px);max-width:none}
.hero .copy{gap:20px}
.hero .lead{font-size:clamp(16px,1.3vw,18px);max-width:600px}

/* v11 fixes after the first look */
.hero{margin:10px;border-radius:36px;background:#FBFBF9;border:1px solid var(--line);min-height:calc(100svh - 20px)}
.hero .fine{margin-top:-6px}
.assemble .txt{align-items:flex-start}
.assemble h2{font-size:clamp(32px,3.8vw,54px)}
.tiles{max-width:500px}
@media (max-width:600px){.hero{margin:6px;border-radius:26px}}
html,body{overflow-x:clip}
.marquee-wrap{overflow:hidden;padding:30px 0}
@media (max-width:600px){.hero h1{font-size:clamp(32px,9vw,44px)}.creators{padding:80px 0}.av{width:68px;height:68px;border-radius:18px}}
.book .side{align-items:flex-start}
.head{gap:18px}
.hero .copy{gap:22px}
.book .side li{padding:12px 0;border-top:1px solid var(--line)}
.book .side ul{gap:0}

/* top bar (2026-10-13, Etele's reference): one white rounded bar, links in the middle, a dark button on the right.
   Fixed, so it stays on screen the whole way down. */
.nav{top:12px;z-index:1000;pointer-events:auto}
.nav .wrap{height:64px;padding:0 10px 0 20px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 24px -14px rgba(14,14,14,.18);display:grid;grid-template-columns:1fr auto 1fr}
.nav .logo{justify-self:start}
.nav .links{display:flex;gap:30px;justify-self:center}
.nav .links a{font-size:15px;color:var(--ink);transition:color .2s}
.nav .links a:hover,.nav .links a.on{color:var(--mute)}
.nav .right{justify-self:end;gap:14px}
.nav .login{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:8px 4px;font-size:15px;color:var(--ink)}
.nav .login:hover{color:var(--mute)}
.nav .cta{border-radius:10px;padding:11px 16px;font-size:15px;background:#2a2a2c;box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.nav .cta:hover{background:var(--ink)}
.hero,.flow,.creators,.why{isolation:isolate}
@media (max-width:980px){.nav .links{display:none}.nav .wrap{grid-template-columns:1fr auto}}
@media (max-width:420px){.nav .login{display:inline-block}.nav .wrap{height:58px;padding:0 8px 0 14px}.nav .cta{padding:10px 13px}}
@media (max-width:640px){.tag{font-size:11.5px;padding:5px 10px}}

/* ---- round 4 (2026-10-13) ---- */
/* logo: the plain transparent mark */
.logo img{border-radius:0;width:30px;height:30px}
/* top bar: features menu and the open atlas button */
.nav .links{align-items:center}
.dd{position:relative}
.ddb{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--ink);padding:8px 0}
.ddb svg{color:var(--mute);transition:transform .3s var(--ease)}
.dd:hover .ddb svg,.dd.open .ddb svg{transform:rotate(180deg)}
.ddm{position:absolute;top:100%;left:50%;width:330px;margin-left:-165px;padding:10px;margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -20px rgba(14,14,14,.25);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .3s var(--ease),visibility .25s}
.ddm::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.dd:hover .ddm,.dd.open .ddm{opacity:1;visibility:visible;transform:none}
.ddm a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;transition:background .2s}
.ddm a:hover{background:var(--bg)}
.ddm a b{font-size:15px;font-weight:500;color:var(--ink)}
.ddm a span{font-size:13px;color:var(--mute)}
.nav a.open{font-size:15px;padding:10px 15px;border-radius:10px;background:#fff;color:var(--ink);border:1px solid var(--line2);transition:background .2s}
.nav a.open:hover{background:var(--bg)}
@media (max-width:420px){.nav a.open{padding:9px 11px;font-size:14px}.nav .cta{font-size:14px}.logo{font-size:17px}.nav .right{gap:8px}}

/* the page turns dark while the creators section is on screen */
body{transition:background-color .8s var(--ease)}
body.night{background:#0B0B0D}
.creators h2,.creators p{transition:color .8s var(--ease)}
body.night .creators h2{color:#fff}
body.night .creators p{color:#a3a2aa}

/* creators: avatars orbit the heading */
.creators{padding:0;min-height:min(100svh,860px);display:grid;place-items:center;overflow:hidden;position:relative}
.orbit{position:absolute;inset:40px 0}
.ob{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:24px;display:grid;place-items:center;overflow:hidden;background:rgba(255,255,255,.06);border:1.5px dashed rgba(140,140,150,.45);will-change:transform,opacity;opacity:0}
.ob svg{width:30px;height:30px;color:rgba(160,160,170,.8)}
.ob.has{border:0}
.ob img{width:100%;height:100%;object-fit:cover}
.creators .center{position:relative;z-index:2;max-width:640px;padding:0}
.creators .center h2{font-size:clamp(34px,4.6vw,60px)}
@media (max-width:700px){.ob{width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:18px}.creators .center{max-width:300px}}

/* ask an AI */
.askai{padding:0 0 110px}
.askbox{position:relative;overflow:hidden;border-radius:32px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(14,14,14,.25);padding:clamp(56px,8vw,96px) 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;isolation:isolate}
.askbox::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:14px 14px;opacity:.45}
.askring{position:absolute;z-index:-1;left:50%;top:50%;width:min(760px,130vw);aspect-ratio:1;transform:translate(-50%,-58%);border-radius:50%;border:2px solid rgba(136,88,248,.35);background:radial-gradient(closest-side,#fff 70%,rgba(255,255,255,.6))}
.askbox .chip{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:18px;letter-spacing:-.03em;padding:10px 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 6px rgba(14,14,14,.04),0 6px 16px -8px rgba(14,14,14,.25)}
.askbox .chip img{width:22px;height:22px}
.askbox h2{font-size:clamp(28px,3.6vw,44px);margin-top:14px}
.askbox p{max-width:520px;color:var(--ink2);font-size:17px}
.askbtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.ab{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:12px;background:#2a2a2c;color:#fff;font-size:16px;font-weight:500;box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .25s var(--ease),background .2s}
.ab:hover{background:var(--ink);transform:translateY(-2px)}
.ab svg{width:20px;height:20px}

/* ---- round 5 (2026-10-13) ---- */
/* no dark strip above the hero: stop the hero's top margin collapsing through body */
body{display:flow-root}
/* top bar: open atlas is the only button, dark like the reference */
.nav a.open{background:#2a2a2c;color:#fff;border:0;box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);padding:11px 18px}
.nav a.open:hover{background:var(--ink)}
/* features: a wide panel of cards under the bar, like taap.it */
.nav .wrap{position:relative}
.dd{position:static}
.ddm.mega{left:0;right:0;width:auto;margin:0;top:calc(100% + 10px);padding:14px;border-radius:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ddm.mega::before{top:-32px;height:32px}
.fcard{display:flex!important;flex-direction:column;gap:12px!important;padding:20px 20px 0!important;border:1px solid var(--line);border-radius:18px!important;min-height:300px;overflow:hidden;transition:border-color .2s,transform .3s var(--ease)!important}
.fcard:hover{background:#fff!important;border-color:var(--line2);transform:translateY(-2px)}
.fhead{display:flex;align-items:center;gap:12px}
.fic{width:40px;height:40px;border-radius:11px;border:1px solid var(--line2);display:grid;place-items:center;color:var(--ink);flex:none}
.fic svg{width:20px;height:20px}
.fhead b{font-size:18px!important;font-weight:500;letter-spacing:-.02em}
.fdesc{font-size:14px!important;color:var(--ink2)!important;line-height:1.45}
.fvis{display:block;position:relative;margin-top:auto;height:140px;border-radius:14px 14px 0 0;background:var(--bg);border:1px solid var(--line);border-bottom:0;overflow:hidden}
.fvis i{position:absolute;display:block;border-radius:8px;box-shadow:0 8px 16px -10px rgba(14,14,14,.35)}
.fv-trial i{width:52px;height:92px;bottom:-14px;background:linear-gradient(160deg,#b9a2ff,#6a3ff0)}
.fv-trial i::before{content:"";position:absolute;left:7px;right:7px;top:14px;height:9px;border-radius:3px;background:#111}
.fv-trial i::after{position:absolute;left:0;right:0;top:32px;text-align:center;font-size:10px;font-weight:600;color:#fff}
.fv-trial i:nth-child(1){left:calc(50% - 86px);transform:rotate(-8deg);background:linear-gradient(160deg,#aee0ff,#3b8bf7)}
.fv-trial i:nth-child(1)::after{content:"hook A"}
.fv-trial i:nth-child(2){left:calc(50% - 26px);bottom:-4px;z-index:2}
.fv-trial i:nth-child(2)::after{content:"hook B"}
.fv-trial i:nth-child(3){left:calc(50% + 34px);transform:rotate(8deg);background:linear-gradient(160deg,#ffc6a3,#ff6a3d)}
.fv-trial i:nth-child(3)::after{content:"hook C"}
.fv-story i{width:56px;height:100px;bottom:-12px;background:linear-gradient(160deg,#ffc6e1,#f0559c)}
.fv-story i::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,#fff 0 30%,transparent 30% 36%)}
.fv-story i::after{content:"";position:absolute;left:9px;right:9px;bottom:22px;height:30px;border-radius:6px;background:rgba(255,255,255,.9)}
.fv-story i:nth-child(1){left:calc(50% - 94px)}
.fv-story i:nth-child(2){left:calc(50% - 28px);bottom:-2px;background:linear-gradient(160deg,#b9a2ff,#6a3ff0)}
.fv-story i:nth-child(3){left:calc(50% + 38px);background:linear-gradient(160deg,#ebfcbd,#9bd94c)}
.fv-carousel i{width:84px;height:100px;top:24px;background:linear-gradient(160deg,#fdf9f0,#ecdfc7);border:1px solid var(--line)}
.fv-carousel i::before{content:"";position:absolute;left:10px;right:16px;top:16px;height:10px;border-radius:3px;background:#111}
.fv-carousel i::after{content:"";position:absolute;left:10px;right:26px;top:32px;height:7px;border-radius:3px;background:#8858F8}
.fv-carousel i:nth-child(1){left:calc(50% - 74px);transform:rotate(-6deg)}
.fv-carousel i:nth-child(2){left:calc(50% - 42px);top:18px;z-index:2}
.fv-carousel i:nth-child(3){left:calc(50% - 10px);transform:rotate(6deg)}
.fv-intel i{left:16px;right:16px;height:30px;border-radius:9px;background:#fff;border:1px solid var(--line);box-shadow:none}
.fv-intel i::before{content:"";position:absolute;left:9px;top:8px;width:13px;height:13px;border-radius:50%;background:#8858F8}
.fv-intel i::after{content:"";position:absolute;left:30px;top:12px;height:6px;border-radius:3px;background:rgba(14,14,14,.15);width:55%}
.fv-intel i:nth-child(1){top:18px}
.fv-intel i:nth-child(2){top:56px}
.fv-intel i:nth-child(2)::after{width:40%}
.fv-intel i:nth-child(3){top:94px}
.fv-intel i:nth-child(3)::after{width:65%}
@media (max-width:1100px){.ddm.mega{grid-template-columns:repeat(2,1fr)}.fcard{min-height:250px}}
/* footer logo */
.foot .logo img{width:26px;height:26px}
/* agencies and affiliates pages */
.phero{padding:170px 0 80px;text-align:center}
.phero .wrap{display:flex;flex-direction:column;align-items:center;gap:24px}
.phero h1{font-size:clamp(38px,5.6vw,76px);max-width:1000px}
.pgrid{padding:0 0 120px}
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid4 .dc{min-height:200px}
@media (max-width:760px){.grid4{grid-template-columns:1fr}}

/* ---- round 6 (2026-10-13) ---- */
/* hero: full width, no framed box; it meets the black creators section on one straight line */
.hero{margin:0;border-radius:0;border:0;background:var(--bg);min-height:100svh}
@media (max-width:600px){.hero{margin:0;border-radius:0}}
body.night{background:var(--bg)}
/* creators: always black */
.creators{background:#0B0B0D;color:#fff}
.creators h2{color:#fff}
.creators .center{pointer-events:none;gap:14px}
.creators .stat{color:#b9b8c0;font-size:clamp(16px,1.6vw,19px)}
.ob{cursor:pointer;padding:0;transition:border-color .3s,background .3s,box-shadow .3s;color:inherit}
.ob:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}
/* the avatar pointed at comes into focus and grows a little (site.js eases it); no ring around it (Etele, 2026-10-24) */
.ob.hot{border-style:solid;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.12);box-shadow:0 18px 36px -14px rgba(0,0,0,.6)}
.ob.hot svg{color:#fff}
/* the profile card that opens on an avatar */
.igcard{position:absolute;z-index:10;width:300px;padding:18px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 30px 70px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);pointer-events:none;opacity:0;transform:translateY(10px) scale(.92);filter:blur(6px);transition:opacity .35s var(--ease),transform .5s var(--ease),filter .35s var(--ease)}
.igcard.on{opacity:1;transform:none;filter:none}
.ig-top{display:flex;align-items:center;gap:18px}
.ig-av{width:62px;height:62px;border-radius:50%;flex:none;padding:3px;background:conic-gradient(from 200deg,#8858F8,#ff6a3d,#f0559c,#8858F8);display:grid;place-items:center}
.ig-av img,.ig-av svg{width:100%;height:100%;border-radius:50%;border:3px solid #fff;object-fit:cover;background:var(--bg)}
.ig-av svg{padding:12px;color:var(--mute)}
.ig-stats{flex:1;display:flex;justify-content:space-between;text-align:center}
.ig-stats b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.ig-stats span{font-size:12px;color:var(--mute)}
.ig-name{margin-top:14px;font-size:14px;font-weight:600}
.ig-handle{font-size:13px;color:var(--mute)}
.ig-bio{margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--ink2)}
@media (max-width:420px){.igcard{width:270px;padding:15px}}

/* ---- round 7 (2026-10-13) ---- */
/* faq: smooth open and close (site.js animates the height); the plus turns into a cross and stays white */
.qa .a{padding:0;overflow:hidden}
.qa .ai{padding:0 50px 24px 0}
.qa summary i{transition:transform .45s var(--ease),background .2s,border-color .2s}
.qa summary:hover i{border-color:var(--line2)}
.qa details[open] summary i{background:var(--paper);border-color:var(--line2);transform:rotate(45deg)}
.qa details[open] summary i::before,.qa details[open] summary i::after{background:var(--ink)}
.qa details.closing summary i{transform:none}
/* ask an AI: the real logos, white on the dark buttons */
.ab img{width:20px;height:20px;filter:brightness(0) invert(1)}
/* features panel: five cards (trial reels, videos, carousels, story sequences, atlas intelligence) */
.ddm.mega{grid-template-columns:repeat(5,1fr)}
.fcard{padding:18px 18px 0!important}
.fhead{gap:10px}
.fhead b{font-size:17px!important}
.fv-video i:nth-child(1){left:calc(50% - 30px);top:14px;width:60px;height:110px;border-radius:10px;background:linear-gradient(160deg,#b9a2ff,#6a3ff0)}
.fv-video i:nth-child(1)::before{content:"";position:absolute;left:8px;right:8px;top:14px;height:9px;border-radius:3px;background:#111}
.fv-video i:nth-child(1)::after{content:"";position:absolute;left:12px;right:12px;bottom:26px;height:6px;border-radius:3px;background:#fff}
.fv-video i:nth-child(2),.fv-video i:nth-child(3){left:14px;right:14px;height:12px;border-radius:4px;box-shadow:none;background:repeating-linear-gradient(90deg,rgba(136,88,248,.55) 0 22%,transparent 22% 25%)}
.fv-video i:nth-child(2){bottom:30px;z-index:2}
.fv-video i:nth-child(3){bottom:12px;background:repeating-linear-gradient(90deg,rgba(14,14,14,.18) 0 14%,transparent 14% 17%)}
@media (max-width:1250px){.ddm.mega{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1100px){.ddm.mega{grid-template-columns:repeat(3,1fr)}.fcard{min-height:240px}}

/* ---- round 8 (2026-10-13): strade.tech style transitions and letter reveals ---- */
/* fixed theme layer behind the page; site.js clips each panel as its section scrolls (diagonal in, straight out, circle) */
.themes{position:fixed;inset:0;z-index:0;pointer-events:none}
.th{position:absolute;inset:0;background:#0B0B0D;clip-path:inset(100% 0 0 0);will-change:clip-path}
.th-final{clip-path:circle(0% at 50% 100%)}
html.themed main>section,html.themed .foot{position:relative;z-index:1}
html.themed .hero,html.themed .creators,html.themed .how,html.themed .final{background:transparent;border-radius:0}
.how,.final{border-radius:0}
.creators .stat,.creators .center .stat{color:#cfced6}
/* letters slide up out of a mask in the hero, and in from below in headings */
.word{display:inline-block;white-space:nowrap}
.ch{display:inline-block}
.hero h1 .ln{overflow:hidden;padding:0 .06em .14em;margin-bottom:-.14em}
/* hero cards drop out as the hero leaves (site.js tweens --drop) */
.card{margin-bottom:calc(var(--drop, 0px) * -1)}

/* ---- round 9 (2026-10-13): six tilted cards, laid out like strade.tech's project cards, in neutral colours ---- */
.problem{padding:110px 0 120px;overflow:hidden}
.tilt{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:30px 10px 50px}
.tilt-lines{position:absolute;left:-40vw;right:-40vw;top:-30%;bottom:-30%;pointer-events:none;z-index:0}
.tilt-lines i{position:absolute;left:0;right:0;top:46%;height:20px;background:var(--ink);transform:rotate(-22deg)}
.tilt-lines i:nth-child(2){top:60%;height:9px;background:var(--p)}
.tk{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;min-height:330px;margin:-8px;padding:32px 32px 36px;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 34px 60px -38px rgba(14,14,14,.4);transform:translateY(var(--ty,0px)) rotate(calc(var(--r,0deg) + var(--rx,0deg)));transition:transform .6s var(--ease),box-shadow .4s;color:var(--ink)}
.tk:nth-child(2){--r:-4deg}
.tk:nth-child(3){--r:4deg;margin-top:22px}
.tk:nth-child(4){--r:-3deg}
.tk:nth-child(5){--r:3deg;margin-top:14px}
.tk:nth-child(6){--r:-3deg;margin-top:28px}
.tk:nth-child(7){--r:4deg;margin-top:14px}
.tk:hover{--r:0deg;--ty:-8px;z-index:3;box-shadow:0 40px 70px -34px rgba(14,14,14,.45)}
.tk-tag{align-self:flex-start;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;border-radius:99px;background:var(--ink);color:#fff}
.tk.old .tk-tag{background:#ecebe7;color:var(--ink2)}
.tk-arr{position:absolute;top:30px;right:30px;width:24px;height:24px;transition:transform .4s var(--ease)}
.tk:hover .tk-arr{transform:translate(3px,-3px)}
.tk h3{margin-top:auto;padding-top:40px;font-size:clamp(28px,2.7vw,40px);font-weight:600;letter-spacing:-.045em;line-height:1}
.tk p{font-size:15.5px;line-height:1.5;color:var(--ink2);max-width:420px}
@media (max-width:900px){.tilt{grid-template-columns:1fr;gap:16px;padding:10px 0 30px}.tk{margin:0!important;min-height:0}.tk:nth-child(odd){--r:-1.5deg}.tk:nth-child(even){--r:1.5deg}.tk h3{padding-top:24px}}

/* round 11: how it works in four steps (upload, format, style, finished post) */
.fmts{display:flex;gap:14px;justify-content:center;align-items:flex-end;height:100%}
.fmt{flex:1;max-width:30%;display:flex;flex-direction:column;align-items:center;gap:12px}
.fmt .fp{width:100%;border-radius:14px;position:relative;overflow:hidden;border:2px solid transparent;transition:border-color .4s,box-shadow .4s,transform .5s var(--ease)}
.fmt .fp.reel,.fmt .fp.story{aspect-ratio:9/16}
.fmt .fp.carousel{aspect-ratio:4/5}
.fmt span{font-size:13px;color:#77767e;transition:color .4s}
.fmt.pick .fp{border-color:var(--p);box-shadow:0 0 0 4px rgba(136,88,248,.25);transform:translateY(-6px)}
.fmt.pick span{color:#fff}
.ftabs{display:flex;gap:6px;margin-bottom:6px}
.ftabs span{font-size:12px;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.06);color:#77767e;transition:background .4s,color .4s}
.ftabs span.on{background:#fff;color:#0B0B0D}
.styles .sty .ph{opacity:.9}
.styles .sty span{z-index:2;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.styles.k-carousel .sty{aspect-ratio:4/5}
.styles .sty{aspect-ratio:9/16}
.scene[data-scene="3"] .slides{height:auto;flex:1;align-items:center}
.slides .sl{width:auto;flex:1;max-width:24%}
.slides .sl.reel,.slides .sl.story{aspect-ratio:9/16}
.slides .sl.carousel{aspect-ratio:4/5}
.slides .sl .ok{position:absolute;top:8px;right:8px;z-index:3;width:20px;height:20px;border-radius:50%;background:#fff;color:#0B0B0D;display:grid;place-items:center}
.slides .sl .ok svg{width:12px;height:12px}
.scene .exp{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.scene .exp span{font-size:11px;padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.08);color:#cfcfd6}
.styles .sty span{left:8px;bottom:14px;padding:4px 8px;border-radius:7px;background:rgba(14,14,14,.72);text-shadow:none;font-size:11px}

/* round 12 (2026-10-13): buttons in black and white only, with a fill that grows from the arrow on hover, the arrow
   slides through, and a press on click. Replaces the purple arrow circle. */
.btn{position:relative;isolation:isolate;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),color .3s}
.btn::before{content:"";position:absolute;z-index:-1;right:8px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;background:var(--fill,transparent);transform:scale(0);transition:transform .7s var(--ease)}
.btn:hover::before{transform:scale(14)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.96);transition-duration:.15s}
.btn .ar{overflow:hidden;transition:transform .45s var(--ease),background .3s}
.btn:hover .ar{transform:none}
.btn:hover .ar svg{animation:arr .55s var(--ease)}
@keyframes arr{0%{transform:none}45%{transform:translateX(170%);opacity:0}46%{transform:translateX(-170%);opacity:0}100%{transform:none;opacity:1}}
.btn.black{--fill:#2c2c2f}
.btn.black .ar{background:#fff;color:var(--ink)}
.btn.black:hover{box-shadow:0 14px 30px -14px rgba(14,14,14,.55)}
.btn.white{--fill:#e9e8e4}
.btn.white .ar{background:var(--ink);color:#fff}
.btn.white:hover{box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.btn.soft{--fill:#e9e8e4}
.btn.ghostd{--fill:rgba(255,255,255,.1)}
.btn[disabled]{pointer-events:none}
@media (prefers-reduced-motion:reduce){.btn,.btn::before,.btn .ar{transition:none}.btn:hover .ar svg{animation:none}}

/* the smaller pages (agencies, affiliates, book) share the main page's look: the square grid behind the top, tilted cards */
.phero,.book{position:relative}
.phero>.wrap,.book>.cols{position:relative;z-index:1}
.book .hero-bg .grid{mask-image:radial-gradient(ellipse 80% 55% at 30% 20%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 55% at 30% 20%,#000 30%,transparent 75%)}
.tilt.two{grid-template-columns:repeat(2,1fr);max-width:1000px;margin:0 auto}
.tilt.two .tk{min-height:300px}
@media (max-width:900px){.tilt.two{grid-template-columns:1fr}}

/* step forms (/book/, /affiliates/; steps.js): one short group of questions per step, black and white only */
.sf{display:flex;flex-direction:column}
.sf-top{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.sf-n{font-size:13px;color:var(--mute)}
.sf-bar{height:4px;border-radius:2px;background:#ecebe7;overflow:hidden}
.sf-bar i{display:block;height:100%;width:33%;background:var(--ink);border-radius:2px;transition:width .6s var(--ease)}
.sf-steps{overflow:hidden;margin:0 -6px;padding:0 6px}
.sf-step{display:flex;flex-direction:column;gap:22px;padding:2px 0 6px}
.sf-step h2{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.04em;line-height:1.08}
.sf-sub{color:var(--mute);font-size:15.5px;margin-top:-12px}
.sf .q{display:flex;flex-direction:column;gap:10px}
.sf .q[hidden]{display:none}
.sf .ql{font-size:14px;font-weight:500;color:var(--ink)}
.sf input:not([type=radio]),.sf select{font:inherit;font-size:16px;width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--line2);background:#fff;color:var(--ink);outline:none;transition:border-color .25s,box-shadow .25s}
.sf input::placeholder{color:#a3a29c}
.sf input:not([type=radio]):focus,.sf select:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,14,14,.08)}
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}

.sel::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.8px solid var(--ink2);border-bottom:1.8px solid var(--ink2);transform:rotate(45deg);pointer-events:none;transition:transform .3s var(--ease)}
.sel:focus-within::after{transform:rotate(225deg);margin-top:-2px}
.sf .chips{gap:10px}
.sf .chips label{position:relative}
.sf .chips span{display:inline-flex;align-items:center;gap:0;padding:12px 18px;font-size:15px;border:1px solid var(--line2);background:#fff;border-radius:99px;transition:background .3s,color .3s,border-color .3s,gap .3s var(--ease),transform .2s}
.sf .chips span::before{content:"";width:0;height:18px;border-radius:50%;background:#fff;opacity:0;transition:width .3s var(--ease),opacity .3s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-8.5'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.sf .chips span:hover{border-color:var(--ink2)}
.sf .chips label:active span{transform:scale(.96)}
.sf .chips input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink);gap:9px}
.sf .chips input:checked+span::before{width:18px;opacity:1}
.sf .chips input:focus-visible+span{box-shadow:0 0 0 4px rgba(14,14,14,.12)}
.sf-err{color:#b3261e;font-size:14px;min-height:20px;margin-top:14px}
.sf-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.sf-back{height:52px;padding:0 24px;border-radius:99px;background:#ecebe7;color:var(--ink);font-weight:500;font-size:16px;transition:background .3s,transform .2s}
.sf-back:hover{background:#e2e1dc}
.sf-back:active{transform:scale(.96)}
.booked-step i{background:var(--ink)}
@media (max-width:520px){.sf .chips span{padding:11px 15px;font-size:14px}}
.sel select:has(option[value=""]:checked){color:#a3a29c}
.sel option{color:var(--ink)}
.sf-step[hidden]{display:none}
.sf .bot{display:none!important}

/* affiliates page (2026-10-13, structure after taap.it/affiliate): hero with a link that types itself, three how-it-works
   cards with small looping visuals, who it's for, two-column FAQ, dark final section. Apply opens the form in a dialog. */
.aff-hero{padding-bottom:110px}
.aff-hero h1{font-size:clamp(42px,6vw,84px);max-width:1050px}
.aff-hero .lead{max-width:640px}

.aff-how{padding:40px 0 120px}
.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hc{background:#fff;border:1px solid var(--line);border-radius:28px;padding:14px 14px 30px;display:flex;flex-direction:column;gap:12px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.hc:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(14,14,14,.35)}
.hc h3{padding:12px 16px 0;font-size:22px;letter-spacing:-.03em}
.hc p{padding:0 16px;color:var(--ink2);font-size:15.5px;line-height:1.5}
.hv{position:relative;height:200px;border-radius:18px;background:var(--bg);overflow:hidden;display:grid;place-items:center;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px}
/* apply: chips get picked, a bar fills */
.hv-apply{align-content:center;gap:16px}
.mini{display:flex;gap:6px}
.mini span{font-size:12px;padding:7px 11px;border-radius:99px;background:#fff;border:1px solid var(--line2);display:inline-flex;align-items:center;gap:5px;transition:background .4s,color .4s}
.mini span svg{width:11px;height:11px;display:none}
.play .mini span.m-on{animation:pick 3.2s var(--ease) infinite}
.play .mini span.m-on svg{display:block}
@keyframes pick{0%,15%{background:#fff;color:var(--ink)}25%,85%{background:var(--ink);color:#fff}100%{background:#fff;color:var(--ink)}}
.mini-bar{width:200px;height:4px;border-radius:2px;background:#e4e3df;justify-self:center;overflow:hidden}
.mini-bar i{display:block;height:100%;width:0;background:var(--ink)}
.play .mini-bar i{animation:fill 3.2s var(--ease) infinite}
@keyframes fill{0%,20%{width:0}60%,90%{width:100%}100%{width:0}}
/* share: wires draw out from the atlas mark to each platform */
.wires{position:absolute;inset:0;width:100%;height:100%}
.wires path{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:120;stroke-dashoffset:120;opacity:.5;vector-effect:non-scaling-stroke}
.play .wires path{animation:wire 3.6s var(--ease) infinite}
.play .wires path:nth-child(2){animation-delay:.15s}.play .wires path:nth-child(3){animation-delay:.3s}.play .wires path:nth-child(4){animation-delay:.45s}
@keyframes wire{0%{stroke-dashoffset:120}35%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-120}}
.hub,.nd{position:absolute;display:grid;place-items:center;background:#fff;border:1px solid var(--line2);box-shadow:0 10px 24px -14px rgba(14,14,14,.35)}
.hub{width:58px;height:58px;border-radius:18px;left:50%;top:50%;margin:-29px 0 0 -29px}
.hub img{width:30px;height:30px}
.nd{width:40px;height:40px;border-radius:12px;transition:transform .4s var(--ease)}
.nd img,.nd svg{width:18px;height:18px}
.nd.n1{left:17%;top:20%;margin:-20px}.nd.n2{left:83%;top:20%;margin:-20px}.nd.n3{left:17%;top:80%;margin:-20px}.nd.n4{left:83%;top:80%;margin:-20px}
.play .nd{animation:pop 3.6s var(--ease) infinite}
.play .nd.n2{animation-delay:.15s}.play .nd.n3{animation-delay:.3s}.play .nd.n4{animation-delay:.45s}
@keyframes pop{0%,25%{transform:scale(1)}35%{transform:scale(1.12)}45%,100%{transform:scale(1)}}
/* paid: rows slide in one after another */
.rows{display:flex;flex-direction:column;gap:8px;width:82%}
.row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;opacity:0;transform:translateY(12px)}
.row b{width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}
.row b svg{width:11px;height:11px}
.row span{font-weight:500}
.row em{margin-left:auto;font-style:normal;color:var(--mute);font-size:12px}
.play .row{animation:row 4.2s var(--ease) infinite}
.play .row:nth-child(2){animation-delay:.35s}.play .row:nth-child(3){animation-delay:.7s}
@keyframes row{0%{opacity:0;transform:translateY(12px)}12%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px)}}
@media (max-width:900px){.how3{grid-template-columns:1fr}}

.aff-who{padding:0 0 120px}
.who-grid{display:grid;grid-template-columns:1.1fr repeat(3,1fr);border:1px solid var(--line);border-radius:28px;background:#fff;overflow:hidden}
.who-l{padding:34px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}
.who-l h2{font-size:clamp(32px,3.4vw,46px)}
.who-l p{color:var(--ink2);font-size:16px}
.who-c{padding:34px 28px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:14px;transition:background .4s}
.who-c:hover{background:#fbfaf8}
.who-c h3{margin-top:auto;padding-top:60px;font-size:22px;letter-spacing:-.03em;line-height:1.1}
.who-c p{color:var(--ink2);font-size:15px;line-height:1.5}
@media (max-width:1000px){.who-grid{grid-template-columns:1fr}.who-c{border-left:0;border-top:1px solid var(--line)}.who-c h3{padding-top:24px}}

/* the apply dialog */
.apply-dlg{border:0;padding:0;background:transparent;width:min(600px,calc(100vw - 24px));max-width:none;max-height:calc(100svh - 24px);overflow:auto;margin:auto;color:var(--ink)}
.apply-dlg::backdrop{background:rgba(14,14,14,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:bd .4s ease}
.apply-dlg.out::backdrop{opacity:0;transition:opacity .3s}
@keyframes bd{from{opacity:0}}
.apply-dlg .panel{position:relative;box-shadow:0 40px 90px -30px rgba(0,0,0,.5)}
.dlg-x{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;background:var(--bg);display:grid;place-items:center;transition:background .25s,transform .35s var(--ease);z-index:2}
.dlg-x:hover{background:#e7e6e1;transform:rotate(90deg)}
.dlg-x svg{width:16px;height:16px}
html.dlg-on{overflow:hidden}

/* affiliates: earnings slider (a range per month, black and white) */
.calc{margin-top:40px;width:min(1000px,100%);display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px 40px 46px;box-shadow:0 30px 60px -44px rgba(14,14,14,.35)}
.rng{position:relative;--pct:20%}
.rng input{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:99px;background:linear-gradient(90deg,var(--ink) var(--pct),#ecebe7 var(--pct));outline:none;cursor:pointer;margin:0}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 6px 16px -6px rgba(14,14,14,.45);transition:transform .25s var(--ease)}
.rng input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--ink)}
.rng input:active::-webkit-slider-thumb{transform:scale(1.15)}
.rng input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(14,14,14,.12)}
.rng-tip{position:absolute;top:30px;left:calc(15px + (100% - 30px) * var(--f, .2));transform:translateX(-50%);white-space:nowrap;font-size:14px;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 11px;box-shadow:0 10px 20px -14px rgba(14,14,14,.4);pointer-events:none}
.rng-tip b{color:var(--ink);font-weight:600}
.calc-r{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.calc-r b{font-size:clamp(28px,3.6vw,48px);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;min-width:8.6ch}
.calc-r>span{font-size:15px;color:var(--mute);margin-top:6px}
@media (max-width:760px){.calc{grid-template-columns:1fr;padding:26px 22px 62px;gap:40px}.calc-r{align-items:flex-start;text-align:left;order:-1}.calc-r b{min-width:0}}

/* affiliates round 2: rolling digits (odometer) on the earnings slider, and taap.it's "become an affiliate now" key */
.odo{display:inline-flex;font-variant-numeric:tabular-nums}
.odo .od{display:inline-block;height:1em;line-height:1em;overflow:hidden}
.odo .ods{display:block;line-height:1em;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.odo .os{display:inline-block;line-height:1em}
.calc-r b{display:inline-flex;align-items:center;line-height:1;padding:.06em 0}
.calc-r .dash{padding:0 .18em;white-space:pre}
.rng-tip b{display:inline-flex}
.rng input::-webkit-slider-thumb{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.rng input:hover::-webkit-slider-thumb{transform:scale(1.1);box-shadow:0 0 0 8px rgba(14,14,14,.07),0 6px 16px -6px rgba(14,14,14,.45)}
.rng-tip{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.rng:active .rng-tip{transform:translateX(-50%) translateY(3px) scale(1.04)}

.btn-tp{position:relative;display:inline-flex;padding:1px 1px 2px;border-radius:11px;background:#1D1D1E;box-shadow:0 10px 24px -12px rgba(14,14,14,.6);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;cursor:pointer}
.btn-tp>span{display:block;border-radius:10px;padding:1px 1px 0;background:#5a5a5c;transition:background .3s}
.btn-tp>span>span{display:flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:9px 9px 8.5px 8.5px;background:linear-gradient(180deg,#1D1D1E,#2F2F30 56%);color:#fff;font-size:16px;font-weight:500;transition:background .3s}
.btn-tp:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(14,14,14,.65)}
.btn-tp:hover>span>span{background:linear-gradient(180deg,#5E5E65,#2F2F30)}
.btn-tp:active{transform:translateY(1px) scale(.97);transition-duration:.12s}
.btn-tp.light{background:#cfcec9}
.btn-tp.light>span{background:#fff}
.btn-tp.light>span>span{background:linear-gradient(180deg,#fff,#efeeea 56%);color:var(--ink)}
.btn-tp.light:hover>span>span{background:linear-gradient(180deg,#fff,#e2e1dc)}
.roll{display:inline-flex;overflow:hidden;height:1.3em;line-height:1.3em}
.roll .l{position:relative;display:inline-block;transition:transform .5s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 12ms)}
.roll .l::after{content:attr(data-c);position:absolute;left:0;top:100%}
.btn-tp:hover .roll .l{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.roll .l,.odo .ods{transition:none}}

/* agencies (round 17): the agency plan, a workspace for every client */
.ag-ws{padding:20px 0 110px}
.ag-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ag-copy{display:flex;flex-direction:column;gap:18px}
.ag-copy h2{font-size:clamp(34px,4vw,56px)}
.ag-copy p{color:var(--ink2);font-size:17px;max-width:500px}
.ag-panel{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(14,14,14,.45)}
.ag-panel .top{height:44px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid var(--line)}
.ag-panel .top i{width:10px;height:10px;border-radius:50%;background:#e4e3df}
.ag-panel .top span{margin-left:10px;font-size:12px;color:var(--mute)}
.ws-list{padding:14px;display:flex;flex-direction:column;gap:8px}
.ws{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid transparent;transition:background .4s,border-color .4s}
.ws-av{width:38px;height:38px;border-radius:11px;background:var(--bg);display:grid;place-items:center;font-weight:600;font-size:14px;flex:none;transition:background .4s,color .4s}
.ws-n{display:flex;flex-direction:column;font-weight:500;font-size:15px}
.ws-n small{font-weight:400;font-size:13px;color:var(--mute)}
.ws-ok{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .4s,transform .4s var(--ease)}
.ws-ok svg{width:12px;height:12px}
.ws.on{background:var(--bg);border-color:var(--line)}
.ws.on .ws-av{background:var(--ink);color:#fff}
.ws.on .ws-ok{opacity:1;transform:none}
@media (max-width:900px){.ag-grid{grid-template-columns:1fr;gap:34px}}

/* affiliates round 3: the slider as on taap.it (plain, no card), black and white; numbers are NumberFlow */
.calc{background:none;border:0;box-shadow:none;padding:10px 0 40px;width:min(1000px,100%);gap:48px}
.rng input{height:16px;border:1px solid #dedede;box-shadow:inset -6px 4px 4px rgba(0,0,0,.05);background:linear-gradient(90deg,var(--ink) var(--pct),#fff var(--pct))}
.rng input::-webkit-slider-thumb{width:28px;height:28px;border:3px solid var(--ink);background:#fff;box-shadow:none;transition:background .3s ease}
.rng input::-webkit-slider-thumb:hover{background:#ececec;transform:none;box-shadow:none}
.rng input:hover::-webkit-slider-thumb{transform:none;box-shadow:none}
.rng input:active::-webkit-slider-thumb{transform:none}
.rng input::-moz-range-thumb{width:22px;height:22px;border:3px solid var(--ink);background:#fff}
.rng-tip{top:40px;padding:4px 8px;border:0;border-radius:5px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);font-size:16px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;transition:none}
.rng:active .rng-tip{transform:translateX(-50%)}
.tip-arr{position:absolute;top:-7px;left:50%;margin-left:-6px;width:12px;height:8px;background:#fff;clip-path:polygon(50% 0,100% 100%,0 100%)}
.calc-r{align-items:center;text-align:center}
.calc-r b{font-size:clamp(30px,3.4vw,46px);gap:.2em}
.calc-r .dash{padding:0}
.calc-r>span{color:var(--ink);font-weight:600;font-size:18px;margin-top:4px}
number-flow{font-variant-numeric:tabular-nums;--number-flow-char-height:1em}
@media (max-width:760px){.calc{padding:0 0 50px;gap:28px}.calc-r{align-items:flex-start;text-align:left}}

/* book: consent tick and the end screens (not confirmed yet / not a fit yet) */
.sf .consent{flex-direction:row;align-items:flex-start;gap:12px;font-size:14px;color:var(--ink2);line-height:1.45;cursor:pointer}
.sf .consent input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;padding:0!important;border-radius:7px;border:1.5px solid var(--line2);background:#fff;display:grid;place-items:center;cursor:pointer;transition:background .25s,border-color .25s}
.sf .consent input::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.sf .consent input:checked{background:var(--ink);border-color:var(--ink)}
.sf .consent input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.endnote{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:10px 0}
.endnote[hidden]{display:none}
.endnote h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.04em;line-height:1.05}
.endnote p{color:var(--ink2);font-size:16.5px;max-width:440px}
.en-ic{width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.en-ic svg{width:22px;height:22px}

/* footer legal row (2026-10-14): privacy (this site), terms and imprint (app.brandzey.io/legal), on every page */
.foot .legal-row{flex-basis:100%;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:18px;margin-top:4px;border-top:1px solid rgba(255,255,255,.07);font-size:13px}
.foot .legal-row nav{display:flex;gap:18px}

/* privacy notice (/privacy/) */
.legal{padding:150px 0 100px}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(40px,5vw,64px);margin-bottom:10px}
.legal h2{font-size:22px;letter-spacing:-.03em;margin:40px 0 12px}
.legal p{color:var(--ink2);font-size:16px;line-height:1.65;margin-bottom:12px}
.legal p.fine{color:var(--mute);font-size:14px;margin-bottom:26px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal .tbl{overflow-x:auto;margin:6px 0 14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.legal table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.legal th,.legal td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink2)}
.legal th{color:var(--ink);font-weight:600}
.legal tr:last-child td{border-bottom:0}

/* text pages built by tools/pages.py: /about/, /compare/ and /compare/<slug>/ (2026-10-14) */
.doc{padding:150px 0 110px;position:relative;z-index:1}
.doc .wrap{max-width:820px}
.doc .wrap.wide{max-width:1180px}
.doc .kicker{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.doc .kicker a{text-decoration:underline;text-underline-offset:3px}
.doc h1{font-size:clamp(40px,5.4vw,72px);margin-bottom:22px}
.doc .lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink);margin-bottom:16px;max-width:760px}
.doc h2{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.04em;margin:52px 0 14px}
.doc p{color:var(--ink2);font-size:16.5px;line-height:1.65;margin-bottom:12px}
.doc p.fine{font-size:13.5px;color:var(--mute)}
.doc p a,.doc li a{text-decoration:underline;text-underline-offset:3px}
.doc .verdict{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px 0 10px}
.doc .verdict>div{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 26px}
.doc .verdict>div:first-child{background:var(--ink);color:#fff;border-color:var(--ink)}
.doc .verdict h3{font-size:15px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin-bottom:14px}
.doc .verdict ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.doc .verdict li{font-size:15.5px;line-height:1.45;padding-left:22px;position:relative;color:inherit;opacity:.92}
.doc .verdict li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.5}
.doc .tbl{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff;margin:6px 0 10px}
.doc table{width:100%;border-collapse:collapse;font-size:15px;min-width:600px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--ink2);line-height:1.45}
.doc thead th{color:var(--ink);font-weight:600;background:#fbfaf8}
.doc tbody th{color:var(--ink);font-weight:500;width:22%}
.doc tr:last-child th,.doc tr:last-child td{border-bottom:0}
.doc .qa{margin-top:6px}
.doc .src{margin-top:36px}
.doc .more{margin-top:28px;font-size:15px}
.doc .more a{text-decoration:underline;text-underline-offset:3px}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.cc{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;min-height:220px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cc:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 40px 70px -40px rgba(14,14,14,.4)}
.cc h3{margin-top:auto;font-size:24px;letter-spacing:-.04em}
.cc p{font-size:14.5px;color:var(--ink2);line-height:1.5;margin:0}
@media (max-width:900px){.cgrid{grid-template-columns:1fr 1fr}.doc .verdict{grid-template-columns:1fr}}
@media (max-width:600px){.cgrid{grid-template-columns:1fr}}
.doc table th{font-size:15px;text-transform:none;letter-spacing:-.01em}.doc thead th{font-size:14px}

/* ---- phone pass (2026-10-14): menu, lighter motion, tighter spacing, layouts that fit a phone ---- */
/* menu (menu.js): a button next to "open atlas" under 980px, and a panel that drops from the bar */
.mb{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line2);background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:5px;-webkit-tap-highlight-color:transparent}
.mb i{display:block;width:16px;height:1.6px;border-radius:1px;background:var(--ink);transition:transform .3s var(--ease)}
.menu-on .mb i:first-child{transform:translateY(3.3px) rotate(45deg)}
.menu-on .mb i:last-child{transform:translateY(-3.3px) rotate(-45deg)}
.msheet{position:absolute;left:0;right:0;top:calc(100% + 8px);padding:14px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -24px rgba(14,14,14,.35);opacity:0;transform:translateY(-8px);transition:opacity .22s,transform .3s var(--ease);max-height:calc(100svh - 100px);overflow:auto;overscroll-behavior:contain}
.msheet.on{opacity:1;transform:none}
.msheet[hidden]{display:none}
.ms-k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:4px 6px 8px}
.ms-feats{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ms-feats a{font-size:14px;padding:9px 13px;border-radius:99px;background:var(--bg)}
.ms-links{display:flex;flex-direction:column;padding:6px 0}
.ms-links a{font-size:18px;letter-spacing:-.02em;padding:11px 6px;border-radius:10px}
.ms-links a[aria-current]{color:var(--mute)}
.ms-ctas{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.ms-ctas .btn{justify-content:center;padding:0 24px;width:100%}
@media (max-width:980px){.mb{display:inline-flex}.nav .right{gap:8px}}
@media (hover:hover){.ms-feats a:hover,.ms-links a:hover{background:var(--bg)}}

a,button,summary,.fc,.ob{-webkit-tap-highlight-color:transparent}

@media (max-width:900px){
  /* dark sections keep their own background on phones (site.js only runs the scroll-driven theme layer on desktop);
     a rounded top edge stands in for the diagonal and circle transitions */
  .how,.final{border-radius:32px 32px 0 0}
  .creators{background:#0B0B0D}
  /* how it works: the studio screen stays pinned under the bar while the steps scroll past it */
  .how .grid2{gap:0}
  .screen{position:sticky;top:84px;z-index:2;height:min(330px,46svh);order:-1;box-shadow:0 24px 40px -12px #0E0E0E,0 -12px 0 12px #0E0E0E}
  .scene{padding:16px 18px;gap:10px}
  .file{padding:10px 12px}
  .steps{padding-top:24px}
  .step{opacity:.42;padding:28px 0}
  .step:last-child{padding-bottom:12vh}
  /* problem and agencies: the tilted cards become one swipeable row instead of a 2,000px stack */
  .tilt,.tilt.two{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:18px 16px 36px;margin:0 -16px;max-width:none;scrollbar-width:none;overscroll-behavior-x:contain}
  .tilt::-webkit-scrollbar{display:none}
  .tilt .tk,.tilt.two .tk{flex:0 0 min(84%,380px);scroll-snap-align:start;min-height:320px}
  .tilt-lines{display:none}
}
@media (max-width:700px){
  .creators .center{max-width:250px}
  .creators .center h2{font-size:32px}
}
@media (max-width:600px){
  /* spacing sized for a phone, not a desktop */
  .examples{padding:84px 0 56px}
  .how{padding:84px 0 64px}
  .why{padding:24px 0 0}
  .assemble{padding:24px 0 40px;gap:28px}
  .problem{padding:56px 0 64px}
  .faq{padding:20px 0 84px}
  .final{padding:96px 0 88px}
  .final p{font-size:16px}
  .phero{padding:124px 0 56px}
  .aff-hero{padding-bottom:64px}
  .aff-how{padding:16px 0 76px}
  .aff-who{padding:0 0 76px}
  .ag-ws{padding:8px 0 76px}
  .pgrid{padding:0 0 64px}
  .doc{padding:118px 0 76px}
  .doc h2{margin:40px 0 12px}
  .legal{padding:118px 0 76px}
  .book{padding:112px 0 64px}
  .head{margin-bottom:36px;gap:16px}
  .head p{font-size:16.5px}
  .tk{padding:26px 24px 28px}
  .tk h3{font-size:28px}
  /* faq: full width answers, no 50px gap on the right */
  .qa summary{padding:20px 0;font-size:17px}
  .qa .ai{padding:0 0 20px}
  /* formats grid: three tiles across, so the placeholder art is drawn smaller and the labels stay clear of it */
  .tiles{gap:8px}
  .tile{border-radius:14px}
  .tile small{top:7px;left:7px;font-size:9px;padding:2px 6px}
  .tile span{left:8px;right:8px;bottom:8px;font-size:11px}
  .tile .ph .hdr{display:none}
  .tile .ph .play{width:30px;height:30px;margin:-15px 0 0 -15px;top:44%}
  .tile .ph .play::after{border-left-width:9px;border-top-width:6px;border-bottom-width:6px;margin-left:3px}
  .tile .ph .cap{display:none}
  .tile .ph .bar{left:8px;right:8px;bottom:4px}
  .tile .ph .t1{top:30%;height:12px;width:66%}
  .tile .ph .t2{top:42%;height:12px;width:50%}
  .tile .ph .t3{top:53%;height:8px}
  .tile .ph .dotsrow{bottom:38px}
  .tile .ph .segs{top:7px;left:7px;right:7px}
  .tile .ph .blob{left:28%;right:28%;top:24%}
  .tile .ph .shot{left:20%;right:20%;top:38%;height:24%;border-radius:8px}
  .tile:has(.ph .segs) small{top:14px}
  /* footer links big enough to tap */
  .foot .links{gap:0 18px}
  .foot .links a,.foot .legal-row nav a{display:inline-block;padding:9px 0}
  .foot{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
  /* comparison tables: each row becomes a small card with the two answers labelled */
  .doc .tbl table{min-width:0}
  .doc .tbl thead{display:none}
  .doc .tbl tbody tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
  .doc .tbl tr:last-child{border-bottom:0}
  .doc .tbl tbody th{grid-column:1/-1;width:auto;padding:16px 16px 6px;border:0;font-weight:600}
  .doc .tbl td{border:0;padding:4px 16px 16px;font-size:14.5px}
  .doc .tbl td+td{border-left:1px solid var(--line)}
  .doc .tbl td[data-l]::before{content:attr(data-l);display:block;margin-bottom:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
}
@media (max-width:360px){
  .nav a.open{padding:9px 10px;font-size:13.5px}
  .logo{font-size:16px}
  .tabs button{padding:8px 11px;font-size:13px}
}

/* phone pass, round 2 (2026-10-14 verification): the studio screen's cards are sized by width, so on tablets and
   phones held sideways they overflowed the pinned screen. Their row is capped so it always fits, and a phone held
   sideways (too short to pin anything) gets the screen back in the flow at a fixed height. */
@media (max-width:900px){
  .scene .fmts,.scene .ftabs,.scene .styles,.scene .slides{width:100%;max-width:370px;margin-inline:auto}
  .scene[data-scene="3"] .slides{flex:none}
}
@media (max-width:900px) and (max-height:520px){
  .screen{position:relative;top:0;height:330px;box-shadow:none}
  .step:last-child{padding-bottom:28px}
}
@media (max-width:420px){
  .ob{width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:16px}
  .ob svg{width:24px;height:24px}
}

/* affiliates earnings on phones (Etele, 2026-10-15): centred like the rest of the hero, in a white card like the book
   form and the tilted cards, with the range big and the slider full width under it. Desktop keeps the plain layout. */
@media (max-width:760px){
  .aff-hero .calc{width:100%;margin-top:34px;padding:30px 22px 66px;gap:26px;justify-items:stretch;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 34px 60px -38px rgba(14,14,14,.4)}
  .aff-hero .calc-r{align-items:center;text-align:center;order:-1}
  .aff-hero .calc-r b{font-size:clamp(28px,8.6vw,38px);justify-content:center}
  .aff-hero .calc-r>span{font-size:15px;font-weight:500;color:var(--mute);margin-top:8px}
}

/* telegram group (2026-10-19): dark card between the six cards and the FAQ, feed + plane animated in tg.js */
.tg{padding:10px 0 120px;scroll-margin-top:80px}
.tg-card{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:clamp(40px,6vw,80px);border-radius:36px;background:var(--dark);color:#fff;box-shadow:0 40px 80px -50px rgba(14,14,14,.6)}
.tg-card::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 75%)}
.tg-glow{position:absolute;z-index:-1;right:-10%;top:50%;width:760px;height:620px;transform:translate(0,-50%);background:radial-gradient(closest-side,rgba(136,88,248,.42),rgba(136,88,248,0));pointer-events:none;animation:tgGlow 7s ease-in-out infinite alternate}
@keyframes tgGlow{to{transform:translate(-60px,-46%) scale(1.12);opacity:.75}}
.tg-trail{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.tg-trail path{fill:none;stroke:rgba(180,155,255,.35);stroke-width:1.6;stroke-dasharray:3 9;vector-effect:non-scaling-stroke;animation:tgDash 30s linear infinite}
@keyframes tgDash{to{stroke-dashoffset:-600}}
.tg-fly{position:absolute;left:0;top:0;z-index:0;width:30px;height:30px;color:var(--p2);opacity:0;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(136,88,248,.6));will-change:transform}
.tg-fly svg{width:100%;height:100%}
.tg-card .eyebrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#cfcfd6}
.tg-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.tg-copy h2{font-size:clamp(34px,4.4vw,58px);max-width:560px}
.tg-copy p{color:#a9a8b0;font-size:18px;max-width:520px}
.tg-perks{list-style:none;display:flex;flex-wrap:wrap;gap:8px;max-width:520px}
.tg-perks li{font-size:14px;font-weight:500;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#e6e5ea;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.tg-perks li:hover{background:rgba(136,88,248,.22);border-color:rgba(180,155,255,.5);transform:translateY(-2px)}
.js .tg-perks li{opacity:0;transform:translateY(14px) scale(.96)}
.tg.in .tg-perks li{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease),background .3s,border-color .3s}
.tg.in .tg-perks li:nth-child(2){transition-delay:.08s}.tg.in .tg-perks li:nth-child(3){transition-delay:.16s}.tg.in .tg-perks li:nth-child(4){transition-delay:.24s}.tg.in .tg-perks li:nth-child(5){transition-delay:.32s}
.tg.in .tg-perks li:hover{transition-delay:0s}
.tg-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.tg-cta .btn.white:hover{box-shadow:0 14px 34px -10px rgba(136,88,248,.75)}
.tg-free{font-size:14px;color:#77767E}
.tg-phone{position:relative;z-index:1;justify-self:end;width:min(360px,100%);border-radius:30px;padding:12px;background:linear-gradient(180deg,#1d1c22,#141318);border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);transform:rotate(3deg);transition:transform .7s var(--ease)}
.tg-card:hover .tg-phone{transform:rotate(0deg) translateY(-6px)}
.tg-top{display:flex;align-items:center;gap:10px;padding:8px 10px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.tg-top img{width:36px;height:36px;border-radius:50%;background:#fff;padding:6px}
.tg-top span{display:flex;flex-direction:column;line-height:1.2;flex:1}
.tg-top b{font-weight:600;font-size:15px}
.tg-top small{font-size:12px;color:#8c8b93}
.tg-tgic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--p);color:#fff}
.tg-tgic svg{width:16px;height:16px;margin-left:-2px}
.tg-feed{height:500px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:14px 4px 10px;overflow:hidden;mask-image:linear-gradient(transparent,#000 22%);-webkit-mask-image:linear-gradient(transparent,#000 22%)}
.tg-msg{align-self:flex-start;max-width:88%;padding:10px 14px 11px;border-radius:18px 18px 18px 6px;background:#25242b;border:1px solid rgba(255,255,255,.06);transform-origin:0 100%}
.tg-msg p{font-size:14px;line-height:1.4;color:#e6e5ea}
.tg-k{display:inline-block;margin-bottom:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--p2)}
.tg-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:18px 18px 18px 6px;background:#25242b}
.tg-typing i{width:6px;height:6px;border-radius:50%;background:#8c8b93;animation:tgDot 1s ease-in-out infinite}
.tg-typing i:nth-child(2){animation-delay:.15s}.tg-typing i:nth-child(3){animation-delay:.3s}
@keyframes tgDot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.js .tg-msg,.js .tg-typing{display:none}
.tg-msg.on{display:block;animation:tgIn .55s var(--ease) both}
.tg-typing.on{display:flex;animation:tgIn .35s var(--ease) both}
.tg-feed.out .tg-msg{transition:opacity .5s,transform .5s var(--ease);opacity:0;transform:translateY(-20px)}
@keyframes tgIn{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
.tg-join{display:block;margin:6px 2px 2px;padding:12px;border-radius:14px;text-align:center;font-size:14px;font-weight:600;background:var(--p);color:#fff;transition:filter .2s}
.tg-join:hover{filter:brightness(1.1)}
@media (max-width:900px){.tg-card{grid-template-columns:1fr;gap:44px;padding:44px 22px 28px;border-radius:28px}.tg-phone{justify-self:center;transform:none}.tg-feed{height:460px}.tg{padding-bottom:90px}.tg-fly{display:none}}
@media (prefers-reduced-motion:reduce){.tg-glow,.tg-trail path{animation:none}.js .tg-msg{display:block}.js .tg-perks li{opacity:1;transform:none}.tg-fly{display:none}}

/* telegram feed with the channel's real posts (2026-10-19): 3 videos, a carousel album, a story sequence */
.tg-msg.tg-media{width:92%;max-width:92%;padding:4px 4px 0}
.tg-media p{padding:8px 10px 10px;font-size:13.5px}
.tg-vids,.tg-album .r2,.tg-album .r3{display:grid;gap:3px}
.tg-vids{grid-template-columns:repeat(3,1fr)}
.tg-vids video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#111;border-radius:4px}
.tg-vids video:first-child{border-top-left-radius:14px}.tg-vids video:last-child{border-top-right-radius:14px}
.tg-album{display:flex;flex-direction:column;gap:3px}
.tg-album .r2{grid-template-columns:1fr 1fr}.tg-album .r3{grid-template-columns:1fr 1fr 1fr}
.tg-album img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;background:#111}
.tg-album .r2 img:first-child{border-top-left-radius:14px}.tg-album .r2 img:last-child{border-top-right-radius:14px}
.tg-more{position:relative;display:block}
.tg-more b{position:absolute;inset:0;display:grid;place-items:center;border-radius:4px;background:rgba(0,0,0,.5);font-size:20px;font-weight:600}
.tg-msg.tg-storymsg{width:62%;max-width:62%}
.tg-story{position:relative;aspect-ratio:9/16;border-radius:14px 14px 4px 4px;overflow:hidden;background:#111}
.tg-story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s}
.tg-story img.on{opacity:1}
.tg-story img:nth-of-type(1){opacity:1}
.tg-story.run img:nth-of-type(1):not(.on){opacity:0}
.tg-bars{position:absolute;z-index:2;left:8px;right:8px;top:8px;display:flex;gap:3px}
.tg-bars i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;position:relative}
.tg-bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.tg-bars i.done::after{transform:none}
.tg-bars i.now::after{animation:tgBar var(--sd,1.6s) linear forwards}
@keyframes tgBar{to{transform:none}}

/* nav: the section in view stays black (2026-10-19, grey read as a disabled link); its purple dot removed 2026-10-26 */
.nav .links > a{position:relative}
.nav .links > a.on{color:var(--ink)}

/* ---------- real examples (2026-10-20) ----------
   Hero, examples and the why tiles show Etele's real reels, carousels and story sequence; how-it-works shows real
   Atlas screens. A slot with real media gets .real (site.js fill). */
.card.real,.fc .in.real,.tile.real{background:#0e0e0e}
.card.real .face,.fc .in.real .face,.tile.real .face{background:#0e0e0e!important}
.card.real .face::after{display:none}
.tile.real small{z-index:2}
.slot-media{background:#0e0e0e}
/* story frames: Instagram-style bars, the frames before and the current one filled */
.fc .segs{position:absolute;z-index:2;top:10px;left:10px;right:10px;display:flex;gap:4px}
.fc .segs i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.38)}
.fc .segs i.done{background:#fff}
/* sound button on the centre reel */
.fc .snd{position:absolute;z-index:3;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(14,14,14,.62);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .3s,transform .3s var(--ease)}
.fc .snd svg{width:19px;height:19px}
.fc .snd .on,.flow.sound .fc .snd .off{display:none}
.flow.sound .fc .snd .on{display:block}
.fc .snd:hover{transform:scale(1.08)}
.fc .snd:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.fc:not(.on) .snd{opacity:0;pointer-events:none}
/* examples: images can't be dragged out by the browser, so a drag always swipes the cards (2026-10-20) */
.flow img,.flow video{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* creator card: only the follower count, large (2026-10-20) */
.ig-top{gap:20px}
.ig-stats{justify-content:flex-start;text-align:left}
.ig-stats b{font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1.05}
.ig-stats span{font-size:13px}
@media (max-width:420px){.ig-stats b{font-size:26px}}
/* keyboard focus in the examples: a ring around the centre card and the tab, not a line across the page (2026-10-20) */
.flow:focus-visible{box-shadow:none}
.flow:focus-visible .fc.on .in{outline:2px solid var(--p);outline-offset:4px}
.tabs button:focus{outline:none}
.tabs button:focus-visible{outline:2px solid var(--p);outline-offset:2px}

/* ---------- how it works (2026-10-20 redesign, after a reference Etele sent) ----------
   A light panel with four steps side by side on a ruler line. Each step has a small drawing of the real editor (New edit,
   the styles, Atlas Intelligence's auto edit, Export). The base styles are each drawing's finished frame; .hs.on plays
   its animation from the start (the keyframes begin at the empty state), so a step that is not active rests finished.
   site.js "how-it-works" picks the active step. */
.hiw{padding:110px 0 120px}
.hiw-panel{background:#fff;border:1px solid var(--line);border-radius:32px;padding:72px 0 0;overflow:hidden;box-shadow:0 40px 90px -60px rgba(14,14,14,.3)}
.hiw h2{text-align:center;font-size:clamp(32px,4.2vw,56px);padding:0 24px}
.hiw-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px}
.hs{position:relative;display:flex;flex-direction:column;padding:0 26px 30px;border-left:1px solid var(--line);transition:background .6s var(--ease)}
.hs:first-child{border-left:0}
.hs::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,rgba(14,14,14,.16) 0 1px,transparent 1px 6px)}
.hs.on{background:#FAFAF8}
.hs .pill{position:relative;z-index:1;align-self:flex-start;transform:translateY(-50%);font-size:13px;font-weight:500;line-height:1;padding:8px 12px;border-radius:9px;background:#fff;border:1px solid var(--line2);color:var(--ink2);transition:background .4s,color .4s,border-color .4s}
.hs.on .pill{background:var(--ink);border-color:var(--ink);color:#fff}
.hs h3{margin-top:14px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.hs p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink2);min-height:4.5em}
.ill{margin-top:20px;position:relative;height:236px;border-radius:18px;background:var(--bg);overflow:hidden;font-family:var(--sans)}
.ill svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ill .win{position:absolute;left:14px;right:14px;top:18px;bottom:18px;background:#fff;border:1px solid rgba(14,14,14,.1);border-radius:12px;box-shadow:0 14px 30px -18px rgba(14,14,14,.3);overflow:hidden}
.ill .wbar{height:24px;display:flex;align-items:center;gap:4px;padding:0 9px;border-bottom:1px solid rgba(14,14,14,.07)}
.ill .wbar i{width:6px;height:6px;border-radius:50%;background:rgba(14,14,14,.13)}
.ill .wbar span{margin-left:6px;font-size:10px;font-weight:500;color:var(--mute)}
.ill .ok{display:grid;place-items:center;border-radius:50%;background:var(--p);color:#fff;flex:none}
.ill .ok svg{stroke-width:3}

/* step 1: a take drops into New edit's drop zone and uploads */
.ill-up .zone{position:absolute;left:10px;right:10px;top:34px;bottom:10px;border:1.5px dashed rgba(14,14,14,.18);border-radius:10px;display:flex;flex-direction:column;align-items:center;padding-top:16px;gap:6px}
.ill-up .arw{width:20px;height:20px;color:var(--ink2)}
.ill-up .zone b{font-size:11px;font-weight:500;color:var(--ink2)}
.ill-up .upf{position:absolute;left:9px;right:9px;bottom:9px;height:52px;background:#fff;border:1px solid rgba(14,14,14,.12);border-radius:9px;display:flex;align-items:center;gap:8px;padding:0 10px 4px;box-shadow:0 10px 20px -12px rgba(14,14,14,.4)}
.ill-up .fi{width:26px;height:26px;border-radius:7px;background:var(--psoft);color:var(--p);display:grid;place-items:center;flex:none}
.ill-up .fi svg{width:15px;height:15px}
.ill-up .fn{flex:1;font-size:11px;font-weight:600;line-height:1.25}
.ill-up .fn small{display:block;font-size:10px;font-weight:400;color:var(--mute)}
.ill-up .ok{width:18px;height:18px}
.ill-up .ok svg{width:11px;height:11px}
.ill-up .pb{position:absolute;left:10px;right:10px;bottom:7px;height:3px;border-radius:2px;background:rgba(14,14,14,.07);overflow:hidden}
.ill-up .pb i{position:absolute;inset:0;background:var(--p);transform-origin:0 50%}
.hs.on .ill-up .upf{animation:upFile 4.6s var(--ease) both}
.hs.on .ill-up .pb i{animation:upBar 4.6s linear both}
.hs.on .ill-up .ok{animation:okPop 4.6s both}
.hs.on .ill-up .zone{animation:upZone 4.6s both}
@keyframes upFile{0%{transform:translate(70px,-92px) rotate(9deg);opacity:0}12%{opacity:1}34%,100%{transform:none;opacity:1}}
@keyframes upBar{0%,34%{transform:scaleX(0)}78%,100%{transform:scaleX(1)}}
@keyframes okPop{0%,78%{transform:scale(0)}88%{transform:scale(1.18)}96%,100%{transform:scale(1)}}
@keyframes upZone{0%,8%{border-color:rgba(14,14,14,.18);background:transparent}16%,32%{border-color:var(--p);background:rgba(136,88,248,.05)}44%,100%{border-color:rgba(14,14,14,.18);background:transparent}}

/* step 2: the selected editing style grows a little while the others dim, moving from style to style (Etele
   2026-10-20: no outline, just bigger, smoothly); the tiles copy the app's own style previews */
.ill-sty .sts{position:absolute;left:12px;right:12px;top:42px;display:flex;justify-content:space-between}
.ill-sty .st{position:relative;width:21%;aspect-ratio:46/82;border-radius:8px;background:#151419;overflow:hidden;flex:none;opacity:.5}
.ill-sty .st.s1{transform:scale(1.16);opacity:1;box-shadow:0 12px 20px -10px rgba(14,14,14,.55)}
.ill-sty .face{position:absolute;left:50%;bottom:-8px;width:30px;height:28px;margin-left:-15px;border-radius:50% 50% 0 0;background:#2c2b33}
.ill-sty .face::before{content:"";position:absolute;left:50%;top:-15px;width:14px;height:16px;margin-left:-7px;border-radius:50%;background:#dcae86}
.ill-sty .cap{position:absolute;left:10px;right:10px;bottom:12px;height:4px;border-radius:2px;background:#fff;z-index:2}
.ill-sty .cards{position:absolute;top:9px;left:6px;right:6px;display:flex;gap:3px}
.ill-sty .cards b{flex:1;height:15px;border-radius:2px;background:#f2b9a2}
.ill-sty .cards b:nth-child(2){background:#a9c6f4}
.ill-sty .cards b:nth-child(3){background:#c7e8a2}
.ill-sty .s2{background:radial-gradient(70% 45% at 75% 28%,rgba(255,170,90,.38),transparent 70%),#151419}
.ill-sty .ttl{position:absolute;top:12px;left:8px;right:8px;display:flex;flex-direction:column;align-items:center;gap:3px}
.ill-sty .ttl b{width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.85)}
.ill-sty .ttl b+b{width:66%}
.ill-sty .s3 .top{position:absolute;left:0;right:0;top:0;height:44%;background:linear-gradient(160deg,#f3f1ec,#d8d4cb)}
.ill-sty .s3 .top::after{content:"";position:absolute;left:8px;right:10px;bottom:7px;height:13px;border-left:1.5px solid var(--p);border-bottom:1.5px solid var(--p);background:linear-gradient(to top right,transparent 48%,var(--p) 50%,transparent 53%)}
.ill-sty .lst{position:absolute;top:11px;left:11px;display:flex;flex-direction:column;gap:5px}
.ill-sty .lst b{position:relative;width:24px;height:3px;border-radius:2px;background:#fff}
.ill-sty .lst b::before{content:"";position:absolute;left:-6px;top:0;width:3px;height:3px;border-radius:50%;background:var(--p)}
.ill-sty .names{position:absolute;left:0;right:0;bottom:18px;height:22px}
.ill-sty .names span{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--psoft);color:#5b2fd6;opacity:0}
.ill-sty .names span:first-child{opacity:1}
.hs.on .ill-sty .st{animation-duration:4.6s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.45,0,.25,1)}
.hs.on .ill-sty .s1{animation-name:st1}.hs.on .ill-sty .s2{animation-name:st2}.hs.on .ill-sty .s3{animation-name:st3}.hs.on .ill-sty .s4{animation-name:st4}
.hs.on .ill-sty .names span{animation-duration:4.6s;animation-fill-mode:both}
.hs.on .ill-sty .names span:nth-child(1){animation-name:nm1}
.hs.on .ill-sty .names span:nth-child(2){animation-name:nm2}
.hs.on .ill-sty .names span:nth-child(3){animation-name:nm3}
.hs.on .ill-sty .names span:nth-child(4){animation-name:nm4}
@keyframes st1{0%,19%{transform:scale(1.16);opacity:1;box-shadow:0 12px 20px -10px rgba(14,14,14,.55)}27%,92%{transform:none;opacity:.5;box-shadow:none}100%{transform:scale(1.16);opacity:1;box-shadow:0 12px 20px -10px rgba(14,14,14,.55)}}
@keyframes st2{0%,19%{transform:none;opacity:.5;box-shadow:none}27%,44%{transform:scale(1.16);opacity:1;box-shadow:0 12px 20px -10px rgba(14,14,14,.55)}52%,100%{transform:none;opacity:.5;box-shadow:none}}
@keyframes st3{0%,44%{transform:none;opacity:.5;box-shadow:none}52%,69%{transform:scale(1.16);opacity:1;box-shadow:0 12px 20px -10px rgba(14,14,14,.55)}77%,100%{transform:none;opacity:.5;box-shadow:none}}
@keyframes st4{0%,69%{transform:none;opacity:.5;box-shadow:none}77%,92%{transform:scale(1.16);opacity:1;box-shadow:0 12px 20px -10px rgba(14,14,14,.55)}100%{transform:none;opacity:.5;box-shadow:none}}
@keyframes nm1{0%,20%{opacity:1}24%,96%{opacity:0}100%{opacity:1}}
@keyframes nm2{0%,22%{opacity:0}26%,45%{opacity:1}49%,100%{opacity:0}}
@keyframes nm3{0%,47%{opacity:0}51%,70%{opacity:1}74%,100%{opacity:0}}
@keyframes nm4{0%,72%{opacity:0}76%,93%{opacity:1}97%,100%{opacity:0}}

/* step 3: Atlas Intelligence's auto edit: the silences close up, then captions, text and b-roll land on the timeline */
.ill-ed .ai{position:absolute;left:10px;right:10px;top:10px;height:30px;border-radius:8px;background:#F7F4FF;border:1px solid rgba(136,88,248,.18);display:flex;align-items:center;gap:7px;padding:0 9px}
.ill-ed .spark{width:13px;height:13px;fill:var(--p);stroke:none;flex:none}
.ill-ed .msgs{position:relative;flex:1;height:14px}
.ill-ed .msgs em{position:absolute;left:0;top:0;font-style:normal;font-size:10.5px;font-weight:500;line-height:14px;color:#4b2cb0;white-space:nowrap;opacity:0}
.ill-ed .msgs .m4{opacity:1}
.ill-ed .tick{width:16px;height:16px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center;flex:none}
.ill-ed .tick svg{width:10px;height:10px;stroke-width:3}
.ill-ed .etl{position:absolute;left:10px;right:10px;top:50px;bottom:10px;border-radius:8px;border:1px solid rgba(14,14,14,.08);background:#FCFCFB;padding:9px 8px 9px 0;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.ill-ed .erow{display:flex;align-items:center;height:20px}
.ill-ed .erow.main{height:30px}
.ill-ed .erow u{width:46px;flex:none;padding-left:8px;text-decoration:none;font-size:9px;color:var(--mute)}
.ill-ed .etrk{flex:1;height:100%;display:flex;align-items:center;border-radius:5px;background:rgba(14,14,14,.035)}
.ill-ed .caps{gap:4px;padding-left:4px}
.ill-ed .caps b{width:17px;height:9px;border-radius:3px;background:#fff;border:1px solid rgba(14,14,14,.2)}
.ill-ed .txt b{margin-left:18px;width:58px;height:12px;border-radius:4px;background:var(--ink)}
.ill-ed .ovl b{margin-left:70px;width:46px;height:14px;border-radius:4px;background:linear-gradient(135deg,#b9a2ff,#7a4cf5)}
.ill-ed .clips{padding-left:2px}
.ill-ed .clips b{flex:none;height:26px;margin-right:2px;border-radius:5px;border:1px solid rgba(14,14,14,.12);background:repeating-linear-gradient(90deg,#d3ccbf 0 11px,#c1b9aa 11px 12px)}
.ill-ed .clips b:nth-of-type(1){width:42px}.ill-ed .clips b:nth-of-type(2){width:30px}.ill-ed .clips b:nth-of-type(3){width:38px}.ill-ed .clips b:nth-of-type(4){width:28px}
.ill-ed .clips s{flex:none;width:0;height:26px;margin-right:0;border-radius:4px;background:repeating-linear-gradient(135deg,rgba(229,72,77,.6) 0 3px,rgba(229,72,77,.18) 3px 6px)}
.ill-ed .phd{position:absolute;top:5px;bottom:5px;left:calc(46px + 40%);width:2px;border-radius:1px;background:var(--p)}
.hs.on .ill-ed .clips s{animation:cutGap 4.6s var(--ease) both}
.hs.on .ill-ed .caps b{animation:popIn 4.6s var(--ease) both}
.hs.on .ill-ed .caps b:nth-child(2){animation-delay:.08s}.hs.on .ill-ed .caps b:nth-child(3){animation-delay:.16s}
.hs.on .ill-ed .caps b:nth-child(4){animation-delay:.24s}.hs.on .ill-ed .caps b:nth-child(5){animation-delay:.32s}
.hs.on .ill-ed .txt b{animation:slideIn 4.6s var(--ease) both}
.hs.on .ill-ed .ovl b{animation:slideIn 4.6s var(--ease) .3s both}
.hs.on .ill-ed .phd{animation:phd 4.6s linear both}
.hs.on .ill-ed .spark{animation:spk 4.6s linear both}
.hs.on .ill-ed .tick{animation:okPop 4.6s both}
.hs.on .ill-ed .msgs em{animation-duration:4.6s;animation-fill-mode:both}
.hs.on .ill-ed .m1{animation-name:ms1}.hs.on .ill-ed .m2{animation-name:ms2}.hs.on .ill-ed .m3{animation-name:ms3}.hs.on .ill-ed .m4{animation-name:ms4}
@keyframes cutGap{0%,28%{width:18px;margin-right:2px}50%,100%{width:0;margin-right:0}}
@keyframes popIn{0%,54%{transform:scale(0);opacity:0}64%,100%{transform:none;opacity:1}}
@keyframes slideIn{0%,58%{opacity:0;transform:translateX(-12px)}68%,100%{opacity:1;transform:none}}
@keyframes phd{from{left:46px}to{left:calc(100% - 10px)}}
@keyframes spk{0%{transform:rotate(0)}76%,100%{transform:rotate(360deg)}}
@keyframes ms1{0%,22%{opacity:1}25%,100%{opacity:0}}
@keyframes ms2{0%,24%{opacity:0}27%,48%{opacity:1}51%,100%{opacity:0}}
@keyframes ms3{0%,50%{opacity:0}53%,74%{opacity:1}77%,100%{opacity:0}}
@keyframes ms4{0%,76%{opacity:0}79%,100%{opacity:1}}

/* step 4: the finished reel plays, a change is asked for, Export makes the MP4 */
.ill-ex{display:flex;align-items:center;justify-content:center;gap:16px}
.ill-ex .phone{flex:none;width:104px;height:184px;border-radius:16px;background:#000;overflow:hidden;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(14,14,14,.1),0 22px 34px -18px rgba(14,14,14,.55)}
.ill-ex .phone video{width:100%;height:100%;object-fit:cover}
.ill-ex .side{display:flex;flex-direction:column;gap:10px;width:118px}
.ill-ex .bub{align-self:flex-start;font-size:10.5px;line-height:1.3;padding:7px 9px;border-radius:10px 10px 10px 3px;background:#fff;border:1px solid rgba(14,14,14,.1);box-shadow:0 8px 16px -10px rgba(14,14,14,.3)}
.ill-ex .exb{align-self:flex-start;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#5b2fd6;background:var(--psoft);border:1px solid rgba(136,88,248,.25);padding:7px 12px;border-radius:99px}
.ill-ex .exb svg{width:13px;height:13px}
.ill-ex .mp4{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;background:#fff;border:1px solid rgba(14,14,14,.12);border-radius:9px;padding:7px 8px;box-shadow:0 8px 16px -10px rgba(14,14,14,.3)}
.ill-ex .mp4>svg{width:13px;height:13px;color:var(--p);flex:none}
.ill-ex .mp4 span:not(.ok){flex:1}
.ill-ex .mp4 .ok{width:15px;height:15px}
.ill-ex .mp4 .ok svg{width:9px;height:9px}
.hs.on .ill-ex .bub{animation:bubIn 4.6s var(--ease) both}
.hs.on .ill-ex .exb{animation:exPress 4.6s var(--ease) both}
.hs.on .ill-ex .mp4{animation:mp4In 4.6s var(--ease) both}
.hs.on .ill-ex .mp4 .ok{animation:okPop 4.6s both}
@keyframes bubIn{0%,6%{opacity:0;transform:translateY(10px) scale(.9)}18%,100%{opacity:1;transform:none}}
@keyframes exPress{0%,28%{opacity:0;transform:translateY(8px)}36%{opacity:1;transform:none}44%{transform:scale(.88);background:#ddd1ff}52%,100%{opacity:1;transform:none}}
@keyframes mp4In{0%,52%{opacity:0;transform:translateY(10px)}62%,100%{opacity:1;transform:none}}

/* the active step keeps playing for as long as it stays active (pointing at it holds it) */
.hs.on .ill *{animation-iteration-count:infinite!important}
@media (prefers-reduced-motion:reduce){.hs.on .ill *{animation:none!important}}
@media (max-width:1100px){
  .hiw-grid{grid-template-columns:repeat(2,1fr)}
  .hs:nth-child(3){border-left:0}
  .hs:nth-child(n+3){margin-top:30px}
}
@media (max-width:640px){
  .hiw{padding:72px 0 80px}
  .hiw-panel{border-radius:24px;padding-top:52px}
  .hiw-grid{grid-template-columns:1fr;margin-top:44px}
  .hs{border-left:0;padding:0 18px 26px}
  .hs+.hs{margin-top:22px}
  .hs p{min-height:0}
}

/* features menu (2026-10-21, Etele: real images, not colour blocks). Every card shows real Atlas work, set here so the
   same menu on all pages picks it up: three hook versions of the Croatia vlog (trial reels), a reel playing (videos,
   animated WebP), carousel covers and story frames from the examples, and checks Atlas Intelligence really runs. */
.fvis i{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.fv-trial i{width:62px;height:110px;bottom:-16px;border-radius:9px;box-shadow:0 10px 18px -10px rgba(14,14,14,.55)}
.fv-trial i::before{content:none}
.fv-trial i::after{top:7px;left:50%;right:auto;transform:translateX(-50%);padding:2px 7px;border-radius:99px;background:rgba(14,14,14,.75);font-size:9px;line-height:1.4;white-space:nowrap}
.fv-trial i:nth-child(1){left:calc(50% - 98px);background:#111 url(/assets/menu/trial1.jpg)}
.fv-trial i:nth-child(2){left:calc(50% - 31px);background:#111 url(/assets/menu/trial2.jpg)}
.fv-trial i:nth-child(3){left:calc(50% + 36px);background:#111 url(/assets/menu/trial3.jpg)}
.fv-video i:nth-child(1){left:calc(50% - 32px);top:10px;width:64px;height:114px;background:#111 url(/assets/menu/video.webp)}
.fv-video i:nth-child(1)::before,.fv-video i:nth-child(1)::after{content:none}
.fv-carousel i{width:84px;height:105px;border:1px solid rgba(14,14,14,.1)}
.fv-carousel i::before,.fv-carousel i::after{content:none}
.fv-carousel i:nth-child(1){background:#111 url(/assets/menu/carousel4.jpg)}
.fv-carousel i:nth-child(2){background:#111 url(/assets/menu/carousel1.jpg)}
.fv-carousel i:nth-child(3){background:#111 url(/assets/menu/carousel6.jpg)}
.fv-story i{width:58px;height:104px}
.fv-story i::after{content:none}
.fv-story i::before{z-index:1}
.fv-story i:nth-child(1){background:#111 url(/assets/menu/story1.jpg)}
.fv-story i:nth-child(2){background:#111 url(/assets/menu/story4.jpg)}
.fv-story i:nth-child(3){background:#111 url(/assets/menu/story6.jpg)}
.fv-intel i::before{top:8px;width:14px;height:14px;background:#8858F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat}
.fv-intel i::after{content:"call to action kept";top:7px;left:31px;right:8px;width:auto;height:auto;background:none;border-radius:0;font-size:11px;font-weight:500;line-height:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-intel i:nth-child(2)::after{content:"header off the face";width:auto}
.fv-intel i:nth-child(3)::after{content:"no line said twice";width:auto}
.fvis i::after{font-style:normal}
.fv-video i:nth-child(1){z-index:3}
.fv-video i:nth-child(2){z-index:1}

/* ===== 2026-10-24 (Etele): new hero title, "how atlas edits your videos", posting and ideation in the features menu ===== */
/* hero title, after his reference: plain black and a step bolder, "#1 AI" bold, "Your Brand" bold italic with a line
   under it. No purple or grey in the title or in the line under it. */
.hero h1{font-weight:600;color:var(--ink)}
.hero h1 b{font-weight:700}
.hero h1 em{font-style:italic;font-weight:700;padding:0 .06em .08em 0;background:linear-gradient(var(--ink),var(--ink)) 0 100%/calc(100% - .06em) .06em no-repeat}
.hero .lead{color:var(--ink)}

/* features menu with seven cards: the four things Atlas makes on the first row, atlas intelligence, posting and
   ideation (a little wider) on the second */
.ddm.mega{grid-template-columns:repeat(12,1fr)}
.ddm.mega .fcard{grid-column:span 3;min-height:0}
.ddm.mega .fcard:nth-child(n+5){grid-column:span 4}
@media (max-width:1250px){.ddm.mega{grid-template-columns:repeat(12,1fr)}}
@media (max-width:1100px){.ddm.mega{grid-template-columns:repeat(12,1fr)}}
@media (max-height:760px){.ddm.mega{max-height:calc(100svh - 96px);overflow-y:auto;overscroll-behavior:contain}}
/* row two of the menu (atlas intelligence, posting, ideation) gets taller drawings */
.ddm.mega .fcard:nth-child(n+5) .fvis{height:172px}
/* posting (2026-10-24, drawn from the app's "Upload a video" screen): the upload box in the middle and the connected
   accounts on a dashed ring around it, each with its platform; the dashed lines run outward while the menu is open */
.fv-post{background:#fff}
.fv-post .pa-ln{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fv-post .pa-ln *{fill:none;stroke:rgba(14,14,14,.2);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.fv-post .pa-ln ellipse{stroke:rgba(14,14,14,.15)}
.fv-post .pa-ring{position:absolute;left:50%;top:46%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:1px solid rgba(14,14,14,.06);background:rgba(255,255,255,.75)}
.fv-post .pa-up{position:absolute;left:50%;top:46%;width:40px;height:40px;margin:-25px 0 0 -20px;border-radius:10px;border:1.5px dashed rgba(14,14,14,.22);background:#fff;display:grid;place-items:center;color:var(--ink)}
.fv-post .pa-up svg{width:16px;height:16px}
.fv-post .pa-cap{position:absolute;left:50%;top:calc(46% + 21px);transform:translateX(-50%);font-size:10px;font-weight:500;line-height:1;color:var(--ink);white-space:nowrap}
.fv-post .pa-n{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;display:grid;place-items:center;background:#F7F6F4;border:1.5px solid #F2C9A6}
.fv-post .pa-ph{border:0;background:#222}
.fv-post .pa-n img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.fv-post .pa-n img.pa-atl{padding:5px;background:#0E0E0E}
.fv-post .pa-l{font-size:12px;font-weight:600;line-height:1;color:#BDB8B2}
.fv-post .pa-add{border:1.5px dashed rgba(14,14,14,.25);background:#fff;color:var(--mute)}
.fv-post .pa-add svg{width:12px;height:12px}
.fv-post .pa-b{position:absolute;right:-5px;bottom:-4px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(14,14,14,.1);display:grid;place-items:center;color:var(--ink)}
.fv-post .pa-b svg{width:8px;height:8px}
.dd:hover .fv-post .pa-ln path,.dd.open .fv-post .pa-ln path{animation:paFlow 1.2s linear infinite}
@keyframes paFlow{to{stroke-dashoffset:-14}}
/* ideation (2026-10-24, drawn from the app's Board): the pipeline columns in their own colours with real cards, and the
   agent's note about the two ideas it just added */
.fv-idea{background:#fff}
.fv-idea .pb-bd{position:absolute;left:10px;top:10px;bottom:0;display:flex;gap:6px}
.fv-idea .pb-col{flex:none;width:104px;padding:6px 5px 0;border-radius:10px 10px 0 0;background:var(--cb);display:flex;flex-direction:column;gap:5px}
.fv-idea .pb-idea{--cb:#F3F0E6;--cp:#E0D8B6;--ct:#6E5F2E}
.fv-idea .pb-script{--cb:#E9F2FF;--cp:#C2DEFF;--ct:#2C62B0}
.fv-idea .pb-review{--cb:#FDF8E1;--cp:#F9E9B3;--ct:#80620F}
.fv-idea .pb-record{--cb:#FDEBEA;--cp:#FDC9C8;--ct:#A8392F}
.fv-idea .pb-edit{--cb:#F4EFFE;--cp:#E2D6FF;--ct:#5B3DC0}
.fv-idea .pb-h{display:flex;align-items:center;gap:4px;padding:0 2px 1px;font-size:8px;line-height:1}
.fv-idea .pb-p{padding:3px 5px;border-radius:4px;background:var(--cp);color:var(--ct);font-weight:600;font-size:8.5px;white-space:nowrap}
.fv-idea .pb-c{margin-left:auto;color:var(--mute)}
.fv-idea .pb-plus{color:var(--mute);font-size:10px}
.fv-idea .pb-cd{display:block;padding:6px 6px 5px;border-radius:7px;background:#fff;border:1px solid #F1F1EF;box-shadow:0 1px 2px rgba(14,14,14,.04)}
.fv-idea .pb-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:8.5px;line-height:1.3;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.fv-idea .pb-m{display:flex;align-items:center;gap:4px;margin-top:5px;color:var(--ink2)}
.fv-idea .pb-f{font-size:7px;line-height:1;padding:2px 4px;border-radius:4px;background:#F6F6F6;color:var(--ink2)}
.fv-idea .pb-m svg{width:8px;height:8px}
.fv-idea .pb-new{border-color:rgba(136,88,248,.45);box-shadow:0 6px 14px -8px rgba(136,88,248,.7)}
.fv-idea .pb-ag{position:absolute;left:14px;bottom:5px;z-index:2;display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:3px 10px 10px 10px;background:#fff;border:1px solid var(--line2);box-shadow:0 10px 20px -12px rgba(14,14,14,.45);font-size:9.5px;font-weight:500;line-height:1.2;color:var(--ink);white-space:nowrap}
.fv-idea .pb-ag svg{width:10px;height:10px;fill:#8858F8;flex:none}
.dd:hover .fv-idea .pb-new,.dd.open .fv-idea .pb-new{animation:pbIn .7s var(--ease) both}
.dd:hover .fv-idea .pb-new+.pb-new,.dd.open .fv-idea .pb-new+.pb-new{animation-delay:.12s}
.dd:hover .fv-idea .pb-ag,.dd.open .fv-idea .pb-ag{animation:pbAg .6s var(--ease) .35s both}
@keyframes pbIn{from{opacity:0;transform:translateY(-8px) scale(.96)}}
@keyframes pbAg{from{opacity:0;transform:translateY(8px)}}
/* atlas intelligence (2026-10-24, from Etele's reference): a wavy sphere of dots, black at the top shading into purple
   and pink at the bottom, drawn by assets/fvis.js while the menu is open */
.fv-orb canvas{position:absolute;inset:0;width:100%;height:100%}
/* every drawing in the features menu sits on the same plain white box (Etele, 2026-10-24: like posting and ideation) */
.ddm.mega .fvis{background:#fff}

/* step 4, "export and distribute": Export makes the MP4, then the same video goes out to the accounts. The chat
   bubble ("make the captions bigger") is gone with the old "change it, then export" step. */
.ill-ex .pst{background:#fff;border:1px solid rgba(14,14,14,.12);border-radius:10px;padding:8px 8px 9px;box-shadow:0 8px 16px -10px rgba(14,14,14,.3)}
.ill-ex .pst>span{display:block;font-size:10px;font-weight:500;line-height:1;color:var(--mute);margin-bottom:8px}
.ill-ex .pa{display:flex;gap:8px}
.ill-ex .pa b{position:relative;width:26px;height:26px;border-radius:8px;background:var(--bg);border:1px solid rgba(14,14,14,.1);display:grid;place-items:center;color:var(--ink)}
.ill-ex .pa b>svg{width:14px;height:14px;stroke-width:1.9}
.ill-ex .pa .ok{position:absolute;right:-5px;top:-5px;width:13px;height:13px;box-shadow:0 0 0 2px #fff}
.ill-ex .pa .ok svg{width:8px;height:8px}
.hs.on .ill-ex .exb{animation:ex4Btn 4.6s var(--ease) both}
.hs.on .ill-ex .mp4{animation:ex4In 4.6s var(--ease) both}
.hs.on .ill-ex .mp4 .ok{animation:ex4Ok 4.6s both}
.hs.on .ill-ex .pst{animation:ex4Pst 4.6s var(--ease) both}
.hs.on .ill-ex .pa .ok{animation:ex4Tick 4.6s both}
.hs.on .ill-ex .pa b:nth-child(2) .ok{animation-delay:.15s}
.hs.on .ill-ex .pa b:nth-child(3) .ok{animation-delay:.3s}
@keyframes ex4Btn{0%,4%{opacity:0;transform:translateY(8px)}12%{opacity:1;transform:none}20%{transform:scale(.88);background:#ddd1ff}28%,100%{opacity:1;transform:none}}
@keyframes ex4In{0%,26%{opacity:0;transform:translateY(10px)}36%,100%{opacity:1;transform:none}}
@keyframes ex4Ok{0%,36%{transform:scale(0)}42%{transform:scale(1.18)}46%,100%{transform:scale(1)}}
@keyframes ex4Pst{0%,48%{opacity:0;transform:translateY(10px)}58%,100%{opacity:1;transform:none}}
@keyframes ex4Tick{0%,62%{transform:scale(0)}68%{transform:scale(1.18)}72%,100%{transform:scale(1)}}

/* ===== ideation section (2026-10-24, Etele): between the Telegram group and the FAQ. Five points on the left, the
   matching Atlas screen on the right, drawn in HTML from the real app. site.js "ideation" moves the active point. ===== */
.ide{padding:20px 0 120px;scroll-margin-top:80px}
.ide-panel{display:grid;grid-template-columns:.82fr 1.18fr;gap:20px;padding:20px;border-radius:32px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 90px -60px rgba(14,14,14,.3)}
.ide-list{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:10px 4px 10px 10px}
.ide-it{position:relative;display:block;width:100%;text-align:left;padding:16px 18px 18px;border-radius:18px;color:inherit;transition:background .4s var(--ease)}
.ide-it:hover{background:#FCFCFB}
.ide-it.on{background:#F8F8F6}
.ide-t{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--mute);transition:color .3s}
.ide-it.on .ide-t,.ide-it:hover .ide-t{color:var(--ink)}
.ide-ic{width:36px;height:36px;flex:none;border-radius:11px;border:1px solid var(--line2);background:#fff;display:grid;place-items:center;color:var(--mute);transition:color .3s,border-color .3s}
.ide-ic svg{width:18px;height:18px}
.ide-it.on .ide-ic{color:var(--ink);border-color:rgba(14,14,14,.25)}
.ide-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.ide-d>span{overflow:hidden;padding-left:48px;font-size:15px;line-height:1.5;color:var(--ink2)}
.ide-it.on .ide-d{grid-template-rows:1fr}
.ide-it.on .ide-d>span{padding-top:8px}
.ide-bar{position:absolute;left:66px;right:18px;bottom:9px;height:2px;border-radius:2px;background:var(--line);opacity:0;transition:opacity .3s}
.ide-bar i{display:block;width:0;height:100%;border-radius:2px;background:var(--ink)}
.ide.run .ide-it.on .ide-bar{opacity:1}
.ide.run .ide-it.on .ide-bar i{animation:ideBar 5.2s linear both}
@keyframes ideBar{to{width:100%}}
.ide-stage{position:relative;min-height:470px;border-radius:22px;background:var(--bg);overflow:hidden}
.ide-win{position:absolute;inset:26px;border-radius:16px;background:#fff;border:1px solid rgba(14,14,14,.08);box-shadow:0 26px 50px -28px rgba(14,14,14,.35);overflow:hidden}
.ide-wbar{height:34px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid rgba(14,14,14,.06)}
.ide-wbar i{width:8px;height:8px;border-radius:50%;background:rgba(14,14,14,.12)}
.ide-lab{margin-left:8px;font-size:12px;font-weight:500;color:var(--mute)}
.ide-v{position:absolute;left:0;right:0;top:34px;bottom:0;padding:16px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s var(--ease),transform .55s var(--ease),visibility .45s}
.ide-v.on{opacity:1;visibility:visible;transform:none}
.ide-v svg{flex:none}
/* small shared pieces: a purple tick in a circle */
.ibr-ok i,.ic-done i,.is-ok i,.ih-ok i{width:15px;height:15px;flex:none;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center}
.ibr-ok i svg,.ic-done i svg,.is-ok i svg,.ih-ok i svg{width:9px;height:9px}
/* 1. board, as in the app */
.ib-bar{display:flex;align-items:center;gap:4px;margin-bottom:12px;font-size:11px;font-weight:500;color:var(--mute);white-space:nowrap}
.ib-tab{padding:5px 9px;border-radius:7px}
.ib-tab.on{background:#F3F3F1;color:var(--ink)}
.ib-fl{display:flex;gap:2px;margin-left:auto;padding:3px;border-radius:8px;border:1px solid var(--line)}
.ib-fl i{font-style:normal;padding:2px 7px;border-radius:5px}
.ib-fl i.on{background:#F3F3F1;color:var(--ink)}
.ib-new{padding:5px 11px;border-radius:99px;color:#fff;background:linear-gradient(135deg,#9C7BFF,#7448F0);box-shadow:0 4px 12px -4px rgba(136,88,248,.7)}
.ib-cols{display:flex;gap:8px;height:calc(100% - 38px);mask-image:linear-gradient(90deg,#000 82%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent)}
.ib-col{flex:none;width:156px;padding:8px 7px 0;border-radius:12px 12px 0 0;background:var(--cb);display:flex;flex-direction:column;gap:7px}
.ib-idea{--cb:#F3F0E6;--cp:#E0D8B6;--ct:#6E5F2E}.ib-script{--cb:#E9F2FF;--cp:#C2DEFF;--ct:#2C62B0}.ib-review{--cb:#FDF8E1;--cp:#F9E9B3;--ct:#80620F}
.ib-record{--cb:#FDEBEA;--cp:#FDC9C8;--ct:#A8392F}.ib-edit{--cb:#F4EFFE;--cp:#E2D6FF;--ct:#5B3DC0}
.ib-h{display:flex;align-items:center;gap:6px;padding:0 2px;font-size:10.5px;line-height:1}
.ib-h span{padding:4px 7px;border-radius:5px;background:var(--cp);color:var(--ct);font-weight:600;white-space:nowrap}
.ib-h em{margin-left:auto;font-style:normal;color:var(--mute)}
.ib-h b{font-weight:400;color:var(--mute)}
.ib-cd{padding:8px 9px 7px;border-radius:9px;background:#fff;border:1px solid #F1F1EF;box-shadow:0 1px 2px rgba(14,14,14,.04)}
.ib-cd p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.ib-m{display:flex;align-items:center;gap:6px;margin-top:7px;color:var(--ink2)}
.ib-m span{font-size:9px;line-height:1;padding:3px 6px;border-radius:5px;background:#F6F6F6}
.ib-m svg{width:10px;height:10px}
/* 2. brand profile */
.ide-brand{display:flex;flex-direction:column;gap:14px;padding:20px}
.ibr-top{display:flex;align-items:center;gap:12px}
.ibr-av{width:44px;height:44px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.ibr-av img{width:26px;height:26px}
.ibr-nm{display:flex;flex-direction:column;line-height:1.25}
.ibr-nm b{font-size:15px;font-weight:600}
.ibr-nm small{font-size:12px;color:var(--mute)}
.ibr-ok{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--ink2);padding:6px 10px;border-radius:99px;background:#F8F8F6;border:1px solid var(--line)}
.ibr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ibr-f{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff}
.ibr-f u{display:block;text-decoration:none;font-size:11px;font-weight:500;color:var(--mute);margin-bottom:5px}
.ibr-f p{font-size:13.5px;line-height:1.4;font-weight:500;color:var(--ink)}
.ibr-w{grid-column:1/-1}
.ibr-chips{display:flex;flex-wrap:wrap;gap:6px}
.ibr-chips span{font-size:12px;padding:5px 10px;border-radius:99px;background:#F3F3F1}
/* 3. the agent */
.ide-chat{display:flex;flex-direction:column;padding:18px}
.ic-feed{flex:1;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.ic-me{align-self:flex-end;max-width:78%;padding:9px 13px;border-radius:16px 16px 4px 16px;background:var(--ink);color:#fff;font-size:13px;line-height:1.4}
.ic-ai{display:flex;gap:10px;align-items:flex-start}
.ic-av{width:28px;height:28px;flex:none;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.ic-av img{width:16px;height:16px}
.ic-body{flex:1;min-width:0}
.ic-body>p{font-size:13px;line-height:1.45;color:var(--ink);margin-bottom:9px}
.ic-ideas{display:flex;flex-direction:column;gap:6px}
.ic-ideas div{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:#fff}
.ic-ideas b{flex:1;min-width:0;font-size:12.5px;font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic-ideas span{flex:none;font-size:10px;padding:3px 7px;border-radius:5px;background:var(--cb,#F3F0E6);color:#6E5F2E}
.ic-done{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;font-weight:500;color:var(--ink2)}
.ic-in{display:flex;align-items:center;gap:10px;margin-top:12px;padding:6px 6px 6px 14px;border-radius:14px;border:1px solid var(--line2);font-size:13px;color:var(--mute)}
.ic-in span{flex:1}
.ic-in i{width:28px;height:28px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center}
.ic-in i svg{width:14px;height:14px}
.ide-chat.on .ic-me{animation:icIn .5s var(--ease) .1s both}
.ide-chat.on .ic-ai{animation:icIn .5s var(--ease) .5s both}
.ide-chat.on .ic-ideas div{animation:icIn .45s var(--ease) both}
.ide-chat.on .ic-ideas div:nth-child(1){animation-delay:.8s}.ide-chat.on .ic-ideas div:nth-child(2){animation-delay:.95s}.ide-chat.on .ic-ideas div:nth-child(3){animation-delay:1.1s}
@keyframes icIn{from{opacity:0;transform:translateY(8px)}}
/* 4. a script */
.ide-script{display:flex;flex-direction:column;padding:20px 22px}
.is-top{display:flex;align-items:center;gap:7px;color:var(--ink2)}
.is-top svg{width:13px;height:13px}
.is-st{font-size:11px;font-weight:600;padding:4px 8px;border-radius:5px;background:#C2DEFF;color:#2C62B0}
.is-fm{font-size:11px;padding:4px 8px;border-radius:5px;background:#F6F6F6;margin-right:3px}
.is-ttl{display:block;margin-top:12px;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.is-tabs{display:flex;gap:16px;margin-top:14px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--mute)}
.is-tabs span{padding-bottom:8px;margin-bottom:-1px}
.is-tabs span.on{color:var(--ink);border-bottom:2px solid var(--ink)}
.is-doc{flex:1;padding-top:14px;display:flex;flex-direction:column;gap:8px}
.is-doc p{font-size:14px;line-height:1.5;color:var(--ink)}
.is-ok{align-self:flex-start;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--ink2);padding:6px 10px;border-radius:99px;background:#F8F8F6;border:1px solid var(--line)}
.ide-script.on .is-doc p{animation:icIn .45s var(--ease) both}
.ide-script.on .is-doc p:nth-child(2){animation-delay:.12s}.ide-script.on .is-doc p:nth-child(3){animation-delay:.24s}.ide-script.on .is-doc p:nth-child(4){animation-delay:.36s}.ide-script.on .is-doc p:nth-child(5){animation-delay:.48s}
/* 5. hook versions */
.ide-hooks{display:flex;flex-direction:column;gap:9px;padding:20px 22px}
.ih-top{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.ih-top b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.ih-top span{font-size:12px;color:var(--mute)}
.ih-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:#fff}
.ih-k{width:26px;height:26px;flex:none;border-radius:8px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center}
.ih-row p{flex:1;font-size:13.5px;font-weight:500;line-height:1.35}
.ih-tag{flex:none;font-size:10.5px;font-weight:500;padding:4px 8px;border-radius:99px;background:var(--psoft);color:#5b2fd6}
.ih-ok{align-self:flex-start;display:flex;align-items:center;gap:7px;margin-top:auto;font-size:11.5px;font-weight:500;color:var(--ink2);padding:6px 10px;border-radius:99px;background:#F8F8F6;border:1px solid var(--line)}
.ide-hooks.on .ih-row{animation:icIn .45s var(--ease) both}
.ide-hooks.on .ih-row:nth-of-type(2){animation-delay:.1s}.ide-hooks.on .ih-row:nth-of-type(3){animation-delay:.2s}.ide-hooks.on .ih-row:nth-of-type(4){animation-delay:.3s}.ide-hooks.on .ih-row:nth-of-type(5){animation-delay:.4s}
@media (prefers-reduced-motion:reduce){.ide-v,.ide-v *{animation:none!important;transition:none!important}}
@media (max-width:900px){
  .ide{padding:10px 0 80px}
  .ide-panel{grid-template-columns:1fr;padding:12px;border-radius:24px;gap:12px}
  .ide-list{padding:4px}
  .ide-it{padding:13px 14px 15px}
  .ide-t{font-size:16px}
  .ide-ic{width:32px;height:32px}
  .ide-d>span{padding-left:44px;font-size:14px}
  .ide-bar{left:58px}
  .ide-stage{min-height:530px}
  .ide-win{inset:14px}
  .ide-brand{padding:16px;gap:12px}
  .ibr-grid{gap:8px}
  .ibr-f{padding:10px 11px}
  .ibr-f p{font-size:12px}
  .ibr-chips span{font-size:11px;padding:4px 8px}
  .ibr-ok{display:none}
  .ide-script{padding:16px}
  .is-ttl{font-size:15px}
  .is-doc{gap:6px;padding-top:12px}
  .is-doc p{font-size:13px;line-height:1.45}
  .ide-hooks{padding:16px}
  .ih-row p{font-size:12.5px}
  .ih-tag{display:none}
}

/* ===== every page and section title is set like the homepage header (Etele, 2026-10-24): Title Case in the markup
   (tools/pages.py tc() for the generated pages), one colour, a step bolder. A second half that used to be grey keeps the
   title's own colour, and an accent is bold italic with a line under it instead of the purple serif. Page titles at the
   top of affiliates, agencies and the other subpages use the header's size. ===== */
h1,h2{font-weight:600}
h1 .g,h2 .g,.dark h1 .g,.dark h2 .g{color:inherit}
h1 b,h2 b{font-weight:700}
h1 em,h2 em,h1 em.s,h2 em.s{font-family:inherit;font-style:italic;font-weight:700;letter-spacing:inherit;color:inherit;padding:0 .06em .08em 0;background:linear-gradient(currentColor,currentColor) 0 100%/calc(100% - .06em) .06em no-repeat}
.phero h1{font-size:clamp(36px,4.5vw,66px)}