/* =====================================================================
   WEB CITED - SXO CONSULTING
   Swiss / Brutalist system. Mobile-first. WCAG 2.1 AA.
   ===================================================================== */

/* ---------- Tokens --------------------------------------------------- */
:root {
  --ink: #000000;
  --charcoal: #1a1a1a;
  --slate-900: #222222;
  --slate-800: #2c2c2c;
  --slate-700: #3d3d3d;
  --slate-600: #555555;
  --slate-500: #6b6b6b;   /* passes AA on paper for body text */
  --slate-400: #8a8a8a;
  --slate-300: #bcbcbc;
  --slate-200: #dcdcda;
  --slate-100: #ededea;
  --paper: #f4f3ef;
  --paper-white: #ffffff;
  --accent: #CC0000;       /* signal red, AA on paper (~5.25:1) */
  --accent-ink: #8b0000;   /* darker red for hover/active states */
  --accent-on-dark: #ff6b6b; /* signal red calibrated for var(--ink) backgrounds, ~7.6:1 (AAA). Use on .eyebrow/.brand text inside dark banners + cards. */
  --focus: #0047ff;        /* high-contrast focus ring */

  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-display: "Helvetica Neue", "Arial Black", "Helvetica", Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Courier New", monospace;

  --max-w: 1440px;
  --gutter: clamp(1.25rem, 3.5vw, 2.75rem);
  --gap: clamp(1rem, 2vw, 1.5rem);
  --rule: 1.5px solid var(--ink);
  --rule-thick: 3px solid var(--ink);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover { text-decoration-color: var(--accent); }

ul, ol { padding-left: 1.25rem; }

p { margin: 0 0 1rem; }

hr {
  border: none;
  border-top: var(--rule);
  margin: 0;
}

/* ---------- Focus ---------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
button:focus-visible,
a.btn:focus-visible {
  outline-offset: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100px;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper-white);
  font-weight: 700;
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus {
  top: 0.5rem;
}

/* ---------- Typography ---------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 0.75em;
  color: var(--ink);
}

h1 {
  font-size: clamp(2rem, 6.5vw + 0.25rem, 7rem);
  letter-spacing: -0.035em;
  line-height: 0.9;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.6rem, 4vw + 0.5rem, 4rem);
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}

h3 {
  font-size: clamp(1.35rem, 1.8vw + 0.5rem, 2rem);
  letter-spacing: -0.015em;
}

h4 {
  font-size: clamp(1rem, 0.8vw + 0.75rem, 1.25rem);
  letter-spacing: 0.02em;
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-700);
  margin-bottom: 1rem;
}

.lead {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  font-weight: 400;
  max-width: 62ch;
  color: var(--slate-800);
}

.mono { font-family: var(--font-mono); }

/* ---------- Layout --------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Prevent grid/flex children from blowing past their track width.
   Without min-width:0 a long word (URL, headline) forces the track
   to expand and overflow the container on narrow viewports. */
.hero__grid > *,
.split > *,
.cards > *,
.stats > *,
.defs > *,
.steps > *,
.footer__grid > * {
  min-width: 0;
}

.section {
  padding-top: clamp(3rem, 7vw, 6.5rem);
  padding-bottom: clamp(3rem, 7vw, 6.5rem);
  border-top: var(--rule);
}

.section--dark {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--paper-white); }
.section--dark .eyebrow { color: var(--slate-300); }
.section--dark .lead { color: var(--slate-200); }
.section--dark a { color: inherit; }
.section--dark .btn--primary {
  background: var(--paper-white);
  color: var(--ink);
  border-color: var(--paper-white);
}
.section--dark .btn--primary:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.section--dark .btn--ghost {
  border-color: var(--paper-white);
  color: var(--paper-white);
}
.section--dark .btn--ghost:hover {
  background: var(--paper-white);
  color: var(--ink);
}
.section--dark hr { border-color: var(--slate-700); }

.section--tight { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2rem, 5vw, 4rem); }

.grid {
  display: grid;
  gap: var(--gap);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

/* ---------- Header / Nav -------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--rule);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: -0.02em;
  font-size: 1.1rem;
  text-transform: uppercase;
}
.brand__mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--ink);
  color: var(--paper-white);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.nav-toggle {
  appearance: none;
  background: transparent;
  border: var(--rule);
  padding: 0.55rem 0.85rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle:hover { background: var(--ink); color: var(--paper-white); }

.nav-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu.is-open { display: flex; }

.nav-menu a {
  display: block;
  padding: 0.75rem 0;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--slate-200);
}
.nav-menu a[aria-current="page"] {
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}

.nav-cta.btn {
  display: none;
}

/* Mobile expanded menu */
@media (max-width: 899px) {
  .nav-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: var(--rule);
    padding: 0.5rem var(--gutter) 1.5rem;
    flex-direction: column;
    gap: 0;
  }
  .nav-menu .mobile-cta {
    margin-top: 1rem;
    border: none;
  }
  .nav-menu .mobile-cta a {
    border: none;
    padding: 0;
  }
}

/* ---------- Buttons -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.5rem;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper-white);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
  min-height: 48px;
  white-space: nowrap;
}
.btn:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper-white);
  border-color: var(--ink);
}

.btn--primary { background: var(--ink); color: var(--paper-white); border-color: var(--ink); }

.btn--lg { padding: 1.1rem 1.75rem; font-size: 1rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- Hero ---------------------------------------------------- */
.hero {
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  border-bottom: var(--rule);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-700);
  border-top: var(--rule);
  padding-top: 1rem;
  margin-top: 2rem;
}

.hero__fine {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--slate-700);
  max-width: 36rem;
}
.hero__meta span::before {
  content: "◆";
  margin-right: 0.5rem;
  color: var(--accent);
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
  }
  .hero__body { padding-top: 2rem; }
}

/* ---------- Stat blocks -------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--rule);
}

.stat {
  padding: 1.75rem 0;
  border-bottom: var(--rule);
}
.stat__num {
  display: block;
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--ink);
}
.stat__label {
  display: block;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--slate-700);
  margin-top: 0.5rem;
  max-width: 36ch;
}
.stat__src {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-top: 0.75rem;
}

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat { padding: 2rem clamp(1rem, 2vw, 1.75rem); border-right: var(--rule); }
  .stat:nth-child(2n) { border-right: none; }
}
@media (min-width: 1024px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat,
  .stat:nth-child(2n) { border-right: var(--rule); border-bottom: none; }
  .stat:last-child { border-right: none; }
  .stat__num { font-size: clamp(2.25rem, 5vw, 4rem); }
}

/* ---------- Cards / Services --------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--rule);
}

.card {
  padding: 2rem 0;
  border-bottom: var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.card__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--slate-600);
}
.card__title { margin: 0; }
.card__body { color: var(--slate-700); margin: 0; }
.card__link {
  margin-top: auto;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.2rem;
  align-self: flex-start;
}
.card__link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 2rem clamp(1rem, 2vw, 1.75rem); border-right: var(--rule); }
  .card:nth-child(2n) { border-right: none; }
}
@media (min-width: 1024px) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--3 .card { border-right: var(--rule); border-bottom: var(--rule); }
  .cards--3 .card:nth-child(3n) { border-right: none; }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  .cards--4 .card { border-right: var(--rule); }
  .cards--4 .card:nth-child(4n) { border-right: none; }
}

/* ---------- Split / Two-col ---------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .split--flip { grid-template-columns: 7fr 5fr; }
}

/* ---------- Process steps ------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--rule);
}
.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 2rem 0;
  border-bottom: var(--rule);
}
@media (min-width: 768px) {
  .step {
    grid-template-columns: 140px 1fr 1fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: start;
    padding: 2.5rem 0;
  }
}
.step__num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--slate-500);
  text-transform: uppercase;
}
.step__title { margin: 0 0 0.25rem; }
.step__desc { color: var(--slate-700); margin: 0; }
.step__tiers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.1rem 0 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.step__tier {
  padding: 0.15rem 0.55rem;
  border: var(--rule);
  border-radius: 999px;
  background: var(--paper-white);
  color: var(--ink);
  line-height: 1.4;
}
.step__tier--off {
  background: transparent;
  color: var(--slate-500);
  border-color: var(--slate-300);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ---------- Compare table ------------------------------------------ */
.compare {
  border: var(--rule);
  margin-top: 2rem;
  width: 100%;
  overflow-x: auto;
}
.compare table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.compare th,
.compare td {
  text-align: left;
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--slate-200);
  vertical-align: top;
  font-size: 0.95rem;
}
.compare thead th {
  background: var(--ink);
  color: var(--paper-white);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: none;
}
.compare tbody th {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  background: var(--slate-100);
  width: 18%;
  min-width: 140px;
}
.compare tr:last-child td,
.compare tr:last-child th { border-bottom: none; }

/* ---------- Pricing ------------------------------------------------- */
.pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: var(--rule);
}
.price-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: var(--rule);
}
.price-card:last-child { border-bottom: none; }
.price-card__tag {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.price-card__num {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ink);
}
.price-card__num sup {
  font-size: 0.4em;
  font-weight: 700;
  vertical-align: top;
  margin-right: 0.1rem;
  letter-spacing: 0;
}
.price-card__num sub {
  font-size: 0.35em;
  font-weight: 600;
  vertical-align: baseline;
  color: var(--slate-600);
  letter-spacing: 0;
  margin-left: 0.25rem;
}
.price-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
  color: var(--slate-800);
}
.price-card__list li {
  padding-left: 1.5rem;
  position: relative;
}
.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.85rem;
  height: 2px;
  background: var(--ink);
}
.price-card--featured {
  background: var(--ink);
  color: var(--paper-white);
}
.price-card--featured .price-card__num,
.price-card--featured h3 { color: var(--paper-white); }
.price-card--featured .price-card__tag { color: var(--slate-300); }
.price-card--featured .price-card__list { color: var(--slate-200); }
.price-card--featured .price-card__list li::before { background: var(--accent); }
.price-card--featured .btn {
  background: var(--paper-white);
  color: var(--ink);
  border-color: var(--paper-white);
}
.price-card--featured .btn:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}

@media (min-width: 900px) {
  .pricing { grid-template-columns: 1fr 1fr; }
  .price-card { border-bottom: none; border-right: var(--rule); }
  .price-card:last-child { border-right: none; }
  .price-card--featured { border-right-color: var(--ink); }
  .pricing--solo { grid-template-columns: minmax(0, 620px); justify-content: center; }
  .pricing--solo .price-card { border-right: none; }
}

@media (min-width: 1100px) {
  .pricing--three { grid-template-columns: 1fr 1fr 1fr; }
  .pricing--three .price-card { border-right: var(--rule); border-bottom: none; }
  .pricing--three .price-card:last-child { border-right: none; }
  .pricing--three .price-card--featured { border-right-color: var(--ink); }
}

/* ---------- FAQ ----------------------------------------------------- */
.faq {
  border-top: var(--rule);
}

/* Support page section dividers (Audit logistics, Scope changes, Methodology,
 * etc.) Plain h2 inherits the global clamp(1.6rem,...,4rem) which is too big
 * when used as a SUBSECTION divider inside the FAQ stack: the categories ran
 * together with no breathing room. This class scopes a smaller font-size and
 * generous top margin so groups read as discrete sections. */
.support-section__title {
  font-size: clamp(1.35rem, 1.5vw + 0.7rem, 1.75rem);
  letter-spacing: -0.01em;
  margin-top: 3.5rem;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--slate-300);
}
.support-section__title:first-of-type {
  margin-top: 1rem;
  padding-top: 0;
  border-top: 0;
}

/* Glossary list on support.html. Plain dl/dt/dd; dt is the term, dd is the
 * definition. Slight indent on dd, accent line on dt. */
.glossary {
  margin: 1.5rem 0 2.5rem;
  border-top: var(--rule);
}
.glossary dt {
  font-weight: 700;
  margin: 1.25rem 0 0.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate-300);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
}
.glossary dt:first-child {
  border-top: 0;
  padding-top: 0;
}
.glossary dd {
  margin: 0 0 0.5rem 0;
  color: var(--slate-700);
  line-height: 1.6;
}
details.faq__item {
  border-bottom: var(--rule);
  padding: 1.25rem 0;
}
details.faq__item summary {
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
details.faq__item summary::-webkit-details-marker { display: none; }
details.faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 180ms ease;
}
details.faq__item[open] summary::after { content: "-"; }
details.faq__item p {
  margin: 0.85rem 0 0;
  color: var(--slate-700);
  max-width: 68ch;
}

/* ---------- Pull quote --------------------------------------------- */
.pull {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  max-width: 22ch;
}
.pull::before {
  content: "“";
  display: block;
  font-size: 1em;
  line-height: 0.5;
  color: var(--accent);
}

/* ---------- Definition list ---------------------------------------- */
.defs {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--rule);
}
.defs > div {
  padding: 1.25rem 0;
  border-bottom: var(--rule);
  display: grid;
  gap: 0.35rem;
}
@media (min-width: 768px) {
  .defs > div {
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    padding: 1.5rem 0;
    align-items: baseline;
  }
}
.defs dt {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.defs dd {
  margin: 0;
  color: var(--slate-700);
}

/* ---------- CTA Band ----------------------------------------------- */
.cta-band {
  background: var(--ink);
  color: var(--paper-white);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.cta-band h2 { color: var(--paper-white); }
.cta-band .lead { color: var(--slate-200); }
.cta-band .eyebrow { color: var(--slate-300); }
.cta-band .btn { background: var(--paper-white); color: var(--ink); border-color: var(--paper-white); }
.cta-band .btn--ghost {
  background: transparent;
  color: var(--paper-white);
  border-color: var(--paper-white);
}
.cta-band .btn:hover,
.cta-band .btn--ghost:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}

/* ---------- Marquee-ish tag row ------------------------------------ */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tags li {
  border: var(--rule);
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- Footer --------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--slate-200);
  padding: clamp(3rem, 5vw, 4.5rem) 0 2rem;
  margin-top: 0;
}
.footer a { color: var(--paper-white); text-decoration: none; }
.footer a:hover { color: var(--accent); text-decoration: underline; }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--slate-700);
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer h3 {
  color: var(--paper-white);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  margin-bottom: 1rem;
}
.footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.95rem;
}
.footer__brand {
  font-weight: 900;
  font-size: 1.75rem;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--paper-white);
  margin-bottom: 1rem;
  line-height: 1;
}
.footer__tag {
  color: var(--slate-300);
  max-width: 34ch;
  font-size: 0.95rem;
}
.footer__meta {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-400);
}

/* ---------- Utility ------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }
.center { text-align: center; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rule { border-top: var(--rule-thick); padding-top: 1rem; }

/* ---------- Large-screen polish ------------------------------------ */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-menu {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    align-items: center;
  }
  .nav-menu a {
    border-bottom: none;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
  }
  .nav-menu a[aria-current="page"] { text-decoration-color: var(--accent); }
  .nav-cta.btn { display: inline-flex; }
  .mobile-cta { display: none; }
}

@media (min-width: 1280px) {
  h1 { font-size: clamp(3.5rem, 6vw, 7.5rem); }
  .hero { padding-top: 4rem; }
}

@media (min-width: 1440px) {
  :root { --gutter: 3rem; }
}

/* ---------- Page banner (non-home pages) --------------------------- */
.banner {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: var(--rule);
}
.banner h1 {
  font-size: clamp(2.25rem, 6vw, 6rem);
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
  /* text-wrap: balance was here; removed because it forces layout
     to run multiple passes finding optimal line breaks, which can
     leave the heading's bounding box unstable across the first
     few frames and confuse LCP detection. The aesthetic gain isn't
     worth a null Performance score on the page that markets the
     audit. */
}
.banner .lead { margin-top: 1rem; }
.banner__meta {
  display: flex;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-600);
}

/* ---------- Inline deliverable list -------------------------------- */
.deliverables {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--rule);
  counter-reset: item;
}
.deliverables > li {
  list-style: none;
  padding: 1.25rem 0;
  border-bottom: var(--rule);
  counter-increment: item;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
}
.deliverables > li::before {
  content: counter(item, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--slate-500);
  letter-spacing: 0.1em;
}
.deliverables strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}
.deliverables span {
  color: var(--slate-700);
  font-size: 0.95rem;
}

/* ---------- Cookie / privacy notice ---------------------------------- */
.cookie-notice {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper-white);
  border-top: 4px solid var(--accent);
  padding: 1rem clamp(1rem, 4vw, 2rem);
  font-size: 0.9rem;
  line-height: 1.5;
  transform: translateY(100%);
  transition: transform 240ms ease-out;
}
.cookie-notice.is-visible { transform: translateY(0); }
.cookie-notice__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: center;
}
@media (min-width: 720px) {
  .cookie-notice__inner {
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
  }
}
.cookie-notice p { margin: 0; }
.cookie-notice a {
  color: var(--paper-white);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.cookie-notice a:hover { color: var(--accent); }
.cookie-notice__btn {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper-white);
  color: var(--ink);
  border: 0;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  justify-self: start;
}
@media (min-width: 720px) {
  .cookie-notice__btn { justify-self: end; }
}
.cookie-notice__btn:hover { background: var(--accent); color: var(--paper-white); }
.cookie-notice__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Legal / prose pages -------------------------------------- */
.prose { max-width: 64ch; }
.prose h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
}
.prose h3 {
  margin-top: 2rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.65; }
.prose ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.prose ul li { margin-bottom: 0.4rem; }
.prose .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: var(--rule);
}

/* ---------- Intake form --------------------------------------------- */
.form {
  display: grid;
  gap: 1.5rem;
  max-width: 720px;
}
.form__row { display: grid; gap: 0.5rem; }
.form__row[hidden] { display: none; }
.form__row--split { grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 680px) {
  .form__row--split { grid-template-columns: 1fr 1fr; }
}
.form label,
.form legend {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate-700);
  font-weight: 700;
}
.form .hint {
  font-size: 0.8125rem;
  color: var(--slate-500);
  margin-top: 0.25rem;
  line-height: 1.45;
}
.form .req { color: var(--accent); margin-left: 0.15rem; }
.form input[type="text"],
.form input[type="email"],
.form input[type="url"],
.form input[type="tel"],
.form select,
.form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-white);
  border: var(--rule);
  border-radius: 0;
  padding: 0.85rem 1rem;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
}
.form textarea { min-height: 7.5rem; resize: vertical; font-family: var(--font-sans); }
.form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path fill='none' stroke='%23000' stroke-width='2' d='M1 1l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.form input::placeholder,
.form textarea::placeholder { color: var(--slate-400); }
.form .tiers {
  display: grid;
  gap: 0;
  border: var(--rule);
  margin: 0;
  padding: 0;
}
.form .tier-opt { display: block; }
.form .tier-opt + .tier-opt { border-top: var(--rule); }
.form .tier-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.form .tier-opt__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  background: var(--paper-white);
  transition: background 120ms ease;
}
.form .tier-opt__inner:hover { background: var(--slate-100); }
.form .tier-opt input[type="radio"]:checked + .tier-opt__inner {
  background: var(--ink);
  color: var(--paper-white);
}
.form .tier-opt input[type="radio"]:focus-visible + .tier-opt__inner {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}
.form .tier-opt__dot {
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
  flex: none;
}
.form .tier-opt input[type="radio"]:checked + .tier-opt__inner .tier-opt__dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--accent);
  border-radius: 50%;
}
.form .tier-opt__label { font-weight: 800; letter-spacing: 0.02em; }
.form .tier-opt__badge { font-weight: 400; color: var(--slate-600); }
.form .tier-opt__scope {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--slate-600);
  display: block;
  margin-top: 0.1rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}
.form .tier-opt input[type="radio"]:checked + .tier-opt__inner .tier-opt__scope { color: var(--slate-200); }
.form .tier-opt__price { font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; }
.form .tier-opt__price-per { font-family: var(--font-mono); font-weight: 400; font-size: 0.75rem; color: var(--slate-700); margin-left: 1px; }
.form .cm-fieldset { background: var(--paper); }

.form .check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate-800);
  line-height: 1.5;
  font-weight: 400;
  cursor: pointer;
}

/* /start monitoring add-on row: intro + per-checkbox value-prop hint
   (shipped 2026-05-17 for the CM-vs-Audit-Monitoring price-gap explainer). */
.monitoring-addon-intro {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-700, #5a5a5a);
  margin: 0 0 0.75rem;
}
.hint--block {
  display: block;
  margin-top: 0.5rem;
  line-height: 1.55;
}
.form .check input[type="checkbox"] {
  width: 1.2rem; height: 1.2rem;
  margin-top: 0.15rem;
  accent-color: var(--ink);
}
.form .submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 0.5rem;
}
.form .submit-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.form-success {
  border: var(--rule-thick);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--paper-white);
}
.form-success h2 { margin-top: 0; }

/* ---------- Inline validation errors (start.html) --------------------
 * Body-text treatment resets the eyebrow inheritance from `.form label,
 * .form legend` the same way `.form .check` / `.radio-group` do. Signal
 * red comes from `--accent` (AA on paper). Error text is associated with
 * each input via `aria-describedby` so screen readers announce it on focus. */
.form .field-error {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  line-height: 1.45;
  margin: 0.3rem 0 0;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}
.form .field-error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: 0.05rem;
}
.form .field-error[hidden] { display: none; }

.form input.field--invalid,
.form select.field--invalid,
.form textarea.field--invalid {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.form input.field--invalid:focus-visible,
.form select.field--invalid:focus-visible,
.form textarea.field--invalid:focus-visible {
  /* Keep --focus ring on keyboard focus; red border stays via box-shadow. */
  box-shadow: inset 0 0 0 1px var(--accent);
}
.form fieldset.field--invalid > legend { color: var(--accent); }

/* Counter for line-capped textareas (currently the URL list). Sits below
 * the textarea and updates live as the user edits. Goes accent-red when
 * the line count exceeds the tier cap. Color contrast against --paper:
 * slate-500 ~5.4:1 (AA), accent (#CC0000) ~5.4:1 (AA). */
.form .field-counter {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  color: var(--slate-500);
  margin: 0.4rem 0 0;
}
.form .field-counter--over {
  color: var(--accent);
  font-weight: 600;
}
/* Subtle interim Enterprise-multi-brand-by-email note (Q35: A). Italic,
 * slate-700, no border or background, sits inline within the URL hint. */
.form .urls-enterprise-note {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--slate-700);
}
.form .urls-enterprise-note[hidden] { display: none; }

/* Visually-hidden live region for SR announcements. Mirrors .sr-only
 * rules but kept local so the form script can target it by class. */
.form-live {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Error summary shown above the submit row after a blocked submit. */
.form-error-summary {
  border: 2px solid var(--accent);
  padding: 0.9rem 1.1rem;
  margin: 1rem 0 0;
  background: color-mix(in srgb, var(--accent) 6%, var(--paper-white));
}
.form-error-summary[hidden] { display: none; }
.form-error-summary__title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.form-error-summary ul {
  margin: 0;
  padding-left: 1.2rem;
  list-style: disc;
}
.form-error-summary li {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate-800);
  line-height: 1.5;
  margin: 0.15rem 0;
}
.form-error-summary a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.form-error-summary a:hover { color: var(--accent); }

/* Network-failure retry panel. Visual language mirrors .form-success so
 * sighted users recognize the post-submit terminal state. */
.form-retry {
  border: var(--rule-thick);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--paper-white);
}
.form-retry[hidden] { display: none; }
.form-retry h2 { margin-top: 0; }
.form-retry .submit-row { margin-top: 1.25rem; }

/* ---------- Sample-report gallery (hero + thumb strip) ---------------- */
/* Layout: a featured "hero" image on top, with a horizontal row of
   thumbnails below. Click a thumbnail and the new image swaps into
   the hero slot via the View Transitions API (Chrome / Safari TP /
   Edge). Browsers without VT get a brief CSS fade fallback.

   WCV friendly: only the first hero is eagerly fetched
   (fetchpriority=high); thumbs are 240w so the strip is ~100 KB
   total. Subsequent heroes are pulled on demand from cache or
   network when the user clicks. Hero box has a fixed aspect ratio
   so swapping images of different shapes never produces CLS. */
.gal {
  /* Capped at 704px (round 5: another 20% reduction from 880 so the
     hero reads as a quoted deliverable, not a banner). Hero source
     WebPs are now rendered at 720w native, so display is near-1:1
     with no oversize bandwidth waste. */
  max-width: 704px;
  margin: 1.5rem auto 0;
  padding: 0;
  background: var(--paper-white);
  border: var(--rule);
  display: flex;
  flex-direction: column;
  /* content-visibility:auto keeps the gallery (which sits below the
     fold) out of the initial layout/paint pipeline. Chrome won't
     evaluate the 9 thumb <img>s as LCP candidates so the page-hero
     <h1> wins the LCP cleanly. contain-intrinsic-size reserves the
     box height during off-screen state so CLS stays at 0. */
  content-visibility: auto;
  contain-intrinsic-size: 700px 1200px;
}
.gal-hero {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--paper);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--rule);
}
.gal-hero img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* View Transitions: only tag the hero element after first paint, so
   the browser doesn't snapshot it during the initial render and
   invalidate the page's LCP candidate. The .vt-armed class is added
   right after DOMContentLoaded by the gallery script. */
.gal-hero img.vt-armed {
  view-transition-name: gal-hero;
}
/* Fade fallback for browsers without View Transitions API. */
.gal-hero img.is-flipping { opacity: 0.4; transition: opacity 200ms ease; }
.gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: var(--paper-white);
  color: var(--ink);
  border: var(--rule);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  opacity: 0.85;
  transition: opacity 100ms ease, background 100ms ease, color 100ms ease;
}
.gal-arrow:hover, .gal-arrow:focus-visible {
  opacity: 1;
  background: var(--accent);
  color: var(--paper-white);
  border-color: var(--accent);
  outline: none;
}
.gal-arrow--prev { left: 0.75rem; }
.gal-arrow--next { right: 0.75rem; }

.gal-cap {
  padding: 1rem 1.25rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--slate-800);
  border-bottom: 1px solid var(--slate-200);
}
.gal-cap strong {
  display: block;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
  letter-spacing: -0.005em;
}
.gal-counter {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate-600);
}

.gal-thumbs {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0.85rem;
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.gal-thumbs::-webkit-scrollbar { height: 6px; }
.gal-thumbs::-webkit-scrollbar-thumb { background: var(--slate-200); border-radius: 3px; }
.gal-thumbs li {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.gal-thumb {
  width: 110px;
  background: var(--paper-white);
  border: 1.5px solid var(--slate-200);
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  text-align: left;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  overflow: hidden;
}
.gal-thumb img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: var(--paper);
}
.gal-thumb-cap {
  display: block;
  padding: 0.35rem 0.5rem 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink);
  background: var(--paper-white);
  border-top: 1.5px solid var(--slate-200);
}
.gal-thumb:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.gal-thumb:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.gal-thumb.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.gal-thumb.is-active .gal-thumb-cap {
  background: var(--accent);
  color: var(--paper-white);
  border-top-color: var(--accent);
}

@media (max-width: 540px) {
  .gal-arrow { width: 38px; height: 38px; font-size: 1.3rem; }
  .gal-thumb { width: 92px; }
  .gal-thumb img { height: 58px; }
}

/* Honor reduced-motion preference: drop the flip transition and any
   transform-based hover lifts. */
@media (prefers-reduced-motion: reduce) {
  .gal-thumb, .gal-thumbs, .gal-arrow, .gal-hero img { transition: none !important; }
  .gal-hero img.is-flipping { opacity: 1; }
}

.case-card {
  border: var(--rule);
  background: var(--paper-white);
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.case-card img {
  width: 100%;
  height: auto;
  border: 1px solid var(--slate-200);
  display: block;
}
.case-card figcaption {
  font-size: 0.875rem;
  color: var(--slate-700);
  line-height: 1.5;
}

/* Bare image strip (founder experience trust bar) */
.experience-strip {
  margin: 0 auto;
  max-width: 100%;
}
.experience-strip img {
  width: 100%;
  height: auto;
  display: block;
}

/* Vertical-compact section modifier: pairs with .experience-strip */
.section--strip {
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* ---------- Print --------------------------------------------------- */
@media print {
  .site-header, .footer, .cta-band, .nav-toggle, .cookie-notice { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ---------- Radio group (local_presence on /start) -------------------
 * Reset the eyebrow-style inheritance from `.form label, .form legend`
 * the same way `.form .check` does for the acknowledgement checkbox -
 * radio descriptions are body text, not uppercase-mono caps. */
.radio-group { border: 0; padding: 0; margin: 0; }
.radio-group > legend {
  /* Match the baseline .form legend weight (700): was 600, visibly
   * lighter than every other legend on the page. */
  font-weight: 700;
  margin-bottom: 4px;
}
.radio-group > .hint { margin: 0 0 12px; }
.radio-group .radio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--slate-200);
  /* Same reset as `.form .check` so the <label> itself doesn't inherit
   * eyebrow styling (affects cursor, not text since text lives in the
   * inner span, but keeps the label as a clean body-text container). */
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate-800);
  line-height: 1.5;
  cursor: pointer;
}
.radio-group .radio:last-child { border-bottom: 0; }
.radio-group .radio input[type="radio"] {
  /* Match the checkbox sizing + ink-black accent used on `.form .check`
   * so the control reads as part of the same form system, not a raw
   * browser-default blue radio. */
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  accent-color: var(--ink);
  flex-shrink: 0;
}
.radio-group .radio__label {
  /* Explicitly override the inherited mono-caps-bold from `.form label`
   * so the description renders as body text. */
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--slate-800);
}

/* --- Utility classes added 2026-04-28 (item W: strict CSP)
   Replace inline `style=` attributes so CSP can drop `'unsafe-inline'`
   from style-src. Class names match the patterns these styles
   represented. */
.u-hint-narrow {
  max-width: 62ch;
}
.u-hint-narrow-mt-1 {
  max-width: 62ch;
  margin-top: 1rem;
}
.u-hint-narrow-mb-1 {
  max-width: 62ch;
  margin-bottom: 1rem;
}
.u-mt-1 {
  margin-top: 1rem;
}
.u-mt-1_5 {
  margin-top: 1.5rem;
}
.u-mt-4 {
  margin-top: 4rem;
}
.u-text-center {
  text-align: center;
}
.u-mono-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
.u-mono-eyebrow-muted {
  font-size: 0.75rem;
  color: var(--slate-500);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
.u-mono-tier-meta {
  color: var(--slate-600);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Honeypot positioning: off-screen so screen readers + sighted users
   never see the field, but the DOM still includes it. CSP-safe class
   replacing the previous inline style. The other honeypot defense
   layers (timestamp threshold, aria-hidden, no autofocus, label hidden
   from a11y) remain in place. */
.honeypot-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Phase 2 brand-repeater (start.html only). Moved from inline <style> on
   2026-04-29 to honor strict CSP style-src 'self'. Uses existing design
   tokens (--ink, --paper, --accent, --slate-500) with var() fallbacks
   for safety in case any token is missing at runtime. */
.brands-fieldset { display: block; }
.brand-block {
  border: 1.5px solid var(--ink, #000);
  background: #fff;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.brand-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 16px;
}
.brand-block-header .brand-label {
  font-family: "Helvetica Neue", "Arial Black", Helvetica, sans-serif;
  font-size: 18px;
  margin: 0;
}
.brand-block-header .remove-brand {
  background: none;
  border: 1px solid var(--slate-500, #6e6e6e);
  color: var(--slate-500, #6e6e6e);
  padding: 4px 12px;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.brand-block-header .remove-brand:hover {
  border-color: var(--accent, #CC0000);
  color: var(--accent, #CC0000);
}
.add-brand-btn {
  display: block;
  width: 100%;
  border: 1.5px dashed var(--ink, #000);
  background: transparent;
  padding: 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 8px;
}
.add-brand-btn:hover {
  background: var(--paper, #f4f3ef);
  border-color: var(--accent, #CC0000);
  color: var(--accent, #CC0000);
}
.add-brand-btn[hidden] { display: none; }

/* ---------- Pricing matrix (Variant A, 2026-05-01) ----------------- */
/* Replaces the 3-card .pricing layout on /pricing.html. Single feature
   matrix; tier diff = scope volume + Playbook deliverable + Enterprise
   multi-brand. Aligned with the post-unify pipeline (PR #60 + #51,
   2026-05-01) where all tiers share one Audit Report PDF design. */
.pmatrix-intro {
  margin: 0 0 1.25rem;
  max-width: 780px;
}
.pmatrix {
  border: var(--rule-thick);
  background: var(--paper-white);
  margin-top: 0.5rem;
  width: 100%;
  overflow-x: auto;
}
.pmatrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 720px;
}
.pmatrix thead th {
  text-align: left;
  vertical-align: top;
  padding: 1rem 0.875rem;
  background: var(--paper);
  border-bottom: var(--rule-thick);
}
.pmatrix .pmatrix-th-feature { width: 28%; }
.pmatrix .pmatrix-th-tier { width: 24%; }
.pmatrix .pmatrix-tag {
  display: inline-block;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-600);
  margin-bottom: 0.375rem;
}
.pmatrix .pmatrix-feature-note {
  display: block;
  font-size: 0.75rem;
  color: var(--slate-700);
  font-weight: 600;
  line-height: 1.4;
}
.pmatrix thead h2 {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.pmatrix .pmatrix-price {
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}
.pmatrix .pmatrix-price sup {
  font-size: 0.55em;
  vertical-align: top;
  margin-right: 0.05em;
  font-weight: 700;
}
.pmatrix .pmatrix-price .pmatrix-per {
  font-size: 0.45em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--slate-600);
  margin-left: 0.1em;
}
.pmatrix .pmatrix-th-tier--featured {
  background: var(--paper-white);
  border-top: 5px solid var(--accent);
}
.pmatrix .pmatrix-th-tier--featured .pmatrix-tag {
  color: var(--accent);
  font-weight: 800;
}
.pmatrix .pmatrix-most-pick {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 800;
  margin-bottom: 0.375rem;
}
.pmatrix tbody .pmatrix-row-band td {
  background: var(--ink);
  color: var(--paper);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  padding: 0.5rem 0.875rem;
}
.pmatrix tbody td {
  padding: 0.75rem 0.875rem;
  vertical-align: top;
  border-bottom: 1px solid var(--slate-200);
  font-size: 0.8125rem;
}
.pmatrix .pmatrix-feature {
  font-weight: 700;
  color: var(--ink);
}
.pmatrix .pmatrix-cell {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink);
}
.pmatrix .pmatrix-cell--featured { background: rgba(204, 0, 0, 0.04); }
.pmatrix .pmatrix-yes { color: #2a7d31; font-weight: 800; }
.pmatrix .pmatrix-no { color: var(--slate-500); }
.pmatrix .pmatrix-num { font-weight: 800; }
.pmatrix .pmatrix-note {
  display: block;
  font-size: 0.6875rem;
  color: var(--slate-600);
  margin-top: 0.125rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.pmatrix tfoot .pmatrix-cta-row td {
  padding: 1.125rem 0.875rem;
  background: var(--paper);
  border-top: var(--rule-thick);
  text-align: center;
}

/* Mobile (<= 720px): convert the table into a feature-first stacked
   layout. Each tier-cell shows its tier label inline via a CSS
   ::before pseudo-element keyed off positional :nth-of-type, so no
   data-label attributes are needed in the HTML. The 3 tier headers
   stack vertically; band rows keep their black-fill horizontal style;
   CTA buttons stack full-width. */
@media (max-width: 720px) {
  .pmatrix { overflow-x: visible; }
  .pmatrix table { min-width: 0; width: 100%; }
  .pmatrix table,
  .pmatrix thead,
  .pmatrix tbody,
  .pmatrix tfoot,
  .pmatrix thead tr,
  .pmatrix tbody tr,
  .pmatrix tfoot tr,
  .pmatrix th,
  .pmatrix td { display: block; }

  /* Header: hide feature column header; tier headers stack */
  .pmatrix thead .pmatrix-th-feature { display: none; }
  .pmatrix thead tr { border-bottom: var(--rule-thick); }
  .pmatrix thead .pmatrix-th-tier {
    width: auto;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--slate-300);
    border-bottom: none;
  }
  /* Preserve the featured-tier 5px red accent on mobile too */
  .pmatrix thead .pmatrix-th-tier--featured {
    border-top: 5px solid var(--accent);
  }
  .pmatrix thead .pmatrix-th-tier h2 {
    display: inline-block;
    margin: 0 0.5rem 0 0;
    vertical-align: middle;
  }
  .pmatrix thead .pmatrix-price {
    display: inline-block;
    font-size: 1.25rem;
    vertical-align: middle;
  }
  .pmatrix thead .pmatrix-tag,
  .pmatrix thead .pmatrix-most-pick {
    display: block;
    margin: 0 0 0.25rem;
  }

  /* Body: feature label as a row header; tier cells stack with
     ::before tier name surfaced via positional :nth-of-type. */
  .pmatrix tbody tr:not(.pmatrix-row-band) {
    padding: 0.625rem 0 0.5rem;
    border-bottom: 1px solid var(--slate-200);
  }
  .pmatrix tbody .pmatrix-row-band td {
    padding: 0.5rem 1rem;
    border-bottom: none;
  }
  .pmatrix tbody .pmatrix-feature {
    padding: 0 1rem 0.375rem;
    border-bottom: none;
  }
  .pmatrix tbody .pmatrix-cell {
    padding: 0.25rem 1rem;
    border-bottom: none;
    background: transparent;
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: baseline;
    gap: 0.5rem;
  }
  .pmatrix tbody .pmatrix-cell--featured {
    background: rgba(204, 0, 0, 0.04);
  }
  .pmatrix tbody .pmatrix-cell:nth-of-type(2)::before { content: "Citation Monitor"; }
  .pmatrix tbody .pmatrix-cell:nth-of-type(3)::before { content: "SXO Audit"; }
  .pmatrix tbody .pmatrix-cell:nth-of-type(4)::before { content: "Enterprise"; }
  .pmatrix tbody .pmatrix-cell::before {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate-600);
    font-weight: 700;
  }
  .pmatrix tbody .pmatrix-cell .pmatrix-note {
    grid-column: 2;
    margin-top: 0.125rem;
  }

  /* CTA row: stack 3 full-width buttons; hide the empty feature-column cell */
  .pmatrix tfoot .pmatrix-cta-row {
    border-top: var(--rule-thick);
    padding: 0.875rem 0;
    background: var(--paper);
  }
  .pmatrix tfoot .pmatrix-cta-row td {
    padding: 0.375rem 1rem;
    background: transparent;
    border-top: none;
    text-align: center;
  }
  .pmatrix tfoot .pmatrix-cta-row td:first-child { display: none; }
  .pmatrix tfoot .pmatrix-cta-row .btn {
    display: block;
    width: 100%;
  }
}