/* Extracted page styles for cs4. */

/* community.html */
:root {
            --site-bg: #FEFBE8;
            --site-surface: #F8F2CB;
            --site-text: #12120F;
            --site-muted: #3C3B34;
            --site-border: #E3DFC5;
            --site-primary: #948636;
            --site-on-primary: #000000;
            --site-secondary: #8583B1;
            --site-on-secondary: #000000;
            --site-accent: #9D62C0;
            --site-on-accent: #000000;
            --site-success: #22C55E;
            --site-warning: #F59E0B;
            --site-error: #EF4444;
            --site-info: #3B82F6;
            --site-radius: 24px;
            --color-bg: var(--site-bg);
            --color-surface: var(--site-surface);
            --color-text: var(--site-text);
            --color-muted: var(--site-muted);
            --color-border: var(--site-border);
            --color-primary: var(--site-primary);
            --color-on-primary: var(--site-on-primary);
            --color-secondary: var(--site-secondary);
            --color-on-secondary: var(--site-on-secondary);
            --color-accent: var(--site-accent);
            --color-on-accent: var(--site-on-accent);
            --color-success: var(--site-success);
            --color-warning: var(--site-warning);
            --color-error: var(--site-error);
            --color-info: var(--site-info);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --site-bg: #0E0D0B;
                --site-surface: #1A1A16;
                --site-text: #E7E5D6;
                --site-muted: #B5B2A0;
                --site-border: #2F2E2A;
                --site-primary: #DECE6E;
                --site-on-primary: #000000;
                --site-secondary: #BFBFE2;
                --site-on-secondary: #000000;
                --site-accent: #CBB6D9;
                --site-on-accent: #000000;
            }
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
            background-color: var(--site-bg);
            color: var(--site-text);
            font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
            font-weight: 400;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

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

        img {
            max-width: 100%;
            display: block;
        }

        .siteHeader {
            position: sticky;
            top: 0;
            z-index: 40;
            height: 72px;
            display: flex;
            align-items: center;
            background-color: var(--site-surface);
            border-bottom: 1px solid var(--site-border);
        }

        .headerInner {
            width: 100%;
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 32px;
            padding-right: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
            flex-shrink: 0;
        }

        .brandIcon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.2rem;
        }

        .brandStack {
            display: flex;
            flex-direction: column;
        }

        .brandText {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            line-height: 1.25;
        }

        .brandTagline {
            font-size: 0.68rem;
            color: var(--site-muted);
            line-height: 1.2;
        }

        .mainNav {
            display: flex;
            align-items: center;
        }

        .navList {
            display: flex;
            align-items: center;
            gap: 26px;
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .navLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .navLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .headerActions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .headerCta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding-top: 11px;
            padding-bottom: 11px;
            padding-left: 22px;
            padding-right: 22px;
            border-radius: 999px;
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            color: var(--site-on-primary);
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: transform 0.2s ease;
        }

        .headerCta:hover {
            transform: scale(1.02);
        }

        .navToggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--site-border);
            background-color: var(--site-bg);
            color: var(--site-text);
            font-size: 1.35rem;
            cursor: pointer;
        }

        @media (max-width: 980px) {
            .mainNav {
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                display: none;
                background-color: var(--site-surface);
                border-bottom: 1px solid var(--site-border);
                box-shadow: 0 14px 28px rgba(18, 18, 15, 0.14);
            }

            .mainNav.isOpen {
                display: block;
            }

            .navList {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding-left: 24px;
                padding-right: 24px;
                padding-top: 8px;
                padding-bottom: 16px;
            }

            .navList li {
                border-bottom: 1px solid var(--site-border);
            }

            .navLink {
                display: block;
                padding-top: 14px;
                padding-bottom: 14px;
                border-bottom: 0;
            }

            .navToggle {
                display: inline-flex;
            }

            .headerCta {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .headerInner {
                padding-left: 20px;
                padding-right: 20px;
            }

            .brandTagline {
                display: none;
            }
        }

/* community.html */
.communityMain {
            overflow: hidden;
            background: var(--color-bg);
            color: var(--color-text);
        }

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

        .communityMain .pageWidth {
            width: min(100% - 64px, 1180px);
            margin-inline: auto;
        }

        .communityMain .heroSection {
            display: grid;
            grid-template-columns: 1.08fr 0.92fr;
            align-items: center;
            gap: 52px;
            padding-block: 54px 58px;
        }

        .communityMain .eyebrow {
            margin: 0 0 14px;
            color: var(--color-primary);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.13em;
            text-transform: uppercase;
        }

        .communityMain h1,
        .communityMain h2,
        .communityMain h3,
        .communityMain p {
            margin-top: 0;
        }

        .communityMain h1 {
            max-width: 13ch;
            margin-bottom: 18px;
            font-size: clamp(2.35rem, 5vw, 4.25rem);
            letter-spacing: -0.045em;
            line-height: 1.08;
        }

        .communityMain .heroCopy {
            max-width: 590px;
            margin-bottom: 25px;
            color: var(--color-muted);
            font-size: 1.08rem;
            line-height: 1.75;
        }

        .communityMain .primaryButton,
        .communityMain .secondaryButton {
            display: inline-flex;
            min-height: 48px;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 12px 21px;
            border: 0;
            border-radius: 999px;
            font: inherit;
            font-size: 0.92rem;
            font-weight: 700;
            text-align: center;
            text-decoration: none;
            transition: transform 180ms ease, box-shadow 180ms ease;
            cursor: pointer;
        }

        .communityMain .primaryButton {
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: var(--color-on-primary);
        }

        .communityMain .secondaryButton {
            border: 1px solid var(--color-border);
            background: var(--color-surface);
            color: var(--color-text);
        }

        .communityMain .primaryButton:hover,
        .communityMain .secondaryButton:hover {
            transform: scale(1.02);
            box-shadow: 0 7px 18px rgba(18, 18, 15, 0.12);
        }

        .communityMain .heroPhotoWrap {
            position: relative;
            min-width: 0;
        }

        .communityMain .heroPhoto {
            width: 100%;
            aspect-ratio: 1.14 / 1;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            object-fit: cover;
            box-shadow: 0 18px 38px rgba(18, 18, 15, 0.12);
        }

        .communityMain .photoCaption {
            position: absolute;
            right: 16px;
            bottom: 16px;
            left: 16px;
            width: fit-content;
            max-width: calc(100% - 32px);
            margin: 0;
            padding: 10px 15px;
            border: 1px solid rgba(227, 223, 197, 0.55);
            border-radius: 999px;
            background: var(--color-bg);
            color: var(--color-text);
            font-size: 0.82rem;
            font-weight: 600;
        }

        .communityMain .statsBand {
            display: grid;
            width: 100%;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0;
            padding: 58px max(32px, calc((100vw - 1180px) / 2));
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .communityMain .statItem {
            display: flex;
            min-height: 116px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 12px 22px;
            border-left: 2px solid currentColor;
            text-align: center;
        }

        .communityMain .statItem:first-child {
            border-left: 0;
        }

        .communityMain .statNumber {
            font-size: clamp(3rem, 6vw, 4.5rem);
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
        }

        .communityMain .statCaption {
            max-width: 22ch;
            margin-top: 12px;
            font-size: 0.93rem;
            line-height: 1.4;
        }

        .communityMain .contentSection {
            padding-block: 70px;
        }

        .communityMain .sectionHeading {
            max-width: 720px;
            margin-bottom: 30px;
        }

        .communityMain .sectionHeading h2 {
            margin-bottom: 10px;
            font-size: clamp(1.85rem, 3.4vw, 2.75rem);
            letter-spacing: -0.03em;
        }

        .communityMain .sectionHeading p {
            margin-bottom: 0;
            color: var(--color-muted);
            line-height: 1.7;
        }

        .communityMain .forumGrid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
        }

        .communityMain .accentCard {
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            box-shadow: 0 7px 18px rgba(18, 18, 15, 0.07);
            transition: transform 180ms ease, box-shadow 180ms ease;
        }

        .communityMain .accentCard:hover {
            transform: scale(1.02);
            box-shadow: 0 12px 25px rgba(18, 18, 15, 0.11);
        }

        .communityMain .forumCard {
            display: flex;
            min-height: 218px;
            flex-direction: column;
            padding: 23px;
        }

        .communityMain .cardTopline {
            display: flex;
            align-items: flex-start;
            gap: 14px;
        }

        .communityMain .iconCircle {
            display: inline-flex;
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(157, 98, 192, 0.16);
            color: var(--color-on-accent);
            font-size: 1.15rem;
        }

        .communityMain .forumCard h3 {
            margin: 2px 0 5px;
            font-size: 1.08rem;
            line-height: 1.35;
        }

        .communityMain .forumCard p {
            margin: 0;
            color: var(--color-muted);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .communityMain .forumMeta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: auto;
            padding-top: 20px;
            color: var(--color-muted);
            font-size: 0.78rem;
        }

        .communityMain .threadPill {
            display: inline-flex;
            padding: 5px 10px;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            background: var(--color-bg);
            color: var(--color-text);
            font-weight: 700;
            white-space: nowrap;
        }

        .communityMain .guildSection {
            padding-block: 70px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .communityMain .guildIntroRow {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 26px;
        }

        .communityMain .guildIntroRow .sectionHeading {
            margin-bottom: 0;
        }

        .communityMain .filterPanel {
            display: grid;
            grid-template-columns: repeat(3, minmax(130px, 1fr)) auto;
            align-items: end;
            gap: 12px;
            margin-bottom: 22px;
            padding: 18px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-bg);
            color: var(--color-text);
        }

        .communityMain .filterField label {
            display: block;
            margin-bottom: 6px;
            color: var(--color-muted);
            font-size: 0.78rem;
            font-weight: 700;
        }

        .communityMain .filterField select {
            width: 100%;
            min-height: 42px;
            padding: 8px 32px 8px 11px;
            border: 1px solid var(--color-border);
            border-radius: 10px;
            background: var(--color-surface);
            color: var(--color-text);
            font: inherit;
            font-size: 0.86rem;
        }

        .communityMain .filterPanel .primaryButton {
            min-height: 42px;
            padding: 9px 16px;
            font-size: 0.83rem;
        }

        .communityMain .guildGrid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .communityMain .guildCard {
            display: flex;
            min-height: 252px;
            flex-direction: column;
            padding: 22px;
        }

        .communityMain .guildLabel {
            display: inline-flex;
            align-self: flex-start;
            margin-bottom: 12px;
            padding: 5px 10px;
            border-radius: 999px;
            background: rgba(133, 131, 177, 0.18);
            color: var(--color-text);
            font-size: 0.75rem;
            font-weight: 700;
        }

        .communityMain .guildCard h3 {
            margin-bottom: 8px;
            font-size: 1.16rem;
        }

        .communityMain .guildCard p {
            margin-bottom: 12px;
            color: var(--color-muted);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .communityMain .guildDetails {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-bottom: 18px;
        }

        .communityMain .guildDetails span {
            padding: 5px 8px;
            border: 1px solid var(--color-border);
            border-radius: 8px;
            color: var(--color-muted);
            font-size: 0.74rem;
        }

        .communityMain .guildCard .secondaryButton {
            width: 100%;
            min-height: 42px;
            margin-top: auto;
            padding: 9px 14px;
            font-size: 0.86rem;
        }

        .communityMain .filterStatus {
            min-height: 1.5em;
            margin: 12px 0 0;
            color: var(--color-muted);
            font-size: 0.82rem;
        }

        .communityMain .verificationNote {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-top: 22px;
            padding: 16px 18px;
            border: 1px solid var(--color-border);
            border-radius: 16px;
            background: var(--color-bg);
            color: var(--color-muted);
            font-size: 0.88rem;
            line-height: 1.65;
        }

        .communityMain .verificationNote i {
            margin-top: 2px;
            color: var(--color-primary);
            font-size: 1.1rem;
        }

        .communityMain .spotlightLayout {
            display: grid;
            grid-template-columns: 0.76fr 1.24fr;
            align-items: start;
            gap: 44px;
        }

        .communityMain .spotlightAside {
            position: sticky;
            top: 96px;
        }

        .communityMain .spotlightAside p {
            color: var(--color-muted);
            line-height: 1.75;
        }

        .communityMain .spotlightStack {
            display: grid;
            gap: 18px;
        }

        .communityMain .spotlightQuote {
            margin: 0;
            padding: 25px 27px;
        }

        .communityMain .spotlightQuote blockquote {
            margin: 0 0 18px;
            font-size: 1rem;
            line-height: 1.8;
        }

        .communityMain .spotlightQuote figcaption {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--color-muted);
            font-size: 0.85rem;
        }

        .communityMain .profileMark {
            display: inline-flex;
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(157, 98, 192, 0.16);
            color: var(--color-on-accent);
            font-size: 0.88rem;
            font-weight: 700;
        }

        .communityMain .spotlightQuote strong {
            display: block;
            color: var(--color-text);
            font-size: 0.92rem;
        }

        .communityMain .nominationLink {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 7px;
            color: var(--color-primary);
            font-weight: 700;
            text-decoration-thickness: 1px;
            text-underline-offset: 4px;
        }

        .communityMain .guidelinesSection {
            padding-block: 70px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .communityMain .guidelineGrid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .communityMain .guidelineItem {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 21px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-bg);
            color: var(--color-text);
        }

        .communityMain .numberMark {
            display: inline-flex;
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(157, 98, 192, 0.16);
            color: var(--color-on-accent);
            font-weight: 700;
        }

        .communityMain .guidelineItem h3 {
            margin: 2px 0 6px;
            font-size: 1rem;
        }

        .communityMain .guidelineItem p {
            margin: 0;
            color: var(--color-muted);
            font-size: 0.88rem;
            line-height: 1.65;
        }

        .communityMain .guidelineLinks {
            margin-top: 24px;
            color: var(--color-muted);
            font-size: 0.9rem;
        }

        .communityMain .guidelineLinks a {
            color: var(--color-primary);
            font-weight: 700;
            text-underline-offset: 4px;
        }

        .communityMain .echoBand {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0;
            padding: 43px max(32px, calc((100vw - 1180px) / 2));
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .communityMain .echoBand .statItem {
            min-height: 96px;
        }

        .communityMain .echoBand .statNumber {
            font-size: clamp(2.5rem, 5vw, 3.5rem);
        }

        .communityMain .contactSection {
            padding-block: 66px 76px;
        }

        .communityMain .contactPanel {
            max-width: 720px;
            margin-inline: auto;
            padding: 34px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            text-align: center;
        }

        .communityMain .contactPanel h2 {
            margin-bottom: 10px;
            font-size: clamp(1.7rem, 3vw, 2.25rem);
        }

        .communityMain .contactPanel p {
            max-width: 52ch;
            margin: 0 auto 22px;
            color: var(--color-muted);
            line-height: 1.7;
        }

        .communityMain .contactPanel .primaryButton {
            margin-bottom: 12px;
        }

        .communityMain .contactHint {
            display: block;
            color: var(--color-muted);
            font-size: 0.78rem;
        }

        @media (max-width: 900px) {
            .communityMain .heroSection {
                gap: 32px;
            }

            .communityMain .forumGrid,
            .communityMain .guildGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .communityMain .filterPanel {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .communityMain .spotlightLayout {
                grid-template-columns: 1fr 1.25fr;
                gap: 26px;
            }
        }

        @media (max-width: 768px) {
            .communityMain .pageWidth {
                width: min(100% - 40px, 620px);
            }

            .communityMain .heroSection {
                grid-template-columns: 1fr;
                gap: 28px;
                padding-block: 40px 44px;
            }

            .communityMain .heroPhotoWrap {
                order: 2;
            }

            .communityMain .statsBand {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                row-gap: 30px;
                padding: 43px 20px;
            }

            .communityMain .statItem {
                border-left: 0;
            }

            .communityMain .statItem:nth-child(even) {
                border-left: 1px solid currentColor;
            }

            .communityMain .contentSection,
            .communityMain .guildSection,
            .communityMain .guidelinesSection {
                padding-block: 52px;
            }

            .communityMain .guildIntroRow {
                align-items: flex-start;
                flex-direction: column;
            }

            .communityMain .spotlightLayout {
                grid-template-columns: 1fr;
            }

            .communityMain .spotlightAside {
                position: static;
            }

            .communityMain .echoBand {
                padding: 35px 20px;
            }

            .communityMain .contactSection {
                padding-block: 50px 58px;
            }
        }

        @media (max-width: 560px) {
            .communityMain .forumGrid,
            .communityMain .guildGrid,
            .communityMain .guidelineGrid {
                grid-template-columns: 1fr;
            }

            .communityMain .forumCard {
                min-height: 0;
            }

            .communityMain .filterPanel {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .communityMain .filterPanel .primaryButton {
                width: 100%;
            }

            .communityMain .guildCard {
                min-height: 0;
            }

            .communityMain .guildCard .secondaryButton {
                margin-top: 4px;
            }

            .communityMain .echoBand {
                grid-template-columns: 1fr;
                gap: 22px;
            }

            .communityMain .echoBand .statItem,
            .communityMain .echoBand .statItem:nth-child(even) {
                min-height: 80px;
                border-left: 0;
                border-bottom: 1px solid currentColor;
            }

            .communityMain .echoBand .statItem:last-child {
                border-bottom: 0;
            }

            .communityMain .contactPanel {
                padding: 27px 20px;
            }
        }

        @media (max-width: 420px) {
            .communityMain .pageWidth {
                width: min(100% - 32px, 380px);
            }

            .communityMain .statsBand {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .communityMain .statsBand .statItem,
            .communityMain .statsBand .statItem:nth-child(even) {
                min-height: 82px;
                border-left: 0;
                border-bottom: 1px solid currentColor;
            }

            .communityMain .statsBand .statItem:last-child {
                border-bottom: 0;
            }

            .communityMain .forumMeta {
                align-items: flex-start;
                flex-direction: column;
            }

            .communityMain .spotlightQuote {
                padding: 21px;
            }
        }

/* community.html */
.siteFooter {
            background-color: var(--site-surface);
            color: var(--site-text);
            border-top: 1px solid var(--site-border);
            padding-top: 56px;
            padding-bottom: 32px;
            padding-left: 32px;
            padding-right: 32px;
        }

        .footerInner {
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
        }

        .footerGrid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
            gap: 32px;
        }

        .footerBrand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
        }

        .footerBrandIcon {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.15rem;
        }

        .footerBrandText {
            font-size: 1.15rem;
            font-weight: 700;
        }

        .footerTagline {
            margin-top: 16px;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            color: var(--site-muted);
            font-size: 0.95rem;
            max-width: 34ch;
        }

        .footerHeading {
            margin-top: 0;
            margin-bottom: 14px;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--site-muted);
        }

        .footerList {
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            display: grid;
            gap: 10px;
        }

        .footerLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            border-bottom: 1px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .footerLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .footerContactList {
            gap: 12px;
        }

        .footerContactItem {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.95rem;
            color: var(--site-muted);
        }

        .footerContactItem i {
            color: var(--site-accent);
            margin-top: 3px;
        }

        .footerNotice {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-top: 44px;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 24px;
            padding-right: 24px;
            border-top: 1px solid var(--site-border);
            border-right: 1px solid var(--site-border);
            border-bottom: 1px solid var(--site-border);
            border-left: 4px solid var(--site-accent);
            border-radius: var(--site-radius);
            background-color: var(--site-bg);
        }

        .footerBadge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: var(--site-accent);
            color: var(--site-on-accent);
            font-weight: 700;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .footerNoticeText {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
        }

        .footerDisclosure {
            margin-top: 20px;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .footerBottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 12px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid var(--site-border);
        }

        .footerCopyright,
        .footerMeta {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .cookieBanner {
            position: fixed;
            left: 16px;
            right: 16px;
            bottom: 16px;
            z-index: 60;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 18px;
            padding-bottom: 18px;
            padding-left: 22px;
            padding-right: 22px;
            background-color: var(--site-surface);
            color: var(--site-text);
            border: 1px solid var(--site-border);
            border-radius: var(--site-radius);
            box-shadow: 0 12px 28px rgba(18, 18, 15, 0.18);
        }

        .cookieText {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
            max-width: 62ch;
        }

        .cookieButton {
            border: 0;
            cursor: pointer;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 26px;
            padding-right: 26px;
            border-radius: 999px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--site-on-primary);
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            transition: transform 0.2s ease;
        }

        .cookieButton:hover {
            transform: scale(1.02);
        }

        .isHidden {
            display: none !important;
        }

        @media (max-width: 900px) {
            .footerGrid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 560px) {
            .siteFooter {
                padding-top: 40px;
                padding-bottom: 28px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .footerGrid {
                grid-template-columns: 1fr;
            }

            .footerNotice {
                flex-direction: column;
            }
        }

/* Inline style from community.html */
.extracted-community-html-1 { margin-top: 17px; margin-bottom: 0; font-size: 0.9rem; }

/* digital-merchandise.html */
:root {
            --site-bg: #FEFBE8;
            --site-surface: #F8F2CB;
            --site-text: #12120F;
            --site-muted: #3C3B34;
            --site-border: #E3DFC5;
            --site-primary: #948636;
            --site-on-primary: #000000;
            --site-secondary: #8583B1;
            --site-on-secondary: #000000;
            --site-accent: #9D62C0;
            --site-on-accent: #000000;
            --site-success: #22C55E;
            --site-warning: #F59E0B;
            --site-error: #EF4444;
            --site-info: #3B82F6;
            --site-radius: 24px;
            --color-bg: var(--site-bg);
            --color-surface: var(--site-surface);
            --color-text: var(--site-text);
            --color-muted: var(--site-muted);
            --color-border: var(--site-border);
            --color-primary: var(--site-primary);
            --color-on-primary: var(--site-on-primary);
            --color-secondary: var(--site-secondary);
            --color-on-secondary: var(--site-on-secondary);
            --color-accent: var(--site-accent);
            --color-on-accent: var(--site-on-accent);
            --color-success: var(--site-success);
            --color-warning: var(--site-warning);
            --color-error: var(--site-error);
            --color-info: var(--site-info);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --site-bg: #0E0D0B;
                --site-surface: #1A1A16;
                --site-text: #E7E5D6;
                --site-muted: #B5B2A0;
                --site-border: #2F2E2A;
                --site-primary: #DECE6E;
                --site-on-primary: #000000;
                --site-secondary: #BFBFE2;
                --site-on-secondary: #000000;
                --site-accent: #CBB6D9;
                --site-on-accent: #000000;
            }
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
            background-color: var(--site-bg);
            color: var(--site-text);
            font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
            font-weight: 400;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

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

        img {
            max-width: 100%;
            display: block;
        }

        .siteHeader {
            position: sticky;
            top: 0;
            z-index: 40;
            height: 72px;
            display: flex;
            align-items: center;
            background-color: var(--site-surface);
            border-bottom: 1px solid var(--site-border);
        }

        .headerInner {
            width: 100%;
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 32px;
            padding-right: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
            flex-shrink: 0;
        }

        .brandIcon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.2rem;
        }

        .brandStack {
            display: flex;
            flex-direction: column;
        }

        .brandText {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            line-height: 1.25;
        }

        .brandTagline {
            font-size: 0.68rem;
            color: var(--site-muted);
            line-height: 1.2;
        }

        .mainNav {
            display: flex;
            align-items: center;
        }

        .navList {
            display: flex;
            align-items: center;
            gap: 26px;
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .navLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .navLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .headerActions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .headerCta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding-top: 11px;
            padding-bottom: 11px;
            padding-left: 22px;
            padding-right: 22px;
            border-radius: 999px;
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            color: var(--site-on-primary);
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: transform 0.2s ease;
        }

        .headerCta:hover {
            transform: scale(1.02);
        }

        .navToggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--site-border);
            background-color: var(--site-bg);
            color: var(--site-text);
            font-size: 1.35rem;
            cursor: pointer;
        }

        @media (max-width: 980px) {
            .mainNav {
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                display: none;
                background-color: var(--site-surface);
                border-bottom: 1px solid var(--site-border);
                box-shadow: 0 14px 28px rgba(18, 18, 15, 0.14);
            }

            .mainNav.isOpen {
                display: block;
            }

            .navList {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding-left: 24px;
                padding-right: 24px;
                padding-top: 8px;
                padding-bottom: 16px;
            }

            .navList li {
                border-bottom: 1px solid var(--site-border);
            }

            .navLink {
                display: block;
                padding-top: 14px;
                padding-bottom: 14px;
                border-bottom: 0;
            }

            .navToggle {
                display: inline-flex;
            }

            .headerCta {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .headerInner {
                padding-left: 20px;
                padding-right: 20px;
            }

            .brandTagline {
                display: none;
            }
        }

/* digital-merchandise.html */
.merchPage {
            color: var(--color-text);
            background: var(--color-bg);
        }

        .merchContainer {
            width: min(1180px, calc(100% - 64px));
            margin: 0 auto;
        }

        .merchHero {
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            align-items: center;
            gap: 56px;
            padding: 56px 0 64px;
        }

        .eyebrow {
            margin: 0 0 14px;
            color: var(--color-primary);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .heroCopy h1 {
            max-width: 620px;
            margin: 0;
            font-size: clamp(2.5rem, 5vw, 4.25rem);
            letter-spacing: -0.045em;
            line-height: 1.08;
        }

        .heroCopy > p:not(.eyebrow) {
            max-width: 560px;
            margin: 20px 0 28px;
            color: var(--color-muted);
            font-size: 1.08rem;
        }

        .gradientButton {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 48px;
            padding: 12px 22px;
            border: 0;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: var(--color-on-primary);
            font: inherit;
            font-weight: 700;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            cursor: pointer;
        }

        .gradientButton:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 20px rgba(18, 18, 15, 0.14);
        }

        .heroImageFrame {
            overflow: hidden;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
        }

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

        .heroImageCaption {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 18px;
            color: var(--color-muted);
            font-size: 0.9rem;
        }

        .iconCircle {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: color-mix(in srgb, var(--color-accent) 16%, transparent);
            color: var(--color-accent);
            font-size: 1.15rem;
        }

        .statsBand {
            width: 100%;
            padding: 62px 32px;
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .statsGrid {
            width: min(1180px, 100%);
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
        }

        .statItem {
            min-height: 118px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 16px 22px;
            border-left: 2px solid currentColor;
            text-align: center;
        }

        .statItem:first-child {
            border-left: 0;
        }

        .statNumber {
            font-size: clamp(3rem, 6vw, 4.5rem);
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
        }

        .statCaption {
            max-width: 22ch;
            margin-top: 12px;
            font-size: 0.95rem;
            line-height: 1.35;
        }

        .sectionBlock {
            padding: 64px 0;
        }

        .sectionHeading {
            max-width: 720px;
            margin: 0 auto 32px;
            text-align: center;
        }

        .sectionHeading h2 {
            margin: 0;
            font-size: clamp(1.8rem, 3vw, 2.6rem);
            letter-spacing: -0.025em;
        }

        .sectionHeading p {
            margin: 12px 0 0;
            color: var(--color-muted);
        }

        .collectionGrid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 20px;
        }

        .merchCard {
            height: auto;
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            box-shadow: 0 5px 16px rgba(18, 18, 15, 0.07);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .merchCard:hover {
            transform: scale(1.02);
            box-shadow: 0 10px 24px rgba(18, 18, 15, 0.12);
        }

        .categoryCard {
            padding: 22px;
        }

        .categoryCard h3,
        .bundleCard h3 {
            margin: 16px 0 8px;
            font-size: 1.15rem;
        }

        .categoryCard p,
        .bundleCard p {
            margin: 0;
            color: var(--color-muted);
            font-size: 0.92rem;
        }

        .categoryMeta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid var(--color-border);
            font-size: 0.82rem;
        }

        .countPill {
            padding: 5px 10px;
            border-radius: 999px;
            background: var(--color-bg);
            color: var(--color-text);
            white-space: nowrap;
        }

        .costLabel {
            color: var(--color-muted);
            text-align: right;
        }

        .bundlesSection {
            padding: 64px 0 72px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .bundleGrid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 22px;
        }

        .bundleCard {
            display: flex;
            flex-direction: column;
            padding: 24px;
        }

        .bundleTopline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .tierPill {
            padding: 5px 10px;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            color: var(--color-muted);
            font-size: 0.77rem;
            font-weight: 600;
        }

        .bundleCard h3 {
            margin-top: 18px;
        }

        .bundleContents {
            margin: 16px 0 22px;
            padding: 0;
            list-style: none;
        }

        .bundleContents li {
            display: flex;
            gap: 9px;
            margin: 8px 0;
            color: var(--color-muted);
            font-size: 0.9rem;
        }

        .bundleContents i {
            color: var(--color-primary);
        }

        .bundleFooter {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: auto;
            padding-top: 16px;
            border-top: 1px solid var(--color-border);
        }

        .creditPrice {
            font-size: 1.12rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .bundleCard .gradientButton {
            width: 100%;
            margin-top: 18px;
        }

        .tierNote {
            margin: 24px auto 0;
            max-width: 760px;
            color: var(--color-muted);
            font-size: 0.9rem;
            text-align: center;
        }

        .deliverySection {
            padding: 68px 0;
        }

        .deliveryLayout {
            display: grid;
            grid-template-columns: 0.8fr 1.2fr;
            align-items: start;
            gap: 56px;
        }

        .deliveryIntro h2 {
            margin: 0;
            font-size: clamp(1.8rem, 3vw, 2.5rem);
        }

        .deliveryIntro p {
            color: var(--color-muted);
        }

        .stepsList {
            margin: 0;
            padding: 0;
            list-style: none;
            counter-reset: deliveryStep;
        }

        .stepsList li {
            position: relative;
            display: grid;
            grid-template-columns: 48px 1fr;
            gap: 16px;
            padding: 0 0 24px;
            counter-increment: deliveryStep;
        }

        .stepsList li:not(:last-child)::after {
            position: absolute;
            top: 48px;
            bottom: 0;
            left: 23px;
            width: 1px;
            background: var(--color-border);
            content: "";
        }

        .stepMarker {
            width: 48px;
            height: 48px;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--color-border);
            border-radius: 50%;
            background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg));
            color: var(--color-text);
            font-weight: 700;
        }

        .stepMarker::before {
            content: counter(deliveryStep, decimal-leading-zero);
        }

        .stepsList h3 {
            margin: 3px 0 5px;
            font-size: 1.05rem;
        }

        .stepsList p {
            max-width: 52ch;
            margin: 0;
            color: var(--color-muted);
        }

        .supportLine {
            margin: 10px 0 0 64px;
            padding: 15px 18px;
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            font-size: 0.92rem;
        }

        .supportLine a {
            color: var(--color-primary);
            font-weight: 700;
        }

        .proofSection {
            padding: 64px 0;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .proofGrid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
        }

        .quoteCard {
            padding: 24px;
        }

        .quoteCard blockquote {
            margin: 0;
            font-size: 1rem;
            line-height: 1.7;
        }

        .quoteCard p {
            margin: 15px 0 0;
            color: var(--color-muted);
            font-size: 0.88rem;
        }

        .faqSection {
            padding: 64px 0;
        }

        .faqList {
            max-width: 850px;
            margin: 0 auto;
        }

        .faqItem {
            padding: 20px 0;
            border-bottom: 1px solid var(--color-border);
        }

        .faqItem:first-child {
            border-top: 1px solid var(--color-border);
        }

        .faqItem h3 {
            margin: 0 0 7px;
            font-size: 1.06rem;
        }

        .faqItem p {
            max-width: 76ch;
            margin: 0;
            color: var(--color-muted);
        }

        .echoBand {
            padding: 42px 32px;
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .echoGrid {
            width: min(1000px, 100%);
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

        .echoGrid .statItem {
            min-height: 104px;
        }

        .echoGrid .statNumber {
            font-size: clamp(2.5rem, 5vw, 3.5rem);
        }

        .contactSection {
            padding: 68px 20px 76px;
        }

        .contactCard {
            max-width: 560px;
            margin: 0 auto;
            padding: 32px;
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            box-shadow: 0 5px 16px rgba(18, 18, 15, 0.07);
        }

        .contactCard h2 {
            margin: 0;
            text-align: center;
            font-size: 1.8rem;
        }

        .contactCard > p {
            margin: 10px 0 24px;
            color: var(--color-muted);
            text-align: center;
        }

        .contactForm {
            display: grid;
            gap: 14px;
        }

        .contactForm label {
            display: grid;
            gap: 6px;
            font-size: 0.9rem;
            font-weight: 600;
        }

        .contactForm input,
        .contactForm textarea {
            width: 100%;
            padding: 12px 13px;
            border: 1px solid var(--color-border);
            border-radius: 12px;
            background: var(--color-bg);
            color: var(--color-text);
            font: inherit;
        }

        .contactForm textarea {
            min-height: 108px;
            resize: vertical;
        }

        .contactForm .gradientButton {
            width: 100%;
            margin-top: 5px;
        }

        @media (max-width: 900px) {
            .collectionGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .deliveryLayout {
                grid-template-columns: 1fr;
                gap: 26px;
            }

            .bundleGrid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .merchContainer {
                width: min(100% - 40px, 620px);
            }

            .merchHero {
                grid-template-columns: 1fr;
                gap: 32px;
                padding: 40px 0;
            }

            .heroCopy .gradientButton {
                width: 100%;
            }

            .statsBand {
                padding: 44px 20px;
            }

            .statsGrid {
                grid-template-columns: repeat(2, 1fr);
                row-gap: 26px;
            }

            .statItem {
                border-left: 0;
            }

            .sectionBlock,
            .bundlesSection,
            .deliverySection,
            .proofSection,
            .faqSection {
                padding: 48px 0;
            }

            .proofGrid {
                grid-template-columns: 1fr;
            }

            .echoBand {
                padding: 38px 20px;
            }

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

            .echoGrid .statItem {
                padding: 12px 10px;
            }
        }

        @media (max-width: 640px) {
            .collectionGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 14px;
            }

            .categoryCard {
                padding: 18px;
            }

            .categoryMeta {
                align-items: flex-start;
                flex-direction: column;
            }

            .costLabel {
                text-align: left;
            }

            .supportLine {
                margin-left: 0;
            }

            .contactCard {
                padding: 24px 20px;
            }
        }

        @media (max-width: 420px) {
            .merchContainer {
                width: calc(100% - 32px);
            }

            .collectionGrid,
            .statsGrid,
            .echoGrid {
                grid-template-columns: 1fr;
            }

            .statItem {
                min-height: 100px;
            }

            .echoGrid .statItem {
                min-height: 92px;
            }

            .categoryMeta {
                flex-direction: row;
                align-items: center;
            }

            .categoryCard {
                padding: 20px;
            }
        }

/* digital-merchandise.html */
.siteFooter {
            background-color: var(--site-surface);
            color: var(--site-text);
            border-top: 1px solid var(--site-border);
            padding-top: 56px;
            padding-bottom: 32px;
            padding-left: 32px;
            padding-right: 32px;
        }

        .footerInner {
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
        }

        .footerGrid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
            gap: 32px;
        }

        .footerBrand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
        }

        .footerBrandIcon {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.15rem;
        }

        .footerBrandText {
            font-size: 1.15rem;
            font-weight: 700;
        }

        .footerTagline {
            margin-top: 16px;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            color: var(--site-muted);
            font-size: 0.95rem;
            max-width: 34ch;
        }

        .footerHeading {
            margin-top: 0;
            margin-bottom: 14px;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--site-muted);
        }

        .footerList {
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            display: grid;
            gap: 10px;
        }

        .footerLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            border-bottom: 1px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .footerLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .footerContactList {
            gap: 12px;
        }

        .footerContactItem {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.95rem;
            color: var(--site-muted);
        }

        .footerContactItem i {
            color: var(--site-accent);
            margin-top: 3px;
        }

        .footerNotice {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-top: 44px;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 24px;
            padding-right: 24px;
            border-top: 1px solid var(--site-border);
            border-right: 1px solid var(--site-border);
            border-bottom: 1px solid var(--site-border);
            border-left: 4px solid var(--site-accent);
            border-radius: var(--site-radius);
            background-color: var(--site-bg);
        }

        .footerBadge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: var(--site-accent);
            color: var(--site-on-accent);
            font-weight: 700;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .footerNoticeText {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
        }

        .footerDisclosure {
            margin-top: 20px;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .footerBottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 12px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid var(--site-border);
        }

        .footerCopyright,
        .footerMeta {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .cookieBanner {
            position: fixed;
            left: 16px;
            right: 16px;
            bottom: 16px;
            z-index: 60;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 18px;
            padding-bottom: 18px;
            padding-left: 22px;
            padding-right: 22px;
            background-color: var(--site-surface);
            color: var(--site-text);
            border: 1px solid var(--site-border);
            border-radius: var(--site-radius);
            box-shadow: 0 12px 28px rgba(18, 18, 15, 0.18);
        }

        .cookieText {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
            max-width: 62ch;
        }

        .cookieButton {
            border: 0;
            cursor: pointer;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 26px;
            padding-right: 26px;
            border-radius: 999px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--site-on-primary);
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            transition: transform 0.2s ease;
        }

        .cookieButton:hover {
            transform: scale(1.02);
        }

        .isHidden {
            display: none !important;
        }

        @media (max-width: 900px) {
            .footerGrid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 560px) {
            .siteFooter {
                padding-top: 40px;
                padding-bottom: 28px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .footerGrid {
                grid-template-columns: 1fr;
            }

            .footerNotice {
                flex-direction: column;
            }
        }

/* game-library.html */
:root {
            --site-bg: #FEFBE8;
            --site-surface: #F8F2CB;
            --site-text: #12120F;
            --site-muted: #3C3B34;
            --site-border: #E3DFC5;
            --site-primary: #948636;
            --site-on-primary: #000000;
            --site-secondary: #8583B1;
            --site-on-secondary: #000000;
            --site-accent: #9D62C0;
            --site-on-accent: #000000;
            --site-success: #22C55E;
            --site-warning: #F59E0B;
            --site-error: #EF4444;
            --site-info: #3B82F6;
            --site-radius: 24px;
            --color-bg: var(--site-bg);
            --color-surface: var(--site-surface);
            --color-text: var(--site-text);
            --color-muted: var(--site-muted);
            --color-border: var(--site-border);
            --color-primary: var(--site-primary);
            --color-on-primary: var(--site-on-primary);
            --color-secondary: var(--site-secondary);
            --color-on-secondary: var(--site-on-secondary);
            --color-accent: var(--site-accent);
            --color-on-accent: var(--site-on-accent);
            --color-success: var(--site-success);
            --color-warning: var(--site-warning);
            --color-error: var(--site-error);
            --color-info: var(--site-info);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --site-bg: #0E0D0B;
                --site-surface: #1A1A16;
                --site-text: #E7E5D6;
                --site-muted: #B5B2A0;
                --site-border: #2F2E2A;
                --site-primary: #DECE6E;
                --site-on-primary: #000000;
                --site-secondary: #BFBFE2;
                --site-on-secondary: #000000;
                --site-accent: #CBB6D9;
                --site-on-accent: #000000;
            }
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
            background-color: var(--site-bg);
            color: var(--site-text);
            font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
            font-weight: 400;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

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

        img {
            max-width: 100%;
            display: block;
        }

        .siteHeader {
            position: sticky;
            top: 0;
            z-index: 40;
            height: 72px;
            display: flex;
            align-items: center;
            background-color: var(--site-surface);
            border-bottom: 1px solid var(--site-border);
        }

        .headerInner {
            width: 100%;
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 32px;
            padding-right: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
            flex-shrink: 0;
        }

        .brandIcon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.2rem;
        }

        .brandStack {
            display: flex;
            flex-direction: column;
        }

        .brandText {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            line-height: 1.25;
        }

        .brandTagline {
            font-size: 0.68rem;
            color: var(--site-muted);
            line-height: 1.2;
        }

        .mainNav {
            display: flex;
            align-items: center;
        }

        .navList {
            display: flex;
            align-items: center;
            gap: 26px;
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .navLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .navLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .headerActions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .headerCta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding-top: 11px;
            padding-bottom: 11px;
            padding-left: 22px;
            padding-right: 22px;
            border-radius: 999px;
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            color: var(--site-on-primary);
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: transform 0.2s ease;
        }

        .headerCta:hover {
            transform: scale(1.02);
        }

        .navToggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--site-border);
            background-color: var(--site-bg);
            color: var(--site-text);
            font-size: 1.35rem;
            cursor: pointer;
        }

        @media (max-width: 980px) {
            .mainNav {
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                display: none;
                background-color: var(--site-surface);
                border-bottom: 1px solid var(--site-border);
                box-shadow: 0 14px 28px rgba(18, 18, 15, 0.14);
            }

            .mainNav.isOpen {
                display: block;
            }

            .navList {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding-left: 24px;
                padding-right: 24px;
                padding-top: 8px;
                padding-bottom: 16px;
            }

            .navList li {
                border-bottom: 1px solid var(--site-border);
            }

            .navLink {
                display: block;
                padding-top: 14px;
                padding-bottom: 14px;
                border-bottom: 0;
            }

            .navToggle {
                display: inline-flex;
            }

            .headerCta {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .headerInner {
                padding-left: 20px;
                padding-right: 20px;
            }

            .brandTagline {
                display: none;
            }
        }

/* game-library.html */
.gameLibrary {
            color: var(--color-text);
        }

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

        .gameLibrary a {
            color: inherit;
        }

        .gameLibrary h1,
        .gameLibrary h2,
        .gameLibrary h3,
        .gameLibrary p {
            margin-top: 0;
        }

        .gameLibrary h1,
        .gameLibrary h2,
        .gameLibrary h3 {
            font-weight: 700;
            line-height: 1.2;
        }

        .gameLibrary section {
            padding: 64px 32px;
        }

        .gameLibrary .sectionInner {
            width: 100%;
            max-width: 1180px;
            margin-right: auto;
            margin-left: auto;
        }

        .gameLibrary .eyebrow {
            margin-bottom: 12px;
            color: var(--color-primary);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .gameLibrary .sectionHeading {
            max-width: 720px;
            margin-bottom: 12px;
            font-size: clamp(1.8rem, 3vw, 2.6rem);
        }

        .gameLibrary .sectionIntro {
            max-width: 66ch;
            margin-bottom: 32px;
            color: var(--color-muted);
        }

        .gameLibrary .heroSection {
            padding-top: 52px;
            padding-bottom: 52px;
            background: var(--color-bg);
            color: var(--color-text);
        }

        .gameLibrary .heroGrid {
            display: grid;
            grid-template-columns: 1.08fr 0.92fr;
            align-items: center;
            gap: 56px;
        }

        .gameLibrary .heroCopy h1 {
            max-width: 12ch;
            margin-bottom: 18px;
            font-size: clamp(2.6rem, 5.4vw, 4.6rem);
            letter-spacing: -0.045em;
        }

        .gameLibrary .heroCopy > p:not(.eyebrow) {
            max-width: 58ch;
            margin-bottom: 24px;
            color: var(--color-muted);
            font-size: 1.08rem;
        }

        .gameLibrary .heroShortLine {
            margin-top: -12px;
            margin-bottom: 26px;
            color: var(--color-text);
            font-weight: 600;
        }

        .gameLibrary .heroActions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px;
        }

        .gameLibrary .primaryButton,
        .gameLibrary .secondaryButton {
            display: inline-flex;
            min-height: 48px;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 12px 22px;
            border: 1px solid transparent;
            border-radius: 999px;
            font-size: 0.94rem;
            font-weight: 700;
            text-align: center;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .gameLibrary .primaryButton {
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: var(--color-on-primary);
        }

        .gameLibrary .secondaryButton {
            border-color: var(--color-border);
            background: var(--color-surface);
            color: var(--color-text);
        }

        .gameLibrary .primaryButton:hover,
        .gameLibrary .secondaryButton:hover {
            transform: scale(1.02);
        }

        .gameLibrary .heroImageFrame {
            overflow: hidden;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .gameLibrary .heroImageFrame img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 3 / 2;
            object-fit: cover;
        }

        .gameLibrary .imageCaption {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 18px;
            color: var(--color-muted);
            font-size: 0.88rem;
        }

        .gameLibrary .imageCaption i {
            color: var(--color-accent);
        }

        .gameLibrary .statsBand {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            width: 100%;
            gap: 0;
            padding: 56px 32px;
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .gameLibrary .stat {
            display: flex;
            min-width: 0;
            flex-direction: column;
            align-items: center;
            padding: 12px 22px;
            border-left: 2px solid currentColor;
            text-align: center;
        }

        .gameLibrary .stat:first-child {
            border-left: 0;
        }

        .gameLibrary .statNumber {
            font-size: clamp(3rem, 6vw, 4.5rem);
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
        }

        .gameLibrary .statCaption {
            max-width: 22ch;
            margin-top: 12px;
            font-size: 0.95rem;
            line-height: 1.35;
        }

        .gameLibrary .filterSection {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .gameLibrary .filterPanel {
            display: grid;
            grid-template-columns: minmax(220px, 1.25fr) minmax(240px, 1fr) minmax(190px, 0.75fr);
            align-items: end;
            gap: 22px;
            padding: 24px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-bg);
            color: var(--color-text);
        }

        .gameLibrary .filterSearch {
            grid-column: 1 / -1;
        }

        .gameLibrary .filterPanel label,
        .gameLibrary .filterPanel legend {
            display: block;
            margin-bottom: 9px;
            color: var(--color-text);
            font-size: 0.88rem;
            font-weight: 700;
        }

        .gameLibrary .filterPanel input,
        .gameLibrary .filterPanel select {
            width: 100%;
            min-height: 48px;
            padding: 11px 14px;
            border: 1px solid var(--color-border);
            border-radius: 12px;
            background: var(--color-bg);
            color: var(--color-text);
            font: inherit;
        }

        .gameLibrary .filterPanel input::placeholder {
            color: var(--color-muted);
            opacity: 1;
        }

        .gameLibrary .genreShortcuts {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .gameLibrary .filterChip {
            display: inline-flex;
            align-items: center;
            min-height: 36px;
            padding: 7px 13px;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            background: var(--color-surface);
            color: var(--color-text);
            font-size: 0.84rem;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
        }

        .gameLibrary .filterChip:hover {
            border-color: var(--color-primary);
        }

        .gameLibrary .modeFieldset {
            min-width: 0;
            margin: 0;
            padding: 0;
            border: 0;
        }

        .gameLibrary .modeOptions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .gameLibrary .modeOptions label {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin: 0;
            font-weight: 400;
        }

        .gameLibrary .modeOptions input {
            width: 16px;
            min-height: 16px;
            accent-color: var(--color-primary);
        }

        .gameLibrary .filterDetails {
            display: none;
        }

        .gameLibrary .genreSection {
            background: var(--color-bg);
            color: var(--color-text);
        }

        .gameLibrary .genreGrid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
        }

        .gameLibrary .genreCard,
        .gameLibrary .additionCard {
            height: auto;
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            box-shadow: 0 5px 18px rgba(18, 18, 15, 0.07);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .gameLibrary .genreCard:hover,
        .gameLibrary .additionCard:hover {
            transform: scale(1.02);
            box-shadow: 0 9px 24px rgba(18, 18, 15, 0.11);
        }

        .gameLibrary .genreCard {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 24px;
        }

        .gameLibrary .iconCircle {
            display: inline-flex;
            width: 46px;
            height: 46px;
            flex: 0 0 46px;
            align-items: center;
            justify-content: center;
            margin-bottom: 17px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--color-accent) 15%, transparent);
            color: var(--color-accent);
            font-size: 1.2rem;
        }

        .gameLibrary .genreCard h3 {
            margin-bottom: 9px;
            font-size: 1.25rem;
        }

        .gameLibrary .genreCard p {
            margin-bottom: 17px;
            color: var(--color-muted);
            line-height: 1.55;
        }

        .gameLibrary .titleCount {
            margin-top: auto;
            margin-bottom: 18px;
            color: var(--color-muted);
            font-size: 0.84rem;
            font-weight: 600;
        }

        .gameLibrary .textLink {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--color-primary);
            font-weight: 700;
            text-decoration: none;
        }

        .gameLibrary .textLink:hover {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .gameLibrary .genreShortLine {
            margin-bottom: 0;
            color: var(--color-muted);
            font-weight: 600;
        }

        .gameLibrary .additionsSection {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .gameLibrary .additionGrid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            align-items: stretch;
            gap: 20px;
        }

        .gameLibrary .additionCard {
            display: flex;
            flex-direction: column;
            padding: 24px;
        }

        .gameLibrary .additionMeta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 18px;
        }

        .gameLibrary .metaTag {
            display: inline-flex;
            align-items: center;
            padding: 6px 10px;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            background: var(--color-bg);
            color: var(--color-muted);
            font-size: 0.76rem;
            font-weight: 600;
        }

        .gameLibrary .additionCard h3 {
            margin-bottom: 10px;
            font-size: 1.35rem;
        }

        .gameLibrary .additionCard p {
            margin-bottom: 22px;
            color: var(--color-muted);
            line-height: 1.6;
        }

        .gameLibrary .additionCard .textLink {
            margin-top: auto;
        }

        .gameLibrary .accessSection {
            background: var(--color-bg);
            color: var(--color-text);
        }

        .gameLibrary .accessCopy {
            max-width: 720px;
            margin-right: auto;
            margin-left: auto;
        }

        .gameLibrary .accessCopy p {
            color: var(--color-muted);
            line-height: 1.75;
        }

        .gameLibrary .accessCallout {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-top: 24px;
            padding: 22px;
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-primary);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .gameLibrary .accessCallout .iconCircle {
            margin: 0;
            background: color-mix(in srgb, var(--color-primary) 15%, transparent);
            color: var(--color-primary);
        }

        .gameLibrary .accessCallout p {
            margin-bottom: 0;
        }

        .gameLibrary .accessLinks {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 22px;
        }

        .gameLibrary .echoBand {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            padding: 40px 32px;
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .gameLibrary .echoBand .statNumber {
            font-size: clamp(2.5rem, 5vw, 3.5rem);
        }

        .gameLibrary .contactSection {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .gameLibrary .contactInner {
            max-width: 760px;
            margin: 0 auto;
            text-align: center;
        }

        .gameLibrary .contactInner > p:not(.eyebrow) {
            max-width: 58ch;
            margin-right: auto;
            margin-bottom: 28px;
            margin-left: auto;
            color: var(--color-muted);
        }

        .gameLibrary .contactForm {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            padding: 24px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-bg);
            color: var(--color-text);
            text-align: left;
        }

        .gameLibrary .contactForm label {
            display: block;
            margin-bottom: 7px;
            font-size: 0.88rem;
            font-weight: 700;
        }

        .gameLibrary .contactForm input,
        .gameLibrary .contactForm textarea {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--color-border);
            border-radius: 12px;
            background: var(--color-bg);
            color: var(--color-text);
            font: inherit;
        }

        .gameLibrary .contactForm input {
            min-height: 48px;
        }

        .gameLibrary .contactForm textarea {
            min-height: 110px;
            resize: vertical;
        }

        .gameLibrary .contactMessage,
        .gameLibrary .contactSubmit {
            grid-column: 1 / -1;
        }

        .gameLibrary .contactSubmit {
            justify-self: center;
            margin-top: 4px;
        }

        .gameLibrary :focus-visible {
            outline: 3px solid var(--color-info);
            outline-offset: 3px;
        }

        @media (max-width: 768px) {
            .gameLibrary section {
                padding: 48px 20px;
            }

            .gameLibrary .heroGrid {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .gameLibrary .heroCopy h1 {
                max-width: 14ch;
            }

            .gameLibrary .statsBand {
                grid-template-columns: repeat(2, 1fr);
                row-gap: 34px;
                padding: 44px 20px;
            }

            .gameLibrary .stat {
                border-left: 0;
            }

            .gameLibrary .filterPanel {
                grid-template-columns: 1fr 1fr;
            }

            .gameLibrary .filterSearch {
                position: sticky;
                top: 72px;
                z-index: 2;
                grid-column: 1 / -1;
                padding: 10px;
                border-radius: 14px;
                background: var(--color-bg);
            }

            .gameLibrary .filterDetails {
                display: block;
                grid-column: 1 / -1;
            }

            .gameLibrary .filterDetails summary {
                width: fit-content;
                padding: 9px 15px;
                border: 1px solid var(--color-border);
                border-radius: 999px;
                background: var(--color-surface);
                color: var(--color-text);
                font-weight: 700;
                cursor: pointer;
            }

            .gameLibrary .filterDetails[open] .filterPanelInner {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 18px;
                padding-top: 18px;
            }

            .gameLibrary .filterDetails .genreShortcuts {
                overflow-x: auto;
                flex-wrap: nowrap;
                padding: 2px 2px 10px;
                scrollbar-width: thin;
            }

            .gameLibrary .filterDetails .modeFieldset,
            .gameLibrary .filterDetails .regionField {
                grid-column: 1 / -1;
            }

            .gameLibrary .genreGrid,
            .gameLibrary .additionGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px) {
            .gameLibrary .filterPanel {
                display: block;
                padding: 16px;
            }

            .gameLibrary .filterSearch {
                margin-bottom: 14px;
            }

            .gameLibrary .filterPanel > .filterPanelInner {
                display: none;
            }

            .gameLibrary .filterPanel:has(.filterDetails[open]) > .filterPanelInner {
                display: grid;
                gap: 18px;
                padding-top: 18px;
            }

            .gameLibrary .filterDetails {
                margin-bottom: 0;
            }

            .gameLibrary .genreGrid,
            .gameLibrary .additionGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .gameLibrary .echoBand {
                padding: 36px 20px;
            }

            .gameLibrary .contactForm {
                padding: 18px;
            }
        }

        @media (max-width: 420px) {
            .gameLibrary .heroActions {
                align-items: stretch;
                flex-direction: column;
            }

            .gameLibrary .heroActions a {
                width: 100%;
            }

            .gameLibrary .statsBand,
            .gameLibrary .echoBand,
            .gameLibrary .genreGrid,
            .gameLibrary .additionGrid {
                grid-template-columns: 1fr;
            }

            .gameLibrary .stat {
                padding: 10px 8px;
            }

            .gameLibrary .statNumber {
                font-size: 2.5rem;
            }

            .gameLibrary .echoBand .statNumber {
                font-size: 2.5rem;
            }

            .gameLibrary .filterDetails[open] .filterPanelInner,
            .gameLibrary .filterPanel:has(.filterDetails[open]) > .filterPanelInner {
                grid-template-columns: 1fr;
            }

            .gameLibrary .contactForm {
                grid-template-columns: 1fr;
            }

            .gameLibrary .contactForm > div {
                grid-column: 1 / -1;
            }
        }

/* game-library.html */
.siteFooter {
            background-color: var(--site-surface);
            color: var(--site-text);
            border-top: 1px solid var(--site-border);
            padding-top: 56px;
            padding-bottom: 32px;
            padding-left: 32px;
            padding-right: 32px;
        }

        .footerInner {
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
        }

        .footerGrid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
            gap: 32px;
        }

        .footerBrand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
        }

        .footerBrandIcon {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.15rem;
        }

        .footerBrandText {
            font-size: 1.15rem;
            font-weight: 700;
        }

        .footerTagline {
            margin-top: 16px;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            color: var(--site-muted);
            font-size: 0.95rem;
            max-width: 34ch;
        }

        .footerHeading {
            margin-top: 0;
            margin-bottom: 14px;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--site-muted);
        }

        .footerList {
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            display: grid;
            gap: 10px;
        }

        .footerLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            border-bottom: 1px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .footerLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .footerContactList {
            gap: 12px;
        }

        .footerContactItem {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.95rem;
            color: var(--site-muted);
        }

        .footerContactItem i {
            color: var(--site-accent);
            margin-top: 3px;
        }

        .footerNotice {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-top: 44px;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 24px;
            padding-right: 24px;
            border-top: 1px solid var(--site-border);
            border-right: 1px solid var(--site-border);
            border-bottom: 1px solid var(--site-border);
            border-left: 4px solid var(--site-accent);
            border-radius: var(--site-radius);
            background-color: var(--site-bg);
        }

        .footerBadge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: var(--site-accent);
            color: var(--site-on-accent);
            font-weight: 700;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .footerNoticeText {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
        }

        .footerDisclosure {
            margin-top: 20px;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .footerBottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 12px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid var(--site-border);
        }

        .footerCopyright,
        .footerMeta {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .cookieBanner {
            position: fixed;
            left: 16px;
            right: 16px;
            bottom: 16px;
            z-index: 60;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 18px;
            padding-bottom: 18px;
            padding-left: 22px;
            padding-right: 22px;
            background-color: var(--site-surface);
            color: var(--site-text);
            border: 1px solid var(--site-border);
            border-radius: var(--site-radius);
            box-shadow: 0 12px 28px rgba(18, 18, 15, 0.18);
        }

        .cookieText {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
            max-width: 62ch;
        }

        .cookieButton {
            border: 0;
            cursor: pointer;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 26px;
            padding-right: 26px;
            border-radius: 999px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--site-on-primary);
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            transition: transform 0.2s ease;
        }

        .cookieButton:hover {
            transform: scale(1.02);
        }

        .isHidden {
            display: none !important;
        }

        @media (max-width: 900px) {
            .footerGrid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 560px) {
            .siteFooter {
                padding-top: 40px;
                padding-bottom: 28px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .footerGrid {
                grid-template-columns: 1fr;
            }

            .footerNotice {
                flex-direction: column;
            }
        }

/* index.html */
:root {
            --site-bg: #FEFBE8;
            --site-surface: #F8F2CB;
            --site-text: #12120F;
            --site-muted: #3C3B34;
            --site-border: #E3DFC5;
            --site-primary: #948636;
            --site-on-primary: #000000;
            --site-secondary: #8583B1;
            --site-on-secondary: #000000;
            --site-accent: #9D62C0;
            --site-on-accent: #000000;
            --site-success: #22C55E;
            --site-warning: #F59E0B;
            --site-error: #EF4444;
            --site-info: #3B82F6;
            --site-radius: 24px;
            --color-bg: var(--site-bg);
            --color-surface: var(--site-surface);
            --color-text: var(--site-text);
            --color-muted: var(--site-muted);
            --color-border: var(--site-border);
            --color-primary: var(--site-primary);
            --color-on-primary: var(--site-on-primary);
            --color-secondary: var(--site-secondary);
            --color-on-secondary: var(--site-on-secondary);
            --color-accent: var(--site-accent);
            --color-on-accent: var(--site-on-accent);
            --color-success: var(--site-success);
            --color-warning: var(--site-warning);
            --color-error: var(--site-error);
            --color-info: var(--site-info);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --site-bg: #0E0D0B;
                --site-surface: #1A1A16;
                --site-text: #E7E5D6;
                --site-muted: #B5B2A0;
                --site-border: #2F2E2A;
                --site-primary: #DECE6E;
                --site-on-primary: #000000;
                --site-secondary: #BFBFE2;
                --site-on-secondary: #000000;
                --site-accent: #CBB6D9;
                --site-on-accent: #000000;
            }
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
            background-color: var(--site-bg);
            color: var(--site-text);
            font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
            font-weight: 400;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

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

        img {
            max-width: 100%;
            display: block;
        }

        .siteHeader {
            position: sticky;
            top: 0;
            z-index: 40;
            height: 72px;
            display: flex;
            align-items: center;
            background-color: var(--site-surface);
            border-bottom: 1px solid var(--site-border);
        }

        .headerInner {
            width: 100%;
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 32px;
            padding-right: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
            flex-shrink: 0;
        }

        .brandIcon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.2rem;
        }

        .brandStack {
            display: flex;
            flex-direction: column;
        }

        .brandText {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            line-height: 1.25;
        }

        .brandTagline {
            font-size: 0.68rem;
            color: var(--site-muted);
            line-height: 1.2;
        }

        .mainNav {
            display: flex;
            align-items: center;
        }

        .navList {
            display: flex;
            align-items: center;
            gap: 26px;
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .navLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .navLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .headerActions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .headerCta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding-top: 11px;
            padding-bottom: 11px;
            padding-left: 22px;
            padding-right: 22px;
            border-radius: 999px;
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            color: var(--site-on-primary);
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: transform 0.2s ease;
        }

        .headerCta:hover {
            transform: scale(1.02);
        }

        .navToggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--site-border);
            background-color: var(--site-bg);
            color: var(--site-text);
            font-size: 1.35rem;
            cursor: pointer;
        }

        @media (max-width: 980px) {
            .mainNav {
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                display: none;
                background-color: var(--site-surface);
                border-bottom: 1px solid var(--site-border);
                box-shadow: 0 14px 28px rgba(18, 18, 15, 0.14);
            }

            .mainNav.isOpen {
                display: block;
            }

            .navList {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding-left: 24px;
                padding-right: 24px;
                padding-top: 8px;
                padding-bottom: 16px;
            }

            .navList li {
                border-bottom: 1px solid var(--site-border);
            }

            .navLink {
                display: block;
                padding-top: 14px;
                padding-bottom: 14px;
                border-bottom: 0;
            }

            .navToggle {
                display: inline-flex;
            }

            .headerCta {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .headerInner {
                padding-left: 20px;
                padding-right: 20px;
            }

            .brandTagline {
                display: none;
            }
        }

/* index.html */
.homePage {
            color: var(--color-text);
            overflow: hidden;
        }

        .homeContainer {
            width: min(1240px, calc(100% - 64px));
            margin-inline: auto;
        }

        .homeHero {
            display: grid;
            grid-template-columns: 1.08fr 0.92fr;
            align-items: center;
            gap: 52px;
            padding-block: 54px 58px;
        }

        .heroCopy {
            max-width: 610px;
        }

        .heroEyebrow,
        .sectionEyebrow {
            margin: 0 0 14px;
            color: var(--color-primary);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .heroCopy h1 {
            max-width: 11ch;
            margin: 0;
            font-size: clamp(2.65rem, 5vw, 4.7rem);
            letter-spacing: -0.045em;
            line-height: 1.04;
        }

        .heroSubhead {
            max-width: 56ch;
            margin: 22px 0 28px;
            color: var(--color-muted);
            font-size: 1.08rem;
            line-height: 1.75;
        }

        .heroActions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 16px;
        }

        .primaryButton,
        .cardButton,
        .submitButton {
            display: inline-flex;
            min-height: 50px;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border: 0;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: var(--color-on-primary);
            font: inherit;
            font-size: 0.93rem;
            font-weight: 700;
            padding: 13px 23px;
            text-align: center;
            text-decoration: none;
            transition: transform 180ms ease, box-shadow 180ms ease;
            cursor: pointer;
        }

        .primaryButton:hover,
        .cardButton:hover,
        .submitButton:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 22px rgba(18, 18, 15, 0.13);
        }

        .textLink {
            color: var(--color-text);
            font-size: 0.94rem;
            font-weight: 700;
            text-decoration-thickness: 1px;
            text-underline-offset: 4px;
        }

        .textLink:hover {
            color: var(--color-primary);
        }

        .heroImageFrame {
            position: relative;
            padding: 12px;
            border: 1px solid var(--color-border);
            border-radius: 30px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .heroImageFrame::after {
            position: absolute;
            z-index: 0;
            right: -13px;
            bottom: -13px;
            width: 42%;
            height: 42%;
            border-right: 3px solid var(--color-accent);
            border-bottom: 3px solid var(--color-accent);
            border-radius: 0 0 28px 0;
            content: "";
            pointer-events: none;
        }

        .heroImage {
            position: relative;
            z-index: 1;
            width: 100%;
            height: auto;
            aspect-ratio: 1.48;
            border-radius: 21px;
            object-fit: cover;
        }

        .homeStats {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            padding: 54px max(32px, calc((100vw - 1240px) / 2)) 58px;
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .statsHeading {
            margin: 0 auto 34px;
            text-align: center;
        }

        .statsHeading h2 {
            margin: 0;
            font-size: clamp(1.6rem, 3vw, 2.3rem);
        }

        .statsHeading p {
            margin: 9px 0 0;
            font-size: 0.96rem;
        }

        .statsGrid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            width: min(1240px, 100%);
            margin-inline: auto;
        }

        .statItem {
            display: flex;
            min-width: 0;
            flex-direction: column;
            align-items: center;
            border-left: 2px solid currentColor;
            padding: 12px 24px;
            text-align: center;
        }

        .statItem:first-child {
            border-left: 0;
        }

        .statNumber {
            font-size: clamp(3rem, 6vw, 4.5rem);
            font-weight: 700;
            letter-spacing: -0.045em;
            line-height: 1;
            white-space: nowrap;
        }

        .statCaption {
            max-width: 22ch;
            margin-top: 12px;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .featuredSection {
            padding-block: 72px 78px;
        }

        .sectionIntro {
            max-width: 690px;
            margin-bottom: 30px;
        }

        .sectionIntro h2,
        .aboutContent h2,
        .testimonialsHeading h2,
        .contactIntro h2 {
            margin: 0;
            font-size: clamp(1.8rem, 3.4vw, 2.7rem);
            letter-spacing: -0.03em;
        }

        .sectionIntro p:last-child {
            margin: 12px 0 0;
            color: var(--color-muted);
        }

        .worldGrid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            grid-auto-rows: minmax(180px, auto);
            gap: 22px;
        }

        .worldCard {
            display: flex;
            min-width: 0;
            flex-direction: column;
            align-items: flex-start;
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            padding: 25px 24px 23px;
            box-shadow: 0 8px 24px rgba(18, 18, 15, 0.07);
            transition: transform 180ms ease, box-shadow 180ms ease;
        }

        .worldCard:hover {
            transform: scale(1.02);
            box-shadow: 0 13px 29px rgba(18, 18, 15, 0.12);
        }

        .genreTag {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            background: var(--color-bg);
            color: var(--color-muted);
            padding: 5px 11px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.02em;
        }

        .worldCard h3 {
            margin: 17px 0 8px;
            font-size: 1.25rem;
        }

        .worldCard p {
            margin: 0 0 20px;
            color: var(--color-muted);
            font-size: 0.94rem;
            line-height: 1.65;
        }

        .cardButton {
            min-height: 42px;
            margin-top: auto;
            padding: 10px 17px;
            font-size: 0.86rem;
        }

        .aboutSection {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            background: var(--color-surface);
            color: var(--color-text);
            padding: 58px 20px 62px;
        }

        .aboutContent {
            max-width: 720px;
            margin-inline: auto;
        }

        .aboutContent p {
            margin: 16px 0 0;
            color: var(--color-muted);
            font-size: 1.05rem;
            line-height: 1.8;
        }

        .aboutContent .textLink {
            display: inline-block;
            margin-top: 19px;
        }

        .testimonialsSection {
            padding-block: 72px 76px;
        }

        .testimonialsHeading {
            margin-bottom: 28px;
        }

        .testimonialsHeading p {
            margin: 11px 0 0;
            color: var(--color-muted);
        }

        .testimonialGrid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 22px;
        }

        .quoteCard {
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            padding: 26px;
            box-shadow: 0 8px 24px rgba(18, 18, 15, 0.06);
        }

        .ratingRow {
            display: flex;
            gap: 7px;
            margin-bottom: 17px;
        }

        .ratingIcon {
            display: inline-flex;
            width: 31px;
            height: 31px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(157, 98, 192, 0.16);
            color: var(--color-accent);
            font-size: 0.88rem;
        }

        .quoteCard blockquote {
            margin: 0;
            font-size: 1.02rem;
            line-height: 1.7;
        }

        .quoteCard .quoteShort {
            font-size: 1.17rem;
        }

        .quoteAttribution {
            margin: 18px 0 0;
            color: var(--color-muted);
            font-size: 0.9rem;
            font-weight: 700;
        }

        .echoStats {
            padding: 42px 32px 46px;
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .echoHeading {
            margin: 0 auto 26px;
            text-align: center;
        }

        .echoHeading h2 {
            margin: 0;
            font-size: clamp(1.55rem, 3vw, 2.15rem);
        }

        .echoHeading p {
            margin: 8px 0 0;
            font-size: 0.94rem;
        }

        .echoGrid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            width: min(1000px, 100%);
            margin-inline: auto;
        }

        .echoGrid .statNumber {
            font-size: clamp(2.5rem, 5vw, 3.5rem);
        }

        .contactSection {
            padding: 70px 20px 78px;
        }

        .contactInner {
            width: min(560px, 100%);
            margin-inline: auto;
        }

        .contactIntro {
            margin-bottom: 25px;
            text-align: center;
        }

        .contactIntro p {
            margin: 12px 0 0;
            color: var(--color-muted);
            line-height: 1.65;
        }

        .contactForm {
            display: grid;
            gap: 16px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            padding: 25px;
        }

        .formField {
            display: grid;
            gap: 7px;
        }

        .formField label {
            font-size: 0.88rem;
            font-weight: 700;
        }

        .formField input,
        .formField select,
        .formField textarea {
            width: 100%;
            border: 1px solid var(--color-border);
            border-radius: 12px;
            background: var(--color-bg);
            color: var(--color-text);
            font: inherit;
            padding: 12px 13px;
        }

        .formField textarea {
            min-height: 120px;
            resize: vertical;
        }

        .formField input:focus,
        .formField select:focus,
        .formField textarea:focus {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }

        .submitButton {
            width: 100%;
            margin-top: 3px;
        }

        .formConfirmation {
            min-height: 1.4em;
            margin: 0;
            color: var(--color-muted);
            font-size: 0.88rem;
            text-align: center;
        }

        .contactDetails {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px 24px;
            margin-top: 23px;
        }

        .contactDetail {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--color-text);
            font-size: 0.92rem;
            text-decoration: none;
        }

        .contactDetail:hover {
            color: var(--color-primary);
        }

        .contactIcon {
            display: inline-flex;
            width: 34px;
            height: 34px;
            flex: 0 0 34px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(157, 98, 192, 0.16);
            color: var(--color-accent);
        }

        @media (max-width: 768px) {
            .homeContainer {
                width: calc(100% - 40px);
            }

            .homeHero {
                grid-template-columns: 1fr;
                gap: 30px;
                padding-block: 40px;
            }

            .heroCopy {
                max-width: 100%;
            }

            .heroCopy h1 {
                max-width: 13ch;
            }

            .heroActions {
                align-items: stretch;
                flex-direction: column;
                gap: 12px;
            }

            .heroActions .primaryButton {
                width: 100%;
            }

            .heroActions .textLink {
                padding-block: 5px;
                text-align: center;
            }

            .homeStats {
                padding: 46px 20px;
            }

            .statsGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                row-gap: 30px;
            }

            .statItem,
            .statItem:first-child {
                border-left: 0;
            }

            .featuredSection,
            .testimonialsSection {
                padding-block: 54px;
            }

            .testimonialGrid {
                grid-template-columns: 1fr;
            }

            .echoStats {
                padding-inline: 20px;
            }
        }

        @media (max-width: 640px) {
            .worldGrid {
                grid-template-columns: 1fr;
            }

            .worldCard:hover {
                transform: none;
            }

            .worldCard {
                padding: 23px 21px;
            }
        }

        @media (max-width: 560px) {
            .contactForm {
                padding: 20px;
            }

            .submitButton {
                width: 100%;
            }
        }

        @media (max-width: 420px) {
            .homeContainer {
                width: calc(100% - 40px);
            }

            .statsGrid,
            .echoGrid {
                grid-template-columns: 1fr;
                gap: 25px;
            }

            .statItem {
                padding: 8px 12px;
            }

            .statsHeading {
                margin-bottom: 26px;
            }

            .echoStats {
                padding-block: 38px;
            }

            .echoGrid .statNumber {
                font-size: 2.5rem;
            }

            .contactDetails {
                align-items: flex-start;
                flex-direction: column;
                width: fit-content;
                margin-inline: auto;
            }
        }

        @media (hover: none) {
            .worldCard:hover {
                transform: none;
                box-shadow: 0 8px 24px rgba(18, 18, 15, 0.07);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .homePage *,
            .homePage *::before,
            .homePage *::after {
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
            }
        }

/* index.html */
.siteFooter {
            background-color: var(--site-surface);
            color: var(--site-text);
            border-top: 1px solid var(--site-border);
            padding-top: 56px;
            padding-bottom: 32px;
            padding-left: 32px;
            padding-right: 32px;
        }

        .footerInner {
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
        }

        .footerGrid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
            gap: 32px;
        }

        .footerBrand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
        }

        .footerBrandIcon {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.15rem;
        }

        .footerBrandText {
            font-size: 1.15rem;
            font-weight: 700;
        }

        .footerTagline {
            margin-top: 16px;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            color: var(--site-muted);
            font-size: 0.95rem;
            max-width: 34ch;
        }

        .footerHeading {
            margin-top: 0;
            margin-bottom: 14px;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--site-muted);
        }

        .footerList {
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            display: grid;
            gap: 10px;
        }

        .footerLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            border-bottom: 1px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .footerLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .footerContactList {
            gap: 12px;
        }

        .footerContactItem {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.95rem;
            color: var(--site-muted);
        }

        .footerContactItem i {
            color: var(--site-accent);
            margin-top: 3px;
        }

        .footerNotice {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-top: 44px;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 24px;
            padding-right: 24px;
            border-top: 1px solid var(--site-border);
            border-right: 1px solid var(--site-border);
            border-bottom: 1px solid var(--site-border);
            border-left: 4px solid var(--site-accent);
            border-radius: var(--site-radius);
            background-color: var(--site-bg);
        }

        .footerBadge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: var(--site-accent);
            color: var(--site-on-accent);
            font-weight: 700;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .footerNoticeText {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
        }

        .footerDisclosure {
            margin-top: 20px;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .footerBottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 12px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid var(--site-border);
        }

        .footerCopyright,
        .footerMeta {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .cookieBanner {
            position: fixed;
            left: 16px;
            right: 16px;
            bottom: 16px;
            z-index: 60;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 18px;
            padding-bottom: 18px;
            padding-left: 22px;
            padding-right: 22px;
            background-color: var(--site-surface);
            color: var(--site-text);
            border: 1px solid var(--site-border);
            border-radius: var(--site-radius);
            box-shadow: 0 12px 28px rgba(18, 18, 15, 0.18);
        }

        .cookieText {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
            max-width: 62ch;
        }

        .cookieButton {
            border: 0;
            cursor: pointer;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 26px;
            padding-right: 26px;
            border-radius: 999px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--site-on-primary);
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            transition: transform 0.2s ease;
        }

        .cookieButton:hover {
            transform: scale(1.02);
        }

        .isHidden {
            display: none !important;
        }

        @media (max-width: 900px) {
            .footerGrid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 560px) {
            .siteFooter {
                padding-top: 40px;
                padding-bottom: 28px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .footerGrid {
                grid-template-columns: 1fr;
            }

            .footerNotice {
                flex-direction: column;
            }
        }

/* membership-plans.html */
:root {
            --site-bg: #FEFBE8;
            --site-surface: #F8F2CB;
            --site-text: #12120F;
            --site-muted: #3C3B34;
            --site-border: #E3DFC5;
            --site-primary: #948636;
            --site-on-primary: #000000;
            --site-secondary: #8583B1;
            --site-on-secondary: #000000;
            --site-accent: #9D62C0;
            --site-on-accent: #000000;
            --site-success: #22C55E;
            --site-warning: #F59E0B;
            --site-error: #EF4444;
            --site-info: #3B82F6;
            --site-radius: 24px;
            --color-bg: var(--site-bg);
            --color-surface: var(--site-surface);
            --color-text: var(--site-text);
            --color-muted: var(--site-muted);
            --color-border: var(--site-border);
            --color-primary: var(--site-primary);
            --color-on-primary: var(--site-on-primary);
            --color-secondary: var(--site-secondary);
            --color-on-secondary: var(--site-on-secondary);
            --color-accent: var(--site-accent);
            --color-on-accent: var(--site-on-accent);
            --color-success: var(--site-success);
            --color-warning: var(--site-warning);
            --color-error: var(--site-error);
            --color-info: var(--site-info);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --site-bg: #0E0D0B;
                --site-surface: #1A1A16;
                --site-text: #E7E5D6;
                --site-muted: #B5B2A0;
                --site-border: #2F2E2A;
                --site-primary: #DECE6E;
                --site-on-primary: #000000;
                --site-secondary: #BFBFE2;
                --site-on-secondary: #000000;
                --site-accent: #CBB6D9;
                --site-on-accent: #000000;
            }
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
            background-color: var(--site-bg);
            color: var(--site-text);
            font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
            font-weight: 400;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

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

        img {
            max-width: 100%;
            display: block;
        }

        .siteHeader {
            position: sticky;
            top: 0;
            z-index: 40;
            height: 72px;
            display: flex;
            align-items: center;
            background-color: var(--site-surface);
            border-bottom: 1px solid var(--site-border);
        }

        .headerInner {
            width: 100%;
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 32px;
            padding-right: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
            flex-shrink: 0;
        }

        .brandIcon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.2rem;
        }

        .brandStack {
            display: flex;
            flex-direction: column;
        }

        .brandText {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            line-height: 1.25;
        }

        .brandTagline {
            font-size: 0.68rem;
            color: var(--site-muted);
            line-height: 1.2;
        }

        .mainNav {
            display: flex;
            align-items: center;
        }

        .navList {
            display: flex;
            align-items: center;
            gap: 26px;
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .navLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .navLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .headerActions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .headerCta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding-top: 11px;
            padding-bottom: 11px;
            padding-left: 22px;
            padding-right: 22px;
            border-radius: 999px;
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            color: var(--site-on-primary);
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: transform 0.2s ease;
        }

        .headerCta:hover {
            transform: scale(1.02);
        }

        .navToggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--site-border);
            background-color: var(--site-bg);
            color: var(--site-text);
            font-size: 1.35rem;
            cursor: pointer;
        }

        @media (max-width: 980px) {
            .mainNav {
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                display: none;
                background-color: var(--site-surface);
                border-bottom: 1px solid var(--site-border);
                box-shadow: 0 14px 28px rgba(18, 18, 15, 0.14);
            }

            .mainNav.isOpen {
                display: block;
            }

            .navList {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding-left: 24px;
                padding-right: 24px;
                padding-top: 8px;
                padding-bottom: 16px;
            }

            .navList li {
                border-bottom: 1px solid var(--site-border);
            }

            .navLink {
                display: block;
                padding-top: 14px;
                padding-bottom: 14px;
                border-bottom: 0;
            }

            .navToggle {
                display: inline-flex;
            }

            .headerCta {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .headerInner {
                padding-left: 20px;
                padding-right: 20px;
            }

            .brandTagline {
                display: none;
            }
        }

/* membership-plans.html */
.membershipPage {
            background: var(--color-bg);
            color: var(--color-text);
        }

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

        .pageWrap {
            width: min(1160px, calc(100% - 48px));
            margin: 0 auto;
        }

        .heroSection {
            display: grid;
            grid-template-columns: 1.08fr 0.92fr;
            align-items: center;
            gap: 56px;
            padding: 56px 0 64px;
        }

        .eyebrow {
            margin: 0 0 14px;
            color: var(--color-primary);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .heroCopy h1 {
            max-width: 620px;
            margin: 0;
            font-size: clamp(2.45rem, 5vw, 4.25rem);
            letter-spacing: -0.045em;
            line-height: 1.06;
        }

        .heroCopy > p:not(.eyebrow) {
            max-width: 570px;
            margin: 20px 0 26px;
            color: var(--color-muted);
            font-size: 1.08rem;
            line-height: 1.75;
        }

        .primaryButton,
        .tierButton {
            display: inline-flex;
            min-height: 50px;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 12px 23px;
            border: 0;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: var(--color-on-primary);
            font: inherit;
            font-weight: 700;
            text-align: center;
            text-decoration: none;
            transition: transform 180ms ease, filter 180ms ease;
        }

        .primaryButton:hover,
        .tierButton:hover {
            transform: scale(1.02);
            filter: brightness(1.03);
        }

        .primaryButton:focus-visible,
        .tierButton:focus-visible,
        .textLink:focus-visible,
        .questionForm input:focus-visible,
        .questionForm textarea:focus-visible,
        .questionForm select:focus-visible {
            outline: 3px solid var(--color-secondary);
            outline-offset: 3px;
        }

        .heroImage {
            position: relative;
            overflow: hidden;
            min-height: 330px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
        }

        .heroImage img {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 330px;
            object-fit: cover;
        }

        .heroImage figcaption {
            position: absolute;
            right: 16px;
            bottom: 16px;
            left: 16px;
            width: fit-content;
            max-width: calc(100% - 32px);
            padding: 10px 14px;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            background: var(--color-bg);
            color: var(--color-text);
            font-size: 0.85rem;
            font-weight: 600;
        }

        .statsBand {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            width: 100%;
            padding: 64px max(24px, calc((100% - 1160px) / 2));
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .statItem {
            display: flex;
            min-width: 0;
            flex-direction: column;
            align-items: center;
            padding: 12px 20px;
            border-left: 2px solid currentColor;
            text-align: center;
        }

        .statItem:first-child {
            border-left: 0;
        }

        .statNumber {
            font-size: clamp(3rem, 6vw, 4.5rem);
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
        }

        .statCaption {
            max-width: 22ch;
            margin-top: 12px;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .contentSection {
            padding: 64px 0;
        }

        .sectionIntro {
            max-width: 700px;
            margin: 0 auto 34px;
            text-align: center;
        }

        .sectionIntro h2,
        .benefitsIntro h2,
        .faqIntro h2,
        .closingCopy h2 {
            margin: 0;
            font-size: clamp(1.8rem, 3.4vw, 2.6rem);
            letter-spacing: -0.03em;
            line-height: 1.16;
        }

        .sectionIntro p,
        .benefitsIntro p,
        .faqIntro p {
            margin: 13px 0 0;
            color: var(--color-muted);
            line-height: 1.7;
        }

        .tierGrid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            align-items: stretch;
            gap: 20px;
        }

        .tierCard {
            position: relative;
            display: flex;
            min-width: 0;
            flex-direction: column;
            padding: 26px 24px 24px;
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            box-shadow: 0 8px 24px rgba(18, 18, 15, 0.07);
            transition: transform 180ms ease, box-shadow 180ms ease;
        }

        .tierCard:hover {
            transform: scale(1.02);
            box-shadow: 0 12px 30px rgba(18, 18, 15, 0.12);
        }

        .tierCard.recommended {
            border-color: var(--color-primary);
            border-left-width: 5px;
        }

        .recommendedLabel {
            position: absolute;
            top: 18px;
            right: 18px;
            padding: 5px 10px;
            border-radius: 999px;
            background: var(--color-primary);
            color: var(--color-on-primary);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .tierCard h3 {
            margin: 0 0 6px;
            font-size: 1.35rem;
        }

        .tierSummary {
            min-height: 48px;
            margin: 0 0 20px;
            color: var(--color-muted);
            font-size: 0.92rem;
            line-height: 1.55;
        }

        .priceLine {
            display: flex;
            align-items: baseline;
            gap: 5px;
            margin-bottom: 4px;
        }

        .price {
            font-size: 2.45rem;
            font-weight: 700;
            letter-spacing: -0.05em;
            line-height: 1;
        }

        .pricePeriod {
            color: var(--color-muted);
            font-size: 0.9rem;
        }

        .annualPrice {
            min-height: 22px;
            margin: 5px 0 19px;
            color: var(--color-muted);
            font-size: 0.82rem;
        }

        .tierFeatures {
            display: grid;
            gap: 11px;
            margin: 0 0 24px;
            padding: 18px 0 0;
            border-top: 1px solid var(--color-border);
            list-style: none;
        }

        .tierFeatures li {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .featureCheck {
            margin-top: 3px;
            color: var(--color-primary);
            flex: 0 0 auto;
        }

        .tierButton {
            width: 100%;
            margin-top: auto;
            font-size: 0.92rem;
        }

        .comparisonWrap {
            overflow-x: auto;
            margin-top: 30px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            -webkit-overflow-scrolling: touch;
        }

        .comparisonTable {
            width: 100%;
            min-width: 680px;
            border-collapse: collapse;
            text-align: left;
        }

        .comparisonTable caption {
            padding: 20px 22px 12px;
            color: var(--color-text);
            font-size: 1rem;
            font-weight: 700;
            text-align: left;
        }

        .comparisonTable th,
        .comparisonTable td {
            padding: 14px 20px;
            border-top: 1px solid var(--color-border);
            vertical-align: middle;
        }

        .comparisonTable thead th {
            color: var(--color-muted);
            font-size: 0.85rem;
            font-weight: 600;
        }

        .comparisonTable tbody th {
            font-weight: 600;
        }

        .comparisonTable td {
            font-size: 0.92rem;
        }

        .benefitsSection {
            padding: 62px 0 70px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .benefitsLayout {
            display: grid;
            grid-template-columns: 0.82fr 1.18fr;
            align-items: start;
            gap: 54px;
        }

        .benefitsIntro {
            position: sticky;
            top: 96px;
        }

        .benefitsIntro p {
            max-width: 410px;
        }

        .benefitsIntro .shortNote {
            margin-top: 24px;
            color: var(--color-text);
            font-weight: 600;
        }

        .benefitGrid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
        }

        .benefitItem {
            padding: 22px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-bg);
            color: var(--color-text);
        }

        .iconCircle {
            display: inline-flex;
            width: 50px;
            height: 50px;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--color-accent) 16%, transparent);
            color: var(--color-accent);
            font-size: 1.3rem;
        }

        .benefitItem h3 {
            margin: 0 0 7px;
            font-size: 1.03rem;
        }

        .benefitItem p {
            margin: 0;
            color: var(--color-muted);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .faqSection {
            padding: 70px 0 64px;
        }

        .faqLayout {
            display: grid;
            grid-template-columns: 0.72fr 1.28fr;
            gap: 64px;
        }

        .faqIntro {
            max-width: 360px;
        }

        .supportCallout {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 24px;
            padding: 15px 17px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .supportCallout i {
            color: var(--color-primary);
            font-size: 1.25rem;
        }

        .supportCallout span {
            display: block;
            color: var(--color-muted);
            font-size: 0.82rem;
        }

        .supportCallout a {
            color: var(--color-text);
            font-weight: 700;
            text-decoration-thickness: 1px;
            text-underline-offset: 3px;
        }

        .faqList {
            display: grid;
            gap: 12px;
        }

        .faqList details {
            padding: 18px 20px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .faqList summary {
            position: relative;
            padding-right: 28px;
            font-weight: 600;
            cursor: pointer;
            list-style: none;
        }

        .faqList summary::-webkit-details-marker {
            display: none;
        }

        .faqList summary::after {
            position: absolute;
            top: 0;
            right: 0;
            color: var(--color-primary);
            content: '+';
            font-size: 1.25rem;
            line-height: 1;
        }

        .faqList details[open] summary::after {
            content: '−';
        }

        .faqList details p {
            margin: 12px 0 0;
            color: var(--color-muted);
            font-size: 0.92rem;
            line-height: 1.7;
        }

        .echoBand {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            width: 100%;
            padding: 42px max(24px, calc((100% - 1160px) / 2));
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .echoBand .statNumber {
            font-size: clamp(2.5rem, 5vw, 3.5rem);
        }

        .closingSection {
            padding: 66px 24px 76px;
        }

        .closingPanel {
            width: min(860px, 100%);
            margin: 0 auto;
            padding: 42px 40px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            text-align: center;
        }

        .closingCopy {
            max-width: 590px;
            margin: 0 auto;
        }

        .closingCopy p {
            margin: 13px 0 20px;
            color: var(--color-muted);
            line-height: 1.7;
        }

        .closingCopy .shortNote {
            margin: 17px 0 0;
            font-size: 0.88rem;
        }

        .questionForm {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 13px;
            max-width: 560px;
            margin: 27px auto 0;
            text-align: left;
        }

        .questionForm label {
            display: grid;
            gap: 6px;
            color: var(--color-text);
            font-size: 0.83rem;
            font-weight: 600;
        }

        .questionForm label:last-of-type {
            grid-column: 1 / -1;
        }

        .questionForm input,
        .questionForm textarea {
            width: 100%;
            padding: 11px 13px;
            border: 1px solid var(--color-border);
            border-radius: 12px;
            background: var(--color-bg);
            color: var(--color-text);
            font: inherit;
            font-size: 0.92rem;
        }

        .questionForm textarea {
            min-height: 88px;
            resize: vertical;
        }

        .questionForm .primaryButton {
            grid-column: 1 / -1;
            justify-self: center;
            min-width: 210px;
            cursor: pointer;
        }

        .textLink {
            color: var(--color-text);
            font-weight: 600;
            text-underline-offset: 3px;
        }

        @media (max-width: 900px) {
            .heroSection {
                gap: 32px;
            }

            .tierGrid {
                grid-template-columns: 1fr;
                max-width: 620px;
                margin: 0 auto;
            }

            .tierCard.recommended {
                order: -1;
            }

            .tierSummary {
                min-height: 0;
            }

            .benefitsLayout,
            .faqLayout {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .benefitsIntro {
                position: static;
            }

            .faqIntro {
                max-width: 620px;
            }
        }

        @media (max-width: 768px) {
            .pageWrap {
                width: min(100% - 40px, 620px);
            }

            .heroSection {
                grid-template-columns: 1fr;
                gap: 28px;
                padding: 40px 0 48px;
            }

            .heroCopy > p:not(.eyebrow) {
                margin-bottom: 22px;
            }

            .heroCopy .primaryButton {
                width: 100%;
            }

            .heroImage,
            .heroImage img {
                min-height: 280px;
            }

            .statsBand {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                row-gap: 36px;
                padding: 48px 20px;
            }

            .statItem {
                border-left: 0;
            }

            .contentSection {
                padding: 52px 0;
            }

            .benefitsSection {
                padding: 52px 0;
            }

            .faqSection {
                padding: 54px 0;
            }

            .echoBand {
                padding: 38px 20px;
            }

            .closingSection {
                padding: 52px 20px 60px;
            }

            .closingPanel {
                padding: 34px 22px;
            }
        }

        @media (max-width: 560px) {
            .benefitGrid {
                grid-template-columns: 1fr;
            }

            .echoBand {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .echoBand .statItem {
                padding: 8px 12px;
            }

            .questionForm {
                grid-template-columns: 1fr;
            }

            .questionForm label:last-of-type,
            .questionForm .primaryButton {
                grid-column: auto;
            }

            .questionForm .primaryButton {
                width: 100%;
            }
        }

        @media (max-width: 420px) {
            .pageWrap {
                width: calc(100% - 32px);
            }

            .statsBand {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .statItem {
                padding: 8px 12px;
            }

            .heroCopy h1 {
                font-size: 2.35rem;
            }

            .tierCard {
                padding: 23px 19px;
            }

            .recommendedLabel {
                position: static;
                align-self: flex-start;
                margin-bottom: 12px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .primaryButton,
            .tierButton,
            .tierCard {
                transition: none;
            }

            .primaryButton:hover,
            .tierButton:hover,
            .tierCard:hover {
                transform: none;
            }
        }

/* membership-plans.html */
.siteFooter {
            background-color: var(--site-surface);
            color: var(--site-text);
            border-top: 1px solid var(--site-border);
            padding-top: 56px;
            padding-bottom: 32px;
            padding-left: 32px;
            padding-right: 32px;
        }

        .footerInner {
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
        }

        .footerGrid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
            gap: 32px;
        }

        .footerBrand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
        }

        .footerBrandIcon {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.15rem;
        }

        .footerBrandText {
            font-size: 1.15rem;
            font-weight: 700;
        }

        .footerTagline {
            margin-top: 16px;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            color: var(--site-muted);
            font-size: 0.95rem;
            max-width: 34ch;
        }

        .footerHeading {
            margin-top: 0;
            margin-bottom: 14px;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--site-muted);
        }

        .footerList {
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            display: grid;
            gap: 10px;
        }

        .footerLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            border-bottom: 1px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .footerLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .footerContactList {
            gap: 12px;
        }

        .footerContactItem {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.95rem;
            color: var(--site-muted);
        }

        .footerContactItem i {
            color: var(--site-accent);
            margin-top: 3px;
        }

        .footerNotice {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-top: 44px;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 24px;
            padding-right: 24px;
            border-top: 1px solid var(--site-border);
            border-right: 1px solid var(--site-border);
            border-bottom: 1px solid var(--site-border);
            border-left: 4px solid var(--site-accent);
            border-radius: var(--site-radius);
            background-color: var(--site-bg);
        }

        .footerBadge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: var(--site-accent);
            color: var(--site-on-accent);
            font-weight: 700;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .footerNoticeText {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
        }

        .footerDisclosure {
            margin-top: 20px;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .footerBottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 12px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid var(--site-border);
        }

        .footerCopyright,
        .footerMeta {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .cookieBanner {
            position: fixed;
            left: 16px;
            right: 16px;
            bottom: 16px;
            z-index: 60;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 18px;
            padding-bottom: 18px;
            padding-left: 22px;
            padding-right: 22px;
            background-color: var(--site-surface);
            color: var(--site-text);
            border: 1px solid var(--site-border);
            border-radius: var(--site-radius);
            box-shadow: 0 12px 28px rgba(18, 18, 15, 0.18);
        }

        .cookieText {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
            max-width: 62ch;
        }

        .cookieButton {
            border: 0;
            cursor: pointer;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 26px;
            padding-right: 26px;
            border-radius: 999px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--site-on-primary);
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            transition: transform 0.2s ease;
        }

        .cookieButton:hover {
            transform: scale(1.02);
        }

        .isHidden {
            display: none !important;
        }

        @media (max-width: 900px) {
            .footerGrid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 560px) {
            .siteFooter {
                padding-top: 40px;
                padding-bottom: 28px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .footerGrid {
                grid-template-columns: 1fr;
            }

            .footerNotice {
                flex-direction: column;
            }
        }

/* multiplayer-worlds.html */
:root {
            --site-bg: #FEFBE8;
            --site-surface: #F8F2CB;
            --site-text: #12120F;
            --site-muted: #3C3B34;
            --site-border: #E3DFC5;
            --site-primary: #948636;
            --site-on-primary: #000000;
            --site-secondary: #8583B1;
            --site-on-secondary: #000000;
            --site-accent: #9D62C0;
            --site-on-accent: #000000;
            --site-success: #22C55E;
            --site-warning: #F59E0B;
            --site-error: #EF4444;
            --site-info: #3B82F6;
            --site-radius: 24px;
            --color-bg: var(--site-bg);
            --color-surface: var(--site-surface);
            --color-text: var(--site-text);
            --color-muted: var(--site-muted);
            --color-border: var(--site-border);
            --color-primary: var(--site-primary);
            --color-on-primary: var(--site-on-primary);
            --color-secondary: var(--site-secondary);
            --color-on-secondary: var(--site-on-secondary);
            --color-accent: var(--site-accent);
            --color-on-accent: var(--site-on-accent);
            --color-success: var(--site-success);
            --color-warning: var(--site-warning);
            --color-error: var(--site-error);
            --color-info: var(--site-info);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --site-bg: #0E0D0B;
                --site-surface: #1A1A16;
                --site-text: #E7E5D6;
                --site-muted: #B5B2A0;
                --site-border: #2F2E2A;
                --site-primary: #DECE6E;
                --site-on-primary: #000000;
                --site-secondary: #BFBFE2;
                --site-on-secondary: #000000;
                --site-accent: #CBB6D9;
                --site-on-accent: #000000;
            }
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
            background-color: var(--site-bg);
            color: var(--site-text);
            font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
            font-weight: 400;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

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

        img {
            max-width: 100%;
            display: block;
        }

        .siteHeader {
            position: sticky;
            top: 0;
            z-index: 40;
            height: 72px;
            display: flex;
            align-items: center;
            background-color: var(--site-surface);
            border-bottom: 1px solid var(--site-border);
        }

        .headerInner {
            width: 100%;
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 32px;
            padding-right: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
            flex-shrink: 0;
        }

        .brandIcon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.2rem;
        }

        .brandStack {
            display: flex;
            flex-direction: column;
        }

        .brandText {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            line-height: 1.25;
        }

        .brandTagline {
            font-size: 0.68rem;
            color: var(--site-muted);
            line-height: 1.2;
        }

        .mainNav {
            display: flex;
            align-items: center;
        }

        .navList {
            display: flex;
            align-items: center;
            gap: 26px;
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .navLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .navLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .headerActions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .headerCta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding-top: 11px;
            padding-bottom: 11px;
            padding-left: 22px;
            padding-right: 22px;
            border-radius: 999px;
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            color: var(--site-on-primary);
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: transform 0.2s ease;
        }

        .headerCta:hover {
            transform: scale(1.02);
        }

        .navToggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--site-border);
            background-color: var(--site-bg);
            color: var(--site-text);
            font-size: 1.35rem;
            cursor: pointer;
        }

        @media (max-width: 980px) {
            .mainNav {
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                display: none;
                background-color: var(--site-surface);
                border-bottom: 1px solid var(--site-border);
                box-shadow: 0 14px 28px rgba(18, 18, 15, 0.14);
            }

            .mainNav.isOpen {
                display: block;
            }

            .navList {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding-left: 24px;
                padding-right: 24px;
                padding-top: 8px;
                padding-bottom: 16px;
            }

            .navList li {
                border-bottom: 1px solid var(--site-border);
            }

            .navLink {
                display: block;
                padding-top: 14px;
                padding-bottom: 14px;
                border-bottom: 0;
            }

            .navToggle {
                display: inline-flex;
            }

            .headerCta {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .headerInner {
                padding-left: 20px;
                padding-right: 20px;
            }

            .brandTagline {
                display: none;
            }
        }

/* multiplayer-worlds.html */
.worldsPage {
            overflow: hidden;
            background: var(--color-bg);
            color: var(--color-text);
        }

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

        .worldsPage .contentWidth {
            width: min(100% - 64px, 1180px);
            margin-inline: auto;
        }

        .worldsPage .heroSection {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            align-items: center;
            gap: 56px;
            padding-block: 56px 64px;
        }

        .worldsPage .eyebrow {
            margin: 0 0 14px;
            color: var(--color-primary);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .worldsPage h1,
        .worldsPage h2,
        .worldsPage h3 {
            color: var(--color-text);
            font-weight: 700;
            line-height: 1.2;
        }

        .worldsPage h1 {
            max-width: 12ch;
            margin: 0;
            font-size: clamp(2.5rem, 5.1vw, 4.4rem);
            letter-spacing: -0.045em;
        }

        .worldsPage .heroCopy {
            max-width: 570px;
            margin: 20px 0 0;
            color: var(--color-muted);
            font-size: 1.08rem;
            line-height: 1.75;
        }

        .worldsPage .heroNote {
            margin: 12px 0 24px;
            color: var(--color-muted);
            font-size: 0.92rem;
        }

        .worldsPage .primaryButton {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 50px;
            padding: 12px 23px;
            border: 0;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: var(--color-on-primary);
            font-size: 0.94rem;
            font-weight: 700;
            text-decoration: none;
            transition: transform 180ms ease, box-shadow 180ms ease;
        }

        .worldsPage .primaryButton:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 20px rgba(18, 18, 15, 0.16);
        }

        .worldsPage .heroImageWrap {
            position: relative;
            margin: 0;
            padding: 12px;
            border: 1px solid var(--color-border);
            border-radius: 28px;
            background: var(--color-surface);
        }

        .worldsPage .heroImageWrap::after {
            position: absolute;
            z-index: 0;
            right: -12px;
            bottom: -12px;
            width: 45%;
            height: 45%;
            border-radius: 24px;
            background: color-mix(in srgb, var(--color-accent) 20%, transparent);
            content: "";
        }

        .worldsPage .heroImage {
            position: relative;
            z-index: 1;
            width: 100%;
            aspect-ratio: 1.18;
            border-radius: 20px;
            object-fit: cover;
        }

        .worldsPage .statsBand {
            padding: 45px 32px 50px;
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .worldsPage .statsHeading {
            margin: 0 0 28px;
            color: var(--color-on-primary);
            text-align: center;
            font-size: clamp(1.45rem, 2.4vw, 2rem);
        }

        .worldsPage .statsGrid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            width: min(100%, 1180px);
            margin: 0 auto;
            padding: 0;
            list-style: none;
        }

        .worldsPage .statItem {
            display: flex;
            min-width: 0;
            flex-direction: column;
            align-items: center;
            padding: 12px 20px;
            border-left: 1px solid currentColor;
            text-align: center;
        }

        .worldsPage .statItem:first-child {
            border-left: 0;
        }

        .worldsPage .statNumber {
            color: var(--color-on-primary);
            font-size: clamp(3rem, 6vw, 4.5rem);
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
        }

        .worldsPage .statCaption {
            max-width: 22ch;
            margin-top: 12px;
            color: var(--color-on-primary);
            font-size: 0.93rem;
            line-height: 1.4;
        }

        .worldsPage .sectionBlock {
            padding-block: 68px;
        }

        .worldsPage .sectionIntro {
            max-width: 690px;
            margin: 0 auto 34px;
            text-align: center;
        }

        .worldsPage .sectionIntro h2,
        .worldsPage .matchIntro h2,
        .worldsPage .squadIntro h2,
        .worldsPage .communityPanel h2 {
            margin: 0;
            font-size: clamp(1.85rem, 3.5vw, 2.7rem);
            letter-spacing: -0.025em;
        }

        .worldsPage .sectionIntro p,
        .worldsPage .matchIntro p,
        .worldsPage .squadIntro p {
            margin: 14px 0 0;
            color: var(--color-muted);
            line-height: 1.7;
        }

        .worldsPage .modeGrid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 22px;
        }

        .worldsPage .modeCard {
            display: flex;
            min-height: 180px;
            gap: 19px;
            align-items: flex-start;
            padding: 25px;
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            box-shadow: 0 8px 22px rgba(18, 18, 15, 0.06);
            transition: transform 180ms ease, box-shadow 180ms ease;
        }

        .worldsPage .modeCard:hover,
        .worldsPage .featureCard:hover {
            transform: scale(1.02);
            box-shadow: 0 12px 26px rgba(18, 18, 15, 0.12);
        }

        .worldsPage .iconCircle {
            display: inline-flex;
            width: 54px;
            height: 54px;
            flex: 0 0 54px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: color-mix(in srgb, var(--color-accent) 16%, transparent);
            color: var(--color-accent);
            font-size: 1.35rem;
        }

        .worldsPage .modeCard h3,
        .worldsPage .featureCard h3 {
            margin: 2px 0 8px;
            font-size: 1.16rem;
        }

        .worldsPage .modeCard p,
        .worldsPage .featureCard p {
            margin: 0;
            color: var(--color-muted);
            font-size: 0.94rem;
            line-height: 1.65;
        }

        .worldsPage .modeMeta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 16px;
            margin-top: 15px;
            color: var(--color-text);
            font-size: 0.82rem;
            font-weight: 600;
        }

        .worldsPage .modeMeta span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .worldsPage .matchSection {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .worldsPage .matchLayout {
            display: grid;
            grid-template-columns: 0.8fr 1.2fr;
            gap: 64px;
            align-items: start;
        }

        .worldsPage .matchIntro {
            position: sticky;
            top: 96px;
        }

        .worldsPage .stepsList {
            display: grid;
            gap: 16px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .worldsPage .stepItem {
            display: grid;
            grid-template-columns: 46px 1fr;
            gap: 17px;
            align-items: start;
            padding: 18px 0;
            border-bottom: 1px solid var(--color-border);
        }

        .worldsPage .stepNumber {
            display: inline-flex;
            width: 44px;
            height: 44px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--color-secondary);
            color: var(--color-on-secondary);
            font-size: 1rem;
            font-weight: 700;
        }

        .worldsPage .stepItem h3 {
            margin: 1px 0 6px;
            font-size: 1.08rem;
        }

        .worldsPage .stepItem p {
            margin: 0;
            color: var(--color-muted);
            line-height: 1.65;
        }

        .worldsPage .controlNote {
            margin-top: 24px;
            padding: 17px 19px;
            border: 1px solid var(--color-border);
            border-radius: 18px;
            background: var(--color-bg);
            color: var(--color-text);
            line-height: 1.65;
        }

        .worldsPage .faqList {
            margin-top: 24px;
            border-top: 1px solid var(--color-border);
        }

        .worldsPage .faqList details {
            padding: 16px 0;
            border-bottom: 1px solid var(--color-border);
        }

        .worldsPage .faqList summary {
            color: var(--color-text);
            cursor: pointer;
            font-weight: 700;
        }

        .worldsPage .faqList p {
            margin: 10px 0 0;
            color: var(--color-muted);
            line-height: 1.65;
        }

        .worldsPage .squadLayout {
            display: grid;
            grid-template-columns: 0.75fr 1.25fr;
            gap: 55px;
            align-items: center;
        }

        .worldsPage .squadIntro {
            max-width: 400px;
        }

        .worldsPage .featureGrid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .worldsPage .featureCard {
            min-height: 166px;
            padding: 22px;
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            box-shadow: 0 8px 22px rgba(18, 18, 15, 0.06);
            transition: transform 180ms ease, box-shadow 180ms ease;
        }

        .worldsPage .featureCard .iconCircle {
            width: 46px;
            height: 46px;
            margin-bottom: 13px;
            font-size: 1.15rem;
        }

        .worldsPage .featureLink {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 22px;
            color: var(--color-primary);
            font-weight: 700;
            text-decoration-thickness: 1px;
            text-underline-offset: 4px;
        }

        .worldsPage .echoBand {
            padding: 36px 32px;
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .worldsPage .echoGrid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            width: min(100%, 980px);
            margin: 0 auto;
        }

        .worldsPage .echoBand .statItem {
            color: var(--color-on-secondary);
        }

        .worldsPage .echoBand .statNumber,
        .worldsPage .echoBand .statCaption {
            color: var(--color-on-secondary);
        }

        .worldsPage .echoBand .statNumber {
            font-size: clamp(2.5rem, 5vw, 3.5rem);
        }

        .worldsPage .communitySection {
            padding: 60px 24px 72px;
        }

        .worldsPage .communityPanel {
            width: min(100%, 760px);
            margin-inline: auto;
            padding: 38px 28px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            text-align: center;
        }

        .worldsPage .communityPanel p {
            max-width: 540px;
            margin: 13px auto 22px;
            color: var(--color-muted);
            line-height: 1.7;
        }

        @media (max-width: 768px) {
            .worldsPage .contentWidth {
                width: min(100% - 40px, 620px);
            }

            .worldsPage .heroSection {
                grid-template-columns: 1fr;
                gap: 30px;
                padding-block: 40px 48px;
            }

            .worldsPage .heroImageWrap {
                max-width: 600px;
            }

            .worldsPage .statsGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                row-gap: 30px;
            }

            .worldsPage .statItem:nth-child(3) {
                border-left: 0;
            }

            .worldsPage .modeGrid {
                grid-template-columns: 1fr;
            }

            .worldsPage .matchLayout,
            .worldsPage .squadLayout {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .worldsPage .matchIntro {
                position: static;
            }

            .worldsPage .squadIntro {
                max-width: 620px;
            }

            .worldsPage .featureGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 700px) {
            .worldsPage .modeCard {
                align-items: flex-start;
                gap: 15px;
            }

            .worldsPage .modeCard .iconCircle {
                order: 0;
            }
        }

        @media (max-width: 420px) {
            .worldsPage .contentWidth {
                width: min(100% - 36px, 360px);
            }

            .worldsPage .statsBand,
            .worldsPage .echoBand {
                padding-inline: 20px;
            }

            .worldsPage .statsGrid,
            .worldsPage .echoGrid {
                grid-template-columns: 1fr;
                row-gap: 24px;
            }

            .worldsPage .statItem,
            .worldsPage .statItem:nth-child(3) {
                border-left: 0;
            }

            .worldsPage .statNumber {
                font-size: 3rem;
            }

            .worldsPage .featureGrid {
                grid-template-columns: 1fr;
            }

            .worldsPage .modeCard {
                padding: 20px;
            }

            .worldsPage .communityPanel {
                padding: 30px 20px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .worldsPage *,
            .worldsPage *::before,
            .worldsPage *::after {
                scroll-behavior: auto;
                transition-duration: 0.01ms;
            }
        }

/* multiplayer-worlds.html */
.siteFooter {
            background-color: var(--site-surface);
            color: var(--site-text);
            border-top: 1px solid var(--site-border);
            padding-top: 56px;
            padding-bottom: 32px;
            padding-left: 32px;
            padding-right: 32px;
        }

        .footerInner {
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
        }

        .footerGrid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
            gap: 32px;
        }

        .footerBrand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
        }

        .footerBrandIcon {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.15rem;
        }

        .footerBrandText {
            font-size: 1.15rem;
            font-weight: 700;
        }

        .footerTagline {
            margin-top: 16px;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            color: var(--site-muted);
            font-size: 0.95rem;
            max-width: 34ch;
        }

        .footerHeading {
            margin-top: 0;
            margin-bottom: 14px;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--site-muted);
        }

        .footerList {
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            display: grid;
            gap: 10px;
        }

        .footerLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            border-bottom: 1px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .footerLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .footerContactList {
            gap: 12px;
        }

        .footerContactItem {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.95rem;
            color: var(--site-muted);
        }

        .footerContactItem i {
            color: var(--site-accent);
            margin-top: 3px;
        }

        .footerNotice {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-top: 44px;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 24px;
            padding-right: 24px;
            border-top: 1px solid var(--site-border);
            border-right: 1px solid var(--site-border);
            border-bottom: 1px solid var(--site-border);
            border-left: 4px solid var(--site-accent);
            border-radius: var(--site-radius);
            background-color: var(--site-bg);
        }

        .footerBadge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: var(--site-accent);
            color: var(--site-on-accent);
            font-weight: 700;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .footerNoticeText {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
        }

        .footerDisclosure {
            margin-top: 20px;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .footerBottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 12px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid var(--site-border);
        }

        .footerCopyright,
        .footerMeta {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .cookieBanner {
            position: fixed;
            left: 16px;
            right: 16px;
            bottom: 16px;
            z-index: 60;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 18px;
            padding-bottom: 18px;
            padding-left: 22px;
            padding-right: 22px;
            background-color: var(--site-surface);
            color: var(--site-text);
            border: 1px solid var(--site-border);
            border-radius: var(--site-radius);
            box-shadow: 0 12px 28px rgba(18, 18, 15, 0.18);
        }

        .cookieText {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
            max-width: 62ch;
        }

        .cookieButton {
            border: 0;
            cursor: pointer;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 26px;
            padding-right: 26px;
            border-radius: 999px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--site-on-primary);
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            transition: transform 0.2s ease;
        }

        .cookieButton:hover {
            transform: scale(1.02);
        }

        .isHidden {
            display: none !important;
        }

        @media (max-width: 900px) {
            .footerGrid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 560px) {
            .siteFooter {
                padding-top: 40px;
                padding-bottom: 28px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .footerGrid {
                grid-template-columns: 1fr;
            }

            .footerNotice {
                flex-direction: column;
            }
        }

/* privacy-policy.html */
:root {
            --site-bg: #FEFBE8;
            --site-surface: #F8F2CB;
            --site-text: #12120F;
            --site-muted: #3C3B34;
            --site-border: #E3DFC5;
            --site-primary: #948636;
            --site-on-primary: #000000;
            --site-secondary: #8583B1;
            --site-on-secondary: #000000;
            --site-accent: #9D62C0;
            --site-on-accent: #000000;
            --site-success: #22C55E;
            --site-warning: #F59E0B;
            --site-error: #EF4444;
            --site-info: #3B82F6;
            --site-radius: 24px;
            --color-bg: var(--site-bg);
            --color-surface: var(--site-surface);
            --color-text: var(--site-text);
            --color-muted: var(--site-muted);
            --color-border: var(--site-border);
            --color-primary: var(--site-primary);
            --color-on-primary: var(--site-on-primary);
            --color-secondary: var(--site-secondary);
            --color-on-secondary: var(--site-on-secondary);
            --color-accent: var(--site-accent);
            --color-on-accent: var(--site-on-accent);
            --color-success: var(--site-success);
            --color-warning: var(--site-warning);
            --color-error: var(--site-error);
            --color-info: var(--site-info);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --site-bg: #0E0D0B;
                --site-surface: #1A1A16;
                --site-text: #E7E5D6;
                --site-muted: #B5B2A0;
                --site-border: #2F2E2A;
                --site-primary: #DECE6E;
                --site-on-primary: #000000;
                --site-secondary: #BFBFE2;
                --site-on-secondary: #000000;
                --site-accent: #CBB6D9;
                --site-on-accent: #000000;
            }
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
            background-color: var(--site-bg);
            color: var(--site-text);
            font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
            font-weight: 400;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

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

        img {
            max-width: 100%;
            display: block;
        }

        .siteHeader {
            position: sticky;
            top: 0;
            z-index: 40;
            height: 72px;
            display: flex;
            align-items: center;
            background-color: var(--site-surface);
            border-bottom: 1px solid var(--site-border);
        }

        .headerInner {
            width: 100%;
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 32px;
            padding-right: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
            flex-shrink: 0;
        }

        .brandIcon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.2rem;
        }

        .brandStack {
            display: flex;
            flex-direction: column;
        }

        .brandText {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            line-height: 1.25;
        }

        .brandTagline {
            font-size: 0.68rem;
            color: var(--site-muted);
            line-height: 1.2;
        }

        .mainNav {
            display: flex;
            align-items: center;
        }

        .navList {
            display: flex;
            align-items: center;
            gap: 26px;
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .navLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .navLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .headerActions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .headerCta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding-top: 11px;
            padding-bottom: 11px;
            padding-left: 22px;
            padding-right: 22px;
            border-radius: 999px;
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            color: var(--site-on-primary);
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: transform 0.2s ease;
        }

        .headerCta:hover {
            transform: scale(1.02);
        }

        .navToggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--site-border);
            background-color: var(--site-bg);
            color: var(--site-text);
            font-size: 1.35rem;
            cursor: pointer;
        }

        @media (max-width: 980px) {
            .mainNav {
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                display: none;
                background-color: var(--site-surface);
                border-bottom: 1px solid var(--site-border);
                box-shadow: 0 14px 28px rgba(18, 18, 15, 0.14);
            }

            .mainNav.isOpen {
                display: block;
            }

            .navList {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding-left: 24px;
                padding-right: 24px;
                padding-top: 8px;
                padding-bottom: 16px;
            }

            .navList li {
                border-bottom: 1px solid var(--site-border);
            }

            .navLink {
                display: block;
                padding-top: 14px;
                padding-bottom: 14px;
                border-bottom: 0;
            }

            .navToggle {
                display: inline-flex;
            }

            .headerCta {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .headerInner {
                padding-left: 20px;
                padding-right: 20px;
            }

            .brandTagline {
                display: none;
            }
        }

/* privacy-policy.html */
.privacyPage {
            overflow: hidden;
            color: var(--color-text);
            background: var(--color-bg);
        }

        .privacyPage * {
            box-sizing: border-box;
        }

        .privacyShell {
            width: min(100% - 64px, 1180px);
            margin: 0 auto;
        }

        .privacyHero {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            align-items: center;
            gap: 48px;
            padding-top: 56px;
            padding-bottom: 56px;
        }

        .privacyEyebrow {
            margin: 0 0 12px;
            color: var(--color-primary);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .privacyHero h1 {
            margin: 0;
            font-size: clamp(2.5rem, 5vw, 4.25rem);
            letter-spacing: -0.045em;
            line-height: 1.08;
        }

        .privacyLead {
            max-width: 58ch;
            margin: 20px 0 0;
            color: var(--color-muted);
            font-size: 1.1rem;
        }

        .privacyButton {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 26px;
            padding: 13px 22px;
            border: 0;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: var(--color-on-primary);
            font: inherit;
            font-weight: 700;
            text-decoration: none;
            transition: transform 0.2s ease;
            cursor: pointer;
        }

        .privacyButton:hover {
            transform: scale(1.02);
        }

        .privacyButton:focus-visible,
        .privacyPage a:focus-visible,
        .privacyPage input:focus-visible,
        .privacyPage textarea:focus-visible {
            outline: 3px solid var(--color-secondary);
            outline-offset: 3px;
        }

        .privacyHeroImage {
            width: 100%;
            height: auto;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            object-fit: cover;
        }

        .statsBand {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            padding: 68px 32px;
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .statsGrid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            width: min(100%, 1180px);
            margin: 0 auto;
        }

        .statItem {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 120px;
            padding: 16px 24px;
            border-left: 2px solid currentColor;
            text-align: center;
        }

        .statItem:first-child {
            border-left: 0;
        }

        .statNumber {
            font-size: clamp(3rem, 6vw, 4.5rem);
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
        }

        .statCaption {
            max-width: 22ch;
            margin-top: 12px;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .privacySection {
            padding-top: 64px;
            padding-bottom: 64px;
        }

        .sectionIntro {
            max-width: 720px;
            margin-bottom: 30px;
        }

        .sectionIntro h2,
        .policyCopy h2,
        .contactPanel h2 {
            margin: 0 0 12px;
            font-size: clamp(1.8rem, 3vw, 2.5rem);
            letter-spacing: -0.025em;
        }

        .sectionIntro p,
        .policyCopy p {
            color: var(--color-muted);
        }

        .privacyCardGrid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            grid-auto-rows: minmax(180px, auto);
            gap: 22px;
        }

        .privacyCard {
            padding: 26px;
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            box-shadow: 0 8px 22px rgba(18, 18, 15, 0.07);
            transition: transform 0.2s ease;
        }

        .privacyCard:hover {
            transform: scale(1.02);
        }

        .privacyCard h3 {
            margin: 0 0 10px;
            font-size: 1.18rem;
        }

        .privacyCard p {
            margin: 0;
            color: var(--color-muted);
        }

        .contentsNav {
            margin-top: 32px;
            padding: 14px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .contentsNav p {
            margin: 0 0 10px;
            font-size: 0.9rem;
            font-weight: 700;
        }

        .contentsLinks {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .contentsLinks a {
            display: inline-flex;
            padding: 8px 12px;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            color: var(--color-text);
            font-size: 0.9rem;
            text-decoration: none;
        }

        .contentsLinks a:hover {
            border-color: var(--color-primary);
            color: var(--color-primary);
        }

        .policyCopy {
            max-width: 760px;
            margin: 0 auto;
        }

        .policyCopy section {
            padding: 25px 0;
            border-bottom: 1px solid var(--color-border);
            scroll-margin-top: 96px;
        }

        .policyCopy section:first-child {
            padding-top: 0;
        }

        .policyCopy section:last-child {
            border-bottom: 0;
        }

        .policyCopy h2 {
            font-size: 1.55rem;
        }

        .policyCopy p {
            margin: 10px 0 0;
            line-height: 1.8;
        }

        .proofSection {
            padding: 56px 0;
            border-top: 1px solid var(--color-border);
            border-bottom: 1px solid var(--color-border);
            background: var(--color-surface);
            color: var(--color-text);
        }

        .proofGrid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 22px;
        }

        .proofCard {
            padding: 26px;
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-bg);
            color: var(--color-text);
            box-shadow: 0 8px 22px rgba(18, 18, 15, 0.06);
        }

        .proofCard h3 {
            margin: 0 0 8px;
            font-size: 1.15rem;
        }

        .proofCard p {
            margin: 0;
            color: var(--color-muted);
        }

        .echoBand {
            padding-top: 44px;
            padding-bottom: 44px;
        }

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

        .echoBand .statItem {
            min-height: 100px;
        }

        .echoBand .statNumber {
            font-size: clamp(2.5rem, 5vw, 3.5rem);
        }

        .contactSection {
            padding-top: 48px;
            padding-bottom: 72px;
        }

        .contactPanel {
            max-width: 680px;
            margin: 0 auto;
            padding: 34px;
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            box-shadow: 0 10px 28px rgba(18, 18, 15, 0.08);
        }

        .contactPanel > p {
            color: var(--color-muted);
        }

        .privacyForm {
            display: grid;
            gap: 16px;
            margin-top: 24px;
        }

        .privacyForm label {
            display: grid;
            gap: 7px;
            font-size: 0.95rem;
            font-weight: 600;
        }

        .privacyForm input,
        .privacyForm textarea {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--color-border);
            border-radius: 12px;
            background: var(--color-bg);
            color: var(--color-text);
            font: inherit;
        }

        .privacyForm textarea {
            min-height: 120px;
            resize: vertical;
        }

        .privacyForm .privacyButton {
            justify-self: start;
            margin-top: 4px;
        }

        .contactNote {
            margin: 18px 0 0;
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .contactNote a {
            color: var(--color-primary);
            font-weight: 700;
        }

        @media (max-width: 768px) {
            .privacyShell {
                width: min(100% - 40px, 680px);
            }

            .privacyHero {
                grid-template-columns: 1fr;
                gap: 30px;
                padding-top: 40px;
                padding-bottom: 40px;
            }

            .statsBand {
                padding: 48px 20px;
            }

            .statsGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                row-gap: 28px;
            }

            .statItem {
                border-left: 0;
            }

            .privacySection {
                padding-top: 48px;
                padding-bottom: 48px;
            }

            .proofGrid {
                grid-template-columns: 1fr;
            }

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

            .contentsLinks {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 6px;
                scrollbar-width: thin;
            }

            .contentsLinks a {
                flex: 0 0 auto;
            }

            .policyCopy p {
                font-size: 18px;
            }
        }

        @media (max-width: 420px) {
            .privacyShell {
                width: min(100% - 32px, 380px);
            }

            .statsGrid,
            .echoBand .statsGrid {
                grid-template-columns: 1fr;
                row-gap: 22px;
            }

            .statItem {
                min-height: auto;
                padding: 12px;
            }

            .statNumber {
                font-size: 3rem;
            }

            .echoBand .statNumber {
                font-size: 2.5rem;
            }

            .contactPanel {
                padding: 24px 20px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .privacyPage *,
            .privacyPage *::before,
            .privacyPage *::after {
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
            }
        }

/* privacy-policy.html */
.siteFooter {
            background-color: var(--site-surface);
            color: var(--site-text);
            border-top: 1px solid var(--site-border);
            padding-top: 56px;
            padding-bottom: 32px;
            padding-left: 32px;
            padding-right: 32px;
        }

        .footerInner {
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
        }

        .footerGrid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
            gap: 32px;
        }

        .footerBrand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
        }

        .footerBrandIcon {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.15rem;
        }

        .footerBrandText {
            font-size: 1.15rem;
            font-weight: 700;
        }

        .footerTagline {
            margin-top: 16px;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            color: var(--site-muted);
            font-size: 0.95rem;
            max-width: 34ch;
        }

        .footerHeading {
            margin-top: 0;
            margin-bottom: 14px;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--site-muted);
        }

        .footerList {
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            display: grid;
            gap: 10px;
        }

        .footerLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            border-bottom: 1px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .footerLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .footerContactList {
            gap: 12px;
        }

        .footerContactItem {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.95rem;
            color: var(--site-muted);
        }

        .footerContactItem i {
            color: var(--site-accent);
            margin-top: 3px;
        }

        .footerNotice {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-top: 44px;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 24px;
            padding-right: 24px;
            border-top: 1px solid var(--site-border);
            border-right: 1px solid var(--site-border);
            border-bottom: 1px solid var(--site-border);
            border-left: 4px solid var(--site-accent);
            border-radius: var(--site-radius);
            background-color: var(--site-bg);
        }

        .footerBadge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: var(--site-accent);
            color: var(--site-on-accent);
            font-weight: 700;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .footerNoticeText {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
        }

        .footerDisclosure {
            margin-top: 20px;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .footerBottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 12px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid var(--site-border);
        }

        .footerCopyright,
        .footerMeta {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .cookieBanner {
            position: fixed;
            left: 16px;
            right: 16px;
            bottom: 16px;
            z-index: 60;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 18px;
            padding-bottom: 18px;
            padding-left: 22px;
            padding-right: 22px;
            background-color: var(--site-surface);
            color: var(--site-text);
            border: 1px solid var(--site-border);
            border-radius: var(--site-radius);
            box-shadow: 0 12px 28px rgba(18, 18, 15, 0.18);
        }

        .cookieText {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
            max-width: 62ch;
        }

        .cookieButton {
            border: 0;
            cursor: pointer;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 26px;
            padding-right: 26px;
            border-radius: 999px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--site-on-primary);
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            transition: transform 0.2s ease;
        }

        .cookieButton:hover {
            transform: scale(1.02);
        }

        .isHidden {
            display: none !important;
        }

        @media (max-width: 900px) {
            .footerGrid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 560px) {
            .siteFooter {
                padding-top: 40px;
                padding-bottom: 28px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .footerGrid {
                grid-template-columns: 1fr;
            }

            .footerNotice {
                flex-direction: column;
            }
        }

/* terms-and-conditions.html */
:root {
            --site-bg: #FEFBE8;
            --site-surface: #F8F2CB;
            --site-text: #12120F;
            --site-muted: #3C3B34;
            --site-border: #E3DFC5;
            --site-primary: #948636;
            --site-on-primary: #000000;
            --site-secondary: #8583B1;
            --site-on-secondary: #000000;
            --site-accent: #9D62C0;
            --site-on-accent: #000000;
            --site-success: #22C55E;
            --site-warning: #F59E0B;
            --site-error: #EF4444;
            --site-info: #3B82F6;
            --site-radius: 24px;
            --color-bg: var(--site-bg);
            --color-surface: var(--site-surface);
            --color-text: var(--site-text);
            --color-muted: var(--site-muted);
            --color-border: var(--site-border);
            --color-primary: var(--site-primary);
            --color-on-primary: var(--site-on-primary);
            --color-secondary: var(--site-secondary);
            --color-on-secondary: var(--site-on-secondary);
            --color-accent: var(--site-accent);
            --color-on-accent: var(--site-on-accent);
            --color-success: var(--site-success);
            --color-warning: var(--site-warning);
            --color-error: var(--site-error);
            --color-info: var(--site-info);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --site-bg: #0E0D0B;
                --site-surface: #1A1A16;
                --site-text: #E7E5D6;
                --site-muted: #B5B2A0;
                --site-border: #2F2E2A;
                --site-primary: #DECE6E;
                --site-on-primary: #000000;
                --site-secondary: #BFBFE2;
                --site-on-secondary: #000000;
                --site-accent: #CBB6D9;
                --site-on-accent: #000000;
            }
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
            background-color: var(--site-bg);
            color: var(--site-text);
            font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
            font-weight: 400;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

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

        img {
            max-width: 100%;
            display: block;
        }

        .siteHeader {
            position: sticky;
            top: 0;
            z-index: 40;
            height: 72px;
            display: flex;
            align-items: center;
            background-color: var(--site-surface);
            border-bottom: 1px solid var(--site-border);
        }

        .headerInner {
            width: 100%;
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 32px;
            padding-right: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
            flex-shrink: 0;
        }

        .brandIcon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.2rem;
        }

        .brandStack {
            display: flex;
            flex-direction: column;
        }

        .brandText {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            line-height: 1.25;
        }

        .brandTagline {
            font-size: 0.68rem;
            color: var(--site-muted);
            line-height: 1.2;
        }

        .mainNav {
            display: flex;
            align-items: center;
        }

        .navList {
            display: flex;
            align-items: center;
            gap: 26px;
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .navLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .navLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .headerActions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .headerCta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding-top: 11px;
            padding-bottom: 11px;
            padding-left: 22px;
            padding-right: 22px;
            border-radius: 999px;
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            color: var(--site-on-primary);
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: transform 0.2s ease;
        }

        .headerCta:hover {
            transform: scale(1.02);
        }

        .navToggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--site-border);
            background-color: var(--site-bg);
            color: var(--site-text);
            font-size: 1.35rem;
            cursor: pointer;
        }

        @media (max-width: 980px) {
            .mainNav {
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                display: none;
                background-color: var(--site-surface);
                border-bottom: 1px solid var(--site-border);
                box-shadow: 0 14px 28px rgba(18, 18, 15, 0.14);
            }

            .mainNav.isOpen {
                display: block;
            }

            .navList {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding-left: 24px;
                padding-right: 24px;
                padding-top: 8px;
                padding-bottom: 16px;
            }

            .navList li {
                border-bottom: 1px solid var(--site-border);
            }

            .navLink {
                display: block;
                padding-top: 14px;
                padding-bottom: 14px;
                border-bottom: 0;
            }

            .navToggle {
                display: inline-flex;
            }

            .headerCta {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .headerInner {
                padding-left: 20px;
                padding-right: 20px;
            }

            .brandTagline {
                display: none;
            }
        }

/* terms-and-conditions.html */
.termsPage {
            color: var(--color-text);
        }

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

        .termsPage a {
            color: inherit;
        }

        .termsPage .pageWrap {
            width: min(100% - 64px, 1200px);
            margin-right: auto;
            margin-left: auto;
        }

        .termsPage .hero {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
            align-items: center;
            gap: 48px;
            padding-top: 56px;
            padding-bottom: 56px;
        }

        .termsPage .eyebrow {
            margin: 0 0 12px;
            color: var(--color-muted);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .termsPage h1,
        .termsPage h2,
        .termsPage h3 {
            color: var(--color-text);
            font-weight: 700;
            line-height: 1.2;
        }

        .termsPage h1 {
            max-width: 12ch;
            margin: 0;
            font-size: clamp(2.5rem, 5vw, 4.25rem);
            letter-spacing: -0.045em;
        }

        .termsPage .heroCopy {
            max-width: 610px;
            margin: 20px 0 0;
            color: var(--color-muted);
            font-size: 1.08rem;
            line-height: 1.8;
        }

        .termsPage .heroActions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 18px;
            margin-top: 28px;
        }

        .termsPage .primaryLink {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 12px 22px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: var(--color-on-primary);
            font-size: 0.92rem;
            font-weight: 700;
            text-decoration: none;
            transition: transform 180ms ease;
        }

        .termsPage .primaryLink:hover {
            transform: scale(1.02);
        }

        .termsPage .textLink {
            color: var(--color-text);
            font-size: 0.92rem;
            font-weight: 700;
            text-decoration-color: var(--color-primary);
            text-underline-offset: 4px;
        }

        .termsPage .heroImageFrame {
            overflow: hidden;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .termsPage .heroImageFrame img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 3 / 2;
            object-fit: cover;
        }

        .termsPage .statsBand {
            width: 100%;
            padding: 64px max(32px, calc((100% - 1200px) / 2));
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .termsPage .statsGrid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .termsPage .stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 112px;
            padding: 12px 20px;
            border-left: 2px solid currentColor;
            text-align: center;
        }

        .termsPage .stat:first-child {
            border-left: 0;
        }

        .termsPage .statNumber {
            font-size: clamp(3rem, 6vw, 4.5rem);
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
        }

        .termsPage .statCaption {
            max-width: 22ch;
            margin-top: 12px;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .termsPage .termsSection {
            padding-top: 64px;
            padding-bottom: 72px;
        }

        .termsPage .termsIntro {
            max-width: 720px;
            margin-bottom: 36px;
        }

        .termsPage .termsIntro h2 {
            margin: 0 0 14px;
            font-size: clamp(1.8rem, 3vw, 2.5rem);
            letter-spacing: -0.025em;
        }

        .termsPage .termsIntro p {
            margin: 0;
            color: var(--color-muted);
            line-height: 1.8;
        }

        .termsPage .termsLayout {
            display: grid;
            grid-template-columns: 210px minmax(0, 720px);
            align-items: start;
            justify-content: space-between;
            gap: 48px;
        }

        .termsPage .termsNav {
            position: sticky;
            top: 96px;
            padding: 22px 20px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .termsPage .termsNav h3 {
            margin: 0 0 12px;
            font-size: 0.95rem;
        }

        .termsPage .termsNav ol {
            display: grid;
            gap: 10px;
            margin: 0;
            padding-left: 20px;
            color: var(--color-muted);
            font-size: 0.86rem;
        }

        .termsPage .termsNav a {
            text-decoration-color: var(--color-border);
            text-underline-offset: 3px;
        }

        .termsPage .legalCopy {
            max-width: 720px;
        }

        .termsPage .legalClause {
            margin-bottom: 20px;
            padding: 24px 26px 25px;
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            box-shadow: 0 8px 24px rgba(18, 18, 15, 0.06);
            transition: transform 180ms ease;
            scroll-margin-top: 100px;
        }

        .termsPage .legalClause:hover {
            transform: scale(1.02);
        }

        .termsPage .legalClause h3 {
            margin: 0 0 12px;
            font-size: 1.18rem;
        }

        .termsPage .legalClause p {
            margin: 0 0 12px;
            color: var(--color-muted);
            line-height: 1.8;
        }

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

        .termsPage .echoBand {
            padding: 42px max(32px, calc((100% - 1200px) / 2));
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

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

        .termsPage .echoBand .stat {
            min-height: 96px;
        }

        .termsPage .echoBand .statNumber {
            font-size: clamp(2.5rem, 5vw, 3.5rem);
        }

        .termsPage .contactSection {
            padding-top: 64px;
            padding-bottom: 72px;
        }

        .termsPage .contactPanel {
            max-width: 720px;
            margin: 0 auto;
            padding: 36px;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            text-align: center;
        }

        .termsPage .contactPanel h2 {
            margin: 0 0 12px;
            font-size: clamp(1.7rem, 3vw, 2.3rem);
        }

        .termsPage .contactPanel > p {
            max-width: 54ch;
            margin: 0 auto 22px;
            color: var(--color-muted);
            line-height: 1.8;
        }

        .termsPage .contactDetails {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px 24px;
            color: var(--color-text);
            font-size: 0.92rem;
        }

        .termsPage .contactDetails a {
            text-decoration-color: var(--color-primary);
            text-underline-offset: 4px;
        }

        .termsPage .legalNote {
            max-width: 720px;
            margin: 18px auto 0;
            color: var(--color-muted);
            font-size: 0.82rem;
            line-height: 1.65;
            text-align: center;
        }

        @media (max-width: 768px) {
            .termsPage .pageWrap {
                width: min(100% - 40px, 720px);
            }

            .termsPage .hero {
                grid-template-columns: 1fr;
                gap: 30px;
                padding-top: 40px;
                padding-bottom: 40px;
            }

            .termsPage .heroImageFrame {
                max-width: 620px;
            }

            .termsPage .statsBand {
                padding: 48px 20px;
            }

            .termsPage .statsGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                row-gap: 34px;
            }

            .termsPage .stat {
                border-left: 0;
            }

            .termsPage .termsLayout {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            .termsPage .termsNav {
                position: static;
            }

            .termsPage .termsNav ol {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .termsPage .echoBand {
                padding: 40px 20px;
            }

            .termsPage .contactSection {
                padding: 48px 20px;
            }
        }

        @media (max-width: 420px) {
            .termsPage .pageWrap {
                width: min(100% - 32px, 360px);
            }

            .termsPage .statsGrid,
            .termsPage .echoGrid,
            .termsPage .termsNav ol {
                grid-template-columns: 1fr;
            }

            .termsPage .stat {
                padding: 12px 8px;
            }

            .termsPage .statNumber {
                font-size: 3rem;
            }

            .termsPage .echoBand .statNumber {
                font-size: 2.5rem;
            }

            .termsPage .legalClause {
                padding: 22px 20px;
            }

            .termsPage .contactPanel {
                padding: 28px 20px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .termsPage *,
            .termsPage *::before,
            .termsPage *::after {
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
            }
        }

/* terms-and-conditions.html */
.siteFooter {
            background-color: var(--site-surface);
            color: var(--site-text);
            border-top: 1px solid var(--site-border);
            padding-top: 56px;
            padding-bottom: 32px;
            padding-left: 32px;
            padding-right: 32px;
        }

        .footerInner {
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
        }

        .footerGrid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
            gap: 32px;
        }

        .footerBrand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
        }

        .footerBrandIcon {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.15rem;
        }

        .footerBrandText {
            font-size: 1.15rem;
            font-weight: 700;
        }

        .footerTagline {
            margin-top: 16px;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            color: var(--site-muted);
            font-size: 0.95rem;
            max-width: 34ch;
        }

        .footerHeading {
            margin-top: 0;
            margin-bottom: 14px;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--site-muted);
        }

        .footerList {
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            display: grid;
            gap: 10px;
        }

        .footerLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            border-bottom: 1px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .footerLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .footerContactList {
            gap: 12px;
        }

        .footerContactItem {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.95rem;
            color: var(--site-muted);
        }

        .footerContactItem i {
            color: var(--site-accent);
            margin-top: 3px;
        }

        .footerNotice {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-top: 44px;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 24px;
            padding-right: 24px;
            border-top: 1px solid var(--site-border);
            border-right: 1px solid var(--site-border);
            border-bottom: 1px solid var(--site-border);
            border-left: 4px solid var(--site-accent);
            border-radius: var(--site-radius);
            background-color: var(--site-bg);
        }

        .footerBadge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: var(--site-accent);
            color: var(--site-on-accent);
            font-weight: 700;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .footerNoticeText {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
        }

        .footerDisclosure {
            margin-top: 20px;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .footerBottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 12px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid var(--site-border);
        }

        .footerCopyright,
        .footerMeta {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .cookieBanner {
            position: fixed;
            left: 16px;
            right: 16px;
            bottom: 16px;
            z-index: 60;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 18px;
            padding-bottom: 18px;
            padding-left: 22px;
            padding-right: 22px;
            background-color: var(--site-surface);
            color: var(--site-text);
            border: 1px solid var(--site-border);
            border-radius: var(--site-radius);
            box-shadow: 0 12px 28px rgba(18, 18, 15, 0.18);
        }

        .cookieText {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
            max-width: 62ch;
        }

        .cookieButton {
            border: 0;
            cursor: pointer;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 26px;
            padding-right: 26px;
            border-radius: 999px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--site-on-primary);
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            transition: transform 0.2s ease;
        }

        .cookieButton:hover {
            transform: scale(1.02);
        }

        .isHidden {
            display: none !important;
        }

        @media (max-width: 900px) {
            .footerGrid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 560px) {
            .siteFooter {
                padding-top: 40px;
                padding-bottom: 28px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .footerGrid {
                grid-template-columns: 1fr;
            }

            .footerNotice {
                flex-direction: column;
            }
        }

/* virtual-events.html */
:root {
            --site-bg: #FEFBE8;
            --site-surface: #F8F2CB;
            --site-text: #12120F;
            --site-muted: #3C3B34;
            --site-border: #E3DFC5;
            --site-primary: #948636;
            --site-on-primary: #000000;
            --site-secondary: #8583B1;
            --site-on-secondary: #000000;
            --site-accent: #9D62C0;
            --site-on-accent: #000000;
            --site-success: #22C55E;
            --site-warning: #F59E0B;
            --site-error: #EF4444;
            --site-info: #3B82F6;
            --site-radius: 24px;
            --color-bg: var(--site-bg);
            --color-surface: var(--site-surface);
            --color-text: var(--site-text);
            --color-muted: var(--site-muted);
            --color-border: var(--site-border);
            --color-primary: var(--site-primary);
            --color-on-primary: var(--site-on-primary);
            --color-secondary: var(--site-secondary);
            --color-on-secondary: var(--site-on-secondary);
            --color-accent: var(--site-accent);
            --color-on-accent: var(--site-on-accent);
            --color-success: var(--site-success);
            --color-warning: var(--site-warning);
            --color-error: var(--site-error);
            --color-info: var(--site-info);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --site-bg: #0E0D0B;
                --site-surface: #1A1A16;
                --site-text: #E7E5D6;
                --site-muted: #B5B2A0;
                --site-border: #2F2E2A;
                --site-primary: #DECE6E;
                --site-on-primary: #000000;
                --site-secondary: #BFBFE2;
                --site-on-secondary: #000000;
                --site-accent: #CBB6D9;
                --site-on-accent: #000000;
            }
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
            background-color: var(--site-bg);
            color: var(--site-text);
            font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
            font-weight: 400;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

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

        img {
            max-width: 100%;
            display: block;
        }

        .siteHeader {
            position: sticky;
            top: 0;
            z-index: 40;
            height: 72px;
            display: flex;
            align-items: center;
            background-color: var(--site-surface);
            border-bottom: 1px solid var(--site-border);
        }

        .headerInner {
            width: 100%;
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 32px;
            padding-right: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
            flex-shrink: 0;
        }

        .brandIcon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.2rem;
        }

        .brandStack {
            display: flex;
            flex-direction: column;
        }

        .brandText {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            line-height: 1.25;
        }

        .brandTagline {
            font-size: 0.68rem;
            color: var(--site-muted);
            line-height: 1.2;
        }

        .mainNav {
            display: flex;
            align-items: center;
        }

        .navList {
            display: flex;
            align-items: center;
            gap: 26px;
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .navLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .navLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .headerActions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .headerCta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding-top: 11px;
            padding-bottom: 11px;
            padding-left: 22px;
            padding-right: 22px;
            border-radius: 999px;
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            color: var(--site-on-primary);
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: transform 0.2s ease;
        }

        .headerCta:hover {
            transform: scale(1.02);
        }

        .navToggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--site-border);
            background-color: var(--site-bg);
            color: var(--site-text);
            font-size: 1.35rem;
            cursor: pointer;
        }

        @media (max-width: 980px) {
            .mainNav {
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                display: none;
                background-color: var(--site-surface);
                border-bottom: 1px solid var(--site-border);
                box-shadow: 0 14px 28px rgba(18, 18, 15, 0.14);
            }

            .mainNav.isOpen {
                display: block;
            }

            .navList {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding-left: 24px;
                padding-right: 24px;
                padding-top: 8px;
                padding-bottom: 16px;
            }

            .navList li {
                border-bottom: 1px solid var(--site-border);
            }

            .navLink {
                display: block;
                padding-top: 14px;
                padding-bottom: 14px;
                border-bottom: 0;
            }

            .navToggle {
                display: inline-flex;
            }

            .headerCta {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .headerInner {
                padding-left: 20px;
                padding-right: 20px;
            }

            .brandTagline {
                display: none;
            }
        }

/* virtual-events.html */
.eventsPage {
            color: var(--color-text);
        }

        .eventsPage * {
            box-sizing: border-box;
        }

        .eventsShell {
            width: min(100% - 64px, 1240px);
            margin-inline: auto;
        }

        .eventsHero {
            display: grid;
            grid-template-columns: 1.08fr 0.92fr;
            align-items: center;
            gap: 52px;
            padding-block: 54px 58px;
        }

        .heroCopy {
            max-width: 620px;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin: 0 0 18px;
            color: var(--color-muted);
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .eyebrow i {
            color: var(--color-accent);
            font-size: 1rem;
        }

        .eventsHero h1 {
            max-width: 620px;
            margin: 0;
            font-size: clamp(2.5rem, 5vw, 4.3rem);
            letter-spacing: -0.045em;
            line-height: 1.06;
        }

        .heroText {
            max-width: 560px;
            margin: 22px 0 28px;
            color: var(--color-muted);
            font-size: 1.08rem;
            line-height: 1.75;
        }

        .gradientButton {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 50px;
            padding: 12px 23px;
            border: 0;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: var(--color-on-primary);
            font: inherit;
            font-weight: 700;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .gradientButton:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 20px rgba(18, 18, 15, 0.14);
        }

        .gradientButton:focus-visible,
        .textLink:focus-visible,
        .eventDetails summary:focus-visible,
        .signupForm input:focus-visible {
            outline: 3px solid var(--color-secondary);
            outline-offset: 3px;
        }

        .heroPhoto {
            width: 100%;
            height: auto;
            aspect-ratio: 3 / 2;
            border: 1px solid var(--color-border);
            border-radius: 24px;
            object-fit: cover;
            box-shadow: 0 16px 38px rgba(18, 18, 15, 0.12);
        }

        .primaryStats {
            position: relative;
            left: 50%;
            width: 100vw;
            margin-left: -50vw;
            padding: 50px max(32px, calc((100vw - 1176px) / 2));
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .primaryStats h2 {
            margin: 0 0 31px;
            color: var(--color-on-primary);
            font-size: 1.1rem;
            text-align: center;
        }

        .statsGrid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            width: 100%;
        }

        .statItem {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 120px;
            padding: 14px 22px;
            border-left: 2px solid currentColor;
            text-align: center;
        }

        .statItem:first-child {
            border-left: 0;
        }

        .statNumber {
            font-size: clamp(3rem, 6vw, 4.5rem);
            font-weight: 700;
            letter-spacing: -0.06em;
            line-height: 1;
            white-space: nowrap;
        }

        .statCaption {
            max-width: 22ch;
            margin-top: 12px;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .contentSection {
            padding-block: 72px;
        }

        .sectionHeading {
            max-width: 720px;
            margin: 0 auto 12px;
            font-size: clamp(1.9rem, 3.5vw, 2.7rem);
            letter-spacing: -0.035em;
            text-align: center;
        }

        .sectionIntro {
            max-width: 680px;
            margin: 0 auto 34px;
            color: var(--color-muted);
            text-align: center;
        }

        .calendarGrid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }

        .calendarCard,
        .eventTypeCard {
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-accent);
            border-radius: 24px;
            background: var(--color-surface);
            color: var(--color-text);
            box-shadow: 0 8px 22px rgba(18, 18, 15, 0.07);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .calendarCard:hover,
        .eventTypeCard:hover {
            transform: scale(1.02);
            box-shadow: 0 12px 26px rgba(18, 18, 15, 0.11);
        }

        .calendarCard {
            display: grid;
            grid-template-columns: 118px minmax(0, 1fr);
            gap: 21px;
            align-items: start;
            padding: 24px;
        }

        .dateBadge {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 14px 12px;
            border: 1px solid var(--color-border);
            border-radius: 16px;
            background: var(--color-bg);
            color: var(--color-text);
            text-align: center;
        }

        .dateBadge strong {
            font-size: 1rem;
        }

        .dateBadge span {
            color: var(--color-muted);
            font-size: 0.8rem;
        }

        .eventCategory {
            display: inline-block;
            margin: 1px 0 8px;
            color: var(--color-muted);
            font-size: 0.76rem;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }

        .calendarCard h3,
        .eventTypeCard h3 {
            margin: 0;
            font-size: 1.23rem;
            line-height: 1.3;
        }

        .eventDescription {
            margin: 9px 0 15px;
            color: var(--color-muted);
            font-size: 0.93rem;
        }

        .eventMeta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 15px;
            margin-bottom: 16px;
            color: var(--color-muted);
            font-size: 0.82rem;
        }

        .eventMeta span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .eventMeta i {
            color: var(--color-primary);
        }

        .textLink {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--color-text);
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration-color: var(--color-accent);
            text-underline-offset: 4px;
        }

        .calendarNote {
            margin: 24px 0 0;
            color: var(--color-muted);
            font-size: 0.9rem;
            text-align: center;
        }

        .typesSection {
            padding: 68px 0 76px;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .typesSection .eventsShell {
            max-width: 1176px;
        }

        .typesGrid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
            margin-top: 34px;
        }

        .eventTypeCard {
            min-height: 190px;
            padding: 25px 26px;
        }

        .typeTitleRow {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 13px;
        }

        .iconCircle {
            display: inline-flex;
            flex: 0 0 46px;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: rgba(157, 98, 192, 0.16);
            color: var(--color-accent);
            font-size: 1.2rem;
        }

        .eventTypeCard p {
            margin: 0;
            color: var(--color-muted);
        }

        .aboutNote {
            max-width: 720px;
            margin: 0 auto;
            padding: 66px 0 20px;
        }

        .aboutNote h2 {
            margin: 0 0 15px;
            font-size: clamp(1.8rem, 3vw, 2.35rem);
            letter-spacing: -0.03em;
        }

        .aboutNote p {
            margin: 0 0 13px;
            color: var(--color-muted);
        }

        .faqSection {
            padding: 52px 0 76px;
        }

        .faqList {
            max-width: 820px;
            margin: 30px auto 0;
            border-top: 1px solid var(--color-border);
        }

        .eventDetails {
            border-bottom: 1px solid var(--color-border);
        }

        .eventDetails summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            min-height: 66px;
            padding: 15px 4px;
            color: var(--color-text);
            cursor: pointer;
            font-weight: 700;
            list-style: none;
        }

        .eventDetails summary::-webkit-details-marker {
            display: none;
        }

        .eventDetails summary::after {
            content: "+";
            color: var(--color-accent);
            font-size: 1.5rem;
            font-weight: 400;
        }

        .eventDetails[open] summary::after {
            content: "−";
        }

        .eventAnswer {
            max-width: 720px;
            padding: 0 36px 18px 4px;
            color: var(--color-muted);
        }

        .echoStats {
            padding: 38px 32px;
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .echoStats .statsGrid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            max-width: 1176px;
            margin-inline: auto;
        }

        .echoStats .statNumber {
            font-size: clamp(2.5rem, 5vw, 3.5rem);
        }

        .contactSection {
            padding: 68px 24px 76px;
            text-align: center;
        }

        .contactPanel {
            max-width: 680px;
            margin-inline: auto;
        }

        .contactPanel h2 {
            margin: 0 0 12px;
            font-size: clamp(1.9rem, 3.5vw, 2.6rem);
            letter-spacing: -0.035em;
        }

        .contactPanel > p {
            max-width: 560px;
            margin: 0 auto 25px;
            color: var(--color-muted);
        }

        .signupForm {
            display: flex;
            align-items: center;
            gap: 12px;
            max-width: 570px;
            margin: 0 auto;
        }

        .signupForm input {
            flex: 1;
            min-width: 0;
            min-height: 50px;
            padding: 12px 16px;
            border: 1px solid var(--color-border);
            border-radius: 999px;
            background: var(--color-bg);
            color: var(--color-text);
            font: inherit;
        }

        .signupForm input::placeholder {
            color: var(--color-muted);
            opacity: 0.85;
        }

        .contactFinePrint {
            margin: 14px 0 0;
            color: var(--color-muted);
            font-size: 0.82rem;
        }

        @media (max-width: 900px) {
            .eventsHero {
                gap: 32px;
            }

            .calendarCard {
                grid-template-columns: 100px minmax(0, 1fr);
                gap: 15px;
                padding: 20px;
            }
        }

        @media (max-width: 768px) {
            .eventsShell {
                width: min(100% - 40px, 680px);
            }

            .eventsHero {
                grid-template-columns: 1fr;
                gap: 28px;
                padding-block: 40px;
            }

            .heroPhoto {
                max-height: 440px;
            }

            .primaryStats {
                padding: 42px 20px;
            }

            .statsGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                row-gap: 28px;
            }

            .statItem,
            .statItem:first-child {
                border-left: 0;
            }

            .contentSection {
                padding-block: 56px;
            }

            .calendarGrid,
            .typesGrid {
                grid-template-columns: 1fr;
            }

            .typesSection {
                padding-block: 56px;
            }

            .aboutNote {
                padding-top: 54px;
            }

            .echoStats {
                padding-inline: 20px;
            }
        }

        @media (max-width: 560px) {
            .eventsShell {
                width: min(100% - 36px, 480px);
            }

            .eventsHero h1 {
                font-size: clamp(2.35rem, 11vw, 3.5rem);
            }

            .heroText {
                font-size: 1rem;
            }

            .eventsHero .gradientButton {
                width: 100%;
            }

            .calendarCard {
                grid-template-columns: 1fr;
                gap: 13px;
            }

            .dateBadge {
                align-items: flex-start;
                width: fit-content;
                min-width: 150px;
                text-align: left;
            }

            .eventTypeCard {
                min-height: auto;
            }

            .signupForm {
                flex-direction: column;
                align-items: stretch;
            }

            .signupForm .gradientButton {
                width: 100%;
            }
        }

        @media (max-width: 420px) {
            .primaryStats .statsGrid,
            .echoStats .statsGrid {
                grid-template-columns: 1fr;
            }

            .statItem {
                min-height: auto;
                padding-block: 8px;
            }

            .primaryStats h2 {
                margin-bottom: 23px;
            }

            .echoStats {
                padding-block: 30px;
            }

            .sectionHeading {
                text-align: left;
            }

            .sectionIntro {
                text-align: left;
            }

            .contactSection {
                padding-inline: 18px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .gradientButton,
            .calendarCard,
            .eventTypeCard {
                transition: none;
            }

            .gradientButton:hover,
            .calendarCard:hover,
            .eventTypeCard:hover {
                transform: none;
            }
        }

/* virtual-events.html */
.siteFooter {
            background-color: var(--site-surface);
            color: var(--site-text);
            border-top: 1px solid var(--site-border);
            padding-top: 56px;
            padding-bottom: 32px;
            padding-left: 32px;
            padding-right: 32px;
        }

        .footerInner {
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
        }

        .footerGrid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
            gap: 32px;
        }

        .footerBrand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--site-text);
        }

        .footerBrandIcon {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(157, 98, 192, 0.16);
            color: var(--site-accent);
            font-size: 1.15rem;
        }

        .footerBrandText {
            font-size: 1.15rem;
            font-weight: 700;
        }

        .footerTagline {
            margin-top: 16px;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            color: var(--site-muted);
            font-size: 0.95rem;
            max-width: 34ch;
        }

        .footerHeading {
            margin-top: 0;
            margin-bottom: 14px;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--site-muted);
        }

        .footerList {
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            display: grid;
            gap: 10px;
        }

        .footerLink {
            color: var(--site-text);
            text-decoration: none;
            font-size: 0.95rem;
            border-bottom: 1px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .footerLink:hover {
            color: var(--site-primary);
            border-bottom-color: var(--site-primary);
        }

        .footerContactList {
            gap: 12px;
        }

        .footerContactItem {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.95rem;
            color: var(--site-muted);
        }

        .footerContactItem i {
            color: var(--site-accent);
            margin-top: 3px;
        }

        .footerNotice {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-top: 44px;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 24px;
            padding-right: 24px;
            border-top: 1px solid var(--site-border);
            border-right: 1px solid var(--site-border);
            border-bottom: 1px solid var(--site-border);
            border-left: 4px solid var(--site-accent);
            border-radius: var(--site-radius);
            background-color: var(--site-bg);
        }

        .footerBadge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: var(--site-accent);
            color: var(--site-on-accent);
            font-weight: 700;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .footerNoticeText {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
        }

        .footerDisclosure {
            margin-top: 20px;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .footerBottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 12px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid var(--site-border);
        }

        .footerCopyright,
        .footerMeta {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.85rem;
            color: var(--site-muted);
        }

        .cookieBanner {
            position: fixed;
            left: 16px;
            right: 16px;
            bottom: 16px;
            z-index: 60;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 18px;
            padding-bottom: 18px;
            padding-left: 22px;
            padding-right: 22px;
            background-color: var(--site-surface);
            color: var(--site-text);
            border: 1px solid var(--site-border);
            border-radius: var(--site-radius);
            box-shadow: 0 12px 28px rgba(18, 18, 15, 0.18);
        }

        .cookieText {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 0.9rem;
            color: var(--site-muted);
            max-width: 62ch;
        }

        .cookieButton {
            border: 0;
            cursor: pointer;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 26px;
            padding-right: 26px;
            border-radius: 999px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--site-on-primary);
            background-image: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            transition: transform 0.2s ease;
        }

        .cookieButton:hover {
            transform: scale(1.02);
        }

        .isHidden {
            display: none !important;
        }

        @media (max-width: 900px) {
            .footerGrid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 560px) {
            .siteFooter {
                padding-top: 40px;
                padding-bottom: 28px;
                padding-left: 20px;
                padding-right: 20px;
            }

            .footerGrid {
                grid-template-columns: 1fr;
            }

            .footerNotice {
                flex-direction: column;
            }
        }