:root {
    --bg: #090b12;
    --bg-soft: #0e1220;
    --bg-panel: rgba(17, 20, 31, 0.88);
    --bg-panel-2: rgba(20, 25, 40, 0.92);
    --line: rgba(255,255,255,0.08);
    --line-soft: rgba(255,255,255,0.12);
    --text: #f4f7ff;
    --muted: #aab4d0;
    --muted-2: #8b95b3;
    --white: #ffffff;
    --dark-text: #101522;
    --dark-muted: #56617d;
    --purple: #8f63ff;
    --purple-2: #b18cff;
    --blue: #33b8ff;
    --cyan: #54e2ff;
    --gold: #ffcf70;
    --shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.24);
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --container: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(143, 99, 255, 0.14), transparent 32%),
        radial-gradient(circle at top right, rgba(51, 184, 255, 0.10), transparent 28%),
        radial-gradient(circle at bottom center, rgba(255, 207, 112, 0.08), transparent 24%),
        linear-gradient(180deg, #080910 0%, #0b0f19 30%, #090b12 100%);
    line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4 { margin-top: 0; }
h1, h2, h3, h4, .brand-copy strong, .main-nav a, .btn { font-family: "Space Grotesk", Inter, Arial, sans-serif; }
img { max-width: 100%; display: block; }
.page-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .08;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 0.7px, transparent 0.8px),
      radial-gradient(circle at 80% 60%, rgba(255,255,255,.7) 0 0.6px, transparent 0.7px),
      radial-gradient(circle at 40% 80%, rgba(255,255,255,.6) 0 0.5px, transparent 0.6px);
    background-size: 22px 22px, 27px 27px, 19px 19px;
}
.site-shell { position: relative; overflow: clip; }
.site-shell::before, .site-shell::after { content:""; position:absolute; pointer-events:none; z-index:0; filter: blur(60px); opacity:.48; }
.site-shell::before { width:420px; height:420px; top:120px; left:-140px; background: radial-gradient(circle, rgba(0,194,255,.20), transparent 68%); }
.site-shell::after { width:520px; height:520px; top:380px; right:-180px; background: radial-gradient(circle, rgba(123,97,255,.16), transparent 70%); }
.site-header, main, .site-footer { position: relative; z-index: 1; }
.container { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; }
.container.narrow { width: min(880px, calc(100% - 32px)); }
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(8, 10, 17, 0.78);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.header-row {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark {
    width: 48px; height: 48px; border-radius: 18px; display: grid; place-items: center;
    color: #fff; font-weight: 900; font-size: 1rem;
    background: linear-gradient(135deg, var(--purple), var(--blue));
    box-shadow: 0 14px 28px rgba(82, 125, 255, 0.28);
}
.brand-mark.soft { width: 56px; height: 56px; }
.brand-copy { display: grid; gap: 4px; }
.brand-copy strong { font-size: 1.02rem; letter-spacing: -.02em; }
.brand-copy small { color: var(--muted); }
.main-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.main-nav a {
    min-height: 42px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center;
    color: #d7e0f9; font-weight: 700; transition: .2s ease;
}
.main-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-toggle {
    display: none; width: 48px; height: 48px; border-radius: 16px; border: 1px solid var(--line);
    background: rgba(255,255,255,0.03); color: #fff; cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    display: block; width: 20px; height: 2px; background: currentColor; border-radius: 99px; position: relative; content: ""; margin: 0 auto;
}
.nav-toggle span::before { position: absolute; top: -6px; left: 0; }
.nav-toggle span::after { position: absolute; top: 6px; left: 0; }
main { padding-bottom: 26px; }
section { padding: 34px 0; }
.hero-panel { padding: 38px 0 24px; }
.hero-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: stretch; }
.hero-copy, .dark-panel, .promo-banner, .wide-banner, .prose-block, .age-card, .cookie-bar, .footer-grid > div, .mini-banner, .legal-card {
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.hero-copy {
    padding: 42px;
    border-radius: var(--radius-xl);
    background:
      linear-gradient(180deg, rgba(17,20,31,0.94), rgba(11,14,24,0.96)),
      linear-gradient(135deg, rgba(143,99,255,0.08), transparent 42%);
    position: relative;
    overflow: hidden;
}
.hero-copy::before, .hero-copy::after {
    content: ""; position: absolute; border-radius: 999px; pointer-events: none;
}
.hero-copy::before {
    width: 280px; height: 280px; right: -90px; top: -80px;
    background: radial-gradient(circle, rgba(143,99,255,0.24), transparent 70%);
}
.hero-copy::after {
    width: 220px; height: 220px; left: -80px; bottom: -90px;
    background: radial-gradient(circle, rgba(51,184,255,0.18), transparent 70%);
}
.hero-copy h1 { font-size: clamp(2.4rem, 4.8vw, 4.8rem); line-height: .96; letter-spacing: -.055em; max-width: 11ch; margin: 18px 0; }
.hero-copy p { color: var(--muted); max-width: 64ch; }
.hero-stack { display: grid; gap: 18px; }
.dark-panel {
    border-radius: var(--radius-xl);
    padding: 30px;
    background: linear-gradient(180deg, rgba(18, 23, 37, 0.92), rgba(12, 15, 26, 0.96));
}
.spotlight h2 { font-size: 1.55rem; line-height: 1.08; margin-bottom: 16px; }
.info-ribbon {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.info-ribbon span, .product-tag, .pill, .eyebrow {
    min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: .82rem; letter-spacing: .01em;
}
.info-ribbon span {
    background: rgba(255,255,255,0.05);
    color: #e8efff;
    border: 1px solid rgba(255,255,255,0.08);
}
.pill.dark, .eyebrow {
    background: rgba(255,255,255,0.05);
    color: #dce6ff;
    border: 1px solid rgba(255,255,255,0.08);
}
.hero-actions, .age-actions, .cookie-actions, .card-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions { margin-top: 28px; }
.btn {
    min-height: 52px; padding: 0 20px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; border: 1px solid transparent; cursor: pointer; transition: .18s ease;
    position: relative; z-index: 5; appearance: none; -webkit-appearance: none; pointer-events: auto;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
    color: #fff;
    background: linear-gradient(180deg, #42c7ff, #2c83ff);
    box-shadow: 0 16px 32px rgba(44, 131, 255, 0.28);
}
.btn-secondary {
    color: #eef4ff;
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
}
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 28px; }
.hero-stats article {
    padding: 20px 18px; border-radius: 22px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
}
.hero-stats strong { display: block; font-size: 1.7rem; line-height: 1; margin-bottom: 8px; }
.hero-stats span { color: var(--muted); }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 28px; color: var(--muted); }
.check-list li::before {
    content: ""; width: 12px; height: 12px; border-radius: 999px; position: absolute; top: .42em; left: 0;
    background: linear-gradient(135deg, var(--purple), var(--blue)); box-shadow: 0 0 0 5px rgba(82, 130, 255, 0.12);
}
.banner-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.promo-banner {
    min-height: 200px; border-radius: 28px; padding: 24px; display: grid; align-content: end; gap: 10px;
}
.banner-purple { background: linear-gradient(135deg, rgba(143,99,255,0.22), rgba(12,15,26,0.96)); }
.banner-blue { background: linear-gradient(135deg, rgba(51,184,255,0.18), rgba(12,15,26,0.96)); }
.banner-gold { background: linear-gradient(135deg, rgba(255,207,112,0.18), rgba(12,15,26,0.96)); }
.banner-kicker { color: #d8dff1; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.promo-banner strong { font-size: 1.3rem; line-height: 1.1; }
.promo-banner small { color: var(--muted); font-size: .97rem; }
.section-heading { margin-bottom: 24px; }
.section-heading h2 { font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.04; letter-spacing: -.04em; margin-bottom: 12px; }
.section-heading p { color: var(--muted); max-width: 72ch; }
.section-heading.split, .section-heading.split.tight { display: flex; justify-content: space-between; gap: 18px; align-items: end; }
.section-heading.split > * { flex: 1; }
.section-heading.light-center { text-align: center; max-width: 900px; margin: 0 auto 26px; }
.feature-grid { display: grid; gap: 16px; }
.feature-grid.three-up { grid-template-columns: repeat(3, minmax(0,1fr)); }
.feature-card h3 { margin-bottom: 10px; }
.feature-card p, .timeline-card p, .review-box p, .faq-list p { color: var(--muted); }
.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.white-card {
    color: var(--dark-text);
    background: linear-gradient(180deg, #ffffff, #f7f8fd);
    border-radius: 30px;
    padding: 28px;
    box-shadow: 0 24px 44px rgba(0,0,0,0.22);
}
.product-head { display: flex; justify-content: space-between; gap: 14px; align-items: start; }
.product-tag {
    background: #eef2ff;
    color: #4553a3;
    border: 1px solid rgba(69,83,163,0.12);
    margin-bottom: 14px;
}
.product-head h3 { font-size: 1.9rem; line-height: 1; margin-bottom: 8px; }
.lead-label { color: var(--dark-muted); margin-bottom: 0; }
.score-badge {
    min-width: 70px; min-height: 70px; border-radius: 22px; display: grid; place-items: center;
    background: linear-gradient(135deg, #101522, #1d2640); color: #fff; font-size: 1.35rem; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.bonus-copy { margin: 20px 0; color: #2a3248; }
.mini-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.mini-columns h4 { font-size: .95rem; margin-bottom: 12px; }
.mini-columns ul { margin: 0; padding-left: 18px; color: var(--dark-muted); display: grid; gap: 8px; }
.card-actions { margin-top: 22px; align-items: center; }
.card-actions span { color: var(--dark-muted); font-weight: 700; }
.wide-banner {
    border-radius: 30px; padding: 28px 30px; display: flex; justify-content: space-between; gap: 18px; align-items: center;
    background: linear-gradient(135deg, rgba(25, 31, 51, 0.92), rgba(12, 15, 26, 0.96));
}
.criteria-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 18px; align-items: start; }
.sticky-card { position: sticky; top: 104px; }
.criteria-list { display: grid; gap: 16px; }
.timeline-card {
    border-radius: 26px; padding: 24px;
}
.timeline-card strong {
    width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center;
    background: rgba(255,255,255,0.05); color: #fff; margin-bottom: 16px;
}
.faq-list { display: grid; gap: 12px; }
.faq-list details, .review-box {
    border-radius: 22px; padding: 20px 22px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.faq-list summary { cursor: pointer; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.text-link { color: #d8e7ff; font-weight: 800; }
.inner-hero { padding: 36px 0 12px; }
.inner-hero h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: .98; letter-spacing: -.045em; margin: 16px 0 10px; }
.inner-hero p { color: var(--muted); }
.prose-block {
    border-radius: 30px; padding: 28px; background: linear-gradient(180deg, rgba(17,20,31,0.92), rgba(10,13,23,0.96));
}
.prose-block h2 { font-size: 1.4rem; margin: 22px 0 10px; }
.prose-block p { color: var(--muted); }
.footer-top { padding: 14px 0 18px; }
.footer-intro {
    max-width: 820px; margin-bottom: 18px;
}
.footer-kicker { color: #b8c4ec; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800; }
.footer-intro h2 { font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.05; letter-spacing: -.04em; margin: 12px 0; }
.footer-intro p { color: var(--muted); }
.footer-banner-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.mini-banner {
    border-radius: 22px; padding: 18px; background: rgba(255,255,255,0.04); display: grid; gap: 8px;
}
.mini-banner strong { font-size: 1rem; }
.mini-banner span { color: var(--muted); font-size: .94rem; }
.site-footer { padding: 18px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 18px; }
.footer-grid > div {
    border-radius: 28px; padding: 24px; background: rgba(255,255,255,0.03);
}
.footer-brand { display: flex; align-items: start; gap: 14px; margin-bottom: 18px; }
.footer-brand p, .footer-contact span, .footer-contact a, .footer-links a, .support-strip p { color: var(--muted); }
.footer-contact, .footer-links { display: grid; gap: 10px; }
.footer-grid h3 { margin-bottom: 14px; }
.legal-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.legal-card {
    border-radius: 22px; padding: 18px; background: rgba(255,255,255,0.04);
}
.legal-card span { display: inline-block; font-weight: 900; margin-bottom: 8px; }
.legal-card p { margin: 0; color: var(--muted); }
.support-strip { display: flex; justify-content: space-between; gap: 18px; margin-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 18px; }
.support-strip a { color: #eef4ff; text-decoration: underline; }
.age-gate {
    position: fixed; inset: 0; z-index: 120; background: rgba(4, 6, 12, 0.86); backdrop-filter: blur(8px);
}
.age-card-wrap { min-height: 100%; display: grid; place-items: center; padding: 20px; }
.age-card { width: min(620px, 100%); border-radius: 30px; padding: 30px; background: linear-gradient(180deg, rgba(18,22,35,.98), rgba(10,13,22,.98)); }
.cookie-bar {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 115; border-radius: 24px; padding: 18px 20px;
    background: linear-gradient(135deg, rgba(12,16,28,.96), rgba(20,25,41,.96)); display: flex; justify-content: space-between; gap: 18px; align-items: center;
    border:1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.38);
}
.cookie-bar p { margin: 6px 0 0; color: var(--muted); }
.cookie-bar strong { display:block; font-size:1.05rem; }
.cookie-bar, .cookie-bar * { pointer-events: auto; }
.cookie-actions { justify-content:flex-end; }
body.gate-open, html.gate-open { overflow: hidden; }
body.cookie-open { padding-bottom: 128px; }
@media (max-width: 1100px) {
    .hero-layout, .criteria-layout, .footer-grid, .banner-grid, .cards-grid, .feature-grid.three-up, .footer-banner-row, .legal-strip {
        grid-template-columns: 1fr 1fr;
    }
    .cards-grid article:last-child,
    .banner-grid a:last-child,
    .footer-banner-row a:last-child,
    .legal-strip .legal-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .main-nav {
        position: absolute; top: calc(100% + 10px); right: 0; width: min(280px, calc(100vw - 32px));
        padding: 12px; border-radius: 20px; background: rgba(11,14,24,.98); border: 1px solid var(--line); box-shadow: var(--shadow);
        display: none; flex-direction: column; align-items: stretch;
    }
    .main-nav.open { display: flex; }
    .main-nav a { justify-content: flex-start; }
    .hero-layout, .criteria-layout, .footer-grid, .banner-grid, .cards-grid, .feature-grid.three-up, .hero-stats, .footer-banner-row, .legal-strip, .mini-columns {
        grid-template-columns: 1fr;
    }
    .section-heading.split, .wide-banner, .support-strip, .cookie-bar { display: grid; }
    .sticky-card { position: static; }
    .hero-copy, .dark-panel, .promo-banner, .wide-banner, .prose-block, .footer-grid > div, .mini-banner { padding: 22px; }
    .hero-copy h1 { max-width: 100%; }
}


/* v2 originality refresh */
.site-header { backdrop-filter: blur(12px); }
.brand-copy small { letter-spacing: .03em; }
.hero-v2 { padding-top: 34px; }
.hero-shell { display:grid; grid-template-columns: 1.12fr .88fr; gap: 22px; align-items:stretch; }
.hero-copy-v2 { min-height: 100%; display:flex; flex-direction:column; justify-content:center; }
.hero-points { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.hero-points span, .wide-banner-points span {
    display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
    background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#d6e3ff; font-weight:700; font-size:.92rem;
}
.hero-aside { display:grid; gap:18px; }
.hero-signal-board { padding:24px; }
.signal-rows { display:grid; gap:12px; margin-top:16px; }
.signal-row {
    display:grid; grid-template-columns: 92px 1fr auto; gap:14px; align-items:center; padding:14px; border-radius:22px;
    background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
}
.signal-logo-wrap { width: 92px; display:flex; align-items:center; justify-content:flex-start; min-height:40px; }
.signal-logo-wrap img { width: 100%; max-width: 82px; max-height: 30px; height: auto; object-fit: contain; display:block; }
.signal-row strong { display:block; font-size:1rem; }
.signal-row small { color: var(--muted); }
.signal-row > span {
    min-width:58px; height:58px; border-radius:18px; display:grid; place-items:center; font-weight:900; color:#fff;
    background: linear-gradient(135deg, #101728, #26324c);
}
.signal-rose > span { background: linear-gradient(135deg, #4a2239, #8c4165); }
.signal-gold > span { background: linear-gradient(135deg, #58411e, #9a7732); }
.hero-note.soft-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.hero-note p { color: var(--muted); margin-top:8px; }
.banner-ribbon-wrap { padding: 8px 0 12px; }
.banner-ribbon-layout { display:grid; grid-template-columns: 1.35fr .85fr .85fr; gap:16px; align-items:stretch; }
.ribbon-card {
    display:grid; gap:10px; border-radius:30px; padding:24px; min-height:170px; text-decoration:none; color:#fff;
    border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow);
}
.ribbon-main { background: linear-gradient(135deg, rgba(17,35,67,.96), rgba(43,20,80,.96)); }
.ribbon-side { background: linear-gradient(135deg, rgba(16,24,42,.95), rgba(12,17,28,.98)); }
.ribbon-side.alt { background: linear-gradient(135deg, rgba(54,34,16,.95), rgba(23,18,14,.98)); }
.ribbon-card strong { font-size:1.35rem; line-height:1.12; }
.ribbon-card small { color:#cdd9f5; }
.offset-grid { display:grid; grid-template-columns: .88fr 1.12fr; gap:18px; align-items:start; }
.left-stacked { padding-right:16px; }
.asym-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.asym-grid .tall { grid-row: span 2; min-height: 100%; }
.with-max { max-width: 980px; margin: 0 auto 26px; }
.cards-grid-v2 { align-items:stretch; }
.card-topband {
    margin: -28px -28px 26px; padding: 26px 28px; border-radius: 30px 30px 0 0;
    background: linear-gradient(135deg, #0f2748, #122d4f 58%, #0f2341); display:flex; justify-content:space-between; gap:16px; align-items:center;
    position: relative; overflow: hidden;
}
.card-topband::after { content:""; position:absolute; inset:auto -30px -40px auto; width:160px; height:160px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); pointer-events:none; }
.logo-box { width: 168px; min-height: 52px; display:flex; align-items:center; justify-content:flex-start; flex: 0 0 168px; overflow: visible; }
.logo-box img { width: auto; max-width: 168px; max-height: 58px; height: auto; object-fit: contain; display:block; }
.rating-pill {
    padding: 14px 18px; border-radius: 999px; color:#eef5ff; font-weight:800; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12);
}
.product-head-v2 h3 { font-size: 1.65rem; line-height:1.05; margin-bottom: 10px; }
.strong-copy { font-size: 1.08rem; font-weight: 800; }
.card-actions-v2 { justify-content:space-between; }
.card-accent-blue .score-badge { background: #dbe9f8; color:#2450a4; box-shadow: inset 0 0 0 1px rgba(36,80,164,.07); }
.card-accent-rose .score-badge { background: #f0e1e7; color:#9b4365; box-shadow: inset 0 0 0 1px rgba(155,67,101,.08); }
.card-accent-gold .score-badge { background: #f5ebd6; color:#8e6822; box-shadow: inset 0 0 0 1px rgba(142,104,34,.08); }
.card-accent-rose .card-topband { background: linear-gradient(135deg, #11294e, #173556 58%, #13304f); }
.card-accent-gold .card-topband { background: linear-gradient(135deg, #102645, #163252 58%, #112947); }
.wide-banner-v2 { align-items:flex-start; }
.wide-banner-points { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; max-width:320px; }
.criteria-layout.v2 { grid-template-columns: .78fr 1.22fr; }
.criteria-list-v2 { grid-template-columns: repeat(2, minmax(0,1fr)); display:grid; gap:16px; }
.faq-list-v2 { grid-template-columns: repeat(3, minmax(0,1fr)); display:grid; }
@media (max-width: 1100px) {
    .hero-shell, .banner-ribbon-layout, .offset-grid, .faq-list-v2, .criteria-list-v2 { grid-template-columns: 1fr 1fr; }
    .banner-ribbon-layout .ribbon-main, .faq-list-v2 details:last-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
    .hero-shell, .banner-ribbon-layout, .offset-grid, .faq-list-v2, .criteria-list-v2, .hero-note.soft-grid { grid-template-columns: 1fr; }
    .signal-row { grid-template-columns: 62px 1fr auto; gap: 10px; }
    .signal-logo-wrap { width: 62px; }
    .signal-logo-wrap img { max-width:62px; }
    .card-topband { margin: -22px -22px 22px; padding: 20px 22px; align-items: center; }
    .logo-box { width: 136px; flex: 0 0 136px; }
    .logo-box img { max-width: 136px; max-height: 48px; }
    .product-head-v2 { gap: 14px; align-items: flex-start; }
    .score-badge { min-width: 64px; min-height: 64px; border-radius: 20px; font-size: 1.2rem; }
    .mini-columns { gap: 10px; }
    .card-actions-v2 { gap: 14px; display: grid; }
    .card-actions-v2 .btn { width: 100%; }
    .card-actions-v2 span { display: block; text-align: center; }
    .cookie-bar { left: 12px; right: 12px; bottom: 12px; padding: 16px; border-radius: 22px; }
}

@media (max-width: 640px) {
    .container { width: min(var(--container), calc(100% - 20px)); }
    .main-nav { right: 10px; }
    .product-head { align-items: start; }
    .mini-columns { grid-template-columns: 1fr; }
    .card-actions { align-items: stretch; }
    .card-actions .btn { width: 100%; }
    .card-actions span { text-align: center; display:block; }
    .footer-banner-row { gap: 10px; }

    section { padding: 24px 0; }
    .header-row { min-height: 74px; gap: 12px; }
    .brand { gap: 10px; }
    .brand-mark { width: 40px; height: 40px; border-radius: 14px; }
    .brand-copy strong { font-size: .98rem; }
    .brand-copy small { font-size: .78rem; }
    .hero-copy, .dark-panel, .promo-banner, .wide-banner, .prose-block, .footer-grid > div, .mini-banner, .white-card { padding: 18px; border-radius: 24px; }
    .hero-copy h1 { font-size: clamp(2rem, 12vw, 2.9rem); line-height: 1; }
    .hero-points, .wide-banner-points, .info-ribbon { gap: 8px; }
    .hero-points span, .wide-banner-points span, .info-ribbon span { width: 100%; justify-content: center; }
    .ribbon-card { min-height: auto; padding: 20px; border-radius: 24px; }
    .cards-grid-v2 { gap: 14px; }
    .card-topband { margin: -18px -18px 18px; padding: 16px 18px; gap: 12px; }
    .logo-box { width: 126px; flex: 0 0 126px; min-height: 42px; }
    .logo-box img { max-width: 126px; max-height: 44px; }
    .rating-pill { padding: 12px 14px; font-size: .95rem; }
    .product-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
    .product-head h3 { font-size: 1.35rem; }
    .lead-label, .bonus-copy, .mini-columns li, .section-heading p, .faq-list p { font-size: .96rem; }
    .mini-columns h4 { margin-bottom: 8px; }
    .age-card { padding: 22px; border-radius: 24px; }
    .age-actions, .cookie-actions { display: grid; grid-template-columns: 1fr; }
    .age-actions .btn, .cookie-actions .btn { width: 100%; }
    .cookie-bar { display: grid; gap: 14px; }
    .faq-list-v2 { gap: 10px; }
}

.white-card { overflow: hidden; }


[hidden] { display: none !important; }
.cookie-bar.is-visible { display: flex; }
@media (max-width: 820px) { .cookie-bar.is-visible { display: grid; } }
.logo-box { background: transparent !important; }
.logo-box img { width: 100%; max-width: 100%; max-height: none; height: auto; }
.signal-logo-wrap img { width: 100%; max-width: 100%; max-height: none; height: auto; }
.card-topband { align-items: center; }
.btn { touch-action: manipulation; }