/* ============================================================
   SINGLE CREATOR PAGE — New Template
   Prefix: snc-  (Single New Creator)
   Version: 2.6 | 2026
   Max-width: 1440px
   Dark mode: [data-op-theme="dark"]
   ============================================================
   Changelog v2.0 (Restyling round 4):
   - YML/PRN cards: dark mode corner fix (image overflow + background match)
   - NEW: "Popular Right Now" carousel (replaces creator-circles 2nd instance)
   - NEW: Explore Similar Creators 20-card grid (4×5 desktop / 2×10 mobile)
   - FAQ: question size reduced (17px → 15px), answer font Roboto (matches About)
   Changelog v1.9:
   - HERO mobile: cover height locked, avatar 140px, username under name
   - YML: redesigned as category-creator-card clone (no stats)
   - FAQ: questions UPPERCASE + larger, dark hover light color
   - BIO: removed blue border, restyled warning text
   Changelog v1.8:
   - CTA C compatta: single-row pill style (not banner)
   - Gallery: 2 columns × N rows (larger images)
   - NEW: "You May Also Like" horizontal carousel
   ============================================================ */

:root {
    --snc-purple:  #4b0d85;
    --snc-blue:    #00B6E6;
    --snc-pink:    #ec4899;
    --snc-orange:  #f97316;
    --snc-green:   #22c55e;
    --snc-amber:   #f59e0b;
    --snc-red:     #ef4444;
    --snc-r-xs:   6px;
    --snc-r-sm:   10px;
    --snc-r-md:   16px;
    --snc-r-lg:   20px;
    --snc-r-xl:   28px;
    --snc-r-full: 9999px;
    --snc-ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --snc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --snc-max-width: var(--op-content-max, 1640px);
    --snc-gutter:    32px;
    --snc-sidebar:   460px;
    --snc-gap:       32px;
    --snc-name-gradient:   linear-gradient(135deg, #4b0d85, #00B6E6);
    --snc-accent-gradient: linear-gradient(135deg, #4b0d85, #00B6E6);
    --snc-cta-gradient:    linear-gradient(98.76deg, #4b0d85 31.97%, #00B6E6 97.67%);
    --snc-gauge-gradient:  linear-gradient(135deg, #f43f5e 0%, #a855f7 40%, #3b82f6 80%, #06b6d4 100%);
    /* === Main CTAs — OnlyFans blue gradient + glow ===
       To revert to the original pink scheme, override these vars in :root or in
       [data-op-theme] (see commented block at the very bottom of this file). */
    --snc-cta-of:                 linear-gradient(-45deg, #00AFF0, #00D2FF, #009BD9, #00AFF0);
    --snc-cta-of-shadow:          0 6px 24px rgba(0, 175, 240, 0.40);
    --snc-cta-of-shadow-hover:    0 10px 36px rgba(0, 175, 240, 0.55);
    --snc-cta-of-shadow-soft:     0 4px 20px rgba(0, 175, 240, 0.35);
    --snc-cta-of-shadow-soft-h:   0 8px 32px rgba(0, 175, 240, 0.50);
    --snc-cta-of-shadow-float:    0 8px 32px rgba(0, 175, 240, 0.45);
    --snc-cta-of-shadow-float-h:  0 12px 40px rgba(0, 175, 240, 0.55);
}

[data-op-theme="light"] {
    /* Start on --op-bg (#f5f5f8) so the page meets the header seamlessly. */
    --snc-page-bg:          linear-gradient(145deg, #f5f5f8 0%, #f5f4f8 55%, #f0f4f8 80%, #edf2f7 100%);
    --snc-page-bg-solid:    #f5f5f7;
    --snc-card-bg:          var(--op-bg-card);
    --snc-card-bg-solid:    var(--op-bg-card);
    --snc-card-shadow:      0 2px 16px rgba(0,0,0,0.06);
    --snc-card-shadow-lg:   0 8px 40px rgba(0,0,0,0.08);
    --snc-card-shadow-hover:0 8px 32px rgba(0,0,0,0.10);
    --snc-surface-alt: linear-gradient(125deg, #f1f7fd, #fbf3fa, #fff8f2);
    --snc-t1:    var(--op-text-primary);
    --snc-t2:    var(--op-text-secondary);
    --snc-t3:    #9ca3af;
    --snc-t4:    #d1d5db;
    --snc-meta:        #6e6e73;   /* neutral grey for all small/meta text */
    --snc-meta-strong: #3a3a3c;
    --snc-t-inv: #ffffff;
    --snc-border:       var(--op-border);
    --snc-border-light: rgba(0,0,0,0.04);
    --snc-glass-bg:     rgba(255,255,255,0.85);
    --snc-glass-border: rgba(255,255,255,0.9);
    --snc-glass-blur:   blur(20px) saturate(180%);
}

[data-op-theme="dark"] {
    --snc-page-bg:          var(--op-bg);
    --snc-page-bg-solid:    #0d0d14;
    --snc-card-bg:          var(--op-bg-card);
    --snc-card-bg-solid:    var(--op-bg-card);
    --snc-card-shadow:      0 2px 16px rgba(0,0,0,0.3);
    --snc-card-shadow-lg:   var(--op-shadow);
    --snc-card-shadow-hover:0 8px 32px rgba(0,0,0,0.35);
    --snc-surface-alt: var(--op-bg-elevated);
    --snc-t1:    var(--op-text-primary);
    --snc-t2:    var(--op-text-secondary);
    --snc-t3:    #64748b;
    --snc-t4:    #374151;
    --snc-meta:        #9a9aa1;   /* neutral grey for all small/meta text */
    --snc-meta-strong: #d0d0d6;
    --snc-t-inv: #ffffff;
    --snc-border:       var(--op-border);
    --snc-border-light: rgba(255,255,255,0.04);
    --snc-glass-bg:     rgba(13,13,20,0.85);
    --snc-glass-border: rgba(255,255,255,0.08);
    --snc-glass-blur:   blur(20px) saturate(180%);
}

/* ============================================================
   BASE
   ============================================================ */
.snc-page {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --snc-meta-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    min-height: 100vh;
    background: var(--snc-page-bg);
    background-attachment: fixed;
    color: var(--snc-t1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* clip (not hidden): prevents horizontal overflow WITHOUT turning .snc-page
       into a scroll container — which would break the sticky sidebar. */
    overflow-x: clip;
}
.snc-page *, .snc-page *::before, .snc-page *::after { box-sizing: border-box; }
.snc-page img { max-width: 100%; height: auto; }
.snc-page a   { text-decoration: none; color: inherit; }

.snc-container {
    max-width: var(--snc-max-width);
    margin: 0 auto;
    /* Breathing room under the fixed header via PADDING, not margin: a top margin
       here collapses with the parent .snc-page and pushes the whole page down,
       revealing a band behind it. Padding keeps the .snc-page background
       continuous right up to the header while still spacing the breadcrumb. */
    padding: 18px var(--snc-gutter) 0;
}
@media (max-width: 767px) { .snc-container { padding-top: 14px; } }

/* Generic Card */
.snc-card {
    background: #ffffff;
    border-radius: var(--snc-r-lg);
    box-shadow: var(--snc-card-shadow);
    overflow: hidden;
    transition: box-shadow 0.3s var(--snc-ease), transform 0.3s var(--snc-ease);
}
.snc-card:hover { box-shadow: var(--snc-card-shadow-hover); }
@media (max-width: 767px) {
    .snc-card:hover, .snc-card:active { box-shadow: var(--snc-card-shadow); transform: none; }
}
[data-op-theme="dark"] .snc-card {
    background: #16161c;
    border: 1px solid rgba(255,255,255,0.06);
}
[data-op-theme="dark"] .snc-hero-card {
    background: #16161f;
    border: none;
}
.snc-card-body { padding: 24px; }

.snc-card-title {
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: 13px; font-weight: 400; letter-spacing: 0.3px;
    margin: 0 0 16px;
    display: flex; align-items: center; gap: 8px;
    text-transform: uppercase; color: var(--snc-purple);
    background: none; -webkit-background-clip: initial;
    -webkit-text-fill-color: initial; background-clip: initial;
}
.snc-card-title svg { display: none; }
/* Light mode: near-black card titles instead of purple */
[data-op-theme="light"] .snc-card-title { color: #121212; }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.snc-breadcrumbs {
    padding: 8px 0 0;
    font-size: 12px; color: var(--snc-t3);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.snc-breadcrumbs a { color: var(--snc-t3); transition: color 0.2s; }
.snc-breadcrumbs a:hover { color: var(--snc-purple); }
.snc-breadcrumbs .snc-bc-sep     { opacity: 0.4; font-size: 10px; }
.snc-breadcrumbs .snc-bc-current { color: var(--snc-t2); font-weight: 500; }

/* ============================================================
   CREATOR CIRCLES — fade + drag scroll
   ============================================================ */
.snc-circles-wrap {
    position: relative;
    overflow: hidden;
    cursor: grab;
    margin-top: 8px;
    margin-bottom: 8px;
}
.snc-circles-wrap:active { cursor: grabbing; }

[data-op-theme="light"] .snc-circles-wrap::after {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 80px; height: 100%;
    background: linear-gradient(to right, transparent, var(--snc-page-bg-solid));
    pointer-events: none; z-index: 2;
}
[data-op-theme="dark"] .snc-circles-wrap::after {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 80px; height: 100%;
    background: linear-gradient(to right, transparent, #0d0d14);
    pointer-events: none; z-index: 2;
}

/* ============================================================
   HERO
   ============================================================ */
.snc-hero { margin: 10px 0 var(--snc-gap); }

.snc-hero-card {
    background: #ffffff;
    border-radius: var(--snc-r-xl);
    box-shadow: var(--snc-card-shadow-lg);
    overflow: visible;
}

.snc-cover {
    position: relative; width: 100%; height: 400px; max-height: 400px;
    overflow: hidden; flex-shrink: 0; background: #1a1a2e;
    border-radius: var(--snc-r-xl) var(--snc-r-xl) 0 0;
    font-size: 0; line-height: 0;
}
.snc-cover-img {
    width: 100%; height: 100% !important; min-height: 100%;
    object-fit: cover; object-position: center 70%;
    display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.snc-cover-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #2d1b69 0%, #1e1b4b 40%, #312e81 100%);
}

/* HERO BODY: flex-column layout */
.snc-hero-body {
    padding: 0 32px 28px;
    display: grid;
    grid-template-areas:
        "avatar identity actions"
        "stats  stats    actions";
    grid-template-columns: auto 1fr 340px;
    grid-template-rows: auto auto;
    column-gap: 24px;
    row-gap: 16px;
    align-items: start;
}

.snc-avatar-wrap     { grid-area: avatar; }
.snc-creator-info    { grid-area: identity; }
.snc-hero-stats-wrap {
    grid-area: stats;
    position: relative;
}
.snc-hero-actions    { grid-area: actions; }

/* Avatar */
.snc-avatar-wrap {
    margin-top: -72px; position: relative; z-index: 5; align-self: end;
}
.snc-avatar {
    width: 200px; height: 200px; border-radius: 50%;
    border: 5px solid #ffffff;
    box-shadow: 0 8px 32px rgba(75,13,133,0.18);
    overflow: hidden; cursor: pointer;
    transition: transform 0.3s var(--snc-spring), box-shadow 0.3s var(--snc-ease);
    display: block; background: linear-gradient(135deg, #4b0d85, #00B6E6);
    padding: 0; margin: 0; outline: none;
    position: relative; z-index: 20; pointer-events: all;
    -webkit-user-select: none; user-select: none;
}
.snc-avatar:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 48px rgba(75,13,133,0.28);
}
.snc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snc-avatar-initials {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 64px; font-weight: 700;
}

.snc-creator-info { min-width: 0; padding-top: 16px; }

/* Creator Name */
.snc-creator-name {
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: 38px; line-height: 1.05; letter-spacing: -1.5px;
    margin: 0 0 12px;
    background: var(--snc-name-gradient);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
/* Light mode: solid near-black name (no gradient) */
[data-op-theme="light"] .snc-creator-name {
    background: none; -webkit-text-fill-color: #121212; color: #121212;
}
.snc-creator-name .snc-name-first { font-weight: 400; }
.snc-creator-name .snc-name-last  { font-weight: 400; }
.snc-creator-name .snc-verified-badge {
    -webkit-text-fill-color: initial; background: none;
    -webkit-background-clip: initial; background-clip: initial;
}

/* Username Box (DESKTOP — hidden in mobile) */
.snc-username-box {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(125deg, #f1f7fd, #fbf3fa, #fff8f2);
    border-radius: 14px; box-shadow: 0 2px 14px rgba(0,0,0,0.09);
    padding: 10px 14px; margin-bottom: 14px; gap: 10px;
    max-width: 400px;
    transition: box-shadow 0.2s var(--snc-ease), transform 0.2s var(--snc-ease);
    text-decoration: none; color: inherit; cursor: pointer;
}
.snc-username-box:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.13); transform: translateY(-1px); }
[data-op-theme="dark"] .snc-username-box {
    background: #1d1d24;
    border: 1px solid rgba(255,255,255,0.08); box-shadow: none;
}
.snc-username-box-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.snc-ub-icon { width: 32px !important; height: 32px !important; border-radius: 6px; flex-shrink: 0; display: block; }
.snc-username-box-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.snc-username-box-platform { font-size: 13px; font-weight: 700; color: var(--snc-t1); line-height: 1.2; }
.snc-username-box-handle {
    font-size: 12px; color: var(--snc-t3); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-op-theme="dark"] .snc-username-box-handle { color: rgba(255,255,255,0.9); }
.snc-username-box-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.snc-username-price-badge {
    padding: 4px 11px; border-radius: var(--snc-r-full);
    font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; white-space: nowrap;
}
.snc-username-price-badge.snc-ub-free { background: rgba(34,197,94,0.12); color: #15803d; }
.snc-username-price-badge.snc-ub-paid { background: rgba(0,182,230,0.12); color: #0078DC; }
[data-op-theme="dark"] .snc-username-price-badge.snc-ub-free { background: rgba(34,197,94,0.15); color: #4ade80; }
[data-op-theme="dark"] .snc-username-price-badge.snc-ub-paid { background: rgba(0,182,230,0.15); color: #38bdf8; }
.snc-of-icon-img, .snc-of-icon-svg {
    width: 25px; height: 35px; border-radius: 4px; flex-shrink: 0; display: block;
}
.snc-ub-arrow {
    width: 16px; height: 16px; flex-shrink: 0;
    color: var(--snc-t3); transition: color 0.2s;
}
.snc-username-box:hover .snc-ub-arrow { color: var(--snc-blue); }
[data-op-theme="dark"] .snc-ub-arrow { color: rgba(255,255,255,0.7); }
[data-op-theme="dark"] .snc-username-box:hover .snc-ub-arrow { color: #ffffff; }
.snc-verified-badge {
    display: inline-flex; align-items: center; vertical-align: middle;
    flex-shrink: 0; margin-left: 4px; line-height: 1;
}

/* Badges row */
.snc-badges-row {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; margin-bottom: 0;
}
.snc-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: var(--snc-r-full);
    font-size: 12px; font-weight: 600; white-space: nowrap;
    transition: all 0.2s; border: none;
}
.snc-badge-active { background: rgba(34,197,94,0.10); color: #15803d; }
.snc-badge-active .snc-pulse-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--snc-green);
    animation: sncPulse 2s ease-in-out infinite;
}
@keyframes sncPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.3); }
}
.snc-badge-gender     { background: rgba(248,87,166,0.12); color: #f857a6; }
.snc-badge-gender.snc-badge-male { background: rgba(0,120,220,0.12); color: #0078DC; }
.snc-badge-rank       { background: rgba(245,158,11,0.10); color: #b45309; }
.snc-badge-trans {
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(236,72,153,0.12));
    color: #7c3aed;
}
/* NEW v1.8: price badge in badges-row */
.snc-badge-price {
    background: rgba(0,120,220,0.10);
    color: #0078DC;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.snc-badge-price.snc-badge-price-free {
    background: rgba(34,197,94,0.12);
    color: #15803d;
}
.snc-badge-price.snc-badge-price-paid {
    background: rgba(0,120,220,0.10);
    color: #0078DC;
}
[data-op-theme="dark"] .snc-badge-active  { background: rgba(34,197,94,0.12);  color: #4ade80; }
[data-op-theme="dark"] .snc-badge-gender  { background: rgba(248,87,166,0.14); color: #fb7cc4; }
[data-op-theme="dark"] .snc-badge-gender.snc-badge-male { background: rgba(0,120,220,0.14); color: #38bdf8; }
[data-op-theme="dark"] .snc-badge-rank    { background: rgba(245,158,11,0.12); color: #fbbf24; }
[data-op-theme="dark"] .snc-badge-trans   {
    background: linear-gradient(135deg, rgba(99,102,241,0.20), rgba(236,72,153,0.20));
    color: #c4b5fd;
}
[data-op-theme="dark"] .snc-badge-price.snc-badge-price-free { background: rgba(34,197,94,0.15); color: #4ade80; }
[data-op-theme="dark"] .snc-badge-price.snc-badge-price-paid { background: rgba(0,120,220,0.15); color: #38bdf8; }

/* Stats Row */
.snc-stats-row {
    display: flex; align-items: stretch;
    background: var(--snc-surface-alt);
    border-radius: var(--snc-r-lg);
    padding: 16px 8px; position: relative;
}
[data-op-theme="dark"] .snc-stats-row {
    background: #16161c;
    border: 1px solid rgba(255,255,255,0.06);
}
.snc-stat-item {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex: 1; padding: 8px 6px; position: relative; cursor: default;
}
.snc-stat-item:not(:last-child)::after {
    content: ''; position: absolute; right: 0; top: 15%;
    height: 70%; width: 1px; background: var(--snc-border);
}
.snc-stat-icon {
    color: #121212; margin-bottom: 6px; opacity: 0.9;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
}
.snc-stat-icon svg { stroke: #121212; }
[data-op-theme="dark"] .snc-stat-icon {
    color: rgba(255,255,255,0.85);
    opacity: 1;
}
[data-op-theme="dark"] .snc-stat-icon svg {
    stroke: rgba(255,255,255,0.85);
}
.snc-stat-value {
    font-size: 17px; font-weight: 700; color: var(--snc-t1);
    line-height: 1; margin-bottom: 3px; white-space: nowrap;
}
.snc-stat-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--snc-t3); font-weight: 700; white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
}
.snc-stats-updated {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--snc-t3);
    font-family: 'DM Sans', sans-serif;
    position: absolute;
    top: -24px;
    right: 0;
    margin: 0;
    padding: 0;
    letter-spacing: 0;
}
/* Both items share the same neutral weight/size — only the number is accented */
.snc-stats-updated .snc-stats-updated-item {
    font-weight: 500;
    color: var(--snc-t3);
}
.snc-stats-updated .snc-stats-viewers strong {
    color: var(--snc-purple);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
[data-op-theme="dark"] .snc-stats-updated .snc-stats-viewers strong {
    color: #f5c5da;
}
.snc-stats-updated .snc-stats-sep {
    color: var(--snc-t3);
    opacity: 0.6;
    font-weight: 400;
}
.snc-stats-meta { display: none; }

/* Hero Actions */
.snc-hero-actions {
    display: flex; flex-direction: column;
    padding-top: 16px;
    align-self: stretch;
}

/* Hero Info Rows */
.snc-hero-info-rows {
    display: flex; flex-direction: column;
    background: var(--snc-surface-alt);
    border-radius: var(--snc-r-lg);
    padding: 4px 14px; margin-top: auto;
}
[data-op-theme="dark"] .snc-hero-info-rows {
    background: #16161c;
    border: 1px solid rgba(255,255,255,0.06);
}
.snc-hero-info-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 0; border-bottom: 1px solid var(--snc-border-light); gap: 10px;
}
.snc-hero-info-row:last-child { border-bottom: none; }
.snc-hero-info-key {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--snc-t1); flex-shrink: 0; font-weight: 600;
}
.snc-hero-info-val { font-size: 12px; font-weight: 700; color: var(--snc-t1); text-align: right; }
.snc-hero-info-val.snc-green-val { color: var(--snc-green); }

/* Harmonised meta typography (lead + captions all share DM Sans / one grey scale) */
.snc-lead {
    font-size: 14.5px; line-height: 1.55; color: var(--snc-t2);
    margin: 8px 0 4px; max-width: 60ch; font-family: 'DM Sans', sans-serif;
}
.snc-lead-user { font-weight: 800; color: var(--snc-t1); }
.snc-updated {
    font-size: 11px; color: var(--snc-t3); margin: 0 0 10px;
    font-family: 'DM Sans', sans-serif;
}

/* Subscribe panel (Option A) — right-column structure shared by all viewports */
.snc-subscribe-head { display: flex; flex-direction: column; gap: 12px; }
/* Horizontal row (was stacked, wasting vertical space on mobile) — wraps only if
   truly needed. */
.snc-subscribe-trust { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 8px 16px; padding: 2px; }
.snc-trust-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 500; color: var(--snc-t3);
    font-family: 'DM Sans', sans-serif; white-space: nowrap;
}
.snc-trust-item svg { color: var(--snc-t3); flex-shrink: 0; }
@media (max-width: 480px) {
    .snc-subscribe-trust { gap: 6px 12px; }
    .snc-trust-item { font-size: 10px; }
    .snc-trust-item svg { width: 12px; height: 12px; }
}

/* Desktop: the right column becomes a cohesive glass "subscribe" card that fills
   the two-row height, so it no longer reads as an empty gap under the CTA. */
@media (min-width: 769px) {
    .snc-hero-actions {
        justify-content: space-between; gap: 18px;
        margin-top: 12px;                  /* clear the cover image above */
        padding: 18px; border-radius: var(--snc-r-lg);
        background: var(--snc-surface-alt);
        border: 1px solid var(--snc-border-light);
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    }
    [data-op-theme="dark"] .snc-hero-actions {
        background: rgba(255,255,255,0.03);
        border-color: rgba(255,255,255,0.07);
    }
    /* Facts sit inside the panel: strip their own card chrome, add a light divider. */
    .snc-hero-actions .snc-hero-info-rows {
        background: none; border: none; padding: 0; margin-top: 0;
        border-top: 1px solid var(--snc-border-light); padding-top: 10px;
    }
    [data-op-theme="dark"] .snc-hero-actions .snc-hero-info-rows {
        background: none; border: none; border-top-color: rgba(255,255,255,0.08);
    }
    .snc-subscribe-head .snc-username-box { margin-bottom: 0; max-width: none; width: 100%; }
}

/* CTA buttons */
@keyframes sncGradientShift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
.snc-cta-primary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 22px;
    background: var(--snc-cta-of);
    background-size: 400% 400%; animation: sncGradientShift 4s ease infinite;
    border: none; border-radius: var(--snc-r-full);
    color: #ffffff; font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    box-shadow: var(--snc-cta-of-shadow-soft);
    transition: transform 0.3s var(--snc-spring), box-shadow 0.3s var(--snc-ease);
    text-decoration: none; white-space: nowrap; position: relative; overflow: hidden;
}
.snc-cta-primary:hover { transform: translateY(-2px); box-shadow: var(--snc-cta-of-shadow-soft-h); }
.snc-cta-primary:active { transform: translateY(0); }
.snc-cta-of {
    display: grid; grid-template-columns: 28px 1fr 28px;
    align-items: center; gap: 8px; padding: 15px 18px;
    background: var(--snc-cta-of);
    background-size: 400% 400%; animation: sncGradientShift 4s ease infinite;
    border: none; border-radius: var(--snc-r-full);
    color: #ffffff; font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    box-shadow: var(--snc-cta-of-shadow);
    transition: transform 0.3s var(--snc-spring), box-shadow 0.3s var(--snc-ease);
    text-decoration: none; width: 100%;
}
.snc-cta-of:hover { transform: translateY(-2px); box-shadow: var(--snc-cta-of-shadow-hover); }
.snc-cta-of-icon  { width: 28px; height: 28px; border-radius: 4px; flex-shrink: 0; display: block; object-fit: contain; }
.snc-cta-of-text  { text-align: center; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }
.snc-cta-of-arrow { width: 28px; height: 28px; flex-shrink: 0; }
.snc-btn-ghost {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 16px; background: rgba(0,0,0,0.04);
    border: none; border-radius: var(--snc-r-full);
    color: var(--snc-t2); font-size: 12px; font-weight: 600; cursor: pointer;
    font-family: 'DM Sans', sans-serif; transition: all 0.25s var(--snc-ease);
    white-space: nowrap; text-decoration: none;
}
[data-op-theme="dark"] .snc-btn-ghost { background: rgba(255,255,255,0.06); }
.snc-btn-ghost:hover {
    background: var(--snc-cta-of);
    background-size: 400% 400%; animation: sncGradientShift 4s ease infinite;
    color: #ffffff; transform: translateY(-1px);
}

/* ============================================================
   CTA C INTEGRATED — Mobile-only compact single-row CTA (v1.8)
   Hidden on desktop; replaces username box + CTA in mobile only
   ============================================================ */
.snc-cta-c-integrated { display: none; }

/* Physical details in hero — mobile only */
.snc-hero-phys {
    display: none; margin-top: 16px;
    background: var(--snc-surface-alt); border-radius: var(--snc-r-lg); padding: 14px;
}
[data-op-theme="dark"] .snc-hero-phys {
    background: #16161c;
    border: 1px solid rgba(255,255,255,0.06);
}
.snc-hero-phys-title {
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: 10px; font-weight: 400; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--snc-purple); margin-bottom: 10px; text-align: center;
}
[data-op-theme="dark"] .snc-hero-phys-title { color: #ffffff; }
.snc-hero-phys .snc-physical-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.snc-hero-phys .snc-phys-item { background: rgba(255,255,255,0.7); padding: 8px 4px; }
[data-op-theme="dark"] .snc-hero-phys .snc-phys-item { background: rgba(255,255,255,0.04); }

/* ============================================================
   PROMO SLOTS
   ============================================================ */
.snc-promo-slot {
    border: 1.5px dashed rgba(245,158,11,0.4); border-radius: var(--snc-r-lg);
    padding: 14px 20px; text-align: center; font-size: 11px;
    color: var(--snc-amber); font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase; background: rgba(245,158,11,0.02);
    margin-bottom: var(--snc-gap); transition: border-color 0.2s, background 0.2s;
}
.snc-promo-slot:hover { border-color: rgba(245,158,11,0.65); background: rgba(245,158,11,0.05); }
.snc-promo-slot span { display: block; font-size: 10px; color: var(--snc-t3); font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 2px; }

/* ============================================================
   LAYOUT
   ============================================================ */
.snc-layout { display: flex; gap: var(--snc-gap); align-items: flex-start; margin-bottom: 48px; }
.snc-main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--snc-gap); }
.snc-sidebar {
    width: var(--snc-sidebar); flex-shrink: 0;
    display: flex; flex-direction: column; gap: var(--snc-gap);
    /* Sticky: follows the scroll when the gallery is taller. top clears the fixed header. */
    position: sticky; top: calc(var(--op-header-h, 72px) + 14px);
    align-self: flex-start;
}

/* Full-width flow below the gallery + sidebar zone.
   Carousels (You May Also Like / Popular Right Now) span the whole width;
   prose cards (About / Bio / FAQ) keep a readable measure, centered. */
.snc-flow { display: flex; flex-direction: column; gap: var(--snc-gap); margin-bottom: 48px; }
.snc-flow > .snc-card,
.snc-flow > .snc-circles-section-title { align-self: stretch; width: 100%; max-width: none; }

/* ============================================================
   DESCRIPTION & BIO
   ============================================================ */
.snc-about-info-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 2px 6px;
    cursor: pointer;
    color: #4b0d85 !important; -webkit-text-fill-color: initial !important;
    position: relative; vertical-align: middle; flex-shrink: 0;
    border-radius: 4px; transition: color 0.2s, transform 0.2s; line-height: 0;
}
.snc-about-info-btn svg { width: 20px; height: 20px; stroke: #4b0d85; fill: none; flex-shrink: 0; display: block; }
.snc-about-info-btn:hover { transform: scale(1.2); }
.snc-about-info-btn:hover svg { stroke: #7c3aed; }
[data-op-theme="dark"] .snc-about-info-btn { color: #c4b5fd !important; -webkit-text-fill-color: initial !important; }
[data-op-theme="dark"] .snc-about-info-btn svg { stroke: #c4b5fd; }
[data-op-theme="dark"] .snc-about-info-btn:hover svg { stroke: #ffffff; }

.snc-about-tooltip {
    position: absolute; top: calc(100% + 8px); left: 0; width: 260px;
    background: #1a1228; color: #f0eeff;
    font-size: 12px; font-weight: 400; font-family: 'DM Sans', sans-serif;
    text-transform: none; letter-spacing: 0; line-height: 1.5;
    padding: 10px 14px; border-radius: var(--snc-r-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.30);
    pointer-events: none; opacity: 0; transform: translateY(-4px);
    transition: opacity 0.2s, transform 0.2s; z-index: 100; white-space: normal; text-align: left;
}
.snc-about-tooltip::before {
    content: ''; position: absolute; top: -6px; left: 16px;
    width: 12px; height: 12px; background: #1a1228;
    transform: rotate(45deg); border-radius: 2px;
}
.snc-about-tooltip.snc-tooltip-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.snc-description-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px; line-height: 1.85; color: var(--snc-t1); font-weight: 400;
}
.snc-description-text h3 {
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: 20px; font-weight: 400;
    color: var(--snc-t1);
    margin: 28px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--snc-border-light);
    letter-spacing: 0;
    line-height: 1.2;
}
.snc-description-text h3:first-child { margin-top: 0; }
.snc-description-text p {
    margin: 0 0 12px;
    font-size: 15px; line-height: 1.85;
}
.snc-description-text p:last-child { margin-bottom: 0; }
.snc-description-text strong {
    font-weight: 700;
    color: var(--snc-blue);
}
.snc-description-text a {
    color: var(--snc-blue);
    text-decoration: none; font-weight: 500;
    border-bottom: 1px solid rgba(0,175,240,0.3);
    transition: border-color 0.2s, color 0.2s;
}
.snc-description-text a:hover {
    color: var(--snc-purple);
    border-bottom-color: rgba(75,13,133,0.4);
}
.snc-description-text ul.snc-about-bullets {
    list-style: none; margin: 8px 0 12px; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.snc-description-text ul.snc-about-bullets li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; line-height: 1.6; color: var(--snc-t2);
    padding: 8px 12px;
    background: rgba(0,0,0,0.025);
    border-radius: var(--snc-r-sm);
}
[data-op-theme="dark"] .snc-description-text ul.snc-about-bullets li {
    background: rgba(255,255,255,0.04);
}
.snc-description-text ul.snc-about-bullets li::before {
    content: "✓";
    font-size: 12px; font-weight: 700;
    color: var(--snc-blue);
    flex-shrink: 0; margin-top: 1px;
}
.snc-about-closing {
    font-size: 13px !important;
    color: var(--snc-t3) !important;
    border-top: 1px solid var(--snc-border-light);
    padding-top: 12px !important;
    margin-top: 8px;
}
.snc-about-closing a {
    color: var(--snc-blue) !important;
}

/* ============================================================
   BIO — v1.8: blue border REMOVED, restyled warning text
   ============================================================ */
.snc-bio-warning-text {
    font-size: 12px;
    color: var(--snc-t3);
    text-align: center;
    margin: -8px 0 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
}
[data-op-theme="dark"] .snc-bio-warning-text { color: var(--snc-t2); }

/* Legacy bio-warning (in case still referenced anywhere) */
.snc-bio-warning {
    font-size: 12px;
    color: var(--snc-t3);
    font-weight: 400;
    margin-left: 0;
    text-transform: none;
    font-style: italic;
}

.snc-bio-wrap { position: relative; border-radius: var(--snc-r-md); overflow: hidden; }
.snc-bio-content {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px; line-height: 2.2; color: var(--snc-t1); font-weight: 400;
    transition: filter 0.3s var(--snc-ease);
}
.snc-bio-content.snc-blurred { filter: blur(4px); user-select: none; pointer-events: none; }
.snc-bio-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.95) 100%);
    transition: opacity 0.3s var(--snc-ease);
}
[data-op-theme="dark"] .snc-bio-overlay {
    background: linear-gradient(to bottom, rgba(13,13,20,0) 0%, rgba(13,13,20,0.7) 40%, rgba(13,13,20,0.95) 100%);
}
.snc-bio-overlay.snc-hidden { opacity: 0; pointer-events: none; }
.snc-bio-unlock {
    display: flex; align-items: center; gap: 7px; padding: 11px 20px;
    background: var(--snc-card-bg); border: 1px solid var(--snc-border);
    border-radius: var(--snc-r-full); color: var(--snc-t2);
    font-size: 12px; font-weight: 600; cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: all 0.2s var(--snc-spring);
}
.snc-bio-unlock:hover { background: var(--snc-purple); color: #fff; transform: scale(1.03); }

/* v1.8: snc-bio-card stripped of blue border styling — now uses default .snc-card */

/* ============================================================
   EDITOR'S PICK
   ============================================================ */
@keyframes sncPickGradient {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
.snc-editors-pick { width: 100%; }
.snc-editors-pick-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 16px 24px;
    background: linear-gradient(-45deg, #4b0d85, #7c3aed, #a855f7, #4b0d85);
    background-size: 300% 300%; animation: sncPickGradient 4s ease infinite;
    border: none; border-radius: var(--snc-r-full); color: #ffffff;
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: 20px; font-weight: 400; text-transform: uppercase;
    cursor: pointer; text-align: left;
    box-shadow: 0 6px 28px rgba(75,13,133,0.40);
    transition: transform 0.2s var(--snc-spring), box-shadow 0.2s;
}
.snc-editors-pick-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(75,13,133,0.55); }
.snc-editors-pick-label { display: flex; align-items: center; gap: 10px; }
.snc-editors-pick-badge { font-size: 20px; flex-shrink: 0; }
[data-op-theme="dark"] .snc-editors-pick-btn {
    background: linear-gradient(90deg, #b3def0, #ceb7f0, #e799e8, #f5c5da);
    background-size: 300% 300%; animation: sncPickGradient 4s ease infinite;
    color: #1a1228; box-shadow: 0 6px 28px rgba(0,0,0,0.35);
}

/* ============================================================
   FINANCIAL ESTIMATES
   ============================================================ */
/* Citable summary sentence (marked speakable) — the line AI/search quote for
   "how much does X earn?". Kept readable and prominent above the numbers. */
.snc-financial-lead {
    font-family: 'Roboto', sans-serif;
    font-size: 14px; line-height: 1.5; color: var(--snc-t2);
    margin: 0 0 14px;
}
.snc-financial-lead strong { color: var(--snc-t1); font-weight: 700; }

.snc-financial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.snc-sidebar .snc-financial-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

.snc-financial-item {
    background: var(--snc-surface-alt); border-radius: var(--snc-r-md);
    padding: 16px; text-align: center; transition: transform 0.2s var(--snc-spring);
}
[data-op-theme="dark"] .snc-financial-item { background: var(--snc-surface-alt); border: 1px solid var(--snc-border); }
.snc-financial-item:hover { transform: translateY(-2px); }
.snc-financial-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--snc-t3); margin-bottom: 6px; font-weight: 700; font-family: 'DM Sans', sans-serif; }
.snc-financial-value {
    font-size: 20px; font-weight: 800;
    color: var(--snc-t1);
    line-height: 1; margin-bottom: 2px;
}
.snc-financial-sub { font-size: 11px; color: var(--snc-t3); font-weight: 500; font-family: 'DM Sans', sans-serif; }
.snc-financial-disclaimer {
    margin-top: 14px; font-size: 12px; color: var(--snc-t3); font-style: normal;
    font-family: 'Roboto', sans-serif; line-height: 1.6; text-align: left;
}
[data-op-theme="dark"] .snc-financial-disclaimer { color: var(--snc-t3); }

/* Earnings Q&A (visible so FAQPage schema matches on-page content). Native
   <details>, no JS, theme-aware. */
.snc-earn-faq { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.snc-earn-faq-item {
    border: 1px solid var(--snc-border, rgba(0,0,0,.08));
    border-radius: 10px; background: var(--snc-bg-soft, rgba(0,0,0,.02));
    padding: 0 14px; overflow: hidden;
}
.snc-earn-faq-item summary {
    list-style: none; cursor: pointer; padding: 12px 0; font-weight: 600;
    font-size: 14px; color: var(--snc-t1); position: relative;
    font-family: 'Roboto', sans-serif;
}
.snc-earn-faq-item summary::-webkit-details-marker { display: none; }
.snc-earn-faq-item summary::after {
    content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--snc-t3); line-height: 1;
}
.snc-earn-faq-item[open] summary::after { content: '\2212'; }
.snc-earn-faq-a { padding: 0 0 12px; }
.snc-earn-faq-a p {
    margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--snc-t2);
    font-family: 'Roboto', sans-serif;
}

/* ============================================================
   CONTENT DISTRIBUTION
   ============================================================ */
.snc-distribution-wrap { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.snc-sidebar .snc-distribution-wrap { flex-direction: column; align-items: center; gap: 16px; }
.snc-sidebar .snc-distribution-legend { width: 100%; min-width: unset; }
.snc-sidebar .snc-dist-bar-wrap { max-width: none; }

.snc-gauge-wrap { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
.snc-gauge-svg  { width: 100%; height: 100%; overflow: visible; }
.snc-gauge-segment {
    fill: none; stroke-width: 14; stroke-linecap: butt; cursor: pointer;
    transition: stroke-width 0.25s var(--snc-ease), opacity 0.25s var(--snc-ease);
}
.snc-gauge-segment:hover, .snc-gauge-segment.snc-seg-active { stroke-width: 18; }
.snc-gauge-segment.snc-seg-dimmed { opacity: 0.25; }
.snc-gauge-bg-circle { fill: none; stroke: #f3f4f6; stroke-width: 14; }
[data-op-theme="dark"] .snc-gauge-bg-circle { stroke: rgba(255,255,255,0.05); }
.snc-gauge-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    pointer-events: none; transition: all 0.2s var(--snc-ease);
}
.snc-gauge-center-val {
    font-size: 26px; font-weight: 800; color: var(--snc-t1); line-height: 1;
    background: var(--snc-name-gradient);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-op-theme="dark"] .snc-gauge-center-val {
    background: linear-gradient(125deg, #f1f7fd, #fbf3fa, #fff8f2);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.snc-gauge-center-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--snc-t3); margin-top: 2px; }
.snc-distribution-legend { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 160px; }
.snc-dist-item {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 6px 8px; border-radius: var(--snc-r-sm); transition: background 0.2s;
}
.snc-dist-item:hover, .snc-dist-item.snc-dist-active { background: rgba(0,0,0,0.04); }
[data-op-theme="dark"] .snc-dist-item:hover, [data-op-theme="dark"] .snc-dist-item.snc-dist-active { background: rgba(255,255,255,0.05); }
.snc-dist-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transition: transform 0.2s var(--snc-spring); }
.snc-dist-item:hover .snc-dist-dot, .snc-dist-item.snc-dist-active .snc-dist-dot { transform: scale(1.4); }
.snc-dist-label { flex: 0 0 auto; font-size: 13px; color: var(--snc-t2); font-weight: 500; white-space: nowrap; min-width: 50px; }
.snc-dist-bar-wrap { flex: 1; min-width: 0; height: 5px; background: #f3f4f6; border-radius: var(--snc-r-full); overflow: hidden; }
[data-op-theme="dark"] .snc-dist-bar-wrap { background: rgba(255,255,255,0.06); }
.snc-dist-bar { height: 100%; border-radius: var(--snc-r-full); transition: width 1s var(--snc-ease); }
.snc-dist-val { font-size: 13px; font-weight: 700; color: var(--snc-t1); min-width: 44px; text-align: right; }

/* ============================================================
   GROWTH CHARTS
   ============================================================ */
.snc-growth-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.snc-tab-btn {
    padding: 6px 16px; border-radius: var(--snc-r-full); border: none;
    background: rgba(0,0,0,0.05); color: var(--snc-t3);
    font-size: 12px; font-weight: 600; cursor: pointer;
    font-family: 'DM Sans', sans-serif; transition: all 0.2s var(--snc-ease);
}
.snc-tab-btn.snc-active, .snc-tab-btn:hover {
    background: var(--snc-cta-of);
    background-size: 400% 400%; animation: sncGradientShift 4s ease infinite; color: #ffffff;
}
.snc-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.snc-sidebar .snc-charts-grid { grid-template-columns: 1fr; gap: 12px; }
.snc-chart-container { position: relative; height: 160px; }
.snc-sidebar .snc-chart-container { height: 140px; }
.snc-chart-label { font-size: 11px; color: var(--snc-t3); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }

/* ============================================================
   GALLERY — v1.8: 2 columns × N rows, larger images
   ============================================================ */
.snc-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.snc-gallery-item {
    position: relative; aspect-ratio: 1;
    border-radius: var(--snc-r-md); overflow: hidden; cursor: pointer; background: #f3f4f6;
}
.snc-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--snc-ease); }
.snc-gallery-item:hover img { transform: scale(1.06); }
.snc-gallery-item-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0);
    display: flex; align-items: center; justify-content: center; transition: background 0.3s;
}
.snc-gallery-item:hover .snc-gallery-item-overlay { background: rgba(75,13,133,0.25); }
.snc-gallery-item-overlay svg { opacity: 0; transition: opacity 0.3s; color: #fff; }
.snc-gallery-item:hover .snc-gallery-item-overlay svg { opacity: 1; }
.snc-gallery-disclaimer { margin-top: 10px; font-size: 11px; color: var(--snc-t3); font-style: normal; line-height: 1.6; font-family: 'DM Sans', sans-serif; }

/* NEW v1.8: 2-column grid layout (replaces strip) */
.snc-gallery-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.snc-gallery-strip .snc-gallery-item {
    aspect-ratio: 3/4;
    border-radius: var(--snc-r-lg);
}

/* Mobile: tighter gap, same 2 columns */
@media (max-width: 767px) {
    .snc-gallery-strip {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        overflow: visible;
    }
    .snc-gallery-strip .snc-gallery-item {
        width: auto;
        aspect-ratio: 3/4;
        flex: none;
        scroll-snap-align: none;
    }
}

/* ============================================================
   YOU MAY ALSO LIKE — horizontal carousel (v1.9)
   Cards replicate .category-creator-card style (no stats version)
   Title uses .snc-circles-section-title (animated gradient, centered)
   ============================================================ */
.snc-yml-section {
    margin: 0 0 var(--snc-gap);
    position: relative;
}

/* Carousel navigation arrows — icon-only, no background box (desktop only) */
.snc-yml-arrow {
    display: none; /* shown on desktop via media query below */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.25s ease, color 0.2s ease, transform 0.2s var(--snc-spring);
    line-height: 0;
    pointer-events: none;
}
.snc-yml-arrow svg {
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}
/* Positioned INSIDE the carousel edges so they are not clipped */
.snc-yml-arrow-prev { left: 4px; }
.snc-yml-arrow-next { right: 4px; }
.snc-yml-arrow:hover {
    color: #f857a6;
    transform: translateY(-50%) scale(1.15);
}
[data-op-theme="dark"] .snc-yml-arrow { color: #ffffff; }
[data-op-theme="dark"] .snc-yml-arrow:hover { color: #f5c5da; }

/* Desktop: arrows become block, appear on hover of the section */
@media (min-width: 768px) {
    .snc-yml-arrow { display: block; }
    .snc-yml-section:hover .snc-yml-arrow {
        opacity: 1;
        pointer-events: auto;
    }
}

.snc-yml-track-wrap {
    position: relative;
    overflow: hidden;
}
.snc-yml-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 4px 16px;
    cursor: grab;
    /* proximity (not mandatory) so the first card always rests flush at scrollLeft 0
       instead of getting forced between snap points after the shuffle reorders cards */
    scroll-snap-type: x proximity;
    scroll-padding-left: 4px;
}
.snc-yml-track::-webkit-scrollbar { display: none; }
.snc-yml-track.snc-yml-grabbing { cursor: grabbing; }

/* YML card: replicates .category-creator-card structure (aspect 3/5) */
.snc-yml-card {
    flex: 0 0 auto;
    width: 200px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    aspect-ratio: 9 / 16;
    box-shadow: 0 2px 8px rgba(11, 8, 30, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    scroll-snap-align: start;
    background: #1a1a2e;
    isolation: isolate;
}
[data-op-theme="dark"] .snc-yml-card {
    background: #0d0d14;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
/* Desktop: enlarge carousel cards so ~5 show full and the 6th peeks (scroll hint),
   matching the Explore-grid card scale. Explore cards (.snc-explore-grid) are untouched. */
@media (min-width: 769px) {
    .snc-yml-track .snc-yml-card { width: calc((100% - 50px) / 5.4); max-width: 260px; }
}
.snc-yml-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.snc-yml-card:hover .creator-card-image img {
    transform: scale(1.05);
}
.snc-yml-card .snc-yml-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.snc-yml-card .creator-card-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: #1a1a2e;
}
[data-op-theme="dark"] .snc-yml-card .creator-card-image {
    background: #0d0d14;
}
.snc-yml-card .creator-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.snc-yml-card .snc-yml-card-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.4);
    font-size: 56px;
    font-weight: 700;
    font-family: 'Special Gothic Expanded One', sans-serif;
}
.snc-yml-card .creator-card-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg,   rgba(11,8,30,1) 0%, rgba(11,8,30,0.85) 12%, rgba(11,8,30,0.3) 40%, rgba(11,8,30,0) 60%),
        linear-gradient(270deg, rgba(11,8,30,0.6)  0%, rgba(11,8,30,0)   40%);
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
}
/* Shimmer effect — subtle light-sweep in continuous loop (matches category cards) */
.snc-yml-card .creator-card-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255,255,255,0)   0%,
        rgba(255,255,255,0)   25%,
        rgba(255,255,255,0.14) 50%,
        rgba(255,255,255,0)   75%,
        rgba(255,255,255,0)   100%
    );
    z-index: 3;
    pointer-events: none;
    animation: sncCardShimmer 5.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    will-change: transform;
}
@keyframes sncCardShimmer {
    0%   { transform: translateX(0%); opacity: 0; }
    8%   { opacity: 1; }
    45%  { transform: translateX(280%); opacity: 1; }
    55%  { opacity: 0; }
    100% { transform: translateX(280%); opacity: 0; }
}
/* When overlay open, freeze shimmer for clarity */
.snc-yml-card.snc-card-overlay-open .creator-card-image::after {
    animation-play-state: paused;
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .snc-yml-card .creator-card-image::after { animation: none; opacity: 0; }
}

.snc-yml-card .creator-card-price {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(11,8,30,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 10px;
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-weight: 400;
    font-size: 9px;
    z-index: 5;
    font-variant-numeric: tabular-nums;
}
.snc-yml-card .creator-card-info {
    position: absolute;
    bottom: 16px; left: 12px; right: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* The whole card image is tappable */
.snc-yml-card [data-snc-card-tap] {
    cursor: pointer;
    width: 100%;
    height: 100%;
}
/* Persistent .snc-card-buttons removed in v2.5 — actions now live exclusively in the tap overlay */

/* ONLINE indicator (promo only) — absolute top-left */
.snc-yml-card .creator-card-online {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 3px 9px 3px 8px;      /* matches TRENDING's vertical rhythm */
    border-radius: 8px;            /* same corner as TRENDING */
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.18);
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-weight: 400;
    font-size: 9px;
    letter-spacing: 0.3px;
    color: #ffffff;
    text-transform: uppercase;
}
.snc-yml-card .creator-card-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2bd76d;
    box-shadow: 0 0 6px #2bd76d, 0 0 12px rgba(43,215,109,0.6);
    flex-shrink: 0;
    animation: sncOnlineDotPulse 2.4s ease-in-out infinite;
}
@keyframes sncOnlineDotPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Overlay CTA — centered dim layer on top of the card */
.snc-yml-card .snc-card-overlay-cta {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11,8,30,0.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.snc-yml-card.snc-card-overlay-open .snc-card-overlay-cta {
    opacity: 1;
    pointer-events: auto;
}
.snc-yml-card .snc-card-overlay-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100% - 24px);
    max-width: 220px;
}
.snc-yml-card .snc-card-overlay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    color: #ffffff;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    line-height: 1;
    white-space: nowrap;
}
.snc-yml-card .snc-card-overlay-btn-profile {
    background: transparent;
    border: 1.5px solid #ffffff;
}
.snc-yml-card .snc-card-overlay-btn-profile:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-1px);
}
.snc-yml-card .snc-card-overlay-btn-subscribe {
    background: linear-gradient(-45deg, #00AFF0, #00D2FF, #009BD9, #00AFF0);
    background-size: 400% 400%;
    animation: sncGradientShift 4s ease infinite;
    border: 1.5px solid transparent;
    box-shadow: 0 4px 14px rgba(0,175,240,0.45);
}
.snc-yml-card .snc-card-overlay-btn-subscribe:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(0,175,240,0.7);
}
.snc-yml-card .snc-card-overlay-btn-subscribe {
    /* Desktop: single-line layout (overridden in mobile media query) */
    flex-wrap: nowrap;
    white-space: nowrap;
}
/* On desktop the two text spans render inline as a single sentence */
.snc-yml-card .snc-card-overlay-btn-subscribe .snc-btn-text {
    display: inline;
}
.snc-yml-card .snc-card-overlay-btn-subscribe .snc-btn-text-1::after {
    content: ' ';
}
.snc-yml-card .snc-card-overlay-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
    transition: color 0.18s ease, transform 0.18s ease;
}
.snc-yml-card .snc-card-overlay-close svg {
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}
.snc-yml-card .snc-card-overlay-close:hover {
    color: #f5c5da;
    transform: scale(1.15);
}

/* Freeze track scrolling/dragging while an overlay is open */
.snc-yml-track-frozen {
    overflow-x: hidden !important;
    cursor: default !important;
    scroll-snap-type: none;
}
.snc-yml-track-frozen .snc-yml-card:not(.snc-card-overlay-open) {
    pointer-events: none;
}
/* Suppress card hover transform when overlay open */
.snc-yml-card.snc-card-overlay-open {
    transform: none !important;
}
.snc-yml-card.snc-card-overlay-open:hover .creator-card-image img {
    transform: none;
}
.snc-yml-card .creator-card-username {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    gap: 4px;
    margin-bottom: 4px;
    color: rgba(255,255,255,0.85);
    line-height: 1;
}
.snc-yml-card .creator-card-username .of-icon {
    width: 15px; height: 15px; min-width: 15px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.95;
    border-radius: 3px;
}
.snc-yml-card .creator-card-username span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.snc-yml-card .creator-card-name {
    margin: 0;
    line-height: 1.2;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    font-family: 'Special Gothic Expanded One', sans-serif;
    color: #ffffff;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Creator-card name is now a real crawlable internal <a> (SEO P1-2): keep it
   looking like plain text (inherit color, no underline) across the profile-page
   card carousels (YMAL / PRN / Explore). */
.snc-page .creator-card-name a { color: inherit; text-decoration: none; }

/* TRENDING badge for premium cards */
.snc-yml-card.premium .creator-card-trending {
    position: absolute;
    top: 8px; right: 8px;
    /* TRENDING keeps its original pink/red gradient — distinct from main CTAs */
    background: linear-gradient(-45deg, #ff5858, #f857a6, #f857a6, #ff5858);
    background-size: 400% 400%;
    animation: sncGradientShift 4s ease infinite;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 8px;
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-weight: 400;
    font-size: 9px;
    z-index: 6;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.snc-yml-card.premium .creator-card-price { top: 34px; }

/* Premium border removed (v2.1) — cards are visually uniform */

/* Mobile: smaller cards */
@media (max-width: 767px) {
    .snc-yml-track { gap: 6px; }
    .snc-yml-card { width: 160px; border-radius: 18px; }
    .snc-yml-card .creator-card-name { font-size: 1rem; }
    .snc-yml-card .creator-card-username { font-size: 11px; }
    .snc-yml-card .creator-card-username .of-icon { width: 13px; height: 13px; min-width: 13px; }
    .snc-yml-card.premium .creator-card-price { top: 30px; }
    .snc-yml-card .creator-card-price {
        font-size: 7px;
        padding: 2px 6px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(11,8,30,0.7);
    }
    .snc-yml-card.premium .creator-card-trending {
        font-size: 7px;
        padding: 2px 6px;
    }
    /* Mobile compact tweaks */
    .snc-yml-card .creator-card-info { bottom: 10px; left: 10px; right: 10px; gap: 3px; }
    .snc-yml-card .creator-card-online {
        font-size: 7px;
        padding: 2px 6px;
        gap: 4px;
        letter-spacing: 0.3px;
        top: 8px;
        left: 8px;
    }
    .snc-yml-card .creator-card-online-dot { width: 5px; height: 5px; }
    /* Mobile: subscribe button uses two-line layout via markup helper spans */
    .snc-yml-card .snc-card-overlay-btn {
        height: auto;
        min-height: 38px;
        font-size: 10.5px;
        padding: 6px 12px;
        white-space: normal;
        line-height: 1.2;
    }
    .snc-yml-card .snc-card-overlay-btn-subscribe {
        flex-wrap: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }
    .snc-yml-card .snc-card-overlay-btn-subscribe .snc-card-btn-of-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    .snc-yml-card .snc-card-overlay-btn-subscribe .snc-btn-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.15;
        text-align: center;
    }
    .snc-yml-card .snc-card-overlay-btn-subscribe .snc-btn-text-1 { font-weight: 700; }
    .snc-yml-card .snc-card-overlay-btn-subscribe .snc-btn-text-2 { font-weight: 700; }
    .snc-yml-card .snc-card-overlay-buttons { gap: 8px; max-width: 160px; width: calc(100% - 18px); }
    .snc-yml-card .snc-card-overlay-close { width: 24px; height: 24px; top: 6px; right: 6px; }

    /* No hover transform on touch */
    .snc-yml-card:hover { transform: none; box-shadow: 0 2px 8px rgba(11, 8, 30, 0.08); }
    .snc-yml-card:hover .creator-card-image img { transform: none; }
}

/* ============================================================
   EXPLORE SIMILAR CREATORS — 20-card grid (v2.0)
   Desktop: 4×5 grid | Mobile: 2×10 grid
   Reuses .snc-yml-card style (no stats)
   ============================================================ */
.snc-explore-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 8px;
}
/* Spacing between the section title and the explore grid */
.snc-circles-section-title + .snc-explore-grid,
.snc-rec-section .snc-circles-section-title {
    margin-bottom: 20px;
}
.snc-explore-grid .snc-yml-card {
    width: 100%;
}

/* Tablet: 4 cols */
@media (max-width: 1280px) and (min-width: 769px) {
    .snc-explore-grid { grid-template-columns: repeat(4, 1fr); gap: 9px; }
}

/* Mobile: 2 cols */
@media (max-width: 768px) {
    .snc-explore-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}
@media (max-width: 480px) {
    .snc-explore-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ============================================================
   CATEGORIES & TAGS
   ============================================================ */
.snc-tax-section { display: flex; flex-direction: column; gap: 14px; }
.snc-tax-collapsible { transition: max-height 0.3s ease; }
/* Collapse + soft mask applied ONLY when the chips actually overflow (JS-set class).
   The mask fades the content itself to transparent — no colored strip, theme-proof. */
.snc-tax-collapsible.snc-tax-has-more:not(.snc-tax-open) {
    max-height: 168px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent);
            mask-image: linear-gradient(to bottom, #000 68%, transparent);
}
.snc-tax-collapsible.snc-tax-open { max-height: 2000px; }
.snc-tax-toggle {
    margin-top: 10px; background: none; border: none; cursor: pointer; padding: 4px 0;
    font-family: 'DM Sans', -apple-system, sans-serif; font-size: 12.5px; font-weight: 700;
    color: var(--snc-purple); letter-spacing: 0.2px;
}
.snc-tax-toggle:hover { text-decoration: underline; }
[data-op-theme="dark"] .snc-tax-toggle { color: #c4a7f5; }
.snc-tax-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--snc-t3); font-weight: 700; margin-bottom: 6px; }
.snc-tags-wrap { display: flex; gap: 6px; flex-wrap: wrap; }
.snc-tag {
    display: inline-flex; align-items: center; padding: 5px 13px;
    border-radius: var(--snc-r-full); font-size: 12px; font-weight: 500;
    background: rgba(0,0,0,0.05); color: var(--snc-t2);
    text-decoration: none; transition: all 0.2s var(--snc-spring);
}
.snc-tag:hover { background: var(--snc-purple); color: #ffffff; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(75,13,133,0.25); }
.snc-category-tag { background: rgba(75,13,133,0.08); color: var(--snc-purple); font-weight: 600; }
.snc-category-tag:hover { background: var(--snc-purple); color: #ffffff; }

/* ============================================================
   SOCIAL LINKS
   ============================================================ */
.snc-social-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.snc-social-btn {
    display: flex; align-items: center; gap: 6px; padding: 8px 14px;
    border-radius: var(--snc-r-full); font-size: 12px; font-weight: 600;
    text-decoration: none; background: rgba(0,0,0,0.05); color: var(--snc-t2);
    transition: all 0.2s var(--snc-spring);
}
.snc-social-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.snc-social-btn.snc-s-ig:hover  { background: #f43f5e; color: #fff; }
.snc-social-btn.snc-s-tw:hover  { background: #000; color: #fff; }
.snc-social-btn.snc-s-tt:hover  { background: #010101; color: #fff; }
.snc-social-btn.snc-s-yt:hover  { background: #ff0000; color: #fff; }
.snc-social-btn.snc-s-rd:hover  { background: #ff4500; color: #fff; }
.snc-social-btn.snc-s-tw2:hover { background: #6441a5; color: #fff; }
.snc-social-btn.snc-s-tg:hover  { background: #0088cc; color: #fff; }
.snc-social-btn.snc-s-sc:hover  { background: #fffc00; color: #000; }
.snc-social-btn.snc-s-fb:hover  { background: #1877f2; color: #fff; }
.snc-social-btn.snc-s-web:hover { background: var(--snc-purple); color: #fff; }

/* ============================================================
   PLACEHOLDERS
   ============================================================ */
.snc-placeholder-block { border-radius: var(--snc-r-lg); padding: 32px; text-align: center; color: var(--snc-t4); background: rgba(0,0,0,0.02); }
.snc-placeholder-block svg { margin: 0 auto 10px; opacity: 0.3; display: block; }
.snc-placeholder-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.snc-placeholder-sub { font-size: 11px; font-style: italic; }

/* ============================================================
   SIDEBAR — Info rows
   ============================================================ */
.snc-info-rows { display: flex; flex-direction: column; }
.snc-info-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--snc-border-light); gap: 12px; }
.snc-info-row:last-child { border-bottom: none; }
.snc-info-key { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--snc-t3); flex-shrink: 0; }
.snc-info-key svg { opacity: 0.6; }
.snc-info-val { font-size: 12px; font-weight: 600; color: var(--snc-t2); text-align: right; }
.snc-info-val.snc-green-val { color: var(--snc-green); }

/* ============================================================
   SIDEBAR — Physical Details
   ============================================================ */
.snc-physical-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.snc-phys-item { background: rgba(0,0,0,0.03); border-radius: var(--snc-r-sm); padding: 10px 6px; text-align: center; }
[data-op-theme="dark"] .snc-phys-item { background: rgba(255,255,255,0.04); }
.snc-phys-val { font-size: 13px; font-weight: 700; color: var(--snc-t1); line-height: 1; margin-bottom: 3px; }
.snc-phys-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--snc-t3); font-weight: 700; font-family: 'DM Sans', sans-serif; }

/* ============================================================
   SIDEBAR — CTA Card
   ============================================================ */
.snc-sidebar-cta {
    background: linear-gradient(135deg, rgba(75,13,133,0.06) 0%, rgba(0,182,230,0.05) 100%);
    border-radius: var(--snc-r-lg); padding: 22px 20px; text-align: center; box-shadow: var(--snc-card-shadow);
}
.snc-sidebar-cta-title { font-family: 'Special Gothic Expanded One', sans-serif; font-size: 15px; font-weight: 400; color: var(--snc-t1); margin-bottom: 6px; }
.snc-sidebar-cta-sub   { font-size: 13px; color: var(--snc-t2); margin-bottom: 16px; line-height: 1.4; }
.snc-sidebar-cta .snc-cta-primary { color: #ffffff !important; }

/* ============================================================
   SIDEBAR — Recommended
   ============================================================ */
.snc-sidebar-rec-list { display: flex; flex-direction: column; gap: 10px; }
.snc-sidebar-rec-item {
    display: flex; align-items: center; gap: 10px; padding: 8px;
    border-radius: var(--snc-r-md); text-decoration: none; color: inherit;
    transition: background 0.2s, transform 0.2s var(--snc-spring);
}
.snc-sidebar-rec-item:hover { background: rgba(0,0,0,0.04); transform: translateX(2px); }
.snc-sidebar-rec-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--snc-purple), var(--snc-blue)); }
.snc-sidebar-rec-avatar img { width: 100%; height: 100%; object-fit: cover; }
.snc-sidebar-rec-name { font-size: 13px; font-weight: 700; color: var(--snc-t1); margin-bottom: 2px; }
.snc-sidebar-rec-meta { font-size: 11px; color: var(--snc-t3); }

/* ============================================================
   FULL-WIDTH RECOMMENDED
   ============================================================ */
.snc-rec-section { margin-bottom: 48px; }
.snc-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.snc-section-title { font-family: 'DM Sans', sans-serif; font-size: 22px; font-weight: 700; color: var(--snc-t1); letter-spacing: -0.5px; margin: 0; }
.snc-rec-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.snc-rec-card {
    background: var(--snc-card-bg); border-radius: var(--snc-r-lg); overflow: hidden;
    text-decoration: none; color: inherit; box-shadow: var(--snc-card-shadow);
    transition: all 0.3s var(--snc-spring);
}
.snc-rec-card:hover { transform: translateY(-4px); box-shadow: var(--snc-card-shadow-hover); }
.snc-rec-card-img { position: relative; aspect-ratio: 3/4; overflow: hidden; background: linear-gradient(135deg, #2d1b69, #1e1b4b); }
.snc-rec-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--snc-ease); }
.snc-rec-card:hover .snc-rec-card-img img { transform: scale(1.06); }
.snc-rec-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 12px 10px; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%); }
.snc-rec-card-name { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snc-rec-card-meta { font-size: 10px; color: rgba(255,255,255,0.7); }
.snc-rec-card-footer { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; }
.snc-rec-card-price          { font-size: 11px; font-weight: 700; color: var(--snc-green); }
.snc-rec-card-price.snc-paid { color: var(--snc-blue); }

/* ============================================================
   FLOATING CTA
   ============================================================ */
.snc-floating-cta {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 12px 16px 72px; background: transparent; z-index: 500;
    opacity: 0; transform: translateY(100%); pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    display: none;
}
.snc-floating-cta.snc-cta-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.snc-floating-cta-inner {
    display: grid; grid-template-columns: 28px 1fr 26px;
    align-items: center; gap: 10px; padding: 11px 18px;
    background: var(--snc-cta-of);
    background-size: 400% 400%; animation: sncGradientShift 4s ease infinite;
    border-radius: var(--snc-r-full); color: #fff;
    font-size: 13px; font-weight: 700; text-decoration: none;
    box-shadow: var(--snc-cta-of-shadow-float);
}
.snc-floating-cta-of-icon { width: 28px; height: 28px; border-radius: 4px; display: block; flex-shrink: 0; }
.snc-floating-cta-text { text-align: center; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snc-float-desktop {
    display: none; position: fixed; bottom: 28px; right: 28px; z-index: 100;
    transition: transform 0.4s var(--snc-spring), opacity 0.3s;
}
.snc-float-desktop.snc-float-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
.snc-float-desktop-inner {
    display: grid; grid-template-columns: 28px 1fr 26px;
    align-items: center; gap: 10px; padding: 14px 22px;
    background: var(--snc-cta-of);
    background-size: 400% 400%; animation: sncGradientShift 4s ease infinite;
    border-radius: var(--snc-r-full); color: #fff;
    font-size: 13px; font-weight: 700; text-decoration: none;
    box-shadow: var(--snc-cta-of-shadow-float);
    transition: transform 0.3s var(--snc-spring), box-shadow 0.3s; white-space: nowrap;
}
.snc-float-desktop-inner:hover { transform: translateY(-3px); box-shadow: var(--snc-cta-of-shadow-float-h); }
.snc-float-of-icon { width: 28px; height: 28px; border-radius: 4px; display: block; flex-shrink: 0; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.snc-lightbox {
    position: fixed; inset: 0; z-index: 999999;
    display: none; align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.snc-lightbox img { max-width: 80vw; max-height: 88vh; border-radius: var(--snc-r-lg); box-shadow: 0 32px 80px rgba(0,0,0,0.7); object-fit: contain; display: block; cursor: default; }
.snc-lightbox-close {
    position: absolute; top: 20px; right: 20px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 22px; font-family: sans-serif; line-height: 1;
    transition: background 0.2s; z-index: 2;
}
.snc-lightbox-close:hover { background: rgba(255,255,255,0.28); }
.snc-lightbox-prev, .snc-lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s; z-index: 2; flex-shrink: 0;
}
.snc-lightbox-prev { left: 16px; }
.snc-lightbox-next { right: 16px; }
.snc-lightbox-prev:hover, .snc-lightbox-next:hover { background: rgba(255,255,255,0.28); }
.snc-lightbox-counter {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.7); font-size: 13px;
    background: rgba(0,0,0,0.4); padding: 4px 12px; border-radius: 20px;
}
/* Gallery lightbox: image + CTA stacked. The CTA sits below the photo; the
   image shadow is softened and the CTA is opaque + above it (z-index) so the
   shadow never lands on the button. */
.snc-lb-stage {
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    max-width: 80vw;
}
.snc-lb-stage img {
    max-height: 72vh;                     /* leave room for the CTA below */
    box-shadow: 0 8px 30px rgba(0,0,0,0.4); /* softer than the default so it doesn't reach the CTA */
}
.snc-lb-cta {
    position: relative; z-index: 2;       /* painted above any residual image shadow */
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 26px; border-radius: 999px;
    background: linear-gradient(135deg, #00aff0, #0089d0);
    color: #fff !important; font-weight: 700; font-size: 15px;
    text-decoration: none !important; white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0,175,240,0.45);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.snc-lb-cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 28px rgba(0,175,240,0.55); }
.snc-lb-cta-icon  { width: 22px; height: 22px; flex-shrink: 0; }
.snc-lb-cta-arrow { flex-shrink: 0; }
@media (max-width: 600px) {
    .snc-lb-cta { font-size: 14px; padding: 12px 20px; }
    .snc-lb-stage img { max-height: 66vh; }
}

/* ============================================================
   DISCLAIMER
   ============================================================ */
.snc-disclaimer {
    font-size: 11px; color: var(--snc-t3); line-height: 1.7; text-align: center;
    padding: 16px 20px 32px; border-top: 1px solid var(--snc-border-light); margin-top: 8px;
    font-family: 'DM Sans', sans-serif;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes sncFadeUp  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sncFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sncScaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.snc-anim-fadeup  { animation: sncFadeUp  0.5s var(--snc-ease) both; }
.snc-anim-fadein  { animation: sncFadeIn  0.4s var(--snc-ease) both; }
.snc-anim-scalein { animation: sncScaleIn 0.4s var(--snc-spring) both; }
.snc-d1 { animation-delay: 0.05s; } .snc-d2 { animation-delay: 0.10s; }
.snc-d3 { animation-delay: 0.15s; } .snc-d4 { animation-delay: 0.20s; }
.snc-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--snc-ease), transform 0.6s var(--snc-ease); }
.snc-reveal.snc-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   COLLAPSIBLE
   ============================================================ */
.snc-collapsible-wrap { position: relative; }
.snc-collapsible-wrap.snc-collapsed .snc-collapsible-content { max-height: 120px; overflow: hidden; }
.snc-collapsible-wrap .snc-collapsible-content { max-height: none; overflow: visible; }
.snc-collapsible-fade {
    display: none; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.98) 100%);
    pointer-events: none;
}
[data-op-theme="dark"] .snc-collapsible-fade {
    background: linear-gradient(to bottom, rgba(13,13,20,0) 0%, rgba(13,13,20,0.98) 100%);
}
.snc-collapsible-btn {
    display: none; margin-top: 10px; width: 100%; padding: 9px 16px;
    background: rgba(75,13,133,0.07); border: none; border-radius: var(--snc-r-full);
    color: var(--snc-purple); font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: 'DM Sans', sans-serif; transition: background 0.2s;
}
.snc-collapsible-btn:hover { background: rgba(75,13,133,0.12); }
[data-op-theme="dark"] .snc-collapsible-btn { background: linear-gradient(125deg, #f1f7fd, #fbf3fa, #fff8f2); color: #1a1a2e; }
[data-op-theme="dark"] .snc-collapsible-btn:hover { background: linear-gradient(125deg, #e8f0fa, #f5ecf7, #fff3ee); color: #1a1a2e; }

/* ============================================================
   UTILITY
   ============================================================ */
.snc-mobile-only  { display: none; }
.snc-circles-wrap-outer { margin-top: 8px; }
.snc-divider   { height: 1px; background: var(--snc-border-light); border: none; margin: 0; }
.snc-spacer-sm { height: 12px; } .snc-spacer-md { height: 20px; } .snc-spacer-lg { height: 32px; }
.snc-text-gradient {
    background: var(--snc-name-gradient);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.snc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.snc-rec-initials {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: #ffffff; font-size: 18px; font-weight: 700;
    background: linear-gradient(135deg, #4b0d85, #00B6E6);
}

/* ============================================================
   INLINE CTA
   ============================================================ */
.snc-inline-cta {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    background: var(--snc-card-bg); border-radius: 14px;
    box-shadow: var(--snc-card-shadow); border: 1px solid var(--snc-border);
    text-decoration: none; color: inherit; width: 100%;
    transition: box-shadow 0.2s var(--snc-ease), transform 0.2s var(--snc-spring);
}
.snc-inline-cta:hover { box-shadow: 0 6px 24px rgba(0,182,230,0.18); transform: translateY(-1px); }
.snc-inline-cta-icon { flex-shrink: 0; display: flex; align-items: center; }
.snc-inline-cta-of-svg { width: 32px; height: 32px; border-radius: 6px; display: block; }
.snc-inline-cta-names { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.snc-inline-cta-platform { font-size: 12px; font-weight: 700; color: var(--snc-t1); line-height: 1.2; }
.snc-inline-cta-user { font-size: 12px; font-weight: 500; color: var(--snc-t2); line-height: 1.2; }
.snc-inline-cta-label { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: var(--snc-t1); }
.snc-inline-cta-spacer { flex: 1; }
.snc-inline-cta-price { flex-shrink: 0; margin-left: auto; }

/* ============================================================
   DARK MODE ENHANCEMENTS
   ============================================================ */
[data-op-theme="dark"] .snc-creator-name {
    background: linear-gradient(125deg, #f1f7fd, #fbf3fa, #fff8f2);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-op-theme="dark"] .snc-creator-name .snc-verified-badge {
    -webkit-text-fill-color: initial; background: none;
    -webkit-background-clip: initial; background-clip: initial;
}
[data-op-theme="dark"] .snc-card-title {
    font-family: 'Special Gothic Expanded One', sans-serif;
    background: linear-gradient(125deg, #f1f7fd, #fbf3fa, #fff8f2);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; color: transparent;
}
[data-op-theme="dark"] .snc-card-title svg { display: none; }

/* ============================================================
   CIRCLES — names + hover + dark mode
   ============================================================ */
.snc-circles-section-title {
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: 22px; font-weight: 400; text-transform: uppercase;
    letter-spacing: 0.3px; text-align: center;
    margin: 16px 0 4px;
    background: linear-gradient(-45deg, #4b0d85, #7c3aed, #a855f7, #4b0d85);
    background-size: 300% 300%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; animation: sncPickGradient 4s ease infinite;
}
/* Light mode: solid near-black carousel titles (YMAL / PRN / Explore) */
[data-op-theme="light"] .snc-circles-section-title {
    background: none; -webkit-text-fill-color: #121212; color: #121212; animation: none;
}
[data-op-theme="dark"] .snc-circles-section-title {
    background: linear-gradient(90deg, #b3def0, #ceb7f0, #e799e8, #f5c5da);
    background-size: 300% 300%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; animation: sncPickGradient 4s ease infinite;
}

.snc-circles-inline {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-width: none; -ms-overflow-style: none;
    cursor: grab;
    position: relative;
}
.snc-circles-inline:active { cursor: grabbing; }
.snc-circles-inline::-webkit-scrollbar { display: none; }
.snc-circles-inline > * { display: flex !important; flex-wrap: nowrap !important; min-width: max-content; }

@media (min-width: 768px) {
    .snc-circles-inline::after {
        content: ''; position: absolute; top: 0; right: 0;
        width: 80px; height: 100%;
        pointer-events: none; z-index: 2;
    }
    [data-op-theme="light"] .snc-circles-inline::after {
        background: linear-gradient(to right, transparent, #f5f5f7);
    }
    [data-op-theme="dark"] .snc-circles-inline::after {
        background: linear-gradient(to right, transparent, #0d0d14);
    }
}

/* ============================================================
   FAQ ACCORDION — v1.8: DM Sans titles + About-style answers
   ============================================================ */
.snc-faq-card .snc-card-title {
    margin-bottom: 20px;
}
.snc-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.snc-faq-item {
    border-bottom: 1px solid var(--snc-border-light);
}
.snc-faq-item:last-child { border-bottom: none; }

/* v1.8: DM Sans (not Special Gothic) for FAQ questions */
.snc-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--snc-t1);
    transition: color 0.2s;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}
.snc-faq-q:hover { color: var(--snc-purple); }
.snc-faq-q.snc-faq-open { color: var(--snc-purple); }
[data-op-theme="dark"] .snc-faq-q:hover { color: #f5c5da; }
[data-op-theme="dark"] .snc-faq-q:hover .snc-faq-icon { color: #f5c5da; }
[data-op-theme="dark"] .snc-faq-q.snc-faq-open { color: #f5c5da; }

.snc-faq-q-text { flex: 1; min-width: 0; font-family: 'Roboto', sans-serif; }

.snc-faq-icon {
    flex-shrink: 0;
    width: 20px; height: 20px;
    color: var(--snc-t3);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.snc-faq-icon svg { width: 100%; height: 100%; display: block; }
.snc-faq-q:hover .snc-faq-icon { color: var(--snc-purple); }
.snc-faq-open .snc-faq-icon {
    transform: rotate(180deg);
    color: var(--snc-purple);
}
[data-op-theme="dark"] .snc-faq-open .snc-faq-icon { color: #f5c5da; }

.snc-faq-a {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}
.snc-faq-a[hidden] {
    display: block !important;
    max-height: 0;
}

/* v1.8: FAQ answer formatted EXACTLY like .snc-description-text */
.snc-faq-a-inner,
.snc-faq-a-inner p,
.snc-faq-a-inner li,
.snc-faq-a-inner span,
.snc-faq-a-inner strong,
.snc-faq-a-inner em {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--snc-t1);
}
.snc-faq-a-inner {
    padding: 0 4px 22px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 15px;
    line-height: 1.85;
    color: var(--snc-t1) !important;
    font-weight: 400;
}
.snc-faq-a-inner h3 {
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-size: 20px; font-weight: 400;
    color: var(--snc-t1);
    margin: 28px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--snc-border-light);
    letter-spacing: 0;
    line-height: 1.2;
}
.snc-faq-a-inner h3:first-child { margin-top: 0; }
.snc-faq-a-inner p {
    margin: 0 0 12px;
    font-size: 15px; line-height: 1.85;
}
.snc-faq-a-inner p:last-child { margin-bottom: 0; }
.snc-faq-a-inner strong {
    font-weight: 700;
    color: var(--snc-blue);
}
.snc-faq-a-inner a {
    color: var(--snc-blue);
    text-decoration: none; font-weight: 500;
    border-bottom: 1px solid rgba(0,175,240,0.3);
    transition: border-color 0.2s, color 0.2s;
}
.snc-faq-a-inner a:hover {
    color: var(--snc-purple);
    border-bottom-color: rgba(75,13,133,0.4);
}
.snc-faq-a-inner ul {
    list-style: none; margin: 8px 0 12px; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.snc-faq-a-inner ul li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; line-height: 1.6; color: var(--snc-t2);
    padding: 8px 12px;
    background: rgba(0,0,0,0.025);
    border-radius: var(--snc-r-sm);
}
[data-op-theme="dark"] .snc-faq-a-inner ul li {
    background: rgba(255,255,255,0.04);
}
.snc-faq-a-inner ul li::before {
    content: "✓";
    font-size: 12px; font-weight: 700;
    color: var(--snc-blue);
    flex-shrink: 0; margin-top: 1px;
}
.snc-faq-a-inner ol {
    margin: 10px 0 0 0;
    padding-left: 20px;
    display: flex; flex-direction: column; gap: 6px;
}
.snc-faq-a-inner ol li {
    font-size: 15px; line-height: 1.85; color: var(--snc-t1);
    padding-left: 4px;
}

/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media (max-width: 1199px) {
    :root { --snc-sidebar: 300px; --snc-gutter: 20px; }
    .snc-rec-grid       { grid-template-columns: repeat(4, 1fr); }
    .snc-financial-grid { grid-template-columns: repeat(2, 1fr); }
    .snc-gallery-grid   { grid-template-columns: repeat(3, 1fr); }
    .snc-creator-name   { font-size: 30px; }
    .snc-username-box   { max-width: 100%; }
}

@media (max-width: 1023px) {
    .snc-layout           { flex-direction: column; }
    .snc-sidebar          { width: 100%; position: static; }
    .snc-sidebar-rec-list { display: none; }
    .snc-hero-top-row     { flex-wrap: wrap; }
    .snc-hero-actions     { flex-direction: row; flex-wrap: wrap; width: 100%; padding-top: 0; }
    .snc-cta-primary      { flex: 1; min-width: 180px; }
    .snc-rec-grid         { grid-template-columns: repeat(3, 1fr); }
    .snc-hero-info-rows   { margin-top: 0; }
    .snc-sidebar .snc-financial-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .snc-floating-cta  { display: none !important; }
    .snc-float-desktop { display: block; }
}


/* Mobile username (under creator name) — hidden on desktop */
.snc-mobile-username { display: none; }
/* ============================================================
   RESPONSIVE — Mobile (≤767px)
   v1.8: Hero restyling — CTA C compact + price badge + spacing rhythm
   ============================================================ */
@media (max-width: 767px) {
    :root { --snc-gutter: 16px; --snc-gap: 20px; }
    .snc-container    { margin-top: 0; }

    /* Cover: explicit height (don't inherit from gallery rules) */
    .snc-cover        { height: 210px !important; max-height: 210px !important; }

    /* Cover & hero card */
    .snc-hero-card    { border-radius: var(--snc-r-xl); }
    .snc-card-title   { justify-content: center; text-align: center; }

    /* Hero body — flex column with explicit spacing */
    .snc-hero-body {
        display: flex; flex-direction: column;
        padding: 0 16px 24px;
        gap: 14px;
    }

    /* Reorder: avatar → identity → CTA C → stats → actions */
    .snc-hero-body > .snc-avatar-wrap        { order: 1; }
    .snc-hero-body > .snc-creator-info       { order: 2; }
    .snc-hero-body > .snc-cta-c-integrated   { order: 3; }
    .snc-hero-body > .snc-hero-stats-wrap    { order: 4; }
    .snc-hero-body > .snc-hero-actions       { order: 5; }

    .snc-hero-phys    { display: block; }
    .snc-hero-stats-wrap { width: 100%; }

    /* Avatar */
    .snc-avatar-wrap  { margin-top: -60px; align-self: center; width: 100%; display: flex; justify-content: center; z-index: 5; }
    .snc-avatar       { width: 140px; height: 140px; border-width: 4px; }
    .snc-avatar-initials { font-size: 56px; }
    .snc-avatar-wrap  { margin-top: -60px; }

    /* Creator info block */
    .snc-creator-info { width: 100%; flex: none; padding-top: 4px; }
    .snc-creator-name { font-size: 24px; line-height: 1.08; letter-spacing: -0.8px; margin: 0 0 4px; gap: 6px; justify-content: center; text-align: center; }
    .snc-mobile-username {
        display: block;
        margin: 0 0 10px;
        font-size: 13px;
        color: var(--snc-t3);
        font-weight: 500;
        text-align: center;
        letter-spacing: 0.1px;
    }
    [data-op-theme="dark"] .snc-mobile-username { color: rgba(255,255,255,0.65); }

    /* Hide desktop username box on mobile — replaced by CTA C */
    .snc-hero-body .snc-username-box { display: none; }

    /* Badges row */
    .snc-badges-row {
        justify-content: center;
        gap: 6px;
        margin-bottom: 0;
    }
    .snc-badge {
        font-size: 11px;
        padding: 4px 10px;
    }
    .snc-badge-price {
        font-size: 11px;
    }

    /* ── CTA C INTEGRATED — Compact single-row pill ── */
    .snc-cta-c-integrated {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        padding: 11px 16px;
        background: var(--snc-cta-of);
        background-size: 400% 400%;
        animation: sncGradientShift 4s ease infinite;
        border-radius: 14px;
        color: #ffffff;
        text-decoration: none;
        box-shadow: var(--snc-cta-of-shadow-soft);
        transition: transform 0.3s var(--snc-spring), box-shadow 0.3s var(--snc-ease);
        font-family: 'DM Sans', sans-serif;
        margin: 4px 0 2px;
        position: relative;
        z-index: 10;
    }
    .snc-cta-c-integrated:hover,
    .snc-cta-c-integrated:active {
        transform: translateY(-1px);
        box-shadow: 0 8px 28px rgba(248,87,166,0.50);
    }
    .snc-cta-c-of-icon {
        width: 26px;
        height: 26px;
        border-radius: 5px;
        flex-shrink: 0;
        display: block;
    }
    .snc-cta-c-main {
        flex: 1;
        font-size: 14px;
        font-weight: 700;
        color: #ffffff;
        text-align: center;
        letter-spacing: -0.2px;
        line-height: 1.2;
    }
    .snc-cta-c-arrow {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    /* Hero actions: hide desktop CTA-of in mobile (replaced by CTA C) */
    .snc-hero-actions .snc-cta-of { display: none; }

    /* Stats row */
    .snc-hero-stats-wrap { margin-top: 2px; }
    .snc-stats-row {
        flex-wrap: wrap;
        justify-content: center;
        padding: 12px 4px;
        border-radius: 14px;
    }
    .snc-stat-item    { width: calc(100% / 3); max-width: 33.333%; overflow: hidden; padding: 6px 4px; }
    .snc-stat-icon    { width: 22px; height: 22px; margin-bottom: 4px; }
    .snc-stat-value   { font-size: 14px; }
    .snc-stat-label   { font-size: 8px; letter-spacing: 0.3px; }
    .snc-stats-updated {
        display: flex;
        position: static;
        top: auto; right: auto;
        justify-content: center;
        margin: 8px 0 0;
        font-size: 10px;
        flex-wrap: wrap;
    }
    .snc-stat-item:not(:last-child)::after {
        background: rgba(0, 0, 0, 0.14);
    }

    /* Hero info rows */
    .snc-hero-info-rows {
        margin-top: 0;
        padding: 2px 12px;
    }
    .snc-hero-info-row { padding: 7px 0; }
    .snc-hero-info-key, .snc-hero-info-val { font-size: 12px; }

    /* Physical details */
    .snc-hero-phys {
        margin-top: 10px;
        padding: 10px;
    }

    /* Breadcrumbs */
    .snc-breadcrumbs  { display: none; }

    /* Hero actions */
    .snc-hero-actions { flex-direction: column; padding-top: 0; min-width: unset; width: 100%; }

    .snc-inline-cta-label  { display: none; }
    .snc-inline-cta-spacer { display: none; }

    /* Layout */
    .snc-gallery-grid   { grid-template-columns: repeat(3, 1fr); }
    .snc-charts-grid    { grid-template-columns: 1fr; }
    .snc-financial-grid { grid-template-columns: repeat(2, 1fr); }
    .snc-rec-grid       { grid-template-columns: repeat(2, 1fr); }
    .snc-distribution-wrap { flex-direction: column; align-items: center; }
    .snc-distribution-legend { width: 75%; min-width: unset; align-self: center; }
    .snc-dist-bar-wrap { max-width: 60px; }

    /* Floating CTAs */
    .snc-floating-cta { display: block; }
    .snc-float-desktop { display: none !important; }
    .snc-page         { padding-bottom: 110px; }

    .snc-card-body    { padding: 16px; }
    .snc-physical-grid { grid-template-columns: repeat(4, 1fr); }
    .snc-mobile-only  { display: block; }
    .snc-container, .snc-main-col, .snc-sidebar { max-width: 100%; }
    .snc-description-text, .snc-bio-content, .snc-card-body { word-break: break-word; overflow-wrap: break-word; max-width: 100%; }
    [data-op-theme="dark"] .snc-card-title { justify-content: center; }
    .snc-about-tooltip {
        width: 220px; left: 50%;
        transform: translateX(-50%) translateY(-4px);
    }
    .snc-about-tooltip.snc-tooltip-visible { transform: translateX(-50%) translateY(0); }
    .snc-about-tooltip::before { left: 50%; transform: translateX(-50%) rotate(45deg); }

    /* Sidebar cards hidden on mobile */
    .snc-sidebar-phys-card { display: none !important; }
    .snc-sidebar-rec-card  { display: none !important; }

    /* FAQ mobile: smaller question font */
    .snc-faq-q { font-size: 14px; }
}

@media (max-width: 480px) { .snc-rec-grid { grid-template-columns: repeat(2, 1fr); } }



/* ============================================================
   PHASE A — Inline CTA + Internal Linking + FAQ Highlights
   ============================================================ */

/* ── INLINE CTA after About ── */
.snc-inline-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    margin: 0 0 var(--snc-gap);
    background: linear-gradient(135deg, rgba(0,175,240,0.08) 0%, rgba(0,210,255,0.04) 100%);
    border: 1.5px solid rgba(0,175,240,0.25);
    border-radius: var(--snc-r-lg);
    position: relative;
    overflow: hidden;
}
.snc-inline-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,175,240,0.05), transparent 50%);
    pointer-events: none;
}
.snc-inline-cta-text {
    flex: 1 1 auto;
    min-width: 0;
}
.snc-inline-cta-headline {
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 6px;
    color: var(--snc-t1);
}
.snc-inline-cta-sub {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--snc-t2);
    margin: 0;
}
.snc-inline-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    background: var(--snc-cta-of);
    background-size: 400% 400%;
    animation: sncGradientShift 4s ease infinite;
    color: #ffffff !important;
    text-decoration: none;
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.2px;
    box-shadow: var(--snc-cta-of-shadow);
    transition: transform 0.2s var(--snc-spring), box-shadow 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}
.snc-inline-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--snc-cta-of-shadow-hover);
}
.snc-inline-cta-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
}
[data-op-theme="dark"] .snc-inline-cta {
    background: linear-gradient(135deg, rgba(0,175,240,0.12) 0%, rgba(0,210,255,0.05) 100%);
    border-color: rgba(0,175,240,0.3);
}

@media (max-width: 767px) {
    .snc-inline-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px 18px 16px;
        text-align: center;
    }
    .snc-inline-cta-headline { font-size: 16px; }
    .snc-inline-cta-sub { font-size: 13px; }
    .snc-inline-cta-btn { width: 100%; padding: 14px 18px; font-size: 13px; }
}

/* ── INTERNAL LINKING — natural prose anchor block ── */
.snc-internal-linking {
    margin: 0 0 var(--snc-gap);
    padding: 14px 18px;
    background: var(--snc-card-bg);
    border-radius: var(--snc-r-md);
    border: 1px solid var(--snc-border);
}
.snc-internal-linking-text {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--snc-t2);
    margin: 0;
}
.snc-internal-linking-text a {
    color: var(--snc-purple);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dotted rgba(75,13,133,0.35);
    transition: color 0.18s ease, border-color 0.18s ease;
}
.snc-internal-linking-text a:hover {
    color: var(--snc-blue);
    border-bottom-color: var(--snc-blue);
}
[data-op-theme="dark"] .snc-internal-linking-text a {
    color: #f5c5da;
    border-bottom-color: rgba(245,197,218,0.35);
}
[data-op-theme="dark"] .snc-internal-linking-text a:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

@media (max-width: 767px) {
    .snc-internal-linking { padding: 12px 14px; }
    .snc-internal-linking-text { font-size: 13px; }
}

/* ── FAQ HIGHLIGHTS — 3 compact pre-expanded items between PRN and Bio ── */
.snc-faq-highlights {
    margin: 0 0 var(--snc-gap);
    padding: 22px 24px 18px;
    background: var(--snc-card-bg);
    border-radius: var(--snc-r-lg);
    border: 1px solid var(--snc-border);
}
.snc-faq-highlights-title {
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-weight: 400;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--snc-t1);
    margin: 0 0 14px;
    line-height: 1.3;
}
.snc-faq-highlights-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.snc-faq-highlight-item {
    border-left: 3px solid var(--snc-blue);
    padding: 4px 0 4px 14px;
}
.snc-faq-highlight-q {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--snc-t1);
    margin: 0 0 4px;
    line-height: 1.35;
}
.snc-faq-highlight-a {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--snc-t2);
    margin: 0;
}
[data-op-theme="dark"] .snc-faq-highlight-item {
    border-left-color: #f5c5da;
}

@media (max-width: 767px) {
    .snc-faq-highlights { padding: 18px 16px 14px; }
    .snc-faq-highlights-title { font-size: 15px; }
    .snc-faq-highlight-q { font-size: 13.5px; }
    .snc-faq-highlight-a { font-size: 13px; }
}

/* ============================================================
   CTA COLOR SCHEME — REVERT TO PINK (kept for easy switch back)
   ============================================================
   The main CTAs across the page (hero, sidebar, floating, cta-c)
   use the CSS variables below, defined in :root above:

       --snc-cta-of                 (gradient)
       --snc-cta-of-shadow          (default shadow)
       --snc-cta-of-shadow-hover    (hover shadow on .snc-cta-of)
       --snc-cta-of-shadow-soft     (default shadow on .snc-cta-primary)
       --snc-cta-of-shadow-soft-h   (hover shadow on .snc-cta-primary)
       --snc-cta-of-shadow-float    (default shadow on floating CTAs)
       --snc-cta-of-shadow-float-h  (hover shadow on floating desktop CTA)

   Current scheme: OnlyFans BLUE (#00AFF0 / cyan).

   To revert to the original PINK scheme, uncomment the block below
   (or override the same vars in your child theme / a custom file):

   :root {
       --snc-cta-of:                 linear-gradient(-45deg, #ff5858, #f857a6, #f857a6, #ff5858);
       --snc-cta-of-shadow:          0 6px 24px rgba(248, 87, 166, 0.40);
       --snc-cta-of-shadow-hover:    0 10px 36px rgba(248, 87, 166, 0.55);
       --snc-cta-of-shadow-soft:     0 4px 20px rgba(248, 87, 166, 0.35);
       --snc-cta-of-shadow-soft-h:   0 8px 32px rgba(248, 87, 166, 0.50);
       --snc-cta-of-shadow-float:    0 8px 32px rgba(248, 87, 166, 0.45);
       --snc-cta-of-shadow-float-h:  0 12px 40px rgba(248, 87, 166, 0.55);
   }
   ============================================================ */

/* ============================================================
   META / SMALL-TEXT HARMONISATION (Roboto + one neutral grey)
   Single source of truth so every caption/label reads as one system.
   Placed last so it wins the cascade over per-component declarations.
   ============================================================ */
.snc-lead, .snc-lead .snc-lead-user,
.snc-updated,
.snc-trust-item,
.snc-stats-updated, .snc-stats-updated .snc-stats-updated-item, .snc-stats-updated .snc-stats-viewers strong,
.snc-stat-label, .snc-phys-lbl, .snc-financial-label,
.snc-financial-sub, .snc-financial-disclaimer,
.snc-gallery-disclaimer, .snc-disclaimer,
.snc-tax-toggle {
    font-family: var(--snc-meta-font);
}
.snc-updated,
.snc-trust-item, .snc-trust-item svg,
.snc-stats-updated, .snc-stats-updated .snc-stats-updated-item,
.snc-stat-label, .snc-phys-lbl, .snc-financial-label,
.snc-financial-sub,
[data-op-theme="dark"] .snc-financial-disclaimer, .snc-financial-disclaimer,
.snc-gallery-disclaimer, .snc-disclaimer {
    color: var(--snc-meta);
}
/* Slightly stronger neutral for the lead sentence + the accented viewers number */
.snc-lead { color: var(--snc-meta-strong); }
.snc-lead .snc-lead-user,
[data-op-theme="dark"] .snc-stats-updated .snc-stats-viewers strong,
.snc-stats-updated .snc-stats-viewers strong {
    color: var(--snc-meta-strong);
}