:root{
  /* Typography */
  --gp-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Weights (single source of truth) */
  --gp-w-kicker: 700;
  --gp-w-h1: 800;
  --gp-w-h2: 700;
  --gp-w-h3: 700;
  --gp-w-body: 600;
  --gp-w-btn: 700;

  /* Colors */
  --gp-hero-text: rgba(255,255,255,.88);
  --gp-hero-muted: rgba(255,255,255,.78);
  --gp-card-text: #0f172a;
  --gp-muted: #64748b;

  /* Used by gp-wp-template.css */
  --gp-w-pill: 700;   /* trust-pill in hero */
}

/* ===== Base ===== */
body{
  margin: 0;
  background: #f8fafc;
  font-family: var(--gp-font);
  color: var(--gp-card-text);
}

/* Match our template width */
.gp-wrap{ max-width: 1100px; }

/* ===== Header shared layout (moved from header.php inline style) ===== */
.user-bar{
  position: fixed;
  top: 12px;
  right: 18px;
  z-index: 5000;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  color: #e5e7eb;
  font-size: 0.95rem;
}
.user-bar span{ font-weight: 600; }
.user-bar a{ color: #93c5fd; text-decoration: none; font-weight: 600; }
.user-bar a:hover{ text-decoration: underline; color: #bfdbfe; }

.main-content{
  margin-left: 270px;
  padding: 40px 40px 60px;
  min-height: 100vh;
}
@media (max-width: 991px){
  .main-content{
    margin-left: 0;
    padding: 100px 16px 40px !important;
  }
  .user-bar{
    top: 64px;
    right: 12px;
    font-size: 0.85rem;
    padding: 6px 10px;
  }
}

/* ===== WP HERO / TEMPLATE ===== */
.wp-hero{
  border-radius: 24px;
  padding: 18px;
  margin-bottom: 14px;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(37,99,235,.24), transparent 55%),
    radial-gradient(800px 320px at 95% 10%, rgba(99,102,241,.18), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0a1326 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}
.wp-hero-inner{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  justify-content: space-between;
}
.wp-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
  font-weight: var(--gp-w-kicker);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wp-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, #60a5fa, #22d3ee);
  box-shadow: 0 0 0 5px rgba(96,165,250,.18);
}
.wp-title{
  margin: 10px 0 6px;
  font-weight: var(--gp-w-h1);
  color: #ffffff;
  letter-spacing: -0.5px;
}
.wp-title-brand{
  background: linear-gradient(135deg, #93c5fd, #60a5fa, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wp-sub{
  margin: 0;
  color: var(--gp-hero-muted);
  max-width: 74ch;
  font-size: 1.05rem;
  font-weight: 600;
}
.wp-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.wp-trust-pill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-weight: var(--gp-w-pill);
  white-space: nowrap;
}
.wp-trust-pill i{ color:#93c5fd; }

/* ===== MAIN WRAP ===== */
.wp-card{
  position: relative;
  border-radius: 26px;
  padding: 22px;
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(37,99,235,.06), transparent 55%),
    radial-gradient(900px 400px at 90% 10%, rgba(99,102,241,.05), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow:
    0 24px 70px rgba(15,23,42,.12),
    0 2px 0 rgba(255,255,255,.65) inset;
}

/* ===== Shared Section Cards ===== */
.gp-section-card{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 22px;
  background: linear-gradient(180deg, #d1d5db, #c7cdd6);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow:
    0 16px 44px rgba(15,23,42,.14),
    0 1px 0 rgba(255,255,255,.35) inset;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.gp-section-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, rgba(37,99,235,.60), rgba(99,102,241,.40), rgba(34,211,238,.30));
  opacity: .35;
}
.gp-section-card:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.28);
  box-shadow:
    0 22px 64px rgba(15,23,42,.18),
    0 1px 0 rgba(255,255,255,.45) inset;
}

/* headings */
.gp-card-head{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 10px;
}
.gp-card-head i{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: #1e40af;
  box-shadow: 0 10px 24px rgba(37,99,235,.10);
}
.gp-card-head h2{
  margin:0;
  font-size: 1.35rem;
  font-weight: var(--gp-w-h2);
  color:#0f172a;
  letter-spacing: -.2px;
}
.gp-muted{ color:#475569; font-weight: var(--gp-w-body); }

/* ===== Shared readable body text ===== */
.gp-body-text{
  color:#111827;
  font-weight: 650;
  line-height: 1.6;
}
.gp-section-card p,
.gp-section-card li{
  color: #111827;
  font-weight: 600;
  line-height: 1.6;
}

/* ===== Icons used across multiple blocks ===== */
.gp-ic{
  width: 50px; height: 50px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(37,99,235,.12);
  border: 1px solid rgba(37,99,235,.18);
  color:#1e40af;
  font-size: 1.15rem;
  flex: 0 0 50px;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

/* ===== Section head (used by training + what_to_do) ===== */
.gp-section-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
}
.gp-section-title{
  font-weight: 900;
  color:#0f172a;
  font-size: 1.35rem;
}
.gp-section-sub{ color:#64748b; font-weight: 650; }
.gp-section-pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.16);
  color:#1e40af;
  font-weight: 900;
  white-space: nowrap;
}

/* ===== Bullets (what_is_phishing + shared) ===== */
.gp-bullets{ display:grid; gap: 10px; margin-top: 12px; }
.gp-bullet{
  display:flex; gap: 12px; align-items:flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(241,245,249,.90));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.gp-bullet i{ color:#2563eb; margin-top: 2px; font-size: 1.05rem; }
.gp-bullet-title{ font-weight: 800; color:#0f172a; }
.gp-bullet-text{ color:#64748b; font-weight: 600; }

/* ===== Lists used in what_to_do ===== */
.gp-list{
  margin: 0;
  padding-left: 18px;
  display:grid;
  gap: 8px;
  color:#1f2937;
}
.gp-list li{ line-height: 1.55; }

/* ===== Pills used in scenario cards ===== */
.gp-pillRow{ margin-bottom: 10px; }
.gp-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color:#1e40af;
  font-weight: 900;
  font-size: .86rem;
}
.gp-pill-soft{
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(15,23,42,.10);
  color:#334155;
}

/* ===== “If you fell for it” response box ===== */
.gp-response{
  margin-top: 14px;
  border-radius: 20px;
  padding: 14px;
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(245,158,11,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border: 1px solid rgba(245,158,11,.30);
}
.gp-response-head{
  display:flex; gap: 10px; align-items:flex-start;
  margin-bottom: 10px;
}
.gp-response-head i{
  width: 40px; height: 40px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(245,158,11,.18);
  border: 1px solid rgba(245,158,11,.28);
  color:#92400e;
  flex: 0 0 40px;
}
.gp-response-title{ font-weight: 900; color:#0f172a; }
.gp-response-sub{ color:#7c2d12; font-weight: 750; font-size: .92rem; }

/* ===== Notes (shared) ===== */
.gp-note{
  display:flex; gap: 10px; align-items:flex-start;
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(2,6,23,.03);
  border: 1px solid rgba(15,23,42,.10);
  color:#475569;
}
.gp-note i{ color:#2563eb; margin-top: 2px; }
.gp-note-warn i{ color:#92400e; }

/* ===== Stats grid (shared) ===== */
.gp-stat-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
/* ===== Stats grid (homepage) ===== */
.gp-stat-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Card base (single source of truth) */
.gp-stat-card{
  position: relative;
  overflow:hidden;
  border-radius: 24px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 16px 44px rgba(15,23,42,.10);
  text-align: left; /* key improvement */
}

/* Tone glow overlay */
.gp-stat-card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.9;
  pointer-events:none;
}
.gp-stat-card > *{ position: relative; z-index: 1; }

.gp-stat-card.gp-tone-blue::before{    background: radial-gradient(900px 260px at 12% 0%, rgba(37,99,235,.10), transparent 60%); }
.gp-stat-card.gp-tone-teal::before{    background: radial-gradient(900px 260px at 12% 0%, rgba(20,184,166,.12), transparent 60%); }
.gp-stat-card.gp-tone-purple::before{  background: radial-gradient(900px 260px at 12% 0%, rgba(139,92,246,.12), transparent 60%); }
.gp-stat-card.gp-tone-indigo::before{  background: radial-gradient(900px 260px at 12% 0%, rgba(99,102,241,.12), transparent 60%); }
.gp-stat-card.gp-tone-amber::before{   background: radial-gradient(900px 260px at 12% 0%, rgba(245,158,11,.14), transparent 60%); }
.gp-stat-card.gp-tone-slate::before{   background: radial-gradient(900px 260px at 12% 0%, rgba(100,116,139,.14), transparent 60%); }

/* Top row: icon left, source chip right */
.gp-stat-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.gp-stat-ic{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(2,6,23,.05);
  border: 1px solid rgba(15,23,42,.10);
  color:#0f172a;
  flex: 0 0 44px;
}

.gp-stat-src{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(15,23,42,.10);
  color:#475569;
  font-weight: 900;
  font-size: .78rem;
  white-space: nowrap;
}

/* Big number + label */
.gp-stat-number{
  font-size: 2.35rem;
  font-weight: 1000;
  letter-spacing: -1px;
  color: #0f172a;
  margin: 6px 0 4px;
  line-height: 1.05;
}

.gp-stat-label{
  font-weight: 800;
  color: #334155;
  line-height: 1.35;
  font-size: .98rem;
}

/* “Why it matters” */
.gp-stat-why{
  margin-top: 10px;
  color:#475569;
  font-weight: 700;
  line-height: 1.45;
  border-top: 1px solid rgba(15,23,42,.10);
  padding-top: 10px;
}


.gp-grad-blue{ background: linear-gradient(135deg, #2563eb, #60a5fa); }
.gp-grad-purple{ background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.gp-grad-green{ background: linear-gradient(135deg, #16a34a, #22c55e); }
.gp-grad-orange{ background: linear-gradient(135deg, #f97316, #fb923c); }
.gp-grad-red{ background: linear-gradient(135deg, #dc2626, #ef4444); }
.gp-grad-teal{ background: linear-gradient(135deg, #0d9488, #14b8a6); }

/* ===== what_to_do: TOP 4 steps callouts ===== */
.gp-top-callouts{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.gp-callout{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 14px;
  border: 2px solid rgba(15,23,42,.22);
  box-shadow:
    0 18px 40px rgba(15,23,42,.10),
    0 0 0 1px rgba(255,255,255,.85) inset;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}
.gp-callout::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 4px;
  opacity: .85;
}
.gp-callout-title{ font-weight: 900; color:#0f172a; margin-bottom: 4px; }
.gp-callout-text{ color:#64748b; font-weight: 650; }

.gp-callout-blue{ border-color: rgba(37,99,235,.18); }
.gp-callout-blue::before{ background: linear-gradient(90deg, rgba(37,99,235,.70), rgba(99,102,241,.40)); }
.gp-callout-green{ border-color: rgba(34,197,94,.18); }
.gp-callout-green::before{ background: linear-gradient(90deg, rgba(34,197,94,.70), rgba(16,185,129,.38)); }
.gp-callout-amber{ border-color: rgba(245,158,11,.22); }
.gp-callout-amber::before{ background: linear-gradient(90deg, rgba(245,158,11,.75), rgba(251,191,36,.40)); }
.gp-callout-red{ border-color: rgba(239,68,68,.22); }
.gp-callout-red::before{ background: linear-gradient(90deg, rgba(239,68,68,.75), rgba(244,63,94,.40)); }

/* ===== what_to_do: Quick blocks ===== */
.gp-quick{
  border-radius: 26px;
  background: linear-gradient(180deg, #d1d5db, #c7cdd6);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 16px 44px rgba(15,23,42,.10);
  overflow:hidden;
  position: relative;
}
.gp-quick::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(900px 260px at 92% 10%, rgba(16,185,129,.12), transparent 62%);
  opacity:.85;
  pointer-events:none;
}
.gp-quick-head, .gp-quick-body{ position: relative; z-index: 1; }
.gp-quick-head{
  display:flex; gap: 12px; align-items:center;
  padding: 16px;
  background: rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(15,23,42,.10);
}
.gp-quick-body{ padding: 16px; }

.gp-quick-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gp-quick-item{
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(15,23,42,.12);
}
.gp-quick-title{ font-weight: 900; color:#0f172a; }
.gp-quick-sub{ color:#334155; font-weight: 650; margin-top: 4px; }

.gp-quick-cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ===== what_to_do: Legal grid/cards ===== */
.gp-legal-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.gp-legal-card{
  position: relative;
  overflow:hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, #d1d5db, #c7cdd6);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 16px 44px rgba(15,23,42,.10);
}
.gp-legal-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.9;
}
.gp-legal-card.gp-tone-blue::before{   background: radial-gradient(900px 260px at 12% 0%, rgba(37,99,235,.12), transparent 60%); }
.gp-legal-card.gp-tone-amber::before{  background: radial-gradient(900px 260px at 12% 0%, rgba(245,158,11,.16), transparent 60%); }
.gp-legal-card.gp-tone-indigo::before{ background: radial-gradient(900px 260px at 12% 0%, rgba(99,102,241,.14), transparent 60%); }
.gp-legal-card.gp-tone-slate::before{  background: radial-gradient(900px 260px at 12% 0%, rgba(100,116,139,.14), transparent 60%); }

.gp-legal-head, .gp-legal-body{ position: relative; z-index: 1; }
.gp-legal-head{
  display:flex; gap: 12px; align-items:center;
  padding: 16px;
  background: rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(15,23,42,.10);
}
.gp-legal-body{ padding: 16px; }

/* timeline */
.gp-timeline{ display:grid; gap: 10px; }
.gp-time{
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(15,23,42,.12);
}
.gp-time-badge{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.22);
  color:#065f46;
}
.gp-time-badge.gp-warn{
  background: rgba(245,158,11,.16);
  border: 1px solid rgba(245,158,11,.26);
  color:#92400e;
}
.gp-time-badge.gp-danger{
  background: rgba(239,68,68,.16);
  border: 1px solid rgba(239,68,68,.26);
  color:#991b1b;
}
.gp-time-text{ margin-top: 6px; color:#334155; font-weight: 700; }

/* ===== what_to_do: Scenario grid/cards ===== */
.gp-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
.gp-card{
  position: relative;
  overflow:hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, #d1d5db, #c7cdd6) !important;
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 16px 44px rgba(15,23,42,.14);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gp-card:hover{
  transform: translateY(-6px);
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 22px 64px rgba(15,23,42,.18);
}
.gp-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 24px;
  pointer-events:none;
  opacity:.9;
}
.gp-tone-blue::before{    background: radial-gradient(900px 260px at 12% 0%, rgba(37,99,235,.12), transparent 60%); }
.gp-tone-teal::before{    background: radial-gradient(900px 260px at 12% 0%, rgba(20,184,166,.14), transparent 60%); }
.gp-tone-purple::before{  background: radial-gradient(900px 260px at 12% 0%, rgba(139,92,246,.14), transparent 60%); }
.gp-tone-indigo::before{  background: radial-gradient(900px 260px at 12% 0%, rgba(99,102,241,.14), transparent 60%); }
.gp-tone-rose::before{    background: radial-gradient(900px 260px at 12% 0%, rgba(244,63,94,.14), transparent 60%); }
.gp-tone-emerald::before{ background: radial-gradient(900px 260px at 12% 0%, rgba(16,185,129,.14), transparent 60%); }
.gp-tone-slate::before{   background: radial-gradient(900px 260px at 12% 0%, rgba(100,116,139,.14), transparent 60%); }
.gp-tone-amber::before{   background: radial-gradient(900px 260px at 12% 0%, rgba(245,158,11,.16), transparent 60%); }

.gp-card-top,
.gp-card-body{ position: relative; z-index: 1; }

.gp-card-top{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 16px 16px;
  background: rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(15,23,42,.10);
}
.gp-card-top h2{
  margin:0;
  font-size: 1.25rem;
  font-weight: 900;
  color:#0f172a;
}
.gp-card-sub{
  color:#475569;
  font-weight: 700;
  font-size: .95rem;
  margin-top: 2px;
}
.gp-card-body{ padding: 16px; }

/* ===== Bottom CTA (already used elsewhere; keep) ===== */
.gp-bottom-cta{
  border-radius: 26px;
  padding: 18px;
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(37,99,235,.12), transparent 60%),
    linear-gradient(180deg, #ffffff, #eef2ff);
  border: 1px solid rgba(37,99,235,.16);
  box-shadow: 0 18px 42px rgba(15,23,42,.10);
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
}
.gp-bottom-title{ font-weight: 900; color:#0f172a; font-size: 1.2rem; }
.gp-bottom-sub{ color:#64748b; font-weight: 650; }
.gp-bottom-actions{ display:flex; gap: 10px; flex-wrap: wrap; }

/* ===== Buttons (central weights) ===== */
.gp-btn-primary{
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  border: none;
  color:#fff;
  box-shadow: 0 18px 36px rgba(37,99,235,.22);
  font-weight: var(--gp-w-btn);
}
.gp-btn-primary:hover{ color:#fff; filter: brightness(.98); transform: translateY(-1px); }

.gp-btn-outline{
  border: 1px solid rgba(255,255,255,.22);
  color: #e5e7eb;
  background: rgba(255,255,255,.08);
  font-weight: 700;
}
.gp-btn-outline:hover{ color:#fff; background: rgba(255,255,255,.12); }

.gp-btn-success{
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border:none;
  color:#fff;
  font-weight: var(--gp-w-btn);
}
.gp-btn-ghost{
  border: 1px solid rgba(255,255,255,.18);
  color:#e5e7eb;
  background: rgba(255,255,255,.06);
  font-weight: 700;
}

/* Optional: “softer” homepage CTA weight */
.home-cta-soft{ font-weight: 700 !important; }

/* =========================================================
   scam_lookup shared components
   (moved from inline <style> in scam_lookup.php)
   ========================================================= */




/* Helper text */
.gp-helper{ color:#64748b; font-size: .98rem; margin-top: 10px; }

/* Search */
.gp-searchWrap{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background:
    radial-gradient(700px 220px at 15% 20%, rgba(37,99,235,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(238,242,255,.80));
  border: 1px solid rgba(37,99,235,.20);
}
.gp-searchIcon{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(37,99,235,.12);
  border: 1px solid rgba(37,99,235,.18);
  color:#1e40af;
  flex: 0 0 44px;
}
.gp-searchInput{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 0 !important;
  font-weight: 700;
}
.gp-searchInput::placeholder{ color:#94a3b8; font-weight: 600; }

.gp-clearBtn{
  border: none;
  background: rgba(2,6,23,.06);
  color:#0f172a;
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
}
.gp-clearBtn:hover{ background: rgba(2,6,23,.10); }




/* Filters */
.gp-filterGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.gp-filterBtn{
  border-radius: 16px;
  padding: 10px 10px;
  font-weight: 900;
  border: 1px solid rgba(37,99,235,.18);
  background: rgba(37,99,235,.06);
  color:#1e40af;
}
.gp-filterBtn:hover{ background: rgba(37,99,235,.10); }
.gp-filterBtn.active{
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  box-shadow: 0 18px 36px rgba(37,99,235,.22);
}
.gp-filterClear{
  background: rgba(2,6,23,.06);
  border: 1px solid rgba(15,23,42,.10);
  color:#0f172a;
}
.gp-filterClear:hover{ background: rgba(2,6,23,.10); }

/* Results */
.gp-resultsHead{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  margin-bottom: 12px;
}
.gp-resultsTitle{
  font-weight: 900;
  color:#0f172a;
  font-size: 1.25rem;
  letter-spacing: -.2px;
}
.gp-resultsSub{ color:#64748b; font-size: .95rem; }

.gp-resultsPills{ display:flex; gap: 8px; flex-wrap: wrap; justify-content:flex-end; }

.gp-resultsList .list-group-item{
  background:
    radial-gradient(900px 260px at 12% 10%, rgba(37,99,235,.08), transparent 60%),
    rgba(255,255,255,.85);
  border-radius: 18px;
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 16px 34px rgba(15,23,42,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gp-resultsList .list-group-item:hover{
  transform: translateY(-4px);
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 24px 44px rgba(15,23,42,.12);
}
.gp-resultsList .list-group-item h5{
  font-weight: 900;
  margin-bottom: 6px;
}
/* =========================================================
   Shared small cards / links (used on Home + Scam Lookup + others)
========================================================= */

.gp-miniTips{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.gp-miniTip{
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);

  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.gp-miniTipTitle{
  font-weight: 950;
  color:#0f172a;
}

.gp-miniTipText{
  color:#64748b;
  margin-top: 2px;
  font-weight: 700;
  line-height: 1.35;
}

.gp-miniLink{
  text-decoration: none;
  color: inherit;
  display:block;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.gp-miniLink:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 16px 30px rgba(15,23,42,.10);
}

/* CTA bar used on index.php (Quick start buttons) */
.gp-cta-bar{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

@media (max-width: 991px){
  .gp-cta-bar .btn{ width: 100%; }
}
/* =========================================================
   Shared: checklist + steps (About page + reusable)
========================================================= */

/* Checklist */
.gp-checklist{
  margin: 0;
  padding-left: 18px;
  display:grid;
  gap: 8px;
  color:#334155;
}
.gp-checklist li{ line-height: 1.55; }

/* Steps */
.gp-steps{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
.gp-step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(248,250,252,.90), rgba(241,245,249,.86));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.gp-step-dot{
  width: 30px; height: 30px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.12);
  border: 1px solid rgba(37,99,235,.20);
  color:#1e40af;
  font-weight: 1000;
  flex: 0 0 30px;
}
.gp-step-title{ font-weight: 1000; color:#0f172a; line-height: 1.1; }
.gp-step-sub{ color:#64748b; font-weight: 650; margin-top: 2px; }




/* =========================================================
   SCAM LOOKUP: SPOTLIGHT CARDS (component styles)
   Fixes: "High-risk scams trending now" looks plain/white
========================================================= */
.gp-spotHead{
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}
.gp-spotTitle h2{
  font-weight: 1000;
  letter-spacing: -.2px;
  color:#0f172a;
  margin-top: 8px;
}
.gp-spotSub{ color:#64748b; font-weight: 700; }

.gp-spotBadge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:#fff;
  background: linear-gradient(135deg, #dc2626, #f97316);
  box-shadow: 0 18px 36px rgba(220,38,38,.18);
}

.gp-spotCard{
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(15,23,42,.12);
  background:
    radial-gradient(900px 260px at 12% 10%, rgba(220,38,38,.10), transparent 60%),
    radial-gradient(900px 260px at 92% 10%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 22px 56px rgba(15,23,42,.10);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.gp-spotCard:hover{
  transform: translateY(-3px);
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 28px 70px rgba(15,23,42,.14);
}

.gp-spotTop{
  display:flex;
  align-items:center;
  gap: 12px;
}
.gp-spotIcon{
  width: 48px; height: 48px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(220,38,38,.10);
  border: 1px solid rgba(220,38,38,.18);
  color:#991b1b;
  flex: 0 0 48px;
}
.gp-spotMeta{ flex: 1 1 auto; }
.gp-spotName{ font-weight: 1000; color:#0f172a; letter-spacing: -.2px; }
.gp-spotType{ color:#64748b; font-weight: 800; font-size: .92rem; margin-top: 2px; }
.gp-spotTag{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: .82rem;
  background: rgba(2,6,23,.06);
  border: 1px solid rgba(15,23,42,.10);
  color:#0f172a;
}
.gp-spotDesc{ margin-top: 12px; color:#334155; font-weight: 700; }

.gp-spotSteps{
  margin-top: 12px;
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(2,6,23,.03);
  border: 1px solid rgba(15,23,42,.10);
}
.gp-spotStepsTitle{ font-weight: 1000; color:#0f172a; margin-bottom: 8px; }
.gp-spotSteps ul{
  margin: 0;
  padding-left: 18px;
  color:#475569;
  font-weight: 700;
}
.gp-spotSteps li{ margin: 6px 0; }

.gp-spotActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.gp-btn-soft{
  border: 1px solid rgba(37,99,235,.18);
  background: rgba(37,99,235,.06);
  color:#1e40af;
  font-weight: 900;
}
.gp-btn-soft:hover{ background: rgba(37,99,235,.10); }


/* =========================================================
   TRAINING PAGE: TOP STRIP + HABITS + MODULE GRID
   Fixes: training.php middle section unstyled / left-justified text
========================================================= */

/* TOP STRIP */
.gp-top-strip{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.gp-strip-card{
  border-radius: 22px;
  padding: 16px;
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 18px 44px rgba(15,23,42,.12);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.gp-strip-left{
  display:flex;
  gap: 12px;
  align-items:center;
  min-width: 0;
}

.gp-strip-ic{
  width: 46px; height: 46px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 46px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(2,6,23,.04);
  color:#0f172a;
}

.gp-strip-title{
  font-weight: 1000;
  color:#0f172a;
  letter-spacing: -.2px;
}
.gp-strip-sub{
  color:#64748b;
  font-weight: 750;
  margin-top: 2px;
  line-height: 1.35;
}

.gp-strip-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.gp-strip-warn{
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(245,158,11,.16), transparent 60%),
    linear-gradient(180deg, #ffffff, #fff7ed);
  border-color: rgba(245,158,11,.22);
}
.gp-strip-warn .gp-strip-ic{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.22);
  color:#92400e;
}

.gp-strip-ok{
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, #ffffff, #f0fdf4);
  border-color: rgba(34,197,94,.20);
}
.gp-strip-ok .gp-strip-ic{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.22);
  color:#065f46;
}

.gp-strip-path{
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(37,99,235,.14), transparent 60%),
    linear-gradient(180deg, #ffffff, #eef2ff);
  border-color: rgba(37,99,235,.18);
}
.gp-strip-path .gp-strip-ic{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.20);
  color:#1e40af;
}

/* HABITS */
.gp-habits{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.gp-habit{
  border-radius: 22px;
  padding: 16px;
  border: 1px solid rgba(15,23,42,.14);
  background: linear-gradient(180deg, #d1d5db, #c7cdd6);
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.gp-habit-ic{
  width: 46px; height: 46px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 46px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color:#1e40af;
  box-shadow: 0 10px 24px rgba(37,99,235,.10);
}

.gp-habit-title{
  font-weight: 1000;
  color:#0f172a;
  letter-spacing: -.2px;
}
.gp-habit-sub{
  color:#475569;
  font-weight: 750;
  margin-top: 2px;
  line-height: 1.35;
}

/* TRAINING MODULE GRID */
.training-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.training-card{
  position: relative;
  overflow:hidden;
  border-radius: 24px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(15,23,42,.14);
  background: linear-gradient(180deg, #d1d5db, #c7cdd6);
  box-shadow: 0 16px 44px rgba(15,23,42,.14);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.training-card:hover{
  transform: translateY(-6px);
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 22px 64px rgba(15,23,42,.18);
}

/* tone glow overlay */
.training-card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.9;
  pointer-events:none;
}
.training-card.gp-tone-blue::before{    background: radial-gradient(900px 260px at 12% 0%, rgba(37,99,235,.12), transparent 60%); }
.training-card.gp-tone-teal::before{    background: radial-gradient(900px 260px at 12% 0%, rgba(20,184,166,.14), transparent 60%); }
.training-card.gp-tone-purple::before{  background: radial-gradient(900px 260px at 12% 0%, rgba(139,92,246,.14), transparent 60%); }
.training-card.gp-tone-indigo::before{  background: radial-gradient(900px 260px at 12% 0%, rgba(99,102,241,.14), transparent 60%); }
.training-card.gp-tone-amber::before{   background: radial-gradient(900px 260px at 12% 0%, rgba(245,158,11,.16), transparent 60%); }
.training-card.gp-tone-orange::before{  background: radial-gradient(900px 260px at 12% 0%, rgba(249,115,22,.16), transparent 60%); }
.training-card.gp-tone-rose::before{    background: radial-gradient(900px 260px at 12% 0%, rgba(244,63,94,.14), transparent 60%); }
.training-card.gp-tone-emerald::before{ background: radial-gradient(900px 260px at 12% 0%, rgba(16,185,129,.14), transparent 60%); }
.training-card.gp-tone-slate::before{   background: radial-gradient(900px 260px at 12% 0%, rgba(100,116,139,.14), transparent 60%); }
.training-card.gp-tone-cyan::before{    background: radial-gradient(900px 260px at 12% 0%, rgba(34,211,238,.16), transparent 60%); }

.training-top,
.training-footer{
  position: relative;
  z-index: 1;
}

.training-top{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 16px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.18);
}

.icon-badge{
  width: 54px; height: 54px;
  border-radius: 20px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
  flex: 0 0 54px;
  color:#0f172a;
  font-size: 1.25rem;
}

.training-tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.06);
  border: 1px solid rgba(15,23,42,.10);
  color:#0f172a;
  font-weight: 1000;
  font-size: .82rem;
  margin-bottom: 8px;
}

.training-title{
  margin: 0;
  font-weight: 1000;
  color:#0f172a;
  letter-spacing: -.2px;
}

.training-sub{
  margin-top: 4px;
  color:#475569;
  font-weight: 750;
  line-height: 1.35;
}

.training-footer{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 14px 16px;
}

.training-cta{
  font-weight: 1000;
  color:#0f172a;
}

.training-arrow{
  width: 40px; height: 40px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(2,6,23,.06);
  border: 1px solid rgba(15,23,42,.10);
  color:#0f172a;
}




/* Mobile */
@media (max-width: 991px){
  
  .gp-stat-grid{ grid-template-columns: 1fr; }
  .training-grid{ grid-template-columns: 1fr; }
  .gp-strip-actions .btn{ width: 100%; }
  /* training page middle section responsiveness */
  .gp-top-strip{ grid-template-columns: 1fr; }
  .gp-habits{ grid-template-columns: 1fr 1fr; }

  /* what_to_do responsiveness */
  .gp-top-callouts{ grid-template-columns: 1fr 1fr; }
  .gp-section-head{ flex-direction: column; align-items:flex-start; }
  .gp-legal-grid{ grid-template-columns: 1fr; }
  .gp-quick-grid{ grid-template-columns: 1fr; }
  .gp-grid{ grid-template-columns: 1fr; }

  /* scam_lookup responsiveness */
  .gp-filterGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  .gp-bottom-cta{ flex-direction: column; align-items: stretch; }
  .gp-bottom-actions .btn{ width: 100%; }
}
@media (max-width: 576px){
  .gp-habits{ grid-template-columns: 1fr; }
  .gp-top-callouts{ grid-template-columns: 1fr; }
}