/* ========================================
   PRVEN — Global Styles
   Dark + Gold | High-End Athletic Streetwear
   ======================================== */

/* Outfit is loaded via <link> in base.html — an @import here would
   serialise the font request behind this stylesheet. */

:root {
    --void: #0A0A0A;
    --void-light: #111111;
    --void-mid: #1A1A1A;
    --void-surface: #222222;
    --void-border: #2A2A2A;
    --control-border: #666664;  /* 3.44:1 on --void — control edges (WCAG 1.4.11) */
    --on-gold: #0A0A0A;         /* 8.82:1 on --gold; fixed, gold does not change */
    --void-hover: #333333;

    --gold: #C8A96E;
    --gold-bright: #D4B97E;
    --gold-dim: #8A7348;
    --gold-glow: rgba(200, 169, 110, 0.15);

    /* Gold as TEXT. Split from --gold because #C8A96E on the light theme's bone
       background is 2.05:1 — unreadable. --gold stays the brand colour for
       borders, glows and fills, where contrast rules don't apply; --gold-text
       darkens in light mode so gold type stays legible. */
    --gold-text: #C8A96E;

    --bone: #F5F5F0;
    --bone-dim: #AAAAAA;
    --text-primary: #E8E8E3;
    --text-secondary: #ADADA8;
    /* Was #555555, documented as "decorative only". It did not stay that way:
       133 uses across the CSS and templates, most of them real copy at
       0.75–0.85rem — helper text, fine print, form hints. At 2.66:1 on the
       page and 2.33:1 on a card that failed WCAG AA (4.5:1) and failed even
       the 3:1 large-text floor, on the smallest type on the site.

       Raising it alone would have collided with --text-secondary, so the
       whole scale moved up and kept a visible step between levels. Worst
       case now 5.02:1, on a card. */
    --text-tertiary: #8A8A85;
    /* Interactive muted text: nav pills, sign-out. Kept at least as legible
       as --text-tertiary — something you can click must never be fainter
       than something you only read. */
    --text-ui: #8A8A85;

    --green: #4ADE80;
    --red: #F87171;
    --blue: #60A5FA;

    --shadow-card: none;
    color-scheme: dark;

    /* Aliases for names the templates already use. --border appears 72 times
       and --surface-2 31 times, and neither was ever defined — an undefined
       custom property makes the whole declaration invalid, so those borders and
       panel backgrounds have simply never rendered. Defining them here fixes
       that and gives light mode something to override. */
    --border: var(--void-border);
    --surface-1: var(--void-light);
    --surface-2: var(--void-mid);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    --font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Light theme ----------
   Opt-in only: dark stays the default for everyone, because the brand is built
   on Void Black and following prefers-color-scheme would hand a first-time
   visitor's impression to their OS setting.

   Background is Bone (#F5F5F0) rather than white — the same warm off-white
   already in the palette, so light mode reads as PRVEN in daylight rather than
   as a generic storefront. Every text value below clears WCAG AA 4.5:1 on that
   background; the brand gold is preserved untouched for non-text use. */
[data-theme="light"] {
    --void: #F5F5F0;
    --void-light: #EFEFE9;
    --void-mid: #E8E8E1;
    --void-surface: #FFFFFF;
    --void-border: #DEDDD4;
    --control-border: #8A8A82;  /* 3.18:1 on --void — control edges (WCAG 1.4.11) */
    --on-gold: #0A0A0A;         /* same ink: --gold is identical in both themes */
    --void-hover: #E4E3DA;

    /* Brand gold unchanged — borders, glows, badge fills, SVG strokes. */
    --gold: #C8A96E;
    --gold-bright: #6E5624;   /* text hover: darker = more emphasis on light */
    --gold-dim: #6F6047;
    --gold-glow: rgba(200, 169, 110, 0.18);
    --gold-text: #7D6229;     /* 5.26:1 on bone */

    --bone: #111110;          /* inverts: this is the "emphasis" text colour */
    --bone-dim: #5A5A55;
    --text-primary: #1A1A18;
    --text-secondary: #5A5A55;
    /* These were checked against the page background (#F5F5F0) and passed,
       but never against --void-mid (#E8E8E1), the darkest light surface —
       which is what cards and panels actually sit on. Against that, tertiary
       was 4.36:1 and green 4.12:1, both under AA. Retuned so the worst case
       on any surface clears 4.5:1. */
    --text-tertiary: #646459;
    --text-ui: #5A5A55;

    --green: #15702C;
    --red: #B3261E;
    --blue: #1A4FA0;

    /* Dark mode separates surfaces with lighter fills; on a light background
       that reads as muddy, so depth comes from a soft shadow instead. */
    --shadow-card: 0 1px 2px rgba(17, 17, 16, 0.05), 0 4px 16px rgba(17, 17, 16, 0.04);
    color-scheme: light;

    --border: var(--void-border);
    --surface-1: var(--void-light);
    --surface-2: var(--void-mid);

    /* The dark sheet's soft shadow is 90% black — correct against Void Black,
       far too heavy against bone. */
    --shadow-soft: 0 18px 40px -20px rgba(17, 17, 16, 0.22);
}

[data-theme="light"] .card,
[data-theme="light"] .spec-card,
[data-theme="light"] .bar-card { box-shadow: var(--shadow-card); }

/* The mark is drawn for a dark ground; on bone it needs its own weight. */
[data-theme="light"] .nav-logo-img,
[data-theme="light"] .footer-logo-img { filter: invert(1) hue-rotate(180deg); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font);
    background: var(--void);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: var(--gold-text);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover { color: var(--gold-bright); }

/* ========== NAVIGATION ========== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--void-border);
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--gold-text);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color 0.2s;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a.active { color: var(--gold-text); }

.nav-cta {
    font-size: 0.75rem !important;
    padding: 8px 20px;
    border: 1px solid var(--gold-dim);
    border-radius: 100px;
    color: var(--gold-text) !important;
    transition: all 0.2s;
}
.nav-cta:hover {
    background: var(--gold);
    color: var(--void) !important;
}

/* Mobile menu */
.nav-toggle { display: none; cursor: pointer; }
.nav-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--text-secondary);
    margin: 5px 0;
    transition: 0.3s;
}

@media (max-width: 768px) {
    .nav-toggle { display: block; }
    .nav-links {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--void);
        border-bottom: 1px solid var(--void-border);
        flex-direction: column;
        padding: 1.5rem 2rem;
        gap: 1.2rem;
    }
    .nav-links.active { display: flex; }
}

/* ========== LAYOUT ========== */
.page { padding-top: 64px; }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section {
    padding: 5rem 0;
}

.section-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-dim);
    margin-bottom: 1rem;
}

/* ========== HERO ========== */
.hero {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
    pointer-events: none;
}

.hero-content { position: relative; z-index: 1; }

.hero h1 {
    font-size: 3.5rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}
.hero h1 strong {
    font-weight: 600;
    color: var(--gold-text);
}

.hero p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
}

/* ========== BUTTONS ========== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 32px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: all 0.25s;
}

.btn-gold {
    background: var(--gold);
    /* --on-gold, not --void. --void is the PAGE background, so this used to
       flip with the theme: dark ink on gold in dark mode (8.8:1, fine) and
       cream ink on gold in light mode (2.05:1, unreadable). The gold itself
       is identical in both themes, so its ink must be too. This is the
       primary call to action on the homepage. */
    color: var(--on-gold);
}
.btn-gold:hover {
    background: var(--gold-bright);
    color: var(--on-gold);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    /* --control-border, not --void-border. The latter is a surface divider,
       correct for a card edge and far too faint for the edge of a control:
       it measured 1.38:1 in dark and 1.25:1 in light against a 3:1
       requirement, so the secondary CTA read as plain text rather than a
       button in both themes. */
    border: 1px solid var(--control-border);
}
.btn-outline:hover {
    border-color: var(--gold-dim);
    color: var(--gold-text);
}


/* ========== CARDS ========== */
.card {
    background: var(--void-light);
    border: 1px solid var(--void-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: border-color 0.2s;
}
.card:hover { border-color: var(--void-hover); }

.card-gold {
    border-color: var(--gold-dim);
}
.card-gold:hover { border-color: var(--gold-text); }

/* ========== TIER BADGES ========== */
.tier-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 100px;
}

.tier-standard {
    background: rgba(245, 245, 240, 0.1);
    color: var(--bone);
    border: 1px solid rgba(245, 245, 240, 0.2);
}

.tier-proven {
    background: rgba(200, 200, 200, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(200, 200, 200, 0.2);
}

.tier-gold {
    background: var(--gold-glow);
    color: var(--gold-text);
    border: 1px solid rgba(200, 169, 110, 0.3);
}

/* ========== HOW IT WORKS ========== */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.step-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.step-number {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--gold-dim);
    margin-bottom: 1rem;
}

.step-card h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.step-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

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

/* ========== STANDARDS TABLE ========== */
.standards-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--void-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.standards-table th {
    background: var(--void-mid);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 12px 16px;
    text-align: left;
}

.standards-table td {
    font-size: 0.88rem;
    padding: 14px 16px;
    border-top: 1px solid var(--void-border);
    color: var(--text-secondary);
}

.standards-table td:first-child {
    color: var(--text-primary);
    font-weight: 500;
}

.standards-table .gold-cell {
    color: var(--gold-text);
    font-weight: 500;
}

/* ========== ARCHIVE WALL ========== */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.archive-card {
    background: var(--void-light);
    border: 1px solid var(--void-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.archive-initial {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--void-surface);
    border: 1px solid var(--void-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-text);
    flex-shrink: 0;
}

.archive-name {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 2px;
}

.archive-detail {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ========== FORM ========== */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    font-family: var(--font);
    font-size: 0.9rem;
    padding: 12px 16px;
    background: var(--void-mid);
    border: 1px solid var(--void-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: border-color 0.2s;
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--gold-dim);
}

.form-select option {
    background: var(--void-mid);
    color: var(--text-primary);
}

.form-textarea { min-height: 100px; resize: vertical; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .form-row { grid-template-columns: 1fr; }
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--gold-text);
}

.form-check label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ========== SHOP ========== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.product-card {
    background: var(--void-light);
    border: 1px solid var(--void-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    transition: all 0.25s;
}

.product-card.locked {
    opacity: 0.4;
    filter: blur(1px);
    pointer-events: none;
}

.product-card.unlocked {
    border-color: var(--gold-dim);
}

.product-name {
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.product-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.product-price {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gold-text);
    margin-bottom: 1rem;
}

/* ========== FLASH MESSAGES ========== */
.flash {
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.flash-error {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
    color: var(--red);
}
.flash-success {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
    color: var(--green);
}
.flash-info {
    background: rgba(200, 169, 110, 0.1);
    border: 1px solid rgba(200, 169, 110, 0.2);
    color: var(--gold-text);
}

/* ========== ADMIN ========== */
.admin-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 64px);
}

.admin-sidebar {
    background: var(--void-light);
    border-right: 1px solid var(--void-border);
    padding: 2rem 1.5rem;
}

.admin-sidebar a {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    transition: all 0.15s;
}
.admin-sidebar a:hover {
    background: var(--void-surface);
    color: var(--text-primary);
}
.admin-sidebar a.active {
    background: var(--gold-glow);
    color: var(--gold-text);
}

.admin-content {
    padding: 2rem;
}


.submission-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--void-light);
    border: 1px solid var(--void-border);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    transition: border-color 0.2s;
}
.submission-row:hover { border-color: var(--gold-dim); }

.submission-info { flex: 1; }
.submission-name {
    font-size: 0.9rem;
    font-weight: 500;
}
.submission-detail {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
}


.btn-approve {
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 100px;
    border: 1px solid var(--green);
    background: rgba(74, 222, 128, 0.1);
    color: var(--green);
    cursor: pointer;
    transition: all 0.2s;
}
.btn-approve:hover {
    background: var(--green);
    color: var(--void);
}

.btn-deny {
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 100px;
    border: 1px solid var(--red);
    background: rgba(248, 113, 113, 0.1);
    color: var(--red);
    cursor: pointer;
    transition: all 0.2s;
}
.btn-deny:hover {
    background: var(--red);
    color: var(--void);
}

.btn-flag {
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 100px;
    border: 1px solid var(--gold-dim);
    background: var(--gold-glow);
    color: var(--gold-text);
    cursor: pointer;
    transition: all 0.2s;
}
.btn-flag:hover {
    background: var(--gold);
    color: var(--void);
}

@media (max-width: 768px) {
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--void-border);
        display: flex;
        gap: 0.5rem;
        padding: 1rem;
        overflow-x: auto;
    }
}

/* ========== FOOTER ========== */
.footer {
    border-top: 1px solid var(--void-border);
    padding: 3rem 0;
    text-align: center;
}


.footer p {
    font-size: 0.78rem;
    color: var(--text-tertiary);
}

/* ========== ANIMATIONS ========== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-up {
    animation: fadeUp 0.6s ease-out forwards;
    opacity: 0;
}

.fade-up-delay-1 { animation-delay: 0.1s; }
.fade-up-delay-2 { animation-delay: 0.2s; }
.fade-up-delay-3 { animation-delay: 0.3s; }
.fade-up-delay-4 { animation-delay: 0.4s; }

/* ========== LOCKED OVERLAY ========== */
/* Locked item in the shop grid: readable text, blurred photo only. */
.product-card.locked-card { padding: 1.25rem; }
.locked-card-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--gold-text);
    text-decoration: none;
}
.locked-card-link:hover { text-decoration: underline; }

.locked-overlay {
    position: relative;
}

.locked-overlay::after {
    content: 'LOCKED — EARN ACCESS';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--text-tertiary);
    pointer-events: none;
}

/* ========== CONFIRMATION ========== */
.confirmation {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.confirmation h1 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
}
.confirmation h1 strong {
    color: var(--gold-text);
    font-weight: 600;
}
.confirmation p {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* ========== UTILITIES ========== */
.text-gold { color: var(--gold-text); }
.text-dim { color: var(--text-secondary); }
.mt-4 { margin-top: 2rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }


/* ============================================================
   MOBILE & RESPONSIVE IMPROVEMENTS
   ============================================================ */

/* Standards table — horizontal scroll on small screens */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
}

/* Footer — responsive grid */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem 2rem;
    }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.35rem !important;
    }
}

/* Archive grid — single column below 520px */
@media (max-width: 520px) {
    .archive-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Product grid — single column below 500px */
@media (max-width: 500px) {
    .product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Hero — tighten vertical padding on mobile */
@media (max-width: 768px) {
    .hero {
        min-height: calc(80vh - 64px);
        padding: 3rem 0 4rem;
    }
    .hero:not(.luxury-hero) h1 {
        font-size: 2.2rem !important;
        line-height: 1.2;
    }
    .hero:not(.luxury-hero) p {
        font-size: 0.95rem !important;
    }
}
@media (max-width: 480px) {
    .hero {
        min-height: auto;
        padding: 2.5rem 0 3.5rem;
    }
    .hero:not(.luxury-hero) h1 {
        font-size: 1.85rem !important;
    }
}

/* Container — more breathing room on very small screens */
@media (max-width: 400px) {
    .container {
        padding: 0 1rem;
    }
    .section { padding: 3rem 0; }
}

/* Nav dropdown — full-width touch targets */
@media (max-width: 768px) {
    .nav-links.active {
        padding-bottom: 1rem;
    }
    .nav-links a {
        padding: 0.65rem 1.5rem;
        font-size: 0.9rem;
    }
    .nav-links .nav-cta {
        margin: 0.5rem 1.5rem;
        display: inline-block;
        text-align: center;
    }
}

/* Steps grid — reduce padding on mobile */
@media (max-width: 768px) {
    .step-card {
        padding: 2rem 1.25rem;
    }
    .steps-grid {
        gap: 1rem;
    }
}

/* Confirmation section — tighter on mobile */
@media (max-width: 540px) {
    .confirmation h1 {
        font-size: 1.8rem !important;
    }
}

/* Submission rows — wrap on small screens */
@media (max-width: 520px) {
    .submission-row {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* Step icon circle */
.step-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--gold-glow);
    border: 1px solid rgba(200,169,110,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

/* Tier card sub-label */
.tier-card-price {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin-top: 0.5rem;
    letter-spacing: 0.03em;
}

/* Hero stat bar */
.hero-stat-bar {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--void-border);
    flex-wrap: wrap;
}
.hero-stat {
    text-align: center;
}
.hero-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gold-text);
    line-height: 1;
}
.hero-stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 0.35rem;
}

/* CTA section glow */
.cta-glow::before {
    content: '';
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgba(200,169,110,0.07) 0%, transparent 70%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .hero-stat-bar {
        gap: 1.5rem;
        margin-top: 2rem;
        padding-top: 2rem;
    }
    .hero-stat-value { font-size: 1.2rem; }
}

/* ============================================================
   PRVEN — 2026 refresh: imagery, rhythm, motion, a11y
   Appended intentionally: later rules win over the base sheet.
   ============================================================ */

:root {
    --shadow-soft: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Accessibility ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--gold);
    color: var(--void);
    padding: 10px 18px;
    border-radius: 0 0 var(--radius-sm) 0;
    font-size: 0.8rem;
    font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--void); }

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

/* ---------- Navigation ---------- */
.nav { height: 68px; }
.page { padding-top: 68px; }

.nav-logo {
    display: inline-flex;
    align-items: center;
    height: 100%;
    line-height: 0;
}
.nav-logo-img {
    height: 26px;
    width: auto;
    display: block;
    transition: opacity 0.25s var(--ease);
}
.nav-logo:hover .nav-logo-img { opacity: 0.75; }

.nav-pill {
    font-size: 0.73rem !important;
    padding: 7px 18px;
    border: 1px solid var(--void-border);
    border-radius: 100px;
    color: var(--text-ui) !important;
    transition: border-color 0.2s, color 0.2s;
}
.nav-pill:hover { border-color: var(--void-hover); color: var(--text-secondary) !important; }
.nav-pill-gold {
    border-color: rgba(200, 169, 110, 0.4);
    color: var(--gold-text) !important;
}
.nav-pill-gold:hover { border-color: var(--gold-text); color: var(--gold-bright) !important; }

.nav-toggle {
    background: none;
    border: 0;
    padding: 4px;
    -webkit-appearance: none;
    appearance: none;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 768px) {
    .nav-links { top: 68px; }
}

/* ---------- Typographic rhythm ---------- */
.eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-dim);
    margin-bottom: 1.25rem;
}

.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section-divide { border-top: 1px solid var(--void-border); }

.section-title {
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -0.01em;
    max-width: 20ch;
    margin-bottom: 1rem;
}
.section-title strong { font-weight: 600; color: var(--text-primary); }

.section-lede {
    max-width: 58ch;
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 3rem;
}
.section-title + .steps-grid,
.section-title + .tier-grid,
.section-title + .lineup-grid { margin-top: 3rem; }

.section-actions { margin-top: 3rem; }

/* ---------- Hero ---------- */
.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 520px at 50% 12%, rgba(200, 169, 110, 0.10), transparent 70%),
        linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
.hero::before { display: none; }

.hero-title {
    font-size: clamp(2.4rem, 7vw, 4rem);
    font-weight: 200;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}
.hero-title strong { font-weight: 700; color: var(--gold-text); }

.hero-sub {
    max-width: 52ch;
    margin: 1.75rem auto 0;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

.hero-actions {
    margin-top: 2.25rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-stat-open { font-size: 1.15rem; color: var(--gold-text); }

.hero-note {
    margin-top: 1.5rem;
    font-size: 0.82rem;
    color: var(--gold-dim);
    letter-spacing: 0.04em;
}

/* ---------- Product imagery ----------
   .lineup-frame / .tier-frame are kept ready for real product photography.
   Nothing uses them yet — drop an <img> inside either one and it will be
   framed, contained and shadowed to match the rest of the page. */
.lineup-grid,
.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}


.lineup-frame,
.tier-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--void-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 90% at 50% 0%, #1e1e1e 0%, #141414 55%, #0d0d0d 100%);
    overflow: hidden;
    transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.tier-frame {
    aspect-ratio: 16 / 11;
    padding: 1.25rem;
    margin: -0.5rem -0.5rem 1.5rem;
}

.lineup-frame img,
.tier-frame img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.75));
    transition: transform 0.5s var(--ease);
}


/* ---------- Tier cards ---------- */
.tier-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 2.5rem 1.5rem;
    transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.tier-card h3 {
    margin-top: 1rem;
    font-weight: 400;
    font-size: 1.05rem;
}
.tier-card > p {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}
.tier-card .tier-card-price { margin-top: auto; padding-top: 1.25rem; }

.tier-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}
.tier-card-standard:hover { border-color: var(--void-hover); }
.tier-card-proven:hover  { border-color: #30508C; }
.tier-card-gold:hover    { border-color: var(--gold-dim); }
.tier-card-gold .tier-frame {
    background: radial-gradient(120% 90% at 50% 0%, #23201a 0%, #15130f 55%, #0d0c0a 100%);
    border-color: rgba(200, 169, 110, 0.22);
}
.tier-card-gold > p { color: var(--gold-dim); }
.tier-card-proven .tier-frame {
    background: radial-gradient(120% 90% at 50% 0%, #1a1e2b 0%, #12141c 55%, #0c0d11 100%);
}

/* ---------- Archive / CTA ---------- */
.archive-count {
    font-size: 1.05rem;
    color: var(--gold-text);
    margin-bottom: 1.75rem;
}

.cta-inner { position: relative; z-index: 1; text-align: center; }
.cta-title {
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    font-weight: 300;
    margin-bottom: 1rem;
}
.cta-sub {
    max-width: 46ch;
    margin: 0 auto 2rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

/* ---------- Email capture ---------- */
.signup-band {
    border-top: 1px solid var(--void-border);
    background:
        linear-gradient(180deg, rgba(200, 169, 110, 0.045), transparent 60%),
        var(--void-light);
    padding: 3.5rem 0;
}
.signup-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.signup-copy .eyebrow { margin-bottom: 0.75rem; }
.signup-title {
    font-size: 1.4rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
}
.signup-sub {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 46ch;
}
.signup-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.signup-form input[type="email"] {
    flex: 1 1 200px;
    min-width: 0;
    font-family: var(--font);
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--void);
    border: 1px solid var(--void-border);
    border-radius: 100px;
    padding: 13px 20px;
    transition: border-color 0.2s;
}
.signup-form input[type="email"]::placeholder { color: var(--text-tertiary); }
.signup-form input[type="email"]:focus {
    outline: none;
    border-color: var(--gold-dim);
}
.signup-form .btn { flex: 0 0 auto; }
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0;
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--void-border); padding: 3.5rem 0 2rem; }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}
.footer-logo-img { height: 30px; width: auto; display: block; margin-bottom: 0.9rem; }
.footer-tagline {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    line-height: 1.7;
    max-width: 220px;
}
.footer-email { margin-top: 0.75rem; font-size: 0.78rem; }
/* 16px tall as measured, against the 24px WCAG 2.2 minimum. This is the
   support address — the link someone reaches for when something has already
   gone wrong, which is the worst moment to make them tap twice. */
.footer-email a {
    color: var(--text-tertiary);
    display: inline-block;
    padding: 4px 0;
    min-height: 24px;
}
.footer-email a:hover { color: var(--gold-text); }

.footer-col { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-heading {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 0.3rem;
}
.footer-col a {
    font-size: 0.82rem;
    color: var(--text-secondary);
    transition: color 0.2s;
    /* WCAG 2.2 (2.5.8) sets a 24px minimum for pointer targets. These
       measured 21px tall on the live site, which is a genuine miss on a
       phone — footer links sit close together and a near-miss lands on the
       neighbour. Padding rather than font-size, so nothing looks different. */
    display: inline-block;
    padding: 2px 0;
    min-height: 24px;
}
.footer-col a:hover { color: var(--gold-text); }

.footer-bottom {
    border-top: 1px solid var(--void-border);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.footer-bottom p { font-size: 0.75rem; color: var(--text-tertiary); margin: 0; }

/* ---------- Motion ---------- */
/* Only hide when JS is running — without it the content must stay visible. */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.in-view { opacity: 1; transform: none; }
.steps-grid .reveal:nth-child(2),
.tier-grid .reveal:nth-child(2),
.lineup-grid .reveal:nth-child(2) { transition-delay: 0.09s; }
.steps-grid .reveal:nth-child(3),
.tier-grid .reveal:nth-child(3),
.lineup-grid .reveal:nth-child(3) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .signup-inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
}

@media (max-width: 768px) {
    .container { padding: 0 1.25rem; }
    .lineup-grid, .tier-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .section-title { max-width: none; }
    .footer-bottom { justify-content: flex-start; }
    .signup-form .btn { width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
    .hero-actions .btn { width: 100%; justify-content: center; }
}

/* Badges must not stretch inside the flex-column tier cards. */
.tier-card .tier-badge { align-self: center; }

/* Hero stats: even 2x2 grid on small screens instead of a 3+1 orphan row. */
@media (max-width: 560px) {
    .hero-stat-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem 1rem;
    }
}

/* Mobile hero: get the numbers closer to the fold.
   The hero measured 833px tall on an 812px viewport, so the entire first
   screen was manifesto and the concrete standards — the thing that actually
   makes PRVEN interesting — sat 901px down, behind a deliberate scroll.
   Tightening the stack costs nothing and buys back roughly a third of that. */
@media (max-width: 768px) {
    .hero { padding: 2rem 0 2.5rem; }
    .hero-stat-bar {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        gap: 1.1rem 1rem;
    }
    .hero-actions { margin-top: 1.5rem; gap: 0.6rem; }
    .hero-sub { margin-bottom: 0.5rem; }
    .hero-note { margin-top: 1rem; font-size: 0.8rem; }

    /* A quiet cue that there is more below, so the scroll is invited rather
       than assumed. Hidden once the visitor has started scrolling. */
    .scroll-cue {
        display: block;
        margin: 1.5rem auto 0;
        font-size: 0.68rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-ui);
        animation: cue-bob 2.4s ease-in-out infinite;
    }
}
.scroll-cue { display: none; }
@keyframes cue-bob {
    0%, 100% { transform: translateY(0); opacity: 0.75; }
    50%      { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue { animation: none; }
}


/* ---------- Shared page header ----------
   Every inner page hand-rolled the same heading block with inline styles at a
   fixed 2rem. One component, one fluid scale, matching the homepage. */
.page-title {
    font-size: clamp(1.6rem, 3.6vw, 2.15rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
}
.page-title strong { font-weight: 600; }

.page-lede {
    max-width: 62ch;
    font-size: 0.97rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
}

/* ---------- Submit checklist ----------
   Rows are full-width buttons rather than a tick and a line of text, so the
   tap target is the whole row instead of a 13px box. */
.checklist-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.checklist-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gold-text);
    margin: 0;
}
.checklist-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--void-border);
    color: var(--text-ui);
    white-space: nowrap;
}
.checklist-count.is-complete {
    color: var(--green);
    border-color: rgba(74, 222, 128, 0.35);
    background: rgba(74, 222, 128, 0.08);
}

.checklist { display: flex; flex-direction: column; gap: 0.5rem; }
.check-row {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 48px min height — a real tap target on a phone. */
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--void-border);
    border-radius: var(--radius-md);
    background: var(--void);
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.check-row:hover { border-color: var(--gold-dim); color: var(--text-primary); }
.check-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--void-hover);
    border-radius: 5px;
    position: relative;
    transition: background 140ms ease, border-color 140ms ease;
}
.check-box::after {
    content: '';
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid var(--void);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.check-row input:checked ~ .check-box {
    background: var(--gold);
    border-color: var(--gold);
}
.check-row input:checked ~ .check-box::after { transform: rotate(45deg) scale(1); }
.check-row input:checked ~ span { color: var(--text-primary); }
.check-row:has(input:checked) {
    border-color: var(--gold-dim);
    background: var(--gold-glow);
}
.check-row input:focus-visible ~ .check-box {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.checklist-all {
    margin-top: 1rem;
    width: 100%;
    justify-content: center;
    font-size: 0.78rem;
}

/* Locked form: visible but inert, so people can see what is being asked. */
.form-lock-note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(200, 169, 110, 0.25);
    border-radius: var(--radius-md);
    background: var(--gold-glow);
    font-size: 0.85rem;
    color: var(--gold-text);
}
.form-lock-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}

/* The single most important button on the site — sized like it. */
.btn-submit-large {
    width: 100%;
    justify-content: center;
    margin-top: 1.25rem;
    min-height: 56px;
    font-size: 0.92rem;
    letter-spacing: 0.1em;
}
.btn-submit-large:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Upload dropzone: bigger target, clearer affordance. */
.upload-zone {
    border: 2px dashed var(--void-border);
    border-radius: var(--radius-md);
    padding: 2.75rem 1.5rem;
    text-align: center;
    cursor: pointer;
    background: var(--surface-2);
    transition: border-color 160ms ease, background 160ms ease;
}
.upload-zone:hover {
    border-color: var(--gold);
    background: var(--gold-glow);
}

/* ---------- Tier showcase — "what you're playing for" ----------
   Shows the gear locked rather than describing it. Built to look finished
   with no photography at all, so the section can ship before the shoot:
   drop a file at static/img/tiers/<tier>.jpg and it takes over from the
   placeholder with no markup change. */
.tier-showcase {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 2.5rem 0 2rem;
}

.unlock-card {
    border: 1px solid var(--void-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--void-light);
    transition: border-color 200ms ease, transform 200ms ease;
}
.unlock-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }

.unlock-frame {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--void-mid);
}
.unlock-img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* The lock explains access; athletes can see the piece they are earning. */
    filter: saturate(0.85) brightness(0.88);
}

/* No photo yet: a deliberate gold-lit void rather than an empty box. */
.unlock-empty {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 70% at 50% 42%, var(--gold-glow), transparent 70%),
        repeating-linear-gradient(
            -45deg,
            transparent 0 11px,
            rgba(200, 169, 110, 0.045) 11px 22px
        ),
        var(--void-mid);
}

.unlock-badge {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border: 1px solid rgba(200, 169, 110, 0.35);
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.66);
    backdrop-filter: blur(6px);
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}
[data-theme="light"] .unlock-badge {
    background: rgba(245, 245, 240, 0.82);
    color: var(--gold-text);
}

.unlock-body { padding: 1.25rem 1.25rem 1.4rem; }
.unlock-req {
    font-size: 1.02rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0.75rem 0 0.5rem;
}
.unlock-gets {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 860px) {
    .tier-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .tier-showcase { grid-template-columns: 1fr; gap: 1rem; }
    .unlock-frame { aspect-ratio: 16 / 10; }
}

/* ---------- Admin preview bar ---------- */
.admin-preview-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding: 0.6rem 1.25rem;
    background: var(--gold-glow);
    border-bottom: 1px solid rgba(200, 169, 110, 0.28);
    font-size: 0.8rem;
    color: var(--gold-text);
}
.admin-preview-bar a {
    margin-left: auto;
    font-size: 0.78rem;
    white-space: nowrap;
}
.admin-preview-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}

/* ---------- Closing CTA block ----------
   Used at the foot of pages that previously ended with nothing to click. */
.standards-close {
    margin-top: 3.5rem;
    padding: 2.5rem 2rem;
    border: 1px solid var(--void-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(90% 120% at 50% 0%, var(--gold-glow), transparent 70%),
        var(--void-light);
    text-align: center;
}
.standards-close-title {
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    font-weight: 300;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}
.standards-close-sub {
    max-width: 52ch;
    margin: 0 auto 1.25rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-secondary);
}
.standards-close-note {
    display: inline-block;
    margin: 0 auto 1.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(200, 169, 110, 0.25);
    border-radius: 999px;
    background: var(--gold-glow);
    font-size: 0.82rem;
    color: var(--gold-text);
}
.standards-close .hero-actions { justify-content: center; }

@media (max-width: 640px) {
    .standards-close { padding: 2rem 1.25rem; }
}

/* ---------- Admin shell ----------
   The panel is its own surface, not a page of the public site. Fixed rail,
   independently scrolling content, and no public nav or footer anywhere. */
.admin-body {
    font-family: var(--font);
    background: var(--void);
    color: var(--text-primary);
    line-height: 1.6;
}
.admin-shell { display: flex; min-height: 100vh; }

.admin-rail {
    width: 216px;
    flex-shrink: 0;
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.admin-rail-head {
    padding: 1.5rem 1.25rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.admin-rail-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 0.2rem;
}
.admin-rail-brand {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gold-text);
}

.admin-rail-nav { padding: 0.75rem 0; flex: 1; }
.admin-rail-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 1.25rem;
    font-size: 0.86rem;
    text-decoration: none;
    color: var(--text-secondary);
    border-right: 2px solid transparent;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.admin-rail-link:hover {
    color: var(--text-primary);
    background: var(--surface-1);
}
.admin-rail-link.is-active {
    color: var(--gold-text);
    background: var(--gold-glow);
    border-right-color: var(--gold);
}
.admin-rail-icon { width: 16px; text-align: center; opacity: 0.85; }
.admin-rail-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--gold);
    color: #0A0A0A;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}

.admin-rail-foot {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.admin-rail-secondary {
    font-size: 0.78rem;
    color: var(--text-ui);
    text-decoration: none;
}
.admin-rail-secondary:hover { color: var(--gold-text); }
.admin-rail-signout {
    font-size: 0.78rem;
    color: var(--text-ui);
    text-decoration: none;
}
.admin-rail-signout:hover { color: var(--red); }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 2rem;
    border-bottom: 1px solid var(--border);
    background: var(--void);
    position: sticky;
    top: 0;
    z-index: 20;
}
.admin-topbar-title {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin-right: auto;
}
.admin-content { padding: 2rem; flex: 1; min-width: 0; }

.admin-rail-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.admin-rail-toggle span {
    display: block;
    width: 15px;
    height: 1.5px;
    background: var(--text-secondary);
}

@media (max-width: 860px) {
    .admin-rail {
        position: fixed;
        left: 0; top: 0;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform 220ms ease;
        box-shadow: var(--shadow-soft);
    }
    .admin-rail.is-open { transform: translateX(0); }
    .admin-rail-toggle { display: flex; }
    .admin-topbar { padding: 0.9rem 1rem; }
    .admin-content { padding: 1.25rem 1rem; }
}

/* ---------- Theme switch ----------
   Sliding pill. Both icons stay visible inside the track and the knob moves
   between them, so the control reads as a switch with two states rather than
   an icon whose meaning you have to infer. */
.theme-switch {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}
.theme-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 54px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid var(--void-border);
    border-radius: 999px;
    background: var(--void-light);
    transition: background 200ms ease, border-color 200ms ease;
}
.theme-switch:hover .theme-switch-track { border-color: var(--gold-dim); }
.theme-switch:focus-visible .theme-switch-track {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.theme-switch-icon {
    width: 13px;
    height: 13px;
    position: relative;
    z-index: 1;
    transition: color 200ms ease, opacity 200ms ease;
}
/* The icon the knob is sitting on dims; the one you'd move to stays lit. */
.theme-switch-moon { color: var(--gold); opacity: 1; }
.theme-switch-sun  { color: var(--text-ui); opacity: 0.75; }
[data-theme="light"] .theme-switch-moon { color: var(--text-tertiary); opacity: 0.75; }
[data-theme="light"] .theme-switch-sun  { color: var(--gold-text); opacity: 1; }

.theme-switch-knob {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    /* Slight overshoot so it feels mechanical rather than linear. */
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease;
}
[data-theme="light"] .theme-switch-knob {
    transform: translateX(24px);
    background: var(--gold-text);
}

@media (prefers-reduced-motion: reduce) {
    .theme-switch-knob { transition: none; }
}
@media (max-width: 768px) {
    .theme-switch { margin-top: 0.35rem; }
}

/* ---------- The Bar (homepage standards showcase) ----------
   Turns the abstract "meet a standard" pitch into six concrete numbers.
   The number is the visual — everything else supports it. */
.section-bar {
    padding: 5rem 0 4.5rem;
    border-top: 1px solid var(--void-border);
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(200, 169, 110, 0.05), transparent 65%),
        var(--void, #0A0A0A);
}
.bar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--void-border);
    border: 1px solid var(--void-border);
    margin: 2.5rem 0 2rem;
}
.bar-card {
    background: var(--void, #0A0A0A);
    padding: 2.4rem 1.6rem 2.1rem;
    text-align: center;
    transition: background 220ms ease;
}
.bar-card:hover { background: #131110; }
.bar-sport {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-dim);
    margin: 0 0 0.9rem;
}
.bar-value {
    font-size: clamp(2.4rem, 5.5vw, 3.6rem);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--gold-text);
    margin: 0 0 0.9rem;
    font-variant-numeric: tabular-nums;
}
.bar-unit {
    font-size: 0.42em;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--gold-dim);
    text-transform: uppercase;
    margin-left: 0.15em;
}
.bar-meta {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}
.bar-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 1.5rem 0 0;
}
.link-gold {
    color: var(--gold-text);
    border-bottom: 1px solid var(--gold-dim);
    padding-bottom: 1px;
}
.link-gold:hover { color: var(--gold-bright); border-color: var(--gold-text); }

@media (max-width: 900px) {
    .bar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .bar-grid { grid-template-columns: 1fr; }
    .bar-card { padding: 2rem 1.25rem; }
}


/* ── Archive pagination ─────────────────────────────────────────────── */
.archive-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}
.archive-pager .btn {
    padding: 0.6rem 1.15rem;
    font-size: 0.78rem;
}
.archive-pager-count {
    font-size: 0.82rem;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}
.btn.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}


/* ── Native selects ─────────────────────────────────────────────────────
   The checkout's state and country fields became real <select> elements.
   Left alone, a native select renders with the operating system's own
   control and ignores the form's styling entirely, which looks like a
   different site pasted into the middle of checkout. */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
                      linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 2px),
                         calc(100% - 13px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.form-select:disabled { cursor: default; opacity: 0.6; }


/* ── Responsive info grids ──────────────────────────────────────────────
   Shipping's two-column facts and the Standards tier legend's three
   columns were hardcoded inline with no breakpoint, so on a phone they
   squeezed three cards into 375px and the text wrapped to one word a
   line. */
.info-grid {
    display: grid;
    gap: 1rem;
}
.info-grid-2 { grid-template-columns: repeat(2, 1fr); }
.info-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 720px) {
    .info-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .info-grid-2,
    .info-grid-3 { grid-template-columns: 1fr; }
}

/* ── 14. FAQ accordions ─────────────────────────────────────────────────
   The marker read "+" whether the answer was open or closed, so the
   control never acknowledged the click. */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-sign { transition: transform 0.2s ease; }
.faq-item[open] summary .faq-sign { transform: rotate(45deg); }
.faq-item summary:focus-visible {
    outline: 2px solid var(--gold-dim);
    outline-offset: -2px;
}

/* ── 16. Print ──────────────────────────────────────────────────────────
   Order confirmations and receipts get printed. Without this they print
   the nav, the footer, the newsletter band and a black background. */
@media print {
    .nav, .footer, .signup-band, .skip-link,
    .theme-switch, .admin-preview-bar,
    .hero-actions, .section-actions, .archive-pager { display: none !important; }

    html, body {
        background: #fff !important;
        color: #000 !important;
    }
    .card, .container, .section {
        border-color: #ccc !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    a { text-decoration: underline; }
    /* A printed page cannot be clicked, so spell the destination out. */
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
    a[href^="mailto"]::after,
    a[href^="#"]::after { content: ""; }
    .section { padding: 0.5rem 0 !important; }
}

/* ── Sport filter on the Standards page ─────────────────────────────────
   Six sports with several movements each is a long page to scroll when you
   came to look up one number. Rendered hidden and revealed by script, so
   without JavaScript every sport stays visible and the page behaves as it
   always did. */
.sport-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 1.75rem;
}
.sport-filter[hidden] { display: none; }

.sport-filter-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-right: 4px;
}

.sport-chip {
    font-family: var(--font);
    font-size: 0.78rem;
    padding: 7px 14px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.sport-chip:hover { border-color: var(--gold-dim); color: var(--text-primary); }
.sport-chip:focus-visible {
    outline: 2px solid var(--gold-dim);
    outline-offset: 2px;
}
.sport-chip.is-active {
    border-color: var(--gold);
    background: var(--gold-glow);
    color: var(--text-primary);
}

@media (max-width: 520px) {
    .sport-filter-label { width: 100%; margin-bottom: 2px; }
    .sport-chip { font-size: 0.74rem; padding: 6px 12px; }
}

/* ── Claim ("I'm going for it") ─────────────────────────────────────────
   Sits under each sport's tables, because that is where someone decides the
   number is possible. One row on desktop, stacked on a phone. */
.claim-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.claim-lead {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-right: 2px;
}
.claim-select { width: auto; min-width: 116px; padding: 9px 32px 9px 12px; font-size: 0.82rem; }
.claim-email  { width: auto; flex: 1 1 190px; min-width: 0; padding: 9px 12px; font-size: 0.82rem; }
.claim-btn    { padding: 9px 18px; font-size: 0.78rem; white-space: nowrap; }
.claim-note {
    flex-basis: 100%;
    margin: 2px 0 0;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--text-tertiary);
}

@media (max-width: 620px) {
    .claim-form { gap: 10px; }
    .claim-lead { flex-basis: 100%; }
    .claim-select, .claim-email, .claim-btn { width: 100%; flex-basis: 100%; }
}

/* Visually hidden but read aloud — labels for the claim fields, which are
   identified by placeholder and position on screen. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Evidence chooser on the submit form ────────────────────────────────
   Two ways to prove the same thing. Rendered hidden and shown by script
   only for sports with a sanctioning body, so nobody is offered a lane the
   server would reject. */
.evidence-choice {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 1.5rem;
}
.evidence-choice[hidden] { display: none; }

.evidence-option { cursor: pointer; }
.evidence-option input { position: absolute; opacity: 0; pointer-events: none; }

.evidence-card {
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.18s, background 0.18s;
}
.evidence-option:hover .evidence-card { border-color: var(--gold-dim); }
.evidence-option input:checked + .evidence-card {
    border-color: var(--gold);
    background: var(--gold-glow);
}
.evidence-option input:focus-visible + .evidence-card {
    outline: 2px solid var(--gold-dim);
    outline-offset: 2px;
}
.evidence-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.evidence-sub {
    display: block;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-tertiary);
}

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

/* ========== SHIPPING BAR ========== */
/* One quiet line above the nav. Deliberately low-key: it states a rule, it
   is not a promotion, and a loud banner on a brand whose premise is "you
   can't buy your way in" would read like a sale. */
.ship-bar {
    background: var(--void-light);
    border-bottom: 1px solid var(--void-border);
    color: var(--text-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-align: center;
    padding: 7px 1rem;
    line-height: 1.5;
}
.ship-bar a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    display: inline-block;
    min-height: 24px;          /* WCAG 2.2 pointer target */
    line-height: 24px;
}
.ship-bar a:hover { color: var(--gold-text); }
.ship-bar-sep { margin: 0 0.5rem; color: var(--text-tertiary); }
@media print { .ship-bar { display: none; } }

/* ========== PRODUCT STATUS + UNLOCK PANEL ========== */
.product-status {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
}
.unlock-panel {
    background: var(--void-light);
    border: 1px solid var(--void-border);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.unlock-head {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
}
.unlock-lede {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 0.75rem;
}
.unlock-table { margin: 0 0 0.75rem; font-size: 0.85rem; }
.unlock-table th { text-align: left; font-weight: 500; white-space: nowrap; }
.unlock-value { display: inline-block; margin-right: 1rem; white-space: nowrap; }
.unlock-sex {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.unlock-count {
    font-size: 0.8rem;
    color: var(--gold-text);
    margin: 0;
}

/* Homepage: a clear brand introduction beside concrete entry standards. */
.home-hero {
    min-height: auto;
    padding: clamp(3rem, 7vw, 6rem) 0 3rem;
    text-align: left;
}
.home-hero .hero-bg {
    background: radial-gradient(900px 600px at 60% 0%, rgba(200, 169, 110, 0.09), transparent 70%);
}
.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}
.home-hero-copy { min-width: 0; }
.home-hero-copy:only-child { grid-column: 1 / -1; }
.home-hero .eyebrow {
    margin: 0 0 1.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    color: var(--gold-text);
}
.home-hero h1 {
    font-size: clamp(2.7rem, 4.6vw, 4.7rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin-bottom: 1.5rem;
}
.home-hero h1 strong { font-weight: 600; }
.home-hero .hero-sub {
    max-width: 43ch;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
}
.home-hero-copy .hero-actions { justify-content: flex-start; margin-top: 2rem; }
.home-hero p.home-hero-note {
    margin: 1rem 0 1.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.home-open-link, .home-panel-link {
    color: var(--gold-text);
    font-size: 0.85rem;
    font-weight: 500;
}
.home-open-link { border-bottom: 1px solid var(--gold-dim); padding-bottom: 0.2rem; }
.home-open-link span { margin-left: 0.5rem; }
.home-hero p.home-open-note {
    font-size: 0.78rem;
    margin: 0.7rem 0 0;
    color: var(--text-tertiary);
}
.home-standard-panel {
    border: 1px solid var(--void-border);
    border-top: 2px solid var(--gold);
    background: var(--void-light);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    min-width: 0;
}
.home-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.home-panel-kicker, .home-panel-index {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.home-panel-index { color: var(--gold-text); font-variant-numeric: tabular-nums; }
.home-standard-panel h2 {
    margin: 1.5rem 0 2rem;
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.025em;
}
.home-standard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0;
    border-top: 1px solid var(--void-border);
}
.home-standard-label { display: block; font-size: 0.88rem; color: var(--text-primary); }
.home-standard-tier { display: block; margin-top: 0.35rem; font-size: 0.72rem; color: var(--text-tertiary); }
.home-standard-value { font-size: 2.4rem; line-height: 1; color: var(--gold-text); white-space: nowrap; }
.home-standard-value span { font-size: 0.85rem; margin-left: 0.3rem; }
.home-hero p.home-panel-note { margin: 1rem 0 1.5rem; font-size: 0.75rem; line-height: 1.6; color: var(--text-tertiary); }
.home-panel-link { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; border-top: 1px solid var(--void-border); padding-top: 1rem; }
.home-hero .hero-stat-bar { justify-content: flex-start; gap: clamp(1.5rem, 5vw, 4rem); margin-top: 3rem; padding-top: 1.5rem; }
.home-hero .hero-stat { text-align: left; }
@media (max-width: 900px) {
    .home-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .home-standard-panel { max-width: none; }
    .home-hero h1 { font-size: clamp(2.7rem, 7vw, 4rem); }
}
@media (max-width: 520px) {
    .home-hero { padding: 2.5rem 0 2rem; }
    .home-hero .hero-sub { font-size: 0.95rem; }
    .home-hero-copy .hero-actions { margin-top: 1.5rem; }
    .home-hero p.home-hero-note { margin-bottom: 1.25rem; }
    .home-standard-panel h2 { margin: 1.25rem 0; }
    .home-hero .hero-stat-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

/* PRVEN's vector wordmark and slab identity stay crisp at every screen size. */
.nav { height: 84px; background: var(--void); padding: 0 clamp(1.25rem, 3vw, 3rem); }
.page { padding-top: 84px; }
.nav-logo { gap: 14px; flex-shrink: 0; }
.brand-slab { display: flex; flex-direction: column; gap: 5px; width: 30px; transform: skewX(-12deg); }
.brand-slab span { display: block; height: 9px; background: var(--gold-text); }
.brand-slab span:last-child { width: 21px; }
.brand-lockup { display: flex; flex-direction: column; gap: 7px; line-height: 1; }
.brand-wordmark { width: 166px; height: auto; display: block; }
.brand-wordmark-black { display: none; }
.brand-tagline { font-size: 0.55rem; letter-spacing: 0.2em; color: var(--text-secondary); }
[data-theme="light"] .brand-wordmark-gold { display: none; }
[data-theme="light"] .brand-wordmark-black { display: block; }
.nav-links { gap: 1.25rem; }
.nav-links a { font-size: 0.74rem; }
.nav-links .nav-cta { background: var(--gold); color: var(--on-gold) !important; border-color: var(--gold); font-weight: 600; }
.nav-links .nav-cta:hover { background: var(--gold-bright); }
.nav-start { display: none; }
.earn-path { display: flex; align-items: stretch; gap: 0; margin-top: 1.5rem; }
.earn-path-step { flex: 1; display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid var(--void-border); color: var(--text-secondary); font-size: 0.8rem; }
.earn-path-step > span { font-size: 0.65rem; color: var(--text-tertiary); letter-spacing: 0.08em; }
.earn-path-step.is-current { border-bottom: 2px solid var(--gold); color: var(--gold-text); }
.earn-path-step.is-current > span { color: var(--gold-text); }
.earn-path-future { color: var(--text-tertiary); }
.bar-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.sport-launch { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.sport-launch-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.sport-launch-heading .section-label { margin-bottom: 0.65rem; }
.sport-launch-heading h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 300; line-height: 1.25; }
.sport-launch-heading h2 strong { font-weight: 600; }
.sport-launch-heading > p { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; }
.sport-launch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sport-launch-card { background: var(--void-light); border: 1px solid var(--void-border); padding: 2rem; position: relative; overflow: hidden; transition: border-color 180ms ease, transform 180ms ease; }
.sport-launch-card:hover { border-color: var(--gold-dim); transform: translateY(-3px); }
.sport-launch-top { display: flex; align-items: center; justify-content: space-between; color: var(--gold-text); margin-bottom: 2rem; }
.sport-launch-index { font-size: 0.7rem; letter-spacing: 0.15em; }
.sport-launch-card h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.025em; margin-bottom: 0.5rem; }
.sport-launch-card > p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.7; }
.sport-launch-actions { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--void-border); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.sport-launch-actions a { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; font-size: 0.82rem; font-weight: 500; }
.sport-launch-submit { color: var(--text-primary); }
.step-card { display: flex; flex-direction: column; }
.step-action { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 1.5rem; min-height: 44px; font-size: 0.84rem; }
.sport-ready { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem; margin: 1.5rem 0; background: var(--void-light); border-left: 2px solid var(--gold); }
.sport-ready strong { font-weight: 500; }
.sport-ready p { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.25rem; }
.sport-ready .btn { flex-shrink: 0; }
.tier-radio:focus-visible + .tier-card { outline: 2px solid var(--gold-text); outline-offset: 4px; }
@media (max-width: 1100px) {
    .nav { gap: 0.75rem; }
    .nav-logo { margin-right: auto; }
    .nav-start { display: inline-flex; gap: 0.6rem; align-items: center; justify-content: center; padding: 0.65rem 0.85rem; min-height: 44px; color: var(--on-gold); background: var(--gold); border-radius: 4px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
    .nav-toggle { display: block; min-width: 44px; min-height: 44px; }
    .nav-links { display: none; position: absolute; top: 84px; left: 0; right: 0; background: var(--void); border-bottom: 1px solid var(--void-border); flex-direction: column; align-items: stretch; padding: 1rem 1.5rem; gap: 0.25rem; max-height: calc(100dvh - 84px); overflow-y: auto; }
    .nav-links.active { display: flex; }
    .nav-links a { display: flex; min-height: 44px; align-items: center; justify-content: space-between; padding: 0.75rem; }
    .nav-links .nav-cta { justify-content: center; gap: 1rem; margin: 0.5rem 0; }
}
@media (max-width: 600px) {
    .nav { padding: 0 1rem; gap: 0.5rem; }
    .brand-wordmark { width: 124px; }
    .brand-slab { width: 23px; gap: 4px; }
    .brand-slab span { height: 7px; }
    .brand-slab span:last-child { width: 16px; }
    .nav-logo { gap: 10px; }
    .brand-tagline { font-size: 0.45rem; letter-spacing: 0.14em; }
    .nav-start { font-size: 0.68rem; padding: 0.6rem; }
    .sport-launch-heading { align-items: flex-start; flex-direction: column; gap: 0.75rem; }
    .sport-launch-grid { grid-template-columns: minmax(0, 1fr); }
    .sport-launch-card { padding: 1.5rem; }
    .sport-launch-top { margin-bottom: 1.25rem; }
    .sport-ready { align-items: stretch; flex-direction: column; gap: 1rem; }
    .earn-path-step { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.75rem 0.4rem; font-size: 0.7rem; }
}
@media (max-width: 350px) {
    .brand-wordmark { width: 100px; }
    .nav-logo { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .sport-launch-card { transition: none; }
    .sport-launch-card:hover { transform: none; }
}

/* Concept photography can be replaced by real uploaded images at any time. */
.concept-figure { margin: 0; position: relative; overflow: hidden; background: #171612; }
.concept-figure img { display:block; width:100%; height:auto; }
.concept-figure figcaption { padding:0.7rem 1rem; font-size:0.7rem; line-height:1.5; color:#eee3cf; background:#171612; }
.unlock-frame .concept-figure { height:100%; }
.unlock-frame .concept-figure img { height:calc(100% - 64px); object-fit:cover; }
.unlock-frame .concept-figure figcaption { min-height:64px; }
.collection-preview { padding:3rem 0; }
.collection-preview-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:center; gap:3rem; }
.collection-preview h2 { font-size:clamp(1.8rem,3.2vw,2.7rem); font-weight:300; line-height:1.2; margin:1rem 0; }
.collection-preview p:not(.section-label) { color:var(--text-secondary); line-height:1.8; margin-bottom:1.5rem; }
.section-label::before { content:''; display:inline-block; width:14px; height:6px; margin-right:9px; background:var(--gold-text); transform:skewX(-12deg); }
.standard-finder { margin:2rem 0; border-top:2px solid var(--gold); }
.standard-finder h2, .athlete-progress h2 { font-size:1.65rem; font-weight:400; margin-bottom:0.75rem; }
.finder-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.finder-result { padding:1.5rem; margin:1.5rem 0; background:var(--void); border:1px solid var(--void-border); }
.finder-target { font-size:clamp(1.8rem,4vw,3rem); color:var(--gold-text); margin:0.75rem 0; line-height:1.25; }
.finder-result ul { padding-left:1.2rem; margin-top:1rem; color:var(--text-secondary); font-size:0.85rem; line-height:1.8; }
.submit-stages { display:flex; gap:0.5rem; margin-bottom:1rem; }
.submit-stages button { flex:1; padding:1rem 0.5rem; background:var(--void-light); color:var(--text-secondary); border:1px solid var(--void-border); font:inherit; font-size:0.8rem; cursor:pointer; }
.submit-stages button[aria-current] { border-color:var(--gold); color:var(--gold-text); }
.stage-controls { display:flex; justify-content:space-between; gap:1rem; margin-top:1.5rem; }
.stage-controls [hidden], .submit-stage[hidden], .standard-finder[hidden], .submit-stages[hidden], .stage-controls[hidden] { display:none !important; }
.athlete-progress { margin-bottom:3rem; }
.progress-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:1rem; margin-top:1.5rem; }
.progress-card h3 { font-size:1.2rem; margin-bottom:0.5rem; }
.tier-ladder { display:flex; gap:0.5rem; list-style:none; margin:1.5rem 0; padding:0; }
.tier-ladder li { flex:1; border-bottom:3px solid var(--void-border); padding-bottom:0.5rem; color:var(--text-tertiary); font-size:0.75rem; }
.tier-ladder .is-earned { border-color:var(--gold); color:var(--gold-text); }
@media(max-width:768px) { .collection-preview-grid { grid-template-columns:minmax(0,1fr); gap:1.5rem; } .finder-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:400px) { .finder-fields { grid-template-columns:minmax(0,1fr); } .submit-stages button { font-size:0.7rem; } }

.proof-challenge { padding:1rem; border-left:2px solid var(--gold); background:var(--void-light); margin-bottom:1.5rem; text-transform:capitalize; color:var(--gold-text); }

.standard-finder, .sport-block, #collection-preview-title { scroll-margin-top: 105px; }

.start-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin:2rem 0; }
.start-grid .card { display:flex; flex-direction:column; border-top:2px solid var(--gold); }
.start-grid h2 { font-size:1.65rem; font-weight:400; margin:0.75rem 0; }
.start-grid p:not(.section-label) { color:var(--text-secondary); line-height:1.8; margin-bottom:1.5rem; }
.start-grid .btn { margin-top:auto; align-self:flex-start; }
.start-explainer { color:var(--text-secondary); font-size:0.88rem; line-height:1.8; max-width:720px; }
.start-links { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin-top:1.5rem; font-size:0.85rem; }
.submission-workspace { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:2rem; align-items:start; }
.submission-target { position:sticky; top:105px; border-top:2px solid var(--gold); padding:1.25rem; }
.submission-target h2 { font-size:1.1rem; margin-bottom:1.25rem; font-weight:500; }
.target-number { font-size:1.6rem; line-height:1.35; color:var(--gold-text); margin:1rem 0; }
.submission-target ul { padding-left:1.1rem; margin:1.25rem 0; line-height:1.8; color:var(--text-secondary); font-size:0.82rem; }
.submission-target .text-dim { font-size:0.8rem; line-height:1.7; }
.shop-filters { display:flex; gap:0.5rem; flex-wrap:wrap; margin:1.5rem 0 0.75rem; }
.shop-filters button { cursor:pointer; min-height:44px; padding:0.65rem 1rem; border:1px solid var(--void-border); background:var(--void-light); color:var(--text-secondary); border-radius:100px; font:inherit; font-size:0.8rem; }
.shop-filters button[aria-pressed="true"] { color:var(--on-gold); border-color:var(--gold); background:var(--gold); }
.shop-section[hidden], .product-card[hidden], .shop-filters[hidden], #shop-filter-empty[hidden], .submission-target[hidden] { display:none !important; }
.review-next { margin-top:0.4rem; line-height:1.6; max-width:520px; color:var(--text-secondary); }
@media(max-width:800px) { .submission-workspace { grid-template-columns:minmax(0,1fr); } .submission-target { position:static; margin-bottom:1.5rem; } }
@media(max-width:600px) { .start-grid { grid-template-columns:minmax(0,1fr); } }

/* Editorial storefront: large imagery, precise geometry, quiet gold accents. */
.container { max-width:1320px; }
.nav { padding-inline:clamp(1rem,4vw,4rem); border-bottom-color:var(--void-border); }
.nav-links { gap:1.75rem; }
.nav-links a { letter-spacing:0.1em; }
.nav-links .nav-cta { border-radius:3px; }
.btn { border-radius:3px; min-height:48px; padding:0.95rem 1.5rem; letter-spacing:0.09em; }
.btn-gold:hover { background:var(--gold); color:var(--on-gold); filter:brightness(1.08); }
.page-title { font-size:clamp(2.3rem,5vw,4.75rem); line-height:1.06; letter-spacing:-0.045em; }
.section-title { font-size:clamp(2rem,4vw,3.5rem); line-height:1.1; letter-spacing:-0.04em; }
.luxury-hero { padding:0; overflow:hidden; }
.luxury-hero .hero-content { max-width:1440px; width:100%; }
.luxury-hero .hero-bg { background:none; }
.luxury-hero .home-hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; align-items:stretch; }
.luxury-hero .home-hero-copy { padding:clamp(3rem,6vw,6rem) clamp(1.5rem,4vw,4rem) 3rem 0; display:flex; flex-direction:column; justify-content:center; }
.luxury-hero h1 { font-size:clamp(3rem,5.25vw,5.3rem); line-height:1.03; letter-spacing:-0.055em; margin:1.5rem 0; max-width:none; }
.luxury-hero h1 strong { color:var(--bone); font-weight:600; }
.luxury-hero .eyebrow { color:var(--gold-text); font-size:0.68rem; letter-spacing:0.28em; }
.luxury-hero .hero-sub { font-size:1.05rem; line-height:1.8; max-width:450px; }
.luxury-hero .hero-actions { gap:0.75rem; margin-top:1.5rem; }
.luxury-hero p.home-hero-note { font-size:0.72rem; margin-bottom:1.25rem; max-width:450px; }
.campaign-art { position:relative; margin:0; min-height:650px; background:#161411; overflow:hidden; }
.campaign-art > img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:53% center; }
.campaign-art-label { position:absolute; inset:1.5rem 1.5rem auto; display:flex; justify-content:space-between; gap:1rem; font-size:0.6rem; letter-spacing:0.12em; color:#f6efdf; text-shadow:0 1px 8px #000; }
.campaign-art figcaption { position:absolute; inset:auto 0 0; padding:0.8rem 1.2rem; color:#eee4d3; background:rgba(10,10,10,0.85); font-size:0.65rem; line-height:1.6; }
.luxury-hero .hero-stat-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:0; padding:1.5rem 0; border-bottom:1px solid var(--void-border); gap:1rem; }
.luxury-hero .hero-stat-value { font-size:1.4rem; font-weight:400; }
.luxury-hero .hero-stat-label { letter-spacing:0.12em; font-size:0.6rem; }
.luxury-hero .scroll-cue { display:none; }
.standard-feature .home-standard-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:0.75rem 3rem; padding:2.25rem 0; border:none; background:none; }
.standard-feature .home-panel-heading { grid-column:1; }
.standard-feature .home-standard-panel h2 { font-size:1.8rem; margin:0; grid-column:1; }
.standard-feature .home-standard-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; grid-column:2; grid-row:1 / 3; align-items:center; }
.standard-feature .home-standard-row { border:none; padding:0; gap:1rem; }
.standard-feature .home-standard-value { font-size:2rem; }
.standard-feature .home-panel-note { margin:0; grid-column:1; }
.standard-feature .home-panel-link { grid-column:2; border-top:1px solid var(--void-border); padding-top:1rem; }
.brand-editorial { padding:4rem 0; }
.brand-editorial-grid { display:grid; grid-template-columns:0.7fr 2fr 0.5fr; gap:3rem; align-items:start; }
.brand-editorial h2 { font-size:clamp(2rem,3.8vw,3.5rem); font-weight:300; line-height:1.14; letter-spacing:-0.04em; }
.brand-editorial p:not(.section-label) { color:var(--text-secondary); margin-top:1rem; font-size:0.95rem; line-height:1.8; }
.brand-editorial .step-action { max-width:280px; }
.editorial-slab { display:flex; flex-direction:column; gap:12px; transform:skewX(-12deg); margin-top:0.5rem; }
.editorial-slab span { height:28px; background:var(--gold-text); }
.editorial-slab span:last-child { width:70%; }
.sport-launch-card { border-radius:0; background:var(--void-light); padding:2.25rem; }
.sport-launch-heading h2 { letter-spacing:-0.03em; font-size:clamp(1.8rem,3vw,2.6rem); }
.unlock-card { border-radius:2px; }
.unlock-body { padding:1.5rem; }
.unlock-frame { aspect-ratio:4 / 5; }
.product-grid { gap:2rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
.product-card.unlocked, .product-card.locked-card { border-radius:2px; box-shadow:none; padding:1.25rem; border-color:var(--void-border); background:var(--void-light); }
.product-name { font-size:1.1rem; letter-spacing:-0.02em; }
.product-price { font-weight:400; }
.product-card .btn { border-radius:2px; }
.product-card .concept-figure { margin-bottom:1rem; }
.shop-filters button { border-radius:3px; }
.luxury-product { gap:clamp(2rem,5vw,5rem); }
.start-grid { gap:2rem; }
.start-grid .card { border-radius:2px; padding:2rem; }
.start-grid h2 { font-size:2rem; letter-spacing:-0.03em; }
.footer { padding-top:5rem; }
.footer-logo-img { width:160px; height:auto; }
[data-theme="light"] .footer-logo-img { filter:brightness(0); }
@media(max-width:1100px) { .nav-links { gap:1rem; } .luxury-hero h1 { font-size:clamp(2.8rem,5vw,4rem); } .luxury-hero .hero-actions { flex-direction:column; align-items:flex-start; } }
@media(max-width:900px) { .nav-links { gap:0.25rem; } .campaign-art { min-height:560px; } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } }
@media(max-width:700px) {
 .luxury-hero .home-hero-grid { grid-template-columns:minmax(0,1fr); }
 .luxury-hero .home-hero-copy { padding:2.75rem 0 2rem; }
 .luxury-hero h1 { font-size:clamp(2.75rem,9vw,4rem); margin:1.1rem 0; }
 .luxury-hero .hero-sub { font-size:0.95rem; }
 .luxury-hero .hero-actions { flex-direction:row; align-items:stretch; }
 .luxury-hero .hero-actions .btn { font-size:0.65rem; padding:0.8rem 1rem; }
 .campaign-art { min-height:0; height:auto; aspect-ratio:1.2; }
 .luxury-hero .hero-stat-bar { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
 .standard-feature .home-standard-panel { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
 .standard-feature .home-standard-list { grid-column:1; grid-row:auto; gap:1rem; }
 .standard-feature .home-panel-link { grid-column:1; }
 .brand-editorial-grid { grid-template-columns:minmax(0,1fr); gap:1.25rem; }
 .editorial-slab { display:none; }
 .brand-editorial { padding:2.75rem 0; }
 .sport-launch-card { padding:1.5rem; }
 .start-grid .card { padding:1.5rem; }
}
@media(max-width:480px) { .product-grid { grid-template-columns:minmax(0,1fr); } .standard-feature .home-standard-row { flex-direction:column; align-items:flex-start; gap:0.5rem; } }
@media(prefers-reduced-motion:reduce) { .product-card, .unlock-card, .btn { transition:none; } .unlock-card:hover { transform:none; } }

.nav-links .nav-cta:hover { background:var(--gold); filter:brightness(1.08); }

/* A visitor's sport and exact published target follow their browsing. */
.journey-preference {display:flex;align-items:center;gap:24px;padding-top:20px;padding-bottom:20px;border-bottom:1px solid var(--border);}
.journey-choice {display:flex;align-items:center;gap:12px;flex-shrink:0;}
.journey-choice label {font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-secondary);}
.journey-choice select {width:170px;min-height:44px;}
.journey-preference p {font-size:.82rem;color:var(--text-secondary);margin:0;flex:1;}
.journey-links {display:flex;gap:16px;align-items:center;font-size:.75rem;flex-wrap:wrap;}
.journey-links a {color:var(--gold-text);}
.journey-links button {background:none;border:0;text-decoration:underline;color:var(--text-secondary);cursor:pointer;padding:10px;}
.product-facts,.product-concept-detail {border:1px solid var(--border);padding:18px;margin:18px 0;}
.product-facts summary,.product-concept-detail summary {cursor:pointer;font-weight:500;min-height:24px;}
.product-facts dl {display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;font-size:.85rem;line-height:1.6;margin:20px 0;}
.product-facts dt {color:var(--text-secondary);}.product-facts dd {margin:0;}
.product-facts a {color:var(--gold-text);font-size:.8rem;}
.concept-detail-crop {aspect-ratio:1;overflow:hidden;margin:16px 0;}
.concept-detail-crop img {width:100%;height:100%;object-fit:cover;transform:scale(1.7);transform-origin:70% 50%;}
.size-radio {position:absolute;opacity:0;width:1px;height:1px;}
.size-radio:focus-visible + .size-btn {outline:2px solid var(--gold-text);outline-offset:4px;}
.size-btn {min-height:44px;}
.mobile-product-action {display:none;}
@media(max-width:900px) {.journey-preference {flex-wrap:wrap;gap:12px;}.journey-preference p {flex-basis:50%;}.journey-links {width:100%;}}
@media(max-width:640px) {
.journey-choice {width:100%;justify-content:space-between;}.journey-preference p {flex-basis:100%;}.journey-preference {padding-top:14px;padding-bottom:14px;}
.mobile-product-action {display:flex;position:fixed;bottom:0;left:0;right:0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));gap:16px;align-items:center;justify-content:space-between;background:var(--void);border-top:1px solid var(--border);z-index:45;box-shadow:0 -8px 24px rgba(0,0,0,.12);}
.mobile-product-action>div {display:flex;flex-direction:column;gap:3px;}.mobile-product-action span {font-size:.7rem;color:var(--text-secondary);}.mobile-product-action .btn {min-height:48px;white-space:nowrap;padding:12px 18px;}
body:has(.mobile-product-action) {padding-bottom:110px;}body:has(.nav-links.active) .mobile-product-action {visibility:hidden;}
}
/* Preserve native hidden semantics when component display rules apply. */
.journey-preference[hidden], .mobile-product-action [hidden] {display:none !important;}
#product-image-dialog {background:var(--void);color:var(--text-primary);border:1px solid var(--border);width:min(1100px,94vw);max-height:94dvh;padding:18px;}
#product-image-dialog::backdrop {background:rgba(0,0,0,.8);}
#product-image-dialog img {display:block;width:100%;max-height:78dvh;object-fit:contain;margin-top:12px;}
#product-image-dialog button {display:block;margin-left:auto;min-height:44px;padding:10px 18px;background:var(--surface-2);color:var(--text-primary);border:1px solid var(--border);cursor:pointer;}

/* Keep wizard controls hidden even when button styles set display. */
#standard-finder [hidden] { display: none !important; }


/* ========== INSTALL THE APP (footer) ========== */
.install-app { margin-top: 1.5rem; text-align: center; }
.install-app[hidden] { display: none; }
.install-app-btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 10px 18px;
    background: transparent; color: var(--text-secondary);
    border: 1px solid var(--control-border, var(--void-border)); border-radius: 999px;
    font: inherit; font-size: 0.8rem; letter-spacing: 0.04em; cursor: pointer;
}
.install-app-btn:hover { color: var(--gold-text); border-color: var(--gold-dim); }
.install-app-mark { display: grid; gap: 3px; justify-items: center; }
.install-app-mark span { display: block; height: 3px; background: var(--gold); }
.install-app-mark span:first-child { width: 14px; }
.install-app-mark span:last-child { width: 10px; }
.install-app-ios { margin: 0.75rem auto 0; font-size: 0.8rem; color: var(--text-tertiary); max-width: 320px; }

/* ========== VERIFIED CARD PAGE ========== */
.verified-wrap {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
    max-width: 980px;
}
.verified-card-frame {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--void-border);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.verified-card-img { display: block; width: 100%; height: auto; }
.verified-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.verified-actions .btn { min-height: 44px; }
.verified-actions [hidden] { display: none; }
.verified-hint { font-size: 0.82rem; color: var(--text-tertiary); line-height: 1.6; margin-top: 0.9rem; max-width: 460px; }
.verified-hint:empty { display: none; }
.verified-next { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; font-size: 0.85rem; }
.verified-next a { color: var(--gold-text); min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 760px) {
    .verified-wrap { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .verified-card-frame { max-width: 320px; margin: 0 auto; }
}
.archive-name-link { color: inherit; text-decoration: none; }
.archive-name-link:hover { color: var(--gold-text); text-decoration: underline; }

#shop-search-tools[hidden], #shop-search-clear[hidden] { display: none !important; }