/* =====================================================================
   QuantsBroker — Neo-Brutalist Editorial · MOBILE & TABLET
   Loaded LAST. Phone/tablet layout polish + safe performance touches.
   ===================================================================== */

/* ---------- TABLET (760–1024px): keep pricing 3-up ----------
   The base layout jumps from 3-col (>860) to a 460px-capped single column,
   so tablets got the cramped phone view with big empty side margins. */
@media (min-width: 760px) and (max-width: 1024px) {
  .tiers {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.7rem, 1.4vw, 1.2rem);
    max-width: none;
  }
  .tiers > .tier { min-width: 0; }
  .tier { padding: clamp(1.05rem, 1.8vw, 1.55rem); }
  .tier__price { font-size: clamp(1.7rem, 3.1vw, 2.3rem); }
  .tier__per { display: block; margin-top: 0.12rem; }   /* "one-time" on its own line, no mid-word break */
}

/* ---------- PHONES (<760px): full-width single-column pricing ----------
   lift the 460px cap that left big empty gaps on mid-size phones */
@media (max-width: 759px) {
  .tiers { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* ---------- MOBILE: keep corner stickers fully on-screen ---------- */
@media (max-width: 640px) {
  /* hero badges — flush to the card so they never clip at the edge */
  .sticker--api  { top: -30px; left: -2px;  width: 58px; height: 58px; font-size: .58rem; padding: .28rem; }
  .sticker--only { bottom: -34px; right: -2px; width: 58px; height: 58px; font-size: .54rem; padding: .28rem; }

  /* "PLUG IN" badge on the blue Why card */
  .why .why__sticker { top: -.7rem; right: 0; }

  /* CTA "14-DAY LAUNCH" badge was overlapping the headline.
     Take it out of absolute flow and center it ABOVE the title. */
  .cta__inner { padding-top: clamp(2.25rem, 7vw, 3.25rem); }
  .sticker--launch {
    position: static;
    display: inline-grid;          /* centers via .cta__inner text-align:center */
    margin: 0 0 clamp(1rem, 4vw, 1.5rem);
    width: 90px; height: 90px;
    transform: rotate(-6deg);
  }
}

/* small phones — a touch smaller still */
@media (max-width: 400px) {
  .sticker--api, .sticker--only { width: 54px; height: 54px; }
}

/* ---------- PERF (safe, no visual change) ----------
   Drop the always-on compositor hint from every button (only useful during an
   actual animation), and skip rendering the footer until it's scrolled near. */
.btn { will-change: auto; }
.footer { content-visibility: auto; contain-intrinsic-size: auto 600px; }