/* ================================================================
   TCN APP SYSTEM — v3.0.0
   Cinematic streaming design system for The Comission Network.
   One vocabulary for every surface: home, gain access, departments,
   channels, account, commerce. Loads AFTER style.css and wins ties.

   Sections:
   0. Tokens & theming        5. Cards & rails
   1. Base polish             6. Media & badges
   2. Type system             7. Forms & code redemption
   3. Layout primitives       8. Overlays (modal/cart/toast)
   4. Buttons                 9. Legacy class aliases
                             10. Motion & a11y
   ================================================================ */

/* ── 0. TOKENS & THEMING ──────────────────────────────────────── */
:root {
    /* Core palette — kept identical to style.css tokens */
    --clr-bg:             #ffffff;
    --clr-surface:        #f7f7f8;
    --clr-surface-light:  #f0f1f3;
    --clr-primary:        #0d9488;
    --clr-primary-tint:   #a0f1ea;
    --clr-primary-soft:   rgba(var(--dept-rgb,13,148,136),0.10);
    --clr-primary-soft-border: rgba(var(--dept-rgb,13,148,136),0.25);
    --clr-accent:         #dc2626;
    --clr-text-main:      #0a0a0a;
    --clr-text-muted:     #6b7280;
    --clr-border:         rgba(0,0,0,0.08);

    --clr-cat-purple: #7c3aed;
    --clr-cat-orange: #f97316;
    --clr-cat-green:  #16a34a;
    --clr-cat-red:    #dc2626;
    --clr-cat-blue:   #2563eb;
    --clr-cat-teal:   #0d9488;

    --clr-invert-bg: #0a0a0a;
    --clr-invert-text: #ffffff;
    --clr-invert-text-muted: rgba(255,255,255,0.65);

    /* Department accent — overridden per department scope */
    --dept: var(--clr-primary);
    --dept-ink: #041412;               /* text on dept color */
    --dept-glow: rgba(var(--dept-rgb,13,148,136),.20);

    /* Elevation — shadows stay dark-on-light, that's how shadows work */
    --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
    --shadow-2: 0 4px 12px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.06);
    --shadow-3: 0 12px 32px rgba(0,0,0,.10), 0 32px 80px rgba(0,0,0,.08);
    --glow-primary: 0 0 0 1px var(--clr-primary);

    /* Type scale (fluid) */
    --fs-display: clamp(2.6rem, 6.5vw, 5.2rem);
    --fs-h1:      clamp(2rem, 4.5vw, 3.4rem);
    --fs-h2:      clamp(1.5rem, 3vw, 2.2rem);
    --fs-h3:      clamp(1.1rem, 2vw, 1.4rem);
    --fs-body:    1rem;
    --fs-small:   .85rem;
    --fs-micro:   .72rem;

    /* Rhythm */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px;
    --sp-4: 24px; --sp-5: 40px; --sp-6: 64px; --sp-7: 104px;

    /* Shape */
    --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

    /* Motion */
    --ease-out: cubic-bezier(.22,.61,.36,1);
    --ease-spring: cubic-bezier(.34,1.3,.5,1);
    --t-fast: .18s var(--ease-out);
    --t-med:  .32s var(--ease-out);
    --t-slow: .6s var(--ease-out);

    --header-h: 64px;
    --container: 1440px;
    --rail-gap: 14px;
}

/* Department color scopes — set data-dept on any wrapper (or body) */
[data-dept] { --clr-primary: var(--dept); }

/* ── 1. BASE POLISH ───────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
    background: var(--clr-bg);
    color: var(--clr-text-main);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--clr-primary); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.18) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--dept-rgb,13,148,136),.5); }
*::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

img { max-width: 100%; height: auto; }

/* ── 2. TYPE SYSTEM ───────────────────────────────────────────── */
.tcn-display, .tcn-h1, .tcn-h2, .tcn-h3 {
    font-family: var(--font-title, 'Dela Gothic One', cursive);
    line-height: 1.05;
    letter-spacing: .01em;
    text-wrap: balance;
    margin: 0;
}
.tcn-display { font-size: var(--fs-display); text-transform: uppercase; }
.tcn-h1 { font-size: var(--fs-h1); text-transform: uppercase; }
.tcn-h2 { font-size: var(--fs-h2); text-transform: uppercase; }
.tcn-h3 { font-size: var(--fs-h3); }
.tcn-sub {
    color: var(--clr-text-muted);
    font-size: clamp(.95rem, 1.4vw, 1.1rem);
    line-height: 1.65;
    max-width: 62ch;
}
.tcn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-micro);
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--clr-primary);
    padding: 6px 14px;
    border: 1px solid rgba(var(--dept-rgb,13,148,136),.25);
    border-radius: var(--r-pill);
    background: rgba(var(--dept-rgb,13,148,136),.06);
}
.tcn-eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--clr-primary);
    box-shadow: 0 0 8px var(--clr-primary);
}

/* Section header pattern */
.tcn-section { padding: var(--sp-7) 0; position: relative; }
.tcn-section--tight { padding: var(--sp-6) 0; }
.tcn-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}
.tcn-section-head--left { align-items: flex-start; text-align: left; }
.tcn-section-head--row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
}

/* ── 3. LAYOUT PRIMITIVES ─────────────────────────────────────── */
.tcn-container {
    width: min(var(--container), 100% - 2 * var(--sp-4));
    margin-inline: auto;
}
.tcn-grid { display: grid; gap: var(--sp-4); }
.tcn-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tcn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tcn-grid--4 { grid-template-columns: repeat(4, 1fr); }
.tcn-grid--posters { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tcn-grid--tiles   { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 1024px) {
    .tcn-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .tcn-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tcn-grid--4, .tcn-grid--3, .tcn-grid--2 { grid-template-columns: 1fr; }
    .tcn-grid--posters { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Cinematic horizontal rail (Netflix-style row) */
.tcn-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(180px, 22vw, 260px);
    gap: var(--rail-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 8px 4px 20px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 48px), transparent);
}
.tcn-rail > * { scroll-snap-align: start; }
.tcn-rail--wide { grid-auto-columns: clamp(280px, 34vw, 420px); }

/* ── 4. BUTTONS ───────────────────────────────────────────────── */
.tcn-btn {
    --btn-bg: rgba(0,0,0,.04);
    --btn-ink: var(--clr-text-main);
    --btn-border: var(--clr-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    background: var(--btn-bg);
    color: var(--btn-ink);
    border: 1px solid var(--btn-border);
    border-radius: var(--r-md);
    font-family: var(--font-main, 'Inter', sans-serif);
    font-size: var(--fs-small);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.tcn-btn:hover { border-color: rgba(0,0,0,.2); background: rgba(0,0,0,.06); }
.tcn-btn:active { transform: scale(.98); }

.tcn-btn--primary {
    --btn-bg: #0a0a0a;
    --btn-ink: #fff;
    --btn-border: transparent;
}
.tcn-btn--primary:hover {
    background: var(--clr-primary);
    border-color: transparent;
}
.tcn-btn--ghost {
    --btn-bg: transparent;
    --btn-border: rgba(0,0,0,.15);
}
.tcn-btn--danger {
    --btn-bg: transparent;
    --btn-ink: var(--clr-accent);
    --btn-border: rgba(220,38,38,.35);
}
.tcn-btn--danger:hover { background: rgba(220,38,38,.08); border-color: var(--clr-accent); }
.tcn-btn--lg { padding: 17px 36px; font-size: .95rem; border-radius: var(--r-lg); }
.tcn-btn--sm { padding: 8px 16px; font-size: var(--fs-micro); border-radius: var(--r-sm); }
.tcn-btn--block { width: 100%; }
.tcn-btn[disabled], .tcn-btn.is-loading { opacity: .55; pointer-events: none; }

/* ── 5. CARDS & RAILS ─────────────────────────────────────────── */
.tcn-card {
    position: relative;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.tcn-card:hover {
    border-color: rgba(var(--dept-rgb,13,148,136),.3);
    box-shadow: var(--shadow-2);
}
.tcn-card--flat:hover { transform: none; }
.tcn-card__body { padding: var(--sp-4); }

/* Poster card — the cinematic unit (2:3) */
.tcn-poster {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--clr-surface-light);
    text-decoration: none;
    isolation: isolate;
    transition: transform var(--t-med) , box-shadow var(--t-med);
}
.tcn-poster--wide { aspect-ratio: 16 / 9; }
.tcn-poster__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow), filter var(--t-med);
}
.tcn-poster::after {                 /* scrim */
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(3,4,6,.92) 0%, rgba(3,4,6,.25) 45%, transparent 70%);
    z-index: 1;
    transition: opacity var(--t-med);
}
.tcn-poster__meta {
    position: absolute;
    inset-inline: 0; bottom: 0;
    z-index: 2;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(6px);
    transition: transform var(--t-med);
}
.tcn-poster__title {
    font-family: var(--font-title, 'Dela Gothic One', cursive);
    font-size: .95rem;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tcn-poster__sub {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--clr-primary);
}
.tcn-poster:hover { transform: scale(1.025); box-shadow: var(--shadow-2); z-index: 3; }
.tcn-poster:hover .tcn-poster__img { transform: scale(1.07); }
.tcn-poster:hover .tcn-poster__meta { transform: translateY(0); }

/* Locked-content treatment */
.tcn-poster.is-locked .tcn-poster__img { filter: saturate(.4) brightness(.55); }
.tcn-poster.is-locked::before {
    content: '🔒';
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    font-size: .85rem;
    background: rgba(5,5,5,.75);
    border: 1px solid var(--clr-border);
    border-radius: 50%;
    backdrop-filter: blur(6px);
}

/* Stat block (account, channel dashboards) */
.tcn-stat {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tcn-stat__value {
    font-family: var(--font-title, 'Dela Gothic One', cursive);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    color: var(--clr-primary);
}
.tcn-stat__label {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

/* Empty state */
.tcn-empty {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    border: 1px dashed var(--clr-border);
    border-radius: var(--r-lg);
    color: var(--clr-text-muted);
}
.tcn-empty__icon { font-size: 2.2rem; margin-bottom: var(--sp-3); opacity: .6; }

/* ── 6. MEDIA & BADGES ────────────────────────────────────────── */
.tcn-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: var(--fs-micro);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: var(--r-pill);
    background: var(--clr-surface-light);
    color: var(--clr-text-main);
    border: 1px solid transparent;
}
.tcn-badge--new { background: var(--clr-primary); color: #fff; }
.tcn-badge--live { background: var(--clr-accent); color: #fff; }
.tcn-badge--live::before { content:''; width:6px; height:6px; border-radius:50%; background:#fff; animation: tcnPulse 1.4s infinite; }
.tcn-badge--free { background: transparent; border-color: rgba(var(--dept-rgb,13,148,136),.4); color: var(--clr-primary); }
.tcn-badge--type { background: rgba(0,0,0,.65); color: #fff; backdrop-filter: blur(6px); border-color: transparent; }

/* Avatar */
.tcn-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--clr-border);
    background: var(--clr-surface-light);
}
.tcn-avatar--lg { width: 84px; height: 84px; }
.tcn-avatar-stack { display: flex; }
.tcn-avatar-stack .tcn-avatar { margin-left: -12px; border-color: var(--clr-bg); }
.tcn-avatar-stack .tcn-avatar:first-child { margin-left: 0; }

/* ── 7. FORMS & CODE REDEMPTION ───────────────────────────────── */
.tcn-field { display: flex; flex-direction: column; gap: 8px; }
.tcn-label {
    font-size: var(--fs-micro);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}
.tcn-input, .tcn-select, .tcn-textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0,0,0,.02);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-md);
    color: var(--clr-text-main);
    font-family: var(--font-main, 'Inter', sans-serif);
    font-size: .95rem;
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.tcn-input::placeholder, .tcn-textarea::placeholder { color: rgba(0,0,0,.3); }
.tcn-input:focus, .tcn-select:focus, .tcn-textarea:focus {
    border-color: var(--clr-primary);
    background: rgba(var(--dept-rgb,13,148,136),.04);
    box-shadow: 0 0 0 3px rgba(var(--dept-rgb,13,148,136),.12);
}
.tcn-input.is-error { border-color: var(--clr-accent); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.tcn-help { font-size: var(--fs-micro); color: var(--clr-text-muted); }
.tcn-help--error { color: var(--clr-accent); }

/* THE code field — gain access ritual */
.tcn-code-field {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: rgba(0,0,0,.02);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tcn-code-field:focus-within {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(var(--dept-rgb,13,148,136),.14);
}
.tcn-code-field .tcn-code-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--clr-text-main);
    font-family: 'Courier New', monospace;
    font-size: clamp(1rem, 2.4vw, 1.35rem);
    font-weight: 700;
    letter-spacing: .35em;
    text-transform: uppercase;
    text-align: center;
    padding: 12px 8px;
}
.tcn-code-field .tcn-code-input::placeholder { color: rgba(0,0,0,.25); letter-spacing: .2em; }
.tcn-code-field.is-success { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.14); animation: tcnUnlock .5s var(--ease-spring); }
.tcn-code-field.is-error { border-color: var(--clr-accent); animation: tcnShake .4s; }

/* ── 8. OVERLAYS ──────────────────────────────────────────────── */
.tcn-glass {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid var(--clr-border);
}
.tcn-scrim-top { background: linear-gradient(to bottom, rgba(5,5,5,.9), transparent); }
.tcn-scrim-bottom { background: linear-gradient(to top, rgba(5,5,5,.95), transparent); }

/* Header refinement (existing .site-header) */
.site-header {
    transition: background var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
    border-bottom: 1px solid transparent;
}
.site-header--scrolled {
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom-color: var(--clr-border);
    box-shadow: 0 8px 32px rgba(0,0,0,.06);
}
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -6px;
    width: 0; height: 2px;
    background: var(--clr-primary);
    border-radius: 1px;
    transform: translateX(-50%);
    transition: width var(--t-med);
}
.nav-link:hover::after, .nav-link.active::after { width: 70%; }

/* ── 9. LEGACY CLASS ALIASES ──────────────────────────────────────
   Existing templates unify immediately; markup migrates over time. */

/* Buttons across page families */
.fp-btn, .mah-btn, .lc-btn, .tcn-btn-primary, .tcn-btn-secondary,
.ch-hero-cta, .ch-pcc-redeem-btn, .ch-hero-code-submit,
.tcn-cart-checkout-btn, .main-access-btn {
    font-family: var(--font-main, 'Inter', sans-serif) !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    border-radius: var(--r-md) !important;
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast) !important;
}
.fp-btn--primary, .tcn-btn-primary, .ch-hero-cta--primary,
.ch-pcc-redeem-btn, .ch-hero-code-submit, .tcn-cart-checkout-btn, .main-access-btn {
    background: #0a0a0a !important;
    color: #fff !important;
    border-color: transparent !important;
}
.fp-btn--primary:hover, .tcn-btn-primary:hover, .ch-pcc-redeem-btn:hover,
.ch-hero-code-submit:hover, .tcn-cart-checkout-btn:hover, .main-access-btn:hover {
    background: var(--clr-primary) !important;
    opacity: 1 !important;
}
.fp-btn--ghost, .tcn-btn-secondary, .ch-hero-cta--ghost {
    background: transparent !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    color: var(--clr-text-main) !important;
}
.fp-btn--ghost:hover, .tcn-btn-secondary:hover { border-color: var(--clr-text-main) !important; background: rgba(0,0,0,.03) !important; }

/* Cards across page families */
.mah-card, .mah-panel, .step-card, .ga-faq-item, .creator-step {
    background: var(--clr-surface) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-1);
    transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.mah-card:hover, .step-card:hover {
    border-color: rgba(var(--dept-rgb,13,148,136),.3) !important;
    box-shadow: var(--shadow-2);
}

/* Section headers across page families */
.fp-section-title, .mah-title, .ch-hero-title {
    font-family: var(--font-title, 'Dela Gothic One', cursive) !important;
    line-height: 1.08 !important;
    letter-spacing: .01em !important;
    text-wrap: balance;
}
.fp-section-tag {
    letter-spacing: .22em !important;
    font-size: var(--fs-micro) !important;
}
.fp-section-sub, .mah-subtitle, .ch-hero-desc {
    color: var(--clr-text-muted) !important;
    line-height: 1.65 !important;
}

/* Form fields across page families */
.tcn-form-group input, .tcn-form-group select, .tcn-form-group textarea,
.creator-form-group input, .creator-form-group select, .creator-form-group textarea {
    background: rgba(0,0,0,.02) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--r-md) !important;
    color: var(--clr-text-main) !important;
    transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
.tcn-form-group input:focus, .tcn-form-group select:focus, .tcn-form-group textarea:focus,
.creator-form-group input:focus, .creator-form-group textarea:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--dept-rgb,13,148,136),.12) !important;
    outline: none !important;
}

/* ── 10. MOTION & A11Y ────────────────────────────────────────── */
@keyframes tcnPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes tcnUnlock { 0% { transform: scale(.985); } 55% { transform: scale(1.012); } 100% { transform: scale(1); } }
@keyframes tcnShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes tcnFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.tcn-animate-in { animation: tcnFadeUp .6s var(--ease-out) both; }
.tcn-animate-in--d1 { animation-delay: .08s; }
.tcn-animate-in--d2 { animation-delay: .16s; }
.tcn-animate-in--d3 { animation-delay: .24s; }

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

/* ── 11. SITEWIDE TYPE & COLOR UNIFICATION ────────────────────────
   Every page-family heading speaks the same brand voice. */
h1.ga-title, h1.tcn-page-title, h1.tcn-arc-title, h1.tcn-reg-heading,
h1.tcn-s-title, h1.tcn-sp-title, h1.tsp-title, h1.inst-title,
h1.drop-hero-title, h1.tcn-single-title, h1.tcn-prod-info-title,
h1.tcn-wc-page-title, h1.ch-hero-title, .chn-hero-v2 h1,
.mah-title, .fp-creator-heading {
    font-family: var(--font-title, 'Dela Gothic One', cursive) !important;
    font-weight: 400 !important;              /* Dela has one weight */
    letter-spacing: .01em !important;
    line-height: 1.08 !important;
    text-transform: uppercase;
    text-wrap: balance;
}

/* Muted text: replace stray zinc grays with brand muted tone */
.ga-subtitle, .chn-sidebar-desc, .chn-main-count,
.ga-small, .post-card-date, .ntw-type-label {
    color: var(--clr-text-muted, #8e9aaf) !important;
}

/* Eyebrows/badges unified */
.ga-badge, .fp-section-tag, .chn-hero-eyebrow, .ch-hero-label {
    font-size: var(--fs-micro) !important;
    font-weight: 800 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
}

/* Panel surfaces converge on system surface + border */
.ga-panel, .chn-sidebar, .mah-panel {
    border-radius: var(--r-lg) !important;
}

/* Footer polish */
.site-footer {
    border-top: 1px solid var(--clr-border);
    background: var(--clr-bg);
}
.footer-title {
    font-family: var(--font-title, 'Dela Gothic One', cursive);
    letter-spacing: .04em;
}
.footer-links-col a { transition: color var(--t-fast); }
.footer-links-col a:hover { color: var(--clr-primary) !important; }

/* Mobile bottom nav polish (app chrome) */
.tcn-bottom-nav {
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid var(--clr-border) !important;
}
.bnav-item { transition: color var(--t-fast), transform var(--t-fast); }
.bnav-item.bnav-active { color: var(--clr-primary) !important; }
.bnav-center-icon {
    background: var(--clr-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;
}

/* ── 12. MEMBER SURFACE ALIASES (channel hub, dept single, account) ── */
h2.ch-lockdown-title, h2.ch-section-title, h2.ch-sidebar-name,
h2.sdept-section-title, h2.tcn-lockdown-title, h2.terminal-title {
    font-family: var(--font-title, 'Dela Gothic One', cursive) !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase;
}
.ch-lockdown-btn, .ch-ga-btn-submit, .ch-quick-cta, .ch-modal-action,
.lc-btn--primary, .lc-btn--buy, .lc-btn-use,
.creator-submit-btn, .fp-creator-apply-btn, .mah-btn {
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    border-radius: var(--r-md) !important;
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast) !important;
}
.ch-lockdown-btn:hover, .ch-ga-btn-submit:hover, .ch-quick-cta:hover,
.lc-btn--primary:hover, .lc-btn--buy:hover, .creator-submit-btn:hover,
.fp-creator-apply-btn:hover, .mah-btn:hover {
    opacity: .88;
}
.mah-btn-danger { border-radius: var(--r-md) !important; }
.mah-btn-outline {
    border: 1px solid rgba(0,0,0,.15) !important;
    border-radius: var(--r-md) !important;
}

/* Purchase / redeem rows inherit dept tint automatically via --clr-primary */
.ch-pcc-purchase-btn, .ch-pcc-redeem-btn {
    background: var(--clr-primary) !important;
    color: #fff !important;
}