/* ========================================
   ReadyUp — Responsive overrides
   Loaded LAST so it wins specificity vs source order.
   Three breakpoints: 1024 (tablet), 768 (mobile), 480 (small phone).
   Desktop styles remain untouched above 1024px.
   ======================================== */

/* ---------- Universal: prevent any horizontal scroll ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
.page { overflow-x: hidden; }

/* ============================================================
   BREAKPOINT 1: ≤ 1024px — tablets / small laptops
   Collapse 4-col grids to 2, ease padding, shrink the hero.
   ============================================================ */
@media (max-width: 1024px) {

  /* ---- Nav ---- */
  .nav { padding: 16px 32px; }
  .nav-links { gap: 20px; }

  /* ---- Sections ---- */
  .section { padding: 64px 32px; }
  .section-head { margin-bottom: 40px; }

  /* ---- Hero ---- */
  .heroM3 { padding: 40px 32px; }
  .heroM3-title-block { gap: 32px; }
  .heroM3-thread-inline { width: 380px; }
  .heroM3-bot {
    grid-template-columns: 1fr auto;
    gap: 32px;
  }
  .heroM3-cta { grid-column: 1 / -1; }

  /* ---- Platforms: 4 → 2 ---- */
  .platforms { grid-template-columns: repeat(2, 1fr); }

  /* ---- Roadmap: 4 → 2 ---- */
  .roadmap { grid-template-columns: repeat(2, 1fr); }
  .roadmap-col:nth-child(2) { border-right: none; }
  .roadmap-col:nth-child(1),
  .roadmap-col:nth-child(2) { border-bottom: 1px solid var(--line); }

  /* ---- Commands: tighten the fixed first column ---- */
  .command {
    grid-template-columns: 180px 1fr auto;
    gap: 20px;
    padding: 18px 22px;
  }

  /* ---- Footer ---- */
  .footer { padding: 56px 32px 28px; }
  .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 24px; }
}

/* ============================================================
   BREAKPOINT 2: ≤ 768px — mobile
   Everything stacks. Single column. Hero compacts dramatically.
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Nav: hide secondary links, keep brand + CTA ---- */
  .nav {
    padding: 14px 20px;
    gap: 12px;
  }
  .nav-links { display: none; }
  .nav-brand { font-size: var(--t-md); gap: 10px; }
  .nav-brand img { height: 22px; }
  .nav-right { gap: 8px; }
  .nav-cta {
    padding: 8px 14px;
    font-size: var(--t-xs);
  }
  .theme-toggle { width: 32px; height: 32px; }

  /* ---- Sections ---- */
  .section { padding: 48px 20px; }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }
  .section-title {
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1;
  }
  .section-sub { font-size: var(--t-base); max-width: none; }

  /* ---- Hero (HeroM3) ---- */
  .heroM3 { padding: 32px 20px; gap: 24px; }
  .heroM3-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .heroM3-coords,
  .heroH-coords { font-size: 10px; gap: 12px; flex-wrap: wrap; }
  .heroM3-mid { padding: 16px 0; }
  .heroM3-title-block {
    flex-direction: column;
    gap: 28px;
    align-items: stretch;
  }
  .heroM3-title {
    text-align: left;
    font-size: clamp(44px, 11vw, 64px);
    line-height: 0.95;
    letter-spacing: -0.03em;
  }
  .heroM3-thread-inline {
    width: 100%;
    max-width: 100%;
    padding: 16px;
  }
  .heroM3-bot {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px;
    margin-top: 24px;
  }
  .heroM3-bot-left { gap: 16px; }
  .heroM3-desc { font-size: var(--t-md); }
  .heroM3-platforms {
    flex-wrap: wrap;
    gap: 12px;
  }
  .heroM3-platforms-label {
    width: 100%;
    border-right: none;
    padding-right: 0;
    margin-right: 0;
    margin-bottom: 4px;
  }
  .heroM3-meta { gap: 24px; }
  .heroM3-meta-value { font-size: var(--t-lg); }
  .heroM3-cta .nav-cta {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
  }

  /* ---- Divider ---- */
  .divider { padding: 32px 20px; height: 80px; }
  .divider-mark {
    padding: 8px 16px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  /* ---- Features: 2 → 1 ---- */
  .features { grid-template-columns: 1fr; }
  .feature {
    padding: 28px 22px;
    min-height: auto;
  }
  .feature-title { font-size: var(--t-xl); }

  /* ---- Platforms: 2 → 1 ---- */
  .platforms { grid-template-columns: 1fr; gap: 12px; }
  .platform { padding: 22px 20px; }

  /* ---- Commands: stack each row ---- */
  .command {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 20px;
    align-items: flex-start;
  }
  .command-cmd {
    font-size: var(--t-sm);
    word-break: break-word;
  }
  .command-tag {
    align-self: flex-start;
    font-size: 10px;
  }

  /* ---- Roadmap: 2 → 1 (vertical timeline) ---- */
  .roadmap { grid-template-columns: 1fr; }
  .roadmap-col {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 24px 20px;
    min-height: auto;
  }
  .roadmap-col:last-child { border-bottom: none; }

  /* ---- FAQ ---- */
  .faq-item {
    padding: 18px 18px;
    grid-template-columns: 32px 1fr;
    gap: 12px;
  }
  .faq-q { font-size: var(--t-md); gap: 12px; }
  .faq-a { font-size: var(--t-sm); }
  .faq-num { font-size: 10px; padding-top: 4px; }
  .faq-toggle { width: 24px; height: 24px; font-size: 14px; }
  .faq-item.open .faq-a { max-height: 600px; } /* allow longer answers */

  /* ---- Footer ---- */
  .footer {
    padding: 48px 20px 24px;
    gap: 32px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    max-width: none;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    font-size: 10px;
  }
  .footer-bottom-end { gap: 16px; flex-wrap: wrap; }

  /* ---- Konami easter-egg overlay (rare but make sure it fits) ---- */
  .konami-title { font-size: 48px; }
  .konami-sub { font-size: 14px; }

  /* ---- Disable expensive backdrop-filter on mobile (perf) ---- */
  .heroM3-thread-inline,
  .heroM2-thread-frame,
  .heroM4-thread-card,
  .heroH1-thread,
  .heroH5-thread-side {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-1);
  }
}

/* ============================================================
   BREAKPOINT 3: ≤ 480px — small phones
   Final tightening for phones at the iPhone SE / small Android end.
   ============================================================ */
@media (max-width: 480px) {

  .nav { padding: 12px 16px; }
  .nav-cta { padding: 7px 12px; }

  .section { padding: 40px 16px; }
  .section-title { font-size: clamp(28px, 9vw, 38px); }

  .heroM3 { padding: 24px 16px; }
  .heroM3-title { font-size: clamp(38px, 11vw, 52px); }
  .heroM3-thread-inline { padding: 14px; }
  .heroM3-meta {
    flex-direction: column;
    gap: 12px;
  }

  .divider { padding: 24px 16px; height: 64px; }

  .feature { padding: 24px 18px; }
  .feature-title { font-size: var(--t-lg); }

  .command { padding: 16px 18px; }

  .roadmap-col { padding: 22px 18px; }

  .faq-item {
    padding: 16px 16px;
    grid-template-columns: 28px 1fr;
    gap: 10px;
  }
  .faq-q { font-size: var(--t-base); }

  .footer { padding: 40px 16px 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 24px; }

  /* The grid background pattern is too dense on small screens */
  .page::before { background-size: 24px 24px; }
}

/* ============================================================
   Touch & motion preferences
   ============================================================ */

/* Defeat sticky hover on touch devices.
   Use explicit default values, NOT `inherit` — inherit pulls from the
   parent (which is translucent for .features) and makes cards see-through.
   Also exclude .faq-item.open so the expanded state survives the tap. */
@media (hover: none) {
  .feature:hover {
    background: var(--bg-1);
  }
  .platform:hover {
    background: var(--bg-1);
    border-color: var(--line);
    transform: none;
  }
  .command:hover {
    background: transparent;
  }
  .faq-item:hover:not(.open) {
    background: var(--bg-1);
    border-color: var(--line);
    transform: none;
  }
  .heroM4-thread-card:hover,
  .heroH1-thread:hover {
    transform: rotate(2deg) translateX(-32px);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}