/* v1 "Spotlight" — after Marshmallow (Ragged Edge): warm cream, huge ink type, ADDVO as the star who travels the page */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --cream:#fffdf9; --sand:#f8f3e9; --peach:#fae2d3; --apricot:#ffb48d; --orange:#ee8050; --rust:#be461d; --deep:#9c3413;
  --ink:#202223; --muted:#756d62; --line:#eee8dc;
  --spring:cubic-bezier(.34,1.56,.64,1); --out:cubic-bezier(.22,1,.36,1);
  --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"Figtree",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:hidden}
/* body clips (not just the viewport): on phones the 3D canvas, 1.5x his box, poked past the right edge at right-hand docks and widened the page */
body{background:var(--cream);color:var(--ink);font:500 18px/1.55 var(--body);overflow-x:hidden;overflow-x:clip;position:relative}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.98}
.wrap{max-width:1180px;margin:0 auto;padding:120px 24px}
[data-scene]{--s:1}

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

/* nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;color:var(--cream);display:flex;align-items:center;gap:32px;padding:14px 28px;}
.logo{display:flex;align-items:center;gap:8px;font:800 24px var(--display);letter-spacing:-.03em;text-decoration:none}
.logo img{width:34px;transition:rotate .5s var(--spring)}
.logo:hover img{rotate:-14deg}
.nav nav{display:flex;gap:26px;margin-left:auto;font-weight:600}
.nav nav a{text-decoration:none;opacity:.75;background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 2px no-repeat;padding-bottom:2px;transition:opacity .2s,background-size .35s var(--out)}
.nav nav a:hover{opacity:1;background-size:100% 2px}

/* buttons: spring press, magnetic (JS), shine sweep */
.btn{position:relative;overflow:hidden;display:inline-block;background:var(--orange);color:#fff;font:700 18px var(--body);padding:18px 30px;border-radius:999px;text-decoration:none;box-shadow:0 5px 0 var(--rust);transition:transform .35s var(--spring),box-shadow .2s,translate .25s var(--out)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);translate:-110% 0;pointer-events:none}
.btn:hover::after{translate:110% 0;transition:translate .7s var(--out)}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 0 var(--rust),0 18px 34px -12px rgba(238,128,80,.65)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--rust)}
.btn.sm{padding:11px 20px;font-size:15px;box-shadow:0 3px 0 var(--rust)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}
.btn.ghost::after{background:linear-gradient(105deg,transparent 30%,rgba(255,180,141,.45) 50%,transparent 70%)}
.btn.ghost:hover{border-color:var(--apricot);box-shadow:0 7px 0 var(--peach)}
.stage .btn::after{animation:shine 5s 3.4s ease-in-out infinite}
@keyframes shine{0%,70%{translate:-110% 0}100%{translate:110% 0}}
.link{font-weight:700;text-decoration:none;border-bottom:2px solid var(--apricot);transition:border-color .2s}
.link:hover{border-color:var(--orange)}

/* cursor glow on dark/orange bands */
.glowy{position:relative;isolation:isolate}
.glowy::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .5s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,160,100,.2),transparent 65%)}
.glowy:hover::before{opacity:1}
.who.glowy::before{background:radial-gradient(460px circle at var(--gx,50%) var(--gy,50%),rgba(255,236,220,.32),transparent 65%)}

/* 1. spotlight stage */
.stage{position:relative;min-height:100vh;padding-top:90px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px 80px;background:radial-gradient(120% 90% at 50% 40%,#3a2219 0,#1d1210 70%);color:var(--cream);overflow:hidden;isolation:isolate}
.stage::after{content:"ADDVO";position:absolute;left:50%;bottom:-.18em;transform:translateX(-50%);font:800 clamp(120px,26vw,420px)/1 var(--display);letter-spacing:-.06em;color:rgba(255,180,141,.07);z-index:-2;white-space:nowrap}
.beam{position:absolute;inset:-10% 25% 30%;background:conic-gradient(from 180deg at 50% 0,transparent 160deg,rgba(255,214,180,.22) 170deg,rgba(255,214,180,.22) 190deg,transparent 200deg);filter:blur(18px);opacity:0;animation:light 1.1s .2s ease-out forwards;z-index:-1}
.pool{position:absolute;left:50%;top:44%;width:min(760px,120vw);aspect-ratio:2/1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,170,110,.55) 0,rgba(238,128,80,.18) 55%,transparent 100%);opacity:0;animation:light 1.1s .2s ease-out forwards;z-index:-1}
@keyframes light{to{opacity:1}}
.star{width:min(270px,58vw)}
.star img{animation:pop .9s .5s var(--spring) both,float 4.5s 1.4s ease-in-out infinite}
@keyframes pop{0%{transform:translateY(60px) scale(.3);opacity:0}100%{transform:none;opacity:1}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 10px rgba(255,118,38,.45)) drop-shadow(0 0 26px rgba(255,118,38,.2))}50%{filter:drop-shadow(0 0 18px rgba(255,128,48,.75)) drop-shadow(0 0 44px rgba(255,128,48,.34))}}
.hi{font:800 clamp(30px,4.4vw,52px)/1.05 var(--display);letter-spacing:-.03em;margin-top:8px}
.hi span{display:block;animation:rise .7s var(--spring) both}
.hi span:first-child{animation-delay:1.1s}
.hi span:last-child{animation-delay:1.45s;color:var(--apricot)}
.value{font-size:clamp(40px,5.6vw,80px);margin:22px 0 30px;animation:rise .8s 1.8s var(--spring) both}
.value em{font-style:normal;color:var(--orange);background:linear-gradient(100deg,var(--orange) 0 40%,#ffd2b6 50%,var(--orange) 60% 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sheen 7s 2.6s ease-in-out infinite}
@keyframes sheen{0%,60%{background-position:100% 0}100%{background-position:0 0}}
.stage .link{border-color:var(--orange)}
.stage .value{max-width:13ch;text-wrap:balance;font-size:clamp(46px,6.6vw,100px);line-height:.95;margin:22px 0 34px}
.cta-row{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:center;animation:rise .8s 2.1s var(--spring) both}
.trial-line{margin-top:18px;font-size:15px;color:#cdb9a9;animation:rise .8s 2.35s var(--spring) both}
@keyframes rise{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}

/* marquee */
/* edge fade is an overlay, not a CSS mask: iPhone Safari drew the masked, sliding track as a blank blurred strip (Kam 2026-10-20) */
.marquee{overflow:hidden;background:var(--ink);padding:30px 0}
.marquee::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--ink),transparent 7%,transparent 93%,var(--ink))}
.track{display:flex;gap:18px;width:max-content;animation:slide 60s linear infinite}
.track img{width:200px;height:200px;object-fit:cover;border-radius:18px;transition:scale .5s var(--spring),rotate .5s var(--spring),opacity .35s,box-shadow .4s}
.track:hover img{opacity:.5}
.track img:hover{opacity:1;scale:1.1;rotate:-2deg;box-shadow:0 0 0 3px var(--orange),0 18px 40px -10px rgba(238,128,80,.6)}
@keyframes slide{to{transform:translateX(-50%)}}

/* reveal + word-by-word headings */
[data-reveal]{opacity:0;transform:translateY(46px) scale(.97);transition:opacity .6s,transform .9s var(--spring)}
[data-reveal].in{opacity:1;transform:none}
.w{display:inline-block;opacity:0;filter:blur(6px);translate:0 .3em;transition:opacity .3s var(--out),filter .35s var(--out),translate .45s var(--spring);transition-delay:calc(var(--i) * 32ms + .04s)}
.in .w{opacity:1;filter:none;translate:none}

/* the slots ADDVO docks into, and his bubble */
.slot{position:relative;flex:none}
.slot>img{width:100%}
.say{position:absolute;bottom:64%;left:88%;width:max-content;max-width:220px;background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:18px 18px 18px 4px;padding:10px 14px;font:700 15px/1.3 var(--body);text-align:left;box-shadow:0 12px 28px -14px rgba(0,0,0,.3);z-index:16}
.slot[data-side=left] .say{left:auto;right:88%;border-radius:18px 18px 4px 18px}
.say b{display:block;color:var(--rust)}
.slot[data-bubble=top] .say,.slot[data-side=top] .say{left:0;right:0;bottom:96%;margin:auto;border-radius:18px}
.travel .slot>img{visibility:hidden}
.travel .say{opacity:0;scale:.6;translate:0 10px;transition:opacity .25s,scale .25s,translate .25s}
.travel .slot.here .say{opacity:1;scale:1;translate:none;transition:opacity .3s .1s,scale .55s .1s var(--spring),translate .55s .1s var(--spring)}
.say.again{animation:again .5s var(--spring)}
@keyframes again{40%{scale:1.12}}

/* the travelling ADDVO: rigid moves only (translate, rotate, uniform scale) */
#addvo{position:absolute;left:0;top:0;width:300px;z-index:15;pointer-events:none;opacity:0;will-change:transform}
#addvo.ready{opacity:1}
.pal{pointer-events:auto}
.pal img{width:100%;animation:float 4.5s ease-in-out infinite,glow 3.6s ease-in-out infinite;-webkit-user-drag:none;user-select:none}
.pal.intro{animation:pop .9s .5s var(--spring) both}
.pal.swap{animation:swap .5s var(--spring)}
.pal.hop{animation:hop .7s var(--spring)}
.pal.waving{animation:wave 2.4s ease-in-out infinite}
@keyframes swap{0%{transform:scale(.82) rotate(-6deg)}100%{transform:none}}
@keyframes hop{0%{transform:none}35%{transform:translateY(-30px) rotate(-8deg)}65%{transform:translateY(0) rotate(4deg)}100%{transform:none}}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(-10deg)}20%,40%{transform:rotate(10deg)}}
/* live 3D ADDVO (addvo3d.js): the canvas replaces the pose image; all motion comes from three.js, rigid only */
#addvo.three .pal{height:300px;position:relative;animation:none!important}
#addvo.three .pal img{display:none}
.pal canvas{position:absolute;left:50%;top:50%;width:150%!important;height:150%!important;translate:-50% -50%;pointer-events:none}

/* card tilt + spotlight (JS adds .tilt on mouse devices) */
.trio,.grid4,.plans{perspective:1100px}
.tilt{isolation:isolate;transform-style:flat}
.tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,180,141,.35),transparent 70%)}
.tilt:hover::before{opacity:1}
.tilt:hover{translate:0 -8px}

/* 2. problem */
.problem h2,.learning h2,.who h2,.pricing h2,.final h2{font-size:clamp(44px,7vw,96px);max-width:12ch}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.s-voice{width:220px;margin-right:6%}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.trio article{position:relative;background:var(--sand);border-radius:28px;padding:32px;transition:opacity .6s .1s,transform .9s .1s var(--spring),rotate .25s var(--out),translate .45s var(--spring)}
.trio article:nth-child(2){transition-delay:.2s,.2s,0s,0s}.trio article:nth-child(3){transition-delay:.3s,.3s,0s,0s}
.trio b{font:800 26px var(--display);letter-spacing:-.02em;display:block;margin-bottom:8px}
.trio p{color:var(--muted)}
.trio .btn{margin-top:20px}

/* 2b. the ad is the targeting: three customers, three ads; they deal in as he docks (--s) */
.target h2{font-size:clamp(44px,7vw,96px);max-width:12ch}
.s-target{width:220px;margin-right:6%}
.t-copy{margin-top:34px;max-width:46ch;display:grid;gap:12px}
.t-copy p{font-size:22px;color:var(--muted)}
.t-copy .me{color:var(--ink);font-weight:600}
.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.aud figure{--k:clamp(0,(var(--s) * 3.3 - var(--i)) * 1.6 - .2,1);margin:0;display:grid;gap:12px;align-content:start;opacity:var(--k);translate:0 calc((1 - var(--k)) * 40px)}
.aud.four{grid-template-columns:repeat(4,1fr);gap:18px}
.aud figure.base img{outline:3px solid var(--apricot);outline-offset:4px}
.aud figcaption b{display:block;font:800 22px/1.15 var(--display);letter-spacing:-.02em}
.aud figcaption span{color:var(--muted);font-size:16px;line-height:1.4}
.aud img{width:100%;height:auto;border-radius:18px;box-shadow:0 22px 44px -22px rgba(156,52,19,.5)}
.target cite{margin-top:14px}

/* 3. jobs */
.kicker{font:800 clamp(28px,3.4vw,40px) var(--display);color:var(--rust);letter-spacing:-.02em}
.job{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center;padding:90px 0;border-bottom:2px dashed var(--line)}
.job:last-child{border:0}
.job.flip>.visual{order:2}
.visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px}
.n{font:800 18px var(--display);color:var(--orange);background:var(--peach);padding:6px 14px;border-radius:999px}
.job h3{font-size:clamp(36px,4.6vw,62px);margin:18px 0 16px}
.job p{color:var(--muted);font-size:20px;max-width:34ch}
blockquote{font:600 22px/1.35 var(--display)}
cite{display:block;font:500 14px var(--body);color:var(--muted);margin-top:8px;font-style:normal}

/* 01 research: ADDVO scans the reviews, words get highlighted as he passes */
.job.scan{grid-template-columns:1fr}
.reviews{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:180px}
.s-scan{position:absolute;top:0;width:190px;left:calc(var(--s) * (100% - 190px))}
.rv{--k:clamp(0,(var(--s) * 5.5 - var(--i)) * 1.6 - .3,1);background:#fff;border:2px solid var(--line);border-radius:22px 22px 22px 4px;padding:44px 24px 22px;font-size:20px;transition:border-color .3s,box-shadow .3s}
.rv mark{color:inherit;background:linear-gradient(var(--apricot),var(--apricot)) 0 88%/calc(var(--k) * 100%) 42% no-repeat}
.reviews cite{grid-column:1/-1}
.rv .rvby{display:block;font:700 12px var(--body);letter-spacing:.02em;text-transform:uppercase;margin-bottom:8px}
.rv .rvby i{font-style:normal;letter-spacing:1px;margin-left:6px}
.rv.neg .rvby{color:var(--muted)}.rv.neg .rvby i{color:#c9bfb1}
.rv.pos{border-color:var(--apricot)}.rv.pos .rvby{color:var(--rust)}.rv.pos .rvby i{color:var(--orange)}

/* 02 angles: brief cards appear beside him as he writes */
.desk{gap:18px;justify-content:flex-start}
.s-ideas{width:220px}
.briefs{display:grid;gap:12px;flex:1;max-width:360px}
.brief{--k:clamp(0,(var(--s) * 3.3 - var(--i)) * 1.6 - .2,1);background:var(--peach);border-radius:20px;padding:16px 18px;display:grid;gap:4px;opacity:var(--k);translate:calc((1 - var(--k)) * -40px) 0;rotate:calc((1 - var(--k)) * -4deg);transition:box-shadow .3s,background .3s}
.brief:hover{background:#ffd9c2;box-shadow:0 14px 30px -18px rgba(156,52,19,.5)}
.brief b{font:800 17px/1.2 var(--display);letter-spacing:-.01em}
.brief span{color:var(--deep);font-size:15px;line-height:1.4}

/* 03 ads fan out of him like a hand of cards */
.job.wide{grid-template-columns:1fr;gap:20px}
.show{height:600px;align-items:flex-end}
.s-creating{width:210px;z-index:2}
.fan{position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:110px;pointer-events:none}
.fan img{grid-area:1/1;width:230px;aspect-ratio:4/5;object-fit:cover;border-radius:18px;box-shadow:0 22px 44px -18px rgba(156,52,19,.55);pointer-events:auto;transform-origin:50% 100%;
  --d:calc(var(--i) - 2);--x:225px;--lift:170px;--drop:34px;
  translate:calc(var(--d) * var(--s) * var(--x)) calc(var(--s) * -1 * var(--lift) + var(--d) * var(--d) * var(--s) * var(--drop));
  rotate:calc(var(--d) * var(--s) * 8deg);scale:calc(.55 + var(--s) * .45);opacity:clamp(0,var(--s) * 3,1);transition:box-shadow .3s,z-index 0s}
.fan img:nth-child(3){z-index:1}
.fan img:hover{z-index:3;box-shadow:0 0 0 3px var(--orange),0 30px 60px -16px rgba(156,52,19,.65)}

/* 04 testing: he points at the rising chart */
.lab{gap:10px}
.s-lab{width:220px}
.chart{flex:1;max-width:280px;margin:0}
.bars{height:220px;display:flex;align-items:flex-end;gap:12px;border-bottom:2px solid var(--line);padding:0 6px}
.bars i{flex:1;height:calc(var(--h) * 100%);background:var(--peach);border-radius:10px 10px 4px 4px;transform-origin:50% 100%;scale:1 clamp(.04,var(--s) * 1.5 - var(--i) * .12,1);position:relative;transition:background .3s}
.bars i:hover{background:var(--apricot)}
.bars .win{background:var(--orange)}
.bars .win b{position:absolute;bottom:100%;left:50%;translate:-50% -8px;font:800 13px var(--body);color:var(--rust);opacity:clamp(0,var(--s) * 4 - 3,1);white-space:nowrap}
.chart figcaption{font-size:13px;color:var(--muted);margin-top:10px}

/* 05 remix: variation chips pop out around him */
.s-dj{width:240px}
.s-dj[data-bubble=top] .say{bottom:108%}  /* clear of the turntable console */
.chip{position:absolute;background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:700;font-size:15px;
  --k:clamp(0,(var(--s) * 3.3 - var(--i)) * 1.6 - .2,1);opacity:var(--k);scale:calc(.5 + var(--k) * .5);transition:border-color .3s,rotate .4s var(--spring)}
.chip:hover{border-color:var(--orange);rotate:-4deg}
.chip:nth-of-type(1){top:4%;left:4%}.chip:nth-of-type(2){bottom:24%;right:0}.chip:nth-of-type(3){bottom:2%;left:10%}

/* 4. who */
.who{background:var(--orange);color:#fff;max-width:none;border-radius:48px;margin:0 16px}
.who>*{max-width:1132px;margin-left:auto;margin-right:auto}
.s-boards{width:210px;margin-right:4%}
.s-boards::before{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,228,.55),transparent)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.grid4 article{position:relative;background:var(--cream);color:var(--ink);border-radius:26px;padding:28px;transition:opacity .6s,transform .9s var(--spring),rotate .25s var(--out),translate .45s var(--spring)}
.grid4 h4{font-size:26px;margin-bottom:10px}
.grid4 p{color:var(--muted);font-size:17px}

/* 5. founder */
.founder.solo{display:block;text-align:center}.founder.solo blockquote{max-width:24ch;margin:0 auto}
.founder blockquote{font-size:clamp(28px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em}
.founder cite{font-size:18px}

/* 6. pricing */
.sub{font-size:22px;color:var(--muted);max-width:40ch;margin-top:18px}
.trial{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:40px;background:var(--peach);border-radius:26px;padding:22px 26px;max-width:860px}
.trial b{display:block;font:800 22px/1.2 var(--display);letter-spacing:-.02em}
.trial span{color:var(--deep);font-size:16px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:150px;align-items:stretch}
.plans article{position:relative;background:#fff;border:2px solid var(--line);border-radius:26px;padding:26px 22px;display:flex;flex-direction:column;gap:12px;transition:opacity .6s,transform .9s var(--spring),rotate .25s var(--out),translate .45s var(--spring),box-shadow .35s}
.plans article:not(.tilt):hover{translate:0 -8px}
.plans article:hover{box-shadow:0 26px 50px -26px rgba(156,52,19,.45)}
.plans h4{font-size:22px}
.price{font:800 38px var(--display);letter-spacing:-.03em}
.price [data-count]{display:inline-block;font-variant-numeric:tabular-nums}
.early{max-width:680px;margin:18px 0 0;padding:14px 18px;border-radius:16px;background:var(--peach);color:var(--ink);font-size:16px}
.early b{color:var(--rust)}
.plans p.prepay:not(.price){margin:-4px 0 6px;font-size:14px;font-weight:600;color:var(--rust)}
.price small{font:600 15px var(--body);color:var(--muted)}
.plans ul{padding-left:18px;color:var(--muted);font-size:15px;display:grid;gap:4px}
.plans p:not(.price){color:var(--muted);font-size:15px}
.plans .trial-note{color:var(--deep)!important;background:var(--peach);border-radius:12px;padding:8px 12px;font-weight:600}
.plans .btn{margin-top:auto;text-align:center;font-size:15px;padding:13px 16px}
.plans .hot{background:linear-gradient(var(--ink),var(--ink)) padding-box,conic-gradient(from var(--ang),var(--rust),var(--apricot),#fff1e6,var(--orange),var(--rust)) border-box;border-color:transparent;color:#fff;scale:1.04;animation:spinb 5s linear infinite;box-shadow:0 30px 60px -30px rgba(238,128,80,.7)}
@keyframes spinb{to{--ang:360deg}}
.plans .hot ul,.plans .hot small{color:#cfc6ba}
.tag{position:absolute;top:-14px;left:20px;background:var(--apricot);color:var(--ink);font-weight:700;font-size:13px;padding:4px 12px;border-radius:999px;overflow:hidden;z-index:2}
.tag::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);animation:shine 4s 1s ease-in-out infinite}
.trial.kit{margin-top:22px;max-width:none}.trial.kit>div{max-width:70ch}
.s-pack{position:absolute;width:150px;right:-18px;top:-128px;z-index:1}

/* 7. final */
.final{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.final h2{max-width:none}
.final>p{font-size:22px;color:var(--muted)}
.s-success{width:250px}
.faq{width:100%;max-width:720px;margin-top:60px;text-align:left}
details{border-bottom:2px solid var(--line);padding:22px 4px;transition:background .3s}
summary{font:800 22px var(--display);letter-spacing:-.02em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;transition:color .2s,translate .35s var(--spring)}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--rust);translate:6px 0}
summary::after{content:"+";color:var(--orange);transition:transform .45s var(--spring)}
details[open] summary::after{transform:rotate(135deg) scale(1.15)}
details p{color:var(--muted);margin-top:10px;overflow:hidden}
.foot{text-align:center;padding:40px;color:var(--muted);font-weight:600}

/* cursor: ADDVO's 4-point sparkle (same superellipse star as the 3D sparkles), mouse only */
@media (hover:hover) and (pointer:fine){
  html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M30.52 16.00L30.29 16.01L29.61 16.06L28.54 16.24L27.15 16.59L25.55 17.18L23.85 18.05L22.16 19.19L20.57 20.57L19.19 22.16L18.05 23.85L17.18 25.55L16.59 27.15L16.24 28.54L16.06 29.61L16.01 30.29L16.00 30.52L15.99 30.29L15.94 29.61L15.76 28.54L15.41 27.15L14.82 25.55L13.95 23.85L12.81 22.16L11.43 20.57L9.84 19.19L8.15 18.05L6.45 17.18L4.85 16.59L3.46 16.24L2.39 16.06L1.71 16.01L1.48 16.00L1.71 15.99L2.39 15.94L3.46 15.76L4.85 15.41L6.45 14.82L8.15 13.95L9.84 12.81L11.43 11.43L12.81 9.84L13.95 8.15L14.82 6.45L15.41 4.85L15.76 3.46L15.94 2.39L15.99 1.71L16.00 1.48L16.01 1.71L16.06 2.39L16.24 3.46L16.59 4.85L17.18 6.45L18.05 8.15L19.19 9.84L20.57 11.43L22.16 12.81L23.85 13.95L25.55 14.82L27.15 15.41L28.54 15.76L29.61 15.94L30.29 15.99Z' fill='%23fa812f' opacity='0.3'/%3E%3Cpath d='M27.00 16.00L26.82 16.00L26.31 16.05L25.50 16.18L24.45 16.45L23.24 16.90L21.95 17.55L20.66 18.41L19.46 19.46L18.41 20.66L17.55 21.95L16.90 23.24L16.45 24.45L16.18 25.50L16.05 26.31L16.00 26.82L16.00 27.00L16.00 26.82L15.95 26.31L15.82 25.50L15.55 24.45L15.10 23.24L14.45 21.95L13.59 20.66L12.54 19.46L11.34 18.41L10.05 17.55L8.76 16.90L7.55 16.45L6.50 16.18L5.69 16.05L5.18 16.00L5.00 16.00L5.18 16.00L5.69 15.95L6.50 15.82L7.55 15.55L8.76 15.10L10.05 14.45L11.34 13.59L12.54 12.54L13.59 11.34L14.45 10.05L15.10 8.76L15.55 7.55L15.82 6.50L15.95 5.69L16.00 5.18L16.00 5.00L16.00 5.18L16.05 5.69L16.18 6.50L16.45 7.55L16.90 8.76L17.55 10.05L18.41 11.34L19.46 12.54L20.66 13.59L21.95 14.45L23.24 15.10L24.45 15.55L25.50 15.82L26.31 15.95L26.82 16.00Z' fill='%23fff7e8' stroke='%23fb9a45' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16,auto}
  a,button,summary,label,.btn,.pal,.track img,.fan img{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M33.69 16.00L33.41 16.01L32.58 16.08L31.27 16.29L29.59 16.72L27.64 17.44L25.56 18.49L23.50 19.88L21.57 21.57L19.88 23.50L18.49 25.56L17.44 27.64L16.72 29.59L16.29 31.27L16.08 32.58L16.01 33.41L16.00 33.69L15.99 33.41L15.92 32.58L15.71 31.27L15.28 29.59L14.56 27.64L13.51 25.56L12.12 23.50L10.43 21.57L8.50 19.88L6.44 18.49L4.36 17.44L2.41 16.72L0.73 16.29L-0.58 16.08L-1.41 16.01L-1.69 16.00L-1.41 15.99L-0.58 15.92L0.73 15.71L2.41 15.28L4.36 14.56L6.44 13.51L8.50 12.12L10.43 10.43L12.12 8.50L13.51 6.44L14.56 4.36L15.28 2.41L15.71 0.73L15.92 -0.58L15.99 -1.41L16.00 -1.69L16.01 -1.41L16.08 -0.58L16.29 0.73L16.72 2.41L17.44 4.36L18.49 6.44L19.88 8.50L21.57 10.43L23.50 12.12L25.56 13.51L27.64 14.56L29.59 15.28L31.27 15.71L32.58 15.92L33.41 15.99Z' fill='%23fa812f' opacity='0.5'/%3E%3Cpath d='M29.40 16.00L29.19 16.01L28.56 16.06L27.57 16.22L26.29 16.55L24.81 17.09L23.24 17.89L21.68 18.94L20.22 20.22L18.94 21.68L17.89 23.24L17.09 24.81L16.55 26.29L16.22 27.57L16.06 28.56L16.01 29.19L16.00 29.40L15.99 29.19L15.94 28.56L15.78 27.57L15.45 26.29L14.91 24.81L14.11 23.24L13.06 21.68L11.78 20.22L10.32 18.94L8.76 17.89L7.19 17.09L5.71 16.55L4.43 16.22L3.44 16.06L2.81 16.01L2.60 16.00L2.81 15.99L3.44 15.94L4.43 15.78L5.71 15.45L7.19 14.91L8.76 14.11L10.32 13.06L11.78 11.78L13.06 10.32L14.11 8.76L14.91 7.19L15.45 5.71L15.78 4.43L15.94 3.44L15.99 2.81L16.00 2.60L16.01 2.81L16.06 3.44L16.22 4.43L16.55 5.71L17.09 7.19L17.89 8.76L18.94 10.32L20.22 11.78L21.68 13.06L23.24 14.11L24.81 14.91L26.29 15.45L27.57 15.78L28.56 15.94L29.19 15.99Z' fill='%23ffffff' stroke='%23f46a22' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16,pointer}
  input,textarea,select,[contenteditable]{cursor:text}
}
@media (max-width:900px){
  .nav nav{display:none}.nav{gap:12px;padding:12px 16px}.nav .btn{margin-left:auto}
  .wrap{padding:56px 16px}
  .trio,.grid4{grid-template-columns:1fr}
  .head-row{flex-direction:column-reverse;align-items:flex-start;gap:8px}
  .s-voice,.s-boards,.s-target{width:130px;margin:0 0 0 auto}
  .t-copy{margin-top:22px}.t-copy p{font-size:19px}
  /* phones: the three ads scroll sideways inside their own strip (the page itself never scrolls sideways) */
  .aud{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;margin:32px -16px 0;padding:0 16px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none}
  .aud::-webkit-scrollbar{display:none}
  .aud figure{scroll-snap-align:start}
  .job,.job.scan{grid-template-columns:1fr;gap:22px;padding:40px 0}
  .job>.visual,.job.flip>.visual{order:0}
  .visual{min-height:0}
  .reviews{grid-template-columns:1fr;gap:12px;padding-top:130px}
  .s-scan{width:120px;left:calc(var(--s) * (100% - 120px))}
  .rv{padding:22px 20px;font-size:18px}
  .desk{align-items:flex-start}.s-ideas{width:120px}.briefs{max-width:none}
  .show{height:360px;overflow-x:clip}.s-creating{width:130px}
  .fan{padding-bottom:70px}
  .fan img{width:92px;border-radius:12px;--x:58px;--lift:100px;--drop:16px}
  .s-lab{width:130px}.bars{height:170px}
  .remix{min-height:250px}.s-dj{width:160px}
  .chip{font-size:13px;padding:6px 12px}
  .plans{grid-template-columns:1fr;margin-top:40px;gap:22px}.plans .hot{scale:none;margin-top:120px;order:-1}
  .s-pack{width:116px;right:-4px;top:-118px}
  .who{margin:0 8px;border-radius:32px}
  .track img{width:140px;height:140px}
  .say{max-width:150px;font-size:13px;padding:8px 11px}
  .s-success{width:170px}
  .trial b{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal],.beam,.pool{opacity:1;transform:none}
  .value em{-webkit-text-fill-color:var(--orange)}
  #addvo{display:none}
  html{scroll-behavior:auto}
}
.aud.four figure{--k:clamp(0,(var(--s) * 4.4 - var(--i)) * 1.6 - .2,1)}
@media (max-width:900px){.aud.four{grid-template-columns:none}}

.mult{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:44px}
.mult div{display:grid;justify-items:center;background:#fff;border:2px solid var(--line);border-radius:18px;padding:10px 16px;min-width:88px}
.mult b{font:800 30px/1 var(--display);letter-spacing:-.02em}
.mult span{font-size:13px;color:var(--muted);margin-top:4px;text-align:center}
.mult i{font:800 24px var(--display);color:var(--orange);font-style:normal}
.mult .tot{background:var(--ink);border-color:var(--ink)}.mult .tot b{color:var(--apricot)}.mult .tot span{color:#e9e2d6}
.mult-sub{margin-top:16px}
.aud .lvl{display:inline-block;font:700 12px var(--body);font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:var(--rust);background:var(--peach);border-radius:999px;padding:3px 10px;margin-bottom:6px}
@media (max-width:900px){.mult{gap:8px}.mult div{min-width:0;padding:8px 10px}.mult b{font-size:22px}.mult span{font-size:11px}.mult i{font-size:18px}}

/* ===== spotlight additions (2026-10-26): hero lede, the loop strip, who cards, tokens table ===== */
.lede{max-width:34ch;margin:-12px auto 30px;font-size:clamp(18px,2vw,24px);line-height:1.4;color:#f1dfd0;animation:rise .8s 1.95s var(--spring) both;text-wrap:balance}
.stage .value{margin-bottom:26px}
.trial-line a{display:inline-block;margin-top:8px;color:var(--apricot);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(255,180,141,.4)}
.trial-line a:hover{border-color:var(--apricot)}

/* the loop: six steps in a row, the last one curls back to the first */
.loop{list-style:none;padding:0;margin:34px 0 10px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;counter-reset:step}
.loop li{counter-increment:step;position:relative;background:#fff;border:2px solid var(--line);border-radius:20px;padding:16px 16px 18px;display:grid;align-content:start;gap:4px}
.loop li::before{content:counter(step);font:800 14px var(--display);color:var(--orange);background:var(--peach);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px}
.loop li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-11px;width:10px;height:10px;border-top:2.5px solid var(--apricot);border-right:2.5px solid var(--apricot);rotate:45deg;translate:0 -50%}
.loop b{font:800 18px/1.15 var(--display);letter-spacing:-.01em}
.loop span{font-size:14px;color:var(--muted);line-height:1.35}
.loop .again{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.loop .again b{color:var(--apricot)}.loop .again span{color:#d9cfc2}
.loop .again::before{content:"\21BB";background:var(--orange);color:#fff;font-size:17px}

/* who: two cards, one per customer */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:50px}
.grid2 article{position:relative;background:var(--cream);color:var(--ink);border-radius:28px;padding:32px;transition:opacity .6s,transform .9s var(--spring),rotate .25s var(--out),translate .45s var(--spring)}
.grid2 h4{font-size:clamp(28px,3vw,38px)}
.grid2 .tagline{font:800 20px/1.25 var(--display);color:var(--rust);margin:8px 0 16px;letter-spacing:-.01em}
.grid2 ul{padding-left:20px;display:grid;gap:8px;color:var(--muted);font-size:17px}
.grid2 li::marker{color:var(--orange)}

/* pricing additions */
.comp{max-width:60ch;margin-top:10px}
.plans .for{margin-top:-6px;font-weight:600}
.plans .hot .for{color:#e9dccd!important}
.plans ul b{color:var(--ink);font-weight:700}
.plans .hot ul b{color:#fff}
.tokens{margin-top:40px;background:var(--sand);border-radius:28px;padding:28px;max-width:860px}
.tokens h3{font-size:clamp(26px,3vw,34px);margin-bottom:16px}
.tokens dl{display:grid;gap:2px}
.tokens dl>div{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:baseline;padding:10px 0;border-bottom:2px dashed var(--line)}
.tokens dt{font:800 18px var(--display);letter-spacing:-.01em}
.tokens dd{margin:0;color:var(--muted);font-size:16px}
.tokens dd b{display:inline-block;min-width:84px;color:var(--rust);font-weight:700;margin-right:10px}
.tokens>p{margin-top:14px;font-size:14px;color:var(--muted)}
.sub.small{font-size:17px;max-width:60ch}

@media (max-width:900px){
  .lede{margin:-8px auto 24px}
  .loop{grid-template-columns:1fr 1fr;gap:10px}
  .loop li:not(:last-child)::after{display:none}
  .loop b{font-size:16px}.loop span{font-size:13px}
  .grid2{grid-template-columns:1fr}
  .grid2 article{padding:24px}
  .tokens{padding:22px 18px}
  .tokens dl>div{grid-template-columns:1fr;gap:2px}
  .tokens dd b{min-width:0}
}
.price small{letter-spacing:0}
.plans .hot p.prepay:not(.price){color:var(--apricot)}
.stage .value{max-width:17ch}
@media (min-width:901px){.tokens .head-row{align-items:center}}
.tokens .head-row h3{margin:0}
.s-tokens{width:150px;margin-right:4%}
@media (max-width:900px){.stage .value{max-width:13ch}.s-tokens{width:110px}}

/* 5c. the $50 Ad Pack, the first step (offer 2026-10-28) */
.pack h2{font-size:clamp(44px,7vw,96px);max-width:12ch;margin-top:10px}
.s-start{width:200px;margin-right:4%}
.pack-list{list-style:none;padding:0;counter-reset:pk;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:40px}
.pack-list li{counter-increment:pk;position:relative;background:var(--sand);border-radius:22px;padding:18px 20px 18px 62px;color:var(--muted);font-size:17px}
.pack-list li::before{content:counter(pk);position:absolute;left:18px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;font:800 16px/30px var(--display);text-align:center}
.pack-list b{color:var(--ink)}
.pack-list li:last-child{background:var(--peach)}.pack-list li:last-child:nth-child(odd){grid-column:1/-1}
.pack-value{margin-top:24px;font:800 clamp(22px,2.6vw,30px)/1.2 var(--display);letter-spacing:-.02em}
.pack-value cite{display:block;margin-top:6px;font:500 14px var(--body);letter-spacing:0;color:var(--muted)}
.pack-terms{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.pack-terms>div{background:#fff;border:2px solid var(--line);border-radius:22px;padding:20px 22px}
.pack-terms>div:first-child{border-color:var(--apricot)}
.pack-terms b{display:block;font:800 22px/1.2 var(--display);letter-spacing:-.02em;margin-bottom:6px}
.pack-terms span{color:var(--muted);font-size:16px}
.pack-buy{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px;scroll-margin-top:120px}
.pack-buy p{color:var(--muted);font-size:17px}
.plans p.bonus{margin:-6px 0 4px;font-size:14px;font-weight:700;color:var(--deep)!important;background:var(--peach);border-radius:12px;padding:6px 10px}
.plans .hot p.bonus{background:rgba(255,180,141,.16);color:var(--apricot)!important}
@media (max-width:900px){
  .s-start{width:130px;margin:0 0 0 auto}
  .pack-list,.pack-terms{grid-template-columns:1fr}
  .pack-list li{padding:16px 16px 16px 56px;font-size:16px}
  .pack-list li::before{left:14px;top:14px}
  .pack-buy{gap:14px}
}
/* Problem stats (2026-10-28): three sourced numbers, reuses .mult tiles */
.stats{align-items:stretch;margin-top:36px}
.stats div{max-width:15rem;padding:16px 18px;justify-items:start;text-align:left}
.stats b{font-size:40px}
.stats span{text-align:left;font-size:14px}
.problem .t-copy{margin-top:28px}
.me-line{margin-top:40px;font-size:22px}.me-line b{font-weight:700}
@media (max-width:900px){.stats div{max-width:none;flex:1 1 100%}.stats b{font-size:32px}.stats span{font-size:13px}.me-line{font-size:19px}}

.free-line{margin-top:14px;font-size:15px;opacity:.85}

/* Sandbox checkout notice keeps the public test flow explicit. */
.checkout-test-notice{position:relative;z-index:21;margin:80px 16px 0;padding:10px 16px;border:1px solid var(--orange);border-radius:12px;background:var(--ink);color:var(--cream);font-size:14px;text-align:center}
.prepay a{text-underline-offset:4px}

/* Sliding billing pills */
.billing-selector{display:flex;flex-direction:column;align-items:center;gap:14px;margin:36px 0 32px}
.billing-pill{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;width:min(100%,440px);padding:6px;border:1px solid #ead8c4;border-radius:999px;background:var(--sand);box-shadow:inset 0 2px 5px #9c34130a,0 6px 20px #9c341308}
.billing-pill-indicator{position:absolute;z-index:-1;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:999px;background:var(--orange);box-shadow:0 3px 8px #9c341326;transition:transform 320ms cubic-bezier(.22,1,.36,1)}
.billing-pill[data-billing="quarterly"] .billing-pill-indicator{transform:translateX(100%)}
.billing-pill button{border:0;border-radius:999px;background:transparent;padding:14px 12px;color:var(--muted);font:700 16px var(--body);cursor:pointer;transition:color 220ms ease,transform 180ms ease;white-space:nowrap}
.billing-pill button[aria-pressed="true"]{color:var(--ink)}
.billing-pill button:active{transform:scale(.97)}
.billing-pill button:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
.billing-pill button span{display:inline-block;margin-left:5px;font-size:11px;padding:3px 6px;border-radius:999px;background:#fff8e9;color:var(--deep)}
.billing-selector p{text-align:center;font-size:14px;color:var(--muted);min-height:22px}
@media(max-width:480px){.billing-pill button{font-size:14px;padding:14px 6px}.billing-pill button span{font-size:10px;margin-left:2px;padding:3px 4px}}
@media(prefers-reduced-motion:reduce){.billing-pill-indicator,.billing-pill button{transition:none}}
/* Reading-first offer, pricing and support sections. */
body{padding-top:76px}
.nav{position:fixed;inset:0 0 auto;min-height:76px;background:#261812;color:var(--cream);z-index:100;box-shadow:0 1px 0 #ffffff16;isolation:isolate}
.nav .progress{position:absolute;inset:auto 0 0;height:3px;z-index:1;background:var(--orange)}
html{scroll-padding-top:96px}
.checkout-test-notice{margin:0;padding:8px 16px;border:0;border-radius:0;font-size:12px;z-index:1;background:#f7eadb;color:#513d30}
.eyebrow{font:700 12px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--rust)}
.pack h2{font-size:clamp(42px,6vw,76px);max-width:15ch;line-height:1.03}
.pack .head-row{align-items:center}
.offer-intro{max-width:54ch;font-size:20px;line-height:1.6;color:#514a42;margin-top:22px}
.offer-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:32px 0 42px;padding:24px 12px;border-block:1px solid #e3d7c8}
.offer-summary div{text-align:center;display:grid;gap:5px}
.offer-summary strong{font:800 clamp(40px,6vw,64px)/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
.offer-summary span{font-size:14px;color:#5c5348}
.offer-includes{font-size:28px;line-height:1.2}
.pack-list{margin-top:20px;gap:12px}
.pack-list li{padding:22px 22px 22px 64px;line-height:1.5;color:#554c42}
.pack-list b{display:block;font-size:19px;line-height:1.3;margin-bottom:7px}
.pack-list span{display:block;font-size:16px;max-width:42ch}
.pack-list li:last-child{background:var(--sand);grid-column:auto}
.pack-list li::before{background:#f4dfcc;color:var(--rust);top:22px}
.offer-comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.offer-comparison>div{padding:28px;border:1px solid #e3d7c8;border-radius:22px;background:#fff}
.offer-comparison .comparison-addvo{background:#fae2d3;border-color:#eaa879}
.offer-comparison strong{display:block;font:800 clamp(32px,4vw,52px)/1.1 var(--display);letter-spacing:-.035em;margin:14px 0 10px;color:var(--ink)}
.offer-comparison small{font:600 16px var(--body);letter-spacing:0}
.offer-comparison p{font-size:17px;color:#514034}
.comparison-source{font-size:12px;line-height:1.5;margin-top:12px;max-width:70ch}
.launch-deadline{font-size:15px;color:#5c4d40;margin-top:22px;padding-left:14px;border-left:3px solid var(--orange)}
.launch-deadline b{display:block;color:var(--ink)}
.pack-terms{margin-top:26px;gap:16px}
.pack-terms>div{padding:26px}
.pack-terms b{font-size:22px;line-height:1.25;margin-bottom:12px;max-width:23ch}
.pack-terms span{display:block;color:#554c42;line-height:1.65}
.pricing h2{font-size:clamp(42px,6vw,76px)}
.pricing>.sub{font-size:19px;line-height:1.6;max-width:54ch;color:#554c42}
.founding-note{margin:24px 0;max-width:760px;padding:22px 24px;border:1px solid #e8d5c3;border-radius:18px;background:#f8f3e9}
.founding-note strong{font:800 22px/1.25 var(--display);display:block;color:var(--ink)}
.founding-note p{margin:9px 0;font-size:16px;color:#4c443c}
.founding-note small{font-size:13px;color:#61564c}
.pricing .trial{padding:24px;gap:18px;max-width:none}
.pricing .trial b{font-size:21px;max-width:35ch;margin-bottom:8px}
.pricing .trial span{display:block;line-height:1.6;color:#67402a;max-width:58ch}
.billing-selector{margin:36px 0 32px}
.plans{margin-top:36px;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plans article{min-width:0;gap:14px;padding:28px 24px}
.plans .hot{scale:1;margin-top:0;order:0}
.plans .for{font-size:14px!important;min-height:20px;color:#60564b!important}
.plans .price{font-size:clamp(30px,3.4vw,44px);line-height:1.08}
.plans .price small{display:block;margin-top:7px;font-size:14px;letter-spacing:0}
.plans .prepay{min-height:36px;line-height:1.5}
.plans ul{color:#514a42;gap:9px;line-height:1.5}
.plans .hot ul{color:#e7dfd4}
.plans .bonus{line-height:1.5}
.plans-shared{font-size:16px;line-height:1.6;color:#554c42;max-width:68ch;margin-top:22px}
.mobile-plan-details{display:none}
.tokens{max-width:none;margin-top:44px;padding:32px;position:relative}
.credits-heading{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:20px;align-items:center;margin-bottom:24px}
.credits-heading h3{margin:10px 0 12px;font-size:34px}
.credits-heading p:last-child{font-size:16px;color:#554c42;line-height:1.5}
.credits-art{width:170px;justify-self:end;align-self:start;pointer-events:none}
.tokens dl{max-width:760px;gap:0}
.tokens dl>div{padding:16px 0;border-bottom:1px solid #dfd5c8}
.tokens dd{color:#554c42;line-height:1.6}
.tokens>p{max-width:72ch;color:#554c42;line-height:1.65;font-size:15px}
.feedback-section{background:#f8f3e9;border-block:1px solid #e7ddcf}
.feedback-section h2{font-size:clamp(36px,5vw,60px);line-height:1.1;margin:14px 0 20px;max-width:18ch}
.feedback-section>p:not(.eyebrow){max-width:58ch;line-height:1.7;color:#554c42;font-size:18px;margin-bottom:24px}
.feedback-section>span{display:block;font-size:13px;margin-top:14px;color:#61564c}
.faq{max-width:820px;margin-top:64px}
.faq h3{font-size:30px;margin-bottom:22px}
.faq summary{font-size:18px;line-height:1.5;padding-block:18px}
.faq details p{color:#554c42;line-height:1.75;font-size:16px;max-width:64ch;margin-bottom:18px}
@media(max-width:900px){
 body{padding-top:68px}.nav{min-height:68px;padding:12px 16px}.nav .logo{font-size:21px}.nav .btn{font-size:13px;padding:11px 16px}.nav .logo img{width:28px}
 .pack .head-row{flex-direction:row;align-items:center}.s-start{width:110px!important;flex:none}.pack .say{display:none}
 .pack h2{font-size:clamp(34px,7vw,48px);max-width:13ch}
 .offer-intro{font-size:17px;line-height:1.6;margin-top:20px}
 .offer-summary{padding:22px 0;margin:26px 0 30px;gap:5px}.offer-summary strong{font-size:40px}.offer-summary span{font-size:12px;line-height:1.5}
 .offer-includes{font-size:24px}.pack-list{grid-template-columns:1fr;gap:10px}.pack-list li{padding:20px 18px 20px 58px}.pack-list li::before{top:20px;left:16px}.pack-list b{font-size:18px}.pack-list span{font-size:15px;line-height:1.6}
 .offer-comparison{gap:10px;margin-top:28px}.offer-comparison>div{padding:20px 15px;border-radius:18px}.offer-comparison strong{font-size:clamp(28px,7vw,40px);margin:14px 0 10px}.offer-comparison .eyebrow{font-size:10px;letter-spacing:.06em}.offer-comparison p{font-size:14px;line-height:1.6}.offer-comparison small{font-size:13px}
 .pack-terms{grid-template-columns:1fr}.pack-terms>div{padding:22px}.pack-terms b{font-size:21px}.pack-terms span{font-size:15px}.pack-buy .btn{width:100%;text-align:center}.pack-buy p{font-size:15px;line-height:1.6}
 .founding-note{padding:20px}.founding-note strong{font-size:20px}.founding-note p{line-height:1.7;font-size:15px}.founding-note small{line-height:1.6;display:block}
 .plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:30px;perspective:none}
 .plans article{padding:20px 10px 14px;border-radius:17px;gap:12px;transform:none!important;translate:none!important;opacity:1!important}
 .plans .hot{margin-top:0;order:0;scale:1}.plans .tag{left:50%;translate:-50% 0;top:-13px;font-size:9px;padding:4px 8px;white-space:nowrap}
 .plans h4{font-size:18px;letter-spacing:-.025em}.plans .for{font-size:11px!important;line-height:1.45;min-height:32px;margin:0}
 .plans .price{font-size:clamp(22px,5.8vw,36px);letter-spacing:-.05em;white-space:nowrap}.plans .price small{font-size:11px;margin-top:6px;letter-spacing:0}
 .plans .prepay{font-size:10px!important;line-height:1.5;min-height:45px;margin:0!important}
 .plans .bonus{display:none}.plans ul{list-style:none;padding:0;font-size:11px;gap:10px;line-height:1.5}.plans ul li:nth-child(n+3){display:none}.plans ul li b{font-size:11px}
 .plans .btn{padding:12px 2px;font-size:11px;min-height:44px;box-shadow:0 3px 0 var(--rust);white-space:nowrap;border-radius:10px}
 .plans-shared{font-size:14px;line-height:1.7;margin-top:20px}
 .mobile-plan-details{display:block;margin-top:24px;padding:20px 18px;border:1px solid #e3d7c8;border-radius:18px;background:#fff}.mobile-plan-details h3{font-size:21px;margin-bottom:10px}.mobile-plan-details summary{font-size:14px;line-height:1.5;padding:14px 0;font-weight:700}.mobile-plan-details p{font-size:14px;line-height:1.7;color:#554c42;padding-bottom:14px}
 .billing-pill{max-width:390px}.billing-selector p{font-size:12px;line-height:1.6;max-width:38ch}
 .tokens{padding:24px 18px;margin-top:30px}.credits-heading{grid-template-columns:minmax(0,1fr) 88px;gap:14px;margin-bottom:12px}.credits-heading h3{font-size:26px;line-height:1.1}.credits-heading .eyebrow{font-size:9px}.credits-heading p:last-child{font-size:13px}.credits-art{width:88px}.tokens dl>div{grid-template-columns:1fr;gap:5px}.tokens dt{font-size:17px}.tokens dd{font-size:14px}.tokens dd b{display:block;margin-bottom:3px}.tokens>p{font-size:14px}
 .feedback-section>p:not(.eyebrow){font-size:16px}.feedback-section .btn{font-size:16px}.faq summary{font-size:16px}.faq details p{font-size:15px}.faq h3{font-size:26px}
}
@media(max-width:360px){.plans{gap:5px}.plans article{padding:19px 7px 12px}.plans h4{font-size:16px}.plans .price{font-size:21px}.plans .btn{font-size:10px}.pack h2{font-size:32px}.s-start{width:80px!important}}

/* A visible, row-by-row benefits checklist under the three plan cards. */
.plan-comparison{margin-top:34px;border:1px solid #e2d7c8;background:#fff;border-radius:22px;padding:28px;overflow:hidden}
.plan-comparison h3{font-size:30px;line-height:1.15;margin:10px 0 12px;max-width:25ch}
.plan-comparison>p:not(.eyebrow){font-size:16px;line-height:1.6;color:#554c42;max-width:65ch}
.plan-comparison table{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:26px;font-size:15px}
.plan-comparison th,.plan-comparison td{padding:16px 12px;border-bottom:1px solid #eee6da;vertical-align:middle;text-align:center;overflow-wrap:break-word}
.plan-comparison th:first-child{width:40%;text-align:left}
.plan-comparison thead th{font:800 18px var(--display);color:var(--ink)}
.plan-comparison tbody th{font-size:15px;font-weight:600;line-height:1.5;color:#4d443b}
.plan-comparison th small{display:block;font:400 12px/1.5 var(--body);color:#716457;margin-top:3px}
.plan-comparison td{font-weight:700;color:var(--ink)}
.plan-comparison .growth-col{background:#fff2e8}
.feature-yes{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#f9dfc9;color:#8e330f;font-weight:800}
.feature-no{color:#8b8175;font-weight:400}
.plan-comparison .comparison-footnote{font-size:12px!important;margin-top:18px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pack-buy+.pack-terms{margin-top:24px}
@media(max-width:900px){
 .plan-comparison{padding:22px 12px;border-radius:18px;margin-top:26px}
 .plan-comparison h3{font-size:24px;margin-inline:4px}.plan-comparison>p{margin-inline:4px}.plan-comparison>p:not(.eyebrow){font-size:14px}
 .plan-comparison table{font-size:12px;margin-top:20px}.plan-comparison th,.plan-comparison td{padding:13px 5px}
 .plan-comparison th:first-child{width:36%}.plan-comparison thead th{font-size:13px}.plan-comparison tbody th{font-size:12px}.plan-comparison th small{font-size:10px}.feature-yes{width:21px;height:21px}
}

/* Clear opening, editorial pack contents and a true three-stage creative loop. */
.stage .hero-greeting{font-size:clamp(38px,5.5vw,76px);line-height:1.04;margin:18px 0 24px;letter-spacing:-.045em}
.stage .hero-greeting span{display:block}.stage .hero-greeting span:last-child{color:var(--apricot)}
.stage .hero-promise{max-width:36ch;font-size:clamp(19px,2.1vw,27px);line-height:1.5;margin:0 auto 30px}
.problem h2,.target h2,.jobs .copy h3{color:var(--rust);font-size:clamp(38px,5.3vw,68px);line-height:1.06;text-wrap:balance}
.jobs .copy p,.problem .t-copy,.target .t-copy{line-height:1.7;color:#51463c}
.engine-map{margin:36px auto 70px;max-width:800px}.engine-setup{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:640px;margin:auto}
.engine-setup li{position:relative;background:var(--sand);padding:22px;border-radius:18px;border:1px solid #e6d6c5}.engine-setup li:first-child:after{content:'→';position:absolute;right:-29px;top:40%;color:var(--rust);font-size:24px}
.engine-setup span,.cycle-step>span{font-size:12px;color:var(--rust);font-weight:700;letter-spacing:.06em}.engine-setup b{display:block;font:800 24px/1.15 var(--display);margin:8px 0}.engine-setup p{font-size:15px;line-height:1.5;color:#655448}
.engine-entry{text-align:center;font-size:34px;color:var(--rust);height:55px}.engine-cycle{position:relative;width:min(100%,600px);aspect-ratio:600/480;margin:auto}.cycle-arrows{position:absolute;inset:0;width:100%;height:100%}
.cycle-step{position:absolute;width:40%;text-align:center;padding:20px 15px;background:var(--sand);border:1px solid #e3c5ad;border-radius:20px}.cycle-step h3{font-size:24px;line-height:1.1;margin:9px 0}.cycle-step p{font-size:14px;line-height:1.5;color:#5c4b3d}.cycle-angles{left:30%;top:0;background:var(--peach)}.cycle-ads{right:0;bottom:7%}.cycle-test{left:0;bottom:7%}.cycle-center{position:absolute;top:40%;left:35%;width:30%;text-align:center;color:var(--rust);font:800 22px/1.15 var(--display)}
.engine-caption{max-width:48ch;text-align:center;margin:12px auto 0;color:#655448;font-size:15px;line-height:1.6}
.pack-contents{margin:35px 0}.pack-contents>h3{font-size:clamp(28px,4vw,44px);line-height:1.1;max-width:20ch;margin-bottom:28px;color:var(--rust)}
.pack-chapter{display:grid;grid-template-columns:50px minmax(0,1fr) 185px;gap:22px;border-top:1px solid #ddccba;padding:28px 0;align-items:start}.chapter-number{font:800 28px var(--display);color:var(--rust)}.pack-chapter h4{font-size:27px;line-height:1.15;margin-bottom:12px}.pack-chapter p{font-size:17px;line-height:1.7;color:#55473c;max-width:57ch}.pack-chapter .chapter-detail{margin-top:10px;font-size:14px}.chapter-label{font-size:12px;line-height:1.5;font-weight:700;background:var(--peach);color:var(--deep);border-radius:8px;padding:8px 10px}
.agency-comparison{margin-top:58px;padding-top:40px;border-top:1px solid #ddccba}.agency-comparison h3{font-size:clamp(30px,4.4vw,52px);color:var(--rust);line-height:1.08;max-width:22ch;margin:14px 0 28px}
.price-contrast{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;border:1px solid #e4d7c8;border-radius:18px;padding:28px;background:#fff;margin-bottom:12px}.price-contrast .contrast-label span{display:block;font-size:14px;color:#655448;margin-bottom:8px}.price-contrast b{font:800 30px/1.15 var(--display)}.price-contrast strong{display:block;font:800 clamp(30px,4vw,48px)/1.1 var(--display);letter-spacing:-.035em}.price-contrast strong small{font:600 16px var(--body)}.price-contrast>div:last-child>span{display:block;font-size:14px;color:#5a493c;margin-top:8px}.addvo-contrast{background:var(--peach);border-color:#e4a378}.addvo-contrast strong{color:var(--deep)}
.guarantee-panel{margin-top:34px;padding:32px;background:var(--sand);border-radius:20px;border:1px solid #e4d7c8}.guarantee-panel h3{font-size:clamp(28px,4vw,42px);line-height:1.1;margin:12px 0 18px;max-width:24ch}.guarantee-panel>p:not(.eyebrow){font-size:17px;line-height:1.7;color:#55473c;max-width:60ch;margin-bottom:20px}
.plans ul{list-style:none;padding-left:0}.plans li{position:relative;padding-left:17px}.plans li:before{content:'✓';position:absolute;left:0;color:var(--rust);font-weight:800}.plans .hot li:before{color:var(--apricot)}
@media(max-width:900px){
 .stage .hero-greeting{font-size:42px}.stage .hero-promise{font-size:20px;max-width:29ch}.stage{min-height:calc(100svh - 90px)}
 .engine-setup{gap:28px}.engine-setup li{padding:16px 12px}.engine-setup b{font-size:20px}.engine-setup p{font-size:13px}.engine-setup li:first-child:after{right:-24px}.engine-cycle{aspect-ratio:600/530}.cycle-arrows{height:100%}.cycle-step{padding:14px 9px;border-radius:15px;width:44%}.cycle-angles{left:28%;top:0}.cycle-step>span{font-size:9px}.cycle-step h3{font-size:18px;margin:7px 0}.cycle-step p{font-size:12px}.cycle-center{font-size:16px;top:42%}.engine-caption{font-size:13px;max-width:35ch}
 .pack-chapter{grid-template-columns:30px minmax(0,1fr);gap:12px;padding:24px 0}.chapter-number{font-size:22px}.pack-chapter h4{font-size:24px}.pack-chapter p{font-size:16px}.chapter-label{grid-column:2;justify-self:start}.pack-contents>h3{font-size:32px}
 .price-contrast{padding:22px 16px;gap:14px}.price-contrast b{font-size:23px}.price-contrast strong{font-size:30px}.price-contrast .contrast-label span{font-size:12px}.price-contrast>div:last-child>span{font-size:12px;line-height:1.5}.price-contrast strong small{font-size:12px}.guarantee-panel{padding:24px 20px}.guarantee-panel>p:not(.eyebrow){font-size:15px}
 .plans ul li:nth-child(n+3){display:block}.plans ul{font-size:11px;line-height:1.55}.plans li{padding-left:12px}.plans article{padding-inline:9px}.plans .btn{margin-top:auto}
}
.engine-cycle .cycle-arrows{overflow:visible}
@media(max-width:900px){.engine-cycle{aspect-ratio:600/740}.cycle-center{top:44%}.cycle-arrows{height:100%}}