/* ScreenMan light theme — match /start/ (black on white)
   Load LAST after shell / vision / luxe / wow / faq / calc / convert. */

:root {
  /* Design system — OKLCH (WCAG AA) */
  --ab-bg: oklch(98% 0.005 80);
  --ab-paper: oklch(100% 0 0);
  --ab-ink: oklch(20% 0.01 60);
  --ab-mute: oklch(45% 0.01 60);
  --ab-line: oklch(90% 0.005 60);
  --ab-orange: oklch(62% 0.18 45);
  --ab-orange-ink: oklch(99% 0.01 80);
  --ab-soft: oklch(96% 0.006 80);
  --ab-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ab-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.06);
  --ab-radius-card: 12px;
  --ab-radius-btn: 8px;
  --ab-radius-pill: 999px;
  --ab-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ab-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --ab-space-section: 80px;
  --ab-space-section-m: 48px;
  --ab-wrap: 1200px;
  --ab-prose: 65ch;

  /* Shell tokens → light */
  --sm-ink: var(--ab-bg);
  --sm-ink-lift: var(--ab-paper);
  --sm-ink-card: var(--ab-soft);
  --sm-amber: var(--ab-orange);
  --sm-amber-dim: oklch(55% 0.17 45);
  --sm-silver: var(--ab-ink);
  --sm-mute: var(--ab-mute);
  --sm-glass: rgba(0, 0, 0, 0.04);
  --sm-line: var(--ab-line);
  --sm-text: var(--ab-ink);

  /* Vision / luxe bridge */
  --charcoal: var(--ab-bg);
  --ink-base: var(--ab-bg);
  --ink-lift: var(--ab-paper);
  --ink-card: var(--ab-soft);
  --amber: var(--ab-orange);
  --amber-dim: oklch(55% 0.17 45);
  --silver: var(--ab-ink);
  --mute: var(--ab-mute);
  --glass: rgba(0, 0, 0, 0.04);
  --line: var(--ab-line);
  --text: var(--ab-ink);
  --luxe-hair: var(--ab-line);
  --luxe-glow: color-mix(in oklch, var(--ab-orange) 28%, transparent);
  --display: var(--ab-display);

  /* App / convert remaps */
  --bg: var(--ab-bg);
  --group: var(--ab-paper);
  --row: var(--ab-soft);
  --ink: var(--ab-ink);
  --muted: var(--ab-mute);
  --hair: color-mix(in oklch, var(--ab-orange) 35%, transparent);
  --orange: var(--ab-orange);
  --orange-ink: var(--ab-orange-ink);
}

html, body {
  background: var(--ab-bg) !important;
  color: var(--ab-ink) !important;
}

body {
  background: var(--ab-bg) !important;
  color: var(--ab-ink) !important;
  font-family: var(--ab-font) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Kill dark grain / vignette on light */
body::before {
  opacity: 0.018 !important;
  mix-blend-mode: multiply !important;
}
body::after {
  opacity: 0 !important;
  background: none !important;
}

.eyebrow { color: var(--ab-orange) !important; }
h1, h2, h3, .hero h1, .page-hero h1 {
  color: var(--ab-ink) !important;
}
.quiet, .lead { color: var(--ab-mute) !important; }

/* —— Hero: black on white (match /start/), no dark cinema —— */
.hero {
  background: var(--ab-bg) !important;
  min-height: 0 !important;
  align-items: start !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 12px 0 28px !important;
}
.hero::before {
  border-color: var(--ab-line) !important;
  box-shadow: none !important;
  opacity: 0 !important;
}
.hero::after {
  display: none !important;
  background: none !important;
}
.hero > img {
  position: relative !important;
  inset: auto !important;
  order: 2;
  width: min(1120px, calc(100% - 32px)) !important;
  max-width: calc(100% - 32px) !important;
  height: auto !important;
  max-height: min(42vh, 360px) !important;
  margin: 12px auto 0 !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  filter: none !important;
  transform: none !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1) !important;
}
.hero-mesh,
.hero-rail {
  display: none !important;
}
.hero-copy {
  order: 1;
  position: relative !important;
  z-index: 2 !important;
  width: min(920px, calc(100% - 32px)) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 1.25rem 0 0.5rem !important;
  overflow: visible !important;
}
.hero .eyebrow {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  letter-spacing: 0.06em !important;
  line-height: 1.35 !important;
}
.hero h1 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--ab-ink) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  font-size: clamp(1.85rem, 6vw, 3.25rem) !important;
  line-height: 1.08 !important;
  margin: 0.2em 0 0.35em !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.hero .eyebrow {
  color: var(--ab-orange) !important;
}
.hero p,
.hero-copy > p:not(.tagline-hero):not(.eyebrow) {
  color: var(--ab-mute) !important;
  text-shadow: none !important;
  max-width: 48rem !important;
}
.tagline-hero {
  color: var(--ab-ink) !important;
  text-shadow: none !important;
  max-width: min(36ch, 100%) !important;
}
.tagline-hero::after {
  background: var(--ab-orange) !important;
}
.hero .trust-bar {
  background: #fff !important;
  border: 1px solid var(--ab-line) !important;
  color: var(--ab-ink) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
}
.hero .trust-bar a,
.hero .trust-bar__stars { color: var(--ab-orange) !important; }

/* Kill stuck kinetic / reveal that stacked text on itself */
.hero .sm-kinetic,
.hero [data-kinetic],
.hero.is-ready .hero-copy .eyebrow,
.hero.is-ready .hero-copy h1,
.hero.is-ready .hero-copy .tagline-hero,
.hero.is-ready .hero-copy > p,
.hero.is-ready .trust-bar,
.hero.is-ready .actions {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  will-change: auto !important;
}

/* Header — white like /start/ */
.site-head {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--ab-line) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.logo, .logo-name strong { color: var(--ab-ink) !important; }
.logo-name em { color: var(--ab-mute) !important; }
.logo-mark {
  border-color: var(--ab-orange) !important;
  box-shadow: none !important;
}
.head-phone { color: var(--ab-ink) !important; }
.nav a { color: var(--ab-mute) !important; }
.nav a:hover, .nav a:focus-visible { color: var(--ab-orange) !important; }
.nav a.call {
  background: var(--ab-orange) !important;
  color: #fff !important;
}
.head-estimate {
  background: var(--ab-ink) !important;
  color: #fff !important;
  border: 1px solid var(--ab-ink) !important;
  box-shadow: none !important;
}
.head-estimate:hover {
  background: var(--ab-orange) !important;
  border-color: var(--ab-orange) !important;
  color: #fff !important;
}

.hero-copy .eyebrow::before {
  background: var(--ab-orange) !important;
}

/* Buttons */
.btn-primary {
  background: var(--ab-orange) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(255, 106, 0, 0.25) !important;
}
.btn-quiet, .btn-ghost {
  background: #fff !important;
  color: var(--ab-ink) !important;
  border: 1px solid var(--ab-line) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Cards / blocks */
.block { border-top-color: var(--ab-line) !important; }
.need, .choice, .result-card, .receipt, .quiz, .ios-group details,
.proof-card, .estimate-box, .cta-box, .article-card, .cell,
.catalog article, .mesh-card, #screens .catalog > article {
  background: #fff !important;
  border: 1px solid var(--ab-line) !important;
  color: var(--ab-ink) !important;
}
.need b, .receipt h3, .choice strong { color: var(--ab-ink) !important; }
.need:hover, .choice:hover, .article-card:hover {
  border-color: rgba(255, 106, 0, 0.45) !important;
  outline-color: rgba(255, 106, 0, 0.25) !important;
}

.trust-bar {
  background: #fff !important;
  border: 1px solid var(--ab-line) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
}
.trust-bar a,
.trust-bar__stars { color: var(--ab-orange) !important; }

/* Convert / proof hard dark */
.trust-bar,
.convert-trust,
.proof {
  background: transparent !important;
  color: var(--ab-ink) !important;
}
.proof {
  background: #fff !important;
  border: 1px solid var(--ab-line);
  border-radius: 1.1rem;
}
.proof .eyebrow { color: var(--ab-orange) !important; }
.proof h2 { color: var(--ab-ink) !important; }
.proof-card,
.proof .card {
  background: var(--ab-soft) !important;
  color: var(--ab-ink) !important;
}

/* Forms */
.form input, .form textarea,
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"] {
  background: #fff !important;
  border: 1px solid var(--ab-line) !important;
  color: var(--ab-ink) !important;
}
.form label { color: var(--ab-mute) !important; }
.estimate-box {
  background: #fff8f2 !important;
  border-color: #f0c9a8 !important;
}
.estimate-box__range { color: var(--ab-ink) !important; }
.estimate-box__label { color: var(--ab-orange) !important; }

.hotspot {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--ab-line) !important;
  color: var(--ab-ink) !important;
}
.hotspot.is-filled, .hotspot.is-on,
.size.is-on {
  background: var(--ab-orange) !important;
  color: #fff !important;
}

.service-area {
  background: #fff !important;
  border-color: var(--ab-line) !important;
}
.service-area .cities li,
.city-grid li a {
  background: var(--ab-soft) !important;
  border-color: var(--ab-line) !important;
  color: var(--ab-ink) !important;
}

/* FAQ */
.ios-group details,
.article-faq details {
  background: #fff !important;
  border-color: var(--ab-line) !important;
  color: var(--ab-ink) !important;
}
.ios-group summary { color: var(--ab-ink) !important; }
#faq.faq .faq-acc {
  background: #fff !important;
  border-color: var(--ab-orange) !important;
}
#faq.faq .faq-acc__item {
  box-shadow: 0 -0.5px 0 var(--ab-line) !important;
}
#faq.faq .faq-acc__btn {
  color: var(--ab-ink) !important;
}
#faq.faq .faq-acc__btn:hover { color: var(--ab-orange) !important; }
#faq.faq .faq-acc__icon {
  border-color: var(--ab-line) !important;
  color: var(--ab-ink) !important;
}
#faq.faq .faq-acc__panel,
#faq.faq .faq-acc__body {
  color: var(--ab-mute) !important;
  background: #fff !important;
}

/* Marquee */
.sm-marquee {
  background: #fff !important;
  border-block-color: var(--ab-line) !important;
}
.sm-marquee__track span {
  color: var(--ab-mute) !important;
}

/* Footer / dock */
.foot, .foot--seo {
  background: #fff !important;
  border-top: 1px solid var(--ab-line) !important;
  color: var(--ab-mute) !important;
}
.foot-brand { color: var(--ab-ink) !important; }
.foot-nav a { color: var(--ab-mute) !important; }
.foot-nav a:hover { color: var(--ab-orange) !important; }
.cta-end .phone { color: var(--ab-orange) !important; }

.dock {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--ab-line) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1) !important;
}
.dock a { color: var(--ab-ink) !important; }
.dock a.hot {
  background: var(--ab-orange) !important;
  color: #fff !important;
}

/* SEO inner pages */
.sm-page .page-hero {
  background: #fff !important;
  color: var(--ab-ink) !important;
  border-bottom: 1px solid var(--ab-line);
}
.sm-page .page-hero .eyebrow { color: var(--ab-orange) !important; }
.sm-page .page-hero h1 { color: var(--ab-ink) !important; }
.sm-page .page-hero p { color: var(--ab-mute) !important; }
.sm-page .prose p,
.sm-page .prose li { color: #333 !important; }
.sm-page .prose h2 { color: var(--ab-ink) !important; }

/* Calc — same as /start/ light cart */
.sm-calc {
  --smc-ink: #1a1a1a;
  --smc-muted: #5c5c5c;
  --smc-orange: #ff6a00;
  --smc-line: #e4e4e7;
  --smc-panel: #ffffff;
  --smc-soft: #f0f0f2;
  color: var(--smc-ink) !important;
}
.sm-calc__viz {
  background: linear-gradient(165deg, #ffffff 0%, #f4f4f5 70%) !important;
  border-color: var(--ab-orange) !important;
}
.sm-calc__shop,
.sm-calc__cart,
.builder-shell .receipt,
.photo-calc {
  background: #fff !important;
  border: 1px solid var(--ab-line) !important;
}
.sm-calc__total strong { color: var(--ab-ink) !important; }
.sm-calc .form--short input {
  background: #fff !important;
  color: var(--ab-ink) !important;
  border-color: var(--ab-line) !important;
}
.sm-calc .form--short .btn-primary,
.sm-calc .form--short button[type="submit"] {
  color: #fff !important;
}
.sm-calc .form-msg.is-ok { color: #15803d !important; }

/* 3D / wow dark sections → paper */
.sm-3d,
#config3d.sm-3d {
  background: #fff !important;
  color: var(--ab-ink) !important;
  border-top: 1px solid var(--ab-line);
}
.sm-3d__hint,
.sm-3d__meta { color: var(--ab-mute) !important; }
.sm-3d__swatch {
  background: #fff !important;
  border-color: var(--ab-line) !important;
  color: var(--ab-ink) !important;
}
.sm-3d__swatch.is-on,
.sm-3d__swatch:hover {
  border-color: var(--ab-orange) !important;
  color: var(--ab-orange) !important;
}

/* Wow layer cards / popovers */
.ba-slider {
  box-shadow: 0 0 0 1px var(--ab-line), 0 18px 40px rgba(0, 0, 0, 0.12) !important;
}
.sm-live-pop,
.sm-cover__tip,
.sm-slot,
.sm-kinetic-line {
  color: var(--ab-ink) !important;
}
.sm-live-pop,
.sm-slot {
  background: #fff !important;
  border: 1px solid var(--ab-line) !important;
}
.sm-live-pop strong,
.sm-slot strong,
.sm-cover__tip strong { color: var(--ab-ink) !important; }
.sm-kinetic-line,
.sm-kinetic-line b {
  color: var(--ab-ink) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
.sm-kinetic-line b.accent { color: var(--ab-orange) !important; }
/* Story / cover cards: always readable on light (no wait-for-scroll fade) */
.sm-cover,
.sm-story .sm-cell,
.sm-cell {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
.sm-cell h3,
.sm-cover h3,
.sm-cell p,
.sm-cover p {
  color: var(--ab-ink) !important;
  opacity: 1 !important;
}

/* Contact page */
.contact-page {
  --c-ink: #1a1a1a;
  --c-mute: #5c5c5c;
  --c-line: #e4e4e7;
  --c-orange: #ff6a00;
  --c-panel: #ffffff;
}
.contact-split__form {
  background:
    radial-gradient(520px 280px at 10% 0%, rgba(255, 106, 0, 0.06), transparent 60%),
    #fff !important;
}
.contact-split__form h1,
.contact-split__eyebrow { color: var(--ab-ink) !important; }
.contact-split__eyebrow { color: var(--ab-orange) !important; }
.contact-split__lead { color: var(--ab-mute) !important; }

/* Assist / sticky call stay orange */
.sticky-call a {
  background: var(--ab-orange) !important;
  color: #fff !important;
}

/* Mobile head pills — light like /start/ */
.head-mob__btn {
  color: var(--ab-ink) !important;
  border: 1px solid var(--ab-line) !important;
  background: #fff !important;
}
.head-mob__btn--call {
  background: var(--ab-orange) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(255, 106, 0, 0.35) !important;
  animation: none !important;
}

/* Wow hard-dark overrides (mobile sticky head / chips / covers) */
@media (max-width: 980px) {
  .site-head {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid var(--ab-line) !important;
  }
  .site-head .bar {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    gap: 8px !important;
  }
  .head-mob {
    max-width: none !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }
  .head-mob__btn--quiz,
  .head-mob__btn--calc {
    background: #fff !important;
    color: var(--ab-ink) !important;
    border: 1px solid var(--ab-line) !important;
    opacity: 1 !important;
  }
  .hero-copy {
    width: calc(100% - 32px) !important;
    padding: 0.75rem 0 0.25rem !important;
  }
  .hero > img {
    max-height: 220px !important;
  }
}

/* Marquee + story covers on light paper */
.sm-marquee {
  background: #fff !important;
  border-block: 1px solid var(--ab-line) !important;
}
.sm-marquee__track span {
  color: var(--ab-mute) !important;
}
.sm-cover,
.sm-story,
.sm-cell,
.sm-cell--hero {
  background: #fff !important;
  color: var(--ab-ink) !important;
  border-color: var(--ab-line) !important;
}
.sm-cover__tip,
.sm-live-chip {
  background: #fff !important;
  color: var(--ab-ink) !important;
  border: 1px solid var(--ab-line) !important;
}
.sm-live-chip {
  color: var(--ab-ink) !important;
}
.sm-license,
.sm-license a {
  color: var(--ab-mute) !important;
}
.sm-license a { color: var(--ab-orange) !important; }

/* Inner pages: match /start/ paper + no text clipping */
html, body {
  overflow-x: clip;
}
.sm-page .page-hero {
  background: #fff !important;
  color: var(--ab-ink) !important;
  border-bottom: 1px solid var(--ab-line) !important;
  padding: 36px 0 24px !important;
}
.sm-page .page-hero .wrap,
.sm-page .prose {
  width: min(800px, calc(100% - 32px)) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
}
.sm-page .page-hero h1,
.sm-page .page-hero p,
.sm-page .prose p,
.sm-page .prose li,
.sm-page .prose h2 {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.sm-page .page-hero h1 {
  font-size: clamp(1.55rem, 5.5vw, 2.4rem) !important;
  line-height: 1.2 !important;
}
.sm-page .page-hero p {
  color: var(--ab-mute) !important;
}

/* Catalog / need grid: readable width on mobile */
.catalog,
.need-grid,
.q-grid {
  min-width: 0 !important;
}
.catalog > article,
.need,
.mesh-card {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

/* Quiz / section titles: wrap on narrow screens (wide display font) */
.quiz h2,
.quiz h3,
#quiz h2,
#quiz h3,
.block h2,
.block h3 {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  letter-spacing: -0.03em !important;
}

/* Assist widget: don’t eat content */
.sm-assist {
  z-index: 70 !important;
}
@media (max-width: 560px) {
  .sm-assist:not(.is-open) {
    transform: scale(0.92);
    transform-origin: bottom left;
  }
}

/* ========== Home section polish (light, compact, even) ========== */

/* —— Proof / before-after —— */
#proof.proof {
  padding-block: 2.25rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#proof .sm-sec-head {
  margin: 0 0 0.85rem !important;
  max-width: none !important;
  text-align: left !important;
}
#proof .sm-index { font-size: 0.72rem !important; }
#proof h2 {
  font-size: clamp(1.35rem, 3.8vw, 1.85rem) !important;
  line-height: 1.15 !important;
  margin: 0.25rem 0 0.4rem !important;
  letter-spacing: -0.03em !important;
  max-width: none !important;
}
#proof .lead {
  margin: 0 !important;
  max-width: var(--ab-prose) !important;
  font-size: 0.95rem !important;
}
#proof .ba-hero {
  margin: 0 0 0.85rem !important;
  max-width: none !important;
  width: 100% !important;
}
#proof .ba-slider {
  aspect-ratio: 16 / 9 !important;
  border-radius: 12px !important;
  background: #f0f0f2 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  width: 100% !important;
}
#proof .proof-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}
#proof .proof-card {
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
#proof .proof-card .ba-slider {
  aspect-ratio: 16 / 10 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#proof .proof-meta {
  margin: 0 !important;
  padding: 10px 12px !important;
  font-size: 0.82rem !important;
  color: var(--ab-mute) !important;
  text-align: left !important;
}
#proof .proof-meta strong { color: var(--ab-ink) !important; }
@media (max-width: 900px) {
  #proof .proof-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  #proof .proof-grid { grid-template-columns: 1fr !important; }
}

/* —— 3D weaves: light stage, clear controls —— */
.sm-3d {
  padding-block: 2.25rem !important;
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255, 106, 0, 0.07), transparent 55%),
    var(--ab-bg) !important;
}
.sm-3d .sm-sec-head { margin-bottom: 1rem !important; }
.sm-3d h2 {
  font-size: clamp(1.35rem, 3.8vw, 1.85rem) !important;
  letter-spacing: -0.03em !important;
}
.sm-3d .lead { font-size: 0.95rem !important; max-width: 40rem !important; }
.sm-3d__grid { gap: 18px !important; }
.sm-3d__stage {
  background: linear-gradient(165deg, #ffffff 0%, #f4f4f5 100%) !important;
  border: 1px solid var(--ab-line) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06) !important;
  min-height: 240px !important;
}
.sm-3d__hint {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--ab-mute) !important;
  border: 1px solid var(--ab-line) !important;
  font-weight: 600 !important;
}
.sm-3d__swatch {
  background: #fff !important;
  color: var(--ab-ink) !important;
  border: 1px solid var(--ab-line) !important;
  font-weight: 650 !important;
}
.sm-3d__swatch.is-on,
.sm-3d__swatch:hover {
  background: rgba(255, 106, 0, 0.1) !important;
  border-color: var(--ab-orange) !important;
  color: var(--ab-ink) !important;
}
.sm-3d__meta { color: var(--ab-mute) !important; }

/* Sprite currentColor is resolved from the sprite tree in Chromium — keep it orange. */
.ico-sprite {
  color: #ff6a00 !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* —— Match mesh cards + Six weaves: even orange icons —— */
.need-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.need {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 16px 12px !important;
  background: #fff !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: 14px !important;
  min-height: 100% !important;
  text-decoration: none !important;
  color: var(--ab-ink) !important;
}
.need:hover {
  border-color: rgba(255, 106, 0, 0.45) !important;
  background: #fffaf5 !important;
  transform: none !important;
}
.need b {
  color: var(--ab-ink) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.need > span:not(.so-ico) {
  color: var(--ab-mute) !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  padding: 0 !important;
}
.need .so-ico,
.catalog .screen-row .so-ico,
.catalog .screen-row .so-ico-lg,
.so-ico,
.so-ico-lg {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  aspect-ratio: 1 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid #fdba74 !important;
  background: #fff7ed !important;
  color: #ff6a00 !important;
  box-shadow: none !important;
}
.need .so-ico svg,
.catalog .screen-row .so-ico svg,
.catalog .screen-row .so-ico-lg svg,
.so-ico svg,
.so-ico-lg svg {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
  color: inherit !important;
}
.need .so-ico use,
.catalog .screen-row .so-ico use,
.catalog .screen-row .so-ico-lg use,
.so-ico use,
.so-ico-lg use {
  color: inherit !important;
}
.need:hover .so-ico {
  background: #ffedd5 !important;
  border-color: var(--ab-orange) !important;
  color: #e85d00 !important;
}
@media (max-width: 720px) {
  .need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
  .need-grid { grid-template-columns: 1fr !important; }
}

/* Six weaves catalog cards */
#screens .catalog .screen-row,
.catalog .screen-row {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 16px !important;
  background: #fff !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  height: auto !important;
}
#screens .catalog .screen-row .so-ico,
#screens .catalog .screen-row .so-ico-lg,
.catalog .screen-row .so-ico,
.catalog .screen-row .so-ico-lg {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  margin: 2px 0 0 !important;
}
#screens .catalog .screen-copy,
.catalog .screen-row .screen-copy {
  min-width: 0 !important;
}
#screens .catalog .screen-row h3,
.catalog .screen-row h3 {
  color: var(--ab-ink) !important;
  margin: 0.2rem 0 0.35rem !important;
  font-size: 1.05rem !important;
}
#screens .catalog .screen-row p,
#screens .catalog .screen-row li,
.catalog .screen-row p,
.catalog .screen-row li {
  color: var(--ab-mute) !important;
}
.mesh-legend a { color: var(--ab-mute) !important; }
.mesh-legend a:hover,
.mesh-legend a:first-child {
  color: var(--ab-orange) !important;
  border-bottom-color: var(--ab-orange) !important;
}

/* —— Home calculator: light like /start/ —— */
#builder .sm-calc,
.sm-calc.sm-calc--luxe {
  --smc-ink: #1a1a1a;
  --smc-muted: #5c5c5c;
  --smc-orange: #ff6a00;
  --smc-line: #e4e4e7;
  --smc-panel: #ffffff;
  --smc-soft: #f0f0f2;
  color: var(--smc-ink) !important;
  gap: 16px !important;
}
#builder .sm-calc__viz,
.sm-calc--luxe .sm-calc__viz {
  background: linear-gradient(165deg, #ffffff 0%, #f4f4f5 75%) !important;
  border: 1px solid var(--ab-orange) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
  top: auto !important;
  min-height: 0 !important;
}
.sm-calc__viz-hint {
  margin: -6px 0 12px !important;
  font-size: 0.8rem !important;
  color: var(--ab-mute) !important;
}
#builder .sm-calc__viz-label,
.sm-calc--luxe .sm-calc__viz-label {
  color: var(--ab-orange) !important;
  font-weight: 800 !important;
}
#builder .sm-calc__cage,
#builder .sm-calc__gridline {
  stroke: #d4d4d8 !important;
}
#builder .sm-calc__face--roof {
  fill: rgba(255, 106, 0, 0.14) !important;
  stroke: var(--ab-orange) !important;
}
#builder .sm-calc__face--wall {
  fill: rgba(26, 26, 26, 0.04) !important;
  stroke: #a1a1aa !important;
}
#builder .sm-calc__face.is-on {
  fill: rgba(255, 106, 0, 0.32) !important;
  stroke: #ff8a33 !important;
}
#builder .sm-calc__face-caption {
  fill: #1a1a1a !important;
}
#builder .sm-calc__shop,
#builder .sm-calc__cart,
.sm-calc--luxe .sm-calc__shop,
.sm-calc--luxe .sm-calc__cart {
  background: #fff !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: 16px !important;
  color: var(--ab-ink) !important;
  overflow: visible !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#builder .sm-calc__tab {
  border-radius: 10px !important;
  color: var(--ab-ink) !important;
  background: var(--ab-soft) !important;
  border-color: var(--ab-line) !important;
}
#builder .sm-calc__tab.is-on {
  background: rgba(255, 106, 0, 0.12) !important;
  border-color: var(--ab-orange) !important;
  color: var(--ab-ink) !important;
}
#builder .sm-calc__catalog,
#builder .sm-calc__shop {
  padding: 16px 14px 18px !important;
}
#builder .sm-sku {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 44px !important;
  gap: 8px 10px !important;
  align-items: center !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--ab-ink) !important;
  padding: 12px !important;
  margin: 0 0 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}
#builder .sm-sku__title {
  grid-column: 1 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
#builder .sm-sku__price {
  grid-column: 2 !important;
  justify-self: end !important;
}
#builder .sm-sku__add {
  grid-column: 3 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  flex: 0 0 44px !important;
  background: var(--ab-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  display: inline-grid !important;
  place-items: center !important;
}
#builder .sm-calc__total strong,
#builder .sm-sku__price,
#builder .sm-sku__title {
  color: var(--ab-ink) !important;
}
#builder .sm-sku__sub,
#builder .sm-calc__hint {
  color: var(--ab-mute) !important;
}
#builder .form--short input,
#builder .sm-calc input {
  background: #fff !important;
  color: var(--ab-ink) !important;
  border: 1px solid var(--ab-line) !important;
}
@media (max-width: 560px) {
  #builder .sm-sku {
    grid-template-columns: minmax(0, 1fr) 44px !important;
  }
  #builder .sm-sku__price {
    grid-column: 1 !important;
    justify-self: start !important;
  }
  #builder .sm-sku__add {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }
}

/* —— ZIP / coverage: full-width like other sections —— */
#area.service-area {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding-block: var(--ab-space-section) !important;
  padding-inline: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-shadow: none !important;
}
#area h2 {
  font-size: clamp(1.35rem, 3.8vw, 1.85rem) !important;
  letter-spacing: -0.03em !important;
}
.sm-cover--light {
  gap: 20px !important;
  margin-top: 1rem !important;
}
.sm-cover--light .sm-cover__svg {
  background: #fffaf5 !important;
  border: 1px solid #fed7aa !important;
  border-radius: 16px !important;
  padding: 12px !important;
}
.sm-cover--light .sm-cover__zone {
  fill: rgba(255, 106, 0, 0.18) !important;
  stroke: #ff6a00 !important;
}
.sm-cover--light .sm-cover__zone.is-on,
.sm-cover--light .sm-cover__zone:hover {
  fill: rgba(255, 106, 0, 0.38) !important;
}
.sm-cover--light .sm-cover__tip {
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  color: var(--ab-mute) !important;
  border-radius: 14px !important;
  min-height: 0 !important;
}
.sm-cover--light .sm-cover__tip strong {
  color: var(--ab-ink) !important;
}
.sm-cover__cities-label {
  margin: 14px 0 8px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ab-mute) !important;
}
.cities--pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cities--pills li {
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: var(--ab-soft) !important;
  border: 1px solid var(--ab-line) !important;
  color: var(--ab-ink) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}
@media (max-width: 820px) {
  .sm-cover--light { grid-template-columns: 1fr !important; }
}

/* ============================================================
   PRO DESIGN SYSTEM v10 — typography, rhythm, contrast, CTAs
   Does not change structure, copy, or interactive logic.
   ============================================================ */

@media (max-width: 768px) {
  :root { --ab-space-section: var(--ab-space-section-m); }
}

.wrap,
.wrap.narrow,
.sm-bento-wrap {
  max-width: var(--ab-wrap) !important;
  width: min(var(--ab-wrap), calc(100% - 32px)) !important;
  margin-inline: auto !important;
  padding-inline: 16px !important;
  box-sizing: border-box !important;
}
/* Home: never shrink sections to half-page — same width as builder/screens */
.wrap.narrow { max-width: var(--ab-wrap) !important; }

h1, .hero h1, .page-hero h1 {
  font-family: var(--ab-display) !important;
  font-weight: 700 !important;
  font-size: 56px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ab-ink) !important;
  max-width: 18ch !important;
}
h2, .block h2, .sm-sec-head h2 {
  font-family: var(--ab-display) !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: var(--ab-ink) !important;
  margin: 0 0 12px !important;
  max-width: var(--ab-prose) !important;
}
h3, .sm-cell h3, .screen-row h3 {
  font-family: var(--ab-display) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--ab-ink) !important;
}
p, .lead, .hero-copy > p, .sm-cell p, .screen-copy p, .faq-acc__body p {
  font-family: var(--ab-font) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--ab-mute) !important;
  max-width: var(--ab-prose) !important;
}
.lead { font-weight: 500 !important; margin: 0 0 24px !important; }
.eyebrow, .sm-index, .tag, .sm-calc__viz-hint, .sm-sku__sub, .quiet, .faq-micro,
.proof-meta, .sm-cover__cities-label {
  font-family: var(--ab-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--ab-mute) !important;
}
.eyebrow, .sm-index {
  color: var(--ab-orange) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
}

@media (max-width: 768px) {
  h1, .hero h1 { font-size: 36px !important; max-width: 12ch !important; }
  h2, .block h2, .sm-sec-head h2 { font-size: 28px !important; }
  h3, .sm-cell h3, .screen-row h3 { font-size: 20px !important; }
  p, .lead, .hero-copy > p, .sm-cell p, .screen-copy p, .faq-acc__body p {
    font-size: 16px !important;
  }
  .eyebrow, .sm-index, .tag, .quiet, .faq-micro { font-size: 13px !important; }
}

.block,
.sm-3d,
.sm-benefits,
.proof,
.service-area,
.faq.block,
#builder.block,
#screens.block,
#quiz.block,
#why.block {
  padding-block: var(--ab-space-section) !important;
  margin: 0 !important;
}
.sm-sec-head { margin-bottom: 32px !important; max-width: var(--ab-prose) !important; }
.sm-sec-head .lead { margin-bottom: 0 !important; }

.btn,
.btn-primary,
a.btn,
button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 14px 24px !important;
  border-radius: var(--ab-radius-btn) !important;
  font-family: var(--ab-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  box-shadow: var(--ab-shadow-1) !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}
.btn-primary,
a.btn-primary,
.head-estimate,
.head-mob__btn--call {
  background: var(--ab-orange) !important;
  color: var(--ab-orange-ink) !important;
  border-color: var(--ab-orange) !important;
}
.btn-primary:hover,
a.btn-primary:hover,
.head-estimate:hover,
.head-mob__btn--call:hover {
  background: oklch(55% 0.17 45) !important;
  border-color: oklch(55% 0.17 45) !important;
  color: var(--ab-orange-ink) !important;
}
.btn:focus-visible,
.btn-primary:focus-visible,
a.btn:focus-visible,
.head-estimate:focus-visible,
.dock a:focus-visible,
.sm-sku__add:focus-visible,
.sm-calc__tab:focus-visible,
.sm-calc__face:focus-visible,
.faq-acc__btn:focus-visible {
  outline: 2px solid var(--ab-orange) !important;
  outline-offset: 2px !important;
}
.btn-quiet,
a.btn-quiet {
  background: var(--ab-paper) !important;
  color: var(--ab-ink) !important;
  border-color: var(--ab-line) !important;
  box-shadow: none !important;
}
.btn-quiet:hover,
a.btn-quiet:hover {
  border-color: color-mix(in oklch, var(--ab-orange) 45%, var(--ab-line)) !important;
  background: var(--ab-soft) !important;
}

.hero {
  padding: 32px 0 48px !important;
  background: var(--ab-bg) !important;
}
.hero-copy {
  max-width: min(720px, calc(100% - 32px)) !important;
  padding-top: 16px !important;
}
.hero .eyebrow { margin: 0 0 12px !important; }
.hero h1 { margin: 0 0 16px !important; }
.hero .tagline-hero {
  font-family: var(--ab-font) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
  color: var(--ab-mute) !important;
  margin: 0 0 16px !important;
  max-width: 42ch !important;
}
.hero .tagline-hero::after {
  display: none !important;
}
.hero-copy > p:not(.eyebrow):not(.tagline-hero) {
  margin: 0 0 12px !important;
  max-width: 52ch !important;
}
.hero .actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 24px !important;
}
.hero .actions .btn-primary { box-shadow: var(--ab-shadow-2) !important; }
.hero .trust-bar {
  margin-top: 16px !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--ab-mute) !important;
}
.hero .sm-live-proof { margin-top: 16px !important; gap: 8px !important; }
.sm-live-chip {
  background: var(--ab-paper) !important;
  border: 1px solid var(--ab-line) !important;
  color: var(--ab-ink) !important;
  border-radius: var(--ab-radius-pill) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  min-height: 36px !important;
  box-shadow: var(--ab-shadow-1) !important;
}
.hero > img {
  border-radius: var(--ab-radius-card) !important;
  box-shadow: var(--ab-shadow-2) !important;
  max-height: min(40vh, 340px) !important;
}

.need-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
@media (min-width: 720px) {
  .need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1100px) {
  .need-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
.need {
  background: var(--ab-paper) !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: var(--ab-radius-card) !important;
  box-shadow: var(--ab-shadow-1) !important;
  padding: 24px 16px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.need:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--ab-shadow-2) !important;
  border-color: color-mix(in oklch, var(--ab-orange) 35%, var(--ab-line)) !important;
  background: var(--ab-paper) !important;
}
.need b {
  font-family: var(--ab-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 4px 0 !important;
  color: var(--ab-ink) !important;
}
.need > span:not(.so-ico) {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--ab-mute) !important;
}
#screens .wrap.catalog,
#screens .wrap.narrow.catalog {
  max-width: var(--ab-wrap) !important;
  width: min(var(--ab-wrap), calc(100% - 32px)) !important;
  display: block !important;
}
#screens .catalog .screen-row,
.catalog .screen-row {
  background: var(--ab-paper) !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: var(--ab-radius-card) !important;
  box-shadow: var(--ab-shadow-1) !important;
  padding: 20px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  height: auto !important;
}
#screens .catalog .screen-row:hover,
.catalog .screen-row:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--ab-shadow-2) !important;
}
#screens .catalog .screen-row h3,
.catalog .screen-row h3 {
  font-size: 20px !important;
  margin: 8px 0 !important;
}
#screens .catalog .screen-row p,
.catalog .screen-row p,
#screens .catalog .screen-row li {
  font-size: 15px !important;
  color: var(--ab-mute) !important;
}

#builder .sm-calc,
.sm-calc.sm-calc--luxe { gap: 24px !important; }
#builder .sm-calc__viz,
.sm-calc--luxe .sm-calc__viz {
  background: var(--ab-paper) !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: var(--ab-radius-card) !important;
  box-shadow: var(--ab-shadow-2) !important;
  padding: 20px 16px 16px !important;
}
#builder .sm-calc__viz-label {
  font-family: var(--ab-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ab-mute) !important;
  margin: 0 0 4px !important;
}
#builder .sm-calc__viz-hint {
  margin: 0 0 16px !important;
  color: var(--ab-mute) !important;
}
#builder .sm-calc__face {
  cursor: pointer !important;
  transition: fill 0.15s ease, stroke 0.15s ease, filter 0.15s ease !important;
}
#builder .sm-calc__face--roof {
  fill: color-mix(in oklch, var(--ab-orange) 14%, white) !important;
  stroke: var(--ab-orange) !important;
  stroke-width: 2.5 !important;
}
#builder .sm-calc__face--wall {
  fill: color-mix(in oklch, var(--ab-ink) 4%, white) !important;
  stroke: oklch(70% 0.01 60) !important;
  stroke-width: 2.5 !important;
}
#builder .sm-calc__face:hover,
#builder .sm-calc__face:focus-visible {
  filter: brightness(0.96) !important;
  stroke: var(--ab-orange) !important;
}
#builder .sm-calc__face.is-on {
  fill: color-mix(in oklch, var(--ab-orange) 32%, white) !important;
  stroke: var(--ab-orange) !important;
  stroke-width: 3.5 !important;
}
#builder .sm-calc__face-caption {
  fill: var(--ab-ink) !important;
  font-family: var(--ab-font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
  pointer-events: none !important;
}
#builder .sm-calc__shop,
#builder .sm-calc__cart {
  background: var(--ab-paper) !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: var(--ab-radius-card) !important;
  box-shadow: var(--ab-shadow-1) !important;
}
#builder .sm-sku__price {
  font-family: var(--ab-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ab-orange) !important;
  white-space: nowrap !important;
}
#builder .sm-sku__title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ab-ink) !important;
}
#builder .sm-sku__sub {
  font-size: 13px !important;
  color: var(--ab-mute) !important;
}
#builder .sm-sku__add {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: var(--ab-radius-btn) !important;
  background: var(--ab-orange) !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 600 !important;
}
#builder .sm-calc__tab {
  min-height: 44px !important;
  border-radius: var(--ab-radius-btn) !important;
  font-weight: 600 !important;
}
#builder .sm-calc__total strong {
  font-family: var(--ab-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--ab-orange) !important;
}

.sm-3d__stage {
  border-radius: var(--ab-radius-card) !important;
  border: 1px solid var(--ab-line) !important;
  box-shadow: var(--ab-shadow-2) !important;
  background: var(--ab-paper) !important;
}
.sm-3d__swatch {
  min-height: 44px !important;
  border-radius: var(--ab-radius-btn) !important;
  padding: 10px 14px !important;
}

#faq.faq .faq-acc {
  background: var(--ab-paper) !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: var(--ab-radius-card) !important;
  box-shadow: var(--ab-shadow-1) !important;
  overflow: hidden !important;
}
#faq.faq .faq-acc__item {
  border-bottom: 1px solid var(--ab-line) !important;
  box-shadow: none !important;
}
#faq.faq .faq-acc__item:last-child { border-bottom: 0 !important; }
#faq.faq .faq-acc__btn {
  font-family: var(--ab-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--ab-ink) !important;
  padding: 20px 16px !important;
  min-height: 56px !important;
  transition: color 0.2s ease !important;
}
#faq.faq .faq-acc__btn:hover { color: var(--ab-ink) !important; }
#faq.faq .faq-acc__icon {
  width: 28px !important;
  height: 28px !important;
  border: 1.5px solid var(--ab-line) !important;
  border-radius: 8px !important;
  background: var(--ab-soft) !important;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease !important;
}
#faq.faq .faq-acc__icon::before,
#faq.faq .faq-acc__icon::after {
  background: var(--ab-ink) !important;
}
#faq.faq .faq-acc__item.is-open .faq-acc__icon {
  border-color: var(--ab-orange) !important;
  background: color-mix(in oklch, var(--ab-orange) 12%, white) !important;
}
#faq.faq .faq-acc__body p {
  color: var(--ab-mute) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
#faq.faq .faq-acc__panel {
  transition: height 0.2s ease !important;
}

#proof .proof-card,
.sm-cell,
.sm-cover--light .sm-cover__svg,
.sm-cover--light .sm-cover__tip,
#area.service-area {
  border-radius: var(--ab-radius-card) !important;
  box-shadow: var(--ab-shadow-1) !important;
}
.sm-cell {
  background: var(--ab-paper) !important;
  border: 1px solid var(--ab-line) !important;
  padding: 24px !important;
}
.sm-cell h3 { margin: 8px 0 12px !important; }
.cta-end {
  padding: 48px 16px !important;
  text-align: center !important;
}
.cta-end .phone {
  font-family: var(--ab-display) !important;
  font-size: clamp(28px, 5vw, 40px) !important;
  font-weight: 700 !important;
  color: var(--ab-orange) !important;
  text-decoration: none !important;
}

.sticky-call { display: none !important; }

@media (max-width: 980px) {
  .dock,
  .dock.dock--cta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    background: var(--ab-orange) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12) !important;
    z-index: 90 !important;
  }
  .dock a,
  .dock.dock--cta a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 64px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-family: var(--ab-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }
  .dock a + a,
  .dock.dock--cta a + a {
    border-left: 1px solid rgba(255, 255, 255, 0.28) !important;
  }
  .dock a.hot,
  .dock.dock--cta a.hot {
    background: transparent !important;
    color: #fff !important;
  }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
  .sm-assist { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (min-width: 981px) {
  .dock.dock--cta { display: none !important; }
}

.sm-marquee {
  opacity: 0.7 !important;
  border-color: var(--ab-line) !important;
}
.sm-kinetic-line {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--ab-mute) !important;
  margin: 0 0 12px !important;
  max-width: var(--ab-prose) !important;
}
.sm-kinetic-line b { font-weight: 600 !important; color: var(--ab-ink) !important; }
.sm-kinetic-line b.accent { color: var(--ab-orange) !important; }

/* ============================================================
   HOTFIX v12 — stop the “horror”: clipping, scream-case, bloat
   ============================================================ */

/* Long hero slogan must NOT be uppercase + tracked */
.hero .eyebrow,
.hero-copy .eyebrow {
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--ab-orange) !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}
.hero-copy .eyebrow::before,
.hero .eyebrow::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
}

/* Only short index labels stay uppercase */
.sm-index {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Hero: readable first screen, not a wall */
.hero {
  padding: 12px 0 32px !important;
}
html {
  scroll-padding-top: 88px !important;
}
.hero,
#top,
#builder,
#quiz,
#screens,
#faq,
#area,
#proof,
#config3d,
#why {
  scroll-margin-top: 88px !important;
}
@media (max-width: 980px) {
  .hero {
    padding-top: 16px !important;
  }
  .hero-copy {
    padding-top: 8px !important;
  }
}
.hero-copy {
  width: min(640px, calc(100% - 32px)) !important;
  max-width: min(640px, calc(100% - 32px)) !important;
  margin-inline: auto !important;
  padding: 12px 0 8px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.hero h1,
.hero .hero-copy h1 {
  max-width: 100% !important;
  font-size: clamp(1.85rem, 7vw, 3rem) !important;
  line-height: 1.12 !important;
  margin: 0 0 12px !important;
}
.hero .tagline-hero {
  max-width: 100% !important;
  font-style: normal !important;
  margin: 0 0 12px !important;
}
.hero-copy > p:not(.eyebrow):not(.tagline-hero) {
  max-width: 100% !important;
  margin: 0 0 16px !important;
  line-height: 1.55 !important;
}
.hero .actions {
  margin-top: 16px !important;
  gap: 10px !important;
}
.hero > img {
  max-height: 200px !important;
  margin-top: 16px !important;
  width: min(1120px, calc(100% - 32px)) !important;
}

/* Soften neon CTA glow */
.head-mob__btn--call,
.btn-primary,
a.btn-primary {
  box-shadow: var(--ab-shadow-1) !important;
}

/* Mobile header: Call + Quiz only (Calc lives in dock / page) */
@media (max-width: 980px) {
  .head-mob__btn--calc { display: none !important; }
  .logo-name { display: none !important; }
  .logo-mark {
    width: 40px !important;
    height: 40px !important;
  }
  .head-mob {
    gap: 6px !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    margin-left: auto !important;
  }
  .head-mob__btn {
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  .head-mob__btn--call {
    padding: 0 14px !important;
  }
  .site-head .bar {
    width: calc(100% - 20px) !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .hero .trust-bar,
  .hero .sm-live-proof {
    display: none !important;
  }
  .hero-copy {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    padding: 8px 0 4px !important;
    margin-inline: 16px !important;
  }
  .hero h1,
  .hero .hero-copy h1 {
    font-size: 30px !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
  .hero .eyebrow,
  .hero .tagline-hero,
  .hero-copy > p {
    max-width: 100% !important;
    padding-right: 0 !important;
  }
  /* kill leftover 12ch clamp from earlier rules */
  h1, .hero h1, .page-hero h1 {
    max-width: 100% !important;
  }
  .block,
  .sm-3d,
  .sm-benefits,
  .proof,
  .service-area,
  .faq.block,
  #builder.block,
  #screens.block,
  #quiz.block,
  #why.block {
    padding-block: 40px !important;
  }
}

/* Kill tooltip overflow ghosts */
.sm-live-pop {
  max-width: min(280px, calc(100vw - 32px)) !important;
  right: auto !important;
  left: 0 !important;
}

/* Catalog cards: stop 600px towers on phone */
@media (max-width: 720px) {
  #screens .catalog .screen-row,
  .catalog .screen-row {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    padding: 14px !important;
    gap: 12px !important;
  }
  #screens .catalog .screen-row p,
  .catalog .screen-row p,
  #screens .catalog .screen-row li {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  #screens .catalog .screen-row .bullets {
    margin: 8px 0 0 !important;
    padding-left: 1.1em !important;
  }
  .need-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .need {
    padding: 14px 10px !important;
  }
  .need b { font-size: 12px !important; }
  .need > span:not(.so-ico) { font-size: 12px !important; }
}

/* ZIP card: don’t float as a weird inset panel on mobile */
@media (max-width: 820px) {
  #area.service-area {
    margin: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    padding: 40px 16px !important;
    background: var(--ab-bg) !important;
  }
}

/* Dock labels readable */
.dock.dock--cta a {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
}

/* Prose never wider than viewport */
.wrap,
.hero-copy,
.sm-sec-head,
.lead,
h2, h3, p {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* ============================================================
   Hero H1 — one promise, no duplicates, full-width stage
   ============================================================ */
.hero {
  padding: 24px 0 40px !important;
  overflow: visible !important;
}
.hero-copy,
.hero-copy.wrap {
  width: min(var(--ab-wrap), calc(100% - 32px)) !important;
  max-width: var(--ab-wrap) !important;
  margin-inline: auto !important;
  padding: 8px 16px 12px !important;
  box-sizing: border-box !important;
}
.hero .eyebrow,
.hero-copy .eyebrow {
  display: block !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-family: var(--ab-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--ab-orange) !important;
  max-width: 100% !important;
  white-space: normal !important;
}
.hero h1,
.hero .hero-copy h1 {
  font-family: var(--ab-display) !important;
  font-weight: 700 !important;
  font-size: clamp(2.1rem, 5vw, 3.5rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: var(--ab-ink) !important;
  max-width: 18ch !important;
  width: auto !important;
  margin: 0 0 16px !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.hero .tagline-hero {
  font-family: var(--ab-font) !important;
  font-size: clamp(17px, 2vw, 20px) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.45 !important;
  letter-spacing: -0.01em !important;
  color: var(--ab-mute) !important;
  max-width: 36ch !important;
  margin: 0 0 20px !important;
}
.hero .tagline-hero::after {
  display: none !important;
  content: none !important;
}
.hero .trust-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 10px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 20px !important;
  padding: 10px 14px !important;
  border-radius: var(--ab-radius-pill) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.hero .sm-live-proof { display: none !important; }
.hero .actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
}
.hero > img {
  order: 2 !important;
  width: min(var(--ab-wrap), calc(100% - 32px)) !important;
  max-width: var(--ab-wrap) !important;
  max-height: min(48vh, 420px) !important;
  margin: 8px auto 0 !important;
  border-radius: var(--ab-radius-card) !important;
  box-shadow: var(--ab-shadow-2) !important;
}
@media (max-width: 720px) {
  .hero h1,
  .hero .hero-copy h1 {
    font-size: clamp(1.9rem, 8.5vw, 2.5rem) !important;
    max-width: 100% !important;
  }
  .hero .tagline-hero {
    font-size: 16px !important;
    max-width: 100% !important;
  }
  .hero > img {
    max-height: 220px !important;
  }
}

/* ============================================================
   Full-width sections — kill leftover half-page clamps
   ============================================================ */
.wrap,
.wrap.narrow,
.wrap.catalog,
#screens .wrap.catalog,
#screens .wrap.narrow.catalog,
#proof .wrap,
#quiz .wrap,
#area .wrap,
#faq .wrap,
#area.service-area,
.block > .wrap {
  display: block !important;
  max-width: var(--ab-wrap) !important;
  width: min(var(--ab-wrap), calc(100% - 32px)) !important;
  margin-inline: auto !important;
}
#area.service-area {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}
#proof .ba-hero,
#proof .proof-grid,
#quiz .quiz,
.need-grid,
.sm-cover--light,
#faq .faq-acc {
  max-width: none !important;
  width: 100% !important;
}

/* ============================================================
   Six weaves — equal-width cards (last file, last word)
   Parent wrap is a block. Grid lives ONLY on .catalog-grid.
   Never display:contents, never auto-fit (last row stretches).
   ============================================================ */
#screens .wrap.catalog,
#screens .wrap.narrow.catalog {
  display: block !important;
  max-width: var(--ab-wrap) !important;
  width: min(var(--ab-wrap), calc(100% - 32px)) !important;
  margin-inline: auto !important;
}
#screens .catalog-grid,
.catalog-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
}
#screens .catalog-grid > .screen-row,
#screens .catalog .screen-row,
.catalog .screen-row {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
}
@media (min-width: 720px) {
  #screens .catalog-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1100px) {
  #screens .catalog-grid,
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}