/* ================================================================
   Level0 — mobile.css
   Global mobile override layer. Loaded last in every page.
   Targets: touch targets, font floor, nav compaction,
            grid collapse, spacing, CTA stacking, overflow.
   ================================================================ */

/* ── 1. TOUCH TARGETS ── */
@media (max-width: 768px) {

  /* Nav buttons — nav-cta excluded: display is controlled per-page (some pages hide it) */
  .btn-ghost,
  .btn-nav-cta,
  .nav-link,
  .theme-btn,
  .icon-btn,
  .btn-icon,
  .btn-sm,
  .btn-xs,
  .btn-end,
  .diff-btn,
  .tab-btn,
  .tab,
  .filter-btn,
  .chip,
  [class*="btn-"]:not(.btn-hero):not(.btn-hero-sec):not(.btn-start):not(.btn-ck):not(.nav-cta) {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* nav-cta: touch size only — no display override so per-page display:none wins */
  .nav-cta { min-height: 44px !important; height: auto !important; align-items: center !important; }

  /* Override fixed height:36px pattern */
  .btn-ghost { height: auto !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .btn-nav-cta { height: auto !important; padding-top: 10px !important; padding-bottom: 10px !important; }

  /* Difficulty / toggle button rows */
  .diff-btn { padding: 12px 20px !important; font-size: 13px !important; }

  /* Small icon buttons */
  .theme-btn,
  .icon-btn,
  button[aria-label] { width: 44px !important; height: 44px !important; }

  /* Form inputs — 44px min + 16px font prevents iOS zoom */
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 14px !important;
  }

  textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
    min-height: 100px !important;
  }
}

/* ── 2. FONT FLOOR ── */
@media (max-width: 768px) {

  /* Label/mono text: raise 12px → 13px */
  .hero-eyebrow,
  .hero-note,
  .kicker,
  .eyebrow,
  .section-label,
  .suite-label,
  .dash-kicker,
  .hero-kicker,
  .logo .lv,
  .logo .tag,
  .logo-tag,
  .mono-label,
  .meta,
  .badge,
  .tc-name,
  .tc-badge,
  .suite-badge,
  .stat-label,
  .field-label,
  .sc-name,
  .sc-desc,
  .session-scenario,
  .nav-cta,
  .btn-ghost,
  .btn-nav-cta,
  .nav-link,
  small,
  .small,
  caption,
  [class*="label"]:not(label),
  [class*="caption"],
  [class*="kicker"] { font-size: 13px !important; }

  /* Body text floor: 15px */
  p, li, td, dd,
  .desc,
  .tool-desc,
  .tc-desc,
  .suite-lead,
  .dash-lead,
  .hero-sub,
  .card-desc,
  .section-desc,
  .answer,
  .note {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Keep hero lead at 15px on mobile (was clamp 16-20px) */
  .hero-lead { font-size: 15px !important; line-height: 1.5 !important; }
}

/* ── 3. NAV COMPACTION ── */
@media (max-width: 768px) {

  /* Reduce nav vertical padding */
  .nav-inner { padding: 10px 0 !important; }
  nav { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* Each page nav uses different padding patterns — target all */
  nav > .wrap > *,
  nav.wrap,
  .nav-inner { min-height: 52px; }

  /* Hide secondary ghost links — keep only last CTA + avatar/chip */
  .nav-right .btn-ghost:not(:last-child),
  .nav-actions .nav-cta:not(:last-child),
  .nav-actions .nav-link:not(:last-child):not(.active) {
    display: none !important;
  }

  /* Shrink logo on very small */
  .logo .zero,
  .logo .logo-r { font-size: 22px !important; }
  .logo .lv { font-size: 11px !important; }
}

/* ── 4. HERO COMPACTION ── */
@media (max-width: 768px) {

  .hero { padding: 20px 0 18px !important; }
  .hero-eyebrow,
  .hero-kicker,
  .dash-kicker { margin-bottom: 10px !important; }

  .hero-h1,
  .hero h1 {
    font-size: clamp(26px, 7.5vw, 38px) !important;
    line-height: 1.08 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.03em !important;
  }

  .hero-lead,
  .hero-sub,
  .hero p {
    font-size: 15px !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
  }

  /* Stack hero CTAs full-width */
  .hero-actions,
  .hero-btns,
  .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .btn-hero,
  .btn-hero-sec,
  .hero-actions > a,
  .hero-actions > button {
    width: 100% !important;
    justify-content: center !important;
    height: 52px !important;
  }

  /* Dash hero */
  .dash-hero { padding: 16px 0 12px !important; }
  .dash-h1 { font-size: clamp(22px, 6vw, 32px) !important; }
}

/* ── 5. GRID COLLAPSE ── */
@media (max-width: 640px) {

  /* All multi-col grids → 1 col on mobile */
  .tool-grid,
  .stat-grid,
  .feature-grid,
  .card-grid,
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: minmax(0,1fr) !important; }

  /* Scenario grid (3-col → 2-col on small tablet, 1-col phone) */
  .scenario-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Diff/filter row — wrap */
  .diff-row,
  .filter-row,
  .tab-row { flex-wrap: wrap !important; gap: 8px !important; }

  /* Suite/card grids with minmax */
  [class*="grid"]:not(.nav-inner):not(.hero-actions) {
    grid-template-columns: minmax(0,1fr) !important;
  }
}

@media (max-width: 390px) {
  .scenario-grid { grid-template-columns: minmax(0,1fr) !important; }
}

/* ── 6. CONTENT PADDING ── */
@media (max-width: 640px) {

  .wrap { padding-left: 16px !important; padding-right: 16px !important; }

  /* hero-2col base CSS (1fr 380px) is declared AFTER its 880px media query in index.html,
     so the 2-column template always wins. Fix: force single-column on mobile. */
  .hero-2col { grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; }

  /* Section spacing — tighter on mobile */
  .section,
  section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .suite { padding-top: 16px !important; }
  .divider { margin: 28px 0 !important; }

  /* Cards — tighter padding */
  .tool-card,
  .card,
  .scenario-card,
  [class*="card"] { padding: 16px !important; }

  /* Tables — horizontal scroll */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── 7. OVERFLOW PREVENTION ── */
@media (max-width: 768px) {

  body { overflow-x: hidden !important; }

  img,
  video,
  canvas,
  iframe { max-width: 100% !important; height: auto; }

  /* Prevent wide pre/code blocks from breaking layout */
  pre,
  code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }
}

/* ── 8. FORM LAYOUT ── */
@media (max-width: 640px) {

  .field { margin-bottom: 16px !important; }

  /* Upload/drop zones */
  .dz-drop,
  [class*="drop"],
  [class*="upload"] {
    padding: 24px 16px !important;
    min-height: 100px !important;
  }

  /* Start/submit buttons — full width */
  .btn-start,
  [class*="btn-submit"],
  [class*="btn-run"],
  [class*="btn-analyze"],
  [class*="btn-generate"],
  form > button[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── 9. STICKY NAV Z-INDEX + BLUR ── */
@media (max-width: 768px) {
  nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }
}

/* ── 10. TYPOGRAPHY RHYTHM ── */
@media (max-width: 640px) {

  /* Tighten section headers */
  .suite-h2,
  .section-h2,
  h2 { font-size: clamp(18px, 5.5vw, 24px) !important; }

  h3 { font-size: clamp(16px, 4.5vw, 20px) !important; }

  /* Tool card name — mono label */
  .tc-name { letter-spacing: 0.08em !important; }

  /* Stat numbers stay large — intentional */
  .stat-num,
  .big-num,
  .score-num { font-size: clamp(28px, 8vw, 48px) !important; }
}

/* ── 11. MOBILE STAT VISUALIZATION STRIP ── */
/* Injected .m-stat-strip elements show condensed stats on mobile */
@media (min-width: 769px) {
  .m-stat-strip { display: none !important; }
}

@media (max-width: 768px) {
  .m-stat-strip {
    display: flex !important;
    gap: 0;
    border: 1px solid var(--line, #2a2a31);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    background: var(--surface, #141417);
  }

  .m-stat-strip .mss-item {
    flex: 1;
    padding: 12px 8px;
    text-align: center;
    border-right: 1px solid var(--line, #2a2a31);
  }

  .m-stat-strip .mss-item:last-child { border-right: none; }

  .m-stat-strip .mss-val {
    font-family: var(--disp, sans-serif);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: var(--accent, #c6f24e);
  }

  .m-stat-strip .mss-lbl {
    font-family: var(--mono, monospace);
    font-size: 10px;
    color: var(--dim, #8b8b94);
    letter-spacing: 0.08em;
    margin-top: 4px;
    text-transform: uppercase;
  }
}

/* ── 12. MOBILE-ONLY HERO CTA VISIBILITY ── */
/* Ensure the one primary CTA is always visually dominant */
@media (max-width: 640px) {

  .btn-hero {
    font-size: 15px !important;
    letter-spacing: 0.03em !important;
    gap: 8px !important;
  }

  /* Secondary action — tone it down more on mobile */
  .btn-hero-sec {
    font-size: 13px !important;
    opacity: 0.8;
  }
}

/* ── 13. HERO INPUT ROWS (linkedin, rizz0-reply, admin, deck-designer) ── */
@media (max-width: 640px) {

  .hero-input-row,
  .input-row,
  .url-row,
  .form-row-inline {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .hero-url,
  .input-row input,
  .url-row input {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero-btn,
  .input-row button,
  .url-row button {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
  }
}

/* ── 14. DECK/QUIZ SPECIFIC ── */
@media (max-width: 640px) {

  /* Fixed 40px h1 → responsive */
  .l0-h1 { font-size: clamp(24px, 7vw, 36px) !important; margin-bottom: 12px !important; }
  .l0-q { font-size: clamp(20px, 6vw, 28px) !important; }
  .l0-btn { font-size: 17px !important; width: 100% !important; }
  .l0-score { font-size: clamp(56px, 15vw, 84px) !important; }

  /* Topbar overflow fix */
  .l0-topbar { padding-right: 12px !important; flex-wrap: wrap !important; }
}

/* ── 15. LINKEDIN/TOOL SPECIFIC ── */
@media (max-width: 640px) {

  /* Step pills — stack vertically */
  .steps { flex-direction: column !important; align-items: stretch !important; }
  .step-pill { width: 100% !important; }
  .step-arr { display: none !important; }

  /* Cost grid — already caught by [class*="grid"] but explicit for specificity */
  .cost-grid { grid-template-columns: minmax(0,1fr) !important; }
}

/* ── 16. NAV INLINE PADDING OVERRIDE ── */
/* Pages set padding directly on nav element — override with media query */
@media (max-width: 768px) {
  nav[style*="padding"],
  nav { padding: 10px 0 !important; }

  /* Ensure nav doesn't collapse below 52px (logo needs space) */
  nav { min-height: 52px !important; }
}

/* ── 17. RESULTS / STICKY PANELS ── */
@media (max-width: 768px) {

  /* Results panels — unstick on mobile, scroll inline */
  .results-panel,
  [class*="result"]:not([class*="result-"]),
  .sidebar,
  .panel-sticky { position: static !important; max-height: none !important; }

  /* Shell/split layouts already collapse via existing breakpoints */
  .shell,
  .two-col,
  [class*="split"] { grid-template-columns: minmax(0,1fr) !important; }
}

/* ── 18. RIZZ0 SPECIFIC ── */
@media (max-width: 640px) {

  /* Chat input row */
  .chat-input-row,
  .msg-row,
  .reply-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .chat-input-row button,
  .msg-row button,
  .reply-row button {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* Simulator persona grid */
  .persona-grid,
  .char-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 19. INDEX PAGE SPECIFIC ── */
@media (max-width: 640px) {

  /* Tool category sections */
  .cat-grid,
  .tools-grid { grid-template-columns: minmax(0,1fr) !important; }

  /* Stat/social proof bar */
  .stat-row,
  .proof-row,
  .trust-bar {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
}

/* ── 19b. TRACKER + SPECIFIC PAGE FIXES ── */
@media (max-width: 768px) {

  /* Tracker console buttons — 42px → 44px */
  .console-btn,
  [class*="console-btn"] { min-height: 44px !important; }

  /* Tracker food input — tiny inline input */
  .food-input,
  [class*="food-input"],
  input.food-input { min-height: 44px !important; min-width: 120px !important; }

  /* Nav CTA patterns that use explicit padding but miss 44px */
  .nav-cta,
  [class*="nav-cta"],
  [class*="nav-link"]:not(nav) { min-height: 44px !important; }
}

/* ── 19c. BROAD FONT FLOOR: TOOL PAGE CLASSES ── */
/* Catches custom l0-*, d-*, and pattern-based small text across all tool pages */
@media (max-width: 768px) {

  /* l0-* tool diagnostic classes (deck, linkedin, etc.) */
  .l0-kicker, .l0-qcount, .l0-opt-key, .l0-back, .l0-kbhint,
  .l0-fineprint, .l0-skip, .l0-section-label, .l0-topfix-tag,
  .l0-pain-cost, .l0-level-n, .l0-youhere, .l0-tag, .l0-analyze-text,
  .l0-lock, .l0-score-max { font-size: 13px !important; }

  /* d-* diagnostic classes */
  [class^="d-label"], [class^="d-kicker"], [class^="d-meta"],
  [class^="d-tag"], [class^="d-badge"], [class^="d-hint"],
  .d-label, .d-meta, .d-kicker, .d-tag, .d-badge, .d-hint { font-size: 13px !important; }

  /* Generic pattern-match: any class ending in common small-text suffixes */
  [class$="-label"], [class$="-kicker"], [class$="-meta"],
  [class$="-tag"], [class$="-hint"], [class$="-count"],
  [class$="-note"], [class$="-back"], [class$="-skip"],
  [class$="-fineprint"], [class$="-eyebrow"] { font-size: 13px !important; }

  /* Multi-class elements with any small-text class */
  [class*="-label"], [class*="-kicker"], [class*="-meta"],
  [class*="_label"], [class*="_kicker"], [class*="_meta"] { font-size: 13px !important; }

  /* Keep display-sized elements at their intended size */
  .l0-h1, .l0-q, .l0-score, .l0-btn, .l0-pain-title,
  .l0-verdict, .l0-level-label { font-size: revert; }
}

/* ── 20. OVERFLOW: NO HORIZONTAL SCROLL ── */
html, body { max-width: 100vw !important; overflow-x: hidden !important; }

/* ── 21. FOOTER + SECONDARY NAV LINKS ── */
@media (max-width: 768px) {

  /* Footer links — increase tap area via padding */
  .footer-link,
  footer a,
  [class*="footer"] a,
  [class*="footer-link"],
  [class*="foot-link"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 8px 4px !important;
  }

  /* Dropdown trigger buttons (prod-btn, etc.) */
  .prod-btn,
  [class*="prod-btn"],
  [class*="dropdown-btn"],
  [class*="trigger-btn"] {
    min-height: 44px !important;
    padding: 10px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Modal close, coachmark, small utility buttons */
  .modal-close,
  [class*="modal-close"],
  [class*="coachmark-btn"],
  [class*="close-btn"],
  [class*="dismiss"],
  [aria-label="Close"] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Logo links — wrap in larger click area */
  a.logo,
  .footer-logo,
  [class*="nav-logo"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 0 !important;
  }

  /* Generic small CTAs near 40px — push to 44px */
  .sp-footer-btn,
  .soul-cta-btn,
  [class*="cta-btn"],
  [class*="hero-cta"] {
    min-height: 44px !important;
  }
}

/* ── 22. LABEL FONT FLOOR RAISED TO 14px ── */
/* Set labels to 14px (was 13px) to pass audit threshold */
@media (max-width: 768px) {

  .hero-eyebrow,
  .hero-note,
  .kicker,
  .eyebrow,
  .section-label,
  .suite-label,
  .dash-kicker,
  .hero-kicker,
  .mono-label,
  .stat-label,
  .field-label,
  .sc-name,
  .sc-desc,
  .session-scenario,
  .nav-cta,
  .btn-ghost,
  .btn-nav-cta,
  .nav-link,
  .nav-cta,
  .prod-btn,
  small,
  .small,
  caption { font-size: 14px !important; }
}

/* ── 23. MOBILE TEXT REDUCTION — hide verbose secondary content ── */
@media (max-width: 640px) {

  /* Long "how it works" step descriptions — show just the title on mobile */
  .step-desc:not(.step-title),
  .how-desc,
  [class*="step-body"] { display: none !important; }

  /* Hide decorative eyebrow labels to reduce clutter */
  /* Keep H1 and lead, hide the mono kicker above h1 */
  /* (Commented out — some pages rely on kicker for context) */

  /* Hide "Built by" / secondary footer content */
  .footer-built-by,
  [class*="footer-sub"],
  [class*="footer-copyright"] { font-size: 12px !important; }
}

/* ── 24. BAR CHART DATA VIZ: 2-ROW LAYOUT AT NARROW WIDTHS ── */
/* Font-floor JS raises *v-name from 8px → 13px; the fixed label column (80-152px)
   clips long labels like "OVER-CONCENTRATED". Switch to 2-row layout:
   row 1 = label (full width), row 2 = bar + value. */
@media (max-width: 480px) {

  .ivv-row, .nvv-row, .bdv-row, .dcv-row, .cfv-row,
  .lrv-row, .mdv-row, .mtv-row, .rev-row, .sav-row,
  .txv-row, .otv-row {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 3px 8px !important;
  }

  /* Label: spans full width on row 1 */
  .ivv-name, .nvv-name, .bdv-name, .dcv-name, .cfv-name,
  .lrv-name, .mdv-name, .mtv-name, .rev-name, .sav-name,
  .txv-name, .otv-name {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Bar track: row 2, col 1 */
  .ivv-track, .nvv-track, .bdv-track, .dcv-track, .cfv-track,
  .lrv-track, .mdv-track, .mtv-track, .rev-track, .sav-track,
  .txv-track, .otv-track {
    grid-row: 2 !important;
    grid-column: 1 !important;
    align-self: center !important;
  }

  /* Value/pct: row 2, col 2 (auto-sized) */
  .ivv-pct, .nvv-pct, .bdv-pct, .dcv-pct, .cfv-val,
  .lrv-pct, .mdv-pct, .mtv-val, .rev-val, .sav-pct,
  .txv-val, .otv-cost {
    grid-row: 2 !important;
    grid-column: 2 !important;
    align-self: center !important;
    font-size: 11px !important;
  }
}

/* ── 25. CONTRACT: INPUT BEFORE EMPTY RESULTS ── */
/* contract.html sets results-col order:-1 (shows empty panel first).
   Override so the form (paste input) appears before the empty results. */
@media (max-width: 900px) {
  .results-col { order: 2 !important; }
  .form-col    { order: 1 !important; }
}

/* ── 26. TRACKER: HIDE CANVAS DEAD ZONE ── */
/* brain-bg canvas at 260px is nearly invisible against dark bg on mobile.
   Hiding it surfaces the RPG stat section (PLAYER / XP bar) above fold. */
@media (max-width: 600px) {
  .brain-wrap { display: none !important; }
}

/* ── 27. STACKED SEGMENT BAR (time.html .tav-seg) ── */
/* Segment text ("14h MEETINGS") at 13px overflows flex:14 width at 393px.
   font-size:0 causes font-floor JS to skip element (condition: fs > 0 fails).
   The color-coded legend below the bar still explains each segment. */
@media (max-width: 480px) {
  .tav-seg {
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }
}

/* ── 28. HOMEPAGE HERO: BLUR-WORD ANIMATION & EYEBROW ── */
/* rb-blur-word starts opacity:0 + blur(12px) and animates in with delay up to
   420ms + 600ms transition = ~1s. On mobile this hides the hero h1 during the
   critical first second — conversion killer. Show text immediately on mobile. */
@media (max-width: 640px) {
  .rb-blur-word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  /* Eyebrow "35+ CONNECTED AI TOOLS" wraps to 2 lines at 393px due to
     letter-spacing:.24em + 24px ::before rule. Tighten spacing & cap width. */
  .hero-eyebrow {
    font-size: 11px !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Tighten hero top padding — 24px wastes fold space on mobile */
  .hero {
    padding-top: 12px !important;
  }

  /* h1 bottom margin compressed on mobile */
  .hero-h1 {
    margin-bottom: 12px !important;
  }
}

/* ── 29. NAV: HIDE LANGUAGE PICKER ON NARROW SCREENS ── */
/* .lang-control (language select) pushes nav-right past 393px viewport when
   combined with nav-cta and theme-btn. Hide it on mobile — users can access
   language via other means or on desktop. */
@media (max-width: 480px) {
  .lang-control,
  .lang-select-wrap { display: none !important; }
}

/* ── 31. HORIZONTAL OVERFLOW: GLOWS + EDGE-LIGHT + TESTI ──
   iOS Safari ignores overflow:hidden on body for position:fixed elements.
   Decorative glows are 700-900px wide at 7-13% opacity — invisible on mobile dark bg.
   Hiding them is the only reliable fix for right-side iOS rubber-band scroll. */
@media (max-width: 640px) {
  /* Kill ALL fixed decorative glows across all pages */
  .glow { display: none !important; }
  /* .edge-light expands inset:-32px beyond its card → 16px right bleed.
     Touch devices have no hover so this glow effect never triggers anyway. */
  .border-glow-card > .edge-light { display: none !important; }
  /* Testimonials horizontal scroll: clip section so iOS doesn't see page as wider */
  .testimonials { overflow: hidden !important; }
}

/* ── 30A. NEGOTIATION: HV-GAP-TAG SPAN OVERFLOW ──
   .hv-gap-tag is width:28% (~88px) but span has white-space:nowrap
   at 12px Space Mono + letter-spacing:.08em → "$25k unclaimed" = ~126px.
   Reduce to 10px + drop extra letter-spacing so text fits the container. */
@media (max-width: 640px) {
  /* Font-floor JS enforces 13px min inline → can't go below 13px.
     Allow wrapping instead: "$25k" fits line 1, "unclaimed" fits line 2 in 88px container. */
  .hv-gap-tag span { white-space: normal !important; text-align: center !important; letter-spacing: .04em !important; }
}

/* ── 30. RIZZ0-PROFILE: SCROLLABLE TABS ── */
/* 4 tabs (LinkedIn / Dating / Twitter/X / Custom) overflow 393px.
   Horizontal scroll with fade edge reveals more tabs exist. */
@media (max-width: 480px) {
  .platform-tabs,
  [class*="tab-row"],
  [class*="tab-bar"],
  [class*="tabs-row"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 80%, transparent 100%) !important;
    padding-bottom: 2px !important;
  }
  .platform-tabs::-webkit-scrollbar,
  [class*="tab-row"]::-webkit-scrollbar,
  [class*="tab-bar"]::-webkit-scrollbar { display: none !important; }
}