/*
Theme Name: ZeroGrok
Theme URI: https://zerogrok.com/
Author: ZeroGrok Team
Author URI: https://zerogrok.com/about-us/
Description: Official WordPress theme for ZeroGrok — Free AI detectors, creators and everyday utilities. Converted from the Lovable React/TypeScript/Tailwind codebase.
Version: 1.5.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zerogrok
Tags: ai-tools, blog, one-column, two-columns, custom-header, custom-menu, featured-images, full-width-template, sticky-post, threaded-comments, translation-ready
*/

/* =============================================================
   DESIGN TOKENS — extracted from Lovable src/styles.css
   ============================================================= */
:root {
  /* Radius */
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;

  /* Light mode palette */
  --background:         #ffffff;
  --foreground:         #3a3a3a;
  --heading:            #1a1a1a;
  --card:               #ffffff;
  --card-foreground:    #3a3a3a;
  --popover:            #ffffff;
  --popover-foreground: #3a3a3a;
  --primary:            #1a1a1a;
  --primary-foreground: #f9f9f9;
  --secondary:          #5a5a5a;
  --secondary-foreground:#ffffff;
  --muted:              #f8f8f8;
  --muted-foreground:   #5a5a5a;
  --accent:             #111111;
  --accent-dark:        #2e2e2e;
  --accent-tint:        #f2f2f2;
  --accent-foreground:  #ffffff;
  --bg-soft:            #f8f8f8;
  --navy:               #1c1c1c;
  --navy-card:          #2a2a2a;
  --navy-foreground:    #f8f8f8;
  --navy-muted:         #aaaaaa;
  --human:              #3d9e55;
  --human-tint:         #edfbf0;
  --ai:                 #c0541c;
  --ai-tint:            #fdf0ea;
  --score-mid:          #c8a420;
  --destructive:        #c0541c;
  --destructive-foreground: #ffffff;
  --border:             #e5e5e5;
  --input:              #e5e5e5;
  --ring:               #111111;

  /* Gradients & shadows */
  --hero-gradient: radial-gradient(ellipse 80% 60% at 50% 0%, #ededed 0%, #f7f7f7 45%, #ffffff 80%);
  --shadow-glow:   0 30px 80px -30px rgba(0,0,0,0.15), 0 2px 8px -2px rgba(0,0,0,0.06);
  --shadow-soft:   0 10px 30px -15px rgba(0,0,0,0.12);

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background:         #242424;
    --foreground:         #e0e0e0;
    --heading:            #f8f8f8;
    --card:               #2e2e2e;
    --card-foreground:    #e0e0e0;
    --popover:            #2e2e2e;
    --popover-foreground: #e0e0e0;
    --primary:            #f2f2f2;
    --primary-foreground: #242424;
    --muted:              #2a2a2a;
    --muted-foreground:   #aaaaaa;
    --accent:             #f7f7f7;
    --accent-dark:        #d9d9d9;
    --accent-tint:        #333333;
    --accent-foreground:  #191919;
    --bg-soft:            #272727;
    --navy:               #191919;
    --navy-card:          #282828;
    --human:              #5ec47b;
    --human-tint:         #1e3a24;
    --ai:                 #d9733a;
    --ai-tint:            #3a2419;
    --border:             #404040;
    --input:              #404040;
    --hero-gradient: radial-gradient(ellipse 80% 60% at 50% 0%, #3a3a3a 0%, #2a2a2a 45%, #242424 80%);
  }
}

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

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

body {
  margin: 0;
  padding: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-top: 0;
  line-height: 1.25;
}

h1 { font-size: clamp(2rem, 6vw, 3.75rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.1rem; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

img, video { max-width: 100%; height: auto; display: block; }
ul, ol { padding: 0; margin: 0; list-style: none; }
p { margin-top: 0; margin-bottom: 0; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =============================================================
   UTILITY CLASSES
   ============================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.container { width: 100%; max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.text-center { text-align: center; }
.bg-soft { background-color: var(--bg-soft); }
.bg-navy { background-color: var(--navy); }
.bg-hero { background: var(--hero-gradient); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-soft { box-shadow: var(--shadow-soft); }

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s, opacity .15s;
  cursor: pointer;
  border: none;
  font-family: var(--font-sans);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-foreground);
}
.btn-primary:hover { background: var(--accent-dark); color: var(--accent-foreground); }
.btn-outline {
  background: var(--card);
  color: var(--heading);
  border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--accent-tint); border-color: var(--accent); }
.btn-light {
  background: var(--background);
  color: var(--accent-dark);
}
.btn-light:hover { background: var(--accent-tint); }
.btn-navy {
  background: var(--navy-foreground);
  color: var(--navy);
}
.btn-navy:hover { opacity: 0.9; }

/* =============================================================
   TOP BAR
   ============================================================= */
.site-topbar {
  background-color: var(--navy);
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--navy-foreground);
}
.site-topbar a {
  color: var(--navy-foreground);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =============================================================
   HEADER
   ============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
  background-color: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.3s;
}
@media (prefers-color-scheme: dark) {
  .site-header { background-color: rgba(36,36,36,0.85); }
}
.site-header.scrolled { background-color: rgba(255,255,255,0.97); }
@media (prefers-color-scheme: dark) {
  .site-header.scrolled { background-color: rgba(36,36,36,0.98); }
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
  position: static;
}

.site-logo {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--heading);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.site-logo span { color: var(--accent); }

.site-logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--zg-logo-w-desktop, 160px);
  max-height: var(--zg-logo-h-desktop, 42px);
  object-fit: contain;
  transition: transform 0.2s ease;
}

@media (max-width: 768px) {
  .site-logo-img {
    max-width: var(--zg-logo-w-mobile, 130px);
    max-height: var(--zg-logo-h-mobile, 34px);
  }
}

/* Desktop nav */
.nav-desktop {
  display: none;
  align-items: center;
  gap: 0.25rem;
  position: static;
}
@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
}

.nav-link {
  border-radius: 9999px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.15s;
}
.nav-link:hover { color: var(--heading); }

/* Tools mega-dropdown: auto-adjusting to all screen sizes */
.nav-tools-trigger {
  position: static !important;
}
.nav-tools-btn {
  border-radius: 9999px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  transition: color 0.15s;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-sans);
}
.nav-tools-btn:hover { color: var(--heading); }
.nav-tools-btn svg { width: 1rem; height: 1rem; transition: transform 0.2s; }
.nav-tools-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-tools-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 1rem;
  right: 1rem;
  margin: 0.5rem auto 0;
  max-width: 72rem;
  width: auto;
  max-height: calc(85vh - 4.5rem);
  overflow-y: auto;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--popover);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
  z-index: 100;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.nav-tools-dropdown::-webkit-scrollbar {
  width: 6px;
}
.nav-tools-dropdown::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 9999px;
}
.nav-tools-dropdown.open { display: block; }

.nav-tools-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 1240px) {
  .nav-tools-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.875rem;
  }
}
@media (max-width: 1023px) {
  .nav-tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}
@media (max-width: 720px) {
  .nav-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}
@media (max-width: 480px) {
  .nav-tools-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.nav-tools-group-title {
  display: block;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

.nav-tools-dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.nav-tools-dropdown a {
  display: block;
  border-radius: 0.5rem;
  padding: 0.4375rem 0.625rem;
  font-size: 0.84375rem;
  line-height: 1.35;
  color: var(--foreground);
  text-decoration: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.nav-tools-dropdown a:hover {
  background: var(--accent-tint);
  color: var(--heading);
}

/* Mobile nav toggle */
.nav-mobile-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 9999px;
  padding: 0 0.875rem;
  min-height: 40px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading);
  border: 1px solid var(--border);
  background: var(--card);
  transition: background-color 0.15s;
}
.nav-mobile-toggle:hover { background: var(--accent-tint); }
.nav-mobile-toggle svg { width: 1rem; height: 1rem; }
@media (min-width: 1024px) {
  .nav-mobile-toggle { display: none; }
}

/* Mobile drawer */
.nav-mobile-drawer {
  display: none;
  max-height: 75dvh;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  background: var(--background);
  padding: 0.5rem 1rem 1.5rem;
}
.nav-mobile-drawer.open { display: block; }
@media (min-width: 1024px) {
  .nav-mobile-drawer { display: none !important; }
}
.nav-mobile-drawer .nav-link { width: 100%; }
.nav-mobile-group-title {
  display: block;
  padding: 1rem 0.75rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
}
.nav-mobile-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .nav-mobile-grid { grid-template-columns: 1fr 1fr; }
}
.nav-mobile-grid a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem 0.5rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--secondary);
  text-decoration: none;
  border-radius: 9999px;
  transition: color 0.15s;
}
.nav-mobile-grid a:hover { color: var(--heading); }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
  background-color: var(--navy);
  color: var(--navy-muted);
}
.footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 4rem 1rem 2rem;
}
.footer-top {
  display: grid;
  gap: 2.5rem;
  border-bottom: 1px solid var(--navy-card);
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: 1.2fr 1fr;
    align-items: end;
  }
}
.footer-logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--navy-foreground);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.footer-logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--zg-footer-logo-w-desktop, 160px);
  max-height: var(--zg-footer-logo-h-desktop, 42px);
  object-fit: contain;
  transition: transform 0.2s ease;
}

@media (max-width: 768px) {
  .footer-logo-img {
    max-width: var(--zg-footer-logo-w-mobile, 130px);
    max-height: var(--zg-footer-logo-h-mobile, 34px);
  }
}
.footer-tagline {
  margin-top: 1rem;
  font-size: 0.9375rem;
  max-width: 28rem;
  line-height: 1.6;
}
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .footer-socials { justify-content: flex-end; }
}
.footer-social-link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid var(--navy-card);
  color: var(--navy-foreground);
  text-decoration: none;
  transition: background-color 0.15s;
}
.footer-social-link:hover { background: var(--navy-card); }
.footer-social-link svg { width: 1rem; height: 1rem; }
.footer-email-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid var(--navy-card);
  padding: 0 1rem;
  font-size: 0.875rem;
  color: var(--navy-foreground);
  text-decoration: none;
  transition: background-color 0.15s;
}
.footer-email-link:hover { background: var(--navy-card); }
.footer-email-link svg { width: 1rem; height: 1rem; }

.footer-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.5rem;
  padding: 3rem 0;
}
@media (min-width: 480px) {
  .footer-links-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .footer-links-grid { grid-template-columns: repeat(6, 1fr); }
}
.footer-col-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--navy-foreground);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li + li { margin-top: 0.625rem; }
.footer-col a {
  font-size: 0.90625rem;
  color: var(--navy-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--navy-foreground); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid var(--navy-card);
  padding-top: 1.5rem;
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-bottom p { margin: 0; }
.footer-disclaimer { max-width: 60ch; }
@media (min-width: 768px) { .footer-disclaimer { text-align: right; } }

/* =============================================================
   HERO SECTION
   ============================================================= */
.section-hero {
  background: var(--hero-gradient);
  padding: 4rem 1rem 4rem;
  text-align: center;
}
@media (min-width: 640px) { .section-hero { padding-top: 5rem; } }
.hero-badge {
  display: inline-block;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-dark);
}
.hero-h1 {
  margin-top: 1.5rem;
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.hero-sub {
  margin-top: 1rem;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: var(--heading);
}
.hero-desc {
  margin: 1rem auto 0;
  max-width: 62ch;
  color: var(--muted-foreground);
}
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  margin-top: 2rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--heading);
  list-style: none;
  padding: 0;
}
.hero-badge-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-badge-item svg { color: var(--accent); }

/* Tool card area */
.tool-card-area {
  margin-top: 2rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.75rem;
  box-shadow: var(--shadow-glow);
  text-align: left;
}
.tool-card-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tool-card-textarea {
  display: block;
  width: 100%;
  min-height: 10rem;
  margin-top: 0.75rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  padding: 0.875rem 1rem;
  font-size: 1rem;
  line-height: 1.65;
  resize: vertical;
  transition: border-color 0.15s;
}
.tool-card-textarea:focus { border-color: var(--accent); outline: none; }
.tool-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.tool-word-count {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-left: auto;
}

/* =============================================================
   SECTION SHARED
   ============================================================= */
.section-wrap {
  padding: 5rem 1rem;
}
@media (min-width: 640px) { .section-wrap { padding: 6rem 1rem; } }

.section-head {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}
.section-lead {
  margin: 1rem auto 0;
  max-width: 65ch;
  color: var(--muted-foreground);
}

/* =============================================================
   ICON CARDS (3-col grid)
   ============================================================= */
.icon-cards {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (min-width: 768px) { .icon-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .icon-cards { grid-template-columns: 1fr 1fr 1fr; } }

.icon-card {
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.75rem;
}
.icon-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-2xl);
  background: var(--accent-tint);
  color: var(--accent);
}
.icon-card-icon svg { width: 1.5rem; height: 1.5rem; }
.icon-card h3 { margin-top: 1.25rem; font-size: 1.125rem; }
.icon-card-desc { margin-top: 0.5rem; font-size: 1rem; color: var(--muted-foreground); }

/* =============================================================
   STEPS SECTION (dark navy)
   ============================================================= */
.steps-outer {
  padding: 0.75rem 1rem;
}
@media (min-width: 640px) { .steps-outer { padding: 1.5rem; } }
.steps-inner {
  max-width: 90rem;
  margin: 0 auto;
  border-radius: var(--radius-4xl);
  background: var(--navy);
  padding: 4rem 1.25rem;
}
@media (min-width: 640px) { .steps-inner { padding: 5rem 2.5rem; } }
.steps-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .steps-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

.step-card {
  border-radius: var(--radius-3xl);
  background: var(--navy-card);
  padding: 1.75rem;
}
.step-number {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* in dark context, accent (near-white) */
.steps-inner .step-number { color: #ffffff !important; }
.steps-inner .step-card h3 { margin-top: 1rem; font-size: 1.125rem; font-weight: 700; color: var(--navy-foreground) !important; }
.steps-inner .step-card p { margin-top: 0.5rem; font-size: 1rem; line-height: 1.6; color: var(--navy-muted) !important; }
.step-card h3 { margin-top: 1rem; font-size: 1.125rem; font-weight: 700; color: var(--heading); }
.step-card p { margin-top: 0.5rem; font-size: 1rem; line-height: 1.6; color: var(--foreground); }
.steps-cta { margin-top: 2.5rem; text-align: center; }

/* =============================================================
   HOW IT WORKS
   ============================================================= */
.two-col-text-visual {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) { .two-col-text-visual { grid-template-columns: 1fr 1fr; } }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--muted-foreground);
}
.check-list li + li { margin-top: 0.75rem; }
.check-list .check-icon { margin-top: 0.1875rem; flex-shrink: 0; color: var(--accent); }
.check-list svg { width: 1.25rem; height: 1.25rem; }

.visual-card {
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.75rem;
  box-shadow: var(--shadow-glow);
}
.visual-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.visual-card-title { font-weight: 700; color: var(--heading); }

/* Score bars */
.score-bar-wrap + .score-bar-wrap { margin-top: 1.25rem; }
.score-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--heading);
  margin-bottom: 0.375rem;
}
.score-bar-track {
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--muted);
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--accent);
  transition: width 0.6s ease;
}

/* Detection result colors */
.highlight-ai { background: var(--ai-tint); border-radius: 0.75rem; padding: 0.5rem 0.75rem; color: var(--foreground); margin-bottom: 0.75rem; }
.highlight-human { background: var(--human-tint); border-radius: 0.75rem; padding: 0.5rem 0.75rem; color: var(--foreground); margin-bottom: 0.75rem; }

/* Illustrative badge */
.tag-illustrative {
  display: inline-block;
  border-radius: 9999px;
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
}

/* =============================================================
   GROK MODELS
   ============================================================= */
.models-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 768px) { .models-grid { grid-template-columns: 1fr 1fr; } }

.model-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.75rem;
}
.model-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.model-name { font-size: 1.25rem; font-weight: 700; color: var(--heading); }
.model-status-verified {
  border-radius: 9999px;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
}
.model-status-partial {
  border-radius: 9999px;
  border: 1px solid var(--border);
  color: var(--heading);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
}
.model-status-unverified {
  border-radius: 9999px;
  border: 1px dashed var(--muted-foreground);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
}
.model-date-box {
  margin-top: 1rem;
  border-radius: var(--radius-2xl);
  background: var(--bg-soft);
  padding: 0.75rem 1rem;
}
.model-date-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
.model-date { margin-top: 0.25rem; font-family: monospace; font-size: 1.125rem; font-weight: 700; color: var(--heading); }
.model-note { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.model-desc { margin-top: 1rem; font-size: 1rem; color: var(--muted-foreground); }
.model-cols { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 480px) { .model-cols { grid-template-columns: 1fr 1fr; } }
.model-col-title { font-size: 0.875rem; font-weight: 600; color: var(--heading); }
.model-feat-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.model-feat-list li { display: flex; gap: 0.5rem; font-size: 0.9375rem; color: var(--muted-foreground); }
.model-feat-list li + li { margin-top: 0.375rem; }
.model-feat-list svg { flex-shrink: 0; margin-top: 0.1875rem; width: 1rem; height: 1rem; color: var(--accent); }
.model-use-list svg { color: var(--accent); }
.model-specs { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.9375rem; }
.model-spec-row { display: flex; justify-content: space-between; gap: 1rem; }
.model-spec-row + .model-spec-row { margin-top: 0.25rem; }
.model-spec-key { color: var(--muted-foreground); }
.model-spec-val { font-weight: 500; color: var(--heading); text-align: right; word-break: break-word; max-width: 65%; }
.model-source { margin-top: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--heading); text-decoration: underline; text-underline-offset: 4px; }
.model-source:hover { color: var(--muted-foreground); }

/* =============================================================
   WRITING PATTERNS
   ============================================================= */
.pattern-card { border-radius: var(--radius-3xl); border: 1px solid var(--border); background: var(--card); padding: 1.75rem; }
.pattern-badge-ai { border-radius: 9999px; background: var(--ai-tint); color: var(--ai); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; display: inline-block; }
.pattern-badge-human { border-radius: 9999px; background: var(--human-tint); color: var(--human); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; display: inline-block; }
.pattern-quote { margin-top: 1rem; border-left: 2px solid var(--border); padding-left: 1rem; font-size: 0.9375rem; font-style: italic; color: var(--foreground); }

/* =============================================================
   SCORES
   ============================================================= */
.scores-grid { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 768px) { .scores-grid { grid-template-columns: 1fr 1fr 1fr; } }
.score-range-card { border-radius: var(--radius-3xl); border: 1px solid var(--border); background: var(--card); padding: 1.75rem; text-align: center; }
.score-range-badge { display: inline-block; border-radius: 9999px; padding: 0.25rem 1rem; font-family: monospace; font-size: 0.875rem; font-weight: 700; }
.score-range-title { margin-top: 1rem; font-size: 1.25rem; }
.score-range-desc { margin-top: 0.5rem; font-size: 1rem; color: var(--muted-foreground); }

/* =============================================================
   MORE TOOLS GRID
   ============================================================= */
.tools-link-grid { display: grid; gap: 0.75rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .tools-link-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tools-link-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.tool-link-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0 1.5rem;
  font-weight: 600;
  color: var(--heading);
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.tool-link-pill:hover { border-color: var(--accent); background: var(--accent-tint); }
.tool-link-pill svg { width: 1rem; height: 1rem; color: var(--accent); transition: transform 0.15s; }
.tool-link-pill:hover svg { transform: translateX(4px); }

/* =============================================================
   FINAL THOUGHTS
   ============================================================= */
.final-list {
  margin-top: 2.5rem;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
}
.final-list-item {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  border-top: 1px solid var(--border);
}
.final-list-item:first-child { border-top: none; }
.final-list-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  font-family: monospace;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading);
}
.final-list-item h3 { font-size: 1.125rem; }
.final-list-item p { margin-top: 0.25rem; font-size: 1rem; color: var(--muted-foreground); }

/* =============================================================
   ARTICLES / BLOG CARDS
   ============================================================= */
.articles-grid { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 768px) { .articles-grid { grid-template-columns: 1fr 1fr 1fr; } }

.article-card {
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.article-card:hover {
  transform: translateY(-4px);
  border-color: var(--heading);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.08);
}
.article-card-thumb {
  width: 100%;
  height: auto !important;
  max-width: 100%;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  display: block;
  transition: transform 0.3s ease;
}
.article-card:hover .article-card-thumb {
  transform: scale(1.03);
}
.article-card-thumb-placeholder {
  aspect-ratio: 16/9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.article-card:hover .article-card-thumb-placeholder {
  transform: scale(1.03);
}
.placeholder-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  color: #ffffff;
  text-align: center;
  z-index: 2;
  padding: 1rem;
}
.placeholder-icon-wrap {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.placeholder-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.article-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.article-card h3 { font-size: 1.125rem; }
.article-card h3 a { text-decoration: none; color: var(--heading); }
.article-card h3 a:hover { color: var(--accent); }
.article-card-excerpt { margin-top: 0.5rem; font-size: 1rem; color: var(--muted-foreground); flex: 1; }
.article-card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.read-more {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
}
.read-more:hover { text-decoration: underline; }
.articles-cta { margin-top: 2.5rem; text-align: center; }

/* =============================================================
   FAQ ACCORDION
   ============================================================= */
.faq-list { max-width: 51.25rem; margin: 2.5rem auto 0; }
.faq-item {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.5rem;
  min-height: 60px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--heading);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-q-text { font-size: 1.0625rem; }
.faq-icon { font-size: 1.5rem; line-height: 1; color: var(--accent); flex-shrink: 0; }
.faq-answer { padding: 0 1.5rem 1.25rem; font-size: 1rem; color: var(--muted-foreground); }
details[open] .faq-icon-plus { display: none; }
details:not([open]) .faq-icon-minus { display: none; }

/* =============================================================
   CTA SECTION
   ============================================================= */
.cta-outer { padding: 0 0.75rem 4rem; }
@media (min-width: 640px) { .cta-outer { padding: 0 1.5rem 4rem; } }
.cta-inner {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-4xl);
  background: var(--navy);
  padding: 4rem 1.5rem;
  text-align: center;
}
@media (min-width: 640px) { .cta-inner { padding: 5rem 3rem; } }
.cta-glow {
  position: absolute;
  top: -10rem;
  left: 50%;
  transform: translateX(-50%);
  width: 44rem;
  height: 20rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.06);
  filter: blur(60px);
  pointer-events: none;
}
.cta-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--navy-muted); }
.cta-h2 { margin-top: 1rem; color: var(--navy-foreground); font-size: clamp(1.75rem, 5vw, 3rem); }
.cta-desc { margin: 1rem auto 0; max-width: 56ch; color: var(--navy-muted); }
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }

/* =============================================================
   COMPARE TABLE / WRITING STYLES TABLE
   ============================================================= */
.data-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  text-align: left;
}
.data-table thead { background: var(--bg-soft); }
.data-table th { padding: 1rem 1.5rem; color: var(--heading); font-weight: 600; }
.data-table tbody tr { border-top: 1px solid var(--border); }
.data-table td, .data-table th[scope="row"] { padding: 1rem 1.5rem; color: var(--muted-foreground); }
.data-table th[scope="row"] { font-weight: 600; color: var(--heading); }
.data-table .check-cell { color: var(--accent); }
.data-table .check-cell svg { width: 1.25rem; height: 1.25rem; }

/* =============================================================
   INNER PAGES (About, Contact, Legal)
   ============================================================= */
.inner-hero {
  background: var(--hero-gradient);
  padding: 3.5rem 1rem 4rem;
  text-align: center;
}
@media (min-width: 640px) { .inner-hero { padding-top: 5rem; } }
.eyebrow {
  display: inline-flex;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--secondary);
}
.inner-hero h1 { margin-top: 1.25rem; }
.inner-hero .hero-desc { margin-top: 1.25rem; }

.about-blocks-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .about-blocks-grid { grid-template-columns: 1fr 1fr 1fr; } }
.about-block { border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--card); padding: 1.5rem; }
.about-block h2 { font-size: 1.25rem; }
.about-block p { margin-top: 0.75rem; font-size: 1rem; color: var(--secondary); }

.tools-cards-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .tools-cards-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tools-cards-grid { grid-template-columns: 1fr 1fr 1fr; } }
.tool-about-card { border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--card); padding: 1.5rem; text-decoration: none; display: block; transition: border-color 0.15s; }
.tool-about-card:hover { border-color: var(--heading); }
.tool-about-card h3 { font-size: 1.125rem; color: var(--heading); }
.tool-about-card p { margin-top: 0.5rem; font-size: 1rem; color: var(--secondary); }

/* Contact Form */
.contact-card {
  max-width: 36rem;
  margin: 2.5rem auto 0;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: var(--shadow-glow);
  text-align: left;
}
@media (min-width: 640px) { .contact-card { padding: 2rem; } }
.contact-form-grid { display: grid; gap: 1rem; }
@media (min-width: 480px) { .contact-form-grid { grid-template-columns: 1fr 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label { font-size: 0.875rem; font-weight: 600; color: var(--heading); }
.form-input, .form-textarea {
  display: block;
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  transition: border-color 0.15s;
}
.form-input:focus, .form-textarea:focus { border-color: var(--accent); outline: none; }
.form-textarea { resize: vertical; min-height: 8rem; }
.form-submit-wrap { margin-top: 1.5rem; }
.contact-email-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--secondary);
}

/* Legal pages */
.legal-content {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1rem 5rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--secondary);
}
.legal-content h2 { margin-top: 2.5rem; font-size: 1.5rem; }
.legal-content h3 { margin-top: 1.5rem; font-size: 1.125rem; }
.legal-content p { margin-top: 1rem; }
.legal-content ul { list-style: disc; padding-left: 1.5rem; margin-top: 0.75rem; }
.legal-content ul li + li { margin-top: 0.375rem; }
.legal-content strong { color: var(--heading); }
.legal-content a { font-weight: 500; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================
   BLOG LISTING (home.php)
   ============================================================= */
.blog-hero {
  background: var(--hero-gradient);
  padding: 3.5rem 1rem 4rem;
  text-align: center;
}
.blog-filter-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.blog-filter-pill {
  display: inline-block;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--heading);
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.blog-filter-pill:hover, .blog-filter-pill.active {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--accent);
}

/* Featured sticky post */
.featured-post {
  display: grid;
  gap: 2rem;
  align-items: center;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) { .featured-post { grid-template-columns: 1fr 1fr; } }
.featured-post-img { width: 100%; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; display: block; }
.featured-post-img-placeholder { width: 100%; aspect-ratio: 16/9; }
.featured-post-body { padding: 1.75rem; }
.featured-badge { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.featured-post h2 { margin-top: 0.75rem; font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
.featured-post h2 a { text-decoration: none; color: var(--heading); }
.featured-post h2 a:hover { color: var(--accent); }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  align-items: center;
}
.reading-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  background: var(--muted);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

/* Blog grid */
.blog-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Blog Pagination (Horizontal Flex Row) */
.blog-pagination {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.blog-pagination ul.page-numbers,
.blog-pagination ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.blog-pagination ul.page-numbers li,
.blog-pagination li {
  list-style: none !important;
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

.blog-pagination a.page-numbers,
.blog-pagination span.page-numbers,
.blog-pagination a,
.blog-pagination span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.75rem !important;
  height: 2.75rem !important;
  padding: 0 1rem !important;
  border-radius: 9999px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--heading) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.blog-pagination a.page-numbers:hover,
.blog-pagination a:hover {
  border-color: var(--heading) !important;
  background: var(--accent-tint) !important;
  color: var(--heading) !important;
  transform: translateY(-1px) !important;
}

.blog-pagination span.page-numbers.current,
.blog-pagination span.current {
  background: var(--heading) !important;
  color: var(--background) !important;
  border-color: var(--heading) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.blog-pagination .prev.page-numbers,
.blog-pagination .next.page-numbers {
  padding: 0 1.25rem !important;
  font-weight: 600 !important;
}

/* =============================================================
   SINGLE POST (single.php)
   ============================================================= */
.single-hero {
  background: var(--hero-gradient);
  padding: 2.5rem 1rem 3rem;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}
.breadcrumbs a { color: var(--muted-foreground); text-decoration: none; }
.breadcrumbs a:hover { color: var(--heading); }
.breadcrumb-sep { color: var(--muted-foreground); }

.single-title { font-size: clamp(1.75rem, 5vw, 3rem); letter-spacing: -0.03em; }
.single-featured-img {
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  margin-bottom: 2.5rem;
  display: block;
}

/* Social share */
.share-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}
.share-label { font-size: 0.875rem; font-weight: 600; color: var(--heading); }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--heading);
  transition: background-color 0.15s;
}
.share-btn:hover { background: var(--accent-tint); }
.share-btn-facebook:hover { background: #e7f3ff; color: #1877f2; border-color: #1877f2; }
.share-btn-twitter:hover { background: #e8f5fe; color: #1da1f2; border-color: #1da1f2; }
.share-btn-pinterest:hover { background: #fde8e8; color: #e60023; border-color: #e60023; }

/* Post content */
.post-content { font-size: 1.0625rem; line-height: 1.8; color: var(--secondary); }
.post-content > * + * { margin-top: 1.1em; }
.post-content h2 { margin-top: 2em; }
.post-content h3 { margin-top: 1.6em; }
.post-content h4 { margin-top: 1.4em; }
.post-content strong { color: var(--heading); }
.post-content a { color: var(--heading); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.post-content ul { list-style: disc; padding-left: 1.4em; }
.post-content ol { list-style: decimal; padding-left: 1.4em; }
.post-content li + li { margin-top: 0.35em; }
.post-content img { border-radius: 1rem; border: 1px solid var(--border); }
.post-content blockquote { border-left: 3px solid var(--heading); padding-left: 1em; font-style: italic; }
.post-content table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; display: block; overflow-x: auto; }
.post-content th, .post-content td { border: 1px solid var(--border); padding: 0.6em 0.8em; text-align: left; }
.post-content th { background: var(--muted); color: var(--heading); }
.post-content pre { background: var(--muted); border-radius: 0.75rem; padding: 1.25rem; overflow-x: auto; font-size: 0.9rem; }
.post-content code { font-family: ui-monospace, monospace; font-size: 0.9em; background: var(--muted); padding: 0.1em 0.3em; border-radius: 0.25rem; }

/* Author bio */
.author-bio {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.5rem;
  margin-top: 2.5rem;
}
.author-avatar { width: 4rem; height: 4rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border); }
.author-name { font-weight: 700; font-size: 1rem; color: var(--heading); }
.author-role { font-size: 0.8125rem; color: var(--muted-foreground); }
.author-desc { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--secondary); }

/* Post nav */
.post-nav {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1rem 1.25rem;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.post-nav-link:hover { border-color: var(--accent); background: var(--accent-tint); }
.post-nav-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.post-nav-title { font-weight: 600; font-size: 0.9375rem; color: var(--heading); }
.post-nav-prev { align-items: flex-start; }
.post-nav-next { align-items: flex-end; text-align: right; }

/* Related posts */
.related-posts-grid { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 640px) { .related-posts-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .related-posts-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* =============================================================
   COMMENTS
   ============================================================= */
.comments-section { padding: 3rem 0; }
.comments-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment { border-bottom: 1px solid var(--border); padding: 1.5rem 0; }
.comment:last-child { border-bottom: none; }
.comment-header { display: flex; gap: 0.875rem; align-items: flex-start; margin-bottom: 0.75rem; }
.comment-avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; }
.comment-meta { flex: 1; }
.comment-author-name { font-weight: 600; font-size: 0.9375rem; color: var(--heading); }
.comment-date { font-size: 0.8125rem; color: var(--muted-foreground); }
.comment-body { font-size: 0.9375rem; color: var(--secondary); }
.comment-reply-link { font-size: 0.8125rem; font-weight: 600; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.children { padding-left: 2rem; border-left: 2px solid var(--border); margin-top: 1rem; }

.comment-form-wrap { margin-top: 2.5rem; }
.comment-form-wrap h3 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.comment-form-fields { display: grid; gap: 1rem; }
@media (min-width: 480px) { .comment-form-fields { grid-template-columns: 1fr 1fr; } }
.comment-form-message { grid-column: 1 / -1; }
.comment-submit-wrap { margin-top: 1rem; }
.comment-form input, .comment-form textarea {
  display: block;
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  transition: border-color 0.15s;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--accent); outline: none; }

/* =============================================================
   404 PAGE
   ============================================================= */
.page-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 4rem 1rem;
}
.page-404-code {
  font-size: clamp(5rem, 20vw, 10rem);
  font-weight: 800;
  line-height: 1;
  color: var(--accent-tint);
  letter-spacing: -0.05em;
}
.page-404 h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-top: 1rem; }
.page-404 p { max-width: 42ch; margin: 1rem auto 0; color: var(--muted-foreground); }
.page-404-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }

/* =============================================================
   SCROLL REVEAL
   ============================================================= */
.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* =============================================================
   WORDPRESS NATIVE ELEMENTS
   ============================================================= */
.wp-block-image img { border-radius: var(--radius-xl); }
.sticky { /* WordPress sticky post — handled in templates */ }
.bypostauthor { /* WordPress bypostauthor — style handled inline */ }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.875rem; text-align: center; color: var(--muted-foreground); margin-top: 0.5rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.gallery-item img { border-radius: 0.5rem; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* =============================================================
   INTERACTIVE TOOLS SYSTEM & LOVABLE PARITY STYLES
   ============================================================= */

/* Toolbar & Stats */
.zg-detector-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.zg-samples-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.zg-toolbar-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
.zg-stats-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.zg-stat-item strong {
  color: var(--heading);
  font-weight: 700;
}
.zg-stat-dot {
  color: var(--border);
}

/* Radial Gauge & Results Panel */
.zg-results-panel {
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
}
.zg-results-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 768px) {
  .zg-results-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

.zg-gauge-box {
  text-align: center;
  padding: 1.25rem;
  background: var(--muted);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
}
.zg-gauge-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 0.75rem;
}
.zg-arc-wrap {
  position: relative;
  max-width: 280px;
  margin: 0 auto;
}
.zg-arc-svg {
  width: 100%;
  display: block;
}
.zg-arc-center-text {
  position: absolute;
  inset-inline: 0;
  bottom: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.zg-gauge-number {
  font-size: 2.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}
.zg-gauge-status {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  margin-top: 0.375rem;
}
.zg-gauge-summary {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--secondary);
  line-height: 1.5;
}

/* Score Breakdown Bars */
.zg-bars-box {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.zg-bars-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 0.25rem;
}
.zg-bar-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.zg-bar-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading);
}
.zg-bar-track {
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--muted);
  overflow: hidden;
}
.zg-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--accent);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Grammar Suggestions */
.zg-grammar-panel {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--muted);
}
.zg-grammar-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 0.75rem;
}
.zg-grammar-item {
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--border);
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Disclaimers & Notices */
.zg-disclaimer-note {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}
.zg-notice {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--accent-tint);
  color: var(--accent-dark);
}

/* Chips / Pills System */
.zg-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.zg-chip {
  min-height: 2.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--heading);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.zg-chip:hover {
  background: var(--accent-tint);
  border-color: var(--border);
}
.zg-chip.active,
.zg-chip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--accent);
  font-weight: 600;
}

/* Image Generator Gallery */
.zg-gallery-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .zg-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}
.zg-gallery-card {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--muted);
  box-shadow: var(--shadow-sm);
}
.zg-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zg-gallery-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 0.75rem;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Financial Calculator Layout */
.zg-calc-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .zg-calc-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.zg-summary-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .zg-summary-cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.zg-summary-card {
  border-left: 3px solid var(--accent);
  background: var(--muted);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}
.zg-summary-label {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  font-weight: 500;
}
.zg-summary-value {
  display: block;
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--heading);
  margin-top: 0.375rem;
}

/* =============================================================
   AI FORTUNE COOKIE GENERATOR — REDESIGNED 2-COLUMN LAYOUT
   ============================================================= */
.zg-fortune-generator-wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
}

.zg-fortune-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .zg-fortune-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.zg-fortune-stage-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-glow);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.zg-fortune-settings-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-soft);
  text-align: left;
}

.zg-fortune-stage-header {
  margin-bottom: 1.25rem;
}

.zg-ai-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  background: rgba(46, 125, 50, 0.08);
  color: #2e7d32;
  border: 1px solid rgba(46, 125, 50, 0.2);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #2e7d32;
  display: inline-block;
  animation: pulseGreenDot 2s infinite;
}

@keyframes pulseGreenDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(46, 125, 50, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

.zg-cookie-stage {
  margin: 0.75rem auto 1rem;
}

.zg-cookie-visual-btn {
  background: var(--accent-tint);
  width: 9rem;
  height: 9rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.12);
  margin: 0 auto;
}

.zg-cookie-visual-btn:hover {
  transform: scale(1.08) rotate(3deg);
  border-color: var(--accent);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.18);
}

.zg-cookie-visual-btn:active {
  transform: scale(0.95);
}

.zg-cookie-emoji {
  font-size: 4.5rem;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
  transition: transform 0.2s ease;
}

.zg-cookie-shaking .zg-cookie-emoji {
  animation: cookieShake 0.4s ease-in-out infinite;
}

@keyframes cookieShake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-8deg) scale(1.05); }
  75% { transform: rotate(8deg) scale(1.05); }
}

.zg-cookie-tap-hint {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
  display: block;
}

.zg-fortune-status-heading {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin: 0.75rem 0 0.25rem 0;
}

.zg-fortune-status-sub {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  max-width: 26rem;
  margin: 0 auto;
}

/* Authentic Fortune Slip Unroll Animation */
.zg-fortune-paper {
  width: 100%;
  max-width: 28rem;
  margin-top: 1.5rem;
}

.zg-paper-unroll {
  animation: fortuneSlipUnroll 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fortuneSlipUnroll {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.zg-fortune-paper-inner {
  background: #fffdf8;
  border: 2px solid #b71c1c;
  outline: 1px dashed #d32f2f;
  outline-offset: -5px;
  border-radius: var(--radius-xl);
  padding: 1.625rem 1.75rem;
  box-shadow: 0 12px 28px -6px rgba(183, 28, 28, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  text-align: center;
}

.zg-fortune-quote-mark {
  position: absolute;
  top: 0.25rem;
  left: 0.75rem;
  font-size: 3rem;
  line-height: 1;
  font-family: Georgia, serif;
  color: rgba(183, 28, 28, 0.15);
  pointer-events: none;
}

.zg-fortune-message {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0;
  position: relative;
  z-index: 2;
}

.zg-fortune-numbers-wrap {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(183, 28, 28, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.zg-lucky-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #b71c1c;
}

.zg-lucky-digits-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
}

.zg-lucky-digit-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: #b71c1c;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 800;
  box-shadow: 0 2px 5px rgba(183, 28, 28, 0.28);
}

.zg-fortune-meta-row {
  margin-top: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.zg-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.04);
  color: #333333;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.color-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
  background: #d4af37;
}

.zg-fortune-focus-note {
  font-size: 0.75rem;
  font-style: italic;
  color: #777777;
  margin: 0.75rem 0 0 0;
}

.zg-fortune-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  width: 100%;
}

.zg-cookie-baking {
  opacity: 0.7;
  pointer-events: none;
}

/* Settings Column */
.zg-settings-header {
  margin-bottom: 1.25rem;
}

.zg-settings-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin: 0 0 0.25rem 0;
}

.zg-settings-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0;
}

.zg-setting-group {
  margin-top: 1.375rem;
}

.zg-setting-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 0.5rem;
}

.zg-optional-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: var(--muted);
  color: var(--muted-foreground);
}

.zg-topic-input {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  background: var(--background);
  color: var(--heading);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.zg-topic-input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.zg-input-hint {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  margin: 0.375rem 0 0 0;
}

.zg-fortune-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1rem 1.25rem;
  margin-top: 1.75rem;
}

.zg-tip-icon {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 0.1rem;
}

.zg-tip-text {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  margin: 0;
}

/* Pangram Alphabet Badges */
.zg-char-badge {
  display: grid;
  place-items: center;
  height: 2.25rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 800;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--secondary);
  transition: all 0.2s;
}
.zg-char-badge.active {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
.zg-char-badge.missing {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.9); }
}

/* Prompt Result Box */
.zg-prompt-result-box {
  min-height: 5rem;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--muted);
  padding: 1rem 1.25rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--heading);
}

/* =============================================================
   LOVABLE PARITY: DETECTOR & IMAGE GENERATOR COMPONENT STYLES
   ============================================================= */

/* Universal Utility Classes used across Lovable Templates */
.w-full { width: 100% !important; box-sizing: border-box !important; }
.max-w-\[920px\] { max-width: 920px !important; }
.max-w-sm { max-width: 24rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-5xl { max-width: 64rem !important; }
.max-w-6xl { max-width: 72rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.items-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }

.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.place-items-center { place-items: center !important; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .sm\:p-6 { padding: 1.5rem !important; }
  .sm\:p-7 { padding: 1.75rem !important; }
  .sm\:p-8 { padding: 2rem !important; }
  .sm\:text-xl { font-size: 1.25rem !important; }
  .sm\:text-4xl { font-size: 2.25rem !important; }
  .sm\:text-5xl { font-size: 3rem !important; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-\[minmax\(0\,5fr\)_minmax\(0\,6fr\)\] {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important;
  }
}

/* Icon Dimensions */
.h-4 { height: 1rem !important; max-height: 1rem !important; }
.w-4 { width: 1rem !important; max-width: 1rem !important; }
.h-5 { height: 1.25rem !important; max-height: 1.25rem !important; }
.w-5 { width: 1.25rem !important; max-width: 1.25rem !important; }
.h-8 { height: 2rem !important; max-height: 2rem !important; }
.w-8 { width: 2rem !important; max-width: 2rem !important; }
svg.h-4.w-4 { width: 16px !important; height: 16px !important; min-width: 16px !important; }
svg.h-5.w-5 { width: 20px !important; height: 20px !important; min-width: 20px !important; }
svg.h-8.w-8 { width: 32px !important; height: 32px !important; min-width: 32px !important; }

/* Spacing Tokens */
.gap-1 { gap: 0.25rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-6 { gap: 1.5rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.25rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-7 { margin-top: 1.75rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mt-10 { margin-top: 2.5rem !important; }

.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-10 { padding: 2.5rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }

/* Borders & Radii */
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-3xl { border-radius: 1.5rem !important; }
.rounded-full { border-radius: 9999px !important; }

.border { border-width: 1px !important; border-style: solid !important; }
.border-2 { border-width: 2px !important; }
.border-dashed { border-style: dashed !important; }
.border-border { border-color: var(--border) !important; }
.border-input { border-color: var(--input) !important; }

/* Backgrounds & Colors */
.bg-card { background-color: var(--card) !important; }
.bg-background { background-color: var(--background) !important; }
.bg-muted { background-color: var(--muted) !important; }
.bg-soft { background-color: var(--bg-soft) !important; }
.bg-hero { background: var(--hero-gradient) !important; }
.bg-accent-tint { background-color: var(--accent-tint) !important; }
.bg-navy { background-color: var(--navy) !important; }

.text-foreground { color: var(--foreground) !important; }
.text-heading { color: var(--heading) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-muted-foreground { color: var(--muted-foreground) !important; }
.text-accent { color: var(--accent) !important; }
.text-accent-dark { color: var(--accent-dark) !important; }
.text-navy-foreground { color: var(--navy-foreground) !important; }
.text-navy-muted { color: var(--navy-muted) !important; }

.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }
.tabular-nums { font-variant-numeric: tabular-nums !important; }

.text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
.text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
.text-5xl { font-size: 3rem !important; line-height: 1 !important; }

.shadow-glow { box-shadow: var(--shadow-glow) !important; }
.shadow-soft { box-shadow: var(--shadow-soft) !important; }
.min-w-0 { min-width: 0 !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; }

/* ── Specific Scoped Styles for AI Detector ToolCard ── */
.zg-detector-tool {
  display: block !important;
  max-width: 920px !important;
  margin: 2.5rem auto 0 !important;
  border-radius: 1.5rem !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  padding: 1.5rem !important;
  text-align: left !important;
  box-shadow: var(--shadow-glow) !important;
  box-sizing: border-box !important;
}
@media (min-width: 640px) {
  .zg-detector-tool { padding: 2rem !important; }
}
.zg-detector-tool textarea#input-text {
  display: block !important;
  width: 100% !important;
  min-height: 200px !important;
  resize: vertical !important;
  border-radius: 1rem !important;
  border: 1px solid var(--border) !important;
  background: var(--background) !important;
  padding: 1rem !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--foreground) !important;
  box-sizing: border-box !important;
  margin-top: 0.75rem !important;
}
.zg-detector-tool textarea#input-text:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}
.zg-detector-tool [role="tablist"] {
  display: flex !important;
  max-width: 24rem !important;
  margin: 0 auto !important;
  border-radius: 9999px !important;
  background: var(--muted) !important;
  padding: 0.25rem !important;
}
.zg-detector-tool .zg-input-tab {
  flex: 1 1 0% !important;
  min-height: 44px !important;
  border-radius: 9999px !important;
  padding: 0 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  background: transparent !important;
  color: var(--muted-foreground) !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.zg-detector-tool .zg-input-tab:hover { color: var(--heading) !important; }
.zg-detector-tool .zg-input-tab.active,
.zg-detector-tool .zg-input-tab[aria-selected="true"] {
  background: var(--card) !important;
  color: var(--heading) !important;
  box-shadow: var(--shadow-soft) !important;
}
.zg-detector-tool .zg-example-pill {
  min-height: 36px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--border) !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--heading) !important;
  background: var(--card) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}
.zg-detector-tool .zg-example-pill:hover { background: var(--accent-tint) !important; }
.zg-detector-tool section[aria-labelledby="stats-h"] dl {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  margin-top: 0.75rem !important;
}
@media (min-width: 640px) {
  .zg-detector-tool section[aria-labelledby="stats-h"] dl {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
.zg-detector-tool section[aria-labelledby="stats-h"] dl > div {
  border-radius: 1rem !important;
  background: var(--muted) !important;
  padding: 1rem !important;
  text-align: left !important;
}

/* ── Specific Scoped Styles for Grok Image Generator ── */
.zg-image-tool {
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-width: 72rem !important;
  margin: 2.5rem auto 0 !important;
  gap: 1.5rem !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
@media (min-width: 1024px) {
  .zg-image-tool {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important;
  }
}
.zg-image-tool > div:first-child {
  border-radius: 1.5rem !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-glow) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
@media (min-width: 640px) {
  .zg-image-tool > div:first-child { padding: 1.75rem !important; }
}
.zg-image-tool section[aria-labelledby="results-h"] {
  border-radius: 1.5rem !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
@media (min-width: 640px) {
  .zg-image-tool section[aria-labelledby="results-h"] { padding: 1.75rem !important; }
}
.zg-image-tool textarea#prompt {
  display: block !important;
  width: 100% !important;
  min-height: 130px !important;
  resize: vertical !important;
  border-radius: 1rem !important;
  border: 1px solid var(--border) !important;
  background: var(--background) !important;
  padding: 1rem !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--foreground) !important;
  box-sizing: border-box !important;
  margin-top: 0.75rem !important;
}
.zg-image-tool textarea#prompt:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}
.zg-image-tool button#btn-surprise {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  min-height: 36px !important;
  font-weight: 600 !important;
  color: var(--heading) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
}
.zg-image-tool button#btn-surprise svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  display: inline-block !important;
}
.zg-image-tool .zg-chip-pill {
  min-height: 40px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--border) !important;
  padding: 0.375rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--heading) !important;
  background: var(--card) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.zg-image-tool .zg-chip-pill:hover { background: var(--accent-tint) !important; }
.zg-image-tool .zg-chip-pill.active,
.zg-image-tool .zg-chip-pill[aria-pressed="true"] {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
  font-weight: 600 !important;
}
.zg-image-tool button#btn-generate-image {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-height: 48px !important;
  border-radius: 9999px !important;
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 1.75rem !important;
  transition: background-color 0.15s ease !important;
}
.zg-image-tool button#btn-generate-image:hover { background: var(--accent-dark) !important; }
.zg-image-tool button#btn-generate-image svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
}
.zg-image-tool #zg-images-grid {
  display: grid !important;
  gap: 1rem !important;
  margin-top: 1.25rem !important;
  width: 100% !important;
}
.zg-image-tool #zg-images-grid.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.zg-image-tool .aspect-square {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
}
.zg-image-tool .aspect-video {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
}
.zg-image-tool .aspect-portrait {
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
}
.zg-image-tool .grid.place-items-center {
  display: grid !important;
  place-items: center !important;
  border-radius: 1rem !important;
  border: 2px dashed var(--border) !important;
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  min-height: 180px !important;
}
.zg-image-tool .grid.place-items-center svg {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
}

/* File Upload Dropzone */
.zg-file-dropzone {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  border-radius: 1rem !important;
  border: 2px dashed var(--border) !important;
  padding: 2.5rem 1.5rem !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background-color 0.15s, border-color 0.15s !important;
}
.zg-file-dropzone:hover,
.zg-file-dropzone.drag-active {
  border-color: var(--accent) !important;
  background: var(--accent-tint) !important;
}

/* Gauge Arc Animation */
#zg-gauge-arc {
  transition: stroke-dasharray 900ms ease-out !important;
}

/* =============================================================
   SOCIAL MEDIA PROFILE FINDER (4 TABS SUITE)
   ============================================================= */
.zg-social-finder-tool {
  box-sizing: border-box !important;
  text-align: left !important;
}

.zg-social-finder-tool * {
  box-sizing: border-box !important;
}

.zg-finder-tabs {
  display: inline-flex !important;
  gap: 0.25rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 9999px !important;
  padding: 0.25rem !important;
  background: var(--muted) !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

.zg-finder-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.5rem !important;
  border-radius: 9999px !important;
  padding: 0 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border: none !important;
  background: transparent !important;
  color: var(--heading) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.zg-finder-tab:hover {
  background: var(--accent-tint) !important;
}

.zg-finder-tab.active,
.zg-finder-tab[aria-selected="true"] {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.zg-sws-engine-chip {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  height: 2.75rem !important;
  padding: 0 1rem !important;
  border-radius: 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  border: 1px solid var(--border) !important;
  background: var(--background) !important;
  color: var(--heading) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.zg-sws-engine-chip:hover {
  background: var(--muted) !important;
}

.zg-sws-engine-chip.active,
.zg-sws-engine-chip[aria-selected="true"] {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

.zg-post-source-chip,
.zg-cat-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  min-height: 38px !important;
  border-radius: 9999px !important;
  padding: 0.375rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border: 1px solid var(--border) !important;
  background: var(--background) !important;
  color: var(--heading) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.zg-post-source-chip:hover,
.zg-cat-chip:hover {
  background: var(--accent-tint) !important;
}

.zg-post-source-chip.active,
.zg-post-source-chip[aria-pressed="true"],
.zg-cat-chip.active,
.zg-cat-chip[aria-pressed="true"] {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

#zg-img-search-dropzone {
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

#zg-img-search-dropzone:hover {
  border-color: var(--accent) !important;
  background: var(--accent-tint) !important;
}

/* =============================================================
   TOOL PAGES REDESIGN: SURROUNDING SECTIONS & EDITORIAL PARITY
   Matches homepage premium design language, spacing, visual
   hierarchy, typography, and interactive components.
   ============================================================= */

/* 1. Breadcrumbs Navigation */
.tool-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1;
}

.tool-breadcrumbs .crumb-link {
  color: var(--muted-foreground);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.tool-breadcrumbs .crumb-link:hover {
  color: var(--heading);
  text-decoration: underline;
}

.tool-breadcrumbs .crumb-sep {
  color: var(--border);
  user-select: none;
}

.tool-breadcrumbs .crumb-mid {
  color: var(--muted-foreground);
  font-weight: 500;
}

.tool-breadcrumbs .crumb-current {
  color: var(--heading);
  font-weight: 600;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 640px) {
  .tool-breadcrumbs .crumb-current {
    max-width: 450px;
  }
}

/* 2. Tool Hero Badge Wrap & Alignment */
.hero-badge-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.section-hero .hero-h1 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--heading);
  max-width: 32ch;
  margin: 0 auto;
}

.section-hero .hero-desc {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.65;
  color: var(--muted-foreground);
  max-width: 60ch;
  margin: 1rem auto 0;
}

/* 3. Interactive Tool Wrapper (Preserving Tool Layout from Centered Hero Bleed) */
.tool-interactive-wrap {
  width: 100%;
  max-width: 56rem;
  margin: 2.25rem auto 0;
  text-align: left !important;
  position: relative;
  z-index: 2;
}

/* 4. Trust Badges Row */
.section-hero .hero-badges {
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem 2.25rem;
}

.section-hero .hero-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--heading);
}

.section-hero .hero-badge-item svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* 5. Tool Guide Wrapper & Sections Pacing */
.tool-guide-wrapper {
  position: relative;
  width: 100%;
  background: var(--background);
}

.tool-section {
  position: relative;
  padding: 4.5rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--background);
}

.tool-section.bg-soft {
  background: var(--bg-soft);
}

@media (min-width: 640px) {
  .tool-section {
    padding: 5.5rem 1.75rem;
  }
}

@media (min-width: 1024px) {
  .tool-section {
    padding: 6.5rem 2rem;
  }
}

.tool-section-inner {
  max-width: 72rem;
  margin: 0 auto;
}

/* 6. Editorial Tool Sub-Articles & Cards Grids (Homepage Parity) */
.tool-cards-grid-1 {
  max-width: 54rem;
  margin: 2.5rem auto 0;
}

.tool-cards-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 2.5rem auto 0;
}

@media (min-width: 768px) {
  .tool-cards-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}

.tool-cards-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 2.5rem auto 0;
}

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

@media (min-width: 1024px) {
  .tool-cards-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

.tool-sub-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 1.875rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 640px) {
  .tool-sub-card {
    padding: 2.25rem;
  }
}

.tool-sub-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.08);
}

.tool-sub-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading) !important;
  line-height: 1.35;
  margin: 0 0 1rem 0;
}

.tool-sub-paras p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--foreground) !important;
  margin-top: 0.875rem;
}

.tool-sub-paras p:first-child {
  margin-top: 0;
}

.tool-sub-checklist {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.tool-sub-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--foreground) !important;
}

.tool-sub-checklist .check-icon {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--accent);
}

.tool-sub-callouts {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tool-callout-item {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}

.tool-callout-item h4 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--heading) !important;
  margin: 0 0 0.25rem 0;
}

.tool-callout-item p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground) !important;
  margin: 0;
}

/* 7. Steps Section — High-Contrast Flagship Treatment (Screenshot 2 Fix) */
.steps-outer {
  padding: 1rem 0.75rem 4rem;
}

@media (min-width: 640px) {
  .steps-outer {
    padding: 1.5rem 1.5rem 5rem;
  }
}

.steps-inner {
  max-width: 80rem;
  margin: 0 auto;
  border-radius: var(--radius-4xl) !important;
  background: var(--navy) !important;
  padding: 4rem 1.5rem;
  position: relative;
  overflow: hidden;
}

@media (min-width: 640px) {
  .steps-inner {
    padding: 5rem 2.5rem;
  }
}

.steps-inner .section-head h2 {
  color: var(--navy-foreground) !important;
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.steps-inner .section-head .section-lead {
  color: var(--navy-muted) !important;
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 58ch;
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 3rem;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 640px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .steps-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* 3-Card Balanced Layout (.steps-count-3) */
@media (min-width: 768px) {
  .steps-grid.steps-count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 64rem !important;
  }
}

/* 6-Card Balanced Layout (.steps-count-6) */
@media (min-width: 960px) {
  .steps-grid.steps-count-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 76rem !important;
  }
}

/* -------------------------------------------------------------
   5-Card Balanced Layout System (.steps-count-5 & :has selector)
   Eliminates the awkward 4+1 orphan card bug.
   ------------------------------------------------------------- */
/* Mobile (< 540px): 1 column stacked */
.steps-grid.steps-count-5,
.steps-grid:has(> :nth-child(5):last-child) {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  max-width: 78rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.steps-grid.steps-count-5 > .step-card,
.steps-grid:has(> :nth-child(5):last-child) > .step-card {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Small Tablet (540px - 767px): 2 on row 1, 2 on row 2, 1 centered on row 3 */
@media (min-width: 540px) and (max-width: 767px) {
  .steps-grid.steps-count-5,
  .steps-grid:has(> :nth-child(5):last-child) {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
  }
  .steps-grid.steps-count-5 > .step-card,
  .steps-grid:has(> :nth-child(5):last-child) > .step-card {
    width: calc(50% - 0.5rem) !important;
    flex: 0 0 calc(50% - 0.5rem) !important;
    max-width: calc(50% - 0.5rem) !important;
    padding: 1.5rem 1.25rem !important;
  }
}

/* Tablet & Laptop (768px - 1139px): 3 on Row 1, 2 Centered on Row 2 */
@media (min-width: 768px) and (max-width: 1139px) {
  .steps-grid.steps-count-5,
  .steps-grid:has(> :nth-child(5):last-child) {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: center !important;
    gap: 1.25rem !important;
  }
  .steps-grid.steps-count-5 > .step-card,
  .steps-grid:has(> :nth-child(5):last-child) > .step-card {
    width: calc(33.333% - 0.85rem) !important;
    flex: 0 0 calc(33.333% - 0.85rem) !important;
    max-width: calc(33.333% - 0.85rem) !important;
    padding: 1.75rem 1.25rem !important;
  }
}

/* Wide Desktop (>= 1140px): All 5 cards in 1 sleek, balanced horizontal row */
@media (min-width: 1140px) {
  .steps-grid.steps-count-5,
  .steps-grid:has(> :nth-child(5):last-child) {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    max-width: 80rem !important;
  }
  .steps-grid.steps-count-5 > .step-card,
  .steps-grid:has(> :nth-child(5):last-child) > .step-card {
    width: auto !important;
    flex: initial !important;
    max-width: none !important;
    padding: 1.75rem 1.125rem !important;
  }
  .steps-grid.steps-count-5 .step-card h3,
  .steps-grid:has(> :nth-child(5):last-child) .step-card h3 {
    font-size: 1.0625rem !important;
    line-height: 1.35 !important;
  }
  .steps-grid.steps-count-5 .step-card p,
  .steps-grid:has(> :nth-child(5):last-child) .step-card p {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
  }
}

.steps-inner .step-card {
  border-radius: var(--radius-3xl) !important;
  background: var(--navy-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 2rem 1.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.steps-inner .step-card:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.4) !important;
}

.steps-inner .step-number {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  line-height: 1 !important;
  display: block !important;
}

.steps-inner .step-card h3 {
  margin-top: 1.25rem !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--navy-foreground) !important; /* Pure high contrast #f8f8f8 */
}

.steps-inner .step-card p {
  margin-top: 0.5rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
  color: var(--navy-muted) !important; /* Crisp legible #aaaaaa */
}

/* 11. Real-World Examples & Comparison Matrix */
.example-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .example-card {
    padding: 2.25rem;
  }
}

.example-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.example-pill {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  background: var(--accent-tint);
  color: var(--accent-dark);
}

.example-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin: 0;
}

.example-comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .example-comparison-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.example-box {
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  border: 1px solid var(--border);
}

.example-box-input {
  background: var(--bg-soft);
}

.example-box-output {
  background: var(--card);
}

.example-box-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
}

.example-box-label.output-label {
  color: var(--accent);
}

.example-pre {
  margin: 0;
  padding: 0.875rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--heading);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.example-output-text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--foreground);
  margin: 0;
}

/* 12. Editorial Link Recommendations */
.related-links-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .related-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.editorial-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-link-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.editorial-link-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading);
  transition: color 0.15s ease;
}

.editorial-link-card:hover .editorial-link-title {
  color: var(--accent);
}

.editorial-link-desc {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}

.editorial-link-arrow {
  flex-shrink: 0;
  color: var(--muted-foreground);
  transition: all 0.2s ease;
}

.editorial-link-card:hover .editorial-link-arrow {
  color: var(--accent);
  transform: translate(2px, -2px);
}

/* 13. Related Tools Showcase Grid */
.tools-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .tools-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .tools-showcase-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.tool-showcase-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tool-showcase-card:hover {
  border-color: var(--heading);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.09);
}

.tool-showcase-card.is-current {
  border-color: var(--heading) !important;
  box-shadow: 0 0 0 1.5px var(--heading), 0 8px 20px -4px rgba(0, 0, 0, 0.08) !important;
}

.tool-showcase-badge-current {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: var(--heading);
  color: var(--background);
}

.tool-showcase-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.tool-showcase-cat {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: var(--accent-tint);
  color: var(--accent-dark);
}

.tool-showcase-arrow {
  color: var(--muted-foreground);
  transition: all 0.2s ease;
}

.tool-showcase-card:hover .tool-showcase-arrow {
  color: var(--heading);
  transform: translate(3px, -3px);
}

.tool-showcase-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin: 0 0 0.5rem 0;
}

.tool-showcase-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  margin: 0;
}

/* 14. Responsive Dark Mode Harmonization */
@media (prefers-color-scheme: dark) {
  .tool-breadcrumbs .crumb-current {
    color: var(--heading);
  }
  .editorial-accent-bar {
    background: var(--heading);
  }
  .example-box-input {
    background: #1e1e1e;
  }
  .example-pre {
    background: #242424;
    color: #e0e0e0;
  }
  .step-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
  }
  .tool-showcase-card:hover {
    border-color: var(--heading);
  }
}

/* =============================================================
   ADSENSE AD MANAGEMENT & RESPONSIVE CONTAINERS
   ============================================================= */
.zg-ad-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 2.5rem auto;
  clear: both;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  z-index: 10;
}
.zg-ad-container.zg-ad-top {
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.zg-ad-container.zg-ad-bottom {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}
.zg-ad-container.zg-ad-in-article {
  margin: 2.25rem auto;
}
.zg-ad-wrapper {
  max-width: 100%;
  overflow: hidden;
  display: inline-block;
  min-height: 48px;
}
.zg-ad-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
  line-height: 1;
  user-select: none;
}
.zg-ad-content {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.zg-ad-content ins.adsbygoogle {
  display: block !important;
  margin: 0 auto !important;
}

/* Device Targeting */
@media (max-width: 767px) {
  .zg-ad-desktop-only {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .zg-ad-mobile-only {
    display: none !important;
  }
}

/* Admin Visual Preview Mode Placeholder */
.zg-ad-preview-box {
  border: 2px dashed #3b82f6;
  background: rgba(59, 130, 246, 0.05);
  border-radius: var(--radius-lg, 0.75rem);
  padding: 1.25rem 1.5rem;
  color: #1e40af;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  max-width: 728px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.zg-ad-preview-badge {
  background: #3b82f6;
  color: #ffffff;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  font-weight: 700;
}