/* ─────────────────────────────────────────
   MOBILE STYLES
   Hamburger hidden on desktop by default.

   IMPORTANT: every page's own inline <style> block is declared AFTER
   this file's <link> in <head>, so at equal specificity the page's
   desktop rules win the cascade by source order alone. Every
   declaration inside the media query below therefore needs
   !important to reliably override the desktop styles — this isn't
   optional, it's required by how these pages are structured.

   Nav markup/JS is identical across every page, so the nav block below
   is shared; everything after it is grouped per-page to match each
   page's own <style> block (class names repeat across pages but their
   desktop values differ page to page).
   ───────────────────────────────────────── */

.hamburger-btn {
  display: none;
}

/* ── Navigation (shared across all pages) ──
   Two separate elements share the .nav-links class (nav-left, nav-right).
   Rather than overlay each as its own absolutely-positioned panel (which
   stacks them exactly on top of each other), nav becomes a wrapping flex
   container and each opened panel takes its own full-width row in normal
   flow, pushing page content down — no z-index/overlap issues possible.

   This breakpoint is deliberately much wider than the rest of the mobile
   layout below. The nav row carries a 248px logo, seven links and two
   buttons: measured with width:max-content it needs 1363px in English and
   1371px in Japanese. Below that the row doesn't overflow, it squeezes,
   and every single link wraps mid-label ("Who We / Serve", "導入をご検討
   の方 / へ"). Handing those widths to the hamburger avoids that entirely.
   Everything else in this file still starts at 768px.

   Hence 1380px, not a rounder 1200px: at 1200 the most common laptop width
   (1280) would still be showing the squeezed, wrapping row. */
@media (max-width: 1380px) {

  nav { flex-wrap: wrap !important; }

  .nav-links {
    display: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    background-color: #FFFFFF !important;
    padding: 20px 24px !important;
    gap: 18px !important;
    border-top: 1px solid rgba(10,30,58,0.1) !important;
    box-sizing: border-box !important;
  }

  .nav-links.open { display: flex !important; }
  .nav-left, .nav-right { margin-left: 0 !important; }
  .nav-right { width: 100% !important; }
  .nav-right .lang-btn, .nav-right .demo-btn { width: 100% !important; }

  .hamburger-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
  }

  .hamburger-btn span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background-color: #5B9BD5 !important;
    border-radius: 2px !important;
    transition: transform 0.22s ease, opacity 0.22s ease !important;
  }

  .hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .hamburger-btn.open span:nth-child(2) { opacity: 0 !important; }
  .hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
}

@media (max-width: 768px) {

  /* ── Disable scroll snap / full-screen section lock, if present ── */
  html { scroll-snap-type: none !important; }
  section { scroll-snap-align: none !important; min-height: 0 !important; }

  /* Nav shrinks further once the viewport is genuinely phone-sized; the
     hamburger itself is already in place from the 1200px block above. */
  nav { padding: 14px 20px !important; }

  .logo, .logo-hover {
    height: 40px !important;
  }

  /* ═══════════════════════════════════════
     INDEX.HTML
     ═══════════════════════════════════════ */

  .hero {
    background-image: url('images/mobile_background.png') !important;
    height: 100svh !important;
    min-height: 0 !important;
    padding: 60px 20px 48px !important;
    gap: 16px !important;
    overflow: hidden !important;
  }

  .hero h1 { font-size: 34px !important; line-height: 1.2 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  .lang-ja .hero h1 { font-size: 30px !important; }

  .cta-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 300px !important;
  }

  .btn-primary, .btn-ghost { width: 100% !important; text-align: center !important; }

  .intro-budde { padding: 40px 20px 24px !important; }
  .intro-budde h2 { font-size: 28px !important; margin-bottom: 24px !important; }
  .lang-ja .intro-budde h2 { font-size: 25px !important; }
  .intro-subheading { margin-bottom: 24px !important; }
  .intro-statement { font-size: 19px !important; }
  .stats-section { padding: 48px 20px !important; }
  .stat-row { padding: 32px 0 !important; }
  .stats-section .stat-number { font-size: 44px !important; }

  .hiw-teaser { padding: 32px 20px !important; }
  .hiw-heading { font-size: 26px !important; }
  .hiw-steps { grid-template-columns: 1fr !important; gap: 16px !important; }

  .before-after { padding: 32px 20px 48px !important; }
  .before-after h2 { font-size: 26px !important; }

  .ba2-grid { grid-template-columns: 1fr !important; row-gap: 20px !important; }
  .ba2-card { padding: 20px !important; }
  .ba2-hub { padding: 4px 0 !important; }
  .ba2-hub-arrow { display: none !important; }
  .ba2-chaos-cluster { width: 100% !important; max-width: 300px !important; }

  /* The three quote bubbles are absolutely positioned at fixed left offsets
     inside the cluster and set to white-space: nowrap, so the widest one
     (155px + its own width) runs off a 320px screen. Pulling the offsets in
     and letting the text wrap keeps the scattered look without the overflow. */
  .ba2-quote { white-space: normal !important; max-width: 150px !important; }
  .ba2-quote.q1 { left: 60px !important; }
  .ba2-quote.q2 { left: 110px !important; }
  .ba2-quote.q3 { left: 75px !important; }

  .final-cta { padding: 60px 20px !important; }
  .final-cta::before { width: 500px !important; height: 260px !important; }
  .cta-inner { grid-template-columns: 1fr !important; gap: 0 !important; }
  .final-cta h2 { font-size: 30px !important; }
  .cta-sub { max-width: none !important; white-space: normal !important; }
  .cta-btn-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 300px !important;
  }
  .btn-ghost-cta { text-align: center !important; }
  .cta-right { display: none !important; }

  .footer {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 24px 20px !important;
    text-align: center !important;
  }
  .footer-links { flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
  .footer-links a { font-size: 11px !important; white-space: nowrap !important; }

  /* ═══════════════════════════════════════
     SHARED PAGE HEADER
     (who-we-serve, team, traction, product-story, how-it-works, privacy —
     contact/demo have their own zero-bottom-padding variant just below)
     ═══════════════════════════════════════ */

  .page-header { padding: 40px 20px 20px !important; }
  .page-header h1 { font-size: 30px !important; }
  .lang-ja .page-header h1 { font-size: 27px !important; }
  .page-header p { font-size: 14px !important; }

  /* ═══════════════════════════════════════
     WHO-WE-SERVE.HTML
     ═══════════════════════════════════════ */

  .cards-section { padding: 0 20px 48px !important; }
  .cards-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* ═══════════════════════════════════════
     TEAM.HTML
     ═══════════════════════════════════════ */

  .section-header { padding: 32px 20px 24px !important; }
  .section-header h2 { font-size: 26px !important; }
  .team-section { padding: 0 20px 48px !important; }

  .founders-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .advisors-list { grid-template-columns: 1fr !important; gap: 16px !important; }
  .advisor-row:last-child:nth-child(odd) { width: 100% !important; margin: 0 !important; }

  .founder-card, .advisor-row {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    min-height: 0 !important;
  }
  .photo-circle { margin: 0 auto 12px !important; }
  .founders-grid .photo-circle { width: 96px !important; height: 96px !important; }
  .advisors-list .photo-circle { width: 80px !important; height: 80px !important; }

  /* ═══════════════════════════════════════
     CONTACT.HTML & DEMO.HTML
     ═══════════════════════════════════════ */

  .hdr-sm .page-header { padding: 24px 20px 0 !important; }

  .contact-section,
  .demo-section {
    grid-template-columns: 1fr !important;
    padding: 24px 20px 48px !important;
    gap: 24px !important;
  }

  /* Two separate reasons these cards ran past a 320px viewport. They are
     content-box, so the padding below is added on top of the width the grid
     track hands them; and as grid items their automatic minimum is min-content,
     which "takagawa_yusuke@odysseyai.jp" — one unbreakable token — sets to
     ~256px. border-box + min-width:0 lets the track shrink, and the wrap rule
     lets the address itself break rather than poke out of the card. */
  .contact-info, .demo-info,
  .contact-form-wrapper, .demo-form-wrapper {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .contact-info a, .demo-info a { overflow-wrap: anywhere !important; }

  .contact-info, .demo-info { padding: 28px !important; }
  .contact-form-wrapper { padding: 24px !important; }
  .demo-form-wrapper { padding: 24px 24px 20px !important; }
  .form-row { grid-template-columns: 1fr !important; }

  /* ═══════════════════════════════════════
     TRACTION.HTML
     ═══════════════════════════════════════ */

  .traction { padding: 16px 20px 48px !important; }
  .traction h2 { font-size: 28px !important; }
  .traction-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .traction-photo-placeholder { min-height: 260px !important; }

  .logo-belt-track { gap: 32px !important; }
  .logo-belt-item.placeholder { width: 100px !important; }

  /* ═══════════════════════════════════════
     PRODUCT-STORY.HTML
     ═══════════════════════════════════════ */

  .why-now { padding: 16px 20px 24px !important; }
  .why-now-split-container { gap: 24px !important; }
  .why-now-left h2 { font-size: 26px !important; }
  .lang-ja .why-now-left h2 { font-size: 23px !important; }
  .intro-stat .stat-number { font-size: 42px !important; }

  .record-section { padding: 24px 20px 32px !important; }
  .record-section h2 { font-size: 26px !important; }
  .record-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .record-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  .sales-quality { padding: 24px 20px 32px !important; }
  .sales-quality h2 { font-size: 26px !important; }
  .sales-two-col { grid-template-columns: 1fr !important; gap: 32px !important; }

  .architecture { padding: 24px 20px 48px !important; }
  .arch-heading { font-size: 26px !important; }
  .outputs-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .arch-tagline { font-size: 15px !important; margin-top: 40px !important; }

  /* ═══════════════════════════════════════
     HOW-IT-WORKS.HTML
     ═══════════════════════════════════════ */

  .workflow { padding: 16px 20px 24px !important; }
  .workflow h2 { font-size: 26px !important; }
  .workflow-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .workflow-steps { grid-template-columns: 1fr !important; gap: 16px !important; min-width: 0 !important; }
  .workflow-photo-placeholder { min-width: 0 !important; padding: 24px 20px !important; }
  .budd-e-ticker {
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .ticker-center { flex: none !important; height: 190px !important; width: 100% !important; margin-left: 0 !important; }
  .ticker-list li { font-size: 1.15rem !important; } /* height stays 52px — JS rowHeight is coupled to it */

  .governance { padding: 24px 20px 48px !important; }
  .governance h2 { font-size: 26px !important; }
  .gov-track { display: none !important; }
  .gov-nodes { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* ═══════════════════════════════════════
     PRIVACY.HTML
     ═══════════════════════════════════════ */

  .privacy-body { padding: 0 20px 48px !important; }
  .privacy-section h2 { font-size: 18px !important; }

}
