/* ---- Global mobile guardrails ---- */
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }
section { overflow-wrap: anywhere; word-break: break-word; }
/* Headings & text sizing on small screens */
@media (max-width: 480px) { h1 { font-size: 30px !important; line-height: 1.25 !important; } h2 { font-size: 26px !important; line-height: 1.28 !important; } h3 { font-size: 18px !important; line-height: 1.35 !important; } p, li { font-size: 16px !important; line-height: 1.6 !important; }
}
/* ---- Section-specific fixes ---- */
/* The Short Answer (id="verdict") */
@media (max-width: 768px) { #verdict { padding: 48px 16px !important; } #verdict div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 18px !important; } #verdict [style*="padding:22px"] { padding: 18px !important; }
}
/* Why Is It Different? (id="nsps-why-diff") */
@media (max-width: 768px) { #nsps-why-diff { padding: 48px 16px !important; } #nsps-why-diff .grid { grid-template-columns: 1fr !important; gap: 16px !important; } #nsps-why-diff .card { padding: 18px !important; }
}
/* How The No Sale Profit System Works (id="how") */
@media (max-width: 768px) { #how { padding: 48px 16px !important; } #how div[style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; gap: 16px !important; } #how [style*="padding:22px"] { padding: 18px !important; }
}
/* Who Is It For? */
@media (max-width: 768px) { section div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 16px !important; }
}
/* Keep buttons full width & readable */
@media (max-width: 480px) { a, .btn, button { font-size: 16px !important; padding: 14px 16px !important; display: inline-block; width: 100% !important; text-align: center; }
}
/* ===== Mobile polish pack — v2 ===== */
@media (max-width: 520px){ /* 1) Force any 2-column grids to stack to 1 column */ .gpblsh [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns: 1fr !important; } .gpblsh [style*="grid-template-columns:repeat(2"]{ grid-template-columns: 1fr !important; } /* Handle “two columns via flex” layouts: make each child full width */ .gpblsh [style*="display:flex"][style*="wrap"] > *{ flex: 1 1 100% !important; max-width: 100% !important; } /* Checklist readability */ .gpblsh ul{ padding-left: 1.1rem !important; } .gpblsh li{ line-height: 1.55 !important; overflow-wrap: anywhere; /* keeps long phrases from pushing past the edge */ } .gpblsh li + li{ margin-top: 10px; } /* 2) Testimonials: make each card full width & stack vertically */ /* Container often uses flex with gap; this makes each card 100% width */ .gpblsh [style*="display:flex"][style*="gap"] > div{ min-width: 0 !important; width: 100% !important; } /* Nice spacing between cards */ .gpblsh [style*="box-shadow"][style*="border-radius"]{ margin: 0 0 14px !important; }
}
/* Style all buttons inside the hero section */
.hero-section button,
.hero-section a.button,
.hero-section .button { background-color: #0088ff !important; /* Bright blue (primary) */ color: #ffffff !important; border: none !important; border-radius: 6px !important; padding: 14px 22px !important; font-size: 16px !important; font-weight: bold !important; text-align: center; display: inline-block; width: 100%; max-width: 320px; margin: 10px auto !important; transition: background-color 0.3s ease, transform 0.2s ease;
}
/* 🔵 Primary CTA Button (blue) */
.cta-primary { background-color: #0088ff !important; color: #ffffff !important; font-weight: 700 !important; padding: 14px 26px !important; border-radius: 8px !important; text-decoration: none !important; display: inline-block !important; box-shadow: 0 4px 10px rgba(0, 136, 255, 0.35); transition: background-color 0.3s ease, transform 0.2s ease;
}
.cta-primary:hover { background-color: #006fd6 !important; transform: translateY(-2px);
}
/* ⚪ Secondary CTA Button (outline) */
.cta-secondary { background-color: #ffffff !important; color: #0088ff !important; border: 2px solid #0088ff !important; font-weight: 700 !important; padding: 14px 26px !important; border-radius: 8px !important; text-decoration: none !important; display: inline-block !important; transition: background-color 0.3s ease, transform 0.2s ease;
}
.cta-secondary:hover { background-color: #f4f8ff !important; transform: translateY(-2px);
}
/* ===== How It Works — layout ===== */
.nsps-steps { max-width: 1100px; margin: 0 auto; padding: 24px 16px 8px;
}
/* Match your lighter H2 style (not extra-bold) */
.nsps-h2 { font-size: clamp(28px, 4.2vw, 38px); line-height: 1.2; font-weight: 700; /* lighter than 800/900 */ margin: 8px 0 10px; text-align: left;
}
.nsps-sub { text-align: left; color: #3a3a3a; font-size: clamp(16px, 2.6vw, 18px); margin: 0 0 20px;
}
/* Cards grid */
.nsps-grid { display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 640px) { .nsps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) { .nsps-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Individual card */
.nsps-card { background: #fff; border-radius: 14px; padding: 18px 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); text-align: left; transition: transform .16s ease, box-shadow .16s ease;
}
.nsps-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}
/* Emoji icon */
.nsps-emoji { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #F0F7FF; /* soft blue badge */ font-size: 24px; margin-bottom: 10px;
}
/* Card title + text */
.nsps-card-title { font-size: 18px; line-height: 1.25; margin: 4px 0 6px; font-weight: 700;
}
.nsps-card p { margin: 0; color: #333; font-size: 15.5px; line-height: 1.55;
}
/* Tip bar */
.nsps-tip { margin: 16px 0 0; background: #ECFDF5; /* light success */ border: 1px solid #CFFAE3; color: #065F46; border-radius: 12px; padding: 10px 12px; font-size: 14.5px; display: flex; align-items: center; gap: 8px;
}
.nsps-tip-ico { font-size: 18px; }
/* Make sure emojis don’t wrap oddly on some devices */
.nsps-emoji, .nsps-tip-ico { line-height: 1; }
/* =========================== Final Verdict (updated) Keep HTML as-is; CSS only =========================== */
.final-verdict { margin: 64px auto 56px; max-width: 980px; padding: 28px 28px 24px; background: #0b0b0b; /* dark card */ border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); animation: verdictFadeIn 600ms ease-out both;
}
.final-verdict .verdict-eyebrow { display: inline-block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin-bottom: 10px;
}
.final-verdict h2,
.final-verdict h3 { margin: 0 0 10px; line-height: 1.15;
}
.final-verdict h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800;
}
.final-verdict h3 { font-size: clamp(16px, 1.8vw, 18px); font-weight: 700; opacity: .95;
}
.final-verdict p { margin: 10px 0 0; font-size: clamp(14px, 1.7vw, 16px); line-height: 1.6; opacity: .92;
}
.verdict-box { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px;
}
.verdict-box .box { padding: 18px 16px; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}
.verdict-box .box h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
}
.verdict-box .box h3 .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px;
}
/* Variants */
.verdict-box.fit h3 .dot,
.verdict-box .box.fit h3 .dot { background: #33d69f; /* “fit” = green */ box-shadow: 0 0 0 3px rgba(51,214,159,0.15);
}
.verdict-box.need h3 .dot,
.verdict-box .box.need h3 .dot { background: #ffac33; /* “need” = amber */ box-shadow: 0 0 0 3px rgba(255,172,51,0.15);
}
/* Subtle divider between headline and text (optional) */
.final-verdict .hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); margin: 14px 0 6px;
}
/* Fade-in animation */
@keyframes verdictFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) { .final-verdict { animation: none; }
}
/* Responsive tweaks */
@media (max-width: 768px) { .final-verdict { margin: 44px auto 40px; padding: 20px 16px; border-radius: 16px; } .verdict-box { grid-template-columns: 1fr; gap: 14px; } .final-verdict h2 { font-size: clamp(20px, 5vw, 24px); }
}
/* === End Final Verdict (updated) === */
/* ===== Final Verdict – compatibility patch ===== */
/* Container in your HTML is `.verdict-boxes` */
.verdict-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px;
}
@media (max-width: 768px) { .verdict-boxes { grid-template-columns: 1fr; gap: 14px; }
}
/* Match card look */
.verdict-boxes > .verdict-box { padding: 18px 16px; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}
/* Auto “dot” before headings */
.verdict-box.fit h3::before,
.verdict-box.need h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px;
}
.verdict-box.fit h3::before { background: #33d69f; box-shadow: 0 0 0 3px rgba(51,214,159,0.15);
}
.verdict-box.need h3::before { background: #ffac33; box-shadow: 0 0 0 3px rgba(255,172,51,0.15);
}
/* CTA button class in your HTML is `.cta-btn` */
.final-verdict .cta-btn { display: inline-block; width: 100%; text-align: center; font-weight: 700; text-decoration: none; background: #0088ff; color: #fff !important; border-radius: 999px; padding: 14px 18px; box-shadow: 0 8px 22px rgba(0,136,255,.22); transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.final-verdict .cta-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,136,255,.28); opacity: .96;
}
/* Disclaimer text */
.final-verdict .disclaimer { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.7); text-align: center;
}
/* === Final Verdict – contrast + mapping fix (drop at end of CSS) === */
/* Make the dark card readable */
.final-verdict { background: #0b0b0b; /* keep dark card */ color: #e9edf3; /* default text color on card */
}
/* Headings: bright */
.final-verdict h2,
.final-verdict h3 { color: #ffffff;
}
/* Paragraphs & list items: high-contrast light gray */
.final-verdict p,
.final-verdict li { color: rgba(255, 255, 255, 0.9);
}
/* Emphasis: full white for punchy bolds */
.final-verdict strong { color: #ffffff;
}
/* Your wrapper is .verdict-boxes — make it the grid */
.verdict-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px;
}
/* Each card panel: lighter than the outer card */
.verdict-boxes > .verdict-box { padding: 18px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Card headings with tiny status dot (no HTML change required) */
.verdict-box.fit h3::before,
.verdict-box.need h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 10px; vertical-align: middle;
}
.verdict-box.fit h3::before { background: #33d69f; box-shadow: 0 0 0 3px rgba(51,214,159,0.15); }
.verdict-box.need h3::before { background: #ffac33; box-shadow: 0 0 0 3px rgba(255,172,51,0.15); }
/* Lists inside cards */
.verdict-boxes > .verdict-box ul { padding-left: 18px; margin: 0; }
.verdict-boxes > .verdict-box li { margin: 6px 0; font-size: clamp(14px, 1.7vw, 16px); line-height: 1.6; color: rgba(255,255,255,0.92);
}
/* Button & disclaimer on dark */
.final-verdict .cta-btn { display: inline-block; width: 100%; text-align: center; background: #0088ff; color: #fff !important; font-weight: 700; border-radius: 999px; padding: 14px 18px; box-shadow: 0 8px 22px rgba(0,136,255,.22); transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.final-verdict .cta-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,136,255,.28); opacity: .96; }
.final-verdict .disclaimer { margin-top: 10px; font-size: 13px; text-align: center; color: rgba(255,255,255,0.72);
}
/* Stack on mobile */
@media (max-width: 768px) { .verdict-boxes { grid-template-columns: 1fr; gap: 14px; }
}
/* === Final Verdict — LIGHT CARD OVERRIDE (paste at END of your CSS) === */
/* Outer section: light neutral background + soft border/shadow */
.final-verdict { background: #f9fafb; color: #222; /* default text on light bg */ border: 1px solid rgba(0,0,0,0.06); border-radius: 18px; box-shadow: 0 10px 24px rgba(0,0,0,0.06); margin: 64px auto 56px; /* keep your spacing */ max-width: 980px; padding: 28px 28px 24px; /* keeps your existing fade-in if you already have the keyframes */ animation: verdictFadeIn 600ms ease-out both;
}
/* Headings: dark & crisp on light bg */
.final-verdict h2,
.final-verdict h3 { color: #111; margin: 0 0 10px; line-height: 1.15;
}
.final-verdict h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; }
.final-verdict h3 { font-size: clamp(16px, 1.8vw, 18px); font-weight: 700; }
/* Paragraphs/lists on light bg */
.final-verdict p,
.final-verdict li { color: #333; font-size: clamp(14px, 1.7vw, 16px); line-height: 1.6;
}
/* Keep bold text punchy but not pure-black */
.final-verdict strong { color: #111; }
/* Your wrapper uses .verdict-boxes → make it a 2-col grid on desktop */
.verdict-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px;
}
/* Inner cards: white panels with gentle borders/shadows */
.verdict-boxes > .verdict-box { background: #ffffff; color: #333; padding: 18px 16px; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
/* Headings inside each card (with auto status dot) */
.verdict-boxes > .verdict-box h3 { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 8px; color: #111;
}
.verdict-box.fit h3::before,
.verdict-box.need h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 2px;
}
.verdict-box.fit h3::before { background: #33d69f; box-shadow: 0 0 0 3px rgba(51,214,159,0.18); }
.verdict-box.need h3::before { background: #ffac33; box-shadow: 0 0 0 3px rgba(255,172,51,0.18); }
/* Lists inside cards */
.verdict-boxes > .verdict-box ul { padding-left: 18px; margin: 0; }
.verdict-boxes > .verdict-box li { margin: 6px 0; }
/* CTA button on light bg (your .cta-btn class) */
.final-verdict .cta-btn { display: inline-block; width: 100%; text-align: center; background: #0088ff; color: #fff !important; font-weight: 700; border-radius: 999px; padding: 14px 18px; box-shadow: 0 8px 22px rgba(0,136,255,.22); transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.final-verdict .cta-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,136,255,.28); opacity: .96;
}
/* Disclaimer on light */
.final-verdict .disclaimer { margin-top: 10px; font-size: 13px; text-align: center; color: #556;
}
/* Responsive: stack cards on mobile and reduce paddings */
@media (max-width: 768px) { .final-verdict { margin: 44px auto 40px; padding: 20px 16px; border-radius: 16px; } .verdict-boxes { grid-template-columns: 1fr; gap: 14px; } .final-verdict h2 { font-size: clamp(20px, 5vw, 24px); }
}
/* Respect reduced motion (if you kept the animation) */
@media (prefers-reduced-motion: reduce) { .final-verdict { animation: none; }
}
/* === End Final Verdict — LIGHT CARD OVERRIDE === */
/* === Final Verdict — DESKTOP POLISH PACK (paste at END) === */
/* 1) Tighter, crisper heading on desktop */
.final-verdict .verdict-h2 { font-weight: 800; letter-spacing: -0.01em; margin: 0 0 14px; line-height: 1.15; /* Slightly smaller than before on large screens */ font-size: clamp(24px, 2.6vw, 34px);
}
/* 2) Separate intro paragraph from the cards with a soft hairline */
.final-verdict .hairline,
.final-verdict .verdict-sep { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); margin: 12px 0 8px;
}
.final-verdict p + .verdict-boxes { margin-top: 16px; }
/* 3) Cards: even heights and better layout on desktop */
.verdict-boxes { align-items: stretch; /* columns same height whenever possible */ gap: 22px; /* a tad more breathing room */
}
.verdict-boxes > .verdict-box { display: flex; /* allow content to fill height evenly */ flex-direction: column; justify-content: flex-start; padding: 20px 18px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.08); background: #ffffff; box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}
/* Card headings */
.verdict-boxes > .verdict-box h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: #111; display: inline-flex; align-items: center; gap: 10px;
}
/* Status dots (generated, no HTML change) */
.verdict-box.fit h3::before,
.verdict-box.need h3::before { content: ""; widt
/* === Final Verdict — "Better" desktop polish + pill labels (add-on, paste at END) === */
/* 1) Slightly smaller, tighter H2 so it fits on one line more often */
.final-verdict .verdict-h2{ font-size: clamp(24px, 2.6vw, 34px); line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 14px;
}
/* 2) Even column heights + a touch more breathing room */
.verdict-boxes{ align-items: stretch; gap: 22px;
}
.verdict-boxes > .verdict-box{ display: flex; flex-direction: column; justify-content: flex-start; border-radius: 16px; padding: 20px 18px; box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}
/* 3) Convert the small h3 dots into rounded "pills" for each side */
.verdict-boxes > .verdict-box h3{ display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 12px; font-size: 16px; font-weight: 700; border-radius: 999px;
}
/* hide the generated dot since we’re using pills now */
.verdict-box.fit h3::before,
.verdict-box.need h3::before{ content: none; }
/* pill colors */
.verdict-box.fit h3{ background: #E8F8EF; color: #146c43; /* deep green */ border: 1px solid #bff5d9;
}
.verdict-box.need h3{ background: #FFF4E6; color: #8a3c0f; /* deep amber */ border: 1px solid #fde0c2;
}
/* Optional: faint accent on card borders to echo the pill color */
.verdict-box.fit{ border-color: rgba(51,214,159,0.28) !important; }
.verdict-box.need{ border-color: rgba(255,172,51,0.28) !important; }
/* 4) Lists: a touch larger and clearer spacing */
.verdict-boxes > .verdict-box ul{ padding-left: 18px; margin: 6px 0 0; }
.verdict-boxes > .verdict-box li{ margin: 8px 0; font-size: 16px; line-height: 1.6; color: #333;
}
.verdict-boxes > .verdict-box li strong{ color: #111; }
/* 5) Soften the outer panel edge slightly */
.final-verdict{ border-radius: 20px; box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
/* 6) Keep mobile nice and compact */
@media (max-width: 768px){ .verdict-boxes{ grid-template-columns: 1fr; gap: 14px; } .final-verdict .verdict-h2{ font-size: clamp(20px, 5vw, 24px); }
}
/* ========================================================== MASTER OVERRIDE — Final Verdict + Sticky Bar + Spacing Paste at END of your CSS ========================================================== */
/* ------------------------------- 1) FINAL VERDICT — Light, polished ------------------------------- */
.final-verdict{ background:#f9fafb; color:#222; border:1px solid rgba(0,0,0,0.06); border-radius:20px; box-shadow:0 10px 24px rgba(0,0,0,0.06); margin:64px auto 56px; max-width:980px; padding:28px 28px 24px; animation:verdictFadeIn 600ms ease-out both;
}
/* Centered headline, width-limited for desktop */
.final-verdict .verdict-h2{ text-align:center; margin:0 auto 22px; max-width:720px; line-height:1.2; font-size:clamp(22px,2.6vw,32px); font-weight:800; letter-spacing:-0.01em; color:#111;
}
/* Body text */
.final-verdict p,
.final-verdict li{ color:#333; font-size:clamp(14px,1.7vw,16px); line-height:1.6; }
.final-verdict strong{ color:#111; }
/* 2-col layout on desktop; stacks on mobile */
.verdict-boxes{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; margin-top:20px;
}
@media (max-width:768px){ .verdict-boxes{ grid-template-columns:1fr; gap:14px; }
}
/* Inner cards */
.verdict-boxes > .verdict-box{ display:flex; flex-direction:column; justify-content:flex-start; background:#fff; color:#333; padding:20px 18px; border:1px solid rgba(0,0,0,0.08); border-radius:16px; box-shadow:0 8px 22px rgba(0,0,0,0.06);
}
/* Pill-style mini-headings */
.verdict-boxes > .verdict-box h3{ display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; padding:6px 12px; font-size:16px; font-weight:700; border-radius:999px; color:#111;
}
/* Use pills instead of generated dots */
.verdict-box.fit h3::before,
.verdict-box.need h3::before{ content:none; }
.verdict-box.fit h3{ background:#E8F8EF; color:#146c43; border:1px solid #bff5d9; }
.verdict-box.need h3{ background:#FFF4E6; color:#8a3c0f; border:1px solid #fde0c2; }
/* Lists */
.verdict-boxes > .verdict-box ul{ padding-left:18px; margin:6px 0 0; }
.verdict-boxes > .verdict-box li{ margin:8px 0; line-height:1.6; }
.verdict-boxes > .verdict-box li strong{ color:#111; }
/* CTA: add breathing space */
.final-verdict .cta-btn{ display:inline-block; width:100%; text-align:center; background:#0088ff; color:#fff !important; font-weight:700; border-radius:999px; padding:14px 18px; margin-top:22px; box-shadow:0 8px 22px rgba(0,136,255,.22); transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.final-verdict .cta-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,136,255,.28); opacity:.96; }
/* Disclaimer on light */
.final-verdict .disclaimer{ margin-top:10px; font-size:13px; text-align:center; color:#556; }
/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){ .final-verdict{ animation:none; } }
/* -------------------------------- 2) STICKY ANNOUNCEMENT BAR RESCUE (covers common class/id names) -------------------------------- */
.announcement-bar,
.sticky-bar,
.sticky-top,
.top-sticky,
#announcement-bar,
#sticky,
[data-sticky="top"]{ position:sticky; top:0; z-index:10000; /* above all content */ width:100%; left:0;
}
/* If your bar is fixed instead of sticky, this keeps it visible */
.announcement-bar.is-fixed,
.sticky-bar.is-fixed,
#announcement-bar.is-fixed{ position:fixed; top:0; left:0; right:0; z-index:10000;
}
/* Prevent it from sitting behind content on iOS/Safari */
body:has(.announcement-bar),
body:has(.sticky-bar),
body:has(#announcement-bar){ /* Only adds padding if such a bar exists */ padding-top: clamp(0px, env(safe-area-inset-top), 0px);
}
/* -------------------------------- 3) GLOBAL VERTICAL-SPACING TUNE (reduce big blank gaps between sections) -------------------------------- */
/* Remove accidental double-gaps caused by margins on first/last child */
section > *:first-child{ margin-top:0 !important; }
section > *:last-child{ margin-bottom:0 !important; }
/* Gentle, consistent section padding (won’t crush hero) */
section{ padding-top: clamp(16px, 3.2vw, 32px); padding-bottom: clamp(16px, 3.2vw, 32px);
}
/* Headlines margins: a bit tighter */
h2{ margin-top:0.2em; margin-bottom:0.4em; }
h3{ margin-top:0.25em; margin-bottom:0.35em; }
/* For “card” sections with rounded corners, keep outer spacing modest */
section[style*="border-radius"],
section[class*="card"]{ margin-top: clamp(16px, 3vw, 28px); margin-bottom: clamp(16px, 3vw, 28px);
}
/* Optional: if two sections are back-to-back, reduce the gap slightly */
section + section{ margin-top: clamp(12px, 2.5vw, 24px); }
/* -------------------------------- 4) SAFETY: ensure nothing hides behind fixed headers -------------------------------- */
body{ overflow-x:hidden; }
/* === MOBILE SECTION SPACING TUNE === */
@media (max-width: 768px) { section { padding-top: clamp(10px, 3vw, 18px); padding-bottom: clamp(10px, 3vw, 18px); } /* tighten section-to-section gaps */ section + section { margin-top: clamp(8px, 2vw, 16px); }
}
/* === FINAL VERDICT — MOBILE COMPACT + "OLDER TEXT" LOOK === */
@media (max-width: 768px) { /* Compact outer card */ .final-verdict { padding: 16px 14px; margin: 28px auto 26px; /* smaller outside spacing on mobile */ border-radius: 16px; } /* Headline readable but not huge */ .final-verdict .verdict-h2 { max-width: 92%; font-size: clamp(20px, 5.2vw, 24px); line-height: 1.22; margin: 0 auto 16px; } /* Intro/body text closer to older version */ .final-verdict p { font-size: 15px; line-height: 1.55; margin: 10px 0 0; text-align: left; /* older versions were left-aligned */ } /* Grid stacks + tighter gaps */ .verdict-boxes { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; } /* Inner cards more compact */ .verdict-boxes > .verdict-box { padding: 14px 12px; border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,0.05); } /* Revert headings to the older simple look (no pill label) */ .verdict-boxes > .verdict-box h3 { padding: 0; /* remove pill padding */ background: none; /* no pill bg */ border: 0; /* no pill border */ border-radius: 0; font-size: 16px; line-height: 1.3; margin: 0 0 8px; color: #111; display: inline-flex; align-items: center; gap: 8px; } /* Bring back the tiny colored dot on mobile */ .verdict-box.fit h3::before, .verdict-box.need h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .verdict-box.fit h3::before { background: #33d69f; box-shadow: 0 0 0 3px rgba(51,214,159,0.16); } .verdict-box.need h3::before { background: #ffac33; box-shadow: 0 0 0 3px rgba(255,172,51,0.16); } /* Lists tighter, like the older version */ .verdict-boxes > .verdict-box ul { padding-left: 18px; margin: 4px 0 0; } .verdict-boxes > .verdict-box li { margin: 6px 0; font-size: 15px; line-height: 1.5; } /* “My take” spacing */ .final-verdict p + .cta-btn { margin-top: 18px; } /* CTA breathing room on mobile */ .final-verdict .cta-btn { margin-top: 20px; /* increase space above the blue button */ padding: 14px 16px; } /* Disclaimer closer, smaller */ .final-verdict .disclaimer { margin-top: 8px; font-size: 12.5px; }
}
/* === FINAL VERDICT — Restore "Older Text Look" (Desktop + Mobile) === */
/* Headings inside verdict cards: no pills, just dot + text */
.verdict-boxes > .verdict-box h3 { padding: 0; /* remove pill padding */ background: none; /* no pill background */ border: 0; /* no pill border */ border-radius: 0; font-size: 16px; line-height: 1.3; margin: 0 0 8px; color: #111; display: inline-flex; align-items: center; gap: 8px;
}
/* Bring back the small colored dots */
.verdict-box.fit h3::before,
.verdict-box.need h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.verdict-box.fit h3::before { background: #33d69f; box-shadow: 0 0 0 3px rgba(51,214,159,0.16); }
.verdict-box.need h3::before { background: #ffac33; box-shadow: 0 0 0 3px rgba(255,172,51,0.16); }
/* === FINAL VERDICT — restore full bullet text (titles + continuation) === */
/* Ensure list items wrap and never get clipped */
.verdict-boxes .verdict-box ul,
.verdict-boxes .verdict-box li { white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; /* long phrases won’t overflow */ overflow: visible !important; text-overflow: clip !important; max-height: none !important;
}
/* Keep bullets as normal text items (you use emoji ✅/⚠️, not list markers) */
.verdict-boxes .verdict-box li { display: list-item !important; /* normal flow */ list-style: none; /* no default dot */ padding-left: 0; line-height: 1.6; color: #333; /* readable on light cards */ font-size: 16px;
}
/* Make sure the bold “title” stays inline with the continuation text */
.verdict-boxes .verdict-box li strong { display: inline !important; margin-right: .15em; /* tiny space before the em-dash text */ color: #111;
}
/* In case any global rule tried to grid/flex the LI, turn it off here */
.verdict-boxes .verdict-box li[style*="display:flex"],
.verdict-boxes .verdict-box li[style*="display:grid"] { display: list-item !important;
}
/* === FINAL VERDICT — bullet text restore (kills line-clamp/overflow issues) === */
.final-verdict .verdict-boxes .verdict-box ul { display: block !important; margin: 0 !important; padding-left: 18px !important; overflow: visible !important;
}
.final-verdict .verdict-boxes .verdict-box li { /* blow away any clamps/truncation/flex/grid weirdness */ display: block !important; /* not flex/grid/-webkit-box */ white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal !important; overflow-wrap: anywhere !important; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important; -webkit-box-align: unset !important; -webkit-box-pack: unset !important; clip-path: none !important; mask-image: none !important; max-height: none !important; line-height: 1.6 !important; font-size: 16px !important; color: #333 !important; /* visible on light cards */
}
.final-verdict .verdict-boxes .verdict-box li * { white-space: normal !important; overflow: visible !important;
}
.final-verdict .verdict-boxes .verdict-box li strong { display: inline !important; /* keep the title inline */ font-weight: 700 !important; color: #111 !important; margin-right: .15em !important; /* tiny gap before the em-dash text */
}
/* If any theme forces flex on LIs via attribute or class, neutralize that too */
.final-verdict .verdict-boxes .verdict-box li[style*="display:flex"],
.final-verdict .verdict-boxes .verdict-box li[style*="display:grid"],
.final-verdict .verdict-boxes .verdict-box li.flex,
.final-verdict .verdict-boxes .verdict-box li.grid { display: block !important;
}
/* === Final Verdict list rendering hard-fix === */
.final-verdict .verdict-boxes .verdict-box ul { padding-left: 18px; margin: 0; }
.final-verdict .verdict-boxes .verdict-box li { display: list-item !important; list-style: none; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal !important; overflow-wrap: anywhere !important; line-height: 1.6; font-size: 16px; color: #333;
}
.final-verdict .verdict-boxes .verdict-box li .k { display: inline-block; margin-right: 8px; transform: translateY(1px);
}
.final-verdict .verdict-boxes .verdict-box li strong { display: inline !important; color: #111; font-weight: 700;
}
.final-verdict .verdict-boxes .verdict-box li .cont { display: inline !important; white-space: normal !important; color: #333;
}
/* === STICKY ANNOUNCEMENT BAR — RECOVERY PACK (paste at END) === */
/* 1) Revive the bar (covers common IDs/classes) */
.announcement-bar,
.sticky-bar,
.sticky-top,
.top-sticky,
.sticky-note,
#announcement-bar,
#sticky-bar,
#sticky-note { position: fixed; /* stays at the very top */ top: 0; left: 0; right: 0; z-index: 10000; /* above everything */ display: block !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; background: #0b0b0b; /* your black bar */ color: #fff; padding: 10px 14px; /* comfy */ line-height: 1.25; box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
/* 2) Typical inner content (text + button) */
.announcement-bar a,
.sticky-bar a,
#announcement-bar a { color: #fff; text-decoration: none; font-weight: 700;
}
.announcement-bar .btn,
.sticky-bar .btn,
#announcement-bar .btn { display: inline-block; margin-left: 10px; padding: 10px 14px; border-radius: 8px; background: #0088ff; color: #fff !important; font-weight: 700;
}
/* 3) Make room so it doesn't cover the page */
body:has(.announcement-bar),
body:has(.sticky-bar),
body:has(#announcement-bar) { padding-top: 56px; /* default bar height */
}
@media (max-width: 480px) { body:has(.announcement-bar), body:has(.sticky-bar), body:has(#announcement-bar) { padding-top: 64px; /* a touch more on mobile */ }
}
/* 4) Neutralize theme conflicts that break sticky/fixed bars */
header .announcement-bar,
header .sticky-bar,
header #announcement-bar { transform: none !important; }
.announcement-bar, .sticky-bar, #announcement-bar { /* parent containers sometimes hide sticky elements */ contain: none !important;
}
/* 5) If the theme hides it via display:none on narrow widths, force show */
@media (max-width: 768px) { .announcement-bar, .sticky-bar, #announcement-bar { display: block !important; }
}
/* Reserve space for sticky bar */
body { padding-top: 70px; /* matches sticky bar height */
}
/* If bar height changes on smaller screens */
@media (max-width: 480px) { body { padding-top: 90px; /* slightly more on narrow screens */ }
} *{} {} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } /* Make anchors/scroll-to not hide under the bar */ :root { --dsbar-pad: 0px; } [id] { scroll-margin-top: calc(var(--dsbar-pad, 0px) + 10px); } /* Kill any mystery negative/zero margins from builders on the first wrapper */ body > *:first-child { margin-top: 0 !important; } @media (max-width: 639px) { [data-gp-text] .gp-component-id-_9tuUy6F4 { font-weight: 700;text-align: center;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px; } } @media (max-width: 767px) and (min-width: 640px) { [data-gp-text] .gp-component-id-_9tuUy6F4 { font-weight: 700;text-align: center;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px; } } @media (max-width: 991px) and (min-width: 768px) { [data-gp-text] .gp-component-id-_9tuUy6F4 { font-weight: 700;text-align: center;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px; } } @media (max-width: 1199px) and (min-width: 992px) { [data-gp-text] .gp-component-id-_9tuUy6F4 { font-weight: 700;text-align: center;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px; } } @media (min-width: 1200px) { [data-gp-text] .gp-component-id-_9tuUy6F4 { font-weight: 700;text-align: center;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px; } } @media (max-width: 639px) { [data-gp-text] .gp-component-id-ywYGPxtJS4 { margin-left: 0px;margin-right: 0px;margin-top: 40px;margin-bottom: 0px; } } @media (max-width: 767px) and (min-width: 640px) { [data-gp-text] .gp-component-id-ywYGPxtJS4 { margin-left: 0px;margin-right: 0px;margin-top: 40px;margin-bottom: 0px; } } @media (max-width: 991px) and (min-width: 768px) { [data-gp-text] .gp-component-id-ywYGPxtJS4 { margin-left: 0px;margin-right: 0px;margin-top: 40px;margin-bottom: 0px; } } @media (max-width: 1199px) and (min-width: 992px) { [data-gp-text] .gp-component-id-ywYGPxtJS4 { margin-left: 0px;margin-right: 0px;margin-top: 40px;margin-bottom: 0px; } } @media (min-width: 1200px) { [data-gp-text] .gp-component-id-ywYGPxtJS4 { margin-left: 0px;margin-right: 0px;margin-top: 40px;margin-bottom: 0px; } } @media (max-width: 639px) { .gp-component-id-NBH75dwvBa[data-gp-component] { margin-top: 98px;z-index: auto;position: relative;min-height: 50px; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-NBH75dwvBa[data-gp-component] { margin-top: 98px;z-index: auto;position: relative;min-height: 50px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-NBH75dwvBa[data-gp-component] { margin-top: 98px;z-index: auto;position: relative;min-height: 50px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-NBH75dwvBa[data-gp-component] { margin-top: 98px;z-index: auto;position: relative;min-height: 50px; } } @media (min-width: 1200px) { .gp-component-id-NBH75dwvBa[data-gp-component] { margin-top: 98px;z-index: auto;position: relative;min-height: 50px; } } .gp-component-id-3r6WmEOeiH { z-index: 15;position: relative;margin-left: auto;margin-right: auto;width: 100%; } @media (max-width: 639px) { .gp-component-id-3r6WmEOeiH { z-index: 15;position: relative;margin-left: auto;margin-right: auto;width: 100%; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-3r6WmEOeiH { z-index: 15;position: relative;margin-left: auto;margin-right: auto;width: 100%;max-width: 640px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-3r6WmEOeiH { z-index: 15;position: relative;margin-left: auto;margin-right: auto;width: 100%;max-width: 768px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-3r6WmEOeiH { z-index: 15;position: relative;margin-left: auto;margin-right: auto;width: 100%;max-width: 992px; } } @media (min-width: 1200px) { .gp-component-id-3r6WmEOeiH { z-index: 15;position: relative;margin-left: auto;margin-right: auto;width: 100%;max-width: 1200px; } }