/* ============================================================
   GLOBLY REDESIGN — Editorial Magazine Design System
   Loaded AFTER styles.css; overrides all Globly app styles.
   Never touches Origin Advisory marketing page classes.
   ============================================================ */

:root {
  --font-title: "Newsreader", "Source Serif 4", Georgia, serif;
}

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --g-bg:           #0E0E10;
  --g-bg-2:         #141416;
  --g-surface:      #1A1A1E;
  --g-surface-2:    #202025;
  --g-ink:          #F0F0F5;
  --g-ink-2:        #C8C8D0;
  --g-ink-muted:    rgba(200,200,210,0.55);
  --g-meta:         rgba(200,200,210,0.44);
  --g-line:         rgba(255,255,255,0.07);
  --g-radius:       12px;
  --g-radius-sm:    8px;
  --g-radius-lg:    16px;
  --g-radius-xl:    20px;

  /* Topic accent palette — vivid on dark */
  --g-conflict:       #ff4d4d;
  --g-health:         #ff4fa3;
  --g-economy:        #f5a524;
  --g-climate:        #22c55e;
  --g-politics:       #a855f7;
  --g-trade:          #f97316;
  --g-migration:      #06b6d4;
  --g-governance:     #a855f7;
  --g-debt:           #6366f1;
  --g-energy:         #eab308;
  --g-agriculture:    #65a30d;
  --g-infrastructure: #38bdf8;
  --g-diplomacy:      #7c3aed;

  /* Nav */
  --g-nav-h:        64px;
  --g-topbar-h:     56px;
  --g-font:         'Inter', 'Figtree', system-ui, sans-serif;
}

/* ── Base resets for the Globly app ───────────────────────── */
.g-phone-frame,
.gs-shell,
.gl-app {
  background: var(--g-bg);
  min-height: 100dvh;
  font-family: var(--g-font);
  -webkit-font-smoothing: antialiased;
  color: var(--g-ink);
}

/* Warm radial glow */
.gs-shell::before,
.gl-app::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 420px;
  background: radial-gradient(ellipse 80% 300px at 50% -60px,
    rgba(180,120,40,0.07) 0%,
    rgba(100,50,160,0.04) 55%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── Top bar ──────────────────────────────────────────────── */
.gs-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--g-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(14,14,16,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--g-line);
}
.gs-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gs-logo-img {
  height: 28px;
  width: auto;
  display: block;
}
.gs-topbar-freshness {
  font-size: 11px;
  color: var(--g-ink-muted);
  letter-spacing: 0.04em;
}
.gs-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gs-streak-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(224,164,88,0.12);
  border: 1px solid rgba(224,164,88,0.22);
  border-radius: 20px;
  color: #E0A458;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.gs-streak-num { font-variant-numeric: tabular-nums; }
.gs-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--g-surface);
  color: var(--g-ink-2);
  cursor: pointer;
  border: 1px solid var(--g-line);
}
.gs-profile-btn:hover { background: var(--g-surface-2); }

/* ── Bottom navigation ────────────────────────────────────── */
.gs-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--g-nav-h);
  display: flex;
  align-items: stretch;
  background: rgba(14,14,16,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--g-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.gs-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--g-ink-muted);
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  transition: color 0.15s;
}
.gs-nav-tab--on {
  color: var(--g-ink);
}
.gs-nav-tab--on svg {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.18));
}
.gs-nav-label { font-size: 10px; letter-spacing: 0.05em; }

/* ── App body scroll area ─────────────────────────────────── */
.gs-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}

/* ================================================================
   TODAY PAGE
   ================================================================ */

.gt2-page {
  background: var(--g-bg);
  min-height: 100%;
  padding-bottom: 32px;
}

/* Page heading */
.gt2-page-heading {
  padding: 24px 16px 0;
  margin-bottom: 4px;
}
.gt2-page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--g-ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}
.gt2-page-date {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
  margin-top: 4px;
}

/* Section headers */
.gt2-section {
  padding: 0 0 8px;
}
.gt2-section-hd {
  padding: 20px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gt2-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--g-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.gt2-section-sub {
  font-size: 13px;
  color: var(--g-ink-muted);
  margin: 0;
}

/* ── Hero card ── */
.gt2-hero {
  position: relative;
  margin: 16px 16px 0;
  border-radius: var(--g-radius-lg);
  min-height: 420px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.gt2-hero--sober { cursor: default; }
.gt2-hero:active:not(.gt2-hero--sober) { transform: scale(0.99); }
.gt2-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gt2-hero-body {
  position: relative;
  z-index: 2;
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gt2-hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.gt2-hero-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gt2-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.gt2-pill--region {
  color: rgba(255,255,255,0.65);
  background: rgba(0,0,0,0.32);
  border-color: rgba(255,255,255,0.12);
}
.gt2-hero-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.gt2-hero-summary {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gt2-hero-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.50);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.gt2-meta-dot { opacity: 0.4; }
.gt2-hero-cta {
  align-self: flex-start;
  padding: 9px 16px;
  border-radius: var(--g-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: #fff;
  transition: background 0.15s;
  margin-top: 4px;
}
.gt2-hero-cta:hover { background: rgba(255,255,255,0.17); }
.gt2-hero-cta--sober {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.80);
}

/* ── Skeleton hero ── */
.gt2-hero-skeleton {
  margin: 16px 16px 0;
  border-radius: var(--g-radius-lg);
  min-height: 420px;
  background: var(--g-surface);
  overflow: hidden;
  position: relative;
}
.gt2-skeleton-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.05) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: gt2-shimmer 1.6s infinite;
}
@keyframes gt2-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ═══════════════════════════════════════════════════════════════
   TopicHeroCard  (thc-)  — topic-page hero card, clean slate.
   Content uses position:absolute bottom so the text block is
   always pinned to the card bottom regardless of card height,
   eliminating flex-end height-resolution bugs.
   ═══════════════════════════════════════════════════════════════ */
.thc-card {
  position: relative;
  border-radius: var(--g-radius-lg);
  min-height: 400px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
  /* no flex — body and overlay are both absolute */
}
.thc-card:active { opacity: 0.92; }

/* Dark gradient scrim — behind text (z-index:1) */
.thc-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Single content block pinned to bottom — never affected by card height */
.thc-body {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Topic badge */
.thc-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

/* Headline — line-clamped so long titles never overflow */
.thc-title {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 36px);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Location · time */
.thc-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  font-weight: 500;
}
.thc-dot { opacity: 0.4; }

/* CTA button */
.thc-cta {
  align-self: flex-start;
  padding: 8px 18px;
  border-radius: var(--g-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.11);
  color: #fff;
  font-family: inherit;
  transition: background 0.15s;
}
.thc-cta:hover { background: rgba(255,255,255,0.20); }

/* gl-feat-hero context — card fills its grid cell.
   Feature grid is flex-direction:row from 768px so thc-card
   must have height:100% at the same breakpoint as gt2-hero. */
.gl-feat-hero .thc-card {
  margin: 0;
  min-height: 380px;
}
@media (min-width: 768px) {
  .gl-feat-hero .thc-card { min-height: 480px; height: 100%; }
  .thc-title { font-size: clamp(24px, 2.8vw, 42px); }
  .thc-body  { left: 28px; right: 28px; bottom: 28px; gap: 12px; }
}
@media (min-width: 1200px) {
  .gl-feat-hero .thc-card { min-height: 520px; }
  .thc-title { font-size: clamp(28px, 2.4vw, 46px); -webkit-line-clamp: 5; }
}

/* ── Story grid ── */
.gt2-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0 16px;
  overflow: hidden;
}

/* ── Story cards — FULL-BLEED ── */
.gt2-scard {
  position: relative;
  border-radius: var(--g-radius);
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(255,255,255,0.09);
  outline: none;
  box-shadow: 0 2px 16px rgba(0,0,0,0.45);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
/* Size variants — dramatically varied for editorial feel */
.gt2-scard--large {
  grid-column: 1 / -1;
  min-height: 360px;
}
.gt2-scard--medium {
  min-height: 240px;
}
.gt2-scard--small {
  min-height: 175px;
}

/* Hover/active states */
.gt2-scard:not(.gt2-scard--sober):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.62);
  border-color: rgba(255,255,255,0.17);
}
.gt2-scard:active { transform: scale(0.98); }
.gt2-scard--sober:active { transform: none; }

/* Dark gradient overlay — transparent top → near-black bottom */
.gt2-scard-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Topic pill — top-left corner */
.gt2-scard-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

/* Text body — overlaid at bottom; flex:none so it doesn't stretch full-height */
.gt2-scard-body {
  position: relative;
  z-index: 2;
  flex: none;
  width: 100%;
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.gt2-scard-title {
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.gt2-scard--large .gt2-scard-title {
  font-size: clamp(22px, 2.4vw, 42px);
  line-height: 1.14;
  -webkit-line-clamp: 3;
  letter-spacing: -0.025em;
}
.gt2-scard--medium .gt2-scard-title {
  font-size: clamp(15px, 1.15vw, 22px);
  line-height: 1.15;
  -webkit-line-clamp: 2;
}
.gt2-scard--small .gt2-scard-title {
  font-size: clamp(13px, 0.9vw, 15px);
  line-height: 1.18;
  -webkit-line-clamp: 2;
}
.gt2-scard--large .gt2-scard-body {
  padding: 14px 20px 22px;
}
.gt2-scard-keytag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1px;
  line-height: 1;
}
.gt2-scard-matters {
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.68);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.gt2-scard-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.46);
}
.gt2-scard-country,
.gt2-scard-time { color: rgba(255,255,255,0.46); }

/* Remove the old image-above-text layout */
.gt2-scard-img-wrap { display: none !important; }
.gt2-scard-img      { display: none !important; }
.gt2-scard-gradient { display: none !important; }
.gt2-scard-img-overlay { display: none !important; }

/* ── Daily learning row ── */
.gt2-daily-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 0 16px;
}
.gt2-daily-card {
  border-radius: var(--g-radius);
  padding: 16px;
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  min-height: 140px;
  transition: transform 0.15s, border-color 0.15s;
}
.gt2-daily-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.12); }
.gt2-daily-card-eyebrow {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
}
.gt2-daily-card-q {
  font-size: 13px;
  font-weight: 500;
  color: var(--g-ink-2);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gt2-daily-card-cta {
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--g-ink);
}
.gt2-daily-card-desc {
  font-size: 12px;
  color: var(--g-ink-muted);
  line-height: 1.45;
  margin: 0;
}
.gt2-daily-card--quiz {
  background: linear-gradient(150deg, rgba(224,164,88,0.14) 0%, var(--g-surface) 65%);
  border-color: rgba(224,164,88,0.30);
}
.gt2-daily-card--quiz:hover { border-color: rgba(224,164,88,0.50); }
.gt2-daily-card--quiz .gt2-daily-card-eyebrow { color: #E0A458; }
.gt2-daily-card--quiz .gt2-daily-card-cta { color: #E0A458; font-weight: 700; }
.gt2-daily-card-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--g-ink-2);
  line-height: 1.48;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gt2-daily-card--fact {
  background: linear-gradient(150deg, rgba(var(--gt2-fact-rgb), 0.14) 0%, var(--g-surface) 65%);
  border-color: rgba(var(--gt2-fact-rgb), 0.30);
}
.gt2-daily-card--fact:hover { border-color: rgba(var(--gt2-fact-rgb), 0.50); }
.gt2-daily-fact-stat {
  font-size: 28px;
  font-weight: 800;
  color: var(--gt2-fact-hex);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.gt2-daily-fact-text {
  font-size: 12px;
  color: var(--g-ink-2);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.gt2-daily-card--globe {
  background: linear-gradient(150deg, rgba(63,163,77,0.14) 0%, var(--g-surface) 65%);
  border-color: rgba(63,163,77,0.28);
}
.gt2-daily-card--globe:hover { border-color: rgba(63,163,77,0.46); }
.gt2-daily-card--globe .gt2-daily-card-eyebrow { color: #3FA34D; }
.gt2-daily-card--globe .gt2-daily-card-cta { color: #3FA34D; font-weight: 700; }
.gt2-globe-card-icon {
  color: rgba(63,163,77,0.72);
  margin: 4px 0;
}

/* ── Topic pills row ── */
.gt2-topics-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px;
}
.gt2-topic-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.09);
  background: var(--g-surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--g-ink-2);
  transition: border-color 0.12s, background 0.12s;
}
.gt2-topic-pill:hover { border-color: rgba(255,255,255,0.16); background: var(--g-surface-2); }
.gt2-topic-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gt2-topic-pill-name { color: var(--g-ink-2); }
.gt2-topic-pill-count {
  font-size: 11px;
  color: var(--g-ink-muted);
  font-variant-numeric: tabular-nums;
}
.gt2-bottom-pad { height: 24px; }

/* ── Learn blocks ── */
.gt2-learn-section { padding: 0 16px; }
.gt2-learn-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gt2-learn-block {
  background: var(--g-surface);
  border-radius: var(--g-radius);
  padding: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--g-line);
}
.gt2-learn-block--sober { border-color: rgba(255,255,255,0.06); }
.gt2-learn-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}
.gt2-learn-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
  margin-bottom: 8px;
  padding-left: 10px;
}
.gt2-learn-text {
  font-size: 14px;
  color: var(--g-ink-2);
  line-height: 1.55;
  margin: 0;
  padding-left: 10px;
}
.gt2-learn-facts {
  margin: 0;
  padding: 0 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gt2-learn-facts li {
  font-size: 13px;
  color: var(--g-ink-2);
  line-height: 1.45;
}

/* ================================================================
   FEED PAGE
   ================================================================ */
/* gf2-page background — defined in Phase 3 block */
.gf2-page {
  min-height: 100%;
  padding-bottom: 32px;
}

/* Topic filter pills */
.gf2-filters {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(4,5,10,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 10px 0;
}
.gf2-filter-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gf2-filter-scroll::-webkit-scrollbar { display: none; }
.gf2-filter {
  flex-shrink: 0;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: var(--g-ink-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.gf2-filter:hover { border-color: rgba(255,255,255,0.18); color: var(--g-ink-2); }
.gf2-filter--on {
  font-weight: 600;
}

/* Card grid — full-bleed editorial */
.gf2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px;
}
.gf2-card-wrap {
  position: relative;
}
.gf2-card-wrap--large {
  grid-column: 1 / -1;
}
.gf2-save-btn {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.42);
  color: rgba(255,255,255,0.70);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: background 0.12s;
}
.gf2-save-btn:hover { background: rgba(0,0,0,0.60); color: #fff; }
.gf2-save-btn--on { color: #E0A458; border-color: rgba(224,164,88,0.35); }

/* Empty state */
.gf2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 24px;
  color: var(--g-ink-muted);
}
.gf2-empty-text {
  font-size: 15px;
  color: var(--g-ink-muted);
  text-align: center;
  line-height: 1.5;
}
.gf2-bottom-pad { height: 24px; }

/* ================================================================
   BRIEF DETAIL — STORY MODAL
   ================================================================ */
.gbd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
}
.gbd2-screen {
  width: 100%;
  max-height: 96dvh;
  background: var(--g-bg);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid var(--g-line);
}
.gbd2-screen--sober { background: #0C0C0E; }

/* Main col: flex column filling gbd2-screen on mobile */
.gbd2-main-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Hero image area */
.gbd2-hero {
  position: relative;
  min-height: 240px;
  max-height: 320px;
  background-size: cover;
  background-position: center top;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.gbd2-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.40) 45%,
    rgba(0,0,0,0.88) 100%);
  pointer-events: none;
}
.gbd2-hero-overlay--sober {
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.94) 100%);
}
.gbd2-controls {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
}
.gbd2-ctrl-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.44);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  flex-shrink: 0;
}
.gbd2-ctrl-spacer { flex: 1; }
.gbd2-hero-body {
  position: relative;
  z-index: 2;
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gbd2-hero-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.gbd2-pill {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.gbd2-pill--region {
  color: rgba(255,255,255,0.60);
  background: rgba(0,0,0,0.30);
  border-color: rgba(255,255,255,0.12);
}
.gbd2-hero-title {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.gbd2-hero-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255,255,255,0.48);
}
.gbd2-meta-dot { opacity: 0.4; }

/* Scrollable content */
.gbd2-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 24px;
}
.gbd2-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 0;
}
.gbd2-stat-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-ink-muted);
  background: var(--g-surface);
  border-radius: 20px;
  padding: 4px 10px;
  border: 1px solid var(--g-line);
}
.gbd2-depth-toggle {
  display: flex;
  border: 1px solid var(--g-line);
  border-radius: 20px;
  overflow: hidden;
}
.gbd2-depth-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--g-ink-muted);
  cursor: pointer;
  background: transparent;
  border: none;
}
.gbd2-depth-btn--on {
  background: var(--g-surface-2);
  color: var(--g-ink);
}
.gbd2-section {
  padding: 16px 20px 0;
}
.gbd2-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
  margin-bottom: 10px;
}
.gbd2-bullets {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gbd2-bullet {
  font-size: 15px;
  color: var(--g-ink-2);
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
}
.gbd2-bullet::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--g-ink-muted);
}
.gbd2-body-text {
  font-size: 15px;
  color: var(--g-ink-2);
  line-height: 1.6;
  margin: 0;
}
/* Coverage */
.gbd2-coverage-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--g-radius-sm);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  color: var(--g-ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.gbd2-chev {
  transition: transform 0.2s;
  color: var(--g-ink-muted);
}
.gbd2-chev--open { transform: rotate(180deg); }
.gbd2-coverage-list {
  list-style: none;
  padding: 8px 0 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gbd2-coverage-item { display: block; }
.gbd2-coverage-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--g-surface);
  border-radius: var(--g-radius-sm);
  text-decoration: none;
}
.gbd2-cov-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--g-ink);
}
.gbd2-cov-title {
  font-size: 12px;
  color: var(--g-ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Timeline */
.gbd2-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gbd2-tl-item {
  display: grid;
  grid-template-columns: 72px 14px 1fr;
  gap: 0 10px;
  align-items: flex-start;
  text-decoration: none;
}
.gbd2-tl-date {
  font-size: 11px;
  color: var(--g-ink-muted);
  text-align: right;
  padding-top: 2px;
}
.gbd2-tl-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
}
.gbd2-tl-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--g-surface-2);
  border: 1.5px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.gbd2-tl-item--main .gbd2-tl-dot {
  background: rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.60);
}
.gbd2-tl-title {
  font-size: 13px;
  color: var(--g-ink-2);
  line-height: 1.4;
}
.gbd2-copyright {
  font-size: 11px;
  color: var(--g-meta);
  text-align: center;
  padding: 20px 20px 0;
  margin: 0;
}
.gbd2-scroll-pad { height: 80px; }
/* Footer CTA */
.gbd2-foot {
  position: sticky;
  bottom: 0;
  padding: 12px 20px;
  background: linear-gradient(to top, var(--g-bg) 70%, transparent);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.gbd2-read-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: var(--g-radius);
  background: var(--g-ink);
  color: var(--g-bg);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

/* ================================================================
   PLAY PAGE
   ================================================================ */
/* ph-screen, ph-header, ph-title, ph-sub — defined in Phase 3 block */

/* Hero game card */
.ph-hero {
  position: relative;
  margin: 0 16px 12px;
  border-radius: var(--g-radius-lg);
  overflow: hidden;
  padding: 24px 20px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #2D1F08 0%, #1A1408 50%, #0D0D10 100%);
  border: 1px solid rgba(224,164,88,0.18);
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s;
}
.ph-hero:hover { transform: translateY(-2px); }
.ph-hero:active { transform: scale(0.98); }
.ph-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 80% at 80% 20%, rgba(224,164,88,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.ph-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.ph-hero-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #E0A458;
}
.ph-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--g-ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.ph-hero-sub {
  font-size: 13px;
  color: var(--g-ink-muted);
  line-height: 1.45;
  margin-bottom: 16px;
}
.ph-hero-state { flex: 1; }
.ph-hero-score,
.ph-hero-ready {
  font-size: 13px;
  color: rgba(224,164,88,0.80);
}
.ph-hero-cta { margin-top: 8px; }
.ph-hero-btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--g-radius-sm);
  background: #E0A458;
  color: #0D0D10;
  font-size: 13px;
  font-weight: 700;
}

/* Secondary game cards */
.ph-card {
  position: relative;
  margin: 0 16px 12px;
  border-radius: var(--g-radius);
  overflow: hidden;
  padding: 20px 18px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-align: left;
  border: 1px solid var(--g-line);
  background: var(--g-surface);
  transition: transform 0.15s, border-color 0.15s;
}
.ph-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.12); }
.ph-card:active { transform: scale(0.98); }
.ph-card-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ph-card--country { border-color: rgba(94,106,210,0.20); }
.ph-card--country .ph-card-bg {
  background: radial-gradient(ellipse 100% 80% at 85% 15%, rgba(94,106,210,0.14) 0%, transparent 65%);
}
.ph-card--hilo { border-color: rgba(34,197,94,0.18); }
.ph-card--hilo .ph-card-bg {
  background: radial-gradient(ellipse 100% 80% at 85% 15%, rgba(34,197,94,0.12) 0%, transparent 65%);
}
.ph-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ph-card-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--g-ink-muted);
}
.ph-card--country .ph-card-label { color: #5E6AD2; }
.ph-card--hilo .ph-card-label { color: #22C55E; }
.ph-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--g-ink);
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}
.ph-card-sub {
  font-size: 12px;
  color: var(--g-ink-muted);
  line-height: 1.45;
  flex: 1;
}
.ph-card-state { margin: 8px 0; }
.ph-card-ready,
.ph-card-score {
  font-size: 12px;
  color: var(--g-ink-muted);
}
.ph-card-cta { margin-top: 8px; }
.ph-card-btn {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--g-radius-sm);
  font-size: 12px;
  font-weight: 700;
  background: var(--g-surface-2);
  color: var(--g-ink);
  border: 1px solid var(--g-line);
}
.ph-card-btn--country {
  background: rgba(94,106,210,0.16);
  color: #5E6AD2;
  border-color: rgba(94,106,210,0.28);
}
.ph-card-btn--hilo {
  background: rgba(34,197,94,0.14);
  color: #22C55E;
  border-color: rgba(34,197,94,0.26);
}
.ph-back {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--g-radius-sm);
  background: var(--g-surface);
  color: var(--g-ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--g-line);
  margin-bottom: 16px;
}

/* ================================================================
   GLOBE PAGE
   ================================================================ */
.gs2-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.gs2-globe-wrap {
  flex: 1;
  position: relative;
  min-height: 340px;
}
.gs2-canvas {
  position: absolute;
  inset: 0;
}
.gs2-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--g-ink-muted);
}
.gs2-sidebar {
  padding: 16px 20px 24px;
  background: var(--g-bg);
  border-top: 1px solid var(--g-line);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.gs2-legend { flex: 1; min-width: 160px; }
.gs2-legend-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
  margin-bottom: 10px;
}
.gs2-legend-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, hsl(0,60%,30%), hsl(60,60%,36%), hsl(120,60%,32%));
  margin-bottom: 8px;
}
.gs2-legend-rows { display: flex; flex-direction: column; gap: 5px; }
.gs2-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gs2-legend-sw {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gs2-legend-label {
  font-size: 12px;
  color: var(--g-ink-2);
  font-weight: 500;
  flex: 1;
}
.gs2-legend-range {
  font-size: 11px;
  color: var(--g-ink-muted);
}
.gs2-legend-src {
  font-size: 10px;
  color: var(--g-meta);
  margin-top: 10px;
  line-height: 1.4;
}
.gs2-readout {
  flex: 1; min-width: 130px;
  background: var(--g-surface);
  border-radius: var(--g-radius);
  border: 1px solid var(--g-line);
  padding: 14px;
}
.gs2-readout--idle { display: flex; align-items: center; justify-content: center; }
.gs2-readout-idle-text {
  font-size: 12px;
  color: var(--g-meta);
  text-align: center;
}
.gs2-readout-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--g-ink);
  margin-bottom: 8px;
}
.gs2-readout-hdi {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.gs2-readout-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--g-ink);
  font-variant-numeric: tabular-nums;
}
.gs2-readout-key {
  font-size: 12px;
  color: var(--g-ink-muted);
  font-weight: 500;
}
.gs2-readout-band {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.gs2-readout-nodata {
  font-size: 13px;
  color: var(--g-meta);
}

/* ── Atlas HDI floating card — top-right overlay on the globe ──── */
.atlas-hdi-floating-card {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  background: #F5F3ED;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 4px 20px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.14);
  border-radius: 12px;
  padding: 10px 14px 11px;
  min-width: 130px;
  max-width: 200px;
  pointer-events: none;
}
.atlas-country-name {
  font-size: 13px;
  font-weight: 700;
  color: #111110;
  margin-bottom: 3px;
  line-height: 1.2;
}
.atlas-hdi-score {
  font-size: 22px;
  font-weight: 800;
  color: #111110;
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.atlas-hdi-score-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(17,17,16,0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.atlas-hdi-category {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.atlas-hdi-nodata {
  font-size: 11px;
  color: rgba(17,17,16,0.45);
}

/* ── Country articles panel — replaces the old gs2-readout ───────── */
.gs2-country-articles {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gs2-ca-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
  margin-bottom: 10px;
}
.gs2-ca-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  flex: 1;
}
.gs2-ca-empty-text {
  font-size: 12px;
  color: var(--g-meta);
  text-align: center;
  line-height: 1.5;
}
.gs2-ca-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 280px;
}
.gs2-ca-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: default;
}
.gs2-ca-img {
  width: 52px;
  height: 38px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--g-surface-2);
}
.gs2-ca-content {
  flex: 1;
  min-width: 0;
}
.gs2-ca-source {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs2-ca-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--g-ink-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Desktop: taller article list in the sidebar column */
@media (min-width: 1024px) {
  .gs2-ca-list { max-height: 400px; }
  .gs2-ca-title { -webkit-line-clamp: 2; }
}

/* ================================================================
   EXPLAINER / FACT OVERLAYS
   ================================================================ */
.gbd-screen {
  background: var(--g-bg);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 92dvh;
  width: 100%;
}
.gbd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--g-line);
}
.gbd-topbar-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
}
.gbd-icon-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--g-surface);
  color: var(--g-ink-2);
  border: 1px solid var(--g-line);
  cursor: pointer;
}
.gbd-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 20px; }
.gbd-fact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.gt-fact-modal-stat {
  font-size: 48px;
  font-weight: 900;
  color: var(--g-ink);
  letter-spacing: -0.03em;
  line-height: 1.0;
}
.gbd-fact-text {
  font-size: 15px;
  color: var(--g-ink-2);
  line-height: 1.6;
  max-width: 34ch;
}
.gbd-read-pips {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
}
.gbd-read-pip {
  height: 3px;
  flex: 1;
  border-radius: 3px;
  background: var(--g-surface-2);
}
.gbd-read-pip--on { background: rgba(255,255,255,0.55); }
.gbd-read-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--g-ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 12px 0 10px;
}
.gbd-read-body {
  font-size: 15px;
  color: var(--g-ink-2);
  line-height: 1.6;
  margin: 0;
}
.gbd-read-why {
  margin-top: 20px;
  background: var(--g-surface);
  border-radius: var(--g-radius);
  padding: 14px;
  border: 1px solid var(--g-line);
}
.gbd-read-why-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
  margin-bottom: 8px;
}
.gbd-read-why-text {
  font-size: 14px;
  color: var(--g-ink-2);
  line-height: 1.55;
  margin: 0;
}
.gbd-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--g-line);
  background: var(--g-bg);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.gbd-read-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border-radius: var(--g-radius);
  background: var(--g-ink);
  color: var(--g-bg);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: none;
}

/* ================================================================
   QUIZ GAME
   ================================================================ */
.qz-screen {
  background: var(--g-bg);
  min-height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.qz-done {
  align-items: center;
  justify-content: center;
}
.qz-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qz-progress {
  height: 3px;
  background: var(--g-surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.qz-progress-fill {
  height: 100%;
  background: var(--g-ink);
  border-radius: 3px;
  transition: width 0.25s;
}
.qz-question {
  font-size: 18px;
  font-weight: 600;
  color: var(--g-ink);
  line-height: 1.4;
  margin: 0;
}
.qz-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qz-opt {
  padding: 14px 16px;
  border-radius: var(--g-radius);
  border: 1px solid var(--g-line);
  background: var(--g-surface);
  color: var(--g-ink-2);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.qz-opt--idle:not(:disabled):hover { border-color: rgba(255,255,255,0.18); background: var(--g-surface-2); }
.qz-opt--correct { border-color: rgba(34,197,94,0.50); background: rgba(34,197,94,0.12); color: #22C55E; }
.qz-opt--wrong   { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.10); color: #EF4444; }
.qz-opt--dim     { opacity: 0.38; }
.qz-opt:disabled { cursor: default; }
.qz-explain {
  background: var(--g-surface);
  border-radius: var(--g-radius);
  padding: 16px;
  border: 1px solid var(--g-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qz-explain-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--g-ink);
}
.qz-explain-text {
  font-size: 14px;
  color: var(--g-ink-2);
  line-height: 1.5;
  margin: 0;
}
.qz-next-btn {
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: var(--g-radius-sm);
  background: var(--g-ink);
  color: var(--g-bg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  margin-top: 4px;
}
.qz-done-icon { color: var(--g-ink); margin-bottom: 4px; }
.qz-done-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--g-ink);
  letter-spacing: -0.02em;
  margin: 0;
}
.qz-done-sub { font-size: 15px; color: var(--g-ink-muted); margin: 4px 0 0; }

/* ================================================================
   COUNTRY GUESSER + HILO
   ================================================================ */
.cg-screen, .hl-screen {
  background: var(--g-bg);
  min-height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cg-done, .hl-done {
  align-items: center;
  justify-content: center;
}
.cg-title, .cg-hd h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--g-ink);
  letter-spacing: -0.02em;
  margin: 0;
}
.cg-subtitle {
  font-size: 13px;
  color: var(--g-ink-muted);
  margin: 2px 0 0;
}
.cg-count, .cg-hd span {
  font-size: 15px;
  font-weight: 700;
  color: var(--g-ink-muted);
}
.cg-input {
  flex: 1;
  padding: 12px 14px;
  border-radius: var(--g-radius);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  color: var(--g-ink);
  font-size: 15px;
  outline: none;
  font-family: var(--g-font);
}
.cg-input:focus { border-color: rgba(94,106,210,0.60); }
.cg-btn {
  padding: 12px 16px;
  border-radius: var(--g-radius);
  background: #5E6AD2;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.cg-btn:disabled { opacity: 0.38; cursor: default; }
.cg-sugg {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--g-surface-2);
  border: 1px solid rgba(94,106,210,0.30);
  border-radius: var(--g-radius);
  overflow: hidden;
  z-index: 10;
  margin-top: 4px;
}
.cg-sugg-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  font-size: 14px;
  color: var(--g-ink-2);
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--g-line);
  background: transparent;
}
.cg-sugg-item:last-child { border-bottom: none; }
.cg-sugg-item:hover { background: var(--g-surface); }
.cg-err { font-size: 12px; color: #EF4444; margin: 4px 0 0; }
.cg-row-hd {
  display: grid;
  grid-template-columns: 52px 1fr 90px 64px;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-meta);
  padding: 0 2px;
}
.cg-row {
  display: grid;
  grid-template-columns: 52px 1fr 90px 64px;
  gap: 8px;
  align-items: center;
  background: var(--g-surface);
  border-radius: var(--g-radius-sm);
  padding: 10px 10px;
  border: 1px solid var(--g-line);
}
.cg-row--win { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.07); }
.cg-rname { font-size: 13px; color: var(--g-ink); font-weight: 500; }
.cg-rdist { font-size: 12px; color: var(--g-ink-muted); }
.cg-rarrow { margin-left: 4px; }
.cg-rhdi { font-size: 12px; color: var(--g-ink-muted); font-variant-numeric: tabular-nums; }
.cg-hdi--up   { color: #22C55E; }
.cg-hdi--down { color: #EF4444; }
.cg-hdi-arrow { opacity: 0.80; }
.cg-share-btn {
  padding: 10px 20px;
  border-radius: var(--g-radius);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  color: var(--g-ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
.cg-done-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--g-ink);
  letter-spacing: -0.02em;
  margin: 0;
}
.cg-done-ans, .cg-done-sub, .hl-hint {
  font-size: 14px;
  color: var(--g-ink-muted);
  margin: 4px 0 0;
}
.cg-done-hdi { opacity: 0.70; }
.cg-hint-box {
  background: var(--g-surface);
  border-radius: var(--g-radius);
  padding: 16px;
  border: 1px solid var(--g-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cg-hint-hd { font-size: 13px; font-weight: 600; color: var(--g-ink-2); margin: 0; }
.cg-hint-item { font-size: 13px; color: var(--g-ink-muted); margin: 0; }

/* ── HiLo ── */
.hl-prompt { font-size: 15px; color: var(--g-ink-2); margin: 0; }
.hl-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
}
.hl-card {
  border-radius: var(--g-radius);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: 140px;
  justify-content: center;
  transition: border-color 0.12s, background 0.12s;
  text-align: center;
}
.hl-card:not(:disabled):hover { border-color: rgba(255,255,255,0.18); background: var(--g-surface-2); }
.hl-card--correct { border-color: rgba(34,197,94,0.50); background: rgba(34,197,94,0.09); }
.hl-card--wrong   { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.08); }
.hl-country { font-size: 16px; font-weight: 700; color: var(--g-ink); }
.hl-hdi { font-size: 22px; font-weight: 800; color: var(--g-ink); font-variant-numeric: tabular-nums; }
.hl-hdi--hidden { color: var(--g-meta); font-size: 18px; }
.hl-tap { font-size: 11px; color: var(--g-meta); margin-top: 4px; }
.hl-result-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.hl-result-badge--correct { color: #22C55E; background: rgba(34,197,94,0.14); }
.hl-result-badge--wrong   { color: #EF4444; background: rgba(239,68,68,0.12); }
.hl-done-reveal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin: 8px 0;
}
.hl-done-card {
  border-radius: var(--g-radius-sm);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  padding: 14px;
  text-align: center;
  display: flex; flex-direction: column; gap: 4px;
}
.hl-done-card--win { border-color: rgba(34,197,94,0.40); background: rgba(34,197,94,0.07); }
.hl-done-country { font-size: 13px; font-weight: 600; color: var(--g-ink); }
.hl-done-hdi { font-size: 12px; color: var(--g-ink-muted); }
.hl-done-higher { font-size: 11px; font-weight: 700; color: #22C55E; }
.hl-play-again {
  padding: 10px 20px;
  border-radius: var(--g-radius);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  color: var(--g-ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

/* ================================================================
   PROFILE PAGE
   ================================================================ */
/* g-profile, g-profile-streak-card backgrounds — defined in Phase 3 block */
.g-profile-streak-card {
  border-radius: var(--g-radius-lg);
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.g-profile-flame { color: #E0A458; }
.g-profile-streak-num {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.0;
  /* gradient text — overridden below in Phase 3 */
}
.g-profile-streak-label {
  font-size: 14px;
  color: var(--g-ink-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.g-profile-longest {
  font-size: 12px;
  color: var(--g-meta);
  margin-top: 4px;
}
.g-profile-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.g-profile-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--g-ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.g-time-input {
  padding: 10px 14px;
  border-radius: var(--g-radius-sm);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  color: var(--g-ink);
  font-size: 18px;
  font-weight: 600;
  font-family: var(--g-font);
  outline: none;
}
.g-time-input:focus { border-color: rgba(255,255,255,0.22); }
.g-saved-badge {
  font-size: 12px;
  color: #22C55E;
  font-weight: 600;
}
.g-profile-note {
  font-size: 13px;
  color: var(--g-meta);
  line-height: 1.5;
  margin: 0;
}
.g-profile-interests {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.g-interest-tag {
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  color: var(--g-ink-2);
}
.g-interest-tag--topic {
  background: rgba(94,106,210,0.12);
  border-color: rgba(94,106,210,0.28);
  color: #5E6AD2;
}
.g-reset-btn {
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: var(--g-radius-sm);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  color: var(--g-ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.g-version-tap {
  font-size: 11px;
  color: var(--g-meta);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}
.g-debug-panel {
  background: var(--g-surface);
  border-radius: var(--g-radius);
  border: 1px solid var(--g-line);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.g-debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--g-ink-2);
}
.g-debug-close { cursor: pointer; background: transparent; border: none; color: var(--g-ink-muted); font-size: 14px; }
.g-debug-section { font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--g-meta); }
.g-debug-row { display: flex; align-items: center; gap: 8px; }
.g-debug-label { font-size: 12px; color: var(--g-ink-2); width: 110px; flex-shrink: 0; }
.g-debug-bar-wrap { flex: 1; height: 4px; background: var(--g-surface-2); border-radius: 2px; overflow: hidden; }
.g-debug-bar { height: 100%; background: #5E6AD2; border-radius: 2px; }
.g-debug-val { font-size: 11px; color: var(--g-meta); width: 32px; text-align: right; font-variant-numeric: tabular-nums; }

/* ================================================================
   SPLASH / LOADING
   ================================================================ */
.g-splash {
  position: fixed;
  inset: 0;
  background: var(--g-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 300;
}
.g-splash-logo-img { height: 48px; width: auto; }
.g-splash-spinner {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--g-surface-2);
  border-top-color: var(--g-ink-2);
  animation: g-spin 0.8s linear infinite;
}
@keyframes g-spin { to { transform: rotate(360deg); } }

/* ================================================================
   STREAK MODAL
   ================================================================ */
.gs-streak-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-streak-modal {
  background: var(--g-surface);
  border: 1px solid rgba(224,164,88,0.25);
  border-radius: var(--g-radius-xl);
  padding: 32px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  width: calc(100% - 48px);
}
.gs-streak-modal-flame { color: #E0A458; }
.gs-streak-modal-num { font-size: 52px; font-weight: 900; color: var(--g-ink); letter-spacing: -0.04em; }
.gs-streak-modal-label { font-size: 14px; color: var(--g-ink-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.gs-streak-modal-best { font-size: 13px; color: var(--g-meta); }
.gs-streak-modal-nudge { font-size: 14px; color: var(--g-ink-2); line-height: 1.45; }
.gs-streak-modal-close {
  margin-top: 8px;
  padding: 10px 24px;
  border-radius: var(--g-radius);
  background: var(--g-ink);
  color: var(--g-bg);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

/* ================================================================
   TOPIC FEED SCREEN (tfs-)
   ================================================================ */
.tfs-page {
  background: var(--g-bg);
  min-height: 100%;
  padding-bottom: 32px;
}
.tfs-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--g-line);
}
.tfs-back {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-ink-2);
  cursor: pointer;
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-sm);
  padding: 6px 12px;
}
.tfs-topic-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 600;
}
.tfs-story-count {
  font-size: 12px;
  color: var(--g-meta);
  margin-left: auto;
}
.tfs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}
.tfs-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: var(--g-surface);
  border-radius: var(--g-radius);
  border: 1px solid var(--g-line);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s;
}
.tfs-row:hover { border-color: rgba(255,255,255,0.14); }
.tfs-thumb {
  width: 64px; height: 64px;
  border-radius: var(--g-radius-sm);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.tfs-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tfs-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tfs-title { font-size: 14px; font-weight: 600; color: var(--g-ink); line-height: 1.35; margin: 0; }
.tfs-empty { font-size: 14px; color: var(--g-meta); text-align: center; padding: 40px 20px; }

/* ================================================================
   ICON WRAPPER (ci-wrap)
   ================================================================ */
.ci-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* ================================================================
   ROOT LAYOUT — FULL WINDOW, NO GUTTERS
   ================================================================ */
html, body, #root {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Override phone-frame container — remove max-width constraint */
.g-phone-frame {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
  min-height: 100dvh !important;
  background: var(--g-bg);
}

/* ================================================================
   NEW APP SHELL — SIDEBAR + MAIN
   ================================================================ */
.gl-app {
  display: flex;
  width: 100%;
  /* Hard viewport height so gl-main is height-constrained and can scroll.
     min-height alone lets children grow freely, killing overflow-y:auto. */
  height: 100dvh;
  background: var(--g-bg);
  position: relative;
}

/* ── Hamburger button (fixed top-right, always visible) ── */
/* ── Sticky topbar (z-index: 501 sits above overlay at 500) ── */
.gl-topbar {
  position: sticky;
  top: 0;
  z-index: 501;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
  background: rgba(10,11,14,0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.gl-topbar-btn {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
  padding: 0;
  flex-shrink: 0;
}
.gl-topbar-btn:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.18); }
.gl-topbar-btn--open { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); }
.gl-hamburger-line {
  display: block;
  width: 16px;
  height: 2px;
  background: rgba(235,235,245,0.88);
  border-radius: 1px;
}
.gl-topbar-logo {
  height: 20px;
  width: auto;
  display: block;
}
.gl-topbar-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: rgba(200,210,225,0.38);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── Edition masthead ── */
.gl-edition-masthead {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 16px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 32px;
}
.gl-mast-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}
.gl-mast-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
.gl-mast-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gl-mast-left .gl-topbar-btn {
  width: 26px;
  height: 26px;
  gap: 3px;
  border-radius: 6px;
}
.gl-mast-left .gl-hamburger-line {
  width: 11px;
}
.gl-mast-wordmark {
  font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 600;
  font-style: normal;
  color: #11110f;
  letter-spacing: -0.075em;
  line-height: 0.95;
  white-space: nowrap;
}
.gl-edition-masthead-text {
  display: flex;
  flex-direction: column;
}
.gl-edition-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(200,210,225,0.36);
  margin-bottom: 8px;
}
.gl-edition-date {
  font-size: 24px;
  font-weight: 800;
  color: var(--g-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.gl-edition-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.gl-edition-stat {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(200,210,225,0.52);
  letter-spacing: 0.01em;
}
.gl-edition-sep {
  color: rgba(200,210,225,0.22);
  font-size: 11px;
  font-weight: 400;
}

/* Left-side panel — content stays visible on the right */
.gl-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}
.gl-menu-inner {
  width: 292px;
  max-width: 85vw;
  height: 100%;
  background: #0a0b0e;
  border-right: 1px solid rgba(255,255,255,0.09);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 60px 0 48px; /* top clears the sticky topbar visually */
  -webkit-overflow-scrolling: touch;
}
.gl-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 12px;
  width: 100%;
}
.gl-menu-item {
  font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: rgba(235,235,245,0.68);
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 14px;
  border-radius: 10px;
  text-align: left;
  width: 100%;
  transition: transform 0.14s cubic-bezier(0.34,1.3,0.64,1), color 0.12s, background 0.12s;
  transform-origin: left center;
}
.gl-menu-item:hover {
  transform: scale(1.06);
  color: #fff;
  background: rgba(255,255,255,0.05);
}
.gl-menu-item--on {
  color: #fff;
  background: rgba(255,255,255,0.04);
}
.gl-menu-topic {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(235,235,245,0.45);
  padding: 6px 14px;
}
.gl-menu-topic:hover {
  color: rgba(235,235,245,0.88);
}
.gl-menu-topic.gl-menu-item--on {
  color: inherit;
}
.gl-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 10px 14px;
  width: calc(100% - 28px);
}

/* ── Main content area ── */
.gl-main {
  flex: 1;
  min-width: 0;
  min-height: 0; /* was 100dvh — must be 0 so flex constrains height */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background: var(--g-bg);
}

/* Mobile: pad content above bottom nav on non-Today pages */
@media (max-width: 767px) {
  .gf2-page,
  .gs2-page,
  .gp-page,
  .g-play-page {
    padding-bottom: 72px;
  }
}

/* ── Mobile bottom nav ── */
.gl-mobile-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  height: 64px;
  display: flex;
  align-items: stretch;
  background: rgba(10,11,14,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--g-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.gl-mobile-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--g-ink-muted);
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  transition: color 0.15s;
}
.gl-mobile-nav-tab--on { color: var(--g-ink); }
.gl-mobile-nav-tab--on svg { filter: drop-shadow(0 0 6px rgba(255,255,255,0.18)); }

/* ================================================================
   TODAY PAGE — DENSE EDITORIAL LAYOUT
   ================================================================ */
/* ── Today page — vibrant gradient background ── */
.gl-page-header { display: none; }

.gl-today {
  /* background-color is overridden inline (React) with the active topic tint.
     background-image layers depth gradients on top — neutral darks only so
     the dynamic colour shows through cleanly. */
  background-image:
    radial-gradient(ellipse 140% 55% at 50% 0%,   rgba(0,0,0,0.62) 0%, transparent 55%),
    radial-gradient(ellipse 140% 55% at 50% 100%, rgba(0,0,0,0.58) 0%, transparent 60%);
  background-color: #04050A;
  transition: background-color 0.45s ease;
  min-height: 100%;
  position: relative;
}
/* Today/Home page: white/neutral atmospheric glow via ::before so it renders
   above the element background-image and is not suppressed by dark depth overlays */
.gl-today-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #030405;
}
.gl-today-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 46% 12%, rgba(255,255,255,0.24), transparent 36%),
    radial-gradient(circle at 58% 22%, rgba(255,255,255,0.14), transparent 34%),
    radial-gradient(circle at 35% 42%, rgba(255,255,255,0.08), transparent 38%);
}
.gl-today-home > * {
  position: relative;
  z-index: 1;
}
/* Main column: mobile is full-width */
.gl-today-main {
  padding-bottom: 80px;
}
/* Right-hand panel: hidden on mobile */
.gl-rhs-panel {
  display: none;
}

.gl-today-header {
  padding: 24px 16px 16px;
}
.gl-today-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--g-ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 4px;
}
.gl-today-date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
  margin: 0 0 6px;
}
.gl-today-sub {
  font-size: 14px;
  color: var(--g-ink-muted);
  margin: 0;
  line-height: 1.4;
}

/* ── Feature grid: hero (left) + 2 side cards (right) ── */
.gl-feature-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 16px 20px;
}
.gl-feat-hero .gt2-hero {
  margin: 0;
  min-height: 340px;
}
.gl-feat-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gl-feat-side .gt2-scard--medium {
  min-height: 160px;
}

/* ── Generic section ── */
.gl-section {
  padding: 0 0 28px;
}
.gl-section-hd {
  padding: 28px 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gl-section-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--g-ink);
  letter-spacing: -0.025em;
  margin: 0;
}

/* ── Topic section rows ── */
.gl-topic-row {
  padding: 0 0 8px;
}
.gl-topic-row-hd {
  padding: 16px 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gl-topic-row-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  color: var(--g-ink);
}
.gl-topic-row-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--g-ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s;
}
.gl-topic-row-more:hover { color: var(--g-ink); }
.gl-topic-row-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 0 16px;
}
.gl-topic-row-cards .gt2-scard--small {
  min-height: 140px;
}

/* ================================================================
   TOPIC FEED PAGE
   ================================================================ */
.gl-topic-feed {
  background: var(--g-bg);
  min-height: 100%;
  padding-bottom: 80px;
}
.gl-topic-feed-header {
  padding: 20px 16px 16px;
}
.gl-back-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 12px;
  display: block;
  transition: color 0.12s;
}
.gl-back-btn:hover { color: var(--g-ink); }
.gl-topic-feed-title {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 8px;
}
.gl-topic-feed-meta {
  font-size: 13px;
  color: var(--g-ink-muted);
  margin: 0;
}
.gl-topic-feed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px;
}
.gl-topic-feed-grid .gt2-scard--large {
  grid-column: 1 / -1;
}
.gl-topic-feed-empty {
  grid-column: 1 / -1;
  color: var(--g-ink-muted);
  font-size: 14px;
  padding: 40px 0;
  text-align: center;
}

/* ================================================================
   HOMEPAGE TOPIC BAR
   Sticky below the topbar; single scrollable row of topic tabs.
   ================================================================ */

.gl-tb-sticky {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(6,7,10,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Scroll row */
.gl-tb-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 56px 10px 16px; /* extra-right leaves room for the fade + last chip peeks */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gl-tb-scroll::-webkit-scrollbar { display: none; }

/* Right-edge gradient — makes scrollability obvious */
.gl-tb-fade {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 56px;
  background: linear-gradient(to right, rgba(6,7,10,0) 0%, rgba(6,7,10,0.94) 80%);
  pointer-events: none;
}

/* Individual chip */
.gl-tb-item {
  flex-shrink: 0;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.09);
  background: transparent;
  color: rgba(200,212,225,0.42);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: color 0.13s, border-color 0.13s, background 0.13s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.3;
}

/* Hover: preview the topic colour (uses CSS custom prop set inline per chip) */
.gl-tb-item:hover {
  color: var(--gl-tb-color, rgba(235,238,245,0.90));
  border-color: var(--gl-tb-color, rgba(255,255,255,0.22));
}

/* Selected state: bold text in topic colour */
.gl-tb-item--on {
  color: var(--gl-tb-color, rgba(235,238,245,0.98));
  font-weight: 700;
  border-color: var(--gl-tb-color, rgba(255,255,255,0.36));
  background: rgba(255,255,255,0.05);
}
.gl-tb-item--on:hover {
  color: var(--gl-tb-color, rgba(235,238,245,1));
  border-color: var(--gl-tb-color, rgba(255,255,255,0.45));
}

/* Empty state when selected topic has no stories */
.gl-tb-empty {
  color: var(--g-ink-muted);
  font-size: 15px;
  padding: 80px 16px;
  text-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .gl-tb-scroll {
    padding: 12px 64px 12px 32px;
    gap: 8px;
  }
  .gl-tb-item { font-size: 13.5px; padding: 6px 15px; }
  .gl-tb-fade { width: 64px; }
}

/* ================================================================
   TOPIC NAV RAIL
   Mobile: horizontal scrollable strip pinned below topbar.
   Desktop: vertical sticky left column, floating on page gradient.
   ================================================================ */

/* Mobile: horizontal topic strip */
.gl-rail-outer {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(4,5,10,0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gl-rail-outer::-webkit-scrollbar { display: none; }

.gl-rail {
  display: flex;
  flex-direction: row;
  padding: 0 8px;
  min-width: max-content;
  gap: 0;
}

/* ── Topic nav panel base (mobile = horizontal strip on dark bar) ── */
.gl-topic-nav-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 8px;
  min-width: max-content;
  gap: 0;
}
.gl-topic-nav-title {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 8px 10px;
  white-space: nowrap;
  line-height: 1.45;
  color: rgba(255,255,255,0.85);
  text-align: left;
}
.gl-topic-nav-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}
.gl-topic-nav-item {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 8px 10px;
  white-space: nowrap;
  line-height: 1.45;
  color: rgba(255,255,255,0.52);
  text-align: left;
  transition: color 0.15s ease;
}
.gl-topic-nav-item:hover { color: rgba(255,255,255,0.85); }
.gl-topic-nav-item.is-active { color: rgba(255,255,255,0.95); font-weight: 700; }

/* Content column */
.gl-rail-content {
  width: 100%;
  min-width: 0;
}

/* ── Topic page heading + sub-topic filter ── */
.gl-tp-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 28px 16px 10px;
}

/* Pinned topic heading.
   background-color uses the CSS custom property set by inline style, so the tint
   follows the active topic. background-image replicates gl-today's own radial-gradient
   treatment — using individual background-* properties (not the shorthand) avoids
   overriding background-image from the CSS class. The element itself is the mask;
   no ::before extension is needed or used.
   z-index: 200 creates a stacking context; story cards (z-index: auto) paint below it. */
.gl-tp-pinned-header {
  position: sticky;
  top: 44px;   /* mobile: below the horizontal topic rail (~44px) */
  z-index: 200;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--gl-tp-bg, #04050A);
  background-image:
    radial-gradient(ellipse 140% 55% at 50% 0%,   rgba(0,0,0,0.62) 0%, transparent 55%),
    radial-gradient(ellipse 140% 55% at 50% 100%, rgba(0,0,0,0.58) 0%, transparent 60%);
  isolation: isolate;
  overflow: visible;
}

/* Fade zone: cards below dissolve smoothly rather than snapping behind the header edge.
   z-index: -1 keeps it within the stacking context but still above cards externally. */
.gl-tp-pinned-header::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -80px;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--gl-tp-bg, #04050A),
    transparent
  );
}

@media (min-width: 1024px) {
  /* Desktop: gl-tp-pinned-header is no longer used in gl-today-unified.
     Kept for TopicEditionScreen (.gl-today.gl-te) which still renders it. */
  .gl-tp-pinned-header {
    top: 0;
  }
}

/* Push programmatic scrollIntoView below the sticky heading */
.gl-tp-section {
  scroll-margin-top: 100px;
}

/* Breathing room between the sticky heading and the first card row */
.gl-tp-section > .gl-section {
  padding-top: 48px;
}

/* Explicit z-index keeps card grid unambiguously below the heading stacking context */
.gt2-story-grid--topic {
  position: relative;
  z-index: 1;
}

/* ── Unified scroll container (Today + topics in one continuous flow) ── */
.gl-unified-scroll {
  position: relative;
  z-index: 1;
  background-color: #fbf8ef;
  background-image: radial-gradient(rgba(17,17,15,0.12) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ── Topic section inline divider (replaces the old sticky banner) ── */
.gl-tp-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 48px 16px 12px;
}
.gl-tp-section-header::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--g-line, rgba(17,17,15,0.08));
  flex-shrink: 0;
}
.gl-tp-section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1;
}
.gl-tp-header-text {
  display: flex;
  flex-direction: column;
}
.gl-tp-title {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 6px;
  color: var(--g-ink);
}
.gl-tp-count {
  color: rgba(175,182,200,0.55);
  font-size: 13px;
  font-weight: 500;
}
.gl-tp-subtopics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 4px;
}
.gl-tp-sub {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: rgba(165,172,195,0.65);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 5px 13px;
  transition: background 0.15s ease, color 0.15s ease;
}
.gl-tp-sub:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(215,220,235,0.85);
}
.gl-tp-sub--on {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.18);
  font-weight: 700;
}
.gl-tp-empty {
  color: rgba(165,172,195,0.55);
  font-size: 15px;
  padding: 80px 16px;
  text-align: center;
  margin: 0;
}

.gl-next-topic-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 40px 0 0;
  padding: 22px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: background 0.15s;
}
.gl-next-topic-banner:hover {
  background: rgba(255,255,255,0.08);
}
.gl-next-topic-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  flex-shrink: 0;
}
.gl-next-topic-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  flex: 1;
}
.gl-next-topic-arrow {
  font-size: 20px;
  flex-shrink: 0;
  opacity: 0.8;
}
@media (min-width: 768px) {
  .gl-tp-header { padding: 36px 32px 12px; }
  .gl-tp-title { font-size: 52px; }
  .gl-tp-subtopics { padding: 10px 32px 4px; }
}

/* Topic section heading */
.gl-topic-section {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 8px;
  margin-top: 8px;
}

.gl-ts-hd {
  padding: 20px 16px 8px;
}

.gl-ts-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .gl-ts-title { font-size: 26px; }
  .gl-ts-hd { padding: 24px 32px 12px; }
}

/* ================================================================
   TOPIC EDITION SCREEN
   Same layout as Today screen; tinted background set inline per topic.
   ================================================================ */
.gl-te-nav {
  padding: 14px 16px 0;
}
.gl-te-empty {
  color: var(--g-ink-muted);
  font-size: 15px;
  padding: 80px 16px;
  text-align: center;
}
@media (min-width: 768px) {
  .gl-te-nav { padding: 24px 32px 0; }
}

/* ================================================================
   DESKTOP — full-width content (no sidebar)  ≥ 768px
   ================================================================ */
@media (min-width: 768px) {
  .gl-mobile-nav { display: none; }

  /* Today: full-width, no capping max-width so it fills the viewport */
  .gl-today {
    padding-bottom: 40px;
    max-width: 100%;
  }
  .gl-today-header {
    padding: 32px 32px 20px;
  }
  .gl-today-title { font-size: 40px; }
  .gl-edition-masthead { padding: 40px 40px 32px; }
  .gl-edition-date { font-size: 40px; letter-spacing: -0.03em; }
  .gl-edition-label { font-size: 11px; letter-spacing: 0.22em; }
  .gl-edition-stat { font-size: 13px; }
  .gl-topbar { padding: 0 24px; }
  .gl-topbar-logo { height: 22px; }
  .gl-topbar-count { font-size: 12px; }

  /* Feature grid: side-by-side on desktop */
  .gl-feature-grid {
    flex-direction: row;
    padding: 0 32px 20px;
    gap: 16px;
    align-items: stretch;
  }
  .gl-feat-hero {
    flex: 3;
    min-width: 0;
  }
  .gl-feat-hero .gt2-hero {
    min-height: 520px;
    height: 100%;
  }
  .gl-feat-side {
    flex: 1.4;
    min-width: 0;
    min-height: 0;
  }
  .gl-feat-side .gt2-scard--medium {
    flex: 1;
    min-height: 0;
    height: calc(50% - 5px);
  }

  /* Section padding */
  .gl-section-hd { padding: 32px 32px 16px; }
  .gl-section { padding: 0 0 36px; }
  .gt2-story-grid { padding: 0 32px; gap: 24px; }
  /* Hero band sits fully above the story grid — clear visual break */
  .gl-feature-grid + .gl-section {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 8px;
  }
  .gt2-section-hd { padding: 32px 32px 16px; }
  .gt2-daily-row { padding: 0 32px; }
  .gt2-topics-wrap { padding: 0 32px; }

  /* Topic rows */
  .gl-topic-row-hd { padding: 20px 32px 12px; }
  .gl-topic-row-cards { padding: 0 32px; }

  /* Topic feed page */
  .gl-topic-feed { padding-bottom: 40px; }
  .gl-topic-feed-header { padding: 32px 32px 20px; }
  .gl-topic-feed-title { font-size: 72px; }
  .gl-topic-feed-grid { padding: 0 32px; grid-template-columns: 1fr 1fr 1fr 1fr; }

  /* Today story grid: 3-col on tablet; topic grid: 4-col */
  .gt2-story-grid { grid-template-columns: 1fr 1fr 1fr; }
  .gt2-story-grid--topic { grid-template-columns: repeat(4, 1fr); }
  .gt2-scard--large { grid-column: 1 / -1; min-height: 420px; }
  .gt2-scard--medium { min-height: 270px; }
  .gt2-scard--small { min-height: 200px; }
  .gt2-daily-card { min-height: 160px; }

  /* Hero on desktop */
  .gt2-hero { margin: 0; min-height: 480px; }
  .gt2-hero-title { font-size: 28px; }
  .gt2-hero-summary { -webkit-line-clamp: 4; }

  /* Feed: 3-col on tablet */
  .gf2-grid { grid-template-columns: 1fr 1fr 1fr; padding: 0 32px; }
  .gf2-card-wrap--large { grid-column: 1 / -1; }
  .gf2-filters { top: 0; }

  /* Globe: side panel */
  .gs2-layout { flex-direction: row; }
  .gs2-globe-wrap { flex: 2; min-height: 500px; }
  .gs2-sidebar { flex-direction: column; flex: 0 0 240px; border-top: none; border-left: 1px solid var(--g-line); }

  /* Story detail: full viewport (no sidebar offset needed) */
  .gbd-backdrop {
    left: 0;
    align-items: center;
    justify-content: center;
  }
  .gbd2-screen {
    border-radius: var(--g-radius-xl);
    max-width: min(80vw, 720px);
    max-height: 90dvh;
  }
  .gbd-screen {
    border-radius: var(--g-radius-xl);
    max-width: min(80vw, 600px);
    max-height: 90dvh;
  }
}

/* ================================================================
   RIGHT-HAND PANEL COMPONENTS (mobile-hidden, desktop-shown)
   ================================================================ */

.gl-rhs-eyebrow {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200,210,225,0.38);
  margin-bottom: 8px;
}

/* Video box */
.gl-rhs-video-box {
  flex-shrink: 0;
}
.gl-rhs-video {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  border: 1px solid rgba(255,255,255,0.10);
  background: #0a0b0e;
}
.gl-rhs-video-dots {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  justify-content: center;
}
.gl-rhs-video-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}
.gl-rhs-video-dot--on { background: rgba(255,255,255,0.75); }

/* (news predictor removed) */

/* ================================================================
   TODAY 2-COLUMN — main + RHS panel  ≥ 1024px
   ================================================================ */
@media (min-width: 1024px) {
  .gl-today {
    display: grid;
    grid-template-columns: 1fr 360px;
    align-items: start;
    padding-bottom: 0;
  }
  .gl-page-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px 24px;
    position: sticky;
    top: 0;
    z-index: 130;
    background: #fffaf0;
    border-bottom: 1px solid rgba(40, 28, 18, 0.08);
    box-shadow: 0 8px 30px rgba(40, 28, 18, 0.06);
  }
  /* Desktop: narrow rail column (sized to content) + full-width content */
  .gl-today-main {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 32px;
    align-items: start;
    padding-bottom: 80px;
  }
  /* Desktop rail: vertical sticky column, no background/border (floats on gradient) */
  .gl-today-main > .gl-rail-outer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: none;
    border: none;
    padding: 20px 16px 20px 24px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .gl-today-main > .gl-rail-outer::-webkit-scrollbar { display: none; }
  /* Desktop: cream panel — stretches full column height, footer pinned to bottom */
  .gl-today-main > .gl-rail-outer .gl-topic-nav-panel {
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    width: 190px;
    padding: 14px 14px;
    background: rgba(255,252,242,0.68);
    border: 1px solid rgba(17,17,15,0.10);
    border-radius: 18px;
    gap: 0;
  }
  .gl-today-main > .gl-rail-outer .gl-topic-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
  }
  .gl-today-main > .gl-rail-outer .gl-topic-nav-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0;
    color: rgba(17,17,15,0.52);
    padding: 5px 6px;
    line-height: 1.4;
    border-radius: 6px;
    outline: none;
  }
  .gl-today-main > .gl-rail-outer .gl-topic-nav-item:focus-visible {
    outline: 2px solid rgba(17,17,15,0.18);
    outline-offset: 2px;
  }
  /* Small empty diamond (rotated square) before every nav item */
  .gl-today-main > .gl-rail-outer .gl-topic-nav-item::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border: 1.5px solid rgba(17,17,15,0.22);
    border-radius: 1px;
    transform: rotate(45deg);
    transition: border-color 0.15s;
  }
  .gl-today-main > .gl-rail-outer .gl-topic-nav-item:hover {
    color: rgba(17,17,15,0.78);
  }
  .gl-today-main > .gl-rail-outer .gl-topic-nav-item:hover::before {
    border-color: rgba(17,17,15,0.40);
  }
  .gl-today-main > .gl-rail-outer .gl-topic-nav-item.is-active {
    color: #11110f;
    font-weight: 600;
    background: rgba(17,17,15,0.06);
  }
  .gl-today-main > .gl-rail-outer .gl-topic-nav-item.is-active::before {
    border-color: rgba(17,17,15,0.52);
  }
  .gl-rhs-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 24px 24px 16px;
    /* scrolls with the page — not sticky */
    align-self: start;
  }
  /* Hide the "Live Coverage" eyebrow above the video — no sidebar labels */
  .gl-rhs-video-box .gl-rhs-eyebrow {
    display: none;
  }
  /* Video fills the panel width at 4:3 ratio (more impactful than 16:9) */
  .gl-rhs-video {
    aspect-ratio: 4/3;
  }
  /* Topic pages: single-column — the 360px right panel is collapsed so the
     story grid can use the full content width. Applies to both TodayScreen
     topic views (.gl-today--topic) and TopicEditionScreen (.gl-today.gl-te). */
  .gl-today--topic,
  .gl-today.gl-te {
    grid-template-columns: 1fr;
  }
  .gl-today--topic .gl-rhs-panel,
  .gl-today.gl-te .gl-rhs-panel {
    display: none;
  }
  /* Unified scroll: always full-width — right panel is hidden for all sections */
  .gl-today-unified {
    grid-template-columns: 1fr;
  }
  .gl-today-unified .gl-rhs-panel {
    display: none;
  }

  /* ── Topic masonry grid: Parts A + B ───────────────────────────────────────
     Selector specificity 0,3,1 — same as styles.css body.desktop.tab-today
     .gt2-story-grid rule; wins by later source order (this file loads after).
     5-card repeating pattern tiles cleanly: every 5 cards = exactly 2 rows.
       card 1 (5n+1): wide (span 2 cols)
       card 2 (5n+2): normal
       card 3 (5n+3): tall  (span 2 rows)
       card 4 (5n+4): normal
       card 5 (5n)  : wide (span 2 cols)
     Result per 5-card block:
       R1: [wide][wide][normal][tall↓]
       R2: [normal][wide][wide][tall↓]
  ────────────────────────────────────────────────────────────────────────── */
  body.desktop.tab-today .gt2-story-grid--topic {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
    gap: 16px;
    padding: 0 16px;
    overflow: hidden;
  }
  body.desktop.tab-today .gt2-story-grid--topic .gt2-scard { min-height: 0; }
  body.desktop.tab-today .gt2-story-grid--topic > *:nth-child(5n+1) { grid-column: span 2; }
  body.desktop.tab-today .gt2-story-grid--topic > *:nth-child(5n+3) { grid-row: span 2; }
  body.desktop.tab-today .gt2-story-grid--topic > *:nth-child(5n)   { grid-column: span 2; }

  /* Same masonry for TopicEditionScreen (body class: tab-topic-feed) */
  body.desktop.tab-topic-feed .gt2-story-grid--topic {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
    gap: 16px;
    padding: 0 16px;
    overflow: hidden;
  }
  body.desktop.tab-topic-feed .gt2-story-grid--topic .gt2-scard { min-height: 0; }
  body.desktop.tab-topic-feed .gt2-story-grid--topic > *:nth-child(5n+1) { grid-column: span 2; }
  body.desktop.tab-topic-feed .gt2-story-grid--topic > *:nth-child(5n+3) { grid-row: span 2; }
  body.desktop.tab-topic-feed .gt2-story-grid--topic > *:nth-child(5n)   { grid-column: span 2; }

  /* ── Unified scroll: sticky masthead below the sticky page header ──
     gl-page-header is 74px (20px padding-top + 38px content + 16px padding-bottom).
     The masthead sticks immediately below it. Both use var(--g-bg) background so
     there is no colour gap between them as they stack during scroll.
     overflow:hidden ensures the cream background cleanly clips any cards that
     scroll up into the masthead area (fixes card bleed-through bug). */
  .gl-today-unified .gl-edition-masthead {
    position: sticky;
    top: 74px;
    z-index: 120;
    margin-bottom: 0;
    background-color: var(--g-bg, #EBE7D8);
    overflow: hidden;
  }
  /* Fade zone removed — z-index:-1 pseudo-elements on sticky elements cause
     card bleed-through in most browsers. overflow:hidden on the masthead now
     handles the boundary cleanly. */
  .gl-today-unified .gl-edition-masthead::after {
    display: none;
  }
  /* Topic sections: scroll-margin clears both sticky layers so scrollIntoView
     lands visibly below the masthead, not behind it. */
  .gl-today-unified .gl-tp-section {
    scroll-margin-top: 240px;
  }
}

/* ================================================================
   WIDE DESKTOP — 4-col grids  ≥ 1200px
   ================================================================ */
@media (min-width: 1200px) {
  .gt2-story-grid { grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
  .gt2-story-grid--topic { grid-template-columns: repeat(4, 1fr); }
  .gt2-scard--large { grid-column: 1 / -1; min-height: 500px; }
  .gt2-scard--medium { min-height: 300px; }
  .gt2-scard--small { min-height: 220px; }
  .gf2-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .gl-feature-grid { gap: 24px; }
  .gl-feat-hero { flex: 2.5; }
  .gl-feat-side { flex: 1.5; }
  .gl-section-hd { padding: 36px 40px 18px; }
  .gt2-story-grid { padding: 0 40px; }
  .gl-edition-masthead { padding: 48px 48px 36px; }
  .gl-edition-date { font-size: 52px; }
  .gl-topbar { padding: 0 32px; }
}

/* ================================================================
   MOBILE FINE-TUNING  ≤ 640px
   ================================================================ */
@media (max-width: 640px) {
  .gt2-daily-row {
    grid-template-columns: 1fr;
  }
  .gt2-daily-card { min-height: 100px; flex-direction: row; align-items: center; }
  .gt2-daily-card-eyebrow { display: none; }
  .gt2-daily-card-desc { display: none; }
  .gt2-globe-card-icon { display: none; }
  .gt2-daily-fact-stat { font-size: 18px; }

  .gl-topic-row-cards { grid-template-columns: 1fr 1fr; }
  .gl-topic-feed-title { font-size: 36px; }

  .hl-cards { grid-template-columns: 1fr; }
  .cg-row-hd { display: none; }
  .cg-row { grid-template-columns: 42px 1fr 70px 56px; }
}

/* ================================================================
   PHASE 2 UPGRADES — typography, gradient titles, article detail,
   source rail, fact chips, coloured word highlighting
   ================================================================ */

/* ── Gradient page titles ─────────────────────────────────────── */
.gl-gradient-title {
  background: linear-gradient(110deg, #fff 0%, #a0aacc 45%, #6b8cff 80%, #b06eff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gl-topic-gradient-title {
  background: linear-gradient(110deg,
    #e8e8f0 0%,
    #c0c8e8 40%,
    var(--topic-hex, #6b8cff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Desktop typography scale ────────────────────────────────── */
@media (min-width: 768px) {
  .gl-today-title {
    font-size: 64px;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .gl-today-sub {
    font-size: 17px;
    opacity: 0.62;
    margin-top: 6px;
  }
  .gl-section-title {
    font-size: 28px;
    font-weight: 700;
  }
  .gl-topic-row-title {
    font-size: 22px;
  }
  .gt2-hero-title {
    font-size: 32px;
  }
  .gt2-scard--large { min-height: 440px; }
  .gt2-scard--medium { min-height: 280px; }
}

/* ── Topic glow — coloured wash behind card text body ────────── */
.gt2-scard-topic-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Left edge accent — 3 px topic-colour strip ─────────────── */
.gt2-scard-edge {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  z-index: 3;
  border-radius: 12px 0 0 12px;
  pointer-events: none;
}

/* ── Source count stat — top of card body ────────────────────── */
.gt2-scard-sources {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1;
  margin-bottom: 5px;
  text-transform: uppercase;
}

/* ── Hero source count — above headline ──────────────────────── */
.gt2-hero-src-count {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Stronger card overlays ──────────────────────────────────── */
.gt2-scard { position: relative; background-size: cover; background-position: center; }

/* ── Fix: styles.css legacy large-card grid pinning ─────────────
   styles.css:13521 has body.desktop.tab-today .gt2-scard--large
   { grid-column:1/1; grid-row:1/3 } — leftover single-hero hack.
   With variedCardSize producing multiple large cards, every one
   landed in the same grid cell causing titles to visually stack.
   Same-specificity rule here wins by later cascade order.        */
body.desktop.tab-today .gt2-scard--large {
  grid-column: 1 / -1;
  grid-row: auto;
}
/* Broader guard: any gt2-story-grid on any desktop tab */
body.desktop .gt2-story-grid .gt2-scard--large {
  grid-column: 1 / -1;
  grid-row: auto;
}

/* ── Hero glow inside article detail ────────────────────────── */
.gbd2-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Colored word highlighting in article title ──────────────── */
.gbd2-color-word {
  color: var(--topic-color, #f5a524);
  font-weight: 700;
}

/* ── Article title bigger everywhere ────────────────────────── */
.gbd2-hero-title {
  font-size: 22px;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ── Fact chips ──────────────────────────────────────────────── */
.gbd2-fact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.gbd2-fact-chip {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
  font-weight: 500;
  background: rgba(255,255,255,0.04);
  line-height: 1.3;
}

/* ── Mobile: source section shown inline ────────────────────── */
.gbd2-mobile-sources { display: block; }

/* ── Source rail: hidden on mobile ──────────────────────────── */
.gbd2-source-rail { display: none; }

/* ── Article detail: full screen on desktop ─────────────────── */
@media (min-width: 768px) {
  /* Backdrop covers full viewport, overlapping sidebar */
  .gbd-backdrop {
    left: 0 !important;
    align-items: stretch;
    justify-content: stretch;
  }
  /* Screen becomes full-height grid: main col + source rail */
  .gbd2-screen {
    display: grid !important;
    grid-template-columns: 1fr 340px;
    grid-template-rows: 1fr;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow: hidden;
  }
  /* Main col: hero + scroll + foot stacked */
  .gbd2-main-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,0.07);
  }
  .gbd2-main-col .gbd2-hero {
    flex: 0 0 auto;
    min-height: 300px;
    max-height: 46vh;
  }
  .gbd2-main-col .gbd2-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 24px 32px;
  }
  .gbd2-main-col .gbd2-foot {
    flex: 0 0 auto;
  }
  /* Hero title much larger on desktop */
  .gbd2-hero-title {
    font-size: 36px;
    line-height: 1.15;
  }
  /* Source rail */
  .gbd2-source-rail {
    display: flex;
    flex-direction: column;
    background: #0a0b0e;
    overflow: hidden;
  }
  .gbd2-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
  }
  .gbd2-rail-head-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(200,200,220,0.40);
  }
  .gbd2-rail-head-count {
    font-size: 12px;
    font-weight: 700;
  }
  .gbd2-rail-items {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 0;
  }
  .gbd2-rail-item {
    display: flex;
    gap: 10px;
    padding: 10px 18px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.12s;
    align-items: flex-start;
  }
  .gbd2-rail-item:hover { background: rgba(255,255,255,0.04); }
  .gbd2-rail-item--lead {
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.09);
  }
  .gbd2-rail-thumb {
    width: 52px;
    height: 40px;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
  }
  .gbd2-rail-body {
    flex: 1;
    min-width: 0;
  }
  .gbd2-rail-src {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(200,210,230,0.40);
    margin-bottom: 3px;
  }
  .gbd2-rail-title-text {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(235,235,245,0.82);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .gbd2-rail-time {
    font-size: 10px;
    color: rgba(200,200,220,0.35);
    margin-top: 4px;
    display: block;
  }
  .gbd2-rail-foot {
    flex-shrink: 0;
    padding: 16px 18px;
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  .gbd2-rail-cta {
    display: block;
    text-align: center;
    padding: 10px 16px;
    border-radius: var(--g-radius-sm);
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
  }
  .gbd2-rail-cta:hover { background: rgba(255,255,255,0.06); }
  /* Hide inline mobile sources on desktop */
  .gbd2-mobile-sources { display: none; }
  /* Read btn in foot uses topic color (set inline) */
  .gbd2-read-btn {
    border-radius: 8px;
    font-weight: 700;
  }
}

/* ================================================================
   EDITORIAL STORY PAGE — gbd2-ep-* namespace
   Full-page editorial layout: 2-col hero + sticky rail
   ================================================================ */

/* ── Page wrapper ─────────────────────────────────────────────── */
.gbd2-ep-page {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--g-font);
}
.gbd2-ep-page--sober { background: #060608 !important; }

/* ── Sticky topbar ────────────────────────────────────────────── */
.gbd2-ep-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(8,8,12,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  z-index: 20;
}
.gbd2-ep-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(220,224,238,0.80);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background 0.12s;
}
.gbd2-ep-back:hover { background: rgba(255,255,255,0.10); }
.gbd2-ep-brand {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(235,238,248,0.90);
}
.gbd2-ep-share {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.11);
  color: rgba(220,224,238,0.80);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
}
.gbd2-ep-share:hover { background: rgba(255,255,255,0.12); }

/* ── Scroll root ──────────────────────────────────────────────── */
.gbd2-ep-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════════════════════════════════════════
   HERO — single column mobile, two-column desktop
   ════════════════════════════════════════════════════════════════ */
.gbd2-ep-hero {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 36px 20px 36px;
  min-height: 340px;
  position: relative;
}

/* ── Hero left ────────────────────────────────────────────────── */
.gbd2-ep-hero-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* Metadata strip */
.gbd2-ep-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gbd2-ep-meta-topic { font-weight: 800; }
.gbd2-ep-meta-sep   { color: rgba(255,255,255,0.20); }
.gbd2-ep-meta-loc   { color: rgba(200,208,228,0.55); }
.gbd2-ep-meta-srcs  { color: rgba(200,208,228,0.55); }
.gbd2-ep-meta-time  { color: rgba(200,208,228,0.40); font-weight: 600; }

/* Big editorial headline */
.gbd2-ep-headline {
  font-size: clamp(34px, 9vw, 52px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}

/* Coloured entity spans inside headline */
.gbd2-sp-entity {
  font-weight: 900;
  position: relative;
}

/* Deck — 1-2 sentences */
.gbd2-ep-deck {
  font-size: 15px;
  line-height: 1.60;
  color: rgba(200,208,228,0.72);
  margin: 0;
  max-width: 600px;
}

/* Source favicon chips */
.gbd2-ep-src-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.gbd2-ep-src-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 3px 9px 3px 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(235,238,248,0.72);
  white-space: nowrap;
}
.gbd2-ep-src-chip--lead {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
  color: rgba(235,238,248,0.90);
}
.gbd2-ep-src-more {
  font-size: 10.5px;
  color: rgba(200,208,228,0.38);
  font-weight: 500;
  padding: 0 4px;
}

/* ── Hero right: image collage ────────────────────────────────── */
.gbd2-ep-hero-right {
  display: flex;
  flex-direction: column;
}

.gbd2-ep-collage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Main image card ──────────────────────────────────────────── */
.gbd2-ep-collage-main {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background-size: cover;
  background-position: center top;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35);
}

/* Dark scrim: bottom-dark, top-light */
.gbd2-ep-collage-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.04) 0%,
    rgba(0,0,0,0.08) 45%,
    rgba(0,0,0,0.62) 100%
  );
  pointer-events: none;
}

/* Topic colour tint overlay */
.gbd2-ep-collage-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Bottom bar holding badge + source count */
.gbd2-ep-collage-foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

/* Source domain badge (bottom-left of image) */
.gbd2-ep-collage-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.03em;
}

/* N sources badge (bottom-right of image) */
.gbd2-ep-collage-coverage {
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Gradient fallback (no image available) ───────────────────── */
.gbd2-ep-collage-main--gradient {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0;
}
.gbd2-ep-collage-grad-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px;
  gap: 10px;
}
.gbd2-ep-collage-grad-topic {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0.92;
}
.gbd2-ep-collage-grad-srcs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gbd2-ep-collage-grad-src {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.46);
}
.gbd2-ep-collage-grad-brand {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.22);
  text-transform: uppercase;
}

/* ── Secondary source mini-cards ─────────────────────────────── */
.gbd2-ep-collage-mini {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gbd2-ep-collage-mini-src-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.gbd2-ep-collage-mini-src {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(200,208,228,0.50);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gbd2-ep-collage-mini-time {
  font-size: 9.5px;
  color: rgba(200,208,228,0.32);
  white-space: nowrap;
}
.gbd2-ep-collage-mini-title {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.42;
  color: rgba(230,234,248,0.75);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   BODY — below hero, single column mobile / 2-col desktop
   ════════════════════════════════════════════════════════════════ */
.gbd2-ep-body {
  display: flex;
  flex-direction: column;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Main content column ──────────────────────────────────────── */
.gbd2-ep-main {
  padding: 32px 20px;
  min-width: 0;
}

/* Depth toggle */
.gbd2-ep-depth-row {
  display: flex;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  overflow: hidden;
  width: fit-content;
  margin-bottom: 8px;
}

/* Content section */
.gbd2-ep-section {
  padding-top: 36px;
}
.gbd2-ep-section:first-child { padding-top: 0; }

/* Section heading */
.gbd2-ep-section-h {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: rgba(240,242,252,0.95);
  margin: 0 0 16px;
  line-height: 1.2;
}

/* Bullet list */
.gbd2-ep-bullets {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.gbd2-ep-bullet {
  font-size: 16px;
  color: rgba(215,220,238,0.84);
  line-height: 1.65;
  padding-left: 20px;
  position: relative;
}
.gbd2-ep-bullet::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bc, rgba(200,208,228,0.28));
  flex-shrink: 0;
}
.gbd2-ep-bullets--brief .gbd2-ep-bullet {
  font-size: 17px;
  font-weight: 500;
}

/* Body text */
.gbd2-ep-body-text {
  font-size: 16px;
  line-height: 1.70;
  color: rgba(215,220,238,0.82);
  margin: 0;
}

/* ── Facts grid ───────────────────────────────────────────────── */
.gbd2-ep-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.gbd2-ep-fact-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
}
.gbd2-ep-fact-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200,208,228,0.38);
  margin-bottom: 4px;
}
.gbd2-ep-fact-value {
  font-size: 14px;
  font-weight: 700;
  color: rgba(235,238,248,0.90);
  line-height: 1.3;
}

/* ── Source cards (mobile inline) ────────────────────────────── */
.gbd2-ep-mobile-sources { display: block; }

.gbd2-ep-src-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.gbd2-ep-src-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 2px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 12px;
  text-decoration: none;
  transition: background 0.12s;
}
.gbd2-ep-src-card:hover { background: rgba(255,255,255,0.06); }
.gbd2-ep-src-card--lead {
  border-left-width: 2px;
  background: rgba(255,255,255,0.05);
}
.gbd2-ep-src-card-thumb {
  width: 64px; height: 48px;
  border-radius: 6px;
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.gbd2-ep-src-card-body { flex: 1; min-width: 0; }
.gbd2-ep-src-card-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.gbd2-ep-src-card-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(200,208,228,0.50);
  flex: 1; min-width: 0;
}
.gbd2-ep-src-card-time {
  font-size: 10px;
  color: rgba(200,208,228,0.32);
  white-space: nowrap;
}
.gbd2-ep-src-card-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(225,228,242,0.80);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Source label pill — informational only, no colour coding ──── */
.gbd2-src-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(200, 208, 228, 0.38);
  border: 1px solid rgba(200, 208, 228, 0.16);
  border-radius: 3px;
  padding: 1px 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Related stories ──────────────────────────────────────────── */
.gbd2-ep-section--related { padding-top: 44px; }

/* ── Organisations responding ─────────────────────────────────── */
/* Informational only. No donation styling, no urgency treatment.  */
.gbd2-ep-orgs-section {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(200, 208, 228, 0.08);
}
.gbd2-ep-orgs-heading {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(200, 208, 228, 0.38);
  margin: 0 0 10px;
}
.gbd2-ep-orgs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gbd2-ep-orgs-link {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(200, 208, 228, 0.55);
  text-decoration: none;
  line-height: 1.45;
  transition: color 0.15s;
}
.gbd2-ep-orgs-link:hover { color: rgba(220, 228, 248, 0.80); }
.gbd2-ep-orgs-arrow {
  font-size: 10px;
  opacity: 0.45;
}

.gbd2-ep-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.gbd2-ep-related-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  flex-direction: column;
}
.gbd2-ep-related-card:hover { background: rgba(255,255,255,0.06); }
.gbd2-ep-related-img {
  width: 100%;
  height: 90px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.gbd2-ep-related-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gbd2-ep-related-topic {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.gbd2-ep-related-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.42;
  color: rgba(230,234,248,0.84);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gbd2-ep-related-meta {
  font-size: 10px;
  color: rgba(200,208,228,0.36);
  font-weight: 500;
}

/* ── Right rail (hidden on mobile) ───────────────────────────── */
.gbd2-ep-rail { display: none; }

/* ── Mobile sticky CTA ────────────────────────────────────────── */
.gbd2-ep-mobile-cta {
  padding: 10px 16px;
  padding-bottom: env(safe-area-inset-bottom, 10px);
  background: rgba(8,8,12,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.gbd2-ep-mobile-cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.12s;
}
.gbd2-ep-mobile-cta-btn:hover { opacity: 0.88; }

/* ════════════════════════════════════════════════════════════════
   DESKTOP OVERRIDES (≥ 860px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 860px) {

  /* Hero: 2-column grid */
  .gbd2-ep-hero {
    display: grid;
    grid-template-columns: 55% 45%;
    grid-template-rows: auto;
    min-height: 540px;
    padding: 64px 72px 72px;
    gap: 52px;
    align-items: center;
  }
  .gbd2-ep-hero-left { gap: 18px; }

  /* Big editorial headline — desktop */
  .gbd2-ep-headline {
    font-size: clamp(48px, 5.2vw, 82px);
    line-height: 1.03;
  }
  .gbd2-ep-deck {
    font-size: 17px;
    max-width: 540px;
  }

  /* Image collage — larger card on desktop */
  .gbd2-ep-collage-main {
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    background-position: center center;
  }
  .gbd2-ep-collage-main--gradient { aspect-ratio: 4 / 3; }
  .gbd2-ep-collage-grad-topic { font-size: 44px; }
  .gbd2-ep-collage-grad-inner { padding: 28px 30px; gap: 12px; }

  /* Body: 2-column below hero */
  .gbd2-ep-body {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 0;
    padding: 0;
    align-items: start;
  }

  /* Main content */
  .gbd2-ep-main {
    padding: 48px 56px 64px;
    border-right: 1px solid rgba(255,255,255,0.06);
  }
  .gbd2-ep-section-h { font-size: 26px; }
  .gbd2-ep-bullet    { font-size: 17px; }
  .gbd2-ep-body-text { font-size: 17px; }

  /* Rail: visible on desktop, sticky */
  .gbd2-ep-rail {
    display: block;
  }
  /* ── Premium brown editorial rail ── */
  .gbd2-ep-rail-sticky {
    position: sticky;
    top: 0;
    max-height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, #5a3b2a 0%, #3f291f 100%);
    border-left: 1px solid rgba(255,235,210,0.14);
    box-shadow: -6px 0 32px rgba(45,25,15,0.22), 0 18px 45px rgba(45,25,15,0.28);
  }
  .gbd2-ep-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px 14px;
    border-bottom: 1px solid rgba(255,235,210,0.12);
    flex-shrink: 0;
  }
  .gbd2-ep-rail-head-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(248,239,227,0.62);
  }
  .gbd2-ep-rail-head-count {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: rgba(248,239,227,0.90);
  }
  .gbd2-ep-rail-items {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
  }
  .gbd2-ep-rail-item {
    display: flex;
    gap: 10px;
    padding: 11px 18px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,235,210,0.08);
    border-left: 2px solid transparent;
    transition: background 0.11s;
    align-items: flex-start;
  }
  .gbd2-ep-rail-item:hover { background: rgba(255,235,210,0.07); }
  .gbd2-ep-rail-item--lead {
    background: rgba(255,235,210,0.06);
    border-bottom-color: rgba(255,235,210,0.14);
  }
  .gbd2-ep-rail-thumb {
    width: 54px; height: 40px;
    border-radius: 5px;
    background-size: cover; background-position: center;
    flex-shrink: 0;
    opacity: 0.88;
  }
  .gbd2-ep-rail-body { flex: 1; min-width: 0; }
  .gbd2-ep-rail-src-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
  }
  .gbd2-ep-rail-src-name {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(248,239,227,0.55);
    flex: 1; min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gbd2-ep-rail-time {
    font-size: 9.5px;
    color: rgba(248,239,227,0.38);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .gbd2-ep-rail-title {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.42;
    color: rgba(248,239,227,0.88);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .gbd2-ep-rail-foot {
    flex-shrink: 0;
    padding: 14px 18px;
    border-top: 1px solid rgba(255,235,210,0.12);
  }
  .gbd2-ep-rail-cta {
    display: block;
    text-align: center;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,200,160,0.32);
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(248,239,227,0.88);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    letter-spacing: 0.01em;
    background: rgba(0,0,0,0.14);
  }
  .gbd2-ep-rail-cta:hover {
    background: rgba(255,200,160,0.12);
    border-color: rgba(255,200,160,0.50);
  }
  /* Source label tag inside the rail — warm beige instead of cold grey */
  .gbd2-ep-rail .gbd2-src-label {
    color: rgba(248,239,227,0.50);
    border-color: rgba(248,239,227,0.18);
  }

  /* ── Related organisations panel in story sidebar ── */
  .gbd2-rail-orgs {
    flex-shrink: 0;
    background: rgba(255,244,225,0.055);
    border-top: 1px solid rgba(255,235,210,0.12);
    padding: 16px 18px 18px;
  }
  .gbd2-rail-orgs-head {
    margin-bottom: 4px;
  }
  .gbd2-rail-orgs-title {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(248,239,227,0.50);
  }
  .gbd2-rail-orgs-sub {
    font-size: 10.5px;
    color: rgba(248,239,227,0.38);
    margin: 0 0 12px;
    line-height: 1.45;
    font-style: italic;
  }
  .gbd2-rail-orgs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .gbd2-rail-org-card {
    padding: 11px 12px;
    background: #fffaf0;
    border: 1px solid rgba(60,42,28,0.12);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(45,25,10,0.08);
  }
  .gbd2-rail-org-name {
    font-size: 12px;
    font-weight: 700;
    color: rgba(40,24,10,0.92);
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .gbd2-rail-org-rel {
    font-size: 11px;
    color: rgba(60,42,28,0.58);
    line-height: 1.4;
    margin: 0 0 7px;
  }
  .gbd2-rail-org-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 9px;
  }
  .gbd2-rail-org-chip {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(60,42,28,0.52);
    background: rgba(60,42,28,0.06);
    border: 1px solid rgba(60,42,28,0.12);
    border-radius: 4px;
    padding: 2px 6px;
  }
  .gbd2-rail-org-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .gbd2-rail-org-btn {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(40,24,10,0.82);
    background: rgba(60,42,28,0.08);
    border: 1px solid rgba(60,42,28,0.18);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
    letter-spacing: 0.01em;
  }
  .gbd2-rail-org-btn:hover {
    background: rgba(60,42,28,0.14);
    border-color: rgba(60,42,28,0.28);
  }
  .gbd2-rail-org-btn--ext {
    color: rgba(60,42,28,0.50);
    background: transparent;
    border-color: rgba(60,42,28,0.10);
  }
  .gbd2-rail-org-btn--ext:hover {
    color: rgba(60,42,28,0.72);
    background: rgba(60,42,28,0.06);
    border-color: rgba(60,42,28,0.18);
  }
  .gbd2-rail-orgs-note {
    font-size: 9px;
    color: rgba(248,239,227,0.28);
    margin: 12px 0 0;
    line-height: 1.4;
    font-style: italic;
  }

  /* Facts grid — 3 columns on desktop */
  .gbd2-ep-facts-grid { grid-template-columns: repeat(3, 1fr); }

  /* Related grid — 2 columns */
  .gbd2-ep-related-grid { grid-template-columns: repeat(2, 1fr); }

  /* Sources shown in rail on desktop — hide inline mobile list */
  .gbd2-ep-mobile-sources { display: none; }

  /* No mobile CTA bar on desktop */
  .gbd2-ep-mobile-cta { display: none; }
}

@media (min-width: 1200px) {
  .gbd2-ep-hero { padding: 80px 100px 88px; gap: 72px; min-height: 600px; }
  .gbd2-ep-main { padding: 56px 72px 80px; }
  .gbd2-ep-body { grid-template-columns: 1fr 370px; }
}

/* Keep old gbd2-sp-entity highlight style working */
.gbd2-sp-entity { font-weight: 900; }

/* ================================================================
   PHASE 3 — PAGE THEMES
   Vibrant per-page backgrounds, topic feed improvements,
   Games / Globe / Profile header upgrades.
   ================================================================ */

/* ── Topic feed — themed background + subtitle ───────────────── */
.gl-topic-feed {
  /* base is overridden by JS inline style — this is the safe fallback */
  background: #04050A;
  min-height: 100%;
  padding-bottom: 80px;
}

/* Subtitle row under the big topic title */
.gl-topic-feed-subtitle {
  font-size: 14px;
  color: rgba(200,210,225,0.52);
  margin: 4px 0 10px;
  line-height: 1.5;
  max-width: 480px;
}

/* Story count now coloured via inline style — remove old muted override */

/* Related global stories section */
.gl-topic-related {
  margin-top: 24px;
  padding-top: 4px;
}
.gl-topic-related-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 14px;
}
.gl-topic-related-line {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
  opacity: 0.72;
}
.gl-topic-related-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200,210,225,0.45);
}
@media (min-width: 768px) {
  .gl-topic-related-hd { padding: 0 32px 14px; }
  .gl-topic-feed-subtitle { font-size: 16px; }
}

/* ── Feed page — background handled via JS inline style ──────── */
.gf2-page {
  min-height: 100%;
  padding-bottom: 32px;
  /* background comes from inline style; fallback: */
  background: #04050A;
}

/* ── Games (Play) screen — vibrant amber/green/blue header ───── */
.ph-screen {
  min-height: 100%;
  padding: 0 0 32px;
  background:
    radial-gradient(ellipse 100% 52% at 12% 0%, rgba(224,164,88,0.42) 0%, rgba(10,11,14,0) 55%),
    radial-gradient(ellipse 70% 40% at 88% 8%, rgba(34,197,94,0.22) 0%, rgba(10,11,14,0) 50%),
    radial-gradient(ellipse 50% 28% at 55% 95%, rgba(56,189,248,0.14) 0%, transparent 55%),
    #04050A;
  position: relative;
}

/* Header wrapper holds the header content + its ambient glow */
.ph-header-wrap {
  position: relative;
  padding-bottom: 4px;
  overflow: hidden;
}
.ph-header-glow {
  position: absolute;
  inset: -60px -40px 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 20%, rgba(224,164,88,0.20) 0%, transparent 65%);
  pointer-events: none;
}
.ph-header {
  padding: 28px 20px 20px;
  position: relative;
}
.ph-header-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(224,164,88,0.70);
  margin-bottom: 8px;
}
.ph-title {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin: 0 0 8px;
  background: linear-gradient(110deg, #fff 0%, #f5e0b0 45%, #E0A458 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ph-sub {
  font-size: 14px;
  color: rgba(200,210,225,0.50);
  margin: 0;
}

/* ── Globe / Map screen — blue/green atlas header ────────────── */
.gs2-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 100% 50% at 20% 0%, rgba(56,189,248,0.38) 0%, rgba(10,11,14,0) 52%),
    radial-gradient(ellipse 65% 38% at 85% 6%, rgba(34,197,94,0.18) 0%, rgba(10,11,14,0) 48%),
    #04050A;
}
.gs2-header-wrap {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.gs2-header-glow {
  position: absolute;
  inset: -60px -40px 0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 20%, rgba(56,189,248,0.14) 0%, transparent 65%);
  pointer-events: none;
}
.gs2-header {
  padding: 24px 20px 16px;
  position: relative;
}
.gs2-header-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(56,189,248,0.65);
  margin-bottom: 8px;
}
.gs2-title {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.035em;
  margin: 0 0 6px;
  background: linear-gradient(110deg, #fff 0%, #b0dff8 45%, #38bdf8 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gs2-sub {
  font-size: 13px;
  color: rgba(200,210,225,0.48);
  margin: 0;
}
.gs2-sidebar {
  background: rgba(4,5,10,0.60);
  border-top: 1px solid rgba(56,189,248,0.12);
}
/* Widen sidebar on desktop so article titles have room to breathe */
@media (min-width: 1024px) {
  .gs2-sidebar { flex: 0 0 280px !important; }
}

/* ── Profile screen — warm gold/amber background ─────────────── */
.g-profile {
  min-height: 100%;
  padding: 24px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background:
    radial-gradient(ellipse 90% 45% at 15% 0%, rgba(212,168,83,0.32) 0%, rgba(10,11,14,0) 52%),
    radial-gradient(ellipse 60% 35% at 88% 95%, rgba(99,102,241,0.14) 0%, rgba(10,11,14,0) 50%),
    #04050A;
  position: relative;
}
.g-profile-hero-glow {
  position: absolute;
  top: -40px; left: -40px; right: -40px;
  height: 260px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,168,83,0.14) 0%, transparent 65%);
  pointer-events: none;
}
.g-profile-streak-card {
  background: linear-gradient(135deg, rgba(212,168,83,0.18) 0%, rgba(13,13,16,0.95) 60%);
  border: 1px solid rgba(212,168,83,0.26);
  box-shadow: 0 0 32px rgba(212,168,83,0.10);
}
.g-profile-streak-num {
  background: linear-gradient(110deg, #fff 0%, #f5e0b0 45%, #d4a853 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Article detail — topic background handled via inline style ─ */
/* .gbd2-story-page bg is now set by JS; keep the sober override */
.gbd2-story-page--sober {
  background: #0C0C0E !important;
}
/* Scroll area inside article detail — needs transparent bg so page bg shows */
.gbd2-story-page .gbd2-screen.gbd2-screen--fullpage {
  background: transparent;
}

/* gf2-filters: sticky pill bar — defined in main section above */

/* ── Desktop responsive for new elements ─────────────────────── */
@media (min-width: 768px) {
  .ph-header { padding: 36px 32px 24px; }
  .ph-header-eyebrow { font-size: 10px; }
  .ph-title { font-size: 56px; }
  .gs2-header { padding: 32px 32px 20px; }
  .gs2-title { font-size: 44px; }
  .g-profile { padding: 32px 32px 60px; max-width: 700px; margin: 0 auto; }
  .gl-topic-feed-subtitle { max-width: 640px; }
}
@media (min-width: 1024px) {
  .ph-title { font-size: 72px; }
  .gs2-title { font-size: 56px; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH / PRE-APP — responsive layout system
   ═══════════════════════════════════════════════════════════════ */

/* When in auth or onboarding: remove the 430px phone-frame cap */
body.globly-preapp #root {
  max-width: 100%;
}
body.globly-preapp {
  background: #EBE7D8 !important;
}

/* ── Landing page: hero column wraps all non-CTA content ─────── */

.g-lp-hero-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Desktop: two-column layout — hero left, CTA right */
@media (min-width: 860px) {
  body.globly-preapp .g-lp {
    flex-direction: row;
    overflow: hidden;
  }

  /* Hero column fills the left with gradient; all children positioned inside it */
  .g-lp-hero-col {
    flex: 1 1 58%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background: var(--ob-bg, radial-gradient(ellipse 130% 110% at 50% 28%, #1C2A3A 0%, #1C2030 22%, #1C1E28 45%, #1C1C20 68%, #1C1C1E 100%));
  }

  /* Video expands to fill the entire hero slot — gradient shows when video absent */
  .g-lp-hero-col .gs-video-banner {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 0;
    height: 100%;
    z-index: 0;
  }
  .g-lp-hero-col .gs-video-banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Bottom scrim — ensures headline is legible over any media */
  .g-lp-hero-col::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 58%;
    background: linear-gradient(to bottom, transparent 0%, rgba(12,10,22,0.65) 52%, rgba(8,7,18,0.94) 100%);
    z-index: 1;
    pointer-events: none;
  }

  /* Logo stays at top-left above scrim */
  .g-lp-hero-col .g-lp-header {
    position: relative;
    z-index: 3;
  }

  /* Ticker not needed in the full-bleed hero */
  .g-lp-hero-col .g-ticker { display: none; }

  /* Headline overlaid at the bottom of the hero */
  .g-lp-hero-col .g-lp-text-group {
    position: absolute;
    bottom: 44px;
    left: 36px;
    right: 36px;
    z-index: 2;
    padding: 0;
  }

  /* Rotating card and spacer not needed in desktop hero */
  .g-lp-hero-col .g-lp-card-zone { display: none; }
  .g-lp-spacer { display: none; }

  /* Right-hand CTA panel — cream on desktop */
  .g-lp-bot {
    flex: 0 0 380px;
    padding: 40px 40px max(32px, env(safe-area-inset-bottom, 32px));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    background: rgba(245,241,230,0.88);
    border-left: 1px solid rgba(17,17,15,0.08);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }
  /* Hero column bottom scrim: warm dark instead of cold navy */
  .g-lp-hero-col::after {
    background: linear-gradient(to bottom, transparent 0%, rgba(20,15,8,0.58) 52%, rgba(14,10,4,0.92) 100%);
  }
  /* Desktop hero text overlays dark video scrim — keep white for legibility */
  .g-lp-hero-col .g-lp-headline   { color: #ffffff !important; }
  .g-lp-hero-col .g-lp-headline em { color: rgba(255,255,255,0.82) !important; }
  .g-lp-hero-col .g-lp-subtitle    { color: rgba(255,255,255,0.55) !important; }
  .g-lp-hero-col .g-lp-wordmark    { color: rgba(255,255,255,0.48) !important; }
  .g-lp-hero-col .g-globe-svg      { color: rgba(255,255,255,0.62) !important; }
  /* Desktop logo sits over video — force white over any later cascade */
  .gl-landing-brand {
    color: #fffaf0 !important;
    text-shadow: 0 2px 18px rgba(0,0,0,0.35) !important;
    font-size: clamp(28px, 2.3vw, 38px);
  }
}

/* Mira intro — base styles, visible at all widths */
.g-mira-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  margin-bottom: auto;
  margin-top: 32px;
}
.g-mira-intro-text {
  font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
  font-size: 27px;
  font-weight: 500;
  font-style: normal;
  color: var(--g-ink, #11110F);
  text-align: center;
  line-height: 1.45;
  margin: 0;
  max-width: 230px;
  letter-spacing: -0.01em;
}
.g-mira-cursor {
  animation: g-mira-blink 1s step-end infinite;
}
@keyframes g-mira-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Auth form screens (signup / login) ───────────────────────── */

.g-authscreen {
  position: absolute;
  inset: 0;
  background: var(--ob-bg, radial-gradient(ellipse 130% 110% at 50% 28%, #1C2A3A 0%, #1C2030 22%, #1C1E28 45%, #1C1C20 68%, #1C1C1E 100%));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  font-family: 'Figtree', system-ui, sans-serif;
}

.g-authscreen-card {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
}

.g-authscreen-back {
  align-self: flex-start;
  background: none;
  border: none;
  color: rgba(255,255,255,0.38);
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-bottom: 28px;
  transition: color 0.15s;
}
.g-authscreen-back:hover { color: rgba(255,255,255,0.7); }

.g-authscreen-logo {
  height: 26px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 22px;
  opacity: 0.88;
}

.g-authscreen-title {
  font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
  font-style: normal;
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 6px;
}

.g-authscreen-sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.38);
  margin: 0 0 28px;
}

.g-authscreen-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.g-authscreen-error {
  background: rgba(220,38,38,0.13);
  border: 1px solid rgba(220,38,38,0.3);
  color: #FCA5A5;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 4px;
  line-height: 1.4;
}

.g-authscreen-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 10px;
  display: block;
}

.g-authscreen-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.g-authscreen-input::placeholder { color: rgba(255,255,255,0.2); }
.g-authscreen-input:focus {
  border-color: rgba(124,58,237,0.65);
  background: rgba(124,58,237,0.07);
}

.g-authscreen-btn-primary {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: none;
  background: #7C3AED;
  color: #fff;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  letter-spacing: -0.01em;
  transition: background 0.15s, transform 0.1s;
}
.g-authscreen-btn-primary:hover  { background: #6D28D9; }
.g-authscreen-btn-primary:active { transform: scale(0.98); background: #5B21B6; }

.g-authscreen-switch {
  font-size: 13px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  margin: 0;
}
.g-authscreen-switch-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.g-authscreen-switch-btn:hover { color: #fff; }

/* ── Onboarding screens — full-bleed gradient, centred content ── */

@media (min-width: 640px) {
  /* ob-page stays 100% wide so its gradient fills the viewport */
  body.globly-preapp .ob-page {
    max-width: none;
    margin: 0;
    width: 100%;
  }

  /* Centre the headline + options within the full-bleed page */
  body.globly-preapp .ob-content-zone {
    width: min(780px, calc(100vw - 48px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
  }

  /* Centre and cap the Continue button */
  body.globly-preapp .ob-foot {
    display: flex;
    justify-content: center;
    padding-left: 40px;
    padding-right: 40px;
  }
  body.globly-preapp .ob-foot .ob-btn {
    width: min(780px, calc(100vw - 48px));
    max-width: none;
  }
}

/* ── Onboarding wrapper + back button ─────────────────────────── */

/* Shared wrapper returned by OnboardingFlow — back button lives here,
   outside ob-page's overflow:hidden and isolation:isolate */
.ob-flow-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.ob-back-btn {
  position: absolute;
  top: 8px;
  left: 20px;
  z-index: 200;
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-title, 'Newsreader', Georgia, serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  padding: 6px 4px;
  transition: color 0.15s;
}
.ob-back-btn:hover { color: rgba(255,255,255,0.8); }

/* Push content zone down only when the back button is visible */
.ob-flow-wrap.has-back .ob-content-zone {
  padding-top: 46px;
}

/* ── Sign-out in hamburger menu ───────────────────────────────── */

.gl-menu-signout {
  padding: 12px 20px 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: auto;
}
.gl-menu-signout-btn {
  width: 100%;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.45);
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.gl-menu-signout-btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
}

/* ── Cluster synthesis section (BriefDetailScreen) ──────────────────────── */
.gbd2-ep-synth-section { border-left: 2px solid rgba(255,255,255,0.08); padding-left: 14px; }
.gbd2-ep-synth-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.gbd2-ep-synth-overview {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin: 0 0 16px;
}

/* ── Synthesis badge in GFStorySheet ─────────────────────────────────────── */
.gf-story-synth-badge {
  margin-top: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.30);
}
.gf-story-facts-list--synth {
  margin-top: 10px;
}

/* ================================================================
   DESKTOP FULL-WIDTH UNLOCK  ≥ 1024px
   Lifts the 430px phone-frame cap on #root (styles.css:6923) so the
   Globly app fills the full screen on desktop. Mobile viewports
   (< 1024px) are unaffected — the phone-frame cap stays intact.

   Uses plain #root (no body.desktop JS class) so the fix applies
   immediately on first paint, before MainApp.useEffect fires.
   Specificity 0,1,0 + !important beats styles.css #root (0,1,0,
   no !important). The existing body.desktop #root rule in styles.css
   (0,2,1 + !important) also continues to apply once the class is set.

   body.padding-right was for a SideRail (app.jsx) that is never
   rendered in the Globly flow — already zeroed by the phone-frame
   block at styles.css:6920 (!important). Confirmed dead space, safe
   to zero here too.
   ================================================================ */
@media (min-width: 1024px) {
  #root {
    max-width: none !important;
    width: 100% !important;
    height: 100dvh !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  body {
    justify-content: flex-start !important;
    padding-right: 0 !important;
  }
}

/* ================================================================
   CREAM EDITORIAL THEME
   Full override block — wins by CSS source order (appended last).
   Design tokens cascade through all --g-* variable references;
   hardcoded darks are targeted individually below.
   ================================================================ */

:root {
  /* Surfaces */
  --g-bg:             #EBE7D8;
  --g-bg-2:           #E2DCC9;
  --g-surface:        #F5F1E6;
  --g-surface-2:      #FFFCF2;
  /* Ink */
  --g-ink:            #11110F;
  --g-ink-2:          #2C2C28;
  --g-ink-muted:      rgba(17,17,15,0.55);
  --g-meta:           rgba(17,17,15,0.44);
  --g-line:           rgba(17,17,15,0.08);
  /* Topic palette — editorial weight, readable on cream */
  --g-conflict:       #c41c1c;
  --g-health:         #bf1867;
  --g-economy:        #c27b0a;
  --g-climate:        #1a7a35;
  --g-politics:       #6d28a0;
  --g-trade:          #c24a0f;
  --g-migration:      #0272a0;
  --g-governance:     #6d28a0;
  --g-debt:           #2a3590;
  --g-energy:         #b06000;
  --g-agriculture:    #386617;
  --g-infrastructure: #1148a0;
  --g-diplomacy:      #4a189a;
  /* Auth / onboarding token override — remaps all var(--lt-*) and var(--ob-bg)
     usages in the dark-theme block of styles.css to cream equivalents.
     Source-order wins: this :root block loads after styles.css. */
  --ob-bg:
    radial-gradient(circle at 50% 16%, rgba(17,17,15,0.07), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(17,17,15,0.11), transparent 44%),
    #EBE7D8;
  --lt-bg:       #EBE7D8;
  --lt-surface:  rgba(255,252,242,0.78);
  --lt-text:     #11110F;
  --lt-text2:    rgba(17,17,15,0.62);
  --lt-text3:    rgba(17,17,15,0.44);
  --lt-shadow:   0 2px 10px rgba(45,38,22,0.09);
}

/* ── Top bar ── */
.gs-topbar {
  background: rgba(235,231,216,0.93) !important;
  backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(17,17,15,0.07) !important;
}

/* ── Bottom navigation ── */
.gs-nav {
  background: rgba(235,231,216,0.97) !important;
  border-top: 1px solid rgba(17,17,15,0.08) !important;
}
.gs-nav-tab svg { color: var(--g-ink-muted); }
.gs-nav-tab--on svg {
  filter: drop-shadow(0 0 5px rgba(17,17,15,0.14)) !important;
}

/* ── Topic chip bar (horizontal scroll strip) ── */
.gl-tb-sticky {
  background: rgba(235,231,216,0.94) !important;
  border-bottom: 1px solid rgba(17,17,15,0.07) !important;
}
.gl-tb-item {
  color: var(--g-ink-muted);
  border-color: rgba(17,17,15,0.10);
}
.gl-tb-item:hover {
  color: var(--gl-tb-color, var(--g-ink));
  border-color: var(--gl-tb-color, rgba(17,17,15,0.22));
}
.gl-tb-item--on {
  background: rgba(17,17,15,0.05);
  color: var(--gl-tb-color, var(--g-ink));
  border-color: var(--gl-tb-color, rgba(17,17,15,0.26));
  font-weight: 700;
}
.gl-tb-fade {
  background: linear-gradient(to right, rgba(235,231,216,0) 0%, rgba(235,231,216,0.96) 80%);
}

/* ── Mobile topic nav rail ── */
.gl-rail-outer {
  background: rgba(235,231,216,0.94) !important;
  border-bottom: 1px solid rgba(17,17,15,0.07) !important;
}

/* ── Pinned topic page header (TopicEditionScreen only — gl-today-unified uses gl-edition-masthead) ── */
.gl-tp-pinned-header {
  background-color: var(--gl-tp-bg, var(--g-bg)) !important;
  background-image: none !important;
}
.gl-tp-pinned-header::after {
  background: linear-gradient(to bottom, var(--gl-tp-bg, var(--g-bg)) 0%, transparent 100%) !important;
}

/* ── Unified masthead: constant cream — no per-topic tint ── */
.gl-today-unified .gl-edition-masthead {
  background-color: var(--g-bg) !important;
}
.gl-today-unified .gl-edition-masthead::after {
  display: none !important;
}

/* ── Today / topic page shell ── */
.gl-today {
  background-image: none !important;
  background-color: var(--g-bg) !important;
}
.gl-today-home {
  background: var(--g-bg) !important;
  overflow: visible !important;
}
.gl-today-home::before { display: none !important; }
.gl-today-home > * { position: static !important; z-index: auto !important; }

/* ── Topic page title: force dark ink (overrides inline color + text-shadow) ── */
.gl-tp-title {
  color: var(--g-ink) !important;
  text-shadow: none !important;
}
.gl-tp-count { color: var(--g-ink-muted) !important; }
.gl-tp-sub {
  background: rgba(255,252,242,0.55) !important;
  border-color: rgba(17,17,15,0.13) !important;
  color: rgba(17,17,15,0.52) !important;
  font-size: 13px !important;
}
.gl-tp-sub--on {
  color: var(--g-ink) !important;
  background: rgba(17,17,15,0.06) !important;
  border-color: rgba(17,17,15,0.20) !important;
}

/* ── Topic Edition standalone page ── */
.gl-topic-gradient-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--g-ink) !important;
  color: var(--g-ink) !important;
}
.gl-topic-feed-meta { color: var(--g-ink-muted) !important; }
.gl-back-btn { color: var(--g-ink-muted) !important; }
.gl-back-btn:hover { color: var(--g-ink) !important; }

/* ── Card borders and hover shadow ── */
.gt2-scard {
  border: 1px solid rgba(17,17,15,0.18) !important;
  box-shadow: 0 2px 12px rgba(45,38,22,0.10);
}
.gt2-scard:hover {
  box-shadow: 0 14px 36px rgba(45,38,22,0.16);
  border-color: rgba(17,17,15,0.26) !important;
}
/* Hero card border */
.gt2-hero {
  border: 1px solid rgba(17,17,15,0.14);
  box-shadow: 0 2px 16px rgba(45,38,22,0.10);
}
.gt2-hero:not(.gt2-hero--sober):hover {
  box-shadow: 0 14px 40px rgba(45,38,22,0.18);
  border-color: rgba(17,17,15,0.22);
}
/* TopicHeroCard border */
.thc-card {
  border: 1px solid rgba(17,17,15,0.14);
  box-shadow: 0 2px 14px rgba(45,38,22,0.10);
}
.thc-card:hover {
  box-shadow: 0 12px 36px rgba(45,38,22,0.16);
  border-color: rgba(17,17,15,0.22);
}

/* ── Sober no-image cards: dark text on cream background ──
   Compound selectors (.--noimg + .--sober) ensure vivid non-sober gradient cards
   (which need white text over their dark bottom gradient) are unaffected. ── */

/* TodayStoryCard sober+noimg */
.gt2-scard--noimg.gt2-scard--sober .gt2-scard-title   { color: var(--g-ink); text-shadow: none; }
.gt2-scard--noimg.gt2-scard--sober .gt2-scard-matters { color: var(--g-ink-muted); text-shadow: none; }
.gt2-scard--noimg.gt2-scard--sober .gt2-scard-meta,
.gt2-scard--noimg.gt2-scard--sober .gt2-scard-country,
.gt2-scard--noimg.gt2-scard--sober .gt2-scard-time    { color: var(--g-meta); }
.gt2-scard--noimg.gt2-scard--sober .gt2-scard-keytag  { color: var(--g-ink-muted); }
/* Non-image cards of any kind: no shadow needed (no dark background underneath) */
.gt2-scard--noimg .gt2-scard-title { text-shadow: none; }

/* Mobile: cap large card title at a safe readable size */
@media (max-width: 700px) {
  .gt2-scard--large .gt2-scard-title {
    font-size: 22px;
    line-height: 1.16;
    -webkit-line-clamp: 3;
  }
  .gt2-scard--medium .gt2-scard-title,
  .gt2-scard--small .gt2-scard-title {
    font-size: 14px;
    line-height: 1.18;
    -webkit-line-clamp: 2;
  }
}

/* TodayHero sober+noimg */
.gt2-hero--noimg.gt2-hero--sober .gt2-hero-title   { color: var(--g-ink); text-shadow: none; }
.gt2-hero--noimg.gt2-hero--sober .gt2-hero-summary  { color: var(--g-ink-muted); }
.gt2-hero--noimg.gt2-hero--sober .gt2-hero-meta     { color: var(--g-meta); }
.gt2-hero--noimg.gt2-hero--sober .gt2-hero-eyebrow  { color: var(--g-meta); }
.gt2-hero--noimg.gt2-hero--sober .gt2-pill--region  {
  color: var(--g-ink-muted);
  background: rgba(17,17,15,0.05);
  border-color: rgba(17,17,15,0.12);
}
.gt2-hero--noimg.gt2-hero--sober .gt2-hero-cta {
  color: rgba(17,17,15,0.75);
  background: rgba(17,17,15,0.07);
  border-color: rgba(17,17,15,0.16);
}
.gt2-hero--noimg.gt2-hero--sober .gt2-hero-cta:hover { background: rgba(17,17,15,0.11); }

/* TopicHeroCard sober+noimg */
.thc-card--noimg.thc-card--sober .thc-title    { color: var(--g-ink); text-shadow: none; }
.thc-card--noimg.thc-card--sober .thc-meta,
.thc-card--noimg.thc-card--sober .thc-location,
.thc-card--noimg.thc-card--sober .thc-time     { color: var(--g-ink-muted); }
.thc-card--noimg.thc-card--sober .thc-cta {
  color: rgba(17,17,15,0.72);
  border-color: rgba(17,17,15,0.16);
  background: rgba(17,17,15,0.06);
}
.thc-card--noimg.thc-card--sober .thc-cta:hover { background: rgba(17,17,15,0.10); }

/* ── Article brief panel ── */
.gbd2-screen--sober { background: var(--g-bg) !important; }
.gbd2-foot {
  background: linear-gradient(to top, var(--g-bg) 70%, transparent) !important;
}

/* ── Article editorial page (full-screen) ── */
.gbd2-ep-page--sober { background: var(--g-bg) !important; }

.gbd2-ep-topbar {
  background: rgba(235,231,216,0.93) !important;
  border-bottom-color: rgba(17,17,15,0.07) !important;
}
.gbd2-ep-back {
  color: var(--g-ink-2) !important;
  background: rgba(17,17,15,0.05) !important;
  border-color: rgba(17,17,15,0.10) !important;
}
.gbd2-ep-back:hover { background: rgba(17,17,15,0.09) !important; }
.gbd2-ep-brand  { color: var(--g-ink) !important; }
.gbd2-ep-share  {
  background: rgba(17,17,15,0.05) !important;
  border-color: rgba(17,17,15,0.10) !important;
  color: var(--g-ink-2) !important;
}
.gbd2-ep-share:hover { background: rgba(17,17,15,0.09) !important; }

/* Headline and metadata — cream page, not over image */
.gbd2-ep-headline { color: var(--g-ink) !important; text-shadow: none !important; }
.gbd2-ep-meta-sep  { color: rgba(17,17,15,0.20) !important; }
.gbd2-ep-meta-loc  { color: var(--g-ink-muted) !important; }
.gbd2-ep-meta-srcs { color: var(--g-ink-muted) !important; }
.gbd2-ep-meta-time { color: var(--g-meta)       !important; }
.gbd2-ep-deck      { color: var(--g-ink-muted)  !important; }

/* Source chips in hero */
.gbd2-ep-src-chip {
  background: rgba(17,17,15,0.05) !important;
  border-color: rgba(17,17,15,0.10) !important;
  color: var(--g-ink-2) !important;
}
.gbd2-ep-src-chip--lead {
  background: rgba(17,17,15,0.08) !important;
  border-color: rgba(17,17,15,0.18) !important;
  color: var(--g-ink) !important;
}
.gbd2-ep-src-more { color: var(--g-meta) !important; }

/* Body dividers */
.gbd2-ep-body      { border-top-color: var(--g-line) !important; }
.gbd2-ep-depth-row { border-color: var(--g-line) !important; }

/* Article body content */
.gbd2-ep-section-h  { color: var(--g-ink)    !important; }
.gbd2-ep-bullet     { color: var(--g-ink-2)  !important; }
.gbd2-ep-body-text  { color: var(--g-ink-2)  !important; }
.gbd2-ep-synth-overview { color: var(--g-ink-2) !important; }

/* Fact cards */
.gbd2-ep-fact-card  { background: var(--g-surface) !important; border-color: var(--g-line) !important; }
.gbd2-ep-fact-label { color: var(--g-meta)         !important; }
.gbd2-ep-fact-value { color: var(--g-ink)           !important; }

/* Secondary source mini-cards in image collage */
.gbd2-ep-collage-mini {
  background: var(--g-surface) !important;
  border-color: var(--g-line)  !important;
}
.gbd2-ep-collage-mini-src  { color: var(--g-meta)   !important; }
.gbd2-ep-collage-mini-time { color: var(--g-meta)   !important; }
.gbd2-ep-collage-mini-title { color: var(--g-ink-2) !important; }

/* Mobile source cards */
.gbd2-ep-src-card {
  background: var(--g-surface) !important;
  border-color: var(--g-line)  !important;
  border-left-color: var(--g-line) !important;
}
.gbd2-ep-src-card:hover    { background: var(--g-surface-2) !important; }
.gbd2-ep-src-card--lead    { background: var(--g-surface)   !important; }
.gbd2-ep-src-card-name     { color: var(--g-meta)    !important; }
.gbd2-ep-src-card-time     { color: var(--g-meta)    !important; }
.gbd2-ep-src-card-title    { color: var(--g-ink-2)   !important; }
.gbd2-src-label            { color: var(--g-meta)    !important; border-color: rgba(17,17,15,0.12) !important; }

/* Related stories */
.gbd2-ep-related-card {
  background: var(--g-surface) !important;
  border-color: var(--g-line)  !important;
}
.gbd2-ep-related-card:hover  { background: var(--g-surface-2) !important; }
.gbd2-ep-related-title       { color: var(--g-ink-2) !important; }
.gbd2-ep-related-meta        { color: var(--g-meta)  !important; }

/* Orgs section */
.gbd2-ep-orgs-section  { border-top-color: var(--g-line)     !important; }
.gbd2-ep-orgs-heading  { color: var(--g-meta)                !important; }
.gbd2-ep-orgs-link     { color: var(--g-ink-muted)           !important; }
.gbd2-ep-orgs-link:hover { color: var(--g-ink)               !important; }

/* Mobile CTA bar */
.gbd2-ep-mobile-cta {
  background: rgba(235,231,216,0.97) !important;
  border-top-color: var(--g-line)    !important;
}

/* ── Source rail (desktop — original rules inside @media, override with !important) ── */
.gbd2-source-rail    { background: var(--g-surface) !important; }
.gbd2-main-col       { border-right-color: var(--g-line) !important; }
.gbd2-rail-head      { border-bottom-color: var(--g-line) !important; }
.gbd2-rail-head-title { color: var(--g-meta)  !important; }
.gbd2-rail-head-count { color: var(--g-ink)   !important; }
.gbd2-rail-item       { border-bottom-color: rgba(17,17,15,0.05) !important; }
.gbd2-rail-item:hover { background: rgba(17,17,15,0.04) !important; }
.gbd2-rail-item--lead {
  background: rgba(17,17,15,0.03) !important;
  border-bottom-color: rgba(17,17,15,0.06) !important;
}
.gbd2-rail-src        { color: var(--g-meta)  !important; }
.gbd2-rail-title-text { color: var(--g-ink-2) !important; }
.gbd2-rail-time       { color: var(--g-meta)  !important; }
.gbd2-rail-foot       { border-top-color: var(--g-line) !important; }
.gbd2-rail-cta {
  color: var(--g-ink-2)           !important;
  border-color: rgba(17,17,15,0.14) !important;
}
.gbd2-rail-cta:hover { background: rgba(17,17,15,0.04) !important; }

/* ── Timeline dots on cream ── */
.gbd2-tl-dot {
  border-color: rgba(17,17,15,0.20) !important;
  background: var(--g-surface) !important;
}
.gbd2-tl-item--main .gbd2-tl-dot {
  background: var(--g-ink-2)  !important;
  border-color: var(--g-ink)  !important;
}

/* ── Games page ── */
.ph-hero {
  background: linear-gradient(135deg, #F5EDD5 0%, #ECE2C4 50%, #E2D6AA 100%) !important;
  border-color: rgba(160,130,60,0.22) !important;
}
.ph-hero-label { color: #9a7820 !important; }
.ph-card:hover { border-color: rgba(17,17,15,0.14); }

/* ── Profile page ── */
.g-time-input:focus { border-color: rgba(17,17,15,0.22) !important; }

/* ── Hamburger / topbar menu button ── */
.gl-topbar-btn {
  background: rgba(17,17,15,0.04) !important;
  border: 1px solid rgba(17,17,15,0.14) !important;
}
.gl-topbar-btn:hover {
  background: rgba(17,17,15,0.09) !important;
  border-color: rgba(17,17,15,0.22) !important;
}
.gl-topbar-btn--open {
  background: rgba(17,17,15,0.07) !important;
  border-color: rgba(17,17,15,0.20) !important;
}
.gl-hamburger-line { background: rgba(17,17,15,0.82) !important; }

/* ── Mira mascot: dark ink everywhere on cream theme ── */
/* Landing page is now cream; Mira uses currentColor and inherits dark ink */
.g-mira-intro { color: var(--g-ink, #11110F); }

/* ── Body and app-level background ── */
body { background: var(--g-bg) !important; }

/* ── Right-hand panel (desktop today page) ── */
.gl-rhs-eyebrow { color: var(--g-meta) !important; }
.gl-rhs-video {
  border-color: rgba(17,17,15,0.10) !important;
  background: var(--g-surface) !important;
}
.gl-rhs-video-dot { background: rgba(17,17,15,0.16) !important; }
.gl-rhs-video-dot--on { background: rgba(17,17,15,0.55) !important; }

/* ── Cluster synthesis section ── */
.gbd2-ep-synth-section { border-left-color: var(--g-line) !important; }

/* ── Section headings on today page ── */
.gl-section-title { color: var(--g-ink-muted) !important; }

/* ── Hero page heading (desktop) ── */
.gl-edition-masthead,
.gl-edition-date,
.gl-edition-label { color: var(--g-ink) !important; }
.gl-edition-stat  { color: var(--g-meta) !important; }
.gl-edition-sep   { color: var(--g-meta) !important; }
/* Divider under masthead: was rgba(255,255,255,0.06) (invisible on cream) — make it visible */
.gl-edition-masthead { border-bottom-color: var(--g-line) !important; }

/* ── Navigation drawer (hamburger menu) ── */
.gl-menu-inner {
  background: var(--g-surface) !important;
  border-right-color: var(--g-line) !important;
}
.gl-menu-item {
  color: var(--g-ink-muted) !important;
}
.gl-menu-item:hover {
  color: var(--g-ink) !important;
  background: rgba(17,17,15,0.05) !important;
}
.gl-menu-item--on {
  color: var(--g-ink) !important;
  background: rgba(17,17,15,0.04) !important;
}
.gl-menu-topic       { color: var(--g-meta)     !important; }
.gl-menu-topic:hover { color: var(--g-ink-muted) !important; }
.gl-menu-divider     { background: var(--g-line) !important; }

/* ── Feed/Saved page filter strip ── */
.gf2-filters {
  background: rgba(235,231,216,0.94) !important;
  border-bottom-color: rgba(17,17,15,0.07) !important;
}

/* ── Topic feed CSS fallback background ── */
.gl-topic-feed          { background: #EBE7D8 !important; }
.gl-topic-feed-subtitle { color: var(--g-ink-muted) !important; }
.gl-topic-related-hd    { border-top-color: var(--g-line) !important; }
.gl-topic-related-label { color: var(--g-meta) !important; }

/* ── Feed page background ── */
.gf2-page { background: var(--g-bg) !important; }

/* ── Games (Play) page ── */
.ph-screen {
  background:
    radial-gradient(ellipse 100% 52% at 12% 0%, rgba(200,152,60,0.15) 0%, rgba(235,231,216,0) 55%),
    radial-gradient(ellipse 70% 40% at 88% 8%, rgba(22,160,70,0.08) 0%, rgba(235,231,216,0) 50%),
    #EBE7D8 !important;
}
.ph-title {
  background: linear-gradient(110deg, #11110F 0%, #7a5210 50%, #9a6818 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.ph-sub { color: var(--g-ink-muted) !important; }

/* ── Globe / Map page ── */
.gs2-page {
  background:
    radial-gradient(ellipse 100% 50% at 20% 0%, rgba(0,120,200,0.10) 0%, rgba(235,231,216,0) 52%),
    radial-gradient(ellipse 65% 38% at 85% 6%, rgba(20,160,80,0.06) 0%, rgba(235,231,216,0) 48%),
    #EBE7D8 !important;
}
.gs2-title {
  background: linear-gradient(110deg, #11110F 0%, #0a5080 50%, #0272a0 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.gs2-sub     { color: var(--g-ink-muted)  !important; }
.gs2-sidebar {
  background: rgba(235,231,216,0.88) !important;
  border-top-color: rgba(17,17,15,0.07) !important;
}

/* ── Profile page ── */
.g-profile {
  background:
    radial-gradient(ellipse 90% 45% at 15% 0%, rgba(180,138,50,0.12) 0%, rgba(235,231,216,0) 52%),
    radial-gradient(ellipse 60% 35% at 88% 95%, rgba(90,80,200,0.06) 0%, rgba(235,231,216,0) 50%),
    #EBE7D8 !important;
}

/* ── Article story page sober background ── */
.gbd2-story-page--sober { background: var(--g-bg) !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER LINKS + SIMPLE PLACEHOLDER PAGES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Simple placeholder pages (Blog, Jobs, Terms …) ── */
.gl-simple-page {
  min-height: 100dvh;
  background: var(--g-bg, #ebe7d8);
  color: var(--g-ink, #11110f);
  display: flex;
  flex-direction: column;
  position: relative;
}
/* Hero area: flex:1 so it fills the space above the footer */
.gl-simple-page-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 32px 48px;
}
.gl-simple-page-content {
  text-align: center;
  max-width: 520px;
}
.gl-page-eyebrow {
  font-family: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: rgba(17,17,15,0.40);
  margin: 0 0 20px;
}
.gl-simple-page-h1 {
  font-size: clamp(36px, 6vw, 80px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 20px;
  color: var(--g-ink, #11110f);
}
.gl-simple-page-body {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(17,17,15,0.52);
  margin: 0;
}
.gl-simple-page .gl-back-btn {
  position: absolute;
  top: 24px;
  left: 24px;
  background: rgba(255,252,242,0.7);
  border: 1px solid rgba(17,17,15,0.13);
  color: #11110f;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.gl-simple-page .gl-back-btn:hover {
  background: rgba(255,252,242,0.95);
  border-color: rgba(17,17,15,0.22);
}

/* ── Footer link list ── */
.gl-footer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gl-footer-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(17,17,15,0.38);
  text-align: left;
  padding: 2px 0;
  transition: color 0.14s ease;
}
.gl-footer-link:hover {
  color: rgba(17,17,15,0.82);
}
.gl-footer-copy {
  display: block;
  font-size: 10px;
  color: rgba(17,17,15,0.25);
  margin-top: 10px;
  line-height: 1.3;
}

/* Desktop: footer sits inside the cream panel, pinned to the bottom */
.gl-footer-links--rail {
  display: none;
}
@media (min-width: 1024px) {
  .gl-footer-links--rail {
    display: flex;
    position: static;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(17,17,15,0.08);
  }
}

/* Mobile hamburger menu: footer links as a compact horizontal-wrap row */
.gl-footer-links--menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 18px 20px 8px;
  border-top: 1px solid rgba(17,17,15,0.08);
  margin-top: auto;
}
.gl-footer-links--menu .gl-footer-link {
  font-size: 12px;
}
.gl-footer-links--menu .gl-footer-copy {
  width: 100%;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FULL-WIDTH PAGE FOOTER  (GloblyPageFooter)
   ═══════════════════════════════════════════════════════════════════════════════ */

.gl-footer {
  width: 100%;
  margin-top: 80px;
  padding: 48px 32px 40px;
  background: rgba(17, 17, 15, 0.032);
  border-top: 1px solid rgba(17, 17, 15, 0.09);
  box-sizing: border-box;
}
/* No top margin when footer is inside a simple page — the hero area provides space */
.gl-simple-page .gl-footer {
  margin-top: 0;
}
.gl-footer-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.gl-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gl-footer-wordmark {
  font-family: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  color: rgba(17, 17, 15, 0.80);
}
.gl-footer-tagline {
  max-width: 380px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(17, 17, 15, 0.50);
  margin: 0;
}
.gl-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}
.gl-footer-nav-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  color: rgba(17, 17, 15, 0.48);
  padding: 3px 0;
  transition: color 0.14s ease;
}
.gl-footer-nav-link:hover {
  color: rgba(17, 17, 15, 0.88);
}
.gl-footer-legal {
  font-size: 11.5px;
  color: rgba(17, 17, 15, 0.33);
  margin: 6px 0 0;
}

/* Mobile: tighter spacing */
@media (max-width: 640px) {
  .gl-footer {
    margin-top: 48px;
    padding: 36px 20px 32px;
  }
  .gl-footer-tagline {
    font-size: 12px;
  }
  .gl-footer-nav {
    gap: 6px 14px;
  }
  .gl-footer-nav-link {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AUTH / ONBOARDING / LANDING — CREAM THEME OVERRIDES
   Explicit overrides for rules that hardcode rgba(255,255,255,...) or #0A0A0A.
   The :root block above auto-cascades all var(--lt-*)/var(--ob-bg) usages.
   This section handles every remaining hardcoded dark value.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Splash screen ── */
.g-splash-spinner {
  border-color: rgba(17,17,15,0.10) !important;
  border-top-color: rgba(17,17,15,0.58) !important;
}
/* White PNG logo on cream splash → invert to dark ink */
.g-splash-logo-img { filter: invert(1) !important; opacity: 0.75 !important; }

/* ── Landing page: mobile (single-column cream) ── */
/* Ticker */
.g-ticker            { border-bottom-color: rgba(17,17,15,0.07) !important; border-top-color: rgba(17,17,15,0.05) !important; }
.g-ticker-tag        { color: rgba(17,17,15,0.55) !important; }
.g-ticker-sep        { color: rgba(17,17,15,0.20) !important; }
/* Logo row (mobile only — desktop overrides above restore white over video) */
.g-globe-svg         { color: rgba(17,17,15,0.55) !important; opacity: 1 !important; }
.g-lp-wordmark       { color: rgba(17,17,15,0.50) !important; }
/* Landing brand wordmark — base (mobile/cream: dark ink) */
.gl-landing-brand {
  font-family: var(--font-title, 'Newsreader', 'Source Serif 4', Georgia, serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(24px, 5vw, 30px);
  line-height: 0.95;
  letter-spacing: -0.075em;
  color: #11110f;
  text-shadow: none;
  display: block;
}
/* Rotating preview card */
.g-preview-dot  { background: rgba(17,17,15,0.15) !important; }
.g-pdot         { background: rgba(17,17,15,0.12) !important; }
.g-pdot--active { background: rgba(17,17,15,0.62) !important; }
/* CTA buttons on landing page */
.g-lp-btn-primary {
  background: #11110F !important;
  color: #EBE7D8 !important;
  border-radius: 10px !important;
}
.g-lp-btn-primary:hover  { background: #2c2c28 !important; }
.g-lp-btn-primary:active { background: #11110F !important; }
.g-lp-btn-ghost {
  border-color: rgba(17,17,15,0.22) !important;
  background: transparent !important;
  color: rgba(17,17,15,0.65) !important;
}
.g-lp-btn-ghost:hover {
  border-color: rgba(17,17,15,0.40) !important;
  color: rgba(17,17,15,0.90) !important;
}
.g-lp-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: rgba(255,252,242,0.72) !important;
  border: 1.5px solid rgba(17,17,15,0.16) !important;
  border-radius: 10px !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--g-ink, #11110F) !important;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.g-lp-btn-google:hover:not(:disabled) {
  background: rgba(255,252,242,0.95) !important;
  border-color: rgba(17,17,15,0.30) !important;
}
.g-lp-btn-google:disabled { opacity: 0.6; cursor: not-allowed; }
.g-lp-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: rgba(17,17,15,0.35);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.g-lp-divider::before,
.g-lp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(17,17,15,0.11);
}

/* ── Auth screens (signup / login) ── */
.g-authscreen {
  background:
    radial-gradient(circle at 50% 20%, rgba(17,17,15,0.07), transparent 38%),
    radial-gradient(circle at 50% 96%, rgba(17,17,15,0.10), transparent 46%),
    #EBE7D8 !important;
}
/* Auth screen text wordmark */
.g-authscreen-wordmark {
  font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(13px, 2vw, 17px);
  line-height: 0.95;
  letter-spacing: -0.075em;
  color: #11110f;
  position: absolute;
  top: 28px;
  left: 28px;
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(17,17,15,0.14);
}
.g-authscreen-title      { font-family: 'Newsreader', 'Source Serif 4', Georgia, serif !important; font-style: normal !important; font-weight: 600 !important; letter-spacing: -0.04em !important; }
.g-authscreen-back       { color: rgba(17,17,15,0.42) !important; }
.g-authscreen-back:hover { color: rgba(17,17,15,0.80) !important; }
.g-authscreen-title      { color: var(--g-ink, #11110F) !important; }
.g-authscreen-sub        { color: rgba(17,17,15,0.50) !important; }
.g-authscreen-label      { color: rgba(17,17,15,0.50) !important; }
.g-authscreen-input {
  border-color: rgba(17,17,15,0.14) !important;
  background: rgba(255,252,242,0.72) !important;
  color: var(--g-ink, #11110F) !important;
}
.g-authscreen-input::placeholder { color: rgba(17,17,15,0.28) !important; }
.g-authscreen-input:focus {
  border-color: rgba(17,17,15,0.38) !important;
  background: rgba(255,252,242,0.95) !important;
}
.g-authscreen-btn-primary {
  background: #11110F !important;
  color: #EBE7D8 !important;
}
.g-authscreen-btn-primary:hover  { background: #2c2c28 !important; }
.g-authscreen-btn-primary:active { transform: scale(0.98); background: #11110F !important; }
.g-authscreen-switch       { color: rgba(17,17,15,0.42) !important; }
.g-authscreen-switch-btn   { color: rgba(17,17,15,0.72) !important; }
.g-authscreen-switch-btn:hover { color: var(--g-ink, #11110F) !important; }
.g-authscreen-error {
  background: rgba(193,53,43,0.08) !important;
  border-color: rgba(193,53,43,0.22) !important;
  color: #b12e25 !important;
}

/* ── Auth screen: Google button + "or" divider ── */
.g-authscreen-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  margin-bottom: 4px;
  background: rgba(255,252,242,0.72);
  border: 1.5px solid rgba(17,17,15,0.16);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--g-ink, #11110F);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.g-authscreen-google-btn:hover:not(:disabled) {
  background: rgba(255,252,242,0.95);
  border-color: rgba(17,17,15,0.30);
}
.g-authscreen-google-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.g-authscreen-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  color: rgba(17,17,15,0.35);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.g-authscreen-divider::before,
.g-authscreen-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(17,17,15,0.11);
}

/* ── Onboarding progress bar ── */
.ob-bar      { background: rgba(17,17,15,0.08) !important; }
.ob-bar-fill { background: rgba(17,17,15,0.48) !important; }

/* ── Onboarding step indicator dots (legacy ob-dot system) ── */
.ob-dot     { background: rgba(17,17,15,0.12) !important; }
.ob-dot--on { background: rgba(17,17,15,0.56) !important; }

/* ── Onboarding eyebrow + step count ── */
.ob-eyebrow    { color: rgba(17,17,15,0.40) !important; }
.ob-step-count { color: rgba(17,17,15,0.32) !important; }

/* ── Onboarding option cards ── */
.ob-option {
  border-color: rgba(17,17,15,0.11) !important;
  box-shadow: 0 1px 6px rgba(45,38,22,0.07) !important;
}
.ob-option:hover { border-color: rgba(17,17,15,0.22) !important; }
/* Selected state keeps amber accent from --lt-amber (unchanged) */
.ob-option-check { color: rgba(17,17,15,0.72) !important; }

/* ── Onboarding continue / CTA button ── */
.ob-btn {
  background: #11110F !important;
  color: #EBE7D8 !important;
  border-radius: 10px !important;
}
.ob-btn:hover  { background: #2c2c28 !important; }
.ob-btn:active { background: #11110F !important; }
.ob-btn:disabled {
  background: rgba(17,17,15,0.12) !important;
  color: rgba(17,17,15,0.32) !important;
}

/* ── Onboarding back button ── */
.ob-back-btn       { color: rgba(17,17,15,0.42) !important; }
.ob-back-btn:hover { color: rgba(17,17,15,0.80) !important; }

/* ── Quote screen (step 0) ── */
.ob-quote-mark   { color: rgba(17,17,15,0.14) !important; }
.ob-quote-text   { color: rgba(17,17,15,0.88) !important; }
.ob-quote-attr   { color: rgba(17,17,15,0.44) !important; }
.ob-quote-globly {
  color: rgba(17,17,15,0.55) !important;
  border-top-color: rgba(17,17,15,0.10) !important;
}

/* ── Fact screen (step 1) ── */
.ob-fact-sub    { color: rgba(17,17,15,0.68) !important; }
.ob-fact-source { color: rgba(17,17,15,0.35) !important; }

/* ── Social proof / stat blocks (step 0) ── */
.ob-stat-num   { color: rgba(17,17,15,0.85) !important; }
.ob-stat-label { color: rgba(17,17,15,0.44) !important; }

/* ── Big stat screen (step 3) ── */
.ob-big-stat-num    { color: rgba(17,17,15,0.85) !important; }
.ob-big-stat-line   { color: rgba(17,17,15,0.52) !important; }
.ob-big-stat-source { color: rgba(17,17,15,0.28) !important; }

/* ── Habit icon ── */
.ob-big-icon {
  background: rgba(17,17,15,0.04) !important;
  border-color: rgba(17,17,15,0.10) !important;
}
.ob-big-icon svg   { stroke: rgba(17,17,15,0.55) !important; }
.ob-icon-caption   { color: rgba(17,17,15,0.36) !important; }

/* ── Comparison table (step 2) ── */
.ob-vs {
  background: rgba(17,17,15,0.04) !important;
  border-color: rgba(17,17,15,0.08) !important;
}
.ob-vs-hd--left {
  background: rgba(17,17,15,0.03) !important;
  color: rgba(17,17,15,0.38) !important;
}
.ob-vs-hd--right {
  background: rgba(176,123,26,0.12) !important;
  color: #8a6010 !important;
}
.ob-vs-cell--left {
  background: rgba(17,17,15,0.04) !important;
  color: rgba(17,17,15,0.40) !important;
}
.ob-vs-cell--right {
  background: rgba(176,123,26,0.06) !important;
  color: rgba(17,17,15,0.82) !important;
}

/* ── Affirmation pill ── */
.ob-affirm-pill {
  background: rgba(176,123,26,0.10) !important;
  border-color: rgba(176,123,26,0.22) !important;
  color: #8a6010 !important;
}

/* ── Feature list ── */
.ob-feature-icon { color: #8a6010 !important; }
.ob-feature-text { color: rgba(17,17,15,0.65) !important; }

/* ── Time input (reminder step) ── */
.ob-time-input {
  border-color: rgba(17,17,15,0.12) !important;
  box-shadow: 0 1px 6px rgba(45,38,22,0.07) !important;
}
/* Calendar picker icon: was inverted for dark bg, revert on cream */
.ob-time-input::-webkit-calendar-picker-indicator {
  filter: none !important;
  opacity: 0.42 !important;
}

/* ── Final screen ── */
.ob-final-globe svg   { color: rgba(17,17,15,0.20) !important; }
.ob-final-headline    { color: rgba(17,17,15,0.90) !important; }
.ob-final-headline em { color: rgba(17,17,15,0.65) !important; }
.ob-final-sub         { color: rgba(17,17,15,0.58) !important; }

/* ── Masthead / card boundary: gradient hairline ──────────────────────────── */
/* Mobile needs position:relative so ::before can anchor to the masthead.
   Desktop already has position:sticky which serves the same purpose. */
@media (max-width: 1023px) {
  .gl-today-unified .gl-edition-masthead { position: relative; }
}
/* Remove the flat solid border-bottom; the ::before gradient line replaces it */
.gl-today-unified .gl-edition-masthead { border-bottom: none !important; }
/* Gradient hairline at the bottom edge of the sticky masthead */
.gl-today-unified .gl-edition-masthead::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(17,17,15,0)    0%,
    rgba(17,17,15,0.16) 8%,
    rgba(17,17,15,0.22) 50%,
    rgba(17,17,15,0.16) 92%,
    rgba(17,17,15,0)    100%
  );
}

/* ================================================================
   SEARCH — trigger + overlay
   ================================================================ */

/* ── Header search trigger (full label, desktop only) ── */
.gl-header-search-trigger {
  display: none; /* shown only at ≥1024px below */
}
.gl-header-search-icon-only {
  display: none; /* shown only at <1024px below */
}

@media (min-width: 1024px) {
  .gl-header-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 18px;
    padding: 5px 12px 5px 10px;
    border: 1px solid rgba(17,17,15,0.13);
    border-radius: 20px;
    background: rgba(255,252,242,0.55);
    color: rgba(17,17,15,0.52);
    font-size: 13px;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .gl-header-search-trigger:hover {
    color: #11110F;
    background: rgba(255,252,242,0.85);
    border-color: rgba(17,17,15,0.22);
  }
  .gl-header-search-icon-only {
    display: none;
  }
}

/* Mobile: icon-only trigger, inside .gl-mast-left */
@media (max-width: 1023px) {
  .gl-header-search-trigger {
    display: none;
  }
  .gl-header-search-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 6px;
    border: 0;
    background: transparent;
    color: rgba(17,17,15,0.52);
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s;
  }
  .gl-header-search-icon-only:hover { color: #11110F; }
}

/* ── Search overlay (fixed, above everything) ── */
.gl-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(17,17,15,0.28);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}

/* ── Search panel ── */
.gl-search-panel {
  background: #F6F2E8;
  border: 1px solid rgba(17,17,15,0.12);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(17,17,15,0.18), 0 2px 8px rgba(17,17,15,0.08);
  width: min(640px, calc(100vw - 32px));
  overflow: hidden;
}

/* ── Input row ── */
.gl-search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(17,17,15,0.09);
}
.gl-search-panel-icon {
  flex-shrink: 0;
  color: rgba(17,17,15,0.40);
}
.gl-search-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: #11110F;
  font-family: inherit;
  outline: none;
}
.gl-search-input::placeholder { color: rgba(17,17,15,0.38); }
.gl-search-clear {
  border: 0;
  background: transparent;
  color: rgba(17,17,15,0.38);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.gl-search-clear:hover { color: #11110F; }
.gl-search-esc-btn {
  border: 1px solid rgba(17,17,15,0.14);
  background: rgba(17,17,15,0.05);
  color: rgba(17,17,15,0.42);
  font-size: 11px;
  font-family: inherit;
  border-radius: 5px;
  padding: 3px 7px;
  cursor: pointer;
  flex-shrink: 0;
}
.gl-search-esc-btn:hover { background: rgba(17,17,15,0.09); }

.gl-search-mode-hint {
  font-size: 11px;
  color: rgba(17,17,15,0.38);
  flex-shrink: 0;
  white-space: nowrap;
  font-style: italic;
}

/* ── Results list ── */
.gl-search-results {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  max-height: min(420px, 60vh);
  overflow-y: auto;
}
.gl-search-result {
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.1s;
}
.gl-search-result:hover { background: rgba(17,17,15,0.05); }
.gl-search-result-title {
  font-size: 14px;
  font-weight: 600;
  color: #11110F;
  line-height: 1.35;
  margin-bottom: 5px;
}
.gl-search-result-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gl-search-result-tag {
  font-size: 11px;
  font-weight: 500;
  color: rgba(17,17,15,0.52);
  background: rgba(17,17,15,0.07);
  border-radius: 4px;
  padding: 2px 6px;
}
.gl-search-result-tag--country {
  color: rgba(17,17,15,0.42);
  background: rgba(17,17,15,0.05);
}

/* ── Empty / hint states ── */
.gl-search-empty,
.gl-search-hint {
  font-size: 13px;
  color: rgba(17,17,15,0.46);
  padding: 20px 20px;
  margin: 0;
  line-height: 1.5;
}
.gl-search-hint kbd {
  display: inline-block;
  font-family: inherit;
  font-size: 11px;
  background: rgba(17,17,15,0.08);
  border: 1px solid rgba(17,17,15,0.14);
  border-radius: 4px;
  padding: 1px 5px;
  color: rgba(17,17,15,0.55);
}

/* ================================================================
   EDITORIAL TYPOGRAPHY — Newsreader for all major titles
   Loads last so it wins over every earlier rule.
   ================================================================ */

/* ── Display headings: 36px+ ── */
/* Masthead date / topic page hero / landing headline / simple page h1 */
.gl-edition-date,
.gl-topic-feed-title,
.gl-topic-gradient-title,
.gl-simple-page-h1,
.g-lp-headline {
  font-family: var(--font-title) !important;
  font-style:  normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* ── Article page headline (full-bleed hero) ── */
.gbd2-ep-headline {
  font-family: var(--font-title) !important;
  font-style:  normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
}

/* ── Large image card titles (thc-card) ── */
.thc-title {
  font-family: var(--font-title) !important;
  font-style:  normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}

/* ── Auth/onboarding headlines ── */
.g-authscreen-title,
.ob-headline,
.ob-final-headline {
  font-family: var(--font-title) !important;
  font-style:  normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}

/* ── Medium headings: 20–28px ── */
/* Hero card title / section headings / article section headings */
.gt2-hero-title,
.gt2-section-title,
.gl-section-title,
.gbd-read-heading,
.g-discover-title,
.ph-title,
.ph-hero-title,
.qz-done-title,
.cg-title {
  font-family: var(--font-title) !important;
  font-style:  normal !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* ── Card titles: 15–24px ── */
/* Story card thumbnails, scard variants, timeline, mixed cards */
.gt2-scard-title,
.g-card-headline,
.gbd2-tl-title,
.td-hero-title,
.td-portrait-title,
.td-split-title,
.td-square-title,
.td-list-title,
.gt-mixed-title,
.gt-mixed-card--read .gt-mixed-title,
.gt-mixed-card--fact .gt-mixed-title {
  font-family: var(--font-title) !important;
  font-style:  normal !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

/* ── Onboarding final headline em fix ── */
/* ob-final-headline uses <em> as styled accent — keep upright in Newsreader */
.ob-final-headline em {
  font-style: italic !important;
  font-weight: 700 !important;
}

/* ================================================================
   MASTHEAD METADATA — Newsreader editorial treatment
   Targets only the small text inside the masthead title block.
   ================================================================ */

/* "TODAY'S EDITION" / "TOPIC" eyebrow label */
.gl-edition-label {
  font-family: var(--font-title) !important;
  font-weight: 400 !important;
  letter-spacing: 0.10em !important;
}

/* "374 stories · 12 topics · Updated 1d ago" stats row */
.gl-edition-stat,
.gl-edition-sep {
  font-family: var(--font-title) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* Topic page: "12 stories today" below the big topic title */
.gl-topic-feed-meta {
  font-family: var(--font-title) !important;
  font-weight: 400 !important;
}

/* Topic page: subtitle line */
.gl-topic-feed-subtitle {
  font-family: var(--font-title) !important;
  font-weight: 400 !important;
}

/* ─── Profile page redesign ─────────────────────────────────────────────────── */

.gl-profile-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--g-bg, #EBE7D8);
}

/* Top navigation bar */
.gl-profile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(17,17,15,0.08);
  background: var(--g-bg, #EBE7D8);
  position: sticky;
  top: 0;
  z-index: 50;
}
.gl-profile-back-btn {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: rgba(17,17,15,0.56);
  cursor: pointer;
  padding: 4px 0;
  letter-spacing: 0;
}
.gl-profile-back-btn:hover { color: #11110f; }
.gl-profile-wordmark {
  font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  font-style: normal;
  color: #11110f;
  letter-spacing: -0.04em;
}
.gl-profile-signout-top-btn {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: rgba(17,17,15,0.56);
  cursor: pointer;
  padding: 4px 0;
}
.gl-profile-signout-top-btn:hover { color: #D0433A; }

/* Main shell */
.gl-profile-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  padding: 0 0 0;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

/* Hero section */
.gl-profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 20px 28px;
  text-align: center;
}
.gl-profile-hero-mark {
  margin-bottom: 20px;
  opacity: 0.7;
}
.gl-profile-hero-title {
  font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 600;
  font-style: normal;
  color: #11110f;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 6px;
}
.gl-profile-hero-sub {
  font-size: 15px;
  font-weight: 400;
  color: rgba(17,17,15,0.56);
  margin: 0 0 8px;
}
.gl-profile-hero-email {
  font-size: 14px;
  font-weight: 500;
  color: rgba(17,17,15,0.64);
  margin: 0 0 10px;
}
.gl-profile-plan-badge {
  display: inline-block;
  background: rgba(17,17,15,0.07);
  color: rgba(17,17,15,0.56);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}

/* Stats row */
.gl-profile-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 20px 28px;
}
.gl-profile-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.gl-profile-stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(17,17,15,0.10);
  flex-shrink: 0;
}
.gl-profile-stat-num {
  font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 600;
  color: #11110f;
  line-height: 1;
  letter-spacing: -0.03em;
}
.gl-profile-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(17,17,15,0.46);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

/* Card grid */
.gl-profile-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px;
}

.gl-profile-card {
  background: rgba(255,252,242,0.62);
  border: 1px solid rgba(17,17,15,0.07);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gl-profile-card--wide {
  /* same as card — no special rule needed unless layout differs */
}

/* Card header row */
.gl-profile-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gl-profile-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17,17,15,0.46);
}
.gl-profile-card-meta {
  font-size: 13px;
  font-weight: 500;
  color: rgba(17,17,15,0.46);
}
.gl-profile-card-note {
  font-size: 13px;
  color: rgba(17,17,15,0.52);
  line-height: 1.5;
  margin: 0;
}
.gl-profile-empty-state {
  font-size: 14px;
  color: rgba(17,17,15,0.46);
  margin: 0;
}
.gl-profile-saved-badge {
  font-size: 12px;
  font-weight: 600;
  color: #3A6B45;
  background: rgba(58,107,69,0.10);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Edit button */
.gl-profile-edit-btn {
  background: none;
  border: 1px solid rgba(17,17,15,0.16);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(17,17,15,0.64);
  cursor: pointer;
  letter-spacing: 0;
  transition: background 0.15s, color 0.15s;
}
.gl-profile-edit-btn:hover {
  background: rgba(17,17,15,0.06);
  color: #11110f;
}
.gl-profile-edit-btn--standalone {
  align-self: flex-start;
  margin-top: 4px;
}

/* Reminder time input */
.gl-profile-time-input {
  background: rgba(17,17,15,0.05);
  border: 1px solid rgba(17,17,15,0.12);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 20px;
  font-weight: 600;
  font-family: 'Newsreader', Georgia, serif;
  color: #11110f;
  width: fit-content;
  cursor: pointer;
}

/* Interests chips */
.gl-profile-interests-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(17,17,15,0.40);
  margin: 2px 0 0;
}
.gl-profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gl-profile-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(17,17,15,0.06);
  border: 1px solid rgba(17,17,15,0.10);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(17,17,15,0.64);
  cursor: default;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
button.gl-profile-chip {
  cursor: pointer;
}
button.gl-profile-chip:hover {
  background: rgba(17,17,15,0.10);
  color: #11110f;
}
.gl-profile-chip.is-on {
  background: rgba(255,182,213,0.50);
  border-color: rgba(255,130,180,0.30);
  color: #11110f;
  font-weight: 600;
}
button.gl-profile-chip.is-on:hover {
  background: rgba(255,182,213,0.72);
}

/* Account rows */
.gl-profile-account-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(17,17,15,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.gl-profile-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(17,17,15,0.06);
}
.gl-profile-account-row:last-child { border-bottom: none; }
.gl-profile-account-key {
  font-size: 13px;
  font-weight: 500;
  color: rgba(17,17,15,0.56);
}
.gl-profile-account-val {
  font-size: 13px;
  font-weight: 500;
  color: #11110f;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.gl-profile-version-btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: rgba(17,17,15,0.46);
  cursor: pointer;
  padding: 0;
}

/* Bottom action buttons */
.gl-profile-account-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.gl-profile-btn {
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s;
}
.gl-profile-btn:active { opacity: 0.7; }
.gl-profile-btn--ghost {
  background: rgba(17,17,15,0.06);
  color: rgba(17,17,15,0.72);
}
.gl-profile-btn--ghost:hover { background: rgba(17,17,15,0.10); }
.gl-profile-btn--danger {
  background: rgba(208,67,58,0.10);
  color: #D0433A;
}
.gl-profile-btn--danger:hover { background: rgba(208,67,58,0.18); }

/* Desktop */
@media (min-width: 1024px) {
  .gl-profile-topbar {
    padding: 18px 32px 14px;
    top: 74px;
  }
  .gl-profile-shell {
    padding: 0 0 60px;
  }
  .gl-profile-hero {
    padding: 44px 32px 32px;
  }
  .gl-profile-stats {
    padding: 0 32px 32px;
  }
  .gl-profile-grid {
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .gl-profile-card--wide {
    grid-column: 1 / -1;
  }
}

/* ================================================================
   CARD-BLEED FIX
   Cards must never appear above the masthead or through the topic
   pill strip. Four layers of defence:

   1. gl-page-header min-height: 74px  — eliminates the gap between
      page-header bottom and masthead top: 74px on desktop.
   2. gl-rail-content background + isolation — makes the content
      column opaque so nothing bleeds through its transparent gaps.
   3. gl-edition-masthead isolation: isolate — replaces overflow:hidden
      (which breaks sticky in Safari) with a proper stacking context.
   4. gl-rail-outer fully opaque on mobile — the topic pill strip was
      rgba(235,231,216,0.94) so 6% of card images showed through.
   ================================================================ */

/* ── 1. Guarantee page-header height matches masthead's top: 74px ── */
@media (min-width: 1024px) {
  .gl-page-header {
    min-height: 74px;
    box-sizing: border-box;
  }
}

/* ── 2. Content column: opaque cream shield ── */
.gl-rail-content {
  background: var(--g-bg, #EBE7D8);
  isolation: isolate;
}

/* ── 3. Masthead: stacking context via isolation, not overflow:hidden ── */
@media (min-width: 1024px) {
  .gl-today-unified .gl-edition-masthead {
    overflow: visible;
    isolation: isolate;
  }
}

/* ── 4. Mobile pill strip: fully opaque so cards can't show through ── */
@media (max-width: 1023px) {
  .gl-rail-outer {
    background: var(--g-bg, #EBE7D8) !important;
  }
}

/* ================================================================
   ONBOARDING / LOADING / QUESTION SCREENS — EDITORIAL TYPE SCALE
   Newsreader at generous sizes to match the new Globally style.
   All rules use !important to beat styles.css (Figtree / Instrument Serif).
   ================================================================ */

/* Base page font — Newsreader across all ob- content */
.ob-page {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
}

/* ── Eyebrow label ── */
.ob-eyebrow {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.10em !important;
}

/* ── Headline ── */
.ob-headline {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: clamp(26px, 5vw, 40px) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
}

/* ── Sub-headline / hint ── */
.ob-hint {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.45 !important;
  letter-spacing: -0.01em !important;
}

/* ── Option cards ── */
.ob-option {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: -0.01em !important;
  min-height: 50px !important;
  padding: 0 18px !important;
}
.ob-option-label {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
}
.ob-option-sub {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* ── Continue / CTA button ── */
.ob-btn {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: -0.01em !important;
  padding: 13px 22px !important;
}

/* ── Back button ── */
.ob-back-btn {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

/* ── Quote screen (step 0) ── */
.ob-quote-mark {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: clamp(56px, 10vw, 84px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
.ob-quote-text {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: clamp(16px, 3vw, 27px) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.45 !important;
  letter-spacing: -0.02em !important;
}
.ob-quote-attr {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: 0 !important;
}
.ob-quote-globly {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.45 !important;
  letter-spacing: -0.01em !important;
}

/* ── Fact screen ── */
.ob-fact-sub {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: clamp(13px, 2.8vw, 16px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.55 !important;
  letter-spacing: -0.01em !important;
}
.ob-fact-source {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 13px !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* ── Social proof stat blocks ── */
.ob-stat-num {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: clamp(34px, 7.5vw, 52px) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: -0.04em !important;
}
.ob-stat-label {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* ── Big stat screen ── */
.ob-big-stat-num {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: clamp(40px, 10vw, 68px) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: -0.04em !important;
}
.ob-big-stat-line {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: clamp(13px, 2.5vw, 16px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.01em !important;
}
.ob-big-stat-source {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 13px !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* ── Comparison table ── */
.ob-compare-label {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
}
.ob-compare-item {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
}

/* ── Icon caption ── */
.ob-icon-caption {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* ── Feature list ── */
.ob-feature-text {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* ── Reminder screen (step 13) ── */
.ob-time-input {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 40px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: -0.03em !important;
}
.ob-reminder-note {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
}

/* ── Final screen (step 14) ── */
.ob-final-headline {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: clamp(28px, 6vw, 44px) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
}
.ob-final-headline em {
  font-style: italic !important;
  font-weight: 600 !important;
}
.ob-final-sub {
  font-family: var(--font-title, 'Newsreader', Georgia, serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
}

/* ── Onboarding step 13: email consent choice buttons ── */
.ob-consent-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.ob-consent-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: rgba(255,252,242,0.55);
  border: 1px solid rgba(17,17,15,0.13);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ob-consent-btn:hover {
  border-color: rgba(17,17,15,0.28);
  background: rgba(255,252,242,0.80);
}
.ob-consent-btn--on {
  border-color: #11110F !important;
  background: rgba(17,17,15,0.06) !important;
}
.ob-consent-label {
  font-family: var(--font-title, 'Newsreader', Georgia, serif);
  font-size: 14px;
  font-weight: 600;
  color: #11110F;
  line-height: 1.3;
}
.ob-consent-copy {
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: rgba(17,17,15,0.55);
  line-height: 1.45;
}
.ob-consent-error {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #c41c1c;
  line-height: 1.4;
}
/* Continue button when no consent chosen yet — visually subdued but still clickable */
.ob-btn--unselected {
  background: rgba(17,17,15,0.18) !important;
  color: rgba(17,17,15,0.45) !important;
}

/* ── Profile page: email consent choice buttons ── */
.gl-profile-consent-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}
@media (min-width: 640px) {
  .gl-profile-consent-group {
    flex-direction: row;
  }
}
.gl-profile-consent-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  background: rgba(255,252,242,0.55);
  border: 1px solid rgba(17,17,15,0.13);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.gl-profile-consent-btn:hover {
  border-color: rgba(17,17,15,0.24);
  background: rgba(255,252,242,0.80);
}
.gl-profile-consent-btn--on {
  border-color: #11110F !important;
  background: rgba(17,17,15,0.06) !important;
}
.gl-profile-consent-label {
  font-size: 13px;
  font-weight: 600;
  color: #11110F;
  line-height: 1.3;
}
.gl-profile-consent-copy {
  font-size: 12px;
  font-weight: 400;
  color: rgba(17,17,15,0.52);
  line-height: 1.4;
}

/* ================================================================
   SIDEBAR PANEL — SPACING + FOOTER OVERFLOW FIXES
   1. Rail sticks below the 74px page-header (not at top:0).
   2. Less top padding on the rail, more inside the cream panel.
   3. Diamond icon 1/3 smaller (6×6 → 4×4 px).
   4. Footer links wrap horizontally — compact row instead of tall column.
   ================================================================ */

@media (min-width: 1024px) {

  /* Fix 1: rail — sticky, clears header, bottom-aligns the panel */
  .gl-today-main > .gl-rail-outer {
    top: 74px;
    height: calc(100dvh - 74px);
    justify-content: flex-end;         /* push the compact panel to the bottom */
    padding-top: 10px;
    padding-bottom: 24px;              /* gap from viewport bottom edge */
    padding-left: 14px;
    padding-right: 10px;
  }

  /* Fix 2: narrower panel — don't stretch to fill rail so flex-end can work */
  .gl-today-main > .gl-rail-outer .gl-topic-nav-panel {
    width: 175px;
    flex: none;                        /* was flex:1 — that made the panel fill the full rail */
    padding-top: 14px;
  }

  /* Fix 3: shrink diagonal icon by ~1/3 */
  .gl-today-main > .gl-rail-outer .gl-topic-nav-item::before {
    width: 4px;
    height: 4px;
    border: 1px solid rgba(17,17,15,0.22);
  }

  /* Fix 4: footer links — vertical column, sits directly below topic list (no auto-push) */
  .gl-footer-links--rail {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    padding-top: 10px;
    margin-top: 12px;          /* was auto — auto pushed footer to panel bottom */
  }
  .gl-footer-links--rail .gl-footer-link {
    font-size: 10px;
    padding: 1px 0;
  }
  .gl-footer-links--rail .gl-footer-copy {
    font-size: 9px;
    margin-top: 4px;
  }
}

/* ================================================================
   PROFILE PAGE REDESIGN
   - Topbar moved inside shell (now in JSX), position:static, no border
   - Shell widens to full editorial width
   - Subtle radial gradient background
   - Hero + stats remain centered with max-width
   - Card grid: 1-col mobile → 2-col desktop
   ================================================================ */

/* 1. Full-bleed page background */
.gl-profile-page {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 0%, rgba(17,17,15,0.06), transparent 34%),
    var(--g-bg, #ebe6d8);
  display: block;            /* override flex — shell is now full-width */
}

/* 2. Wide editorial shell — content only, footer lives outside this */
.gl-profile-shell {
  width: min(1440px, calc(100vw - 56px));
  max-width: none;
  margin: 0 auto;
  padding: 48px 0 40px;
  flex: none;                /* override the old flex:1 */
  display: block;
}

/* 3. Non-sticky topbar — scrolls naturally with page */
.gl-profile-topbar {
  position: static !important;   /* override sticky */
  background: none !important;
  border-bottom: none !important;
  padding: 0 0 48px;
  z-index: auto;
}

/* 4. Hero: stays centered, readable width */
.gl-profile-hero {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 32px;
}

/* 5. Stats row: centered, readable width */
.gl-profile-stats {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 40px;
}

/* 6. Card grid: 1-col → 2-col, no padding waste */
.gl-profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0;
}

@media (min-width: 640px) {
  .gl-profile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 7. Cards: more padding to breathe at full width */
.gl-profile-card {
  background: rgba(255,252,242,0.72);
  border: 1px solid rgba(17,17,15,0.08);
  border-radius: 16px;
  padding: 24px;
}

/* ================================================================
   PROFILE PAGE v2 — Hero redesign + Mira intelligence card
   ================================================================ */

/* Topbar: constrain width to match shell on wide screens */
.gl-profile-topbar {
  width: min(1440px, calc(100vw - 56px));
  margin-left: auto;
  margin-right: auto;
  padding: 18px 0 36px;
}

/* Hero: horizontal row layout */
.gl-profile-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0 0 32px;
  text-align: left;
}
.gl-profile-hero-mark {
  flex-shrink: 0;
  opacity: 0.72;
  margin-bottom: 0;
}
.gl-profile-hero-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gl-profile-hero-title {
  font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 600;
  color: #11110f;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}
.gl-profile-hero-email {
  font-size: 13px;
  font-weight: 500;
  color: rgba(17,17,15,0.52);
  margin: 0;
}
.gl-profile-plan-badge {
  margin-top: 4px;
}

/* Stats: left-aligned to match hero */
.gl-profile-stats {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  justify-content: flex-start;
  gap: 0;
  padding-bottom: 32px;
}
.gl-profile-stat {
  flex: none;
  padding: 0 28px 0 0;
}
.gl-profile-stat:first-child { padding-left: 0; }
.gl-profile-stat-sep {
  width: 1px;
  height: 30px;
  background: rgba(17,17,15,0.10);
  flex-shrink: 0;
  margin-right: 28px;
}

/* Wide card: always spans both columns */
@media (min-width: 640px) {
  .gl-profile-card--wide {
    grid-column: 1 / -1;
  }
}

/* Mira card: slightly distinct surface */
.gl-profile-card--mira {
  background: rgba(255,252,242,0.88);
}

/* Mira intelligence bar chart */
.gl-profile-mira-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 18px;
}
@media (max-width: 500px) {
  .gl-profile-mira-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.gl-profile-mira-col-hd {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(17,17,15,0.38);
  margin: 0 0 10px;
}
.gl-profile-mira-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gl-profile-mira-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gl-profile-mira-name {
  font-size: 12px;
  font-weight: 500;
  color: rgba(17,17,15,0.68);
  min-width: 88px;
  flex-shrink: 0;
}
.gl-profile-mira-track {
  flex: 1;
  height: 4px;
  background: rgba(17,17,15,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.gl-profile-mira-fill {
  height: 100%;
  border-radius: 2px;
  opacity: 0.45;
}

/* ================================================================
   SETTINGS CARD — profile page bottom-right
   ================================================================ */

.gl-settings-card {
  background: rgba(255,252,242,0.74);
  border: 1px solid rgba(17,17,15,0.10);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gl-settings-title {
  font-family: var(--font-title, 'Newsreader', 'Source Serif 4', Georgia, serif);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: #11110f;
  margin: 0 0 20px;
}

/* ── Section ── */
.gl-settings-section {
  padding: 16px 0;
  border-top: 1px solid rgba(17,17,15,0.07);
}
.gl-settings-section:first-of-type {
  border-top: none;
  padding-top: 0;
}
.gl-settings-section-hd {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(17,17,15,0.36);
  margin: 0 0 12px;
}

/* ── Setting row ── */
.gl-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}
.gl-settings-row + .gl-settings-row {
  margin-top: 8px;
}
.gl-settings-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.gl-settings-row-label {
  font-size: 13px;
  font-weight: 600;
  color: #11110f;
  line-height: 1.3;
}
.gl-settings-row-sub {
  font-size: 11px;
  font-weight: 400;
  color: rgba(17,17,15,0.48);
  line-height: 1.4;
}

/* ── Toggle switch ── */
.gl-settings-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: rgba(17,17,15,0.14);
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  transition: background 0.18s;
  position: relative;
}
.gl-settings-toggle.is-on {
  background: #11110f;
}
.gl-settings-toggle-knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.18s;
  display: block;
  flex-shrink: 0;
}
.gl-settings-toggle.is-on .gl-settings-toggle-knob {
  transform: translateX(18px);
}

/* ── Segmented control (daily goal) ── */
.gl-settings-seg {
  display: flex;
  border: 1px solid rgba(17,17,15,0.14);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.gl-settings-seg-btn {
  background: none;
  border: none;
  border-right: 1px solid rgba(17,17,15,0.10);
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(17,17,15,0.52);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.gl-settings-seg-btn:last-child { border-right: none; }
.gl-settings-seg-btn:hover { background: rgba(17,17,15,0.05); }
.gl-settings-seg-btn.is-on {
  background: #11110f;
  color: #fffaf0;
  font-weight: 600;
}

/* ── Action buttons (Reset / Clear) ── */
.gl-settings-action-btn {
  flex-shrink: 0;
  background: rgba(17,17,15,0.07);
  border: 1px solid rgba(17,17,15,0.12);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(17,17,15,0.72);
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
  white-space: nowrap;
}
.gl-settings-action-btn:hover {
  background: rgba(17,17,15,0.12);
  color: #11110f;
}
.gl-settings-action-btn.is-done {
  background: rgba(58,107,69,0.10);
  border-color: rgba(58,107,69,0.20);
  color: #3A6B45;
}
.gl-settings-action-btn--warn {
  background: rgba(208,67,58,0.07);
  border-color: rgba(208,67,58,0.14);
  color: #D0433A;
}
.gl-settings-action-btn--warn:hover {
  background: rgba(208,67,58,0.14);
  border-color: rgba(208,67,58,0.24);
}
.gl-settings-action-btn--warn.is-done {
  background: rgba(58,107,69,0.10);
  border-color: rgba(58,107,69,0.20);
  color: #3A6B45;
}

/* ── Support / link rows ── */
.gl-settings-row--link {
  cursor: pointer;
  border-radius: 8px;
  margin: 0 -6px;
  padding: 6px 6px;
  transition: background 0.13s;
}
.gl-settings-row--link:hover {
  background: rgba(17,17,15,0.05);
}
.gl-settings-row-arrow {
  flex-shrink: 0;
  font-size: 18px;
  color: rgba(17,17,15,0.24);
  line-height: 1;
  margin-left: 4px;
}
.gl-settings-link-anchor {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ================================================================
   CONFIRMATION MODAL
   ================================================================ */

.gl-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(17,17,15,0.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gl-confirm-modal {
  background: #FAF8F0;
  border: 1px solid rgba(17,17,15,0.10);
  border-radius: 20px;
  padding: 32px 28px 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(17,17,15,0.20), 0 4px 12px rgba(17,17,15,0.10);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gl-confirm-title {
  font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #11110f;
  margin: 0;
  line-height: 1.15;
}
.gl-confirm-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(17,17,15,0.62);
  margin: 0;
}
.gl-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}
.gl-confirm-btn {
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  white-space: nowrap;
}
.gl-confirm-btn--cancel {
  background: rgba(17,17,15,0.07);
  border-color: rgba(17,17,15,0.12);
  color: rgba(17,17,15,0.72);
}
.gl-confirm-btn--cancel:hover {
  background: rgba(17,17,15,0.12);
  color: #11110f;
}
.gl-confirm-btn--ok {
  background: #11110f;
  color: #fffaf0;
  border-color: #11110f;
}
.gl-confirm-btn--ok:hover {
  background: #2a2a28;
}
.gl-confirm-btn--ok.is-danger {
  background: #C53030;
  border-color: #C53030;
  color: #fff;
}
.gl-confirm-btn--ok.is-danger:hover {
  background: #9B2C2C;
  border-color: #9B2C2C;
}

/* ================================================================
   SUBTOPIC ROW — editorial filter strip below section headings
   ================================================================ */

.gl-subtopic-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 16px 0;
  margin-top: 20px;
  margin-bottom: 28px;
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: rgba(17,17,15,0.50);
}

@media (min-width: 768px) {
  .gl-subtopic-row {
    padding: 0 32px 0;
    font-size: 15px;
    margin-bottom: 32px;
  }
}

/* Subtopic row inside the sticky masthead: sits ABOVE the divider gradient.
   No border-top (that was the false divider users saw).
   Full content-area width, items spread end-to-end. */
.gl-edition-masthead .gl-subtopic-row {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  max-width: none;
  margin-top: 34px;
  margin-bottom: 18px;
  padding-top: 0;
  border-top: none;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .gl-edition-masthead .gl-subtopic-row {
    margin-bottom: 18px;
  }
}

/* Mobile: subtopic row is handled by the standalone gl-subtopic-bar, hide it in masthead */
@media (max-width: 1023px) {
  .gl-edition-masthead .gl-subtopic-row {
    display: none;
  }
}

/* ── Standalone subtopic bar — mobile sticky strip ── */
/* Hidden on desktop (masthead covers it); sticky on mobile below the page-header */
.gl-subtopic-bar {
  display: none;
}
@media (max-width: 1023px) {
  .gl-subtopic-bar {
    display: block;
    position: sticky;
    top: 74px;
    z-index: 119;
    background: var(--g-bg, #EBE7D8);
    border-bottom: 1px solid rgba(17,17,15,0.09);
  }
  .gl-subtopic-bar .gl-subtopic-row {
    padding: 10px 16px;
    margin: 0;
    width: 100%;
    max-width: none;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gl-subtopic-bar .gl-subtopic-row::-webkit-scrollbar { display: none; }
}

.gl-subtopic-button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 14px;
  color: rgba(17,17,15,0.50);
  cursor: pointer;
  font: inherit;
  letter-spacing: 0;
  transition: color 120ms ease, font-weight 120ms ease;
  white-space: nowrap;
}

.gl-subtopic-button:hover {
  color: rgba(17,17,15,0.80);
}

.gl-subtopic-button.is-active {
  color: #11110f;
  font-weight: 650;
}

.gl-subtopic-divider {
  color: rgba(17,17,15,0.18);
  pointer-events: none;
  user-select: none;
  font-size: 12px;
  line-height: 1;
}

/* ================================================================
   MIRA BLOCK MARK — geometric animated mascot
   Four diagonal rounded squares in a diamond cluster.
   Top square: hollow outline. Left / right / bottom: solid.
   ================================================================ */

.mira-block-mark {
  /* Default colour token — overridden by --light variant */
  --mira-color: #11110f;
  --mira-size: 120px;

  width:  var(--mira-size);
  height: var(--mira-size);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  /* rotation acts on the whole diamond cluster in idle state */
  transform-origin: center center;
}

/* Light variant: use cream/white on dark backgrounds */
.mira-block-mark--light {
  --mira-color: #fffcf2;
}

/* ── Individual block ── */
.mira-block {
  position: absolute;
  /* 30% of container = each facet */
  width:  30%;
  height: 30%;
  border-radius: 22%;
  /* Solid fill for all blocks — top overrides to hollow below */
  background: var(--mira-color);
  transform: rotate(45deg);
  transform-origin: center center;
}

/* ── Diamond positions (symmetric: each centre 33% from container centre) ── */

/* Top — hollow outline square */
.mira-block--top {
  background: transparent;
  border: max(1.5px, calc(var(--mira-size) * 0.042)) solid var(--mira-color);
  left:   35%;
  top:    4%;
}

/* Left — solid */
.mira-block--left {
  left: 4%;
  top:  35%;
}

/* Right — solid */
.mira-block--right {
  right: 4%;
  top:   35%;
}

/* Bottom — solid */
.mira-block--bottom {
  left:   35%;
  bottom: 4%;
}

/* ================================================================
   IDLE STATE — slow step-rotation of the whole diamond
   Rotates 90° at a time, pauses between steps.
   Completes a full 360° per cycle so loop is seamless.
   ================================================================ */

.mira-block-mark--idle {
  animation: miraIdleRotate 12s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes miraIdleRotate {
  0%    { transform: rotate(0deg);   }
  18%   { transform: rotate(0deg);   }   /* hold ~2.2s */
  26%   { transform: rotate(90deg);  }   /* rotate ~1s  */
  43%   { transform: rotate(90deg);  }   /* hold ~2.0s */
  51%   { transform: rotate(180deg); }   /* rotate ~1s  */
  68%   { transform: rotate(180deg); }   /* hold ~2.0s */
  76%   { transform: rotate(270deg); }   /* rotate ~1s  */
  93%   { transform: rotate(270deg); }   /* hold ~2.0s */
  100%  { transform: rotate(360deg); }   /* rotate ~0.8s → 360°=0°, seamless loop */
}

/* ================================================================
   ACTIVE STATES — sequential clockwise glow pulse
   One block lights up at a time (top → right → bottom → left).
   No positional transforms — shape stays perfectly intact.
   All four states share the same keyframe; speed varies by state.
   ================================================================ */

/* Single shared glow keyframe:
   block is dim most of the cycle, briefly reaches full opacity */
@keyframes miraBlockGlow {
  0%, 25%, 100% { opacity: 0.20; }
  12%           { opacity: 1.00; }
}

/* Shared setup for all active states */
.mira-block-mark--thinking .mira-block,
.mira-block-mark--searching .mira-block,
.mira-block-mark--answering .mira-block,
.mira-block-mark--talking .mira-block {
  animation-name: miraBlockGlow;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Cycle duration — searching is faster (processing feel) */
.mira-block-mark--thinking .mira-block  { animation-duration: 2.0s; }
.mira-block-mark--searching .mira-block { animation-duration: 1.4s; }
.mira-block-mark--answering .mira-block { animation-duration: 1.8s; }
.mira-block-mark--talking .mira-block   { animation-duration: 2.0s; }

/* Clockwise stagger: top → right → bottom → left
   Each block starts its glow 25% of the cycle after the previous */
.mira-block-mark--thinking  .mira-block--top,
.mira-block-mark--searching .mira-block--top,
.mira-block-mark--answering .mira-block--top,
.mira-block-mark--talking   .mira-block--top   { animation-delay: 0.00s; }

.mira-block-mark--thinking  .mira-block--right,
.mira-block-mark--searching .mira-block--right,
.mira-block-mark--answering .mira-block--right,
.mira-block-mark--talking   .mira-block--right  { animation-delay: -1.50s; }

.mira-block-mark--thinking  .mira-block--bottom,
.mira-block-mark--searching .mira-block--bottom,
.mira-block-mark--answering .mira-block--bottom,
.mira-block-mark--talking   .mira-block--bottom { animation-delay: -1.00s; }

.mira-block-mark--thinking  .mira-block--left,
.mira-block-mark--searching .mira-block--left,
.mira-block-mark--answering .mira-block--left,
.mira-block-mark--talking   .mira-block--left   { animation-delay: -0.50s; }

/* ================================================================
   REDUCED MOTION — disable all MiraBlockMark animations
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .mira-block-mark {
    animation: none !important;
    transition: none !important;
  }
  .mira-block {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================
   SMALL + OUTLINE VARIANT — four hollow squares, zero animation
   Automatically applied when size <= 40 (via JS class injection).
   Also applies via explicit --outline class.
   ================================================================ */

/* Kill all motion on the container */
.mira-block-mark--small,
.mira-block-mark--static {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
}

/* Kill all motion on each individual block */
.mira-block-mark--small .mira-block,
.mira-block-mark--static .mira-block {
  animation: none !important;
  transition: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* All four blocks become hollow outline squares.
   Uses --mira-color (already set per dark/light tone on the container) */
.mira-block-mark--small .mira-block,
.mira-block-mark--outline .mira-block {
  background: transparent !important;
  border: 1.5px solid var(--mira-color);
  box-shadow: none !important;
}

/* On topic sections: tighten the row — sits inside a narrower context */
.gl-tp-section .gl-subtopic-row {
  padding-left: 0;
  padding-right: 0;
  margin-top: 12px;
  margin-bottom: 20px;
}


/* ================================================================
   DOT PATTERN — subtle texture visible in gutters between cards
   Applied via background-image (not ::before) so it is never buried
   by stacking-context layering.

   Scope:
     • .gl-unified-scroll — Today + all topic sections + Charity/Volunteering
     • .gl-te .gl-rail-content — TopicEditionScreen (no gl-unified-scroll wrapper)

   Cards carry opaque backgrounds so the dots are hidden under each
   card surface and only show through padding / gutters between cards.
   ================================================================ */

/* TopicEditionScreen card area — shares the same dot density and lighter tint */
.gl-te .gl-rail-content {
  background-color: #fbf8ef;
  background-image: radial-gradient(rgba(17,17,15,0.12) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ================================================================
   CHARITY & VOLUNTEERING PAGES
   Reuse the gl-today / gl-today-unified layout — no topic rail.
   ================================================================ */

/* Collapse gl-today-main to single column when there is no topic rail */
@media (min-width: 1024px) {
  .gl-today-main--norail {
    grid-template-columns: 1fr;
  }
}

/* ── Intro hero card ── */
.gl-csp-intro-card {
  margin: 0 16px 4px;
  border-radius: var(--g-radius, 14px);
  border: 1px solid var(--g-line, rgba(17,17,15,0.09));
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gl-csp-intro-card--charity {
  background: linear-gradient(140deg, rgba(199,123,74,0.10) 0%, var(--g-surface, #f5f2e8) 60%);
  border-color: rgba(199,123,74,0.22);
}
.gl-csp-intro-card--volunteering {
  background: linear-gradient(140deg, rgba(74,140,114,0.10) 0%, var(--g-surface, #f5f2e8) 60%);
  border-color: rgba(74,140,114,0.22);
}

.gl-csp-eyebrow {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gl-csp-accent, rgba(17,17,15,0.38));
}
.gl-csp-intro-card--charity  .gl-csp-eyebrow { color: #C77B4A; }
.gl-csp-intro-card--volunteering .gl-csp-eyebrow { color: #4A8C72; }

.gl-csp-title {
  font-family: 'Newsreader', 'Source Serif 4', Georgia, serif;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  color: var(--g-ink, #11110f);
}

.gl-csp-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--g-ink-muted, rgba(17,17,15,0.55));
  margin: 0;
  max-width: 640px;
}

/* ── Charity and Volunteering accent cards ── */
.gt2-daily-card--charity {
  background: linear-gradient(150deg, rgba(199,123,74,0.12) 0%, var(--g-surface) 65%);
  border-color: rgba(199,123,74,0.28);
}
.gt2-daily-card--charity:hover { border-color: rgba(199,123,74,0.50); }
.gt2-daily-card--charity .gt2-daily-card-eyebrow { color: #C77B4A; }
.gt2-daily-card--charity .gt2-daily-card-cta     { color: #C77B4A; font-weight: 700; }

.gt2-daily-card--volunteering {
  background: linear-gradient(150deg, rgba(74,140,114,0.12) 0%, var(--g-surface) 65%);
  border-color: rgba(74,140,114,0.28);
}
.gt2-daily-card--volunteering:hover { border-color: rgba(74,140,114,0.50); }
.gt2-daily-card--volunteering .gt2-daily-card-eyebrow { color: #4A8C72; }
.gt2-daily-card--volunteering .gt2-daily-card-cta     { color: #4A8C72; font-weight: 700; }

/* ── Footer row ── */
.gl-csp-footer-row {
  padding: 12px 16px 80px;
}

/* ── Desktop padding adjustments ── */
@media (min-width: 768px) {
  .gl-csp-intro-card { margin: 0 32px 4px; padding: 40px 36px 44px; }
}
@media (min-width: 1200px) {
  .gl-csp-intro-card { margin: 0 40px 4px; padding: 48px 44px 52px; }
  .gl-csp-footer-row { padding: 12px 40px 80px; }
}

/* ================================================================
   MIRA PRODUCT LAYER — Ask Mira, My Briefing, Citations, Knowledge
   All Mira UI. Does not affect existing cards, header, sidebar.
   ================================================================ */

/* ── Shared Mira source card (citation) ─────────────────────────────────────── */
.mira-source-card {
  display: block;
  padding: 10px 12px;
  background: rgba(255,252,242,0.80);
  border: 1px solid rgba(17,17,15,0.09);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.14s;
}
.mira-source-card:hover { background: rgba(255,252,242,1); }
.mira-source-card--compact { padding: 8px 10px; }

.mira-source-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.mira-source-name  { font-size: 11px; font-weight: 600; color: rgba(17,17,15,0.65); }
.mira-source-topic { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.mira-source-country { font-size: 10px; color: rgba(17,17,15,0.40); border-left: 1px solid rgba(17,17,15,0.12); padding-left: 6px; }
.mira-source-time  { font-size: 10px; color: rgba(17,17,15,0.38); margin-left: auto; }
.mira-source-title { font-size: 13px; font-weight: 500; color: #11110f; line-height: 1.4; margin: 0; }
.mira-source-card--compact .mira-source-title { font-size: 12px; }

/* ── Ask Mira panel (story detail page) ──────────────────────────────────────── */
.mira-ask-panel {
  background: rgba(255,252,242,0.60);
  border: 1px solid rgba(17,17,15,0.10);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 24px 0 0;
}
.mira-ask-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.mira-ask-hd-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #11110f;
  flex: 1;
}
.mira-ask-usage {
  font-size: 11px;
  color: rgba(17,17,15,0.42);
  background: rgba(17,17,15,0.05);
  border-radius: 20px;
  padding: 3px 8px;
}

.mira-ask-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.mira-ask-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: rgba(17,17,15,0.72);
  background: rgba(255,252,242,0.90);
  border: 1px solid rgba(17,17,15,0.14);
  border-radius: 20px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  text-align: left;
}
.mira-ask-btn:hover { background: #fff; border-color: rgba(17,17,15,0.28); color: #11110f; }
.mira-ask-btn.is-active {
  background: #11110f;
  border-color: #11110f;
  color: #fffaf0;
}

/* Gate (usage limit reached) */
.mira-gate {
  padding: 14px;
  background: rgba(17,17,15,0.03);
  border-radius: 10px;
  border: 1px dashed rgba(17,17,15,0.12);
}
.mira-gate-text { font-size: 13px; font-weight: 600; margin: 0 0 4px; color: #11110f; }
.mira-gate-sub  { font-size: 12px; color: rgba(17,17,15,0.52); margin: 0 0 12px; }
.mira-gate-cta  {
  font-family: inherit; font-size: 12px; font-weight: 600;
  background: rgba(17,17,15,0.08); color: rgba(17,17,15,0.42);
  border: 1px solid rgba(17,17,15,0.10); border-radius: 8px;
  padding: 7px 14px; cursor: not-allowed;
}

/* Mira answer */
.mira-answer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(17,17,15,0.07);
}
.mira-answer-text { margin-bottom: 12px; }
.mira-answer-line {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(17,17,15,0.82);
  margin: 0 0 6px;
}
.mira-answer-src-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17,17,15,0.38);
  margin: 0 0 8px;
}
.mira-answer-sources { display: flex; flex-direction: column; gap: 6px; }
.mira-answer-no-src  { font-size: 12px; color: rgba(17,17,15,0.42); font-style: italic; margin: 0; }

/* ── Mira connections section (story detail page) ────────────────────────────── */
.mira-connections-section { background: rgba(255,252,242,0.50); border-radius: 12px; padding: 16px; }
.mira-connections-hd { display: flex; align-items: center; gap: 7px; }
.mira-connections-note { font-size: 12px; color: rgba(17,17,15,0.52); margin: 0 0 12px; }
.mira-connections-list { display: flex; flex-direction: column; gap: 10px; }
.mira-connection-item { display: flex; flex-direction: column; gap: 5px; }
.mira-connection-through {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(17,17,15,0.36);
}

/* ── Search: Mira question routing ──────────────────────────────────────────── */
.gl-search-mira-prompt {
  padding: 14px 16px;
}
.gl-search-mira-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #11110f;
  margin-bottom: 8px;
}
.gl-search-mira-context-label {
  font-size: 11px;
  color: rgba(17,17,15,0.45);
  margin: 0 0 8px;
  font-weight: 500;
}
.gl-search-mira-context { display: flex; flex-direction: column; gap: 6px; }
.gl-search-mira-story  { cursor: pointer; }
.gl-search-mira-empty  { font-size: 13px; color: rgba(17,17,15,0.52); font-style: italic; margin: 0; }

/* ── My Briefing button in masthead ──────────────────────────────────────────── */
.gl-mast-briefing-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: rgba(17,17,15,0.55);
  background: rgba(17,17,15,0.05);
  border: 1px solid rgba(17,17,15,0.10);
  border-radius: 16px;
  padding: 5px 11px;
  cursor: pointer;
  margin-top: 8px;
  align-self: flex-start;
  transition: background 0.15s;
}
.gl-mast-briefing-btn:hover { background: rgba(17,17,15,0.09); color: #11110f; }

/* ── Profile: Mira actions row ───────────────────────────────────────────────── */
.gl-profile-mira-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  flex-wrap: wrap;
}
.gl-profile-mira-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #11110f;
  background: rgba(255,252,242,0.90);
  border: 1px solid rgba(17,17,15,0.14);
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.14s;
}
.gl-profile-mira-btn:hover { background: #fffaf0; }
.gl-profile-mira-btn-arrow { opacity: 0.45; margin-left: 2px; }
.gl-profile-mira-usage {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gl-profile-mira-usage-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(17,17,15,0.38); }
.gl-profile-mira-usage-count { font-size: 12px; color: rgba(17,17,15,0.60); }

/* Profile plan badge Plus variant */
.gl-profile-plan-badge--plus {
  background: #11110f;
  color: #fffaf0;
  border-color: transparent;
}

/* ── Knowledge History card ──────────────────────────────────────────────────── */
.gl-knowledge-card {
  background: rgba(255,252,242,0.74);
  border: 1px solid rgba(17,17,15,0.08);
  border-radius: 16px;
  padding: 20px 22px;
}
.gl-knowledge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(17,17,15,0.07);
  border-radius: 10px;
  overflow: hidden;
  margin: 14px 0;
}
@media (max-width: 500px) {
  .gl-knowledge-grid { grid-template-columns: repeat(2, 1fr); }
}
.gl-knowledge-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  border-right: 1px solid rgba(17,17,15,0.07);
  text-align: center;
}
.gl-knowledge-stat:last-child { border-right: none; }
.gl-knowledge-num   { font-size: 22px; font-weight: 700; color: #11110f; line-height: 1; }
.gl-knowledge-label { font-size: 10px; color: rgba(17,17,15,0.42); margin-top: 4px; }
.gl-knowledge-recent { margin-top: 6px; }
.gl-knowledge-recent-hd {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(17,17,15,0.38); margin: 0 0 8px;
}
.gl-knowledge-query {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 0;
  border-top: 1px solid rgba(17,17,15,0.05);
}
.gl-knowledge-query:first-child { border-top: none; }
.gl-knowledge-query-q   { font-size: 12px; font-weight: 500; color: #11110f; }
.gl-knowledge-query-art { font-size: 11px; color: rgba(17,17,15,0.40); }

/* ── My Briefing page ────────────────────────────────────────────────────────── */
.mira-briefing-page {
  min-height: 100dvh;
  background: var(--g-bg, #EBE7D8);
  display: flex;
  flex-direction: column;
}
.mira-briefing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--g-bg, #EBE7D8);
  border-bottom: 1px solid rgba(17,17,15,0.07);
}
.mira-briefing-back {
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: rgba(17,17,15,0.65); background: none; border: none; cursor: pointer; padding: 0;
}
.mira-briefing-back:hover { color: #11110f; }
.mira-briefing-brand { font-size: 14px; font-weight: 700; color: #11110f; }

.mira-briefing-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .mira-briefing-scroll { padding: 0 32px; }
}

.mira-briefing-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 0 24px;
  border-bottom: 1px solid rgba(17,17,15,0.08);
  margin-bottom: 24px;
}
.mira-briefing-hero-text { flex: 1; }
.mira-briefing-title {
  font-family: var(--font-title, 'Newsreader', Georgia, serif);
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #11110f;
  margin: 0 0 4px;
}
.mira-briefing-date  { font-size: 12px; color: rgba(17,17,15,0.45); margin: 0 0 6px; }
.mira-briefing-focus { font-size: 11px; font-weight: 600; color: rgba(17,17,15,0.50); margin: 0; }

.mira-briefing-sections { display: flex; flex-direction: column; gap: 24px; }

.mira-briefing-section { }
.mira-briefing-section-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.mira-briefing-section-num {
  font-family: var(--font-title, 'Newsreader', Georgia, serif);
  font-size: 11px;
  font-weight: 400;
  color: rgba(17,17,15,0.30);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.mira-briefing-section-title {
  font-family: var(--font-title, 'Newsreader', Georgia, serif);
  font-size: clamp(16px, 3vw, 20px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #11110f;
  margin: 0;
}
.mira-briefing-story-list { display: flex; flex-direction: column; gap: 8px; }
.mira-briefing-story {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.mira-briefing-empty {
  font-size: 13px;
  color: rgba(17,17,15,0.42);
  font-style: italic;
  margin: 0;
  padding: 12px 0;
}

/* Plus gate */
.mira-plus-gate {
  background: rgba(255,252,242,0.70);
  border: 1px dashed rgba(17,17,15,0.16);
  border-radius: 14px;
  padding: 24px 22px;
  margin-top: 4px;
}
.mira-plus-gate-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.mira-plus-gate-title {
  font-family: var(--font-title, 'Newsreader', Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #11110f;
  margin: 0;
}
.mira-plus-gate-body {
  font-size: 13px;
  color: rgba(17,17,15,0.65);
  line-height: 1.55;
  margin: 0 0 12px;
}
.mira-plus-gate-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mira-plus-gate-list li {
  font-size: 12px;
  color: rgba(17,17,15,0.60);
  padding-left: 14px;
  position: relative;
}
.mira-plus-gate-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: rgba(17,17,15,0.30);
}
.mira-plus-gate-cta {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  background: rgba(17,17,15,0.07);
  color: rgba(17,17,15,0.40);
  border: 1px solid rgba(17,17,15,0.10);
  border-radius: 8px;
  padding: 9px 18px;
  cursor: not-allowed;
}

.mira-briefing-footer {
  font-size: 11px;
  color: rgba(17,17,15,0.35);
  margin: 28px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(17,17,15,0.07);
  font-style: italic;
}

/* ================================================================
   MIRA UPGRADE — MiraBlockMark, redesigned search, chat panel,
   briefing page, article placement. Extends prior Mira CSS.
   ================================================================ */

/* ── MiraBlockMark generic ──────────────────────────────────────────────────── */
.mira-block-mark { display:inline-block; flex-shrink:0; }

/* ── Search trigger: now Mira-branded ───────────────────────────────────────── */
.gl-header-search-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: rgba(17,17,15,0.55);
  background: rgba(17,17,15,0.05);
  border: 1px solid rgba(17,17,15,0.10);
  border-radius: 20px;
  padding: 6px 14px 6px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.gl-header-search-trigger span[aria-hidden] { font-size: 12px; line-height: 1; }
.gl-header-search-trigger:hover { background: rgba(17,17,15,0.09); color: #11110f; }

/* ── Search overlay — Mira redesign ────────────────────────────────────────── */
.gl-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(17,17,15,0.30);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(40px, 8vh, 100px);
  padding-bottom: 40px;
}
.gl-search-panel {
  background: #EBE7D8;
  border: 1px solid rgba(17,17,15,0.10);
  border-radius: 18px;
  width: min(640px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(17,17,15,0.22);
}
.gl-search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(17,17,15,0.07);
}
.gl-search-mira-icon { opacity: 0.70; flex-shrink: 0; }
.gl-search-input-icon { flex-shrink: 0; opacity: 0.75; }
.gl-search-input {
  flex: 1;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: #11110f;
  background: none;
  border: none;
  outline: none;
}
.gl-search-input::placeholder { color: rgba(17,17,15,0.38); }
.gl-search-clear {
  background: none; border: none; cursor: pointer;
  color: rgba(17,17,15,0.35); padding: 3px; display: flex; align-items: center;
}
.gl-search-clear:hover { color: #11110f; }
.gl-search-send-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  background: #11110f; color: #EBE7D8;
  border: none; border-radius: 7px; cursor: pointer;
  transition: background 0.12s, transform 0.1s;
}
.gl-search-send-btn:hover { background: #2a2a25; transform: translateY(-1px); }
.gl-search-send-btn:active { transform: scale(0.93); }
.gl-search-esc-btn {
  font-family: inherit; font-size: 11px; font-weight: 600;
  color: rgba(17,17,15,0.45); background: rgba(17,17,15,0.06);
  border: 1px solid rgba(17,17,15,0.10); border-radius: 5px;
  padding: 3px 7px; cursor: pointer; flex-shrink: 0;
}

/* Welcome / empty state */
.gl-search-mira-welcome {
  padding: 20px 22px 24px;
}
.gl-search-mira-welcome-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.gl-search-mira-welcome-label {
  font-size: 16px;
  font-weight: 700;
  color: #11110f;
}
.gl-search-mira-welcome-sub {
  font-size: 13px;
  color: rgba(17,17,15,0.52);
  margin: 0 0 16px;
  line-height: 1.5;
}
.gl-search-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gl-search-suggestion {
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: rgba(17,17,15,0.65);
  background: rgba(17,17,15,0.04);
  border: 1px solid rgba(17,17,15,0.08);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.gl-search-suggestion:hover { background: rgba(17,17,15,0.08); color: #11110f; }

/* Mira question results panel */
.gl-search-mira-panel {
  padding: 18px 20px;
}
.gl-search-mira-panel-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.gl-search-mira-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #11110f;
}
.gl-search-mira-panel-sub {
  font-size: 12px;
  color: rgba(17,17,15,0.48);
  margin: 0 0 12px;
}
.gl-search-mira-stories {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gl-search-mira-story-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.gl-search-mira-none {
  font-size: 13px;
  color: rgba(17,17,15,0.48);
  font-style: italic;
  margin: 0;
}

/* Standard results list */
.gl-search-results {
  list-style: none; padding: 8px 0; margin: 0;
  border-top: 1px solid rgba(17,17,15,0.06);
}
.gl-search-result {
  padding: 11px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(17,17,15,0.05);
  transition: background 0.12s;
}
.gl-search-result:last-child { border-bottom: none; }
.gl-search-result:hover { background: rgba(17,17,15,0.04); }
.gl-search-result-title { font-size: 13px; font-weight: 500; color: #11110f; }
.gl-search-result-meta { display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; }
.gl-search-result-tag { font-size:10px; font-weight:600; color:rgba(17,17,15,0.45); background:rgba(17,17,15,0.06); border-radius:4px; padding:2px 5px; }
.gl-search-result-tag--country { color:rgba(17,17,15,0.35); }
.gl-search-result-snippet {
  font-size: 12px;
  color: rgba(17,17,15,0.52);
  line-height: 1.5;
  margin-top: 3px;
}
.gl-search-result-src {
  font-size: 10px;
  color: rgba(17,17,15,0.32);
  font-weight: 500;
  margin-left: 2px;
}
.gl-search-results-hd {
  font-size: 11px;
  font-weight: 600;
  color: rgba(17,17,15,0.40);
  letter-spacing: 0.02em;
  padding: 10px 20px 6px;
}
.gl-search-results-hd em { font-style: normal; color: rgba(17,17,15,0.56); }

/* Empty state */
.gl-search-empty-state {
  padding: 32px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.gl-search-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(17,17,15,0.55);
  margin: 0;
}
.gl-search-empty-hint {
  font-size: 12px;
  color: rgba(17,17,15,0.38);
  margin: 0;
}

/* "Ask Mira about X" prompt that appears below normal results */
.gl-search-mira-also {
  padding: 10px 20px 16px;
  border-top: 1px solid rgba(17,17,15,0.06);
}
.gl-search-mira-also-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: rgba(17,17,15,0.60);
  background: rgba(17,17,15,0.05);
  border: 1px solid rgba(17,17,15,0.10);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.13s;
}
.gl-search-mira-also-btn:hover { background: rgba(17,17,15,0.09); color: #11110f; }
.gl-search-empty { font-size:13px; color:rgba(17,17,15,0.48); font-style:italic; margin:0 0 8px; }

/* ── AskMiraPanel v2 — article page ────────────────────────────────────────── */
.mira-ask-panel--v2 {
  background: rgba(255,252,242,0.70);
  border: 1.5px solid rgba(17,17,15,0.10);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 0 0 20px;
}

/* header */
.mira-ask-panel--v2 .mira-ask-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.mira-ask-panel--v2 .mira-ask-hd-label {
  font-family: var(--font-title, 'Newsreader', Georgia, serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #11110f;
}

/* text input row */
.mira-ask-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(17,17,15,0.12);
  border-radius: 12px;
  padding: 3px 6px 3px 12px;
  margin-bottom: 10px;
}
.mira-ask-input {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: #11110f;
  background: none;
  border: none;
  outline: none;
  padding: 8px 0;
  min-width: 0;
}
.mira-ask-input::placeholder { color: rgba(17,17,15,0.35); }
.mira-ask-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: rgba(17,17,15,0.08);
  color: rgba(17,17,15,0.40);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s;
}
.mira-ask-send.is-active { background: #11110f; color: #fffaf0; }
.mira-ask-send:hover:not(.is-active) { background: rgba(17,17,15,0.14); color: #11110f; }

/* suggestion chips */
.mira-ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.mira-ask-chip {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: rgba(17,17,15,0.62);
  background: rgba(255,252,242,0.95);
  border: 1px solid rgba(17,17,15,0.12);
  border-radius: 20px;
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.mira-ask-chip:hover { background:#fff; border-color:rgba(17,17,15,0.25); color:#11110f; }
.mira-ask-chip.is-active { background:#11110f; border-color:#11110f; color:#fffaf0; }

/* loading state */
.mira-loading {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 0 4px;
}
.mira-loading-icon {
  opacity: 0.55;
  animation: mira-pulse 1.4s ease-in-out infinite;
}
@keyframes mira-pulse {
  0%,100% { opacity: 0.55; } 50% { opacity: 0.20; }
}
.mira-loading-text {
  font-size: 13px;
  color: rgba(17,17,15,0.45);
  font-style: italic;
}

/* answer question echo */
.mira-answer-question {
  font-size: 11px;
  color: rgba(17,17,15,0.40);
  margin: 0 0 8px;
}
.mira-answer-question em { font-style: normal; color: rgba(17,17,15,0.60); font-weight: 500; }

/* hd sub-label */
.mira-ask-hd-sub {
  font-size: 11px;
  color: rgba(17,17,15,0.40);
  font-style: italic;
  margin-left: auto;
}

/* answer body text */
.mira-answer-line {
  font-size: 14px;
  line-height: 1.65;
  color: #11110f;
  margin: 0 0 4px;
}

/* limitation note */
.mira-answer-limitation {
  font-size: 11.5px;
  color: rgba(17,17,15,0.45);
  font-style: italic;
  border-left: 2.5px solid rgba(17,17,15,0.12);
  padding-left: 9px;
  margin: 8px 0;
}

/* source button wrapper */
.mira-answer-src-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.mira-answer-src-btn:hover .mira-source-card--compact {
  background: rgba(17,17,15,0.04);
  border-color: rgba(17,17,15,0.18);
}

/* footer row */
.mira-answer-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(17,17,15,0.08);
  flex-wrap: wrap;
}
.mira-answer-feedback {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.mira-feedback-label {
  font-size: 12px;
  color: rgba(17,17,15,0.45);
  white-space: nowrap;
}
.mira-feedback-btn {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(17,17,15,0.60);
  background: rgba(17,17,15,0.06);
  border: 1px solid rgba(17,17,15,0.10);
  border-radius: 20px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.mira-feedback-btn:hover { background: rgba(17,17,15,0.12); color: #11110f; }
.mira-feedback-thanks {
  font-size: 12px;
  color: rgba(17,17,15,0.45);
  font-style: italic;
}
.mira-ask-another {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(17,17,15,0.55);
  background: none;
  border: 1px solid rgba(17,17,15,0.14);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.mira-ask-another:hover { border-color: rgba(17,17,15,0.30); color: #11110f; }

/* ── Search panel Mira answer ─────────────────────────────────────────────── */
.gl-search-mira-confidence {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2a7a4a;
  background: rgba(42,122,74,0.10);
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: auto;
}
.gl-search-mira-answer-text {
  margin: 10px 0 6px;
}
.gl-search-mira-answer-line {
  font-size: 14px;
  line-height: 1.65;
  color: #11110f;
  margin: 0 0 4px;
}
.gl-search-mira-limitation {
  font-size: 11.5px;
  color: rgba(17,17,15,0.45);
  font-style: italic;
  border-left: 2.5px solid rgba(17,17,15,0.12);
  padding-left: 8px;
  margin: 6px 0 8px;
}
.gl-search-mira-feedback {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(17,17,15,0.07);
}

/* ── Mira answer: polished editorial layout ─── */
.gl-mira-answer-question {
  font-size: 15px;
  font-weight: 700;
  color: #11110f;
  line-height: 1.35;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(17,17,15,0.09);
}
.gl-mira-answer-body {
  margin: 0 0 12px;
}
.gl-mira-answer-para {
  font-size: 14px;
  line-height: 1.68;
  color: #11110f;
  margin: 0 0 10px;
}
.gl-mira-answer-para:last-child { margin-bottom: 0; }
.gl-mira-answer-list {
  margin: 0 0 10px;
  padding-left: 18px;
}
.gl-mira-answer-list--numbered {
  list-style-type: decimal;
}
.gl-mira-answer-list:not(.gl-mira-answer-list--numbered) {
  list-style: none;
  padding-left: 0;
}
.gl-mira-answer-list:not(.gl-mira-answer-list--numbered) .gl-mira-answer-item {
  padding-left: 14px;
  position: relative;
}
.gl-mira-answer-list:not(.gl-mira-answer-list--numbered) .gl-mira-answer-item::before {
  content: '–';
  position: absolute;
  left: 0;
  color: rgba(17,17,15,0.35);
}
.gl-mira-answer-item {
  font-size: 13.5px;
  line-height: 1.6;
  color: #11110f;
  margin-bottom: 5px;
}
.gl-mira-answer-item:last-child { margin-bottom: 0; }

/* Too-vague guard */
.gl-mira-too-vague {
  padding: 12px 0 4px;
}
.gl-mira-too-vague-text {
  font-size: 14px;
  color: #11110f;
  margin: 0 0 8px;
  line-height: 1.55;
}
.gl-mira-too-vague-hint {
  font-size: 13px;
  color: rgba(17,17,15,0.52);
  margin: 0;
  line-height: 1.5;
}
.gl-mira-too-vague-hint em { font-style: normal; color: rgba(17,17,15,0.75); font-weight: 500; }

/* ── My Briefing page (mbf-*) ───────────────────────────────────────────────── */
.mbf-page {
  min-height: 100dvh;
  background: var(--g-bg, #EBE7D8);
  display: flex;
  flex-direction: column;
}

/* topbar */
.mbf-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--g-bg, #EBE7D8);
  border-bottom: 1px solid rgba(17,17,15,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}
.mbf-back {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: rgba(17,17,15,0.58);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.mbf-back:hover { color: #11110f; }
.mbf-topbar-brand {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #11110f;
}

/* scroll container */
.mbf-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
  max-width: 740px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) { .mbf-scroll { padding: 0 40px; } }

/* hero */
.mbf-hero {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 36px 0 28px;
  border-bottom: 1.5px solid rgba(17,17,15,0.09);
  margin-bottom: 28px;
}
.mbf-hero-mark { flex-shrink: 0; color: #11110f; }
.mbf-hero-text { flex: 1; }
.mbf-hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17,17,15,0.38);
  margin: 0 0 6px;
}
.mbf-hero-title {
  font-family: var(--font-title, 'Newsreader', Georgia, serif);
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #11110f;
  margin: 0 0 6px;
  line-height: 1.15;
}
.mbf-hero-subtitle {
  font-size: 14px;
  color: rgba(17,17,15,0.52);
  margin: 0;
  line-height: 1.5;
}

/* meta bar */
.mbf-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.mbf-meta-date    { font-size: 12px; font-weight: 600; color: rgba(17,17,15,0.55); }
.mbf-meta-sep     { font-size: 12px; color: rgba(17,17,15,0.25); }
.mbf-meta-topics  { font-size: 12px; color: rgba(17,17,15,0.50); }
.mbf-meta-sources { font-size: 12px; color: rgba(17,17,15,0.40); }

/* Mira intro line */
.mbf-mira-intro {
  font-size: 13px;
  color: rgba(17,17,15,0.55);
  font-style: italic;
  margin: 0 0 28px;
  line-height: 1.5;
}

/* sections container */
.mbf-sections {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-bottom: 8px;
}

/* individual section */
.mbf-section {}
.mbf-section-hd {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.mbf-section-num {
  font-family: var(--font-title, 'Newsreader', Georgia, serif);
  font-size: 11px;
  font-weight: 400;
  color: rgba(17,17,15,0.28);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.mbf-section-title {
  font-family: var(--font-title, 'Newsreader', Georgia, serif);
  font-size: clamp(17px, 3vw, 22px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #11110f;
  margin: 0;
  line-height: 1.2;
}
.mbf-section-intro {
  font-size: 13px;
  color: rgba(17,17,15,0.60);
  line-height: 1.6;
  margin: 0 0 12px;
  border-left: 2px solid rgba(17,17,15,0.10);
  padding-left: 12px;
}
.mbf-story-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mbf-story-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.mbf-empty {
  font-size: 13px;
  color: rgba(17,17,15,0.40);
  font-style: italic;
  margin: 0;
  padding: 10px 0;
}

/* footer */
.mbf-footer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 0;
  margin-top: 24px;
  border-top: 1px solid rgba(17,17,15,0.07);
  color: rgba(17,17,15,0.30);
}
.mbf-footer-text {
  font-size: 11px;
  color: rgba(17,17,15,0.35);
  font-style: italic;
  margin: 0;
  line-height: 1.5;
}

/* ── Mira masthead briefing button ─────────────────────────────────────────── */
.gl-mast-briefing-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Profile Mira description ──────────────────────────────────────────────── */
.gl-profile-mira-desc {
  font-size: 12px;
  color: rgba(17,17,15,0.48);
  margin: 6px 0 0;
  line-height: 1.5;
}

/* ── Mira article placement: no more margin-bottom 24px override ───────────── */
/* The AskMiraPanel now has margin: 0 0 20px naturally */
/* On desktop, it appears inline in the main column flow */
@media (min-width: 900px) {
  .mira-ask-panel--v2 {
    margin-bottom: 24px;
  }
}

/* ── Unsubscribe confirmation screen ─────────────────────────────────────── */
.gl-unsub-screen {
  min-height: 100vh;
  background: #f4efe3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.gl-unsub-card {
  background: #fbf8ef;
  border: 1px solid #ded6c6;
  border-radius: 16px;
  padding: 48px 36px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.gl-unsub-wordmark {
  display: block;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #11110f;
  margin-bottom: 28px;
}
.gl-unsub-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #11110f;
  margin: 0 0 14px;
}
.gl-unsub-body {
  font-size: 14px;
  color: #7f786b;
  line-height: 1.65;
  margin: 0 0 28px;
}
.gl-unsub-cta {
  display: inline-block;
  background: #11110f;
  color: #fffaf0;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  cursor: pointer;
}
.gl-unsub-cta:hover { background: #2a2a28; }

/* ── Profile: dev test email buttons (localhost only) ───────────────────── */
.gl-profile-dev-email-tests {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.gl-profile-dev-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(17,17,15,0.06);
  border: 1px dashed rgba(17,17,15,0.22);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 12px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: rgba(17,17,15,0.65);
  cursor: pointer;
}
.gl-profile-dev-btn:hover {
  background: rgba(17,17,15,0.1);
  color: #11110f;
}

/* ── Mira autocomplete dropdown ─────────────────────────────────────────── */
.gl-ac-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid #ded6c6;
  background: #fbf8ef;
}
.gl-ac-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 9px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #11110f;
  border-radius: 0;
  transition: background 80ms;
}
.gl-ac-item:hover,
.gl-ac-item--active {
  background: rgba(17,17,15,0.05);
}
.gl-ac-item-label {
  flex: 1;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #11110f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-ac-item--active .gl-ac-item-label {
  color: #11110f;
}
.gl-ac-item-type {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a09685;
  background: rgba(17,17,15,0.07);
  border-radius: 4px;
  padding: 2px 6px;
}
.gl-ac-item--active .gl-ac-item-type {
  background: rgba(17,17,15,0.12);
}

/* ── Mira correction notice ─────────────────────────────────────────────── */
.gl-search-mira-correction {
  font-size: 12px;
  color: #7f786b;
  margin: 0 0 10px;
  padding: 0;
  font-style: italic;
}
.gl-search-mira-correction-label {
  color: #a09685;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
}

/* ── Honest confidence label variants ──────────────────────────────────── */
.gl-search-mira-confidence {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: auto;
}
.gl-search-mira-confidence--high {
  color: #22c55e;
  background: rgba(34,197,94,.12);
}
.gl-search-mira-confidence--medium {
  color: #e8a020;
  background: rgba(232,160,32,.12);
}
.gl-search-mira-confidence--limited {
  color: #a09685;
  background: rgba(160,150,133,.12);
}
.gl-search-mira-confidence--none {
  color: #e84040;
  background: rgba(232,64,64,.10);
}

/* ── EventClusterCard badge ───────────────────────────────────────────────── */
.gt2-scard--cluster .gt2-scard-cluster-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
}
.gt2-scard-cluster-count {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.gt2-scard-cluster-dot {
  font-size: 9px;
  color: rgba(255,255,255,0.45);
}
.gt2-scard-cluster-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.60);
}

/* =====================================================================
   ARTICLE BRIEF MODULE (abm-*)
   Premium dotted-cream Mira reading card — used on all article pages.
   ===================================================================== */

.abm-module {
  margin: 0 0 32px;
  border-radius: 18px;
  overflow: hidden;
  /* Dotted cream — matches home content area */
  background-color: var(--g-surface-2, #FFFCF2);
  background-image: radial-gradient(rgba(17,17,15,0.09) 1px, transparent 1px);
  background-size: 18px 18px;
  border: 1px solid var(--g-line, rgba(17,17,15,0.09));
  box-shadow: 0 2px 12px rgba(45,38,22,0.07), 0 0 0 0.5px rgba(17,17,15,0.04);
}

/* ── Header bar ───────────────────────────────────────────────────── */
.abm-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 11px 14px;
  background: rgba(255,255,255,0.55);
  border-bottom: 1px solid var(--g-line, rgba(17,17,15,0.08));
  backdrop-filter: blur(2px);
}

.abm-mira-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(17,17,15,0.07);
  border: 1px solid rgba(17,17,15,0.10);
  border-radius: 20px;
  padding: 3px 9px 3px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(17,17,15,0.52);
  flex-shrink: 0;
}

.abm-header-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(17,17,15,0.65);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.abm-src-count {
  font-size: 11px;
  font-weight: 600;
  color: rgba(17,17,15,0.38);
  background: rgba(17,17,15,0.05);
  border-radius: 10px;
  padding: 2px 7px;
  flex-shrink: 0;
}

/* Quick / In depth toggle */
.abm-depth-toggle {
  display: flex;
  gap: 2px;
  background: rgba(17,17,15,0.06);
  border-radius: 9px;
  padding: 2px;
  flex-shrink: 0;
}
.abm-depth-btn {
  border: none;
  background: transparent;
  border-radius: 7px;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(17,17,15,0.44);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  letter-spacing: -0.01em;
}
.abm-depth-btn--on {
  background: #fff;
  color: rgba(17,17,15,0.82);
  box-shadow: 0 1px 4px rgba(17,17,15,0.12);
}
.abm-depth-btn:not(.abm-depth-btn--on):hover {
  color: rgba(17,17,15,0.60);
  background: rgba(17,17,15,0.04);
}

/* ── Body ─────────────────────────────────────────────────────────── */
.abm-body {
  padding: 22px 22px 24px;
}

/* Overview paragraph (cluster synthesis) */
.abm-overview-text {
  font-size: 16.5px;
  line-height: 1.70;
  color: rgba(17,17,15,0.80);
  margin: 0;
  font-family: var(--font-title, Georgia, serif);
  font-style: italic;
}

/* 30-second brief paragraph (events) */
.abm-thirty-text {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.68;
  color: rgba(17,17,15,0.82);
  margin: 0 0 4px;
}

/* Bullet lists */
.abm-bullets {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.abm-bullets--deeper .abm-bullet {
  font-size: 15.5px;
  font-weight: 400;
}
.abm-bullet {
  font-size: 16.5px;
  font-weight: 500;
  color: rgba(17,17,15,0.79);
  line-height: 1.62;
  padding-left: 20px;
  position: relative;
}
.abm-bullet::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--abm-bc, rgba(17,17,15,0.28));
  flex-shrink: 0;
}

/* Event Mira sections */
.abm-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 18px;
}
.abm-section {}
.abm-section-h {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 7px;
  color: rgba(17,17,15,0.40);
}
.abm-section-body {
  font-size: 15px;
  line-height: 1.70;
  color: rgba(17,17,15,0.74);
}
/* Bullet points inside section body */
.abm-section-body p { margin: 0 0 8px; }
.abm-section-body p:last-child { margin-bottom: 0; }

/* Key facts block */
.abm-facts-block {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(17,17,15,0.07);
}
.abm-facts-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17,17,15,0.40);
  margin-bottom: 10px;
}
.abm-facts-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.abm-fact-item {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(17,17,15,0.72);
  padding-left: 16px;
  position: relative;
}
.abm-fact-item::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--abm-bc, rgba(17,17,15,0.25));
}

/* ── Gallery count label ──────────────────────────────────────────── */
.abm-gallery-count {
  font-size: 13px;
  font-weight: 600;
  color: rgba(17,17,15,0.38);
  letter-spacing: 0;
}

/* =====================================================================
   CLUSTER IMAGE GALLERY + LIGHTBOX (abm-gallery / abm-lb)
   ===================================================================== */

.abm-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

/* Slight vertical offset for each tile — gives the "messy collage" feel */
.abm-gallery-tile {
  border: none;
  padding: 0;
  background: rgba(17,17,15,0.05);
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 6px rgba(17,17,15,0.12);
}
.abm-gallery-tile:hover {
  transform: scale(1.03) translateY(-2px);
  box-shadow: 0 6px 20px rgba(17,17,15,0.22);
  z-index: 1;
}
.abm-gallery-tile--dip  { margin-top: 10px; transform: rotate(0.5deg); }
.abm-gallery-tile--lift { margin-top: -6px; transform: rotate(-0.7deg); }
.abm-gallery-tile--dip:hover  { transform: scale(1.03) translateY(-2px) rotate(0.5deg); }
.abm-gallery-tile--lift:hover { transform: scale(1.03) translateY(-2px) rotate(-0.7deg); }

.abm-gallery-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: rgba(17,17,15,0.08);
}

.abm-gallery-foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 18px 8px 6px;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
  display: flex;
  align-items: center;
  gap: 4px;
}
.abm-gallery-src {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* ── Lightbox overlay ─────────────────────────────────────────────── */
.abm-lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,6,8,0.90);
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: abm-lb-in 0.2s ease;
}
@keyframes abm-lb-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.abm-lb-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(92vw, 740px);
}

.abm-lb-img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  animation: abm-img-in 0.22s ease;
}
@keyframes abm-img-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.abm-lb-caption {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  width: 100%;
}
.abm-lb-counter {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.35);
}

/* Close button */
.abm-lb-close {
  position: absolute;
  top: -48px; right: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.abm-lb-close:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* Prev / Next arrows */
.abm-lb-prev,
.abm-lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.80);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.abm-lb-prev { left: -56px; }
.abm-lb-next { right: -56px; }
.abm-lb-prev:hover,
.abm-lb-next:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* Collapse arrows on small screens — keep them inside the dialog */
@media (max-width: 640px) {
  .abm-lb-prev { left: 6px; }
  .abm-lb-next { right: 6px; }
  .abm-lb-close { top: -44px; }
  .abm-gallery { grid-template-columns: repeat(2, 1fr); }
  .abm-gallery-tile--lift { margin-top: 0; }
}

/* ── Cream-page overrides for abm-module ─────────────────────────── */
/* The article pages always render on --g-bg: #EBE7D8 (cream).       */
/* These rules keep the module readable on that background.           */
/* (No !important needed — the base styles already use cream tokens.) */
.abm-gallery-count { color: var(--g-ink-muted, rgba(17,17,15,0.38)); }
.abm-section-h     { color: var(--g-meta, rgba(17,17,15,0.44)); }
.abm-facts-label   { color: var(--g-meta, rgba(17,17,15,0.44)); }


/* ── Mira general-background block ────────────────────────────────────────────
   Visually distinct from the grounded news answer.
   Uses a dashed border + warm amber tint to signal "not from current reporting".
   Never appears without the label + disclaimer that make its nature clear.
   ──────────────────────────────────────────────────────────────────────────── */
/* Inline general context — same body styling as grounded answer paragraphs */
.mira-answer-general-ctx {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(17,17,15,0.10);
}
.mira-answer-line--bullet {
  padding-left: 4px;
}

/* Search panel general context */
.gl-search-mira-general-ctx {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(17,17,15,0.10);
}
.gl-search-mira-line {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: rgba(17,17,15,0.82);
  padding: 2px 0;
}
.gl-search-mira-line--bullet {
  padding-left: 4px;
}
.gl-search-mira-disclaimer {
  margin: 8px 0 0;
  font-size: 11px;
  font-style: italic;
  color: rgba(17,17,15,0.46);
  line-height: 1.5;
}

/* Keep old mira-bg-* classes as stubs (no longer rendered, avoids 404 on cached pages) */
.mira-bg-block { display: none; }
.mira-bg-block--search { display: none; }

/* ── Mira source type badge ─────────────────────────────────────────────────── */
/* Shows "Globally" or "External" before the source name in MiraSourceCard.     */
.mira-source-type-tag {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  background: rgba(90,110,160,0.10);
  color: rgba(60,80,140,0.75);
  margin-right: 2px;
}
.mira-source-type-tag--ext {
  background: rgba(120,70,30,0.09);
  color: rgba(130,65,20,0.80);
}
.mira-source-card--external {
  border-left: 2px solid rgba(140,80,20,0.25);
}

/* ================================================================
   HEADER — right-side button group
   ================================================================ */
.gl-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* "Mira Intelligence" pill gets a subtle Mira-accent tint on hover
   to distinguish it from the plain "My Profile" pill. */
.gl-tp-sub--mira-intel {
  /* Slightly warmer accent on the border so it reads as distinct */
  border-color: rgba(255,255,255,0.14) !important;
}
.gl-tp-sub--mira-intel:hover {
  border-color: rgba(200,160,80,0.32) !important;
  color: rgba(220,185,110,0.88) !important;
}

/* On the cream/light Today page override the header buttons */
.gl-today-unified .gl-tp-sub--mira-intel:hover {
  border-color: rgba(200,140,40,0.28) !important;
  color: rgba(160,100,20,0.82) !important;
}

/* ================================================================
   MIRA INTELLIGENCE — placeholder page
   ================================================================ */
.gl-mi-page {
  min-height: 100vh;
  background: var(--g-bg, #EBE7D8);
  padding: 0 0 80px;
}

.gl-mi-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.gl-mi-back {
  margin-bottom: 40px;
}

/* Masthead */
.gl-mi-masthead {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}

.gl-mi-mark {
  flex-shrink: 0;
  padding-top: 4px;
  opacity: 0.82;
}

.gl-mi-masthead-text {
  flex: 1;
}

.gl-mi-eyebrow {
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(61,56,48,0.45);
  margin: 0 0 8px;
}

.gl-mi-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--g-ink, #11110f);
  margin: 0 0 12px;
}

.gl-mi-subtitle {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(61,56,48,0.72);
  margin: 0;
}

/* Body copy */
.gl-mi-body {
  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(61,56,48,0.80);
  margin: 0 0 40px;
  max-width: 620px;
}

/* Feature cards */
.gl-mi-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 40px;
}

.gl-mi-card {
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(17,17,15,0.08);
  border-radius: 10px;
  padding: 20px 22px;
}

.gl-mi-card-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--g-ink, #11110f);
  margin: 0 0 7px;
}

.gl-mi-card-body {
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.62;
  color: rgba(61,56,48,0.72);
  margin: 0;
}

/* CTA */
.gl-mi-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gl-mi-cta {
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(61,56,48,0.38);
  background: rgba(17,17,15,0.05);
  border: 1px solid rgba(17,17,15,0.10);
  border-radius: 20px;
  padding: 9px 22px;
  cursor: default;
}

/* Desktop: 3-column card grid */
@media (min-width: 640px) {
  .gl-mi-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .gl-mi-inner {
    padding: 48px 32px 64px;
  }
}

/* ================================================================
   FOOTER INFORMATION PAGES  (.gl-fp)
   ================================================================ */

/* Rich-content document layout — overrides the centred hero used
   by the bare gl-simple-page. Same cream background, same back btn. */
.gl-fp .gl-simple-page-hero { display: none; }   /* hide the old hero wrapper */

.gl-fp-inner {
  flex: 1;                            /* fill space above footer */
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 72px 22px 64px;
  box-sizing: border-box;
}

/* ── Page header ── */
.gl-fp-header {
  margin-bottom: 44px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(17,17,15,0.08);
}

.gl-fp-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(26px, 5vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--g-ink, #11110f);
  margin: 0 0 18px;
}

.gl-fp-intro {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.62;
  color: rgba(17,17,15,0.68);
  margin: 0;
  max-width: 580px;
}

/* ── Legal callout ── */
.gl-fp-legal-note {
  background: rgba(180,120,20,0.06);
  border: 1px solid rgba(180,120,20,0.20);
  border-radius: 6px;
  padding: 13px 17px;
  margin-bottom: 36px;
}

.gl-fp-legal-note p {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(120,75,10,0.85);
  margin: 0;
}

/* ── Content sections ── */
.gl-fp-section {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(17,17,15,0.055);
}

.gl-fp-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.gl-fp-section-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--g-ink, #11110f);
  margin: 0 0 10px;
}

.gl-fp-section-body {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(17,17,15,0.70);
  margin: 0;
}

/* ── Bullet lists ── */
.gl-fp-bullets {
  margin: 10px 0 0 0;
  padding: 0 0 0 20px;
  list-style: disc;
}

.gl-fp-bullets li {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(17,17,15,0.70);
  padding: 2px 0;
}

/* ── Empty-state cards (Blog) ── */
.gl-fp-empty-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 44px;
}

.gl-fp-empty-card {
  background: rgba(255,255,255,0.48);
  border: 1px solid rgba(17,17,15,0.085);
  border-radius: 8px;
  padding: 18px 20px;
}

.gl-fp-empty-card-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--g-ink, #11110f);
  margin: 0 0 6px;
}

.gl-fp-empty-card-desc {
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.62;
  color: rgba(17,17,15,0.55);
  margin: 0;
}

/* ── Last updated ── */
.gl-fp-last-updated {
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: rgba(17,17,15,0.38);
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(17,17,15,0.07);
  letter-spacing: 0.01em;
}

/* ── Desktop refinements ── */
@media (min-width: 640px) {
  .gl-fp-inner {
    padding: 80px 40px 72px;
  }
  .gl-fp-empty-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   About Globally page  (gl-about-*)
   ══════════════════════════════════════════════════════════════════════════════ */

.gl-about-page {
  min-height: 100vh;
  background: var(--g-bg);
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

.gl-about-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

.gl-about-back {
  margin-bottom: 32px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.gl-about-hero {
  margin-bottom: 52px;
}

.gl-about-eyebrow {
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--g-meta);
  margin: 0 0 12px;
}

.gl-about-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 7vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--g-ink);
  margin: 0 0 14px;
}

.gl-about-sub {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--g-ink-2);
  margin: 0 0 32px;
}

.gl-about-counters {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--g-line);
  border-bottom: 1px solid var(--g-line);
}

.gl-about-counter {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
}

.gl-about-counter-num {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--g-ink);
  line-height: 1;
}

.gl-about-counter-label {
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-meta);
  text-align: center;
  line-height: 1.3;
}

.gl-about-counter-divider {
  width: 1px;
  height: 36px;
  background: var(--g-line);
  flex-shrink: 0;
}

/* ── Section wrapper ──────────────────────────────────────────────────────── */
.gl-about-section {
  margin-bottom: 48px;
}

.gl-about-section-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--g-ink);
  margin: 0 0 6px;
}

.gl-about-section-sub {
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.58;
  color: var(--g-ink-muted);
  margin: 0 0 18px;
}

/* ── Country strip ────────────────────────────────────────────────────────── */
.gl-about-country-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.gl-about-country-chip {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--g-ink-2);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: 20px;
  padding: 5px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.gl-about-country-chip:hover,
.gl-about-country-chip:active {
  background: var(--g-surface-2);
  border-color: rgba(255,255,255,0.15);
  color: var(--g-ink);
}

/* ── Accordion (Meet Mira) ────────────────────────────────────────────────── */
.gl-about-acc {
  border-top: 1px solid var(--g-line);
}

.gl-about-acc-item {
  border-bottom: 1px solid var(--g-line);
}

.gl-about-acc-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 10px;
}

.gl-about-acc-q {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--g-ink);
  flex: 1;
  text-align: left;
}

.gl-about-acc-icon {
  font-size: 18px;
  color: var(--g-meta);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.gl-about-acc-body {
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.gl-about-acc-text {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.72;
  color: var(--g-ink-2);
  margin: 0;
  padding: 2px 0 18px;
}

/* ── Stepper (How it works) ───────────────────────────────────────────────── */
.gl-about-stepper {
  border-top: 1px solid var(--g-line);
}

.gl-about-step {
  border-bottom: 1px solid var(--g-line);
}

.gl-about-step-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  cursor: pointer;
  gap: 10px;
  text-align: left;
}

.gl-about-step-num {
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--g-meta);
  width: 16px;
  flex-shrink: 0;
}

.gl-about-step-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

.gl-about-step-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--g-ink);
  flex: 1;
}

.gl-about-step-chevron {
  font-size: 11px;
  color: var(--g-meta);
  flex-shrink: 0;
}

.gl-about-step-body {
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.gl-about-step-text {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.72;
  color: var(--g-ink-2);
  margin: 0;
  padding: 2px 0 18px 36px;
}

/* ── Promise ──────────────────────────────────────────────────────────────── */
.gl-about-promise-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--g-ink-2);
  margin: 0;
}

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.gl-about-cta-wrap {
  text-align: center;
  padding-top: 8px;
}

.gl-about-cta {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--g-ink);
  background: var(--g-surface);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 12px 32px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.gl-about-cta:hover,
.gl-about-cta:active {
  background: var(--g-surface-2);
  border-color: rgba(255,255,255,0.20);
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gl-about-acc-body,
  .gl-about-step-body {
    transition: none;
  }
}

/* ── Desktop ──────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .gl-about-inner {
    padding: 40px 32px 64px;
  }
  .gl-about-counters {
    gap: 0;
  }
}

/* ================================================================
   ABOUT GLOBALLY — rich editorial page  (.gl-about-page)
   ================================================================ */

.gl-about-page {
  /* Inherits gl-simple-page: min-height 100dvh, cream bg, flex column, position:relative */
}

/* ── Hero ── */
.gl-about-hero {
  padding: 80px 24px 44px;
  border-bottom: 1px solid rgba(17,17,15,0.08);
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.gl-about-count-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}

.gl-about-count-num {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(48px, 11vw, 88px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--g-ink, #11110f);
  font-variant-numeric: tabular-nums;
}

.gl-about-count-label {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: rgba(17,17,15,0.42);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.gl-about-mission {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--g-ink, #11110f);
  margin: 0;
  max-width: 560px;
}

/* ── Shared section wrapper ── */
.gl-about-section {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 24px;
  border-bottom: 1px solid rgba(17,17,15,0.07);
  box-sizing: border-box;
}

.gl-about-section-hd {
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17,17,15,0.38);
  margin: 0 0 14px;
}

.gl-about-prose {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.68;
  color: rgba(17,17,15,0.72);
  margin: 0;
  max-width: 580px;
}

/* ── Accordions ── */
.gl-about-accordions {
  margin-top: 20px;
  border-top: 1px solid rgba(17,17,15,0.08);
}

.gl-about-accordion {
  border-bottom: 1px solid rgba(17,17,15,0.08);
}

.gl-about-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 16px 0;
  text-align: left;
  font-family: inherit;
  min-height: 44px;
}

.gl-about-accordion-trigger:focus-visible {
  outline: 2px solid rgba(17,17,15,0.30);
  outline-offset: 2px;
  border-radius: 2px;
}

.gl-about-accordion-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--g-ink, #11110f);
}

.gl-about-accordion-icon {
  font-size: 18px;
  font-weight: 300;
  color: rgba(17,17,15,0.38);
  flex-shrink: 0;
  line-height: 1;
  width: 18px;
  text-align: center;
  transition: color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .gl-about-accordion-icon { transition: none; }
}

.gl-about-accordion--open .gl-about-accordion-icon {
  color: rgba(17,17,15,0.65);
}

.gl-about-accordion-body {
  padding: 0 0 18px;
}

.gl-about-accordion-body p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.76;
  color: rgba(17,17,15,0.66);
  margin: 0;
}

/* ── How it works stepper ── */
.gl-about-steps {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.gl-about-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.gl-about-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(17,17,15,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(17,17,15,0.45);
  margin-top: 1px;
}

.gl-about-step-content {
  flex: 1;
}

.gl-about-step-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--g-ink, #11110f);
  margin: 0 0 5px;
}

.gl-about-step-body {
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.72;
  color: rgba(17,17,15,0.65);
  margin: 0;
}

/* ── Our promise ── */
.gl-about-promise-section {
  border-bottom: none;
}

.gl-about-promise-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gl-about-promise-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.gl-about-promise-n {
  flex-shrink: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: rgba(17,17,15,0.12);
  line-height: 1;
  padding-top: 1px;
  min-width: 20px;
}

.gl-about-promise-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--g-ink, #11110f);
  padding-top: 4px;
}

/* ── Footer CTA ── */
.gl-about-cta {
  display: flex;
  justify-content: center;
  padding: 48px 24px 40px;
}

.gl-about-cta-btn {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fffaf0;
  background: #11110f;
  border: none;
  border-radius: 6px;
  padding: 14px 38px;
  cursor: pointer;
  min-height: 44px;
  transition: opacity 0.15s ease;
}

.gl-about-cta-btn:hover { opacity: 0.80; }
.gl-about-cta-btn:focus-visible {
  outline: 2px solid rgba(17,17,15,0.40);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .gl-about-cta-btn { transition: none; }
}

/* ── Desktop ── */
@media (min-width: 640px) {
  .gl-about-hero,
  .gl-about-section,
  .gl-about-cta {
    padding-left: 40px;
    padding-right: 40px;
  }

  .gl-about-steps {
    flex-direction: row;
    gap: 0;
  }

  .gl-about-step {
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding-right: 24px;
    border-right: 1px solid rgba(17,17,15,0.07);
    padding-left: 24px;
  }

  .gl-about-step:first-child { padding-left: 0; }
  .gl-about-step:last-child  { border-right: none; padding-right: 0; }
}

/* ================================================================
   GAMES REDESIGN — PREMIUM EDITORIAL STYLE
   Scope: .ph-*, .qz-*, .cg-*, .hl-* in the Globally cream theme.
   All rules follow the cream-theme :root block so they win via
   cascade order. !important is used only to beat earlier hardcoded
   colour values that survive from the dark-mode definitions.
   ================================================================ */

/* ── Shared game screen shell ── */
.ph-screen,
.qz-screen,
.cg-screen,
.hl-screen {
  min-height: calc(100dvh - 112px);
}
.qz-screen,
.cg-screen,
.hl-screen {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 48px !important;
}

/* ── GAMES HUB ── */
.ph-screen {
  background:
    radial-gradient(ellipse 70% 38% at 12% 0%, rgba(180,130,20,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 28% at 86% 96%, rgba(90,59,42,0.05) 0%, transparent 52%),
    var(--g-bg) !important;
  padding-bottom: 52px;
}
.ph-header-eyebrow { color: rgba(154,112,32,0.80) !important; }
.ph-title {
  background: linear-gradient(110deg,#11110F 0%,#7a5210 52%,#9a6818 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.ph-sub { color: var(--g-ink-muted) !important; }

/* Hub hero card — warm paper */
.ph-hero {
  background: linear-gradient(140deg,#F5EDD5 0%,#EDE4C0 60%,#E6D9AA 100%) !important;
  border: 1px solid rgba(154,112,32,0.18) !important;
  box-shadow: 0 2px 16px rgba(40,28,18,0.09), 0 1px 4px rgba(40,28,18,0.05) !important;
  padding: 28px 22px !important;
  min-height: 200px !important;
}
.ph-hero-bg {
  background: radial-gradient(ellipse 100% 70% at 85% 15%, rgba(180,130,20,0.14) 0%, transparent 65%) !important;
}
.ph-hero-label { color: rgba(154,112,32,0.90) !important; }
.ph-hero-title { color: #11110F !important; font-size: 22px !important; }
.ph-hero-sub { color: rgba(17,17,15,0.58) !important; }
.ph-hero-score,
.ph-hero-ready { color: rgba(154,112,32,0.78) !important; }
.ph-hero-btn {
  background: #5A3B2A !important;
  color: #F5EDD5 !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: var(--g-radius-sm) !important;
  box-shadow: 0 1px 4px rgba(40,28,18,0.18) !important;
}
.ph-hero:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 22px rgba(40,28,18,0.13), 0 1px 4px rgba(40,28,18,0.06) !important;
}

/* Hub secondary cards */
.ph-card {
  background: var(--g-surface) !important;
  border: 1px solid rgba(40,28,18,0.09) !important;
  box-shadow: 0 1px 6px rgba(40,28,18,0.06) !important;
}
.ph-card:hover {
  background: #F2EDD8 !important;
  border-color: rgba(40,28,18,0.16) !important;
  box-shadow: 0 3px 14px rgba(40,28,18,0.10) !important;
}
.ph-card--country { border-color: rgba(40,28,18,0.09) !important; }
.ph-card--hilo    { border-color: rgba(40,28,18,0.09) !important; }
.ph-card--country .ph-card-bg,
.ph-card--hilo    .ph-card-bg { background: none !important; }
.ph-card--country .ph-card-label,
.ph-card--hilo    .ph-card-label { color: rgba(154,112,32,0.80) !important; }
.ph-card-title { color: #11110F !important; }
.ph-card-sub   { color: rgba(17,17,15,0.55) !important; }
.ph-card-ready,
.ph-card-score { color: rgba(17,17,15,0.48) !important; }

.ph-card-btn,
.ph-card-btn--country,
.ph-card-btn--hilo {
  background: rgba(40,28,18,0.06) !important;
  color: #5A3B2A !important;
  border: 1px solid rgba(40,28,18,0.14) !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.ph-card:hover .ph-card-btn,
.ph-card:hover .ph-card-btn--country,
.ph-card:hover .ph-card-btn--hilo {
  background: rgba(40,28,18,0.10) !important;
  border-color: rgba(40,28,18,0.20) !important;
}

/* Back button */
.ph-back {
  background: rgba(40,28,18,0.05) !important;
  color: rgba(17,17,15,0.65) !important;
  border: 1px solid rgba(40,28,18,0.12) !important;
  font-size: 13px !important;
  padding: 8px 13px !important;
  border-radius: var(--g-radius-sm) !important;
}
.ph-back:hover { background: rgba(40,28,18,0.09) !important; }

/* ── Shared eyebrow label ── */
.qz-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(154,112,32,0.82);
  margin-bottom: 5px;
}

/* ── DAILY CHALLENGE QUIZ ── */
.qz-q-label {
  font-size: 20px;
  font-weight: 700;
  color: #11110F;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}
.qz-q-of {
  color: rgba(17,17,15,0.42);
  font-weight: 500;
  font-size: 17px;
}
.qz-progress {
  height: 4px !important;
  background: rgba(40,28,18,0.09) !important;
}
.qz-progress-fill { background: #9A7020 !important; }

/* Question card */
.qz-question {
  background: #F5EDD5 !important;
  border: 1px solid rgba(40,28,18,0.10) !important;
  border-radius: var(--g-radius-lg) !important;
  padding: 20px !important;
  box-shadow: 0 1px 6px rgba(40,28,18,0.06) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #11110F !important;
  line-height: 1.42 !important;
}

/* Answer options */
.qz-opt {
  background: var(--g-surface) !important;
  border: 1.5px solid rgba(40,28,18,0.09) !important;
  color: #2C2C28 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 15px 18px !important;
  border-radius: var(--g-radius) !important;
  box-shadow: 0 1px 3px rgba(40,28,18,0.05) !important;
  text-align: left !important;
}
.qz-opt--idle:not(:disabled):hover {
  border-color: rgba(154,112,32,0.32) !important;
  background: #F5EDD5 !important;
  box-shadow: 0 2px 8px rgba(40,28,18,0.09) !important;
}
.qz-opt--correct {
  border-color: rgba(26,122,53,0.42) !important;
  background: rgba(26,122,53,0.07) !important;
  color: #1a7a35 !important;
}
.qz-opt--wrong {
  border-color: rgba(196,28,28,0.36) !important;
  background: rgba(196,28,28,0.07) !important;
  color: #c41c1c !important;
}
.qz-opt--dim { opacity: 0.35 !important; }

/* Explanation panel */
.qz-explain {
  background: #F5EDD5 !important;
  border: 1px solid rgba(40,28,18,0.10) !important;
  border-radius: var(--g-radius-lg) !important;
  padding: 18px 20px !important;
}
.qz-explain-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #5A3B2A !important;
}
.qz-explain-text {
  color: rgba(17,17,15,0.75) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.qz-next-btn {
  background: #5A3B2A !important;
  color: #F5EDD5 !important;
  border-radius: var(--g-radius-sm) !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(40,28,18,0.18) !important;
}
.qz-next-btn:hover { background: #4a3020 !important; }
.qz-done-title { color: #11110F !important; }
.qz-done-sub   { color: rgba(17,17,15,0.55) !important; }
.qz-done-icon  { margin-bottom: 12px; }

/* ── COUNTRY GUESSER ── */
.cg-title    { color: #11110F !important; }
.cg-subtitle { color: rgba(17,17,15,0.55) !important; }
.cg-count    { color: rgba(17,17,15,0.45) !important; }

/* Tries remaining badge */
.cg-tries-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(40,28,18,0.06);
  border: 1px solid rgba(40,28,18,0.10);
  border-radius: var(--g-radius);
  padding: 8px 14px;
  min-width: 54px;
  flex-shrink: 0;
}
.cg-tries-num {
  font-size: 24px;
  font-weight: 800;
  color: #5A3B2A;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cg-tries-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17,17,15,0.45);
  margin-top: 3px;
}

/* Input wrapper + row */
.cg-input-wrap { position: relative; }
.cg-input-row  { display: flex; gap: 8px; }
.cg-input {
  background: var(--g-surface) !important;
  border: 1.5px solid rgba(40,28,18,0.10) !important;
  color: #11110F !important;
  font-size: 15px !important;
  border-radius: var(--g-radius) !important;
  padding: 12px 14px !important;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.cg-input:focus {
  border-color: rgba(154,112,32,0.52) !important;
  box-shadow: 0 0 0 3px rgba(154,112,32,0.09) !important;
  outline: none !important;
}
.cg-btn {
  background: #5A3B2A !important;
  color: #F5EDD5 !important;
  border: none !important;
  border-radius: var(--g-radius) !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(40,28,18,0.18);
  transition: background 0.12s;
}
.cg-btn:not(:disabled):hover { background: #4a3020 !important; }
.cg-btn:disabled {
  background: rgba(90,59,42,0.28) !important;
  color: rgba(245,237,213,0.55) !important;
  cursor: default !important;
}

/* Suggestions dropdown */
.cg-sugg {
  background: var(--g-surface) !important;
  border: 1px solid rgba(154,112,32,0.22) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: 0 4px 14px rgba(40,28,18,0.10) !important;
}
.cg-sugg-item {
  color: #2C2C28 !important;
  font-size: 14px !important;
  border-bottom-color: rgba(40,28,18,0.06) !important;
}
.cg-sugg-item:hover { background: #F5EDD5 !important; }

/* Proximity badge */
.cg-prox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 30px;
  border-radius: var(--g-radius-sm);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.cg-prox--exact { background: rgba(26,122,53,0.12); color: #1a7a35; border: 1px solid rgba(26,122,53,0.24); }
.cg-prox--near  { background: rgba(26,122,53,0.08); color: #1a7a35; border: 1px solid rgba(26,122,53,0.16); }
.cg-prox--mild  { background: rgba(180,130,20,0.10); color: #9A7020; border: 1px solid rgba(180,130,20,0.18); }
.cg-prox--far   { background: rgba(196,100,20,0.09); color: #a05010; border: 1px solid rgba(196,100,20,0.16); }
.cg-prox--cold  { background: rgba(40,28,18,0.06); color: rgba(17,17,15,0.42); border: 1px solid rgba(40,28,18,0.10); }

/* Guess rows */
.cg-rows { display: flex; flex-direction: column; gap: 6px; }
.cg-row {
  background: var(--g-surface) !important;
  border: 1px solid rgba(40,28,18,0.08) !important;
  border-radius: var(--g-radius-sm) !important;
  padding: 10px 12px !important;
}
.cg-row--win {
  border-color: rgba(26,122,53,0.28) !important;
  background: rgba(26,122,53,0.05) !important;
}
.cg-row-hd { color: rgba(17,17,15,0.38) !important; font-size: 10px !important; padding: 0 4px !important; }
.cg-rname  { color: #11110F !important; font-size: 13px !important; font-weight: 500 !important; }
.cg-rdist  { color: rgba(17,17,15,0.55) !important; font-size: 12px !important; }
.cg-rhdi   { color: rgba(17,17,15,0.55) !important; font-size: 12px !important; }
.cg-hdi--up   { color: #1a7a35 !important; }
.cg-hdi--down { color: #c41c1c !important; }

/* Hint box (shown before first guess) */
.cg-hint-box {
  background: #F5EDD5 !important;
  border: 1px solid rgba(40,28,18,0.09) !important;
  border-radius: var(--g-radius-lg) !important;
  padding: 18px 20px !important;
}
.cg-hint-hd   { color: #5A3B2A !important; font-weight: 700 !important; }
.cg-hint-item { color: rgba(17,17,15,0.65) !important; }

/* Shared share button + done elements */
.cg-share-btn {
  background: rgba(40,28,18,0.06) !important;
  border: 1px solid rgba(40,28,18,0.14) !important;
  color: #5A3B2A !important;
  font-weight: 600 !important;
  padding: 11px 22px !important;
  border-radius: var(--g-radius) !important;
}
.cg-share-btn:hover { background: rgba(40,28,18,0.10) !important; }
.cg-done-title { color: #11110F !important; }
.cg-done-ans   { color: rgba(17,17,15,0.65) !important; }
.cg-done-sub   { color: rgba(17,17,15,0.48) !important; }
.cg-done-hdi   { opacity: 0.65 !important; }
.cg-done-icon  { margin-bottom: 12px; }

/* ── HIGHER OR LOWER ── */
.hl-game-header { margin-bottom: 0; }
.hl-game-prompt {
  font-size: 20px;
  font-weight: 700;
  color: #11110F;
  letter-spacing: -0.01em;
  margin: 4px 0 0;
  line-height: 1.25;
}
.hl-game-prompt strong { color: #5A3B2A; font-weight: 800; }

/* Streak panel */
.hl-streaks {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(40,28,18,0.05);
  border: 1px solid rgba(40,28,18,0.09);
  border-radius: var(--g-radius);
}
.hl-streak-item { display: flex; align-items: baseline; gap: 5px; }
.hl-streak-num {
  font-size: 24px;
  font-weight: 800;
  color: #5A3B2A;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hl-streak-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(17,17,15,0.42);
}
.hl-streak-div { color: rgba(17,17,15,0.22); font-size: 18px; line-height: 1; }

/* Card grid */
.hl-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  flex: none !important;   /* was flex:1 — that caused cards to be too tall */
  position: relative;
}
.hl-cards::after {
  content: 'VS';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--g-bg);
  color: rgba(17,17,15,0.36);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  padding: 5px 9px;
  border-radius: 20px;
  border: 1.5px solid rgba(40,28,18,0.12);
  z-index: 2;
  pointer-events: none;
}

/* Individual country cards */
.hl-card {
  background: #F5EDD5 !important;
  border: 1.5px solid rgba(40,28,18,0.11) !important;
  border-radius: var(--g-radius-lg) !important;
  padding: 26px 16px 22px !important;
  min-height: 200px !important;
  max-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 10px rgba(40,28,18,0.07);
  transition: all 0.14s !important;
}
.hl-card:not(:disabled):hover {
  border-color: rgba(154,112,32,0.36) !important;
  background: #EDE3C4 !important;
  box-shadow: 0 5px 18px rgba(40,28,18,0.12) !important;
  transform: translateY(-2px) !important;
}
.hl-card--correct {
  border-color: rgba(26,122,53,0.42) !important;
  background: rgba(26,122,53,0.06) !important;
  box-shadow: 0 2px 10px rgba(26,122,53,0.10) !important;
}
.hl-card--wrong {
  border-color: rgba(196,28,28,0.36) !important;
  background: rgba(196,28,28,0.05) !important;
}

/* Card content */
.hl-tier {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(154,112,32,0.72);
  min-height: 11px;
}
.hl-country {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #11110F !important;
  line-height: 1.2;
}
.hl-hdi {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #5A3B2A !important;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.hl-hdi--hidden {
  color: rgba(17,17,15,0.20) !important;
  font-size: 28px !important;
}
.hl-tap {
  font-size: 10px !important;
  color: rgba(17,17,15,0.38) !important;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.hl-result-badge { margin-top: 4px; }
.hl-result-badge--correct { color: #1a7a35 !important; background: rgba(26,122,53,0.11) !important; }
.hl-result-badge--wrong   { color: #c41c1c !important; background: rgba(196,28,28,0.09) !important; }

/* Done screen */
.hl-done-reveal { margin: 12px 0; }
.hl-done-card { background: var(--g-surface) !important; border-color: rgba(40,28,18,0.09) !important; }
.hl-done-card--win { border-color: rgba(26,122,53,0.28) !important; background: rgba(26,122,53,0.05) !important; }
.hl-done-country { color: #11110F !important; }
.hl-done-hdi     { color: rgba(17,17,15,0.55) !important; }
.hl-done-higher  { color: #1a7a35 !important; }
.hl-play-again {
  background: rgba(40,28,18,0.06) !important;
  border: 1px solid rgba(40,28,18,0.14) !important;
  color: #5A3B2A !important;
  font-weight: 600 !important;
  padding: 11px 22px !important;
  border-radius: var(--g-radius) !important;
}
.hl-play-again:hover { background: rgba(40,28,18,0.10) !important; }
.hl-hint { display: none !important; } /* streak now shown in header panel */

/* ── Desktop responsive ── */
@media (min-width: 720px) {
  .ph-hero {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 32px 28px !important;
  }
  .ph-card {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 24px 24px !important;
  }
  .ph-header {
    max-width: 800px;
    margin: 0 auto;
    padding: 44px 32px 28px !important;
  }
  .qz-screen,
  .cg-screen,
  .hl-screen {
    padding-left: 28px !important;
    padding-right: 28px !important;
    padding-top: 28px !important;
  }
  .hl-card { min-height: 220px !important; }
  .hl-streak-num { font-size: 28px; }
  .qz-question { font-size: 19px !important; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   GAMES — full cream-editorial redesign
   Overrides the dark-theme styles from styles.css and the earlier
   ph-/qz-/hl-/cg- rules in this file.  All !important beats styles.css.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Shared game-screen token ────────────────────────────────────────────── */
.ph-screen,
.qz-screen,
.cg-screen,
.hl-screen {
  background: var(--g-bg) !important;
  color: var(--g-ink) !important;
}

/* ── Suppress legacy coloured glows / gradients ──────────────────────────── */
.ph-header-glow      { display: none !important; }
.ph-header-glow + *  { position: relative; }

/* ══════════════════════════════════════════════════════════════════════════════
   PLAY HUB
   ══════════════════════════════════════════════════════════════════════════════ */
.ph-screen {
  min-height: 100% !important;
  padding-bottom: 80px !important;
}

/* Header */
.ph-header {
  padding: 32px 20px 20px !important;
  border-bottom: 1px solid var(--g-line) !important;
  margin-bottom: 20px !important;
}

.ph-header-eyebrow {
  font-family: Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--g-meta) !important;
  margin-bottom: 10px !important;
}

.ph-sub {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--g-ink-muted) !important;
  -webkit-text-fill-color: unset !important;
  margin: 0 !important;
}

/* ── Hero game card (Daily Challenge) ───────────────────────────────────── */
.ph-hero {
  background: linear-gradient(145deg, #FFFBF0 0%, #F2EBDA 100%) !important;
  border: 1px solid rgba(90,59,42,0.16) !important;
  box-shadow: 0 2px 12px rgba(40,28,18,0.07), 0 6px 24px rgba(40,28,18,0.05) !important;
  border-radius: 14px !important;
  margin: 0 16px 16px !important;
  min-height: 200px !important;
}
.ph-hero-bg { display: none !important; }

.ph-hero-label {
  font-family: Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  color: rgba(90,59,42,0.70) !important;
}

.ph-hero-title {
  font-family: 'Newsreader', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--g-ink) !important;
  -webkit-text-fill-color: var(--g-ink) !important;
  background: none !important;
  margin-bottom: 7px !important;
}

.ph-hero-sub {
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  color: var(--g-ink-muted) !important;
  line-height: 1.5 !important;
}

.ph-hero-score,
.ph-hero-ready {
  font-size: 12px !important;
  color: rgba(90,59,42,0.72) !important;
}

.ph-hero-btn {
  background: #5a3b2a !important;
  color: #FFFBF0 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
}

/* ── Secondary game cards ────────────────────────────────────────────────── */
.ph-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(40,28,18,0.10) !important;
  box-shadow: 0 1px 6px rgba(40,28,18,0.05) !important;
  border-radius: 12px !important;
  margin: 0 16px 12px !important;
  min-height: 150px !important;
}
.ph-card-bg { display: none !important; }

/* Remove coloured border tints — use a clean universal warm border */
.ph-card--country,
.ph-card--hilo {
  background: #FFFFFF !important;
  border-color: rgba(40,28,18,0.10) !important;
}

.ph-card-label {
  font-family: Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: var(--g-meta) !important;
}

.ph-card-title {
  font-family: 'Newsreader', Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--g-ink) !important;
}

.ph-card-sub {
  font-size: 12px !important;
  color: var(--g-ink-muted) !important;
  line-height: 1.5 !important;
}

.ph-card-ready,
.ph-card-score {
  font-size: 12px !important;
  color: var(--g-ink-muted) !important;
}

.ph-card-btn {
  background: rgba(40,28,18,0.06) !important;
  color: var(--g-ink) !important;
  border: 1px solid rgba(40,28,18,0.12) !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 13px !important;
}
.ph-card-btn--country,
.ph-card-btn--hilo {
  background: rgba(40,28,18,0.06) !important;
  color: var(--g-ink) !important;
  border-color: rgba(40,28,18,0.12) !important;
}

/* Hover states on cream */
.ph-hero:hover  { box-shadow: 0 4px 20px rgba(40,28,18,0.11) !important; transform: translateY(-2px); }
.ph-card:hover  { box-shadow: 0 4px 16px rgba(40,28,18,0.10) !important; transform: translateY(-2px); border-color: rgba(90,59,42,0.20) !important; }

/* Icon wrapper on cream */
.ph-screen .ci-wrap {
  border-radius: 9px !important;
  width: 36px !important;
  height: 36px !important;
}

/* Back button */
.ph-back {
  background: transparent !important;
  border: none !important;
  color: var(--g-meta) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 4px 0 !important;
  margin-bottom: 12px !important;
}
.ph-back:hover { color: var(--g-ink) !important; }

/* Desktop margins reset (desktop layout handled in responsive block below) */

/* ══════════════════════════════════════════════════════════════════════════════
   DAILY CHALLENGE QUIZ
   ══════════════════════════════════════════════════════════════════════════════ */
.qz-screen {
  min-height: 100% !important;
  padding: 20px 20px 80px !important;
  gap: 18px !important;
}

/* Header row */
.qz-hd {
  align-items: baseline !important;
  gap: 12px !important;
}

/* Progress bar */
.qz-progress {
  height: 3px !important;
  background: rgba(40,28,18,0.12) !important;
  border-radius: 3px !important;
}
.qz-progress-fill {
  background: #5a3b2a !important;
  transition: width 0.30s ease !important;
}

/* Question */
.qz-question {
  font-family: 'Newsreader', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.45 !important;
  color: var(--g-ink) !important;
  margin: 0 !important;
}

/* Answer options */
.qz-opt {
  background: #FFFFFF !important;
  border: 1px solid rgba(40,28,18,0.12) !important;
  border-radius: 10px !important;
  color: var(--g-ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 14px 18px !important;
  text-align: left !important;
  transition: border-color 0.12s, background 0.12s !important;
}
.qz-opt--idle:not(:disabled):hover {
  background: #FFFBF0 !important;
  border-color: rgba(90,59,42,0.22) !important;
}
.qz-opt--correct {
  border-color: rgba(26,122,53,0.40) !important;
  background: rgba(26,122,53,0.07) !important;
  color: #1a7a35 !important;
}
.qz-opt--wrong {
  border-color: rgba(154,32,32,0.38) !important;
  background: rgba(154,32,32,0.06) !important;
  color: #9a2020 !important;
}
.qz-opt--dim { opacity: 0.30 !important; }

/* Explain panel */
.qz-explain {
  background: #FFFBF0 !important;
  border: 1px solid rgba(40,28,18,0.10) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
}
.qz-explain-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--g-ink) !important;
}
.qz-explain-text {
  font-size: 13px !important;
  color: var(--g-ink-muted) !important;
  line-height: 1.6 !important;
}
.qz-next-btn {
  background: #5a3b2a !important;
  color: #FFFBF0 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* Done screen */
.qz-done { justify-content: center !important; text-align: center !important; }
.qz-done-icon { margin-bottom: 8px !important; }
.qz-done-title {
  font-family: 'Newsreader', Georgia, serif !important;
  font-size: 36px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: var(--g-ink) !important;
  margin: 0 !important;
}
.qz-done-sub {
  font-size: 15px !important;
  color: var(--g-ink-muted) !important;
  margin: 6px 0 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HIGHER OR LOWER
   ══════════════════════════════════════════════════════════════════════════════ */
.hl-screen {
  min-height: 100% !important;
  padding: 20px 20px 80px !important;
  gap: 20px !important;
}

.hl-prompt {
  font-family: 'Newsreader', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--g-ink) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* Two-card grid */
.hl-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  flex: 1 !important;
}

.hl-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(40,28,18,0.12) !important;
  border-radius: 14px !important;
  min-height: 200px !important;
  padding: 24px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  transition: border-color 0.12s, background 0.12s, transform 0.12s !important;
  box-shadow: 0 1px 8px rgba(40,28,18,0.05) !important;
}
.hl-card:not(:disabled):hover {
  background: #FFFBF0 !important;
  border-color: rgba(90,59,42,0.28) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 18px rgba(40,28,18,0.10) !important;
}
.hl-card--correct {
  border-color: rgba(26,122,53,0.42) !important;
  background: rgba(26,122,53,0.06) !important;
}
.hl-card--wrong {
  border-color: rgba(154,32,32,0.38) !important;
  background: rgba(154,32,32,0.05) !important;
}

.hl-country {
  font-family: 'Newsreader', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--g-ink) !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.hl-hdi {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--g-ink) !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}
.hl-hdi--hidden {
  font-size: 22px !important;
  color: rgba(40,28,18,0.18) !important;
  font-weight: 600 !important;
}

.hl-tap {
  font-family: Arial, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(40,28,18,0.32) !important;
  font-weight: 600 !important;
}

.hl-result-badge { border-radius: 20px !important; }
.hl-result-badge--correct { color: #1a7a35 !important; background: rgba(26,122,53,0.10) !important; }
.hl-result-badge--wrong   { color: #9a2020 !important; background: rgba(154,32,32,0.10) !important; }

.hl-hint {
  font-size: 12px !important;
  color: var(--g-meta) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Done screen */
.hl-done { align-items: center !important; text-align: center !important; }
.hl-done-reveal {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  width: 100% !important;
}
.hl-done-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(40,28,18,0.10) !important;
  border-radius: 10px !important;
}
.hl-done-card--win {
  border-color: rgba(26,122,53,0.35) !important;
  background: rgba(26,122,53,0.06) !important;
}
.hl-done-country { color: var(--g-ink) !important; }
.hl-done-hdi { color: var(--g-meta) !important; }
.hl-done-higher { color: #1a7a35 !important; }

.hl-play-again {
  background: rgba(40,28,18,0.06) !important;
  border: 1px solid rgba(40,28,18,0.12) !important;
  color: var(--g-ink) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   COUNTRY GUESSER
   ══════════════════════════════════════════════════════════════════════════════ */
.cg-screen {
  min-height: 100% !important;
  padding: 20px 20px 80px !important;
  gap: 16px !important;
  background: var(--g-bg) !important;
}

.cg-title, .cg-hd h2 {
  font-family: 'Newsreader', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--g-ink) !important;
}
.cg-subtitle {
  font-size: 13px !important;
  color: var(--g-ink-muted) !important;
}
.cg-count, .cg-hd span {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--g-meta) !important;
}

/* Input + button */
.cg-input {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(40,28,18,0.15) !important;
  border-radius: 10px !important;
  color: var(--g-ink) !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
}
.cg-input::placeholder { color: var(--g-meta) !important; }
.cg-input:focus {
  border-color: rgba(90,59,42,0.40) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(90,59,42,0.07) !important;
}

.cg-btn {
  background: #5a3b2a !important;
  color: #FFFBF0 !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 20px !important;
  white-space: nowrap !important;
}
.cg-btn:disabled { opacity: 0.38 !important; cursor: default !important; }

/* Autocomplete dropdown */
.cg-sugg {
  background: #FFFFFF !important;
  border: 1px solid rgba(40,28,18,0.16) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(40,28,18,0.10) !important;
}
.cg-sugg-item {
  color: var(--g-ink) !important;
  border-bottom-color: rgba(40,28,18,0.07) !important;
  font-size: 14px !important;
}
.cg-sugg-item:hover { background: #FFFBF0 !important; }

/* Guess rows */
.cg-row-hd {
  color: var(--g-meta) !important;
  padding: 0 4px !important;
}
.cg-row {
  background: #FFFFFF !important;
  border: 1px solid rgba(40,28,18,0.09) !important;
  border-radius: 8px !important;
  padding: 11px 12px !important;
}
.cg-row--win {
  border-color: rgba(26,122,53,0.30) !important;
  background: rgba(26,122,53,0.05) !important;
}
.cg-rname { color: var(--g-ink) !important; }
.cg-rdist { color: var(--g-ink-muted) !important; }
.cg-rhdi  { color: var(--g-ink-muted) !important; }
.cg-hdi--up   { color: #1a7a35 !important; }
.cg-hdi--down { color: #9a2020 !important; }

/* Proximity badge */
.cg-prox {
  display: inline-block !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 0 !important;
  border-radius: 5px !important;
  font-variant-numeric: tabular-nums !important;
}
.cg-prox--exact { background: rgba(26,122,53,0.12) !important; color: #1a7a35 !important; }
.cg-prox--near  { background: rgba(26,122,53,0.08) !important; color: #1a7a35 !important; }
.cg-prox--mild  { background: rgba(196,140,10,0.10) !important; color: #7a5210 !important; }
.cg-prox--far   { background: rgba(154,32,32,0.07) !important; color: #9a2020 !important; }
.cg-prox--cold  { background: rgba(40,28,18,0.06) !important; color: var(--g-meta) !important; }

/* Hint box (shown before any guesses) */
.cg-hint-box {
  background: #FFFFFF !important;
  border: 1px solid rgba(40,28,18,0.09) !important;
  border-radius: 10px !important;
}
.cg-hint-hd  { color: var(--g-ink-muted) !important; }
.cg-hint-item { color: var(--g-meta) !important; }

/* Done screen */
.cg-done { align-items: center !important; text-align: center !important; }
.cg-done-icon { margin-bottom: 8px !important; }
.cg-done-title {
  font-family: 'Newsreader', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--g-ink) !important;
}
.cg-done-ans, .cg-done-sub {
  color: var(--g-ink-muted) !important;
  font-size: 14px !important;
}

/* Shared share / action buttons */
.cg-share-btn {
  background: rgba(40,28,18,0.06) !important;
  border: 1px solid rgba(40,28,18,0.12) !important;
  border-radius: 8px !important;
  color: var(--g-ink-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
}
.cg-share-btn:hover {
  background: rgba(40,28,18,0.10) !important;
  color: var(--g-ink) !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .hl-country { font-size: 16px !important; }
  .hl-hdi     { font-size: 24px !important; }
  .hl-card    { min-height: 160px !important; padding: 18px 10px !important; }
}

/* ── Desktop game layouts ── */

/* Base layout helper for the Country Guesser body */
.cg-body-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 700px) {
  /* Widen all game screens — centering via symmetric padding */
  .ph-screen,
  .qz-screen,
  .cg-screen,
  .hl-screen {
    padding-left: max(40px, calc((100% - 1200px) / 2)) !important;
    padding-right: max(40px, calc((100% - 1200px) / 2)) !important;
    padding-top: 40px !important;
  }

  /* Hub: reset card margins, lay secondary cards in 2-col grid */
  .ph-header { padding-left: 0 !important; padding-right: 0 !important; }
  .ph-hero   { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 24px !important; }
  .ph-card   { margin-left: 0 !important; margin-right: 0 !important; }

  .ph-cards-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  /* Daily Challenge: 2×2 answer option grid */
  .qz-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .qz-question { font-size: 24px !important; }

  /* Higher or Lower: bigger comparison cards */
  .hl-card    { min-height: 280px !important; padding: 36px 24px !important; }
  .hl-country { font-size: 26px !important; }
  .hl-hdi     { font-size: 40px !important; }
  .hl-cards   { gap: 24px !important; }

  /* Country Guesser: 2-column layout */
  .cg-body-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    align-items: start !important;
  }
  .cg-title, .cg-hd h2 { font-size: 28px !important; }
}

/* ── Your World profile card ── */
/* Sub-sections inside merged "Your interests & world" card */
.gl-iw-section { padding: 4px 0 2px; }
.gl-iw-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.gl-iw-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(17,17,15,0.42);
}
.gl-iw-divider {
  border: none;
  border-top: 1px solid rgba(17,17,15,0.08);
  margin: 18px 0;
}

.gl-world-setup-btn {
  display: inline-block;
  margin-top: 10px;
}

.gl-world-summary { margin-top: 8px; }
.gl-world-summary-line { font-size: 14px; color: #3f291f; margin-bottom: 8px; line-height: 1.5; }
.gl-world-summary-row { margin-bottom: 10px; }
.gl-world-summary-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #8b6c54; margin-bottom: 5px; }
.gl-world-summary-level { font-size: 13px; color: #3f291f; margin-top: 6px; }
.gl-world-summary-free { font-size: 13px; color: #6b5040; font-style: italic; margin-top: 6px; border-left: 2px solid #d4b896; padding-left: 10px; }

.gl-world-form { margin-top: 12px; }
.gl-world-form-note { font-size: 12px; color: #8b6c54; margin-bottom: 14px; line-height: 1.5; font-style: italic; }
.gl-world-form-fields { display: flex; flex-direction: column; gap: 12px; }
.gl-world-form-section { margin-top: 16px; }

.gl-world-field { display: flex; flex-direction: column; gap: 5px; }
.gl-world-field-label { font-size: 12px; font-weight: 600; color: #3f291f; text-transform: uppercase; letter-spacing: .04em; }
.gl-world-field-hint { font-size: 11px; color: #8b6c54; margin-top: 2px; }

.gl-world-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d4c4b0;
  border-radius: 8px;
  font-size: 14px;
  color: #3f291f;
  background: #fdf9f5;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color .15s;
}
.gl-world-input:focus {
  outline: none;
  border-color: #c8a97a;
  background: #fff;
}

.gl-world-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d4c4b0;
  border-radius: 8px;
  font-size: 13px;
  color: #3f291f;
  background: #fdf9f5;
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical;
  line-height: 1.5;
  transition: border-color .15s;
}
.gl-world-textarea:focus {
  outline: none;
  border-color: #c8a97a;
  background: #fff;
}

.gl-world-effects-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.gl-world-level-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.gl-world-level-btn {
  flex: 1;
  min-width: 90px;
  padding: 10px 12px;
  border: 1.5px solid #d4c4b0;
  border-radius: 10px;
  background: #fdf9f5;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.gl-world-level-btn:hover { border-color: #c8a97a; background: #fff8f0; }
.gl-world-level-btn.is-on { border-color: #8b5e3c; background: #fff3e6; }
.gl-world-level-name { font-size: 13px; font-weight: 700; color: #3f291f; }
.gl-world-level-desc { font-size: 11px; color: #8b6c54; line-height: 1.4; }

.gl-world-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.gl-world-save-btn {
  padding: 9px 18px;
  background: #3f291f;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.gl-world-save-btn:hover { background: #5a3c2a; }

/* ── My Briefing personal section ── */
.mbf-personal-section {
  border-top: 2px solid #c8a97a;
  background: linear-gradient(180deg, #fff8f0 0%, #fdf9f5 100%);
  border-radius: 12px;
  padding: 18px;
  margin-top: 8px;
}
.mbf-section-num--personal {
  color: #c8a97a !important;
  font-size: 16px !important;
}

.mbf-personal-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 12px;
}
.mbf-personal-item:last-child { margin-bottom: 0; }

.mbf-personal-story-btn { border-radius: 10px 10px 0 0 !important; }

.mbf-personal-why {
  background: #fff3e6;
  border: 1px solid #e8d4b8;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 10px 14px;
}
.mbf-personal-why-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8b5e3c;
  margin-bottom: 4px;
}
.mbf-personal-why-text {
  font-size: 12px;
  color: #5a3c2a;
  line-height: 1.55;
  margin: 0;
}

/* ── Voice briefing button ──────────────────────────────────────────────── */
/* ─── My Briefing voice row ──────────────────────────────────────────────────── */
.mbf-voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 6px;
}
.mbf-voice-label {
  font-size: 11px;
  color: rgba(17,17,15,0.38);
  letter-spacing: .01em;
}

/* ─── MiraVoiceControl — play/waveform button for Mira answers ──────────────── */
.mira-vc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.6px solid rgba(90,60,42,0.30);
  background: #faf5ec;
  color: #3f291f;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  box-shadow: 0 1px 3px rgba(17,17,15,0.10);
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.mira-vc:hover:not(:disabled) {
  background: #f2e9d8;
  border-color: rgba(90,60,42,0.52);
  box-shadow: 0 2px 6px rgba(17,17,15,0.14);
}
.mira-vc:disabled { opacity: .40; cursor: default; box-shadow: none; }
.mira-vc--loading { opacity: .65; }

/* Error state — dimmed */
.mira-vc--err {
  opacity: .32;
}

/* Playing state: dark brown capsule with animated waveform */
.mira-vc--playing {
  width: 58px;
  border-radius: 20px;
  background: #2a1a0e;
  border-color: #2a1a0e;
  color: #f5efe4;
  box-shadow: 0 2px 6px rgba(42,26,14,0.28);
}
.mira-vc--playing:hover:not(:disabled) {
  background: #3a2510;
  border-color: #3a2510;
}

/* Waveform bars */
.mira-vc-wave {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 18px;
}
.mira-vc-bar {
  display: block;
  width: 2.5px;
  border-radius: 2px;
  background: currentColor;
  animation: miraVcPulse 0.85s ease-in-out infinite;
}
.mira-vc-bar--1 { height: 5px;  animation-delay: 0ms; }
.mira-vc-bar--2 { height: 13px; animation-delay: 130ms; }
.mira-vc-bar--3 { height: 18px; animation-delay: 65ms; }
.mira-vc-bar--4 { height: 10px; animation-delay: 195ms; }
.mira-vc-bar--5 { height: 6px;  animation-delay: 100ms; }

@keyframes miraVcPulse {
  0%, 100% { transform: scaleY(0.25); }
  50%       { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mira-vc-bar { animation: none; transform: scaleY(0.6); }
}

/* Loading dots */
.mira-vc-dots {
  display: flex;
  gap: 3.5px;
  align-items: center;
}
.mira-vc-dots span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: miraVcDot 1s ease-in-out infinite;
}
.mira-vc-dots span:nth-child(2) { animation-delay: 200ms; }
.mira-vc-dots span:nth-child(3) { animation-delay: 400ms; }
@keyframes miraVcDot {
  0%, 100% { opacity: .3; transform: scale(.7); }
  50%       { opacity: 1; transform: scale(1); }
}

/* Inline error/unavailable message shown next to voice button */
.mira-vc-unavail {
  display: inline-block;
  font-size: 10px;
  color: rgba(17,17,15,0.38);
  font-style: italic;
  line-height: 1.4;
}

/* ArticleBriefModule voice wrapper */
.abm-voice-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.abm-voice-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(17,17,15,0.30);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* AskMiraPanel voice wrapper */
.mira-answer-voice-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.mira-answer-voice-label {
  font-size: 11px;
  color: rgba(17,17,15,0.38);
  white-space: nowrap;
}

/* My Briefing — same control, slightly larger */
.mira-vc--briefing {
  width: 44px;
  height: 44px;
  border-color: rgba(90,60,42,0.32);
}
.mira-vc--briefing.mira-vc--playing {
  width: 62px;
  border-radius: 22px;
}

/* ════════════════════════════════════════════════════════════════════
   TAKE ACTION — charity impact finder
   Theme: cobalt blue (#2250e8) page, cream cards, editorial serif
   ════════════════════════════════════════════════════════════════════ */

.tak-page {
  min-height: 100vh;
  background: #1e45d4;
  color: #fff8ee;
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
}

/* ── Top bar ── */
.tak-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 52px;
  background: #1538b8;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}
.tak-topbar-hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  min-width: 70px;
  align-items: flex-start;
  transition: background .12s;
}
.tak-topbar-hamburger:hover { background: rgba(255,255,255,0.08); }
.tak-topbar-hamburger .gl-hamburger-line {
  width: 18px;
  height: 1.5px;
  background: #fff8ee;
  border-radius: 1px;
}
.tak-topbar-wordmark {
  font-family: 'Instrument Serif', serif;
  font-size: 17px;
  color: #fff8ee;
  letter-spacing: -.01em;
}
.tak-topbar-spacer {
  min-width: 70px;
}

/* ── Hero ── */
.tak-hero {
  background: linear-gradient(160deg, #1538b8 0%, #2250e8 60%, #1e45d4 100%);
  padding: 52px 24px 44px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tak-hero-inner { max-width: 680px; margin: 0 auto; }
.tak-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,248,238,0.6);
  margin: 0 0 14px;
}
.tak-hero-title {
  font-family: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 400;
  line-height: 1.12;
  color: #fff8ee;
  margin: 0 0 14px;
  letter-spacing: -.02em;
}
.tak-hero-sub {
  font-size: 16px;
  color: rgba(255,248,238,0.75);
  margin: 0 0 28px;
  line-height: 1.5;
  max-width: 560px;
}

/* Search card */
.tak-search-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fffaf0;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.12);
}
.tak-search-icon { flex-shrink: 0; }
.tak-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #17130f;
  font-family: inherit;
  outline: none;
  min-width: 0;
}
.tak-search-input::placeholder { color: #b0967a; }
.tak-search-clear {
  background: none;
  border: none;
  font-size: 18px;
  color: #8b6c54;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  font-family: inherit;
}

/* ── Trust bar ── */
.tak-trust-bar {
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 10px 24px;
  font-size: 12px;
  color: rgba(255,248,238,0.65);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.tak-trust-bar svg { flex-shrink: 0; margin-top: 1px; opacity: .7; }

/* ── Body ── */
.tak-body {
  background: #f5f0e8;
  flex: 1;
  padding: 0 0 60px;
}

/* ── Urgent topics ── */
.tak-urgent {
  padding: 24px 24px 0;
  max-width: 1100px;
  margin: 0 auto;
}
.tak-section-title {
  font-family: 'Instrument Serif', serif;
  font-size: 20px;
  color: #17130f;
  font-weight: 400;
  margin: 0 0 4px;
}
.tak-section-sub {
  font-size: 12px;
  color: #8b6c54;
  margin: 0 0 12px;
}
.tak-urgent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tak-urgent-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #1e45d4;
  color: #fff8ee;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, transform .1s;
}
.tak-urgent-chip:hover { background: #1538b8; }
.tak-urgent-chip.is-on { background: #17130f; }
.tak-urgent-count {
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
}

/* ── Filters ── */
.tak-filters {
  padding: 20px 24px 0;
  max-width: 1100px;
  margin: 0 auto;
}
.tak-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8b6c54;
  margin-bottom: 8px;
}
.tak-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.tak-filter-chip {
  padding: 6px 13px;
  background: #fffaf0;
  color: #3f291f;
  border: 1.5px solid #d4c4b0;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, background .12s;
}
.tak-filter-chip:hover { border-color: #1e45d4; background: #fff; }
.tak-filter-chip.is-on { background: #1e45d4; color: #fff8ee; border-color: #1e45d4; }
.tak-filter-chip--region { background: #f0ece4; }
.tak-filter-chip--region:hover { background: #fff; }
.tak-filter-chip--region.is-on { background: #17130f; color: #fff8ee; border-color: #17130f; }
.tak-clear-all {
  margin-top: 10px;
  background: none;
  border: none;
  color: #1e45d4;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 0;
  text-decoration: underline;
}

/* ── Results meta ── */
.tak-results-meta {
  padding: 16px 24px 0;
  font-size: 12px;
  color: #8b6c54;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Loading ── */
.tak-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: #8b6c54;
  font-size: 14px;
}
.tak-loading-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid #d4c4b0;
  border-top-color: #1e45d4;
  border-radius: 50%;
  animation: tak-spin .8s linear infinite;
}
@keyframes tak-spin { to { transform: rotate(360deg); } }

/* ── Grid ── */
.tak-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px 24px 0;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .tak-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .tak-grid { grid-template-columns: 1fr; gap: 12px; padding: 12px 16px 0; }
}

/* ── Charity card ── */
.tak-card {
  background: #fffaf0;
  border: 1px solid #e8ddd0;
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .15s, transform .12s, border-color .15s;
  outline: none;
}
.tak-card:hover {
  box-shadow: 0 4px 20px rgba(30,69,212,0.12);
  border-color: #b0c0f0;
  transform: translateY(-1px);
}
.tak-card:focus-visible { outline: 2px solid #1e45d4; outline-offset: 2px; }
.tak-card-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.tak-card-name {
  font-family: 'Instrument Serif', serif;
  font-size: 15px;
  font-weight: 400;
  color: #17130f;
  margin: 0;
  line-height: 1.3;
}
.tak-save-btn {
  background: none;
  border: none;
  font-size: 17px;
  cursor: pointer;
  color: #c8a97a;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
  transition: color .12s;
}
.tak-save-btn:hover { color: #8b5e3c; }
.tak-card-desc {
  font-size: 13px;
  color: #5a3c2a;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.tak-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tak-topic-chip {
  display: inline-block;
  padding: 3px 9px;
  background: #e8f0ff;
  color: #1e45d4;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.tak-region-chip {
  display: inline-block;
  padding: 3px 9px;
  background: #f0ece4;
  color: #5a3c2a;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.tak-country-chip {
  display: inline-block;
  padding: 3px 9px;
  background: #fdf0e0;
  color: #8b5e3c;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.tak-card-regions { display: flex; flex-wrap: wrap; gap: 5px; }
.tak-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.tak-card-cta {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
  transition: background .12s;
}
.tak-card-cta--primary {
  background: #17130f;
  color: #fff8ee;
}
.tak-card-cta--primary:hover { background: #2e1d10; }
.tak-card-cta--secondary {
  background: transparent;
  color: #1e45d4;
  border: 1.5px solid #1e45d4;
}
.tak-card-cta--secondary:hover { background: #e8f0ff; }

/* ── Empty state ── */
.tak-empty {
  text-align: center;
  padding: 48px 24px;
}
.tak-empty-title {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  color: #17130f;
  margin: 0 0 8px;
}
.tak-empty-sub { font-size: 14px; color: #8b6c54; margin: 0 0 16px; }

/* ── Footer note ── */
.tak-footer-note {
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 0 24px;
  border-top: 1px solid #d4c4b0;
  padding-top: 20px;
  font-size: 12px;
  color: #8b6c54;
  line-height: 1.6;
}
.tak-footer-note p { margin: 0 0 6px; }
.tak-footer-note-small { font-size: 11px; opacity: .75; }

/* ── Detail Drawer ── */
.tak-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,13,9,0.55);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: tak-fade-in .18s ease;
}
@keyframes tak-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 640px) {
  .tak-drawer-overlay { align-items: center; }
}

.tak-drawer {
  background: #fffaf0;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: tak-slide-up .22s cubic-bezier(.32,.8,.4,1);
  overflow: hidden;
}
@keyframes tak-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (min-width: 640px) {
  .tak-drawer {
    border-radius: 16px;
    max-height: 85vh;
    margin: 20px;
  }
}

.tak-drawer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e8ddd0;
  flex-shrink: 0;
}
.tak-drawer-close {
  background: none;
  border: none;
  color: #8b6c54;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  transition: background .12s;
}
.tak-drawer-close:hover { background: #f0ece4; }
.tak-drawer-save-btn {
  background: none;
  border: 1.5px solid #d4c4b0;
  color: #3f291f;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s;
}
.tak-drawer-save-btn:hover { border-color: #8b5e3c; }

.tak-drawer-scroll {
  overflow-y: auto;
  flex: 1;
  padding: 0 20px 24px;
}

.tak-drawer-header { padding: 20px 0 16px; border-bottom: 1px solid #e8ddd0; }
.tak-drawer-name {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  color: #17130f;
  margin: 0 0 10px;
  line-height: 1.25;
}
.tak-drawer-desc { font-size: 14px; color: #3f291f; line-height: 1.6; margin: 0; }

.tak-drawer-section { padding: 16px 0; border-bottom: 1px solid #e8ddd0; }
.tak-drawer-section:last-child { border-bottom: none; }
.tak-drawer-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8b6c54;
  margin: 0 0 10px;
}
.tak-drawer-goals {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: disc;
  color: #3f291f;
  font-size: 13px;
  line-height: 1.7;
}

.tak-drawer-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid #e8ddd0;
}
.tak-drawer-cta-primary {
  display: inline-block;
  padding: 10px 20px;
  background: #1e45d4;
  color: #fff8ee;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s;
}
.tak-drawer-cta-primary:hover { background: #1538b8; }
.tak-drawer-cta-secondary {
  display: inline-block;
  padding: 10px 20px;
  background: transparent;
  color: #1e45d4;
  border: 1.5px solid #1e45d4;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s;
}
.tak-drawer-cta-secondary:hover { background: #e8f0ff; }

.tak-related-list { display: flex; flex-direction: column; gap: 10px; }
.tak-related-item {
  background: #f5f0e8;
  border: 1px solid #e0d4c0;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .12s;
}
.tak-related-item:hover { border-color: #1e45d4; }
.tak-related-match {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #1e45d4;
  margin-bottom: 4px;
}
.tak-related-headline {
  font-size: 13px;
  font-weight: 600;
  color: #17130f;
  line-height: 1.4;
  margin-bottom: 3px;
}
.tak-related-source { font-size: 11px; color: #8b6c54; }
.tak-related-empty { font-size: 13px; color: #8b6c54; font-style: italic; margin: 0; }

.tak-drawer-trust {
  padding: 14px 0 0;
  font-size: 11px;
  color: #8b6c54;
  line-height: 1.5;
}
.tak-drawer-trust p { margin: 0 0 4px; }
.tak-drawer-last-checked { opacity: .7; }

/* Mobile tweaks */
@media (max-width: 580px) {
  .tak-hero { padding: 32px 16px 32px; }
  .tak-hero-title { font-size: 26px; }
  .tak-body { padding-bottom: 80px; }
  .tak-urgent, .tak-filters, .tak-results-meta, .tak-footer-note { padding-left: 16px; padding-right: 16px; }
  .tak-trust-bar { padding: 10px 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   TAKE ACTION — v2 upgrade: sidebar layout, card images, stats bar
   These override and extend the base tak-* styles above.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero v2: stronger branding ── */
.tak-hero {
  background: linear-gradient(160deg, #1030c0 0%, #2450f0 55%, #1e45d4 100%);
  padding: 40px 32px 44px;
}
.tak-hero-top-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.tak-hero-brand {
  font-family: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: #fff8ee;
  letter-spacing: -.02em;
  line-height: 1;
}
.tak-hero-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,248,238,0.55);
  border-left: 1.5px solid rgba(255,248,238,0.25);
  padding-left: 12px;
  line-height: 1;
}
.tak-hero-eyebrow { display: none; } /* replaced by top-row */

/* ── Stats bar ── */
.tak-stats-bar {
  display: flex;
  align-items: center;
  background: #fffaf0;
  border-bottom: 1px solid #e8ddd0;
  padding: 14px 32px;
  gap: 0;
  flex-wrap: wrap;
}
.tak-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 20px 0 0;
}
.tak-stat-num {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  color: #17130f;
  line-height: 1;
  letter-spacing: -.01em;
}
.tak-stat-label {
  font-size: 11px;
  color: #8b6c54;
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.3;
}
.tak-stat-divider {
  width: 1px;
  height: 36px;
  background: #d4c4b0;
  margin: 0 20px 0 0;
  flex-shrink: 0;
}
.tak-stat--hint {
  justify-content: center;
}
.tak-stat-hint-text {
  font-size: 11px;
  color: #8b6c54;
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  max-width: 180px;
}
@media (max-width: 640px) {
  .tak-stats-bar { padding: 12px 16px; gap: 8px 0; }
  .tak-stat { padding-right: 14px; }
  .tak-stat-num { font-size: 18px; }
  .tak-stat-divider { margin-right: 14px; }
  .tak-stat-hint-text { max-width: 140px; }
}

/* ── Trust bar v2 ── */
.tak-trust-bar {
  background: #f5f0e4;
  border-bottom: 1px solid #d4c4b0;
  padding: 9px 24px;
}

/* ── Mobile filter toggle bar ── */
.tak-mobile-filter-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fffaf0;
  border-bottom: 1px solid #e8ddd0;
}
.tak-mobile-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f0ece4;
  border: 1.5px solid #d4c4b0;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #3f291f;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s;
}
.tak-mobile-filter-btn.is-on { border-color: #1e45d4; color: #1e45d4; }
.tak-mobile-clear {
  background: none;
  border: none;
  color: #1e45d4;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
}
.tak-mobile-count {
  margin-left: auto;
  font-size: 12px;
  color: #8b6c54;
}
@media (max-width: 860px) {
  .tak-mobile-filter-bar { display: flex; }
}

/* ── Two-column layout ── */
.tak-layout {
  display: flex;
  align-items: flex-start;
  background: #f5f0e8;
  flex: 1;
  min-height: 0;
}

/* ── Sidebar ── */
.tak-sidebar {
  width: 234px;
  flex-shrink: 0;
  position: sticky;
  top: 52px;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  padding: 20px 0 40px;
  background: #fffaf0;
  border-right: 1px solid #e8ddd0;
  scrollbar-width: none;
}
.tak-sidebar::-webkit-scrollbar { display: none; }

.tak-sb-section {
  padding: 0 0 4px;
  border-bottom: 1px solid #e8ddd0;
  margin-bottom: 4px;
}
.tak-sb-section:last-of-type { border-bottom: none; }

.tak-sb-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8b6c54;
  padding: 10px 18px 6px;
}

.tak-sb-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 18px 7px 16px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: #3f291f;
  font-weight: 400;
  transition: background .1s, color .1s, border-color .1s;
  line-height: 1.3;
}
.tak-sb-item:hover { background: #f0ece4; color: #17130f; }
.tak-sb-item.is-on {
  border-left-color: #1e45d4;
  background: #eef2ff;
  color: #1e45d4;
  font-weight: 600;
}
.tak-sb-item-label { flex: 1; }
.tak-sb-item-count {
  font-size: 11px;
  font-weight: 600;
  color: #8b6c54;
  background: #f0ece4;
  border-radius: 10px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.tak-sb-item.is-on .tak-sb-item-count { background: #dde6ff; color: #1e45d4; }

.tak-sb-clear {
  display: block;
  width: calc(100% - 36px);
  margin: 12px 18px;
  padding: 8px 0;
  background: none;
  border: 1.5px solid #d4c4b0;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  color: #3f291f;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: border-color .12s;
}
.tak-sb-clear:hover { border-color: #1e45d4; color: #1e45d4; }

/* Mobile sidebar — hidden by default, shown via toggle */
@media (max-width: 860px) {
  .tak-sidebar {
    display: none;
    position: static;
    width: 100%;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid #e8ddd0;
    padding: 0 0 10px;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }
  .tak-sidebar.is-open {
    display: block;
    position: fixed;
    top: 52px;
    left: 0; right: 0;
    z-index: 50;
    max-height: 60vh;
    overflow-y: auto;
    background: #fffaf0;
    border-bottom: 2px solid #d4c4b0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  }
}

/* ── Main area ── */
.tak-main {
  flex: 1;
  min-width: 0;
  padding-bottom: 80px;
}
.tak-main-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 4px;
}

/* ── Grid v2 ── */
.tak-grid {
  grid-template-columns: repeat(3, 1fr);
  padding: 12px 24px 0;
  max-width: none;
}
@media (max-width: 1100px) {
  .tak-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .tak-grid { grid-template-columns: repeat(2, 1fr); padding: 12px 16px 0; }
}
@media (max-width: 580px) {
  .tak-grid { grid-template-columns: 1fr; }
}

/* ── Card v2 ── */
.tak-card {
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  cursor: pointer;
}
.tak-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(30,69,212,0.14);
}

/* Card image */
.tak-card-img {
  position: relative;
  height: 130px;
  overflow: hidden;
  flex-shrink: 0;
}
.tak-card-img-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .75;
}
.tak-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 100%);
}
.tak-card-img-meta {
  position: absolute;
  bottom: 8px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.tak-card-img-geo {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,248,238,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  letter-spacing: .03em;
}
.tak-card-img-story-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8f040;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
}

/* Match badge */
.tak-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tak-badge--strong   { background: #c8f040; color: #101e04; }
.tak-badge--relevant { background: rgba(255,248,238,0.85); color: #3f291f; }
.tak-badge--general  { background: rgba(255,255,255,0.18); color: rgba(255,248,238,0.75); }

/* Card body */
.tak-card-body {
  background: #fffaf0;
  border: 1px solid #e8ddd0;
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 14px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.tak-card-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.tak-card-name {
  font-family: 'Instrument Serif', serif;
  font-size: 14px;
  font-weight: 400;
  color: #17130f;
  margin: 0;
  line-height: 1.3;
  flex: 1;
}
.tak-card-match-line {
  font-size: 11px;
  color: #1e45d4;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}
.tak-card-desc {
  font-size: 12px;
  color: #5a3c2a;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Related story preview on card */
.tak-card-story-preview {
  background: #f0ece4;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background .12s;
  margin-top: 2px;
}
.tak-card-story-preview:hover { background: #e8e0d4; }
.tak-card-story-tag {
  display: block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #1e45d4;
  margin-bottom: 3px;
}
.tak-card-story-headline {
  display: -webkit-box;
  font-size: 11px;
  color: #17130f;
  line-height: 1.4;
  font-weight: 500;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card actions v2 */
.tak-card-actions { gap: 6px; margin-top: 2px; }
.tak-card-cta {
  font-size: 11px;
  padding: 6px 12px;
}

/* ── Drawer image ── */
.tak-drawer-img {
  width: 100%;
  height: 160px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.tak-drawer-img-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .7;
}

/* ── Drawer why section ── */
.tak-drawer-section--why {
  background: #eef2ff;
  border-radius: 10px;
  padding: 12px 14px;
  border-bottom: none !important;
  margin: 12px 0;
}
.tak-drawer-section--why .tak-drawer-section-title { color: #1e45d4; }
.tak-drawer-why-text {
  font-size: 13px;
  color: #2d3060;
  line-height: 1.6;
  margin: 0;
}

/* ── Results meta & clear ── */
.tak-results-meta { font-size: 12px; color: #8b6c54; }
.tak-clear-all {
  background: none;
  border: none;
  color: #1e45d4;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
}

/* Footer */
.tak-footer-note {
  margin: 28px 0 0;
  padding: 20px 24px 0;
  border-top: 1px solid #d4c4b0;
}
@media (max-width: 580px) {
  .tak-footer-note { padding: 16px 16px 0; }
}

/* Override tak-body — not needed anymore (body is tak-layout now) */
.tak-body { background: #f5f0e8; flex: 1; padding: 0; }

/* ================================================================
   GLOBALLY TIME PICKER — custom scroll-style hour/minute selector
   Replaces native <input type="time"> in onboarding + profile.
   Cream/brown/black Globally palette; scroll-snap columns.
   ================================================================ */

.gl-time-picker {
  display: flex;
  align-items: stretch;
  background: rgba(255,252,242,0.88);
  border: 1px solid rgba(17,17,15,0.13);
  border-radius: 16px;
  overflow: hidden;
  width: fit-content;
  margin: 8px auto 0;
  box-shadow: 0 2px 10px rgba(17,17,15,0.07);
  user-select: none;
}

.gl-time-col {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 72px;
  max-height: 198px;
}
.gl-time-col::-webkit-scrollbar { display: none; }

.gl-time-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title, 'Newsreader', Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  color: rgba(17,17,15,0.35);
  padding: 0 4px;
  flex-shrink: 0;
  pointer-events: none;
}

.gl-time-opt {
  flex-shrink: 0;
  scroll-snap-align: center;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title, 'Newsreader', Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  color: rgba(17,17,15,0.32);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: color 0.12s, background 0.12s;
  letter-spacing: -0.02em;
}
.gl-time-opt:hover {
  color: rgba(17,17,15,0.65);
  background: rgba(17,17,15,0.04);
}
.gl-time-opt--sel {
  color: #11110F !important;
  font-weight: 700 !important;
  background: rgba(17,17,15,0.07) !important;
}
@media (prefers-reduced-motion: reduce) {
  .gl-time-col { scroll-behavior: auto; }
}

/* ── Profile card uses the same picker but narrower context ── */
.gl-profile-card .gl-time-picker {
  margin: 0 0 12px;
}

/* ════════════════════════════════════════════════════════════════
   PAPER TEXTURE — warm editorial cream backgrounds
   Placed last so source order overrides earlier background:var(--g-bg)
   declarations. Cards (.gl-profile-card, .tak-card, etc.), dark-brown
   sidebars, the blue Charity page (.tak-page), and image/video areas
   all set their own backgrounds and are unaffected.
   ════════════════════════════════════════════════════════════════ */

/* Homepage shell, story pages, briefing */
.g-phone-frame,
.gs-shell,
.gl-app,
.gbd2-screen:not(.gbd2-screen--sober),
.mira-briefing-page {
  background-color: #EBE7D8;
  background-image:
    radial-gradient(rgba(70,48,32,0.035) 0.6px, transparent 0.6px),
    radial-gradient(rgba(255,255,255,0.45) 0.8px, transparent 0.8px),
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(80,55,35,0.035) 100%);
  background-size: 18px 18px, 24px 24px, 100% 100%;
  background-position: 0 0, 8px 10px, 0 0;
}

/* Profile page — inherits the existing top vignette, adds texture beneath */
.gl-profile-page {
  background-color: #EBE7D8;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(17,17,15,0.06), transparent 34%),
    radial-gradient(rgba(70,48,32,0.035) 0.6px, transparent 0.6px),
    radial-gradient(rgba(255,255,255,0.45) 0.8px, transparent 0.8px),
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(80,55,35,0.035) 100%);
  background-size: 100% 100%, 18px 18px, 24px 24px, 100% 100%;
  background-position: 0 0, 0 0, 8px 10px, 0 0;
}

/* ════════════════════════════════════════════════════════════════════
   SECTION COLOUR VARIANTS — Volunteering (#1F6F4A) & Mira Business (#4A3A4D)
   Both reuse the charity tak-* structural classes with colour overrides.
   ════════════════════════════════════════════════════════════════════ */

/* ── Volunteering (deep green) ── */
.tak-page--volunteering {
  background: #1F6F4A;
}
.tak-page--volunteering .tak-topbar {
  background: #175c3d;
  border-bottom-color: rgba(255,255,255,0.08);
}
.tak-page--volunteering .tak-hero {
  background: linear-gradient(160deg, #145234 0%, #228a5c 55%, #1F6F4A 100%);
}
.tak-page--volunteering .tak-trust-bar {
  background: rgba(0,0,0,0.18);
  border-bottom-color: rgba(255,255,255,0.06);
  color: rgba(255,248,238,0.7);
}
.tak-page--volunteering .tak-trust-bar svg { color: rgba(255,248,238,0.5); }

/* ── Mira Business (charcoal plum) ── */
.tak-page--business {
  background: #4A3A4D;
}
.tak-page--business .tak-topbar {
  background: #3a2d3d;
  border-bottom-color: rgba(255,255,255,0.08);
}
.tak-page--business .tak-hero {
  background: linear-gradient(160deg, #332640 0%, #5c475f 55%, #4A3A4D 100%);
}
.tak-page--business .tak-trust-bar {
  background: rgba(0,0,0,0.2);
  border-bottom-color: rgba(255,255,255,0.06);
  color: rgba(255,248,238,0.7);
}
.tak-page--business .tak-trust-bar svg { color: rgba(255,248,238,0.5); }

/* ════════════════════════════════════════════════════════════════════
   SHARED SECTION BODY SYSTEM — gsect-*
   Used by Volunteering and Mira Business. Cream/paper cards, premium
   editorial shadows. Accent colours injected via modifier classes.
   ════════════════════════════════════════════════════════════════════ */

.gsect-body {
  background: #f5f0e8;
  flex: 1;
  padding: 0 0 80px;
}

/* ── Hero CTA row ── */
.gsect-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ── Primary / secondary buttons ── */
.gsect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  line-height: 1;
}
/* Primary — filled cream on dark hero */
.tak-hero .gsect-btn--primary {
  background: #fffaf0;
  color: #17130f;
  border-color: transparent;
}
.tak-hero .gsect-btn--primary:hover { background: #fff; }
/* Secondary — outline on dark hero */
.tak-hero .gsect-btn--secondary {
  background: rgba(255,255,255,0.1);
  color: #fff8ee;
  border-color: rgba(255,255,255,0.35);
}
.tak-hero .gsect-btn--secondary:hover { background: rgba(255,255,255,0.18); }
/* Primary on cream body (form submit) */
.gsect-body .gsect-btn--primary {
  background: #17130f;
  color: #fff8ee;
  border-color: transparent;
}
.gsect-body .gsect-btn--primary:hover { background: #2a2218; }

/* Colour-specific primary in body */
.tak-page--volunteering .gsect-body .gsect-btn--primary { background: #1F6F4A; }
.tak-page--volunteering .gsect-body .gsect-btn--primary:hover { background: #175c3d; }
.tak-page--business     .gsect-body .gsect-btn--primary { background: #4A3A4D; }
.tak-page--business     .gsect-body .gsect-btn--primary:hover { background: #3a2d3d; }

/* ── Section ── */
.gsect-section {
  padding: 40px 32px 0;
  max-width: 1080px;
  margin: 0 auto;
}
.gsect-section--form {
  padding-bottom: 40px;
}
@media (max-width: 640px) {
  .gsect-section { padding: 28px 16px 0; }
  .gsect-section--form { padding-bottom: 28px; }
}

.gsect-section-hd {
  margin-bottom: 24px;
}
.gsect-section-title {
  font-family: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  color: #17130f;
  margin: 0 0 8px;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.gsect-section-sub {
  font-size: 15px;
  color: #5c4a38;
  line-height: 1.55;
  margin: 0;
  max-width: 580px;
}

/* ── Cards grid ── */
.gsect-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
.gsect-cards--3 { grid-template-columns: repeat(3, 1fr); }
.gsect-cards--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) {
  .gsect-cards,
  .gsect-cards--3,
  .gsect-cards--4 { grid-template-columns: 1fr; }
}
@media (min-width: 861px) and (max-width: 1080px) {
  .gsect-cards--4 { grid-template-columns: repeat(2, 1fr); }
}

.gsect-card {
  background: #fffaf0;
  border: 1px solid #e0d4c0;
  border-radius: 14px;
  padding: 22px 22px 22px;
  box-shadow: 0 2px 10px rgba(60,40,20,0.07), 0 1px 2px rgba(60,40,20,0.04);
}
.gsect-card-label {
  font-family: 'Instrument Serif', serif;
  font-size: 17px;
  font-weight: 400;
  color: #17130f;
  margin: 0 0 8px;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.gsect-card-body {
  font-size: 14px;
  color: #5c4a38;
  line-height: 1.6;
  margin: 0;
}

/* Audience card (with who + link) */
.gsect-card--audience {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}
.gsect-card-who {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8b6c54;
  margin: 0;
  line-height: 1;
}
.gsect-card-link {
  display: inline-block;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #17130f;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .12s;
}
.gsect-card-link:hover { opacity: 0.65; }

/* Colour accent on links */
.tak-page--volunteering .gsect-card-link { color: #1F6F4A; }
.tak-page--business     .gsect-card-link { color: #4A3A4D; }

/* ── Use cases list ── */
.gsect-usecases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 640px) {
  .gsect-usecases { grid-template-columns: 1fr; }
}

.gsect-usecase {
  background: #fffaf0;
  border: 1px solid #e0d4c0;
  border-radius: 12px;
  padding: 20px 20px;
  box-shadow: 0 1px 6px rgba(60,40,20,0.05);
}
.gsect-usecase-label {
  font-size: 14px;
  font-weight: 700;
  color: #17130f;
  margin: 0 0 6px;
  line-height: 1.3;
}
.gsect-usecase-body {
  font-size: 13px;
  color: #6b5440;
  line-height: 1.6;
  margin: 0;
}

/* Volunteering/Business accent borders */
.tak-page--volunteering .gsect-usecase { border-left: 3px solid #1F6F4A; }
.tak-page--business     .gsect-usecase { border-left: 3px solid #4A3A4D; }

/* ── Contact form ── */
.gsect-form {
  background: #fffaf0;
  border: 1px solid #e0d4c0;
  border-radius: 16px;
  padding: 28px 28px 24px;
  box-shadow: 0 2px 12px rgba(60,40,20,0.08);
}
.gsect-form--compact { max-width: 440px; }

.gsect-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 600px) {
  .gsect-form-row { grid-template-columns: 1fr; }
}

.gsect-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.gsect-form-row .gsect-form-field { margin-bottom: 0; }

.gsect-form-label {
  font-size: 12px;
  font-weight: 600;
  color: #5c4a38;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.gsect-form-input {
  border: 1.5px solid #d4c4b0;
  border-radius: 10px;
  background: #fff;
  padding: 10px 14px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: #17130f;
  outline: none;
  transition: border-color .12s;
}
.gsect-form-input:focus { border-color: #3f291f; }
.gsect-form-input::placeholder { color: #b0967a; }

.tak-page--volunteering .gsect-form-input:focus { border-color: #1F6F4A; }
.tak-page--business     .gsect-form-input:focus { border-color: #4A3A4D; }

.gsect-form-textarea {
  border: 1.5px solid #d4c4b0;
  border-radius: 10px;
  background: #fff;
  padding: 10px 14px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: #17130f;
  outline: none;
  resize: vertical;
  min-height: 100px;
  transition: border-color .12s;
}
.gsect-form-textarea:focus { border-color: #3f291f; }
.gsect-form-textarea::placeholder { color: #b0967a; }

.tak-page--volunteering .gsect-form-textarea:focus { border-color: #1F6F4A; }
.tak-page--business     .gsect-form-textarea:focus { border-color: #4A3A4D; }

.gsect-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.gsect-form-note {
  font-size: 12px;
  color: #8b6c54;
  line-height: 1.4;
  margin: 0;
  flex: 1;
  font-style: italic;
}

/* ── Form success state ── */
.gsect-form-success {
  background: #fffaf0;
  border: 1px solid #e0d4c0;
  border-radius: 16px;
  padding: 40px 28px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(60,40,20,0.06);
}
.gsect-form-success-check {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e8f5ef;
  color: #1F6F4A;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.tak-page--business .gsect-form-success-check { background: #ede8ee; color: #4A3A4D; }

.gsect-form-success-title {
  font-family: 'Instrument Serif', serif;
  font-size: 20px;
  font-weight: 400;
  color: #17130f;
  margin: 0 0 8px;
}
.gsect-form-success-body {
  font-size: 14px;
  color: #6b5440;
  line-height: 1.6;
  margin: 0;
}

/* ── Form toggle intro (Volunteering: org vs waitlist) ── */
.gsect-form-toggle-intro {
  background: #fffaf0;
  border: 1px solid #e0d4c0;
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(60,40,20,0.06);
}
.gsect-form-toggle-prompt {
  font-family: 'Instrument Serif', serif;
  font-size: 20px;
  font-weight: 400;
  color: #17130f;
  margin: 0 0 20px;
}
.gsect-form-toggle-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .gsect-form { padding: 20px 16px 18px; }
  .gsect-form-footer { flex-direction: column; align-items: flex-start; }
}