/* Website-only: stable hero columns and a single, readable credit balance. */
.help-availability { margin: 1rem 0 0; line-height: 1.5; font-weight: 600; }
@media (min-width: 761px) {
  .home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
    align-items: center;
    column-gap: clamp(24px, 4vw, 64px);
    padding: 64px clamp(24px, 5vw, 80px) 96px;
  }
  .home-hero .hero-copy { min-width: 0; width: auto; max-width: 100%; margin: 0; padding: 0; }
  .home-hero .hero-copy h1 { font-size: clamp(48px, 5.4vw, 76px); line-height: 1; overflow-wrap: anywhere; }
  .home-hero .hero-copy h1 em {
    max-width: 100%; margin-top: 12px;
    font-size: clamp(28px, 3vw, 44px); line-height: 1.15; letter-spacing: -.035em;
    overflow-wrap: anywhere; hyphens: auto;
  }
  .home-hero .hero-quick-scanner { position: relative; inset: auto; width: 100%; min-width: 0; margin: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); row-gap: 32px; min-height: 0; padding-top: 48px; }
  .home-hero .hero-quick-scanner { max-width: 580px; }
}
.home-hero .hero-quick-scanner { padding: 24px; }
.home-hero .hero-quick-scanner__account {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
  margin: -24px -24px 21px; padding: 18px 20px;
  background: linear-gradient(115deg, #074497, #0966be);
}
.home-hero .hero-quick-scanner__account > span { display: grid; gap: 7px; min-width: 0; }
.home-hero .hero-quick-scanner__account > span > small {
  color: #e6f3ff; font-size: 11px; line-height: 1.4; letter-spacing: .035em; overflow-wrap: anywhere;
}
.home-hero .hero-quick-scanner__account > span > b { font-size: 26px; line-height: 1.15; }
.home-hero .hero-quick-scanner__account > span:has(> .sonic-search-credit-breakdown:not([hidden])) > b { display: none; }
.home-hero .hero-quick-scanner__account .sonic-search-credit-breakdown { display: grid; gap: 7px; max-width: none; margin: 0; }
.home-hero .hero-quick-scanner__account .sonic-search-credit-breakdown > span {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px;
}
.home-hero .hero-quick-scanner__account .sonic-search-credit-breakdown > span[hidden] { display: none; }
.home-hero .hero-quick-scanner__account .sonic-search-credit-breakdown small {
  color: #e6f3ff; font-size: 11px; line-height: 1.4; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere;
}
.home-hero .hero-quick-scanner__account .sonic-search-credit-breakdown b {
  color: #fff; font-size: 16px; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.home-hero .hero-quick-scanner__account .sonic-search-credit-breakdown [data-credit-item="available"] b {
  color: #ffe077; font-size: 26px;
}
.home-hero .hero-quick-scanner__account > button {
  min-height: 44px; padding: 10px 15px; font-size: 11px; line-height: 1.35; white-space: normal; max-width: 180px;
}
@media (max-width: 420px) {
  .home-hero .hero-quick-scanner__account { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home-hero .hero-quick-scanner__account > button { width: 100%; max-width: none; }
}

/* Website-only: theme may be selected on the app root, not on html. */
[data-theme="dark"] .home-hero .hero-quick-scanner {
  background: linear-gradient(145deg, #10243e, #0a192e);
  border-color: #385779;
  color: #f2f7ff;
  box-shadow: 0 22px 50px #00041285, inset 0 1px #ffffff0f;
}
[data-theme="dark"] .home-hero .hero-quick-scanner__heading h2 { color: #f2f7ff; }
[data-theme="dark"] .home-hero .hero-quick-scanner > p,
[data-theme="dark"] .home-hero .hero-quick-scanner label > span,
[data-theme="dark"] .home-hero .hero-quick-scanner__privacy { color: #bacde3; }
[data-theme="dark"] .home-hero .hero-quick-scanner__heading span,
[data-theme="dark"] .home-hero .hero-quick-scanner__heading small { color: #76c6ff; }
[data-theme="dark"] .home-hero .hero-quick-scanner input {
  color: #f2f7ff;
  background: #0d294a;
  border-color: #385779;
}
[data-theme="dark"] .home-hero .hero-quick-scanner input::placeholder { color: #91a9c4; opacity: 1; }
[data-theme="dark"] .home-hero .hero-quick-scanner input:focus {
  border-color: #76c6ff;
  box-shadow: 0 0 0 4px #76c6ff26;
}