/* ============================================================ ScamDrill — shared landing-page system (redesign) One stylesheet, themed per page via --accent on . Type: Bricolage Grotesque (display) + Hanken Grotesk (text). ============================================================ */ :root{ /* Ink & neutrals — slightly warm, calmer than pure gray */ --ink:#10182b; /* near-navy text / headings */ --ink-soft:#3a4356; --muted:#697086; --muted-2:#8b91a3; --line:#e7e9ef; --line-2:#eef0f5; --bg:#ffffff; --bg-tint:#f6f7fb; /* section alt background */ --bg-tint-2:#fbfbfd; --card:#ffffff; /* Semantic */ --green:#15875a; --green-bg:#eafaf1; --red:#d6443a; --red-bg:#fdf0ef; --amber:#d98318; /* Accent — default = ScamDrill blue (Family/Business). Pages override. */ --accent:#2563eb; --accent-strong:#1d4ed8; --accent-ink:#1a2c63; /* dark accent for text on tint */ --accent-bg:#eef3ff; /* faint accent wash */ --accent-glow:37,99,235; /* rgb for rgba() glows */ /* Type — Inter is the brand default; Bricolage/Schibsted available via Tweaks */ --font-display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* Shape & depth */ --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --shadow-sm:0 1px 2px rgba(16,24,43,.05),0 1px 1px rgba(16,24,43,.04); --shadow-md:0 4px 14px -4px rgba(16,24,43,.10),0 2px 6px -2px rgba(16,24,43,.06); --shadow-lg:0 24px 50px -18px rgba(16,24,43,.28),0 0 0 1px rgba(16,24,43,.05); --shadow-cta:0 8px 22px -6px rgba(var(--accent-glow),.5); --maxw:1140px; } /* ---- Theme overrides per audience ---- */ body[data-accent="blue"] {--accent:#2563eb;--accent-strong:#1d4ed8;--accent-ink:#1a2c63;--accent-bg:#eef3ff;--accent-glow:37,99,235} body[data-accent="amber"] {--accent:#c9690e;--accent-strong:#a8560a;--accent-ink:#7a3d05;--accent-bg:#fdf2e6;--accent-glow:201,105,14} body[data-accent="violet"] {--accent:#6d34d6;--accent-strong:#5a27ba;--accent-ink:#3f1c80;--accent-bg:#f3eefe;--accent-glow:109,52,214} body[data-accent="slate"] {--accent:#2f5fce;--accent-strong:#244db0;--accent-ink:#1d3a82;--accent-bg:#eef2fb;--accent-glow:47,95,206} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-text); color:var(--ink-soft); background:var(--bg); line-height:1.6; font-size:17px; letter-spacing:-0.003em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);font-weight:700;letter-spacing:-0.02em;line-height:1.05;text-wrap:balance} p{text-wrap:pretty} a{color:inherit} img,svg{display:block;max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .eyebrow{font-family:var(--font-text);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-block} /* ============================================================ HEADER */ .lp-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)} .lp-header-inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px} .logo{font-family:var(--font-display);font-weight:800;font-size:1.18rem;text-decoration:none;display:flex;align-items:center;gap:9px;letter-spacing:-0.02em;color:var(--ink)} .logo .logo-mark{width:30px;height:30px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px -2px rgba(var(--accent-glow),.5)} .logo .logo-mark svg{width:34px;height:34px} .logo b{color:var(--accent);font-weight:800} .lp-header-right{display:flex;align-items:center;gap:18px} .lp-header-trust{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:7px;font-weight:500} .lp-header-trust svg{flex-shrink:0;color:var(--green)} .lp-header-cta{font-size:.9rem;font-weight:600;text-decoration:none;color:var(--ink);padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;transition:border-color .15s,color .15s;white-space:nowrap} .lp-header-cta:hover{border-color:var(--accent);color:var(--accent)} .lp-header-cta-primary{font-size:.9rem;font-weight:700;text-decoration:none;color:#fff;background:var(--accent);padding:9px 17px;border-radius:var(--r-pill);box-shadow:0 4px 12px -3px rgba(var(--accent-glow),.5);transition:background .15s,transform .15s;white-space:nowrap} .lp-header-cta-primary:hover{background:var(--accent-strong);transform:translateY(-1px)} .lp-header-cta-primary .lbl-sm{display:none} @media(max-width:680px){.lp-header-trust{display:none}} @media(max-width:560px){ .lp-header-right{gap:9px} .lp-header-inner{padding-left:16px;padding-right:16px} .lp-header-cta{padding:8px 12px} .lp-header-cta-primary{padding:8px 13px} .lp-header-cta-primary .lbl-lg{display:none} .lp-header-cta-primary .lbl-sm{display:inline} } /* ============================================================ BUTTONS */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-text);font-weight:700;text-decoration:none;cursor:pointer;border:none;transition:transform .15s cubic-bezier(.2,.8,.3,1),box-shadow .15s,background .15s,border-color .15s;letter-spacing:-0.01em} .btn-lg{padding:17px 30px;font-size:1.06rem;border-radius:var(--r-md)} .btn-md{padding:13px 22px;font-size:.98rem;border-radius:var(--r-sm)} .btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-cta)} .btn-primary:hover{background:var(--accent-strong);transform:translateY(-2px);box-shadow:0 12px 28px -6px rgba(var(--accent-glow),.55)} .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn-arrow{transition:transform .15s} .btn:hover .btn-arrow{transform:translateX(3px)} /* micro reassurance row */ .microcopy{margin-top:20px;font-size:.88rem;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-weight:500} .microcopy span{display:inline-flex;align-items:center;gap:7px} .microcopy svg{color:var(--green);flex-shrink:0} /* pill above headline */ .kicker{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:var(--r-pill);font-size:.8rem;font-weight:600;color:var(--ink-soft);margin-bottom:22px;box-shadow:var(--shadow-sm)} .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(21,135,90,.18)} /* ============================================================ HERO */ .hero{position:relative;padding:64px 0 44px;overflow:hidden;background: radial-gradient(120% 80% at 85% -10%,rgba(var(--accent-glow),.10),transparent 55%), linear-gradient(180deg,var(--accent-bg) 0%,#fff 62%)} .hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(16,24,43,.045) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none} .hero-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.12fr .95fr;gap:52px;align-items:center} .hero h1{font-size:clamp(2.3rem,5vw,3.55rem);font-weight:800;color:var(--ink);margin-bottom:20px;letter-spacing:-0.03em} .hero h1 em{font-style:normal;color:var(--accent);position:relative;white-space:nowrap} .hero h1 em::after{content:"";position:absolute;left:-1px;right:-1px;bottom:.06em;height:.30em;background:rgba(var(--accent-glow),.16);border-radius:4px;z-index:-1} .hero-sub{font-size:1.16rem;color:var(--ink-soft);max-width:540px;margin:0 0 28px;line-height:1.55} .hero-cta-row{display:flex;flex-wrap:wrap;gap:13px;align-items:center} /* inline mini social proof under hero CTAs */ .hero-proof{margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .hero-proof-avatars{display:flex} .hero-proof-avatars .av{width:34px;height:34px;border-radius:50%;border:2.5px solid #fff;margin-left:-9px;background:var(--accent-bg);box-shadow:var(--shadow-sm);overflow:hidden} .hero-proof-avatars .av:first-child{margin-left:0} .hero-proof-avatars .av img{width:100%;height:100%;object-fit:cover} .hero-proof-txt{font-size:.86rem;color:var(--muted);font-weight:500;line-height:1.35} .hero-proof-txt b{color:var(--ink);font-weight:700} .hero-stars{color:#e8a008;letter-spacing:1px;font-size:.82rem} /* credibility badge — stands in for star-rating proof until real ratings exist */ .hero-cred{margin-top:26px;display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 17px;box-shadow:var(--shadow-sm);max-width:460px;text-align:left} .hero-cred-ico{width:40px;height:40px;border-radius:11px;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0} .hero-cred-txt{font-size:.85rem;color:var(--muted);line-height:1.45} .hero-cred-txt b{display:block;color:var(--ink);font-weight:700;font-size:.93rem;margin-bottom:1px} .hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:430px} .hero-visual::before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle at center,rgba(var(--accent-glow),.16),transparent 66%);z-index:0} /* ---- Hero variant: CENTERED ---- */ body.hero-centered .hero-inner{grid-template-columns:1fr;text-align:center;gap:34px;max-width:860px} body.hero-centered .hero-sub{margin-left:auto;margin-right:auto} body.hero-centered .hero-cta-row{justify-content:center} body.hero-centered .hero-proof{justify-content:center} body.hero-centered .hero-cred{margin-left:auto;margin-right:auto} body.hero-centered .hero-copy{display:flex;flex-direction:column;align-items:center} body.hero-centered .hero-visual{min-height:0;margin-top:8px} body.hero-centered .microcopy{justify-content:center} /* ---- Hero variant: STATEMENT (editorial, oversized type, mock small/below) ---- */ body.hero-statement .hero{padding-top:72px} body.hero-statement .hero-inner{grid-template-columns:1fr;text-align:center;max-width:1000px;gap:30px} body.hero-statement .hero h1{font-size:clamp(2.6rem,6.6vw,4.6rem);letter-spacing:-0.035em} body.hero-statement .hero-sub{margin-left:auto;margin-right:auto;font-size:1.22rem} body.hero-statement .hero-cta-row,body.hero-statement .hero-proof,body.hero-statement .microcopy{justify-content:center} body.hero-statement .hero-cred{margin-left:auto;margin-right:auto} body.hero-statement .hero-copy{display:flex;flex-direction:column;align-items:center} body.hero-statement .hero-visual{min-height:0;transform:scale(.92)} /* ============================================================ AUTHORITY / SOURCES STRIP */ .authority{padding:26px 0;background:#fff;border-bottom:1px solid var(--line)} .authority-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:14px 34px;flex-wrap:wrap} .authority-label{font-size:.78rem;font-weight:600;letter-spacing:.05em;color:var(--muted);text-transform:uppercase} .authority-orgs{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .authority-org{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;color:var(--ink-soft);font-size:1.02rem;letter-spacing:.01em;opacity:.78} .authority-org svg{color:var(--accent);opacity:.9} /* ============================================================ STAT STRIP */ .stat-strip{padding:46px 0;background:#fff} .stat-strip-inner{max-width:1000px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:0} .stat{padding:6px 26px;text-align:center;position:relative} .stat + .stat::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--line)} .stat-num{font-family:var(--font-display);font-size:2.6rem;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-0.03em;margin-bottom:9px} .stat-num.accent{color:var(--red)} .stat-label{font-size:.9rem;color:var(--muted);line-height:1.45} .stat-label a{color:var(--accent);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(var(--accent-glow),.3)} .stat-label a:hover{border-color:var(--accent)} @media(max-width:720px){.stat-strip-inner{grid-template-columns:1fr;gap:30px}.stat + .stat::before{display:none}} /* ============================================================ SECTION SCAFFOLD */ .section{padding:76px 0} .section.tint{background:var(--bg-tint)} .section-head{max-width:680px;margin:0 auto 48px;text-align:center} .section-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;color:var(--ink);margin-bottom:12px;letter-spacing:-0.025em} .section-head p{color:var(--muted);font-size:1.08rem} /* ---- HOW (steps) ---- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s} .step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .step-ico{width:50px;height:50px;border-radius:13px;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:18px} .step-ico svg{width:25px;height:25px} .step-n{position:absolute;top:26px;right:26px;font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--line);} .step h3{font-size:1.16rem;font-weight:700;margin-bottom:8px} .step p{font-size:.97rem;color:var(--muted);line-height:1.55} @media(max-width:820px){.steps{grid-template-columns:1fr;gap:14px}} /* ============================================================ PROOF / TESTIMONIALS */ .proof{padding:78px 0;background:var(--ink);color:#fff;position:relative;overflow:hidden} .proof::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 80% 0%,rgba(var(--accent-glow),.22),transparent 60%);pointer-events:none} .proof-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 24px} .proof-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap} .proof-top h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.3rem);max-width:560px} .proof-rating{text-align:right} .proof-rating .score{font-family:var(--font-display);font-size:2.4rem;font-weight:800;line-height:1;display:flex;align-items:center;gap:10px} .proof-rating .stars{color:#ffc63d;font-size:1.3rem;letter-spacing:2px} .proof-rating .sub{color:rgba(255,255,255,.6);font-size:.85rem;margin-top:6px;font-weight:500} /* dark-band credibility badge — replaces the rating widget */ .proof-cred{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:14px 18px;max-width:350px} .proof-cred-ico{width:38px;height:38px;border-radius:10px;background:rgba(var(--accent-glow),.30);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0} .proof-cred-txt{font-size:.83rem;color:rgba(255,255,255,.72);line-height:1.4} .proof-cred-txt b{display:block;color:#fff;font-weight:700;font-size:.92rem;font-family:var(--font-display);margin-bottom:1px} .proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .quote{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:28px 26px;display:flex;flex-direction:column;gap:18px;backdrop-filter:blur(4px)} .quote .qmark{color:var(--accent);font-family:var(--font-display);font-size:2.6rem;line-height:.6;font-weight:800;height:18px} .quote p{font-size:1.02rem;color:rgba(255,255,255,.92);line-height:1.55;flex:1} .quote .by{display:flex;align-items:center;gap:12px} .quote .by .av{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);overflow:hidden;flex-shrink:0} .quote .by .av img{width:100%;height:100%;object-fit:cover} .quote .by .nm{font-weight:700;color:#fff;font-size:.95rem} .quote .by .rl{font-size:.82rem;color:rgba(255,255,255,.6)} @media(max-width:880px){.proof-grid{grid-template-columns:1fr}.proof-top{flex-direction:column;align-items:flex-start}.proof-rating{text-align:left}} /* ============================================================ PLANS */ .plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;max-width:1040px;margin:0 auto} .plan{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 26px 26px;box-shadow:var(--shadow-sm)} .plan.popular{border:1.6px solid var(--accent);box-shadow:0 22px 48px -20px rgba(var(--accent-glow),.5);transform:translateY(-6px)} .plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill);white-space:nowrap;box-shadow:var(--shadow-cta)} .plan-name{font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--ink);margin-bottom:12px} .plan-price{font-family:var(--font-display);font-size:2.7rem;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-0.03em} .plan-price span{font-size:.95rem;font-weight:600;color:var(--muted);font-family:var(--font-text)} .plan-note{font-size:.8rem;color:var(--muted);margin-top:9px;min-height:34px;line-height:1.45} .plan-feats{list-style:none;margin:20px 0 24px;padding:0;display:flex;flex-direction:column;gap:12px;flex:1} .plan-feats li{position:relative;padding-left:28px;font-size:.93rem;color:var(--ink-soft);line-height:1.45} .plan-feats li svg{position:absolute;left:0;top:2px;color:var(--green)} .plan-fine{margin-top:12px;font-size:.74rem;color:var(--muted);text-align:center;line-height:1.5} @media(max-width:820px){.plans-grid{grid-template-columns:1fr;gap:26px;max-width:420px}.plan.popular{order:-1;transform:none}} /* ============================================================ FAQ */ .faq{max-width:760px;margin:0 auto} .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;background:none;border:none;text-align:left;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--ink);padding:22px 44px 22px 0;cursor:pointer;position:relative;display:flex;letter-spacing:-0.01em} .faq-q::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-65%) rotate(45deg);transition:transform .25s} .faq-item.open .faq-q::after{transform:translateY(-35%) rotate(-135deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease} .faq-a-inner{padding:0 0 22px;color:var(--muted);font-size:1rem;line-height:1.6;max-width:660px} .faq-item.open .faq-a{max-height:340px} /* ============================================================ FINAL CTA */ .final{padding:84px 0;text-align:center;background: radial-gradient(100% 80% at 50% 120%,rgba(var(--accent-glow),.12),transparent 60%), linear-gradient(180deg,#fff,var(--accent-bg))} .final h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;margin-bottom:14px;letter-spacing:-0.03em} .final p{color:var(--ink-soft);max-width:560px;margin:0 auto 30px;font-size:1.1rem} /* ============================================================ BLOG */ .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px} .blog-card{display:block;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s} .blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent)} .blog-tag{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--accent);margin-bottom:12px;display:block} .blog-card h3{font-size:1.06rem;font-weight:700;margin-bottom:9px;line-height:1.3;letter-spacing:-0.01em} .blog-card p{font-size:.9rem;color:var(--muted);line-height:1.5} /* ============================================================ FOOTER */ .lp-footer{padding:30px 0;border-top:1px solid var(--line);background:#fff} .lp-footer-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:.85rem;color:var(--muted)} .lp-footer nav{display:flex;gap:22px;flex-wrap:wrap} .lp-footer a{color:var(--muted);text-decoration:none} .lp-footer a:hover{color:var(--accent)} /* ============================================================ MOBILE STICKY CTA */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(14px);border-top:1px solid var(--line);box-shadow:0 -6px 24px -10px rgba(16,24,43,.2);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.3,1)} .sticky-cta.show{transform:translateY(0)} .sticky-cta-inner{display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto} .sticky-cta .sc-copy{flex:1;min-width:0} .sticky-cta .sc-title{font-family:var(--font-display);font-weight:800;font-size:.96rem;color:var(--ink);line-height:1.15} .sticky-cta .sc-sub{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sticky-cta .btn{flex-shrink:0;padding:13px 20px;font-size:.96rem} @media(max-width:768px){.sticky-cta{display:block}body.has-sticky{padding-bottom:78px}} /* ============================================================ EMAIL MOCK (shared) */ .email-mock{width:410px;max-width:100%;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);position:relative;z-index:2} .email-chrome{display:flex;align-items:center;gap:6px;padding:11px 15px;background:#f7f8fb;border-bottom:1px solid #e9ebf1;border-radius:var(--r-lg) var(--r-lg) 0 0} .email-chrome-dots{display:flex;gap:6px} .email-chrome-dots span{width:10px;height:10px;border-radius:50%} .email-chrome-dots span:nth-child(1){background:#fb7185}.email-chrome-dots span:nth-child(2){background:#fbbf24}.email-chrome-dots span:nth-child(3){background:#34d399} .email-chrome-title{margin-left:10px;font-size:.74rem;font-weight:600;color:#7a8194;display:flex;align-items:center;gap:6px} .email-header{padding:18px 20px 14px;border-bottom:1px solid #f1f2f6} .email-from-row{display:flex;align-items:center;gap:12px;margin-bottom:13px} .email-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;flex-shrink:0} .email-from-name{font-size:.9rem;font-weight:700;color:#10182b} .email-from-addr{font-size:.76rem;color:#9aa0b1;margin-top:1px} .email-time{margin-left:auto;font-size:.74rem;color:#9aa0b1;font-weight:500} .email-subject{font-size:1.02rem;font-weight:700;color:#10182b;line-height:1.35;letter-spacing:-0.01em;font-family:var(--font-display)} .email-subject .urgent-tag{display:inline-block;background:var(--red-bg);color:var(--red);font-size:.62rem;font-weight:700;letter-spacing:.07em;padding:3px 7px;border-radius:5px;vertical-align:middle;margin-right:7px;text-transform:uppercase;font-family:var(--font-text)} .email-body{padding:18px 20px 22px;font-size:.86rem;line-height:1.62;color:#46506a} .email-body p{margin-bottom:11px}.email-body p:last-child{margin-bottom:0} .email-body .link{color:var(--accent);text-decoration:underline;word-break:break-all} .email-redflag,.sms-redflag{position:absolute;z-index:6;background:#fff;border-radius:11px;padding:7px 11px 7px 9px;box-shadow:0 10px 24px -6px rgba(214,68,58,.32),0 0 0 1px rgba(214,68,58,.14);display:flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;color:var(--red)} .email-redflag::before,.sms-redflag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(214,68,58,.2)} .email-redflag.rf-domain{top:80px;right:-28px;animation:rf-in-r .55s cubic-bezier(.16,1,.3,1) .7s both} .email-redflag.rf-urgency{top:150px;left:-38px;animation:rf-in-l .55s cubic-bezier(.16,1,.3,1) 1s both} @keyframes rf-in-l{from{opacity:0;transform:translateX(-10px) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}} @keyframes rf-in-r{from{opacity:0;transform:translateX(10px) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}} @media(prefers-reduced-motion:reduce){.email-redflag,.sms-redflag,.ig-redflag,.spotted{animation:none!important;opacity:1!important}} /* positive "scam spotted" payoff badge — the green counterpart to the red flags */ .spotted{position:absolute;z-index:8;background:#fff;border-radius:11px;padding:7px 13px 7px 10px;box-shadow:0 12px 26px -6px rgba(21,135,90,.34),0 0 0 1px rgba(21,135,90,.18);display:flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;color:var(--green);white-space:nowrap} .spotted svg{width:15px;height:15px;flex-shrink:0} @keyframes spotted-pop{0%{opacity:0;transform:scale(.78)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}} .email-mock .spotted{bottom:-16px;right:20px;animation:spotted-pop .5s cubic-bezier(.16,1,.3,1) 1.35s both} .sms-phone .spotted{bottom:70px;left:-52px;animation:spotted-pop .5s cubic-bezier(.16,1,.3,1) 1.35s both} @media(max-width:560px){.email-mock .spotted{right:4px;bottom:-14px}.sms-phone .spotted{left:2px;bottom:60px}} /* ============================================================ RESPONSIVE HERO */ @media(max-width:1024px){ .hero-inner{grid-template-columns:1fr;gap:34px;text-align:center} .hero-copy{display:flex;flex-direction:column;align-items:center} .hero-sub{margin-left:auto;margin-right:auto} .hero-cta-row,.microcopy,.hero-proof{justify-content:center} .hero-visual{order:3;min-height:0} } @media(max-width:560px){ body{font-size:16px} .hero{padding:40px 0 28px} .hero-cta-row{flex-direction:column;align-items:stretch;width:100%} .hero-cta-row .btn{width:100%} .email-mock{max-width:340px} .email-redflag.rf-domain{right:0}.email-redflag.rf-urgency{left:0} .section{padding:54px 0} .proof{padding:56px 0} .final{padding:60px 0} .wrap,.hero-inner,.stat-strip-inner,.lp-header-inner,.lp-footer-inner,.authority-inner,.proof-inner{padding-left:18px;padding-right:18px} } /* ============================================================ TWEAKS host */ #tweaks-root{position:fixed;z-index:90}