/* ═══════════════════════════════════════════════════════
   MOBILE RESPONSIVE — CHECKOUTIFY
   Breakpoints: ≤1024 (tablet), ≤768 (mobile), ≤480 (small)
   ═══════════════════════════════════════════════════════ */

/* ── TABLET & BELOW (≤ 1024px) ─────────────────────── */
@media (max-width: 1024px) {
  .s6-sticky {
    padding: 0 40px;
  }

  .s6-layout {
    gap: 48px;
  }
}

/* ── SECTION HEIGHT OVERRIDES — MOBILE                 */
/* Fingers scroll faster than mouse wheels.             */
/* Each section needs more vh to breathe on mobile.     */
@media (max-width: 768px) {
  /* Narrative (S1–S4): 700vh = ~175vh per panel        */
  .narrative-container {
    height: 700vh;
  }

  /* Closing narrative uses inline style — override it  */
  #closing-narrative {
    height: 480vh !important;
  }

  /* S6 phone demo: 550vh = ~110vh per screen            */
  .s6 {
    height: 550vh;
  }
}

/* ── MOBILE (≤ 768px) ──────────────────────────────── */
@media (max-width: 768px) {

  /* ── SECTION 1 — QUESTION ─────────────────────────── */
  .s1-question {
    font-size: clamp(36px, 10vw, 56px);
  }

  /* ── SECTION 3 — EVERY VISIT ──────────────────────── */
  .s3-weight {
    font-size: clamp(72px, 22vw, 140px);
  }

  /* ── SECTION 4 — PIVOT ────────────────────────────── */
  .s4-pivot {
    font-size: clamp(32px, 8vw, 48px);
  }

  /* ═══════════════════════════════════════════════════════
     SECTION 6 — THE PROOF — MOBILE LAYOUT
     Step label above, phone hero below.
     Both always visible within the sticky 100dvh.
     ═══════════════════════════════════════════════════════ */
  .s6-sticky {
    padding: 56px 20px 32px;
    align-items: center;
    justify-content: center;
    overflow: clip; /* not 'hidden' — clip clips without creating a scroll container, preventing iOS Safari scroll-layer trapping */
    height: 100dvh; /* override desktop 100vh for iOS Safari */
  }

  .s6-layout {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 100%;
    height: 100%;
    justify-content: center;
  }

  /* Phone hero — sized to be dominant but not overwhelming */
  #s6-phone {
    width: min(160px, 42vw) !important;
    height: min(320px, 44dvh) !important;
    border-radius: 28px !important;
    padding: 8px !important;
    flex-shrink: 0;
    order: 1; /* phone below labels */
  }

  /* Labels above phone — clear context before the visual */
  .s6-labels-container {
    width: 100%;
    max-width: 280px;
    min-height: 72px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    order: 0; /* labels above phone */
  }

  .s6-label {
    position: absolute;
    width: 100%;
    text-align: center;
  }

  .s6-headline {
    font-size: 24px !important;
    margin-bottom: 0;
  }

  .s6-overline {
    font-size: 14px;
    margin-bottom: 5px;
  }

  /* Scale internal phone elements for compact frame */
  .s6 .phone-notch {
    width: 44px;
    height: 16px;
    border-radius: 0 0 10px 10px;
  }

  .s6 .phone-screen-area {
    border-radius: 22px;
  }

  .s6 .app-nav {
    padding: 18px 8px 5px;
  }

  .s6 .app-logo-text {
    font-size: 13px;
  }

  .s6 .app-store-chip {
    font-size: 7px;
    padding: 2px 5px;
  }

  .s6 .app-body {
    padding: 7px;
  }

  .s6 .app-overline {
    font-size: 7px;
  }

  .s6 .app-screen-title {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .s6 .store-list {
    gap: 3px;
  }

  .s6 .store-item {
    padding: 4px 5px;
    gap: 4px;
    border-radius: 5px;
  }

  .s6 .store-item-name {
    font-size: 9px;
  }

  .s6 .store-item-sub {
    font-size: 7px;
  }

  .s6 .store-item-dot {
    width: 5px;
    height: 5px;
  }

  .s6 .store-item-arrow {
    font-size: 7px;
  }

  .s6 .scan-zone {
    gap: 8px;
    padding-top: 8px;
  }

  .s6 .scan-frame {
    width: 80px;
    height: 80px;
  }

  .s6 .scan-corner {
    width: 10px;
    height: 10px;
  }

  .s6 .scan-label {
    font-size: 7px;
  }

  .s6 .cart-items {
    gap: 2px;
    margin-bottom: 4px;
  }

  .s6 .cart-item {
    padding: 4px 5px;
    border-radius: 5px;
  }

  .s6 .cart-item-name {
    font-size: 8px;
  }

  .s6 .cart-item-meta {
    font-size: 6px;
  }

  .s6 .cart-item-price {
    font-size: 8px;
  }

  .s6 .cart-scan-more {
    font-size: 7px;
    padding: 3px;
    border-radius: 4px;
  }

  .s6 .bill-summary {
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
  }

  .s6 .bill-row {
    padding: 1px 0;
  }

  .s6 .bill-label,
  .s6 .bill-value {
    font-size: 8px;
  }

  .s6 .bill-total-label {
    font-size: 14px;
  }

  .s6 .bill-total-value {
    font-size: 14px;
  }

  .s6 .bill-divider {
    margin: 2px 0;
  }

  .s6 .pay-btn {
    padding: 7px;
    font-size: 9px;
    margin-bottom: 3px;
    border-radius: 5px;
  }

  .s6 .pay-secured {
    font-size: 7px;
    gap: 2px;
  }

  .s6 .pay-secured svg {
    width: 7px;
    height: 7px;
  }

  .s6 .ebill-check {
    margin-bottom: 6px;
  }

  .s6 .ebill-check svg {
    width: 20px;
    height: 20px;
  }

  .s6 .ebill-confirmed {
    font-size: 13px;
    margin-bottom: 2px;
  }

  .s6 .ebill-sub {
    font-size: 8px;
    margin-bottom: 8px;
  }

  .s6 .ebill-qr {
    width: 44px;
    height: 44px;
    padding: 3px;
    margin-bottom: 5px;
    border-radius: 3px;
  }

  .s6 .qr-art {
    width: 34px;
    height: 34px;
  }

  .s6 .qr-corner {
    width: 8px;
    height: 8px;
    border-width: 1.5px;
  }

  .s6 .qr-dots {
    width: 18px;
    height: 18px;
  }

  .s6 .ebill-instruction {
    font-size: 7px;
    margin-bottom: 3px;
  }

  .s6 .ebill-timer {
    font-size: 7px;
    padding: 2px 6px;
  }

  /* ── SECTION 7 — CONTRAST ─────────────────────────── */
  .s7 {
    transition: background-color 1s ease;
  }

  .s7-split {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1px 1fr;
    min-height: auto;
  }

  .s7-divider-line {
    width: 100%;
    height: 1px;
  }

  /* Hide the vertical midpoint glow on horizontal divider */
  .s7-divider-line::after {
    width: 80px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(
      to right,
      transparent,
      rgba(212, 168, 67, 0.12),
      transparent
    );
  }

  .s7-left,
  .s7-right {
    padding: 40px 24px;
    min-height: 44vh;
    min-height: 44dvh; /* iOS Safari */
  }

  .s7-counter {
    font-size: clamp(56px, 18vw, 80px);
    margin-bottom: 6px;
  }

  .s7-counter-eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
    margin-bottom: 0;
  }

  .s7-you {
    font-size: clamp(52px, 16vw, 72px);
  }

  .s7-time {
    font-size: 15px;
  }

  .s7-label {
    font-size: 13px;
    max-width: 180px;
  }

  .s7-phone-frame {
    width: 96px;
    height: 192px;
    border-radius: 22px;
    padding: 5px;
  }

  .s7-screen-content {
    border-radius: 17px;
    gap: 6px;
    padding: 8px 5px 10px;
  }

  .s7-check {
    font-size: 15px;
  }

  .s7-paid {
    font-size: 8px;
  }

  .s7-qr-mini {
    width: 24px;
    height: 24px;
  }

  /* ── SECTION 8 — CTA ──────────────────────────────── */
  .s8 {
    padding: 48px 16px 32px;
    min-height: 100dvh; /* iOS Safari */
    align-items: flex-start; /* let content flow from top instead of centering -- prevents clipping */
  }

  .s8-coming {
    font-size: clamp(28px, 8vw, 48px);
    margin-bottom: 28px;
  }

  .vote-bar-row {
    grid-template-columns: 14px 84px 1fr 44px;
    gap: 6px;
    margin-bottom: 6px;
    padding: 4px 0;
  }

  .vote-city-name {
    font-size: 13px;
  }

  .vote-count {
    font-size: 12px;
  }

  .vote-bars {
    margin-bottom: 24px;
  }

  .city-pill {
    font-size: 13px;
    padding: 8px 16px;
  }

  .vs-email-form {
    flex-direction: column;
  }

  /* ── SECTION 9 — CLOSE ────────────────────────────── */
  .s9-close {
    font-size: clamp(26px, 6vw, 44px);
  }
  .s9 {
    padding: 80px 16px 40px;
  }

  /* ── FOOTER ──────────────────────────────────────── */
  #main-footer {
    padding: 60px 24px;
  }

  .footer-wordmark {
    font-size: 22px;
  }
}

/* ── SMALL MOBILE (≤ 480px) ────────────────────────── */
@media (max-width: 480px) {

  /* ── SECTION 1 ───────────────────────────────────── */
  .s1-question {
    font-size: clamp(32px, 12vw, 48px);
  }

  /* ── SECTION 3 ───────────────────────────────────── */
  .s3-weight {
    font-size: clamp(64px, 20vw, 100px);
  }

  /* ── SECTION 7 ───────────────────────────────────── */
  .s7 {
    transition: background-color 1s ease;
  }

  .s7-left,
  .s7-right {
    padding: 32px 20px;
    min-height: 42vh;
    min-height: 42dvh; /* iOS Safari */
  }

  .s7-counter {
    font-size: clamp(52px, 16vw, 72px);
    margin-bottom: 4px;
  }

  .s7-counter-eyebrow {
    font-size: 8px;
    letter-spacing: 1.8px;
  }

  .s7-you {
    font-size: clamp(48px, 15vw, 64px);
  }

  .s7-time {
    font-size: 14px;
  }

  .s7-label {
    font-size: 12px;
  }

  .s7-phone-frame {
    width: 84px;
    height: 168px;
    border-radius: 20px;
    padding: 5px;
  }

  .s7-screen-content {
    border-radius: 15px;
  }

  .s7-check {
    font-size: 14px;
  }

  .s7-paid {
    font-size: 7.5px;
  }

  .s7-qr-mini {
    width: 22px;
    height: 22px;
  }

  .s7-still {
    font-size: 28px;
  }

  /* ── SECTION 8 ───────────────────────────────────── */
  .s8 {
    padding: 40px 16px 32px;
  }

  .vote-bar-row {
    grid-template-columns: 12px 68px 1fr 36px;
    gap: 5px;
    margin-bottom: 5px;
    padding: 3px 0;
  }

  .vote-city-name {
    font-size: 12px;
  }

  .vote-bar-track {
    height: 4px;
  }

  .vote-count {
    font-size: 11px;
  }

  .city-grid {
    gap: 6px;
  }

  .city-pill {
    font-size: 12px;
    padding: 6px 12px;
  }

  /* ── FOOTER ──────────────────────────────────────── */
  #main-footer {
    padding: 48px 16px;
  }

  .footer-wordmark {
    font-size: 18px;
  }

  .footer-copy {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .phone-frame {
    transform: translateZ(0);
  }
}