/* ============================================================
   Dasitaike — responsive.css
   Breakpoints:
   - mobile-large:  640px
   - tablet:        900px
   - desktop:       1100px
   - desktop-xl:    1400px
   ============================================================ */

/* <= 1100px : tablet landscape */
@media (max-width: 1100px) {
  .container { padding: 0 var(--sp-5); }
  .section { padding: var(--sp-8) 0; }
  .hero { padding: 110px 0 60px; min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero-visual { height: 480px; max-width: 540px; margin: 0 auto; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc {
    position: static;
    max-height: none;
    margin-bottom: var(--sp-6);
  }
  .legal-toc ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-4); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-col:last-child { grid-column: 1 / -1; padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
  .app-showcase { grid-template-columns: 1fr; }
  .app-showcase .phone { order: -1; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* <= 900px : tablet portrait */
@media (max-width: 900px) {
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn:not(.nav-toggle) { display: none; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .form .field-row { grid-template-columns: 1fr; }

  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .hero-stats .stat strong { font-size: 28px; }
  .hero-stats .stat span { font-size: 10px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col:last-child { grid-column: 1 / -1; padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
}

/* <= 640px : mobile */
@media (max-width: 640px) {
  :root {
    --sp-7: 40px;
    --sp-8: 48px;
    --sp-9: 64px;
  }
  .container { padding: 0 var(--sp-4); }
  .section { padding: var(--sp-7) 0; }
  .nav-logo .brand-text span { display: none; }
  .nav-logo img { width: 36px; height: 36px; }

  .hero { padding: 100px 0 50px; }
  .hero-content h1 { font-size: clamp(36px, 9vw, 56px); }
  .hero-stats { grid-template-columns: 1fr; gap: var(--sp-4); padding-top: var(--sp-4); }
  .hero-visual { height: 360px; }
  .hero-mascot.m1 { width: 160px; height: 160px; right: 20px; }
  .hero-mascot.m2 { width: 120px; height: 120px; right: 140px; }
  .hero-mascot.m3 { display: none; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col:last-child { border-top: 1px solid var(--c-line); padding-top: var(--sp-5); }

  .card { padding: var(--sp-5); }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .btn-lg { padding: 16px 28px; }

  .page-header { padding: 130px 0 50px; }
  .legal-toc ol { grid-template-columns: 1fr; }

  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom .legal { flex-wrap: wrap; justify-content: center; }

  .app-showcase { padding: var(--sp-5); }
  .app-showcase .phone { width: 220px; height: 440px; }

  .back-to-top { bottom: 16px; right: 16px; width: 42px; height: 42px; }
}

/* <= 420px : small phones */
@media (max-width: 420px) {
  .hero-actions { gap: var(--sp-2); }
  .legal-content table { font-size: 13px; }
  .legal-content th, .legal-content td { padding: var(--sp-2); }
}

/* Large desktops */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
  .display-1 { font-size: 104px; }
}