/* Merkat site — first screen.
   Every colour comes from tokens.css. Two additions are declared below and
   flagged in the build notes; nothing else is hardcoded. */

/* Copied in by build-trades.js from merkat-brand/tokens.css, which stays the
   source of truth. Imported locally because the deployed site is this folder
   alone: a path above the web root 404s and takes every colour with it. */
@import url("tokens.css?v=2d5a3afec9d2");

:root {
  /* ADDED: a raised surface on Ink. tokens.css has --merkat-line-ink for
     rules but no panel ground, and the reference hero hardcoded #161D1F. */
  --merkat-ink-raised: #192123;
  /* ADDED: the page's structural rule, one step stronger than --merkat-line
     so the margin rule reads as structure rather than a divider. */
  --merkat-rule: #CFC4AE;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--merkat-bone);
  color: var(--merkat-ink);
  font-family: var(--font-body);
  /* 17px floor, per the accessibility rules. */
  font-size: 18px;
  line-height: 1.65;
  font-synthesis-weight: none;
}

/* Every figure is mono, so columns line up and the page reads as a
   measurement rather than a brochure. */
.figure {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

/* ---------- focus ---------- */
/* Clay, visible, and never removed. The only other Clay on this screen is
   the one accent in the headline. */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--merkat-clay);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) * -4);
  background: var(--merkat-ink);
  color: var(--merkat-bone);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  z-index: 10;
  transition: top 120ms ease;
}
.skip-link:focus {
  top: var(--space-4);
}

/* ---------- shell ---------- */

.shell {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--space-5);
}

.site-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--merkat-line);
}

.site-header .lockup {
  display: block;
  /* Lockup never below 120px wide, per the mark rules. */
  width: 210px;
  height: auto;
}

.header-place {
  margin: 0;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--merkat-muted);
}

/* ---------- hero ---------- */
/* Asymmetric 7/5. Nothing is centred, and the headline hangs off the same
   left rule the CTA row and the eyebrow sit against. */

.hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-7);
  align-items: start;
  padding-block: var(--space-6) var(--space-8);
}

.hero-copy {
  /* The structural rule. It continues the header border down the page and
     gives every line on the left one shared edge. */
  border-left: 2px solid var(--merkat-rule);
  padding-left: var(--space-5);
}

/* A short bold label over a heading, the way the type reference does it:
   small, uppercase, spaced, and in the brand colour rather than grey. */
.eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--merkat-teal);
}

.hero h1 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.2vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  /* Around 20 characters a line at the top end: a headline, not a paragraph. */
  max-width: 15ch;
}

/* The one Clay accent on this screen. */
.hero h1 em {
  font-style: normal;
  color: var(--merkat-clay);
}

.hero-sub {
  margin: 0 0 var(--space-6);
  /* Line length capped near 60 characters, so it reads as a lead, not a page of a book. */
  max-width: 52ch;
  font-size: 18px;
  color: var(--merkat-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px floor, exceeded here because this is the primary action on a phone. */
  min-height: 52px;
  padding-inline: var(--space-6);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.btn-primary {
  background: var(--merkat-teal);
  /* Bone rather than pure white: 5.5:1 on teal, and stays in the palette. */
  color: var(--merkat-bone);
}
.btn-primary:hover {
  background: var(--merkat-teal-700);
}

.btn-quiet {
  background: transparent;
  color: var(--merkat-ink);
  border-color: var(--merkat-rule);
}
.btn-quiet:hover {
  background: var(--merkat-sand);
}

.hero-terms {
  margin: 0;
  font-size: 15px;
  color: var(--merkat-muted);
}
.hero-terms .figure {
  color: var(--merkat-ink);
  font-weight: 500;
}

/* ---------- the measurement panel ---------- */
/* A dark instrument on warm paper. This is the visual hero: no illustration,
   no product shot, no device frame. */

.panel {
  background: var(--merkat-ink);
  color: var(--merkat-bone);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.panel-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--merkat-line-ink);
}

/* Only put the stamp beside the title once the panel is wide enough to hold
   both on one line. Below this the title wrapped and collided with it. */
@media (min-width: 1100px) {
  .panel-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
  }
  .panel-stamp {
    text-align: right;
  }
}

.panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.panel-stamp {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--merkat-muted-ink);
  text-align: right;
}

/* The grid is the real free-scan shape: 3 x 3 zones. */
/* Three across for the sample and the free scan. scan.js sets
   --zone-columns from the grid the API actually returned, so a wider scan
   draws correctly instead of being folded into three columns. */
.zones {
  display: grid;
  grid-template-columns: repeat(var(--zone-columns, 3), 1fr);
  gap: var(--space-2);
}

.zone {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  /* Bold, and never below 20px, on purpose. heat-2 (#C0462C) reaches only
     4.34:1 with Bone text and 3.55:1 with Ink - no palette colour clears
     4.5:1 on it. At 20px and 700 the number qualifies as large text, where
     the bar is 3:1, so every zone label passes at every viewport width. */
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  font-feature-settings: "tnum" 1;
}

/* Every heat colour carries its number. Gold and mid-green are too light for
   Bone text, so those two steps take Ink instead - the number has to stay
   readable or the colour is doing the work alone. */
.zone[data-heat="1"] { background: var(--heat-1); color: var(--merkat-bone); }
.zone[data-heat="2"] { background: var(--heat-2); color: var(--merkat-bone); }
.zone[data-heat="3"] { background: var(--heat-3); color: var(--merkat-ink); }
.zone[data-heat="4"] { background: var(--heat-4); color: var(--merkat-ink); }
.zone[data-heat="5"] { background: var(--heat-5); color: var(--merkat-bone); }

.readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--merkat-line-ink);
}

.readout-figure {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}

.readout-label {
  margin: 0;
  font-size: 15px;
  color: var(--merkat-muted-ink);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--merkat-muted-ink);
}

.legend li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.legend .swatch {
  width: 22px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}

.panel-caption {
  margin: 0;
  font-size: 13px;
  color: var(--merkat-muted-ink);
}

/* ---------- measured facts ---------- */
/* Deliberately not three cards. One rule-separated strip, unequal widths,
   no icons, each figure sourced or bracketed. */

.facts {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-top: 2px solid var(--merkat-rule);
  margin: 0;
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fact + .fact {
  border-left: 1px solid var(--merkat-line);
  padding-left: var(--space-6);
}

.fact-figure {
  font-family: var(--font-mono);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.fact-body {
  margin: 0;
  font-size: 16px;
  max-width: 34ch;
}

.fact-source {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--merkat-muted);
}

/* ---------- trade index ---------- */
/* Same language as the facts strip: a rule on top, columns split by thin
   rules, no cards. Written by build-trades.js. */

.trade-index {
  padding-block: var(--space-6) var(--space-8);
  border-top: 2px solid var(--merkat-rule);
}

.trade-index-groups {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-6);
}

.trade-index-group + .trade-index-group {
  border-left: 1px solid var(--merkat-line);
  padding-left: var(--space-6);
}

.trade-index-heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--merkat-muted);
}

.trade-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The big group splits into two columns so it doesn't run twice as long
   as its neighbours. */
.trade-index-group:first-child .trade-index-list {
  columns: 2;
  column-gap: var(--space-6);
}

.trade-index-list li {
  break-inside: avoid;
}

.trade-index-list a {
  display: block;
  padding-block: var(--space-2);
  color: var(--merkat-teal);
  text-decoration: none;
}

.trade-index-list a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The ways back from the 404 page, drawn like the trade links. */
.not-found-links a {
  color: var(--merkat-teal);
  text-decoration: none;
}

.not-found-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hidden until the real count arrives. No number beats a wrong number. */
[hidden] {
  display: none !important;
}

/* ---------- phones ---------- */

@media (max-width: 920px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-5) var(--space-7);
  }

  /* Evidence before argument. On a phone the headline and sub ran to ten
     lines between them, which put the measurement - the thing that actually
     sells - a full scroll below the fold. The panel comes first here, so a
     contractor sees a real grid with real numbers before a single sentence
     of explanation. The DOM order stays copy-then-panel, because for a
     screen reader the heading should still introduce the thing. */
  .hero-copy { order: 2; }
  .panel { order: 1; }

  /* Shorter measure on a phone: the sub is a paragraph, not a page. */
  .hero-sub {
    font-size: 18px;
    margin-bottom: var(--space-5);
  }

  /* The headline stops being the tallest thing on the screen. */
  .hero h1 {
    font-size: clamp(32px, 9vw, 40px);
    max-width: 18ch;
  }

  .facts {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .fact + .fact {
    border-left: 0;
    border-top: 1px solid var(--merkat-line);
    padding-left: 0;
    padding-top: var(--space-5);
  }

  .trade-index-groups {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .trade-index-group + .trade-index-group {
    border-left: 0;
    border-top: 1px solid var(--merkat-line);
    padding-left: 0;
    padding-top: var(--space-5);
  }
  .site-header {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .header-place {
    margin-left: 0;
    width: 100%;
  }
  .btn {
    width: 100%;
  }
}

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

/* ---------- the scan form ---------- */
/* On a trade page the trade is already known, so the form opens on the job
   they want more of. Asking "what do you do?" to somebody who arrived on a
   page titled "For roofers" is the fastest way to look like a template. */

.scan-form {
  margin: 0 0 var(--space-5);
}

.field-set {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.field-set legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-weight: 600;
  font-size: 17px;
}

.choice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.choice-list label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* 44px floor: these are the primary control on a phone. */
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--merkat-line);
  border-radius: var(--radius-sm);
  background: var(--merkat-paper);
  cursor: pointer;
}

.choice-list label:hover {
  border-color: var(--merkat-teal);
}

.choice-list input {
  /* Big enough to hit, and to see which one is selected at arm's length. */
  width: 20px;
  height: 20px;
  accent-color: var(--merkat-teal);
  flex: none;
}

.choice-list label:has(input:checked) {
  border-color: var(--merkat-teal);
  background: var(--merkat-sand);
}

/* The homepage's first question: the same pill as a job choice, but a link
   or a button, because choosing one moves the visitor on. */
.kind-list a,
.kind-list button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--merkat-line);
  border-radius: var(--radius-sm);
  background: var(--merkat-paper);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.kind-list a::after { content: "\2192"; margin-left: auto; padding-left: var(--space-2); color: var(--merkat-teal); }
.kind-list a:hover,
.kind-list button:hover { border-color: var(--merkat-teal); }
.kind-list button[aria-pressed="true"] { border-color: var(--merkat-teal); background: var(--merkat-sand); }
.kind-list a:focus-visible,
.kind-list button:focus-visible { outline: 2px solid var(--merkat-teal); outline-offset: 2px; }

/* Eight or nine jobs read better in two columns than as one long list. */
@media (min-width: 640px) {
  .choice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-list .choice-other { grid-column: 1 / -1; }
}
.choice-list .choice-other-text {
  flex: 1;
  min-width: 0;
  width: auto;
  height: auto;
  border: 0;
  border-bottom: 1px dashed var(--merkat-muted);
  background: transparent;
  font: inherit;
  padding: 4px 0;
  color: var(--merkat-ink);
}
.choice-list .choice-other-text:focus { border-bottom: 2px solid var(--merkat-teal); }

/* ---------- trade detail ---------- */

.trade-detail {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-7);
  padding-block: var(--space-7);
  border-top: 2px solid var(--merkat-rule);
}

/* Fewer, bigger headings: one per section, heavy, and short enough to read
   at a glance. */
.section-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 2.9vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 22ch;
}

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

/* Rules, not cards. Each one reads as a line item on a scope of work. */
.page-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--merkat-line);
  font-family: var(--font-mono);
  font-size: 15px;
}
.page-list li:first-child {
  border-top: 1px solid var(--merkat-line);
}

.trade-note,
.trade-block p {
  margin: 0;
  max-width: 62ch;
  color: var(--merkat-muted);
}

/* The trade's own section (trades-depth.js): sentences, not page titles, so
   body type, and space between the paragraphs. */
.trade-depth .trade-block {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.trade-depth .trade-block p { color: var(--merkat-ink); }
.trade-depth .trade-block .trade-note { color: var(--merkat-muted); }
.trade-depth .page-list { margin: 0; }
.trade-depth .page-list li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 920px) {
  .trade-detail {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-6);
  }
}

/* ---------- form fields ---------- */
/* Labels above inputs, never beside them: a label in a left column forces a
   second column on a phone, and these are filled in a truck. */

.field {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.field-label {
  font-weight: 600;
  font-size: 16px;
}

.field-input {
  font: inherit;
  font-size: 17px;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--merkat-line);
  border-radius: var(--radius-sm);
  background: var(--merkat-paper);
  color: var(--merkat-ink);
  width: 100%;
}

.field-input:hover {
  border-color: var(--merkat-teal);
}

select.field-input {
  /* The native control everywhere. A custom dropdown on a phone is a worse
     dropdown on a phone. */
  appearance: auto;
}

@media (min-width: 700px) {
  .field-row {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--space-4);
  }
  .field-row .field {
    margin-bottom: var(--space-4);
  }
}

/* Off-screen rather than display:none. A bot reading the DOM fills it; a
   person never sees it and a screen reader skips it (aria-hidden). */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.scan-error,
.unlock-error {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--merkat-clay);
  color: var(--merkat-ink);
  font-size: 16px;
}

/* ---------- the live scan ---------- */

.scan-status {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--merkat-line-ink);
  color: var(--merkat-muted-ink);
  font-size: 15px;
}

/* A zone that was never measured. No colour, no number, no claim. */
.zone[data-heat="none"] {
  background: transparent;
  border: 1px dashed var(--merkat-line-ink);
}

/* Measured, but in fewer searches than the other zones, and nothing was
   found in the ones that ran. Still coloured, because it was measured; the
   dashed inner rule and the asterisk say "only partly", and the caption
   explains the asterisk. */
.zone.is-partial {
  outline: 2px dashed var(--merkat-bone);
  outline-offset: -6px;
}

/* The only motion on the page, and it stops the moment results land. */
.panel.is-scanning .zones {
  animation: zone-pulse 1.8s ease-in-out infinite;
}

@keyframes zone-pulse {
  50% { opacity: 0.68; }
}

/* ---------- the email gate ---------- */

.unlock,
.unlocked {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--merkat-line-ink);
}

.unlock-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.unlock-body {
  margin: 0 0 var(--space-4);
  max-width: 52ch;
  font-size: 16px;
  color: var(--merkat-muted-ink);
}

/* The panel sits on Ink, so its fields need the raised ground and a rule
   that reads against it. */
.unlock .field-input {
  background: var(--merkat-ink-raised);
  border-color: var(--merkat-line-ink);
  color: var(--merkat-bone);
}

.consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-3);
  /* Room for a thumb, not just for the box. */
  min-height: var(--tap-min);
  font-size: 15px;
  line-height: 1.5;
  color: var(--merkat-bone);
  cursor: pointer;
}

.consent input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--merkat-teal);
}

.ai-result .report-sent { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: color-mix(in srgb, var(--heat-5) 14%, transparent); font-weight: 600; }

.unlock-fineprint {
  margin: var(--space-3) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--merkat-muted-ink);
  max-width: 60ch;
}

.leader-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  counter-reset: leader;
}

/* Rules, not cards: this is a standings table, and it should read as one. */
.leader-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--merkat-line-ink);
}

.leader-name {
  font-weight: 500;
}

.leader-count {
  font-size: 15px;
  color: var(--merkat-muted-ink);
  white-space: nowrap;
}

/* ---------- navigation and footer ---------- */

.site-nav {
  margin-left: auto;
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

/* Short uppercase tabs across the top, as in the type reference. */
.site-nav a {
  display: inline-flex;
  align-items: center;
  /* 44px of hit area even though the text is 13.5px. */
  min-height: var(--tap-min);
  color: var(--merkat-ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--merkat-rule);
}

/* The current page is marked with the rule, not with a colour: Clay is spent
   once per screen and it is not spent on navigation. */
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--merkat-ink);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
  padding-block: var(--space-5) var(--space-7);
  border-top: 2px solid var(--merkat-rule);
  font-size: 15px;
  color: var(--merkat-muted);
}

.footer-mark {
  margin: 0;
  font-weight: 500;
  color: var(--merkat-ink);
}

.footer-nav {
  display: flex;
  gap: var(--space-5);
}

.footer-nav a {
  color: var(--merkat-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-place {
  margin: 0;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ---------- inner page heads ---------- */

.page-head {
  max-width: 62ch;
  border-left: 2px solid var(--merkat-rule);
  padding-left: var(--space-5);
  padding-block: var(--space-7) var(--space-6);
}

.page-head h1 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 4.2vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.page-sub {
  margin: 0 0 var(--space-4);
  max-width: 52ch;
  font-size: 18px;
  color: var(--merkat-muted);
}

/* ---------- the pricing ladder ---------- */
/* Rules and unequal weight, not three matching cards. The tiers are not
   equivalent choices: one is free, one is a report, one is the work. */

.tiers {
  display: grid;
  gap: 0;
  padding-bottom: var(--space-7);
}

.tier {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--merkat-line);
}

.tier:first-child {
  border-top: 2px solid var(--merkat-rule);
}

/* The monthly plan is the product. It gets the weight, from ground and space,
   never from a shadow or a badge. */
.tier-main {
  background: var(--merkat-paper);
  border-top: 2px solid var(--merkat-ink);
  padding-inline: var(--space-5);
  margin-inline: calc(var(--space-5) * -1);
}

.tier-head {
  position: sticky;
  top: var(--space-5);
  align-self: start;
}

.tier-name {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
}

.tier-price {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  font-feature-settings: "tnum" 1;
}

.tier-per {
  font-size: 16px;
  color: var(--merkat-muted);
}

/* The current rate and "Standard rate $1,199", under the price. */
.tier-rung {
  margin: var(--space-2) 0 0;
  font-size: 15px;
  color: var(--merkat-muted);
}

/* The monthly ladder, standard first: $1,199 is the price and every other
   rung is told as a discount off it, never as a rise from the cheapest. */
.price-ladder {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  max-width: 64ch;
}

.price-rung {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--merkat-line);
}

.price-rung:first-child {
  border-top: 1px solid var(--merkat-line);
}

.price-rung-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  grid-column: 1 / -1;
}

.price-rung-name {
  font-weight: 600;
}

.price-rung-amount {
  font-feature-settings: "tnum" 1;
}

.price-rung-detail {
  color: var(--merkat-muted);
  font-size: 15px;
}

.price-rung-now {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--merkat-teal);
}

.price-rung.is-current .price-rung-name,
.price-rung.is-current .price-rung-amount {
  color: var(--merkat-teal);
}

.tier-line {
  margin: 0 0 var(--space-4);
  font-size: 18px;
  max-width: 62ch;
}

.tier-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  max-width: 64ch;
}

/* A rule per line, so it reads as a scope of work rather than a feature list
   with ticks beside it. */
.tier-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--merkat-line);
}

.tier-list li:first-child {
  border-top: 1px solid var(--merkat-line);
}

.tier-limit,
.tier-note {
  margin: 0 0 var(--space-4);
  max-width: 62ch;
  font-size: 16px;
  color: var(--merkat-muted);
}

.tier-note {
  margin-top: var(--space-3);
  font-size: 15px;
}

/* ---------- the team (about page) ---------- */
/* People sit in the same rule-separated rows as the pricing tiers, so the
   page reads as who does the work, not as a row of headshot cards. */

.team-role {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--merkat-muted);
}

.team-link,
.plain-item p a {
  color: var(--merkat-teal);
  text-underline-offset: 3px;
}

/* Our own results. The figure leads and the sentence under it says exactly
   what it counts, so no number stands without its source and date. */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-6);
  margin-bottom: var(--space-5);
}

.result {
  border-top: 2px solid var(--merkat-ink);
  padding-top: var(--space-3);
}

.result-figure {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}

.result-label {
  margin: 0;
  max-width: 40ch;
  color: var(--merkat-muted);
}

@media (max-width: 920px) {
  .results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .results-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- plain sections ---------- */

.plain {
  padding-block: var(--space-7);
  border-top: 2px solid var(--merkat-rule);
}

.plain-lede {
  margin: 0 0 var(--space-6);
  max-width: 56ch;
  font-size: 17px;
  color: var(--merkat-muted);
}

.plain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-7);
}

.plain-head {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
}

.plain-item p {
  margin: 0;
  max-width: 58ch;
  color: var(--merkat-muted);
}

.faq {
  margin: 0;
  max-width: 68ch;
}

.faq dt {
  padding-top: var(--space-4);
  border-top: 1px solid var(--merkat-line);
  font-weight: 600;
  font-size: 18px;
}

.faq dd {
  margin: var(--space-2) 0 var(--space-5);
  color: var(--merkat-muted);
}

/* ---------- long-form legal prose ---------- */

.prose {
  max-width: 68ch;
  padding-bottom: var(--space-7);
}

.prose h2 {
  margin: var(--space-7) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  padding-top: var(--space-4);
  border-top: 1px solid var(--merkat-line);
}

.prose p,
.prose li {
  margin: 0 0 var(--space-4);
}

.prose ul {
  padding-left: var(--space-5);
}

.prose a {
  color: var(--merkat-teal);
}

/* An unfilled decision, marked so it cannot be mistaken for finished copy. */
.prose-note {
  display: inline-block;
  padding: 2px var(--space-2);
  border: 1px dashed var(--merkat-clay);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 14px;
}

/* ---------- the offer after a scan ---------- */

.offer {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--merkat-line-ink);
}

.offer-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}

.offer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--merkat-line-ink);
}

.offer-copy {
  flex: 1 1 18rem;
}

.offer-name {
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.offer-detail {
  margin: 0 0 var(--space-2);
  font-size: 15px;
  line-height: 1.5;
  color: var(--merkat-muted-ink);
  max-width: 46ch;
}
.offer-action {
  flex: 0 0 auto;
  display: grid;
  gap: var(--space-3);
  justify-items: stretch;
}

.offer-price {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
}

.offer-per {
  font-size: 15px;
  color: var(--merkat-muted-ink);
}

/* The current rate and "Standard rate $1,199", on Ink under the price. */
.offer-rung {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--merkat-muted-ink);
  text-align: right;
  max-width: 28ch;
}

/* The quiet button on Ink. btn-quiet is built for Bone and disappears here. */
.btn-quiet-ink {
  background: transparent;
  color: var(--merkat-bone);
  border-color: var(--merkat-line-ink);
}
.btn-quiet-ink:hover {
  background: var(--merkat-ink-raised);
  border-color: var(--merkat-muted-ink);
}

.offer-error {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--merkat-clay);
  font-size: 15px;
}

/* The contact address after an area-conflict refusal. Teal fails on Ink. */
.offer-error a,
.offer-detail a {
  color: var(--merkat-bone);
  text-underline-offset: 3px;
}

.offer-fineprint {
  margin: var(--space-4) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--merkat-muted-ink);
}

@media (max-width: 920px) {
  .tier {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .tier-head {
    position: static;
  }
  .plain-grid {
    grid-template-columns: 1fr;
  }
  .site-footer {
    flex-direction: column;
    gap: var(--space-4);
  }
  .footer-place {
    margin-left: 0;
  }
  .offer-action {
    width: 100%;
  }
}

/* ---------- a trade we do not scan yet ---------- */
/* Reached from the last option in the trade select. It replaces the scan
   rather than sitting beside it, because there is nothing to scan: no
   playbook means the searches would be wrong, and a wrong measurement
   presented as a result is the one thing this product must not do. */

.other-trade {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--merkat-line);
}

.other-lead {
  margin: 0 0 var(--space-5);
  max-width: 58ch;
  font-size: 18px;
}

/* Marked optional in the label, not by leaving "required" off and hoping.
   Two of these fields genuinely are optional and saying so raises how many
   people finish. */
.field-optional {
  font-weight: 400;
  font-size: 14px;
  color: var(--merkat-muted);
}

.other-consent {
  margin: 0 0 var(--space-4);
  max-width: 58ch;
  font-size: 15px;
  color: var(--merkat-muted);
}

.other-done {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--merkat-teal);
  max-width: 58ch;
  font-size: 17px;
}

/* ---------- account and after-payment pages ---------- */
/* /signin, /welcome, /audit and /audit/thank-you. They hang off the same
   left rule as every page head, and use rules rather than cards. */

.account-body {
  max-width: 44ch;
  padding-bottom: var(--space-8);
}

.account-form .btn {
  margin-top: var(--space-2);
}

.account-aside {
  margin: var(--space-6) 0 0;
  font-size: 16px;
  color: var(--merkat-muted);
}

.account-aside a {
  color: var(--merkat-teal);
}

/* Something the visitor needs to know first: a refused link, a payment they
   backed out of. Sand, not Clay: it is information, not an error. */
.notice {
  max-width: 62ch;
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--merkat-sand);
  border-radius: var(--radius-sm);
}

.notice-done {
  background: transparent;
  border-left: 3px solid var(--merkat-teal);
  border-radius: 0;
  padding: 0 0 0 var(--space-4);
}

/* Numbered by a rule and a mono figure, like a scope of work. */
.next-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0 0 var(--space-6);
  max-width: 68ch;
}

.next-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: var(--space-7) 1fr;
  column-gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--merkat-line);
}

.next-steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--merkat-muted);
  padding-top: 3px;
}

.next-steps h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
}

.next-steps p {
  margin: 0;
}

.next-steps a {
  color: var(--merkat-teal);
}

/* ---------- payment status on the thank-you pages ---------- */
/* The backend's own sentence about the order. Tone comes from the state:
   teal for paid, sand while waiting, a clay rule when it ended. Never
   green-tick theatre: it reports, it does not celebrate. */
.order-status {
  max-width: 62ch;
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--merkat-sand);
}
.order-status[data-tone="paid"] {
  background: var(--merkat-paper);
  border-left: 3px solid var(--merkat-teal);
  border-radius: 0;
}
.order-status[data-tone="ended"] {
  background: var(--merkat-paper);
  border-left: 3px solid var(--merkat-clay);
  border-radius: 0;
}
.order-status-message {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.order-status .btn {
  margin-top: var(--space-3);
  min-height: var(--tap-min);
}

/* ---------- the standard rate, stated beside the current one ---------- */
/* "Founding $799 - Standard rate $1,199", told as a schedule. Never struck
   through: nobody has bought at $1,199 yet, so a crossed-out price would be a
   regular-price claim under the Competition Act (s.74.01). Only rendered
   while the current rung is below standard (data-price-if-discounted). */
.price-was {
  color: var(--merkat-muted);
  font-weight: 400;
  font-size: 0.62em;
  margin-left: 0.5em;
  text-decoration: none;
  white-space: nowrap;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.offer-credit { color: var(--merkat-bone); font-weight: 600; }

/* ---------- audit thank-you: what arrives, and the plan offer ---------- */
.next-steps-list { margin: 8px 0 12px; padding-left: 1.1em; }
.next-steps-list li { margin: 4px 0; }
.upsell { margin: var(--space-7) 0 var(--space-6); }
.upsell h2 { margin: 6px 0 10px; }
.upsell-lead { max-width: 62ch; }
.upsell-card {
  margin-top: 20px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--merkat-line);
  border-radius: var(--radius-md);
  background: var(--merkat-paper);
  border-top: 2px solid var(--merkat-ink);
  max-width: 640px;
}
.upsell-price .tier-price { margin: 0; }
.upsell-price .tier-rung { margin: 4px 0 0; }
.upsell-terms { font-size: 0.92rem; color: var(--merkat-muted); }
.upsell-action { margin-top: 16px; }
.upsell-note { font-size: 0.9rem; color: var(--merkat-muted); margin: 10px 0 0; }
.upsell-side { margin-top: 20px; max-width: 62ch; color: var(--merkat-muted); }
/* Opened from the audit report (?from=report, class set in the page head):
   the receipt and "what happens next" go, and the plan offer leads. Not the
   hidden attribute for the report-only parts: [hidden] is !important here. */
[data-from-report] { display: none; }
.from-report [data-from-report] { display: block; }
.from-report [data-hide-from-report] { display: none !important; }
.from-report .upsell { margin-top: 0; }

/* ---------- pricing page: the path, drawn ---------- */
.path { padding-block: var(--space-7); border-top: 2px solid var(--merkat-rule); }
.path-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  counter-reset: none;
}
.path-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--merkat-paper);
  border: 1px solid var(--merkat-line);
  border-radius: var(--radius-md);
}
.path-step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: calc(var(--space-5) * -0.5 - 0.5em);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  color: var(--merkat-muted);
  font-size: 1.1rem;
}
.path-step-main { border-top: 3px solid var(--merkat-ink); }
.path-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--merkat-muted);
}
.path-name { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: 1.25rem; }
.path-price { margin: 0; font-size: 1.6rem; font-weight: 600; }
.path-line { margin: 0; color: var(--merkat-muted); }
.path-note { margin: var(--space-4) 0 0; font-size: 0.88rem; color: var(--merkat-muted); max-width: 70ch; }

/* Example grids: the brand heat scale, and a hatch for "no map pack here". */
.mini-grid {
  display: grid;
  gap: 3px;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1;
}
.mini-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mini-grid-5 { grid-template-columns: repeat(5, 1fr); max-width: 120px; }
.mini-grid-9 { grid-template-columns: repeat(9, 1fr); gap: 2px; }
.mini-grid span {
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--merkat-bone);
}
[data-heat="5"] { background: var(--heat-5); }
[data-heat="4"] { background: var(--heat-4); }
[data-heat="3"] { background: var(--heat-3); color: var(--merkat-ink) !important; }
[data-heat="2"] { background: var(--heat-2); }
[data-heat="1"] { background: var(--heat-1); }
[data-heat="0"] {
  background: repeating-linear-gradient(45deg, var(--merkat-bone) 0 3px, var(--merkat-line) 3px 4px);
  outline: 1px solid var(--merkat-line);
}
.mini-trend { color: var(--merkat-teal); max-width: 180px; }
.mini-trend svg { width: 100%; height: auto; display: block; }
.mini-trend-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--merkat-muted); }

/* ---------- founding seats ---------- */
.seat-meter { margin: var(--space-4) 0; }
.seat-meter-label { margin: 0 0 var(--space-2); font-size: 0.92rem; }
.seat-meter-bar { display: flex; gap: 4px; }
.seat {
  flex: 1;
  max-width: 28px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--merkat-ink);
  background: transparent;
}
.seat.is-taken { background: var(--merkat-ink); }

/* ---------- side by side ---------- */
.compare { padding-block: var(--space-7); border-top: 2px solid var(--merkat-rule); }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 0.95rem; }
.compare-table th, .compare-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--merkat-line);
}
.compare-table thead th { font-family: var(--font-display); font-size: 1rem; border-bottom: 2px solid var(--merkat-ink); }
.compare-table tbody th { font-weight: 600; width: 26%; }
.compare-table td { color: var(--merkat-muted); }
.compare-table .compare-main { background: var(--merkat-paper); color: var(--merkat-ink); }
.compare-table .check { color: var(--heat-5); font-weight: 700; }
.compare-price td, .compare-price th { font-weight: 600; color: var(--merkat-ink); border-bottom: 0; }

/* ---------- first 90 days ---------- */
.timeline-section { padding-block: var(--space-7); border-top: 2px solid var(--merkat-rule); }
.timeline {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  border-top: 2px solid var(--merkat-line);
}
.timeline li { position: relative; padding-top: var(--space-5); }
.timeline li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--merkat-teal);
  border: 3px solid var(--merkat-bone);
}
.timeline-when { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--merkat-teal); }
.timeline-what { margin: var(--space-1) 0 var(--space-2); font-family: var(--font-display); font-size: 1.1rem; }
.timeline p:last-child { margin: 0; color: var(--merkat-muted); font-size: 0.95rem; }

/* ---------- what you see every week ---------- */
.weekly-view { padding-block: var(--space-7); border-top: 2px solid var(--merkat-rule); }
.weekly-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.weekly-card {
  margin: 0;
  padding: var(--space-5);
  background: var(--merkat-paper);
  border: 1px solid var(--merkat-line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.weekly-card figcaption { color: var(--merkat-muted); font-size: 0.95rem; }
.weekly-card figcaption strong { color: var(--merkat-ink); }
.then-now-mini { display: flex; align-items: center; gap: var(--space-3); }
.then-now-arrow { font-family: var(--font-mono); color: var(--merkat-muted); }
.mini-log { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.mini-log li { padding: var(--space-2) 0; border-bottom: 1px solid var(--merkat-line); }
.mini-log-date { display: inline-block; min-width: 4.5em; font-family: var(--font-mono); font-size: 0.8rem; color: var(--merkat-teal); }
.mini-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 0.9rem; }
.mini-legend li { display: flex; align-items: center; gap: var(--space-2); }
.mini-swatch { width: 16px; height: 16px; border-radius: 3px; flex: none; }

/* ---------- terms, and the closing call to action ---------- */
.terms-list { margin: 0; padding-left: 1.1em; max-width: 70ch; display: grid; gap: var(--space-3); }
.cta-band {
  margin: var(--space-6) 0 var(--space-7);
  padding: var(--space-7) var(--space-6);
  background: var(--merkat-ink);
  color: var(--merkat-bone);
  border-radius: var(--radius-md);
}
.cta-band h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); }
.cta-band p { margin: 0 0 var(--space-5); color: var(--merkat-muted-ink); max-width: 56ch; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin: 0 !important; }
.cta-link { color: var(--merkat-bone); }

@media (max-width: 920px) {
  .path-steps, .weekly-grid { grid-template-columns: 1fr; }
  .path-step:not(:last-child)::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -1.3em; transform: translateX(-50%); }
  .timeline { grid-template-columns: 1fr; }
  .timeline::before { left: 7px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px solid var(--merkat-line); }
  .timeline li { padding: 0 0 0 var(--space-6); }
  .cta-band { padding: var(--space-6) var(--space-5); }
}

/* ---------- the free AI visibility check ---------- */
.ai-check { padding-block: var(--space-6) var(--space-7); max-width: 760px; }
.ai-check-form { display: grid; gap: var(--space-4); max-width: 520px; }
/* Dark, like the scan panel on the home page: the email form and its
   consent lines are styled for ink, and the two free tools should look
   like one product. */
.ai-result {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--merkat-ink);
  color: var(--merkat-bone);
  border-radius: var(--radius-md);
}
.ai-result .eyebrow { color: var(--merkat-muted-ink); }
.ai-figures { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-3) 0 var(--space-4); }
.ai-figure { margin: 0; display: flex; flex-direction: column; }
.ai-figure .figure { font-size: clamp(32px, 5vw, 44px); font-weight: 600; line-height: 1.1; }
.ai-figure-label { font-size: 0.92rem; color: var(--merkat-muted-ink); }
.ai-line { margin: 0 0 var(--space-2); max-width: 62ch; }
.ai-note { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--heat-3); background: var(--merkat-line-ink); max-width: 62ch; }
.ai-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ai-question { padding: var(--space-3) 0; border-bottom: 1px solid var(--merkat-line-ink); }
.ai-question-text { margin: 0 0 var(--space-1); font-weight: 600; }
.ai-verdict { margin: 0; font-family: var(--font-mono); font-size: 0.85rem; color: #E7907A; }
.ai-verdict.is-named { color: #8FCB9B; }
.ai-question-detail { margin: var(--space-1) 0 0; font-size: 0.9rem; color: var(--merkat-muted-ink); }
.ai-next { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--merkat-line-ink); }
.cta-link-ink { color: var(--merkat-bone); }
.hero-second-tool a { color: inherit; text-decoration: underline; }
.ai-result .subsection-title { margin: var(--space-5) 0 var(--space-3); font-family: var(--font-display); font-size: 1.1rem; }
.ai-result .unlock { margin-top: var(--space-5); display: grid; gap: var(--space-3); max-width: 520px; }

/* ---------- audit thank-you: the two website offers ---------- */
.site-offers { margin-top: var(--space-6); }
.site-offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-4); }
.site-offer {
  padding: var(--space-5);
  background: var(--merkat-paper);
  border: 1px solid var(--merkat-line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-offer .tier-list { flex: 1; }
.site-offer-name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.site-offers .subsection-title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 1.3rem; }
@media (max-width: 760px) { .site-offer-grid { grid-template-columns: 1fr; } }


/* ---------- the Services menu ---------- */
/* Opens on hover and on keyboard focus. Two columns: the plans in the order
   they are bought, and the services. On a phone the header is a sideways
   strip, so the menu stays closed and Services goes to its own page. */
.nav-group { position: relative; display: inline-flex; }
.nav-group-link::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--merkat-paper);
  border: 1px solid var(--merkat-line);
  border-radius: var(--radius-md);
  border: 2px solid var(--merkat-rule);
}
.nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop { display: grid; }
.nav-drop-col { display: grid; align-content: start; gap: 2px; }
.nav-drop-title { margin: 0 0 var(--space-2); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--merkat-muted); }
.site-nav .nav-drop a {
  display: grid;
  min-height: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 600;
}
.site-nav .nav-drop a:hover { background: var(--merkat-bone); }
.nav-drop a span { font-size: 13px; font-weight: 400; color: var(--merkat-muted); }
.site-nav .nav-drop .nav-drop-all { color: var(--merkat-teal); }
@media (max-width: 920px) {
  .nav-drop, .nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop { display: none; }
  .nav-group-link::after { display: none; }
}

/* ---------- the header menu on phones and tablets ---------- */
/* One header on every page below 920px: the logo, a Menu button, and the
   links in a panel that drops down under the header (nav.js adds the button
   and .has-nav-toggle). Without the script the links simply wrap under the
   logo, so nothing is ever unreachable. The Services menu stays closed here;
   Services goes to its own page. */
.nav-toggle { display: none; }
@media (max-width: 920px) {
  .site-nav {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: var(--space-4);
    row-gap: 0;
  }
  .site-header.has-nav-toggle { flex-wrap: wrap; column-gap: var(--space-3); row-gap: 0; }
  /* The logo and the button share the top line at 320px too; the lockup
     stays above its 120px floor. */
  .has-nav-toggle .lockup { width: min(210px, 52vw); }
  .has-nav-toggle .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Wide enough for "Close" as well as "Menu", so it never jumps. */
    min-width: 108px;
    margin-left: auto;
    min-height: var(--tap-min);
    padding: 0 16px;
    border: 2px solid var(--merkat-ink);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--merkat-ink);
    font: 600 13.5px/1 var(--font-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .nav-toggle-bars {
    width: 16px;
    height: 12px;
    background:
      linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
  }
  .nav-open .nav-toggle { background: var(--merkat-ink); color: var(--merkat-bone); }
  .has-nav-toggle .site-nav { display: none; }
  .has-nav-toggle.nav-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-4);
    border-top: 2px solid var(--merkat-rule);
  }
  .has-nav-toggle.nav-open .nav-group { display: block; }
  .has-nav-toggle.nav-open .site-nav > a,
  .has-nav-toggle.nav-open .nav-group-link {
    display: flex;
    width: 100%;
    min-height: 52px;
    border-bottom: 1px solid var(--merkat-line);
    font-size: 15px;
  }
  .has-nav-toggle.nav-open .site-nav > a[aria-current],
  .has-nav-toggle.nav-open .nav-group-link[aria-current] { border-bottom: 2px solid var(--merkat-ink); }
  .has-nav-toggle.nav-open .site-nav > a:last-child {
    justify-content: center;
    margin-top: var(--space-4);
    border: 2px solid var(--merkat-teal);
    border-radius: var(--radius-pill);
    color: var(--merkat-teal);
  }
}

/* ---------- the dark footer ---------- */
/* Four columns on Ink: who we are and the scan, the site, the services, and
   how to reach us. No newsletter column until a signup with the CASL consent
   record behind it exists. */
.site-footer.site-footer-dark {
  display: block;
  margin-top: var(--space-8);
  margin-inline: calc(var(--space-5) * -1);
  padding: var(--space-7) var(--space-5) var(--space-5);
  background: var(--merkat-ink);
  color: var(--merkat-muted-ink);
  border-top: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: var(--space-6); }
@media (max-width: 900px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }
.site-footer-dark .footer-mark { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--merkat-bone); }
.footer-line { margin: 0 0 var(--space-4); font-size: 15px; max-width: 34ch; }
.footer-title { margin: 0 0 var(--space-3); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--merkat-bone); }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15px; }
.site-footer-dark a { color: var(--merkat-bone); text-decoration: none; }
.site-footer-dark a:hover { text-decoration: underline; }
.site-footer-dark .footer-cta { color: var(--merkat-paper); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--merkat-line-ink); font-size: 14px; }
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; gap: var(--space-4); }

/* ---------- province, then town ---------- */
/* Two fields where the town select used to be: the province, then the
   town typed with suggestions. The original select stays hidden in the
   form as the submitted value (town-picker.js). */
.town-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-2); }
.town-hint { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--merkat-clay); }

/* ---------- the buttons that buy something ---------- */
/* Clay, so the one action that spends money is the one thing on the page
   in the accent colour: the plan, Market Leader, the audit and the website,
   wherever they are offered. Scan buttons stay teal. */
.btn.btn-buy,
.offer-cta,
[data-buy-audit], [data-buy-plan], [data-buy-market-leader], [data-buy-website],
[data-upsell-plan], [data-upsell-mail], [data-upsell-product], [data-upsell-mail-product] {
  background: var(--merkat-clay);
  border-color: var(--merkat-clay);
  color: var(--merkat-paper);
}
.btn.btn-buy:hover,
.offer-cta:hover,
[data-buy-audit]:hover, [data-buy-plan]:hover, [data-buy-market-leader]:hover, [data-buy-website]:hover,
[data-upsell-plan]:hover, [data-upsell-mail]:hover, [data-upsell-product]:hover, [data-upsell-mail-product]:hover {
  background: color-mix(in srgb, var(--merkat-clay) 85%, var(--merkat-ink));
  border-color: color-mix(in srgb, var(--merkat-clay) 85%, var(--merkat-ink));
  color: var(--merkat-paper);
}
/* The town now takes two rows; the field beside it keeps its own height. */
.field-row { align-items: start; }
.field { align-content: start; }
/* ---------- the scan, step by step ---------- */
.scan-steps { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--merkat-ink-raised); border: 1px solid var(--merkat-line-ink); }
.steps-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.steps-title { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--merkat-muted-ink); }
.steps-percent { font-family: var(--font-mono); font-weight: 600; color: var(--heat-4); }
.steps-bar { height: 8px; border-radius: var(--radius-pill); background: var(--merkat-line-ink); overflow: hidden; margin-bottom: var(--space-3); }
.steps-fill { display: block; height: 100%; background: var(--heat-4); transition: width 600ms ease; }
.steps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.steps-list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 15px; color: var(--merkat-muted-ink); }
.step-mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--merkat-line-ink); }
.step-done { color: var(--merkat-bone); }
.step-done .step-mark { border: 0; background: var(--heat-4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.step-active { color: var(--merkat-bone); font-weight: 600; background: color-mix(in srgb, var(--heat-4) 14%, transparent); }
.step-active .step-mark { border-color: var(--heat-4); border-right-color: transparent; animation: step-spin 900ms linear infinite; }
@keyframes step-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .step-active .step-mark { animation: none; } .steps-fill { transition: none; } }
.step-detail { font-family: var(--font-mono); font-size: 13px; color: var(--merkat-muted-ink); }
/* The AI check: a question that could not be asked is not a tick. A dash,
   because "not checked" must never look like "done". */
.step-failed { color: var(--merkat-muted-ink); }
.step-failed .step-mark { border-style: dashed; position: relative; }
.step-failed .step-mark::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; margin-top: -1px; background: var(--merkat-muted-ink); }
.step-active .step-detail { color: var(--heat-4); }
/* The questions are full sentences: let them wrap under the mark on a phone. */
[data-ai-steps] .step-text { overflow-wrap: anywhere; }
@media (max-width: 480px) { [data-ai-steps] .steps-list li { grid-template-columns: 22px 1fr; } [data-ai-steps] .step-detail { grid-column: 2; } }

/* ---------- the verdict ---------- */
.verdict { padding-block: var(--space-7); border-top: 2px solid var(--merkat-rule); display: grid; gap: var(--space-6); }
.verdict-headline { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 56px); line-height: 1.08; letter-spacing: -0.035em; max-width: 22ch; }
.verdict-name { color: var(--merkat-teal); }
.verdict-sub { margin: 0; color: var(--merkat-muted); max-width: 60ch; }
.verdict-checks { list-style: none; padding: 0; margin: 0; border: 1px solid var(--merkat-line); border-radius: var(--radius-md); background: var(--merkat-paper); overflow: hidden; }
.verdict-checks li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-5); font-size: 18px; }
.verdict-checks li + li { border-top: 1px solid var(--merkat-line); }
.check-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-weight: 700; }
.is-good .check-mark { background: color-mix(in srgb, var(--heat-5) 16%, transparent); color: var(--heat-5); }
.is-bad .check-mark { background: color-mix(in srgb, var(--heat-1) 14%, transparent); color: var(--heat-1); }
.verdict-block { display: grid; gap: var(--space-3); }
.verdict-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.2vw, 36px); letter-spacing: -0.02em; }
.verdict-scroll { overflow-x: auto; position: relative; max-width: 100%; }
.verdict-table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; background: var(--merkat-paper); border: 1px solid var(--merkat-line); border-radius: var(--radius-md); overflow: hidden; }
.verdict-table th, .verdict-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--merkat-line); }
.verdict-table thead th { font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--merkat-muted); background: var(--merkat-bone); }
.verdict-table tbody tr:last-child th, .verdict-table tbody tr:last-child td { border-bottom: 0; }
.closeness { display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; }
.closeness.is-near { background: color-mix(in srgb, var(--heat-5) 16%, transparent); color: var(--heat-5); }
.closeness.is-mid { background: color-mix(in srgb, var(--heat-3) 22%, transparent); color: var(--merkat-ink); }
.closeness.is-far { background: color-mix(in srgb, var(--heat-1) 12%, transparent); color: var(--heat-1); }
.verdict-note { margin: 0; font-size: 14px; color: var(--merkat-muted); max-width: 70ch; }
.verdict-leaders { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.verdict-leaders li { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(80px, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--merkat-paper); border: 1px solid var(--merkat-line); border-radius: var(--radius-md); }
.leader-initial { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--merkat-sand); font-weight: 800; }
.verdict-leaders .leader-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-track { height: 8px; border-radius: var(--radius-pill); background: var(--merkat-bone); overflow: hidden; }
.leader-fill { display: block; height: 100%; background: var(--heat-1); }
.verdict-plan { padding: var(--space-5); border-radius: var(--radius-md); background: var(--merkat-ink); color: var(--merkat-bone); }
.verdict-plan .verdict-title { color: var(--merkat-bone); }
.verdict-plan-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.verdict-plan-list li { display: grid; gap: 4px; padding-left: var(--space-4); border-left: 3px solid var(--heat-4); }
.verdict-plan-list span { color: var(--merkat-muted-ink); font-size: 15px; }
.verdict-link { color: var(--merkat-bone); font-weight: 600; }

/* ---------- do it yourself, and the 90-day plan preview ---------- */
/* Cards on paper like the leaders list; one column on a phone, up to three
   side by side when there is room. No motion beyond a hover colour, and
   none at all under reduced motion. */
.diy-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.diy-item { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); background: var(--merkat-paper); border: 1px solid var(--merkat-line); border-radius: var(--radius-md); border-top: 4px solid var(--heat-4); }
.diy-title { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.diy-saw, .diy-how { margin: 0; font-size: 16px; line-height: 1.55; }
.diy-saw { color: var(--merkat-ink); }
.diy-how { color: var(--merkat-muted); }
.diy-label { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--merkat-muted); }
.diy-guide { margin-top: var(--space-1); font-size: 15px; font-weight: 600; color: var(--merkat-teal); transition: color 0.15s ease; }
.diy-guide:hover { color: var(--merkat-ink); }

.preview-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.preview-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px var(--space-3); background: var(--merkat-paper); border: 1px solid var(--merkat-line); border-radius: var(--radius-md); }
.preview-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--merkat-sand); font-size: 16px; }
.preview-words { display: grid; gap: 0; min-width: 0; }
.preview-when { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--merkat-muted); line-height: 1.5; }
.preview-title { font-size: 15px; font-weight: 600; line-height: 1.35; }
.preview-lock { font-size: 15px; opacity: 0.7; }
.preview-action { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--merkat-ink); color: var(--merkat-bone); }
.preview-locked, .preview-price { margin: 0; }
.preview-locked { font-weight: 600; }
.preview-price { color: var(--merkat-muted-ink); font-size: 15px; }
.preview-cta { margin-top: var(--space-1); }
@media (max-width: 480px) { .preview-cta { width: 100%; justify-content: center; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .diy-guide { transition: none; } }
@media print { .preview-action { display: none; } }

/* ---------- the sticky founding offer ---------- */
/* Fixed to the bottom of the screen, so three rules keep it off the page it
   sells (scan-verdict.js): it is tucked away while the hero or the offer is
   on screen, and the body is padded by its measured height
   (--claim-bar-space) so nothing ends up underneath it.
   Wide: one pill, the note beside a compact button.
   641-1000px: still one row, the note gets the room and loses its last
   sentence ("Held while you stay."); the schedule itself always stays.
   640px and under: stacked, the note above a full-width button. */
.claim-bar {
  position: fixed;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  z-index: 70;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: min(920px, calc(100% - 2 * var(--space-4)));
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--merkat-ink);
  color: var(--merkat-bone);
  border: 1px solid var(--merkat-line-ink);
  transition: transform 200ms ease, opacity 200ms ease, visibility 0s linear 0s;
}
.claim-bar[hidden] { display: none; }
.claim-bar.is-tucked {
  transform: translate(-50%, calc(100% + var(--space-6)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 200ms ease, opacity 200ms ease, visibility 0s linear 200ms;
}
.claim-note { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--merkat-muted-ink); }
.claim-button { flex: none; min-height: 52px; font-size: 17px; }
/* .btn goes full width under 920px; inside the bar it must not. */
.claim-bar .claim-button { flex: 0 0 auto; width: auto; min-height: 44px; padding-inline: var(--space-5); font-size: 15px; white-space: nowrap; }
@media (max-width: 1000px) {
  .claim-bar { border-radius: var(--radius-md); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); gap: var(--space-3); }
  .claim-note { font-size: 13px; }
  .claim-note-more { display: none; }
}
@media (max-width: 640px) {
  .claim-bar { flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-3); bottom: var(--space-3); width: calc(100% - 2 * var(--space-3)); }
  .claim-note { text-align: center; }
  .claim-bar .claim-button { width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .claim-bar, .claim-bar.is-tucked { transition: none; }
}
body.has-claim-bar { padding-bottom: var(--claim-bar-space, 120px); }
.claim-button { background: var(--merkat-clay); border-color: var(--merkat-clay); color: var(--merkat-paper); }
.claim-button:hover { background: color-mix(in srgb, var(--merkat-clay) 85%, var(--merkat-ink)); color: var(--merkat-paper); }

/* Market Leader under the plan on the thank-you page: a quieter second
   offer, never a fourth price beside the ladder. */
.upsell-alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 0; font-size: 15px; }

/* ---------- buying straight from the pricing page ---------- */
.offer-scan-first { display: block; margin-top: var(--space-2); text-align: center; font-size: 14px; color: var(--merkat-muted-ink); }
.buy-dialog { width: min(520px, calc(100% - 2 * var(--space-4))); max-height: calc(100% - 2 * var(--space-4)); padding: 0; border: 0; border-radius: var(--radius-md); background: var(--merkat-paper); color: var(--merkat-ink); }
.buy-dialog::backdrop { background: rgb(0 0 0 / 0.55); }
.buy-form { position: relative; display: grid; gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-5); }
.buy-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--merkat-muted); }
.buy-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; }
.buy-lede, .buy-note, .buy-alt { margin: 0; font-size: 14px; color: var(--merkat-muted); }
.buy-error { margin: 0; padding: var(--space-3); border-left: 3px solid var(--merkat-clay); background: var(--merkat-bone); font-size: 14px; }
.buy-submit { width: 100%; min-height: 52px; font-size: 17px; }

/* ---------- a plan's checkout: two questions, and when the first charge comes ----------
   starting-point.js. Mobile first: the three profile answers stack on a
   phone and sit in a row once there is room; Yes / No always fit side by side. */
.starting-panel { display: grid; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); padding: var(--space-4); border: 1px solid var(--merkat-line); border-radius: var(--radius-sm); background: var(--merkat-paper); min-width: 0; }
.starting-for { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.starting-point { display: grid; gap: var(--space-3); min-width: 0; }
.starting-point .field-set { margin: 0; min-width: 0; }
.starting-point .field-set legend { margin-bottom: var(--space-2); font-size: 16px; }
.starting-hint { margin: 0 0 var(--space-2); font-size: 14px; color: var(--merkat-muted); }
.starting-point .choice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.starting-point .choice-list.starting-choices-three { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) {
  .starting-point .choice-list.starting-choices-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.charge-summary { padding: var(--space-3); border-left: 3px solid var(--merkat-teal); border-radius: var(--radius-sm); background: var(--merkat-sand); }
.charge-title { margin: 0 0 var(--space-1); font-weight: 600; font-size: 15px; }
.charge-line { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.charge-line + .charge-line { margin-top: var(--space-1); }
.starting-error { margin: 0; }
.starting-go { justify-self: start; }
.first-charge { margin: var(--space-4) 0; padding: var(--space-3); border-left: 3px solid var(--merkat-teal); background: var(--merkat-sand); }

/* ---------- the free AI check, under the scan ---------- */
.ai-strip { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: var(--space-6); margin-block: var(--space-6); border-radius: var(--radius-md); background: var(--merkat-bone); border: 1px solid var(--merkat-line); }
.ai-strip-title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -0.025em; }
.ai-strip-lede { margin: 0 0 var(--space-4); color: var(--merkat-muted); max-width: 52ch; }
.ai-strip-sample { position: relative; margin: 0; padding: var(--space-5); border-radius: var(--radius-md); background: var(--merkat-ink); color: var(--merkat-bone); }
.ai-sample-tag { position: absolute; top: var(--space-3); right: var(--space-3); margin: 0; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--merkat-line-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--merkat-muted-ink); }
.ai-sample-question { margin: 0 0 var(--space-4); padding-right: 80px; font-weight: 600; }
.ai-sample-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ai-sample-answers li { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border-radius: var(--radius-sm); background: var(--merkat-ink-raised); }
.ai-sample-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-family: var(--font-mono); font-weight: 700; background: var(--merkat-line-ink); }
.ai-sample-answers .is-missing { border: 1px dashed var(--merkat-clay); color: var(--merkat-muted-ink); }
.ai-sample-answers .is-missing .ai-sample-mark { background: var(--merkat-clay); color: var(--merkat-paper); }
.ai-sample-note { margin-top: var(--space-3); font-size: 13px; color: var(--merkat-muted-ink); }
@media (max-width: 800px) {
  .ai-strip { grid-template-columns: 1fr; padding: var(--space-5); }
}

/* ---------- the report ask under the verdict, and other towns ---------- */
.verdict-report-ask:empty { display: none; }
.verdict-report-ask .unlock { max-width: 640px; padding: var(--space-5); border-radius: var(--radius-md); background: var(--merkat-ink); color: var(--merkat-bone); border: 2px solid var(--merkat-teal); }
.report-sent { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: color-mix(in srgb, var(--heat-5) 14%, transparent); font-weight: 600; }
.unlocked .report-sent { margin-bottom: var(--space-3); }
.verdict-town-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.verdict-town-link { font-weight: 600; }
.offer-area-note { margin: var(--space-2) 0 0; font-size: 14px; color: var(--merkat-muted-ink); }
.offer-area-note a { color: inherit; font-weight: 600; }
/* "How many service areas?" beside a Market Leader button (pricing.js). The
   total is display only; the server prices the count. */
.area-picker { display: block; margin: var(--space-2) 0; }
.area-picker[hidden] { display: none; }
.area-picker-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: var(--space-1); }
.area-picker-select { width: auto; min-width: 9em; }
.area-picker-total { display: block; margin-top: var(--space-1); font-size: 15px; color: var(--merkat-muted-ink); }

/* ---------- the scan report page, /scan/<token> ---------- */
/* Mobile first: people open it from the email on a phone. */
.report { display: grid; gap: var(--space-6); padding-block: var(--space-5) var(--space-7); }
.report-body, .report-finished { display: grid; gap: var(--space-6); }
.report-body[hidden], .report-finished[hidden] { display: none; }
/* The do-it-yourself sections sit in one mount; space them like the rest. */
[data-report-diy] { display: grid; gap: var(--space-6); }
[data-report-diy]:empty { display: none; }
.report-loading-text { font-size: 18px; color: var(--merkat-muted); }
.report-missing { display: grid; gap: var(--space-3); justify-items: start; max-width: 40rem; }
.report-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 7.5vw, 60px); line-height: 1.06; letter-spacing: -0.035em; overflow-wrap: anywhere; max-width: 20ch; }
.report-title .report-name { color: var(--merkat-teal); }
.report-title em { font-style: normal; color: var(--merkat-clay); }
.report-lede { margin: 0; font-size: 18px; color: var(--merkat-muted); max-width: 60ch; }
.report-lede strong { color: var(--merkat-ink); }
.report-hero { display: grid; gap: var(--space-3); justify-items: start; }
.report-chip { margin: 0; padding: 4px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--heat-5) 16%, transparent); color: var(--heat-5); font-size: 13px; font-weight: 700; }
.report-chip::before { content: "\2713  "; }
.report-chip.is-running { background: var(--merkat-sand); color: var(--merkat-ink); }
.report-chip.is-running::before { content: ""; }
.report-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.report-ctas[hidden] { display: none; }
.report-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-4); border-radius: var(--radius-md); background: var(--merkat-paper); border: 1px solid var(--merkat-line); }
.report-card-initial { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--merkat-ink); color: var(--merkat-bone); font-family: var(--font-display); font-weight: 800; font-size: 24px; }
.report-card-text p { margin: 0; }
.report-card-name { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.report-card-site { font-size: 14px; color: var(--merkat-teal); }
.report-card-meta { font-size: 14px; color: var(--merkat-muted); }
.report-card-listing { grid-column: 1 / -1; margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--merkat-line); font-weight: 600; }
.report-section { display: grid; gap: var(--space-3); }
.report-section-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 5.5vw, 36px); line-height: 1.12; letter-spacing: -0.025em; }
.report-section-lede { margin: 0; color: var(--merkat-muted); max-width: 62ch; }
.report-map { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--merkat-ink); color: var(--merkat-bone); }
.report-map .report-section-title { color: var(--merkat-bone); font-size: 22px; }
.report-grid { width: 100%; max-width: 560px; margin-inline: auto; }
.report-grid .zone { font-size: clamp(20px, 6vw, 34px); }
.report-caption { margin: 0; font-size: 14px; color: var(--merkat-muted-ink); }
.report-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.report-findings li { position: relative; padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 18px); border-radius: var(--radius-md); background: var(--merkat-paper); border: 1px solid var(--merkat-line); font-size: 17px; }
.report-findings li::before { content: ""; position: absolute; left: var(--space-4); top: calc(var(--space-3) + 9px); width: 8px; height: 8px; border-radius: 50%; background: var(--merkat-clay); }
.report-findings a { font-weight: 600; }
.report-steps { counter-reset: report-step; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.report-steps li { counter-increment: report-step; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--merkat-paper); border: 1px solid var(--merkat-line); }
.report-steps li::before { content: counter(report-step); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--merkat-ink); color: var(--merkat-bone); font-family: var(--font-mono); font-weight: 700; }
.report-steps strong { font-size: 17px; }
.report-steps span { color: var(--merkat-muted); font-size: 15px; }
.report-compare { display: grid; border: 1px solid var(--merkat-line); border-radius: var(--radius-md); overflow: hidden; background: var(--merkat-paper); }
.report-compare-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--merkat-line); }
.report-compare-row > span:first-child { font-weight: 600; }
.report-compare-row > span:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 14px; color: var(--merkat-muted); }
.report-compare-row > span:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.report-compare-head { display: none; }
.report-compare-row > span:nth-child(2)::before { content: "On your own: "; font-weight: 600; }
.is-included { padding: 3px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--heat-5) 16%, transparent); color: var(--heat-5); font-size: 14px; font-weight: 700; }
.report-inline-cta { justify-self: start; }
.report-how { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.report-how li { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--merkat-line); }
.report-how li.is-done { border-left-color: var(--heat-5); }
.report-how span { color: var(--merkat-muted); font-size: 15px; }
.report-faq details { padding: var(--space-3) 0; border-top: 1px solid var(--merkat-line); }
.report-faq summary { font-weight: 700; cursor: pointer; }
.report-faq p { margin: var(--space-2) 0 0; color: var(--merkat-muted); }
.report-offer:empty { display: none; }
.report-again { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* The searches table becomes one card per search on a phone. */
@media (max-width: 640px) {
  .report-searches .verdict-table { min-width: 0; border: 0; background: none; }
  .report-searches .verdict-table thead { display: none; }
  .report-searches .verdict-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--space-3); margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--merkat-line); border-radius: var(--radius-md); background: var(--merkat-paper); }
  .report-searches .verdict-table th, .report-searches .verdict-table td { padding: 0; border: 0; }
  .report-searches .verdict-table th { grid-column: 1 / -1; font-size: 17px; }
  .report-searches .verdict-table td::before { content: attr(data-label); display: block; font-family: var(--font-body, inherit); font-size: 12px; font-weight: 600; color: var(--merkat-muted); text-transform: none; }
}
@media (min-width: 800px) {
  .report-map { padding: var(--space-6); }
  .report-compare-head { display: grid; background: var(--merkat-bone); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--merkat-muted); }
  .report-compare-row { grid-template-columns: 1.2fr 1.2fr auto; }
  .report-compare-row > span:nth-child(2) { grid-column: 2; grid-row: 1; font-size: 15px; }
  .report-compare-row > span:nth-child(2)::before { content: none; }
  .report-compare-row > span:nth-child(3) { grid-column: 3; grid-row: 1; }
  .report-compare-head > span { grid-row: 1 !important; font-size: 12.5px !important; }
}
@media print {
  .site-header, .site-footer, .claim-bar, .report-again, .report-offer, .verdict-report-ask,
  .verdict-towns, .skip-link, .scan-steps, .report-ctas, .report-inline-cta { display: none !important; }
  body.has-claim-bar { padding-bottom: 0; }
  .report-faq details { display: block; }
  .report-map { background: #fff; color: #000; border: 1px solid #999; }
  .report-map .report-section-title, .report-caption, .readout-label { color: #000; }
  .zone, .legend .swatch, .report-steps li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report-section, .report-map, .report-findings li, .report-steps li { break-inside: avoid; }
}

/* ---------- the worked example in "How this works" ---------- */
/* The section used to be four paragraphs saying what we do. This shows one
   answer being read instead, because the distinction the whole check rests
   on - a company is a business and "get two or three quotes" is not - is
   one sentence to assert and obvious in a second to see. Illustrative names
   on purpose: publishing real competitors on a sales page would advertise
   them, and the answer would be stale by the time anybody read it. */
.worked {
  margin: 0 0 var(--space-7);
  padding: var(--space-5);
  max-width: 62ch;
  background: var(--merkat-paper);
  border: 1px solid var(--merkat-line);
  border-radius: var(--radius-md);
}
.worked-caption {
  margin: 0 0 var(--space-4);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--merkat-muted);
}
.worked-question {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--merkat-teal);
}
.worked-answer {
  padding: var(--space-4);
  background: var(--merkat-bone);
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.7;
}
.worked-answer > p { margin: 0; }
.worked-list { margin: var(--space-2) 0; padding-left: 1.4em; }
.worked-list li { margin-bottom: var(--space-1); }

/* A tint rather than a block of colour, so the name stays readable and the
   mark reads as "we picked this out" rather than as a highlighter pen. */
.worked-answer .counted {
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--merkat-teal) 16%, var(--merkat-paper));
  box-shadow: inset 0 -2px 0 var(--merkat-teal);
  color: var(--merkat-ink);
  font-weight: 600;
}
.worked-answer .skipped {
  margin-top: var(--space-3);
  color: var(--merkat-muted);
}

.worked-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--merkat-muted);
}
.worked-key li { display: flex; align-items: center; gap: var(--space-2); }
.key { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.key-counted {
  background: color-mix(in srgb, var(--merkat-teal) 16%, var(--merkat-paper));
  box-shadow: inset 0 -2px 0 var(--merkat-teal);
}
.key-skipped { background: var(--merkat-bone); border: 1px solid var(--merkat-line); }

.worked-note {
  margin: var(--space-4) 0 0;
  font-size: 15px;
  color: var(--merkat-muted);
}

@media (max-width: 600px) {
  .worked { padding: var(--space-4); }
  .worked-answer { font-size: 14px; }
}

/* ---------- a trade that is not on the list ---------- */
.trade-index-other { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--merkat-line); font-size: 17px; }
.trade-index-other a { font-weight: 700; }

/* The free scan as a sign-up (2026-10-12): the breakdown and the map are
   blurred behind the email ask until it is answered. */
.verdict-locked-wrap { position: relative; }
.verdict-locked { filter: blur(7px); pointer-events: none; user-select: none; max-height: 560px; overflow: hidden; }
.verdict-veil {
  position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center;
  padding: var(--space-6) var(--space-4) 0;
  background: linear-gradient(to bottom, rgba(242, 237, 228, 0.35), var(--merkat-bone) 85%);
}
.verdict-veil-text {
  max-width: 34ch; margin: 0; padding: var(--space-4) var(--space-5); text-align: center; font-weight: 600;
  background: var(--merkat-bone); border: 2px solid var(--merkat-teal); border-radius: var(--radius-md);
}
[data-panel].is-locked [data-zones],
[data-panel].is-locked [data-readout-figure] { filter: blur(6px); user-select: none; }