/* ============================================================
   HSA THRIVE v2 — TOOLS STYLESHEET
   ============================================================ */

/* Tool Hero */
.tool-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding-top: calc(72px + 60px);
  padding-bottom: 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tool-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 44px 44px;
}
.tool-hero .container { position: relative; z-index: 2; }
.tool-hero .tool-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  margin-bottom: 20px;
  transition: color .25s;
}
.tool-hero .tool-back:hover { color: var(--gold); }
.tool-hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 14px;
}
.tool-hero h1 span { color: var(--gold); }
.tool-hero p {
  font-size: 1rem;
  color: rgba(255,255,255,.7);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}

/* Tool Layout */
.tool-section { padding: 60px 0 100px; background: var(--off-white); }
.tool-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 991px) { .tool-layout { grid-template-columns: 1fr; } }

/* Tool Card */
.tool-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.tool-card-head {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
}
.tool-card-head h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.tool-card-body { padding: 28px; }

/* Form elements */
.tf-group { margin-bottom: 18px; }
.tf-group label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 7px;
  letter-spacing: .02em;
}
.tf-group input,
.tf-group textarea,
.tf-group select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: .88rem;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color .25s;
}
.tf-group input:focus,
.tf-group textarea:focus,
.tf-group select:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,46,110,.06); }
.tf-group textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.tf-note { font-size: .73rem; color: var(--grey); margin-top: 4px; }

.tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 576px) { .tf-row { grid-template-columns: 1fr; } }

/* Buttons */
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .25s;
}
.tool-btn.primary { background: var(--navy); color: var(--white); width: 100%; }
.tool-btn.primary:hover { background: #0048a5; transform: translateY(-1px); }
.tool-btn.gold { background: var(--gold); color: var(--navy); }
.tool-btn.gold:hover { background: #e6bc00; transform: translateY(-1px); }
.tool-btn.outline { background: transparent; border: 2px solid var(--navy); color: var(--navy); }
.tool-btn.outline:hover { background: var(--navy); color: var(--white); }
.tool-btn.sm { padding: 8px 16px; font-size: .8rem; border-radius: 8px; width: auto; }
.tool-btn.danger { background: #dc3545; color: #fff; }
.tool-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Result Box */
.result-box {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
  display: none;
}
.result-box.show { display: block; }
.result-box h5 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.result-code {
  background: #0d1117;
  color: #e6edf3;
  border-radius: 10px;
  padding: 18px;
  font-family: 'Courier New', monospace;
  font-size: .82rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 400px;
  overflow-y: auto;
}
.result-textarea {
  width: 100%;
  background: #0d1117;
  color: #e6edf3;
  border-radius: 10px;
  padding: 16px;
  font-family: 'Courier New', monospace;
  font-size: .82rem;
  line-height: 1.7;
  border: none;
  outline: none;
  resize: vertical;
  min-height: 160px;
}

/* Metric cards */
.metric-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.metric-card {
  background: var(--navy);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.metric-card .mc-val { font-size: 1.8rem; font-weight: 800; color: var(--gold); display: block; line-height: 1; }
.metric-card .mc-lbl { font-size: .75rem; color: rgba(255,255,255,.6); margin-top: 5px; display: block; }
@media (max-width: 576px) { .metric-cards { grid-template-columns: 1fr 1fr; } }

/* Table */
.tool-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.tool-table th { padding: 10px 14px; text-align: left; font-size: .73rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); font-weight: 700; background: var(--off-white); border-bottom: 2px solid var(--border); }
.tool-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); }
.tool-table tr:last-child td { border-bottom: none; }
.tool-table tr:hover td { background: var(--off-white); }

/* Sidebar widget */
.tool-sidebar .widget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
}
.tool-sidebar .widget h4 {
  font-size: .85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.tool-sidebar .other-tools { display: flex; flex-direction: column; gap: 8px; }
.tool-sidebar .other-tools a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: all .2s;
  border: 1px solid transparent;
}
.tool-sidebar .other-tools a:hover {
  background: var(--off-white);
  border-color: var(--border);
  color: var(--navy);
}
.tool-sidebar .other-tools a .tool-emoji { font-size: 1rem; }

/* Tabs */
.tool-tabs { display: flex; gap: 4px; background: var(--off-white); padding: 5px; border-radius: 10px; margin-bottom: 22px; }
.tool-tab {
  flex: 1;
  padding: 9px;
  border-radius: 7px;
  font-size: .83rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--grey);
  font-family: 'Poppins', sans-serif;
  transition: all .25s;
  text-align: center;
}
.tool-tab.active { background: var(--navy); color: var(--white); }

/* Checkbox / Radio */
.tf-check { display: flex; align-items: center; gap: 10px; font-size: .87rem; color: var(--text); margin-bottom: 10px; cursor: pointer; }
.tf-check input { width: 16px; height: 16px; accent-color: var(--navy); cursor: pointer; }

/* Alert */
.tool-alert { padding: 12px 16px; border-radius: 10px; font-size: .85rem; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.tool-alert.success { background: #d4edda; color: #155724; }
.tool-alert.error { background: #f8d7da; color: #721c24; }
.tool-alert.info { background: #d1ecf1; color: #0c5460; }

/* SERP Preview */
.serp-preview { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.serp-title { font-size: 1.05rem; color: #1a0dab; font-weight: 500; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-url { font-size: .82rem; color: #006621; margin-bottom: 4px; }
.serp-desc { font-size: .87rem; color: #545454; line-height: 1.5; margin: 0; }


/* ============================================================
   FIXES — added to address:
   1) Form inputs using class="tf-input" outside .tf-group
      were rendering UNSTYLED. We now style .tf-input directly.
   2) Tool pages contain leftover Bootstrap/Tailwind utility
      classes (btn-warning, d-flex, mb-3, table-responsive,
      space-y-4, etc.) but neither framework is loaded.
      Below are minimal compatibility shims so existing markup
      renders correctly without changing 22 PHP files.
   3) Mobile responsiveness for tool pages.
   ============================================================ */

/* ---------- 1) Standalone .tf-input styling ---------- */
.tf-input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color .25s, box-shadow .25s;
  margin-bottom: 4px;
}
.tf-input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0,46,110,.06);
}
textarea.tf-input { resize: vertical; min-height: 100px; line-height: 1.6; }
input.tf-input[type="file"] {
  padding: 9px 12px;
  background: var(--off-white);
  cursor: pointer;
}
input.tf-input[type="file"]::file-selector-button {
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 7px 14px;
  border-radius: 7px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .8rem;
  margin-right: 12px;
  cursor: pointer;
}

/* Native unstyled inputs inside tool-card-body — defensive */
.tool-card-body input[type="text"]:not([class]),
.tool-card-body input[type="email"]:not([class]),
.tool-card-body input[type="url"]:not([class]),
.tool-card-body input[type="number"]:not([class]),
.tool-card-body input[type="search"]:not([class]),
.tool-card-body textarea:not([class]),
.tool-card-body select:not([class]) {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: .88rem;
  outline: none;
  margin-bottom: 12px;
}

/* ---------- 2) Bootstrap-utility compatibility shims ---------- */
/* Spacing — m/p with 0..5 scale (multiples of 0.25rem * 4 = approx Bootstrap) */
.tool-card-body .m-0,.tool-card-body .mt-0,.tool-card-body .my-0{margin-top:0!important}
.tool-card-body .m-0,.tool-card-body .mb-0,.tool-card-body .my-0{margin-bottom:0!important}
.tool-card-body .mt-1,.tool-card-body .my-1{margin-top:.25rem!important}
.tool-card-body .mb-1,.tool-card-body .my-1{margin-bottom:.25rem!important}
.tool-card-body .mt-2,.tool-card-body .my-2{margin-top:.5rem!important}
.tool-card-body .mb-2,.tool-card-body .my-2{margin-bottom:.5rem!important}
.tool-card-body .mt-3,.tool-card-body .my-3{margin-top:1rem!important}
.tool-card-body .mb-3,.tool-card-body .my-3{margin-bottom:1rem!important}
.tool-card-body .mt-4,.tool-card-body .my-4{margin-top:1.5rem!important}
.tool-card-body .mb-4,.tool-card-body .my-4{margin-bottom:1.5rem!important}
.tool-card-body .mt-5,.tool-card-body .my-5{margin-top:2.5rem!important}
.tool-card-body .mb-5,.tool-card-body .my-5{margin-bottom:2.5rem!important}
.tool-card-body .me-2{margin-right:.5rem!important}
.tool-card-body .me-3{margin-right:1rem!important}
.tool-card-body .ms-2{margin-left:.5rem!important}
.tool-card-body .p-0{padding:0!important}
.tool-card-body .p-2{padding:.5rem!important}
.tool-card-body .p-3{padding:1rem!important}
.tool-card-body .p-4{padding:1.5rem!important}
.tool-card-body .py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}
.tool-card-body .py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}

/* Tailwind space-y */
.tool-card-body .space-y-4 > * + * { margin-top: 1rem; }
.tool-card-body .space-y-3 > * + * { margin-top: .75rem; }
.tool-card-body .space-y-2 > * + * { margin-top: .5rem; }

/* Display & Flex */
.tool-card-body .d-flex{display:flex!important}
.tool-card-body .d-inline-flex{display:inline-flex!important}
.tool-card-body .d-block{display:block!important}
.tool-card-body .d-inline-block{display:inline-block!important}
.tool-card-body .d-none{display:none!important}
.tool-card-body .flex-wrap{flex-wrap:wrap!important}
.tool-card-body .align-items-center{align-items:center!important}
.tool-card-body .align-middle{vertical-align:middle!important}
.tool-card-body .justify-content-center{justify-content:center!important}
.tool-card-body .justify-content-between{justify-content:space-between!important}
.tool-card-body .gap-1{gap:.25rem!important}
.tool-card-body .gap-2{gap:.5rem!important}
.tool-card-body .gap-3{gap:1rem!important}
.tool-card-body .gap-4{gap:1.5rem!important}

/* Text */
.tool-card-body .text-center{text-align:center!important}
.tool-card-body .text-end{text-align:right!important}
.tool-card-body .text-start{text-align:left!important}
.tool-card-body .text-primary{color:var(--navy)!important}
.tool-card-body .text-secondary{color:var(--text-muted,#6b7280)!important}
.tool-card-body .text-muted{color:var(--grey,#7a8290)!important}
.tool-card-body .text-success{color:#198754!important}
.tool-card-body .text-danger{color:#dc3545!important}
.tool-card-body .text-warning{color:#cc9a06!important}
.tool-card-body .text-info{color:#0dcaf0!important}
.tool-card-body .text-dark{color:#1a1a1a!important}
.tool-card-body .text-gray-600{color:#525a66!important}
.tool-card-body .text-sm,.tool-card-body .small{font-size:.85rem!important}
.tool-card-body .fw-bold{font-weight:700!important}
.tool-card-body .fw-semibold{font-weight:600!important}

/* Width */
.tool-card-body .w-100{width:100%!important}

/* Borders & background helpers */
.tool-card-body .rounded{border-radius:8px!important}
.tool-card-body .border-0{border:0!important}
.tool-card-body .shadow-sm{box-shadow:0 2px 6px rgba(0,0,0,.06)!important}
.tool-card-body .bg-light{background:var(--off-white)!important}
.tool-card-body .bg-warning{background:#fff3cd!important}

/* Tables — Bootstrap-style fallback */
.tool-card-body .table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tool-card-body .table{width:100%;margin-bottom:1rem;border-collapse:collapse;font-size:.87rem;background:var(--white)}
.tool-card-body .table th,.tool-card-body .table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.tool-card-body .table thead th{background:var(--off-white);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);font-weight:700;border-bottom:2px solid var(--border)}
.tool-card-body .table-warning,.tool-card-body .table-warning>th,.tool-card-body .table-warning>td{background:#fff8e1!important}
.tool-card-body .table-light{background:var(--off-white)!important}
.tool-card-body .table-striped tbody tr:nth-of-type(odd) td{background:rgba(0,0,0,.02)}
.tool-card-body .table-hover tbody tr:hover td{background:rgba(0,46,110,.04)}
.tool-card-body .table-bordered,.tool-card-body .table-bordered th,.tool-card-body .table-bordered td{border:1px solid var(--border)}

/* Bootstrap buttons used in tools — map to tool-btn look */
.tool-card-body .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:9px;border:1.5px solid transparent;
  font-family:'Poppins',sans-serif;font-size:.85rem;font-weight:600;
  cursor:pointer;text-decoration:none;line-height:1.2;transition:all .2s
}
.tool-card-body .btn-sm{padding:6px 12px;font-size:.78rem;border-radius:7px}
.tool-card-body .btn-primary,.tool-card-body .btn-primary-v2{background:var(--navy);color:var(--white);border-color:var(--navy)}
.tool-card-body .btn-primary:hover,.tool-card-body .btn-primary-v2:hover{background:#0048a5;border-color:#0048a5}
.tool-card-body .btn-warning{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.tool-card-body .btn-warning:hover{background:#e6bc00;border-color:#e6bc00}
.tool-card-body .btn-success{background:#198754;color:#fff;border-color:#198754}
.tool-card-body .btn-secondary{background:#6c757d;color:#fff;border-color:#6c757d}
.tool-card-body .btn-outline-primary{background:transparent;color:var(--navy);border-color:var(--navy)}
.tool-card-body .btn-outline-primary:hover{background:var(--navy);color:var(--white)}
.tool-card-body .btn-lg-v2{padding:12px 22px;font-size:.95rem}

/* Bootstrap alerts */
.tool-card-body .alert{padding:12px 16px;border-radius:9px;font-size:.87rem;margin-bottom:14px;border:1px solid transparent}
.tool-card-body .alert-danger{background:#f8d7da;color:#721c24;border-color:#f5c2c7}

/* Bootstrap badges */
.tool-card-body .badge{display:inline-block;padding:.35em .6em;font-size:.72rem;font-weight:700;border-radius:6px;background:var(--navy);color:#fff;line-height:1}

/* Bootstrap progress */
.tool-card-body .progress{height:10px;background:var(--off-white);border-radius:6px;overflow:hidden;margin:8px 0}
.tool-card-body .progress-bar{height:100%;background:var(--navy);transition:width .3s}
.tool-card-body .progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%);background-size:1rem 1rem}
.tool-card-body .progress-bar-animated{animation:progress-stripes 1s linear infinite}
@keyframes progress-stripes{0%{background-position:1rem 0}100%{background-position:0 0}}

/* Bootstrap list-group */
.tool-card-body .list-group{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.tool-card-body .list-group-flush{border:0;border-radius:0}
.tool-card-body .list-group-item{padding:11px 14px;background:var(--white);border-bottom:1px solid var(--border);font-size:.87rem}
.tool-card-body .list-group-item:last-child{border-bottom:0}

/* Bootstrap rows/cols — collapse to flex on the few places they're used */
.tool-card-body .row{display:flex;flex-wrap:wrap;margin-left:-12px;margin-right:-12px}
.tool-card-body .col-md-6,.tool-card-body .col-md-8,.tool-card-body .col-md-4{padding-left:12px;padding-right:12px;flex:1 1 100%;max-width:100%;min-width:0}
@media (min-width:768px){
  .tool-card-body .col-md-6{flex:0 0 50%;max-width:50%}
  .tool-card-body .col-md-8{flex:0 0 66.666%;max-width:66.666%}
  .tool-card-body .col-md-4{flex:0 0 33.333%;max-width:33.333%}
}

/* ---------- 3) Mobile responsiveness ---------- */
@media (max-width: 768px) {
  .tool-hero {
    padding-top: calc(72px + 32px);
    padding-bottom: 36px;
  }
  .tool-hero h1 { font-size: 1.6rem; line-height: 1.25; margin-bottom: 10px; }
  .tool-hero p  { font-size: .92rem; line-height: 1.6; padding: 0 6px; }
  .tool-hero .tool-back { margin-bottom: 14px; font-size: .78rem; }

  .tool-section { padding: 36px 0 60px; }
  .tool-card-head { padding: 16px 18px; }
  .tool-card-head h3 { font-size: 1rem; }
  .tool-card-body { padding: 18px 16px; }

  /* Buttons stack and stretch full width on small screens */
  .tool-btn { width: 100%; padding: 12px 16px; }
  .tool-btn.sm { width: auto; }
  .tool-btn-row { flex-direction: column; gap: 8px; }
  .tool-btn-row .tool-btn { width: 100%; }

  /* Tabs */
  .tool-tabs { flex-wrap: wrap; }
  .tool-tab  { flex: 1 1 calc(50% - 4px); font-size: .78rem; padding: 8px 6px; }

  /* Result code blocks scroll horizontally instead of overflowing */
  .result-box { padding: 14px; }
  .result-code, .result-textarea { font-size: .76rem; padding: 14px; }

  /* Sidebar — tighter padding on mobile */
  .tool-sidebar .widget { padding: 16px; margin-bottom: 14px; }

  /* Fix tables overflowing the card on mobile (auto-wrap any table) */
  .tool-card-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Metric cards two-up */
  .metric-cards { gap: 10px; }
  .metric-card  { padding: 14px 10px; }
  .metric-card .mc-val { font-size: 1.4rem; }
}

@media (max-width: 480px) {
  .tool-hero h1 { font-size: 1.4rem; }
  .tool-card-body { padding: 14px 12px; }
  .tool-card-head { padding: 14px; }
  .tf-input { font-size: .85rem; padding: 10px 12px; }
  .tool-tab  { flex: 1 1 100%; }
}

/* Prevent any tool result/code area from breaking the mobile layout */
.tool-card-body img,
.tool-card-body pre,
.tool-card-body code { max-width: 100%; }
.tool-card-body { overflow-wrap: break-word; word-wrap: break-word; }


/* ============================================================
   TOOL SEO CONTENT BLOCK (added)
   Renders the intro / how-to / FAQ / related sections that
   live below the tool itself. Built for readability and
   LLM/AI Overview citation friendliness.
   ============================================================ */
.tool-seo {
  background: var(--white);
  padding: 70px 0 90px;
  border-top: 1px solid var(--border);
}
.tool-seo-inner { max-width: 880px; margin: 0 auto; }

.seo-block {
  padding: 0 0 44px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--border);
}
.seo-block:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.seo-h2 {
  font-size: 1.55rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.seo-prose { font-size: .98rem; line-height: 1.78; color: var(--text); }
.seo-prose p { margin: 0 0 16px; }
.seo-prose p:last-child { margin-bottom: 0; }
.seo-prose strong { color: var(--navy); font-weight: 700; }
.seo-prose ul, .seo-prose ol { margin: 0 0 16px; padding-left: 22px; }
.seo-prose li { margin-bottom: 8px; }
.seo-prose a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.seo-prose a:hover { color: #0048a5; }

/* Steps */
.seo-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.seo-steps li {
  display: flex;
  gap: 16px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.seo-step-num {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}
.seo-steps li > div { flex: 1; min-width: 0; }
.seo-steps li strong {
  display: block;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 4px;
  font-weight: 700;
}
.seo-steps li p {
  margin: 0;
  font-size: .92rem;
  color: var(--text);
  line-height: 1.65;
}

/* FAQ */
.seo-faq { display: flex; flex-direction: column; gap: 10px; }
.seo-faq-item {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 11px;
  overflow: hidden;
  transition: border-color .2s;
}
.seo-faq-item[open] { border-color: var(--navy); background: var(--white); }
.seo-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  font-size: .98rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.seo-faq-item summary::-webkit-details-marker { display: none; }
.seo-faq-item summary::after {
  content: '+';
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s;
}
.seo-faq-item[open] summary::after { content: '−'; transform: rotate(180deg); }
.seo-faq-answer {
  padding: 0 20px 18px;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--text);
}
.seo-faq-answer p { margin: 0 0 10px; }
.seo-faq-answer p:last-child { margin-bottom: 0; }

/* Related grid */
.seo-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.seo-related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--navy);
  font-weight: 600;
  font-size: .92rem;
  transition: all .2s;
}
.seo-related-card:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  transform: translateY(-1px);
}
.seo-related-card svg { flex: 0 0 16px; transition: transform .2s; }
.seo-related-card:hover svg { transform: translateX(3px); }

/* CTA band */
.seo-cta-band {
  margin-top: 50px;
  background: var(--navy);
  border-radius: 16px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.seo-cta-band h3 {
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 6px;
}
.seo-cta-band p {
  color: rgba(255,255,255,.7);
  font-size: .92rem;
  margin: 0;
  line-height: 1.6;
}
.seo-cta-btn {
  background: var(--gold);
  color: var(--navy);
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .92rem;
  transition: all .2s;
  white-space: nowrap;
}
.seo-cta-btn:hover { background: #e6bc00; transform: translateY(-1px); }

/* Mobile */
@media (max-width: 768px) {
  .tool-seo { padding: 44px 0 60px; }
  .seo-h2 { font-size: 1.3rem; }
  .seo-block { padding-bottom: 32px; margin-bottom: 32px; }
  .seo-steps li { padding: 14px 14px; gap: 12px; }
  .seo-step-num { flex: 0 0 30px; width: 30px; height: 30px; font-size: .85rem; }
  .seo-faq-item summary { padding: 14px 16px; font-size: .92rem; }
  .seo-faq-answer { padding: 0 16px 14px; }
  .seo-related-grid { grid-template-columns: 1fr; }
  .seo-cta-band { padding: 24px; flex-direction: column; align-items: flex-start; text-align: left; }
  .seo-cta-btn { width: 100%; text-align: center; }
}


/* ============================================================
   TOOL PAGE TYPOGRAPHY CLEANUP (added)
   The tool bodies inherited old markup with:
   - A redundant H3 inside the card body (card already has
     its own .tool-card-head H3 above)
   - Inconsistent text-center headings
   - Loose-floating mode-toggle button rows
   This pass tightens all of it without touching markup.
   ============================================================ */

/* Demote the second H3 inside card body — tool card already has
   a header H3 above, so this inner one looks redundant and huge. */
.tool-card-body > h3,
.tool-card-body > h3.fw-bold,
.tool-card-body > h3.text-primary {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  letter-spacing: .005em;
}

/* Mode-toggle button rows that use btn-warning / btn-outline-primary
   (e.g., "Manual Input / Upload Excel" on meta-tag-generator). Give
   them proper tab-group styling. */
.tool-card-body > .d-flex.mb-4.justify-content-center,
.tool-card-body > div.d-flex.gap-3.mb-4.justify-content-center {
  background: var(--off-white);
  padding: 5px;
  border-radius: 10px;
  gap: 4px !important;
  margin-bottom: 22px !important;
  justify-content: stretch !important;
  width: 100%;
}
.tool-card-body > .d-flex.mb-4.justify-content-center > .btn,
.tool-card-body > div.d-flex.gap-3.mb-4.justify-content-center > .btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: .85rem;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--grey, #6b7280) !important;
  font-weight: 600;
}
.tool-card-body > .d-flex.mb-4.justify-content-center > .btn-warning,
.tool-card-body > div.d-flex.gap-3.mb-4.justify-content-center > .btn-warning {
  background: var(--navy) !important;
  color: var(--white) !important;
}

/* Tighten spacing between form groups (space-y-4 was 1rem; bump to 14px for denser forms) */
.tool-card-body .space-y-4 > * + * { margin-top: 14px; }

/* Inline label spans — these are used heavily inside tool bodies.
   Normalise the repeated inline style="display:block;font-size:.8rem…"
   labels so at least they sit tight to inputs. */
.tool-card-body label[style*="font-weight:700"][style*="navy"] {
  margin-bottom: 6px !important;
  display: block;
}

/* Ensure .tf-input underneath a label has correct top rhythm */
.tool-card-body label + .tf-input,
.tool-card-body label + input,
.tool-card-body label + textarea,
.tool-card-body label + select { margin-top: 0; }

/* "Include Open Graph / Twitter Card" checkbox row alignment */
.tool-card-body .tf-check {
  padding: 10px 12px;
  background: var(--off-white);
  border-radius: 8px;
  border: 1px solid var(--border);
  margin: 14px 0 !important;
}

/* Output / result box headings */
.tool-card-body .result-box h5 {
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: 14px;
}

/* Result action button row — make them sit tight, not spread */
.tool-card-body .result-box .d-flex.gap-2 {
  gap: 8px !important;
  margin-top: 16px !important;
}
.tool-card-body .result-box .tool-btn { width: auto; flex: 1 1 auto; min-width: 120px; }

/* File upload row — the "Upload Excel" section on meta-tag-generator
   had a bizarre inline layout with a Sample button floating beside
   the file input. Stack it vertically on all sizes for clarity. */
.tool-card-body .d-flex.justify-content-between.align-items-center.mb-3 {
  flex-direction: column;
  align-items: stretch !important;
  gap: 12px;
}
.tool-card-body .d-flex.justify-content-between.align-items-center.mb-3 > button {
  width: 100%;
}

/* Mobile */
@media (max-width: 576px) {
  .tool-card-body > h3 { font-size: .95rem; margin-bottom: 18px; padding-bottom: 12px; }
  .tool-card-body > .d-flex.mb-4.justify-content-center > .btn,
  .tool-card-body > div.d-flex.gap-3.mb-4.justify-content-center > .btn {
    font-size: .8rem;
    padding: 9px 10px;
  }
}


/* ============================================================
   PASS 2.2 — TOOL LAYOUT + SIDEBAR REFINEMENT
   The 991px stack breakpoint was too high — normal desktop
   windows below that width were triggering the stacked
   mobile layout, leaving the sidebar widgets to render as
   full-width bands below the tool (which looked terrible).
   ============================================================ */

/* Lower the stacking breakpoint so side-by-side layout holds
   through most desktop windows. Narrower sidebar keeps the
   tool card wide enough to work with. */
.tool-layout {
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
}
@media (max-width: 991px) { .tool-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; } }
@media (max-width: 820px) { .tool-layout { grid-template-columns: 1fr; gap: 32px; } }

/* Sidebar becomes sticky on desktop so it stays visible as the
   user scrolls through a long tool page. */
@media (min-width: 821px) {
  .tool-sidebar {
    position: sticky;
    top: 96px;          /* below the 72px nav + breathing room */
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    /* Hide scrollbar visually but keep scrollable */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .tool-sidebar::-webkit-scrollbar { width: 4px; }
  .tool-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
}

/* When sidebar stacks below on tablet/mobile, make the two
   widgets a polished side-by-side band rather than two lonely
   full-width cards. */
@media (max-width: 820px) {
  .tool-sidebar {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .tool-sidebar .widget { margin-bottom: 0; height: 100%; }
}
@media (max-width: 560px) {
  .tool-sidebar { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- OTHER TOOLS widget — premium refinement ---- */
.tool-sidebar .widget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0, 18, 50, .02), 0 4px 12px rgba(0, 18, 50, .04);
}

.tool-sidebar .widget h4 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--grey, #6b7280);
  margin: 0 0 14px;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.tool-sidebar .widget h4::before {
  content: '';
  width: 4px;
  height: 14px;
  background: var(--gold);
  border-radius: 2px;
}
.tool-sidebar .widget h4::after { display: none; }

.tool-sidebar .other-tools { gap: 2px; }

.tool-sidebar .other-tools a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text);
  border-radius: 9px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s, color .18s, transform .18s;
  position: relative;
}
.tool-sidebar .other-tools a::after {
  content: '→';
  margin-left: auto;
  color: var(--border);
  font-size: .88rem;
  transition: color .18s, transform .18s;
}
.tool-sidebar .other-tools a:hover {
  background: var(--off-white);
  color: var(--navy);
  padding-left: 10px;
}
.tool-sidebar .other-tools a:hover::after {
  color: var(--navy);
  transform: translateX(3px);
}

.tool-sidebar .other-tools a .tool-emoji {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--off-white);
  border-radius: 7px;
  font-size: .95rem;
  transition: background .18s;
}
.tool-sidebar .other-tools a:hover .tool-emoji {
  background: rgba(255, 211, 0, .22);
}

/* ---- NEED EXPERT HELP CTA — refined ---- */
.tool-sidebar .widget[style*="var(--navy)"],
.tool-sidebar .widget[style*="background:var(--navy)"] {
  background: linear-gradient(160deg, #003380 0%, #001a44 100%) !important;
  border: none !important;
  padding: 26px 22px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 18, 50, .28);
}

/* Softer, more tasteful corner glow */
.tool-sidebar .widget[style*="var(--navy)"]::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255, 211, 0, .22) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Grid overlay — subtler */
.tool-sidebar .widget[style*="var(--navy)"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

.tool-sidebar .widget[style*="var(--navy)"] > div {
  position: relative;
  z-index: 2;
  text-align: center !important;
}

/* Rocket icon — cleaner, better sized */
.tool-sidebar .widget[style*="var(--navy)"] > div > div:first-child {
  font-size: 2rem !important;
  margin-bottom: 12px !important;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 2px 10px rgba(255, 211, 0, .4));
}

.tool-sidebar .widget[style*="var(--navy)"] h4 {
  color: #fff !important;
  font-size: 1.05rem !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  padding-bottom: 0 !important;
  margin: 0 0 8px !important;
  font-weight: 700 !important;
  border: none !important;
  display: block !important;
}
.tool-sidebar .widget[style*="var(--navy)"] h4::before,
.tool-sidebar .widget[style*="var(--navy)"] h4::after { display: none !important; }

.tool-sidebar .widget[style*="var(--navy)"] p {
  color: rgba(255, 255, 255, .7) !important;
  font-size: .82rem !important;
  line-height: 1.65 !important;
  margin: 0 0 18px !important;
}

/* CTA button */
.tool-sidebar .widget[style*="var(--navy)"] a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--gold) !important;
  color: var(--navy) !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  text-decoration: none !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: transform .2s, box-shadow .2s, background .2s !important;
  box-shadow: 0 4px 14px rgba(255, 211, 0, .3);
  letter-spacing: .01em;
}
.tool-sidebar .widget[style*="var(--navy)"] a::after {
  content: '→';
  font-size: 1rem;
  font-weight: 400;
  transition: transform .2s;
}
.tool-sidebar .widget[style*="var(--navy)"] a:hover {
  background: #ffdc33 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 211, 0, .42);
}
.tool-sidebar .widget[style*="var(--navy)"] a:hover::after {
  transform: translateX(4px);
}

/* Trust-signal line */
.tool-sidebar .widget[style*="var(--navy)"] > div::after {
  content: '⚡ 2-hour response · No obligation';
  display: block;
  margin-top: 14px;
  font-size: .7rem;
  color: rgba(255, 255, 255, .48);
  letter-spacing: .02em;
  line-height: 1.5;
}