.coverage-hero {
  --coverage-cyan: #00bdcf;
  --coverage-amber: #d89a24;
  background: var(--white);
  color: var(--ink);
}
.coverage-shell { padding-inline: var(--band-pad-x); }
.coverage-frame { padding-top: 72px; border-inline: 0; }
.coverage-stage { display: flex; align-items: center; position: relative; min-height: clamp(640px, 52vw, 740px); isolation: isolate; }
.coverage-copy { position: relative; z-index: 1; width: 44%; padding: 0 0 0 var(--frame-gut); text-align: center; }
.coverage-copy .hero__title { max-width: 560px; margin-inline: auto; }
/* the column narrows before 900px; keep the title on two lines there */
@media (max-width: 1200px) and (min-width: 901px) {
  .coverage-copy .hero__title { font-size: 40px; line-height: 48px; letter-spacing: -1.2px; }
}
@media (max-width: 1000px) and (min-width: 901px) {
  .coverage-copy .hero__title { font-size: 34px; line-height: 40px; letter-spacing: -1.02px; }
}
.coverage-copy .hero__sub { max-width: 355px; margin-inline: auto; font-size: 16px; line-height: 24px; letter-spacing: -.16px; color: rgba(0, 0, 0, .5); }
.coverage-copy .hero__ctas { justify-content: center; gap: 10px; margin-inline: auto; }
.coverage-hero .btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.coverage-hero .btn--ghost:hover { background: rgba(0, 0, 0, .04); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.coverage-hero .btn:focus-visible { outline-color: var(--orange); }
.coverage-site { position: absolute; z-index: 0; width: 82%; right: 0; top: 50%; margin: 0; transform: translateY(-50%); }
.coverage-site-art { position: relative; width: 100%; }
.coverage-site-image { display: block; width: 100%; height: auto; filter: brightness(1.03); }   /* the render's off-white plate clips to page white */
.coverage-site-overlay, .annotation-overlay { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.coverage-site-overlay { overflow: visible; }
#policy-silhouettes path { vector-effect: non-scaling-stroke; }
.policy-fill { fill: var(--coverage-cyan); opacity: .12; }
.policy-outlines { stroke: var(--coverage-cyan); stroke-width: 2.2; fill: none; stroke-linejoin: round; }
.gap-fill { fill: #edb13c70; }
.roof-heatmap { display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.heatmap-ready .roof-heatmap { opacity: 1; }
.heatmap-ready .gap-fill { fill: transparent; }
.gap-outline { stroke: var(--coverage-amber); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.coverage-hero .hero__proof { position: relative; padding-bottom: 48px; }
.coverage-hero .proof__label { text-align: center; color: rgba(0, 0, 0, .4); }
.coverage-hero .proof__logos img { filter: brightness(0); }
@media (max-width: 1100px) and (min-width: 901px) {
  .coverage-copy .hero__ctas { flex-direction: column; align-items: center; }
}
@media (max-width: 900px) {
  .coverage-frame { padding-top: 76px; }
  .coverage-stage { display: block; min-height: 0; }
  .coverage-copy { width: 100%; padding: 70px 24px 0; }
  .coverage-copy .hero__title { max-width: 400px; margin-inline: auto; }
  .coverage-copy .hero__sub { max-width: 380px; }
  .coverage-copy .hero__ctas { margin-top: 26px; }
  .coverage-site { position: relative; width: 100%; top: auto; transform: none; margin: 36px 0 32px; overflow: clip; }
  .coverage-site-art { width: 135%; margin-left: -35%; }
  .coverage-hero .hero__proof { padding-inline: 24px; }
}
@media (max-width: 420px) {
  .coverage-copy { padding-top: 56px; }
  .coverage-copy .hero__ctas { width: min(100%, 280px); }
}
@media (prefers-reduced-motion: reduce) {
  .coverage-hero *, .coverage-hero *::before, .coverage-hero *::after { animation: none !important; transition: none !important; }
  .coverage-hero .btn:active { transform: none; }
}

@property --scan-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.scan-ready .annotation-overlay {
  --previous-scan-y: calc(var(--scan-y) - var(--scan-cycle-distance));
  mask-image: linear-gradient(to bottom,
    transparent calc(var(--scan-y) - 6px),
    black calc(var(--scan-y) + 6px),
    black calc(var(--scan-y) + var(--scan-hold-distance, 48px)),
    transparent calc(var(--scan-y) + var(--scan-fade-distance, 192px))
  ), linear-gradient(to bottom,
    transparent calc(var(--previous-scan-y) - 6px),
    black calc(var(--previous-scan-y) + 6px),
    black calc(var(--previous-scan-y) + var(--scan-hold-distance, 48px)),
    transparent calc(var(--previous-scan-y) + var(--scan-fade-distance, 192px))
  );
  mask-composite: add;
}
.annotation-overlay { pointer-events: none; }
.scan-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out;
  mask-image: linear-gradient(to top, black calc(100% - 24px), transparent);
}
.is-scanning .scan-wrapper { opacity: 1; }
.scan-beam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: white;
  transform: translateY(var(--scan-y));
}
.scan-trail {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: clamp(24px, 4vw, 56px);
  background: linear-gradient(to bottom, rgb(255 255 255 / .32), rgb(255 255 255 / .14) 28%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .scan-ready .annotation-overlay { mask-image: none; }
  .scan-wrapper { display: none; }
}

.coverage-asset-label { pointer-events: none; }
.coverage-asset-label rect { fill: #33251a; fill-opacity: .9; stroke: rgb(255 255 255 / 30%); stroke-width: 1; }
.coverage-asset-label text { fill: #fff; font: 500 14px Inter, sans-serif; letter-spacing: -.2px; }

.coverage-hero .hero__ctas .btn { background: #000; color: #fff; }
@media (hover: hover) {
  .coverage-hero .hero__ctas .btn:hover { background: #222; }
}

.coverage-hero { min-height: 100vh; }
@media (min-width: 901px) {
  .coverage-hero { height: 100vh; }
  .coverage-frame { display: flex; flex-direction: column; height: 100%; }
  .coverage-stage { flex: 1; min-height: 0; }
  .coverage-hero .hero__proof { flex: none; }
}

/* Arrival: title, subline, CTA, then the proof line and its logos rise out of a blur in one stagger,
   held until Inter is in (html.fonts-in, set by coverage-hero.js) so the
   swap never lands mid-motion; the reduced-motion rule above turns it off. */
.coverage-copy > * {
  opacity: 0;
  translate: 0 14px;
  filter: blur(10px);
  transition:
    opacity 900ms var(--ease-out-quint),
    translate 900ms var(--ease-out-quint),
    filter 900ms var(--ease-out-quint);
}
.coverage-copy > :nth-child(2) { transition-delay: 140ms; }
.coverage-copy > :nth-child(3) { transition-delay: 280ms; }
.coverage-hero .proof__label,
.coverage-hero .proof__logos > li {
  opacity: 0;
  translate: 0 10px;
  filter: blur(8px);
  transition:
    opacity 900ms var(--ease-out-quint),
    translate 900ms var(--ease-out-quint),
    filter 900ms var(--ease-out-quint);
}
.coverage-hero .proof__label { transition-delay: 420ms; }
.coverage-hero .proof__logos > li { transition-delay: calc(500ms + (var(--i) - 1) * 60ms); }
.coverage-hero .proof__logos > li:nth-child(1) { --i: 1; }
.coverage-hero .proof__logos > li:nth-child(2) { --i: 2; }
.coverage-hero .proof__logos > li:nth-child(3) { --i: 3; }
.coverage-hero .proof__logos > li:nth-child(4) { --i: 4; }
.coverage-hero .proof__logos > li:nth-child(5) { --i: 5; }
.coverage-hero .proof__logos > li:nth-child(6) { --i: 6; }
html.fonts-in .coverage-copy > *,
html.fonts-in .coverage-hero .proof__label,
html.fonts-in .coverage-hero .proof__logos > li { opacity: 1; translate: 0 0; filter: blur(0); }