/* =========================================================
   EdgeAI — Static HTML Stylesheet
   Core styles for typography, layout, components, and theming
   ========================================================= */

/* ─── CSS Variables ──────────────────────────────────────── */
:root {
  --font-serif:      'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans:       'Inter', system-ui, -apple-system, sans-serif;

  --color-bg:        #090909;
  --color-surface:   #111111;
  --color-card:      #161616;
  --color-border:    #1e1e1e;
  --color-border-lg: #2a2a2a;
  --color-text:      #f2f2f2;
  --color-muted:     #888888;
  --color-faint:     #888888;
  --color-accent:        #d4af37;
  --color-accent-bright: #f5c518;
}

/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  overflow-x: hidden;
  margin: 0;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

/* ─── Typography Helpers ────────────────────────────────────── */
.font-serif { font-family: var(--font-serif); }
.font-sans  { font-family: var(--font-sans); }

/* ─── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #090909; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* ─── Selection ─────────────────────────────────────────────── */
::selection { background: rgba(212,175,55,0.25); color: #f2f2f2; }

/* ─── Animations ─────────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-right {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.animate-fade-up    { animation: fade-up    0.8s cubic-bezier(0.16,1,0.3,1) both; }
.animate-fade-in    { animation: fade-in    0.7s ease both; }
.animate-slide-right{ animation: slide-right 0.7s cubic-bezier(0.16,1,0.3,1) both; }

/* ─── Utility: link hover underline ─────────────────────────── */
.link-hover { position: relative; text-decoration: none; }
.link-hover::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.25s ease;
}
.link-hover:hover::after { width: 100%; }

/* ─── Utility: image overlay tint ───────────────────────────── */
.img-overlay { position: relative; overflow: hidden; }
.img-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

/* ─── Utility: card hover lift ──────────────────────────────── */
.card-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}

/* ─── Layout container ──────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Responsive grid helpers ───────────────────────────────── */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1024px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ─── Navbar ────────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(9,9,9,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #1e1e1e;
}

.navbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-logo {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f2f2f2;
  text-decoration: none;
}
.navbar-logo .accent { color: #d4af37; }

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0; padding: 0;
}

.navbar-nav a,
.navbar-nav button {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888888;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
  padding: 0;
  font-family: var(--font-sans);
}
.navbar-nav a:hover,
.navbar-nav button:hover { color: #f2f2f2; }

/* Dropdown */
.nav-dropdown { position: relative; }
.dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 16px;
  z-index: 100;
}
.nav-dropdown:hover .dropdown-panel { display: block; }
.dropdown-inner {
  background-color: #111111;
  border: 1px solid #1e1e1e;
  border-radius: 4px;
  min-width: 160px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  overflow: hidden;
}
.dropdown-inner a {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888888;
  text-decoration: none;
  padding: 12px 20px;
  border-bottom: 1px solid #1e1e1e;
  transition: color 0.2s, background-color 0.2s;
}
.dropdown-inner a:last-child { border-bottom: none; }
.dropdown-inner a:hover { color: #f2f2f2; background-color: #1a1a1a; }

/* Subscribe button */
.btn-subscribe {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f2f2f2;
  text-decoration: none;
  border: 1px solid #2a2a2a;
  padding: 8px 20px;
  border-radius: 2px;
  transition: all 0.2s;
  background-color: transparent;
}
.btn-subscribe:hover {
  background-color: #f2f2f2;
  color: #090909;
  border-color: #f2f2f2;
}

/* Hamburger icons — close starts hidden, JS toggles both */
.icon-close { display: none; }

/* Hamburger */
.navbar-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #f2f2f2;
  padding: 4px;
}

/* Mobile drawer */
.navbar-mobile {
  display: none;
  background-color: rgba(9,9,9,0.98);
  border-top: 1px solid #1e1e1e;
  padding: 24px;
}
.navbar-mobile.open { display: block; }
.navbar-mobile nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.navbar-mobile a {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888888;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid #161616;
  transition: color 0.2s;
}
.navbar-mobile a:hover { color: #f2f2f2; }
.navbar-mobile .btn-subscribe-mobile {
  margin-top: 16px;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: #d4af37;
  color: #090909;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .navbar-nav { display: none; }
  .btn-subscribe { display: none; }
  .navbar-hamburger { display: flex; align-items: center; justify-content: center; }
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background-color: #d4af37;
  color: #090909;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 36px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background-color 0.2s;
}
.btn-primary:hover { background-color: #e6c84a; }

.btn-ghost {
  display: inline-block;
  color: #888888;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}
.btn-ghost:hover { color: #f2f2f2; }

.btn-outline {
  display: inline-block;
  color: #888888;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 16px 24px;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  transition: all 0.2s;
}
.btn-outline:hover { color: #f2f2f2; border-color: #444444; }

/* ─── Section headers ────────────────────────────────────────── */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  row-gap: 12px;
  margin-bottom: 48px;
}
.section-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.section-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  color: #f2f2f2;
  margin: 0;
}
.section-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888888;
  text-decoration: none;
  transition: color 0.2s;
}
.section-link:hover { color: #f2f2f2; }

/* ─── Article card ───────────────────────────────────────────── */
.article-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background-color: #111111;
  border: 1px solid #1e1e1e;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.article-card:hover {
  border-color: #2a2a2a;
  transform: translateY(-2px);
}
.article-card-img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.article-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.article-card-category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d4af37;
  margin-bottom: 10px;
  display: block;
}
.article-card-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #f2f2f2;
  margin-bottom: 10px;
  flex: 1;
}
.article-card-excerpt {
  font-size: 13px;
  color: #888888;
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #1a1a1a;
}
.author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.author-meta {
  font-size: 12px;
  color: #888888;
}

/* ─── Newsletter form ────────────────────────────────────────── */
.newsletter-form {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: 0 auto;
}
.newsletter-input {
  flex: 1;
  background-color: #111111;
  border: 1px solid #222222;
  border-right: none;
  border-radius: 2px 0 0 2px;
  padding: 14px 20px;
  font-size: 14px;
  color: #f2f2f2;
  outline: none;
  font-family: var(--font-sans);
  transition: border-color 0.2s;
}
.newsletter-input:focus { border-color: #444444; }
.newsletter-input::placeholder { color: #888888; }
.newsletter-btn {
  background-color: #d4af37;
  color: #090909;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  padding: 14px 28px;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
  font-family: var(--font-sans);
  white-space: nowrap;
  transition: background-color 0.2s;
}
.newsletter-btn:hover { background-color: #e6c84a; }

/* ─── Subscribe modal ────────────────────────────────────────── */

/* Both elements start hidden; JS removes display:none then adds .visible */
.modal-backdrop,
.modal-overlay { display: none; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.modal-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}
.modal-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 28px));
  z-index: 201;
  width: 100%;
  max-width: 540px;
  padding: 0 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.modal-panel.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.modal-inner {
  background-color: #0f0f0f;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  padding: 48px 44px 40px;
  position: relative;
  overflow: hidden;
}
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: #888888;
  padding: 4px;
  line-height: 0;
  transition: color 0.2s;
}
.modal-close:hover { color: #f2f2f2; }

/* ─── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background-color: #060606;
  border-top: 1px solid #161616;
  padding: 64px 24px 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
.footer-logo {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f2f2f2;
  text-decoration: none;
  display: block;
  margin-bottom: 16px;
}
.footer-logo .accent { color: #d4af37; }
.footer-desc {
  font-size: 13px;
  color: #888888;
  line-height: 1.7;
  max-width: 260px;
  margin-bottom: 24px;
}
.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social a {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background-color: #111111;
  border: 1px solid #1e1e1e;
  border-radius: 4px;
  color: #888888;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s;
}
.footer-social a:hover { border-color: #333333; color: #f2f2f2; }
.footer-col h4 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888888;
  margin-bottom: 16px;
  margin-top: 0;
}
.footer-col nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  font-size: 13px;
  color: #888888;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col a:hover { color: #f2f2f2; }
.footer-bottom {
  border-top: 1px solid #161616;
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 8px;
}
.footer-copy, .footer-credit { font-size: 12px; color: #888888; }
.footer-credit a { color: #888888; text-decoration: none; transition: color 0.2s; }
.footer-credit a:hover { color: #f2f2f2; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a {
  font-size: 12px;
  color: #888888;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover { color: #f2f2f2; }

/* ─── Article page ───────────────────────────────────────────── */
.article-toc {
  position: sticky;
  top: 80px;
  align-self: start;
  background-color: #111111;
  border: 1px solid #1e1e1e;
  border-radius: 6px;
  padding: 24px;
}
.article-toc h4 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888888;
  margin: 0 0 16px;
}
.article-toc a {
  display: block;
  font-size: 13px;
  color: #888888;
  text-decoration: none;
  padding: 6px 0;
  border-left: 2px solid transparent;
  padding-left: 12px;
  transition: all 0.2s;
}
.article-toc a:hover,
.article-toc a.active {
  color: #f2f2f2;
  border-left-color: #d4af37;
}
.prose {
  font-size: 17px;
  line-height: 1.8;
  color: #cccccc;
}
.prose h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: #f2f2f2;
  margin: 48px 0 20px;
  padding-top: 8px;
}
.prose p { margin: 0 0 24px; }
.prose blockquote {
  border-left: 3px solid #d4af37;
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  color: #aaaaaa;
  font-style: italic;
  font-size: 18px;
  line-height: 1.7;
}

/* ─── Podcast episode cards ──────────────────────────────────── */
.podcast-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background-color: #111111;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  padding: 20px;
  gap: 16px;
  transition: border-color 0.2s, transform 0.2s;
}
.podcast-card:hover {
  border-color: #2a2a2a;
  transform: translateY(-2px);
}

/* ─── Contributor cards ──────────────────────────────────────── */
.contributor-card {
  background-color: #111111;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.2s;
}
.contributor-card:hover { border-color: #2a2a2a; }
.contributor-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #1e1e1e;
  margin-bottom: 16px;
}

/* ─── Tag badge ──────────────────────────────────────────────── */
.tag-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 8px;
  border-radius: 2px;
}

/* ─── Promo / CTA banner ─────────────────────────────────────── */
.promo-banner {
  position: relative;
  overflow: hidden;
  background-color: #0d0f14;
  border-top: 1px solid #161616;
}
.promo-banner-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(13,15,20,0.98) 0%,
    rgba(30,20,60,0.95) 50%,
    rgba(13,15,20,0.98) 100%);
  pointer-events: none;
}
.promo-content {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}
@media (max-width: 1024px) {
  .promo-content { grid-template-columns: 1fr; }
}

/* ─── Category strip ─────────────────────────────────────────── */
.category-strip {
  background-color: #090909;
  border-top: 1px solid #1e1e1e;
  border-bottom: 1px solid #1e1e1e;
  padding: 40px 24px;
}
.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 20px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.category-card svg {
  width: 32px; height: 32px;
  stroke: #ffffff;
  stroke-width: 1.5;
  fill: none;
}
.category-card span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
}

/* ─── Responsive helpers ─────────────────────────────────────── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}


/* CSS Variables for color system */
:root {
  --bg-dark: #090909;
  --bg-darker: #0d0f14;
  --bg-card-light: #0f0f0f;
  --bg-subtle: #161616;
  --border-subtle: #1a1a1a;
  --border-light: #222222;
  --border-hover: #2a2a2a;
  --text-body: #cccccc;
  --text-secondary: #aaaaaa;
  --text-muted-dark: #666666;
}

/* ─── FLEX & LAYOUT UTILITIES ──────────────────────────────────────────── */
.flex-center { display: flex; align-items: center; }
.flex-center-gap-10 { display: flex; align-items: center; gap: 10px; }
.flex-center-gap-12 { display: flex; align-items: center; gap: 12px; }
.flex-center-gap-16 { display: flex; align-items: center; gap: 16px; }
.flex-center-gap-20 { display: flex; align-items: center; gap: 20px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-between-gap-16 { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.flex-column { display: flex; flex-direction: column; }
.flex-column-gap-10 { display: flex; flex-direction: column; gap: 10px; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* ─── GRID UTILITIES ─────────────────────────────────────────────────── */
.grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4col { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ─── TEXT UTILITIES ───────────────────────────────────────────────────── */
.text-xs-secondary { font-size: 12px; color: var(--color-muted); text-decoration: none; }
.text-sm-secondary { font-size: 12px; color: var(--color-muted); }
.text-sm-muted { font-size: 11px; color: #888888; }
.text-sm-accent { font-size: 12px; color: var(--color-accent); transition: color 0.2s; }
.text-sm-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #888888; }
.text-sm-value { font-size: 12px; color: var(--color-muted); }
.text-xs-info { font-size: 10px; color: #888888; }
.text-sm-italic { font-size: 15px; color: var(--color-muted); line-height: 1.75; font-style: italic; }
.text-meta { font-size: 13px; color: var(--color-muted); line-height: 1.6; }

/* ─── IMAGE UTILITIES ──────────────────────────────────────────────────── */
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.img-cover-block { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-28 { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #0f0f0f; object-fit: cover; flex-shrink: 0; }
.avatar-32 { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid #2a2a2a; }
.avatar-40 { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-56 { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #1e1e1e; margin: 0 auto 16px; }
.avatar-80 { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #1e1e1e; margin-bottom: 16px; }

/* ─── MODAL DIALOG STYLES ──────────────────────────────────────────────── */
.modal-gradient-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(80,40,160,0.18) 0%, transparent 70%); pointer-events: none; }
.modal-gold-bar { width: 36px; height: 3px; background-color: var(--color-accent); margin-bottom: 24px; position: relative; }
.modal-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; position: relative; }
.modal-headline { font-family: var(--font-serif); font-size: clamp(26px, 4vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text); margin-bottom: 16px; position: relative; }
.modal-body-text { font-size: 15px; color: var(--color-muted); line-height: 1.75; margin-bottom: 32px; position: relative; }
.modal-cta-group { display: flex; flex-direction: column; gap: 10px; position: relative; }
.modal-social-proof { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; position: relative; }
.modal-avatar-stack { display: flex; }
.modal-avatar { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #0f0f0f; object-fit: cover; flex-shrink: 0; }
.modal-avatar:not(:first-child) { margin-left: -8px; }
.modal-social-text { font-size: 12px; color: #888888; line-height: 1.4; }
.modal-social-highlight { color: var(--text-secondary); font-weight: 600; }

/* ─── BUTTON VARIANTS ──────────────────────────────────────────────────── */
.btn-secondary { font-size: 12px; color: var(--color-muted); padding: 8px; text-align: center; font-family: var(--font-sans); letter-spacing: 0.04em; transition: color 0.2s; }
.btn-secondary:hover { color: var(--text-secondary); }
.btn-outline-small { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); text-decoration: none; padding: 9px 16px; border: 1px solid #222222; border-radius: 2px; transition: all 0.2s; }
.btn-outline-small:hover { border-color: #444444; color: var(--color-text); }
.btn-link-hover { font-size: 12px; color: var(--color-muted); text-decoration: none; transition: color 0.2s; }
.btn-link-hover:hover { color: var(--color-text); }

/* ─── NAVIGATION STYLES ────────────────────────────────────────────────── */
.navbar-flex-right { display: flex; align-items: center; gap: 12px; }
.mobile-nav-heading { font-size: 15px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text); padding: 12px 0 8px; border-bottom: 1px solid #161616; }
.mobile-nav-link { padding-left: 16px; font-size: 13px; color: #888888; border-bottom: 1px solid #111111; }
.mobile-nav-link.last { border-bottom: 1px solid #161616; }
.dropdown-icon-svg { transition: transform 0.2s; }

/* ─── HERO SECTION STYLES ──────────────────────────────────────────────── */
.hero-container { max-width: 1280px; margin: 0 auto; position: relative; }
.hero-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 20px; }
.hero-title { font-family: var(--font-serif); font-size: clamp(36px, 6vw, 72px); font-weight: 700; color: var(--color-text); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 24px; }
.hero-title-accent { color: var(--color-accent); font-style: italic; }
.hero-subtitle { font-size: 17px; color: var(--color-muted); line-height: 1.7; margin-bottom: 48px; }
.hero-stat { text-align: center; }
.hero-stat-value { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--color-text); line-height: 1; margin-bottom: 6px; }
.hero-stat-label { font-size: 12px; color: var(--color-muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* ─── CARD STYLES ──────────────────────────────────────────────────────── */
.article-card-img { width: 100%; height: 200px; object-fit: cover; }
.article-card-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); background: #1a1a1a; border: 1px solid #222222; padding: 4px 10px; border-radius: 2px; margin-bottom: 12px; display: inline-block; }
.article-card-title-small { font-family: var(--font-serif); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--color-text); margin-bottom: 12px; }
.card-divider { border-top: 1px solid #1e1e1e; }
.card-meta-row { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid #161616; }
.card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #161616; }
.card-footer-label { font-size: 12px; font-weight: 600; color: var(--color-muted); transition: color 0.15s; }
.card-footer-price { font-size: 12px; color: #888888; }
.card-glow { position: relative; overflow: hidden; }
.card-glow-bg { position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; background: radial-gradient(ellipse, rgba(124,58,237,0.09) 0%, transparent 70%); pointer-events: none; }
.card-overlay { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background-color: var(--color-accent); color: #090909; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 16px; border-radius: 20px; white-space: nowrap; }
.card-icon-box { width: 56px; height: 56px; background-color: #1a1a1a; border-radius: 12px; border: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card-icon { width: 36px; height: 36px; object-fit: contain; }

/* ─── FORM STYLES ──────────────────────────────────────────────────────── */
.form-group { display: flex; gap: 10px; }
.form-input-base { background: #111111; border: 1px solid #1e1e1e; color: var(--color-text); padding: 12px; border-radius: 4px; font-family: var(--font-sans); }
.form-input-focus { border: 1px solid #1e1e1e; }

/* ─── FEATURE/BENEFIT GRID ─────────────────────────────────────────────── */
.benefit-card { background-color: #0f0f0f; padding: 40px 36px; }
.benefit-icon-box { margin-bottom: 20px; }
.benefit-title { font-size: 17px; font-weight: 700; color: var(--color-text); margin-bottom: 12px; letter-spacing: -0.01em; }
.benefit-description { font-size: 14px; color: var(--color-muted); line-height: 1.75; }

/* ─── TESTIMONIAL STYLES ───────────────────────────────────────────────── */
.testimonial-card { background-color: #0f0f0f; border: 1px solid #1e1e1e; border-radius: 6px; padding: 36px; }
.testimonial-quote-mark { font-family: var(--font-serif); font-size: 48px; color: var(--color-accent); line-height: 0.8; margin-bottom: 20px; opacity: 0.6; }
.testimonial-text { font-size: 15px; color: var(--text-body); line-height: 1.75; margin-bottom: 28px; font-style: italic; }
.testimonial-author { font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.testimonial-title { font-size: 12px; color: var(--color-muted); }

/* ─── ACCORDION / TOGGLE STYLES ────────────────────────────────────────── */
.accordion-btn { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0; text-align: left; }
.accordion-label { font-size: 16px; font-weight: 600; color: var(--color-text); line-height: 1.4; }
.accordion-icon { flex-shrink: 0; transition: transform 0.2s; color: var(--color-muted); }
.accordion-content { font-size: 15px; color: var(--color-muted); line-height: 1.75; margin-top: 16px; }

/* ─── PLAN CARD STYLES ─────────────────────────────────────────────────── */
.plan-card { background-color: #0f0f0f; border: 1px solid #1e1e1e; border-radius: 8px; padding: 40px; position: relative; }
.plan-card-highlight { background-color: rgba(212,175,55,0.04); border: 1px solid rgba(212,175,55,0.3); }
.plan-price-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 16px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.plan-price-value { font-family: var(--font-serif); font-size: 48px; font-weight: 700; color: var(--color-text); line-height: 1; }
.plan-price-period { font-size: 13px; color: var(--color-muted); }
.plan-description { font-size: 14px; color: var(--color-muted); margin-bottom: 32px; }
.plan-feature-list { display: flex; flex-direction: column; gap: 12px; }
.plan-feature { display: flex; align-items: flex-start; gap: 10px; }
.plan-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background-color: rgba(212,175,55,0.15); flex-shrink: 0; }
.plan-feature-text { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

/* ─── SECTION HEADER STYLES ────────────────────────────────────────────── */
.section-header-divider { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 20px; }
.section-header-title { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text); margin-bottom: 12px; }
.section-header-subtitle { font-size: 16px; color: var(--color-muted); }

/* ─── PODCAST STYLES ───────────────────────────────────────────────────── */
.podcast-badge { background-color: var(--color-accent); color: #090909; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; position: relative; }
.podcast-play-btn { width: 44px; height: 44px; border-radius: 50%; background: #ff6b00; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.podcast-play-icon { width: 14px; height: 14px; }
.podcast-episode-meta { font-size: 12px; color: #888888; margin: 0; }
.podcast-list-item { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid #1a1a1a; }
.podcast-thumbnail { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.podcast-title { font-size: 13px; font-weight: 600; color: var(--color-text); margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── FEATURED SECTION STYLES ──────────────────────────────────────────── */
.featured-badge { display: inline-block; background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%); color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 14px; border-radius: 3px; margin-bottom: 20px; }
.featured-title { font-family: var(--font-serif); font-size: 32px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-text); margin-bottom: 16px; }
.featured-excerpt { font-size: 15px; color: var(--color-muted); line-height: 1.7; margin-bottom: 24px; }

/* ─── TAG/LABEL STYLES ─────────────────────────────────────────────────── */
.tag-small { font-size: 10px; color: #888888; background-color: #161616; border: 1px solid #2a2a2a; padding: 2px 8px; border-radius: 2px; letter-spacing: 0.04em; }
.tag-badge-outline { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); border: 1px solid #222222; border-radius: 2px; padding: 4px 8px; }
.tag-category { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); background: #1a1a1a; border: 1px solid #222222; padding: 4px 10px; border-radius: 2px; margin-bottom: 12px; }

/* ─── SPACING UTILITIES ────────────────────────────────────────────────── */
.mt-0 { margin-top: 0; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-28 { gap: 28px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-48 { gap: 48px; }
.gap-64 { gap: 64px; }
.p-0 { padding: 0; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }
.p-28 { padding: 28px; }
.p-32 { padding: 32px; }
.p-36 { padding: 36px; }
.p-40 { padding: 40px; }
.pt-8 { padding-top: 8px; }
.pt-12 { padding-top: 12px; }
.pt-16 { padding-top: 16px; }
.pt-20 { padding-top: 20px; }
.pt-24 { padding-top: 24px; }
.pt-28 { padding-top: 28px; }
.pt-32 { padding-top: 32px; }
.pt-40 { padding-top: 40px; }
.pt-48 { padding-top: 48px; }
.pb-12 { padding-bottom: 12px; }
.pb-16 { padding-bottom: 16px; }
.pb-20 { padding-bottom: 20px; }
.pb-24 { padding-bottom: 24px; }
.pb-28 { padding-bottom: 28px; }
.pb-32 { padding-bottom: 32px; }
.pb-40 { padding-bottom: 40px; }
.pb-48 { padding-bottom: 48px; }
.pb-64 { padding-bottom: 64px; }
.pb-80 { padding-bottom: 80px; }
.px-24 { padding-left: 24px; padding-right: 24px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }
.py-28 { padding-top: 28px; padding-bottom: 28px; }
.py-32 { padding-top: 32px; padding-bottom: 32px; }
.py-40 { padding-top: 40px; padding-bottom: 40px; }
.py-48 { padding-top: 48px; padding-bottom: 48px; }
.py-56 { padding-top: 56px; padding-bottom: 56px; }
.py-64 { padding-top: 64px; padding-bottom: 64px; }
.py-72 { padding-top: 72px; padding-bottom: 72px; }
.py-80 { padding-top: 80px; padding-bottom: 80px; }
.py-96 { padding-top: 96px; padding-bottom: 96px; }

/* ─── BORDER UTILITIES ──────────────────────────────────────────────────── */
.border-top { border-top: 1px solid #1e1e1e; }
.border-bottom { border-bottom: 1px solid #1e1e1e; }
.border-left { border-left: 2px solid transparent; padding-left: 12px; }
.border-left-accent { border-left: 2px solid var(--color-accent); }
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-full { border-radius: 50%; }

/* ─── POSITION & DISPLAY ───────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-none { max-width: none; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.whitespace-nowrap { white-space: nowrap; }

/* ─── TRANSITION & ANIMATION ──────────────────────────────────────────── */
.transition-colors { transition: color 0.2s; }
.transition-bg { transition: background-color 0.2s; }
.transition-border { transition: border-color 0.2s; }
.transition-transform { transition: transform 0.2s; }
.transition-all { transition: all 0.2s; }
.transition-fast { transition: all 0.15s; }

/* ─── Additional Utility Classes for Remaining Patterns ─────────────────── */
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }
.p-36 { padding: 36px; }
.p-40-36 { padding: 40px 36px; }

/* Link hover styles */
.footer-link, .footer-social, .footer-heading { transition: color 0.2s; }
.footer-link:hover, .footer-social:hover { color: var(--color-accent); }

/* Article card hover */
.article-card-link { text-decoration: none; display: block; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; transition: border-color 0.2s; }
.article-card-link:hover { border-color: #7c3aed; }

/* Footer styles */
.footer-link { font-size: 12px; color: var(--color-muted); text-decoration: none; }
.footer-link:hover { color: var(--color-accent); }
.footer-heading { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); margin-bottom: 16px; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-social { color: var(--color-muted); font-size: 14px; text-decoration: none; }

/* Tag and badge styles */
.article-card-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); background: #1a1a1a; border: 1px solid #222222; padding: 4px 10px; border-radius: 2px; margin-bottom: 12px; }

/* Dividers */
.divider-vertical-32 { width: 1px; height: 32px; background: var(--color-border); }
.comment-reply { border-left: 2px solid var(--color-border); padding-left: 16px; margin-top: 16px; }

/* Responsive utility classes for remaining patterns */
.flex-column { display: flex; flex-direction: column; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }

/* Contributor card styles */
.contributor-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; border: 2px solid var(--color-border); }
.contributor-card { text-decoration: none; border: 1px solid var(--color-border); border-radius: 6px; padding: 24px; text-align: center; transition: border-color 0.2s; }
.contributor-card:hover { border-color: #7c3aed; }
.contributor-name { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.contributor-role { font-size: 12px; color: var(--color-muted); margin-bottom: 12px; }
.contributor-count { font-size: 13px; color: #aaaaaa; margin-bottom: 12px; }
.fw-semi { font-weight: 600; }

.img-thumb-60x48 { width:60px;height:48px;object-fit:cover;border-radius:4px;flex-shrink:0; }
.avatar-56-bordered { width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #1e1e1e; }
.divider-gold-40x3 { width:40px;height:3px;background-color:#d4af37;margin-bottom:24px; }
.divider-gold-36x3 { width:36px;height:3px;background-color:#d4af37;margin-bottom:24px;position:relative; }
.icon-circle-36-orange { width:36px;height:36px;border-radius:50%;background-color:#d97706;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.divider-gold-32x3 { width:32px;height:3px;background-color:#d4af37;margin-bottom:24px; }
.icon-svg-32 { width:32px;height:32px;stroke:#fff;stroke-width:1.5;fill:none; }
.avatar-22 { width:22px;height:22px; }
.img-fade-80 { width:100%;height:100%;object-fit:cover;opacity:0.8; }
.link-none { text-decoration:none; }
.card-img-wrapper-160-crop { position:relative;width:100%;height:160px;overflow:hidden; }
.card-img-wrapper-160 { position:relative;width:100%;height:160px;background-color:#1a1a1a; }
.tag-position-bottom-left { position:absolute;bottom:10px;left:10px;background-color:#e11d48;font-size:9px; }
.p-18-flex-column { padding:18px;flex:1;display:flex;flex-direction:column; }
.p-18 { padding:18px; }
.nav-item-mobile { padding-left:16px;font-size:13px;color:#888888;border-bottom:1px solid #111111; }
.container-center { max-width:1280px;margin:0 auto; }
.h-200 { height:200px; }
.h-180 { height:180px; }
.text-lg { font-size:16px; }
.text-clamp-2-lines { font-size:13px;font-weight:600;line-height:1.4;color:#cccccc;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.text-secondary-light { font-size:13px;color:#aaaaaa; }
.text-body-sm { font-size:14px;color:#888888;line-height:1.6; }
.text-author { font-size:12px;font-weight:600;color:#cccccc;margin:0 0 2px; }
.text-desc-small { font-size:12px;color:#888888;line-height:1.6;margin-bottom:14px; }
.btn-podcast-link { font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#888888;text-decoration:none;padding:7px 14px;border:1px solid #222222;border-radius:2px;transition:all 0.2s; }
.text-meta-compact { font-size:11px;color:#888888;margin:0; }
.text-xs-secondary-compact { font-size:11px;color:#888888; }
.tag-category-orange { font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#d97706;margin-bottom:8px;display:block; }
.tag-category-purple { font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#7c3aed;margin-bottom:10px;display:block; }
.tag-badge-muted { font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#888888;background-color:#1a1a1a;border:1px solid #222222;padding:4px 10px;border-radius:2px; }
.title-serif-18 { font-family:var(--font-serif);font-size:18px;font-weight:700;color:#f2f2f2;margin-bottom:8px; }
.title-serif-16-flex { font-family:var(--font-serif);font-size:16px;font-weight:700;line-height:1.35;color:#f2f2f2;margin-bottom:10px;flex:1; }
.title-serif-15 { font-family:var(--font-serif);font-size:15px;font-weight:700;line-height:1.35;color:#f2f2f2;margin-bottom:10px; }
.icon-circle-18-accent { display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background-color:rgba(212,175,55,0.15);flex-shrink:0; }
.grid-4-gap-24 { display:grid;grid-template-columns:repeat(4,1fr);gap:24px; }
.grid-4-gap-20 { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.grid-3-gap-28 { display:grid;grid-template-columns:repeat(3,1fr);gap:28px; }
.block-link { display:block;text-decoration:none; }
.tag-category-block { display:block;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#888888;margin-bottom:4px; }
.text-success { color:#059669; }



/* ─── Podcast-specific styles from inline conversions ─────────────────────── */
.pod-s25 { background-color:#111111;border:1px solid #1e1e1e;border-radius:12px;padding:40px;margin-bottom:24px;position:relative;overflow:hidden; }
.pod-s84 { background-color:#111111;border:1px solid #1e1e1e;border-radius:8px;overflow:hidden; }
.pod-s95 { background:#0d0f14;border-top:1px solid #1e1e1e;padding:80px 24px 40px; }
.pod-s93 { background:#d4af37;color:#090909;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:12px 20px;border:none;border-radius:2px;cursor:pointer;white-space:nowrap;transition:background 0.2s; }
.pod-s102 { border-top:1px solid #1e1e1e;padding-top:40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px; }
.pod-s65 { color:#888888; }
.pod-s99 { color:#888888;font-size:14px;text-decoration:none;transition:color 0.2s; }
.pod-s8 { color:#aaaaaa;font-weight:600; }
.pod-s22 { color:#d4af37; }
.pod-s5 { color:#d4af37;font-style:italic; }
.pod-s9 { display:block;text-align:center;padding:15px 24px; }
.pod-s10 { display:block;width:100%;background:none;border:none;cursor:pointer;font-size:12px;color:#888888;padding:8px;text-align:center;font-family:var(--font-sans);letter-spacing:0.04em;transition:color 0.2s; }
.pod-s78 { display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:center; }
.pod-s41 { display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center; }
.pod-s18 { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-bottom:80px; }
.pod-s58 { display:grid;grid-template-columns:80px 1fr auto;gap:24px;align-items:center;text-decoration:none;padding:28px 0;border-bottom:1px solid #1e1e1e;transition:background-color 0.15s; }
.pod-s33 { display:grid;grid-template-columns:repeat(4,1fr); }
.pod-s96 { display:grid;grid-template-columns:repeat(5,1fr);gap:40px;margin-bottom:60px; }
.pod-s72 { display:grid;grid-template-columns:repeat(6,1fr);gap:20px; }
.pod-s69 { display:inline-block;font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#888888;text-decoration:none;padding:14px 40px;border:1px solid #222222;border-radius:2px;transition:all 0.2s; }
.pod-s53 { display:inline-flex;align-items:center;gap:8px;background-color:#d97706;color:#fff;font-weight:700;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;padding:12px 24px;border-radius:2px;border:none;transition:background-color 0.2s; }
.pod-s54 { display:inline-flex;align-items:center;gap:8px;background-color:transparent;color:#888888;font-weight:600;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;padding:12px 24px;border-radius:2px;border:1px solid #222222;transition:all 0.2s; }
.pod-s12 { display:none; }
.pod-s113 { flex-center-gap-10margin-bottom:8px; }
.pod-s51 { flex:1; }
.pod-s92 { flex:1;background:#111111;border:1px solid #222222;color:#f2f2f2;font-family:var(--font-sans);font-size:14px;padding:12px 16px;border-radius:2px;outline:none; }
.pod-s114 { display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0;margin-left:auto; }
.pod-s112 { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;row-gap:16px;padding-top:40px;padding-bottom:32px;border-bottom:1px solid #1e1e1e;margin-bottom:0; }
.pod-s121 { flexgap:12px; }
.pod-s111 { flexgap:12px;flex-wrap:wrap; }
.pod-s119 { flexgap:16px;padding:20px 24px; }
.pod-s118 { flexgap:16px;padding:20px 24px;border-bottom:1px solid #1a1a1a; }
.pod-s122 { flexgap:20px; }
.pod-s115 { display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end; }
.pod-s109 { flexgap:8px;flex-wrap:wrap;margin-bottom:20px; }
.pod-s120 { flexgap:8px;max-width:440px;margin:0 auto; }
.pod-s97 { font-family:var(--font-serif);font-size:18px;font-weight:700;color:#f2f2f2;text-decoration:none;display:block;margin-bottom:12px; }
.pod-s28 { font-family:var(--font-serif);font-size:20px;font-weight:700;color:#f2f2f2;margin-bottom:8px;line-height:1.3; }
.pod-s40 { font-family:var(--font-serif);font-size:22px;font-weight:700;color:#f2f2f2; }
.pod-s35 { font-family:var(--font-serif);font-size:28px;font-weight:800;color:#f2f2f2;letter-spacing:-0.02em;line-height:1;margin-bottom:4px; }
.pod-s67 { font-family:var(--font-serif);font-size:clamp(14px,2vw,17px);font-weight:700;line-height:1.35;color:#cccccc;margin-bottom:10px; }
.pod-s63 { font-family:var(--font-serif);font-size:clamp(14px,2vw,17px);font-weight:700;line-height:1.35;color:#cccccc;margin-bottom:10px;transition:color 0.15s; }
.pod-s48 { font-family:var(--font-serif);font-size:clamp(22px,3vw,32px);font-weight:800;line-height:1.2;letter-spacing:-0.01em;color:#f2f2f2;margin-bottom:16px; }
.pod-s4 { font-family:var(--font-serif);font-size:clamp(26px,4vw,34px);font-weight:800;line-height:1.1;letter-spacing:-0.02em;color:#f2f2f2;margin-bottom:16px;position:relative; }
.pod-s90 { font-family:var(--font-serif);font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.1;letter-spacing:-0.02em;color:#f2f2f2;margin-bottom:16px; }
.pod-s80 { font-family:var(--font-serif);font-size:clamp(28px,4vw,48px);font-weight:800;line-height:1.1;letter-spacing:-0.02em;color:#f2f2f2;margin-bottom:24px; }
.pod-s21 { font-family:var(--font-serif);font-size:clamp(40px,6vw,72px);font-weight:800;line-height:1.05;letter-spacing:-0.02em;color:#f2f2f2;margin-bottom:24px; }
.pod-s61 { font-size:10px;color:#888888; }
.pod-s66 { font-size:10px;color:#888888;background:transparent;border:1px solid #1e1e1e;border-radius:2px;padding:3px 7px; }
.pod-s77 { font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#d97706; }
.pod-s47 { font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#888888;border:1px solid #222222;border-radius:2px;padding:4px 8px; }
.pod-s79 { font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#d4af37;margin-bottom:16px; }
.pod-s3 { font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#d4af37;margin-bottom:14px;position:relative; }
.pod-s89 { font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#d4af37;margin-bottom:16px; }
.pod-s60 { font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#d97706; }
.pod-s94 { font-size:11px;color:#888888;margin-top:16px; }
.pod-s62 { font-size:11px;color:#888888; }
.pod-s103 { font-size:11px;color:#888888; }
.pod-s36 { font-size:11px;color:#888888;letter-spacing:0.04em; }
.pod-s76 { font-size:11px;color:#888888;line-height:1.4; }
.pod-s32 { font-size:11px;color:#888888;margin:0; }
.pod-s104 { font-size:11px;color:#888888;text-decoration:none;transition:color 0.2s; }
.pod-s57 { font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:7px 14px;border-radius:2px;border:1px solid #222222;cursor:pointer;transition:all 0.15s;background-color:transparent;color:#888888;font-family:var(--font-sans); }
.pod-s56 { font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:7px 14px;border-radius:2px;border:1px solid #d97706;cursor:pointer;transition:all 0.15s;background-color:#d97706;color:#fff;font-family:var(--font-sans); }
.pod-s24 { font-size:11px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:#888888;text-decoration:none;padding:9px 16px;border:1px solid #222222;border-radius:2px;transition:all 0.2s; }
.pod-s85 { font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#888888;flex-shrink:0;width:72px;padding-top:1px; }
.pod-s20 { font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#d97706; }
.pod-s7 { font-size:12px;color:#888888;line-height:1.4; }
.pod-s98 { font-size:12px;color:#888888;line-height:1.6;margin-bottom:20px; }
.pod-s101 { font-size:12px;color:#888888;text-decoration:none;transition:color 0.2s; }
.pod-s100 { font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#f2f2f2;margin-bottom:16px; }
.pod-s29 { font-size:14px;color:#888888;margin-bottom:20px; }
.pod-s86 { font-size:14px;color:#cccccc;line-height:1.5; }
.pod-s31 { font-size:13px;font-weight:600;color:#cccccc;margin:0; }
.pod-s75 { font-size:13px;font-weight:700;color:#f2f2f2;margin-bottom:4px; }
.pod-s52 { font-size:14px;font-weight:700;color:#f2f2f2;margin-bottom:2px; }
.pod-s49 { font-size:15px;color:#888888;line-height:1.75;margin-bottom:28px; }
.pod-s6 { font-size:15px;color:#888888;line-height:1.75;margin-bottom:32px;position:relative; }
.pod-s91 { font-size:15px;color:#888888;line-height:1.75;margin-bottom:36px; }
.pod-s13 { font-size:15px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#f2f2f2;padding:12px 0 8px;border-bottom:1px solid #161616; }
.pod-s81 { font-size:16px;color:#888888;line-height:1.8;margin-bottom:20px; }
.pod-s82 { font-size:16px;color:#888888;line-height:1.8;margin-bottom:36px; }
.pod-s23 { font-size:17px;color:#888888;line-height:1.75;max-width:480px;margin-bottom:40px; }
.pod-s107 { margin-bottom:28px; }
.pod-s105 { margin-bottom:28px;position:relative; }
.pod-s116 { margin-bottom:40px; }
.pod-s108 { margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid #1e1e1e; }
.pod-s17 { max-width:1280px;margin:0 auto; }
.pod-s88 { max-width:600px;margin:0 auto;text-align:center; }
.pod-s14 { padding-left:16px;font-size:13px;color:#888888;border-bottom:1px solid #111111; }
.pod-s15 { padding-left:16px;font-size:13px;color:#888888;border-bottom:1px solid #161616; }
.pod-s55 { padding-top:0;padding-bottom:80px;padding-left:24px;padding-right:24px;border-top:1px solid #1e1e1e; }
.pod-s117 { padding-top:24px;border-top:1px solid #1e1e1e; }
.pod-s110 { padding-top:24px;padding-bottom:24px;border-top:1px solid #1e1e1e;border-bottom:1px solid #1e1e1e;margin-bottom:28px; }
.pod-s16 { padding-top:80px;padding-bottom:0;padding-left:24px;padding-right:24px;border-bottom:1px solid #1e1e1e; }
.pod-s34 { padding:20px 20px 20px 0; }
.pod-s37 { padding:20px;border-left:1px solid #1e1e1e; }
.pod-s38 { padding:80px 24px; }
.pod-s70 { padding:80px 24px;background-color:#0c0c0c;border-top:1px solid #1e1e1e;border-bottom:1px solid #1e1e1e; }
.pod-s87 { padding:80px 24px;border-top:1px solid #1e1e1e;border-bottom:1px solid #1e1e1e; }
.pod-s1 { position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(80,40,160,0.18) 0%,transparent 70%);pointer-events:none; }
.pod-s44 { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,0.4); }
.pod-s46 { position:absolute;top:16px;left:16px;background-color:#d97706;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;border-radius:2px; }
.pod-s106 { position:relative; }
.pod-s42 { position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid #1e1e1e; }
.pod-s26 { position:relative;width:100%;margin-bottom:32px; }
.pod-s30 { position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid #1e1e1e; }
.pod-s59 { position:relative;width:80px;height:80px;border-radius:6px;overflow:hidden;border:1px solid #1e1e1e;flex-shrink:0; }
.pod-s68 { text-align:center;padding-top:48px; }
.pod-s73 { text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:24px 16px;background-color:#111111;border:1px solid #1e1e1e;border-radius:8px;transition:border-color 0.2s,transform 0.2s; }
.pod-s11 { transition:transform 0.2s; }
.pod-s43 { width:100%;height:100%;object-fit:cover;display:block; }
.pod-s27 { width:100%;height:auto;display:block; }
.pod-s64 { width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1px solid #1e1e1e; }
.pod-s71 { width:2px;height:24px;background-color:#d4af37;flex-shrink:0; }
.pod-s39 { width:2px;height:24px;background-color:#d97706;flex-shrink:0; }
.pod-s19 { width:36px;height:36px;border-radius:50%;background-color:#d97706;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.pod-s2 { width:36px;height:3px;background-color:#d4af37;margin-bottom:24px;position:relative; }
.pod-s83 { width:52px;height:52px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid #d4af37; }
.pod-s50 { width:56px;height:56px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid #1e1e1e; }
.pod-s45 { width:64px;height:64px;border-radius:50%;background-color:#d97706;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 8px rgba(217,119,6,0.2); }
.pod-s74 { width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid #1e1e1e;flex-shrink:0; }


/* ─── Tools Page Specific Styles (tl- prefix) ──────────────────────────────────────── */

.tl-main { background-color: #090909; min-height: 100vh; }
.tl-hero-section { border-bottom: 1px solid #1e1e1e; padding-top: 80px; padding-right: 24px; padding-bottom: 64px; padding-left: 24px; position: relative; overflow: hidden; }
.tl-hero-glow { position: absolute; top: -120px; right: -80px; width: 600px; height: 600px; background: radial-gradient(ellipse, rgba(212,175,55,0.06) 0%, transparent 70%); pointer-events: none; }
.tl-container-max { max-width: 1280px; margin: 0 auto; }
.tl-hero-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #d4af37; margin-bottom: 20px; }
.tl-hero-title { font-family: var(--font-serif); font-size: clamp(36px, 6vw, 72px); font-weight: 700; color: #f2f2f2; line-height: 1.08; letter-spacing: -0.02em; max-width: 780px; margin-bottom: 24px; }
.tl-hero-subtitle { font-size: 17px; color: #888888; line-height: 1.7; max-width: 520px; margin-bottom: 48px; }
.tl-stats-grid { border-top: 1px solid #1e1e1e; padding-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px 0; }
.tl-stat-value { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: #f2f2f2; line-height: 1; margin-bottom: 4px; }
.tl-stat-label { font-size: 12px; color: #888888; letter-spacing: 0.04em; }
.tl-featured-section { padding: 64px 24px; border-bottom: 1px solid #1e1e1e; }
.tl-section-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #888888; margin-bottom: 32px; }
.tl-featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tl-featured-card { display: block; background-color: #111111; border: 1px solid #1e1e1e; border-radius: 8px; padding: 36px; text-decoration: none; transition: border-color 0.2s, transform 0.2s; position: relative; overflow: hidden; }
.tl-featured-glow { position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; pointer-events: none; }
.tl-featured-glow-purple { background: radial-gradient(ellipse, rgba(124,58,237,0.09) 0%, transparent 70%); }
.tl-featured-glow-green { background: radial-gradient(ellipse, rgba(5,150,105,0.09) 0%, transparent 70%); }
.tl-featured-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 2px; margin-bottom: 24px; position: relative; }
.tl-featured-badge-gold { background-color: #d4af37; color: #090909; }
.tl-featured-badge-green { background-color: #059669; color: #fff; }
.tl-featured-header { margin-bottom: 20px; position: relative; }
.tl-featured-icon-box { width: 56px; height: 56px; background-color: #1a1a1a; border-radius: 12px; border: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tl-featured-icon { width: 36px; height: 36px; object-fit: contain; }
.tl-featured-title { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: #f2f2f2; line-height: 1.2; margin-bottom: 2px; }
.tl-featured-category { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; margin-bottom: 16px; }
.tl-featured-category-purple { background-color: rgba(124,58,237,0.12); color: #7c3aed; }
.tl-featured-category-green { background-color: rgba(5,150,105,0.12); color: #059669; }
.tl-featured-headline { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: #f2f2f2; line-height: 1.4; margin-bottom: 12px; }
.tl-featured-desc { font-size: 14px; color: #888888; line-height: 1.7; margin-bottom: 24px; }
.tl-featured-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #1e1e1e; }
.tl-featured-price { font-size: 12px; color: #888888; }
.tl-featured-cta-purple { font-size: 13px; font-weight: 600; color: #7c3aed; letter-spacing: 0.02em; }
.tl-featured-cta-green { font-size: 13px; font-weight: 600; color: #059669; letter-spacing: 0.02em; }
.tl-tools-section { padding: 64px 24px; border-bottom: 1px solid #1e1e1e; }
.tl-tools-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; }
.tl-tools-title { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #888888; margin-bottom: 8px; }
.tl-filter-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-filter-btn { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 18px; border-radius: 2px; cursor: pointer; transition: all 0.15s; }
.tl-filter-btn-active { border: 1px solid #d4af37; background-color: #d4af37; color: #090909; }
.tl-filter-btn-inactive { border: 1px solid #2a2a2a; background-color: transparent; color: #888888; }
.tl-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tl-tool-card { background-color: #111111; border: 1px solid #1e1e1e; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.tool-card { display:flex; flex-direction:column; background-color:var(--color-bg); padding:28px; text-decoration:none; color:inherit; transition:background-color 0.15s; border:1px solid var(--color-border); }
.tl-tool-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.tl-tool-name { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: #f2f2f2; }
.tl-tool-name + .tl-newsletter-disclaimer { margin-top: 0; margin-left: 8px; }
.tl-tool-desc { font-size: 14px; color: #888888; line-height: 1.65; flex-grow: 1; margin-bottom: 20px; }
.tl-tool-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid #161616; }
.tl-tool-pricing { font-size: 12px; font-weight: 600; color: #888888; transition: color 0.15s; }
.tl-tool-tag-base { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.tl-tool-tag-ai { color: #7c3aed; }
.tl-tool-tag-coding { color: #0052cc; }
.tl-tool-tag-design { color: #00aeef; }
.tl-tool-tag-collab { color: #059669; }
.tl-tool-tag-code { color: #0ea5e9; }
.tl-tool-tag-collab-alt { color: #4a154b; }
.tl-tool-tag-code-alt { color: #5865f2; }
.tl-tool-tag-api { color: #635bff; }
.tl-tool-tag-auto { color: #6366f1; }
.tl-tool-tag-community { color: #e11d48; }
.tl-tool-tag-payment { color: #f97316; }
.tl-tool-icon { width: 28px; height: 28px; object-fit: contain; }
.tl-tag-badge { font-size: 10px; color: #888888; background-color: #161616; border: 1px solid #2a2a2a; padding: 2px 8px; border-radius: 2px; letter-spacing: 0.04em; }
.tl-section-bg { background-color: #0d0d0d; border-top: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e; padding: 64px 24px; }
.tl-tools-how-title { font-family: var(--font-serif); font-size: 32px; font-weight: 700; color: #f2f2f2; line-height: 1.2; }
.tl-tools-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.tl-process-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid #1e1e1e; }
.tl-process-number { font-size: 13px; font-weight: 700; color: #2a2a2a; width: 24px; text-align: right; flex-shrink: 0; }
.tl-process-icon-box { width: 40px; height: 40px; background-color: #161616; border-radius: 8px; border: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tl-process-icon { width: 24px; height: 24px; object-fit: contain; }
.tl-process-heading { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: #f2f2f2; margin-bottom: 2px; }
.tl-stack-item { display: flex; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid #1e1e1e; }
.tl-stack-item:last-child { border-bottom: none; }
.tl-stack-counter { font-size: 13px; font-weight: 700; color: #2a2a2a; width: 24px; text-align: right; flex-shrink: 0; }
.tl-stack-icon-box { width: 40px; height: 40px; background-color: #161616; border-radius: 8px; border: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tl-stack-icon { width: 24px; height: 24px; object-fit: contain; }
.tl-stack-name { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: #f2f2f2; margin-bottom: 2px; }
.tl-cta-section { padding: 80px 24px; border-bottom: 1px solid #1e1e1e; }
.tl-cta-container { max-width: 720px; margin: 0 auto; text-align: center; }
.tl-cta-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #888888; margin-bottom: 16px; }
.tl-cta-title { font-family: var(--font-serif); font-size: 36px; font-weight: 700; color: #f2f2f2; line-height: 1.2; margin-bottom: 16px; }
.tl-cta-desc { font-size: 16px; color: #888888; line-height: 1.7; margin-bottom: 36px; }
.tl-button-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tl-button-primary { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #090909; background-color: #d4af37; text-decoration: none; padding: 14px 32px; border-radius: 2px; transition: opacity 0.2s; }
.tl-button-secondary { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #888888; background-color: transparent; text-decoration: none; padding: 14px 32px; border-radius: 2px; border: 1px solid #2a2a2a; transition: all 0.2s; }
.tl-newsletter-section { padding: 80px 24px; border-bottom: 1px solid #1e1e1e; }
.tl-newsletter-container { max-width: 600px; margin: 0 auto; text-align: center; }
.tl-newsletter-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #d4af37; margin-bottom: 16px; }
.tl-newsletter-title { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #f2f2f2; margin-bottom: 16px; }
.tl-newsletter-desc { font-size: 15px; color: #888888; line-height: 1.75; margin-bottom: 36px; }
.tl-newsletter-form { display: flex; gap: 8px; max-width: 440px; margin: 0 auto; }
.tl-newsletter-input { flex: 1; background: #111111; border: 1px solid #222222; color: #f2f2f2; font-family: var(--font-sans); font-size: 14px; padding: 12px 16px; border-radius: 2px; outline: none; }
.tl-newsletter-button { background: #d4af37; color: #090909; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 20px; border: none; border-radius: 2px; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.tl-newsletter-disclaimer { font-size: 11px; color: #888888; margin-top: 16px; }
.tl-modal-gradient-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(80,40,160,0.18) 0%, transparent 70%); pointer-events: none; }
.tl-modal-gold-bar { width: 36px; height: 3px; background-color: #d4af37; margin-bottom: 24px; position: relative; }
.tl-modal-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #d4af37; margin-bottom: 14px; position: relative; }
.tl-modal-headline { font-family: var(--font-serif); font-size: clamp(26px, 4vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #f2f2f2; margin-bottom: 16px; position: relative; }
.tl-modal-body { font-size: 15px; color: #888888; line-height: 1.75; margin-bottom: 32px; position: relative; }
.tl-mobile-nav-heading { font-size: 15px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #f2f2f2; padding: 12px 0 8px; border-bottom: 1px solid #161616; }
.tl-mobile-nav-link { padding-left: 16px; font-size: 13px; color: #888888; border-bottom: 1px solid #111111; }
.tl-mobile-nav-link-last { border-bottom: 1px solid #161616; }
.tl-dropdown-arrow { transition: transform 0.2s; }
.tl-icon-close { display: none; }
.tl-submit-tool-btn { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #090909; background-color: #d4af37; text-decoration: none; padding: 12px 28px; border-radius: 2px; transition: opacity 0.2s; }
.tl-modal-button-group { display: flex; flex-direction: column; gap: 10px; position: relative; }
.tl-button-browse { display: block; text-align: center; padding: 15px 24px; }
.tl-button-later { display: block; width: 100%; background: none; border: none; cursor: pointer; font-size: 12px; color: #888888; padding: 8px; text-align: center; font-family: var(--font-sans); letter-spacing: 0.04em; transition: color 0.2s; }
.tl-footer-padding { padding-top: 64px; padding-right: 24px; padding-bottom: 80px; padding-left: 24px; }

/* Support flexbox utilities needed by tools page */
.flexgap\:12px { display: flex; gap: 12px; }
.flexgap\:8px { display: flex; gap: 8px; }
.flexalign-items\:center { display: flex; align-items: center; }

/* ─── REFACTORED INLINE STYLES FROM INDEX.HTML ──────────────────────── */
.idx-0 { background-color:#0d0f14;padding:72px 24px 30px;position:relative;overflow:hidden; }
.idx-1 { background-color:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:32px;min-width:280px; }
.idx-2 { background:linear-gradient(135deg,#064e3b 0%,#059669 100%);border:1px solid #047857; }
.idx-3 { background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%);border:1px solid #1d4ed8; }
.idx-4 { background:linear-gradient(135deg,#4c1d95 0%,#7c3aed 100%);border:1px solid #6d28d9; }
.idx-5 { background:linear-gradient(135deg,#78350f 0%,#d97706 100%);border:1px solid #b45309; }
.idx-6 { background:linear-gradient(135deg,#881337 0%,#e11d48 100%);border:1px solid #be123c; }
.idx-7 { color:#059669; }
.idx-8 { color:#7c3aed; }
.idx-9 { color:#888888; }
.idx-10 { color:#888888;text-decoration:underline; }
.idx-11 { color:#aaaaaa;font-weight:600; }
.idx-12 { color:#d4af37;font-style:italic; }
.idx-13 { color:#d97706; }
.idx-14 { color:#e11d48; }
.idx-15 { display:block;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#888888;margin-bottom:4px; }
.idx-16 { display:block;margin-top:20px; }
.idx-17 { display:block;text-align:center;padding:15px 24px; }
.idx-18 { text-decoration:none; }
.idx-20 { display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;margin-bottom:56px; }
.idx-21 { display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:24px;align-items:start; }
.idx-22 { display:grid;grid-template-columns:repeat(3,1fr);gap:28px; }
.idx-23 { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.idx-24 { display:grid;grid-template-columns:repeat(4,1fr);gap:24px; }
.idx-25 { display:inline-block;margin-top:14px;font-size:12px;font-weight:600;color:#059669;letter-spacing:0.04em; }
.idx-26 { display:inline-block;margin-top:14px;font-size:12px;font-weight:600;color:#7c3aed;letter-spacing:0.04em; }
.idx-27 { display:inline-block;margin-top:14px;font-size:12px;font-weight:600;color:#d97706;letter-spacing:0.04em; }
.idx-28 { display:inline-block;margin-top:14px;font-size:12px;font-weight:600;color:#e11d48;letter-spacing:0.04em; }
.idx-29 { display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background-color:rgba(212,175,55,0.15);flex-shrink:0; }
.idx-30 { display:none; }
.idx-31 { display:none;background-color:#111111;border:1px solid #1e1e1e;border-radius:6px;padding:32px; }
.idx-48 { font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#888888;background-color:#1a1a1a;border:1px solid #222222;padding:4px 10px;border-radius:2px; }
.idx-49 { font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#888888;margin-bottom:10px; }
.idx-50 { font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#d4af37;margin-bottom:14px;position:relative; }
.idx-51 { font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#d4af37;margin-bottom:16px; }
.idx-52 { font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#7c3aed;margin-bottom:10px;display:block; }
.idx-53 { font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#d97706;margin-bottom:8px;display:block; }
.idx-54 { font-size:11px;color:#888888; }
.idx-55 { font-size:11px;color:#888888;margin-top:16px; }
.idx-56 { font-size:11px;color:#888888;margin:0; }
.idx-57 { font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#888888;text-decoration:none;padding:7px 14px;border:1px solid #222222;border-radius:2px;transition:all 0.2s; }
.idx-58 { font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#d4af37;margin-bottom:16px; }
.idx-59 { font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#d4af37;margin-bottom:20px; }
.idx-60 { font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#d4af37;margin-bottom:20px; }
.idx-61 { font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#888888;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid #1e1e1e; }
.idx-62 { font-size:12px;color:#888888;line-height:1.4; }
.idx-63 { font-size:12px;color:#888888;letter-spacing:0.06em;text-transform:uppercase; }
.idx-64 { font-size:12px;color:#888888;line-height:1.6;margin-bottom:14px; }
.idx-65 { font-size:12px;font-weight:600;color:#cccccc;margin:0 0 2px; }
.idx-66 { font-size:14px;color:#888888;line-height:1.65;margin-bottom:14px; }
.idx-67 { font-size:14px;color:#888888;line-height:1.6; }
.idx-68 { font-size:14px;color:#888888;line-height:1.7;margin-bottom:20px; }
.idx-69 { font-size:13px;color:#aaaaaa; }
.idx-70 { font-size:13px;font-weight:600;color:#f2f2f2;margin:0; }
.idx-71 { font-size:13px;font-weight:600;line-height:1.4;color:#cccccc;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.idx-72 { font-size:14px;color:#888888; }
.idx-73 { font-size:14px;color:#888888;line-height:1.65; }
.idx-74 { font-size:15px;color:#888888;line-height:1.75;margin-bottom:32px;position:relative; }
.idx-75 { font-size:15px;color:#888888;line-height:1.7; }
.idx-76 { font-size:15px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#f2f2f2;padding:12px 0 8px;border-bottom:1px solid #161616; }
.idx-77 { font-size:16px; }
.idx-78 { font-size:16px;color:#888888;line-height:1.7;margin-bottom:40px; }
.idx-79 { font-size:17px;color:#888888;line-height:1.7;margin-bottom:32px; }
.idx-80 { font-size:17px;color:#888888;line-height:1.7;max-width:520px;margin-bottom:36px; }
.idx-81 { font-size:17px;line-height:1.7;color:#888888;margin-bottom:36px; }
.idx-82 { font-size:32px; }
.idx-83 { font-style:italic;color:#d4af37; }
.idx-84 { font-weight:600; }
.idx-85 { height:180px; }
.idx-86 { height:200px; }
.idx-87 { height:260px; }
.idx-88 { margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid #1e1e1e; }
.idx-89 { margin-top:20px; }
.idx-90 { margin-top:24px;padding-top:20px;border-top:1px solid #1e1e1e; }
.idx-91 { max-width:1280px;margin:0 auto; }
.idx-92 { max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:32px;align-items:start; }
.idx-93 { max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:16px; }
.idx-94 { max-width:1280px;margin:0 auto;position:relative; }
.idx-95 { max-width:560px;margin:0 auto; }
.idx-96 { padding-left:16px;font-size:13px;color:#888888;border-bottom:1px solid #111111; }
.idx-97 { padding-left:16px;font-size:13px;color:#888888;border-bottom:1px solid #161616; }
.idx-98 { padding:18px; }
.idx-99 { padding:18px;flex:1;display:flex;flex-direction:column; }
.idx-100 { padding:28px; }
.idx-101 { position:absolute;bottom:10px;left:10px;background-color:#e11d48;font-size:9px; }
.idx-102 { position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,15,20,0.98) 0%,rgba(30,20,60,0.95) 50%,rgba(13,15,20,0.98) 100%);pointer-events:none; }
.idx-103 { position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(80,40,160,0.18) 0%,transparent 70%);pointer-events:none; }
.idx-104 { position:absolute;inset:0;overflow:hidden; }
.idx-105 { position:absolute;top:12px;right:12px;background-color:#059669; }
.idx-106 { position:absolute;top:12px;right:12px;background-color:#7c3aed; }
.idx-107 { position:absolute;top:12px;right:12px;background-color:#d97706; }
.idx-108 { position:absolute;top:12px;right:12px;background-color:#e11d48; }
.idx-109 { position:absolute;top:14px;left:14px;background-color:#7c3aed; }
.idx-110 { position:absolute;top:16px;left:16px;background-color:#d4af37;color:#090909;font-size:10px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;padding:4px 10px;border-radius:2px; }
.idx-111 { position:relative;max-width:760px;margin:0 auto;padding:72px 24px;text-align:center; }
.idx-112 { position:relative;overflow:hidden;background-color:#0d0f14;border-top:1px solid #161616;border-bottom:1px solid #161616; }
.idx-113 { position:relative;width:100%;height:160px;background-color:#1a1a1a; }
.idx-114 { position:relative;width:100%;height:160px;overflow:hidden; }
.idx-115 { position:relative;width:100%;height:180px; }
.idx-116 { position:relative;width:100%;height:280px; }
.idx-117 { position:relative;width:100%;height:340px;overflow:hidden; }
.idx-118 { text-align:center;margin-bottom:56px; }
.idx-119 { text-decoration:none; }
.idx-120 { transition:transform 0.2s; }
.idx-121 { width:100%;height:100%;object-fit:cover;opacity:0.12; }
.idx-122 { width:100%;height:100%;object-fit:cover;opacity:0.8; }
.idx-123 { width:22px;height:22px; }
.idx-124 { width:32px;height:2px;background-color:#d4af37;margin:0 auto 28px; }
.idx-125 { width:32px;height:32px; }
.idx-126 { width:32px;height:32px;stroke:#fff;stroke-width:1.5;fill:none; }
.idx-127 { width:36px;height:36px;border-radius:50%;background-color:#d97706;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.idx-128 { width:36px;height:3px;background-color:#d4af37;margin-bottom:24px;position:relative; }
.idx-129 { width:40px;height:3px;background-color:#d4af37;margin-bottom:24px; }
.idx-130 { width:40px;height:3px;background-color:#d4af37;margin-bottom:28px; }
.idx-131 { width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #1e1e1e; }
.idx-132 { width:60px;height:48px;object-fit:cover;border-radius:4px;flex-shrink:0; }
/* ─── REFACTORED STYLES FROM writers.html ──────────────────────────── */

.wr-001 {
  background:#d4af37;
  color:#090909;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:12px 20px;
  border:none;
  border-radius:2px;
  cursor:pointer;
  white-space:nowrap;
  transition:background 0.2s;
  
}

.wr-002 {
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:8px 18px;
  border-radius:2px;
  border:1px solid #2a2a2a;
  cursor:pointer;
  transition:all 0.15s;
  background-color:transparent;
  color:#888888;
  font-family:var(--font-sans);
  
}

.wr-003 {
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#888888;
  background-color:transparent;
  text-decoration:none;
  padding:14px 32px;
  border-radius:2px;
  border:1px solid #2a2a2a;
  transition:all 0.2s;
  
}

.wr-004 {
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:8px 18px;
  border-radius:2px;
  border:1px solid #d4af37;
  cursor:pointer;
  transition:all 0.15s;
  background-color:#d4af37;
  color:#090909;
  font-family:var(--font-sans);
  
}

.wr-005 {
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#090909;
  background-color:#d4af37;
  text-decoration:none;
  padding:14px 32px;
  border-radius:2px;
  transition:opacity 0.2s;
  
}

.wr-006 {
  display:block;
  width:100%;
  background:none;
  border:none;
  cursor:pointer;
  font-size:12px;
  color:#888888;
  padding:8px;
  text-align:center;
  font-family:var(--font-sans);
  letter-spacing:0.04em;
  transition:color 0.2s;
  
}

.wr-007 {
  font-size:9px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#888888;
  background-color:#161616;
  border:1px solid #2a2a2a;
  padding:3px 8px;
  border-radius:2px;
  
}

.wr-008 {
  font-family:var(--font-serif);
  font-size:clamp(26px,4vw,34px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:#f2f2f2;
  margin-bottom:16px;
  position:relative;
  
}

.wr-009 {
  font-family:var(--font-serif);
  font-size:clamp(36px,6vw,72px);
  font-weight:700;
  color:#f2f2f2;
  line-height:1.08;
  letter-spacing:-0.02em;
  max-width:760px;
  margin-bottom:24px;
  
}

.wr-010 {
  font-size:9px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#7c3aed;
  background-color:rgba(124,58,237,0.08);
  padding:3px 8px;
  border-radius:2px;
  
}

.wr-011 {
  position:absolute;
  top:-100px;
  right:-80px;
  width:700px;
  height:700px;
  background:radial-gradient(ellipse,rgba(212,175,55,0.05) 0%,transparent 70%);
  pointer-events:none;
  
}

.wr-012 {
  font-size:9px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#e11d48;
  background-color:rgba(225,29,72,0.08);
  padding:3px 8px;
  border-radius:2px;
  
}

.wr-013 {
  position:absolute;
  top:-80px;
  right:-80px;
  width:300px;
  height:300px;
  background:radial-gradient(ellipse,rgba(124,58,237,0.07) 0%,transparent 70%);
  pointer-events:none;
  
}

.wr-014 {
  position:absolute;
  top:-80px;
  right:-80px;
  width:300px;
  height:300px;
  background:radial-gradient(ellipse,rgba(225,29,72,0.07) 0%,transparent 70%);
  pointer-events:none;
  
}

.wr-015 {
  flex:1;
  background:#111111;
  border:1px solid #222222;
  color:#f2f2f2;
  font-family:var(--font-sans);
  font-size:14px;
  padding:12px 16px;
  border-radius:2px;
  outline:none;
  
}

.wr-016 {
  font-family:var(--font-serif);
  font-size:clamp(28px,4vw,42px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:#f2f2f2;
  margin-bottom:16px;
  
}

.wr-017 {
  display:block;
  padding:8px 0;
  border-top:1px solid #161616;
  font-size:12px;
  color:#888888;
  text-decoration:none;
  line-height:1.5;
  transition:color 0.15s;
  
}

.wr-018 {
  background-color:#111111;
  border:1px solid #1e1e1e;
  border-radius:8px;
  padding:36px;
  position:relative;
  overflow:hidden;
  transition:border-color 0.2s;
  
}

.wr-019 {
  font-size:15px;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#f2f2f2;
  padding:12px 0 8px;
  border-bottom:1px solid #161616;
  
}

.wr-020 {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(80,40,160,0.18) 0%,transparent 70%);
  pointer-events:none;
  
}

.wr-021 {
  border-bottom:1px solid #1e1e1e;
  padding-top:80px;
  padding-right:24px;
  padding-bottom:64px;
  padding-left:24px;
  position:relative;
  overflow:hidden;
  
}

.wr-022 {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  border-top:1px solid #1e1e1e;
  border-left:1px solid #1e1e1e;
  
}

.wr-023 {
  font-size:10px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#d4af37;
  margin-bottom:14px;
  position:relative;
  
}

.wr-024 {
  border-top:1px solid #1e1e1e;
  padding-top:32px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:24px 0;
  
}

.wr-025 {
  font-size:10px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#d4af37;
  margin-bottom:16px;
  
}

.wr-026 {
  font-size:10px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#888888;
  margin-bottom:32px;
  
}

.wr-027 {
  font-size:10px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#d4af37;
  margin-bottom:16px;
  
}

.wr-028 {
  font-size:10px;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#d4af37;
  margin-bottom:20px;
  
}

.wr-029 {
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(212,175,55,0.22);
  flex-shrink:0;
  
}

.wr-030 {
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#d4af37;
  margin-bottom:6px;
  
}

.wr-031 {
  font-size:9px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#888888;
  margin-bottom:10px;
  
}

.wr-032 {
  font-size:10px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#888888;
  margin-bottom:8px;
  
}

.wr-033 {
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(14,165,233,0.22);
  flex-shrink:0;
  
}

.wr-034 {
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(124,58,237,0.22);
  flex-shrink:0;
  
}

.wr-035 {
  font-family:var(--font-serif);
  font-size:36px;
  font-weight:700;
  color:#f2f2f2;
  line-height:1.2;
  margin-bottom:16px;
  
}

.wr-036 {
  width:72px;
  height:72px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(124,58,237,0.25);
  flex-shrink:0;
  
}

.wr-037 {
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(249,115,22,0.22);
  flex-shrink:0;
  
}

.wr-038 {
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(5,150,105,0.22);
  flex-shrink:0;
  
}

.wr-039 {
  font-family:var(--font-serif);
  font-size:22px;
  font-weight:700;
  color:#f2f2f2;
  line-height:1.2;
  margin-bottom:4px;
  
}

.wr-040 {
  font-family:var(--font-serif);
  font-size:18px;
  font-weight:700;
  color:#f2f2f2;
  line-height:1.2;
  margin-bottom:3px;
  
}

.wr-041 {
  width:72px;
  height:72px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(225,29,72,0.25);
  flex-shrink:0;
  
}

.wr-042 {
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(225,29,72,0.22);
  flex-shrink:0;
  
}

.wr-043 {
  font-family:var(--font-serif);
  font-size:28px;
  font-weight:700;
  color:#f2f2f2;
  line-height:1;
  margin-bottom:4px;
  
}

.wr-044 {
  background-color:#0d0d0d;
  border-top:1px solid #1e1e1e;
  border-bottom:1px solid #1e1e1e;
  padding:80px 24px;
  
}

.wr-045 {
  font-family:var(--font-serif);
  font-size:14px;
  font-weight:700;
  color:#888888;
  margin-right:3px;
  
}

.wr-046 {
  font-family:var(--font-serif);
  font-size:32px;
  font-weight:700;
  color:#f2f2f2;
  line-height:1.2;
  
}

.wr-047 {
  font-size:9px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#7c3aed;
  
}

.wr-048 {
  font-size:9px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#059669;
  
}

.wr-049 {
  font-size:9px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#0ea5e9;
  
}

.wr-050 {
  font-size:9px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#e11d48;
  
}

.wr-051 {
  font-size:9px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#d4af37;
  
}

.wr-052 {
  font-size:9px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#f97316;
  
}

.wr-053 {
  width:36px;
  height:3px;
  background-color:#d4af37;
  margin-bottom:24px;
  position:relative;
  
}

.wr-054 {
  font-size:15px;
  color:#888888;
  line-height:1.75;
  margin-bottom:32px;
  position:relative;
  
}

.wr-055 {
  font-size:17px;
  color:#888888;
  line-height:1.7;
  max-width:560px;
  margin-bottom:48px;
  
}

.wr-056 {
  padding-left:16px;
  font-size:13px;
  color:#888888;
  border-bottom:1px solid #111111;
  
}

.wr-057 {
  padding-left:16px;
  font-size:13px;
  color:#888888;
  border-bottom:1px solid #161616;
  
}

.wr-058 {
  font-size:13px;
  color:#888888;
  line-height:1.7;
  margin-bottom:20px;
  flex-grow:1;
  
}

.wr-059 {
  font-family:var(--font-serif);
  font-size:18px;
  font-weight:700;
  color:#f2f2f2;
  
}

.wr-060 {
  padding-top:64px;
  padding-right:24px;
  padding-bottom:80px;
  padding-left:24px;
  
}

.wr-061 {
  font-size:11px;
  font-weight:700;
  color:#e11d48;
  flex-shrink:0;
  margin-top:1px;
  
}

.wr-062 {
  font-size:11px;
  font-weight:700;
  color:#7c3aed;
  flex-shrink:0;
  margin-top:1px;
  
}

.wr-063 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  
}

.wr-064 {
  font-size:11px;
  color:#888888;
  letter-spacing:0.04em;
  margin-bottom:12px;
  
}

.wr-065 {
  font-size:13px;
  color:#888888;
  line-height:1.5;
  transition:color 0.15s;
  
}

.wr-066 {
  font-size:15px;
  color:#888888;
  line-height:1.75;
  margin-bottom:32px;
  
}

.wr-067 {
  font-size:15px;
  color:#888888;
  line-height:1.75;
  margin-bottom:36px;
  
}

.wr-068 {
  font-size:14px;
  color:#888888;
  line-height:1.75;
  margin-bottom:24px;
  
}

.wr-069 {
  font-size:15px;
  color:#888888;
  line-height:1.75;
  margin-bottom:16px;
  
}

.wr-070 {
  padding-bottom:16px;
  padding-left:24px;
  padding-right:24px;
  
}

.wr-071 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  
}

.wr-072 {
  font-size:12px;
  color:#888888;
  letter-spacing:0.04em;
  
}

.wr-073 {
  font-size:10px;
  color:#888888;
  letter-spacing:0.04em;
  
}

.wr-074 {
  display:block;
  text-align:center;
  padding:15px 24px;
  
}

.wr-075 {
  padding:64px 24px;
  border-bottom:1px solid #1e1e1e;
  
}

.wr-076 {
  padding:80px 24px;
  border-bottom:1px solid #1e1e1e;
  
}

.wr-077 {
  max-width:600px;
  margin:0 auto;
  text-align:center;
  
}

.wr-078 {
  font-size:12px;
  color:#888888;
  margin-bottom:10px;
  
}

.wr-079 {
  padding:20px 0;
  border-bottom:1px solid #1e1e1e;
  
}

.wr-080 {
  font-size:11px;
  color:#888888;
  margin-top:16px;
  
}

.wr-081 {
  font-size:14px;
  color:#888888;
  line-height:1.6;
  
}

.wr-082 {
  background-color:#090909;
  min-height:100vh;
  
}

.wr-083 {
  padding-bottom:16px;
  padding-right:24px;
  
}

.wr-084 {
  padding-bottom:16px;
  padding-left:24px;
  
}

.wr-085 {
  color:#d4af37;
  font-style:italic;
  
}

.wr-086 {
  max-width:1280px;
  margin:0 auto;
  
}

.wr-087 {
  font-size:13px;
  color:#888888;
  
}

.wr-088 {
  font-size:12px;
  color:#888888;
  
}

.wr-089 {
  font-size:11px;
  color:#888888;
  
}

.wr-090 {
  font-size:11px;
  color:#888888;
  
}

.wr-091 {
  transition:transform 0.2s;
  
}

.wr-092 {
  margin-bottom:24px;
  
}

.wr-093 {
  margin-bottom:20px;
  
}

.wr-094 {
  padding:20px 0;
  
}

.wr-095 {
  color:#d4af37;
  
}

.wr-096 {
  display:none;
  
}

.wr-097 {
  flex:1;

}

/* ─── Category Page Specific Styles (cat- prefix) ─────────────────────────── */
.cat-article-meta {
  font-size: 11px;
  color: #888888;
}

.cat-footer-link {
  font-size: 12px;
  color: #888888;
  text-decoration: none;
  transition: color 0.2s;
}

.cat-footer-link:hover {
  color: #f2f2f2;
}

.cat-footer-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f2f2f2;
  margin-bottom: 16px;
}

.cat-footer-bottom-link {
  font-size: 11px;
  color: #888888;
  text-decoration: none;
  transition: color 0.2s;
}

.cat-footer-bottom-link:hover {
  color: #f2f2f2;
}


/* ─── Home3 Page Specific Styles ─────────────────────────── */

.h3-001 {
  color: #888888;
  text-decoration: underline;
}

.h3-002 {
  color: #aaaaaa;
  font-weight: 600;
}

.h3-003 {
  color: #d4af37;
  font-style: italic;
}

.h3-004 {
  display: block;
}

.h3-005 {
  display: block;
  text-align: center;
  padding: 15px 24px;
}

.h3-006 {
  display: block;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: #888888;
  padding: 8px;
  text-align: center;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.h3-007 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  text-decoration: none;
  background-color: #090909;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.h3-008 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: start;
}

.h3-009 {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 16px;
}

.h3-010 {
  display: inline-block;
  background-color: #d4af37;
  color: #090909;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 40px;
  border-radius: 2px;
  transition: background-color 0.2s;
}

.h3-011 {
  display: inline-block;
  color: #888888;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 16px 24px;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  transition: all 0.2s;
}

.h3-012 {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #090909;
  background-color: #d4af37;
  padding: 5px 12px;
  border-radius: 2px;
  margin-bottom: 20px;
  align-self: flex-start;
}

.h3-013 {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background-color: #059669;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 8px;
}

.h3-014 {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background-color: #0891b2;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 8px;
}

.h3-015 {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background-color: #6d28d9;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 8px;
}

.h3-016 {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background-color: #7c3aed;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 8px;
}

.h3-017 {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background-color: #d97706;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 8px;
}

.h3-018 {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background-color: #e11d48;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 8px;
}

.h3-019 {
  display: inline-block;
  width: 24px;
  height: 1px;
  background-color: #2a2a2a;
}

.h3-020 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 8px 18px;
  border: 1px solid #1e1e1e;
  border-radius: 2px;
  background-color: #111111;
}

.h3-021 {
  display: none;
}

.h3-022 {
  display: none;
  background-color: #111111;
  border: 1px solid #1e1e1e;
  border-radius: 6px;
  padding: 32px;
}

.h3-023 {
  flex: 1;
}

.h3-024 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: #f2f2f2;
  margin: 0;
}

.h3-025 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #f2f2f2;
  margin-bottom: 4px;
}

.h3-026 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: #f2f2f2;
  margin-bottom: 2px;
  margin: 0;
}

.h3-027 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: #f2f2f2;
  margin-top: 12px;
  margin-bottom: 8px;
}

.h3-028 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #f2f2f2;
  margin-bottom: 8px;
}

.h3-029 {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  color: #f2f2f2;
}

.h3-030 {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  color: #f2f2f2;
  margin: 0;
}

.h3-031 {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: #1a1a1a;
  flex-shrink: 0;
  width: 44px;
}

.h3-032 {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: #d4af37;
  flex-shrink: 0;
  width: 44px;
}

.h3-033 {
  font-family: var(--font-serif);
  font-size: clamp(22px,2.5vw,30px);
  font-weight: 800;
  line-height: 1.15;
  color: #f2f2f2;
  margin-bottom: 20px;
}

.h3-034 {
  font-family: var(--font-serif);
  font-size: clamp(26px,4vw,34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #f2f2f2;
  margin-bottom: 16px;
  position: relative;
}

.h3-035 {
  font-family: var(--font-serif);
  font-size: clamp(32px,5vw,48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #f2f2f2;
  margin-bottom: 16px;
}

.h3-036 {
  font-family: var(--font-serif);
  font-size: clamp(40px,5.5vw,72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #f2f2f2;
  margin-bottom: 28px;
}

.h3-037 {
  font-size: 10px;
  color: #333333;
}

.h3-038 {
  font-size: 10px;
  color: #888888;
}

.h3-039 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888888;
}

.h3-040 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888888;
  margin-bottom: 6px;
}

.h3-041 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4af37;
  margin-bottom: 6px;
}

.h3-042 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888888;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.h3-043 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d4af37;
}

.h3-044 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d4af37;
  margin-bottom: 14px;
  position: relative;
}

.h3-045 {
  font-size: 11px;
  color: #888888;
}

.h3-046 {
  font-size: 11px;
  color: #888888;
  margin-top: 16px;
}

.h3-047 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888888;
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid #1e1e1e;
  border-radius: 2px;
  background-color: #111111;
  transition: all 0.2s;
}

.h3-048 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888888;
  text-decoration: none;
  transition: color 0.2s;
}

.h3-049 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  background-color: #111111;
  color: #888888;
}

.h3-050 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  background-color: #7c3aed;
  color: #fff;
}

.h3-051 {
  font-size: 12px;
  color: #888888;
  flex-shrink: 0;
}

.h3-052 {
  font-size: 12px;
  color: #888888;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.h3-053 {
  font-size: 12px;
  color: #888888;
  line-height: 1.4;
}

.h3-054 {
  font-size: 12px;
  color: #888888;
  margin: 0;
  margin-top: 2px;
}

.h3-055 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888888;
  text-decoration: none;
  transition: color 0.2s;
}

.h3-056 {
  font-size: 13px;
  font-weight: 600;
  color: #f2f2f2;
  margin: 0;
}

.h3-057 {
  font-size: 14px;
  color: #888888;
}

.h3-058 {
  font-size: 14px;
  color: #888888;
  line-height: 1.8;
  margin-bottom: 32px;
}

.h3-059 {
  font-size: 15px;
  color: #888888;
  line-height: 1.75;
  margin-bottom: 32px;
  position: relative;
}

.h3-060 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f2f2f2;
  padding: 12px 0 8px;
  border-bottom: 1px solid #161616;
}

.h3-061 {
  font-size: 16px;
  color: #888888;
  line-height: 1.7;
  margin-bottom: 40px;
}

.h3-062 {
  font-size: 18px;
  line-height: 1.7;
  color: #888888;
  margin-bottom: 40px;
}

.h3-063 {
  font-size: 32px;
}

.h3-064 {
  font-style: italic;
  color: #d4af37;
}

.h3-065 {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #1e1e1e;
}

.h3-066 {
  max-width: 1280px;
  margin: 0 auto;
}

.h3-067 {
  max-width: 560px;
  margin: 0 auto;
}

.h3-068 {
  max-width: 760px;
  margin: 0 auto;
}

.h3-069 {
  padding-left: 16px;
  font-size: 13px;
  color: #888888;
  border-bottom: 1px solid #111111;
}

.h3-070 {
  padding-left: 16px;
  font-size: 13px;
  color: #888888;
  border-bottom: 1px solid #161616;
}

.h3-071 {
  padding: 14px;
}

.h3-072 {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.h3-073 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,transparent 0%,#111111 100%);
}

.h3-074 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,transparent 60%,#111111 100%);
}

.h3-075 {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% -10%,rgba(80,40,160,0.18) 0%,transparent 70%);
  pointer-events: none;
}

.h3-076 {
  position: relative;
  min-height: 360px;
}

.h3-077 {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.h3-078 {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.h3-079 {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #1e1e1e;
  flex-shrink: 0;
}

.h3-080 {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #1e1e1e;
  flex-shrink: 0;
}

.h3-081 {
  position: relative;
  width: 56px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.h3-082 {
  position: relative;
  width: 140px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.h3-083 {
  transition: transform 0.2s;
}

.h3-084 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.h3-085 {
  width: 32px;
  height: 2px;
  background-color: #d4af37;
  margin: 0 auto 28px;
}

.h3-086 {
  width: 36px;
  height: 3px;
  background-color: #d4af37;
  margin-bottom: 24px;
  position: relative;
}

.h3-087 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #d4af37;
  animation: pulse 2s infinite;
}

/* ─── Shared utilities (topics, tools, cross-page) ───────────── */

/* Accent coloured inline text */
.text-accent       { color: var(--color-accent); }
.text-accent-italic{ color: var(--color-accent); font-style: italic; }

/* Generic section inner wrapper (max-width + centred) */
.section-inner      { max-width: 1280px; margin: 0 auto; }
.section-inner-720  { max-width: 720px;  margin: 0 auto; text-align: center; }
.section-inner-520  { max-width: 520px;  margin: 0 auto; }

/* Footer inner wrapper (used where footer-grid parent needs centring) */
.footer-inner       { max-width: 1280px; margin: 0 auto; }

/* ─── Editorial Standard section ────────────────────────────── */
.editorial-section  {
  background-color: #0d0d0d;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 80px 24px;
}
.editorial-eyebrow  {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 20px;
}
.editorial-title    {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700; color: var(--color-text);
  line-height: 1.2; margin-bottom: 24px;
}
.editorial-body     { font-size: 16px; color: var(--color-muted); line-height: 1.8; margin-bottom: 16px; }
.editorial-body-last{ font-size: 16px; color: var(--color-muted); line-height: 1.8; margin-bottom: 40px; }

/* ─── Generic Newsletter section (topics, shared) ────────────── */
.nl-section   {
  padding: 80px 24px;
  background: var(--color-bg);
  border-top: 1px solid #1a1a1a;
  text-align: center;
}
.nl-eyebrow   {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 16px;
}
.nl-title     {
  font-family: var(--font-serif);
  font-size: 36px; font-weight: 400;
  line-height: 1.2; color: var(--color-text);
  margin: 0 0 14px;
}
.nl-subtitle  { font-size: 15px; line-height: 1.7; color: #888888; margin: 0 0 32px; }
.nl-form      { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.nl-input     {
  flex: 1;
  background: #111111; border: 1px solid #222222;
  border-radius: 6px; padding: 12px 16px;
  font-size: 14px; color: var(--color-text);
  outline: none; transition: border-color 0.2s;
  font-family: var(--font-sans);
}
.nl-input:focus { border-color: #444444; }
.nl-disclaimer{ font-size: 12px; color: var(--color-faint); margin: 16px 0 0; }

/* ─── Shared newsletter button ───────────────────────────────── */
.btn-gold {
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 20px; border: none;
  border-radius: 2px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background-color 0.2s;
}
.btn-gold:hover { background-color: #e6c84a; }

/* ─── tl-newsletter-input focus (CSS, no JS inline) ──────────── */
.tl-newsletter-input:focus { border-color: #444444; }

/* ─── HOME 2 (h2-*) STYLES ─────────────────────────────────────────────── */
.h2-hidden { display: none; }

/* Modal dialog */
.h2-modal-box { background-color: #0f0f0f; border: 1px solid #1e1e1e; border-radius: 8px; padding: 48px 44px 40px; position: relative; overflow: hidden; }
.h2-modal-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; }
.h2-modal-title { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--color-text); margin: 0 0 16px; }
.h2-modal-sub { font-size: 15px; color: var(--color-muted); margin: 0 0 32px; }
.h2-modal-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.h2-modal-form input { flex: 1; background: #111111; border: 1px solid #222222; border-radius: 6px; padding: 12px 16px; font-size: 14px; color: var(--color-text); outline: none; font-family: var(--font-sans); }
.h2-modal-disclaimer { font-size: 12px; color: var(--color-faint); margin: 16px 0 0; }

/* Hero stat bar */
.h2-stat-bar { background:#0d0d0d; border-top:1px solid #1a1a1a; }
.h2-stat-bar-inner { max-width:1280px; margin:0 auto; padding:20px 24px; display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.h2-stat-number { font-family: var(--font-serif); font-size:22px; color:var(--color-accent); }
.h2-stat-label { font-size:13px; color:#888888; }
.h2-stat-cta { margin-left:auto; font-size:14px; font-weight:600; color:var(--color-text); border:1px solid #333; padding:9px 20px; border-radius:6px; text-decoration:none; white-space:nowrap; transition:border-color 0.2s; }
.h2-stat-cta:hover { border-color: #555; }

/* Trending ticker section */
.h2-trending-section { background:#111111; border-bottom:1px solid #1a1a1a; }
.h2-trending-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; height:48px; gap:0; overflow:hidden; }
.h2-trending-label { flex-shrink:0; display:flex; align-items:center; gap:8px; padding-right:20px; border-right:1px solid #222; margin-right:20px; }
.h2-trending-text { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-accent); }
.h2-trending-list { flex:1; display:flex; overflow-x:auto; scrollbar-width:none; }
.h2-trending-list::-webkit-scrollbar { display: none; }
.h2-trending-link { flex-shrink:0; font-size:13px; color:#999999; text-decoration:none; padding:0 16px; border-right:1px solid #222; white-space:nowrap; transition:color 0.2s; }
.h2-trending-link:hover { color:var(--color-text); }
.h2-trending-link-last { border-right: none; }

/* Daily briefing section */
.h2-daily-section { padding:72px 0; background:var(--color-bg); }
.h2-daily-inner { max-width:1280px; margin:0 auto; padding:0 24px; }
.h2-daily-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.h2-daily-card { background:var(--color-bg); border-radius:8px; overflow:hidden; border:1px solid #1a1a1a; }
.h2-daily-card-img-wrap { position:relative; height:200px; overflow:hidden; }
.h2-daily-card-tag { position:absolute; top:12px; left:12px; background:rgba(0,0,0,0.72); font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-accent); padding:4px 10px; border-radius:4px; }
.h2-daily-card-title { font-family: var(--font-serif); font-size:19px; font-weight:400; line-height:1.35; color:var(--color-text); margin:0 0 10px; }
.h2-daily-card-link { color:inherit; text-decoration:none; }
.h2-daily-card-excerpt { font-size:14px; line-height:1.6; color:#888888; margin:0 0 16px; }

/* Text utilities */
.h2-text-xs-muted { font-size: 12px; color: var(--color-muted); text-decoration: none; }

/* Deep reads section */
.h2-deep-reads-section { padding:72px 0; background:var(--color-bg); border-top:1px solid #1a1a1a; }
.h2-deep-reads-inner { max-width:1280px; margin:0 auto; padding:0 24px; }
.h2-deep-reads-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:start; }
.h2-featured-card { /* parent container */ }
.h2-featured-img-wrap { position:relative; height:320px; border-radius:8px; overflow:hidden; margin-bottom:24px; }
.h2-featured-fade { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 55%); }
.h2-featured-badge { position:absolute; top:16px; left:16px; background:var(--color-accent); color:#000000; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:4px 10px; border-radius:4px; }
.h2-featured-title { font-family: var(--font-serif); font-size:24px; font-weight:400; line-height:1.3; color:var(--color-text); margin:0 0 14px; }
.h2-featured-link { color:inherit; text-decoration:none; }
.h2-featured-blockquote { border-left:3px solid var(--color-accent); padding-left:16px; margin:0 0 20px; font-family: var(--font-serif); font-size:17px; font-style:italic; line-height:1.5; color:#aaaaaa; }

/* Reading list */
.h2-reading-row { display:flex; gap:16px; padding:20px 0; border-bottom:1px solid #1a1a1a; text-decoration:none; align-items:flex-start; }
.h2-reading-row:hover .h2-reading-title { color: var(--color-accent); }
.h2-reading-row-last { border-bottom: none; }
.h2-reading-number { font-family: var(--font-serif); font-size:26px; color:#2a2a2a; line-height:1; flex-shrink:0; width:32px; }
.h2-reading-content { flex:1; display:flex; gap:12px; align-items:flex-start; }
.h2-reading-text { flex:1; }
.h2-reading-cat { display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-accent); margin-bottom:6px; }
.h2-reading-title { font-family: var(--font-serif); font-size:16px; font-weight:400; line-height:1.4; color:var(--color-text); margin:0; transition:color 0.2s; }
.h2-reading-img { width:60px; height:52px; object-fit:cover; border-radius:4px; flex-shrink:0; }

/* Promo band */
.h2-promo-band { background:var(--color-accent); padding:28px 24px; }
.h2-promo-band-inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.h2-promo-band-text p { font-family: var(--font-serif); font-size:20px; font-weight:400; color:#000000; margin:0; }
.h2-promo-band-cta { flex-shrink:0; background:#000000; color:var(--color-accent); font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:12px 28px; border-radius:6px; text-decoration:none; }

/* Tools spotlight */
.h2-tools-section { padding:72px 0; background:var(--color-bg); border-top:1px solid #1a1a1a; }
.h2-tools-inner { max-width:1280px; margin:0 auto; padding:0 24px; }
.h2-tools-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.h2-tool-card { display:block; position:relative; height:200px; border-radius:8px; overflow:hidden; text-decoration:none; border:1px solid #1a1a1a; }
.h2-tool-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.5; }
.h2-tool-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 50%); }
.h2-tool-badge-wrap { position:absolute; top:12px; left:12px; }
.h2-tool-badge { background:rgba(212,175,55,0.15); color:var(--color-accent); font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:3px 8px; border-radius:4px; border:1px solid rgba(212,175,55,0.3); }
.h2-tool-content { position:absolute; bottom:0; left:0; right:0; padding:16px; }
.h2-tool-name { font-family: var(--font-serif); font-size:18px; font-weight:400; color:var(--color-text); margin:0 0 4px; }
.h2-tool-desc { font-size: 12px; color: var(--color-muted); margin: 0; }

/* Podcast section */
.h2-podcast-section { padding:72px 0; background:var(--color-bg); border-top:1px solid #1a1a1a; }
.h2-podcast-inner { max-width:1280px; margin:0 auto; padding:0 24px; }
.h2-podcast-grid { display:grid; grid-template-columns:1fr 1.8fr; gap:64px; align-items:start; }
.h2-podcast-intro { /* left column */ }
.h2-podcast-eyebrow { display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-accent); margin-bottom:16px; }
.h2-podcast-title { font-family: var(--font-serif); font-size:32px; font-weight:400; line-height:1.2; color:var(--color-text); margin:0 0 16px; }
.h2-podcast-desc { font-size:15px; line-height:1.7; color:#888888; margin:0 0 32px; }
.h2-podcast-platform-link { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--color-muted); font-size:13px; font-weight:500; transition:color 0.2s; }
.h2-podcast-platform-link:hover { color:var(--color-text); }
.h2-podcast-spotify-icon { color:#1db954; flex-shrink:0; }
.h2-podcast-apple-icon { color:#fc3c44; flex-shrink:0; }
.h2-podcast-rss-icon { color:var(--color-accent); flex-shrink:0; }

/* Episodes */
.h2-episode-row { display:flex; align-items:center; gap:16px; padding:20px 0; border-bottom:1px solid #1a1a1a; text-decoration:none; color:inherit; }
.h2-episode-row-last { border-bottom: none; }
.h2-episode-play-btn { flex-shrink:0; width:44px; height:44px; border-radius:50%; background:#ff6b00; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.h2-episode-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.h2-episode-content { flex:1; min-width:0; }
.h2-episode-title { font-size:13px; font-weight:600; color:var(--color-text); margin:0 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.h2-episode-meta { font-size:12px; color:#888888; margin:0; }

/* Podcast footer */
.h2-podcast-footer { text-align:center; margin-top:48px; }
.h2-podcast-all-btn { font-size:14px; font-weight:600; letter-spacing:0.04em; color:var(--color-accent); text-decoration:none; border:1px solid rgba(212,175,55,0.35); padding:12px 32px; border-radius:6px; display:inline-block; transition:background 0.2s; }
.h2-podcast-all-btn:hover { background:rgba(212,175,55,0.08); }

/* Newsletter section */
.h2-newsletter-section { padding:80px 24px; background:var(--color-bg); border-top:1px solid #1a1a1a; text-align:center; }
.h2-newsletter-inner { max-width:520px; margin:0 auto; }
.h2-newsletter-eyebrow { display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent); margin-bottom:16px; }
.h2-newsletter-title { font-family: var(--font-serif); font-size:36px; font-weight:400; line-height:1.2; color:var(--color-text); margin:0 0 14px; }
.h2-newsletter-desc { font-size:15px; line-height:1.7; color:#888888; margin:0 0 32px; }
.h2-newsletter-form { display:flex; gap:8px; max-width:420px; margin:0 auto; }
.h2-newsletter-input { flex:1; background:#111111; border:1px solid #222222; border-radius:6px; padding:12px 16px; font-size:14px; color:var(--color-text); outline:none; font-family: var(--font-sans); }
.h2-newsletter-input:focus { border-color: #444444; }
.h2-newsletter-disclaimer { font-size:12px; color:#888888; margin:16px 0 0; }

/* Section headers (reusable) */
.h2-section-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:40px; }
.h2-section-title { font-family: var(--font-serif); font-size:28px; font-weight:400; color:var(--color-text); margin:0; }
.h2-view-all { font-size:13px; font-weight:600; letter-spacing:0.04em; color:var(--color-accent); text-decoration:none; }

/* Mobile nav styles */
.h2-mobile-nav-header { font-size: 15px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text); padding: 12px 0 8px; border-bottom: 1px solid #161616; }
.h2-mobile-nav-link { padding-left: 16px; font-size: 13px; color: #888888; border-bottom: 1px solid #111111; }
.h2-mobile-nav-link-last { border-bottom: 1px solid #161616; }

/* Dropdown arrow */
.h2-dropdown-arrow { transition: transform 0.2s; }

/* Hero section classes */
.h2-hero { padding: 80px 0; }
.h2-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.h2-hero-left { /* left column */ }
.h2-hero-eyebrow-group { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.h2-hero-eyebrow-bar { width: 32px; height: 2px; background-color: var(--color-accent); }
.h2-hero-eyebrow-text { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.h2-hero-title { font-family: var(--font-serif); font-size: 48px; font-weight: 700; color: var(--color-text); line-height: 1.2; margin: 0 0 24px; }
.h2-hero-title-em { color: var(--color-accent); font-style: italic; }
.h2-hero-excerpt { font-size: 17px; color: var(--color-muted); line-height: 1.7; margin: 0 0 40px; }
.h2-hero-author { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.h2-hero-author-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.h2-hero-author-name { font-weight: 600; color: var(--color-text); }
.h2-hero-author-title { font-size: 12px; color: var(--color-muted); }
.h2-hero-cta { /* styling handled by .btn-gold */ }
.h2-hero-image-col { position: relative; }
.h2-hero-image { width: 100%; height: auto; display: block; }
.h2-hero-image-fade { position: absolute; inset: 0; background: linear-gradient(to left, transparent, var(--color-bg)); pointer-events: none; }


/* ─── Auto-fixed broken class replacements ──────────────────── */

.writer-card-cell { display:flex;flex-direction:column;background-color:#090909;padding:32px;border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);transition:background-color 0.15s; }
.section-pad-72-bt { background:var(--color-bg);padding:72px 24px;border-top:1px solid #161616; }
.section-pad-80-64-center { background:var(--color-bg);padding:80px 24px 64px;border-bottom:1px solid var(--color-border);text-align:center; }
.section-pad-80-bt { background:var(--color-bg);padding:80px 24px;border-top:1px solid #161616; }
.section-pad-96-center { background:var(--color-bg);padding:96px 24px;border-top:1px solid var(--color-border);text-align:center; }
.flex-c-gap12-mb28-rel { display:flex;align-items:center;gap:12px;margin-bottom:28px;position:relative; }
.flex-c-gap12-pt24-bt { display:flex;align-items:center;gap:12px;padding-top:24px;border-top:1px solid var(--color-border); }
.flex-c-gap20-py20 { display:flex;align-items:center;gap:20px;padding:20px 0; }
.flex-c-gap20-py20-bb { display:flex;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--color-border); }
.flex-c-gap6-pt12-bt { display:flex;align-items:center;gap:6px;padding-top:12px;border-top:1px solid #1a1a1a; }
.flex-col-gap10-rel { display:flex;flex-direction:column;gap:10px;position:relative; }
.flex-start-gap12-notable { display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--color-border);text-decoration:none; }
.flex-wrap-stats { display:flex;flex-wrap:wrap;gap:48px;row-gap:16px;padding-top:32px;border-top:1px solid var(--color-border); }
.flex-wrap-gap6-center-mb20 { display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:20px; }
.flex-wrap-filter-tools { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--color-border); }
.flex-wrap-filter-writers { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid var(--color-border); }
.flex-between-pt16-bt-subtle { display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid #161616; }
.flex-between-pt16-bt { display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--color-border); }
.flex-between-pt20-bt { display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid var(--color-border); }
.flex-section-hdr-wrap { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;flex-wrap:wrap;row-gap:16px; }
.flex-section-hdr-bb16 { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid var(--color-border); }
.flex-section-hdr-bb20 { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--color-border);flex-wrap:wrap;row-gap:8px; }
.flex-col { display:flex;flex-direction:column; }
.tool-cell { display:flex;flex-direction:column;background-color:var(--color-bg);padding:28px;text-decoration:none;color:inherit;transition:background-color 0.15s; }
.article-card-link { display:flex;flex-direction:column;text-decoration:none;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;overflow:hidden;transition:border-color 0.2s,transform 0.2s; }
.flex-section-hdr { display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:32px; }
.flex-gap10-mb6-center { display:flex;gap:10px;margin-bottom:6px;align-items:center; }
.flex-gap12-center { display:flex;gap:12px;align-items:center; }
.flex-gap12-wrap { display:flex;gap:12px;flex-wrap:wrap; }
.sidebar-post-item { display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid #161616;text-decoration:none;transition:padding-left 0.15s; }
.sidebar-post-item-last { display:flex;gap:14px;align-items:flex-start;padding:16px 0;text-decoration:none;transition:padding-left 0.15s; }
.flex-gap16-center { display:flex;gap:16px;align-items:center; }
.flex-gap16-center-wrap { display:flex;gap:16px;align-items:center;flex-wrap:wrap; }
.list-item-bb { display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid #161616;text-decoration:none;transition:padding-left 0.15s; }
.list-item-last { display:flex;gap:16px;align-items:center;padding:18px 0;text-decoration:none;transition:padding-left 0.15s; }
.flex-gap16-center-wrap-mb48 { display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:48px; }
.writer-card-header { display:flex;gap:16px;margin-bottom:20px;align-items:center; }
.flex-gap20 { display:flex;gap:20px; }
.list-item-lg-bb { display:flex;gap:20px;align-items:center;padding:16px;border-top:1px solid var(--color-border);text-decoration:none;transition:padding-left 0.15s; }
.list-item-lg-last { display:flex;gap:20px;align-items:center;padding:16px;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);text-decoration:none;transition:padding-left 0.15s; }
.list-item-top-bb { display:flex;gap:20px;align-items:flex-start;padding:20px 0;border-bottom:1px solid #161616;text-decoration:none;transition:padding-left 0.15s; }
.list-item-top-last { display:flex;gap:20px;align-items:flex-start;padding:20px 0;text-decoration:none;transition:padding-left 0.15s; }
.featured-writer-header { display:flex;gap:20px;margin-bottom:24px;align-items:flex-start; }
.flex-gap4-wrap { display:flex;gap:4px;flex-wrap:wrap; }
.flex-tags-mb16 { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px; }
.flex-tags-mb20 { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px; }
.flex-gap8-wrap { display:flex;gap:8px;flex-wrap:wrap; }
.flex-gap8-center-wrap { display:flex;gap:8px;justify-content:center;flex-wrap:wrap; }
.flex-gap8-form { display:flex;gap:8px;max-width:440px;margin:0 auto; }

/* ─── List item hover (sidebar posts, roster items) ─────────── */
.sidebar-post-item:hover,
.list-item-bb:hover,
.list-item-last:hover,
.list-item-top-bb:hover,
.list-item-top-last:hover { padding-left: 6px; }
.list-item-lg-bb:hover,
.list-item-lg-last:hover { padding-left: 6px; }

/* ─── Tool cell hover ─────────────────────────────────────────── */
.tool-cell:hover { background-color: var(--color-surface); }

/* ═══════════════════════════════════════════════════════════════
   MISSING CLASS DEFINITIONS — shared utilities & page-specific
   ═══════════════════════════════════════════════════════════════ */

/* ─── Core flex utilities ────────────────────────────────────── */
.flex            { display: flex; }
.flex-col        { display: flex; flex-direction: column; }
.flex-col-gap2   { display: flex; flex-direction: column; gap: 2px; }
.flex-col-gap14  { display: flex; flex-direction: column; gap: 14px; }
.flex-c-gap5     { display: flex; align-items: center; gap: 5px; }
.flex-c-gap6     { display: flex; align-items: center; gap: 6px; }
.flex-c-gap12    { display: flex; align-items: center; gap: 12px; }
.flex-c-gap14    { display: flex; align-items: center; gap: 14px; }
.flex-c-gap16    { display: flex; align-items: center; gap: 16px; }
.flex-wrap-gap6  { display: flex; flex-wrap: wrap; gap: 6px; }
.flex-wrap-gap10 { display: flex; flex-wrap: wrap; gap: 10px; }

/* ─── Background utilities ───────────────────────────────────── */
.bg-dark   { background-color: var(--color-bg); }
.bg-darker { background-color: #0d0f14; }
.bg-900    { background-color: #0d0d0d; }

/* ─── Section padding utilities ──────────────────────────────── */
.section-dark-pad-72  { background: var(--color-bg); padding: 72px 24px; }
.section-dark-pad-80  { background: var(--color-bg); padding: 80px 24px; }
.section-dark-pad-96  { background: var(--color-bg); padding: 96px 24px; }
.section-dark-pad-80-64 { background: var(--color-bg); padding: 80px 24px 64px; }

/* ─── Spacing utilities ──────────────────────────────────────── */
.m-0  { margin: 0; }
.-ml-8 { margin-left: -8px; }

/* ─── Border utilities ───────────────────────────────────────── */
.border-top-main   { border-top: 1px solid var(--color-border); }
.border-bottom-main{ border-bottom: 1px solid var(--color-border); }
.border-top-100    { border-top: 1px solid #1a1a1a; }

/* ─── Text utilities ─────────────────────────────────────────── */
.text-xs-muted { font-size: 11px; color: var(--color-muted); }
.text-success  { color: #059669; }
.text-lg       { font-size: 18px; }

/* ─── Dropdown arrow (navbar) ────────────────────────────────── */
.dropdown-arrow { transition: transform 0.2s; }

/* ─── Avatar overlap (stacked avatar rows) ───────────────────── */
.avatar-22  { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.avatar-38  { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.h-180 { height: 180px; object-fit: cover; }
.h-200 { height: 200px; object-fit: cover; }

/* ─── Block link (article card anchor) ──────────────────────── */
.block-link  { display: block; text-decoration: none; }
.link-none   { text-decoration: none; }

/* ─── Newsletter shared ──────────────────────────────────────── */
.newsletter-success    { display: none; }
.newsletter-success.visible { display: block; }
.newsletter-fine-print { font-size: 12px; color: var(--color-faint); margin-top: 12px; }
.newsletter-form-el    { display: flex; gap: 0; max-width: 480px; margin: 0 auto; }
.newsletter-wrapper    { max-width: 560px; margin: 0 auto; text-align: center; }

/* ─── h2-promo-band-text ─────────────────────────────────────── */
.h2-promo-band-text { max-width: 640px; }

/* ─── Footer col ─────────────────────────────────────────────── */
.footer-col { }

/* ─── Category tab (home3) ───────────────────────────────────── */
.category-tab-btn {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-muted);
  background: none; border: 1px solid transparent;
  padding: 8px 18px; border-radius: 2px; cursor: pointer;
  font-family: var(--font-sans); transition: all 0.2s;
}
.category-tab-btn:hover,
.category-tab-btn.active {
  color: var(--color-text); border-color: var(--color-border-lg);
  background: var(--color-surface);
}
.category-tab-panel { display: none; }
.category-tab-panel.active { display: block; }

/* ─── Podcast ────────────────────────────────────────────────── */
.podcast-cat { font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:7px 14px;border-radius:2px;border:1px solid #222222;cursor:pointer;transition:all 0.15s;background-color:transparent;color:#888888;font-family:var(--font-sans); }
.podcast-cat.active { background-color:#d97706;border-color:#d97706;color:#fff; }
.episode-row {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--color-border);
  text-decoration: none; transition: padding-left 0.15s;
}
.episode-row > div:nth-child(2) { flex: 1; min-width: 0; }
.episode-row:last-child { border-bottom: none; }
.episode-row:hover { padding-left: 6px; }

/* ─── Tool card & filter ─────────────────────────────────────── */
.tool-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 24px; display: flex; flex-direction: column;
  gap: 16px; transition: border-color 0.2s, transform 0.2s;
}
.tool-card:hover { border-color: var(--color-border-lg); transform: translateY(-2px); }
.tool-filter-btn {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-muted);
  background: none; border: 1px solid var(--color-border);
  padding: 8px 18px; border-radius: 2px; cursor: pointer;
  font-family: var(--font-sans); transition: all 0.2s;
}
.tool-filter-btn:hover,
.tool-filter-btn.active {
  color: var(--color-text); border-color: var(--color-border-lg);
  background: var(--color-surface);
}

/* ─── Writers beat filter ────────────────────────────────────── */
.beat-btn {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-muted);
  background: none; border: 1px solid var(--color-border);
  padding: 8px 18px; border-radius: 2px; cursor: pointer;
  font-family: var(--font-sans); transition: all 0.2s;
}
.beat-btn:hover { color: var(--color-text); border-color: var(--color-border-lg); background: var(--color-surface); }
.beat-btn.active { background-color: #d97706; border-color: #d97706; color: #fff; }
.writer-card {
  display: flex; flex-direction: column;
  background: var(--color-bg); padding: 28px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}
.writer-card:hover { background: var(--color-surface); }
.piece-title { font-size: 13px; color: var(--color-muted); line-height: 1.5; transition: color 0.15s; }
a:hover .piece-title { color: var(--color-text); }

/* ─── Topics page ────────────────────────────────────────────── */
.topic-filter-btn {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-muted);
  background: none; border: 1px solid var(--color-border);
  padding: 8px 18px; border-radius: 2px; cursor: pointer;
  font-family: var(--font-sans); transition: all 0.2s;
}
.topic-filter-btn:hover,
.topic-filter-btn.active {
  color: var(--color-text); border-color: var(--color-border-lg);
}
.tp-main { background: var(--color-bg); min-height: 100vh; }
.tp-featured { padding: 64px 24px; border-bottom: 1px solid var(--color-border); }
.tp-featured-badge, .tp-featured-badge-dt, .tp-featured-badge-ml {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; padding: 3px 8px; border-radius: 2px;
}
.tp-featured-card, .tp-featured-card-dt, .tp-featured-card-ml {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 8px; overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
}
.tp-featured-card:hover,
.tp-featured-card-dt:hover,
.tp-featured-card-ml:hover { border-color: var(--color-border-lg); transform: translateY(-2px); }
.tp-featured-content { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.tp-featured-count {
  font-family: var(--font-serif); font-size: 14px; font-weight: 700;
  color: var(--color-text); margin-bottom: 6px;
}
.tp-featured-cta {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-muted);
  text-decoration: none; transition: color 0.2s;
}
.tp-featured-cta:hover { color: var(--color-text); }

/* ─── Topics page — remaining tp- classes ────────────────────── */
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.tp-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 28px; text-decoration: none;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s, transform 0.2s;
}
.tp-card:hover { border-color: var(--color-border-lg); transform: translateY(-2px); }
.tp-card-icon {
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tp-card-name {
  font-family: var(--font-serif); font-size: 18px; font-weight: 700;
  color: var(--color-text); line-height: 1.3;
}
.tp-card-desc { font-size: 14px; color: var(--color-muted); line-height: 1.6; flex: 1; }
.tp-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid var(--color-border);
}
.tp-card-count { font-size: 12px; color: var(--color-faint); }
.tp-card-link  { font-size: 12px; color: var(--color-muted); transition: color 0.2s; }
.tp-card-link:hover { color: var(--color-text); }
.tp-hero  { padding: 80px 24px 64px; border-bottom: 1px solid var(--color-border); position: relative; overflow: hidden; }
.tp-hero-bg { position: absolute; top: -100px; right: -80px; width: 700px; height: 700px; background: radial-gradient(ellipse, rgba(212,175,55,0.05) 0%, transparent 70%); pointer-events: none; }
.tp-hero-inner { max-width: 1280px; margin: 0 auto; }
.tp-hero-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 20px; }
.tp-hero-title { font-family: var(--font-serif); font-size: clamp(36px,6vw,72px); font-weight: 700; color: var(--color-text); line-height: 1.08; letter-spacing: -0.02em; max-width: 760px; margin-bottom: 24px; }
.tp-hero-subtitle { font-size: 17px; color: var(--color-muted); line-height: 1.7; max-width: 560px; margin-bottom: 48px; }
.tp-stats { border-top: 1px solid var(--color-border); padding-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 24px 0; }
.tp-stat { padding-bottom: 16px; }
.tp-stat-value { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--color-text); line-height: 1; margin-bottom: 4px; }
.tp-stat-label { font-size: 12px; color: var(--color-muted); letter-spacing: 0.04em; }
.tp-filter-section { padding: 40px 24px 0; }
.tp-filter-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tp-topics-section { padding: 32px 24px 80px; }
.explore-cta, .browse-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--color-muted); text-decoration: none; transition: color 0.2s;
}
.explore-cta:hover, .browse-cta:hover { color: var(--color-text); }

/* ─── Modal (topics, home pages) ────────────────────────────── */
.modal-overlay { display: none; }
.modal-box {
  background: #0f0f0f; border: 1px solid var(--color-border);
  border-radius: 8px; padding: 48px 44px 40px;
  position: relative; max-width: 540px; width: 100%;
  margin: auto; overflow: hidden;
}
.modal-title {
  font-family: var(--font-serif); font-size: clamp(24px,4vw,32px);
  font-weight: 700; color: var(--color-text); margin-bottom: 12px; line-height: 1.2;
}
.modal-sub   { font-size: 15px; color: var(--color-muted); line-height: 1.7; margin-bottom: 28px; }
.modal-form  { display: flex; gap: 0; margin-bottom: 16px; }
.modal-disclaimer { font-size: 11px; color: var(--color-faint); margin-top: 12px; text-align: center; }

/* ─── Article page ───────────────────────────────────────────── */
.article-title {
  font-family: var(--font-serif); font-size: clamp(28px,5vw,52px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--color-text); margin-bottom: 20px;
}
.article-subtitle  { font-size: 18px; color: var(--color-muted); line-height: 1.7; margin-bottom: 32px; }
.article-prose     { font-size: 17px; line-height: 1.8; color: #cccccc; max-width: 680px; }
.article-section-title {
  font-family: var(--font-serif); font-size: 26px; font-weight: 700;
  color: var(--color-text); margin: 48px 0 20px;
}
.breadcrumb-link    { font-size: 13px; color: var(--color-muted); text-decoration: none; transition: color 0.2s; }
.breadcrumb-link:hover { color: var(--color-text); }
.breadcrumb-sep     { font-size: 13px; color: var(--color-faint); margin: 0 6px; }
.breadcrumb-current { font-size: 13px; color: var(--color-faint); }
.badge-category {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; padding: 4px 10px; border-radius: 2px;
  background-color: var(--color-accent);
}
.card-sidebar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 24px; }
.card-sidebar-title { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 16px; }
.btn-like { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-muted); background: none; border: none; cursor: pointer; font-family: var(--font-sans); transition: color 0.2s; padding: 0; }
.btn-like:hover { color: var(--color-text); }
.btn-like-sm { font-size: 12px; color: var(--color-muted); background: none; border: none; cursor: pointer; font-family: var(--font-sans); transition: color 0.2s; padding: 0; }
.btn-text-muted { font-size: 13px; color: var(--color-muted); background: none; border: none; cursor: pointer; font-family: var(--font-sans); transition: color 0.2s; padding: 0; text-decoration: none; }
.btn-text-muted:hover { color: var(--color-text); }
.comment-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 20px; }

/* ─── Category page ──────────────────────────────────────────── */
.category-hero-content { max-width: 1280px; margin: 0 auto; position: relative; }
.category-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 20px; }
.category-title { font-family: var(--font-serif); font-size: clamp(36px,6vw,64px); font-weight: 700; color: var(--color-text); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 20px; }
.category-description { font-size: 17px; color: var(--color-muted); line-height: 1.7; max-width: 560px; margin-bottom: 48px; }
.category-icon-box { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); margin: 0 auto 20px; }
.category-breadcrumb { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 32px; }
.category-hero-divider { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 40px 0; }
.category-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0; }
.category-stats-grid .stat-item { text-align: center; padding: 0 24px; }
.category-stats-grid .stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,0.1); }
.articles-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 1024px) { .articles-grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px)  { .articles-grid-3 { grid-template-columns: 1fr; } }
.article-card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-muted); }
.featured-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.featured-content { padding: 28px; }
.featured-author { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.contributors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 20px; }

/* ─── Subscribe page ─────────────────────────────────────────── */
.cta-section { padding: 120px 24px; background: #0c0820; text-align: center; position: relative; overflow: hidden; }
.cta-inner { max-width: 640px; margin: 0 auto; position: relative; }
.cta-title { font-family: var(--font-serif); font-size: clamp(28px,4vw,44px); font-weight: 700; color: var(--color-text); line-height: 1.2; margin-bottom: 16px; }
.cta-subtitle { font-size: 17px; color: var(--color-muted); line-height: 1.7; margin-bottom: 40px; }
.cta-legal { font-size: 12px; color: var(--color-faint); margin-top: 16px; }
.cta-link { color: var(--color-muted); text-decoration: none; transition: color 0.2s; }
.cta-link:hover { color: var(--color-text); }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 24px; }
.benefit-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 16px; }
.benefit-text { font-size: 14px; color: var(--color-muted); line-height: 1.6; }
.faq-container { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 28px 0; background: none; border: none; cursor: pointer; font-family: var(--font-sans); text-align: left; }
.faq-question { font-size: 18px; font-weight: 600; color: var(--color-text); }
.faq-icon { color: var(--color-muted); flex-shrink: 0; transition: transform 0.25s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { font-size: 15px; color: var(--color-muted); line-height: 1.7; padding-bottom: 20px; display: none; }
.faq-item.open .faq-answer { display: block; }

/* ─── Common shared classes (icon-open, footer, text, spacing) ── */
.icon-open { display: block; }

/* Footer */
.footer-socials     { display: flex; gap: 12px; }
.footer-bottom-links{ display: flex; gap: 24px; }
.footer-copyright   { font-size: 12px; color: var(--color-muted); }
.footer-link-sm     { font-size: 12px; color: var(--color-muted); text-decoration: none; transition: color 0.2s; }
.footer-link-sm:hover { color: var(--color-text); }

/* Text utilities */
.text-accent-gold       { color: var(--color-accent); }
.text-muted             { color: var(--color-muted); }
.text-secondary-semi    { color: #aaaaaa; font-weight: 600; }
.text-sm-semi           { font-size: 13px; font-weight: 600; color: var(--color-text); }
.text-xs                { font-size: 11px; color: var(--color-muted); }
.text-xs-muted-dark     { font-size: 11px; color: #888888; }
.text-xs-semi           { font-size: 11px; font-weight: 700; }

/* Spacing utilities */
.mb-10  { margin-bottom: 10px; }
.mb-12  { margin-bottom: 12px; }
.mb-16  { margin-bottom: 16px; }
.mb-60  { margin-bottom: 60px; }
.mt-8   { margin-top: 8px; }
.mx-auto{ margin-left: auto; margin-right: auto; }
.pb-0   { padding-bottom: 0; }
.pt-52  { padding-top: 52px; }

/* Max-width helpers */
.max-w-800  { max-width: 800px; }
.max-w-760  { max-width: 760px; }
.max-w-1000 { max-width: 1000px; }
.max-w-1280 { max-width: 1280px; }

/* Flex gap utilities (px suffix variants from podcast) */
.flex-center-gap-12px { display: flex; align-items: center; gap: 12px; }
.flex-center-gap-14px { display: flex; align-items: center; gap: 14px; }
.flex-center-gap-16px { display: flex; align-items: center; gap: 16px; }
.flex-column-gap-10px { display: flex; flex-direction: column; gap: 10px; }
.flex-center-gap-6    { display: flex; align-items: center; gap: 6px; }
.flex-gap-12          { display: flex; gap: 12px; }

/* Stats */
.stats-grid  { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; margin-top: 48px; }
.stat-item   { display: flex; flex-direction: column; gap: 4px; }
.stat-value  { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--color-text); line-height: 1; }
.stat-label  { font-size: 12px; color: var(--color-muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* Mobile nav */
.mobile-nav-section { font-size: 15px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text); padding: 12px 0 8px; border-bottom: 1px solid #161616; }
.mobile-nav-subitem { padding-left: 16px; font-size: 13px; color: #888888; border-bottom: 1px solid #111111; }

/* Modal */
.modal-eyebrow-label    { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; position: relative; }
.modal-gradient-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(80,40,160,0.18) 0%, transparent 70%); pointer-events: none; }

/* Article */
.prose-h2 { font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: var(--color-text); margin: 48px 0 20px; }
.grid-3col-article { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-5col { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
@media (max-width: 1024px) { .grid-3col-article { grid-template-columns: repeat(2,1fr); } .grid-5col { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px)  { .grid-3col-article { grid-template-columns: 1fr; } .grid-5col { grid-template-columns: repeat(2,1fr); } }
.toc-link { display: block; font-size: 13px; color: var(--color-muted); text-decoration: none; padding: 6px 0 6px 12px; border-left: 2px solid transparent; transition: all 0.2s; }
.toc-link:hover, .toc-link.active { color: var(--color-text); border-left-color: var(--color-accent); }
.related-article-link { display: flex; gap: 14px; text-decoration: none; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #161616; transition: padding-left 0.15s; }
.related-article-link:hover { padding-left: 6px; }
.share-btn, .share-link { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); text-decoration: none; padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 2px; transition: all 0.2s; background: none; cursor: pointer; font-family: var(--font-sans); }
.share-btn:hover, .share-link:hover { color: var(--color-text); border-color: var(--color-border-lg); }
.tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 2px; }
.comment-meta  { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-muted); margin-bottom: 10px; }
.comment-text  { font-size: 14px; color: #cccccc; line-height: 1.7; }
.comment-reply-text { font-size: 12px; color: var(--color-muted); background: none; border: none; cursor: pointer; font-family: var(--font-sans); padding: 0; transition: color 0.2s; }
.comment-reply-text:hover { color: var(--color-text); }
.form-label    { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 6px; display: block; }
.form-input, .form-textarea { width: 100%; background: #111111; border: 1px solid #222222; border-radius: 4px; padding: 12px 16px; font-size: 14px; color: var(--color-text); outline: none; font-family: var(--font-sans); transition: border-color 0.2s; }
.form-input:focus, .form-textarea:focus { border-color: #444444; }
.form-textarea { min-height: 120px; resize: vertical; }

/* Category page */
.hero-category { padding: 80px 24px 64px; position: relative; overflow: hidden; }
.hero-glow     { position: absolute; top: -100px; right: -80px; width: 700px; height: 700px; background: radial-gradient(ellipse, rgba(212,175,55,0.05) 0%, transparent 70%); pointer-events: none; }
.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; }
@media (max-width: 768px) { .featured-grid { grid-template-columns: 1fr; } }
.featured-img   { width: 100%; height: 240px; object-fit: cover; display: block; }
.featured-link  { display: block; text-decoration: none; color: inherit; transition: opacity 0.2s; }
.featured-link:hover { opacity: 0.9; }
.filter-tags-sticky    { position: sticky; top: 61px; z-index: 10; background: rgba(9,9,9,0.95); backdrop-filter: blur(8px); padding: 16px 24px; border-bottom: 1px solid var(--color-border); }
.filter-tags-container { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px; }
.filter-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); background: none; border: 1px solid var(--color-border); padding: 6px 14px; border-radius: 2px; cursor: pointer; font-family: var(--font-sans); transition: all 0.2s; }
.filter-tag:hover, .filter-tag.active { color: var(--color-text); border-color: var(--color-border-lg); background: var(--color-surface); }

/* Subscribe page */
.hero-gradient-section { position: relative; overflow: hidden; background: #0c0820; padding: 120px 24px; }
.hero-gradient-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(80,40,160,0.55) 0%, rgba(20,10,50,0.85) 55%, rgba(10,8,20,1) 100%); pointer-events: none; }
.hero-inner    { max-width: 760px; margin: 0 auto; position: relative; text-align: center; }
.plans-grid    { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 640px)  { .plans-grid { grid-template-columns: 1fr; } }
.plan-featured { background: #111111; border: 1px solid var(--color-border); border-radius: 8px; padding: 32px; position: relative; }
.plan-label    { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; }
.plan-label-pro{ font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; }
.plan-badge    { position: absolute; top: -10px; right: 20px; background: var(--color-accent); color: var(--color-bg); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 2px; }
.plan-desc     { font-size: 14px; color: var(--color-muted); line-height: 1.6; margin-bottom: 20px; }
.plan-divider  { border: none; border-top: 1px solid var(--color-border); margin: 20px 0; }
.plan-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.plan-note     { font-size: 11px; color: var(--color-faint); margin-top: 12px; }
.price-flex    { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.price-period  { font-size: 14px; color: var(--color-muted); }
.price-flex .plan-price { font-family: var(--font-serif); font-size: 52px; font-weight: 700; color: var(--color-text); line-height: 1; display: block; }
.section-divider     { border: none; border-top: 1px solid var(--color-border); margin: 0; }
.section-divider-top { border-top: 1px solid var(--color-border); padding-top: 80px; }
.section-subtitle    { font-size: 17px; color: var(--color-muted); line-height: 1.7; max-width: 560px; margin: 0 auto 40px; text-align: center; }
.section-subtitle-wide { font-size: 17px; color: var(--color-muted); line-height: 1.7; max-width: 720px; margin: 0 auto 48px; text-align: center; }
.feature-item  { display: flex; align-items: flex-start; gap: 12px; }
.feature-check { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-accent); }
.feature-text  { font-size: 14px; color: var(--color-muted); line-height: 1.6; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px)  { .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial-quote { color: var(--color-accent-bright); margin-bottom: 20px; line-height: 1; }
.testimonial-quote svg { width: 40px; height: 40px; }
.testimonial-name  { font-size: 14px; font-weight: 600; color: var(--color-text); }
.testimonial-role  { font-size: 12px; color: var(--color-muted); }
.topic-accordion-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; background: none; border: none; cursor: pointer; font-family: var(--font-sans); }

/* ─── Missing idx-32 to idx-47 (index.html specific) ─────────── */
.idx-19 { display: none; }
.idx-32 { font-size: 12px; color: #888888; line-height: 1.4; }
.idx-33 { font-size: 12px; color: var(--color-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.idx-34 { font-size: 14px; color: var(--color-muted); line-height: 1.65; }
.idx-35 { font-size: 14px; color: var(--color-muted); line-height: 1.7; }
.idx-36 { font-size: 13px; font-weight: 600; color: var(--color-text); margin: 0; }
.idx-37 { font-size: 13px; color: var(--color-muted); }
.idx-38 { font-size: 13px; color: #888888; line-height: 1.65; }
.idx-39 { font-size: 15px; color: var(--color-muted); line-height: 1.75; margin-bottom: 32px; position: relative; }
.idx-40 { font-size: 13px; font-weight: 600; line-height: 1.4; color: #cccccc; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idx-41 { font-size: 15px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text); padding: 12px 0 8px; border-bottom: 1px solid #161616; }
.idx-42 { font-size: 15px; color: var(--color-muted); line-height: 1.75; margin-bottom: 32px; }
.idx-43 { font-size: 17px; color: var(--color-muted); line-height: 1.7; margin-bottom: 36px; }
.idx-44 { font-family: var(--font-serif); font-size: clamp(36px,4.5vw,58px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text); margin: 0; }
.idx-45 { font-size: 17px; line-height: 1.7; color: var(--color-muted); margin-bottom: 36px; }
.idx-46 { color: var(--color-accent); margin-right: 8px; }
.idx-47 { font-style: italic; color: var(--color-accent); }

/* ─── TOPICS PAGE STYLES ─────────────────────────────────────── */

/* Hero Section */
.tp-main { background-color: var(--color-bg); min-height: 100vh; }

.tp-hero {
  border-bottom: 1px solid var(--color-border);
  padding: 80px 24px 64px 24px;
  position: relative;
  overflow: hidden;
}

.tp-hero-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(212,175,55,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.tp-hero-container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.tp-hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 20px;
  animation: fade-in 0.7s ease both;
}

.tp-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 760px;
  margin-bottom: 24px;
  margin-top: 0;
  animation: fade-up 0.8s cubic-bezier(0.16,1,0.3,1) both;
}

.tp-hero-subtitle {
  font-size: 17px;
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 48px;
  animation: fade-up 0.8s cubic-bezier(0.16,1,0.3,1) both 0.1s;
}

.tp-hero-stats {
  border-top: 1px solid var(--color-border);
  padding-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 0;
  animation: fade-up 0.8s cubic-bezier(0.16,1,0.3,1) both 0.2s;
}

@media (min-width: 768px) {
  .tp-hero-stats { grid-template-columns: repeat(4, 1fr); }
}

.tp-hero-stat {
  padding-bottom: 16px;
  padding-left: 0;
  padding-right: 24px;
}

.tp-hero-stat-value {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 4px;
  margin-top: 0;
}

.tp-hero-stat-label {
  font-size: 12px;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  margin-top: 0;
  margin-bottom: 0;
}

/* Featured Verticals Section */
.tp-featured {
  padding: 64px 24px;
  border-bottom: 1px solid var(--color-border);
}

.tp-featured-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.tp-featured-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 32px;
  margin-top: 0;
}

.tp-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 1024px) {
  .tp-featured-grid { grid-template-columns: repeat(2, 1fr); }
}

.tp-featured-card {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--color-border);
  transition: border-color 0.2s, transform 0.2s;
  min-height: 420px;
}

.tp-featured-card:hover {
  border-color: var(--color-border-lg);
  transform: translateY(-3px);
}

.tp-featured-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.tp-featured-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-bg) 30%, rgba(9,9,9,0.5) 70%, rgba(9,9,9,0.2) 100%);
  pointer-events: none;
}

.tp-featured-overlay-radial {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tp-featured-overlay-radial-ml {
  background: radial-gradient(ellipse at top right, rgba(124,58,237,0.09) 0%, transparent 60%);
}

.tp-featured-overlay-radial-dt {
  background: radial-gradient(ellipse at top right, rgba(14,165,233,0.09) 0%, transparent 60%);
}

.tp-featured-content {
  position: relative;
  padding: 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 2;
}

.tp-featured-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid;
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: 16px;
  align-self: flex-start;
}

.tp-featured-badge-ml {
  color: #7c3aed;
  background-color: rgba(124,58,237,0.09);
  border-color: rgba(124,58,237,0.18);
}

.tp-featured-badge-dt {
  color: #0ea5e9;
  background-color: rgba(14,165,233,0.09);
  border-color: rgba(14,165,233,0.18);
}

.tp-featured-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.15;
  margin-bottom: 4px;
  margin-top: 0;
}

.tp-featured-subtitle {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-accent);
  font-style: italic;
  margin-bottom: 14px;
  margin-top: 0;
}

.tp-featured-desc {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 480px;
  margin-top: 0;
}

.tp-featured-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-lg);
}

.tp-featured-count {
  font-size: 12px;
  color: var(--color-faint);
}

.tp-featured-cta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.tp-featured-cta-ml {
  color: #7c3aed;
}

.tp-featured-cta-dt {
  color: #0ea5e9;
}

/* Topics Grid Section */
.tp-grid-section {
  padding: 64px 24px 80px 24px;
}

.tp-grid-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.tp-grid-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.tp-grid-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
  margin-top: 0;
}

.tp-grid-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0;
}

/* Filter Container */
.tp-filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.tp-filter-btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 2px;
  border: 1px solid var(--color-border-lg);
  background-color: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.tp-filter-btn:hover {
  border-color: var(--color-border-lg);
}

.tp-filter-btn.active {
  background-color: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

/* Topics Grid Layout */
.tp-topics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--color-border);
}

@media (min-width: 768px) {
  .tp-topics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .tp-topics-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Topic Cards */
.tp-topic-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  text-decoration: none;
  transition: background-color 0.15s;
  position: relative;
  overflow: hidden;
}

.tp-topic-card:hover {
  background-color: var(--color-surface);
}

.tp-topic-ml { /* Machine Learning */ }
.tp-topic-dt { /* Developer Tools */ }
.tp-topic-fw { /* Future of Work */ }
.tp-topic-ethics { /* AI Ethics */ }
.tp-topic-research { /* Research & Science */ }
.tp-topic-products { /* Products & Startups */ }

.tp-topic-image {
  position: relative;
  height: 200px;
  flex-shrink: 0;
  overflow: hidden;
}

.tp-topic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  transition: opacity 0.3s;
}

.tp-topic-card:hover .tp-topic-img {
  opacity: 0.45;
}

.tp-topic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(9,9,9,0.8) 100%);
  pointer-events: none;
}

.tp-topic-dot {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.tp-topic-dot-ml { background-color: #7c3aed; }
.tp-topic-dot-dt { background-color: #0ea5e9; }
.tp-topic-dot-fw { background-color: #d4af37; }
.tp-topic-dot-ethics { background-color: #e11d48; }
.tp-topic-dot-research { background-color: #059669; }
.tp-topic-dot-products { background-color: #f97316; }

.tp-topic-category {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}

.tp-topic-category-ml { color: #7c3aed; }
.tp-topic-category-dt { color: #0ea5e9; }
.tp-topic-category-fw { color: #d4af37; }
.tp-topic-category-ethics { color: #e11d48; }
.tp-topic-category-research { color: #059669; }
.tp-topic-category-products { color: #f97316; }

.tp-topic-body {
  padding: 28px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.tp-topic-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 4px;
  margin-top: 0;
}

.tp-topic-subtitle {
  font-size: 13px;
  font-style: italic;
  color: var(--color-accent);
  margin-bottom: 12px;
  margin-top: 0;
}

.tp-topic-desc {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.65;
  margin-bottom: 24px;
  flex-grow: 1;
  margin-top: 0;
}

.tp-topic-stories {
  margin-bottom: 24px;
}

.tp-topic-stories-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-faint);
  margin-bottom: 10px;
  margin-top: 0;
}

.tp-topic-story {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 1px solid var(--color-card);
}

.tp-topic-story-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-border-lg);
  flex-shrink: 0;
  margin-top: 1px;
}

.tp-topic-story-text {
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.5;
}

.tp-topic-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.tp-topic-count {
  font-size: 11px;
  color: var(--color-faint);
}

.tp-topic-cta {
  font-size: 12px;
  font-weight: 600;
  transition: color 0.15s;
}

.tp-topic-cta-ml { color: var(--color-muted); }
.tp-topic-cta-dt { color: var(--color-muted); }
.tp-topic-cta-fw { color: var(--color-muted); }
.tp-topic-cta-ethics { color: var(--color-muted); }
.tp-topic-cta-research { color: var(--color-muted); }
.tp-topic-cta-products { color: var(--color-muted); }

.tp-topic-card:hover .tp-topic-cta-ml { color: #7c3aed; }
.tp-topic-card:hover .tp-topic-cta-dt { color: #0ea5e9; }
.tp-topic-card:hover .tp-topic-cta-fw { color: #d4af37; }
.tp-topic-card:hover .tp-topic-cta-ethics { color: #e11d48; }
.tp-topic-card:hover .tp-topic-cta-research { color: #059669; }
.tp-topic-card:hover .tp-topic-cta-products { color: #f97316; }

/* ─── Index.html fix: additional classes ──────────────────────── */
/* "Try it →" link style in Tools section */
.text-try-link {
  display: inline-block;
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 8px;
  transition: color 0.2s;
}
.text-try-link:hover { color: var(--color-text); }


/* =============================================================
   RESPONSIVE STYLES — All breakpoints for all pages
   Matching original Next.js Tailwind breakpoints:
     sm = 640px  |  md = 768px  |  lg = 1024px
   ============================================================= */

/* ─── Global section padding — reduce on small screens ──────── */
@media (max-width: 767px) {
  .section-dark-pad-72,
  .section-dark-pad-80,
  .section-dark-pad-96,
  .section-dark-pad-80-64,
  .section-pad-80-bt,
  .section-pad-72-bt,
  .section-pad-80-64-center,
  .section-pad-96-center { padding-top: 48px; padding-bottom: 48px; }
}

/* ─── index.html: idx-* layout grids ────────────────────────── */

/* Hero 2-col: 1.1fr/1fr → 1 col below 1024px */
@media (max-width: 1023px) {
  .idx-20 { grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; }
}

/* Hero section padding reduction on mobile */
@media (max-width: 767px) {
  .idx-0 { padding: 48px 20px 24px; }
}

/* Category strip: 5-col → 3-col → 2-col */
@media (max-width: 1023px) {
  .idx-93 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
  .idx-93 { grid-template-columns: repeat(2, 1fr); }
}

/* Featured content 3-col: → 1 col below 1024px */
@media (max-width: 1023px) {
  .idx-92 { grid-template-columns: 1fr; }
}

/* Future of programming grid: 1.6fr/1fr/1fr → 1 col below 1024px */
@media (max-width: 1023px) {
  .idx-21 { grid-template-columns: 1fr; }
}

/* Feature image height — reduce on mobile */
@media (max-width: 767px) {
  .idx-117 { height: 220px; }
  .idx-115 { height: 140px; }
  .idx-114 { height: 130px; }
}

/* ─── Generic named grid classes (all pages) ─────────────────── */

/* 4-col grids: → 2-col at 640px → 1-col below 640px */
@media (max-width: 1023px) {
  .grid-4-gap-20 { grid-template-columns: repeat(2, 1fr); }
  .grid-4-gap-24 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .grid-4-gap-20 { grid-template-columns: 1fr; }
  .grid-4-gap-24 { grid-template-columns: 1fr; }
}

/* 3-col grid: → 1 col below 768px */
@media (max-width: 767px) {
  .grid-3-gap-28 { grid-template-columns: 1fr; gap: 20px; }
}

/* Generic utility grids */
@media (max-width: 767px) {
  .grid-2col { grid-template-columns: 1fr; }
  .grid-3col { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .grid-4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .grid-4col { grid-template-columns: 1fr; }
}

/* ─── home2.html: h2-* grids ─────────────────────────────────── */

/* Hero 2-col: 1fr/1fr → 1 col below 1024px */
@media (max-width: 1023px) {
  .h2-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Hide hero image on mobile to keep it clean */
  .h2-hero-image-col { display: none; }
}

/* Daily briefing 3-col → 1 col below 768px */
@media (max-width: 767px) {
  .h2-daily-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Deep reads 1.2fr/1fr → 1 col below 1024px */
@media (max-width: 1023px) {
  .h2-deep-reads-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Tools 4-col → 2-col → 1-col */
@media (max-width: 1023px) {
  .h2-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .h2-tools-grid { grid-template-columns: 1fr; }
}

/* Podcast 1fr/1.8fr → 1 col below 1024px */
@media (max-width: 1023px) {
  .h2-podcast-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* h2 hero title font size */
@media (max-width: 767px) {
  .h2-hero-title { font-size: clamp(28px, 7vw, 40px); }
}

/* ─── podcast.html: pod-s* grids ─────────────────────────────── */

/* 2-col featured layouts → 1 col below 1024px */
@media (max-width: 1023px) {
  .pod-s78 { grid-template-columns: 1fr; gap: 40px; }
  .pod-s41 { grid-template-columns: 1fr; gap: 40px; }
  .pod-s18 { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; }
}

/* 4-col podcast episode list → 2-col → 1-col */
@media (max-width: 1023px) {
  .pod-s33 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .pod-s33 { grid-template-columns: 1fr; }
}

/* 5-col and 6-col grids → reduce on mobile */
@media (max-width: 1023px) {
  .pod-s96 { grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 40px; }
  .pod-s72 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
@media (max-width: 639px) {
  .pod-s96 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .pod-s72 { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 479px) {
  .pod-s72 { grid-template-columns: repeat(2, 1fr); }
}

/* ─── tools.html: tl-* grids ─────────────────────────────────── */

/* Featured tools 2-col → 1 col */
@media (max-width: 767px) {
  .tl-featured-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Tools layout (text + image) → 1 col below 1024px */
@media (max-width: 1023px) {
  .tl-tools-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* ─── subscribe.html: plans grid ─────────────────────────────── */
/* plans-grid already has responsive rules — ensure consistent */
@media (max-width: 767px) {
  .plans-grid { grid-template-columns: 1fr; }
}

/* ─── Container & inner-page responsive tweaks ───────────────── */
@media (max-width: 767px) {
  /* Reduce inner container padding on very small screens */
  .container { padding: 0 16px; }
  .container-center { padding: 0 16px; }

  /* Promo banner text */
  .idx-80 { font-size: 15px; }

  /* Section headers stack on mobile */
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Flex stat strip wraps well on mobile */
  .flex-wrap-stats { gap: 24px; padding-top: 24px; }
}

/* ─── Article cards image heights on mobile ──────────────────── */
@media (max-width: 767px) {
  .article-card-img { height: 180px; }
  .h-200 { height: 160px; }
  .h-180 { height: 150px; }
  .h-260 { height: 200px; }
}

/* ─── Promo banner responsive ────────────────────────────────── */
@media (max-width: 767px) {
  .promo-banner { padding: 0; }
  .promo-content { padding: 48px 20px; gap: 40px; }
  .idx-1 { min-width: unset; padding: 24px; }
}

/* ─── Newsletter section ─────────────────────────────────────── */
@media (max-width: 639px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-input { width: 100%; border-radius: 2px; border-right: 1px solid #222222; }
  .newsletter-btn { width: 100%; border-radius: 2px; }

  /* subscribe.html uses .btn-primary inside .newsletter-form */
  .newsletter-form .btn-primary { width: 100%; }
}

/* ─── Mobile nav improvements ────────────────────────────────── */
@media (max-width: 767px) {
  .navbar-mobile nav { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
  .navbar-mobile a { padding: 10px 0; }
}

/* =========================================================
   PODCAST EPISODE PAGE
   ========================================================= */

/* ─── Episode hero helpers ───────────────────────────────── */
.ep-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 4px;
  padding: 4px 12px;
  margin-bottom: 20px;
}

.ep-hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 24px;
}

.ep-hero-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(212,175,55,0.35);
  flex-shrink: 0;
}

.ep-hero-guest {
  font-size: 15px;
  font-weight: 600;
  color: #f2f2f2;
  margin: 0;
  line-height: 1.3;
}

.ep-hero-role {
  font-size: 13px;
  color: #888888;
  margin: 0;
  line-height: 1.3;
}

.ep-hero-divider-v {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

.ep-hero-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(242,242,242,0.65);
}

.ep-platform-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
}

/* ─── Audio Player ───────────────────────────────────────── */
.ep-player-section {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 28px 24px;
}

.ep-player {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 20px 24px;
}

.ep-player-art {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.ep-player-body {
  flex: 1;
  min-width: 0;
}

.ep-player-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.ep-player-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent);
  flex-shrink: 0;
}

.ep-player-title {
  font-size: 13px;
  font-weight: 500;
  color: #f2f2f2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-player-track {
  position: relative;
  height: 4px;
  background: var(--color-border-lg);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 10px;
}

.ep-player-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  pointer-events: none;
}

.ep-player-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--color-accent);
  border-radius: 50%;
  pointer-events: none;
}

.ep-player-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ep-player-time,
.ep-player-duration {
  font-size: 12px;
  color: #888888;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ep-player-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.ep-player-skip {
  background: none;
  border: none;
  color: #888888;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.ep-player-skip:hover { color: #f2f2f2; }

.ep-player-play {
  background: var(--color-accent);
  border: none;
  color: #090909;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.15s, transform 0.1s;
}
.ep-player-play:hover { background: var(--color-accent-bright); transform: scale(1.05); }

.ep-player-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.ep-player-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #888888;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.ep-player-action-btn:hover { color: #f2f2f2; border-color: var(--color-border-lg); }

/* Size Lucide icons within the player */
.ep-player-skip i { width: 18px; height: 18px; display: block; }
.ep-player-play i { width: 16px; height: 16px; display: block; }
.ep-player-action-btn i { width: 13px; height: 13px; display: block; flex-shrink: 0; }

/* ─── CTA form (podcast episode page) ───────────────────── */
.cta-form {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
}
.cta-input {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 2px;
  color: #f2f2f2;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.15s;
}
.cta-input:focus { border-color: rgba(255,255,255,0.35); }
.cta-input::placeholder { color: rgba(242,242,242,0.4); }

/* ─── Episode meta sidebar ───────────────────────────────── */
.ep-meta-list { display: flex; flex-direction: column; gap: 0; }
.ep-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}
.ep-meta-row:last-child { border-bottom: none; }
.ep-meta-label { font-size: 12px; color: #888888; }
.ep-meta-value { font-size: 13px; color: #f2f2f2; font-weight: 500; }

.ep-platform-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #888888;
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: color 0.15s, border-color 0.15s;
}
.ep-platform-btn:hover { color: #f2f2f2; border-color: var(--color-border-lg); }

/* ─── Key Takeaways ──────────────────────────────────────── */
.ep-takeaways-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.section-title-sm {
  font-family: var(--font-serif);
  font-size: 22px;
  color: #f2f2f2;
  margin: 0;
}

.ep-section-bar {
  width: 3px;
  height: 22px;
  background: var(--color-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.ep-takeaways-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ep-takeaway-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}
.ep-takeaway-item:first-child { border-top: 1px solid var(--color-border); }

.ep-takeaway-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  padding-top: 2px;
}

.ep-takeaway-text {
  font-size: 14px;
  color: #888888;
  line-height: 1.6;
  margin: 0;
}

/* ─── Timestamps ─────────────────────────────────────────── */
.ep-timestamps { display: flex; flex-direction: column; gap: 0; }

.ep-timestamp-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: background-color 0.15s;
}
.ep-timestamp-row:first-child { border-top: 1px solid var(--color-border); }
.ep-timestamp-last { border-bottom: none; }
.ep-timestamp-row:hover .ep-timestamp-label { color: #f2f2f2; }

.ep-timestamp-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 38px;
}

.ep-timestamp-label {
  font-size: 14px;
  color: #888888;
  transition: color 0.15s;
}

/* ─── Guest Bio ───────────────────────────────────────────── */
.ep-guest-card {
  display: flex;
  gap: 32px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 32px;
}

.ep-guest-avatar-wrap { flex-shrink: 0; }

.ep-guest-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(212,175,55,0.25);
}

.ep-guest-body { flex: 1; min-width: 0; }

.ep-guest-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.ep-guest-name {
  font-family: var(--font-serif);
  font-size: 22px;
  color: #f2f2f2;
  margin: 0 0 4px;
}

.ep-guest-role {
  font-size: 13px;
  color: #888888;
  margin: 0;
}

.ep-guest-socials {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.ep-guest-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 13px;
  color: #888888;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.ep-guest-social:hover { color: #f2f2f2; border-color: var(--color-border-lg); }

.ep-guest-bio {
  font-size: 14px;
  color: #888888;
  line-height: 1.7;
  margin: 0 0 20px;
}

.ep-guest-episodes { display: flex; flex-direction: column; gap: 6px; }

.ep-guest-episodes-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888888;
  margin: 0 0 4px;
}

.ep-guest-episode-link {
  font-size: 13px;
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.15s;
}
.ep-guest-episode-link:hover { color: var(--color-accent-bright); }

/* ─── Related Episodes cards ─────────────────────────────── */
.ep-related-card {
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.ep-related-card:hover { border-color: var(--color-border-lg); }

.ep-related-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.ep-related-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.ep-related-card:hover .ep-related-img { transform: scale(1.04); }

.ep-related-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.2s;
}
.ep-related-card:hover .ep-related-play { opacity: 1; }

.ep-related-num {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #f2f2f2;
  background: rgba(0,0,0,0.65);
  border-radius: 3px;
  padding: 3px 8px;
}

.ep-related-body { padding: 18px; flex: 1; }

.ep-related-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: #f2f2f2;
  line-height: 1.4;
  margin: 0;
}

/* ─── CTA section extras ─────────────────────────────────── */
.ep-cta-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}

.cta-divider {
  width: 48px;
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 0 auto 20px;
}

.cta-or {
  font-size: 13px;
  color: rgba(242,242,242,0.45);
  text-align: center;
  margin: 0 0 16px;
}

/* ─── Episode page responsive ────────────────────────────── */
@media (max-width: 900px) {
  .ep-takeaways-grid { grid-template-columns: 1fr; gap: 48px; }
  .ep-player { flex-wrap: wrap; }
  .ep-player-actions { flex-direction: row; width: 100%; }
}

@media (max-width: 767px) {
  .ep-guest-card { flex-direction: column; gap: 20px; }
  .ep-player-art { width: 56px; height: 56px; }
  .ep-hero-divider-v { display: none; }
}

/* =========================================================
   SMALL SCREEN FIXES
   ========================================================= */

/* ─── Home 2: stat bar — each stat full width ───────────── */
@media (max-width: 639px) {
  .h2-stat-bar-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .h2-stat-cta { margin-left: 0; width: 100%; text-align: center; }
}

/* ─── Home 2: newsletter form — stack on mobile ─────────── */
@media (max-width: 639px) {
  .h2-newsletter-form { flex-direction: column; }
  .h2-newsletter-form .btn-primary { width: 100%; }
}

/* ─── Podcast: episode row — prevent layout break ───────── */
@media (max-width: 767px) {
  .pod-s58 { grid-template-columns: 72px 1fr; grid-template-rows: auto auto; }
  .pod-s114 { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; margin-left: 0; }
}

/* ─── Home 3: lead story — stack columns ────────────────── */
@media (max-width: 767px) {
  .h3-007 { grid-template-columns: 1fr; }
  .h3-076 { min-height: 240px; }
  .h3-072 { padding: 24px; }
}

/* ─── Home 3: by category list items — picture top ──────── */
@media (max-width: 767px) {
  .list-item-lg-bb,
  .list-item-lg-last { flex-direction: column; align-items: flex-start; }
  .h3-082 { width: 100%; height: 180px; }
}

/* ─── Home 3: most read + our writers — single column ───── */
@media (max-width: 767px) {
  .h3-008 { grid-template-columns: 1fr; gap: 48px; }
}

/* ─── Home 3: tools we love — 2 cols → 1 col ────────────── */
@media (max-width: 767px) {
  .h3-009 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .h3-009 { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Podcast page episode rows — mobile ────────────────── */
/* Note: rows use class="episode-row" (first class attr wins) */
@media (max-width: 639px) {
  .episode-row { flex-wrap: wrap; gap: 10px 14px; }
  /* Meta (time + tags) drops to its own full-width line */
  .pod-s114 { width: 100%; flex-direction: row; align-items: center;
              justify-content: flex-start; margin-left: 0; gap: 12px; flex-shrink: 1; }
  .pod-s115 { justify-content: flex-start; }
}

/* ─── Audio player — prevent horizontal overflow ─────────── */
@media (max-width: 767px) {
  .ep-player-section { padding: 20px 16px; overflow: hidden; }
  .ep-player { flex-direction: column; align-items: stretch; gap: 16px;
               padding: 16px; width: 100%; box-sizing: border-box; }
  .ep-player-art { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; }
  .ep-player-body { width: 100%; min-width: 0; }
  .ep-player-info { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ep-player-title { white-space: normal; }
  .ep-player-actions { flex-direction: row; flex-wrap: wrap; width: 100%; gap: 8px; }
  .ep-player-action-btn { flex: 1; justify-content: center; }
}

/* ─── Article/episode TOC — static on tablet/mobile ────────── */
@media (max-width: 1024px) {
  .article-toc { position: static; }
  /* single content column; keep sidebars visible but static */
  .grid-3col-article { grid-template-columns: 1fr; }
  .grid-3col-article > aside { display: block; }
}

/* ─── Home 2 podcast episode rows — mobile ───────────────── */
@media (max-width: 639px) {
  /* Allow title to wrap so it doesn't force the row wider than viewport */
  .h2-episode-title { white-space: normal; }
  .h2-episode-content { overflow: hidden; }
  /* Ensure the podcast section never causes horizontal scroll */
  .h2-podcast-section { overflow-x: hidden; }
  .h2-podcast-inner { max-width: 100%; }
}

/* ─── Topics newsletter form — mobile ───────────────────── */
@media (max-width: 639px) {
  .nl-form { flex-direction: column; }
  .nl-input { width: 100%; }
  .nl-form .btn-gold { width: 100%; }
}

/* ─── Writers: senior editors + write for us — single col ── */
@media (max-width: 767px) {
  .wr-071 { grid-template-columns: 1fr; }
  .wr-063 { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Writers: newsletter form ───────────────────────────── */
@media (max-width: 639px) {
  .flex-gap8-form { flex-direction: column; }
  .wr-015 { width: 100%; }
  .flex-gap8-form .wr-001 { width: 100%; }
}

/* ─── Tools page grid ───────────────────────────────────── */
@media (max-width: 767px) {
  .tl-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tl-tools-grid { grid-template-columns: 1fr; }
}

/* ─── Tools page newsletter form ────────────────────────── */
@media (max-width: 639px) {
  .tl-newsletter-form { flex-direction: column; }
  .tl-newsletter-input { width: 100%; }
  .tl-newsletter-button { width: 100%; }
}

/* ─── Podcast episode CTA form ───────────────────────────── */
@media (max-width: 639px) {
  .cta-form { flex-direction: column; }
  .cta-input { width: 100%; }
  .cta-form .btn-primary { width: 100%; }
}

/* ─── Hero section padding — mobile ─────────────────────── */
@media (max-width: 767px) {
  /* Interior pages purple gradient hero (topics, tools, writers, category, podcast, podcast-episode) */
  .hero-gradient-section { padding: 56px 20px; }

  /* Home 2 hero */
  .h2-hero { padding: 44px 0; }

  /* Home 3 hero */
  .section-pad-80-64-center { padding-top: 44px; padding-bottom: 36px; }
}