/* Audit inside the live window. Does not restyle the bar, the header, or the park.
   The audit is taller than the chat this anchor was built for, so the card was
   growing up into the line and the buttons. Drop the window only. */

@media (min-width: 900px) {
  .hero--city .window-wrap {
    top: calc(100svh - 32px + 72px);
  }
}

.hero--city .audit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 12px 18px;
  align-items: start;
}

.score-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}

.score-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--fire) 0 62%, var(--cream-3) 62% 100%);
  display: grid;
  place-items: center;
  position: relative;
  flex: none;
}

.score-ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fbf8f2;
}

.score-ring span {
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.score-kicker {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}

.score-copy p:last-child {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

.checks { display: grid; gap: 6px; }

.check {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--cream-2);
  font-size: 13px;
}

.check .ok { color: #2f7a3a; font-weight: 600; }
.check .fix { color: #b6421f; font-weight: 600; }

.heatmap {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}

.heatmap span {
  aspect-ratio: 1.15;
  border-radius: 4px;
  background: rgba(228, 87, 46, 0.12);
}

.heatmap span.hot { background: rgba(228, 87, 46, 0.9); }
.heatmap span.warm { background: rgba(228, 87, 46, 0.48); }
.heatmap span.cool { background: rgba(228, 87, 46, 0.24); }

.ext-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}

.ext-card strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.ext-card p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.badge {
  flex: none;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 7px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
}

.mock .mini-score {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.mock .mini-score .score-ring { width: 52px; height: 52px; }
.mock .mini-score .score-ring span { font-size: 16px; }
.mock .mini-score p { color: var(--ink-soft); font-size: 13px; max-width: none; }

.heat-mini {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin: 4px 0 8px;
}

.heat-mini i {
  display: block;
  aspect-ratio: 1.7;
  border-radius: 3px;
  background: rgba(228, 87, 46, 0.14);
}

.heat-mini i.hot { background: rgba(228, 87, 46, 0.9); }
.heat-mini i.warm { background: rgba(228, 87, 46, 0.48); }
.heat-mini i.cool { background: rgba(228, 87, 46, 0.24); }

.sample-line {
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 8px;
}

/* Smaller offer. Not a second primary button. */
.site-offer.section { padding: 52px 0 64px; }
.site-offer h2 { font-size: clamp(24px, 2.2vw, 32px); max-width: 24ch; }
.site-offer .sub { margin-top: 12px; max-width: 52ch; color: var(--paper-soft); font-size: 16px; }
.site-offer .ask {
  display: inline-block;
  margin-top: 16px;
  font-size: 15px;
  color: var(--paper-soft);
  border-bottom: 1px solid var(--line-paper);
  padding-bottom: 2px;
}
.site-offer .ask:hover { color: var(--paper); }

.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.notes h3 { font-size: clamp(20px, 1.6vw, 26px); margin-bottom: 10px; }
.notes p { color: var(--paper-soft); font-size: 16px; max-width: 36ch; }

@media (max-width: 899px) {
  .hero--city .audit { grid-template-columns: minmax(0, 1fr); }
  .hero--city .audit > * { min-width: 0; }
  .notes { grid-template-columns: 1fr; gap: 22px; }
}

@media (min-width: 761px) and (max-height: 860px) {
  .hero--city .audit { gap: 8px 14px; }
  .score-ring { width: 54px; height: 54px; }
  .score-copy p:last-child { font-size: 12px; }
  .check { padding: 5px 8px; }
}