/* ==========================================================================
   landing.css — shared light-theme shell for Chitmunk marketing + guides.

   Used by: index.html (Architecture 2 rewrite), guides/index.html,
   guides/*.html, for/*.html, card-sizes.html, brand.html, contact.html,
   privacy.html, terms.html.

   Architecture:
     - Base CSS from the index.html rewrite (mockup.html blueprint):
       theme vars, typography, buttons, nav + mega dropdown, hero,
       trust bar, showcase tabs, how-it-works, personas, comparison,
       pricing, final CTA, footer, scroll reveal.
     - Guide-specific additions appended below:
       section utilities, guides hub grid, individual guide page
       (sidebar + article typography), mobile utilities.

   Keep in sync with:
     - index.html (class structure)
     - site/landing-shell.js (nav + footer injection, guide sidebar)
     - tokens.css (shared editor + marketing color/type tokens)
   ========================================================================== */

/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-page: #FAFAF8;
  --bg-white: #FFFFFF;
  --bg-dark: #1A1612;
  --bg-dark-card: #252019;
  --bg-accent-tint: #FFF7EE;
  --bg-muted: #F3F0EB;
  --text-primary: #1A1612;
  --text-secondary: #6B5D4F;
  --text-muted: #7A6E5F; /* WCAG AA: 4.8:1 on --bg-page, 5.0:1 on white */
  --text-inverse: #FAFAF8;
  --on-accent-ink: #1A1612; /* 7.3:1 on --accent; white was 2.45:1 */
  --link: #9C520D; /* 5.5:1 on --bg-page, 5.1:1 on --bg-muted */
  --link-hover: #7A3F08;
  --focus-ring: #101010;
  --accent: #E8913A;
  --accent-hover: #D4801F;
  --accent-glow: rgba(232, 145, 58, 0.15);
  --accent-light: #FFF3E6;
  --border: #E8E2DA;
  --border-light: #F0ECE6;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(26,22,18,0.04);
  --shadow-md: 0 4px 20px rgba(26,22,18,0.06);
  --shadow-lg: 0 12px 40px rgba(26,22,18,0.08);
  --shadow-hero: 0 20px 60px rgba(26,22,18,0.12);
  /* --font-heading and --font-body inherit from tokens.css (Nunito body, Bricolage display) */
  --max-width: 1200px;
  --nav-height: 64px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; }

h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.5vw, 48px); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 22px; font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }

.section-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 600px;
  font-weight: 400;
  line-height: 1.6;
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent-ink);
  box-shadow: 0 2px 8px rgba(232, 145, 58, 0.3);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232, 145, 58, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover {
  border-color: var(--text-secondary);
  background: var(--bg-muted);
}

.btn-dark {
  background: var(--bg-dark);
  color: var(--text-inverse);
}
.btn-dark:hover {
  background: #2C2418;
  transform: translateY(-1px);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 14px;
}

/* ========== NAV ========== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  border-bottom: 1px solid var(--border-light);
  z-index: 100;
  transition: box-shadow 0.3s;
}
/* backdrop-filter on ::before avoids creating a containing block
   for position:fixed descendants (the mobile nav overlay). */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(250, 250, 248, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: -1;
}
.nav.scrolled { box-shadow: var(--shadow-sm); }

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.nav-brand svg { width: 28px; height: 28px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-links > li { position: relative; }

.nav-links > li > a,
.nav-links > li > .nav-dropdown-trigger {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.15s;
  padding: 8px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}
.nav-links > li > a:hover,
.nav-links > li > .nav-dropdown-trigger:hover,
.nav-links > li.open > .nav-dropdown-trigger {
  color: var(--text-primary);
  background: var(--bg-muted);
}

.nav-chevron {
  width: 10px;
  height: 10px;
  border: none;
  display: inline-block;
  transition: transform 0.2s;
}
.nav-links > li.open .nav-chevron { transform: rotate(180deg); }

/* ========== MEGA DROPDOWN ========== */
.nav-mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 200;
  min-width: 480px;
}

.nav-mega.narrow { min-width: 240px; }

.nav-links > li.open .nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.nav-mega.narrow .nav-mega-grid {
  grid-template-columns: 1fr;
}

.nav-mega-item {
  display: flex;
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.15s;
  text-decoration: none;
  color: var(--text-primary);
}
.nav-mega-item:hover {
  background: var(--bg-muted);
}

.nav-mega-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.nav-mega-text { display: flex; flex-direction: column; }

.nav-mega-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.nav-mega-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 1px;
}

.nav-mega-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border-light);
  margin: 8px 0;
}

.nav-mega-section-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 4px 12px 2px;
}

/* Use Cases — single column with colored icons */
.nav-mega-item .persona-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.nav-cta { display: flex; align-items: center; gap: 12px; }

/* ========== HAMBURGER (mobile) ========== */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  border-radius: 4px;
  transition: transform 0.25s, opacity 0.25s;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-hamburger { display: flex; }

  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-page);
    flex-direction: column;
    padding: 24px 32px;
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 99;
  }
  .nav-links.mobile-open { display: flex; }

  .nav-links > li > a,
  .nav-links > li > .nav-dropdown-trigger {
    font-size: 17px;
    padding: 12px 0;
    width: 100%;
    justify-content: space-between;
  }

  .nav-mega {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 8px 0 8px 16px;
    min-width: unset;
    background: transparent;
  }
  .nav-links > li.open .nav-mega {
    transform: none;
  }
  .nav-mega-grid { grid-template-columns: 1fr; }

  .nav-cta {
    display: none;
    padding: 16px 32px;
    gap: 12px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-page);
    border-top: 1px solid var(--border-light);
    z-index: 99;
  }
  .nav-cta.mobile-open { display: flex; }
  .nav-cta .btn { flex: 1; justify-content: center; }
}

/* ========== HERO ========== */
.hero {
  padding-top: calc(var(--nav-height) + 80px);
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: -200px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(232,145,58,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-content { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}

.hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero h1 {
  margin-bottom: 20px;
  color: var(--text-primary);
  /* Larger than every section h2 (max 48px) at every width. The longest
     phrase ("Playtest without waiting.", about 11.2px per font-px) must fit
     the ~590px text column at desktop without wrapping. */
  font-size: clamp(29px, 4vw, 52px);
}

.hero h1 .accent { color: var(--accent); }

/* Each phrase renders on its own line and never breaks mid-phrase. */
.hero h1 .hero-line {
  display: block;
  white-space: nowrap;
}

/* On very narrow viewports allow phrases to wrap so they don't
   overflow the viewport. */
@media (max-width: 420px) {
  .hero h1 .hero-line { white-space: normal; }
}

.hero-desc {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 480px;
  font-weight: 400;
}

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Editor mockup */
.hero-visual {
  position: relative;
  z-index: 1;
}

.editor-mock {
  background: var(--bg-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-hero);
  border: 1px solid rgba(255,255,255,0.06);
}

.editor-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.editor-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.editor-dot.red { background: #FF6059; }
.editor-dot.yellow { background: #FFBD2E; }
.editor-dot.green { background: #28CA42; }

.editor-titlebar span {
  margin-left: auto;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-body);
}

.editor-body {
  display: grid;
  grid-template-columns: 48px 1fr 220px;
  height: 380px;
}

.editor-toolbar-mock {
  background: rgba(255,255,255,0.03);
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tool-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
}
.tool-icon.active {
  background: var(--accent);
  color: var(--on-accent-ink);
}

.editor-canvas-mock {
  background: #2C2418;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.editor-canvas-mock::before {
  content: '';
  position: absolute;
  inset: 20px;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 19px, rgba(255,255,255,0.02) 19px, rgba(255,255,255,0.02) 20px
  ),
  repeating-linear-gradient(
    90deg, transparent, transparent 19px, rgba(255,255,255,0.02) 19px, rgba(255,255,255,0.02) 20px
  );
}

/* Card being "designed" in the mock editor */
.mock-card {
  width: 180px;
  height: 260px;
  background: linear-gradient(135deg, #1B3A4B 0%, #2D5F74 100%);
  border-radius: 10px;
  padding: 16px;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}

.mock-card-header {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}

.mock-card-art {
  flex: 1;
  background: linear-gradient(180deg, #3D8DA6 0%, #1B5A6B 100%);
  border-radius: 6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mock-card-art::after {
  content: '';
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  position: absolute;
}

.mock-card-stats {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  font-weight: 600;
}

.mock-card-stat {
  background: rgba(255,255,255,0.12);
  padding: 4px 10px;
  border-radius: 4px;
}

/* Selection handles */
.mock-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--accent);
  border-radius: 12px;
  pointer-events: none;
}

.selection-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  border: 2px solid var(--accent);
  border-radius: 4px;
}
.handle-tl { top: -6px; left: -6px; }
.handle-tr { top: -6px; right: -6px; }
.handle-bl { bottom: -6px; left: -6px; }
.handle-br { bottom: -6px; right: -6px; }

.editor-props-mock {
  background: rgba(255,255,255,0.03);
  border-left: 1px solid rgba(255,255,255,0.06);
  padding: 16px;
  overflow: hidden;
}

.prop-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 8px;
  font-weight: 700;
}

.prop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.prop-label {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  width: 28px;
  flex-shrink: 0;
}

.prop-input {
  flex: 1;
  height: 26px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 0 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-body);
  display: flex;
  align-items: center;
}

.prop-color {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.prop-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 12px 0;
}

/* Floating CSV indicator on mock */
.mock-csv-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(40, 167, 69, 0.9);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

/* ========== TRUST BAR ========== */
.trust-bar {
  padding: 40px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-white);
}

.trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.trust-stat {
  text-align: center;
}

.trust-stat .number {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.trust-stat .label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
}

.trust-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* ========== PRODUCT SHOWCASE (Tabs) ========== */
.showcase {
  padding: 100px 0;
}

.showcase-header {
  text-align: center;
  margin-bottom: 48px;
}

.showcase-header h2 { margin-bottom: 12px; }
.showcase-header .section-subtitle { margin: 0 auto; }

.showcase-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 40px;
  background: var(--bg-muted);
  border-radius: var(--radius-pill);
  padding: 4px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.showcase-tab {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: transparent;
  font-family: var(--font-body);
}

.showcase-tab.active {
  background: var(--bg-white);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.showcase-tab:hover:not(.active) {
  color: var(--text-primary);
}

.showcase-panels { position: relative; }

.showcase-panel {
  display: none;
  gap: 48px;
  align-items: center;
}

.showcase-panel.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  animation: fadeUp 0.4s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.showcase-text h3 {
  font-size: 28px;
  margin-bottom: 12px;
}

.showcase-text p {
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.7;
}

.showcase-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.showcase-features li {
  display: flex;
  align-items: start;
  gap: 8px;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.showcase-features li > span:last-child { flex: 1; }

.showcase-features li .check {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.showcase-image {
  background: var(--bg-muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  position: relative;
}

/* Stylized preview panels */
.preview-visual {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Card editor preview */
.preview-editor {
  background: linear-gradient(135deg, #F7F5F2 0%, #EDE8E0 100%);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 24px;
  height: 100%;
  align-content: start;
}

.preview-minicard {
  background: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  aspect-ratio: 2.5/3.5;
  display: flex;
  flex-direction: column;
}

.preview-minicard-top {
  height: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.preview-minicard-art {
  flex: 1;
  border-radius: 4px;
  margin-bottom: 6px;
}

.preview-minicard-text {
  height: 4px;
  border-radius: 4px;
  background: #E0DCD6;
}
.preview-minicard-text + .preview-minicard-text { margin-top: 4px; width: 70%; }

/* CSV data preview */
.preview-csv {
  background: linear-gradient(135deg, #F0F7F0 0%, #E8F0E8 100%);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
}

.preview-csv-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr 0.8fr;
  gap: 2px;
  flex-shrink: 0;
}

.preview-csv-cell {
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-body);
}

.preview-csv-header .preview-csv-cell {
  background: #2D6B3F;
  color: white;
}

.preview-csv-data .preview-csv-cell {
  background: rgba(255,255,255,0.7);
  color: #4A7A56;
}

.preview-csv-data:nth-child(odd) .preview-csv-cell {
  background: rgba(255,255,255,0.45);
}

.preview-csv-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2D6B3F;
  font-size: 24px;
  font-weight: 700;
  padding: 12px 0;
  flex-shrink: 0;
}

/* Generator preview */
.preview-generators {
  background: linear-gradient(135deg, #F5F0FA 0%, #EBE4F5 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 24px;
  height: 100%;
  align-content: center;
}

.preview-gen-item {
  background: white;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.preview-gen-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.preview-gen-label {
  font-size: 11px;
  font-weight: 700;
  color: #5B4A8A;
  text-align: center;
}

/* Export preview */
.preview-export {
  background: linear-gradient(135deg, #FFF5EB 0%, #FFECD6 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  height: 100%;
}

.preview-export-formats {
  display: flex;
  gap: 12px;
}

.preview-format-card {
  background: white;
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.preview-format-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.preview-format-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* ========== HOW IT WORKS ========== */
.how-it-works {
  padding: 100px 0;
  background: var(--bg-white);
}

.how-header {
  text-align: center;
  margin-bottom: 64px;
}

.how-header h2 { margin-bottom: 12px; }
.how-header .section-subtitle { margin: 0 auto; }

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}

/* Connection line */
.how-steps::before {
  content: '';
  position: absolute;
  top: 36px;
  left: calc(16.66% + 36px);
  right: calc(16.66% + 36px);
  height: 2px;
  background: var(--border);
  z-index: 0;
}

.how-step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.step-number {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border: 3px solid var(--bg-white);
}

.how-step h3 {
  margin-bottom: 8px;
}

.how-step p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto;
}
.how-step-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.how-step-link:hover { text-decoration: underline; }

/* ========== WHO IT'S FOR ========== */
.personas {
  padding: 100px 0;
}

.personas-header {
  text-align: center;
  margin-bottom: 48px;
}

.personas-header h2 { margin-bottom: 12px; }
.personas-header .section-subtitle { margin: 0 auto; }

.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.persona-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all 0.25s ease;
}

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

.persona-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
}

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

.persona-card p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.persona-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.15s;
}
.persona-link:hover { gap: 8px; }

/* ========== TESTIMONIAL ========== */
.testimonial {
  padding: 80px 0;
  background: var(--bg-white);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.testimonial-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.testimonial-quote-mark {
  font-size: 64px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.4;
  font-family: Georgia, serif;
  margin-bottom: -8px;
}

.testimonial-text {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-heading);
}

.testimonial-meta {
  text-align: left;
}

.testimonial-name {
  font-size: 15px;
  font-weight: 700;
}

.testimonial-role {
  font-size: 13px;
  color: var(--text-muted);
}

/* ========== WHY CHITMUNK (Comparison) ========== */
.comparison {
  padding: 100px 0;
}

.comparison-header {
  text-align: center;
  margin-bottom: 48px;
}

.comparison-header h2 { margin-bottom: 12px; }
.comparison-header .section-subtitle { margin: 0 auto; }

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.comparison-col {
  border-radius: var(--radius-lg);
  padding: 32px;
}

.comparison-col.without {
  background: #F8F5F2;
  border: 1px solid var(--border);
}

.comparison-col.with {
  background: var(--accent-light);
  border: 1px solid rgba(232, 145, 58, 0.25);
}

.comparison-col-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.without .comparison-col-title { color: var(--text-muted); }
.with .comparison-col-title { color: var(--accent); }

.comparison-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comparison-list li {
  display: flex;
  align-items: start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}
.comparison-list li > span:last-child { flex: 1; }

.without .comparison-list li { color: var(--text-secondary); }
.with .comparison-list li { color: var(--text-primary); }

.comparison-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}

.without .comparison-icon {
  background: #E8E2DA;
  color: var(--text-muted);
}

.with .comparison-icon {
  background: var(--accent);
  color: var(--on-accent-ink);
}

/* ========== PRICING ========== */
.pricing {
  padding: 100px 0;
  background: var(--bg-white);
}

.pricing-header {
  text-align: center;
  margin-bottom: 48px;
}

.pricing-header h2 { margin-bottom: 12px; }
.pricing-header .section-subtitle { margin: 0 auto; }

/* Billing toggle */
.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.billing-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.2s;
}
.billing-label.active { color: var(--text-primary); }

.toggle-track {
  width: 48px;
  height: 26px;
  background: var(--accent);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-dot {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.toggle-track.annual .toggle-dot { transform: translateX(22px); }

.save-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.pricing-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  transition: all 0.25s;
}

.pricing-card:hover {
  box-shadow: var(--shadow-md);
}

.pricing-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
  position: relative;
}

.pricing-popular {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent-ink);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--on-accent-ink);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pricing-tier {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.pricing-price {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.pricing-period {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.pricing-desc {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.6;
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.pricing-features li {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-left: 24px;
  position: relative;
}

.pricing-features .check {
  color: var(--accent);
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}

.pricing-card .btn { width: 100%; justify-content: center; }

.pricing-note {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ========== FINAL CTA ========== */
.final-cta {
  padding: 100px 0;
  text-align: center;
  background: var(--bg-dark);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(circle, rgba(232,145,58,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.final-cta h2 {
  color: var(--text-inverse);
  margin-bottom: 16px;
  position: relative;
}

.final-cta p {
  color: rgba(250,250,248,0.6);
  font-size: 18px;
  margin-bottom: 32px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.final-cta .btn-primary { position: relative; }

.final-cta-links {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 32px;
  position: relative;
}

.final-cta-links a {
  font-size: 14px;
  color: rgba(250,250,248,0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s;
}

.final-cta-links a:hover { color: rgba(250,250,248,0.8); }

/* ========== FOOTER ========== */
.footer {
  background: var(--bg-dark);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 64px 0 32px;
  color: rgba(250,250,248,0.5);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-brand .nav-brand { color: var(--text-inverse); }

.footer-tagline {
  font-size: 14px;
  color: rgba(250,250,248,0.6);
}

.footer-col h4 {
  color: rgba(250,250,248,0.8);
  font-size: 14px;
  margin-bottom: 16px;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.footer-col a {
  font-size: 14px;
  color: rgba(250,250,248,0.6);
  transition: color 0.15s;
}
.footer-col a:hover { color: rgba(250,250,248,0.9); }

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.footer-bottom a { line-height: inherit; }

/* ========== SCROLL REVEAL ========== */
/* Canonical reveal rules live in the second block at line ~2208.
   The legacy `.reveal { opacity: 0 }` + `.reveal.visible` pattern was
   removed in the UX-review-2026-05-25 pass — that pattern hid content
   from crawlers, slow JS, and full-page screenshot tools. Kept here as
   a placeholder so the section index stays referenceable. */

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-content { text-align: center; }
  .hero-desc { margin: 0 auto 32px; }
  .hero-ctas { justify-content: center; }
  .hero-note { text-align: center; }
  .persona-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .comparison-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .how-steps { grid-template-columns: 1fr; gap: 40px; }
  .how-steps::before { display: none; }
  .showcase-tabs { flex-wrap: wrap; border-radius: var(--radius); }
  .showcase-panel.active { grid-template-columns: 1fr; }
  .trust-inner { gap: 24px; }
  .trust-divider { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .editor-body { grid-template-columns: 1fr; height: auto; }
  .editor-toolbar-mock, .editor-props-mock { display: none; }
  .editor-canvas-mock { min-height: 280px; }
}

@media (max-width: 640px) {
  /* Demo spreadsheet: truncate long names with ellipsis instead of
     clipping mid-word ("Fire Dragc"). */
  .demo-table .demo-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Showcase screenshots (e.g. "spreadsheet becomes a deck"): cover-fit
     crops both edges on narrow screens — show the full image instead.
     !important needed to beat the inline object-fit:cover. */
  .showcase-image { aspect-ratio: auto; }
  .showcase-image img {
    max-width: 100%;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* ==========================================================================
   SHARED UTILITIES AND GUIDE PAGES
   (merged from the pre-rewrite landing.css — these were used by other
   marketing pages and the guides hub + guide article layout)
   ========================================================================== */

/* Aliases for the `-landing`-suffixed custom properties used by the guide
   sections below. The Architecture 2 rewrite (:root above) declares the
   canonical names without suffix; aliases map the old names to the new. */
:root {
  --border-landing: var(--border);
  --border-light-landing: var(--border-light);
  --radius-landing: var(--radius);
  --shadow-sm-landing: var(--shadow-sm);
  --shadow-md-landing: var(--shadow-md);
  --shadow-lg-landing: var(--shadow-lg);
}

/* ========== GENERIC CONTENT SECTIONS ==========
   Used by /brand, /blog, /card-sizes, etc. (the index.html Architecture 2
   rewrite uses its own <section class="hero/showcase/pricing/..."> layouts
   declared above.) Vertical landing pages (/for/*) have a body.vertical-page
   .section override in site.css that takes precedence. */
.section {
  padding: 80px 32px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.section-wide { max-width: 1200px; }
.section-center { text-align: center; }
.section-center .section-desc { margin-left: auto; margin-right: auto; }

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text-primary);
}
.section-desc {
  color: var(--text-secondary);
  font-size: 17px;
  max-width: 600px;
  margin-bottom: 48px;
  line-height: 1.6;
}

/* ========== GUIDES HUB (guides/index.html) ========== */
.guides-hero {
  padding-top: calc(var(--nav-height) + 80px);
  padding-bottom: 56px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.guides-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: -200px;
  width: 800px;
  height: 600px;
  background: radial-gradient(circle, rgba(232,145,58,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.guides-hero h1 { margin: 0 0 16px; }
.guides-hero .section-subtitle { margin: 0 auto; }

.guides-main { padding: 24px 0 100px; }

.guide-category { margin-bottom: 64px; }
.guide-category:last-child { margin-bottom: 0; }

.guide-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-landing);
  gap: 24px;
  flex-wrap: wrap;
}
.guide-category-head h2 {
  font-size: 28px;
  color: var(--text-primary);
  margin: 0;
}
.guide-category-head .count {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

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

.guide-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--radius-landing);
  background: var(--bg-white);
  border: 1px solid var(--border-landing);
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
}
.guide-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.guide-card:hover {
  border-color: var(--border-landing);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md-landing);
  color: var(--text-primary);
}
.guide-card:hover::before { transform: scaleX(1); }

.guide-card-level {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-light);
  color: var(--accent);
  margin-bottom: 12px;
  align-self: flex-start;
}
.guide-card-level.level-intermediate { background: #EBF5FF; color: #2B6CB0; }
.guide-card-level.level-advanced { background: #F5EBF8; color: #6B46C1; }

.guide-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text-primary);
  font-family: var(--font-heading);
}
.guide-card p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}
.guide-card .read-more {
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Category-colored visual band at the top of each guide card */
.guide-card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  flex: none;
  margin: -24px -24px 16px;
  border-bottom: 1px solid var(--border-landing);
}
.guide-card-visual svg { display: block; }
.gcv-start    { background: #FFF3E6; color: #B96A1B; }
.gcv-style    { background: #FBEDEA; color: #B94A3E; }
.gcv-data     { background: #EBF5FF; color: #2B6CB0; }
.gcv-tools    { background: #EAF5EC; color: #2F7A4D; }
.gcv-design   { background: #F5EBF8; color: #6B46C1; }
.gcv-playtest { background: #E8F4F4; color: #23787A; }
.gcv-publish  { background: #F3EFE9; color: #6B5B45; }

/* ========== BLOG ========== */
.blog-featured-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  margin-bottom: 32px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  transition: box-shadow 0.2s, transform 0.2s;
}
.blog-featured-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.blog-featured-visual {
  background: linear-gradient(135deg, #FDF3E7, #F5E2C8);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.blog-featured-content {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-featured-content h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.25;
}
.blog-featured-content p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.blog-meta {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}
@media (max-width: 700px) {
  .blog-featured-card { grid-template-columns: 1fr; }
  .blog-featured-visual { min-height: 120px; }
  .blog-featured-visual { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ========== INDIVIDUAL GUIDE PAGE (guides/*.html) ========== */
.guide-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--nav-height) + 56px) 32px 80px;
}

.guide-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  align-self: start;
  max-height: calc(100vh - var(--nav-height) - 48px);
  overflow-y: auto;
  padding-right: 8px;
}
.guide-sidebar h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 24px 0 8px;
  font-family: var(--font-body);
  font-weight: 700;
}
.guide-sidebar h4:first-child { margin-top: 0; }
.guide-sidebar a {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.guide-sidebar a:hover {
  color: var(--text-primary);
  background: var(--bg-muted);
}
.guide-sidebar a.active {
  color: var(--link);
  border-left-color: var(--accent);
  background: var(--accent-light);
  font-weight: 600;
}

/* Phones/small tablets: collapse to a single column. In-page nav is covered
   by the auto-generated .guide-toc, so the 32-link sidebar is hidden. */
@media (max-width: 860px) {
  .guide-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: calc(var(--nav-height) + 32px) 20px 64px;
  }
  .guide-sidebar { display: none; }
}

.guide-content { min-width: 0; max-width: 72ch; }

.guide-content h1 {
  font-size: clamp(32px, 4vw, 44px);
  margin: 0 0 12px;
  color: var(--text-primary);
}
.guide-content .guide-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.guide-content h2 {
  font-size: 28px;
  margin: 48px 0 16px;
  padding-top: 32px;
  border-top: 1px solid var(--border-landing);
  color: var(--text-primary);
}
.guide-content h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 32px;
}
.guide-content h3 {
  font-size: 20px;
  margin: 32px 0 12px;
  color: var(--text-primary);
}
.guide-content p {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
}
.guide-content strong { color: var(--text-primary); font-weight: 700; }
.guide-content a:not(.btn, .guide-toc a, .crumbs a) {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.guide-content a:not(.btn, .guide-toc a, .crumbs a):hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.guide-content ul, .guide-content ol {
  margin: 0 0 16px;
  padding-left: 24px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
}
.guide-content li { margin-bottom: 8px; }

.guide-content code {
  background: var(--bg-muted);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  color: var(--accent);
  border: 1px solid var(--border-light-landing);
}
.guide-content pre {
  background: var(--bg-dark);
  border-radius: var(--radius-landing);
  padding: 20px 24px;
  overflow-x: auto;
  margin: 0 0 20px;
}
.guide-content pre code {
  background: none;
  padding: 0;
  border: none;
  font-size: 13px;
  color: #E8E2DA;
}

/* End-of-page CTA card — used on guides, blog index, anywhere a content
   block needs a "next step" panel. Replaces ~30 inline-styled copies. */
.cta-card,
.guide-cta {
  margin-top: 48px;
  padding: 32px;
  background: var(--accent-glow);
  border-radius: var(--radius-landing);
  text-align: center;
}
.cta-card h2,
.guide-cta h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  border-top: none;
  padding-top: 0;
}
.cta-card p,
.guide-cta p {
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.cta-card .btn,
.guide-cta .btn {
  border-radius: var(--radius-button);
}

/* Hero variants. .hero--centered: single-column, no visual.
   Used by /for/* outros, blog index, error pages, etc. */
.hero--centered {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: calc(var(--nav-height) + 80px) 32px 64px;
}
.hero--centered h1 {
  margin-bottom: 16px;
}
.hero--centered .hero-sub,
.hero--centered .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* .feature-card and friends are defined in the "Migrated from site.css"
   section near the bottom of this file. The /for/* persona pages use the
   feature-card-header + feature-icon + h3 + p structure. */

/* Callouts: tip (amber), note (green), warning (red).
   Use .tip for friendly hints, .note for important factual notices,
   .warning for destructive or irreversible actions. */
.guide-content .tip,
.guide-content .note,
.guide-content .warning {
  padding: 20px 24px;
  border-radius: var(--radius-landing);
  margin: 0 0 20px;
  border-left: 4px solid;
}
.guide-content .tip p,
.guide-content .note p,
.guide-content .warning p { margin: 0; color: var(--text-primary); }
.guide-content .tip p + p,
.guide-content .note p + p,
.guide-content .warning p + p { margin-top: 8px; }

.guide-content .tip {
  background: var(--accent-light);
  border-left-color: var(--accent);
}
.guide-content .tip strong { color: var(--accent); }

.guide-content .note {
  background: rgba(40, 167, 69, 0.08);
  border-left-color: #1F8C3D;
}
.guide-content .note strong { color: #1F8C3D; }

.guide-content .warning {
  background: rgba(220, 53, 69, 0.08);
  border-left-color: #C62A3B;
}
.guide-content .warning strong { color: #C62A3B; }

.guide-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14px;
  background: var(--bg-white);
  border-radius: var(--radius-landing);
  overflow: hidden;
  border: 1px solid var(--border-landing);
}
.guide-content th, .guide-content td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light-landing);
  text-align: left;
}
.guide-content th {
  background: var(--bg-muted);
  font-weight: 700;
  color: var(--text-primary);
}
.guide-content td { color: var(--text-secondary); }
.guide-content tr:last-child td { border-bottom: none; }

.guide-content kbd {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-white);
  border: 1px solid var(--border-landing);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: 0 1px 0 var(--border-landing);
}
/* ========== SCROLL REVEAL (shared across landing + vertical pages) ========== */
/* Polarity-safe reveal — UX review 2026-05-25 (M-1).
   Every .reveal is simply visible. The scroll fade was removed 2026-10-15
   (motion is a known weakness); the class stays so existing markup is harmless. */
.reveal { opacity: 1; transform: none; }

/* ========== MOBILE UTILITIES ========== */
.mobile-only { display: none; }
.hide-mobile {}
.mobile-cta-note {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 600;
}
@media (max-width: 768px) {
  .mobile-only { display: inline; }
  .hide-mobile { display: none !important; }
}

/* ==========================================================================
   ════════════════════ MIGRATED FROM site.css (2026-05-08) ═════════════════
   These rules were ported wholesale from the legacy /site/site.css so it can
   be archived. Unique tokens (--max-w → --max-width, --nav-h → --nav-height)
   were canonicalized. Orphaned shell classes (.site-nav, .site-footer*) were
   dropped — landing-shell.js renders .nav and .footer instead.
   ========================================================================== */

/* ── Hero (centered, gradient bg, floating cards) ──
   These rules came from legacy /site/site.css and apply to /for/* and /tools/*
   single-column heroes. They are SCOPED away from the homepage hero (which uses
   a two-column .hero-grid layout — canonical rules at line ~432). */
.hero:not(:has(.hero-grid)) {
  padding: calc(var(--nav-height) + 80px) 32px 80px;
  text-align: center;
  max-width: 800px; margin: 0 auto;
  position: relative;
  overflow: visible;
}
.hero:not(:has(.hero-grid))::before {
  content: '';
  position: absolute;
  inset: -60px -200px;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(232,145,58,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 30% 60%, rgba(232,100,58,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 70% 30%, rgba(240,176,96,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.hero-float-cards { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hero-float-card {
  position: absolute;
  width: 110px; height: 150px;
  border-radius: 10px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0.6;
}
.hfc-inner { padding: 10px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.hfc-title { font-size: 9px; font-weight: 700; color: var(--text-primary); text-align: center; margin-bottom: 4px; white-space: nowrap; }
.hfc-art { font-size: 36px; flex: 1; display: flex; align-items: center; justify-content: center; line-height: 1; }
.hfc-stats { display: flex; justify-content: space-between; width: 100%; font-size: 8px; font-weight: 700; color: var(--accent); }
.hfc-1 { top: 15%; left: -8%; transform: rotate(-12deg); }
.hfc-2 { top: 10%; right: -6%; transform: rotate(8deg); }
.hfc-3 { bottom: 8%; left: -4%; transform: rotate(-6deg); }
.hfc-4 { bottom: 5%; right: -9%; transform: rotate(15deg); }
@media (max-width: 900px) { .hero-float-cards { display: none; } }

.hero:not(:has(.hero-grid)) .hero-badge {
  display: inline-block; padding: 4px 14px; border-radius: 20px;
  background: var(--accent-glow); color: var(--accent);
  font-size: 13px; font-weight: 700; margin-bottom: 20px;
  border: 1px solid rgba(232,145,58,0.25);
}
.hero:not(:has(.hero-grid)) h1 { font-family: var(--font-heading); font-size: clamp(36px, 6vw, 56px); margin-bottom: 16px; letter-spacing: -0.02em; }
.hero:not(:has(.hero-grid)) h1 .accent { color: var(--accent); }
.hero-sub {
  font-size: clamp(16px, 2.5vw, 20px); color: var(--text-secondary);
  max-width: 560px; margin: 0 auto 32px;
}
.hero:not(:has(.hero-grid)) .hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Monolithic .btn-primary / .btn-secondary used by /for/*, /tools/*, blog post buttons.
      DIFFERENT from .btn .btn-primary modular form (canonical in landing.css ~line 100). ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: var(--radius-button);
  background: var(--accent); color: var(--on-accent-ink);
  font-size: 16px; font-weight: 700; border: none; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
}
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent-ink); transform: translateY(-1px); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: var(--radius-button);
  background: transparent; color: var(--text-primary);
  font-size: 16px; font-weight: 700; border: 1px solid var(--border-light); cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.hero-screenshot {
  margin: 48px auto 0; max-width: 900px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* ── Section primitives (used across /for/*, /blog, /tools/*) ── */
.section { padding: 80px 32px; max-width: var(--max-width); margin: 0 auto; }
.section-wide { max-width: 1200px; }
.section-label {
  display: inline-block; font-size: 13px; font-weight: 700;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.section-title { font-family: var(--font-heading); font-size: clamp(28px, 4vw, 40px); margin-bottom: 16px; letter-spacing: -0.01em; font-weight: 800; }
.section-desc { color: var(--text-secondary); font-size: 17px; max-width: 600px; margin-bottom: 48px; }
.section-center { text-align: center; }
.section-center .section-desc { margin-left: auto; margin-right: auto; }

/* ── Feature grid + cards ── */
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.bento-grid { grid-template-columns: repeat(3, 1fr); }
.bento-wide { grid-column: span 2; }
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-wide { grid-column: span 1; }
}
.feature-card {
  padding: 28px; border-radius: var(--radius-lg);
  background: var(--bg-white); border: 1px solid var(--border);
  transition: border-color 0.2s, transform 0.35s ease, box-shadow 0.3s ease;
}
.feature-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.feature-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.feature-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--accent-glow); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.feature-card h3 { font-family: var(--font-heading); font-size: 17px; margin: 0; }
.feature-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.feature-card-link {
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  margin-top: 8px;
  display: inline-block;
}
.feature-card-link:hover { text-decoration: underline; }

/* ── Steps (3-up "How it works" pattern) ── */
.steps { display: flex; gap: 32px; counter-reset: step; }
.step {
  flex: 1; position: relative; padding: 28px; border-radius: var(--radius-lg);
  background: var(--bg-white); border: 1px solid var(--border);
  counter-increment: step;
}
.step::before {
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent-ink);
  font-size: 16px; font-weight: 800; margin-bottom: 16px;
}
.step h3 { font-family: var(--font-heading); font-size: 17px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--text-secondary); }
@media (max-width: 768px) { .steps { flex-direction: column; } }

/* ── Comparison table (vs.-other-tools section) ── */
.compare-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 500px; }
.compare-table th, .compare-table td {
  padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--border);
  width: 50%;
}
.compare-table th {
  background: var(--bg-muted); font-weight: 700; color: var(--text-primary);
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;
}
.compare-table td:first-child { color: var(--text-secondary); }
.compare-table td { color: var(--text-primary); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:hover td { background: var(--bg-muted); }
.compare-table .highlight { background: rgba(232,145,58,0.06); }
.compare-table .highlight th { color: var(--accent); }
.check { color: #1F8C3D; font-weight: 700; }
.cross { color: #C62A3B; opacity: 0.7; }
.partial { color: var(--text-muted); }
.compare-table .highlight .check { color: var(--accent); }
.compare-mobile { display: none; }
@media (max-width: 768px) {
  .compare-table-wrap { display: none; }
  .compare-mobile {
    display: flex; flex-direction: column; gap: 12px;
    max-width: 400px; margin: 0 auto;
  }
  .compare-mobile-item {
    display: flex; align-items: baseline; gap: 10px;
    font-size: 15px; color: var(--text-primary);
  }
  .compare-mobile-item .check { font-size: 16px; flex-shrink: 0; }
  .compare-mobile-item span { color: var(--text-secondary); font-size: 13px; }
}

/* ── Stats bar (the horizontal stats row used on /for/* + /tools/*) ── */
.stats-bar {
  display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
  padding: 48px 32px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat { text-align: center; }
.stat-num { font-family: var(--font-heading); font-size: 36px; font-weight: 800; color: var(--text-primary); }
.stat-label { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
@media (max-width: 768px) { .stats-bar { gap: 24px; } }

/* ── Pricing card family (used by /for/* — distinct from pricing.html's .plan-card) ── */
.pricing-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 960px; margin: 0 auto;
}
.pricing-card {
  padding: 32px 28px; border-radius: var(--radius-lg);
  background: var(--bg-white); border: 1px solid var(--border);
  display: flex; flex-direction: column; text-align: left;
  position: relative;
}
.pricing-card-free { opacity: 0.95; }
.pricing-card-pro {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(232,145,58,0.1);
  transform: scale(1.03);
}
.pricing-card-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--on-accent-ink);
  font-size: 11px; font-weight: 700; padding: 4px 14px;
  border-radius: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.pricing-card-header { margin-bottom: 20px; }
.pricing-card-header h3 { font-family: var(--font-heading); font-size: 18px; margin-bottom: 8px; }
.pricing-price { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.pricing-price span { font-size: 16px; font-weight: 400; color: var(--text-secondary); }
.pricing-period { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.pricing-features li {
  font-size: 14px; color: var(--text-secondary); padding: 5px 0;
  padding-left: 20px; position: relative;
}
.pricing-features li::before {
  content: '\2713'; position: absolute; left: 0;
  color: var(--accent); font-weight: 700; font-size: 13px;
}
.pricing-features li strong { color: var(--text-primary); }
.pricing-features li:has(strong)::before { content: ''; }
.pricing-cta {
  display: block; text-align: center; padding: 12px;
  border-radius: var(--radius-button); font-size: 15px; font-weight: 700;
  transition: background 0.15s, transform 0.1s; text-decoration: none;
}
.pricing-cta-primary { background: var(--accent); color: var(--on-accent-ink); }
.pricing-cta-primary:hover { background: var(--accent-hover); color: var(--on-accent-ink); transform: translateY(-1px); }
.pricing-cta-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-light); }
.pricing-cta-secondary:hover { border-color: var(--accent); color: var(--accent); }
.pricing-cta-alt {
  display: block; text-align: center; margin-top: 10px;
  font-size: 13px; color: var(--text-muted);
  transition: color 0.15s;
}
.pricing-cta-alt:hover { color: var(--accent); }
@media (max-width: 860px) {
  .pricing-cards { grid-template-columns: 1fr; max-width: 380px; }
}

/* ── CTA banner (full-width "Your next X starts here." block) ── */
.cta-banner {
  text-align: center; padding: 80px 32px;
  background: linear-gradient(180deg, transparent, var(--accent-glow));
}
.cta-banner h2 { font-family: var(--font-heading); font-size: clamp(24px, 4vw, 36px); margin-bottom: 12px; font-weight: 800; }
.cta-banner p { color: var(--text-secondary); font-size: 17px; margin-bottom: 28px; }

/* ── Reference page tables (card-sizes) ── */
.ref-table-wrap { overflow-x: auto; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ref-table th, .ref-table td { padding: 8px 12px; border: 1px solid var(--border); }
.ref-table th { background: var(--bg-muted); font-weight: 700; color: var(--text-primary); position: sticky; top: 0; }
.ref-table td { color: var(--text-secondary); }
.ref-table tr:hover td { background: var(--bg-muted); }
.ref-table .cat-row td {
  background: var(--accent-glow); color: var(--accent);
  font-weight: 700; border-color: var(--border);
}

/* ── Legal page wrapper (terms, privacy, contact's body) ── */
.legal-page {
  max-width: 720px; margin: 0 auto;
  padding: calc(var(--nav-height) + 40px) 32px 80px;
}
.legal-page h1 { font-family: var(--font-heading); font-size: 32px; margin-bottom: 8px; }
.legal-page .legal-date { font-size: 13px; color: var(--text-secondary); margin-bottom: 32px; }
.legal-page h2 { font-family: var(--font-heading); font-size: 20px; margin-top: 40px; margin-bottom: 12px; }
.legal-page p, .legal-page li {
  font-size: 15px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.7;
}
.legal-page ul, .legal-page ol { padding-left: 24px; }
.legal-page a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.legal-page a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.legal-page h3 { font-family: var(--font-heading); font-size: 17px; margin-top: 28px; margin-bottom: 8px; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; }
.legal-page th, .legal-page td {
  text-align: left; padding: 10px 12px; border: 1px solid var(--border);
  color: var(--text-secondary); line-height: 1.6; vertical-align: top;
}
.legal-page th {
  background: var(--bg-muted); font-weight: 700;
  color: var(--text-primary); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.03em;
}
.legal-page td code {
  background: var(--bg-muted); padding: 2px 5px; border-radius: 4px;
  font-size: 13px;
}
@media (max-width: 600px) {
  .legal-page table { font-size: 13px; display: block; overflow-x: auto; }
  .legal-page th, .legal-page td { padding: 8px; }
}

/* ── Feature carousel (used by homepage Showcase tabs etc) ── */
.feature-carousel {
  max-width: 800px; margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  position: relative;
}
.carousel-track { position: relative; width: 100%; aspect-ratio: 16/9.5; overflow: hidden; }
.carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.carousel-slide.active { opacity: 1; z-index: 1; }
.carousel-slide img { width: 100%; height: 100%; object-fit: contain; display: block; background: #111; }
.carousel-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px 20px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85) 40%);
  color: #fff;
}
.carousel-caption h4 { font-family: var(--font-heading); font-size: 15px; font-weight: 800; margin: 0 0 2px; color: #fff; }
.carousel-caption p { font-size: 12px; margin: 0; color: rgba(255,255,255,0.8); line-height: 1.4; }
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-60%);
  z-index: 5; width: 36px; height: 36px;
  border-radius: 50%; border: none;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }
.carousel-btn:hover { background: rgba(0,0,0,0.75); }
.carousel-dots { display: flex; gap: 6px; justify-content: center; padding: 10px 0; background: var(--bg-white); }
.carousel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: none; background: var(--border);
  cursor: pointer; padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.carousel-dot.active { background: var(--accent); transform: scale(1.3); }

/* ── Generator showcase grid (used on /tools/* sidebar) ── */
.gen-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: var(--max-width);
}
.gen-showcase-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0 0 16px;
  overflow: hidden;
  text-align: center;
  transition: border-color 0.2s, transform 0.35s ease, box-shadow 0.3s ease;
}
.gen-showcase-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.gen-showcase-preview {
  width: 100%; height: 140px; display: block;
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.gen-showcase-card h4 { font-family: var(--font-heading); font-size: 15px; margin: 12px 16px 4px; color: var(--text-primary); }
.gen-showcase-card p { font-size: 13px; color: var(--text-secondary); margin: 0 16px; line-height: 1.4; }
@media (max-width: 900px) { .gen-showcase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gen-showcase-grid { grid-template-columns: 1fr; } }

/* ── Mobile reveal helpers (also defined above; reasserted for parity) ── */
@media (max-width: 768px) {
  .hero { padding-top: calc(var(--nav-height) + 48px); padding-bottom: 48px; }
  .section { padding: 48px 20px; }
}

/* ==========================================================================
   ════════════════════ PRICING PAGE (was inline in pricing.html) ═══════════
   ========================================================================== */

.pricing-page-hero {
  padding: 120px 0 60px;
  text-align: center;
  background: var(--bg-white);
}
.pricing-page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
}
.pricing-page-hero .subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Tier cards (compact pricing cards on this page) ── */
.pricing-cards-section { padding: 0 0 80px; background: var(--bg-white); }
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.plan-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.25s;
}
.plan-card:hover { box-shadow: var(--shadow-md); }
.plan-card .plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.plan-card .plan-tier {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.plan-card .plan-price {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.plan-card .plan-period {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.plan-card .plan-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}
.plan-card .plan-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
}
.plan-card .plan-features li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
.plan-card .plan-features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}
.plan-card .btn { width: 100%; justify-content: center; }

.plan-card--common  { border-color: var(--accent);     box-shadow: 0 0 0 1px var(--accent),     var(--shadow-sm); }
.plan-card--common  .plan-badge { background: var(--accent); color: var(--on-accent-ink); }
.plan-card--common  .plan-tier  { color: var(--link); }

.plan-card--rare    { border-color: var(--tier-rare);  box-shadow: 0 0 0 1px var(--tier-rare),  var(--shadow-sm); }
.plan-card--rare    .plan-badge { background: var(--tier-rare); color: var(--on-accent-ink); }
.plan-card--rare    .plan-tier  { color: #1A6FBF; } /* 5.2:1 on white; the fill blue is 2.8:1 */

/* legendary: internal ID kept for backward-compat; display name is "Epic" */
.plan-card--epic { border-color: var(--tier-epic); box-shadow: 0 0 0 1px var(--tier-epic), var(--shadow-sm); }
.plan-card--epic .plan-badge { background: var(--tier-epic-strong); color: #fff; } /* 5.7:1 */
.plan-card--epic .plan-tier  { color: var(--tier-epic-strong); }

.plan-popular {
  display: inline-block;
  background: var(--tier-rare-bg);
  color: #16609F; /* 5.9:1 on the tint */
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

/* ── Comparison table ── */
.comparison-section {
  padding: 80px 0;
  background: var(--bg-page);
}
.comparison-section h2 {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 48px;
}
.comparison-section .compare-table-wrap {
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0;
  border: none;
}
.scroll-hint {
  display: none;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.comparison-section .compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  min-width: 700px;
}
.comparison-section .compare-table thead th {
  position: sticky;
  top: var(--nav-height);
  z-index: 10;
  background: var(--bg-page);
  padding: 16px 20px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 2px solid var(--border);
}
.comparison-section .compare-table thead th:first-child {
  text-align: left;
  font-size: 14px;
  color: var(--text-muted);
  position: relative;
}
.comparison-section .compare-table thead .th-price {
  font-family: var(--font-heading);
  font-size: 20px;
  display: block;
  margin-top: 2px;
}
.comparison-section .compare-table thead .th-tier {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.comparison-section .compare-table thead .th-billing {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}
.col-common    { color: var(--accent); }
.col-rare      { color: var(--tier-rare); }
.col-epic { color: var(--tier-epic); }

.comparison-section .compare-table .cat-row td,
.comparison-section .compare-table .cat-row th {
  padding: 20px 20px 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-page);
}
.comparison-section .compare-table tbody td {
  padding: 12px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  vertical-align: middle;
}
.comparison-section .compare-table tbody td:first-child {
  text-align: left;
  color: var(--text-primary);
  font-weight: 500;
  position: relative;
}
.comparison-section .compare-table tbody tr:hover td {
  background: rgba(232, 145, 58, 0.04);
}

.cmp-yes { color: var(--accent); font-size: 18px; font-weight: 700; }
.cmp-no  { color: var(--text-muted); font-size: 16px; opacity: 0.4; }
.cmp-val { font-weight: 600; color: var(--text-primary); }

.comparison-section .compare-table .cta-row td {
  padding: 24px 20px;
  border-bottom: none;
  background: var(--bg-page);
}
.cta-row .btn {
  font-size: 13px;
  padding: 10px 18px;
  min-height: 42px;
  white-space: nowrap;
  min-width: 140px;
  justify-content: center;
  box-sizing: border-box;
}

/* ── FAQ grid ── */
.faq-section {
  padding: 80px 0 100px;
  background: var(--bg-white);
}
.faq-section h2 {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 48px;
}
.faq-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
}
.faq-item h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.faq-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── Bottom CTA on pricing page ── */
.pricing-bottom-cta {
  padding: 60px 0 80px;
  text-align: center;
  background: var(--bg-page);
}
.pricing-bottom-cta p {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* ── Pricing page responsive ── */
@media (max-width: 1024px) {
  .pricing-cards-grid { grid-template-columns: repeat(2, 1fr); max-width: 600px; }
}
@media (max-width: 768px) {
  .pricing-cards-grid { grid-template-columns: 1fr; max-width: 400px; }
  .faq-grid { grid-template-columns: 1fr; }
  /* The generic compare-section rule (~line 2453) hides .compare-table-wrap
     on mobile because /compare pages render a .compare-mobile alternative.
     The pricing page has no alternative — keep its table visible. */
  .comparison-section .compare-table-wrap { display: block; }
  .scroll-hint { display: block; }
  .comparison-section .compare-table thead th { top: var(--nav-height); font-size: 13px; padding: 12px 12px; }
  .comparison-section .compare-table tbody td { padding: 10px 12px; font-size: 13px; }
  .comparison-section .compare-table thead .th-price { font-size: 16px; }
  .comparison-section .compare-table thead th:first-child,
  .comparison-section .compare-table tbody td:first-child,
  .comparison-section .compare-table .cat-row td {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--bg-page);
    min-width: 150px;
    max-width: 180px;
  }
  .comparison-section .compare-table thead th:first-child { z-index: 15; }
  .comparison-section .compare-table thead th:first-child::after,
  .comparison-section .compare-table tbody td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -8px;
    width: 8px;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
    pointer-events: none;
  }
  .comparison-section .compare-table .cta-row td:first-child::after { display: none; }
}

/* ── ≤640px: comparison table becomes stacked feature mini-cards ── */
@media (max-width: 640px) {
  /* Reveal failsafe: on short mobile viewports the IntersectionObserver
     reveal can fail to fire for the table — never leave it invisible. */
  .comparison-section .reveal {
    opacity: 1;
    transform: none;
  }

  .comparison-section .scroll-hint { display: none; }
  .comparison-section .compare-table-wrap { overflow-x: visible; }

  .comparison-section .compare-table,
  .comparison-section .compare-table tbody,
  .comparison-section .compare-table tr,
  .comparison-section .compare-table td {
    display: block;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .comparison-section .compare-table { min-width: 0; }
  .comparison-section .compare-table thead { display: none; }

  /* Each feature row becomes a bordered mini-card */
  .comparison-section .compare-table tbody tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px 14px;
    background: var(--bg-white);
  }
  .comparison-section .compare-table tbody td {
    border-bottom: none;
    padding: 0;
    text-align: left;
  }
  /* Neutralize the sticky-column rules from the ≤768px block */
  .comparison-section .compare-table tbody td:first-child,
  .comparison-section .compare-table .cat-row td {
    position: static;
    min-width: 0;
    max-width: none;
    background: transparent;
  }
  .comparison-section .compare-table tbody td:first-child::after { display: none; }
  .comparison-section .compare-table tbody tr:hover td { background: transparent; }

  /* Feature name on top, tier values inline beneath */
  .comparison-section .compare-table tbody td:first-child {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
  }
  .comparison-section .compare-table tbody td[data-tier] {
    display: inline-block;
    width: auto;
    margin-right: 14px;
    font-size: 13px;
  }
  .comparison-section .compare-table tbody td[data-tier]::before {
    content: attr(data-tier) ' ';
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
  }
  .comparison-section .compare-table tbody td[data-tier] .cmp-yes,
  .comparison-section .compare-table tbody td[data-tier] .cmp-no { font-size: 14px; }

  /* Category rows act as plain section headings, not cards */
  .comparison-section .compare-table tbody tr.cat-row {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 14px 2px 4px;
    margin-bottom: 2px;
  }
  .comparison-section .compare-table .cat-row td {
    border-bottom: none;
    padding: 0;
  }

  /* CTA row: stacked full-width buttons */
  .comparison-section .compare-table tbody tr.cta-row {
    border: none;
    background: transparent;
    padding: 8px 0 0;
  }
  .comparison-section .compare-table .cta-row td {
    display: block;
    padding: 6px 0;
    background: transparent;
  }
  .comparison-section .compare-table .cta-row td:empty { display: none; }
  .comparison-section .compare-table .cta-row .btn {
    width: 100%;
    max-width: none;
  }
}

/* ==========================================================================
   ════════════════════ BRAND PAGE (was inline in brand.html) ═══════════════
   ========================================================================== */
    /* ── Brand Page Styles ────────────────────────────────── */
    .brand-hero {
      padding: calc(var(--nav-height) + 100px) 32px 80px;
      text-align: center;
      max-width: 900px;
      margin: 0 auto;
      position: relative;
    }
    .brand-hero::before {
      content: '';
      position: absolute;
      inset: -60px -200px;
      z-index: -1;
      background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(232,145,58,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 30% 60%, rgba(232,100,58,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 70% 30%, rgba(240,176,96,0.04) 0%, transparent 60%);
      pointer-events: none;
    }
    .brand-hero h1 {
      font-size: clamp(40px, 6vw, 64px);
      letter-spacing: -0.03em;
      margin-bottom: 16px;
    }
    .brand-hero h1 .accent { color: var(--accent); }
    .brand-hero-sub {
      font-size: clamp(16px, 2.5vw, 20px);
      color: var(--text-dim);
      max-width: 560px;
      margin: 0 auto 48px;
      line-height: 1.6;
    }
    .brand-hero-logos {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 48px;
      flex-wrap: wrap;
    }
    .brand-hero-logo {
      width: 120px;
      height: 120px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      transition: border-color 0.2s, box-shadow 0.3s;
    }
    .brand-hero-logo:hover {
      border-color: var(--accent);
      box-shadow: 0 8px 32px rgba(232,145,58,0.12);
    }
    .brand-hero-logo svg {
      width: 80px;
      height: 80px;
    }

    /* ── Section Divider ─────────────────────────────────── */
    .brand-divider {
      border: none;
      border-top: 1px solid var(--border);
      max-width: var(--max-width);
      margin: 0 auto;
    }

    /* ── Logo Grid ───────────────────────────────────────── */
    .logo-mark-block {
      margin-bottom: 64px;
    }
    .logo-mark-block h3 {
      font-size: 20px;
      margin-bottom: 6px;
    }
    .logo-mark-block > p {
      color: var(--text-dim);
      font-size: 15px;
      margin-bottom: 28px;
    }
    .logo-bg-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 24px;
    }
    .logo-bg-card {
      border-radius: var(--radius-lg);
      padding: 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      border: 1px solid var(--border);
    }
    .logo-bg-card-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 4px;
    }
    .logo-bg-dark { background: #12110F; }
    .logo-bg-dark .logo-bg-card-label { color: #A09890; }
    .logo-bg-light { background: #F5F0EB; border-color: #E0D8D0; }
    .logo-bg-light .logo-bg-card-label { color: #6B6158; }
    .logo-bg-white { background: #FFFFFF; border-color: #E0D8D0; }
    .logo-bg-white .logo-bg-card-label { color: #6B6158; }
    .logo-sizes-row {
      display: flex;
      align-items: flex-end;
      gap: 24px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .logo-size-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .logo-size-label {
      font-size: 10px;
      font-weight: 700;
      opacity: 0.5;
    }
    .logo-bg-dark .logo-size-label { color: #A09890; }
    .logo-bg-light .logo-size-label, .logo-bg-white .logo-size-label { color: #6B6158; }

    /* ── Wordmark Lockup ─────────────────────────────────── */
    .lockup-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .lockup-wordmark {
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      font-size: 28px;
      letter-spacing: -0.01em;
    }

    /* ── Usage Rules ─────────────────────────────────────── */
    .usage-rules {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 32px;
    }
    .usage-rule {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px 20px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: 14px;
      color: var(--text-dim);
      line-height: 1.5;
    }
    .usage-rule-icon {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
    }
    .usage-do { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
    .usage-dont { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

    /* ── Color Palette ───────────────────────────────────── */
    .palette-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 20px;
    }
    .palette-card {
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--bg-card);
      border: 1px solid var(--border);
      transition: border-color 0.2s, transform 0.2s;
    }
    .palette-card:hover {
      border-color: var(--border-light);
      transform: translateY(-2px);
    }
    .palette-swatch {
      height: 100px;
      position: relative;
    }
    .palette-swatch-hex {
      position: absolute;
      bottom: 8px;
      right: 10px;
      font-size: 12px;
      font-weight: 700;
      font-family: 'Fira Code', 'Consolas', monospace;
      padding: 2px 8px;
      border-radius: 4px;
      background: rgba(0,0,0,0.35);
      color: #fff;
      backdrop-filter: blur(4px);
    }
    .palette-info {
      padding: 14px 16px;
    }
    .palette-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
    }
    .palette-usage {
      font-size: 12px;
      color: var(--text-dim);
      line-height: 1.4;
      margin-bottom: 6px;
    }
    .palette-values {
      font-size: 11px;
      color: var(--text-muted);
      font-family: 'Fira Code', 'Consolas', monospace;
    }

    /* ── Typography Specimen ──────────────────────────────── */
    .type-specimen {
      margin-bottom: 48px;
    }
    .type-weight-row {
      display: flex;
      align-items: baseline;
      gap: 24px;
      padding: 20px 0;
      border-bottom: 1px solid var(--border);
    }
    .type-weight-row:last-child {
      border-bottom: none;
    }
    .type-weight-label {
      width: 120px;
      flex-shrink: 0;
      font-size: 13px;
      color: var(--text-muted);
      font-weight: 600;
    }
    .type-weight-sample {
      font-family: 'Nunito', sans-serif;
      font-size: 32px;
      color: var(--text);
      line-height: 1.3;
    }
    .type-scale {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      align-items: baseline;
    }
    .type-scale-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .type-scale-size {
      font-size: 11px;
      color: var(--text-muted);
      font-family: 'Fira Code', 'Consolas', monospace;
    }
    .type-scale-sample {
      font-family: 'Nunito', sans-serif;
      color: var(--text);
      font-weight: 600;
      white-space: nowrap;
    }

    /* ── Lockups Section ──────────────────────────────────── */
    .lockups-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
    .lockup-card {
      border-radius: var(--radius-lg);
      padding: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      border: 1px solid var(--border);
      min-height: 120px;
    }
    .lockup-card.stacked {
      flex-direction: column;
      gap: 10px;
    }
    .lockup-dark { background: #12110F; }
    .lockup-light { background: #F5F0EB; border-color: #E0D8D0; }
    .lockup-text-dark { color: #F5F0EB; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
    .lockup-text-light { color: #12110F; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
    .lockup-label {
      font-size: 11px;
      color: var(--text-muted);
      text-align: center;
      margin-top: 8px;
      font-weight: 600;
    }

    /* ── Social Section ──────────────────────────────────── */
    .social-previews {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }
    .social-preview-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .social-preview-visual {
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .social-preview-banner {
      aspect-ratio: 3 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 8px;
      padding: 24px;
    }
    .social-preview-info {
      padding: 16px 20px;
    }
    .social-preview-info h4 {
      font-size: 14px;
      margin-bottom: 4px;
      color: var(--text);
    }
    .social-preview-info p {
      font-size: 12px;
      color: var(--text-dim);
      margin: 0;
    }

    /* ── Downloads Section ────────────────────────────────── */
    .download-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
    }
    .download-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      text-align: center;
      transition: border-color 0.2s, transform 0.2s;
    }
    .download-card:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
      color: var(--text);
    }
    .download-card-preview {
      width: 64px;
      height: 64px;
      background: #12110F;
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }
    .download-card-preview svg {
      width: 100%;
      height: 100%;
    }
    .download-card-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 4px;
    }
    .download-card h4 {
      font-size: 14px;
      color: var(--text);
      margin: 0;
    }
    .download-card p {
      font-size: 12px;
      color: var(--text-dim);
      margin: 0;
    }
    .download-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      border-radius: var(--radius);
      background: var(--accent-glow);
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
      border: 1px solid rgba(232,145,58,0.25);
      transition: background 0.15s;
    }
    .download-btn:hover {
      background: rgba(232,145,58,0.25);
      color: var(--accent);
    }

    /* ── Brand Voice ─────────────────────────────────────── */
    .voice-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .voice-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px;
    }
    .voice-card h4 {
      font-size: 15px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .voice-card ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .voice-card li {
      font-size: 14px;
      color: var(--text-dim);
      padding: 6px 0;
      padding-left: 20px;
      position: relative;
      line-height: 1.5;
    }
    .voice-do li::before {
      content: '\2713';
      position: absolute;
      left: 0;
      color: #4ade80;
      font-weight: 700;
    }
    .voice-dont li::before {
      content: '\2717';
      position: absolute;
      left: 0;
      color: #ef4444;
      font-weight: 700;
    }

    /* ── Tagline Block ───────────────────────────────────── */
    .tagline-block {
      text-align: center;
      padding: 48px 32px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      margin-bottom: 40px;
    }
    .tagline-block .tagline-label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-bottom: 16px;
    }
    .tagline-block .tagline-text {
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 800;
      color: var(--accent);
      letter-spacing: -0.02em;
    }

    /* ── Responsive ──────────────────────────────────────── */
    @media (max-width: 768px) {
      .brand-hero { padding-top: calc(var(--nav-height) + 60px); padding-bottom: 48px; }
      .brand-hero-logos { gap: 24px; }
      .brand-hero-logo { width: 96px; height: 96px; }
      .brand-hero-logo svg { width: 56px; height: 56px; }
      .logo-bg-grid { grid-template-columns: 1fr; }
      .usage-rules { grid-template-columns: 1fr; }
      .lockups-grid { grid-template-columns: 1fr; }
      .voice-grid { grid-template-columns: 1fr; }
      .type-weight-row { flex-direction: column; gap: 8px; }
      .type-weight-label { width: auto; }
    }

/* ── Guide TOC (auto-generated by landing-shell.js for guides with 3+ H2s) ── */
.guide-toc {
  background: var(--bg-muted);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 32px;
  font-size: 14px;
}
.guide-toc h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 8px;
  border-top: none;
  padding-top: 0;
}
.guide-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.guide-toc li {
  margin: 0;
}
.guide-toc a {
  display: block;
  padding: 4px 0;
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -12px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  border-bottom: none;
}
.guide-toc a:hover {
  color: var(--link);
  border-left-color: var(--accent);
  background: rgba(232, 145, 58, 0.04);
}
.guide-toc a.active {
  color: var(--link);
  border-left-color: var(--accent);
  font-weight: 600;
}

/* ── Guide screenshots ── */
.guide-shot {
  display: block;
  margin: 24px auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.guide-shot-caption {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin: -16px auto 32px;
  font-style: italic;
}
.guide-screenshot {
  margin: 28px 0 32px;
}
.guide-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(26, 24, 21, 0.07);
  background: var(--bg-secondary);
}
.guide-screenshot figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

/* ============================================================
   SEO additions — breadcrumb, byline, related-guides, FAQ block,
   nav/footer fallback (for non-JS crawlers).
   See /docs/seo-additions-guide.md for usage.
   ============================================================ */

/* Visible breadcrumb above H1 on non-homepage pages */
.crumbs {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* Body-level breadcrumbs (crumbs placed before <main>/<section>) would
   otherwise render at the document top, hidden behind the 64px fixed nav.
   Position them in the whitespace band that page heroes already reserve
   below the nav. Crumbs nested inside padded containers are unaffected,
   as are crumbs that already offset themselves via an inline style
   (learn/index.html, for/index.html). */
body > .crumbs:not([style]) {
  position: absolute;
  top: calc(var(--nav-height) + 12px);
  left: 0;
  right: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  z-index: 5;
}
/* Compare pages set only 32px top padding via inline <style>; clear the
   fixed nav and leave room for the absolutely-positioned crumbs above. */
main.compare-hub,
main.compare-page {
  padding-top: calc(var(--nav-height) + 48px);
}
.crumbs a {
  color: var(--text-secondary);
  text-decoration: none;
}
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--text-primary); font-weight: 600; }

/* Augmented guide-meta byline + Updated date */
.guide-meta .guide-level { font-weight: 600; color: var(--text-secondary); }
.guide-meta .guide-byline { color: var(--text-muted); }
.guide-meta .guide-updated { color: var(--text-muted); }
.guide-meta time { font-variant-numeric: tabular-nums; }

/* Related guides footer (end of each guide) */
.related-guides {
  margin: 56px 0 24px;
  padding: 24px 28px;
  background: var(--bg-muted);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.related-guides h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}
.related-guides ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.related-guides li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.related-guides a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.related-guides a:hover { text-decoration: underline; }

/* FAQ block (visible Q/A list matching FAQPage schema) */
.faq-block {
  padding: 56px 0;
  max-width: 760px;
  margin: 0 auto;
}
.faq-block > h2 {
  font-size: 28px;
  margin: 0 0 24px;
  color: var(--text-primary);
  letter-spacing: -0.4px;
}
.faq-block details {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.faq-block details:first-of-type { border-top: 1px solid var(--border); }
.faq-block summary {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  padding-right: 24px;
  position: relative;
}
.faq-block summary::-webkit-details-marker { display: none; }
.faq-block summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.faq-block details[open] summary::after {
  content: "−";
}
.faq-block details p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
@media (max-width: 640px) {
  .faq-block { padding: 24px 16px; }
}
/* FAQ hub (/faq) stacks seven category blocks inside .guide-content —
   the standalone 56px block padding doubles up into ~150px dead gaps.
   Tighten to a comfortable rhythm; standalone blocks (pricing, /for/*)
   keep the roomier default. */
.guide-content .faq-block { padding: 20px 0 12px; }
.guide-content .faq-block > h2 { margin-bottom: 12px; }
@media (max-width: 640px) {
  .guide-content .faq-block { padding: 16px 0 8px; }
}

/* "Guides for X" mid-page link block on /for/* pages */
.guides-for {
  padding: 48px 0;
  max-width: 760px;
  margin: 0 auto;
}
.guides-for h2 {
  font-size: 22px;
  margin: 0 0 16px;
  color: var(--text-primary);
}
.guides-for ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.guides-for li {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.guides-for a { color: var(--accent); font-weight: 600; text-decoration: none; }
.guides-for a:hover { text-decoration: underline; }

/* Static nav + footer fallback — hidden once landing-shell.js runs.
   Crawlers without JS see these as raw HTML; humans never see them
   (landing-shell.js replaces the entire #site-nav / #site-footer div
   via outerHTML before paint). */
.nav-fallback,
.footer-fallback {
  display: none !important;
}


/* ── Glossary index grid ── */
.glossary-index { max-width: 1000px; margin: 0 auto; padding: 24px 24px 80px; }
.glossary-section { margin-top: 48px; }
.glossary-section h2 {
  font-size: 22px;
  margin: 0 0 16px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.glossary-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
/* Even-count variant (e.g. /learn's four guide cards): 2×2 instead of
   an auto-fill 3+1 with an orphaned last card. */
.glossary-grid--pairs { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  .glossary-grid--pairs { grid-template-columns: 1fr; }
}
/* Persona hub (/for) — small per-vertical accent chip on each card */
.persona-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.persona-chip svg { display: block; }
.persona--boardgames .persona-chip { color: var(--accent);    background: rgba(232, 145, 58, 0.14); }
.persona--tcg        .persona-chip { color: var(--tier-rare); background: var(--tier-rare-bg); }
.persona--ttrpg      .persona-chip { color: var(--tier-epic); background: var(--tier-epic-bg); }
.persona--tarot      .persona-chip { color: #B8862E;          background: rgba(212, 167, 106, 0.18); }
.persona--wargames   .persona-chip { color: #E85A3A;          background: rgba(232, 90, 58, 0.10); }
.persona--educators  .persona-chip { color: var(--success);   background: var(--success-dim); }
.glossary-card {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.glossary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.glossary-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.glossary-card p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.glossary-card-link {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}
.glossary-card-link:hover { text-decoration: underline; }


/* ==========================================================================
   Accessibility (compliance D-1..D-6, D-10, E-7) — 2026-10
   ========================================================================== */

/* Skip link: off-screen until focused, then top-left with the dark ring. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 12px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--bg-white);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 15px;
  border-radius: 8px;
  border: 2px solid var(--focus-ring);
  transform: translateY(-200%);
}
.skip-link:focus, .skip-link:focus-visible {
  transform: none;
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Links inside running text: darker amber, underlined at rest (WCAG 1.4.1 / 1.4.3). */
:where(main, [role="main"], .legal-page, .guide-content) :where(p, li, td, dd, figcaption, blockquote) a:where(:not(.btn, [class*="btn"], [class*="card"], [class*="nav-"])):where(:not(nav a, .guide-toc a, .crumbs a, footer a)) {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:where(main, [role="main"], .legal-page, .guide-content) :where(p, li, td, dd, figcaption, blockquote) a:where(:not(.btn, [class*="btn"], [class*="card"], [class*="nav-"])):where(:not(nav a, .guide-toc a, .crumbs a, footer a)):hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}
:where(p, li, td, dd) a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.footer :where(p, li) a, .footer-col a { text-decoration: none; }
.footer a { color: inherit; }
.footer-col a { color: rgba(250,250,248,0.6); }

/* Pricing billing switch (rules live inline in pricing.html; override here). */
.billing-toggle .billing-switch button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.billing-toggle .billing-switch button[aria-checked="true"] { color: var(--on-accent-ink); }

/* Nav dropdown glyphs are inline SVG now. */
.nav-mega-icon svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-primary); }
.nav-dropdown-trigger:focus-visible,
.nav-links a:focus-visible,
.nav-hamburger:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Mobile: the primary CTA lives in the bar itself (the full CTA sheet stays behind the hamburger). */
.nav-cta-mobile { display: none; }
@media (max-width: 1024px) {
  .nav-inner { gap: 8px; }
  .nav-brand { margin-right: auto; }
  .nav-cta-mobile { order: 2; }
  .nav-hamburger { order: 3; }
  .nav-cta-mobile {
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .nav-cta-mobile { padding: 0 12px; font-size: 13px; }
  .nav-inner { padding: 0 16px; }
}

/* Tier-coloured primary buttons (inline background in markup): the dark ink
   only reaches 4.25:1 on the Epic violet, so Epic gets black text (4.6:1). */
.btn-primary[style*="--tier-epic"] { color: #000; }

/* Terms line under the Clerk sign-up form (site/site.js). Sits on the modal
   backdrop (~#404040), so light ink and a 5.3:1 amber link. */
.signup-terms { text-align: center; margin-top: 8px; font-family: 'Nunito', sans-serif; font-size: 14px; color: #E8E2DA; }
.signup-terms a { color: #F0B060; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.signup-terms a:hover { color: #FFFFFF; }