/* ── Modern AI Tool Layout — tool-modern.css ── */
:root {
  --p: #7c3aed;
  --p-h: #6d28d9;
  --p-lt: #ede9fe;
  --p-llt: #f5f3ff;
  --bg: #ffffff;
  --bg-2: #f5f3ff;
  --border: #e4e4f0;
  --text: #0f0a1e;
  --text2: #4b4b6a;
  --text3: #8888aa;
  --r: 12px;
  --r-lg: 18px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.6;
}

/* ────────────────────────────────────────────────
   HERO
──────────────────────────────────────────────── */
#hero {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 55%, #ddd6fe 100%);
  border-bottom: 1px solid var(--border);
  padding: 64px 24px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#hero::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.14) 0%, transparent 70%);
  pointer-events: none;
}
#hero::after {
  content: '';
  position: absolute; bottom: -60px; left: -60px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.09) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 700px; margin: 0 auto;
}

/* Hero badge (Onethread uses .hero-badge + .hero-badge-dot) */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(124,58,237,.12); color: var(--p);
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  padding: 6px 16px; border-radius: 100px; margin-bottom: 20px;
  border: 1px solid rgba(124,58,237,.2);
}
.hero-badge-dot {
  width: 7px; height: 7px; background: var(--p);
  border-radius: 50%; flex-shrink: 0;
  animation: heroDotPulse 2s ease-in-out infinite;
}
@keyframes heroDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.8); }
}

#hero h1 {
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 800; color: var(--text);
  line-height: 1.12; letter-spacing: -.5px; margin-bottom: 14px;
}
#hero h1 span { color: var(--p); }
#hero > .hero-inner > p,
.hero-inner > p {
  font-size: 16px; color: var(--text2);
  max-width: 540px; margin: 0 auto 24px; line-height: 1.7;
}

/* Hero pills (to be added to pages) */
.hero-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.hero-pill {
  background: rgba(255,255,255,.8); color: var(--text2);
  font-size: 13px; font-weight: 600;
  padding: 6px 16px; border-radius: 100px;
  border: 1px solid rgba(124,58,237,.2);
}

/* ────────────────────────────────────────────────
   TOOL WRAPPER  (#tool-wrapper > .tool-card.style-dark)
──────────────────────────────────────────────── */
#tool-wrapper {
  display: grid;
  grid-template-columns: 1fr;          /* outer wrapper is single-col */
  max-width: 1200px; margin: 48px auto; padding: 0 24px;
}

/* The tool card is the two-column grid */
#tool-wrapper .tool-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  background: #fff;
  align-items: stretch;
}

/* ────────────────────────────────────────────────
   FORM PANEL
──────────────────────────────────────────────── */
.form-panel {
  background: #fff;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}

/* Default (light) header */
.form-panel-header {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
  display: flex; align-items: center; gap: 12px;
}

/* style-dark: gradient purple → dark-purple header */
#tool-wrapper .tool-card.style-dark .form-panel-header {
  background: linear-gradient(135deg, var(--p) 0%, var(--p-h) 100%);
  border-bottom: none;
}
#tool-wrapper .tool-card.style-dark .form-panel-header-text h3 { color: #fff; }
#tool-wrapper .tool-card.style-dark .form-panel-header-text p  { color: rgba(255,255,255,.72); }
#tool-wrapper .tool-card.style-dark .form-panel-header-icon {
  background: rgba(255,255,255,.18);
  border: 6px solid rgba(255,255,255,.22);
  color: #fff;
}
#tool-wrapper .tool-card.style-dark .ai-chip {
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
}

.form-panel-header-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--p-lt); border: 6px solid var(--p-llt);
  display: flex; align-items: center; justify-content: center;
  color: var(--p); flex-shrink: 0;
}
.form-panel-header-icon svg { width: 18px; height: 18px; }
.form-panel-header-text h3 {
  font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px;
}
.form-panel-header-text p { font-size: 12px; color: var(--text2); }
.ai-chip {
  margin-left: auto;
  background: var(--p-lt); color: var(--p);
  font-size: 10px; font-weight: 800; letter-spacing: .6px;
  padding: 4px 11px; border-radius: 100px;
  text-transform: uppercase;
  border: 1px solid rgba(124,58,237,.25);
}

.form-body { padding: 24px; flex: 1; overflow-y: auto; }

/* ────────────────────────────────────────────────
   FORM ELEMENTS
──────────────────────────────────────────────── */
#tool-wrapper form,
.form-body form {
  display: flex; flex-direction: column; gap: 16px;
}
.form-body form label,
form label {
  display: block;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  margin-bottom: 6px;
}
.form-body form input[type="text"],
.form-body form input[type="number"],
.form-body form input[type="email"],
.form-body form input[type="url"],
.form-body form textarea,
.form-body form select,
form#toolForm input[type="text"],
form#toolForm input[type="number"],
form#toolForm input[type="email"],
form#toolForm input[type="url"],
form#toolForm textarea,
form#toolForm select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  line-height: 1.5;
}
.form-body form input[type="text"]:focus,
.form-body form input[type="number"]:focus,
.form-body form input[type="email"]:focus,
.form-body form input[type="url"]:focus,
.form-body form textarea:focus,
.form-body form select:focus,
form#toolForm input[type="text"]:focus,
form#toolForm input[type="number"]:focus,
form#toolForm input[type="email"]:focus,
form#toolForm input[type="url"]:focus,
form#toolForm textarea:focus,
form#toolForm select:focus {
  border-color: var(--p);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.form-body form textarea,
form#toolForm textarea { resize: vertical; min-height: 100px; }
.form-body form select,
form#toolForm select { cursor: pointer; }

/* ── Generate button (#generateBtn) ── */
#generateBtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 24px;
  background: var(--p); color: #fff;
  border: none; border-radius: var(--r);
  font-size: 15px; font-weight: 800;
  font-family: 'Inter', sans-serif;
  cursor: pointer; margin-top: 4px;
  transition: background .15s, transform .12s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(124,58,237,.3);
}
#generateBtn:hover {
  background: var(--p-h);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124,58,237,.4);
}
#generateBtn:active { transform: translateY(0); }
#generateBtn:disabled { opacity: .65; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-text { /* visible by default */ }
.btn-spinner {
  display: none; align-items: center; gap: 8px;
}
.btn-spinner svg { animation: btnSpin 1s linear infinite; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ────────────────────────────────────────────────
   OUTPUT PANEL
──────────────────────────────────────────────── */
.output-panel {
  display: flex; flex-direction: column;
  background: #1a2637;
  min-height: 460px;
}

/* Output panel header — dark purple */
.output-header {
  display: flex;
  gap: 1rem; padding: 14px 20px;
  align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #5b21b6 0%, #6938ef 100%);
  min-height: 56px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.output-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #fff;
  margin: 0;
}
.output-title svg { color: rgba(255,255,255,.8); flex-shrink: 0; }
.output-actions {
  display: flex; align-items: center; gap: 8px;
}

/* Stop and copy buttons — always rendered, hidden until active */
#stopBtn, #copyBtn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer; border: none;
  white-space: nowrap; opacity: .65;
  transition: opacity .15s, background .15s;
}
#stopBtn { background: rgba(239,68,68,.2); color: #fca5a5; }
#copyBtn { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.18); }
#stopBtn:hover { background: rgba(239,68,68,.32); opacity: 1; }
#copyBtn:hover { background: rgba(255,255,255,.22); opacity: 1; }
#stopBtn.visible, #copyBtn.visible { opacity: 1; }

/* Output body */
.output-body {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
}

/* #output — dark output area */
#output {
  padding: 20px 24px;
  background: #1a2637;
  flex: 1;
  display: flex; flex-direction: column; gap: 0.5rem;
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 400; line-height: 1.8;
  min-height: 400px;
}
#output.empty {
  align-items: center; text-align: center; justify-content: center;
}

/* Empty state */
.out-empty { text-align: center; color: rgba(255,255,255,.4); }
.out-empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(105,56,239,.2); color: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  border: 2px dashed rgba(105,56,239,.35);
}
.out-empty p { font-size: 14px; color: rgba(255,255,255,.35); }

/* Markdown output typography */
#output h1 { margin: 0 !important; padding: 0 !important; font-size: 2em !important; line-height: 1.4 !important; }
#output h2 { margin: 0 !important; padding: 0 !important; font-size: 1.6em !important; line-height: 1.4 !important; }
#output h3 { margin: 0 !important; padding: 0 !important; font-size: 1.1em !important; line-height: 1.4 !important; }
#output p  { margin: 0; }
#output li { margin-bottom: 0.3em; }
#output ul, #output ol { padding-left: 1.4em; }
#output strong { font-weight: 700; color: rgba(255,255,255,.95); }
#output svg { min-width: 100rem; }

/* Tables */
#output table { border-collapse: collapse; width: 100%; margin: .8em 0; }
#output table, #output th, #output td { border: 1px solid rgba(255,255,255,.2); }
#output td { padding: 0.75rem 1rem; }
#output th { text-align: initial; font-size: 1.1em; background: rgba(124,58,237,.3); }
li:has(h1)::marker { font-size: 2em !important; }
li:has(h2)::marker { font-size: 1.6em !important; }

/* Code blocks */
code { white-space: pre-line; }
code.hljs { white-space: pre-wrap; }
#output code {
  background: rgba(255,255,255,.1);
  padding: 2px 6px; border-radius: 4px; font-size: .9em;
}
#output pre {
  background: rgba(0,0,0,.3);
  padding: 14px; border-radius: 10px; overflow-x: auto;
  position: relative;
}
pre { position: relative; }
.copy-button { position: absolute; right: 6px; top: -12px; }
.copy-button svg { min-width: 0 !important; }

/* Streaming cursor */
.cursor-blink {
  display: inline-block;
  animation: cursorBlink .7s step-end infinite;
  color: var(--p-lt);
}
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Error state */
.out-error {
  color: #fca5a5; background: rgba(185,28,28,.2);
  padding: 14px; border-radius: 10px; font-size: 14px;
}

/* Flowchart / Mermaid overrides */
#output #img-container {
  display: flex; width: 90px; height: 90px;
  justify-content: center; align-items: center;
  border-radius: 50%; background: #6938ef;
}
#output img { width: 60px; height: 60px; flex-shrink: 0; }
#circle-above-img { width: 10px; height: 10px; border-radius: 50%; background: #38b1e4; }
#img-container svg { min-width: 0; }
#codeOutput { overflow: auto; }
#flowchart-action-container { display: flex; gap: 1rem; }
.download-svg-icon-container { display: flex; justify-content: flex-end; }
.download-svg-icon-container svg { width: 20px; height: 20px; cursor: pointer; }
svg#graphDiv { font-size: 11px; font-weight: 500; }
#graphDiv .messageText { fill: white !important; }
#graphDiv .messageLine0 { stroke: white !important; }
.flowchart #output { overflow: auto; }
.gantt .bar-label { fill: #333 !important; font-weight: bold !important; }

/* Utility */
.hidden { display: none !important; }

/* ────────────────────────────────────────────────
   FEATURES STRIP  (#featuresStrip > .features-inner > .feat-card)
──────────────────────────────────────────────── */
#featuresStrip {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 56px 24px;
}
.features-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.feat-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-bottom: 4px solid var(--p);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  text-align: center;
  transition: box-shadow .2s, transform .2s;
}
.feat-card:hover {
  box-shadow: 0 8px 28px rgba(124,58,237,.1);
  transform: translateY(-3px);
}
.feat-icon {
  width: 54px; height: 54px;
  background: var(--p-lt);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; color: var(--p);
  border: 6px solid var(--p-llt);
}
.feat-icon svg { width: 24px; height: 24px; }
.feat-card h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.feat-card p  { font-size: 13.5px; color: var(--text2); line-height: 1.6; }

/* ────────────────────────────────────────────────
   HOW IT WORKS  (#howItWorks > .hiw-eyebrow + .hiw-steps > .hiw-step)
──────────────────────────────────────────────── */
#howItWorks {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 72px 24px;
}
#howItWorks .hiw-eyebrow,
#howItWorks .hiw-steps {
  max-width: 1200px; margin-left: auto; margin-right: auto;
}
.hiw-eyebrow { text-align: center; margin-bottom: 56px; }
.hiw-eyebrow h2 {
  font-size: clamp(22px, 3vw, 34px); font-weight: 800;
  color: var(--text); margin: 12px 0 10px;
}
.hiw-eyebrow p { font-size: 15px; color: var(--text2); }

.hiw-steps { display: flex; flex-direction: column; gap: 56px; }
.hiw-step {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.hiw-step:nth-child(even) .hiw-step-text   { order: 2; }
.hiw-step:nth-child(even) .hiw-step-visual { order: 1; }

.hiw-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--p); color: #fff;
  border-radius: 50%;
  font-size: 16px; font-weight: 800;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(124,58,237,.4);
  flex-shrink: 0;
}
.hiw-step-text h3 {
  font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 12px; line-height: 1.25;
}
.hiw-step-text p { font-size: 15px; color: var(--text2); line-height: 1.75; }

.hiw-step-visual {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  padding: 0 22px 24px;
}

/* Purple title bar — extends edge-to-edge via negative margins */
.mock-label {
  background: linear-gradient(135deg, #5b21b6 0%, #6938ef 100%);
  color: rgba(255,255,255,.9);
  font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase;
  padding: 12px 22px;
  margin: 0 -22px 22px;
  display: flex; align-items: center; gap: 10px;
}
/* Three traffic-light dots */
.mock-label::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.45);
  box-shadow: 14px 0 0 rgba(255,255,255,.45), 28px 0 0 rgba(255,255,255,.45);
  flex-shrink: 0;
  margin-right: 20px;
}

.mock-field {
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
  font-size: 13px; color: var(--text2); margin-bottom: 8px;
}
.mock-field.active {
  border-color: var(--p);
  color: var(--text);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.mock-divider { height: 1px; background: var(--border); margin: 16px 0; }
.mock-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--p); color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 10px 22px; border-radius: 8px; margin-top: 8px;
  box-shadow: 0 4px 14px rgba(124,58,237,.35);
}

/* Dark output area inside step visual */
.mock-output {
  background: #1a2637;
  border-radius: 10px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.06);
}
.mock-output-line {
  height: 10px;
  background: rgba(255,255,255,.12);
  border-radius: 100px;
  margin-bottom: 10px;
}
.mock-output-line:nth-child(1) { width: 95%; }
.mock-output-line:nth-child(2) { width: 80%; }
.mock-output-line:nth-child(3) { width: 90%; }
.mock-output-line:last-child   { width: 55%; margin-bottom: 0; }
.mock-output-line.p {
  background: rgba(124,58,237,.6);
  animation: mockPulse 1.8s ease-in-out infinite;
}
@keyframes mockPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* ── CHIP (eyebrow label) ── */
.chip {
  display: inline-flex; align-items: center;
  background: var(--p-lt); color: var(--p);
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  padding: 5px 14px; border-radius: 100px; margin-bottom: 12px;
}

/* ────────────────────────────────────────────────
   ABOUT SECTION
   JS (populate-about-area.js) injects:
     .about-area > section.pg-section > div.pg-inner >
       span.section-eyebrow + h2.section-h2 + div.what-is-text + div.about-section-body
──────────────────────────────────────────────── */
#aboutSection {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 72px 24px;
}
.about-header {
  text-align: center; max-width: 640px; margin: 0 auto 48px;
}
.about-header h2 {
  font-size: clamp(20px, 3vw, 32px); font-weight: 800; color: var(--text); margin-bottom: 10px;
}
.about-header p { font-size: 15px; color: var(--text2); line-height: 1.7; }

/* about-area container — JS injects pg-section elements */
.about-area { display: block; }

/* pg-section alternating backgrounds */
.about-area .pg-section { padding: 64px 24px; }
.about-area .pg-section:nth-child(even) { background: #fff; }
.about-area .pg-section:nth-child(odd)  { background: var(--bg-2); }

.about-area .pg-inner {
  max-width: 1100px; margin: 0 auto;
  text-align: center;
}

/* Eyebrow chip */
.section-eyebrow {
  display: inline-flex; align-items: center;
  background: var(--p-lt); color: var(--p);
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  padding: 5px 14px; border-radius: 100px; margin-bottom: 12px;
}

/* Section heading */
.section-h2 {
  font-size: clamp(22px, 3vw, 34px); font-weight: 800;
  color: var(--text); margin-bottom: 10px; line-height: 1.2;
}
.section-h2 span { color: var(--p); }
.section-lead {
  font-size: 15.5px; color: var(--text2); max-width: 600px;
  line-height: 1.7; margin: 0 auto;
}

/* intro text div */
.what-is-text {
  font-size: 15.5px; color: var(--text2); line-height: 1.85;
  max-width: 720px; margin: 16px auto 0; text-align: left;
}

/* about-grid: JS injects div > h2 + p inside .about-area.about-grid
   as well as the new populate-about-area.js about-section-body */
.about-area.about-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.about-area.about-grid > div {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: box-shadow .2s, transform .2s;
}
.about-area.about-grid > div:hover {
  box-shadow: 0 6px 24px rgba(124,58,237,.08);
  transform: translateY(-2px);
}
.about-area.about-grid > div h2 {
  font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px;
}
.about-area.about-grid > div p {
  font-size: 14px; color: var(--text2); line-height: 1.75; margin: 0;
}
.about-area.about-grid > div ul,
.about-area.about-grid > div ol  { padding-left: 20px; margin-top: 8px; }
.about-area.about-grid > div li  { font-size: 14px; color: var(--text2); line-height: 1.7; margin-bottom: 4px; }
.about-area.about-grid > div a   { color: var(--p); text-decoration: none; }
.about-area.about-grid > div a:hover { text-decoration: underline; }

/* about-section-body (from populate-about-area.js) */
.about-section-body {
  max-width: 720px; margin: 20px auto 0; text-align: left;
  font-size: 14.5px; color: var(--text2); line-height: 1.8;
}
.about-section-body > p { margin-bottom: 14px; font-size: 15px; }
.about-section-body strong { color: var(--text); font-weight: 700; }
.about-section-body h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 16px 0 8px; }

/* Ordered lists → numbered steps */
.about-section-body ol {
  list-style: none; padding-left: 0;
  counter-reset: step-counter;
  border: 1.5px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; background: #fff;
  margin: 20px 0 14px;
}
.about-section-body ol li {
  counter-increment: step-counter;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text2); line-height: 1.65;
}
.about-section-body ol li:last-child { border-bottom: none; }
.about-section-body ol li::before {
  content: counter(step-counter);
  min-width: 28px; height: 28px;
  background: var(--p); color: #fff;
  border-radius: 50%; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.about-section-body ol li p { margin: 0; }

/* Unordered lists → tip cards */
.about-section-body ul {
  list-style: none; padding-left: 0;
  display: flex; flex-direction: column; gap: 10px;
  margin: 20px 0 14px;
}
.about-section-body ul li {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--p-llt); border: 1px solid rgba(124,58,237,.12);
  border-radius: var(--r); padding: 14px 18px;
  font-size: 13.5px; color: var(--text2); line-height: 1.75;
}
.about-section-body ul li::before {
  content: '';
  min-width: 8px; height: 8px; background: var(--p);
  border-radius: 50%; margin-top: 7px; flex-shrink: 0;
}
.about-section-body ul li p { margin: 0; }
.about-section-body a { color: var(--p); text-decoration: none; }
.about-section-body a:hover { text-decoration: underline; }

/* ────────────────────────────────────────────────
   FAQ SECTION
   JS (faqGenerator.js) injects:
     .faq-area > section.pg-section > div.pg-inner >
       span.section-eyebrow + h2.section-h2 +
       div.faq-list > div.faq-item >
         div.faq-q (onclick toggleFaq) > span.faq-q-text + span.faq-q-icon(svg)
         div.faq-a > p
──────────────────────────────────────────────── */
#faqSection {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 72px 24px;
}
#faqSection .faq-header,
#faqSection .faq-area {
  max-width: 860px; margin-left: auto; margin-right: auto;
}
.faq-header { text-align: center; margin-bottom: 44px; }
.faq-header h2 {
  font-size: clamp(20px, 3vw, 32px); font-weight: 800; color: var(--text); margin-bottom: 10px;
}
.faq-header p { font-size: 15px; color: var(--text2); }

/* faq-area container — JS injects pg-section */
.faq-area { display: block; }
.faq-area .pg-section { padding: 64px 24px; }
.faq-area .pg-inner { max-width: 860px; margin: 0 auto; text-align: center; }

/* FAQ list */
.faq-list {
  max-width: 720px; margin: 40px auto 0;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
}

/* FAQ item */
.faq-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.faq-item.open {
  box-shadow: 0 4px 20px rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.35);
}

/* FAQ question row */
.faq-q {
  padding: 18px 22px;
  font-size: 15px; font-weight: 600; color: var(--text);
  cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.faq-q-text { flex: 1; }
.faq-q-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--p-lt); border-radius: 50%;
  transition: background .15s, transform .2s;
}
.faq-q-icon svg { width: 14px; height: 14px; }
.faq-item.open .faq-q-icon {
  background: var(--p);
  color: #fff;
  transform: rotate(45deg);
}
.faq-item.open .faq-q-icon svg { stroke: #fff; }

/* FAQ answer */
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s, padding .3s;
  padding: 0 22px;
}
.faq-item.open .faq-a {
  max-height: 400px;
  padding-bottom: 18px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.faq-a p {
  font-size: 14.5px; color: var(--text2); line-height: 1.75; margin: 0;
}

/* Legacy details/summary FAQ (fallback) */
.faq-area > div { display: flex; flex-direction: column; gap: 10px; }
.faq-area details {
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.faq-area details[open] {
  box-shadow: 0 4px 20px rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.35);
}
.faq-area details summary {
  padding: 18px 22px;
  font-size: 15px; font-weight: 600; color: var(--text);
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; user-select: none;
}
.faq-area details summary::-webkit-details-marker { display: none; }
.faq-area details summary > div {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--p-lt); border-radius: 50%;
  transition: background .15s, transform .2s;
}
.faq-area details summary > div svg { width: 18px; height: 18px; transition: transform .2s; }
.faq-area details summary > div svg path { fill: var(--p) !important; }
.faq-area details[open] summary > div { background: var(--p); transform: rotate(45deg); }
.faq-area details[open] summary > div svg path { fill: #fff !important; }
.faq-area details > p {
  padding: 16px 22px 18px;
  font-size: 14.5px; color: var(--text2); line-height: 1.75;
  border-top: 1px solid var(--border);
  margin: 0;
}
.faq-area .faq-answer {
  padding: 16px 22px 18px;
  font-size: 14.5px; color: var(--text2); line-height: 1.75;
  border-top: 1px solid var(--border); margin: 0;
}
.faq-area > h2 { display: none; }

/* ────────────────────────────────────────────────
   MORE TOOLS / SIMILAR TOOLS
   createToolsCards() injects:
     #tools-cards-container > div.category-heading-container + div.tools-cards
       > div.tool-card > div.tool-header + div > h2.tool-name + p.tool-description
──────────────────────────────────────────────── */
#more-tools {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 64px 24px 80px;
}
#more-tools > h2 {
  text-align: center;
  font-size: clamp(20px, 3vw, 30px); font-weight: 800; color: var(--text);
  margin-bottom: 8px;
}
#more-tools > p {
  text-align: center; font-size: 15px; color: var(--text2); margin-bottom: 40px;
}

#tools-cards-container {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0;
}

/* Category heading row */
.category-heading-container {
  display: flex; align-items: center; gap: 10px;
  padding: 0 0 14px; margin-bottom: 20px;
  border-bottom: 2px solid var(--p-lt);
}
.category-heading-container h2 {
  font-size: 18px; font-weight: 700; color: var(--text); margin: 0; padding: 0;
}
.category-heading-container a {
  margin-left: auto;
  color: var(--p); font-size: 13px; font-weight: 600;
}

/* 3-column tools card grid */
.tools-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

/* Individual tool cards inside more-tools */
#tools-cards-container .tool-card,
#more-tools .tool-card {
  padding: 20px 22px;
  border-radius: 14px;
  border: 1.5px solid rgba(124,58,237,.15);
  border-bottom: 4px solid var(--p);
  background: #fff;
  box-shadow: 0 2px 8px rgba(124,58,237,.06), 0 1px 3px rgba(0,0,0,.05);
  transition: transform .15s, box-shadow .15s;
  display: flex; flex-direction: column;
  color: var(--text);
}
#tools-cards-container .tool-card:hover,
#more-tools .tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124,58,237,.12), 0 2px 6px rgba(0,0,0,.06);
}

/* Tool card inner elements */
#tools-cards-container .tool-header,
#more-tools .tool-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
#tools-cards-container .tool-header .svg-wrapper,
#more-tools .tool-header .svg-wrapper {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--p-lt); border: 6px solid var(--p-llt);
  display: flex; align-items: center; justify-content: center;
}
#tools-cards-container .tool-header svg,
#more-tools .tool-header svg { border-radius: 100%; border: none; background: transparent; }
#tools-cards-container .tool-header a,
#more-tools .tool-header a {
  display: inline-flex; height: 34px; padding: 0 18px;
  justify-content: center; align-items: center;
  border-radius: 8px; border: 1px solid var(--p);
  background: var(--p); color: #fff;
  font-size: 12px; font-weight: 600; font-family: 'Inter', sans-serif;
  text-decoration: none; transition: background .15s;
}
#tools-cards-container .tool-header a:hover,
#more-tools .tool-header a:hover { background: var(--p-h); }
#tools-cards-container .tool-name,
#more-tools .tool-name {
  margin: 0 0 6px; color: var(--text);
  font-size: 15px; font-weight: 700; line-height: 1.4;
}
#tools-cards-container .tool-description,
#more-tools .tool-description {
  color: var(--text2); font-size: 13px; line-height: 1.6; margin-bottom: 0; flex: 1;
}

/* cat-section (if used) */
#more-tools .cat-section-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 14px; margin-bottom: 20px;
  border-bottom: 2px solid var(--p-lt);
}
#more-tools .cat-section-hd-left { display: flex; align-items: center; gap: 10px; }
#more-tools .cat-section-icon    { color: var(--p); display: flex; align-items: center; }
#more-tools .cat-section-title   { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
#more-tools .cat-section-count   {
  font-size: 12px; font-weight: 600; color: var(--p);
  background: var(--p-lt); padding: 4px 12px; border-radius: 100px;
}
#more-tools .cat-section-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

/* ────────────────────────────────────────────────
   CTA BANNER
──────────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, #2d1b69 0%, #4c2db0 50%, #6938ef 100%);
  padding: 72px 24px; text-align: center;
}
.cta-inner { max-width: 560px; margin: 0 auto; }
.cta-banner h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: #fff; margin-bottom: 12px; }
.cta-banner p  { font-size: 16px; color: rgba(255,255,255,.7); margin-bottom: 28px; line-height: 1.65; }
.cta-btn {
  display: inline-block; padding: 14px 36px;
  background: #fff; color: var(--p);
  font-size: 15px; font-weight: 700; border-radius: var(--r);
  text-decoration: none; transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }

/* ────────────────────────────────────────────────
   GLOBAL LINK FIX
──────────────────────────────────────────────── */
a { text-decoration: none; color: inherit; }
a.custom-link { color: #1a73e8 !important; }
a.custom-link:hover { color: #9333ea !important; text-decoration: underline !important; }

/* ────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .features-inner { grid-template-columns: repeat(2, 1fr); }
  .tools-cards                    { grid-template-columns: repeat(2, 1fr); }
  #more-tools .cat-section-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  #tool-wrapper .tool-card { grid-template-columns: 1fr; }
  .form-panel { border-right: none; border-bottom: 1px solid var(--border); }
  .output-panel { min-height: 360px; }
}
@media (max-width: 900px) {
  .hiw-step { grid-template-columns: 1fr; gap: 28px; }
  .hiw-step:nth-child(even) .hiw-step-text   { order: 1; }
  .hiw-step:nth-child(even) .hiw-step-visual { order: 2; }
  .about-area.about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  #tool-wrapper { padding: 0 16px; margin: 32px auto; }
  .tools-cards                  { grid-template-columns: repeat(2, 1fr); }
  #more-tools .cat-section-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #hero { padding: 48px 16px 44px; }
  .features-inner               { grid-template-columns: 1fr; gap: 14px; }
  .tools-cards                  { grid-template-columns: 1fr 1fr; gap: 0.875rem; }
  #more-tools .cat-section-grid { grid-template-columns: 1fr; }
  .about-area .pg-section,
  .faq-area .pg-section {
    padding-left: 16px; padding-right: 16px;
  }
  #featuresStrip, #howItWorks, #aboutSection, #faqSection, #more-tools {
    padding-left: 16px; padding-right: 16px;
  }
  .hiw-step-visual { padding: 0 16px 20px; }
  .mock-label { padding: 12px 16px; margin: 0 -16px 18px; }
}
@media (max-width: 480px) {
  .tools-cards { grid-template-columns: 1fr; }
  #tools-cards-container .tool-card,
  #more-tools .tool-card {
    flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px 16px;
  }
  #tools-cards-container .tool-name,
  #more-tools .tool-name { font-size: 14px; }
  #tools-cards-container .tool-header,
  #more-tools .tool-header { display: none; }
}