/* Variables: colors */
:root {
    --color-bg-page: #102120;
    --color-bg-page-top: #1a3d3a;
    --color-bg-surface: #1b2827;
    --color-bg-card: #1b3836;
    --color-bg-card-alt: #1b4b48;
    --color-bg-overlay: rgb(7 20 19 / 78%);
    --color-bg-topbar: rgb(16 33 32 / 95%);
    --color-text-main: #ffffff;
    --color-text-soft: #d6e8df;
    --color-text-dark: #1b2827;
    --color-accent: #ffd36c;
    --color-accent-soft: #ffe5aa;
    --color-border: #2f615d;
    --color-border-strong: #439d97;
    --color-line-muted: rgb(255 255 255 / 8%);
    --color-chip-bg: rgb(255 255 255 / 6%);
    --color-chip-border: rgb(255 255 255 / 9%);
    --color-hero-mask: linear-gradient(90deg, rgb(0 0 0 / 58%) 0%, rgb(0 0 0 / 28%) 46%, rgb(0 0 0 / 8%) 100%);
    --color-provider-bg: linear-gradient(181deg, #1f5653 1%, #1b4b48 24% 76%, #1f5653 99%);

    /* Variables: typography */
    --font-family-base: "InterVar", "Segoe UI", sans-serif;
    --font-size-body: clamp(0.94rem, 0.2vw + 0.89rem, 1rem);
    --font-size-menu: clamp(0.9rem, 0.15vw + 0.87rem, 0.98rem);
    --font-size-title: clamp(1.2rem, 1vw + 1rem, 2rem);
    --font-size-hero: clamp(1.45rem, 1.85vw + 0.95rem, 3rem);
    --font-size-button: clamp(0.9rem, 0.2vw + 0.85rem, 1rem);
    --font-size-small: clamp(0.75rem, 0.18vw + 0.71rem, 0.88rem);
    --line-height-base: clamp(1.35, 0.1vw + 1.32, 1.45);
    --line-height-tight: clamp(1.05, 0.05vw + 1.02, 1.15);

    /* Variables: container and spacing */
    --container-max: clamp(75rem, 93.75vw, 75rem);
    --space-page-y: clamp(1.25rem, 1.2vw + 0.95rem, 2.25rem);
    --space-container-x: clamp(0.88rem, 1vw + 0.6rem, 1.5rem);
    --space-2xs: clamp(0.38rem, 0.35vw + 0.28rem, 0.62rem);
    --space-xs: clamp(0.55rem, 0.45vw + 0.42rem, 0.88rem);
    --space-sm: clamp(0.75rem, 0.6vw + 0.55rem, 1.13rem);
    --space-md: clamp(1rem, 0.8vw + 0.75rem, 1.5rem);
    --space-lg: clamp(1.35rem, 1vw + 1.05rem, 2rem);
    --space-xl: clamp(1.8rem, 1.45vw + 1.35rem, 2.9rem);

    /* Variables: sizes and radius */
    --line-thin: clamp(0.06rem, 0.06vw + 0.04rem, 0.08rem);
    --radius-soft: clamp(0.55rem, 0.35vw + 0.45rem, 0.75rem);
    --radius-card: clamp(0.75rem, 0.5vw + 0.62rem, 1.06rem);
    --radius-pill: clamp(1.35rem, 0.7vw + 1.15rem, 1.75rem);
    --blur-topbar: clamp(0.18rem, 0.3vw + 0.1rem, 0.45rem);
    --size-logo: clamp(7rem, 3vw + 6rem, 9.6rem);
    --size-button-min: clamp(2.1rem, 0.9vw + 1.8rem, 2.8rem);
    --size-button-pad-x: clamp(0.9rem, 0.85vw + 0.65rem, 1.6rem);
    --size-menu-icon: clamp(1.55rem, 0.5vw + 1.4rem, 1.9rem);
    --header-min: clamp(3.75rem, 0.85vw + 3.45rem, 4.4rem);
    --hero-min: clamp(18rem, 8vw + 15.6rem, 31.9rem);
    --hero-copy-max: clamp(14rem, 16vw + 8.5rem, 28rem);
    --hero-pad-x: clamp(1rem, 2vw + 0.45rem, 3rem);
    --size-letter-wide: clamp(0.01em, 0.05vw + 0em, 0.03em);
    --size-letter-mid: clamp(0.01em, 0.04vw + 0em, 0.03em);
    --slot-thumb: clamp(11rem, 5vw + 9.5rem, 12.2rem);
    --size-play-min: clamp(1.95rem, 0.65vw + 1.75rem, 2.3rem);
    --size-play-pad-x: clamp(1.05rem, 0.55vw + 0.88rem, 1.4rem);
    --size-provider-min: clamp(4.3rem, 2vw + 3.7rem, 6rem);
    --size-provider-logo-w: clamp(4.2rem, 2.5vw + 3.45rem, 6.8rem);
    --size-provider-logo-h: clamp(1.7rem, 1vw + 1.4rem, 2.4rem);
    --size-pay-w: clamp(4.8rem, 4vw + 3.5rem, 8.4rem);
    --size-pay-h: clamp(2rem, 1.6vw + 1.6rem, 3rem);
    --size-safe-w: clamp(2.6rem, 1.5vw + 2.2rem, 3.6rem);
    --size-safe-h: clamp(1.7rem, 0.95vw + 1.42rem, 2.3rem);
    --mobile-menu-max: clamp(15rem, 30vw + 6rem, 21rem);

    /* Variables: shadows and motion */
    --shadow-soft: 0 0 clamp(0.75rem, 1vw + 0.45rem, 1.5rem) rgb(0 0 0 / 30%);
    --shadow-accent: 0 0 clamp(0.55rem, 0.7vw + 0.35rem, 1rem) rgb(255 211 108 / 42%);
    --transition-fast: 220ms ease;
}

/* Fonts */
@font-face {
    font-family: "InterVar";
    src: url("../fonts/Inter-VariableFont_slnt,wght.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

/* Base */
* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    color: var(--color-text-main);
    background: radial-gradient(circle at 25% 0%, var(--color-bg-page-top), var(--color-bg-page));
}

main {
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.container {
    width: min(var(--container-max), calc(100% - (var(--space-container-x) * 2)));
    margin-inline: auto;
}

/* Header */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg-topbar);
    border-bottom: var(--line-thin) solid var(--color-border);
    backdrop-filter: blur(var(--blur-topbar));
}

.topbar-layout {
    min-height: var(--header-min);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.brand {
    width: var(--size-logo);
    flex: 0 0 auto;
}

.main-nav {
    margin-inline: auto;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.nav-list a {
    font-size: var(--font-size-menu);
    font-weight: 650;
    color: var(--color-text-soft);
    transition: color var(--transition-fast);
}

.nav-list a:hover,
.nav-list a:focus-visible {
    color: var(--color-accent);
}

.action-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Buttons */
.link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-button-min);
    padding-inline: var(--size-button-pad-x);
    border-radius: var(--radius-pill);
    border: var(--line-thin) solid transparent;
    font-size: var(--font-size-button);
    font-weight: 760;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.link-btn.primary {
    background: var(--color-accent);
    color: var(--color-text-dark);
}

.link-btn.primary:hover,
.link-btn.primary:focus-visible {
    box-shadow: var(--shadow-accent);
}

.link-btn.ghost {
    background: transparent;
    color: var(--color-text-main);
    border-color: var(--color-border);
}

.link-btn.ghost:hover,
.link-btn.ghost:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Burger and mobile nav */
.menu-toggle {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--color-text-main);
    display: none;
    align-items: center;
    gap: var(--space-xs);
    padding: 0;
    cursor: pointer;
}

.menu-lines {
    width: var(--size-menu-icon);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.menu-lines span {
    display: block;
    width: 100%;
    height: var(--line-thin);
    background: var(--color-accent);
    border-radius: var(--radius-pill);
}

.mobile-nav {
    display: none;
    border-top: var(--line-thin) solid var(--color-border);
    background: var(--color-bg-surface);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height var(--transition-fast), opacity var(--transition-fast), visibility var(--transition-fast);
    transform-origin: top;
}

.mobile-nav[data-open="true"] {
    max-height: var(--mobile-menu-max);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: min(var(--container-max), calc(100% - (var(--space-container-x) * 2)));
    margin-inline: auto;
    padding-block: var(--space-md);
}

.mobile-list a {
    display: block;
    width: 100%;
    padding-block: var(--space-xs);
    color: var(--color-text-soft);
    border-bottom: var(--line-thin) solid var(--color-line-muted);
}

.mobile-list a:hover,
.mobile-list a:focus-visible {
    color: var(--color-accent);
}

/* Hero */
.hero-wrap {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
}

.hero-card {
    position: relative;
    min-height: var(--hero-min);
    border-radius: var(--radius-card);
    overflow: hidden;
    border: var(--line-thin) solid var(--color-border);
    box-shadow: var(--shadow-soft);
}

.hero-card > figure {
    margin: 0;
}

.hero-card img {
    min-height: var(--hero-min);
    object-fit: cover;
}

.hero-layer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-lg);
    padding-inline: var(--hero-pad-x);
    padding-block: var(--space-lg);
    background: var(--color-hero-mask);
}

.hero-text {
    margin: 0;
    max-width: var(--hero-copy-max);
    font-size: var(--font-size-hero);
    line-height: var(--line-height-tight);
    font-weight: 880;
    letter-spacing: var(--size-letter-wide);
    text-transform: uppercase;
}

/* Generic section */
.content-section {
    padding-bottom: var(--space-xl);
}

.section-title {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-title);
    font-weight: 840;
    color: var(--color-accent-soft);
    letter-spacing: var(--size-letter-mid);
}

/* Slots section */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-sm);
}

.slot-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
    border: var(--line-thin) solid var(--color-border);
    min-height: var(--slot-thumb);
    background: var(--color-bg-card-alt);
}

.slot-card > figure {
    margin: 0;
}

.slot-card img {
    min-height: var(--slot-thumb);
    object-fit: cover;
}

.slot-overlay {
    position: absolute;
    inset: 0;
    background: var(--color-bg-overlay);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.slot-content {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-sm);
}

.play-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-play-min);
    padding-inline: var(--size-play-pad-x);
    border-radius: var(--radius-pill);
    border: var(--line-thin) solid var(--color-accent);
    background: var(--color-accent);
    color: var(--color-text-dark);
    font-size: var(--font-size-button);
    font-weight: 800;
    opacity: 0;
    transform: translateY(var(--space-sm));
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.slot-card:hover .slot-overlay,
.slot-card:focus-within .slot-overlay {
    opacity: 1;
}

.slot-card:hover .play-link,
.slot-card:focus-within .play-link {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Providers section */
.provider-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-sm);
}

.provider-card {
    min-height: var(--size-provider-min);
    background: var(--color-provider-bg);
    border: var(--line-thin) solid var(--color-border);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.provider-card > figure {
    margin: 0;
}

.provider-card:hover,
.provider-card:focus-within {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-soft);
}

.provider-card img {
    width: var(--size-provider-logo-w);
    max-height: var(--size-provider-logo-h);
    object-fit: contain;
}

/* Footer */
.page-footer {
    border-top: var(--line-thin) solid var(--color-border);
    background: var(--color-bg-surface);
    padding-block: var(--space-xl);
}

.payment-strip {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: var(--line-thin) solid var(--color-border);
}

.footer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
    gap: var(--space-lg);
    align-items: start;
}

.footer-brand img {
    width: var(--size-logo);
}

.footer-brand figure {
    margin: 0;
}

.small-copy {
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-small);
    color: var(--color-text-soft);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.footer-title {
    margin: 0 0 var(--space-xs);
    color: var(--color-accent-soft);
    font-size: var(--font-size-button);
    font-weight: 780;
}

.footer-group ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-group a {
    color: var(--color-text-soft);
    font-size: var(--font-size-small);
    transition: color var(--transition-fast);
}

.footer-group a:hover,
.footer-group a:focus-visible {
    color: var(--color-accent);
}

.footer-badges {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.payment-row,
.safe-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
}

.payment-row > figure,
.safe-row > figure {
    margin: 0;
}

.payment-row img {
    width: var(--size-pay-w);
    height: var(--size-pay-h);
    object-fit: contain;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.safe-row img {
    width: var(--size-safe-w);
    height: var(--size-safe-h);
    object-fit: contain;
}

/* Media queries: layout only */
@media screen and (max-width: 75rem) {
    .slot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .provider-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

}

@media screen and (max-width: 60rem) {
    .main-nav {
        display: none;
    }

    .action-row {
        margin-left: auto;
    }

    .action-row .ghost {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
        margin-left: var(--space-sm);
    }

    .mobile-nav {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
    }

    .footer-layout,
    .footer-links {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 48rem) {
    .slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .provider-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .provider-card {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

/* Content pages */
.content-page {
    padding-block: var(--space-lg) var(--space-xl);
}

.content-article {
    background: linear-gradient(180deg, rgb(27 56 54 / 70%) 0%, rgb(27 40 39 / 92%) 100%);
    border: var(--line-thin) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: var(--space-xl);
    margin-top: 30px;
    margin-bottom: 30px;
}

.content-article h1,
.content-article h2,
.content-article h3,
.content-article h4 {
    margin: 0 0 var(--space-sm);
    line-height: 1.28;
}

.content-article h1 {
    font-size: clamp(1.5rem, 1.2vw + 1.15rem, 2.2rem);
    color: var(--color-accent-soft);
}

.content-article h2 {
    font-size: clamp(1.2rem, 0.8vw + 1.05rem, 1.75rem);
    color: var(--color-accent-soft);
}

.content-article h3 {
    font-size: clamp(1.02rem, 0.5vw + 0.92rem, 1.25rem);
}

.content-article h4 {
    font-size: clamp(0.98rem, 0.35vw + 0.9rem, 1.15rem);
}

.content-article p {
    margin: 0 0 var(--space-sm);
    color: var(--color-text-soft);
}

.content-section p a {
    color: var(--color-accent);
}

.content-article strong {
    color: var(--color-text-main);
}

.content-article .content-section + .content-section {
    margin-top: var(--space-lg);
}

.content-article .content-section {
    padding-bottom: 0;
}

.content-media .app-phone-image {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 24px auto;
  }

.content-article .content-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.content-article ul,
.content-article ol {
    margin: 0 0 var(--space-md);
    padding-left: 1.2rem;
    color: var(--color-text-soft);
}

.content-article ul {
    list-style: disc;
}

.content-article ol {
    list-style: decimal;
}

.content-article li {
    margin-bottom: var(--space-2xs);
}

.content-article figure {
    margin: 0 0 var(--space-md);
}

.content-article figure.content-media,
.content-article .content-card > figure,
.content-article .registration-media > figure,
.content-article figure:has(img) {
    margin: 0;
}

.content-article table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: var(--radius-soft);
    border: var(--line-thin) solid var(--color-border);
    background: rgb(16 33 32 / 48%);
}

.content-article th,
.content-article td {
    border: var(--line-thin) solid var(--color-line-muted);
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
    vertical-align: top;
}

.content-article th {
    background: rgb(255 211 108 / 10%);
    color: var(--color-accent-soft);
    font-weight: 760;
}

figure.article-table-wrap {
    margin: 1rem 0 1.35rem;
    overflow-x: auto;
}

figure.article-table-wrap table {
    width: 100%;
    min-width: min(560px, calc(100vw - 1.2rem));
    border-collapse: collapse;
}

.content-media {
    margin: 0;
    text-align: center;
}

.content-media img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: var(--radius-soft);
    border: var(--line-thin) solid var(--color-border);
}

.media-layout {
    display: grid;
    gap: var(--space-md);
    align-items: center;
}

.media-layout--side {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
}

.media-layout--right {
    grid-template-columns: minmax(0, 1fr) minmax(15.625rem, 21.875rem);
    align-items: start;
}

.media-layout--right > :first-child {
    order: 2;
}

.media-layout--right > :last-child {
    order: 1;
}

.media-layout--right .content-media {
    justify-self: end;
    align-self: end;
    margin: 0;
}

.content-article .media-cta {
    margin: 0.5rem 0 0;
    text-align: center;
}

.content-page-index .toc-panel-wrap {
    margin-bottom: var(--space-lg);
}

.content-page-index .toc-panel {
    border: var(--line-thin) solid var(--color-border);
    border-radius: var(--radius-soft);
    background: rgb(255 255 255 / 3%);
    padding: var(--space-sm);
}

.content-page-index .toc-panel summary {
    cursor: pointer;
    font-weight: 780;
    color: var(--color-accent-soft);
}

.content-page-index .toc-panel nav {
    margin-top: var(--space-sm);
    display: grid;
    gap: var(--space-2xs);
}

.content-page-index .toc-panel nav a {
    color: var(--color-text-soft);
    border-bottom: var(--line-thin) solid var(--color-line-muted);
    padding-bottom: var(--space-2xs);
}

.content-page-index .toc-panel nav a:hover,
.content-page-index .toc-panel nav a:focus-visible {
    color: var(--color-accent);
}

.faq-list {
    display: grid;
    gap: var(--space-sm);
}

.faq-item {
    border: var(--line-thin) solid var(--color-border);
    border-radius: var(--radius-soft);
    background: transparent;
    padding: 0.5rem 0.8rem;
}

.spoiler-toggle {
    margin: 0;
    cursor: pointer;
    color: var(--color-accent-soft);
    font-weight: 760;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-xs);
    line-height: 1.3;
}

.spoiler-toggle::after {
    content: "+";
    color: var(--color-accent);
    font-weight: 880;
}

.spoiler-toggle:focus-visible {
    outline: var(--line-thin) solid var(--color-accent);
    outline-offset: var(--space-2xs);
}

.spoiler-content {
    margin: 0;
    display: none;
    padding-top: 0;
}

.faq-item.is-open .spoiler-toggle::after {
    content: "−";
}

.faq-item.is-open .spoiler-content {
    display: block;
    padding-top: 0.35rem;
}

.registration-media {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

.registration-media .content-media {
    flex: 0 1 25rem;
}

.registration-cta {
    margin-top: var(--space-xs);
    text-align: center;
}

@media screen and (max-width: 60rem) {
    .content-article {
        padding: var(--space-lg);
    }

    .media-layout--side {
        grid-template-columns: 1fr;
    }

    .media-layout--right .content-media {
        justify-self: center;
        align-self: start;
    }
}

@media screen and (max-width: 48rem) {
    .content-page {
        padding-block: var(--space-md) var(--space-lg);
    }

    .content-article {
        padding: var(--space-md);
    }

    .content-article th,
    .content-article td {
        font-size: var(--font-size-small);
    }
}