/* ============================================================
       13. RESPONSIVE — TABLET (≤ 1024px)
       ============================================================ */
    @media (max-width: 1024px) {
      :root {
        --gutter: 40px;
        --section-pad-y: 48px;
      }

      /* Nav */
      .nav-links,
      .nav-cta,
      .nav-auth {
        display: none;
      }

      .nav-toggle {
        display: flex;
      }

      /* Hero */
      .hero-section {
        min-height: clamp(480px, 55vh, 560px);
      }

      .hero-heading {
        font-size: clamp(42px, 5vw, 60px);
        max-width: 660px;
      }

      html[lang="ja"] .hero-heading {
        font-size: clamp(27px, 3.25vw, 39px);
      }

      /* Features */
      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .feature-card {
        min-height: 360px;
      }

      /* Testimonials */
      .testimonials-grid {
        grid-template-columns: 1fr 1fr;
      }

      .testimonial-card:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        justify-self: center;
      }

      /* FAQ */
      .faq-layout {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .faq-heading-col .heading-2 {
        max-width: 100%;
      }

      /* Footer */
      .footer-inner {
        padding: 60px var(--gutter) 30px;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding-bottom: 50px;
      }

      .footer-brand-col {
        grid-column: 1 / -1;
      }

      .footer-brand-col p {
        max-width: 420px;
      }
    }

    /* ============================================================
       14. RESPONSIVE — MOBILE (≤ 767px)
       ============================================================ */
    @media (max-width: 767px) {
      :root {
        --gutter: 20px;
        --section-pad-y: 40px;
      }

      /* Hero */
      .hero-section {
        height: auto;
        min-height: 0;
        padding: 84px 0;
      }

      .hero-content {
        gap: 32px;
        transform: none;
      }

      .hero-heading {
        font-size: clamp(40px, 8vw, 52px);
        max-width: 100%;
      }

      html[lang="ja"] .hero-heading {
        font-size: clamp(26px, 5.2vw, 34px);
      }

      /* Intro */
      .intro-section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
      }

      .intro-heading-col {
        flex-basis: auto;
        border-right: none;
        padding-right: 0;
        padding-bottom: 0;
        transform: none;
        border-bottom: 1px solid var(--color-border-light);
        padding-bottom: 16px;
        width: 100%;
      }

      .intro-heading-col .heading-2 {
        max-width: 100%;
      }

      .intro-body-col {
        padding-left: 0;
        transform: none;
      }

      html[lang="en"] .intro-body-col p {
        white-space: normal;
      }

      /* Features */
      .features-grid {
        grid-template-columns: 1fr;
      }

      .feature-card {
        min-height: auto;
        padding: 32px 24px;
      }

      .feature-card li {
        max-width: 100%;
      }

      .feature-card .heading-3 {
        max-width: 100%;
      }

      /* Services */
      .services-grid {
        grid-template-columns: 1fr;
      }

      .service-card {
        height: 300px;
      }

      .service-card-overlay {
        padding: 24px;
      }

      /* Testimonials */
      .testimonials-grid {
        grid-template-columns: 1fr;
      }

      .testimonial-card:last-child {
        grid-column: auto;
        max-width: 100%;
        justify-self: auto;
      }

      .testimonial-card {
        padding: 32px 24px;
      }

      .testimonials-cta {
        min-height: 200px;
      }

      /* FAQ */
      .faq-item summary {
        padding: 16px 14px;
        gap: 16px;
      }

      .faq-copy {
        padding: 0 40px 18px 14px;
      }

      /* CTA */
      .cta-stripe {
        padding: 40px 20px;
      }

      /* Footer */
      .footer-inner {
        padding: 40px var(--gutter) 24px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 40px;
      }

      .footer-brand-col {
        grid-column: auto;
      }

      .footer-grid > :nth-child(3) {
        justify-self: start;
        width: auto;
      }

      .footer-brand-col p {
        max-width: 100%;
      }
    }

    /* ============================================================
       15. PRINT
       ============================================================ */
    @media print {
      .top-nav { position: static; }
      .hero-section { height: auto; min-height: 0; }
      .placeholder-img { background: #eee !important; }
    }