/*
 * CSS STYLES - Casoola Casino Guide
 * Steampunk hotel-in-the-clouds design system.
 * Canonical design tokens live in this file.
 */

:root {
    /* Ink and text */
    --ink: #2a1a0e;
    --ink-soft: #4a3220;
    --text: #2b1b0f;
    --text-muted: #5a3f27;
    --link: #7f340b;

    /* Chocolate machinery */
    --choc: #3b2516;
    --choc-hi: #523420;
    --choc-dk: #24150b;

    /* Metals */
    --brass: #c8963e;
    --brass-hi: #f1d07c;
    --brass-dk: #8a5e22;
    --copper: #b8682e;
    --copper-hi: #eba367;
    --copper-dk: #6a3214;
    --steel: #8d8f8e;
    --steel-hi: #d5d7d3;
    --steel-dk: #4f5352;

    /* Parchment and sky */
    --cream: #f7e9c8;
    --cream-2: #efdbae;
    --cream-3: #e2c58c;
    --sky-haze: #f2d48c;

    /* Enamel accents */
    --teal: #1a6570;
    --teal-hi: #2f97a2;
    --teal-dk: #0f434a;
    --teal-bright: #48b9c2;
    --orange: #a84f17;
    --orange-hi: #cf7432;
    --red: #a3221b;
    --green: #24692a;

    /* Type */
    --font-display: "Cinzel", Georgia, "Times New Roman", serif;
    --font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

    /* Layout */
    --max: 1200px;
    --gutter: 1rem;
    --grid-gap: 1.25rem;
    --radius: 16px;
    --pipe-w: 14px;
    --header-bottom: 64px;
    --bay-inset: 0px;

    /* Recipes */
    --brass-grad: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 48%, var(--brass-dk) 100%);
    --pipe-h: linear-gradient(180deg, var(--copper-dk) 0%, var(--copper) 22%, var(--copper-hi) 42%, var(--copper) 62%, var(--copper-dk) 100%);
    --pipe-v: linear-gradient(90deg, var(--copper-dk) 0%, var(--copper) 22%, var(--copper-hi) 42%, var(--copper) 62%, var(--copper-dk) 100%);
    --steel-v: linear-gradient(90deg, var(--steel-dk), var(--steel) 30%, var(--steel-hi) 45%, var(--steel) 65%, var(--steel-dk));
    --parchment: radial-gradient(ellipse at 25% 15%, rgba(255, 250, 235, 0.85), rgba(255, 250, 235, 0) 55%), linear-gradient(165deg, #f8ebcb 0%, #f0dcb0 60%, #e6cb93 100%);
    --rivets:
        radial-gradient(circle 5px at 14px 14px, var(--brass-hi) 0 40%, var(--brass-dk) 55% 85%, transparent 95%),
        radial-gradient(circle 5px at calc(100% - 14px) 14px, var(--brass-hi) 0 40%, var(--brass-dk) 55% 85%, transparent 95%),
        radial-gradient(circle 5px at 14px calc(100% - 14px), var(--brass-hi) 0 40%, var(--brass-dk) 55% 85%, transparent 95%),
        radial-gradient(circle 5px at calc(100% - 14px) calc(100% - 14px), var(--brass-hi) 0 40%, var(--brass-dk) 55% 85%, transparent 95%);
    --frame-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px var(--ink), inset 0 0 26px rgba(138, 94, 34, 0.22), 0 18px 32px -14px rgba(60, 32, 8, 0.55);
}

@media (min-width: 768px) {
    :root {
        --gutter: 1.5rem;
        --grid-gap: 1.5rem;
    }
}

/* ============================================
   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 {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-bottom) + 12px);
}

body {
    margin: 0;
    min-width: 320px;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
    background-color: var(--sky-haze);
    padding-bottom: 5.75rem;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("./assets/65737882ce5f921adb3fe5a3f2d6d3f5.webp") center top / cover no-repeat;
    pointer-events: none;
}

body.menu-open {
    overflow: hidden;
}

h1, h2, h3, h4 {
    color: var(--ink);
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

h1, h2 {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: 0.01em;
}

h3 {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.15rem;
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--link);
}

a:hover {
    color: var(--teal-dk);
}

:focus-visible {
    outline: 3px solid var(--teal-bright);
    outline-offset: 3px;
    border-radius: 4px;
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
}

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

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

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

.wrap {
    width: min(100% - 2 * var(--gutter), var(--max));
    margin-inline: auto;
}

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

.section--tight {
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.micro {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0.6rem 0 0;
}

.answer {
    font-size: 1.1rem;
    font-weight: 500;
    border-left: 5px solid var(--teal);
    padding: 0.25rem 0 0.25rem 1rem;
}

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

.prose h3 {
    margin-top: 1.25rem;
}

.prose ul,
.prose ol {
    padding-left: 1.3rem;
    margin: 0 0 1rem;
}

.prose li {
    margin-bottom: 0.4rem;
}

.prose li::marker {
    color: var(--brass-dk);
    font-weight: 800;
}

@media (min-width: 1024px) {
    .prose--cols {
        column-count: 3;
        column-gap: 2.25rem;
        column-rule: 1px dashed rgba(138, 94, 34, 0.45);
    }

    .prose--cols h3 {
        break-after: avoid;
    }

    .prose--cols p,
    .prose--cols li {
        break-inside: avoid;
    }
}

/* Grids */
.card-grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 480px) {
    .card-grid--2,
    .card-grid--3,
    .card-grid--4,
    .card-grid--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

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

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

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

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

    .split--reverse > :first-child {
        order: 2;
    }
}

.media-frame {
    display: block;
    margin: 0;
    padding: 7px;
    background: var(--brass-grad);
    border: 2px solid var(--ink);
    border-radius: 18px;
    box-shadow: 0 16px 30px -14px rgba(50, 28, 8, 0.6);
}

.media-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 11px;
    border: 2px solid var(--ink);
}

.art {
    margin: 0;
    background: transparent;
}

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

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header__bar {
    background: linear-gradient(180deg, #5a3a22 0%, var(--choc) 55%, #2c1a0e 100%);
    border-bottom: 4px solid var(--brass);
    box-shadow: 0 3px 0 var(--ink), 0 8px 18px rgba(30, 15, 5, 0.35);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 64px;
}

.site-brand {
    order: 1;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    text-decoration: none;
    color: var(--brass-hi);
}

.site-brand__logo {
    display: flex;
    align-items: center;
    flex: none;
}

.site-brand__img {
    width: auto;
    height: auto;
    max-width: 88px;
    max-height: 40px;
    object-fit: contain;
}

.site-brand__text {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    color: var(--brass-hi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 359px) {
    .site-brand__img {
        max-width: 64px;
    }
}

.header-actions {
    order: 2;
    display: flex;
    align-items: center;
}

.header-actions .header-cta {
    display: none;
}

@media (min-width: 600px) {
    .header-actions .header-cta {
        display: inline-flex;
    }

    .site-brand__text {
        font-size: 1rem;
    }
}

.menu-toggle {
    order: 3;
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid var(--brass);
    border-radius: 12px;
    background: linear-gradient(180deg, #5d3c22, #2e1c10);
    box-shadow: 0 0 0 2px var(--ink), inset 0 1px 0 rgba(255, 220, 150, 0.25);
    color: var(--brass-hi);
    cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.menu-toggle__bars {
    position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after { top: 7px; }

.menu-toggle.is-open .menu-toggle__bars { background: transparent; }
.menu-toggle.is-open .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.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;
    background: var(--choc-dk);
    background-image: linear-gradient(180deg, #3b2516 0%, #24150b 100%);
    border-top: 2px solid var(--brass-dk);
}

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

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

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0.75rem var(--gutter);
    color: var(--cream);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 150, 62, 0.3);
}

.site-nav__link:hover {
    color: var(--brass-hi);
}

.site-nav__link[aria-current="page"],
.site-nav__link.is-section {
    color: var(--brass-hi);
    box-shadow: inset 5px 0 0 var(--brass);
}

.site-nav__more {
    padding: 1rem var(--gutter) 2rem;
}

.site-nav__more-title {
    margin: 0 0 0.75rem;
    color: var(--brass-hi);
    font-weight: 800;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-nav__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.site-nav__chips a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--brass-dk);
    border-radius: 10px;
    background: rgba(241, 208, 124, 0.08);
    color: var(--cream);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

.site-nav__chips a[aria-current="page"] {
    border-color: var(--brass-hi);
    color: var(--brass-hi);
}

/* Desktop header: nav left, gear medallion centre, CTA right */
@media (min-width: 1024px) {
    body {
        padding-bottom: 0;
    }

    .site-header {
        position: relative;
    }

    .site-header__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        min-height: 72px;
        gap: 1rem;
    }

    .menu-toggle {
        display: none;
    }

    .site-nav {
        grid-column: 1;
        grid-row: 1;
        position: static;
        display: block;
        overflow: visible;
        background: none;
        border: 0;
    }

    .site-nav__list {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.15rem;
        padding: 0;
    }

    .site-nav__link {
        min-height: 44px;
        padding: 0.5rem 0.55rem;
        font-size: 0.8rem;
        letter-spacing: 0.03em;
        border: 0;
        border-radius: 999px;
        white-space: nowrap;
    }

    .site-nav__link:hover {
        background: rgba(241, 208, 124, 0.12);
    }

    .site-nav__link[aria-current="page"],
    .site-nav__link.is-section {
        background: var(--brass-grad);
        color: var(--ink);
        box-shadow: inset 0 0 0 2px var(--ink);
    }

    .site-nav__more {
        display: none;
    }

    .site-brand {
        grid-column: 2;
        grid-row: 1;
        flex-direction: column;
        gap: 0;
        margin-block: -4px -108px;
        position: relative;
        z-index: 2;
    }

    .site-brand__logo {
        position: relative;
        isolation: isolate;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        justify-content: center;
        background: radial-gradient(circle closest-side, #4a2f1c 0 74%, var(--ink) 75% 77%, var(--brass-dk) 78% 82%, var(--brass) 83% 90%, var(--brass-hi) 91% 94%, var(--brass-dk) 95%);
        box-shadow: 0 10px 22px rgba(30, 15, 5, 0.45);
    }

    .site-brand__logo::before {
        content: "";
        position: absolute;
        inset: -11px;
        z-index: -1;
        border-radius: 50%;
        background: repeating-conic-gradient(from 3deg, var(--brass-dk) 0deg 2deg, var(--brass) 2deg 11deg, var(--brass-dk) 11deg 13deg, transparent 13deg 22.5deg);
        -webkit-mask: radial-gradient(circle closest-side, transparent 0 84%, #000 85% 99%, transparent 100%);
        mask: radial-gradient(circle closest-side, transparent 0 84%, #000 85% 99%, transparent 100%);
    }

    .site-brand__img {
        max-width: 108px;
        max-height: 96px;
    }

    .site-brand__text {
        margin-top: -14px;
        position: relative;
        padding: 0.2rem 0.9rem;
        font-size: 0.875rem;
        color: var(--ink);
        background: var(--brass-grad);
        border: 2px solid var(--ink);
        border-radius: 999px;
        box-shadow: 0 4px 10px rgba(30, 15, 5, 0.35);
    }

    .header-actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
}

@media (min-width: 1280px) {
    .site-nav__link {
        font-size: 0.875rem;
        padding-inline: 0.8rem;
    }
}

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

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.7rem 1.5rem;
    border: 0;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn--cta {
    color: #fff;
    padding-left: 2.6rem;
    background: linear-gradient(180deg, #278690 0%, #1a6570 50%, #134f57 100%);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -3px 0 rgba(0, 0, 0, 0.25),
        0 0 0 3px var(--brass),
        0 0 0 5px var(--ink),
        0 8px 16px -4px rgba(40, 20, 5, 0.5);
}

.btn--cta::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--brass-hi) 0 30%, var(--brass) 45% 70%, var(--brass-dk) 75%);
    box-shadow: 0 0 0 2px var(--ink);
}

.btn--cta:hover,
.btn--cta:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, #2b919b 0%, #1d6e7a 50%, #155a63 100%);
    transform: translateY(-1px);
}

.btn--steam::after {
    content: "";
    position: absolute;
    right: -22px;
    top: -20px;
    width: 38px;
    height: 38px;
    pointer-events: none;
    background:
        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.95) 0 22%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.85) 0 18%, rgba(255, 255, 255, 0) 52%);
    filter: blur(3px);
    opacity: 0.85;
}

.btn--sm {
    min-height: 44px;
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    font-size: 0.9rem;
}

.btn--sm.btn--cta::before {
    width: 16px;
    height: 16px;
    margin-top: -8px;
}

.btn--lg {
    min-height: 56px;
    padding: 0.85rem 2rem 0.85rem 3rem;
    font-size: 1.1rem;
}

.btn--block {
    width: 100%;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 0 0 2px var(--ink);
}

.pill--orange {
    background: linear-gradient(180deg, #bf6326 0%, #a84f17 50%, #8e4112 100%);
}

.pill--teal {
    background: linear-gradient(180deg, #278690 0%, #1a6570 50%, #134f57 100%);
}

.pill:hover,
.pill:focus-visible {
    color: #fff;
    filter: brightness(1.08);
}

/* ============================================
   BREADCRUMBS & META LINES
   ============================================ */

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumbs li + li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--brass-dk);
    border-right: 2px solid var(--brass-dk);
    transform: rotate(45deg);
}

.breadcrumbs a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

.breadcrumbs [aria-current="page"] {
    color: var(--text-muted);
}

.updated {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--cream);
    border: 2px solid var(--brass-dk);
    border-radius: 999px;
}

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

.hero {
    position: relative;
    isolation: isolate;
    padding-block: 1.25rem 2.75rem;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: 60% top;
    background-repeat: no-repeat;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 28%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(242, 212, 140, 0), rgba(242, 212, 140, 0.85));
}

.hero__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "mascot" "sign";
}

.hero__intro {
    grid-area: intro;
    padding: 1rem 1.1rem 0.9rem;
    background: rgba(250, 238, 210, 0.93);
    border: 2px solid var(--brass-dk);
    border-radius: 16px;
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55);
}

.hero__title {
    font-size: clamp(1.7rem, 1.1rem + 2.8vw, 3rem);
    line-height: 1.12;
    margin-bottom: 0.6rem;
}

.hero__lead {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
}

.hero__mascot {
    grid-area: mascot;
    position: relative;
    justify-self: center;
    width: min(70%, 340px);
}

.hero__mascot::before {
    content: "";
    position: absolute;
    inset: 8% -10% 0;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 226, 150, 0.85) 0%, rgba(255, 210, 120, 0.35) 45%, rgba(255, 210, 120, 0) 70%);
}

.hero__mascot img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.hero__mascot-art {
    width: 100%;
    aspect-ratio: var(--ar, 9 / 11);
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* Hanging parchment sign */
.sign {
    grid-area: sign;
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 640px;
    margin-top: 2.25rem;
    padding: 1.6rem 1.25rem 1.35rem;
    text-align: center;
    background: var(--rivets), var(--parchment);
    border: 6px solid var(--brass);
    border-radius: 18px;
    box-shadow: var(--frame-shadow);
}

.sign::before,
.sign::after {
    content: "";
    position: absolute;
    top: calc(-2.25rem - 9px);
    width: 7px;
    height: 2.25rem;
    background: linear-gradient(90deg, #5d4018, var(--brass-hi) 45%, var(--brass-dk));
    border: 1px solid var(--ink);
    border-radius: 3px;
}

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

.sign__handle {
    position: absolute;
    top: -17px;
    left: 50%;
    width: 110px;
    height: 16px;
    margin-left: -55px;
    border-radius: 10px 10px 4px 4px;
    background: var(--brass-grad);
    border: 2px solid var(--ink);
}

.sign__badge {
    position: absolute;
    top: -18px;
    right: -16px;
    width: 46px;
    height: 46px;
    z-index: 2;
}

.sign__badge--gem {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #9fe3e8 0 15%, var(--teal-hi) 35%, var(--teal-dk) 80%);
    border: 4px solid var(--brass);
    box-shadow: 0 0 0 2px var(--ink);
}

.sign__badge--lock,
.sign__badge--bell,
.sign__badge--shield,
.sign__badge--key,
.sign__badge--book {
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    background: var(--brass-grad);
    border: 2px solid var(--ink);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 4px 8px rgba(40, 20, 5, 0.35);
}

.sign__stamp {
    position: absolute;
    left: -14px;
    top: -26px;
    z-index: 2;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    padding: 0.6rem;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: 0.875rem;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    rotate: -10deg;
    background: radial-gradient(circle at 40% 35%, #d0763a, var(--orange) 55%, #7a3410);
    box-shadow: 0 0 0 4px rgba(122, 52, 16, 0.55), 0 0 0 6px var(--ink), 0 6px 12px rgba(40, 20, 5, 0.4);
}

.sign__pipe {
    display: none;
}

.sign__title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
    line-height: 1.15;
    letter-spacing: 0.03em;
    color: var(--ink);
    margin: 0 0 0.9rem;
}

.sign__title::after {
    content: "";
    display: block;
    width: min(70%, 260px);
    height: 4px;
    margin: 0.55rem auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--brass-dk), transparent);
}

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

.sign__body .btn {
    margin-top: 0.4rem;
}

.key-rows {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 1.1rem;
    text-align: left;
}

.key-rows__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.45rem 0.75rem;
    background: rgba(255, 250, 235, 0.65);
    border: 1px solid rgba(138, 94, 34, 0.45);
    border-radius: 10px;
}

.key-rows dt {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}

.key-rows dd {
    margin: 0;
    font-weight: 800;
    color: var(--ink);
}

@media (min-width: 1024px) {
    .hero {
        padding-block: 8.75rem 3.5rem;
    }

    .hero__bg {
        background-position: center top;
    }

    .hero__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-areas: "mascot intro" "mascot sign";
        column-gap: 2.5rem;
        row-gap: 0.5rem;
        align-items: start;
    }

    .hero--reverse .hero__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-areas: "intro mascot" "sign mascot";
    }

    .hero__mascot {
        width: 100%;
        max-width: 470px;
        align-self: end;
    }

    .sign {
        margin-top: 3rem;
        padding: 2rem 2rem 1.75rem;
    }

    .sign::before,
    .sign::after {
        top: calc(-3rem - 9px);
        height: 3rem;
    }

    .sign__pipe {
        display: block;
        position: absolute;
        left: calc(100% + 3px);
        top: 42%;
        width: 54px;
        height: 150px;
        border-top: var(--pipe-w) solid var(--copper);
        border-right: var(--pipe-w) solid var(--copper);
        border-top-right-radius: 26px;
        box-shadow: 0 -2px 0 var(--ink), 2px 0 0 var(--ink);
    }

    .sign__gear {
        position: absolute;
    }

    .sign__gear--a {
        --size: 82px;
        right: -48px;
        bottom: -78px;
    }

    .sign__gear--b {
        --size: 54px;
        right: -96px;
        bottom: -26px;
    }

    .sign__steam {
        right: -30px;
        top: -44px;
    }
}

.hero--compact {
    padding-bottom: 1.5rem;
}

.hero--compact .hero__mascot {
    width: min(45%, 220px);
}

@media (min-width: 1024px) {
    .hero--compact .hero__mascot {
        max-width: 300px;
    }

    .hero--compact .hero__mascot img {
        max-height: 44vh;
        width: auto;
        margin-inline: auto;
    }
}

/* ============================================
   SECTION HEADINGS, PLAQUES & PANELS
   ============================================ */

.section-head {
    margin-bottom: 1.75rem;
}

.section-head--center {
    text-align: center;
}

.plaque {
    display: table;
    max-width: 100%;
    margin: 0 auto 0.9rem;
    padding: 0.5em 1.15em;
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.95rem);
    line-height: 1.2;
    text-align: center;
    color: var(--ink);
    background: var(--brass-grad);
    border: 3px solid var(--ink);
    border-radius: 1.6rem;
    box-shadow: inset 0 2px 0 rgba(255, 245, 210, 0.6), inset 0 -3px 0 rgba(90, 55, 15, 0.35), 0 5px 0 rgba(42, 26, 14, 0.35), 0 12px 20px -10px rgba(42, 26, 14, 0.5);
}

.section-head--left .plaque {
    margin-left: 0;
}

.section-head__intro {
    max-width: 70ch;
    margin: 0 auto;
    font-weight: 500;
}

.section-head--left .section-head__intro {
    margin-left: 0;
}

.panel {
    position: relative;
    margin-top: 1.5rem;
    padding: 2.4rem 1.25rem 1.4rem;
    background: var(--rivets), var(--parchment);
    border: 6px solid var(--brass);
    border-radius: 18px;
    box-shadow: var(--frame-shadow);
}

.panel__tab {
    display: table;
    max-width: calc(100% - 1rem);
    margin: -3.55rem auto 1.1rem;
    padding: 0.45rem 1.2rem;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem);
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink);
    background: var(--brass-grad);
    border: 3px solid var(--ink);
    border-radius: 999px;
    box-shadow: inset 0 2px 0 rgba(255, 245, 210, 0.6), 0 4px 0 rgba(42, 26, 14, 0.3);
}

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

@media (min-width: 768px) {
    .panel {
        padding: 2.6rem 2rem 1.75rem;
    }
}

/* ============================================
   GEAR PRIMITIVES
   ============================================ */

.gear {
    position: relative;
    display: block;
    width: var(--size, 64px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
}

.gear::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 4deg, var(--brass-dk) 0deg 2deg, var(--brass) 2deg 10deg, var(--brass-dk) 10deg 12deg, transparent 12deg 22.5deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 78%, #000 79% 99%, transparent 100%);
    mask: radial-gradient(circle closest-side, transparent 0 78%, #000 79% 99%, transparent 100%);
}

.gear::after {
    content: "";
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    border: 3px solid var(--ink);
    background:
        radial-gradient(circle closest-side, var(--ink) 0 10%, var(--brass-hi) 11% 17%, var(--brass) 18% 22%, var(--brass-dk) 23% 26%, transparent 27% 69%, var(--brass-dk) 70% 74%, var(--brass) 75% 88%, var(--brass-hi) 89% 93%, var(--brass-dk) 94%),
        repeating-conic-gradient(from 10deg, var(--brass-dk) 0deg 2deg, var(--brass) 2deg 14deg, var(--brass-dk) 14deg 16deg, transparent 16deg 60deg);
}

.gear-badge {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: var(--badge, 64px);
    height: var(--badge, 64px);
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.4rem;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    background: radial-gradient(circle closest-side, var(--teal-hi) 0 20%, var(--teal) 45% 58%, var(--ink) 60% 64%, var(--brass-hi) 66% 72%, var(--brass) 73% 84%, var(--brass-dk) 85% 100%);
}

.gear-badge::before {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: -1;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--brass-dk) 0deg 2deg, var(--brass) 2deg 12deg, var(--brass-dk) 12deg 14deg, transparent 14deg 30deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 80%, #000 81% 99%, transparent 100%);
    mask: radial-gradient(circle closest-side, transparent 0 80%, #000 81% 99%, transparent 100%);
}

/* Pressure gauge */
.gauge {
    --g: 84px;
    position: relative;
    display: block;
    width: var(--g);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fffaf0, #f2e3c0 60%, #dcc28d);
    border: 6px solid var(--brass);
    box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink), inset 0 3px 8px rgba(0, 0, 0, 0.25), 0 6px 12px rgba(40, 20, 5, 0.35);
}

.gauge::before {
    content: "";
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    background:
        conic-gradient(from -135deg, transparent 0deg 270deg, #ead6ab 270deg 360deg),
        repeating-conic-gradient(from -135deg, var(--ink) 0deg 1.6deg, transparent 1.6deg 27deg),
        conic-gradient(from -135deg, #3f8a3f 0deg 130deg, #d6a43a 130deg 200deg, var(--red) 200deg 270deg, transparent 270deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 68%, #000 70% 100%);
    mask: radial-gradient(circle closest-side, transparent 0 68%, #000 70% 100%);
}

.gauge::after {
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    bottom: 50%;
    width: 4px;
    height: 38%;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, var(--red), var(--ink));
    transform-origin: 50% 100%;
    rotate: var(--angle, 0deg);
}

.gauge__hub {
    position: absolute;
    inset: 41%;
    z-index: 2;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--brass-hi), var(--brass-dk));
    border: 2px solid var(--ink);
}

.gauge--sm {
    --g: 54px;
    border-width: 4px;
}

.gauge--lg {
    --g: 120px;
    border-width: 8px;
}

/* Steam */
.steam {
    position: absolute;
    width: 46px;
    height: 46px;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 72%, rgba(255, 255, 255, 0.95) 0 22%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.8) 0 18%, rgba(255, 255, 255, 0) 50%),
        radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.75) 0 16%, rgba(255, 255, 255, 0) 48%);
    filter: blur(3px);
    opacity: 0.8;
}

/* ============================================
   PIPE SYSTEM + GEAR CARDS
   (place pipe_ends() before the cards inside .pipe-system)
   ============================================ */

.pipe-system {
    position: relative;
    isolation: isolate;
    padding: 1rem 0 1rem 2.25rem;
    --pipe-reach: 2.25rem;
}

.pipe-system::before,
.pipe-system::after {
    content: "";
    position: absolute;
    top: 1.25rem;
    bottom: 1.25rem;
    width: var(--pipe-w);
    border-radius: 8px;
    background:
        repeating-linear-gradient(180deg, transparent 0 96px, var(--copper-dk) 96px 100px, var(--copper-hi) 100px 102px, transparent 102px 110px),
        var(--pipe-v);
    box-shadow: 0 0 0 2px var(--ink);
}

.pipe-system::before {
    left: 4px;
}

.pipe-system::after {
    display: none;
    right: 4px;
}

.pipe-system > :not(.pipe-steam):not(.pipe-gauge) {
    position: relative;
}

.pipe-system > :not(.pipe-steam):not(.pipe-gauge)::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(50% - var(--pipe-w) / 2);
    left: -2rem;
    width: 2rem;
    height: var(--pipe-w);
    background:
        repeating-linear-gradient(90deg, transparent 0 110px, var(--copper-dk) 110px 114px, var(--copper-hi) 114px 116px, transparent 116px 124px),
        var(--pipe-h);
    box-shadow: 0 0 0 2px var(--ink);
}

.pipe-system > :not(.pipe-steam):not(.pipe-gauge)::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 30px;
    height: 30px;
    top: calc(50% - 15px);
    left: -40px;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, var(--ink) 0 16%, var(--brass-hi) 17% 30%, var(--brass) 31% 62%, var(--brass-dk) 63% 72%, transparent 73%),
        repeating-conic-gradient(var(--brass) 0deg 12deg, transparent 12deg 30deg);
    -webkit-mask: radial-gradient(circle closest-side, #000 98%, transparent 100%);
    mask: radial-gradient(circle closest-side, #000 98%, transparent 100%);
}

.pipe-steam {
    top: -1.5rem;
    z-index: 1;
}

.pipe-steam--l { left: -12px; }
.pipe-steam--r { right: -12px; display: none; }

.pipe-gauge {
    display: none;
    position: absolute;
    right: -24px;
    top: calc(50% - 27px);
    z-index: 4;
}

@media (min-width: 768px) {
    .pipe-system {
        padding-inline: 2.25rem;
    }

    .pipe-system::after,
    .pipe-steam--r,
    .pipe-gauge {
        display: block;
    }

    .pipe-system > :not(.pipe-steam):not(.pipe-gauge)::before {
        left: calc(-1 * var(--pipe-reach));
        right: calc(-1 * var(--pipe-reach));
        width: auto;
    }

    .pipe-system > :not(.pipe-steam):not(.pipe-gauge)::after {
        left: auto;
        right: calc(var(--grid-gap) / -2 - 15px);
    }

    .pipe-system > :last-child::after {
        display: none;
    }
}

.gear-card {
    height: 100%;
    filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 10px 12px rgba(60, 32, 8, 0.25));
}

.gear-card__frame {
    --tooth: 9px;
    height: 100%;
    padding: calc(var(--tooth) + 5px) 7px;
    background: var(--brass-grad);
    border-radius: 14px;
    -webkit-mask:
        linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--tooth)) no-repeat,
        repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 26px) center top / calc(100% - 28px) var(--tooth) no-repeat,
        repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 26px) center bottom / calc(100% - 28px) var(--tooth) no-repeat;
    mask:
        linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--tooth)) no-repeat,
        repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 26px) center top / calc(100% - 28px) var(--tooth) no-repeat,
        repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 26px) center bottom / calc(100% - 28px) var(--tooth) no-repeat;
}

.gear-card__face {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.3rem 1rem 1.1rem;
    text-align: center;
    background: var(--rivets), var(--parchment);
    border: 2px solid var(--ink);
    border-radius: 10px;
}

.gear-card__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--ink);
    background: var(--brass-grad);
    border: 2px solid var(--ink);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
}

.gear-card__title {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gear-card__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.gear-card--short .gear-card__face {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 0.85rem;
    padding: 1rem;
}

.gear-card--short .gear-card__title {
    margin: 0 0 0.2rem;
}

/* ============================================
   BAY + GIANT GEARS + MEDALLION CARDS
   ============================================ */

.bay-wrap {
    position: relative;
    isolation: isolate;
    margin-top: 2.5rem;
}

.gear--giant {
    position: absolute;
    top: 50%;
    z-index: -1;
    width: clamp(240px, 30vw, 440px);
    display: none;
}

.gear--giant-l {
    left: var(--bay-inset);
    translate: -50% -50%;
}

.gear--giant-r {
    right: var(--bay-inset);
    translate: 50% -50%;
}

@media (min-width: 768px) {
    .bay-wrap {
        --bay-inset: clamp(1.5rem, 6vw, 6.5rem);
        padding-inline: var(--bay-inset);
    }

    .gear--giant {
        display: block;
    }
}

.bay {
    position: relative;
    padding: 2.25rem 1rem 1.5rem;
    color: var(--cream);
    background:
        radial-gradient(circle 5px at 16px 16px, var(--brass-hi) 0 40%, var(--brass-dk) 55% 85%, transparent 95%),
        radial-gradient(circle 5px at calc(100% - 16px) 16px, var(--brass-hi) 0 40%, var(--brass-dk) 55% 85%, transparent 95%),
        radial-gradient(circle 5px at 16px calc(100% - 16px), var(--brass-hi) 0 40%, var(--brass-dk) 55% 85%, transparent 95%),
        radial-gradient(circle 5px at calc(100% - 16px) calc(100% - 16px), var(--brass-hi) 0 40%, var(--brass-dk) 55% 85%, transparent 95%),
        radial-gradient(ellipse at 50% 0%, rgba(120, 78, 40, 0.45), transparent 60%),
        linear-gradient(180deg, #4a2f1c 0%, #33200f 100%);
    border: 6px solid var(--brass-dk);
    border-radius: 22px;
    box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 3px #1c1007, inset 0 6px 24px rgba(0, 0, 0, 0.45), 0 22px 40px -18px rgba(40, 20, 5, 0.7);
}

.bay > p,
.bay > ul {
    color: var(--cream);
}

.bay a:not([class]) {
    color: var(--brass-hi);
}

.bay__tab {
    display: table;
    max-width: calc(100% - 1rem);
    margin: -3.6rem auto 1.75rem;
    padding: 0.45rem 1.3rem;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.15rem, 0.95rem + 1vw, 1.6rem);
    line-height: 1.2;
    text-align: center;
    color: var(--ink);
    background: var(--parchment);
    border: 4px solid var(--brass);
    border-radius: 14px;
    box-shadow: 0 0 0 2px var(--ink), 0 6px 12px rgba(30, 15, 5, 0.4);
}

@media (min-width: 768px) {
    .bay {
        padding: 2.5rem 1.75rem 2rem;
    }

    .bay__tab {
        margin-top: -3.85rem;
    }
}

.medallion-card {
    --m: 104px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: calc(var(--m) * 0.55);
    padding: calc(var(--m) * 0.58) 1rem 1.1rem;
    text-align: center;
    color: var(--text);
    text-decoration: none;
    background: var(--parchment);
    border: 3px solid var(--brass-dk);
    border-radius: 14px;
    box-shadow: 0 0 0 2px var(--ink), inset 0 0 18px rgba(138, 94, 34, 0.2), 0 12px 22px -12px rgba(20, 10, 3, 0.7);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.medallion-card--link:hover,
.medallion-card--link:focus-visible {
    color: var(--text);
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px rgba(241, 208, 124, 0.7), 0 18px 26px -12px rgba(20, 10, 3, 0.75);
}

.medallion {
    position: absolute;
    top: calc(var(--m) * -0.52);
    left: 50%;
    width: var(--m);
    height: var(--m);
    margin-left: calc(var(--m) / -2);
    border-radius: 50%;
    isolation: isolate;
}

.medallion::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--brass-dk) 0deg 2deg, var(--brass) 2deg 10deg, var(--brass-dk) 10deg 12deg, transparent 12deg 20deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 78%, #000 79% 99%, transparent 100%);
    mask: radial-gradient(circle closest-side, transparent 0 78%, #000 79% 99%, transparent 100%);
}

.medallion__disc {
    position: absolute;
    inset: 9%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: var(--cream);
    border: 5px solid var(--brass);
    background: radial-gradient(circle at 35% 30%, var(--enamel-hi), var(--enamel) 55%, var(--enamel-dk));
    box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink), inset 0 6px 14px rgba(0, 0, 0, 0.35);
}

.medallion__disc img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.medallion__disc .icon {
    width: 46%;
    height: 46%;
}

.steam--wisp {
    width: 34px;
    height: 40px;
    right: -10px;
    top: -14px;
}

.medallion-card__title {
    margin: 0.15rem 0 0;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.medallion-card__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.medallion-card__cta {
    margin-top: auto;
    padding-top: 0.6rem;
}

.key-term {
    margin: 0.3rem 0 0;
    padding: 0.25rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
    background: rgba(241, 208, 124, 0.55);
    border: 1px solid var(--brass-dk);
    border-radius: 999px;
}

/* Enamel palette (medallions + provider badges) */
.enamel--teal    { --enamel: #1a6570; --enamel-hi: #3fa7b0; --enamel-dk: #0f434a; }
.enamel--green   { --enamel: #2f6e3a; --enamel-hi: #5aa864; --enamel-dk: #1b4623; }
.enamel--rust    { --enamel: #9a3f1c; --enamel-hi: #d06a3c; --enamel-dk: #5f230d; }
.enamel--navy    { --enamel: #22355e; --enamel-hi: #4a64a0; --enamel-dk: #121f3a; }
.enamel--grey    { --enamel: #4f555c; --enamel-hi: #868d95; --enamel-dk: #2e3236; }
.enamel--red     { --enamel: #9c2a22; --enamel-hi: #d0574c; --enamel-dk: #5e1712; }
.enamel--slate   { --enamel: #3e5a74; --enamel-hi: #6f8fae; --enamel-dk: #233547; }
.enamel--purple  { --enamel: #5b3a78; --enamel-hi: #8c68ad; --enamel-dk: #352146; }
.enamel--amber   { --enamel: #8e5c0e; --enamel-hi: #d39a3a; --enamel-dk: #573706; }
.enamel--crimson { --enamel: #8e1b35; --enamel-hi: #c84a66; --enamel-dk: #540d1e; }
.enamel--olive   { --enamel: #56601e; --enamel-hi: #8d9a43; --enamel-dk: #343a10; }
.enamel--silver  { --enamel: #5d646b; --enamel-hi: #a7aeb5; --enamel-dk: #383d42; }
.enamel--gold    { --enamel: #7d5f10; --enamel-hi: #d8b24d; --enamel-dk: #4b3807; }

/* ============================================
   GAME CARDS
   ============================================ */

.game-card {
    position: relative;
    height: 100%;
}

.game-card::before,
.game-card::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    height: 8px;
    background: repeating-linear-gradient(90deg, var(--brass) 0 12px, transparent 12px 22px);
    border-radius: 2px;
}

.game-card::before { top: -7px; }
.game-card::after { bottom: -7px; }

.game-card__frame {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 7px;
    background: var(--brass-grad);
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: 0 14px 24px -12px rgba(20, 10, 3, 0.75);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.game-card:hover .game-card__frame {
    transform: translateY(-3px);
    box-shadow: 0 0 0 4px rgba(241, 208, 124, 0.6), 0 20px 30px -12px rgba(20, 10, 3, 0.8);
}

.game-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: 9px;
    background: var(--choc);
}

.game-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-card__plate {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 7px;
    padding: 0.9rem 0.9rem 1rem;
    color: var(--text);
    background: var(--parchment);
    border: 2px solid var(--ink);
    border-radius: 9px;
}

.game-card__plate p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.game-card__title {
    margin: 0;
    font-size: 1.05rem;
}

.game-card__cta {
    margin-top: auto;
    padding-top: 0.4rem;
}

/* ============================================
   FACT CHIPS
   ============================================ */

.chip-row {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.chip-row::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(50% - 5px);
    top: 0;
    bottom: 0;
    width: 10px;
    background: var(--pipe-v);
    box-shadow: 0 0 0 2px var(--ink);
    border-radius: 6px;
}

@media (min-width: 480px) {
    .chip-row::before {
        left: 0;
        right: 0;
        top: calc(50% - 5px);
        bottom: auto;
        width: auto;
        height: 10px;
        background: var(--pipe-h);
    }
}

.fact-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 1.1rem 0.9rem 0.9rem;
    text-align: center;
    background: var(--rivets), var(--parchment);
    border: 4px solid var(--brass);
    border-radius: 14px;
    box-shadow: 0 0 0 2px var(--ink), 0 10px 18px -10px rgba(60, 32, 8, 0.55);
}

.fact-chip::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: -10px;
    height: 7px;
    background: repeating-linear-gradient(90deg, var(--brass-dk) 0 12px, transparent 12px 20px);
}

.fact-chip__icon {
    color: var(--brass-dk);
}

.fact-chip__value {
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 1.15;
    color: var(--ink);
}

.fact-chip__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* ============================================
   STEPS (gear badges on a copper pipe)
   ============================================ */

.steps {
    --badge: 60px;
    position: relative;
    isolation: isolate;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.steps__item {
    position: relative;
    min-height: var(--badge);
    padding-left: calc(var(--badge) + 1.1rem);
}

.steps__item::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(var(--badge) / 2 - 6px);
    top: 0;
    bottom: -1.25rem;
    width: 12px;
    background: var(--pipe-v);
    box-shadow: 0 0 0 2px var(--ink);
}

.steps__item:last-child::before {
    bottom: auto;
    height: calc(var(--badge) / 2);
}

.steps__badge {
    position: absolute;
    left: 0;
    top: 0;
}

.steps__body {
    padding: 0.85rem 1rem;
    background: var(--parchment);
    border: 3px solid var(--brass);
    border-radius: 12px;
    box-shadow: 0 0 0 2px var(--ink);
}

.steps__body p {
    margin: 0;
    font-size: 1rem;
}

.steps__title {
    margin: 0 0 0.3rem;
    font-size: 1.02rem;
}

@media (min-width: 768px) {
    .steps {
        --badge: 70px;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .steps__item {
        padding-left: 0;
        padding-top: calc(var(--badge) + 1rem);
        text-align: center;
    }

    .steps__item::before,
    .steps__item:last-child::before {
        left: -0.7rem;
        right: -0.7rem;
        top: calc(var(--badge) / 2 - 6px);
        bottom: auto;
        width: auto;
        height: 12px;
        background: var(--pipe-h);
    }

    .steps__badge {
        left: calc(50% - var(--badge) / 2);
    }

    .steps__body {
        height: 100%;
    }
}

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

/* ============================================
   CHECKLIST TAG
   ============================================ */

.tag-card {
    position: relative;
    padding: 2.6rem 1.25rem 1.4rem;
    background: var(--parchment);
    border: 3px solid var(--brass-dk);
    border-radius: 14px;
    box-shadow: 0 0 0 2px var(--ink), 0 16px 26px -14px rgba(60, 32, 8, 0.6);
    rotate: -0.6deg;
}

.tag-card__eyelet {
    position: absolute;
    top: 0.8rem;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, #5a3a1c 0 32%, var(--brass-hi) 38% 58%, var(--brass-dk) 64%);
    box-shadow: 0 0 0 2px var(--ink);
}

.tag-card__title {
    margin: 0 0 0.85rem;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tag-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.tag-card__list li {
    position: relative;
    padding-left: 2.25rem;
    min-height: 26px;
}

.tag-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 22px;
    height: 22px;
    border: 2px solid #9a2a1a;
    border-radius: 4px;
    rotate: -4deg;
    background: rgba(154, 42, 26, 0.08);
}

.tag-card__list li::after {
    content: "✓";
    position: absolute;
    left: 4px;
    top: -0.1rem;
    font-weight: 900;
    font-size: 1.15rem;
    color: #9a2a1a;
}

@media (min-width: 768px) {
    .tag-card {
        padding-inline: 2rem;
    }

    .tag-card--2col .tag-card__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }
}

/* ============================================
   PROS & CONS + TWIN PANELS
   ============================================ */

.pros-cons__cols {
    display: grid;
    gap: 1.25rem;
}

.pros-cons__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pros-cons__col--pro .pros-cons__head { color: var(--green); }
.pros-cons__col--con .pros-cons__head { color: var(--red); }

.pros-cons ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.pros-cons li {
    position: relative;
    padding-left: 1.9rem;
    font-size: 1rem;
}

.pros-cons li::before {
    position: absolute;
    left: 0;
    top: 0.15rem;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
}

.pros-cons__col--pro li::before {
    content: "✓";
    background: var(--green);
    box-shadow: 0 0 0 2px #b7d8b0;
}

.pros-cons__col--con li::before {
    content: "!";
    background:
        radial-gradient(circle closest-side, var(--red) 0 70%, transparent 72%),
        repeating-conic-gradient(var(--red) 0deg 15deg, transparent 15deg 30deg);
}

@media (min-width: 600px) {
    .pros-cons__cols {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0;
    }

    .pros-cons__col--pro {
        padding-right: 1.25rem;
    }

    .pros-cons__col--con {
        padding-left: 1.25rem;
        border-left: 3px solid var(--brass-dk);
    }
}

.twin {
    position: relative;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
}

.twin > .panel {
    margin-top: 1.5rem;
}

.twin__hub {
    position: relative;
    z-index: 3;
    justify-self: center;
    display: grid;
    justify-items: center;
    margin-block: -0.6rem -1.4rem;
}

.twin__hub .gauge {
    position: relative;
    z-index: 2;
}

.twin__gear {
    --size: 70px;
    margin-top: -34px;
}

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

    .twin__hub {
        align-self: center;
        margin: 1.5rem -1.75rem 0;
    }

    .twin__gear {
        --size: 90px;
    }
}

@media (min-width: 1024px) {
    .twin::before,
    .twin::after {
        content: "";
        position: absolute;
        top: 45%;
        width: 2.25rem;
        height: var(--pipe-w);
        background: var(--steel-v);
        background: linear-gradient(180deg, var(--steel-dk), var(--steel) 30%, var(--steel-hi) 45%, var(--steel) 65%, var(--steel-dk));
        box-shadow: 0 0 0 2px var(--ink);
    }

    .twin::before {
        left: -2.25rem;
        border-radius: 8px 0 0 8px;
    }

    .twin::after {
        right: -2.25rem;
        border-radius: 0 8px 8px 0;
    }
}

/* ============================================
   TABLES
   ============================================ */

.table-bay {
    position: relative;
    padding: 10px;
    background:
        radial-gradient(circle 4px at 10px 10px, var(--brass-hi) 0 40%, var(--brass-dk) 55% 85%, transparent 95%),
        radial-gradient(circle 4px at calc(100% - 10px) 10px, var(--brass-hi) 0 40%, var(--brass-dk) 55% 85%, transparent 95%),
        radial-gradient(circle 4px at 10px calc(100% - 10px), var(--brass-hi) 0 40%, var(--brass-dk) 55% 85%, transparent 95%),
        radial-gradient(circle 4px at calc(100% - 10px) calc(100% - 10px), var(--brass-hi) 0 40%, var(--brass-dk) 55% 85%, transparent 95%),
        linear-gradient(180deg, #4a2f1c, #2f1d10);
    border: 4px solid var(--brass-dk);
    border-radius: 18px;
    box-shadow: 0 0 0 2px var(--ink), 0 16px 30px -14px rgba(40, 20, 5, 0.6);
    overflow: visible;
}

.table-bay--parchment {
    background: var(--rivets), var(--parchment);
    border-color: var(--brass);
}

.table-scroll {
    overflow-x: auto;
    border-radius: 10px;
}

.brass-table {
    width: 100%;
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.brass-table caption {
    caption-side: top;
    text-align: left;
    padding: 0.4rem 0.5rem 0.75rem;
    font-weight: 700;
    color: var(--cream);
}

.table-bay--parchment .brass-table caption {
    color: var(--ink);
}

.brass-table thead th {
    padding: 0.8rem 0.9rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--brass-grad);
    border-bottom: 3px solid var(--ink);
}

.brass-table thead th:first-child { border-top-left-radius: 9px; }
.brass-table thead th:last-child { border-top-right-radius: 9px; }

.brass-table tbody th,
.brass-table td {
    padding: 0.75rem 0.9rem;
    text-align: left;
    vertical-align: top;
    color: var(--text);
    background: #f7e9c8;
    border-bottom: 1px dotted rgba(138, 94, 34, 0.6);
}

.brass-table tbody tr:nth-child(even) > * {
    background: #fcf4e1;
}

.brass-table tbody th {
    font-weight: 700;
}

.brass-table tbody tr:last-child > * {
    border-bottom: 0;
}

.brass-table tbody tr:last-child > :first-child { border-bottom-left-radius: 9px; }
.brass-table tbody tr:last-child > :last-child { border-bottom-right-radius: 9px; }

.brass-table tbody tr.is-featured > * {
    background: #fff3d2;
    font-weight: 600;
}

.brass-table tbody tr.is-featured > :first-child {
    box-shadow: inset 7px 0 0 var(--brass), inset 9px 0 0 var(--ink);
    padding-left: 1.35rem;
}

.brass-table--sticky thead th:first-child,
.brass-table--sticky tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
}

.brass-table--sticky tbody th {
    box-shadow: 3px 0 0 rgba(138, 94, 34, 0.35);
}

.brass-table a:not([class]) {
    color: var(--link);
}

.table-note {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

@media (max-width: 479px) {
    .brass-table--stack {
        min-width: 0;
    }

    .brass-table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .brass-table--stack tbody tr {
        display: block;
        margin-bottom: 0.6rem;
        border-radius: 9px;
        overflow: hidden;
    }

    .brass-table--stack tbody th,
    .brass-table--stack td {
        display: grid;
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        gap: 0.6rem;
        border-radius: 0 !important;
    }

    .brass-table--stack tbody th::before,
    .brass-table--stack td::before {
        content: attr(data-label);
        font-weight: 800;
        font-size: 0.875rem;
        color: var(--text-muted);
    }

    .brass-table--stack tbody th {
        background: var(--cream-3);
    }
}

/* ============================================
   FAQ ACCORDION
   ============================================ */

.faq-list {
    display: grid;
    gap: 0.8rem;
    align-items: start;
}

.faq-item {
    background: var(--parchment);
    border: 3px solid var(--brass);
    border-radius: 14px;
    box-shadow: 0 0 0 2px var(--ink), 0 10px 18px -12px rgba(60, 32, 8, 0.55);
}

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

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

.faq-item__q:focus-visible {
    outline-offset: -4px;
}

.faq-item__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.faq-item__cog {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, var(--brass-hi) 0 52%, var(--brass) 54% 70%, transparent 72%),
        repeating-conic-gradient(var(--brass-dk) 0deg 15deg, transparent 15deg 30deg);
    transition: rotate 0.25s ease;
}

.faq-item__cog::after {
    content: "+";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--ink);
}

.faq-item[open] .faq-item__cog {
    rotate: 90deg;
}

.faq-item[open] .faq-item__cog::after {
    content: "\2212";
    rotate: -90deg;
}

.faq-item__a {
    padding: 0.2rem 1rem 1rem;
    border-top: 1px dashed rgba(138, 94, 34, 0.55);
    margin-inline: 0.5rem;
}

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

.faq-item__a p {
    margin-top: 0.75rem;
}

/* ============================================
   SCROLL PANEL (SEO copy) + PILL BAR
   ============================================ */

.scroll-panel {
    position: relative;
    margin: 1.75rem 0 2.5rem;
    padding: 2.6rem 1.25rem 0;
    background: var(--rivets), var(--parchment);
    border: 7px solid var(--brass);
    border-radius: 22px;
    box-shadow: var(--frame-shadow);
}

.scroll-panel__plaque {
    margin-top: -4.4rem;
    margin-bottom: 1.5rem;
}

.scroll-panel__body {
    padding-bottom: 1.25rem;
}

.scroll-panel__gear {
    display: none;
    position: absolute;
    z-index: -1;
}

.pill-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    width: fit-content;
    max-width: 100%;
    margin: 0.5rem auto -1.6rem;
    padding: 0.45rem 0.7rem;
    background: var(--brass-grad);
    border: 3px solid var(--ink);
    border-radius: 999px;
    box-shadow: 0 6px 12px rgba(40, 20, 5, 0.35);
}

@media (max-width: 479px) {
    .pill-bar {
        border-radius: 18px;
    }
}

@media (min-width: 768px) {
    .scroll-panel {
        padding: 2.8rem 2rem 0;
        isolation: isolate;
    }

    .scroll-panel__gear {
        display: block;
    }

    .scroll-panel__gear--l { --size: 120px; left: -64px; bottom: -40px; }
    .scroll-panel__gear--l2 { --size: 70px; left: -30px; bottom: 70px; }
    .scroll-panel__gear--r { --size: 130px; right: -70px; bottom: -36px; }
    .scroll-panel__gear--r2 { --size: 64px; right: -26px; bottom: 86px; }
}

/* ============================================
   CTA STRIP
   ============================================ */

.cta-strip {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    margin-top: 1.5rem;
    padding: 2.4rem 1.25rem 1.6rem;
    text-align: center;
    background: var(--rivets), var(--parchment);
    border: 6px solid var(--brass);
    border-radius: 20px;
    box-shadow: var(--frame-shadow);
}

.cta-strip .panel__tab {
    margin-bottom: 0.2rem;
}

.cta-strip__text {
    max-width: 60ch;
    margin: 0;
    font-weight: 500;
}

.cta-strip .micro {
    margin: 0;
}

@media (min-width: 1024px) {
    .cta-strip::before,
    .cta-strip::after {
        content: "";
        position: absolute;
        top: calc(50% - var(--pipe-w) / 2);
        width: 3rem;
        height: var(--pipe-w);
        background: var(--pipe-h);
        box-shadow: 0 0 0 2px var(--ink);
    }

    .cta-strip::before { right: calc(100% + 9px); }
    .cta-strip::after { left: calc(100% + 9px); }
}

/* ============================================
   LUGGAGE-TAG LINK RAIL
   ============================================ */

.tag-rail {
    position: relative;
    padding: 1rem;
    background: linear-gradient(180deg, #4a2f1c, #2e1c10);
    border: 3px solid var(--brass-dk);
    border-radius: 22px;
    box-shadow: 0 0 0 2px var(--ink), inset 0 4px 12px rgba(0, 0, 0, 0.4);
}

.tag-rail ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.luggage-tag {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 1rem 0.5rem 1.7rem;
    color: var(--ink);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    background:
        radial-gradient(circle 5px at 15px 50%, var(--ink) 0 3px, transparent 4px),
        var(--brass-grad);
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
    transition: filter 0.15s ease;
}

.luggage-tag:hover,
.luggage-tag:focus-visible {
    color: var(--ink);
    filter: brightness(1.1);
}

@media (min-width: 768px) {
    .tag-rail {
        padding: 1.1rem 3.5rem;
    }

    .tag-rail::before,
    .tag-rail::after {
        content: "";
        position: absolute;
        top: calc(50% - 20px);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background:
            radial-gradient(circle closest-side, var(--ink) 0 16%, var(--brass-hi) 17% 30%, var(--brass) 31% 62%, var(--brass-dk) 63% 72%, transparent 73%),
            repeating-conic-gradient(var(--brass) 0deg 12deg, transparent 12deg 30deg);
    }

    .tag-rail::before { left: 0.6rem; }
    .tag-rail::after { right: 0.6rem; }
}

/* ============================================
   PROVIDER BADGES
   ============================================ */

.badge-row {
    display: grid;
    gap: 1.25rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 600px) {
    .badge-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

@media (max-width: 767px) {
    .badge-row--scroll {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.75rem;
    }

    .badge-row--scroll > * {
        flex: 0 0 132px;
        scroll-snap-align: start;
    }
}

.provider-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    text-align: center;
    color: var(--ink);
    text-decoration: none;
}

a.provider-badge:hover .provider-badge__ring,
a.provider-badge:focus-visible .provider-badge__ring {
    box-shadow: 0 0 0 4px rgba(241, 208, 124, 0.8);
}

.provider-badge__ring {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 88px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, var(--enamel-hi) 0 12%, var(--enamel) 40% 60%, var(--ink) 62% 66%, var(--brass-hi) 67% 74%, var(--brass) 75% 87%, var(--brass-dk) 88%);
}

.provider-badge__ring::before {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: -1;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--brass-dk) 0deg 2deg, var(--brass) 2deg 11deg, var(--brass-dk) 11deg 13deg, transparent 13deg 24deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 82%, #000 83% 99%, transparent 100%);
    mask: radial-gradient(circle closest-side, transparent 0 82%, #000 83% 99%, transparent 100%);
}

.provider-badge__mono {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.35rem;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.provider-badge__name {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.25;
}

.provider-badge__desc {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* ============================================
   NOTICE CALLOUT
   ============================================ */

.notice {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background: #fbf1d8;
    border: 2px solid var(--brass-dk);
    border-left: 8px solid var(--teal);
    border-radius: 12px;
    box-shadow: 0 8px 16px -12px rgba(60, 32, 8, 0.6);
}

.notice--warn {
    background: #fbe4c4;
    border-left-color: #a8401a;
}

.notice__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--ink);
    background: var(--brass-grad);
    border: 2px solid var(--ink);
}

.notice__title {
    margin: 0 0 0.25rem;
    font-weight: 800;
}

.notice__body p:last-child {
    margin-bottom: 0;
}

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

.site-footer {
    position: relative;
    isolation: isolate;
    margin-top: clamp(2rem, 5vw, 4rem);
    padding: 3.25rem 0 1.5rem;
    color: var(--cream);
    border-top: 5px solid var(--brass);
    box-shadow: 0 -3px 0 var(--ink);
}

.site-footer__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(34, 20, 10, 0.84), rgba(28, 16, 8, 0.95)),
        url("./assets/44357d6247a24ab6dcbc20921ea15b86.webp") center top / cover no-repeat;
    background-color: #24150b;
}

.site-footer__strip {
    position: absolute;
    top: -14px;
    left: 50%;
    width: min(320px, 70%);
    height: 24px;
    translate: -50% 0;
    border-radius: 12px;
    border: 3px solid var(--ink);
    background:
        repeating-linear-gradient(90deg, #ffbf5a 0 9px, #8a4a10 9px 12px) center / calc(100% - 24px) 10px no-repeat,
        var(--brass-grad);
}

.site-footer__inner {
    display: grid;
    gap: 2rem;
}

.site-footer__brand {
    max-width: 52ch;
}

.site-footer__brandlink {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    margin-bottom: 0.5rem;
    color: var(--brass-hi);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.15rem;
    text-decoration: none;
}

.site-footer__brandlink img {
    width: auto;
    max-width: 90px;
    max-height: 56px;
    object-fit: contain;
}

.site-footer__brand p {
    margin: 0;
    font-size: 1rem;
}

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

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

@media (min-width: 1024px) {
    .site-footer__bg {
        background:
            linear-gradient(180deg, rgba(34, 20, 10, 0.66), rgba(28, 16, 8, 0.86)),
            url("./assets/44357d6247a24ab6dcbc20921ea15b86.webp") center / cover no-repeat;
        background-color: #24150b;
    }

    .site-footer__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr);
    }

    .footer-col--notice {
        padding-left: 1.5rem;
        border-left: 2px solid var(--brass-dk);
    }
}

.footer-col__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    color: var(--brass-hi);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--cream);
    font-size: 1rem;
    text-decoration: none;
}

.footer-col a:hover,
.footer-col a:focus-visible {
    color: var(--brass-hi);
    text-decoration: underline;
}

.footer-col a[aria-current="page"] {
    color: var(--brass-hi);
    font-weight: 700;
}

.footer-col--notice p {
    font-size: 1rem;
}

.footer-col--notice p a {
    text-decoration: underline;
    color: var(--brass-hi);
}

.age-badge {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: 0;
    background: radial-gradient(circle at 40% 35%, #c9443a, var(--red) 60%, #6e140f);
    box-shadow: 0 0 0 3px var(--brass), 0 0 0 5px var(--ink);
}

.site-footer__legal {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(200, 150, 62, 0.45);
    font-size: 0.95rem;
}

.site-footer__legal a {
    color: var(--brass-hi);
    text-decoration: underline;
}

.site-footer__copy {
    margin: 0;
    color: var(--cream-2);
}

/* ============================================
   STICKY MOBILE CTA
   ============================================ */

.sticky-cta {
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem 0.4rem 0.4rem;
    background: linear-gradient(180deg, #4a2f1c, #24150b);
    border: 3px solid var(--brass);
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--ink), 0 10px 24px rgba(20, 10, 3, 0.5);
}

.sticky-cta__img {
    flex: none;
    width: 56px;
    height: 56px;
    margin-top: -20px;
    object-fit: contain;
}

.sticky-cta__btn {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    padding-inline: 2.2rem 0.75rem;
}

.sticky-cta__age {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 900;
    background: var(--red);
    box-shadow: 0 0 0 2px var(--brass);
}

.sticky-cta__help {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 999px;
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
    background: var(--brass-grad);
}

@media (min-width: 1024px) {
    .sticky-cta {
        display: none;
    }
}

/* ============================================
   HOME PAGE
   ============================================ */

.hero--home .hero__mascot {
    width: min(94%, 440px);
}

.hero--home .sign .micro {
    margin-top: 0.75rem;
}

@media (min-width: 1024px) {
    .hero--home .hero__mascot {
        max-width: 560px;
        align-self: center;
    }
}

/* Shared pipe rig for key facts + trust rows */
.rig {
    position: relative;
    isolation: isolate;
}

.rig::before,
.rig::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 1rem;
    bottom: 1rem;
    width: var(--pipe-w);
    border-radius: 8px;
    background:
        repeating-linear-gradient(180deg, transparent 0 96px, var(--copper-dk) 96px 100px, var(--copper-hi) 100px 102px, transparent 102px 110px),
        var(--pipe-v);
    box-shadow: 0 0 0 2px var(--ink);
}

.rig::before {
    left: 4px;
}

.rig::after {
    right: 4px;
    display: none;
}

.rig .pipe-system::before,
.rig .pipe-system::after {
    display: none;
}

.rig .section-head {
    padding-left: 2.25rem;
}

.rig__sub {
    margin-top: 2.75rem;
}

.rig__elbow,
.rig__steam {
    display: none;
}

.rig-note {
    margin-top: 1.25rem;
    text-align: center;
    color: var(--ink-soft);
    font-weight: 500;
}

@media (min-width: 768px) {
    .rig::after {
        display: block;
    }

    .rig .section-head {
        padding-inline: 2.25rem;
    }

    .rig__elbow {
        display: block;
        position: absolute;
        z-index: -1;
        top: 1rem;
        width: 40px;
        height: 44px;
        border: var(--pipe-w) solid transparent;
    }

    .rig__elbow--l {
        left: -18px;
        border-top-color: var(--copper);
        border-left-color: var(--copper);
        border-top-left-radius: 22px;
    }

    .rig__elbow--r {
        right: -18px;
        border-top-color: var(--copper);
        border-right-color: var(--copper);
        border-top-right-radius: 22px;
    }

    .rig__steam {
        display: block;
        top: -1.75rem;
    }

    .rig__steam--l { left: -26px; }
    .rig__steam--r { right: -26px; }
}

/* Bay intro */
.bay__intro {
    max-width: 60ch;
    margin: -0.5rem auto 1.5rem;
    text-align: center;
    font-weight: 500;
}

/* Snippet list (twin left panel) */
.snip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.snip-list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.snip-list__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--ink);
    background: var(--brass-grad);
    border: 2px solid var(--ink);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
}

.snip-list__title {
    margin: 0 0 0.15rem;
    font-size: 1rem;
}

.snip-list__title a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.snip-list p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (min-width: 480px) and (max-width: 767px), (min-width: 1024px) {
    .snip-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Canada fit chips */
@media (min-width: 480px) {
    .chip-row--2x2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* SEO zone over the machinery backdrop */
.seo-zone {
    isolation: isolate;
}

.seo-zone__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
    .seo-zone .scroll-panel {
        max-width: min(62vw, 1100px);
        margin-inline: auto;
    }

    .seo-zone .prose--cols {
        column-count: 2;
    }
}

@media (min-width: 1440px) {
    .seo-zone .prose--cols {
        column-count: 3;
    }
}

/* Notice grid */
.notice-grid {
    align-items: stretch;
}

.notice-grid .notice a {
    color: var(--link);
    font-weight: 700;
}

/* Review page helpers */
.review-prose {
    margin-top: 1.5rem;
}

.cta-inline {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    text-align: center;
}

.cta-inline .micro {
    margin: 0;
}

.review-notices {
    margin-top: 2rem;
}

/* ============================================
   BONUSES PAGE
   ============================================ */

/* Pop-art burst behind the headline figure */
.bonus-burst {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.bonus-burst__fig {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.9rem;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 0 var(--ink);
}

.bonus-burst__fig::before,
.bonus-burst__fig::after {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: -1;
    border: 3px solid var(--ink);
    border-radius: 12px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.3) 0 2px, transparent 2.5px) 0 0 / 9px 9px,
        #c4301d;
    box-shadow: 0 5px 0 rgba(42, 26, 14, 0.35);
}

.bonus-burst__fig::after {
    rotate: 45deg;
}

.bonus-burst__text {
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--ink);
}

.sign-link {
    margin: 0 0 0.5rem;
}

.sign-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
}

/* Promotion cards bay */
.bonus-bay .card-grid {
    row-gap: 1.25rem;
}

.bonus-bay .medallion-card__text a {
    color: var(--link);
}

.bonus-bay .key-term {
    margin-top: auto;
}

/* Comparison table */
.bonus-table .brass-table {
    min-width: 820px;
}

.bonus-table .brass-table tbody tr.is-featured > :first-child {
    padding-left: 2.6rem;
}

.bonus-table .brass-table tbody tr.is-featured > :first-child::before {
    content: "";
    position: absolute;
    left: 16px;
    top: -1px;
    width: 16px;
    height: 26px;
    background: var(--red);
    border: 2px solid var(--ink);
    border-top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

/* Claim steps rig */
.claim-rig {
    position: relative;
}

.claim-rig__steam {
    display: none;
}

@media (min-width: 768px) {
    .claim-rig__steam {
        display: block;
        top: -1.25rem;
    }

    .claim-rig__steam--l { left: -4px; }
    .claim-rig__steam--r { right: -4px; }
}

/* Pros and cons panels inside twin layout */
.twin .pros-cons__col--pro,
.twin .pros-cons__col--con {
    padding: 0;
    border: 0;
}

.twin .pros-cons .pros-cons__col li {
    font-size: 1rem;
}

/* Golden cloud backdrop for the SEO scroll */
.seo-zone__bg--cloud {
    background:
        radial-gradient(ellipse 34% 26% at 12% 18%, rgba(255, 252, 238, 0.95), rgba(255, 252, 238, 0) 70%),
        radial-gradient(ellipse 30% 22% at 88% 30%, rgba(255, 248, 224, 0.9), rgba(255, 248, 224, 0) 70%),
        radial-gradient(ellipse 40% 24% at 70% 92%, rgba(255, 250, 232, 0.9), rgba(255, 250, 232, 0) 70%),
        radial-gradient(ellipse 36% 24% at 20% 88%, rgba(255, 250, 232, 0.85), rgba(255, 250, 232, 0) 70%),
        linear-gradient(180deg, #f6dc9a 0%, #f2c968 100%);
}

/* ============================================
   WELCOME BONUS PAGE
   ============================================ */

.hero--welcome .hero__mascot {
    width: min(78%, 360px);
}

/* Red carpet: vertical on mobile, horizontal toward the sign on desktop */
.hero--welcome .hero__mascot::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: -3.6rem;
    width: 48px;
    height: 5rem;
    margin-left: -24px;
    border-inline: 2px solid var(--ink);
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0 6px, transparent 6px 12px),
        linear-gradient(90deg, var(--brass-hi) 0 5px, #8e1a16 5px calc(100% - 5px), var(--brass-hi) calc(100% - 5px));
    box-shadow: 0 6px 10px -4px rgba(40, 20, 5, 0.5);
}

@media (min-width: 1024px) {
    .hero--welcome .hero__mascot {
        max-width: 440px;
    }

    .hero--welcome .hero__mascot::after {
        left: 2%;
        bottom: 0.35rem;
        width: calc(98% + 3.5rem);
        height: 34px;
        margin-left: 0;
        border-inline: 0;
        border-block: 2px solid var(--ink);
        background:
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 6px, transparent 6px 12px),
            linear-gradient(180deg, var(--brass-hi) 0 5px, #8e1a16 5px calc(100% - 5px), var(--brass-hi) calc(100% - 5px));
    }
}

/* Parchment copy card */
.copy-card {
    padding: 1.25rem;
    background: var(--parchment);
    border: 4px solid var(--brass);
    border-radius: 16px;
    box-shadow: 0 0 0 2px var(--ink), 0 12px 22px -14px rgba(60, 32, 8, 0.55);
}

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

.copy-card ul {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
}

.copy-card li {
    margin-bottom: 0.4rem;
}

.copy-card li::marker {
    color: var(--brass-dk);
    font-weight: 800;
}

.claim-intro {
    margin-bottom: 2rem;
}

.table-gap {
    margin-top: 1.75rem;
}

.chip-row--gap {
    margin-top: 2rem;
}

.notice-gap {
    margin-top: 2rem;
}

.faq-more {
    margin-top: 1.25rem;
    text-align: center;
    font-weight: 600;
}

/* Hotel key-tag bonus card */
.key-tag {
    position: relative;
    margin-top: 3.25rem;
}

.key-tag__img {
    position: absolute;
    z-index: 3;
    top: -52px;
    left: -6px;
    width: 104px;
    height: auto;
    filter: drop-shadow(0 6px 6px rgba(40, 20, 5, 0.4));
}

.key-tag__steam {
    top: -26px;
    right: 14px;
    z-index: 3;
}

.key-tag__face {
    height: 100%;
    padding: 1.4rem 1rem 1.1rem;
    background: var(--rivets), var(--parchment);
    border: 2px solid var(--ink);
    border-radius: 10px;
}

.key-tag__title {
    display: flex;
    align-items: center;
    min-height: 3rem;
    margin: 0 0 0.9rem;
    padding-left: 5.4rem;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.key-tag__face .btn {
    margin-top: 0.25rem;
}

.key-tag__face .micro {
    text-align: center;
}

@media (min-width: 768px) {
    .key-tag__img {
        width: 128px;
        top: -64px;
        left: -14px;
    }

    .key-tag__title {
        padding-left: 6.5rem;
        min-height: 3.4rem;
    }
}

/* Compact tables */
.table-compact .brass-table {
    min-width: 0;
}

.gauge-table {
    position: relative;
}

.gauge-table__gauge {
    display: none;
}

@media (min-width: 768px) {
    .gauge-table__gauge {
        display: block;
        position: absolute;
        top: -12px;
        right: -14px;
        z-index: 3;
    }
}

/* Clock art */
.clock-art {
    justify-self: center;
    width: min(100%, 300px);
}

/* Ledger card */
.ledger {
    position: relative;
    padding: 1rem 0.9rem 0.9rem 1rem;
    background:
        linear-gradient(90deg, transparent 0 calc(33% - 1px), rgba(163, 34, 27, 0.35) calc(33% - 1px) 33%, transparent 33%),
        var(--parchment);
    border: 6px solid var(--brass);
    border-radius: 18px;
    box-shadow: var(--frame-shadow);
}

.ledger__table-wrap {
    overflow-x: auto;
}

.ledger__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.4;
}

.ledger__table caption {
    padding-bottom: 0.6rem;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--ink);
}

.ledger__table th,
.ledger__table td {
    padding: 0.65rem 0.4rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 2px dotted rgba(90, 63, 39, 0.7);
}

.ledger__table thead th {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 3px solid var(--ink);
}

.ledger__table tbody th {
    font-weight: 700;
    color: var(--ink);
}

.ledger__table .is-total th,
.ledger__table .is-total td {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--red);
    border-bottom: 0;
}

@media (min-width: 480px) {
    .ledger {
        padding: 1.25rem 1.25rem 1.1rem;
    }

    .ledger__table {
        font-size: 1rem;
    }
}

/* Softer variant for the responsible gambling page */
.theme-soft .hero::after {
    background: linear-gradient(180deg, rgba(226, 206, 230, 0), rgba(236, 214, 196, 0.85));
}

.theme-soft .hero__mascot::before {
    background: radial-gradient(circle, rgba(214, 196, 236, 0.85) 0%, rgba(245, 206, 140, 0.35) 50%, rgba(245, 206, 140, 0) 72%);
}

/* ============================================
   SLOTS PAGE
   ============================================ */

/* Continuous cloud sky behind all body sections */
.slots-flow {
    position: relative;
    isolation: isolate;
}

.slots-flow__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    .slots-flow__bg {
        background-size: 100% auto;
        background-repeat: repeat-y;
    }
}

/* Hero */
.hero--slots .hero__grid {
    position: relative;
}

.hero--slots .hero__intro {
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55), 0 0 70px 18px rgba(255, 214, 130, 0.45);
}

.hero--slots .sign .micro {
    margin-top: 0.75rem;
}

.hero--slots .sign-link {
    margin: 0.25rem 0 0;
}

.hero--slots .hero__grid::before,
.hero--slots .hero__grid::after {
    content: "";
    position: absolute;
    z-index: -1;
    display: none;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, var(--ink) 0 6%, var(--brass-hi) 7% 13%, var(--brass-dk) 14% 17%, transparent 18% 66%, var(--ink) 67% 69%, var(--brass) 70% 80%, var(--brass-hi) 81% 84%, var(--brass) 85% 100%),
        repeating-conic-gradient(from 10deg, var(--brass-dk) 0deg 8deg, transparent 8deg 60deg);
    -webkit-mask: radial-gradient(circle closest-side, #000 0 86%, transparent 86.5%), repeating-conic-gradient(#000 0deg 9deg, transparent 9deg 18deg);
    mask: radial-gradient(circle closest-side, #000 0 86%, transparent 86.5%), repeating-conic-gradient(#000 0deg 9deg, transparent 9deg 18deg);
    filter: drop-shadow(0 8px 10px rgba(40, 20, 5, 0.35));
    pointer-events: none;
}

@media (min-width: 1024px) {
    .hero--slots .hero__grid::before {
        display: block;
        width: 380px;
        right: -150px;
        top: 4%;
    }

    .hero--slots .hero__grid::after {
        display: block;
        width: 320px;
        left: -120px;
        top: 22%;
    }

    .hero--slots .hero__mascot {
        max-width: 480px;
        margin-right: -3.5rem;
        z-index: 2;
        align-self: center;
    }
}

/* Library fact chips with junction gauges */
@media (min-width: 768px) {
    .chip-row--gauged .fact-chip:not(:last-child)::after {
        content: "";
        position: absolute;
        z-index: 2;
        top: calc(50% - 12px);
        right: calc(-0.5rem - 12px);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background:
            linear-gradient(45deg, transparent 46%, var(--red) 46% 54%, transparent 54%),
            radial-gradient(circle at 40% 35%, #fffaf0, #e9d4a6);
        border: 3px solid var(--brass);
        box-shadow: 0 0 0 2px var(--ink);
    }
}

/* Slot type medallions */
.slot-types .medallion-card {
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
}

.slot-types .medallion-card__text {
    font-size: 0.975rem;
}

/* Games bay */
.slots-games {
    isolation: isolate;
}

.slots-games::before {
    content: "";
    position: absolute;
    inset: 8% 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255, 222, 145, 0.8) 0%, rgba(255, 222, 145, 0.35) 40%, rgba(255, 222, 145, 0) 68%);
}

@media (min-width: 360px) and (max-width: 479px) {
    .slot-grid,
    .slot-types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .slot-types {
        padding-left: 0;
    }

    .slot-types::before,
    .slot-types > :not(.pipe-steam):not(.pipe-gauge)::before,
    .slot-types > :not(.pipe-steam):not(.pipe-gauge)::after {
        display: none;
    }

    .slot-types .medallion-card {
        --m: 88px;
        padding-inline: 0.65rem;
    }

    .slot-types .medallion-card__text {
        font-size: 0.9rem;
    }
}

@media (max-width: 479px) {
    .slot-grid .game-card__plate {
        padding: 0.7rem 0.6rem 0.8rem;
    }

    .slot-grid .game-card__title {
        font-size: 0.95rem;
    }

    .slot-grid .game-card__plate p {
        font-size: 0.9rem;
    }

    .slot-grid .btn--sm {
        width: 100%;
        padding-inline: 2rem 0.6rem;
        font-size: 0.875rem;
    }
}

/* Provider strip */
.provider-strip__intro {
    max-width: 75ch;
    margin: 0 auto 1.5rem;
    text-align: center;
}

.provider-strip__steam {
    display: none;
}

.provider-strip .badge-row {
    padding-top: 0.6rem;
}

@media (min-width: 1024px) {
    .provider-strip .badge-row {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .provider-strip::before,
    .provider-strip::after {
        content: "";
        position: absolute;
        top: calc(55% - var(--pipe-w) / 2);
        width: 3rem;
        height: var(--pipe-w);
        background: var(--pipe-h);
        box-shadow: 0 0 0 2px var(--ink);
    }

    .provider-strip::before {
        right: calc(100% + 9px);
        border-radius: 8px 0 0 8px;
    }

    .provider-strip::after {
        left: calc(100% + 9px);
        border-radius: 0 8px 8px 0;
    }

    .provider-strip__steam {
        display: block;
        top: calc(55% - 52px);
    }

    .provider-strip__steam--l { left: -4.25rem; }
    .provider-strip__steam--r { right: -4.25rem; }
}

/* Demo + budget twin panels */
.twin--slots > .panel {
    display: flex;
    flex-direction: column;
}

.twin--slots .panel__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.twin-art {
    width: min(100%, 280px);
    margin-top: auto;
    margin-bottom: -1.5rem;
    padding-top: 0.5rem;
}

.twin-art--left {
    margin-left: -1.6rem;
}

.twin-art--right {
    margin-left: auto;
    margin-right: -1.6rem;
}

@media (min-width: 768px) {
    .twin-art--left { margin-left: -2.4rem; }
    .twin-art--right { margin-right: -2.4rem; }
}

.dot-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.dot-list li {
    position: relative;
    padding-left: 1.7rem;
}

.dot-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #86d38f, var(--green) 60%, #174a1c);
    box-shadow: 0 0 0 2px var(--brass), 0 0 0 3px var(--ink);
}

/* ============================================
   MOTION (runs only when in view and allowed)
   ============================================ */

/* ============================================
   LIVE CASINO PAGE
   ============================================ */

.hero--live .hero__mascot {
    width: min(78%, 360px);
}

.hero--live .hero__intro {
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55), 0 0 70px 18px rgba(255, 190, 100, 0.4);
}

.hero--live .sign .micro {
    margin-top: 0.75rem;
}

.hero--live .sign-link {
    margin: 0.25rem 0 0;
}

@media (min-width: 1024px) {
    .hero--live .hero__mascot {
        max-width: 470px;
        margin-right: -3rem;
        z-index: 2;
        align-self: center;
    }
}

/* Quick-nav medallions on a copper conduit */
.live-nav-wrap {
    margin-top: 1.75rem;
}

.live-nav {
    --m: 88px;
    position: relative;
    isolation: isolate;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
}

.live-nav::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 1rem;
    bottom: 1rem;
    width: var(--pipe-w);
    margin-left: calc(var(--pipe-w) / -2);
    border-radius: 8px;
    background: var(--pipe-v);
    box-shadow: 0 0 0 2px var(--ink);
}

.live-nav li {
    display: flex;
}

.live-nav .medallion-card {
    flex: 1;
    padding-inline: 0.5rem;
}

.live-nav .medallion-card__text {
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .live-nav {
        --m: 104px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .live-nav::before {
        left: 0;
        right: 0;
        top: calc(var(--m) * 0.55 - var(--pipe-w) / 2);
        bottom: auto;
        width: auto;
        height: var(--pipe-w);
        margin-left: 0;
        background: var(--pipe-h);
    }
}

/* Live game cards */
.live-grid.card-grid {
    grid-template-columns: minmax(0, 1fr);
}

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

.game-card__plate .live-tip {
    margin: 0;
    padding: 0.5rem 0.7rem;
    font-size: 0.95rem;
    line-height: 1.45;
    background: rgba(241, 208, 124, 0.5);
    border: 1px solid var(--brass-dk);
    border-radius: 10px;
}

/* Pipes entering a strip from both edges */
@media (min-width: 1024px) {
    .pipe-flank {
        position: relative;
    }

    .pipe-flank::before,
    .pipe-flank::after {
        content: "";
        position: absolute;
        top: calc(50% - var(--pipe-w) / 2);
        width: 3rem;
        height: var(--pipe-w);
        background: var(--pipe-h);
        box-shadow: 0 0 0 2px var(--ink);
    }

    .pipe-flank::before {
        right: calc(100% + 9px);
        border-radius: 8px 0 0 8px;
    }

    .pipe-flank::after {
        left: calc(100% + 9px);
        border-radius: 0 8px 8px 0;
    }
}

/* Phone mockup */
.phone-wrap {
    position: relative;
    justify-self: center;
    width: min(60%, 260px);
}

.phone {
    position: relative;
    padding: 14px 10px;
    background: var(--brass-grad);
    border: 3px solid var(--ink);
    border-radius: 34px;
    box-shadow: 0 18px 30px -14px rgba(50, 28, 8, 0.6);
}

.phone::before,
.phone::after {
    content: "";
    position: absolute;
    width: 6px;
    background: var(--brass-dk);
    border: 2px solid var(--ink);
    border-radius: 3px;
}

.phone::before {
    left: -9px;
    top: 22%;
    height: 44px;
}

.phone::after {
    right: -9px;
    top: 30%;
    height: 64px;
}

.phone__notch {
    position: absolute;
    z-index: 2;
    top: 22px;
    left: 50%;
    width: 46px;
    height: 8px;
    margin-left: -23px;
    background: var(--ink);
    border-radius: 6px;
}

.phone__screen {
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: var(--choc);
    border: 3px solid var(--ink);
    border-radius: 22px;
}

.phone__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.phone-wrap__gauge {
    display: none;
}

@media (min-width: 1024px) {
    .split.split--phone {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .phone-wrap::after {
        content: "";
        position: absolute;
        left: calc(100% + 12px);
        top: 55%;
        width: calc(2.5rem + 8px);
        height: var(--pipe-w);
        background: var(--pipe-h);
        border-radius: 8px;
        box-shadow: 0 0 0 2px var(--ink);
    }

    .phone-wrap__gauge {
        display: block;
        position: absolute;
        z-index: 4;
        left: calc(100% + 1.5rem);
        top: calc(55% - 20px);
    }
}

/* Contribution gauge card */
.contrib {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 1.75rem 1rem 1.25rem;
    text-align: center;
    background: var(--rivets), var(--parchment);
    border: 6px solid var(--brass);
    border-radius: 18px;
    box-shadow: var(--frame-shadow);
}

.contrib__caption {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
}

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

.contrib__legend li {
    padding: 0.3rem 0.8rem;
    font-size: 0.95rem;
    background: rgba(241, 208, 124, 0.55);
    border: 1px solid var(--brass-dk);
    border-radius: 999px;
}

/* Tips + pros/cons twin */
.twin--live .pros-cons__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.twin--live > .panel.pros-cons {
    justify-content: center;
}

/* ============================================
   TABLE GAMES PAGE
   ============================================ */

.hero--tables .hero__mascot {
    width: min(78%, 360px);
}

.hero--tables .hero__intro {
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55), 0 0 70px 18px rgba(255, 200, 110, 0.45);
}

.hero--tables .sign .micro {
    margin-top: 0.75rem;
}

.hero--tables .sign-link {
    margin: 0.25rem 0 0;
}

@media (min-width: 1024px) {
    .hero--tables .hero__mascot {
        max-width: 470px;
        margin-right: -3rem;
        z-index: 2;
        align-self: center;
    }
}

/* One column below 600px, 2x2 from 600px */
.card-grid.table-grid {
    grid-template-columns: minmax(0, 1fr);
}

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

/* Glossary definition cards */
.glossary {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
}

.glossary__item {
    position: relative;
    padding: 0.8rem 0.9rem 0.8rem 2.8rem;
    background: rgba(255, 250, 235, 0.7);
    border: 1px solid rgba(138, 94, 34, 0.55);
    border-radius: 10px;
}

.glossary__item::before {
    content: "";
    position: absolute;
    left: 0.65rem;
    top: 0.9rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, var(--ink) 0 18%, var(--brass-hi) 20% 45%, var(--brass) 47% 70%, transparent 72%),
        repeating-conic-gradient(var(--brass-dk) 0deg 15deg, transparent 15deg 30deg);
}

.glossary dt {
    font-weight: 800;
    color: var(--ink);
}

.glossary dd {
    margin: 0.15rem 0 0;
    font-size: 0.975rem;
    line-height: 1.5;
}

@media (min-width: 600px) {
    .glossary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem 1.1rem;
    }
}

/* Bet to counted row */
.bet-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.bet-flow__box {
    padding: 0.55rem 0.9rem;
    text-align: center;
    font-weight: 800;
    color: var(--ink);
    background: var(--cream);
    border: 2px solid var(--brass-dk);
    border-radius: 10px;
    box-shadow: 0 0 0 2px var(--ink);
}

.bet-flow__box small {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.bet-flow__pipe {
    position: relative;
    width: 40px;
    height: 12px;
    border-radius: 6px;
    background: var(--pipe-h);
    box-shadow: 0 0 0 2px var(--ink);
}

.bet-flow__pipe::after {
    content: "";
    position: absolute;
    right: -9px;
    top: -6px;
    border-left: 10px solid var(--ink);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

/* ============================================
   PROVIDERS PAGE
   ============================================ */

.hero--providers .hero__mascot {
    width: min(78%, 360px);
}

.hero--providers .hero__intro {
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55), 0 0 70px 18px rgba(255, 200, 110, 0.45);
}

.hero--providers .sign .micro {
    margin-top: 0.75rem;
}

.hero--providers .sign-link {
    margin: 0.25rem 0 0;
}

@media (min-width: 1024px) {
    .hero--providers .hero__mascot {
        max-width: 470px;
        margin-right: -3rem;
        z-index: 2;
        align-self: center;
    }

    .provider-strip--ten .badge-row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.provider-strip--ten .provider-badge {
    justify-content: flex-start;
}

/* Studio profile cards */
.card-grid.studio-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
}

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

.studio-card__face {
    align-items: flex-start;
    text-align: left;
    gap: 0.7rem;
}

.studio-card__head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    width: 100%;
    padding-left: 8px;
}

.studio-card__ring {
    flex: none;
    width: 62px;
}

.studio-card__ring .provider-badge__mono {
    font-size: 1.1rem;
}

.studio-card__title {
    margin: 0;
    font-size: 1.05rem;
}

.studio-card__cta {
    margin-top: auto;
    padding-top: 0.3rem;
}

/* Filter how-to */
.filter-split {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.filter-split__art {
    justify-self: center;
    width: min(100%, 300px);
}

.filter-steps {
    --badge: 40px;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.filter-steps li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 44px;
}

.filter-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 16px;
    top: 36px;
    width: 8px;
    height: calc(100% + 0.5rem);
    background: var(--pipe-v);
    box-shadow: 0 0 0 2px var(--ink);
    border-radius: 4px;
}

.filter-steps .gear-badge {
    flex: none;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .filter-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
        gap: 1.75rem;
        align-items: end;
    }

    .filter-split__art {
        order: 2;
        margin-right: -2.4rem;
        margin-bottom: -1.5rem;
    }

    .filter-split__text {
        align-self: center;
    }
}

/* Graffiti mural split */
.mural-split {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.mural-split__art {
    justify-self: center;
    width: min(100%, 280px);
}

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

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

    .mural-split__art {
        justify-self: start;
        width: 100%;
        margin-left: -3.2rem;
    }
}

/* ============================================
   MOBILE CASINO PAGE
   ============================================ */

.hero--mobile .hero__mascot {
    width: min(78%, 360px);
}

.hero--mobile .hero__intro {
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55), 0 0 70px 18px rgba(255, 210, 120, 0.45);
}

.hero--mobile .sign .micro {
    margin-top: 0.75rem;
}

@media (min-width: 1024px) {
    .hero--mobile .hero__mascot {
        max-width: 470px;
        margin-right: -3rem;
        z-index: 2;
        align-self: center;
    }
}

/* Portrait medallion row: scroll-snap strip on phones */
@media (max-width: 767px) {
    .portrait-row.card-grid {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        padding: 0.5rem 0.25rem 0.9rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .portrait-row.card-grid > * {
        flex: 0 0 min(230px, 72%);
        scroll-snap-align: start;
    }
}

.twin--install .prose ol {
    margin-bottom: 0;
}

.twin--install .prose li {
    min-height: 28px;
}

.faq-list .faq-item__title {
    font-size: 1.05rem;
}

/* ============================================
   PAYMENTS PAGE
   ============================================ */

.hero--payments .hero__mascot {
    width: min(78%, 360px);
}

.hero--payments .hero__intro {
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55), 0 0 70px 18px rgba(255, 210, 120, 0.45);
}

.hero--payments .sign .micro {
    margin-top: 0.75rem;
}

@media (min-width: 1024px) {
    .hero--payments .hero__mascot {
        max-width: 470px;
        margin-right: -3rem;
        z-index: 2;
        align-self: center;
    }
}

/* Cloud-sea backdrop shared by the facts and both tables */
.pay-flow {
    position: relative;
    isolation: isolate;
}

.pay-flow__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.pay-flow .pipe-system + .pipe-system {
    margin-top: 0.5rem;
}

.pay-flow .section-head__intro {
    padding: 0.6rem 0.9rem;
    background: rgba(250, 238, 210, 0.92);
    border: 2px solid var(--brass-dk);
    border-radius: 12px;
}

.pay-flow .table-note {
    padding: 0.5rem 0.8rem;
    color: var(--ink);
    background: rgba(250, 238, 210, 0.92);
    border-radius: 10px;
}

.split .panel ul {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
}

.split .panel li {
    margin-bottom: 0.4rem;
}

.split .panel li::marker {
    color: var(--brass-dk);
    font-weight: 800;
}

.split .tag-card {
    margin-top: 1rem;
}

/* ============================================
   CRYPTO PAGE
   ============================================ */

.hero--crypto .hero__mascot {
    width: min(80%, 360px);
}

.hero--crypto .hero__intro {
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55), 0 0 70px 18px rgba(255, 210, 120, 0.45);
}

.hero--crypto .sign .micro {
    margin-top: 0.75rem;
}

/* Pop-art halftone glow rings behind the mascot */
.hero--crypto .hero__mascot::before {
    inset: 2% -14% 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(214, 110, 20, 0.8) 0 2.2px, transparent 2.8px) 0 0 / 11px 11px,
        radial-gradient(circle, rgba(255, 214, 120, 0.7) 0%, rgba(255, 214, 120, 0) 70%);
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 38%, #000 52% 78%, transparent 100%);
    mask: radial-gradient(circle closest-side, transparent 0 38%, #000 52% 78%, transparent 100%);
}

@media (min-width: 1024px) {
    .hero--crypto .hero__mascot {
        max-width: 470px;
        margin-right: -3rem;
        z-index: 2;
        align-self: center;
    }
}

/* Ticker coin medallions (code-native, not official logos) */
.coin-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.coin {
    --coin: var(--brass);
    --coin-hi: #f6dc92;
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 62px;
    aspect-ratio: 1;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    background: radial-gradient(circle closest-side, var(--coin-hi) 0 54%, var(--coin) 66% 76%, var(--ink) 78% 82%, var(--brass-hi) 84% 90%, var(--brass-dk) 93%);
    box-shadow: 0 5px 8px rgba(40, 20, 5, 0.35);
}

.coin::before {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--brass-dk) 0deg 2deg, var(--brass) 2deg 9deg, var(--brass-dk) 9deg 11deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 82%, #000 84% 99%, transparent 100%);
    mask: radial-gradient(circle closest-side, transparent 0 82%, #000 84% 99%, transparent 100%);
}

.coin--btc { --coin: #d9921e; --coin-hi: #f9d27a; }
.coin--doge { --coin: #c9a226; --coin-hi: #fbe99a; }
.coin--ltc { --coin: #aeb4ba; --coin-hi: #eef0f1; }

.coin-ticker {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.25rem;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.card-grid.coin-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.25rem;
}

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

/* Caution plate */
.caution-plate {
    position: relative;
    display: grid;
    gap: 1rem;
    justify-items: center;
    padding: 1.5rem 1.25rem 1.25rem;
    background: var(--rivets), linear-gradient(165deg, #fbe4b0 0%, #f1cb83 100%);
    border: 6px solid var(--red);
    border-radius: 18px;
    box-shadow: 0 0 0 3px var(--ink), inset 0 0 26px rgba(138, 94, 34, 0.25), 0 18px 32px -14px rgba(60, 32, 8, 0.55);
}

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

.caution-plate__body ul {
    margin: 0;
    padding-left: 1.3rem;
}

.caution-plate__body li {
    margin-bottom: 0.5rem;
}

.caution-plate__body li::marker {
    color: var(--red);
    font-weight: 800;
}

@media (min-width: 768px) {
    .caution-plate {
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        gap: 1.75rem;
        padding: 1.75rem 2rem;
    }
}

.pay-flow .copy-card a,
.pay-flow .section-head__intro a {
    color: var(--link);
}

.pay-flow .answer {
    margin-top: 0;
}

/* ============================================
   SECURITY & FAIR PLAY PAGE
   ============================================ */

.hero--security .hero__mascot {
    width: min(78%, 360px);
}

.hero--security .hero__mascot::before {
    background: radial-gradient(circle, rgba(72, 185, 194, 0.6) 0%, rgba(241, 208, 124, 0.5) 38%, rgba(241, 208, 124, 0) 70%);
}

.hero--security .hero__intro {
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55), 0 0 70px 18px rgba(255, 210, 120, 0.4);
}

.hero--security .sign::before,
.hero--security .sign::after {
    background: linear-gradient(90deg, #1e1e20, #6d6f72 45%, #232325);
}

.shield-list {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: grid;
    gap: 0.55rem;
    text-align: left;
}

.shield-list li {
    position: relative;
    padding-left: 2.1rem;
    font-weight: 700;
    line-height: 1.4;
}

.shield-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0.05rem;
    display: grid;
    place-items: center;
    width: 24px;
    height: 27px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 900;
    background: linear-gradient(180deg, var(--teal-hi), var(--teal-dk));
    clip-path: polygon(50% 0, 100% 14%, 100% 56%, 50% 100%, 0 56%, 0 14%);
}

.sign-actions {
    display: grid;
    justify-items: center;
    margin: 0.5rem 0 0;
}

.sign-actions .pill {
    width: 100%;
    max-width: 320px;
}

@media (min-width: 1024px) {
    .hero--security .hero__mascot {
        max-width: 470px;
        margin-right: -3rem;
        z-index: 2;
        align-self: center;
    }
}

/* Licence notice with wax-seal badge */
.licence-notice {
    position: relative;
    padding: 1.75rem 1.25rem 1.25rem;
    background: var(--parchment);
    border-block: 4px solid var(--brass-dk);
    border-radius: 12px;
    box-shadow: 0 0 0 2px var(--ink), 0 14px 24px -14px rgba(60, 32, 8, 0.55);
}

.licence-notice h2 {
    padding-right: 4.5rem;
    font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
}

.licence-notice ol {
    margin: 0;
    padding-left: 1.3rem;
}

.licence-notice li {
    margin-bottom: 0.4rem;
}

.licence-notice li::marker {
    color: var(--red);
    font-weight: 800;
}

.licence-notice__seal {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #d4574a, var(--red) 55%, #5e120d);
    box-shadow: 0 0 0 3px #7a1a14, 0 0 0 5px var(--ink), 0 6px 10px rgba(40, 20, 5, 0.4);
}

.licence-notice__seal::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 220, 200, 0.55);
}

@media (min-width: 768px) {
    .licence-notice {
        padding: 2rem 2rem 1.5rem;
    }

    .licence-notice__seal {
        width: 72px;
        height: 72px;
        top: 1.25rem;
        right: 1.5rem;
    }

    .licence-notice h2 {
        padding-right: 6rem;
    }
}

/* ============================================
   SUPPORT PAGE
   ============================================ */

.hero--support .hero__mascot {
    width: min(80%, 360px);
}

.hero--support .hero__intro {
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55), 0 0 70px 18px rgba(255, 214, 130, 0.45);
}

.hero--support .sign .micro {
    margin-top: 0.75rem;
}

/* Warm glow plus faint spray-mist ring behind the graffiti mascot */
.hero--support .hero__mascot::before {
    inset: 4% -12% 0;
    background:
        radial-gradient(circle, rgba(168, 79, 23, 0.35) 0 1.8px, transparent 2.4px) 0 0 / 10px 10px,
        radial-gradient(circle, rgba(255, 226, 150, 0.85) 0%, rgba(255, 210, 120, 0.35) 45%, rgba(255, 210, 120, 0) 70%);
    -webkit-mask: radial-gradient(circle closest-side, #000 0 60%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
    mask: radial-gradient(circle closest-side, #000 0 60%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
}

/* Iron rods hold the summary sign */
.hero--support .sign::before,
.hero--support .sign::after {
    background: linear-gradient(90deg, #1e1e20, #6d6f72 45%, #232325);
}

@media (min-width: 1024px) {
    .hero--support .hero__mascot {
        max-width: 470px;
        margin-right: -3rem;
        z-index: 2;
        align-self: center;
    }
}

.pay-flow .twin .panel .panel__body p {
    font-size: 1rem;
}

.pay-flow .checklist-gap {
    margin-top: 1rem;
}

.cta-inline .chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.cta-inline .chip-row::before {
    display: none;
}

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

.hero--faq .hero__mascot {
    width: min(60%, 300px);
}

.hero--faq .hero__intro {
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55), 0 0 70px 18px rgba(255, 214, 130, 0.45);
}

.hero--faq .sign .micro {
    margin-top: 0.75rem;
}

.hero--faq .sign::before,
.hero--faq .sign::after {
    background: linear-gradient(90deg, #1e1e20, #6d6f72 45%, #232325);
}

@media (min-width: 1024px) {
    .hero--faq .hero__mascot {
        width: 100%;
        max-width: 470px;
        margin-right: -3rem;
        z-index: 2;
        align-self: center;
    }
}

/* Jump grid on a copper conduit */
.jump-grid {
    position: relative;
    isolation: isolate;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.jump-grid li {
    position: relative;
}

.jump-tile {
    height: 100%;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.6rem;
    text-align: center;
    text-decoration: none;
    font-weight: 800;
    line-height: 1.25;
    color: var(--ink);
    background: var(--rivets), var(--parchment);
    border: 4px solid var(--brass);
    border-radius: 14px;
    box-shadow: 0 0 0 2px var(--ink), 0 10px 18px -10px rgba(60, 32, 8, 0.55);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.jump-tile:hover,
.jump-tile:focus-visible {
    color: var(--ink);
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px rgba(241, 208, 124, 0.7), 0 14px 22px -10px rgba(60, 32, 8, 0.6);
}

.jump-tile__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brass-grad);
    border: 2px solid var(--ink);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
}

.jump-tile__label {
    font-size: 0.95rem;
}

.jump-grid li::after {
    content: "";
    display: none;
    position: absolute;
    z-index: 2;
    top: calc(50% - 13px);
    right: calc(-0.5rem - 13px);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, var(--ink) 0 16%, var(--brass-hi) 17% 30%, var(--brass) 31% 62%, var(--brass-dk) 63% 72%, transparent 73%),
        repeating-conic-gradient(var(--brass) 0deg 12deg, transparent 12deg 30deg);
    pointer-events: none;
}

@media (min-width: 480px) {
    .jump-grid li::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: calc(50% - 5px);
        left: -0.5rem;
        right: -0.5rem;
        height: 10px;
        background:
            repeating-linear-gradient(90deg, transparent 0 80px, var(--copper-dk) 80px 83px, var(--copper-hi) 83px 85px, transparent 85px 92px),
            var(--pipe-h);
        box-shadow: 0 0 0 2px var(--ink);
    }
}

@media (min-width: 480px) and (max-width: 1023px) {
    .jump-grid li:nth-child(odd)::after {
        display: block;
    }
}

@media (min-width: 1024px) {
    .jump-grid li:not(:nth-child(4n))::after {
        display: block;
    }
}

/* FAQ answers */
.panel .answer + .faq-list {
    margin-top: 1.25rem;
}

.faq-item__a ul,
.faq-item__a ol {
    margin: 0.6rem 0 0;
    padding-left: 1.25rem;
}

.faq-item__a li {
    margin-bottom: 0.3rem;
}

.faq-item__a li::marker {
    color: var(--brass-dk);
    font-weight: 800;
}

.faq-item__a .faq-item__link {
    margin: 0.6rem 0 0;
    font-weight: 700;
}

.faq-item__link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ============================================
   RESPONSIBLE GAMBLING PAGE
   ============================================ */

.hero--rg .hero__mascot {
    width: min(78%, 360px);
}

.hero--rg .hero__intro {
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55), 0 0 70px 18px rgba(204, 186, 232, 0.5);
}

/* Soft lavender-to-amber glow behind mascot and sign */
.hero--rg .hero__grid {
    position: relative;
}

.hero--rg .hero__grid::before {
    content: "";
    position: absolute;
    inset: 6% -4% -2%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, rgba(206, 188, 236, 0.55) 0%, rgba(250, 200, 130, 0.3) 50%, rgba(250, 200, 130, 0) 72%);
}

.hero--rg .sign::before,
.hero--rg .sign::after {
    background: linear-gradient(90deg, #1e1e20, #6d6f72 45%, #232325);
}

.hero--rg .sign .updated {
    margin-top: 0.25rem;
}

.rg-seal {
    display: block;
    width: min(100%, 170px);
    height: auto;
    margin: 0 auto 0.75rem;
    filter: drop-shadow(0 6px 8px rgba(40, 20, 5, 0.35));
}

@media (min-width: 1024px) {
    .hero--rg .hero__mascot {
        max-width: 470px;
        margin-right: -3rem;
        z-index: 2;
        align-self: center;
    }
}

/* Dusk-tinted flow behind the body sections */
.rg-flow {
    background: linear-gradient(180deg, rgba(214, 196, 236, 0.4) 0%, rgba(240, 206, 170, 0.22) 55%, rgba(242, 212, 140, 0) 100%);
    padding-block: 1rem 0.5rem;
}

.panel--alert .panel__tab {
    color: #fff;
    background: linear-gradient(180deg, #c4483a 0%, #a3221b 55%, #7e1812 100%);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Warning list with cog bullets */
.warn-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: minmax(0, 1fr);
}

.warn-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-weight: 600;
}

.cog-bullet {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 0.15rem;
}

@media (min-width: 600px) {
    .warn-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }
}

/* Frameless illustration beside budget tips */
.rg-art {
    justify-self: center;
    width: min(100%, 420px);
}

.split .panel .dot-list {
    padding-left: 0;
}

/* Limit steps: gear medallions on one copper rail */
.limit-steps {
    position: relative;
    isolation: isolate;
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
    display: grid;
    gap: 1.4rem;
}

.limit-steps li {
    position: relative;
    min-height: 60px;
    padding-left: 78px;
}

.limit-steps li::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 30px;
    bottom: -1.4rem;
    width: 12px;
    background: var(--pipe-v);
    box-shadow: 0 0 0 2px var(--ink);
}

.limit-steps li:last-child::before {
    display: none;
}

.limit-steps__medal {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
}

.limit-steps__valve {
    position: absolute;
    left: 19px;
    top: calc(100% + 0.7rem - 11px);
    z-index: 2;
    width: 22px;
    height: 22px;
}

.limit-steps__body {
    padding: 0.8rem 1rem;
    background: rgba(255, 250, 235, 0.8);
    border: 3px solid var(--brass);
    border-radius: 12px;
    box-shadow: 0 0 0 2px var(--ink);
}

.limit-steps__body h3 {
    margin: 0 0 0.25rem;
    font-size: 1.02rem;
}

.limit-steps__body p {
    margin: 0;
    font-size: 1rem;
}

/* Help organisation cards */
.help-row {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: minmax(0, 1fr);
}

.help-row + .help-row {
    margin-top: 1.5rem;
}

.help-pipe {
    display: none;
}

.help-card {
    justify-content: flex-start;
}

.help-card__medal {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: var(--cream);
    background: radial-gradient(circle at 35% 30%, #3fa7b0, #1a6570 55%, #0f434a);
    border: 4px solid var(--brass);
    box-shadow: 0 0 0 2px var(--ink), inset 0 4px 8px rgba(0, 0, 0, 0.3);
}

.help-card__medal .icon {
    width: 28px;
    height: 28px;
}

.help-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: auto;
    padding: 0.4rem 0.5rem;
    font-weight: 800;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

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

    .help-row--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 68%;
        margin-inline: auto;
    }

    .help-pipe {
        display: block;
        position: absolute;
        z-index: -1;
        top: 22px;
        left: -1.5rem;
        width: calc(100% + 3rem);
        max-width: none;
        height: 14px;
        border-radius: 7px;
        box-shadow: 0 0 0 2px var(--ink);
    }
}

/* ============================================
   ABOUT & METHODOLOGY PAGE
   ============================================ */

.hero--about .hero__mascot {
    width: min(78%, 360px);
}

.hero--about .hero__intro {
    box-shadow: 0 10px 24px -14px rgba(60, 32, 8, 0.55), 0 0 70px 18px rgba(255, 214, 130, 0.45);
}

.hero--about .sign::before,
.hero--about .sign::after {
    background: linear-gradient(90deg, #7a4a12, var(--brass-hi) 45%, #7a4a12);
}

@media (min-width: 1024px) {
    .hero--about .hero__mascot {
        max-width: 470px;
        margin-right: -3rem;
        z-index: 2;
        align-self: center;
    }
}

.promise-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    text-align: left;
}

.promise-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-weight: 700;
    line-height: 1.4;
}

.promise-list .icon {
    width: 26px;
    height: 26px;
    margin-top: 0.05rem;
    padding: 3px;
    border-radius: 50%;
    color: var(--ink);
    background: var(--brass-grad);
    border: 2px solid var(--ink);
}

.date-plate {
    display: inline-block;
    margin: 0.25rem 0 0;
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--ink);
    background: var(--brass-grad);
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: inset 0 2px 0 rgba(255, 245, 210, 0.6), 0 3px 0 rgba(42, 26, 14, 0.3);
}

/* Disclosure panel with amber enamel tab and gauge */
.panel--amber .panel__tab {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    background: linear-gradient(180deg, #a06812 0%, #8e5c0e 55%, #6f470a 100%);
}

.disclosure {
    display: grid;
    gap: 1.25rem;
    justify-items: center;
}

.disclosure__gauge {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
}

.disclosure__zone {
    padding: 0.2rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--green);
    border: 2px solid var(--ink);
    border-radius: 999px;
}

.disclosure__text code {
    padding: 0.1rem 0.4rem;
    font-size: 0.9em;
    background: rgba(241, 208, 124, 0.55);
    border: 1px solid var(--brass-dk);
    border-radius: 6px;
}

@media (min-width: 768px) {
    .disclosure {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        gap: 2rem;
    }
}

/* Scoring cards */
.score-grid .medallion-card__text {
    font-size: 0.975rem;
}

/* Fact-check conveyor art */
.factcheck-art {
    width: min(100%, 880px);
    margin: 0 auto 1.5rem;
}

/* CTA row */
.cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* ============================================
   SITEMAP PAGE
   ============================================ */

.hero--sitemap {
    padding-bottom: 1.75rem;
}

.hero--sitemap .hero__grid {
    grid-template-columns: minmax(0, 1fr) 84px;
    grid-template-areas: "intro mascot";
    align-items: end;
    gap: 0.75rem;
}

/* Parchment ribbon banner with brass end-caps, hung from a brass rod */
.hero--sitemap .hero__intro {
    position: relative;
    margin-top: 1rem;
    padding: 0.8rem 0.85rem;
    background: var(--parchment);
    border: 0;
    border-block: 3px solid var(--brass-dk);
    border-inline: 12px solid var(--brass);
    border-radius: 6px;
    box-shadow: 0 0 0 2px var(--ink), 0 10px 20px -12px rgba(60, 32, 8, 0.6);
}

.hero--sitemap .hero__intro::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 4%;
    right: 4%;
    height: 9px;
    background: var(--brass-grad);
    border: 2px solid var(--ink);
    border-radius: 6px;
}

.hero--sitemap .hero__intro::after {
    content: "";
    position: absolute;
    top: -13px;
    left: 14%;
    right: 14%;
    height: 13px;
    background:
        linear-gradient(var(--ink), var(--ink)) left / 3px 100% no-repeat,
        linear-gradient(var(--ink), var(--ink)) right / 3px 100% no-repeat;
}

.hero--sitemap .hero__title {
    font-size: clamp(1.4rem, 1rem + 2.2vw, 2.5rem);
    margin-bottom: 0.4rem;
}

.hero--sitemap .hero__lead {
    font-size: 0.95rem;
    line-height: 1.5;
}

.hero--sitemap .breadcrumbs ol {
    margin-bottom: 0.4rem;
}

.hero--sitemap .hero__mascot {
    width: 100%;
    justify-self: end;
}

.hero--sitemap .hero__mascot img {
    max-height: 30vh;
    width: auto;
    margin-inline: auto;
}

@media (min-width: 480px) {
    .hero--sitemap .hero__grid {
        grid-template-columns: minmax(0, 1fr) 130px;
    }

    .hero--sitemap .hero__lead {
        font-size: 1.02rem;
    }
}

@media (min-width: 1024px) {
    .hero--sitemap .hero__grid {
        grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
        grid-template-areas: "intro mascot";
        align-items: center;
    }

    .hero--sitemap .hero__intro {
        padding: 1.1rem 1.5rem;
    }

    .hero--sitemap .hero__lead {
        font-size: 1.08rem;
    }

    .hero--sitemap .hero__mascot {
        max-width: 300px;
        margin-right: -1rem;
    }

    .hero--sitemap .hero__mascot img {
        max-height: 40vh;
    }
}

/* Group plaques joined by a copper pipe network */
.sitemap-net {
    --sm-gap: 2rem;
    position: relative;
    isolation: isolate;
    padding-block: 0.5rem;
}

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

.sitemap-net__steam {
    display: none;
}

.sitemap-group {
    position: relative;
}

/* Thin brass divider on mobile */
.sitemap-group:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: calc(-0.75rem - 2px);
    height: 4px;
    border-radius: 2px;
    background: var(--brass-grad);
}

.sitemap-group__shadow {
    height: 100%;
    filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 10px 12px rgba(60, 32, 8, 0.25));
}

.sitemap-group__frame {
    --tooth: 9px;
    height: 100%;
    padding: calc(var(--tooth) + 5px) 7px;
    background: var(--brass-grad);
    border-radius: 14px;
    -webkit-mask:
        linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--tooth)) no-repeat,
        repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 26px) center top / calc(100% - 28px) var(--tooth) no-repeat,
        repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 26px) center bottom / calc(100% - 28px) var(--tooth) no-repeat;
    mask:
        linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--tooth)) no-repeat,
        repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 26px) center top / calc(100% - 28px) var(--tooth) no-repeat,
        repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 26px) center bottom / calc(100% - 28px) var(--tooth) no-repeat;
}

.sitemap-group__face {
    height: 100%;
    padding: 1rem 1rem 0.9rem;
    background: var(--rivets), var(--parchment);
    border: 2px solid var(--ink);
    border-radius: 10px;
}

.sitemap-group__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
    padding: 0.3rem 0.8rem 0.3rem 0.3rem;
    background: var(--brass-grad);
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: inset 0 2px 0 rgba(255, 245, 210, 0.6);
}

.sitemap-group__medal {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--cream);
    background: radial-gradient(circle at 35% 30%, var(--enamel-hi), var(--enamel) 55%, var(--enamel-dk));
    border: 3px solid var(--brass-dk);
    box-shadow: 0 0 0 2px var(--ink), inset 0 3px 6px rgba(0, 0, 0, 0.3);
}

.sitemap-group__medal .icon {
    width: 22px;
    height: 22px;
}

.sitemap-group__title {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
}

.sitemap-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.sitemap-links li {
    padding: 0.35rem 0.25rem 0.5rem;
    border-bottom: 1px dotted rgba(138, 94, 34, 0.6);
}

.sitemap-links li:last-child {
    border-bottom: 0;
}

.sitemap-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.sitemap-links__desc {
    display: block;
    margin-top: -0.2rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--text-muted);
}

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

    .sitemap-group:not(:last-child)::after {
        display: none;
    }

    .sitemap-group:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - var(--sm-gap) / 2);
    }

    .sitemap-net::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 50%;
        top: 1rem;
        bottom: 1rem;
        width: var(--pipe-w);
        margin-left: calc(var(--pipe-w) / -2);
        border-radius: 8px;
        background: var(--pipe-v);
        box-shadow: 0 0 0 2px var(--ink);
    }

    .sitemap-net__steam {
        display: block;
        z-index: 1;
        left: calc(50% - 23px);
    }

    .sitemap-net__steam--t { top: -1.5rem; }
    .sitemap-net__steam--b { bottom: -1.5rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .sitemap-group:nth-child(odd):not(:last-child)::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 100%;
        top: 2rem;
        width: var(--sm-gap);
        height: var(--pipe-w);
        background: var(--pipe-h);
        box-shadow: 0 0 0 2px var(--ink);
    }

    .sitemap-group:nth-child(odd):not(:last-child)::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 2;
        left: calc(100% + var(--sm-gap) / 2 - 15px);
        top: calc(2rem + var(--pipe-w) / 2 - 15px);
        right: auto;
        bottom: auto;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background:
            radial-gradient(circle closest-side, var(--ink) 0 16%, var(--brass-hi) 17% 30%, var(--brass) 31% 62%, var(--brass-dk) 63% 72%, transparent 73%),
            repeating-conic-gradient(var(--brass) 0deg 12deg, transparent 12deg 30deg);
    }
}

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

    .sitemap-group:last-child:nth-child(odd) {
        width: auto;
        justify-self: stretch;
        grid-column: 2;
    }

    .sitemap-group:nth-child(3n+1):not(:last-child)::before,
    .sitemap-group:nth-child(3n+2):not(:last-child)::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 100%;
        top: 2rem;
        width: var(--sm-gap);
        height: var(--pipe-w);
        background: var(--pipe-h);
        box-shadow: 0 0 0 2px var(--ink);
    }

    .sitemap-group:nth-child(3n+1):not(:last-child)::after,
    .sitemap-group:nth-child(3n+2):not(:last-child)::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 2;
        left: calc(100% + var(--sm-gap) / 2 - 15px);
        top: calc(2rem + var(--pipe-w) / 2 - 15px);
        right: auto;
        bottom: auto;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background:
            radial-gradient(circle closest-side, var(--ink) 0 16%, var(--brass-hi) 17% 30%, var(--brass) 31% 62%, var(--brass-dk) 63% 72%, transparent 73%),
            repeating-conic-gradient(var(--brass) 0deg 12deg, transparent 12deg 30deg);
    }
}

@keyframes gear-rotate {
    to { rotate: 360deg; }
}

@keyframes steam-rise {
    0% { opacity: 0; translate: 0 8px; scale: 0.7; }
    30% { opacity: 0.85; }
    100% { opacity: 0; translate: 6px -28px; scale: 1.45; }
}

@media (prefers-reduced-motion: no-preference) {
    .gear--spin.is-live {
        animation: gear-rotate 36s linear infinite;
    }

    .gear--spin.gear--rev.is-live {
        animation-direction: reverse;
    }

    .gear--giant.is-live {
        animation-duration: 70s;
    }

    .steam.is-live {
        animation: steam-rise 3.6s ease-out infinite;
    }

    .btn--steam.is-live::after {
        animation: steam-rise 3.2s ease-out infinite;
    }

    .is-doc-hidden .gear--spin,
    .is-doc-hidden .steam,
    .is-doc-hidden .btn--steam::after {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}