:root {
    --text-light-a0: #f8f8f8;
    --text-muted-a10: #d2d2d2;

    --theme-primary-a0: #ff4050;
    --theme-primary-a10: #ff5b62;
    --theme-primary-a20: #ff7173;
    --theme-primary-a30: #ff8584;
    --theme-primary-a40: #ff9896;
    --theme-primary-a50: #ffaaa7;

    --theme-accent-a0: #f7bc45;
    --theme-accent-a10: #f8c35e;

    --theme-surface-a0: #141218;
    --theme-surface-a10: #26232e;
    --theme-surface-a50: #857f95;

    --theme-surface-tonal-a0: #21172c;
    --theme-surface-tonal-a10: #372949;
    --theme-surface-tonal-a20: #4a3c60;
    --theme-surface-tonal-a30: #5f5279;

    --theme-info-a0: #87d1ff;
    --max-width: 1200px;
    --radius: 0.75rem;
    --gutter: clamp(8px, 4.5vw, 75px);
    --section-gap: clamp(2rem, 4.5vw, 4rem);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding-inline: var(--gutter);
    background: var(--theme-surface-a0);
    color: var(--text-muted-a10);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
}

/* height: auto is load-bearing. The width/height attributes are presentational hints
   for the CSS properties of the same name, so leaving height standing makes both axes
   definite and any aspect-ratio below is ignored. */
img,
video {
    max-width: 100%;
    display: block;
    height: auto;
}

a {
    color: var(--theme-primary-a0);
}

h1, h2, h3 {
    line-height: 1.2;
}

h2 {
    text-wrap: balance;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}

.skip-link:focus {
    left: var(--gutter);
    z-index: 10;
    padding: 0.5rem 1rem;
    background: var(--theme-surface-a10);
    color: var(--text-light-a0);
    border-radius: 0 0 var(--radius) var(--radius);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.75rem, 2vw, 1rem);
    max-width: var(--max-width);
    height: 80px;
    margin-block: 1rem;
    margin-inline: auto;
    padding-inline: clamp(0.75rem, 2vw, 1.25rem);
    background: var(--theme-surface-a10);
    border-radius: var(--radius);
}

.site-header__brand {
    display: block;
    flex: none;
}

.site-header__brand img {
    height: 48px;
    width: auto;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem clamp(0.75rem, 2.5vw, 1rem);
    border: 2px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    /* In a custom property so a button needing one more transition can extend the list.
       transition is a shorthand: redeclaring it drops every entry not repeated. */
    --btn-transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
    transition: var(--btn-transition);
}

.btn:focus-visible {
    outline: 2px solid var(--theme-info-a0);
    outline-offset: 2px;
}

.btn:is(:hover, :focus-visible) {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.5rem -0.1875rem var(--glow);
}

.btn--primary {
    --glow: color-mix(in srgb, var(--theme-primary-a0) 40%, transparent);
    position: relative;
    overflow: hidden;
    background: var(--theme-primary-a0);
    color: var(--theme-surface-a0);
}

.btn--primary:hover {
    background: var(--theme-primary-a10);
}

.btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgb(255 255 255 / 0.45) 50%, transparent 75%);
    transform: translateX(-100%);
    pointer-events: none;
}

.btn--primary:is(:hover, :focus-visible)::after {
    animation: btn-sheen 350ms ease-out;
}

@keyframes btn-sheen {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

.btn--accent {
    --glow: color-mix(in srgb, var(--theme-accent-a0) 50%, transparent);
    background: transparent;
    border-color: var(--theme-accent-a0);
    color: var(--theme-accent-a0);
}

.btn--accent:hover {
    border-color: var(--theme-accent-a10);
    color: var(--theme-accent-a10);
}

.btn--sm {
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.btn--sm .btn__icon {
    width: 1.125rem;
    height: 1.125rem;
}

.btn__icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    background: currentColor;
    transition: transform 200ms ease;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.btn__icon--new-tab {
    --icon: url("/images/open-new-tab.svg");
}

.btn__icon--game {
    --icon: url("/images/demo-game-icon.svg");
}

.btn:is(:hover, :focus-visible) .btn__icon {
    transform: translate(0.125rem, -0.125rem);
}

@media (max-width: 600px) {
    .site-header {
        height: auto;
        padding-block: 0.75rem;
    }

    .site-header__brand img {
        height: 40px;
    }

    .site-header__actions {
        flex: 1;
    }

    .site-header__actions .btn {
        flex: 1;
        justify-content: center;
        gap: 0.375rem;
        padding: 0.5rem 0.625rem;
        font-size: 0.875rem;
    }

    .site-header__actions .btn__icon {
        width: 1rem;
        height: 1rem;
    }
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: var(--max-width);
    margin-inline: auto;
    padding-block: clamp(1rem, 3vw, 2.5rem);
}

.hero__copy h1 {
    margin-block: 0 1rem;
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    background-image: linear-gradient(100deg,
        var(--theme-primary-a0) 44%,
        var(--theme-primary-a50) 50%,
        var(--theme-primary-a0) 56%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: h1-sheen 4s linear infinite;
}

@keyframes h1-sheen {
    0% {
        background-position: 100% 0;
    }
    60%, 100% {
        background-position: 0% 0;
    }
}

@media (forced-colors: active) {
    .hero__copy h1,
    .error__code {
        background-image: none;
        color: CanvasText;
        -webkit-text-fill-color: currentColor;
    }
}

.hero__lede {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
}

.hero__media img {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
}

.hero__stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.hero__stat {
    padding: 0.875rem 1rem;
    background: var(--theme-surface-a10);
    border-radius: var(--radius);
}

.hero__stat dt {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-primary-a20);
}

.hero__stat dd {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-light-a0);
}

.error {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1rem;
    max-width: var(--max-width);
    min-height: min(60vh, 30rem);
    margin-inline: auto;
    padding-block: clamp(2rem, 8vw, 5rem);
    text-align: center;
}

.error__code {
    margin: 0;
    font-size: clamp(5rem, 22vw, 11rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    background-image: linear-gradient(180deg, var(--theme-primary-a0), var(--theme-primary-a40));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.error__lede {
    max-width: 44ch;
    margin: 0;
    color: var(--text-light-a0);
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    text-wrap: pretty;
}

.error .btn {
    margin-block-start: 0.75rem;
}

.table-of-contents {
    max-width: var(--max-width);
    margin-inline: auto;
    margin-block-start: var(--section-gap);
    padding: clamp(0.75rem, 2vw, 1.125rem) clamp(1rem, 3vw, 1.5rem);
    background: var(--theme-surface-a10);
    border-radius: var(--radius);
}

.table-of-contents summary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    width: 100%;
}

.table-of-contents h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-light-a0);
}

.table-of-contents ol {
    counter-reset: toc;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.125rem clamp(1rem, 3vw, 2rem);
    margin-block: 0.875rem 0;
    padding: 0;
    /* role="list" is in the markup: Safari drops list semantics with the marker. */
    list-style: none;
}

.table-of-contents li {
    counter-increment: toc;
}

.table-of-contents a {
    display: flex;
    gap: 0.5rem;
    padding-block: 0.3125rem;
    color: var(--text-muted-a10);
    font-size: 0.9375rem;
    text-decoration: none;
}

/* The / "" is empty alt text, keeping the number out of the accessibility tree where
   the ol already announces position in the list. */
.table-of-contents a::before {
    content: counter(toc) "." / "";
    flex: none;
    color: var(--theme-primary-a20);
    font-variant-numeric: tabular-nums;
}

.table-of-contents a:is(:hover, :focus-visible) {
    color: var(--theme-primary-a20);
    text-decoration: underline;
}

.section-card {
    --card-pad: clamp(1rem, 3vw, 2rem);
    max-width: var(--max-width);
    margin-inline: auto;
    margin-block-start: var(--section-gap);
    padding: var(--card-pad);
    background: var(--theme-surface-a10);
    border: 1px var(--theme-surface-tonal-a30) solid;
    border-radius: var(--radius);
}

.section-card--model {
    --model-w: clamp(11rem, 30vw, 18rem);
    --model-rise: 2.5rem;
    position: relative;
    background-color: var(--theme-surface-a0);
    background-image:
        linear-gradient(to bottom,
            color-mix(in srgb, var(--theme-surface-tonal-a20) 75%, transparent) 0%,
            var(--theme-surface-a0) 90%),
        url("/images/triple-nipple-game-background-render.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--model-w);
    gap: var(--card-pad);
    min-height: calc(var(--model-w) * 790 / 668 - var(--model-rise));
    margin-block-start: calc(var(--model-rise) + var(--section-gap));
}

.section-card__model {
    position: absolute;
    inset-inline-end: calc(var(--card-pad) - var(--model-w) * 62 / 668);
    inset-block-end: 0;
    width: var(--model-w);
    height: auto;
}

@media (max-width: 860px) {
    .section-card--model {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        /* Only the rise comes off, not the separation. Zeroing the whole margin left this
           section flush against whatever sat above it. */
        margin-block-start: var(--section-gap);
    }

    .section-card__model {
        position: static;
        justify-self: center;
        width: clamp(11rem, 45vw, 15rem);
        margin-block-end: calc(var(--card-pad) * -1);
    }
}

.section-card h2,
.demo h2,
.features h2,
.media h2,
.faq h2,
.casinos h2 {
    margin-block: 0 0.75rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--text-light-a0);
}

.section-card p {
    margin: 0;
    max-width: 70ch;
}

.steps {
    counter-reset: step;
    display: grid;
    gap: 0.75rem;
    margin-block: 1.5rem 0;
    padding: 0;
    /* role="list" is in the markup: Safari drops list semantics with the marker. */
    list-style: none;
}

.steps > li {
    --shot-w: clamp(8rem, 16vw, 11rem);
    counter-increment: step;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) var(--shot-w);
    gap: 0.25rem 1rem;
    padding: 1rem 1.25rem;
    background: var(--theme-surface-tonal-a10);
    border-radius: var(--radius);
}

.steps > li::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
    z-index: -1;
    background-image:
        linear-gradient(to right,
            color-mix(in srgb, var(--theme-surface-a0) 92%, transparent) 0%,
            color-mix(in srgb, var(--theme-surface-a0) 78%, transparent) 55%,
            color-mix(in srgb, var(--theme-surface-a0) 40%, transparent) 100%),
        var(--step-shot, none);
    background-size: cover;
    background-position: center 0.5rem;
    background-repeat: no-repeat;
    filter: blur(4px);
    clip-path: inset(0.5rem round var(--radius));
}

.steps > li::before {
    content: counter(step) / "";
    grid-area: 1 / 1 / span 2 / auto;
    align-self: start;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    background: var(--theme-primary-a0);
    border-radius: 50%;
    color: var(--theme-surface-a0);
    font-size: 0.9375rem;
    font-weight: 700;
}

.steps > li h3 {
    grid-area: 1 / 2;
    margin: 0;
    font-size: 1.0625rem;
    color: var(--text-light-a0);
}

.steps > li p {
    grid-area: 2 / 2;
    font-size: 0.9375rem;
}

.steps > li strong {
    color: var(--text-light-a0);
    white-space: nowrap;
}

.step__shot {
    grid-area: 1 / 3 / span 2 / auto;
    align-self: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px var(--theme-surface-tonal-a30) solid;
    border-radius: calc(var(--radius) - 0.25rem);
}

@media (hover: hover) and (min-width: 861px) {
    .step__shot {
        position: relative;
        transform-origin: center right;
        transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
    }

    .steps > li:hover {
        z-index: 3;
    }

    .steps > li:hover .step__shot {
        transform: scale(1.5);
        border-color: var(--theme-primary-a0);
        box-shadow: 0 1rem 2rem -0.5rem rgb(0 0 0 / 0.6);
    }
}

.steps__cta {
    margin-block-start: 1.5rem;
}

.section-card .steps__note {
    margin-block-start: 1.25rem;
    font-size: 0.9375rem;
    color: color-mix(in srgb, var(--text-muted-a10) 70%, var(--theme-surface-a10));
}

@media (max-width: 600px) {
    .steps > li {
        padding: 0.875rem 1rem;
        gap: 0.25rem 0.75rem;
    }

    .steps > li::before {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.875rem;
    }

    .steps__cta {
        width: 100%;
        justify-content: center;
    }
}

.hero__notice {
    grid-column: 1 / -1;
    max-width: 88ch;
    margin: 0 auto;
    text-align: center;
    text-wrap: pretty;
    line-height: 100%;
    color: var(--theme-surface-a50);
}

.hero__age,
.site-footer__badge {
    display: inline-block;
    margin-inline-end: 0.25rem;
    padding-inline: 0.375rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-weight: 700;
}

@media (max-width: 860px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .steps > li {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .steps > li::after {
        background-image:
            linear-gradient(to bottom,
                color-mix(in srgb, var(--theme-surface-a0) 92%, transparent) 0%,
                color-mix(in srgb, var(--theme-surface-a0) 78%, transparent) 55%,
                color-mix(in srgb, var(--theme-surface-a0) 40%, transparent) 100%),
            var(--step-shot, none);
    }

    .step__shot {
        grid-area: 3 / 2;
        margin-block-start: 0.5rem;
        aspect-ratio: 5 / 3;
    }

    .hero__media img {
        max-width: 20rem;
    }
}

@media (max-width: 600px) {
    .hero {
        gap: 1rem;
    }

    .hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .hero__stat {
        padding: 0.75rem;
    }
}

.demo {
    max-width: var(--max-width);
    margin-inline: auto;
    margin-block-start: var(--section-gap);
}

.demo__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    overflow: hidden;
    background: var(--theme-surface-a10);
    border: 1px var(--theme-surface-tonal-a30) solid;
    border-radius: var(--radius);
    /* This carries id="demo-frame", the target of every "play the demo" link,
       so keep the frame off the viewport edge when jumped to. */
    scroll-margin-block-start: clamp(0.75rem, 2vw, 1.5rem);
}

.demo__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.5rem clamp(0.75rem, 2vw, 1.25rem);
}

.demo__bar--top {
    grid-row: 1;
}

.demo__bar--bottom {
    grid-row: 3;
}

.demo__preview,
.demo__iframe {
    grid-area: 2 / 1;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.demo__preview {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    transition: opacity 400ms ease;
    background-image:
        linear-gradient(to bottom,
            color-mix(in srgb, var(--theme-surface-a0) 55%, transparent),
            color-mix(in srgb, var(--theme-surface-a0) 75%, transparent)),
        url("/images/triple-nipple-game-demo-poster.webp");
    background-size: cover;
    background-position: center;
}

.demo__preview .btn--accent {
    background: var(--theme-surface-a10);
    transition: var(--btn-transition), opacity 250ms ease;
}

.demo__iframe {
    display: block;
    height: auto;
    border: 0;
}

.demo__preview > * {
    grid-area: 1 / 1;
}

.demo__loading {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    opacity: 0;
    transition: opacity 250ms ease;
    visibility: hidden;
    font-weight: 700;
    color: var(--text-light-a0);
    pointer-events: none;
}

.demo__spinner {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid color-mix(in srgb, var(--text-light-a0) 25%, transparent);
    border-top-color: var(--theme-accent-a0);
    border-radius: 50%;
    animation: demo-spin 800ms linear infinite;
}

@keyframes demo-spin {
    to {
        transform: rotate(360deg);
    }
}

.demo__stage.is-loading .demo__preview [data-demo-play] {
    opacity: 0;
    pointer-events: none;
}

.demo__stage.is-loading .demo__loading {
    opacity: 1;
    visibility: visible;
}

.demo__stage.is-ready .demo__preview {
    opacity: 0;
    pointer-events: none;
}

.demo__title {
    flex: none;
    height: 1.625rem;
    width: auto;
}

.demo__studio {
    flex: none;
    height: 1.125rem;
    width: auto;
}

.demo__partner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted-a10);
}

.demo__partner img {
    flex: none;
    height: 1.5rem;
    width: auto;
}

.demo h3 {
    margin-block: 1.5rem 0.75rem;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--text-light-a0);
}

.demo__expect {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-block: 0;
    padding: 0;
    /* role="list" is in the markup: Safari drops list semantics with the marker. */
    list-style: none;
}

.demo__expect li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--theme-surface-a10);
    border-radius: var(--radius);
    font-size: 0.9375rem;
}

.demo__expect strong {
    color: var(--text-light-a0);
}

.demo__expect-icon {
    flex: none;
    font-size: 1.125rem;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .demo__preview,
    .demo__iframe {
        aspect-ratio: 9 / 16;
    }

    .demo__expect {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }
}

.casinos {
    max-width: var(--max-width);
    margin-inline: auto;
    margin-block-start: var(--section-gap);
}

.casinos__lede {
    max-width: 80ch;
    margin: 0;
}

.casinos__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.25rem);
    margin-block-start: 1.5rem;
}

@property --sweep-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --sweep-color {
    syntax: '<color>';
    initial-value: transparent;
    inherits: false;
}

.casino {
    /* Declared as well as registered: where @property is unsupported, an unset custom
       property makes var() invalid at computed-value time and takes the whole background
       declaration down with it, leaving a card with no fill. */
    --sweep-angle: 0deg;
    --sweep-color: var(--theme-surface-tonal-a30);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background:
        linear-gradient(var(--theme-surface-a10), var(--theme-surface-a10)) padding-box,
        conic-gradient(from var(--sweep-angle),
            var(--theme-surface-tonal-a30) 0%,
            var(--theme-surface-tonal-a30) 40%,
            var(--sweep-color) 50%,
            var(--theme-surface-tonal-a30) 60%,
            var(--theme-surface-tonal-a30) 100%) border-box;
    animation: casino-sweep 6s linear infinite;
    transition: transform 150ms ease, --sweep-color 400ms ease;
}

.casino:is(:hover, :focus-within) {
    --sweep-color: var(--theme-primary-a0);
    transform: translateY(-2px);
}

@keyframes casino-sweep {
    to {
        --sweep-angle: 360deg;
    }
}

.casino__logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1rem, 3vw, 1.5rem);
    background-color: var(--theme-surface-a0);
    background-image:
        linear-gradient(to right,
            color-mix(in srgb, var(--theme-surface-a0) 100%, transparent) 0%,
            transparent 70%),
        url("/images/triple-nipple-casino-header.webp");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.casino__logo img {
    height: 2.625rem;
    width: auto;
}

.casino__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1rem, 3vw, 1.5rem);
}

.casino h3 {
    margin-block: 0 0.5rem;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--text-light-a0);
}

.casino p {
    margin-block: 0 1.5rem;
}

.casino .btn {
    margin-block-start: auto;
}

@media (max-width: 700px) {
    .casinos__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .casino .btn {
        align-self: stretch;
        justify-content: center;
    }
}

.details__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-block: 1.5rem 0;
}

.detail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.125rem 1rem;
    padding-block: 0.625rem;
    border-block-end: 1px solid color-mix(in srgb, var(--theme-surface-tonal-a30) 55%, transparent);
}

.detail dt {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-primary-a20);
}

.info {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}

.info__mark {
    display: grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.6875rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
}

.info:is(:hover, :focus-visible) .info__mark {
    background: var(--theme-primary-a40);
    border-color: var(--theme-primary-a40);
    color: var(--theme-surface-a0);
}

.info:focus-visible {
    outline: 2px solid var(--theme-info-a0);
    outline-offset: 1px;
    border-radius: 50%;
}

.info__pop {
    width: min(22rem, calc(100vw - 2rem));
    inset: 0;
    margin: auto;
    padding: 0.875rem 1rem;
    background: var(--theme-surface-a10);
    border: 1px var(--theme-surface-tonal-a30) solid;
    border-radius: var(--radius);
    box-shadow: 0 0.75rem 1.5rem -0.5rem rgb(0 0 0 / 0.55);
    color: var(--text-muted-a10);
    font-size: 0.875rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    line-height: 1.5;
}

.info__pop p {
    margin-block: 0 0.625rem;
}

.info__pop p:last-child {
    margin-block-end: 0;
}

.info__pop a {
    color: var(--theme-primary-a30);
    font-weight: 600;
}

@media (min-width: 601px) {
    @supports (position-area: block-end) {
        .info__pop {
            position-area: block-end span-inline-end;
            position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
            inset: auto;
            margin: 0.375rem 0 0;
        }
    }
}

.detail dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--text-light-a0);
}

.features {
    max-width: var(--max-width);
    margin-inline: auto;
    margin-block-start: var(--section-gap);
    text-align: center;
}

.features__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: var(--radius);
}

.features__viewport::-webkit-scrollbar {
    display: none;
}

.features__viewport:focus-visible {
    outline: 2px solid var(--theme-primary-a0);
    outline-offset: 3px;
}

.features__frame {
    position: relative;
}

.features__track {
    counter-reset: feature;
    display: flex;
    margin: 0;
    padding: 0;
    /* role="list" is in the markup: Safari drops list semantics with the marker. */
    list-style: none;
}

.feature {
    counter-increment: feature;
    flex: 0 0 100%;
    scroll-snap-align: center;
}

.feature img {
    width: 100%;
    aspect-ratio: 1200 / 663;
    object-fit: cover;
    background: var(--theme-surface-a10);
    border: 1px var(--theme-surface-tonal-a30) solid;
    border-radius: var(--radius);
}

.feature h3 {
    margin-block: 1.25rem 0.5rem;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--text-light-a0);
}

.feature h3::before {
    content: counter(feature) ". ";
    color: var(--theme-primary-a0);
}

.feature p {
    max-width: 62ch;
    margin: 0 auto;
    text-wrap: pretty;
}

.features__controls {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    aspect-ratio: 1200 / 663;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding-inline: clamp(0.5rem, 1.5vw, 1rem);
    pointer-events: none;
}

.features.is-enhanced .features__controls {
    display: flex;
}

.features__arrow,
.lightbox__arrow,
.lightbox__close {
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: color-mix(in srgb, var(--theme-surface-a0) 72%, transparent);
    border: 1px color-mix(in srgb, var(--text-light-a0) 30%, transparent) solid;
    border-radius: 50%;
    color: var(--text-light-a0);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.features__arrow svg,
.lightbox__arrow svg,
.lightbox__close svg {
    width: 1.375rem;
    height: 1.375rem;
}

.features__arrow:is(:hover, :focus-visible),
.lightbox__arrow:is(:hover, :focus-visible),
.lightbox__close:is(:hover, :focus-visible) {
    background: var(--theme-surface-a0);
    border-color: var(--theme-primary-a0);
}

.features__arrow[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
}

.features__arrow[aria-disabled="true"]:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--theme-surface-a0) 72%, transparent);
    border-color: color-mix(in srgb, var(--text-light-a0) 30%, transparent);
}

@media (max-width: 600px) {
    .details__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .feature img {
        aspect-ratio: 2 / 3;
    }

    .features__controls {
        aspect-ratio: 2 / 3;
        padding-inline: 0.375rem;
    }

    .features__arrow,
    .lightbox__arrow,
    .lightbox__close {
        width: 2.125rem;
        height: 2.125rem;
    }

    .features__arrow svg,
    .lightbox__arrow svg,
    .lightbox__close svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .feature h3 {
        margin-block-start: 1rem;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* em first, then cap: an invalid length drops only its own declaration, so the em
   survives as the fallback. Decorative, so the empty alt keeps it out of the a11y tree. */
.quote h2::before {
    content: "";
    display: inline-block;
    width: 0.72em;
    width: 1cap;
    height: 0.72em;
    height: 1cap;
    margin-inline-end: 0.375rem;
    background: url("/images/bgaming-icon-logo.svg") center / contain no-repeat;
}

.quote__figure {
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding-inline-start: clamp(1rem, 3vw, 2rem);
    border-inline-start: 3px solid var(--theme-primary-a0);
}

.quote__figure::before {
    content: "\201C" / "";
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--theme-primary-a0);
    margin-block-end: -2.25rem;
}

.quote__text {
    margin: 0;
}

.quote__text p {
    max-width: 60ch;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--text-light-a0);
}

.quote__source {
    font-size: 0.9375rem;
    color: var(--text-muted-a10);
}

.quote__source a {
    color: var(--theme-primary-a30);
    font-weight: 600;
}

.media {
    max-width: var(--max-width);
    margin-inline: auto;
    margin-block-start: var(--section-gap);
}

.media__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.25rem);
    margin-block-start: 1.5rem;
}

.media__player {
    grid-column: 2;
    grid-row: 1;
}

/* minmax(0, 1fr), not 1fr: a bare 1fr floors each track at min-content, the images'
   natural height, so the rows would size off the pictures instead of the video. */
.media__shots {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.25rem);
    margin: 0;
    padding: 0;
    /* role="list" is in the markup: Safari drops list semantics with the marker. */
    list-style: none;
}

.media__shots > li {
    display: grid;
    min-height: 0;
}

.media__video {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
}

.media__shot {
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius);
}

.media__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms ease;
}

.media__shot:focus-visible {
    outline: 2px solid var(--theme-primary-a0);
    outline-offset: 3px;
}

@media (hover: hover) {
    .media__shot:hover img {
        transform: scale(1.06);
    }
}

.lightbox {
    width: min(92vw, 1080px, 120vh);
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
}

.lightbox::backdrop {
    background: rgb(0 0 0 / 0.82);
    backdrop-filter: blur(4px);
}

.lightbox__figure {
    margin: 0;
}

.lightbox__img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.lightbox__caption {
    margin-block-start: 0.75rem;
    color: var(--text-muted-a10);
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
}

.lightbox__controls {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    aspect-ratio: 1200 / 663;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: clamp(0.5rem, 1.5vw, 1rem);
    pointer-events: none;
}

.lightbox__close {
    position: absolute;
    inset-block-start: 0.625rem;
    inset-inline-end: 0.625rem;
}

@media (max-width: 700px) {
    .media__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 34rem;
        margin-inline: auto;
    }

    .media__player,
    .media__shots {
        grid-column: 1;
        grid-row: auto;
    }

    .lightbox__img {
        aspect-ratio: 2 / 3;
        object-fit: cover;
    }

    .lightbox__controls {
        aspect-ratio: 2 / 3;
    }

    .lightbox {
        width: min(92vw, 46vh);
    }
}

.download {
    max-width: var(--max-width);
    margin-inline: auto;
    margin-block-start: var(--section-gap);
}

.download__lede {
    max-width: 80ch;
    margin: 0;
}

.download__platforms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.25rem);
    margin-block-start: 1.5rem;
}

.platform {
    display: flex;
    flex-direction: column;
    padding: clamp(1rem, 3vw, 1.5rem);
    background: var(--theme-surface-tonal-a0);
    border: 1px solid var(--theme-surface-tonal-a20);
    border-radius: var(--radius);
}

.platform__head {
    padding-block-end: 0.875rem;
    border-block-end: 1px solid color-mix(in srgb, var(--theme-surface-tonal-a30) 60%, transparent);
}

.platform h3 {
    margin: 0;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--text-light-a0);
}

.platform__meta {
    margin-block: 0.375rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--theme-primary-a20);
}

.platform__steps {
    counter-reset: install;
    display: grid;
    gap: 0.875rem;
    margin-block: 1.125rem auto;
    padding: 0;
    /* role="list" is in the markup: Safari drops list semantics with the marker. */
    list-style: none;
}

/* Not a grid: every element child of a grid container becomes a grid item, so the
   <strong> inside a step was blockified into a cell of its own. */
.platform__steps > li {
    --num: 1.625rem;
    /* rem, not em: an unregistered custom property is a token stream, so em would resolve
       against whichever pseudo-element used it, and ::before sets a smaller font-size. */
    --num-rise: calc((1.453125rem - var(--num)) / 2);
    counter-increment: install;
    position: relative;
    padding-inline-start: calc(var(--num) + 0.75rem);
    font-size: 0.9375rem;
}

.platform__steps > li::before {
    content: counter(install) / "";
    position: absolute;
    inset-block-start: var(--num-rise);
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    width: var(--num);
    height: var(--num);
    border: 1px solid var(--theme-primary-a20);
    border-radius: 50%;
    color: var(--theme-primary-a20);
    font-size: 0.8125rem;
    font-weight: 700;
}

.platform__steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block: calc(var(--num-rise) + var(--num)) calc(-0.875rem - var(--num-rise));
    inset-inline-start: calc(var(--num) / 2 - 0.5px);
    width: 1px;
    background: color-mix(in srgb, var(--theme-primary-a20) 35%, transparent);
}

.platform__steps strong,
.platform__steps em {
    color: var(--text-light-a0);
}

.platform__clip {
    margin: 1.125rem 0 0;
}

.platform__clip video {
    width: 100%;
    aspect-ratio: 1080 / 426;
    background: #fff;
    border: 1px solid var(--theme-surface-tonal-a30);
    border-radius: var(--radius);
    filter: brightness(0.9);
}

.platform__clip figcaption {
    margin-block-start: 0.5rem;
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--text-muted-a10) 70%, var(--theme-surface-tonal-a0));
}

.platform__note {
    max-width: 60ch;
    margin-block: 1.125rem 0;
    padding-block-start: 0.875rem;
    border-block-start: 1px solid color-mix(in srgb, var(--theme-surface-tonal-a30) 60%, transparent);
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--text-muted-a10) 78%, var(--theme-surface-tonal-a0));
}

/* row-gap is zeroed because a subgridded axis takes its gutters from the parent grid
   and ignores its own. Behind @supports: without subgrid the flex fallback still
   bottom-pins the notes via the auto margin on .platform__steps. */
@media (min-width: 701px) {
    @supports (grid-template-rows: subgrid) {
        .download__platforms {
            grid-template-rows: repeat(5, auto);
            row-gap: 0;
        }

        .platform,
        .platform__clip {
            display: grid;
            grid-template-rows: subgrid;
        }

        .platform {
            grid-row: span 5;
        }

        .platform__clip {
            grid-row: span 2;
        }

        .platform__clip video {
            align-self: start;
        }
    }
}

.download__reality {
    max-width: 80ch;
    margin-block: 1.25rem 0;
    font-size: 0.9375rem;
    color: color-mix(in srgb, var(--text-muted-a10) 80%, var(--theme-surface-a0));
}

.download__reality strong {
    color: var(--text-light-a0);
}

.download__cta {
    margin-block-start: 1.5rem;
}

@media (max-width: 700px) {
    .download__platforms {
        grid-template-columns: minmax(0, 1fr);
    }

    .platform__steps {
        margin-block-end: 0;
    }
}

@media (max-width: 600px) {
    .download__cta {
        width: 100%;
        justify-content: center;
    }
}

.faq {
    max-width: var(--max-width);
    margin-inline: auto;
    margin-block-start: var(--section-gap);
}

.faq__list {
    display: grid;
    gap: 0.5rem;
    margin-block-start: 1.5rem;
}

.faq__item {
    background: var(--theme-surface-a10);
    border-radius: var(--radius);
}

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    cursor: pointer;
    list-style: none;
}

.table-of-contents summary::-webkit-details-marker,
.faq__item summary::-webkit-details-marker {
    display: none;
}

.table-of-contents summary:focus-visible,
.faq__item summary:focus-visible {
    outline: 2px solid var(--theme-primary-a0);
    outline-offset: 2px;
    border-radius: var(--radius);
}

.faq__item h3 {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--text-light-a0);
}

.table-of-contents summary::after,
.faq__item summary::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--theme-primary-a20);
    border-bottom: 2px solid var(--theme-primary-a20);
    transform: rotate(45deg);
    transition: transform 200ms ease;
}

.table-of-contents details[open] summary::after,
.faq__item[open] summary::after {
    transform: rotate(225deg);
}

.faq__item p {
    max-width: 70ch;
    margin: 0;
    padding: 0 1.125rem 1.125rem;
    font-size: 0.9375rem;
}

.faq__item a {
    color: var(--theme-primary-a30);
    font-weight: 600;
}

.faq__item em {
    color: var(--text-light-a0);
}

.site-footer {
    max-width: var(--max-width);
    margin-inline: auto;
    margin-block-start: var(--section-gap);
    border-block-start: 1px solid color-mix(in srgb, var(--theme-surface-tonal-a30) 55%, transparent);
    font-size: 0.875rem;
}

.site-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.site-footer__logo {
    width: clamp(11rem, 22vw, 15rem);
    margin-block-end: 1.25rem;
}

.site-footer__brand p,
.site-footer__meta p {
    max-width: 62ch;
    margin-block: 0 0.875rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.site-footer__brand p:last-child,
.site-footer__meta p:last-child {
    margin-block-end: 0;
}

.site-footer__age {
    color: var(--text-muted-a10);
}

.site-footer a {
    color: var(--text-light-a0);
    text-decoration-color: color-mix(in srgb, var(--text-light-a0) 45%, transparent);
    text-underline-offset: 0.15em;
}

.site-footer a:is(:hover, :focus-visible) {
    color: var(--theme-primary-a20);
    text-decoration-color: currentColor;
}

.site-footer__langs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.site-footer__langs a {
    display: block;
    padding: 0.3125rem 0.375rem;
    color: var(--theme-surface-a50);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: color 150ms ease;
}

/* Matches any aria-current value, not just "page". On the 404s the current
   language's link goes to that language's home, so it carries aria-current="true"
   (current item in a set) rather than "page", which would be a lie. */
.site-footer__langs a:is(:hover, :focus-visible),
.site-footer__langs [aria-current] {
    color: var(--theme-primary-a0);
    text-decoration: none;
}

.site-footer__legal {
    margin: 0;
    padding-block: 1.125rem;
    border-block-start: 1px solid color-mix(in srgb, var(--theme-surface-tonal-a30) 55%, transparent);
    color: var(--theme-surface-a50);
    font-size: 0.8125rem;
}

@media (max-width: 700px) {
    .site-footer__main {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Last in the file on purpose. A media query adds no specificity, so every rule here
   ties with the base rule it switches off and only wins on source order. Anything
   added below this block needs its own reduced-motion rule. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn,
    .btn__icon {
        transition: none;
    }

    .btn:is(:hover, :focus-visible),
    .btn:is(:hover, :focus-visible) .btn__icon {
        transform: none;
    }

    .btn--primary:is(:hover, :focus-visible)::after {
        animation: none;
    }

    .hero__copy h1 {
        animation: none;
    }

    /* Third selector is not redundant: .demo__preview .btn--accent carries its own
       transition at 0-2-0, which outranks a bare .demo__preview > * here. */
    .demo__preview,
    .demo__preview > *,
    .demo__preview .btn--accent {
        transition: none;
    }

    .demo__spinner {
        display: none;
    }

    .features__viewport {
        scroll-behavior: auto;
    }

    .features__arrow,
    .lightbox__arrow,
    .lightbox__close {
        transition: none;
    }

    .table-of-contents summary::after,
    .faq__item summary::after,
    .site-footer__langs a {
        transition: none;
    }

    .media__shot img {
        transition: none;
    }

    .media__shot:hover img {
        transform: none;
    }

    .casino {
        animation: none;
    }

    .casino:is(:hover, :focus-within) {
        transform: none;
    }

    .step__shot {
        transition: none;
    }
}