/* Intimacy School — landing page styles. Extracted verbatim from Harsh's approved template. Shared by all /step/ pages so it caches once instead of inlining 26 times. */ :root{ --brand:#e00173;--brand-dk:#b5005b;--brand-xdk:#7c0042; --ink:#0f0f0f;--ink-2:#374151;--ink-3:#6B7280;--ink-4:#9CA3AF; --surface:#fdf2f8;--surface-2:#fce7f3; --green:#16a34a;--red-warn:#ef4444; --r:12px;--r-lg:16px; --sh:0 4px 24px rgba(0,0,0,.09); --fh:var(--e-global-typography-primary-font-family,'Rubik',system-ui,sans-serif); --fb:var(--e-global-typography-text-font-family,'Rubik',system-ui,sans-serif); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;padding:0 0 72px;font-family:var(--fb);color:var(--ink);line-height:1.65;font-size:16px;background:#fff;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4,p{margin:0} ul{margin:0;padding:0;list-style:none} svg{flex-shrink:0} /* mobile image: shown inline in flow, desktop image: shown in right col */ .hero-vid-mobile{display:block} .hero-vid-desktop{display:none} @media(min-width:768px){ .hero-vid-mobile{display:none} .hero-vid-desktop{display:block} } /* PROGRESS BAR */ #prog{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--brand);z-index:9999;transition:width .1s linear;pointer-events:none} /* REVEAL */ .rv{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s ease} .rv.in{opacity:1;transform:translateY(0)} .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s} /* LAYOUT */ .wrap{max-width:1100px;margin:0 auto;padding:0 20px} .wrap-md{max-width:860px;margin:0 auto;padding:0 20px} .wrap-sm{max-width:620px;margin:0 auto;padding:0 20px} .blk{padding:60px 0} .blk-sm{padding:40px 0} .blk-dark{background:var(--ink);color:#fff;padding:64px 0} .blk-tint{background:var(--surface);padding:60px 0} .blk-pink{background:linear-gradient(135deg,var(--surface),var(--surface-2));padding:60px 0} /* SECTION LABELS */ .s-label{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:24px} .s-label span{font-size:11px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--brand);background:var(--surface-2);padding:4px 14px;border-radius:20px;border:1px solid rgba(224,1,115,.2)} .s-label::before,.s-label::after{content:'';flex:1;height:1px;background:rgba(224,1,115,.15)} .s-label.light span{background:rgba(255,255,255,.1);color:rgba(255,255,255,.65);border-color:rgba(255,255,255,.1)} .s-label.light::before,.s-label.light::after{background:rgba(255,255,255,.1)} /* HEADINGS */ .h2{font-family:var(--fh);font-size:38px;font-weight:800;line-height:1.2;color:var(--ink);text-align:center;margin-bottom:12px} .h2 .pk{color:var(--brand)} .h2 .ul{text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:3px;text-underline-offset:5px} .h2 .ul-g{text-decoration:underline;text-decoration-color:#75B92C;text-decoration-thickness:3px;text-underline-offset:5px} .h2.light{color:#fff} .sub{font-size:17px;color:var(--ink-2);text-align:center;max-width:580px;margin:0 auto 36px;line-height:1.75} .sub.light{color:rgba(255,255,255,.7)} /* SOCIAL PROOF BAR — top strip */ .sp-bar{background:#e8f5e9;font-family:var(--fb);font-size:14px;font-weight:600;text-align:center} .sp-main{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px} .sp-live{display:flex;align-items:center;gap:7px;color:#166534;font-weight:600} .sp-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:vpulse 2s infinite} /* FLOATING PURCHASE NOTIFICATION */ .purchase-toast{ position:fixed; bottom:88px; left:16px; z-index:9990; background:#fff; border-radius:14px; box-shadow:0 6px 28px rgba(0,0,0,.14); border:1.5px solid #22c55e; padding:12px 14px; display:flex; align-items:flex-start; gap:10px; max-width:290px; width:290px; transform:translateX(calc(-100% - 20px)); transition:transform .45s cubic-bezier(.34,1.2,.64,1),opacity .3s ease; pointer-events:none; opacity:0; } .purchase-toast.show{transform:translateX(0);opacity:1} .pt-avatar{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--fh)} .pt-body{flex:1;min-width:0} .pt-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px} .pt-name-row{display:flex;align-items:center;gap:5px} .pt-name{font-size:13px;font-weight:700;color:var(--ink)} .pt-check{width:15px;height:15px;border-radius:50%;background:#1d9bf0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .pt-check svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pt-time{font-size:11px;color:var(--ink-4)} .pt-product{font-size:12px;color:var(--ink-2);margin-bottom:3px} .pt-footer{display:flex;align-items:center;justify-content:space-between;margin-top:5px;padding-top:6px;border-top:1px solid #f0f0f0} .pt-verified{font-size:10px;color:#16a34a;font-weight:600;display:flex;align-items:center;gap:3px;letter-spacing:.2px} .pt-price{font-size:12px;font-weight:700;color:var(--ink)} .pt-dismiss{position:absolute;top:7px;right:9px;font-size:13px;color:var(--ink-4);cursor:pointer;line-height:1;pointer-events:all;padding:2px;transition:color .15s} .pt-dismiss:hover{color:var(--ink)} /* MODAL */ .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s ease} .modal-bg.open{opacity:1;pointer-events:all} .modal-box{background:#fff;border-radius:var(--r-lg);max-width:540px;width:100%;overflow:hidden;transform:translateY(20px) scale(.97);transition:transform .3s cubic-bezier(.34,1.2,.64,1);max-height:90vh;overflow-y:auto} .modal-bg.open .modal-box{transform:translateY(0) scale(1)} .modal-head{background:var(--brand);color:#fff;padding:16px 20px;display:flex;align-items:center;justify-content:space-between} .modal-head h3{font-family:var(--fh);font-size:18px;font-weight:700;margin:0} .modal-close{background:rgba(255,255,255,.2);border:none;color:#fff;width:28px;height:28px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--fb);transition:background .2s} .modal-close:hover{background:rgba(255,255,255,.35)} .modal-badge{background:var(--green);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.8px;text-transform:uppercase;display:inline-block;margin-bottom:12px} .modal-body{padding:20px} .modal-img{width:100%;border-radius:var(--r);overflow:hidden;margin-bottom:16px;max-height:280px;object-fit:cover} .modal-pos-name{font-family:var(--fh);font-size:22px;font-weight:700;color:var(--ink);margin-bottom:4px} .modal-diff{font-size:13px;color:var(--ink-3);margin-bottom:12px} .modal-desc{font-size:15px;color:var(--ink-2);line-height:1.7;margin-bottom:18px} .modal-steps{margin-bottom:20px} .modal-steps h4{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:10px;font-family:var(--fh)} .modal-step{display:flex;gap:10px;margin-bottom:8px;font-size:14px;color:var(--ink-2);align-items:flex-start;line-height:1.5} .modal-step-num{width:22px;height:22px;border-radius:50%;background:var(--surface-2);color:var(--brand);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-family:var(--fh)} .modal-footer{background:var(--surface);padding:16px 20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center} .modal-footer p{font-size:13px;color:var(--ink-3);flex:1;min-width:160px;margin:0} .modal-footer .btn-sm{flex-shrink:0} /* HERO */ .hero{padding:44px 20px 36px;text-align:center} .hero-hook{font-family:var(--fb);font-size:16px;font-style:italic;color:var(--ink-3);margin-bottom:10px} .hero h1{font-family:var(--fh);font-size:46px;font-weight:800;line-height:1.18;margin-bottom:10px;color:var(--ink)} .hero h1 .pk{color:var(--brand)} .hero h1 .ul{text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:3px;text-underline-offset:5px} .hero-sub{font-size:19px;color:var(--ink-2);margin-bottom:8px} .hero-meta{font-size:13px;color:var(--ink-4);margin-bottom:28px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap} .hero-meta span{display:flex;align-items:center;gap:4px} /* ANIMATED PRICE */ .price-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:24px} .p-badge{background:var(--brand);color:#fff;font-size:15px;font-weight:700;padding:5px 14px;border-radius:8px;opacity:0;transform:scale(0.85);transition:opacity .3s ease .65s,transform .3s ease .65s} .p-badge.go{opacity:1;transform:scale(1)} .p-999{position:relative;display:inline-block;color:var(--ink-3);font-size:24px;font-weight:600;font-family:var(--fb)} .p-999::after{content:'';position:absolute;left:0;top:52%;height:2.5px;background:var(--red-warn);border-radius:2px;width:0;transition:none} .p-999.go::after{animation:strikethru .4s ease forwards .3s} @keyframes strikethru{from{width:0}to{width:100%}} .p-599{font-family:var(--fh);font-size:44px;font-weight:800;color:var(--ink)} /* CTA BUTTON */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--brand);color:#fff;padding:16px 36px;border-radius:50px;font-weight:700;font-size:18px;border:none;cursor:pointer;transition:all .25s;text-align:center;line-height:1.3;font-family:var(--fb);box-shadow:0 6px 24px rgba(224,1,115,.32)} .btn:hover{background:var(--brand-dk);transform:translateY(-2px);box-shadow:0 10px 32px rgba(224,1,115,.42)} .btn svg{width:20px;height:20px;fill:#fff} .btn-inner{display:flex;flex-direction:column;align-items:flex-start} .btn-sub{font-size:12px;font-weight:400;opacity:.85;margin-top:2px} .btn-wrap{text-align:center;margin:24px 0 12px} .btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#fff;padding:12px 24px;border-radius:50px;font-weight:700;font-size:16px;border:none;cursor:pointer;transition:all .2s;font-family:var(--fb)} .btn-sm:hover{background:var(--brand-dk);transform:translateY(-1px)} /* RATING */ .rating-row{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;color:var(--ink-2);font-size:14px;font-weight:500;margin-top:10px} .rating-row .stars{font-size:16px;font-weight:700} @keyframes vpulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}60%{box-shadow:0 0 0 7px rgba(34,197,94,0)}} /* HERO VIDEO (inline in hero) */ .hero-vid{max-width:532px;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;margin:28px auto 32px;position:relative;background:#1a0010;box-shadow:0 8px 32px rgba(0,0,0,.22)} .hero-vid .vid-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.65;transition:opacity .3s} .hero-vid:hover .vid-thumb{opacity:.5} .hero-vid .vid-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px} .hero-vid .vid-play-btn{width:68px;height:68px;background:var(--brand);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 12px rgba(224,1,115,.18),0 0 0 24px rgba(224,1,115,.07);transition:transform .25s} .hero-vid:hover .vid-play-btn{transform:scale(1.1)} .hero-vid .vid-play-btn svg{width:28px;height:28px;fill:#fff;margin-left:4px} .hero-vid .vid-lbl{font-size:12px;color:rgba(255,255,255,.7);font-family:var(--fb)} /* TRUST STRIP */ .trust-strip{background:#f9fafb;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;padding:14px 20px} .trust-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:22px;max-width:860px;margin:0 auto} .t-item{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);font-weight:500} .t-item svg{width:17px;height:17px;fill:var(--brand)} /* PAYMENT ICONS */ .pay-strip{background:#fff;border-bottom:1px solid #f0f0f0;padding:12px 20px;text-align:center} .pay-strip p{font-size:12px;color:var(--ink-4);margin-bottom:8px;font-weight:500;letter-spacing:.3px;text-transform:uppercase} .pay-strip img{max-width:280px;width:50%;height:auto;margin:0 auto;display:block} /* PROBLEM CARDS */ .card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);text-align:center;transition:transform .25s;border:1px solid #f0e8f5;position:relative} .card:hover{transform:translateY(-4px)} .card img{width:100%;aspect-ratio:3/2;object-fit:cover} .card-emoji{position:absolute;top:10px;left:10px;width:32px;height:32px;background:rgba(255,255,255,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 8px rgba(0,0,0,.12)} .card h3{font-family:var(--fh);font-size:17px;padding:16px 12px;color:var(--ink);font-weight:700;line-height:1.35} /* STORY / EPIPHANY */ .story-inner{display:grid;grid-template-columns:1fr 1.3fr;gap:52px;align-items:center;max-width:1000px;margin:0 auto} .story-inner img{border-radius:20px;box-shadow:var(--sh);max-width:380px;margin:0 auto} .story-quote{font-family:var(--fh);font-size:22px;font-style:italic;color:var(--brand);line-height:1.5;margin-bottom:16px;padding-left:20px;border-left:3px solid var(--brand)} .story-body p{font-size:16px;color:var(--ink-2);line-height:1.8;margin-bottom:12px} .story-body strong{color:var(--ink);font-weight:600} /* FUTURE PACING */ .future-track{display:flex;align-items:flex-start;gap:0;max-width:720px;margin:0 auto;position:relative} .future-track::before{content:'';position:absolute;top:22px;left:calc(16.67% - 0px);right:calc(16.67%);height:2px;background:linear-gradient(90deg,var(--brand),var(--brand-xdk));z-index:0} .f-step{flex:1;text-align:center;position:relative;z-index:1} .f-dot{width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--fh);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 4px 14px rgba(224,1,115,.35)} .f-step h4{font-family:var(--fh);font-size:17px;font-weight:700;color:var(--ink);margin-bottom:5px} .f-step p{font-size:14px;color:var(--ink-3);line-height:1.5} /* LOCKED PEEK CARDS */ .peek-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:720px;margin:0 auto} .peek-card{border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:3/4;cursor:pointer;transition:transform .25s} .peek-card:hover{transform:translateY(-3px)} .pk-bg{position:absolute;inset:0;background:linear-gradient(145deg,var(--brand-dk) 0%,var(--brand-xdk) 100%)} .pk-bg-free{position:absolute;inset:0;background:linear-gradient(145deg,#4a0028 0%,var(--brand-xdk) 100%)} .pk-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:16px;justify-content:space-between} .pk-week{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(255,255,255,.12);padding:3px 10px;border-radius:10px;display:inline-block;align-self:flex-start} .pk-free-badge{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#fff;background:var(--green);padding:3px 10px;border-radius:10px;display:inline-block;align-self:flex-start} .pk-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 0} .pk-name{font-family:var(--fh);font-size:17px;font-weight:700;color:#fff;text-align:center;line-height:1.3} .pk-diff{font-size:12px;color:rgba(255,255,255,.7);text-align:center} .pk-blurred .pk-name,.pk-blurred .pk-diff{filter:blur(6px);user-select:none} .pk-lock{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);margin:0 auto 8px} .pk-lock svg{width:22px;height:22px;fill:#fff} .pk-bottom{text-align:center;color:#fff} .pk-stars{color:gold;font-size:13px} /* PEEK OVERLAY */ .pk-overlay{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.92);padding:20px;transform:translateY(100%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);z-index:5;text-align:center;border-radius:0 0 var(--r) var(--r)} .peek-card.open .pk-overlay{transform:translateY(0)} .pk-overlay p{font-size:14px;color:rgba(255,255,255,.85);margin-bottom:12px;line-height:1.5} .pk-overlay a{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;padding:10px 20px;border-radius:50px;font-weight:700;font-size:15px;font-family:var(--fb);transition:background .2s} .pk-overlay a:hover{background:var(--brand-dk)} .pk-close{position:absolute;top:8px;right:10px;color:rgba(255,255,255,.4);font-size:18px;cursor:pointer;padding:4px;line-height:1} .pk-close:hover{color:#fff} /* VALUE STACK */ .stack-wrap{max-width:580px;margin:0 auto;background:#fff;border-radius:var(--r-lg);border:1px solid var(--surface-2);overflow:hidden;box-shadow:var(--sh)} .stack-head{background:var(--brand);color:#fff;padding:18px 24px;font-family:var(--fh);font-size:18px;font-weight:700;text-align:center} .stack-item{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid var(--surface-2);opacity:0;transform:translateX(-16px);transition:opacity .4s ease,transform .4s ease} .stack-item.in{opacity:1;transform:translateX(0)} .stack-icon{font-size:22px;flex-shrink:0} .stack-label{flex:1;font-size:15px;color:var(--ink);font-weight:500} .stack-value{font-size:15px;color:var(--ink-3);font-weight:600;font-family:var(--fb)} .stack-total{padding:16px 24px 0;display:flex;justify-content:space-between;align-items:center} .stack-total .t-label{font-size:14px;color:var(--ink-3)} .stack-total .t-val{font-size:18px;color:var(--ink-3);text-decoration:line-through;font-weight:600} .stack-reveal{padding:12px 24px 20px;text-align:center;border-top:1px dashed var(--surface-2);margin-top:16px} .stack-today{font-size:14px;color:var(--ink-3);margin-bottom:4px} .stack-price-anim{font-family:var(--fh);font-size:46px;font-weight:800;color:var(--ink);line-height:1} .stack-badge{display:inline-block;background:var(--brand);color:#fff;font-size:13px;font-weight:700;padding:4px 14px;border-radius:8px;margin-bottom:16px;opacity:0;transition:opacity .3s ease .2s} .stack-badge.in{opacity:1} /* CHECKLIST */ .check-list{max-width:600px;margin:0 auto 28px} .check-list li{display:flex;gap:12px;padding:11px 0;font-size:16px;color:var(--ink-2);line-height:1.6;align-items:flex-start;border-bottom:1px solid var(--surface-2)} .check-list li:last-child{border-bottom:none} .check-list svg{flex-shrink:0;width:22px;height:22px;fill:var(--green);margin-top:3px} /* FEATURE BOXES */ .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:600px;margin:0 auto 28px} .f-box{background:#fff;border:1px solid var(--surface-2);border-radius:var(--r);padding:18px;display:flex;gap:12px;align-items:flex-start} .f-box .fi{font-size:22px;flex-shrink:0;margin-top:2px} .f-box h4{font-family:var(--fb);font-size:15px;font-weight:600;color:var(--ink);margin-bottom:3px} .f-box p{font-size:13px;color:var(--ink-3);line-height:1.5;margin:0} /* DELIVERY STEPS */ .dsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:720px;margin:0 auto 32px} .dstep{text-align:center;padding:24px 18px;background:#fff;border-radius:var(--r);border:1px solid var(--surface-2)} .d-num{width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-family:var(--fh);box-shadow:0 4px 14px rgba(224,1,115,.3)} .dstep h4{font-family:var(--fb);font-size:16px;font-weight:600;color:var(--ink);margin-bottom:6px} .dstep p{font-size:13px;color:var(--ink-3);line-height:1.55;margin:0} /* PRIVACY BOX */ .priv-box{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--r);padding:20px 24px;max-width:620px;margin:0 auto;display:flex;gap:16px;align-items:flex-start} .priv-box svg{width:28px;height:28px;fill:var(--green);flex-shrink:0;margin-top:3px} .priv-box h4{font-size:16px;font-weight:600;color:#15803d;margin-bottom:4px;font-family:var(--fb)} .priv-box p{font-size:13px;color:#166534;line-height:1.6;margin:0} /* TESTI CAROUSEL */ .testi-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 12px;scrollbar-width:thin} .testi-track::-webkit-scrollbar{height:5px} .testi-track::-webkit-scrollbar-thumb{background:var(--brand);border-radius:3px} .testi-track img{flex:0 0 auto;width:230px;border-radius:10px;scroll-snap-align:start;box-shadow:var(--sh)} /* STAT COUNTERS */ .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px} .stat-box{text-align:center;padding:24px 16px;background:rgba(255,255,255,.06);border-radius:var(--r);border:1px solid rgba(255,255,255,.1)} .stat-num{font-family:var(--fh);font-size:36px;font-weight:800;color:#fff;line-height:1} .stat-suffix{font-size:24px} .stat-lbl{font-size:13px;color:rgba(255,255,255,.55);margin-top:6px} /* REVIEWS */ .r-filter{text-align:center;margin-bottom:24px} .r-filter select{padding:9px 16px;border-radius:24px;border:1px solid #d1d5db;font-family:var(--fb);font-size:14px;min-width:240px;background:#fff;cursor:pointer;color:var(--ink)} .r-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .r-card{background:#fff;border-radius:10px;box-shadow:var(--sh);padding:18px;display:flex;flex-direction:column;border:1px solid #f9f0f6} .r-card.hidden{display:none} .r-head{display:flex;align-items:center;margin-bottom:10px} .r-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff;margin-right:10px;flex-shrink:0} .r-name{font-weight:600;font-size:14px;color:var(--ink)} .r-city{font-size:12px;color:var(--ink-3);margin-top:1px} .r-stars{color:gold;font-size:13px;margin-top:3px} .r-body{font-size:14px;color:var(--ink-2);line-height:1.58;flex-grow:1;margin-bottom:8px} .r-date{font-size:11px;color:var(--ink-4)} /* WHO IS IT FOR */ .who-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:700px;margin:0 auto} .who-card{padding:16px 18px;border-radius:var(--r);display:flex;gap:12px;align-items:flex-start} .who-yes{background:#f0fdf4;border:1px solid #bbf7d0} .who-no{background:#fef2f2;border:1px solid #fecaca} .who-icon{font-size:18px;flex-shrink:0;margin-top:1px} .who-card p{font-size:15px;color:var(--ink-2);margin:0;line-height:1.5} /* FAQ */ .faq-item{border:1px solid #e5e7eb;border-radius:10px;margin-bottom:10px;overflow:hidden;background:#fff} .faq-q{padding:17px 20px;font-weight:600;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--ink);gap:12px;font-family:var(--fb)} .faq-arrow{width:20px;height:20px;flex-shrink:0;fill:var(--brand);transition:transform .3s} .faq-item.open .faq-arrow{transform:rotate(180deg)} .faq-a{padding:0 20px;max-height:0;overflow:hidden;transition:all .3s ease;color:var(--ink-2);font-size:15px;line-height:1.7} .faq-item.open .faq-a{padding:0 20px 18px;max-height:400px} .faq-belief{font-size:12px;color:var(--ink-4);font-style:italic;display:block;margin-bottom:8px} /* GET COPY */ .get-copy-inner{background:linear-gradient(135deg,var(--surface),var(--surface-2));border-radius:var(--r-lg);padding:48px 44px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;max-width:960px;margin:0 auto} .get-copy-inner h2{font-family:var(--fh);font-size:32px;font-weight:700;color:var(--ink);margin-bottom:4px} .get-copy-inner p{color:#7c3aed;font-size:15px;margin:0} /* FOOTER */ .footer{background:var(--ink);color:#9ca3af;text-align:center;padding:40px 20px;font-size:13px} .footer img{max-width:150px;margin:0 auto 14px;filter:brightness(0) invert(1)} .footer a{color:#d1d5db} .footer-links{margin-top:12px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap} .footer-links a{color:#9ca3af;font-size:12px} .footer-links span{color:#4b5563} /* STICKY BAR */ .sticky-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -3px 20px rgba(0,0,0,.13);padding:10px 18px;z-index:999;display:flex;justify-content:space-between;align-items:center;gap:12px} .sb-price{display:flex;align-items:center;gap:8px;flex-shrink:0} .sb-now{font-size:22px;font-weight:800;color:var(--ink);font-family:var(--fh)} .sb-strike{font-size:14px;color:var(--ink-4);text-decoration:line-through} .sb-cd{display:flex;gap:8px;align-items:center;flex:1;justify-content:center} .sb-cd-lbl{font-size:12px;color:var(--ink-3);font-weight:500} .sb-unit{text-align:center} .sb-num{background:var(--ink);color:#fff;padding:5px 9px;border-radius:5px;font-weight:700;font-size:17px;display:block;min-width:36px} .sb-sub{font-size:10px;color:var(--ink-4);margin-top:2px;display:block;text-transform:uppercase} .sb-actions{display:flex;align-items:center;gap:8px;flex-shrink:0} .sticky-bar .btn{padding:11px 20px;font-size:15px} /* exit intent */ .exit-bar{position:fixed;bottom:58px;left:0;right:0;z-index:9000;background:var(--brand);color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;transform:translateY(calc(100% + 60px));transition:transform .4s cubic-bezier(.34,1.2,.64,1);box-shadow:0 -4px 20px rgba(224,1,115,.3)} .exit-bar.show{transform:translateY(0)} .exit-bar p{font-size:15px;font-weight:500;margin:0;flex:1} .exit-bar .e-actions{display:flex;align-items:center;gap:10px;flex-shrink:0} .exit-bar a.e-btn{background:#fff;color:var(--brand);padding:9px 20px;border-radius:50px;font-weight:700;font-size:14px;font-family:var(--fb);transition:opacity .2s} .exit-bar a.e-btn:hover{opacity:.9} .exit-dismiss{font-size:13px;color:rgba(255,255,255,.6);cursor:pointer;text-decoration:underline} .exit-dismiss:hover{color:#fff} /* ============ STICKY SIDEBAR (desktop only) ============ */ .sidebar-offer{position:fixed;right:-300px;top:50%;transform:translateY(-50%);width:240px;background:#fff;border-radius:var(--r-lg) 0 0 var(--r-lg);box-shadow:-4px 0 32px rgba(0,0,0,.14);padding:20px 18px;z-index:900;transition:right .45s cubic-bezier(.34,1.2,.64,1);border-left:3px solid var(--brand)} .sidebar-offer.show{right:0} .sidebar-offer .so-label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--brand);margin-bottom:8px} .sidebar-offer .so-title{font-family:var(--fh);font-size:17px;font-weight:700;color:var(--ink);margin-bottom:4px;line-height:1.3} .sidebar-offer .so-sub{font-size:12px;color:var(--ink-3);margin-bottom:14px;line-height:1.5} .sidebar-offer .so-price{display:flex;align-items:baseline;gap:8px;margin-bottom:14px} .sidebar-offer .so-now{font-family:var(--fh);font-size:28px;font-weight:800;color:var(--ink)} .sidebar-offer .so-strike{font-size:15px;color:var(--ink-4);text-decoration:line-through} .sidebar-offer .so-cta{display:block;background:var(--brand);color:#fff;padding:11px 14px;border-radius:50px;font-weight:700;font-size:14px;text-align:center;font-family:var(--fb);transition:background .2s;margin-bottom:8px} .sidebar-offer .so-cta:hover{background:var(--brand-dk)} .sidebar-offer .so-trust{font-size:11px;color:var(--ink-4);text-align:center} .sidebar-close{position:absolute;top:8px;right:10px;font-size:16px;color:var(--ink-4);cursor:pointer;line-height:1;padding:2px} .sidebar-close:hover{color:var(--ink)} @media(max-width:1024px){.sidebar-offer{display:none}} /* ============ SIDE SLIDE-IN EXIT (desktop) ============ */ @media(min-width:768px){ .exit-bar{bottom:auto;top:50%;transform:translateY(-50%) translateX(110%);right:0;left:auto;width:300px;flex-direction:column;align-items:flex-start;border-radius:var(--r-lg) 0 0 var(--r-lg);box-shadow:-4px 0 24px rgba(224,1,115,.3);padding:24px 20px} .exit-bar.show{transform:translateY(-50%) translateX(0)} .exit-bar p{font-size:14px;margin-bottom:14px} .exit-bar .e-actions{flex-direction:column;align-items:stretch;width:100%;gap:8px} .exit-bar a.e-btn{text-align:center;padding:11px} } /* ============ DESKTOP HERO — 2 column ============ */ @media(min-width:768px){ .hero{padding:52px 40px 44px;text-align:left;max-width:1100px;margin:0 auto} .hero-inner{display:grid;grid-template-columns:1fr 532px;gap:48px;align-items:center} .hero-left{display:flex;flex-direction:column;align-items:flex-start} .hero-hook{text-align:left} .hero h1{text-align:left;font-size:48px} .hero-sub{text-align:left} .hero-meta{justify-content:flex-start} .price-row{justify-content:flex-start} .btn-wrap{text-align:left;margin:20px 0 10px} .rating-row{justify-content:flex-start} .hero-vid{margin:0;max-width:100%;border-radius:var(--r-lg)} } /* ============ DESKTOP SECTIONS ============ */ @media(min-width:768px){ /* Problems: 2x2 already set */ .card img{aspect-ratio:16/9} /* Value stack + checklist side by side */ .stack-check-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;max-width:1000px;margin:0 auto} /* Delivery steps: horizontal with arrows */ .dsteps{grid-template-columns:repeat(3,1fr);position:relative} .dsteps::before{content:'';position:absolute;top:22px;left:calc(16.7% + 20px);right:calc(16.7% + 20px);height:2px;background:linear-gradient(90deg,var(--surface-2),var(--brand),var(--surface-2));z-index:0} /* FAQ 2-column */ .faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start} /* Reviews 3-col stays, stat grid 4-col stays */ /* Future track: proper horizontal on desktop */ .future-track::before{display:block} .future-track{flex-direction:row} /* Who-grid: 3-col on desktop */ .who-grid{grid-template-columns:repeat(3,1fr);max-width:900px} } /* ============ RESPONSIVE ============ */ @media(max-width:860px){ .story-inner{grid-template-columns:1fr;text-align:center} .story-inner img{max-width:320px} .story-quote{border-left:none;padding-left:0;border-top:3px solid var(--brand);padding-top:12px} .stat-grid{grid-template-columns:repeat(2,1fr)} .r-grid{grid-template-columns:repeat(2,1fr)} .peek-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .hero h1{font-size:30px} .hero-sub{font-size:16px} .h2{font-size:26px} .blk,.blk-tint,.blk-pink,.blk-dark{padding:44px 0} .card-grid{grid-template-columns:1fr!important} .dsteps{grid-template-columns:1fr} .feat-grid{grid-template-columns:1fr} .who-grid{grid-template-columns:1fr} .r-grid{grid-template-columns:1fr} .future-track{flex-direction:column;align-items:center;gap:24px} .future-track::before{display:none} .get-copy-inner{flex-direction:column;text-align:center;padding:32px 20px} .sticky-bar .sb-cd{display:none} .peek-grid{grid-template-columns:repeat(2,1fr)} .exit-bar{flex-direction:column;text-align:center} .p-599{font-size:36px} .stack-price-anim{font-size:38px} } /* -------------------------------------------------------------------------- NO-JS SAFETY NET .rv starts at opacity:0 and is revealed by an IntersectionObserver in landing.js. If that script fails to load — CDN blip, blocked JS, an error earlier in the file — the entire page body would render invisible. The flag is set inline in , so the hidden state only ever applies when JS is actually running. -------------------------------------------------------------------------- */ html:not(.js) .rv { opacity: 1 !important; transform: none !important; } /* --------------------------------------------------------------------------- LAYERING SCALE — single source of truth for everything fixed/sticky. The original values were ad hoc (900 / 999 / 9000 / 9999) and the site footer added a concierge widget at 999999 and a mobile nav at 99990, which sat on top of the sticky buy bar. Step pages no longer load that footer, but the scale is pinned here so anything added later slots in deliberately instead of by guessing a bigger number. 100 sidebar offer (side card, must sit under the bottom bars) 200 sticky buy bar (bottom:0 — the primary CTA, always reachable) 300 exit-intent bar (bottom:58px — stacks directly above the buy bar) 400 scroll progress (3px top line) 450 purchase toast (transient social proof, above the bars, under modals) 500 modal (blocks everything while open) --------------------------------------------------------------------------- */ .sidebar-offer { z-index: 100; } .sticky-bar { z-index: 200; } .exit-bar { z-index: 300; } #prog { z-index: 400; } .purchase-toast { z-index: 450; } .modal-bg { z-index: 500; } /* The sticky bar overlays the end of the page; keep the mini footer clear of it. Scoped to :has(.sticky-bar) because this stylesheet is shared by every page — homepage, blog, category, policy — not just /step/ pages. A bare `body{}` rule here leaked 84px of dead space onto the bottom of every page on the site, including ones with no sticky bar to clear. */ body:has(.sticky-bar) { padding-bottom: 84px; } .footer { padding-bottom: 24px; } /* Side offer card hides on narrow screens — at tablet width and below it overlapped the footer columns and the buy bar. */ @media (max-width: 1024px) { .sidebar-offer { display: none !important; } }