/* ══════════════════════════════════════════════════════════
   Responsive — consolidated mobile-first breakpoints
   1120 → 1000 → 900 → 768 → 640 → 480 → 380
══════════════════════════════════════════════════════════ */

/* Global overflow-x guard (page-level) */
html, body { overflow-x: hidden; max-width: 100vw; }

/* ── ≤ 1120px: tighten wrap + nav pill padding ─────────── */
@media (max-width: 1120px) {
  .wrap { padding: 0 28px; }
  .nav-dd-btn { padding: 8px 10px; font-size: 13px; }
  .nav-menu   { gap: 0; }
}

/* ── ≤ 1000px: grids step down one column ──────────────── */
@media (max-width: 1000px) {
  .feat-grid { grid-template-columns: repeat(3, 1fr); }
  .ben-grid  { grid-template-columns: repeat(3, 1fr); }
  .prof-grid { grid-template-columns: repeat(2, 1fr); }
  .vid-grid  { grid-template-columns: repeat(2, 1fr); }

  #features, #benefits, #profiles, #world-real, #videos { padding: 80px 0; }
  .sec-header { margin-bottom: 44px; }

  .ss-inner { gap: 40px; padding: 0 28px; }
  .ss-step-h2 { font-size: clamp(24px, 3vw, 34px); }

  .wr-card { padding: 36px 32px; }
  .wr-motor-col { padding: 0 18px; }
  .wr-vault-layout { grid-template-columns: 1fr 200px 1fr; gap: 18px; }
}

/* ── ≤ 900px: hamburger on, scroll-story single col,
            vault stacks, benefits 3→2, pricing 3→2 ──── */
@media (max-width: 900px) {
  /* Nav → mobile mode */
  .nav-hamburger { display: flex; }
  .nav-menu      { display: none; }
  .nav-actions   { margin-left: auto; }

  /* Hero text */
  #hero-text { padding: 72px 0 64px; }

  /* Sell strip — stack vertically */
  #sell-strip { padding: 24px 0; min-height: 0; }
  .sell-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sell-logo-img { height: 52px; }
  .sell-tagline, .sell-desc { max-width: 100%; }

  /* Scroll-story → single column, hide the mockup on the right */
  .ss-inner { grid-template-columns: 1fr; gap: 32px; padding: 0 20px; }
  .ss-right { display: none; }
  .ss-sticky { padding: 48px 0 32px; }
  .ss-left  { min-height: unset; }

  /* Grids */
  .ben-grid     { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }

  /* World-real vault stacks; boxes wrap in a row */
  .wr-vault-layout { grid-template-columns: 1fr; gap: 28px; }
  .wr-vault-col    { flex-direction: row; flex-wrap: wrap; }
  .wr-vbox         { flex: 1 1 240px; }
}

/* ── ≤ 768px: slimmer nav, 2-col grids, modal tightens ── */
@media (max-width: 768px) {
  :root { --nav-h: 58px; }

  .wrap { padding: 0 20px; }
  .nav-logo-icon { height: 32px; }
  .nav-inner { padding: 8px 0; }

  /* Section padding */
  #features, #benefits, #profiles, #world-real, #pricing, #videos { padding: 64px 0; }
  #cta-final { padding: 72px 0; }
  #hero-text { padding: 56px 0 48px; }
  .cta-box   { padding: 44px 24px; }

  /* Hero video — shorter section so contained video doesn't leave huge gaps */
  #hero-video { min-height: 70vh; }

  /* Grids */
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .prof-grid { grid-template-columns: repeat(2, 1fr); }

  /* Story */
  .ss-sticky { padding: 40px 0 32px; }
  .ss-inner  { padding: 0 20px; }

  /* Modal body tightens + scrollable at medium mobile sizes */
  .modal-box {
    padding: 28px 22px;
    max-height: 90dvh; max-height: 90vh;
    overflow-y: auto;
  }

  /* Touch-friendly inputs (Apple/Android HIG ≥44px) */
  .pay-field { padding: 12px 14px; font-size: 15px; min-height: 44px; }
  .phone-country { height: 46px; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* World-real stair heights trim */
  .wr-card { padding: 32px 24px; }
  .wr-motor-col { padding: 0 12px; }
  .wr-stair-item[data-stair="1"] { min-height: 180px; }
  .wr-stair-item[data-stair="2"] { min-height: 260px; }
  .wr-stair-item[data-stair="3"] { min-height: 320px; }
}

/* ── ≤ 640px: single-column everywhere, story → carousel ─ */
@media (max-width: 640px) {
  :root { --nav-h: 56px; }

  .nav-logo-icon { height: 28px; }
  .nav-inner { padding: 6px 0; gap: 8px; }
  .nav-login { display: none; }
  .nav-actions .btn-amber { padding: 9px 14px; font-size: 13px; }

  /* All grids → 1 col */
  .feat-grid    { grid-template-columns: 1fr; }
  .ben-grid     { grid-template-columns: 1fr; }
  .prof-grid    { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .vid-grid     { grid-template-columns: 1fr; }

  /* Section padding */
  #features, #benefits, #profiles, #world-real, #pricing, #videos { padding: 56px 0; }
  #cta-final { padding: 64px 0; }
  .sec-header { margin-bottom: 36px; }

  .sell-logo-img { height: 44px; }

  /* World-real: stack everything */
  .wr-card { padding: 28px 20px; }
  .wr-motor-layout { grid-template-columns: 1fr; gap: 24px; }
  .wr-motor-col    { padding: 0; }
  .wr-motor-inf    { padding: 0; justify-content: flex-start; }
  .wr-motor-sep    { display: none; }
  .wr-vs-layout    { grid-template-columns: 1fr; gap: 16px; }
  .wr-vs-arrow     { transform: rotate(90deg); }
  .wr-stairs-layout { flex-direction: column; align-items: stretch; }
  .wr-stair-item[data-stair="1"],
  .wr-stair-item[data-stair="2"],
  .wr-stair-item[data-stair="3"] { min-height: 0; }
  .wr-vault-col { flex-direction: column; }
  .wr-orbit-wrap { width: 170px; height: 170px; }
  .wr-orbit-node {
    top:  calc(50% + 66px * sin(var(--oa)));
    left: calc(50% + 66px * cos(var(--oa)));
  }
  .wr-hub-node {
    top:  calc(50% + 66px * sin(var(--oa)));
    left: calc(50% + 66px * cos(var(--oa)));
    width: 32px; height: 32px;
  }

  /* Scroll-story tighter at ≤640 + enable touch-pan on the step container */
  .ss-inner { display: block; padding: 0 20px; }
  .ss-left  { touch-action: pan-y; }
  .ss-sticky { padding: 40px 0 28px; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner > *:last-child { justify-self: start; }

  /* Modal stacks 2-col rows */
  .pay-row { grid-template-columns: 1fr; }
}

/* ── ≤ 480px: compact phones ───────────────────────────── */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }

  /* Nav: keep CTA visible but very compact, ensure it never overflows */
  .nav-inner { gap: 6px; }
  .nav-logo { margin-right: 4px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-amber { padding: 8px 12px; font-size: 12px; }

  /* Hero */
  .hv-title  { font-size: clamp(34px, 10vw, 52px); }
  .hv-sub    { font-size: 15px; }
  .hv-content { padding: 48px 20px; }
  #hero-text { padding: 48px 0 40px; }
  #hero-video { min-height: 60vh; }

  /* Section titles shrink */
  .ttl  { font-size: clamp(28px, 7.5vw, 42px); }
  .lead { font-size: 14px; }

  /* Card padding */
  .feat-card, .ben-card, .prof-card { padding: 20px 18px; }

  /* Modal → bottom-sheet, respects dynamic viewport height (keyboard aware) */
  .modal-overlay { align-items: flex-end; }
  .modal-box {
    max-width: 100%;
    width: 100%;
    border-radius: var(--r2) var(--r2) 0 0;
    margin-top: auto;
    max-height: 92dvh;
    max-height: 92vh; /* fallback */
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Form inputs: 16px font-size prevents iOS auto-zoom on focus */
  .pay-field { padding: 12px 14px; font-size: 16px; min-height: 48px; }
  .pay-modal h2 { font-size: 18px; }
  .phone-country { padding: 0 10px; font-size: 14px; height: 48px; }
  .pay-label { font-size: 13px; }

  /* Submit button: bigger touch target on mobile */
  #lead-submit-btn, .ent-submit-btn { padding: 16px !important; font-size: 15px !important; min-height: 52px; }

  /* CTA */
  .cta-box { border-radius: var(--r2); padding: 36px 20px; }

  /* Pricing */
  .pricing-card { padding: 20px 16px; }

  /* Footer */
  #footer { padding: 56px 0 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* World-real compact */
  .wr-card-title { font-size: 18px; }
  .wr-orbit-wrap { width: 150px; height: 150px; }
  .wr-orbit-node,
  .wr-hub-node {
    top:  calc(50% + 58px * sin(var(--oa)));
    left: calc(50% + 58px * cos(var(--oa)));
  }

  /* Mobile drawer tighter */
  .nav-mobile-menu { padding: 12px 16px 32px; }
}

/* ── ≤ 380px: tiny phones (iPhone SE, Fold closed) ─────── */
@media (max-width: 380px) {
  .wrap { padding: 0 14px; }

  /* Nav: hide CTA, keep only logo + hamburger (CTA available inside drawer) */
  .nav-actions .btn-amber { display: none; }
  .nav-logo-icon { height: 26px; }

  .hv-title { font-size: clamp(30px, 10vw, 44px); }
  .ttl      { font-size: clamp(24px, 8vw, 36px); }

  .modal-box { padding: 20px 14px calc(20px + env(safe-area-inset-bottom)); }
  .wr-card   { padding: 24px 16px; }
  .wr-card-title { font-size: 17px; }

  /* Phone picker: hide +51 text label, keep flag + chevron */
  .phone-country #phone-code { display: none; }
}