/* Stay Open Sites public pages. Manrope, indigo. Fluid at every width. No external files. */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("/static/fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("/static/fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("/static/fonts/manrope-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url("/static/fonts/manrope-latin-800-normal.woff2") format("woff2"); }

:root {
  --ink: #111827; --body: #374151; --muted: #4b5563; --soft-ink: #6b7280; --line: #e5e7eb;
  --brand: #c62828; --brand-dark: #a31f1f; --tint: #fbf4ef; --night: #16181d; --sun: #fff59a; --ink-blue: #1d3fb8;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.6; color: var(--ink); background: #ffffff; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
a:focus-visible { outline: 3px solid #f5b400; outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Nav and footer */
.nav-in { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { flex: none; }
.brand-words { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-weight: 800; font-size: 20px; letter-spacing: -.2px; }
.brand-tag { font-size: 12.5px; color: var(--muted); }
.nav { border-bottom: 3px solid var(--brand); }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; font-weight: 600; }
.nav-links a { color: var(--body); text-decoration: none; }
.nav-links a.nav-email { color: var(--brand); }
.footer-in { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 26px; padding-bottom: 26px; font-size: 14px; color: var(--soft-ink); }
.footer-links { display: flex; gap: 18px; }
.footer a { color: var(--soft-ink); }

/* Home: letter code box, first thing on the page */
.letter { background: var(--night); color: #fff; }
.letter-in { padding-top: 28px; padding-bottom: 30px; display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; justify-content: space-between; }
.letter-copy { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.letter h2 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; font-weight: 800; letter-spacing: -.3px; }
.letter-copy p { color: #d1d5db; font-size: 16px; overflow-wrap: anywhere; }
.letter-copy b { color: #fde68a; }
.find { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.find-label { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fca5a5; }
.find-row { display: flex; gap: 8px; }
.find input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 20px; font-weight: 700; letter-spacing: 2px; padding: 0 16px; min-height: 58px; border-radius: 10px; border: 2px solid #fff; background: #fff; color: var(--ink); }
.find input:focus { outline: 3px solid #f5b400; outline-offset: 2px; }
.find button { flex: 0 0 auto; font: inherit; font-weight: 800; font-size: 17px; min-height: 58px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; cursor: pointer; }
.find button:hover { background: var(--brand-dark); }
.find-help, .find-miss { font-size: 14px; color: #d1d5db; overflow-wrap: anywhere; }
.find-miss { background: #7f1d1d; color: #fff; border-radius: 8px; padding: 10px 12px; }
.find a { color: #fff; }

/* Home: hero and the three panels */
.hero { background: var(--tint); }
.hero-in { padding-top: 64px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 40px; }
.hero-copy { display: flex; flex-direction: column; gap: 18px; text-align: left; align-items: flex-start; }
.hero h1 { font-size: clamp(36px, 5.4vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -1.2px; max-width: 640px; }
.offer { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.offer li { background: #fff; border: 1.5px solid #e7ddd3; border-radius: 999px; padding: 7px 14px; font-size: 15px; color: var(--body); }
.offer strong { color: var(--ink); font-weight: 800; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; border-radius: 10px; font-weight: 800; font-size: 17px; text-decoration: none; }
.cta-main { background: var(--brand); color: #fff; flex: 1 1 240px; }
.cta-main:hover { background: var(--brand-dark); color: #fff; }
.cta-alt { background: #fff; color: var(--ink); border: 2px solid var(--ink); flex: 0 1 auto; }
.cta-alt:hover { color: var(--ink); background: #f3efe9; }
.lede { font-size: clamp(17px, 2vw, 19px); line-height: 1.6; color: var(--muted); max-width: 620px; }
.panels { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.panel { flex: 1 1 300px; background: #ffffff; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 16px rgba(17, 24, 39, .06); }
.panel-good { border: 2px solid var(--brand); box-shadow: 0 8px 24px rgba(198, 40, 40, .15); }
.panel-label { font-size: 13px; font-weight: 800; color: var(--soft-ink); letter-spacing: 1px; }
.panel-bad { color: #b91c1c; }
.panel-ok { color: var(--brand); }
.panel-name { font-size: 20px; font-weight: 800; }
.panel-meta { font-size: 14px; color: var(--soft-ink); }
.panel-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pill { border: 1px solid #d1d5db; color: var(--body); border-radius: 999px; text-align: center; padding: 9px 0; font-size: 14px; font-weight: 600; }
.pill-on { border: 2px solid var(--brand); color: var(--brand); font-weight: 700; }
.panel-note { font-size: 14px; color: var(--muted); line-height: 1.5; }
.dead { flex-grow: 1; background: #f3f4f6; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px; text-align: center; color: #6b7280; }
.dead-title { font-size: 16px; font-weight: 700; color: var(--body); }
.dead-sub { font-size: 13px; color: var(--soft-ink); }
.mini { flex-grow: 1; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); }
.mini-top { background: #1f2937; color: #ffffff; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.mini-name { font-size: 16px; font-weight: 800; }
.mini-call { background: #fbbf24; color: var(--ink); font-size: 13px; font-weight: 800; border-radius: 6px; padding: 8px 0; text-align: center; }
.mini-lines { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.mini-lines span { display: block; height: 7px; background: var(--line); border-radius: 4px; }
.mini-lines .w70 { width: 70%; }
.mini-lines .w90 { width: 90%; }
.mini-lines .w50 { width: 50%; }

/* Desktop: words on the left, the listing and the two phones on the right */
@media (min-width: 980px) {
  .hero-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
  .hero .panels { margin: 0; }
  .hero .phone { max-width: 210px; }
}

/* Home: listing strip, then the two phones side by side, like the letter */
.panels { flex-direction: column; flex-wrap: nowrap; max-width: 860px; margin: 0 auto; width: 100%; }
.panel-list { flex: none; }
.list-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.list-row .panel-pills { flex: 1 1 260px; max-width: 380px; }
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel-phone { padding: 14px; gap: 10px; flex: none; }
.panel-phone .panel-label { font-size: 11.5px; }
.phone { border: 6px solid #111; border-radius: 22px; overflow: hidden; aspect-ratio: 1 / 2; background: #fff; }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.chrome-bar { background: #f1f3f4; border-bottom: 1px solid #dadce0; padding: 8px; font-size: 11px; color: #3c4043; display: flex; gap: 6px; align-items: center; overflow: hidden; white-space: nowrap; }
.chrome-dot { width: 10px; height: 10px; border: 2px solid #5f6368; border-radius: 50%; flex: none; }
.chrome-body { padding: 26% 12px 12px; display: flex; flex-direction: column; gap: 8px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.chrome-title { font-size: 15px; color: #202124; line-height: 1.25; }
.chrome-sub { font-size: 11.5px; color: #5f6368; line-height: 1.4; }
.panel-phone .panel-note { font-size: 13px; }
@media (min-width: 700px) { .phone { width: 100%; max-width: 250px; margin: 0 auto; } .panel-phone { padding: 22px; } .phones { gap: 24px; } .chrome-title { font-size: 20px; } .chrome-sub { font-size: 13px; } .panel-phone .panel-label { font-size: 13px; } }

/* Home: who we are, for the owner checking us out */
@font-face { font-family: "Kalam"; font-weight: 700; font-display: swap; src: url("/static/fonts/home-kalam-latin-700-normal.woff2") format("woff2"); }
.real { background: #fff; border-bottom: 1px solid var(--line); }
.real-in { padding-top: 64px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 36px 56px; align-items: flex-start; }
.real-note { flex: 0 1 300px; background: var(--sun); padding: 22px 22px 16px; transform: rotate(-2.5deg); box-shadow: 0 10px 18px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.18); font-family: "Kalam", cursive; color: var(--ink-blue); margin: 0 auto; }
.real-hand { font-size: 26px; line-height: 1.2; }
.real-sign { font-size: 26px; text-align: right; margin-top: 8px; }
.real-copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.real h2 { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -.5px; }
.real-copy > p { color: var(--body); }
.real-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.real-list li { position: relative; padding-left: 34px; color: var(--body); }
.real-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #16a34a; }
.real-list li::after { content: ""; position: absolute; left: 8px; top: 7px; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.real-list strong { color: var(--ink); }
.real-mail { font-weight: 700; }
@media (max-width: 600px) { .real-in { padding-top: 48px; padding-bottom: 48px; } .real-note { margin: 0 8px; } }

/* Home: how it works, three cards with small drawings (step 2 looks like the letter) */
.how { background: var(--tint); }
.how-in { padding-top: 64px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 32px; }
.how h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; font-weight: 800; letter-spacing: -.5px; text-align: center; max-width: 760px; margin: 0 auto; }
.steps { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 0; margin: 0; list-style: none; }
.step { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 4px 16px rgba(17, 24, 39, .06); display: flex; flex-direction: column; gap: 8px; }
.step-n { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--brand); margin-top: 6px; }
.step h3 { font-size: 20px; font-weight: 800; line-height: 1.25; }
.step p:last-child { font-size: 16px; color: var(--muted); }
.art { height: 150px; border-radius: 12px; background: #f3efe9; position: relative; overflow: hidden; }
.art-list { padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.al-name { width: 60%; height: 12px; border-radius: 6px; background: #1f2937; }
.al-meta { width: 40%; height: 8px; border-radius: 4px; background: #c9c3bb; }
.al-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.al-pills span { height: 34px; border-radius: 999px; border: 1.5px solid #c9c3bb; background: #fff; }
.al-pills .al-web { border: 2px solid var(--brand); color: var(--brand); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; position: relative; }
.al-pills .al-web::after { content: ""; position: absolute; left: -6%; right: -6%; top: 50%; height: 3px; background: var(--brand); transform: rotate(-14deg); border-radius: 2px; }
.art-letter { background: #e8e2d9; }
.art-letter > * { position: absolute; }
.art-letter::before { content: ""; position: absolute; left: 50%; top: 12px; width: 150px; height: 190px; margin-left: -75px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.12); transform: rotate(-2deg); }
.lt-head { left: 50%; top: 22px; margin-left: -64px; width: 128px; display: flex; gap: 5px; align-items: center; transform: rotate(-2deg); }
.lt-logo { width: 12px; height: 12px; border-radius: 3px; background: var(--brand); }
.lt-bar { flex: 1; height: 5px; border-radius: 3px; background: #1f2937; }
.lt-h1 { left: 50%; top: 42px; margin-left: -62px; width: 120px; height: 7px; border-radius: 3px; background: #1f2937; transform: rotate(-2deg); }
.lt-phones { left: 50%; top: 58px; margin-left: -52px; display: flex; gap: 14px; align-items: flex-end; transform: rotate(-2deg); }
.lt-phone { width: 28px; height: 56px; border: 3px solid #111; border-radius: 7px; background: #fff; }
.lt-good { background: linear-gradient(#5b1d1d 0 55%, #fff 55%); }
.lt-qr { width: 22px; height: 22px; margin-left: -12px; background: repeating-linear-gradient(90deg, #111 0 3px, #fff 3px 6px), #111; border: 2px solid #111; }
.lt-sticky { left: 50%; top: 86px; margin-left: -70px; width: 34px; height: 30px; background: var(--sun); transform: rotate(-8deg); box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.lt-lines { left: 50%; top: 126px; margin-left: -60px; width: 116px; display: flex; flex-direction: column; gap: 5px; transform: rotate(-2deg); }
.lt-lines span { height: 4px; border-radius: 2px; background: #c9c3bb; }
.art-keep { display: flex; align-items: flex-end; justify-content: center; }
.kp-phone { width: 120px; height: 140px; border: 6px solid #111; border-bottom: 0; border-radius: 18px 18px 0 0; background: #fff; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.kp-top { height: 34px; border-radius: 6px; background: #1f2937; }
.kp-line { height: 6px; border-radius: 3px; background: #d6d1ca; }
.kp-short { width: 60%; }
.kp-btn { margin-top: auto; margin-bottom: 8px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; text-align: center; border-radius: 6px; padding: 7px 0; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* Home: pricing, the same offer as the letter */
.pricing { background: var(--night); color: #fff; }
.pricing-in { padding-top: 64px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 28px; }
.price-label { font-size: 14px; font-weight: 800; color: #fca5a5; letter-spacing: 1px; }
.price-head h2 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.15; font-weight: 800; letter-spacing: -.4px; max-width: 760px; margin-top: 6px; }
.price-boxes { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pbox { background: #23262e; border: 1px solid #343843; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.pbox-main { background: #fff; color: var(--ink); border: 3px solid var(--brand); position: relative; }
.pbox-tag { align-self: flex-start; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; }
.price-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-amt { font-size: clamp(48px, 7vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -1px; }
.price-amt-sm { font-size: 40px; }
.price-per { font-size: 18px; font-weight: 600; }
.pbox-main .price-per { color: var(--body); }
.pbox-month .price-per, .pbox-month .pbox-sub, .pbox-how { color: #d1d5db; }
.pbox-sub { font-size: 16px; }
.pbox-main .pbox-sub { color: var(--body); }
.pbox-title { font-weight: 800; margin-top: 6px; }
.pbox-how .pbox-title { color: #fff; margin-top: 0; }
.pbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pbox-list li { position: relative; padding-left: 30px; color: var(--body); }
.pbox-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #16a34a; }
.pbox-list li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 5px; height: 10px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.pbox-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; }
.pbox-how a { color: #fff; }
.pbox-fine { font-size: 14px; color: var(--muted); }
.pbox-how .pbox-fine { color: #fca5a5; font-weight: 700; }
@media (min-width: 900px) {
  .price-boxes { grid-template-columns: 1.25fr 1fr; grid-template-rows: auto 1fr; }
  .pbox-main { grid-row: 1 / span 2; }
}
.btn-light { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 18px; background: #ffffff; color: var(--ink); font-weight: 800; font-size: 17px; border-radius: 10px; text-decoration: none; text-align: center; overflow-wrap: anywhere; }
.btn-light:hover { color: var(--ink); background: var(--tint); }

/* Home: straight answers, tap to open, no scripts */
.faq-in { padding-top: 64px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 24px 56px; }
.faq h2 { flex: 1 1 260px; font-size: clamp(28px, 4vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -.5px; }
.faq-list { flex: 2 1 520px; display: flex; flex-direction: column; border-top: 1px solid var(--line); min-width: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font-size: 18px; font-weight: 800; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 28px; font-weight: 600; color: var(--brand); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 18px; color: var(--body); overflow-wrap: anywhere; }
@media (max-width: 600px) { .faq-in { padding-top: 48px; padding-bottom: 48px; } }

/* Home: closing ask, signed like the letter */
.close { background: var(--brand); color: #fff; }
.close-in { padding-top: 64px; padding-bottom: 64px; }
.close-note { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.close h2 { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.6px; }
.close-note > p { font-size: 18px; color: #fde2e2; }
.find-close { flex: none; }
.find-close .find-label { color: #fff; }
.find-close button { background: var(--night); }
.find-close button:hover { background: #000; }
.find-close input { border-color: #fff; }
.close-mail { overflow-wrap: anywhere; }
.close-mail a { color: #fff; font-weight: 800; }
.close-note > p.close-sign { font-family: "Kalam", cursive; font-size: 40px; line-height: 1; color: #fff; margin-top: 8px; transform: rotate(-3deg); transform-origin: left; }
.close-note > p.close-role { font-size: 14px; color: #fecaca; margin-top: -6px; }
@media (max-width: 600px) { .close-in { padding-top: 48px; padding-bottom: 48px; } }

/* Home: thumb bar on phones, the main action always in reach */
.thumb { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(22, 24, 29, .96); box-shadow: 0 -6px 18px rgba(0,0,0,.18); }
.thumb a { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 10px; font-weight: 800; font-size: 16px; text-decoration: none; }
.thumb-find { flex: 1 1 auto; background: var(--brand); color: #fff; }
.thumb-mail { flex: 0 0 auto; padding: 0 18px; background: #fff; color: var(--ink); }
.thumb a:hover { color: inherit; }
.thumb-find:hover { color: #fff; background: var(--brand-dark); }
body.home .footer { padding-bottom: 80px; }
@media (min-width: 900px) { .thumb { display: none; } body.home .footer { padding-bottom: 0; } }

/* Plain pages: privacy, terms, 404, error */
.page-head { background: var(--tint); }
.page-head .wrap { padding-top: 56px; padding-bottom: 48px; }
.page-head h1 { font-size: clamp(32px, 5vw, 46px); line-height: 1.1; font-weight: 800; letter-spacing: -.5px; }
.page-head .lede { margin-top: 14px; }
.doc { max-width: 760px; padding-top: 40px; padding-bottom: 40px; }
.doc h2 { font-size: 22px; font-weight: 800; margin: 1.6em 0 .4em; }
.doc p, .doc li { color: var(--body); }
.doc p { margin-bottom: 1em; }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: .5em; }
.muted { color: var(--soft-ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 10px; background: var(--brand); color: #ffffff; font-weight: 800; text-decoration: none; margin-top: 24px; }
.btn:hover { background: var(--brand-dark); color: #ffffff; }

/* Admin */
.admin { font-size: 15px; }
.admin table { border-collapse: collapse; width: 100%; font-size: 14px; margin-bottom: 28px; }
.admin th, .admin td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.admin th { background: #f9fafb; }
.admin .wrap { max-width: 1240px; padding-top: 24px; }
.admin h1 { font-size: 28px; margin-bottom: 8px; }
.admin h2 { font-size: 20px; margin: 24px 0 10px; }
.scroll { overflow-x: auto; }
.rv-row { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); }
.rv-frame { width: 390px; height: 760px; border: 1px solid #d1d5db; border-radius: 10px; flex-shrink: 0; max-width: 100%; }
.rv-meta { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; }
.rv-meta dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.rv-meta dt { color: var(--soft-ink); }
.rv-meta dd { margin: 0; font-weight: 600; }
.rv-warn { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 12px; }
.rv-box { border: 1px dashed #d1d5db; border-radius: 8px; padding: 12px; color: var(--soft-ink); }
.rv-form { display: flex; flex-direction: column; gap: 8px; }
.rv-form input[type=text] { font: inherit; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; }
.rv-btns { display: flex; gap: 8px; }
.rv-form button { font: inherit; font-weight: 700; padding: 8px 16px; border-radius: 6px; border: 0; cursor: pointer; }
.rv-ok { background: #166534; color: #ffffff; }
.rv-no { background: #991b1b; color: #ffffff; }
.status-approved { color: #166534; }
.status-rejected { color: #991b1b; }

@media (max-width: 600px) {
  .hero-in { padding-top: 44px; padding-bottom: 44px; }
  .how-in { padding-top: 52px; padding-bottom: 52px; }
  .pricing-in { padding-top: 48px; padding-bottom: 48px; }
  .btn-light { font-size: 16px; }
}
.rv-caps { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.rv-cap { display: block; border: 1px solid #d1d5db; border-radius: 6px; max-height: 420px; object-fit: cover; object-position: top; }
.rv-cap-390 { width: 120px; }
.rv-cap-1280 { width: 280px; }
.rv-facts table { font-size: 13px; margin: 8px 0 0; }
.rv-facts td { word-break: break-word; }
.rv-flag { color: #991b1b; font-weight: 700; }
.ph-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.ph-item { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ph-item img, .ph-missing { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f3f4f6; }
.ph-missing { display: flex; align-items: center; justify-content: center; color: var(--soft-ink); }
.ph-item figcaption { padding: 8px 10px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.ph-item button { font: inherit; font-weight: 700; padding: 6px 12px; border-radius: 6px; border: 0; cursor: pointer; }
.ph-rejected img { opacity: .35; }

/* Intake: the form a trade owner fills out to get a preview */
.start { background: #fff; border-bottom: 1px solid var(--line); scroll-margin-top: 8px; }
.start-in { padding-top: 56px; padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 24px 56px; align-items: flex-start; }
.start-copy { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; }
.start h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; font-weight: 800; letter-spacing: -.5px; }
.start-copy p { color: var(--body); }
.intake { flex: 1.4 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fld { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; }
.fld input, .fld select { font: inherit; font-weight: 500; font-size: 18px; min-height: 54px; padding: 0 14px; border: 2px solid #d6d3d1; border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
.fld input:focus, .fld select:focus { outline: 3px solid #f5b400; outline-offset: 1px; border-color: var(--ink); }
.fld small { font-weight: 500; font-size: 14px; color: var(--soft-ink); }
.fld em { font-style: normal; font-weight: 700; font-size: 14px; color: #b91c1c; }
.fld-bad input, .fld-bad select { border-color: #b91c1c; background: #fef2f2; }
.intake-err { background: #fef2f2; color: #991b1b; border: 2px solid #fecaca; border-radius: 10px; padding: 10px 14px; font-weight: 700; }
.intake-btn { font: inherit; font-weight: 800; font-size: 19px; min-height: 60px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; cursor: pointer; }
.intake-btn:hover { background: var(--brand-dark); }
.intake-fine { font-size: 14px; color: var(--soft-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.start-done { max-width: 720px; display: flex; flex-direction: column; gap: 12px; background: #f0fdf4; border: 2px solid #86efac; border-radius: 16px; padding: 24px; }
.start-done ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; color: var(--body); }
.close-cta { background: #fff; color: var(--brand); align-self: flex-start; }
.close-cta:hover { background: #fff5f5; color: var(--brand-dark); }
.letter { border-top: 1px solid #2a2d35; }

/* Round 2: the form starts in the hero with one easy tap question */
.hero-form { background: #fff; border-radius: 18px; padding: 20px 18px 22px; box-shadow: 0 14px 40px rgba(17,24,39,.12); border: 1px solid #eadfd5; min-width: 0; }
.form-tag { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.q { border: 0; margin: 0; padding: 0; min-width: 0; }
.q legend { font-size: 21px; font-weight: 800; line-height: 1.25; margin-bottom: 12px; padding: 0; }
.tiles { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tile { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border: 2px solid #d6d3d1; border-radius: 12px; font-weight: 700; font-size: 16.5px; cursor: pointer; background: #fff; }
.tile input { width: 22px; height: 22px; accent-color: var(--brand); flex: none; margin: 0; }
.tile:has(input:checked) { border-color: var(--brand); background: #fff5f5; box-shadow: 0 0 0 2px var(--brand) inset; }
.rest { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
@supports selector(:has(*)) {
  .intake:not(.show-all):not(:has(input[name=problem]:checked)) .rest { display: none; }
  .intake:not(.show-all):not(:has(input[name=problem]:checked)) .q::after { content: "Tap one to start. It takes about 2 minutes."; display: block; margin-top: 12px; font-size: 14px; color: var(--soft-ink); }
}
.show { background: var(--tint); }
.show-in { padding-top: 48px; padding-bottom: 56px; }
@media (min-width: 900px) {
  .hero-in { flex-direction: row; align-items: flex-start; gap: 56px; }
  .hero-copy { flex: 1 1 0; padding-top: 24px; position: sticky; top: 24px; }
  .hero-form { flex: 0 0 470px; padding: 26px 26px 28px; }
  .tiles { grid-template-columns: 1fr 1fr; }
}

/* Round 3: a short promise up top so the form starts on the first phone screen */
.show-h { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; font-weight: 800; letter-spacing: -.5px; text-align: center; max-width: 760px; margin: 0 auto 10px; }
.show-sub { text-align: center; color: var(--body); max-width: 640px; margin: 0 auto 28px; }
@media (max-width: 899px) {
  .hero-in { padding-top: 22px; padding-bottom: 36px; gap: 18px; }
  .hero h1 { font-size: 34px; letter-spacing: -.8px; }
  .hero-copy { gap: 10px; }
  .hero .lede { font-size: 16px; line-height: 1.5; }
  .offer { gap: 6px; }
  .offer li { font-size: 13.5px; padding: 5px 10px; }
  .hero-form { padding: 16px 14px 18px; }
  .q legend { font-size: 19px; }
}

/* Round 4: the form reads like a short conversation: a reply to his answer, two labeled parts, trade as tap chips */
.reply p { display: none; background: #fff7ed; border-left: 4px solid var(--brand); border-radius: 8px; padding: 10px 12px; font-weight: 700; color: var(--ink); }
.intake:has(input[value=error]:checked) .reply-error,
.intake:has(input[value=warning]:checked) .reply-warning,
.intake:has(input[value=other]:checked) .reply-other,
.intake:has(input[value=old]:checked) .reply-old,
.intake:has(input[value=none]:checked) .reply-none { display: block; }
.grp { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.grp > legend { font-size: 13px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--brand); padding: 0; margin-bottom: 4px; }
.grp + .grp { border-top: 1px dashed #e7ddd3; padding-top: 16px; }
.trades { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.trades legend { font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 6px; }
.trades em { font-style: normal; font-weight: 700; font-size: 14px; color: #b91c1c; }
.chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 2px solid #d6d3d1; border-radius: 999px; font-weight: 700; font-size: 15px; background: #fff; }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid #f5b400; outline-offset: 2px; }
.trades.fld-bad .chip span { border-color: #fca5a5; }
.intake:has(input[value=none]:checked) .fld-link { display: none; }

/* Round 5: real proof of what we build, four sample sites in four different looks */
.build { background: var(--night); color: #fff; }
.build-in { padding-top: 52px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 26px; }
.build-head { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.build h2 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -.6px; }
.build-head p { color: #d1d5db; }
.build-row { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 -24px; padding-left: 24px; padding-right: 24px; scrollbar-width: none; }
.build-row::-webkit-scrollbar { display: none; }
.build-card { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.build-phone { border: 7px solid #000; border-radius: 26px; overflow: hidden; background: #000; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.build-phone img { display: block; width: 100%; height: auto; }
.build-card figcaption { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.build-card figcaption span { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; background: #374151; color: #e5e7eb; border-radius: 999px; padding: 3px 8px; }
.build-cta { align-self: flex-start; flex: 0 0 auto; padding: 0 30px; }
@media (min-width: 900px) {
  .build-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; }
}

/* Round 6: for the owner burned before, the usual way next to ours */
.vs { background: #fff; border-bottom: 1px solid var(--line); }
.vs-in { padding-top: 52px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 22px; }
.vs h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; font-weight: 800; letter-spacing: -.5px; max-width: 760px; }
.vs-table { display: flex; flex-direction: column; border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; }
.vs-row { display: grid; grid-template-columns: 1fr 1fr; }
.vs-row + .vs-row { border-top: 1px solid var(--line); }
.vs-topic { grid-column: 1 / -1; padding: 12px 14px 0; font-size: 12.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--soft-ink); }
.vs-old, .vs-new { padding: 6px 14px 14px; font-size: 15.5px; line-height: 1.4; }
.vs-old { color: var(--soft-ink); text-decoration: line-through; text-decoration-color: #fca5a5; text-decoration-thickness: 2px; }
.vs-new { font-weight: 800; color: var(--ink); background: #f0fdf4; border-left: 1px solid var(--line); }
.vs-headrow { background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.vs-headrow span { padding: 10px 14px; }
.vs-headrow span:first-child { display: none; }
@media (min-width: 900px) {
  .vs-row { grid-template-columns: 220px 1fr 1fr; }
  .vs-topic { grid-column: auto; padding: 16px 18px; font-size: 13px; }
  .vs-old, .vs-new { padding: 16px 18px; font-size: 17px; }
  .vs-headrow span:first-child { display: block; }
}

/* Round 7: the problem and the fix in one section, three short numbered steps under the pictures */
.how-in { gap: 22px; }
.how-sub { text-align: center; color: var(--body); max-width: 640px; margin: -8px auto 6px; }
.steps-row { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 860px; margin: 8px auto 0; width: 100%; }
.steps-row .step { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px 18px; }
.steps-row .step-n { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; letter-spacing: 0; margin: 0; }
.steps-row .step h3 { font-size: 18px; }
.steps-row .step p { font-size: 15.5px; color: var(--muted); }
@media (min-width: 900px) { .steps-row { grid-template-columns: repeat(3, 1fr); } .steps-row .step { flex-direction: column; } }

/* Round 8: one price ticket, two plans side by side, one shared list, one button back to the form */
.ticket { background: #fff; color: var(--ink); border-radius: 20px; overflow: hidden; max-width: 860px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.ticket-plans { display: grid; grid-template-columns: 1fr 1fr; }
.plan { padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.plan-year { background: #fff5f5; border-right: 2px dashed #f3c4c4; }
.plan-month { background: #f7f7f5; }
.plan-tag { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--soft-ink); padding: 4px 0; }
.plan .price-amt { font-size: clamp(40px, 9vw, 60px); }
.plan .price-per { color: var(--body); font-size: 15px; }
.plan .price-line { flex-direction: column; align-items: flex-start; gap: 2px; }
.plan-sub { font-size: 14.5px; color: var(--body); line-height: 1.4; }
.ticket-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 12px; border-top: 2px dashed #e5e7eb; }
.ticket-body .pbox-title { margin: 0; }
.ticket-cta { width: 100%; margin-top: 4px; }
@media (min-width: 900px) { .plan { padding: 28px; } .ticket-body { padding: 26px 28px 28px; } .ticket { align-self: center; } }
.ticket-cta { flex: 0 0 auto; }

/* Round 9: after he sends the form, the whole top of the page turns into a clear "it's on the way" */
.hero-sent { background: #ecfdf3; }
.sent { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.sent-check { width: 64px; height: 64px; border-radius: 50%; background: #16a34a; position: relative; box-shadow: 0 0 0 8px rgba(22,163,74,.18); }
.sent-check::after { content: ""; position: absolute; left: 23px; top: 13px; width: 14px; height: 28px; border: solid #fff; border-width: 0 6px 6px 0; transform: rotate(45deg); }
.sent h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.06; font-weight: 800; letter-spacing: -1px; }
.sent-lede { color: var(--body); font-size: 18px; }
.sent-steps { list-style: none; counter-reset: s; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sent-steps li { counter-increment: s; position: relative; background: #fff; border-radius: 14px; padding: 14px 16px 14px 58px; color: var(--body); box-shadow: 0 4px 14px rgba(17,24,39,.06); }
.sent-steps li::before { content: counter(s); position: absolute; left: 14px; top: 13px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sent-steps b { color: var(--ink); }
.sent-tips { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 2px dashed #86efac; border-radius: 14px; padding: 14px 16px; font-size: 15.5px; color: var(--body); overflow-wrap: anywhere; }
.sent-tips b { color: var(--ink); }
.sent-sign { font-family: "Kalam", cursive; font-weight: 700; font-size: 34px; color: var(--ink-blue); transform: rotate(-3deg); align-self: flex-start; }

/* Round 10: who is behind it sits right under the form, and the page closes on Jackson instead of a second pitch */
.form-trust { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e7ddd3; display: flex; flex-direction: column; gap: 8px; }
.ft-who { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; margin: 0; }
.ft-who b { font-weight: 700; }
.form-trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.form-trust li { font-size: 13.5px; font-weight: 800; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 999px; padding: 4px 10px; }
.form-trust li::before { content: "\2713  "; }
.real-close { border-top: 1px solid var(--line); }
.real-cta { flex: 0 0 auto; align-self: flex-start; padding: 0 30px; }

/* National round 2: each sample names its town and state, so the samples read as coast to coast. */
.build-card figcaption { flex-wrap: wrap; row-gap: 2px; }
.build-card figcaption b { font-weight: 800; }
.build-card figcaption i { font-style: normal; font-weight: 600; font-size: 14px; color: #9ca3af; }
.build-card figcaption i::before { content: "\00b7"; margin-right: 6px; color: #6b7280; }

/* National round 3: a short lede plus one plain line that says who it's for and where: every trade, every state. */
.hero .lede { font-size: 19px; font-weight: 600; color: #1f2937; }
.for-who { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 16px; padding: 10px 12px; border-left: 4px solid #c62828; background: #fff; border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.4; color: #374151; box-shadow: 0 1px 0 #efe6dd; }
.for-who .us-pin { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #c62828; color: #fff; display: grid; place-items: center; margin-top: 1px; }

/* National round 4: a 10 second self check anyone, anywhere can do, with the four things a broken button opens. */
.check { background: #fff; padding: 44px 0 40px; border-top: 1px solid #efe6dd; }
.check h2 { font-size: 30px; line-height: 1.12; margin: 0 0 8px; letter-spacing: -.5px; }
.check-sub { margin: 0 0 18px; color: #4b5563; font-size: 17px; }
.check-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.check-steps li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; color: #1f2937; }
.check-steps li > span { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #111827; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.fake-btn { display: inline-block; border: 2px solid #c62828; color: #c62828; border-radius: 999px; padding: 1px 12px; font-size: 15px; margin-left: 2px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mini { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mini-ph { border: 5px solid #111827; border-radius: 16px; overflow: hidden; background: #fff; aspect-ratio: 3 / 4; display: flex; flex-direction: column; }
.mini-bar { background: #f1f3f4; font-size: 10.5px; color: #5f6368; padding: 6px 8px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-bar.mini-bad { color: #b91c1c; font-weight: 700; }
.mini-body { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.25; color: #202124; }
.mini-body b { font-weight: 600; }
.mini-warn { background: #fdf2f2; }
.mini-ico { font-style: normal; width: 28px; height: 28px; border: 2px solid #5f6368; border-radius: 6px; display: grid; place-items: center; font-weight: 800; color: #5f6368; font-size: 13px; }
.mini-warn .mini-ico { border-color: #b91c1c; color: #b91c1c; border-radius: 50%; }
.mini-ads, .mini-lines { display: grid; gap: 6px; margin-top: 4px; }
.mini-ads em { display: block; height: 22px; border-radius: 4px; background: #e5e7eb; }
.mini-lines em { display: block; height: 8px; border-radius: 4px; background: #d1d5db; }
.mini-lines em:last-child { width: 70%; }
.mini figcaption { font-weight: 800; font-size: 14.5px; color: #111827; text-align: center; }
.check-end { margin-top: 22px; padding: 16px; border-radius: 14px; background: #fef2f2; border: 1px solid #fecaca; display: flex; flex-direction: column; gap: 12px; }
.check-end p { margin: 0; font-size: 16px; line-height: 1.45; color: #1f2937; }
@media (min-width: 900px) {
  .check { padding: 72px 0; }
  .check h2 { font-size: 40px; }
  .check-steps { grid-template-columns: repeat(3, 1fr); }
  .check-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .check-end { flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 24px; }
  .check-end p { max-width: 680px; }
}
.check-end .cta { flex: 0 0 auto; }
.mini-ph { aspect-ratio: 1 / 1.05; }
.check-listing { margin: 0 0 18px; }
@media (min-width: 900px) { .check-listing { max-width: 560px; } }

/* National round 5: a fact sheet a stranger can check, like the back of a business card. */
.facts-card { margin: 18px 0 20px; background: #fff; border: 2px solid #111827; border-radius: 14px; overflow: hidden; box-shadow: 6px 6px 0 #111827; }
.facts-title { margin: 0; padding: 12px 16px; background: #111827; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.facts { margin: 0; padding: 4px 16px 8px; }
.facts > div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px dashed #d6cfc6; }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; padding-top: 2px; }
.facts dd { margin: 0; font-size: 15.5px; line-height: 1.4; color: #111827; }
.facts dd a { color: var(--brand); font-weight: 700; }
@media (min-width: 900px) { .facts > div { grid-template-columns: 150px 1fr; } }
.facts-card { box-shadow: 4px 4px 0 #111827; margin-right: 4px; }
.facts > div { grid-template-columns: 96px minmax(0, 1fr); }
.facts dd { overflow-wrap: anywhere; }
@media (min-width: 900px) { .facts > div { grid-template-columns: 150px minmax(0, 1fr); } }

/* National round 6: a wall of trades so any home service owner sees his own word, plus the any town, any state line. */
.every { margin: 30px 0 22px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.every-title { margin: 0 0 14px; font-size: 22px; line-height: 1.2; color: #fff; }
.every-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.every-list li { font-weight: 700; font-size: 15px; color: #f9fafb; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 13px; }
.every-list li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-right: 8px; vertical-align: 2px; }
.every-note { margin: 14px 0 0; color: #d1d5db; font-size: 16px; line-height: 1.45; }
@media (min-width: 900px) { .every-title { font-size: 26px; } .every-list li { font-size: 16px; } }

/* National round 7: on desktop the hero shows the fix itself, the dead page turning into a working site, so the headline has proof beside it. */
.hero-fix { display: none; }
@media (min-width: 900px) {
  .hero-fix { display: grid; grid-template-columns: 170px auto 170px; align-items: center; gap: 18px; margin-top: 26px; }
  .hf-phone { height: 300px; border: 7px solid #111827; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(17,24,39,.18); }
  .hf-dead { transform: rotate(-4deg); }
  .hf-new { transform: rotate(3deg); }
  .hf-new img { width: 100%; height: auto; display: block; }
  .hf-bar { background: #f1f3f4; font-size: 10px; color: #5f6368; padding: 7px 9px; border-bottom: 1px solid #e5e7eb; }
  .hf-body { padding: 40px 14px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: #202124; }
  .hf-body i { font-style: normal; width: 32px; height: 32px; border: 2px solid #5f6368; border-radius: 6px; display: grid; place-items: center; font-weight: 800; color: #5f6368; }
  .hf-body b { font-weight: 500; font-size: 15px; }
  .hf-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: "Kalam", cursive; font-weight: 700; color: #c62828; font-size: 18px; }
  .hf-cap { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: #6b7280; }
}

/* National round 8: answers grouped the way a stranger thinks: before you start, price and paying, after you keep it. */
.faq-sub { margin: -4px 0 20px; color: #4b5563; font-size: 16px; }
.faq-groups { display: grid; gap: 26px; }
.faq-gt { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #c62828; }
@media (min-width: 900px) { .faq-groups { grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; } }
@media (min-width: 900px) { .faq-in { display: block; } .faq-sub { margin: -6px 0 28px; } }

/* National round 9: pick your trade and the price turns into one job you already do every week. Pure CSS, no scripts. */
.onejob { margin: 0 0 22px; padding: 18px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.onejob-q { margin: 0 0 10px; color: #fff; font-weight: 800; font-size: 17px; }
.onejob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.oj-chip input { position: absolute; opacity: 0; pointer-events: none; }
.oj-chip span { display: inline-block; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); color: #e5e7eb; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.oj-chip input:checked + span { background: #fff; color: #111827; border-color: #fff; }
.oj-chip input:focus-visible + span { outline: 3px solid #22c55e; outline-offset: 2px; }
.onejob-a { margin: 14px 0 0; color: #f3f4f6; font-size: 18px; line-height: 1.4; min-height: 50px; }
.onejob-a b { color: #fca5a5; }
.onejob-a span { display: none; }
.onejob-a .oj-pl { display: inline; }
.onejob:has(.oj-chip input:checked) .onejob-a span { display: none; }
.onejob:has(input[value="pl"]:checked) .onejob-a .oj-pl { display: inline; }
.onejob:has(input[value="ro"]:checked) .onejob-a .oj-ro { display: inline; }
.onejob:has(input[value="el"]:checked) .onejob-a .oj-el { display: inline; }
.onejob:has(input[value="hv"]:checked) .onejob-a .oj-hv { display: inline; }
.onejob:has(input[value="re"]:checked) .onejob-a .oj-re { display: inline; }
.onejob:has(input[value="tr"]:checked) .onejob-a .oj-tr { display: inline; }
.onejob:has(input[value="ga"]:checked) .onejob-a .oj-ga { display: inline; }
.onejob:has(input[value="gu"]:checked) .onejob-a .oj-gu { display: inline; }
.facts dd { overflow-wrap: normal; }
.facts dd a[href^="mailto"] { display: inline-block; font-size: 14.5px; white-space: nowrap; }

/* National round 10: the page closes on one red band with the main ask, before the small letter code band. */
.close { background: #c62828; color: #fff; }
.close-in { padding-top: 48px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 14px; }
.close h2 { margin: 0; font-size: 30px; line-height: 1.12; letter-spacing: -.5px; color: #fff; }
.close p { margin: 0; font-size: 17px; line-height: 1.45; color: #fee2e2; }
.close-btn { align-self: flex-start; display: inline-flex; align-items: center; min-height: 56px; padding: 0 26px; border-radius: 10px; background: #fff; color: #c62828; font-weight: 800; font-size: 18px; text-decoration: none; box-shadow: 0 6px 0 #7f1d1d; }
.close-btn:hover { color: #991b1b; }
.close-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.close-list li { font-weight: 700; font-size: 15px; color: #fff; }
.close-list li::before { content: "\2713"; margin-right: 6px; color: #bbf7d0; font-weight: 800; }
@media (min-width: 900px) { .close-in { padding-top: 72px; padding-bottom: 72px; } .close h2 { font-size: 42px; max-width: 820px; } .close p { font-size: 19px; max-width: 700px; } }