/* VinaReward public landing — vina.nz/rewards
   Editorial marketplace · Brand orange #FB471F / indigo #3949AB
   Mobile-first · WCAG AA · prefers-reduced-motion · perf-optimized
   Heavy effects removed: blob float anim, SVG shape bobs, rotating CTA shapes,
   backdrop-filter, will-change. Hover effects simplified. */

.vnr-rewards-page {
    --vnr-orange: #FB471F;
    --vnr-orange-600: #E63E18;
    --vnr-orange-50: #FFF1EC;
    --vnr-orange-100: #FFD9CB;
    --vnr-indigo: #3949AB;
    --vnr-indigo-600: #2A3890;
    --vnr-indigo-50: #EEF1FB;
    --vnr-indigo-100: #C5CDF0;
    --vnr-ink: #0F172A;
    --vnr-ink-2: #334155;
    --vnr-ink-3: #64748B;
    --vnr-line: #E2E8F0;
    --vnr-line-2: #CBD5E1;
    --vnr-bg: #F8FAFC;
    --vnr-bg-2: #F1F5F9;
    --vnr-shadow-xs: 0 2px 6px -2px rgba(15, 23, 42, .08);
    --vnr-shadow-sm: 0 4px 12px -4px rgba(15, 23, 42, .12);
    --vnr-shadow: 0 12px 32px -14px rgba(15, 23, 42, .18);
    --vnr-shadow-lg: 0 24px 56px -18px rgba(15, 23, 42, .25);
    --vnr-shadow-orange: 0 14px 40px -14px rgba(251, 71, 31, .45);
    --vnr-radius: 18px;
    --vnr-radius-lg: 24px;
    --vnr-radius-xl: 28px;
    --vnr-ease: cubic-bezier(.22, .61, .36, 1);
    --vnr-tap: 44px;
    --vnr-safe-bottom: env(safe-area-inset-bottom, 0px);
    color: var(--vnr-ink);
    font-family: 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', sans-serif;
    overflow-x: hidden;
}

/* Mobile interaction defaults — kill tap delay + grey flash on iOS */
.vnr-rewards-page a,
.vnr-rewards-page button,
.vnr-rewards-page select,
.vnr-rewards-page input,
.vnr-rewards-page [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.vnr-rewards-page .container {
    max-width: 1240px;
    padding-left: 16px;
    padding-right: 16px;
    margin: 0 auto;
}

.vnr-rewards-page .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

.vnr-rewards-page a:focus-visible,
.vnr-rewards-page button:focus-visible,
.vnr-rewards-page input:focus-visible,
.vnr-rewards-page select:focus-visible {
    outline: 3px solid var(--vnr-indigo);
    outline-offset: 2px;
    border-radius: 8px;
}
.vnr-hero__search-field input:focus-visible,
.vnr-hero__search-field select:focus-visible,
.vnr-featured__select select:focus-visible {
    outline: none;
}

/* ============ Scroll-reveal — disabled for perf, kept as no-op for legacy markup ============ */
.vnr-reveal,
.vnr-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
}

/* ============ Buttons ============ */
.vnr-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: transform .15s, box-shadow .2s, background .15s, color .15s;
    line-height: 1; white-space: nowrap;
}
.vnr-btn--lg { padding: 15px 30px; font-size: 15.5px; }
.vnr-btn--book { padding: 9px 16px; font-size: 13.5px; gap: 6px; }
.vnr-btn--primary {
    background: linear-gradient(135deg, var(--vnr-orange), var(--vnr-orange-600));
    color: #fff; box-shadow: var(--vnr-shadow-orange);
}
.vnr-btn--primary:active { transform: translateY(1px); }
.vnr-btn--ghost {
    background: rgba(255, 255, 255, .9); color: var(--vnr-ink);
    border-color: var(--vnr-line);
}
.vnr-btn--outline {
    background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55);
}
.vnr-btn--white {
    background: #fff; color: var(--vnr-orange);
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .35);
}

/* Hover-only on devices with a fine pointer (desktop). Mobile gets :active feedback */
@media (hover: hover) and (pointer: fine) {
    .vnr-btn--primary:hover {
        transform: translateY(-2px); color: #fff;
        box-shadow: 0 18px 46px -14px rgba(251, 71, 31, .65);
    }
    .vnr-btn--ghost:hover {
        background: #fff; color: var(--vnr-ink); border-color: var(--vnr-indigo);
        box-shadow: var(--vnr-shadow-sm);
    }
    .vnr-btn--outline:hover {
        background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff;
    }
    .vnr-btn--white:hover {
        background: #FFF8F5; color: var(--vnr-orange);
        transform: translateY(-2px);
    }
}

.vnr-book-inline {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--vnr-orange); font-size: 13px; font-weight: 700;
    text-decoration: none; padding: 10px 8px; cursor: pointer;
    min-height: var(--vnr-tap); border-radius: 8px;
    transition: gap .15s, color .15s, background .15s;
}
.vnr-book-inline i { transition: transform .15s; }
.vnr-book-inline:active { background: var(--vnr-orange-50); }

.vnr-book-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--vnr-tap); height: var(--vnr-tap); border-radius: 50%;
    background: var(--vnr-orange-50); color: var(--vnr-orange);
    text-decoration: none; cursor: pointer;
    transition: background .15s, color .15s;
}
.vnr-book-icon:active { background: var(--vnr-orange); color: #fff; }

@media (hover: hover) and (pointer: fine) {
    .vnr-book-inline { min-height: auto; padding: 6px 0; }
    .vnr-book-inline:hover { color: var(--vnr-orange-600); gap: 9px; }
    .vnr-book-inline:hover i { transform: translateX(2px); }
    .vnr-book-icon { width: 38px; height: 38px; }
    .vnr-book-icon:hover { background: var(--vnr-orange); color: #fff; }
}

/* ============ Section heads ============ */
.vnr-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
@media (min-width: 768px) {
    .vnr-section-head { gap: 18px; margin-bottom: 28px; }
}
.vnr-section-head.text-center { display: block; text-align: center; margin-bottom: 24px; }
@media (min-width: 768px) {
    .vnr-section-head.text-center { margin-bottom: 32px; }
}
.vnr-section-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; background: var(--vnr-orange-50); color: var(--vnr-orange);
    border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; margin-bottom: 14px;
}
.vnr-rewards-page .vnr-section-title {
    font-size: 28px; font-weight: 800; letter-spacing: -.02em;
    line-height: 1.15; margin: 0 0 8px; color: var(--vnr-ink);
    display: block;
}
.vnr-rewards-page .vnr-section-title::before { content: none; }
.vnr-section-desc {
    font-size: 15.5px; color: var(--vnr-ink-3); margin: 0;
    max-width: 640px; line-height: 1.55;
}
.vnr-section-head.text-center .vnr-section-desc { margin: 0 auto; }
.vnr-section-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--vnr-indigo); font-weight: 700; font-size: 14.5px;
    text-decoration: none; padding: 8px 4px; margin: -8px -4px;
    border-radius: 8px; transition: gap .15s, color .15s, background .15s;
}
.vnr-section-link:active { background: var(--vnr-indigo-50); }
@media (hover: hover) and (pointer: fine) {
    .vnr-section-link:hover { color: var(--vnr-orange); gap: 10px; }
}
@media (min-width: 992px) { .vnr-rewards-page .vnr-section-title { font-size: 34px; } }

/* ============ HERO ============ */
/* Scoped to .vnr-rewards-page to outrank the admin "merchant card" .vnr-hero
   defined in public/assets/admin/css/vinareward-modern.css, which is loaded
   globally on every employer page and would otherwise force aspect-ratio:16/10
   and a dark navy background here. */
.vnr-rewards-page .vnr-hero {
    position: relative; padding: 48px 0 64px;
    background: linear-gradient(180deg, #FFF7F4 0%, #F8FAFC 100%);
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: auto;
    border-radius: 0;
}
.vnr-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.vnr-hero__blob {
    position: absolute; border-radius: 50%;
    filter: blur(40px); opacity: .45;
}
/* Heavy 60px blur on mobile causes janky paint on low-end devices —
   keep visible but lighter on small screens, full size on desktop */
@media (min-width: 768px) {
    .vnr-hero__blob { filter: blur(60px); opacity: .5; }
}
.vnr-hero__blob--1 {
    width: 360px; height: 360px;
    background: #FFD3C5;
    top: -140px; right: -100px;
}
.vnr-hero__blob--2 {
    width: 300px; height: 300px;
    background: #C7D0FF;
    bottom: -140px; left: -100px;
}
.vnr-hero__deco {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1;
}
.vnr-hero__shape {
    position: absolute; opacity: .9;
}
.vnr-hero__shape--gift {
    top: 12%; left: 6%;
    width: 56px; height: 56px;
    color: var(--vnr-orange);
}
.vnr-hero__shape--coin {
    top: 18%; right: 8%;
    width: 50px; height: 50px;
    color: var(--vnr-indigo);
}
.vnr-hero__shape--spark {
    bottom: 22%; left: 8%;
    width: 36px; height: 36px;
    color: var(--vnr-orange);
}
.vnr-hero__shape--ring {
    bottom: 16%; right: 10%;
    width: 72px; height: 72px;
    color: var(--vnr-indigo);
    opacity: .5;
}
@media (max-width: 767px) {
    .vnr-hero__shape--gift, .vnr-hero__shape--coin,
    .vnr-hero__shape--spark, .vnr-hero__shape--ring { display: none; }
}
.vnr-hero__inner {
    position: relative; max-width: 820px; margin: 0 auto;
    text-align: center;
}
.vnr-rewards-page .vnr-hero__content {
    position: static; width: 100%; color: inherit; text-shadow: none;
    inset: auto;
}

.vnr-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px 6px 12px; background: #fff;
    border: 1px solid var(--vnr-line); border-radius: 999px;
    font-size: 12.5px; font-weight: 700; color: var(--vnr-orange-600);
    margin-bottom: 18px;
    box-shadow: 0 4px 14px -4px rgba(251, 71, 31, .22);
}
.vnr-hero__badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--vnr-orange);
    box-shadow: 0 0 0 4px rgba(251, 71, 31, .18);
}

.vnr-rewards-page .vnr-hero__title {
    font-size: 34px; font-weight: 800; line-height: 1.1;
    letter-spacing: -.025em; margin: 0 0 14px; color: var(--vnr-ink);
}
.vnr-hero__title-gradient {
    background: linear-gradient(135deg, var(--vnr-orange), #FF7045 60%, var(--vnr-indigo));
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
@media (min-width: 768px) { .vnr-rewards-page .vnr-hero__title { font-size: 44px; } }
@media (min-width: 992px) { .vnr-rewards-page .vnr-hero__title { font-size: 52px; } }

.vnr-hero__desc {
    font-size: 16.5px; color: var(--vnr-ink-2); line-height: 1.55;
    margin: 0 auto 24px; max-width: 620px;
}

/* hero search */
.vnr-hero__search {
    background: #fff; padding: 8px; border-radius: 20px;
    box-shadow: var(--vnr-shadow-lg); margin: 0 auto 14px;
    border: 1px solid var(--vnr-line);
    transition: box-shadow .2s; max-width: 100%; text-align: left;
}
.vnr-hero__search:focus-within {
    box-shadow: 0 24px 48px -16px rgba(57, 73, 171, .3);
}
.vnr-hero__search-row {
    display: grid; gap: 6px; grid-template-columns: 1fr;
}
.vnr-hero__search-row > .vnr-hero__search-btn { width: 100%; }
@media (min-width: 768px) {
    .vnr-hero__search-row {
        grid-template-columns: 1fr 1fr 1.4fr auto;
        align-items: stretch;
    }
    .vnr-hero__search-row > .vnr-hero__search-btn { width: auto; }
}
.vnr-hero__search-field {
    position: relative; display: flex; align-items: center;
    background: var(--vnr-bg); border-radius: 12px; padding: 0 14px;
    min-height: 48px; cursor: pointer;
    transition: background .15s;
}
.vnr-hero__search-field:hover { background: var(--vnr-bg-2); }
.vnr-hero__search-field:focus-within {
    background: #fff; box-shadow: inset 0 0 0 2px var(--vnr-indigo);
}
.vnr-hero__search-field > i {
    color: var(--vnr-ink-3); margin-right: 8px; font-size: 16px; flex-shrink: 0;
}
.vnr-hero__search-field input,
.vnr-hero__search-field select {
    border: 0; background: transparent; outline: none; flex: 1;
    font-size: 16px; color: var(--vnr-ink); font-family: inherit;
    appearance: none; -webkit-appearance: none;
    padding: 11px 0; cursor: inherit; min-width: 0;
}
.vnr-hero__search-field input { cursor: text; }
@media (min-width: 768px) {
    .vnr-hero__search-field input,
    .vnr-hero__search-field select { font-size: 14.5px; }
}
.vnr-hero__search-field--cat,
.vnr-hero__search-field--city { padding-right: 32px; }
.vnr-hero__search-caret {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--vnr-ink-3); font-size: 12px;
}
.vnr-hero__search-btn {
    background: linear-gradient(135deg, var(--vnr-orange), var(--vnr-orange-600));
    color: #fff; border: 0; border-radius: 12px; padding: 0 26px;
    font-weight: 700; font-size: 14.5px; cursor: pointer; min-height: 48px;
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    box-shadow: var(--vnr-shadow-orange);
    transition: transform .15s, box-shadow .2s;
}
@media (hover: hover) and (pointer: fine) {
    .vnr-hero__search-btn:hover { transform: translateY(-1px); }
}

/* hero chips — horizontal scroll on mobile, wrap on desktop */
.vnr-hero__chips {
    display: flex; gap: 8px; align-items: center;
    margin: 16px -16px 18px; padding: 4px 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.vnr-hero__chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
    .vnr-hero__chips {
        flex-wrap: wrap; justify-content: center;
        overflow-x: visible; margin: 16px 0 18px; padding: 0;
    }
}
.vnr-hero__chips-label {
    font-size: 12px; font-weight: 700; color: var(--vnr-ink-3);
    text-transform: uppercase; letter-spacing: .08em; margin-right: 4px;
    flex-shrink: 0;
}
.vnr-hero__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; background: rgba(255, 255, 255, .85);
    border: 1px solid var(--vnr-line); border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--vnr-ink-2);
    text-decoration: none; cursor: pointer; flex-shrink: 0;
    scroll-snap-align: start; min-height: var(--vnr-tap);
    transition: background .15s, color .15s, border-color .15s;
}
.vnr-hero__chip i { font-size: 14px; color: var(--vnr-orange); }
.vnr-hero__chip:active { background: var(--vnr-orange-50); border-color: var(--vnr-orange); }
@media (hover: hover) and (pointer: fine) {
    .vnr-hero__chip { padding: 7px 14px; min-height: auto; }
    .vnr-hero__chip:hover {
        background: #fff; color: var(--vnr-ink); border-color: var(--vnr-orange);
    }
}

/* hero trust strip */
.vnr-hero__trust {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px 24px;
    justify-content: center; align-items: center;
}
.vnr-hero__trust-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--vnr-ink-3); font-weight: 600;
}
.vnr-hero__trust-item i { font-size: 14px; color: var(--vnr-indigo); }

/* ============ STATS ============ */
.vnr-stats { background: #fff; padding: 36px 0; border-bottom: 1px solid var(--vnr-line); }
.vnr-stats__grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(2, 1fr);
}
.vnr-stats__grid[data-cols="1"] { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
.vnr-stats__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin: 0 auto; }
.vnr-stats__grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
    .vnr-stats__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
    .vnr-stats__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}
.vnr-stats__item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; background: var(--vnr-bg); border-radius: var(--vnr-radius);
    border: 1px solid var(--vnr-line);
    transition: transform .15s, box-shadow .2s, border-color .2s;
}
@media (min-width: 768px) {
    .vnr-stats__item { padding: 20px 22px; gap: 16px; }
}
@media (hover: hover) and (pointer: fine) {
    .vnr-stats__item:hover {
        transform: translateY(-4px); box-shadow: var(--vnr-shadow-sm);
        border-color: transparent;
    }
}
.vnr-stats__icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--vnr-indigo), var(--vnr-indigo-600));
    color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    box-shadow: 0 8px 18px -8px rgba(57, 73, 171, .55);
}
@media (min-width: 768px) {
    .vnr-stats__icon { width: 52px; height: 52px; border-radius: 14px; font-size: 22px; }
}
.vnr-stats__value-row {
    display: inline-flex; align-items: baseline; gap: 2px;
    color: var(--vnr-ink); line-height: 1;
}
.vnr-stats__value {
    font-size: 32px; font-weight: 800; line-height: 1;
    letter-spacing: -.02em;
}
.vnr-stats__suffix {
    font-size: 22px; font-weight: 800; color: var(--vnr-orange);
    line-height: 1;
}
@media (min-width: 768px) { .vnr-stats__value { font-size: 36px; } }
.vnr-stats__label {
    font-size: 12px; color: var(--vnr-ink-3); margin-top: 6px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}

/* ============ HOW IT WORKS ============ */
.vnr-how {
    padding: 48px 0; background: var(--vnr-bg); position: relative;
    content-visibility: auto; contain-intrinsic-size: 600px;
}
@media (min-width: 768px) { .vnr-how { padding: 72px 0; } }
.vnr-how__grid {
    position: relative;
    display: grid; gap: 18px; grid-template-columns: 1fr;
}
@media (min-width: 576px) { .vnr-how__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .vnr-how__grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
/* Dashed connector line behind the cards on desktop — subtle journey cue */
@media (min-width: 992px) {
    .vnr-how__grid::before {
        content: ''; position: absolute;
        top: 92px; left: 12.5%; right: 12.5%; height: 2px;
        background: repeating-linear-gradient(
            to right, var(--vnr-line-2) 0 8px, transparent 8px 18px
        );
        z-index: 0;
    }
}
.vnr-how__item {
    position: relative; background: #fff; padding: 24px 20px 20px;
    border-radius: var(--vnr-radius-lg); border: 1px solid var(--vnr-line);
    transition: transform .15s, box-shadow .2s, border-color .2s;
    z-index: 1;
}
@media (min-width: 768px) {
    .vnr-how__item { padding: 28px 24px 24px; }
}
@media (hover: hover) and (pointer: fine) {
    .vnr-how__item:hover {
        transform: translateY(-6px); box-shadow: var(--vnr-shadow);
        border-color: transparent;
    }
}
/* Display-size step number, gradient text — the visual anchor of each card */
.vnr-how__step {
    position: absolute; top: 14px; right: 20px;
    font-family: 'Georgia', 'Playfair Display', serif;
    font-style: italic; font-size: 56px; font-weight: 700; line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--vnr-orange-100), var(--vnr-bg-2));
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.vnr-how__icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, var(--vnr-orange), var(--vnr-orange-600));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin-bottom: 18px;
    box-shadow: 0 10px 22px -10px rgba(251, 71, 31, .55);
}
.vnr-how__title {
    font-size: 17px; font-weight: 800; margin: 0 0 8px; color: var(--vnr-ink);
    letter-spacing: -.01em; line-height: 1.25;
}
.vnr-how__desc { font-size: 13.5px; color: var(--vnr-ink-3); margin: 0; line-height: 1.55; }

/* ============ CATEGORIES ============ */
.vnr-cats {
    padding: 40px 0;
    content-visibility: auto; contain-intrinsic-size: 500px;
}
@media (min-width: 768px) { .vnr-cats { padding: 64px 0; } }
.vnr-cats__grid {
    display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 576px) { .vnr-cats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .vnr-cats__grid { grid-template-columns: repeat(4, 1fr); } }
.vnr-cats__card {
    position: relative; background: #fff; padding: 26px 22px;
    border-radius: var(--vnr-radius-lg); border: 1px solid var(--vnr-line);
    text-decoration: none; color: var(--vnr-ink);
    transition: transform .15s, box-shadow .2s, border-color .2s;
    display: block; cursor: pointer; overflow: hidden;
    isolation: isolate;
}
.vnr-cats__card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 55%, rgba(251, 71, 31, .06));
    opacity: 0; transition: opacity .2s; z-index: -1;
}
.vnr-cats__card:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
    .vnr-cats__card:hover {
        transform: translateY(-5px); border-color: transparent;
        box-shadow: var(--vnr-shadow); color: var(--vnr-ink);
    }
    .vnr-cats__card:hover::after { opacity: 1; }
}
.vnr-cats__icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin-bottom: 14px;
    background: var(--vnr-orange-50); color: var(--vnr-orange);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
/* Distinct icon variants — solid colors instead of gradients to save paint */
.vnr-cats__icon--1 { background: #FFE2D5; color: var(--vnr-orange); }
.vnr-cats__icon--2 { background: #DFE5FF; color: var(--vnr-indigo); }
.vnr-cats__icon--3 { background: #FFE9C7; color: #B45309; }
.vnr-cats__icon--4 { background: #D7F2DC; color: #2E7D32; }
.vnr-cats__icon--5 { background: #FCE0EE; color: #C2185B; }
.vnr-cats__icon--6 { background: #DDF1F7; color: #006064; }
.vnr-cats__icon--7 { background: #ECE0F8; color: #6A1B9A; }
.vnr-cats__icon--8 { background: #FFE7DA; color: #BF360C; }

.vnr-cats__name { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--vnr-ink); }
.vnr-cats__count {
    font-size: 12.5px; color: var(--vnr-ink-3);
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.vnr-cats__arrow {
    position: absolute; top: 22px; right: 20px; opacity: 0;
    transition: opacity .15s; color: var(--vnr-orange);
}
@media (hover: hover) and (pointer: fine) {
    .vnr-cats__card:hover .vnr-cats__arrow { opacity: 1; }
}

/* ============ FEATURED ============ */
.vnr-featured { padding: 40px 0; background: var(--vnr-bg); }
@media (min-width: 768px) { .vnr-featured { padding: 64px 0; } }
.vnr-featured__filter-wrap {
    margin: 20px 0 28px;
    background: #fff; padding: 14px;
    border-radius: var(--vnr-radius);
    border: 1px solid var(--vnr-line);
    box-shadow: var(--vnr-shadow-xs);
}
.vnr-featured__filter {
    display: flex; flex-direction: column; gap: 12px; margin: 0;
    min-width: 0;
}
.vnr-featured__tabs {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    min-width: 0; max-width: 100%;
}
@media (max-width: 419px) {
    .vnr-featured__tabs {
        flex-wrap: nowrap;
        overflow-x: auto; scroll-snap-type: x proximity;
        padding-bottom: 4px; -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .vnr-featured__tabs::-webkit-scrollbar { height: 4px; }
    .vnr-featured__tabs::-webkit-scrollbar-thumb { background: var(--vnr-line-2); border-radius: 4px; }
}
.vnr-featured__tab {
    flex-shrink: 0;
    background: #fff; border: 1px solid var(--vnr-line); color: var(--vnr-ink-2);
    padding: 12px 16px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--vnr-tap);
    transition: background .15s, color .15s, border-color .15s;
    line-height: 1; scroll-snap-align: start; font-family: inherit;
}
@media (min-width: 768px) {
    .vnr-featured__tab { padding: 9px 16px; min-height: auto; }
}
@media (hover: hover) and (pointer: fine) {
    .vnr-featured__tab:hover {
        border-color: var(--vnr-indigo); color: var(--vnr-indigo);
        background: var(--vnr-indigo-50);
    }
}
.vnr-featured__tab.is-active {
    background: var(--vnr-indigo); color: #fff; border-color: var(--vnr-indigo);
    box-shadow: 0 6px 14px -6px rgba(57, 73, 171, .4);
}
.vnr-featured__tab-count {
    font-size: 11.5px; font-weight: 700;
    background: rgba(15, 23, 42, .08); padding: 2px 8px;
    border-radius: 999px; color: var(--vnr-ink-2);
}
.vnr-featured__tab.is-active .vnr-featured__tab-count {
    background: rgba(255, 255, 255, .22); color: #fff;
}
.vnr-featured__selects {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    min-width: 0; max-width: 100%;
}
.vnr-featured__select {
    position: relative; display: inline-flex; align-items: center;
    background: var(--vnr-bg); border: 1px solid var(--vnr-line); border-radius: 12px;
    padding: 0 12px; min-width: 0;
    transition: border-color .15s, background .15s;
    flex: 1 1 160px; max-width: 100%;
}
@media (min-width: 576px) {
    .vnr-featured__select { min-width: 160px; max-width: 280px; }
}
@media (hover: hover) and (pointer: fine) {
    .vnr-featured__select:hover { background: var(--vnr-bg-2); }
}
.vnr-featured__select:focus-within {
    background: #fff; border-color: var(--vnr-indigo);
    box-shadow: 0 0 0 3px rgba(57, 73, 171, .12);
}
.vnr-featured__select i { color: var(--vnr-ink-3); margin-right: 8px; font-size: 14px; flex-shrink: 0; }
.vnr-featured__select select {
    appearance: none; -webkit-appearance: none;
    background: transparent; border: none;
    padding: 11px 22px 11px 0; font-size: 13.5px;
    color: var(--vnr-ink); width: 100%; cursor: pointer; outline: none;
    font-family: inherit;
}
.vnr-featured__reset {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 12px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: #B91C1C;
    background: #FEE2E2; text-decoration: none;
    min-height: var(--vnr-tap);
    transition: background .15s;
}
@media (min-width: 768px) {
    .vnr-featured__reset { padding: 9px 14px; min-height: auto; }
}
@media (hover: hover) and (pointer: fine) {
    .vnr-featured__reset:hover { background: #FECACA; color: #991B1B; }
}

.vnr-featured__grid {
    display: grid; gap: 18px; grid-template-columns: 1fr;
    transition: opacity .2s;
}
.vnr-featured__grid[data-loading="1"] { opacity: .5; pointer-events: none; }
/* Breakpoints sized for the WORST-CASE container — employer/admin portals
   render this same grid inside a sidebar layout that eats ~280px of viewport.
   4 cols at 992px → 200px cards → reward/hot-deal/golden-hour badges fight
   for the same corner. Push 4 cols to 1600px so cards stay ≥ 280px wide
   even with the sidebar in the way; public site (no sidebar) gets 3 cols
   between 992-1599px which still reads well. */
@media (min-width: 576px) { .vnr-featured__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .vnr-featured__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1600px) { .vnr-featured__grid { grid-template-columns: repeat(4, 1fr); } }

/* Skeleton loader for AJAX swap */
.vnr-featured__skeleton {
    background: #fff; border: 1px solid var(--vnr-line);
    border-radius: var(--vnr-radius); overflow: hidden;
    display: flex; flex-direction: column;
}
.vnr-featured__skeleton-thumb {
    aspect-ratio: 4 / 3;
    background: linear-gradient(100deg, var(--vnr-bg-2) 30%, var(--vnr-bg) 50%, var(--vnr-bg-2) 70%);
    background-size: 200% 100%;
    animation: vnr-shimmer 1.4s linear infinite;
}
.vnr-featured__skeleton-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.vnr-featured__skeleton-line {
    height: 12px; border-radius: 6px;
    background: linear-gradient(100deg, var(--vnr-bg-2) 30%, var(--vnr-bg) 50%, var(--vnr-bg-2) 70%);
    background-size: 200% 100%;
    animation: vnr-shimmer 1.4s linear infinite;
}
.vnr-featured__skeleton-line--short { width: 60%; }
.vnr-featured__skeleton-line--mid { width: 80%; }

/* product card */
.vnr-product-card {
    background: #fff; border-radius: var(--vnr-radius); overflow: hidden;
    border: 1px solid var(--vnr-line);
    transition: transform .15s, box-shadow .2s, border-color .2s;
    display: flex; flex-direction: column; position: relative;
}
.vnr-product-card:active { transform: scale(.99); }
.vnr-product-card__link {
    text-decoration: none; color: var(--vnr-ink);
    display: flex; flex-direction: column; flex: 1;
}
@media (hover: hover) and (pointer: fine) {
    .vnr-product-card:hover {
        transform: translateY(-4px); box-shadow: var(--vnr-shadow);
        border-color: transparent;
    }
    .vnr-product-card__link:hover { color: var(--vnr-ink); }
}
.vnr-product-card__thumb {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--vnr-bg-2);
}
.vnr-product-card__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s var(--vnr-ease);
}
.vnr-product-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(15, 23, 42, .42));
    opacity: 0; transition: opacity .15s;
    display: flex; align-items: flex-end; justify-content: center; padding: 14px;
}
@media (hover: hover) and (pointer: fine) {
    .vnr-product-card:hover .vnr-product-card__thumb img { transform: scale(1.04); }
    .vnr-product-card:hover .vnr-product-card__overlay { opacity: 1; }
}
.vnr-product-card__quick {
    color: #fff; font-size: 12.5px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(0, 0, 0, .55);
    padding: 7px 12px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
}
.vnr-product-card__reward {
    position: absolute; top: 12px; left: 12px;
    background: linear-gradient(135deg, var(--vnr-orange), var(--vnr-orange-600));
    color: #fff; font-size: 12.5px; font-weight: 700;
    padding: 6px 12px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 5px;
    box-shadow: 0 6px 16px -6px rgba(251, 71, 31, .45);
    z-index: 2;
}
/* Fallback for .vnr-product-card__golden + .gh-* — primary defs in golden-hour.css */
.vnr-product-card__golden {
    position: absolute; top: 12px; right: 12px;
    background: #111827; color: #FABC05;
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
    padding: 5px 10px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 5px;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .55);
    z-index: 2; border: 1px solid rgba(250, 188, 5, .4);
    text-transform: uppercase;
    animation: gh-pulse-fb 2.6s ease-in-out infinite;
}
.vnr-product-card__golden i { color: #FABC05; font-size: 12px; }
@keyframes gh-pulse-fb {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 16px -6px rgba(0,0,0,.55), 0 0 0 0 rgba(250,188,5,.5); }
    50% { transform: scale(1.04); box-shadow: 0 6px 16px -6px rgba(0,0,0,.55), 0 0 0 6px rgba(250,188,5,0); }
}
.vnr-product-card__body {
    padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.vnr-product-card__title {
    font-size: 15px; font-weight: 700; line-height: 1.35;
    color: var(--vnr-ink); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.vnr-product-card__partner,
.vnr-product-card__loc {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; color: var(--vnr-ink-3); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vnr-product-card__partner i,
.vnr-product-card__loc i { color: var(--vnr-ink-3); flex-shrink: 0; }
.vnr-product-card__foot {
    padding: 12px 16px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-top: 1px dashed var(--vnr-line); margin-top: auto;
}
.vnr-product-card__price { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.vnr-product-card__price small {
    font-size: 10.5px; color: var(--vnr-ink-3); font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
}
.vnr-product-card__price strong {
    font-size: 16px; color: var(--vnr-orange); font-weight: 800;
    margin-top: 2px;
}
.vnr-featured__empty {
    text-align: center; padding: 48px 20px; color: var(--vnr-ink-3);
    background: #fff; border-radius: var(--vnr-radius);
    border: 1px dashed var(--vnr-line-2);
    grid-column: 1 / -1;
}
.vnr-featured__empty i { font-size: 44px; color: var(--vnr-line-2); }
.vnr-featured__empty p { margin: 12px 0 16px; font-size: 15px; }

/* ============ WHY ============ */
.vnr-why {
    padding: 48px 0;
    content-visibility: auto; contain-intrinsic-size: 500px;
}
@media (min-width: 768px) { .vnr-why { padding: 72px 0; } }
.vnr-why__grid {
    display: grid; gap: 18px; grid-template-columns: 1fr;
}
@media (min-width: 576px) { .vnr-why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .vnr-why__grid { grid-template-columns: repeat(4, 1fr); } }
.vnr-why__item {
    position: relative;
    text-align: left; padding: 24px 20px 20px;
    background: #fff; border: 1px solid var(--vnr-line);
    border-radius: var(--vnr-radius-lg);
    transition: transform .15s, box-shadow .2s, border-color .2s;
    overflow: hidden;
}
@media (min-width: 768px) {
    .vnr-why__item { padding: 28px 24px 24px; }
}
/* Top accent bar — different colour per card hints at variety without animation */
.vnr-why__item::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--vnr-indigo);
}
.vnr-why__item--1::before { background: linear-gradient(90deg, var(--vnr-orange), #FF7045); }
.vnr-why__item--2::before { background: linear-gradient(90deg, var(--vnr-indigo), #5161C7); }
.vnr-why__item--3::before { background: linear-gradient(90deg, #2E7D32, #4CAF50); }
.vnr-why__item--4::before { background: linear-gradient(90deg, #C2185B, #E91E63); }
@media (hover: hover) and (pointer: fine) {
    .vnr-why__item:hover {
        transform: translateY(-5px); box-shadow: var(--vnr-shadow);
        border-color: transparent;
    }
}
.vnr-why__icon {
    width: 60px; height: 60px; border-radius: 18px;
    background: var(--vnr-indigo-50); color: var(--vnr-indigo);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin: 0 0 16px;
}
.vnr-why__item--1 .vnr-why__icon { background: var(--vnr-orange-50); color: var(--vnr-orange); }
.vnr-why__item--3 .vnr-why__icon { background: #E8F5E9; color: #2E7D32; }
.vnr-why__item--4 .vnr-why__icon { background: #FCE4EC; color: #C2185B; }
.vnr-why__title {
    font-size: 17px; font-weight: 800; margin: 0 0 8px;
    color: var(--vnr-ink); letter-spacing: -.01em;
}
.vnr-why__desc { font-size: 14px; color: var(--vnr-ink-3); margin: 0; line-height: 1.55; }

/* ============ PARTNER CTA ============ */
.vnr-partner-cta {
    padding: 40px 0;
    content-visibility: auto; contain-intrinsic-size: 400px;
}
@media (min-width: 768px) { .vnr-partner-cta { padding: 64px 0; } }
.vnr-partner-cta__inner {
    background: linear-gradient(135deg, #1E2D8F 0%, #3949AB 100%);
    border-radius: var(--vnr-radius-lg); padding: 28px 22px; color: #fff;
    position: relative; overflow: hidden; isolation: isolate;
}
@media (min-width: 576px) {
    .vnr-partner-cta__inner { padding: 40px 28px; border-radius: var(--vnr-radius-xl); }
}
@media (min-width: 992px) { .vnr-partner-cta__inner { padding: 56px 48px; } }
.vnr-partner-cta__shape {
    position: absolute; pointer-events: none; opacity: .12;
    color: #fff; z-index: 0;
}
.vnr-partner-cta__shape--1 {
    top: -30px; right: -30px; width: 140px; height: 140px;
}
.vnr-partner-cta__shape--2 {
    bottom: -40px; left: 35%; width: 100px; height: 100px;
}
@media (min-width: 768px) {
    .vnr-partner-cta__shape--1 { top: -40px; right: -20px; width: 220px; height: 220px; }
    .vnr-partner-cta__shape--2 { bottom: -50px; width: 160px; height: 160px; }
}
.vnr-partner-cta__content { max-width: 720px; position: relative; z-index: 1; }
.vnr-partner-cta__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; background: rgba(255, 255, 255, .16);
    border-radius: 999px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px;
    color: #fff;
}
.vnr-partner-cta__title {
    font-size: 30px; font-weight: 800; line-height: 1.1;
    letter-spacing: -.025em; margin: 0 0 14px;
}
@media (min-width: 992px) { .vnr-partner-cta__title { font-size: 40px; } }
.vnr-partner-cta__desc {
    font-size: 15px; color: rgba(255, 255, 255, .9); margin: 0 0 20px;
    line-height: 1.6; max-width: 580px;
}
.vnr-partner-cta__benefits {
    list-style: none; padding: 0; margin: 0 0 24px;
    display: grid; gap: 10px;
}
@media (min-width: 768px) {
    .vnr-partner-cta__benefits { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
.vnr-partner-cta__benefits li {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .94);
}
.vnr-partner-cta__benefits i {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
    background: rgba(255, 255, 255, .16); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.vnr-partner-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.vnr-partner-cta__btns > .vnr-btn { flex: 1 1 100%; justify-content: center; }
@media (min-width: 576px) {
    .vnr-partner-cta__btns > .vnr-btn { flex: 0 0 auto; }
}

/* ============ FAQ ============ */
.vnr-faq {
    padding: 48px 0; background: var(--vnr-bg);
    content-visibility: auto; contain-intrinsic-size: 600px;
}
@media (min-width: 768px) { .vnr-faq { padding: 72px 0; } }
.vnr-faq__layout {
    display: grid; gap: 28px; grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 992px) {
    .vnr-faq__layout {
        grid-template-columns: 320px 1fr; gap: 56px;
    }
}
.vnr-faq__aside {
    position: relative;
}
@media (min-width: 992px) {
    .vnr-faq__aside { position: sticky; top: 24px; }
}
.vnr-faq__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; background: var(--vnr-orange-50);
    color: var(--vnr-orange); border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; margin-bottom: 14px;
}
.vnr-faq__title {
    font-size: 28px; font-weight: 800; line-height: 1.1;
    letter-spacing: -.025em; margin: 0 0 12px;
    color: var(--vnr-ink);
}
@media (min-width: 992px) { .vnr-faq__title { font-size: 36px; } }
.vnr-faq__lede {
    font-size: 14.5px; color: var(--vnr-ink-3); line-height: 1.55;
    margin: 0; max-width: 320px;
}
.vnr-faq__list {
    display: flex; flex-direction: column; gap: 10px;
}
.vnr-faq__item {
    background: #fff; border: 1px solid var(--vnr-line); border-radius: 14px;
    transition: border-color .15s, box-shadow .2s; overflow: hidden;
}
.vnr-faq__item.is-open {
    border-color: var(--vnr-indigo-100); box-shadow: var(--vnr-shadow-sm);
}
.vnr-faq__btn {
    width: 100%; background: transparent; border: 0;
    cursor: pointer; padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 15px; font-weight: 700; color: var(--vnr-ink);
    text-align: left; font-family: inherit; line-height: 1.4;
}
.vnr-faq__icon {
    width: 30px; height: 30px; border-radius: 50%; background: var(--vnr-bg-2);
    color: var(--vnr-indigo); display: inline-flex; align-items: center;
    justify-content: center; font-size: 14px; flex-shrink: 0;
    transition: transform .2s, background .15s, color .15s;
}
.vnr-faq__item.is-open .vnr-faq__icon {
    transform: rotate(45deg); background: var(--vnr-orange); color: #fff;
}
.vnr-faq__panel {
    overflow: hidden; height: 0;
    transition: height .25s var(--vnr-ease);
}
.vnr-faq__panel-inner {
    padding: 0 20px 18px; color: var(--vnr-ink-2);
    font-size: 14.5px; line-height: 1.65;
}

/* ============ FINAL CTA ============ */
.vnr-final-cta {
    padding: 40px 0 56px;
    content-visibility: auto; contain-intrinsic-size: 400px;
}
@media (min-width: 768px) { .vnr-final-cta { padding: 64px 0 80px; } }
.vnr-final-cta__inner {
    background: linear-gradient(135deg, #FB471F 0%, #E63E18 100%);
    border-radius: var(--vnr-radius-lg); padding: 32px 20px; color: #fff;
    text-align: center; position: relative; overflow: hidden; isolation: isolate;
}
@media (min-width: 576px) {
    .vnr-final-cta__inner { padding: 48px 28px; border-radius: var(--vnr-radius-xl); }
}
@media (min-width: 992px) { .vnr-final-cta__inner { padding: 64px 40px; } }
.vnr-final-cta__shape {
    position: absolute; pointer-events: none; opacity: .15;
    color: #fff; z-index: 0;
}
.vnr-final-cta__shape--1 {
    top: -30px; left: -30px; width: 130px; height: 130px;
}
.vnr-final-cta__shape--2 {
    bottom: -40px; right: -30px; width: 150px; height: 150px;
}
@media (min-width: 768px) {
    .vnr-final-cta__shape--1 { top: -40px; left: -20px; width: 200px; height: 200px; }
    .vnr-final-cta__shape--2 { bottom: -60px; right: -30px; width: 240px; height: 240px; }
}
.vnr-final-cta__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; background: rgba(255, 255, 255, .18);
    color: #fff; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    position: relative; z-index: 1;
}
.vnr-final-cta__title {
    font-size: 30px; font-weight: 800; line-height: 1.1;
    letter-spacing: -.025em; margin: 0 0 14px;
    position: relative; z-index: 1;
}
@media (min-width: 992px) { .vnr-final-cta__title { font-size: 42px; } }
.vnr-final-cta__desc {
    font-size: 16px; color: rgba(255, 255, 255, .94); margin: 0 0 26px;
    max-width: 580px; margin-left: auto; margin-right: auto; line-height: 1.55;
    position: relative; z-index: 1;
}
.vnr-final-cta__btns {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    position: relative; z-index: 1;
}
.vnr-final-cta__btns > .vnr-btn { flex: 1 1 100%; justify-content: center; }
@media (min-width: 576px) {
    .vnr-final-cta__btns > .vnr-btn { flex: 0 0 auto; }
}

/* ============ DEALS POPUP ============ */
/* Mobile: bottom drawer / Desktop: centered modal */
.vnr-popup {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0;
    font-family: 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (min-width: 768px) {
    .vnr-popup { align-items: center; padding: 16px; }
}
.vnr-popup[hidden] { display: none; }
.vnr-popup__overlay {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .6);
    opacity: 0; transition: opacity .2s;
}
.vnr-popup.is-visible .vnr-popup__overlay { opacity: 1; }
.vnr-popup__panel {
    position: relative;
    width: 100%; max-width: 920px;
    max-height: 85dvh; max-height: 85vh;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px -10px rgba(15, 23, 42, .35);
    overflow: hidden;
    display: flex; flex-direction: column;
    transform: translateY(100%); opacity: 0;
    transition: transform .28s var(--vnr-ease), opacity .2s;
    padding-bottom: var(--vnr-safe-bottom);
}
/* Drag handle pill on mobile — affordance for "swipe down to close" */
@media (max-width: 767px) {
    .vnr-popup__panel::before {
        content: ''; position: absolute;
        top: 7px; left: 50%; transform: translateX(-50%);
        width: 40px; height: 4px;
        background: rgba(255, 255, 255, .65);
        border-radius: 999px;
        z-index: 3; pointer-events: none;
    }
}
@media (min-width: 768px) {
    .vnr-popup__panel {
        border-radius: 22px;
        max-height: calc(100vh - 32px);
        box-shadow: 0 30px 70px -18px rgba(15, 23, 42, .4);
        transform: translateY(16px);
        padding-bottom: 0;
    }
}
.vnr-popup.is-visible .vnr-popup__panel {
    transform: none; opacity: 1;
}
.vnr-popup__head {
    position: relative;
    padding: 24px 28px 28px;
    background: linear-gradient(135deg, var(--vnr-orange) 0%, var(--vnr-orange-600) 100%);
    color: #fff;
    overflow: hidden;
}
.vnr-popup__head > * { position: relative; z-index: 1; }
.vnr-popup__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start; max-width: max-content;
    padding: 6px 14px 6px 12px;
    background: rgba(255, 255, 255, .18); color: #fff;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28);
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
    margin-bottom: 12px;
}
.vnr-popup__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
.vnr-popup__title {
    font-size: 26px; font-weight: 800; line-height: 1.1;
    letter-spacing: -.02em; margin: 0 0 6px; color: #fff;
}
.vnr-popup__title-em {
    font-style: italic; font-weight: 700;
    font-family: 'Georgia', 'Playfair Display', serif;
    color: rgba(255, 255, 255, .92);
}
@media (min-width: 768px) { .vnr-popup__title { font-size: 32px; } }
.vnr-popup__subtitle {
    margin: 0; font-size: 14px; line-height: 1.5;
    color: rgba(255, 255, 255, .92); max-width: 580px;
}
.vnr-popup__countdown {
    position: absolute; top: 24px; right: 64px;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 11px;
    background: rgba(15, 23, 42, .25); border-radius: 12px;
    font-variant-numeric: tabular-nums;
}
.vnr-popup__countdown-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    color: rgba(255, 255, 255, .85); text-transform: uppercase;
}
.vnr-popup__countdown-cells {
    display: inline-flex; align-items: center; gap: 4px;
    color: #fff; font-weight: 800;
}
.vnr-popup__countdown-cell {
    display: inline-block; min-width: 28px; text-align: center;
    padding: 4px 6px; border-radius: 6px;
    background: rgba(255, 255, 255, .14);
    font-size: 13px; line-height: 1;
}
.vnr-popup__countdown-sep { font-weight: 800; color: rgba(255, 255, 255, .65); }
@media (max-width: 767px) {
    .vnr-popup__countdown {
        position: static; margin-top: 14px; align-self: flex-start;
    }
    .vnr-popup__head { display: flex; flex-direction: column; }
}
.vnr-popup__close {
    position: absolute; top: 18px; right: 18px; z-index: 2;
    width: var(--vnr-tap); height: var(--vnr-tap); border-radius: 50%;
    background: rgba(255, 255, 255, .2); color: #fff; border: 0;
    cursor: pointer; display: inline-flex; align-items: center;
    justify-content: center; font-size: 16px;
    transition: background .15s;
}
@media (min-width: 768px) {
    .vnr-popup__close { top: 20px; right: 20px; width: 34px; height: 34px; }
}
@media (hover: hover) and (pointer: fine) {
    .vnr-popup__close:hover { background: rgba(255, 255, 255, .35); }
}
.vnr-popup__body {
    padding: 22px 22px 8px;
    overflow-y: auto;
}
@media (min-width: 768px) { .vnr-popup__body { padding: 24px 28px 8px; } }
.vnr-popup__grid {
    display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .vnr-popup__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .vnr-popup__grid { grid-template-columns: repeat(3, 1fr); } }
.vnr-popup__card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--vnr-line);
    border-radius: 14px; overflow: hidden; text-decoration: none;
    color: var(--vnr-ink);
    transition: transform .15s, box-shadow .2s, border-color .2s;
}
.vnr-popup__card:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
    .vnr-popup__card:hover {
        transform: translateY(-3px); color: var(--vnr-ink);
        box-shadow: var(--vnr-shadow); border-color: transparent;
    }
}
.vnr-popup__card-art {
    position: relative; aspect-ratio: 16 / 11;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
/* 3 brand-aligned solid backgrounds — cycled across the 3 cards */
.vnr-popup__card--1 .vnr-popup__card-art { background: #FFE2D5; }
.vnr-popup__card--2 .vnr-popup__card-art { background: #E8E2F8; }
.vnr-popup__card--3 .vnr-popup__card-art { background: #DCE9F8; }
.vnr-popup__card-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .35s var(--vnr-ease);
    background: var(--vnr-bg-2);
}
@media (hover: hover) and (pointer: fine) {
    .vnr-popup__card:hover .vnr-popup__card-img { transform: scale(1.04); }
    .vnr-popup__card:hover .vnr-popup__card-cta { color: var(--vnr-orange); gap: 8px; }
}
.vnr-popup__card-badge {
    position: absolute; top: 12px; left: 12px; z-index: 1;
    background: var(--vnr-ink); color: #fff;
    padding: 5px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 800;
}
.vnr-popup__card-body {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.vnr-popup__card-cat {
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    color: var(--vnr-orange); text-transform: uppercase;
    margin-bottom: 4px;
}
.vnr-popup__card-title {
    font-size: 15px; font-weight: 700; line-height: 1.3;
    margin: 0; color: var(--vnr-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.vnr-popup__card-meta {
    font-size: 12.5px; color: var(--vnr-ink-3); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-top: 2px;
}
.vnr-popup__card-meta span { margin: 0 4px; }
.vnr-popup__card-reward {
    margin-top: 10px;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--vnr-orange-50);
    border: 1px solid var(--vnr-orange-100);
    border-radius: 12px;
}
@media (min-width: 640px) { .vnr-popup__card-reward { margin-top: auto; } }
.vnr-popup__card-reward-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--vnr-orange); font-size: 15px;
    flex-shrink: 0;
}
.vnr-popup__card-reward-text {
    display: flex; flex-direction: column; line-height: 1.2; min-width: 0;
}
.vnr-popup__card-reward-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    color: var(--vnr-ink-3); text-transform: uppercase;
}
.vnr-popup__card-reward-value {
    font-size: 15px; font-weight: 800; color: var(--vnr-orange);
    letter-spacing: -.01em; margin-top: 2px;
}
.vnr-popup__card-reward-hint {
    font-size: 10.5px; color: var(--vnr-ink-3); font-weight: 500;
    margin-top: 3px; line-height: 1.3;
}
.vnr-popup__card-cta {
    margin-top: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--vnr-ink); font-weight: 700; font-size: 13.5px;
    transition: gap .15s, color .15s;
}
.vnr-popup__foot {
    padding: 14px 22px;
    border-top: 1px solid var(--vnr-line);
    background: var(--vnr-bg);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
@media (min-width: 768px) { .vnr-popup__foot { padding: 16px 28px; } }
.vnr-popup__view-all {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--vnr-ink); font-weight: 700; font-size: 14px;
    text-decoration: none; padding: 8px 4px; margin: -8px -4px;
    min-height: var(--vnr-tap); border-radius: 8px;
    transition: gap .15s, color .15s;
}
@media (min-width: 768px) {
    .vnr-popup__view-all { padding: 0; margin: 0; min-height: auto; }
}
@media (hover: hover) and (pointer: fine) {
    .vnr-popup__view-all:hover { color: var(--vnr-orange); gap: 9px; }
}
.vnr-popup__foot-right {
    display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.vnr-popup__dismiss-today {
    background: transparent; border: 1px solid var(--vnr-line);
    border-radius: 999px; cursor: pointer;
    padding: 11px 14px; color: var(--vnr-ink-3);
    font-size: 12.5px; font-weight: 600; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--vnr-tap);
    transition: background .15s, color .15s, border-color .15s;
}
@media (min-width: 768px) {
    .vnr-popup__dismiss-today { padding: 7px 14px; min-height: auto; }
}
@media (hover: hover) and (pointer: fine) {
    .vnr-popup__dismiss-today:hover {
        background: var(--vnr-bg-2); color: var(--vnr-ink-2);
        border-color: var(--vnr-line-2);
    }
}
.vnr-popup__dismiss-today i { font-size: 13px; }
.vnr-popup__hint {
    font-size: 12px; color: var(--vnr-ink-3); font-weight: 500;
}
@media (max-width: 575px) {
    /* Header tighter, leave 14px top for drag handle */
    .vnr-popup__head { padding: 20px 16px 16px; }
    .vnr-popup__eyebrow { font-size: 10.5px; padding: 5px 12px 5px 10px; margin-bottom: 8px; }
    .vnr-popup__title { font-size: 20px; line-height: 1.15; margin-bottom: 4px; }
    .vnr-popup__subtitle { font-size: 13px; line-height: 1.45; padding-right: 48px; }
    .vnr-popup__countdown { margin-top: 10px; padding: 6px 10px; }
    .vnr-popup__countdown-label { font-size: 10px; }
    .vnr-popup__countdown-cell { font-size: 12px; min-width: 24px; padding: 3px 5px; }
    .vnr-popup__body { padding: 14px 14px 4px; }
    .vnr-popup__grid { gap: 10px; }

    /* Horizontal card on mobile — image left, info right (compact, scannable) */
    .vnr-popup__card { flex-direction: row; align-items: stretch; }
    .vnr-popup__card-art {
        aspect-ratio: 1;
        width: 110px;
        flex-shrink: 0;
    }
    .vnr-popup__card-badge {
        top: 6px; left: 6px;
        padding: 3px 7px; font-size: 10px;
    }
    .vnr-popup__card-body {
        padding: 10px 12px;
        gap: 2px; min-width: 0;
    }
    .vnr-popup__card-cat { font-size: 10px; margin-bottom: 2px; }
    .vnr-popup__card-title {
        font-size: 13.5px; line-height: 1.3;
        -webkit-line-clamp: 2;
    }
    .vnr-popup__card-meta { font-size: 11.5px; }
    .vnr-popup__card-reward {
        margin-top: 6px; padding: 6px 8px; gap: 6px;
    }
    .vnr-popup__card-reward-icon { width: 24px; height: 24px; font-size: 12px; }
    .vnr-popup__card-reward-label { display: none; }
    .vnr-popup__card-reward-value { font-size: 13px; margin-top: 0; }
    .vnr-popup__card-reward-hint { display: none; }
    .vnr-popup__card-cta { margin-top: 6px; font-size: 12.5px; }

    /* Footer: stack vertically so View-all / Dismiss don't squeeze */
    .vnr-popup__foot {
        flex-direction: column; align-items: stretch;
        gap: 8px; padding: 12px 14px;
    }
    .vnr-popup__view-all {
        justify-content: center; padding: 12px;
        background: var(--vnr-orange-50); border-radius: 12px;
        margin: 0;
    }
    .vnr-popup__foot-right {
        width: 100%; justify-content: center; gap: 8px;
    }
    .vnr-popup__dismiss-today {
        flex: 1; justify-content: center;
    }
}
body.vnr-popup-open { overflow: hidden; }

/* ============ Animations (only used kind) ============ */
@keyframes vnr-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============ Mobile tweaks ============ */
@media (max-width: 575px) {
    .vnr-rewards-page .vnr-hero { padding: 32px 0 40px; }
    .vnr-rewards-page .vnr-hero__title { font-size: 28px; }
    .vnr-hero__desc { font-size: 14.5px; margin-bottom: 20px; }
    .vnr-rewards-page .vnr-section-title { font-size: 22px; }
    .vnr-section-desc { font-size: 14px; }
    .vnr-partner-cta__title { font-size: 22px; }
    .vnr-final-cta__title { font-size: 22px; }
    .vnr-stats__value { font-size: 21px; }
    .vnr-stats { padding: 24px 0; }
    .vnr-stats__grid { gap: 10px; }
    .vnr-product-card__foot {
        flex-direction: row; align-items: center; justify-content: space-between;
        gap: 8px;
    }
    .vnr-featured__filter-wrap { padding: 10px; }
    .vnr-featured__select { min-width: 0; flex: 1 1 calc(50% - 5px); }
    .vnr-featured__selects { gap: 8px; }
    .vnr-hero__search-field { min-height: 48px; }
    .vnr-hero__search-btn { padding: 14px 20px; min-height: 52px; }
    .vnr-hero__trust { gap: 6px 16px; font-size: 12.5px; }
    .vnr-popup__foot { padding: 12px 16px; }
    .vnr-popup__foot-right { width: 100%; justify-content: space-between; gap: 8px; }
    .vnr-popup__hint { display: none; }
    .vnr-faq__btn { padding: 14px 16px; font-size: 14.5px; }
    .vnr-faq__panel-inner { padding: 0 16px 14px; font-size: 14px; }
    .vnr-cats__icon, .vnr-how__icon { width: 48px; height: 48px; font-size: 20px; }
    .vnr-cats__card { padding: 18px 16px; }
}

/* ============ Reusable mobile utilities (used by future phases too) ============ */
.vnr-sticky-cta-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 12px calc(10px + var(--vnr-safe-bottom));
    background: #fff; border-top: 1px solid var(--vnr-line);
    box-shadow: 0 -8px 24px -10px rgba(15, 23, 42, .15);
    display: flex; gap: 8px;
}
.vnr-sticky-cta-mobile > .vnr-btn {
    flex: 1; justify-content: center; min-height: var(--vnr-tap);
}
@media (min-width: 992px) {
    .vnr-sticky-cta-mobile { display: none; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
    .vnr-rewards-page *,
    .vnr-rewards-page *::before,
    .vnr-rewards-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .vnr-reveal { opacity: 1; transform: none; }
    .vnr-popup__overlay,
    .vnr-popup__panel { transition: none !important; }
}