/* ============================================================
   PropIQ premium overlay - loaded AFTER styles.css.
   Purpose: lift the site to the proposal pages' level.
   Type: Poppins display + Inter body (same families as the
   proposals, so the funnel reads as one brand).
   Canvas: deeper midnight, more air, quieter chrome.
   ============================================================ */

:root {
  --font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --midnight: #0A1527;
  --midnight-2: #0E1B33;
  --glow: rgba(37, 99, 235, 0.16);
}

body { letter-spacing: -0.011em; }

/* ---------- rhythm: rooms, not rows ---------- */
.section { padding: 76px 0; }
@media (min-width: 900px) { .section { padding: 96px 0; } }
.section-portal { padding: 76px 0 40px; }
@media (min-width: 900px) { .section-portal { padding: 96px 0 48px; } }

/* ---------- type scale: Poppins carries the voice ---------- */
.section-title {
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.12;
  font-size: clamp(30px, 4.6vw, 44px);
}
.section-sub-large { font-size: clamp(16px, 2vw, 18.5px); line-height: 1.65; }
.eyebrow, .eyebrow-on-dark { font-weight: 700; letter-spacing: 0.22em; font-size: 11.5px; }

/* Eyebrows on dark get the live-signal dot, the funnel's signature */
.section-dark .eyebrow-on-dark::before,
.hero .eyebrow-on-dark::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--propiq-blue-light);
  margin-right: 9px;
  vertical-align: 2px;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .section-dark .eyebrow-on-dark::before,
  .hero .eyebrow-on-dark::before { animation: none; }
}

/* ---------- header: quieter, glassier ---------- */
.site-header {
  background: rgba(10, 21, 39, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.site-header .brand-mark { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.header-nav a { color: rgba(255, 255, 255, 0.72); font-weight: 500; font-size: 14px; }
.header-nav a:hover { color: #fff; text-decoration: none; }

/* ---------- hero: bigger, calmer, one seamless canvas ---------- */
.hero-dark,
.section-dark {
  background:
    radial-gradient(1100px 480px at 50% -140px, var(--glow), transparent 62%),
    linear-gradient(180deg, var(--midnight) 0%, var(--midnight-2) 100%);
}
.hero { padding: 64px 0 56px; }
@media (min-width: 900px) { .hero { padding: 92px 0 72px; } }
.hero-title {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  font-size: clamp(38px, 6.4vw, 64px);
}
.hero-accent {
  background: linear-gradient(92deg, #60A5FA, #93C5FD);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-oneliner {
  font-size: clamp(16px, 2.1vw, 19px);
  color: rgba(255, 255, 255, 0.78);
  max-width: 620px;
  margin: 18px auto 30px;
}
.video-frame {
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 24px 70px -18px rgba(0, 0, 0, 0.65),
    0 0 90px -30px rgba(37, 99, 235, 0.55);
}

/* ---------- proof strip: engraved, not boxed ---------- */
.proof-strip {
  background: var(--midnight-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.proof-strip .ps-item strong {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.proof-strip .ps-item span { color: rgba(255, 255, 255, 0.55); }

/* ---------- campaign proof (restored section) ---------- */
.cp2 .proof-numbers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 34px 0;
}
@media (min-width: 760px) { .cp2 .proof-numbers { grid-template-columns: repeat(3, 1fr); } }
.cp2 .pn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 22px 20px;
}
.cp2 .pn-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
.cp2 .pn-label { color: rgba(255, 255, 255, 0.72); font-size: 14.5px; margin-top: 8px; }
.cp2 .pn-label em { display: block; font-style: normal; color: rgba(255, 255, 255, 0.45); font-size: 12.5px; margin-top: 4px; }
.cp2 .receipt-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}
.cp2-br { display: none; }
@media (max-width: 600px) { .cp2-br { display: block; } }

/* ---------- 81% band ---------- */
.reach-figure-lg {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #93C5FD, #2563EB);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- search portal: the machine on a pedestal ---------- */
.search-card {
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 18px 50px -20px rgba(15, 23, 42, 0.22), 0 0 0 6px rgba(37, 99, 235, 0.04);
}
.search-input, .search-county, .search-btn { font-family: var(--font-body); }
.search-btn { font-weight: 600; letter-spacing: 0.01em; }

/* ---------- flow + shots ---------- */
.flow-step {
  border-radius: 16px;
  border: 1px solid var(--hairline);
  box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.flow-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.flow-num { font-family: var(--font-head); color: var(--propiq-blue); font-weight: 700; }
.shot-strip-rich img { border-radius: 12px; }
.shot-strip-rich figcaption strong { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- pricing ---------- */
.pricing-config {
  border-radius: 18px;
  border: 1px solid var(--hairline);
  box-shadow: 0 22px 60px -24px rgba(15, 23, 42, 0.25);
}
.pc-card { border-radius: 16px; }
.pc-price, .pc-seat-name, .pc-be-num { font-family: var(--font-head); letter-spacing: -0.02em; }
.pc-options button { font-family: var(--font-body); border-radius: 11px; }
.pricing-lead { margin-top: 64px; }

.cpl-name { font-weight: 600; }
.cpl-val { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.01em; }
.cpl-fill { border-radius: 999px; }
.cpl-track { border-radius: 999px; background: var(--hairline-soft); }

/* ---------- FAQ: full redesign ---------- */
.faq-accordion { border-top: none; margin-top: 30px; display: grid; gap: 10px; }
.faq-accordion .faq-item {
  border: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.faq-accordion .faq-item:hover { border-color: #C7D6F5; }
.faq-accordion .faq-item[open] {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 10px 30px -16px rgba(37, 99, 235, 0.28);
}
.faq-accordion .faq-q {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 18px 52px 18px 20px;
  position: relative;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-accordion .faq-q::-webkit-details-marker { display: none; }
.faq-accordion .faq-q::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--propiq-blue);
  border-bottom: 2px solid var(--propiq-blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-accordion .faq-item[open] .faq-q::after { transform: translateY(-30%) rotate(-135deg); }
.faq-accordion .faq-a {
  padding: 0 20px 18px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  border-top: none;
}
@media (prefers-reduced-motion: reduce) {
  .faq-accordion .faq-q::after { transition: none; }
  .flow-step { transition: none; }
}

/* ---------- final CTA ---------- */
.final-cta-card {
  border-radius: 22px;
  background:
    radial-gradient(700px 320px at 50% -80px, var(--glow), transparent 60%),
    linear-gradient(180deg, var(--midnight) 0%, var(--midnight-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.final-cta-title { font-weight: 800; letter-spacing: -0.03em; }
.final-cta-accent { color: #93C5FD; }

/* ---------- buttons: one confident shape ---------- */
.btn { font-family: var(--font-head); font-weight: 600; letter-spacing: 0; border-radius: 12px; }
.btn-primary {
  box-shadow: 0 10px 26px -10px rgba(37, 99, 235, 0.65);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(37, 99, 235, 0.75); }
@media (prefers-reduced-motion: reduce) { .btn-primary { transition: none; } .btn-primary:hover { transform: none; } }

/* ---------- mobile bottom nav: frosted, thumb-first ---------- */
.navbar-mobile {
  background: rgba(10, 21, 39, 0.88);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.navbar-mobile a { color: rgba(255, 255, 255, 0.78); font-family: var(--font-body); font-weight: 500; }
.navbar-mobile a.nm-cta {
  background: var(--propiq-blue);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
}

/* Hero: centered composition on all sizes */
.hero .container { text-align: center; }
.hero-ctas { align-items: center; }
@media (min-width: 860px) { .hero-ctas .btn { width: auto; min-width: 300px; } }
.hero-video { margin-left: auto; margin-right: auto; }

.hero-ctas { justify-content: center; }

/* ---------- tier exclusivity strip ---------- */
.tier-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 26px 0 6px;
}
@media (min-width: 700px) { .tier-strip { grid-template-columns: repeat(3, 1fr); } }
.tier-chip {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}
.tier-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tier-fit { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.tier-seat {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--propiq-blue-deep);
  background: var(--propiq-blue-soft);
  border-radius: 999px;
  padding: 5px 11px;
}
.pricing-channel-note {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  margin: 16px 0 4px;
}
.pricing-channel-note strong { color: var(--ink); }
.pricing-lead { scroll-margin-top: calc(var(--header-h) + 8px); }

/* ---------- hero video: bigger, cinematic ---------- */
@media (min-width: 1100px) { .hero-video { max-width: 1040px; } }
@media (max-width: 700px) {
  .hero-video { margin-left: -12px; margin-right: -12px; }
  .video-frame { border-radius: 12px; }
}

/* Bigger video: let the proof fill the stage */
@media (min-width: 900px) { .hero-video { max-width: 1080px; } }

/* Small-caps label over the cost bars */
.cpl-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 26px 0 14px;
}

/* ---------- conservative return strip ---------- */
.pc-return {
  margin-top: 16px;
  background: #ECFDF5;
  border: 1px solid rgba(16, 185, 129, 0.30);
  border-radius: 14px;
  padding: 18px 20px;
}
.pc-return-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #047857;
  margin-bottom: 12px;
}
.pc-return-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) { .pc-return-grid { grid-template-columns: repeat(3, 1fr); } }
.pc-return-grid strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: #065F46;
  line-height: 1.1;
}
.pc-return-grid span { font-size: 13px; color: #047857; }
.pc-return-foot { font-size: 12px; color: #059669; margin-top: 12px; }

/* ---------- Coming soon card: no price, no ramp, no return strip ---------- */
.pc-card-soon {
  text-align: center;
  padding: 40px 26px;
}
.pc-soon-tag {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--propiq-blue-soft);
  color: var(--propiq-blue-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.pc-soon-title {
  margin: 16px 0 8px;
  font-family: var(--font-head);
  font-size: clamp(21px, 4.4vw, 29px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pc-soon-body {
  margin: 0 auto 22px;
  max-width: 44ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}
.pc-card-soon .pc-ctas { justify-content: center; }

/* ============================================================
   SMOOTH ANCHOR NAVIGATION
   Anchored sections need scroll-margin-top or the sticky header
   covers the heading they scroll to. --header-h is 56px on mobile
   and 64px from the desktop breakpoint, so this tracks it.
   ============================================================ */
html { scroll-behavior: smooth; }

/* #pricing is the nav's actual target (the .pricing-lead block inside the
   pricing section), not #pricingSection. Both are listed so the offset
   applies whichever one is linked to. */
#proof,
#searchSection,
#how,
#pricing,
#pricingSection,
#faq,
#resultsSection {
  scroll-margin-top: calc(var(--header-h) + 18px);
}

/* Anyone who has asked the OS to reduce motion gets an instant jump. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ============================================================
   CHANNEL CHOICE - a highlight band, not a control
   Echoes the 81% band's weight (dark canvas, centred, gradient
   display type) without copying it. Deliberately no borders,
   no card background, no radius: those affordances made it look
   tappable, which it is not.
   ============================================================ */
.channel-pick { text-align: center; }
.channel-pick-title { margin-bottom: 6px; }

.channel-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin: 34px 0 26px;
}
@media (min-width: 760px) {
  .channel-split {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  /* A hairline divider instead of two boxes. */
  .channel-split .channel-half + .channel-half {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
  .channel-half { padding: 0 34px; }
}

.channel-half-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(26px, 4.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #93C5FD, #2563EB);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.channel-half-line {
  margin: 10px auto 0;
  max-width: 30ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.channel-pick-foot {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   THE MATH panel - tinted so it separates from the pricing
   half that follows inside the same section.
   ============================================================ */
.math-block {
  background:
    radial-gradient(760px 300px at 50% -60px, rgba(37, 99, 235, 0.10), transparent 68%),
    linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 100%);
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 20px;
  padding: 34px 22px 30px;
}
@media (min-width: 900px) { .math-block { padding: 46px 44px 40px; } }
.math-block .cpl-foot { margin-bottom: 0; }

/* ---------- live chip fades out once the video starts ---------- */
.video-live-chip {
  transition: opacity 300ms ease, visibility 0s linear 300ms;
  opacity: 1;
  visibility: visible;
}
.video-live-chip.is-gone {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .video-live-chip { transition: none; }
}

/* The pricing lead used to sit under the math content inside the same
   section, so it carried a 64px top margin. The comparison is now its own
   section, which leaves the lead first in line and double-spaced. */
.section > .container > .pricing-lead:first-child { margin-top: 0; }

/* ============================================================
   ZILLOW COMPARISON - same anatomy as the search section.
   The strip reuses .catches-strip and the card reuses
   .search-card, so gradient, radius, shadow, hairline and
   padding are inherited rather than re-specified.
   ============================================================ */

/* ---- the dark strip: two figures where the portal has one ---- */
.zk-figures {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
@media (min-width: 720px) { .zk-figures { gap: 46px; } }

.zk-fig { min-width: 0; }
.zk-fig .catches-num { display: block; font-size: 34px; }
@media (min-width: 720px) { .zk-fig .catches-num { font-size: 56px; } }
.zk-fig .catches-label { display: block; margin-top: 7px; font-size: 12.5px; }
@media (min-width: 720px) { .zk-fig .catches-label { font-size: 14.5px; } }

/* Theirs sits back: dimmer, smaller, no glow. */
.zk-fig-dim .catches-num {
  color: rgba(255, 255, 255, 0.5);
  text-shadow: none;
  font-size: 26px;
}
@media (min-width: 720px) { .zk-fig-dim .catches-num { font-size: 40px; } }
.zk-fig-dim .catches-label { color: rgba(255, 255, 255, 0.5); }

/* ---- the white card ---- */
.zk-card { margin-top: 24px; }
.zk-title {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(17px, 2.6vw, 22px);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.zk-table { width: 100%; }
.zk-head,
.zk-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
}
@media (min-width: 620px) { .zk-head, .zk-row { gap: 14px; } }

.zk-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.3;
}
@media (min-width: 620px) { .zk-head { font-size: 10.5px; letter-spacing: 0.14em; } }
.zk-head > span:not(:first-child),
.zk-row > span:not(:first-child) { text-align: right; }

.zk-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 11px;
}
@media (min-width: 620px) { .zk-row { padding: 15px 0; font-size: 14.5px; } }
.zk-row:last-child { border-bottom: 0; }

.zk-price { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.zk-fee { color: var(--muted); white-space: nowrap; }
.zk-ours { color: var(--muted); white-space: nowrap; }

/* The star. Same size on every row, so the column reads as one number
   that simply gets bigger down the list. */
.zk-extra {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
  color: var(--propiq-blue);
  white-space: nowrap;
}
@media (min-width: 620px) { .zk-extra { font-size: 17px; } }

.zk-foot {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
@media (min-width: 620px) { .zk-foot { font-size: 14.5px; } }

/* Short column headers on narrow screens so the table never scrolls. */
.zk-short { display: inline; }
.zk-long { display: none; }
@media (min-width: 620px) {
  .zk-short { display: none; }
  .zk-long { display: inline; }
}

/* On narrow screens the difference row wraps and the middot orphans at the
   start of the second line. Drop it and let the two phrases stack. */
@media (max-width: 560px) {
  .zk-diff .catches-sep { display: none; }
  .zk-diff { gap: 2px 10px; }
}