/* ─────────────────────────────────────────
   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, and below the width it needs the row doesn't overflow, it
   squeezes — every link wraps mid-label ("Who We / Serve", "導入をご検討
   の方 / へ"). Handing that width to the hamburger avoids it entirely.
   Everything else in this file still starts at 768px.

   MEASURE ON index.html. Its nav is the widest of the ten pages, because its
   .demo-btn is the only one with a min-width; measuring anywhere else
   understates the requirement and silently puts Home into the squeezing band.
   With links at 16px/gap 24px in English and 15px/gap 18px in Japanese it
   needs 1371px and 1385px, so 1400px leaves 29px and 15px of slack.

   Japanese is always the binding side: the seven labels run ~50em wider than
   the English ones (導入をご検討の方へ alone is 18em against "Who We Serve"'s
   6em), so each 1px of link font-size costs ~50px of row width there against
   ~20px in English. Re-measure both languages after any change to a nav
   label, the link font-size, the gap, or the logo width.

   Hence 1400px, not a rounder 1200px: at 1200 the most common laptop width
   (1280) would still be showing the squeezed, wrapping row. 1400 keeps 1440px
   laptops — the next width up — on the full horizontal nav. */
@media (max-width: 1400px) {

  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; }
}

/* ── Mid-width safety net (tablet / narrowed desktop window) ──
   The phone rules below start at 768px, but the pages do not reach their
   stacked layout until 900–1000px, so between those two points a viewport got
   the hamburger nav with none of the narrow-layout protections. Measured
   overflow in that gap: how-it-works 229px, index 79px, product-story 132px,
   team 110px, demo 75px.

   Two distinct causes, both fixed here:

   1. Grid and flex items default to min-width:auto, i.e. they can never shrink
      below their own min-content. A nowrap ticker row or a content-box card
      with padding therefore pushes the whole section past the viewport instead
      of reflowing. min-width:0 (and border-box) lets them shrink.

   2. The hero runs at 60px/50px, sized for a ~1100px line. Because the hero is
      text-align:center, an over-wide line overflows BOTH edges — and the left
      half then sits at a negative x, where no amount of horizontal scrolling
      can reach it. On the Japanese home page that hid 84px of the headline.

   Only anti-overflow declarations belong here. Padding, gaps and the rest of
   the phone typography stay in the 768px block. */
@media (max-width: 1000px) {

  .workflow-steps,
  .workflow-photo-placeholder,
  .budd-e-ticker,
  .founder-card, .advisor-row,
  .contact-info, .demo-info,
  .contact-form-wrapper, .demo-form-wrapper { min-width: 0 !important; }

  .contact-info, .demo-info,
  .contact-form-wrapper, .demo-form-wrapper { box-sizing: border-box !important; }

  .hero h1 { font-size: 46px !important; }
  .lang-ja .hero h1 { font-size: 40px !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: 36px !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: 36px !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; }

}
