/* ============================================================
   THE AUDIT CHAMBER · MOBILE.CSS v5 (A-MOBILE · D27 S2 PATCH)
   ============================================================
   v5 changes:
     · hero-eyebrow constrained to 320px max-width (forces wrap
       inside frame, not edge-to-edge)
     · font shrunk further to 9px
     · hero padding-top raised to 170px to clear wrapping nav bar
   v4/v3/v2/v1 preserved.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   GLOBAL DEFENSIVE BASE (applies at all viewports)
   Prevents horizontal scroll regardless of layout
   ───────────────────────────────────────────────────────────── */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   BREAKPOINT 1 — TABLET / LARGE PHONE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* ── BASE TYPOGRAPHY ── */
  html { font-size: 16px; }

  /* ── NAV ── */
  nav {
    padding: 14px 16px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .nav-brand {
    font-size: 12px !important;
    letter-spacing: .15em !important;
  }
  .nav-brand span {
    display: none;
  }
  .nav-links {
    gap: 14px !important;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    order: 3;
  }
  .nav-links a,
  .mega-trigger {
    font-size: 13px !important;
    letter-spacing: .08em !important;
  }
  .nav-cta {
    font-size: 12px !important;
    padding: 8px 14px !important;
    letter-spacing: .1em !important;
  }
  .mega-panel { display: none !important; }
  .mega-trigger::after { display: none !important; }
  .live-badge {
    right: 16px !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
  }

  /* ── HERO / SECTIONS — collapse horizontal padding ── */
  .hero,
  .section,
  .how,
  .credibility,
  .timeline,
  .matrix,
  .stack,
  .cta,
  .footer,
  section,
  main > div,
  .page > section,
  .page > div,
  .assets-section,
  .how-section,
  .spectacle-section,
  .routing-section,
  .cta-final,
  footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 100px !important;
    padding-bottom: 56px !important;
    min-height: auto !important;
  }
  .hero-content { max-width: 100% !important; }
  .hero-video {
    aspect-ratio: 16 / 9 !important;
    max-width: 100% !important;
  }

  /* ── ALL MULTI-COLUMN GRIDS → SINGLE COLUMN ── */
  [style*="grid-template-columns"],
  .how-grid,
  .credibility-grid,
  .matrix-grid,
  .stack-grid,
  .timeline-grid,
  .footer-grid,
  .features,
  .tier-grid,
  .asset-grid,
  .assets-grid,
  .funnel-grid,
  .cards,
  .card-grid,
  .row,
  .columns,
  .spectacle-grid,
  .routing-grid,
  .sound-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── ASSET PRICING — 2col KES|USD price boxes → stack ── */
  .asset-pricing {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .price-block {
    padding: 8px 10px !important;
  }
  .pb-price {
    font-size: 16px !important;
  }
  .asset-info {
    padding: 0 18px 22px !important;
  }
  .asset-name {
    font-size: 19px !important;
  }
  .asset-icon-wrap {
    padding: 28px 18px !important;
    min-height: 140px !important;
  }
  .gavel-card {
    padding: 32px 20px !important;
  }
  .gavel-card::before {
    font-size: 10px !important;
    letter-spacing: .14em !important;
    padding: 0 8px !important;
  }
  .tier-block {
    margin-bottom: 48px !important;
  }
  .tier-header {
    gap: 10px !important;
    margin-bottom: 22px !important;
  }
  .th-label {
    font-size: 11px !important;
    letter-spacing: .14em !important;
    padding: 0 12px !important;
  }
  .how-step, .route-card {
    padding: 28px 20px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(212,175,55,0.1) !important;
  }
  .how-step:last-child, .route-card:last-child {
    border-bottom: none !important;
  }
  .spec-table {
    font-size: 11px !important;
  }
  .spec-table thead th,
  .spec-table tbody td {
    padding: 7px 8px !important;
    font-size: 11px !important;
  }
  .tier-tabs {
    gap: 6px !important;
    margin-bottom: 32px !important;
  }
  .tier-pill {
    padding: 7px 14px !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
  }
  .live-ticker-bar {
    height: 30px !important;
  }
  .ticker-label, .ticker-content {
    font-size: 11px !important;
  }

  /* ── v3 PATCH: status-badge overlap fix ── */
  /* Fixed-position pill collides with hero-eyebrow on mobile.
     Hide the status badge on phones — it duplicates page title context. */
  .status-badge {
    display: none !important;
  }

  /* ── v3 PATCH: routing-grid higher-specificity collapse ── */
  /* .routing-section .routing-grid wins against the 1fr 1fr declaration */
  .routing-section .routing-grid,
  .spectacle-section .spectacle-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── v4 PATCH: hero-eyebrow line-height + scale on mobile ── */
  /* Long eyebrow strings wrap onto 2-3 lines and crowd hero-title */
  .hero-eyebrow {
    font-size: 9px !important;
    letter-spacing: .12em !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
    padding: 0 8px !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── v4/v5 PATCH: scroll bleed under fixed nav ── */
  /* Wrapping nav grows to 120-140px tall on mobile.
     Hero needs 170px top padding to clear. */
  html {
    scroll-padding-top: 140px;
  }
  .hero {
    padding-top: 170px !important;
  }

  /* ── FLEX ROWS → STACK ── */
  .hero-cta-row,
  .cta-row,
  .button-row,
  .actions,
  .nav-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .hero-cta-row > *,
  .cta-row > *,
  .button-row > * {
    width: 100% !important;
    text-align: center !important;
  }

  /* ── BUTTONS ── */
  .btn, .button, a.cta, a.nav-cta,
  button[class*="btn"], button[class*="cta"],
  .submit-btn, .sp-btn {
    padding: 14px 20px !important;
    font-size: 14px !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* ── HEADINGS scale-down (clamp already handles hero-title) ── */
  h1:not(.hero-title) {
    font-size: clamp(28px, 7vw, 44px) !important;
    line-height: 1.1 !important;
  }
  h2 {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    line-height: 1.15 !important;
  }
  h3 {
    font-size: clamp(18px, 4.5vw, 24px) !important;
    line-height: 1.2 !important;
  }
  .section-title, .how-title, .matrix-title, .cta-title {
    font-size: clamp(24px, 6vw, 36px) !important;
    line-height: 1.1 !important;
  }

  /* ── VERTICAL PADDING SCALE-DOWN ── */
  .hero { padding-top: 96px !important; padding-bottom: 48px !important; }
  .section, section { padding-top: 64px !important; padding-bottom: 64px !important; }
  .footer { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* ── CARDS / TILES ── */
  .card, .tile, .feature, .tier, .matrix-item,
  .how-step, .credibility-item, .stack-item,
  .asset-card, .inc-item {
    padding: 24px 20px !important;
  }

  /* ── FORMS ── */
  .wrapper, .form-wrapper, .container,
  .form-card, .card-form {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .field-row,
  .form-row,
  .two-col,
  .fields-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .field-input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important; /* 16px = no iOS auto-zoom on focus */
    padding: 13px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fields, .submit-section, .card-header,
  .section-head, .card-legal, .warning-block {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ── STATS / METRIC TILES ── */
  .stat, .stat-card, .metric, .stats-bar {
    padding: 16px 14px !important;
  }
  .stat-value, .metric-value {
    font-size: clamp(28px, 7vw, 40px) !important;
  }

  /* ── TICKER / LIVE BAR ── */
  .ticker, .live-ticker {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  /* ── TABLES → horizontal scroll container ── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ── GAVEL BG — keep cinematic but reduce intensity on phone ── */
  #gavel-bg {
    background-size: cover !important;
    opacity: 0.22 !important;
  }

  /* ── CUSTOM CURSOR — disable on touch ── */
  body { cursor: auto !important; }
  .cursor, .cursor-ring { display: none !important; }

  /* ── HERO TYPOGRAPHY MICRO-FIX ── */
  .hero-eyebrow, .hero-title-sub {
    letter-spacing: .18em !important;
    font-size: 13px !important;
  }
  .hero-statement, .hero-sub {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

/* ============================================================
   BREAKPOINT 2 — STANDARD PHONE / KE ANDROID (≤ 480px)
   Refinements on top of 768px block
   ============================================================ */
@media (max-width: 480px) {

  /* ── BASE ── */
  html { font-size: 15px; }

  /* ── NAV — further compression ── */
  nav {
    padding: 12px 12px !important;
  }
  .nav-brand {
    font-size: 11px !important;
  }
  .nav-links {
    gap: 10px !important;
  }
  .nav-links a,
  .mega-trigger {
    font-size: 11px !important;
  }
  .nav-cta {
    font-size: 11px !important;
    padding: 7px 12px !important;
  }
  .live-badge {
    font-size: 10px !important;
    top: 10px !important;
    right: 12px !important;
  }

  /* ── SECTIONS — tighter horizontal padding ── */
  .hero,
  .section,
  .how,
  .credibility,
  .timeline,
  .matrix,
  .stack,
  .cta,
  .footer,
  section,
  main > div,
  .page > section,
  .page > div,
  .assets-section,
  .how-section,
  .spectacle-section,
  .routing-section,
  .cta-final,
  footer {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero {
    padding-top: 88px !important;
    padding-bottom: 40px !important;
    gap: 24px !important;
  }

  /* ── VERTICAL PADDING — further shrink ── */
  .section, section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .footer { padding-top: 36px !important; padding-bottom: 36px !important; }

  /* ── HEADINGS — final scale-down ── */
  h1:not(.hero-title) {
    font-size: clamp(24px, 8vw, 34px) !important;
  }
  h2 {
    font-size: clamp(20px, 6vw, 28px) !important;
  }
  h3 {
    font-size: clamp(16px, 5vw, 21px) !important;
  }
  .section-title, .how-title, .matrix-title, .cta-title {
    font-size: clamp(22px, 7vw, 30px) !important;
  }

  /* ── CARDS / TILES ── */
  .card, .tile, .feature, .tier, .matrix-item,
  .how-step, .credibility-item, .stack-item,
  .asset-card, .inc-item {
    padding: 18px 14px !important;
  }

  /* ── BUTTONS — tighter ── */
  .btn, .button, a.cta, a.nav-cta,
  button[class*="btn"], button[class*="cta"],
  .submit-btn, .sp-btn {
    padding: 13px 16px !important;
    font-size: 13px !important;
    letter-spacing: .1em !important;
  }

  /* ── FORM PADDING ── */
  .fields, .submit-section, .card-header,
  .section-head, .card-legal, .warning-block {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .field-input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    padding: 12px 12px !important;
    font-size: 16px !important; /* keep 16px to block iOS auto-zoom */
  }

  /* ── BODY TEXT ── */
  p, li, .body-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* ── ASSET-DEPOT smallest-phone refinements ── */
  .asset-pricing {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .asset-info {
    padding: 0 14px 18px !important;
  }
  .asset-name {
    font-size: 17px !important;
  }
  .asset-function {
    font-size: 14px !important;
  }
  .asset-icon-wrap {
    padding: 22px 14px !important;
    min-height: 120px !important;
  }
  .gavel-card {
    padding: 24px 14px !important;
  }
  .gavel-card::before {
    font-size: 9px !important;
    letter-spacing: .1em !important;
  }
  .how-step, .route-card {
    padding: 22px 14px !important;
  }
  .hero-actions, .actions, .button-row {
    gap: 10px !important;
  }
  .btn-primary, .btn-secondary {
    padding: 14px 22px !important;
    font-size: 12px !important;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* ── GAVEL BG — further restraint on smallest viewport ── */
  #gavel-bg {
    opacity: 0.18 !important;
    background-size: cover !important;
  }

  /* ── HERO MICRO ── */
  .hero-eyebrow {
    font-size: 11px !important;
    letter-spacing: .14em !important;
    margin-bottom: 18px !important;
  }
  .hero-statement, .hero-sub {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* ── STATS ── */
  .stat-value, .metric-value {
    font-size: clamp(24px, 8vw, 32px) !important;
  }

  /* ── TICKER ── */
  .ticker, .live-ticker {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
}

/* ============================================================
   ACCESSIBILITY — reduce motion respect
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   END MOBILE.CSS
   ============================================================ */