/* ═══════════════════════════════════════════════════════════════
   SECTIONS - Shared section system for all home pages
   ═══════════════════════════════════════════════════════════════

   Replaces per-page section styling (hp-, ar-, cl-, hy-, cg-).
   Each page still owns its unique/custom components.

   LAYOUT CLASSES:
     .sec                         - section shell (max-width, padding)
     .sec--tinted                 - light grey background
     .sec--dark                   - dark background, light text
     .sec--atmospheric            - full-bleed background image + overlay

   HEADER:
     .sec__label                  - eyebrow / category label
     .sec__heading                - section H2
     .sec__sub                    - subtitle (short, after heading)
     .sec__intro                  - intro paragraph (longer, centered)

   SPLITS (two-column):
     .split                       - 50 / 50
     .split--60                   - 60 / 40
     .split--70                   - 70 / 30
     .split--reverse              - visual left, copy right

   GRIDS:
     .card-grid--2                - 2 equal columns
     .card-grid--3                - 3 equal columns
     .card-grid--4                - 4 equal columns
     .card-grid--5                - 5 equal columns

   CARDS:
     .card                        - white bordered card
     .card--icon                  - icon + title + text (horizontal)
     .tile                        - image-top card

   COMPONENTS:
     .browser-frame               - screenshot in browser chrome
     .stat-strip                  - horizontal stat values
     .cta-block                   - centered CTA section
     .atmospheric                 - full-width bg image section

   BUTTONS:
     .sec-btn                     - base button
     .sec-btn--primary            - purple CTA
     .sec-btn--secondary          - white bordered
     .sec-btn--outline            - hollow with purple border
     .sec-btn--ghost              - transparent bordered
     .sec-btn--lg                 - larger sizing
     .sec-btn--light              - light variant for dark sections

   ═══════════════════════════════════════════════════════════════ */


/* ─── HEADING DEFAULTS ───
   Bare h2/h3 inside our pages otherwise pick up the browser default
   ~0.83em top margin, which adds inconsistent space on top of section
   padding when split columns stack on mobile. */

.sections-test h2, .sections-test h3, .sections-test h4,
.home h2, .home h3, .home h4,
.art h2, .art h3, .art h4,
.collecting h2, .collecting h3, .collecting h4,
.history h2, .history h3, .history h4,
.meta h2, .meta h3, .meta h4,
.legal h2, .legal h3, .legal h4,
.discord h2, .discord h3, .discord h4 {
    margin-top: 0;
}


/* ─── DESIGN TOKENS ─── */

.sections-test,
.home, .art, .collecting, .history, .meta, .legal, .discord {
    --sec-max: 1280px;
    --sec-gutter: 56px;
    --sec-text: #141a21;
    --sec-muted: #3d4a5c;
    --sec-faint: #7a8699;
    --sec-border: #dfe3ea;
    --sec-surface: #f4f6f9;
    --sec-accent: #7b42b8;
    --sec-accent-hover: #6a379f;
    --sec-accent-subtle: rgba(123, 66, 184, 0.07);
    --sec-radius: 16px;
    --sec-radius-sm: 12px;

    /* Spacing tokens */
    --sec-pad-y: 96px;
    --sec-split-gap: 64px;
    --sec-card-gap: 40px;
    --sec-card-pad: 40px;
    --sec-card-pad-sm: 24px;

    /* Typography tokens */
    --sec-type-hero: 4rem;
    --sec-type-h2: 2.4em;
    --sec-type-h3: 1.4em;
    --sec-type-intro: 1.12em;
    --sec-type-body: 1em;
    --sec-type-label: 0.78em;
    --sec-type-caption: 0.75em;

    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--sec-text);
}


/* ═══════════════════════════════════════════════════════════════
   SECTION SHELL
   ═══════════════════════════════════════════════════════════════ */

.sec {
    max-width: var(--sec-max);
    margin: 0 auto;
    padding: var(--sec-pad-y) var(--sec-gutter);
}

.sec--tinted {
    background: var(--sec-surface);
    max-width: none;
}

.sec--tinted > .sec__inner {
    max-width: var(--sec-max);
    margin: 0 auto;
}

.sec--dark {
    background: var(--sec-text);
    color: rgba(255, 255, 255, 0.92);
    max-width: none;
}

.sec--dark > .sec__inner {
    max-width: var(--sec-max);
    margin: 0 auto;
}

/* Tinted/dark sections need inner padding since they go full-width */
.sec--tinted,
.sec--dark {
    padding-left: var(--sec-gutter);
    padding-right: var(--sec-gutter);
}


/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER
   ═══════════════════════════════════════════════════════════════ */

.sec__label {
    display: block;
    font-size: var(--sec-type-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sec-accent);
    margin-bottom: 16px;
}

.sec__label--light {
    color: rgba(190, 160, 230, 0.9);
}

.sec__heading {
    font-size: var(--sec-type-h2);
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.sec--dark .sec__heading {
    color: #fff;
}

.sec__sub {
    font-size: 1.05em;
    color: var(--sec-faint);
    margin: 0 0 48px;
}

.sec__intro {
    font-size: var(--sec-type-intro);
    color: var(--sec-muted);
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
    line-height: 1.75;
}

.sec__intro--left {
    text-align: left;
    margin-left: 0;
}

.sec__intro--full {
    max-width: none;
}

.sec__intro--light {
    color: rgba(255, 255, 255, 0.65);
}


/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */

/* ── Split hero (copy + visual) ── */

.hero {
    max-width: var(--sec-max);
    margin: 0 auto;
    padding: 88px var(--sec-gutter) 64px;
}

.hero--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sec-split-gap);
    align-items: center;
    min-height: 520px;
}

.hero--full {
    text-align: center;
}

.hero--full .hero__subhead {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.hero__eyebrow {
    display: block;
    font-size: var(--sec-type-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sec-accent);
    margin-bottom: 20px;
}

.hero__headline {
    font-size: var(--sec-type-hero);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin: 0 0 24px;
}

.hero__subhead {
    font-size: 1.18em;
    color: var(--sec-muted);
    line-height: 1.6;
    margin: 0 0 36px;
}

.hero__ctas {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.hero--full .hero__ctas {
    justify-content: center;
}


/* ═══════════════════════════════════════════════════════════════
   SPLIT LAYOUTS - Two-column
   ═══════════════════════════════════════════════════════════════ */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sec-split-gap);
    align-items: center;
}

.split--60 {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--sec-split-gap);
    align-items: center;
}

.split--40-60 {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--sec-split-gap);
    align-items: center;
}

.split--70 {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: var(--sec-split-gap);
    align-items: center;
}

.split--reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sec-split-gap);
    align-items: center;
}

.split--top {
    align-items: start;
}

/* Fixed narrow right column (for tier ladders, sidebars) */
.split--narrow-right {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--sec-split-gap);
    align-items: start;
}


/* ═══════════════════════════════════════════════════════════════
   CARD GRIDS
   ═══════════════════════════════════════════════════════════════ */

.card-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sec-card-gap);
}

.card-grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sec-card-gap);
}

.card-grid--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sec-card-gap);
}

.card-grid--5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.card-grid--gap-lg {
    gap: 28px;
}


/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */

/* ── Base card ── */

.card {
    background: #f8fafc;
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius);
    padding: var(--sec-card-pad);
}

/* On tinted/silver section backgrounds, keep cards white for contrast */
.sec--tinted .card {
    background: #fff;
}

.card h3 {
    font-size: var(--sec-type-h3);
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.3;
}

.card h4 {
    font-size: 1.15em;
    font-weight: 700;
    margin: 0 0 8px;
}

.card p {
    color: var(--sec-muted);
    margin: 0;
    line-height: 1.65;
}

.card--lg {
    padding: 52px 42px 56px;
    display: flex;
    flex-direction: column;
}

.card--lg > p {
    margin-bottom: 24px;
}

.card__cta {
    margin-top: auto;
    align-self: center;
}


/* ── Icon card (icon left, content right - or icon top) ── */

.card--icon {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 36px;
    border-top: 3px solid var(--sec-border);
}

.card--icon .card__icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--sec-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card--icon .card__icon svg {
    width: 26px;
    height: 26px;
    color: var(--sec-accent);
}

.card--icon .card__label {
    font-size: var(--sec-type-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sec-faint);
    margin-bottom: 4px;
}

.card--icon h3 {
    font-size: 1.32em;
    margin: 0 0 8px;
}

/* Card accent top-border themes */
.card--accent-purple { border-top-color: var(--sec-accent); }
.card--accent-purple .card__icon { background: rgba(123, 66, 184, 0.08); }
.card--accent-gold { border-top-color: #c8a44e; }
.card--accent-gold .card__icon { background: rgba(200, 164, 78, 0.08); color: #c8a44e; }
.card--accent-gold .card__icon svg { color: #c8a44e; }
.card--accent-green { border-top-color: #3d8a6e; }
.card--accent-green .card__icon { background: rgba(61, 138, 110, 0.08); }
.card--accent-green .card__icon svg { color: #3d8a6e; }
.card--accent-blue { border-top-color: #3b6fbf; }
.card--accent-blue .card__icon { background: rgba(59, 111, 191, 0.08); }
.card--accent-blue .card__icon svg { color: #3b6fbf; }


/* ── Tile card (image + text body) ── */

.tile {
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.tile:hover {
    /* border-color: #c0c8d4;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); */
}

.tile__art {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sec-surface);
}

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

.tile__body {
    padding: 28px 28px 32px;
}

.tile__body h3 {
    font-size: 1.2em;
    font-weight: 700;
    margin: 0 0 8px;
}

.tile__body p {
    font-size: 0.95em;
    color: var(--sec-muted);
    margin: 0;
    line-height: 1.6;
}


/* ── Small icon card (icon-top, centered or left) ── */

.icon-card {
    text-align: center;
}

.icon-card__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-card__icon svg {
    width: 32px;
    height: 32px;
    color: var(--sec-accent);
}

.icon-card h3 {
    font-size: 1.1em;
    font-weight: 700;
    margin: 0 0 8px;
}

.icon-card h3 svg {
    width: 20px;
    height: 20px;
    vertical-align: -3px;
    margin-right: 6px;
    color: var(--sec-accent);
}

.icon-card p {
    font-size: 0.92em;
    color: var(--sec-muted);
    margin: 0;
    line-height: 1.6;
}

/* Left-aligned variant */
.icon-card--left {
    text-align: left;
}

.icon-card--left .icon-card__icon {
    margin: 0 0 16px;
}


/* ═══════════════════════════════════════════════════════════════
   BROWSER FRAME
   ═══════════════════════════════════════════════════════════════ */

.browser-frame {
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.browser-frame__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: var(--sec-surface);
    border-bottom: 1px solid var(--sec-border);
}

.browser-frame__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cdd3dc;
}

.browser-frame__url {
    margin-left: 12px;
    font-size: 0.78em;
    color: var(--sec-faint);
    font-weight: 500;
}

.browser-frame__img {
    display: block;
    width: 100%;
    height: auto;
}


/* ═══════════════════════════════════════════════════════════════
   STAT STRIP
   ═══════════════════════════════════════════════════════════════ */

.stat-strip {
    padding: 40px var(--sec-gutter);
    border-top: 1px solid var(--sec-border);
    border-bottom: 1px solid var(--sec-border);
}

.stat-strip__inner {
    max-width: var(--sec-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.stat-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
}

.stat-strip__value {
    font-size: 2.4em;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--sec-text);
}

.stat-strip__label {
    font-size: var(--sec-type-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sec-faint);
    margin-top: 6px;
}

.stat-strip__divider {
    width: 1px;
    height: 48px;
    background: var(--sec-border);
}


/* ═══════════════════════════════════════════════════════════════
   CTA BLOCK - centered call-to-action section
   ═══════════════════════════════════════════════════════════════ */

.cta-block {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.cta-block h2 {
    font-size: var(--sec-type-h2);
    font-weight: 800;
    margin: 0 0 20px;
    letter-spacing: -0.025em;
}

.cta-block p {
    font-size: var(--sec-type-intro);
    color: var(--sec-muted);
    line-height: 1.75;
    margin: 0 0 36px;
}

.cta-block__date {
    display: block;
    font-size: var(--sec-type-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sec-accent);
    margin-bottom: 16px;
}

.cta-block__buttons {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════
   ATMOSPHERIC - full-bleed background image
   ═══════════════════════════════════════════════════════════════ */

.atmospheric {
    position: relative;
    padding: 120px var(--sec-gutter);
    overflow: hidden;
}

.atmospheric__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

.atmospheric__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 16, 0.82) 0%,
        rgba(10, 10, 16, 0.70) 100%
    );
}

.atmospheric__content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
}

.atmospheric__content h2 {
    font-size: var(--sec-type-h2);
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px;
    letter-spacing: -0.025em;
}

.atmospheric__content p {
    font-size: var(--sec-type-intro);
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.75;
    margin: 0 0 20px;
}

.atmospheric__buttons {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 36px;
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.sec-btn {
    display: inline-block;
    padding: 16px 36px;
    border-radius: 10px;
    font-size: 1.02em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s, border-color 0.2s;
    border: 1.5px solid transparent;
    line-height: 1;
}

.sec-btn:hover {
    transform: translateY(-1px);
}

.sec-btn--primary {
    background: var(--sec-accent);
    color: #fff;
    border-color: var(--sec-accent);
}

.sec-btn--primary:hover {
    background: var(--sec-accent-hover);
    border-color: var(--sec-accent-hover);
    box-shadow: 0 6px 24px rgba(139, 71, 208, 0.32);
}

.sec-btn--secondary {
    background: #fff;
    color: var(--sec-text);
    border-color: var(--sec-border);
}

.sec-btn--secondary:hover {
    border-color: var(--sec-muted);
    background: var(--sec-surface);
}

.sec-btn--outline {
    background: transparent;
    color: var(--sec-accent);
    border-color: var(--sec-accent);
}

.sec-btn--outline:hover {
    background: var(--sec-accent);
    color: #fff;
    border-color: var(--sec-accent);
    box-shadow: 0 6px 24px rgba(139, 71, 208, 0.22);
}

.sec-btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

.sec-btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
}

.sec-btn--lg {
    padding: 18px 44px;
    font-size: 1.06em;
}

.sec-btn--light {
    background: #fff;
    color: var(--sec-accent);
    border-color: #fff;
}

.sec-btn--light:hover {
    background: var(--sec-surface);
    box-shadow: 0 6px 24px rgba(255, 255, 255, 0.2);
}


/* ═══════════════════════════════════════════════════════════════
   BULLET LIST
   ═══════════════════════════════════════════════════════════════ */

.sec-bullets {
    list-style: none;
    padding: 0;
    margin: 28px 0 40px;
}

.sec-bullets li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 14px;
    line-height: 1.55;
}

.sec-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sec-accent);
}

.sec-bullets--cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
}

@media (max-width: 600px) {
    .sec-bullets--cols-2 {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PROSE - long-form / markdown-rendered content
   ═══════════════════════════════════════════════════════════════ */

.sec__prose {
    max-width: 760px;
    font-size: var(--sec-type-body);
    line-height: 1.75;
    color: var(--sec-text);
}

.sec__prose h1 {
    font-size: 2em;
    font-weight: 800;
    margin: 40px 0 16px;
    letter-spacing: -0.02em;
}

.sec__prose h2 {
    font-size: 1.35em;
    font-weight: 700;
    margin: 40px 0 12px;
}

.sec__prose h3 {
    font-size: 1.1em;
    font-weight: 600;
    margin: 28px 0 8px;
}

.sec__prose p,
.sec__prose ul,
.sec__prose ol {
    margin: 0 0 16px;
    color: var(--sec-muted);
}

.sec__prose ul,
.sec__prose ol {
    padding-left: 24px;
}

.sec__prose li {
    margin: 4px 0;
}

.sec__prose a {
    color: var(--sec-accent);
    text-decoration: underline;
}

.sec__prose a:hover {
    text-decoration: none;
}

.sec__prose strong {
    color: var(--sec-text);
    font-weight: 600;
}

.sec__prose em {
    color: var(--sec-faint);
    font-style: italic;
}

.sec__prose hr {
    border: 0;
    border-top: 1px solid var(--sec-border);
    margin: 32px 0;
}


/* ═══════════════════════════════════════════════════════════════
   PAGE FOOT - small faint link row (Privacy / Terms / etc.)
   ═══════════════════════════════════════════════════════════════ */

.sec__foot {
    margin-top: 120px;
    padding: 24px 0 32px;
    text-align: center;
    font-size: 0.85em;
    color: var(--sec-faint);
}

@media (max-width: 860px) {
    .sec__foot {
        margin-top: 64px;
    }
}

@media (max-width: 560px) {
    .sec__foot {
        margin-top: 40px;
        padding: 16px 0 24px;
    }
}

.sec__foot a {
    color: inherit;
    text-decoration: none;
    margin: 0 14px;
    cursor: pointer;
}

.sec__foot a:hover {
    color: var(--sec-accent);
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════
   TWO-COLUMN TEXT
   ═══════════════════════════════════════════════════════════════ */

.two-col-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.two-col-text h3 {
    font-size: 1.15em;
    font-weight: 700;
    margin: 0 0 12px;
}

.two-col-text p {
    color: var(--sec-muted);
    line-height: 1.65;
    margin: 0 0 16px;
}


/* ═══════════════════════════════════════════════════════════════
   IMAGE STRIP (3-col images with captions)
   ═══════════════════════════════════════════════════════════════ */

.image-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sec-card-gap);
    margin-top: 48px;
}

.image-strip__item {
    text-align: center;
}

.image-strip__frame {
    border-radius: var(--sec-radius);
    overflow: hidden;
    background: var(--sec-surface);
    aspect-ratio: 1;
}

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

.image-strip__caption {
    display: block;
    font-size: var(--sec-type-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sec-faint);
    margin-top: 14px;
}


/* ═══════════════════════════════════════════════════════════════
   ART FRAME (shared image container)
   ═══════════════════════════════════════════════════════════════ */

.sec-art-frame {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--sec-radius);
    overflow: hidden;
    background: var(--sec-surface);
}

.sec-art-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--sec-radius);
}

/* ═══════════════════════════════════════════════════════════════
   COMPARE PANELS (side-by-side labeled images)
   ═══════════════════════════════════════════════════════════════ */

.compare-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.compare-panel__img {
    aspect-ratio: 1;
    border-radius: var(--sec-radius);
    overflow: hidden;
    background: var(--sec-surface);
}

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

.compare-panel__label {
    display: block;
    font-size: var(--sec-type-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sec-faint);
    text-align: center;
    margin-top: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   ERA HEADER (for history-style eras with date + title + intro)
   ═══════════════════════════════════════════════════════════════ */

.era-header__number {
    display: block;
    font-size: var(--sec-type-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sec-accent);
    margin-bottom: 12px;
}

.era-header__title {
    font-size: 2.6em;
    font-weight: 800;
    margin: 0 0 20px;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.era-header__intro {
    font-size: var(--sec-type-intro);
    color: var(--sec-muted);
    line-height: 1.75;
    margin: 0 0 36px;
    max-width: 760px;
}

/* Subsections within eras */
.era-subsection {
    margin-bottom: 28px;
}

.era-subsection h3 {
    font-size: 1.15em;
    font-weight: 700;
    margin: 0 0 8px;
}

.era-subsection p {
    color: var(--sec-muted);
    line-height: 1.65;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════════ */

.accordion__item {
    border-bottom: 1px solid var(--sec-border);
}

.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.08em;
    font-weight: 600;
    color: var(--sec-text);
    text-align: left;
}

.accordion__chevron {
    transition: transform 0.25s;
    color: var(--sec-faint);
    flex-shrink: 0;
}

.accordion__item--open .accordion__chevron {
    transform: rotate(180deg);
}

.accordion__content {
    display: none;
    padding: 0 0 28px;
}

.accordion__item--open .accordion__content {
    display: block;
}

.accordion__content p {
    color: var(--sec-muted);
    line-height: 1.7;
    margin: 0 0 16px;
}

.accordion__content ul {
    color: var(--sec-muted);
    line-height: 1.7;
    padding-left: 20px;
    margin: 0 0 16px;
}

.accordion__content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}

.accordion__content th {
    text-align: left;
    font-weight: 700;
    padding: 10px 16px;
    border-bottom: 2px solid var(--sec-border);
}

.accordion__content td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--sec-border);
    color: var(--sec-muted);
}

.accordion__content a {
    color: var(--sec-accent);
    text-decoration: none;
}

.accordion__content a:hover {
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════
   THUMBNAILS (labeled images, e.g. meta size section)
   ═══════════════════════════════════════════════════════════════ */

.thumbnails {
    display: flex;
    gap: 16px;

    .thumb {
        flex: 1;
        text-align: center;
    }

    .thumb img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: var(--sec-radius);
        display: block;
    }

    .thumb__label {
        display: block;
        font-size: var(--sec-type-caption);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--sec-faint);
        margin-top: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   IDEA CARDS (icon + title + text, vertical stack)
   ═══════════════════════════════════════════════════════════════ */

.idea-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.idea {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.idea svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--sec-accent);
    margin-top: 2px;
}

.idea h4 {
    font-size: 1em;
    font-weight: 700;
    margin: 0 0 4px;
}

.idea p {
    font-size: 0.88em;
    color: var(--sec-muted);
    margin: 0;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION SIDE IMAGE (for split layouts)
   ═══════════════════════════════════════════════════════════════ */

.split__image img {
    width: 100%;
    border-radius: var(--sec-radius);
    display: block;
}

.split__image--shadow img {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
}


/* ═══════════════════════════════════════════════════════════════
   THREE-COLUMN TEXT (for experiments-style sections)
   ═══════════════════════════════════════════════════════════════ */

.three-col-text {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}

.three-col-text h3 {
    font-size: 1.15em;
    font-weight: 700;
    margin: 0 0 12px;
}

.three-col-text p {
    color: var(--sec-muted);
    line-height: 1.65;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   THREE-COLUMN COMPARISON LISTS
   ═══════════════════════════════════════════════════════════════ */

.compare-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--sec-border);
}

.compare-cols h4 {
    font-size: 1em;
    font-weight: 700;
    margin: 0 0 12px;
}

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

.compare-cols li {
    padding: 6px 0;
    color: var(--sec-muted);
    font-size: 0.92em;
    border-bottom: 1px solid var(--sec-surface);
}


/* ═══════════════════════════════════════════════════════════════
   SCREENSHOT GRID (3-column screenshots)
   ═══════════════════════════════════════════════════════════════ */

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
}

.screenshot-grid img {
    width: 100%;
    border-radius: var(--sec-radius-sm);
    display: block;
    aspect-ratio: 1;
    object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════════
   MODIFIERS / VARIANTS
   ═══════════════════════════════════════════════════════════════ */

/* Ensure tile body text is always left-aligned (even in centered sections) */
.tile__body {
    text-align: left;
}

/* Card icon always left-aligned content */
.card--icon {
    text-align: left;
}

/* Card compact variant - smaller text for dense info cards */
.card--compact h3,
.card--compact h4 {
    font-size: 1em;
    margin-bottom: 14px;
}

.card--compact p,
.card--compact li {
    font-size: 0.9em;
    line-height: 1.5;
}

/* Card list styling - purple bullets */
.card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 6px;
    color: var(--sec-muted);
    font-size: 0.9em;
    line-height: 1.5;
}

.card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sec-accent);
}

/* Icon card bordered variant (for meta hero cards) */
.icon-card--bordered {
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-sm);
    background: #f8fafc;
    padding: 24px 16px 28px;
}

/* On tinted/silver section backgrounds, keep icon cards white for contrast */
.sec--tinted .icon-card--bordered {
    background: #fff;
}

/* Purple underline on h3 in left icon cards (meta identity blocks) */
.icon-card--underline h3 {
    padding-bottom: 14px;
    border-bottom: 2px solid var(--sec-accent);
    margin-bottom: 12px;
}

/* Compare columns with purple borders and bullets */
.compare-cols--purple {
    border-top: none;
    padding-top: 0;
}

.compare-cols--purple > div {
    border-top: 2px solid var(--sec-accent);
    padding-top: 20px;
}

.compare-cols--purple li {
    border-bottom: none;
    position: relative;
    padding-left: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.compare-cols--purple li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sec-accent);
}

/* Accordion bordered variant (card-style items) */
.accordion--bordered .accordion__item {
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-sm);
    margin-bottom: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s;
}

.accordion--bordered .accordion__item:hover {
    border-color: #c0c8d4;
}

.accordion--bordered .accordion__trigger {
    padding: 22px 28px;
}

.accordion--bordered .accordion__content {
    padding: 0 28px 28px;
}

/* Dark section alt color (history lands) */
.sec--dark-alt {
    background: #242b32;
    color: rgba(255, 255, 255, 0.92);
    max-width: none;
    padding-left: var(--sec-gutter);
    padding-right: var(--sec-gutter);
}

.sec--dark-alt > .sec__inner {
    max-width: var(--sec-max);
    margin: 0 auto;
}

.sec--dark-alt .sec__heading,
.sec--dark-alt .era-header__title {
    color: #fff;
}

.sec--dark-alt .era-header__number {
    color: rgba(190, 160, 230, 0.9);
}

.sec--dark-alt .era-header__intro,
.sec--dark-alt .era-subsection p {
    color: rgba(255, 255, 255, 0.6);
}

.sec--dark-alt .era-subsection h3 {
    color: #fff;
}

/* Collecting section SVG sizing in cards */
.card__svg {
    width: 32px;
    height: 32px;
    color: var(--sec-accent);
    margin-bottom: 16px;
}

.card__svg svg {
    width: 100%;
    height: 100%;
}


/* ═══════════════════════════════════════════════════════════════
   TEST PAGE LABELS
   ═══════════════════════════════════════════════════════════════ */

.sec-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    background: #e74c3c;
    padding: 6px 14px;
    border-radius: 4px;
    margin: 0 0 0 var(--sec-gutter);
    width: fit-content;
}

.sec-label--page {
    background: #2c3e50;
    font-size: 0.8125rem;
    padding: 10px 20px;
    margin-bottom: 0;
}

.sec-label--type {
    background: #27ae60;
}

.sec-label span {
    opacity: 0.7;
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════
   PAGE DIVIDER (between page sections on test page)
   ═══════════════════════════════════════════════════════════════ */

.page-divider {
    background: #2c3e50;
    color: #fff;
    padding: 20px var(--sec-gutter);
    font-size: 1.2em;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .sections-test,
    .home, .art, .collecting, .history, .meta, .legal {
        --sec-gutter: 36px;
        --sec-split-gap: 48px;
    }
}

@media (max-width: 860px) {
    .sections-test,
    .home, .art, .collecting, .history, .meta, .legal {
        --sec-gutter: 32px;
        --sec-pad-y: 52px;
        --sec-split-gap: 32px;
        --sec-card-gap: 28px;
        /* font-size stays at the rem-based base so the html mobile bump applies. */
    }

    .hero--split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .split,
    .split--60,
    .split--40-60,
    .split--70,
    .split--reverse,
    .split--narrow-right {
        grid-template-columns: 1fr;
    }

    .card-grid--3,
    .card-grid--4,
    .card-grid--5 {
        grid-template-columns: 1fr;
    }

    .two-col-text,
    .three-col-text {
        grid-template-columns: 1fr;
    }

    .compare-panels {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .compare-cols {
        grid-template-columns: 1fr;
    }

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

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

    .stat-strip__inner {
        gap: 8px;
    }

    .stat-strip__item {
        padding: 12px 20px;
    }

    .stat-strip__value {
        font-size: 1.8em;
    }

    .hero__headline {
        font-size: 2.8em;
    }

    .hero {
        padding-top: 48px;
        padding-bottom: 52px;
    }

    .hero__eyebrow {
        margin-bottom: 12px;
    }

    .hero__subhead {
        margin-bottom: 20px;
    }

    .sec__intro {
        margin-bottom: 32px;
        line-height: 1.65;
    }

    .sec__sub {
        margin-bottom: 28px;
    }

    .sec__label {
        margin-bottom: 12px;
    }

    .atmospheric {
        padding: 60px var(--sec-gutter);
    }

    .atmospheric__buttons {
        margin-top: 24px;
    }

    .thumbnails {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .sections-test,
    .home, .art, .collecting, .history, .meta, .legal {
        --sec-gutter: 25px;
        --sec-pad-y: 40px;
        --sec-split-gap: 28px;
        --sec-card-gap: 28px;
        /* font-size stays at the rem-based base; html mobile bump handles scaling. */
    }

    .hero__headline {
        font-size: 1.95em;
    }

    .hero {
        padding-top: 36px;
        padding-bottom: 40px;
    }

    .hero__subhead {
        font-size: 1.02em;
        margin-bottom: 20px;
    }

    .sec__heading,
    .era-header__title {
        font-size: 1.65em;
    }

    .sec__intro {
        font-size: 1em;
        margin-bottom: 32px;
    }

    .sec__sub {
        margin-bottom: 24px;
    }

    .card--lg {
        padding: var(--sec-card-pad-sm);
    }

    .card--icon {
        flex-direction: column;
        gap: 16px;
    }

    .card-grid--2 {
        grid-template-columns: 1fr;
    }

    .stat-strip__divider {
        display: none;
    }

    .stat-strip__inner {
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .atmospheric {
        padding: 48px var(--sec-gutter);
    }

    .atmospheric__content h2 {
        font-size: 1.65em;
    }

    .atmospheric__content p {
        font-size: 1em;
    }

    .atmospheric__content p:last-of-type {
        margin-bottom: 0;
    }

    .atmospheric__buttons {
        margin-top: 20px;
    }
}