/* =====================================================================
   QuantsBroker — Neo-Brutalist Editorial · TUNE
   Loaded LAST. Right-sizes the (maximalist) type scale so nothing
   overflows or clips, and keeps the bold brutalist character.
   ===================================================================== */

/* ---- 1. Global type tokens (override styles.css :root) ---- */
:root {
  --t-hero: clamp(2.25rem, 1.1rem + 5.2vw, 4.5rem);   /* ~36px → ~72px (was up to 152px) */
  --t-h2:   clamp(1.8rem, 1.1rem + 3vw, 3.25rem);     /* ~29px → ~52px (was up to 88px)  */
  --t-h3:   clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); /* ~17px → ~20px                   */
  --t-body: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem); /* ~15px → ~17px                   */
}

/* ---- 2. Stop grids from overflowing on long unbreakable words ---- */
.hero__grid > *,
.api__grid > *,
.why__grid > *,
.playground__grid > * { min-width: 0; }

/* last-resort guard so a huge single word can never break the page */
.hero__title,
.section__title,
.cta__title { overflow-wrap: break-word; }

/* ---- 3. Component-level sizes that don't use the tokens ---- */
.hero__sub { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.18rem); max-width: 38ch; }

.section__lead { font-size: clamp(1rem, 0.97rem + 0.3vw, 1.15rem); }
.api__lead { font-size: clamp(1rem, 0.97rem + 0.3vw, 1.15rem); }

.stat__num { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.stat__num--text { font-size: clamp(1.05rem, 1rem + 1.1vw, 1.55rem); }

.cta__title { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem); }

.tier__name { font-size: clamp(1.45rem, 1rem + 1.6vw, 2rem); }
.tier__price { font-size: clamp(1.9rem, 1rem + 2.4vw, 2.7rem); }
.tier__price--word { font-size: clamp(1.55rem, 1rem + 1.8vw, 2.2rem); }

.step__no { font-size: clamp(1.9rem, 1rem + 2.6vw, 2.9rem); }

.marquee__track { font-size: clamp(1.1rem, 1rem + 1.3vw, 1.75rem); }
.assets__lead { font-size: clamp(1.2rem, 1rem + 1.5vw, 1.95rem); }

/* section-scoped overrides need matching specificity (.why .x = 0,2,0) */
.why .why__index { font-size: clamp(1.9rem, 1rem + 2.6vw, 2.9rem); }
.why .why__quote-text { font-size: clamp(1.5rem, 1rem + 2.8vw, 2.8rem); }

.trust__stat { font-size: clamp(1rem, 0.85rem + 1vw, 1.45rem); }

/* ---- 4. A touch less vertical air so sections feel less giant ---- */
:root { --section-y: clamp(3.25rem, 2.2rem + 4.5vw, 6.5rem); }

/* ---- 5. Sticker overlap fixes ----
   .compare__badge ("Winner") and .proof__stars use the base .sticker, which is
   position:absolute. With no offsets they drop out of flow and land on top of
   the text. Pin them back into their flex flow as compact in-line badges. */
.compare__col-head--qb .compare__badge {
  position: static;
  display: inline-grid;
  align-self: flex-start;
  margin-top: 0.55rem;
}
.proof .proof__stars {
  position: static;
  display: inline-grid;
  align-self: flex-start;
  margin: 0 0 0.9rem;
}

/* ---- 6. Pricing: "one-time" label needs a little breathing room ---- */
.tier__per { margin-left: 0.1ch; }

/* ---- 7. Float both ticker badges OUTSIDE the card so they never cover data ----
   They sit mostly above / below the card, kissing only the frame bars, not the
   live price grid. (mobile.css re-positions them for <=640px.) */
.sticker--api  { top: -60px; left: -16px; }
.sticker--only { bottom: -60px; right: -12px; }