/* The iGaming Playbook leadmagnets in the approved iGaming Traffic Program world. */
:root {
  --bg: #f5f4f2;
  --surface: #fff;
  --surface2: #f7f9fc;
  --elevated: #f7f9fc;
  --border: #dce3ea;
  --border2: #dce3ea;
  --accent: #155eef;
  --accent-dim: #104ac3;
  --green: #155eef;
  --green-dim: #104ac3;
  --green-glow: rgba(21, 94, 239, .15);
  --green-soft: #eaf2ff;
  --text: #0b0f16;
  --text-primary: #0b0f16;
  --text-body: #344054;
  --text-secondary: #475467;
  --text-desc: #667085;
  --muted: #667085;
  --muted2: #98a2b3;
  --destructive: #b42318;
  --danger: #b42318;
  --error: #b42318;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
}
body::after { display: none !important; }
::selection { background: #c7deff; color: #0b0f16; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #bdc8d6; border-radius: 8px; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
}
button, input, select, textarea { font-family: inherit; }

/* The logo artwork remains intact; its transparent lettering becomes ink. */
.nav-logo img, .logo-icon { filter: brightness(0) !important; }
nav, header {
  background: rgba(245, 244, 242, .97) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.nav-logo, .logo, .logo-text { color: var(--text) !important; }
.nav-links a, .header-tag { color: #475467 !important; }
.nav-links a:hover { color: var(--accent) !important; }

h1, h2, h3, .hero-title, .section-title, .page-title, .cta-headline,
.module-title, .who-title, .founder-name, .price-amount {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: 1.04 !important;
  text-wrap: balance;
}
h1, .hero-title { letter-spacing: -.04em !important; }
.thesis, .hero-body, .page-sub, .section-body, .prose {
  color: #344054;
  line-height: 1.72;
}
.thesis, .hero-body { font-size: clamp(16px, 1.5vw, 19px); }
.prose { font-size: 16px; max-width: 75ch; }
.prose p, .prose li { color: #344054; }
.prose strong, .thesis strong { color: var(--text); font-weight: 750; }
a { text-underline-offset: 3px; }

/* Editorial dividers replace glowing, nested dark cards. */
.sec-head { margin-top: 72px; margin-bottom: 25px; }
.sec-head .idx, .section-label, .page-eyebrow, .header-tag {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
}
.sec-head .idx, .page-eyebrow { color: var(--accent); }
.sec-head h2 { font-size: clamp(24px, 3.2vw, 32px) !important; }
.sec-head .rule { height: 1px; background: var(--border); }
.stat-row {
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  gap: 0 !important;
}
.stat {
  background: transparent !important;
  border-right: 1px solid var(--border) !important;
  padding: 18px 20px !important;
}
.stat:last-child { border-right: 0 !important; }
.stat .n { color: var(--accent); font-weight: 850; text-shadow: none !important; }
.stat .l { color: #667085; line-height: 1.4; }
.reason-grid, .approach-grid { gap: 0 26px !important; }
.reason, .approach {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  padding: 19px 0 22px !important;
}
.reason p, .approach p { color: #344054; }
.reason .n, .approach .an { font-weight: 750; }
.worked-card, .screenshot, .cmp-table, .form-card,
.module-card, .who-card, .dossier-tile, .acct-card {
  background: #fff;
  border-color: var(--border);
  box-shadow: none;
}
.screenshot { border-width: 1px !important; }
.screenshot .ss-cap {
  background: #eaf2ff !important;
  color: #155eef !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 750;
}
.screenshot .ss-cap .dot { box-shadow: none !important; }
.screenshot img { background: #fff; }
.screenshot .ss-note { color: #667085; }
.callout, .prompt, .note {
  background: #eaf2ff !important;
  border-left: 1px solid #155eef !important;
  box-shadow: none !important;
}
.callout.risk, .fail { border-left-color: #b42318 !important; }
.fail { background: #fff !important; border-width: 1px !important; }
.p-step .node { border-width: 1px !important; }
.p-step .content { border-width: 1px !important; background: #fff !important; }
.tool-chip, .tag, .lb-chip {
  background: #eaf2ff !important;
  border-color: #c7dafa !important;
  color: #155eef !important;
}
.cmp-table, .cmp-row, .cmp-row .cell, .data-table, .bench-table {
  border-color: var(--border) !important;
}
.cmp-row.head, .data-table th, .bench-table .head { background: #eaf2ff !important; }
.card { background: #fff !important; border-color: var(--border) !important; box-shadow: none !important; }
.card-thumb video { opacity: 1 !important; }
.card-num, .card-star {
  background: rgba(11, 15, 22, .84) !important;
  border-color: rgba(255, 255, 255, .65) !important;
  color: #fff !important;
}
.card-star.starred { background: #155eef !important; border-color: #fff !important; }
.card:hover { border-color: #155eef !important; box-shadow: 0 0 0 1px #155eef !important; }

/* Controls stay bold and practical, as in the course portal. */
.nav-cta, .btn-primary, .cta .btn, .cta-btn, .btn-submit {
  background: #155eef !important;
  border-color: #155eef !important;
  color: #fff !important;
  font-family: Inter, ui-sans-serif, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  box-shadow: none !important;
}
.nav-cta:hover, .btn-primary:hover, .cta .btn:hover, .cta-btn:hover, .btn-submit:hover {
  background: #104ac3 !important;
  border-color: #104ac3 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-ghost, .copy-btn { color: #155eef !important; border-color: var(--border) !important; }
.copy-btn:hover { border-color: #155eef !important; }
input, select, textarea {
  background: #fff !important;
  border-color: #bdc8d6 !important;
  color: #0b0f16 !important;
  font-weight: 400 !important;
}
input::placeholder, textarea::placeholder { color: #667085 !important; }
input:focus, select:focus, textarea:focus {
  border-color: #155eef !important;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, .12) !important;
}
select option { background: #fff !important; color: #0b0f16 !important; }
.form-card { border: 1px solid var(--border); }
.form-section, .submit-section { border-color: var(--border); }
.submit-section { background: #f7f9fc !important; }

/* One dark conversion moment gives the light reading pages a clear finish. */
.cta, .cta-banner {
  background: #12243d !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f2f6fa !important;
}
.cta h2, .cta h3, .cta .cta-headline, .cta-banner .cta-headline {
  color: #fff !important;
}
.cta p, .cta .sub, .cta .desc, .cta-banner p { color: #dce6f5 !important; }
.cta .k, .cta .label { color: #9fc4ff !important; }
.cta em, .cta-banner em { color: #9fc4ff !important; }

@media (max-width: 700px) {
  .header-tag { display: none !important; }
  .sec-head h2 { white-space: normal !important; min-width: 0; }
  .sec-head .rule { display: none !important; }
  .stat { padding: 14px 10px !important; }
  .stat .n { font-size: 22px !important; }
  .sec-head { margin-top: 57px; }
  .reason-grid, .approach-grid { gap: 0 !important; }
  .nav-logo img, .logo-icon { width: 180px !important; }
  .nav-inner { padding-inline: 16px !important; gap: 10px !important; }
  .nav-inner .nav-logo { position: static !important; transform: none !important; margin: 0 !important; }
  .nav-inner .nav-logo img { width: min(42vw, 160px) !important; }
  .nav-inner > .nav-cta { padding: 8px 12px !important; font-size: 13px !important; }
  .form-section, .submit-section { padding-inline: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after { animation: none !important; }
}