/* ================================================================
   seo-refresh.css · v1
   Unified visual system for /templates/**  and /alternatives/**
   Aligns them with /products/** and /solutions/** — same green
   palette, same section rhythm, same card/FAQ/CTA language.

   Applies via bodyClass="seo-refresh" — targets the existing
   .seo-*, .mv-*, .tpl-cat-*, .faq-item hooks each page already emits,
   so no per-page HTML changes are required.
================================================================ */

.seo-refresh {
  --sr-ink: #06150e;
  --sr-dark: #06331f;
  --sr-forest: #073d28;
  --sr-mid: #355847;
  --sr-muted: #557262;
  --sr-line: rgba(6, 51, 31, 0.10);
  --sr-line-strong: rgba(6, 51, 31, 0.16);

  --sr-green-1: #eef7e8;
  --sr-green-2: #e3f2df;
  --sr-green-3: #d7edd9;
  --sr-green-4: #cae7d3;
  --sr-green-5: #bedfca;

  --sr-card-a: #16603a;
  --sr-card-b: #1f7a49;
  --sr-card-c: #2b8f57;

  --sr-accent: #16ad63;

  background: var(--sr-green-1);
  color: var(--sr-ink);
}

/* Strip noisy globals */
.seo-refresh .k-promo,
.seo-refresh .marquee,
.seo-refresh .sticker-field,
.seo-refresh .sticker-drop,
.seo-refresh .sticker-sweep,
.seo-refresh .k-sweep-btn { display: none !important; }

/* Footer: match the other refreshed families */
.seo-refresh .k-foot,
.seo-refresh .k-foot * { font-family: var(--font-sans) !important; }
.seo-refresh .k-foot h3,
.seo-refresh .k-foot .k-foot-sub {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--k-lemon) !important;
  margin: 0 0 40px !important;
  line-height: 1 !important;
}
.seo-refresh .k-foot .k-foot-sub {
  font-size: 10px !important;
  letter-spacing: .12em !important;
  color: rgba(232,255,59,.5) !important;
  margin: 0 0 18px !important;
}
.seo-refresh .k-foot a {
  color: rgba(245,239,224,.7) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  transition: color .15s !important;
}
.seo-refresh .k-foot a:hover { color: var(--k-lemon) !important; background: transparent !important; }
.seo-refresh .k-foot p {
  color: rgba(245,239,224,.6) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
.seo-refresh .k-foot-bot,
.seo-refresh .k-foot-bot * {
  color: rgba(245,239,224,.4) !important;
  font-size: 13px !important;
}

/* -------- Typography -------- */
.seo-refresh,
.seo-refresh p,
.seo-refresh li,
.seo-refresh a,
.seo-refresh span,
.seo-refresh b,
.seo-refresh code,
.seo-refresh summary { font-family: var(--font-sans) !important; }

.seo-refresh h1,
.seo-refresh h2,
.seo-refresh h3,
.seo-refresh h4 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.045em !important;
  font-weight: 800 !important;
  color: var(--sr-ink);
}
.seo-refresh h1 { font-size: clamp(46px, 5.8vw, 92px); line-height: 0.94; }
.seo-refresh h2 { font-size: clamp(34px, 4vw, 60px); line-height: 1.02; }
.seo-refresh h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; }
.seo-refresh p, .seo-refresh li { font-size: 16.5px; line-height: 1.55; color: var(--sr-mid); }
.seo-refresh b, .seo-refresh strong { color: var(--sr-ink); font-weight: 700; }

/* Neutralize decorative accents used in existing markup */
.seo-refresh .serif,
.seo-refresh .hand,
.seo-refresh .hl,
.seo-refresh .hl-line,
.seo-refresh .hl-green,
.seo-refresh .lemon,
.seo-refresh .stroke,
.seo-refresh h1 span,
.seo-refresh h2 span,
.seo-refresh h3 span,
.seo-refresh [style*="font-serif"],
.seo-refresh [style*="font-style: italic"],
.seo-refresh [style*="font-style:italic"] {
  color: inherit !important;
  background: transparent !important;
  font-style: normal !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  -webkit-text-stroke: 0 !important;
  border: 0 !important;
  text-decoration: none !important;
}
.seo-refresh .hl::after,
.seo-refresh .hl-line::after { content: none !important; display: none !important; }

/* -------- Buttons -------- */
.seo-refresh .btn,
.seo-refresh .btn-lg,
.seo-refresh .btn-xl {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 22px !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: transform .2s ease, background .2s ease;
}
.seo-refresh .btn-xl { padding: 18px 30px !important; font-size: 17px; }
.seo-refresh .btn-ink,
.seo-refresh .btn-dark { background: var(--sr-forest) !important; color: #fff !important; }
.seo-refresh .btn-ink:hover { background: #021f14 !important; transform: translateY(-2px); }
.seo-refresh .btn-lemon,
.seo-refresh .btn-lime {
  background: #fff !important;
  color: var(--sr-forest) !important;
  border: 1px solid var(--sr-line-strong) !important;
}
.seo-refresh .btn-lemon:hover { background: var(--sr-green-2) !important; }
.seo-refresh .btn-arrow::after { content: " →"; margin-left: 2px; }
.seo-refresh .free-note {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  transform: none !important;
  color: var(--sr-mid) !important;
  font-size: 13px;
  font-weight: 600;
}
.seo-refresh .seo-hero-cta .free-note::before { content: none !important; }

/* ================================================================
   HERO — solid brand-green slab (matches products/solutions hero)
================================================================ */
.seo-refresh .seo-hero {
  padding: 150px max(5vw, 22px) 90px !important;
  background: var(--sr-accent) !important;
  border: 0 !important;
  min-height: 0;
}
.seo-refresh .seo-hero::before,
.seo-refresh .seo-hero::after { display: none !important; }

/* Contact Page templates use a light first screen to distinguish them from solutions. */
.page-template-refresh.seo-refresh .seo-hero {
  background: #f9fcf7 !important;
  border-bottom: 1px solid #dceadf !important;
}
.page-template-refresh.seo-refresh .seo-hero-copy h1 { color: #0c291d !important; }
.page-template-refresh.seo-refresh .seo-hero .seo-sub { color: #365849 !important; }
.page-template-refresh.seo-refresh .seo-direct-answer {
  background: #ffffff !important;
  box-shadow: 0 14px 36px rgba(8, 54, 33, 0.08) !important;
  border: 1px solid #e0ece1 !important;
}
.page-template-refresh .seo-hero-cta .free-note { color: #365849 !important; }
/* Head image sits bare on the light hero — no rounded card, no shadow frame */
.page-template-refresh.seo-refresh .seo-hero-media {
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ================================================================
   ALTERNATIVES — grass-green hero (#DFF362) + bare hero image.
   Uses the brand lemon/grass tone instead of solid deep green, and
   drops the rounded/shadow card frame so the head image sits directly
   on the hero (no background shadow box).
================================================================ */
.alternatives-refresh.seo-refresh .seo-hero {
  background: var(--k-lemon) !important;
}
.alternatives-refresh.seo-refresh .seo-hero-copy h1 { color: #0c291d !important; }
.alternatives-refresh.seo-refresh .seo-hero .seo-sub { color: #2c4a38 !important; }
.alternatives-refresh.seo-refresh .seo-hero-cta .free-note { color: #2c4a38 !important; }
.alternatives-refresh.seo-refresh .seo-direct-answer {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(12, 41, 29, 0.12) !important;
  box-shadow: none !important;
}
.alternatives-refresh.seo-refresh .seo-direct-answer .label { color: #0c291d !important; }
.alternatives-refresh.seo-refresh .seo-direct-answer p { color: #2c4a38 !important; }
/* Head image: no rounded card, no shadow, transparent — sits bare on the hero */
.alternatives-refresh.seo-refresh .seo-hero-media {
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ================================================================
   PAGE TEMPLATES — unified light theme below the hero.
   Solutions/alternatives keep the pale-green rhythm; template pages
   use a clean white / near-white alternation so the whole page reads
   as one consistent light surface (distinct from the green solutions).
================================================================ */
.page-template-refresh.seo-refresh .seo-sec { background: #ffffff !important; }
.page-template-refresh.seo-refresh .seo-sec + .seo-sec { background: #f6faf4 !important; }
.page-template-refresh.seo-refresh .seo-sec + .seo-sec + .seo-sec { background: #ffffff !important; }
.page-template-refresh.seo-refresh .seo-sec + .seo-sec + .seo-sec + .seo-sec { background: #f6faf4 !important; }
.page-template-refresh.seo-refresh .seo-sec + .seo-sec + .seo-sec + .seo-sec + .seo-sec { background: #ffffff !important; }
.page-template-refresh.seo-refresh .seo-faq { background: #f6faf4 !important; }
/* Add hairline separators so adjacent white sections stay legible. */
.page-template-refresh.seo-refresh .seo-sec + .seo-sec { border-top: 1px solid #e9f1ea !important; }
/* Pain chips + pill dot pick up a neutral tint on white. */
.page-template-refresh.seo-refresh .seo-pain-list li { box-shadow: 0 1px 2px rgba(6, 51, 31, 0.05), 0 0 0 1px #eef3ee !important; }
.page-template-refresh.seo-refresh .seo-pain-list li::before { background: #e6f3ea !important; }
/* Comparison table row hover — keep it subtle on the white theme. */
.page-template-refresh.seo-refresh .seo-cmp tbody tr:hover td { background: #f6faf4 !important; }

.seo-refresh .seo-hero-inner {
  width: 100%; max-width: 1240px !important; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 6vw; align-items: center;
}
.seo-refresh .seo-hero-inner.narrow {
  grid-template-columns: 1fr !important;
  text-align: left;
}
.seo-refresh .seo-hero-inner.narrow .seo-hero-copy { text-align: left; }
.seo-refresh .seo-hero-inner.narrow h1 { max-width: 1020px; }
.seo-refresh .seo-hero-copy h1 {
  color: #ffffff !important;
  margin: 8px 0 22px !important;
  font-size: clamp(44px, 5.4vw, 88px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}
.seo-refresh .seo-hero .seo-sub {
  color: rgba(255, 255, 255, 0.9) !important;
  opacity: 1 !important;
  font-size: clamp(16.5px, 1.4vw, 20px) !important;
  line-height: 1.55 !important;
  max-width: 620px;
  margin-bottom: 26px;
}
.seo-refresh .seo-hero-inner.narrow .seo-sub { margin-left: 0; margin-right: 0; }

/* Direct-answer card sits inside the green hero: white pill */
.seo-refresh .seo-direct-answer {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 0 !important;
  box-shadow: 0 18px 40px rgba(6, 34, 20, 0.24) !important;
  border-radius: 18px !important;
  padding: 20px 22px !important;
}
.seo-refresh .seo-direct-answer .label {
  background: var(--sr-forest) !important;
  color: #eafce6 !important;
  border-radius: 999px !important;
  padding: 3px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 10px;
}
.seo-refresh .seo-direct-answer p {
  color: var(--sr-ink) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}

.seo-refresh .seo-hero-cta { margin-top: 28px !important; gap: 16px !important; }
.seo-refresh .seo-hero-inner.narrow .seo-hero-cta { justify-content: flex-start; }
.seo-refresh .seo-hero-inner.narrow .seo-direct-answer {
  max-width: 780px;
  margin: 0 0 24px;
}
.seo-refresh .seo-hero-inner.narrow .seo-hero-copy { max-width: 1040px; }
.seo-refresh .seo-hero-inner.narrow .seo-hero-cta { margin-top: 10px !important; }

/* Hide the crumb strip (matches other refreshed families) */
.seo-refresh .seo-crumbs { display: none !important; }
.seo-refresh .tpl-cat-head h2 span { font-family: inherit !important; font-style: normal !important; font-weight: inherit !important; color: inherit !important; }

/* -------- Hero media (image + legacy mv-* mockups) -------- */
.seo-refresh .seo-hero-media {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(6, 34, 20, 0.35);
  background: transparent;
  transform: none !important;
}
.seo-refresh .seo-hero-media img { display: block; width: 100%; height: auto; }

.seo-refresh .mv {
  position: relative !important;
  transform: none !important;
  padding: 0 !important;
}
.seo-refresh .mv-sticker { display: none !important; }
.seo-refresh .mv-frame {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 60px rgba(6, 34, 20, 0.28) !important;
  transform: none !important;
  overflow: hidden;
}
.seo-refresh .mv-bar {
  background: var(--sr-green-2) !important;
  border-bottom: 1px solid var(--sr-line) !important;
  padding: 10px 14px !important;
}
.seo-refresh .mv-bar .url {
  background: #fff !important;
  border: 1px solid var(--sr-line) !important;
  color: var(--sr-mid) !important;
}
.seo-refresh .mv-ecom .mv-frame,
.seo-refresh .mv-saas .mv-frame,
.seo-refresh .mv-cms .mv-frame,
.seo-refresh .mv-menu .mv-frame,
.seo-refresh .mv-ig .mv-frame,
.seo-refresh .mv-law .mv-frame { background: #ffffff !important; }

/* Dark-surface mockups keep their own deep gradient so the light text on
   them stays legible. The generic `.seo-refresh .mv-frame { background:#fff }`
   above is meant for the white browser/screenshot mockups only — it must NOT
   flatten the business-card / countdown / code cards, whose copy is cream/lemon
   on a dark ground. Restore their native backgrounds here. */
.seo-refresh .mv-card .mv-frame {
  background: linear-gradient(135deg, var(--k-ink) 0%, var(--k-green-dark) 100%) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 60px rgba(6, 34, 20, 0.28) !important;
}
.seo-refresh .mv-countdown .mv-frame {
  background: linear-gradient(135deg, var(--k-ink) 0%, #1a2820 100%) !important;
}
.seo-refresh .mv-code .mv-frame { background: #0F172A !important; }

/* ================================================================
   Section rhythm — pale green washes between the hero & the final CTA
================================================================ */
.seo-refresh .seo-sec {
  padding: 90px max(5vw, 22px) !important;
  background: var(--sr-green-2);
  border: 0 !important;
}
.seo-refresh .seo-sec + .seo-sec { background: var(--sr-green-3); }
.seo-refresh .seo-sec + .seo-sec + .seo-sec { background: var(--sr-green-4); }
.seo-refresh .seo-sec + .seo-sec + .seo-sec + .seo-sec { background: var(--sr-green-5); }
.seo-refresh .seo-sec + .seo-sec + .seo-sec + .seo-sec + .seo-sec { background: var(--sr-green-2); }
.seo-refresh .seo-sec-inner { max-width: 1180px; margin: 0 auto; }

.seo-refresh .seo-sec h2 {
  color: var(--sr-ink) !important;
  margin-bottom: 24px;
  max-width: 900px;
}
.seo-refresh .seo-sec-inner > p { max-width: 820px; }

/* Pain-point list — bullet chips */
.seo-refresh .seo-pain-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.seo-refresh .seo-pain-list li {
  position: relative;
  padding: 18px 22px 18px 52px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(6, 51, 31, 0.04);
  color: var(--sr-mid) !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
}
.seo-refresh .seo-pain-list li::before {
  content: '';
  position: absolute; left: 18px; top: 22px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sr-green-3);
  box-shadow: inset 0 0 0 6px #ffffff;
  border: 1px solid var(--sr-line);
}

/* -------- Comparison table -------- */
.seo-refresh .seo-cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff !important;
  border-radius: 24px !important;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(6, 51, 31, 0.08);
  margin-top: 12px;
}
.seo-refresh .seo-cmp thead th {
  background: var(--sr-forest) !important;
  color: #eafce6 !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  padding: 16px 18px !important;
  text-align: left;
  border: 0 !important;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.seo-refresh .seo-cmp thead th.k { color: #ffffff !important; background: var(--sr-accent) !important; }
.seo-refresh .seo-cmp tbody td {
  padding: 14px 18px !important;
  border: 0 !important;
  border-top: 1px solid var(--sr-line) !important;
  color: var(--sr-mid) !important;
  background: #ffffff !important;
  font-size: 15px !important;
}
.seo-refresh .seo-cmp tbody tr:hover td { background: var(--sr-green-1) !important; }
.seo-refresh .seo-cmp .check {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(22, 173, 99, 0.14);
  color: var(--sr-accent) !important;
  font-weight: 800 !important;
}
.seo-refresh .seo-cmp .dash {
  color: var(--sr-muted) !important;
  opacity: 0.7;
  font-weight: 700;
}
.seo-refresh .seo-cmp-prose {
  margin-top: 22px;
  color: var(--sr-mid) !important;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 860px;
}

/* -------- FAQ -------- */
.seo-refresh .seo-faq { background: var(--sr-green-2) !important; }
.seo-refresh .faq-list { display: grid; gap: 14px; max-width: 860px; margin: 16px 0 0; }
.seo-refresh .faq-item {
  padding: 0 !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 14px rgba(6, 51, 31, 0.07) !important;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.seo-refresh .faq-item:hover { box-shadow: 0 12px 28px rgba(6, 51, 31, 0.11) !important; }
.seo-refresh .faq-item[open] { box-shadow: 0 18px 40px rgba(6, 51, 31, 0.14) !important; transform: translateY(-1px); }
.seo-refresh .faq-item summary {
  list-style: none !important;
  padding: 22px 60px 22px 24px !important;
  position: relative;
  cursor: pointer;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 17.5px !important;
  color: var(--sr-ink) !important;
  letter-spacing: -0.01em;
  background: transparent !important;
  border: 0 !important;
}
.seo-refresh .faq-item summary::-webkit-details-marker,
.seo-refresh .faq-item summary::marker { display: none; content: ''; }
.seo-refresh .faq-item summary::after {
  content: '';
  position: absolute; right: 22px; top: 50%;
  width: 12px; height: 12px;
  border-right: 2px solid var(--sr-forest);
  border-bottom: 2px solid var(--sr-forest);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s ease;
}
.seo-refresh .faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.seo-refresh .faq-item p.faq-answer,
.seo-refresh .faq-item > p {
  margin: 0 !important;
  padding: 0 24px 22px !important;
  color: var(--sr-mid) !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}
.seo-refresh .faq-item code {
  background: var(--sr-green-2) !important;
  color: var(--sr-forest) !important;
  padding: 2px 6px; border-radius: 6px;
  font-family: var(--font-mono);
}

/* -------- Related cards -------- */
.seo-refresh .seo-related {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 12px;
}
.seo-refresh .seo-related-card {
  padding: 24px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 2px rgba(6, 51, 31, 0.04) !important;
  color: var(--sr-mid) !important;
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none;
}
.seo-refresh .seo-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(6, 51, 31, 0.10) !important;
}
.seo-refresh .seo-related-card b {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  color: var(--sr-ink) !important;
  letter-spacing: -0.01em;
}
.seo-refresh .seo-related-card p {
  margin: 0;
  font-size: 14.5px !important;
  color: var(--sr-mid) !important;
}
.seo-refresh .seo-related-card .arrow {
  margin-top: auto;
  color: var(--sr-forest) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 13.5px;
}

/* -------- Link list (templates/solutions indexes) -------- */
.seo-refresh .seo-link-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 28px !important;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.seo-refresh .seo-link-list li { margin: 0 !important; }
.seo-refresh .seo-link-list a {
  display: flex; align-items: center;
  padding: 18px 22px !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(6, 51, 31, 0.04);
  color: var(--sr-ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em;
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.seo-refresh .seo-link-list a::after {
  content: '→';
  margin-left: auto;
  color: var(--sr-forest);
  transition: transform .2s ease;
}
.seo-refresh .seo-link-list a:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(6, 51, 31, 0.10);
}
.seo-refresh .seo-link-list a:hover::after { transform: translateX(3px); }

/* ================================================================
   Templates index — .tpl-cat-* becomes the products/solutions card
================================================================ */
.seo-refresh .tpl-cat-sec {
  padding: 90px max(5vw, 22px) !important;
  border: 0 !important;
  background: var(--sr-green-2) !important;
}
.seo-refresh .tpl-cat-sec:nth-of-type(odd) { background: var(--sr-green-2) !important; }
.seo-refresh .tpl-cat-sec:nth-of-type(even) { background: var(--sr-green-3) !important; }
.seo-refresh .tpl-cat-inner { max-width: 1240px; margin: 0 auto; }
.seo-refresh .tpl-cat-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; margin-bottom: 32px; flex-wrap: wrap;
}
.seo-refresh .tpl-cat-head h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  color: var(--sr-ink) !important;
  margin: 0 !important;
}
.seo-refresh .tpl-cat-head .count {
  background: var(--sr-forest) !important;
  color: #eafce6 !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
}
.seo-refresh .tpl-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.seo-refresh .tpl-cat-card {
  padding: 22px 22px 20px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 2px rgba(6, 51, 31, 0.04) !important;
  color: var(--sr-mid) !important;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none;
}
.seo-refresh .tpl-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(6, 51, 31, 0.10) !important;
}
.seo-refresh .tpl-cat-card b {
  color: var(--sr-ink) !important;
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  letter-spacing: -0.01em;
}
.seo-refresh .tpl-cat-card .kw {
  color: var(--sr-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.03em;
}
.seo-refresh .tpl-cat-card .arrow {
  margin-top: auto; align-self: flex-start;
  color: var(--sr-forest) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 13.5px;
}

/* ================================================================
   Final CTA — dark forest slab (matches products/solutions)
================================================================ */
.seo-refresh .seo-final {
  padding: 130px max(5vw, 22px) !important;
  background: var(--sr-forest) !important;
  color: #ffffff !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 0 !important;
}
.seo-refresh .seo-final::before {
  content: '';
  position: absolute; inset: -40% -20% auto auto;
  width: 620px; height: 620px;
  background: radial-gradient(closest-side, rgba(22, 173, 99, 0.32), transparent 70%);
  pointer-events: none;
}
.seo-refresh .seo-final h2 {
  color: #ffffff !important;
  font-size: clamp(40px, 5vw, 78px) !important;
  line-height: 0.98 !important;
  margin: 0 0 18px !important;
  position: relative; z-index: 1;
}
.seo-refresh .seo-final p {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 17px;
  max-width: 620px;
  margin: 0 auto 32px !important;
  position: relative; z-index: 1;
}
.seo-refresh .seo-final .btn-lemon,
.seo-refresh .seo-final .btn-xl {
  background: var(--sr-accent) !important;
  color: var(--sr-ink) !important;
  border: 0 !important;
  position: relative; z-index: 1;
}
.seo-refresh .seo-final .btn-lemon:hover { background: #0f9457 !important; }

/* ================================================================
   Responsive
================================================================ */
@media (max-width: 1024px) {
  .seo-refresh .seo-hero-inner { grid-template-columns: 1fr !important; gap: 40px; }
  .seo-refresh .seo-pain-list { grid-template-columns: 1fr; }
  .seo-refresh .seo-related { grid-template-columns: 1fr 1fr; }
  .seo-refresh .tpl-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .seo-refresh .seo-link-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .seo-refresh .seo-hero { padding: 130px 18px 70px !important; }
  .seo-refresh .seo-hero-copy h1 { font-size: 12vw !important; }
  .seo-refresh .seo-hero-inner.narrow .seo-direct-answer { padding: 18px !important; }
  .seo-refresh .seo-sec { padding: 70px 18px !important; }
  .seo-refresh .tpl-cat-sec { padding: 70px 18px !important; }
  .seo-refresh .tpl-cat-grid { grid-template-columns: 1fr; }
  .seo-refresh .seo-related { grid-template-columns: 1fr; }
  .seo-refresh .seo-link-list { grid-template-columns: 1fr; }
  .seo-refresh .seo-cmp thead th,
  .seo-refresh .seo-cmp tbody td { padding: 12px 14px !important; font-size: 14px !important; }
  .seo-refresh .seo-final { padding: 100px 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .seo-refresh * { animation: none !important; transition: none !important; transform: none !important; }
}