/* fix07 — quality fixes on top of the approved redesign (no restyling). */

/* 1. Hero: the store note and the trust line sat on the globe's glow and dots.
      Give the copy room and push the globe a little lower; add a soft halo behind small text. */
.hero .stage { margin-top: clamp(40px, 5vw, 76px); }
.hero .stage__globe { top: -36px; }
.hero__store-note, .hero__trust {
  position: relative;
  text-shadow: 0 0 10px var(--bg), 0 0 18px var(--bg), 0 0 3px var(--bg);
}
@media (width <= 700px) {
  .hero .stage { margin-top: 28px; }
  .hero .stage__globe { top: 12%; }
}

/* 2. Section transitions: no hard bands or cut glows. */
/* dApp section: raised background fades in and out instead of a ruled band that ended
   in the middle of the stats row. */
.section.dapp {
  border-top: 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-raised) 20%, var(--bg-raised) 72%, var(--bg) 100%);
}
.stats[aria-label] { margin-top: 0; }
/* plans: the beam was clipped at the section's top edge, leaving a horizontal seam */
.plans-section .beam {
  -webkit-mask-image: linear-gradient(#0000 0%, #000 26%, #000 36%, #0000 95%);
  mask-image: linear-gradient(#0000 0%, #000 26%, #000 36%, #0000 95%);
}
/* closing CTA: rings and glow were cut by a ruled top edge */
.cta.cta { border-top: 0; }
.cta::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(320px, 45%);
  background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 0%, transparent));
  z-index: -1; pointer-events: none;
}

/* 3. Speed test tile: whole top of the app's Speedtest screen in idle state (no invented speeds),
      sized like a phone screen so the card is filled like its neighbours. */
.tile .vis-speed { place-items: center; padding: 14px 16px 0; }
.tile.tile--speed .vis-speed img[src] {
  -webkit-mask-image: none; mask-image: none;
  width: 100%; max-width: 258px; height: auto;
  border-radius: 22px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 40px -22px #000c;
}
@media (width <= 900px) { .tile.tile--speed .vis-speed img[src] { max-width: 300px; } }

/* 4. dApp Store button hidden on non-Android download page (btn sets display) */
a[data-dapp-link][hidden] { display: none !important; }

/* 5. Account: Google's own button sits in the same slot as our row buttons; transparent
      iframe background in dark theme (it painted a white box). */
.signin__gsi[data-gsi] { min-height: 44px; align-items: center; }
.signin__gsi iframe { color-scheme: light; }

/* 6. Account, narrow screens: invite link field collapsed in the stacked layout,
      and the empty payment history message was cut by the scrolling table. */
@media (width <= 680px) {
  .invite-link[data-invite] input[data-invite-url] { flex: none; height: 44px; }
}
.hist .table:has(tbody > tr[data-hist-empty]:only-child:not([hidden])) { min-width: 0; width: 100%; }
.hist .table:has(tbody > tr[data-hist-empty]:only-child:not([hidden])) thead { display: none; }

/* 7. Footer on phones: the Support column was too narrow, so "@PrismGuardSupportbot" and the
      e-mail broke mid-word. Product | Legal side by side, Support below at full width. */
@media (width <= 420px) {
  .site-footer__cols[data-astro-cid-jo6i4kqk] > div:nth-child(2) { grid-column: 1 / -1; order: 3; }
}

/* 8. Hero floating badges must not cover text on the phone screens. Desktop: above the side phones;
      phone layout: over the globe artwork, clear of "PROTECTED", the mode chip and the server row. */
.stage .stage__center .float-chip--a { top: 0; }
.stage .stage__center .float-chip--b { top: -2%; }
@media (701px <= width <= 1200px) {
  .stage .stage__center .float-chip--b { right: -86%; }
}
@media (width <= 700px) {
  .stage .stage__center .float-chip--a { top: 9%; }
  .stage .stage__center .float-chip--b { top: 33%; }
}