/* =========================================================
   Fetch it Frankie — Marketing Site
   Clean, modern SaaS template. Non-Etsy palette (teal + slate).
   =========================================================

   >>> TO SWITCH THEMES SITE-WIDE <<<
   Open  /assets/js/site-config.js
   Change the number on the line:  window.SITE_THEME = 69;
   That number maps to a numbered theme defined further down in
   this file. The full list lives at the bottom of site-config.js.
   ========================================================= */

:root {
  --color-primary: #0d9488;
  --color-primary-dark: #0f766e;
  --color-primary-light: #ccfbf1;
  --color-primary-bg: #f0fdfa;

  --color-bg: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-bg-muted: #f1f5f9;

  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-soft: #64748b;

  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 20px 40px -12px rgb(15 23 42 / 0.12);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-weight-h1: 800;
  --font-weight-h2: 700;
  --heading-transform: none;
  --heading-tracking: -0.01em;

  --container-max: 1120px;
  --container-pad: clamp(20px, 4vw, 40px);
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

img, svg, video, iframe { max-width: 100%; display: block; }

a {
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover { color: var(--color-primary); }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  letter-spacing: var(--heading-tracking);
  color: var(--color-text);
  font-family: var(--font-heading);
  text-transform: var(--heading-transform);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: var(--font-weight-h1); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: var(--font-weight-h2); }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.0625rem; font-weight: 600; }

p { margin: 0 0 1em; }

ul, ol { padding-left: 1.25em; }
li { margin-bottom: 0.35em; }

code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--color-bg-muted);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* ---------- Layout ---------- */

.container.container-narrow { max-width: 720px; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section {
  padding: clamp(56px, 8vw, 96px) 0;
}

.section-alt { background: var(--color-bg-subtle); }

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}

.section-header .eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
  margin-bottom: 12px;
}

.section-header p {
  font-size: 1.125rem;
  color: var(--color-text-muted);
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  overflow: hidden;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.brand-logo-only .brand-mark,
[data-theme] .brand-logo-only .brand-mark {
  width: auto !important;
  height: 48px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center;
}
.brand-logo-only .brand-mark img,
[data-theme] .brand-logo-only .brand-mark img {
  width: auto !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: block !important;
}

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

.nav-links a {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.9375rem;
}

.nav-links a:hover { color: var(--color-text); }

.nav-links .mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.nav-links .mode-toggle:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.nav-links .mode-toggle .mode-icon-dark { display: none; }
html[data-mode="dark"] .nav-links .mode-toggle .mode-icon-light { display: none; }
html[data-mode="dark"] .nav-links .mode-toggle .mode-icon-dark { display: inline; }

/* ---------- Dark mode (overrides any active theme) ---------- */

html[data-mode="dark"] {
  --color-bg: #0b1220;
  --color-bg-subtle: #131c30;
  --color-bg-muted: #1c2540;
  --color-text: #e7eaf3;
  --color-text-muted: #b6bccd;
  --color-text-soft: #8a90a4;
  --color-border: #243049;
  --color-border-strong: #324063;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.35);
  --shadow-md: 0 6px 16px -4px rgba(0,0,0,0.5), 0 2px 6px -2px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 48px -16px rgba(0,0,0,0.6);
}

html[data-mode="dark"] body { background: var(--color-bg); color: var(--color-text); }
html[data-mode="dark"] a,
html[data-mode="dark"] a:visited { color: var(--color-primary); }
html[data-mode="dark"] a:hover { color: var(--color-primary-light); }
html[data-mode="dark"] .site-header {
  background: rgba(11, 18, 32, 0.85);
  border-bottom-color: var(--color-border);
}
html[data-mode="dark"] .section-alt { background: var(--color-bg-subtle); }
html[data-mode="dark"] .card,
html[data-mode="dark"] .contact-card,
html[data-mode="dark"] .contact-form,
html[data-mode="dark"] .compliance,
html[data-mode="dark"] .pricing-note,
html[data-mode="dark"] .step,
html[data-mode="dark"] .screenshot,
html[data-mode="dark"] .tour-stage,
html[data-mode="dark"] .app-card {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-text);
}
html[data-mode="dark"] .contact-form input,
html[data-mode="dark"] .contact-form select,
html[data-mode="dark"] .contact-form textarea {
  background: var(--color-bg-muted);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
html[data-mode="dark"] .faq details {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
}
html[data-mode="dark"] body.app-page { background: var(--color-bg); }
html[data-mode="dark"] .app-card-icon {
  background: rgba(255,255,255,0.06);
  color: var(--color-text);
}
html[data-mode="dark"] .site-footer {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border-top-color: var(--color-border);
}

.nav-links a.nav-login {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 600;
}
.nav-links a.nav-login:hover {
  background: var(--color-primary-dark);
  color: #ffffff;
}

@media (max-width: 720px) {
  .nav-links { display: none; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

/* ---------- Hero ---------- */

.hero {
  padding: clamp(72px, 10vw, 120px) 0 clamp(56px, 8vw, 88px);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--color-primary-light) 0%, transparent 60%),
    linear-gradient(to bottom, var(--color-bg), var(--color-bg));
}

.hero-inner {
  display: grid;
  gap: 56px;
  align-items: center;
}

.hero-copy {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-light);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.hero-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.hero h1 {
  margin-bottom: 20px;
  text-transform: uppercase;
}

.hero-sub {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--color-text-muted);
  max-width: 900px;
  margin: 0 auto 32px;
}

.hero-ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.hero-visual {
  position: relative;
  margin-top: 16px;
}

.hero-visual .placeholder-frame {
  aspect-ratio: 16 / 9;
  max-width: 960px;
  margin: 0 auto;
}

/* ---------- Placeholder frames (for images/video) ---------- */

.placeholder-frame {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
  padding: 24px;
  min-height: 180px;
  box-shadow: var(--shadow-md);
}

.placeholder-frame.compact { min-height: 140px; box-shadow: none; }

.placeholder-frame .ph-label {
  display: block;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.placeholder-frame .ph-hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-soft);
}

/* ---------- Image slot — drop a file in /assets/ to replace the label ---------- */
.slot {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
}
/* Pseudo-element renders only when the image fails to load (i.e. file
   not in /assets/ yet), so the moment you drop the file in, the label
   disappears automatically. */
.slot::before {
  content: attr(data-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-bg-subtle) 0%, var(--color-bg-muted) 100%);
  border: 1px dashed var(--color-border-strong);
  border-radius: inherit;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}
.slot-hero {
  aspect-ratio: 16 / 9;
  max-width: 960px;
  margin: 16px auto 0;
  box-shadow: var(--shadow-md);
}
.slot-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 0;
}
.slot-thumb::before {
  border-radius: 0;
  border: 0;
}

/* ---------- Feature grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  margin-bottom: 16px;
  font-size: 1.25rem;
  font-weight: 700;
}

.card h3 { margin-bottom: 8px; }

.card p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.9375rem;
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 14px;
}

.step h3 { margin-bottom: 6px; }
.step p { margin: 0; color: var(--color-text-muted); font-size: 0.9375rem; }

/* ---------- Video embed ---------- */

.video-wrap {
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #000;
}

.video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Screenshots grid ---------- */

.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.screenshot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.screenshot .placeholder-frame {
  border-radius: 0;
  border: 0;
  aspect-ratio: 16 / 10;
  min-height: 0;
  box-shadow: none;
}

.screenshot-caption {
  padding: 14px 18px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

/* ---------- Tour carousel ---------- */

.tour-carousel {
  position: relative;
  outline: none;
}
.tour-carousel[hidden] { display: none; }

.tour-stage {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tour-viewport {
  overflow: hidden;
  width: 100%;
}

.tour-track {
  display: flex;
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.tour-slide {
  flex: 0 0 100%;
  aspect-ratio: 16 / 10;
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tour-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tour-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  padding: 0;
}
.tour-btn:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}
.tour-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.tour-prev { left: 14px; }
.tour-next { right: 14px; }

.tour-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.tour-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  background: var(--color-border-strong, var(--color-border));
  cursor: pointer;
  padding: 0;
  transition: background 160ms ease, transform 160ms ease;
}
.tour-dot:hover { background: var(--color-text-muted); }
.tour-dot.is-active {
  background: var(--color-primary);
  transform: scale(1.35);
}
.tour-dot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .tour-btn { width: 36px; height: 36px; font-size: 20px; }
  .tour-prev { left: 8px; }
  .tour-next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-track { transition: none; }
}

/* ---------- Compliance callout ---------- */

.compliance {
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-sm);
}

.compliance ul {
  margin: 18px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.compliance li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--color-text-muted);
  margin: 0;
}

.compliance li::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 6px;
  background: var(--color-primary-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230f766e'><path d='M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4L8.5 12l6.8-6.8a1 1 0 0 1 1.4 0z'/></svg>") center / 14px no-repeat;
}

.compliance strong { color: var(--color-text); }

/* ---------- Pricing placeholder ---------- */

.pricing-note {
  text-align: center;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto;
}

.pricing-note strong { color: var(--color-text); display: block; margin-bottom: 6px; }

/* ---------- FAQ ---------- */

.faq {
  max-width: 780px;
  margin: 0 auto;
}

.faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 18px 20px;
  margin-bottom: 12px;
  transition: border-color 0.15s ease;
}

.faq details[open] { border-color: var(--color-primary-light); }

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text-soft);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after { content: "−"; }

.faq summary + * {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.faq summary + * p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
  padding: 48px 0 36px;
  margin-top: 40px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand p {
  max-width: 380px;
  color: var(--color-text-muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.footer-links a {
  color: var(--color-text-muted);
  font-weight: 500;
}

.footer-links a:hover { color: var(--color-text); }

.footer-legal {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  font-size: 0.8125rem;
  color: var(--color-text-soft);
  line-height: 1.7;
}

.footer-legal p { margin: 0 0 4px; }

/* ---------- Legal / policy pages ---------- */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) var(--container-pad);
}

.legal h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 8px;
}

.legal .updated {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.legal h2 {
  font-size: 1.375rem;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.legal h2:first-of-type { padding-top: 0; border-top: 0; margin-top: 32px; }

.legal h3 { font-size: 1.0625rem; margin-top: 24px; }

.legal p, .legal li { color: var(--color-text); }

.legal ul, .legal ol { padding-left: 1.4em; }

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 0.9375rem;
}

.legal table th, .legal table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.legal table th {
  background: var(--color-bg-subtle);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border-strong);
}

.legal .toc {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 40px;
}

.legal .toc h2 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.legal .toc ol {
  column-count: 2;
  column-gap: 28px;
  margin: 0;
  padding-left: 1.2em;
}

@media (max-width: 560px) { .legal .toc ol { column-count: 1; } }

.legal .toc li { font-size: 0.9375rem; margin-bottom: 4px; }

.legal em.note {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin-top: 8px;
}

.legal .callout-strong {
  background: var(--color-primary-bg);
  border-left: 3px solid var(--color-primary);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin: 18px 0;
  font-weight: 600;
  color: var(--color-text);
}

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.muted { color: var(--color-text-muted); }


/* =========================================================
   THEME OVERRIDES — temporary preview set.
   Select one via the on-page theme picker, or delete this
   whole section and hard-set the chosen palette in :root.
   ========================================================= */

/* ---------- 1. Teal Classic — default. Nothing to override. ---------- */

/* ---------- 2. Minimalist Mono — monochrome, crisp, Linear-ish ---------- */
[data-theme="minimalist-mono"] {
  --color-primary: #0a0a0a;
  --color-primary-dark: #000000;
  --color-primary-light: #e5e5e5;
  --color-primary-bg: #f5f5f5;
  --color-bg: #ffffff;
  --color-bg-subtle: #fafafa;
  --color-bg-muted: #f4f4f5;
  --color-text: #09090b;
  --color-text-muted: #52525b;
  --color-text-soft: #71717a;
  --color-border: #e4e4e7;
  --color-border-strong: #d4d4d8;
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-heading: 'Manrope', system-ui, sans-serif;
  --font-weight-h1: 800;
}
[data-theme="minimalist-mono"] .brand-mark {
  background: #0a0a0a;
  color: #ffffff;
}
[data-theme="minimalist-mono"] .hero-badge {
  background: #f5f5f5;
  border-color: #e5e5e5;
  color: #0a0a0a;
}

/* ---------- 3. Soft Editorial — warm off-white, serif headings ---------- */
[data-theme="soft-neutral"] {
  --color-primary: #b45309;
  --color-primary-dark: #92400e;
  --color-primary-light: #fde68a;
  --color-primary-bg: #fffbeb;
  --color-bg: #fdfaf4;
  --color-bg-subtle: #f7f0e3;
  --color-bg-muted: #ece1cd;
  --color-text: #1c1917;
  --color-text-muted: #57534e;
  --color-text-soft: #78716c;
  --color-border: #e7dfce;
  --color-border-strong: #d6cab0;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-weight-h1: 800;
  --font-weight-h2: 700;
  --heading-tracking: -0.02em;
}
[data-theme="soft-neutral"] h1,
[data-theme="soft-neutral"] h2 {
  font-variation-settings: "opsz" 120, "SOFT" 100;
}
[data-theme="soft-neutral"] .brand-mark {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

/* ---------- 4. Sunset Gradient — pink-to-purple, playful but polished ---------- */
[data-theme="sunset"] {
  --color-primary: #db2777;
  --color-primary-dark: #9d174d;
  --color-primary-light: #fbcfe8;
  --color-primary-bg: #fdf2f8;
  --color-bg: #ffffff;
  --color-bg-subtle: #fdf4ff;
  --color-bg-muted: #f5e1fb;
  --color-text: #1e1b4b;
  --color-text-muted: #5b21b6;
  --color-text-soft: #7c3aed;
  --color-border: #f5d0fe;
  --color-border-strong: #e879f9;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-weight-h1: 700;
}
[data-theme="sunset"] .hero {
  background:
    radial-gradient(900px 500px at 20% 0%, #fce7f3 0%, transparent 60%),
    radial-gradient(900px 500px at 80% 0%, #ddd6fe 0%, transparent 60%),
    linear-gradient(to bottom, var(--color-bg), var(--color-bg));
}
[data-theme="sunset"] .btn-primary {
  background: linear-gradient(135deg, #db2777 0%, #7c3aed 100%);
  border: none;
}
[data-theme="sunset"] .btn-primary:hover {
  background: linear-gradient(135deg, #be185d 0%, #6d28d9 100%);
  transform: translateY(-1px);
}
[data-theme="sunset"] .brand-mark {
  background: linear-gradient(135deg, #db2777 0%, #7c3aed 100%);
}
[data-theme="sunset"] .hero-badge {
  background: #fdf2f8;
  color: #9d174d;
  border-color: #fbcfe8;
}

/* ---------- 5. Indigo Glow — deep indigo + violet, modern dev tool ---------- */
[data-theme="indigo-glow"] {
  --color-primary: #6366f1;
  --color-primary-dark: #4338ca;
  --color-primary-light: #c7d2fe;
  --color-primary-bg: #eef2ff;
  --color-bg: #ffffff;
  --color-bg-subtle: #f5f3ff;
  --color-bg-muted: #ede9fe;
  --color-text: #1e1b4b;
  --color-text-muted: #4338ca;
  --color-text-soft: #6366f1;
  --color-border: #e0e7ff;
  --color-border-strong: #c7d2fe;
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-heading: 'Sora', sans-serif;
  --font-weight-h1: 800;
}
[data-theme="indigo-glow"] .hero {
  background:
    radial-gradient(1200px 600px at 50% -10%, #c7d2fe 0%, #e0e7ff 40%, transparent 70%),
    linear-gradient(to bottom, var(--color-bg), var(--color-bg));
}
[data-theme="indigo-glow"] .btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.5);
}
[data-theme="indigo-glow"] .brand-mark {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.4);
}

/* ---------- 6. Neo-Brutal — chunky, high-contrast, Y2K brutalist ---------- */
[data-theme="neo-brutal"] {
  --color-primary: #fbbf24;
  --color-primary-dark: #f59e0b;
  --color-primary-light: #fde68a;
  --color-primary-bg: #fef3c7;
  --color-bg: #fffbeb;
  --color-bg-subtle: #fff7dc;
  --color-bg-muted: #fef3c7;
  --color-text: #000000;
  --color-text-muted: #1f2937;
  --color-text-soft: #374151;
  --color-border: #000000;
  --color-border-strong: #000000;
  --font-sans: 'Space Mono', ui-monospace, monospace;
  --font-heading: 'Archivo Black', sans-serif;
  --font-weight-h1: 400;
  --font-weight-h2: 400;
  --heading-transform: uppercase;
  --heading-tracking: 0em;
  --radius-sm: 0px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow-sm: 3px 3px 0 0 #000;
  --shadow-md: 5px 5px 0 0 #000;
  --shadow-lg: 8px 8px 0 0 #000;
}
[data-theme="neo-brutal"] .site-header {
  background: var(--color-bg);
  border-bottom: 3px solid #000;
  backdrop-filter: none;
}
[data-theme="neo-brutal"] .brand-mark {
  background: #000;
  color: var(--color-primary);
  border: 2px solid #000;
  border-radius: 4px;
}
[data-theme="neo-brutal"] .card,
[data-theme="neo-brutal"] .step,
[data-theme="neo-brutal"] .compliance,
[data-theme="neo-brutal"] .faq details {
  border: 2px solid #000;
  box-shadow: 5px 5px 0 0 #000;
}
[data-theme="neo-brutal"] .card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 0 #000;
  border-color: #000;
}
[data-theme="neo-brutal"] .btn {
  border: 2px solid #000;
  border-radius: 4px;
  box-shadow: 4px 4px 0 0 #000;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}
[data-theme="neo-brutal"] .btn-primary {
  color: #000;
  background: var(--color-primary);
}
[data-theme="neo-brutal"] .btn-primary:hover {
  background: var(--color-primary);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 #000;
}
[data-theme="neo-brutal"] .btn-secondary {
  background: #fff;
  color: #000;
}
[data-theme="neo-brutal"] .hero-badge {
  background: #000;
  color: var(--color-primary);
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 700;
}
[data-theme="neo-brutal"] .step-num,
[data-theme="neo-brutal"] .card-icon {
  border: 2px solid #000;
  border-radius: 4px;
  background: var(--color-primary);
  color: #000;
}
[data-theme="neo-brutal"] .placeholder-frame {
  border: 2px dashed #000;
  background: var(--color-primary-bg);
  border-radius: 4px;
}
[data-theme="neo-brutal"] .site-footer {
  border-top: 3px solid #000;
}
[data-theme="neo-brutal"] .eyebrow {
  background: #000;
  color: var(--color-primary);
  padding: 2px 8px;
}

/* ---------- 7. Cyber Dark — terminal, neon cyan on midnight ---------- */
[data-theme="cyber-dark"] {
  --color-primary: #22d3ee;
  --color-primary-dark: #06b6d4;
  --color-primary-light: rgba(34, 211, 238, 0.25);
  --color-primary-bg: rgba(34, 211, 238, 0.08);
  --color-bg: #0a0e1a;
  --color-bg-subtle: #0f172a;
  --color-bg-muted: #1e293b;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-soft: #64748b;
  --color-border: #1e293b;
  --color-border-strong: #334155;
  --font-sans: 'JetBrains Mono', ui-monospace, monospace;
  --font-heading: 'Orbitron', sans-serif;
  --font-weight-h1: 800;
  --font-weight-h2: 700;
  --heading-transform: uppercase;
  --heading-tracking: 0.04em;
  --shadow-sm: 0 0 0 1px rgba(34, 211, 238, 0.1);
  --shadow-md: 0 0 24px -4px rgba(34, 211, 238, 0.25);
  --shadow-lg: 0 0 40px -6px rgba(34, 211, 238, 0.35);
}
[data-theme="cyber-dark"] body {
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(34, 211, 238, 0.08) 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 60%),
    var(--color-bg);
}
[data-theme="cyber-dark"] .site-header {
  background: rgba(10, 14, 26, 0.8);
  border-bottom-color: var(--color-border);
}
[data-theme="cyber-dark"] .brand-mark {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.5);
}
[data-theme="cyber-dark"] .hero {
  background: transparent;
}
[data-theme="cyber-dark"] .hero-badge {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.3);
}
[data-theme="cyber-dark"] .btn-primary {
  background: var(--color-primary);
  color: #0a0e1a;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.4);
  font-weight: 700;
}
[data-theme="cyber-dark"] .btn-primary:hover {
  background: #67e8f9;
  color: #0a0e1a;
  box-shadow: 0 0 32px rgba(34, 211, 238, 0.6);
}
[data-theme="cyber-dark"] .btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
[data-theme="cyber-dark"] .btn-secondary:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
[data-theme="cyber-dark"] .card,
[data-theme="cyber-dark"] .step,
[data-theme="cyber-dark"] .compliance,
[data-theme="cyber-dark"] .faq details,
[data-theme="cyber-dark"] .screenshot,
[data-theme="cyber-dark"] .pricing-note {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}
[data-theme="cyber-dark"] .card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.25);
}
[data-theme="cyber-dark"] .screenshot-caption {
  background: var(--color-bg-muted);
  border-top-color: var(--color-border-strong);
  color: var(--color-text);
}
[data-theme="cyber-dark"] .card-icon,
[data-theme="cyber-dark"] .step-num {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
[data-theme="cyber-dark"] .placeholder-frame {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
}
[data-theme="cyber-dark"] .site-footer {
  background: #050811;
  border-top-color: var(--color-border);
}
[data-theme="cyber-dark"] .footer-legal {
  border-top-color: var(--color-border);
}
[data-theme="cyber-dark"] .compliance li::before {
  background: var(--color-primary-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2322d3ee'><path d='M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4L8.5 12l6.8-6.8a1 1 0 0 1 1.4 0z'/></svg>") center / 14px no-repeat;
}
[data-theme="cyber-dark"] a {
  color: var(--color-primary);
}
[data-theme="cyber-dark"] a:hover {
  color: #67e8f9;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
}
[data-theme="cyber-dark"] mark {
  background: rgba(251, 191, 36, 0.3);
  color: #fde68a;
}
[data-theme="cyber-dark"] code {
  background: var(--color-bg-muted);
  color: var(--color-primary);
}

/* ---------- 8. Nordic Frost — cool blue minimal, IBM Plex Sans ---------- */
[data-theme="nordic-frost"] {
  --color-primary: #1e40af;
  --color-primary-dark: #1e3a8a;
  --color-primary-light: #dbeafe;
  --color-primary-bg: #eff6ff;
  --color-bg: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-bg-muted: #eff6ff;
  --color-text: #0f172a;
  --color-text-muted: #334155;
  --color-text-soft: #64748b;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-heading: 'IBM Plex Sans', system-ui, sans-serif;
  --font-weight-h1: 700;
}

/* ---------- 9. Paper White — pure minimal, tight typographic ---------- */
[data-theme="paper-white"] {
  --color-primary: #000000;
  --color-primary-dark: #000000;
  --color-primary-light: #f5f5f5;
  --color-primary-bg: #fafafa;
  --color-bg: #ffffff;
  --color-bg-subtle: #fcfcfc;
  --color-bg-muted: #f7f7f7;
  --color-text: #000000;
  --color-text-muted: #3f3f46;
  --color-text-soft: #71717a;
  --color-border: #e5e5e5;
  --color-border-strong: #a3a3a3;
  --font-sans: 'Inter Tight', system-ui, sans-serif;
  --font-heading: 'Inter Tight', system-ui, sans-serif;
  --font-weight-h1: 800;
  --heading-tracking: -0.04em;
}
[data-theme="paper-white"] .brand-mark { background: #000; }
[data-theme="paper-white"] .hero { background: #fff; }

/* ---------- 10. Zen Green — olive/sage + Work Sans ---------- */
[data-theme="zen-green"] {
  --color-primary: #3f6212;
  --color-primary-dark: #365314;
  --color-primary-light: #d9f99d;
  --color-primary-bg: #f7fee7;
  --color-bg: #fafaf9;
  --color-bg-subtle: #f5f5f4;
  --color-bg-muted: #e7e5e4;
  --color-text: #1c1917;
  --color-text-muted: #57534e;
  --color-text-soft: #78716c;
  --color-border: #e7e5e4;
  --color-border-strong: #d6d3d1;
  --font-sans: 'Work Sans', system-ui, sans-serif;
  --font-heading: 'Work Sans', system-ui, sans-serif;
  --font-weight-h1: 700;
}

/* ---------- 11. Deep Navy — navy + Red Hat Display ---------- */
[data-theme="deep-navy"] {
  --color-primary: #1e3a8a;
  --color-primary-dark: #172554;
  --color-primary-light: #bfdbfe;
  --color-primary-bg: #eff6ff;
  --color-bg: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-bg-muted: #f1f5f9;
  --color-text: #0c1e47;
  --color-text-muted: #334155;
  --color-text-soft: #64748b;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --font-sans: 'Red Hat Display', system-ui, sans-serif;
  --font-heading: 'Red Hat Display', system-ui, sans-serif;
  --font-weight-h1: 800;
}

/* ---------- 12. Slate Pro — cool slate + Outfit ---------- */
[data-theme="slate-pro"] {
  --color-primary: #334155;
  --color-primary-dark: #1e293b;
  --color-primary-light: #e2e8f0;
  --color-primary-bg: #f1f5f9;
  --color-bg: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-bg-muted: #f1f5f9;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-soft: #64748b;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --font-sans: 'Outfit', system-ui, sans-serif;
  --font-heading: 'Outfit', system-ui, sans-serif;
  --font-weight-h1: 700;
}

/* ---------- 13. Peach Blossom — coral pink + warm cream + Nunito ---------- */
[data-theme="peach-blossom"] {
  --color-primary: #f43f5e;
  --color-primary-dark: #e11d48;
  --color-primary-light: #fecdd3;
  --color-primary-bg: #fff1f2;
  --color-bg: #fffbf0;
  --color-bg-subtle: #fef7e0;
  --color-bg-muted: #fef3c7;
  --color-text: #3f2417;
  --color-text-muted: #78350f;
  --color-text-soft: #92400e;
  --color-border: #fde68a;
  --color-border-strong: #fbbf24;
  --font-sans: 'Nunito', system-ui, sans-serif;
  --font-heading: 'Nunito', system-ui, sans-serif;
  --font-weight-h1: 800;
}
[data-theme="peach-blossom"] .hero {
  background:
    radial-gradient(1000px 500px at 50% -10%, #fce7f3 0%, #fef3c7 50%, transparent 80%),
    linear-gradient(to bottom, var(--color-bg), var(--color-bg));
}
[data-theme="peach-blossom"] .brand-mark {
  background: linear-gradient(135deg, #f43f5e 0%, #fbbf24 100%);
}

/* ---------- 14. Ocean Teal — cyan primary + coral accent + Poppins ---------- */
[data-theme="ocean-teal"] {
  --color-primary: #0891b2;
  --color-primary-dark: #0e7490;
  --color-primary-light: #a5f3fc;
  --color-primary-bg: #ecfeff;
  --color-bg: #ffffff;
  --color-bg-subtle: #f0fdfa;
  --color-bg-muted: #ccfbf1;
  --color-text: #083344;
  --color-text-muted: #0c4a6e;
  --color-text-soft: #0369a1;
  --color-border: #cffafe;
  --color-border-strong: #67e8f9;
  --font-sans: 'Poppins', system-ui, sans-serif;
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-weight-h1: 700;
}
[data-theme="ocean-teal"] .btn-primary {
  background: linear-gradient(135deg, #0891b2 0%, #fb7185 100%);
  border: none;
}
[data-theme="ocean-teal"] .brand-mark {
  background: linear-gradient(135deg, #0891b2 0%, #fb7185 100%);
}

/* ---------- 15. Mint & Berry — mint green + magenta + Quicksand ---------- */
[data-theme="mint-berry"] {
  --color-primary: #10b981;
  --color-primary-dark: #059669;
  --color-primary-light: #a7f3d0;
  --color-primary-bg: #d1fae5;
  --color-bg: #f0fdf4;
  --color-bg-subtle: #ecfdf5;
  --color-bg-muted: #d1fae5;
  --color-text: #1f2937;
  --color-text-muted: #4b5563;
  --color-text-soft: #6b7280;
  --color-border: #a7f3d0;
  --color-border-strong: #6ee7b7;
  --font-sans: 'Quicksand', system-ui, sans-serif;
  --font-heading: 'Quicksand', system-ui, sans-serif;
  --font-weight-h1: 700;
}
[data-theme="mint-berry"] .btn-primary {
  background: linear-gradient(135deg, #10b981 0%, #c026d3 100%);
  border: none;
}
[data-theme="mint-berry"] .brand-mark {
  background: linear-gradient(135deg, #10b981 0%, #c026d3 100%);
}

/* ---------- 16. Electric Blue — royal blue + Montserrat ---------- */
[data-theme="electric-blue"] {
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #bfdbfe;
  --color-primary-bg: #eff6ff;
  --color-bg: #ffffff;
  --color-bg-subtle: #f0f9ff;
  --color-bg-muted: #e0f2fe;
  --color-text: #0c1e47;
  --color-text-muted: #1e40af;
  --color-text-soft: #3b82f6;
  --color-border: #bfdbfe;
  --color-border-strong: #93c5fd;
  --font-sans: 'Montserrat', system-ui, sans-serif;
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-weight-h1: 800;
  --heading-tracking: -0.02em;
}
[data-theme="electric-blue"] .hero {
  background:
    radial-gradient(1100px 550px at 50% -10%, #bfdbfe 0%, #e0f2fe 50%, transparent 80%),
    linear-gradient(to bottom, var(--color-bg), var(--color-bg));
}

/* ---------- 17. Forest & Gold — deep green + gold + Playfair serif ---------- */
[data-theme="forest-gold"] {
  --color-primary: #166534;
  --color-primary-dark: #14532d;
  --color-primary-light: #bbf7d0;
  --color-primary-bg: #f0fdf4;
  --color-bg: #fdfbf5;
  --color-bg-subtle: #faf4ea;
  --color-bg-muted: #f3eadb;
  --color-text: #1c1917;
  --color-text-muted: #44403c;
  --color-text-soft: #78716c;
  --color-border: #e7dfce;
  --color-border-strong: #d6cab0;
  --font-sans: 'Lato', system-ui, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-weight-h1: 900;
  --heading-tracking: -0.02em;
}
[data-theme="forest-gold"] .eyebrow { color: #a16207; }
[data-theme="forest-gold"] .hero-badge {
  background: #fef3c7; color: #a16207; border-color: #fde68a;
}
[data-theme="forest-gold"] .card-icon,
[data-theme="forest-gold"] .step-num {
  background: #fef3c7; color: #a16207;
}
[data-theme="forest-gold"] .brand-mark {
  background: linear-gradient(135deg, #166534 0%, #a16207 100%);
}

/* ---------- 18. Vaporwave — pastel pink + cyan, Bebas Neue display ---------- */
[data-theme="vaporwave"] {
  --color-primary: #e879f9;
  --color-primary-dark: #d946ef;
  --color-primary-light: #f5d0fe;
  --color-primary-bg: #fdf4ff;
  --color-bg: #fdf2f8;
  --color-bg-subtle: #fae8ff;
  --color-bg-muted: #f5d0fe;
  --color-text: #581c87;
  --color-text-muted: #7c3aed;
  --color-text-soft: #a855f7;
  --color-border: #f5d0fe;
  --color-border-strong: #e879f9;
  --font-sans: 'Outfit', system-ui, sans-serif;
  --font-heading: 'Bebas Neue', sans-serif;
  --font-weight-h1: 400;
  --heading-tracking: 0.04em;
  --heading-transform: uppercase;
}
[data-theme="vaporwave"] body {
  background:
    linear-gradient(180deg, #fdf2f8 0%, #e0f2fe 100%);
}
[data-theme="vaporwave"] .hero {
  background:
    radial-gradient(900px 450px at 30% 20%, rgba(232, 121, 249, 0.35) 0%, transparent 60%),
    radial-gradient(900px 450px at 70% 20%, rgba(34, 211, 238, 0.35) 0%, transparent 60%);
}
[data-theme="vaporwave"] .btn-primary {
  background: linear-gradient(135deg, #e879f9 0%, #22d3ee 100%);
  border: none;
  color: #fff;
}
[data-theme="vaporwave"] .brand-mark {
  background: linear-gradient(135deg, #e879f9 0%, #22d3ee 100%);
}
[data-theme="vaporwave"] h1 { font-size: clamp(3rem, 7vw, 5rem); }

/* ---------- 19. Retro 80s — neon pink + cyan on dark purple, Monoton ---------- */
[data-theme="retro-80s"] {
  --color-primary: #ec4899;
  --color-primary-dark: #db2777;
  --color-primary-light: #f9a8d4;
  --color-primary-bg: rgba(236, 72, 153, 0.12);
  --color-bg: #0c0624;
  --color-bg-subtle: #1e1b4b;
  --color-bg-muted: #312e81;
  --color-text: #fef3c7;
  --color-text-muted: #fde68a;
  --color-text-soft: #fbbf24;
  --color-border: #312e81;
  --color-border-strong: #4c1d95;
  --font-sans: 'Outfit', system-ui, sans-serif;
  --font-heading: 'Monoton', cursive;
  --font-weight-h1: 400;
  --heading-tracking: 0.04em;
  --heading-transform: uppercase;
  --shadow-sm: 0 0 10px rgba(236, 72, 153, 0.3);
  --shadow-md: 0 0 20px rgba(236, 72, 153, 0.35);
  --shadow-lg: 0 0 40px rgba(236, 72, 153, 0.5);
}
[data-theme="retro-80s"] body {
  background: linear-gradient(180deg, #0c0624 0%, #1e1b4b 100%);
}
[data-theme="retro-80s"] .hero { background: transparent; }
[data-theme="retro-80s"] .site-header {
  background: rgba(12, 6, 36, 0.85);
  border-bottom: 1px solid #312e81;
}
[data-theme="retro-80s"] h1,
[data-theme="retro-80s"] h2 {
  background: linear-gradient(135deg, #ec4899 0%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="retro-80s"] .btn-primary {
  background: linear-gradient(135deg, #ec4899 0%, #22d3ee 100%);
  border: none;
  color: #fff;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
}
[data-theme="retro-80s"] .brand-mark {
  background: linear-gradient(135deg, #ec4899 0%, #22d3ee 100%);
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.6);
}
[data-theme="retro-80s"] .card,
[data-theme="retro-80s"] .step,
[data-theme="retro-80s"] .compliance,
[data-theme="retro-80s"] .faq details,
[data-theme="retro-80s"] .screenshot,
[data-theme="retro-80s"] .pricing-note {
  background: rgba(30, 27, 75, 0.6);
  border-color: var(--color-border-strong);
  backdrop-filter: blur(10px);
}
[data-theme="retro-80s"] .card-icon,
[data-theme="retro-80s"] .step-num {
  background: rgba(236, 72, 153, 0.2);
  color: #f9a8d4;
  border: 1px solid #ec4899;
}
[data-theme="retro-80s"] .placeholder-frame {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border: 1px dashed #4c1d95;
  color: #fbbf24;
}
[data-theme="retro-80s"] .screenshot-caption {
  background: rgba(12, 6, 36, 0.6);
  border-top-color: var(--color-border);
  color: #fbbf24;
}
[data-theme="retro-80s"] .site-footer {
  background: #050318;
  border-top-color: #312e81;
}
[data-theme="retro-80s"] a { color: #22d3ee; }
[data-theme="retro-80s"] a:hover { color: #f9a8d4; }

/* ---------- 20. Sketchbook — handwriting fonts on graph paper ---------- */
[data-theme="sketch"] {
  --color-primary: #3730a3;
  --color-primary-dark: #312e81;
  --color-primary-light: #c7d2fe;
  --color-primary-bg: #eef2ff;
  --color-bg: #fefdfb;
  --color-bg-subtle: #faf9f5;
  --color-bg-muted: #f4f1e9;
  --color-text: #1f2937;
  --color-text-muted: #4b5563;
  --color-text-soft: #6b7280;
  --color-border: #9ca3af;
  --color-border-strong: #4b5563;
  --font-sans: 'Patrick Hand', 'Caveat', cursive;
  --font-heading: 'Architects Daughter', cursive;
  --font-weight-h1: 700;
  --font-weight-h2: 700;
}
[data-theme="sketch"] body {
  background-color: #fefdfb;
  background-image:
    linear-gradient(#dbeafe 1px, transparent 1px),
    linear-gradient(90deg, #dbeafe 1px, transparent 1px);
  background-size: 24px 24px;
  font-size: 18px;
  line-height: 1.5;
}
[data-theme="sketch"] .hero { background: transparent; }
[data-theme="sketch"] .site-header {
  background: rgba(254, 253, 251, 0.9);
  border-bottom: 2px solid #4b5563;
}
[data-theme="sketch"] .card,
[data-theme="sketch"] .step,
[data-theme="sketch"] .compliance,
[data-theme="sketch"] .faq details,
[data-theme="sketch"] .screenshot,
[data-theme="sketch"] .pricing-note {
  background: rgba(254, 253, 251, 0.95);
  border: 2px solid #4b5563;
  border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(75, 85, 99, 0.25);
}
[data-theme="sketch"] .btn {
  border: 2px solid #1f2937;
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  box-shadow: 3px 3px 0 rgba(75, 85, 99, 0.25);
}
[data-theme="sketch"] .btn-primary { background: #3730a3; color: #fff; }
[data-theme="sketch"] .brand-mark {
  background: #3730a3;
  border: 2px solid #1f2937;
  box-shadow: 2px 2px 0 rgba(75, 85, 99, 0.3);
}
[data-theme="sketch"] .placeholder-frame {
  border: 2px dashed #4b5563;
  background: rgba(254, 253, 251, 0.7);
}

/* ---------- 21. Newspaper — editorial serif, cream newsprint ---------- */
[data-theme="newspaper"] {
  --color-primary: #000000;
  --color-primary-dark: #0c0a09;
  --color-primary-light: #e7e5e4;
  --color-primary-bg: #fafaf9;
  --color-bg: #fdfbf7;
  --color-bg-subtle: #f5f3ed;
  --color-bg-muted: #e7e4dc;
  --color-text: #0c0a09;
  --color-text-muted: #44403c;
  --color-text-soft: #78716c;
  --color-border: #d6d3d1;
  --color-border-strong: #a8a29e;
  --font-sans: 'Libre Baskerville', Georgia, serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-weight-h1: 900;
  --font-weight-h2: 800;
  --heading-tracking: -0.03em;
}
[data-theme="newspaper"] h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.05; }
[data-theme="newspaper"] .eyebrow {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  letter-spacing: 0.18em;
  color: #78716c;
  text-transform: uppercase;
}
[data-theme="newspaper"] .brand-mark {
  background: #000;
  color: #fdfbf7;
  font-family: var(--font-heading);
  font-weight: 900;
}
[data-theme="newspaper"] .hero {
  background: var(--color-bg);
  border-bottom: 4px double var(--color-border-strong);
}
[data-theme="newspaper"] .section-alt {
  background: var(--color-bg-subtle);
}

/* ---------- 22. Glitch Core — pixel fonts, chromatic H1, dark ---------- */
[data-theme="glitch"] {
  --color-primary: #f59e0b;
  --color-primary-dark: #d97706;
  --color-primary-light: rgba(245, 158, 11, 0.3);
  --color-primary-bg: rgba(245, 158, 11, 0.1);
  --color-bg: #000000;
  --color-bg-subtle: #0a0a0a;
  --color-bg-muted: #171717;
  --color-text: #e5e5e5;
  --color-text-muted: #a3a3a3;
  --color-text-soft: #737373;
  --color-border: #262626;
  --color-border-strong: #404040;
  --font-sans: 'VT323', ui-monospace, monospace;
  --font-heading: 'Press Start 2P', monospace;
  --font-weight-h1: 400;
  --font-weight-h2: 400;
  --heading-tracking: 0em;
  --heading-transform: uppercase;
}
[data-theme="glitch"] body { font-size: 20px; line-height: 1.5; }
[data-theme="glitch"] h1 {
  font-size: clamp(1.25rem, 3.4vw, 2.25rem);
  line-height: 1.4;
  text-shadow:
    2px 0 0 #06b6d4,
    -2px 0 0 #ec4899;
}
[data-theme="glitch"] h2 {
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-primary);
}
[data-theme="glitch"] h3 {
  font-size: 0.9rem;
  font-family: 'Press Start 2P', monospace;
  line-height: 1.4;
}
[data-theme="glitch"] .btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  padding: 18px 24px;
  letter-spacing: 0;
}
[data-theme="glitch"] .site-header {
  background: rgba(0, 0, 0, 0.9);
  border-bottom: 1px solid var(--color-primary);
}
[data-theme="glitch"] .hero { background: transparent; }
[data-theme="glitch"] .brand-mark {
  background: var(--color-primary);
  color: #000;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
}
[data-theme="glitch"] .card,
[data-theme="glitch"] .step,
[data-theme="glitch"] .compliance,
[data-theme="glitch"] .faq details,
[data-theme="glitch"] .screenshot,
[data-theme="glitch"] .pricing-note {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-primary);
}
[data-theme="glitch"] .btn-primary {
  background: var(--color-primary);
  color: #000;
  border: 1px solid var(--color-primary);
}
[data-theme="glitch"] .btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
[data-theme="glitch"] .card-icon,
[data-theme="glitch"] .step-num {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
}
[data-theme="glitch"] .placeholder-frame {
  background: #0a0a0a;
  border: 1px dashed var(--color-primary);
  color: var(--color-primary);
}
[data-theme="glitch"] .screenshot-caption {
  background: #000;
  border-top-color: var(--color-primary);
  color: var(--color-primary);
}
[data-theme="glitch"] .site-footer {
  background: #000;
  border-top: 1px solid var(--color-primary);
}
[data-theme="glitch"] a { color: #06b6d4; }
[data-theme="glitch"] a:hover { color: #ec4899; }
[data-theme="glitch"] .hero-badge {
  background: var(--color-primary);
  color: #000;
  border: 1px solid var(--color-primary);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
}


/* =========================================================
   Expansion pack — 50 additional themes (#23-72 across groups).
   ========================================================= */

/* ---------- 9. Arctic — icy blue minimal, Onest ---------- */
[data-theme="arctic"] {
  --color-primary:#0284c7; --color-primary-dark:#0369a1;
  --color-primary-light:#bae6fd; --color-primary-bg:#f0f9ff;
  --color-bg:#ffffff; --color-bg-subtle:#f0f9ff; --color-bg-muted:#e0f2fe;
  --color-text:#0c4a6e; --color-text-muted:#075985; --color-text-soft:#0369a1;
  --color-border:#e0f2fe; --color-border-strong:#bae6fd;
  --font-sans:'Onest',system-ui,sans-serif; --font-heading:'Onest',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 10. Bone — warm ivory + Lora serif throughout ---------- */
[data-theme="bone"] {
  --color-primary:#44403c; --color-primary-dark:#292524;
  --color-primary-light:#e7e5e4; --color-primary-bg:#f5f5f4;
  --color-bg:#fafaf4; --color-bg-subtle:#f5f5f0; --color-bg-muted:#ebe9e1;
  --color-text:#1c1917; --color-text-muted:#44403c; --color-text-soft:#78716c;
  --color-border:#e7e5e4; --color-border-strong:#d6d3d1;
  --font-sans:'Lora',Georgia,serif; --font-heading:'Lora',Georgia,serif;
  --font-weight-h1:700;
}

/* ---------- 11. Pine — deep green + Figtree ---------- */
[data-theme="pine"] {
  --color-primary:#065f46; --color-primary-dark:#064e3b;
  --color-primary-light:#a7f3d0; --color-primary-bg:#ecfdf5;
  --color-bg:#ffffff; --color-bg-subtle:#f8faf9; --color-bg-muted:#ecfdf5;
  --color-text:#064e3b; --color-text-muted:#065f46; --color-text-soft:#047857;
  --color-border:#d1fae5; --color-border-strong:#a7f3d0;
  --font-sans:'Figtree',system-ui,sans-serif; --font-heading:'Figtree',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 12. Sand — desert warm, Noto Serif headings ---------- */
[data-theme="sand"] {
  --color-primary:#78350f; --color-primary-dark:#451a03;
  --color-primary-light:#fed7aa; --color-primary-bg:#fffbeb;
  --color-bg:#fdf8f0; --color-bg-subtle:#faf2e2; --color-bg-muted:#f3e8d2;
  --color-text:#44403c; --color-text-muted:#78716c; --color-text-soft:#a8a29e;
  --color-border:#e7dfce; --color-border-strong:#d6cab0;
  --font-sans:'Inter',system-ui,sans-serif; --font-heading:'Noto Serif',Georgia,serif;
  --font-weight-h1:700;
}

/* ---------- 13. Silk — Cormorant Garamond italic heading ---------- */
[data-theme="silk"] {
  --color-primary:#78716c; --color-primary-dark:#57534e;
  --color-primary-light:#e7e5e4; --color-primary-bg:#faf9f7;
  --color-bg:#fffdf5; --color-bg-subtle:#faf8f0; --color-bg-muted:#f0ede3;
  --color-text:#292524; --color-text-muted:#57534e; --color-text-soft:#78716c;
  --color-border:#e7e5e4; --color-border-strong:#d6d3d1;
  --font-sans:'Inter',system-ui,sans-serif; --font-heading:'Cormorant Garamond',Georgia,serif;
  --font-weight-h1:700; --heading-tracking:-0.02em;
}
[data-theme="silk"] h1 { font-style: italic; }

/* ---------- 14. Paper Blue — muted indigo, Jost ---------- */
[data-theme="paper-blue"] {
  --color-primary:#4338ca; --color-primary-dark:#3730a3;
  --color-primary-light:#c7d2fe; --color-primary-bg:#eef2ff;
  --color-bg:#ffffff; --color-bg-subtle:#f8fafc; --color-bg-muted:#e0e7ff;
  --color-text:#1e1b4b; --color-text-muted:#3730a3; --color-text-soft:#6366f1;
  --color-border:#e0e7ff; --color-border-strong:#c7d2fe;
  --font-sans:'Jost',system-ui,sans-serif; --font-heading:'Jost',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 15. Moss — moss green + Karla ---------- */
[data-theme="moss"] {
  --color-primary:#4d7c0f; --color-primary-dark:#3f6212;
  --color-primary-light:#bef264; --color-primary-bg:#f7fee7;
  --color-bg:#fafaf8; --color-bg-subtle:#f5f4f0; --color-bg-muted:#e7e5e0;
  --color-text:#292524; --color-text-muted:#57534e; --color-text-soft:#78716c;
  --color-border:#e7e5e4; --color-border-strong:#d6d3d1;
  --font-sans:'Karla',system-ui,sans-serif; --font-heading:'Karla',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 16. Ink — black + Spectral serif headings ---------- */
[data-theme="ink"] {
  --color-primary:#000000; --color-primary-dark:#000000;
  --color-primary-light:#e5e5e5; --color-primary-bg:#fafafa;
  --color-bg:#ffffff; --color-bg-subtle:#fafafa; --color-bg-muted:#f4f4f5;
  --color-text:#000000; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#e4e4e7; --color-border-strong:#a1a1aa;
  --font-sans:'Inter',system-ui,sans-serif; --font-heading:'Spectral',Georgia,serif;
  --font-weight-h1:700; --heading-tracking:-0.02em;
}

/* ---------- 17. Vanilla — warm cream + Bitter ---------- */
[data-theme="vanilla"] {
  --color-primary:#92400e; --color-primary-dark:#78350f;
  --color-primary-light:#fde68a; --color-primary-bg:#fffbeb;
  --color-bg:#fffdf6; --color-bg-subtle:#fefae8; --color-bg-muted:#fef3c7;
  --color-text:#451a03; --color-text-muted:#78350f; --color-text-soft:#92400e;
  --color-border:#fde68a; --color-border-strong:#fbbf24;
  --font-sans:'Bitter',Georgia,serif; --font-heading:'Bitter',Georgia,serif;
  --font-weight-h1:700;
}

/* ---------- 18. Chalk — gray-on-gray, Source Sans 3 ---------- */
[data-theme="chalk"] {
  --color-primary:#3f3f46; --color-primary-dark:#27272a;
  --color-primary-light:#e4e4e7; --color-primary-bg:#fafafa;
  --color-bg:#f5f5f5; --color-bg-subtle:#ededed; --color-bg-muted:#e0e0e0;
  --color-text:#18181b; --color-text-muted:#3f3f46; --color-text-soft:#71717a;
  --color-border:#d4d4d8; --color-border-strong:#a1a1aa;
  --font-sans:'Source Sans 3',system-ui,sans-serif; --font-heading:'Source Sans 3',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 19. Linen — olive green + Lora ---------- */
[data-theme="linen"] {
  --color-primary:#3f6212; --color-primary-dark:#365314;
  --color-primary-light:#d9f99d; --color-primary-bg:#f7fee7;
  --color-bg:#fdfbf5; --color-bg-subtle:#f7f3e9; --color-bg-muted:#ebe5d4;
  --color-text:#1c1917; --color-text-muted:#44403c; --color-text-soft:#78716c;
  --color-border:#e7dfce; --color-border-strong:#d6cab0;
  --font-sans:'Lora',Georgia,serif; --font-heading:'Lora',Georgia,serif;
  --font-weight-h1:700;
}

/* ---------- 20. Clay — terracotta + Merriweather heading ---------- */
[data-theme="clay"] {
  --color-primary:#b45309; --color-primary-dark:#92400e;
  --color-primary-light:#fed7aa; --color-primary-bg:#fff7ed;
  --color-bg:#fef9f3; --color-bg-subtle:#fdf4e7; --color-bg-muted:#f5ead5;
  --color-text:#431407; --color-text-muted:#78350f; --color-text-soft:#9a3412;
  --color-border:#fed7aa; --color-border-strong:#fdba74;
  --font-sans:'Inter',system-ui,sans-serif; --font-heading:'Merriweather',Georgia,serif;
  --font-weight-h1:900;
}

/* ---------- 21. Pebble — stone gray + Urbanist ---------- */
[data-theme="pebble"] {
  --color-primary:#44403c; --color-primary-dark:#292524;
  --color-primary-light:#d6d3d1; --color-primary-bg:#f5f5f4;
  --color-bg:#ffffff; --color-bg-subtle:#f5f5f4; --color-bg-muted:#e7e5e4;
  --color-text:#1c1917; --color-text-muted:#44403c; --color-text-soft:#78716c;
  --color-border:#e7e5e4; --color-border-strong:#d6d3d1;
  --font-sans:'Urbanist',system-ui,sans-serif; --font-heading:'Urbanist',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 22. Fog — cool slate, Figtree ---------- */
[data-theme="fog"] {
  --color-primary:#334155; --color-primary-dark:#1e293b;
  --color-primary-light:#cbd5e1; --color-primary-bg:#f1f5f9;
  --color-bg:#f8fafc; --color-bg-subtle:#f1f5f9; --color-bg-muted:#e2e8f0;
  --color-text:#0f172a; --color-text-muted:#334155; --color-text-soft:#64748b;
  --color-border:#e2e8f0; --color-border-strong:#cbd5e1;
  --font-sans:'Figtree',system-ui,sans-serif; --font-heading:'Figtree',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 23. Marble — gold accent + DM Serif Display ---------- */
[data-theme="marble"] {
  --color-primary:#ca8a04; --color-primary-dark:#a16207;
  --color-primary-light:#fde68a; --color-primary-bg:#fefce8;
  --color-bg:#ffffff; --color-bg-subtle:#fafaf9; --color-bg-muted:#f5f5f4;
  --color-text:#18181b; --color-text-muted:#3f3f46; --color-text-soft:#71717a;
  --color-border:#e4e4e7; --color-border-strong:#d4d4d8;
  --font-sans:'Inter',system-ui,sans-serif; --font-heading:'DM Serif Display',Georgia,serif;
  --font-weight-h1:400; --heading-tracking:-0.03em;
}
[data-theme="marble"] .brand-mark { background:linear-gradient(135deg,#ca8a04 0%,#78350f 100%); }

/* ---------- 24. Cotton — taupe minimal + Public Sans ---------- */
[data-theme="cotton"] {
  --color-primary:#78716c; --color-primary-dark:#57534e;
  --color-primary-light:#e7e5e4; --color-primary-bg:#fafaf9;
  --color-bg:#ffffff; --color-bg-subtle:#fafaf9; --color-bg-muted:#f5f5f4;
  --color-text:#1c1917; --color-text-muted:#44403c; --color-text-soft:#78716c;
  --color-border:#e7e5e4; --color-border-strong:#d6d3d1;
  --font-sans:'Public Sans',system-ui,sans-serif; --font-heading:'Public Sans',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 25. Twilight Gray — soft gradient + Manrope ---------- */
[data-theme="twilight-gray"] {
  --color-primary:#475569; --color-primary-dark:#334155;
  --color-primary-light:#cbd5e1; --color-primary-bg:#f1f5f9;
  --color-bg:#f8fafc; --color-bg-subtle:#e2e8f0; --color-bg-muted:#cbd5e1;
  --color-text:#1e293b; --color-text-muted:#475569; --color-text-soft:#64748b;
  --color-border:#cbd5e1; --color-border-strong:#94a3b8;
  --font-sans:'Manrope',system-ui,sans-serif; --font-heading:'Manrope',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="twilight-gray"] .hero { background:linear-gradient(180deg,#f1f5f9 0%,#cbd5e1 100%); }

/* ---------- 33. Cherry Blossom — soft pink, Quicksand ---------- */
[data-theme="cherry-blossom"] {
  --color-primary:#be185d; --color-primary-dark:#9d174d;
  --color-primary-light:#fbcfe8; --color-primary-bg:#fdf2f8;
  --color-bg:#fff7fa; --color-bg-subtle:#fce7f3; --color-bg-muted:#fbcfe8;
  --color-text:#500724; --color-text-muted:#831843; --color-text-soft:#be185d;
  --color-border:#fbcfe8; --color-border-strong:#f9a8d4;
  --font-sans:'Quicksand',system-ui,sans-serif; --font-heading:'Quicksand',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 34. Lavender — deep purple, Raleway ---------- */
[data-theme="lavender"] {
  --color-primary:#6b21a8; --color-primary-dark:#581c87;
  --color-primary-light:#e9d5ff; --color-primary-bg:#faf5ff;
  --color-bg:#fbf8fc; --color-bg-subtle:#f3e8ff; --color-bg-muted:#e9d5ff;
  --color-text:#3b0764; --color-text-muted:#581c87; --color-text-soft:#7e22ce;
  --color-border:#e9d5ff; --color-border-strong:#d8b4fe;
  --font-sans:'Raleway',system-ui,sans-serif; --font-heading:'Raleway',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 35. Citrus — yellow + lime, Dosis ---------- */
[data-theme="citrus"] {
  --color-primary:#65a30d; --color-primary-dark:#4d7c0f;
  --color-primary-light:#d9f99d; --color-primary-bg:#f7fee7;
  --color-bg:#fffdf0; --color-bg-subtle:#fef9c3; --color-bg-muted:#fef08a;
  --color-text:#1a2e05; --color-text-muted:#3f6212; --color-text-soft:#65a30d;
  --color-border:#d9f99d; --color-border-strong:#bef264;
  --font-sans:'Dosis',system-ui,sans-serif; --font-heading:'Dosis',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="citrus"] .btn-primary { background:linear-gradient(135deg,#eab308 0%,#65a30d 100%); border:none; }
[data-theme="citrus"] .brand-mark { background:linear-gradient(135deg,#eab308 0%,#65a30d 100%); }

/* ---------- 36. Cobalt — deep cobalt + Mulish ---------- */
[data-theme="cobalt"] {
  --color-primary:#1e40af; --color-primary-dark:#1e3a8a;
  --color-primary-light:#bfdbfe; --color-primary-bg:#eff6ff;
  --color-bg:#ffffff; --color-bg-subtle:#f0f9ff; --color-bg-muted:#dbeafe;
  --color-text:#172554; --color-text-muted:#1e3a8a; --color-text-soft:#1d4ed8;
  --color-border:#dbeafe; --color-border-strong:#bfdbfe;
  --font-sans:'Mulish',system-ui,sans-serif; --font-heading:'Mulish',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 37. Plum — plum + Barlow ---------- */
[data-theme="plum"] {
  --color-primary:#86198f; --color-primary-dark:#701a75;
  --color-primary-light:#f5d0fe; --color-primary-bg:#fdf4ff;
  --color-bg:#fff9fb; --color-bg-subtle:#fae8ff; --color-bg-muted:#f5d0fe;
  --color-text:#4a044e; --color-text-muted:#86198f; --color-text-soft:#a21caf;
  --color-border:#f5d0fe; --color-border-strong:#e879f9;
  --font-sans:'Barlow',system-ui,sans-serif; --font-heading:'Barlow',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 38. Aqua — aqua + coral, Rubik ---------- */
[data-theme="aqua"] {
  --color-primary:#06b6d4; --color-primary-dark:#0891b2;
  --color-primary-light:#a5f3fc; --color-primary-bg:#ecfeff;
  --color-bg:#ffffff; --color-bg-subtle:#f0fdff; --color-bg-muted:#cffafe;
  --color-text:#083344; --color-text-muted:#155e75; --color-text-soft:#0891b2;
  --color-border:#cffafe; --color-border-strong:#67e8f9;
  --font-sans:'Rubik',system-ui,sans-serif; --font-heading:'Rubik',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="aqua"] .btn-primary { background:linear-gradient(135deg,#06b6d4 0%,#fb7185 100%); border:none; }
[data-theme="aqua"] .brand-mark { background:linear-gradient(135deg,#06b6d4 0%,#fb7185 100%); }

/* ---------- 39. Sunflower — bright yellow bg, Fredoka ---------- */
[data-theme="sunflower"] {
  --color-primary:#a16207; --color-primary-dark:#854d0e;
  --color-primary-light:#fef08a; --color-primary-bg:#fefce8;
  --color-bg:#fefce8; --color-bg-subtle:#fef9c3; --color-bg-muted:#fef08a;
  --color-text:#422006; --color-text-muted:#713f12; --color-text-soft:#854d0e;
  --color-border:#fde047; --color-border-strong:#facc15;
  --font-sans:'Fredoka',system-ui,sans-serif; --font-heading:'Fredoka',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="sunflower"] .brand-mark { background:#a16207; color:#fefce8; }

/* ---------- 40. Rosewood — dusty rose + burgundy, Cardo heading ---------- */
[data-theme="rosewood"] {
  --color-primary:#9f1239; --color-primary-dark:#881337;
  --color-primary-light:#fecdd3; --color-primary-bg:#fff1f2;
  --color-bg:#fef4f5; --color-bg-subtle:#fce7ea; --color-bg-muted:#fecdd3;
  --color-text:#4c0519; --color-text-muted:#881337; --color-text-soft:#be123c;
  --color-border:#fecdd3; --color-border-strong:#fda4af;
  --font-sans:'Inter',system-ui,sans-serif; --font-heading:'Cardo',Georgia,serif;
  --font-weight-h1:700;
}

/* ---------- 41. Teal Fizz — teal + magenta, DM Sans ---------- */
[data-theme="teal-fizz"] {
  --color-primary:#0d9488; --color-primary-dark:#115e59;
  --color-primary-light:#99f6e4; --color-primary-bg:#f0fdfa;
  --color-bg:#ffffff; --color-bg-subtle:#f0fdfa; --color-bg-muted:#ccfbf1;
  --color-text:#134e4a; --color-text-muted:#0f766e; --color-text-soft:#14b8a6;
  --color-border:#ccfbf1; --color-border-strong:#5eead4;
  --font-sans:'DM Sans',system-ui,sans-serif; --font-heading:'DM Sans',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="teal-fizz"] .btn-primary { background:linear-gradient(135deg,#0d9488 0%,#c026d3 100%); border:none; }
[data-theme="teal-fizz"] .brand-mark { background:linear-gradient(135deg,#0d9488 0%,#c026d3 100%); }

/* ---------- 42. Purple Rain — royal purple gradient, Jost ---------- */
[data-theme="purple-rain"] {
  --color-primary:#7c3aed; --color-primary-dark:#6d28d9;
  --color-primary-light:#ddd6fe; --color-primary-bg:#f5f3ff;
  --color-bg:#ffffff; --color-bg-subtle:#faf5ff; --color-bg-muted:#ede9fe;
  --color-text:#2e1065; --color-text-muted:#5b21b6; --color-text-soft:#7c3aed;
  --color-border:#ede9fe; --color-border-strong:#ddd6fe;
  --font-sans:'Jost',system-ui,sans-serif; --font-heading:'Jost',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="purple-rain"] .hero {
  background: radial-gradient(1000px 500px at 50% -10%,#ddd6fe 0%,#ede9fe 50%,transparent 80%),linear-gradient(to bottom,var(--color-bg),var(--color-bg));
}
[data-theme="purple-rain"] .btn-primary { background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%); border:none; }
[data-theme="purple-rain"] .brand-mark { background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%); }

/* ---------- 43. Flamingo — hot pink + rose, Comfortaa ---------- */
[data-theme="flamingo"] {
  --color-primary:#ec4899; --color-primary-dark:#db2777;
  --color-primary-light:#fbcfe8; --color-primary-bg:#fdf2f8;
  --color-bg:#fff5f8; --color-bg-subtle:#fce7f3; --color-bg-muted:#fbcfe8;
  --color-text:#500724; --color-text-muted:#831843; --color-text-soft:#be185d;
  --color-border:#fbcfe8; --color-border-strong:#f9a8d4;
  --font-sans:'Comfortaa',system-ui,sans-serif; --font-heading:'Comfortaa',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 44. Matcha — matcha green + cream, Lora body + Nunito heading ---------- */
[data-theme="matcha"] {
  --color-primary:#65a30d; --color-primary-dark:#4d7c0f;
  --color-primary-light:#d9f99d; --color-primary-bg:#f7fee7;
  --color-bg:#fffef6; --color-bg-subtle:#fefae0; --color-bg-muted:#f0e6c4;
  --color-text:#1a2e05; --color-text-muted:#3f6212; --color-text-soft:#65a30d;
  --color-border:#d9f99d; --color-border-strong:#bef264;
  --font-sans:'Lora',Georgia,serif; --font-heading:'Nunito',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 45. Candy Pop — pink + cyan + yellow, Fredoka ---------- */
[data-theme="candy-pop"] {
  --color-primary:#ec4899; --color-primary-dark:#db2777;
  --color-primary-light:#fbcfe8; --color-primary-bg:#fdf2f8;
  --color-bg:#ffffff; --color-bg-subtle:#fefce8; --color-bg-muted:#cffafe;
  --color-text:#1e1b4b; --color-text-muted:#4338ca; --color-text-soft:#6366f1;
  --color-border:#fce7f3; --color-border-strong:#f9a8d4;
  --font-sans:'Fredoka',system-ui,sans-serif; --font-heading:'Fredoka',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="candy-pop"] .hero {
  background: radial-gradient(700px 400px at 20% 10%,#fbcfe8 0%,transparent 60%),radial-gradient(700px 400px at 80% 10%,#cffafe 0%,transparent 60%),radial-gradient(600px 300px at 50% 80%,#fde68a 0%,transparent 60%),var(--color-bg);
}
[data-theme="candy-pop"] .btn-primary { background:linear-gradient(135deg,#ec4899 0%,#06b6d4 100%); border:none; }
[data-theme="candy-pop"] .brand-mark { background:linear-gradient(135deg,#ec4899 0%,#06b6d4 100%); }

/* ---------- 46. Autumn Woods — burnt sienna + forest, Merriweather ---------- */
[data-theme="autumn-woods"] {
  --color-primary:#9a3412; --color-primary-dark:#7c2d12;
  --color-primary-light:#fed7aa; --color-primary-bg:#fff7ed;
  --color-bg:#fdf8f0; --color-bg-subtle:#faedd6; --color-bg-muted:#f3d5a3;
  --color-text:#14532d; --color-text-muted:#166534; --color-text-soft:#15803d;
  --color-border:#fed7aa; --color-border-strong:#fdba74;
  --font-sans:'Merriweather',Georgia,serif; --font-heading:'Merriweather',Georgia,serif;
  --font-weight-h1:900;
}
[data-theme="autumn-woods"] .eyebrow { color:#9a3412; }
[data-theme="autumn-woods"] .brand-mark { background:linear-gradient(135deg,#9a3412 0%,#14532d 100%); }

/* ---------- 47. Sapphire Gold — sapphire + gold, Lato ---------- */
[data-theme="sapphire-gold"] {
  --color-primary:#1e40af; --color-primary-dark:#1e3a8a;
  --color-primary-light:#bfdbfe; --color-primary-bg:#eff6ff;
  --color-bg:#ffffff; --color-bg-subtle:#f8fafc; --color-bg-muted:#fef3c7;
  --color-text:#0c1e47; --color-text-muted:#1e3a8a; --color-text-soft:#a16207;
  --color-border:#e0e7ff; --color-border-strong:#c7d2fe;
  --font-sans:'Lato',system-ui,sans-serif; --font-heading:'Lato',system-ui,sans-serif;
  --font-weight-h1:900;
}
[data-theme="sapphire-gold"] .eyebrow,
[data-theme="sapphire-gold"] .hero-badge { color:#a16207; }
[data-theme="sapphire-gold"] .hero-badge { background:#fef3c7; border-color:#fde68a; }
[data-theme="sapphire-gold"] .brand-mark { background:linear-gradient(135deg,#1e40af 0%,#ca8a04 100%); }

/* ---------- 48. Blush — blush pink + Nunito ---------- */
[data-theme="blush"] {
  --color-primary:#f43f5e; --color-primary-dark:#e11d48;
  --color-primary-light:#fecdd3; --color-primary-bg:#fff1f2;
  --color-bg:#fff8f9; --color-bg-subtle:#ffe4e6; --color-bg-muted:#fecdd3;
  --color-text:#4c0519; --color-text-muted:#881337; --color-text-soft:#be123c;
  --color-border:#fecdd3; --color-border-strong:#fda4af;
  --font-sans:'Nunito',system-ui,sans-serif; --font-heading:'Nunito',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 49. Periwinkle — periwinkle + lemon, Poppins ---------- */
[data-theme="periwinkle"] {
  --color-primary:#818cf8; --color-primary-dark:#6366f1;
  --color-primary-light:#c7d2fe; --color-primary-bg:#eef2ff;
  --color-bg:#fbfbff; --color-bg-subtle:#eef2ff; --color-bg-muted:#e0e7ff;
  --color-text:#1e1b4b; --color-text-muted:#3730a3; --color-text-soft:#6366f1;
  --color-border:#e0e7ff; --color-border-strong:#c7d2fe;
  --font-sans:'Poppins',system-ui,sans-serif; --font-heading:'Poppins',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="periwinkle"] .hero-badge { background:#fef9c3; border-color:#fde68a; color:#854d0e; }
[data-theme="periwinkle"] .brand-mark { background:linear-gradient(135deg,#818cf8 0%,#fde047 100%); }

/* ---------- 50. Tropical — coral + teal + yellow, Rubik ---------- */
[data-theme="tropical"] {
  --color-primary:#14b8a6; --color-primary-dark:#0f766e;
  --color-primary-light:#99f6e4; --color-primary-bg:#f0fdfa;
  --color-bg:#ffffff; --color-bg-subtle:#fef9c3; --color-bg-muted:#ccfbf1;
  --color-text:#134e4a; --color-text-muted:#115e59; --color-text-soft:#0f766e;
  --color-border:#ccfbf1; --color-border-strong:#5eead4;
  --font-sans:'Rubik',system-ui,sans-serif; --font-heading:'Rubik',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="tropical"] .hero {
  background: radial-gradient(700px 400px at 15% 10%,#ff6b6b 0%,transparent 50%),radial-gradient(700px 400px at 85% 10%,#14b8a6 0%,transparent 50%),radial-gradient(500px 300px at 50% 80%,#fde047 0%,transparent 60%),var(--color-bg);
  background-blend-mode: screen;
}
[data-theme="tropical"] .btn-primary { background:linear-gradient(135deg,#ff6b6b 0%,#14b8a6 100%); border:none; color:#fff; }
[data-theme="tropical"] .brand-mark { background:linear-gradient(135deg,#ff6b6b 0%,#14b8a6 100%); }

/* ---------- 58. Terminal Green — pure black + neon green, Fira Code ---------- */
[data-theme="terminal-green"] {
  --color-primary:#22c55e; --color-primary-dark:#16a34a;
  --color-primary-light:rgba(34,197,94,0.25); --color-primary-bg:rgba(34,197,94,0.08);
  --color-bg:#000000; --color-bg-subtle:#050505; --color-bg-muted:#0a0a0a;
  --color-text:#22c55e; --color-text-muted:#86efac; --color-text-soft:#4ade80;
  --color-border:#14532d; --color-border-strong:#16a34a;
  --font-sans:'Fira Code',ui-monospace,monospace; --font-heading:'Fira Code',ui-monospace,monospace;
  --font-weight-h1:700; --heading-tracking:0em;
}
[data-theme="terminal-green"] body { background:#000; }
[data-theme="terminal-green"] .site-header { background:rgba(0,0,0,0.9); border-bottom-color:#14532d; }
[data-theme="terminal-green"] .hero { background:transparent; }
[data-theme="terminal-green"] .brand-mark { background:transparent; color:#22c55e; border:1px solid #22c55e; }
[data-theme="terminal-green"] .card,
[data-theme="terminal-green"] .step,
[data-theme="terminal-green"] .compliance,
[data-theme="terminal-green"] .faq details,
[data-theme="terminal-green"] .screenshot,
[data-theme="terminal-green"] .pricing-note {
  background:#050505; border:1px solid #14532d; color:#22c55e;
}
[data-theme="terminal-green"] .btn-primary { background:#22c55e; color:#000; }
[data-theme="terminal-green"] .btn-secondary { background:transparent; color:#22c55e; border-color:#22c55e; }
[data-theme="terminal-green"] .placeholder-frame { background:#0a0a0a; border:1px dashed #16a34a; color:#22c55e; }
[data-theme="terminal-green"] .screenshot-caption { background:#000; border-top-color:#14532d; color:#22c55e; }
[data-theme="terminal-green"] .site-footer { background:#000; border-top-color:#14532d; }
[data-theme="terminal-green"] .card-icon,
[data-theme="terminal-green"] .step-num { background:rgba(34,197,94,0.15); color:#22c55e; border:1px solid #22c55e; }

/* ---------- 59. Blueprint — deep blue + cyan grid, Inconsolata ---------- */
[data-theme="blueprint"] {
  --color-primary:#22d3ee; --color-primary-dark:#06b6d4;
  --color-primary-light:rgba(34,211,238,0.25); --color-primary-bg:rgba(34,211,238,0.08);
  --color-bg:#0c2142; --color-bg-subtle:#102a52; --color-bg-muted:#1a3a6e;
  --color-text:#e0f2fe; --color-text-muted:#bae6fd; --color-text-soft:#7dd3fc;
  --color-border:#1a3a6e; --color-border-strong:#1e40af;
  --font-sans:'Inconsolata',ui-monospace,monospace; --font-heading:'Inconsolata',ui-monospace,monospace;
  --font-weight-h1:700;
}
[data-theme="blueprint"] body {
  background-color:#0c2142;
  background-image:linear-gradient(rgba(34,211,238,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,0.08) 1px,transparent 1px);
  background-size:32px 32px;
}
[data-theme="blueprint"] .site-header { background:rgba(12,33,66,0.85); border-bottom:1px solid #1e40af; }
[data-theme="blueprint"] .hero { background:transparent; }
[data-theme="blueprint"] .brand-mark { background:transparent; color:#22d3ee; border:1px solid #22d3ee; }
[data-theme="blueprint"] .card,
[data-theme="blueprint"] .step,
[data-theme="blueprint"] .compliance,
[data-theme="blueprint"] .faq details,
[data-theme="blueprint"] .screenshot,
[data-theme="blueprint"] .pricing-note {
  background:rgba(16,42,82,0.7); border:1px solid #1e40af;
}
[data-theme="blueprint"] .btn-primary { background:#22d3ee; color:#0c2142; }
[data-theme="blueprint"] .btn-secondary { background:transparent; color:#22d3ee; border-color:#22d3ee; }
[data-theme="blueprint"] .placeholder-frame { background:rgba(12,33,66,0.5); border:1px dashed #22d3ee; color:#bae6fd; }
[data-theme="blueprint"] .screenshot-caption { background:rgba(12,33,66,0.8); border-top-color:#1e40af; color:#bae6fd; }
[data-theme="blueprint"] .site-footer { background:#071a38; border-top-color:#1e40af; }
[data-theme="blueprint"] .card-icon,
[data-theme="blueprint"] .step-num { background:rgba(34,211,238,0.15); color:#22d3ee; border:1px solid #22d3ee; }

/* ---------- 60. Magazine — bold editorial, Abril Fatface + Source Serif 4 ---------- */
[data-theme="magazine"] {
  --color-primary:#000000; --color-primary-dark:#000000;
  --color-primary-light:#e5e5e5; --color-primary-bg:#fafafa;
  --color-bg:#ffffff; --color-bg-subtle:#fafafa; --color-bg-muted:#f4f4f5;
  --color-text:#000000; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#000000; --color-border-strong:#000000;
  --font-sans:'Source Serif 4',Georgia,serif; --font-heading:'Abril Fatface',Georgia,serif;
  --font-weight-h1:400; --heading-tracking:-0.02em;
}
[data-theme="magazine"] h1 { font-size:clamp(2.5rem,7vw,5rem); line-height:1.02; }
[data-theme="magazine"] h2 { font-size:clamp(1.75rem,4vw,2.75rem); }
[data-theme="magazine"] .site-header { border-bottom:2px solid #000; background:#fff; }
[data-theme="magazine"] .eyebrow { letter-spacing:0.2em; color:#000; border-bottom:1px solid #000; padding-bottom:4px; display:inline-block; }
[data-theme="magazine"] .hero { border-bottom:4px double #000; }
[data-theme="magazine"] .brand-mark { background:#000; color:#fff; font-family:'Abril Fatface',serif; }
[data-theme="magazine"] .card,
[data-theme="magazine"] .step,
[data-theme="magazine"] .compliance,
[data-theme="magazine"] .faq details { border:1px solid #000; box-shadow:none; }

/* ---------- 61. Art Deco — gold + black + cream, Alfa Slab One + Lora ---------- */
[data-theme="art-deco"] {
  --color-primary:#ca8a04; --color-primary-dark:#a16207;
  --color-primary-light:#fde68a; --color-primary-bg:#fef3c7;
  --color-bg:#1c1917; --color-bg-subtle:#292524; --color-bg-muted:#44403c;
  --color-text:#fef3c7; --color-text-muted:#fde68a; --color-text-soft:#fbbf24;
  --color-border:#44403c; --color-border-strong:#ca8a04;
  --font-sans:'Lora',Georgia,serif; --font-heading:'Alfa Slab One',Georgia,serif;
  --font-weight-h1:400; --heading-tracking:0em;
}
[data-theme="art-deco"] .site-header { background:rgba(28,25,23,0.92); border-bottom:1px solid #ca8a04; }
[data-theme="art-deco"] .hero { background:linear-gradient(180deg,#1c1917 0%,#292524 100%); }
[data-theme="art-deco"] h1,[data-theme="art-deco"] h2 { color:#ca8a04; }
[data-theme="art-deco"] .brand-mark { background:#ca8a04; color:#1c1917; }
[data-theme="art-deco"] .btn-primary { background:#ca8a04; color:#1c1917; border:2px solid #ca8a04; }
[data-theme="art-deco"] .btn-secondary { background:transparent; color:#ca8a04; border:2px solid #ca8a04; }
[data-theme="art-deco"] .card,
[data-theme="art-deco"] .step,
[data-theme="art-deco"] .compliance,
[data-theme="art-deco"] .faq details,
[data-theme="art-deco"] .screenshot,
[data-theme="art-deco"] .pricing-note { background:#292524; border:1px solid #ca8a04; }
[data-theme="art-deco"] .placeholder-frame { background:#1c1917; border:1px dashed #ca8a04; color:#fde68a; }
[data-theme="art-deco"] .screenshot-caption { background:#1c1917; border-top:1px solid #ca8a04; color:#fde68a; }
[data-theme="art-deco"] .site-footer { background:#0c0a09; border-top:1px solid #ca8a04; }
[data-theme="art-deco"] .card-icon,
[data-theme="art-deco"] .step-num { background:#ca8a04; color:#1c1917; }

/* ---------- 62. Red Ink — white + stark red, Archivo Black + Space Mono ---------- */
[data-theme="red-ink"] {
  --color-primary:#dc2626; --color-primary-dark:#991b1b;
  --color-primary-light:#fecaca; --color-primary-bg:#fef2f2;
  --color-bg:#ffffff; --color-bg-subtle:#fafafa; --color-bg-muted:#f5f5f5;
  --color-text:#0a0a0a; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#000000; --color-border-strong:#000000;
  --font-sans:'Space Mono',ui-monospace,monospace; --font-heading:'Archivo Black',sans-serif;
  --font-weight-h1:400; --heading-transform:uppercase;
}
[data-theme="red-ink"] h1,[data-theme="red-ink"] h2 { color:#dc2626; }
[data-theme="red-ink"] .site-header { border-bottom:3px solid #dc2626; }
[data-theme="red-ink"] .brand-mark { background:#dc2626; color:#fff; }
[data-theme="red-ink"] .btn-primary { background:#dc2626; color:#fff; border:2px solid #0a0a0a; }
[data-theme="red-ink"] .card,
[data-theme="red-ink"] .step,
[data-theme="red-ink"] .compliance,
[data-theme="red-ink"] .faq details { border:2px solid #0a0a0a; box-shadow:4px 4px 0 #dc2626; }

/* ---------- 63. Punk Zine — black + white + hot pink, Bebas Neue ---------- */
[data-theme="punk-zine"] {
  --color-primary:#ec4899; --color-primary-dark:#be185d;
  --color-primary-light:#fbcfe8; --color-primary-bg:#fdf2f8;
  --color-bg:#ffffff; --color-bg-subtle:#fafafa; --color-bg-muted:#000000;
  --color-text:#000000; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#000000; --color-border-strong:#000000;
  --font-sans:'Space Mono',ui-monospace,monospace; --font-heading:'Bebas Neue',sans-serif;
  --font-weight-h1:400; --heading-tracking:0.04em; --heading-transform:uppercase;
}
[data-theme="punk-zine"] h1 { font-size:clamp(2.5rem,7vw,5rem); }
[data-theme="punk-zine"] .site-header { border-bottom:4px solid #000; background:#fff; }
[data-theme="punk-zine"] .brand-mark { background:#000; color:#ec4899; }
[data-theme="punk-zine"] .btn-primary { background:#000; color:#ec4899; border:3px solid #000; }
[data-theme="punk-zine"] .btn-secondary { background:transparent; color:#000; border:3px solid #000; }
[data-theme="punk-zine"] .card,
[data-theme="punk-zine"] .step,
[data-theme="punk-zine"] .compliance,
[data-theme="punk-zine"] .faq details { border:2px solid #000; box-shadow:6px 6px 0 #ec4899; }
[data-theme="punk-zine"] .eyebrow { background:#ec4899; color:#000; padding:3px 8px; }

/* ---------- 64. Cinema Noir — silver on charcoal, Playfair italic ---------- */
[data-theme="cinema-noir"] {
  --color-primary:#d4d4d8; --color-primary-dark:#a1a1aa;
  --color-primary-light:#e4e4e7; --color-primary-bg:#27272a;
  --color-bg:#0a0a0a; --color-bg-subtle:#18181b; --color-bg-muted:#27272a;
  --color-text:#e4e4e7; --color-text-muted:#a1a1aa; --color-text-soft:#71717a;
  --color-border:#27272a; --color-border-strong:#3f3f46;
  --font-sans:'Inter',system-ui,sans-serif; --font-heading:'Playfair Display',Georgia,serif;
  --font-weight-h1:400; --heading-tracking:-0.02em;
}
[data-theme="cinema-noir"] h1,[data-theme="cinema-noir"] h2 { font-style:italic; color:#fafafa; }
[data-theme="cinema-noir"] body { background:#0a0a0a; }
[data-theme="cinema-noir"] .site-header { background:rgba(10,10,10,0.85); border-bottom:1px solid #27272a; }
[data-theme="cinema-noir"] .hero { background:transparent; }
[data-theme="cinema-noir"] .brand-mark { background:#fafafa; color:#0a0a0a; font-family:'Playfair Display',serif; font-style:italic; }
[data-theme="cinema-noir"] .btn-primary { background:#fafafa; color:#0a0a0a; }
[data-theme="cinema-noir"] .btn-secondary { background:transparent; color:#e4e4e7; border-color:#52525b; }
[data-theme="cinema-noir"] .card,
[data-theme="cinema-noir"] .step,
[data-theme="cinema-noir"] .compliance,
[data-theme="cinema-noir"] .faq details,
[data-theme="cinema-noir"] .screenshot,
[data-theme="cinema-noir"] .pricing-note { background:#18181b; border-color:#27272a; }
[data-theme="cinema-noir"] .placeholder-frame { background:#18181b; border:1px dashed #3f3f46; color:#a1a1aa; }
[data-theme="cinema-noir"] .screenshot-caption { background:#0a0a0a; border-top-color:#27272a; color:#a1a1aa; }
[data-theme="cinema-noir"] .site-footer { background:#000; border-top-color:#27272a; }

/* ---------- 65. Pixel Arcade — neon on black, VT323 + Press Start 2P ---------- */
[data-theme="pixel-arcade"] {
  --color-primary:#f472b6; --color-primary-dark:#ec4899;
  --color-primary-light:rgba(244,114,182,0.3); --color-primary-bg:rgba(244,114,182,0.1);
  --color-bg:#0a0a0a; --color-bg-subtle:#18181b; --color-bg-muted:#27272a;
  --color-text:#a3e635; --color-text-muted:#84cc16; --color-text-soft:#65a30d;
  --color-border:#27272a; --color-border-strong:#3f3f46;
  --font-sans:'VT323',ui-monospace,monospace; --font-heading:'Press Start 2P',monospace;
  --font-weight-h1:400;
}
[data-theme="pixel-arcade"] body { font-size:20px; }
[data-theme="pixel-arcade"] h1 { font-size:clamp(1.2rem,3vw,2rem); line-height:1.4; color:#f472b6; }
[data-theme="pixel-arcade"] h2 { font-size:clamp(0.9rem,2vw,1.4rem); line-height:1.4; color:#22d3ee; }
[data-theme="pixel-arcade"] h3 { font-size:0.85rem; }
[data-theme="pixel-arcade"] .btn { font-family:'Press Start 2P',monospace; font-size:0.65rem; padding:18px 24px; }
[data-theme="pixel-arcade"] .site-header { background:rgba(10,10,10,0.9); border-bottom:1px solid #f472b6; }
[data-theme="pixel-arcade"] .brand-mark { background:#f472b6; color:#0a0a0a; font-family:'Press Start 2P',monospace; font-size:0.6rem; }
[data-theme="pixel-arcade"] .btn-primary { background:#f472b6; color:#0a0a0a; border:1px solid #f472b6; }
[data-theme="pixel-arcade"] .btn-secondary { background:transparent; color:#22d3ee; border:1px solid #22d3ee; }
[data-theme="pixel-arcade"] .card,
[data-theme="pixel-arcade"] .step,
[data-theme="pixel-arcade"] .compliance,
[data-theme="pixel-arcade"] .faq details,
[data-theme="pixel-arcade"] .screenshot,
[data-theme="pixel-arcade"] .pricing-note { background:#18181b; border:1px solid #f472b6; }
[data-theme="pixel-arcade"] .placeholder-frame { background:#0a0a0a; border:1px dashed #f472b6; color:#a3e635; }
[data-theme="pixel-arcade"] .screenshot-caption { background:#000; border-top-color:#f472b6; color:#a3e635; }
[data-theme="pixel-arcade"] .site-footer { background:#000; border-top-color:#f472b6; }

/* ---------- 66. Western — wood tones + cream, Ultra + Lora ---------- */
[data-theme="western"] {
  --color-primary:#92400e; --color-primary-dark:#78350f;
  --color-primary-light:#fed7aa; --color-primary-bg:#fff7ed;
  --color-bg:#fdf8f0; --color-bg-subtle:#f5e8cf; --color-bg-muted:#e7d3a8;
  --color-text:#451a03; --color-text-muted:#78350f; --color-text-soft:#9a3412;
  --color-border:#d6cab0; --color-border-strong:#a8926e;
  --font-sans:'Lora',Georgia,serif; --font-heading:'Ultra',Georgia,serif;
  --font-weight-h1:400; --heading-transform:uppercase; --heading-tracking:0.04em;
}
[data-theme="western"] .brand-mark { background:#92400e; color:#fdf8f0; font-family:'Ultra',serif; }
[data-theme="western"] .site-header { border-bottom:3px double #92400e; }
[data-theme="western"] .hero { background:linear-gradient(180deg,#f5e8cf 0%,#fdf8f0 100%); }

/* ---------- 67. Synthwave — navy gradient + neon, Orbitron + JetBrains Mono ---------- */
[data-theme="synthwave"] {
  --color-primary:#ec4899; --color-primary-dark:#db2777;
  --color-primary-light:#f9a8d4; --color-primary-bg:rgba(236,72,153,0.1);
  --color-bg:#1e1b4b; --color-bg-subtle:#312e81; --color-bg-muted:#4c1d95;
  --color-text:#fce7f3; --color-text-muted:#f9a8d4; --color-text-soft:#ec4899;
  --color-border:#4c1d95; --color-border-strong:#7c3aed;
  --font-sans:'JetBrains Mono',ui-monospace,monospace; --font-heading:'Orbitron',sans-serif;
  --font-weight-h1:800; --heading-transform:uppercase; --heading-tracking:0.05em;
}
[data-theme="synthwave"] body {
  background:linear-gradient(180deg,#1e1b4b 0%,#4c1d95 50%,#831843 100%);
}
[data-theme="synthwave"] .site-header { background:rgba(30,27,75,0.85); border-bottom:1px solid #7c3aed; }
[data-theme="synthwave"] .hero { background:transparent; }
[data-theme="synthwave"] h1,[data-theme="synthwave"] h2 {
  background:linear-gradient(135deg,#fce7f3 0%,#22d3ee 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
[data-theme="synthwave"] .brand-mark { background:linear-gradient(135deg,#ec4899 0%,#22d3ee 100%); box-shadow:0 0 20px rgba(236,72,153,0.5); }
[data-theme="synthwave"] .btn-primary { background:linear-gradient(135deg,#ec4899 0%,#7c3aed 100%); border:none; color:#fff; box-shadow:0 0 20px rgba(236,72,153,0.5); }
[data-theme="synthwave"] .btn-secondary { background:transparent; color:#fce7f3; border-color:#7c3aed; }
[data-theme="synthwave"] .card,
[data-theme="synthwave"] .step,
[data-theme="synthwave"] .compliance,
[data-theme="synthwave"] .faq details,
[data-theme="synthwave"] .screenshot,
[data-theme="synthwave"] .pricing-note { background:rgba(49,46,129,0.6); border-color:#7c3aed; backdrop-filter:blur(10px); }
[data-theme="synthwave"] .site-footer { background:#0c0624; border-top-color:#7c3aed; }

/* ---------- 68. Amber Terminal — black + amber CRT, VT323 ---------- */
[data-theme="amber-terminal"] {
  --color-primary:#f59e0b; --color-primary-dark:#d97706;
  --color-primary-light:rgba(245,158,11,0.3); --color-primary-bg:rgba(245,158,11,0.1);
  --color-bg:#0a0a0a; --color-bg-subtle:#0f0f0f; --color-bg-muted:#1a1a1a;
  --color-text:#fbbf24; --color-text-muted:#f59e0b; --color-text-soft:#d97706;
  --color-border:#1a1a1a; --color-border-strong:#78350f;
  --font-sans:'VT323',ui-monospace,monospace; --font-heading:'VT323',ui-monospace,monospace;
  --font-weight-h1:400;
}
[data-theme="amber-terminal"] body { font-size:22px; line-height:1.4; }
[data-theme="amber-terminal"] .site-header { background:rgba(10,10,10,0.9); border-bottom:1px solid #78350f; }
[data-theme="amber-terminal"] .hero { background:transparent; }
[data-theme="amber-terminal"] .brand-mark { background:transparent; color:#fbbf24; border:1px solid #fbbf24; }
[data-theme="amber-terminal"] .btn-primary { background:#fbbf24; color:#000; }
[data-theme="amber-terminal"] .btn-secondary { background:transparent; color:#fbbf24; border-color:#fbbf24; }
[data-theme="amber-terminal"] .card,
[data-theme="amber-terminal"] .step,
[data-theme="amber-terminal"] .compliance,
[data-theme="amber-terminal"] .faq details,
[data-theme="amber-terminal"] .screenshot,
[data-theme="amber-terminal"] .pricing-note { background:#0f0f0f; border:1px solid #78350f; }
[data-theme="amber-terminal"] .placeholder-frame { background:#000; border:1px dashed #78350f; color:#fbbf24; }
[data-theme="amber-terminal"] .screenshot-caption { background:#000; border-top-color:#78350f; color:#fbbf24; }
[data-theme="amber-terminal"] .site-footer { background:#000; border-top-color:#78350f; }

/* ---------- 69. Riso Print — duotone pink + blue, Work Sans ---------- */
[data-theme="riso-print"] {
  --color-primary:#ec4899; --color-primary-dark:#db2777;
  --color-primary-light:#fbcfe8; --color-primary-bg:#fdf2f8;
  --color-bg:#fef9f3; --color-bg-subtle:#fdf2f8; --color-bg-muted:#e0e7ff;
  --color-text:#1e3a8a; --color-text-muted:#3730a3; --color-text-soft:#4338ca;
  --color-border:#fbcfe8; --color-border-strong:#ec4899;
  --font-sans:'Work Sans',system-ui,sans-serif; --font-heading:'Work Sans',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="riso-print"] .hero {
  background:radial-gradient(600px 400px at 20% 20%,rgba(236,72,153,0.25) 0%,transparent 60%),radial-gradient(600px 400px at 80% 20%,rgba(30,64,175,0.15) 0%,transparent 60%);
}
[data-theme="riso-print"] h1,[data-theme="riso-print"] h2 { color:#ec4899; mix-blend-mode:multiply; }
[data-theme="riso-print"] .brand-mark { background:#ec4899; }
[data-theme="riso-print"] .btn-primary { background:#ec4899; color:#fff; border:2px solid #1e3a8a; box-shadow:4px 4px 0 #1e3a8a; }

/* ---------- 70. Handwritten Note — aged paper, Dancing Script + Sacramento ---------- */
[data-theme="handwritten-note"] {
  --color-primary:#78350f; --color-primary-dark:#451a03;
  --color-primary-light:#fde68a; --color-primary-bg:#fffbeb;
  --color-bg:#fdf8ea; --color-bg-subtle:#f5edd1; --color-bg-muted:#e7d9a8;
  --color-text:#451a03; --color-text-muted:#78350f; --color-text-soft:#a16207;
  --color-border:#d6cab0; --color-border-strong:#a8926e;
  --font-sans:'Dancing Script',cursive; --font-heading:'Sacramento',cursive;
  --font-weight-h1:700; --font-weight-h2:700;
}
[data-theme="handwritten-note"] body { font-size:20px; line-height:1.5; }
[data-theme="handwritten-note"] h1 { font-size:clamp(3rem,8vw,5.5rem); font-style:normal; }
[data-theme="handwritten-note"] h2 { font-size:clamp(2rem,5vw,3.5rem); font-family:'Dancing Script',cursive; }
[data-theme="handwritten-note"] .brand-mark { background:#78350f; color:#fdf8ea; font-family:'Sacramento',cursive; font-size:1.25rem; }
[data-theme="handwritten-note"] .card,
[data-theme="handwritten-note"] .step,
[data-theme="handwritten-note"] .compliance,
[data-theme="handwritten-note"] .faq details { background:#fffef8; border:1px solid #d6cab0; box-shadow:2px 3px 0 rgba(168,146,110,0.3); }
[data-theme="handwritten-note"] .btn-primary { background:#78350f; color:#fdf8ea; }

/* ---------- 71. Arcade Cabinet — neon on purple, Monoton + VT323 ---------- */
[data-theme="arcade-cabinet"] {
  --color-primary:#22d3ee; --color-primary-dark:#06b6d4;
  --color-primary-light:rgba(34,211,238,0.3); --color-primary-bg:rgba(34,211,238,0.1);
  --color-bg:#3b0764; --color-bg-subtle:#581c87; --color-bg-muted:#6b21a8;
  --color-text:#fef08a; --color-text-muted:#fde047; --color-text-soft:#facc15;
  --color-border:#6b21a8; --color-border-strong:#a855f7;
  --font-sans:'VT323',ui-monospace,monospace; --font-heading:'Monoton',cursive;
  --font-weight-h1:400; --heading-transform:uppercase; --heading-tracking:0.06em;
}
[data-theme="arcade-cabinet"] body { font-size:22px; line-height:1.4; background:linear-gradient(180deg,#3b0764 0%,#581c87 100%); }
[data-theme="arcade-cabinet"] h1 { font-size:clamp(2.5rem,6vw,4rem); color:#22d3ee; text-shadow:0 0 20px rgba(34,211,238,0.6); }
[data-theme="arcade-cabinet"] h2 { color:#f472b6; }
[data-theme="arcade-cabinet"] .site-header { background:rgba(59,7,100,0.85); border-bottom:1px solid #a855f7; }
[data-theme="arcade-cabinet"] .hero { background:transparent; }
[data-theme="arcade-cabinet"] .brand-mark { background:#22d3ee; color:#3b0764; box-shadow:0 0 16px rgba(34,211,238,0.6); }
[data-theme="arcade-cabinet"] .btn-primary { background:#f472b6; color:#3b0764; border:2px solid #22d3ee; box-shadow:0 0 20px rgba(244,114,182,0.5); }
[data-theme="arcade-cabinet"] .btn-secondary { background:transparent; color:#22d3ee; border:2px solid #22d3ee; }
[data-theme="arcade-cabinet"] .card,
[data-theme="arcade-cabinet"] .step,
[data-theme="arcade-cabinet"] .compliance,
[data-theme="arcade-cabinet"] .faq details,
[data-theme="arcade-cabinet"] .screenshot,
[data-theme="arcade-cabinet"] .pricing-note { background:rgba(88,28,135,0.6); border-color:#a855f7; backdrop-filter:blur(10px); }
[data-theme="arcade-cabinet"] .site-footer { background:#1e0742; border-top-color:#a855f7; }

/* ---------- 72. Newsprint Grit — black + white grit, Bebas Neue + Libre Baskerville ---------- */
[data-theme="newsprint-grit"] {
  --color-primary:#0a0a0a; --color-primary-dark:#000000;
  --color-primary-light:#d4d4d8; --color-primary-bg:#f4f4f5;
  --color-bg:#e7e5e4; --color-bg-subtle:#d6d3d1; --color-bg-muted:#a8a29e;
  --color-text:#0a0a0a; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#0a0a0a; --color-border-strong:#0a0a0a;
  --font-sans:'Libre Baskerville',Georgia,serif; --font-heading:'Bebas Neue',sans-serif;
  --font-weight-h1:400; --heading-tracking:0.02em;
}
[data-theme="newsprint-grit"] body {
  background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,0.15) 1px,transparent 0);
  background-size:4px 4px;
  background-color:#e7e5e4;
}
[data-theme="newsprint-grit"] h1 { font-size:clamp(3rem,8vw,5.5rem); line-height:1; }
[data-theme="newsprint-grit"] .site-header { background:rgba(231,229,228,0.9); border-bottom:3px solid #000; }
[data-theme="newsprint-grit"] .brand-mark { background:#000; color:#e7e5e4; font-family:'Bebas Neue',sans-serif; font-size:1.2rem; }
[data-theme="newsprint-grit"] .card,
[data-theme="newsprint-grit"] .step,
[data-theme="newsprint-grit"] .compliance,
[data-theme="newsprint-grit"] .faq details { background:#fafafa; border:1px solid #0a0a0a; }
[data-theme="newsprint-grit"] .btn-primary { background:#000; color:#e7e5e4; }


/* =========================================================
   Newsprint variants — 10 ways to dial in #72.
   ========================================================= */

/* ---------- 73. Newsprint Classic — whiter paper, lighter grain ---------- */
[data-theme="newsprint-classic"] {
  --color-primary:#0a0a0a; --color-primary-dark:#000000;
  --color-primary-light:#d4d4d8; --color-primary-bg:#f4f4f5;
  --color-bg:#fafaf8; --color-bg-subtle:#f5f5f4; --color-bg-muted:#e7e5e4;
  --color-text:#0a0a0a; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#0a0a0a; --color-border-strong:#0a0a0a;
  --font-sans:'Libre Baskerville',Georgia,serif; --font-heading:'Bebas Neue',sans-serif;
  --font-weight-h1:400; --heading-tracking:0.02em;
}
[data-theme="newsprint-classic"] body {
  background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,0.08) 1px,transparent 0);
  background-size:3px 3px; background-color:#fafaf8;
}
[data-theme="newsprint-classic"] h1 { font-size:clamp(3rem,8vw,5.5rem); line-height:1; }
[data-theme="newsprint-classic"] .site-header { background:rgba(250,250,248,0.9); border-bottom:2px solid #0a0a0a; }
[data-theme="newsprint-classic"] .brand-mark { background:#000; color:#fafaf8; font-family:'Bebas Neue',sans-serif; font-size:1.2rem; }
[data-theme="newsprint-classic"] .card,
[data-theme="newsprint-classic"] .step,
[data-theme="newsprint-classic"] .compliance,
[data-theme="newsprint-classic"] .faq details { background:#ffffff; border:1px solid #0a0a0a; }
[data-theme="newsprint-classic"] .btn-primary { background:#000; color:#fafaf8; }

/* ---------- 74. Newsprint Sepia — aged warm paper ---------- */
[data-theme="newsprint-sepia"] {
  --color-primary:#3a2418; --color-primary-dark:#1c1006;
  --color-primary-light:#e7d9c4; --color-primary-bg:#f5ead5;
  --color-bg:#f4e8d1; --color-bg-subtle:#ecdcb8; --color-bg-muted:#d9c497;
  --color-text:#3a2418; --color-text-muted:#5e3c28; --color-text-soft:#78503a;
  --color-border:#3a2418; --color-border-strong:#3a2418;
  --font-sans:'Libre Baskerville',Georgia,serif; --font-heading:'Bebas Neue',sans-serif;
  --font-weight-h1:400; --heading-tracking:0.02em;
}
[data-theme="newsprint-sepia"] body {
  background-image:radial-gradient(circle at 1px 1px,rgba(58,36,24,0.2) 1px,transparent 0);
  background-size:4px 4px; background-color:#f4e8d1;
}
[data-theme="newsprint-sepia"] h1 { font-size:clamp(3rem,8vw,5.5rem); line-height:1; }
[data-theme="newsprint-sepia"] .site-header { background:rgba(244,232,209,0.9); border-bottom:3px solid #3a2418; }
[data-theme="newsprint-sepia"] .brand-mark { background:#3a2418; color:#f4e8d1; font-family:'Bebas Neue',sans-serif; font-size:1.2rem; }
[data-theme="newsprint-sepia"] .card,
[data-theme="newsprint-sepia"] .step,
[data-theme="newsprint-sepia"] .compliance,
[data-theme="newsprint-sepia"] .faq details { background:#f9eedb; border:1px solid #3a2418; }
[data-theme="newsprint-sepia"] .btn-primary { background:#3a2418; color:#f4e8d1; }

/* ---------- 75. Newsprint Bold — Archivo Black display ---------- */
[data-theme="newsprint-bold"] {
  --color-primary:#0a0a0a; --color-primary-dark:#000000;
  --color-primary-light:#d4d4d8; --color-primary-bg:#f4f4f5;
  --color-bg:#e7e5e4; --color-bg-subtle:#d6d3d1; --color-bg-muted:#a8a29e;
  --color-text:#0a0a0a; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#0a0a0a; --color-border-strong:#0a0a0a;
  --font-sans:'Libre Baskerville',Georgia,serif; --font-heading:'Archivo Black',sans-serif;
  --font-weight-h1:400; --heading-tracking:-0.01em; --heading-transform:uppercase;
}
[data-theme="newsprint-bold"] body {
  background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,0.2) 1px,transparent 0);
  background-size:3px 3px; background-color:#e7e5e4;
}
[data-theme="newsprint-bold"] h1 { font-size:clamp(2.5rem,7vw,4.5rem); line-height:1.02; }
[data-theme="newsprint-bold"] .site-header { background:rgba(231,229,228,0.9); border-bottom:4px solid #0a0a0a; }
[data-theme="newsprint-bold"] .brand-mark { background:#000; color:#e7e5e4; font-family:'Archivo Black',sans-serif; font-size:0.95rem; }
[data-theme="newsprint-bold"] .card,
[data-theme="newsprint-bold"] .step,
[data-theme="newsprint-bold"] .compliance,
[data-theme="newsprint-bold"] .faq details { background:#fafafa; border:2px solid #0a0a0a; }
[data-theme="newsprint-bold"] .btn-primary { background:#000; color:#e7e5e4; border:2px solid #000; }

/* ---------- 76. Newsprint Oswald — cool gray + Oswald condensed ---------- */
[data-theme="newsprint-oswald"] {
  --color-primary:#0a0a0a; --color-primary-dark:#000000;
  --color-primary-light:#d4d4d8; --color-primary-bg:#f4f4f5;
  --color-bg:#f5f5f4; --color-bg-subtle:#e7e5e4; --color-bg-muted:#d6d3d1;
  --color-text:#0a0a0a; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#0a0a0a; --color-border-strong:#0a0a0a;
  --font-sans:'PT Serif',Georgia,serif; --font-heading:'Oswald',sans-serif;
  --font-weight-h1:700; --heading-tracking:0.02em; --heading-transform:uppercase;
}
[data-theme="newsprint-oswald"] body {
  background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,0.12) 1px,transparent 0);
  background-size:4px 4px; background-color:#f5f5f4;
}
[data-theme="newsprint-oswald"] h1 { font-size:clamp(2.75rem,7vw,5rem); line-height:1.02; }
[data-theme="newsprint-oswald"] .site-header { background:rgba(245,245,244,0.9); border-bottom:2px solid #0a0a0a; }
[data-theme="newsprint-oswald"] .brand-mark { background:#000; color:#f5f5f4; font-family:'Oswald',sans-serif; }
[data-theme="newsprint-oswald"] .card,
[data-theme="newsprint-oswald"] .step,
[data-theme="newsprint-oswald"] .compliance,
[data-theme="newsprint-oswald"] .faq details { background:#ffffff; border:1px solid #0a0a0a; }
[data-theme="newsprint-oswald"] .btn-primary { background:#000; color:#f5f5f4; }

/* ---------- 77. Newsprint Red Ink — red accent on black ---------- */
[data-theme="newsprint-red"] {
  --color-primary:#991b1b; --color-primary-dark:#7f1d1d;
  --color-primary-light:#fecaca; --color-primary-bg:#fef2f2;
  --color-bg:#f5f5f4; --color-bg-subtle:#e7e5e4; --color-bg-muted:#d6d3d1;
  --color-text:#0a0a0a; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#0a0a0a; --color-border-strong:#0a0a0a;
  --font-sans:'Libre Baskerville',Georgia,serif; --font-heading:'Bebas Neue',sans-serif;
  --font-weight-h1:400; --heading-tracking:0.02em;
}
[data-theme="newsprint-red"] body {
  background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,0.15) 1px,transparent 0);
  background-size:4px 4px; background-color:#f5f5f4;
}
[data-theme="newsprint-red"] h1 { font-size:clamp(3rem,8vw,5.5rem); line-height:1; color:#991b1b; }
[data-theme="newsprint-red"] h2 { color:#991b1b; }
[data-theme="newsprint-red"] .site-header { background:rgba(245,245,244,0.9); border-bottom:3px solid #991b1b; }
[data-theme="newsprint-red"] .brand-mark { background:#991b1b; color:#f5f5f4; font-family:'Bebas Neue',sans-serif; font-size:1.2rem; }
[data-theme="newsprint-red"] .card,
[data-theme="newsprint-red"] .step,
[data-theme="newsprint-red"] .compliance,
[data-theme="newsprint-red"] .faq details { background:#ffffff; border:1px solid #0a0a0a; }
[data-theme="newsprint-red"] .btn-primary { background:#991b1b; color:#f5f5f4; border:2px solid #0a0a0a; }

/* ---------- 78. Newsprint Dark — night edition, dark paper ---------- */
[data-theme="newsprint-dark"] {
  --color-primary:#e7e5e4; --color-primary-dark:#d6d3d1;
  --color-primary-light:#44403c; --color-primary-bg:#292524;
  --color-bg:#1c1917; --color-bg-subtle:#292524; --color-bg-muted:#44403c;
  --color-text:#e7e5e4; --color-text-muted:#a8a29e; --color-text-soft:#78716c;
  --color-border:#44403c; --color-border-strong:#e7e5e4;
  --font-sans:'Libre Baskerville',Georgia,serif; --font-heading:'Bebas Neue',sans-serif;
  --font-weight-h1:400; --heading-tracking:0.02em;
}
[data-theme="newsprint-dark"] body {
  background-image:radial-gradient(circle at 1px 1px,rgba(231,229,228,0.1) 1px,transparent 0);
  background-size:4px 4px; background-color:#1c1917;
}
[data-theme="newsprint-dark"] h1 { font-size:clamp(3rem,8vw,5.5rem); line-height:1; }
[data-theme="newsprint-dark"] .site-header { background:rgba(28,25,23,0.9); border-bottom:3px solid #e7e5e4; }
[data-theme="newsprint-dark"] .hero { background:transparent; }
[data-theme="newsprint-dark"] .brand-mark { background:#e7e5e4; color:#1c1917; font-family:'Bebas Neue',sans-serif; font-size:1.2rem; }
[data-theme="newsprint-dark"] .card,
[data-theme="newsprint-dark"] .step,
[data-theme="newsprint-dark"] .compliance,
[data-theme="newsprint-dark"] .faq details,
[data-theme="newsprint-dark"] .screenshot,
[data-theme="newsprint-dark"] .pricing-note { background:#292524; border:1px solid #e7e5e4; }
[data-theme="newsprint-dark"] .btn-primary { background:#e7e5e4; color:#1c1917; }
[data-theme="newsprint-dark"] .btn-secondary { background:transparent; color:#e7e5e4; border-color:#e7e5e4; }
[data-theme="newsprint-dark"] .placeholder-frame { background:#1c1917; border:1px dashed #e7e5e4; color:#a8a29e; }
[data-theme="newsprint-dark"] .screenshot-caption { background:#1c1917; border-top-color:#e7e5e4; color:#e7e5e4; }
[data-theme="newsprint-dark"] .site-footer { background:#0c0a09; border-top-color:#e7e5e4; }

/* ---------- 79. Newsprint Playfair — editorial elegance, heavy serif ---------- */
[data-theme="newsprint-playfair"] {
  --color-primary:#0a0a0a; --color-primary-dark:#000000;
  --color-primary-light:#d4d4d8; --color-primary-bg:#f4f4f5;
  --color-bg:#fafaf8; --color-bg-subtle:#f5f5f4; --color-bg-muted:#e7e5e4;
  --color-text:#0a0a0a; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#0a0a0a; --color-border-strong:#0a0a0a;
  --font-sans:'PT Serif',Georgia,serif; --font-heading:'Playfair Display',Georgia,serif;
  --font-weight-h1:900; --heading-tracking:-0.03em;
}
[data-theme="newsprint-playfair"] body {
  background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,0.08) 1px,transparent 0);
  background-size:3px 3px; background-color:#fafaf8;
}
[data-theme="newsprint-playfair"] h1 { font-size:clamp(3rem,8vw,5.5rem); line-height:1.02; }
[data-theme="newsprint-playfair"] .site-header { background:rgba(250,250,248,0.9); border-bottom:1px solid #0a0a0a; }
[data-theme="newsprint-playfair"] .brand-mark { background:#000; color:#fafaf8; font-family:'Playfair Display',serif; font-weight:900; }
[data-theme="newsprint-playfair"] .card,
[data-theme="newsprint-playfair"] .step,
[data-theme="newsprint-playfair"] .compliance,
[data-theme="newsprint-playfair"] .faq details { background:#ffffff; border:1px solid #0a0a0a; }
[data-theme="newsprint-playfair"] .btn-primary { background:#000; color:#fafaf8; }

/* ---------- 80. Newsprint Anton — tall condensed display ---------- */
[data-theme="newsprint-anton"] {
  --color-primary:#0a0a0a; --color-primary-dark:#000000;
  --color-primary-light:#d4d4d8; --color-primary-bg:#f4f4f5;
  --color-bg:#e7e5e4; --color-bg-subtle:#d6d3d1; --color-bg-muted:#a8a29e;
  --color-text:#0a0a0a; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#0a0a0a; --color-border-strong:#0a0a0a;
  --font-sans:'Merriweather',Georgia,serif; --font-heading:'Anton',sans-serif;
  --font-weight-h1:400; --heading-tracking:0em; --heading-transform:uppercase;
}
[data-theme="newsprint-anton"] body {
  background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,0.2) 1px,transparent 0);
  background-size:3px 3px; background-color:#e7e5e4;
}
[data-theme="newsprint-anton"] h1 { font-size:clamp(3rem,9vw,6rem); line-height:0.98; }
[data-theme="newsprint-anton"] .site-header { background:rgba(231,229,228,0.9); border-bottom:3px solid #0a0a0a; }
[data-theme="newsprint-anton"] .brand-mark { background:#000; color:#e7e5e4; font-family:'Anton',sans-serif; }
[data-theme="newsprint-anton"] .card,
[data-theme="newsprint-anton"] .step,
[data-theme="newsprint-anton"] .compliance,
[data-theme="newsprint-anton"] .faq details { background:#fafafa; border:1px solid #0a0a0a; }
[data-theme="newsprint-anton"] .btn-primary { background:#000; color:#e7e5e4; }

/* ---------- 81. Newsprint Pulp — yellow pulp + blue ink ---------- */
[data-theme="newsprint-pulp"] {
  --color-primary:#1e3a8a; --color-primary-dark:#172554;
  --color-primary-light:#bfdbfe; --color-primary-bg:#eff6ff;
  --color-bg:#fef9c3; --color-bg-subtle:#fef08a; --color-bg-muted:#facc15;
  --color-text:#1e3a8a; --color-text-muted:#1e40af; --color-text-soft:#3b82f6;
  --color-border:#1e3a8a; --color-border-strong:#1e3a8a;
  --font-sans:'Libre Baskerville',Georgia,serif; --font-heading:'Bebas Neue',sans-serif;
  --font-weight-h1:400; --heading-tracking:0.02em;
}
[data-theme="newsprint-pulp"] body {
  background-image:radial-gradient(circle at 1px 1px,rgba(30,58,138,0.18) 1px,transparent 0);
  background-size:4px 4px; background-color:#fef9c3;
}
[data-theme="newsprint-pulp"] h1 { font-size:clamp(3rem,8vw,5.5rem); line-height:1; }
[data-theme="newsprint-pulp"] .site-header { background:rgba(254,249,195,0.9); border-bottom:3px solid #1e3a8a; }
[data-theme="newsprint-pulp"] .brand-mark { background:#1e3a8a; color:#fef9c3; font-family:'Bebas Neue',sans-serif; font-size:1.2rem; }
[data-theme="newsprint-pulp"] .card,
[data-theme="newsprint-pulp"] .step,
[data-theme="newsprint-pulp"] .compliance,
[data-theme="newsprint-pulp"] .faq details { background:#fefce8; border:1px solid #1e3a8a; }
[data-theme="newsprint-pulp"] .btn-primary { background:#1e3a8a; color:#fef9c3; }

/* ---------- 82. Newsprint Gazette — clean Alfa Slab One, no grain ---------- */
[data-theme="newsprint-gazette"] {
  --color-primary:#0a0a0a; --color-primary-dark:#000000;
  --color-primary-light:#d4d4d8; --color-primary-bg:#f4f4f5;
  --color-bg:#ffffff; --color-bg-subtle:#fafafa; --color-bg-muted:#f5f5f4;
  --color-text:#0a0a0a; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#d4d4d8; --color-border-strong:#a1a1aa;
  --font-sans:'Libre Baskerville',Georgia,serif; --font-heading:'Alfa Slab One',Georgia,serif;
  --font-weight-h1:400; --heading-tracking:-0.01em;
}
[data-theme="newsprint-gazette"] h1 { font-size:clamp(2.5rem,6vw,4.5rem); line-height:1.05; }
[data-theme="newsprint-gazette"] .site-header { background:rgba(255,255,255,0.95); border-bottom:1px solid #d4d4d8; }
[data-theme="newsprint-gazette"] .brand-mark { background:#000; color:#fff; font-family:'Alfa Slab One',serif; font-size:0.85rem; }
[data-theme="newsprint-gazette"] .card,
[data-theme="newsprint-gazette"] .step,
[data-theme="newsprint-gazette"] .compliance,
[data-theme="newsprint-gazette"] .faq details { background:#fff; border:1px solid #d4d4d8; }
[data-theme="newsprint-gazette"] .btn-primary { background:#000; color:#fff; }


/* =========================================================
   Newsprint — 25 more variants (np-* prefix).
   Shared baseline inherits Newsprint Grit styling; each
   variant below overrides a single axis (font, color, grain,
   border, or paper tone) so you can dial in your final look.
   ========================================================= */

[data-theme^="np-"] {
  --color-primary:#0a0a0a; --color-primary-dark:#000000;
  --color-primary-light:#d4d4d8; --color-primary-bg:#f4f4f5;
  --color-bg:#e7e5e4; --color-bg-subtle:#d6d3d1; --color-bg-muted:#a8a29e;
  --color-text:#0a0a0a; --color-text-muted:#27272a; --color-text-soft:#52525b;
  --color-border:#0a0a0a; --color-border-strong:#0a0a0a;
  --font-sans:'Libre Baskerville',Georgia,serif; --font-heading:'Bebas Neue',sans-serif;
  --font-weight-h1:400; --heading-tracking:0.02em;
}
[data-theme^="np-"] body {
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.15) 1px, transparent 0);
  background-size: 4px 4px;
  background-color: var(--color-bg);
}
[data-theme^="np-"] h1 { font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1; }
[data-theme^="np-"] .site-header {
  background: var(--color-bg);
  border-bottom: 3px solid var(--color-border);
}
[data-theme^="np-"] .hero { background: transparent; }
[data-theme^="np-"] .brand-mark {
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-size: 1.2rem;
}
[data-theme^="np-"] .card,
[data-theme^="np-"] .step,
[data-theme^="np-"] .compliance,
[data-theme^="np-"] .faq details,
[data-theme^="np-"] .screenshot,
[data-theme^="np-"] .pricing-note {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
}
[data-theme^="np-"] .btn-primary { background: var(--color-primary); color: var(--color-bg); }
[data-theme^="np-"] .btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); }
[data-theme^="np-"] .placeholder-frame {
  background: var(--color-bg-muted);
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
}
[data-theme^="np-"] .screenshot-caption {
  background: var(--color-bg);
  border-top-color: var(--color-border);
  color: var(--color-text);
}
[data-theme^="np-"] .site-footer {
  background: var(--color-bg-subtle);
  border-top: 3px solid var(--color-border);
}

/* 83. Lora body */
[data-theme="np-lora"] { --font-sans: 'Lora', Georgia, serif; }

/* 84. Crimson Text body */
[data-theme="np-crimson"] { --font-sans: 'Crimson Text', Georgia, serif; }

/* 85. EB Garamond + Playfair heading */
[data-theme="np-garamond"] {
  --font-sans: 'EB Garamond', Georgia, serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-weight-h1: 900; --heading-tracking: -0.02em;
}

/* 86. Merriweather body + Playfair heading */
[data-theme="np-merri"] {
  --font-sans: 'Merriweather', Georgia, serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-weight-h1: 900; --heading-tracking: -0.02em;
}

/* 87. Spectral body */
[data-theme="np-spectral"] { --font-sans: 'Spectral', Georgia, serif; }

/* 88. Fraunces throughout */
[data-theme="np-fraunces"] {
  --font-sans: 'Fraunces', Georgia, serif;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-weight-h1: 800; --heading-tracking: -0.02em;
}

/* 89. Abril Fatface display + Lora body */
[data-theme="np-abril"] {
  --font-sans: 'Lora', Georgia, serif;
  --font-heading: 'Abril Fatface', Georgia, serif;
  --heading-tracking: -0.02em;
}

/* 90. Ultra display + PT Serif body */
[data-theme="np-ultra"] {
  --font-sans: 'PT Serif', Georgia, serif;
  --font-heading: 'Ultra', Georgia, serif;
  --heading-transform: uppercase; --heading-tracking: 0.04em;
}

/* 91. Horizontal line grain */
[data-theme="np-lines"] body {
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 5px);
  background-size: auto;
}

/* 92. Crosshatch grain */
[data-theme="np-crosshatch"] body {
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.07) 0, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.07) 0, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 6px);
  background-size: auto;
}

/* 93. Clean — no grain */
[data-theme="np-clean"] body { background-image: none; }

/* 94. Dense grain */
[data-theme="np-dense"] body {
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.3) 1px, transparent 0);
  background-size: 3px 3px;
}

/* 95. Tabloid — giant red masthead */
[data-theme="np-tabloid"] {
  --color-primary: #dc2626; --color-primary-dark: #991b1b;
  --font-heading: 'Anton', sans-serif;
  --heading-transform: uppercase; --heading-tracking: 0em;
}
[data-theme="np-tabloid"] h1 { font-size: clamp(3.5rem, 10vw, 7rem); line-height: 0.95; color: #dc2626; }
[data-theme="np-tabloid"] h2 { color: #dc2626; }
[data-theme="np-tabloid"] .brand-mark { background: #dc2626; color: var(--color-bg); font-size: 1.3rem; }
[data-theme="np-tabloid"] .btn-primary { background: #dc2626; color: #fff; }
[data-theme="np-tabloid"] .site-header { border-bottom: 4px solid #dc2626; }

/* 96. Green ink */
[data-theme="np-green"] {
  --color-primary: #14532d;
  --color-border: #14532d; --color-border-strong: #14532d;
}
[data-theme="np-green"] h1, [data-theme="np-green"] h2 { color: #14532d; }

/* 97. Indigo ink */
[data-theme="np-indigo"] {
  --color-primary: #1e3a8a;
  --color-border: #1e3a8a; --color-border-strong: #1e3a8a;
}
[data-theme="np-indigo"] h1, [data-theme="np-indigo"] h2 { color: #1e3a8a; }

/* 98. Olive ink */
[data-theme="np-olive"] {
  --color-primary: #3f6212;
  --color-border: #3f6212; --color-border-strong: #3f6212;
}
[data-theme="np-olive"] h1, [data-theme="np-olive"] h2 { color: #3f6212; }

/* 99. Mustard — yellow paper + brown ink */
[data-theme="np-mustard"] {
  --color-primary: #78350f; --color-primary-dark: #451a03;
  --color-bg: #fef3c7; --color-bg-subtle: #fde68a; --color-bg-muted: #fcd34d;
  --color-text: #451a03; --color-text-muted: #78350f; --color-text-soft: #92400e;
  --color-border: #78350f; --color-border-strong: #78350f;
}
[data-theme="np-mustard"] body {
  background-image: radial-gradient(circle at 1px 1px, rgba(120,53,15,0.22) 1px, transparent 0);
}

/* 100. Kraft — tan paper */
[data-theme="np-kraft"] {
  --color-primary: #3f2417; --color-primary-dark: #1c1006;
  --color-bg: #d6b888; --color-bg-subtle: #c4a26a; --color-bg-muted: #a8926e;
  --color-text: #3f2417; --color-text-muted: #5e3c28; --color-text-soft: #78503a;
  --color-border: #3f2417; --color-border-strong: #3f2417;
}
[data-theme="np-kraft"] body {
  background-image: radial-gradient(circle at 1px 1px, rgba(63,36,23,0.25) 1px, transparent 0);
}

/* 101. Graphite — dark charcoal paper */
[data-theme="np-graphite"] {
  --color-primary: #e7e5e4; --color-primary-dark: #d4d4d8;
  --color-bg: #27272a; --color-bg-subtle: #3f3f46; --color-bg-muted: #52525b;
  --color-text: #e7e5e4; --color-text-muted: #a1a1aa; --color-text-soft: #71717a;
  --color-border: #a1a1aa; --color-border-strong: #e7e5e4;
}
[data-theme="np-graphite"] body {
  background-image: radial-gradient(circle at 1px 1px, rgba(231,229,228,0.15) 1px, transparent 0);
}
[data-theme="np-graphite"] .site-footer { background: #18181b; }

/* 102. Ice — cool blue paper */
[data-theme="np-ice"] {
  --color-primary: #0c4a6e; --color-primary-dark: #082f49;
  --color-bg: #e0f2fe; --color-bg-subtle: #bae6fd; --color-bg-muted: #7dd3fc;
  --color-text: #0c4a6e; --color-text-muted: #075985; --color-text-soft: #0369a1;
  --color-border: #0c4a6e; --color-border-strong: #0c4a6e;
}
[data-theme="np-ice"] body {
  background-image: radial-gradient(circle at 1px 1px, rgba(12,74,110,0.2) 1px, transparent 0);
}

/* 103. Typewriter — Space Mono body */
[data-theme="np-typewriter"] { --font-sans: 'Space Mono', ui-monospace, monospace; }

/* 104. Double borders */
[data-theme="np-double"] .site-header { border-bottom: 6px double #0a0a0a; }
[data-theme="np-double"] .hero { border-bottom: 6px double #0a0a0a; }
[data-theme="np-double"] .card,
[data-theme="np-double"] .step,
[data-theme="np-double"] .compliance,
[data-theme="np-double"] .faq details { border: 3px double #0a0a0a; }
[data-theme="np-double"] .site-footer { border-top: 6px double #0a0a0a; }

/* 105. Alfa Slab One display + Merriweather body */
[data-theme="np-slab"] {
  --font-sans: 'Merriweather', Georgia, serif;
  --font-heading: 'Alfa Slab One', Georgia, serif;
  --heading-tracking: -0.01em;
}

/* 106. Faded — muted grayscale */
[data-theme="np-faded"] {
  --color-primary: #52525b;
  --color-bg: #f5f5f4; --color-bg-subtle: #fafafa;
  --color-text: #52525b; --color-text-muted: #71717a; --color-text-soft: #a1a1aa;
  --color-border: #a1a1aa; --color-border-strong: #71717a;
}
[data-theme="np-faded"] body {
  background-image: radial-gradient(circle at 1px 1px, rgba(82,82,91,0.1) 1px, transparent 0);
}

/* 107. Broadsheet — Archivo Black + PT Serif */
[data-theme="np-broadsheet"] {
  --font-sans: 'PT Serif', Georgia, serif;
  --font-heading: 'Archivo Black', sans-serif;
  --heading-transform: uppercase; --heading-tracking: -0.01em;
}


/* =========================================================
   Grain removal — strip dot-pattern backgrounds from every
   Newsprint variant. Line-grain (#91) and crosshatch (#92)
   stay, since those are explicit alternative patterns.
   ========================================================= */
[data-theme="newsprint-grit"] body,
[data-theme="newsprint-classic"] body,
[data-theme="newsprint-sepia"] body,
[data-theme="newsprint-bold"] body,
[data-theme="newsprint-oswald"] body,
[data-theme="newsprint-red"] body,
[data-theme="newsprint-dark"] body,
[data-theme="newsprint-playfair"] body,
[data-theme="newsprint-anton"] body,
[data-theme="newsprint-pulp"] body,
[data-theme^="np-"]:not([data-theme="np-lines"]):not([data-theme="np-crosshatch"]) body {
  background-image: none;
}


/* =========================================================
   Color refresh — give each Newsprint variant a distinct
   paper / ink palette so fonts aren't the only difference.
   ========================================================= */

/* ---- Originals (73–82): patch the ones that read as plain gray ---- */

/* 75. Bold → stark pure white */
[data-theme="newsprint-bold"] { --color-bg: #ffffff; --color-bg-subtle: #f8f8f8; }
[data-theme="newsprint-bold"] .site-header { background: rgba(255,255,255,0.92); }
[data-theme="newsprint-bold"] .brand-mark { background: #000; color: #ffffff; }
[data-theme="newsprint-bold"] .btn-primary { background: #000; color: #ffffff; }
[data-theme="newsprint-bold"] .card,
[data-theme="newsprint-bold"] .step,
[data-theme="newsprint-bold"] .compliance,
[data-theme="newsprint-bold"] .faq details { background: #fafafa; border: 2px solid #0a0a0a; }

/* 76. Oswald → royal blue ink */
[data-theme="newsprint-oswald"] {
  --color-primary: #1e40af; --color-border: #1e40af; --color-border-strong: #1e40af;
}
[data-theme="newsprint-oswald"] h1,
[data-theme="newsprint-oswald"] h2 { color: #1e40af; }
[data-theme="newsprint-oswald"] .site-header { border-bottom: 2px solid #1e40af; }
[data-theme="newsprint-oswald"] .brand-mark { background: #1e40af; color: #f5f5f4; }
[data-theme="newsprint-oswald"] .btn-primary { background: #1e40af; color: #f5f5f4; }
[data-theme="newsprint-oswald"] .card,
[data-theme="newsprint-oswald"] .step,
[data-theme="newsprint-oswald"] .compliance,
[data-theme="newsprint-oswald"] .faq details { border: 1px solid #1e40af; }

/* 79. Playfair → ivory cream + warm charcoal */
[data-theme="newsprint-playfair"] {
  --color-bg: #fdfaf2; --color-bg-subtle: #f9f4e4;
  --color-text: #1c1917; --color-primary: #1c1917; --color-border: #1c1917;
}
[data-theme="newsprint-playfair"] .site-header { background: rgba(253,250,242,0.92); border-bottom: 1px solid #1c1917; }
[data-theme="newsprint-playfair"] .brand-mark { background: #1c1917; color: #fdfaf2; }
[data-theme="newsprint-playfair"] .btn-primary { background: #1c1917; color: #fdfaf2; }
[data-theme="newsprint-playfair"] .card,
[data-theme="newsprint-playfair"] .step,
[data-theme="newsprint-playfair"] .compliance,
[data-theme="newsprint-playfair"] .faq details { background: #fffdf6; border: 1px solid #1c1917; }

/* 80. Anton → warm taupe paper */
[data-theme="newsprint-anton"] { --color-bg: #ede4d2; --color-bg-subtle: #e2d6bd; }
[data-theme="newsprint-anton"] .site-header { background: rgba(237,228,210,0.92); }
[data-theme="newsprint-anton"] .brand-mark { background: #0a0a0a; color: #ede4d2; }
[data-theme="newsprint-anton"] .btn-primary { background: #0a0a0a; color: #ede4d2; }
[data-theme="newsprint-anton"] .card,
[data-theme="newsprint-anton"] .step,
[data-theme="newsprint-anton"] .compliance,
[data-theme="newsprint-anton"] .faq details { background: #f5ece0; border: 1px solid #0a0a0a; }

/* ---- np-* variants: give each a distinct paper/ink ---- */

/* 83. Lora → oatmeal + warm brown */
[data-theme="np-lora"] {
  --color-primary: #4a2c14; --color-primary-dark: #2d1a0a;
  --color-bg: #f2ece0; --color-bg-subtle: #e8dcc4; --color-bg-muted: #d9c897;
  --color-text: #3f2417; --color-text-muted: #5e3c28; --color-text-soft: #78503a;
  --color-border: #4a2c14; --color-border-strong: #4a2c14;
}

/* 84. Crimson → ivory + deep red ink */
[data-theme="np-crimson"] {
  --color-primary: #7f1d1d; --color-primary-dark: #450a0a;
  --color-bg: #fdf8eb; --color-bg-subtle: #faf0d0; --color-bg-muted: #f0e1a0;
  --color-text: #450a0a; --color-text-muted: #7f1d1d; --color-text-soft: #991b1b;
  --color-border: #7f1d1d; --color-border-strong: #7f1d1d;
}
[data-theme="np-crimson"] h1, [data-theme="np-crimson"] h2 { color: #7f1d1d; }

/* 85. EB Garamond → parchment + forest green */
[data-theme="np-garamond"] {
  --color-primary: #14532d; --color-primary-dark: #052e16;
  --color-bg: #fffbea; --color-bg-subtle: #fef3c7; --color-bg-muted: #fde68a;
  --color-text: #052e16; --color-text-muted: #14532d; --color-text-soft: #166534;
  --color-border: #14532d; --color-border-strong: #14532d;
}
[data-theme="np-garamond"] h1, [data-theme="np-garamond"] h2 { color: #14532d; }

/* 86. Merriweather → off-white + navy */
[data-theme="np-merri"] {
  --color-primary: #1e3a8a; --color-primary-dark: #172554;
  --color-bg: #fafafa; --color-bg-subtle: #f5f5f4; --color-bg-muted: #e7e5e4;
  --color-text: #172554; --color-text-muted: #1e3a8a; --color-text-soft: #1d4ed8;
  --color-border: #1e3a8a; --color-border-strong: #1e3a8a;
}
[data-theme="np-merri"] h1, [data-theme="np-merri"] h2 { color: #1e3a8a; }

/* 87. Spectral → lilac mist + plum */
[data-theme="np-spectral"] {
  --color-primary: #581c87; --color-primary-dark: #3b0764;
  --color-bg: #f4f1f7; --color-bg-subtle: #ede4f3; --color-bg-muted: #d8b4fe;
  --color-text: #3b0764; --color-text-muted: #581c87; --color-text-soft: #7e22ce;
  --color-border: #581c87; --color-border-strong: #581c87;
}
[data-theme="np-spectral"] h1, [data-theme="np-spectral"] h2 { color: #581c87; }

/* 88. Fraunces → warm beige + charcoal */
[data-theme="np-fraunces"] {
  --color-bg: #f5f0e1; --color-bg-subtle: #ebe1c7; --color-bg-muted: #d4c596;
  --color-text: #1c1917; --color-text-muted: #44403c; --color-text-soft: #57534e;
  --color-primary: #1c1917; --color-primary-dark: #000000;
  --color-border: #1c1917; --color-border-strong: #1c1917;
}

/* 89. Abril Fatface → blush pink + hot pink */
[data-theme="np-abril"] {
  --color-primary: #be185d; --color-primary-dark: #831843;
  --color-bg: #fdf2f8; --color-bg-subtle: #fce7f3; --color-bg-muted: #fbcfe8;
  --color-text: #500724; --color-text-muted: #831843; --color-text-soft: #be185d;
  --color-border: #be185d; --color-border-strong: #be185d;
}
[data-theme="np-abril"] h1, [data-theme="np-abril"] h2 { color: #be185d; }

/* 90. Ultra → dark forest paper + cream */
[data-theme="np-ultra"] {
  --color-primary: #fef3c7; --color-primary-dark: #fde68a;
  --color-bg: #14532d; --color-bg-subtle: #166534; --color-bg-muted: #065f46;
  --color-text: #fef3c7; --color-text-muted: #fde68a; --color-text-soft: #fbbf24;
  --color-border: #fef3c7; --color-border-strong: #fef3c7;
}
[data-theme="np-ultra"] .site-footer { background: #052e16; }

/* 93. Clean → concrete gray slab */
[data-theme="np-clean"] {
  --color-bg: #d4d4d8; --color-bg-subtle: #e4e4e7; --color-bg-muted: #a1a1aa;
}

/* 94. Dense → midnight blue + gold */
[data-theme="np-dense"] {
  --color-primary: #fbbf24; --color-primary-dark: #f59e0b;
  --color-bg: #172554; --color-bg-subtle: #1e3a8a; --color-bg-muted: #1e40af;
  --color-text: #fef3c7; --color-text-muted: #fde68a; --color-text-soft: #fbbf24;
  --color-border: #fbbf24; --color-border-strong: #fbbf24;
}
[data-theme="np-dense"] h1, [data-theme="np-dense"] h2 { color: #fbbf24; }
[data-theme="np-dense"] .site-footer { background: #0c1642; }

/* 96. Green Ink → sage paper + dark green */
[data-theme="np-green"] {
  --color-bg: #d4e4c4; --color-bg-subtle: #bbdba1; --color-bg-muted: #a3c97e;
  --color-text: #14532d; --color-text-muted: #166534; --color-text-soft: #15803d;
}

/* 97. Indigo Ink → navy paper + gold ink */
[data-theme="np-indigo"] {
  --color-primary: #f59e0b; --color-primary-dark: #d97706;
  --color-bg: #1e3a8a; --color-bg-subtle: #1e40af; --color-bg-muted: #3730a3;
  --color-text: #fef3c7; --color-text-muted: #fde68a; --color-text-soft: #fbbf24;
  --color-border: #f59e0b; --color-border-strong: #f59e0b;
}
[data-theme="np-indigo"] h1, [data-theme="np-indigo"] h2 { color: #f59e0b; }
[data-theme="np-indigo"] .site-footer { background: #172554; }

/* 98. Olive Ink → cream paper + olive */
[data-theme="np-olive"] {
  --color-bg: #f5f0e1; --color-bg-subtle: #ebe1c7; --color-bg-muted: #d4c596;
}

/* 103. Typewriter → manila envelope */
[data-theme="np-typewriter"] {
  --color-bg: #f5e8c5; --color-bg-subtle: #edda9f; --color-bg-muted: #dcc678;
}

/* 104. Double Border → burgundy + cream */
[data-theme="np-double"] {
  --color-primary: #fef3c7; --color-primary-dark: #fde68a;
  --color-bg: #4c0519; --color-bg-subtle: #7f1d1d; --color-bg-muted: #991b1b;
  --color-text: #fef3c7; --color-text-muted: #fde68a; --color-text-soft: #fcd34d;
  --color-border: #fef3c7; --color-border-strong: #fef3c7;
}
[data-theme="np-double"] .site-header { border-bottom: 6px double #fef3c7; }
[data-theme="np-double"] .hero { border-bottom: 6px double #fef3c7; }
[data-theme="np-double"] .card,
[data-theme="np-double"] .step,
[data-theme="np-double"] .compliance,
[data-theme="np-double"] .faq details { border: 3px double #fef3c7; }
[data-theme="np-double"] .site-footer { border-top: 6px double #fef3c7; background: #2d0309; }

/* 105. Slab → deep forest + cream + Alfa Slab */
[data-theme="np-slab"] {
  --color-primary: #fef3c7; --color-primary-dark: #fde68a;
  --color-bg: #14532d; --color-bg-subtle: #166534; --color-bg-muted: #065f46;
  --color-text: #fef3c7; --color-text-muted: #fde68a; --color-text-soft: #fbbf24;
  --color-border: #fef3c7; --color-border-strong: #fef3c7;
}
[data-theme="np-slab"] .site-footer { background: #052e16; }

/* 107. Broadsheet → reverse newsprint, pure black + pure white */
[data-theme="np-broadsheet"] {
  --color-primary: #ffffff; --color-primary-dark: #e4e4e7;
  --color-bg: #000000; --color-bg-subtle: #0a0a0a; --color-bg-muted: #18181b;
  --color-text: #ffffff; --color-text-muted: #e4e4e7; --color-text-soft: #a1a1aa;
  --color-border: #ffffff; --color-border-strong: #ffffff;
}
[data-theme="np-broadsheet"] .site-footer { background: #000000; border-top: 3px solid #ffffff; }


/* =========================================================
   Random expansion pack — 75 more themes (#108-182) across
   Nature, Food, Cities, Eras, Moods, Tech, Wildcards.
   ========================================================= */

/* ---------- 108. Ocean Deep ---------- */
[data-theme="ocean-deep"] {
  --color-primary:#0c4a6e;--color-primary-dark:#082f49;
  --color-primary-light:#7dd3fc;--color-primary-bg:#e0f2fe;
  --color-bg:#ecfeff;--color-bg-subtle:#cffafe;--color-bg-muted:#a5f3fc;
  --color-text:#083344;--color-text-muted:#155e75;--color-text-soft:#0891b2;
  --color-border:#cffafe;--color-border-strong:#67e8f9;
  --font-sans:'Outfit',system-ui,sans-serif;--font-heading:'Outfit',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 109. Desert Sunset — rose & peach ---------- */
[data-theme="desert-sunset"] {
  --color-primary:#be185d;--color-primary-dark:#831843;
  --color-primary-light:#fbcfe8;--color-primary-bg:#fdf2f8;
  --color-bg:#fff7f5;--color-bg-subtle:#fce7f3;--color-bg-muted:#fbcfe8;
  --color-text:#500724;--color-text-muted:#831843;--color-text-soft:#9d174d;
  --color-border:#fce7f3;--color-border-strong:#f9a8d4;
  --font-sans:'Poppins',system-ui,sans-serif;--font-heading:'Poppins',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="desert-sunset"] .hero { background: radial-gradient(900px 500px at 50% -10%, #fbcfe8 0%, #fde68a 60%, transparent 90%); }

/* ---------- 110. Forest Canopy ---------- */
[data-theme="forest-canopy"] {
  --color-primary:#14532d;--color-primary-dark:#052e16;
  --color-primary-light:#bbf7d0;--color-primary-bg:#f0fdf4;
  --color-bg:#f7faf2;--color-bg-subtle:#ecf5e0;--color-bg-muted:#d4e8bf;
  --color-text:#052e16;--color-text-muted:#14532d;--color-text-soft:#166534;
  --color-border:#d4e8bf;--color-border-strong:#a3c97e;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Lora',Georgia,serif;
  --font-weight-h1:800;--heading-tracking:-0.02em;
}

/* ---------- 111. Mountain Mist ---------- */
[data-theme="mountain-mist"] {
  --color-primary:#475569;--color-primary-dark:#334155;
  --color-primary-light:#cbd5e1;--color-primary-bg:#f1f5f9;
  --color-bg:#f8fafc;--color-bg-subtle:#e2e8f0;--color-bg-muted:#cbd5e1;
  --color-text:#1e293b;--color-text-muted:#475569;--color-text-soft:#64748b;
  --color-border:#cbd5e1;--color-border-strong:#94a3b8;
  --font-sans:'Manrope',system-ui,sans-serif;--font-heading:'Manrope',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="mountain-mist"] .hero { background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%); }

/* ---------- 112. Coral Reef ---------- */
[data-theme="coral-reef"] {
  --color-primary:#f43f5e;--color-primary-dark:#e11d48;
  --color-primary-light:#fecdd3;--color-primary-bg:#fff1f2;
  --color-bg:#fffbf5;--color-bg-subtle:#fef2f2;--color-bg-muted:#cffafe;
  --color-text:#0f172a;--color-text-muted:#0c4a6e;--color-text-soft:#0891b2;
  --color-border:#fecdd3;--color-border-strong:#fda4af;
  --font-sans:'Comfortaa',system-ui,sans-serif;--font-heading:'Comfortaa',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="coral-reef"] .btn-primary { background: linear-gradient(135deg, #f43f5e 0%, #06b6d4 100%); border: none; color:#fff; }
[data-theme="coral-reef"] .brand-mark { background: linear-gradient(135deg, #f43f5e 0%, #06b6d4 100%); }

/* ---------- 113. Tundra ---------- */
[data-theme="tundra"] {
  --color-primary:#0ea5e9;--color-primary-dark:#0369a1;
  --color-primary-light:#bae6fd;--color-primary-bg:#f0f9ff;
  --color-bg:#fafcff;--color-bg-subtle:#eff6ff;--color-bg-muted:#dbeafe;
  --color-text:#0c1e47;--color-text-muted:#1e3a8a;--color-text-soft:#1e40af;
  --color-border:#dbeafe;--color-border-strong:#bfdbfe;
  --font-sans:'IBM Plex Sans',system-ui,sans-serif;--font-heading:'IBM Plex Sans',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 114. Volcano — dark, red/black ---------- */
[data-theme="volcano"] {
  --color-primary:#ef4444;--color-primary-dark:#dc2626;
  --color-primary-light:rgba(239,68,68,0.25);--color-primary-bg:rgba(239,68,68,0.1);
  --color-bg:#0a0a0a;--color-bg-subtle:#18181b;--color-bg-muted:#27272a;
  --color-text:#fafafa;--color-text-muted:#d4d4d8;--color-text-soft:#a1a1aa;
  --color-border:#27272a;--color-border-strong:#dc2626;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Archivo Black',sans-serif;
  --font-weight-h1:400;--heading-transform:uppercase;--heading-tracking:-0.01em;
}
[data-theme="volcano"] body { background: radial-gradient(800px 500px at 50% 0%, rgba(239,68,68,0.2) 0%, transparent 70%), #0a0a0a; }
[data-theme="volcano"] .site-header { background: rgba(10,10,10,0.85); border-bottom: 1px solid #dc2626; }
[data-theme="volcano"] .hero { background: transparent; }
[data-theme="volcano"] h1, [data-theme="volcano"] h2 { color: #ef4444; }
[data-theme="volcano"] .brand-mark { background: #dc2626; color: #fff; }
[data-theme="volcano"] .btn-primary { background: #dc2626; color: #fff; }

/* ---------- 115. Bamboo Grove ---------- */
[data-theme="bamboo"] {
  --color-primary:#65a30d;--color-primary-dark:#3f6212;
  --color-primary-light:#d9f99d;--color-primary-bg:#f7fee7;
  --color-bg:#faf8f0;--color-bg-subtle:#f3f0de;--color-bg-muted:#e6dfbe;
  --color-text:#1a2e05;--color-text-muted:#3f6212;--color-text-soft:#65a30d;
  --color-border:#d9c897;--color-border-strong:#bef264;
  --font-sans:'Nunito',system-ui,sans-serif;--font-heading:'Nunito',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 116. Meadow ---------- */
[data-theme="meadow"] {
  --color-primary:#4d7c0f;--color-primary-dark:#3f6212;
  --color-primary-light:#d9f99d;--color-primary-bg:#f7fee7;
  --color-bg:#fefce8;--color-bg-subtle:#fef9c3;--color-bg-muted:#d9f99d;
  --color-text:#1a2e05;--color-text-muted:#365314;--color-text-soft:#4d7c0f;
  --color-border:#fef08a;--color-border-strong:#d9f99d;
  --font-sans:'Quicksand',system-ui,sans-serif;--font-heading:'Quicksand',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 117. Canyon ---------- */
[data-theme="canyon"] {
  --color-primary:#9a3412;--color-primary-dark:#7c2d12;
  --color-primary-light:#fed7aa;--color-primary-bg:#fff7ed;
  --color-bg:#fff8f0;--color-bg-subtle:#ffedd5;--color-bg-muted:#fed7aa;
  --color-text:#431407;--color-text-muted:#7c2d12;--color-text-soft:#9a3412;
  --color-border:#fed7aa;--color-border-strong:#fdba74;
  --font-sans:'Merriweather',Georgia,serif;--font-heading:'Merriweather',Georgia,serif;
  --font-weight-h1:900;
}

/* ---------- 118. Misty Lake ---------- */
[data-theme="misty-lake"] {
  --color-primary:#0e7490;--color-primary-dark:#155e75;
  --color-primary-light:#a5f3fc;--color-primary-bg:#ecfeff;
  --color-bg:#f0f9fb;--color-bg-subtle:#e0f2f6;--color-bg-muted:#bee3ed;
  --color-text:#083344;--color-text-muted:#155e75;--color-text-soft:#0e7490;
  --color-border:#bee3ed;--color-border-strong:#67e8f9;
  --font-sans:'Sora',system-ui,sans-serif;--font-heading:'Sora',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 119. Savanna ---------- */
[data-theme="savanna"] {
  --color-primary:#a16207;--color-primary-dark:#713f12;
  --color-primary-light:#fde68a;--color-primary-bg:#fefce8;
  --color-bg:#fdf8e8;--color-bg-subtle:#faf0c7;--color-bg-muted:#f0e6a0;
  --color-text:#422006;--color-text-muted:#713f12;--color-text-soft:#a16207;
  --color-border:#f0e6a0;--color-border-strong:#d4c070;
  --font-sans:'Lato',system-ui,sans-serif;--font-heading:'Lato',system-ui,sans-serif;
  --font-weight-h1:900;
}

/* ---------- 120. Glacier ---------- */
[data-theme="glacier"] {
  --color-primary:#0891b2;--color-primary-dark:#155e75;
  --color-primary-light:#cffafe;--color-primary-bg:#f0fdff;
  --color-bg:#ffffff;--color-bg-subtle:#f0f9ff;--color-bg-muted:#e0f2fe;
  --color-text:#083344;--color-text-muted:#155e75;--color-text-soft:#0e7490;
  --color-border:#e0f2fe;--color-border-strong:#bae6fd;
  --font-sans:'Work Sans',system-ui,sans-serif;--font-heading:'Work Sans',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="glacier"] .hero { background: linear-gradient(180deg, #ffffff 0%, #e0f2fe 100%); }

/* ---------- 121. Seashell ---------- */
[data-theme="seashell"] {
  --color-primary:#e11d48;--color-primary-dark:#9f1239;
  --color-primary-light:#fecdd3;--color-primary-bg:#fff1f2;
  --color-bg:#fff9f7;--color-bg-subtle:#ffedeb;--color-bg-muted:#ffd7d1;
  --color-text:#500724;--color-text-muted:#881337;--color-text-soft:#be123c;
  --color-border:#ffd7d1;--color-border-strong:#fda4af;
  --font-sans:'Jost',system-ui,sans-serif;--font-heading:'Jost',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 122. Wildflower Field ---------- */
[data-theme="wildflower"] {
  --color-primary:#a855f7;--color-primary-dark:#7e22ce;
  --color-primary-light:#e9d5ff;--color-primary-bg:#faf5ff;
  --color-bg:#fffef6;--color-bg-subtle:#fef9c3;--color-bg-muted:#e9d5ff;
  --color-text:#3b0764;--color-text-muted:#7e22ce;--color-text-soft:#a855f7;
  --color-border:#e9d5ff;--color-border-strong:#d8b4fe;
  --font-sans:'Fredoka',system-ui,sans-serif;--font-heading:'Fredoka',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="wildflower"] .btn-primary { background: linear-gradient(135deg, #a855f7 0%, #fde047 50%, #65a30d 100%); border: none; color:#fff; }

/* ---------- 123. Mint Chocolate ---------- */
[data-theme="mint-chocolate"] {
  --color-primary:#10b981;--color-primary-dark:#065f46;
  --color-primary-light:#a7f3d0;--color-primary-bg:#d1fae5;
  --color-bg:#ecfdf5;--color-bg-subtle:#d1fae5;--color-bg-muted:#a7f3d0;
  --color-text:#451a03;--color-text-muted:#78350f;--color-text-soft:#92400e;
  --color-border:#a7f3d0;--color-border-strong:#6ee7b7;
  --font-sans:'Outfit',system-ui,sans-serif;--font-heading:'Outfit',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="mint-chocolate"] .brand-mark { background: linear-gradient(135deg, #10b981 0%, #78350f 100%); }
[data-theme="mint-chocolate"] .btn-primary { background: #78350f; color:#ecfdf5; }

/* ---------- 124. Blueberry Muffin ---------- */
[data-theme="blueberry"] {
  --color-primary:#4338ca;--color-primary-dark:#3730a3;
  --color-primary-light:#c7d2fe;--color-primary-bg:#eef2ff;
  --color-bg:#fffdf6;--color-bg-subtle:#fef3c7;--color-bg-muted:#e0e7ff;
  --color-text:#1e1b4b;--color-text-muted:#3730a3;--color-text-soft:#4338ca;
  --color-border:#e0e7ff;--color-border-strong:#c7d2fe;
  --font-sans:'Nunito',system-ui,sans-serif;--font-heading:'Nunito',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 125. Raspberry Sorbet ---------- */
[data-theme="raspberry"] {
  --color-primary:#be185d;--color-primary-dark:#831843;
  --color-primary-light:#fce7f3;--color-primary-bg:#fdf2f8;
  --color-bg:#fffaf5;--color-bg-subtle:#fce7f3;--color-bg-muted:#f9a8d4;
  --color-text:#500724;--color-text-muted:#831843;--color-text-soft:#be185d;
  --color-border:#fbcfe8;--color-border-strong:#f9a8d4;
  --font-sans:'Quicksand',system-ui,sans-serif;--font-heading:'Quicksand',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 126. Macaron ---------- */
[data-theme="macaron"] {
  --color-primary:#f472b6;--color-primary-dark:#db2777;
  --color-primary-light:#fbcfe8;--color-primary-bg:#fdf2f8;
  --color-bg:#fffdf8;--color-bg-subtle:#fce7f3;--color-bg-muted:#d1fae5;
  --color-text:#500724;--color-text-muted:#831843;--color-text-soft:#be185d;
  --color-border:#fbcfe8;--color-border-strong:#f9a8d4;
  --font-sans:'Comfortaa',system-ui,sans-serif;--font-heading:'Comfortaa',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="macaron"] .hero { background: radial-gradient(700px 400px at 15% 10%, #fce7f3 0%, transparent 60%), radial-gradient(700px 400px at 85% 10%, #dbeafe 0%, transparent 60%), radial-gradient(500px 300px at 50% 80%, #d9f99d 0%, transparent 60%); }

/* ---------- 127. Espresso ---------- */
[data-theme="espresso"] {
  --color-primary:#fde68a;--color-primary-dark:#fbbf24;
  --color-primary-light:rgba(253,230,138,0.2);--color-primary-bg:rgba(253,230,138,0.1);
  --color-bg:#1c1006;--color-bg-subtle:#292114;--color-bg-muted:#3a2d1b;
  --color-text:#fde68a;--color-text-muted:#fcd34d;--color-text-soft:#f59e0b;
  --color-border:#3a2d1b;--color-border-strong:#fde68a;
  --font-sans:'Lora',Georgia,serif;--font-heading:'Lora',Georgia,serif;
  --font-weight-h1:800;
}
[data-theme="espresso"] .site-header { background: rgba(28,16,6,0.85); border-bottom: 1px solid #fde68a; }
[data-theme="espresso"] .hero { background: transparent; }
[data-theme="espresso"] .brand-mark { background: #fde68a; color: #1c1006; }
[data-theme="espresso"] .btn-primary { background: #fde68a; color: #1c1006; }

/* ---------- 128. Honey Comb ---------- */
[data-theme="honey"] {
  --color-primary:#ca8a04;--color-primary-dark:#a16207;
  --color-primary-light:#fde68a;--color-primary-bg:#fefce8;
  --color-bg:#fffbea;--color-bg-subtle:#fef9c3;--color-bg-muted:#fde047;
  --color-text:#422006;--color-text-muted:#713f12;--color-text-soft:#a16207;
  --color-border:#fde68a;--color-border-strong:#fbbf24;
  --font-sans:'Poppins',system-ui,sans-serif;--font-heading:'Poppins',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 129. Cherry Cola ---------- */
[data-theme="cherry-cola"] {
  --color-primary:#ef4444;--color-primary-dark:#b91c1c;
  --color-primary-light:#fecaca;--color-primary-bg:#fef2f2;
  --color-bg:#1c0a0a;--color-bg-subtle:#2d1010;--color-bg-muted:#7f1d1d;
  --color-text:#fef2f2;--color-text-muted:#fecaca;--color-text-soft:#fca5a5;
  --color-border:#7f1d1d;--color-border-strong:#dc2626;
  --font-sans:'Merriweather',Georgia,serif;--font-heading:'Merriweather',Georgia,serif;
  --font-weight-h1:900;
}
[data-theme="cherry-cola"] .site-header { background: rgba(28,10,10,0.85); border-bottom: 1px solid #dc2626; }
[data-theme="cherry-cola"] .hero { background: transparent; }
[data-theme="cherry-cola"] .brand-mark { background: #dc2626; color: #fef2f2; }
[data-theme="cherry-cola"] .btn-primary { background: #dc2626; color: #fef2f2; }

/* ---------- 130. Key Lime ---------- */
[data-theme="key-lime"] {
  --color-primary:#84cc16;--color-primary-dark:#4d7c0f;
  --color-primary-light:#d9f99d;--color-primary-bg:#f7fee7;
  --color-bg:#fefff0;--color-bg-subtle:#ecfccb;--color-bg-muted:#fce7f3;
  --color-text:#1a2e05;--color-text-muted:#365314;--color-text-soft:#4d7c0f;
  --color-border:#d9f99d;--color-border-strong:#bef264;
  --font-sans:'Fredoka',system-ui,sans-serif;--font-heading:'Fredoka',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 131. Matcha Latte ---------- */
[data-theme="matcha-latte"] {
  --color-primary:#65a30d;--color-primary-dark:#3f6212;
  --color-primary-light:#d9f99d;--color-primary-bg:#f7fee7;
  --color-bg:#fefae6;--color-bg-subtle:#fef3c7;--color-bg-muted:#d9f99d;
  --color-text:#1a2e05;--color-text-muted:#365314;--color-text-soft:#4d7c0f;
  --color-border:#fef3c7;--color-border-strong:#fde68a;
  --font-sans:'Karla',system-ui,sans-serif;--font-heading:'Karla',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 132. Dragonfruit ---------- */
[data-theme="dragonfruit"] {
  --color-primary:#ec4899;--color-primary-dark:#be185d;
  --color-primary-light:#fbcfe8;--color-primary-bg:#fdf2f8;
  --color-bg:#1e0a1f;--color-bg-subtle:#2e0d2e;--color-bg-muted:#581c87;
  --color-text:#fce7f3;--color-text-muted:#f9a8d4;--color-text-soft:#f472b6;
  --color-border:#581c87;--color-border-strong:#ec4899;
  --font-sans:'DM Sans',system-ui,sans-serif;--font-heading:'DM Sans',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="dragonfruit"] body { background: radial-gradient(800px 500px at 50% 0%, rgba(236,72,153,0.25) 0%, transparent 70%), #1e0a1f; }
[data-theme="dragonfruit"] .site-header { background: rgba(30,10,31,0.85); border-bottom: 1px solid #ec4899; }
[data-theme="dragonfruit"] .hero { background: transparent; }
[data-theme="dragonfruit"] .brand-mark { background: #ec4899; color: #fff; }
[data-theme="dragonfruit"] .btn-primary { background: #ec4899; color: #fff; }

/* ---------- 133. Tokyo Neon ---------- */
[data-theme="tokyo-neon"] {
  --color-primary:#ec4899;--color-primary-dark:#db2777;
  --color-primary-light:rgba(236,72,153,0.25);--color-primary-bg:rgba(236,72,153,0.08);
  --color-bg:#020617;--color-bg-subtle:#0f172a;--color-bg-muted:#1e293b;
  --color-text:#f1f5f9;--color-text-muted:#cbd5e1;--color-text-soft:#94a3b8;
  --color-border:#1e293b;--color-border-strong:#ec4899;
  --font-sans:'Sora',system-ui,sans-serif;--font-heading:'Orbitron',sans-serif;
  --font-weight-h1:800;--heading-transform:uppercase;--heading-tracking:0.05em;
}
[data-theme="tokyo-neon"] body { background: radial-gradient(700px 400px at 20% 0%, rgba(236,72,153,0.15) 0%, transparent 60%), radial-gradient(700px 400px at 80% 100%, rgba(34,211,238,0.15) 0%, transparent 60%), #020617; }
[data-theme="tokyo-neon"] .site-header { background: rgba(2,6,23,0.85); border-bottom: 1px solid #1e293b; }
[data-theme="tokyo-neon"] .hero { background: transparent; }
[data-theme="tokyo-neon"] h1, [data-theme="tokyo-neon"] h2 { background: linear-gradient(135deg, #ec4899 0%, #22d3ee 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="tokyo-neon"] .brand-mark { background: linear-gradient(135deg, #ec4899 0%, #22d3ee 100%); color:#fff; }
[data-theme="tokyo-neon"] .btn-primary { background: #ec4899; color:#fff; box-shadow: 0 0 20px rgba(236,72,153,0.5); }

/* ---------- 134. Santorini — cerulean + white ---------- */
[data-theme="santorini"] {
  --color-primary:#2563eb;--color-primary-dark:#1d4ed8;
  --color-primary-light:#dbeafe;--color-primary-bg:#eff6ff;
  --color-bg:#ffffff;--color-bg-subtle:#f0f9ff;--color-bg-muted:#dbeafe;
  --color-text:#0c1e47;--color-text-muted:#1e40af;--color-text-soft:#2563eb;
  --color-border:#dbeafe;--color-border-strong:#bfdbfe;
  --font-sans:'Montserrat',system-ui,sans-serif;--font-heading:'Montserrat',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 135. Marrakech — mustard + red + teal ---------- */
[data-theme="marrakech"] {
  --color-primary:#b91c1c;--color-primary-dark:#7f1d1d;
  --color-primary-light:#fecaca;--color-primary-bg:#fef2f2;
  --color-bg:#fef9e7;--color-bg-subtle:#fef3c7;--color-bg-muted:#fde68a;
  --color-text:#422006;--color-text-muted:#7f1d1d;--color-text-soft:#b91c1c;
  --color-border:#fde68a;--color-border-strong:#fbbf24;
  --font-sans:'Bitter',Georgia,serif;--font-heading:'Bitter',Georgia,serif;
  --font-weight-h1:800;
}
[data-theme="marrakech"] .brand-mark { background: linear-gradient(135deg, #b91c1c 0%, #0d9488 100%); }

/* ---------- 136. Havana — coral + teal ---------- */
[data-theme="havana"] {
  --color-primary:#14b8a6;--color-primary-dark:#0f766e;
  --color-primary-light:#99f6e4;--color-primary-bg:#f0fdfa;
  --color-bg:#fff8f3;--color-bg-subtle:#fef3c7;--color-bg-muted:#ccfbf1;
  --color-text:#134e4a;--color-text-muted:#115e59;--color-text-soft:#0f766e;
  --color-border:#ccfbf1;--color-border-strong:#5eead4;
  --font-sans:'Poppins',system-ui,sans-serif;--font-heading:'Poppins',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="havana"] .btn-primary { background: linear-gradient(135deg, #fb7185 0%, #14b8a6 100%); border:none; }
[data-theme="havana"] .brand-mark { background: linear-gradient(135deg, #fb7185 0%, #14b8a6 100%); }

/* ---------- 137. Paris — cream + rose + gold ---------- */
[data-theme="paris"] {
  --color-primary:#9f1239;--color-primary-dark:#881337;
  --color-primary-light:#fecdd3;--color-primary-bg:#fff1f2;
  --color-bg:#fdfaf2;--color-bg-subtle:#faf3e4;--color-bg-muted:#f3e8ff;
  --color-text:#1c1917;--color-text-muted:#44403c;--color-text-soft:#a16207;
  --color-border:#f3e8ff;--color-border-strong:#e2cfce;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Playfair Display',Georgia,serif;
  --font-weight-h1:900;--heading-tracking:-0.02em;
}

/* ---------- 138. Venice ---------- */
[data-theme="venice"] {
  --color-primary:#1e3a8a;--color-primary-dark:#172554;
  --color-primary-light:#bfdbfe;--color-primary-bg:#eff6ff;
  --color-bg:#fefae6;--color-bg-subtle:#fef3c7;--color-bg-muted:#fde68a;
  --color-text:#172554;--color-text-muted:#1e3a8a;--color-text-soft:#a16207;
  --color-border:#fde68a;--color-border-strong:#ca8a04;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Cormorant Garamond',Georgia,serif;
  --font-weight-h1:700;--heading-tracking:-0.02em;
}
[data-theme="venice"] h1 { font-style: italic; }

/* ---------- 139. Miami Beach ---------- */
[data-theme="miami-beach"] {
  --color-primary:#ec4899;--color-primary-dark:#db2777;
  --color-primary-light:#fbcfe8;--color-primary-bg:#fdf2f8;
  --color-bg:#fffdf8;--color-bg-subtle:#fce7f3;--color-bg-muted:#cffafe;
  --color-text:#831843;--color-text-muted:#9d174d;--color-text-soft:#0e7490;
  --color-border:#fce7f3;--color-border-strong:#f472b6;
  --font-sans:'Comfortaa',system-ui,sans-serif;--font-heading:'Comfortaa',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="miami-beach"] .hero { background: linear-gradient(180deg, #fdf2f8 0%, #cffafe 100%); }
[data-theme="miami-beach"] .btn-primary { background: linear-gradient(135deg, #ec4899 0%, #06b6d4 100%); border:none; color:#fff; }
[data-theme="miami-beach"] .brand-mark { background: linear-gradient(135deg, #ec4899 0%, #06b6d4 100%); }

/* ---------- 140. Scandinavia ---------- */
[data-theme="scandinavia"] {
  --color-primary:#1e3a8a;--color-primary-dark:#172554;
  --color-primary-light:#bfdbfe;--color-primary-bg:#eff6ff;
  --color-bg:#ffffff;--color-bg-subtle:#f8fafc;--color-bg-muted:#e2e8f0;
  --color-text:#0f172a;--color-text-muted:#475569;--color-text-soft:#64748b;
  --color-border:#e2e8f0;--color-border-strong:#cbd5e1;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Inter',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 141. Reykjavik ---------- */
[data-theme="reykjavik"] {
  --color-primary:#155e75;--color-primary-dark:#083344;
  --color-primary-light:#bae6fd;--color-primary-bg:#f0f9ff;
  --color-bg:#f0f4f7;--color-bg-subtle:#d7e2e8;--color-bg-muted:#a5b9c3;
  --color-text:#0f172a;--color-text-muted:#334155;--color-text-soft:#475569;
  --color-border:#cbd5e1;--color-border-strong:#94a3b8;
  --font-sans:'Manrope',system-ui,sans-serif;--font-heading:'Manrope',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 142. Kyoto ---------- */
[data-theme="kyoto"] {
  --color-primary:#9f1239;--color-primary-dark:#881337;
  --color-primary-light:#fecdd3;--color-primary-bg:#fff1f2;
  --color-bg:#fdfaf3;--color-bg-subtle:#f5ead0;--color-bg-muted:#d9e8cd;
  --color-text:#1c1917;--color-text-muted:#44403c;--color-text-soft:#78716c;
  --color-border:#d9e8cd;--color-border-strong:#a3c97e;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Cardo',Georgia,serif;
  --font-weight-h1:700;
}

/* ---------- 143. Speakeasy (1920s) ---------- */
[data-theme="speakeasy"] {
  --color-primary:#ca8a04;--color-primary-dark:#a16207;
  --color-primary-light:#fde68a;--color-primary-bg:#fefce8;
  --color-bg:#0a0a0a;--color-bg-subtle:#18181b;--color-bg-muted:#27272a;
  --color-text:#fde68a;--color-text-muted:#fcd34d;--color-text-soft:#a16207;
  --color-border:#27272a;--color-border-strong:#ca8a04;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Playfair Display',Georgia,serif;
  --font-weight-h1:900;--heading-tracking:-0.02em;
}
[data-theme="speakeasy"] .site-header { background: rgba(10,10,10,0.9); border-bottom: 1px solid #ca8a04; }
[data-theme="speakeasy"] .hero { background: transparent; }
[data-theme="speakeasy"] .brand-mark { background: #ca8a04; color: #0a0a0a; font-family: 'Playfair Display',serif; font-weight:900; }
[data-theme="speakeasy"] .btn-primary { background: #ca8a04; color: #0a0a0a; }

/* ---------- 144. Diner (1950s) — red + white + teal ---------- */
[data-theme="diner"] {
  --color-primary:#dc2626;--color-primary-dark:#991b1b;
  --color-primary-light:#fecaca;--color-primary-bg:#fef2f2;
  --color-bg:#ffffff;--color-bg-subtle:#fef2f2;--color-bg-muted:#ccfbf1;
  --color-text:#0a0a0a;--color-text-muted:#27272a;--color-text-soft:#52525b;
  --color-border:#fecaca;--color-border-strong:#f87171;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Bebas Neue',sans-serif;
  --font-weight-h1:400;--heading-tracking:0.04em;--heading-transform:uppercase;
}
[data-theme="diner"] .brand-mark { background: #dc2626; color: #fff; font-family: 'Bebas Neue',sans-serif; }

/* ---------- 145. Mod (1960s) — black, white, hot pink ---------- */
[data-theme="mod-60s"] {
  --color-primary:#ec4899;--color-primary-dark:#db2777;
  --color-primary-light:#fbcfe8;--color-primary-bg:#fdf2f8;
  --color-bg:#ffffff;--color-bg-subtle:#fafafa;--color-bg-muted:#f4f4f5;
  --color-text:#0a0a0a;--color-text-muted:#27272a;--color-text-soft:#52525b;
  --color-border:#0a0a0a;--color-border-strong:#0a0a0a;
  --font-sans:'Outfit',system-ui,sans-serif;--font-heading:'Outfit',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="mod-60s"] h1, [data-theme="mod-60s"] h2 { color: #ec4899; }
[data-theme="mod-60s"] .brand-mark { background: #ec4899; color: #fff; }
[data-theme="mod-60s"] .btn-primary { background: #0a0a0a; color: #ec4899; border: 2px solid #0a0a0a; }

/* ---------- 146. Groovy (1970s) — avocado + harvest + brown ---------- */
[data-theme="groovy-70s"] {
  --color-primary:#854d0e;--color-primary-dark:#422006;
  --color-primary-light:#fde047;--color-primary-bg:#fefce8;
  --color-bg:#fff8e6;--color-bg-subtle:#fef9c3;--color-bg-muted:#d4e8bf;
  --color-text:#422006;--color-text-muted:#713f12;--color-text-soft:#854d0e;
  --color-border:#d4e8bf;--color-border-strong:#84cc16;
  --font-sans:'Lora',Georgia,serif;--font-heading:'Ultra',Georgia,serif;
  --font-weight-h1:400;--heading-transform:uppercase;
}

/* ---------- 147. Arcade (1980s v2) — teal/pink/black ---------- */
[data-theme="arcade-80s"] {
  --color-primary:#22d3ee;--color-primary-dark:#06b6d4;
  --color-primary-light:rgba(34,211,238,0.25);--color-primary-bg:rgba(34,211,238,0.08);
  --color-bg:#0f172a;--color-bg-subtle:#1e293b;--color-bg-muted:#334155;
  --color-text:#f1f5f9;--color-text-muted:#cbd5e1;--color-text-soft:#94a3b8;
  --color-border:#334155;--color-border-strong:#22d3ee;
  --font-sans:'Space Grotesk',system-ui,sans-serif;--font-heading:'Orbitron',sans-serif;
  --font-weight-h1:800;--heading-transform:uppercase;
}
[data-theme="arcade-80s"] .site-header { background: rgba(15,23,42,0.85); border-bottom: 1px solid #22d3ee; }
[data-theme="arcade-80s"] .hero { background: transparent; }
[data-theme="arcade-80s"] h1 { color: #22d3ee; }
[data-theme="arcade-80s"] h2 { color: #ec4899; }
[data-theme="arcade-80s"] .brand-mark { background: #22d3ee; color: #0f172a; }
[data-theme="arcade-80s"] .btn-primary { background: #22d3ee; color: #0f172a; }

/* ---------- 148. Grunge (1990s) — washed dark + red ---------- */
[data-theme="grunge-90s"] {
  --color-primary:#991b1b;--color-primary-dark:#7f1d1d;
  --color-primary-light:#fecaca;--color-primary-bg:#fef2f2;
  --color-bg:#1c1917;--color-bg-subtle:#292524;--color-bg-muted:#44403c;
  --color-text:#e7e5e4;--color-text-muted:#a8a29e;--color-text-soft:#78716c;
  --color-border:#44403c;--color-border-strong:#991b1b;
  --font-sans:'Space Mono',ui-monospace,monospace;--font-heading:'Space Mono',ui-monospace,monospace;
  --font-weight-h1:700;
}
[data-theme="grunge-90s"] .site-header { background: rgba(28,25,23,0.85); border-bottom: 1px solid #991b1b; }
[data-theme="grunge-90s"] .hero { background: transparent; }
[data-theme="grunge-90s"] h1, [data-theme="grunge-90s"] h2 { color: #fca5a5; }
[data-theme="grunge-90s"] .brand-mark { background: #991b1b; color: #fef2f2; }
[data-theme="grunge-90s"] .btn-primary { background: #991b1b; color: #fef2f2; }

/* ---------- 149. Y2K Chrome ---------- */
[data-theme="y2k-chrome"] {
  --color-primary:#2563eb;--color-primary-dark:#1d4ed8;
  --color-primary-light:#bfdbfe;--color-primary-bg:#eff6ff;
  --color-bg:#f1f5f9;--color-bg-subtle:#e2e8f0;--color-bg-muted:#cbd5e1;
  --color-text:#0c1e47;--color-text-muted:#1e3a8a;--color-text-soft:#3b82f6;
  --color-border:#cbd5e1;--color-border-strong:#94a3b8;
  --font-sans:'Jost',system-ui,sans-serif;--font-heading:'Jost',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="y2k-chrome"] .hero { background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 50%, #94a3b8 100%); }
[data-theme="y2k-chrome"] .btn-primary { background: linear-gradient(135deg, #94a3b8 0%, #2563eb 50%, #22d3ee 100%); border:none; color:#fff; }
[data-theme="y2k-chrome"] .brand-mark { background: linear-gradient(135deg, #94a3b8 0%, #2563eb 50%, #22d3ee 100%); }

/* ---------- 150. Bauhaus — primary R/Y/B ---------- */
[data-theme="bauhaus"] {
  --color-primary:#dc2626;--color-primary-dark:#991b1b;
  --color-primary-light:#fecaca;--color-primary-bg:#fef2f2;
  --color-bg:#ffffff;--color-bg-subtle:#fefce8;--color-bg-muted:#eff6ff;
  --color-text:#0a0a0a;--color-text-muted:#27272a;--color-text-soft:#52525b;
  --color-border:#0a0a0a;--color-border-strong:#0a0a0a;
  --font-sans:'DM Sans',system-ui,sans-serif;--font-heading:'DM Sans',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="bauhaus"] .hero { background: radial-gradient(400px 400px at 15% 15%, #fde047 0%, transparent 60%), radial-gradient(400px 400px at 85% 15%, #2563eb 0%, transparent 60%); }
[data-theme="bauhaus"] .brand-mark { background: #dc2626; color: #ffffff; }

/* ---------- 151. Memphis Design ---------- */
[data-theme="memphis-design"] {
  --color-primary:#ec4899;--color-primary-dark:#db2777;
  --color-primary-light:#fbcfe8;--color-primary-bg:#fdf2f8;
  --color-bg:#fefce8;--color-bg-subtle:#fef3c7;--color-bg-muted:#cffafe;
  --color-text:#0a0a0a;--color-text-muted:#27272a;--color-text-soft:#52525b;
  --color-border:#0a0a0a;--color-border-strong:#0a0a0a;
  --font-sans:'Fredoka',system-ui,sans-serif;--font-heading:'Fredoka',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="memphis-design"] .hero { background: radial-gradient(400px 400px at 20% 15%, #fde047 0%, transparent 50%), radial-gradient(400px 400px at 80% 15%, #22d3ee 0%, transparent 50%), radial-gradient(400px 400px at 50% 85%, #ec4899 0%, transparent 50%); }
[data-theme="memphis-design"] .card,
[data-theme="memphis-design"] .step,
[data-theme="memphis-design"] .compliance,
[data-theme="memphis-design"] .faq details { border: 2px solid #0a0a0a; box-shadow: 4px 4px 0 #ec4899; }

/* ---------- 152. Edwardian — sage + cream + gold ---------- */
[data-theme="edwardian"] {
  --color-primary:#ca8a04;--color-primary-dark:#a16207;
  --color-primary-light:#fde68a;--color-primary-bg:#fefce8;
  --color-bg:#fdfaf2;--color-bg-subtle:#f5f1e3;--color-bg-muted:#d9e8cd;
  --color-text:#14532d;--color-text-muted:#166534;--color-text-soft:#a16207;
  --color-border:#d9e8cd;--color-border-strong:#ca8a04;
  --font-sans:'EB Garamond',Georgia,serif;--font-heading:'Cormorant Garamond',Georgia,serif;
  --font-weight-h1:700;--heading-tracking:-0.02em;
}
[data-theme="edwardian"] h1 { font-style: italic; }

/* ---------- 153. Calm ---------- */
[data-theme="calm"] {
  --color-primary:#0891b2;--color-primary-dark:#155e75;
  --color-primary-light:#a5f3fc;--color-primary-bg:#ecfeff;
  --color-bg:#f8fafc;--color-bg-subtle:#f0f9ff;--color-bg-muted:#e0f2fe;
  --color-text:#334155;--color-text-muted:#475569;--color-text-soft:#64748b;
  --color-border:#e2e8f0;--color-border-strong:#cbd5e1;
  --font-sans:'Onest',system-ui,sans-serif;--font-heading:'Onest',system-ui,sans-serif;
  --font-weight-h1:600;
}

/* ---------- 154. Energetic — red + yellow ---------- */
[data-theme="energetic"] {
  --color-primary:#dc2626;--color-primary-dark:#991b1b;
  --color-primary-light:#fecaca;--color-primary-bg:#fef2f2;
  --color-bg:#fefce8;--color-bg-subtle:#fef9c3;--color-bg-muted:#fde68a;
  --color-text:#0a0a0a;--color-text-muted:#7f1d1d;--color-text-soft:#dc2626;
  --color-border:#fde68a;--color-border-strong:#fbbf24;
  --font-sans:'Montserrat',system-ui,sans-serif;--font-heading:'Montserrat',system-ui,sans-serif;
  --font-weight-h1:900;
}
[data-theme="energetic"] .btn-primary { background: #dc2626; color:#fff; }
[data-theme="energetic"] .brand-mark { background: #dc2626; color:#fff; }

/* ---------- 155. Mysterious — deep purple + silver ---------- */
[data-theme="mysterious"] {
  --color-primary:#c7d2fe;--color-primary-dark:#a5b4fc;
  --color-primary-light:rgba(199,210,254,0.2);--color-primary-bg:rgba(199,210,254,0.08);
  --color-bg:#1e1b4b;--color-bg-subtle:#312e81;--color-bg-muted:#3730a3;
  --color-text:#e0e7ff;--color-text-muted:#c7d2fe;--color-text-soft:#a5b4fc;
  --color-border:#3730a3;--color-border-strong:#6366f1;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Spectral',Georgia,serif;
  --font-weight-h1:700;--heading-tracking:-0.02em;
}
[data-theme="mysterious"] .site-header { background: rgba(30,27,75,0.85); border-bottom: 1px solid #3730a3; }
[data-theme="mysterious"] .hero { background: transparent; }
[data-theme="mysterious"] h1 { font-style: italic; }
[data-theme="mysterious"] .brand-mark { background: #c7d2fe; color: #1e1b4b; }
[data-theme="mysterious"] .btn-primary { background: #c7d2fe; color: #1e1b4b; }

/* ---------- 156. Romantic — rose + gold ---------- */
[data-theme="romantic"] {
  --color-primary:#be185d;--color-primary-dark:#831843;
  --color-primary-light:#fbcfe8;--color-primary-bg:#fdf2f8;
  --color-bg:#fff9fb;--color-bg-subtle:#fce7f3;--color-bg-muted:#fde68a;
  --color-text:#500724;--color-text-muted:#831843;--color-text-soft:#a16207;
  --color-border:#fce7f3;--color-border-strong:#f9a8d4;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Playfair Display',Georgia,serif;
  --font-weight-h1:900;--heading-tracking:-0.02em;
}
[data-theme="romantic"] h1 { font-style: italic; }
[data-theme="romantic"] .brand-mark { background: linear-gradient(135deg, #be185d 0%, #ca8a04 100%); }

/* ---------- 157. Playful ---------- */
[data-theme="playful"] {
  --color-primary:#2563eb;--color-primary-dark:#1d4ed8;
  --color-primary-light:#bfdbfe;--color-primary-bg:#eff6ff;
  --color-bg:#fefce8;--color-bg-subtle:#fef9c3;--color-bg-muted:#fbcfe8;
  --color-text:#0a0a0a;--color-text-muted:#27272a;--color-text-soft:#52525b;
  --color-border:#fbcfe8;--color-border-strong:#f472b6;
  --font-sans:'Fredoka',system-ui,sans-serif;--font-heading:'Fredoka',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="playful"] .btn-primary { background: #ec4899; color:#fff; border-radius: 999px; }
[data-theme="playful"] .brand-mark { background: linear-gradient(135deg, #2563eb 0%, #ec4899 100%); }

/* ---------- 158. Serious ---------- */
[data-theme="serious"] {
  --color-primary:#172554;--color-primary-dark:#0c1e47;
  --color-primary-light:#c7d2fe;--color-primary-bg:#eef2ff;
  --color-bg:#ffffff;--color-bg-subtle:#f8fafc;--color-bg-muted:#e2e8f0;
  --color-text:#0c1e47;--color-text-muted:#1e293b;--color-text-soft:#334155;
  --color-border:#e2e8f0;--color-border-strong:#cbd5e1;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Inter',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 159. Dreamy — lavender + pink mist ---------- */
[data-theme="dreamy"] {
  --color-primary:#a855f7;--color-primary-dark:#7e22ce;
  --color-primary-light:#e9d5ff;--color-primary-bg:#faf5ff;
  --color-bg:#fdfaff;--color-bg-subtle:#f5f3ff;--color-bg-muted:#e9d5ff;
  --color-text:#581c87;--color-text-muted:#7e22ce;--color-text-soft:#a855f7;
  --color-border:#e9d5ff;--color-border-strong:#d8b4fe;
  --font-sans:'Quicksand',system-ui,sans-serif;--font-heading:'Quicksand',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="dreamy"] .hero { background: radial-gradient(900px 500px at 50% -10%, #e9d5ff 0%, #fce7f3 60%, transparent 90%); }

/* ---------- 160. Bold ---------- */
[data-theme="bold-mood"] {
  --color-primary:#dc2626;--color-primary-dark:#991b1b;
  --color-primary-light:#fecaca;--color-primary-bg:#fef2f2;
  --color-bg:#ffffff;--color-bg-subtle:#fafafa;--color-bg-muted:#f4f4f5;
  --color-text:#0a0a0a;--color-text-muted:#27272a;--color-text-soft:#52525b;
  --color-border:#0a0a0a;--color-border-strong:#0a0a0a;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Archivo Black',sans-serif;
  --font-weight-h1:400;--heading-transform:uppercase;
}
[data-theme="bold-mood"] h1 { color: #dc2626; }
[data-theme="bold-mood"] .brand-mark { background: #dc2626; color:#fff; }

/* ---------- 161. Melancholy ---------- */
[data-theme="melancholy"] {
  --color-primary:#475569;--color-primary-dark:#334155;
  --color-primary-light:#cbd5e1;--color-primary-bg:#f1f5f9;
  --color-bg:#e2e8f0;--color-bg-subtle:#cbd5e1;--color-bg-muted:#94a3b8;
  --color-text:#1e293b;--color-text-muted:#334155;--color-text-soft:#475569;
  --color-border:#94a3b8;--color-border-strong:#64748b;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Spectral',Georgia,serif;
  --font-weight-h1:600;--heading-tracking:-0.02em;
}
[data-theme="melancholy"] h1 { font-style: italic; }

/* ---------- 162. Euphoric ---------- */
[data-theme="euphoric"] {
  --color-primary:#06b6d4;--color-primary-dark:#0891b2;
  --color-primary-light:#a5f3fc;--color-primary-bg:#ecfeff;
  --color-bg:#ffffff;--color-bg-subtle:#fdf2f8;--color-bg-muted:#cffafe;
  --color-text:#831843;--color-text-muted:#9d174d;--color-text-soft:#0891b2;
  --color-border:#cffafe;--color-border-strong:#67e8f9;
  --font-sans:'Outfit',system-ui,sans-serif;--font-heading:'Outfit',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="euphoric"] .hero { background: radial-gradient(900px 500px at 15% 0%, rgba(236,72,153,0.2) 0%, transparent 60%), radial-gradient(900px 500px at 85% 0%, rgba(6,182,212,0.2) 0%, transparent 60%); }
[data-theme="euphoric"] .btn-primary { background: linear-gradient(135deg, #ec4899 0%, #06b6d4 100%); border:none; color:#fff; }
[data-theme="euphoric"] .brand-mark { background: linear-gradient(135deg, #ec4899 0%, #06b6d4 100%); }

/* ---------- 163. Matrix ---------- */
[data-theme="matrix"] {
  --color-primary:#22c55e;--color-primary-dark:#16a34a;
  --color-primary-light:rgba(34,197,94,0.25);--color-primary-bg:rgba(34,197,94,0.08);
  --color-bg:#000000;--color-bg-subtle:#050505;--color-bg-muted:#0a0a0a;
  --color-text:#22c55e;--color-text-muted:#16a34a;--color-text-soft:#15803d;
  --color-border:#14532d;--color-border-strong:#22c55e;
  --font-sans:'JetBrains Mono',ui-monospace,monospace;--font-heading:'JetBrains Mono',ui-monospace,monospace;
  --font-weight-h1:700;
}
[data-theme="matrix"] .site-header { background: rgba(0,0,0,0.9); border-bottom: 1px solid #14532d; }
[data-theme="matrix"] .hero { background: transparent; }
[data-theme="matrix"] .brand-mark { background: #22c55e; color: #000; }
[data-theme="matrix"] .btn-primary { background: #22c55e; color: #000; }
[data-theme="matrix"] .card,
[data-theme="matrix"] .step,
[data-theme="matrix"] .compliance,
[data-theme="matrix"] .faq details,
[data-theme="matrix"] .screenshot { background: #050505; border: 1px solid #14532d; }

/* ---------- 164. Solarized Light ---------- */
[data-theme="solarized-light"] {
  --color-primary:#268bd2;--color-primary-dark:#0369a1;
  --color-primary-light:#93c5fd;--color-primary-bg:#eff6ff;
  --color-bg:#fdf6e3;--color-bg-subtle:#eee8d5;--color-bg-muted:#93a1a1;
  --color-text:#073642;--color-text-muted:#586e75;--color-text-soft:#657b83;
  --color-border:#eee8d5;--color-border-strong:#93a1a1;
  --font-sans:'JetBrains Mono',ui-monospace,monospace;--font-heading:'JetBrains Mono',ui-monospace,monospace;
  --font-weight-h1:700;
}

/* ---------- 165. Solarized Dark ---------- */
[data-theme="solarized-dark"] {
  --color-primary:#b58900;--color-primary-dark:#957000;
  --color-primary-light:rgba(181,137,0,0.25);--color-primary-bg:rgba(181,137,0,0.08);
  --color-bg:#002b36;--color-bg-subtle:#073642;--color-bg-muted:#586e75;
  --color-text:#fdf6e3;--color-text-muted:#eee8d5;--color-text-soft:#93a1a1;
  --color-border:#073642;--color-border-strong:#b58900;
  --font-sans:'JetBrains Mono',ui-monospace,monospace;--font-heading:'JetBrains Mono',ui-monospace,monospace;
  --font-weight-h1:700;
}
[data-theme="solarized-dark"] .site-header { background: rgba(0,43,54,0.85); border-bottom: 1px solid #073642; }
[data-theme="solarized-dark"] .hero { background: transparent; }
[data-theme="solarized-dark"] .brand-mark { background: #b58900; color: #002b36; }
[data-theme="solarized-dark"] .btn-primary { background: #b58900; color: #002b36; }
[data-theme="solarized-dark"] .card,
[data-theme="solarized-dark"] .step,
[data-theme="solarized-dark"] .compliance,
[data-theme="solarized-dark"] .faq details,
[data-theme="solarized-dark"] .screenshot { background: #073642; border: 1px solid #586e75; }

/* ---------- 166. Nord ---------- */
[data-theme="nord"] {
  --color-primary:#88c0d0;--color-primary-dark:#5e81ac;
  --color-primary-light:rgba(136,192,208,0.25);--color-primary-bg:rgba(136,192,208,0.08);
  --color-bg:#2e3440;--color-bg-subtle:#3b4252;--color-bg-muted:#434c5e;
  --color-text:#eceff4;--color-text-muted:#d8dee9;--color-text-soft:#e5e9f0;
  --color-border:#4c566a;--color-border-strong:#88c0d0;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Inter',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="nord"] .site-header { background: rgba(46,52,64,0.85); border-bottom: 1px solid #4c566a; }
[data-theme="nord"] .hero { background: transparent; }
[data-theme="nord"] .brand-mark { background: #88c0d0; color: #2e3440; }
[data-theme="nord"] .btn-primary { background: #88c0d0; color: #2e3440; }
[data-theme="nord"] .card,
[data-theme="nord"] .step,
[data-theme="nord"] .compliance,
[data-theme="nord"] .faq details,
[data-theme="nord"] .screenshot { background: #3b4252; border: 1px solid #4c566a; }

/* ---------- 167. Dracula ---------- */
[data-theme="dracula"] {
  --color-primary:#ff79c6;--color-primary-dark:#bd93f9;
  --color-primary-light:rgba(255,121,198,0.25);--color-primary-bg:rgba(255,121,198,0.08);
  --color-bg:#282a36;--color-bg-subtle:#44475a;--color-bg-muted:#6272a4;
  --color-text:#f8f8f2;--color-text-muted:#bfbfbf;--color-text-soft:#6272a4;
  --color-border:#44475a;--color-border-strong:#bd93f9;
  --font-sans:'JetBrains Mono',ui-monospace,monospace;--font-heading:'JetBrains Mono',ui-monospace,monospace;
  --font-weight-h1:700;
}
[data-theme="dracula"] .site-header { background: rgba(40,42,54,0.85); border-bottom: 1px solid #44475a; }
[data-theme="dracula"] .hero { background: transparent; }
[data-theme="dracula"] h1, [data-theme="dracula"] h2 { color: #ff79c6; }
[data-theme="dracula"] .brand-mark { background: #ff79c6; color: #282a36; }
[data-theme="dracula"] .btn-primary { background: #bd93f9; color: #282a36; }
[data-theme="dracula"] .card,
[data-theme="dracula"] .step,
[data-theme="dracula"] .compliance,
[data-theme="dracula"] .faq details,
[data-theme="dracula"] .screenshot { background: #44475a; border: 1px solid #6272a4; }

/* ---------- 168. Gruvbox ---------- */
[data-theme="gruvbox"] {
  --color-primary:#fabd2f;--color-primary-dark:#d79921;
  --color-primary-light:rgba(250,189,47,0.25);--color-primary-bg:rgba(250,189,47,0.08);
  --color-bg:#282828;--color-bg-subtle:#3c3836;--color-bg-muted:#504945;
  --color-text:#ebdbb2;--color-text-muted:#d5c4a1;--color-text-soft:#bdae93;
  --color-border:#504945;--color-border-strong:#fabd2f;
  --font-sans:'Fira Code',ui-monospace,monospace;--font-heading:'Fira Code',ui-monospace,monospace;
  --font-weight-h1:700;
}
[data-theme="gruvbox"] .site-header { background: rgba(40,40,40,0.85); border-bottom: 1px solid #504945; }
[data-theme="gruvbox"] .hero { background: transparent; }
[data-theme="gruvbox"] .brand-mark { background: #fabd2f; color: #282828; }
[data-theme="gruvbox"] .btn-primary { background: #fabd2f; color: #282828; }
[data-theme="gruvbox"] .card,
[data-theme="gruvbox"] .step,
[data-theme="gruvbox"] .compliance,
[data-theme="gruvbox"] .faq details,
[data-theme="gruvbox"] .screenshot { background: #3c3836; border: 1px solid #504945; }

/* ---------- 169. Monokai ---------- */
[data-theme="monokai"] {
  --color-primary:#a6e22e;--color-primary-dark:#66d9ef;
  --color-primary-light:rgba(166,226,46,0.25);--color-primary-bg:rgba(166,226,46,0.08);
  --color-bg:#272822;--color-bg-subtle:#3e3d32;--color-bg-muted:#75715e;
  --color-text:#f8f8f2;--color-text-muted:#cfcfc2;--color-text-soft:#75715e;
  --color-border:#3e3d32;--color-border-strong:#f92672;
  --font-sans:'Fira Code',ui-monospace,monospace;--font-heading:'Fira Code',ui-monospace,monospace;
  --font-weight-h1:700;
}
[data-theme="monokai"] .site-header { background: rgba(39,40,34,0.85); border-bottom: 1px solid #3e3d32; }
[data-theme="monokai"] .hero { background: transparent; }
[data-theme="monokai"] h1, [data-theme="monokai"] h2 { color: #f92672; }
[data-theme="monokai"] .brand-mark { background: #a6e22e; color: #272822; }
[data-theme="monokai"] .btn-primary { background: #f92672; color: #f8f8f2; }
[data-theme="monokai"] .card,
[data-theme="monokai"] .step,
[data-theme="monokai"] .compliance,
[data-theme="monokai"] .faq details,
[data-theme="monokai"] .screenshot { background: #3e3d32; border: 1px solid #75715e; }

/* ---------- 170. Tokyo Night ---------- */
[data-theme="tokyo-night"] {
  --color-primary:#7aa2f7;--color-primary-dark:#3d59a1;
  --color-primary-light:rgba(122,162,247,0.25);--color-primary-bg:rgba(122,162,247,0.08);
  --color-bg:#1a1b26;--color-bg-subtle:#24283b;--color-bg-muted:#414868;
  --color-text:#c0caf5;--color-text-muted:#a9b1d6;--color-text-soft:#737aa2;
  --color-border:#414868;--color-border-strong:#7aa2f7;
  --font-sans:'JetBrains Mono',ui-monospace,monospace;--font-heading:'JetBrains Mono',ui-monospace,monospace;
  --font-weight-h1:700;
}
[data-theme="tokyo-night"] .site-header { background: rgba(26,27,38,0.85); border-bottom: 1px solid #414868; }
[data-theme="tokyo-night"] .hero { background: transparent; }
[data-theme="tokyo-night"] .brand-mark { background: #7aa2f7; color: #1a1b26; }
[data-theme="tokyo-night"] .btn-primary { background: #7aa2f7; color: #1a1b26; }
[data-theme="tokyo-night"] .card,
[data-theme="tokyo-night"] .step,
[data-theme="tokyo-night"] .compliance,
[data-theme="tokyo-night"] .faq details,
[data-theme="tokyo-night"] .screenshot { background: #24283b; border: 1px solid #414868; }

/* ---------- 171. Rose Pine ---------- */
[data-theme="rose-pine"] {
  --color-primary:#ebbcba;--color-primary-dark:#d7827e;
  --color-primary-light:rgba(235,188,186,0.25);--color-primary-bg:rgba(235,188,186,0.08);
  --color-bg:#191724;--color-bg-subtle:#1f1d2e;--color-bg-muted:#26233a;
  --color-text:#e0def4;--color-text-muted:#908caa;--color-text-soft:#6e6a86;
  --color-border:#26233a;--color-border-strong:#ebbcba;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Inter',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="rose-pine"] .site-header { background: rgba(25,23,36,0.85); border-bottom: 1px solid #26233a; }
[data-theme="rose-pine"] .hero { background: transparent; }
[data-theme="rose-pine"] .brand-mark { background: #ebbcba; color: #191724; }
[data-theme="rose-pine"] .btn-primary { background: #ebbcba; color: #191724; }
[data-theme="rose-pine"] .card,
[data-theme="rose-pine"] .step,
[data-theme="rose-pine"] .compliance,
[data-theme="rose-pine"] .faq details,
[data-theme="rose-pine"] .screenshot { background: #1f1d2e; border: 1px solid #26233a; }

/* ---------- 172. Catppuccin (Mocha) ---------- */
[data-theme="catppuccin"] {
  --color-primary:#f5c2e7;--color-primary-dark:#cba6f7;
  --color-primary-light:rgba(245,194,231,0.25);--color-primary-bg:rgba(245,194,231,0.08);
  --color-bg:#1e1e2e;--color-bg-subtle:#313244;--color-bg-muted:#45475a;
  --color-text:#cdd6f4;--color-text-muted:#bac2de;--color-text-soft:#a6adc8;
  --color-border:#313244;--color-border-strong:#cba6f7;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Inter',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="catppuccin"] .site-header { background: rgba(30,30,46,0.85); border-bottom: 1px solid #313244; }
[data-theme="catppuccin"] .hero { background: transparent; }
[data-theme="catppuccin"] .brand-mark { background: #cba6f7; color: #1e1e2e; }
[data-theme="catppuccin"] .btn-primary { background: #cba6f7; color: #1e1e2e; }
[data-theme="catppuccin"] .card,
[data-theme="catppuccin"] .step,
[data-theme="catppuccin"] .compliance,
[data-theme="catppuccin"] .faq details,
[data-theme="catppuccin"] .screenshot { background: #313244; border: 1px solid #45475a; }

/* ---------- 173. Unicorn Gradient ---------- */
[data-theme="unicorn"] {
  --color-primary:#ec4899;--color-primary-dark:#db2777;
  --color-primary-light:#fbcfe8;--color-primary-bg:#fdf2f8;
  --color-bg:#ffffff;--color-bg-subtle:#fdf2f8;--color-bg-muted:#faf5ff;
  --color-text:#581c87;--color-text-muted:#7c3aed;--color-text-soft:#a855f7;
  --color-border:#f5d0fe;--color-border-strong:#e9d5ff;
  --font-sans:'Fredoka',system-ui,sans-serif;--font-heading:'Fredoka',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="unicorn"] body { background: linear-gradient(135deg, #fce7f3 0%, #e9d5ff 25%, #dbeafe 50%, #d1fae5 75%, #fef9c3 100%); }
[data-theme="unicorn"] .btn-primary { background: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #3b82f6 100%); border:none; color:#fff; }
[data-theme="unicorn"] .brand-mark { background: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #3b82f6 100%); }
[data-theme="unicorn"] h1, [data-theme="unicorn"] h2 { background: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #3b82f6 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ---------- 174. Neon Sign ---------- */
[data-theme="neon-sign"] {
  --color-primary:#ec4899;--color-primary-dark:#db2777;
  --color-primary-light:rgba(236,72,153,0.25);--color-primary-bg:rgba(236,72,153,0.08);
  --color-bg:#0a0a0a;--color-bg-subtle:#18181b;--color-bg-muted:#27272a;
  --color-text:#f5f5f5;--color-text-muted:#d4d4d8;--color-text-soft:#a1a1aa;
  --color-border:#27272a;--color-border-strong:#ec4899;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Orbitron',sans-serif;
  --font-weight-h1:800;--heading-transform:uppercase;--heading-tracking:0.05em;
}
[data-theme="neon-sign"] .site-header { background: rgba(10,10,10,0.9); border-bottom: 1px solid #ec4899; }
[data-theme="neon-sign"] .hero { background: transparent; }
[data-theme="neon-sign"] h1 { color: #ec4899; text-shadow: 0 0 10px rgba(236,72,153,0.8), 0 0 20px rgba(236,72,153,0.5); }
[data-theme="neon-sign"] h2 { color: #22d3ee; text-shadow: 0 0 10px rgba(34,211,238,0.6); }
[data-theme="neon-sign"] .brand-mark { background: #ec4899; color:#000; box-shadow: 0 0 16px rgba(236,72,153,0.6); }
[data-theme="neon-sign"] .btn-primary { background: #ec4899; color:#fff; box-shadow: 0 0 20px rgba(236,72,153,0.6); }

/* ---------- 175. Velvet — deep purple + burgundy ---------- */
[data-theme="velvet"] {
  --color-primary:#a855f7;--color-primary-dark:#7e22ce;
  --color-primary-light:rgba(168,85,247,0.25);--color-primary-bg:rgba(168,85,247,0.08);
  --color-bg:#2e1065;--color-bg-subtle:#4c1d95;--color-bg-muted:#5b21b6;
  --color-text:#f3e8ff;--color-text-muted:#e9d5ff;--color-text-soft:#d8b4fe;
  --color-border:#5b21b6;--color-border-strong:#a855f7;
  --font-sans:'Cormorant Garamond',Georgia,serif;--font-heading:'Cormorant Garamond',Georgia,serif;
  --font-weight-h1:800;--heading-tracking:-0.02em;
}
[data-theme="velvet"] .site-header { background: rgba(46,16,101,0.85); border-bottom: 1px solid #5b21b6; }
[data-theme="velvet"] .hero { background: transparent; }
[data-theme="velvet"] h1 { font-style: italic; }
[data-theme="velvet"] .brand-mark { background: linear-gradient(135deg, #a855f7 0%, #9f1239 100%); color:#fff; }
[data-theme="velvet"] .btn-primary { background: linear-gradient(135deg, #a855f7 0%, #9f1239 100%); color:#fff; border:none; }

/* ---------- 176. Leather ---------- */
[data-theme="leather"] {
  --color-primary:#fde68a;--color-primary-dark:#fcd34d;
  --color-primary-light:rgba(253,230,138,0.25);--color-primary-bg:rgba(253,230,138,0.08);
  --color-bg:#431407;--color-bg-subtle:#7c2d12;--color-bg-muted:#9a3412;
  --color-text:#fed7aa;--color-text-muted:#fdba74;--color-text-soft:#fb923c;
  --color-border:#9a3412;--color-border-strong:#fde68a;
  --font-sans:'Lora',Georgia,serif;--font-heading:'Lora',Georgia,serif;
  --font-weight-h1:700;
}
[data-theme="leather"] .site-header { background: rgba(67,20,7,0.85); border-bottom: 1px solid #9a3412; }
[data-theme="leather"] .hero { background: transparent; }
[data-theme="leather"] .brand-mark { background: #fde68a; color: #431407; }
[data-theme="leather"] .btn-primary { background: #fde68a; color: #431407; }

/* ---------- 177. Smoke ---------- */
[data-theme="smoke"] {
  --color-primary:#52525b;--color-primary-dark:#3f3f46;
  --color-primary-light:#d4d4d8;--color-primary-bg:#fafafa;
  --color-bg:#f4f4f5;--color-bg-subtle:#e4e4e7;--color-bg-muted:#d4d4d8;
  --color-text:#18181b;--color-text-muted:#52525b;--color-text-soft:#71717a;
  --color-border:#d4d4d8;--color-border-strong:#a1a1aa;
  --font-sans:'Inter',system-ui,sans-serif;--font-heading:'Inter',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="smoke"] body { background: linear-gradient(135deg, #f4f4f5 0%, #d4d4d8 100%); }

/* ---------- 178. Brushed Metal ---------- */
[data-theme="brushed-metal"] {
  --color-primary:#64748b;--color-primary-dark:#475569;
  --color-primary-light:#cbd5e1;--color-primary-bg:#f1f5f9;
  --color-bg:#e2e8f0;--color-bg-subtle:#cbd5e1;--color-bg-muted:#94a3b8;
  --color-text:#0f172a;--color-text-muted:#1e293b;--color-text-soft:#334155;
  --color-border:#94a3b8;--color-border-strong:#64748b;
  --font-sans:'Manrope',system-ui,sans-serif;--font-heading:'Manrope',system-ui,sans-serif;
  --font-weight-h1:800;
}
[data-theme="brushed-metal"] body { background: repeating-linear-gradient(135deg, #e2e8f0 0, #e2e8f0 2px, #cbd5e1 2px, #cbd5e1 3px); }
[data-theme="brushed-metal"] .brand-mark { background: linear-gradient(135deg, #94a3b8 0%, #475569 100%); color:#fff; }

/* ---------- 179. Stone & Moss ---------- */
[data-theme="stone-moss"] {
  --color-primary:#4d7c0f;--color-primary-dark:#365314;
  --color-primary-light:#d9f99d;--color-primary-bg:#f7fee7;
  --color-bg:#e7e5e4;--color-bg-subtle:#d6d3d1;--color-bg-muted:#a8a29e;
  --color-text:#1c1917;--color-text-muted:#44403c;--color-text-soft:#4d7c0f;
  --color-border:#d6d3d1;--color-border-strong:#78716c;
  --font-sans:'Karla',system-ui,sans-serif;--font-heading:'Karla',system-ui,sans-serif;
  --font-weight-h1:700;
}

/* ---------- 180. Lichen ---------- */
[data-theme="lichen"] {
  --color-primary:#65a30d;--color-primary-dark:#4d7c0f;
  --color-primary-light:#d9f99d;--color-primary-bg:#f7fee7;
  --color-bg:#f4f4f0;--color-bg-subtle:#e7e5dc;--color-bg-muted:#d9d4c3;
  --color-text:#1c1917;--color-text-muted:#44403c;--color-text-soft:#65a30d;
  --color-border:#d9d4c3;--color-border-strong:#a8a290;
  --font-sans:'Lora',Georgia,serif;--font-heading:'Lora',Georgia,serif;
  --font-weight-h1:700;
}

/* ---------- 181. Seaweed ---------- */
[data-theme="seaweed"] {
  --color-primary:#065f46;--color-primary-dark:#064e3b;
  --color-primary-light:#a7f3d0;--color-primary-bg:#ecfdf5;
  --color-bg:#f0f2ed;--color-bg-subtle:#dde4d5;--color-bg-muted:#b5c4a5;
  --color-text:#1a2e1a;--color-text-muted:#365c36;--color-text-soft:#065f46;
  --color-border:#b5c4a5;--color-border-strong:#65a30d;
  --font-sans:'Work Sans',system-ui,sans-serif;--font-heading:'Work Sans',system-ui,sans-serif;
  --font-weight-h1:800;
}

/* ---------- 182. Cotton Candy ---------- */
[data-theme="cotton-candy"] {
  --color-primary:#ec4899;--color-primary-dark:#db2777;
  --color-primary-light:#fbcfe8;--color-primary-bg:#fdf2f8;
  --color-bg:#fff5fa;--color-bg-subtle:#fce7f3;--color-bg-muted:#dbeafe;
  --color-text:#831843;--color-text-muted:#be185d;--color-text-soft:#0891b2;
  --color-border:#fce7f3;--color-border-strong:#f9a8d4;
  --font-sans:'Quicksand',system-ui,sans-serif;--font-heading:'Quicksand',system-ui,sans-serif;
  --font-weight-h1:700;
}
[data-theme="cotton-candy"] body { background: linear-gradient(180deg, #fce7f3 0%, #dbeafe 100%); }
[data-theme="cotton-candy"] .brand-mark { background: linear-gradient(135deg, #ec4899 0%, #3b82f6 100%); }

/* ---------- Dashboard preview page ---------- */

body.app-page {
  background: var(--color-bg-subtle);
  min-height: 100vh;
}

.app-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 40px) clamp(28px, 5vw, 56px);
}

.app-topbar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 8px;
}

.app-logo {
  height: 96px;
  width: auto;
  display: block;
}

.app-hero {
  text-align: center;
  margin: 32px 0 40px;
}

.app-hero h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.app-hero p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

.app-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}

.app-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.app-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}

.app-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.04em;
}

.app-card h2 {
  margin: 0;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.app-card p {
  margin: 0;
  flex: 1;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.app-card-cta {
  margin-top: 10px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9375rem;
}
.app-card:hover .app-card-cta { color: var(--color-primary-dark); }

@media (max-width: 860px) {
  .app-cards { grid-template-columns: 1fr; }
}

/* ---------- Contact page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.contact-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.contact-card h3 {
  margin: 0 0 8px 0;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.contact-card p {
  margin: 0 0 18px 0;
  color: var(--color-text-muted);
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.contact-card .btn {
  align-self: stretch;
  text-align: center;
  font-size: 0.9375rem;
  word-break: break-all;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.form-optional {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.8125rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
}

.contact-form .btn {
  align-self: flex-start;
  margin-top: 4px;
}

.form-note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}