/* Mobile layer over the Claude Design inline styles (they only know desktop). */
[data-burger] { display: none; }

/* Mobile menu: burger toggles html.nav-open; nav + CTAs become a full-screen sheet under the header. */
@media (max-width: 1100px) {
  header > div { flex-wrap: nowrap !important; }
  [data-burger] {
    display: block; position: relative; order: 2; width: 44px; height: 44px;
    margin: -12px -10px -12px auto; border: 0; background: none; cursor: pointer; color: #1e1d1b;
  }
  [data-burger]::before, [data-burger]::after {
    content: ""; position: absolute; left: 11px; width: 22px; height: 1.5px; background: currentColor;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  [data-burger]::before { top: 17px; }
  [data-burger]::after { top: 25px; }
  .nav-open [data-burger]::before { transform: translateY(4px) rotate(45deg); }
  .nav-open [data-burger]::after { transform: translateY(-4px) rotate(-45deg); }

  header nav, header > div > div {
    position: fixed; left: 0; right: 0; z-index: 49; background: #f3efe8;
    visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s .35s;
  }
  header nav {
    top: var(--hdr, 57px); bottom: 0; flex-direction: column; flex-wrap: nowrap !important; gap: 0 !important;
    padding: 24px 20px 180px; overflow-y: auto;
    font: 400 32px/1.15 'Caladea', 'Cambria', serif !important; letter-spacing: 0 !important; text-transform: none !important;
  }
  header nav a {
    padding: 16px 0 !important; border: 0 !important; border-bottom: 1px solid #d9d2c6 !important;
    opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  }
  header > div > div {
    bottom: 0; z-index: 50; display: grid !important; grid-template-columns: 1fr; gap: 10px !important;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid #e3dccf;
  }
  header > div > div > span { display: none; }
  header > div > div > a { text-align: center; padding: 16px !important; }

  .nav-open { overflow: hidden; }
  .nav-open header { backdrop-filter: none !important; background: #f3efe8 !important; }
  .nav-open header nav, .nav-open header > div > div { visibility: visible; opacity: 1; transition: opacity .35s ease; }
  .nav-open header nav a { opacity: 1; transform: none; }
  .nav-open header nav a:nth-child(2) { transition-delay: .05s; }
  .nav-open header nav a:nth-child(3) { transition-delay: .1s; }
  .nav-open header nav a:nth-child(4) { transition-delay: .15s; }
  .nav-open header nav a:nth-child(5) { transition-delay: .2s; }
}
@media (prefers-reduced-motion: reduce) {
  header nav, header nav a, header > div > div, [data-burger]::before, [data-burger]::after { transition: none !important; }
}
@media (max-width: 720px) {
  #faq > div { grid-column: auto !important; }
  #legal-body { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  #legal-body > nav { position: static !important; }
}
@media (max-width: 820px) {
  /* Four columns don't fit a phone; keep "outright" vs "AWAYO" side by side. */
  #compare table { min-width: 0 !important; font-size: 15px !important; }
  #compare th:nth-child(3), #compare td:nth-child(3) { display: none; }
  #compare td:first-child { white-space: normal !important; }
}

/* Keyboard focus: the export sets outline:none on inputs, so mark them with the bronze underline instead. */
:focus-visible { outline: 2px solid #8a6e4b; outline-offset: 3px; }
input:focus-visible, select:focus-visible { outline: none; border-bottom-color: #8a6e4b !important; box-shadow: 0 1px 0 #8a6e4b; }
input[type="checkbox"]:focus-visible { outline: 2px solid #8a6e4b; box-shadow: none; }

/* Home locations: 2 columns on tablets would orphan the 3rd card; let it span the row. */
@media (max-width: 999px) {
  #locations article:nth-child(3):last-child { grid-column: 1 / -1; }
}

/* Gate: keep the code field and ENTER above the fold on phones. */
@media (max-width: 600px) {
  main { padding: 28px 0 40px !important; gap: 32px !important; }
}

/* Screen-reader announcements from site.js */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}