/* Atomic first render: never expose bundled fallback content before D1 config is ready. */
html {
  background: #070707;
}
html:not(.app-ready) body {
  visibility: hidden;
}

/* First-view optimization: keep all three direct buttons visible on common mobile screens. */
@media (max-width: 600px) {
  .shell {
    padding-bottom: 72px;
  }
  header {
    height: 64px;
  }
  header button {
    width: 42px;
    height: 42px;
    right: 14px;
  }
  header nav {
    top: 57px;
  }
  .logo {
    font-size: 23px;
  }
  .ticker {
    height: 38px;
    padding: 0 12px;
    gap: 9px;
  }
  .ticker p {
    font-size: 11px;
  }
  .ticker > b {
    font-size: 21px;
  }
  .hero {
    height: clamp(270px, 42svh, 310px);
    min-height: 270px;
    margin: 8px 12px;
    padding: 21px 17px;
    border-radius: 17px;
  }
  .hero-copy {
    max-width: 68%;
  }
  .hero-copy small {
    font-size: 8.5px;
    letter-spacing: 1.6px;
  }
  .hero h1 {
    font-size: 30px;
    line-height: 0.94;
    margin: 10px 0 12px;
  }
  .hero-copy > p {
    font-size: 11.5px;
    line-height: 1.45;
    margin: 0;
  }
  .badges {
    margin-top: 14px;
    gap: 5px;
  }
  .badges b {
    padding: 5px 7px;
    font-size: 7.5px;
  }
  .phone {
    width: 122px;
    height: 245px;
    right: -3px;
    bottom: -42px;
    padding: 29px 9px;
    gap: 6px;
    border-width: 4px;
    border-radius: 23px;
  }
  .phone div {
    font-size: 11px;
  }
  .phone i {
    height: 40px;
    border-radius: 6px;
  }
  .actions {
    gap: 8px;
    padding: 3px 16px 12px;
  }
  .cta {
    min-height: 54px;
    border-radius: 14px;
    font-size: 14px;
    letter-spacing: 0.25px;
  }
  .cta b {
    right: 18px;
    font-size: 20px;
  }
  .bottom {
    height: 68px;
  }
  .bottom a {
    gap: 3px;
  }
  .bottom b {
    font-size: 10.5px;
  }
  .nav-icon,
  .nav-icon svg {
    width: 21px;
    height: 21px;
  }
}
@media (max-width: 380px), (max-height: 680px) {
  header {
    height: 58px;
  }
  .ticker {
    height: 34px;
  }
  .hero {
    height: 250px;
    min-height: 250px;
  }
  .hero h1 {
    font-size: 27px;
  }
  .hero-copy > p {
    font-size: 10.5px;
  }
  .badges {
    margin-top: 10px;
  }
  .actions {
    gap: 7px;
    padding-bottom: 9px;
  }
  .cta {
    min-height: 49px;
    font-size: 13px;
  }
  .bottom {
    height: 64px;
  }
}