/* ============================================================================
   RedoLocal — styles.css
   Design system: "Bright, trustworthy, local." Trust-blue + warm amber accent on a
   clean light ground (BRAND_GUIDE §9). Pin/map motif. Optimistic Main-Street feel —
   NOT a cold SaaS dashboard, NOT a loud gradient agency.
   Tokens first (consumed with literal fallbacks); house-style component vocabulary;
   mobile-first ladder at 1024/768/600/480/375.
   Fonts: Inter — ONE family for display + body (2026-07-08 fix 4: Bricolage Grotesque
   removed — "cartoon", per Mark). Self-hosted variable woff2, loaded async per head.
   Asset version bumps in lockstep with /js/main.js?v= — bump on every CSS change.
   ============================================================================ */

/* ── Self-hosted brand font (2026-07-03 fix D-1; single-family 2026-07-08 fix 4) ──
   Removes the Google Fonts third-party origins from the critical path: kills the residual desktop
   CLS from font-swap, the visitor-IP privacy leak, and the "you own everything / no lock-in"
   inconsistency of loading a Google CDN. Variable woff2 (wght axis 100–900 — verified via
   fontTools fvar introspection 2026-07-08), latin + latin-ext only. Weight range widened to
   100 900 (was 400 700) so headings requesting weight 800 resolve to a REAL instance of the
   variable font, never a browser-synthesized faux-bold. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Tokens (BRAND_GUIDE §9.2 / §9.3) ── */
/* CLS guard (2026-07-02): metric-matched local fallback for the async font so nothing reflows
   when Inter swaps in (doctrine build budget CLS ≤ 0.08). */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

:root {
  /* color */
  --bp-primary:      #1B64D8;   /* trust blue — headings accents, links, pin motif (darkened from #1F6FEB 2026-07-02: WCAG 4.5:1 on --bp-surface; was 4.34:1, now 5.1:1) */
  --bp-primary-deep: #11406E;   /* darker blue — nav, footer, headline emphasis */
  --bp-accent:       #FF8A3D;   /* warm CTA — primary buttons, the conversion action */
  --bp-accent-deep:  #E8701F;   /* CTA hover / pressed */
  --bp-ink:          #16202C;   /* body text on light */
  --bp-muted:        #5A6B7B;   /* secondary text, captions */
  --bp-ground:       #FFFFFF;   /* page background (clean light) */
  --bp-surface:      #F4F8FD;   /* card / section tint (pale blue-white) */
  --bp-line:         #DCE6F0;   /* borders / dividers */
  --bp-success:      #1AA06D;   /* "you own it" / trust-strip checkmarks */
  --bp-primary-soft: #E7F0FE;   /* tint for highlight pills / icon wells */

  /* type — single family (2026-07-08 fix 4): Bricolage removed, Inter carries display + body. */
  --bp-font-display: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --bp-font-body:    'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* scale */
  --bp-space-xs: .5rem;  --bp-space-sm: 1rem;   --bp-space-md: 1.75rem;
  --bp-space-lg: 3rem;   --bp-space-xl: 5rem;
  --bp-radius:    14px;   /* soft rounded corners ~12-16px per §9.5 */
  --bp-radius-sm: 9px;
  --bp-shadow-card: 0 10px 30px rgba(17, 64, 110, .09);
  --bp-shadow-lift: 0 18px 44px rgba(17, 64, 110, .15);
  --bp-ease: cubic-bezier(.22, .9, .3, 1);
  --bp-header-h: 66px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* Clip the off-canvas mobile nav overlay (position:fixed; translateX(100%)) so it can never
   create horizontal page scroll. overflow-x:clip preserves position:sticky (overflow:hidden would break it). */
html, body { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
input, button, select, textarea { font: inherit; }
body {
  font-family: var(--bp-font-body, system-ui, sans-serif);
  color: var(--bp-ink, #16202C);
  background: var(--bp-ground, #fff);
  line-height: 1.65;
  font-size: 1rem;
}

/* ── A11y ── */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--bp-accent, #FF8A3D); color: var(--bp-ink, #16202C); padding: .6rem 1.2rem; z-index: 200;
  font-weight: 600; border-radius: 0 0 var(--bp-radius-sm, 9px) 0;
}
.skip-link:focus { left: 0; }
/* Focus ring: blue on light surfaces (5.44:1 — WCAG 1.4.11); amber only on dark bands where it's ~6:1.
   Amber-on-white was 2.35:1 (2026-07-03 fix F-2). */
:focus-visible { outline: 3px solid var(--bp-primary, #1B64D8); outline-offset: 2px; }
.section-dark :focus-visible, .hero :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible { outline-color: var(--bp-accent, #FF8A3D); }

/* ── Layout ── */
.container { width: min(1160px, 92%); margin-inline: auto; }
.container-narrow { width: min(780px, 92%); margin-inline: auto; }
.section { padding: var(--bp-space-xl, 5rem) 0; }
.section-alt { background: var(--bp-surface, #F4F8FD); }
.section-tight { padding: var(--bp-space-lg, 3rem) 0; }
.section-dark {
  background:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px) 0 0 / 30px 30px,
    linear-gradient(160deg, var(--bp-primary-deep, #11406E), #0c3157);
  color: #fff;
}
.section-dark .section-title, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .section-intro, .section-dark p, .section-dark li { color: #d7e6fb; }
.section-dark .section-eyebrow { color: #ffd4b0; }
.section-dark a { color: #fff; }

/* ── Type ── */
h1, h2, h3, h4 {
  font-family: var(--bp-font-display, sans-serif);
  font-weight: 700;
  line-height: 1.1;
  color: var(--bp-primary-deep, #11406E);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p, li { text-wrap: pretty; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 800; }
h1 em, .accent { font-style: normal; color: var(--bp-accent, #FF8A3D); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h2 em, h3 em { font-style: normal; color: var(--bp-primary, #1F6FEB); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.06rem; }
p { margin-bottom: 1rem; color: var(--bp-muted, #5A6B7B); }
p:last-child { margin-bottom: 0; }
.lead { font-size: 1.16rem; color: var(--bp-ink, #16202C); }
a { color: var(--bp-primary, #1F6FEB); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bp-primary-deep, #11406E); }
strong { color: var(--bp-ink, #16202C); }
.section-dark strong, .cta-band strong, .hero strong, .site-footer strong { color: #fff; }

/* Eyebrow with pin-drop bullet (the RedoLocal signature) */
.section-eyebrow {
  display: inline-flex; align-items: flex-start; gap: .5rem;
  font-family: var(--bp-font-display, sans-serif); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .82rem; color: var(--bp-primary, #1F6FEB); margin-bottom: .8rem;
}
.section-eyebrow::before {
  content: ""; width: 13px; height: 13px; flex: none; margin-top: 3px;
  background: currentColor;
  -webkit-mask: var(--pin-mask) center/contain no-repeat;
          mask: var(--pin-mask) center/contain no-repeat;
}
:root {
  --pin-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.6 2 4 5.6 4 10c0 5.3 7 11.4 7.3 11.7.4.4 1 .4 1.4 0C13 21.4 20 15.3 20 10c0-4.4-3.6-8-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z'/%3E%3C/svg%3E");
}
.section-title { margin-bottom: .65rem; }
.section-intro { font-size: 1.1rem; max-width: 62ch; margin-bottom: var(--bp-space-md, 1.75rem); color: var(--bp-muted, #5A6B7B); }
.center { text-align: center; }
.center .section-intro { margin-inline: auto; }
.center .cta-row { justify-content: center; }

/* hairline divider with center pin tick */
.divider-pin {
  border: 0; height: 1px; margin: var(--bp-space-lg, 3rem) auto; width: min(420px, 70%);
  background: linear-gradient(90deg, transparent, var(--bp-line, #DCE6F0) 18%, var(--bp-line, #DCE6F0) 82%, transparent);
  position: relative; overflow: visible;
}
.divider-pin::after {
  content: ""; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px;
  border-radius: 50% 50% 50% 0; transform: translateX(-50%) rotate(45deg);
  background: var(--bp-accent, #FF8A3D);
}

/* ── Buttons (48px tap targets) ── */
.btn, .btn-primary, .btn-outline, .btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .78rem 1.7rem;
  font-family: var(--bp-font-display, sans-serif); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .005em; text-decoration: none;
  border-radius: var(--bp-radius-sm, 9px); border: 2px solid transparent;
  cursor: pointer; transition: transform .18s var(--bp-ease), background .18s, color .18s, border-color .18s, box-shadow .18s;
}
/* Accent CTA — the single dominant conversion button (reserve the warm accent for THIS) */
.btn-primary { background: var(--bp-accent, #FF8A3D); color: var(--bp-ink, #16202C); box-shadow: 0 8px 20px rgba(232,112,31,.28); } /* ink-on-orange 7.0:1 — white was 2.34:1 WCAG fail (2026-07-02) */
.btn-primary:hover { background: var(--bp-accent-deep, #E8701F); color: var(--bp-ink, #16202C); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(232,112,31,.34); }
.btn-dark { background: var(--bp-primary, #1F6FEB); color: #fff; }
.btn-dark:hover { background: var(--bp-primary-deep, #11406E); color: #fff; transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--bp-primary-deep, #11406E); border-color: var(--bp-line, #DCE6F0); }
.btn-outline:hover { background: var(--bp-surface, #F4F8FD); color: var(--bp-primary-deep, #11406E); border-color: var(--bp-primary, #1F6FEB); transform: translateY(-2px); }
.section-dark .btn-outline, .hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.55); }
.section-dark .btn-outline:hover, .hero .btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn-lg { min-height: 56px; padding: 1rem 2.2rem; font-size: 1.12rem; }
.cta-row { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: var(--bp-space-md, 1.75rem); align-items: center; }
.cta-link { font-family: var(--bp-font-display, sans-serif); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.cta-link::after { content: "\2192"; transition: transform .18s var(--bp-ease); }
.cta-link:hover::after { transform: translateX(3px); }

/* ── Announcement strip ── */
.announce-bar {
  background: var(--bp-primary-deep, #11406E); color: #fff; text-align: center;
  padding: .5rem 1rem; font-size: .94rem; font-weight: 500; position: relative;
}
.announce-bar strong { color: #ffd4b0; }
.announce-bar .announce-pin { color: var(--bp-accent, #FF8A3D); }

/* ── Two-bar Header ── */
.site-header { position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 var(--bp-line, #DCE6F0); }
.utility-bar { background: var(--bp-surface, #F4F8FD); color: var(--bp-muted, #5A6B7B); font-size: .9rem; border-bottom: 1px solid var(--bp-line, #DCE6F0); }
.utility-bar-inner { display: flex; justify-content: flex-end; align-items: center; gap: 1.3rem; padding: .35rem 0; }
.utility-link { color: var(--bp-primary-deep, #11406E); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.utility-link:hover { color: var(--bp-primary, #1F6FEB); }
.utility-phone { font-weight: 700; }
.main-nav { background: #fff; }
.main-nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--bp-header-h); gap: 1rem; }
.nav-logo { display: inline-flex; align-items: center; gap: .15rem; text-decoration: none; }
.nav-logo svg { width: 26px; height: 26px; flex: none; }
.nav-logo-text {
  font-family: var(--bp-font-display, sans-serif); font-weight: 800; font-size: 1.42rem;
  letter-spacing: -.01em; color: var(--bp-primary-deep, #11406E); white-space: nowrap;
}
.nav-logo-text em { font-style: normal; color: var(--bp-primary, #1F6FEB); }
.nav-links { display: flex; align-items: center; gap: 1.35rem; list-style: none; }
.nav-links a {
  color: var(--bp-ink, #16202C); text-decoration: none; font-weight: 600; font-size: .97rem;
  padding: .4rem 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav-links a:hover { color: var(--bp-primary, #1F6FEB); }
.nav-links a[aria-current="page"] { color: var(--bp-primary, #1F6FEB); border-bottom-color: var(--bp-accent, #FF8A3D); }
.nav-cta { white-space: nowrap; }
.nav-overlay { display: flex; align-items: center; gap: 1.4rem; }
.nav-toggle { display: none; background: none; border: 0; width: 48px; height: 48px; cursor: pointer; position: relative; z-index: 120; }
.nav-toggle span {
  display: block; width: 26px; height: 2.5px; background: var(--bp-primary-deep, #11406E); margin: 5.5px auto;
  border-radius: 2px; transition: transform .25s var(--bp-ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Nav dropdown menus (Product / Trades) ── */
.nav-has-menu { position: relative; display: inline-flex; align-items: center; gap: .2rem; }
.nav-caret {
  background: none; border: 0; cursor: pointer; padding: .3rem; line-height: 0;
  color: var(--bp-ink, #16202C); display: inline-flex;
}
.nav-caret svg { transition: transform .2s var(--bp-ease); }
.nav-menu-panel {
  list-style: none; position: absolute; top: 100%; left: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--bp-line, #DCE6F0); border-radius: var(--bp-radius-sm, 9px);
  box-shadow: var(--bp-shadow-lift); padding: .5rem; margin-top: .35rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s; z-index: 130;
}
.nav-has-menu:hover .nav-menu-panel,
.nav-has-menu:focus-within .nav-menu-panel,
.nav-has-menu.is-open .nav-menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu-panel a { display: block; padding: .55rem .7rem; border-radius: 6px; border: 0; font-size: .94rem; color: var(--bp-ink, #16202C); }
.nav-menu-panel a:hover { background: var(--bp-surface, #F4F8FD); color: var(--bp-primary, #1F6FEB); }
.nav-menu-all a { color: var(--bp-primary, #1F6FEB); font-weight: 700; }

/* ── Hero (layered scrim, clamp H1, accent span, trust micro-line) ── */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--bp-primary-deep, #11406E); }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(31,111,235,.35), transparent 60%),
    linear-gradient(165deg, rgba(11,33,58,.86), rgba(11,33,58,.62));
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px) 0 0 / 30px 30px;
  opacity: .5;
}
.hero .container { position: relative; z-index: 2; padding: clamp(3.2rem, 8vw, 6rem) 0; }
.hero-inner { max-width: 60ch; }
.hero h1 { color: #fff; max-width: 18ch; text-shadow: 0 2px 14px rgba(8,20,36,.4); }
.hero-sub { font-size: clamp(1.05rem, 2vw, 1.28rem); color: #e7f0fe; max-width: 56ch; margin-top: 1rem; }
.hero-sub strong { color: #fff; }
.hero .section-eyebrow { color: #ffd4b0; }
.hero-trust { margin-top: 1.1rem; font-size: .96rem; color: #cfe0f7; font-style: italic; max-width: 60ch; }
.hero-media { margin-top: var(--bp-space-md, 1.75rem); border-radius: var(--bp-radius); overflow: hidden; box-shadow: var(--bp-shadow-lift); }

/* page hero (interior pages — slimmer) */
.page-hero { position: relative; color: #fff; }
.page-hero .container { position: relative; z-index: 2; padding: clamp(2.6rem, 6vw, 4.2rem) 0; }
.page-hero h1 { color: #fff; }
/* Interior/location hero sub-paragraph left-aligns under its left-aligned H1/eyebrow;
   only an explicitly-centered page-hero centers it (2026-07-03 fix C-1: was stranded/indented). */
.page-hero.center .hero-sub { margin-inline: auto; }

/* ── Card grid (auto-fit + :has() orphan-centering) ── */
.card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: var(--bp-space-md, 1.75rem); }
.card {
  background: #fff; border: 1px solid var(--bp-line, #DCE6F0); border-radius: var(--bp-radius);
  padding: 1.6rem; box-shadow: var(--bp-shadow-card); transition: transform .2s var(--bp-ease), box-shadow .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--bp-shadow-lift); }
.card h3 { margin-bottom: .5rem; }
.card-icon {
  width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bp-primary-soft, #E7F0FE); color: var(--bp-primary, #1F6FEB); margin-bottom: 1rem;
}
.card-icon svg { width: 26px; height: 26px; }
/* orphan centering for a lone trailing card is handled in the responsive ladder (2-col band) */

/* ── How-it-works 3-up steps ── */
.steps { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--bp-space-md, 1.75rem); counter-reset: step; }
.step { position: relative; background: #fff; border: 1px solid var(--bp-line, #DCE6F0); border-radius: var(--bp-radius); padding: 1.7rem 1.6rem 1.6rem; box-shadow: var(--bp-shadow-card); }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--bp-font-display, sans-serif); font-weight: 800; font-size: 1.1rem;
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bp-accent, #FF8A3D); color: var(--bp-ink, #16202C); margin-bottom: 1rem;
}
.step h3 { margin-bottom: .4rem; }

/* ── Before/After (ba-slider + side-by-side) ── */
.ba-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: var(--bp-space-md, 1.75rem); }
.ba-pair { border-radius: var(--bp-radius); overflow: hidden; border: 1px solid var(--bp-line, #DCE6F0); box-shadow: var(--bp-shadow-card); background: #fff; }
.ba-pair figure { margin: 0; position: relative; }
.ba-pair img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.ba-tag { position: absolute; top: .7rem; left: .7rem; background: rgba(17,64,110,.92); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 6px; }
.ba-tag.is-after { background: #B85200; } /* was var(--bp-accent) #FF8A3D — white text needs WCAG 4.5:1; #B85200 = 4.95:1 (2026-07-02) */
.ba-cols { display: grid; grid-template-columns: 1fr 1fr; }
.ba-pair figcaption { padding: .9rem 1.1rem; font-size: .95rem; color: var(--bp-muted, #5A6B7B); }
/* CSS-only before/after slider (the .ba-slider; range input reveals the "after") */
.ba-slider { position: relative; border-radius: var(--bp-radius); overflow: hidden; box-shadow: var(--bp-shadow-card); border: 1px solid var(--bp-line, #DCE6F0); }
.ba-slider img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.ba-slider .ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.ba-slider .ba-range { position: absolute; inset: auto 0 0 0; width: 100%; }

/* ── Trade grid ── */
.trade-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: var(--bp-space-md, 1.75rem); list-style: none; }
.trade-grid li a, .trade-grid li span {
  display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; min-height: 56px;
  background: #fff; border: 1px solid var(--bp-line, #DCE6F0); border-radius: var(--bp-radius-sm, 9px);
  text-decoration: none; color: var(--bp-ink, #16202C); font-weight: 600; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.trade-grid li a:hover { border-color: var(--bp-primary, #1F6FEB); transform: translateY(-2px); box-shadow: var(--bp-shadow-card); color: var(--bp-primary-deep, #11406E); }
.trade-grid .trade-pin { color: var(--bp-accent, #FF8A3D); flex: none; }

/* ── Compare table (real <table>) ── */
.compare-wrap { overflow-x: auto; margin-top: var(--bp-space-md, 1.75rem); border-radius: var(--bp-radius); border: 1px solid var(--bp-line, #DCE6F0); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; background: #fff; }
.compare-table th, .compare-table td { padding: .9rem 1.05rem; text-align: left; border-bottom: 1px solid var(--bp-line, #DCE6F0); vertical-align: top; font-size: .96rem; }
.compare-table thead th { font-family: var(--bp-font-display, sans-serif); font-size: 1rem; color: var(--bp-primary-deep, #11406E); background: var(--bp-surface, #F4F8FD); }
.compare-table thead th.is-us { background: var(--bp-primary, #1F6FEB); color: #fff; }
.compare-table tbody th { font-weight: 600; color: var(--bp-ink, #16202C); }
.compare-table td.is-us { background: rgba(31,111,235,.05); font-weight: 600; color: var(--bp-primary-deep, #11406E); }
.compare-table caption { caption-side: bottom; padding: .9rem; font-size: .86rem; color: var(--bp-muted, #5A6B7B); text-align: left; }

/* ── Price cards (3 tiers, Growth highlighted) ── */
.price-cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: var(--bp-space-md, 1.75rem); align-items: stretch; }
.price-card { background: #fff; border: 1px solid var(--bp-line, #DCE6F0); border-radius: var(--bp-radius); padding: 1.9rem 1.6rem; box-shadow: var(--bp-shadow-card); display: flex; flex-direction: column; position: relative; }
.price-card.is-popular { border: 2px solid var(--bp-accent, #FF8A3D); box-shadow: var(--bp-shadow-lift); }
.price-badge { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); background: var(--bp-accent, #FF8A3D); color: var(--bp-ink, #16202C); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .85rem; border-radius: 20px; white-space: nowrap; }
.price-tier { font-family: var(--bp-font-display, sans-serif); font-weight: 700; font-size: 1.25rem; color: var(--bp-primary-deep, #11406E); }
.price-amount { font-family: var(--bp-font-display, sans-serif); font-weight: 800; font-size: 2.7rem; color: var(--bp-ink, #16202C); line-height: 1; margin: .6rem 0 .2rem; }
.price-amount span { font-size: 1rem; font-weight: 600; color: var(--bp-muted, #5A6B7B); }
.price-sentinel { font-size: .78rem; color: var(--bp-muted, #5A6B7B); font-style: italic; margin-bottom: .6rem; }
.price-best { font-size: .95rem; color: var(--bp-muted, #5A6B7B); margin-bottom: 1rem; }
.price-list { list-style: none; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: .55rem; }
.price-list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .94rem; color: var(--bp-ink, #16202C); }
.price-list li::before { content: ""; width: 18px; height: 18px; flex: none; margin-top: 2px; background: var(--bp-success, #1AA06D); -webkit-mask: var(--check-mask) center/contain no-repeat; mask: var(--check-mask) center/contain no-repeat; }
.price-list li.is-off { color: var(--bp-muted, #5A6B7B); text-decoration: line-through; text-decoration-color: var(--bp-line, #DCE6F0); }
.price-list li.is-off::before { background: var(--bp-line, #DCE6F0); -webkit-mask: var(--dash-mask) center/contain no-repeat; mask: var(--dash-mask) center/contain no-repeat; }
.price-card .btn-primary, .price-card .btn-outline { margin-top: auto; }
:root {
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 5.7L9 17l-5.3-5.3 1.4-1.4L9 14.2 18.9 4.3z'/%3E%3C/svg%3E");
  --dash-mask:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='2'/%3E%3C/svg%3E");
}

/* ── FAQ (details/summary, zero-JS) ── */
.faq-list { margin-top: var(--bp-space-md, 1.75rem); border-top: 1px solid var(--bp-line, #DCE6F0); }
.faq-item { border-bottom: 1px solid var(--bp-line, #DCE6F0); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.4rem 1.15rem 0; position: relative;
  font-family: var(--bp-font-display, sans-serif); font-weight: 700; font-size: 1.08rem; color: var(--bp-primary-deep, #11406E);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  font-weight: 700; font-size: 1.5rem; color: var(--bp-primary, #1B64D8); transition: transform .2s var(--bp-ease);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .faq-body { padding: 0 0 1.2rem; color: var(--bp-muted, #5A6B7B); }
.faq-item .faq-body a { font-weight: 600; }

/* ── Trust strip (you-own-it pillars) ── */
.trust-strip { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--bp-space-md, 1.75rem); list-style: none; }
.trust-strip li { display: flex; gap: .7rem; align-items: flex-start; background: #fff; border: 1px solid var(--bp-line, #DCE6F0); border-radius: var(--bp-radius-sm, 9px); padding: 1.1rem 1.2rem; }
.trust-strip .trust-ico { width: 22px; height: 22px; flex: none; color: var(--bp-success, #1AA06D); margin-top: 1px; }
.trust-strip strong { display: block; color: var(--bp-ink, #16202C); }

/* stat tiles (honest only) */
.stat-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: var(--bp-space-md, 1.75rem); list-style: none; }
.stat-tile { background: var(--bp-surface, #F4F8FD); border: 1px solid var(--bp-line, #DCE6F0); border-radius: var(--bp-radius); padding: 1.3rem; text-align: center; }
.stat-tile .stat-big { font-family: var(--bp-font-display, sans-serif); font-weight: 800; font-size: 1.6rem; color: var(--bp-primary, #1F6FEB); }
.section-dark .stat-tile { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.section-dark .stat-tile .stat-big { color: #ffd4b0; }

/* split (two-column text+aside) */
.split { display: grid; gap: 2rem; grid-template-columns: 1.1fr .9fr; align-items: start; margin-top: var(--bp-space-md, 1.75rem); }
.source-note { font-size: .82rem; color: var(--bp-muted, #5A6B7B); margin-top: 1rem; font-style: italic; }

/* pain list */
.pain-list { list-style: none; display: grid; gap: .8rem; margin-top: var(--bp-space-md, 1.75rem); }
.pain-list li { display: flex; gap: .7rem; align-items: flex-start; }
.pain-list .pain-ico { color: var(--bp-accent, #FF8A3D); flex: none; margin-top: 2px; }

/* ── CTA band ── */
.cta-band { background: linear-gradient(160deg, var(--bp-primary, #1F6FEB), var(--bp-primary-deep, #11406E)); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #e7f0fe; }
.cta-band .micro { font-size: .92rem; color: #e7f0fe; margin-top: 1rem; }

/* ── Form ── */
.form-shell { margin-top: var(--bp-space-md, 1.75rem); }
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.form-field { display: flex; flex-direction: column; gap: .35rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: .92rem; color: var(--bp-ink, #16202C); }
.form-field input, .form-field select, .form-field textarea {
  border: 1px solid var(--bp-line, #DCE6F0); border-radius: var(--bp-radius-sm, 9px); padding: .75rem .85rem;
  background: #fff; color: var(--bp-ink, #16202C); width: 100%; transition: border-color .18s, box-shadow .18s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--bp-primary, #1F6FEB); box-shadow: 0 0 0 3px rgba(31,111,235,.15); }
.form-field textarea { min-height: 110px; resize: vertical; }
.form-field .field-err, .form-field input.field-err, .form-field select.field-err { border-color: #d8430f; box-shadow: 0 0 0 3px rgba(216,67,15,.13); }
.form-consent { grid-column: 1 / -1; font-size: .88rem; color: var(--bp-muted, #5A6B7B); }
.form-status { grid-column: 1 / -1; padding: .8rem 1rem; border-radius: var(--bp-radius-sm, 9px); font-size: .95rem; }
.form-status.ok { background: rgba(26,160,109,.1); color: #0f6e49; border: 1px solid rgba(26,160,109,.3); }
.form-status.err { background: rgba(216,67,15,.08); color: #b4360f; border: 1px solid rgba(216,67,15,.3); }
.form-note { grid-column: 1 / -1; font-size: .88rem; color: var(--bp-muted, #5A6B7B); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Footer ── */
.site-footer { background: var(--bp-primary-deep, #11406E); color: #d7e6fb; padding: var(--bp-space-xl, 5rem) 0 1.6rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer-brand { font-family: var(--bp-font-display, sans-serif); font-weight: 800; font-size: 1.5rem; color: #fff; display: inline-flex; align-items: center; gap: .25rem; }
.footer-brand em { font-style: normal; color: #ffd4b0; }
.site-footer p { color: #b9d0ee; }
.footer-tagline { margin: .6rem 0; max-width: 36ch; }
.footer-trust { font-size: .9rem; color: #cfe0f7; font-style: italic; margin-top: .7rem; }
.footer-cta { margin-top: 1.1rem; }
.footer-h { font-family: var(--bp-font-display, sans-serif); font-weight: 700; color: #fff; margin-bottom: .7rem; font-size: 1rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.footer-links a { color: #cfe0f7; text-decoration: none; font-size: .94rem; }
.footer-links a:hover { color: #fff; }
.footer-nap { font-size: .92rem; }
.footer-address { white-space: pre-line; }
.footer-fill { color: #ffd4b0; font-style: normal; background: rgba(255,138,61,.14); border: 1px dashed rgba(255,138,61,.45); border-radius: 5px; padding: 0 .25rem; }
.footer-contact a { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.4rem; padding-top: 1.4rem; font-size: .85rem; color: #9bb8df; }
.footer-bottom a { color: #cfe0f7; }
.footer-microcopy { font-size: .82rem; color: #9bb8df; margin-top: .6rem; max-width: 90ch; }

/* ── Sticky mobile CTA bar (<=768) ── */
.sticky-mobile-cta { display: none; }

/* ── Scroll-reveal ── */
.reveal, .fade-up { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--bp-ease), transform .6s var(--bp-ease); }
.reveal.is-visible, .fade-up.is-visible { opacity: 1; transform: none; }

/* ── Misc ── */
.eyebrow-pill { display: inline-block; background: var(--bp-primary-soft, #E7F0FE); color: var(--bp-primary, #1F6FEB); font-weight: 700; font-size: .82rem; padding: .3rem .8rem; border-radius: 20px; letter-spacing: .02em; }
.muted { color: var(--bp-muted, #5A6B7B); }
.legal-prose h2 { margin-top: 2rem; }
.legal-prose h3 { margin-top: 1.4rem; }
.legal-prose ul { margin: 0 0 1rem 1.2rem; }
.legal-prose li { margin-bottom: .5rem; color: var(--bp-muted, #5A6B7B); }

/* ============================================================================
   RESPONSIVE LADDER (mobile-first; desktop-first max-width breakpoints)
   1024 / 768 / 600 / 480 / 375 — the house canonical set.
   ============================================================================ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-nap { grid-column: 1 / -1; }
  .split { grid-template-columns: 1fr; }
  .nav-links { gap: 1.05rem; }
}

/* Nav collapses to the hamburger at ≤1179px (2026-07-03 fix B3; threshold raised from 1159 after the
   panel measured a 2-row wrap in the 1160–1179px band): the 7-item nav + dropdown + CTA only fit one
   row at ≥1180px. Collapsing early keeps the hard single-row rule (factory HARD RULE 6). */
@media (max-width: 1179px) {
  /* hamburger → full-screen overlay */
  .nav-toggle { display: block; }
  .nav-overlay {
    position: fixed; inset: 0; top: 0; flex-direction: column; justify-content: flex-start;
    align-items: stretch; gap: 0; background: #fff; padding: calc(var(--bp-header-h) + 1rem) 8% 2rem;
    transform: translateX(100%); transition: transform .3s var(--bp-ease), visibility .3s; overflow-y: auto; z-index: 110;
    visibility: hidden;   /* closed overlay is out of tab order + a11y tree (2026-07-03 fix F-1) */
  }
  .nav-overlay.is-open { transform: translateX(0); visibility: visible; }
  body.nav-open { overflow: hidden; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-links > li { border-bottom: 1px solid var(--bp-line, #DCE6F0); }
  .nav-links a { padding: 1rem 0; font-size: 1.1rem; border-bottom: 0; }
  .nav-has-menu { flex-wrap: wrap; justify-content: space-between; }
  .nav-has-menu > a { flex: 1; }
  .nav-caret { padding: 1rem .4rem; }
  .nav-menu-panel {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
    width: 100%; padding: 0 0 .6rem .8rem; margin: 0; max-height: 0; overflow: hidden; transition: max-height .25s var(--bp-ease);
  }
  .nav-has-menu.is-open .nav-menu-panel { max-height: 600px; visibility: visible; }
  .nav-has-menu .nav-menu-panel { opacity: 1; }
  /* collapsed submenu links are not keyboard-focusable while hidden (2026-07-03 fix F-1) */
  .nav-has-menu:not(.is-open) .nav-menu-panel { max-height: 0; visibility: hidden; }
  .nav-has-menu.is-open .nav-caret svg { transform: rotate(180deg); }
  .nav-cta { margin-top: 1.2rem; width: 100%; }
}

@media (max-width: 768px) {
  .utility-bar-inner { justify-content: center; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .ba-cols { grid-template-columns: 1fr; }
  .compare-table { font-size: .9rem; }

  /* sticky mobile CTA bar */
  .sticky-mobile-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; gap: .5rem;
    padding: .5rem .7rem calc(.5rem + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--bp-line, #DCE6F0); box-shadow: 0 -4px 16px rgba(17,64,110,.12);
  }
  .sticky-cta-btn { flex: 1; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: var(--bp-radius-sm, 9px); font-family: var(--bp-font-display, sans-serif); font-weight: 700; text-decoration: none; }
  .sticky-cta-call { background: var(--bp-surface, #F4F8FD); color: var(--bp-primary-deep, #11406E); border: 1px solid var(--bp-line, #DCE6F0); }
  .sticky-cta-go { background: var(--bp-accent, #FF8A3D); color: var(--bp-ink, #16202C); font-weight: 700; } /* ink-on-orange 7.0:1 — white was 2.34:1 WCAG fail (2026-07-02) */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } /* reserve for the notch inset too (2026-07-03 fix F-3) */
}

@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .price-amount { font-size: 2.4rem; }
  .section { padding: var(--bp-space-lg, 3rem) 0; }
}

@media (max-width: 480px) {
  .hero h1 { max-width: none; }
  .cta-row { width: 100%; }
  .cta-row .btn, .cta-row .btn-primary, .cta-row .btn-outline, .cta-row .btn-dark { width: 100%; }
  .trade-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 375px) {
  body { font-size: .97rem; }
  .nav-logo-text { font-size: 1.28rem; }
  .price-amount { font-size: 2.2rem; }
}

/* ── Motion guard ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .fade-up { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   Phase additions — RedoLocal local build (2026-06-23). Append-only; do NOT
   modify rules above this line. Header utility-bar service-area note.
   ============================================================================ */
.utility-bar-inner { justify-content: space-between; }
.utility-area { font-size: .86rem; color: var(--bp-muted, #5A6B7B); font-weight: 600; }
@media (max-width: 600px) {
  .utility-area { display: none; }
  .utility-bar-inner { justify-content: center; }
}

/* Lead-form fields to the 48px touch-target floor (append-only, 2026-06-23). */
.form-field input, .form-field select { min-height: 48px; }

/* ============================================================================
   2026-07-03 super-audit rebuild — appended fixes.
   ============================================================================ */

/* B2: trust-strip cards are always a white surface, so their text must be ink even inside
   .section-dark (the "you own it" bullets were inheriting #d7e6fb → 1.26:1, invisible). */
.trust-strip li,
.trust-strip li span,
.section-dark .trust-strip li,
.section-dark .trust-strip li span { color: var(--bp-ink, #16202C); }

/* H-6: center the CTA in every .cta-band (the .cta-row.center class only sets text-align,
   which does nothing to flex items — the button was left-stranded on ~10 pages). */
.cta-band .cta-row { justify-content: center; }

/* M-5: center a lone trailing card in the 2-column wrap band so it isn't stranded left.
   Scoped to the width range where auto-fit yields exactly 2 columns; 3-col (≥ ~981px)
   and 1-col (≤ ~620px) layouts are untouched. */
@media (min-width: 621px) and (max-width: 980px) {
  .card-grid:has(> .card:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid:has(> .card:nth-child(3):last-child) > .card:last-child {
    grid-column: 1 / -1; max-width: 520px; margin-inline: auto;
  }
}

/* Named "approve-before-you-pay" guarantee callout (H-4) — the strongest honest proof a new
   brand controls. Restates the existing offer; makes no new promise. */
.guarantee {
  display: flex; gap: 1rem; align-items: flex-start; margin-top: var(--bp-space-md, 1.75rem);
  background: #fff; border: 2px solid var(--bp-success, #1AA06D); border-radius: var(--bp-radius, 14px);
  padding: 1.4rem 1.5rem; box-shadow: var(--bp-shadow-card);
}
.guarantee .guarantee-seal {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(26,160,109,.12); color: var(--bp-success, #1AA06D);
}
.guarantee .guarantee-seal svg { width: 26px; height: 26px; }
.guarantee h3 { color: var(--bp-primary-deep, #11406E); margin-bottom: .3rem; }
.guarantee p { color: var(--bp-ink, #16202C); margin: 0; }
.guarantee p .g-fine { color: var(--bp-muted, #5A6B7B); }
.section-dark .guarantee, .cta-band .guarantee { text-align: left; }
.section-dark .guarantee h3 { color: var(--bp-primary-deep, #11406E); }
.section-dark .guarantee p { color: var(--bp-ink, #16202C); }
@media (max-width: 480px) { .guarantee { flex-direction: column; gap: .7rem; } }

/* Founder card (H-3 / DP2) — text-forward so the pre-fill state reads well; photo slot swaps in
   Mark's real photo at launch. No stock face. */
.founder { display: grid; gap: 1.5rem; grid-template-columns: 160px 1fr; align-items: start; margin-top: var(--bp-space-md, 1.75rem); }
.founder-photo {
  width: 160px; height: 160px; border-radius: var(--bp-radius, 14px); overflow: hidden; flex: none;
  background: var(--bp-primary-soft, #E7F0FE); border: 1px solid var(--bp-line, #DCE6F0);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--bp-shadow-card);
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-photo .founder-fill { text-align: center; font-size: .72rem; font-weight: 600; color: var(--bp-muted, #5A6B7B); padding: .5rem; line-height: 1.35; }
.founder-photo .founder-pin { width: 40px; height: 40px; color: var(--bp-primary, #1B64D8); margin-bottom: .3rem; }
@media (max-width: 600px) { .founder { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* Home hero → two columns on desktop/tablet: copy left, the before/after proof shot enlarged on the
   right (was ~45% dead gradient with the proof image shrunk in the left column) (2026-07-03 fix C-2). */
.hero-copy { max-width: 60ch; }
@media (min-width: 861px) {
  .hero .hero-inner { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 4vw, 3.6rem); align-items: center; }
  .hero .hero-media { margin-top: 0; align-self: center; }
}

/* Getting-found aside: 3 stat tiles stack in the narrow aside so none is orphaned (2026-07-03 fix C-3). */
.split aside .stat-row { grid-template-columns: 1fr; }

/* Sticky header gains a subtle elevation once the page scrolls — wires the previously-dead
   `is-scrolled` flag in main.js into a real cue instead of removing it (2026-07-03 fix F-4). */
.is-scrolled .site-header { box-shadow: 0 3px 14px rgba(17, 64, 110, .12); }

/* /get-started: the lead form column comes first when .split stacks on mobile, so a form field is
   near the top instead of behind the hero + 5 trust cards (2026-07-03 fix A-2). Desktop keeps text-left
   via order on the wider layout. */
.get-started-split .form-col { order: -1; }
@media (min-width: 861px) {
  .get-started-split { grid-template-columns: 1fr 1.05fr; }
  .get-started-split .text-col { order: -1; }
  .get-started-split .form-col { order: 0; }
}