/* ================================================================
   ARTEMIS MOBILE FIX v2 — Comprehensive override layer
   Fixes: hero overflow, nav hamburger, industry grid, canvas bg,
          header padding, button sizing, all grid collapses
   ================================================================ */

/* === GLOBAL RESET === */
*, *::before, *::after { box-sizing: border-box !important; }
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* === CANVAS / BG FIX — never force width === */
canvas { max-width: 100% !important; }
#atmos, #bg-layer, #bg-overlay {
  max-width: 100vw !important;
  overflow: hidden !important;
}

/* === NAV — mobile hamburger system === */
.mob-nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 6px;
  color: #D4AF37;
  font-size: 1.4rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  z-index: 1001;
  line-height: 1;
  flex-shrink: 0;
}
.nav-links {
  display: flex !important;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* === TABLE SCROLL === */
.table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
table { min-width: 540px; }

/* ================================================================
   TABLET — 900px
   ================================================================ */
@media (max-width: 900px) {
  .pricing-preview {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .section { padding: 4rem 1.5rem !important; }
}

/* ================================================================
   MOBILE — 768px
   ================================================================ */
@media (max-width: 768px) {

  /* --- Header --- */
  .olympus-header {
    padding: 0.85rem 1rem !important;
  }
  .olympus-header .inner {
    gap: 0 !important;
  }
  .olympus-header .brand {
    font-size: 1.1rem !important;
    letter-spacing: 0.15em !important;
  }
  .olympus-header .brand .glyph {
    font-size: 1.4rem !important;
  }

  /* --- Hamburger nav --- */
  .mob-nav-toggle { display: flex !important; align-items: center !important; }

  /* Hide the base CSS nav hide rule and use our system instead */
  .olympus-header nav { display: flex !important; align-items: center !important; gap: 0 !important; }
  .olympus-header nav .nav-links,
  .nav-links {
    display: none !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    background: rgba(8,6,4,0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    flex-direction: column !important;
    padding: 5.5rem 2rem 3rem !important;
    gap: 2rem !important;
    z-index: 1000 !important;
    border-bottom: 1px solid rgba(212,175,55,0.2) !important;
    text-align: center !important;
    width: 100% !important;
  }
  .olympus-header nav .nav-links.open,
  .nav-links.open {
    display: flex !important;
  }
  .mob-nav-toggle.open {
    position: fixed !important;
    top: 0.9rem !important;
    right: 1rem !important;
    z-index: 1002 !important;
  }
  .nav-links a {
    font-size: 1.1rem !important;
    padding: 0.5rem 0 !important;
  }

  /* --- Hero --- */
  .hero-olympus {
    padding: 4rem 1.25rem 3rem !important;
    min-height: 70vh !important;
  }
  .hero-olympus h1,
  h1.rise-1,
  h1 {
    font-size: clamp(1.6rem, 7vw, 2.8rem) !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
  h2 { font-size: clamp(1.3rem, 5vw, 2rem) !important; }
  h3 { font-size: clamp(1.1rem, 4vw, 1.5rem) !important; }
  .subhead {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
    letter-spacing: 0.02em !important;
  }
  .eyebrow {
    font-size: 0.65rem !important;
    letter-spacing: 0.25em !important;
  }

  /* --- Metrics row --- */
  .metrics-row {
    flex-wrap: wrap !important;
    gap: 1rem !important;
    justify-content: center !important;
  }
  .metric { min-width: 80px !important; }

  /* --- Sections --- */
  .section { padding: 3rem 1rem !important; }
  .section-subtitle { margin-bottom: 2rem !important; }

  /* --- Cards --- */
  .marble-card, .ornate {
    padding: 1.25rem 1rem !important;
  }

  /* --- Buttons --- */
  .btn-oracle, .btn-ghost {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.9rem 1.25rem !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.08em !important;
  }
  .hero-olympus .btn-oracle,
  .hero-olympus .btn-ghost {
    width: auto !important;
    min-width: 0 !important;
  }

  /* CTA rows stack */
  [style*="display:flex"][style*="gap"],
  .cta-row, .hero-ctas, .rise-3 {
    flex-wrap: wrap !important;
  }

  /* --- Grids --- */
  .pricing-preview {
    grid-template-columns: 1fr !important;
  }
  .price-card.featured { order: -1 !important; }
  .grid-3, .grid-4, .grid-2 {
    grid-template-columns: 1fr !important;
  }
  .pantheon-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Industry links --- */
  .industry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .industry {
    padding: 0.75rem 0.5rem !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .industry .glyph {
    font-size: 1.5rem !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .industry .label {
    font-size: 0.75rem !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* --- Deity cards --- */
  .deity-card .greek-name { font-size: 1.3rem !important; }

  /* --- Two/three col layouts → single col --- */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Pricing page — always single column on mobile */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Stat rows */
  .stat-row, .stats-row, .stats-grid {
    flex-direction: column !important;
    gap: 1.25rem !important;
  }
}

/* ================================================================
   SMALL MOBILE — 480px
   ================================================================ */
@media (max-width: 480px) {
  .olympus-header { padding: 0.75rem 0.875rem !important; }
  .olympus-header .brand { font-size: 1rem !important; }
  .hero-olympus { padding: 3.5rem 1rem 2.5rem !important; }
  .pantheon-grid { grid-template-columns: 1fr !important; }
  .industry-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .section { padding: 2.5rem 0.875rem !important; }
  blockquote { padding: 1rem 0.875rem !important; font-size: 0.95rem !important; }
  .referral-grid, .features-grid, .tier-grid,
  .commission-tiers, .steps-grid {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
}

/* =====================================================
   PRICING CARD MOBILE FIX — prevent text cutoff
   ===================================================== */
@media (max-width: 768px) {
  /* Price grids: 1-col on phones so cards have room */
  .plans-grid, .pricing-grid, .plan-grid,
  [class*="plan"][class*="grid"], [class*="pricing"][class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  /* Price number — shrink font so /MO never clips */
  .price-monthly, [class*="price-month"], [class*="plan-price"] {
    font-size: 1.6rem !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .price-monthly span, [class*="price-month"] span {
    font-size: 0.85rem !important;
  }
  /* Card padding tighter on phone */
  .plan-card, [class*="plan-card"] {
    padding: 24px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Plan name */
  .plan-name { font-size: 1.1rem !important; }
  /* Feature text */
  .plan-features li, [class*="plan-feature"] li {
    font-size: 0.85rem !important;
    padding: 5px 0 !important;
  }
  /* CTA button */
  .btn-plan, [class*="btn-plan"] {
    font-size: 0.8rem !important;
    padding: 14px 16px !important;
    letter-spacing: 0.08em !important;
  }
  /* Setup fee text */
  .price-setup { font-size: 0.8rem !important; }
}

/* Tablet 2-col is OK if cards are wide enough */
@media (min-width: 481px) and (max-width: 900px) {
  .plans-grid, .pricing-grid, .plan-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .price-monthly {
    font-size: 1.5rem !important;
    letter-spacing: 0.01em !important;
  }
}

/* ================================================================
   COMPREHENSIVE MOBILE FIX — All pages, all layouts
   Applied: 2026-04-20
   ================================================================ */

/* ── BOOK PAGE: body flex → column on mobile ── */
@media (max-width: 768px) {
  body {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* ── DEITY / OLYMPIANS GRID ── */
  .pantheon-grid,
  .deity-grid,
  .olympians-grid,
  .gods-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── HOMEPAGE 3-PILLAR → SINGLE COL ── */
  .three-pillars {
    grid-template-columns: 1fr !important;
  }

  /* ── DUAL COL / DUAL LAYOUT → SINGLE COL ── */
  .dual-col,
  .two-col,
  .split-layout,
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── TABLE OVERFLOW on mobile ── */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* ── COMPARE TABLE specific ── */
  .compare-table,
  .big-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }

  /* ── HERO SECTIONS ── */
  .greek-hero {
    padding: 5rem 1rem 2rem !important;
  }
  .god-portrait {
    width: 140px !important;
    height: 180px !important;
    margin: 0 auto 1.5rem !important;
  }

  /* ── FORM CONTAINERS ── */
  .container {
    padding: 1.5rem 1rem !important;
    max-width: 100% !important;
  }
  .form-card {
    padding: 20px 16px !important;
  }
  .form-wrap {
    padding: 1.5rem 1rem !important;
  }

  /* ── WHAT GRID (features grid) ── */
  .what-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── WEAKNESS GRID ── */
  .weakness-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── TESTIMONIALS ── */
  .testimonials-row,
  .trust-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ── EXTRA SMALL PHONES (< 480px) ── */
@media (max-width: 480px) {
  .pantheon-grid,
  .deity-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Font size floor — nothing smaller than 13px */
  body, p, li, td, th {
    font-size: max(13px, 0.85rem) !important;
  }

  h1 { font-size: clamp(1.6rem, 6vw, 2.5rem) !important; }
  h2 { font-size: clamp(1.3rem, 5vw, 2rem) !important; }

  /* Buttons full width */
  .cta-btn,
  .nav-cta,
  .submit-btn,
  .generate-btn {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }
}


/* ── HERO CTA TOUCH OPTIMIZATION (added by optimization pass) ── */
@media (max-width: 768px) {
  .btn-oracle, .btn-ghost {
    min-height: 52px !important;
    font-size: 1rem !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }

  /* Trust bar — 2-column on mobile */
  .trust-bar-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    font-size: 0.7rem !important;
  }

  /* Testimonial cards — stack on mobile */
  .testimonial-grid {
    grid-template-columns: 1fr !important;
  }

  /* Metrics row — 2x2 on mobile */
  .metrics-row {
    gap: 1.5rem !important;
  }
  .metric .val {
    font-size: 2rem !important;
  }

  /* Hero inline stars — stack */
  .hero-star-proof {
    flex-direction: column !important;
    gap: 0.4rem !important;
    align-items: center !important;
  }

  /* ROI calc — full width */
  .roi-calc-grid {
    grid-template-columns: 1fr !important;
  }
}

MOBILEOF
echo 'Mobile CSS updated'


/* ── HERO CTA TOUCH OPTIMIZATION ── */
@media (max-width: 768px) {
  .btn-oracle, .btn-ghost {
    min-height: 52px !important;
    font-size: 1rem !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }
  .metrics-row { gap: 1.5rem !important; }
  .metric .val { font-size: 2rem !important; }
}