/* Scooby storefront: shared catalogue, plan selector, and checkout presentation. */
:root {
    color-scheme:dark;
    --bg:#0a0c10;
    --panel:#12151b;
    --panel-hover:#181d26;
    --line:#ffffff13;
    --line-strong:#ffffff24;
    --text:#f4f5f8;
    --muted:#9aa3b4;
    --accent:#aec7ff;
    --blue:#83aaff;
    --green:#a0dbbe
}
* {
    box-sizing:border-box;
    margin:0;
    padding:0
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:100px
}
body {
    background:var(--bg);
    color:var(--text);
    font-family:Inter,system-ui,-apple-system,sans-serif;
    line-height:1.6
}
a {
    color:inherit;
    text-decoration:none
}
button,input {
    font:inherit
}
button {
    cursor:pointer;
    color:inherit
}
button,a,input,summary {
    -webkit-tap-highlight-color:transparent
}
button {
    border:0
}
svg {
    width:20px;
    height:20px;
    flex-shrink:0
}
img {
    max-width:100%;
    height:auto;
    display:block
}
h1,h2,h3 {
    line-height:1.15;
    letter-spacing:-.045em
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:4px
}
[hidden] {
    display:none!important
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.skip-link {
    position:fixed;
    top:-70px;
    left:20px;
    z-index:1000;
    background:var(--accent);
    color:#101829;
    padding:12px 20px;
    border-radius:8px
}
.skip-link:focus {
    top:12px
}
.store-shell {
    max-width:1220px;
    padding:0 30px;
    margin:0 auto
}
.eyebrow {
    font-size:.65rem;
    font-weight:650;
    letter-spacing:.19em;
    color:var(--muted);
    margin-bottom:16px
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:44px;
    padding:11px 18px;
    border:1px solid transparent;
    border-radius:7px;
    font-size:.8rem;
    font-weight:650;
    line-height:1.4;
    transition:background .18s,border-color .18s
}
.button-primary {
    background:var(--accent);
    color:#12203c
}
.button-primary:hover {
    background:#c5d7ff
}
.button-muted {
    background:#ffffff06;
    border-color:var(--line-strong);
    color:#e0e5ef
}
.button-muted:hover {
    background:#ffffff0e;
    border-color:#ffffff40
}
.button-free {
    background:#15251f;
    border-color:#315642;
    color:#b2e3c7
}
.button-free:hover {
    background:#203d2d
}
.text-button {
    font-size:.76rem;
    color:var(--muted);
    background:none
}
.text-button:hover,.details-link:hover {
    color:var(--accent)
}
.details-link {
    font-size:.78rem;
    white-space:nowrap;
    color:var(--muted)
}
/* Navigation */
.site-header {
    position:sticky;
    top:0;
    z-index:30;
    border-bottom:1px solid var(--line);
    background:rgba(10,12,16,.94);
    backdrop-filter:blur(18px)
}
.header-inner {
    max-width:1280px;
    margin:auto;
    min-height:76px;
    padding:0 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px
}
.brand {
    font-size:1.45rem;
    font-weight:800;
    letter-spacing:-.06em;
    white-space:nowrap
}
.brand span {
    font-weight:400;
    font-size:.84rem;
    letter-spacing:0;
    color:#7b8598;
    margin-left:18px
}
.store-nav {
    display:flex;
    align-items:center;
    gap:28px
}
.store-nav a {
    font-size:.8rem;
    color:var(--muted)
}
.store-nav a:hover,.store-nav a[aria-current] {
    color:#fff
}
.nav-actions {
    display:flex;
    align-items:center;
    gap:22px
}
.account-link {
    font-size:.78rem;
    color:var(--muted)
}
.download-button {
    font-size:.76rem;
    padding:9px 14px;
    min-height:38px
}
.menu-button {
    display:none;
    background:none;
    font-size:1.3rem;
    padding:8px
}
/* Intro */
.store-intro {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    padding:76px 0 55px
}
.store-intro .eyebrow {
    color:var(--accent);
    margin-bottom:24px
}
.store-intro h1 {
    font-size:clamp(3.3rem,6.5vw,5.5rem);
    font-weight:650;
    letter-spacing:-.065em;
    line-height:1.03;
    margin-bottom:24px
}
.store-intro h1 span {
    color:var(--accent)
}
.store-intro p {
    font-size:.94rem;
    line-height:1.85;
    color:var(--muted)
}
.intro-aside {
    padding-bottom:5px;
    text-align:right
}
.intro-label {
    display:block;
    font-size:.74rem;
    color:#727e92;
    margin-bottom:12px
}
.intro-aside a {
    font-size:.78rem;
    color:#d2dbea
}
.intro-aside a span {
    margin-left:20px
}
/* Catalogue controls */
.catalog-tools {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.filter-buttons {
    display:flex;
    gap:6px
}
.filter-buttons button {
    background:transparent;
    color:var(--muted);
    border-radius:6px;
    padding:9px 16px;
    font-size:.78rem;
    white-space:nowrap
}
.filter-buttons button:hover {
    color:#fff
}
.filter-buttons button[aria-pressed=true] {
    background:#e7eeff;
    color:#1b2436
}
.store-search {
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:6px;
    background:#11151c;
    color:#6f7d94;
    width:240px
}
.store-search input {
    color:#e6edf8;
    background:none;
    border:0;
    outline:0;
    min-width:0;
    width:100%;
    font-size:.78rem
}
.store-search:focus-within {
    border-color:var(--accent)
}
.store-search input::placeholder {
    color:#8490a4
}
.store-search svg {
    width:16px;
    height:16px
}
.catalog-count {
    color:#8490a4;
    font-size:.69rem;
    letter-spacing:.02em;
    padding:17px 0
}
.catalog-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:44px 0 22px
}
.catalog-heading h2 {
    font-size:1.35rem;
    font-weight:600
}
.catalog-heading>span {
    font-size:.74rem;
    color:#8490a4
}
/* Use the same transparent logos and blurred backgrounds as the homepage cards. */
.game-art {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:#101319
}
.game-art::before {
    content:'';
    position:absolute;
    inset:-12px;
    z-index:-1;
    background:var(--game-art-background) center / cover no-repeat;
    filter:blur(5px) brightness(.6);
    pointer-events:none
}
.game-art-gta5 {
    --game-art-background:url('/assets/images/games/gta5.webp')
}
.game-art-rdr2 {
    --game-art-background:url('/assets/images/games/rdr2.webp')
}
.game-art>.game-logo {
    width:100%;
    height:100%;
    object-fit:contain;
    padding:8% 18%;
    filter:drop-shadow(0 3px 8px #0008)
}
.game-art-rdr2>.game-logo {
    padding:12% 10%
}
.game-art>.product-badge {
    z-index:1
}
/* GTA 5 featured edition selector */
.featured-product {
    display:grid;
    grid-template-columns:1.25fr 1fr;
    border:1px solid var(--line-strong);
    border-radius:13px;
    overflow:hidden;
    background:var(--panel)
}
.featured-art {
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:485px;
    background:#101319
}
.featured-banner {
    height:250px;
    flex-shrink:0
}
.featured-copy {
    padding:24px 32px 30px
}
.featured-label {
    display:inline-block;
    font-size:.61rem;
    letter-spacing:.14em;
    color:#f7d2b1;
    margin-bottom:18px
}
.featured-copy h2 {
    font-size:2.4rem;
    font-weight:650;
    letter-spacing:-.06em;
    line-height:1.02
}
.featured-copy p {
    margin:18px 0;
    color:#ced0d6;
    font-size:.86rem;
    line-height:1.7
}
.featured-copy>a {
    font-size:.78rem;
    font-weight:550
}
.featured-copy>a span {
    margin-left:18px
}
.plan-panel {
    padding:30px 32px;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.plan-heading .eyebrow {
    margin-bottom:10px;
    color:var(--accent)
}
.plan-heading h3 {
    font-size:1.6rem;
    font-weight:600;
    letter-spacing:-.04em
}
.plan-heading p {
    font-size:.78rem;
    color:var(--muted);
    margin-top:8px
}
.plan-options {
    border:0;
    display:grid;
    gap:9px;
    margin:23px 0 18px;
    min-width:0
}
.plan-option {
    display:flex;
    align-items:center;
    gap:12px;
    position:relative;
    cursor:pointer;
    border:1px solid var(--line-strong);
    border-radius:7px;
    padding:13px 14px;
    min-width:0;
    background:#0d1016
}
.plan-option:has(input:checked) {
    border-color:#88a8ee;
    background:#192135
}
.plan-option:has(input:focus-visible) {
    outline:2px solid var(--accent);
    outline-offset:3px
}
.plan-option input {
    position:absolute;
    opacity:0;
    width:1px;
    height:1px
}
.plan-radio {
    width:14px;
    height:14px;
    flex-shrink:0;
    border:1px solid #58657a;
    border-radius:50%
}
.plan-option:has(input:checked) .plan-radio {
    border:4px solid var(--accent)
}
.plan-info {
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0
}
.plan-info strong {
    font-size:.8rem;
    font-weight:600
}
.plan-info small {
    font-size:.67rem;
    color:var(--muted)
}
.plan-price {
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-left:auto;
    padding-left:8px;
    white-space:nowrap
}
.plan-price strong {
    font-size:1.1rem;
    font-weight:650
}
.plan-price del {
    font-size:.7rem;
    color:#8892a4
}
.plan-panel>.button {
    width:100%
}
.plan-foot {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:15px;
    font-size:.7rem;
    color:var(--muted)
}
.plan-foot .text-button {
    font-size:.7rem
}
.no-js-buy {
    display:none
}
/* Product cards */
.product-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}
.store-card {
    display:flex;
    flex-direction:column;
    border:1px solid var(--line-strong);
    border-radius:11px;
    background:var(--panel);
    overflow:hidden;
    transition:border-color .2s
}
.store-card:hover {
    border-color:#627592
}
.card-art {
    display:block;
    aspect-ratio:16/9;
    position:relative;
    overflow:hidden;
    background:#151d2b
}
.card-art>img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s
}
.store-card:hover .card-art>img {
    transform:scale(1.025)
}
.product-badge {
    position:absolute;
    left:15px;
    top:15px;
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.02em;
    border:1px solid #ffffff25;
    background:#0a0f19dc;
    color:#e4eaf5;
    backdrop-filter:blur(8px);
    padding:4px 9px;
    border-radius:4px
}
.badge-free, .badge-online {
    color:#b7ebce
}
.badge-upcoming {
    color:#f0d29c
}
.card-body {
    display:flex;
    flex-direction:column;
    flex:1;
    padding:22px
}
.card-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}
.card-heading h3 {
    font-size:1.22rem;
    font-weight:600
}
.card-arrow {
    color:#8190a9;
    font-size:1rem
}
.card-description {
    color:var(--muted);
    font-size:.78rem;
    line-height:1.8;
    margin:12px 0 18px
}
.feature-list {
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:26px
}
.feature-list li {
    padding:4px 8px;
    background:#ffffff04;
    border:1px solid var(--line);
    border-radius:4px;
    color:#afb9ca;
    font-size:.62rem;
    line-height:1.5
}
.card-bottom {
    margin-top:auto
}
.price-line {
    display:flex;
    align-items:baseline;
    gap:10px;
    padding-top:18px;
    border-top:1px solid var(--line);
    margin-bottom:15px
}
.price-line>strong {
    font-size:1.6rem;
    line-height:1.2;
    font-weight:600;
    letter-spacing:-.05em
}
.price-line del {
    color:#7f8aa0;
    font-size:.77rem
}
.price-line>span:not(.upcoming-price) {
    margin-left:auto;
    color:#8b97aa;
    font-size:.66rem
}
.card-actions {
    display:flex;
    align-items:center;
    gap:17px
}
.card-actions>.button {
    flex:1;
    font-size:.73rem;
    padding:11px 13px
}
.card-actions>.details-link {
    font-size:.73rem
}
.free-option {
    margin-top:13px;
    font-size:.68rem
}
.upcoming-price {
    font-size:1.05rem;
    color:#b5becd;
    font-weight:500
}
.sandbox-art {
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    font-size:3rem;
    font-weight:800;
    letter-spacing:-.08em;
    background:linear-gradient(140deg,#122942,#192036);
    color:#7993bc
}
.empty-state {
    text-align:center;
    border:1px dashed var(--line-strong);
    border-radius:10px;
    padding:64px 20px
}
.empty-state h2 {
    font-size:1.6rem
}
.empty-state p {
    margin:16px 0 24px;
    color:var(--muted);
    font-size:.88rem
}
/* Information and support */
.how-section {
    margin-top:80px;
    padding:50px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.how-section h2 {
    font-size:1.85rem;
    font-weight:550
}
.how-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px;
    margin-top:34px
}
.step-number {
    display:block;
    font-size:.68rem;
    color:var(--accent);
    margin-bottom:20px;
    font-variant-numeric:tabular-nums
}
.how-grid h3 {
    font-size:1rem;
    font-weight:550;
    letter-spacing:-.02em;
    margin-bottom:12px
}
.how-grid p {
    color:var(--muted);
    font-size:.8rem;
    line-height:1.85
}
.how-grid a {
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:4px
}
.store-faq {
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:70px;
    margin:64px 0
}
.store-faq h2 {
    font-size:2rem;
    font-weight:550;
    line-height:1.2;
    margin-bottom:22px
}
.store-faq>div>a {
    font-size:.78rem;
    color:var(--accent)
}
.faq-list details {
    border-bottom:1px solid var(--line);
    padding:19px 0
}
.faq-list details:first-child {
    padding-top:0
}
.faq-list summary {
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:.85rem;
    font-weight:500
}
.faq-list summary::-webkit-details-marker {
    display:none
}
.faq-list summary::after {
    content:'+';
    color:var(--muted);
    font-size:1rem
}
.faq-list details[open] summary::after {
    content:'−'
}
.faq-list p {
    margin-top:16px;
    color:var(--muted);
    font-size:.81rem;
    line-height:1.85
}
.faq-list p a {
    color:var(--accent);
    text-decoration:underline
}
.support-banner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    margin:0 0 60px;
    padding:35px 38px;
    border:1px solid #a5c4ff26;
    background:#141b28;
    border-radius:10px
}
.support-banner .eyebrow {
    margin-bottom:12px;
    color:var(--accent)
}
.support-banner h2 {
    font-size:1.65rem;
    font-weight:550
}
.support-banner p {
    font-size:.83rem;
    color:var(--muted);
    margin-top:10px
}
.support-banner>div:last-child {
    display:flex;
    gap:12px
}
.store-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding-top:32px;
    padding-bottom:36px;
    border-top:1px solid var(--line)
}
.store-footer p {
    font-size:.72rem;
    color:#8190a3;
    margin-top:5px
}
.store-footer nav {
    display:flex;
    gap:24px;
    font-size:.73rem;
    color:var(--muted)
}
.store-footer>span {
    font-size:.7rem;
    color:#8290a3
}
/* Native modal dialogs provide keyboard focus trapping and Escape support. */
.store-dialog {
    position:fixed;
    inset:0;
    margin:auto;
    width:min(490px,calc(100% - 32px));
    max-height:calc(100dvh - 40px);
    overflow-y:auto;
    padding:36px;
    background:#131821;
    color:var(--text);
    border:1px solid #3c485d;
    border-radius:13px;
    box-shadow:0 32px 120px #0008
}
.store-dialog::backdrop {
    background:#04070dd9;
    backdrop-filter:blur(7px)
}
body:has(dialog[open]) {
    overflow:hidden
}
.dialog-close {
    position:absolute;
    top:12px;
    right:14px;
    width:30px;
    height:30px;
    border-radius:6px;
    background:#ffffff08;
    font-size:1.25rem;
    color:#aebbd0
}
.dialog-close:hover {
    background:#ffffff13
}
.store-dialog h2 {
    font-size:1.7rem;
    font-weight:600;
    margin-bottom:24px;
    padding-right:10px
}
.store-dialog .eyebrow {
    color:var(--accent)
}
.order-summary {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
    padding:17px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin-bottom:12px
}
.order-summary span {
    font-size:.88rem
}
.order-summary strong {
    font-size:1.5rem
}
.dialog-note {
    color:var(--muted);
    font-size:.8rem;
    line-height:1.8;
    margin-bottom:24px
}
.payment-method {
    display:flex;
    align-items:center;
    gap:14px;
    padding:17px 14px;
    border:1px solid var(--line-strong);
    border-radius:7px;
    margin-top:10px
}
.payment-method:hover {
    background:#ffffff05;
    border-color:var(--accent)
}
.payment-method-copy {
    flex:1;
    min-width:0
}
.payment-method strong {
    display:block;
    font-size:.85rem;
    font-weight:550
}
.payment-method small {
    display:block;
    font-size:.69rem;
    color:var(--muted);
    margin-top:3px
}
.method-icon {
    display:grid;
    place-items:center;
    flex:0 0 34px;
    width:34px;
    height:34px;
    align-self:flex-start;
    color:var(--accent)
}
.method-icon svg { width:25px; height:25px; }
.method-icon-bitcoin img { width:30px; height:30px; }
.payment-arrow { width:15px; height:15px; color:var(--muted); }
.payment-brands { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:13px; }
.payment-brands img { width:57px; height:25px; border-radius:4px; }
.payment-options { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.payment-option { display:inline-flex; align-items:center; gap:6px; padding:5px 7px; border:1px solid var(--line-strong); border-radius:5px; background:#ffffff05; font-size:.65rem; color:#dce3ee; }
.payment-option img { flex:none; width:19px; height:19px; }

.dialog-fine {
    font-size:.68rem;
    color:#929eb1;
    line-height:1.75;
    margin:20px 0 0
}
.store-dialog>.button {
    display:flex;
    width:100%;
    margin:20px 0 10px
}
.store-dialog>.details-link {
    display:inline-block;
    margin-top:12px
}
.free-steps {
    counter-reset:step;
    list-style:none;
    margin:0 0 22px
}
.free-steps li {
    position:relative;
    counter-increment:step;
    padding:10px 0 10px 40px;
    font-size:.84rem;
    color:#c7d0df
}
.free-steps li::before {
    content:counter(step);
    position:absolute;
    left:0;
    top:11px;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:5px;
    background:#253249;
    color:var(--accent);
    font-size:.72rem
}
.button[aria-disabled=true] {
    background:#283140;
    color:#98a6bb;
    cursor:wait;
    pointer-events:none
}
@media(max-width:1000px) {
    .store-nav {
        gap:18px
    }
    .header-inner {
        gap:20px
    }
    .brand span {
        display:none
    }
    .nav-actions {
        gap:15px
    }
    .product-grid {
        gap:16px
    }
    .card-body {
        padding:18px
    }
    .plan-panel {
        padding:26px
    }
    .featured-copy {
        padding:24px 28px 30px
    }
    .featured-copy h2 {
        font-size:3rem
    }
    .plan-price {
        gap:5px
    }
    .plan-price del {
        display:none
    }
    .how-grid {
        gap:28px
    }
    .store-footer nav {
        gap:16px
    }
}
@media(max-width:800px) {
    .store-shell {
        padding-left:22px;
        padding-right:22px
    }
    .header-inner {
        padding:0 22px;
        min-height:68px
    }
    .account-link {
        display:none
    }
    .store-intro {
        padding:50px 0 36px;
        align-items:flex-start
    }
    .intro-aside {
        display:none
    }
    .store-intro h1 {
        font-size:4rem
    }
    .catalog-tools {
        align-items:stretch;
        flex-direction:column;
        gap:14px
    }
    .filter-buttons {
        justify-content:space-between
    }
    .filter-buttons button {
        flex:1;
        padding:9px 10px
    }
    .store-search {
        width:100%
    }
    .featured-product {
        grid-template-columns:1fr 1fr
    }
    .featured-copy h2 {
        font-size:2.6rem
    }
    .featured-copy {
        padding:24px 23px 28px
    }
    .featured-label {
        font-size:.56rem
    }
    .plan-panel {
        padding:24px 20px
    }
    .plan-heading h3 {
        font-size:1.3rem
    }
    .plan-option {
        padding:12px 10px;
        gap:8px
    }
    .plan-info strong {
        font-size:.73rem
    }
    .plan-info small {
        font-size:.59rem
    }
    .plan-price strong {
        font-size:1rem
    }
    .plan-foot {
        flex-direction:column;
        align-items:center;
        gap:8px
    }
    .product-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .how-grid {
        gap:24px
    }
    .store-faq {
        gap:40px
    }
    .support-banner {
        padding:28px;
        flex-direction:column;
        align-items:flex-start
    }
    .store-footer {
        flex-wrap:wrap
    }
    .store-footer>span {
        width:100%
    }
    .catalog-heading>span {
        display:none
    }
}
@media(max-width:600px) {
    .store-nav {
        display:none;
        position:absolute;
        top:68px;
        left:0;
        right:0;
        background:#10151e;
        padding:18px 22px;
        border-bottom:1px solid var(--line-strong);
        gap:22px
    }
    .store-nav.is-open {
        display:flex
    }
    .menu-button {
        display:block
    }
    .nav-actions {
        gap:12px
    }
    .brand {
        font-size:1.3rem
    }
    .download-button {
        font-size:.7rem;
        min-height:34px;
        padding:8px 11px
    }
    .store-intro {
        padding:42px 0 32px
    }
    .store-intro h1 {
        font-size:3.5rem
    }
    .store-intro .eyebrow {
        font-size:.58rem;
        margin-bottom:20px
    }
    .store-intro p {
        font-size:.85rem
    }
    .desktop-break {
        display:none
    }
    .filter-buttons {
        gap:2px
    }
    .filter-buttons button {
        font-size:.68rem;
        padding:9px 6px
    }
    .catalog-count {
        padding:14px 0
    }
    .featured-product {
        grid-template-columns:1fr
    }
    .featured-art {
        min-height:330px
    }
    .featured-copy {
        padding:24px 26px 27px
    }
    .featured-copy h2 {
        font-size:3rem
    }
    .featured-copy p {
        font-size:.78rem
    }
    .featured-label {
        font-size:.6rem
    }
    .plan-panel {
        padding:26px
    }
    .plan-heading h3 {
        font-size:1.5rem
    }
    .plan-option {
        padding:14px 12px;
        gap:12px
    }
    .plan-info strong {
        font-size:.8rem
    }
    .plan-info small {
        font-size:.66rem
    }
    .plan-price strong {
        font-size:1.1rem
    }
    .plan-price del {
        display:inline
    }
    .plan-foot {
        flex-direction:row;
        font-size:.65rem;
        gap:8px
    }
    .plan-foot .text-button {
        font-size:.65rem
    }
    .product-grid {
        grid-template-columns:1fr;
        gap:20px
    }
    .card-body {
        padding:22px
    }
    .card-description {
        font-size:.81rem
    }
    .card-heading h3 {
        font-size:1.3rem
    }
    .catalog-heading {
        margin:34px 0 20px
    }
    .catalog-heading h2 {
        font-size:1.25rem
    }
    .how-section {
        margin-top:48px;
        padding:36px 0
    }
    .how-section h2 {
        font-size:1.6rem
    }
    .how-grid {
        grid-template-columns:1fr;
        gap:28px;
        margin-top:28px
    }
    .step-number {
        margin-bottom:10px
    }
    .how-grid h3 {
        margin-bottom:8px
    }
    .store-faq {
        grid-template-columns:1fr;
        gap:30px;
        margin:40px 0
    }
    .store-faq h2 {
        font-size:1.8rem
    }
    .support-banner {
        padding:24px;
        margin-bottom:36px
    }
    .support-banner h2 {
        font-size:1.45rem
    }
    .support-banner>div:last-child {
        flex-wrap:wrap
    }
    .support-banner .button {
        font-size:.72rem;
        padding:11px 13px
    }
    .store-footer {
        gap:22px
    }
    .store-footer nav {
        flex-wrap:wrap;
        gap:20px
    }
    .store-dialog {
        padding:30px 24px
    }
    .store-dialog h2 {
        font-size:1.5rem
    }
    .payment-method {
        padding:14px 10px;
        gap:10px
    }
}
/* Keep the language switcher, brand and navigation within narrow phones. */
@media(max-width:380px) {
    .header-inner { padding:0 12px; gap:8px; }
    .header-inner .i18n-lead { gap:8px; }
    .header-inner .i18n-toggle { padding:7px 8px; gap:4px; }
    .nav-actions { gap:6px; }
    .download-button { padding:8px; gap:6px; }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*::before,*::after {
        animation:none!important;
        transition:none!important
    }
}

/* Access sections stay readable in both the full catalog and filtered views. */
[data-catalog-section] { scroll-margin-top:100px; }
.premium-grid { margin-top:22px; }
[data-catalog-section]>.catalog-heading { align-items:flex-end; }
.catalog-heading .eyebrow { margin-bottom:10px; }
.free-heading { padding-top:22px; }
.free-heading h2 { font-size:1.1rem; letter-spacing:.08em; }
.free-heading p { max-width:640px; color:var(--muted); font-size:.82rem; line-height:1.8; margin-top:12px; }
.free-heading>.button { flex-shrink:0; }
.collection-link { margin-top:22px; font-size:.8rem; color:var(--muted); }
.collection-link a:hover { color:var(--text); }
.card-art.tf2-card-art { background:linear-gradient(#0002,#0005),url('/assets/images/tf2/background-v1.webp') center/cover; }
.card-art.tf2-card-art>img { object-fit:contain; padding:48px 26px; filter:drop-shadow(0 4px 10px #0009); }
.card-art.logo-art { display:flex; align-items:center; justify-content:center; background:var(--panel); padding:44px 30px 26px; }
.card-art.logo-art>img { width:100%; height:100%; max-height:128px; object-fit:contain; }
@media(max-width:620px) { .free-heading { flex-direction:column; align-items:flex-start!important; } .free-heading>.button { align-self:flex-start; } }