/* ===== Box chapters: the copy-paste way (grey) turns into the box way (brand color) as you scroll.
   Motion lives in chapters.js; this file sets the resting layout. ===== */
:root{
  --cx-grey:#DCD8CF; --cx-ink:#1E2027; --cx-red:#E0483E;
  --disp:"Bebas Neue","Arial Narrow",Impact,sans-serif;
}
.disp{font-family:var(--disp);font-weight:400;text-transform:uppercase}

/* timeline-only films keep a canvas for the engine; it is opaque, so keep it out of sight */
.jx canvas,.chap canvas{display:none!important}
.cx-off > .stage{display:none}

/* shared chips: plan · profit · peace */
.ppp{display:flex;gap:8px;flex-wrap:wrap}
.ppp span{font:800 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1.5px solid currentColor;opacity:.62}
.ppp span.on{background:var(--gold-grad);color:var(--night);border-color:transparent;opacity:1}
.ppp.lg{justify-content:center;gap:12px;margin-top:30px}
.ppp.lg span{font-size:14px;padding:10px 20px}

/* ---------- JUST ASK ---------- */
.jx{height:250vh}
.jx .stage{background:var(--cx-grey)}
.jx-rows{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.4vw;overflow:hidden}
.jx-row{will-change:opacity;font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:12.4vw;line-height:.9;white-space:nowrap;color:#C9C4BA}
.jx-row span{display:inline-block;will-change:transform}
.jx-row.main{color:var(--cx-ink)}
.jx-strike{position:absolute;left:3vw;right:3vw;top:50%;height:1.7vw;margin-top:-.85vw;border-radius:99px;background:var(--gold-grad);transform-origin:0 50%;transform:rotate(-3deg) scaleX(0);z-index:2;will-change:transform}
.cx-newbg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.cx-newbg i{position:absolute;left:50%;top:var(--cy,50%);width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;border-radius:50%;background:var(--cx-new,var(--night));transform:scale(0);will-change:transform}
.jx .cx-newbg{z-index:3}
.jx-end{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sp-hdr) var(--g) 0;color:var(--cream);pointer-events:none}
.jx-ask{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:min(22vw,34vh);line-height:.8;letter-spacing:-.01em;white-space:nowrap}
.jx-ask .lt{display:inline-block;will-change:transform}
.jx-dot{display:inline-block;width:.17em;height:.17em;margin-left:.03em;border-radius:50%;background:var(--gold-grad);box-shadow:0 0 .3em rgba(241,213,146,.55)}
.jx-sub{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.1vw,50px);line-height:1.1;margin-top:3vh}
.jx-gift{max-width:52ch;margin:16px auto 0;font-size:clamp(16px,1.35vw,20px);color:var(--cream-2)}
.jx-end .ppp{justify-content:center;margin-top:22px}

/* ---------- chapter frame ---------- */
.chap{height:300vh}
.chap .stage{background:var(--cx-grey);color:var(--cx-ink)}
.chap[data-theme="blue"]{--cx-new:#2457C9;--cx-new2:#2B62D9;--cx-tx:#F6F1E4;--cx-tx2:rgba(246,241,228,.78)}
.chap[data-theme="night"]{--cx-new:#0B1430;--cx-new2:#14245C;--cx-tx:#F6F1E4;--cx-tx2:rgba(246,241,228,.74)}
.chap[data-theme="suite"]{--cx-new:#090C17;--cx-new2:#141A2E;--cx-tx:#F6F1E4;--cx-tx2:rgba(246,241,228,.72)}
.chap[data-theme="cream"]{--cx-new:#F4EFE3;--cx-new2:#E9EEF9;--cx-tx:#14245C;--cx-tx2:rgba(20,36,92,.76)}
.chap[data-theme="navy"]{--cx-new:#14245C;--cx-new2:#1D3277;--cx-tx:#F6F1E4;--cx-tx2:rgba(246,241,228,.76)}
.chap{--cy:56%}
.chap .cx-newbg i{background:radial-gradient(circle at 50% 50%,var(--cx-new2) 0,var(--cx-new) 34%)}

/* z-order: old world < color world < tiles < word < proof < copy < track < command < header */
.cx-old{z-index:1}.cx-clip{z-index:2}.chap .cx-newbg{z-index:3}.cx-tiles{z-index:3}.cx-word{z-index:4}.cx-proof{z-index:5}.cx-copy{z-index:6}.cx-track{z-index:7}.cx-cmd{z-index:8}.cx-top{z-index:9}

.cx-top{position:absolute;top:calc(var(--sp-hdr) + 4px);left:var(--g);right:var(--g);display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--cx-ink)}
.cx-chap{display:flex;align-items:baseline;gap:12px;font:800 14px var(--sans);letter-spacing:.18em;text-transform:uppercase}
.cx-chap .cn-short{display:none}
.cx-chap b{font-family:var(--disp);font-weight:400;font-size:38px;letter-spacing:0;line-height:1}

/* the grey world */
.cx-old{position:absolute;inset:0;padding:calc(var(--sp-hdr) + 76px) var(--g) 0}
.cx-num{position:absolute;right:calc(var(--g) - .04em);bottom:13vh;font-family:var(--disp);font-weight:400;font-size:min(38vw,64vh);line-height:.8;color:transparent;-webkit-text-stroke:2px rgba(30,32,39,.1);pointer-events:none}
.cx-label{display:flex;align-items:center;gap:10px;font:800 13px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#4A4842}
.cx-label::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--cx-red)}
.cx-problem{position:relative;font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(54px,7.4vw,134px);line-height:.88;letter-spacing:.005em;max-width:17ch;margin-top:14px;color:var(--cx-ink)}
.cx-problem .wd{display:inline-block;white-space:nowrap}
.cx-problem .lt{display:inline-block;will-change:transform}
.cx-sub{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.6vw,25px);line-height:1.3;color:#44464E;max-width:42ch;margin-top:20px}
.cx-old .cx-strike{position:absolute;left:calc(var(--g) - 1vw);width:min(84vw,1240px);top:calc(var(--sp-hdr) + 76px + 6.4vw);height:clamp(12px,1.3vw,22px);border-radius:99px;background:var(--gold-grad);transform-origin:0 50%;transform:rotate(-5deg) scaleX(0);will-change:transform}

/* the box opens: one cinematic clip per chapter (stand-in: its end picture) */
.cx-clip{position:absolute;inset:0;opacity:0;background:#05091A;overflow:hidden;pointer-events:none}
.cx-clip img,.cx-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.cx-clip video{opacity:0;transition:opacity .4s}
.cx-clip video.on{opacity:1}
.clip-shade{position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 55%,transparent 45%,rgba(5,9,26,.7) 100%),linear-gradient(to top,rgba(5,9,26,.55),transparent 35%)}

/* the command: you drive */
.cx-cmd{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 2 * var(--g));padding:18px 30px;border-radius:999px;background:#fff;color:#14161C;box-shadow:0 14px 26px -14px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.04);font:700 clamp(18px,1.9vw,30px)/1.2 var(--sans);transform:translate(-50%,-50%);white-space:nowrap;opacity:0}
.cx-cmd .you{color:#8A8F9C;font-weight:800}
.cx-cmd .typed .c{display:none}
.cx-cmd .caret{width:3px;height:1.1em;background:var(--blue);border-radius:2px;animation:cx-blink 1s steps(1) infinite}
@keyframes cx-blink{50%{opacity:0}}

/* the box word acts it out */
.cx-word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.22em;padding:0 var(--g) 9vh;font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:min(16vw,30vh);line-height:.85;color:var(--cx-tx);pointer-events:none}
.cx-word .wline{display:inline-flex;white-space:nowrap}
.cx-word .lt{display:inline-block;will-change:transform}
/* Build It: letters are gold blocks that drop and stack */
.w-blocks{column-gap:.38em;flex-wrap:wrap;align-content:center;row-gap:.14em;font-size:min(10vw,19vh)}
.w-blocks .wline:last-child{flex-basis:100%;justify-content:center}
/* no layer per block: ten block layers switching on at once (with BUILD IT BOX) cost an 80ms+ hitch in the scroll test */
.w-blocks .lt{will-change:auto}
.w-blocks .wline{gap:.06em}
.w-blocks .lt{display:inline-grid;place-items:center;width:.82em;height:.96em;padding-top:.06em;border-radius:.07em;background:linear-gradient(160deg,#F7E2A6,#D9B25F 55%,#B48834);color:#14245C;box-shadow:inset 0 -.07em 0 rgba(0,0,0,.18),0 .06em 0 #8E6A26,0 .1em .05em rgba(0,0,0,.22)}
/* Get Seen: dim letters, lit by a spotlight */
.w-spot{font-size:min(12.5vw,25vh)}
.w-spot .lt{position:relative;color:#1A2656}
.w-spot .lt i{position:absolute;inset:0;font-style:normal;background:linear-gradient(180deg,#FFF3CF,#F1D592 40%,#D9B25F 75%,#A87E2E);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0}
.w-spot .beam{position:absolute;left:0;top:50%;width:min(60vw,70vh);height:min(60vw,70vh);margin:-30vh 0 0 -30vw;border-radius:50%;background:radial-gradient(circle,rgba(241,213,146,.34) 0,rgba(241,213,146,.12) 38%,transparent 66%);will-change:transform;opacity:0}
/* The Edit Box: clips on a timeline, the ums get cut */
.w-cut{flex-direction:column;gap:3vh;font-size:min(9vw,17vh)}
.cliprow{position:relative;display:flex;gap:.08em;align-items:center}
.clip{display:inline-flex;overflow:hidden;white-space:nowrap;padding:.05em .14em 0;border-radius:.1em;border:3px solid rgba(246,241,228,.24);background:rgba(246,241,228,.05)}
.clip.cut{color:#FF8A80;border-color:rgba(255,138,128,.55);background:rgba(224,72,62,.12)}
.cutline{position:absolute;top:-.12em;bottom:-.12em;left:0;width:3px;background:var(--lime);box-shadow:0 0 18px rgba(122,193,67,.9);opacity:0}
.capline{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font:800 clamp(12px,1.05vw,15px) var(--sans);letter-spacing:.12em;text-transform:uppercase}
.capline span{padding:8px 14px;border-radius:999px;background:rgba(122,193,67,.14);border:1.5px solid rgba(122,193,67,.6);color:#D9F3C6}
/* Everywhere: letters fly in from all over */
.w-scatter{color:var(--gold-2);font-size:min(13.5vw,26vh)}
/* Get Paid: split-flap letters */
.w-flap{flex-direction:column;gap:.1em;font-size:min(12vw,22vh)}
.w-flap .wline{gap:.05em}
.w-flap .cell{position:relative;display:inline-grid;place-items:center;width:.7em;height:1.02em;padding-top:.05em;border-radius:.06em;background:linear-gradient(#0E1838 50%,#08102A 50%);color:var(--gold-2);box-shadow:inset 0 0 0 1px rgba(217,178,95,.28),inset 0 -.04em 0 rgba(0,0,0,.4),0 .06em 0 rgba(0,0,0,.45);will-change:transform}
.w-flap .cell::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(0,0,0,.45)}
.w-flap .cell.gap{width:.3em;background:none;box-shadow:none}
.w-flap .cell.gap::after{display:none}
.w-flap .shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(241,213,146,.35) 50%,transparent 60%);transform:translateX(-100%);pointer-events:none}

/* proof: the real work lands here */
.cx-proof{position:absolute;left:37vw;right:var(--g);top:calc(var(--sp-hdr) + 62px);bottom:calc(4vh + 112px);container-type:size;pointer-events:none}
.cx-proof img{display:block}
.tagchip{position:absolute;font:800 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:var(--gold-grad);color:var(--night);white-space:nowrap;box-shadow:0 6px 12px -8px rgba(0,0,0,.6)}

/* devices */
.dev-laptop{position:absolute;will-change:transform}
.dev-laptop .lid{position:relative;background:#0D0F14;border-radius:1.9cqw 1.9cqw .5cqw .5cqw;padding:1.3cqw 1.3cqw 1.9cqw;box-shadow:inset 0 0 0 1px #2D3240,inset 0 0 0 .35cqw #0D0F14}
.dev-laptop .lid::before{content:"";position:absolute;top:.5cqw;left:50%;width:.55cqw;height:.55cqw;margin-left:-.27cqw;border-radius:50%;background:#262B36}
.scr{position:relative;background:#fff}
.dev-laptop .scr{aspect-ratio:16/10}
.scr img,.scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.bi-lap .scr img,.bi-ph .scr img{will-change:transform}
.scr .after{clip-path:inset(0 100% 0 0)}
.scr .seam{position:absolute;top:0;bottom:0;left:0;width:.35cqw;margin-left:-.17cqw;background:var(--gold-grad);box-shadow:0 0 2cqw rgba(241,213,146,.9);opacity:0}
.glare{position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.04) 30%,transparent 46%);pointer-events:none}
.dev-laptop .base{position:relative;height:1.7cqw;margin:0 -7%;border-radius:0 0 1.6cqw 1.6cqw;background:linear-gradient(#E3E6EB,#AEB3BC 55%,#7A808B)}
.dev-laptop .base::before{content:"";position:absolute;left:41%;right:41%;top:0;height:.55cqw;border-radius:0 0 .8cqw .8cqw;background:#8C929C}
.dev-shadow{position:absolute;left:-4%;right:-4%;bottom:-3.4cqw;height:4.4cqw;background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.42),transparent 70%);pointer-events:none}
.dev-phone{position:absolute;aspect-ratio:9/19.4;padding:.8cqw;border-radius:3cqw;background:#0D0F14;box-shadow:inset 0 0 0 1px #363C4B,0 10px 16px -10px rgba(0,0,0,.6);will-change:transform}
.dev-phone .scr{width:100%;height:100%;border-radius:2.3cqw;overflow:hidden}
.dev-phone .scr::before{content:"";position:absolute;z-index:3;top:.9cqw;left:50%;width:32%;height:1.9cqw;margin-left:-16%;border-radius:2cqw;background:#0D0F14}
.dev-monitor{position:absolute;will-change:transform}
.dev-monitor .scr{aspect-ratio:16/9;border-radius:.9cqw;border:.9cqw solid #0D0F14;box-shadow:inset 0 0 0 1px #2D3240;background:#000}
.dev-monitor .stand{position:absolute;left:46%;width:8%;top:100%;height:5cqw;background:linear-gradient(90deg,#8C929C,#C9CDD3 50%,#8C929C)}
.dev-monitor .mfoot{position:absolute;left:36%;width:28%;top:calc(100% + 5cqw);height:.9cqw;border-radius:.6cqw;background:linear-gradient(#C9CDD3,#8C929C)}
.dev-monitor .dev-shadow{bottom:-7cqw}
.dev-browser{position:absolute;border-radius:1.2cqw;background:#fff;box-shadow:0 8px 16px -8px rgba(20,36,92,.45),0 0 0 1px rgba(20,36,92,.08);will-change:transform}
.dev-browser .bar{display:flex;align-items:center;gap:.6cqw;padding:1cqw 1.4cqw;border-radius:1.2cqw 1.2cqw 0 0;background:#EEF1F7;font:700 1.25cqw var(--sans);color:#6A7390}
.dev-browser .bar i{width:1cqw;height:1cqw;border-radius:50%;background:#D1D6E2}
.dev-browser .bar i:first-child{background:#F28B82}.dev-browser .bar i:nth-child(2){background:#FDD663}.dev-browser .bar i:nth-child(3){background:#81C995}
.dev-browser .bar span{margin-left:1.2cqw;padding:.4cqw 1.4cqw;border-radius:99px;background:#fff;flex:1}

/* ---------- 01 Build It ---------- */
.bi-lap{left:17cqw;top:21cqh;width:64cqw}
.bi-ph{left:2cqw;bottom:0;width:15.5cqw}
.looks .lk{position:absolute;width:23cqw;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:.9cqw;border:.4cqw solid #fff;box-shadow:0 8px 14px -8px rgba(0,0,0,.5);will-change:transform}
.looks .lk:nth-child(1){left:3cqw;top:12cqh;transform:rotate(-13deg)}
.looks .lk:nth-child(2){left:13cqw;top:5cqh;transform:rotate(-8deg)}
.looks .lk:nth-child(3){left:24cqw;top:1cqh;transform:rotate(-4deg)}
.looks .lk:nth-child(4){left:35cqw;top:0;transform:rotate(-1deg)}
.looks .lk:nth-child(5){left:46cqw;top:0;transform:rotate(2deg)}
.looks .lk:nth-child(6){left:57cqw;top:2cqh;transform:rotate(5deg)}
.looks .lk:nth-child(7){left:67cqw;top:6cqh;transform:rotate(9deg)}
.looks .lk:nth-child(8){left:76cqw;top:13cqh;transform:rotate(13deg)}
.bi-lap + .bi-ph{z-index:2}
.t-before,.t-after{left:19cqw;top:15cqh;z-index:3}
.t-looks{right:0;top:-1cqh;background:#fff;color:#14245C}

/* ---------- 02 Get Seen ---------- */
.gs-lap{left:0;top:9cqh;width:60cqw}
.thumbs{position:absolute;left:63cqw;right:0;top:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:1.4cqw 1.4cqw}
.th{position:relative;margin:0;border-radius:.8cqw;background:#fff;box-shadow:0 6px 12px -6px rgba(0,0,0,.6);will-change:transform}
.th img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.8cqw .8cqw 0 0}
.th figcaption{border-radius:0 0 .8cqw .8cqw;padding:.55cqw .7cqw .65cqw;font:800 1.15cqw/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#2B62D9;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th figcaption b{color:#8A6516;font-weight:800}
.th:nth-child(7){grid-column:1 / span 2;width:calc(50% - .7cqw);justify-self:center}
.ftf-card{position:absolute;left:27cqw;top:62cqh;width:36cqw;padding:2cqw 2.2cqw;border-radius:1.4cqw;background:#14245C;border:1.5px solid var(--gold);color:var(--cream);box-shadow:0 10px 18px -10px rgba(0,0,0,.7);will-change:transform}
.ftf-card .k{font:800 1.3cqw var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.ftf-card .t{font-family:var(--serif);font-size:2.4cqw;line-height:1.12;margin:.8cqw 0 1cqw}
.ftf-card .j{display:flex;gap:.6cqw}
.ftf-card .j span{font:800 1.1cqw var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:.4cqw .9cqw;border-radius:99px;background:rgba(43,98,217,.3);border:1px solid rgba(43,98,217,.7)}
.gs-lap ~ .t-real{left:2cqw;top:2cqh}

/* ---------- 03 The Edit Box ---------- */
.ed-mon{left:0;top:0;width:58cqw}
.edtl{position:absolute;left:0;right:0;bottom:0;height:19cqh;padding:1cqw 1.2cqw;border-radius:1.2cqw;background:#121729;border:1px solid #232B45;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:.8cqw;will-change:transform}
.trk{display:flex;align-items:center;gap:1cqw;margin:0;min-width:0}
.trk b{flex:none;width:3cqw;font:800 1.2cqw var(--sans);color:#6C7699;letter-spacing:.1em}
.strip{flex:1;min-width:0;display:flex;gap:.3cqw}
.strip img{flex:1;min-width:0;height:6.4cqh;object-fit:cover;will-change:transform,opacity}
.caps{flex:1;min-width:0;display:flex;gap:.4cqw}
.caps i{will-change:transform;flex:var(--w);height:2.6cqh;border-radius:.4cqw;background:rgba(122,193,67,.35);border:1px solid rgba(122,193,67,.7)}
.edtl .ph{will-change:transform;position:absolute;top:.6cqw;bottom:.6cqw;left:5.2cqw;width:2px;background:var(--cx-red);box-shadow:0 0 10px rgba(224,72,62,.8)}
.stopwatch{position:absolute;left:61cqw;right:0;top:calc(2 * (39cqw * 9 / 16) + 6cqw);display:flex;align-items:center;gap:1cqw;padding:1cqw 1.4cqw;border-radius:1.2cqw;background:rgba(122,193,67,.1);border:1.5px solid rgba(122,193,67,.55);color:var(--cream);will-change:transform}
.stopwatch i{flex:none;width:1.2cqw;height:1.2cqw;border-radius:50%;background:var(--lime);box-shadow:0 0 0 .5cqw rgba(122,193,67,.25)}
.stopwatch b{font-family:var(--disp);font-weight:400;font-size:4.2cqw;line-height:1}
.stopwatch span{font:700 1.25cqw/1.3 var(--sans);color:var(--cream-2)}
.ed-mon ~ .t-made{left:2cqw;top:-4cqh}

/* ---------- 04 Everywhere ---------- */
.cx-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--tc,12),1fr);grid-auto-rows:calc(100vw / var(--tc,12));align-content:center;overflow:hidden;pointer-events:none;opacity:.55}
.cx-tiles i{display:grid;place-items:center;will-change:transform}
.cx-tiles i::before{content:"";width:62%;height:62%;background:#C9D6F2;transform:rotate(45deg);border-radius:6%}
.cx-tiles i:nth-child(2n)::before{width:100%;height:100%;transform:none;border-radius:0;background:#E3E8F3}
.ev-blog{left:0;top:5cqh;width:50cqw}
.ev-blog .pg{padding:1.6cqw}
.ev-blog .feat{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:.6cqw}
.ev-blog .ln{height:1.1cqw;border-radius:99px;background:#E1E5EE;margin-top:1.1cqw}
.ev-blog .w80{width:80%}.ev-blog .w60{width:60%}
.ev-blog .emb{position:relative;margin-top:1.4cqw;width:52%}
.ev-blog .emb img,.ev-src img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.6cqw}
.ev-blog .emb i,.ev-src i{position:absolute;left:50%;top:50%;width:4.4cqw;height:3.1cqw;margin:-1.55cqw 0 0 -2.2cqw;border-radius:.8cqw;background:#E0483E;color:#fff;font-style:normal;font-size:1.5cqw;display:grid;place-items:center}
.ev-blog .rel{display:flex;gap:.8cqw;margin-top:1.4cqw}
.ev-blog .rel span{font:800 1.05cqw var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#2B62D9;padding:.5cqw 1cqw;border-radius:99px;background:#E9EEF9}
.ev-src{position:absolute;left:33cqw;top:57cqh;width:21cqw;border-radius:1cqw;border:.45cqw solid #fff;background:#fff;box-shadow:0 10px 16px -10px rgba(20,36,92,.55);will-change:transform;z-index:3}
.ev-src span{position:absolute;left:1cqw;top:1cqw;font:800 1.2cqw var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:.4cqw 1cqw;border-radius:99px;background:#14245C;color:#fff}
.ev-pin{position:absolute;width:13.5cqw;aspect-ratio:2/3;object-fit:cover;border-radius:.8cqw;box-shadow:0 8px 14px -8px rgba(20,36,92,.55);will-change:transform}
.ev-pin.pin-a{left:55cqw;top:0;transform:rotate(-4deg)}
.ev-pin.pin-b{left:70cqw;top:3cqh;transform:rotate(2deg)}
.ev-pin.pin-c{left:85cqw;top:0;transform:rotate(5deg)}
.ev-chips{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:.8cqw}
.ev-chips span{font:800 1.25cqw var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:.7cqw 1.3cqw;border-radius:99px;background:#14245C;color:#fff;will-change:transform}
.ev-blog ~ .t-real{right:0;bottom:7cqh;background:#fff;color:#14245C}

/* ---------- 05 Get Paid: the Live Challenge ---------- */
.gp-plans{position:absolute;left:0;top:4cqh;width:26cqw;display:grid;gap:1cqw;will-change:transform}
.gp-plans .k{font:800 1.3cqw var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);margin-bottom:.4cqw}
.gp-plans span{display:block;padding:1.2cqw 1.4cqw;border-radius:1cqw;background:rgba(246,241,228,.06);border:1.5px solid rgba(217,178,95,.45);font:800 1.5cqw var(--sans);color:var(--cream)}
.gp-plans span.on{background:var(--gold-grad);color:#0B1430;border-color:transparent}
.gp-ph{left:29.5cqw;top:0;width:27cqw}
.gp-ph .scr img{object-position:50% 20%}
.gp-live{position:absolute;z-index:4;left:1.4cqw;top:4.2cqw;display:flex;align-items:center;gap:.6cqw;padding:.5cqw 1.1cqw;border-radius:.6cqw;background:#E0483E;color:#fff;font:800 1.2cqw var(--sans);letter-spacing:.14em;text-transform:uppercase}
.gp-live i{width:.8cqw;height:.8cqw;border-radius:50%;background:#fff;animation:gp-blink 1.2s steps(1) infinite}
@keyframes gp-blink{50%{opacity:.25}}
.gp-day{position:absolute;z-index:4;right:1.4cqw;top:4.2cqw;padding:.5cqw 1.1cqw;border-radius:.6cqw;background:rgba(9,12,23,.72);color:#fff;font:800 1.15cqw var(--sans);letter-spacing:.06em}
.gp-chat{position:absolute;z-index:4;left:1.4cqw;right:5cqw;bottom:5.5cqw;height:21cqw;overflow:hidden;-webkit-mask-image:linear-gradient(to top,#000 70%,transparent);mask-image:linear-gradient(to top,#000 70%,transparent)}
.gp-chat p{position:absolute;left:0;bottom:0;max-width:100%;padding:.7cqw 1.1cqw;border-radius:1cqw;background:rgba(9,12,23,.66);color:#fff;font:700 1.2cqw var(--sans);white-space:nowrap;opacity:0;animation:gp-chat 7.5s linear infinite}
.gp-chat p:nth-child(2){animation-delay:1.5s}.gp-chat p:nth-child(3){animation-delay:3s}.gp-chat p:nth-child(4){animation-delay:4.5s}.gp-chat p:nth-child(5){animation-delay:6s}
@keyframes gp-chat{0%{transform:translateY(0);opacity:0}6%{opacity:1}55%{opacity:1}75%,100%{transform:translateY(-18cqw);opacity:0}}
.gp-hearts{position:absolute;z-index:4;right:1.2cqw;bottom:5cqw;width:5cqw;height:30cqw;pointer-events:none}
.gp-hearts i{position:absolute;bottom:0;left:50%;font-style:normal;font-size:2.4cqw;color:#FF6F91;opacity:0;animation:gp-heart 3.6s ease-in infinite}
.gp-hearts i:nth-child(2n){color:var(--gold-2)}
.gp-hearts i:nth-child(2){animation-delay:.6s}.gp-hearts i:nth-child(3){animation-delay:1.2s}.gp-hearts i:nth-child(4){animation-delay:1.8s}.gp-hearts i:nth-child(5){animation-delay:2.4s}.gp-hearts i:nth-child(6){animation-delay:3s}
@keyframes gp-heart{0%{transform:translate(-50%,0) scale(.6);opacity:0}12%{opacity:1}100%{transform:translate(calc(-50% - 2cqw),-28cqw) scale(1.15);opacity:0}}
.gp-ex{position:absolute;z-index:4;left:1.4cqw;bottom:1.6cqw;font:700 .95cqw var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.gp-docs{position:absolute;left:60cqw;right:0;top:4cqh;height:72cqh}
.doc{position:absolute;border-radius:1cqw;box-shadow:0 8px 16px -8px rgba(0,0,0,.6);will-change:transform}
.doc .dk{font:800 1.1cqw var(--sans);letter-spacing:.14em;text-transform:uppercase}
.doc .ln{height:.9cqw;border-radius:99px;margin-top:1cqw}
.doc .ln.s{width:62%}
.d-sheet{left:0;top:0;width:24cqw;padding:1.8cqw;background:#F7F5F0;color:#14245C;transform:rotate(-3deg)}
.d-sheet .dk{color:#A87E2E;margin-bottom:1cqw}
.d-sheet .row{display:flex;align-items:center;gap:1cqw;margin:0 0 1cqw}
.d-sheet .row i{flex:none;width:1.5cqw;height:1.5cqw;border-radius:.35cqw;border:1.5px solid #14245C}
.d-sheet .row b{flex:1;height:.9cqw;border-radius:99px;background:#DDE2EC}
.d-guide{left:19cqw;top:5cqh;width:17cqw;height:31cqh;padding:2cqw 1.6cqw;background:linear-gradient(160deg,#1E3378,#0E1838);border:1.5px solid var(--gold);color:var(--cream);transform:rotate(5deg)}
.d-guide .dk{color:var(--gold-2)}
.d-guide .gt{font-family:var(--serif);font-size:2.3cqw;line-height:1.1;margin:1.2cqw 0 1.4cqw}
.d-guide .ln{background:rgba(246,241,228,.22)}
.d-copy{left:1cqw;top:41cqh;width:27cqw;padding:1.7cqw;background:#fff;color:#14245C;transform:rotate(2deg)}
.d-copy .dk{color:#2B62D9}
.d-copy .ln{background:#E1E5EE}
.d-copy span{display:inline-block;margin-top:1.3cqw;padding:.5cqw 1.2cqw;border-radius:99px;background:var(--gold-grad);color:#0B1430;font:800 1cqw var(--sans);letter-spacing:.1em;text-transform:uppercase}
.d-ideas{left:27cqw;top:44cqh;width:13cqw;padding:0;box-shadow:none;background:none}
.d-ideas p{margin:0 0 .9cqw;padding:1.1cqw 1.2cqw;border-radius:.3cqw;font:800 1.15cqw var(--sans);color:#3B3200;background:#F7E58A;box-shadow:0 6px 12px -6px rgba(0,0,0,.6)}
.d-ideas p:nth-child(1){transform:rotate(-4deg)}.d-ideas p:nth-child(2){background:#FFB3C7;color:#4A1626;transform:rotate(3deg)}.d-ideas p:nth-child(3){background:#BFE3FF;color:#0E2B47;transform:rotate(-2deg)}
.gp-days{position:absolute;left:0;right:0;bottom:0;display:flex;gap:1cqw}
.gp-days p{flex:1;display:flex;align-items:center;justify-content:space-between;margin:0;padding:1cqw 1.4cqw;border-radius:1cqw;background:rgba(246,241,228,.06);border:1.5px solid rgba(246,241,228,.18);font:800 1.35cqw var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
.gp-days i{font-style:normal;font-size:1.9cqw;opacity:.35;filter:grayscale(1)}
.gp-ph ~ .t-skills{left:60cqw;top:73cqh}
.coins{position:absolute;inset:0;pointer-events:none}
.coins i{position:absolute;width:4.2cqw;height:4.2cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF3CF,#E2BC66 45%,#A87E2E);box-shadow:inset 0 0 0 .3cqw rgba(168,126,46,.6);opacity:0}

/* docked copy */
.cx-copy{position:absolute;left:var(--g);top:calc(var(--sp-hdr) + 78px);width:calc(37vw - var(--g) - 3vw);color:var(--cx-tx)}
/* the box name, big: "The Build It Box" (Bebas, "Box" in gold) */
.cx-name{font-family:var(--disp);font-weight:400;font-size:min(5.4vw,9.4vh,100px);line-height:.86;letter-spacing:.01em;text-transform:uppercase;margin:0 0 14px;color:var(--cx-tx)}
.bxw{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none!important}
.chap[data-theme="cream"] .bxw,.light .bxw{background:none;color:#2B62D9;-webkit-text-fill-color:#2B62D9}
/* text stands out from busy backgrounds: a soft glow in the background color behind the words */
/* (on the light Everywhere world the diamond pattern fades out behind the words; a cheap gradient, no blurred shadows) */
.cx-tilefade{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;background:linear-gradient(90deg,#F4EFE3 0,#F4EFE3 calc(37vw - 2vw),rgba(244,239,227,0) calc(37vw + 6vw))}
@media (max-width:760px){.cx-tilefade{background:linear-gradient(180deg,#F4EFE3 0,#F4EFE3 calc(var(--sp-hdr) + 64vw),rgba(244,239,227,0) calc(var(--sp-hdr) + 80vw))}}
.cx-kick{font:800 12px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.chap[data-theme="cream"] .cx-kick{color:var(--gold-deep)}
.cx-copy h3{font-family:var(--serif);font-weight:600;font-size:clamp(22px,1.9vw,32px);line-height:1.1;margin:0 0 12px}
.cx-copy p:not(.cx-kick){font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--cx-tx2)}
.cx-copy .cx-note{margin-top:14px;font:800 12px var(--sans)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--cx-tx)!important;opacity:.92}

/* the time track */
.cx-track{position:absolute;left:var(--g);right:var(--g);bottom:4vh;height:96px}
.cx-track-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px;font:800 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#4A4842}
.cx-readout{font-family:var(--disp);font-weight:400;font-size:34px;letter-spacing:.01em;line-height:.9;color:var(--cx-red);font-variant-numeric:tabular-nums}
.cx-bars{display:flex;gap:4px;height:38px}
.cx-bars span{will-change:transform;flex:var(--w);min-width:0;display:flex;align-items:center;padding:0 10px;border-radius:5px;background:#BDB8AE;color:#2A2C33;font:700 12px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:0 50%;transform:scaleX(0)}
.cx-bars span:nth-child(2n){background:#B0AA9F}
.cx-playhead{position:absolute;left:0;top:26px;bottom:-6px;width:2px;background:var(--cx-red);box-shadow:0 0 12px rgba(224,72,62,.7)}
.cx-playhead::before{content:"";position:absolute;top:-8px;left:-6px;border:7px solid transparent;border-top:9px solid var(--cx-red);border-bottom:0}
.cx-receipt{position:absolute;left:0;right:0;bottom:-2px;display:grid;gap:6px;color:var(--cx-tx)}
.cx-receipt p{display:flex;align-items:center;gap:12px;margin:0;font:700 16px var(--sans);opacity:0}
.cx-receipt span{flex:none;width:138px;font:800 11px var(--sans);letter-spacing:.16em;text-transform:uppercase}
.r-old{height:34px;padding:0 12px 0 0;border-radius:6px;background:rgba(246,241,228,.1)}
.chap[data-theme="cream"] .r-old{background:rgba(20,36,92,.08)}
.r-old span{padding-left:12px}
.r-new b{display:block;height:34px;width:16%;border-radius:6px;background:var(--gold-grad);box-shadow:0 0 12px rgba(241,213,146,.4);transform-origin:0 50%}
.r-new em{font-style:normal;font-weight:800}

/* outro */
.cx-outro{background:var(--night);color:var(--cream);text-align:center;padding:12vh 0 14vh}
.cx-outro h2{font-family:var(--bebas);font-weight:400;text-transform:uppercase;font-size:clamp(54px,6vw,108px);line-height:.9;letter-spacing:.005em;max-width:16ch;margin:12px auto 0}
.cx-outro .lead{max-width:56ch;margin:18px auto 0;font-size:clamp(17px,1.5vw,21px);color:var(--cream-2)}
.cx-outro .kicker{color:var(--gold)}

/* ---------- phones ---------- */
@media (max-width:760px){
  .jx{height:220vh}
  .jx-row{font-size:19vw}
  .jx-strike{height:3vw;margin-top:-1.5vw}
  .jx-ask{font-size:23vw}
  .jx-sub{font-size:26px}
  .jx-gift{font-size:15px}
  .chap{height:280vh}
  .cx-top{top:calc(var(--sp-hdr) + 2px)}
  .cx-chap{font-size:12px;gap:8px}.cx-chap b{font-size:30px}
  .cx-chap .cn-long{display:none}.cx-chap .cn-short{display:inline}
  .ppp.sm span{font-size:9px;padding:4px 8px;letter-spacing:.12em}
  .cx-old{padding-top:calc(var(--sp-hdr) + 64px)}
  .cx-problem{font-size:12.4vw;max-width:none}
  .cx-sub{font-size:16px}
  .cx-num{font-size:56vw;bottom:20vh}
  .cx-old .cx-strike{top:calc(var(--sp-hdr) + 64px + 15vw);width:92vw;height:10px}
  .cx-cmd{padding:13px 18px;font-size:16px;gap:8px}
  .cx-word{font-size:22vw;padding-bottom:16vh}
  .w-spot{font-size:13.5vw}
  .w-blocks{font-size:13.6vw}
  .w-cut{font-size:9.6vw}
  .w-scatter{font-size:14.5vw}
  .w-flap{font-size:13.5vw}
  .capline{font-size:10px;gap:6px}.capline span{padding:6px 9px}
  .cx-copy{top:calc(var(--sp-hdr) + 46px);left:var(--g);right:var(--g);width:auto}
  .cx-name{font-size:14.5vw;margin:0 0 8px}
  .cx-copy h3{font-size:19px;margin:0}
  .cx-copy p:not(.cx-kick){display:none}
  .cx-kick{font-size:11px}
  .cx-proof{left:var(--g);right:var(--g);top:calc(var(--sp-hdr) + 150px);bottom:calc(3vh + 104px)}
  .cx-track{bottom:3vh;height:90px}
  .cx-readout{font-size:24px}
  .cx-bars{height:26px;gap:3px}
  .cx-bars span{font-size:0;padding:0}
  .cx-receipt p{font-size:13px;gap:8px}
  .cx-receipt span{width:76px;font-size:9px;letter-spacing:.08em;line-height:1.1}
  .r-old,.r-new b{height:28px}
  .tagchip{font-size:9px;padding:5px 9px;letter-spacing:.12em}
  /* per-chapter phone layouts */
  .bi-lap{left:4cqw;top:24cqh;width:92cqw}
  .bi-ph{left:auto;right:2cqw;bottom:0;width:26cqw}
  .looks .lk{width:34cqw}
  .looks .lk:nth-child(n+6){display:none}
  .looks .lk:nth-child(1){left:0;top:6cqh}.looks .lk:nth-child(2){left:16cqw;top:2cqh}.looks .lk:nth-child(3){left:33cqw;top:0}
  .looks .lk:nth-child(4){left:50cqw;top:2cqh}.looks .lk:nth-child(5){left:66cqw;top:6cqh}
  .t-before,.t-after{left:5cqw;top:16cqh}
  .t-looks{display:none}
  .gs-lap{left:0;top:0;width:100cqw}
  .thumbs{left:0;right:0;top:auto;bottom:0;grid-template-columns:repeat(4,1fr);gap:2cqw}
  .th figcaption{display:none}
  .th:nth-child(n+5){display:none}
  .ftf-card{left:8cqw;right:8cqw;width:auto;bottom:21cqw;padding:3cqw 3.6cqw}
  .ftf-card .k{font-size:2.6cqw}.ftf-card .t{font-size:4.4cqw}.ftf-card .j span{font-size:2.2cqw;padding:.8cqw 1.8cqw}
  .gs-lap ~ .t-real{display:none}
  .ed-mon{width:100cqw}
    .stopwatch{left:0;right:auto;top:auto;bottom:30cqh;padding:2cqw 3cqw;gap:2cqw}
  .stopwatch b{font-size:8cqw}.stopwatch span{font-size:2.8cqw;max-width:44cqw}.stopwatch i{width:2.4cqw;height:2.4cqw}
  .edtl{height:24cqh}
  .trk b{font-size:2.6cqw;width:6cqw}
  .ed-mon ~ .t-made{top:auto;bottom:47cqh;left:auto;right:0}
  .ev-blog{left:0;top:0;width:66cqw}
  .ev-pin{width:26cqw}
  .ev-pin.pin-a{left:auto;right:0;top:2cqh}.ev-pin.pin-b{left:auto;right:6cqw;top:30cqh}.ev-pin.pin-c{display:none}
  .ev-src{left:24cqw;top:30cqh;width:48cqw}
  .ev-chips span{font-size:2.4cqw;padding:1.2cqw 2.2cqw}
  .ev-blog ~ .t-real{display:none}
  .gp-plans{left:0;right:0;top:0;width:auto;display:flex;flex-wrap:wrap;gap:1.6cqw}
  .gp-plans .k{display:none}
  .gp-plans span{padding:1.6cqw 2.4cqw;font-size:2.7cqw}
  .gp-ph{left:27cqw;top:14cqh;width:46cqw}
  .gp-live,.gp-day{font-size:2.6cqw;top:8cqw;padding:1cqw 2cqw}
  .gp-live{left:3cqw}.gp-day{right:3cqw}
  .gp-chat{left:3cqw;right:9cqw;bottom:10cqw;height:40cqw}
  .gp-chat p{font-size:2.6cqw;padding:1.4cqw 2.2cqw}
  .gp-hearts{right:2cqw;bottom:9cqw;width:9cqw;height:55cqw}
  .gp-hearts i{font-size:4.6cqw}
  .gp-ex{font-size:2cqw;left:3cqw;bottom:3cqw}
  .gp-docs,.gp-ph ~ .t-skills{display:none}
  .gp-days{gap:1.4cqw}
  .gp-days p{flex-direction:column;gap:1cqw;padding:1.6cqw .8cqw;font-size:2.4cqw}
  .gp-days i{font-size:4cqw}
}
@media (prefers-reduced-motion:reduce){.cx-cmd .caret{animation:none}}

/* the site header reads on the grey and cream worlds too */
.hdr{transition:background .35s,color .35s}
.hdr-grey .hdr{background:linear-gradient(to bottom,rgba(220,216,207,.96),rgba(220,216,207,0));color:#1E2027}
.hdr-cream .hdr{background:linear-gradient(to bottom,rgba(244,239,227,.96),rgba(244,239,227,0));color:#14245C}
.hdr-grey .logo small,.hdr-cream .logo small{color:#A87E2E}
.hdr-light .hdr{background:linear-gradient(to bottom,rgba(247,245,240,.97),rgba(247,245,240,0));color:var(--ink)}
.hdr-light .logo small{color:#8A6516}
/* Everywhere: the pasted-again ghost copies of the headline */
.cx-problem .ghost{position:absolute;left:0;top:0;width:100%;color:rgba(30,32,39,.9);pointer-events:none;z-index:-1}

/* the waitlist pieces fade in on their own layers: cheaper first paint than fading them inside the page */
#waitlist [data-reveal],#waitlist .w{will-change:transform,opacity}

/* phones: all five boxes show in the box-reveal section, and the waitlist form gets more width */
@media (max-width:760px){
  .labels{grid-template-columns:1fr 1fr;gap:6px;bottom:2.5vh}
  .labels .label:nth-child(5){grid-column:1 / span 2}
  .label{padding:9px 10px}
  .label b{font-size:21px;margin:2px 0 3px}
  .label p{font-size:11.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .form-card{padding:22px 12px 8px}
}

/* where the boxes run: said early */
.hero-note{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:7px 14px;border-radius:999px;background:rgba(11,20,48,.78);border:1px solid rgba(217,178,95,.4);font:700 13px var(--sans);letter-spacing:.03em;color:var(--cream);white-space:nowrap}
.hero-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)}
.reveal-sub{margin-top:10px;font:700 clamp(13px,1.1vw,16px) var(--sans);letter-spacing:.04em;color:var(--cream-2)}
@media (max-width:760px){.hero-note{font-size:11px;margin-top:10px;padding:6px 11px;white-space:normal}.reveal-sub{font-size:12px;padding:0 var(--g)}}

/* ---------- you, in every box ---------- */
.me-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.me-v.on{opacity:1}
/* Build It: a round video bubble of you, walking through the new page */
.me-bubble{position:absolute;z-index:4;right:2.4%;bottom:4%;width:23%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:.35cqw solid #fff;box-shadow:0 8px 16px -8px rgba(0,0,0,.6);background:#14245C;opacity:0;will-change:transform}
.me-bubble img{width:100%;height:100%;object-fit:cover}
.me-bubble .ring{position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 0 .3cqw rgba(122,193,67,.9);animation:me-ring 1.6s ease-out infinite}
@keyframes me-ring{0%{box-shadow:0 0 0 0 rgba(122,193,67,.75)}100%{box-shadow:0 0 0 1.4cqw rgba(122,193,67,0)}}
.me-bubble .tag{position:absolute;left:50%;bottom:-1.6cqw;transform:translateX(-50%);white-space:nowrap;font:800 .85cqw var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:.35cqw .8cqw;border-radius:99px;background:#0D0F14;color:#fff}
/* Get Seen: a phone in camera mode, you filming "Film this first" */
.me-film{left:auto;right:0;top:6cqh;width:21cqw;z-index:3}
.me-film .scr img{object-position:50% 18%}
.me-film .rec{position:absolute;z-index:4;left:1.2cqw;top:4.6cqw;display:flex;align-items:center;gap:.5cqw;margin:0;padding:.45cqw .9cqw;border-radius:.6cqw;background:rgba(9,12,23,.72);color:#fff;font:800 1.05cqw var(--sans);letter-spacing:.12em}
.me-film .rec i{width:.8cqw;height:.8cqw;border-radius:50%;background:#E0483E;animation:gp-blink 1s steps(1) infinite}
.me-film .rec b{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.frame-guides{position:absolute;z-index:3;inset:12% 9% 16%;margin:0;pointer-events:none}
.frame-guides i{position:absolute;width:2.2cqw;height:2.2cqw;border-color:rgba(255,255,255,.85);border-style:solid;border-width:0}
.frame-guides i:nth-child(1){left:0;top:0;border-top-width:2px;border-left-width:2px}
.frame-guides i:nth-child(2){right:0;top:0;border-top-width:2px;border-right-width:2px}
.frame-guides i:nth-child(3){left:0;bottom:0;border-bottom-width:2px;border-left-width:2px}
.frame-guides i:nth-child(4){right:0;bottom:0;border-bottom-width:2px;border-right-width:2px}
.me-film .shoot{position:absolute;z-index:4;left:1.2cqw;right:1.2cqw;bottom:4cqw;margin:0;padding:.6cqw .9cqw;border-radius:.7cqw;background:rgba(9,12,23,.72);color:#fff;font:700 1.05cqw var(--sans);text-align:center}
.me-film .gp-ex{bottom:1.4cqw}
/* Get Seen layout with the camera phone: thumbnails shift left, the laptop shrinks a little */
#ch-seen .gs-lap{width:52cqw}
#ch-seen .thumbs{left:54.5cqw;right:23.5cqw;grid-template-columns:1fr}
#ch-seen .th:nth-child(n+5){display:none}
#ch-seen .th:nth-child(7){width:auto;grid-column:auto}
#ch-seen .ftf-card{left:16cqw;width:34cqw}
/* The Edit Box: the same clip of you, raw then edited */
.rawedit{position:absolute;left:61cqw;right:0;top:0;display:grid;gap:1.4cqw}
.rawedit figure{position:relative;margin:0;border-radius:1cqw;overflow:hidden;aspect-ratio:16/9;background:#0B1022;box-shadow:0 8px 14px -8px rgba(0,0,0,.7);will-change:transform}
.rawedit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rawedit figcaption{position:absolute;z-index:3;left:1cqw;top:1cqw;font:800 1.1cqw var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:.4cqw .9cqw;border-radius:99px;background:rgba(9,12,23,.8);color:var(--cream)}
.rawedit .edited figcaption{background:var(--gold-grad);color:#0B1430}
.rawedit .l3{position:absolute;z-index:3;left:1.2cqw;bottom:4.4cqw;margin:0;padding:.6cqw 1.1cqw .6cqw .9cqw;border-left:.4cqw solid var(--gold);border-radius:.4cqw;background:linear-gradient(90deg,#14245C,#1E3A8A);color:#fff;opacity:0}
.rawedit .l3 b{display:block;font-family:var(--serif);font-size:1.5cqw;line-height:1.1}
.rawedit .l3 small{font:800 .8cqw var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.rawedit .cap{position:absolute;z-index:3;left:6%;right:6%;bottom:1.1cqw;margin:0;text-align:center;font:800 1.3cqw/1.3 var(--sans);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.rawedit .cap span{opacity:.15}
.rawedit .cap span.on{opacity:1;color:#FFE27A}
.rawedit .broll{position:absolute;z-index:2;right:1cqw;top:1cqw;width:30%;aspect-ratio:16/9;border-radius:.5cqw;border:2px solid #fff;background:url(img/bx/bl1.webp) center/cover;opacity:0}
/* Everywhere: your posts, with your face */
.me-posts{position:absolute;left:56cqw;right:0;top:50cqh;display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw}
.post{margin:0;padding:1.3cqw;border-radius:1cqw;background:#fff;color:#14245C;box-shadow:0 8px 14px -8px rgba(20,36,92,.5);will-change:transform}
.post:nth-child(1){transform:rotate(-2deg)}.post:nth-child(2){transform:rotate(2deg)}
.post .who{display:flex;align-items:center;gap:.7cqw;margin:0 0 .8cqw;font:800 1.15cqw var(--sans)}
.post .who img{width:2.6cqw;height:2.6cqw;border-radius:50%;object-fit:cover}
.post .who small{font-weight:600;color:#8A93AE}
.post .pl{height:.8cqw;border-radius:99px;background:#E1E5EE;margin:0 0 .6cqw}
.post .pl.s{width:60%}
.post .pimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:.6cqw;margin-top:.4cqw}
.post .re{display:flex;gap:1.2cqw;margin:.7cqw 0 0;font:800 1.05cqw var(--sans);color:#E0483E}
.post .re span:nth-child(2){color:#2B62D9}
@media (max-width:760px){
  .me-bubble{width:26%}.me-bubble .tag{display:none}
  .me-film{display:none}
  #ch-seen .gs-lap{width:100cqw}
  #ch-seen .thumbs{left:0;right:0;grid-template-columns:repeat(4,1fr)}
  #ch-seen .ftf-card{left:8cqw;width:auto}
  .rawedit{left:0;right:0;width:auto;top:auto;bottom:27cqh;grid-template-columns:1fr 1fr;gap:2.4cqw}
  .rawedit figcaption{font-size:2cqw}.rawedit .l3,.rawedit .broll{display:none}.rawedit .cap{font-size:2.2cqw}
  #ch-edit .stopwatch{display:none}
  #ch-edit .ed-mon ~ .t-made{bottom:50cqh}
  .me-posts{left:0;right:0;top:auto;bottom:12cqh;gap:3cqw}
  .post{padding:2.4cqw}.post .who{font-size:2.4cqw}.post .who img{width:5cqw;height:5cqw}.post .re{font-size:2.2cqw}
  .post .pimg{aspect-ratio:16/9}
}

/* waitlist: solid gold number dots and a solid-edged tag paint faster than a gradient and a dashed edge */
#waitlist .perk i{background:#D9B25F}
#waitlist .draft{border-style:solid}

/* the navy-to-cream band gets its own layer, and each light section paints on its own (faster first paint) */
.melt{will-change:transform}
.light.sec{contain:paint}

/* waitlist form: reserved space + a quiet loading line until GoHighLevel shows the form */
.form-wait{display:flex;align-items:center;gap:10px;font:700 14px var(--sans);color:var(--ink-2)}
.form-wait i{width:16px;height:16px;border-radius:50%;border:2px solid #E3DCCB;border-top-color:var(--gold-deep);animation:fw-spin .8s linear infinite}
@keyframes fw-spin{to{transform:rotate(360deg)}}
.form-slot:has(iframe) .form-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.form-slot iframe{position:relative;z-index:1;background:#fff;height:var(--form-h,556px)!important;overflow:hidden!important}
.form-slowlink{display:none;position:absolute;z-index:2;left:0;right:0;top:calc(50% + 34px);text-align:center;font:700 14px var(--sans);color:var(--ink-2)}
.form-slowlink .btn{margin-left:8px}
.form-slow .form-slowlink{display:block}
@media (max-width:760px){.form-slot{min-height:616px}.form-slot iframe{height:var(--form-h,616px)!important}.form-slowlink .btn{display:flex;width:max-content;margin:10px auto 0}}

/* FAQ: Aquita answers each one */
details .ans{display:flex;gap:14px;align-items:flex-start;margin-top:14px}
.ask-me{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:2px solid var(--gold);box-shadow:0 6px 12px -6px rgba(14,22,48,.5)}
details .ans p{margin:0;padding:12px 16px;border-radius:4px 16px 16px 16px;background:var(--pale);color:var(--ink)}
details[open] .ask-me{animation:ask-pop .5s cubic-bezier(.2,.9,.3,1.35) both}
details[open] .ans p{animation:ask-bubble .45s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes ask-pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes ask-bubble{from{transform:translateX(-10px);opacity:0}to{transform:none;opacity:1}}

/* (old price climb styles, no longer used on the page) */
.bump-count{display:flex;align-items:baseline;gap:12px;margin-top:40px;font:800 14px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2)}
.bump-count .bc-n{color:var(--cream);letter-spacing:.04em}
.bump-count .bc-p{font-family:var(--serif);font-weight:600;font-size:clamp(34px,3.4vw,52px);letter-spacing:0;text-transform:none;color:var(--gold-2);font-variant-numeric:tabular-nums}
.bump-count + .stairs{margin-top:22px}
.step .coin{position:absolute;right:10px;top:12px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF3CF,#E2BC66 45%,#A87E2E);box-shadow:inset 0 0 0 2px rgba(168,126,46,.55);opacity:0;transform:translateY(-34px) scale(.6);transition:transform .45s cubic-bezier(.2,.9,.3,1.4),opacity .25s}
.step.lit .coin{opacity:1;transform:none}
@media (max-width:760px){.step .coin{width:13px;height:13px;right:5px;top:6px}.bump-count{margin-top:28px;font-size:11px;gap:8px;flex-wrap:wrap}}
.sp-jump .step .coin{transition:none}

/* waitlist: a peek inside the Seasonal Sales Visual Vault (three real screenshots fan out) */
.vault-peek{position:relative;height:clamp(230px,19vw,290px);margin-top:26px}
.vp{position:absolute;top:0;left:50%;width:62%;margin:0 0 0 -31%;transition:transform .9s cubic-bezier(.2,.9,.3,1.15);will-change:transform}
.vp img{display:block;width:100%;height:auto;border-radius:10px;border:1.5px solid rgba(217,178,95,.55);box-shadow:0 10px 18px -10px rgba(0,0,0,.7)}
.vp1{transform:rotate(-2deg)}.vp3{transform:rotate(2deg)}.vp2{transform:translateY(8px)}
.vault-peek.fan .vp1{transform:translateX(-40%) rotate(-7deg)}
.vault-peek.fan .vp3{transform:translateX(40%) rotate(7deg)}
.vault-peek.fan .vp2{transform:translateY(14px) scale(1.04)}
.vp-cap{position:absolute;left:0;right:0;bottom:0;margin:0;text-align:center;font:700 13px var(--sans);color:var(--cream-2)}
.vp-cap b{color:var(--gold-2);font-weight:800}
@media (max-width:760px){.vault-peek{height:56vw;margin-top:20px}.vp{width:64%;margin-left:-32%}.vault-peek.fan .vp1{transform:translateX(-24%) rotate(-6deg)}.vault-peek.fan .vp3{transform:translateX(24%) rotate(6deg)}.vp-cap{font-size:11px}}
.sp-jump .vp{transition:none}

/* your videos: where each one sits in its frame */
.me-bubble .me-v{object-position:47% 26%}
.gp-ph .me-v{object-position:8% 50%;z-index:1}
.gp-ph .scr img{object-position:0 50%}
.me-film .me-v{z-index:1}
.ev-blog .emb .me-v{border-radius:.6cqw}
.emb:has(.me-v.on) i{opacity:0}
.emb i{z-index:2;transition:opacity .4s}

/* ===== round 3 (2026-10-12) ===== */
/* under each big box name: a gold "Publishes for you" tag and bigger bullets */
.cx-copy p.cx-pub{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:5px 14px 5px 5px;border-radius:999px;background:rgba(246,241,228,.1);border:1px solid rgba(217,178,95,.55);font:600 13px/1.2 var(--sans);color:var(--cx-tx)}
.cx-pub b{padding:4px 10px;border-radius:999px;background:var(--gold-grad);color:#0B1430;font:800 11px var(--sans);letter-spacing:.08em;text-transform:uppercase}
.chap[data-theme="cream"] .cx-copy p.cx-pub{background:rgba(20,36,92,.06);border-color:rgba(20,36,92,.25)}
.cx-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.cx-list li{position:relative;padding-left:26px;font-size:clamp(16px,1.3vw,19px);line-height:1.38;color:var(--cx-tx)}
.cx-list li::before{content:"";position:absolute;left:2px;top:.4em;width:12px;height:12px;border-radius:50%;background:var(--gold-grad)}
.chap[data-theme="cream"] .cx-list li::before{background:#2B62D9}
@media (min-width:761px) and (max-height:800px){.chap .cx-copy h3,.chap .cx-copy .cx-note{display:none}.cx-list{gap:6px}.cx-list li{font-size:15px}}
@media (max-width:760px){
  .chap .cx-copy h3{display:none}
  .chap .cx-copy p.cx-pub{display:inline-flex;font-size:11px;margin:0 0 8px;padding:3px 10px 3px 3px}.cx-pub b{font-size:9px;padding:3px 8px}
  .cx-list{margin:6px 0 0;gap:5px}.cx-list li{font-size:14px;line-height:1.3;padding-left:20px}.cx-list li::before{width:9px;height:9px}
  .cx-list li:nth-child(n+4){display:none}
}
/* the Unwrap panels get the same tag */
.box .pub-tag{display:inline-block;margin:2px 0 12px;padding:5px 12px;border-radius:999px;background:var(--gold-grad);color:#0B1430;font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase}
/* done in a sitting: the looooong way vs the shortcut */
.lw{margin-top:40px;border-top:2px solid #E7E1D3}
.lw-head{display:grid;grid-template-columns:1fr 1fr;gap:4vw;padding:16px 0 6px;font:800 13px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8A6516}
.lw-head span:first-child{color:#A8352C}
.lw-row{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center;padding:18px 0;border-bottom:1px solid #E7E1D3}
.lw-long{font-size:clamp(17px,1.45vw,22px);color:var(--ink-2);text-decoration:line-through;text-decoration-color:rgba(224,72,62,.6);text-decoration-thickness:2px}
.lw-short{display:flex;gap:14px;align-items:center;font-family:var(--bebas);font-size:clamp(30px,2.9vw,48px);line-height:1;color:var(--navy)}
.lw-short::before{content:"";flex:none;width:.42em;height:.42em;border-radius:50%;background:var(--gold-grad)}
@media (max-width:760px){.lw-head{display:none}.lw-row{grid-template-columns:1fr;gap:6px;padding:16px 0}.lw-short{font-size:32px}}
/* the four "plain-named" facts: a clean list with big gold numbers, no boxes */
.facts{gap:20px}
.fact{background:none;border:0;border-radius:0;padding:2px 0;gap:18px;font-size:18px;line-height:1.5}
.fact i{width:auto;height:auto;min-width:34px;background:none;border:0;border-radius:0;font-family:var(--bebas);font-weight:400;font-size:52px;line-height:.82;color:#B0832C}
/* The Edit Box: one big before/after frame (raw first, then the edit wipes across), the reel on a smaller monitor to the right */
#ch-edit .rawedit{left:0;right:auto;top:0;width:60cqw;aspect-ratio:16/9;display:block}
#ch-edit .rawedit figure{position:absolute;inset:0;aspect-ratio:auto;border-radius:1.2cqw}
#ch-edit .rawedit .edited{clip-path:inset(0 100% 0 0)}
#ch-edit .rawedit .seam{position:absolute;z-index:4;top:0;bottom:0;left:0;width:.4cqw;margin-left:-.2cqw;background:var(--gold-grad);box-shadow:0 0 2cqw rgba(241,213,146,.9);opacity:0}
#ch-edit .rawedit figcaption{left:1.4cqw;top:1.4cqw;font-size:1.4cqw}
#ch-edit .rawedit .edited figcaption{left:auto;right:1.4cqw}
#ch-edit .rawedit .cap{bottom:2cqw;font-size:2.1cqw}
#ch-edit .rawedit .l3{left:2cqw;bottom:7cqw}#ch-edit .rawedit .l3 b{font-size:2.2cqw}#ch-edit .rawedit .l3 small{font-size:1.1cqw}
#ch-edit .ed-mon{left:auto;right:0;width:37cqw}
#ch-edit .stopwatch{left:auto;right:0;width:37cqw;top:calc(37cqw * 9 / 16 + 9cqw)}
#ch-edit .ed-mon ~ .t-made{left:auto;right:1cqw;top:-4cqh}
@media (max-width:760px){
  #ch-edit .rawedit{right:0;width:auto;top:0;bottom:auto}
  #ch-edit .ed-mon{display:none}
  #ch-edit .ed-mon ~ .t-made{top:auto;bottom:29cqh;right:0}
  #ch-edit .rawedit figcaption{font-size:3cqw}
  #ch-edit .rawedit .cap{font-size:3.8cqw;bottom:3cqw}
  #ch-edit .rawedit .l3{display:block;bottom:12cqw}#ch-edit .rawedit .l3 b{font-size:4cqw}#ch-edit .rawedit .l3 small{font-size:2.2cqw}
}

/* ===== round 6: act-out words stand out from the box-opening clip ===== */
.wscrim{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 44% at 50% 45%,rgba(5,9,26,.72),rgba(5,9,26,.38) 55%,transparent 76%);opacity:0;pointer-events:none}
.w-cut .clip{background:rgba(9,12,23,.74);border-color:rgba(246,241,228,.5);text-shadow:0 2px 10px rgba(0,0,0,.5)}
.w-cut .clip.cut{background:rgba(70,14,14,.78);border-color:rgba(255,138,128,.85)}
.capline span{background:rgba(9,22,8,.86);border-color:#7AC143;color:#E6FFD6}
.reveal-sub{display:inline-block;margin-top:14px;padding:8px 18px;border-radius:999px;background:rgba(11,20,48,.8);border:1px solid rgba(217,178,95,.55);font:700 clamp(16px,1.4vw,21px) var(--sans);letter-spacing:.02em;color:var(--cream)}
/* the gold underline under one word of a grey headline (data-mark) */
.cx-problem .wd.mark{position:relative}
.cx-problem .uline{position:absolute;left:-3%;width:106%;bottom:-.06em;height:.16em;overflow:visible;pointer-events:none}
.uline path{fill:none;stroke:#D9A93A;stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
@media (max-width:760px){.reveal-sub{font-size:14px;padding:6px 14px;margin-top:10px}.uline path{stroke-width:4}}
/* a gold marker stroke under a phrase of a grey headline (data-mark with several words, e.g. "buy my stuff.") */
.cx-problem .mk{position:relative;display:inline-block;white-space:nowrap;z-index:0;color:#0B1430}
.cx-problem .mk .hl{position:absolute;left:-.07em;right:-.09em;bottom:.03em;height:.38em;border-radius:.12em .06em .14em .05em;background:var(--gold-grad);transform-origin:0 50%;transform:scaleX(0);z-index:-1}

/* ===== round 7: The Everywhere Box fills the screen with layered pieces =====
   the blog is sized by the screen's height too (wide, short screens made it spill into the chips), the pins hug the right,
   and the middle gets an email (+ the Facebook / Instagram / LinkedIn / X kits when there's room), all bursting out of the one video */
@media (min-width:761px){
  .ev-blog{width:min(40cqw,58cqh);top:3cqh}
  .ev-blog .rel{gap:min(.8cqw,1.2cqh)}
  .ev-blog .rel span{font-size:min(1.05cqw,1.5cqh);padding:min(.5cqw,.8cqh) min(1cqw,1.4cqh);white-space:nowrap}
  .ev-pin{width:min(13.5cqw,21cqh)}
  .ev-pin.pin-a{left:auto;right:min(29cqw,45cqh)}
  .ev-pin.pin-b{left:auto;right:min(14.5cqw,22.5cqh)}
  .ev-pin.pin-c{left:auto;right:0}
  .me-posts{left:auto;width:min(44cqw,66cqh)}
  .post{padding:min(1.3cqw,2cqh)}
  .post .who{font-size:min(1.15cqw,1.8cqh);white-space:nowrap}
  .post .who img{width:min(2.6cqw,4cqh);height:min(2.6cqw,4cqh)}
  .post .re{font-size:min(1.05cqw,1.6cqh)}
  .ev-src{left:calc(min(40cqw,58cqh) - 13cqw);width:min(21cqw,31cqh)}
  /* wide, short screens have room in the middle for the social kits: the video moves up to make space */
  @container (min-aspect-ratio: 8/5){
    .ev-src{top:41cqh}
    .ev-mail{top:4cqh}
    .cx-proof .ev-kits{display:block}
  }
}
.ev-mid{position:absolute;left:calc(min(40cqw,58cqh) - 2cqw);right:calc(min(29cqw,45cqh) + min(13.5cqw,21cqh) - 3cqw);top:0;bottom:11cqh}
.ev-mail{position:absolute;left:0;right:0;margin:0 auto;top:7cqh;width:min(100%,44cqh);padding:1.6cqh 1.8cqh;border-radius:1.6cqh;background:#fff;color:#14245C;box-shadow:0 10px 16px -10px rgba(20,36,92,.55);transform:rotate(-2.5deg);z-index:2;will-change:transform}
.ev-mail p{margin:0}
.ev-mail .mh{display:flex;align-items:center;gap:1cqh;font:800 1.8cqh var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#8A93AE;padding-bottom:1.1cqh;border-bottom:1px solid #E1E5EE;margin-bottom:1.2cqh}
.ev-mail .mh i{font-style:normal;display:grid;place-items:center;width:3.4cqh;height:3.4cqh;border-radius:50%;background:var(--gold-grad);color:#0B1430;font-size:2cqh;letter-spacing:0}
.ev-mail .mh small{margin-left:auto;font-size:1.5cqh;color:#fff;background:#E0483E;padding:.4cqh 1cqh;border-radius:99px}
.ev-mail .from{display:flex;align-items:center;gap:1cqh;font:800 1.9cqh var(--sans);white-space:nowrap}
.ev-mail .from img{width:4cqh;height:4cqh;border-radius:50%;object-fit:cover}
.ev-mail .from small{font-weight:600;color:#8A93AE}
.ev-mail .subj{font:800 2.4cqh/1.22 var(--sans);margin:1.1cqh 0 1.2cqh}
.ev-mail .pl,.kit .pl{height:1cqh;border-radius:99px;background:#E1E5EE;margin-top:.9cqh}
.ev-mail .pl.s,.kit .pl.s{width:60%}
.ev-mail .cta{display:inline-block;margin-top:1.4cqh;font:800 1.6cqh var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:#14245C;padding:.9cqh 1.8cqh;border-radius:99px}
.ev-kits{display:none;position:absolute;left:0;right:0;bottom:0;height:40cqh}
.kit{position:absolute;bottom:0;width:32%;margin:0;padding:1cqh;border-radius:1.4cqh;background:#fff;color:#14245C;box-shadow:0 8px 14px -8px rgba(20,36,92,.55);will-change:transform}
.kit .kh{display:inline-block;margin:0 0 .9cqh;font:800 1.5cqh var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:.5cqh 1.1cqh;border-radius:99px}
.kit img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.8cqh}
.kit .xt{margin:0;font:700 2cqh/1.3 var(--sans)}
.k-fb .kh{background:#1877F2}.k-ig .kh{background:linear-gradient(90deg,#F58529,#DD2A7B,#8134AF)}.k-li .kh{background:#0A66C2}.k-x .kh{background:#111}
.k-fb{left:0;transform:rotate(-8deg)}
.k-ig{left:20%;bottom:3cqh;transform:rotate(-2deg);z-index:1}
.k-li{left:40%;bottom:1cqh;transform:rotate(4deg);z-index:2}
.k-x{left:60%;bottom:5cqh;transform:rotate(9deg);z-index:3}
@media (max-width:760px){.ev-mid{display:none}}
/* phones: the Day chips sit over the bottom of the live phone; make them solid and lift the "Example" label clear of them */
@media (max-width:760px){
  .gp-days p{background:#1B2C66}
  .gp-ph .gp-ex{bottom:auto;top:14cqw}
}

/* ===== 2026-10-12: Box Chooser callout + The Deal Stack ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* a little gold gift box (used by the chooser and the Deal Stack); size with --bw */
.dsb{position:relative;display:block;flex:none;width:var(--bw,56px);height:calc(var(--bw,56px) * .92)}
.dsb i{position:absolute;display:block}
.dsb-body{left:8%;right:8%;bottom:0;height:66%;border-radius:calc(var(--bw,56px) * .06);background:linear-gradient(160deg,#F7DE9C,#D9B25F 45%,#A87E2E);box-shadow:inset 0 -8px 14px -8px rgba(90,60,10,.65),0 10px 22px -12px rgba(0,0,0,.7)}
.dsb-body::before,.dsb-lid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:16%;transform:translateX(-50%);background:#14245C}
.dsb-lid{left:0;right:0;top:20%;height:22%;border-radius:calc(var(--bw,56px) * .05);background:linear-gradient(170deg,#FBE7B0,#E2BC66 60%,#B88B35);box-shadow:0 3px 6px -2px rgba(60,40,5,.55)}
.dsb-bow{left:22%;right:22%;top:0;height:24%}
.dsb-bow::before,.dsb-bow::after{content:"";position:absolute;bottom:0;width:48%;height:100%;border:max(2px,calc(var(--bw,56px) * .05)) solid #14245C;border-radius:50% 50% 45% 45%;background:rgba(241,213,146,.35)}
.dsb-bow::before{left:0;transform:rotate(-16deg)}.dsb-bow::after{right:0;transform:rotate(16deg)}
.ds-glint,.pick-spark{position:absolute;display:block;width:12px;height:12px;background:#FFF4D6;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 6px rgba(241,213,146,.9));animation:ds-tw 2.4s ease-in-out infinite;pointer-events:none}
@keyframes ds-tw{0%,100%{transform:scale(.55) rotate(0)}50%{transform:scale(1.15) rotate(45deg)}}

/* Box Chooser callout: a glowing gold outline that slowly pulses, an arrow that points at the button, a little gift */
.pick{padding:5vh 0 9vh}
.pick-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(28px,4vw,52px);border-radius:26px;border:2px solid var(--gold);background:linear-gradient(165deg,#1D3277,#14245C 60%);color:var(--cream);box-shadow:0 0 22px 3px rgba(217,178,95,.4),0 24px 50px -28px rgba(11,20,48,.7);animation:pick-glow 3.2s ease-in-out infinite}
@keyframes pick-glow{0%,100%{box-shadow:0 0 0 0 rgba(241,213,146,0),0 0 18px 2px rgba(217,178,95,.35),0 24px 50px -28px rgba(11,20,48,.7)}50%{box-shadow:0 0 0 7px rgba(241,213,146,.16),0 0 46px 12px rgba(217,178,95,.6),0 24px 50px -28px rgba(11,20,48,.7)}}
.pick .kicker{color:var(--gold-2)}
.pick-gift{position:relative;--bw:clamp(70px,7vw,96px)}
.pick-gift .dsb{animation:pick-bob 2.8s ease-in-out infinite}
@keyframes pick-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
.pick-spark.s1{left:-14px;top:4px}.pick-spark.s2{right:-16px;top:18px;width:9px;height:9px;animation-delay:.8s}.pick-spark.s3{left:46%;top:-18px;width:10px;height:10px;animation-delay:1.5s}
.pick-copy h2{color:var(--cream);font-size:clamp(42px,4.4vw,70px);max-width:17ch;margin-top:8px}
.pick-copy p:not(.kicker){color:var(--cream-2);margin-top:12px;font-size:clamp(17px,1.4vw,20px);max-width:44ch}
.pick-go{display:flex;align-items:center;gap:14px}
.pick-arrow{flex:none;width:64px;height:40px;fill:none;stroke:var(--gold-2);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(241,213,146,.6));animation:pick-nudge 1.2s ease-in-out infinite}
@keyframes pick-nudge{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px)}}
@keyframes pick-nudge-down{0%,100%{transform:translateY(-5px) rotate(90deg)}50%{transform:translateY(5px) rotate(90deg)}}
.pick-btn{font-size:19px;padding:19px 32px;white-space:nowrap}
@media (max-width:900px){
  .pick-card{grid-template-columns:1fr;justify-items:center;text-align:center}
  .pick-copy h2,.pick-copy p:not(.kicker){margin-left:auto;margin-right:auto}
  .pick-go{flex-direction:column;gap:8px}
  .pick-arrow{width:46px;height:30px;animation-name:pick-nudge-down}
}

/* The Deal Stack: One Box, then the Set, then the Bundle */
.ds{position:relative;background:radial-gradient(90% 40% at 50% 0%,#1A2A66 0,var(--night) 70%);color:var(--cream);overflow-x:clip;padding-bottom:10vh}
.ds .lead{color:var(--cream-2)}
.ds-intro{padding-bottom:2vh}
.ds-scene{position:relative}
.ds-pin{display:flex;align-items:center;padding:6vh 0}
.ds-grid{display:grid;grid-template-areas:"top" "viz" "txt";gap:18px;width:100%;justify-items:center;text-align:center}
.ds-top{grid-area:top}
.ds-viz{grid-area:viz;width:100%;display:flex;flex-direction:column;align-items:center}
.ds-txt{grid-area:txt;display:grid;gap:10px;justify-items:center;max-width:46ch}
.ds-step{display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid rgba(217,178,95,.6);font:800 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)}
.ds-name{margin-top:10px;font-family:var(--bebas);font-weight:400;text-transform:uppercase;font-size:clamp(44px,5vw,84px);line-height:.9;letter-spacing:.005em;color:var(--cream)}
.ds-price{display:flex;flex-direction:column;align-items:center;line-height:1}
.ds-price b{font-family:var(--serif);font-weight:600;font-size:clamp(56px,6vw,96px);color:var(--gold-2);font-variant-numeric:tabular-nums}
.ds-price small{margin-top:6px;font:700 14px var(--sans);letter-spacing:.06em;color:var(--cream-2)}
.ds-say{font-size:clamp(18px,1.5vw,22px);line-height:1.4;color:var(--cream)}
.ds-small{font-size:15px;line-height:1.5;color:var(--cream-2)}
.ds-early{display:flex;align-items:center;gap:12px;text-align:left}
.ds-early b{font-family:var(--bebas);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:.95;text-transform:uppercase;color:var(--gold-2)}
.ds-arrow{flex:none;width:46px;height:28px;fill:none;stroke:var(--gold-2);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(241,213,146,.55));animation:ds-nudge 1.3s ease-in-out infinite}
@keyframes ds-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
/* step 1: one box lands */
.ds-solo{position:relative;display:flex;flex-direction:column;align-items:center;padding:18px 30px 0}
.dsb-big{--bw:clamp(118px,28vw,170px)}
.ds-shadow{display:block;width:150px;max-width:90%;height:16px;margin-top:6px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
.ds-solo .g1{left:0;top:26%}.ds-solo .g2{right:0;top:8%;width:9px;height:9px;animation-delay:.7s}.ds-solo .g3{right:12%;top:62%;width:10px;height:10px;animation-delay:1.4s}
/* step 2: five boxes in a row, wrapped into the Set, then the price meter */
.ds-row{--bw:56px;position:relative;display:flex;justify-content:center;gap:10px;padding:14px 12px 10px}
.ds-item{display:flex;flex-direction:column;align-items:center;gap:6px;width:var(--bw)}
.ds-item small{width:66px;font:800 10px/1.15 var(--sans);letter-spacing:.02em;text-transform:uppercase;color:var(--cream-2);text-align:center}
.ds-band{position:absolute;inset:0;border:2px solid var(--gold);border-radius:18px;box-shadow:0 0 24px -4px rgba(217,178,95,.6),inset 0 0 18px -6px rgba(217,178,95,.45);pointer-events:none}
.ds-band-tag{display:inline-block;margin-top:12px;padding:7px 14px;border-radius:999px;background:var(--gold-grad);color:var(--night);font:800 12px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.ds-meter{width:100%;max-width:520px;margin-top:24px;text-align:left}
.ds-meter-k{margin-bottom:40px;font:700 15px/1.35 var(--sans);color:var(--cream)}
.ds-track{position:relative;height:12px;border-radius:99px;background:rgba(246,241,228,.14)}
.ds-fill{position:absolute;top:0;bottom:0;left:8.55%;width:54.54%;border-radius:99px;background:var(--gold-grad);transform-origin:0 50%;box-shadow:0 0 16px rgba(241,213,146,.5)}
.ds-tick{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:rgba(246,241,228,.55)}
.ds-tick.t397{left:8.55%}.ds-tick.t697{left:63.09%;background:var(--gold-2)}
.ds-tick.t885{left:97.27%;background:repeating-linear-gradient(var(--cream) 0 3px,transparent 3px 6px)}
.ds-mark{position:absolute;left:63.09%;bottom:100%;display:flex;flex-direction:column;align-items:center;margin-bottom:3px;transform:translateX(-50%)}
.ds-mark b{padding:3px 9px;border-radius:8px;background:#F1D592;color:var(--night);font:600 18px/1.1 var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-mark svg{width:14px;height:10px;fill:#F1D592}
.ds-scale{position:relative;height:20px;margin-top:9px;font:800 12px var(--sans);letter-spacing:.04em;color:var(--cream-2)}
.ds-scale span{position:absolute;top:0;white-space:nowrap}
.ds-scale .l397{left:8.55%;transform:translateX(-30%)}.ds-scale .l697{left:63.09%;transform:translateX(-50%);color:var(--gold-2)}.ds-scale .l885{right:0}
/* step 3: a year of CTC and three bonuses stack on top of the Set */
.ds-tower{display:flex;flex-direction:column;align-items:center;max-width:100%}
.ds-bonuses{--bw:58px;position:relative;display:flex;justify-content:center;gap:12px}
.ds-bonuses .ds-item{width:98px}
.ds-bonuses small{width:98px;color:var(--cream)}
.ds-bonuses .g1{left:-8px;top:0}.ds-bonuses .g2{right:-6px;top:10px;width:9px;height:9px;animation-delay:.6s}.ds-bonuses .g3{left:50%;top:-14px;width:10px;height:10px;animation-delay:1.3s}
.ds-slab{align-self:stretch;margin:10px 0 8px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--gold);background:linear-gradient(170deg,#22397F,#16285F);box-shadow:0 14px 30px -18px rgba(0,0,0,.8),0 0 18px -6px rgba(217,178,95,.5);text-align:center}
.ds-slab b{font-family:var(--bebas);font-weight:400;font-size:clamp(20px,1.9vw,28px);letter-spacing:.02em;line-height:1;text-transform:uppercase;color:var(--cream)}
.ds-row-sm{--bw:48px;gap:8px;padding:10px}
.ds-try{padding-top:4vh;padding-bottom:2vh}
.ds-try .calc{margin-top:0}
.calc-early{display:flex;align-items:center;gap:12px;margin-top:12px;font-family:var(--bebas);font-size:clamp(26px,2.4vw,36px);line-height:1;text-transform:uppercase;color:var(--gold-2)}
.calc-slide{flex:1;min-width:220px}
.calc-slide .calc-range{width:100%;min-width:0;display:block}
.calc-ends{display:flex;justify-content:space-between;margin-top:10px;font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-2)}
.calc-note{margin-top:12px;font-size:15px;color:var(--cream-2)}
.ds-doors{display:grid;gap:12px;margin-top:6vh}
.ds-doors p{max-width:70ch;padding:6px 0 6px 14px;border-left:2px solid var(--gold);color:var(--cream-2)}
.ds-doors b{color:var(--cream)}
@media (min-width:901px){
  .ds-grid{grid-template-columns:1.1fr .9fr;grid-template-areas:"viz top" "viz txt";column-gap:5vw;row-gap:18px;text-align:left;justify-items:start;align-items:center}
  .ds-top{align-self:end}.ds-txt{align-self:start;justify-items:start}
  .ds-price{align-items:flex-start}
  .ds-row{--bw:84px;gap:18px;padding:18px 18px 12px}
  .ds-item small{width:90px;font-size:11px}
  .ds-row-sm{--bw:70px;gap:14px;padding:14px}
  .ds-bonuses{--bw:74px;gap:18px}
  .ds-bonuses .ds-item,.ds-bonuses small{width:120px}
}
/* scroll mode: each step pins while it builds (only with motion allowed and scripts running) */
@media (prefers-reduced-motion:no-preference){
  html:not(.no-js) .ds-scene.ds-a{height:150vh}
  html:not(.no-js) .ds-scene.ds-b{height:220vh}
  html:not(.no-js) .ds-scene.ds-c{height:190vh}
  html:not(.no-js) .ds-pin{position:sticky;top:0;min-height:100vh;padding:calc(var(--sp-hdr) + 6px) 0 20px}
}
@media (prefers-reduced-motion:reduce){
  .pick-card,.pick-gift .dsb,.pick-arrow,.ds-arrow,.ds-glint,.pick-spark{animation:none!important}
  .pick-arrow{transform:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){.pick-arrow{transform:rotate(90deg)}}
@media (max-width:420px){.ds-row .ds-item small{letter-spacing:0;font-size:9.5px}}
.bn .bn-new{margin:-2px 0 8px;font:800 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
/* round 2: Option 1 "grab two" nudge + per-option buttons (waitlist-only / sales-only) */
.ds-two{display:inline-block;padding:7px 14px;border-radius:999px;border:1.5px dashed rgba(241,213,146,.6);font:700 15px/1.3 var(--sans);color:var(--gold-2)}
.ds-cta{margin-top:6px}
@media (max-width:760px){.ds-c .ds-grid{gap:12px}.ds-c .ds-name{font-size:40px}.ds-c .ds-price b{font-size:46px}.ds-c .ds-txt{gap:7px}.ds-c .ds-small{font-size:14px;line-height:1.42}.ds-c .ds-slab{margin:6px 0}}
/* round 3: cinematic stills in the Deal Stack (img layers now, a frame sequence later) */
.ds-shot{position:relative;width:100%;max-width:680px;aspect-ratio:3/2;margin:0;border-radius:20px;overflow:hidden;background:#0B1430;border:1px solid rgba(217,178,95,.45);box-shadow:0 30px 60px -30px rgba(0,0,0,.85),0 0 40px -14px rgba(217,178,95,.45)}
.ds-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 55%;will-change:transform,opacity}
.ds-shot .prev{opacity:0}
.ds-shot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 60%,rgba(11,20,48,.55) 100%)}
.ds-shot figcaption.ds-band-tag{position:absolute;z-index:2;left:50%;bottom:12px;margin:0;transform:translateX(-50%);white-space:nowrap;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.ds-b .ds-meter{margin-top:20px}
@media (max-width:760px){
  .ds-shot{aspect-ratio:16/9;border-radius:16px}
  .ds-shot figcaption.ds-band-tag{bottom:8px;font-size:10.5px;padding:5px 11px}
  .ds-b .ds-meter{margin-top:14px}.ds-b .ds-meter-k{margin-bottom:36px}
  .ds-grid{gap:14px}
}
/* round 4: the Deal Stack film (canvas over the stills; it fades in once frames have painted) */
.ds-shot canvas.ds-film{z-index:1;opacity:0;transition:opacity .4s ease}
.ds-shot.film-on canvas.ds-film{opacity:1}
@media (prefers-reduced-motion:reduce){.ds-shot canvas.ds-film{display:none}}

/* ===== 2026-10-13 mobile round: nothing cut off on phones (desktop unchanged) =====
   --tb (set in index.html) is the strip a phone's toolbar hides at the bottom of a 100vh stage */
@media (max-width:760px){
  .cx-track{bottom:calc(var(--tb,0px) + 3vh)}
  .cx-proof{bottom:calc(var(--tb,0px) + 3vh + 104px)}
  /* Get Seen: the "Film this first" card had a top AND a bottom (23px tall, text spilling under the thumbnails).
     Now it sits whole above the thumbnails, over the laptop's lower edge */
  #ch-seen .ftf-card{top:auto;bottom:calc(14.5cqw + 8px);left:6cqw;right:6cqw}
  #ch-seen .ftf-card .k{font-size:max(2.6cqw,9px)}
  #ch-seen .ftf-card .t{font-size:max(4.2cqw,14px);margin:1cqw 0 1.4cqw}
  #ch-seen .gs-lap{width:min(100cqw,calc((100cqh - 14cqw) * 1.6))}
  /* Everywhere: the blog card fits the space (it ran under the receipt), the pins stay inside the screen edge,
     the posts sit just above the chips */
  .ev-blog{width:min(66cqw,calc((100cqh - 12cqw) / 1.17));max-height:calc(100cqh - 12cqw);overflow:hidden}
  .ev-pin{width:min(26cqw,calc(100cqh * .4))}
  .ev-pin.pin-a{right:3cqw}.ev-pin.pin-b{right:9cqw}
  .me-posts{left:auto;right:0;width:min(100cqw,calc((100cqh - 12cqw) * 1.5));bottom:calc(11.5cqw + 6px)}
  /* Get Paid: the live phone fits between the plan chips and the Day chips (it ran under the receipt) */
  .gp-ph{width:min(46cqw,calc(86cqh / 2.15));left:50%;margin-left:calc(min(46cqw,calc(86cqh / 2.15)) / -2)}
  /* Edit: the before/after frame shrinks on short screens so the "Made with the Edit Box" tag sits between it and the timeline */
  #ch-edit .rawedit{left:0;right:0;margin:0 auto;width:min(100cqw,calc((76cqh - 30px) * 16 / 9))}
  #ch-edit .ed-mon ~ .t-made{top:calc(min(100cqw,calc((76cqh - 30px) * 16 / 9)) * 9 / 16 + 5px);bottom:auto;right:0}
}
/* shorter phones (most phones once the address bar shows): a tighter copy block leaves room for the real work */
@media (max-width:760px) and (max-height:760px){
  .cx-name{font-size:min(14.5vw,9.4vh)}
  #ch-every .cx-name{font-size:min(12.4vw,9.4vh);white-space:nowrap}
  #ch-every .cx-name .bxw{display:inline}
  .cx-list{gap:3px}.cx-list li{font-size:13px;line-height:1.28}
}

/* ===== 2026-10-13 round 2 + 3 ===== */
.jx-row.main span{transform-origin:50% 50%}
/* "Make life easier on yourself." (several words, breaks only between words) + "Cut yourself a break." in the same display type */
.jx{height:260vh}
.jx-gift{font-size:clamp(18px,1.55vw,24px);line-height:1.45;max-width:50ch}
.jx-ask{white-space:normal;font-size:min(9.6vw,15.5vh);line-height:.86;max-width:13em;text-wrap:balance}
.jx-ask .jx-w{display:inline-block;white-space:nowrap}
.jx-sub{font-family:var(--disp);font-style:normal;font-weight:400;text-transform:uppercase;font-size:min(5.4vw,8.6vh);line-height:.95;margin-top:2.4vh;color:var(--gold-2);letter-spacing:.01em}
.jx-it{font-weight:inherit}
@media (max-width:760px){
  .jx{height:260vh}
  .jx-gift{font-size:18.5px;line-height:1.42;margin-top:14px}
  /* each phrase fits the phone's width, so the stop on it can actually be read */
  .jx-rows{gap:1.2vh}
  .jx-row{font-size:15vw;line-height:.88}
  .jx-row.main{font-size:11.6vw}
  .jx-ask{font-size:min(15.5vw,10vh);font-size:min(15.5vw,10svh)}
  .jx-sub{font-size:min(9.6vw,6vh);font-size:min(9.6vw,6svh)}
}