/*
Theme Name: SM3 SEO Theme
Theme URI: https://sm3marketing.com
Description: Minimal, conversion-focused theme for SM3 "we buy houses" SEO sites. No page builders, no jQuery, zero theme JS — one stylesheet + one self-hosted variable font. Brand values (company name, phone, address, accent color) are read from the SM3 Landing Optimizer plugin's options.
Version: 1.6.6
Author: SM3 Marketing
Text Domain: sm3-seo-theme
Requires at least: 5.8
Requires PHP: 7.4
License: Proprietary
*/

/* ---------- Font (self-hosted, OFL — see assets/fonts/OFL-LICENSE.txt) ---------- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/outfit-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched local fallback (values computed from the bundled woff2 vs
   Arial) so the pre-swap paint occupies the same lines — no hero reflow. */
@font-face {
  font-family: "Outfit-fallback";
  src: local("Arial");
  size-adjust: 127.09%;
  ascent-override: 78.68%;
  descent-override: 20.46%;
  line-gap-override: 0%;
}

/* ---------- Tokens / base ---------- */
:root {
  --sm3-accent: #0e7a3d; /* overridden by sm3_lo_accent_color via inline <style> in wp_head */
  --sm3-ink: #10202e;
  --sm3-text: #1c2b38;
  --sm3-muted: #5d6b77;
  --sm3-line: #e6e4dd;
  --sm3-soft: #faf8f4;   /* warm paper tint */
  --sm3-radius: 14px;
  --sm3-shadow-card: 0 1px 2px rgba(16, 32, 46, .06), 0 12px 32px rgba(16, 32, 46, .08);
  --sm3-shadow-pop: 0 2px 8px rgba(16, 32, 46, .08), 0 20px 48px rgba(16, 32, 46, .14);
  --sm3-slant: 3.25vw; /* diagonal section edges */
  --sm3-on-accent: #fff; /* text on accent surfaces; PHP flips to ink for light accents */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Outfit", "Outfit-fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--sm3-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  /* Full-bleed hero/band sections use 50vw math; vw includes the scrollbar
     gutter, so clip the stray sliver instead of growing a horizontal
     scrollbar. clip (unlike hidden) creates no new scroll container. */
  overflow-x: clip;
}
img { max-width: 100%; height: auto; }
a { color: var(--sm3-accent); }
a:hover { opacity: .85; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sm3-accent);
  outline-offset: 2px;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  overflow: hidden;
  word-wrap: normal !important;
}

/* ---------- Sticky header ---------- */
.sm3-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .93);
  border-bottom: 1px solid var(--sm3-line);
}
.sm3-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: .7rem 1.25rem;
}
.sm3-brand { margin-right: auto; display: flex; align-items: center; min-width: 0; }
.sm3-brand a { text-decoration: none; }
.sm3-brand-link {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--sm3-ink);
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm3-brand .custom-logo { max-height: 46px; width: auto; display: block; }
.sm3-nav ul { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.sm3-nav a {
  position: relative;
  color: var(--sm3-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding-block: .3rem;
}
.sm3-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--sm3-accent);
  transition: right .18s ease;
}
.sm3-nav a:hover { color: var(--sm3-accent); opacity: 1; }
.sm3-nav a:hover::after { right: 0; }
/* Mobile hamburger + toggle CSS lives in an inline, RUCSS-excluded <style>
   (functions.php::sm3_seo_theme_nav_style) so WP Rocket can't strip the
   desktop hide-rule and leak the hamburger onto desktop. */
.sm3-call-btn, .sm3-offer-btn { padding: .6rem 1.35rem; font-size: .95rem; white-space: nowrap; }
/* When the Get Cash Offer button is present, the phone link goes ghost/outline. */
a.sm3-btn.sm3-btn-ghost {
  background: #fff;
  color: var(--sm3-accent);
  box-shadow: inset 0 0 0 2px var(--sm3-accent);
}
a.sm3-btn.sm3-btn-ghost:hover {
  filter: none;
  transform: none;
  color: var(--sm3-accent);
  background: #f1f7f3;
}

@media (min-width: 861px) {
  /* Blur only where GPUs can afford it; the near-opaque white is the real
     readability guarantee (and the old-iOS/low-end-Android fallback). */
  .sm3-header {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
  }
}


/* ---------- Layout ---------- */
.sm3-main { max-width: 780px; margin: 0 auto; padding: 2.25rem 1.25rem 4rem; }
/* The header "Get Cash Offer" button jumps here (#content = the address-
   first hero). Offset the scroll so the sticky header doesn't cover it. */
#content { scroll-margin-top: 68px; }

/* ---------- Content typography (generated pages render via the_content) ---------- */
.sm3-content h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.75rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--sm3-ink);
  text-align: center;
  text-wrap: balance;
  margin: .75rem 0 1.25rem;
}
.sm3-content h2 {
  font-size: clamp(1.7rem, 3.4vw, 2rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--sm3-ink);
  text-align: center;
  text-wrap: balance;
  margin: 3.4rem 0 1.1rem;
}
/* Section rhythm: short centered accent bar under every content h2 … */
.sm3-content h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: var(--sm3-accent);
  margin: .55rem auto 0;
}
/* … except inside cards and CTA bands, where it stays clean. */
.sm3-form-card h2::after, .sm3-band h2::after, .sm3-hero h2::after, .sm3-address-cta h2::after { content: none; }
/* Long-form blog posts stay editorial: left-aligned section headings.
   (.sm3-single and .sm3-content sit on the same <article>; the post's
   .sm3-cta-box renders OUTSIDE that article, so it is unaffected.) */
.sm3-content.sm3-single h2 { text-align: left; font-size: 1.65rem; }
.sm3-content.sm3-single h2::after { margin-inline: 0; }
.sm3-content h3 { font-size: 1.28rem; line-height: 1.3; font-weight: 700; color: var(--sm3-ink); margin: 1.9rem 0 .6rem; }
.sm3-content p { margin: 1rem 0; }
.sm3-content ul { padding-left: 1.5rem; margin: 1.1rem 0; }
.sm3-content ul li { margin: .5rem 0; padding-left: .25rem; }
.sm3-content ol { padding-left: 1.6rem; margin: 1.1rem 0; }
.sm3-content ol li { margin: .65rem 0; padding-left: .35rem; }
.sm3-content ol li::marker { font-weight: 700; color: var(--sm3-accent); }
.sm3-content blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--sm3-accent);
  background: var(--sm3-soft);
  border-radius: 0 var(--sm3-radius) var(--sm3-radius) 0;
}
.sm3-content blockquote p { margin: .35rem 0; }
.sm3-content a { font-weight: 600; }
.sm3-page-title { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--sm3-ink); margin: .5rem 0 1rem; }

/* ---------- Full-bleed sections (hero + CTA band) ----------
   .sm3-main is a centered 780px column with 1.25rem inline padding, so the
   article content box is 740px (half = 370px). The negative inline margin
   stretches the section to the viewport; the inline padding puts its inner
   content back on the column grid. */
section.sm3-hero, section.sm3-band {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.25rem, calc(50vw - 370px));
}

/* ---------- Hero (page top: h1 + sub + checks + address CTA / form card) ----------
   v1.5.0: real photograph (bundled webp, preloaded from functions.php on
   pages) under an ink gradient overlay — the photo-lander look. The
   background-COLOR is dark ink so the white hero text stays readable even
   if the photo never arrives; the gradient overlay guarantees contrast
   over any part of the photo. Diagonal bottom edge via clip-path. */
section.sm3-hero {
  position: relative;
  background-color: #1d2b38;
  background-image:
    /* Trough alpha .62 is load-bearing: white 15.7-18.9px hero type over the
       photo's brightest rows measures ~4.7:1+ AA at .62 and FAILS at .52. */
    linear-gradient(180deg, rgba(12, 23, 33, .78) 0%, rgba(12, 23, 33, .62) 44%, rgba(12, 23, 33, .72) 100%),
    url("assets/img/hero-1600.webp");
  background-size: auto, cover;
  background-position: center, center 62%;
  background-repeat: no-repeat;
  padding-block: 3.5rem calc(3.75rem + var(--sm3-slant));
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sm3-slant)), 0 100%);
}
/* White type on the photo. Each rule outranks its base by the extra
   .sm3-hero ancestor (h1 wins on source order at equal specificity — this
   block must stay AFTER the content-typography rules). */
.sm3-hero h1 { color: #fff; text-shadow: 0 2px 20px rgba(8, 18, 28, .45); }
.sm3-hero ul.sm3-checks li { color: #fff; }
.sm3-hero ul.sm3-checks li::before { box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.sm3-hero .sm3-address-cta h2 { color: #fff; text-shadow: 0 1px 12px rgba(8, 18, 28, .4); }
.sm3-hero p.sm3-call-line { color: rgba(255, 255, 255, .9); }
.sm3-hero p.sm3-call-line a { color: #fff; }
.sm3-hero a:focus-visible, .sm3-hero button:focus-visible { outline-color: #fff; }
/* …but NOT inside the white form card the generators nest in the hero
   (get-offer page; hero fallback on campaigns without a formShortcode) —
   same counter-rule pattern the dark band uses. Ditto the white focus
   outline: invisible on the card and on the white address pill's button. */
.sm3-hero .sm3-form-card p.sm3-call-line { color: var(--sm3-muted); }
.sm3-hero .sm3-form-card p.sm3-call-line a { color: var(--sm3-accent); }
.sm3-hero .sm3-form-card a:focus-visible,
.sm3-hero .sm3-form-card button:focus-visible,
.sm3-hero .sm3-address-form button:focus-visible { outline-color: var(--sm3-accent); }
/* Pull the tinted band flush against the sticky header (swallows .sm3-main's top padding). */
.sm3-content > .sm3-hero:first-child { margin-block-start: -2.25rem; }
.sm3-hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: .25rem 0 1rem;
}
.sm3-hero .sm3-sub {
  font-size: 1.18rem;
  color: #fff;
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto 1.5rem;
}

/* ---------- Address-first hero CTA (white pill: input + attached button) ---------- */
.sm3-address-cta { max-width: 640px; margin: 2.75rem auto 0; }
.sm3-address-cta h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.02em; color: var(--sm3-ink); margin: 0 0 1.1rem; }
.sm3-address-form {
  display: flex;
  align-items: stretch;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--sm3-line);
  border-radius: 999px;
  padding: .45rem;
  /* Neutral halo separates the pill from the tinted hero; the @supports
     block swaps in an accent-tinted version (never hardcode an accent
     rgba here — wrong color on non-green sites). */
  box-shadow: var(--sm3-shadow-pop), 0 0 0 6px rgba(16, 32, 46, .05);
  text-align: left;
}
.sm3-address-form:focus-within {
  box-shadow: var(--sm3-shadow-pop), 0 0 0 3px rgba(14, 122, 61, .28);
}
.sm3-address-form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  /* Map-pin cue inside the address input (v1.6.6) — pure CSS on the pill
     markup, so it restyles already-published pills with no plugin change
     or republish. Muted so the placeholder text stays the focus. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1.15rem center;
  background-size: 20px 20px;
  font-family: inherit;
  font-size: 1.1rem;
  padding: 1rem 1.3rem 1rem 2.9rem;
  border-radius: 999px;
  color: var(--sm3-text);
}
/* The pill itself carries the focus ring (focus-within above); transparent
   (not none) so Windows forced-colors mode repaints it as a visible ring. */
.sm3-address-form input[type="text"]:focus-visible { outline: 2px solid transparent; }
.sm3-address-form button {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 999px;
  padding: 1rem 1.7rem;
  font-size: 1.05rem;
  box-shadow: 0 4px 14px rgba(14, 122, 61, .3);
}
.sm3-address-cta .sm3-call-line { margin-top: 1rem; }

/* ---------- Checkmark bullets (chrome-less: check disc + bold text) ----------
   Deliberately NOT white pills: the address form is the only white rounded
   element in the hero, so the eye lands on it. (v1.4.1 and earlier boxed
   each check in its own pill — three form-lookalikes above the real form.) */
ul.sm3-checks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.7rem;
  padding: 0;
  margin: .25rem 0 .75rem;
}
ul.sm3-checks li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: .98rem;
  color: var(--sm3-ink);
}
ul.sm3-checks li::before {
  content: "\2713";
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--sm3-accent);
  color: var(--sm3-on-accent, #fff);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(16, 32, 46, .14);
}

/* ---------- Elevated form card ---------- */
.sm3-form-card {
  background: #fff;
  border: 1px solid var(--sm3-line);
  border-radius: 18px;
  box-shadow: var(--sm3-shadow-pop);
  padding: 1.9rem 1.75rem;
  max-width: 640px;
  margin: 2rem auto .25rem;
  text-align: left;
}
.sm3-form-card h2 { margin: 0 0 .75rem; font-size: 1.4rem; text-align: center; color: var(--sm3-ink); }
p.sm3-call-line { font-size: .92rem; color: var(--sm3-muted); text-align: center; margin: 1.1rem 0 0; }
/* WPForms embedded in a form card sheds its own box — the card IS the box. */
.sm3-form-card .wpforms-container {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 1rem 0 0;
  max-width: none;
}
.sm3-form-card .wpforms-submit {
  display: block !important;
  width: 100% !important;
  padding: 1rem 1.5rem !important;
  font-size: 1.1rem !important;
}

/* ---------- Step cards (accent cap + flat icon + centered copy) ----------
   Markup is unchanged (<li><strong>Title.</strong> copy…</li>) so pages
   published before this version pick the card look up on theme update.
   3-across on desktop via auto-fit (the 4-step how-it-works timeline gets
   4-across), single column on phones. Icons are fixed-palette flat SVGs —
   accent-neutral, same idea as the hero rooflines — keyed by position;
   the last step is always "get paid" on every page, so :last-child pins
   the money bag on both 3- and 4-step sets (it is last in source order,
   beating the equal-specificity :nth-child rules). */
ol.sm3-steps {
  list-style: none;
  counter-reset: sm3-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 1.15rem;
  padding: 0;
  margin: 2rem 0;
}
/* Exactly four steps (the how-it-works timeline): a balanced 2×2 beats the
   3+1 orphan that auto-fit produces in a 740px column. Browsers without
   :has() just keep the auto-fit wrap — layout preference, not breakage. */
ol.sm3-steps:has(> li:first-child:nth-last-child(4)) { grid-template-columns: repeat(2, 1fr); }
ol.sm3-steps li {
  counter-increment: sm3-step;
  margin: 0;
  padding: 0 1.15rem 1.3rem;
  background: #fff;
  border: 1px solid var(--sm3-line);
  border-radius: 16px;
  overflow: hidden; /* clips the cap's square corners to the card radius */
  box-shadow: var(--sm3-shadow-card);
  font-size: .95rem;
  line-height: 1.55;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
ol.sm3-steps li:hover { transform: translateY(-3px); box-shadow: var(--sm3-shadow-pop); }
/* Accent header cap */
ol.sm3-steps li::before {
  content: "Step " counter(sm3-step);
  display: block;
  margin: 0 -1.15rem 1.05rem;
  padding: .5rem 0 .55rem;
  background: var(--sm3-accent);
  color: var(--sm3-on-accent, #fff);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .02em;
}
/* Uppercase title, then icon, then copy — the SMHF card anatomy. */
ol.sm3-steps li > strong:first-child {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sm3-ink);
}
ol.sm3-steps li > strong:first-child::after {
  content: "";
  display: block;
  height: 72px;
  margin: .85rem auto .75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='7' y='9' width='50' height='46' rx='6' fill='%23e9f1f9'/%3E%3Cpath d='M7 15a6 6 0 0 1 6-6h38a6 6 0 0 1 6 6v8H7Z' fill='%235b87b5'/%3E%3Ccircle cx='14.5' cy='16' r='2.2' fill='%23ffffff' fill-opacity='.9'/%3E%3Ccircle cx='21.5' cy='16' r='2.2' fill='%23ffffff' fill-opacity='.55'/%3E%3Crect x='13' y='29' width='15' height='13' rx='2.5' fill='%23e86a5e'/%3E%3Crect x='33' y='30' width='18' height='4.5' rx='2.25' fill='%2394b3cd'/%3E%3Crect x='33' y='38' width='18' height='4.5' rx='2.25' fill='%2394b3cd'/%3E%3Crect x='13' y='47' width='38' height='4.5' rx='2.25' fill='%23bfd3e3'/%3E%3C/svg%3E") center / contain no-repeat;
}
ol.sm3-steps li:nth-child(2) > strong:first-child::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='44' y='9' width='7' height='12' rx='1' fill='%235b87b5'/%3E%3Crect x='14' y='27' width='36' height='28' rx='2.5' fill='%23e9f1f9'/%3E%3Cpath d='M32 5 5 29h54Z' fill='%235b87b5'/%3E%3Crect x='27' y='39' width='10' height='16' rx='1.5' fill='%23f2a83b'/%3E%3Crect x='17.5' y='33' width='7.5' height='7.5' rx='1.5' fill='%23a8c6e0'/%3E%3Crect x='39' y='33' width='7.5' height='7.5' rx='1.5' fill='%23a8c6e0'/%3E%3C/svg%3E");
}
ol.sm3-steps li:nth-child(3) > strong:first-child::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='13' y='5' width='38' height='54' rx='5' fill='%23e9f1f9'/%3E%3Crect x='20' y='13' width='24' height='4.5' rx='2.25' fill='%2394b3cd'/%3E%3Crect x='20' y='22' width='24' height='4.5' rx='2.25' fill='%2394b3cd'/%3E%3Crect x='20' y='31' width='15' height='4.5' rx='2.25' fill='%23bfd3e3'/%3E%3Ccircle cx='39' cy='45' r='11' fill='%23f2a83b'/%3E%3Cpath d='m34 45 3.5 3.5 7-7.5' stroke='%23ffffff' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
ol.sm3-steps li:last-child > strong:first-child::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M23 5h18l-5.5 9h-7Z' fill='%23d98324'/%3E%3Cpath d='M26 14h12c9 5.5 14 14 14 24 0 12.5-8.5 21-20 21S12 50.5 12 38c0-10 5-18.5 14-24Z' fill='%23f2a83b'/%3E%3Cpath d='M32 23v30' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M38.5 29.5c0-3.2-2.9-5-6.5-5s-6.5 1.8-6.5 5 3 4.6 6.5 5.5 6.5 2.3 6.5 5.5-2.9 5-6.5 5-6.5-1.8-6.5-5' stroke='%23ffffff' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Card grid (situations / benefits) ---------- */
ul.sm3-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
  padding: 0;
  margin: 1.6rem 0;
}
ul.sm3-cards li {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sm3-line);
  border-radius: 16px;
  padding: 1.35rem 1.3rem;
  margin: 0;
  box-shadow: var(--sm3-shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
ul.sm3-cards li:hover {
  transform: translateY(-3px);
  box-shadow: var(--sm3-shadow-pop);
}
/* Per-category icon chip above the card title. The generators (v2.2+)
   stamp each card with a stable sm3-ci-<category> class; each maps to its
   own flat fixed-palette SVG below. Cards published before that (no class)
   get the default house — same visual system, just less specific. The chip
   is one background layer over a solid tint, so overrides swap ONLY
   background-image and inherit position/size/color. */
ul.sm3-cards li::before {
  content: "";
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin: 0 0 .9rem;
  /* Photo on top, flat SVG icon + tint underneath: a background layer
     that fails to load paints transparent, so browsers that can't fetch
     or decode the webp fall back to the icon chip automatically. */
  background-image: url("assets/img/ci-default.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='12' y='27' width='40' height='26' rx='2.5' fill='%23e9f1f9'/%3E%3Cpath d='M32 5 5 29h54Z' fill='%235b87b5'/%3E%3Crect x='27' y='38' width='10' height='15' rx='1.5' fill='%23f2a83b'/%3E%3C/svg%3E");
  background-size: cover, 34px 34px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #edf3f9;
  box-shadow: 0 4px 12px rgba(16, 32, 46, .18);
}
ul.sm3-cards li.sm3-ci-inherited::before { background-image: url("assets/img/ci-inherited.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='8' y='26' width='34' height='24' rx='2' fill='%23e9f1f9'/%3E%3Cpath d='M25 6 3 26h44Z' fill='%235b87b5'/%3E%3Crect x='20' y='34' width='10' height='16' rx='1.5' fill='%23a8c6e0'/%3E%3Ccircle cx='45' cy='43' r='8' fill='%23f2a83b'/%3E%3Ccircle cx='45' cy='43' r='3' fill='%23ffffff'/%3E%3Crect x='51' y='41' width='10' height='4' rx='2' fill='%23f2a83b'/%3E%3Crect x='56' y='45' width='3.5' height='5' rx='1' fill='%23f2a83b'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-foreclosure::before { background-image: url("assets/img/ci-foreclosure.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='10' y='28' width='32' height='24' rx='2' fill='%23e9f1f9'/%3E%3Cpath d='M26 8 4 28h44Z' fill='%235b87b5'/%3E%3Crect x='21' y='36' width='10' height='16' rx='1.5' fill='%23a8c6e0'/%3E%3Ccircle cx='48' cy='19' r='11' fill='%23f2a83b'/%3E%3Cpath d='M48 12.5V19l4.5 3.5' stroke='%23ffffff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-divorce::before { background-image: url("assets/img/ci-divorce.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M6 30 24 14v36H6Z' fill='%235b87b5'/%3E%3Cpath d='M58 30 40 14v36h18Z' fill='%23a8c6e0'/%3E%3Cpath d='m31 12 4 8-6 6 6 8-4 8' stroke='%23e86a5e' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-relocating::before { background-image: url("assets/img/ci-relocating.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='4' y='18' width='34' height='24' rx='2.5' fill='%23a8c6e0'/%3E%3Crect x='9' y='24' width='11' height='9' rx='1' fill='%23ffffff' fill-opacity='.75'/%3E%3Cpath d='M38 26h12l8 8v8H38Z' fill='%235b87b5'/%3E%3Crect x='42' y='29' width='7' height='6' rx='1' fill='%23e9f1f9'/%3E%3Ccircle cx='16' cy='45' r='5' fill='%233c4c5c'/%3E%3Ccircle cx='16' cy='45' r='2' fill='%23ffffff'/%3E%3Ccircle cx='47' cy='45' r='5' fill='%233c4c5c'/%3E%3Ccircle cx='47' cy='45' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-landlord::before { background-image: url("assets/img/ci-landlord.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='13' y='8' width='27' height='44' rx='2.5' fill='%23e9f1f9'/%3E%3Crect x='18' y='14' width='6' height='6' rx='1' fill='%23a8c6e0'/%3E%3Crect x='29' y='14' width='6' height='6' rx='1' fill='%23a8c6e0'/%3E%3Crect x='18' y='24' width='6' height='6' rx='1' fill='%23a8c6e0'/%3E%3Crect x='29' y='24' width='6' height='6' rx='1' fill='%23a8c6e0'/%3E%3Crect x='18' y='34' width='6' height='6' rx='1' fill='%23a8c6e0'/%3E%3Crect x='29' y='34' width='6' height='6' rx='1' fill='%23a8c6e0'/%3E%3Crect x='23' y='43' width='7' height='9' rx='1' fill='%235b87b5'/%3E%3Ccircle cx='47' cy='38' r='7' fill='%23f2a83b'/%3E%3Ccircle cx='47' cy='38' r='2.5' fill='%23ffffff'/%3E%3Crect x='45' y='44' width='4' height='11' rx='2' fill='%23f2a83b'/%3E%3Crect x='49' y='50' width='4' height='3.5' rx='1' fill='%23f2a83b'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-repairs::before { background-image: url("assets/img/ci-repairs.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='8' y='26' width='34' height='24' rx='2' fill='%23e9f1f9'/%3E%3Cpath d='M25 6 3 26h44Z' fill='%235b87b5'/%3E%3Crect x='20' y='34' width='10' height='16' rx='1.5' fill='%23a8c6e0'/%3E%3Cpath d='M40 54 52 42' stroke='%23f2a83b' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='54' cy='40' r='7.5' fill='%23f2a83b'/%3E%3Ccircle cx='57' cy='37' r='3.6' fill='%23ffffff'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-taxes::before { background-image: url("assets/img/ci-taxes.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='13' y='6' width='30' height='46' rx='4' fill='%23e9f1f9'/%3E%3Crect x='19' y='14' width='18' height='4' rx='2' fill='%2394b3cd'/%3E%3Crect x='19' y='22' width='18' height='4' rx='2' fill='%2394b3cd'/%3E%3Crect x='19' y='30' width='12' height='4' rx='2' fill='%23bfd3e3'/%3E%3Ccircle cx='44' cy='44' r='11' fill='%23e86a5e'/%3E%3Ccircle cx='40' cy='40' r='2.5' fill='%23ffffff'/%3E%3Ccircle cx='48' cy='48' r='2.5' fill='%23ffffff'/%3E%3Cpath d='m48 39-8 10' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-vacant::before { background-image: url("assets/img/ci-vacant.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='10' y='26' width='36' height='26' rx='2' fill='%23e9f1f9'/%3E%3Cpath d='M28 6 5 26h46Z' fill='%235b87b5'/%3E%3Crect x='22' y='34' width='12' height='18' rx='1.5' fill='%23a8c6e0'/%3E%3Cpath d='m18 34 20 16' stroke='%23d98324' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M38 34 18 50' stroke='%23f2a83b' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-offer::before { background-image: url("assets/img/ci-offer.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='13' y='5' width='38' height='54' rx='5' fill='%23e9f1f9'/%3E%3Crect x='20' y='13' width='24' height='4.5' rx='2.25' fill='%2394b3cd'/%3E%3Crect x='20' y='22' width='24' height='4.5' rx='2.25' fill='%2394b3cd'/%3E%3Crect x='20' y='31' width='15' height='4.5' rx='2.25' fill='%23bfd3e3'/%3E%3Ccircle cx='39' cy='45' r='11' fill='%23f2a83b'/%3E%3Cpath d='m34 45 3.5 3.5 7-7.5' stroke='%23ffffff' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-local::before { background-image: url("assets/img/ci-local.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4C21 4 13 12 13 22c0 13 19 36 19 36s19-23 19-36C51 12 43 4 32 4Z' fill='%235b87b5'/%3E%3Cpath d='M32 13 21 23h3v9h16v-9h3Z' fill='%23ffffff'/%3E%3Crect x='29' y='26' width='6' height='6' rx='1' fill='%23f2a83b'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-fast::before { background-image: url("assets/img/ci-fast.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='8' y='10' width='48' height='30' rx='8' fill='%235b87b5'/%3E%3Cpath d='M20 38v13l13-13Z' fill='%235b87b5'/%3E%3Cpath d='M35 14 25 28h7l-3 12 12-16h-8Z' fill='%23f2a83b'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-nofees::before { background-image: url("assets/img/ci-nofees.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M34 6h16a4 4 0 0 1 4 4v16L33 47a4 4 0 0 1-5.7 0L10 29.7a4 4 0 0 1 0-5.7Z' fill='%23f2a83b'/%3E%3Ccircle cx='46' cy='14' r='3.5' fill='%23ffffff'/%3E%3Cellipse cx='29' cy='28' rx='5.5' ry='7.5' stroke='%23ffffff' stroke-width='3.4' fill='none'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-timeline::before { background-image: url("assets/img/ci-timeline.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='10' y='12' width='44' height='42' rx='6' fill='%23e9f1f9'/%3E%3Cpath d='M10 18a6 6 0 0 1 6-6h32a6 6 0 0 1 6 6v8H10Z' fill='%235b87b5'/%3E%3Crect x='20' y='7' width='4' height='9' rx='2' fill='%233c4c5c'/%3E%3Crect x='40' y='7' width='4' height='9' rx='2' fill='%233c4c5c'/%3E%3Cpath d='m24 40 6 6 11-12' stroke='%23f2a83b' stroke-width='4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-paperwork::before { background-image: url("assets/img/ci-paperwork.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='18' y='6' width='30' height='40' rx='4' fill='%23bfd3e3'/%3E%3Crect x='12' y='14' width='30' height='42' rx='4' fill='%23e9f1f9'/%3E%3Crect x='18' y='22' width='18' height='4' rx='2' fill='%2394b3cd'/%3E%3Crect x='18' y='30' width='18' height='4' rx='2' fill='%2394b3cd'/%3E%3Ccircle cx='45' cy='46' r='10' fill='%23f2a83b'/%3E%3Cpath d='m40.5 46 3.2 3.2 6-6.6' stroke='%23ffffff' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
ul.sm3-cards li.sm3-ci-people::before { background-image: url("assets/img/ci-people.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='6' y='10' width='34' height='24' rx='7' fill='%235b87b5'/%3E%3Cpath d='M14 32v11l11-9Z' fill='%235b87b5'/%3E%3Ccircle cx='16' cy='22' r='2.4' fill='%23ffffff'/%3E%3Ccircle cx='23' cy='22' r='2.4' fill='%23ffffff'/%3E%3Ccircle cx='30' cy='22' r='2.4' fill='%23ffffff'/%3E%3Crect x='30' y='28' width='28' height='20' rx='6' fill='%23f2a83b'/%3E%3Cpath d='M50 46v10l-10-8Z' fill='%23f2a83b'/%3E%3C/svg%3E"); }
ul.sm3-cards li > strong:first-child { display: block; font-size: 1.05rem; letter-spacing: -.01em; color: var(--sm3-ink); }
ul.sm3-cards li > strong:first-child::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--sm3-accent);
  margin: .5rem 0 .55rem;
}

/* ---------- Benefits strip (full-bleed tinted section, v1.5.1) ----------
   Generator v2.3 wraps the benefits list in <section class="sm3-strip">
   with <ul class="sm3-cards sm3-benefits"> so it reads as its own
   full-width moment (like the hero/band) instead of a second boxed card
   grid. Older published pages keep the plain sm3-cards look. */
section.sm3-strip {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.25rem, calc(50vw - 370px));
  background: #f6f3ec;
  background-image: linear-gradient(180deg, #f9f6f0 0%, #eef2f3 100%);
  padding-block: calc(2.75rem + var(--sm3-slant)) calc(3rem + var(--sm3-slant));
  margin-block: 3.25rem;
  text-align: center;
  clip-path: polygon(0 var(--sm3-slant), 100% 0, 100% calc(100% - var(--sm3-slant)), 0 100%);
}
.sm3-strip h2 { margin-top: 0; }
/* Cards shed their boxes inside the strip: centered medallion + copy. */
ul.sm3-cards.sm3-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 1.6rem;
  margin: 2rem 0 0;
}
ul.sm3-cards.sm3-benefits li {
  flex: 0 1 210px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
  text-align: center;
  font-size: .95rem;
}
ul.sm3-cards.sm3-benefits li:hover { transform: none; box-shadow: none; }
ul.sm3-cards.sm3-benefits li::before {
  width: 88px;
  height: 88px;
  margin: 0 auto .9rem;
  box-shadow: 0 6px 16px rgba(16, 32, 46, .2), 0 0 0 4px #fff;
}
ul.sm3-cards.sm3-benefits li > strong:first-child::after { margin-inline: auto; }

/* ---------- Dark accent CTA band (diagonal edges + subtle texture) ---------- */
section.sm3-band {
  position: relative;
  background: #14532d;
  background: var(--sm3-ink); /* neutral dark for old browsers — the accent-mixed version is @supports-gated */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='.06'/%3E%3C/svg%3E");
  color: #fff;
  padding-block: calc(3rem + var(--sm3-slant)) calc(3.25rem + var(--sm3-slant));
  margin-block: 3rem;
  text-align: center;
  clip-path: polygon(0 var(--sm3-slant), 100% 0, 100% calc(100% - var(--sm3-slant)), 0 100%);
}
.sm3-band h2, .sm3-band p, .sm3-band li { color: var(--sm3-on-accent, #fff); }
.sm3-band a { color: var(--sm3-on-accent, #fff); text-decoration: underline; }
.sm3-band > p { font-size: 1.12rem; max-width: 640px; margin-inline: auto; }
/* A form card inside the band stays a white card with normal text colors. */
.sm3-band .sm3-form-card,
.sm3-band .sm3-form-card p,
.sm3-band .sm3-form-card h2 { color: var(--sm3-text); }
.sm3-band .sm3-form-card h2 { color: var(--sm3-ink); }
.sm3-band .sm3-form-card a { color: var(--sm3-accent); text-decoration: none; }
.sm3-band .sm3-form-card p.sm3-call-line { color: var(--sm3-muted); }
/* The address pill inside the band: white pill pops, supporting copy goes light. */
.sm3-band .sm3-address-cta h2 { color: var(--sm3-on-accent, #fff); }
.sm3-band .sm3-address-cta .sm3-call-line { color: var(--sm3-on-accent, #fff); opacity: .85; }
.sm3-band .sm3-address-cta .sm3-call-line a { color: var(--sm3-on-accent, #fff); }
.sm3-band .sm3-address-form { border-color: transparent; }
/* Accent-colored focus rings vanish on accent-derived surfaces — use the
   on-accent foreground there instead. */
.sm3-band a:focus-visible, .sm3-band button:focus-visible { outline-color: var(--sm3-on-accent, #fff); }

/* ---------- Area link list (hub / nearby cities) ---------- */
ul.sm3-area-links { list-style: none; columns: 2; column-gap: 2rem; padding: 0; margin: 1.25rem 0; }
ul.sm3-area-links li { margin: 0 0 .6rem; padding: 0 0 0 1.05rem; break-inside: avoid; line-height: 1.5; position: relative; }
ul.sm3-area-links li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: .45rem;
  height: .45rem;
  border-radius: 2px;
  background: #8fc3a4;
  transform: rotate(45deg);
}
ul.sm3-area-links a { text-decoration: none; }
ul.sm3-area-links a:hover { text-decoration: underline; opacity: 1; }
@media (min-width: 900px) { ul.sm3-area-links { columns: 3; } }

/* ---------- Tables (agent vs cash comparison) ---------- */
.sm3-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.6rem 0;
  border: 1px solid var(--sm3-line);
  border-radius: 14px;
  box-shadow: var(--sm3-shadow-card);
}
.sm3-table-wrap table { margin: 0; min-width: 520px; }
table { width: 100%; border-collapse: collapse; font-size: .96rem; margin: 1.6rem 0; }
/* Inner grid only — the rounded wrapper supplies the outer border. */
th, td { border: 0; border-top: 1px solid var(--sm3-line); border-left: 1px solid var(--sm3-line); padding: .78rem .9rem; text-align: left; vertical-align: top; }
th:first-child, td:first-child { border-left: 0; }
thead tr:first-child th, thead tr:first-child td,
table > tbody:first-child > tr:first-child th, table > tbody:first-child > tr:first-child td { border-top: 0; }
thead th, tr:first-child th {
  background: #e7f2ec;
  color: var(--sm3-ink);
  font-weight: 800;
  letter-spacing: -.01em;
}
tbody tr td:first-child, tbody tr th:first-child { font-weight: 700; color: var(--sm3-ink); }
tbody tr:nth-child(even) td { background: var(--sm3-soft); }
/* Last column = "us" — solid accent header makes the winner column pop. */
thead th:last-child, tr:first-child th:last-child { background: var(--sm3-accent); color: var(--sm3-on-accent, #fff); }
tbody td:last-child { background: #f4f9f6; }
tbody tr:nth-child(even) td:last-child { background: #ecf5f0; }

/* ---------- FAQ accordion (details/summary — zero JS) ----------
   Publishes after generator v2.1 emit
   <details class="sm3-faq"><summary><h3>Q</h3></summary><p>A</p></details>;
   pages published earlier keep plain h3+p pairs and simply use the heading
   styles above. The [open] rule is cosmetic only, so a cache plugin
   stripping attribute selectors (WP Rocket RUCSS) costs nothing functional. */
details.sm3-faq {
  background: #fff;
  border: 1px solid var(--sm3-line);
  border-radius: 14px;
  box-shadow: var(--sm3-shadow-card);
  margin: .85rem 0;
}
details.sm3-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  border-radius: 14px;
}
details.sm3-faq summary::-webkit-details-marker { display: none; }
details.sm3-faq summary:focus-visible { outline: 2px solid var(--sm3-accent); outline-offset: 2px; }
.sm3-content details.sm3-faq h3 { flex: 1 1 auto; margin: 0; font-size: 1.06rem; line-height: 1.4; }
details.sm3-faq summary:hover h3 { color: var(--sm3-accent); }
/* Plus badge; rotates to an × when open. */
details.sm3-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--sm3-soft);
  color: var(--sm3-accent);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.72rem;
  text-align: center;
  transition: transform .18s ease;
}
details.sm3-faq[open] summary::after { transform: rotate(45deg); }
/* Accent cues while open — [open] rules are cosmetic-only by design. */
details.sm3-faq[open] { box-shadow: var(--sm3-shadow-card), inset 3px 0 0 var(--sm3-accent); }
details.sm3-faq[open] summary h3 { color: var(--sm3-accent); }
/* The divider sits on the (only-visible-when-open) answer itself, so it
   needs no [open] selector and survives RUCSS. */
details.sm3-faq > p {
  margin: 0 1.2rem;
  padding: .95rem 0 1.15rem;
  border-top: 1px solid var(--sm3-line);
}
/* Smooth open/close on browsers that can animate height:auto (Chrome 131+).
   Everything here is parse-gated: older browsers open instantly, same as
   before. The nested reduced-motion override is needed because the global
   reduced-motion block can't name ::details-content (an unknown selector
   there would kill that whole rule list on old browsers).
   RUCSS-safety: the attribute-gated rule carries the CLOSED state (height:0)
   and the always-matching base rule stays height:auto — NEVER the reverse.
   :not([open]) matches the closed DOM a used-CSS crawler sees, so it
   normally survives; if a cruder stripper drops it anyway, the UA's own
   content-visibility handling still hides closed answers and only the
   animation is lost. Gating height:auto behind [open] instead would let
   RUCSS strip the reveal and leave answers permanently 0-height. */
@supports (interpolate-size: allow-keywords) {
  details.sm3-faq { interpolate-size: allow-keywords; }
  details.sm3-faq::details-content {
    overflow: clip;
    transition: height .28s ease, content-visibility .28s allow-discrete;
  }
  details.sm3-faq:not([open])::details-content { height: 0; }
  @media (prefers-reduced-motion: reduce) {
    details.sm3-faq::details-content { transition: none; }
  }
}

/* ---------- Buttons ---------- */
a.sm3-btn,
button,
input[type="submit"],
.wp-block-button__link {
  display: inline-block;
  background: var(--sm3-accent);
  color: var(--sm3-on-accent, #fff);
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.8rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 1px 2px rgba(16, 32, 46, .12), 0 6px 16px rgba(14, 122, 61, .2);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.sm3-btn:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
  filter: brightness(.95);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 32, 46, .12), 0 10px 22px rgba(14, 122, 61, .28);
  opacity: 1;
  color: #fff;
}
a.sm3-btn:active, button:active, input[type="submit"]:active { transform: translateY(0); }
/* WPForms loads its own CSS after ours, so its buttons need the hammer */
.wpforms-container .wpforms-submit,
.wpforms-container .wpforms-page-button {
  background: var(--sm3-accent) !important;
  color: var(--sm3-on-accent, #fff) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  padding: .85rem 1.8rem !important;
}
.wpforms-container .wpforms-submit:hover,
.wpforms-container .wpforms-page-button:hover { filter: brightness(.95); }

/* ---------- WPForms card (3-step lead form, standalone embeds) ---------- */
.wpforms-container {
  background: var(--sm3-soft);
  border: 1px solid var(--sm3-line);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  max-width: 640px;
  margin: 2rem auto;
}
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
  width: 100%;
  max-width: 100%;
  padding: .78rem .9rem;
  border: 1px solid #d5d2ca;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
}
.wpforms-container .wpforms-page-indicator-page-progress { background: var(--sm3-accent) !important; }

/* ---------- Blog listing ---------- */
.sm3-post-list { display: grid; gap: 1.25rem; margin: 1.5rem 0; }
.sm3-post-card {
  border: 1px solid var(--sm3-line);
  border-radius: 16px;
  padding: 1.5rem 1.6rem;
  box-shadow: var(--sm3-shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sm3-post-card:hover { transform: translateY(-2px); box-shadow: var(--sm3-shadow-pop); }
.sm3-post-card-title { margin: 0 0 .25rem; font-size: 1.3rem; line-height: 1.3; letter-spacing: -.015em; }
.sm3-post-card-title a { color: var(--sm3-ink); text-decoration: none; }
.sm3-post-card-title a:hover { color: var(--sm3-accent); opacity: 1; }
.sm3-post-card-date { margin: 0 0 .5rem; font-size: .85rem; color: var(--sm3-muted); }
.sm3-post-card-excerpt p { margin: .4rem 0 0; }

/* Pagination (the_posts_pagination markup) */
.navigation.pagination { margin: 2rem 0 0; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.page-numbers {
  display: inline-block;
  min-width: 2.4rem;
  text-align: center;
  padding: .45rem .6rem;
  border: 1px solid var(--sm3-line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--sm3-text);
  font-weight: 600;
}
.page-numbers.current { background: var(--sm3-accent); border-color: var(--sm3-accent); color: var(--sm3-on-accent, #fff); }

/* ---------- Single blog post ---------- */
.sm3-post-title {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--sm3-ink);
  text-align: left;
  margin: .5rem 0 .4rem;
}
.sm3-single h1 { text-align: left; }
.sm3-post-meta { color: var(--sm3-muted); font-size: .9rem; margin: 0 0 1.5rem; }

/* Bottom CTA box */
.sm3-cta-box {
  margin: 2.75rem 0 1rem;
  padding: 2.1rem 1.6rem;
  text-align: center;
  background: #eef6f1;
  border: 1px solid #dcebe2;
  border-radius: 18px;
}
.sm3-cta-box h2 { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.015em; color: var(--sm3-ink); }
.sm3-cta-box p { margin: .4rem 0 1rem; }
.sm3-cta-link { margin: .9rem 0 0; font-size: .95rem; }

/* Prev / next */
.sm3-post-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 0; font-weight: 600; font-size: .95rem; }
.sm3-post-nav-next { margin-left: auto; text-align: right; }

/* ---------- Footer (deep ink, light type) ---------- */
.sm3-footer {
  margin-top: 3.5rem;
  padding: 3rem 1.25rem 3rem;
  background: var(--sm3-ink);
  text-align: center;
  color: #aeb8c2;
  font-size: .95rem;
}
.sm3-footer-inner { max-width: 780px; margin: 0 auto; }
.sm3-footer p { margin: .3rem 0; }
.sm3-footer-brand { font-weight: 800; font-size: 1.15rem; letter-spacing: -.015em; color: #fff; }
/* Custom logo on the dark footer: a white chip keeps any logo readable. */
.sm3-footer-logo { display: flex; justify-content: center; margin: 0 0 1rem; }
.sm3-footer-logo .custom-logo-link {
  display: inline-flex;
  background: #fff;
  border-radius: 14px;
  padding: .55rem .95rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.sm3-footer-logo .custom-logo { max-height: 48px; width: auto; display: block; }
.sm3-footer a { color: #a7d4bb; font-weight: 600; text-decoration: none; }
.sm3-footer a:hover { text-decoration: underline; opacity: 1; color: #fff; }
.sm3-footer-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.4rem;
  list-style: none;
  margin: 1.2rem 0 .6rem;
  padding: 0;
}
.sm3-footer-menu a { color: #c4cdd6; font-weight: 500; }
.sm3-footer-menu a:hover { color: #fff; }
.sm3-footer-copy { margin-top: 1.1rem; font-size: .85rem; color: #7d8894; }
.sm3-footer a:focus-visible { outline-color: #fff; }

/* ---------- Google reviews + GMB map (v1.6.0) ----------
   Generators emit real GMB reviews as <section class="sm3-reviews"> with
   <figure class="sm3-review"> cards, a "★★★★★ 4.9/5 from 27 Google reviews"
   rating line (also standalone on contact/get-offer), and the Contact
   page's [sm3_gmb_map] keyless map iframe. Stars are review-gold on every
   surface — readable on white cards and the dark hero alike. */
.sm3-stars {
  color: #f5a524;
  letter-spacing: .12em;
  font-size: 1.02em;
  text-shadow: 0 1px 1px rgba(16, 32, 46, .12);
}
p.sm3-rating-line {
  text-align: center;
  font-size: .98rem;
  color: var(--sm3-muted);
  margin: .35rem 0 1.1rem;
}
p.sm3-rating-line strong { color: var(--sm3-ink); }
/* On the dark photo hero (get-offer page) the muted slate line vanishes —
   same white-type + counter-rule pattern as the hero call line. */
.sm3-hero p.sm3-rating-line { color: rgba(255, 255, 255, .92); }
.sm3-hero p.sm3-rating-line strong { color: #fff; }
.sm3-hero p.sm3-rating-line a { color: #fff; }

section.sm3-reviews { margin: 2.5rem 0; }
.sm3-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.sm3-review {
  margin: 0;
  background: #fff;
  border: 1px solid var(--sm3-line);
  border-radius: 16px;
  padding: 1.25rem 1.3rem;
  box-shadow: var(--sm3-shadow-card);
  display: flex;
  flex-direction: column;
}
.sm3-review .sm3-stars { display: block; margin-bottom: .55rem; }
/* Reset the content-blockquote chrome (accent rail + soft panel) — inside a
   review card the quote is plain testimonial text. */
.sm3-content .sm3-review blockquote {
  margin: 0 0 .8rem;
  padding: 0;
  border-left: 0;
  background: none;
  border-radius: 0;
  font-size: .95rem;
  line-height: 1.55;
}
.sm3-review figcaption {
  margin-top: auto;
  font-size: .82rem;
  font-weight: 600;
  color: var(--sm3-muted);
  text-align: left; /* the generic figcaption rule centers */
}

/* Featured single testimonial (near forms / CTAs) — a centered pull-quote,
   visually distinct from the boxed grid cards. */
.sm3-review-featured {
  max-width: 640px;
  margin: 2rem auto;
  align-items: center;
  text-align: center;
  border: 0;
  background: var(--sm3-soft);
  box-shadow: none;
  padding: 1.5rem 1.75rem;
}
.sm3-review-featured .sm3-stars { margin-bottom: .7rem; }
.sm3-content .sm3-review-featured blockquote {
  font-size: 1.08rem;
  line-height: 1.6;
  font-style: italic;
}
.sm3-review-featured figcaption { margin-top: .85rem; text-align: center; }

.sm3-map { margin: 1.75rem 0; }
.sm3-map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--sm3-line);
  border-radius: 16px;
  box-shadow: var(--sm3-shadow-card);
}

/* ---------- BBB accreditation badge + trust section (v1.6.5) ----------
   Generators emit <a|div class="sm3-bbb-badge"> (compact seal card, the
   whole badge links the profile) and <section class="sm3-reviews
   sm3-bbb-section"> (standalone trust block that fills a review slot for
   accredited clients with no pasted reviews). Text-only "BBB" seal — no
   trademark artwork. The navy is BBB's, deliberately not the site accent. */
.sm3-bbb-badge {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: fit-content;
  max-width: 100%;
  margin: 2rem auto;
  padding: .95rem 1.5rem .95rem 1rem;
  background: #fff;
  border: 1px solid var(--sm3-line);
  border-radius: 16px;
  box-shadow: var(--sm3-shadow-card);
}
a.sm3-bbb-badge { text-decoration: none; color: var(--sm3-ink); }
a.sm3-bbb-badge:hover { border-color: #00548b; opacity: 1; }
.sm3-bbb-seal {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #00548b;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .04em;
  flex: none;
}
.sm3-bbb-copy { display: flex; flex-direction: column; text-align: left; line-height: 1.4; }
.sm3-bbb-copy strong { font-size: 1.02rem; color: var(--sm3-ink); }
.sm3-bbb-copy span { font-size: .85rem; font-weight: 600; color: var(--sm3-muted); }
.sm3-bbb-section > p { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- 404 ---------- */
.sm3-404 { text-align: center; padding: 3rem 0; }
.sm3-404 h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; }

/* ---------- Minimal block styles ---------- */
.aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.alignleft { float: left; margin: 0 1.25rem .75rem 0; }
.alignright { float: right; margin: 0 0 .75rem 1.25rem; }
figure { margin: 1.5rem 0; max-width: 100%; }
figcaption, .wp-caption-text { font-size: .85rem; color: var(--sm3-muted); text-align: center; margin-top: .4rem; }
.wp-block-image img { border-radius: var(--sm3-radius); }
.wp-block-separator, hr { border: 0; border-top: 1px solid var(--sm3-line); margin: 2rem auto; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  :root { --sm3-slant: 5vw; }
  body { font-size: 1rem; }
  .sm3-main { padding: 1.5rem 1rem 3rem; }
  .sm3-content h2, .sm3-content.sm3-single h2 { font-size: 1.42rem; }
  table { font-size: .9rem; }
  a.sm3-btn, input[type="submit"] { padding: 1rem 1.5rem; }
  .sm3-call-btn, .sm3-offer-btn { padding: .55rem 1rem; font-size: .9rem; }
  .sm3-address-form { flex-direction: column; border-radius: 22px; padding: .55rem; gap: .55rem; }
  .sm3-address-form input[type="text"] { width: 100%; padding: .9rem 1rem .9rem 2.55rem; background-position: .95rem center; }
  .sm3-address-form button { width: 100%; }
  .sm3-cta-box .sm3-btn,
  .wpforms-container .wpforms-submit { display: block; width: 100%; }
  .wpforms-container { padding: 1.4rem 1.1rem; }
  /* Full-bleed sections: match the narrower 1rem column padding. */
  section.sm3-hero, section.sm3-band { padding-inline: 1rem; }
  section.sm3-hero { padding-block: 2.5rem calc(2.85rem + var(--sm3-slant)); }
  .sm3-content > .sm3-hero:first-child { margin-block-start: -1.5rem; }
  ul.sm3-checks { gap: .55rem 1.2rem; }
  ul.sm3-checks li { font-size: .92rem; }
  .sm3-form-card { padding: 1.4rem 1.1rem; }
  section.sm3-band { padding-block: calc(2.5rem + var(--sm3-slant)) calc(2.75rem + var(--sm3-slant)); }
  /* Step cards stack — auto-fit would squeeze two 175px columns onto a
     phone. The :has() repeat matches the desktop 2×2 rule's specificity
     ((0,3,2) > (0,1,1)) — without it the 4-step timeline would stay 2×2
     on phones on every :has()-capable browser. Kept as a SEPARATE rule,
     not comma-joined: one unsupported selector invalidates a whole rule
     list (and :has() is excluded from forgiving parsing), which would
     kill phone stacking on pre-:has() browsers. */
  ol.sm3-steps { grid-template-columns: 1fr; gap: .9rem; }
  ol.sm3-steps:has(> li:first-child:nth-last-child(4)) { grid-template-columns: 1fr; }
  ol.sm3-steps li { font-size: 1rem; }
  .sm3-review-grid { grid-template-columns: 1fr; }
  .sm3-map iframe { aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) {
  ul.sm3-area-links { columns: 1; }
  /* Header gets crowded — drop the offer button and let the phone go solid again. */
  .sm3-header .sm3-offer-btn { display: none; }
  .sm3-header a.sm3-btn.sm3-btn-ghost {
    background: var(--sm3-accent);
    color: var(--sm3-on-accent, #fff);
    box-shadow: 0 1px 2px rgba(16, 32, 46, .12);
  }
}

/* ---------- Modern color pipeline (color-mix) ----------
   Gated behind @supports on purpose: a declaration whose VALUE holds var()
   is only grammar-checked after substitution ("invalid at computed-value
   time"), so on pre-color-mix browsers it would WIN the cascade over the
   solid fallback above and then compute to nothing — transparent buttons,
   vanished band. @supports is evaluated at parse time, so old browsers skip
   this whole block and keep the solid colors. */
@supports (background: color-mix(in srgb, red 50%, #fff)) {
  a.sm3-btn.sm3-btn-ghost:hover { background: color-mix(in srgb, var(--sm3-accent) 8%, #fff); }
  .sm3-content h2::after { background: linear-gradient(90deg, var(--sm3-accent), color-mix(in srgb, var(--sm3-accent) 45%, #fff)); }
  .sm3-address-form { box-shadow: var(--sm3-shadow-pop), 0 0 0 6px color-mix(in srgb, var(--sm3-accent) 10%, transparent); }
  .sm3-address-form:focus-within { box-shadow: var(--sm3-shadow-pop), 0 0 0 3px color-mix(in srgb, var(--sm3-accent) 30%, transparent); }
  .sm3-address-form button { box-shadow: 0 4px 14px color-mix(in srgb, var(--sm3-accent) 35%, transparent); }
  ol.sm3-steps li::before { background: linear-gradient(180deg, color-mix(in srgb, var(--sm3-accent) 86%, #fff), var(--sm3-accent)); }
  ul.sm3-cards li > strong:first-child::after { background: linear-gradient(90deg, var(--sm3-accent), color-mix(in srgb, var(--sm3-accent) 45%, #fff)); }
  section.sm3-band {
    background: color-mix(in srgb, var(--sm3-accent) 74%, #0a1219);
    background-image:
      radial-gradient(720px 340px at 18% 0%, color-mix(in srgb, var(--sm3-accent) 40%, transparent), transparent 70%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='.06'/%3E%3C/svg%3E");
  }
  ul.sm3-area-links li::before { background: color-mix(in srgb, var(--sm3-accent) 55%, #fff); }
  thead th, tr:first-child th { background: color-mix(in srgb, var(--sm3-accent) 12%, #fff); }
  thead th:last-child, tr:first-child th:last-child { background: linear-gradient(180deg, color-mix(in srgb, var(--sm3-accent) 86%, #fff), var(--sm3-accent)); }
  tbody td:last-child { background: color-mix(in srgb, var(--sm3-accent) 5%, #fff); }
  tbody tr:nth-child(even) td:last-child { background: color-mix(in srgb, var(--sm3-accent) 9%, #fff); }
  a.sm3-btn,
  button,
  input[type="submit"],
  .wp-block-button__link {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sm3-accent) 86%, #fff), var(--sm3-accent));
    box-shadow: 0 1px 2px rgba(16, 32, 46, .12), 0 6px 16px color-mix(in srgb, var(--sm3-accent) 22%, transparent);
  }
  a.sm3-btn:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
    box-shadow: 0 2px 4px rgba(16, 32, 46, .12), 0 10px 22px color-mix(in srgb, var(--sm3-accent) 30%, transparent);
  }
  a.sm3-btn.sm3-btn-ghost { background: #fff; }
  .wpforms-container .wpforms-submit,
  .wpforms-container .wpforms-page-button {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sm3-accent) 86%, #fff), var(--sm3-accent)) !important;
  }
  .sm3-cta-box {
    background: color-mix(in srgb, var(--sm3-accent) 7%, #fff);
    border-color: color-mix(in srgb, var(--sm3-accent) 18%, #fff);
  }
  .sm3-footer { background-image: radial-gradient(680px 300px at 82% 0%, color-mix(in srgb, var(--sm3-accent) 24%, transparent), transparent 70%); }
  .sm3-footer a { color: color-mix(in srgb, var(--sm3-accent) 45%, #fff); }
  .sm3-footer a:hover { color: #fff; }
  @media (max-width: 520px) {
    .sm3-header a.sm3-btn.sm3-btn-ghost { background: linear-gradient(180deg, color-mix(in srgb, var(--sm3-accent) 86%, #fff), var(--sm3-accent)); }
  }
}