/* ═══════════════════════════════════════════════════════════════════════
   SOMATYX — Mobile Fixes  (v2)
   Loaded on all pages. Handles responsive layout that inline styles can't.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Global: prevent horizontal scroll ─────────────────────────────── */
html, body { overflow-x: hidden; }
* { min-width: 0; box-sizing: border-box; }
img, svg, video, iframe { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   INLINE GRID COLLAPSE — CSS attribute selectors override inline styles.
   Targets every hardcoded 2-col grid that lacks responsive fallback.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 660px) {

  /* Two equal columns → single column */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Two unequal columns (1fr 2fr, content + sidebar) → single column */
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Fixed-width left column (220px 1fr cadence items) → single column */
  [style*="grid-template-columns:220px 1fr"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1fr 480px"] {
    grid-template-columns: 1fr !important;
  }

  /* 3-column repeats → 2 column (keep some density) */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}

/* ── Alien X chip grid: 3→2 cols on mobile ─────────────────────────── */
@media (max-width: 660px) {
  #ax-chips {
    grid-template-columns: repeat(2,1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  nav {
    padding: 0 16px !important;
    height: 52px !important;
  }
  .nav-brand {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .nav-brand svg { flex-shrink: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE CONTAINERS & SPACING
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .pi, .pi-wide, .page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — comfortable reading on small phones
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero h1  { font-size: clamp(30px, 9vw, 52px) !important; }
  .intro-wordmark { font-size: clamp(22px, 7vw, 36px) !important; letter-spacing: 0.14em !important; }
  .narrative-lead { font-size: clamp(18px, 5vw, 26px) !important; }
  /* Prevent long words from overflowing on small screens */
  p, h1, h2, h3, h4 { overflow-wrap: break-word; word-break: break-word; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .hero { padding: 56px 0 52px !important; }
  .hero-anatomy { display: none !important; }
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-stats { gap: 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS — touch targets + stacking
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .btn { min-height: 44px; }
}
@media (max-width: 420px) {
  .hero-actions .btn,
  .bundle-card .btn,
  .analysis-callout .btn,
  .email-form .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOOL CARDS (tools.html grid) — auto-sizing already works, just ensure
   cards have comfortable padding on mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .tools-grid { grid-template-columns: 1fr !important; }
  .tool-card  { padding: 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM CARDS
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .premium-cards { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODULE ROWS
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .mod-row { flex-wrap: wrap; }
  .mod-right-col {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: unset !important;
    padding-top: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BUNDLE CARD
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .bundle-card {
    flex-direction: column !important;
    gap: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   EMAIL FORM
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .email-wrap  { padding: 28px 18px !important; }
  .email-form  { flex-direction: column !important; }
  .email-input { min-width: unset !important; }
  .email-form .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ANALYSIS CALLOUT
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .analysis-callout {
    flex-direction: column !important;
    gap: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   FORM ROWS
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .form-row,
  .field-row { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 24px 16px !important;
  }
  .footer-links { gap: 12px !important; flex-wrap: wrap; }
  .pfooter {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .pfooter-links { gap: 14px !important; flex-wrap: wrap !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOOL PAGES — zone card padding
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .zone-card   { padding: 22px !important; }
  .form-card   { padding: 22px !important; }
  .email-wrap  { padding: 22px 16px !important; }
  .tool-cta-inner { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMMUNITY PAGE — class-based overrides fire at right breakpoint
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 660px) {
  .axis-grid    { grid-template-columns: 1fr !important; }
  .locked-grid  { grid-template-columns: 1fr !important; }
  .lcard        { grid-template-columns: 1fr !important; }
  .cadence-item { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WHAT'S NEXT (coming-soon.html) — image visibility on mobile
   When grid collapses to 1 col, image renders below text at full width.
   Increase opacity so it's visible instead of invisible.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 660px) {
  /* The hero background image stays faint (decorative) */
  /* The section image in book/passageway cards — make visible */
  .hx-img[style*="opacity:0.22"] {
    opacity: 0.5 !important;
    filter: brightness(1.1) contrast(1.05) saturate(0.9) !important;
  }
  /* Keep hero orb images faint */
  .hx-img[style*="opacity:0.07"],
  .hx-img[style*="opacity:0.04"],
  .hx-img[style*="opacity:0.09"] {
    opacity: 0.06 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ORBS — prevent any contribution to right-side overflow visual
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .orb-1 { width: min(100vw, 700px) !important; }
  .orb-2 { width: min(80vw, 420px) !important; right: -200px !important; }
  .orb-3 { width: min(70vw, 320px) !important; left: -160px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DEPTH BAR — horizontal scroll without page overflow
   ═══════════════════════════════════════════════════════════════════════ */
.depth-bar { -webkit-overflow-scrolling: touch; }

/* ═══════════════════════════════════════════════════════════════════════
   INTRO ORB — scale down on very small phones
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .intro-orb-svg { width: 100px !important; height: 100px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AX BLOCK (Alien X quote blocks) — reduce padding on mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .ax-block { padding: 16px 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION PADDING — reduce vertical whitespace on phones
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .section { padding: 52px 0 !important; }
  .narrative { padding: 52px 0 !important; }
  .email-section { padding: 52px 0 !important; }
  .nsep, .nsep-violet { margin: 36px 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP: ensure centred content doesn't leave obvious dead right space
   Fix max-width paragraphs inside wide sections
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 900px) {
  /* On mid-size screens, let text breathe more */
  [style*="max-width:480px"],
  [style*="max-width:520px"],
  [style*="max-width:540px"],
  [style*="max-width:560px"] {
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   JS-CLASS FALLBACK: .mob-resp-grid (added by mobile-nav.js for grids
   that don't match attribute selectors exactly)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 660px) {
  .mob-resp-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE NAV — hamburger + drawer
   CSS lives here (linked <link> tag) so it fires on first paint,
   before mobile-nav.js runs. JS handles open/close interaction only.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide desktop nav links + show hamburger on mobile */
@media (max-width: 768px) {
  nav .nav-links  { display: none !important; }
  .ham-btn        { display: flex !important; }
}

/* Hamburger button */
.ham-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 302;
}
.ham-btn:hover  { border-color: rgba(0,212,255,0.28); background: rgba(0,212,255,0.04); }
.ham-btn:active { transform: scale(0.94); }

/* Bars inside hamburger */
.ham-icon {
  width: 18px;
  height: 11px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.ham-bar {
  height: 1.5px;
  background: #a5a2c2;
  border-radius: 2px;
  transition: all 0.26s cubic-bezier(0.4,0,0.2,1);
  transform-origin: center;
}
/* X state when open */
.ham-btn.open .ham-bar:nth-child(1) { transform: translateY(4.75px) rotate(45deg);  background: #00d4ff; }
.ham-btn.open .ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham-btn.open .ham-bar:nth-child(3) { transform: translateY(-4.75px) rotate(-45deg); background: #00d4ff; }

/* Overlay */
.mob-overlay {
  position: fixed;
  top: 52px; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 299;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.28s, visibility 0.28s;
  pointer-events: none;
}
.mob-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Slide-in drawer */
.mob-drawer {
  position: fixed;
  top: 52px; right: 0;
  width: min(300px, 84vw);
  height: calc(100dvh - 52px);
  background: rgba(5,5,10,0.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-left: 1px solid rgba(0,212,255,0.08);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.mob-drawer.open { transform: translateX(0); }

/* Drawer header */
.mob-drawer-header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.mob-drawer-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.26em;
  color: #52516f;
  text-transform: uppercase;
}
.mob-drawer-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  cursor: pointer;
  color: #7c7a9a;
  font-size: 18px;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.mob-drawer-close:hover { color: #e9e7f0; border-color: rgba(255,255,255,0.18); }

/* Nav link list */
.mob-nav-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 0;
}
.mob-nav-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 16px 22px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  color: #7c7a9a !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: color 0.15s, background 0.15s !important;
  -webkit-tap-highlight-color: transparent;
  min-height: 52px;
  box-sizing: border-box;
  width: 100%;
}
.mob-nav-link:hover,
.mob-nav-link:active { color: #e9e7f0 !important; background: rgba(255,255,255,0.025) !important; }
.mob-nav-link.mob-active { color: #00d4ff !important; }
.mob-nav-link.mob-cta {
  color: #00d4ff !important;
  margin-top: 8px;
  border-bottom: none !important;
  border-top: 1px solid rgba(0,212,255,0.1) !important;
  background: rgba(0,212,255,0.04) !important;
}
.mob-nav-link.mob-cta:hover { background: rgba(0,212,255,0.09) !important; }

/* Drawer footer */
.mob-drawer-footer {
  padding: 20px 22px;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.mob-drawer-footer-brand {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #32314f;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════
   PASS 2 FIXES — full audit sweep
   ═══════════════════════════════════════════════════════════════════════ */

/* ── .pi bottom padding is 120px — way too much on phones ──────────── */
@media (max-width: 768px) {
  .pi, .pi-wide { padding-bottom: 72px !important; }
}
@media (max-width: 480px) {
  .pi, .pi-wide { padding-bottom: 56px !important; }
}

/* ── Inline flex rows with min-width that break on iPhone SE (320px) ─ */
@media (max-width: 560px) {
  /* Subscription bundle checklist + text row */
  [style*="flex:1;min-width:280px"],
  [style*="flex: 1; min-width: 280px"] {
    min-width: 0 !important;
    width: 100% !important;
    flex-basis: 100% !important;
  }
  /* Email/form inputs with min-width that prevent wrapping */
  [style*="min-width:200px"][type="email"],
  [style*="min-width:200px"][type="text"] {
    min-width: 0 !important;
    width: 100% !important;
  }
  /* Flex containers holding the above — force column */
  [style*="min-width:200px"] {
    min-width: 0 !important;
  }
}

/* ── Form rows with flex + wrap — force column on small phones ───────── */
@media (max-width: 480px) {
  [style*="display:flex"][style*="flex-wrap:wrap"],
  [style*="display: flex"][style*="flex-wrap: wrap"] {
    /* Only flex rows that wrap email inputs */
  }
  /* Specifically target email form flex containers */
  form [style*="display:flex"],
  #say-form [style*="display:flex"] {
    flex-direction: column !important;
  }
  #say-form input[type="email"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── Subscription: module rows (flex items with min-width) ───────────── */
@media (max-width: 600px) {
  /* Module list row: text block + price block → stack */
  [style*="min-width:280px"] {
    min-width: 0 !important;
    flex-basis: 100% !important;
  }
  /* Checklist beside bundle description */
  [style*="min-width:200px"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── Community axis-grid: ensure 1-col wins over repeat(2,1fr) ───────── */
@media (max-width: 660px) {
  .axis-grid { grid-template-columns: 1fr !important; }
}

/* ── Subscription module grid cards: ensure single column ───────────── */
@media (max-width: 660px) {
  .mob-resp-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ── max-width constraints on paragraphs that cause right dead space ── */
/* On mid-size phones (480-660px), let text use full container width */
@media (max-width: 660px) {
  [style*="max-width:380px"],
  [style*="max-width:420px"],
  [style*="max-width:440px"],
  [style*="max-width:480px"],
  [style*="max-width:500px"],
  [style*="max-width:520px"],
  [style*="max-width:540px"],
  [style*="max-width:560px"],
  [style*="max-width:600px"] {
    max-width: 100% !important;
  }
}

/* ── Tool pages: constrained max-width paragraphs → full width ───────── */
@media (max-width: 520px) {
  .page [style*="max-width:300px"],
  .page [style*="max-width:360px"],
  .page [style*="max-width:380px"] {
    max-width: 100% !important;
  }
  /* Outcome card actions */
  .outcome-card [style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .outcome-card .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Coming-soon: email form flex → column on small phones ───────────── */
@media (max-width: 520px) {
  #say-form [style*="display:flex"][style*="gap:10px"] {
    flex-direction: column !important;
  }
  #say-form input[type="email"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── Sections: reduce top/bottom padding on very small phones ─────────── */
@media (max-width: 480px) {
  [style*="padding:64px 0"],
  [style*="padding:72px 0"],
  [style*="padding:88px 0"] {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  [style*="padding:48px 0"] {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

/* ── Prevent inline-flex pill badges from overflowing on phones ──────────
   Keep the overflow protection (wrap + tighter padding) but don't force an
   unreadable 8px font. Pills that need to be smaller set it inline. */
@media (max-width: 480px) {
  [style*="display:inline-flex"][style*="letter-spacing"] {
    padding: 6px 12px !important;
    white-space: normal;
    text-align: center;
  }
}

/* ── Hero stats: wrap earlier on small phones ───────────────────────── */
@media (max-width: 480px) {
  .hero-stats {
    flex-wrap: wrap !important;
    gap: 14px 28px !important;
  }
  .stat-val   { font-size: 20px !important; }
  .stat-label { font-size: 9px !important; }
}

/* ── FAQ: expand tap target ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .faq-q { padding: 18px 0 !important; font-size: 14px !important; }
}

/* ── Nav brand: prevent text spilling on very narrow phones ──────────── */
@media (max-width: 380px) {
  .nav-brand { font-size: 9px !important; letter-spacing: 0.08em !important; }
  nav svg    { width: 22px !important; height: 22px !important; }
}

/* ── Keyboard focus visibility (audit/fable visual pass) ── */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(0, 212, 255, 0.75);
  outline-offset: 2px;
  border-radius: 4px;
}