/* Public Google Business Profile audit — standalone page.
   Deliberately self-contained: this is a landing surface for ads and organic
   search, so it must not depend on the app stylesheet loading. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #4f46e5;
  --primary-dark: #3730a3;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f8fafc;
  --white: #fff;
  --good: #059669;
  --warn: #d97706;
  --bad: #dc2626;
  --radius: 14px;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* ── Header ─────────────────────────────────────────────────────── */
.ga-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.ga-header-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ga-logo { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; font-weight: 700; }
.ga-logo strong { color: var(--primary); }
.ga-logo-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), #0d9488);
  color: #fff; font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.ga-nav { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.ga-nav a {
  font-size: .875rem; font-weight: 500; color: var(--muted);
  padding: .5rem .7rem; border-radius: 8px; white-space: nowrap;
}
.ga-nav a:hover { color: var(--ink); background: var(--bg); }
.ga-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.ga-nav-actions { display: flex; align-items: center; gap: .5rem; margin-left: 1.25rem; }
.ga-btn-nav {
  font-size: .85rem; font-weight: 700; white-space: nowrap;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; padding: .5rem 1rem; border-radius: 9px;
}
.ga-btn-nav:hover { opacity: .92; }

/* Hidden until the viewport is too narrow for the link row. */
.ga-burger {
  display: none; background: none; border: none; cursor: pointer;
  padding: .4rem; flex-direction: column; gap: 5px; margin-left: auto;
}
.ga-burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .2s, opacity .2s;
}
.ga-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ga-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ga-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



/* ── Navigation on narrower screens ─────────────────────────────── */
/* Five links plus two buttons stop fitting well before phone width, so the
   row collapses into a drawer under the header rather than wrapping into a
   second line that pushes the hero down. */
@media (max-width: 1180px) {
  .ga-burger { display: flex; }
  .ga-nav, .ga-nav-actions {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #0d1226; border-bottom: 1px solid rgba(255,255,255,.08);
    flex-direction: column; align-items: stretch; gap: .15rem;
    padding: .75rem 1.25rem; margin: 0; z-index: 40;
  }
  .ga-nav.open { display: flex; }
  .ga-nav-actions.open { display: flex; top: auto; border-top: none; padding-top: 0; }
  .ga-nav.open + .ga-nav-actions.open { position: static; padding: .5rem 1.25rem 1rem; }
  .ga-nav a, .ga-nav-actions a { padding: .7rem .75rem; text-align: left; }
  .ga-btn-nav { text-align: center; }
  .ga-header { position: relative; }
}

/* ── Buttons ────────────────────────────────────────────────────── */
.ga-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; border: none; border-radius: 11px;
  padding: .85rem 1.6rem; font-size: .95rem; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 14px rgba(79, 70, 229, .3);
}
.ga-btn-primary:hover:not(:disabled) { opacity: .93; }
.ga-btn-primary:disabled { opacity: .6; cursor: default; }
.ga-btn-lg { padding: 1rem 2.25rem; font-size: 1rem; }
.ga-btn-ghost { color: var(--ink-2) !important; font-weight: 600 !important; }
.ga-btn-ghost-sm {
  background: none; border: none; color: var(--muted); font-family: inherit;
  font-size: .82rem; font-weight: 600; cursor: pointer; padding: .4rem .6rem; border-radius: 7px;
}
.ga-btn-ghost-sm:hover { background: var(--bg); color: var(--ink); }

/* ── Hero ───────────────────────────────────────────────────────── */
.ga-hero {
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 45%, #312e81 100%);
  padding: 4rem 1.25rem 4.5rem; text-align: center; color: #fff;
}
.ga-hero-inner { max-width: 680px; margin: 0 auto; }
.ga-badge {
  display: inline-block; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18); color: #a5b4fc;
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: .35rem .9rem; border-radius: 999px; margin-bottom: 1.25rem;
}
.ga-hero h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.6rem); font-weight: 800;
  line-height: 1.18; letter-spacing: -.02em; margin-bottom: 1rem;
}
.ga-hero-sub { color: rgba(255, 255, 255, .68); font-size: 1rem; margin-bottom: 2rem; }
.ga-hero-note { color: rgba(255, 255, 255, .45); font-size: .8rem; margin-top: 1.1rem; }

.ga-form { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.ga-input-wrap { position: relative; flex: 1 1 300px; max-width: 420px; }
.ga-input-icon {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: #64748b; pointer-events: none;
}
.ga-form input {
  width: 100%; padding: .9rem 1rem .9rem 2.75rem;
  border: 1.5px solid rgba(255, 255, 255, .16); border-radius: 11px;
  background: rgba(255, 255, 255, .08); color: #fff;
  font-size: 16px; font-family: inherit; outline: none;
  transition: border-color .15s, background .15s;
}
.ga-form input::placeholder { color: #64748b; }
.ga-form input:focus { border-color: #818cf8; background: rgba(255, 255, 255, .13); }
.ga-form-err { color: #fca5a5; font-size: .85rem; margin-top: .85rem; min-height: 1.2em; }

/* ── Progress ───────────────────────────────────────────────────── */
/* ── While the audit runs ───────────────────────────────────────── */
/* A spinner alone left most of the viewport empty with the footer floating
   in the middle of it. The wait is real — two Places calls and two model
   calls — so it is given something to look at: what is being audited, how
   far along it is, and the shape of the report that is coming. */
.ga-progress {
  max-width: 820px; margin: 0 auto;
  padding: 3.5rem 1.25rem 4rem;
  display: flex; flex-direction: column; align-items: center; gap: 2rem;
}
.ga-prog-card {
  width: 100%; max-width: 460px; text-align: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.85rem 1.75rem;
  box-shadow: 0 4px 24px rgba(15, 23, 42, .06);
}
.ga-prog-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--primary);
  background: #eef2ff; padding: .3rem .7rem; border-radius: 999px;
}
.ga-prog-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
  animation: gaPulse 1.4s ease-in-out infinite;
}
@keyframes gaPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ga-prog-card h2 {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); margin-top: .85rem; line-height: 1.35;
}
.ga-prog-sub { font-size: .85rem; color: var(--muted); margin-top: .3rem; }

.ga-prog-bar {
  height: 5px; background: #eef2ff; border-radius: 999px;
  overflow: hidden; margin: 1.35rem 0 1.25rem;
}
.ga-prog-bar span {
  display: block; height: 100%; width: 8%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #818cf8);
  transition: width 1.1s cubic-bezier(.4, 0, .2, 1);
}

.ga-steps { display: flex; flex-direction: column; gap: .1rem; text-align: left; }
.ga-step {
  display: flex; align-items: center; gap: .7rem;
  font-size: .875rem; color: #94a3b8; padding: .45rem 0;
  transition: color .3s;
}
/* The mark carries the state, so the label never shifts as it changes. */
.ga-step-mark {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--line); background: var(--white);
  position: relative; transition: border-color .3s, background .3s;
}
.ga-step.active { color: var(--ink); font-weight: 600; }
.ga-step.active .ga-step-mark {
  border-color: var(--primary); border-top-color: transparent;
  animation: gaSpin .8s linear infinite;
}
.ga-step.done { color: var(--good); }
.ga-step.done .ga-step-mark { border-color: var(--good); background: var(--good); }
.ga-step.done .ga-step-mark::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@keyframes gaSpin { to { transform: rotate(360deg); } }

/* ── The report, before it exists ───────────────────────────────── */
.ga-skel { width: 100%; display: flex; flex-direction: column; gap: 1rem; opacity: .75; }
.ga-skel-hero {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.5rem;
}
.ga-skel-ring {
  width: 74px; height: 74px; border-radius: 50%; flex-shrink: 0;
  border: 8px solid #eef2ff;
}
.ga-skel-hero-txt { flex: 1; display: flex; flex-direction: column; gap: .6rem; }
.ga-skel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ga-skel-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.25rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.ga-skel-line, .ga-skel-row, .ga-skel-bar {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 50%, #eef1f6 75%);
  background-size: 200% 100%;
  animation: gaShimmer 1.6s linear infinite;
}
.ga-skel-line { height: 11px; }
.ga-skel-row  { height: 26px; border-radius: 8px; }
.ga-skel-bar  { height: 34px; border-radius: 8px; }
.w40 { width: 40%; } .w50 { width: 50%; } .w55 { width: 55%; }
.w60 { width: 60%; } .w70 { width: 70%; }
@keyframes gaShimmer { to { background-position: -200% 0; } }

@media (max-width: 640px) {
  .ga-progress { padding: 2.25rem 1rem 3rem; gap: 1.5rem; }
  .ga-skel-cols { grid-template-columns: 1fr; }
  .ga-skel-hero { padding: 1.15rem; gap: 1rem; }
}

/* An animated wait is still a wait; without motion it is simply static. */
@media (prefers-reduced-motion: reduce) {
  .ga-prog-pulse, .ga-step.active .ga-step-mark,
  .ga-skel-line, .ga-skel-row, .ga-skel-bar { animation: none; }
  .ga-prog-bar span { transition: none; }
}

/* ── Report shell ───────────────────────────────────────────────── */
.ga-report { max-width: 820px; margin: 2.5rem auto; padding: 0 1.25rem 4rem; }
.ga-panel {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}
.ga-panel-title {
  font-size: 1.05rem; font-weight: 700; margin-bottom: .3rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.ga-panel-sub { font-size: .875rem; color: var(--muted); margin-bottom: 1.25rem; }
.ga-tag {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: #fef3c7; color: #92400e; padding: .2rem .55rem; border-radius: 6px;
}

/* ── Score ──────────────────────────────────────────────────────── */
.ga-score-card {
  background: linear-gradient(135deg, #1e1b4b, #312e81 60%, #1e3a8a);
  border-radius: 18px; padding: 2rem; margin-bottom: 1.25rem; color: #fff;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(30, 27, 75, .25);
}
.ga-score-ring-wrap { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.ga-score-ring { width: 120px; height: 120px; }
.ga-score-ring circle:last-child { transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .3, 1); }
.ga-score-inner {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; font-weight: 900; letter-spacing: -.03em;
}
.ga-score-inner small { font-size: .85rem; font-weight: 600; opacity: .55; margin-left: .1rem; }
.ga-score-text { flex: 1; min-width: 200px; }
.ga-score-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: rgba(255, 255, 255, .55); margin-bottom: .3rem;
}
.ga-score-text h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .35rem; }
.ga-score-text p { font-size: .875rem; color: rgba(255, 255, 255, .62); overflow-wrap: anywhere; }

/* ── Business panel ─────────────────────────────────────────────── */
.ga-biz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ga-biz-full { grid-column: 1 / -1; }
.ga-biz-field { display: flex; flex-direction: column; gap: .3rem; }
.ga-biz-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #94a3b8;
}
.ga-biz-label em { font-style: normal; color: var(--good); text-transform: none; letter-spacing: 0; }
.ga-biz-field > span:last-child { font-size: .95rem; font-weight: 600; }
.ga-copybox {
  position: relative; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: .9rem 1rem;
}
.ga-copybox p { font-size: .875rem; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; }
.ga-copy {
  position: absolute; top: .5rem; right: .5rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 7px;
  font-size: .73rem; font-weight: 700; color: var(--muted);
  padding: .3rem .6rem; cursor: pointer; font-family: inherit;
}
.ga-copy:hover { border-color: var(--primary); color: var(--primary); }

/* ── Checks ─────────────────────────────────────────────────────── */
.ga-checks { list-style: none; display: flex; flex-direction: column; }
.ga-check {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .75rem 0; border-bottom: 1px solid #f1f5f9;
}
.ga-checks li:last-child { border-bottom: none; }
.ga-check-icon {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: .1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
}
.ga-check-icon.pass { background: #d1fae5; color: var(--good); }
.ga-check-icon.fail { background: #fee2e2; color: var(--bad); }
.ga-check-body { flex: 1; min-width: 0; }
.ga-check-label { font-size: .9rem; font-weight: 600; }
.ga-check-why { font-size: .8rem; color: var(--muted); margin-top: .1rem; }

/* ── Quiz ───────────────────────────────────────────────────────── */
.ga-quiz-q { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }
.ga-quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ga-quiz-opt {
  background: var(--white); border: 1.5px solid var(--line); border-radius: 11px;
  padding: .9rem 1rem; font-size: .9rem; font-weight: 600; font-family: inherit;
  color: var(--ink-2); cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s, transform .1s;
  min-height: 48px;
}
.ga-quiz-opt:hover { border-color: var(--primary); background: #eef2ff; color: var(--primary); }
.ga-quiz-opt:active { transform: translateY(1px); }
.ga-quiz-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.ga-quiz-progress { font-size: .82rem; color: var(--muted); font-weight: 600; }

/* ── Self-reported profile score ────────────────────────────────── */
.ga-profile-score { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.ga-bar-wrap { flex: 1; height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.ga-bar { height: 100%; border-radius: 999px; width: 0; transition: width .9s ease; background: var(--bad); }
.ga-profile-score span { font-size: 1.4rem; font-weight: 900; letter-spacing: -.02em; }
.ga-profile-score small { font-size: .8rem; color: var(--muted); font-weight: 600; margin-left: -.35rem; }

.ga-findings { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.ga-finding {
  display: flex; gap: .7rem; padding: .85rem 1rem; border-radius: 10px;
  font-size: .88rem; line-height: 1.55;
}
.ga-finding.critical { background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; }
.ga-finding.warning  { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.ga-finding-dot { flex-shrink: 0; font-size: 1rem; line-height: 1.4; }

/* ── Gate ───────────────────────────────────────────────────────── */
.ga-gate { text-align: center; border: 2px dashed #c7d2fe; background: #f5f3ff; }
.ga-gate-lock { font-size: 1.75rem; margin-bottom: .5rem; }
.ga-gate h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: .5rem; }
.ga-gate p { font-size: .9rem; color: var(--ink-2); max-width: 440px; margin: 0 auto 1.35rem; }
.ga-gate-form { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.ga-gate-form input {
  flex: 1 1 240px; max-width: 300px; padding: .85rem 1rem;
  border: 1.5px solid var(--line); border-radius: 11px; background: var(--white);
  font-size: 16px; font-family: inherit; color: var(--ink); outline: none;
}
.ga-gate-form input:focus { border-color: var(--primary); }
.ga-gate .ga-form-err { color: var(--bad); }
.ga-gate-fine { font-size: .78rem; color: var(--muted); margin-top: .85rem; }

/* ── Blueprint ──────────────────────────────────────────────────── */
.ga-bp-list { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.ga-bp-item {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .85rem 1rem;
}
.ga-bp-item strong { display: block; font-size: .9rem; font-weight: 700; margin-bottom: .2rem; }
.ga-bp-item span { font-size: .84rem; color: var(--muted); line-height: 1.55; }
.ga-bp-day {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  background: #ede9fe; color: #5b21b6; padding: .15rem .5rem; border-radius: 5px; margin-bottom: .35rem;
}
.ga-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ga-chip {
  background: #eef2ff; border: 1px solid #c7d2fe; color: #4338ca;
  font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px;
}
.ga-win {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem 1rem; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 10px; font-size: .88rem; color: #14532d; line-height: 1.55;
}
.ga-win-n {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--good); color: #fff; font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: .1rem;
}

/* ── Close ──────────────────────────────────────────────────────── */
.ga-cta {
  background: linear-gradient(135deg, #1e1b4b, #4338ca); color: #fff;
  border-radius: 18px; padding: 2.5rem 1.75rem; text-align: center;
}
.ga-cta h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: .6rem; letter-spacing: -.02em; }
.ga-cta p { font-size: .93rem; color: rgba(255, 255, 255, .72); max-width: 480px; margin: 0 auto 1.5rem; }
.ga-cta-note { font-size: .78rem !important; color: rgba(255, 255, 255, .45) !important; margin-top: .9rem !important; }

/* ── Contact capture, on copying the report link ────────────────── */
/* Small and quick on purpose. The report is already read and free; this is
   an exchange for keeping it, not a wall, so it must never feel like one. */
.ga-lead-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.ga-lead-box {
  position: relative; width: 100%; max-width: 400px;
  background: var(--white); border-radius: 16px; padding: 1.75rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.ga-lead-box h3 {
  font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}
.ga-lead-sub {
  font-size: .87rem; color: var(--muted); line-height: 1.55; margin-top: .4rem;
}
.ga-lead-box form { margin-top: 1.1rem; display: flex; flex-direction: column; }
.ga-lead-box label {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin-bottom: .3rem;
}
.ga-lead-box label + input { margin-bottom: .85rem; }
.ga-lead-box input {
  font-family: inherit; font-size: .92rem; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: .7rem .8rem; outline: none; background: var(--white);
  transition: border-color .15s;
}
.ga-lead-box input:focus { border-color: var(--primary); }
.ga-lead-box .ga-btn-primary { width: 100%; margin-top: .35rem; }
.ga-lead-note {
  font-size: .74rem; color: var(--muted); text-align: center; margin-top: .8rem;
}
.ga-lead-x {
  position: absolute; top: .6rem; right: .7rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: #cbd5e1; padding: .2rem .4rem;
}
.ga-lead-x:hover { color: var(--muted); }

/* ── Everything you get ─────────────────────────────────────────── */
/* Sits under the search form on the landing view, where it is doing the
   persuading. Inside the report it was answering a question the reader had
   already answered by running the audit. */
.ga-landing { max-width: 1100px; margin: 2.75rem auto 0; padding: 0 1.25rem; }
.ga-suite {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.85rem 1.5rem;
  margin-bottom: 1.25rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}
.ga-suite-head { text-align: center; max-width: 540px; margin: 0 auto 1.7rem; }
.ga-suite-head h3 {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; color: var(--ink);
}
.ga-suite-head p {
  font-size: .89rem; color: var(--muted); margin-top: .45rem; line-height: 1.6;
}
/* Explicit three, not auto-fit: six groups auto-fitted to a 4+2 split and
   left half a row of dead space. Three columns divide six exactly, and two
   columns divide it exactly as well. */
.ga-suite-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  .ga-suite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ga-suite-group {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 1.15rem 1.2rem; background: #fcfcfd;
}
.ga-suite-group h4 {
  display: flex; align-items: center; gap: .55rem;
  font-size: .93rem; font-weight: 800; color: var(--ink);
  margin-bottom: .8rem; line-height: 1.3;
}
.ga-suite-group h4 svg {
  width: 17px; height: 17px; flex-shrink: 0; color: var(--primary);
}
.ga-suite-group ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.ga-suite-group li {
  position: relative; padding-left: 1rem;
  font-size: .83rem; color: var(--ink-2); line-height: 1.55;
}
.ga-suite-group li::before {
  content: ''; position: absolute; left: 0; top: .52rem;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary); opacity: .45;
}
.ga-suite-note {
  text-align: center; font-size: .81rem; color: var(--muted);
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.6;
}

@media (max-width: 640px) {
  .ga-suite { padding: 1.35rem 1.1rem; }
  .ga-suite-grid { grid-template-columns: 1fr; }
}

/* ── Footer ─────────────────────────────────────────────────────── */
.ga-footer { background: #0f172a; color: rgba(255, 255, 255, .4); padding: 1.5rem 1.25rem; text-align: center; font-size: .82rem; }
.ga-footer a { color: #818cf8; }

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ga-header-inner { padding: 0 .9rem; height: 54px; }
  .ga-nav a { padding: .45rem .5rem; font-size: .82rem; }

  .ga-hero { padding: 2.5rem 1rem 3rem; }
  .ga-form { gap: .5rem; }
  .ga-input-wrap { flex: 1 1 100%; max-width: none; }
  .ga-btn-primary { width: 100%; }

  .ga-report { margin: 1.25rem auto; padding: 0 .9rem 2.5rem; }
  .ga-panel { padding: 1.1rem; }

  /* The dial and the number stack rather than fight over a phone's width. */
  .ga-score-card { padding: 1.35rem; gap: 1.1rem; justify-content: center; text-align: center; }
  .ga-score-ring-wrap, .ga-score-ring { width: 100px; height: 100px; }
  .ga-score-inner { font-size: 1.75rem; }
  .ga-score-text { min-width: 100%; }

  .ga-biz-grid { grid-template-columns: 1fr; gap: .85rem; }
  /* One option per row: "Months ago" and "This month" are too close to
     risk a mis-tap on a small target. */
  .ga-quiz-opts { grid-template-columns: 1fr; }
  .ga-cta { padding: 1.75rem 1.25rem; }
  .ga-cta h3 { font-size: 1.25rem; }
}

/* ── Listing picker ─────────────────────────────────────────────── */
/* ── Pick the right listing ─────────────────────────────────────── */
/* Two columns from tablet up: fifteen candidates in a single stack is a
   scroll, and the thing that separates two clinics on the same road is the
   address, which needs room to sit under the name rather than beside it. */
.ga-picker { max-width: 980px; margin: 3rem auto; padding: 0 1.25rem 4rem; }
.ga-picker-inner h2 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; text-align: center;
}
.ga-picker-sub {
  font-size: .89rem; color: var(--muted); text-align: center;
  margin: .45rem auto 1.6rem; max-width: 460px; line-height: 1.55;
}
.ga-picker-list {
  display: grid; gap: .7rem; margin-bottom: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ga-pick {
  display: flex; flex-direction: column; text-align: left;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 12px;
  padding: .95rem 1.1rem; cursor: pointer; font-family: inherit; width: 100%;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
}
.ga-pick:hover {
  border-color: var(--primary); background: #f8f9ff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, .1);
}
.ga-pick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ga-pick:active { transform: translateY(1px); }
.ga-pick-name {
  font-size: .95rem; font-weight: 700; color: var(--ink); line-height: 1.35;
  /* Long clinic names are the norm here, and a name clipped to one line is
     exactly the information needed to tell two listings apart. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ga-pick-addr {
  font-size: .82rem; color: var(--muted); line-height: 1.5; margin-top: .25rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Pushed to the bottom so the category chips line up across a row whose
   cards hold different amounts of text. */
.ga-pick-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-top: auto; padding-top: .7rem;
}
.ga-pick-type {
  font-size: .7rem; font-weight: 700; color: var(--primary);
  background: #eef2ff; padding: .18rem .5rem;
  border-radius: 5px; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ga-pick-go {
  font-size: .78rem; font-weight: 700; color: var(--primary);
  opacity: 0; transition: opacity .15s; white-space: nowrap;
}
.ga-pick:hover .ga-pick-go { opacity: 1; }

@media (max-width: 700px) {
  .ga-picker-list { grid-template-columns: 1fr; }
  .ga-pick-go { opacity: 1; }
}


.ga-maps-link {
  display: inline-block; margin-top: .5rem; font-size: .82rem;
  font-weight: 600; color: rgba(255, 255, 255, .8);
}
.ga-maps-link:hover { color: #fff; }

/* ── Competitor benchmark ───────────────────────────────────────── */
.ga-bench-rank { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ga-bench-big { flex-shrink: 0; }
.ga-bench-big span { font-size: 2.75rem; font-weight: 900; letter-spacing: -.04em; color: var(--primary); }
.ga-bench-big small { font-size: 1rem; font-weight: 700; color: var(--muted); }
.ga-bench-detail { flex: 1; min-width: 220px; }
.ga-bench-detail p { font-size: .9rem; color: var(--ink-2); line-height: 1.6; margin-bottom: .35rem; }
.ga-bench-detail strong { color: var(--ink); font-weight: 800; }

.ga-bench-leaders { border-top: 1px solid var(--line); padding-top: 1rem; }
.ga-leaders-title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #94a3b8; margin-bottom: .6rem;
}
.ga-leader { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; font-size: .88rem; }
.ga-leader-n {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #ede9fe; color: #5b21b6; font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ga-leader-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga-leader-stat { flex-shrink: 0; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.ga-more .ga-chips { gap: .45rem; }
.ga-restart { display: block; margin: 1.5rem auto 0; }
.ga-attrib { font-size: .74rem; opacity: .55; margin-top: .35rem; }

@media (max-width: 640px) {
  .ga-picker { margin: 1.75rem auto; padding: 0 .9rem; }
  .ga-bench-rank { gap: .9rem; }
  .ga-bench-big span { font-size: 2.25rem; }
  .ga-bench-detail { min-width: 100%; }
}

/* ── Three-field search form ────────────────────────────────────── */
.ga-form-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  text-align: left;
  max-width: 560px;
  margin: 0 auto;
}
.ga-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.ga-field-wide { grid-column: 1 / -1; }
.ga-field label {
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.ga-form-3 input, .ga-form-3 select {
  width: 100%; padding: .85rem 1rem;
  border: 1.5px solid rgba(255, 255, 255, .16); border-radius: 11px;
  background: rgba(255, 255, 255, .08); color: #fff;
  font-size: 16px; font-family: inherit; outline: none;
  transition: border-color .15s, background .15s;
}
.ga-form-3 input::placeholder { color: #64748b; }
.ga-form-3 input:focus, .ga-form-3 select:focus {
  border-color: #818cf8; background: rgba(255, 255, 255, .13);
}
/* A native select inherits the page background for its list on some
   browsers, so the options are given an explicit dark pair. */
.ga-form-3 select option { background: #1e293b; color: #fff; }
.ga-form-submit { grid-column: 1 / -1; width: 100%; margin-top: .25rem; }

@media (max-width: 640px) {
  .ga-form-3 { grid-template-columns: 1fr; gap: .65rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Hero rebuild
   The first pass was a flat navy gradient with a white header bolted
   on top and form fields at 8% white — they nearly vanished into the
   background, which is fatal on the one control the page exists for.
   ═══════════════════════════════════════════════════════════════ */

/* One dark surface for header + hero, so they read as a single panel. */
/* One row on desktop: name, city, country and the button read as a single
   question rather than a stacked form, which is what makes it feel like
   thirty seconds of work. It needs more width than the hero copy, so the
   form widens past .ga-hero-inner rather than the whole hero doing so. */
@media (min-width: 900px) {
  /* The hero copy wants a 700px measure and the one-row form wants nearly
     1000px, so the container widens and the text is held back rather than
     the form being squeezed into the reading width. */
  .ga-hero-inner { max-width: 1000px; }
  .ga-hero-inner h1, .ga-hero-inner > p { max-width: 700px; margin-left: auto; margin-right: auto; }

  .ga-form-3 {
    max-width: 960px;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, .95fr) auto;
    align-items: end;
    gap: .65rem;
  }
  .ga-form-3 .ga-field-wide { grid-column: auto; }
  /* The base rule spans the button across every column, which put it on a
     row of its own however the columns were sized. */
  .ga-form-3 .ga-form-submit { grid-column: auto; width: auto; margin-top: 0; padding: .85rem 1.75rem; }
}

.ga-top {
  position: relative;
  background:
    radial-gradient(1100px 520px at 50% -12%, #29246b 0%, transparent 62%),
    linear-gradient(178deg, #070b18 0%, #0d1226 42%, #131a3a 100%);
  overflow: hidden;
}
.ga-top::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 72%);
}

.ga-top .ga-nav a { color: rgba(255,255,255,.72); }
.ga-top .ga-nav a:hover { color: #fff; background: rgba(255,255,255,.09); }
.ga-top .ga-nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.07); }
.ga-top .ga-burger { color: rgba(255,255,255,.8); }

.ga-top .ga-header {
  background: none; border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative; z-index: 3;
}
.ga-top .ga-logo { color: #fff; }
.ga-top .ga-logo strong { color: #a5b4fc; }
.ga-top .ga-nav a { color: rgba(255,255,255,.6); }
.ga-top .ga-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.ga-top .ga-btn-ghost { color: rgba(255,255,255,.85) !important; }

/* The header is fixed and the announcement bar sits above it, so every
   first-thing-on-the-page clears --nav-offset rather than a guessed height.
   This selector beat the base rule on specificity, which is why setting the
   padding there alone left the badge tucked under the nav. */
.ga-top .ga-hero {
  background: none; position: relative; z-index: 2;
  padding: calc(var(--nav-offset, 70px) + 2.5rem) 1.25rem 4.5rem;
}
.ga-picker, .ga-progress { padding-top: calc(var(--nav-offset, 70px) + 2.5rem); }
.ga-report { margin-top: calc(var(--nav-offset, 70px) + 1.5rem); }
.ga-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ga-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.ga-glow-1 { width: 460px; height: 460px; top: -140px; left: 50%; margin-left: -230px; background: #4f46e5; }
.ga-glow-2 { width: 340px; height: 340px; bottom: -120px; right: 8%; background: #0d9488; opacity: .28; }

.ga-top .ga-badge {
  background: rgba(129,140,248,.14); border-color: rgba(129,140,248,.32);
  color: #c7d2fe; backdrop-filter: blur(6px);
}
.ga-top .ga-hero h1 { letter-spacing: -.035em; margin-bottom: .9rem; }
.ga-g {
  background: linear-gradient(96deg, #818cf8, #22d3ee);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ga-top .ga-hero-sub { max-width: 560px; margin-left: auto; margin-right: auto; margin-bottom: 2.25rem; }

/* The form is the point of the page, so it gets a real surface instead of
   sitting translucent on the gradient. */
.ga-top .ga-form-3 {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 1.5rem;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(2,6,23,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
.ga-top .ga-field label { color: rgba(255,255,255,.62); }
.ga-top .ga-form-3 input,
.ga-top .ga-form-3 select {
  background: rgba(8,12,26,.6);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}
.ga-top .ga-form-3 input::placeholder { color: #56617d; }
.ga-top .ga-form-3 input:focus,
.ga-top .ga-form-3 select:focus {
  border-color: #818cf8; background: rgba(8,12,26,.85);
  box-shadow: 0 0 0 3px rgba(99,102,241,.22);
}
.ga-top .ga-form-submit { min-height: 52px; font-size: 1rem; margin-top: .5rem; }

.ga-top .ga-hero-note {
  display: inline-flex; align-items: center; gap: .45rem;
  color: rgba(255,255,255,.42); margin-top: 1.15rem;
}
.ga-hero-note svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Three named facts about the audit — concrete beats adjectives. */
.ga-preview {
  list-style: none; display: flex; justify-content: center;
  gap: 2.5rem; flex-wrap: wrap; margin-top: 2.5rem;
  padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.07);
}
.ga-preview li {
  font-size: .82rem; color: rgba(255,255,255,.5);
  display: flex; flex-direction: column; gap: .1rem; align-items: center;
}
.ga-preview span {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em;
  color: #fff; line-height: 1;
}

@media (max-width: 640px) {
  .ga-top .ga-hero { padding: calc(var(--nav-offset, 70px) + 1.25rem) 1rem 2.75rem; }
  .ga-top .ga-form-3 { padding: 1.1rem; border-radius: 15px; }
  .ga-preview { gap: 1.5rem; margin-top: 1.75rem; padding-top: 1.35rem; }
  .ga-preview span { font-size: 1.25rem; }
  .ga-preview li { font-size: .74rem; }
  .ga-glow-1 { width: 300px; height: 300px; margin-left: -150px; }
}

/* ── Score header, tidied ───────────────────────────────────────── */
/* The address was being concatenated onto the category/rating line, which
   on a listing with a long name produced an unreadable four-line run-on. */
.ga-meta-line { display: block; font-size: .9rem; color: rgba(255,255,255,.8); font-weight: 500; }
.ga-meta-addr { display: block; font-size: .82rem; color: rgba(255,255,255,.45); margin-top: .3rem; }

/* ── The read ───────────────────────────────────────────────────── */
.ga-verdict {
  background: linear-gradient(140deg, #faf5ff, #eef2ff 60%, #ecfeff);
  border: 1px solid #ddd6fe; border-radius: var(--radius);
  padding: 1.6rem; margin-bottom: 1.25rem;
}
.ga-verdict h3 {
  font-size: 1.2rem; font-weight: 800; line-height: 1.35;
  letter-spacing: -.02em; color: #312e81; margin-bottom: 1.25rem;
}
.ga-verdict-points { display: flex; flex-direction: column; gap: 1rem; }
.ga-vpoint { display: flex; gap: .85rem; align-items: flex-start; }
.ga-vpoint-n {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: .75rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: .1rem;
}
.ga-vpoint strong { display: block; font-size: .92rem; font-weight: 700; color: var(--ink); margin-bottom: .2rem; }
.ga-vpoint p { font-size: .875rem; color: var(--ink-2); line-height: 1.6; }
.ga-verdict-effort {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #ddd6fe;
  font-size: .85rem; color: #4c1d95; font-weight: 600;
}

/* ── Competitor table ───────────────────────────────────────────── */
.ga-table { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: .5rem; }
.ga-trow {
  display: grid; grid-template-columns: 28px 1fr 72px 52px;
  align-items: center; gap: .6rem;
  padding: .6rem .5rem; border-radius: 8px; font-size: .875rem;
}
.ga-thead {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #94a3b8; padding-bottom: .35rem;
}
.ga-trow:not(.ga-thead):nth-child(even) { background: #fafbfc; }
.ga-trank { color: #94a3b8; font-weight: 700; font-variant-numeric: tabular-nums; }
.ga-tname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ga-tname em {
  font-style: normal; font-size: .65rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; background: var(--primary); color: #fff;
  padding: .1rem .4rem; border-radius: 4px; margin-left: .45rem; vertical-align: middle;
}
.ga-treviews, .ga-trating {
  text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .84rem;
}
/* The reader's own row has to be findable at a glance — that is the whole
   question the table answers. */
/* Amber, not indigo. Indigo read as "here you are"; the row's actual job is
   to show the reader they are sitting below the field, which is a warning. */
.ga-trow-you {
  background: #fffbeb !important;
  box-shadow: inset 3px 0 0 var(--warn);
}
.ga-trow-you .ga-trank, .ga-trow-you .ga-tname,
.ga-trow-you .ga-treviews, .ga-trow-you .ga-trating { color: #92400e; font-weight: 700; }
.ga-trow-you .ga-tname em { background: var(--warn); }
/* The jump from row 12 to the reader's real rank needs to be visible, or
   the table looks like it simply skipped rows. */
.ga-tgap {
  text-align: center; color: #94a3b8; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; padding: .5rem 0; border-top: 1px dashed var(--line);
  margin-top: .35rem;
}

@media (max-width: 640px) {
  .ga-verdict { padding: 1.15rem; }
  .ga-verdict h3 { font-size: 1.05rem; }
  .ga-trow { grid-template-columns: 22px 1fr 58px 44px; gap: .4rem; font-size: .82rem; padding: .55rem .35rem; }
  .ga-tname em { display: none; }
  .ga-trow-you .ga-tname::after {
    content: ' — you'; font-size: .7rem; font-weight: 800; color: var(--warn);
  }
}

/* ── Competitor table on a phone ────────────────────────────────── */
/* Four columns in 390px squeezed the name to ~120px, so nine of twelve
   rows read "Clove Dental Clinic - Se…" and could not be told apart —
   which defeats the point of showing the field. The row becomes two
   lines instead: the full name, then its numbers underneath. */
@media (max-width: 640px) {
  .ga-thead { display: none; }

  .ga-trow {
    grid-template-columns: 24px 1fr auto;
    grid-template-areas:
      "rank name name"
      "rank revs rating";
    row-gap: .15rem;
    column-gap: .5rem;
    padding: .6rem .4rem;
    align-items: start;
  }
  .ga-trank   { grid-area: rank; padding-top: .1rem; }
  .ga-tname   { grid-area: name; white-space: normal; overflow: visible; line-height: 1.35; }
  .ga-treviews{ grid-area: revs; text-align: left; font-size: .78rem; }
  .ga-trating { grid-area: rating; font-size: .78rem; }
  /* "1,930" alone reads as an id; say what the number is. */
  .ga-treviews::after { content: ' reviews'; color: #94a3b8; }

  .ga-trow-you .ga-tname::after { content: none; }
  .ga-tname em { display: inline-block; }
}

/* ── Trial band, under the competitor table ─────────────────────── */
/* Deliberately light where the score card and the closing CTA are dark —
   three dark indigo bands down one report flattens all of them, and this
   one has to read as a distinct offer rather than a repeat of the closer. */
.ga-trial {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border: 1px solid #c7d2fe; border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.ga-trial-text { flex: 1 1 300px; min-width: 0; }
.ga-trial-badge {
  display: inline-block; background: var(--primary); color: #fff;
  font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: .2rem .5rem; border-radius: 5px;
  margin-bottom: .5rem;
}
.ga-trial-text strong {
  display: block; font-size: 1.08rem; font-weight: 800;
  color: var(--primary-dark); letter-spacing: -.01em; line-height: 1.35;
}
.ga-trial-text p {
  font-size: .86rem; color: var(--ink-2); line-height: 1.6; margin-top: .35rem;
}
.ga-trial-act {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: center; gap: .45rem;
}
.ga-trial-note { font-size: .72rem; color: var(--muted); }

@media (max-width: 640px) {
  .ga-trial { padding: 1.15rem; gap: 1.1rem; }
  .ga-trial-act { width: 100%; }
  .ga-trial-act .ga-btn-primary { width: 100%; text-align: center; }
}

/* ── The report's own URL ───────────────────────────────────────── */
/* A white pill floating between the score card and the panels read as a
   stray toolbar. The date the report was taken and the link to it are
   metadata about the score, so they belong on the score card as its
   footer — hairline rule, the card's own muted white, nothing new. */
.ga-score-share {
  flex: 1 0 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: -.65rem; padding-top: .95rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.ga-share-when { font-size: .78rem; color: rgba(255, 255, 255, .5); }
.ga-share-act { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ga-share-back, .ga-share-copy {
  font-family: inherit; font-size: .78rem; font-weight: 700;
  color: #fff; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px;
  padding: .4rem .75rem; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.ga-share-back:hover, .ga-share-copy:hover { background: rgba(255, 255, 255, .22); }
.ga-share-back:focus-visible, .ga-share-copy:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px;
}
/* Off-screen rather than hidden: display:none cannot be selected, and the
   select() fallback is the only copy path without a secure context. */
.ga-share-off { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 640px) {
  .ga-score-share { margin-top: 0; }
}

/* ── Competitors are the next audit ─────────────────────────────── */
/* The table already names twelve businesses beating them; making each row
   run the same audit turns one report into the obvious next question. */
.ga-trow-rival[data-pid] { cursor: pointer; transition: background .12s; }
.ga-trow-rival[data-pid]:hover { background: #eef2ff !important; }
.ga-trow-rival[data-pid]:focus-visible {
  outline: 2px solid var(--primary); outline-offset: -2px;
}
.ga-thint {
  font-size: .76rem; color: var(--muted); text-align: center;
  padding: .7rem 0 .1rem; border-top: 1px dashed var(--line); margin-top: .5rem;
}

/* ── Score breakdown ────────────────────────────────────────────── */
/* This panel carries the argument of the whole report: a complete profile
   is a third of the score, and the rest is competitive position. Without
   it, a tidy listing scored 100 and the reader had nothing to act on. */
.ga-pillar-list { display: flex; flex-direction: column; gap: 1.1rem; }
.ga-pillar-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .4rem;
}
.ga-pillar-top span { font-size: .92rem; font-weight: 700; color: var(--ink); }
.ga-pillar-top em {
  font-style: normal; font-size: 1.05rem; font-weight: 800;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.ga-pillar-top em i { font-style: normal; font-size: .78rem; font-weight: 600; color: #94a3b8; }
.ga-pillar-bar { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.ga-pillar-fill { display: block; height: 100%; border-radius: 999px; transition: width .8s ease; }
.ga-pillar p { font-size: .84rem; color: var(--muted); margin-top: .4rem; line-height: 1.55; }

.ga-pillar-good { color: var(--good); }
.ga-pillar-mid  { color: var(--warn); }
.ga-pillar-low  { color: var(--bad); }
span.ga-pillar-good { background: var(--good); }
span.ga-pillar-mid  { background: var(--warn); }
span.ga-pillar-low  { background: var(--bad); }

.ga-pillar-unknown .ga-pillar-top em { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ga-pillar-unknown .ga-pillar-top span { color: #b45309; }

/* ── Rank leads the score card ──────────────────────────────────── */
/* "71/100" means nothing without an anchor. "#12 of 20 near you" is the
   fact that lands, so it comes first and the score becomes a chip. */
.ga-hero-rank {
  flex: 0 0 auto; text-align: center; padding-right: 1.75rem;
  border-right: 1px solid rgba(255,255,255,.14);
}
.ga-hero-rank-num { display: flex; align-items: baseline; justify-content: center; gap: .1rem; }
.ga-hero-rank-num span { font-size: 3.25rem; font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.ga-hero-rank-num small { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.5); }
.ga-hero-rank-lbl {
  font-size: .74rem; color: rgba(255,255,255,.5); margin-top: .45rem;
  max-width: 150px; line-height: 1.35;
}
.ga-score-label b {
  font-weight: 800; background: rgba(255,255,255,.14);
  padding: .1rem .45rem; border-radius: 5px; margin-left: .35rem;
  color: #fff; font-size: .78rem;
}
.ga-gap-line {
  margin-top: .65rem; font-size: .88rem; color: rgba(255,255,255,.72);
}
.ga-gap-line strong { color: #fff; font-weight: 800; }
/* The ring is now supporting detail, not the headline. */
#gaRingWrap { width: 84px; height: 84px; }
#gaRingWrap .ga-score-ring { width: 84px; height: 84px; }
#gaRingWrap .ga-score-inner { font-size: 1.35rem; }

/* ── Time to close the gap ──────────────────────────────────────── */
/* Turns the gap into arithmetic instead of an assertion — the strongest
   argument for the product on the page. */
.ga-pace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.ga-pace-card {
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 1rem .85rem; text-align: center;
}
.ga-pace-rate { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ga-pace-time { font-size: 1.45rem; font-weight: 900; letter-spacing: -.03em; color: var(--ink); margin: .35rem 0 .2rem; }
.ga-pace-lbl { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.ga-pace-best {
  background: #f0fdf4; border-color: #86efac;
}
.ga-pace-best .ga-pace-time { color: var(--good); }
.ga-pace-best .ga-pace-rate { color: #15803d; }

/* ── Collapsed passing checks ───────────────────────────────────── */
.ga-toggle {
  display: flex; align-items: center; gap: .4rem;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: .84rem; font-weight: 700; color: var(--muted);
  padding: .7rem 0 .2rem; margin-top: .25rem;
}
.ga-toggle:hover { color: var(--primary); }
.ga-toggle svg { width: 15px; height: 15px; transition: transform .2s; }
.ga-toggle-open svg { transform: rotate(180deg); }
.ga-check-none { padding: .8rem 0; font-size: .88rem; color: var(--good); font-weight: 600; }

/* ── Keep the report ────────────────────────────────────────────── */
.ga-emailme { background: linear-gradient(135deg, #eef2ff, #faf5ff); border-color: #c7d2fe; }
.ga-emailme-txt h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .3rem; }
.ga-emailme-txt p { font-size: .88rem; color: var(--ink-2); margin-bottom: 1.1rem; max-width: 420px; }
.ga-emailme-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.ga-emailme-form input {
  flex: 1 1 220px; padding: .8rem 1rem; border: 1.5px solid #c7d2fe;
  border-radius: 11px; background: #fff; font-size: 16px;
  font-family: inherit; color: var(--ink); outline: none;
}
.ga-emailme-form input:focus { border-color: var(--primary); }
/* The panel asks for a number too now, on its own row: side by side, the
   two fields squeezed each other below ~520px. */
.ga-emailme-form input[type="tel"] { flex: 1 1 100%; }
.ga-emailme-done { font-size: .95rem; font-weight: 700; color: var(--good); }
.ga-emailme .ga-form-err { color: var(--bad); }

@media (max-width: 640px) {
  .ga-hero-rank {
    border-right: none; border-bottom: 1px solid rgba(255,255,255,.14);
    padding: 0 0 1rem; width: 100%;
  }
  .ga-hero-rank-num span { font-size: 2.5rem; }
  .ga-hero-rank-lbl { max-width: none; }
  #gaRingWrap { display: none; }   /* the rank is the headline on a phone */
  .ga-pace-grid { grid-template-columns: 1fr; }
  .ga-pace-card { display: flex; align-items: baseline; gap: .6rem; text-align: left; }
  .ga-pace-time { margin: 0; font-size: 1.2rem; }
  .ga-emailme-form input { flex: 1 1 100%; }
  .ga-emailme-form button { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   Desktop: the report as a dashboard, not a scroll
   As a single 820px column it ran to nearly 3,900px — five screens —
   with the competitor table, the point of the page, below the fold on
   every one of them.

   Two columns, not three, and the right one is a plain flow rather than
   named grid areas. Named areas tie panels into shared rows, so a short
   panel beside a tall one leaves a void the height of the difference;
   letting the right column flow means each panel takes only the height
   it needs and the table stretches alongside.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .ga-report {
    max-width: 1220px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-auto-rows: min-content;
    gap: 1.15rem;
    align-items: start;
  }

  /* The grid gap owns the rhythm now; per-panel margins would double it. */
  .ga-report > section { margin-bottom: 0; }

  .ga-score-card { grid-column: 1 / -1; padding: 1.5rem 1.75rem; gap: 1.75rem; }
  .ga-hero-rank-num span { font-size: 2.75rem; }

  /* The table holds the left column for the whole report. The span is
     deliberately larger than the number of right-hand panels — spare rows
     collapse to zero height, whereas too small a span would push a panel
     underneath the table. */


  /* The left column is one flow of its own: the table and the features that
     answer it, stacked against each other rather than against grid rows
     sized by the right column. A fixed row span left the table ending short
     of the panel below it with white space in between. */
  /* Each side is a single grid item holding its own flow, so neither
     inherits row heights from the other. Row spans were the problem twice
     over: too small and the table ended short of the panel below it, too
     large and the grid left empty rows before the closing banner. */
  .ga-col-left, .ga-col-right {
    display: flex; flex-direction: column; gap: 1.15rem; align-self: start;
  }
  .ga-col-left  { grid-column: 1; }
  .ga-col-right { grid-column: 2; }

  .ga-cta     { grid-column: 1 / -1; padding: 2rem 1.75rem; }
  .ga-restart { grid-column: 1 / -1; margin-top: .25rem; }

  /* Three across in the pace row is cramped in a half-width column. */
  .ga-pace-grid { grid-template-columns: 1fr; gap: .5rem; }
  .ga-pace-card { display: flex; align-items: baseline; gap: .7rem; text-align: left; }
  .ga-pace-time { margin: 0; font-size: 1.15rem; flex-shrink: 0; }
  .ga-pace-rate { flex-shrink: 0; }
  .ga-pace-lbl  { margin-left: auto; text-align: right; }
}

@media (min-width: 1400px) {
  .ga-report { max-width: 1340px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* ── What GMBPro does about it ──────────────────────────────────── */
.ga-help-list { display: flex; flex-direction: column; gap: .8rem; }
.ga-help-item {
  border-left: 2px solid var(--line);
  padding: .1rem 0 .1rem .9rem;
}
.ga-help-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.ga-help-name { font-size: .92rem; font-weight: 700; color: var(--ink); }
.ga-help-item p { font-size: .855rem; color: var(--muted); line-height: 1.6; }

/* The features that answer this reader's actual weakness are promoted and
   marked — an undifferentiated feature list would not earn the space. */
.ga-help-gap { border-left-color: var(--primary); }
.ga-help-gap .ga-help-name { color: var(--primary); }
.ga-help-tag {
  font-style: normal; font-size: .62rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--primary); color: #fff;
  padding: .12rem .4rem; border-radius: 4px;
}

@media (min-width: 1024px) {
}

/* Below the grid breakpoint the wrappers must not exist as boxes, or their
   panels would sit outside the single-column flow. */
.ga-col-left, .ga-col-right { display: contents; }
@media (min-width: 1024px) { .ga-col-left, .ga-col-right { display: flex; } }

/* ── Business growing tips ──────────────────────────────────────── */
/* Sits under the feature list and does a different job: that panel says what
   GMBPro does, this says why any of it matters. Most owners have never been
   told that posting cadence or reply rate are ranking signals at all. */
.ga-tips-list { list-style: none; counter-reset: tip; display: flex; flex-direction: column; gap: 1.1rem; }
.ga-tips-list li { counter-increment: tip; position: relative; padding-left: 2.1rem; }
.ga-tips-list li::before {
  content: counter(tip);
  position: absolute; left: 0; top: .05rem;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; font-size: .74rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ga-tips-list strong {
  display: block; font-size: .93rem; font-weight: 700;
  color: var(--ink); margin-bottom: .25rem; line-height: 1.4;
}
.ga-tips-list p { font-size: .86rem; color: var(--muted); line-height: 1.65; }
/* The half of each tip that is us, rather than the advice. */
.ga-tips-list b { color: var(--primary); font-weight: 700; }

@media (max-width: 640px) {
  .ga-tips-list li { padding-left: 1.8rem; }
  .ga-tips-list li::before { width: 21px; height: 21px; font-size: .68rem; }
}

/* The unmeasured pillar is styled as a blocked-out bar, not a faint aside:
   it is the one part of the score the reader cannot see, and pretending it
   is a minor footnote is what made the report read as "all fine but
   reviews". Hatching says "no data" where an empty bar would say "zero",
   and amber says the reader should be worried about it, not that it is
   an inactive row. */
.ga-pillar-unknown {
  background: #fffbeb; border: 1px solid #fde68a;
  border-left: 3px solid var(--warn);
  border-radius: 10px; padding: .8rem .9rem;
}
.ga-pillar-unknown .ga-pillar-top em {
  background: var(--warn); color: #fff;
  padding: .15rem .5rem; border-radius: 5px;
  font-size: .68rem !important; letter-spacing: .04em;
}
.ga-pillar-bar-blocked {
  background-image: repeating-linear-gradient(
    -45deg, #fcd34d 0 6px, #fef3c7 6px 12px);
  background-color: #fef3c7;
}
.ga-pillar-unknown p { color: #92400e; }

/* ── Recently audited ──────────────────────────────────────────────
   Same card shell as .ga-suite so the two read as one page rather than
   two designs stacked. Each row is a link, so the whole row is the hit
   target, not just the business name. */
.ga-recent {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem 1.5rem;
  margin-bottom: 1.25rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}
.ga-recent-head { text-align: center; max-width: 540px; margin: 0 auto 1.35rem; }
.ga-recent-head h3 {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; color: var(--ink);
}
.ga-recent-head p {
  font-size: .89rem; color: var(--muted); margin-top: .45rem; line-height: 1.6;
}
.ga-recent-grid {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .ga-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ga-recent-grid { grid-template-columns: 1fr; } }

.ga-recent-item {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--line); border-radius: 12px;
  padding: .8rem .9rem; background: #fcfcfd;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  min-width: 0;
}
.ga-recent-item:hover {
  border-color: var(--primary); box-shadow: 0 3px 10px rgba(79, 70, 229, .1);
  transform: translateY(-1px);
}
.ga-recent-item:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
/* The initial stands in for a logo we do not have and will never fetch —
   a business's own photo is Places content and not ours to republish. */
.ga-recent-badge {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
  display: grid; place-items: center;
  background: #eef2ff; color: var(--primary);
  font-weight: 800; font-size: .92rem; text-transform: uppercase;
}
/* The row is an <a>, so its children are inline by default and would sit on
   one line however they are styled. */
.ga-recent-text { min-width: 0; display: block; }
/* Names run long and arrive from Google, so they are clamped rather than
   trusted to be short. */
.ga-recent-name {
  font-size: .85rem; font-weight: 700; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ga-recent-when {
  display: block;
  font-size: .76rem; color: var(--muted); margin-top: .12rem;
}