/* ==========================================================================
   BonusRank PL — demo template stylesheet
   Clean, fast, responsive. No frameworks. ~1 CSS file, mobile-first.
   ========================================================================== */

:root {
  --c-bg: #0f1220;
  --c-bg-2: #171b2e;
  --c-card: #1d2236;
  --c-card-2: #232942;
  --c-border: #2c3350;
  --c-text: #e8eaf2;
  --c-muted: #a2a8c0;
  --c-brand: #ffb020;      /* gold */
  --c-brand-2: #ff8a00;
  --c-accent: #3ddc97;     /* green = verified */
  --c-danger: #ff5470;
  --c-cta: #2f6bff;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  --maxw: 1140px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: radial-gradient(1200px 600px at 70% -10%, #1a2140 0%, var(--c-bg) 55%) fixed;
  color: var(--c-text);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--c-muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
section { padding: 48px 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------- Skip link ---------- */
.skip { position:absolute; left:-999px; top:0; background:var(--c-brand); color:#111; padding:10px 16px; z-index:1000; border-radius:0 0 8px 0; }
.skip:focus { left:0; }

/* ---------- Top compliance bar ---------- */
.topbar {
  background: #0b0e19;
  border-bottom: 1px solid var(--c-border);
  font-size: .8rem;
  color: var(--c-muted);
}
.topbar .container { display:flex; gap:14px; align-items:center; justify-content:center; padding:8px 20px; flex-wrap:wrap; text-align:center; }
.badge18 { background: var(--c-danger); color:#fff; font-weight:800; border-radius:6px; padding:2px 8px; font-size:.78rem; }

/* ---------- Header / nav ---------- */
.site-header { position: sticky; top:0; z-index:50; background: rgba(15,18,32,.9); backdrop-filter: blur(8px); border-bottom:1px solid var(--c-border); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; max-width:var(--maxw); margin:0 auto; }
.brand { display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.15rem; color:var(--c-text); }
.brand:hover { text-decoration:none; }
.brand .logo { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2)); display:grid; place-items:center; color:#111; font-weight:900; }
.brand small { display:block; font-size:.62rem; color:var(--c-muted); font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.nav-links { display:flex; gap:6px; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links > li { position:relative; }
.nav-links a { color:var(--c-text); font-weight:600; font-size:.95rem; padding:9px 12px; border-radius:8px; display:block; }
.nav-links a:hover { background:var(--c-card); text-decoration:none; }
.nav-links .submenu {
  position:absolute; top:100%; left:0; min-width:240px; background:var(--c-card-2);
  border:1px solid var(--c-border); border-radius:12px; padding:8px; box-shadow:var(--shadow);
  display:none; z-index:60;
}
.nav-links li:hover > .submenu, .nav-links li:focus-within > .submenu { display:block; }
.submenu a { font-weight:500; font-size:.9rem; }
.nav-toggle { display:none; background:var(--c-card); border:1px solid var(--c-border); color:var(--c-text); border-radius:9px; padding:8px 12px; font-size:1.1rem; cursor:pointer; }

/* ---------- Buttons ---------- */
.btn { display:inline-block; font-weight:800; border-radius:10px; padding:11px 18px; text-align:center; cursor:pointer; border:none; transition:transform .06s ease, filter .15s ease; }
.btn:hover { text-decoration:none; filter:brightness(1.06); }
.btn:active { transform:translateY(1px); }
.btn-cta { background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2)); color:#1a1200; }
.btn-outline { background:transparent; border:1px solid var(--c-border); color:var(--c-text); }
.btn-ghost { background:var(--c-card); color:var(--c-text); border:1px solid var(--c-border); }
.btn-sm { padding:8px 14px; font-size:.85rem; }
.btn-block { display:block; width:100%; }

/* ---------- Hero ---------- */
.hero { padding:56px 0 32px; }
.hero .eyebrow { color:var(--c-brand); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; }
.hero p.lead { font-size:1.1rem; color:var(--c-muted); max-width:640px; }
.hero-stats { display:flex; gap:26px; flex-wrap:wrap; margin-top:20px; }
.hero-stats div { }
.hero-stats b { display:block; font-size:1.5rem; color:var(--c-brand); }
.hero-stats span { font-size:.82rem; color:var(--c-muted); }
.trust-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:22px; color:var(--c-muted); font-size:.82rem; }
.trust-row .chip { background:var(--c-card); border:1px solid var(--c-border); padding:6px 12px; border-radius:999px; display:inline-flex; gap:7px; align-items:center; }
.chip .dot { width:8px; height:8px; border-radius:50%; background:var(--c-accent); }

/* ---------- Comparison table (card list on mobile) ---------- */
.offers { display:grid; gap:14px; }
.offer {
  display:grid; grid-template-columns: 56px 1.4fr 1.6fr 1fr auto; gap:16px; align-items:center;
  background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius); padding:16px 18px;
  position:relative;
}
.offer.top-pick { border-color:var(--c-brand); box-shadow:0 0 0 1px var(--c-brand) inset; }
.offer .rank { font-weight:900; font-size:1.1rem; color:var(--c-muted); }
.offer .logo { width:56px; height:56px; border-radius:12px; background:var(--c-card-2); display:grid; place-items:center; font-weight:900; color:var(--c-brand); border:1px solid var(--c-border); }
.offer .name { font-weight:800; }
.offer .rating { display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--c-muted); margin-top:2px; }
.stars { color:var(--c-brand); letter-spacing:1px; }
.offer .bonus b { color:var(--c-accent); }
.offer .terms { font-size:.82rem; color:var(--c-muted); }
.offer .terms code { background:var(--c-bg-2); padding:1px 6px; border-radius:6px; color:var(--c-text); }
.ribbon { position:absolute; top:-10px; left:16px; background:var(--c-brand); color:#111; font-size:.7rem; font-weight:900; padding:3px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em; }
.offer .cta-col { display:flex; flex-direction:column; gap:6px; min-width:150px; }
.offer .cta-col .disc { font-size:.68rem; color:var(--c-muted); text-align:center; }

/* table header row (desktop only) */
.offers-head { display:grid; grid-template-columns: 56px 1.4fr 1.6fr 1fr auto; gap:16px; padding:0 18px; color:var(--c-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.offers-head .cta-col { min-width:150px; }

/* ---------- Generic cards / grid ---------- */
.grid { display:grid; gap:18px; }
.grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.card { background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius); padding:22px; }
.card h3 { margin-top:0; }
.card .ico { width:42px; height:42px; border-radius:10px; background:var(--c-card-2); display:grid; place-items:center; margin-bottom:12px; font-size:1.2rem; }

/* ---------- Prose / article ---------- */
.prose { max-width:760px; }
.prose h2 { margin-top:1.6em; }
.prose ul { padding-left:1.2em; }
.prose li { margin-bottom:.4em; }
.prose table { width:100%; border-collapse:collapse; margin:1em 0; font-size:.92rem; }
.prose th, .prose td { border:1px solid var(--c-border); padding:10px 12px; text-align:left; }
.prose th { background:var(--c-card); }

/* ---------- FAQ ---------- */
.faq { max-width:820px; margin:0 auto; }
.faq details { background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius-sm); margin-bottom:12px; padding:2px 18px; }
.faq summary { cursor:pointer; font-weight:700; padding:16px 0; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--c-brand); font-weight:900; }
.faq details[open] summary::after { content:"–"; }
.faq details > p { padding-bottom:16px; margin:0; color:var(--c-muted); }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size:.82rem; color:var(--c-muted); padding:16px 0 0; }
.crumbs a { color:var(--c-muted); }
.crumbs span { color:var(--c-text); }

/* ---------- Callouts ---------- */
.callout { border:1px solid var(--c-border); border-left:4px solid var(--c-brand); background:var(--c-card); border-radius:var(--radius-sm); padding:16px 18px; margin:1.2em 0; }
.callout.warn { border-left-color:var(--c-danger); }
.callout.rg { border-left-color:var(--c-accent); }

/* ---------- Section heads ---------- */
.section-head { max-width:720px; margin-bottom:26px; }
.section-head .eyebrow { color:var(--c-brand); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.75rem; }

/* ---------- Author / EEAT box ---------- */
.author { display:flex; gap:14px; align-items:center; background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius); padding:16px; }
.author .avatar { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#3ddc97,#2f6bff); flex:none; }
.author .meta { font-size:.85rem; }
.author .meta b { display:block; }

/* ---------- Footer ---------- */
.site-footer { background:#0b0e19; border-top:1px solid var(--c-border); padding:44px 0 26px; margin-top:24px; color:var(--c-muted); font-size:.9rem; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; }
.footer-grid h4 { color:var(--c-text); font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; }
.footer-grid a { color:var(--c-muted); display:block; padding:3px 0; }
.footer-logos { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:18px 0; opacity:.85; }
.footer-logos .lg { background:var(--c-card); border:1px solid var(--c-border); border-radius:8px; padding:6px 10px; font-size:.7rem; font-weight:800; letter-spacing:.05em; }
.footer-bottom { border-top:1px solid var(--c-border); margin-top:28px; padding-top:18px; font-size:.8rem; line-height:1.7; }

/* ---------- Age gate modal ---------- */
.agegate { position:fixed; inset:0; background:rgba(6,8,16,.94); z-index:1000; display:grid; place-items:center; padding:20px; }
.agegate[hidden] { display:none; }
.agegate .box { max-width:440px; background:var(--c-card-2); border:1px solid var(--c-border); border-radius:18px; padding:32px; text-align:center; }
.agegate .box .lock { font-size:2.2rem; }
.agegate .box h2 { margin-top:8px; }
.agegate .actions { display:flex; gap:12px; margin-top:20px; }
.agegate .actions .btn { flex:1; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-toggle { display:block; }
  .nav-links {
    position:fixed; inset:60px 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--c-bg-2); border-bottom:1px solid var(--c-border); padding:12px; gap:2px;
    display:none; max-height:calc(100vh - 60px); overflow:auto;
  }
  .nav-links.open { display:flex; }
  .nav-links .submenu { position:static; display:block; box-shadow:none; border:none; background:transparent; padding:4px 0 4px 14px; }
  .grid.cols-3, .grid.cols-2 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }

  .offers-head { display:none; }
  .offer { grid-template-columns: 44px 1fr; grid-template-areas:
    "logo main"
    "bonus bonus"
    "cta cta"; row-gap:12px; }
  .offer .rank { display:none; }
  .offer .logo { grid-area:logo; width:44px; height:44px; }
  .offer .main { grid-area:main; }
  .offer .bonus { grid-area:bonus; border-top:1px solid var(--c-border); padding-top:12px; }
  .offer .cta-col { grid-area:cta; min-width:0; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns:1fr; }
  section { padding:36px 0; }
}

/* ============ Listicle / long-form components ============ */

/* brand logo image inside offer/review */
.offer .logo img, .review-head .logo img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.offer .logo { overflow:hidden; padding:0; }

/* Table of contents */
.toc { background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius); padding:20px 24px; margin:0 0 30px; }
.toc h2 { font-size:1.05rem; margin:0 0 12px; }
.toc ol { margin:0; padding-left:1.2em; columns:2; column-gap:32px; }
.toc li { margin-bottom:7px; break-inside:avoid; }
.toc a { color:var(--c-text); font-size:.92rem; }
@media (max-width:640px){ .toc ol { columns:1; } }

/* Content images */
figure.content-img { margin:1.6em 0; }
figure.content-img img { width:100%; border-radius:var(--radius); border:1px solid var(--c-border); }
figure.content-img figcaption { font-size:.82rem; color:var(--c-muted); margin-top:8px; text-align:center; }

/* Per-brand review block in listicle */
.review-block { background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius); padding:24px; margin:0 0 22px; scroll-margin-top:90px; }
.review-block.top-pick { border-color:var(--c-brand); box-shadow:0 0 0 1px var(--c-brand) inset; }
.review-head { display:flex; align-items:center; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.review-head .logo { width:64px; height:64px; border-radius:12px; overflow:hidden; border:1px solid var(--c-border); flex:none; background:var(--c-card-2); }
.review-head .rh-main { flex:1 1 auto; min-width:180px; }
.review-head h3 { margin:0; font-size:1.35rem; }
.review-head .rh-sub { font-size:.85rem; color:var(--c-muted); }
.rating-badge { background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2)); color:#1a1200; font-weight:900; border-radius:12px; padding:10px 16px; text-align:center; line-height:1.1; flex:none; }
.rating-badge b { display:block; font-size:1.5rem; }
.rating-badge span { font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; }
.review-meta { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.review-meta .pill { background:var(--c-bg-2); border:1px solid var(--c-border); border-radius:999px; padding:5px 12px; font-size:.8rem; color:var(--c-muted); }
.review-meta .pill b { color:var(--c-text); }
.review-meta .pill.code b { color:var(--c-brand); }
.pc { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0; }
.pc ul { margin:0; padding-left:1.1em; font-size:.9rem; }
.pc .plus li::marker { color:var(--c-accent); }
.pc .minus li::marker { color:var(--c-danger); }
.pc h4 { margin:0 0 6px; font-size:.9rem; }
@media (max-width:560px){ .pc { grid-template-columns:1fr; } }

/* numbered steps */
ol.steps { list-style:none; counter-reset:st; padding:0; margin:1.2em 0; }
ol.steps li { counter-increment:st; position:relative; padding:0 0 16px 52px; }
ol.steps li::before { content:counter(st); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2)); color:#1a1200; font-weight:900; display:grid; place-items:center; }
ol.steps li strong { display:block; }

/* small rating stars inline */
.rating-bars { display:grid; grid-template-columns:auto 1fr auto; gap:8px 12px; align-items:center; margin:12px 0; font-size:.88rem; }
.rating-bars .bar { height:8px; background:var(--c-bg-2); border-radius:999px; overflow:hidden; }
.rating-bars .bar > span { display:block; height:100%; background:linear-gradient(90deg,var(--c-brand),var(--c-brand-2)); }

/* key takeaways box */
.keybox { background:var(--c-card-2); border:1px solid var(--c-border); border-radius:var(--radius); padding:20px 24px; margin:1.4em 0; }
.keybox h3 { margin-top:0; }
.keybox ul { margin:0; padding-left:1.2em; }

/* verdict inline */
.verdict { font-size:.92rem; margin-top:6px; }
.verdict b { color:var(--c-brand); }

/* ============ Redesigned review card (v2) ============ */
.review-block { padding:0; overflow:hidden; position:relative; }
.review-block::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--c-brand),var(--c-brand-2)); opacity:.55; }
.review-block.top-pick::before { opacity:1; width:6px; }
.rc-inner { padding:22px 24px 24px; }
.rc-top { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; }
.rc-rank { position:absolute; top:0; left:0; background:var(--c-card-2); color:var(--c-muted); font-weight:900; font-size:.8rem; padding:5px 12px 6px; border-radius:0 0 12px 0; border-right:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.review-block.top-pick .rc-rank { background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2)); color:#1a1200; }
.rc-logo { width:76px; height:76px; border-radius:16px; overflow:hidden; border:1px solid var(--c-border); background:var(--c-card-2); flex:none; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.rc-logo img { width:100%; height:100%; object-fit:cover; }
.rc-head h3 { margin:0 0 4px; font-size:1.4rem; }
.rc-head .rc-sub { font-size:.86rem; color:var(--c-muted); }
.rc-stars { color:var(--c-brand); letter-spacing:1px; }
.rc-badge { display:flex; flex-direction:column; align-items:center; justify-content:center; width:82px; height:82px; border-radius:50%; background:radial-gradient(circle at 50% 30%, var(--c-brand), var(--c-brand-2)); color:#1a1200; flex:none; box-shadow:0 6px 20px rgba(255,176,32,.28); }
.rc-badge b { font-size:1.55rem; line-height:1; }
.rc-badge span { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; margin-top:2px; }

/* verified byline */
.rc-verified { display:inline-flex; align-items:center; gap:7px; font-size:.78rem; color:var(--c-muted); margin-top:10px; }
.rc-verified .vchk { width:18px; height:18px; border-radius:50%; background:var(--c-accent); color:#04231a; display:grid; place-items:center; font-size:.7rem; font-weight:900; }

/* quick facts tiles */
.facts { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:18px 0; }
.facts .f { background:var(--c-bg-2); border:1px solid var(--c-border); border-radius:12px; padding:12px 10px; text-align:center; }
.facts .f small { display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--c-muted); margin-bottom:4px; }
.facts .f b { font-size:.98rem; }
.facts .f.code b { color:var(--c-brand); }
@media (max-width:720px){ .facts { grid-template-columns:repeat(2,1fr); } }

/* CTA row */
.rc-cta { display:grid; grid-template-columns:1.4fr 1fr; gap:12px; align-items:center; margin-top:18px; }
.btn-claim { background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2)); color:#1a1200; font-weight:900; font-size:1.02rem; padding:15px 20px; border-radius:12px; text-align:center; box-shadow:0 8px 22px rgba(255,176,32,.3); position:relative; overflow:hidden; }
.btn-claim:hover { text-decoration:none; filter:brightness(1.05); }
.btn-claim .sub { display:block; font-size:.66rem; font-weight:700; opacity:.8; }
.btn-review2 { display:block; text-align:center; padding:15px 18px; border-radius:12px; border:1px solid var(--c-border); background:var(--c-card-2); color:var(--c-text); font-weight:800; }
.btn-review2:hover { text-decoration:none; border-color:var(--c-brand); }
.rc-disc { font-size:.72rem; color:var(--c-muted); margin-top:10px; text-align:center; }
@media (max-width:560px){ .rc-cta { grid-template-columns:1fr; } .rc-top { grid-template-columns:auto 1fr; } .rc-badge { grid-column:1 / -1; flex-direction:row; width:auto; height:auto; border-radius:12px; padding:8px 14px; gap:8px; justify-self:start; } .rc-badge b{font-size:1.2rem} }

/* offer card CTA buttons (comparison table) */
.offer .cta-col .btn-claim2 { background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2)); color:#1a1200; font-weight:800; }

/* author strip near top of ranking */
.author-strip { display:flex; align-items:center; gap:14px; background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius); padding:14px 18px; margin:0 0 24px; flex-wrap:wrap; }
.author-strip .av { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#3ddc97,#2f6bff); flex:none; }
.author-strip .txt { font-size:.86rem; flex:1 1 260px; }
.author-strip .txt b { display:block; }
.author-strip .chips { display:flex; gap:8px; flex-wrap:wrap; }
.author-strip .chips span { background:var(--c-bg-2); border:1px solid var(--c-border); border-radius:999px; padding:5px 11px; font-size:.74rem; color:var(--c-muted); }