/* HVAC Marketing HQ. One stylesheet, mobile first. Light, with cool-blue and heat-orange glows. Fonts self-hosted (latin). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(fonts/Archivo-600-800.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexMono-500.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/IBMPlexMono-600.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/IBMPlexSans-400.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/IBMPlexSans-400.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/IBMPlexSans-400.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;
}
/* Type scale (rem, 16px base): 3xs 10 · 2xs 11 · xs 12 · sm 14 · md 15 · base 16 · lg 18 · xl 20 · 2xl 24 · 3xl 28 · 4xl 40. Headings use clamp().
   Spacing scale (px): 2 4 6 8 12 16 20 24 28 32 40 48 56 64 80 96. Every gap, margin and padding uses one of these. */
:root { --fs-3xs: .625rem; --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: .9375rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.75rem; --fs-4xl: 2.5rem; }
:root {
  --bg: #ffffff;
  --bg-2: #f5f8fc;
  --panel: #ffffff;
  --panel-2: #f3f6fa;
  --line: rgba(15, 23, 42, .09);
  --line-2: rgba(15, 23, 42, .15);
  --text: #0f1a2a;
  --muted: #526174;
  --cool: #0a6fc2;
  --heat: #e2551b;
  --heat-ink: #c2410c;
  --go: #0d8a57;
  --warn: #a96500;
  --grad: linear-gradient(90deg, #1d8fe0 0%, #7b6cf0 48%, #ff6a2b 100%);
  --radius: 18px;
  --radius-sm: 10px;
  --wrap: 1200px;
  --head: "Archivo", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--body); overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--heat); color: #fff; }
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.04; margin: 0 0 .5em; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.6vw, 5.4rem); font-weight: 800; font-stretch: 118%; }
h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 800; font-stretch: 115%; }
h3 { font-size: var(--fs-lg); font-weight: 700; font-stretch: 105%; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 500 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 20px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--grad); }
.lede { font-size: var(--fs-lg); color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.section { padding: 96px 0; position: relative; }
.section.tight { padding: 56px 0; }
.section.alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section.ink { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; color: #000; padding: 8px 12px; z-index: 100; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tbd { display: none; background: rgba(255, 181, 71, .14); color: var(--warn); font: 500 var(--fs-2xs)/1 var(--mono); padding: 4px 6px; border-radius: 4px; vertical-align: middle; letter-spacing: .04em; }

/* Reveal on scroll (only when JS runs) */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 var(--fs-base)/1 var(--body); text-decoration: none; cursor: pointer; padding: 16px 24px; border-radius: 999px; border: 1px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--heat-ink); color: #fff; box-shadow: 0 10px 30px -10px rgba(255, 106, 43, .6); }
.btn-primary:hover { background: #a3360a; }
.btn-ghost { border-color: var(--line-2); color: var(--text); background: rgba(15, 23, 42, .02); }
.btn-ghost:hover { border-color: var(--text); }
.btn-small { padding: 12px 20px; font-size: var(--fs-md); }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }
:focus-visible { outline: 3px solid var(--cool); outline-offset: 2px; }

/* Announcement bar */

/* Header */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font: 800 var(--fs-lg)/1 var(--head); font-stretch: 112%; letter-spacing: -.01em; }
.brand-mark { width: 40px; height: 40px; flex: none; }
@media (max-width: 700px) { .brand-mark { width: 36px; height: 36px; } }
.brand small { display: block; font: 500 var(--fs-3xs)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.nav { display: none; }
.nav-toggle { background: none; border: 1px solid var(--line-2); border-radius: 12px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--text); }
.nav-open .nav { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 70px; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 20px 24px; gap: 4px; }
.nav-group { position: relative; }
.nav-link, .nav-group > button { font: 500 var(--fs-base)/1 var(--body); color: var(--text); text-decoration: none; background: none; border: 0; padding: 12px 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; width: 100%; opacity: .86; }
.nav-link:hover, .nav-group > button:hover { opacity: 1; }
.nav-group > button svg { width: 12px; height: 12px; transition: transform .2s; }
.nav-menu { display: none; padding: 0 0 8px 12px; }
.nav-group.open .nav-menu { display: block; }
.nav-group.open > button svg { transform: rotate(180deg); }
.nav-menu a { display: block; padding: 12px 6px; text-decoration: none; }
.nav-menu a span { display: block; font-size: var(--fs-sm); color: var(--muted); }
.nav .btn { margin-top: 12px; }
@media (min-width: 1180px) {
  .nav-toggle { display: none; }
  .nav, .nav-open .nav { display: flex; flex-direction: row; align-items: center; gap: 6px; position: static; padding: 0; background: none; border: 0; }
  .nav-link, .nav-group > button { padding: 12px 12px; width: auto; white-space: nowrap; }
  .nav-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; padding: 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .16); }
  .nav-menu a { padding: 12px 12px; border-radius: 10px; }
  .nav-menu a:hover { background: var(--panel-2); }
  .nav .btn { margin: 0 0 0 12px; }
}

/* Hero */
.hero { position: relative; padding: 64px 0 80px; overflow: hidden; isolation: isolate; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; width: 720px; height: 720px; border-radius: 50%; filter: blur(110px); opacity: .32; pointer-events: none; }
.hero::before { background: var(--cool); left: -320px; top: -260px; }
.hero::after { background: var(--heat); right: -340px; top: 80px; opacity: .24; }
.hero-grid-bg { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); opacity: .6; }
.hero-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1020px) { .hero { padding: 96px 0 110px; } .hero-grid { grid-template-columns: 1.08fr .92fr; } }
.chip-top { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line-2); background: rgba(15, 23, 42, .03); border-radius: 999px; padding: 8px 16px 8px 8px; font-size: var(--fs-sm); margin-bottom: 28px; }
.chip-top i { width: 22px; height: 22px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-style: normal; font-size: var(--fs-xs); }
.hero .lede { font-size: var(--fs-lg); margin: 24px 0 32px; }
.url-form { display: flex; flex-wrap: wrap; gap: 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px; max-width: 560px; box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .16); }
.url-form label { flex: 1 1 200px; display: flex; align-items: center; gap: 12px; padding-left: 16px; min-width: 0; }
.url-form label svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.url-form input[type=text] { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: 400 var(--fs-base) var(--body); padding: 12px 0; outline: none; }
.url-form input::placeholder { color: #6b7a8f; }
.url-form:focus-within { border-color: var(--cool); }
.url-note { font-size: var(--fs-sm); color: var(--muted); margin: 16px 0 0 6px; }
@media (max-width: 520px) { .url-form { border-radius: 18px; } .url-form .btn { width: 100%; } }
.hero-points { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 32px; font-size: var(--fs-md); color: var(--muted); }
.hero-points span::before { content: "✓"; color: var(--go); font-weight: 700; margin-right: 8px; }

/* Hero visual stack */
.stack-vis { position: relative; max-width: 500px; margin: 0 auto; width: 100%; padding: 20px 0 40px; }
.rc-sample { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: 22px; padding: 24px; box-shadow: 0 40px 80px -30px rgba(15, 23, 42, .16); }
.rc-sample-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.rc-sample-head small { display: block; font: 500 var(--fs-2xs)/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
.rc-sample-head b { font: 700 var(--fs-base)/1.2 var(--head); }
.overall { width: 74px; height: 74px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 181, 71, .12); border: 1px solid rgba(255, 181, 71, .35); font: 800 var(--fs-4xl)/1 var(--head); color: var(--warn); flex: none; }
.g-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.g-row b { font: 800 var(--fs-lg)/1 var(--head); width: 30px; text-align: right; }
.g-bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(15, 23, 42, .07); overflow: hidden; }
.g-bar i { display: block; height: 100%; border-radius: 6px; }
.g-a { color: var(--go); } .g-a + .g-bar i, .bar-a { background: var(--go); }
.g-b { color: var(--cool); } .bar-b { background: var(--cool); }
.g-c { color: var(--warn); } .bar-c { background: var(--warn); }
.g-d { color: #d4461a; } .bar-d { background: #ff7a59; }
.rc-sample .fix { margin-top: 16px; font-size: var(--fs-sm); color: var(--muted); background: rgba(15, 23, 42, .03); border: 1px dashed var(--line-2); border-radius: 12px; padding: 12px 12px; }
.rc-sample .fix b { color: var(--text); }
.float { position: absolute; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border: 1px solid var(--line-2); border-radius: 16px; padding: 12px 16px; font-size: var(--fs-sm); display: flex; gap: 12px; align-items: center; box-shadow: 0 20px 50px -15px rgba(15, 23, 42, .16); animation: bob 6s ease-in-out infinite; }
.float .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.float .ic svg { width: 18px; height: 18px; }
.float b { display: block; font-weight: 600; }
.float span { color: var(--muted); font-size: var(--fs-xs); }
.float.f1 { left: -18px; bottom: 0; }
.float.f1 .ic { background: rgba(61, 220, 151, .14); color: var(--go); }
.float.f2 { right: 22%; top: -46px; animation-delay: -3s; }
.float.f2 .ic { background: rgba(71, 184, 255, .14); color: var(--cool); }
@media (max-width: 600px) { .float.f1 { left: 4px; } .float.f2 { right: 4px; top: -44px; } }
@keyframes bob { 50% { transform: translateY(-8px); } }
.sample-tag { position: absolute; right: 0; bottom: 8px; font: 500 var(--fs-2xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: #8a98ab; }

/* Works with */
.works { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; }
.works-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; }
.works-row > span:first-child { font: 500 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.works-row b { font: 700 var(--fs-base)/1 var(--head); font-stretch: 108%; color: #3a4a5e; opacity: .78; letter-spacing: -.01em; }

/* Pillars */
.pillars { display: grid; gap: 20px; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; overflow: hidden; position: relative; }
.pillar .vis { height: 130px; margin-bottom: 24px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pillar h3 { font-size: var(--fs-2xl); }
.pillar p { color: var(--muted); margin: 0; }
.pillar .big { font: 800 3rem/1 var(--head); font-stretch: 115%; }
.pillar .vis small { position: absolute; bottom: 10px; left: 12px; font: 500 var(--fs-2xs)/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.speed-bar { position: absolute; left: 14px; right: 14px; top: 26px; height: 8px; border-radius: 8px; background: rgba(15, 23, 42, .06); overflow: hidden; }
.speed-bar i { display: block; height: 100%; width: 12%; background: var(--go); border-radius: 8px; }
.rank-pin { display: flex; flex-direction: column; gap: 6px; width: 78%; }
.rank-pin div { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border-radius: 8px; padding: 8px 12px; font-size: var(--fs-xs); color: var(--muted); }
.rank-pin div.you { color: var(--text); border: 1px solid var(--cool); }
.rank-pin div b { font: 700 var(--fs-sm)/1 var(--mono); color: var(--cool); }
.cal-vis { display: grid; grid-template-columns: repeat(7, 18px); gap: 6px; }
.cal-vis i { width: 18px; height: 18px; border-radius: 5px; background: rgba(15, 23, 42, .06); }
.cal-vis i.on { background: var(--heat); }
.cal-vis i.on2 { background: rgba(255, 106, 43, .45); }

/* Pains (Sounds familiar) */
.pains { display: grid; gap: 16px; }
@media (min-width: 760px) { .pains.grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pains.grid4 { grid-template-columns: repeat(4, 1fr); } }
.pain { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.pain .x { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 106, 43, .12); color: var(--heat); display: grid; place-items: center; font-weight: 700; margin-bottom: 16px; }
.pain h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.pain p { margin: 0; color: var(--muted); font-size: var(--fs-md); }

/* Method */
.method { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .method { grid-template-columns: .9fr 1.1fr; gap: 80px; } }
.method-dia { position: relative; max-width: 440px; margin: 0 auto; width: 100%; aspect-ratio: 1; }
.method-dia svg { width: 100%; height: 100%; overflow: visible; }
.method-dia .ring { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 6; }
.method-dia .arc { fill: none; stroke-width: 10; stroke-linecap: round; opacity: .25; transition: opacity .4s; }
.method-dia .arc.lit { opacity: 1; }
.method-dia .node circle { fill: var(--panel); stroke: var(--line-2); stroke-width: 1.5; transition: stroke .4s; }
.method-dia .node.lit circle { stroke: var(--text); }
.method-dia text { fill: var(--text); font-family: var(--head); font-weight: 800; font-size: 15px; text-anchor: middle; }
.method-dia .center-t { font-size: 12px; font-family: var(--mono); font-weight: 500; fill: var(--muted); letter-spacing: .12em; }
.method-dia .center-b { font-size: 22px; }
.phase-list { display: grid; gap: 16px; }
.phase { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; transition: border-color .4s, background .4s; }
.phase.lit { border-color: var(--line-2); background: var(--panel-2); }
.phase-top { display: flex; align-items: baseline; gap: 16px; }
.phase-n { font: 600 var(--fs-xs)/1 var(--mono); color: var(--muted); }
.phase h3 { font-size: var(--fs-2xl); font-stretch: 115%; margin-bottom: 6px; }
.phase-line { color: var(--muted); margin-bottom: 16px; }
.phase .ticks { margin: 0; display: grid; gap: 2px; }
@media (min-width: 640px) { .phase .ticks { grid-template-columns: 1fr 1fr; gap: 2px 20px; } }
.phase .ticks li { font-size: var(--fs-md); }
.phase-close { font-weight: 600; margin-top: 20px; }

/* Product bento */
.bento { display: grid; gap: 20px; }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(6, 1fr); } .b-2 { grid-column: span 2; } .b-3 { grid-column: span 3; } .b-4 { grid-column: span 4; } .b-tall { grid-row: span 2; } }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 20px; min-width: 0; overflow: hidden; }
.tile h3 { margin: 0 0 4px; font-size: var(--fs-lg); }
.tile p { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.tile .mock { margin-top: auto; }
.tile-label { font: 500 var(--fs-2xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--cool); margin-bottom: 12px; display: block; }
.tile.b-tall .demo { margin-top: 6px; }
@media (min-width: 900px) { .tile.b-tall .demo { flex: 1; display: flex; flex-direction: column; } .tile.b-tall .phone { flex: 1; display: flex; } .tile.b-tall .screen { flex: 1; height: auto; min-height: 470px; } }

/* Map pack mock */
.mappack { background: #f6f7f9; color: #1f2937; border-radius: 14px; overflow: hidden; font-size: var(--fs-sm); }
.mappack .q { display: flex; align-items: center; gap: 8px; padding: 12px 12px; border-bottom: 1px solid #e5e7eb; }
.mappack .q svg { width: 14px; height: 14px; color: #6b7280; }
.mappack .mp-map { height: 92px; position: relative; background: linear-gradient(115deg, transparent 46%, #fff 46%, #fff 50%, transparent 50%), linear-gradient(25deg, transparent 60%, #fff 60%, #fff 63%, transparent 63%), #e3ecdf; }
.mp-pin { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #9aa4ae; }
.mp-pin.you { background: #ea4335; width: 22px; height: 22px; }
.mp-item { padding: 8px 12px; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.mp-item b { display: block; font-size: var(--fs-sm); }
.mp-item .stars { color: #f4a40b; }
.mp-item .sub { color: #6b7280; }
.mp-item.you { background: #eef6ff; }
.mp-item .rank { font: 700 var(--fs-2xs)/1 var(--mono); background: #1d4ed8; color: #fff; padding: 4px 6px; border-radius: 4px; white-space: nowrap; }

/* Chat mock */
.chat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 8px; font-size: var(--fs-sm); }
.chat-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-sm); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.chat-head i { width: 8px; height: 8px; border-radius: 50%; background: var(--go); }
.msg { max-width: 85%; padding: 8px 12px; border-radius: 13px; line-height: 1.4; }
.msg.bot { background: var(--panel-2); border-bottom-left-radius: 4px; }
.msg.user { background: var(--cool); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }

/* Review mock */
.review { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; font-size: var(--fs-sm); }
.review .stars { color: #f4a40b; letter-spacing: 1px; }
.review .reply { margin-top: 12px; padding: 12px; background: var(--panel-2); border-radius: 10px; color: var(--muted); }
.review .reply b { color: var(--text); }
.req { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 12px; }
.req .tag { font: 600 var(--fs-3xs)/1 var(--mono); text-transform: uppercase; color: var(--go); background: rgba(61, 220, 151, .12); padding: 6px 8px; border-radius: 5px; }

/* Demo phone (reused) */
.demo { position: relative; max-width: 340px; margin: 0 auto; width: 100%; }
.demo-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.demo-steps button { flex: 1; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: 500 var(--fs-3xs)/1.25 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.demo-steps button::before { content: ""; display: block; height: 3px; border-radius: 3px; margin-bottom: 8px; background: rgba(15, 23, 42, .1); background-image: linear-gradient(var(--heat), var(--heat)); background-repeat: no-repeat; background-size: 0 100%; }
.demo-steps button.done::before { background-size: 100% 100%; }
.demo-steps button.active { color: var(--text); }
.demo-steps button.active::before { animation: fill var(--scene-ms, 3800ms) linear forwards; }
@keyframes fill { to { background-size: 100% 100%; } }
.phone { background: #1b2433; border-radius: 40px; padding: 12px; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -30px rgba(15, 23, 42, .16); }
.screen { background: #fbfaf7; color: #12202e; border-radius: 31px; height: 470px; position: relative; overflow: hidden; }
.screen-bar { display: flex; justify-content: space-between; padding: 12px 24px 6px; font: 600 var(--fs-xs)/1 var(--body); }
.scene { position: absolute; inset: 34px 0 0; padding: 12px 16px; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.scene.on { opacity: 1; transform: none; }
.search-box { display: flex; align-items: center; gap: 8px; border: 1px solid #e1dbd0; border-radius: 999px; padding: 8px 12px; font-size: var(--fs-sm); background: #fff; }
.search-box svg { width: 15px; height: 15px; color: #5a6573; }
.map { height: 110px; margin: 12px 0; border-radius: 12px; position: relative; overflow: hidden; background: linear-gradient(115deg, transparent 46%, #fff 46%, #fff 50%, transparent 50%), linear-gradient(25deg, transparent 60%, #fff 60%, #fff 63%, transparent 63%), #e6efe4; }
.pin { position: absolute; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #b8c2cc; }
.pin.you { background: #ea4335; width: 24px; height: 24px; box-shadow: 0 0 0 6px rgba(234, 67, 53, .2); }
.result { background: #fff; border: 1px solid #e1dbd0; border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; font-size: var(--fs-sm); }
.result.you { border-color: #ea4335; box-shadow: 0 0 0 3px rgba(234, 67, 53, .12); }
.result b { display: block; font-size: var(--fs-sm); }
.stars { color: #f2a516; letter-spacing: 1px; }
.result .faint { color: #5a6573; }
.result.dim b { color: #5a6573; }
.call-card { text-align: center; padding: 20px 0 12px; }
.call-card .ring { width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 50%; background: #fde3da; display: grid; place-items: center; color: #c2410c; }
.call-card b { display: block; font-size: var(--fs-base); }
.call-card small { color: #b8401c; font: 600 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.bubble { max-width: 84%; padding: 8px 12px; border-radius: 16px; font-size: var(--fs-sm); line-height: 1.4; margin-bottom: 8px; }
.bubble.out { background: #12202e; color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.bubble.in { background: #ebe6dc; border-bottom-left-radius: 4px; }
.bubble-meta { font: 500 var(--fs-3xs)/1 var(--mono); color: #5a6573; text-align: right; margin: -2px 0 12px; }
.booked { background: #fff; border: 1px solid #e1dbd0; border-radius: 16px; padding: 16px; margin-top: 8px; }
.booked .tag { display: inline-block; font: 600 var(--fs-2xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #1d6b42; background: #e2f3ea; padding: 6px 8px; border-radius: 6px; margin-bottom: 12px; }
.booked dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: var(--fs-sm); }
.booked dt { color: #5a6573; }
.booked dd { margin: 0; font-weight: 600; }
.review-card { background: #fff; border: 1px solid #e1dbd0; border-radius: 14px; padding: 12px 12px; font-size: var(--fs-sm); margin-top: 8px; }
.review-card .reply { margin-top: 8px; padding-left: 12px; border-left: 3px solid #e1dbd0; color: #5a6573; }
.demo-caption { text-align: center; font-size: var(--fs-xs); color: var(--muted); margin-top: 12px; }

/* Dashboard mock */
.dash { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 18px; padding: 20px; min-width: 0; }
.dash-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; font-size: var(--fs-md); }
.live { font: 600 var(--fs-3xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--go); background: rgba(61, 220, 151, .12); padding: 6px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--go); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.dash-sample { margin-left: auto; font: 500 var(--fs-3xs)/1 var(--mono); color: #8a98ab; text-transform: uppercase; letter-spacing: .1em; }
.dash-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .dash-tiles { grid-template-columns: repeat(4, 1fr); } }
.dash-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.dash-tile span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }
.dash-tile b { font: 800 var(--fs-2xl)/1 var(--head); font-variant-numeric: tabular-nums; }
.dash-tile small { font-size: var(--fs-2xs); color: var(--muted); }
.dash-body { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 560px) { .dash-body { grid-template-columns: 1.2fr 1fr; } }
.dash-chart { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.dash-chart p { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 12px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; border-bottom: 1px solid var(--line); }
.bars i { flex: 1; background: linear-gradient(180deg, var(--heat), rgba(255, 106, 43, .35)); border-radius: 3px 3px 0 0; }
.dash-feed { list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); }
.dash-feed li { padding: 8px 0 8px 16px; border-bottom: 1px solid var(--line); position: relative; }
.dash-feed li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: #5b6778; }
.dash-feed li.go::before { background: var(--go); }
.dash-feed span { display: block; font: 500 var(--fs-2xs)/1.4 var(--mono); color: var(--muted); }

/* Tech / Lighthouse */
.tech { display: grid; gap: 32px; }
@media (min-width: 960px) { .tech { grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; } }
.tech-scores { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.scores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.score { position: relative; text-align: center; }
.score svg { width: 100%; max-width: 116px; margin: 0 auto; transform: rotate(-90deg); }
.score circle { fill: none; stroke-width: 3; }
.score .trk { stroke: rgba(15, 23, 42, .08); }
.score .val { stroke: var(--go); stroke-linecap: round; }
.score b { position: absolute; left: 0; right: 0; top: 0; padding-top: min(50%, 56px); transform: translateY(-.55em); font: 800 var(--fs-3xl)/1 var(--head); font-variant-numeric: tabular-nums; }
.score span { display: block; margin-top: 8px; font: 500 var(--fs-2xs)/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tech-scores .note { color: var(--muted); font-size: var(--fs-sm); margin: 20px 0 0; }
.stack { display: grid; gap: 4px; }
@media (min-width: 720px) { .stack { grid-template-columns: repeat(2, 1fr); gap: 6px 32px; } }
.stack-item { padding: 20px 0; border-top: 1px solid var(--line); }
.stack-item h3 { font-size: var(--fs-base); margin-bottom: 6px; }
.stack-item p { margin: 0; color: var(--muted); font-size: var(--fs-md); }

/* Process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .step { border-radius: 0 !important; border: 0 !important; border-right: 1px solid var(--line) !important; } .step:last-child { border-right: 0 !important; } }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; }
.step .num { display: block; font: 800 var(--fs-4xl)/1 var(--head); margin-bottom: 20px; }
.step:nth-child(1) .num { color: var(--cool); } .step:nth-child(2) .num { color: #3b6fe0; } .step:nth-child(3) .num { color: #6d5ce8; } .step:nth-child(4) .num { color: #b04fae; } .step:nth-child(5) .num { color: var(--heat); }
.step h3 { font-size: var(--fs-base); margin-bottom: 6px; }
.step p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* Report card section */
.rc-wrap { position: relative; border-radius: 28px; padding: 1px; background: var(--grad); }
.rc { display: grid; gap: 40px; align-items: start; background: var(--bg-2); border-radius: 27px; padding: 32px 24px; }
@media (min-width: 960px) { .rc { grid-template-columns: 1fr 1fr; gap: 56px; padding: 56px; } }
.grades { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
.grade { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px; display: flex; justify-content: space-between; align-items: center; }
.grade span { font-size: var(--fs-sm); color: var(--muted); }
.grade b { font: 800 var(--fs-2xl)/1 var(--head); }
.grade.blur b { filter: blur(6px); }
.rc-form { background: var(--panel); border: 1px solid var(--line-2); border-radius: 22px; padding: 28px; position: relative; }
.rc-progress { display: flex; gap: 6px; margin-bottom: 24px; }
.rc-progress i { flex: 1; height: 4px; border-radius: 4px; background: rgba(15, 23, 42, .08); }
/* One gradient across the four bars: orange on step 1, blue by step 4 */
.rc-progress i.on { background: linear-gradient(90deg, #ff6a2b 0%, #7b6cf0 55%, #1d8fe0 100%); background-size: 400% 100%; }
.rc-progress i.on:nth-child(1) { background-position: 0% 0; }
.rc-progress i.on:nth-child(2) { background-position: 33.333% 0; }
.rc-progress i.on:nth-child(3) { background-position: 66.667% 0; }
.rc-progress i.on:nth-child(4) { background-position: 100% 0; }
.rc-step { display: none; }
.rc-step.on { display: block; }
.rc-step h3 { font-size: var(--fs-2xl); margin-bottom: 6px; }
.rc-step p.muted { font-size: var(--fs-md); }
.rc-nav { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.rc-back { background: none; border: 0; color: var(--muted); cursor: pointer; font: 500 var(--fs-md) var(--body); padding: 12px 4px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; margin-bottom: 8px; font-size: var(--fs-md); }
.field .hint { font-size: var(--fs-sm); color: var(--muted); margin-top: 6px; }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], select { width: 100%; font: 400 var(--fs-base)/1.3 var(--body); padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); color: var(--text); }
input:focus, select:focus { border-color: var(--cool); outline: none; }
.consent { display: flex; gap: 12px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; margin: 4px 0 16px; }
.consent input { margin-top: 4px; flex: none; accent-color: var(--heat); }
.rc-error { color: #c62828; font-size: var(--fs-sm); min-height: 1.3em; margin: 6px 0 0; }
.rc-done { display: none; text-align: center; padding: 24px 0; }
.rc-done.on { display: block; }
.rc-done .ok { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%; background: rgba(61, 220, 151, .14); color: var(--go); display: grid; place-items: center; font-size: var(--fs-2xl); }
.rc-call { margin: 20px 0 0; font-size: var(--fs-sm); color: var(--muted); text-align: center; }
.rc-call a { color: var(--text); font-weight: 600; }
.hp { position: absolute; left: -9999px; }

/* Guarantees + transparency */
.promise { display: grid; gap: 20px; }
@media (min-width: 900px) { .promise { grid-template-columns: repeat(3, 1fr); } }
.promise .card { position: relative; overflow: hidden; }
.promise .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.promise .big { font: 800 var(--fs-4xl)/1 var(--head); font-stretch: 115%; margin-bottom: 12px; display: block; }
.promise-note { margin-top: 20px; font-size: var(--fs-sm); color: var(--muted); }
.demo-line { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; background: var(--panel); border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 20px 24px; }
.demo-line > div { flex: 1 1 280px; }

/* Generic cards and grids */
.grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .grid.two { grid-template-columns: repeat(2, 1fr); } .grid.three, .grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.three { grid-template-columns: repeat(3, 1fr); } .grid.four { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.card .icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(71, 184, 255, .1); color: var(--cool); display: grid; place-items: center; margin-bottom: 20px; }
.card .icon svg { width: 22px; height: 22px; }
.card p { color: var(--muted); }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card a.more { font-weight: 600; text-decoration: none; color: var(--cool); }
.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li { padding-left: 28px; position: relative; margin-bottom: 8px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--go); border-bottom: 2px solid var(--go); transform: rotate(-45deg); }
.split { display: grid; gap: 40px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }

/* Pricing */
.pricing { text-align: center; }
.bill-toggle { display: inline-flex; background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px; margin: 0 auto 40px; }
.bill-toggle button { border: 0; background: none; font: 600 var(--fs-md)/1 var(--body); padding: 12px 20px; border-radius: 999px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.bill-toggle button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.bill-toggle .save { font: 600 var(--fs-3xs)/1 var(--mono); background: #0f7a4f; color: #fff; padding: 4px 6px; border-radius: 5px; letter-spacing: .04em; }
.plans { display: grid; gap: 20px; text-align: left; align-items: stretch; }
@media (min-width: 720px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 28px 24px; display: flex; flex-direction: column; position: relative; }
.plan.featured { background: linear-gradient(180deg, rgba(71, 184, 255, .08), var(--panel) 40%); border-color: var(--cool); }
.plan .flag { position: absolute; top: -12px; left: 22px; background: var(--grad); color: #fff; font: 600 var(--fs-2xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: 8px 12px; border-radius: 6px; }
.plan h3 { font-size: var(--fs-xl); margin: 0 0 6px; }
.plan .scope { font: 500 var(--fs-xs)/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.plan .price { font: 800 var(--fs-4xl)/1 var(--head); font-stretch: 112%; margin: 20px 0 6px; }
.plan .price small { font: 500 var(--fs-md)/1 var(--body); color: var(--muted); }
.plan .billing { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 16px; min-height: 1.4em; }
.plan .billing b { color: var(--go); }
.pricing[data-billing="annual"] .when-monthly, .pricing[data-billing="monthly"] .when-annual { display: none; }
.plan .for { color: var(--muted); font-size: var(--fs-md); min-height: 4.4em; }
.plan .ticks li { font-size: var(--fs-md); }
.plan .build { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: var(--fs-sm); color: var(--muted); }
.plan .btn { margin-top: 16px; }
.teaser { text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.teaser:hover { border-color: var(--line-2); }
.addons, .compare { margin-top: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; text-align: left; }
.addons-list { display: grid; gap: 4px 28px; margin-top: 12px; }
@media (min-width: 720px) { .addons-list { grid-template-columns: repeat(2, 1fr); } }
.addon { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
.addon b { white-space: nowrap; }
.table-wrap { overflow-x: auto; margin-top: 12px; }
.compare table { width: 100%; border-collapse: collapse; min-width: 540px; font-size: var(--fs-md); }
.compare th, .compare td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 600 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.compare td { color: var(--muted); }
.compare thead th:last-child, .compare td:last-child { color: var(--text); font-weight: 600; background: rgba(71, 184, 255, .06); }
.compare tbody th { font-weight: 600; width: 26%; }

/* Calculator */
.calc { display: grid; gap: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 1fr; padding: 40px; } }
.money { position: relative; }
.money::before { content: "$"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.money input { padding-left: 28px; }
.calc-out { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.calc-out .big { font: 800 clamp(2.6rem, 6vw, 3.8rem)/1 var(--head); font-stretch: 112%; }
.calc-out .row:nth-child(1) .big { color: var(--cool); } .calc-out .row:nth-child(2) .big { color: var(--heat); } .calc-out .row:nth-child(3) .big { color: #6d5ce8; }
.calc-out .row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.calc-out p { margin: 6px 0 0; color: var(--muted); }

/* FAQ (numbered) */
.faq { counter-reset: q; }
.faq details { border-top: 1px solid var(--line); padding: 24px 0; counter-increment: q; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font: 700 var(--fs-lg)/1.35 var(--head); cursor: pointer; list-style: none; display: grid; grid-template-columns: 44px 1fr 24px; gap: 8px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: counter(q, decimal-leading-zero); font: 500 var(--fs-sm)/1 var(--mono); color: var(--muted); }
.faq summary::after { content: "+"; font: 400 var(--fs-2xl)/1 var(--body); color: var(--cool); text-align: right; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 12px 0 0 56px; color: var(--muted); max-width: 70ch; }

/* Final CTA */
.final { text-align: center; position: relative; overflow: hidden; isolation: isolate; }
.final::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 900px; height: 500px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(71, 184, 255, .22), transparent), radial-gradient(closest-side at 70% 50%, rgba(255, 106, 43, .2), transparent); filter: blur(30px); }
.final h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.final .url-form { margin: 32px auto 0; }
.final .url-note { margin-left: 0; }

/* Inner page head */
.page-head { padding: 80px 0 48px; position: relative; overflow: hidden; isolation: isolate; }
.page-head::before { content: ""; position: absolute; z-index: -1; width: 600px; height: 600px; border-radius: 50%; background: var(--cool); filter: blur(120px); opacity: .18; left: -260px; top: -300px; }
.page-head h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
.page-head .lede { margin-bottom: 0; }
.crumbs { font: 500 var(--fs-xs)/1 var(--mono); color: var(--muted); margin-bottom: 20px; text-transform: uppercase; letter-spacing: .1em; }
.crumbs a { text-decoration: none; }
.scenario { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--heat); border-radius: 0 var(--radius) var(--radius) 0; padding: 24px 28px; }

/* Legal */
.legal { max-width: 760px; }
.legal h2 { font-size: var(--fs-2xl); margin-top: 2em; }
.legal li { margin-bottom: 6px; }
.legal p, .legal li { color: #2a3646; }
.draft-note { background: rgba(255, 181, 71, .1); border: 1px solid rgba(255, 181, 71, .3); color: var(--warn); padding: 12px 16px; border-radius: 12px; font-size: var(--fs-sm); margin-bottom: 28px; }

/* Footer */
.site-foot { border-top: 1px solid var(--line); color: var(--muted); padding: 64px 0 32px; font-size: var(--fs-md); background: var(--bg); }
.foot-grid { display: grid; gap: 32px; }
.foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.foot-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1fr; } .foot-grid > :first-child { grid-column: auto; } }
.site-foot .brand { color: var(--text); }
.site-foot .foot-h { color: var(--text); font: 600 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 16px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 8px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--text); }
.foot-word { font: 800 clamp(1.6rem, 7.2vw, 6rem)/1.12 var(--head); padding-bottom: .06em; font-stretch: 125%; letter-spacing: -.03em; margin: 56px 0 0; background: linear-gradient(180deg, rgba(15, 23, 42, .14), rgba(15, 23, 42, .02)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; overflow: hidden; }
.foot-base { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* ---- Trust terms, report card checks, first 90 days, fit (rsgonzales study) ---- */
.hero-alt { margin: 16px 0 0; font-size: var(--fs-md); color: var(--muted); }
.hero-alt a { color: var(--text); }
.terms-wrap { padding-top: 28px; }
.terms-strip { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 860px) { .terms-strip { grid-template-columns: repeat(4, 1fr); } }
.terms-strip li { display: flex; align-items: center; gap: 12px; padding: 16px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); font-size: var(--fs-sm); font-weight: 600; }
.terms-strip li::before { content: ""; flex: none; width: 10px; height: 6px; border-left: 2px solid var(--go); border-bottom: 2px solid var(--go); transform: rotate(-45deg) translateY(-2px); }
.plan .stage { margin: 8px 0 16px; font: 500 var(--fs-xs)/1.3 var(--mono); color: var(--cool); text-transform: uppercase; letter-spacing: .06em; }
.crosses { list-style: none; padding: 0; margin: 0 0 1em; }
.crosses li { padding-left: 28px; position: relative; margin-bottom: 8px; }
.crosses li::before, .crosses li::after { content: ""; position: absolute; left: 3px; top: .72em; width: 12px; height: 2px; background: var(--heat); transform: rotate(45deg); }
.crosses li::after { transform: rotate(-45deg); }
.wont { margin-top: 20px; padding: 28px; border: 1px dashed var(--line); border-radius: var(--radius); }
.wont h3 { margin-bottom: 4px; }
.wont .crosses { display: grid; gap: 2px 24px; margin: 16px 0 0; }
@media (min-width: 720px) { .wont .crosses { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wont .crosses { grid-template-columns: repeat(4, 1fr); } }
.how-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .how-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .how-list { grid-template-columns: repeat(4, 1fr); } }
.how { position: relative; padding: 24px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(71,184,255,.06), transparent); border: 1px solid var(--line); }
.how .who { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 99px; font: 600 var(--fs-xs)/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; background: rgba(71,184,255,.12); color: var(--cool); }
.how:nth-child(2) .who { background: rgba(255,106,43,.12); color: var(--heat); }
.how h3 { font-size: var(--fs-base); margin-bottom: 6px; }
.how p { margin: 0; font-size: var(--fs-md); color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--grad); opacity: .7; }
.tl { position: relative; padding: 0 0 24px 40px; }
.tl::before { content: ""; position: absolute; left: 4px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--cool); }
.tl:nth-child(n+3)::before { border-color: #9b8cff; } .tl:nth-child(n+5)::before { border-color: var(--heat); }
.tl .day { display: block; font: 600 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
.tl h3 { font-size: var(--fs-base); margin-bottom: 4px; }
.tl p { margin: 0; font-size: var(--fs-md); color: var(--muted); max-width: 46ch; }
@media (min-width: 980px) {
  .timeline { grid-template-columns: repeat(6, 1fr); gap: 20px; }
  .timeline::before { left: 8px; right: 8px; top: 11px; bottom: auto; width: auto; height: 2px; }
  .tl { padding: 32px 0 0; }
  .tl::before { left: 0; top: 4px; }
}
.fit .card h3 { margin-bottom: 16px; }
.replaces { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .replaces { grid-template-columns: 1fr 1fr; gap: 56px; } }
.replace-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.replace-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.replace-list li span { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(255,106,43,.75); color: var(--muted); }
.replace-list li b { font: 600 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--cool); }
.moneyback { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 28px; border-radius: var(--radius); background: linear-gradient(90deg, rgba(61,220,151,.1), rgba(61,220,151,.02)); border: 1px solid rgba(61,220,151,.35); }
.moneyback .big { font: 800 var(--fs-4xl)/1 var(--head); font-stretch: 115%; color: var(--go); }
.moneyback h3 { margin-bottom: 4px; }
.moneyback p { margin: 0; color: var(--muted); max-width: 62ch; }

/* ---- Service page depth ---- */
.persona .ticks { margin-top: 16px; }
.persona .ticks li { font-size: var(--fs-md); }
@media (min-width: 980px) { .timeline.t5 { grid-template-columns: repeat(5, 1fr); } }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: f; }
@media (min-width: 760px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .flow { grid-template-columns: repeat(4, 1fr); } }
.flow-step { position: relative; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.flow-step .n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; margin-bottom: 16px; font: 700 var(--fs-md)/1 var(--head); color: var(--bg); background: var(--grad); }
.flow-step h3 { font-size: var(--fs-base); margin-bottom: 4px; }
.flow-step p { margin: 0; font-size: var(--fs-md); color: var(--muted); }
.ai-card .chat { display: grid; gap: 12px; }
.ai-card .msg { padding: 12px 16px; border-radius: 14px; font-size: var(--fs-md); max-width: 92%; }
.ai-card .msg.user { justify-self: end; background: rgba(71,184,255,.16); }
.ai-card .msg.bot { background: var(--panel-2); color: var(--muted); }
.ai-card .msg.bot b { color: var(--text); }
.auto-panel { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.auto-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); font: 500 var(--fs-sm)/1 var(--mono); color: var(--muted); }
.auto-head i { width: 8px; height: 8px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 4px rgba(61,220,151,.15); }
.auto-panel ul { list-style: none; margin: 0; padding: 6px 0; }
.auto-panel li { display: grid; grid-template-columns: 1fr auto 1.3fr auto; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.auto-panel li:last-child { border-bottom: 0; }
.auto-panel .trig { font-weight: 600; }
.auto-panel .act { color: var(--muted); }
.auto-panel .arrow-r { color: var(--cool); }
.auto-panel .on { font: 600 var(--fs-2xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: 6px 8px; border-radius: 99px; color: var(--go); background: rgba(61,220,151,.12); }
@media (max-width: 520px) { .auto-panel li { grid-template-columns: 1fr auto; } .auto-panel .arrow-r { display: none; } .auto-panel .act { grid-column: 1; grid-row: 2; } .auto-panel .on { grid-row: 1 / span 2; grid-column: 2; } }
.attr .attr-t { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--muted); }
.attr ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.attr li { display: grid; grid-template-columns: 9.5em 1fr 3em; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.attr li b { text-align: right; font-family: var(--mono); font-weight: 600; }
.attr-bar { height: 10px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.attr-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); }

/* ---- Founder video bubble ---- */
.fv { position: fixed; left: 18px; bottom: 18px; z-index: 60; }
.fv.hide { display: none; }
.fv-bubble { display: flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); color: var(--text); cursor: pointer; box-shadow: 0 12px 40px rgba(0,0,0,.45); font: inherit; text-align: left; }
.fv-bubble img, .fv-bubble .fv-play { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.fv-play { position: relative; display: block; background: var(--grad); }
.fv-play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.fv-bubble img + .fv-label, .fv-label { display: flex; flex-direction: column; font-size: var(--fs-sm); color: var(--muted); line-height: 1.3; }
.fv-label b { color: var(--text); font-size: var(--fs-md); }
.fv-bubble:hover { border-color: var(--cool); }
.fv-x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }
.fv-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: 22px; background: var(--panel); color: var(--text); overflow: hidden; }
.fv-dialog::backdrop { background: rgba(3,6,12,.72); }
.fv-dialog video { display: block; width: 100%; aspect-ratio: 9 / 14; max-height: 70vh; background: #000; object-fit: cover; }
.fv-dialog .btn { display: flex; justify-content: center; margin: 16px; }
.fv-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 20px; cursor: pointer; }
.fv-empty { display: grid; place-items: center; gap: 16px; text-align: center; aspect-ratio: 9 / 12; padding: 32px; background: radial-gradient(circle at 30% 20%, rgba(71,184,255,.18), transparent 60%), radial-gradient(circle at 80% 90%, rgba(255,106,43,.18), transparent 60%), var(--bg-2); }
.fv-empty .fv-play { width: 72px; height: 72px; border-radius: 50%; }
.fv-empty p { margin: 0; color: var(--muted); }
.fv-empty b { color: var(--text); }
@media (max-width: 600px) { .fv { left: 12px; bottom: 12px; } .fv-label { display: none; } .fv-bubble { padding: 6px; } .fv-bubble img, .fv-bubble .fv-play { width: 52px; height: 52px; } }

/* ---- Report card sample screens ---- */
.rcs { display: grid; gap: 16px; }
@media (min-width: 760px) { .rcs { grid-template-columns: repeat(2, 1fr); } .rcs-wide { grid-column: 1 / -1; } }
.rcs-card { padding: 24px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); }
.rcs-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font: 600 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.rcs-top b { font: 800 var(--fs-2xl)/1 var(--head); }
.rcs-sub { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--muted); }
.rcs-grade { display: flex; gap: 20px; align-items: center; margin: 12px 0 16px; }
.rcs-grade .overall { flex: none; }
.rcs-grade p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-md); max-width: 70ch; }
.rcs-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.rcs-areas span { display: inline-flex; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: var(--fs-sm); }
.rcs-areas b { font: 800 var(--fs-base)/1 var(--head); }
.rcs-rows { list-style: none; margin: 0; padding: 0; }
.rcs-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.rcs-rows li span { color: var(--muted); }
.rcs-rows b { font-family: var(--mono); font-weight: 600; }
.rcs-rows b.ok, .rcs-dirs .ok { color: var(--go); }
.rcs-rows b.bad { color: #d4461a; }
.rcs-fix { margin: 16px 0 0; padding: 12px 12px; border-radius: 10px; background: rgba(255,181,71,.08); border: 1px dashed rgba(255,181,71,.35); font-size: var(--fs-sm); color: var(--muted); }
.rcs-fix b { color: var(--warn); }
.rcs-vs { display: grid; grid-template-columns: 4.5em 1fr; gap: 6px 12px; align-items: center; margin-bottom: 12px; font-size: var(--fs-sm); }
.rcs-vs span { grid-row: span 2; color: var(--muted); }
.rcs-vs div { position: relative; height: 18px; border-radius: 6px; background: var(--panel-2); }
.rcs-vs div i { display: block; height: 100%; border-radius: 6px; background: var(--cool); }
.rcs-vs div.them i { background: #6b7a90; }
.rcs-vs em { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 600 var(--fs-xs)/1 var(--mono); font-style: normal; color: var(--text); text-shadow: 0 1px 2px rgba(15, 23, 42, .16); }
.rcs-legend { display: flex; gap: 16px; align-items: center; margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.rcs-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cool); margin-right: -8px; }
.rcs-legend i.them { background: #6b7a90; }
.rcs-dirs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rcs-dirs span { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,106,43,.6); }
.rcs-dirs span.ok { text-decoration: none; border-color: rgba(61,220,151,.35); background: rgba(61,220,151,.08); }

/* ---- Location pages ---- */
.page-head .url-form { margin-top: 28px; max-width: 560px; }
.cfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .cfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cfact { padding: clamp(16px, 4vw, 20px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.cfact span { display: block; font: 500 var(--fs-xs)/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.cfact b { display: block; margin: 12px 0 4px; font: 800 clamp(1.45rem, 6.4vw, 2rem)/1 var(--head); font-stretch: 110%; }
.cfact small { color: var(--muted); font-size: var(--fs-sm); }
.csrc { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.clic { margin: 24px 0 0; padding: 16px 20px; border-left: 3px solid var(--heat); background: rgba(255,106,43,.06); border-radius: 0 12px 12px 0; color: var(--muted); }
.clic b { color: var(--text); font-size: var(--fs-lg); }
.town-list { columns: 2; column-gap: 24px; }
.city-links { display: flex; flex-wrap: wrap; gap: 8px; }
.city-links a { padding: 8px 16px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; color: var(--text); font-size: var(--fs-sm); background: var(--panel); }
.city-links a:hover { border-color: var(--cool); }
.city-links a.all { color: var(--cool); }
.city-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .city-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .city-grid { grid-template-columns: repeat(4, 1fr); } }
.city-card { display: block; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-decoration: none; color: var(--text); }
.city-card:hover { border-color: var(--cool); }
.city-card b { display: block; font-size: var(--fs-base); }
.city-card span { font-size: var(--fs-sm); color: var(--muted); }
.loc-state h2 a { color: inherit; text-decoration: none; }
.loc-next { margin-top: 28px; padding: 28px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.loc-next p { color: var(--muted); max-width: 60ch; }

/* ---- Guides ---- */
.g-wrap { max-width: 820px; }
.g-meta { margin-top: 20px; font-size: var(--fs-sm); color: var(--muted); }
.g-take { padding: 24px 28px; border-radius: var(--radius); border: 1px solid rgba(71,184,255,.3); background: rgba(71,184,255,.06); }
.g-take h2 { font-size: var(--fs-lg); margin-bottom: 12px; }
.g-take .ticks { margin: 0; }
.g-toc { margin: 24px 0 8px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.g-toc b { display: block; margin-bottom: 8px; font: 600 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.g-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.g-toc a { color: var(--text); text-decoration: none; } .g-toc a:hover { color: var(--cool); }
.g-body { font-size: var(--fs-base); line-height: 1.7; }
.g-body h2 { margin: 48px 0 16px; font-size: clamp(1.45rem, 3vw, 1.9rem); scroll-margin-top: 90px; }
.g-body p, .g-body li { color: #2a3646; }
.g-body ol { padding-left: 24px; } .g-body ol li { margin-bottom: 12px; }
.g-body b { color: var(--text); }
.g-body a:not(.btn) { color: var(--cool); }
.g-body .table-wrap { margin: 20px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.g-body table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.45; min-width: 620px; }
.g-body th, .g-body td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.g-body th { font: 600 var(--fs-xs)/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--panel); }
.g-note { padding: 16px 20px; border-left: 3px solid var(--go); background: rgba(61,220,151,.06); border-radius: 0 12px 12px 0; }
.g-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0; padding: 24px 24px; border-radius: var(--radius); border: 1px solid var(--line-2); background: linear-gradient(90deg, rgba(71,184,255,.08), rgba(255,106,43,.08)); }
.g-cta p { margin: 4px 0 0; font-size: var(--fs-md); color: var(--muted); }
.g-src { font-size: var(--fs-sm); padding-left: 20px; }
.guide-card { text-decoration: none; color: var(--text); display: block; }
.guide-card:hover { border-color: var(--cool); }
.guide-card .eyebrow { margin-bottom: 12px; }
.guide-card h3 { margin-bottom: 8px; }

/* Mega menus (Services, For HVAC) */
.nav-mega .mega-h { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; font: 600 var(--fs-2xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.nav-mega .mega-h i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(10, 111, 194, .1); color: var(--cool); }
.nav-mega .mega-h svg { width: 14px; height: 14px; }
.nav-menu .nav-all { font-weight: 600; color: var(--cool); border-top: 1px solid var(--line); margin-top: 6px; }
.nav-open .nav { max-height: calc(100vh - 70px); overflow-y: auto; }
@media (min-width: 1180px) {
  .nav-open .nav { max-height: none; overflow: visible; }
  .head-row { position: relative; }
  .nav-group { position: static; }
  .nav-mega { width: min(1100px, calc(100vw - 40px)); left: auto; right: 0; padding: 16px; }
  .nav-mega .mega { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 12px; }
  .nav-mega .mega-h { margin: 6px 12px 6px; }
  .nav-wide { width: min(640px, 100%); left: auto; right: 0; padding: 12px; }
  .nav-wide .nav-two { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
  .nav-menu .nav-all { margin-top: 8px; padding-top: 16px; border-radius: 0 0 10px 10px; }
}

/* Services overview (home + /services) */
.svc-group ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; }
.svc-group li a { display: block; padding: 12px 12px; margin: 0 -12px; border-radius: 10px; text-decoration: none; }
.svc-group li a:hover { background: var(--panel-2); }
.svc-group li b { display: block; font-weight: 600; }
.svc-group li span { display: block; font-size: var(--fs-sm); color: var(--muted); }
.nav-menu .nav-all .arrow { display: inline; font-size: inherit; color: inherit; }

/* Worth it if / Skip it if */
.fit .fit-yes h3 { color: var(--go); }
.fit .fit-no h3 { color: var(--heat-ink, var(--heat)); }

/* Homeowner path (home) */
.path { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .path { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .path { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .path { grid-template-columns: repeat(6, 1fr); } }
.path-step { position: relative; padding: 20px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.path-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px; background: rgba(10, 111, 194, .1); color: var(--cool); }
.path-ic svg { width: 20px; height: 20px; }
.path-ph { display: block; font: 600 var(--fs-2xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px; }
.path-step[data-ph="book"] .path-ic { background: rgba(226, 85, 27, .1); color: var(--heat); }
.path-step[data-ph="repeat"] .path-ic { background: rgba(13, 138, 87, .1); color: var(--go); }
.path-step h3 { font-size: var(--fs-base); margin-bottom: 4px; }
.path-step p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.city-links { line-height: 2; }

/* Author byline and box (guides) */
.g-by { display: flex; align-items: center; gap: 12px; }
.g-by img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.author-box { display: flex; gap: 20px; align-items: flex-start; margin-top: 40px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.author-box img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.author-box b { display: block; font: 700 var(--fs-base)/1.2 var(--head); }
.author-box span { display: block; font-size: var(--fs-sm); color: var(--muted); margin: 2px 0 8px; }
.author-box p { margin: 0; font-size: var(--fs-md); }
.city-links-by-state p { line-height: 2; margin: 0 0 12px; }

/* ---- Depth layer (Oct 14): glows, textures, shadows and two dark bands so sections read as distinct blocks ---- */
main > .section { overflow-x: clip; isolation: isolate; }
main > .section:not(.alt):not(#report-card):nth-of-type(odd)::before,
main > .section:not(.alt):not(#report-card):nth-of-type(even)::before {
  content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; filter: blur(110px); opacity: .10; pointer-events: none; top: 8%;
}
main > .section:not(.alt):not(#report-card):nth-of-type(odd)::before { background: var(--heat); right: -280px; }
main > .section:not(.alt):not(#report-card):nth-of-type(even)::before { background: var(--cool); left: -280px; }
.section.alt, .section.ink {
  background:
    radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1.2px) 0 0 / 22px 22px,
    linear-gradient(180deg, #eef4fb 0%, #f7f9fc 55%, #fbf6f2 100%);
}
.page-head { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #f4f8fd 0%, #fff 100%); }
.page-head::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 20% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 20% 0%, #000 0%, transparent 70%); }
.page-head .wrap::after { content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; border-radius: 50%; background: var(--heat); filter: blur(120px); opacity: .10; right: -160px; top: -120px; pointer-events: none; }
.page-head .wrap { position: relative; }
.card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 30px -18px rgba(15, 23, 42, .18); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.card:hover, .card.guide-card:hover { transform: translateY(-3px); border-color: rgba(10, 111, 194, .35); box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 22px 40px -20px rgba(10, 111, 194, .35); }
.section.alt .card { background: rgba(255, 255, 255, .92); }
.flow-step, .cfact, .city-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 26px -18px rgba(15, 23, 42, .18); }

/* Dark band: the report card closes most pages */
#report-card {
  --bg-2: #121d30; --panel: #182640; --panel-2: #1c2b47; --text: #eef2f7; --muted: #a6b3c6; --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .18); --cool: #5cb6ff;
  background: radial-gradient(600px 380px at 12% 0%, rgba(29, 143, 224, .30), transparent 70%), radial-gradient(560px 360px at 95% 100%, rgba(255, 106, 43, .26), transparent 70%), #0c1524;
  color: var(--text); border-top: 1px solid #0c1524;
}
#report-card input, #report-card select, #report-card textarea { background: #0f1a2c; color: var(--text); border-color: var(--line-2); }
#report-card input::placeholder { color: #7f8da3; }
#report-card .rc-progress i { background: rgba(255, 255, 255, .12); }

/* Dark footer grounds every page */
.site-foot { --text: #eef2f7; --muted: #9aa8bb; --line: rgba(255, 255, 255, .09); background: #0a1220; border-top: 0; color: var(--muted); }
.site-foot .foot-word { background: linear-gradient(180deg, rgba(238, 242, 247, .16), rgba(238, 242, 247, .02)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about-head { display: grid; gap: 40px; align-items: end; }
@media (min-width: 900px) { .about-head { grid-template-columns: 1.4fr 1fr; } }
.about-photo { margin: 0; position: relative; max-width: 380px; }
.about-photo img { width: 100%; height: auto; aspect-ratio: 8 / 7; object-fit: cover; object-position: 50% 23%; border-radius: 24px; box-shadow: 0 40px 80px -36px rgba(15, 23, 42, .45); }
.about-photo figcaption { position: absolute; left: 16px; bottom: 16px; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; display: grid; }
.about-photo figcaption span { font-size: var(--fs-sm); color: var(--muted); }
.about-note { font-size: var(--fs-lg); max-width: 64ch; }
.about-sign { font: 700 var(--fs-lg)/1.3 var(--head); margin-top: 28px; }
.about-sign span { font: 400 var(--fs-md) var(--body); color: var(--muted); }
.read-more { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.read-more a { color: var(--cool); font-weight: 600; text-decoration: none; }
.read-more a::after { content: " →"; }
.mtable { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; font-size: var(--fs-md); }
.mtable th, .mtable td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mtable th { font: 600 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); background: var(--panel-2); }
.mtable tr:last-child td { border-bottom: 0; }

/* ---- Rhythm layer: one deliberate navy band per page, scoped vars like #report-card ---- */
.section.dark {
  --bg: #101826; --bg-2: #142036; --panel: #17233a; --panel-2: #1c2a45; --text: #eef2f7; --muted: #a9b6c8;
  --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .20); --cool: #6cc4ff; --heat: #ff8a5c; --go: #4fd69c; --warn: #f2b65c;
  background: radial-gradient(640px 400px at 0% 0%, rgba(71, 184, 255, .20), transparent 70%), radial-gradient(560px 380px at 100% 100%, rgba(255, 106, 43, .18), transparent 70%), #101826;
  color: var(--text); border: 0;
}
main > .section.dark::before { display: none; }
.section.dark .card, .section.dark .pain, .section.dark .flow-step, .section.dark .cfact, .section.dark .city-card { box-shadow: none; background: var(--panel); }
.section.dark .pain { border-top: 2px solid rgba(255, 138, 92, .55); }
.section.dark .pain .x { background: rgba(255, 138, 92, .14); }
.section.dark .mtable { background: var(--panel); }
.section.dark .btn-ghost { background: rgba(255, 255, 255, .04); }
.section.dark .btn-ghost:hover { border-color: var(--text); }
.section.dark a:not(.btn):not(.card) { color: var(--text); }
.section.dark .eyebrow { color: #c3cedc; }
.section.dark .grad { background: linear-gradient(90deg, #47b8ff 0%, #ff6a2b 100%); -webkit-background-clip: text; background-clip: text; }
.section.dark .moneyback { background: linear-gradient(90deg, rgba(79, 214, 156, .12), rgba(79, 214, 156, .03)); border-color: rgba(79, 214, 156, .35); }
.section.dark .clic { background: rgba(255, 138, 92, .08); }
.section.dark .wont { border-color: var(--line-2); }

/* Tinted band: a clearer step from white than before */
.section.alt, .section.ink {
  background:
    radial-gradient(rgba(15, 23, 42, .06) 1px, transparent 1.2px) 0 0 / 22px 22px,
    linear-gradient(180deg, #e8f0fa 0%, #f1f5fb 60%, #f9efe8 100%);
}

/* Next step: the closing CTA on pages that don't carry the form (guides, posts) */
.next-step { text-align: left; }
.next-step .ns { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .next-step .ns { grid-template-columns: 1.4fr 1fr; gap: 56px; } }
.next-step h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: .3em; }
.next-step .ns-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.next-step .ns-list { list-style: none; margin: 0; padding: 24px 24px; border: 1px solid var(--line-2); border-radius: var(--radius); background: rgba(255, 255, 255, .03); display: grid; gap: 12px; }
.next-step .ns-list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; color: var(--muted); font-size: var(--fs-md); }
.next-step .ns-list b { color: var(--text); font: 600 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }

/* Merged "keep going" block: related reading and services in one band */
.keep { display: grid; gap: 40px; }
@media (min-width: 900px) { .keep { grid-template-columns: 1.5fr 1fr; gap: 56px; } }
.keep h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.keep .guide-card + .guide-card { margin-top: 16px; }
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.link-list a { display: block; padding: 16px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--text); }
.link-list a b { display: block; font: 700 var(--fs-base)/1.2 var(--head); }
.link-list a span { font-size: var(--fs-sm); color: var(--muted); }
.link-list a:hover b { color: var(--cool); }
.more-row { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.more-row h3 { font-size: var(--fs-xs); font: 600 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 16px; }

/* Report card pop-up (opened from the hero URL box) */
.rc-modal { border: 0; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border-radius: 18px; background: #fff; color: var(--ink, #101826); box-shadow: 0 30px 80px rgba(16, 24, 38, .35); }
.rc-modal::backdrop { background: rgba(16, 24, 38, .62); backdrop-filter: blur(3px); }
.rc-modal-in { position: relative; padding: 28px 28px 24px; }
.rc-modal-in h2 { font-size: var(--fs-2xl); margin: 6px 0 6px; }
.rc-modal-in > .muted { margin: 0 0 16px; font-size: var(--fs-md); }
.rc-modal .rc-form { box-shadow: none; border: 0; padding: 0; background: none; }
.rc-modal-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #eef2f7; color: #101826; font-size: var(--fs-2xl); line-height: 1; cursor: pointer; }
.rc-modal-x:hover { background: #dfe6ef; }
@media (max-width: 480px) { .rc-modal-in { padding: 24px 20px 20px; } }

/* Personal results page (/your-report): one job, book the call */
.yr-page { background: var(--bg-2); }
.yr-top { position: sticky; top: 0; z-index: 20; background: rgba(16, 24, 38, .96); color: #eef2f7; backdrop-filter: blur(6px); }
.yr-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.yr-top .brand { color: #eef2f7; }
.yr-top .brand small { color: #9fb0c6; }
.g-f { color: #b91c1c; } .g-na { color: var(--muted); }
.yr-hero { background: #101826; color: #eef2f7; padding: 56px 0 64px; position: relative; overflow: hidden; }
.yr-hero::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 620px; height: 620px; background: radial-gradient(closest-side, rgba(255, 106, 43, .22), transparent); pointer-events: none; }
.yr-hero .eyebrow { color: #ffb38f; }
.yr-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.12; margin: 12px 0 16px; max-width: 22ch; }
.yr-hero .lede { color: #c9d4e3; max-width: 60ch; }
.yr-hero .muted { color: #9fb0c6; }
.yr-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; position: relative; }
.yr-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.yr-cta .muted { font-size: var(--fs-md); max-width: 34ch; }
.yr-overall { background: #fff; color: var(--text); border-radius: 18px; padding: 24px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.yr-overall small { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.yr-overall > b { display: block; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 4.4rem; line-height: 1; margin: 6px 0 2px; }
.yr-overall > span { color: var(--muted); font-size: var(--fs-md); }
.yr-overall ul { list-style: none; margin: 16px 0 6px; padding: 0; text-align: left; }
.yr-overall li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-md); }
.yr-overall li b { font-weight: 800; }
.yr-overall .muted { color: var(--muted); font-size: var(--fs-sm); margin: 6px 0 0; }
.yr-body { padding: 56px 0 24px; }
.yr-body .wrap, .yr-close .wrap { max-width: 860px; }
.yr-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 6px; }
.yr-head p { color: var(--muted); margin: 0 0 28px; }
.yr-area { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); }
.yr-weak { border-color: rgba(194, 65, 12, .45); box-shadow: 0 10px 30px rgba(194, 65, 12, .12); }
.yr-area-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.yr-g { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: var(--fs-4xl); line-height: 1; min-width: 2.2ch; }
.yr-area h3 { margin: 0; font-size: var(--fs-xl); }
.yr-score { color: var(--muted); font-size: var(--fs-sm); }
.yr-saw, .yr-fixes { margin: 0 0 16px; }
.yr-saw span, .yr-fixes > span { display: block; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.yr-fixes ol { margin: 0; padding-left: 20px; }
.yr-fixes li { margin: 4px 0; }
.yr-ok { color: #15803d; font-weight: 600; margin: 0; }
.yr-how { background: var(--panel-2); border-left: 4px solid #c2410c; border-radius: 10px; padding: 16px 16px; }
.yr-how h4 { margin: 0 0 4px; font-size: var(--fs-base); }
.yr-how p { margin: 0; color: #334155; font-size: var(--fs-base); }
.yr-band { display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; background: #101826; color: #eef2f7; border-radius: 18px; padding: 28px; margin: 28px 0 32px; }
.yr-band h3 { color: #fff; margin: 0 0 6px; font-size: var(--fs-xl); }
.yr-band p { margin: 0; color: #c9d4e3; max-width: 52ch; }
.yr-close { padding: 40px 0 64px; text-align: center; }
.yr-close h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.yr-steps { list-style: none; counter-reset: s; padding: 0; margin: 24px auto 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.yr-steps li { counter-increment: s; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.yr-steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #101826; color: #fff; font-weight: 700; margin-bottom: 12px; }
.yr-steps b { display: block; margin-bottom: 4px; }
.yr-fine { font-size: var(--fs-sm); max-width: 60ch; margin: 20px auto 0; }
.yr-foot { background: #101826; color: #9fb0c6; font-size: var(--fs-sm); padding: 24px 0; }
@media (max-width: 820px) {
  .yr-hero-in { grid-template-columns: 1fr; gap: 28px; }
  .yr-steps { grid-template-columns: 1fr; }
  .yr-hero { padding: 40px 0 48px; }
}
.site-foot { position: relative; }
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #47b8ff, #ff6a2b); opacity: .55; }

/* Town suggestions in the report card form */
.field:has(.town-suggest) { position: relative; }
.town-suggest { display: block; position: absolute; z-index: 5; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: 0 14px 34px rgba(15, 23, 42, .16); max-height: 264px; overflow-y: auto; }
.town-suggest[hidden] { display: none; }
.town-suggest li { display: block; padding: 12px 12px; border-radius: 7px; cursor: pointer; color: #0f1a2a; font-size: var(--fs-base); }
.town-suggest li b { font-weight: 600; }
.town-suggest li[aria-selected="true"], .town-suggest li:hover { background: #eef4fb; }
#report-card .town-suggest { background: #0f1a2c; border-color: var(--line-2); }
#report-card .town-suggest li { color: var(--text); }
#report-card .town-suggest li[aria-selected="true"], #report-card .town-suggest li:hover { background: rgba(255, 255, 255, .08); }

/* Results page: what happens after the phone rings */
.yr-ops { background: var(--bg-2); padding-bottom: 56px; margin-top: 32px; }
.yr-ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.yr-ops-grid > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px 20px; }
.yr-ops-grid h4 { margin: 0 0 6px; font-size: var(--fs-base); }
.yr-ops-grid p { margin: 0; color: var(--muted); font-size: var(--fs-md); }
@media (max-width: 640px) { .yr-ops-grid { grid-template-columns: 1fr; } }

/* Results page: Rank, Book, Repeat */
.yr-method { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -24px; position: relative; z-index: 2; max-width: 860px; }
.yr-method a { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--text); text-decoration: none; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.yr-method a b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #c2410c; color: #fff; font-size: var(--fs-xs); }
.yr-step { display: inline-block; font: 700 var(--fs-xs)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #c2410c; margin-bottom: 12px; }
.yr-pillar { margin-top: 24px; padding-bottom: 56px; }
.yr-pillar-saw { background: #fff; border: 1px solid var(--line); border-left: 4px solid #c2410c; border-radius: 10px; padding: 12px 16px; margin: 0 0 20px; }
.yr-tag { display: inline-block; margin-left: 6px; font: 600 var(--fs-2xs)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); border-radius: 5px; padding: 4px 6px; vertical-align: middle; }
.yr-fixes li { margin: 8px 0 12px; }
.yr-fix-t { display: block; }
.yr-fix-h { display: block; margin-top: 4px; color: #9a3412; font-size: var(--fs-md); }
.yr-close-lede { max-width: 620px; margin: 6px auto 20px; color: var(--muted); }
.yr-plan li { text-align: left; }
@media (max-width: 640px) { .yr-method { margin-top: 16px; } }
.billing .or-monthly { font-weight: 400; color: var(--muted); font-size: .85em; }
.founding { margin: 0 auto 24px; max-width: 760px; text-align: center; padding: 12px 20px; border: 1px solid rgba(255, 106, 43, .35); background: rgba(255, 106, 43, .07); border-radius: 14px; font-size: var(--fs-md); }
.founding-n { display: inline-block; margin-left: 6px; padding: 2px 12px; border-radius: 99px; background: #ff6a2b; color: #fff; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.founder-sec { padding-top: 0; }
.founder { display: flex; gap: 24px; align-items: center; max-width: 820px; margin: 0 auto; padding: 24px 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
.founder img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.founder-q { margin: 0 0 8px; font-size: var(--fs-base); line-height: 1.5; }
.founder-by { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 600px) { .founder { flex-direction: column; text-align: center; } }

/* Design pass, Oct 15 2026: spacing rhythm, group headings, locations jump nav */
.section.after-head { padding-top: 56px; }
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .section.tight { padding: 48px 0; }
  .section.after-head { padding-top: 40px; }
  .section-head { margin-bottom: 40px; }
}
/* A labelled group of cards inside one section (states, tool groups): space above, tight to its own cards */
.group + .group, .group + .loc-next { margin-top: 80px; }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.group-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0; }
.group-head h2 a { color: inherit; text-decoration: none; }
.group-head h2 a:hover { color: var(--cool); }
.group-head .muted { font-size: var(--fs-md); }
.group-head .group-more { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--cool); text-decoration: none; }
@media (max-width: 720px) { .group + .group, .group + .loc-next { margin-top: 56px; } .group-head .group-more { margin-left: 0; flex-basis: 100%; } }
.loc-state { scroll-margin-top: 96px; }
.state-jump { margin-bottom: 56px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.state-jump .foot-h { display: block; font: 600 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 16px; }
.state-jump div { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.state-jump a { font-size: var(--fs-sm); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--text); background: var(--bg); }
.state-jump a:hover { border-color: var(--cool); color: var(--cool); }
/* Service groups: an odd last card spans the row instead of sitting alone */
@media (min-width: 720px) { .svc-groups > .svc-group:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Report card band: headline sized for its half-width column */
.rc h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
/* Home demo step labels: two rows of two on narrow phones instead of four cramped columns */
@media (max-width: 420px) { .demo-steps { flex-wrap: wrap; row-gap: 12px; } .demo-steps button { flex: 1 1 calc(50% - 6px); } }
@media (min-width: 720px) { .svc-groups > .svc-group:last-child:nth-child(odd) ul { grid-template-columns: repeat(3, 1fr); column-gap: 28px; } }
.city-card .m-br { display: none; }
.city-card i { font-style: normal; }
@media (max-width: 520px) { .city-card .m-br { display: inline; } .city-card i { display: none; } }
@media (max-width: 720px) { .state-jump div { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px; padding: 0 24px 4px; scrollbar-width: none; } .state-jump a { flex: none; } .state-jump { margin-bottom: 40px; } }
.city-card span { display: block; line-height: 1.5; margin-top: 2px; }
@media (max-width: 720px) { .state-jump { overflow: hidden; } }

/* Design pass 2, Oct 15 2026 */
/* Hero: two clean lines, sized so "Book every call." never wraps on desktop */
.hero-h1 { font-size: clamp(2.5rem, 8.2vw, 4.25rem); }
@media (min-width: 600px) { .hero-h1 span { display: block; white-space: nowrap; } }
/* Report card grades: clear amber instead of brown, crisp solid card */
.g-c { color: #c47a00; } .bar-c { background: #f2a516; }
.overall { color: #c47a00; background: #fff7e8; border-color: #f6c86d; }
.rc-sample { background: #fff; border-color: rgba(15, 23, 42, .12); }
/* Floating chips: no backdrop blur (it re-renders every frame and stutters); GPU transform only */
.float { backdrop-filter: none; background: #fff; will-change: transform; animation-name: bob3d; }
@keyframes bob3d { 50% { transform: translate3d(0, -6px, 0); } }
/* Home missed-call phone: a little shorter, centered in its card */
@media (min-width: 900px) { .tile.b-tall .demo { flex: 0 0 auto; margin-top: 24px; margin-bottom: auto; } .tile.b-tall .phone { flex: 0 0 auto; display: block; } .tile.b-tall .screen { height: 540px; min-height: 0; } }
/* Bento mocks sit under their copy instead of being pushed to the card bottom */
.tile .mock { margin-top: 4px; }
/* Nav: plain dropdowns (Resources) open under their own button; an invisible bridge keeps hover alive across the gap */
@media (min-width: 1180px) {
  .nav-group:has(> .nav-menu:not(.nav-mega):not(.nav-wide)) { position: relative; }
  .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -36px; height: 36px; }
}
/* Coast to coast: "All locations" closes out the last row at the right edge */

/* Report card band: the form card sits centered against the taller copy column */
@media (min-width: 960px) { .rc { align-items: center; } }
/* Cards on white: a firmer edge at rest, a small lift on hover for anything clickable */
.section:not(.dark):not(.alt) .card { border-color: rgba(15, 23, 42, .11); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px -14px rgba(15, 23, 42, .22); }
@media (hover: hover) {
  .card, .city-card, .tile { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
  .card:hover, .city-card:hover { transform: translateY(-3px); border-color: rgba(10, 111, 194, .35); box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 22px 40px -18px rgba(15, 23, 42, .28); }
  .section.dark .card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .22); box-shadow: none; }
}
/* Service pages: "How it works" as a connected timeline, so it no longer looks like the problem cards above it */
.timeline-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.tl-step { position: relative; padding-left: 56px; }
.tl-step .n { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 var(--fs-base)/1 var(--head); color: #fff; background: var(--grad); box-shadow: 0 0 0 6px var(--bg); }
.tl-step::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: -28px; width: 2px; background: var(--line-2); }
.tl-step:last-child::before { display: none; }
.tl-step h3 { font-size: var(--fs-lg); margin: 8px 0 6px; }
.tl-step p { margin: 0; color: var(--muted); font-size: var(--fs-md); max-width: 34ch; }
@media (min-width: 900px) {
  .timeline-steps { grid-template-columns: repeat(var(--n, 4), 1fr); gap: 32px; }
  .tl-step { padding-left: 0; padding-top: 64px; }
  .tl-step::before { left: 48px; right: -32px; top: 19px; bottom: auto; width: auto; height: 2px; }
}
/* Service pages: "What you get" as two clean cards */
.get-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .get-grid { grid-template-columns: 1.4fr 1fr; } .get-grid.solo { grid-template-columns: 1fr; max-width: 760px; } }
.card.included .ticks { margin: 0; display: grid; gap: 4px 28px; }
@media (min-width: 640px) { .card.included .ticks { grid-template-columns: 1fr 1fr; } }
.card.related h3 { font-size: var(--fs-xs); font: 600 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px; }
.card.related ul { list-style: none; margin: 0; padding: 0; }
.card.related li + li { border-top: 1px solid var(--line); }
.card.related a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.4; }
.card.related a::after { content: "→"; color: var(--cool); flex: none; }
.card.related a:hover { color: var(--cool); }
.section-head .lede .more { white-space: nowrap; margin-left: 4px; }
.fit-inner { margin-top: 80px; }
/* Footer brand never wraps */
.site-foot .brand span { white-space: nowrap; }
.phase .phase-close { font-size: var(--fs-md); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }

/* Calculator results hand off to the report card */
.calc-next { display: block; margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; font-size: var(--fs-sm); color: var(--cool); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.calc-next:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(15, 23, 42, .4); }

/* ---- Design pass 3, Oct 15 2026 ---- */
/* Grades read like a report card: B green, C amber, D red-orange */
/* Hero sits closer to the terms strip */
.hero { padding-bottom: 48px; }
@media (min-width: 1020px) { .hero { padding-bottom: 56px; } }
.terms-wrap { padding-top: 0; }
.hero-alt { margin-top: 20px; }

/* Realistic phone */
.phone { background: #0b0f16; border-radius: 40px; padding: 8px; border: 1px solid #2a3342; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .45), inset 0 0 0 2px #1c2330; }
.screen { background: #fff; border-radius: 32px; }
.island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 76px; height: 22px; border-radius: 12px; background: #0b0f16; z-index: 2; }
.screen-bar { padding: 12px 24px 4px; font: 600 var(--fs-xs)/1 var(--body); color: #111; }
.sb-icons { display: inline-flex; gap: 6px; align-items: center; }
.sb-icons .sig { width: 14px; height: 8px; background: linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 6px, transparent 6px 8px, #111 8px 10px, transparent 10px 12px, #111 12px 14px); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.sb-icons .bat { width: 20px; height: 9px; border: 1.5px solid #111; border-radius: 3px; position: relative; }
.sb-icons .bat::after { content: ""; position: absolute; inset: 1px 5px 1px 1px; background: #111; border-radius: 1px; }
.scene { inset: 36px 0 0; padding: 8px 12px; }
.search-box { border-color: #dadce0; box-shadow: 0 1px 3px rgba(60, 64, 67, .2); border: 0; }
.map { height: 128px; margin: 8px -12px 4px; border-radius: 0; background: #eef0f3; }
.map .gmap, .mp-map .gmap { display: block; width: 100%; height: 100%; }
.bubble.out { background: #0a84ff; }
.bubble.in { background: #e9e9eb; color: #111; }

/* Google-style local pack rows */
.lp-item { display: flex; justify-content: space-between; gap: 8px; padding: 8px 4px; border-bottom: 1px solid #ebedf0; font-size: var(--fs-xs); color: #3c4043; line-height: 1.45; }
.lp-item b { display: block; font-size: var(--fs-sm); color: #1a0dab; font-weight: 500; }
.lp-item.you b { font-weight: 600; }
.lp-meta { display: block; }
.lp-meta i { font-style: normal; color: #fbbc04; letter-spacing: -1px; }
.lp-meta .open { color: #188038; } .lp-meta .closed { color: #d93025; }
.lp-acts { display: flex; gap: 6px; align-items: flex-start; }
.lp-acts span { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #dadce0; display: grid; place-items: center; color: #1a73e8; }
.lp-acts svg { width: 13px; height: 13px; }
.mappack { background: #fff; border: 1px solid #e3e6ea; }
.mappack .q { border-bottom: 1px solid #ebedf0; }
.mappack .lp-item { padding: 10px 12px; }
.mappack .lp-item.you { background: #f4f8fe; }
.mappack .mp-map { height: auto; min-height: 120px; background: #eef0f3; }

/* System block: phone tile is copy + steps on the left, phone on the right */
@media (min-width: 900px) {
  .tile.b-phone { display: grid; grid-template-columns: minmax(0, 1fr) 248px; grid-template-rows: auto 1fr; column-gap: 28px; row-gap: 0; }
  .b-phone .demo { display: contents; }
  .b-phone-copy { grid-column: 1; grid-row: 1; }
  .b-phone .demo-steps { grid-column: 1; grid-row: 2; flex-direction: column; align-self: end; gap: 16px; margin: 0; }
  .b-phone .demo-steps button { font-size: var(--fs-2xs); }
  .b-phone .phone { grid-column: 2; grid-row: 1 / 3; }
  .tile.b-phone .screen { height: 500px; }
  .tile.b-map .mock { flex: 1; display: flex; }
  .tile.b-map .mappack { flex: 1; display: flex; flex-direction: column; }
  .tile.b-map .mp-map { flex: 1; }
}
.b-phone .demo-caption { margin-top: 12px; font-size: var(--fs-xs); color: var(--muted); }

/* Home pricing teaser: anchor the price, sell on the plans page */
.pt-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .pt-grid { grid-template-columns: repeat(4, 1fr); } }
.pt-card { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); text-decoration: none; color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); transition: transform .2s, box-shadow .2s, border-color .2s; }
.pt-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(15, 23, 42, .35); border-color: var(--cool); }
.pt-card.featured { border-color: var(--cool); box-shadow: 0 0 0 3px rgba(71, 184, 255, .15); }
.pt-name { font: 700 var(--fs-base)/1.2 var(--head); }
.pt-price { font: 800 var(--fs-3xl)/1 var(--head); }
.pt-price small { font: 500 var(--fs-sm) var(--body); color: var(--muted); }
.pt-stage { font-size: var(--fs-sm); color: var(--muted); }
.pt-note { text-align: center; margin: 16px 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* Free download box */
.magnet { display: grid; gap: 24px; align-items: center; padding: 32px; border-radius: 22px; border: 1px solid var(--line-2); background: linear-gradient(120deg, rgba(71, 184, 255, .08), rgba(255, 106, 43, .08)), var(--panel); box-shadow: 0 20px 40px -32px rgba(15, 23, 42, .4); }
@media (min-width: 900px) { .magnet { grid-template-columns: 1.1fr 1fr; gap: 40px; padding: 40px; } }
.magnet h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 8px 0 8px; }
.magnet-copy p { margin: 0; color: var(--muted); }
.magnet-form { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.magnet-form input:not(.hp) { width: 100%; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 12px; font: inherit; background: #fff; }
.magnet-form .btn { grid-column: 1 / -1; justify-content: center; }
.magnet-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.magnet-fine, .magnet-msg { grid-column: 1 / -1; margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.magnet-msg { font-size: var(--fs-sm); color: var(--text); }
.magnet-msg a { color: var(--cool); font-weight: 600; }
.magnet-form.sent input, .magnet-form.sent .btn, .magnet-form.sent .magnet-fine { display: none; }
.g-body .magnet { margin: 40px 0; }
.b-phone .phone { align-self: start; }

/* ---- Design pass 4, Oct 15 2026 ---- */
/* Grades follow the brand scale: blue (A) through purple (C) to orange (D/F). No yellow. */
.g-a { color: #1d6fd8; } .bar-a, .g-a + .g-bar i { background: #47b8ff; }
.g-b { color: #4f5bd5; } .bar-b { background: #7b8cff; }
.g-c { color: #7c3aed; } .bar-c { background: #a78bfa; }
.g-d { color: #e0531f; } .bar-d { background: #ff7a45; }
.g-f { color: #c2410c; }
.overall { color: #7c3aed; background: #f4effe; border-color: #d9c8fc; }
.section.dark .g-a, #report-card .g-a { color: #6cc4ff; }
.section.dark .g-b, #report-card .g-b { color: #9aa8ff; }
.section.dark .g-c, #report-card .g-c { color: #c4b0ff; }
.section.dark .g-d, #report-card .g-d, .section.dark .g-f, #report-card .g-f { color: #ff8a5c; }

/* Phone block: copy and steps sit as one group, centred against the phone */
@media (min-width: 900px) {
  .tile.b-phone { grid-template-rows: auto auto; align-content: center; align-items: start; row-gap: 28px; }
  .b-phone .demo-steps { align-self: start; gap: 12px; }
  .b-phone .demo-steps button { width: 100%; }
  .b-phone .phone { align-self: center; }
  .tile.b-phone .screen { height: 460px; }
}
.demo-steps button { min-width: 0; }

/* Team band and HQ feature grid */
.team-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-pt { padding: 24px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); border-top: 3px solid; border-image: linear-gradient(90deg, var(--cool), var(--heat)) 1; }
.team-pt h3 { margin: 0 0 8px; font-size: var(--fs-lg); }
.team-pt p, .feat p { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.feat h3 { margin: 0 0 8px; font-size: var(--fs-base); }

/* Phone block v2: each step carries one line, so copy + steps fill the phone's height with no dead space */
.demo-steps button span { display: none; }
@media (min-width: 900px) {
  .tile.b-phone { grid-template-rows: auto 1fr; align-content: stretch; row-gap: 20px; }
  .b-phone .demo-steps { align-self: end; gap: 18px; }
  .b-phone .demo-steps button { font-size: var(--fs-2xs); }
  .b-phone .demo-steps button span { display: block; margin-top: 4px; font: 400 var(--fs-sm)/1.4 var(--body); text-transform: none; letter-spacing: 0; color: var(--muted); }
  .b-phone .phone { align-self: start; }
  .b-phone .demo-caption { margin-top: 8px; }
}
@media (min-width: 900px) {
  .tile.b-map .mp-map { flex: 1 1 0; min-height: 140px; overflow: hidden; }
  .tile.b-map .mp-map svg { width: 100%; height: 100%; object-fit: cover; }
  .b-phone .phone { align-self: center; grid-row: 1 / 3; }
  .b-phone .demo-caption { text-align: left; }
}

/* Top hook bar: one hook at a time, fades every few seconds, pauses on hover; static with reduced motion */
.hookbar { position: relative; height: 40px; background: #0b1220; overflow: hidden; }
.hookbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); opacity: .8; }
.hook { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; color: #e8eef6; text-decoration: none; font-size: var(--fs-sm); opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; white-space: nowrap; }
.hook.on { opacity: 1; visibility: visible; }
.hook b { font-weight: 500; }
.hook .arrow { color: #ff8a5c; transition: transform .2s; }
.hook:hover .arrow { transform: translateX(3px); }
.hook:hover b { text-decoration: underline; text-underline-offset: 3px; }
.hook-s { display: none; font-weight: 500; }
@media (max-width: 700px) { .hook b { display: none; } .hook-s { display: inline; } }
.mtable-h { margin: 32px 0 16px; }

/* ---- Mobile pass for owners in the field (Oct 15) ---- */
.nowrap { white-space: nowrap; }
.lede-short { display: none; }
.hero-home { padding-bottom: 0; }
.hero-home .terms-wrap { padding-top: 48px; }
.hero-home .terms-strip { margin-bottom: 40px; }
@media (min-width: 1020px) { .hero-home { padding-bottom: 0; } .hero-home .terms-wrap { padding-top: 64px; } .hero-home .terms-strip { margin-bottom: 56px; } }
.m-cta { display: none; }
@media (max-width: 700px) {
  .hide-m { display: none !important; }
  .section { padding: 52px 0; }
  .section.tight { padding: 40px 0; }
  .section.dark + .section.hide-m + .section.dark { border-top: 1px solid rgba(255, 255, 255, .08); }
  /* Hero: headline, one line of value, the form. No mockup. */
  .hero-home { padding-top: 28px; }
  .hero-home .stack-vis { display: none; }
  .hero-home .hero-grid { gap: 0; }
  .hero-h1 { font-size: clamp(1.9rem, 9.4vw, 2.5rem); }
  .hero-home .chip-top { margin-bottom: 16px; }
  .hero-home .lede { font-size: var(--fs-md); margin: 14px 0 20px; }
  .hero-home .lede-long { display: none; }
  .hero-home .lede-short { display: inline; }
  .hero-home .hero-alt { margin-top: 12px; }
  .hero-home .terms-wrap { padding-top: 24px; }
  .hero-home .terms-strip { margin-bottom: 28px; gap: 8px; }
  .terms-strip li { padding: 10px 12px; gap: 10px; font-size: var(--fs-xs); border-radius: 12px; }
  /* Pains: icon beside the title, tighter cards */
  .pains { gap: 10px; }
  .pain { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; padding: 16px 18px; }
  .pain .x { width: 28px; height: 28px; margin: 0; grid-row: span 2; border-radius: 8px; font-size: .8rem; }
  .pain h3 { font-size: var(--fs-base); margin-bottom: 4px; }
  .pain p { font-size: var(--fs-sm); }
  /* What runs behind it: keep the missed-call demo and the dashboard, text only for the rest */
  .bento { gap: 12px; }
  .tile { padding: 20px; gap: 14px; border-radius: 18px; }
  .tile.b-map .mock, .tile.b-2 .mock, .tile.b-3:not(.b-phone) .mock { display: none; }
  .b-phone .demo-caption { display: none; }
  /* Missed-call demo: one row of four bars, only the current step named under it */
  .demo-steps { flex-wrap: nowrap; row-gap: 0; gap: 6px; min-height: 30px; margin-bottom: 14px; }
  .demo-steps button { flex: 1 1 0; font-size: 0; white-space: nowrap; }
  .demo-steps button.active { font-size: var(--fs-3xs); }
  .demo-steps button:nth-child(n+3) { direction: rtl; text-align: right; }
  .section.dark .demo-steps button::before { background-color: rgba(255, 255, 255, .16); }
  /* The tech: four small dials in a row */
  .tech-scores { padding: 18px; }
  .scores { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .score b { font-size: var(--fs-lg); }
  .score span { font-size: 9px; letter-spacing: .04em; }
  .tech-scores .note { font-size: var(--fs-xs); margin-top: 14px; }
  /* Founder: photo beside the quote */
  .founder { flex-direction: row; text-align: left; gap: 16px; padding: 18px; align-items: flex-start; }
  .founder img { width: 56px; height: 56px; }
  .founder-q { font-size: var(--fs-md); }
  /* Guarantees: one compact row each, number then promise */
  .promise { gap: 10px; }
  .promise .card { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; padding: 16px 18px; }
  .promise .big { font-size: var(--fs-xl); margin: 0; }
  .promise .card p { font-size: var(--fs-sm); margin: 0; }
  .moneyback { padding: 18px; gap: 12px; }
  .moneyback .big { font-size: var(--fs-2xl); }
  .moneyback h3 { font-size: var(--fs-base); }
  .moneyback p { font-size: var(--fs-sm); }
  .dash-feed { display: none; }
  /* Cities: six plus the full list */
  .loc-band .city-links a:nth-child(n+7):not(:last-child) { display: none; }
  /* Report card: headline and form only */
  #report-card .grades, #report-card .rc-note { display: none; }
  #report-card .rc { gap: 20px; }
  #report-card .lede { font-size: var(--fs-md); }
  #report-card .rc { padding: 24px 18px; }
  /* Footer: the columns an owner needs */
  .foot-grid > :nth-child(4), .foot-grid > :nth-child(5) { display: none; }
  .foot-word { display: none; }
  /* Icon cards: icon beside the title, not stacked above it */
  .grid { gap: 12px; }
  .card:has(> .icon:first-child) { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; padding: 18px; }
  .card:has(> .icon:first-child) > .icon { grid-row: span 3; width: 36px; height: 36px; margin: 0; }
  .card:has(> .icon:first-child) > :not(.icon) { grid-column: 2; }
  .card:has(> .icon:first-child) h3 { font-size: var(--fs-base); margin-bottom: 4px; }
  .card:has(> .icon:first-child) p { font-size: var(--fs-sm); margin: 0; }
  /* Sticky report card button once they scroll past the hero */
  .m-cta { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; justify-content: center; align-items: center; gap: 8px; padding: 15px 18px; border-radius: 14px; background: #c2410c; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px rgba(15, 23, 42, .3); transform: translateY(160%); transition: transform .25s ease; }
  .m-cta.show { transform: none; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .m-cta { transition: none; } }
/* Contact form and text consent (A2P 10DLC) */
.contact-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; } }
.contact-form h2 { font-size: var(--fs-xl); margin: 0 0 16px; }
.contact-form textarea { width: 100%; font: inherit; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); resize: vertical; }
.contact-msg { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.contact-form.sent .field, .contact-form.sent .consent-set, .contact-form.sent .cf-turnstile, .contact-form.sent button { display: none; }
.contact-side h2 { font-size: var(--fs-xl); margin: 0 0 16px; }
.contact-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.contact-facts b { display: block; font: 600 var(--fs-xs)/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 4px; }
.consent-set { border: 0; margin: 4px 0 16px; padding: 0; }
.consent-set .consent { margin: 0 0 8px; }
.consent-note { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }