/* Responsive access only: retain the original scene, typography and palette. */
@media (max-width: 1100px) {
  :root { --nav-h: 112px; }
  .nav {
    height: var(--nav-h);
    flex-wrap: wrap;
    align-content: center;
    gap: 4px 16px;
    padding-top: 6px;
    padding-bottom: 6px;
    background: var(--panel);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .nav .brand { min-height: 44px; }
  .nav-actions { margin-left: auto; gap: 8px; }
  .nav .lights, .nav .btn { min-height: 44px; height: auto; }
  .nav nav {
    display: block;
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .nav ul { gap: 24px; width: max-content; min-width: 100%; }
  .nav nav a { display: flex; align-items: center; min-height: 44px; white-space: nowrap; padding: 8px 2px; }
  .levels button, .switch, .form input, .form select, .form .btn { min-height: 44px; }
  .form input, .form select { min-width: 0; max-width: 100%; }
}
@media (max-width: 760px) {
  .nav { gap: 4px 8px; }
  .nav .brand { gap: 7px; }
  .nav .brand-word { font-size: 13px; }
  .nav .brand-mark { width: 22px; height: 22px; }
  .nav .lights { font-size: 10px; padding: 0 10px; }
  .nav .btn { font-size: 10px; padding: 0 12px; }
  .nav ul { gap: 22px; }
  .nav nav a { font-size: 10px; }
  .hero { min-height: max(760px, 100svh); }
  .hero-copy { top: calc(var(--nav-h) + 16px); }
  .hero-title { margin-bottom: 14px; }
  .hero-copy .lede {
    display: block;
    max-width: 420px;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--panel);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--rule);
    font-size: 13px;
    line-height: 1.55;
  }
  .hero-cta { display: flex; gap: 8px; width: fit-content; max-width: 100%; padding: 8px; background: var(--panel); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--rule); }
  .hero-cta .btn { min-height: 44px; height: auto; padding: 10px 12px; font-size: 10px; letter-spacing: .03em; }
  .panel, .plan-card, .credits { min-width: 0; }
  .form { min-width: 0; }
  .foot p, .credits dd { overflow-wrap: anywhere; }
}
@media (pointer: coarse) {
  .lights, .nav .btn, .levels button, .switch, .form input, .form select, .form .btn { min-height: 44px; }
}