/*
Theme Name: GGMerchant.Center
Theme URI: https://ggmerchant.center
Author: Alias Margan
Author URI: https://ggmerchant.center
Description: SEO-optimized SaaS theme for Google Merchant Center suspension audit and reinstatement services. Wise-inspired light theme.
Version: 3.9.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: merchant-center
Tags: saas, ecommerce, seo-friendly, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, blog, business
*/

/* ════════════════════════════════════════════════
   DESIGN TOKENS — Wise-inspired
   ════════════════════════════════════════════════ */
:root {
  --bg: #FFFFFF;
  --bg-elevated: #F5F7FA;
  --bg-tinted: #E8EFE3;
  --bg-pale: #DEFFB8;
  --border: #E5E7EB;
  --border-strong: #163300;
  --text: #163300;
  --text-dim: #2D4A0F;
  --text-muted: #6B7775;
  --text-body: #1F2937;
  --text-on-accent: #163300;
  --text-on-dark: #FFFFFF;
  --accent: #9FE870;
  --accent-dark: #163300;
  --accent-soft: #DEFFB8;
  --accent-hover: #87D55B;
  --danger: #DC2626;
  --danger-soft: #FEE2E2;
  --warn: #F59E0B;
  --warn-soft: #FEF3C7;
  --success: #10B981;
  --success-soft: #D1FAE5;
  /* Typography */
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --display: 'DM Sans', 'Inter', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 100px;
  --shadow-sm: 0 1px 2px rgba(22, 51, 0, 0.06);
  --shadow: 0 4px 16px -4px rgba(22, 51, 0, 0.08);
  --shadow-lg: 0 20px 50px -10px rgba(22, 51, 0, 0.15);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
::selection { background: var(--accent); color: var(--text); }

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-logo {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-dot {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}
.logo-dot::before { content: 'G'; }

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a { font-size: 15px; font-weight: 500; color: var(--text-body); transition: color 0.15s; }
.main-nav a:hover { color: var(--text); }
.nav-cta {
  background: var(--accent);
  color: var(--text) !important;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  font-weight: 700 !important;
  transition: transform 0.15s, background 0.15s;
}
.nav-cta:hover { transform: translateY(-1px); background: var(--accent-hover); }
.nav-cta-secondary {
  border: 1.5px solid var(--text);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600 !important;
  color: var(--text) !important;
}
.nav-cta-secondary:hover { background: var(--bg-tinted); }
.mobile-menu-toggle { display: none; font-size: 24px; color: var(--text); }
@media (max-width: 720px) {
  .main-nav a:not(.nav-cta):not(.nav-cta-secondary) { display: none; }
}

/* ════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════ */
.hero {
  padding: 80px 0 80px;
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, var(--accent-soft) 0%, transparent 60%),
    var(--bg);
  overflow: hidden;
}
@media (max-width: 720px) { .hero { padding: 56px 0 56px; } }
.hero-inner { text-align: center; position: relative; z-index: 2; }

/* v3.6.5 — hero background video, scoped to just the headline area at top */
.hero--with-video { background: var(--bg); }
.hero-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Only covers the headline zone (tag + H1). Everything below sits on white. */
  height: 620px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Soft fade-out at the bottom edge so it blends into the page */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0.6) 82%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0.6) 82%, transparent 100%);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}
.hero-video-tint {
  position: absolute;
  inset: 0;
  /* Very light — just enough edge polish; no longer protecting text */
  background:
    radial-gradient(ellipse 65% 55% at 50% 0%, rgba(159, 232, 112, 0.18) 0%, transparent 65%);
}
/* v3.6.6 — text now sits BELOW the video block, not over it.
   Push the inner content down by the video height so the headline starts
   where the video ends. The video gets its own clean visual slot at the top. */
.hero--with-video .hero-inner { margin-top: 540px; }
@media (max-width: 1024px) {
  .hero--with-video .hero-inner { margin-top: 440px; }
}
@media (max-width: 720px) {
  .hero--with-video .hero-inner { margin-top: 0; }
}

/* v3.6.7 — Showcase video between audience cards and illustration.
   Full-bleed inside the hero container, no tint, rounded corners. */
.hero-showcase-video {
  margin: 56px auto 24px;
  max-width: 1100px;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -28px rgba(22, 51, 0, 0.30),
    0 12px 30px -16px rgba(22, 51, 0, 0.16);
  position: relative;
  z-index: 2;
  background: var(--bg-elevated, #F5F7FA);
  /* Aspect ratio matches the source so it doesn't letterbox awkwardly */
  aspect-ratio: 16 / 9;
}
.hero-showcase-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 720px) {
  .hero-showcase-video {
    margin: 36px auto 18px;
    border-radius: 16px;
    box-shadow: 0 20px 50px -20px rgba(22, 51, 0, 0.25);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-showcase-video video { display: none; }
}
/* Shorter video zone on tablets */
@media (max-width: 1024px) {
  .hero-video-wrap { height: 520px; }
}
/* On mobile: video is wasteful (bandwidth + battery + autoplay flakiness). */
@media (max-width: 720px) {
  .hero-video-wrap { display: none; }
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-video-wrap { display: none; }
}

.urgent-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}
.urgent-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent-dark);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

h1.hero-h1 {
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--text);
  max-width: 1000px;
  margin: 0 auto 24px;
}
h1.hero-h1 em,
h1.hero-h1 .highlight {
  font-style: normal;
  background: var(--accent);
  color: var(--text);
  padding: 0 16px;
  border-radius: 10px;
  display: inline-block;
  margin: 0 2px;
  line-height: 1.05;
}

.hero-lede {
  font-size: 20px;
  color: var(--text-body);
  max-width: 720px;
  line-height: 1.55;
  margin: 0 auto 48px;
}

/* ════════════════════════════════════════════════
   AUDIENCE PATHS — two-card "pick your situation"
   Shows under the hero scanner form. Each card links
   back to the scanner. Visually anchors both audiences.
   ════════════════════════════════════════════════ */
.audience-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 880px;
  margin: 32px auto 0;
  text-align: left;
}
/* v3.7.0 — 3-column variant for the new homepage repositioning */
.audience-paths.audience-paths-3col {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1140px;
}
@media (max-width: 960px) {
  .audience-paths.audience-paths-3col { grid-template-columns: 1fr; }
}
.audience-card.audience-card-platform { background: linear-gradient(180deg, #F0F7FF 0%, #FFFFFF 60%); }
.audience-card.audience-card-platform:hover { border-color: #4285F4; }
.audience-card.audience-card-platform .audience-card-icon { color: #4285F4; }
.audience-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: all 0.18s ease;
  position: relative;
}
.audience-card:hover {
  border-color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22, 51, 0, 0.08);
}
.audience-card-launch {
  background: linear-gradient(135deg, var(--accent-soft) 0%, #EAF7DC 100%);
  border-color: var(--accent);
}
.audience-card-launch:hover {
  border-color: var(--accent-dark);
}
.audience-card-fix {
  background: var(--bg-elevated);
}
.audience-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.audience-card-launch .audience-card-icon {
  background: var(--accent);
}
.audience-card-fix .audience-card-icon {
  background: var(--bg);
  border: 1.5px solid var(--border);
}
.audience-card-body {
  flex: 1;
  min-width: 0;
}
.audience-card-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.audience-card-title {
  font-family: var(--display, var(--sans));
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.audience-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-body);
  margin-bottom: 10px;
}
.audience-card-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.audience-card:hover .audience-card-cta {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 760px) {
  .audience-paths { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .audience-card { padding: 18px 20px; }
  .audience-card-title { font-size: 17px; }
}

/* ════════════════════════════════════════════════
   SCANNER FORM (pill shape, Wise-style)
   ════════════════════════════════════════════════ */
.scanner-form {
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--bg);
  border: 2px solid var(--text);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s, transform 0.15s;
}
.scanner-form:focus-within {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.scanner-form input[type="url"],
.scanner-form input[type="text"],
.scanner-form input[type="email"] {
  flex: 1;
  border: none;
  padding: 14px 20px;
  font-size: 16px;
  font-family: var(--sans);
  background: transparent;
  outline: none;
  color: var(--text);
  min-width: 0;
}
.scanner-form input::placeholder { color: var(--text-muted); }
.scanner-form button {
  background: var(--accent);
  color: var(--text);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.15s, background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.scanner-form button:hover { transform: translateY(-1px); background: var(--accent-hover); }
.scanner-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.scanner-form-meta { margin-top: 14px; font-size: 13px; color: var(--text-muted); }
@media (max-width: 540px) {
  .scanner-form { flex-direction: column; padding: 12px; border-radius: var(--radius-lg); }
  .scanner-form button { width: 100%; }
}

.scanner-form-extra { max-width: 580px; margin: 16px auto 0; }
.scanner-form-extra input {
  width: 100%;
  padding: 14px 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.scanner-form-extra input:focus { border-color: var(--text); }

.scanner-error {
  display: none;
  margin: 20px auto 0;
  max-width: 580px;
  padding: 14px 20px;
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 14px;
  text-align: center;
}
.scanner-error.active { display: block; }

.scanner-loading {
  margin: 32px auto 0;
  max-width: 580px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.scanner-loading-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent-dark);
  border-radius: 50%;
  margin: 0 3px;
  animation: dotBounce 1.4s infinite ease-in-out both;
}
.scanner-loading-dot:nth-child(1) { animation-delay: -0.32s; }
.scanner-loading-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ════════════════════════════════════════════════
   HERO ILLUSTRATION (replaces 3D)
   ════════════════════════════════════════════════ */
.hero-illustration {
  max-width: 880px;
  margin: 56px auto 0;
  position: relative;
}
.hero-illustration svg { width: 100%; height: auto; display: block; }

.illu-card {
  position: absolute;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 600;
  animation: floatY 6s ease-in-out infinite;
  z-index: 3;
}
.illu-card .check {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  flex-shrink: 0;
}
.illu-card.pass { color: var(--text); }
.illu-card.pass .check { background: var(--accent); color: var(--text); }
.illu-card.fail { color: var(--text); }
.illu-card.fail .check { background: var(--danger-soft); color: var(--danger); }
.illu-card-1 { top: 8%; left: -10px; animation-delay: 0s; }
.illu-card-2 { top: 38%; right: -10px; animation-delay: 1.5s; }
.illu-card-3 { bottom: 12%; left: 8%; animation-delay: 3s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 720px) { .illu-card { display: none; } }

/* ════════════════════════════════════════════════
   TRUST STRIP
   ════════════════════════════════════════════════ */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 880px;
  margin: 64px auto 0;
  padding: 32px 40px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
}
.trust-item { text-align: center; }
.trust-number {
  font-family: var(--display);
  font-size: 40px;
  color: var(--text);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.trust-label { font-size: 13px; color: var(--text-muted); font-weight: 500; line-height: 1.4; }
@media (max-width: 640px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); padding: 24px 20px; gap: 20px; }
  .trust-number { font-size: 28px; }
}

/* ════════════════════════════════════════════════
   SECTION TYPOGRAPHY
   ════════════════════════════════════════════════ */
.section { padding: 96px 0; }
@media (max-width: 720px) { .section { padding: 64px 0; } }
.section-alt { background: var(--bg-elevated); }
.section-dark { background: var(--text); color: var(--text-on-dark); }
.section-dark .section-eyebrow { color: var(--accent); }
.section-dark h2 { color: var(--text-on-dark); }
.section-dark .section-lede { color: rgba(255,255,255,0.8); }

.section-eyebrow {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}
.section-h2 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-align: center;
  color: var(--text);
  max-width: 760px;
  margin: 0 auto 16px;
}
.section-h2 em { font-style: normal; background: var(--accent); padding: 0 14px; border-radius: 8px; }
.section-lede {
  text-align: center;
  font-size: 18px;
  color: var(--text-body);
  max-width: 680px;
  margin: 0 auto 56px;
  line-height: 1.55;
}

/* ════════════════════════════════════════════════
   PROBLEM SECTION (stats)
   ════════════════════════════════════════════════ */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; max-width: 480px; } }

.problem-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.problem-stat {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 12px;
}
.problem-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.problem-desc { color: var(--text-body); font-size: 15px; line-height: 1.6; }

/* ════════════════════════════════════════════════
   HOW IT WORKS
   ════════════════════════════════════════════════ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; max-width: 480px; } }

.step-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
}
.step-number {
  width: 52px;
  height: 52px;
  background: var(--accent);
  color: var(--text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 24px;
}
.step-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.step-desc { color: var(--text-body); font-size: 15px; line-height: 1.6; }

/* ════════════════════════════════════════════════
   CHECKS LIST
   ════════════════════════════════════════════════ */
.checks-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto 48px;
}
@media (max-width: 720px) { .checks-overview { grid-template-columns: 1fr; } }

.check-overview-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.check-overview-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--text);
}

.check-overview-icon {
  width: 56px;
  height: 56px;
  background: var(--accent);
  color: var(--text);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.check-overview-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: 12px;
}

.check-overview-title {
  font-family: var(--display, var(--sans));
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}

.check-overview-desc {
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.6;
}

.checks-cta {
  text-align: center;
  padding: 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 1080px;
  margin: 0 auto;
}
.checks-cta-text {
  font-family: var(--display, var(--sans));
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

/* ════════════════════════════════════════════════
   FAQ ACCORDION
   ════════════════════════════════════════════════ */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq-item:hover { border-color: var(--text); }
.faq-question {
  padding: 24px 28px;
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-question::after {
  content: '+';
  font-size: 24px;
  color: var(--text);
  font-weight: 400;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer {
  padding: 0 28px 24px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.65;
  display: none;
}
.faq-item.open .faq-answer { display: block; }

/* ════════════════════════════════════════════════
   FINAL CTA
   ════════════════════════════════════════════════ */
.final-cta {
  background: var(--text);
  color: var(--text-on-dark);
  padding: 96px 24px;
  text-align: center;
}
.final-cta h2 {
  font-family: var(--display);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text-on-dark);
  max-width: 800px;
  margin: 0 auto 20px;
}
.final-cta h2 em {
  font-style: normal;
  background: var(--accent);
  color: var(--text);
  padding: 0 14px;
  border-radius: 10px;
}
.final-cta p {
  font-size: 19px;
  color: rgba(255,255,255,0.8);
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.55;
}
.final-cta-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--text);
  padding: 18px 36px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 17px;
  transition: transform 0.15s, background 0.15s;
}
.final-cta-btn:hover { transform: translateY(-2px); background: var(--accent-hover); }

/* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.footer-brand h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.footer-brand p { color: var(--text-body); font-size: 14px; line-height: 1.6; max-width: 360px; }
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.footer-tagline {
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
  margin-top: 16px;
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--text-body); font-size: 14px; transition: color 0.15s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; }
.footer-disclaimer { color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.footer-disclaimer a { color: var(--text-muted); border-bottom: 1px dotted var(--text-muted); }
.footer-disclaimer a:hover { color: var(--text); }
/* v3.7.0 — Independence notice block */
.footer-independence {
	margin-top: 32px;
	padding: 18px 22px;
	background: rgba(159, 232, 112, 0.06);
	border: 1px dashed rgba(22, 51, 0, 0.18);
	border-radius: 14px;
}
.footer-independence p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--text-muted);
}

/* ════════════════════════════════════════════════
   ENTRY CONTENT (generic pages, single posts)
   ════════════════════════════════════════════════ */
.entry-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
}
.entry-content h1, .entry-content h2, .entry-content h3 {
  color: var(--text);
  margin-top: 48px;
  margin-bottom: 16px;
}
.entry-content h1 { font-size: clamp(32px, 5vw, 48px); margin-top: 0; }
.entry-content h2 { font-size: 28px; }
.entry-content h3 { font-size: 22px; }
.entry-content p { margin-bottom: 20px; }
.entry-content ul, .entry-content ol { margin: 0 0 20px 24px; }
.entry-content li { margin-bottom: 8px; }
.entry-content a { color: var(--text); border-bottom: 1.5px solid var(--accent); transition: background 0.15s; }
.entry-content a:hover { background: var(--accent-soft); }
.entry-content strong { color: var(--text); font-weight: 700; }
.entry-content code {
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text);
}
.entry-content blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 20px;
  margin: 32px 0;
  font-style: italic;
  color: var(--text);
}

/* ════════════════════════════════════════════════
   GENERIC BUTTONS
   ════════════════════════════════════════════════ */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.15s, background 0.15s;
}
.btn-primary { background: var(--accent); color: var(--text); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-secondary { background: var(--text); color: var(--text-on-dark); }
.btn-secondary:hover { transform: translateY(-1px); }
.btn-outline { border: 1.5px solid var(--text); color: var(--text); }
.btn-outline:hover { background: var(--bg-tinted); }

/* ════════════════════════════════════════════════
   ARCHIVE / SEARCH / 404
   ════════════════════════════════════════════════ */
.archive-header, .search-header, .error-404 {
  text-align: center;
  padding: 80px 24px 40px;
}
.archive-title, .search-title, .error-404 h1 {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text);
  margin-bottom: 12px;
}
.error-404 p {
  font-size: 18px;
  color: var(--text-body);
  max-width: 560px;
  margin: 0 auto 32px;
}

.search-form-wrap {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  padding: 6px;
  background: var(--bg);
  border: 2px solid var(--text);
  border-radius: var(--radius-pill);
}
.search-form-wrap input {
  flex: 1;
  border: none;
  padding: 12px 18px;
  font-size: 15px;
  background: transparent;
  outline: none;
  color: var(--text);
}
.search-form-wrap button {
  background: var(--accent);
  color: var(--text);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 14px;
}

.posts-grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 720px) { .posts-grid { grid-template-columns: 1fr; } }
.post-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card-cat {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  display: inline-block;
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.post-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.3;
}
.post-card-excerpt { color: var(--text-body); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.post-card-meta { font-size: 12px; color: var(--text-muted); }