/* Minisimnet — Tablet (≤1024) / Mobile (≤767) overrides.
   Selectors match React's serialized inline styles ("prop: value"); the
   unspaced form is kept as a fallback. !important is required to beat inline. */

[data-r="menu"] { display: none; }

@media (max-width: 1024px) {
  /* section padding */
  [style*="padding: 64px 48px"], [style*="padding:64px 48px"] { padding: 48px 24px !important; }
  [style*="padding: 48px 48px"], [style*="padding: 48px;"], [style*="padding:48px"] { padding: 32px 24px !important; }
  [style*="padding: 20px 48px"], [style*="padding:20px 48px"] { padding: 16px 24px !important; }
  [style*="padding: 16px 48px"], [style*="padding:16px 48px"] { padding: 14px 24px !important; }
  [style*="padding: 24px 48px"], [style*="padding:24px 48px"] { padding: 20px 24px !important; }
  [style*="padding: 32px;"], [style*="padding:32px"] { padding: 24px !important; }

  /* type scale */
  [style*="font-size: 64px"], [style*="font-size:64px"] { font-size: 44px !important; }
  [style*="font-size: 56px"], [style*="font-size:56px"] { font-size: 40px !important; }
  [style*="font-size: 40px"], [style*="font-size:40px"] { font-size: 30px !important; }
  [style*="font-size: 32px"], [style*="font-size:32px"] { font-size: 26px !important; }
  [style*="font-size: 28px"], [style*="font-size:28px"] { font-size: 24px !important; }

  /* layout */
  [style*="grid-template-columns: 280px"], [style*="grid-template-columns:280px"],
  [style*="grid-template-columns: 300px"], [style*="grid-template-columns:300px"] { grid-template-columns: 1fr !important; }
  [style*="min-height: 640px"], [style*="min-height:640px"] { min-height: 420px !important; }
  [style*="height: 440px"], [style*="height:440px"] { height: 320px !important; }
  [style*="height: 400px"], [style*="height:400px"] { height: 300px !important; }
  [style*="height: 360px"], [style*="height:360px"] { height: 280px !important; }
  [style*="gap: 48px"], [style*="gap:48px"] { gap: 32px !important; }
  [style*="width: 160px; height: 160px"], [style*="width:160px;height:160px"] { width: 120px !important; height: 120px !important; }

  /* header: nav becomes the hamburger menu from tablet down */
  header nav { display: none !important; }
  [data-r="menu"] { display: block !important; }
}

@media (max-width: 767px) {
  [style*="padding: 64px 48px"], [style*="padding:64px 48px"] { padding: 32px 16px !important; }
  [style*="padding: 48px 48px"], [style*="padding: 48px;"], [style*="padding:48px"] { padding: 24px 16px !important; }
  [style*="padding: 20px 48px"], [style*="padding:20px 48px"] { padding: 12px 16px !important; }
  [style*="padding: 16px 48px"], [style*="padding:16px 48px"] { padding: 12px 16px !important; }
  [style*="padding: 24px 48px"], [style*="padding:24px 48px"] { padding: 16px !important; }
  [style*="padding: 32px;"], [style*="padding:32px"] { padding: 20px !important; }
  [style*="padding: 24px;"], [style*="padding:24px"] { padding: 20px !important; }

  [style*="font-size: 64px"], [style*="font-size:64px"] { font-size: 34px !important; }
  [style*="font-size: 56px"], [style*="font-size:56px"] { font-size: 30px !important; }
  [style*="font-size: 40px"], [style*="font-size:40px"] { font-size: 26px !important; }
  [style*="font-size: 32px"], [style*="font-size:32px"] { font-size: 24px !important; }
  [style*="font-size: 28px"], [style*="font-size:28px"] { font-size: 22px !important; }
  [style*="font-size: 22px"], [style*="font-size:22px"] { font-size: 20px !important; }

  /* everything stacks */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="min-height: 640px"], [style*="min-height:640px"] { min-height: 300px !important; }
  [style*="height: 440px"], [style*="height:440px"],
  [style*="height: 400px"], [style*="height:400px"],
  [style*="height: 360px"], [style*="height:360px"] { height: 240px !important; }
  [style*="gap: 48px"], [style*="gap:48px"] { gap: 24px !important; }
  [style*="width: 160px; height: 160px"], [style*="width:160px;height:160px"] { width: 96px !important; height: 96px !important; }

  .btn { min-height: 48px !important; }
  [style*="justify-content: flex-end"], [style*="justify-content:flex-end"] { justify-content: flex-start !important; }

  /* floating LINE button gets out of the way */
  [style*="position: fixed"][style*="bottom: 32px"] { right: 16px !important; bottom: 16px !important; padding: 12px 16px !important; }
}