:root {
  --ink: #0f1b2d;
  --ink-2: #44526a;
  --ink-3: #7b879a;
  --paper: #f6f7f4;
  --surface: #ffffff;
  --rule: #dde2e8;
  --accent: #e8702a;
  --accent-ink: #b9531a;
  --focus: #2f6fdf;
  --good: #1f7a4d;
  --warn: #b8860b;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 12px 32px rgba(15, 27, 45, 0.08);
}

* { box-sizing: border-box; }

/* The hidden attribute must always win. Without this, any rule that sets display (the
   question popup, the report body, the scan grid) stays on screen while marked hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* The logo links to the Dialbridge homepage (dialbridge.ai). */
.brand {
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 18px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}
.brand:hover { color: var(--accent-ink); }
.brand:focus-visible,
.home-back:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.home-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--ink-2);
  cursor: pointer;
}
.home-back:hover { border-color: var(--accent); color: var(--accent-ink); }
.home-back-arrow { font-size: 1rem; line-height: 1; }

@media (max-width: 460px) {
  .home-back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .home-back { padding: 7px 11px; }
}
.tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 20px 40px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
}

h1 {
  margin: 0;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}

.sub {
  margin: 18px auto 36px;
  /* Wide enough that the line below holds on one line. It wraps on a phone, which is
     unavoidable and fine; on a laptop it reads as a single statement. */
  max-width: 70ch;
  color: var(--ink-2);
  font-size: 1.05rem;
}

.search { max-width: 620px; margin: 0 auto; text-align: left; }
.combo { position: relative; }

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.search-box:focus-within { border-color: var(--focus); }

.search-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-linecap: round;
}

#bizInput {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 1.02rem;
  color: var(--ink);
  padding: 10px 0;
}
#bizInput::placeholder { color: var(--ink-3); }

.cta {
  flex: none;
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.cta:disabled { background: #f0c3a6; cursor: not-allowed; }
.cta:not(:disabled):hover { background: var(--accent-ink); }

.results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.results ul { list-style: none; margin: 0; padding: 6px; }
.results li button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 10px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.results li button[aria-selected="true"],
.results li button:hover { background: #f1f4f8; }
.results .name { display: block; font-weight: 700; }
.results .addr { display: block; font-size: 0.86rem; color: var(--ink-3); }
.powered {
  margin: 0;
  padding: 8px 18px 10px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
}

.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.status.success { color: var(--good); }

.hint {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--ink-3);
}

.link {
  border: 0;
  background: none;
  padding: 0;
  margin-top: 6px;
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.search > .link { display: block; margin-left: auto; margin-right: auto; }

.status { min-height: 1.5em; margin: 18px 0 0; font-size: 0.92rem; color: var(--ink-2); }
.status.error { color: var(--warn); }

.picked {
  margin: 28px auto 0;
  max-width: 620px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.picked-head { display: flex; justify-content: space-between; align-items: baseline; }
.picked-head .link { margin: 0; }
.picked h2 { margin: 0 0 14px; font-size: 1.4rem; letter-spacing: -0.02em; }

.facts { margin: 0; display: grid; gap: 10px; }
.facts div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--rule);
}
.facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts dt { color: var(--ink-3); font-size: 0.88rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts a { color: var(--focus); }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.82rem; }
.note { margin: 16px 0 0; font-size: 0.84rem; color: var(--ink-3); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .hero { padding-top: 32px; }
  .search-box { flex-wrap: wrap; padding: 8px 12px; }
  .cta { width: 100%; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============ LOADING SCREEN (scan) ============ */
:root {
  --good-soft: #e7f3ec;
  --warn-soft: #fdf4e3;
  --bad: #a33a22;
  --bad-soft: #f8e7e2;
  --accent-soft: #fdeee4;
}

.scan {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 20px 72px;
}

.scan-head { text-align: center; margin-bottom: 28px; }
.scan-head h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }

.scan-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 820px) {
  .scan-grid { grid-template-columns: minmax(0, 1fr); }
  .scan-visual { order: -1; }
}

.scan-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}

.scan-steps { list-style: none; margin: 0; padding: 0; }
.scan-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
  transition: color 0.3s ease;
}
.scan-step:last-child { border-bottom: 0; }
.scan-step.is-active,
.scan-step.is-done { color: var(--ink); }
.scan-step-label { font-weight: 600; font-size: 0.98rem; }

.scan-step-icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  display: grid;
  place-items: center;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.scan-step.is-active .scan-step-icon {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.scan-step.is-active .scan-step-icon::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: scan-pulse 1s ease-in-out infinite;
}
.scan-step.is-done .scan-step-icon { border-color: var(--good); background: var(--good); }
.scan-step.is-done .scan-step-icon::after {
  content: "";
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.scan-progress { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.scan-progress-track { height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.scan-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.6s ease;
}
.scan-progress-label {
  margin: 10px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.scan-visual { position: relative; overflow: hidden; min-height: 440px; display: flex; }
.scan-live { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.scan-live.is-entering { animation: scan-fade 0.35s ease; }

.scan-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: -120px;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(232, 112, 42, 0.07) 70%, rgba(232, 112, 42, 0.18));
  border-bottom: 1px solid rgba(232, 112, 42, 0.45);
  animation: scan-sweep 3.4s ease-in-out infinite;
}

.live-label {
  margin: 0 0 14px;
  text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.muted { margin: 4px 0 0; color: var(--ink-3); font-size: 0.9rem; }

.live-waiting { display: grid; justify-items: center; gap: 12px; text-align: center; }
.spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--rule);
  border-top-color: var(--accent);
  animation: scan-spin 0.8s linear infinite;
}

.badge {
  display: inline-block;
  margin: 12px auto 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}
.badge-good { background: var(--good-soft); color: var(--good); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }

.stars { color: #f2a93b; letter-spacing: 1px; }

/* profile */
.live-profile {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.live-profile-photo { display: block; width: 100%; height: 160px; object-fit: cover; background: var(--paper); }
.live-profile-photo.is-empty { display: grid; place-items: center; color: var(--ink-3); font-size: 0.85rem; }
.live-profile-body { padding: 14px 18px 18px; }
.live-profile-body h3 { margin: 0 0 4px; font-size: 1.1rem; letter-spacing: -0.01em; }
.live-rating { margin: 4px 0 0; font-weight: 700; }

/* competitors */
.live-competitors { display: grid; gap: 12px; }
.live-map { display: block; width: 100%; max-width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); }
.live-compare { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.live-compare th {
  text-align: left;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: 0 8px 6px 0;
  border-bottom: 1px solid var(--rule);
}
.live-compare td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.live-compare td:first-child { max-width: 0; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-compare tr.is-you td { font-weight: 700; color: var(--accent-ink); }

/* reviews */
.live-reviews { display: grid; gap: 10px; justify-items: center; }
.live-review {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
}
.live-review-head { display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: var(--accent-soft); }
.avatar.is-initial { display: grid; place-items: center; font-weight: 700; color: var(--accent-ink); }
.live-review-author { display: grid; min-width: 0; font-size: 0.88rem; }
.live-review-author .muted { margin: 0; font-size: 0.78rem; }
.live-review-head .stars { margin-left: auto; font-size: 0.8rem; }
.live-review-text { margin: 8px 0 0; font-size: 0.88rem; color: var(--ink-2); }

/* photos */
.live-photos { display: grid; justify-items: center; }
.collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 340px; }
.collage img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 6px;
  box-shadow: var(--shadow);
  background: var(--paper);
}
.collage img:nth-child(1) { transform: rotate(-3deg); }
.collage img:nth-child(2) { transform: rotate(2deg); }
.collage img:nth-child(3) { transform: rotate(2deg); }
.collage img:nth-child(4) { transform: rotate(-2deg); }

/* website */
.live-website { display: grid; justify-items: center; text-align: center; gap: 4px; }
.phone {
  width: 150px;
  padding: 7px;
  border-radius: 28px;
  background: #1b2433;
  box-shadow: var(--shadow);
}
.phone-screen {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 210px;
  padding: 22px 10px;
  border-radius: 21px;
  background: var(--surface);
}
.score-ring {
  --tone: var(--warn);
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(var(--tone) calc(var(--pct) * 1%), var(--rule) 0);
  display: grid;
  place-items: center;
}
.score-ring::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.score-ring > span { position: relative; z-index: 1; display: grid; line-height: 1.05; }
.score-ring strong { font-size: 1.7rem; }
.score-ring small { font-size: 0.62rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.tone-good { --tone: var(--good); }
.tone-warn { --tone: var(--warn); }
.tone-bad { --tone: var(--bad); }
.live-domain { margin: 10px 0 0; font-weight: 700; overflow-wrap: anywhere; }

.checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.checks li { display: flex; gap: 8px; align-items: baseline; font-size: 0.9rem; }
.checks li::before { font-weight: 800; }
.checks li.ok::before { content: "\2713"; color: var(--good); }
.checks li.bad::before { content: "\2715"; color: var(--bad); }
.checks-lg li { font-size: 1rem; padding: 6px 0; }
.live-reach { display: grid; justify-items: center; gap: 10px; text-align: center; }

/* done */
.scan-done {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 26px;
}
.scan-done h2 { margin: 0 0 14px; font-size: clamp(1.25rem, 3vw, 1.6rem); letter-spacing: -0.02em; text-wrap: pretty; }
.findings { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.finding { padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.finding-bad { background: var(--bad-soft); color: var(--bad); }
.finding-warn { background: var(--warn-soft); color: var(--warn); }
.scan-done .link { margin-top: 12px; }
.scan-credit { margin: 18px 0 0; text-align: center; font-size: 11px; color: var(--ink-3); }

@keyframes scan-spin { to { transform: rotate(360deg); } }
@keyframes scan-pulse { 0%, 100% { transform: scale(0.7); opacity: 0.6; } 50% { transform: scale(1); opacity: 1; } }
@keyframes scan-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes scan-sweep { 0% { top: -120px; } 60%, 100% { top: 100%; } }

/* ============ FULL REPORT (built from the audit n8n pulls back) ============ */
.report { margin-top: 26px; }
.report-status {
  margin: 0 0 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  font-weight: 600;
  color: var(--ink-2);
}
.report-status.is-working::before {
  content: "";
  display: inline-block;
  width: 13px; height: 13px;
  margin-right: 10px;
  vertical-align: -2px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: scan-spin 0.9s linear infinite;
}
.report-status.is-bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.report-body { display: grid; gap: 18px; animation: scan-fade 0.45s ease both; }

/* score rings */
.ring {
  --tone: var(--warn);
  position: relative;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--tone) calc(var(--pct) * 1%), var(--rule) 0);
  display: grid;
  place-items: center;
}
/* The tone class was on the element all along and nothing ever read it, so every ring
   drew amber: a 33 and an 85 came out the same colour. These are the only two numbers an
   unverified lead sees, so the colour has to mean something. */
.ring.tone-good { --tone: var(--good); }
.ring.tone-warn { --tone: var(--warn); }
.ring.tone-bad { --tone: var(--bad); }
.ring-lg { width: 124px; height: 124px; }
.ring-sm { width: 84px; height: 84px; }
.ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.ring-sm::after { inset: 7px; }
.ring-inner {
  position: relative; z-index: 1;
  display: grid; place-items: center; gap: 1px;
  text-align: center; line-height: 1.05;
}
.ring-lg strong { font-size: 2.3rem; letter-spacing: -0.03em; }
.ring-sm strong { font-size: 1.5rem; letter-spacing: -0.02em; }
.ring small { font-size: 0.58rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }

/* hero */
.report-hero {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px;
}
.report-hero-top { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.report-hero-text { flex: 1 1 280px; min-width: 0; }
.report-hero .eyebrow { margin: 0 0 6px; }
.report-hero h2 { margin: 0 0 10px; font-size: clamp(1.35rem, 3.4vw, 1.9rem); letter-spacing: -0.03em; text-wrap: pretty; }
.report-hero .lead { margin: 0; color: var(--ink-2); font-size: 1rem; }

.stat-row {
  list-style: none;
  margin: 22px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.stat { display: grid; gap: 2px; }
.stat strong { font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1.1; }
.stat span { font-size: 0.78rem; color: var(--ink-3); }
.stat.tone-good strong { color: var(--good); }
.stat.tone-warn strong { color: var(--warn); }
.stat.tone-bad strong { color: var(--bad); }

/* cards */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.card-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); align-items: start; }
.card-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-head h3 { margin: 0; font-size: 1.05rem; letter-spacing: -0.015em; }
.card .muted { font-size: 0.85rem; }
.card .checks { margin-top: 0; }

.pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 99px;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.pill.tone-good { background: var(--good-soft); color: var(--good); }
.pill.tone-warn { background: var(--warn-soft); color: var(--warn); }
.pill.tone-bad { background: var(--bad-soft); color: var(--bad); }

/* findings */
.findings-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.finding-card {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--paper);
  border-left: 4px solid var(--rule);
}
.finding-card.tone-bad { border-left-color: var(--bad); }
.finding-card.tone-warn { border-left-color: var(--warn); }
.finding-card.tone-good { border-left-color: var(--good); }
.finding-num {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; font-weight: 600;
}
.finding-card.tone-bad .finding-num { background: var(--bad); }
.finding-card.tone-warn .finding-num { background: var(--warn); }
.finding-card.tone-good .finding-num { background: var(--good); }
.finding-main { min-width: 0; }
.finding-main p { margin: 0 0 6px; font-size: 0.92rem; color: var(--ink-2); }
.finding-main p:last-child { margin-bottom: 0; }
.finding-title { display: block; margin-bottom: 5px; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.35; }
.finding-fix { color: var(--ink) !important; font-weight: 600; }
.finding-fix span { color: var(--accent-ink); }

/* map */
.map-wrap { margin-bottom: 14px; }

/* The heat map: a clean Google map with our own numbered circles on top. Google's Static
   Maps markers carry a single character, so a rank of 14 could never be drawn on one.
   Positions are percentages so the circles scale with the image on a narrow screen. */
.heat {
  position: relative;
  width: 100%;
  /* Full width of the card. */
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}
.heat-base { display: block; width: 100%; height: 100%; object-fit: cover; }
.heat-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 32px; height: 32px;
  padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 99px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 27, 45, 0.35);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.92rem; font-weight: 600; line-height: 1;
  color: #fff;
  background: var(--ink-3);
}
.heat-pin.tone-good { background: var(--good); }
.heat-pin.tone-warn { background: var(--accent); }
.heat-pin.tone-bad { background: var(--bad); }
@media (max-width: 560px) {
  .heat-pin { min-width: 28px; height: 28px; font-size: 0.74rem; border-width: 1.5px; padding: 0 5px; }
}
.map-legend {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 0.8rem; color: var(--ink-2);
}
.map-legend li { display: flex; align-items: center; gap: 7px; }
.map-legend li::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--rule); }
.map-legend li.tone-good::before { background: var(--good); }
.map-legend li.tone-warn::before { background: var(--accent); }
@media print { .heat-pin { box-shadow: none; } }
.map-legend li.tone-bad::before { background: var(--bad); }

/* Saying which keyword we measured, and offering the others. A multi-trade contractor
   should not have to guess which of their services this map is about. */
.map-switch {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
  margin: 14px 0 0; padding: 12px 14px;
  border: 1px dashed var(--rule); border-radius: 10px;
  font-size: 0.84rem; color: var(--ink-2);
}
.map-switch-btn {
  padding: 7px 12px;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface);
  font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--accent-ink);
  cursor: pointer;
}
.map-switch-btn:hover:not(:disabled) { border-color: var(--accent); background: #fff; }
.map-switch-btn:disabled { color: var(--ink-3); cursor: default; }
.map-switch-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The dynamic intro above the worst-first list, where the red and gold counts it quotes
   are actually visible. */
.findings-intro { margin: -4px 0 16px; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); max-width: 74ch; }

/* The Growth Blueprint offer: the bottom of the report and the second thing we trade.
   The email row used to inherit the deleted email-gate rules, which left an unstyled input
   the height of a label sitting next to a full-size button. */
.card-plan {
  border-top: 4px solid var(--accent);
  border-left: 1px solid var(--rule);
  background: linear-gradient(180deg, #fff, var(--paper));
  padding: 26px 28px 24px;
}
.card-plan h3 { margin: 4px 0 10px; font-size: clamp(1.2rem, 3vw, 1.5rem); letter-spacing: -0.02em; }
.plan-lead { margin: 0 0 20px; font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 62ch; }

.plan-points {
  list-style: none;
  margin: 0 0 24px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 12px;
}
.plan-points li {
  position: relative;
  padding-left: 26px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.plan-points li strong { color: var(--ink); font-weight: 700; }
.plan-points li::before {
  content: "";
  position: absolute; left: 0; top: 0.42em;
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--accent);
}

.plan-form { margin: 0; }
.plan-form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}
.plan-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  max-width: 520px;
}
.plan-form-row input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
}
.plan-form-row input::placeholder { color: var(--ink-3); }
.plan-form-row input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.plan-form-row .cta { flex: none; }
@media (max-width: 460px) {
  .card-plan { padding: 20px 18px; }
  .plan-form-row .cta { width: 100%; }
}

.table-wrap { overflow-x: auto; margin-top: 14px; }
.card .cmp { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.card .cmp th, .card .cmp td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); }
.card .cmp th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); font-weight: 700; }
.card .cmp tr:last-child td { border-bottom: 0; }
.card .cmp td.mono { font-family: "IBM Plex Mono", monospace; }

/* scores */
.grade-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.grade { display: grid; grid-template-columns: minmax(130px, 1fr) 2.2fr auto; gap: 14px; align-items: center; font-size: 0.9rem; }
.grade-name { font-weight: 600; }
.grade-bar, .meter { display: block; height: 9px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.grade-fill, .meter-fill { display: block; height: 100%; border-radius: 99px; background: var(--ink-3); }
.grade.tone-good .grade-fill, .meter-fill.tone-good { background: var(--good); }
.grade.tone-warn .grade-fill, .meter-fill.tone-warn { background: var(--warn); }
.grade.tone-bad .grade-fill, .meter-fill.tone-bad { background: var(--bad); }
.grade-score { color: var(--ink-2); font-size: 0.85rem; }

/* listings + website */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tag {
  padding: 4px 9px; border-radius: 7px;
  font-size: 0.72rem; font-weight: 600;
  background: var(--paper); color: var(--ink-2);
}
.tag.tone-bad { background: var(--bad-soft); color: var(--bad); }
.web-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.web-copy { flex: 1 1 200px; min-width: 0; }
.web-row .live-domain { margin: 0 0 8px; font-size: 0.95rem; }

/* call to action */
.card-cta { background: var(--ink); border-color: var(--ink); color: #fff; }
.card-cta h3 { margin: 0 0 10px; font-size: 1.05rem; }
.card-cta p { margin: 0 0 8px; color: rgba(255, 255, 255, 0.82); }
.card-cta .cta-line { margin: 0; color: #fff; font-weight: 700; font-size: 1.05rem; }

@media (max-width: 560px) {
  .card { padding: 18px; }
  .report-hero { padding: 20px 18px; }
  .ring-lg { width: 104px; height: 104px; }
  .ring-lg strong { font-size: 1.9rem; }
  .grade { grid-template-columns: 1fr auto; }
  .grade-bar { grid-column: 1 / -1; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* what is left of the old email gate: the status line and the fine print, both still
   used by the phone gate. The map visual and the email form went with the gate itself. */
.gate-note { margin: 12px 0 0; font-size: 0.9rem; font-weight: 600; }
.gate-note.is-good { color: var(--good); }
.gate-note.is-bad { color: var(--bad); }
.gate-fine { margin: 14px 0 0 !important; font-size: 0.78rem !important; color: var(--ink-3) !important; line-height: 1.5; max-width: 68ch; }
.web-rings { display: flex; flex-wrap: wrap; gap: 12px; }

/* three questions, asked while the scan runs */
.questions {
  max-width: 620px;
  margin: 22px auto 0;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: scan-fade 0.4s ease both;
}
.q-progress {
  margin: 0 0 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
}
.q-title { margin: 0 0 18px; font-size: clamp(1.1rem, 2.6vw, 1.35rem); letter-spacing: -0.02em; text-wrap: pretty; }
.q-options { display: grid; gap: 10px; }
.q-option {
  width: 100%;
  padding: 15px 18px;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 11px;
  font: inherit;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}
.q-option:hover { border-color: var(--accent); background: var(--surface); }
.q-option:active { transform: translateY(1px); }
.q-option:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.q-intro { margin: 0 0 14px; font-size: 0.92rem; color: var(--ink-2); }

/* two scores side by side: getting found, and catching the lead */
.hero-rings { display: flex; flex-wrap: wrap; gap: 20px; }
.hero-ring { display: grid; justify-items: center; gap: 8px; }
.hero-ring-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}


/* the questions are a popup on the landing page, before the scan */
.q-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 27, 45, 0.55);
  backdrop-filter: blur(3px);
  animation: scan-fade 0.2s ease both;
  overflow-y: auto;
}
.q-overlay .questions { margin: auto; width: 100%; max-width: 560px; }
body.is-locked { overflow: hidden; }
.questions { position: relative; }
.q-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  font-size: 22px; line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
}
.q-close:hover { background: var(--paper); color: var(--ink); }
.q-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.q-back { display: block; margin: 14px auto 0; font-size: 0.85rem; }

/* ============ REPORT: clearer reading order ============ */

/* the journey: find you, check you out, catch the job */
.journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.journey-step { position: relative; display: flex; gap: 12px; align-items: flex-start; padding-right: 22px; }
.journey-body { min-width: 0; }
.journey-sub { margin: 0 0 6px; font-size: 0.8rem; color: var(--ink-3); line-height: 1.4; }
.journey-mark {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 800; font-size: 0.85rem;
  color: #fff;
  background: var(--ink-3);
}
.journey-step.is-ok .journey-mark { background: var(--good); }
.journey-step.is-broken .journey-mark { background: var(--bad); }
.journey-label { margin: 2px 0 1px; font-weight: 700; font-size: 0.97rem; }
.journey-detail { margin: 0; font-size: 0.85rem; color: var(--ink-2); line-height: 1.45; font-weight: 600; }
.journey-step.is-ok .journey-detail { color: var(--good-ink, var(--good)); }
.journey-step.is-broken .journey-detail { color: var(--bad); }
.journey-step.is-broken .journey-label { color: var(--bad); }
.journey-arrow { position: absolute; right: 0; top: 4px; color: var(--rule); font-size: 1.3rem; }

/* hero dials and the money punchline */
.hero-ring-sub { margin: 2px 0 0; font-size: 0.75rem; color: var(--ink-3); max-width: 130px; text-align: center; line-height: 1.35; }
.leak {
  padding: 26px 24px 22px;
  background: var(--bad-soft);
  border: 1px solid #f0cfc4;
  border-radius: var(--radius);
  text-align: center;
}
.leak-lead {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  font-weight: 700;
  color: var(--ink);
}
.leak-value {
  margin: 4px 0 0;
  display: flex; flex-wrap: wrap; gap: 0 10px;
  align-items: baseline; justify-content: center;
  line-height: 1;
}
.leak-value strong {
  font-size: clamp(2.8rem, 11vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--bad);
}
.leak-value span { font-size: clamp(1rem, 3vw, 1.3rem); font-weight: 700; color: var(--bad); }
.leak-sub { margin: 8px 0 0; font-size: 0.95rem; color: var(--ink-2); }

/* The working, kept but demoted. It is here so the total can be argued with, not so it
   gets read first, which is what a bulleted list of it invited. */
.leak-math { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid #f0cfc4; }
.leak-math-head {
  margin: 0 0 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3);
}
/* The working, as a multiplication on one line. Three stacked cells each with a number,
   a label and a note of its own length stacked raggedly, and they read as three hero
   figures competing with the total above them. */
.leak-eq {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  /* Centred, not baseline: on the baseline the multiplication signs sat low against the
     big numbers they separate. Each term still baseline-aligns inside itself. */
  align-items: center;
  justify-content: center;
  margin: 0;
}
.leak-term {
  /* Each term holds together; the line breaks between terms, never inside one. */
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.leak-term b {
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.leak-term span { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.leak-x {
  font-style: normal;
  /* Sized off the numbers rather than the labels, so it reads as an operator between them. */
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  line-height: 1;
  color: var(--ink-3);
}
@media (max-width: 560px) {
  .leak { padding: 22px 18px 18px; }
  /* Stacked on a phone, but each term is still one unbroken row. */
  .leak-eq { flex-direction: column; gap: 6px; align-items: center; }
  .leak-x { display: none; }
}

/* The summary line, now that it sits on its own rather than inside the hero. */
.report-lead {
  margin: 0; padding: 0 2px;
  font-size: 1rem; line-height: 1.65; color: var(--ink-2);
  max-width: 74ch;
}

/* the numbers, as tiles */
.tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.tile { padding: 14px 16px; border-radius: 12px; background: var(--paper); border-left: 3px solid var(--rule); }
.tile.tone-good { border-left-color: var(--good); }
.tile.tone-warn { border-left-color: var(--warn); }
.tile.tone-bad { border-left-color: var(--bad); }
.tile-value { margin: 0 0 4px; display: flex; align-items: baseline; gap: 5px; }
.tile-value strong { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.tile-value span { font-size: 0.8rem; color: var(--ink-3); }
.tile.tone-good .tile-value strong { color: var(--good); }
.tile.tone-warn .tile-value strong { color: var(--warn); }
.tile.tone-bad .tile-value strong { color: var(--bad); }
.tile-label { margin: 0; font-size: 0.82rem; color: var(--ink-2); line-height: 1.4; }

.card-hint { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }

@media (max-width: 720px) {
  .journey { grid-template-columns: 1fr; gap: 14px; }
  .journey-step { padding-right: 0; }
  .journey-arrow { display: none; }
}


/* their site in a phone frame, straight from the speed test */
.shot-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.shot-copy { flex: 1 1 260px; min-width: 0; }
.shot-copy .checks { margin-top: 12px; }

/* the plan: three pillars, taught rather than pitched */
.card-plan { border-top: 4px solid var(--accent); }
.card-plan h3 { margin: 4px 0 10px; font-size: clamp(1.15rem, 2.8vw, 1.45rem); letter-spacing: -0.02em; }
.plan-lead { margin: 0 0 22px; max-width: 72ch; color: var(--ink-2); font-size: 0.97rem; line-height: 1.6; }

.plan-pillars { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .plan-pillars { grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
}

.plan-pillar {
  padding: 18px 18px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
}
/* The pillar their own report is worst at. Everything else is context; this is the bit to
   read, so it gets the accent and a label rather than a louder colour. */
.plan-pillar.is-start { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

.plan-pillar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.plan-eyebrow {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
}
.plan-flag {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}
.plan-heading { margin: 0 0 14px; font-weight: 700; font-size: 0.99rem; line-height: 1.4; letter-spacing: -0.01em; }

.plan-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.plan-items > li { padding-left: 14px; border-left: 2px solid var(--rule); }
.plan-items strong { display: block; margin-bottom: 3px; font-size: 0.9rem; line-height: 1.35; }
.plan-items p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--ink-2); }

.plan-close { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--ink-2); }

.cta-link { display: inline-block; text-decoration: none; margin-top: 4px; }
.cta-fine { margin: 12px 0 0 !important; font-size: 0.85rem; color: rgba(255, 255, 255, 0.66) !important; }
.cta-fine a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cta-fine a:hover { color: var(--accent); }

@media (max-width: 560px) {
}

.cta-ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.cta-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ============ PRINT: the report as a document ============ */
@media print {
  @page { margin: 14mm 12mm; }

  /* Nothing that belongs to the screen version goes on paper. */
  .topbar,
  .topbar-left,
  .scan-grid,
  .scan-head .eyebrow,
  .scan-credit,
  .scan-done,
  #questionsOverlay,
  .card-gate,
  .report-status,
  .cta,
  .cta-link { display: none !important; }

  html, body { background: #fff !important; }
  body { font-size: 10.5pt; }
  .scan { max-width: none; padding: 0; }
  #scanTitle { font-size: 20pt; margin: 0 0 10pt; letter-spacing: -0.02em; }
  .report { margin-top: 8pt; }
  .report-body { display: block; }

  /* Cards become plain sections with a rule, so the ink goes on the words. */
  .card,
  .report-hero,
  .journey {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 0 !important;
    border-top: 1px solid #dde2e8 !important;
    border-radius: 0 !important;
    background: #fff !important;
    padding: 10pt 0 !important;
    margin: 0 !important;
  }
  .report-hero { border-top: 3px solid #e8702a !important; }
  .card-cta, .card-plan { background: #fff !important; color: var(--ink) !important; }
  .card-cta h3, .card-cta p { color: var(--ink) !important; }
  .cta-fine, .cta-fine a { color: var(--ink-2) !important; }
  .card-hint { display: none; }

  /* Keep the two scores and the money figure, they are the summary of the thing. */
  .ring { background: none !important; width: auto !important; height: auto !important; }
  .ring::after { display: none; }
  .ring-inner { display: block; }
  .ring-lg strong { font-size: 26pt; }
  .ring-sm strong { font-size: 16pt; }
  .hero-rings { gap: 26pt; }
  .leak { background: #f8e7e2 !important; padding: 10pt 12pt !important; }

  .journey { display: flex; gap: 14pt; }
  .journey-arrow { display: none; }

  .finding-card { background: #f6f7f4 !important; break-inside: avoid; }
  .phone-frame { background: #fff !important; box-shadow: none !important; border: 1px solid #dde2e8; width: 130pt; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  a[href]::after { content: ""; }

  /* A footer line so a printed page still says where it came from. */
  .report-body::after {
    content: "Prepared by DialBridge. Business details, reviews and ranking data from Google.";
    display: block;
    margin-top: 14pt;
    padding-top: 8pt;
    border-top: 1px solid #dde2e8;
    font-size: 8pt;
    color: #7b879a;
  }
}

/* the real map, drawn during the scan's ranking step */
.live-rank { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 18px 8px; }
.live-rank-line { margin: 0; font-size: 1rem; color: var(--ink); }
.live-rank-line strong { color: var(--accent-ink); }

/* the locked half of the report */
.locked-wrap { display: grid; gap: 18px; }
.locked-wrap.is-locked {
  max-height: 560px;
  overflow: hidden;
  position: relative;
  filter: blur(6px);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}
.locked-wrap.is-locked::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(246, 247, 244, 0), var(--paper));
}

/* ============ THE UNLOCK DIALOG ============ */
/* No close button, no backdrop click, no Escape. The only ways out are the code and the
   link inside the card that abandons the report, because a gate you can dismiss is a gate
   that gets dismissed and the report underneath is the whole thing we are trading for. */
.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  /* No scrim. The two scores sit above this and they are the one thing a lead does get,
     so dimming the whole viewport was greying out the half of the page we want read. The
     blurred stack behind does the work of looking withheld on its own. */
  align-items: flex-end;
  justify-content: center;
  padding: 20px 20px 6vh;
  overflow-y: auto;
  animation: scan-fade 0.24s ease both;
  pointer-events: none;
}
.gate-overlay .card-unlock {
  margin: auto 0 0;
  width: 100%;
  max-width: 540px;
  box-shadow: 0 24px 70px rgba(15, 27, 45, 0.28);
  pointer-events: auto;
}
/* A short window is the common case, not the exception: a 1366x768 laptop leaves about
   640px of viewport. Centring the card there put it straight over the second score, which
   is one of the two things the gate exists to leave visible. So below 820px of height it
   becomes a sheet at the bottom that scrolls inside itself, and the scores keep the top. */
@media (min-width: 561px) and (max-height: 820px) {
  .gate-overlay { padding-bottom: 0; }
  .gate-overlay .card-unlock {
    margin: 0;
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -16px 50px rgba(15, 27, 45, 0.26);
  }
  /* And the rings give up their one-line explanation, which is what buys the room. */
  body.is-locked .hero-ring-sub { display: none; }
  body.is-locked .report-hero { padding: 18px 22px; }
  body.is-locked .ring-lg { width: 104px; height: 104px; }
  body.is-locked .ring-lg strong { font-size: 1.9rem; }
}

/* On a phone the card is taller than the screen, so centred it covered the two scores
   entirely: the one thing the gate is supposed to leave visible. A bottom sheet that
   scrolls inside itself keeps the top of the screen for the scores. */
@media (max-width: 560px) {
  .gate-overlay { align-items: flex-end; padding: 0; }
  .gate-overlay .card-unlock {
    margin: 0;
    max-width: none;
    max-height: 64vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 18px 20px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(15, 27, 45, 0.24);
  }
  .gate-overlay .unlock-lead { font-size: 0.9rem; margin-bottom: 14px; }
  .gate-overlay .gate-fine { font-size: 0.7rem !important; line-height: 1.45; }
  .gate-overlay .unlock-form input { padding: 12px 14px; }

  /* And the hero gives up its explanatory text while the sheet is up, so the numbers and
     the headline fit in what is left. They come back the moment it unlocks. */
  body.is-locked .hero-ring-sub,
  body.is-locked .report-hero .lead { display: none; }
  body.is-locked .report-hero { padding: 16px 18px; }
  body.is-locked .report-hero h2 { font-size: 1.05rem; margin-bottom: 0; line-height: 1.25; }
  body.is-locked #scanTitle { font-size: 1.25rem; }
  body.is-locked .scan-head { margin-bottom: 10px; }
  body.is-locked .hero-rings { gap: 14px; justify-content: center; }
  body.is-locked .ring-lg { width: 88px; height: 88px; }
  body.is-locked .ring-lg strong { font-size: 1.55rem; }
}
.unlock-leave { display: block; margin: 16px 0 0; font-size: 0.82rem; color: var(--ink-3); }

.card-unlock { border-top: 4px solid var(--accent); background: linear-gradient(180deg, #fff, var(--paper)); }
.card-unlock h3 { margin: 4px 0 8px; font-size: clamp(1.15rem, 2.8vw, 1.4rem); letter-spacing: -0.02em; }
.unlock-lead { margin: 0 0 16px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; max-width: 62ch; }
.unlock-form { display: flex; flex-wrap: wrap; gap: 10px; }
.unlock-form input {
  flex: 1 1 190px; min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface);
  font: inherit; font-size: 0.95rem; color: var(--ink);
}
.unlock-form input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.unlock-form .cta { flex: none; }

/* the code step */
.unlock-slot { display: block; }
.unlock-form-code { flex-direction: column; gap: 14px; }
.unlock-code-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }

#unlockCode {
  flex: 0 0 auto;
  width: 188px;
  padding: 12px 14px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  /* letter-spacing adds a trailing gap after the last digit, which shoves the run of
     numbers off centre. The same value as an indent puts it back. */
  text-indent: 0.34em;
  text-align: center;
  color: var(--ink);
}
#unlockCode::placeholder { color: var(--ink-3); font-weight: 400; }

.unlock-links { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.unlock-dot { color: var(--ink-3); }
.unlock-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.unlock-link:hover:not(:disabled) { color: var(--accent-ink); }
.unlock-link:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }
.unlock-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.gate-note:empty { display: none; }

@media (max-width: 460px) {
  #unlockCode { width: 100%; }
  .unlock-code-row .cta { width: 100%; }
  .mock-btn { display: none; }
  .mock-field { padding-right: 13px; }
}

@media print {
  .locked-wrap.is-locked { max-height: none; filter: none; opacity: 1; }
  .locked-wrap.is-locked::after { display: none; }
  .card-unlock, .gate-overlay { display: none !important; }
}


/* ============ HOW IT WORKS (landing page, under the search) ============ */
/* One row per step, the mockup and the words side by side, swapping sides as you go down.
   The mockups are real markup rather than screenshots: they cannot go stale when the UI
   changes, there is nothing to host, and they stay sharp on any screen. */
.how {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 72px;
  text-align: left;
}
.how-title {
  margin: 0 0 34px;
  text-align: center;
  font-size: clamp(1.15rem, 2.8vw, 1.45rem);
  letter-spacing: -0.02em;
}

.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 52px; }
.how-step { display: grid; gap: 22px; align-items: center; }

@media (min-width: 1040px) {
  .how-steps { gap: 80px; }
  /* The mockup needs the bigger share: it is showing real interface, and squeezed into
     half the row every label inside it wrapped. */
  .how-step { grid-template-columns: 1.4fr 1fr; gap: 60px; }
  /* Alternate, so the eye zigzags down the page instead of scanning one column. */
  .how-step:nth-child(even) .how-frame { order: 2; }
}

.how-copy h3 {
  margin: 8px 0 10px;
  font-size: clamp(1.25rem, 3.2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.how-copy > p:last-child { margin: 0; font-size: 0.97rem; line-height: 1.65; color: var(--ink-2); max-width: 46ch; }
.how-num {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
}

/* The browser frame. Enough chrome to read as a screen, not enough to be the point. */
.how-frame {
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 40px -28px rgba(15, 27, 45, 0.45);
}
.how-chrome { display: flex; gap: 6px; padding: 9px 12px; background: #647389; }
.how-chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.how-screen { padding: 22px; min-height: 186px; }

/* --- step 1: the search --- */
.mock-field {
  display: flex; align-items: center; gap: 9px;
  min-width: 0;
  padding: 9px 9px 9px 13px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
}
.mock-lens { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 2; }
.mock-typed {
  font-size: 0.92rem; color: var(--ink);
  white-space: nowrap;
  /* Shrinkable, so a narrow phone trails the text off instead of widening the page. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.mock-caret { width: 1.5px; height: 15px; background: var(--accent); animation: how-blink 1.1s steps(1, end) infinite; }
.mock-btn {
  margin-left: auto; flex: none;
  padding: 7px 13px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 0.76rem; font-weight: 700; white-space: nowrap;
}
.mock-drop {
  margin-top: 8px; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  opacity: 0; animation: how-appear 4s ease-in-out infinite;
}
.mock-opt { padding: 9px 13px; border-bottom: 1px solid var(--rule); }
.mock-opt:last-child { border-bottom: 0; }
.mock-opt:first-child { background: #fdeee4; }
.mock-opt strong { display: block; font-size: 0.88rem; letter-spacing: -0.01em; }
.mock-opt span { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--ink-3); }

/* --- step 2: the questions --- */
.mock-qstep {
  margin: 0 0 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
}
.mock-qtitle { margin: 0 0 14px; font-size: 1.04rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.mock-opts { display: grid; gap: 8px; }
.mock-opts span {
  padding: 10px 13px; border: 1px solid var(--rule); border-radius: 9px;
  font-size: 0.86rem; color: var(--ink-2); background: var(--surface);
}
.mock-opts .is-pick {
  border-color: var(--accent); background: #fdeee4; color: var(--ink); font-weight: 600;
  animation: how-pickfade 4s ease-in-out infinite;
}

/* --- step 3: the report --- */
.mock-rings { display: flex; gap: 22px; align-items: center; }
.mock-ring { display: flex; align-items: baseline; gap: 6px; }
.mock-ring b { font-size: 1.6rem; letter-spacing: -0.03em; color: var(--good); }
.mock-ring.is-bad b { color: var(--bad); }
.mock-ring small { font-size: 0.7rem; color: var(--ink-3); }
.mock-leak {
  margin: 12px 0 10px; padding: 10px 13px; border-radius: 10px; background: #f8e7e2;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.mock-leak b { font-size: 1.15rem; color: var(--bad); letter-spacing: -0.02em; }
.mock-leak span { font-size: 0.76rem; color: var(--ink-2); }
.mock-find {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 0; border-top: 1px solid var(--rule);
}
.mock-find i {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  background: var(--bad); color: #fff;
  font-size: 0.68rem; font-weight: 700; font-style: normal;
  display: grid; place-items: center;
}
.mock-find span { font-size: 0.86rem; }

/* --- step 4: the plan --- */
.mock-plan { display: grid; gap: 9px; }
.mock-pillar {
  position: relative;
  padding: 11px 13px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface);
}
.mock-pillar.is-start { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.mock-pillar em {
  display: block; font-style: normal;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-ink);
}
.mock-pillar b { display: block; margin-top: 3px; font-size: 0.92rem; letter-spacing: -0.01em; }
.mock-flag {
  position: absolute; top: 10px; right: 11px;
  padding: 2px 8px; border-radius: 999px; background: var(--accent);
  font-size: 0.6rem; font-weight: 700; color: #fff;
}

@keyframes how-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes how-appear {
  0%, 16% { opacity: 0; transform: translateY(-4px); }
  30%, 84% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes how-pickfade {
  0%, 20% { border-color: var(--rule); background: var(--surface); }
  36%, 86% { border-color: var(--accent); background: #fdeee4; }
  100% { border-color: var(--rule); background: var(--surface); }
}

/* Three true numbers. No invented count of businesses: a made-up figure on a page aimed at
   prospects is a lie with a legal edge on it, and these are checkable in the code. */
.how-stats {
  list-style: none;
  margin: 56px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 18px;
  text-align: center;
}
@media (min-width: 620px) {
  .how-stats { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.how-stats strong {
  display: block;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  letter-spacing: -0.03em;
  color: var(--accent-ink);
}
.how-stats span { display: block; margin-top: 4px; font-size: 0.84rem; line-height: 1.5; color: var(--ink-2); }

/* Anyone who asked for less motion gets the finished state, not the loop. */
@media (prefers-reduced-motion: reduce) {
  .mock-caret, .mock-drop, .mock-opts .is-pick { animation: none; }
  .mock-drop { opacity: 1; }
  .mock-caret { opacity: 1; }
}

/* The map line in the step 3 mockup: a nine square grid at a glance, so the landing page
   shows that the ranking map comes with the report rather than describing it. */
.mock-mapline {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--rule); border-radius: 9px;
  background: var(--surface);
  font-size: 0.78rem; color: var(--ink-2);
}
/* Solid colours, not the soft ones. At eight pixels a tint reads as grey and the whole
   point of the grid is that two squares are a different colour from the other seven. */
.mock-minigrid { flex: none; display: grid; grid-template-columns: repeat(3, 8px); gap: 2px; }
.mock-minigrid i { width: 8px; height: 8px; border-radius: 2px; background: var(--bad); opacity: 0.85; }
.mock-minigrid i.is-ok { background: var(--good); opacity: 1; }

@media print { .how { display: none !important; } }

/* ============ MOTION ============ */
/* --pct has to be registered or the browser treats it as an unanimatable string and the
   ring snaps to its value instead of filling. */
@property --pct {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.ring { transition: --pct 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* Sections arrive rather than appear. The starting state is only ever applied by
   JavaScript, so without it every section is simply visible. */
.will-rise {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.will-rise.is-in { opacity: 1; transform: none; }

/* The blur lifting over half a second is what makes unlocking feel like opening. */
.locked-wrap { transition: filter 0.55s ease, opacity 0.55s ease; }

/* ============ WHAT IS NEXT ============ */
/* Two hairline rows straight on the paper, not another card. The page is already a stack
   of cards, and a signpost that looks like the content is a signpost nobody reads. */
.nextup {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  margin: 4px 0 2px;
}
.nextup-row {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 2px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.nextup-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--rule);
  color: var(--ink-2);
}
.nextup-mark.is-tick {
  background: var(--good);
  color: #fff;
  animation: tick-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes tick-in {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.nextup-name { font-size: 0.92rem; font-weight: 700; }
.nextup-state { font-size: 0.82rem; color: var(--ink-3); }
.nextup-go { font-size: 0.95rem; color: var(--ink-3); transition: transform 0.2s ease, color 0.2s ease; }

.nextup-row.is-next { cursor: default; }
.nextup.is-ready .nextup-row.is-next { cursor: pointer; }
.nextup.is-ready .nextup-mark { background: var(--accent-soft); color: var(--accent-ink); }
.nextup.is-ready .nextup-row.is-next:hover .nextup-go { transform: translateX(3px); color: var(--accent-ink); }
.nextup.is-ready .nextup-row.is-next:hover .nextup-name { color: var(--accent-ink); }
.nextup-row.is-next:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 560px) {
  .nextup-row { grid-template-columns: 22px 1fr auto; padding: 10px 2px; }
  .nextup-state { grid-column: 2 / -1; font-size: 0.78rem; }
}

/* A single quiet line mid-report, not a second offer competing with the first. */
.blueprint-nudge {
  margin: 2px 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.blueprint-nudge a { color: var(--accent-ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ring, .will-rise, .locked-wrap, .nextup-go { transition: none; }
  .will-rise { opacity: 1; transform: none; }
  .nextup-mark.is-tick { animation: none; }
}

/* ============ WHAT THEY ALREADY WON ============ */
/* Only the capacity track shows this, and it runs above everything else. A business in the
   top three across eight miles is not going to accept an audit that opens on what is wrong,
   and it should not have to. */
.card-won { border-left: 4px solid var(--good); }
.won-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px; }
.won-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start;
  font-size: 0.95rem; line-height: 1.5; color: var(--ink);
}
.won-list li::before {
  content: "\2713";
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--good-soft); color: var(--good);
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 800;
}
.won-note { margin: 14px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); }

/* ============ THE PLAN, BEHIND THE EMAIL ============ */
/* Same treatment as the phone gate above it, because it is the same promise: you can see
   there is something here, and it opens where you are rather than in an inbox. */
.plan-locked { display: grid; gap: 14px; margin-top: 18px; transition: filter 0.55s ease, opacity 0.55s ease; }
.plan-locked.is-locked {
  max-height: 320px;
  overflow: hidden;
  position: relative;
  /* Heavy enough that it reads as "there is something real behind this" rather than as a
     slightly soft paragraph. At blur(6px) the words were still half-legible, which makes
     the gate feel like a formality instead of a trade. */
  filter: blur(11px);
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
}
.plan-locked.is-locked::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 170px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--surface));
}

.plan-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.plan-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.plan-step-n {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 0.82rem; font-weight: 700;
}
.plan-step-t { margin: 3px 0 4px; font-size: 0.98rem; font-weight: 700; line-height: 1.35; }
.plan-step-fix { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .plan-locked { transition: none; }
}

/* ============ THE CENTRE PIN IS THEM ============ */
/* The caption already said the middle one is their address and it still was not obvious:
   people read the map before the sentence under it. */
.heat-pin.is-you {
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--ink);
  z-index: 3;
}
.heat-pin.is-you::after {
  content: "YOUR BUSINESS";
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .heat-pin.is-you::after { content: "YOU"; font-size: 0.55rem; padding: 2px 6px; }
}
.map-legend .is-you-key::before {
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--ink);
}

/* ============ THE PLAN GATE ============ */
/* Centred, and the blur has to read as "there is something real behind this" rather than
   as a slightly soft paragraph. */
.card-plan { text-align: center; }
/* Only the gate's own eyebrow is centred. The one heading the close sits over left-aligned
   steps, and centring it there just looked like a mistake. */
.card-plan > .eyebrow { text-align: center; }
.plan-close .eyebrow { text-align: left; }
.card-plan h3 {
  margin: 6px auto 12px;
  font-size: clamp(1.45rem, 3.6vw, 2rem);
  letter-spacing: -0.03em;
  max-width: 26ch;
  text-wrap: balance;
}
.card-plan .plan-lead { margin: 0 auto; max-width: 52ch; font-size: 1.02rem; }
.card-plan .plan-form { margin: 22px auto 0; max-width: 520px; }
.card-plan .plan-form-label { display: block; text-align: center; }
.card-plan .gate-note { text-align: center; }
.card-plan .gate-fine { max-width: 60ch; margin-left: auto; margin-right: auto; }

/* The plan itself stays left-aligned once it is open; centred body copy is hard to read. */
.plan-locked { text-align: left; }

/* ---- two real listings, side by side ---- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.panel {
  margin: 0; display: grid; gap: 0;
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: var(--surface);
}
.panel-tag {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; font-size: 0.8rem; font-weight: 700;
}
.panel-tag.is-bad { background: var(--bad-soft); color: var(--bad); }
.panel-tag.is-good { background: var(--good-soft); color: var(--good); }
.panel-shot { display: block; width: 100%; height: auto; border-top: 1px solid var(--rule); }
.panel-notes {
  list-style: none; margin: 0; padding: 13px;
  display: grid; gap: 7px;
  border-top: 1px solid var(--rule);
  font-size: 0.83rem; line-height: 1.45; color: var(--ink-2);
}
.panel-notes li { display: flex; gap: 8px; }
.panel-notes li::before { flex: none; font-weight: 700; }
.panel-notes li.bad::before { content: "\2715"; color: var(--bad); }
.panel-notes li.good::before { content: "\2713"; color: var(--good); }

/* ---- a real thread, beside what it is doing ---- */
.showcase { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 22px; align-items: start; }
.device {
  border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow);
}
.device img { display: block; width: 100%; height: auto; }
.showcase-notes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px; align-content: start;
  font-size: 0.94rem; line-height: 1.6; color: var(--ink-2);
}
.showcase-notes b { color: var(--ink); }

/* ---- the close: the order, the number, the ask ---- */
.plan-close { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule); }
.seq { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 1px; background: var(--rule);
       border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.seq-step { background: var(--surface); padding: 14px 16px; display: grid; gap: 4px; }
.seq-when { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.seq-what { font-size: 0.93rem; line-height: 1.6; color: var(--ink-2); }
.plan-money { margin: 16px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-3); }

.plan-ask {
  margin-top: 22px; padding: 20px;
  background: var(--ink); color: #fff; border-radius: 12px;
}
.plan-ask h4 { margin: 0 0 8px; font-size: 1.1rem; letter-spacing: -0.02em; }
.plan-ask p { margin: 0; font-size: 0.94rem; line-height: 1.65; color: #cfd7e2; max-width: 60ch; }

@media (max-width: 640px) {
  .compare { grid-template-columns: 1fr; gap: 14px; }
  .showcase { grid-template-columns: 1fr; gap: 16px; }
  .device { max-width: 280px; }
}

/* ============ WHAT THE HOMEOWNER ACTUALLY SEES ============ */
/* Three cards reading "#19 / X / X" was a scoreboard for a game nobody explained. The list
   itself needs no explaining: these are the companies taking your calls, and that is you
   underneath them. */
.searchlist { display: grid; gap: 10px; }
.sr-head { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
.sr-head b { color: var(--ink); }
.sr-list {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: var(--surface);
}
.sr-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center; gap: 4px 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--rule);
  font-size: 0.93rem;
}
.sr-list > .sr-row:first-child { border-top: 0; }
.sr-pos {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.95rem; font-weight: 600; color: var(--ink-3);
}
.sr-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sr-stars { color: var(--warn); font-size: 0.88rem; white-space: nowrap; }
.sr-reviews { color: var(--ink-3); font-size: 0.85rem; white-space: nowrap; }

.sr-gap {
  padding: 4px 14px 6px 22px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3); font-size: 0.9rem; letter-spacing: 0.2em;
}
.sr-row.is-me {
  background: var(--bad-soft);
  border-top: 1px solid var(--bad);
}
.sr-row.is-me .sr-pos, .sr-row.is-me .sr-name { color: var(--bad); }
.sr-you {
  grid-column: 2 / -1;
  justify-self: start;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--bad);
  padding: 2px 7px; border-radius: 999px;
}
.sr-cap { margin: 0; font-size: 0.85rem; color: var(--ink-3); }

/* ============ THE PRODUCT LINE ============ */
/* Problem, mechanism, then the thing that runs it. Without the third beat the plan read as
   homework for somebody else to do. */
.play-you-tag,
.play-us-tag {
  display: block;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 5px;
}
.play-you-tag { color: var(--bad); }
.play-us {
  display: grid; gap: 7px;
  padding: 15px 17px;
  background: var(--ink); color: #fff;
  border-radius: 10px;
}
.play-us-tag { color: var(--accent); margin-bottom: 0; }
.play-us p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: #e4e9f0; max-width: 64ch; }

/* ============ THE PRIZE ============ */
.prize { margin: 2px 0 4px; }
.prize-n {
  margin: 0;
  font-size: clamp(1.9rem, 5.4vw, 2.9rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
  text-wrap: balance;
}
.prize-v {
  margin: 8px 0 0;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--accent-ink); font-weight: 600;
}
.prize-now { margin: 12px auto 0; max-width: 46ch; font-size: 0.93rem; color: var(--ink-2); line-height: 1.6; }

.leak-note { margin: 12px auto 0; text-align: center; font-size: 0.83rem; line-height: 1.6; color: var(--ink-3); max-width: 62ch; }

@media (max-width: 640px) {
  .sr-row { grid-template-columns: 28px minmax(0, 1fr) auto; row-gap: 2px; padding: 11px 12px; }
  .sr-reviews { grid-column: 2 / -1; }
  .sr-stars { grid-column: 3; }
}

/* ============ ONE QUOTE, TWICE ============ */
/* No screenshot exists for a thing that does not happen, so this one is drawn. */
.quotetrack { display: grid; gap: 10px; }
.qt-row {
  display: grid; gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--surface);
}
.qt-row.tone-bad { border-left: 3px solid var(--bad); }
.qt-row.tone-good { border-left: 3px solid var(--good); }
.qt-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3);
}
.qt-row.tone-bad .qt-label { color: var(--bad); }
.qt-row.tone-good .qt-label { color: var(--good); }
.qt-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px;
}
.qt-step, .qt-end {
  font-size: 0.82rem; line-height: 1.3;
  padding: 6px 10px; border-radius: 7px;
  background: var(--paper); color: var(--ink-2);
  white-space: nowrap;
}
.qt-steps li + li::before {
  content: "\203A";
  margin-right: 8px; margin-left: -2px;
  color: var(--ink-3); font-weight: 700;
}
.qt-end { font-weight: 700; }
.qt-row.tone-bad .qt-end { background: var(--bad-soft); color: var(--bad); }
.qt-row.tone-good .qt-end { background: var(--good-soft); color: var(--good); }
.qt-cap { margin: 2px 0 0; font-size: 0.85rem; color: var(--ink-3); }

@media (max-width: 560px) {
  .qt-step, .qt-end { font-size: 0.76rem; padding: 5px 8px; }
}

/* ============ THE PHONE ============ */
/* What made the old one read as a placeholder was not detail, it was proportion: one
   radius, one flat fill, no bezel logic. This is built the way the object is: concentric
   corner radii (body radius minus bezel = screen radius), an even bezel all the way
   round, buttons that sit a pixel proud of the edge, and a status bar that is quiet. */
.shot-device { flex: none; width: 236px; display: grid; gap: 12px; }
.device-phone { display: grid; gap: 8px; }

.dp-body {
  position: relative;
  padding: 5px;                   /* the bezel */
  border-radius: 34px;            /* screen radius 29 + 5 bezel */
  background: linear-gradient(160deg, #3d4553 0%, #20262f 42%, #171b22 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 1px 1px rgba(255, 255, 255, 0.22) inset,
    0 18px 38px rgba(15, 27, 45, 0.28),
    0 3px 8px rgba(15, 27, 45, 0.18);
}
.dp-screen {
  position: relative;
  border-radius: 29px;
  overflow: hidden;
  background: #fff;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* buttons, a pixel proud of the rail */
.dp-btn { position: absolute; width: 2px; border-radius: 2px; background: #2b323d; }
.dp-mute   { left: -2px; top: 78px;  height: 20px; }
.dp-vol-up { left: -2px; top: 108px; height: 32px; }
.dp-vol-dn { left: -2px; top: 148px; height: 32px; }
.dp-power  { right: -2px; top: 120px; height: 46px; }

.dp-status {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 15px 6px;
  background: #fff;
  color: #11151b;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.01em;
}
.dp-time { font-variant-numeric: tabular-nums; }
.dp-island {
  position: absolute; left: 50%; top: 5px; transform: translateX(-50%);
  width: 56px; height: 15px; border-radius: 999px; background: #0b0e13;
}
.dp-icons { width: 40px; height: 11px; color: #11151b; }

.dp-view { position: relative; background: #fff; min-height: 300px; overflow: hidden; }
.dp-shot { display: block; width: 100%; height: auto; }
.dp-home {
  position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  width: 84px; height: 4px; border-radius: 999px;
  background: rgba(10, 14, 20, 0.32);
  z-index: 2;
}
.dp-label { margin: 0; text-align: center; font-size: 0.78rem; color: var(--ink-3); }

/* ---- the playback ---- */
.lp-controls { display: grid; gap: 7px; }
.lp-bar { height: 4px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.lp-bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); }
.lp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-clock {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.86rem; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lp-replay {
  border: 0; background: none; padding: 2px 0;
  font: inherit; font-size: 0.8rem; color: var(--accent-ink);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.lp-replay:hover { text-decoration: underline; }

/* ---- speed as time, not as a grade ---- */
.loadline { margin: 16px 0 4px; display: grid; gap: 10px; }
.ll-row {
  display: grid;
  grid-template-columns: minmax(0, 132px) 1fr 44px;
  align-items: center; gap: 12px;
}
.ll-lab { font-size: 0.82rem; color: var(--ink-2); }
.ll-track {
  position: relative;
  height: 10px; border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}
.ll-fill { display: block; height: 100%; border-radius: 999px; }
.ll-fill.tone-good { background: var(--good); }
.ll-fill.tone-warn { background: var(--accent); }
.ll-fill.tone-bad { background: var(--bad); }
.ll-line {
  position: absolute; top: -2px; bottom: -2px; width: 0;
  border-left: 2px dashed rgba(15, 27, 45, 0.45);
}
.ll-val {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.86rem; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums;
}
.ll-val.tone-good { color: var(--good); }
.ll-val.tone-warn { color: var(--accent-ink); }
.ll-val.tone-bad { color: var(--bad); }
.ll-key { margin: 2px 0 0; font-size: 0.76rem; color: var(--ink-3); }

@media (max-width: 640px) {
  .shot-device { width: 100%; max-width: 250px; margin: 0 auto; }
  .ll-row { grid-template-columns: minmax(0, 104px) 1fr 40px; gap: 9px; }
  .ll-lab { font-size: 0.76rem; }
}

/* ============ FACTS INSTEAD OF A PARAGRAPH ============ */
/* The "why it works" prose was the part a tired contractor scrolled past, and it was doing
   the job the picture should do. */
.play-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.play-facts li {
  display: grid; gap: 4px; align-content: start;
  padding-top: 11px; border-top: 2px solid var(--rule);
}
.pf-n {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.98rem; font-weight: 600; color: var(--accent-ink);
  letter-spacing: -0.01em;
}
.pf-t { font-size: 0.85rem; line-height: 1.5; color: var(--ink-2); }

/* ============ THE ANSWER AN ASSISTANT GIVES ============ */
.airep { display: grid; gap: 8px; }
.ai-win {
  border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
  background: var(--surface);
}
.ai-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.ai-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); flex: none; }
.ai-bar-t { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ai-ask {
  margin: 0; padding: 14px 16px 12px;
  font-size: 1rem; font-weight: 600; color: var(--ink);
}
.ai-say { padding: 0 16px 16px; border-top: 1px dashed var(--rule); padding-top: 14px; margin: 0 16px; }
.ai-intro { margin: 0 0 10px; font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; }
.ai-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.ai-list li { font-size: 0.9rem; color: var(--ink-2); }
.ai-list b { display: block; color: var(--ink); font-weight: 600; }
.ai-miss {
  margin: 0; padding: 11px 14px;
  border-radius: 10px; background: var(--bad-soft); color: var(--bad);
  font-size: 0.9rem;
}
.ai-miss b { font-weight: 700; }

/* ============ THE REVIEW GAP, DRAWN ============ */
.reviewgap { display: grid; gap: 12px; }
.rg-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.rg-name { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.rg-row.is-me .rg-name { color: var(--bad); }
.rg-track { height: 22px; border-radius: 6px; background: var(--rule); overflow: hidden; }
.rg-fill { display: block; height: 100%; border-radius: 6px; background: var(--ink-3); }
.rg-row.is-me .rg-fill { background: var(--bad); }
.rg-n {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.9rem; color: var(--ink);
}
.rg-n b { font-size: 1.15rem; font-weight: 600; }
.rg-stars { color: var(--warn); font-family: inherit; }

@media (max-width: 700px) {
  .play-facts { grid-template-columns: 1fr; gap: 12px; }
  .play-facts li { padding-top: 9px; }
}

/* A service-area business gets no grid, so the section shows the market instead. */
.nomap-market { margin: 16px 0 14px; display: grid; gap: 10px; }

/* ============ THE PLAN, AS A PRODUCT ============ */
/* Alternating, calm, and mostly whitespace. The old version stacked a heading, a red
   label, a picture, three columns of facts and a black slab, which is five voices
   competing. Here the product name leads, the gap sits under it in one line, the list says
   what is in it, and the result is the only thing given any emphasis. */
.features { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }

.fb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
  padding: 48px 0;
  border-top: 1px solid var(--rule);
}
.fb:first-child { border-top: 0; padding-top: 18px; }
/* Every other one flips, so the eye zigzags instead of running down one rail. */
.fb:nth-child(even) { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.fb:nth-child(even) .fb-copy { order: 2; }

.fb-letter {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--ink-3); margin-bottom: 18px;
}
.fb-name {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.12;
  text-wrap: balance;
}
.fb-issue { margin: 0 0 22px; font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }

.fb-list { list-style: none; margin: 0; padding: 0; display: grid; }
.fb-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem; line-height: 1.5; color: var(--ink);
}
.fb-list li:first-child { border-top: 1px solid var(--rule); }
.fb-list li::before {
  content: "\2713";
  color: var(--good); font-weight: 700; font-size: 0.95rem; line-height: 1.5;
}

.fb-result { margin-top: 22px; }
.fb-result-tag {
  display: block;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 7px;
}
.fb-result-t { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); font-weight: 600; max-width: 48ch; }
.fb-result-n { margin: 8px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--ink-3); max-width: 50ch; }

/* The artwork sits on its own soft ground, which is what stops a screenshot from looking
   like it fell onto the page. */
.fb-art {
  background: var(--paper);
  border-radius: 22px;
  padding: 26px;
  display: grid; align-content: center;
}
.fb-art > * { margin: 0; }
.fb-art .play-visual { margin: 0; }

@media (max-width: 860px) {
  .fb { grid-template-columns: 1fr; gap: 26px; padding: 34px 0; }
  .fb:nth-child(even) .fb-copy { order: 0; }
  .fb-art { padding: 18px; border-radius: 16px; }
}

/* ============ THEIR OWN LISTING, MARKED UP ============ */
/* Rebuilt from the Places data rather than screenshotted off Google, so it never breaks
   and we can put a marker exactly on the field that is empty. */
.gl-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05), 0 10px 26px rgba(15, 27, 45, 0.07);
}
.gl-photo { aspect-ratio: 16 / 9; background: var(--rule); }
.gl-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-photo.is-empty {
  display: grid; place-items: center; gap: 8px; align-content: center;
  background: repeating-linear-gradient(45deg, #eef0f3 0 10px, #e7eaee 10px 20px);
}
.gl-empty-t { font-size: 0.85rem; color: var(--ink-3); }

.gl-head { padding: 14px 16px 12px; }
.gl-name { margin: 0 0 5px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.gl-rate { margin: 0 0 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.88rem; }
.gl-rate b { font-weight: 700; }
.gl-stars { color: #f0a30a; letter-spacing: 0.04em; }
.gl-count { color: var(--ink-3); }
.gl-cat { margin: 0; font-size: 0.85rem; color: var(--ink-2); }

.gl-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.gl-row {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 11px; align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.87rem;
}
.gl-rows .gl-row:last-child { border-bottom: 0; }
.gl-row.is-gap { background: var(--bad-soft); }
.gl-ico { color: var(--ink-3); font-size: 0.8rem; text-align: center; }
.gl-txt { color: var(--ink); overflow-wrap: anywhere; }
.gl-row.is-gap .gl-txt { color: var(--bad); }
.gl-tag {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
.gl-tag.is-ok { background: var(--good-soft); color: var(--good); }
.gl-tag.is-gap { background: var(--bad); color: #fff; }

/* ============ TIGHTER, BIGGER, LESS ============ */
/* The copy column now carries forty words, so it can be narrower and the artwork can
   take the room. Sizes go up because there is finally space for them. */
.fb { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 44px; padding: 56px 0; }
.fb-name { font-size: clamp(1.7rem, 3.8vw, 2.4rem); margin-bottom: 14px; }
.fb-issue { font-size: 1.08rem; margin-bottom: 20px; max-width: 34ch; color: var(--ink); }
.fb-list li { padding: 11px 0; font-size: 1rem; font-weight: 500; }
.fb-result { margin-top: 20px; }
.fb-result-t { font-size: 1.22rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.015em; max-width: 30ch; }
.fb-result-n { font-size: 0.72rem; margin-top: 6px; }
.fb-art { padding: 30px; }

/* The review gap is the single strongest number in the report. Draw it like one. */
.reviewgap { gap: 18px; }
.rg-name { font-size: 0.95rem; }
.rg-track { height: 38px; border-radius: 9px; }
.rg-n b { font-size: 1.9rem; }

.sr-row { padding: 15px 16px; font-size: 1rem; }
.sr-row.is-me .sr-name { font-size: 1.02rem; }
.ai-miss { font-size: 1.02rem; padding: 14px 16px; }
.ai-list b { font-size: 0.98rem; }

@media (max-width: 860px) {
  /* The column override above this block is unconditional and later in the file than the
     original phone rule, so it was winning at every width and squeezing two columns onto
     a 390px screen with names wrapping one letter per line. Re-collapse it here. */
  .fb { grid-template-columns: 1fr; padding: 40px 0; }
  .fb:nth-child(even) .fb-copy { order: 0; }
  .fb-art { padding: 20px; }
  .fb-name { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
}


/* ============ THE PLAN, AS A CHECKLIST ============ */
.ck-head { display: grid; gap: 10px; margin: 4px 0 8px; }
.ck-count { margin: 0; font-size: 1.05rem; color: var(--ink-2); }
.ck-count b { font-size: 1.7rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; margin-right: 5px; }
.ck-bar { display: block; height: 8px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.ck-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--good); }

.ck-stage { margin-top: 28px; }
.ck-stage-t { margin: 0 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ck-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ck-list > li { border-bottom: 1px solid var(--rule); }

.ck-row { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 15px 0; }
details.ck-row { display: block; padding: 0; }
.ck-sum { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 15px 0; cursor: pointer; list-style: none; }
.ck-sum::-webkit-details-marker { display: none; }

.ck-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.85rem; font-weight: 800; }
.ck-ico.is-done { background: var(--good-soft); color: var(--good); }
.ck-ico.is-todo { background: var(--bad-soft); color: var(--bad); }
.ck-ico.is-unknown { background: var(--paper); color: var(--ink-3); border: 1px dashed var(--ink-3); }

.ck-body { display: grid; gap: 2px; min-width: 0; }
.ck-label { font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.35; }
.ck-row.is-done .ck-label { color: var(--ink-2); font-weight: 500; }
.ck-note { font-size: 0.8rem; color: var(--ink-3); }
.ck-chev { font-size: 1.5rem; line-height: 1; color: var(--ink-3); transition: transform 0.2s ease; }
details[open] .ck-chev { transform: rotate(90deg); }

.ck-detail { padding: 2px 0 22px 42px; }
.ck-detail .play-visual { margin: 0; background: var(--paper); border-radius: 16px; padding: 20px; }

.plan-close { margin-top: 30px; padding-top: 0; border-top: 0; }

@media (max-width: 640px) {
  .ck-detail { padding-left: 0; }
  .ck-detail .play-visual { padding: 14px; }
  .ck-label { font-size: 0.98rem; }
}
@media (prefers-reduced-motion: reduce) { .ck-chev { transition: none; } }

/* The empty photo slot in a listing replica was a 16:9 box, which on the checklist's
   full-width column became a striped billboard. Empty needs no aspect ratio. */
.gl-photo.is-empty { aspect-ratio: auto; min-height: 112px; padding: 26px 0; }


/* ============ THE PLAN, AS THE PRODUCT ============ */
/* The "right now" line is the only place their numbers appear, and it sits last and small,
   as the reason for the piece above it rather than the headline. */
.fb-now { margin: 18px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
.fb-now-tag { display: inline-block; margin-right: 8px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }

/* ---- A. now and done, side by side ---- */
.gba { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.gba-col { display: grid; gap: 8px; }
.gba-tag { justify-self: start; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.gba-tag.is-now { background: var(--bad-soft); color: var(--bad); }
.gba-tag.is-done { background: var(--good-soft); color: var(--good); }
.gba .gl-card { font-size: 0.92em; }
.gba .gl-photo { aspect-ratio: 16 / 8; }
.gl-photo.is-after { display: grid; place-items: center; gap: 7px; align-content: center; background: var(--good-soft); aspect-ratio: auto; min-height: 112px; padding: 26px 0; }
.gl-after-t { font-size: 0.85rem; color: var(--good); font-weight: 600; }
.mylisting.is-after .gl-row.is-gap { background: transparent; }
.mylisting.is-after .gl-tag.is-ok { background: var(--good-soft); color: var(--good); }

/* ---- a text thread, on her phone ---- */
.sms-wrap { display: grid; grid-template-rows: auto 1fr; min-height: 380px; background: #fff; }
.sms-head { display: grid; justify-items: center; gap: 3px; padding: 6px 12px 10px; border-bottom: 1px solid #e6e9ee; }
.sms-avatar { width: 34px; height: 34px; border-radius: 50%; background: #8e96a3; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.sms-name { font-size: 10px; color: #11151b; max-width: 150px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sms-body { display: grid; gap: 7px; padding: 12px 10px 16px; align-content: start; }
.sms { display: grid; gap: 3px; max-width: 84%; }
.sms-biz { justify-self: start; }
.sms-me { justify-self: end; }
.sms-sys { justify-self: center; max-width: 100%; }
.sms-b { margin: 0; font-size: 10.5px; line-height: 1.35; padding: 7px 10px; border-radius: 14px; }
.sms-biz .sms-b { background: #e9ebef; color: #11151b; border-bottom-left-radius: 4px; }
.sms-me .sms-b { background: #34c759; color: #fff; border-bottom-right-radius: 4px; }
.sms-sys .sms-b { display: none; }
.sms-stamp { font-size: 8.5px; color: #8e96a3; text-align: center; }
.sms-sys .sms-stamp { padding: 4px 10px; background: #f1f3f6; border-radius: 999px; color: #b3261e; font-weight: 600; }
.sms-note { font-size: 8.5px; color: #8e96a3; padding-left: 4px; }
.textback .device-phone, .sitemock .device-phone { max-width: 250px; margin: 0 auto; }

/* ---- B. the site, on a phone ---- */
.site-wrap { min-height: 380px; background: #fff; display: grid; grid-template-rows: auto auto 1fr auto; font-size: 10.5px; color: #11151b; }
.site-bar { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid #e6e9ee; }
.site-logo { font-weight: 800; letter-spacing: -0.02em; font-size: 11px; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-call { font-size: 9px; font-weight: 700; color: var(--accent-ink); }
.site-hero { padding: 16px 12px 14px; background: linear-gradient(180deg, #f6f7f4, #fff); display: grid; gap: 8px; }
.site-kicker { margin: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.site-h1 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.site-ctas { display: grid; gap: 6px; margin-top: 4px; }
.site-btn { display: block; text-align: center; padding: 8px 10px; border-radius: 9px; font-weight: 700; font-size: 10px; border: 1px solid #d5dae1; }
.site-btn.is-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.site-list { list-style: none; margin: 0; padding: 4px 12px; display: grid; }
.site-list li { padding: 8px 0; border-bottom: 1px solid #eef0f3; }
.site-proof { display: flex; gap: 8px; align-items: center; padding: 10px 12px 12px; font-size: 9px; color: #5b6573; }
.site-stars { color: #f0a30a; letter-spacing: 0.05em; }

/* ---- C. the review system, three things that happen ---- */
.reviewflow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: start; }
.rf-step { display: grid; gap: 8px; }
.rf-n { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; }
.rf-t { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.rf-arrow { align-self: center; margin-top: 44px; color: var(--ink-3); font-size: 1.2rem; }
.rf-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 12px; display: grid; gap: 6px; font-size: 0.8rem; box-shadow: 0 1px 2px rgba(15,27,45,0.05); }
.rf-job { justify-items: center; text-align: center; padding: 18px 12px; }
.rf-job-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--good-soft); color: var(--good); display: grid; place-items: center; font-weight: 800; }
.rf-job-t { font-weight: 700; color: var(--ink); }
.rf-job-s { font-size: 0.72rem; color: var(--ink-3); }
.rf-from { font-size: 0.68rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.rf-b { margin: 0; background: #e9ebef; border-radius: 12px; border-bottom-left-radius: 4px; padding: 8px 10px; line-height: 1.4; color: #11151b; }
.rf-link { font-size: 0.75rem; color: #2f6fdf; text-decoration: underline; }
.rf-when { font-size: 0.68rem; color: var(--ink-3); }
.rf-rev-head { display: flex; gap: 8px; align-items: center; }
.rf-rev-av { width: 26px; height: 26px; border-radius: 50%; background: #7a5c4e; color: #fff; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; }
.rf-rev-who { display: grid; line-height: 1.2; }
.rf-rev-who b { font-size: 0.8rem; }
.rf-rev-who span { font-size: 0.68rem; color: var(--ink-3); }
.rf-rev-stars { color: #f0a30a; letter-spacing: 0.06em; }
.rf-rev-b { margin: 0; line-height: 1.4; color: var(--ink); }
.rf-rev-on { font-size: 0.68rem; color: var(--ink-3); }

/* ---- F. what the AI reads ---- */
.aiing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.aii-tile { display: grid; gap: 4px; padding: 14px; border-radius: 12px; border: 1px solid var(--rule); background: var(--surface); }
.aii-l { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.aii-v { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
.aii-t { font-size: 0.76rem; line-height: 1.4; color: var(--ink-2); }
.aii-tile.is-ok { border-color: var(--good); } .aii-tile.is-ok .aii-v { color: var(--good); }
.aii-tile.is-warn .aii-v { color: var(--accent-ink); }
.aii-tile.is-gap { border-color: var(--bad); background: var(--bad-soft); } .aii-tile.is-gap .aii-v { color: var(--bad); }
.aii-tile.is-unknown .aii-v { color: var(--ink-3); }

@media (max-width: 860px) {
  .gba { grid-template-columns: 1fr; }
  .reviewflow { grid-template-columns: 1fr; }
  .rf-arrow { margin: 0; justify-self: center; transform: rotate(90deg); }
  .aiing { grid-template-columns: 1fr; }
}

/* Review flow: the ask card gets the width, the two ends stay compact. */
.reviewflow { grid-template-columns: 0.8fr auto 1.25fr auto 1fr; }
.fb-now-tag { display: block; margin: 0 0 4px; }
/* AEO goal: their line is the one that stands out. */
.airep.is-goal .ai-list li.is-me b { color: var(--good); }
.ai-you { display: inline-block; margin: 0 0 3px 6px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--good); padding: 2px 6px; border-radius: 999px; vertical-align: middle; }
.airep.is-goal .ai-list li.is-me { background: var(--good-soft); margin-left: -8px; padding: 6px 8px; border-radius: 8px; }
@media (max-width: 860px) { .reviewflow { grid-template-columns: 1fr; } }


/* ============ THE PLAN, AS ONE PICTURE ============ */
.pp-head { margin: 8px 0 20px; text-align: center; }
.pp-h { margin: 0; font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }

.pipe { position: relative; padding-bottom: 8px; }
.pp-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px;
  position: relative; z-index: 1;
}
.pp-stage {
  position: relative;
  display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center;
  padding: 20px 12px 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05), 0 8px 22px rgba(15, 27, 45, 0.06);
}
/* The arrow between stages sits in the gap. */
.pp-stage:not(:last-child)::after {
  content: "";
  position: absolute; top: 50px; right: -18px;
  width: 14px; height: 14px;
  border-top: 2.5px solid var(--accent); border-right: 2.5px solid var(--accent);
  transform: rotate(45deg);
}
.pp-stage.is-lead { background: var(--paper); box-shadow: none; }
.pp-n {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 700;
}
.pp-ico {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
}
.pp-stage.is-lead .pp-ico { background: var(--surface); color: var(--ink-2); border: 1px solid var(--rule); }
.pp-icon { width: 26px; height: 26px; }
.pp-t { margin: 2px 0 0; font-size: 0.98rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.pp-l { margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--ink-2); }
.pp-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 4px; }
.pp-tag {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 999px;
  background: var(--ink); color: #fff;
}

/* The loop: from the last stage back round to the first. */
.pp-loop {
  position: relative;
  margin: -14px 9% 0;
  height: 54px;
  border: 2.5px dashed var(--good);
  border-top: 0;
  border-radius: 0 0 22px 22px;
}
.pp-loop::before {
  content: "";
  position: absolute; top: -2px; left: -9px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 11px solid var(--good);
}
.pp-loop-t {
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  background: var(--surface);
  padding: 2px 12px;
  font-size: 0.82rem; font-weight: 700; color: var(--good);
  white-space: nowrap;
}
.pp-loop-sr { display: none; }

/* What's included: two columns, one line each. */
.pp-inc { margin-top: 46px; }
.pp-inc-h { margin: 0 0 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.pp-inc-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
}
.pp-inc-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.pp-inc-list li::before { content: "\2713"; grid-row: 1 / 3; color: var(--good); font-weight: 800; }
.pp-inc-list b { font-size: 0.98rem; color: var(--ink); }
.pp-inc-list span { font-size: 0.85rem; color: var(--ink-2); }

@media (max-width: 860px) {
  .pp-row { grid-template-columns: 1fr; gap: 26px; }
  .pp-stage { grid-template-columns: 52px 1fr; justify-items: start; text-align: left; column-gap: 14px; padding: 16px; }
  .pp-stage .pp-ico { grid-row: 1 / 4; }
  .pp-tags { justify-content: flex-start; }
  .pp-n { left: 16px; transform: none; }
  .pp-stage:not(:last-child)::after { top: auto; bottom: -19px; right: auto; left: 34px; transform: rotate(135deg); }
  .pp-loop { display: none; }
  .pp-loop-sr {
    display: block; margin: 18px 0 0; padding: 12px 14px;
    border: 2px dashed var(--good); border-radius: 12px;
    font-size: 0.88rem; font-weight: 700; color: var(--good); text-align: center;
  }
  .pp-inc-list { grid-template-columns: 1fr; }
}


/* ---- the two parts ---- */
.pp-part { display: flex; align-items: center; gap: 12px; margin: 34px 0 18px; }
.pp-part:first-child { margin-top: 10px; }
.pp-part .pp-h { text-align: left; }
.pp-part-n {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 0.95rem; font-weight: 800;
}

/* ---- part one: the foundation ---- */
.fd { display: grid; gap: 12px; }
.fd-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 12px; }
.fd-tile {
  display: grid; gap: 6px; align-content: start;
  padding: 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--rule);
}
.fd-tile.is-first { background: var(--ink); border-color: var(--ink); }
.fd-tile.is-first .fd-name { color: #fff; }
.fd-tile.is-first .fd-what { color: #c9d1dc; }
.fd-first { justify-self: start; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--accent); padding: 2px 8px; border-radius: 999px; }
.fd-name { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
.fd-what { margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--ink-2); }
.fd-state { justify-self: start; margin-top: 4px; font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.fd-state.is-ok { background: var(--good-soft); color: var(--good); }
.fd-state.is-gap { background: var(--bad-soft); color: var(--bad); }
.fd-state.is-unknown { background: var(--paper); color: var(--ink-3); border: 1px dashed var(--ink-3); }
.fd-rule { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--paper); font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.fd-rule b { color: var(--ink); }
.pipe { margin-top: 18px; }

@media (max-width: 860px) {
  .fd-row { grid-template-columns: 1fr 1fr; }
  .fd-tile.is-first { grid-column: 1 / -1; }
}

/* The older .card-plan h3 rule gives every heading auto margins and a 26ch cap, which
   floated the part headings to the middle, away from their numbers. */
.card-plan .pp-part .pp-h { margin: 0; max-width: none; text-align: left; }
/* The loop's arrowhead, pointing back up into stage one. */
.pp-loop::before { top: -4px; left: -8.5px; border-bottom-width: 12px; }

@media (max-width: 860px) {
  /* The step number moves to the right so the down arrow on the left never sits on it. */
  .pp-n { left: auto; right: 16px; }
  /* Website and Google profile full width, Yelp and Facebook side by side: no orphan tile. */
  .fd-row > .fd-tile:nth-child(2) { grid-column: 1 / -1; }
}


/* ============ REAL SCREENS, NOT ICON CARDS ============ */
/* The artwork sits on a warm ground, like the reference, and the snippets inside use the
   system UI font so they read as a phone screen rather than as our page. */
.fd2, .rt { --ui: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --warm: #f2eee8; }

/* ---- part one ---- */
.fd2 { background: var(--warm); border-radius: 22px; padding: 22px; display: grid; gap: 16px; }
.fd2-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 12px; align-items: start; }
.nap { background: #fff; border-radius: 12px; overflow: hidden; font-family: var(--ui); box-shadow: 0 1px 2px rgba(20,20,20,0.06), 0 6px 18px rgba(20,20,20,0.05); display: grid; }
.nap-bar { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid #ececec; }
.nap-brand { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.nap-google .nap-brand { color: #4285f4; }
.nap-yelp .nap-brand { color: #d32323; font-weight: 800; letter-spacing: -0.03em; font-size: 14px; }
.nap-fb .nap-brand { color: #1877f2; font-weight: 800; letter-spacing: -0.02em; font-size: 13.5px; }
.nap-web .nap-bar { background: #111; border-bottom-color: #111; }
.nap-web .nap-brand { color: #fff; }
.nap-layer { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #111; background: var(--accent); padding: 2px 7px; border-radius: 4px; }
.nap-body { padding: 12px; display: grid; gap: 3px; }
.nap-hero { margin: 0 0 6px; font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: #111; }
.nap-name { margin: 0; font-size: 13px; font-weight: 700; color: #111; line-height: 1.3; }
.nap-line { margin: 0; font-size: 11.5px; color: #555; line-height: 1.35; }
.nap-phone { color: #1a73e8; }
.nap-rate { margin: 0; display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: #333; }
.nap-ctas { display: flex; gap: 6px; margin-top: 8px; }
.nap-ctas span { font-size: 10.5px; font-weight: 700; padding: 5px 8px; border-radius: 6px; border: 1px solid #ddd; color: #111; }
.nap-ctas .is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.nap-state { margin: 0; padding: 8px 12px; border-top: 1px solid #ececec; font-size: 11px; font-weight: 700; }
.nap-state.is-ok { color: var(--good); }
.nap-state.is-gap { color: var(--bad); background: #fdf1ee; }
.nap-state.is-unknown { color: #888; }
.fd2-rule { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); text-align: center; }
.fd2-rule b { color: var(--ink); }

/* ---- part two ---- */
.rt { background: var(--warm); border-radius: 22px; padding: 26px 22px 22px; }
.rt-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; }
/* One track through all five, behind the step labels. */
.rt-row::before { content: ""; position: absolute; left: 4%; right: 4%; top: 11px; height: 2px; background: #d9d2c7; }
.rt-st { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; position: relative; }
.rt-step { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.rt-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; box-shadow: 0 0 0 4px var(--warm); }
.rt-runs { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); line-height: 1.35; }
.rt-runs.is-empty { color: #9a9185; }

.rs { background: #fff; border-radius: 12px; padding: 12px; font-family: var(--ui); font-size: 12px; color: #111; box-shadow: 0 1px 2px rgba(20,20,20,0.06), 0 6px 18px rgba(20,20,20,0.05); display: grid; gap: 6px; align-content: start; }
.rs p { margin: 0; }
.rs-muted { color: #70757a; }
.rs-stars { color: #fbbc04; letter-spacing: 0.02em; }

.rs-q { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 999px; border: 1px solid #dfe1e5; box-shadow: 0 1px 4px rgba(32,33,36,0.12); font-size: 12.5px; }
.rs-q-ico { width: 11px; height: 11px; border: 2px solid #9aa0a6; border-radius: 50%; position: relative; flex: none; }
.rs-q-ico::after { content: ""; position: absolute; width: 2px; height: 6px; background: #9aa0a6; right: -4px; bottom: -5px; transform: rotate(-45deg); border-radius: 2px; }
.rs-or { font-size: 10.5px; color: #70757a; margin-top: 6px !important; }
.rs-ask { font-size: 11.5px; background: #f4f4f4; border-radius: 12px; padding: 7px 10px; line-height: 1.35; }

.rs-pos { justify-self: start; font-size: 10px; font-weight: 700; color: #188038; background: #e6f4ea; padding: 2px 7px; border-radius: 4px; }
.rs-mname { font-size: 13.5px; font-weight: 600; color: #1a0dab; line-height: 1.25; }
.rs-mrate { display: flex; gap: 4px; align-items: center; font-size: 11.5px; }
.rs-mbtns { display: flex; gap: 5px; margin-top: 4px; }
.rs-mbtns span { font-size: 10.5px; color: #1a73e8; border: 1px solid #dadce0; border-radius: 999px; padding: 3px 8px; }

.rs-missed { justify-self: center; font-size: 10px; font-weight: 600; color: #d93025; background: #fce8e6; padding: 2px 8px; border-radius: 999px; }
.rs-b { font-size: 11.5px; line-height: 1.35; padding: 7px 10px; border-radius: 14px; max-width: 92%; }
.rs-b-in { background: #e9e9eb; justify-self: start; border-bottom-left-radius: 4px; }
.rs-b-out { background: #34c759; color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.rs-when { font-size: 10px; color: #70757a; }

.rs-cal { grid-template-columns: 38px 1fr; gap: 10px; align-items: start; }
.rs-calhead { display: grid; justify-items: center; line-height: 1.1; }
.rs-day { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #d93025; }
.rs-date { font-size: 22px; font-weight: 300; color: #111; }
.rs-event { border-left: 3px solid #1a73e8; background: #e8f0fe; border-radius: 6px; padding: 7px 9px; display: grid; gap: 2px; }
.rs-ev-t { font-size: 11.5px; font-weight: 700; color: #174ea6; }
.rs-ev-b { font-size: 11.5px; color: #111; }
.rs-ev-s { font-size: 10px; color: #5f6368; }

.rs-rev-h { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.rs-av { width: 24px; height: 24px; border-radius: 50%; background: #8d6e63; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.rs-rev-b { font-size: 11.5px; line-height: 1.4; }

.rt-loop { margin: 22px 0 0; display: grid; justify-items: center; gap: 0; position: relative; }
.rt-loop-line { width: 92%; height: 18px; border: 2px solid #b9d9c4; border-top: 0; border-radius: 0 0 16px 16px; position: absolute; top: -14px; }
.rt-loop-t { position: relative; margin-top: 6px; background: var(--warm); padding: 0 12px; font-size: 0.86rem; font-weight: 700; color: var(--good); }

@media (max-width: 860px) {
  .fd2 { padding: 14px; }
  .fd2-row { grid-template-columns: 1fr 1fr; }
  .fd2-row > .nap.is-first { grid-column: 1 / -1; }
  .rt { padding: 18px 14px; }
  .rt-row { grid-template-columns: 1fr; gap: 22px; padding-left: 0; }
  .rt-row::before { left: 11px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; }
  .rt-st { padding-left: 0; }
  .rt-st > .rs, .rt-st > .rt-runs { margin-left: 34px; }
  .rt-loop-line { display: none; }
  .rt-loop-t { text-align: center; }
}

/* Four listings the same height, status pinned to the bottom of each. */
.fd2-row { align-items: stretch; }
.nap { grid-template-rows: auto 1fr auto; }

.nap-body { align-content: start; }
.rs-stars-off { color: #dadce0; }
@media (max-width: 860px) {
  /* Website and Google full width, Yelp and Facebook side by side: no orphan card. */
  .fd2-row > .nap:nth-child(2) { grid-column: 1 / -1; }
}


/* ============ THE GROWTH PLAN, IN TWO PARTS ============ */
.card-plan .gp-intro, .card-plan .gp-sub, .card-plan .pbs { text-align: left; }
.gp-intro p { margin: 6px auto 0; max-width: 60ch; text-align: center; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
.gp-sub { margin: -6px 0 6px; max-width: 64ch; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.pbs { list-style: none; margin: 0; padding: 0; }

.pb {
  --ui: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --warm: #f2eee8;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: 44px; align-items: center;
  padding: 44px 0; border-top: 1px solid var(--rule);
}
.pb:first-child { border-top: 0; padding-top: 14px; }
.pbs > .pb:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); }
.pbs > .pb:nth-child(even) .pb-copy { order: 2; }

.pb-kick { margin: 0 0 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.pb-title { margin: 0 0 12px; font-size: clamp(1.45rem, 3vw, 1.95rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.pb-body { margin: 0 0 18px; font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.pb-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.pb-list li { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.pb-list li::before { content: "\2713"; grid-row: 1 / 3; color: var(--good); font-weight: 800; line-height: 1.5; }
.pb-list.is-num { counter-reset: pb; }
.pb-list.is-num li { counter-increment: pb; }
.pb-list.is-num li::before { content: counter(pb); width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.7rem; display: grid; place-items: center; margin-top: 1px; }
.pb-list b { font-size: 0.95rem; color: var(--ink); }
.pb-list span { font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); }
.pb-now { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: var(--paper); border-left: 3px solid var(--accent); }
.pb-now-t { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 3px; }
.pb-now p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }

.pb-art { background: var(--warm); border-radius: 22px; padding: 28px; font-family: var(--ui); }
.pb-art p { margin: 0; }
.pb-art .device-phone { max-width: 260px; margin: 0 auto; }
.pb-art .play-visual { margin: 0; }

/* ---- the website, in a browser window ---- */
.bw { position: relative; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 18px 40px rgba(20,20,20,.10); font-size: 12px; color: #111; }
.bw-top { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #ecebe8; }
.bw-dots { display: flex; gap: 5px; }
.bw-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.bw-dots i:nth-child(2) { background: #febc2e; } .bw-dots i:nth-child(3) { background: #28c840; }
.bw-url { flex: 1; background: #fff; border-radius: 6px; padding: 4px 10px; font-size: 11px; color: #555; }
.bw-nav { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #eee; }
.bw-logo { font-weight: 800; letter-spacing: -0.02em; font-size: 12.5px; white-space: nowrap; }
.bw-links { display: flex; gap: 10px; flex: 1; font-size: 10.5px; color: #444; }
.bw-call { font-size: 10.5px; font-weight: 700; background: var(--accent); color: #fff; padding: 5px 9px; border-radius: 6px; white-space: nowrap; }
.bw-hero { padding: 20px 16px 16px; background: linear-gradient(135deg, #1b2533, #2e3d52); color: #fff; display: grid; gap: 8px; }
.bw-kick { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ffb27a; }
.bw-h1 { font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; }
.bw-ctas { display: flex; gap: 8px; margin-top: 4px; }
.bw-ctas span { font-size: 11px; font-weight: 700; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); }
.bw-ctas .is-primary { background: var(--accent); border-color: var(--accent); }
.bw-trust { font-size: 10.5px; color: #cfd6e0; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.bw-sep { opacity: .5; }
.bw-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; }
.bw-card { border: 1px solid #eee; border-radius: 8px; overflow: hidden; display: grid; }
.bw-card-img { height: 44px; background: linear-gradient(135deg, #cfd8e3, #e9edf2); }
.bw-card.c1 .bw-card-img { background: linear-gradient(135deg, #e3d9cf, #f2ede7); }
.bw-card.c2 .bw-card-img { background: linear-gradient(135deg, #d4e3d6, #edf3ee); }
.bw-card-t { padding: 7px 8px 0; font-size: 10.5px; font-weight: 700; }
.bw-card-l { padding: 2px 8px 8px; font-size: 9.5px; color: var(--accent-ink); }
.bw-area { padding: 10px 14px 14px; font-size: 10.5px; color: #555; border-top: 1px solid #eee; }
.bw-tag { position: absolute; font-size: 10px; font-weight: 700; color: #fff; background: #111; padding: 4px 8px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.bw-tag.t1 { right: 10px; bottom: 58px; }
.bw-tag.t2 { right: 10px; top: 76px; }

/* ---- the Google profile, numbered ---- */
.kp { position: relative; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 18px 40px rgba(20,20,20,.10); font-size: 12px; color: #202124; }
.kp-photos { position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 64px 64px; gap: 2px; }
.kp-ph { background: #dfe3e8; display: grid; place-items: center; font-size: 10px; color: #6b7280; overflow: hidden; }
.kp-ph.big { grid-row: 1 / 3; }
.kp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-ph.is-blank:nth-child(2) { background: #e6dccf; } .kp-ph.is-blank:nth-child(3) { background: #d6e2d7; }
.kp-body { padding: 12px 14px 14px; display: grid; gap: 7px; }
.kp-name { font-size: 17px; font-weight: 500; line-height: 1.2; }
.kp-rate { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.kp-link { color: #1a0dab; }
.kp-cat { color: #70757a; font-size: 12px; }
.kp-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.kp-acts span { font-size: 11px; color: #1a73e8; border: 1px solid #dadce0; border-radius: 999px; padding: 4px 10px; }
.kp-book-wrap { position: relative; }
.kp-book { display: block; text-align: center; background: #e8f0fe; color: #174ea6; font-weight: 600; border-radius: 999px; padding: 7px; font-size: 11.5px; }
.kp-rows { display: grid; grid-template-columns: auto 1fr; gap: 3px 6px; margin: 2px 0 0; font-size: 11.5px; }
.kp-rows dt { font-weight: 700; } .kp-rows dd { margin: 0; color: #3c4043; }
.kp-open { color: #188038; font-weight: 600; }
.kp-blue { color: #1a0dab; }
.kp-upd, .kp-rev { position: relative; border-top: 1px solid #eee; padding-top: 8px; display: grid; gap: 5px; }
.kp-sec { font-size: 12.5px; font-weight: 500; }
.kp-post { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; font-size: 11.5px; }
.kp-post-img { height: 44px; border-radius: 6px; background: linear-gradient(135deg, #cfd8e3, #e9edf2); }
.kp-muted { color: #70757a; font-size: 10.5px; }
.kp-rv { font-size: 11.5px; } .kp-rv-t { font-size: 11.5px; color: #3c4043; }
.kp-reply { font-size: 11px; color: #3c4043; background: #f8f9fa; border-radius: 6px; padding: 6px 8px; }
.kp-pin { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(0,0,0,.2); }
.kp-book-wrap .kp-pin { top: 50%; transform: translateY(-50%); right: 6px; }

/* ---- Yelp and Facebook ---- */
.ls { display: grid; gap: 12px; }
.yp, .fbp { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 12px 28px rgba(20,20,20,.08); font-size: 12px; color: #2d2e2f; }
.yp-bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid #eee; }
.yp-logo { font-size: 20px; font-weight: 900; letter-spacing: -0.05em; color: #d32323; }
.yp-search { flex: 1; font-size: 11px; color: #6e7072; border: 1px solid #d8d8d8; border-radius: 4px; padding: 4px 8px; }
.yp-body { padding: 12px 14px 14px; display: grid; gap: 4px; }
.yp-name { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.yp-rate { display: flex; align-items: center; gap: 10px; }
.yp-stars { display: flex; gap: 2px; }
.yp-stars i { width: 18px; height: 18px; border-radius: 3px; background: #f15c00; color: #fff; font-size: 12px; font-style: normal; display: grid; place-items: center; }
.yp-claimed { font-size: 11px; font-weight: 700; color: #0073bb; }
.yp-cat { font-size: 11.5px; color: #6e7072; }
.yp-line { font-size: 11.5px; }
.fbp-cover { height: 54px; background: linear-gradient(120deg, #4a6b8a, #7fa1c0); }
.fbp-body { display: flex; gap: 10px; align-items: flex-end; padding: 0 14px; margin-top: -22px; }
.fbp-av { width: 52px; height: 52px; border-radius: 50%; background: #1877f2; color: #fff; border: 3px solid #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; flex: none; }
.fbp-name { font-size: 15px; font-weight: 700; line-height: 1.2; }
.fbp-cat { font-size: 11px; color: #65676b; }
.fbp-info { padding: 8px 14px 0; display: grid; gap: 2px; font-size: 11.5px; }
.fbp-btns { display: flex; gap: 6px; padding: 10px 14px 12px; }
.fbp-btns span { font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 6px; background: #e4e6eb; color: #050505; }
.fbp-btns .is-primary { background: #1877f2; color: #fff; }
.ls-match { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid #cfe5d6; font-size: 11.5px; }
.ls-match-ok { color: var(--good); font-weight: 800; white-space: nowrap; }

/* ---- step 1: the map pack ---- */
.mp { position: relative; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 18px 40px rgba(20,20,20,.10); font-size: 12px; color: #202124; }
.mp-q { display: flex; align-items: center; gap: 8px; margin: 10px; padding: 8px 12px; border-radius: 999px; box-shadow: 0 1px 4px rgba(32,33,36,.18); font-size: 12.5px; }
.mp-map { position: relative; height: 120px;
  background:
    linear-gradient(90deg, transparent 36%, #fff 36%, #fff 39%, transparent 39%),
    linear-gradient(0deg, transparent 52%, #fff 52%, #fff 56%, transparent 56%),
    linear-gradient(160deg, transparent 64%, #fde293 64%, #fde293 67%, transparent 67%),
    linear-gradient(0deg, transparent 18%, #fff 18%, #fff 20%, transparent 20%),
    #e8e6e1; }
.mp-pin { position: absolute; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #ea4335; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.mp-pin.p1 { left: 42%; top: 32%; background: #188038; }
.mp-pin.p2 { left: 20%; top: 58%; } .mp-pin.p3 { left: 70%; top: 18%; }
.mp-list { display: grid; }
.mp-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 9px 12px; border-top: 1px solid #eee; }
.mp-row.is-me { background: #e6f4ea; }
.mp-n { font-weight: 700; color: #70757a; }
.mp-name { font-size: 12.5px; font-weight: 600; color: #1a0dab; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mp-you { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #188038; color: #fff; padding: 1px 6px; border-radius: 4px; }
.mp-meta { font-size: 11px; display: flex; align-items: center; flex-wrap: wrap; }
.mp-call { font-size: 10.5px; color: #1a73e8; border: 1px solid #dadce0; border-radius: 999px; padding: 3px 9px; }
.mp-ai { position: absolute; right: 12px; top: 58px; width: 46%; background: #fff; border-radius: 10px; padding: 9px 11px; box-shadow: 0 6px 20px rgba(0,0,0,.16); font-size: 11px; line-height: 1.4; display: grid; gap: 3px; }
.mp-ai-t { font-size: 10px; font-weight: 800; color: #10a37f; }

/* ---- step 3: the calendar ---- */
.cw { position: relative; background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 18px 40px rgba(20,20,20,.10); font-size: 11px; color: #202124; display: grid; gap: 10px; }
.cw-toast { display: flex; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 10px; background: #111; color: #fff; }
.cw-toast-ico { width: 24px; height: 24px; border-radius: 50%; background: #34c759; display: grid; place-items: center; font-weight: 800; flex: none; }
.cw-toast-t { font-weight: 700; font-size: 11.5px; }
.cw-toast p:not(.cw-toast-t) { color: #cfd6e0; font-size: 10.5px; }
.cw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cw-day { display: grid; gap: 5px; align-content: start; min-height: 150px; border-left: 1px solid #eee; padding-left: 5px; }
.cw-dh { display: grid; font-size: 9.5px; color: #70757a; text-transform: uppercase; }
.cw-dh b { font-size: 15px; font-weight: 400; color: #202124; }
.cw-ev { display: grid; gap: 1px; background: #e8f0fe; border-left: 3px solid #1a73e8; border-radius: 4px; padding: 4px 5px; font-size: 9.5px; line-height: 1.25; }
.cw-ev-t { font-weight: 700; color: #174ea6; }
.cw-ev.is-new { background: #e6f4ea; border-left-color: #188038; box-shadow: 0 0 0 2px #188038; }
.cw-ev.is-new .cw-ev-t { color: #188038; }
.cw-foot { font-size: 10.5px; color: #70757a; text-align: center; }

/* ---- step 4: the quote ---- */
.qf { display: grid; gap: 8px; }
.qf-card { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 12px 28px rgba(20,20,20,.08); display: grid; gap: 4px; }
.qf-head { display: flex; justify-content: space-between; align-items: center; }
.qf-no { font-weight: 800; font-size: 13px; }
.qf-sent { font-size: 10px; font-weight: 700; color: #b06000; background: #fef7e0; padding: 2px 8px; border-radius: 999px; }
.qf-job { font-size: 11.5px; color: #5f6368; }
.qf-amt { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.qf-auto { font-size: 10.5px; font-weight: 700; color: #70757a; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px !important; }
.qf-msg { background: #fff; border-radius: 12px; padding: 9px 12px; box-shadow: 0 1px 3px rgba(20,20,20,.08); display: grid; gap: 3px; margin-left: 18px; position: relative; }
.qf-msg::before { content: ""; position: absolute; left: -12px; top: 0; bottom: -10px; width: 2px; background: #d9d2c7; }
.qf-day { font-size: 10px; font-weight: 700; color: var(--accent-ink); }
.qf-msg p { font-size: 11.5px; line-height: 1.4; }
.qf-won { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #e6f4ea; color: #137333; font-weight: 700; font-size: 12px; }
.qf-won span { width: 22px; height: 22px; border-radius: 50%; background: #188038; color: #fff; display: grid; place-items: center; flex: none; }

/* ---- step 5: the review ---- */
.rv { display: grid; gap: 8px; justify-items: stretch; }
.rv-sms { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 12px 28px rgba(20,20,20,.08); display: grid; gap: 6px; }
.rv-from { font-size: 10.5px; font-weight: 700; color: #70757a; text-transform: uppercase; letter-spacing: .05em; }
.rv-b { background: #e9e9eb; border-radius: 14px; border-bottom-left-radius: 4px; padding: 8px 11px; font-size: 12px; line-height: 1.4; }
.rv-link { font-size: 11.5px; color: #1a73e8; text-decoration: underline; }
.rv-when { font-size: 10px; color: #70757a; }
.rv-arrow { justify-self: center; font-size: 18px; color: #b3a99a; }
.rv-card { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 12px 28px rgba(20,20,20,.08); display: grid; gap: 6px; font-size: 12px; }
.rv-head { display: flex; gap: 9px; align-items: center; }
.rv-t { line-height: 1.45; }

/* ---- the loop ---- */
.gp-loop { margin-top: 26px; padding: 22px; border-radius: 18px; background: var(--good-soft); text-align: center; display: grid; gap: 12px; }
.gp-loop-h { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--good); }
.gp-loop-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.gp-loop-s { background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 0.9rem; font-weight: 700; color: var(--ink); box-shadow: 0 1px 2px rgba(15,27,45,.08); }
.gp-loop-a { color: var(--good); font-weight: 800; }
.gp-loop-t { margin: 0; font-size: 0.92rem; color: var(--ink-2); }

@media (max-width: 860px) {
  .pb, .pbs > .pb:nth-child(even) { grid-template-columns: 1fr; gap: 22px; padding: 34px 0; }
  .pbs > .pb:nth-child(even) .pb-copy { order: 0; }
  .pb-art { padding: 16px; border-radius: 16px; }
  .bw-links { display: none; }
  .bw-svc { grid-template-columns: 1fr 1fr 1fr; }
  .mp-ai { position: static; width: auto; margin: 0 10px 10px; }
  .cw-grid { grid-template-columns: repeat(3, 1fr); }
  .cw-day:nth-child(n+4) { display: none; }
  .bw-tag { display: none; }
}

/* Labels sit inside the area they describe. */
.bw-nav, .bw-svc { position: relative; }
.bw-tag.t2 { top: calc(100% - 4px); right: 14px; bottom: auto; z-index: 2; }
.bw-tag.t1 { top: -10px; right: 14px; bottom: auto; z-index: 2; }
.bw-svc { padding-top: 18px; }
/* Facebook: only the avatar reaches into the cover; the name sits below it. */
.fbp-body { margin-top: 0; align-items: flex-end; padding-top: 0; }
.fbp-av { margin-top: -24px; }
.fbp-body > div { padding-bottom: 2px; }
/* Pins: a white dot in the middle instead of a sideways number. */
.mp-pin::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }


/* ============ CENTERED: PICTURE, NUMBERS, A FEW WORDS ============ */
.gp-part { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 40px 0 6px; }
.gp-part:first-child { margin-top: 6px; }
.gp-part-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; }
.card-plan .gp-part-t { margin: 0; max-width: none; font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 800; letter-spacing: -0.03em; }

.ps { --ui: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --warm: #f2eee8; display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 0 8px; }
.ps + .ps { border-top: 1px solid var(--rule); }
.ps-kick { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }
.card-plan .ps-title { margin: 0; max-width: 22ch; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.ps-line { margin: 0; max-width: 44ch; font-size: 0.98rem; color: var(--ink-2); }
.ps-art { width: 100%; max-width: 560px; margin-top: 10px; padding: 26px; background: var(--warm); border-radius: 22px; font-family: var(--ui); text-align: left; }
.ps-art p { margin: 0; }
.ps-legend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; max-width: 620px; }
.ps-legend li { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.ps-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 800; display: grid; place-items: center; }
.ps-now { margin: 4px 0 0; font-size: 0.86rem; color: var(--ink-2); max-width: 52ch; }
.ps-now b { color: var(--accent-ink); }
.ps-plus { margin: 4px auto 0; max-width: 46ch; text-align: center; font-size: 0.92rem; color: var(--ink-2); }

/* the numbered markers on every picture */
.pin { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font: 800 12px/1 -apple-system, "Segoe UI", sans-serif; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0,0,0,.25); z-index: 3; }
.pin.at-right { right: -11px; top: 50%; transform: translateY(-50%); }

/* ---- the example website ---- */
.ex { margin: 0 auto; display: grid; justify-items: center; gap: 10px; }
.ex-phone { position: relative; width: 250px; border-radius: 30px; padding: 7px; background: linear-gradient(160deg, #3d4553, #171b22); box-shadow: 0 18px 40px rgba(20,20,20,.22); }
.ex-phone img { display: block; width: 100%; border-radius: 24px; }
.ex-phone .pin.at-headline { right: -12px; top: 36%; }
.ex-phone .pin.at-photo { left: -12px; top: 74%; }
.ex-phone .pin.at-bar { right: -12px; top: 94%; }
.ex-cap { font-size: 0.78rem; color: #8a8175; text-align: center; }

/* ---- same details everywhere ---- */
.nx { background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 12px 28px rgba(20,20,20,.08); font-size: 12px; display: grid; gap: 0; }
.nx-row { display: grid; grid-template-columns: 72px 1.2fr 1.3fr 1fr; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #eee; }
.nx-head { border-bottom: 0; padding-bottom: 6px; }
.nx-h { position: relative; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a8175; display: flex; align-items: center; gap: 6px; }
.nx-h .pin { position: static; width: 20px; height: 20px; font-size: 10px; box-shadow: none; }
.nx-brand { font-weight: 800; font-size: 13px; }
.is-google .nx-brand { color: #4285f4; } .is-yelp .nx-brand { color: #d32323; } .is-fb .nx-brand { color: #1877f2; }
.nx-cell { background: #e6f4ea; border-radius: 6px; padding: 5px 7px; line-height: 1.3; color: #0d652d; font-weight: 600; overflow-wrap: anywhere; }
.nx-ok { margin-top: 10px !important; text-align: center; font-weight: 800; color: #188038; font-size: 13px; }

/* ---- top of Google ---- */
.tg { background: #fff; border-radius: 14px; overflow: visible; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 18px 40px rgba(20,20,20,.10); font-size: 12px; color: #202124; display: grid; }
.tg-q { display: flex; align-items: center; gap: 8px; margin: 12px; padding: 8px 12px; border-radius: 999px; box-shadow: 0 1px 4px rgba(32,33,36,.18); font-size: 13px; }
.tg-lsa { position: relative; margin: 0 12px 10px; padding: 10px 12px; border: 1px solid #dadce0; border-radius: 10px; display: grid; gap: 3px; }
.tg-spons { font-size: 10.5px; font-weight: 700; color: #188038; }
.tg-lsa-name { font-size: 14px; font-weight: 600; color: #1a0dab; display: flex; align-items: center; gap: 6px; }
.tg-gg { width: 16px; height: 16px; border-radius: 50%; background: #188038; color: #fff; font-size: 10px; display: grid; place-items: center; }
.tg-meta { font-size: 11.5px; color: #5f6368; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.tg-map { height: 80px;
  background: linear-gradient(90deg, transparent 36%, #fff 36%, #fff 39%, transparent 39%), linear-gradient(0deg, transparent 52%, #fff 52%, #fff 56%, transparent 56%), linear-gradient(160deg, transparent 64%, #fde293 64%, #fde293 67%, transparent 67%), #e8e6e1; }
.tg-list { display: grid; }
.tg-row { position: relative; display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; padding: 9px 14px; border-top: 1px solid #eee; }
.tg-row.is-me { background: #e6f4ea; }
.tg-n { grid-row: 1 / 3; font-weight: 700; color: #70757a; }
.tg-name { font-size: 12.5px; font-weight: 600; color: #1a0dab; }
.tg-ai { position: relative; margin: 10px 12px 12px; padding: 9px 12px; border-radius: 10px; background: #f4f4f4; display: grid; gap: 2px; font-size: 11.5px; }
.tg-ai-t { font-size: 10px; font-weight: 800; color: #10a37f; }

/* ---- booking from Google ---- */
.bk { display: grid; gap: 10px; }
.bk-listing, .bk-sheet, .bk-done { position: relative; background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 10px 24px rgba(20,20,20,.08); }
.bk-name { font-size: 14px; font-weight: 500; margin-bottom: 8px !important; }
.bk-btn { position: relative; display: block; text-align: center; background: #1a73e8; color: #fff; font-weight: 600; border-radius: 999px; padding: 8px; font-size: 12.5px; }
.bk-h { font-size: 12.5px; font-weight: 600; margin-bottom: 8px !important; }
.bk-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bk-slots span { text-align: center; border: 1px solid #dadce0; border-radius: 8px; padding: 7px 4px; font-size: 11.5px; color: #1a73e8; }
.bk-slots .is-on { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.bk-done { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: #137333; background: #e6f4ea; }
.bk-tick { width: 24px; height: 24px; border-radius: 50%; background: #188038; color: #fff; display: grid; place-items: center; flex: none; }

/* ---- one inbox ---- */
.ib { background: #fff; border-radius: 14px; padding: 6px 0; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 18px 40px rgba(20,20,20,.10); font-size: 12px; }
.ib-h { padding: 8px 14px 10px; font-weight: 800; font-size: 13px; border-bottom: 1px solid #eee; }
.ib-row { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: start; padding: 10px 14px; border-bottom: 1px solid #f0f0f0; }
.ib-row:last-child { border-bottom: 0; }
.ib-src { font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 999px; text-align: center; color: #fff; }
.is-call .ib-src { background: #d93025; } .is-fb .ib-src { background: #1877f2; } .is-ig .ib-src { background: #c13584; } .is-web .ib-src { background: #202124; }
.ib-who { font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.ib-when { font-weight: 400; color: #70757a; font-size: 10.5px; }
.ib-text { color: #3c4043; line-height: 1.35; }

/* the quote and review pictures carry markers too */
.qf-card, .qf-won, .rv-sms, .rv-card, .qf-pinwrap { position: relative; }

@media (max-width: 640px) {
  .ps-art { padding: 14px; border-radius: 16px; }
  .ps-legend { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nx-row { grid-template-columns: 1fr; gap: 4px; }
  .nx-head { display: none; }
  .nx-brand { margin-top: 4px; }
  .pin.at-right { right: -8px; }
}

/* Markers keep their own look inside rows that style every span. */
.qf-won > .pin { background: var(--accent); width: 26px; height: 26px; color: #fff; }
/* Room on the right of each inbox row so the marker never covers the time. */
.ib-row { padding-right: 30px; }

/* Marker on the ad card sits on its corner, clear of the Guaranteed tick. */
.tg-lsa > .pin.at-right { top: -11px; transform: none; }


/* ============ TIGHTER, ONE-LINE TITLES ============ */
.gp-part { margin: 30px 0 0; }
.ps { padding: 26px 0 4px; gap: 8px; }
.card-plan .ps-title { max-width: none; font-size: clamp(1.2rem, 2.6vw, 1.6rem); }
@media (min-width: 700px) { .card-plan .ps-title, .card-plan .gp-part-t { white-space: nowrap; } }
.ps-art { position: relative; margin-top: 6px; }
.ps-plus, .ps-now { display: none; }

/* site example markers, placed on the new screenshot */
.ex-phone .pin.at-headline { right: -12px; top: 62%; }
.ex-phone .pin.at-photo { left: -12px; top: 32%; }
.ex-phone .pin.at-bar { right: -12px; top: 95%; }

/* "Runs automatically" */
.ps-auto { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 11.5px/1 -apple-system, "Segoe UI", sans-serif; white-space: nowrap; z-index: 4; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.ps-auto i { width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgba(52,199,89,.3); }

/* ---- Foundation 3: three listings, equal signs ---- */
.nqs { display: grid; gap: 12px; }
.nq-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; }
.nq { background: #fff; border-radius: 12px; overflow: visible; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 12px 28px rgba(20,20,20,.08); }
.nq-top { padding: 9px 12px; border-bottom: 1px solid #eee; border-radius: 12px 12px 0 0; }
.nq-logo { font-weight: 900; font-size: 15px; letter-spacing: -0.03em; }
.is-google .nq-logo { color: #4285f4; font-weight: 700; letter-spacing: 0; }
.is-yelp .nq-logo { color: #d32323; }
.is-fb .nq-logo { color: #1877f2; }
.nq-body { padding: 10px; display: grid; gap: 6px; }
.nq-f { position: relative; margin: 0; background: #e6f4ea; color: #0d652d; border-radius: 6px; padding: 6px 8px; font-size: 11.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.nq-name { font-weight: 800; }
.nq-f .pin.at-right { right: -14px; width: 22px; height: 22px; font-size: 10.5px; }
.nq-eq { font-size: 26px; font-weight: 800; color: #188038; }
.nq-ok { margin: 0; text-align: center; font-weight: 800; color: #188038; font-size: 13px; }

/* ---- Step 1: map, list, chat ---- */
.tg-wrap { display: grid; gap: 12px; }
.tg-map { position: relative; height: 104px; }
.tg-mpin { position: absolute; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #ea4335; box-shadow: 0 2px 5px rgba(0,0,0,.25); display: grid; place-items: center; }
.tg-mpin b { transform: rotate(45deg); color: #fff; font: 700 11px/1 -apple-system, sans-serif; }
.tg-mpin.m1 { left: 44%; top: 26%; background: #188038; }
.tg-mpin.m2 { left: 20%; top: 52%; } .tg-mpin.m3 { left: 72%; top: 44%; }
.tg-row { grid-template-columns: 26px 1fr auto; align-items: center; column-gap: 10px; }
.tg-dot { width: 22px; height: 22px; border-radius: 50%; background: #ea4335; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.tg-row.is-me .tg-dot { background: #188038; }
.tg-info { display: grid; gap: 1px; min-width: 0; }
.tg-open { font-size: 11px; color: #188038; }
.tg-btns { display: flex; gap: 5px; }
.tg-btns span { font-size: 10.5px; color: #1a73e8; border: 1px solid #dadce0; border-radius: 999px; padding: 4px 9px; }
.tg-chat { position: relative; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 12px 28px rgba(20,20,20,.08); display: grid; gap: 8px; font-size: 12px; }
.tg-chat-h { font-size: 11px; font-weight: 800; color: #10a37f; }
.tg-ask { justify-self: end; background: #f1f1f1; border-radius: 14px; padding: 7px 11px; max-width: 80%; }
.tg-ans { line-height: 1.45; }

@media (max-width: 640px) {
  .nq-row { grid-template-columns: 1fr; }
  .nq-eq { justify-self: center; line-height: 1; }
  .tg-btns { display: none; }
}

/* Room for the "Runs automatically" badge above the picture. */
.ps-art:has(.ps-auto) { margin-top: 20px; }


/* ============ WIDE SECTIONS ============ */
.ps.is-wide .ps-art { max-width: 920px; }

/* ---- Foundation 1: four real pages ---- */
.sps { display: grid; gap: 12px; }
.sp-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sp { margin: 0; display: grid; gap: 8px; justify-items: center; }
.sp-phone { position: relative; width: 100%; max-width: 180px; border-radius: 22px; padding: 5px; background: linear-gradient(160deg, #3d4553, #171b22); box-shadow: 0 14px 30px rgba(20,20,20,.20); }
.sp-phone img { display: block; width: 100%; border-radius: 18px; }
.sp-phone .pin.at-top { top: -11px; right: -9px; }
.sp-label { font: 800 13px/1.2 -apple-system, "Segoe UI", sans-serif; color: var(--ink); }
.sp-cap { text-align: center; font-size: 0.78rem; color: #8a8175; }

/* ---- Foundation 3: realistic listings ---- */
.lgs { display: grid; gap: 12px; }
.lg-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: start; }
.lg-eq { align-self: center; font-size: 28px; font-weight: 800; color: #188038; }
.lg { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 14px 30px rgba(20,20,20,.10); font-size: 11.5px; color: #202124; }
.ni { width: 14px; height: 14px; flex: none; color: #5f6368; }
.hl { position: relative; background: #d7f2de; box-shadow: 0 0 0 2px #d7f2de; border-radius: 3px; color: inherit; }
.hl.on-dark { background: rgba(52,199,89,.35); box-shadow: 0 0 0 2px rgba(52,199,89,.35); }
.hl .pin.at-hl { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; font-size: 10px; }

/* Google */
.lg-photo { height: 74px; background: #d8dde3; overflow: hidden; }
.lg-photo img, .lg-f-cover img, .lg-y-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-photo.is-blank { background: linear-gradient(135deg, #cfd8e3, #e9edf2); }
.lg-body { padding: 10px 12px 12px; display: grid; gap: 5px; }
.lg-g-name { margin: 0; font-size: 15px; line-height: 1.25; }
.lg-g-rate { margin: 0; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.lg-g-muted { margin: 0; color: #70757a; }
.lg-g-chips { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0; }
.lg-g-chips span { font-size: 10px; color: #1a73e8; border: 1px solid #dadce0; border-radius: 999px; padding: 3px 7px; }
.lg-g-row { display: flex; align-items: flex-start; gap: 7px; padding-top: 5px; border-top: 1px solid #f1f3f4; line-height: 1.35; }
.lg-open { color: #188038; font-weight: 600; }

/* Yelp */
.lg-y-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #d32323; }
.lg-y-logo { font: 900 17px/1 -apple-system, sans-serif; letter-spacing: -0.05em; color: #fff; }
.lg-y-search { flex: 1; background: #fff; border-radius: 3px; padding: 3px 7px; font-size: 10px; color: #6e7072; }
.lg-y-hero { position: relative; height: 104px; background: linear-gradient(135deg, #3b3f45, #1f2226); overflow: hidden; }
.lg-y-over { position: absolute; inset: auto 0 0 0; padding: 8px 10px; background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0)); color: #fff; display: grid; gap: 3px; }
.lg-y-name { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.2; }
.lg-y-rate { margin: 0; display: flex; align-items: center; gap: 4px; font-size: 10.5px; }
.lg-y-stars { display: flex; gap: 1px; }
.lg-y-stars i { width: 14px; height: 14px; border-radius: 2px; background: #f15c00; color: #fff; font-size: 9px; font-style: normal; display: grid; place-items: center; }
.lg-y-stars i.off { background: #bbbac0; }
.lg-y-claim { margin: 0; font-size: 10px; } .lg-y-claim b { color: #7fbfff; }
.lg-y-body { padding: 10px 12px 12px; display: grid; gap: 7px; }
.lg-y-h { margin: 0; font-size: 13px; font-weight: 800; }
.lg-y-loc { display: grid; gap: 6px; line-height: 1.35; }
.lg-y-map { height: 44px; border-radius: 4px; background: linear-gradient(90deg, transparent 40%, #fff 40%, #fff 43%, transparent 43%), linear-gradient(0deg, transparent 50%, #fff 50%, #fff 55%, transparent 55%), #e5e3de; }
.lg-y-phone { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid #ebebeb; font-weight: 600; }

/* Facebook */
.lg-f-cover { height: 60px; background: #7fa1c0; overflow: hidden; }
.lg-f-cover.is-blank { background: linear-gradient(120deg, #4a6b8a, #7fa1c0); }
.lg-f-head { position: relative; padding: 0 12px 10px; display: grid; gap: 2px; justify-items: start; }
.lg-f-av { width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; border: 3px solid #fff; background: #1877f2; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.lg-f-name { margin: 2px 0 0; font-size: 14px; font-weight: 800; line-height: 1.2; }
.lg-f-cat { margin: 0; color: #65676b; font-size: 10.5px; }
.lg-f-btns { display: flex; gap: 5px; margin-top: 6px; }
.lg-f-btns span { font-size: 10.5px; font-weight: 600; padding: 5px 10px; border-radius: 6px; background: #e4e6eb; }
.lg-f-btns .is-primary { background: #1877f2; color: #fff; }
.lg-f-intro { margin: 0 10px 10px; padding: 9px; border-radius: 8px; background: #f0f2f5; display: grid; gap: 6px; }
.lg-f-h { margin: 0; font-size: 12.5px; font-weight: 800; }
.lg-f-row { display: flex; gap: 7px; align-items: flex-start; line-height: 1.35; }

.lg-ok { margin: 0; text-align: center; font-weight: 800; color: #188038; font-size: 13px; }

@media (max-width: 860px) {
  .sp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .lg-row { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .lg-eq { justify-self: center; line-height: 1; }
}

/* Markers at the end of the row, never over the text. */
.lg-g-name, .lg-g-row { display: flex; align-items: flex-start; gap: 7px; }
.pin.at-end { position: static; flex: none; margin-left: auto; width: 20px; height: 20px; font-size: 10px; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.2); }
/* Yelp's map: streets and a red pin. */
.lg-y-map { position: relative; height: 56px; border-radius: 4px; overflow: hidden;
  background:
    linear-gradient(90deg, transparent 38%, #fff 38%, #fff 42%, transparent 42%),
    linear-gradient(0deg, transparent 46%, #fff 46%, #fff 52%, transparent 52%),
    linear-gradient(150deg, transparent 66%, #fde293 66%, #fde293 70%, transparent 70%),
    #e8e6e1; }
.lg-y-map i { position: absolute; left: 44%; top: 22%; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #d32323; box-shadow: 0 2px 4px rgba(0,0,0,.3); }


/* ---- Foundation 3 labels ---- */
.lg-col { display: grid; gap: 10px; min-width: 0; }
.lg-label { margin: 0; text-align: center; font: 800 13px/1.2 -apple-system, "Segoe UI", sans-serif; color: var(--ink); }
.lg-eq { align-self: center; margin-top: -24px; }

/* ============ JOURNEYS: WITHOUT AND WITH ============ */
.jr { display: grid; gap: 14px; }
.jr-lane { border-radius: 16px; padding: 14px; background: #fff; box-shadow: 0 2px 4px rgba(20,20,20,.05), 0 10px 24px rgba(20,20,20,.07); border-top: 4px solid #d93025; }
.jr-lane.is-good { border-top-color: #188038; }
.jr-lab { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font: 800 12px/1 -apple-system, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #b3261e; }
.jr-lane.is-good .jr-lab { color: #188038; }
.jr-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.jr-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 8px; align-items: stretch; }
.jr-arrow { align-self: center; font-size: 18px; font-weight: 800; color: #b9b1a5; }
.jr-stop { display: grid; }

.jc { border-radius: 12px; padding: 10px; display: grid; gap: 3px; align-content: center; min-height: 92px; font-size: 11.5px; background: #f6f6f6; }
.jc p { margin: 0; }
.jc-call { background: #1c1c1e; color: #fff; justify-items: center; text-align: center; }
.jc-sub { font-size: 9.5px; color: #a1a1a6; }
.jc-who { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.jc-btns { display: flex; gap: 14px; margin-top: 6px; }
.jc-btns span { width: 20px; height: 20px; border-radius: 50%; background: #ff3b30; }
.jc-btns .ok { background: #34c759; }
.jc-note { text-align: center; justify-items: center; }
.jc-note.is-bad { background: #fce8e6; color: #b3261e; }
.jc-note.is-muted { background: #f1f3f4; color: #5f6368; }
.jc-note.is-plain { background: #fff; border: 1px solid #e3e3e3; }
.jc-nt { font-weight: 800; font-size: 12.5px; }
.jc-nx { font-size: 11px; opacity: .85; }
.jc-text { background: #f1f1f1; }
.jc-from { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #70757a; }
.jc-bub { background: #e5e5ea; border-radius: 12px; border-bottom-left-radius: 4px; padding: 6px 8px; line-height: 1.3; }
.jc-when { font-size: 9.5px; color: #188038; font-weight: 700; }
.jc-res { justify-items: center; text-align: center; }
.jc-res.is-bad { background: #fce8e6; color: #b3261e; }
.jc-res.is-ok { background: #e6f4ea; color: #137333; }
.jc-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; background: #d93025; }
.jc-res.is-ok .jc-ico { background: #188038; }

/* ============ BOOKING: THREE SCREENS ============ */
.bss { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: start; }
.bs-col { display: grid; gap: 10px; }
.bs { position: relative; min-height: 132px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 12px 28px rgba(20,20,20,.09); display: grid; gap: 7px; align-content: center; font-size: 12px; }
.bs p { margin: 0; }
.bs .pin.at-top { top: -11px; right: -9px; }
.bs-arrow { align-self: center; margin-top: -20px; font-size: 20px; font-weight: 800; color: #b9b1a5; }
.bs-label { margin: 0; text-align: center; font: 800 13px/1.2 -apple-system, "Segoe UI", sans-serif; color: var(--ink); }
.bs-name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.bs-meta { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; color: #5f6368; font-size: 11px; }
.bs-book { display: block; text-align: center; background: #1a73e8; color: #fff; font-weight: 700; border-radius: 999px; padding: 8px; }
.bs-h { font-weight: 700; }
.bs-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bs-slots span { text-align: center; border: 1px solid #dadce0; border-radius: 8px; padding: 6px 2px; font-size: 11px; color: #1a73e8; }
.bs-slots .is-on { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.bs-cal { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: start; }
.bs-day { display: grid; justify-items: center; line-height: 1.1; }
.bs-day span { font-size: 9.5px; font-weight: 700; color: #d93025; }
.bs-day b { font-size: 20px; font-weight: 300; }
.bs-ev { display: grid; gap: 2px; background: #e6f4ea; border-left: 3px solid #188038; border-radius: 6px; padding: 7px 8px; font-size: 11px; }
.bs-ev b { color: #137333; }
.bs-new { font-size: 9.5px; font-weight: 800; color: #188038; text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 860px) {
  .jr-stops { grid-template-columns: 1fr; }
  .jr-arrow { justify-self: center; transform: rotate(90deg); line-height: 1; }
  .jc { min-height: 0; padding: 10px 12px; }
  .bss { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
  .bs-arrow { justify-self: center; transform: rotate(90deg); margin: 0; }
  .lg-eq { margin-top: 0; }
}

/* The generic ".ps-art p { margin: 0 }" was eating the lane label's gap. */
.jr-lane { display: grid; gap: 12px; }
.jr .jr-lab { margin: 0; }


/* ============ PARTS: A CLEAR BREAK ============ */
.gp-part.is-next { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--rule); }
.gp-part + .ps { padding-top: 16px; }
.ps-note { margin: 2px 0 0; max-width: 52ch; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
.ps-art .device-phone { width: 250px; max-width: 100%; margin: 0 auto; }
.pin.at-in { right: 6px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; font-size: 10px; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.25); }

/* ============ iOS ============ */
.ios { font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif; color: #000; background: #fff; min-height: 420px; }
.ios p { margin: 0; }
/* Recents */
.ios-rc { padding: 6px 0 0; }
.rc-seg { margin: 4px auto 6px; width: 130px; display: grid; grid-template-columns: 1fr 1fr; background: #eeeef0; border-radius: 8px; padding: 2px; font-size: 10.5px; text-align: center; }
.rc-seg span { padding: 3px 0; border-radius: 6px; }
.rc-seg .is-on { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.rc-title { padding: 2px 14px 6px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.rc-row { position: relative; display: grid; grid-template-columns: 1fr auto 18px; gap: 6px; align-items: center; padding: 8px 32px 8px 14px; border-top: 1px solid #e5e5ea; }
.rc-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.rc-row.is-missed .rc-name { color: #ff3b30; }
.rc-sub { font-size: 10.5px; color: #8e8e93; }
.rc-time { font-size: 10.5px; color: #8e8e93; }
.rc-info { width: 15px; height: 15px; border-radius: 50%; border: 1.3px solid #0a84ff; color: #0a84ff; font: italic 700 9px/1 Georgia, serif; display: grid; place-items: center; }
.rc-row .pin.at-in { right: 6px; }
/* Messages */
.ios-im { display: grid; grid-template-rows: auto 1fr; }
.im-head { position: relative; display: grid; justify-items: center; gap: 3px; padding: 4px 10px 8px; background: #f7f7f9; border-bottom: 1px solid #e5e5ea; }
.im-back { position: absolute; left: 10px; top: 10px; font-size: 26px; line-height: 1; color: #0a84ff; }
.im-av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(#a8adb7, #858a94); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.im-name { font-size: 10.5px; }
.im-body { display: grid; gap: 4px; padding: 10px 10px 14px; align-content: start; }
.im-stamp { text-align: center; font-size: 9.5px; color: #8e8e93; margin: 2px 0 4px !important; }
.im-stamp b { font-weight: 600; }
.im-row { position: relative; display: grid; }
.im-row.is-them { justify-items: start; padding-right: 26px; }
.im-row.is-me { justify-items: end; }
.im-b { max-width: 82%; padding: 7px 11px; border-radius: 17px; font-size: 11.5px; line-height: 1.3; }
.is-them .im-b { background: #e9e9eb; color: #000; border-bottom-left-radius: 5px; }
.is-me .im-b { background: #0a84ff; color: #fff; border-bottom-right-radius: 5px; }
.im-status { text-align: right; font-size: 9px; color: #8e8e93; }
.im-link { width: 78%; border-radius: 15px; overflow: hidden; background: #e9e9eb; }
.im-link-img { height: 64px; display: grid; place-items: center; background: #fff; border-bottom: 1px solid #d8d8dc; }
.im-g { font: 700 30px/1 Arial, sans-serif; background: conic-gradient(from -45deg, #ea4335 0 25%, #4285f4 0 50%, #34a853 0 75%, #fbbc05 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.im-link-t { display: grid; padding: 6px 10px 8px; font-size: 10.5px; line-height: 1.3; }
.im-link-t span { color: #8e8e93; }

/* ---- Step 1: two phones ---- */
.cp { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.cp-col { display: grid; justify-items: center; gap: 12px; }
.cp-tag { font: 800 12px/1 -apple-system, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; color: #fff; background: #d93025; }
.cp-col.is-good .cp-tag { background: #188038; }
.cp-cap { margin: 0; font-size: 12.5px; font-weight: 600; text-align: center; color: var(--ink); }

/* ---- Step 3: Gmail, follow-ups, accepted PDF ---- */
.bs.qf2 { align-content: start; min-height: 0; padding: 12px; }
.gm { display: grid; gap: 7px; }
.gm-from { display: flex; gap: 8px; align-items: center; }
.gm-from div { display: grid; line-height: 1.2; }
.gm-from b { font-size: 11.5px; } .gm-from span { font-size: 10px; color: #5f6368; }
.gm-av { width: 26px; height: 26px; border-radius: 50%; background: #1a73e8; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; flex: none; }
.gm-subj { font-size: 12.5px; font-weight: 600; }
.gm-att { border: 1px solid #dadce0; border-radius: 8px; overflow: hidden; }
.gm-thumb { padding: 8px; background: #f1f3f4; max-height: 150px; overflow: hidden; }
.gm-chip { display: flex; align-items: center; gap: 6px; padding: 7px 8px; font-size: 10.5px; font-weight: 600; border-top: 1px solid #dadce0; }
.gm-pdf { background: #d93025; color: #fff; font-size: 8px; font-weight: 800; padding: 2px 4px; border-radius: 3px; }
.pdf { position: relative; background: #fff; border-radius: 4px; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.15); display: grid; gap: 5px; font-size: 9.5px; }
.pdf-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--accent); padding-bottom: 4px; }
.pdf-head b { font-size: 11px; } .pdf-head span { font-size: 8.5px; font-weight: 800; color: #5f6368; letter-spacing: .04em; }
.pdf-to { color: #5f6368; font-size: 8.5px; }
.pdf-lines { display: grid; gap: 2px; }
.pdf-lines p, .pdf-total { display: flex; justify-content: space-between; gap: 6px; }
.pdf-total { border-top: 1px solid #dadce0; padding-top: 4px; font-size: 10.5px; }
.pdf-btn { justify-self: start; background: #188038; color: #fff; font-weight: 700; font-size: 9px; padding: 4px 8px; border-radius: 4px; }
.pdf-sign { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.pdf-sig { font: italic 600 16px/1 "Brush Script MT", "Segoe Script", cursive; color: #1a3a8f; border-bottom: 1px solid #9aa0a6; padding: 0 6px 2px 0; }
.pdf-stamp { font-weight: 900; font-size: 11px; letter-spacing: .1em; color: #188038; border: 2px solid #188038; border-radius: 4px; padding: 2px 6px; transform: rotate(-8deg); }
.fu { display: grid; gap: 5px; }
.fu p { margin: 0; }
.fu-stamp { font-size: 9.5px; font-weight: 700; color: #188038; text-align: center; margin-top: 2px !important; }
.fu-b { justify-self: start; max-width: 90%; background: #e9e9eb; border-radius: 14px; border-bottom-left-radius: 4px; padding: 6px 9px; font-size: 11px; line-height: 1.3; }
.fu-b.is-me { justify-self: end; background: #0a84ff; color: #fff; border-radius: 14px; border-bottom-right-radius: 4px; }

/* ---- Step 4: phone and review ---- */
.rp { display: grid; grid-template-columns: auto auto minmax(0, 300px); gap: 18px; align-items: center; justify-content: center; }
.rp-arrow { font-size: 24px; font-weight: 800; color: #b9b1a5; }
.rp-review { display: grid; gap: 8px; }
.rp-on { margin: 0; font: 800 12px/1 -apple-system, "Segoe UI", sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #8a8175; }
.rp .rv-card { position: relative; }

/* ---- Result 2: ChatGPT ---- */
.cg { background: #fff; border-radius: 14px; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 18px 40px rgba(20,20,20,.10); font: 13px/1.5 -apple-system, "Segoe UI", sans-serif; color: #0d0d0d; overflow: hidden; }
.cg-top { display: flex; align-items: center; gap: 4px; padding: 10px 14px; font-size: 14px; }
.cg-top span { color: #8f8f8f; }
.cg-body { padding: 6px 16px 10px; display: grid; gap: 12px; }
.cg-user { justify-self: end; max-width: 75%; background: #f4f4f4; border-radius: 18px; padding: 8px 14px; margin: 0; }
.cg-ans { display: grid; gap: 6px; }
.cg-ans p { margin: 0; }
.cg-ans ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.cg-ans li { position: relative; padding-right: 28px; }
.cg-ans li.is-me { background: #e6f4ea; margin-left: -6px; padding: 4px 30px 4px 6px; border-radius: 8px; }
.cg-input { display: flex; justify-content: space-between; align-items: center; margin: 4px 12px 12px; padding: 8px 8px 8px 16px; border-radius: 999px; border: 1px solid #e5e5e5; color: #8f8f8f; }
.cg-send { width: 26px; height: 26px; border-radius: 50%; background: #0d0d0d; color: #fff; display: grid; place-items: center; font-weight: 700; }

/* ---- Result 3: pipeline ---- */
.pl { background: #fff; border-radius: 14px; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 18px 40px rgba(20,20,20,.10); font: 11.5px/1.3 -apple-system, "Segoe UI", sans-serif; color: #202124; overflow: hidden; }
.pl-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #eee; }
.pl-top b { font-size: 13px; } .pl-top span { color: #5f6368; font-size: 11px; }
.pl-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; background: #f6f7f9; }
.pl-col { display: grid; gap: 6px; align-content: start; }
.pl-h { margin: 0; display: flex; justify-content: space-between; font-weight: 700; font-size: 11px; color: #3c4043; padding: 0 2px 2px; }
.pl-h span { color: #9aa0a6; }
.pl-card { position: relative; background: #fff; border-radius: 8px; padding: 8px 28px 8px 9px; box-shadow: 0 1px 2px rgba(0,0,0,.08); display: grid; gap: 2px; }
.pl-card p { margin: 0; }
.pl-card.is-rec { box-shadow: 0 0 0 2px #188038; }
.pl-src { justify-self: start; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 999px; color: #fff; background: #5f6368; }
.pl-src.is-missedcall { background: #d93025; } .pl-src.is-facebook { background: #1877f2; } .pl-src.is-website { background: #202124; } .pl-src.is-quote { background: #b06000; }
.pl-who { font-weight: 700; }
.pl-what { color: #5f6368; }
.pl-x { font-size: 10px; font-weight: 700; color: #188038; }

@media (max-width: 860px) {
  .cp { grid-template-columns: 1fr; }
  .rp { grid-template-columns: 1fr; justify-items: center; }
  .rp-arrow { transform: rotate(90deg); }
  .pl-cols { grid-template-columns: 1fr 1fr; }
}

/* iMessage link preview: a gray card with an image area, like the real one. */
.im-link { border: 1px solid #d8d8dc; }
.im-link-img { background: #f2f2f7; }
.ios { min-height: 380px; }
.gp-part.is-next { margin-top: 40px; }
.gm-av { color: #fff; }


/* ---- Step 3: equal cards, full PDF, content centered ---- */
.bss { align-items: stretch; }
.bss > .bs-col { grid-template-rows: 1fr auto; }
.bss .bs-arrow { margin-top: 0; }
.bs.qf2 { align-content: center; }
.gm-thumb { max-height: none; }
.gm-thumb .pdf-btn { display: none; }
.pdf-head { flex-wrap: wrap; gap: 2px 8px; }
.fu-head { display: flex; align-items: center; gap: 7px; padding-bottom: 7px; margin-bottom: 2px; border-bottom: 1px solid #ececec; font-size: 11.5px; }
.fu-av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#a8adb7, #858a94); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.qa-booked { margin: 8px 0 0 !important; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 8px; background: #e6f4ea; color: #137333; font-weight: 700; font-size: 11.5px; }
.qa-booked span { width: 18px; height: 18px; border-radius: 50%; background: #188038; color: #fff; display: grid; place-items: center; font-size: 10px; flex: none; }

/* ---- Step 4: the review inside their Google reviews panel ---- */
.rp { grid-template-columns: auto auto minmax(0, 340px); gap: 22px; }
.rp-panel { background: #fff; border-radius: 14px; box-shadow: 0 2px 4px rgba(20,20,20,.06), 0 18px 40px rgba(20,20,20,.10); overflow: visible; font: 12px/1.4 -apple-system, "Segoe UI", sans-serif; }
.rp-top { padding: 12px 14px; border-bottom: 1px solid #eee; display: grid; gap: 3px; }
.rp-biz { margin: 0; font-size: 14px; font-weight: 500; color: #202124; }
.rp-sum { margin: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rp-sum b { font-size: 13px; }
.rp-count { color: #1a0dab; }
.rp-count s { color: #9aa0a6; margin-right: 2px; }
.rp-panel .rv-card { box-shadow: none; border-radius: 0 0 14px 14px; background: #f6fbf7; }
.rv-head { position: relative; }
.rp-new { margin-left: auto; align-self: flex-start; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #188038; padding: 3px 7px; border-radius: 999px; }
.rp-arrow { color: #8a8175; font-size: 26px; }

.gm .gm-av { color: #fff; }

@media (max-width: 860px) {
  .rp { grid-template-columns: 1fr; justify-items: center; }
  .rp-review { width: 100%; max-width: 340px; }
}

/* The consent line under the plan lines up with the dark box above it: same
   width, same left edge as the box's text. An old "margin: 14px 0 0 !important"
   was pinning a narrow, centred block to the left. */
.card-plan > .gate-fine { max-width: none; margin: 12px 0 0 !important; padding: 0 20px; text-align: left; }


/* ============ PHONES, MORE LIKE THE REAL THING ============ */
/* Scoped to the growth plan so the report's own website phone keeps its natural height. */
.ps-art .device-phone { width: 262px; }
.ps-art .dp-body {
  padding: 3px;
  border-radius: 46px;
  background: linear-gradient(145deg, #9aa0a8 0%, #4a4f57 22%, #25282e 50%, #50555d 78%, #a3a8b0 100%);
  box-shadow: 0 1px 1px rgba(255,255,255,.4) inset, 0 28px 50px -12px rgba(20,20,20,.38), 0 10px 22px rgba(20,20,20,.14);
}
.ps-art .dp-screen {
  border: 7px solid #0a0a0c;
  border-radius: 43px;
  aspect-ratio: 9 / 19.5;
  grid-template-rows: auto 1fr;
}
.ps-art .dp-status { padding: 10px 20px 4px; font-size: 11px; }
.ps-art .dp-island { top: 7px; width: 78px; height: 22px; }
.ps-art .dp-view { min-height: 0; display: grid; }
.ps-art .dp-home { bottom: 6px; width: 96px; height: 4px; background: #111; opacity: .85; }
.ps-art .dp-btn { background: linear-gradient(90deg, #5c6168, #2c3036); width: 3px; }
.ps-art .dp-mute { left: -3px; top: 96px; height: 24px; }
.ps-art .dp-vol-up { left: -3px; top: 134px; height: 42px; }
.ps-art .dp-vol-dn { left: -3px; top: 186px; height: 42px; }
.ps-art .dp-power { right: -3px; top: 150px; height: 64px; }

/* The screens fill the phone instead of stopping short. */
.ps-art .ios { min-height: 0; height: 100%; }
.ps-art .ios-rc { display: grid; grid-template-rows: auto auto 1fr auto; }
.ps-art .ios-im { grid-template-rows: auto 1fr auto; }
.ps-art .im-body { overflow: hidden; align-content: start; }

/* Phone app tab bar */
.ios-tabs { display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px 18px; border-top: 1px solid #e5e5ea; background: #f7f7f9; }
.ios-tabs span { display: grid; justify-items: center; gap: 1px; font-size: 8px; color: #8e8e93; }
.ios-tabs i { font-style: normal; font-size: 14px; line-height: 1.1; }
.ios-tabs .is-on { color: #0a84ff; }

/* Messages compose bar */
.im-compose { display: flex; align-items: center; gap: 7px; padding: 6px 10px 18px; background: #fff; }
.im-plus { width: 26px; height: 26px; border-radius: 50%; background: #e9e9eb; color: #8e8e93; display: grid; place-items: center; font-size: 17px; line-height: 1; flex: none; }
.im-field { flex: 1; display: flex; justify-content: space-between; align-items: center; border: 1px solid #d1d1d6; border-radius: 16px; padding: 5px 10px; font-size: 11px; color: #b3b3b8; }
.im-mic { width: 7px; height: 11px; border-radius: 4px; border: 1.5px solid #b3b3b8; }

/* A microphone, not a zero: capsule, cradle and stem. */
.im-mic { position: relative; width: 6px; height: 9px; margin-right: 3px; border: 1.5px solid #b3b3b8; border-radius: 4px; }
.im-mic::after { content: ""; position: absolute; left: 50%; top: 4px; width: 10px; height: 6px; transform: translateX(-50%); border: 1.5px solid #b3b3b8; border-top: 0; border-radius: 0 0 6px 6px; }
.im-mic::before { content: ""; position: absolute; left: 50%; top: 11px; width: 1.5px; height: 3px; transform: translateX(-50%); background: #b3b3b8; }
.ps-art .rc-list { overflow: hidden; }


/* ============ THE ASK: BOOK THE CALL ============ */
.book { margin-top: 44px; padding: 40px 28px 30px; border-radius: 24px; background: var(--ink); color: #fff; display: grid; justify-items: center; text-align: center; gap: 12px; }
.book p { margin: 0; }
.book-kick { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffb27a; }
.card-plan .book-title { margin: 0; max-width: 24ch; font-size: clamp(1.5rem, 3.6vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: #fff; text-wrap: balance; }
.book-money { color: #ffb27a; }
.book-sub { max-width: 52ch; font-size: 1rem; line-height: 1.55; color: #cfd6e0; }
.book-chips { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.book-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 0.85rem; font-weight: 600; }
.book-chips li::before { content: "\2713"; color: #34c759; font-weight: 800; }
.book-cal { width: 100%; max-width: 760px; margin-top: 8px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px -16px rgba(0,0,0,.5); }
.bk-cal-slot { position: relative; min-height: 640px; }
.bk-cal-frame { display: block; width: 100%; min-height: 640px; border: 0; overflow: hidden; }
.bk-cal-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #5f6368; font-size: 0.92rem; }
.bk-cal-slot.is-ready .bk-cal-wait { display: none; }
.bk-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #dadce0; border-top-color: var(--accent); animation: bkspin .8s linear infinite; }
@keyframes bkspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bk-spin { animation: none; } }
.book-alt { font-size: 0.82rem; color: #9aa6b5; }
.book-alt a { color: #fff; }

/* The jump link at the top of the plan */
.book-jump { justify-self: center; display: inline-flex; align-items: center; gap: 4px; margin: 6px auto 0; padding: 11px 20px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.95rem; text-decoration: none; box-shadow: 0 8px 20px -8px rgba(232,112,42,.7); }
.book-jump:hover { filter: brightness(1.05); }
.plan-locked > .book-jump { display: table; }

/* The old dark box is replaced; the consent line under it keeps its alignment. */
.card-plan > .gate-fine { padding: 0 28px; }

@media (max-width: 640px) {
  .book { padding: 30px 14px 22px; border-radius: 18px; }
  .book-cal { border-radius: 14px; }
  .bk-cal-slot, .bk-cal-frame { min-height: 760px; }
}

/* Keep the business name whole; it was breaking at its own hyphen. */
.book-who { white-space: nowrap; }
@media (max-width: 640px) {
  /* The calendar sizes itself once it loads; this is only the floor while it does. */
  .bk-cal-slot, .bk-cal-frame { min-height: 600px; }
}

/* The headline names both halves of the offer: the report, then the Growth Plan. */
.h1-accent { color: var(--accent-ink); }

/* On a phone the steps stack, and the markup puts the picture first, so the step's
   heading arrived after its own illustration. Below the desktop breakpoint the words
   lead; at desktop width nothing changes. */
@media (max-width: 1039px) {
  .how-copy { order: -1; }
}
/* Two statements, two lines: the report, then the plan. */
.hero h1 { max-width: none; font-size: clamp(2rem, 4.6vw, 3.25rem); }
.h1-accent { display: block; }
/* The hero column is 760px, too narrow for either sentence to hold a line at this size.
   The headline alone spills wider, centred on the column; nothing else moves. */
/* Two short lines, each one statement, inside the hero column. The earlier version spilled
   past the column and its second line ran into the edge on smaller screens. */
.hero h1 { margin-bottom: 30px; font-size: clamp(2.1rem, 6vw, 3.4rem); }

.nowrap { white-space: nowrap; }
.hero .sub { text-wrap: balance; }

/* The gap from the search hint down to "How it works" was 108px of stacked padding
   (the empty status line, the hero's bottom padding and the section's top padding).
   Trimmed to read as one page rather than two. */
.hero { padding-bottom: 14px; }
.status { margin-top: 10px; }
.how { padding-top: 10px; }


/* ============ LANDING: REPORT PREVIEW BESIDE THE HEADLINE ============ */
.hero-pill { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); letter-spacing: 0.08em; }
.hero-checks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.hero-checks li::before { content: "\2713"; margin-right: 6px; color: var(--good); font-weight: 800; }

.hero-art { position: relative; width: 100%; max-width: 440px; height: 520px; margin: 34px auto 0; }
.ha-phone { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 236px; height: 500px; padding: 9px; border-radius: 40px; background: linear-gradient(145deg, #9aa0a8, #2a2e35 40%, #4a4f57 80%, #9aa3ad); box-shadow: 0 30px 60px -18px rgba(15,27,45,.45); }
.ha-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 32px; background: #fff; }
.ha-notch { position: absolute; left: 50%; top: 17px; transform: translateX(-50%); width: 70px; height: 20px; border-radius: 999px; background: #0b0d10; z-index: 2; }

.ha-card { position: absolute; z-index: 3; background: #fff; border-radius: 14px; padding: 11px 13px; box-shadow: 0 2px 4px rgba(15,27,45,.06), 0 16px 34px rgba(15,27,45,.16); text-align: left; font-size: 12px; color: var(--ink); }
.ha-card p { margin: 0; }
.ha-k { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ha-v { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: var(--bad); }
.ha-v span { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-left: 2px; }
.ha-s { font-size: 11.5px; font-weight: 700; color: var(--ink-2); margin-top: 3px !important; }
.ha-money { left: 0; top: 36px; }
.ha-map { right: 0; top: 92px; width: 132px; }
.ha-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 7px; }
.ha-grid i { height: 16px; border-radius: 4px; background: var(--bad-soft); box-shadow: inset 0 0 0 1px rgba(163,58,34,.25); }
.ha-grid i.ok { background: var(--good-soft); box-shadow: inset 0 0 0 1px rgba(31,122,77,.35); }
.ha-rivals { left: -4px; top: 214px; width: 158px; }
.ha-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ha-row b { font-size: 11.5px; }
.ha-av { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; display: grid; place-items: center; }
.ha-av.a1 { background: #4285f4; } .ha-av.a2 { background: #ea4335; } .ha-av.a3 { background: #34a853; }
.ha-ai { right: -2px; top: 262px; }
.ha-no { margin-top: 5px !important; font-size: 14px; font-weight: 800; color: var(--bad); }
.ha-no span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 10px; margin-right: 5px; }
.ha-plan { left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; }
.ha-plan .ha-k { color: #ffb27a; }
.ha-plan .ha-s { color: #fff; }
.ha-tick { width: 26px; height: 26px; border-radius: 50%; background: #34c759; color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; }

@media (min-width: 1040px) {
  .hero { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; text-align: left; padding-top: 48px; }
  .hero-main .search { margin-left: 0; }
  .hero-checks { justify-content: flex-start; }
  .hero-main .hint { text-align: left; }
  .hero .h1-accent { display: block; }
  .hero h1 { font-size: clamp(2.4rem, 3.9vw, 3.4rem); }
  .hero-art { margin: 0 auto; }
}
@media (max-width: 480px) {
  .hero-art { transform: scale(.82); transform-origin: top center; height: 430px; margin-top: 22px; }
}

/* ============ WHAT'S IN YOUR FREE REPORT ============ */
.inside { max-width: 1100px; margin: 0 auto; padding: 36px 20px 20px; text-align: center; }
.inside-title { margin: 0 0 22px; font-size: clamp(1.15rem, 2.8vw, 1.45rem); letter-spacing: -0.02em; }
.inside-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: left; }
.inside-list li { display: grid; gap: 3px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--rule); }
.in-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; font-weight: 600; color: var(--accent-ink); }
.inside-list b { font-size: 1rem; letter-spacing: -0.01em; }
.inside-list span:last-child { font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); }
.inside-plus { margin: 16px auto 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.92rem; font-weight: 600; }
.inside-plus span { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-weight: 800; flex: none; }
@media (max-width: 760px) {
  .inside-list { grid-template-columns: 1fr 1fr; }
  .inside-plus { border-radius: 14px; text-align: left; }
}
@media (max-width: 420px) { .inside-list { grid-template-columns: 1fr; } }

/* Spread the preview so the cards frame the phone instead of covering it. */
.hero-art { max-width: 540px; height: 540px; }
.ha-money { left: 0; top: 40px; }
.ha-map { right: 0; top: 70px; }
.ha-rivals { left: 0; top: 250px; }
.ha-ai { right: 0; top: 300px; }
@media (min-width: 1040px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}
/* On a phone there is room for three cards, not five. */
@media (max-width: 560px) {
  .hero-art { transform: none; height: 470px; max-width: 360px; margin-top: 26px; }
  .ha-phone { width: 210px; height: 440px; }
  .ha-rivals, .ha-ai { display: none; }
  .ha-money { left: 0; top: 30px; }
  .ha-map { right: 0; top: 150px; }
  .ha-card { padding: 9px 11px; }
  .ha-v { font-size: 21px; }
}
/* The report list stays two across on a phone; one across ran six cards deep. */
@media (max-width: 420px) {
  .inside-list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .inside-list li { padding: 12px; }
  .inside-list b { font-size: 0.9rem; }
  .inside-list span:last-child { font-size: 0.78rem; }
}


/* Steps 2 and 3: the captions under each card moved into the numbered list below. */
.bss .bs-label { display: none; }
.bss > .bs-col { grid-template-rows: 1fr; }

/* The calendar embed, clipped so it starts at the month. */
.bk-cal-slot { overflow: hidden; min-height: 460px; }
.bk-cal-frame { min-height: 0; }
.book-cal { max-width: 720px; }
@media (max-width: 640px) { .bk-cal-slot { min-height: 440px; } .bk-cal-frame { min-height: 0; } }

/* ============ REPORT SNAPSHOT ============ */
.snapshot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sn-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 16px; display: grid; gap: 4px; align-content: start; box-shadow: 0 1px 2px rgba(15,27,45,.04), 0 10px 24px rgba(15,27,45,.06); }
.sn-card p { margin: 0; }
.sn-k { font-size: 0.7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sn-v { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.sn-v span { font-size: 0.85rem; font-weight: 700; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; }
.sn-s { font-size: 0.82rem; color: var(--ink-2); }
.sn-money .sn-v { color: var(--bad); }
.sn-ai.is-no .sn-v { color: var(--bad); } .sn-ai.is-warn .sn-v { color: var(--accent-ink); } .sn-ai.is-ok .sn-v { color: var(--good); }
.sn-rivals { display: grid; gap: 6px; margin-top: 4px; }
.sn-rival { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 7px; align-items: center; font-size: 0.8rem; }
.sn-rn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.sn-av { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 0.58rem; font-weight: 800; display: grid; place-items: center; }
.sn-av.a1 { background: #4285f4; } .sn-av.a2 { background: #ea4335; } .sn-av.a3 { background: #34a853; }
@media (max-width: 860px) { .snapshot { grid-template-columns: 1fr 1fr; } }
.book-cal { max-width: 760px; }
.sn-grid { display: grid; grid-template-columns: repeat(5, 12px); gap: 3px; margin-top: 6px; }
.sn-grid i { height: 12px; border-radius: 3px; background: var(--bad-soft); box-shadow: inset 0 0 0 1px rgba(163,58,34,.25); }
.sn-grid i.mid { background: var(--warn-soft); box-shadow: inset 0 0 0 1px rgba(184,134,11,.35); }
.sn-grid i.ok { background: var(--good-soft); box-shadow: inset 0 0 0 1px rgba(31,122,77,.4); }


/* ---- the phone in the hero: the whole listing, full width, like a real screen ---- */
.ha-phone { overflow: hidden; }
.ha-phone img { width: 100%; height: auto; object-fit: initial; border-radius: 32px 32px 0 0; }
.ha-phone::after { content: ""; position: absolute; inset: 9px; border-radius: 32px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); pointer-events: none; }
.ha-phone { background-clip: padding-box; }
.ha-phone { background-color: #fff; }

/* ---- report tiles: an icon instead of a number, laid out icon | text ---- */
.inside-list li { grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; }
.in-ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; }
.in-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inside-list b { align-self: end; }
.inside-list li span:last-child { grid-column: 2; }

/* ---- breathing room between the strip and How it works ---- */
.inside { padding: 44px 20px 12px; }
.inside-title { margin-bottom: 20px; }
.how { padding-top: 56px; }

@media (max-width: 420px) {
  .inside-list li { grid-template-columns: 1fr; }
  .in-ico { grid-row: auto; width: 34px; height: 34px; margin-bottom: 4px; }
  .inside-list li span:last-child { grid-column: 1; }
}
/* The screen behind the listing is white all the way down, so it reads as a phone page. */
.ha-phone::before { content: ""; position: absolute; inset: 9px; border-radius: 32px; background: #fff; z-index: 0; }
.ha-phone img { position: relative; z-index: 1; }
.ha-notch { z-index: 2; }

/* The leak section is the working behind the summary card, so it is compact. */
.leak { padding: 20px 22px; }
.leak .leak-lead { margin: 0 0 12px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.leak .leak-lead b { color: var(--bad); }
.leak .leak-math { margin-top: 0; padding-top: 0; border-top: 0; }

/* The calendar frame needs a real height of its own; clipped to zero it was never fetched. */
.bk-cal-frame { min-height: 780px; }

/* However many cards there are (the map card is missing when a business has no pin),
   they share the full row instead of leaving an empty slot on the right. */
.snapshot { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 860px) {
  .snapshot { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .snapshot > .sn-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* ============ FOUNDATION 1, CLEANER ============ */
/* Real phone proportions, a thin even bezel with a metal edge, the island on top, and the
   page's purpose written right under it instead of in a second list. */
.sp-row { gap: 22px; }
.sp { gap: 14px; }
.sp-phone { max-width: 172px; padding: 6px; border-radius: 28px; background: #101114;
  box-shadow: 0 0 0 1.5px #a7adb5, 0 0 0 3px #2b2e34, 0 22px 40px -14px rgba(20,20,20,.40), 0 6px 14px rgba(20,20,20,.10); }
.sp-phone::before { content: ""; position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 46px; height: 13px; border-radius: 999px; background: #0b0c0f; z-index: 2; }
.sp-phone img { border-radius: 22px; background: #fff; }
.sp-cap2 { display: grid; gap: 3px; justify-items: center; text-align: center; }
.sp-cap2 p { margin: 0; }
.sp-label { display: inline-flex; align-items: center; gap: 7px; font: 800 15px/1.2 -apple-system, "Segoe UI", sans-serif; color: var(--ink); }
.sp-n { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.sp-sub { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); max-width: 22ch; }
.sp-cap { margin: 6px 0 0; font-size: 0.74rem; color: #9a9186; }
@media (max-width: 760px) {
  .sp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .sp-phone { max-width: 150px; }
}

/* ============ STEP 1: A TEXT, CLEARLY ============ */
.im-tagged { display: grid; gap: 2px; }
.im-tag { margin: 0; font-size: 8.5px; font-weight: 600; color: #8e8e93; padding: 0 10px; }
.im-tag.is-them { justify-self: start; }
.im-tag.is-me { justify-self: end; }

/* ============ NO ADDRESS ON THE LISTING ============ */
.nomap { display: grid; gap: 16px; }
.nomap p { margin: 0; }
.nm-lead { font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.nm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nm-fact { display: grid; gap: 3px; padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); }
.nm-k { font-size: 0.68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.nm-v { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.nm-fact.is-warn .nm-v { color: var(--accent-ink); }
.nm-fact.is-ok .nm-v { color: var(--good); }
.nm-s { font-size: 0.82rem; line-height: 1.4; color: var(--ink-2); }
.nm-market { display: grid; gap: 10px; }
.nm-h { font-weight: 800; font-size: 1rem; color: var(--ink); }
.nm-h span { font-weight: 500; color: var(--ink-3); }
.nm-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.nm-row { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 16px; }
.nm-row + .nm-row { border-top: 1px solid var(--rule); }
.nm-pos { font-weight: 800; color: var(--ink-3); font-size: 0.9rem; }
.nm-av { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 0.7rem; font-weight: 800; display: grid; place-items: center; }
.nm-av.a1 { background: #4285f4; } .nm-av.a2 { background: #ea4335; } .nm-av.a3 { background: #34a853; } .nm-av.a4 { background: #a142f4; } .nm-av.a5 { background: #f29900; }
.nm-name { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-rate { display: inline-flex; align-items: center; gap: 5px; font-size: 0.9rem; }
.nm-rate b { color: var(--ink); }
.nm-count { font-size: 0.85rem; color: var(--ink-3); min-width: 88px; text-align: right; font-variant-numeric: tabular-nums; }
.nm-foot { font-size: 0.92rem; font-weight: 600; color: var(--ink-2); }
.sn-addr .sn-v { color: var(--accent-ink); }
@media (max-width: 640px) {
  .nm-facts { grid-template-columns: 1fr; }
  .nm-row { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 2px; padding: 10px 12px; }
  .nm-pos { display: none; }
  .nm-av { grid-row: 1 / 3; }
  .nm-name { grid-column: 2 / -1; }
  .nm-rate { grid-column: 2; }
  .nm-count { grid-column: 3; min-width: 0; }
}

/* ============ CUSTOM BOOKING CALENDAR ============ */
/* Our own calendar in the report's colors, reading GoHighLevel's free times through n8n.
   Three panes like Cal.com: the call and who it is for, the month, the day's times. */
.book-cal { max-width: 1020px; border-radius: 20px; text-align: left; color: var(--ink); }
.bk { font-family: inherit; }
.bk p { margin: 0; }
.bk-body { display: grid; grid-template-columns: 250px minmax(0, 1fr) 230px; min-height: 440px; }
.bk-body > * { padding: 26px 24px; }
.bk-info { border-right: 1px solid #e8eaee; display: grid; align-content: start; gap: 10px; }
.bk-brand { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 700; color: var(--ink-2); }
.bk-logo { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.72rem; font-weight: 800; display: grid; place-items: center; }
.bk-callname { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.bk-desc { font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.bk-meta { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); }
.bk-meta li { display: flex; align-items: center; gap: 9px; }
.bk-ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bk-who, .bk-form { margin-top: 10px; padding: 14px; border-radius: 14px; background: #f6f7f9; display: grid; gap: 3px; }
.bk-who-h { display: flex; justify-content: space-between; align-items: center; font-size: 0.68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px !important; }
.bk-edit { border: 0; background: none; padding: 0; font: inherit; font-size: 0.75rem; letter-spacing: 0; text-transform: none; color: var(--accent-ink); font-weight: 700; cursor: pointer; }
.bk-who-n { font-weight: 800; font-size: 0.98rem; }
.bk-who-d { font-size: 0.84rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-form { gap: 9px; }
.bk-field { display: grid; gap: 4px; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.bk-field input { font: inherit; font-size: 0.92rem; font-weight: 500; padding: 9px 11px; border-radius: 10px; border: 1px solid #d6dae1; background: #fff; color: var(--ink); min-width: 0; }
.bk-field input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.bk-save { margin-top: 2px; border: 0; border-radius: 10px; padding: 10px; background: var(--ink); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.bk-err { font-size: 0.8rem; font-weight: 600; color: #b3261e; }

.bk-month { position: relative; }
.bk-mh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.bk-mh p { font-size: 1.05rem; color: var(--ink-3); }
.bk-mh b { color: var(--ink); }
.bk-nav { display: flex; gap: 4px; }
.bk-nav button { width: 32px; height: 32px; border-radius: 9px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.bk-nav button:hover:not([disabled]) { background: #f1f3f5; }
.bk-nav button[disabled] { color: #c9ced6; cursor: default; }
.bk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-dow { text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); padding-bottom: 6px; }
.bk-day { aspect-ratio: 1 / 0.86; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 0.95rem; color: #9aa2ae; position: relative; }
.bk-day.is-open { background: #eef0f3; color: var(--ink); font-weight: 800; cursor: pointer; }
.bk-day.is-open:hover:not([disabled]) { box-shadow: inset 0 0 0 2px var(--ink); }
.bk-day.is-on { background: var(--accent); color: #fff; }
.bk-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translateX(-50%); }
.bk-day:focus-visible, .bk-slot:focus-visible, .bk-confirm:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bk-month.is-locked .bk-grid, .bk-month.is-locked .bk-mh { filter: blur(3px); opacity: .55; pointer-events: none; }
.bk-gate { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; }
.bk-gate p { max-width: 24ch; text-align: center; font-weight: 700; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid #d6dae1; box-shadow: 0 8px 20px rgba(15,27,45,.08); }
.bk-wait { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #5f6368; font-size: 0.92rem; }
.bk-wait a { color: var(--accent-ink); font-weight: 700; }

.bk-times { border-left: 1px solid #e8eaee; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.bk-th { font-size: 1rem; color: var(--ink-3); }
.bk-th b { color: var(--ink); }
.bk-list { display: grid; gap: 8px; max-height: 380px; overflow-y: auto; padding: 2px 4px 2px 2px; }
.bk-slot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid #d6dae1; background: #fff; font: inherit; font-size: 0.92rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.bk-slot i { width: 7px; height: 7px; border-radius: 50%; background: #1fb871; }
.bk-slot:hover { border-color: var(--ink); }
.bk-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bk-chosen { display: grid; place-items: center; border-radius: 10px; background: #3c4350; color: #fff; font-weight: 700; font-size: 0.92rem; padding: 10px 4px; }
.bk-confirm { border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-weight: 800; font-size: 0.92rem; cursor: pointer; }
.bk-confirm[disabled] { opacity: .7; cursor: default; }

.bkc-done { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; padding: 40px 20px; }
.bkc-done-tick { width: 58px; height: 58px; border-radius: 50%; background: #1fb871; color: #fff; display: grid; place-items: center; margin-bottom: 6px; }
.bkc-done-tick .bk-ico { width: 30px; height: 30px; stroke-width: 2.6; }
.bkc-done-h { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.bkc-done-w { font-size: 1.05rem; font-weight: 700; color: var(--accent-ink); }
.bkc-done-s { font-size: 0.92rem; color: var(--ink-2); max-width: 40ch; }

@media (max-width: 900px) {
  .bk-body { grid-template-columns: 1fr; }
  .bk-body > * { padding: 20px 18px; }
  .bk-info { border-right: 0; border-bottom: 1px solid #e8eaee; }
  .bk-times { border-left: 0; border-top: 1px solid #e8eaee; }
  .bk-times:empty { display: none; }
  .bk-list { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); max-height: 300px; }
  .bk-pick { grid-column: 1 / -1; }
}

/* ============ LANDING ON A PHONE ============ */
.hint-eg { white-space: nowrap; }
@media (max-width: 760px) {
  /* The logo sits in the middle; "Start over" keeps its place on the left. */
  .topbar { justify-content: center; position: relative; padding: 16px; }
  .topbar-left { justify-content: center; }
  .topbar .home-back { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
  .hero { padding-top: 12px; }
  .hero-pill { font-size: 0.7rem; letter-spacing: 0.06em; }

  /* One flowing headline across the full width: three lines, not four narrow ones. */
  .hero h1 { font-size: clamp(1.7rem, 7.6vw, 2.05rem); line-height: 1.12; margin-bottom: 22px; max-width: none; text-wrap: balance; }
  .hero .h1-accent { display: inline; }

  /* The example goes on its own line, whole. */
  .hint-eg { display: block; }

  /* The report preview is for wide screens; on a phone it pushes the search off screen. */
  .hero-art { display: none; }

  /* The three numbers sit side by side in one strip instead of a tall stack. */
  .how-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; padding: 18px 4px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
  .how-stats li { padding: 0 8px; }
  .how-stats li + li { border-left: 1px solid var(--rule); }
  .how-stats strong { font-size: 1.45rem; }
  .how-stats span { font-size: 0.74rem; line-height: 1.35; }
}
@media (max-width: 760px) {
  .hero { padding-bottom: 0; }
  .inside { padding-top: 30px; }
}


/* ============ SCAN LIMIT ============ */
.scan-limit { margin: 16px auto 0; max-width: 560px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--rule); text-align: left; box-shadow: var(--shadow); }
.scan-limit p { margin: 0; }
.scan-limit-h { font-weight: 800; color: var(--ink); }
.scan-limit-s { margin-top: 4px !important; font-size: 0.9rem; color: var(--ink-2); }
.scan-limit-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.scan-limit-list a { display: block; padding: 10px 12px; border-radius: 10px; background: var(--paper); color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.scan-limit-list a:hover { text-decoration: underline; }


/* ============ REPORT ON A PHONE ============ */
.hero-bars { display: none; }

/* The Growth Plan line mid-report: a short heading that jumps to the plan. Both sizes. */
.blueprint-nudge { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0; padding: 18px 22px; border-radius: 16px; background: var(--ink); color: #fff; text-decoration: none; font-size: clamp(1.1rem, 2.6vw, 1.45rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; box-shadow: 0 14px 30px -14px rgba(15,27,45,.45); }
.blueprint-nudge b { color: #ffb27a; font-weight: 800; }
.blueprint-nudge .bn-go { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 1.1rem; transition: transform .2s ease; }
.blueprint-nudge:hover .bn-go { transform: translateY(3px); }
.blueprint-nudge:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (max-width: 640px) {
  /* Headline first, then the two scores as bars. The rings and the explainer go. */
  .report-hero { padding: 18px 16px; }
  .report-hero-top { flex-direction: column; align-items: stretch; gap: 14px; }
  .report-hero-text { order: -1; flex: none; }
  .report-hero h2 { font-size: 1.3rem; margin: 0; line-height: 1.2; }
  .report-hero .lead { display: none; }
  .hero-rings { display: none; }
  .hero-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
  .hero-bar { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 8px; padding: 10px 12px; border-radius: 12px; background: var(--paper); --tone: var(--ink-3); }
  .hero-bar.tone-good { --tone: var(--good); } .hero-bar.tone-warn { --tone: var(--warn); } .hero-bar.tone-bad { --tone: var(--bad); }
  .hero-bar p { margin: 0; }
  .hero-bar-k { font-size: 0.66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); line-height: 1.25; }
  .hero-bar-v { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--tone); line-height: 1; }
  .hero-bar-v span { font-size: 0.72rem; font-weight: 700; color: var(--ink-3); margin-left: 1px; }
  .hero-bar-track { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--rule); overflow: hidden; margin-top: 6px; }
  .hero-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--tone); }

  /* The two "next up" rows stay one line each, arrow included. */
  .nextup-row { grid-template-columns: 22px auto 1fr auto; gap: 10px; }
  .nextup-state { grid-column: auto; text-align: right; white-space: nowrap; font-size: 0.78rem; }

  /* Summary cards: money across the top, map and ChatGPT side by side, rivals dropped
     (the ranking section right below names them properly). */
  .snapshot { grid-template-columns: 1fr 1fr; gap: 10px; }
  .snapshot > .sn-rivals-card { display: none; }
  .snapshot > .sn-card:last-child:nth-child(odd) { grid-column: auto; }
  .snapshot > .sn-money { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 2px 10px; flex-wrap: wrap; }
  .snapshot > .sn-money .sn-s { flex-basis: 100%; text-align: right; }
  .sn-card { padding: 12px 14px; border-radius: 14px; }
  .sn-k { font-size: 0.62rem; }
  .sn-v { font-size: 1.35rem; }
  .sn-money .sn-v { font-size: 1.6rem; }
  .sn-s { font-size: 0.76rem; }
  .sn-grid { gap: 3px !important; margin-top: 6px !important; }
  .sn-grid i { width: 11px !important; height: 11px !important; border-radius: 3px !important; }

  /* Mid-report plan line */
  .blueprint-nudge { padding: 14px 16px; font-size: 1.08rem; border-radius: 14px; }
  .blueprint-nudge .bn-go { width: 32px; height: 32px; }

  /* Competitor table: one small card per rival, name on top, the numbers in one line. */
  .card .cmp thead { display: none; }
  .card .cmp, .card .cmp tbody { display: block; }
  .card .cmp tr { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 2px; border-bottom: 1px solid var(--rule); }
  .card .cmp tr:last-child { border-bottom: 0; }
  .card .cmp td { padding: 0; border: 0; white-space: nowrap; font-size: 0.86rem; color: var(--ink-2); }
  .card .cmp td.cmp-name { flex: 1 1 100%; white-space: normal; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
  .card .cmp td.mono { font-family: inherit; }
  .card .cmp td[data-label="Reviews"]::after { content: " reviews"; }
  .card .cmp td[data-label="Spots"]::after { content: " spots"; }
}
@media (max-width: 640px) {
  .card .cmp tbody::before { content: "Beating you nearby"; display: block; padding: 4px 2px 2px; font-size: 0.66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
}

/* Booking calendar, details first: two panes (details | blurred month), no times column. */
.bk.is-gated .bk-body { grid-template-columns: 300px minmax(0, 1fr); }
.bk.is-gated .bk-times { display: none; }
.bk-field input::placeholder { color: #a3aab5; }
@media (max-width: 900px) { .bk.is-gated .bk-body { grid-template-columns: 1fr; } }

/* While the phone gate is up the page behind it cannot move. iOS ignores overflow on body
   alone, so the body is pinned too; the report is at the top when this happens. */
html:has(body.is-locked) { overflow: hidden; }
body.is-locked { position: fixed; inset: 0; width: 100%; overflow: hidden; }


/* ============ BOOKING DETAILS, NEVER CUT OFF ============ */
.bk-who-d { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: normal; }
.bk.is-gated .bk-body { grid-template-columns: 340px minmax(0, 1fr); }
.bk-body { grid-template-columns: 270px minmax(0, 1fr) 230px; }
@media (max-width: 900px) { .bk.is-gated .bk-body, .bk-body { grid-template-columns: 1fr; } }

/* ============ FOUNDATION 1: ONE PHONE, FOUR PAGES ============ */
.sc { display: grid; justify-items: center; gap: 18px; }
.sc p { margin: 0; }
.sc-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15,27,45,.06), 0 8px 20px rgba(15,27,45,.08); }
.sc-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.sc-tab .sc-n { background: var(--rule); color: var(--ink-2); }
.sc-tab:hover { color: var(--ink); }
.sc-tab.is-on { background: var(--ink); color: #fff; }
.sc-tab.is-on .sc-n { background: var(--accent); color: #fff; }
.sc-tab:focus-visible, .sc-arrow:focus-visible, .sc-track:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sc-n { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.7rem; font-weight: 800; background: var(--accent); color: #fff; flex: none; }
.sc-stage { display: grid; grid-template-columns: 52px auto 52px; align-items: center; gap: 28px; }
.sc .device-phone { width: 280px; max-width: 100%; margin: 0; }
.sc .dp-view { overflow: hidden; }
.sc-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sc-track::-webkit-scrollbar { display: none; }
.sc-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.sc-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sc-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 4px rgba(15,27,45,.06), 0 10px 22px rgba(15,27,45,.10); transition: transform .15s ease, opacity .15s ease; }
.sc-arrow .bk-ico { width: 22px; height: 22px; stroke-width: 2.4; }
.sc-arrow:hover:not([disabled]) { transform: scale(1.06); }
.sc-arrow[disabled] { opacity: .3; cursor: default; box-shadow: none; }
.sc-caption { display: grid; justify-items: center; gap: 3px; text-align: center; }
.sc-name { display: inline-flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.sc-name .sc-n { width: 24px; height: 24px; font-size: 0.8rem; }
.sc-sub { font-size: 0.95rem; color: var(--ink-2); }
.sc-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.sc-hint::before { content: "\2194"; font-size: 1rem; color: var(--accent-ink); }
.sc-hint-narrow { display: none; }
@media (max-width: 640px) {
  .sc-stage { grid-template-columns: 36px auto 36px; gap: 10px; }
  .sc .device-phone { width: 220px; }
  .sc-arrow { width: 36px; height: 36px; }
  .sc-arrow .bk-ico { width: 18px; height: 18px; }
  .sc-tab { padding: 7px 10px; font-size: 0.8rem; gap: 5px; }
  .sc-tab .sc-n { width: 17px; height: 17px; font-size: 0.62rem; }
  .sc-tabs { border-radius: 18px; }
  .sc-hint-wide { display: none; }
  .sc-hint-narrow { display: inline; }
}

/* Summary cards on a computer: label and number at the top, a footer pinned to the bottom,
   so four cards of different content still line up across the row. */
.sn-card { display: flex; flex-direction: column; gap: 4px; }
.sn-card > .sn-s, .sn-card > .sn-grid, .sn-card > .sn-rivals { margin-top: auto !important; padding-top: 8px; }
@media (max-width: 640px) {
  .snapshot > .sn-money .sn-s { display: none; }
  .sn-card > .sn-s, .sn-card > .sn-grid, .sn-card > .sn-rivals { margin-top: 6px !important; padding-top: 0; }
  .sn-ai > .sn-s { margin-top: auto !important; }
}

/* Foundation 1 viewer: the plan's own phone size rules must not shrink or grow it. */
.ps-art .sc .device-phone { width: 280px; }
@media (max-width: 640px) {
  .ps-art .sc .device-phone { width: 210px; }
  .sc-tabs { display: grid; grid-template-columns: repeat(4, auto); gap: 2px; padding: 4px; border-radius: 999px; }
  .sc-tab { padding: 7px 9px; font-size: 0.76rem; }
  .sc-tab .sc-n { display: none; }
}

/* Summary cards on a computer: everything centred in each card. */
@media (min-width: 641px) {
  .sn-card { align-items: center; text-align: center; }
  .sn-rivals { width: 100%; }
  .sn-rival { text-align: left; }
}

/* Summary cards on a computer: each card's content sits together in the middle of the
   card, both ways, with no pinned footer leaving a gap. */
@media (min-width: 641px) {
  .sn-card { justify-content: center; }
  .sn-card > .sn-s, .sn-card > .sn-grid, .sn-card > .sn-rivals { margin-top: 6px !important; padding-top: 0; }
}

/* Map card on a computer: the 25 spots as one thin strip across the card instead of a
   5x5 block, so this card is no taller than the others and none of them carry empty space. */
@media (min-width: 641px) {
  .sn-grid { grid-template-columns: repeat(25, minmax(0, 1fr)) !important; width: 100%; gap: 2px !important; margin-top: 10px !important; }
  .sn-grid i { height: 12px !important; border-radius: 2px !important; }
}

/* Summary row on a computer: three cards, the map one in the middle and wider.
   The competitors card drops out here too (the ranking section names them right below). */
@media (min-width: 861px) {
  .snapshot { grid-auto-flow: row; grid-template-columns: 1fr 1.7fr 1fr; }
  .snapshot > .sn-rivals-card { display: none; }

}
@media (max-width: 640px) {
  .snapshot > .sn-money { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

/* Map summary card: the number and a bar filled to the share of nearby searches where
   they are in the top 3, coloured by how good that is. */
.sn-map { --tone: var(--bad); }
.sn-map.is-good { --tone: var(--good); }
.sn-map.is-warn { --tone: #c98a0b; }
.sn-map .sn-v { color: var(--tone); }
.sn-bar { display: block; width: 100%; max-width: 320px; height: 10px; margin-top: 8px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.sn-bar i { display: block; height: 100%; border-radius: inherit; background: var(--tone); }
.sn-map > .sn-s { margin-top: 8px !important; }
@media (max-width: 640px) {
  .sn-bar { height: 8px; margin-top: 6px; }
}

/* The light twin of the Growth Plan line, under the summary cards. */
.blueprint-nudge.is-light { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(15,27,45,.04), 0 10px 24px rgba(15,27,45,.06); font-size: clamp(1rem, 2.2vw, 1.2rem); padding: 14px 18px; }
.blueprint-nudge.is-light b { color: var(--accent-ink); }
.blueprint-nudge.is-light .bn-go { width: 34px; height: 34px; }
.report-anchor { height: 0; scroll-margin-top: 12px; }
.sn-k-under { margin-top: 8px !important; }
.details-nudge { margin: 0; }
.details-nudge + * { scroll-margin-top: 12px; }
/* Same 18px rhythm as every other section in the report. */
.blueprint-nudge { margin: 0; }

/* The report's columns shrink to the screen. Grid tracks default to the widest thing
   inside them, and one wide item in the Growth Plan pushed every section 18px past the
   right edge on phones. */
.report-body, .locked-wrap { grid-template-columns: minmax(0, 1fr); }
.locked-wrap > *, .report-body > * { min-width: 0; }
.plan-locked, .card-plan { grid-template-columns: minmax(0, 1fr); }
.plan-locked > *, .card-plan > * { min-width: 0; }
@media (max-width: 640px) {
  .sc-stage { grid-template-columns: 32px minmax(0, 210px) 32px; gap: 6px; }
  .ps-art .sc .device-phone { width: 100%; }
  .sc-arrow { width: 32px; height: 32px; }
}

/* ============ FULL PASS, 2026-09-27 ============ */
/* Booking headline: the amount never breaks across lines. */
.book-money { white-space: nowrap; }
.card-plan .book-title { max-width: 30ch; }

/* Competitor table: plain numbers, same font as the names. */
.card .cmp td.mono { font-family: inherit; }

@media (max-width: 640px) {
  /* Scorecard: the score sits on the name's line, the bar underneath. */
  .grade { grid-template-columns: 1fr auto; grid-template-areas: "name score" "bar bar"; row-gap: 6px; }
  .grade-name { grid-area: name; }
  .grade-score { grid-area: score; font-weight: 700; color: var(--ink); }
  .grade-bar { grid-area: bar; }

  /* Review loop: one step per line, arrows pointing down between them. */
  .gp-loop { padding: 18px 14px; }
  .gp-loop-row { flex-direction: column; gap: 4px; }
  .gp-loop-a { transform: rotate(90deg); line-height: 1; }

  /* "Runs automatically" sits on the picture's top edge; the red/green tags below it
     get room so the two never touch. */
  .ps-art .cp { padding-top: 14px; }
  .ps-auto { top: -11px; }

  /* Part headings: number and title read as one centred block. */
  .gp-part { justify-content: center; text-align: left; }
}

/* Booking on a phone: until the details are in, only the details show. The blurred month
   under the form made the section very long for no reason. */
@media (max-width: 900px) {
  .bk.is-gated .bk-month { display: none; }
  .bk.is-gated .bk-info { border-bottom: 0; }
}

/* ============ BOOKING ON A PHONE: ONE STEP AT A TIME ============ */
.bk-strip, .bk-strip-h { display: none; }
@media (max-width: 640px) {
  /* Step 2: the details give way to a one-line "Booking as" and the day picker. */
  .bk:not(.is-gated) .bk-info > :not(.bk-who) { display: none; }
  .bk:not(.is-gated) .bk-info { padding: 12px 16px; border-bottom: 1px solid #e8eaee; }
  .bk:not(.is-gated) .bk-who { margin: 0; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; }
  .bk:not(.is-gated) .bk-who-h { grid-column: 1 / -1; margin-bottom: 2px !important; }
  .bk:not(.is-gated) .bk-who-d { display: none; }

  /* Days: a swipeable row of buttons instead of the month grid. */
  .bk:not(.is-gated) .bk-mh, .bk:not(.is-gated) .bk-grid { display: none; }
  .bk-month { padding-bottom: 6px !important; }
  .bk-strip-h { display: block; margin: 0 0 8px !important; font-size: 0.72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
  .bk-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px; }
  .bk-strip::-webkit-scrollbar { display: none; }
  .bk-chip { flex: 0 0 64px; scroll-snap-align: start; display: grid; justify-items: center; gap: 1px; padding: 9px 0; border-radius: 14px; border: 1px solid #d6dae1; background: #fff; font: inherit; color: var(--ink); cursor: pointer; }
  .bk-chip-d, .bk-chip-m { font-size: 0.7rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
  .bk-chip b { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
  .bk-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .bk-chip.is-on .bk-chip-d, .bk-chip.is-on .bk-chip-m { color: rgba(255,255,255,.85); }
  .bk-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* Times: three across, the chosen one opens a full-width Confirm. */
  .bk-times { padding-top: 14px !important; }
  .bk-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; max-height: none !important; overflow: visible !important; }
  .bk-slot { padding: 11px 4px; font-size: 0.88rem; }
  .bk-slot i { display: none; }
  .bk-pick { grid-column: 1 / -1; grid-template-columns: 1fr 1.4fr; }
}
@media (max-width: 900px) {
  .bk-body { grid-template-columns: minmax(0, 1fr) !important; }
  .bk-body > * { min-width: 0; }
}
@media (max-width: 640px) {
  .bk:not(.is-gated) .bk-who { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .bk:not(.is-gated) .bk-who-h { grid-column: auto; margin: 0 !important; }
  .bk:not(.is-gated) .bk-who-h > span { display: none; }
  .bk:not(.is-gated) .bk-who-n { grid-row: 1; grid-column: 1; font-size: 0.95rem; }
  .bk:not(.is-gated) .bk-who-n::before { content: "Booking as "; font-weight: 600; color: var(--ink-3); }
  .bk:not(.is-gated) .bk-who-h { grid-row: 1; grid-column: 2; }
}
.bk-more { display: none; }
@media (max-width: 640px) {
  .bk-list:not(.is-all) > :nth-child(n + 10) { display: none; }
  .bk-more { display: block; width: 100%; margin-top: 10px; padding: 11px; border-radius: 10px; border: 1px dashed #c9ced6; background: none; font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--accent-ink); cursor: pointer; }
}

/* ---- Booking from anywhere: the prompt after the findings and the button that follows
        the reader down the page once the report is open. */
.book-nudge { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0; padding: 18px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(15,27,45,.04), 0 10px 24px rgba(15,27,45,.06); }
.bkn-h { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.25rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.bkn-s { margin: 4px 0 0; font-size: 0.92rem; color: var(--ink-2); }
.bkn-go { white-space: nowrap; padding: 13px 20px; }
.sticky-book { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; border-radius: 999px; padding: 14px 22px; box-shadow: 0 12px 28px -8px rgba(15,27,45,.45); transition: opacity .2s ease, transform .2s ease; }
.sticky-book.is-away { opacity: 0; transform: translateY(14px); pointer-events: none; }
.sticky-book:focus-visible, .bkn-go:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 640px) {
  .book-nudge { flex-direction: column; align-items: stretch; padding: 16px; }
  .bkn-go { width: 100%; }
  .sticky-book { left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .sticky-book { transition: none; } }

/* ---- Three stages: scores on the found / chosen / catch strip. */
.journey-score { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0; vertical-align: 1px; background: var(--paper); color: var(--ink-3); }
.journey-score.tone-good { color: var(--good); background: var(--good-soft); }
.journey-score.tone-warn { color: var(--warn); background: var(--warn-soft); }
.journey-score.tone-bad { color: var(--bad); background: var(--bad-soft); }

/* ---- Capacity track: the map as a small proof, not the headline. */
.map-proof-line { margin: 0 0 14px; font-size: clamp(1rem, 2.2vw, 1.15rem); font-weight: 700; color: var(--ink); line-height: 1.45; }


.pill.tone-neutral { background: var(--paper); color: var(--ink-2); border: 1px solid var(--rule); }

/* ---- Their listing beside the rival people pick. */
.lvr-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-top: 6px; }
.lvr-card { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--rule); background: var(--surface); box-shadow: 0 1px 2px rgba(15,27,45,.04), 0 10px 24px rgba(15,27,45,.06); min-width: 0; }
.lvr-card.is-mine { border-color: var(--bad-soft); }
.lvr-who { margin: 0 0 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.lvr-name { margin: 0; font-weight: 800; font-size: 1.02rem; color: var(--ink); overflow-wrap: anywhere; }
.lvr-rate { margin: 4px 0 12px; display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--ink-2); }
.lvr-stars { color: #f5a623; letter-spacing: 1px; }
.lvr-count.is-gap { color: var(--bad); font-weight: 700; }
.lvr-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.lvr-btn { padding: 7px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; border: 1px solid var(--rule); color: var(--ink-2); background: var(--paper); }
.lvr-btn.is-web { border-color: #1a73e8; color: #1a73e8; background: #e8f0fe; }
.lvr-btn.is-missing { border-style: dashed; border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.lvr-vs { font-weight: 800; color: var(--ink-3); font-size: 0.9rem; }
.lvr-why { margin: 14px 0 0; font-weight: 600; color: var(--ink); }

/* ---- Scorecard: strong areas folded into one line. */
.grade-strong { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--good-soft); color: var(--good); font-weight: 600; font-size: 0.92rem; }
.grade-strong-mark { font-weight: 800; }

/* ---- Growth Plan: the start-here badge and the one-line strengths. */
.ps-start { display: inline-block; margin: 0 auto 10px; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.78rem; font-weight: 800; letter-spacing: .02em; }
.ps.is-start { text-align: center; }
.ps.is-start .ps-start { display: table; }
.ps-strong { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px auto; max-width: 640px; padding: 12px 16px; border-radius: 12px; background: var(--good-soft); color: var(--good); font-weight: 700; text-align: center; }
.ps-strong-mark { font-weight: 800; }

@media (max-width: 640px) {
  .lvr-row { grid-template-columns: 1fr; gap: 8px; }
  .lvr-vs { text-align: center; }
  .hero-bar-k { font-size: 0.6rem; }
}

/* ---- The fear line under the hero headline: one measured sentence, on every screen
        size and before the unlock, because that is the part everyone sees. */
.hero-fear { margin: 8px 0 10px; font-size: clamp(1.02rem, 2.2vw, 1.18rem); font-weight: 700; line-height: 1.4; color: var(--bad); }
.leak-grow { margin: 12px auto 0; max-width: 620px; font-size: 0.95rem; color: var(--ink-2); line-height: 1.5; }
.leak-grow b { color: var(--good); }
.sn-map.is-missing .sn-v { color: var(--bad); }
.sn-map.is-missing .sn-bar i { background: var(--bad); }
@media (max-width: 640px) {
  .hero-fear { font-size: 1rem; margin: 6px 0 0; }
}

/* ---- "On the table" money tile: number, total, then the two parts as small pieces. */
.sn-money.is-table { display: grid; justify-items: center; align-content: center; gap: 2px; text-align: center; }
.sn-money.is-table .sn-v { font-size: 2rem; line-height: 1.05; }
.sn-total { margin: 0; font-size: 0.98rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.sn-split { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 6px 0 0; font-size: 0.74rem; font-weight: 600; color: var(--ink-3); }
.sn-split span { white-space: nowrap; }
.sn-split span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: var(--dot, var(--ink-3)); }
.sn-split .is-leak { --dot: var(--bad); }
.sn-split .is-grow { --dot: var(--good); }
@media (max-width: 640px) {
  .snapshot > .sn-money.is-table { display: grid; justify-items: center; text-align: center; gap: 2px; }
  .sn-money.is-table .sn-v { font-size: 1.7rem; }
}

/* ---- Snapshot v2 (2026-10-01): one wide "on the table" box under the hero, then Google
        reviews and ChatGPT side by side. Two-class selectors so the older snapshot rules
        (4 columns, the phone flex row) cannot win. */
.snapshot.snapshot-v2 { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 12px; }
.snapshot.snapshot-v2 > .sn-card { grid-column: auto; }
.snapshot.snapshot-v2 > .sn-money.is-wide { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: 22px 28px; text-align: left; }
.snapshot.snapshot-v2 .snm-left, .snapshot.snapshot-v2 .snm-right { display: grid; gap: 4px; }
.snapshot.snapshot-v2 .snm-right { justify-items: end; text-align: right; }
.snapshot.snapshot-v2 > .sn-money.is-wide .sn-v { font-size: 2.6rem; line-height: 1.05; }
.snapshot.snapshot-v2 > .sn-money.is-wide .sn-v span { font-size: 1rem; }
.snapshot.snapshot-v2 > .sn-money.is-wide .sn-total { font-size: 1.25rem; }
.snapshot.snapshot-v2 > .sn-money.is-wide .sn-split { justify-content: flex-end; font-size: 0.82rem; margin-top: 2px; }
.snapshot.snapshot-v2 > .sn-reviews, .snapshot.snapshot-v2 > .sn-ai { display: grid; justify-items: center; align-content: center; gap: 4px; text-align: center; padding: 18px 16px; }
.sn-reviews.is-no .sn-v { color: var(--bad); } .sn-reviews.is-warn .sn-v { color: var(--accent-ink); } .sn-reviews.is-ok .sn-v { color: var(--good); }
@media (max-width: 640px) {
  .snapshot.snapshot-v2 { gap: 10px; }
  .snapshot.snapshot-v2 > .sn-money.is-wide { flex-direction: column; align-items: center; text-align: center; padding: 18px 16px; gap: 8px; }
  .snapshot.snapshot-v2 .snm-left, .snapshot.snapshot-v2 .snm-right { justify-items: center; text-align: center; }
  .snapshot.snapshot-v2 > .sn-money.is-wide .sn-v { font-size: 2rem; }
  .snapshot.snapshot-v2 > .sn-money.is-wide .sn-split { justify-content: center; }
  .snapshot.snapshot-v2 > .sn-money .sn-s { display: block; }
  .snapshot.snapshot-v2 > .sn-reviews, .snapshot.snapshot-v2 > .sn-ai { padding: 14px 10px; }
}

/* ---- Snapshot v2, styled (2026-10-01). */
.snapshot.snapshot-v2 > .sn-money.is-wide { background: linear-gradient(120deg, #ffffff 0%, #fff6ef 100%); border: 1px solid #f3d6c2; box-shadow: 0 1px 2px rgba(15,27,45,.04), 0 14px 32px -18px rgba(232,112,42,.45); padding: 24px 30px; }
.snapshot.snapshot-v2 > .sn-money.is-wide .sn-k { color: var(--accent-ink); letter-spacing: .1em; }
.snapshot.snapshot-v2 > .sn-money.is-wide .sn-v { font-size: 3rem; letter-spacing: -0.04em; color: var(--bad); }
.snapshot.snapshot-v2 > .sn-money.is-wide .sn-v span { font-size: 1.05rem; letter-spacing: 0; color: var(--ink-2); font-weight: 700; }
.snapshot.snapshot-v2 .snm-right { min-width: 280px; justify-items: stretch; text-align: right; gap: 8px; }
.snapshot.snapshot-v2 .sn-total { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin: 0; }
.snapshot.snapshot-v2 .snm-about { font-size: 0.95rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.snm-bar { display: flex; gap: 3px; height: 10px; width: 100%; border-radius: 999px; overflow: hidden; }
.snm-bar i { display: block; height: 100%; }
.snm-bar .is-leak { background: var(--bad); border-radius: 999px 0 0 999px; }
.snm-bar .is-grow { background: var(--good); border-radius: 0 999px 999px 0; }
.snapshot.snapshot-v2 > .sn-money.is-wide .sn-split { justify-content: space-between; gap: 6px 14px; font-size: 0.82rem; color: var(--ink-2); font-weight: 600; margin: 0; }
.snapshot.snapshot-v2 .sn-split b { color: var(--ink); font-weight: 800; }

.snapshot.snapshot-v2 > .snx-card { display: flex; flex-direction: row; align-items: flex-start; justify-items: start; text-align: left; gap: 16px; padding: 20px 22px; }
.snx-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.snx-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.snx-ico.is-star { background: #fff4d6; color: #d49a00; }
.snx-ico.is-star svg { fill: currentColor; stroke: none; }
.snx-ico.is-chat { background: #e8f0fe; color: #2f6fdf; }
.snx-body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.snapshot.snapshot-v2 > .snx-card .sn-v { font-size: 1.9rem; line-height: 1.1; }
.snx-stars { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.85rem; color: var(--ink-2); font-weight: 600; }
.snx-star-row { color: #f5a623; letter-spacing: 1px; font-size: 1rem; }
.snx-star-row i { font-style: normal; color: var(--rule); }
.snx-compare { display: grid; gap: 5px; margin-top: 8px; }
.snx-cmp-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--ink-3); font-weight: 600; }
.snx-cmp-row b { color: var(--ink); font-size: 0.8rem; }
.snx-cmp-bar { height: 7px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.snx-cmp-bar i { display: block; height: 100%; border-radius: inherit; }
.snx-cmp-bar .is-you { background: var(--bad); }
.snx-cmp-bar .is-rival { background: var(--ink-3); }
.snx-pill { justify-self: start; margin: 4px 0 2px; padding: 6px 14px; border-radius: 999px; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.snx-pill.is-ok { background: var(--good-soft); color: var(--good); }
.snx-pill.is-warn { background: var(--accent-soft); color: var(--accent-ink); }
.snx-pill.is-no { background: var(--bad-soft); color: var(--bad); }
.snapshot.snapshot-v2 > .snx-card .sn-s { font-size: 0.82rem; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 640px) {
  .snapshot.snapshot-v2 > .sn-money.is-wide { padding: 18px 16px; }
  .snapshot.snapshot-v2 > .sn-money.is-wide .sn-v { font-size: 2.2rem; }
  .snapshot.snapshot-v2 .snm-right { min-width: 0; width: 100%; text-align: center; }
  .snapshot.snapshot-v2 > .sn-money.is-wide .sn-split { justify-content: center; }
  .snapshot.snapshot-v2 > .snx-card { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 10px; }
  .snx-ico { width: 38px; height: 38px; border-radius: 12px; }
  .snx-ico svg { width: 20px; height: 20px; }
  .snx-body { justify-items: center; }
  .snx-pill { justify-self: center; font-size: 1rem; }
  .snx-stars { flex-direction: column; gap: 0; }
  .snx-compare { width: 100%; }
  .snx-cmp-row { grid-template-columns: 1fr; gap: 2px; text-align: center; }
  .snapshot.snapshot-v2 > .snx-card .sn-v { font-size: 1.6rem; }
}

/* ---- ChatGPT box v2: pill beside the label, then who AI is likely to lean on. */
.snx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.snx-head .sn-k { margin: 0; }
.snapshot.snapshot-v2 .snx-head .snx-pill { margin: 0; padding: 4px 11px; font-size: 0.82rem; font-weight: 800; }
.snx-rank { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.snx-rank li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: var(--paper); font-size: 0.82rem; color: var(--ink-2); }
.snx-rank li b { font-weight: 700; color: var(--ink); font-size: 0.8rem; white-space: nowrap; }
.snx-rank-n { font-weight: 800; color: var(--ink-3); font-size: 0.78rem; text-align: center; }
.snx-rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.snx-rank li.is-you { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px #f3c9ad; }
.snx-rank li.is-you .snx-rank-n, .snx-rank li.is-you b { color: var(--accent-ink); }
@media (max-width: 640px) {
  .snx-head { justify-content: center; flex-direction: column; gap: 6px; }
  .snx-rank li { grid-template-columns: 16px 1fr; text-align: left; }
  .snx-rank li b { grid-column: 2; font-size: 0.74rem; color: var(--ink-3); }
}

/* ---- money box v3: two plain sentences instead of a total and a split bar */
.snapshot.snapshot-v2 .snm-right.snm-lines { min-width: 0; max-width: 430px; justify-items: start; text-align: left; gap: 8px; }
.snm-line { position: relative; margin: 0; padding-left: 16px; font-size: 0.95rem; line-height: 1.4; font-weight: 600; color: var(--ink-2); text-wrap: pretty; }
.snm-line::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--ink-3)); }
.snm-line.is-leak { --dot: var(--bad); }
.snm-line.is-grow { --dot: var(--good); }
.snm-line b { font-weight: 800; color: var(--ink); font-size: 1.08rem; }
.snm-line.is-leak b { color: var(--bad); }
.snm-line.is-grow b { color: var(--good); }
@media (max-width: 640px) {
  .snapshot.snapshot-v2 .snm-right.snm-lines { max-width: none; width: 100%; justify-items: start; text-align: left; }
  .snm-line { font-size: 0.88rem; }
}

/* ---- the money box on its own above the gate: one column, a gap before the locked part */
.snapshot.snapshot-v2.snapshot-free { grid-template-columns: minmax(0, 1fr); margin-bottom: 18px; }

/* ---- Google reviews + ChatGPT, v3 (2026-10-01): same shape, same weight, no dead space */
.snapshot.snapshot-v2 > .snz { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; align-content: start; text-align: left; gap: 14px; padding: 20px 22px; }
.snz-head { display: flex; align-items: center; gap: 10px; }
.snz-head .snx-ico { width: 34px; height: 34px; border-radius: 10px; }
.snz-head .snx-ico svg { width: 18px; height: 18px; }
.snz-head .sn-k { margin: 0; flex: 1; min-width: 0; }
.snz-pill { flex: none; padding: 4px 11px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.snz-pill.is-ok { background: var(--good-soft); color: var(--good); }
.snz-pill.is-warn { background: var(--accent-soft); color: var(--accent-ink); }
.snz-pill.is-no { background: var(--bad-soft); color: var(--bad); }

.snz-big { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.snz-n { margin: 0; font-size: 2.2rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.snz-n span { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.snz-reviews.is-no .snz-n { color: var(--bad); }
.snz-reviews.is-warn .snz-n { color: var(--accent-ink); }
.snz-reviews.is-ok .snz-n { color: var(--good); }
.snz-rate { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--ink); }
.snz-stars { color: #f5a623; letter-spacing: 1px; font-size: 1rem; }
.snz-stars i { font-style: normal; color: var(--rule); }

.snz-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.snz-bars li { display: grid; grid-template-columns: minmax(0, 9.5rem) 1fr 3.4rem; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--ink-2); }
.snz-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.snz-bar { height: 8px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.snz-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink-3); opacity: 0.55; }
.snz-bars b { text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.snz-bars li.is-you { color: var(--bad); }
.snz-bars li.is-you .snz-bar-name, .snz-bars li.is-you b { color: var(--bad); font-weight: 800; }
.snz-bars li.is-you .snz-bar i { background: var(--bad); opacity: 1; }
.snz-note { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); }

.snz-chat { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--paper); }
.snz-q { justify-self: end; max-width: 85%; margin: 0; padding: 7px 12px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--surface); font-size: 0.84rem; font-weight: 600; }
.snz-a { display: flex; align-items: flex-start; gap: 8px; }
.snz-bot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #10a37f; color: #fff; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.02em; }
.snz-a-body { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--surface); border: 1px solid var(--rule); }
.snz-a > .snz-a-lead { flex: 1; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--surface); border: 1px solid var(--rule); }
.snz-a-lead { margin: 0 0 4px; font-size: 0.82rem; color: var(--ink-2); }
.snz-picks { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 0.84rem; color: var(--ink); }
.snz-picks li { padding-left: 2px; }
.snz-pick-name { font-weight: 700; }
.snz-pick-meta { margin-left: 6px; font-size: 0.76rem; color: var(--ink-3); white-space: nowrap; }
.snz-picks li.is-you .snz-pick-name { color: var(--good); }
.snz-verdict { margin: 0; font-size: 0.92rem; font-weight: 800; }
.snz-verdict.is-ok { color: var(--good); }
.snz-verdict.is-warn { color: var(--accent-ink); }
.snz-verdict.is-no { color: var(--bad); }
.snz-fine { margin: -10px 0 0; font-size: 0.72rem; color: var(--ink-3); }

@media (max-width: 760px) {
  .snapshot.snapshot-v2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .snapshot.snapshot-v2 > .snz { padding: 16px; gap: 12px; }
  .snz-n { font-size: 1.9rem; }
  .snz-bars li { grid-template-columns: minmax(0, 7rem) 1fr 3rem; gap: 8px; font-size: 0.78rem; }
  .snz-pick-meta { display: block; margin-left: 0; }
}

/* ---- Scorecard v2: one tile per area that needs work */
.sc2-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sc2 { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); }
.sc2-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sc2-name { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.sc2-score { font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sc2-score small { font-size: 0.75rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-left: 1px; }
.sc2-bar { display: block; height: 8px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.sc2-bar i { display: block; height: 100%; border-radius: inherit; }
.sc2-status { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; }
.sc2.tone-bad .sc2-score { color: var(--bad); }
.sc2.tone-bad .sc2-bar i { background: var(--bad); }
.sc2.tone-bad .sc2-status { background: var(--bad-soft); color: var(--bad); }
.sc2.tone-warn .sc2-score { color: var(--accent-ink); }
.sc2.tone-warn .sc2-bar i { background: var(--warn); }
.sc2.tone-warn .sc2-status { background: var(--accent-soft); color: var(--accent-ink); }

.sc2-list.n-1 { grid-template-columns: minmax(0, 1fr); }
.sc2-list.n-3, .sc2-list.n-5, .sc2-list.n-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .sc2-list.sc2-list { grid-template-columns: minmax(0, 1fr); } }

/* ---- ChatGPT box v4: built like the reviews box, so the pair lines up */
.snz-verdict.snz-n { font-size: 2rem; }
.snz-verdict.is-ok { color: var(--good); }
.snz-verdict.is-warn { color: var(--accent-ink); }
.snz-verdict.is-no { color: var(--bad); }
.snz-side { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.snz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.snz-list li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: var(--paper); font-size: 0.84rem; color: var(--ink); }
.snz-list-n { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--rule); font-size: 0.72rem; font-weight: 800; color: var(--ink-2); }
.snz-list b { font-weight: 700; color: var(--ink-2); font-size: 0.8rem; white-space: nowrap; }
.snz-list li.is-you { background: var(--good-soft); color: var(--good); font-weight: 800; }

/* ---- Scorecard v3: one row per area, a ring for the score */
.sc3-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sc3 { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 4px; border-top: 1px solid var(--rule); }
.sc3:first-child { border-top: 0; padding-top: 4px; }
.sc3-ring { --c: var(--bad); position: relative; width: 56px; height: 56px; display: grid; place-items: center; }
.sc3-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--rule) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); }
.sc3-ring b { position: relative; font-size: 1.05rem; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.sc3.tone-warn .sc3-ring { --c: var(--warn); }
.sc3-text { display: grid; gap: 2px; min-width: 0; }
.sc3-name { font-weight: 800; font-size: 1rem; color: var(--ink); }
.sc3-means { font-size: 0.86rem; color: var(--ink-3); line-height: 1.4; }
.sc3-status { padding: 5px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
.sc3.tone-bad .sc3-status { background: var(--bad-soft); color: var(--bad); }
.sc3.tone-warn .sc3-status { background: var(--accent-soft); color: var(--accent-ink); }
@media (max-width: 640px) {
  .sc3 { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; }
  .sc3-ring { width: 48px; height: 48px; grid-row: span 2; }
  .sc3-status { justify-self: start; grid-column: 2; font-size: 0.72rem; padding: 3px 10px; }
}

/* ---- Growth Blueprint header: one dark panel, so the plan below starts clean */
.card-plan > .gp-hero { display: grid; justify-items: center; gap: 6px; margin: 0 0 30px; padding: 30px 24px 26px; border-radius: 16px; background: #111a2e; color: #fff; text-align: center; }
.card-plan > .gp-hero .eyebrow { margin: 0; color: #f4a36b; }
.card-plan > .gp-hero .prize { margin: 0; }
.card-plan > .gp-hero .prize-n { color: #fff; }
.card-plan > .gp-hero .prize-v { margin-top: 6px; color: #c9d2e0; font-weight: 500; }
.card-plan > .gp-hero h3 { color: #fff; margin: 0; }
.gp-hero-badge { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); font-size: 0.85rem; font-weight: 700; color: #fff; }
.gp-hero-badge span { color: #6fd39b; font-weight: 800; }
.card-plan .gp-part { padding: 12px 18px; border-radius: 14px; background: var(--accent-soft); }
.card-plan .gp-part.is-next { border-top: 0; margin-top: 48px; padding-top: 12px; }
@media (max-width: 640px) {
  .card-plan > .gp-hero { padding: 22px 16px 20px; margin-bottom: 22px; }
  .card-plan .gp-part { padding: 10px 12px; }
}

/* ---- Booking popup (2026-10-01) */
html.bkm-open, html.bkm-open body { overflow: hidden; }
.bkm-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(15, 27, 45, 0.55); overflow-y: auto; animation: scan-fade 0.2s ease both; }
.bkm-card { position: relative; width: 100%; max-width: 1000px; margin: auto; padding: 24px 24px 20px; border-radius: 18px; background: var(--surface); box-shadow: 0 30px 80px rgba(15, 27, 45, 0.35); }
.bkm-head { margin: 0 40px 16px 0; }
.bkm-kick { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.bkm-title { margin: 4px 0 0; font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.bkm-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface); font-size: 1.5rem; line-height: 1; color: var(--ink-2); cursor: pointer; }
.bkm-x:hover, .bkm-x:focus-visible { background: var(--paper); color: var(--ink); }
@media (max-width: 640px) {
  .bkm-overlay { padding: 0; align-items: flex-end; }
  .bkm-card { max-height: 94vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 18px 14px 16px; margin: 0; }
}

/* ---- Booking form: name and phone done, email is the one thing left */
.bk-known { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--good-soft); }
.bk-known-row { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.bk-tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--good); color: #fff; font-size: 0.72rem; font-weight: 800; }
.bk-email-step { display: grid; gap: 10px; margin-top: 12px; }
.bk-field.bk-need { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--accent); background: var(--accent-soft); }
.bk-field.bk-need > span { font-weight: 800; color: var(--accent-ink); font-size: 0.9rem; }
.bk-field.bk-need input { width: 100%; padding: 11px 12px; border-radius: 9px; border: 1px solid var(--rule); background: var(--surface); font: inherit; font-size: 1rem; color: var(--ink); }
.bk-field.bk-need input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bk-field.bk-need small { font-size: 0.76rem; color: var(--ink-2); }
.bkm-card { padding-top: 54px; }
@media (max-width: 640px) { .bkm-card { padding-top: 54px; } }

/* ============ PHONE PASS (2026-10-01): phones only, the computer layout is untouched ============ */
@media (max-width: 640px) {
  /* the sticky button: the phone rule that makes every .cta 100% wide pushed it off screen */
  .sticky-book { width: auto; left: 16px; right: 16px; padding: 13px 18px; font-size: 1rem; }

  /* report title and the bars between sections */
  #scanTitle { font-size: 1.45rem; line-height: 1.15; }
  .blueprint-nudge .bn-text { font-size: 1rem; line-height: 1.3; }
  .snz-verdict.snz-n { font-size: 1.7rem; }

  /* heat map: smaller pins so the 25 searches read as a grid, not a wall */
  .heat-pin { min-width: 20px; height: 20px; font-size: 0.6rem; border-width: 1.5px; padding: 0 3px; box-shadow: 0 1px 4px rgba(15, 27, 45, 0.35); }
  .heat-pin.is-you { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
  .heat-pin.is-you::after { top: calc(100% + 5px); font-size: 0.5rem; padding: 1px 5px; }

  /* scorecard rows, a little tighter */
  .sc3 { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; }
  .sc3-ring { width: 44px; height: 44px; }
  .sc3-ring::before { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px)); }
  .sc3-ring b { font-size: 0.92rem; }
  .sc3-name { font-size: 0.95rem; }
  .sc3-means { font-size: 0.8rem; }

  /* Growth Blueprint: part bands and headings that fit a phone */
  .card-plan .gp-part { gap: 10px; justify-content: flex-start; text-align: left; }
  .card-plan .gp-part-n { width: 30px; height: 30px; font-size: 0.9rem; }
  .card-plan .gp-part-t { font-size: 1.2rem; line-height: 1.2; white-space: normal; }
  .card-plan .ps-title { font-size: 1.2rem; line-height: 1.2; }
  .card-plan > .gp-hero .prize-n { font-size: 1.9rem; }
  .card-plan > .gp-hero .prize-v { font-size: 0.95rem; }
  .gp-hero-badge { font-size: 0.8rem; padding: 6px 12px; }

  /* Locked: the money box is the hook, so it has to sit fully above the sign-up sheet,
     with room left for Safari's own bars. The page top shrinks and the sheet gets tighter. */
  body.is-locked .scan-head .eyebrow { display: none; }
  body.is-locked #scanTitle { font-size: 1.05rem; line-height: 1.2; }
  body.is-locked .scan-head { margin-bottom: 8px; }
  body.is-locked .snapshot-free { margin-bottom: 0; }
  body.is-locked .snapshot.snapshot-v2 > .sn-money.is-wide { padding: 12px 14px; gap: 4px; }
  body.is-locked .snapshot.snapshot-v2 > .sn-money.is-wide .sn-v { font-size: 1.6rem; }
  body.is-locked .snm-line { font-size: 0.82rem; }
  body.is-locked .snm-line b { font-size: 0.95rem; }
  .gate-overlay .card-unlock { padding: 14px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .gate-overlay .card-unlock h3, .gate-overlay #gateHeading { font-size: 1.1rem; margin: 0 0 10px; }
  .gate-overlay .unlock-form { gap: 8px; }
  .gate-overlay .unlock-form input { padding: 10px 12px; font-size: 16px; }
  .gate-overlay .unlock-form .cta { padding: 12px 16px; }
  .gate-overlay .gate-fine { font-size: 0.64rem !important; line-height: 1.35; margin-top: 8px !important; }
  .gate-overlay .unlock-leave { margin-top: 8px; font-size: 0.8rem; }
}

/* Part bands: "Part 1 of 3" label shows on phones only; computers keep the number circle */
.gp-part-k { display: none; }
@media (max-width: 640px) {
  .card-plan .gp-part { display: grid; justify-items: center; gap: 4px; padding: 16px 16px 18px; text-align: center; }
  .card-plan .gp-part-n { display: none; }
  .card-plan .gp-part-k { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }
  .card-plan .gp-part-t { font-size: 1.3rem; line-height: 1.2; text-align: center; text-wrap: balance; }
}

/* Missed calls on a phone: one screen at a time behind a switch (computers show both) */
.cp-switch { display: none; }
@media (max-width: 640px) {
  .cp-switch { display: flex; gap: 4px; padding: 4px; margin: 0 auto 14px; max-width: 340px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); }
  .cp-tab { flex: 1; padding: 9px 10px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 0.82rem; font-weight: 800; color: var(--ink-3); cursor: pointer; }
  .cp-tab.is-bad[aria-selected="true"] { background: var(--bad); color: #fff; }
  .cp-tab.is-good[aria-selected="true"] { background: var(--good); color: #fff; }
  .cp-tab.is-good[aria-selected="false"] { color: var(--good); }
  .cp-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .cp.is-show-bad .cp-col.is-good, .cp.is-show-good .cp-col.is-bad { display: none; }
  .cp .cp-tag { display: none; }
}

/* Step-card markers with their words on them (2026-10-01) */
.bs > .pin.at-top.has-label { top: -14px; right: 14px; left: auto; width: auto; max-width: calc(100% - 28px); height: 28px; padding: 0 12px 0 4px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pin.has-label .pin-n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--accent-ink); display: grid; place-items: center; font: 800 11px/1 -apple-system, "Segoe UI", sans-serif; }
.pin.has-label .pin-t { overflow: hidden; text-overflow: ellipsis; font-family: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0; }
@media (max-width: 640px) { .cp-tab { white-space: nowrap; font-size: 0.78rem; padding: 9px 6px; } .cp-switch { margin-top: 18px; } }
.bs:has(> .pin.has-label) { padding-top: 26px; }

/* slimmer step labels, clear of the card content */
.bs > .pin.at-top.has-label { top: -11px; height: 22px; padding: 0 10px 0 3px; gap: 6px; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0,0,0,.18); }
.pin.has-label .pin-n { width: 16px; height: 16px; font-size: 9.5px; }
.pin.has-label .pin-t { font-size: 0.72rem; font-weight: 700; }
.bs:has(> .pin.has-label) { padding-top: 24px; }
.pin.has-label .pin-t { line-height: 1.35; padding-bottom: 1px; }

/* ============ BATCH 2026-10-01 b ============ */
/* landing headline: two statements, tighter, the second on a soft marker */
.hero h1 { letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
.hero h1 .h1-a { display: block; }
.hero h1 .h1-accent { display: inline; background: linear-gradient(transparent 64%, var(--accent-soft) 64%); padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@media (min-width: 900px) { .hero h1 { font-size: clamp(2.3rem, 3.6vw, 3.2rem); } }
@media (max-width: 480px) { .hero h1 { font-size: clamp(1.85rem, 8.4vw, 2.2rem); line-height: 1.08; } .hero h1 .h1-a { display: block; } }

/* money box: the sentences run to the edge of the box before wrapping */
.snm-line { text-wrap: wrap; }
.snapshot.snapshot-v2 .snm-right.snm-lines { flex: 1 1 360px; max-width: 540px; }

/* the arrow in the orange circle, drawn and centred */
.blueprint-nudge .bn-go { display: grid; place-items: center; line-height: 0; font-size: 0; }
.bn-arrow { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ChatGPT goal, simpler */
.cg.cg-simple { display: grid; gap: 12px; padding: 18px; max-width: 420px; margin: 0 auto; }
.cg-simple .cg-user { justify-self: end; margin: 0; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: #f1f1f1; color: #111; font-size: 0.95rem; }
.cg-pick { margin: 0; padding: 14px 16px; border-radius: 4px 18px 18px 18px; background: var(--good-soft); border: 1px solid #bfe0cc; }
.cg-pick p { margin: 0; }
.cg-pick-k { display: flex; align-items: center; gap: 7px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--good); }
.cg-dot { width: 8px; height: 8px; border-radius: 50%; background: #10a37f; }
.cg-pick-n { margin-top: 6px !important; font-size: 1.1rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.cg-pick-s { margin-top: 3px !important; font-size: 0.9rem; color: var(--ink-2); }

.gp-l2 { display: inline; }

@media (max-width: 640px) {
  /* the locked view's title matches the unlocked one */
  body.is-locked .scan-head .eyebrow { display: block; }
  body.is-locked #scanTitle { font-size: 1.45rem; line-height: 1.15; }

  /* Growth Blueprint header: room to breathe */
  .card-plan > .gp-hero { gap: 10px; padding: 30px 18px 26px; }
  .card-plan > .gp-hero .prize-n { font-size: 2.05rem; line-height: 1.08; }
  .card-plan > .gp-hero .prize-v { margin-top: 2px; line-height: 1.4; }
  .gp-hero-badge { margin-top: 8px; }

  /* part bands: bigger headings, part 2 as "The System" / "Top Contractors Use" */
  .card-plan .gp-part-t { font-size: 1.5rem; line-height: 1.15; }
  .gp-l2 { display: block; }

  /* "Runs automatically" sits above the art instead of on the first step's label */
  .ps-art .ps-auto { position: static; transform: none; justify-self: center; margin: 0 auto 14px; width: max-content; display: flex; }
  .ps-art:has(.ps-auto) { margin-top: 8px; }

  /* the loop as a cycle: 2 x 2 with arrows going round */
  .gp-loop-row { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); grid-template-rows: auto 22px auto; align-items: center; justify-items: center; gap: 6px; flex-direction: initial; }
  .gp-loop-row > :nth-child(1) { grid-area: 1 / 1; }
  .gp-loop-row > :nth-child(2) { grid-area: 1 / 2; transform: none; }
  .gp-loop-row > :nth-child(3) { grid-area: 1 / 3; }
  .gp-loop-row > :nth-child(4) { grid-area: 2 / 3; transform: rotate(90deg); }
  .gp-loop-row > :nth-child(5) { grid-area: 3 / 3; }
  .gp-loop-row > :nth-child(6) { grid-area: 3 / 2; transform: rotate(180deg); }
  .gp-loop-row > :nth-child(7) { grid-area: 3 / 1; }
  .gp-loop-row::after { content: "\2191"; grid-area: 2 / 1; color: var(--good); font-weight: 800; }
  .gp-loop-s { width: 100%; text-align: center; padding: 10px 8px; border-radius: 14px; font-size: 0.85rem; line-height: 1.25; }

  /* calendar heading: one clean line of facts under it, no bubbles */
  .card-plan .book-title { font-size: 1.55rem; line-height: 1.2; max-width: none; }
  .book-chips { flex-wrap: nowrap; gap: 14px; margin: 2px 0 10px; }
  .book-chips li { padding: 0; background: none; font-size: 0.82rem; gap: 4px; white-space: nowrap; }
  .book { gap: 10px; }
}

/* ---- markers with their words on them, everywhere in the plan (2026-10-01) ---- */
.pin.has-label, .kp-pin.has-label { width: auto; height: 22px; padding: 0 9px 0 3px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0,0,0,.18); z-index: 4; }
.kp-pin.has-label .pin-n, .pin.has-label .pin-n { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: var(--accent-ink); display: grid; place-items: center; font: 800 9.5px/1 -apple-system, "Segoe UI", sans-serif; }
.kp-pin.has-label .pin-t, .pin.has-label .pin-t { font-family: inherit; font-size: 0.72rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: #fff; overflow: hidden; text-overflow: ellipsis; }
/* in a text thread: a status line under the bubble, like iMessage's own */
.im-row > .pin.has-label { position: static; transform: none; justify-self: start; margin: 4px 0 0 8px; }
/* on a card: sits on the card's bottom edge, out of the content */
.rp-panel .rv-card > .pin.has-label, .tg-lsa > .pin.has-label { top: auto; bottom: -11px; right: 14px; transform: none; }
.tg-lsa { position: relative; }
.tg-list .pin.has-label { top: -11px; right: 14px; transform: none; }
/* pipeline: a tag line inside the card */
.pl-card > .pin.has-label { position: static; transform: none; justify-self: start; margin-top: 5px; max-width: 100%; }
.pl-card:has(> .pin.has-label) { padding-right: 9px; }
/* listing rows: a short tag at the end of the row */
.pin.at-end.has-label { position: static; margin-left: auto; height: 20px; }
/* Google profile */
.kp-book-wrap .kp-pin.has-label { top: auto; bottom: -11px; right: 12px; transform: none; }

/* landing headline: no marker boxes; smaller and calmer on phones */
.hero h1 .h1-accent { background: none; padding: 0; display: block; }
@media (max-width: 480px) {
  .hero h1 { font-size: 1.85rem; line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 20px; }
  .hero-pill { margin-bottom: 14px; }
}

@media (max-width: 640px) { .snapshot.snapshot-v2 .snm-right.snm-lines { flex: none; width: 100%; max-width: none; } }

.pl-card > .pin.has-label { white-space: normal; height: auto; min-height: 22px; padding: 3px 9px 3px 3px; border-radius: 12px; align-items: flex-start; }
.pl-card > .pin.has-label .pin-t { white-space: normal; overflow: visible; }
.pl-cols, .pl-col { min-width: 0; }
.pl-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .pl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ BATCH 2026-10-01 c ============ */
.shot-lead b { color: var(--bad); font-weight: 800; }
.cp-tab, .cg.cg-simple { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
.gp-loop-a, .gp-loop-row::after { color: var(--good); font-weight: 800; }
/* Google profile labels: on the dividing line above each section, and inside the booking button */
.kp-upd > .kp-pin.has-label, .kp-rev > .kp-pin.has-label { top: -11px; right: 8px; }
.kp-book-wrap:has(> .kp-pin.has-label) .kp-book { text-align: left; padding-left: 14px; }
.kp-book-wrap .kp-pin.has-label { top: 50%; bottom: auto; right: 8px; transform: translateY(-50%); }
@media (max-width: 640px) {
  /* Growth Blueprint header runs edge to edge across the top of its card */
  .card-plan > .gp-hero { margin: -18px -18px 26px; border-radius: 10px 10px 0 0; padding: 32px 20px 28px; }
  .card-plan > .gp-hero .prize-v { margin-top: 10px; }
  /* missed calls switch and the "runs automatically" badge: tighter, real font */
  .cp-switch { margin-top: 4px; }
  .ps-art .ps-auto { margin-bottom: 22px; }
  /* website on a phone: smaller phone, the number first, the facts in one soft panel */
  .shot-device { max-width: 210px; }
  .shot-copy { background: var(--paper); border-radius: 14px; padding: 14px 16px 12px; }
  .shot-lead { margin: 0 0 4px; font-size: 0.92rem; color: var(--ink-2); }
  .shot-lead b { display: block; font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 2px; }
  .shot-copy .loadline { margin-top: 10px; }
  .shot-copy .checks { margin: 10px 0 0; }
}

/* missed calls: labels on the bottom edge of their call-log row, right side (empty there) */
.rc-row { position: relative; }
.rc-row > .pin.has-label { top: auto; bottom: -10px; right: 6px; transform: none; height: 20px; }

/* landing on phones: headline with room at the edges, hint and checks spaced out */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.68rem; line-height: 1.16; margin: 0 auto 24px; max-width: 21ch; }
  .hero .hint { margin: 16px auto 0; font-size: 0.84rem; line-height: 1.5; max-width: 32ch; }
  .hero .hint-eg { display: block; }
  .hero-checks { margin-top: 18px; gap: 6px 16px; }
}

/* phones: four even lines, two per sentence, instead of one long line and two short ones */
@media (max-width: 480px) {
  .hero h1 { font-size: 2.15rem; line-height: 1.1; max-width: none; }
  .hero h1 .h1-l { display: block; }
}

@media (max-width: 480px) {
  .hero { padding-bottom: 8px; }
  .inside { margin-top: 0; padding-top: 28px; }
}

/* phones: TWO lines, one per sentence. The longer sentence is about 14.1x the font size
   wide, so the size follows the screen width and never wraps. */
@media (max-width: 480px) {
  .hero h1 { font-size: min(28px, calc((100vw - 48px) / 14.6)); line-height: 1.2; letter-spacing: -0.025em; }
  .hero h1 .h1-a, .hero h1 .h1-accent { display: block; white-space: nowrap; }
  .hero h1 .h1-l { display: inline; }
}

/* Locked = unlocked on phones (Matt, 2026-10-01): the title and money box keep their full size
   before the code is entered, so nothing jumps when the report unlocks. */
@media (max-width: 640px) {
  body.is-locked #scanTitle { font-size: 1.45rem; line-height: 1.15; }
  body.is-locked .scan-head { margin-bottom: 28px; }
  body.is-locked .scan-head .eyebrow { display: block; }
  body.is-locked .snapshot.snapshot-v2 > .sn-money.is-wide { padding: 18px 16px; gap: 8px; }
  body.is-locked .snapshot.snapshot-v2 > .sn-money.is-wide .sn-v { font-size: 2.2rem; }
  body.is-locked .snm-line { font-size: 0.88rem; }
  body.is-locked .snm-line b { font-size: 1.08rem; }
  body.is-locked .snapshot-free { margin-bottom: 18px; }
}

/* ============ BATCH 2026-10-01 d (phones) ============ */
@media (max-width: 640px) {
  /* part headings: full width, centred text (Safari was shrinking the box and leaving it on the left) */
  .card-plan .gp-part-t { width: 100%; justify-self: stretch; text-align: center; }
  /* the loop: numbered, with a clear start */
  .gp-loop-row { counter-reset: loop; }
  .gp-loop-s { counter-increment: loop; display: grid; justify-items: center; gap: 4px; position: relative; }
  .gp-loop-s::before { content: counter(loop); width: 20px; height: 20px; border-radius: 50%; background: var(--good); color: #fff; font-size: 0.7rem; font-weight: 800; display: grid; place-items: center; }
  .gp-loop-row > :nth-child(1)::after { content: "Start here"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: var(--good); color: #fff; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
  .gp-loop-row > :nth-child(1) { box-shadow: 0 0 0 2px var(--good); padding-top: 14px; }
  .gp-loop { padding-top: 24px; }
  /* same details everywhere: the platform name above each mockup */
  .lg-col > .lg-label { order: -1; margin: 0 0 8px; }
  /* calendar heading: three clear lines */
  .card-plan .book-title { display: grid; gap: 2px; line-height: 1.15; }
  .card-plan .book-title .book-lead { font-size: 1.15rem; font-weight: 700; color: #c9d2e0; }
  .card-plan .book-title .book-money { font-size: 2.2rem; letter-spacing: -0.03em; }
  .card-plan .book-title .book-for { font-size: 1.15rem; font-weight: 700; color: #fff; }
}
@media (max-width: 640px) { .lg-row > .lg-eq { display: none; } .lg-row { gap: 24px; } }

/* part headings: a real line break on phones only (Safari mis-centred the block-span version) */
.gp-part-t .gp-br { display: none; }
@media (max-width: 640px) {
  .gp-part-t .gp-br { display: inline; }
  .card-plan .gp-part-t { text-wrap: wrap; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) { .card-plan .gp-part { grid-template-columns: minmax(0, 1fr); justify-content: stretch; } }

/* ============ Goal 2 pipeline: lanes (2026-10-01) ============
   The stages sit in two lanes (New + Quoted, Replied + Booked). Above phone width the lanes
   vanish (display: contents) and order puts the four stages back as they always read. */
.pl-lane { display: contents; }
.pl-lane:nth-child(1) > .pl-col:nth-child(1) { order: 1; }
.pl-lane:nth-child(2) > .pl-col:nth-child(1) { order: 2; }
.pl-lane:nth-child(1) > .pl-col:nth-child(2) { order: 3; }
.pl-lane:nth-child(2) > .pl-col:nth-child(2) { order: 4; }

/* Phones only: each lane stacks on its own so a one-card stage leaves no hole, and the
   cards, tags and step labels are trimmed so the board reads at a glance. */
@media (max-width: 640px) {
  .pl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px; padding: 8px; }
  .pl-lane { display: grid; gap: 12px; align-content: start; min-width: 0; }
  .pl-col { gap: 5px; }
  .pl-top { flex-wrap: wrap; gap: 2px 8px; padding: 9px 12px; }
  .pl-top b { font-size: 12.5px; }
  .pl-top span { font-size: 10.5px; }
  .pl-card { padding: 7px 8px; gap: 1px; }
  .pl-src { font-size: 8.5px; padding: 1px 6px; margin-bottom: 2px; }
  .pl-x { font-size: 10px; line-height: 1.25; }
  .pl-card > .pin.has-label { min-height: 0; padding: 2px 8px 2px 2px; gap: 5px; margin-top: 6px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,.14); }
  .pl-card > .pin.has-label .pin-n { width: 14px; height: 14px; font-size: 8.5px; }
  .pl-card > .pin.has-label .pin-t { font-size: 0.66rem; line-height: 1.25; text-wrap: balance; }
}

/* ============ Booking in progress (2026-10-01) ============
   Booking takes a few seconds, so the whole calendar is covered with a clear "Booking your
   call" state and can't be tapped again. Before, only the small Confirm label changed. */
.bk { position: relative; }
.bk.is-booking > .bk-body { pointer-events: none; }
.bk-busy { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; background: rgba(255,255,255,.94); border-radius: inherit; }
.bk-busy .bk-spin { width: 34px; height: 34px; border-width: 3px; }
.bk-busy-h { margin: 6px 0 0; font-weight: 800; font-size: 1.15rem; color: var(--ink, #202124); }
.bk-busy-s { margin: 0; color: #5f6368; font-size: 0.92rem; max-width: 30ch; }
.bk-busy-n { margin: 0; color: #80868b; font-size: 0.82rem; }

/* Cloudflare Turnstile: no space taken unless Cloudflare asks for a click. */
.ts-mount:empty, .ts-box:empty { display: none; }
.ts-box { margin-top: 10px; display: flex; justify-content: center; }
.unlock-form .ts-box { grid-column: 1 / -1; }

/* Footer: privacy policy + "Your Privacy Choices" opt-out. */
.site-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; padding: 28px 16px 36px; font-size: 0.82rem; color: var(--ink-3); }
.site-foot a, .site-foot .foot-link { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.site-foot .foot-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.site-foot a:hover, .site-foot .foot-link:hover { color: var(--ink-2); }
.site-foot .foot-msg { flex-basis: 100%; max-width: 46ch; margin: 4px 0 0; text-align: center; color: var(--ink-2); }