/* Pages CSS — footer only. Every other selector that used to live here
   (.plist, .prow, .hero, .hero-in, .hero h1/.eyebrow/.sub, .band, .band.paper,
   .wrap) duplicated a selector site.css already styles, but with a second,
   undefined token vocabulary (--q-space-*, --q-surface, --q-ground,
   --q-border, --q-ink-secondary, --q-font-*, --q-layout-max-width — none of
   these exist in site.css's :root). Loaded after site.css with equal
   specificity, that duplicate won the cascade: background/padding/gap fell
   back to their initial value (transparent/0) on an invalid var(), while
   `color: var(--q-ink)` still resolved — to #000000 — so the hero h1, the
   "paper" section body and the footer all rendered black text on the
   black body background. Fixed by deleting the duplicates (site.css's own
   rules render correctly on their own) and keeping only what site.css does
   not define: the footer, now built from site.css's real tokens. */

.footer {
  background: var(--q-black);
  color: var(--q-white);
  padding: var(--space-8) var(--gutter);
}

.footer-content {
  display: grid;
  gap: var(--space-6);
  max-width: var(--container);
  margin: 0 auto;
}

.footer-brand img {
  height: 22px;
  width: auto;
  margin-bottom: var(--space-4);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-6);
}

.footer-col h4 {
  font-size: var(--step-0);
  font-weight: 500;
  margin-bottom: var(--space-4);
  color: var(--q-white);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col a {
  font-size: var(--step-0);
  color: var(--q-ink-mute);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-3);
}

.footer-col a:hover {
  color: var(--q-hue);
  text-decoration: underline;
}

.footer-legal {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid color-mix(in srgb, var(--q-white) 14%, transparent);
  font-size: var(--step--1);
  color: var(--q-ink-mute);
}

.footer-legal ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.footer-legal a {
  color: var(--q-ink-mute);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--q-hue);
  text-decoration: underline;
}

/* ==========================================================================
   Growth Audit order form (/audit) and download page (/audit/thanks)
   Tokens only — no hardcoded colour, font stack or radius.
   ========================================================================== */

.aq-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
  border-bottom: var(--border-hair);
  padding-bottom: var(--space-4);
}

.aq-steps li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  color: var(--text-meta);
}

.aq-steps li span {
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.aq-steps li.is-on { color: var(--text-body); }
.aq-steps li.is-done { color: var(--accent-soft); }

.aq-alert {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-wash);
  color: var(--text-body);
  font-size: var(--step-0);
}

.aq-alert.is-bad {
  background: var(--surface-card);
  border-left: 3px solid var(--danger);
  color: var(--danger);
}

.aq-form { max-width: 46rem; }

.aq-panel {
  border: 0;
  margin: 0;
  padding: 0;
}

.aq-legend {
  font-size: var(--step-2);
  font-weight: var(--weight-display);
  margin-bottom: var(--space-5);
  padding: 0;
}

.aq-field { margin-bottom: var(--space-5); }

.aq-field label {
  display: block;
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  margin-bottom: var(--space-2);
  color: var(--text-body);
}

.aq-opt {
  font-weight: var(--weight-body);
  color: var(--text-meta);
}

.aq-field input[type="text"],
.aq-field input[type="email"],
.aq-field input[type="tel"],
.aq-field select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--text-body);
  background: var(--canvas);
  border: var(--border-hair);
  border-radius: var(--radius-sm);
}

.aq-field input:focus-visible,
.aq-field select:focus-visible,
.aq-tier input:focus-visible + .aq-tier-body {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.aq-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.aq-err {
  margin: var(--space-2) 0 0;
  font-size: var(--step--1);
  color: var(--danger);
}

.aq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0 var(--space-5);
}

.aq-tiers {
  border: 0;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.aq-tiers legend {
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  padding: 0;
  margin-bottom: var(--space-3);
}

.aq-tier { display: block; cursor: pointer; }

/* The radio stays in the accessibility tree and keyboard order; the card is
   the visible control. */
.aq-tier input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.aq-tier-body {
  display: block;
  padding: var(--space-5);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-hover) var(--ease-out);
}

.aq-tier:hover .aq-tier-body { border-color: var(--text-meta); }

.aq-tier input:checked + .aq-tier-body {
  border-color: var(--line-strong);
  background: var(--surface-wash);
}

.aq-tier-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.aq-tier-head b {
  font-size: var(--step-1);
  font-weight: var(--weight-label);
}

.aq-tier-head em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--step-1);
}

.aq-tier-note {
  display: block;
  font-size: var(--step--1);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.aq-tier ul {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--step--1);
  color: var(--text-lead);
}

.aq-check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-weight: var(--weight-body) !important;
  font-size: var(--step--1) !important;
}

.aq-check input { margin-top: var(--space-1); flex: none; }

/* Honeypot. Off-screen rather than display:none — a bot that parses CSS skips
   a hidden field, but fills one it believes a person can see. */
.aq-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aq-note {
  margin: var(--space-3) 0 0;
  font-size: var(--step--1);
  color: var(--text-secondary);
}

.aq-lede {
  font-size: var(--step-1);
  color: var(--text-lead);
  margin: 0 0 var(--space-5);
}

.aq-code-field input {
  font-family: var(--font-mono);
  letter-spacing: 0.4em;
  max-width: 12rem;
}

.aq-files {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* --- Order page states (/audit/thanks) ---------------------------------- */

.aq-status { max-width: 46rem; }

.aq-status-head {
  font-size: var(--step-2);
  font-weight: var(--weight-display);
  margin: 0 0 var(--space-4);
}

/* The accent marks the state the customer is waiting for, and the error
   colour marks the one where a person has to step in. Every other state is
   ordinary prose — a page that shouts at every step teaches people to ignore
   it on the step that matters. */
.aq-status[data-state="ready"] .aq-status-head { color: var(--accent-soft); }
.aq-status[data-state="attention"] .aq-status-head { color: var(--danger); }

.aq-facts {
  margin: var(--space-6) 0 0;
  padding: var(--space-5);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background: var(--surface-wash);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4);
}

.aq-facts dt {
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  color: var(--text-meta);
  margin: 0 0 var(--space-1);
}

.aq-facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-body);
  overflow-wrap: anywhere;
}

.aq-help {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-hair);
}

.aq-help .aq-lede { margin-bottom: var(--space-2); }

/* --- Service enquiry form (/contact) ------------------------------------ */

.lead-sub {
  font-size: var(--step-1);
  color: var(--text-lead);
  margin: 0 0 var(--space-6);
  max-width: 46rem;
}

.lead-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
}

.lead-service { display: block; cursor: pointer; }

/* The checkbox stays in the accessibility tree and keyboard order; the pill is
   the visible control. */
.lead-service input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.lead-service span {
  display: block;
  padding: var(--space-4) var(--space-5);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  font-size: var(--step-0);
  transition: border-color var(--dur-hover) var(--ease-out);
}

.lead-service:hover span { border-color: var(--text-meta); }

.lead-service input:checked + span {
  border-color: var(--line-strong);
  background: var(--surface-wash);
  font-weight: var(--weight-label);
}

.lead-service input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.lead-form textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--text-body);
  background: var(--canvas);
  border: var(--border-hair);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.lead-form textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* A link that performs an action, shaped like the surrounding prose. */
.aq-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   Growth Audit Pro campaign
   Charcoal, black and white. Lavender stays the site accent everywhere else;
   .campaign-pro remaps the accent tokens so buttons, the hero glow and the
   pivot word do not pick up lavender. No new hex values.
   The class sits on the campaign page body, and on each graphic section of
   the homepage, so the WebGL hero keeps its lavender field.
   ========================================================================== */

.campaign-pro {
  --q-hue: var(--q-white);
  --q-hue-deep: var(--q-ink-deep);
  --q-hue-wash: var(--q-tile);
  --q-navy: var(--q-black);
  --surface-wash: var(--q-tile);
}

body.campaign-pro,
body.has-buybar {
  padding-bottom: 5.5rem;
}

body.campaign-pro ::selection {
  background: var(--q-black);
  color: var(--q-white);
}

body.campaign-pro .chapter--hero-page .display {
  max-width: 22ch;
}

body.campaign-pro .pivot,
body.campaign-pro em.pivot {
  color: var(--q-white);
}

body.campaign-pro .band.paper {
  background: var(--q-white);
}

body.campaign-pro .report-pro {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 960px) {
  body.campaign-pro .report-pro {
    grid-template-columns: minmax(16rem, 0.8fr) 1.2fr;
  }
}

body.campaign-pro .report-pro__sheets {
  display: grid;
  gap: var(--space-5);
}

body.campaign-pro .report-pro__sheet {
  position: relative;
  background: var(--q-white);
  color: var(--q-black);
  border-radius: var(--q-radius-tile);
  padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 8px);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--q-black) 45%, transparent);
}

body.campaign-pro .report-pro__sheet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--q-black);
  border-radius: var(--q-radius-tile) 0 0 var(--q-radius-tile);
}

body.campaign-pro .report-pro__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

body.campaign-pro .report-pro__mark,
body.campaign-pro .report-pro__product,
body.campaign-pro .report-pro__grade,
body.campaign-pro .report-pro__foot {
  font-family: var(--q-font-mono);
  font-size: var(--q-step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--q-gray);
  margin: 0;
}

body.campaign-pro .report-pro__product {
  margin-bottom: 0.4rem;
}

body.campaign-pro .report-pro__demo {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--q-radius-pill);
  background: var(--q-black);
  color: var(--q-white);
  font-family: var(--q-font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.campaign-pro .report-pro__sheet h3 {
  font-size: var(--step-2);
  color: var(--q-black);
  letter-spacing: -0.02em;
  max-width: 18ch;
}

body.campaign-pro .report-pro__domain {
  font-family: var(--q-font-mono);
  font-size: var(--q-step--1);
  color: var(--q-ink-mid);
  margin: 0.3rem 0 var(--space-4);
}

body.campaign-pro .report-pro__score {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.6rem 0;
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--q-hairline);
  border-bottom: 1px solid var(--q-hairline);
}

body.campaign-pro .report-pro__overall {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--q-black);
}

body.campaign-pro .report-pro__overall span {
  font-family: var(--q-font-mono);
  font-size: 0.8rem;
  color: var(--q-gray);
  margin-left: 0.25rem;
}

body.campaign-pro .report-pro__scores,
body.campaign-pro .report-pro__priorities {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

body.campaign-pro .report-pro__scores li,
body.campaign-pro .report-pro__priorities li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--q-step--1);
  border-bottom: var(--q-rule);
  padding-bottom: 0.4rem;
  color: var(--q-black);
}

body.campaign-pro .report-pro__priorities li {
  justify-content: flex-start;
  align-items: baseline;
}

body.campaign-pro .report-pro__scores b,
body.campaign-pro .report-pro__priorities span {
  font-family: var(--q-font-mono);
  font-weight: 500;
  color: var(--q-ink-mid);
}

body.campaign-pro .report-pro__priorities span {
  flex: 0 0 2rem;
}

body.campaign-pro .report-pro__foot {
  margin-top: var(--space-5);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
}

.campaign-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: color-mix(in srgb, var(--q-black) 92%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--q-white) 14%, transparent);
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
}

.campaign-buybar__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.campaign-buybar__offer {
  margin: 0;
  color: var(--q-white);
  font-size: var(--q-step--1);
}

.campaign-buybar__offer span {
  color: color-mix(in srgb, var(--q-white) 72%, transparent);
  margin-left: 0.35rem;
}

/* Offer lockup — headline and the $99 Pro price as one unit. */

.campaign-pro .offer-lockup {
  display: grid;
  gap: var(--space-8);
  align-items: end;
}

@media (min-width: 860px) {
  .campaign-pro .offer-lockup {
    grid-template-columns: minmax(0, 1.4fr) minmax(14rem, 0.6fr);
    gap: var(--space-8);
  }
}

.campaign-pro .offer-lockup__card {
  background: var(--q-white);
  color: var(--q-black);
  border-radius: var(--q-radius-tile);
  padding: var(--space-6);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--q-black) 45%, transparent);
}

.campaign-pro .offer-lockup__kicker,
.campaign-pro .offer-lockup__note {
  margin: 0;
  font-family: var(--q-font-mono);
  font-size: var(--q-step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--q-ink-mid);
}

.campaign-pro .offer-lockup__amount {
  margin: var(--space-3) 0;
  font-family: var(--q-font-display);
  font-weight: 300;
  font-size: var(--q-step-5);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--q-black);
}

/* Report preview — white paper panels on charcoal. */

.campaign-pro .report-panels {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

@media (min-width: 960px) {
  .campaign-pro .report-panels {
    grid-template-columns: minmax(16rem, 0.8fr) minmax(22rem, 1.2fr);
  }

  .campaign-pro .report-panel--priorities {
    grid-column: 1 / -1;
  }
}

.campaign-pro .report-panel {
  background: var(--q-white);
  color: var(--q-black);
  border-radius: var(--q-radius-tile);
  padding: var(--space-6);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--q-black) 35%, transparent);
}

.campaign-pro .report-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.campaign-pro .report-panel h3 {
  margin: 0;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  color: var(--q-black);
}

.campaign-pro .report-panel__demo {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--q-radius-pill);
  background: var(--q-black);
  color: var(--q-white);
  font-family: var(--q-font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.campaign-pro .report-panel__note,
.campaign-pro .report-panels__note {
  margin: var(--space-4) 0 0;
  font-family: var(--q-font-mono);
  font-size: var(--q-step--1);
  line-height: 1.45;
  color: var(--q-ink-mid);
}

.campaign-pro .report-panels__note {
  max-width: 46rem;
}

.campaign-pro .report-panels__sample {
  margin-top: var(--space-6);
}

.campaign-pro .score-dial {
  display: block;
  width: min(16rem, 100%);
  height: auto;
  margin: 0 auto;
}

.campaign-pro .score-dial__track,
.campaign-pro .score-dial__value {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
}

.campaign-pro .score-dial__track { stroke: var(--q-hairline); }
.campaign-pro .score-dial__value { stroke: var(--q-black); }

.campaign-pro .score-dial__num {
  fill: var(--q-black);
  font-family: var(--q-font-display);
  font-weight: 300;
}

.campaign-pro .score-dial__of,
.campaign-pro .score-dial__grade {
  fill: var(--q-ink-mid);
  font-family: var(--q-font-mono);
  letter-spacing: 0.06em;
}

.campaign-pro .cmp {
  display: block;
  width: 100%;
  height: auto;
}

.campaign-pro .cmp__label,
.campaign-pro .cmp__tag {
  font-family: var(--q-font-mono);
  fill: var(--q-ink-mid);
}

.campaign-pro .cmp__label--you,
.campaign-pro .cmp__tag--score {
  fill: var(--q-black);
  font-weight: 500;
}

.campaign-pro .cmp__track,
.campaign-pro .cmp__hatch-bg { fill: var(--q-tile); }
.campaign-pro .cmp__bar { fill: var(--q-black); }

.campaign-pro .cmp__hatch-line {
  fill: none;
  stroke: var(--q-ink-mid);
  stroke-width: 1;
}

.campaign-pro .report-priorities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

@media (min-width: 800px) {
  .campaign-pro .report-priorities {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-8);
  }
}

.campaign-pro .report-priorities li {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-3);
  padding-bottom: 0.55rem;
  border-bottom: var(--q-rule);
  color: var(--q-black);
  font-size: var(--q-step--1);
}

.campaign-pro .report-priorities span {
  flex: 0 0 2rem;
  font-family: var(--q-font-mono);
  font-weight: 500;
  color: var(--q-ink-mid);
}

/* Included / not included — Pro scope only. */

.campaign-pro .scope {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

@media (min-width: 860px) {
  .campaign-pro .scope { grid-template-columns: 1fr 1fr; }
}

.campaign-pro .scope__col {
  background: var(--q-white);
  color: var(--q-black);
  border-radius: var(--q-radius-tile);
  padding: var(--space-6);
}

.campaign-pro .scope__col--in { box-shadow: inset 8px 0 0 var(--q-black); }
.campaign-pro .scope__col--out { box-shadow: inset 8px 0 0 var(--q-hairline); }

.campaign-pro .scope__label {
  margin: 0 0 var(--space-5);
  font-family: var(--q-font-mono);
  font-size: var(--q-step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--q-ink-mid);
}

.campaign-pro .scope__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.campaign-pro .scope__item {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--space-3);
  align-items: start;
}

.campaign-pro .scope__col--in .scope__item { color: var(--q-black); }
.campaign-pro .scope__col--out .scope__item { color: var(--q-ink-mid); }

.campaign-pro .scope__icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
}

.campaign-pro .scope__item h3 {
  margin: 0 0 0.25rem;
  font-size: var(--step-0);
  color: var(--q-black);
}

.campaign-pro .scope__item p {
  margin: 0;
  font-size: var(--q-step--1);
  line-height: 1.45;
  color: var(--q-ink-mid);
}

/* Domain, score, pay, download. */

.campaign-pro .audit-path {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .campaign-pro .audit-path {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

.campaign-pro .audit-path__step {
  position: relative;
  background: var(--q-white);
  color: var(--q-black);
  border-radius: var(--q-radius-tile);
  padding: var(--space-5);
  min-height: 100%;
}

@media (min-width: 900px) {
  .campaign-pro .audit-path__step {
    border-radius: 0;
    background: transparent;
    color: var(--q-white);
    padding: 0 var(--space-5) 0 0;
  }

  .campaign-pro .audit-path__step + .audit-path__step {
    padding-left: var(--space-5);
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--q-white) 24%, transparent);
  }
}

.campaign-pro .audit-path__n {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--q-font-mono);
  font-size: var(--q-step--1);
  letter-spacing: 0.12em;
  color: var(--q-ink-mid);
}

@media (min-width: 900px) {
  .campaign-pro .audit-path__n { color: color-mix(in srgb, var(--q-white) 62%, transparent); }
}

.campaign-pro .audit-path__step h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--step-1);
  color: var(--q-black);
}

@media (min-width: 900px) {
  .campaign-pro .audit-path__step h3 { color: var(--q-white); }
}

.campaign-pro .audit-path__step p {
  margin: 0;
  font-size: var(--q-step--1);
  line-height: 1.45;
  color: var(--q-ink-mid);
}

@media (min-width: 900px) {
  .campaign-pro .audit-path__step p { color: color-mix(in srgb, var(--q-white) 72%, transparent); }
}

/* Three prices. Pro is the white card; the button on it stays black. */

.campaign-pro .price-card--featured {
  background: var(--q-white);
  color: var(--q-black);
  border-color: var(--q-white);
}

.campaign-pro .price-card--featured .eyebrow,
.campaign-pro .price-card--featured .price-card__amt,
.campaign-pro .price-card--featured ul,
.campaign-pro .price-card--featured li {
  color: var(--q-black);
}

.campaign-pro .price-card--featured .btn-accent {
  background: var(--q-black);
  color: var(--q-white);
}

.campaign-pro .price-card--featured .btn-accent:hover {
  background: var(--q-ink-deep);
  color: var(--q-white);
}

/* Report-shaped lockup inside the $99 card. */

.campaign-pro .offer-sheet {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--space-4) 0 var(--space-2);
}

.campaign-pro .offer-sheet__track,
.campaign-pro .offer-sheet__value {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.campaign-pro .offer-sheet__track { stroke: var(--q-hairline); }
.campaign-pro .offer-sheet__value,
.campaign-pro .offer-sheet__bar,
.campaign-pro .offer-sheet__tick { fill: var(--q-black); }
.campaign-pro .offer-sheet__value { fill: none; stroke: var(--q-black); }
.campaign-pro .offer-sheet__hatch-bg { fill: var(--q-tile); }
.campaign-pro .offer-sheet__hatch-line {
  fill: none;
  stroke: var(--q-ink-mid);
  stroke-width: 1;
}

/* Rank rails on the seven titles. Length is rank, not a measured score. */

.campaign-pro .report-priorities li {
  align-items: center;
}

.campaign-pro .report-priorities .report-priorities__body {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.campaign-pro .report-priorities__title {
  display: block;
}

.campaign-pro .report-priorities__rail {
  display: block;
  width: 100%;
  height: 0.35rem;
  margin-top: 0.4rem;
  background: var(--q-tile);
}

.campaign-pro .report-priorities__fill {
  display: block;
  height: 100%;
  background: var(--q-black);
}

.campaign-pro .report-priorities__fill--1 { width: 100%; }
.campaign-pro .report-priorities__fill--2 { width: 88%; }
.campaign-pro .report-priorities__fill--3 { width: 76%; }
.campaign-pro .report-priorities__fill--4 { width: 64%; }
.campaign-pro .report-priorities__fill--5 { width: 52%; }
.campaign-pro .report-priorities__fill--6 { width: 40%; }
.campaign-pro .report-priorities__fill--7 { width: 28%; }

/* Checklist marks, large enough to read as a graphic. */

.campaign-pro .scope__icon {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.3rem;
  border: 1px solid currentColor;
  border-radius: var(--q-radius-tile);
}

.campaign-pro .scope__col--in .scope__icon {
  background: var(--q-black);
  color: var(--q-white);
  border-color: var(--q-black);
}

.campaign-pro .scope__item {
  grid-template-columns: 1.75rem 1fr;
}

/* Four-step journey. Icons sit on a white chip so they stay black on charcoal. */

.campaign-pro .audit-path__fig {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 4.25rem;
  margin-bottom: var(--space-4);
  background: var(--q-white);
  color: var(--q-black);
  border-radius: var(--q-radius-tile);
}

.campaign-pro .path-icon {
  display: block;
  width: 4.5rem;
  height: auto;
}

.campaign-pro .path-icon__frame,
.campaign-pro .path-icon__doc,
.campaign-pro .path-icon__mod {
  fill: none;
  stroke: var(--q-black);
  stroke-width: 1.5;
}

.campaign-pro .path-icon__rule,
.campaign-pro .path-icon__arrow {
  fill: none;
  stroke: var(--q-black);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.campaign-pro .path-icon__dot { fill: var(--q-black); }

.campaign-pro .path-icon__track,
.campaign-pro .path-icon__value {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}

.campaign-pro .path-icon__track { stroke: var(--q-hairline); }
.campaign-pro .path-icon__value { stroke: var(--q-black); }

.campaign-pro .path-icon__pro { fill: var(--q-black); }
.campaign-pro .path-icon__pro-label {
  fill: var(--q-white);
  font-family: var(--q-font-display);
  font-weight: 500;
}
.campaign-pro .path-icon__mod-label {
  fill: var(--q-black);
  font-family: var(--q-font-mono);
}

@media (min-width: 900px) {
  .campaign-pro .audit-path {
    position: relative;
    padding-top: 0.25rem;
  }

  .campaign-pro .audit-path::before {
    content: "";
    position: absolute;
    top: 2.1rem;
    left: 3.25rem;
    right: 3.25rem;
    height: 1px;
    background: color-mix(in srgb, var(--q-white) 28%, transparent);
  }

  .campaign-pro .audit-path__fig {
    position: relative;
    z-index: 1;
  }
}

/* Three-price comparison. Bar count is the published change count, not a score. */

.campaign-pro .price-compare-fig {
  margin: var(--space-8) 0 0;
}

.campaign-pro .price-compare {
  display: block;
  width: min(46rem, 100%);
  height: auto;
}

.campaign-pro .price-compare__bar {
  fill: color-mix(in srgb, var(--q-white) 42%, transparent);
}

.campaign-pro .price-compare__bar--pro { fill: var(--q-white); }

.campaign-pro .price-compare__name,
.campaign-pro .price-compare__price {
  fill: color-mix(in srgb, var(--q-white) 70%, transparent);
  font-family: var(--q-font-mono);
}

.campaign-pro .price-compare__name--pro,
.campaign-pro .price-compare__price--pro {
  fill: var(--q-white);
}

.campaign-pro .price-compare__price--pro {
  font-family: var(--q-font-display);
  font-weight: 300;
}

.campaign-pro .price-compare__note {
  margin: var(--space-3) 0 0;
  max-width: 40rem;
  font-family: var(--q-font-mono);
  font-size: var(--q-step--1);
  line-height: 1.45;
  color: color-mix(in srgb, var(--q-white) 72%, transparent);
}

.campaign-pro .price-card__marks {
  display: flex;
  align-items: flex-end;
  gap: 0.2rem;
  height: 2.25rem;
}

.campaign-pro .price-card__mark {
  flex: 1;
  max-width: 0.55rem;
  background: currentColor;
}

.campaign-pro .price-card__mark--1 { height: 22%; }
.campaign-pro .price-card__mark--2 { height: 30%; }
.campaign-pro .price-card__mark--3 { height: 38%; }
.campaign-pro .price-card__mark--4 { height: 46%; }
.campaign-pro .price-card__mark--5 { height: 54%; }
.campaign-pro .price-card__mark--6 { height: 62%; }
.campaign-pro .price-card__mark--7 { height: 72%; }
.campaign-pro .price-card__mark--8 { height: 82%; }
.campaign-pro .price-card__mark--9 { height: 90%; }
.campaign-pro .price-card__mark--10 { height: 100%; }