/* =======================================================
   EVARA MOBILE FIXES, shared across all pages
   Loaded LAST to override component styles by source order.
   Fixes horizontal overflow at <=768px and 480px refinement.
   ======================================================= */

/* Logo aspect-ratio guard, never distort.
   True art ratio = viewBox 305:140 = 2.1818 (PNG 600x275 agrees).
   aspect-ratio pins the box ratio so the wrong 78x36 footer attrs and the
   pre-load frame can never squeeze; object-fit:contain is belt-and-suspenders
   against any forced height+width combo (incl. Safari srcset edge cases). */
.logo img{width:auto!important;max-width:none!important;aspect-ratio:305/140!important;object-fit:contain!important;}

/* --- MARQUEE TOUCH FIX (all widths) ---
   The .mq-track is ~5288px wide via CSS @keyframes translateX.
   It does NOT need scroll/touch panning, only the CSS animation moves it.
   Force pan-y on container + track + items so vertical swipe is never
   captured as a horizontal gesture on iOS Safari.
   Also block horizontal scroll presentation on the container. */
.mq {
  touch-action: pan-y !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
}
.mq-track,
.mq-item {
  touch-action: pan-y !important;
}

/* --- COMPARISON TABLE TOUCH FIX (all widths) ---
   .comparison-table-wrap has overflow-x:auto for desktop horizontal scroll.
   On mobile this can capture vertical swipe gestures. */
.comparison-table-wrap {
  touch-action: pan-y !important;
  overscroll-behavior-x: none !important;
}

@media(max-width:768px){
  /* Trust features: desktop padding:60px crushed grid to 270px */
  .trust-features{padding:40px 20px!important;}
  .tf-grid{grid-template-columns:repeat(2,1fr)!important;gap:16px!important;}

  /* Why-Evara cards: auto 1fr layout overflows at 390px */
  .why-grid{grid-template-columns:1fr!important;gap:0!important;}
  .wc{grid-template-columns:1fr!important;gap:16px!important;padding:32px 20px!important;}

  /* Inline-styled 2-col grids (process header, etc.) */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important;gap:20px!important;}

  /* Form section: 2-col with 110px gap */
  .form-sec-in{grid-template-columns:1fr!important;gap:32px!important;}

  /* Quiz CTA: desktop padding:160px */
  .qcta{padding:56px 20px!important;}
  .qcta::before,.qcta::after{width:300px!important;height:300px!important;}

  /* Stats band: stat-card desktop padding:52px 40px */
  .stat-card{padding:24px 16px!important;}

  /* Hero-l: clip ::before pseudo (600px wide, position:absolute) */
  .hero-l{padding:calc(100px + env(safe-area-inset-top)) 20px 60px!important;max-width:100%!important;overflow:hidden!important;}

  /* Section base */
  section{padding:56px 20px!important;}

  /* Comparison grid */
  .cmp-grid{font-size:11px!important;}

  /* Packages grid: ensure single-col */
  .pkg-grid,.pkg-grid2{grid-template-columns:1fr!important;}
  .pkg,.pkg2{padding:28px 20px!important;}

  /* Footer grid */
  .ftt{grid-template-columns:1fr!important;gap:24px!important;}

  /* Stories grid */
  .stories-grid{grid-template-columns:1fr!important;}

  /* Testimonials grid */
  .testi-grid{grid-template-columns:1fr!important;}

  /* Gallery grid */
  .gallery-grid{grid-template-columns:1fr 1fr!important;gap:8px!important;}

  /* Founder section, clip absolute fframe that extends right:-20px */
  .founder-in{grid-template-columns:1fr!important;gap:32px!important;overflow:hidden!important;}

  /* Process grid: compact 2x2 instead of 4 tall stacked cards.
     .step padding MUST be !important here - the inline 28px rule was being
     overridden to 52px in prod (why prior 'compaction' silently didn't apply). */
  .proc-grid{grid-template-columns:1fr 1fr!important;gap:12px!important;background:none!important;}
  .step{padding:22px 16px!important;}
  .stn{font-size:46px!important;top:6px!important;right:10px!important;}
  .stio{width:34px!important;height:34px!important;font-size:15px!important;margin-bottom:12px!important;}
  .stt{font-size:16px!important;margin-bottom:6px!important;}
  .std{font-size:12px!important;line-height:1.5!important;}

  /* Nav mobile: padding + logo sizing (blog pages lack the inline override) */
  nav{padding:16px 20px!important;}
  nav.s{padding:12px 20px!important;}
  .logo img{height:54px!important;}

  /* Page hero */
  .ph{padding:calc(100px + env(safe-area-inset-top)) 20px 56px!important;}

  /* Contact grid */
  .contact-grid{grid-template-columns:1fr!important;gap:32px!important;}
  .cform-wrap{padding:28px 20px!important;}

  /* About page */
  .about-grid{grid-template-columns:1fr!important;}
  .about-founder{grid-template-columns:1fr!important;gap:32px!important;}
  .vals-grid{grid-template-columns:1fr!important;}

  /* Body padding for sticky CTA bar (50px + safe area) */
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom))!important;}

  /* Mobile menu, fit all links, consistent alignment, visual hierarchy.
     The drawer now holds ONLY nav links + search (Sign In / Become a Member live
     permanently in the top-right cluster), so the old :last-child / :nth-last-child(2)
     gold-pill "CTA" stylings were removed — they would otherwise mis-style the last
     remaining link (Contact). Drawer links stay uniform. */
  .mm{gap:8px!important;padding:60px 32px 40px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;}
  .mm a{width:100%!important;min-height:48px!important;border-bottom:1px solid rgba(201,169,110,0.08)!important;}
  .mm a:last-of-type{border-bottom:none!important;}
}

/* 480px refinement */
@media(max-width:480px){
  .tf-grid{grid-template-columns:1fr!important;gap:12px!important;}
  .stats-grid{grid-template-columns:1fr!important;}
  .stat-card{border-right:none!important;border-bottom:1px solid var(--brdp)!important;}
  .stat-card:last-child{border-bottom:none!important;}
  .gallery-grid{grid-template-columns:1fr!important;}
}

/* === RESPONSIVE NAV LAYOUT — MOVED OUT ===
   This block duplicated the design-tokens.css nav rules and fought with
   site-header.css. The header's responsive layout now lives in ONE place:
   assets/site-header.css. Do not re-add nav layout rules here. */

/* === WAITLIST BUTTON: restyle to Evara plum + gold hover === */
.waitlist-button{
  background:var(--am,#3D1A5C)!important;
  color:#FAF7F1!important;
  transition:background 0.3s ease,transform 0.22s cubic-bezier(0.16,1,0.3,1)!important;
}
.waitlist-button:hover{
  background:var(--gold,#C9A96E)!important;
  color:var(--dark,#07050A)!important;
}
[data-theme="light"] .waitlist-button{
  background:var(--am,#5D2D8A)!important;
  color:#FDFCF8!important;
}
[data-theme="light"] .waitlist-button:hover{
  background:var(--gold,#A8854A)!important;
  color:#FDFCF8!important;
}

/* === SKIP-TO-CONTENT: sr-only by default, visible on :focus === */
.skip-to-content{
  position:absolute!important;
  width:1px!important;height:1px!important;
  min-height:0!important;min-width:0!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.skip-to-content:focus,.skip-to-content:focus-visible{
  position:fixed!important;
  top:0!important;left:16px!important;
  width:auto!important;height:auto!important;
  padding:12px 24px!important;margin:0!important;
  overflow:visible!important;
  clip:auto!important;
  white-space:normal!important;
  z-index:9999!important;
  background:var(--gold-primary,#E5BF73)!important;
  color:#0A0A0F!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:14px!important;font-weight:500!important;
  text-decoration:none!important;
  border-radius:0 0 8px 8px!important;
}