/* ============================================================
   PRAVO — design system v3 (locked brand, 2026-10-08)
   Black #0B0B0B / White / Pravo Red #D71920.
   Serif display (Playfair Display) + Inter body.
   No gradients for decoration. Flat, editorial, confident.
   ============================================================ */

:root {
  --black: #0B0B0B;
  --white: #FFFFFF;
  --red: #D71920;
  --red-dark: #A8121A;
  /* text on light */
  --ink: #0B0B0B;
  --muted: #555555;
  --faint: #8a8a8a;
  /* text on dark */
  --on-dark: #f5f5f5;
  --on-dark-muted: #b5b5b5;
  /* surfaces */
  --paper: #FFFFFF;
  --cool: #f6f6f6;
  --panel: #F7F7F5;
  --panel-line: #D6D6D2;
  --line: #e4e4e4;
  --line-dark: #2a2a2a;
  /* verdict semantics (functional only) */
  --v-green: #1a7f4b;
  --v-green-bg: #eef7f1;
  --v-yellow: #a16207;
  --v-yellow-bg: #fdf6e3;
  --v-red: #b91c1c;
  --v-red-bg: #fdeeee;
  /* neutral slate: fair / not-recommended results are information,
     not alarm (design/funnel round, 2026-10-25) */
  --v-slate: #475569;
  --v-slate-bg: #f1f5f9;
  /* shape + depth */
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(11,11,11,.06), 0 18px 48px -16px rgba(11,11,11,.22);
  --shadow-sm: 0 1px 2px rgba(11,11,11,.06), 0 8px 22px -8px rgba(11,11,11,.14);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22,.9,.28,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink);
  background: var(--paper); line-height: 1.6; font-size: 16px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2 { font-family: var(--serif); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 16px; }
h3, h4 { font-family: var(--sans); line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 14px; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
.red-dot { color: var(--red); }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.center { text-align: center; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 780px; }

/* ---------- wordmark lockups ---------- */
.wordmark { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; }
.wordmark:hover { text-decoration: none; }
.wordmark .wm-main {
  font-family: var(--serif); font-weight: 700; font-size: 1.9rem;
  letter-spacing: -0.015em; color: var(--ink);
}
.wordmark .wm-main .wm-dot { color: var(--red); }
.wordmark .wm-sub {
  font-family: var(--sans); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--red);
  margin-top: 5px;
}
.wordmark.wm-horizontal { flex-direction: row; align-items: baseline; gap: 12px; }
.wordmark.wm-horizontal .wm-sub { margin-top: 0; }
.wordmark.wm-reversed .wm-main { color: #fff; }
.wordmark.wm-reversed .wm-sub { color: var(--red); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: var(--ink); font-weight: 500; font-size: 0.95rem; transition: color .15s; }
.nav a:hover { color: var(--red); text-decoration: none; }
.nav .btn { color: #fff; }
.nav .btn:hover { color: #fff; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 15px 30px; border-radius: 999px;
  font-weight: 600; font-size: 0.98rem; border: 0; cursor: pointer;
  transition: transform .16s var(--ease), background .16s, box-shadow .16s;
  text-align: center; font-family: var(--sans); letter-spacing: 0.01em;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 8px 22px -8px rgba(215,25,32,.55); }
.btn-primary:hover { background: var(--red-dark); color: #fff; box-shadow: 0 12px 28px -8px rgba(215,25,32,.6); }
.btn-secondary { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-secondary:hover { background: var(--ink); color: #fff; box-shadow: none; }
.btn-sm { padding: 11px 22px; font-size: 0.9rem; }
.btn-lg { padding: 17px 44px; font-size: 1.08rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .65; cursor: default; transform: none; }

/* ---------- forms ---------- */
label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 14px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
label .opt { font-weight: 400; color: var(--faint); text-transform: none; letter-spacing: 0; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; margin-top: 7px; padding: 14px 16px; font-size: 1rem;
  font-family: var(--sans); border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 400;
  transition: border-color .18s, box-shadow .18s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(215,25,32,.12);
}
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
textarea { min-height: 120px; resize: vertical; }

/* ---------- hero (black, editorial) ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--black); color: #fff;
  padding: 96px 0 0;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 64px; align-items: center; padding-bottom: 88px; }
.hero .pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-muted);
  border: 1px solid var(--line-dark);
  padding: 9px 18px; border-radius: 999px; margin-bottom: 26px;
}
.hero .pill .dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(215,25,32,.3);} 50% { box-shadow: 0 0 0 7px rgba(215,25,32,.08);} }
.hero h1 { color: #fff; }
.hero .lede { color: var(--on-dark-muted); font-size: 1.13rem; max-width: 32rem; }
.hero-cta { margin-top: 30px; }
.hero-micro {
  margin-top: 18px; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: #8a8a8a;
}
.hero-points { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; font-size: 0.95rem; color: #d5d5d5; }
.hero-points > span { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.hero-points .tick {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: transparent; border: 1.5px solid var(--red);
  color: var(--red); font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* check card — the star of the show */
.hero-card {
  background: #fff; color: var(--ink);
  border-radius: var(--radius-lg); padding: 34px;
  box-shadow: 0 32px 80px -20px rgba(0,0,0,.6);
}
.hero-card h2 { font-size: 1.35rem; font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; }
.check-card-tag { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.check-card-tag .mini-mark {
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  color: var(--ink);
}
.check-card-tag .mini-mark .wm-dot { color: var(--red); }
.check-card-tag span:last-child { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---------- verdict cards (animated reveal) ---------- */
.check-result { margin-top: 20px; }
.verdict {
  position: relative; border-radius: var(--radius); padding: 26px;
  border: 1.5px solid var(--line); background: #fff;
  animation: verdictIn .55s var(--ease) both;
}
@keyframes verdictIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.verdict > * { animation: verdictChild .5s var(--ease) both; }
.verdict > *:nth-child(2) { animation-delay: .07s; }
.verdict > *:nth-child(3) { animation-delay: .14s; }
.verdict > *:nth-child(4) { animation-delay: .21s; }
.verdict > *:nth-child(5) { animation-delay: .28s; }
@keyframes verdictChild {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.verdict h3 { margin: 12px 0 8px; font-size: 1.3rem; font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; }
.verdict p { color: var(--muted); font-size: 0.97rem; }
.verdict.green { border-top: 5px solid var(--v-green); }
.verdict.yellow { border-top: 5px solid var(--v-yellow); }
.verdict.red { border-top: 5px solid var(--v-red); }
.verdict.slate { border-top: 5px solid var(--v-slate); background: var(--v-slate-bg); }
.verdict.slate .verdict-icon { background: var(--v-slate); }
.verdict.loading { border-top: 5px solid var(--line); animation: none; }
.verdict.neutral { border-top: 5px solid var(--line); }
.verdict.neutral .verdict-icon { background: var(--muted); }
.verdict-icon {
  width: 44px; height: 44px; border-radius: 50%; font-size: 20px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px;
  background: var(--black); color: #fff;
}
.verdict.green .verdict-icon { background: var(--v-green); }
.verdict.yellow .verdict-icon { background: var(--v-yellow); }
.verdict.red .verdict-icon { background: var(--v-red); }
.badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 6px 13px; border-radius: 999px;
  background: var(--black); color: #fff;
}
.badge-green { background: var(--v-green); }
.badge-yellow { background: var(--v-yellow); }
.badge-red { background: var(--v-red); }
.badge-slate { background: var(--v-slate); }
.badge-prelim { background: transparent; color: var(--ink, #0B0B0B);
  border: 1px solid currentColor; margin-left: 6px; }
/* Owner design revision (2026-10-25): the savings band is a
   LIGHT panel — near-black figures on #F7F7F5, with a verdict-
   colored top accent. No bounded black boxes. */
.savings-band {
  background: var(--panel); border: 1px solid var(--panel-line);
  border-top: 4px solid var(--red); border-radius: 12px;
  padding: 18px 20px; margin: 16px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  color: var(--ink);
}
.verdict.green .savings-band { border-top-color: var(--v-green); }
.verdict.yellow .savings-band { border-top-color: var(--v-yellow); }
.verdict.red .savings-band { border-top-color: var(--v-red); }
.verdict.slate .savings-band { border-top-color: var(--v-slate); }
.savings-band .lbl { color: var(--muted); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.savings-band .val {
  font-family: var(--serif); font-size: 1.7rem; font-weight: 700;
  letter-spacing: -0.01em; white-space: nowrap; color: var(--ink);
}
.savings-band .val .red-dot { color: var(--red); }
.filing-callout {
  border: 1px solid var(--line); border-left: 4px solid var(--red);
  border-radius: 10px; padding: 14px 16px; margin: 16px 0; background: #fbfaf8;
}
.filing-callout p { margin: 0 0 6px; color: var(--black); }
.filing-callout p:last-child { margin-bottom: 0; }
.token-note {
  border: 1px solid var(--line); border-left: 4px solid var(--v-slate);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
  background: var(--v-slate-bg); font-size: 0.95rem; color: var(--ink);
}
/* Signed-link landing: the finding renders directly under the
   matched-property notice (no form in between), and the re-check
   form is a collapsed secondary element beneath the result. */
.check-result-first { margin-top: 0; }
.recheck { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.recheck summary {
  cursor: pointer; font-weight: 700; color: var(--red);
  list-style: none; display: inline-flex; align-items: center; gap: 8px;
}
.recheck summary::-webkit-details-marker { display: none; }
.recheck summary::after { content: "+"; font-weight: 700; }
.recheck[open] summary::after { content: "\2013"; }
.recheck form { margin-top: 16px; }
.suggestion { margin-top: 10px; }
.linklike { background: none; border: 0; color: var(--red); font-weight: 700; cursor: pointer; font-size: 1rem; padding: 0; font-family: var(--sans); }
.linklike:hover { text-decoration: underline; }

.lead-form-wrap { background: var(--cool); border-radius: 12px; padding: 22px; margin-top: 16px; border: 1px solid var(--line); }
.lead-form-wrap h4 { margin-bottom: 14px; font-size: 1.05rem; font-family: var(--sans); font-weight: 700; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-done { text-align: center; padding: 12px 4px; }
.check-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
  animation: popIn .45s var(--ease) both;
}
@keyframes popIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* skeleton loading state */
.skel { border-radius: 8px; background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.verdict.loading .load-steps { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.verdict.loading .load-row { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; color: var(--muted); font-weight: 500; }
.verdict.loading .spinner {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2.5px solid var(--line); border-top-color: var(--red);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- stats strip (black, editorial) ---------- */
.stats-band { background: var(--black); border-top: 1px solid var(--line-dark); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; padding: 58px 24px; }
.stat { text-align: left; position: relative; padding-left: 22px; border-left: 2px solid var(--red); }
.stat strong { display: block; font-family: var(--serif); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; margin-bottom: 6px; }
.stat span { font-size: 0.85rem; color: var(--on-dark-muted); letter-spacing: 0.04em; line-height: 1.55; }

/* ---------- sections ---------- */
.section { padding: 88px 0; }
.section-rule { border-top: 1px solid var(--line); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 54px; }
.section-head p { font-size: 1.06rem; color: var(--muted); }
.eyebrow {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--red); margin-bottom: 16px;
}

/* cards */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.card h3 { font-family: var(--serif); font-size: 1.35rem; }
.card p { color: var(--muted); font-size: 0.96rem; margin-bottom: 0; }

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.split p { color: var(--muted); }
/* Owner design revision (2026-10-25): light panel with the
   Pravo-red left accent — the solid black card is retired. */
.trust-card {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--panel-line); border-left: 3px solid var(--red);
  border-radius: var(--radius-lg);
  padding: 34px; position: relative; overflow: hidden;
}
.quote-badge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--red); margin-bottom: 10px; }
.quote-address { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 18px; color: var(--ink); }
.quote-rows div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.quote-rows div span { color: var(--muted); }
.quote-rows div strong { color: var(--ink); }
.quote-rows .quote-total { border-bottom: 0; font-weight: 700; }
.quote-total strong { font-family: var(--serif); font-size: 1.4rem; color: var(--ink) !important; }
.trust-card .muted { color: var(--muted) !important; }

/* ---------- pricing ---------- */
.pricing-hero { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 28px; align-items: start; max-width: 960px; margin: 0 auto; }
.price-card {
  background: #fff; border: 2px solid var(--black); border-radius: var(--radius-lg);
  padding: 42px; box-shadow: var(--shadow); position: relative;
}
.price-card h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); font-weight: 700; }
.price { font-family: var(--serif); font-size: 3.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 22px; }
.price span { font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tick-list { list-style: none; padding: 0; margin: 0 0 26px; }
.tick-list li { padding: 9px 0 9px 30px; position: relative; color: var(--muted); font-size: 0.97rem; }
.tick-list li::before {
  content: "✓"; position: absolute; left: 0; top: 10px;
  color: var(--red); font-weight: 700; font-size: 1rem;
}
.price-compare { background: var(--cool); border-radius: var(--radius); padding: 28px; border: 1px solid var(--line); }
.price-compare h4 { margin-bottom: 10px; font-family: var(--serif); font-size: 1.2rem; }
.price-compare p { color: var(--muted); font-size: 0.96rem; }

/* guarantee band — black */
.guarantee-band { background: var(--black); color: #fff; text-align: center; }
.guarantee-seal {
  width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
}
.guarantee-band h2 { color: #fff; }
.guarantee-band .lede { color: var(--on-dark-muted); max-width: 48rem; margin: 0 auto 22px; }
.guarantee-band .lede strong { color: #fff; }
.guarantee-band .btn-secondary { background: transparent; color: #fff; border-color: #4a4a4a; }
.guarantee-band .btn-secondary:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- faq ---------- */
.faq-mini details, .faq-list details {
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px;
  background: #fff; overflow: hidden; transition: box-shadow .2s;
}
.faq-mini details[open], .faq-list details[open] { box-shadow: var(--shadow-sm); }
.faq-mini summary, .faq-list summary {
  padding: 19px 24px; font-weight: 700; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 1.02rem;
}
.faq-mini summary::-webkit-details-marker, .faq-list summary::-webkit-details-marker { display: none; }
.faq-chev { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--cool); display: flex; align-items: center; justify-content: center; transition: transform .25s var(--ease), background .25s; color: var(--ink); font-size: 18px; font-weight: 400; }
details[open] .faq-chev { transform: rotate(45deg); background: var(--red); color: #fff; }
.faq-mini details p, .faq-list details p, .faq-list details ul { padding: 0 24px 22px; color: var(--muted); margin: 0; }
.faq-list details ul { padding-left: 44px; margin-bottom: 18px; }

/* ---------- content pages ---------- */
.page-hero { padding: 76px 0 12px; text-align: center; }
.page-hero .lede { margin: 0 auto; color: var(--muted); max-width: 36rem; }
.page-hero .pill {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red);
  border: 1px solid var(--red);
  padding: 9px 18px; border-radius: 999px; margin-bottom: 22px;
}
.prose { max-width: 740px; margin: 0 auto; }
.prose h3 { margin-top: 42px; font-family: var(--serif); font-size: 1.5rem; }
.prose p, .prose li { color: var(--muted); }
.prose ul { padding-left: 22px; }
/* The guarantee terms on /pricing are the frozen text, verbatim — the
   readability fix is type and air only, never wording (2026-10-25). */
.terms-prose p { font-size: 1.03rem; line-height: 1.85; margin-bottom: 20px; }
.steps { counter-reset: step; margin: 36px 0; padding: 0; list-style: none; }
.steps li { position: relative; padding: 0 0 32px 62px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 44px; height: 44px;
  border-radius: 50%; background: var(--red);
  color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.steps li h3 { margin: 0 0 8px; font-size: 1.25rem; font-family: var(--serif); }
.timeline { border-left: 2px solid var(--line); margin: 28px 0 28px 8px; padding-left: 30px; }
.timeline div { position: relative; padding-bottom: 22px; color: var(--muted); }
.timeline div::before {
  content: ""; position: absolute; left: -38px; top: 6px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(215,25,32,.12);
}
.timeline strong { display: block; color: var(--ink); }

/* ---------- scheduler ---------- */
.sched-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.sched-wrap iframe { width: 100%; height: 700px; border: 0; display: block; }

/* ---------- admin (functional, clean) ---------- */
.admin-shell { background: var(--cool); min-height: 60vh; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: #fff; }
.admin-table th, .admin-table td { padding: 13px 15px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table th { background: var(--black); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: #b5b5b5; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--cool); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; }
.dot-green { background: var(--v-green); } .dot-yellow { background: var(--v-yellow); }
.dot-red { background: var(--v-red); } .dot-none { background: var(--faint); }
.status-pill { font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--cool); color: var(--muted); }
select.status-sel { width: auto; margin: 0; padding: 7px 10px; font-size: 0.82rem; border-radius: 8px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.admin-stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-sm); }
.admin-stat strong { font-family: var(--serif); font-size: 1.8rem; display: block; }
.admin-stat span { font-size: 0.82rem; color: var(--muted); }

/* ---------- footer (black, stacked reversed lockup) ---------- */
.site-footer { background: var(--black); color: var(--on-dark-muted); padding: 64px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.footer-grid h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: #8a8a8a; margin-bottom: 16px; font-weight: 700; }
.footer-grid a { display: block; color: var(--on-dark-muted); font-size: 0.93rem; margin-bottom: 10px; transition: color .15s; }
.footer-grid a:hover { color: #fff; text-decoration: none; }
.footer-grid p { color: #8a8a8a; }
.footer-grid em { color: #fff; font-style: normal; font-weight: 600; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line-dark); flex-wrap: wrap; }
.footer-base .muted { color: #6d6d6d !important; }

/* ---------- final CTA ---------- */
.cta-final { background: var(--black); color: #fff; text-align: center; }
.cta-final h2 { color: #fff; }
.cta-final .muted { color: var(--on-dark-muted) !important; }
.cta-final .eyebrow { color: var(--red); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .verdict, .verdict > * { animation: none; }
}

/* ---------- sticky CTA bar (steal-list W103) ---------- */
/* The bar is fixed; the body padding IS the guarantee it never covers
   content. It must exceed the bar's height at EVERY width (the bar
   wraps taller on narrow screens) and include the iOS safe area.
   Dismissing the bar removes it from the DOM, and :has() drops the
   padding with it. */
body:has(.sticky-cta) { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
/* Scroll-gated reveal (Luna confirmation-round catch): the bar
   renders hidden and app.js reveals it only after the visitor has
   scrolled past the primary check form (or the first content
   section on other pages), so it never sits over the first
   viewport / hero. The body padding above is unchanged — it is the
   end-of-document clearance for when the bar IS shown. */
.sticky-cta.sticky-cta--hidden { display: none; }
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--black); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 13px 52px calc(13px + env(safe-area-inset-bottom)) 20px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.25);
}
.sticky-cta-text { font-weight: 700; font-size: 1.02rem; }
.sticky-cta-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #9a9a9a; font-size: 26px; line-height: 1;
  cursor: pointer; padding: 6px;
}
.sticky-cta-close:hover { color: #fff; }
@media print { .sticky-cta { display: none; } }

/* ---------- sample showcase (steal-list W100) ---------- */
.sample-viewer { max-width: 760px; margin: 0 auto; }
.sample-frame {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow); background: #fff;
}
.sample-frame img { display: block; width: 100%; height: auto; }
.sample-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 16px 0 12px;
}
.sample-cap { font-weight: 600; text-align: center; flex: 1; }
.sample-thumbs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sample-thumb {
  width: 74px; padding: 0; border: 2px solid var(--line); border-radius: 8px;
  overflow: hidden; background: #fff; cursor: pointer; line-height: 0;
}
.sample-thumb img { width: 100%; height: auto; display: block; }
.sample-thumb.active { border-color: var(--red); }
.sample-thumb:hover { border-color: var(--ink); }

/* ---------- comparison table (steal-list W101) ---------- */
.compare-wrap { overflow-x: auto; }
table.compare { width: 100%; border-collapse: collapse; background: #fff; min-width: 640px; }
table.compare th, table.compare td {
  border: 1px solid var(--line); padding: 16px 18px; text-align: left;
  vertical-align: top; font-size: 0.97rem;
}
table.compare thead th { background: var(--black); color: #fff; font-size: 1.02rem; }
table.compare thead th.us { background: var(--red); }
table.compare td.us { background: #fdf3f3; }
table.compare td .big { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; display: block; margin-bottom: 4px; }
table.compare td p { color: var(--muted); margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .split, .pricing-hero { grid-template-columns: 1fr; gap: 44px; }
  .cards3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 30px; padding: 44px 24px; }
  .nav { display: none; }
  .nav-toggle { display: block; }
  body.nav-open .nav {
    display: flex; position: absolute; top: 72px; left: 0; right: 0;
    background: #fff; flex-direction: column; padding: 22px; gap: 6px;
    border-bottom: 1px solid var(--line); align-items: stretch;
    box-shadow: var(--shadow);
  }
  body.nav-open .nav a { padding: 10px 4px; border-bottom: 1px solid var(--cool); }
  body.nav-open .nav a:hover { color: var(--red); }
  .form-row { grid-template-columns: 1fr; }
  .hero { padding: 60px 0 0; }
  .hero-grid { padding-bottom: 64px; }
  .section { padding: 64px 0; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  /* mobile-first: the check card leads on the homepage */
  .hero-grid .hero-card { order: -1; }
  .sticky-cta { gap: 10px; padding: 11px 44px calc(11px + env(safe-area-inset-bottom)) 14px; }
  .sticky-cta-text { font-size: 0.88rem; line-height: 1.3; }
  body:has(.sticky-cta) { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
  .sample-thumb { width: 56px; }
  .hero { padding: 44px 0 0; }
  .hero-grid { padding-bottom: 52px; }
  .hero-card { padding: 26px; }
  /* Savings band (P0, both graders): the one-row flex band truncated
     the amount at the right edge on phones — the figure the homeowner
     came for. Below this breakpoint the band is a two-row panel:
     label above, value below, value allowed to wrap rather than clip. */
  .savings-band { flex-direction: column; align-items: flex-start; gap: 4px; }
  .savings-band .val { font-size: 1.45rem; white-space: normal; }
  .price { font-size: 2.8rem; }
  .btn-lg { width: 100%; }
}

/* ---- Questionnaire (digital return) ---- */
.q-flow { max-width: 880px; }
.q-flow.narrow { max-width: 680px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--red, #D71920); font-weight: 600; }
.q-progress { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin: 18px 0 6px; }
.q-progress-bar { height: 100%; background: var(--red, #D71920); width: 0; transition: width .3s; }
.q-section { border: 1px solid #e4e4e4; border-radius: 10px; padding: 22px; margin: 22px 0; }
.q-section legend { font-family: Georgia, serif; font-size: 1.25rem; padding: 0 10px; }
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.q-grid label { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.q-grid label.span2 { grid-column: span 2; }
.q-grid input, .q-grid select, .q-grid textarea { padding: 10px 12px; border: 1px solid #cfcfcf; border-radius: 8px; font-size: 1rem; width: 100%; }
.q-grid input[readonly] { background: #f6f6f6; color: #555; }
.req { color: var(--red, #D71920); }
.q-actions { display: flex; gap: 12px; margin: 18px 0; flex-wrap: wrap; }
.q-error { color: #a01218; background: #fdecec; border: 1px solid #f3c2c4; padding: 12px 16px; border-radius: 8px; }
.q-next li { margin-bottom: 14px; }
.q-note { background: #f7f7f7; border-left: 4px solid var(--red, #D71920); padding: 14px 18px; border-radius: 0 8px 8px 0; }
.q-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .93rem; }
.q-table th, .q-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e8e8e8; vertical-align: top; }
.q-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .8rem; background: #eee; }
.q-needs_review .q-pill, .q-pill.q-needs_review { background: #fff3cd; }
.q-verified .q-pill, .q-pill.q-verified { background: #d4edda; }
.q-approved .q-pill, .q-pill.q-approved { background: #cce5ff; }
.q-rejected .q-pill, .q-pill.q-rejected { background: #f8d7da; }
.q-row-material { background: #fff8f8; }
.q-row-diff td { background: #fffbe6; }
.q-flags { list-style: none; padding: 0; }
.q-flag { border: 1px solid #e4e4e4; border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; }
.q-sev-material { border-left: 4px solid #a01218; }
.q-sev-review { border-left: 4px solid #d99a00; }
.q-sev-note { border-left: 4px solid #6c757d; }
.q-decide { display: grid; gap: 12px; max-width: 560px; margin-top: 12px; }
.q-decide label { display: flex; flex-direction: column; gap: 6px; }
.q-decide select, .q-decide textarea { padding: 10px 12px; border: 1px solid #cfcfcf; border-radius: 8px; font-size: 1rem; }
@media (max-width: 640px) { .q-grid { grid-template-columns: 1fr; } .q-grid label.span2 { grid-column: span 1; } }