:root {
            --bg: #0A0E21;
            --bg-elevated: #111936;
            --bg-card: rgba(255, 255, 255, 0.05);
            --bg-card-end: rgba(255, 255, 255, 0.08);
            --line: rgba(255, 255, 255, 0.10);
            --text: #f8fafc;
            --muted: #94a3b8;
            --text-secondary: #cbd5e1;
            --accent: #5B7FFF;
            --accent-soft: #89A5FF;
            --accent-strong: #4166D5;
            --amber: #F59E0B;
            --amber-soft: #FBBF24;
            --ok: #10B981;
            --danger: #f87171;
            --radius: 1rem;
            --font: 'Plus Jakarta Sans', system-ui, sans-serif;
            --display: 'Plus Jakarta Sans', system-ui, sans-serif;
            --header-h: 64px;
            --glow: rgba(16, 185, 129, 0.35);
            --glow-amber: rgba(245, 158, 11, 0.35);
        }
        * { box-sizing: border-box; }
        html {
            overflow-x: hidden;
        }
        body {
            margin: 0;
            overflow-x: hidden;
            font-family: var(--font);
            background:
                radial-gradient(1000px 480px at 12% -10%, var(--glow) 0%, transparent 55%),
                radial-gradient(900px 420px at 92% 0%, rgba(91, 127, 255, 0.10) 0%, transparent 50%),
                linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 48%, var(--bg) 100%);
            color: var(--text);
            min-height: 100vh;
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
        }
        a { color: var(--accent-soft); text-decoration: none; }
        a:hover { text-decoration: underline; }
        .wrap { width: min(1360px, calc(100% - 2rem)); margin-inline: auto; }
        .skip-link {
            position: fixed; left: 1rem; top: 0.75rem; z-index: 100;
            transform: translateY(-200%); padding: 0.65rem 0.9rem;
            border-radius: 0.6rem; background: var(--accent); color: #052e1b;
            font-weight: 700;
        }
        .skip-link:focus { transform: translateY(0); }

        .site-header {
            position: sticky; top: 0; z-index: 40;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            background: rgba(2, 6, 23, 0.72);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        .nav {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
            align-items: center;
            gap: 1rem;
            min-height: var(--header-h);
        }
        .nav-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            grid-column: 1;
            justify-self: start;
        }
        .brand {
            font-family: var(--display);
            font-weight: 700;
            font-size: 1.35rem;
            color: #fff;
            text-decoration: none;
            letter-spacing: -0.03em;
            z-index: 2;
            transition: all 0.3s ease-in-out;
        }
        .brand:hover { text-decoration: none; color: var(--accent-soft); }

        .nav-toggle {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
            border: 0;
        }
        .nav-burger {
            display: none;
            width: 40px; height: 40px;
            border-radius: 0.75rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255,255,255,0.04);
            align-items: center; justify-content: center;
            cursor: pointer;
            z-index: 2;
            transition: all 0.3s ease-in-out;
        }
        .nav-burger:hover { border-color: rgba(255,255,255,0.22); }
        .nav-burger span,
        .nav-burger span::before,
        .nav-burger span::after {
            display: block; width: 16px; height: 2px;
            background: var(--text); border-radius: 2px;
            position: relative; transition: 0.2s ease;
        }
        .nav-burger span::before,
        .nav-burger span::after {
            content: ''; position: absolute; left: 0;
        }
        .nav-burger span::before { top: -5px; }
        .nav-burger span::after { top: 5px; }

        .nav-panel {
            display: contents;
        }
        .nav-center {
            position: relative;
            display: flex; gap: 0.2rem; align-items: center;
            grid-column: 2;
            justify-self: center;
            padding: 0.25rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
        }
        .nav-pill {
            position: absolute;
            top: 0.25rem;
            left: 0;
            height: calc(100% - 0.5rem);
            border-radius: 999px;
            background: rgba(16, 185, 129, 0.18);
            border: 1px solid rgba(16, 185, 129, 0.28);
            pointer-events: none;
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
            z-index: 0;
            opacity: 0;
        }
        .nav-center a {
            position: relative;
            z-index: 1;
            color: var(--muted);
            font-size: 0.88rem;
            font-weight: 500;
            padding: 0.45rem 0.9rem;
            border-radius: 999px;
            text-decoration: none;
            transition: all 0.3s ease-in-out;
        }
        .nav-center a:hover { color: var(--text); background: rgba(255,255,255,0.06); }
        .nav-center a.active {
            color: #fff;
            background: rgba(52, 211, 153, 0.16);
        }
        .nav-center a.active::after { display: none; }
        .nav-right {
            display: flex; align-items: center; gap: 0.55rem;
            grid-column: 3;
            justify-self: end;
        }
        .nav-right .btn,
        .nav-right > a.btn {
            white-space: nowrap;
            flex-shrink: 0;
        }
        .nav-user {
            color: var(--text-secondary);
            font-size: 0.88rem;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .btn {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 0.4rem;
            border: 0; border-radius: 0.875rem;
            padding: 0.75rem 1.25rem;
            font-weight: 600; font-size: 0.95rem;
            font-family: var(--font);
            cursor: pointer; text-decoration: none;
            transition: all 0.3s ease-in-out;
        }
        .btn:hover { text-decoration: none; }
        .btn:active { transform: scale(0.95); }
        .btn-primary {
            background: linear-gradient(90deg, #10B981 0%, #059669 100%);
            color: #022c22;
            box-shadow: 0 0 0 0 transparent;
        }
        .btn-primary:hover {
            filter: brightness(1.06);
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
            transform: translateY(-1px) scale(1.02);
        }
        .btn-primary:active { transform: scale(0.95); }
        .btn-ghost {
            background: rgba(255,255,255,0.04);
            color: var(--text);
            border: 1px solid rgba(255,255,255,0.12);
            backdrop-filter: blur(8px);
        }
        .btn-ghost:hover {
            border-color: rgba(255,255,255,0.22);
            background: rgba(255,255,255,0.08);
            transform: translateY(-1px);
        }
        .btn-secondary {
            background: rgba(255,255,255,0.04);
            color: var(--text-secondary);
            border: 1px solid rgba(255,255,255,0.10);
        }
        .btn-secondary:hover {
            color: var(--text);
            border-color: rgba(52, 211, 153, 0.45);
            background: rgba(52, 211, 153, 0.08);
            transform: translateY(-1px);
        }
        .btn-block { width: 100%; }
        .btn-sm { padding: 0.5rem 0.95rem; font-size: 0.88rem; }
        .text-link {
            color: var(--accent-soft);
            font-weight: 600;
            font-size: 0.92rem;
            text-decoration: none;
        }
        .text-link:hover { text-decoration: underline; }

        main { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(5rem, 10vw, 7rem); }
        .hero {
            padding: clamp(1.75rem, 5vw, 3rem) 0 clamp(1.1rem, 3vw, 1.85rem);
            display: grid;
            gap: 0.85rem;
        }
        .page-hero {
            max-width: 40rem;
            margin-inline: auto;
            text-align: center;
            padding: clamp(1.1rem, 3vw, 1.75rem) 0 0.5rem;
        }
        .page-hero p {
            margin-top: 0.4rem;
            font-size: 1.02rem;
        }
        .hero-split {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 2.75rem;
            align-items: center;
            padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
        }
        .hero-kicker {
            font-size: 0.82rem;
            font-weight: 600;
            color: transparent;
            background: linear-gradient(90deg, #34d399, #14b8a6);
            -webkit-background-clip: text;
            background-clip: text;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin: 0 0 0.85rem;
            font-family: var(--font);
        }
        .hero h1, .hero-copy h1 {
            font-family: var(--display);
            font-size: clamp(2.25rem, 5vw, 3.5rem);
            font-weight: 700;
            line-height: 1.08;
            margin: 0;
            letter-spacing: -0.035em;
            color: #fff;
        }
        .hero p, .hero-copy p {
            margin: 1rem 0 0;
            color: var(--muted);
            font-size: 1.08rem;
            max-width: 34rem;
            line-height: 1.7;
        }
        .cta-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.35rem; }
        .hero-media {
            position: relative;
            width: 100%;
            aspect-ratio: 4 / 3;
            display: grid;
            place-items: center;
        }

        .phone-stage {
            position: relative;
            width: 100%;
            min-height: 300px;
            display: grid;
            place-items: center;
        }
        .phone-frame {
            width: min(200px, 62%);
            aspect-ratio: 9/17;
            border-radius: 26px;
            border: 1px solid rgba(123, 154, 255, 0.28);
            background: linear-gradient(165deg, #151B33 0%, #020617 100%);
            box-shadow: 0 28px 56px rgba(0,0,0,0.32);
            padding: 12px 10px;
            position: relative;
            z-index: 2;
        }
        .phone-notch {
            width: 38%; height: 8px; border-radius: 999px;
            background: #020617; margin: 0 auto 10px;
        }
        .phone-screen {
            height: calc(100% - 18px);
            border-radius: 16px;
            background:
                linear-gradient(180deg, rgba(52, 211, 153,0.16), transparent 42%),
                #0f172a;
            padding: 10px;
            display: flex; flex-direction: column; gap: 8px;
        }
        .mock-card {
            border-radius: 10px;
            padding: 9px 11px;
            background: linear-gradient(135deg, #0f172a, #1e293b);
            border: 1px solid rgba(52, 211, 153,0.22);
        }
        .mock-card.gold {
            background: linear-gradient(135deg, #3a2f18, #5a4a22);
            border-color: rgba(255, 213, 79, 0.22);
            transform: rotate(-5deg) translate(-14px, 10px);
            width: 64%;
            position: absolute;
            left: 10%; top: 20%;
            z-index: 1;
            box-shadow: 0 14px 26px rgba(0,0,0,0.28);
        }
        .mock-card.blue {
            background: linear-gradient(135deg, #1a2a55, #2a3f7a);
            transform: rotate(7deg) translate(40%, 58%);
            width: 62%;
            position: absolute;
            z-index: 1;
            box-shadow: 0 14px 26px rgba(0,0,0,0.28);
        }
        .mock-line { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.14); }
        .mock-line.short { width: 45%; }
        .mock-line.mid { width: 70%; }
        .mock-stat {
            margin-top: auto;
            display: grid; gap: 6px;
            padding: 10px;
            border-radius: 12px;
            background: rgba(52, 211, 153,0.12);
            border: 1px solid rgba(52, 211, 153,0.2);
        }

        .card-stacks {
            display: flex;
            justify-content: center;
            align-items: stretch;
            gap: var(--stack-gap, 2.9rem);
            overflow: hidden;
            pointer-events: none;
            opacity: var(--stack-opacity, 0.7);
            /* Clip room lives on the outer frame so scaled/rotated cards are not cut by each column. */
            padding: var(--stack-clip-pad, 80px);
            box-sizing: border-box;
            mask-image: linear-gradient(180deg, #000 0%, #000 var(--stack-fade, 30%), transparent 100%);
            -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--stack-fade, 30%), transparent 100%);
        }
        .stack-col {
            display: none;
            width: var(--stack-col-width, 320px);
            height: 100%;
            overflow: visible;
            transform: rotate(var(--stack-rotate, 30deg));
            transform-origin: center center;
        }
        [data-stack-cols="2"] .stack-col:nth-child(-n+2),
        [data-stack-cols="3"] .stack-col:nth-child(-n+3),
        [data-stack-cols="4"] .stack-col:nth-child(-n+4),
        [data-stack-cols="5"] .stack-col:nth-child(-n+5),
        [data-stack-cols="6"] .stack-col:nth-child(-n+6),
        [data-stack-cols="7"] .stack-col:nth-child(-n+7),
        [data-stack-cols="8"] .stack-col { display: block; }
        .stack-col-1 { transform: rotate(calc(var(--stack-rotate, 30deg) - 2deg)) translateY(-18px); }
        .stack-col-2 { transform: rotate(calc(var(--stack-rotate, 30deg) + 2deg)) translateY(22px); }
        .stack-col-3 { transform: rotate(calc(var(--stack-rotate, 30deg) - 1deg)) translateY(-8px); }
        .stack-col-4 { transform: rotate(calc(var(--stack-rotate, 30deg) + 1deg)) translateY(14px); }
        .stack-col-5 { transform: rotate(calc(var(--stack-rotate, 30deg) - 1.5deg)) translateY(10px); }
        .stack-col-6 { transform: rotate(calc(var(--stack-rotate, 30deg) + 1.5deg)) translateY(-12px); }
        .stack-col-7 { transform: rotate(calc(var(--stack-rotate, 30deg) - 0.5deg)) translateY(16px); }
        .stack-col-8 { transform: rotate(calc(var(--stack-rotate, 30deg) + 0.5deg)) translateY(-6px); }
        .stack-marquee {
            display: flex;
            flex-direction: column;
            gap: var(--stack-card-gap, 1.15rem);
            will-change: transform;
            animation: stack-marquee var(--stack-speed-1, 64s) linear infinite;
        }
        .stack-marquee-group {
            display: flex;
            flex-direction: column;
            gap: var(--stack-card-gap, 1.15rem);
            flex-shrink: 0;
        }
        .stack-col-2 .stack-marquee { animation-duration: var(--stack-speed-2, 56s); animation-direction: reverse; }
        .stack-col-3 .stack-marquee { animation-duration: var(--stack-speed-3, 46s); animation-delay: -14s; }
        .stack-col-4 .stack-marquee { animation-duration: var(--stack-speed-4, 54s); animation-direction: reverse; animation-delay: -8s; }
        .stack-card {
            width: 100%;
            border: 0;
            background: transparent;
            box-shadow: none;
            flex-shrink: 0;
            transform: scale(var(--stack-card-scale, 1));
            transform-origin: center center;
        }
        .stack-card img {
            width: 100%;
            aspect-ratio: 1.586 / 1;
            object-fit: cover;
            display: block;
            border-radius: 12px;
        }
        /* Two equal groups + one inter-group gap: -50% undershoots by half a gap. */
        @keyframes stack-marquee {
            from { transform: translateY(0); }
            to { transform: translateY(-100%); }
        }

        .section { margin-top: clamp(3.5rem, 8vw, 6rem); padding-block: clamp(1rem, 2vw, 1.5rem); }
        .section-head {
            display: flex; justify-content: space-between; align-items: baseline;
            gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
        }
        .section h2, .section-head h2 {
            font-family: var(--display);
            font-size: clamp(1.45rem, 3vw, 1.85rem);
            font-weight: 700;
            margin: 0;
            letter-spacing: -0.03em;
            color: #fff;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1rem;
        }
        .teaser-grid {
            display: grid;
            grid-template-columns: 1.35fr 1fr;
            gap: 1rem;
        }
        .teaser-side { display: grid; gap: 1rem; }

        a.card, .card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 1rem;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            color: inherit;
            text-decoration: none;
            box-shadow: 0 20px 40px rgba(0,0,0,0.25);
            transition: all 0.3s ease-in-out;
        }
        a.card:hover {
            text-decoration: none;
            transform: translateY(-4px);
            border-color: rgba(255, 255, 255, 0.20);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 24px rgba(16, 185, 129, 0.10);
        }
        a.card:hover img { transform: scale(1.035); }
        .card img {
            width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #020617;
            transition: transform 0.35s ease;
        }
        .card-img-slot {
            position: relative;
            aspect-ratio: 1.586 / 1;
            background: #020617;
            overflow: hidden;
        }
        .card-img-slot .discover-card-img,
        .card-img-slot .card-img-placeholder {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            background: linear-gradient(145deg, #020617, #0f172a);
        }
        .card-img-placeholder {
            display: grid;
            place-items: center;
            color: var(--muted);
            font-size: 0.82rem;
            font-weight: 600;
            text-align: center;
            padding: 0.5rem;
        }
        .card-img-skeleton {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                110deg,
                rgba(26, 34, 66, 0.35) 8%,
                rgba(52, 211, 153, 0.12) 18%,
                rgba(26, 34, 66, 0.35) 33%
            );
            background-size: 200% 100%;
            animation: card-img-shimmer 1.25s ease-in-out infinite;
            pointer-events: none;
        }
        .card-img-slot.loaded .card-img-skeleton,
        .card-img-slot.no-img .card-img-skeleton {
            display: none;
        }
        @keyframes card-img-shimmer {
            0% { background-position: 100% 0; }
            100% { background-position: -100% 0; }
        }
        .card.featured img { aspect-ratio: 16/11; }
        .card-body { padding: 0.95rem 1rem 1.05rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
        .card-body h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; color: var(--text); }
        .meta { color: var(--muted); font-size: 0.82rem; }
        .muted { color: var(--muted); }

        .features,
        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1rem;
            margin: 0;
            padding: 0;
            list-style: none;
            border: 0;
            background: transparent;
            overflow: visible;
        }
        .feature,
        .feature-list > li {
            padding: 1.35rem 1.25rem;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
            transition: all 0.3s ease-in-out;
        }
        .feature:hover,
        .feature-list > li:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 255, 255, 0.20);
            box-shadow: 0 0 24px rgba(16, 185, 129, 0.10);
        }
        .feature:last-child,
        .feature-list > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
        .feature-icon {
            display: inline-flex;
            width: 2.5rem; height: 2.5rem;
            align-items: center; justify-content: center;
            border-radius: 0.75rem;
            background: rgba(52, 211, 153, 0.12);
            color: var(--accent-soft);
            margin-bottom: 0.85rem;
        }
        .feature-icon svg { width: 1.25rem; height: 1.25rem; }
        .feature h3,
        .feature-list h3 {
            margin: 0 0 0.25rem;
            font-size: 1rem;
        }
        .feature p,
        .feature-list p {
            margin: 0;
            color: var(--muted);
            font-size: 0.92rem;
            line-height: 1.5;
        }

        /* Compact info primitives (Flutter CardDetailSpecContent.detailInfoTable) */
        .info-table {
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow: hidden;
            background: transparent;
        }
        .info-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem 1rem;
            padding: 0.55rem 0.75rem;
            border-bottom: 1px solid rgba(46, 56, 85, 0.55);
        }
        .info-row:last-child { border-bottom: 0; }
        .info-row:nth-child(even) {
            background: rgba(18, 24, 41, 0.55);
        }
        .info-row .info-label {
            flex: 1 1 45%;
            color: var(--muted);
            font-size: 0.82rem;
            line-height: 1.4;
        }
        .info-row .info-value {
            flex: 1 1 45%;
            text-align: right;
            color: var(--text);
            font-size: 0.9rem;
            font-weight: 600;
            line-height: 1.4;
            word-break: break-word;
        }
        .info-row .info-value-sub {
            display: block;
            margin-top: 0.15rem;
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 400;
        }
        @media (max-width: 420px) {
            .info-row {
                flex-direction: column;
                gap: 0.2rem;
            }
            .info-row .info-value { text-align: left; }
        }

        .content-section {
            margin: 0 0 1.15rem;
        }
        .content-section:last-child { margin-bottom: 0; }
        .content-section > .catalog-subhead,
        .content-section > .section-title {
            margin-top: 0;
        }
        .section-divider {
            height: 1px;
            margin: 1.15rem 0;
            border: 0;
            background: rgba(46, 56, 85, 0.65);
        }

        .listing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1rem;
        }
        @media (min-width: 900px) {
            .listing-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .listing-grid .card.featured,
            .listing-grid .media-card.featured {
                grid-column: span 2;
            }
            .listing-grid .card.featured img {
                aspect-ratio: 21 / 10;
            }
            .listing-grid--horizontal {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        .panel,
        .content-panel {
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
            padding: 1.5rem;
            box-shadow: 0 20px 40px rgba(0,0,0,0.25);
        }
        .content-panel {
            max-width: 520px;
            margin-inline: auto;
            text-align: center;
        }
        .content-panel h1 {
            font-family: var(--display);
            font-size: 1.6rem;
            margin: 0 0 0.75rem;
            letter-spacing: -0.02em;
        }

        .price-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1rem;
        }
        .price-card {
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 1.25rem;
            padding: 1.6rem;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
            display: flex; flex-direction: column; gap: 0.75rem;
            order: 2;
            transition: all 0.3s ease-in-out;
        }
        .price-card:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 255, 255, 0.20);
            box-shadow: 0 0 24px rgba(16, 185, 129, 0.10);
        }
        .price-card.featured {
            border-color: rgba(52, 211, 153, 0.45);
            box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.25), 0 18px 40px rgba(0,0,0,0.3), 0 0 28px rgba(16, 185, 129, 0.12);
            order: 1;
        }
        @media (min-width: 700px) {
            .price-card { order: unset; }
            .price-card.featured { order: unset; }
        }
        .price { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.02em; }
        .price s { color: var(--muted); font-size: 1rem; font-weight: 500; margin-right: 0.4rem; }
        .price-sub { color: var(--muted); font-size: 0.88rem; margin-top: -0.35rem; }
        .badge {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.25rem 0.6rem;
            border-radius: 999px;
            background: rgba(52, 211, 153, 0.16);
            color: var(--accent-soft);
            width: fit-content;
        }
        .benefit-grid,
        .benefit-list {
            display: grid;
            gap: 0;
            margin: 0;
            padding: 0;
            list-style: none;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 1rem;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.04);
        }
        .benefit-grid li,
        .benefit-list li {
            display: flex;
            gap: 0.55rem;
            align-items: flex-start;
            padding: 0.75rem 0.95rem;
            border-bottom: 1px solid rgba(46, 56, 85, 0.65);
            color: var(--text-secondary);
            font-size: 0.94rem;
        }
        .benefit-grid li:last-child,
        .benefit-list li:last-child { border-bottom: 0; }
        .benefit-grid li::before,
        .benefit-list li::before {
            content: '✓';
            color: var(--ok);
            font-weight: 700;
            flex-shrink: 0;
        }

        .alert {
            padding: 0.85rem 1rem;
            border-radius: 12px;
            margin-bottom: 1rem;
            font-size: 0.92rem;
        }
        .alert-ok { background: rgba(76, 175, 80, 0.12); color: #81C784; border: 1px solid rgba(76, 175, 80, 0.28); }
        .alert-error { background: rgba(229, 115, 115, 0.12); color: var(--danger); border: 1px solid rgba(229, 115, 115, 0.28); }

        .auth-wrap {
            max-width: 420px;
            margin: 2rem auto 0;
        }
        .auth-wrap .form.panel {
            padding: 1.45rem;
        }
        .auth-wrap h1 {
            font-family: var(--display);
            font-size: 1.65rem;
            margin: 0 0 0.35rem;
            letter-spacing: -0.02em;
        }
        .auth-wrap .lead {
            color: var(--muted);
            margin: 0 0 1.15rem;
            font-size: 0.95rem;
        }
        .form {
            display: grid;
            gap: 0.9rem;
            padding: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
        }
        .form label { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }
        .form input[type="email"],
        .form input[type="password"],
        .form input[type="text"] {
            width: 100%;
            padding: 0.75rem 0.95rem;
            border-radius: 0.75rem;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(2, 6, 23, 0.65);
            color: var(--text);
            transition: all 0.3s ease-in-out;
        }
        .form input:focus {
            outline: 2px solid rgba(52, 211, 153, 0.35);
            border-color: var(--accent);
        }
        .form .error { color: var(--danger); font-size: 0.85rem; }
        .form-row {
            display: flex; justify-content: space-between; align-items: center;
            gap: 0.75rem; flex-wrap: wrap;
        }

        .search {
            display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;
            padding: 0.35rem;
            border-radius: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
        }
        .search input {
            flex: 1; min-width: 160px;
            padding: 0.65rem 0.95rem;
            border-radius: 999px;
            border: 0;
            background: transparent;
            color: var(--text);
        }
        .search input:focus { outline: none; }
        .search .btn { padding: 0.55rem 1rem; }

        .chips { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
        .chips a,
        .filter-chips a {
            font-size: 0.82rem;
            padding: 0.4rem 0.85rem;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            color: var(--muted);
            text-decoration: none;
            background: rgba(255, 255, 255, 0.04);
            transition: all 0.3s ease-in-out;
        }
        .chips a:hover,
        .filter-chips a:hover { color: var(--text); text-decoration: none; border-color: #3A4563; }
        .chips a.active,
        .filter-chips a.active {
            color: #fff;
            border-color: rgba(52, 211, 153, 0.45);
            background: rgba(52, 211, 153, 0.14);
        }
        .filter-scroll {
            overflow-x: auto;
            margin: 0 0 clamp(1rem, 2vw, 1.5rem);
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .filter-scroll::-webkit-scrollbar { display: none; }
        .filter-chips {
            display: flex;
            gap: 0.5rem;
            flex-wrap: nowrap;
            padding-bottom: 2px;
            width: max-content;
            min-width: 100%;
        }
        .filter-chips a {
            flex: 0 0 auto;
            white-space: nowrap;
        }

        .breadcrumb {
            display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
            color: var(--muted); font-size: 0.88rem; margin-bottom: 1rem;
        }
        .breadcrumb a { color: var(--accent-soft); }
        .breadcrumb span.sep { opacity: 0.5; }

        .listing-shell {
            width: min(1180px, 100%);
            margin-inline: auto;
        }
        .prose { max-width: 46rem; margin-inline: auto; }
        .prose img { max-width: 100%; border-radius: 12px; }
        .prose-article {
            width: min(46rem, 100%);
            margin-inline: auto;
        }
        .prose-article h1 {
            font-family: var(--display);
            font-size: clamp(1.75rem, 3.8vw, 2.4rem);
            line-height: 1.15;
            margin: 0 0 1rem;
            letter-spacing: -0.02em;
        }
        .prose-body {
            color: var(--text);
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }
        .prose-article h2,
        .prose-subhead {
            font-size: 1.1rem;
            margin: 1.5rem 0 0.65rem;
        }
        .detail-hero {
            width: 100%; max-height: 400px; object-fit: cover;
            border-radius: calc(var(--radius) + 2px); margin-bottom: 1.35rem;
            border: 1px solid rgba(46, 56, 85, 0.8);
            box-shadow: 0 16px 36px rgba(0,0,0,0.22);
        }
        .detail-cta {
            margin-top: 2rem;
            padding: 1.15rem 1.25rem;
            border-radius: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
            display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
            justify-content: space-between;
            transition: all 0.3s ease-in-out;
        }
        .chip-link {
            text-decoration: none;
            transition: border-color 0.15s ease, color 0.15s ease;
        }
        .chip-link:hover {
            color: var(--text);
            border-color: rgba(52, 211, 153, 0.5);
            text-decoration: none;
        }
        .empty-state {
            padding: 2rem 1.25rem;
            border: 1px dashed var(--line);
            border-radius: var(--radius);
            text-align: center;
            color: var(--muted);
        }

        .list { margin: 0; padding-left: 1.1rem; color: var(--muted); }
        .list li { margin-bottom: 0.35rem; }
        .chip-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
        .chip {
            font-size: 0.78rem;
            padding: 0.25rem 0.55rem;
            border-radius: 999px;
            border: 1px solid var(--line);
            color: var(--muted);
        }
        .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            margin: 0.2rem 0 0.1rem;
        }
        .tag {
            font-size: 0.72rem;
            font-weight: 600;
            padding: 0.2rem 0.55rem;
            border-radius: 999px;
            background: rgba(52, 211, 153, 0.12);
            color: var(--accent-soft);
            border: 1px solid rgba(52, 211, 153, 0.22);
            transition: all 0.3s ease-in-out;
        }

        .site-footer {
            border-top: 1px solid var(--line);
            padding: 2.25rem 0 2.5rem;
            color: var(--muted);
            font-size: 0.9rem;
            margin-top: auto;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1fr;
            gap: 1.75rem;
        }
        .footer-col h4 {
            margin: 0 0 0.65rem;
            color: var(--text);
            font-size: 0.92rem;
            font-weight: 600;
        }
        .footer-col a {
            display: block;
            color: var(--muted);
            margin-bottom: 0.4rem;
            text-decoration: none;
        }
        .footer-col a:hover { color: var(--text); }
        .footer-brand {
            font-family: var(--display);
            font-size: 1.15rem;
            color: var(--text);
            margin-bottom: 0.4rem;
            font-weight: 700;
        }
        .footer-copy { margin-top: 1.75rem; font-size: 0.82rem; opacity: 0.85; }

        .pagination { margin-top: 1.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
        .pagination a, .pagination span {
            padding: 0.4rem 0.7rem;
            border-radius: 8px;
            border: 1px solid var(--line);
            color: var(--muted);
            font-size: 0.85rem;
        }
        .pagination .active { color: #fff; border-color: var(--accent); background: rgba(52, 211, 153, 0.12); }

        /* Motion: page fade + scroll reveal */
        .page-fade {
            animation: none;
        }
        @keyframes page-fade-in {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: none; }
        }
        html.js-ready .page-fade {
            animation: page-fade-in var(--motion-page, 420ms) var(--ease-luxury) both;
        }
        html.js-ready.js-motion .reveal {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
        }
        html.js-ready.js-motion .reveal.in {
            opacity: 1;
            transform: none;
        }

        /* Shared carousel chevrons */
        .carousel-chevron {
            position: absolute;
            top: 42%;
            transform: translateY(-50%);
            z-index: 2;
            width: 38px;
            height: 38px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(18, 24, 41, 0.92);
            color: var(--text);
            cursor: pointer;
            display: grid;
            place-items: center;
            font-size: 1.35rem;
            line-height: 1;
            padding: 0;
        }
        .carousel-chevron:hover:not(:disabled) {
            border-color: rgba(52, 211, 153, 0.55);
            background: rgba(52, 211, 153, 0.16);
        }
        .carousel-chevron:disabled {
            opacity: 0.35;
            cursor: default;
        }
        .carousel-prev { left: -0.35rem; }
        .carousel-next { right: -0.35rem; }
        @media (max-width: 640px) {
            .carousel-chevron { display: none !important; }
        }
        @media (min-width: 720px) {
            .filter-chips {
                flex-wrap: wrap;
                width: auto;
            }
        }

        @media (max-width: 900px) {
            .hero-split {
                grid-template-columns: 1fr;
                gap: clamp(1.25rem, 4vw, 1.75rem);
                padding: clamp(1.25rem, 4vw, 2rem) 0 clamp(1rem, 3vw, 1.5rem);
            }
            .hero-copy { text-align: center; }
            .hero-copy p { margin-inline: auto; }
            .cta-row { justify-content: center; }
            .hero-media {
                max-width: min(320px, 86vw);
                margin-inline: auto;
            }
            .phone-stage { min-height: 260px; order: -1; }
            .teaser-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid .footer-col:first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 540px) {
            .hero-split .cta-row {
                flex-direction: column;
                align-items: stretch;
            }
            .hero-split .cta-row .btn {
                width: 100%;
                min-height: 44px;
            }
            .hero-media {
                aspect-ratio: 1 / 1;
                max-width: min(280px, 78vw);
            }
            .page-hero p { font-size: 0.98rem; }
        }
        @media (max-width: 899px) {
            .nav-burger { display: inline-flex; }
            .nav-panel {
                position: fixed;
                inset: 0 0 auto 0;
                top: var(--header-h);
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: 0.75rem 1rem 1.25rem;
                background: rgba(2, 6, 23, 0.96);
                backdrop-filter: blur(20px);
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                transform: translateY(-120%);
                opacity: 0;
                pointer-events: none;
                transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
                z-index: 30;
            }
            .nav-toggle:checked ~ .nav-panel {
                transform: translateY(0);
                opacity: 1;
                pointer-events: auto;
            }
            .nav-center, .nav-right {
                flex-direction: column;
                align-items: stretch;
                margin: 0;
                gap: 0.35rem;
            }
            .nav-center {
                padding: 0;
                border: 0;
                background: transparent;
                border-radius: 0;
            }
            .nav-center a, .nav-right .btn, .nav-right a {
                width: 100%;
                text-align: center;
                justify-content: center;
            }
            .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
            .footer-grid .footer-col:first-child { grid-column: 1 / -1; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                transition: none !important;
                animation: none !important;
            }
            .page-fade,
            html.js-motion .reveal,
            html.js-motion .reveal.in {
                opacity: 1 !important;
                transform: none !important;
            }
            .stack-marquee {
                transform: translateY(-8%);
            }
            a.card:hover { transform: none; }
            a.card:hover img { transform: none; }
            .featured-card:hover { transform: none; }
            .featured-card:hover img { transform: none; }
        }

        .pricing-tune-toggle {
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            z-index: 60;
            border: 1px solid var(--line);
            background: rgba(18, 24, 41, 0.95);
            color: var(--text);
            border-radius: 999px;
            padding: 0.55rem 0.95rem;
            font-weight: 600;
            cursor: pointer;
        }
        .pricing-tune-panel {
            position: fixed;
            right: 1rem;
            bottom: 4rem;
            z-index: 60;
            width: min(320px, calc(100vw - 2rem));
            max-height: min(70vh, 560px);
            overflow: auto;
            border: 1px solid var(--line);
            border-radius: 14px;
            background: rgba(10, 14, 33, 0.96);
            box-shadow: 0 20px 48px rgba(0,0,0,0.45);
            padding: 0.85rem;
            display: none;
        }
        .pricing-tune-panel.open { display: block; }
        .pricing-tune-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.65rem;
        }
        .pricing-tune-head button {
            border: 0;
            background: transparent;
            color: var(--muted);
            font-size: 1.25rem;
            cursor: pointer;
        }
        .pricing-tune-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 0.35rem 0.65rem;
            align-items: center;
            margin-bottom: 0.55rem;
            font-size: 0.82rem;
        }
        .pricing-tune-row input[type="range"] {
            grid-column: 1 / -1;
            width: 100%;
        }
        .pricing-tune-row output {
            color: var(--muted);
            font-variant-numeric: tabular-nums;
        }
        .pricing-tune-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }
        .pricing-tune-actions .btn {
            font-size: 0.82rem;
            padding: 0.45rem 0.65rem;
        }
        .pricing-tune-hint {
            margin: 0.65rem 0 0;
            color: var(--muted);
            font-size: 0.75rem;
            line-height: 1.4;
        }


/* ===== Fintech redesign utilities ===== */
.hero-glow {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(72px);
    z-index: 0;
}

.listing-grid--horizontal {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
}

.media-card--horizontal {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 84px;
}

.media-card--horizontal .media-frame {
    width: 72px;
    height: 84px;
    min-height: 0;
    aspect-ratio: auto;
}

.media-card--horizontal .media-card-body {
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    padding: 0.5rem 0.65rem;
}

.media-card--horizontal .media-card-body h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.media-card--horizontal .media-card-body .meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .media-card--horizontal {
        grid-template-columns: 72px minmax(0, 1fr);
        min-height: 84px;
    }

    .media-card--horizontal .media-frame {
        width: 72px;
        height: 84px;
        min-height: 0;
    }

    .media-card--horizontal .media-card-body {
        padding: 0.8rem;
    }

    .media-card--horizontal .media-excerpt {
        display: none;
    }
}
.hero-glow--emerald {
    width: min(420px, 60vw);
    height: min(420px, 60vw);
    background: rgba(16, 185, 129, 0.14);
    top: -12%;
    left: -8%;
}
.hero-glow--amber {
    width: min(360px, 50vw);
    height: min(360px, 50vw);
    background: rgba(245, 158, 11, 0.10);
    bottom: -18%;
    right: -6%;
}
.hero-split { position: relative; }
.hero-split > * { position: relative; z-index: 1; }
.hero-split > .hero-ambient,
.hero-split > .hero-glow,
.hero-split > .home-stack-banner {
    z-index: 0;
}

.home-hero {
    --hero-min-height: min(780px, 82svh);
    --hero-lane-gap: clamp(0.55rem, 1.2vw, 1rem);
    --hero-card-width: clamp(10rem, 22vw, 17rem);
    --hero-copy-padding: clamp(1rem, 3vw, 2rem);
    position: relative;
    overflow: hidden;
    display: block;
    min-height: var(--hero-min-height);
    margin-inline: calc(50% - 50vw);
    padding: 0;
    background: #0B0F17;
}
.home-hero > .home-card-marquee,
.home-hero > .hero-scrim,
.home-hero > .hero-ambient {
    position: absolute;
    inset: 0;
}
.home-hero > .home-card-marquee {
    z-index: 0;
    display: grid;
    align-content: center;
    gap: var(--hero-lane-gap);
    overflow: hidden;
    opacity: 0.56;
    transform: rotate(-2deg) scale(1.08);
    pointer-events: none;
}
@media (min-width: 721px) and (max-width: 1099px) {
    .home-hero > .home-card-marquee {
        transform: rotate(-1deg) scale(1.04);
    }
}
.home-hero > .hero-scrim {
    z-index: 0;
    background:
        linear-gradient(90deg, #0B0F17 0%, rgba(11,15,23,0.96) 26%, rgba(11,15,23,0.62) 52%, rgba(11,15,23,0.25) 78%, #0B0F17 100%),
        linear-gradient(180deg, rgba(11,15,23,0.32), rgba(11,15,23,0.82));
    pointer-events: none;
}
.home-hero .home-card-marquee {
    opacity: 0.88;
}
.home-hero .home-marquee-card {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.2);
}
.home-hero .home-marquee-card img {
    filter: saturate(1.12) brightness(1.08);
}
.home-hero-inner {
    position: relative;
    z-index: 1;
    width: min(1360px, calc(100% - 2rem));
    min-height: var(--hero-min-height);
    margin-inline: auto;
    display: flex;
    align-items: center;
    padding: clamp(4.5rem, 10vw, 8rem) 0;
}
.home-hero .hero-copy {
    max-width: 40rem;
    padding: var(--hero-copy-padding);
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.32);
}
.home-hero .hero-copy h1 { max-width: 35rem; font-size: clamp(1.85rem, 5vw, 3.5rem); letter-spacing: -0.045em; }
.home-hero .hero-copy p { max-width: 36rem; font-size: clamp(0.95rem, 1.3vw, 1.1rem); }
.home-hero .cta-row { gap: clamp(0.55rem, 1.2vw, 1rem); }
.hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 2rem 0 0;
    padding: 1.15rem 0 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    list-style: none;
    color: var(--muted);
    font-size: 0.78rem;
}
.hero-proof strong {
    display: block;
    margin-bottom: 0.15rem;
    color: #fff;
    font-size: 1.45rem;
}
.hero-proof span { display: block; }
.home-hero .home-marquee-lane {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.home-hero .home-marquee-track {
    display: flex;
    width: max-content;
    gap: 0;
    animation: home-marquee-left 188s linear infinite;
    will-change: transform;
}
.home-hero .home-marquee-group {
    display: flex;
    flex: 0 0 auto;
    gap: var(--hero-lane-gap);
}
.home-hero .home-marquee-lane--right .home-marquee-track {
    animation-name: home-marquee-right;
    animation-duration: 224s;
}
.home-hero .home-marquee-lane--3 .home-marquee-track {
    animation-duration: 198s;
}
.home-hero .home-marquee-card {
    width: var(--hero-card-width);
    aspect-ratio: 1.586;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1.25rem;
    background: #151b2b;
    box-shadow: 0 18px 42px rgba(0,0,0,0.32);
}
.home-hero .home-marquee-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.marketing-home {
    padding-top: 0;
}
.marketing-home > .home-section {
    width: min(1360px, calc(100% - 2rem));
    margin-inline: auto;
    padding: clamp(2.75rem, 7vw, 5rem) 0;
}
.marketing-home > .home-section > .max-w-2xl {
    max-width: 40rem;
}
.marketing-home > .home-section > .grid {
    display: grid;
    gap: 1rem;
}
.marketing-home > .home-section > .grid.md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.marketing-home .home-card {
    color: inherit;
    text-decoration: none;
}
.marketing-home .home-card:hover {
    text-decoration: none;
}
.marketing-home .home-section[aria-labelledby] > .flex {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}
.marketing-home .home-section .text-teal-700,
.marketing-home .home-section .text-amber-700,
.marketing-home .home-section .text-lime-700 {
    color: var(--accent-soft);
}
@keyframes home-marquee-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes home-marquee-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}
@media (max-width: 720px) {
    .home-hero-inner { width: min(100% - 1rem, 1360px); }
    .home-hero .hero-copy {
        padding: 1rem;
        background: rgba(11,15,23,0.78);
    }
    .hero-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .marketing-home > .home-section > .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    .marketing-home > .home-section > .flex {
        align-items: start;
        flex-direction: column;
    }
}
@media (max-width: 480px) {
    .home-hero {
        --hero-min-height: min(680px, 86svh);
        --hero-lane-gap: 0.55rem;
        --hero-card-width: clamp(7rem, 38vw, 10rem);
    }
    .home-hero-inner {
        min-height: var(--hero-min-height);
        padding-block: 3.5rem;
    }
    .home-hero > .home-card-marquee {
        transform: rotate(-1deg) scale(1.02);
        opacity: 0.72;
    }
    .home-hero .home-marquee-lane--3 {
        display: none;
    }
    .home-hero .home-marquee-card {
        width: var(--hero-card-width);
    }
    .home-hero .hero-copy {
        background: rgba(11, 15, 23, 0.78);
        border-radius: 1rem;
    }
}
@media (orientation: portrait) and (min-width: 481px) and (max-width: 1099px) and (max-height: 850px) {
    .home-hero {
        --hero-min-height: min(640px, 86svh);
        --hero-lane-gap: clamp(0.5rem, 1.5vw, 0.8rem);
        --hero-card-width: clamp(8rem, 24vw, 12rem);
    }
    .home-hero > .home-card-marquee {
        align-content: start;
        padding-top: calc(var(--header-h) + clamp(0.5rem, 2svh, 1.25rem));
        padding-bottom: 0;
        transform: rotate(-1deg) scale(1.02);
        opacity: 0.82;
    }
    .home-hero .home-marquee-lane--3 {
        display: none;
    }
    .home-hero > .hero-scrim {
        background:
            linear-gradient(90deg, rgba(11, 15, 23, 0.98) 0%, rgba(11, 15, 23, 0.9) 28%, rgba(11, 15, 23, 0.52) 58%, rgba(11, 15, 23, 0.12) 86%, rgba(11, 15, 23, 0) 100%),
            linear-gradient(180deg, rgba(11, 15, 23, 0.35) 0%, transparent 28%, rgba(11, 15, 23, 0.58) 100%);
    }
    .home-hero .hero-copy {
        text-align: left;
        padding-inline: clamp(1.35rem, 4.5vw, 2.5rem);
    }
    .home-hero .hero-copy p {
        margin-inline: 0;
    }
    .home-hero .cta-row {
        justify-content: flex-start;
    }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero .home-marquee-track {
        animation: none;
        transform: translateX(0);
    }
}

/* Marketing UX polish: shared rows, native sorting, and resilient surfaces. */
.listing-sort-select {
    min-height: 44px;
    min-width: 12rem;
    padding: 0.65rem 2.25rem 0.65rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    color: var(--text);
    background-color: var(--bg-elevated);
    font: inherit;
}
.listing-sort-select:focus-visible,
.promo-row--browse:focus-visible,
.promo-quick-controls .quick-control:focus-visible,
.carousel-controls button:focus-visible,
.master-detail-panel [data-master-detail-close]:focus-visible {
    outline: 3px solid rgba(245, 158, 11, 0.75);
    outline-offset: 3px;
}
.blog-row .promo-row-benefit { color: var(--accent-warm, #fbbf24); }
.master-detail-root {
    border-color: rgba(255,255,255,0.12);
    background: linear-gradient(145deg, rgba(15,23,42,0.98), rgba(2,6,23,0.98));
    color: var(--text);
    box-shadow: -1rem 2rem 4rem rgba(0,0,0,0.42), 0 0 2rem rgba(16,185,129,0.08);
}
.master-detail-root.is-loading { opacity: 0.82; }
.master-detail-loading { min-height: 22rem; padding: 1.5rem; }
.master-detail-skeleton {
    width: 100%;
    display: grid;
    gap: 0.9rem;
}
.master-detail-skeleton span {
    display: block;
    height: 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(52,211,153,0.18), rgba(255,255,255,0.06));
    background-size: 220% 100%;
    animation: detail-skeleton-shimmer 1.4s ease-in-out infinite;
}
.master-detail-skeleton span:first-child { height: 14rem; border-radius: 1rem; }
.master-detail-skeleton span:nth-child(3) { width: 72%; }
.master-detail-skeleton span:nth-child(4) { width: 88%; }
@keyframes detail-skeleton-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
.master-detail-panel [data-master-detail-close] {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 1rem;
    padding: 0.55rem 0.8rem;
    clip: auto !important;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    font-size: 0.8rem;
}
.home-hero > .hero-scrim--edge-fade {
    background: linear-gradient(90deg, #0b0f17 0%, rgba(11,15,23,0.94) 24%, rgba(11,15,23,0.52) 58%, rgba(11,15,23,0.08) 100%);
}
.hero-copy-fade {
    display: none;
}
.section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}
.section-kicker {
    margin: 0 0 0.45rem;
    color: var(--accent-soft);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.section-title { margin: 0.35rem 0 0; color: var(--text); font-size: clamp(1.7rem, 3vw, 2.35rem); }
.section-link { color: var(--accent-soft); font-weight: 700; }
.section-description {
    max-width: 38rem;
    margin: 0.55rem 0 0;
    color: var(--muted);
    line-height: 1.55;
}
.section-grid { display: grid; gap: 1.25rem; margin-top: 2rem; }
.section-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-pillars {
    padding-top: clamp(0.5rem, 2vw, 1rem);
}
.feature-pillars-head h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    letter-spacing: -0.035em;
}
.feature-pillars-head {
    max-width: 42rem;
    margin-inline: auto;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
}
.feature-pillars-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    max-width: 68rem;
    margin-inline: auto;
    padding: 0.15rem 0 0.5rem;
}
.feature-pillar {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-width: 0;
}
.feature-pillar-media {
    display: block;
    width: 100%;
}
.feature-pillar-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 1.05rem;
    background: #101722;
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.24);
    object-fit: cover;
}
.feature-pillar-copy {
    max-width: none;
    min-height: 4.5rem;
    padding-inline: 0.15rem;
}
.feature-pillar-copy h3 {
    margin: 0 0 0.45rem;
    color: var(--text);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    letter-spacing: -0.03em;
}
.feature-pillar-copy > p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    font-size: 0.92rem;
}
@media (max-width: 899px) {
    .feature-pillars-list {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        max-width: none;
        padding-bottom: 0.85rem;
    }
    .feature-pillar {
        flex: 0 0 min(72vw, 16rem);
        scroll-snap-align: start;
    }
}
.home-section .media-card { border-color: rgba(255,255,255,0.11); }
.home-section .media-card:hover { border-color: rgba(52,211,153,0.48); }
.promo-detail-hero .cms-placeholder { width: 100%; }
@media (max-width: 720px) {
    .section-header { align-items: start; flex-direction: column; }
    .section-grid--three, .section-grid--two { grid-template-columns: 1fr; }
    .listing-sort-select { width: 100%; min-width: 0; }
    .filter-row:has(.listing-sort-select) { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .master-detail-skeleton span { animation: none; }
    .hero-copy-fade { opacity: 0.8; }
}

.hero-copy h1,
.page-hero h1 {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: #fff;
}

.mask-x-fade {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.home-stack-media.mask-x-fade {
    -webkit-mask-image:
        linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
        linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
    mask-image:
        linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
        linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.stack-card[data-tilt],
[data-tilt] {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.18s ease-out;
}
.stack-card[data-tilt] img {
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bento-tile {
    padding: 1.5rem 1.35rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.22);
    transition: all 0.3s ease-in-out;
}
.bento-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: 0 20px 40px rgba(0,0,0,0.28), 0 0 28px rgba(16, 185, 129, 0.12);
}
.bento-tile .feature-icon {
    display: inline-flex;
    width: 2.5rem; height: 2.5rem;
    align-items: center; justify-content: center;
    border-radius: 0.75rem;
    background: rgba(16, 185, 129, 0.14);
    color: var(--accent-soft);
    margin-bottom: 0.9rem;
}
.bento-tile .feature-icon svg { width: 1.25rem; height: 1.25rem; }
.bento-tile h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}
.bento-tile p {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.65;
}
@media (max-width: 800px) {
    .bento-grid { grid-template-columns: 1fr; }
}

.media-card {
    display: flex;
    flex-direction: column;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 20px 40px rgba(0,0,0,0.22);
    transition: all 0.3s ease-in-out;
}
a.media-card:hover {
    text-decoration: none;
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 24px rgba(16, 185, 129, 0.10);
}
.media-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0B0F17;
}
.media-frame img,
.media-frame .cms-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
a.media-card:hover .media-frame img {
    transform: scale(1.05);
}
.media-card-body {
    padding: 0.95rem 1.05rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}
.media-card-body h3 {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.35;
    color: #fff;
    letter-spacing: -0.02em;
}
.media-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.9);
    color: #022c22;
}
.cms-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0f172a 0%, #134e4a 45%, #78350f 100%);
}
.card-img-placeholder.cms-placeholder {
    display: grid;
    place-items: center;
    padding: 0.75rem;
}
.card-img-placeholder.cms-placeholder svg {
    width: 48%;
    max-width: 96px;
    height: auto;
}

.billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    margin: 1rem auto 0;
}

.billing-toggle--hero {
    margin-top: 1.15rem;
}

.billing-toggle button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.billing-toggle button:focus-visible,
.btn:focus-visible,
.cta-row .btn:focus-visible {
    outline: 2px solid rgba(16, 185, 129, 0.55);
    outline-offset: 2px;
}

.billing-toggle button.is-active {
    background: linear-gradient(90deg, #10B981, #059669);
    color: #022c22;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
}
.price-card[data-billing].is-billing-hidden {
    display: none !important;
}
.price-card--glow {
    position: relative;
    isolation: isolate;
}
.price-card--glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, #10B981, #F59E0B, #10B981, #F59E0B);
    background-size: 300% 300%;
    animation: premium-border 6s linear infinite;
    z-index: -1;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.9;
}
@keyframes premium-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.price-card--glow {
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2), 0 18px 40px rgba(0,0,0,0.3), 0 0 32px rgba(16, 185, 129, 0.12);
}

.pricing-page {
    width: min(880px, 100%);
    margin-inline: auto;
}

.pricing-hero h1,
.pricing-intro h1 {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: #fff;
}

.page-intro.pricing-intro {
    max-width: 40rem;
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
    text-align: left;
}

.listing-page-intro {
    width: min(1180px, 100%);
    max-width: 40rem;
    margin: 0.35rem auto clamp(1.5rem, 3.5vw, 2.25rem);
    padding-top: 0.35rem;
    text-align: left;
}
main:has(.listing-page-intro) {
    padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.listing-page-intro + .listing-shell {
    margin-top: 0.35rem;
}
main:has(.listing-page-intro.discover-page-intro) {
    padding-top: clamp(2.75rem, 5.5vw, 4rem);
}
.listing-page-intro.discover-page-intro {
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.listing-page-intro.discover-page-intro + .listing-shell {
    margin-top: clamp(0.85rem, 2.2vw, 1.5rem);
}
.listing-page-intro h1 {
    margin: 0 0 0.65rem;
    font-family: var(--display);
    font-size: clamp(1.65rem, 3.4vw, 2.25rem);
    letter-spacing: -0.02em;
    color: #fff;
}
.listing-page-intro p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}
.detail-card-chips {
    margin: 0.75rem 0 1rem;
}
.share-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.blog-feed-list .blog-row--list,
.blog-feed-grid .blog-row--list {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    min-height: 0;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(15, 23, 42, 0.42);
    color: inherit;
    text-decoration: none;
}
.blog-feed-list .blog-row--list:hover,
.blog-feed-grid .blog-row--list:hover {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.06);
    text-decoration: none;
}
.blog-feed-list .blog-row--list .promo-row-thumb,
.blog-feed-grid .blog-row--list .promo-row-thumb {
    width: 112px;
    height: 76px;
}
.blog-feed-list .blog-row--list .promo-row-image,
.blog-feed-list .blog-row--list .cms-placeholder,
.blog-feed-grid .blog-row--list .promo-row-image,
.blog-feed-grid .blog-row--list .cms-placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0.65rem;
}
.blog-feed-list .blog-row--list .promo-row-body,
.blog-feed-grid .blog-row--list .promo-row-body {
    padding: 0.15rem 0.35rem 0.15rem 0;
}

.pricing-intro h1 {
    margin: 0 0 0.55rem;
    font-size: clamp(1.75rem, 3.5vw, 2.35rem);
    letter-spacing: -0.02em;
}

.pricing-intro > p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.pricing-hero-note {
    margin-top: 0.45rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.billing-toggle--intro {
    margin-top: 1.15rem;
}

.pricing-alert-link {
    margin-left: 0.35rem;
}

.pricing-plans-head,
.pricing-matrix-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pricing-status-section,
.pricing-pending-section {
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}

.pricing-status-panel,
.pricing-pending-panel {
    max-width: 32rem;
    padding: 1.35rem 1.4rem;
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: 1.1rem;
    background: rgba(16, 185, 129, 0.06);
    box-shadow: 0 0 28px rgba(16, 185, 129, 0.08);
}

.pricing-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pricing-status-title,
.pricing-pending-title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.pricing-status-line,
.pricing-pending-panel > p,
.pricing-status-note {
    margin: 0 0 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pricing-status-actions,
.pricing-pending-actions {
    display: grid;
    gap: 0.65rem;
}

.pricing-pending-actions {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    align-items: start;
}

.billing-toggle .billing-save-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    vertical-align: middle;
}

.billing-toggle button.is-active .billing-save-badge {
    background: rgba(2, 44, 34, 0.2);
    color: #022c22;
}

.pricing-compare-grid {
    --pricing-cols: 2;
    display: grid;
    grid-template-columns: repeat(var(--pricing-cols), minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.pricing-compare-grid[data-pricing-cols="1"] { --pricing-cols: 1; }
.pricing-compare-grid[data-pricing-cols="2"] { --pricing-cols: 2; }
.pricing-compare-grid[data-pricing-cols="3"] { --pricing-cols: 3; }
.pricing-compare-grid[data-pricing-cols="4"] { --pricing-cols: 4; }
.pricing-compare-grid[data-pricing-cols="5"] { --pricing-cols: 5; }

.pricing-tier-slot {
    display: grid;
    gap: 1rem;
    align-content: stretch;
    height: 100%;
    min-height: 100%;
}

.pricing-compare-grid > .price-card,
.pricing-compare-grid > .pricing-tier-slot {
    height: 100%;
}

.pricing-compare-grid .price-card {
    gap: 0.55rem;
    padding: 1.35rem 1.4rem;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
}

.pricing-compare-grid .price-card-cta {
    margin-top: auto;
    padding-top: 0.75rem;
    display: grid;
    gap: 0.45rem;
}

.pricing-compare-grid .price-card-cta form {
    margin: 0;
}

.price-card--tier {
    border-color: rgba(245, 158, 11, 0.28);
}

.price-card--tier.featured,
.price-card--tier.price-card--glow {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.15), 0 18px 40px rgba(0, 0, 0, 0.28);
    background: rgba(245, 158, 11, 0.06);
}

.price-card.is-active-plan {
    border-color: rgba(52, 211, 153, 0.55);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.25), 0 0 24px rgba(16, 185, 129, 0.10);
}

.price-card-desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.price-card h3 {
    margin: 0;
}

.pricing-plan-perks {
    list-style: none;
    margin: 0.25rem 0 0.5rem;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.pricing-plan-perks li {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.45;
}

.pricing-plan-perks--checks li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.pricing-plan-perks--checks .premium-check {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.1rem;
    color: var(--accent-soft);
}

.pricing-plan-perks--checks .premium-check svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pricing-matrix-section {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.pricing-matrix-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
}

.pricing-matrix {
    width: 100%;
    border-collapse: collapse;
    min-width: 420px;
}

.pricing-matrix th,
.pricing-matrix td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.92rem;
}

.pricing-matrix thead th {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pricing-matrix tbody th {
    color: var(--text);
    font-weight: 600;
}

.pricing-matrix td {
    color: var(--text-secondary);
}

.pricing-matrix tbody tr:last-child th,
.pricing-matrix tbody tr:last-child td {
    border-bottom: 0;
}

.pricing-matrix th:not(:first-child),
.pricing-matrix td {
    text-align: center;
}

@media (max-width: 900px) {
    .pricing-compare-grid {
        display: flex;
        overflow-x: auto;
        align-items: stretch;
        padding-bottom: 0.5rem;
        scroll-snap-type: x proximity;
    }

    .pricing-compare-grid > .price-card,
    .pricing-compare-grid > .pricing-tier-slot {
        min-width: min(82vw, 20rem);
        scroll-snap-align: start;
    }
}

/* Detail surfaces and comparison pane. */
.nav-account-menu { position: relative; }
.nav-account-menu summary {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
}
.nav-account-menu summary::-webkit-details-marker { display: none; }
.nav-account-menu summary:hover,
.nav-account-menu summary:focus-visible { color: var(--text); border-color: var(--accent-soft); }
.nav-account-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 40;
    min-width: 7rem;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    background: #101722;
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.28);
}
.nav-account-popover .nav-logout-btn {
    width: 100%;
    padding: 0.45rem 0.55rem;
    text-align: left;
}
.detail-surface {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1.25rem;
    background: #101722;
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.2);
}
.discover-detail.detail-surface { padding: clamp(1rem, 2.5vw, 1.75rem); }
.detail-surface .content-section,
.detail-surface .tab-panel { color: var(--text); }
.detail-surface .muted,
.detail-surface .meta { color: var(--muted); }
.promo-detail-shell.detail-surface,
.prose-article.detail-surface { padding: clamp(1rem, 3vw, 2rem); }
.promo-detail-shell .promo-detail-hero { border-color: var(--line); background: #0c131d; }
.promo-detail-shell .detail-hero,
.prose-article.detail-surface .detail-hero { border-color: var(--line); }
.discover-comparison-root { min-width: 0; }
.has-discover-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.has-discover-comparison > .discover-detail-root,
.has-discover-comparison > .discover-comparison-root { min-width: 0; }
.discover-comparison-root .discover-detail { height: 100%; }
.discover-comparison-root .card-header-media { max-width: 16rem; }
.discover-comparison-root .card-cta .btn-app-secondary { display: none; }
.has-discover-comparison .discover-detail-root {
    border-left: 0;
    padding-left: 0;
}
.has-discover-comparison .discover-tabs { position: static; }
@media (max-width: 1099px) {
    .has-discover-comparison {
        grid-template-columns: 1fr;
    }
    .discover-comparison-root {
        border-top: 1px solid var(--line);
        padding-top: 1rem;
    }
}
@media (max-width: 899px) {
    .discover-comparison-root { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .has-discover-comparison,
    .detail-surface { transition: none; }
}

/* Final dark-surface and comparison-rail contract. */
.home-hero > .hero-scrim {
    background:
        linear-gradient(90deg, rgba(11, 15, 23, 0.98) 0%, rgba(11, 15, 23, 0.92) 30%, rgba(11, 15, 23, 0.56) 54%, rgba(11, 15, 23, 0.1) 82%, rgba(11, 15, 23, 0) 100%),
        linear-gradient(180deg, rgba(11, 15, 23, 0.1), rgba(11, 15, 23, 0.48));
}
.home-hero .hero-copy {
    max-width: 42rem;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.home-hero .home-marquee-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.home-hero .home-marquee-card img {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: saturate(1.16) brightness(1.12);
}
.feature-pillars-head:has(h2:only-child) .section-kicker { display: none; }
.detail-surface,
.master-detail-root {
    border-color: rgba(255,255,255,0.1);
    background:
        linear-gradient(145deg, rgba(15,23,42,0.92), rgba(2,6,23,0.96)),
        var(--bg);
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.24);
}
.detail-surface .content-section,
.detail-surface .info-table,
.detail-surface .tab-panel,
.detail-surface .promo-meta-card,
.detail-surface .detail-cta {
    border-color: rgba(255,255,255,0.1);
    background-color: rgba(2,6,23,0.22);
}
.detail-surface .info-table { background: transparent; }
.detail-surface .info-row:nth-child(even) { background: rgba(255,255,255,0.025); }
.detail-surface .card-header-media,
.detail-surface .detail-hero,
.promo-detail-hero {
    background: transparent;
    box-shadow: none;
}
.detail-surface .discover-hero-slot .discover-card-img,
.detail-surface .discover-hero-slot .card-img-placeholder,
.detail-surface .detail-hero {
    border-color: transparent;
    box-shadow: none;
}
.promo-detail-shell .promo-detail-hero {
    border-color: rgba(255,255,255,0.1);
    background: linear-gradient(145deg, rgba(15,23,42,0.46), rgba(2,6,23,0.62));
}
.has-discover-comparison {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.has-discover-comparison > .discover-comparison-root {
    grid-column: 1;
    grid-row: 1;
    order: -1;
}
.has-discover-comparison > .discover-detail-root {
    grid-column: 2;
    grid-row: 1;
}
.comparison-rail {
    position: absolute;
    z-index: 2;
    top: 1.25rem;
    left: -1px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.55rem 0.45rem 0.4rem;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 0.7rem 0.7rem 0;
    color: var(--text-secondary);
    background: rgba(2,6,23,0.92);
    box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.18);
    transform: translateX(-100%);
    writing-mode: vertical-rl;
    text-decoration: none;
}
.comparison-rail:hover,
.comparison-rail:focus-visible {
    color: var(--text);
    border-color: var(--accent-soft);
    text-decoration: none;
}
.comparison-rail:focus-visible {
    outline: 3px solid rgba(245,158,11,0.75);
    outline-offset: 3px;
}
.comparison-rail-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; }
.comparison-rail-chevron { font-size: 1.3rem; line-height: 1; writing-mode: horizontal-tb; }
@media (max-width: 1099px) {
    .has-discover-comparison { grid-template-columns: 1fr; }
    .has-discover-comparison > .discover-comparison-root,
    .has-discover-comparison > .discover-detail-root {
        grid-column: auto;
        grid-row: auto;
    }
    .comparison-rail {
        position: static;
        display: inline-flex;
        flex-direction: row-reverse;
        width: auto;
        margin: 0 0 1rem;
        padding: 0.55rem 0.75rem;
        border: 1px solid var(--line);
        border-radius: 0.7rem;
        transform: none;
        writing-mode: horizontal-tb;
    }
}
@media (max-width: 720px) {
    .home-hero .hero-copy { padding: 1rem; background: rgba(11,15,23,0.78); border-radius: 1rem; }
}

/* Homepage editorial composition. */
.feature-carousel-head {
    align-items: end;
}
.feature-pillar {
    min-height: 100%;
}
.feature-pillar .feature-slide-copy {
    padding: 1rem 1.05rem 1.2rem;
}
.feature-pillar .feature-slide-label {
    color: var(--accent-soft);
    letter-spacing: 0.14em;
}
.promo-grid .media-card--promo .media-card-body {
    min-height: 10rem;
}
.promo-grid .media-card--promo .meta {
    color: #c58b52;
    font-weight: 700;
}
.promo-sort-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.promo-sort-bar .listing-sort-select {
    min-width: 10rem;
}
.promo-sort-bar .filter-location-needed {
    margin-left: auto;
}
.nav-account {
    max-width: 10rem;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-logout-form { margin: 0; }
.nav-logout-btn {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}
.pricing-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0 1.5rem;
    padding: 0;
    list-style: none;
}
.pricing-steps li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.84rem;
}
.pricing-steps strong {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #06251b;
    background: var(--accent-soft);
    font-size: 0.75rem;
}
.editorial-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.85fr);
    gap: 1.25rem;
    margin-top: 2rem;
}
.editorial-lead {
    grid-row: span 2;
}
.editorial-lead .media-frame {
    aspect-ratio: 16 / 10;
}
.editorial-lead .media-card-body {
    padding: 1.25rem 1.35rem 1.45rem;
}
.editorial-lead .media-card-body h3 {
    font-size: clamp(1.35rem, 2.5vw, 2rem);
}
.editorial-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    flex-direction: row;
}
.editorial-row .media-frame {
    aspect-ratio: 1;
    height: 100%;
}
.editorial-row .media-card-body {
    justify-content: center;
    padding: 0.8rem 1rem;
}
.editorial-row .media-card-body h3 {
    font-size: 0.98rem;
}
@media (max-width: 768px) {
    .promo-grid,
    .editorial-grid {
        grid-template-columns: 1fr;
    }
     .feature-pillar { flex-basis: min(78vw, 15.5rem); }
    .feature-pillar-copy { max-width: none; }
    .pricing-steps { grid-template-columns: 1fr; }
    .promo-sort-bar { flex-wrap: wrap; }
    .promo-sort-bar .filter-location-needed { width: 100%; margin-left: 0; }
    .editorial-lead {
        grid-row: auto;
    }
    .editorial-row {
        grid-template-columns: 7rem minmax(0, 1fr);
    }
}
@media (prefers-reduced-motion: reduce) {
    .editorial-row,
    .editorial-lead,
    .promo-grid .media-card {
        transition: none;
    }
    .feature-pillar-image,
    .feature-pillar--reverse .feature-pillar-image {
        transform: none;
    }
}

/* Premium marketing master-detail and CMS feature surfaces. */
.master-detail-page {
    position: relative;
}

.master-detail-root {
    position: fixed;
    z-index: 20;
    inset: 5.5rem 1.5rem 1.5rem auto;
    width: min(52rem, 58vw);
    overflow: auto;
    padding: 2rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: -1rem 2rem 4rem rgba(15, 23, 42, 0.18);
    transform: translateX(1.5rem);
    opacity: 0;
    transition: transform 260ms ease, opacity 220ms ease;
}

.master-detail-root.is-open {
    transform: translateX(0);
    opacity: 1;
}

.master-detail-backdrop {
    position: fixed;
    z-index: 19;
    inset: 0;
    background: rgba(2, 6, 23, 0.48);
    backdrop-filter: blur(2px);
    animation: master-detail-backdrop-in 220ms ease both;
}

body.has-master-detail-open {
    overflow: hidden;
}

.master-detail-root.is-loading {
    opacity: 0.55;
}

.master-detail-panel {
    outline: none;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.master-detail-loading {
    min-height: 12rem;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    font-weight: 700;
}

.master-detail-page--discover .master-detail-root {
    width: min(58rem, 64vw);
}

.master-detail-page--blog .master-detail-root {
    width: min(66rem, 68vw);
}

@keyframes master-detail-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.detail-close {
    display: inline-flex;
    margin-bottom: 1.25rem;
    color: #047857;
    font-weight: 700;
}

.master-detail-page .media-card,
.master-detail-page .promo-row {
    position: relative;
}

.feature-carousel {
    margin-top: 2.25rem;
}

.feature-carousel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.feature-carousel-head h2 {
    max-width: 38rem;
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 800;
}

.feature-carousel-track {
    display: grid;
    grid-auto-columns: minmax(16rem, 22rem);
    grid-auto-flow: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
    overflow-x: auto;
    padding: 0.25rem 0.25rem 1.25rem;
    scroll-snap-type: x mandatory;
}

.feature-slide {
    overflow: hidden;
    scroll-snap-align: start;
}

.feature-slide-image {
    display: block;
    width: 100%;
    height: 21rem;
    object-fit: cover;
}

.feature-slide-copy {
    padding: 1.25rem 1.35rem 1.5rem;
}

.feature-slide-label {
    margin: 0 0 0.35rem;
    color: #047857;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.feature-slide-copy h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.25rem;
}

.feature-slide-copy p:last-child {
    margin: 0.55rem 0 0;
    color: #475569;
    line-height: 1.65;
}

.cms-aspect-3-4 {
    aspect-ratio: 3 / 4;
}

.cms-aspect-1-1 {
    aspect-ratio: 1;
}

.home-hero > .hero-scrim {
    background:
        linear-gradient(90deg, rgba(11, 15, 23, 0.98) 0%, rgba(11, 15, 23, 0.92) 30%, rgba(11, 15, 23, 0.62) 58%, rgba(11, 15, 23, 0.16) 86%, rgba(11, 15, 23, 0.04) 100%),
        linear-gradient(180deg, rgba(11, 15, 23, 0.16), rgba(11, 15, 23, 0.72));
}

@media (max-width: 1099px) {
    .master-detail-root {
        position: static;
        width: auto;
        margin-top: 2rem;
        box-shadow: none;
        transform: none;
        opacity: 1;
    }

    .master-detail-backdrop {
        display: none;
    }

    body.has-master-detail-open {
        overflow: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .feature-carousel-track {
        scroll-behavior: auto;
    }

    .master-detail-root,
    .master-detail-backdrop {
        animation: none;
        transition: none;
    }
}

.hero-proof strong {
    display: block;
    font-size: 1.1rem;
    color: var(--text);
}

.price-card--compact {
    gap: 0.45rem;
}
.price-card--compact .pricing-plan-perks {
    margin-top: 0.2rem;
}
.pricing-matrix-cta-row td,
.pricing-matrix-cta-row th {
    vertical-align: middle;
}
.pricing-matrix-cta {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
}
.pricing-matrix-cta.is-billing-hidden {
    display: none;
}
.pricing-faq .faq-list {
    display: grid;
    gap: 0.85rem;
}
.pricing-faq .faq-item {
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--bg-card);
}
.pricing-faq .faq-item h3 {
    margin: 0;
    font-size: 1rem;
}
.pricing-faq .faq-item p {
    margin: 0.55rem 0 0;
    color: var(--muted);
}
.listing-inline-notice {
    margin: -0.5rem 0 1rem;
}

.pricing-faq .faq-grid {
    display: none;
}

.pricing-faq details {
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--bg-card);
}

.pricing-faq summary {
    cursor: pointer;
    font-weight: 700;
}

.pricing-faq details p {
    margin: 0.75rem 0 0;
    color: var(--muted);
}

.promo-row-value {
    display: block;
    color: var(--accent);
}

.promo-row-title {
    display: block;
    margin-top: 0.15rem;
    color: var(--text);
}

@media (max-width: 720px) {
    .pricing-faq .faq-grid { grid-template-columns: 1fr; }
}

.nav-center a.active {
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .nav-pill { transition: none !important; }
    .price-card--glow::before { animation: none; }
    .stack-card[data-tilt], [data-tilt] { transition: none !important; transform: none !important; }
    a.media-card:hover .media-frame img { transform: none; }
    .showcase-card:hover { transform: none; }
}

/* ===== Luxury motion and interaction foundation ===== */
:root {
    --motion-fast: 180ms;
    --motion-base: 280ms;
    --motion-slow: 500ms;
    --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-page: 420ms;
}

html.js-ready .reveal[data-stagger],
html.js-ready .section[data-stagger] > *,
html.js-ready .listing-grid > *,
html.js-ready .promo-list > *,
html.js-ready .bento-grid > * {
    transition-delay: calc(var(--stagger-index, 0) * 55ms);
}

html.js-ready .listing-grid > *,
html.js-ready .promo-list > *,
html.js-ready .bento-grid > * {
    --stagger-index: 0;
}

html.js-ready .discover-detail-root.is-loading .discover-detail {
    opacity: 0.45;
    transform: translateY(4px);
    transition: opacity var(--motion-base) var(--ease-soft), transform var(--motion-base) var(--ease-soft);
}

.discover-detail-root.is-loaded .discover-detail {
    animation: discover-detail-swap 420ms var(--ease-luxury) both;
}
@keyframes discover-detail-swap {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to { opacity: 1; transform: none; }
}

.nav-panel[aria-hidden="true"] { visibility: visible; }
.promo-quick-controls {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.promo-quick-controls::-webkit-scrollbar { display: none; }
.promo-quick-controls .quick-control {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-soft);
}
.promo-quick-controls .quick-control:hover,
.promo-quick-controls .quick-control.active {
    color: var(--text);
    border-color: rgba(52,211,153,0.52);
    background: rgba(52,211,153,0.13);
    text-decoration: none;
    transform: translateY(-1px);
}
.quick-control-dot {
    display: inline-block;
    width: 0.42rem;
    height: 0.42rem;
    margin-left: 0.2rem;
    border-radius: 50%;
    background: var(--accent-soft);
    vertical-align: middle;
}
.promo-list--browse {
    display: grid;
    gap: 0.75rem;
}
.promo-row--browse {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 84px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--bg-elevated);
    transition: border-color var(--motion-base) var(--ease-soft), background var(--motion-base) var(--ease-soft), transform var(--motion-base) var(--ease-soft);
}
.promo-row--browse:hover {
    background: rgba(52,211,153,0.06);
    transform: translateY(-2px);
}
.promo-row--browse.is-selected {
    border-color: rgba(245,158,11,0.58);
    background: linear-gradient(90deg, rgba(245,158,11,0.12), rgba(52,211,153,0.06));
    box-shadow: 0 0 0 1px rgba(245,158,11,0.12), 0 1rem 2rem rgba(0,0,0,0.16);
}
.promo-row-thumb {
    width: 72px;
    height: 84px;
    overflow: hidden;
    align-self: stretch;
    background: #020617;
}
.promo-row-thumb img,
.promo-row-thumb .cms-placeholder,
.promo-row-thumb .promo-row-image {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    aspect-ratio: auto;
    object-fit: cover;
}
.promo-row-body {
    min-width: 0;
    overflow: hidden;
    padding: 0.45rem 0;
}
.promo-row-benefit {
    display: block;
    overflow: hidden;
    color: var(--accent-soft);
    font-size: 0.72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.promo-row-title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text);
    font-weight: 700;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.promo-row-meta {
    display: flex;
    flex-wrap: wrap;
    max-height: 1.15rem;
    overflow: hidden;
    gap: 0.35rem 0.7rem;
    color: var(--muted);
    font-size: 0.78rem;
}
.promo-row-meta span + span::before { content: '·'; margin-right: 0.7rem; opacity: 0.55; }
.promo-empty-art {
    width: 5.5rem;
    height: 5.5rem;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    color: var(--accent-soft);
    background: radial-gradient(circle at 30% 20%, rgba(52,211,153,0.22), transparent 62%), rgba(255,255,255,0.04);
    border: 1px solid rgba(52,211,153,0.18);
}
.promo-detail-shell {
    display: grid;
    gap: 1.25rem;
}
.promo-detail-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1rem, 3vw, 1.5rem);
    border-radius: 1.35rem;
    border: 1px solid rgba(52,211,153,0.18);
    background: linear-gradient(145deg, rgba(15,23,42,0.92), rgba(2,6,23,0.96));
}
.promo-detail-hero .detail-hero {
    margin: 0;
    max-height: 460px;
}
.promo-detail-hero-copy { padding: 1.1rem 0 0.25rem; }
.promo-detail-hero-copy h1 { margin-bottom: 0.4rem; }
.promo-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}
.promo-meta-card {
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: rgba(255,255,255,0.035);
}
.promo-meta-card strong { display: block; margin-top: 0.25rem; font-size: 0.9rem; }
.promo-meta-icon { color: var(--accent-soft); font-size: 1.1rem; }
.promo-terms {
    padding: 1.1rem 1.2rem;
    border-left: 2px solid var(--accent);
    border-radius: 0 1rem 1rem 0;
    background: rgba(255,255,255,0.035);
}
.promo-card-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.discover-catalog-list {
    display: grid;
    gap: 1.5rem;
}
.discover-catalog-list--flat {
    gap: 1.5rem;
}
.discover-bank-label {
    margin: 0 0 0.65rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.discover-card-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.8rem;
}
.discover-card-strip--flat {
    gap: 0.8rem;
}
.discover-card-link {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 0.7rem;
    align-items: center;
    min-height: 5.75rem;
    height: 5.75rem;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    color: inherit;
    text-decoration: none;
    background: rgba(2, 6, 23, 0.35);
    transition: transform var(--motion-base) var(--ease-soft), border-color var(--motion-base) var(--ease-soft), background var(--motion-base) var(--ease-soft);
}
.discover-card-link:hover {
    border-color: rgba(52, 211, 153, 0.48);
    background: rgba(52, 211, 153, 0.08);
    text-decoration: none;
    transform: translateY(-2px);
}
.discover-card-link img,
.discover-card-link .card-img-placeholder {
    width: 82px;
    aspect-ratio: 1.586 / 1;
    object-fit: contain;
    border-radius: 0.55rem;
}
.discover-card-link-body {
    min-width: 0;
    overflow: hidden;
}
.discover-card-link-body strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.84rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.discover-card-link-body small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.75rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.discover-detail-root { border-left: 1px solid transparent; transition: border-color var(--motion-base) ease; }
.discover-detail-columns { min-width: 0; }
.tab-panel.is-active { animation: detail-panel-in var(--motion-base) var(--ease-luxury) both; }
@keyframes detail-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@media (min-width: 1100px) {
    .discover-detail-root { border-left-color: rgba(255,255,255,0.08); padding-left: 2rem; }
    .discover-detail-columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
}
@media (max-width: 640px) {
    .promo-row--browse { grid-template-columns: 72px 1fr; }
    .promo-row-thumb { width: 72px; height: 84px; }
    .promo-row-arrow { display: none; }
    .promo-meta-grid { grid-template-columns: 1fr; }
    .discover-card-strip { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .nav-center a.active {
        color: var(--text);
        background: rgba(52,211,153,0.12);
        border: 1px solid rgba(52,211,153,0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.js-ready .page-fade { animation: none !important; }
    html.js-ready .reveal { transition: none !important; }
    .discover-detail-root.is-loading .discover-detail { transition: none; }
    .tab-panel.is-active { animation: none !important; }
}

/* ===== Hybrid luxury layout (home + listing filters) ===== */
main:has(.home-stack-hero) {
    padding-top: 0.5rem;
}

.home-stack-hero {
    --stack-col-width: 235px;
    --stack-gap: 0.5rem;
    --stack-card-gap: 0.4rem;
    --stack-card-scale: 1.3;
    --stack-rotate: 10deg;
    --stack-height: 480px;
    --stack-opacity: 0.7;
    --stack-fade: 39%;
    --stack-clip-pad: 0px;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    padding: 0.5rem 0 0.75rem;
    min-height: calc(var(--stack-height) + 1rem);
}

.home-stack-hero .hero-copy {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    z-index: 2;
    align-self: start;
    max-width: 36rem;
    text-shadow: 0 1px 18px rgba(11, 15, 23, 0.55);
    align-self: center;
}

.hero-ambient {
    position: absolute;
    inset: -12% -10% -5%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        circle at 50% 30%,
        rgba(16, 185, 129, 0.1) 0%,
        rgba(245, 158, 11, 0.05) 40%,
        rgba(11, 15, 23, 0) 70%
    );
}

.home-stack-hero > .home-stack-banner {
    grid-row: 1;
    grid-column: 2;
    position: relative;
    z-index: 0;
    align-self: start;
    pointer-events: none;
    aspect-ratio: auto;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    height: var(--stack-height);
    min-height: 0;
    max-height: none;
    display: grid;
    place-items: stretch;
    overflow: hidden;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Soft vignette: strong left + bottom fade into page bg (no hard rectangular crop). */
.home-stack-media--fade-bottom {
    -webkit-mask-image:
        linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--stack-fade, 35%)), transparent 100%),
        linear-gradient(to right, transparent 0%, transparent 35%, #000 45%, #000 90%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, #000 12%, #000 100%);
    mask-image:
        linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--stack-fade, 35%)), transparent 100%),
        linear-gradient(to right, transparent 0%, transparent 35%, #000 45%, #000 90%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, #000 12%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.home-stack-hero .card-stacks--home {
    position: relative;
    width: 100%;
    height: 100%;
    align-self: stretch;
    justify-content: flex-end;
    overflow: hidden;
    padding: var(--stack-clip-pad) 0 0;
    box-sizing: border-box;
    mask-image: none;
    -webkit-mask-image: none;
    opacity: var(--stack-opacity, 0.88);
}

.home-stack-hero .card-stacks--home .stack-col {
    transform-origin: center top;
}

.home-stack-hero .card-stacks--home .stack-col-1 {
    transform: rotate(var(--stack-rotate, 0deg)) translateY(0);
}
.home-stack-hero .card-stacks--home .stack-col-2 {
    transform: rotate(var(--stack-rotate, 0deg)) translateY(18px);
}
.home-stack-hero .card-stacks--home .stack-col-3 {
    transform: rotate(var(--stack-rotate, 0deg)) translateY(8px);
}
.home-stack-hero .card-stacks--home .stack-col-4 {
    transform: rotate(var(--stack-rotate, 0deg)) translateY(24px);
}
.home-stack-hero .card-stacks--home .stack-col-5 {
    transform: rotate(var(--stack-rotate, 0deg)) translateY(12px);
}
.home-stack-hero .card-stacks--home .stack-col-6 {
    transform: rotate(var(--stack-rotate, 0deg)) translateY(28px);
}
.home-stack-hero .card-stacks--home .stack-col-7 {
    transform: rotate(var(--stack-rotate, 0deg)) translateY(6px);
}
.home-stack-hero .card-stacks--home .stack-col-8 {
    transform: rotate(var(--stack-rotate, 0deg)) translateY(20px);
}

.home-stack-hero .card-stacks--home .stack-card {
    transform: scale(var(--stack-card-scale, 1.1));
}

.home-stack-hero .card-stacks--home .stack-card img {
    aspect-ratio: 1.586 / 1;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.card-stacks--static .stack-marquee {
    animation: none !important;
    will-change: auto;
}

/* ===== Home hero structure polish ===== */
main:has(.home-stack-hero) {
    padding-top: 0;
}

.home-stack-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 5rem);
    min-height: 0;
    padding: 5rem 0 4rem;
    background:
        radial-gradient(circle at 60% 30%, rgba(16, 185, 129, 0.08) 0%, rgba(245, 158, 11, 0.05) 40%, transparent 70%);
}

.home-stack-hero .hero-copy {
    grid-column: 1;
    grid-row: 1;
}

.home-stack-hero .hero-copy h1 {
    color: #ffffff;
}

.hero-app-shell {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    background: rgba(15, 23, 42, 0.5);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-app-shell .home-stack-banner {
    height: min(480px, 42vw);
    min-height: 360px;
    overflow: visible;
}

.hero-app-shell .home-stack-media--fade-bottom {
    -webkit-mask-image:
        linear-gradient(to bottom, #000 70%, transparent 100%),
        linear-gradient(to right, #000 70%, transparent 100%);
    mask-image:
        linear-gradient(to bottom, #000 70%, transparent 100%),
        linear-gradient(to right, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.hero-app-shell .card-stacks--home {
    padding: 0;
}

@media (max-width: 900px) {
    .home-stack-hero {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 2.75rem 0 2.25rem;
    }

    .home-stack-hero .hero-copy {
        grid-column: 1;
        grid-row: 2;
    }

    .hero-app-shell {
        grid-column: 1;
        grid-row: 1;
        padding: 1rem;
    }

    .hero-app-shell .home-stack-banner {
        height: 320px;
        min-height: 0;
    }
}

/* Shared dark drawer surface for Promo and Blog. */
.master-detail-root:not(.master-detail-root--discover) {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(51, 65, 85, 0.9);
    border-radius: 1.5rem;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98)),
        var(--bg);
    box-shadow: -1rem 2rem 4rem rgba(0, 0, 0, 0.42), 0 0 2rem rgba(16, 185, 129, 0.08);
    scrollbar-color: #334155 transparent;
    scrollbar-width: thin;
}
.master-detail-root:not(.master-detail-root--discover) > .master-detail-panel {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: transparent;
    scrollbar-color: #334155 transparent;
    scrollbar-width: thin;
}
.master-detail-root:not(.master-detail-root--discover) > .master-detail-panel::-webkit-scrollbar {
    width: 6px;
}
.master-detail-root:not(.master-detail-root--discover) > .master-detail-panel::-webkit-scrollbar-track {
    background: transparent;
}
.master-detail-root:not(.master-detail-root--discover) > .master-detail-panel::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: #334155;
}
.master-detail-root:not(.master-detail-root--discover) > .master-detail-panel::-webkit-scrollbar-thumb:hover {
    background: #475569;
}
.master-detail-root:not(.master-detail-root--discover) .detail-hero {
    border-color: transparent;
    box-shadow: none;
}

/* Keep Discover tabs attached to the dark content surface while scrolling. */
.master-detail-root--discover .discover-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.98) 72%, rgba(2, 6, 23, 0.78));
}
.master-detail-root--discover .perk-sections {
    gap: 0.8rem;
}
.master-detail-root--discover .perk-section.content-section {
    margin: 0;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.42);
}
.master-detail-root--discover .perk-section-title {
    margin: 0 0 0.7rem;
    color: var(--text);
    font-size: 0.98rem;
}
.master-detail-root--discover .perk-section-body {
    color: var(--text-secondary);
}

/* Real Discover card art has no synthetic black frame or fill. */
.discover-catalog .card-img-slot.has-img,
.discover-catalog .card-img-slot.has-img .discover-card-img,
.discover-catalog .catalog-card-thumb,
.discover-catalog .catalog-card-thumb .discover-card-img,
.discover-bank-card .card-img-slot.has-img,
.discover-bank-card .card-img-slot.has-img .discover-card-img {
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.discover-catalog .card-img-slot.has-img .discover-card-img {
    object-fit: contain;
}

/* Final drawer handle precedence. */
.master-detail-root--discover .discover-hero-slot.no-img {
    display: none;
}
body .master-detail-root--discover .comparison-rail,
body .discover-detail-root .comparison-rail {
    top: 50%;
    left: 0;
    min-height: 8rem;
    padding: 0.65rem 0.5rem;
    border: 1px solid #1e293b;
    border-right: 0;
    border-radius: 0.75rem 0 0 0.75rem;
    background: #020617;
    transform: translate(-100%, -50%);
    writing-mode: vertical-lr;
}
body .master-detail-root--discover .comparison-rail:hover,
body .master-detail-root--discover .comparison-rail:focus-visible,
body .discover-detail-root .comparison-rail:hover,
body .discover-detail-root .comparison-rail:focus-visible {
    transform: translate(calc(-100% - 0.25rem), -50%);
}
.master-detail-root--discover .comparison-rail-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}
/* Responsive marketing composition contract. */
.site-header {
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: auto;
    max-width: 100%;
}
@media (max-width: 899px) {
    .site-header .wrap.nav {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
    .nav-bar {
        width: 100%;
        padding-inline: clamp(0.9rem, 4vw, 1.25rem);
        background: transparent;
        border-bottom: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}
.nav-menu-open .site-header { z-index: 80; }
.nav-menu-open .nav-bar {
    position: relative;
    z-index: 81;
}

.home-hero > .hero-scrim {
    background:
        linear-gradient(90deg, rgba(11, 15, 23, 0.98) 0%, rgba(11, 15, 23, 0.9) 28%, rgba(11, 15, 23, 0.52) 58%, rgba(11, 15, 23, 0.12) 86%, rgba(11, 15, 23, 0.02) 100%),
        linear-gradient(180deg, rgba(11, 15, 23, 0.08), rgba(11, 15, 23, 0.58));
}

@media (max-width: 899px), (orientation: landscape) and (max-height: 560px) and (max-width: 899px) {
    .nav {
        display: block;
        min-height: var(--header-h);
    }
    .nav-bar {
        width: 100%;
        min-height: var(--header-h);
        padding-inline: clamp(0.9rem, 4vw, 1.25rem);
        background: transparent;
        border-bottom: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nav-panel {
        position: fixed;
        inset: var(--header-h) 0 auto;
        z-index: 79;
        display: flex;
        flex-direction: column;
        max-height: calc(100svh - var(--header-h));
        overflow-y: auto;
        padding: 0.75rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(2, 6, 23, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        transform: translateY(-0.5rem);
        transform-origin: top;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: transform 220ms var(--ease-soft), opacity 220ms ease, visibility 220ms;
    }
    .nav-toggle:checked ~ .nav-panel,
    .nav-panel[aria-hidden="false"] {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }
    .nav-center, .nav-right {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        width: 100%;
        margin: 0;
        justify-self: stretch;
        grid-column: auto;
    }
    .nav-center {
        padding: 0;
        border: 0;
        background: transparent;
        border-radius: 0;
    }
    .nav-center a, .nav-right .btn, .nav-right a {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        text-align: center;
    }
    .home-hero {
        --hero-min-height: min(620px, 82svh);
        --hero-lane-gap: 0.42rem;
        --hero-card-width: clamp(8rem, 41vw, 12rem);
    }
    .home-hero-inner {
        min-height: var(--hero-min-height);
        align-items: flex-start;
        padding-block: clamp(3rem, 11svh, 5rem) 2rem;
    }
    .home-hero > .home-card-marquee {
        align-content: start;
        gap: var(--hero-lane-gap);
        padding-top: calc(var(--header-h) + clamp(0.5rem, 2svh, 1.25rem));
        padding-bottom: 0;
        transform: rotate(-1deg) scale(1.02);
        opacity: 0.82;
    }
    .home-hero .home-marquee-lane--3 { display: none; }
    .home-hero .hero-copy {
        max-width: 34rem;
        padding: 0.85rem 0;
        padding-inline: clamp(1.25rem, 4vw, 2rem);
        background: transparent;
    }
    .home-hero > .hero-scrim {
        background:
            linear-gradient(90deg, rgba(11, 15, 23, 0.98) 0%, rgba(11, 15, 23, 0.9) 58%, rgba(11, 15, 23, 0.42) 100%),
            linear-gradient(180deg, rgba(11, 15, 23, 0.35) 0%, transparent 28%, rgba(11, 15, 23, 0.62) 100%);
    }
}

@media (max-width: 1099px) {
    .card-header-media {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;
        gap: 0.35rem;
        width: 100%;
        max-width: none;
    }
    .card-header-media .header-nav { display: contents; }
    .card-header-media .header-nav--media:first-child .header-nav-btn { grid-column: 1; }
    .card-header-media > .discover-hero-slot { grid-column: 2; grid-row: 1; width: min(280px, 72vw); max-width: 100%; margin-inline: auto; }
    .card-header-media .header-nav--media:last-child { grid-column: 3; grid-row: 1; }
    .card-header-media .header-nav-btn { width: 44px; height: 44px; }
    .card-header { gap: 1rem; }
    .card-header-info { width: 100%; }
    .header-nav { position: static; pointer-events: auto; }
}

@media (min-width: 641px) and (max-width: 720px) {
    .listing-toolbar .search--pill { min-width: 0; }
    .listing-filter-search .listing-sort-control { min-width: 0; }
}

@media (min-width: 901px) and (max-width: 1099px) {
    .home-hero {
        --hero-min-height: min(660px, 78svh);
        --hero-card-width: clamp(9rem, 19vw, 13rem);
    }
    .home-hero > .home-card-marquee {
        transform: rotate(-1deg) scale(1.02);
    }
    .home-hero-inner { align-items: flex-start; padding-block: 5rem 3rem; }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 899px) {
    .home-hero {
        --hero-min-height: min(500px, 92svh);
    }
    .home-hero-inner { padding-block: 2.5rem 1.5rem; }
    .home-hero .hero-copy { max-width: 30rem; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-panel { transition: none !important; }
}

/* Authoritative Discover drawer contract: both panes share one layout. */
.discover-comparison-root .card-header-media { max-width: none; }
@media (min-width: 1100px) {
    .discover-drawer-shell {
        --discover-drawer-width: min(52rem, 42vw);
        --discover-drawer-gap: 0.5rem;
    }
    .discover-drawer-shell > #discover-detail-root,
    .discover-drawer-shell > #discover-comparison-root {
        position: fixed;
        top: 5.5rem;
        bottom: 1.5rem;
        left: auto !important;
        width: var(--discover-drawer-width);
        min-height: 0;
        overflow: hidden;
        transform: none;
        transition: none;
    }
    .discover-drawer-shell > #discover-detail-root {
        right: 1.5rem !important;
        z-index: 21;
    }
    .discover-drawer-shell > #discover-comparison-root {
        right: calc(1.5rem + var(--discover-drawer-width) + var(--discover-drawer-gap)) !important;
        z-index: 20;
    }
    .discover-drawer-shell > #discover-comparison-root .drawer-card-picker {
        padding-right: 0 !important;
    }
    .discover-drawer-shell > #discover-comparison-root[hidden],
    .discover-drawer-shell > #discover-comparison-root:not(.is-open) {
        display: none !important;
    }
    .discover-drawer-shell > #discover-comparison-root.is-open {
        display: block !important;
    }
    .discover-drawer-shell > #discover-detail-root > .discover-detail-shell,
    .discover-drawer-shell > #discover-comparison-root > .discover-detail-shell {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    .discover-drawer-shell > #discover-detail-root > .discover-detail-shell,
    .discover-drawer-shell > #discover-comparison-root > .discover-detail-shell {
        box-sizing: border-box;
        border: 1px solid rgba(51, 65, 85, 0.9);
        border-radius: 1.5rem;
        background:
            linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98)),
            var(--bg);
        box-shadow: -1rem 2rem 4rem rgba(0, 0, 0, 0.42), 0 0 2rem rgba(16, 185, 129, 0.08);
    }
    .discover-drawer-shell > #discover-detail-root > .discover-detail-shell > .detail-surface,
    .discover-drawer-shell > #discover-comparison-root > .discover-detail-shell > .detail-surface {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        border: 0;
        border-radius: inherit;
        background: transparent;
        scrollbar-color: #334155 transparent;
        scrollbar-width: thin;
    }
}

/* Discover drawers: one bounded desktop geometry and one scrolling surface. */
.drawer-header-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.55rem;
}
.drawer-header-row .drawer-card-picker { min-width: 0; }
.drawer-close {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(100, 116, 139, 0.65);
    border-radius: 0.8rem;
    color: var(--text-secondary);
    background: rgba(2, 6, 23, 0.82);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}
.drawer-close:hover,
.drawer-close:focus-visible {
    border-color: var(--accent-soft);
    color: var(--text);
}
@media (min-width: 1100px) {
    .discover-drawer-shell {
        --discover-drawer-width: min(52rem, 42vw);
    }
    .discover-drawer-shell > .discover-detail-root,
    .discover-drawer-shell > .discover-comparison-root {
        position: fixed;
        top: 5.5rem;
        bottom: 1.5rem;
        width: var(--discover-drawer-width);
        min-height: 0;
        overflow: hidden;
        transform: none;
        transition: none;
    }
    .discover-drawer-shell > .discover-detail-root {
        right: 1.5rem;
        z-index: 21;
    }
    .discover-drawer-shell > .discover-comparison-root {
        right: calc(1.5rem + var(--discover-drawer-width) + 1rem);
        z-index: 20;
    }
    .discover-drawer-shell > .discover-comparison-root[hidden],
    .discover-drawer-shell > .discover-comparison-root:not(.is-open) {
        display: none !important;
    }
    .discover-drawer-shell > .discover-comparison-root.is-open {
        display: block !important;
    }
    .discover-drawer-shell > .discover-detail-root > .discover-detail-shell,
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content],
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content] > .discover-detail-shell {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    .discover-drawer-shell > .discover-detail-root > .discover-detail-shell > .detail-surface,
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content] .detail-surface {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-color: #334155 transparent;
        scrollbar-width: thin;
    }
}
@media (max-width: 1099px) {
    .drawer-header-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Final Discover surface contract: drawers only on the index mount. */
body .discover-drawer-shell > .discover-comparison-root[hidden] {
    display: none !important;
}
body .discover-drawer-shell > .discover-comparison-root:not(.is-open) {
    display: none !important;
}
body .discover-catalog .discover-detail-columns:not(.discover-detail-columns--drawer) > .discover-detail-root {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    min-height: 0;
}
body .discover-catalog .discover-detail-columns:not(.discover-detail-columns--drawer) > .discover-comparison-root {
    display: none !important;
}
body .discover-catalog .discover-detail-columns:not(.discover-detail-columns--drawer) .discover-detail {
    height: auto;
    min-height: 0;
    overflow: visible;
}

@media (min-width: 1100px) {
    body .discover-drawer-shell > .discover-detail-root {
        position: fixed;
        inset: 5.5rem 1.5rem 1.5rem auto;
        z-index: 20;
        width: min(52rem, 42vw);
        min-height: 0;
    }
    body .discover-drawer-shell > .discover-comparison-root.is-open {
        position: fixed;
        inset: 5.5rem auto 1.5rem 1.5rem;
        right: calc(1.5rem + min(52rem, 42vw) + 0.5rem);
        z-index: 19;
        display: block !important;
        width: min(52rem, 42vw);
        height: auto;
        min-height: 0;
        transform: none;
        transition: none;
        overflow: hidden;
    }
    body .discover-drawer-shell > .discover-comparison-root.is-open > [data-comparison-content],
    body .discover-drawer-shell > .discover-comparison-root.is-open > [data-comparison-content] > .discover-detail-shell,
    body .discover-drawer-shell > .discover-comparison-root.is-open > [data-comparison-content] .discover-detail,
    body .discover-drawer-shell > .discover-detail-root > .discover-detail-shell,
    body .discover-drawer-shell > .discover-detail-root > .discover-detail-shell > .discover-detail {
        height: 100%;
        min-height: 0;
    }
    body .discover-drawer-shell > .discover-comparison-root.is-open > [data-comparison-content] .discover-detail,
    body .discover-drawer-shell > .discover-detail-root > .discover-detail-shell > .discover-detail {
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-color: #334155 transparent;
        scrollbar-width: thin;
    }
    body .discover-drawer-shell > .discover-comparison-root .comparison-close {
        top: 0.65rem;
        right: 0.65rem;
        width: 2rem;
        height: 2rem;
        min-height: 2rem;
        padding: 0;
        font-size: 0;
        line-height: 1;
    }
    body .discover-drawer-shell > .discover-comparison-root .comparison-close::before {
        content: '×';
        font-size: 1.35rem;
    }
}

.master-detail-root--discover .perk-bonus-container,
.discover-drawer-shell .perk-bonus-container {
    margin-top: 0;
}
.master-detail-root--discover .perk-bonus-container > .perk-subsection-title--statement,
.discover-drawer-shell .perk-bonus-container > .perk-subsection-title--statement {
    margin-top: 0;
    margin-bottom: 0.35rem;
}
.master-detail-root--discover .perk-bonus-container > .perk-segment > h4,
.discover-drawer-shell .perk-bonus-container > .perk-segment > h4 {
    margin-top: 0;
}

/* Final Discover comparison state: hidden until the explicit CTA opens it. */
@media (min-width: 1100px) {
    .discover-drawer-shell > .discover-comparison-root:not(.is-open) {
        display: none;
    }
    .discover-drawer-shell > .discover-comparison-root.is-open {
        display: block;
        inset: 5.5rem auto 1.5rem 1.5rem;
        width: min(52rem, 42vw);
        transform: none;
        transition: none;
    }
}

.master-detail-root--discover .perk-bonus-container > .perk-subsection-title--statement,
.discover-drawer-shell .perk-bonus-container > .perk-subsection-title--statement {
    margin: 0 0 0.65rem;
    padding: 0 0 0.45rem;
    border: 0;
    border-bottom: 1px solid rgba(71, 85, 105, 0.35);
    border-radius: 0;
    background: transparent;
}

/* Final Discover capability guard: two drawers need width and landscape room. */
@media (min-width: 768px) and (min-aspect-ratio: 4/3) {
    .discover-drawer-shell > .discover-comparison-root,
    .discover-drawer-shell > .discover-comparison-root.is-prefetched,
    .discover-drawer-shell > .discover-comparison-root.is-open {
        display: block !important;
    }
    .discover-drawer-shell > .discover-comparison-root .comparison-exposed-edge {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: 2.75rem;
        min-height: 0;
        height: auto;
        transform: translateX(-100%);
        border-radius: 0.85rem 0 0 0.85rem;
    }
    .discover-drawer-shell > .discover-comparison-root.is-open .comparison-exposed-edge {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        transform: translateX(-100%);
    }
}

@media (max-width: 767px), (max-aspect-ratio: 4/3) {
    .discover-drawer-shell > .discover-comparison-root,
    .discover-drawer-shell > .discover-comparison-root .comparison-exposed-edge {
        display: none !important;
    }
}

/* Discover dual-drawer contract: comparison left, primary right. */
@media (min-width: 768px) {
    .discover-drawer-shell {
        --discover-primary-width: min(52rem, 48vw);
        --discover-comparison-width: min(44rem, 40vw);
        position: relative;
        z-index: 20;
    }
    .discover-drawer-shell > .discover-detail-root,
    .discover-drawer-shell > .discover-comparison-root {
        position: fixed;
        top: 5.5rem;
        bottom: 1.5rem;
        min-height: 0;
        display: block;
        overflow: visible;
        transition: opacity 500ms var(--ease-soft), transform 500ms var(--ease-soft), width 500ms var(--ease-soft);
    }
    .discover-drawer-shell > .discover-detail-root {
        right: 1.5rem;
        z-index: 21;
        width: var(--discover-primary-width);
    }
    .discover-drawer-shell > .discover-comparison-root {
        right: calc(1.5rem + var(--discover-primary-width) + 1rem);
        z-index: 20;
        width: var(--discover-comparison-width);
        opacity: 1;
        pointer-events: none;
        transform: translateX(calc(var(--discover-comparison-width) - 3rem)) scale(0.96);
        transform-origin: right center;
    }
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content] {
        opacity: 0;
        transition: opacity 500ms var(--ease-soft);
    }
    .discover-drawer-shell > .discover-comparison-root.is-open {
        pointer-events: auto;
        transform: translateX(0) scale(1);
    }
    .discover-drawer-shell > .discover-comparison-root.is-open > [data-comparison-content] {
        opacity: 1;
    }
    .discover-drawer-shell > .discover-comparison-root[hidden] {
        display: none;
    }
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content],
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content] > .discover-detail-shell,
    .discover-drawer-shell > .discover-detail-root > .discover-detail-shell {
        height: 100%;
        min-height: 0;
    }
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content] .discover-detail,
    .discover-drawer-shell > .discover-detail-root .discover-detail {
        height: 100%;
        overflow-y: auto;
        scrollbar-color: #334155 transparent;
        scrollbar-width: thin;
    }
    .discover-drawer-shell > .discover-comparison-root:not(.is-open) .comparison-exposed-edge {
        pointer-events: auto;
    }
    .discover-drawer-shell > .discover-comparison-root.is-open .comparison-exposed-edge {
        pointer-events: auto;
    }
    .discover-drawer-shell > .discover-comparison-root .comparison-exposed-edge {
        left: 0;
        right: auto;
        transform: translate(-100%, -50%);
    }
    .discover-drawer-shell > .discover-comparison-root.is-open .comparison-exposed-edge {
        right: auto;
        left: 0;
        transform: translate(-100%, -50%);
    }
    .discover-drawer-shell > .discover-detail-root > .discover-detail-shell > .discover-detail {
        border-radius: 1.25rem 0 0 1.25rem;
    }
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content] .discover-detail {
        border-radius: 0 1.25rem 1.25rem 0;
    }
    .discover-drawer-shell > .discover-comparison-root .discover-detail-shell {
        overflow: hidden;
    }
    .discover-drawer-shell > .discover-comparison-root .comparison-exposed-edge {
        writing-mode: vertical-lr;
    }
    .master-detail-backdrop {
        z-index: 19;
    }
}

@media (max-width: 767px) {
    .discover-drawer-shell > .discover-comparison-root,
    .discover-drawer-shell > .discover-comparison-root .comparison-exposed-edge {
        display: none !important;
    }
    .discover-drawer-shell > .discover-detail-root {
        position: static;
    }
}

/* Compact editorial hierarchy for Discover summary and Perks. */
.master-detail-root--discover .content-section,
.discover-drawer-shell .content-section {
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(71, 85, 105, 0.55);
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.58);
}
.master-detail-root--discover .catalog-subhead,
.discover-drawer-shell .catalog-subhead,
.master-detail-root--discover .perk-section-title,
.discover-drawer-shell .perk-section-title {
    color: #6ee7b7;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.master-detail-root--discover .info-table,
.discover-drawer-shell .info-table {
    border: 0;
    background: transparent;
}
.master-detail-root--discover .info-row,
.discover-drawer-shell .info-row {
    min-height: 2.35rem;
    border-bottom: 1px solid rgba(71, 85, 105, 0.32);
    background: transparent;
}
.master-detail-root--discover .info-row:last-child,
.discover-drawer-shell .info-row:last-child {
    border-bottom: 0;
}
.master-detail-root--discover .info-label,
.discover-drawer-shell .info-label {
    color: #94a3b8;
}
.master-detail-root--discover .info-value,
.discover-drawer-shell .info-value {
    color: #e2e8f0;
    font-weight: 600;
}
.master-detail-root--discover .tag,
.discover-drawer-shell .tag {
    border: 1px solid rgba(100, 116, 139, 0.58);
    color: #cbd5e1;
    background: rgba(30, 41, 59, 0.58);
}
.master-detail-root--discover .perk-section-title,
.discover-drawer-shell .perk-section-title {
    margin-bottom: 0.7rem;
    padding: 0 0 0.45rem;
    border: 0;
    border-bottom: 1px solid rgba(71, 85, 105, 0.45);
}
.master-detail-root--discover .perk-subsection-title,
.discover-drawer-shell .perk-subsection-title {
    padding: 0;
    border: 0;
    color: #94a3b8;
    background: transparent;
}
.master-detail-root--discover .perk-segment > h4,
.discover-drawer-shell .perk-segment > h4 {
    padding: 0;
    border: 0;
    color: #cbd5e1;
    background: transparent;
}
.master-detail-root--discover .earn-footnotes,
.discover-drawer-shell .earn-footnotes,
.master-detail-root--discover .perk-rate-row,
.discover-drawer-shell .perk-rate-row {
    border-color: rgba(71, 85, 105, 0.32);
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .discover-drawer-shell > .discover-detail-root,
    .discover-drawer-shell > .discover-comparison-root {
        transition: none;
    }
}

/* Simplified Discover comparison: explicit CTA, static desktop-only secondary pane. */
.master-detail-root--discover .perk-section-title,
.discover-drawer-shell .perk-section-title {
    display: flex;
    min-height: 2.25rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 0.55rem;
    background: rgba(30, 41, 59, 0.58);
}
.master-detail-root--discover .perk-section-title,
.discover-drawer-shell .perk-section-title {
    border-left: 1px solid rgba(51, 65, 85, 0.72);
}
.master-detail-root--discover .perk-bonus-container,
.discover-drawer-shell .perk-bonus-container {
    margin-top: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 0.7rem;
    background: rgba(2, 6, 23, 0.38);
}
.master-detail-root--discover .perk-bonus-container .perk-segment,
.discover-drawer-shell .perk-bonus-container .perk-segment {
    margin: 0;
}
.master-detail-root--discover .perk-bonus-container .perk-segment + .perk-segment,
.discover-drawer-shell .perk-bonus-container .perk-segment + .perk-segment {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(71, 85, 105, 0.35);
}

@media (min-width: 1100px) {
    .discover-drawer-shell > .discover-detail-root {
        position: fixed;
        inset: 5.5rem 1.5rem 1.5rem auto;
        width: min(52rem, 42vw);
    }
    .discover-drawer-shell > .discover-comparison-root {
        position: fixed;
        inset: 5.5rem auto 1.5rem 1.5rem;
        width: min(52rem, 42vw);
        display: block;
        transform: none;
        transition: none;
    }
    .discover-drawer-shell > .discover-comparison-root[hidden] {
        display: none;
    }
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content],
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content] > .discover-detail-shell,
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content] .discover-detail {
        height: 100%;
        min-height: 0;
    }
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content] .discover-detail {
        overflow-y: auto;
    }
    .discover-drawer-shell > .discover-comparison-root .comparison-close {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 3;
        min-height: 2.25rem;
        padding: 0.35rem 0.65rem;
        border: 1px solid rgba(100, 116, 139, 0.65);
        border-radius: 0.45rem;
        color: var(--text-secondary);
        background: rgba(2, 6, 23, 0.82);
        cursor: pointer;
    }
    .discover-drawer-shell > .discover-comparison-root .comparison-close:hover,
    .discover-drawer-shell > .discover-comparison-root .comparison-close:focus-visible {
        border-color: var(--accent-soft);
        color: var(--text);
    }
}

@media (max-width: 1099px) {
    .discover-drawer-shell > .discover-detail-root,
    .discover-drawer-shell > .discover-comparison-root {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        transform: none !important;
        transition: none !important;
    }
    .discover-drawer-shell > .discover-comparison-root {
        display: none !important;
    }
    .discover-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .discover-detail-root .discover-detail {
        max-width: 58rem;
        margin-inline: auto;
    }
}

/* Discover drawer redesign: shared cards and one desktop stacking contract. */
.master-detail-root--discover .content-section {
    margin: 0 0 0.85rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.42);
}
.master-detail-root--discover .content-section:last-child { margin-bottom: 0; }
.master-detail-root--discover .content-section > .catalog-subhead {
    margin: 0 0 0.65rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.master-detail-root--discover .content-section .info-table {
    border-color: rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.2);
}
.master-detail-root--discover .perk-section.content-section {
    margin: 0;
}
.master-detail-root--discover .perk-section-title {
    margin: 0 0 0.7rem;
    padding: 0 0 0.45rem 0.7rem;
    border: 0;
    border-left: 2px solid var(--accent);
    border-radius: 0;
    background: transparent;
}
.master-detail-root--discover .perk-subsection-title,
.master-detail-root--discover .perk-segment > h4 {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.master-detail-root--discover .perk-subsection-title {
    margin: 1rem 0 0.45rem;
    padding: 0;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.master-detail-root--discover .perk-segment > h4 {
    margin: 0.9rem 0 0.35rem;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}
@media (min-width: 1100px) {
    .discover-detail-columns--drawer > .discover-detail-root,
    .discover-detail-columns > .discover-detail-root {
        position: fixed;
        z-index: 20;
        inset: 5.5rem 1.5rem 1.5rem auto;
        width: min(52rem, 42vw);
    }
    .discover-detail-columns--drawer > .discover-comparison-root,
    .discover-detail-columns > .discover-comparison-root {
        position: fixed;
        z-index: 19;
        inset: 5.5rem 1.5rem 1.5rem auto;
        display: block;
        width: min(52rem, 42vw);
        overflow: visible;
        transform: translateX(-3rem);
        transition: transform 240ms var(--ease-soft), opacity 240ms var(--ease-soft);
        transition: transform 220ms var(--ease-soft), opacity 220ms var(--ease-soft);
    }
    .discover-detail-columns--drawer > .discover-comparison-root.is-open,
    .discover-detail-columns > .discover-comparison-root.is-open {
        transform: translateX(calc(-100% - 1rem));
    }
    .discover-detail-columns--drawer > .discover-comparison-root[hidden],
    .discover-detail-columns > .discover-comparison-root[hidden] {
        display: none;
    }
    .discover-comparison-root > [data-comparison-content],
    .discover-comparison-root > [data-comparison-content] > .discover-detail-shell {
        height: 100%;
        min-height: 0;
    }
    .discover-comparison-root > [data-comparison-content] > .discover-detail-shell {
        overflow: hidden;
    }
    .discover-comparison-root > [data-comparison-content] .discover-detail.detail-surface {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
    }
    .comparison-exposed-edge {
        position: absolute;
        z-index: 21;
        top: 50%;
        left: 0;
        display: grid;
        width: 3rem;
        min-height: 8rem;
        place-items: center;
        gap: 0.55rem;
        padding: 0.7rem 0.45rem;
        border: 1px solid #334155;
        border-left: 0;
        border-radius: 0 0.85rem 0.85rem 0;
        color: var(--text-secondary);
        background: #0f172a;
        cursor: pointer;
        transform: translateY(-50%);
        writing-mode: vertical-lr;
    }
}

@media (max-width: 1099px) {
    .discover-detail-columns--drawer > .discover-comparison-root,
    .discover-detail-columns > .discover-comparison-root,
    .comparison-exposed-edge {
        display: none !important;
    }
}

/* Repair the prefetched peek state and refine Discover hierarchy. */
.discover-detail-columns--drawer > .discover-comparison-root.is-prefetched,
.discover-detail-columns > .discover-comparison-root.is-prefetched {
    display: block;
    transform: translateX(-3rem);
}
.discover-detail-columns--drawer > .discover-comparison-root.is-prefetched .comparison-exposed-edge,
.discover-detail-columns > .discover-comparison-root.is-prefetched .comparison-exposed-edge {
    display: grid;
}
.comparison-exposed-edge {
    transform: translateY(-50%);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.32);
}
.earn-rate-block .earn-target-switch {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem;
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.62);
}
.earn-rate-block .earn-target-switch button {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.42rem 0.85rem;
    color: var(--muted);
    background: transparent;
}
.earn-rate-block .earn-target-switch button:hover {
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--text);
}
.earn-rate-block .earn-target-switch button.active {
    border-color: rgba(71, 85, 105, 0.9);
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}
.earn-rate-block .earn-target-switch .tab-pill-indicator { display: none; }
.earn-rate-block .earn-target-switch label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}
.earn-rate-block .earn-target-switch select {
    min-width: 12rem;
    border: 1px solid rgba(71, 85, 105, 0.9);
    border-radius: 0.55rem;
    padding: 0.42rem 2rem 0.42rem 0.7rem;
    color: var(--text);
    background: rgba(15, 23, 42, 0.9);
    font: inherit;
}
.master-detail-root--discover .perk-section-title,
.master-detail-root--discover .perk-subsection-title,
.master-detail-root--discover .perk-segment > h4 {
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
}
.master-detail-root--discover .perk-section-title {
    margin: 0 0 0.7rem;
    padding: 0 0 0.45rem 0.7rem;
    border-left: 2px solid var(--accent);
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.3;
}
.master-detail-root--discover .perk-subsection-title {
    display: block;
    margin: 1rem 0 0.45rem;
    padding: 0.42rem 0.65rem;
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-left: 2px solid rgba(100, 116, 139, 0.75);
    color: var(--muted);
    background: rgba(2, 6, 23, 0.72);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.35;
    text-transform: uppercase;
}
.master-detail-root--discover .perk-subsection-title--statement {
    border-left-color: rgba(100, 116, 139, 0.75);
    color: var(--muted);
    background: rgba(2, 6, 23, 0.72);
}
.master-detail-root--discover .perk-segment > h4 {
    margin: 0.9rem 0 0.35rem;
    padding: 0.3rem 0.55rem;
    border-radius: 0.35rem;
    color: var(--text-secondary);
    background: rgba(2, 6, 23, 0.46);
    font-size: 0.82rem;
    font-weight: 700;
}
@media (max-width: 1099px) {
    .discover-detail-columns--drawer > .discover-comparison-root.is-prefetched,
    .discover-detail-columns > .discover-comparison-root.is-prefetched {
        display: none !important;
    }
}

/* Final stacked comparison and shared tab contracts. */
.master-detail-root--discover > .discover-detail-shell { overflow: hidden; }
.master-detail-root--discover > .discover-detail-shell > .discover-detail.detail-surface {
    block-size: 100%;
    min-block-size: 0;
}
.discover-detail-columns--drawer > .discover-comparison-root,
.discover-detail-columns > .discover-comparison-root {
    position: fixed;
    z-index: 19;
    inset: 5.5rem 1.5rem 1.5rem auto;
    display: block;
    width: min(52rem, 42vw);
    overflow: visible;
    transform: translateX(-3rem);
    transition: transform 220ms var(--ease-soft), opacity 220ms var(--ease-soft);
}
.discover-detail-columns--drawer > .discover-comparison-root[hidden],
.discover-detail-columns > .discover-comparison-root[hidden] { display: none; }
.discover-detail-columns--drawer > .discover-detail-root,
.discover-detail-columns > .discover-detail-root {
    position: fixed;
    z-index: 20;
    inset: 5.5rem 1.5rem 1.5rem auto;
    width: min(52rem, 42vw);
}
.discover-comparison-root > [data-comparison-content],
.discover-comparison-root > [data-comparison-content] > .discover-detail-shell {
    height: 100%;
    min-height: 0;
}
.discover-comparison-root > [data-comparison-content] > .discover-detail-shell { overflow: hidden; }
.discover-comparison-root > [data-comparison-content] .discover-detail.detail-surface {
    block-size: 100%;
    min-block-size: 0;
    overflow-y: auto;
}
.comparison-exposed-edge {
    position: absolute;
    z-index: 21;
    top: 50%;
    left: 0;
    display: grid;
    width: 3rem;
    min-height: 8rem;
    place-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.45rem;
    border: 1px solid #334155;
    border-left: 0;
    border-radius: 0 0.85rem 0.85rem 0;
    color: var(--text-secondary);
    background: #0f172a;
    cursor: pointer;
    transform: translateY(-50%);
    writing-mode: vertical-lr;
}
.comparison-exposed-edge:hover,
.comparison-exposed-edge:focus-visible { border-color: var(--accent-soft); color: var(--text); }
.comparison-exposed-edge[hidden] { display: none !important; }
.comparison-edge-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: rotate(180deg);
}
.comparison-edge-chevron { font-size: 1.2rem; line-height: 1; }
.discover-tabs .tab-pill-indicator,
.earn-target-switch .tab-pill-indicator {
    position: absolute;
    bottom: 0.2rem;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms var(--ease-soft), width 180ms var(--ease-soft), opacity 180ms ease;
}
.discover-tabs .tab-chip,
.earn-target-switch button {
    border-color: transparent;
    border-radius: 999px;
    background: transparent;
}
.discover-tabs .tab-chip.active,
.earn-target-switch button.active {
    border-color: transparent;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}
.earn-target-switch { position: relative; align-items: center; }
.earn-target-switch .tab-pill-indicator { bottom: 0; }
@media (max-width: 1099px) {
    .discover-comparison-root,
    .comparison-exposed-edge { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .discover-comparison-root,
    .discover-tabs .tab-pill-indicator,
    .earn-target-switch .tab-pill-indicator { transition: none; }
}

/* Discover interaction polish: one final contract wins over legacy overrides. */
.master-detail-root--discover .comparison-rail {
    top: 50%;
    bottom: auto;
    left: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 2.5rem;
    min-height: 8rem;
    height: auto;
    padding: 0.7rem 0.45rem;
    border: 1px solid #334155;
    border-left: 0;
    border-radius: 0 0.85rem 0.85rem 0;
    background: #0f172a;
    transform: translate(-100%, -50%);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    writing-mode: horizontal-tb;
}
.master-detail-root--discover .comparison-rail:hover,
.master-detail-root--discover .comparison-rail:focus-visible {
    border-color: var(--accent-soft);
    box-shadow: 0 0 1.25rem rgba(16, 185, 129, 0.18);
    transform: translate(calc(-100% - 0.25rem), -50%);
}
.master-detail-root--discover .comparison-rail-label {
    font-size: 0.68rem;
    line-height: 1;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}
.master-detail-root--discover .comparison-rail-chevron {
    display: block;
    font-size: 1.05rem;
    line-height: 1;
    transform: none;
}
.discover-detail-columns--drawer.has-discover-comparison > .discover-comparison-root,
.discover-detail-columns.has-discover-comparison > .discover-comparison-root {
    position: fixed;
    z-index: 19;
    inset: 5.5rem auto 1.5rem calc(100% - min(52rem, 42vw) - 1.5rem - min(52rem, 42vw));
    display: block;
    width: min(52rem, 42vw);
    animation: comparison-drawer-slide-in 220ms ease both;
}
.discover-detail-columns--drawer.has-discover-comparison > .discover-detail-root,
.discover-detail-columns.has-discover-comparison > .discover-detail-root {
    position: fixed;
    z-index: 20;
    inset: 5.5rem 1.5rem 1.5rem auto;
    width: min(52rem, 42vw);
}
.discover-detail-columns--drawer.has-discover-comparison > .discover-comparison-root > .discover-detail-shell,
.discover-detail-columns.has-discover-comparison > .discover-comparison-root > .discover-detail-shell {
    border-radius: 1.5rem 0 0 1.5rem;
}
.discover-detail-columns--drawer.has-discover-comparison > .discover-detail-root > .discover-detail-shell,
.discover-detail-columns.has-discover-comparison > .discover-detail-root > .discover-detail-shell {
    border-radius: 0 1.5rem 1.5rem 0;
}
@keyframes comparison-drawer-slide-in {
    from { opacity: 0.7; transform: translateX(1.5rem); }
    to { opacity: 1; transform: none; }
}

.drawer-card-picker-trigger {
    list-style: none;
}
.drawer-card-picker-trigger::-webkit-details-marker { display: none; }
.drawer-card-picker-chevron {
    position: relative;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    color: var(--accent);
    transition: transform 200ms ease;
}
.drawer-card-picker-chevron::before {
    width: 0.48rem;
    height: 0.48rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: translateY(-0.12rem) rotate(45deg);
}
.drawer-card-picker[open] .drawer-card-picker-chevron {
    transform: rotate(180deg);
}

.discover-tabbed {
    margin-top: 1rem;
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 0.9rem;
    background: rgba(15, 23, 42, 0.3);
    overflow: hidden;
}
.master-detail-root--discover .discover-tabbed,
.discover-detail-root .discover-tabbed,
.discover-comparison-root .discover-tabbed {
    margin-inline: 0;
}
.master-detail-root--discover .discover-tabs,
.discover-detail-root .discover-tabs,
.discover-comparison-root .discover-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    gap: 0;
    margin: 0;
    padding: 0.55rem 0.65rem 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.94);
    overflow-x: auto;
    scrollbar-width: none;
}
.master-detail-root--discover .discover-tabs::-webkit-scrollbar,
.discover-detail-root .discover-tabs::-webkit-scrollbar,
.discover-comparison-root .discover-tabs::-webkit-scrollbar {
    display: none;
}
.master-detail-root--discover .discover-tabs .tab-chip,
.discover-detail-root .discover-tabs .tab-chip,
.discover-comparison-root .discover-tabs .tab-chip {
    position: relative;
    flex: 0 0 auto;
    min-height: 2.65rem;
    margin: 0 0 -1px;
    padding: 0.65rem 1rem 0.7rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 0.7rem 0.7rem 0 0;
    color: #94a3b8;
    background: rgba(30, 41, 59, 0.42);
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.master-detail-root--discover .discover-tabs .tab-chip + .tab-chip,
.discover-detail-root .discover-tabs .tab-chip + .tab-chip,
.discover-comparison-root .discover-tabs .tab-chip + .tab-chip {
    margin-left: 0.25rem;
}
.master-detail-root--discover .discover-tabs .tab-chip:hover,
.discover-detail-root .discover-tabs .tab-chip:hover,
.discover-comparison-root .discover-tabs .tab-chip:hover {
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.7);
}
.master-detail-root--discover .discover-tabs .tab-chip.active,
.discover-detail-root .discover-tabs .tab-chip.active,
.discover-comparison-root .discover-tabs .tab-chip.active {
    border-color: rgba(51, 65, 85, 0.72);
    color: #34d399;
    background: rgba(15, 23, 42, 0.98);
}
.discover-tabbed > .tab-panel {
    margin: 0;
    padding: 1rem;
    border: 0;
    background: rgba(15, 23, 42, 0.34);
}
.discover-tabbed > .tab-panel[hidden] { display: none; }

@media (max-width: 1099px) {
    .discover-detail-columns--drawer.has-discover-comparison > .discover-comparison-root,
    .discover-detail-columns.has-discover-comparison > .discover-comparison-root,
    .discover-detail-columns--drawer.has-discover-comparison > .discover-detail-root,
    .discover-detail-columns.has-discover-comparison > .discover-detail-root {
        inset: 5.5rem 1.5rem 1.5rem;
        width: auto;
    }
    .discover-detail-columns--drawer.has-discover-comparison > .discover-comparison-root,
    .discover-detail-columns.has-discover-comparison > .discover-comparison-root {
        display: none;
    }
}
@media (max-width: 899px) {
    .drawer-card-picker-trigger {
        width: 100%;
        text-align: left;
    }
}
@media (prefers-reduced-motion: reduce) {
    .master-detail-root--discover .comparison-rail,
    .drawer-card-picker-chevron,
    .discover-detail-columns.has-discover-comparison > .discover-comparison-root {
        transition: none;
        animation: none;
    }
}

/* Drawer card picker and final comparison geometry. */
.drawer-card-picker {
    position: relative;
    z-index: 6;
    margin: 0 0 0.85rem;
}
.drawer-card-picker-trigger {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(71, 85, 105, 0.8);
    border-radius: 0.8rem;
    color: var(--text);
    background: rgba(15, 23, 42, 0.72);
    cursor: pointer;
    list-style: none;
}
.drawer-card-picker-trigger::-webkit-details-marker { display: none; }
.drawer-card-picker-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.drawer-card-picker-current {
    overflow: hidden;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer-card-picker-chevron { color: var(--accent); }
.drawer-card-picker-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    left: 0;
    max-height: min(28rem, 65vh);
    overflow-y: auto;
    padding: 0.65rem;
    border: 1px solid rgba(71, 85, 105, 0.9);
    border-radius: 0.85rem;
    background: #020617;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.42);
}
.drawer-card-picker-search { display: block; margin: 0 0 0.55rem; }
.drawer-card-picker-search input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #334155;
    border-radius: 0.65rem;
    color: var(--text);
    background: #0f172a;
}
.card-picker-bank {
    padding: 0.35rem 0 0.55rem;
    border-top: 1px solid rgba(51, 65, 85, 0.55);
}
.card-picker-bank:first-child { border-top: 0; padding-top: 0; }
.card-picker-bank-label {
    margin: 0 0 0.35rem;
    padding: 0 0.3rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.card-picker-bank ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.drawer-card-picker-option {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    min-height: 44px;
    padding: 0.65rem;
    border-radius: 0.65rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
    text-decoration: none;
}
.drawer-card-picker-option .card-picker-thumb,
.drawer-card-picker-option .card-picker-thumb img,
.drawer-card-picker-option .card-picker-thumb .card-img-placeholder {
    width: 48px;
    aspect-ratio: 1.586 / 1;
    object-fit: contain;
    border-radius: 0.45rem;
}
.card-picker-option-name {
    overflow: hidden;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer-card-picker-option:hover,
.drawer-card-picker-option:focus-visible,
.drawer-card-picker-option.active {
    color: var(--text);
    background: rgba(16, 185, 129, 0.16);
}
.master-detail-root--discover .comparison-rail {
    top: 0;
    bottom: 0;
    left: 0;
    width: 2.5rem;
    min-height: 0;
    height: 100%;
    border-right: 0;
    border-radius: 1rem 0 0 1rem;
    transform: translateX(-100%);
}
.master-detail-root--discover .comparison-rail:hover,
.master-detail-root--discover .comparison-rail:focus-visible {
    transform: translateX(calc(-100% - 0.25rem));
}
.master-detail-root--discover .comparison-rail-label {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}
.discover-detail-columns.has-discover-comparison > .discover-comparison-root {
    position: fixed;
    z-index: 19;
    inset: 5.5rem auto 1.5rem calc(100% - min(52rem, 42vw) - 1.5rem - min(52rem, 42vw));
    display: block;
    width: min(52rem, 42vw);
    animation: comparison-drawer-slide-in 220ms ease both;
}
.discover-detail-columns.has-discover-comparison > .discover-detail-root {
    position: fixed;
    z-index: 20;
    inset: 5.5rem 1.5rem 1.5rem auto;
    width: min(52rem, 42vw);
}
.discover-detail-columns.has-discover-comparison > .discover-comparison-root > .discover-detail-shell {
    border-radius: 1.5rem 0 0 1.5rem;
}
.discover-detail-columns.has-discover-comparison > .discover-detail-root > .discover-detail-shell {
    border-radius: 0 1.5rem 1.5rem 0;
}
@keyframes comparison-drawer-slide-in {
    from { opacity: 0; transform: translateX(2rem); }
    to { opacity: 1; transform: none; }
}
.listing-sort-control {
    align-items: center;
    min-height: 2.75rem;
}
.listing-sort-control .filter-label {
    margin: 0;
    line-height: 1;
}
.listing-sort-select {
    min-height: 2.75rem;
}
@media (max-width: 720px) {
    .drawer-card-picker-menu { position: fixed; top: auto; right: 1rem; bottom: 1rem; left: 1rem; max-height: 65vh; }
    .discover-detail-columns.has-discover-comparison > .discover-comparison-root,
    .discover-detail-columns.has-discover-comparison > .discover-detail-root {
        inset: 4.75rem 0.75rem 0.75rem;
        width: auto;
    }
    .discover-detail-columns.has-discover-comparison > .discover-comparison-root { display: none; }
    .listing-sort-control { width: 100%; }
    .listing-sort-control .listing-sort-select { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .discover-detail-columns.has-discover-comparison > .discover-comparison-root { animation: none; }
}

/* Final visual contract for Discover comparison and tabs. */
body .master-detail-root--discover .comparison-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 2.5rem;
    min-height: 0;
    padding: 1rem 0.625rem;
    overflow: hidden;
    border-radius: 0.75rem 0 0 0.75rem;
    background: #0f172a;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    writing-mode: horizontal-tb;
}
body .master-detail-root--discover .comparison-rail:hover,
body .master-detail-root--discover .comparison-rail:focus-visible {
    background: #1e293b;
    transform: translateX(calc(-100% - 0.25rem));
}
body .master-detail-root--discover .comparison-rail-chevron,
body .discover-detail-root .comparison-rail-chevron {
    display: block;
    order: -1;
    font-size: 1rem;
    line-height: 1;
    writing-mode: horizontal-tb;
    transform: none !important;
}
body .master-detail-root--discover .comparison-rail-label,
body .discover-detail-root .comparison-rail-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    writing-mode: vertical-lr;
    text-transform: uppercase;
    transform: rotate(180deg);
}
body .master-detail-root--discover .discover-tabs,
body .discover-comparison-root .discover-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.375rem 0.25rem;
    scrollbar-width: none;
}
body .master-detail-root--discover .discover-tabs::-webkit-scrollbar,
body .discover-comparison-root .discover-tabs::-webkit-scrollbar {
    display: none;
}
body .master-detail-root--discover .discover-tabs .tab-chip,
body .discover-comparison-root .discover-tabs .tab-chip {
    flex: 0 0 auto;
    flex-shrink: 0;
    min-height: 2.25rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid transparent;
    color: #94a3b8;
    background: transparent;
    transition: all 200ms ease;
}
body .master-detail-root--discover .discover-tabs .tab-chip:hover,
body .discover-comparison-root .discover-tabs .tab-chip:hover {
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.5);
}
body .master-detail-root--discover .discover-tabs .tab-chip.active,
body .discover-comparison-root .discover-tabs .tab-chip.active {
    border-color: #334155;
    color: #34d399;
    background: #1e293b;
}
.master-detail-root--discover .discover-detail-shell,
.master-detail-root--discover > .discover-detail-shell > .discover-detail.detail-surface {
    overflow: hidden;
}
.master-detail-root--discover > .discover-detail-shell > .discover-detail.detail-surface {
    overflow-y: auto;
}
.discover-detail-columns--drawer {
    position: relative;
}
.discover-detail-columns--drawer > .discover-comparison-root {
    display: none;
}
body .discover-comparison-root .discover-detail-shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(51, 65, 85, 0.9);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
}
body .discover-comparison-root .discover-detail-shell > .discover-detail.detail-surface {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 0;
    border-radius: inherit;
}
.discover-detail-columns--drawer.has-discover-comparison > .discover-comparison-root {
    display: block;
    position: fixed;
    z-index: 20;
    inset: 5.5rem auto 1.5rem 1.5rem;
    width: min(52rem, 42vw);
    animation: comparison-slide-in 220ms ease both;
}
.discover-detail-columns--drawer.has-discover-comparison > .discover-detail-root {
    right: 1.5rem;
    left: auto;
    width: min(52rem, 42vw);
}
.discover-comparison-root > .discover-detail-shell {
    height: 100%;
}
.discover-comparison-root .discover-detail-shell > .discover-detail.detail-surface {
    height: 100%;
}
.discover-bank-card .card-img-slot.has-img,
.discover-bank-card .card-img-slot.has-img .discover-card-img {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.discover-bank-card .card-img-slot.has-img .discover-card-img {
    object-fit: contain;
}
.cms-placeholder[hidden] {
    display: none !important;
}
@media (max-width: 1099px) {
    .discover-detail-columns--drawer.has-discover-comparison > .discover-comparison-root,
    .discover-detail-columns--drawer.has-discover-comparison > .discover-detail-root {
        inset: 5.5rem 1.5rem 1.5rem;
        width: auto;
    }
    .discover-detail-columns--drawer.has-discover-comparison > .discover-comparison-root {
        display: none;
    }
}
@media (max-width: 899px) {
    .master-detail-root--discover .comparison-rail {
        display: none !important;
    }
}

.master-detail-root:not(.master-detail-root--discover) > .master-detail-panel {
    block-size: 100%;
    min-block-size: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.master-detail-root--discover {
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.master-detail-root--discover > .discover-detail-shell {
    block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
}
.master-detail-root--discover > .discover-detail-shell > .discover-detail.detail-surface {
    block-size: 100%;
    min-block-size: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.master-detail-root--discover .discover-tabs {
    position: sticky;
    inset-block-start: 0;
    z-index: 4;
    padding-block: 0.4rem;
}
.discover-detail-columns.has-discover-comparison {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}
.discover-detail-columns.has-discover-comparison > .discover-comparison-root {
    display: block;
    order: -1;
    min-width: 0;
    animation: comparison-slide-in 220ms ease both;
}
@keyframes comparison-slide-in {
    from { opacity: 0; transform: translateX(1rem); }
    to { opacity: 1; transform: none; }
}
.blog-detail-prose {
    max-width: 44rem;
    margin-inline: auto;
    line-height: 1.75;
}
@media (max-width: 1099px) {
    .discover-detail-columns.has-discover-comparison {
        grid-template-columns: 1fr;
    }
    .discover-detail-columns.has-discover-comparison > .discover-comparison-root {
        order: 0;
    }
}
@media (max-width: 899px) {
    .master-detail-root--discover .comparison-rail,
    .discover-comparison-root {
        display: none !important;
    }
}

/* Listing controls and progressive pagination. */
.listing-sort-control {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}
.listing-load-more {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
}
@media (max-width: 720px) {
    .listing-toolbar-actions .listing-sort-control {
        flex: 1 1 auto;
        min-width: 0;
    }
    .listing-toolbar-actions .listing-sort-select {
        width: 100%;
        min-width: 0;
    }
}

/* Authoritative drawer contract: scrolling belongs to the inner panel;
 * comparison and the visible handle remain outside the clipped shell. */
.master-detail-root:not(.master-detail-root--discover) {
    overflow: hidden;
    padding: 0;
}
.master-detail-root:not(.master-detail-root--discover) > .master-detail-panel {
    block-size: 100%;
    min-block-size: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(1.25rem, 3vw, 2rem);
}
.master-detail-root--discover {
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.master-detail-root--discover > .discover-detail-shell {
    block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
    border: 1px solid rgba(51, 65, 85, 0.9);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
}
.master-detail-root--discover > .discover-detail-shell > .discover-detail.detail-surface {
    block-size: 100%;
    min-block-size: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(1rem, 2.5vw, 1.75rem);
    border: 0;
    border-radius: inherit;
    background: transparent;
}
.master-detail-root--discover .discover-tabs {
    position: sticky;
    inset-block-start: 0;
    z-index: 4;
    margin-inline: -0.25rem;
    padding: 0.4rem 0.25rem;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.99) 72%, rgba(2, 6, 23, 0.78));
}
.master-detail-root--discover .comparison-rail {
    position: absolute;
    z-index: 8;
    inset-block-start: 33.333%;
    inset-inline-start: 0;
    display: inline-flex;
    min-block-size: 8rem;
    padding: 0.65rem 0.45rem;
    border: 1px solid #334155;
    border-inline-start: 0;
    border-radius: 0 0.9rem 0.9rem 0;
    background: #0f172a;
    transform: translateX(-100%);
}
.master-detail-root--discover .comparison-rail:hover,
.master-detail-root--discover .comparison-rail:focus-visible {
    transform: translateX(calc(-100% - 0.25rem));
}
.discover-detail-columns.has-discover-comparison {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}
.discover-detail-columns.has-discover-comparison > .discover-comparison-root {
    display: block;
    order: -1;
    min-width: 0;
    animation: comparison-slide-in 220ms ease both;
}
.discover-detail-columns.has-discover-comparison > .discover-detail-root {
    min-width: 0;
}
@keyframes comparison-slide-in {
    from { opacity: 0; transform: translateX(1rem); }
    to { opacity: 1; transform: none; }
}
.blog-detail-prose {
    max-width: 44rem;
    margin-inline: auto;
    line-height: 1.75;
}
.master-detail-page--blog .master-detail-root,
.master-detail-page--promo .master-detail-root {
    width: min(52rem, 58vw);
}
@media (max-width: 1099px) {
    .discover-detail-columns.has-discover-comparison {
        grid-template-columns: 1fr;
    }
    .discover-detail-columns.has-discover-comparison > .discover-comparison-root {
        order: 0;
    }
}
@media (max-width: 899px) {
    .master-detail-root--discover .comparison-rail,
    .discover-comparison-root {
        display: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .discover-detail-columns.has-discover-comparison > .discover-comparison-root {
        animation: none;
    }
}

/* Card drawer edge handle and hero fallback. */
.master-detail-root--discover .discover-hero-slot.no-img {
    display: none;
}
.master-detail-root--discover .comparison-rail {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 0;
    min-height: 8rem;
    padding: 0.65rem 0.5rem;
    border: 1px solid #1e293b;
    border-right: 0;
    border-radius: 0.75rem 0 0 0.75rem;
    background: #020617;
    transform: translate(-100%, -50%);
    writing-mode: vertical-lr;
}
.master-detail-root--discover .comparison-rail:hover,
.master-detail-root--discover .comparison-rail:focus-visible {
    transform: translate(calc(-100% - 0.25rem), -50%);
}

/* Final Discover comparison contract: explicit CTA and no exposed edge. */
@media (min-width: 1100px) {
    .discover-drawer-shell > .discover-detail-root {
        position: fixed;
        inset: 5.5rem 1.5rem 1.5rem auto;
        width: min(52rem, 42vw);
    }
    .discover-drawer-shell > .discover-comparison-root {
        position: fixed;
        inset: 5.5rem auto 1.5rem 1.5rem;
        display: block;
        width: min(52rem, 42vw);
        transform: none;
        transition: none;
    }
    .discover-drawer-shell > .discover-comparison-root[hidden] {
        display: none;
    }
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content],
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content] > .discover-detail-shell,
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content] .discover-detail {
        height: 100%;
        min-height: 0;
    }
    .discover-drawer-shell > .discover-comparison-root > [data-comparison-content] .discover-detail {
        overflow-y: auto;
    }
}

@media (max-width: 1099px) {
    .discover-drawer-shell > .discover-detail-root,
    .discover-drawer-shell > .discover-comparison-root {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        transform: none !important;
        transition: none !important;
    }
    .discover-drawer-shell > .discover-comparison-root,
    .discover-drawer-shell > .discover-comparison-root .comparison-exposed-edge {
        display: none !important;
    }
    .discover-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .discover-detail-root .discover-detail {
        max-width: 58rem;
        margin-inline: auto;
    }
}

.master-detail-root--discover .perk-section-title,
.discover-drawer-shell .perk-section-title {
    display: flex;
    min-height: 2.25rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 0.55rem;
    background: rgba(30, 41, 59, 0.58);
}
.master-detail-root--discover .perk-bonus-container,
.discover-drawer-shell .perk-bonus-container {
    margin-top: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 0.7rem;
    background: rgba(2, 6, 23, 0.38);
}
.master-detail-root--discover .perk-bonus-container .perk-segment,
.discover-drawer-shell .perk-bonus-container .perk-segment {
    margin: 0;
}
.master-detail-root--discover .perk-bonus-container .perk-segment + .perk-segment,
.discover-drawer-shell .perk-bonus-container .perk-segment + .perk-segment {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(71, 85, 105, 0.35);
}
.master-detail-root--discover .comparison-rail-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}
.master-detail-root--discover .comparison-rail-chevron {
    font-size: 1.15rem;
    line-height: 1;
}

/* Discover refinement: keep the edge toggle outside the clipped surface. */
.master-detail-root--discover {
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.master-detail-root--discover > .discover-detail-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: visible;
    border: 1px solid rgba(51, 65, 85, 0.9);
    border-radius: 1.5rem;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98)),
        var(--bg);
    box-shadow: -1rem 2rem 4rem rgba(0, 0, 0, 0.42), 0 0 2rem rgba(16, 185, 129, 0.08);
}
.master-detail-root--discover > .discover-detail-shell > .discover-detail.detail-surface {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(1rem, 2.5vw, 1.75rem);
    border: 0;
    border-radius: 1.5rem;
    background: transparent;
    box-shadow: none;
    scrollbar-color: #334155 transparent;
    scrollbar-width: thin;
}
.master-detail-root--discover > .discover-detail-shell > .discover-detail.detail-surface::-webkit-scrollbar {
    width: 6px;
}
.master-detail-root--discover > .discover-detail-shell > .discover-detail.detail-surface::-webkit-scrollbar-track {
    background: transparent;
}
.master-detail-root--discover > .discover-detail-shell > .discover-detail.detail-surface::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: #334155;
}
.master-detail-root--discover > .discover-detail-shell > .discover-detail.detail-surface::-webkit-scrollbar-thumb:hover {
    background: #475569;
}
.master-detail-root--discover .comparison-rail {
    position: absolute;
    z-index: 3;
    top: 33.333%;
    left: 0;
    display: inline-flex;
    min-height: 8rem;
    padding: 0.65rem 0.45rem;
    border: 1px solid #334155;
    border-left: 0;
    border-radius: 0 0.9rem 0.9rem 0;
    background: #0f172a;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.26);
    transform: translateX(-100%);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    writing-mode: vertical-lr;
}
.master-detail-root--discover .comparison-rail:hover,
.master-detail-root--discover .comparison-rail:focus-visible {
    border-color: var(--accent-soft);
    box-shadow: 0 0 1.25rem rgba(16, 185, 129, 0.18);
    transform: translateX(calc(-100% - 0.25rem));
}
.master-detail-root--discover .comparison-rail[aria-expanded="true"] {
    border-color: var(--accent-soft);
}
.master-detail-root--discover .comparison-rail[aria-expanded="true"] .comparison-rail-chevron {
    transform: rotate(180deg);
}
.master-detail-root--discover .comparison-rail-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.master-detail-root--discover .comparison-rail-chevron {
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 180ms ease;
}
.discover-detail-shell {
    position: relative;
    min-width: 0;
}
.discover-detail-shell > .discover-detail.detail-surface {
    position: relative;
}
@media (max-width: 899px) {
    .master-detail-root--discover {
        overflow: visible;
    }
    .master-detail-root--discover > .discover-detail-shell {
        border-radius: 1rem;
    }
    .master-detail-root--discover > .discover-detail-shell > .discover-detail.detail-surface {
        border-radius: 1rem;
    }
    .master-detail-root--discover .comparison-rail {
        display: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .master-detail-root--discover .comparison-rail,
    .master-detail-root--discover .comparison-rail-chevron {
        transition: none;
    }
}

/* Real Discover card art sits directly in the composition; placeholders stay framed. */
.discover-catalog .card-img-slot.has-img,
.discover-catalog .card-img-slot.has-img .discover-card-img,
.discover-catalog .card-img-slot.has-img .card-img-placeholder,
.discover-catalog .catalog-card-thumb,
.discover-catalog .catalog-card-thumb .discover-card-img,
.discover-catalog .catalog-card-thumb .card-img-placeholder,
.discover-catalog .discover-hero-slot.has-img,
.discover-catalog .discover-hero-slot.has-img .discover-card-img {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.discover-catalog .card-img-slot.has-img .discover-card-img,
.discover-catalog .discover-hero-slot.has-img .discover-card-img {
    object-fit: contain;
}
.discover-grid .discover-grid-img:has(.card-img-slot.has-img) {
    background: transparent;
}
.discover-detail-shell .card-img-slot.has-img,
.discover-detail-shell .card-img-slot.has-img .discover-card-img,
.discover-detail-shell .discover-hero-slot.has-img,
.discover-detail-shell .discover-hero-slot.has-img .discover-card-img {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.discover-detail-shell .discover-hero-slot.has-img .discover-card-img {
    object-fit: contain;
}

/* Discover drawer shell, scroll treatment, and comparison edge toggle. */
.master-detail-root--discover {
    overflow: visible;
    padding: 0;
    border-color: rgba(51, 65, 85, 0.9);
    border-radius: 1.5rem;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98)),
        var(--bg);
    box-shadow: -1rem 2rem 4rem rgba(0, 0, 0, 0.42), 0 0 2rem rgba(16, 185, 129, 0.08);
}
.master-detail-root--discover > .discover-detail.detail-surface {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(1rem, 2.5vw, 1.75rem);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scrollbar-color: #334155 transparent;
    scrollbar-width: thin;
}
.master-detail-root--discover > .discover-detail.detail-surface::-webkit-scrollbar {
    width: 6px;
}
.master-detail-root--discover > .discover-detail.detail-surface::-webkit-scrollbar-track {
    background: transparent;
}
.master-detail-root--discover > .discover-detail.detail-surface::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: #334155;
}
.master-detail-root--discover > .discover-detail.detail-surface::-webkit-scrollbar-thumb:hover {
    background: #475569;
}
.master-detail-root--discover .comparison-rail {
    top: 33.333%;
    left: 0;
    display: inline-flex;
    min-height: 8rem;
    padding: 0.65rem 0.45rem;
    border: 1px solid #334155;
    border-left: 0;
    border-radius: 0 0.9rem 0.9rem 0;
    background: #0f172a;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.26);
    transform: translateX(-100%);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    writing-mode: vertical-lr;
}
.master-detail-root--discover .comparison-rail:hover,
.master-detail-root--discover .comparison-rail:focus-visible {
    border-color: var(--accent-soft);
    box-shadow: 0 0 1.25rem rgba(16, 185, 129, 0.18);
    transform: translateX(calc(-100% - 0.25rem));
}
.master-detail-root--discover .comparison-rail[aria-expanded="true"] {
    border-color: var(--accent-soft);
}
.master-detail-root--discover .comparison-rail[aria-expanded="true"] .comparison-rail-chevron {
    transform: rotate(180deg);
}
.master-detail-root--discover .comparison-rail-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.master-detail-root--discover .comparison-rail-chevron {
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 180ms ease;
}
.discover-detail { position: relative; }
@media (prefers-reduced-motion: reduce) {
    .master-detail-root--discover .comparison-rail,
    .master-detail-root--discover .comparison-rail-chevron {
        transition: none;
    }
}
@media (max-width: 899px) {
    .master-detail-root--discover {
        overflow: visible;
        padding: 0;
        border-radius: 1rem;
    }
    .master-detail-root--discover > .discover-detail.detail-surface {
        border-radius: 1rem;
    }
    .master-detail-root--discover .comparison-rail {
        display: none !important;
    }
}

.cms-aspect-16-9 {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
}

.cms-aspect-16-9.is-broken {
    display: none;
}

.promo-period-line { margin: 0 0 0.55rem; }
.detail-web-cta { margin: 0.5rem 0 0; }
.sticky-cta-row { width: 100%; margin: 0; }
.perk-fee-table { margin-bottom: 0.75rem; }
.perk-fee-heading {
    margin: 0.75rem 0 0.45rem;
    font-size: 0.95rem;
}
.perk-preline { white-space: pre-wrap; }
.perk-prose-follow { margin-top: 0.65rem; }
.perk-value { margin: 0 0 0.4rem; }
.perk-value-follow { margin-top: 0.65rem; }
.perk-value-compact { margin-bottom: 0.35rem; }
.perk-zero { margin: 0; }
.perk-conversion-intro { margin: 0 0 0.5rem; }
.perk-segment-follow { margin-top: 0.75rem; }
.perk-tier { margin-top: 0.45rem; }
.perk-tier-bottom { margin-bottom: 0.55rem; }
.perk-subsection-title--statement {
    margin-top: 1rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
}

.auth-footnote { margin: 0; text-align: center; }
.remember-label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    flex-direction: row;
    margin: 0 !important;
}
.auth-reset-link { font-size: 0.88rem; }
.redeem-status { border-color: rgba(52, 211, 153, 0.45); }
.redeem-code-input { text-transform: uppercase; }

.receipt-draft-section {
    padding-top: clamp(2.5rem, 6vw, 4rem);
    padding-bottom: clamp(3rem, 8vw, 5rem);
}
.receipt-draft-kicker { margin: 0 0 0.5rem; }
.receipt-draft-copy { margin: 0 0 1.5rem; line-height: 1.7; }
.receipt-draft-download { margin: 1rem 0 0; font-size: 0.85rem; color: var(--muted); }
.receipt-draft-id { text-align: center; margin-top: 1.25rem; font-size: 0.8rem; color: var(--muted); }
.receipt-draft-id code { color: var(--text-secondary); }

.invite-page {
    min-height: 100vh;
    margin: 0;
    padding: 2rem 1.25rem;
    background:
        radial-gradient(800px 400px at 15% -10%, rgba(52, 211, 153, 0.14) 0%, transparent 55%),
        linear-gradient(180deg, #0f172a 0%, #020617 100%);
    color: #f8fafc;
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}
.invite-card {
    max-width: 420px;
    margin: 3rem auto;
    padding: 1.75rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.invite-card h1 { margin: 0 0 0.75rem; font-size: 1.5rem; letter-spacing: -0.03em; }
.invite-card p { color: var(--muted); line-height: 1.65; }
.invite-card a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.25rem;
    padding: 0.75rem 1.35rem;
    border-radius: 0.875rem;
    background: linear-gradient(90deg, #34d399, #14b8a6);
    color: #022c22;
    font-weight: 600;
    text-decoration: none;
}
.invite-card a.btn:hover { box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); transform: translateY(-1px) scale(1.02); }
.invite-card code { padding: 0.15rem 0.45rem; border-radius: 0.4rem; background: rgba(255,255,255,0.08); color: #6ee7b7; }
.store-link { color: #6ee7b7; text-decoration: none; font-weight: 600; }
.store-link:hover { text-decoration: underline; }
.invite-store-note { margin-top: 1.5rem; font-size: 0.9rem; }

.hero-tertiary {
    margin: 0.85rem 0 0;
    font-size: 0.86rem;
    line-height: 1.55;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.hero-trust li {
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}

.hero-store-links {
    margin: 0.85rem 0 0;
    font-size: 0.88rem;
}

.hero-secondary-cta {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Discover drawer polish: clipped shells, stacked comparison, shared pill tracks. */
.master-detail-root--discover > .discover-detail-shell {
    overflow: hidden;
}
.master-detail-root--discover > .discover-detail-shell > .discover-detail.detail-surface {
    display: block;
    block-size: 100%;
    min-block-size: 0;
    overflow-y: auto;
}
.discover-detail-columns--drawer > .discover-comparison-root,
.discover-detail-columns > .discover-comparison-root {
    position: fixed;
    z-index: 19;
    inset: 5.5rem 1.5rem 1.5rem auto;
    display: block;
    width: min(52rem, 42vw);
    min-width: 0;
    overflow: visible;
    transform: translateX(-3rem);
    transition: transform 220ms var(--ease-soft), opacity 220ms var(--ease-soft);
}
.discover-detail-columns--drawer > .discover-comparison-root[hidden],
.discover-detail-columns > .discover-comparison-root[hidden] {
    display: none;
}
.discover-detail-columns--drawer > .discover-detail-root,
.discover-detail-columns > .discover-detail-root {
    position: fixed;
    z-index: 20;
    inset: 5.5rem 1.5rem 1.5rem auto;
    width: min(52rem, 42vw);
    min-width: 0;
}
.discover-comparison-root > [data-comparison-content] {
    height: 100%;
    min-height: 0;
}
.discover-comparison-root > [data-comparison-content] > .discover-detail-shell {
    height: 100%;
    overflow: hidden;
    border-radius: 1.5rem;
}
.discover-comparison-root > [data-comparison-content] .discover-detail.detail-surface {
    block-size: 100%;
    min-block-size: 0;
    overflow-y: auto;
}
.comparison-exposed-edge {
    position: absolute;
    z-index: 21;
    top: 50%;
    left: 0;
    display: grid;
    width: 3rem;
    min-height: 8rem;
    place-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.45rem;
    border: 1px solid #334155;
    border-left: 0;
    border-radius: 0 0.85rem 0.85rem 0;
    color: var(--text-secondary);
    background: #0f172a;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.26);
    cursor: pointer;
    transform: translateY(-50%);
    writing-mode: vertical-lr;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.comparison-exposed-edge:hover,
.comparison-exposed-edge:focus-visible {
    border-color: var(--accent-soft);
    color: var(--text);
    box-shadow: 0 0 1.25rem rgba(16, 185, 129, 0.18);
}
.comparison-edge-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: rotate(180deg);
}
.comparison-edge-chevron { font-size: 1.2rem; line-height: 1; }
.discover-tabs,
.earn-target-switch {
    position: relative;
}
.discover-tabs .tab-pill-indicator,
.earn-target-switch .tab-pill-indicator {
    position: absolute;
    bottom: 0.2rem;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
    pointer-events: none;
    opacity: 0;
    transition: transform 180ms var(--ease-soft), width 180ms var(--ease-soft), opacity 180ms ease;
}
.discover-tabs .tab-chip,
.earn-target-switch button {
    position: relative;
    border-color: transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    transition: color 180ms ease, background-color 180ms ease;
}
.discover-tabs .tab-chip:hover,
.discover-tabs .tab-chip.active,
.earn-target-switch button:hover,
.earn-target-switch button.active {
    border-color: transparent;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}
.earn-target-switch {
    align-items: center;
    padding: 0.35rem 0;
}
.earn-target-switch .tab-pill-indicator { bottom: 0; }
@media (max-width: 1099px) {
    .discover-comparison-root,
    .comparison-exposed-edge {
        display: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .comparison-exposed-edge,
    .discover-comparison-root,
    .discover-tabs .tab-pill-indicator,
    .earn-target-switch .tab-pill-indicator {
        transition: none;
    }
}

.section--after-hero {
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

.showcase-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px -8px rgba(245, 158, 11, 0.15), 0 24px 48px rgba(0, 0, 0, 0.32);
}

.bento-tile {
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(148, 163, 184, 0.06);
    display: flex;
    flex-direction: column;
}

.bento-mock {
    margin-top: auto;
    padding-top: 1rem;
}

.bento-mock--wallet {
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.45);
}

.bento-mock-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.bento-mock-value {
    margin-top: 0.25rem;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
}

.bento-mock-bar {
    margin-top: 0.65rem;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.bento-mock-bar span {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #10B981, #34d399);
}

.bento-mock-caption {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.bento-mock--statement,
.bento-mock--promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.bento-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.bento-pill--ok {
    background: rgba(16, 185, 129, 0.14);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.28);
}

.bento-pill--amber {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.28);
}

.bento-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.bento-chip {
    padding: 0.28rem 0.55rem;
    border-radius: 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
}

.premium-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 1.5rem 2rem;
    align-items: center;
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: 1.5rem;
    border: 1px solid rgba(180, 116, 54, 0.58);
    background: #111923;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28);
    color: #fff;
}

.premium-glow {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(64px);
    z-index: 0;
}

.premium-glow--amber {
    width: 15rem;
    height: 15rem;
    top: -2.5rem;
    right: -2.5rem;
    background: rgba(245, 158, 11, 0.14);
}

.premium-glow--emerald {
    width: 12rem;
    height: 12rem;
    bottom: -3rem;
    left: -2rem;
    background: rgba(16, 185, 129, 0.12);
}

.premium-panel-copy,
.premium-panel-cta {
    position: relative;
    z-index: 1;
}

.premium-panel-copy h2 {
    font-family: var(--display);
    font-size: clamp(1.45rem, 3vw, 1.85rem);
    font-weight: 700;
    margin: 0 0 0.45rem;
    letter-spacing: -0.03em;
    color: #fff;
}

.premium-panel-copy > p {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 0.98rem;
    max-width: 36rem;
    line-height: 1.65;
}

.premium-benefits {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.premium-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--text-secondary);
    font-size: 0.94rem;
    line-height: 1.5;
}

.premium-benefits li::before {
    content: none;
}

.premium-check {
    flex: 0 0 auto;
    display: inline-flex;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    color: #fbbf24;
}

.premium-check svg {
    width: 100%;
    height: 100%;
}

.premium-panel-cta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.premium-panel-note {
    width: 100%;
    margin: 0;
    color: #c58b52;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-align: right;
    text-transform: uppercase;
}

.card-grid-equal {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
}

.media-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.media-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.22);
}

.media-excerpt {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--muted);
}

.media-card-image,
.media-frame img,
.media-frame .cms-placeholder {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

.listing-with-drawer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.listing-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.listing-toolbar-search,
.listing-filter-search {
    width: 100%;
    min-width: 0;
}
.listing-toolbar .search--pill,
.listing-filter-search .search--pill {
    width: 100%;
    min-width: 0;
}
.listing-toolbar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}
.listing-quick-filters {
    display: flex;
    flex: 1 1 12rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}
.listing-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex: 0 0 auto;
}
.listing-sort-form {
    display: inline-flex;
    margin: 0;
}
.listing-sort-static {
    font-size: 0.82rem;
    font-weight: 600;
}
.listing-filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 85;
    border: 0;
    padding: 0;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(2px);
}
.listing-filter-backdrop[hidden] {
    display: none !important;
}
.listing-with-drawer.is-drawer-open .listing-filter-backdrop {
    display: block;
}
.listing-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    width: min(30rem, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    padding: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(165deg, rgba(18, 26, 40, 0.98), rgba(8, 12, 22, 0.99));
    box-shadow: -1.25rem 0 3rem rgba(0, 0, 0, 0.35);
    transform: translateX(105%);
    transition: transform 0.28s ease;
    visibility: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.listing-filter-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}
.listing-filter-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}
.listing-filter-drawer-head h2 {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}
.listing-filter-drawer-body {
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.85rem 1rem;
}
.listing-filter-drawer-footer {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 12, 22, 0.96);
    position: sticky;
    bottom: 0;
    flex: 0 0 auto;
}
.listing-filter-drawer-footer .btn {
    flex: 1 1 auto;
}
.listing-main {
    min-width: 0;
}
body.listing-filter-drawer-open {
    overflow: hidden;
}
.listing-load-more--infinite [data-load-more] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.listing-load-more--infinite {
    position: relative;
    min-height: 1px;
    padding: 0;
    border: 0;
}

.filter-trigger {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    font: inherit;
}

.filter-trigger--icon {
    width: 48px;
    height: 48px;
}

.filter-trigger:hover,
.filter-trigger.is-active,
.filter-trigger[aria-expanded="true"] {
    color: var(--text);
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(255, 255, 255, 0.08);
}

.filter-trigger:focus-visible {
    outline: 2px solid rgba(16, 185, 129, 0.55);
    outline-offset: 2px;
}

.filter-trigger-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(8, 12, 22, 0.9);
}

.filter-trigger-badge {
    display: none;
}

.search--pill {
    margin: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(2, 6, 23, 0.45);
}

.search--pill:focus-within {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.search--pill input:focus {
    outline: none;
}

@media (max-width: 899px) {
    .listing-filter-drawer {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: min(85svh, 40rem);
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 1.15rem 1.15rem 0 0;
        transform: translateY(110%);
        box-shadow: 0 -1.25rem 3rem rgba(0, 0, 0, 0.35);
    }
    .listing-filter-drawer.is-open {
        transform: translateY(0);
    }
    .listing-toolbar-controls {
        align-items: stretch;
    }
    .listing-toolbar-actions {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }
    .listing-sort-form,
    .listing-sort-control {
        flex: 1 1 auto;
        min-width: 0;
    }
    .listing-sort-select {
        width: 100%;
    }
}

.listing-filter-panel-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.listing-filter-actions {
    display: none;
}

.filter-amount {
    display: block;
    margin-top: 0.5rem;
}

.filter-amount input {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(2, 6, 23, 0.45);
    color: var(--text);
    font: inherit;
}

.filter-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.45rem;
}

.filter-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.filter-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-chips a,
.filter-chips button.chip {
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--muted);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.filter-chips a:hover,
.filter-chips button.chip:hover {
    color: var(--text);
    text-decoration: none;
    border-color: #3A4563;
}

.filter-chips a.active,
.filter-chips button.chip.active,
.chips a.active {
    background-color: #f59e0b;
    color: #0b0f17;
    font-weight: 600;
    border-color: transparent;
}

.filter-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text);
    font-size: 0.92rem;
}

.empty-state-copy {
    margin: 0 0 0.85rem;
}

.mt-sm { margin-top: 0.5rem; }

.discover-grid {
    grid-template-columns: 1fr;
    gap: clamp(0.85rem, 2vw, 1.25rem);
}
@media (min-width: 560px) {
    .discover-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .discover-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .discover-grid { grid-template-columns: repeat(4, 1fr); }
}
.discover-grid .discover-grid-img .discover-card-img,
.discover-grid .discover-grid-img .card-img-placeholder {
    aspect-ratio: 1.586 / 1;
}
.discover-card {
    transition: all 0.3s ease-in-out;
}
.discover-grid a.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 24px rgba(16, 185, 129, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
}

@media (max-width: 900px) {
    .premium-panel {
        grid-template-columns: 1fr;
    }
    .premium-panel-cta {
        justify-content: flex-start;
    }
    .card-grid-equal {
        grid-template-columns: 1fr;
    }
    .home-stack-hero {
        grid-template-columns: 1fr;
        --stack-height: 360px;
        --stack-clip-pad: 0px;
        --stack-col-width: 150px;
        --stack-gap: 0.55rem;
        padding: 0.35rem 0 0.75rem;
        min-height: calc(var(--stack-height) + 0.75rem);
        align-items: start;
    }
    .home-stack-hero > .home-stack-banner {
        max-width: none;
        margin-inline: 0;
        height: var(--stack-height);
    }
    .home-stack-hero .hero-copy {
        grid-row: 2;
        grid-column: 1;
        max-width: none;
        text-align: left;
        align-self: start;
    }
    .home-stack-hero > .home-stack-banner { grid-row: 1; grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .showcase-card:hover { transform: none; }
    .showcase-card:hover .showcase-card-media img { transform: none; }
    .card-stacks--static .stack-marquee,
    .home-stack-hero .stack-marquee { animation: none !important; }
    .listing-filter-drawer { transition: none; }
    .filter-trigger { transition: none; }
}

.footer-tagline {
    margin: 0;
    max-width: 26rem;
    color: var(--muted);
    line-height: 1.65;
}

.footer-user-name {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text-secondary);
}

.footer-logout-form {
    margin: 0;
}

.footer-logout-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

/* Shared modern content primitives */
.nav-center a:focus-visible,
.nav-right a:focus-visible,
.chip:focus-visible,
.filter-chips button:focus-visible,
.filter-trigger:focus-visible,
.media-card:focus-visible,
.catalog-card-link:focus-visible,
.search input:focus-visible,
.tab-chip:focus-visible,
.pagination-nav a:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 3px;
}

.article-meta {
    margin: 0.35rem 0 1rem;
}

.detail-cta-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.detail-cta strong {
    display: block;
    margin-bottom: 0.2rem;
}

.detail-cta .muted {
    font-size: 0.9rem;
}

.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.pagination-nav a,
.pagination-nav .active,
.pagination-ellipsis {
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
}

.pagination-nav a {
    color: var(--text-secondary);
}

.pagination-nav a:hover,
.pagination-nav .active {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(52, 211, 153, 0.5);
    text-decoration: none;
}

.pagination-nav .pagination-prev,
.pagination-nav .pagination-next {
    padding-inline: 0.9rem;
}

.mobile-card-picker {
    display: none;
}

@media (max-width: 540px) {
    .detail-cta-actions {
        flex-direction: column;
    }

    .detail-cta-actions .btn {
        width: 100%;
    }

    .pagination-nav .pagination-prev,
    .pagination-nav .pagination-next {
        flex: 1 1 100%;
    }
}

@media (max-width: 1099px) {
    .mobile-card-picker {
        display: grid;
        gap: 0.4rem;
        margin: 0 0 1rem;
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 600;
    }

    .mobile-card-picker select {
        min-height: 44px;
        width: 100%;
        padding: 0.65rem 0.8rem;
        border: 1px solid var(--line);
        border-radius: 0.75rem;
        background: var(--bg-elevated);
        color: var(--text);
        font: inherit;
    }
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.price-card--free {
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.04);
}

.pricing-plans {
    margin-top: clamp(1.25rem, 3vw, 2rem);
}


/* Discover detail styles */
.discover-catalog { padding-bottom: 1rem; }
        .discover-layout {
            display: grid;
            gap: 1.75rem;
            align-items: start;
        }
        .discover-detail-root { min-width: 0; }
        .discover-detail-root.is-loading .discover-hero-slot::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: calc(var(--radius) + 2px);
            background: rgba(2, 6, 23, 0.45);
            pointer-events: none;
        }
        .discover-detail { display: grid; gap: 1.25rem; min-width: 0; }

        @media (min-width: 900px) {
            .discover-catalog { padding-bottom: 2rem; }
            .mobile-only { display: none !important; }
        }
        @media (min-width: 1100px) {
            .discover-layout {
                grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
                gap: 2rem;
            }
            .catalog-nav {
                position: sticky;
                top: calc(var(--header-h) + 1rem);
                max-height: calc(100vh - var(--header-h) - 2rem);
                overflow-y: auto;
                scrollbar-width: thin;
                scrollbar-color: rgba(16,185,129,0.45) transparent;
                scroll-padding-block: 0.5rem;
            }
            .catalog-nav::-webkit-scrollbar { width: 6px; }
            .catalog-nav::-webkit-scrollbar-track { background: transparent; }
            .catalog-nav::-webkit-scrollbar-thumb {
                border-radius: 999px;
                background: rgba(16,185,129,0.38);
            }
            .catalog-nav::-webkit-scrollbar-thumb:hover { background: rgba(16,185,129,0.62); }
        }
        @media (max-width: 1099px) {
            .catalog-nav { display: none !important; }
        }
        @media (max-width: 899px) {
            .desktop-only { display: none !important; }
            .discover-catalog { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
            .card-header { text-align: center; }
            .card-header-info { align-items: center; }
            .card-header-top { flex-direction: column; align-items: center; }
            .card-header .card-tags { justify-content: center; }
            .card-header-media { max-width: min(280px, 88vw); margin-inline: auto; }
            .header-nav { position: absolute; inset: auto 0 0; justify-content: space-between; pointer-events: none; }
            .header-nav .header-nav-btn { pointer-events: auto; }
            .sticky-cta .cta-row { gap: 0.55rem; }
            .sticky-cta .btn { min-height: 44px; }
        .master-detail-root .discover-tabs {
            position: static;
            top: auto;
            z-index: auto;
            backdrop-filter: none;
                margin-inline: -0.25rem;
                padding-inline: 0.25rem;
            }
        }
        @media (max-width: 540px) {
            .header-nav-btn { width: 36px; height: 36px; font-size: 1.3rem; }
        }

        .catalog-nav { display: grid; gap: 0.55rem; }
        .catalog-nav-tools {
            display: grid;
            gap: 0.45rem;
            padding: 0.65rem;
            border: 1px solid var(--line);
            border-radius: 0.9rem;
            background: rgba(255,255,255,0.035);
        }
        .catalog-search input {
            width: 100%;
            min-height: 40px;
            padding: 0.55rem 0.7rem;
            border: 1px solid var(--line);
            border-radius: 0.65rem;
            background: rgba(2,6,23,0.5);
            color: var(--text);
            font: inherit;
            font-size: 0.82rem;
        }
        .catalog-search input:focus-visible,
        .catalog-card-link:focus-visible {
            outline: 2px solid var(--accent-soft);
            outline-offset: 2px;
        }
        .catalog-bank {
            border: 1px solid var(--line);
            border-radius: 12px;
            background: rgba(15, 23, 42, 0.55);
            overflow: hidden;
        }
        .catalog-bank-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.7rem 0.85rem;
            cursor: pointer;
            font-weight: 600;
            list-style: none;
        }
        .catalog-bank-summary::-webkit-details-marker { display: none; }
        .catalog-bank-chevron {
            width: 0.45rem;
            height: 0.45rem;
            border-right: 2px solid var(--muted);
            border-bottom: 2px solid var(--muted);
            transform: rotate(45deg);
            transition: transform 0.2s ease;
            flex-shrink: 0;
        }
        .catalog-bank[open] .catalog-bank-chevron { transform: rotate(-135deg); }
        .catalog-card-list {
            list-style: none;
            margin: 0;
            padding: 0 0.45rem 0.55rem;
            display: grid;
            gap: 0.25rem;
        }
        .catalog-card-link {
            display: grid;
            grid-template-columns: 68px 1fr;
            gap: 0.55rem;
            align-items: center;
            padding: 0.5rem;
            border-radius: 0.75rem;
            color: inherit;
            text-decoration: none;
            opacity: 0.72;
            border: 1px solid transparent;
            transition: all 0.3s ease-in-out;
            scroll-margin-block: 0.5rem;
        }
        .catalog-card-link:hover,
        .catalog-card-link.active {
            opacity: 1;
            text-decoration: none;
            background: rgba(16, 185, 129, 0.10);
        }
        .catalog-card-link.active {
            border: 1px solid rgba(16, 185, 129, 0.58);
            box-shadow: inset 3px 0 0 var(--accent), 0 8px 22px rgba(0,0,0,0.16);
        }
        .catalog-card-thumb { border-radius: 6px; overflow: hidden; }
        .catalog-card-thumb .discover-card-img,
        .catalog-card-thumb .card-img-placeholder {
            border-radius: 6px;
            border: 1px solid var(--line);
        }
        .catalog-card-name {
            font-size: 0.82rem;
            line-height: 1.3;
            color: var(--text-secondary);
        }

        .card-header {
            display: grid;
            gap: 1.25rem;
            align-items: start;
            position: relative;
        }
        @media (min-width: 720px) {
            .card-header {
                grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
                gap: 1.5rem;
                align-items: center;
            }
        }
        .card-header-media { width: 100%; }
        .discover-hero-slot .discover-card-img,
        .discover-hero-slot .card-img-placeholder {
            border-radius: calc(var(--radius) + 2px);
            border: 1px solid var(--line);
            box-shadow: 0 18px 40px rgba(0,0,0,0.32);
        }
        .card-header-info {
            display: grid;
            gap: 1rem;
            min-width: 0;
        }
        .card-header-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
        }
        .card-header-copy { min-width: 0; flex: 1; }
        .card-header-copy h1 {
            font-family: var(--display);
            font-size: clamp(1.35rem, 2.8vw, 1.9rem);
            line-height: 1.2;
            margin: 0.2rem 0 0.65rem;
            letter-spacing: -0.02em;
        }
        .card-header .card-tags { margin-top: 0; }
        .header-nav {
            display: flex;
            gap: 0.4rem;
            flex-shrink: 0;
        }
        .header-nav-btn {
            width: 40px;
            height: 40px;
            border-radius: 0.75rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text);
            display: grid;
            place-items: center;
            text-decoration: none;
            font-size: 1.45rem;
            transition: all 0.3s ease-in-out;
        }
        .header-nav-btn:hover {
            text-decoration: none;
            border-color: rgba(52, 211, 153,0.55);
            background: rgba(52, 211, 153,0.16);
            transform: translateY(-1px);
        }
        .card-cta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
            align-items: center;
        }
        .btn-app-secondary {
            font-size: 0.88rem;
            padding: 0.55rem 0.95rem;
            font-weight: 500;
            opacity: 0.92;
        }

        .discover-tabs {
            position: sticky;
            top: var(--header-h);
            z-index: 20;
            display: flex;
            gap: 0.35rem;
            padding: 0.55rem 0;
            margin: 0;
            background: linear-gradient(180deg, rgba(2,6,23,0.96) 70%, rgba(2,6,23,0.75));
            backdrop-filter: blur(12px);
            overflow-x: auto;
            scrollbar-width: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        .master-detail-root .discover-tabs {
            position: static;
            top: auto;
            z-index: auto;
            backdrop-filter: none;
        }
        .discover-tabs::-webkit-scrollbar { display: none; }
        .tab-chip {
            flex: 0 0 auto;
            padding: 0.45rem 0.95rem;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            color: var(--muted);
            font-size: 0.88rem;
            font-weight: 600;
            background: rgba(255, 255, 255, 0.04);
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            font-family: inherit;
        }
        .tab-chip:hover { color: var(--text); border-color: rgba(255,255,255,0.18); }
        .tab-chip.active {
            color: #fff;
            border-color: rgba(52, 211, 153,0.55);
            background: rgba(52, 211, 153,0.16);
        }
        .tab-panel[hidden] { display: none !important; }
        .tab-panel { min-width: 0; }

        .catalog-section-title {
            font-family: var(--display);
            font-size: 1.45rem;
            margin: 0 0 1rem;
            letter-spacing: -0.02em;
        }
        .catalog-subhead {
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin: 0 0 0.55rem;
        }

        .perk-sections { display: grid; gap: 1.15rem; }
        .perk-section {
            margin: 0;
            padding-bottom: 1.05rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        .perk-section:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }
        .perk-section-title {
            font-size: 1.05rem;
            font-weight: 600;
            margin: 0 0 0.65rem;
        }
        .perk-section-body { min-width: 0; }

        .perk-segment {
            padding: 0.65rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            margin: 0;
        }
        .perk-segment:last-child { border-bottom: 0; }
        .perk-segment h4 { margin: 0 0 0.3rem; font-size: 0.95rem; }
        .perk-subsection-title {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin: 0.75rem 0 0.45rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .perk-subsection-title:first-child { margin-top: 0; }
        .benefit-tile {
            padding: 0.55rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            margin: 0;
        }
        .benefit-tile:last-child { border-bottom: 0; }
        .benefit-tile h5 { margin: 0 0 0.3rem; font-size: 0.92rem; }
        .benefit-tile .benefit-names {
            margin: 0;
            padding-left: 1.1rem;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        .benefit-tile .benefit-names li { margin-bottom: 0.2rem; }
        .perk-rate-row {
            display: flex; justify-content: space-between; gap: 0.75rem;
            font-size: 0.9rem; margin-top: 0.3rem;
            color: var(--text-secondary);
            padding: 0.15rem 0;
        }
        .perk-rate-row strong { color: var(--text); font-weight: 600; }
        .perk-list { margin: 0; padding-left: 1.1rem; color: var(--text-secondary); font-size: 0.92rem; }
        .perk-list li { margin-bottom: 0.35rem; }
        .perk-muted { color: var(--muted); font-size: 0.88rem; margin: 0.35rem 0 0; }

        .promo-list { display: grid; gap: 0.65rem; }
        .discover-detail .promo-row {
            display: grid;
            grid-template-columns: 72px 1fr;
            gap: 0.85rem;
            align-items: center;
            padding: 0.65rem;
            border-radius: 12px;
            border: 1px solid var(--line);
            background: var(--bg-elevated);
            color: inherit;
            text-decoration: none;
        }
        .discover-detail .promo-row:hover {
            text-decoration: none;
            border-color: rgba(52, 211, 153,0.45);
        }
        .discover-detail .promo-row img, .discover-detail .promo-row-ph {
            width: 72px; height: 52px; object-fit: cover; border-radius: 8px; background: #020617;
        }
        .promo-row strong { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; color: var(--text); }

        .sticky-cta {
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
            padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
            background: rgba(2, 6, 23, 0.92);
            backdrop-filter: blur(12px);
            border-top: 1px solid var(--line);
        }
        body:has(#analytics-consent:not([hidden])) .sticky-cta {
            bottom: 7.5rem;
        }
        .sticky-cta-inner { display: flex; justify-content: center; }
        .sticky-cta .cta-row { justify-content: stretch; }
        .sticky-cta .btn { flex: 1; }
        .sticky-cta .btn-app-secondary { flex: 0.7; }

        .earn-rate-block { display: grid; gap: 0.35rem; }
        .earn-target-switch {
            position: sticky;
            top: calc(var(--header-h) + 3.1rem);
            z-index: 15;
            display: flex;
            flex-wrap: nowrap;
            gap: 0.4rem;
            margin: 0 0 0.85rem;
            padding: 0.45rem 0;
            overflow-x: auto;
            scrollbar-width: none;
            background: linear-gradient(180deg, rgba(2,6,23,0.96) 65%, rgba(2,6,23,0.72));
            backdrop-filter: blur(8px);
        }
        .earn-target-switch::-webkit-scrollbar { display: none; }
        .earn-target-switch button {
            flex: 0 0 auto;
            border: 1px solid var(--line);
            background: rgba(15, 23, 42, 0.75);
            color: var(--muted);
            border-radius: 999px;
            padding: 0.4rem 0.8rem;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            white-space: nowrap;
        }
        .earn-target-switch button.active {
            color: var(--text);
            border-color: rgba(71, 85, 105, 0.9);
            background: rgba(255, 255, 255, 0.06);
        }
        .earn-rate-block .earn-target-switch--select {
            width: 100%;
            flex-direction: column;
            align-items: stretch;
            gap: 0.3rem;
            margin-bottom: 0.25rem;
            padding: 0.55rem 0.7rem;
            border-radius: 0.65rem;
            overflow: visible;
        }
        .earn-rate-block .earn-target-switch--select select {
            width: 100%;
            min-width: 0;
            flex: 1;
        }
        .earn-rate-block .earn-target-switch--select + .earn-target-panel .perk-segment:first-child > h4 {
            margin-top: 0.3rem;
        }
        .master-detail-root--discover .earn-rate-block .perk-segment > h4 {
            padding-inline: 0;
        }
        .earn-target-panel[hidden] { display: none !important; }
        .earn-footnotes {
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px solid rgba(255, 255, 255, 0.10);
            display: grid;
            gap: 0.35rem;
        }
        .perk-rate-row-soft { color: var(--text-secondary); }
        .empty-state-compact {
            padding: 1rem 1.1rem;
            text-align: left;
        }
        .empty-state-compact p { margin: 0 0 0.55rem; }
        .perk-app-hint { margin-top: 1rem; }
        .promo-row-body { min-width: 0; }
        .promo-more { margin: 1rem 0 0; }

/* ===== Final structure polish overrides ===== */
.home-stack-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 5rem);
    min-height: 0;
    padding: 5rem 0 4rem;
    background:
        radial-gradient(circle at 60% 30%, rgba(16, 185, 129, 0.08) 0%, rgba(245, 158, 11, 0.05) 40%, transparent 70%);
}

.hero-app-shell {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    background: rgba(15, 23, 42, 0.5);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-app-shell .home-stack-banner {
    height: min(480px, 42vw);
    min-height: 360px;
    overflow: visible;
}

.hero-app-shell .home-stack-media--fade-bottom {
    -webkit-mask-image:
        linear-gradient(to bottom, #000 70%, transparent 100%),
        linear-gradient(to right, #000 70%, transparent 100%);
    mask-image:
        linear-gradient(to bottom, #000 70%, transparent 100%),
        linear-gradient(to right, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.home-stack-hero .hero-copy h1,
.pricing-hero h1 {
    color: #ffffff;
}

.pricing-compare-grid .price-card--tier.price-card--glow,
.pricing-compare-grid .price-card--tier.featured {
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.15), 0 18px 40px rgba(0, 0, 0, 0.28);
}

.pricing-compare-grid .price-card--glow::before {
    display: none;
}

.billing-toggle--hero {
    border-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 900px) {
    .home-stack-hero {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 2.75rem 0 2.25rem;
    }

    .home-stack-hero .hero-copy {
        grid-column: 1;
        grid-row: 2;
    }

    .hero-app-shell {
        grid-column: 1;
        grid-row: 1;
        padding: 1rem;
    }

    .hero-app-shell .home-stack-banner {
        height: 320px;
        min-height: 0;
    }
}

/* Final precedence for shared dark drawers, tabs, and card artwork. */
.master-detail-root:not(.master-detail-root--discover) {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(51, 65, 85, 0.9);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
    box-shadow: -1rem 2rem 4rem rgba(0, 0, 0, 0.42), 0 0 2rem rgba(16, 185, 129, 0.08);
}
.master-detail-root:not(.master-detail-root--discover) > .master-detail-panel {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: transparent;
    scrollbar-color: #334155 transparent;
    scrollbar-width: thin;
}
.master-detail-root:not(.master-detail-root--discover) > .master-detail-panel::-webkit-scrollbar {
    width: 6px;
}
.master-detail-root:not(.master-detail-root--discover) > .master-detail-panel::-webkit-scrollbar-track {
    background: transparent;
}
.master-detail-root:not(.master-detail-root--discover) > .master-detail-panel::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: #334155;
}
.master-detail-root:not(.master-detail-root--discover) > .master-detail-panel::-webkit-scrollbar-thumb:hover {
    background: #475569;
}
.master-detail-root:not(.master-detail-root--discover) .detail-hero {
    border-color: transparent;
    box-shadow: none;
}
.master-detail-root--discover .discover-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline: -0.25rem;
    padding: 0.375rem 0.25rem;
    overflow-x: auto;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.98) 72%, rgba(2, 6, 23, 0.78));
    scrollbar-width: none;
}
.master-detail-root--discover .discover-tabs::-webkit-scrollbar { display: none; }
.master-detail-root--discover .discover-tabs .tab-chip {
    flex: 0 0 auto;
    min-height: 2.25rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid transparent;
    color: #94a3b8;
    background: transparent;
    transition: all 200ms ease;
}
.master-detail-root--discover .discover-tabs .tab-chip:hover {
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.5);
}
.master-detail-root--discover .discover-tabs .tab-chip.active {
    border-color: #334155;
    color: #34d399;
    background: #1e293b;
}
.master-detail-root--discover .perk-sections {
    gap: 0.8rem;
}
.master-detail-root--discover .perk-section.content-section {
    margin: 0;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.42);
}
.master-detail-root--discover .perk-section-title {
    margin: 0 0 0.7rem;
    color: var(--text);
    font-size: 0.98rem;
}
.master-detail-root--discover .perk-section-body {
    color: var(--text-secondary);
}
.discover-catalog .card-img-slot.has-img,
.discover-catalog .card-img-slot.has-img .discover-card-img,
.discover-catalog .catalog-card-thumb,
.discover-catalog .catalog-card-thumb .discover-card-img {
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.discover-catalog .card-img-slot.has-img .discover-card-img {
    object-fit: contain;
}

/* Final drawer handle precedence. */
.master-detail-root--discover .discover-hero-slot.no-img {
    display: none;
}
.master-detail-root--discover .comparison-rail {
    top: 33.333%;
    left: 0;
    min-height: 8rem;
    padding: 0.65rem 0.5rem;
    border: 1px solid #1e293b;
    border-right: 0;
    border-radius: 0.75rem 0 0 0.75rem;
    background: #020617;
    transform: translate(-100%, -50%);
    writing-mode: vertical-lr;
}

/* Canonical desktop drawer geometry. */
@media (min-width: 1100px) {
    .discover-detail-columns--drawer > .discover-detail-root,
    .discover-detail-columns > .discover-detail-root {
        position: fixed;
        z-index: 20;
        inset: 5.5rem 1.5rem 1.5rem auto;
        width: min(52rem, 42vw);
    }
    .discover-detail-columns--drawer > .discover-comparison-root,
    .discover-detail-columns > .discover-comparison-root {
        position: fixed;
        z-index: 19;
        inset: 5.5rem 1.5rem 1.5rem auto;
        display: block;
        width: min(52rem, 42vw);
        overflow: visible;
        transform: translateX(-3rem);
        transition: transform 240ms var(--ease-soft), opacity 240ms var(--ease-soft);
    }
    .discover-detail-columns--drawer > .discover-comparison-root.is-open,
    .discover-detail-columns > .discover-comparison-root.is-open {
        transform: translateX(calc(-100% - 1rem));
    }
    .comparison-exposed-edge {
        position: absolute;
        z-index: 21;
        top: 50%;
        left: 0;
        display: grid;
        width: 3rem;
        min-height: 8rem;
        place-items: center;
        padding: 0.7rem 0.45rem;
        border: 1px solid #334155;
        border-left: 0;
        border-radius: 0 0.85rem 0.85rem 0;
        color: var(--text-secondary);
        background: #0f172a;
        cursor: pointer;
        transform: translateY(-50%);
        transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
        writing-mode: vertical-lr;
    }
    .comparison-exposed-edge:hover,
    .comparison-exposed-edge:focus-visible {
        border-color: var(--accent-soft);
        color: var(--text);
        background: #1e293b;
    }
}
@media (max-width: 1099px) {
    .discover-detail-columns--drawer > .discover-comparison-root,
    .discover-detail-columns > .discover-comparison-root,
    .comparison-exposed-edge { display: none !important; }
}
.master-detail-root--discover .comparison-rail:hover,
.master-detail-root--discover .comparison-rail:focus-visible {
    transform: translate(calc(-100% - 0.25rem), -50%);
}
.master-detail-root--discover .comparison-rail-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}
/* Final responsive precedence. */
@media (max-width: 899px), (orientation: landscape) and (max-height: 560px) and (max-width: 899px) {
    .nav-panel {
        inset: var(--header-h) 0 auto;
        transform: translateY(-0.5rem);
        visibility: hidden;
    }
    .nav-toggle:checked ~ .nav-panel,
    .nav-panel[aria-hidden="false"] {
        transform: translateY(0);
        visibility: visible;
    }
    .home-hero {
        --hero-min-height: min(620px, 82svh);
        --hero-lane-gap: 0.42rem;
        --hero-card-width: clamp(8rem, 41vw, 12rem);
    }
    .home-hero-inner {
        min-height: var(--hero-min-height);
        align-items: flex-start;
        padding-block: clamp(3rem, 11svh, 5rem) 2rem;
    }
    .home-hero > .home-card-marquee {
        align-content: start;
        padding-top: calc(var(--header-h) + clamp(0.5rem, 2svh, 1.25rem));
        padding-bottom: 0;
        transform: rotate(-1deg) scale(1.02);
        opacity: 0.82;
    }
    .home-hero .home-marquee-lane--3 { display: none; }
    .home-hero > .hero-scrim {
        background:
            linear-gradient(90deg, rgba(11, 15, 23, 0.98) 0%, rgba(11, 15, 23, 0.9) 58%, rgba(11, 15, 23, 0.42) 100%),
            linear-gradient(180deg, rgba(11, 15, 23, 0.35) 0%, transparent 28%, rgba(11, 15, 23, 0.62) 100%);
    }
}
@media (min-width: 641px) and (max-width: 720px) {
    .listing-toolbar .search--pill { min-width: 0; }
}
@media (min-width: 901px) and (max-width: 1099px) {
    .home-hero { --hero-min-height: min(660px, 78svh); }
    .home-hero-inner { align-items: flex-start; padding-block: 5rem 3rem; }
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 899px) {
    .home-hero { --hero-min-height: min(500px, 92svh); }
    .home-hero-inner { padding-block: 2.5rem 1.5rem; }
}

/* Discover responsive UX: one header rhythm across full-page detail. */
.discover-detail-shell .card-header {
    display: grid;
    gap: 1.25rem;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
    .discover-detail-shell .card-header {
        grid-template-columns: minmax(140px, min(220px, 28vw)) minmax(0, 1fr);
        gap: 1.5rem;
        align-items: center;
    }
}
.discover-detail-shell .discover-hero-slot {
    width: 100%;
    max-width: min(280px, 32vw);
    margin-inline: auto;
}
.discover-detail-shell .discover-hero-slot .discover-card-img,
.discover-detail-shell .discover-hero-slot .card-img-placeholder {
    max-height: min(40svh, 220px);
    object-fit: contain;
}
@media (orientation: landscape) and (max-height: 700px) {
    .discover-detail-shell .card-header {
        grid-template-columns: minmax(120px, min(200px, 24vw)) minmax(0, 1fr);
        align-items: start;
    }
    .discover-detail-shell .discover-hero-slot {
        max-width: min(220px, 26vw);
    }
    .discover-detail-shell .discover-hero-slot .discover-card-img,
    .discover-detail-shell .discover-hero-slot .card-img-placeholder {
        max-height: min(36svh, 180px);
    }
}
@media (orientation: landscape) and (max-height: 560px) {
    .listing-shell .page-hero {
        padding-block: clamp(0.85rem, 2.5vw, 1.25rem);
    }
    .listing-shell .page-hero h1 {
        font-size: clamp(1.35rem, 4vw, 1.75rem);
    }
    .listing-shell .page-hero p {
        display: none;
    }
}
.discover-detail-shell .card-header-info,
.discover-detail-shell .card-header-top,
.discover-detail-shell .card-header-copy {
    text-align: left;
}
@media (min-width: 900px) {
    .discover-detail-shell .card-header-media .header-nav {
        display: none;
    }
}
.discover-detail-shell .discover-tabbed {
    overflow: visible;
    margin-top: 0;
}
.discover-detail-shell .discover-tabs {
    position: sticky;
    top: calc(var(--header-h) + 0.25rem);
    z-index: 25;
}
.discover-detail-shell .drawer-card-picker {
    position: relative;
    z-index: 30;
}
.discover-detail-shell .drawer-card-picker-menu {
    z-index: 31;
}
.discover-detail-shell .card-header-info { align-items: stretch; }
.discover-detail-shell .card-header-top { align-items: flex-start; }
.discover-detail-shell .card-header .card-tags {
    justify-content: flex-start;
}

.discover-detail-shell .card-cta {
    align-items: center;
}

.discover-detail-shell .perk-sections {
    gap: clamp(0.75rem, 1.5vw, 1rem);
}
.discover-detail-shell .perk-section.content-section {
    margin: 0;
    padding: clamp(0.85rem, 1.8vw, 1.15rem) clamp(0.85rem, 2vw, 1.25rem);
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.42);
}
.discover-detail-shell .perk-section-title {
    margin: 0 0 0.75rem;
    padding: 0 0 0.45rem 0.7rem;
    border: 0;
    border-left: 2px solid var(--accent);
    color: var(--text);
    font-size: clamp(0.92rem, 1.4vw, 1rem);
    line-height: 1.35;
}
.discover-detail-shell .perk-section-body {
    min-width: 0;
    padding-inline: clamp(0.1rem, 0.5vw, 0.35rem);
    color: var(--text-secondary);
}
.discover-detail-shell .perk-segment,
.discover-detail-shell .perk-bonus-container {
    margin-inline: 0;
}

@media (max-width: 540px) {
    .discover-detail-shell .perk-section.content-section {
        padding: 0.8rem 0.75rem 0.9rem;
    }
    .discover-detail-shell .perk-section-body {
        padding-inline: 0.15rem;
    }
}

/* Blog/Promo redesign: analytics consent, listings, discussion, search, ads */
.analytics-consent-banner {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 1000;
    max-width: min(640px, calc(100% - 2rem));
    margin-inline: auto;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(15, 23, 42, 0.96);
    color: var(--text);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
}
.analytics-consent-body {
    margin: 0.35rem 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
}
.analytics-consent-banner button {
    margin-right: 0.5rem;
}

.blog-featured {
    margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}
.blog-hero-grid {
    display: grid;
    gap: 0.85rem;
}
@media (min-width: 900px) {
    .blog-hero-grid {
        grid-template-columns: minmax(0, 1.65fr) minmax(240px, 0.9fr);
        align-items: stretch;
    }
}
.blog-hero-lead {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: clamp(220px, 36vw, 380px);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 0.2rem);
    color: inherit;
    text-decoration: none;
    background: #020617;
}
.blog-hero-lead:hover { text-decoration: none; }
.blog-hero-media,
.blog-hero-image,
.blog-hero-media .cms-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-hero-copy {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: 0.35rem;
    padding: 1.25rem 1.35rem;
    background: linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.88) 42%, rgba(2, 6, 23, 0.96) 100%);
}
.blog-hero-copy strong {
    font-size: clamp(1.2rem, 2.4vw, 1.85rem);
    line-height: 1.25;
}
.blog-hero-meta,
.blog-hero-copy span:last-child,
.blog-hero-side-card small {
    color: var(--muted);
    font-size: 0.86rem;
}
.blog-hero-side {
    display: grid;
    gap: 0.85rem;
}
.blog-hero-side-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    min-height: 96px;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: inherit;
    text-decoration: none;
}
.blog-hero-side-card:hover {
    text-decoration: none;
    border-color: rgba(52, 211, 153, 0.4);
}
.blog-hero-side-image,
.blog-hero-side-card .cms-placeholder {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 0.65rem;
}
.blog-hero-side-card span {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}
.blog-listing-layout {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 900px) {
    .blog-listing-layout {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
        align-items: start;
    }
}
.blog-feed-grid,
.blog-feed-list {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}
.blog-listing-sidebar {
    display: none;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
    position: sticky;
    top: calc(var(--header-h) + 0.75rem);
}
@media (min-width: 900px) {
    .blog-listing-sidebar {
        display: flex;
    }
}
.blog-sidebar-panel {
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(15, 23, 42, 0.45);
}
.blog-sidebar-shelves {
    display: grid;
    gap: 0.85rem;
}
.blog-sidebar-shelf-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}
.blog-sidebar-shelf-list a {
    display: grid;
    gap: 0.15rem;
    color: inherit;
    text-decoration: none;
}
.blog-sidebar-shelf-list a strong {
    font-size: 0.9rem;
    line-height: 1.35;
}
.blog-sidebar-shelf-list a span {
    color: var(--muted);
    font-size: 0.78rem;
}
.blog-mobile-category-blocks {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}
.blog-mobile-category-block {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(15, 23, 42, 0.35);
}
.blog-mobile-category-links {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: thin;
}
.blog-mobile-category-link {
    flex: 0 0 auto;
    max-width: 14rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: rgba(2, 6, 23, 0.35);
    color: inherit;
    text-decoration: none;
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 900px) {
    .blog-mobile-category-blocks {
        display: none;
    }
}
.blog-popular-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.blog-recent-comments--mobile {
    display: block;
    margin: 0 auto clamp(0.75rem, 2vw, 1rem);
    width: min(1180px, 100%);
}
.blog-recent-comment-strip {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    list-style: none;
    margin: 0;
    scrollbar-width: thin;
}
.blog-recent-comment-strip li {
    flex: 0 0 min(72vw, 16rem);
}
.blog-recent-comment-strip a {
    display: grid;
    gap: 0.25rem;
    min-height: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.45);
    color: inherit;
    text-decoration: none;
}
.blog-recent-comment-strip strong {
    font-size: 0.9rem;
    line-height: 1.35;
}
.blog-recent-comment-strip span {
    color: var(--muted);
    font-size: 0.78rem;
}
@media (min-width: 900px) {
    .blog-recent-comments--mobile {
        display: none;
    }
}

.promo-highlight-carousel {
    width: min(1180px, 100%);
    margin: 0 auto clamp(0.75rem, 2vw, 1.25rem);
}
.promo-highlight-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 0.15rem);
    background: var(--bg-elevated);
}
.promo-feed-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.promo-grid-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--motion-base, 0.2s) ease, transform var(--motion-base, 0.2s) ease, background var(--motion-base, 0.2s) ease;
}
.promo-grid-card:hover {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.06);
    transform: translateY(-2px);
    text-decoration: none;
}
.promo-grid-card-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #020617;
}
.promo-grid-card-image,
.promo-grid-card-media img,
.promo-grid-card-media .cms-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.promo-grid-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem 1rem;
    min-width: 0;
}
.promo-grid-card-title {
    font-size: 1rem;
    line-height: 1.35;
    color: var(--text);
}

.discussion-shell {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(15, 23, 42, 0.55);
}
.discussion-composer {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}
.discussion-composer textarea {
    width: 100%;
    min-height: 6rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: rgba(2, 6, 23, 0.65);
    color: var(--text);
    font: inherit;
    resize: vertical;
}
.discussion-list,
.comment-thread {
    display: grid;
    gap: 1rem;
}
.comment-thread-item {
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.85rem;
    background: rgba(2, 6, 23, 0.35);
}
.comment-thread-item--reply {
    margin-left: clamp(0.5rem, 2vw, 1.25rem);
    border-left: 2px solid var(--accent);
}

.site-search-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: start stretch;
    padding: calc(var(--header-h) + 0.35rem) clamp(0.75rem, 3vw, 1.25rem) 1rem;
}
.site-search-modal[hidden] {
    display: none !important;
}
.site-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(6px);
}
.site-search-panel {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    margin-inline: auto;
    max-height: min(calc(100svh - var(--header-h) - 1.5rem), 720px);
    overflow: auto;
    padding: 1.15rem 1.25rem 1.35rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 0.15rem);
    background: var(--bg-elevated);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.site-search-results {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    min-height: 2rem;
    color: var(--text-secondary);
}
.site-search-results a {
    color: var(--accent-soft);
}

.ad-slot {
    display: block;
    min-height: 90px;
    padding: 0.75rem 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.35);
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}

.detail-share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 1rem;
}
.promo-detail-hero-copy .detail-share-row {
    margin-top: 0.75rem;
    margin-bottom: 0;
}
.copy-link-btn {
    min-height: 44px;
}
.copy-link-btn:disabled {
    opacity: 0.72;
    cursor: default;
}

/* Header search inline typeahead */
.site-search-inline {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.site-search-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: min(18rem, 34vw);
    width: min(18rem, 34vw);
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.55);
    color: var(--muted);
}
.site-search-bar:focus-within {
    border-color: rgba(91, 127, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(91, 127, 255, 0.16);
    color: var(--text);
}
.site-search-bar-icon {
    display: inline-flex;
    flex-shrink: 0;
}
.site-search-bar input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    outline: none;
}
.site-search-bar input::placeholder {
    color: var(--muted);
}
.site-search-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.35rem;
    color: var(--muted);
    font-size: 0.65rem;
    line-height: 1.2;
    white-space: nowrap;
}
.site-search-trigger {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
}
.site-search-inline .site-search-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 120;
    width: min(400px, calc(100vw - 2rem));
    max-height: min(66svh, 480px);
    overflow: hidden;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.95rem;
    background: rgba(10, 14, 24, 0.96);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
}
.site-search-inline .site-search-results {
    max-height: min(60svh, 420px);
    overflow-y: auto;
    margin-top: 0;
    display: grid;
    gap: 0.55rem;
}
.site-search-inline .site-search-scopes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.65rem 0 0.85rem;
}
.site-search-trigger svg,
.site-search-bar-icon svg,
.search-submit-icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.search-submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding-inline: 0.75rem;
}
@media (max-width: 1099px) {
    .site-search-bar {
        min-width: 11rem;
        width: 11rem;
    }
    .site-search-kbd { display: none; }
}
@media (max-width: 899px) {
    .site-search-inline,
    .site-search-bar {
        width: 100%;
        min-width: 0;
    }
}
.site-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.site-search-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.site-search-scopes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}
.site-search-group h3 {
    margin: 0 0 0.25rem;
    padding: 0.2rem 0.55rem 0;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.site-search-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.15rem;
}
.site-search-group li a {
    display: grid;
    gap: 0.12rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
}
.site-search-group li a:hover,
.site-search-group li a.is-active,
.site-search-group li a:focus-visible {
    border-color: rgba(91, 127, 255, 0.35);
    background: rgba(91, 127, 255, 0.1);
    text-decoration: none;
    outline: none;
}
.site-search-group li a strong {
    font-size: 0.92rem;
    color: var(--text);
}
.site-search-group li a span {
    color: var(--muted);
    font-size: 0.78rem;
}
.site-search-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}
body.has-site-search-open {
    overflow: hidden;
}

/* Blog grid cards + sidebar */
.blog-feed-grid .blog-row--grid {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--motion-base, 0.2s) ease, transform var(--motion-base, 0.2s) ease, background var(--motion-base, 0.2s) ease;
}
.blog-feed-grid .blog-row--grid:hover {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.06);
    transform: translateY(-2px);
    text-decoration: none;
}
.blog-feed-grid .blog-row--grid .promo-row-thumb {
    width: 100%;
    flex: 0 0 auto;
}
.blog-feed-grid .blog-row--grid .promo-row-image,
.blog-feed-grid .blog-row--grid .cms-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
}
.blog-feed-grid .blog-row--grid .promo-row-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem 1rem;
    min-width: 0;
}
.sidebar-panel {
    padding: 1rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(15, 23, 42, 0.55);
}
.sidebar-panel-title {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}
.sidebar-discussion-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
}
.sidebar-discussion-list a {
    display: grid;
    gap: 0.2rem;
    color: inherit;
    text-decoration: none;
}
.sidebar-discussion-list a strong {
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--text);
}
.sidebar-discussion-list a span {
    font-size: 0.78rem;
    color: var(--muted);
}
.sidebar-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

/* Promo highlight carousel */
.promo-highlight-track {
    position: relative;
    min-height: clamp(180px, 28vw, 320px);
}
.promo-highlight-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(6%);
    transition: opacity 320ms ease, transform 320ms ease;
}
.promo-highlight-slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
.promo-highlight-slide.is-enter-from-right {
    animation: highlight-enter-right 320ms ease both;
}
.promo-highlight-slide.is-enter-from-left {
    animation: highlight-enter-left 320ms ease both;
}
.promo-highlight-slide.is-leave-to-left {
    animation: highlight-leave-left 320ms ease both;
}
.promo-highlight-slide.is-leave-to-right {
    animation: highlight-leave-right 320ms ease both;
}
@keyframes highlight-enter-right {
    from { opacity: 0; transform: translateX(8%); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes highlight-enter-left {
    from { opacity: 0; transform: translateX(-8%); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes highlight-leave-left {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-8%); }
}
@keyframes highlight-leave-right {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(8%); }
}
.promo-highlight-link {
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}
.promo-highlight-image,
.promo-highlight-link img,
.promo-highlight-link .cms-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}
.promo-highlight-copy {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(0.85rem, 2.5vw, 1.35rem) clamp(0.85rem, 2.5vw, 1.35rem) clamp(3rem, 6vw, 3.75rem);
    background: linear-gradient(180deg, transparent, rgba(2, 6, 23, 0.92));
}
.promo-highlight-copy h2 {
    margin: 0.25rem 0 0;
    font-size: clamp(1.05rem, 2.4vw, 1.45rem);
    line-height: 1.25;
}
.promo-highlight-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem 0.85rem;
}
.promo-highlight-controls--overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.7rem;
    z-index: 2;
    padding: 0 0.85rem;
    pointer-events: none;
}
.promo-highlight-controls--overlay .carousel-prev,
.promo-highlight-controls--overlay .carousel-next,
.promo-highlight-controls--overlay .promo-highlight-dot {
    pointer-events: auto;
}
.promo-highlight-controls--overlay .carousel-prev,
.promo-highlight-controls--overlay .carousel-next {
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
}
.promo-highlight-dots {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.promo-highlight-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.45);
    cursor: pointer;
}
.promo-highlight-dot.is-active {
    width: 22px;
    background: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
    .promo-highlight-slide,
    .promo-highlight-slide.is-enter-from-right,
    .promo-highlight-slide.is-enter-from-left,
    .promo-highlight-slide.is-leave-to-left,
    .promo-highlight-slide.is-leave-to-right {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* Detail page layout */
.detail-page-layout {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    width: min(1180px, 100%);
    margin-inline: auto;
}
.detail-page-layout--single {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}
.detail-page-layout--single .detail-page-main {
    width: min(54rem, 100%);
    max-width: min(54rem, 100%);
}
.detail-page-layout--single .detail-page-main.prose,
.detail-page-layout--single .detail-page-main.prose-article {
    width: min(54rem, 100%);
    max-width: min(54rem, 100%);
}
.detail-page-layout--single .blog-detail-prose,
.detail-page-layout--single .prose-body {
    max-width: 42rem;
    margin-inline: 0;
}
@media (min-width: 1024px) {
    .detail-page-layout:not(.detail-page-layout--single) {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
        align-items: start;
    }
}
.detail-page-main { min-width: 0; }
.detail-page-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 1rem;
}
.related-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}
.related-media-grid .media-card {
    min-width: 0;
}
.blog-detail-prose h2,
.blog-detail-prose h3,
.blog-detail-prose h4 {
    margin: 1.35rem 0 0.55rem;
    line-height: 1.25;
}
.blog-detail-prose ul,
.blog-detail-prose ol {
    margin: 0 0 1rem 1.2rem;
}
.blog-detail-prose blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--accent);
    background: rgba(255, 255, 255, 0.035);
    border-radius: 0 0.75rem 0.75rem 0;
}
.blog-detail-prose pre,
.blog-detail-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.blog-detail-prose pre {
    overflow-x: auto;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--line);
    background: rgba(2, 6, 23, 0.45);
}
.blog-detail-prose .cms-card-embed-link {
    display: inline-flex;
    margin: 0.25rem 0.35rem 0.25rem 0;
}
.detail-page-layout--single .discussion {
    width: 100%;
}
@media (max-width: 599px) {
    .promo-meta-grid {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 600px) and (max-width: 899px) {
    .promo-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 900px) {
    .promo-meta-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Discussion + comment thread polish */
.discussion-header h2 {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.discussion-login-cta,
.discussion-empty,
.discussion-error {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
}
.discussion-error {
    color: #fca5a5;
}
.discussion-composer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.discussion-composer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem 0.85rem;
}
.discussion-char-count {
    color: var(--muted);
    font-size: 0.8rem;
}
.discussion-status {
    margin: 0.15rem 0 0;
    min-height: 1.15em;
    color: var(--text-secondary);
    font-size: 0.86rem;
}
.discussion-status--error {
    color: #fca5a5;
}
.discussion-status--success {
    color: #86efac;
}
.discussion-pagination {
    margin-top: 1rem;
}
.comment-thread-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
    color: var(--muted);
}
.comment-thread-meta strong {
    color: var(--text);
    font-size: 0.9rem;
}
.comment-body {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
    font-size: 0.94rem;
}
.comment-body--deleted {
    font-style: italic;
    color: var(--muted);
}
.comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.9rem;
    margin-top: 0.55rem;
}
.comment-action-reply {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: transparent;
    padding: 0.15rem 0;
    color: var(--accent, #10b981);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.comment-action-reply:hover,
.comment-action-reply:focus-visible {
    color: #34d399;
}
.comment-owner-menu {
    position: relative;
    margin-left: auto;
}
.comment-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.comment-menu-trigger:hover,
.comment-menu-trigger:focus-visible,
.comment-menu-trigger[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}
.comment-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 5;
    min-width: 9.5rem;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--bg-elevated, #111827);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.comment-menu-panel[hidden] {
    display: none !important;
}
.comment-menu-item {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-radius: 0.55rem;
    font: inherit;
    cursor: pointer;
}
.comment-menu-item:hover,
.comment-menu-item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}
.comment-menu-item--danger {
    color: #fca5a5;
}
.comment-reply-target {
    margin: 0.15rem 0 0.35rem;
    font-size: 0.82rem;
    color: var(--muted);
}
.comment-mention {
    color: #34d399;
    font-weight: 600;
}
.discussion-composer-field {
    position: relative;
}
.discussion-mention-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 0.35rem);
    z-index: 6;
    max-height: 12rem;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--bg-elevated, #111827);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}
.discussion-mention-menu[hidden] {
    display: none !important;
}
.discussion-mention-option {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 0.6rem 0.8rem;
    font: inherit;
    cursor: pointer;
}
.discussion-mention-option[aria-selected="true"],
.discussion-mention-option:hover {
    background: rgba(16, 185, 129, 0.12);
}
.discussion-mention-empty {
    padding: 0.7rem 0.85rem;
    color: var(--muted);
    font-size: 0.88rem;
}
.comment-replies {
    margin-top: 0.35rem;
}
.comment-composer {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    background: rgba(2, 6, 23, 0.4);
}
.comment-composer[hidden] {
    display: none !important;
}
.comment-composer textarea {
    width: 100%;
    min-height: 4.5rem;
    margin-bottom: 0.55rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    background: rgba(2, 6, 23, 0.65);
    color: var(--text);
    font: inherit;
    resize: vertical;
}
.comment-delete-form {
    margin: 0;
    display: inline;
}
.comment-delete-btn {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: #fca5a5;
}
.comment-edited {
    font-size: 0.78rem;
    color: var(--muted);
}
.discussion-confirm {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    padding: 1rem;
}
.discussion-confirm[hidden] {
    display: none !important;
}
.discussion-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(4px);
}
.discussion-confirm-dialog {
    position: relative;
    z-index: 1;
    width: min(24rem, 100%);
    padding: 1.15rem 1.2rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--bg-elevated);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.discussion-confirm-dialog h3 {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
    color: var(--text);
}
.discussion-confirm-dialog p {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.92rem;
}
.discussion-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.listing-quick-break {
    flex-basis: 100%;
    width: 100%;
    height: 0;
}
.listing-popular-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    width: 100%;
    margin-top: 0.15rem;
}
.listing-popular-tags-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-right: 0.15rem;
}
.listing-popular-tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
}

/* Blog recent comments + sidebar */
.blog-recent-comments {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.blog-recent-comments-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}
.blog-recent-comments-head h2 {
    margin: 0;
    font-size: 0.95rem;
}
.blog-recent-comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}
.blog-recent-comment-list a {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    background: rgba(2, 6, 23, 0.28);
}
.blog-recent-comment-list a:hover {
    border-color: rgba(91, 127, 255, 0.35);
    text-decoration: none;
}
.blog-recent-comment-list strong {
    font-size: 0.92rem;
}
.blog-recent-comment-list span,
.blog-recent-comment-list small {
    color: var(--muted);
    font-size: 0.8rem;
}
.blog-category-shelves {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.blog-category-shelf-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}
.blog-category-shelf-head h2 {
    margin: 0;
    font-size: 1.05rem;
}
.blog-category-shelf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (max-width: 899px) {
    .blog-category-shelf-grid {
        grid-template-columns: 1fr;
    }
}
.listing-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
}
.blog-listing-layout--discovery .blog-listing-main {
    min-width: 0;
}