/* ============================================================
   Lev — Responsive layer
   Mobile-friendly overrides for the desktop-first layouts.
   Uses !important sparingly to override React inline styles.

   Breakpoints
     ≤ 1024px  — tablet / small laptop
     ≤  720px  — mobile portrait
   ============================================================ */

/* ============================================================
   MOBILE NAV — burger button + drawer.
   Burger is hidden on desktop; visible ≤ 720px (handled below).
   Drawer is display:none on desktop too.
   ============================================================ */

/* Hero callouts wrapper: on desktop it must not form a box, so its
   absolutely-positioned children anchor to .lev-hero-stage exactly as
   before. The ≤768px block flips it to a flex scroll carousel. */
.lev-hero-callouts { display: contents; }

.lev-nav-burger {
  /* Hidden on desktop. */
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  transition: transform var(--lev-dur-pill) ease-out;
  flex-shrink: 0;
}
.lev-nav-burger:active { transform: scale(0.92); }
.lev-burger-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--lev-spot);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 220ms var(--lev-ease-out), opacity 180ms ease;
}
/* Animate into an X when open. */
.lev-burger-bar.is-x1 { transform: translateY(7px) rotate(45deg); }
.lev-burger-bar.is-x2 { opacity: 0; }
.lev-burger-bar.is-x3 { transform: translateY(-7px) rotate(-45deg); }

.lev-mobile-menu {
  /* Off by default. The drawer rules below activate on mobile. */
  display: none;
}

/* ============================================================
   TABLET (≤ 1024px) — tighten gutters, scale gaps.
   ============================================================ */
@media (max-width: 1024px) {
  /* Section gutters: 48px → 32px */
  .lev-nav-inner,
  .lev-hero,
  #about,
  .lev-spotlight-section,
  .lev-steps-section,
  #partnerships,
  #faq,
  .lev-cta-section,
  .lev-footer,
  .lev-stats-row {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Two-column splits collapse some breathing room */
  .lev-about-grid { gap: 56px !important; }
  .lev-partnerships-split { gap: 40px !important; }
  .lev-spotlight-row { gap: 40px !important; }
  .lev-footer-grid { gap: 56px !important; gridTemplateColumns: 1.4fr 1fr 1fr; }
  .lev-cta-grid { gap: 24px !important; }

  /* Steps: 4 → 2 columns on tablet */
  .lev-steps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  /* Hero callouts shift inward a bit so they don't crowd the phone */
  .lev-hero-stage { min-height: 660px !important; }
}

/* ============================================================
   MOBILE (≤ 720px) — single-column layouts, reduce paddings,
   reflow absolute-positioned blocks, shrink phones.
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Section paddings ---- */
  .lev-nav-inner       { padding: 12px 20px !important; gap: 12px !important; }
  .lev-hero            { padding: 24px 20px 64px !important; }
  #about               { padding: 64px 20px !important; }
  .lev-stats-row       { padding: 20px 20px !important; }
  .lev-spotlight-section { padding: 64px 20px !important; }
  .lev-steps-section   { padding: 64px 20px !important; }
  #partnerships        { padding: 64px 20px !important; }
  #faq                 { padding: 64px 20px !important; }
  .lev-cta-section     { padding: 64px 20px 0 !important; }
  .lev-footer          { padding: 56px 20px 28px !important; }

  /* ---- Nav: drop center pills, swap CTA for hamburger ---- */
  .lev-nav-pills { display: none !important; }
  .lev-nav-cta   { display: none !important; }
  .lev-nav-burger { display: inline-flex; }
  .lev-nav-inner > a:first-child img { height: 28px !important; }

  /* ---- Mobile drawer ---- */
  .lev-mobile-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(245, 243, 235, 0.55);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms var(--lev-ease-out);
  }
  .lev-mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .lev-mobile-menu-panel {
    position: absolute;
    top: 72px;        /* nudge below the sticky nav */
    left: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--lev-spot-12);
    border-radius: 22px;
    padding: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-8px) scale(0.985);
    opacity: 0;
    transition: transform 260ms var(--lev-ease-out), opacity 220ms ease;
  }
  .lev-mobile-menu.is-open .lev-mobile-menu-panel {
    transform: none;
    opacity: 1;
  }
  .lev-mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .lev-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    color: var(--lev-spot);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 17px;
    transition: background var(--lev-dur-pill) ease;
  }
  .lev-mobile-link:active { background: rgba(0, 0, 0, 0.04); }
  .lev-mobile-link.is-active {
    background: var(--lev-ball);
  }
  .lev-mobile-link svg { opacity: 0.5; }
  .lev-mobile-cta {
    display: flex !important;
    justify-content: center;
    margin: 10px 4px 4px;
    background: var(--lev-spot) !important;
    color: var(--lev-bone) !important;
  }

  /* ---- Mockups globally smaller on mobile via `zoom`.
     `zoom` scales both layout and visual extent so flow + absolute
     positioning all stay correct. Phones go from ~300-310px down to
     ~225px wide — far easier to scroll past on a phone screen. */
  .phoneframe { zoom: 0.75; }

  /* ---- HERO ---- */
  .lev-hero-stage {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* Hold the radial glow as a static backdrop behind the phone. */
  .lev-hero-stage > div[aria-hidden="true"] {
    width: 90vw !important;
    height: 90vw !important;
    max-width: 440px !important;
    max-height: 440px !important;
    top: 32% !important;
    opacity: 0.55 !important;
  }
  .lev-hero-phone {
    order: 0;
    display: flex !important;
    justify-content: center;
    margin-bottom: 22px;
  }
  /* Four callouts become a horizontal scroll-snap carousel below the phone. */
  .lev-hero-callouts {
    order: 1;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 2px 20px 4px;
  }
  .lev-hero-callouts::-webkit-scrollbar { display: none; }
  .lev-hero-callout {
    position: static !important;
    flex: 0 0 72% !important;
    width: auto !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    scroll-snap-align: center;
  }
  /* Left-align the content inside every callout card on mobile. */
  .lev-hero-callout > div { align-items: flex-start !important; }
  /* Place cards stack vertically on mobile. */
  .lev-place-row { flex-direction: column !important; }
  /* Dots sit last, centered below the carousel. */
  .lev-hero-stage > .lev-cdots { order: 2; }

  /* Hero CTAs stack and become full-width */
  .lev-hero > div:nth-child(2) {
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 40px !important;
    margin-top: 28px !important;
    align-items: stretch !important;
  }
  .lev-hero > div:nth-child(2) > a {
    justify-content: center !important;
    width: 100% !important;
  }

  /* ---- STATS: three compact columns in one row ---- */
  .lev-stats-row {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0 !important;
    padding: 18px 8px !important;
  }
  .lev-stats-row > div {
    border-left: 1px solid var(--lev-spot-12) !important;
    border-top: none !important;
    padding: 6px 8px !important;
    text-align: center;
  }
  .lev-stats-row > div:first-child { border-left: none !important; }
  /* Icon + number stack vertically, centered. */
  .lev-stats-row > div > div:first-child {
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  .lev-stats-row > div > div:first-child > :first-child { margin-right: 0 !important; }
  .lev-stat-num { font-size: 28px !important; }
  .lev-stats-row p {
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 18ch !important;
  }

  /* ---- ABOUT ---- */
  .lev-about-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .lev-about-features {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .lev-about-features > div {
    padding: 14px 13px 16px !important;
  }
  .lev-about-phone-col { order: -1; }
  /* Bone-earned callout repositions in case phone is narrower */
  .lev-about-phone-col > .lev-pop {
    right: 0 !important;
  }

  /* ---- SPOTLIGHT: three feature deep-dives as a scroll-snap carousel ---- */
  .lev-spotlight-track {
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 4px 20px 6px;
  }
  .lev-spotlight-track::-webkit-scrollbar { display: none; }
  .lev-spotlight-row {
    flex: 0 0 86% !important;
    scroll-snap-align: center;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 22px 20px 26px !important;
    overflow: hidden;
  }
  /* Copy first (pill → headline → paragraph → checklist), phone last. */
  .lev-spotlight-row > div:nth-child(2) { order: 1; }
  .lev-spotlight-row > div:first-child {
    order: 2;
    margin-top: 20px;
  }
  /* Tighten the checklist rows. */
  .lev-spotlight-row li { padding: 7px 0 !important; }
  .lev-spotlight-row h3 { font-size: 26px !important; }
  .lev-spotlight-row p { font-size: 15px !important; margin-bottom: 18px !important; }

  /* ---- STEPS: four numbered steps as a scroll-snap carousel ---- */
  .lev-steps-grid {
    grid-template-columns: none !important;
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 4px 20px 6px;
  }
  .lev-steps-grid::-webkit-scrollbar { display: none; }
  .lev-steps-grid > div {
    flex: 0 0 84% !important;
    scroll-snap-align: center;
  }

  /* ---- PARTNERSHIPS ---- */
  .lev-partnerships-split {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    margin-bottom: 56px !important;
  }
  /* Storefront tiles: drop absolute positioning, stack with subtle stagger. */
  .lev-storefront-area {
    position: static !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding-top: 24px !important;
  }
  .lev-storefront-wrap {
    position: static !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    right: auto !important;
    top: auto !important;
  }
  /* Reduce rotation on mobile so tiles don't poke out of the section. */
  .lev-storefront-wrap > .lev-storefront-tile {
    transform: rotate(calc(var(--rot, 0deg) * 0.4)) !important;
  }
  .lev-storefront-wrap > .lev-storefront-tile:hover {
    transform: rotate(calc(var(--rot, 0deg) * 0.4)) translateY(-4px) !important;
  }
  /* Annotation flows above the tiles. */
  .lev-annotation {
    position: static !important;
    transform: none !important;
    margin: 0 auto 8px !important;
    text-align: center;
    max-width: 100% !important;
  }
  .lev-annotation svg { display: none !important; }
  /* Bones callout flows after the tiles, centered. */
  .lev-bones-callout {
    position: static !important;
    margin: 16px auto 0 !important;
    align-self: center !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Pay strip: stack copy + flow, drop horizontal arrows. Tightened. */
  .lev-pay-strip {
    grid-template-columns: 1fr !important;
    padding: 26px 18px !important;
    gap: 18px !important;
    border-radius: 22px !important;
  }
  .lev-flow-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .lev-flow-grid > div {
    min-height: 0 !important;
    padding: 11px 12px !important;
  }
  .lev-flow-arrow {
    transform: rotate(90deg) scale(0.85);
    margin: 0 auto !important;
  }

  /* ---- FAQ ---- */
  .lev-faq-tail {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 22px 22px !important;
  }
  .lev-faq-tail > a { align-self: stretch !important; text-align: center; justify-content: center; }
  /* Tab pill: tighter padding */
  .lev-faq-tabs button {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }

  /* ---- CTA ---- */
  .lev-cta-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .lev-cta-section h2 { font-size: clamp(32px, 9vw, 44px) !important; }
  .lev-cta-section > div > div:first-child { padding-bottom: 0 !important; }
  /* Phones use `zoom: 0.75` globally so a 272×588 frame becomes ~204×441.
     Container height must be ≥ that + slack so absolute-positioned phones
     don't overflow upward into the trust row. We also pin them with `top`
     instead of `bottom` so any rounding error trims the BOTTOM edge (which
     is already cropped by the section), not the top. */
  .lev-cta-phones {
    height: 470px !important;
    margin: 24px auto 0;
    max-width: 380px;
    position: relative;
  }
  .lev-cta-phones > div:first-child  {
    left: 0 !important;
    top: 28px !important;
    bottom: auto !important;
  }
  .lev-cta-phones > div:nth-child(2) {
    right: 0 !important;
    top: 8px !important;
    bottom: auto !important;
  }

  /* ---- FOOTER ---- */
  .lev-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    margin-bottom: 40px !important;
  }
  .lev-footer-legal {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* ---- LEGAL PAGES (Privacy / Terms) ---- */
  .legal-hero    { padding: 48px 20px 36px !important; }
  .legal-article { padding: 40px 20px 64px !important; }
  .legal-hero h1 { font-size: clamp(32px, 8vw, 44px) !important; }

  /* ---- BRAND MARQUEE — slow it down a touch, tighten gaps ---- */
  .lev-brand-marquee-row { gap: 40px !important; padding: 0 20px !important; }
  .lev-brand-cell        { height: 60px !important; }
  .lev-brand-strip       { margin-left: -20px !important; margin-right: -20px !important; }

  /* ---- CAROUSEL DOTS (Hero / Spotlight / Steps) ---- */
  .lev-cdots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 6px 0;
  }
  .lev-cdot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    /* Inherit the section's text color explicitly — iOS Safari defaults
       <button> color to the system blue, which made currentColor go blue. */
    color: inherit;
    background: currentColor;
    opacity: 0.28;
    cursor: pointer;
    transition: opacity 200ms var(--lev-ease-out), width 220ms var(--lev-ease-out);
  }
  /* Expand the tap target to ~32px without growing the visible dot. */
  .lev-cdot::after { content: ""; position: absolute; inset: -12px; }
  .lev-cdot.is-active { opacity: 1; width: 22px; }

  /* General readability: smaller h2/h3 floors */
  body { font-size: 15px; }
}

/* ============================================================
   VERY SMALL (≤ 380px) — narrow phones, edge polish.
   ============================================================ */
@media (max-width: 380px) {
  /* Hero callouts: a touch wider on really tight viewports. */
  .lev-hero-callout {
    flex-basis: 80% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Mockups shrink further on the tightest phones. */
  .phoneframe { zoom: 0.68; }

  /* CTA phones: hide the second so the first fits. */
  .lev-cta-phones { height: 420px !important; }
  .lev-cta-phones > div:nth-child(2) { display: none !important; }
  .lev-cta-phones > div:first-child {
    left: 50% !important;
    transform: translateX(-50%);
    top: 16px !important;
    bottom: auto !important;
  }
}