/* ═══════════════════════════════════════════════════════════════════ Everything below the hero. Loaded non-blocking; the hero's own CSS is inlined in . Rules that reserve space or hide things live in the critical block instead, so nothing jumps when this arrives. ═══════════════════════════════════════════════════════════════════ */ /* proof bar straight under the hero, the convention */ .bar3{display:grid;gap:1.1rem;} @media(min-width:640px){.bar3{grid-template-columns:repeat(3,1fr);}} .bar3 .n{font-weight:800;font-size:1.85rem;letter-spacing:-.03em;line-height:1;color:var(--amber); font-variant-numeric:tabular-nums;} .bar3 .l{font-size:.9rem;color:var(--grey-d);margin-top:.28rem;} /* video, centred and bordered — the convention */ .bridge{font-weight:600;font-size:1.06rem;margin:0 0 1.1rem;} hr.div{border:0;border-top:1px solid var(--line-l);max-width:8rem;margin:2.4rem auto 1.6rem;} .reel p{color:var(--grey-l);max-width:28ch;font-size:.95rem;margin:0;} .dk .reel p,.dk2 .reel p{color:var(--grey-d);} /* click-to-load facade. Flat amber square, dark triangle. No rounding, no shadow. */ .reel .poster,.reel .poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .playbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;} .playbtn i{display:block;width:4.2rem;height:4.2rem;background:var(--amber);position:relative;} .playbtn i::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-38%,-50%); border-style:solid;border-width:.72rem 0 .72rem 1.2rem; border-color:transparent transparent transparent var(--dark);} .playbtn:hover i{background:var(--amber-dim);} .reel.playing{padding:0;} .marks{margin:1rem auto 0;padding:0;list-style:none;display:grid;gap:.3rem;max-width:30rem;text-align:left;} .marks li{display:grid;grid-template-columns:3.4rem 1fr;color:var(--grey-l);font-size:.96rem;} .dk .marks li,.dk2 .marks li{color:var(--grey-d);} .marks b{font-weight:700;color:var(--dark);font-variant-numeric:tabular-nums;font-size:.9rem;} .dk .marks b,.dk2 .marks b{color:var(--white);} .marks{margin-top:1.4rem;} /* checkmark bullets — the convention */ .ticks{margin:0;padding:0;list-style:none;max-width:36rem;} .ticks li{position:relative;padding:.52rem 0 .52rem 2rem;font-size:1.04rem;} .ticks li::before{content:"";position:absolute;left:0;top:.86rem;width:1.05rem;height:.55rem; border-left:2.5px solid var(--tick);border-bottom:2.5px solid var(--tick);transform:rotate(-45deg);} .dk .ticks li::before,.dk2 .ticks li::before{border-color:var(--amber);} .crosses li::before{content:"×";border:0;transform:none;top:.42rem;left:.16rem;width:auto;height:auto; font-size:1.3rem;font-weight:700;color:#B4262A;line-height:1;} /* big number moment */ .figure{font-weight:800;font-size:clamp(3.4rem,15vw,8rem);line-height:.9;letter-spacing:-.045em; color:var(--amber);margin:.5rem 0 .7rem;font-variant-numeric:tabular-nums;} .fig-note{font-size:1.08rem;color:var(--grey-d);max-width:30ch;margin:0 auto;} .wk{display:grid;gap:.9rem;max-width:38rem;margin:0 auto 1.7rem;} @media(min-width:600px){.wk{grid-template-columns:repeat(3,1fr);gap:1.4rem;}} .wk .n{font-weight:800;font-size:2.1rem;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;} .wk .l{font-size:.92rem;color:var(--grey-d);margin-top:.2rem;} .tot{border-top:2px solid var(--amber);padding-top:.95rem;max-width:38rem;margin:0 auto; display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:700;} .tot .n{font-size:1.9rem;letter-spacing:-.035em;font-variant-numeric:tabular-nums;} /* testimonial blocks with attribution — the convention */ .ba{max-width:34rem;} .ba{margin-left:auto;margin-right:auto;} .ba .bar{display:flex;justify-content:space-between;align-items:baseline;gap:.9rem; padding:.72rem 0;border-bottom:1px solid var(--line-l);text-align:left;flex-wrap:wrap;} .dk .ba .bar,.dk2 .ba .bar{border-bottom-color:var(--line-d);} .ba .bar span{font-size:.98rem;color:var(--grey-l);flex:1 1 55%;min-width:0;} .dk .ba .bar span,.dk2 .ba .bar span{color:var(--grey-d);} .ba .bar b{font-weight:800;font-size:1.3rem;color:var(--tick);letter-spacing:-.03em; font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto;} .dk .ba .bar b,.dk2 .ba .bar b{color:var(--amber);} .ba .bar b s{color:var(--grey-l);font-weight:600;font-size:.8em;text-decoration-thickness:2px;} .dk .ba .bar b s,.dk2 .ba .bar b s{color:var(--grey-d);} .tcards{display:grid;gap:1.2rem;} @media(min-width:800px){.tcards{grid-template-columns:repeat(3,1fr);}} .tc{border:1px solid var(--line-l);padding:1.35rem;} .dk .tc,.dk2 .tc{border-color:var(--line-d);} .tc .hrs{font-weight:800;font-size:1.5rem;color:var(--tick);letter-spacing:-.03em;margin:0 0 .5rem; font-variant-numeric:tabular-nums;} .dk .tc .hrs,.dk2 .tc .hrs{color:var(--amber);} .tc q{display:block;font-size:1.05rem;line-height:1.42;quotes:"\201C" "\201D";margin:0 0 .6rem;} .tc cite{font-style:normal;font-size:.86rem;color:var(--grey-l);} .dk .tc cite,.dk2 .tc cite{color:var(--grey-d);} /* steps */ .steps{display:grid;gap:1.5rem;max-width:40rem;margin:0 auto;} .st-n{font-weight:800;font-size:.86rem;color:var(--amber);margin:0 0 .16rem;} .b:not(.dk):not(.dk2) .st-n{color:var(--amber-dim);} /* guarantee box */ .box{border:2px solid var(--amber);padding:1.8rem 1.5rem;max-width:44rem;margin:0 auto;} .box h2{margin-bottom:1.2rem;} .terms{display:grid;gap:1.1rem;text-align:left;} @media(min-width:720px){.terms{grid-template-columns:1fr 1fr;gap:1.2rem 2rem;}} .terms p{font-size:.98rem;margin:0;} /* faq */ details{border-bottom:1px solid var(--line-l);max-width:40rem;margin:0 auto;text-align:left;} details summary{font-weight:700;font-size:1.04rem;padding:.95rem 2.2rem .95rem 0;cursor:pointer; list-style:none;position:relative;} details summary::-webkit-details-marker{display:none;} details summary::after{content:"+";position:absolute;right:.2rem;top:.7rem;font-size:1.5rem; font-weight:600;color:var(--amber-dim);} details[open] summary::after{content:"–";} details .ans{padding:0 0 1.05rem;color:var(--grey-l);} /* price */ .anchor{font-weight:600;font-size:1.08rem;max-width:34rem;margin:.9rem auto 0;} .cost{display:grid;gap:.2rem;margin:0 0 1.2rem;} .cost .n{font-weight:800;font-size:clamp(1.9rem,5.4vw,2.8rem);letter-spacing:-.035em;line-height:1.1;} .cost .n span{font-weight:600;font-size:.4em;color:var(--grey-d);letter-spacing:-.01em;} .left{font-weight:800;color:var(--amber);font-size:1.08rem;} /* form */ .prog{display:flex;gap:.4rem;justify-content:center;margin:0 0 1.7rem;} .prog i{display:block;width:2.8rem;height:3px;background:var(--line-d);} .prog i.on{background:var(--amber);} .prog i.done{background:var(--grey-d);} .q{font-weight:800;font-size:clamp(1.3rem,3.8vw,1.85rem);line-height:1.16;letter-spacing:-.022em; margin:0 auto 1.4rem;max-width:24ch;} .opts{display:grid;gap:.55rem;max-width:26rem;margin:0 auto 1.2rem;} .opt{font-family:var(--f);font-size:1.05rem;font-weight:500;text-align:left;background:transparent; color:var(--white);border:1px solid var(--line-d);padding:.92rem 1.1rem;cursor:pointer;} .opt:hover{border-color:var(--amber);background:#20242B;} input.txt{font-family:var(--f);font-size:1.05rem;width:100%;max-width:26rem;background:transparent; border:0;border-bottom:1px solid var(--line-d);color:var(--white);padding:.75rem 0;margin:0 auto 1.4rem; display:block;text-align:center;} input.txt::placeholder{color:#6E7684;} input.txt:focus{border-bottom:2px solid var(--amber);} @media(prefers-reduced-motion:no-preference){ .step.live{animation:in .2s ease-out;} @keyframes in{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}} } .back{background:none;border:0;color:var(--grey-d);font-family:var(--f);font-size:.95rem; cursor:pointer;padding:.4rem 0;text-decoration:underline;} .slotbox{border:1px dashed var(--line-d);padding:1.6rem;max-width:30rem;margin:0 auto;color:var(--grey-d);} .slotbox.mounted{border:0;padding:0;max-width:44rem;} /* sticky bar */ .sbar span{font-size:.86rem;color:var(--grey-d);line-height:1.25;} .sbar .cta{padding:.7rem 1.15rem;font-size:.96rem;} @media(max-width:760px){.sbar.show{display:flex;} body.hasb{padding-bottom:4.5rem;}} .grab{display:grid;gap:.6rem;max-width:26rem;margin:1.5rem auto 0;} @media(min-width:520px){.grab{grid-template-columns:1fr auto;}} .txt2{font-family:var(--f);font-size:1.02rem;background:transparent;border:1px solid #C9C9C9; color:var(--dark);padding:.95rem 1rem;} .txt2::placeholder{color:#9A9A9A;} .txt2:focus{border-color:var(--amber);} footer{padding:1.5rem 0 2.6rem;color:var(--grey-l);font-size:.88rem;text-align:center;}