/* Mobile reading and controls; desktop styles stay in the original stylesheets. */
.mobile-menu,
.mobile-contact-bar {
  display: none;
}

.landing-page {
  --header-h: calc(68px + env(safe-area-inset-top));
}
.landing-page .site-header {
  padding-top: env(safe-area-inset-top);
}
.contact-page .contact-header {
  padding-top: env(safe-area-inset-top);
}
.landing-page .wrap {
  padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right));
}
.contact-page .wrap {
  width: min(
    1120px,
    calc(100% - 2 * max(32px, env(safe-area-inset-left), env(safe-area-inset-right)))
  );
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: calc(80px + env(safe-area-inset-top));
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  .landing-page {
    --header-h: calc(64px + env(safe-area-inset-top));
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .landing-page .wrap {
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  }
  .landing-page .header-inner > .nav {
    display: none;
  }
  .landing-page .site-header {
    background: rgba(255, 255, 255, 0.96);
  }
  .landing-page .brand {
    min-height: 44px;
  }
  .mobile-menu {
    display: block;
    color: var(--blue-deep);
    font-size: 14px;
  }
  .mobile-menu summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding-inline: 8px;
    cursor: pointer;
    list-style: none;
    touch-action: manipulation;
  }
  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }
  .menu-lines {
    width: 20px;
    height: 10px;
    border-block: 2px solid currentColor;
  }
  .mobile-menu[open] .menu-lines {
    height: 2px;
    border-bottom: 0;
  }
  .mobile-menu nav {
    position: absolute;
    inset: calc(100% + 8px) max(16px, env(safe-area-inset-right)) auto
      max(16px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
    max-height: calc(100svh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(32, 80, 150, 0.12);
  }
  .mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-contact-bar {
    position: fixed;
    z-index: 45;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 -4px 24px rgba(32, 80, 150, 0.06);
  }
  .mobile-contact-bar > span {
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.5;
  }
  .landing-page .btn-orange {
    background: #b95a2a;
  }
  .mobile-contact-bar .btn {
    justify-content: center;
    flex-shrink: 0;
    min-height: 48px;
    padding: 12px 20px;
    box-shadow: none;
  }
  .landing-page .hero.scroll-film {
    --film-min-height: 520px;
    --film-height: max(calc(100svh - var(--header-h) - 80px), var(--film-min-height));
  }
  .landing-page .scroll-film-scene {
    height: auto;
    min-height: var(--film-height);
  }
  .landing-page .scroll-film .hero-grid {
    padding-block: 48px 80px;
  }
  .landing-page .scroll-film .hero-title {
    font-size: clamp(24px, 7.8vw, 40px);
    line-height: 1.45;
    letter-spacing: 0;
  }
  .landing-page .hero-title .line {
    white-space: normal;
  }
  .landing-page .scroll-film .hero-product {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.8;
  }
  .landing-page .scroll-film .hero-codesign {
    max-width: 360px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.8;
  }
  .landing-page .scroll-film .hero-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }
  .landing-page .scroll-film .hero-actions .btn {
    min-height: 52px;
    padding-inline: 32px;
  }
  .landing-page .link-wave {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .landing-page .scroll-film-hint {
    bottom: 24px;
    font-size: 14px;
    letter-spacing: 0;
  }
  .landing-page .section {
    padding-block: 80px;
    scroll-margin-top: 0;
  }
  .landing-page .section-head {
    margin-bottom: 32px;
  }
  .landing-page .section-title,
  .landing-page .section-customization .section-title {
    font-size: 28px;
    line-height: 1.5;
  }
  .landing-page .text-chunk {
    max-width: 100%;
  }
  .landing-page .section-lead,
  .landing-page .description,
  .landing-page .stage-cap,
  .landing-page .trust-item p {
    font-size: 16px;
    line-height: 1.9;
  }
  .landing-page .feature-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding-block: 32px;
  }
  .landing-page .editorial-no {
    grid-row: 1;
    font-size: 28px;
  }
  .landing-page .feature-card h3 {
    align-self: center;
    font-size: 20px;
  }
  .landing-page .feature-card .description,
  .landing-page .feature-card .feature-details {
    grid-column: 1 / -1;
  }
  .landing-page .feature-card .feature-details {
    margin-top: 4px;
    row-gap: 8px;
  }
  .landing-page .feature-details li,
  .landing-page .detail-option,
  .landing-page .support-label,
  .landing-page .example-label,
  .landing-page .example-result,
  .landing-page .accuracy-note,
  .landing-page .scenes-cap {
    font-size: 14px;
    line-height: 1.8;
  }
  .landing-page .support-card {
    padding-block: 32px;
  }
  .landing-page .support-card h3 {
    font-size: 20px;
    line-height: 1.5;
  }
  .landing-page .support-example {
    padding-left: 16px;
  }
  .landing-page .product-devices {
    padding-bottom: 48%;
  }
  .landing-page .showcase-phone {
    width: 48%;
    right: 0;
  }
  .landing-page .product-showcase figcaption span,
  .landing-page .brand-phone-demo figcaption span {
    font-size: 14px;
  }
  .landing-page .trust-item {
    gap: 16px;
  }
  .landing-page .contact-panel {
    padding: 48px 20px;
  }
  .landing-page :where(.contact-inner) > h2 {
    font-size: 28px;
    line-height: 1.5;
  }
  .landing-page .contact-step p {
    font-size: 14px;
    line-height: 1.8;
  }
  .landing-page .footer-nav {
    flex-wrap: wrap;
    gap: 8px 24px;
  }
  .landing-page .footer-nav a,
  .landing-page .brand-demo-reset,
  .landing-page .replay {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
  }
  .landing-page .brand-demo-reset[hidden] {
    display: none;
  }
  .contact-page {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }
  .contact-page .wrap {
    width: calc(100% - 2 * max(16px, env(safe-area-inset-left), env(safe-area-inset-right)));
  }
  .contact-page .contact-header {
    min-height: calc(72px + env(safe-area-inset-top));
    gap: 12px;
  }
  .contact-page .brand {
    font-size: 20px;
    min-height: 44px;
    gap: 8px;
  }
  .contact-page .back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
  }
  .contact-page .contact-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 32px 48px;
  }
  .contact-page h1 {
    font-size: 28px;
    line-height: 1.5;
  }
  .contact-page h1 br:first-of-type {
    display: inline;
  }
  .contact-page .intro-copy {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.8;
  }
  .contact-page .intro-wave {
    margin-block: 24px 0;
  }
  .contact-page .inquiry-panel {
    padding: 24px 16px;
    border-radius: 16px;
  }
  .contact-page .form-steps {
    gap: 8px;
    justify-content: space-between;
    font-size: 14px;
  }
  .contact-page .form-steps li {
    flex-direction: column;
    gap: 0;
  }
  .contact-page .form-steps li + li::before {
    display: none;
  }
  .contact-page h2,
  .contact-page .complete-panel h2 {
    font-size: 24px;
    line-height: 1.5;
  }
  .contact-page legend,
  .contact-page .field > label,
  .contact-page .topic-options span,
  .contact-page .review-list dd {
    font-size: 16px;
  }
  .contact-page .topic-options span {
    min-height: 52px;
    padding-left: 40px;
  }
  .contact-page .topic-options input {
    width: 20px;
    height: 20px;
  }
  .contact-page .field,
  .contact-page .office-field {
    margin-bottom: 24px;
  }
  .contact-page .field input,
  .contact-page textarea {
    min-height: 52px;
    padding: 12px;
    font-size: 16px;
  }
  .contact-page .field input::placeholder,
  .contact-page textarea::placeholder {
    font-size: 14px;
    color: var(--muted);
  }
  .contact-page .form-caption,
  .contact-page .required,
  .contact-page .optional,
  .contact-page .field-hint,
  .contact-page .form-notice,
  .contact-page .verification-label,
  .contact-page .review-list dt,
  .contact-page .office-limit,
  .contact-page .text-button {
    font-size: 14px;
    line-height: 1.8;
  }
  .contact-page .office-remove {
    min-width: 44px;
  }
  .contact-page .text-button {
    padding: 12px 8px;
  }
  .contact-page .primary-button {
    min-height: 56px;
    font-size: 16px;
    gap: 12px;
    padding-inline: 16px;
  }
  .contact-page .review-list > div {
    padding-block: 20px;
  }
  .contact-page .contact-footer {
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
  .contact-page .contact-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .hero-title .line > span {
    filter: none;
  }
  .landing-page .replay {
    display: none;
  }
}