/*
 * Slotoro Casino - steampunk brass on oxblood.
 * Canonical design tokens live in this file. Dark-only design.
 */

:root {
    --c-wall: #240a0d;
    --c-wall-deep: #140507;
    --c-oxblood: #5c161a;
    --c-charcoal: #1c1a1d;
    --c-charcoal-2: #262328;
    --c-brass-hi: #f6dd92;
    --c-brass: #d2a956;
    --c-brass-lo: #9c7333;
    --c-brass-edge: #6e4f1f;
    --c-bronze: #3b2a12;
    --c-ink: #22160a;
    --c-ink-link: #6b0f14;
    --c-red: #d01e23;
    --c-red-lo: #8f0d12;
    --c-gold: #f2c84b;
    --c-amber: #ffb24a;
    --c-text: #f4ead8;
    --c-text-soft: #dccdb0;
    --c-link: #f6c95a;

    --f-display: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
    --f-brand: "Cinzel", Georgia, "Times New Roman", serif;
    --f-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --container: 1200px;
    --pad: clamp(1rem, 4vw, 2rem);
    --radius: 12px;

    --brass-surface:
        linear-gradient(180deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .08) 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, rgba(0, 0, 0, .035) 1px 3px),
        linear-gradient(135deg, #efd590 0%, #d4aa5c 32%, #e7c883 56%, #c39749 100%);
    --rivet: radial-gradient(circle, #fff1c0 0 1.4px, #c1913f 2.4px, #5b3f12 4.2px, transparent 5px);
    --bolt-steel: radial-gradient(circle, #ece7dc 0 1.6px, #9a948a 2.8px, #34312d 4.4px, transparent 5.2px);
    --brass-riveted:
        var(--rivet) 6px 6px / 16px 16px no-repeat,
        var(--rivet) calc(100% - 6px) 6px / 16px 16px no-repeat,
        var(--rivet) 6px calc(100% - 6px) / 16px 16px no-repeat,
        var(--rivet) calc(100% - 6px) calc(100% - 6px) / 16px 16px no-repeat,
        var(--brass-surface);
    --pipe-h: linear-gradient(180deg, #7a5620 0%, #f6dd92 28%, #c99c4f 55%, #8a6324 80%, #4a3410 100%);
    --pipe-v: linear-gradient(90deg, #7a5620 0%, #f6dd92 28%, #c99c4f 55%, #8a6324 80%, #4a3410 100%);
    --copper-h: linear-gradient(180deg, #5e2c14 0%, #eaa56c 30%, #b6683c 60%, #5e2c14 100%);
    --bevel: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(110, 79, 31, .55);
    --drop: 0 10px 26px rgba(0, 0, 0, .55);

    --header-bottom: 72px;
}

/* ============================================
   OVERFLOW PREVENTION - Safety Net
   ============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img, video, iframe, embed, object, svg {
    max-width: 100%;
    height: auto;
}

[class*="grid"] > *,
[class*="flex"] > * {
    min-width: 0;
}

pre, code, .code-block, [class*="code"] {
    max-width: 100%;
    overflow-x: auto;
}

pre code,
.code-block code {
    display: block;
    min-width: 0;
}

.table-wrapper,
[class*="table-"] {
    max-width: 100%;
    overflow-x: auto;
}

p, li, td, th {
    overflow-wrap: break-word;
}

details {
    height: fit-content;
}

:where(p, li, blockquote, figcaption, dd, .prose, .seo-text, article)
  a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

input, textarea, select {
    max-width: 100%;
}

section {
    overflow: clip;
}

/* ============================================
   BASE
   ============================================ */

html {
    background: var(--c-wall-deep);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    position: relative;
    margin: 0;
    min-height: 100vh;
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--c-text);
    overflow-x: clip;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(20, 5, 7, .35), rgba(20, 5, 7, .6)),
        url("./assets/3660e85cb25a44cde5fe1be2d83223a5.webp") center / cover no-repeat,
        var(--c-wall);
}

body.menu-open {
    overflow: hidden;
}

[id] {
    scroll-margin-top: calc(var(--header-bottom) + 16px);
}

h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .5em;
}

h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a { color: var(--c-link); }
a:hover { color: #ffe08a; }

:focus-visible {
    outline: 3px solid var(--c-gold);
    outline-offset: 3px;
}

main:focus { outline: none; }

ul, ol { padding-left: 1.25rem; }

strong { font-weight: 700; }

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 200;
    padding: .75rem 1.25rem;
    background: var(--c-gold);
    color: var(--c-ink);
    font-weight: 700;
    border-radius: 8px;
}

.skip-link:focus { top: 1rem; }

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

.icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}

/* ============================================
   LAYOUT PRIMITIVES
   ============================================ */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad);
}

.section {
    position: relative;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.prose {
    max-width: 72ch;
}

.prose > :last-child { margin-bottom: 0; }

.panel {
    background: var(--c-charcoal);
    border: 2px solid var(--c-brass-lo);
    border-radius: var(--radius);
    padding: clamp(1.1rem, 3vw, 1.75rem);
    box-shadow: inset 0 0 0 1px #000, var(--drop);
}

.panel > :last-child { margin-bottom: 0; }

.fact-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fact-list li {
    padding: .4rem .9rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #4d3617, #2c1d0a);
    border: 1px solid #c99c4f;
    color: #f6e3b0;
    font-size: .9375rem;
    font-weight: 600;
}

/* ============================================
   BUTTONS & PILLS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .55rem 1.4rem;
    border-radius: 999px;
    font: 700 1.05rem/1.1 var(--f-display);
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .2s ease;
}

.btn--red {
    color: #fff;
    background: linear-gradient(180deg, #ea3c33 0%, #d01e23 48%, #9c0f14 100%);
    border: 3px solid #e8c46a;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px #6b4a14, 0 6px 14px rgba(0, 0, 0, .55);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
}

.btn--red:hover,
.btn--red:focus-visible {
    color: #fff;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px #6b4a14, 0 6px 14px rgba(0, 0, 0, .55), 0 0 22px rgba(255, 150, 60, .55);
}

.btn--brass {
    color: var(--c-ink);
    background: var(--brass-surface);
    border: 2px solid var(--c-brass-edge);
    box-shadow: var(--bevel), 0 3px 8px rgba(0, 0, 0, .4);
}

.btn--brass:hover,
.btn--brass:focus-visible {
    color: var(--c-ink);
    box-shadow: var(--bevel), 0 3px 8px rgba(0, 0, 0, .4), 0 0 14px rgba(255, 200, 100, .45);
}

.btn--lg {
    min-height: 58px;
    padding: .8rem 2rem;
    font-size: clamp(1.15rem, 1rem + .8vw, 1.45rem);
}

.pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .45rem 1.4rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #4d3617, #2c1d0a);
    border: 2px solid #c99c4f;
    color: #f6e3b0;
    font: 700 1rem/1.1 var(--f-display);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 230, 170, .3), 0 3px 6px rgba(0, 0, 0, .4);
}

.pill:hover,
.pill:focus-visible { color: #fff; }

/* ============================================
   HEADER
   ============================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--brass-riveted);
    border-bottom: 3px solid var(--c-brass-edge);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    max-width: 1320px;
    min-height: 64px;
    margin-inline: auto;
    padding: .5rem var(--pad);
}

.site-brand {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: .3rem .95rem .35rem;
    line-height: 1;
    text-decoration: none;
    background: linear-gradient(180deg, #4a3315, #2a1b09);
    border: 2px solid var(--c-brass-lo);
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px rgba(246, 221, 146, .3), 0 3px 8px rgba(0, 0, 0, .5);
}

.site-brand__name {
    position: relative;
    z-index: 1;
    font-family: var(--f-brand);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: .02em;
    color: #f3d27a;
    text-shadow: 0 2px 0 #1a1005;
}

.site-brand__tag {
    position: relative;
    z-index: 1;
    margin-top: .15rem;
    font-family: var(--f-brand);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .32em;
    color: #e7c77a;
}

.site-brand__gear {
    display: none;
}

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__link {
    text-decoration: none;
}

.header-actions {
    display: none;
}

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #4d3617, #2c1d0a);
    border: 2px solid var(--c-brass-lo);
    cursor: pointer;
}

.menu-toggle__bar {
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: #f3d27a;
    transition: transform .2s ease, opacity .2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1023.98px) {
    .site-nav {
        position: fixed;
        top: var(--header-bottom);
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        z-index: 99;
        display: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1rem var(--pad) 2rem;
        background: #1a0f11;
        border-top: 3px solid var(--c-brass-lo);
    }

    .site-nav.is-open { display: block; }

    .site-nav__link {
        display: flex;
        align-items: center;
        min-height: 48px;
        color: var(--c-text);
        font: 600 1.2rem var(--f-display);
        border-bottom: 1px solid rgba(196, 154, 76, .35);
    }

    .site-nav__link:hover,
    .site-nav__link[aria-current="page"] { color: var(--c-gold); }

    .site-nav__actions {
        display: grid;
        gap: .75rem;
        margin-top: 1.5rem;
    }

    .site-nav__actions .btn { min-height: 48px; }
}

@media (min-width: 1024px) {
    .site-header {
        position: relative;
        border-bottom-width: 4px;
    }

    .site-header__bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas: "nav brand actions";
        min-height: 112px;
        padding: .75rem 2rem;
    }

    .site-brand {
        grid-area: brand;
        padding: .55rem 2.4rem .6rem;
        border-width: 3px;
        border-radius: 12px;
    }

    .site-brand__name { font-size: 2.5rem; }
    .site-brand__tag { font-size: .9rem; }

    .site-brand__gear {
        display: block;
        position: absolute;
        top: 50%;
        width: 74px;
        height: 74px;
        margin-top: -37px;
        filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
    }

    .site-brand__gear--left { left: -48px; }
    .site-brand__gear--right { right: -48px; }

    .site-nav {
        grid-area: nav;
        display: block;
    }

    .site-nav__list {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem .9rem;
    }

    .site-nav__link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: .25rem .15rem;
        color: var(--c-ink);
        font: 700 1.05rem var(--f-display);
        letter-spacing: .02em;
        border-bottom: 3px solid transparent;
    }

    .site-nav__link:hover { color: var(--c-ink-link); border-bottom-color: rgba(107, 15, 20, .5); }
    .site-nav__link[aria-current="page"] { color: var(--c-ink-link); border-bottom-color: var(--c-red); }

    .site-nav__actions { display: none; }

    .header-actions {
        grid-area: actions;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: .4rem;
    }

    .header-actions__row {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .header-actions__key {
        width: 40px;
        height: 40px;
        color: #5b3f12;
        filter: drop-shadow(0 1px 0 rgba(255, 246, 210, .7));
    }

    .header-actions .btn {
        min-width: 150px;
        min-height: 42px;
        border-radius: 10px;
    }

    .menu-toggle { display: none; }
}

/* ============================================
   SECTION RAIL (pipe + nameplate)
   ============================================ */

.rail {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 64px;
    margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
    padding: 0 clamp(1.5rem, 5vw, 3rem);
}

.rail::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 18px;
    margin-top: -9px;
    background: var(--pipe-h);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .55);
}

.rail::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 36px;
    margin-top: -18px;
    pointer-events: none;
    background:
        linear-gradient(90deg, #6e4f1f, #f3d98c 35%, #b48a40 70%, #4a3410) left center / 18px 100% no-repeat,
        linear-gradient(90deg, #4a3410, #b48a40 30%, #f3d98c 65%, #6e4f1f) right center / 18px 100% no-repeat;
}

.rail__plate {
    position: relative;
    z-index: 1;
    max-width: min(100%, 860px);
    margin: 0;
    padding: .55rem clamp(1.75rem, 4vw, 2.75rem);
    text-align: center;
    font: 700 clamp(1.3rem, 1rem + 1.4vw, 2rem)/1.15 var(--f-display);
    color: var(--c-ink);
    text-shadow: 0 1px 0 rgba(255, 246, 210, .6);
    background:
        var(--rivet) 10px 50% / 16px 16px no-repeat,
        var(--rivet) calc(100% - 10px) 50% / 16px 16px no-repeat,
        var(--brass-surface);
    border: 2px solid var(--c-brass-edge);
    border-radius: 14px;
    box-shadow: var(--bevel), inset 0 0 0 4px rgba(255, 240, 200, .15), 0 6px 14px rgba(0, 0, 0, .55);
}

.rail__plate::before,
.rail__plate::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 40px;
    margin-top: -20px;
    background: var(--pipe-v);
    border: 1px solid #4a3410;
    border-radius: 3px;
}

.rail__plate::before { left: -16px; }
.rail__plate::after { right: -16px; }

/* ============================================
   HERO
   ============================================ */

.hero {
    position: relative;
    padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--pad);
}

.hero--media-first .hero__media { order: -1; }

.hero__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hero__panel-wrap {
    position: relative;
    padding-top: 30px;
}

.hero__chain {
    position: absolute;
    top: 0;
    width: 16px;
    height: 38px;
}

.hero__chain--left { left: 16%; }
.hero__chain--right { right: 16%; }

.hero__panel {
    position: relative;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3.5vw, 2.25rem);
    text-align: center;
    color: var(--c-ink);
    background: var(--brass-riveted);
    border: 2px solid var(--c-brass-edge);
    border-radius: 14px;
    box-shadow: var(--bevel), var(--drop);
}

.hero__title {
    margin: 0;
    color: var(--c-ink);
    font-size: clamp(1.65rem, 1.2rem + 2.2vw, 2.6rem);
    text-shadow: 0 1px 0 rgba(255, 246, 210, .55);
}

.flourish {
    display: block;
    width: min(260px, 80%);
    margin: .75rem auto 1.1rem;
}

.hero__lead {
    margin-bottom: 1.5rem;
    color: var(--c-ink);
    font-size: 1.0625rem;
    font-weight: 600;
}

.hero__panel a:not([class]),
.notice a:not([class]),
.belt-card a:not([class]),
.badge-plaque a:not([class]),
.cta-band__plate a:not([class]),
.plaque a:not([class]) {
    color: var(--c-ink-link);
    font-weight: 700;
}

.hero__panel .chip-rail { margin-block: 1rem 0; }

.hero__mount {
    position: relative;
    display: flex;
    justify-content: center;
    width: min(100%, 440px);
    margin: 24px auto 0;
    padding: 1.1rem 1.25rem;
    background:
        var(--rivet) 6px 50% / 16px 16px no-repeat,
        var(--rivet) calc(100% - 6px) 50% / 16px 16px no-repeat,
        linear-gradient(180deg, #b48a40, #7a5620);
    border: 2px solid #4a3410;
    border-radius: 6px 6px 18px 18px;
    box-shadow: var(--bevel), var(--drop);
}

.hero__mount::before,
.hero__mount::after {
    content: "";
    position: absolute;
    top: -26px;
    width: 14px;
    height: 26px;
    background: var(--pipe-v);
    border-radius: 3px;
}

.hero__mount::before { left: 18%; }
.hero__mount::after { right: 18%; }

.hero__mount .btn {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero__elbow {
    position: absolute;
    top: 10px;
    right: -78px;
    width: 80px;
    pointer-events: none;
}

.hero__media {
    position: relative;
    min-width: 0;
}

.frame {
    position: relative;
    height: 100%;
    padding: 18px;
    border-radius: 10px;
    background:
        var(--bolt-steel) 0 0 / 60px 18px repeat-x,
        var(--bolt-steel) 0 100% / 60px 18px repeat-x,
        var(--bolt-steel) 0 0 / 18px 60px repeat-y,
        var(--bolt-steel) 100% 0 / 18px 60px repeat-y,
        linear-gradient(145deg, #55555b, #28282c 45%, #3f3f44 75%, #222226);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), var(--drop);
}

.frame__inner {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
}

.frame__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 3px #b48a40, inset 0 0 26px rgba(0, 0, 0, .5);
}

.frame__inner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 5;
    object-fit: cover;
    object-position: 50% 30%;
}

.steam {
    position: absolute;
    pointer-events: none;
    filter: blur(7px);
}

.hero__steam {
    top: -60px;
    right: -10px;
    z-index: 2;
    width: min(220px, 38%);
}

@media (min-width: 1024px) {
    .hero__inner {
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        align-items: stretch;
        gap: 2.75rem;
    }

    .hero--media-first .hero__media { order: 0; }

    .frame__inner { min-height: 480px; }

    .frame__inner img {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
    }
}

/* ============================================
   GEAR STEPS
   ============================================ */

.gear-steps {
    position: relative;
    margin-top: 1.75rem;
}

.gear-steps__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gear-steps__list::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -1.6rem;
    width: 6px;
    height: 1.8rem;
    margin-left: -3px;
    background: var(--pipe-v);
    border-radius: 3px;
}

.gear-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gear-step__gear {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(84px, 24vw, 132px);
    aspect-ratio: 1;
    margin-inline: -6px;
}

.gear-step__gear svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .35));
}

.gear-step:nth-child(2) .gear-step__gear { margin-top: .6rem; }
.gear-step:nth-child(2) .gear-step__gear svg { transform: rotate(12.857deg); }

.gear-step__num {
    position: relative;
    font: 700 clamp(1.4rem, 1rem + 2vw, 2rem)/1 var(--f-display);
    color: var(--c-gold);
    text-shadow: 0 2px 0 #1a1005;
}

.gear-step__key {
    position: relative;
    width: 22px;
    height: 22px;
    margin-top: .15rem;
    color: #e7c57d;
}

.gear-step__text {
    margin-top: .5rem;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-ink);
}

.gear-steps__terms {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin-top: .75rem;
    padding-top: 1.4rem;
}

.gear-steps__terms::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16.66%;
    right: 16.66%;
    height: calc(1.4rem + 22px);
    border: 4px solid #7a5620;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 1px 0 rgba(255, 240, 200, .5);
}

.gear-steps__line {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--c-ink);
}

/* ============================================
   CONVEYOR CAROUSEL
   ============================================ */

.conveyor {
    --ring: clamp(170px, 46vw, 230px);
    position: relative;
}

.conveyor__stage {
    position: relative;
}

.conveyor__belt {
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    top: calc(var(--ring) * .82);
    bottom: .25rem;
    border-radius: 30px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 3px, rgba(0, 0, 0, .22) 3px 14px),
        linear-gradient(180deg, #3a3a3e, #1c1c1f 30%, #141416 70%, #2b2b2f);
    border: 2px solid #0d0d0f;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -3px 6px rgba(0, 0, 0, .6), 0 8px 18px rgba(0, 0, 0, .5);
}

.conveyor__belt::before,
.conveyor__belt::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #f6dd92 0 3px, #8a6324 4px 6px, transparent 7px),
        radial-gradient(circle at 35% 30%, #f0d590, #a87b34 60%, #5b3f12);
    box-shadow: 0 0 0 3px #22160a;
}

.conveyor__belt::before { left: 8px; }
.conveyor__belt::after { right: 8px; }

.conveyor__track {
    position: relative;
    z-index: 1;
    display: flex;
    gap: clamp(1rem, 3vw, 2.5rem);
    margin: 0;
    padding: .5rem calc(var(--pad) + 1rem) 1.5rem;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

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

.conveyor__track > li {
    flex: 0 0 auto;
    scroll-snap-align: center;
}

.conveyor__track > li:first-child { margin-left: auto; }
.conveyor__track > li:last-child { margin-right: auto; }

.conveyor__nav {
    position: absolute;
    z-index: 2;
    top: calc(var(--ring) * .5 - 30px);
    display: none;
    place-items: center;
    width: 48px;
    height: 60px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--c-brass);
    cursor: pointer;
}

.conveyor__nav .icon {
    width: 44px;
    height: 56px;
    stroke-width: 3;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
}

.conveyor__nav:hover { color: var(--c-brass-hi); }
.conveyor__nav:disabled { color: #6e5a3a; cursor: default; }
.conveyor__nav--prev { left: 0; }
.conveyor__nav--next { right: 0; }

.conveyor__swipe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: max-content;
    margin: .9rem auto 0;
    padding: .35rem 1.25rem;
    border-radius: 999px;
    color: var(--c-ink);
    font: 700 .9375rem var(--f-display);
    background: var(--brass-surface);
    border: 2px solid var(--c-brass-edge);
    box-shadow: var(--bevel), 0 3px 6px rgba(0, 0, 0, .4);
}

.conveyor__swipe .icon { width: 16px; height: 16px; }

@media (min-width: 768px) {
    .conveyor__stage { padding-inline: 56px; }
    .conveyor__nav { display: grid; }
    .conveyor__nav[hidden] { display: none; }
    .conveyor__swipe { display: none; }
}

.slot-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--ring);
    text-align: center;
}

.slot-card__ring {
    position: relative;
    width: var(--ring);
    aspect-ratio: 1;
}

.slot-card__img {
    position: absolute;
    inset: 11.5%;
    width: 77%;
    height: 77%;
    border-radius: 50%;
    object-fit: cover;
    background: #111;
}

.slot-card__gear {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55));
}

.slot-card__name {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: -1.4rem 0 0;
    padding: .45rem 1.1rem;
    color: var(--c-ink);
    font: 700 1.0625rem/1.2 var(--f-display);
    background: var(--brass-surface);
    border: 2px solid var(--c-brass-edge);
    border-radius: 10px;
    box-shadow: var(--bevel), 0 4px 8px rgba(0, 0, 0, .45);
}

.slot-card__desc {
    margin: .75rem 0 0;
    padding-inline: .5rem;
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--c-text);
}

.slot-card__note {
    margin: .35rem 0 0;
    font-size: .875rem;
    color: var(--c-gold);
}

.conveyor--cards .conveyor__belt {
    top: auto;
    bottom: 0;
    height: 52px;
}

.conveyor--cards .conveyor__track { padding-bottom: 34px; }
.conveyor--cards .conveyor__nav { top: calc(50% - 50px); }

.belt-card {
    width: min(78vw, 290px);
    padding: 1.4rem 1.25rem 1.25rem;
    color: var(--c-ink);
    background: var(--brass-riveted);
    border: 2px solid var(--c-brass-edge);
    border-radius: 12px;
    box-shadow: var(--bevel), var(--drop);
}

.belt-card__icon .icon {
    width: 40px;
    height: 40px;
    color: #3b2a12;
    filter: drop-shadow(0 1px 0 rgba(255, 246, 210, .7));
}

.belt-card__title {
    margin: .5rem 0 .4rem;
    color: var(--c-ink);
    font-size: 1.2rem;
}

.belt-card__text {
    margin-bottom: .6rem;
    font-size: 1rem;
}

.belt-card__terms {
    margin: 0;
    padding-top: .5rem;
    border-top: 1px solid rgba(91, 63, 18, .45);
    font-size: .9375rem;
    font-weight: 600;
}

/* ============================================
   TRUST STRIP HOUSING
   ============================================ */

.housing {
    position: relative;
    max-width: 1240px;
    margin-inline: auto;
    padding: clamp(.9rem, 2vw, 1.25rem) clamp(2.6rem, 6vw, 4.25rem);
    background: var(--brass-surface);
    border: 2px solid var(--c-brass-edge);
    border-radius: 18px;
    box-shadow: var(--bevel), var(--drop);
}

.housing::before,
.housing::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(24px, 4vw, 40px);
    height: clamp(24px, 4vw, 40px);
    margin-top: calc(clamp(24px, 4vw, 40px) / -2);
    border-radius: 50%;
    background:
        linear-gradient(40deg, transparent 44%, #3b2a12 44% 56%, transparent 56%),
        radial-gradient(circle at 35% 30%, #fff0bf, #c99c4f 55%, #6e4f1f);
    box-shadow: 0 0 0 3px #6e4f1f, 0 2px 4px rgba(0, 0, 0, .5);
}

.housing::before { left: clamp(.5rem, 1.5vw, .9rem); }
.housing::after { right: clamp(.5rem, 1.5vw, .9rem); }

.housing__tray {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(.6rem, 1.5vw, 1rem);
    margin: 0;
    padding: clamp(.6rem, 1.5vw, 1rem);
    list-style: none;
    background: linear-gradient(180deg, #8a6526, #a87d38);
    border-radius: 10px;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 240, 200, .35);
}

.plaque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.1rem .9rem 1rem;
    text-align: center;
    color: var(--c-ink);
    background: var(--brass-riveted);
    border: 2px solid var(--c-brass-edge);
    border-radius: 10px;
    box-shadow: var(--bevel), 0 3px 6px rgba(0, 0, 0, .4);
}

.plaque .icon {
    width: 42px;
    height: 42px;
    color: #3b2a12;
    filter: drop-shadow(0 1px 0 rgba(255, 246, 210, .7));
}

.plaque__title {
    margin: 0;
    color: var(--c-ink);
    font: 700 1.0625rem/1.2 var(--f-display);
}

.plaque__text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.4;
}

.housing--compact { max-width: 860px; }
.housing--compact .plaque .icon { width: 34px; height: 34px; }

/* ============================================
   NOTICE PLAQUES & BADGES
   ============================================ */

.notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    color: var(--c-ink);
    background: var(--brass-surface);
    border: 2px solid var(--c-brass-edge);
    border-radius: 12px;
    box-shadow: var(--bevel), 0 6px 14px rgba(0, 0, 0, .45);
}

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

.notice--calm {
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .03) 1px 3px),
        linear-gradient(180deg, #dcc28c, #c9aa6f);
}

.notice--rail {
    border-left: 10px solid var(--c-red);
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .03) 1px 3px),
        linear-gradient(180deg, #cba868, #dcc189);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .45);
}

.notice--warning .notice__icon { color: var(--c-red-lo); }

.notice__icon {
    color: #3b2a12;
}

.notice__icon .icon,
.notice__icon .age-seal {
    width: 46px;
    height: 46px;
}

.notice__title {
    margin: 0 0 .4rem;
    color: var(--c-ink);
    font-size: 1.25rem;
}

.notice__body > :last-child { margin-bottom: 0; }
.notice ul { margin: 0 0 1em; padding-left: 1.2rem; }
.notice li + li { margin-top: .3rem; }

.rg-badges {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.badge-plaque {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    color: var(--c-ink);
    background: var(--brass-riveted);
    border: 2px solid var(--c-brass-edge);
    border-radius: 12px;
    box-shadow: var(--bevel), 0 6px 14px rgba(0, 0, 0, .45);
}

.badge-plaque .age-seal,
.badge-plaque__warn {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
}

.badge-plaque__title {
    margin: .2rem 0 .35rem;
    color: var(--c-ink);
    font-size: 1.3rem;
}

.badge-plaque__text {
    margin: 0;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .rg-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.review-flag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: 1rem 0;
    padding: .75rem 1rem;
    color: var(--c-text);
    font-size: .9375rem;
    background: #1f1612;
    border: 2px dashed var(--c-amber);
    border-radius: 10px;
}

.review-flag__tag {
    padding: .15rem .6rem;
    border-radius: 999px;
    color: #1b0f04;
    background: var(--c-amber);
    font: 700 .875rem var(--f-display);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ============================================
   BOLTED FRAME, FAQ, LEDGER
   ============================================ */

.bolted {
    padding: 14px;
    border-radius: 16px;
    background:
        var(--rivet) 0 0 / 56px 14px repeat-x,
        var(--rivet) 0 100% / 56px 14px repeat-x,
        var(--rivet) 0 0 / 14px 56px repeat-y,
        var(--rivet) 100% 0 / 14px 56px repeat-y,
        var(--brass-surface);
    border: 2px solid var(--c-brass-edge);
    box-shadow: var(--bevel), var(--drop);
}

.bolted__inner {
    padding: clamp(1rem, 3vw, 1.75rem);
    background: var(--c-charcoal);
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px #0e0d0f, inset 0 4px 14px rgba(0, 0, 0, .6);
}

.faq-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

.faq-item {
    align-self: start;
    background: var(--c-charcoal-2);
    border: 2px solid #b48a40;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}

.faq-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 52px;
    padding: .85rem 1.1rem;
    list-style: none;
    cursor: pointer;
}

.faq-item__summary::-webkit-details-marker { display: none; }

.faq-item__summary:focus-visible {
    outline: 3px solid var(--c-gold);
    outline-offset: 2px;
    border-radius: 8px;
}

.faq-item__q {
    margin: 0;
    color: #f6e3b0;
    font: 600 1.125rem/1.3 var(--f-display);
}

.faq-item__chev {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--c-ink);
    background: radial-gradient(circle at 35% 30%, #f6dd92, #c99c4f 60%, #7a5620);
    box-shadow: 0 0 0 2px #4a3410;
    transition: transform .2s ease;
}

.faq-item__chev .icon { width: 18px; height: 18px; stroke-width: 2.4; }

.faq-item[open] .faq-item__chev { transform: rotate(180deg); }

.faq-item__a {
    padding: 0 1.1rem 1.1rem;
    color: var(--c-text);
}

.faq-item__a > :last-child { margin-bottom: 0; }

.ledger {
    max-width: 100%;
    overflow-x: auto;
}

.ledger table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 1rem;
}

.ledger caption {
    caption-side: bottom;
    padding-top: .75rem;
    text-align: left;
    color: var(--c-text-soft);
    font-size: .9375rem;
}

.ledger th {
    padding: .75rem 1rem;
    text-align: left;
    color: var(--c-gold);
    font: 700 1rem var(--f-display);
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--c-brass-lo);
}

.ledger td {
    padding: .8rem 2.25rem .8rem 1rem;
    color: var(--c-text);
    vertical-align: top;
    border-bottom: 1px solid rgba(196, 154, 76, .35);
}

.ledger td:last-child {
    background: radial-gradient(circle at calc(100% - 14px) 50%, #f3d98c 0 1.5px, #b48a40 2.5px, #5b3f12 4.5px, transparent 5.5px) no-repeat;
}

.ledger tr.is-result td {
    color: #fff;
    font-weight: 700;
    border-bottom: 3px solid var(--c-red);
}

/* ============================================
   CHIP RAIL
   ============================================ */

.chip-rail {
    position: relative;
    margin-block: 1.25rem;
}

.chip-rail::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 14px;
    margin-top: -7px;
    background: var(--pipe-h);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
}

.chip-rail__list {
    position: relative;
    display: flex;
    gap: .6rem;
    margin: 0;
    padding: .4rem var(--pad);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.chip-rail__list::-webkit-scrollbar { display: none; }

.chip-rail--inline::before { display: none; }

.chip-rail--inline .chip-rail__list {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    overflow: visible;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .4rem 1.1rem;
    white-space: nowrap;
    color: var(--c-ink);
    font: 700 .98rem var(--f-display);
    text-decoration: none;
    background: var(--brass-surface);
    border: 2px solid var(--c-brass-edge);
    border-radius: 999px;
    box-shadow: var(--bevel), 0 3px 6px rgba(0, 0, 0, .4);
}

.chip:hover,
.chip:focus-visible { color: var(--c-ink-link); }

.chip-rail--inline .chip {
    color: #f6e3b0;
    background: linear-gradient(180deg, #4d3617, #2c1d0a);
    border-color: #c99c4f;
}

.chip-rail--inline .chip:hover,
.chip-rail--inline .chip:focus-visible { color: #fff; }

@media (min-width: 768px) {
    .chip-rail__list {
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
    }
}

/* ============================================
   LINK CARDS
   ============================================ */

.link-cards {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .75rem;
}

.link-cards__list {
    position: relative;
    display: flex;
    gap: 1.25rem;
    width: max-content;
    margin: 0;
    padding: .5rem var(--pad) 0;
    list-style: none;
}

.link-cards__list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 14px;
    margin-top: -7px;
    background: var(--copper-h);
    border-radius: 7px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
}

.link-card {
    position: relative;
    width: 250px;
    scroll-snap-align: start;
}

.link-card:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -1.1rem;
    top: calc(50% - 30px);
    width: 22px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 70%);
    filter: blur(2px);
    pointer-events: none;
}

.link-card a {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    height: 100%;
    padding: 1.25rem 1.25rem 1.1rem;
    color: var(--c-text);
    text-decoration: none;
    background: var(--c-charcoal);
    border: 2px solid var(--c-brass);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px #000, var(--drop);
    transition: border-color .2s ease;
}

.link-card a:hover,
.link-card a:focus-visible { border-color: var(--c-brass-hi); }

.link-card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0;
    color: var(--c-gold);
    font-size: 1.2rem;
}

.link-card__title .icon { color: var(--c-brass); }

.link-card__text {
    color: var(--c-text-soft);
    font-size: .98rem;
    line-height: 1.45;
}

@media (min-width: 1024px) {
    .link-cards { overflow: visible; }

    .link-cards__list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: auto;
        padding-inline: 0;
    }

    .link-card { width: auto; }
}

/* ============================================
   CTA BAND
   ============================================ */

.cta-band {
    position: relative;
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

.cta-band__inner {
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 880px;
    margin-inline: auto;
    padding-inline: var(--pad);
}

.cta-band__plate {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2.75rem);
    text-align: center;
    color: var(--c-ink);
    background: var(--brass-riveted);
    border: 2px solid var(--c-brass-edge);
    border-radius: 16px;
    box-shadow: var(--bevel), var(--drop);
}

.cta-band__title {
    margin: 0;
    color: var(--c-ink);
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);
    text-shadow: 0 1px 0 rgba(255, 246, 210, .55);
}

.cta-band__text {
    max-width: 56ch;
    margin: 0 auto 1.25rem;
    font-weight: 600;
}

.cta-band__note {
    margin: 1rem 0 0;
    font-size: .9375rem;
    font-weight: 600;
}

.cta-band__gear {
    position: absolute;
    top: 50%;
    z-index: 0;
    width: clamp(100px, 16vw, 170px);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}

.cta-band__gear--left {
    left: calc(var(--pad) - 60px);
    transform: translateY(-60%) rotate(8deg);
}

.cta-band__gear--right {
    right: calc(var(--pad) - 50px);
    width: clamp(80px, 12vw, 130px);
    transform: translateY(-20%) rotate(-6deg);
}

.cta-band__steam {
    bottom: -20px;
    width: clamp(110px, 18vw, 200px);
}

.cta-band__steam--left { left: -40px; }
.cta-band__steam--right { right: -40px; transform: scaleX(-1); }

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: clamp(2rem, 5vw, 3rem) 0 2rem;
    color: var(--c-text);
    background: #120608;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, #140507 0%, rgba(20, 5, 7, .25) 30%, rgba(20, 5, 7, .45) 100%),
        url("./assets/36d1684ffab6b52580f8facb39183b3f.webp") center bottom / cover no-repeat;
}

.site-footer__panel {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: var(--pad);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
}

.footer-col__title {
    margin: 0 0 .6rem;
    color: var(--c-gold);
    font-size: 1.25rem;
}

.footer-col ul {
    display: grid;
    gap: .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-col a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    color: var(--c-text);
    text-decoration: none;
}

.footer-col a .icon {
    width: 16px;
    height: 16px;
    color: var(--c-brass);
}

.footer-col a:hover,
.footer-col a:focus-visible {
    color: var(--c-gold);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.footer-col p {
    color: var(--c-text-soft);
    font-size: .9375rem;
}

.site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 1080px;
    margin: 1.75rem auto 0;
    padding-inline: var(--pad);
    text-align: center;
}

.footer-rg {
    display: flex;
    align-items: center;
    gap: .9rem;
    max-width: 760px;
    padding: .85rem 1.1rem;
    text-align: left;
    background: var(--c-charcoal);
    border: 2px solid var(--c-brass-lo);
    border-radius: 12px;
}

.footer-rg .age-seal {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.footer-rg p {
    margin: 0;
    font-size: .9375rem;
}

.footer-legal {
    margin: 0;
    padding: .5rem 1rem;
    color: var(--c-text-soft);
    font-size: .875rem;
    background: rgba(20, 8, 9, .85);
    border-radius: 8px;
}

@media (min-width: 768px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================
   HOMEPAGE
   ============================================ */

.lead-capsule {
    max-width: 70ch;
    margin: 0 auto 1.75rem;
    text-align: center;
    font-size: 1.125rem;
    color: var(--c-text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

/* Term ledger plate */
.term-plate {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1000px;
    margin: 0 auto 1.75rem;
    padding: .5rem;
    list-style: none;
    color: var(--c-ink);
    background: var(--brass-riveted);
    border: 2px solid var(--c-brass-edge);
    border-radius: 14px;
    box-shadow: var(--bevel), var(--drop);
}

.term-plate__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1rem .75rem;
    text-align: center;
}

.term-plate__cell .icon {
    width: 34px;
    height: 34px;
    color: #3b2a12;
    filter: drop-shadow(0 1px 0 rgba(255, 246, 210, .7));
}

.term-plate__value {
    font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1 var(--f-display);
    color: var(--c-ink);
    text-shadow: 0 1px 0 rgba(255, 246, 210, .6);
}

.term-plate__label {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.term-plate__cell::before,
.term-plate__cell::after {
    content: none;
    position: absolute;
    border-radius: 4px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}

.term-plate__cell:nth-child(even)::before {
    content: "";
    left: -4px;
    top: 14%;
    bottom: 14%;
    width: 8px;
    background: var(--pipe-v);
}

.term-plate__cell:nth-child(-n+2)::after {
    content: "";
    left: 12%;
    right: 12%;
    bottom: -4px;
    height: 8px;
    background: var(--pipe-h);
}

@media (min-width: 768px) {
    .term-plate { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .term-plate__cell:nth-child(-n+2)::after { content: none; }

    .term-plate__cell:not(:first-child)::before {
        content: "";
        left: -4px;
        top: 14%;
        bottom: 14%;
        width: 8px;
        background: var(--pipe-v);
    }
}

/* Welcome details */
.welcome-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.welcome-grid h3 { color: var(--c-gold); }

@media (min-width: 1024px) {
    .welcome-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

.deposit-list {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: dep;
}

.deposit-list li {
    position: relative;
    min-height: 2.2rem;
    padding-left: 3rem;
    counter-increment: dep;
}

.deposit-list li::before {
    content: counter(dep);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    color: var(--c-ink);
    font: 700 1.1rem var(--f-display);
    background: radial-gradient(circle at 35% 30%, #f6dd92, #c99c4f 60%, #7a5620);
    box-shadow: 0 0 0 2px #4a3410;
}

.check-list {
    display: grid;
    gap: .5rem;
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.check-list .icon {
    margin-top: .2rem;
    color: var(--c-gold);
}

/* Slots */
.slots-wrap {
    max-width: 1100px;
    margin-inline: auto;
}

.slots-more {
    margin: 1.5rem 0 0;
    text-align: center;
    color: var(--c-text-soft);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.slots-more a {
    display: inline-block;
    margin-left: .35rem;
    font-weight: 700;
}

/* Casino + sportsbook machine */
.duo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: var(--pad);
}

.duo-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.duo-card__media {
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    box-shadow: inset 0 0 0 2px #0e0d0f;
}

.duo-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 22%;
}

.duo-card__body {
    padding: 0 clamp(1rem, 3vw, 1.5rem) 1.5rem;
    color: var(--c-text);
    background: var(--c-charcoal);
    border-radius: 0 0 8px 8px;
    box-shadow: inset 0 0 0 2px #0e0d0f;
}

.duo-card__body > :last-child { margin-bottom: 0; }

.duo-card__title {
    position: relative;
    z-index: 2;
    width: fit-content;
    max-width: 100%;
    margin: -1.6rem auto 1rem;
    padding: .55rem 1.75rem;
    color: var(--c-ink);
    font-size: 1.4rem;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 246, 210, .6);
    background:
        var(--rivet) 6px 50% / 16px 16px no-repeat,
        var(--rivet) calc(100% - 6px) 50% / 16px 16px no-repeat,
        var(--brass-surface);
    border: 2px solid var(--c-brass-edge);
    border-radius: 10px;
    box-shadow: var(--bevel), 0 4px 10px rgba(0, 0, 0, .5);
}

.duo__coupling {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 84px;
}

.duo__coupling::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 14px;
    margin-top: -7px;
    background: var(--pipe-h);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
}

.duo__gear {
    position: relative;
    width: 76px;
    height: 76px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
}

.duo-note {
    max-width: 70ch;
    margin: 1.5rem auto 0;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

@media (min-width: 1024px) {
    .duo {
        grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
        align-items: stretch;
    }

    .duo::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -2.5rem;
        bottom: -2.5rem;
        width: 18px;
        margin-left: -9px;
        background: var(--pipe-v);
        box-shadow: 0 0 10px rgba(0, 0, 0, .55);
    }

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

    .duo-card__media {
        min-height: 400px;
        border-radius: 8px 0 0 8px;
    }

    .duo-card__media img {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
        object-position: 40% 25%;
    }

    .duo-card__body {
        padding: 2rem 1.25rem 1.5rem;
        border-radius: 0 8px 8px 0;
    }

    .duo-card__title { margin: 0 0 1rem -2.75rem; }

    .duo-card--reverse .duo-card__media {
        order: 2;
        border-radius: 0 8px 8px 0;
    }

    .duo-card--reverse .duo-card__media img { object-position: 60% 25%; }

    .duo-card--reverse .duo-card__body { border-radius: 8px 0 0 8px; }

    .duo-card--reverse .duo-card__title { margin: 0 -2.75rem 1rem auto; }

    .duo__coupling {
        z-index: 2;
        height: auto;
        align-self: center;
    }

    .duo__coupling::before {
        left: -16px;
        right: -16px;
    }

    .duo__gear {
        width: 116px;
        height: 116px;
    }
}

/* Trust + FAQ */
.trust-note {
    max-width: 860px;
    margin: 1.5rem auto 0;
}

.faq-home {
    max-width: 920px;
    margin-inline: auto;
    padding-inline: var(--pad);
}

.faq-home__answer {
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
    color: var(--c-text);
}

.links-wrap {
    max-width: var(--container);
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .links-wrap { padding-inline: var(--pad); }
}

/* ============================================
   BONUSSER PAGE
   ============================================ */

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: center;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: var(--pad);
}

.split__text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.split__text > :last-child { margin-bottom: 0; }

.split__answer {
    font-size: 1.125rem;
    font-weight: 600;
}

@media (min-width: 1024px) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}

/* Gear chain: three medallions on one pipe */
.gear-chain {
    --gs: 104px;
    --gc-gap: 2.25rem;
    display: grid;
    gap: var(--gc-gap);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--pad);
    list-style: none;
}

.gear-chain__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--gs) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

.gear-chain__gear {
    position: relative;
    z-index: 1;
    width: var(--gs);
    height: var(--gs);
}

.gear-chain__gear .gear {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .55));
}

.gear-chain__num {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 46%;
    height: 46%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    color: var(--c-gold);
    font: 700 1.6rem/1 var(--f-display);
    background: linear-gradient(180deg, #5a3d17, #24170a);
    border: 2px solid #f3d98c;
    text-shadow: 0 2px 0 #1a1005;
}

.gear-chain__body {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.gear-chain__body h3 { color: var(--c-gold); }
.gear-chain__body p { margin: 0; }

.gear-chain__item:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: calc(var(--gs) / 2 - 5px);
    top: calc(var(--gs) / 2);
    width: 10px;
    height: calc(100% + var(--gc-gap));
    background: var(--pipe-v);
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .55);
}

.gear-chain__item:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: calc(var(--gs) / 2 - 14px);
    bottom: calc(var(--gc-gap) / -2 - 14px);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #ffd27a 0 20%, #ffb24a 42%, #b4630f 72%, #5b3f12 100%);
    box-shadow: 0 0 0 3px #4a3410, 0 0 14px rgba(255, 178, 74, .65);
}

.chain-terms {
    max-width: 70ch;
    margin: 2rem auto 0;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

@media (min-width: 768px) {
    .gear-chain {
        --gs: 128px;
        --gc-gap: 2rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gear-chain__item {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .gear-chain__item:not(:last-child)::before {
        left: 50%;
        top: calc(var(--gs) / 2 - 5px);
        width: calc(100% + var(--gc-gap));
        height: 10px;
        background: var(--pipe-h);
    }

    .gear-chain__item:not(:last-child)::after {
        left: calc(100% + var(--gc-gap) / 2 - 14px);
        top: calc(var(--gs) / 2 - 14px);
        bottom: auto;
    }
}

/* Wagering ledger in brass bezel */
.bezel {
    padding: 18px;
    background: var(--brass-riveted);
    border: 2px solid var(--c-brass-edge);
    border-radius: 14px;
    box-shadow: var(--bevel), var(--drop);
}

.bezel .ledger {
    padding: .25rem .5rem .75rem;
    background: var(--c-charcoal);
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px #0e0d0f, inset 0 4px 14px rgba(0, 0, 0, .6);
}

.bezel .ledger table { min-width: 340px; }

/* Terms plaque */
.terms-list {
    display: grid;
    gap: .9rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}

.terms-list li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

.terms-list .icon {
    width: 34px;
    height: 34px;
    color: #3b2a12;
    filter: drop-shadow(0 1px 0 rgba(255, 246, 210, .7));
}

.terms-note {
    font-weight: 600;
}

/* Cashback gauge */
.gauge {
    width: min(100%, 400px);
    margin: 0 auto;
}

.gauge svg {
    display: block;
    width: 100%;
    height: auto;
}

.gauge__labels {
    display: flex;
    justify-content: space-between;
    padding: 0 3%;
    margin-top: .25rem;
}

.gauge__labels span {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gauge__labels strong {
    color: var(--c-gold);
    font: 700 1.75rem/1 var(--f-display);
}

.gauge__labels small {
    color: var(--c-text-soft);
    font-size: .875rem;
}

/* Sports art: frameless, glow under pedestal */
.sports-art {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 420px);
    margin: 0 auto;
}

.sports-art::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 80%;
    height: 30%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 178, 74, .55), rgba(255, 178, 74, 0) 70%);
    pointer-events: none;
}

.sports-art img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* VIP teaser + calm plaque */
.teaser {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    max-width: 860px;
    margin-inline: auto;
}

.teaser .icon {
    width: 48px;
    height: 48px;
    color: var(--c-gold);
}

.teaser p { margin: 0; }

.calm-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-weight: 600;
}

.calm-note .icon {
    width: 28px;
    height: 28px;
    margin-top: .1rem;
    color: #3b2a12;
}

/* ============================================
   SPIL PAGE
   ============================================ */

/* Feature medallions on one shared pipe */
.feature-chain {
    --fm: 96px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--pad);
    list-style: none;
}

.feature-chain::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: calc(var(--pad) + var(--fm) / 2 - 5px);
    top: calc(var(--fm) / 2);
    bottom: calc(var(--fm) / 2);
    width: 10px;
    border-radius: 5px;
    background: var(--pipe-v);
    box-shadow: 0 0 8px rgba(0, 0, 0, .55);
}

.feature {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--fm) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.feature__medal {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--fm);
    height: var(--fm);
}

.feature__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .55));
}

.feature__medal .icon {
    position: relative;
    width: 38px;
    height: 38px;
    color: var(--c-gold);
}

.feature__body {
    padding: 1rem 1.1rem;
    background: var(--c-charcoal);
    border: 2px solid var(--c-brass-lo);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px #000, var(--drop);
}

.feature__body > :last-child { margin-bottom: 0; }

.feature__title {
    margin: 0 0 .4rem;
    color: var(--c-gold);
}

@media (min-width: 1024px) {
    .feature-chain {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .feature-chain::before {
        left: calc(var(--pad) + 12%);
        right: calc(var(--pad) + 12%);
        top: calc(var(--fm) / 2 - 5px);
        bottom: auto;
        width: auto;
        height: 10px;
        background: var(--pipe-h);
    }

    .feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .feature__body {
        flex: 1;
        width: 100%;
    }
}

/* Split reverse + media plate */
@media (min-width: 1024px) {
    .split--reverse .split__text { order: 2; }
}

.media-plate {
    margin: 0;
    padding: 18px;
    background: var(--brass-riveted);
    border: 2px solid var(--c-brass-edge);
    border-radius: 14px;
    box-shadow: var(--bevel), var(--drop);
}

.media-plate img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 0 0 2px #4a3410;
}

.split h3 {
    margin: 1.1rem 0 .35rem;
    color: var(--c-gold);
}

/* Vault dial */
.dial-art {
    display: grid;
    place-items: center;
    width: min(100%, 360px);
    margin: 0 auto;
    padding: 1.25rem;
    background: radial-gradient(circle at 50% 50%, rgba(255, 178, 74, .45), rgba(255, 178, 74, 0) 68%);
}

.dial-art svg {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55));
}

/* Code-native phone */
.phone {
    width: min(100%, 280px);
    margin: 0 auto;
    padding: 12px;
    border-radius: 36px;
    background: var(--brass-surface);
    border: 2px solid var(--c-brass-edge);
    box-shadow: var(--bevel), var(--drop);
}

.phone__screen {
    min-height: 380px;
    padding: .75rem .75rem 1.25rem;
    overflow: hidden;
    border-radius: 26px;
    background: var(--c-charcoal);
    box-shadow: inset 0 0 0 2px #0e0d0f;
}

.phone__notch {
    width: 70px;
    height: 6px;
    margin: 0 auto .85rem;
    border-radius: 3px;
    background: #0e0d0f;
}

.phone__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .5rem;
}

.phone__chip {
    padding: .2rem .6rem;
    border-radius: 999px;
    color: var(--c-ink);
    font: 700 .75rem/1.2 var(--f-display);
    background: var(--brass-surface);
    border: 1px solid var(--c-brass-edge);
}

.phone__row-title {
    margin: .7rem 0 .3rem;
    color: var(--c-gold);
    font: 700 .8rem/1.2 var(--f-display);
}

.phone__row {
    display: flex;
    gap: .4rem;
    overflow: hidden;
}

.phone__tile {
    flex: 0 0 64px;
    height: 64px;
    border-radius: 10px;
    border: 2px solid var(--c-brass-lo);
}

.phone__tile--a { background: linear-gradient(145deg, #8f0d12, #3a0a0d); }
.phone__tile--b { background: linear-gradient(145deg, #1f6b46, #0c2a1c); }
.phone__tile--c { background: linear-gradient(145deg, #5b3f8a, #22163a); }

/* Responsible-play row inside calm notice */
.rg-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: 1rem;
}

.rg-row .age-seal {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.rg-row p { margin: 0; }

/* ============================================
   OM OS PAGE
   ============================================ */

.prose--center {
    margin-inline: auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

/* Operator + licence name plates joined by a pipe */
.plates {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    max-width: 900px;
    margin: 2rem auto 0;
    padding-inline: var(--pad);
}

.plate {
    width: 100%;
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--c-ink);
    background: var(--brass-riveted);
    border: 2px solid var(--c-brass-edge);
    border-radius: 12px;
    box-shadow: var(--bevel), var(--drop);
}

.plate__label {
    display: block;
    font: 700 .875rem var(--f-display);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.plate__value {
    display: block;
    margin-top: .2rem;
    font: 700 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.2 var(--f-display);
    text-shadow: 0 1px 0 rgba(255, 246, 210, .6);
}

.plates__pipe {
    display: grid;
    place-items: center;
    height: 80px;
}

.plates__pipe svg {
    width: 80px;
    height: auto;
    transform: rotate(90deg);
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
}

@media (min-width: 768px) {
    .plates { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); }

    .plates__pipe { height: auto; }

    .plates__pipe svg {
        width: 120px;
        transform: none;
    }
}

/* Frameless mascot portrait with amber glow and steam */
.mascot-art {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 380px);
    margin: 0 auto;
}

.mascot-art::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2%;
    width: 90%;
    height: 24%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 178, 74, .55), rgba(255, 178, 74, 0) 70%);
    pointer-events: none;
}

.mascot-art img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.mascot-art__steam {
    bottom: -10px;
    left: -12%;
    width: 38%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45%);
    mask-image: linear-gradient(180deg, transparent 0, #000 45%);
}

/* ============================================
   VIP PAGE
   ============================================ */

.hero__panel .fact-list { margin-top: 1rem; }

.hero__panel .fact-list li { font-size: .9375rem; }

.ladder {
    max-width: 1100px;
    margin: 0 auto 2rem;
    padding-inline: var(--pad);
}

.ladder__svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
}

.ladder .ladder__h { display: none; }

.ladder .ladder__v {
    max-width: 340px;
    margin-inline: auto;
}

.ladder__label {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 18px;
    fill: var(--c-brass-hi);
}

@media (min-width: 768px) {
    .ladder .ladder__h { display: block; }
    .ladder .ladder__v { display: none; }
}

.bezel .ledger table { min-width: 280px; }

/* ============================================
   BETALINGER PAGE
   ============================================ */

.key-strip {
    position: relative;
    display: grid;
    gap: .75rem;
    max-width: 900px;
    margin: 0 auto 1.5rem;
    padding: 1.75rem clamp(1.5rem, 4vw, 2.75rem);
    list-style: none;
    color: var(--c-ink);
    background: var(--brass-riveted);
    border: 2px solid var(--c-brass-edge);
    border-radius: 14px;
    box-shadow: var(--bevel), var(--drop);
}

.key-strip li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-weight: 600;
}

.key-strip .icon {
    width: 30px;
    height: 30px;
    margin-top: -.15rem;
    color: #5b3f12;
    filter: drop-shadow(0 1px 0 rgba(255, 246, 210, .7));
}

.deposit-bar .housing__tray {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.deposit-bar .housing__tray::-webkit-scrollbar { display: none; }

.deposit-bar .plaque {
    flex: 0 0 min(70vw, 240px);
    scroll-snap-align: center;
}

@media (min-width: 768px) {
    .deposit-bar .housing__tray {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
    }

    .deposit-bar .plaque { flex: none; }
}

.pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    max-width: 640px;
    margin: 0 auto 1.75rem;
}

.medal {
    position: relative;
    display: grid;
    place-items: center;
    width: 168px;
    aspect-ratio: 1;
}

.medal .gear {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .55));
}

.medal__label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .4rem .6rem;
    border-radius: 50%;
    text-align: center;
    color: var(--c-gold);
    font: 700 .95rem/1.2 var(--f-display);
    background: linear-gradient(180deg, #5a3d17, #24170a);
    border: 2px solid #f3d98c;
    width: 96px;
    height: 96px;
    justify-content: center;
}

.medal__label strong {
    font-size: 1.15rem;
    color: #fff;
}

.pair__pipe {
    display: grid;
    place-items: center;
    height: 64px;
}

.pair__pipe svg {
    width: 64px;
    height: auto;
    transform: rotate(90deg);
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
}

@media (min-width: 600px) {
    .pair { grid-template-columns: auto 100px auto; }
    .pair__pipe { height: auto; }
    .pair__pipe svg { width: 100px; transform: none; }
}

.table-fade { position: relative; }

.table-fade::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(28, 26, 29, 0), var(--c-charcoal));
}

.table-fade .ledger table { min-width: 560px; }

@media (min-width: 768px) {
    .table-fade::after { display: none; }
}

.spaced { margin-top: 1.75rem; }

.emblem-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    justify-items: center;
    max-width: 960px;
    margin-inline: auto;
    padding-inline: var(--pad);
}

.emblem {
    display: grid;
    place-items: center;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    color: var(--c-gold);
    background: radial-gradient(circle at 35% 30%, #5a3d17, #24170a);
    border: 3px solid var(--c-brass);
    box-shadow: 0 0 30px rgba(255, 200, 100, .35), var(--drop);
}

.emblem svg {
    width: 66px;
    height: 66px;
}

.emblem-row .prose { text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }

@media (min-width: 768px) {
    .emblem-row {
        grid-template-columns: 140px minmax(0, 1fr);
        justify-items: start;
    }
}

/* ============================================
   MOTION PREFERENCES
   ============================================ */

/* ============================================
   FAQ PAGE
   ============================================ */

.faq-topic {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.faq-topic .faq-home__answer { margin-bottom: 0; }

.faq-topic__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
}

.faq-extra { margin-bottom: 1.25rem; }

.faq-extra .notice__icon .age-seal { width: 46px; height: 46px; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}