/* ==================================================
   VALBOOSTING · SHARED PAGE PRIMITIVES  (F3 redesign)
   Ported from EBLO F3 pages.css: inherits home-page.css tokens
   (red palette), League.otf path fixed, scaled x1.2.
   --- original ---
   ELOBOOSTLEAGUE · SHARED PAGE PRIMITIVES
   Used across FAQ, Reviews, About, Refund, Booster, Demo.
   Extends homepage.css (palette, type, header, footer, buttons).
   ================================================== */

/* League display face — matches the LoL Boosting subpage.
   Big titles + rank descriptions render in this across all pages. */
/* Display face is League (cream-compact). Keep the .vb-rd token (f3-tokens.css /
   home-page.css) authoritative; this :root copy only seeds non-.vb-rd fallbacks
   with the same stack so nothing reverts to the old Rajdhani. */
:root {
  --font-display: 'League', 'Oswald', 'Rajdhani', sans-serif;
}

/* ---------- PAGE HERO · Cream compact (cream bg + red diagonal wedge) ----------
   Mirrors the live boost hero (boost-page.css .vhero / .cc-slash): cream page
   bg + a red diagonal wedge bleeding off the right viewport edge. The copy sits
   left of the wedge on .page-hero-inner (z-index 2). CSS-only — no markup change. */
.page-hero {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(912px 528px at 88% -20%, rgba(255,70,85,0.10), transparent 60%),
    linear-gradient(160deg, #f6f3ec 0%, #efebe1 60%, #e9e4d8 100%);
  border-bottom: 1.2px solid #e4ded2;
}
.page-hero::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0; bottom: 0;
  left: 58%;
  right: min(-48px, calc(744px - 50vw));
  background: linear-gradient(135deg, var(--royal) 0%, var(--royal-deep) 100%);
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 36px 96px -40px rgba(255,70,85,0.5);
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0; bottom: 0;
  left: 58%;
  right: min(-48px, calc(744px - 50vw));
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);
  background-image: radial-gradient(rgba(255,255,255,0.14) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  opacity: 0.5;
  mask-image: linear-gradient(120deg, #000, transparent 78%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  /* match the nav / boost-page content box (1742.4px + 31.68px gutter) so the hero
     copy's left edge lines up with the nav logo on every explanation page (UI batch 5) */
  max-width: 1742.4px;
  margin: 0 auto;
  padding: 52.8px 31.68px 57.6px;
}
.page-hero.tight .page-hero-inner { padding: 40.8px 31.68px 45.6px; }
/* below the wedge the hero stacks; soften so the red panel becomes a top band */
@media (max-width: 760px) {
  .page-hero::before, .page-hero::after { left: -28.8px; right: -28.8px; top: -40px; bottom: auto; height: 96px; clip-path: polygon(0 0, 100% 0, 100% 64%, 0 100%); }
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 9.6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: calc(0.14em * var(--tracking));
  text-transform: uppercase;
  color: #8a8578;
  margin-bottom: 16.8px;
}
.crumbs a { transition: color 180ms ease; }
.crumbs a:hover { color: var(--royal); }
.crumbs svg { width: 13.2px; height: 13.2px; opacity: 0.5; }
.crumbs .cur { color: var(--royal); }

.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10.8px;
  margin-bottom: 14.4px;
}
.page-hero-tag {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking));
  text-transform: uppercase;
  color: #fff;
  background: var(--royal);
  padding: 4.8px 10.8px;
  border-radius: 2.4px;
}
.page-hero-eytext {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking));
  text-transform: uppercase;
  color: #8a8578;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 3.4vw, 55.2px);
  letter-spacing: -0.01em;
  line-height: 1.02;
  max-width: 18ch;
}
.page-hero h1 em { font-style: normal; font-weight: 700; color: var(--royal); }
.page-hero .page-lead {
  font-family: var(--font-body);
  font-size: clamp(16.8px, 1.4vw, 19.2px);
  font-weight: 400;
  color: #4a4e57;
  line-height: 1.5;
  max-width: 640px;
  margin-top: 16.8px;
}
.page-hero .page-lead em { font-style: normal; color: var(--ink); font-weight: 500; }

/* hero feats / pills row */
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9.6px;
  margin-top: 21.6px;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 9.6px;
  background: rgba(255,255,255,0.7);
  border: 1.2px solid #e4ded2;
  border-radius: var(--r);
  padding: 10.8px 15.6px;
  font-family: var(--font-ui);
  font-size: 12.6px;
  font-weight: 600;
  letter-spacing: calc(0.08em * var(--tracking));
  text-transform: uppercase;
  color: var(--ink);
  transition: background 200ms ease, border-color 200ms ease;
}
.hero-pill:hover { background: var(--royal-tint); border-color: var(--royal-soft); }
.hero-pill svg { width: 16.8px; height: 16.8px; color: var(--royal); }

.page-hero-rating { display: inline-flex; align-items: center; gap: 12px; margin-top: 19.2px; }
.page-hero-rating .tp-stars { display: flex; gap: 3.6px; }
.page-hero-rating .tp-star { color: #22b358; }
.page-hero-rating .tp-star svg { width: 18px; height: 18px; }
.page-hero-rating-text {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: calc(0.12em * var(--tracking));
  text-transform: uppercase;
  color: #8a8578;
}
.page-hero-rating-text em { font-style: normal; color: var(--ink); }

/* ---------- SECTION SHELL ---------- */
.page-section { padding: 76.8px 28.8px; }
.page-section.soft { background: var(--bg-soft); }
.page-section.tightpad { padding: 52.8px 28.8px; }

/* trustpilot stars helper (shared) */
.tp-stars { display: inline-flex; gap: 3.6px; color: #22b358; }
.tp-star svg { width: 19.2px; height: 19.2px; }
.tp-stars.gold { color: var(--gold-deep); }

/* ---------- PROSE (policy / article text) ---------- */
.prose { max-width: 912px; }
.prose p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 19.2px;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--royal); font-weight: 600; text-decoration: underline; text-underline-offset: 2.4px; text-decoration-thickness: 1.2px; }
.prose a:hover { color: var(--royal-deep); }
.prose h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 33.6px 0 12px;
}

/* ---------- CARD ---------- */
.surface-card {
  background: #fff;
  border: 1.2px solid var(--line);
  border-radius: calc(var(--r) + 2.4px);
  box-shadow: var(--shadow-soft);
}
.card-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking));
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- CONTACT / SUPPORT CALLOUT (dark band) ---------- */
.support-band {
  position: relative;
  background: var(--royal);
  color: #fff;
  overflow: hidden;
}
.support-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1.2px, transparent 1.2px);
  background-size: 19.2px 19.2px;
  mask-image: linear-gradient(120deg, rgba(0,0,0,0.55), transparent 72%);
  pointer-events: none;
}
.support-inner {
  position: relative;
  z-index: 1;
  max-width: 1584px;
  margin: 0 auto;
  padding: 52.8px 28.8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28.8px;
  flex-wrap: wrap;
}
.support-copy { display: flex; align-items: center; gap: 19.2px; }
.support-ico {
  width: 57.6px; height: 57.6px;
  flex-shrink: 0;
  border-radius: var(--r);
  background: rgba(255,255,255,0.08);
  border: 1.2px solid rgba(255,255,255,0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.support-ico svg { width: 26.4px; height: 26.4px; }
.support-band h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28.8px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.support-band p {
  font-size: 16.2px;
  color: rgba(255,255,255,0.7);
  margin-top: 3.6px;
}
.support-band .live-dot {
  display: inline-block;
  width: 8.4px; height: 8.4px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 7.2px;
  vertical-align: 1.2px;
}
.btn-live {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: #fff;
  box-shadow: 0 9.6px 36px -9.6px rgba(255, 122, 42, 0.5);
}
.btn-live:hover { transform: translateY(-1.2px); box-shadow: 0 14.4px 43.2px -9.6px rgba(255, 122, 42, 0.6); }

/* ---------- back to top ---------- */
.to-top {
  display: flex;
  justify-content: center;
  padding: 9.6px 0 0;
}
.to-top-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: calc(0.12em * var(--tracking));
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 9.6px;
}
.to-top-btn svg { width: 15.6px; height: 15.6px; transform: rotate(180deg); }
.to-top-btn:hover { color: var(--royal); }

/* ---------- reveal (frozen-clock safe, never stuck hidden) ---------- */
.rv { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rv.is-armed { opacity: 0; transform: translateY(19.2px); }
  .rv.is-in { opacity: 1; transform: none; transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
}

#tweaks-root { position: relative; z-index: 9999; }

/* ---------- small responsive ---------- */
@media (max-width: 864px) {
  .support-inner { flex-direction: column; align-items: flex-start; }
}

/* ==================================================
   FONT HIERARCHY CORRECTION
   League stays on the page hero + section headings + the CTA band; the in-article
   prose sub-heading reads as content, so it uses Barlow. Appended last to override
   the per-element --font-display at equal specificity.
   ================================================== */
.prose h3 { font-family: var(--font-body); }