/* App shell */
.feed {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

/* HUD — two rows: [back | badge | counter] then [progress bars] */
.hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 8px;
  padding: env(safe-area-inset-top, 10px) 16px 10px;
  background: linear-gradient(180deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.6) 80%, transparent 100%);
}

/* Top row: back button left · badge center · counter right */
.hud-top-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}

/* ← Dashboard back button */
.back-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: color 200ms, background 200ms, border-color 200ms;
  white-space: nowrap;
}
.back-btn:hover, .back-btn:active {
  color: var(--forest-bright);
  border-color: rgba(255,122,26,.45);
  background: rgba(255,122,26,.08);
}
.back-arrow { font-size: 14px; line-height: 1; }

/* FMGMINDS.COM badge — centered in top row */
.nm-watermark {
  font-size: 10px; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest-bright);
  border: 1px solid rgba(255,122,26,.45);
  background: rgba(255,122,26,.10);
  padding: 4px 14px; border-radius: 999px;
  box-shadow: 0 0 14px rgba(255,122,26,.18);
  pointer-events: none; user-select: none;
  position: absolute; left: 50%; transform: translateX(-50%);
}

/* Mute toggle button */
.mute-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  color: var(--ink);
  transition: background 180ms, border-color 180ms;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.mute-btn:hover, .mute-btn:active {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}

/* Progress bars — full width below top row */
.hud-bars { display: flex; gap: 4px; width: 100%; }
.hud-bars .seg {
  flex: 1; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.10);
  overflow: hidden; position: relative;
}
.hud-bars .seg.done { background: var(--forest-bright); box-shadow: 0 0 8px var(--orange-glow); }
.hud-bars .seg.active::after {
  content:""; position:absolute; inset:0; width:100%;
  background: var(--forest-bright); box-shadow: 0 0 8px var(--orange-glow);
  transform-origin: left; animation: fill 600ms var(--t-fast) forwards;
}
@keyframes fill { from { transform: scaleX(0);} to { transform: scaleX(1);} }

/* Track */
.track {
  flex: 1; position: relative; outline: none;
  touch-action: pan-y;
}

/* ── Slides ─────────────────────────────────────────────────────────────── */
.slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transform: translateY(8%);
  transition: opacity var(--t-med), transform var(--t-med);
  overflow: hidden;
}
.slide.active   { opacity: 1; transform: translateY(0); pointer-events: auto; }
.slide.prev     { opacity: 0; transform: translateY(-8%); }
.slide.dragging { transition: none; }

/* Question slide: pure crimson radial glow at top */
.slide.q-slide {
  background:
    radial-gradient(ellipse 150% 55% at 50% -10%, rgba(210,0,0,.38) 0%, transparent 68%),
    var(--bg);
}

/* Answer slide: dark neon green radial glow at bottom */
.slide.a-slide {
  background:
    radial-gradient(ellipse 150% 55% at 50% 110%, rgba(30,230,110,.22) 0%, transparent 68%),
    var(--bg);
}

/* ── Card body: stacked sections ─────────────────────────────────────────── */
.card-body {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  padding: clamp(72px,10vh,88px) 20px calc(clamp(64px,8vh,80px) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
}
.card-body::-webkit-scrollbar { display: none; }
.card-body::before { display: none; }

/* Top meta row: year badge + subject badges */
.top-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.year-chip {
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  color: var(--orange);
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(0,196,122,.35);
  background: rgba(0,196,122,.08);
}

/* ── Section cards — frosted panels, color-coded by type ─────────────────── */
.section {
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
  min-width: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 16px 18px;
  position: relative;
}

/* Question — neutral white left glow */
.section.question-section {
  border-left: 3px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.03);
  box-shadow: -4px 0 18px rgba(255,255,255,0.04), 0 2px 20px rgba(0,0,0,0.25);
}

/* Wrong answer — red tinted card */
.section.wrong-section {
  border-left: 3px solid rgba(220,0,0,0.55);
  background: rgba(220,0,0,0.05);
  box-shadow: -4px 0 18px rgba(220,0,0,0.12), 0 2px 20px rgba(0,0,0,0.25);
}

/* Where they went wrong — dimmer red */
.section.reason-section {
  border-left: 3px solid rgba(220,0,0,0.28);
  background: rgba(220,0,0,0.03);
  box-shadow: -4px 0 12px rgba(220,0,0,0.07), 0 2px 16px rgba(0,0,0,0.2);
}

/* Correct answer — green glow */
.section.correct-section {
  border-left: 3px solid rgba(77,255,136,0.55);
  background: rgba(77,255,136,0.04);
  box-shadow: -4px 0 18px rgba(77,255,136,0.12), 0 2px 20px rgba(0,0,0,0.25);
}

/* FMGE Insight — emerald brand glow */
.section.insight-section {
  border-left: 3px solid rgba(0,196,122,0.55);
  background: rgba(0,196,122,0.04);
  box-shadow: -4px 0 18px rgba(0,196,122,0.12), 0 2px 20px rgba(0,0,0,0.25);
}

/* Memory Lock — warm amber glow */
.section.memory-section {
  border-left: 3px solid rgba(255,180,50,0.55);
  background: rgba(255,180,50,0.04);
  box-shadow: -4px 0 18px rgba(255,180,50,0.12), 0 2px 20px rgba(0,0,0,0.25);
}

/* ── Section label — sits inside card as a small eyebrow ─────────────────── */
.section-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  display: inline-block;
  opacity: 0.7;
}
.section-label.red-lbl   { color: var(--red); opacity: 1; }
.section-label.green-lbl { color: var(--green); opacity: 1; }

/* Badge pill — ❌ WRONG ANSWER */
.section-label.badge-wrong {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(220, 0, 0, .14);
  border: 1px solid rgba(220, 0, 0, .50);
  color: #ff2222;
  letter-spacing: .8px;
  opacity: 1;
  text-shadow: 0 0 10px rgba(255,30,30,.90), 0 0 24px rgba(255,0,0,.50);
  box-shadow: 0 0 10px rgba(220,0,0,.25), 0 0 22px rgba(220,0,0,.12);
}

/* Badge pill — ✅ CORRECT ANSWER */
.section-label.badge-correct {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(77,255,136,.10);
  border: 1px solid rgba(77,255,136,.38);
  color: var(--green);
  letter-spacing: .8px;
  opacity: 1;
}

/* ── Typography tier 1: QUESTION ──────────────────────────────────────────
   Four tiers injected by JS based on question char length.
   Thresholds tuned for FMGE clinical vignettes (typically 150–400 chars):
     q-short  < 35 chars  — punchy factual recall
     q-med    35–90       — standard single-scenario question
     q-long   90–200      — full clinical vignette
     q-xlong  > 200       — extended clinical case / multi-statement
   NO line-clamp on question text — full question MUST always be readable.
   Card body is scrollable so nothing is ever hidden.                       */
.section-main {
  /* base — q-short (< 80 chars): factual recall, punchy */
  font-size: clamp(18px, 7vw, 38px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.02em;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  /* NO overflow:hidden, NO line-clamp — question must never be cut */
}
/* q-med (80–200 chars) — standard one-liner with some context */
.section-main.q-med {
  font-size: clamp(17px, 5vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
/* q-long (200–350 chars) — full clinical vignette */
.section-main.q-long {
  font-size: clamp(15px, 4vw, 21px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
/* q-xlong (> 200 chars) — extended clinical case / multi-statement */
.section-main.q-xlong {
  font-size: clamp(14px, 3.6vw, 17px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}

/* ── Typography tier 2: WRONG ANSWER ──────────────────────────────────────
   Also length-adaptive: JS injects .wa-med or .wa-long alongside wrong-txt.
   Thresholds: < 35 chars = base, 35–65 = medium, > 65 = long.            */
.section-main.wrong-txt,
.section-main.answer-txt {
  /* base — short wrong/correct answer */
  font-size: clamp(20px, 5.5vw, 32px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* wrong/correct — medium length (35–65 chars) */
.section-main.wrong-txt.wa-med,
.section-main.answer-txt.wa-med {
  font-size: clamp(20px, 4.5vw, 26px);
  line-height: 1.08;
}
/* wrong/correct — long (> 65 chars) */
.section-main.wrong-txt.wa-long,
.section-main.answer-txt.wa-long {
  font-size: clamp(20px, 3.8vw, 22px);
  line-height: 1.1;
}
.section-main.wrong-txt,
.section-main.wrong-txt.wa-med,
.section-main.wrong-txt.wa-long  { color: #ff2222; }
.section-main.answer-txt,
.section-main.answer-txt.wa-med,
.section-main.answer-txt.wa-long { color: var(--green); }

/* ── Typography tier 3: NEET INSIGHT ──────────────────────────────────────
   Length-adaptive: < 55 chars = base, 55–85 = med, > 85 = long.
   Thresholds keep long insights from blowing the card height.              */
.insight-body {
  font-size: clamp(16px, 4.5vw, 26px);
  font-weight: 600;
  line-height: 1.15;
  color: rgba(245,246,248,.88);
  white-space: pre-line;
  word-break: break-word;
  overflow-wrap: break-word;
}
.insight-body.ins-med {
  font-size: clamp(15px, 4vw, 22px);
  line-height: 1.18;
}
.insight-body.ins-long {
  font-size: clamp(14px, 3.6vw, 18px);
  line-height: 1.2;
}

/* ── Typography tier 4: Body text (explanations, WHERE THEY WENT WRONG) ──
   Calm supporting role — prose size, not headline.                        */
.section-body {
  font-size: 15px; line-height: 1.45;
  color: rgba(245,246,248,.76);
  white-space: pre-line;
  word-break: break-word;
}

/* ── Typography tier 5: MEMORY LOCK — compact and punchy ─────────────────
   Length-adaptive: short hacks stay big, long hacks scale down.           */
.memory-hack {
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--forest-bright);
  white-space: pre-line;
  word-break: break-word;
}
.memory-hack.hack-long {
  font-size: clamp(16px, 4vw, 20px);
}

/* ── Bottom hint ─────────────────────────────────────────────────────────── */
.hint {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  padding: 14px 0 calc(18px + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--ink-dim); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(5,5,5,.85) 0%, transparent 100%);
}
.chev { animation: bob 1.6s ease-in-out infinite; font-size: 16px; color: var(--ink-dim); }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-4px);} }

/* ── Completion screen ───────────────────────────────────────────────────── */
.complete {
  position: absolute; inset: 0;
  display: none; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 32px;
  background:
    radial-gradient(80% 50% at 50% 40%, rgba(77,255,136,.16), transparent 70%),
    var(--bg);
  z-index: 10;
}
.complete.show { display: flex; animation: fadeUp 500ms var(--t-med); }
.complete .ring {
  width: 88px; height: 88px; border-radius: 50%;
  border: 2px solid var(--green); display: grid; place-items: center;
  color: var(--green); font-size: 38px; margin-bottom: 22px;
  box-shadow: 0 0 40px var(--green-glow);
}
.complete h2 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 10px; }
.complete p  { color: var(--ink-dim); font-size: 15px; max-width: 320px; margin: 0 0 28px; line-height: 1.5; }
.complete button {
  background: var(--forest-bright); color: #1a0a00; font-weight: 700;
  border: none; padding: 14px 26px; border-radius: 999px; font-size: 15px;
  box-shadow: 0 8px 30px var(--orange-glow); cursor: pointer;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: translateY(0);} }

/* Small screens (≤380px) — clamp already adapts; just nudge the maxima down */
@media (max-width: 380px) {
  /* Tier 1 — question: compress each length variant one step */
  .section-main        { font-size: clamp(16px, 8vw, 32px); }
  .section-main.q-med  { font-size: clamp(15px, 5.5vw, 22px); }
  .section-main.q-long { font-size: clamp(14px, 4vw, 18px); }
  .section-main.q-xlong{ font-size: clamp(13px, 3.4vw, 16px); }
  /* Tier 2 — wrong / correct */
  .section-main.wrong-txt,
  .section-main.answer-txt { font-size: clamp(18px, 5.5vw, 28px); }
  /* Tier 3 — insight */
  .insight-body { font-size: clamp(16px, 4.5vw, 24px); }
  /* Tier 5 — memory lock */
  .memory-hack  { font-size: 22px; }
}

/* ── Feed hidden state (before subject chosen) ──────────────────────────── */
.feed-hidden { display: none !important; }

/* ── Completion screen extra button ─────────────────────────────────────── */
.complete .complete-sub-btn {
  margin-top: 10px;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUBJECT SELECTION SCREEN
   Full-screen landing that loads before the swipe feed.
   Users choose Medicine / Surgery / Pharmacology / Mixed.
═══════════════════════════════════════════════════════════════════════════ */
.subject-screen {
  position: fixed; inset: 0; z-index: 200;
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--bg);
  padding: 32px 24px env(safe-area-inset-bottom, 24px);
  overflow: hidden;
}
.subject-screen.show { display: flex; }

/* Back button on subject screen — top-left corner */
.subject-screen > .back-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 16px;
}

/* Decorative orange radial behind the heading */
.subject-screen::before {
  content: '';
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 480px; height: 280px;
  background: radial-gradient(ellipse, rgba(255,122,26,.16) 0%, transparent 70%);
  pointer-events: none;
}

.ss-screen-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 30% 40%, rgba(66,209,66,.07) 0%, transparent 70%),
              radial-gradient(ellipse 60% 45% at 75% 60%, rgba(232,71,26,.07) 0%, transparent 70%);
  border-radius: inherit;
}
.ss-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column;
  align-items: flex-start;
}

/* FMGMINDS.COM pill at top */
.ss-nm-badge {
  font-size: 10px; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest-bright);
  border: 1px solid rgba(255,122,26,.40);
  background: rgba(255,122,26,.08);
  padding: 5px 14px; border-radius: 999px;
  margin-bottom: 22px;
}

/* PYQ SWIPES big heading */
.ss-title {
  font-size: clamp(52px, 15vw, 84px);
  font-weight: 900; line-height: 0.78;
  letter-spacing: -0.04em;
  margin: 0 0 14px;
}
.ss-title-pyq {
  color: #2CB42C;
  text-shadow: 0 0 40px rgba(66,209,66,.45), 0 0 80px rgba(66,209,66,.20);
  display: block;
  margin-bottom: -0.16em;
}
.ss-title-swipes {
  color: #E8471A;
  text-shadow: 0 0 40px rgba(232,71,26,.45), 0 0 80px rgba(232,71,26,.20);
  display: block;
}

.ss-tagline {
  font-size: 13px; letter-spacing: .02em;
  color: rgba(245,246,248,.42);
  margin: 0 0 32px;
}

/* ── Subject cards ──────────────────────────────────────────────────────── */
.ss-cards {
  width: 100%;
  display: flex; flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.ss-card {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  cursor: pointer; text-align: left;
  transition: background 180ms, border-color 180ms, transform 120ms, box-shadow 180ms;
  -webkit-tap-highlight-color: transparent;
  /* Stacked-card shadow gives depth illusion */
  box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
}
.ss-card:active { transform: scale(0.975); }

/* Subject accent — left border + inner glow per subject */
.ss-card--bio {
  border-left: 3px solid #4dff88;
  box-shadow: -2px 0 18px rgba(77,255,136,.12), 0 4px 24px rgba(0,0,0,.35);
}
.ss-card--phy {
  border-left: 3px solid #38bdf8;
  box-shadow: -2px 0 18px rgba(56,189,248,.12), 0 4px 24px rgba(0,0,0,.35);
}
.ss-card--che {
  border-left: 3px solid #a78bfa;
  box-shadow: -2px 0 18px rgba(167,139,250,.12), 0 4px 24px rgba(0,0,0,.35);
}
.ss-card--mix {
  border-left: 3px solid var(--forest-bright);
  box-shadow: -2px 0 18px rgba(255,122,26,.12), 0 4px 24px rgba(0,0,0,.35);
}

/* Hover / focus per subject */
.ss-card--bio:hover { background: rgba(77,255,136,.07);  border-color: rgba(77,255,136,.40); }
.ss-card--phy:hover { background: rgba(56,189,248,.07);  border-color: rgba(56,189,248,.40); }
.ss-card--che:hover { background: rgba(167,139,250,.07); border-color: rgba(167,139,250,.40); }
.ss-card--mix:hover { background: rgba(255,122,26,.07);  border-color: rgba(255,122,26,.40); }

.ss-card-emoji { font-size: 26px; flex-shrink: 0; line-height: 1; }
.ss-card-info  { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ss-card-name  { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.ss-card-count { font-size: 12px; color: rgba(245,246,248,.45); }
.ss-card-arrow { font-size: 18px; color: rgba(245,246,248,.25); flex-shrink: 0; }

.ss-hint {
  width: 100%; text-align: center;
  font-size: 11px; letter-spacing: .10em; text-transform: uppercase;
  color: rgba(245,246,248,.25);
}

/* ── Desktop: centered portrait phone ────────────────────────────────────── */
@media (min-width: 700px) {
  html, body {
    height: 100%;
    background: #020202;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .subject-screen {
    position: fixed; /* stays full-screen overlay */
    background: #020202;
  }
  .ss-screen-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 30% 40%, rgba(66,209,66,.07) 0%, transparent 70%),
              radial-gradient(ellipse 60% 45% at 75% 60%, rgba(232,71,26,.07) 0%, transparent 70%);
  border-radius: inherit;
}
.ss-inner { max-width: 360px; }
  .feed {
    position: relative;
    inset: auto;
    width: min(420px, 92vw);
    height: min(880px, calc(100vh - 48px));
    aspect-ratio: 9 / 19.5;
    border-radius: 36px;
    overflow: hidden;
    box-shadow:
      0 30px 80px rgba(0,0,0,.7),
      0 0 0 1px rgba(255,255,255,.06),
      0 0 0 8px #0a0b10,
      0 0 0 9px rgba(255,255,255,.04);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAYGATE OVERLAY
   Full-screen modal that blocks free users after FREE_LIMIT slides.
   Cinematic dark theme matching the swipe feed.
═══════════════════════════════════════════════════════════════════════════ */
.swipe-paygate {
  position: fixed; inset: 0; z-index: 900;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(5,5,5,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.swipe-paygate.pg-visible { display: flex; }

.pg-card {
  position: relative;
  width: 100%; max-width: 400px;
  background: #0d1018;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 40px 28px 32px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
}

/* Radial orange glow behind card */
.pg-glow {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,122,26,.22) 0%, transparent 70%);
  pointer-events: none;
}
.pg-card > * { position: relative; z-index: 1; }

.pg-badge {
  display: inline-block;
  font-size: 10px; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest-bright);
  border: 1px solid rgba(255,122,26,.45);
  background: rgba(255,122,26,.10);
  padding: 4px 14px; border-radius: 999px;
  box-shadow: 0 0 14px rgba(255,122,26,.18);
  margin-bottom: 20px;
}

.pg-lock {
  font-size: 48px; line-height: 1;
  margin-bottom: 16px;
}

.pg-title {
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 800; line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.pg-highlight {
  color: var(--forest-bright);
}

.pg-sub {
  font-size: 14px; line-height: 1.5;
  color: var(--ink-dim);
  margin: 0 0 20px;
}

.pg-perks {
  list-style: none; margin: 0 0 24px; padding: 0;
  text-align: left;
  display: flex; flex-direction: column; gap: 8px;
}
.pg-perks li {
  font-size: 14px; font-weight: 600;
  color: rgba(247,247,247,.82);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 9px 14px;
}

.pg-cta {
  display: block;
  background: var(--forest-bright);
  color: #000;
  font-size: 15px; font-weight: 800; letter-spacing: .02em;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 14px;
  box-shadow: 0 0 28px rgba(255,122,26,.45);
  transition: opacity 180ms, transform 180ms;
  margin-bottom: 12px;
}
.pg-cta:hover { opacity: .88; transform: translateY(-1px); }

.pg-login {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 8px;
  transition: color 180ms;
}
.pg-login:hover { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   REINFORCEMENT CARDS
   Inserted after slides 5, 15, 30, 50. Scientific + premium.
   No XP / gems / cartoon rewards — only real performance signals.
═══════════════════════════════════════════════════════════════════════════ */
.reinforce-slide {
  background:
    radial-gradient(ellipse 130% 42% at 50% -8%,  rgba(255,122,26,.13) 0%, transparent 60%),
    radial-gradient(ellipse  80% 38% at 50% 108%, rgba(77,255,136,.07) 0%, transparent 60%),
    var(--bg);
}
.reinforce-slide .card-body::before,
.reinforce-slide .card-body::after { flex: 0 !important; }
.reinforce-slide .card-body { justify-content: center; gap: clamp(10px, 1.8vh, 18px); }

.rf-milestone { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--forest-bright); opacity: 0.88; }
.rf-headline { font-size: clamp(16px, 4.6vw, 22px); font-weight: 700; line-height: 1.32; color: var(--ink); letter-spacing: -0.015em; }
.rf-sub { font-size: 13px; line-height: 1.42; color: var(--ink-dim); margin-top: -4px; }

.rf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rf-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 11px 14px; }
.rf-stat-val { font-size: clamp(20px, 5.5vw, 26px); font-weight: 800; color: var(--ink); line-height: 1; }
.rf-stat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-dim); opacity: 0.65; margin-top: 5px; }

.rf-metrics { display: flex; flex-direction: column; gap: 9px; }
.rf-metric-row { display: flex; flex-direction: column; gap: 5px; }
.rf-metric-label { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(245,246,248,.40); }
.rf-metric-track { height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.rf-metric-fill { height: 100%; border-radius: 2px; transition: width 1.1s cubic-bezier(.16,1,.3,1); }
.rf-fill-green  { background: var(--green);       box-shadow: 0 0 6px rgba(77,255,136,.35); }
.rf-fill-orange { background: var(--forest-bright); box-shadow: 0 0 6px rgba(0,196,122,.35); }
.rf-fill-purple { background: #a78bfa;             box-shadow: 0 0 6px rgba(167,139,250,.35); }
.rf-fill-blue   { background: #38bdf8;             box-shadow: 0 0 6px rgba(56,189,248,.35); }

.rf-pace { font-size: 11px; color: var(--ink-dim); opacity: 0.52; text-align: center; letter-spacing: .03em; }

@media (max-width: 380px) {
  .rf-headline { font-size: clamp(14px, 4.2vw, 18px); }
  .rf-stat-val  { font-size: clamp(18px, 5vw, 22px); }
  .rf-stat-lbl  { font-size: 8px; }
}

/* ── Mobile bottom navigation (swipe-feed page) ───────────────────────────── */
.pg-mobile-nav {
  display: none;
}

@media (max-width: 768px) {
  .pg-mobile-nav {
    display:    flex;
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    height:     60px;
    background: #0d1117;
    border-top: 1.5px solid rgba(255,255,255,.09);
    z-index:    400;
    box-shadow: 0 -3px 16px rgba(0,0,0,.35);
  }
  .pg-mobile-nav__item {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             3px;
    text-decoration: none;
    color:           rgba(255,255,255,.38);
    font-size:       9px;
    font-weight:     700;
    letter-spacing:  .04em;
    text-transform:  uppercase;
    padding:         6px 2px;
    transition:      color .15s;
    position:        relative;
  }
  .pg-mobile-nav__item svg {
    width:        22px;
    height:       22px;
    stroke:       currentColor;
    fill:         none;
    flex-shrink:  0;
    stroke-width: 1.75;
  }
  .pg-mobile-nav__item.active {
    color: #F97316;
  }
  .pg-mobile-nav__item.active svg {
    stroke: #F97316;
  }
  .pg-mobile-nav__item.active::before {
    content:       '';
    position:      absolute;
    top:           0;
    left:          50%;
    transform:     translateX(-50%);
    width:         32px;
    height:        3px;
    background:    #F97316;
    border-radius: 0 0 4px 4px;
  }
  /* Push feed content up so nav doesn't cover the last slide hint */
  .hint {
    padding-bottom: 68px !important;
  }
}