/* Visitor Simulator landing site: landing, request, sent, legal and not-found pages.
   Light, minimal: big tight headlines, black pill buttons, soft grey surfaces. The one brand cue
   carried over is the logo (dotted blue route, ringed start, orange goal) and its two colours.
   Light only. Contrast figures are against white unless noted.
   No inline styles anywhere: the CSP is style-src 'self'. */

@font-face {
  font-family: "Geist";
  src: url("/landing/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/landing/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #0d1017;         /* headings, primary buttons, 19:1 */
  --ink-hover: #2a2f3a;
  --text: #3a404c;        /* body, 10.6:1 */
  --text-2: #4a505c;      /* leads, 8.3:1 */
  --muted: #6b7280;       /* small labels, 4.8:1 */
  --line: #e8eaee;
  --line-soft: #eef0f3;
  --surface: #f6f7f9;
  --fill: #f2f3f5;
  --fill-hover: #e7e9ec;
  --route: #2a60dc;       /* links, phone visitors, "reached" */
  --route-light: #6f8fe8;
  --goal: #f0643c;        /* graphics only, never body text on white */
  --dark-muted: #8b93a3;  /* on ink, 6.5:1 */
  --dark-text: #c3c8d1;   /* on ink, 11.6:1 */
  --dark-line: #262c39;
  --err-line: #d4532c;
  --err-text: #b3330f;    /* 6.3:1 */
  --err-bg: #fdeee8;
  --shell: min(1240px, calc(100% - 48px));
  --wide: min(1320px, calc(100% - 32px));
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--font);
  font-size-adjust: from-font;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

a {
  color: var(--route);
  text-underline-offset: 3px;
}

a:hover {
  color: #1d4bb8;
}

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

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

[hidden] {
  display: none !important;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.wide {
  width: var(--wide);
  margin-inline: auto;
}

/* Bots fill .hp in; people never see it. .sr-only is read aloud and never drawn. */
.hp,
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 30;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
  color: #fff;
}

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.display {
  font-size: clamp(52px, 8.4vw, 120px);
  line-height: 0.96;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: var(--ink);
  max-width: 11ch;
  text-wrap: balance;
}

.h2 {
  margin-top: 20px;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}

.h2-narrow {
  max-width: 15ch;
}

.lead {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 36em;
  text-wrap: pretty;
}

.fine,
.note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font: 500 15px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-sm { height: 44px; padding: 0 20px; font-size: 14px; gap: 0; }
.btn-md { height: 52px; padding: 0 24px; font-size: 15px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }
.btn-xl { height: 60px; padding: 0 32px; font-size: 16px; }

.btn-primary,
.btn-primary:hover {
  color: #fff;
}

.btn-primary { background: var(--ink); }
.btn-primary:hover { background: var(--ink-hover); }

.btn-secondary,
.btn-secondary:hover,
.btn-light,
.btn-light:hover {
  color: var(--ink);
}

.btn-secondary { background: var(--fill); }
.btn-secondary:hover { background: var(--fill-hover); }
.btn-light { background: #fff; }
.btn-light:hover { background: var(--fill-hover); }

/* The trailing arrow is decoration: drawn by CSS, so it is never read aloud and survives the
   request page swapping a button's text. */
.btn-arrow::after {
  content: "→";
  content: "→" / "";
  font-size: 1.1em;
}

button.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 255 255 / 0.82);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
}

@media (prefers-reduced-transparency: reduce) {
  .header {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--line);
  }
}

.header-in {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
}

.brand:hover {
  color: var(--ink);
}

.brand-mark {
  flex: none;
}

.brand-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 4px;
}

.nav a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  font-weight: 450;
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover {
  background: var(--fill);
  color: var(--ink);
}

/* "Robles Consulting" placements: the wordmark beside a short line. */
.by-rc {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.by-rc img {
  display: block;
  height: 24px;
  width: auto;
}

/* ---------- hero ---------- */

.hero {
  padding-top: 88px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-copy .lead {
  margin-top: 28px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
}

.hero-copy .fine {
  margin-top: 20px;
}

.hero-copy .by-rc {
  margin-top: 14px;
}

.stage {
  position: relative;
  margin-top: 72px;
  padding: 12px;
  border-radius: 28px;
  background: var(--surface);
}

.stage-window {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgb(13 16 23 / 0.05), 0 30px 80px -40px rgb(13 16 23 / 0.35);
}

.stage-bar {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-soft);
}

.stage-dots {
  display: flex;
  gap: 6px;
}

.stage-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e3e6ea;
}

.stage-address {
  flex: 1;
  max-width: 300px;
  margin-inline: auto;
  height: 26px;
  border-radius: 999px;
  background: var(--fill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
}

.stage-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.stage-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--route);
  box-shadow: 0 0 0 4px rgb(42 96 220 / 0.15);
}

.stage-body {
  position: relative;
  aspect-ratio: 16 / 8.6;
  container-type: inline-size;
  overflow: hidden;
  background: #fff;
}

.sim-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

/* The invented website, "Lumen Physio". Everything in cqw so it scales like a picture. */
.mock {
  position: absolute;
  inset: 0;
  padding: 2cqw 3cqw 2.4cqw;
  display: flex;
  flex-direction: column;
  gap: 1.8cqw;
  font-size: 1.1cqw;
  line-height: 1.3;
  color: #4b5653;
  user-select: none;
}

.mock b {
  font-weight: inherit;
}

.m-nav {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  font-size: 1.05cqw;
  color: #13201e;
}

.m-logo {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  margin-right: auto;
  font-size: 1.45cqw;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.m-logo i {
  width: 1.7cqw;
  height: 1.7cqw;
  border-radius: 50%;
  background: linear-gradient(90deg, #0f4c45 50%, #7fb8a8 50%);
}

.m-contact {
  padding: 0.75cqw 1.7cqw;
  border-radius: 999px;
  background: #13201e;
  color: #fff;
  font-weight: 500;
}

.m-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3cqw;
  align-items: center;
  padding: 2.8cqw 3cqw;
  border-radius: 1.6cqw;
  background: #f3efe8;
}

.m-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
}

.m-kicker {
  font-size: 0.85cqw;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #0f4c45;
}

.m-h1 {
  font-size: 4cqw;
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: #13201e;
}

.m-text {
  font-size: 1.2cqw;
  line-height: 1.45;
  max-width: 30em;
}

.m-ctas {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  margin-top: 0.4cqw;
}

.m-btn {
  padding: 0.9cqw 1.9cqw;
  border-radius: 999px;
  background: #0f4c45;
  color: #fff;
  font-size: 1.1cqw;
  font-weight: 500;
}

.m-btn-ghost {
  background: none;
  border: 1px solid #c9c2b5;
  color: #13201e;
}

.m-stars {
  font-size: 0.95cqw;
}

.m-stars b {
  color: #d99a1e;
  letter-spacing: 0.1em;
}

.m-appt {
  display: flex;
  flex-direction: column;
  gap: 1cqw;
  padding: 1.8cqw;
  border-radius: 1.3cqw;
  background: #fff;
  box-shadow: 0 1cqw 3cqw -1.5cqw rgb(19 32 30 / 0.25);
}

.m-small {
  font-size: 0.88cqw;
  color: #6c7573;
}

.m-time {
  font-size: 1.9cqw;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #13201e;
}

.m-doc {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0.8cqw 0;
  border-block: 1px solid #eee9e0;
}

.m-avatar {
  width: 2.6cqw;
  height: 2.6cqw;
  flex: none;
  border-radius: 50%;
  background: #dcebe6;
  color: #0f4c45;
  display: grid;
  place-items: center;
  font-size: 0.9cqw;
  font-weight: 600;
}

.m-doc-text {
  display: flex;
  flex-direction: column;
  font-size: 0.85cqw;
  color: #6c7573;
}

.m-doc-text b {
  font-size: 1.05cqw;
  font-weight: 550;
  color: #13201e;
}

.m-slots {
  display: flex;
  gap: 0.6cqw;
}

.m-slots span {
  flex: 1;
  text-align: center;
  padding: 0.6cqw 0;
  border-radius: 0.6cqw;
  border: 1px solid #e3ddd2;
  font-size: 0.95cqw;
  color: #13201e;
}

.m-slots .is-on {
  background: #0f4c45;
  border-color: #0f4c45;
  color: #fff;
}

.m-cards {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6cqw;
}

.m-card {
  display: flex;
  flex-direction: column;
  gap: 0.6cqw;
  padding: 1.6cqw;
  border: 1px solid #e8e3da;
  border-radius: 1.3cqw;
}

.m-tag {
  align-self: flex-start;
  padding: 0.3cqw 0.8cqw;
  border-radius: 999px;
  background: #f3efe8;
  color: #0f4c45;
  font-size: 0.8cqw;
  font-weight: 500;
}

.m-card-title {
  font-size: 1.4cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #13201e;
}

.m-card-text {
  font-size: 0.95cqw;
  line-height: 1.4;
}

.m-card-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-price {
  font-size: 1.3cqw;
  font-weight: 600;
  color: #13201e;
}

.m-price small {
  font-size: 0.85cqw;
  font-weight: 400;
  color: #6c7573;
}

.m-book {
  padding: 0.6cqw 1.4cqw;
  border-radius: 999px;
  background: #0f4c45;
  color: #fff;
  font-size: 0.95cqw;
}

/* The cookie banner that covers the free consultation's Book button. */
.m-banner {
  position: absolute;
  left: 2cqw;
  bottom: 1.4cqw;
  width: 63%;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 1.6cqw 1.8cqw;
  border-radius: 1.3cqw;
  background: #13201e;
  box-shadow: 0 1.5cqw 4cqw -1.5cqw rgb(0 0 0 / 0.45);
  user-select: none;
}

.m-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4cqw;
  font-size: 0.95cqw;
  line-height: 1.45;
  color: #b9c4c1;
}

.m-banner-text b {
  font-size: 1.15cqw;
  font-weight: 600;
  color: #fff;
}

.m-banner-btn {
  padding: 0.75cqw 1.5cqw;
  border-radius: 999px;
  border: 1px solid #3d4f4b;
  color: #fff;
  font-size: 1cqw;
  white-space: nowrap;
}

.m-banner-btn.is-solid {
  background: #fff;
  border-color: #fff;
  color: #13201e;
  font-weight: 500;
}

.stage-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding: 18px 12px 6px;
  font-size: 13px;
  color: var(--text-2);
}

.stage-legend b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.legend-count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.legend-count b {
  font-weight: 400;
}

.legend-item,
.legend-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-keys {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--muted);
}

.legend-key {
  gap: 6px;
}

.dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot-route { background: var(--route); }
.dot-goal { background: var(--goal); }
.dot-ring { border: 1.5px solid var(--ink); }

.touch-key {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--route);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgb(42 96 220 / 0.16);
}

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

.section {
  padding-top: 160px;
}

.section-lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 30em;
  text-wrap: pretty;
}

.split-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px 64px;
  align-items: end;
}

/* How it works */
.steps {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  padding: 36px 32px 40px;
  border-radius: 28px;
  background: var(--surface);
}

.step-n {
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.06em;
  font-weight: 400;
  color: #c9ced6;
  font-variant-numeric: tabular-nums;
}

.step h3 {
  margin-top: auto;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--ink);
}

.step p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
}

.step-ink { background: var(--ink); }
.step-ink .step-n { color: var(--goal); }
.step-ink h3 { color: #fff; }
.step-ink p { color: var(--dark-text); }

/* Visitors */
.people {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.person {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 28px;
}

.person p {
  font-size: 16px;
  line-height: 1.55;
}

.person-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 600;
}

.avatar-blue { background: #e9effc; color: var(--route); }
.avatar-orange { background: var(--err-bg); color: #c2441f; }
.avatar-grey { background: var(--line-soft); color: var(--ink); }

.person-id {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.person-id strong {
  font-size: 19px;
  font-weight: 550;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.person-id span {
  font-size: 13px;
  color: var(--muted);
}

.person .person-goal {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.goal-chips {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.goal-chips-label {
  margin-right: 8px;
  font-size: 14px;
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips li {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--fill);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}

.chips .chip-own {
  padding: 7px 15px;
  background: none;
  border: 1px dashed #b9c0cb;
  color: var(--route);
  font-weight: 500;
}

#visitors .note {
  margin-top: 16px;
}

/* What they catch */
.catches {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  border-top: 1px solid var(--line);
}

.catches li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 32px 40px 0;
  border-bottom: 1px solid var(--line);
}

.catches h3 {
  margin-top: 8px;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
}

.catches p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 28em;
}

.line-icon {
  fill: none;
  stroke: var(--route);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Report */
.panel {
  border-radius: 40px;
  background: var(--surface);
  padding: clamp(32px, 6vw, 88px) clamp(24px, 5vw, 72px);
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px;
  align-items: center;
}

.numbered {
  margin-top: 36px;
  border-top: 1px solid #e3e6ea;
}

.numbered li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e3e6ea;
  font-size: 16px;
  line-height: 1.5;
}

.numbered li span {
  flex: none;
  padding-top: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.share-note {
  margin: 28px 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 30em;
}

.report-figure .note {
  margin-top: 14px;
  text-align: center;
}

.report-card {
  padding: 28px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(13 16 23 / 0.04), 0 40px 80px -48px rgb(13 16 23 / 0.35);
}

.rc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.rc-site {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rc-site strong {
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.rc-site span {
  font-size: 13px;
  color: var(--muted);
}

.rc-date {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--fill);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
}

.rc-score {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

.score-ring {
  position: relative;
  flex: none;
  width: 112px;
  height: 112px;
}

.score-ring svg {
  display: block;
}

.ring-track { fill: none; stroke: var(--line-soft); stroke-width: 10; }
.ring-fill { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: round; }

.score-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.rc-outcomes {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rc-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--text-2);
}

.rc-row b {
  font-weight: 600;
  color: var(--ink);
}

.outcome-bar {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}

.ob-reached { flex: 11; background: var(--route); }
.ob-gave { flex: 3; background: var(--goal); }
.ob-blocked { flex: 1; background: #c9ced6; }

.rc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  color: var(--muted);
}

.rc-findings {
  margin-top: 24px;
  display: grid;
  gap: 8px;
}

.rc-findings li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  font-size: 14px;
  line-height: 1.4;
}

.f-text { color: var(--ink); }

.f-count {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

/* Severity carries its name in words; the tint only repeats it. */
.sev {
  min-width: 48px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

.sev-high { background: #fde7df; color: #9a2f12; }
.sev-med { background: #fdf1d8; color: #7a4d00; }
.sev-low { background: #eceef1; color: var(--text); }

/* Safety */
.safety {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.safety li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
  border-radius: 28px;
  background: var(--surface);
}

.icon-well {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
}

.icon-well svg {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-well .slash {
  stroke: var(--goal);
}

.safety h3 {
  margin-top: 24px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
}

.safety p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}

/* Pricing */
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px;
  align-items: end;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}

.pricing-text {
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 30em;
}

.pricing-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.from {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}

.from span {
  font-size: 16px;
  color: var(--muted);
}

.from strong {
  font-size: clamp(88px, 11vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* FAQ */
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 48px 80px;
  align-items: start;
}

.faq-list {
  min-width: 0;
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  border-radius: 6px;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  content: "+" / "";
  flex: none;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-list details p {
  padding: 0 0 28px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 40em;
}

/* Closing call to action */
.section-last {
  padding-bottom: 0;
}

.cta-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: clamp(56px, 9vw, 128px) clamp(24px, 5vw, 72px);
  border-radius: 40px;
  background: var(--ink);
  text-align: center;
}

.cta-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;
}

.cta-title {
  font-size: clamp(44px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: #fff;
  max-width: 12ch;
  text-wrap: balance;
}

.cta-panel > p {
  font-size: 18px;
  line-height: 1.55;
  color: #b7bdc8; /* 9.6:1 on ink */
  max-width: 32em;
}

.cta-panel :focus-visible {
  outline-color: #fff;
}

.cta-panel .cta-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  color: var(--dark-muted);
}

/* The wordmark is drawn for light backgrounds, so on ink it sits on its own white plate. */
.logo-plate {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
}

.logo-plate img {
  display: block;
  height: 28px;
  width: auto;
}

/* ---------- footer ---------- */

.footer {
  padding: 72px 0 48px;
}

.page-request .footer,
.legal ~ .footer {
  border-top: 1px solid var(--line-soft);
  padding-top: 48px;
}

.footer-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
}

.footer-brand {
  border-radius: 6px;
}

.footer-brand img {
  display: block;
  height: 36px;
  width: auto;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-right: auto;
}

.footer-links a,
.footer-link {
  padding: 10px 0;
  color: var(--text-2);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
}

/* "Cookie settings": a button styled as the links beside it, revealed by consent.js so it
   never shows dead without JavaScript. */
.footer-link {
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 6px;
}

.footer-links a:hover,
.footer-link:hover {
  color: var(--ink);
}

.copy {
  font-size: 13px;
  color: var(--muted);
}

/* ---------- cookie choice (built by consent.js) ----------
   Two equal buttons: rejecting is exactly as easy as accepting. */
.consent {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  width: min(420px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 20px 22px;
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgb(13 16 23 / 0.05), 0 30px 80px -30px rgb(13 16 23 / 0.4);
}

.consent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.consent h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.consent h2:focus {
  outline: none;
}

.consent p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.consent .consent-status {
  font-size: 13px;
  color: var(--muted);
}

.consent-close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.consent-close:hover {
  background: var(--fill-hover);
}

.consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.consent-actions button {
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 500 14px/1.2 var(--font);
  cursor: pointer;
}

.consent-actions button:hover {
  background: var(--ink-hover);
}

@media print {
  .consent { display: none; }
}

/* ---------- request page ---------- */

.request {
  padding: 72px 0 140px;
}

.request-head {
  max-width: 880px;
}

.request-title {
  margin-top: 20px;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}

.request-head .lead {
  margin-top: 24px;
  font-size: 19px;
  max-width: 34em;
}

.request-head .by-rc {
  margin-top: 20px;
  justify-content: flex-start;
}

.request-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 40px;
  align-items: start;
}

.request-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.form-alert {
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--err-bg);
  color: #8a2a0f; /* 7.6:1 on the tint */
  font-size: 15px;
  font-weight: 500;
}

.block {
  margin: 0;
  min-width: 0;
  padding: clamp(24px, 3.5vw, 40px);
  border: 0;
  border-radius: 28px;
  background: var(--surface);
}

.block > legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
  padding: 0;
}

.block > legend + * {
  clear: both;
}

.block-n {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.block-title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}

fieldset.field {
  margin: 28px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

fieldset.field > legend {
  padding: 0;
}

.field {
  display: grid;
  align-content: start;
  gap: 8px;
  margin-bottom: 20px;
}

.field:last-child {
  margin-bottom: 0;
}

.field label,
.sub-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

fieldset.field > .sub-label {
  margin-bottom: 12px;
}

/* A label with a quiet note on the right: "Business name ... Optional". */
.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.optional {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.block > .hint {
  margin: -8px 0 20px;
}

.error {
  font-size: 13px;
  font-weight: 500;
  color: var(--err-text);
}

/* Text fields: the 1.5px edge is 1.4:1 on grey, so focus and error carry a stronger edge. */
.input,
.request textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 18px;
  border: 1.5px solid #dfe2e7;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition: border-color 0.15s ease;
}

.input-xl {
  min-height: 60px;
  padding-inline: 20px;
  border-radius: 16px;
  font-size: 18px;
}

.request textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

.input:hover,
.request textarea:hover {
  border-color: #b9c0cb;
}

.input::placeholder,
.request textarea::placeholder {
  color: #858b96; /* 3.6:1, placeholder only */
}

.input:focus,
.request textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.input:focus-visible,
.request textarea:focus-visible {
  box-shadow: 0 0 0 3px rgb(42 96 220 / 0.25);
}

.input[aria-invalid="true"],
.request textarea[aria-invalid="true"] {
  border-color: var(--err-line);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  align-items: start;
  gap: 16px;
  margin-bottom: 20px;
}

.field-row .field {
  margin-bottom: 0;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
}

.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--ink);
}

.check:has(input[aria-invalid="true"]) input {
  outline: 2px solid var(--err-line);
  outline-offset: 2px;
}

#permission-error {
  margin-top: 8px;
}

/* Goal tiles. The native checkbox stays in place, invisible, so keyboard, forms and screen
   readers work as usual; the round check is its picture. Browsers without :has() see the box. */
.options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 10px;
}

.option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  border: 1.5px solid #fff;
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.option:hover {
  border-color: #9aa1ad;
}

.option input {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ink);
}

.option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 28px;
}

.option-head strong {
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.option-desc {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}

.option-check {
  display: none;
}

@supports selector(:has(*)) {
  .option input {
    opacity: 0;
  }

  .option-check {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #c9ced6;
    background: #fff;
  }

  .option:has(input:checked) {
    border-color: var(--ink);
  }

  .option:has(input:checked) .option-check {
    border-color: var(--ink);
    background: var(--ink);
  }

  .option:has(input:checked) .option-check::after {
    content: "";
    width: 8px;
    height: 4.5px;
    margin-top: -2px;
    border-left: 1.8px solid #fff;
    border-bottom: 1.8px solid #fff;
    transform: rotate(-45deg);
  }

  .option:has(input:focus-visible) {
    outline: 3px solid var(--route);
    outline-offset: 2px;
  }
}

.own-goals {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.link-btn {
  justify-self: start;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--route);
  font: 500 14px/1.4 var(--font);
  cursor: pointer;
  border-radius: 6px;
}

.link-btn:hover {
  color: #1d4bb8;
}

#goals-error {
  margin-top: 12px;
}

/* Visitors */
.range-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.range-head output {
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.range {
  width: 100%;
  height: 32px;
  margin: 4px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.range-ticks {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

/* Devices: a pill group (five closely related, mutually exclusive choices) over a drawing of
   the split. Native radios underneath, so keyboard and screen readers work as usual. */
.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  border-radius: 26px;
  background: #fff;
}

.segmented label {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented label:hover {
  background: var(--fill);
  color: var(--ink);
}

.segmented input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented label:has(input:checked) {
  background: var(--ink);
  color: #fff;
}

.segmented label:has(input:focus-visible) {
  outline: 3px solid var(--route);
  outline-offset: 2px;
}

.mix {
  margin-top: 18px;
}

.mix-bar {
  display: flex;
  gap: 3px;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
}

.seg {
  flex: 0 0 0;
  transition: flex-grow 0.3s ease;
}

.seg-phone { background: var(--route); }
.seg-desktop { background: var(--ink); }
.seg-tablet { background: var(--goal); }

.mix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-2);
}

.mix-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mix-key::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.key-phone::before { background: var(--route); }
.key-desktop::before { background: var(--ink); }
.key-tablet::before { background: var(--goal); }

.mix-key b {
  display: none;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* The checked radio decides the widths and the numbers. */
.devices:has([value="mobile_first"]:checked) .seg-phone { flex-grow: 60; }
.devices:has([value="mobile_first"]:checked) .seg-desktop { flex-grow: 30; }
.devices:has([value="mobile_first"]:checked) .seg-tablet { flex-grow: 10; }
.devices:has([value="balanced"]:checked) .seg-phone { flex-grow: 45; }
.devices:has([value="balanced"]:checked) .seg-desktop { flex-grow: 45; }
.devices:has([value="balanced"]:checked) .seg-tablet { flex-grow: 10; }
.devices:has([value="desktop_heavy"]:checked) .seg-phone { flex-grow: 25; }
.devices:has([value="desktop_heavy"]:checked) .seg-desktop { flex-grow: 65; }
.devices:has([value="desktop_heavy"]:checked) .seg-tablet { flex-grow: 10; }
.devices:has([value="phones_only"]:checked) .seg-phone { flex-grow: 1; }
.devices:has([value="desktop_only"]:checked) .seg-desktop { flex-grow: 1; }
.devices:has([value="mobile_first"]:checked) b[data-mix="mobile_first"],
.devices:has([value="balanced"]:checked) b[data-mix="balanced"],
.devices:has([value="desktop_heavy"]:checked) b[data-mix="desktop_heavy"],
.devices:has([value="phones_only"]:checked) b[data-mix="phones_only"],
.devices:has([value="desktop_only"]:checked) b[data-mix="desktop_only"] {
  display: inline;
}

/* Extras: switch rows. Same trick as the tiles: the real checkbox covers the row, invisible. */
.toggle {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  padding: 20px;
  border: 1.5px solid #fff;
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.toggle:last-child {
  margin-bottom: 0;
}

.toggle input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--ink);
}

.switch {
  display: none;
}

.toggle-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}

.toggle-body strong {
  font-size: 16px;
  font-weight: 550;
  color: var(--ink);
}

@supports selector(:has(*)) {
  .toggle input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .switch {
    position: relative;
    display: block;
    flex: none;
    width: 44px;
    height: 26px;
    margin-top: 1px;
    border-radius: 999px;
    background: #d4d9e0;
    transition: background-color 0.2s ease;
  }

  .switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
    transition: transform 0.2s ease;
  }

  .toggle:has(input:checked) {
    border-color: var(--ink);
  }

  .toggle:has(input:checked) .switch {
    background: var(--ink);
  }

  .toggle:has(input:checked) .switch::after {
    transform: translateX(18px);
  }

  .toggle:has(input:focus-visible) {
    outline: 3px solid var(--route);
    outline-offset: 2px;
  }
}

.toggle:hover {
  border-color: #9aa1ad;
}

.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--err-bg);
  color: #9a2f12; /* 6.9:1 on the tint */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 2px;
  white-space: nowrap;
}

.reveal {
  margin: 0 4px 16px;
}

/* Submit */
.submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-top: 12px;
}

.submit-row .fine {
  font-size: 14px;
  max-width: 30em;
}

/* "Is this your website?" */
.site-preview {
  display: grid;
  gap: 10px;
  margin: -4px 0 20px;
}

.site-preview.is-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}

.sp-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d4d9e0;
  border-top-color: var(--ink);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.sp-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
}

.sp-thumb {
  flex: none;
  width: 96px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: #eceef1;
}

/* No share picture: a drawn page stands in. */
.sp-thumb-blank {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px;
}

.sp-thumb-blank i {
  height: 6px;
  width: 40%;
  border-radius: 3px;
  background: #d4d9e0;
}

.sp-thumb-blank i:nth-child(2) { height: 14px; width: 80%; background: #dfe3e9; }
.sp-thumb-blank i:nth-child(3) { height: 5px; width: 60%; background: #e4e7eb; }

.sp-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-label {
  font-size: 12px;
  color: var(--muted);
}

.sp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 550;
  color: var(--ink);
  min-width: 0;
}

.sp-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-icon {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
}

.sp-url {
  font-size: 13px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.sp-reach {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #1f7a4a; /* 5.3:1 */
}

.sp-reach::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1f9d5a;
}

.sp-desc {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-head .sp-label {
  font-size: 13px;
}

.sp-notes {
  display: grid;
  gap: 8px;
}

/* The words carry the meaning; the tint and the icon repeat it. */
.sp-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.sp-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sp-note--info { background: #e9effc; color: #1d4bb8; }    /* 6.1:1 */
.sp-note--caution { background: #fdf1d8; color: #7a4d00; } /* 6.9:1 */
.sp-note--warn { background: var(--err-bg); color: #8a2a0f; } /* 7.6:1 */

.sp-hint {
  font-size: 13px;
  color: var(--muted);
}

/* Estimate aside */
.estimate {
  position: sticky;
  top: 96px;
  min-width: 0;
}

.estimate-card {
  padding: 32px;
  border-radius: 28px;
  background: var(--ink);
  color: var(--dark-text);
}

.estimate-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-muted);
}

.estimate-price {
  margin-top: 14px;
  font-size: clamp(64px, 7vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-weight: 400;
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.15s ease;
}

.estimate-price.is-updating {
  opacity: 0.45;
}

.estimate-split {
  margin-top: 14px;
  font-size: 14px;
}

.estimate-split b {
  color: #fff;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.badge-dark {
  background: rgb(240 100 60 / 0.16);
  color: #ffb59c; /* 9:1 on ink */
}

.estimate-note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark-muted);
}

.estimate-summary {
  margin: 28px 0 0;
  border-top: 1px solid var(--dark-line);
}

.estimate-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dark-line);
  font-size: 14px;
}

.estimate-summary dt {
  color: var(--dark-muted);
}

.estimate-summary dd {
  margin: 0;
  color: #fff;
  font-weight: 500;
  text-align: right;
}

.estimate-included-label {
  margin-top: 24px;
  font-size: 13px;
  color: var(--dark-muted);
}

.dots-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: #e6e8ec;
}

.dots-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dots-list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--goal);
}

.estimate-send {
  width: 100%;
  margin-top: 28px;
}

.estimate-card :focus-visible {
  outline-color: #fff;
}

.estimate-fine {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--dark-muted);
}

.estimate-bar {
  display: none;
}

/* ---------- request sent ---------- */

.sent {
  width: min(760px, calc(100% - 48px));
  padding: 120px 0 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.sent-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--err-bg);
  display: grid;
  place-items: center;
}

.sent-badge i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--goal);
}

.sent-title {
  font-size: clamp(44px, 6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  font-weight: 500;
  color: var(--ink);
}

.sent .lead {
  max-width: 30em;
}

.sent-steps {
  margin-top: 12px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  padding: 24px 28px;
  border-radius: 24px;
  background: var(--surface);
  text-align: left;
}

.sent-steps li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sent-steps span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.sent-steps b {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 550;
  color: var(--ink);
}

.sent .actions {
  margin-top: 8px;
}

.sent .by-rc {
  margin-top: 16px;
}

/* ---------- legal pages ---------- */

.legal {
  max-width: 780px;
  padding: 72px 0 120px;
}

.legal h1 {
  margin-top: 20px;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 500;
  color: var(--ink);
}

.legal .lead {
  margin-top: 24px;
}

.legal .updated {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.legal h2 {
  margin: 56px 0 14px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}

.legal h3 {
  margin: 28px 0 8px;
  font-size: 19px;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--ink);
}

.legal p,
.legal li {
  font-size: 17px;
  line-height: 1.65;
}

.legal p + p {
  margin-top: 12px;
}

.legal strong {
  font-weight: 600;
  color: var(--ink);
}

.legal ul {
  list-style: disc;
  padding-left: 22px;
  margin: 10px 0;
  display: grid;
  gap: 6px;
}

.legal code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--fill);
}

.legal .table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border-radius: 20px;
  border: 1px solid var(--line);
}

.legal table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.legal tr:last-child td {
  border-bottom: 0;
}

.legal th {
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
}

.legal address {
  font-style: normal;
  margin: 12px 0;
  line-height: 1.6;
}

.nowrap {
  white-space: nowrap;
}

/* ---------- not found, request not sent ---------- */

.missing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 64px 0;
  text-align: center;
}

.missing-mark {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--surface);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.missing-title,
.missing h1 {
  font-size: clamp(44px, 6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}

.missing .actions {
  margin-top: 12px;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .seg,
  .segmented label,
  .switch,
  .switch::after,
  .option,
  .toggle,
  .faq-list summary::after {
    transition: none;
  }

  .sp-spinner {
    animation-duration: 2.4s;
  }
}

/* ---------- regular to compact ---------- */

@media (max-width: 1080px) {
  .nav:not(.nav-always) { display: none; }

  .request { padding-bottom: 120px; }
  .request-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
  .estimate { position: static; }

  /* Without the sidebar beside the form, the price and the send button ride along at the
     bottom instead (the sidebar's own button would only repeat it). */
  .js .estimate-send,
  .js .estimate-fine { display: none; }

  .js .estimate-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px max(16px, calc((100% - 1240px) / 2)) calc(10px + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 0.9);
    -webkit-backdrop-filter: saturate(1.8) blur(18px);
    backdrop-filter: saturate(1.8) blur(18px);
    border-top: 1px solid var(--line);
  }

  .estimate-bar-price {
    display: grid;
    line-height: 1.15;
    font-size: 12px;
    color: var(--muted);
  }

  .estimate-bar-price span {
    font-family: var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 11px;
  }

  .estimate-bar-price strong {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.04em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
}

@media (max-width: 1080px) and (prefers-reduced-transparency: reduce) {
  .js .estimate-bar {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 760px) {
  :root {
    --shell: calc(100% - 32px);
  }

  .header-in { height: 64px; gap: 12px; }
  .nav-always { display: none; }
  .hero { padding-top: 56px; }
  .actions .btn { flex: 1 1 100%; }
  .stage { margin-top: 48px; padding: 6px; border-radius: 20px; }
  .stage-window { border-radius: 16px; }
  .stage-bar { height: 36px; gap: 10px; padding: 0 12px; }
  .stage-dots i { width: 8px; height: 8px; }
  .stage-legend { gap: 8px 18px; padding: 14px 8px 6px; }
  .legend-keys { margin-left: 0; }
  .section { padding-top: 104px; }
  .steps,
  .safety,
  .catches { margin-top: 44px; }
  .step { min-height: 240px; padding: 28px 24px 32px; }
  .step-n { font-size: 56px; }
  .catches li { padding-right: 0; }
  .panel,
  .cta-panel { border-radius: 28px; }
  .report-card { padding: 20px; }
  .rc-findings li { grid-template-columns: auto minmax(0, 1fr); }
  .f-count { grid-column: 2; }
  .score-ring { width: 88px; height: 88px; }
  .score-num { font-size: 30px; }
  .faq-list summary { font-size: 17px; padding: 22px 0; }
  .footer { padding-top: 56px; }

  .request { padding-top: 48px; }
  .request-grid { margin-top: 32px; }
  .block { border-radius: 24px; }
  .block-title { font-size: 22px; }
  .range-head output { font-size: 44px; }
  .segmented { width: 100%; border-radius: 22px; }
  .segmented label { flex: 1 1 auto; justify-content: center; }
  .submit-row .btn { flex: 1 1 100%; }
  .estimate-card { padding: 24px; }
  .estimate-bar .btn { padding: 0 20px; }
  .sp-thumb { width: 72px; height: 48px; }
  .sent { width: var(--shell); padding: 72px 0 104px; }

  .consent { right: 8px; bottom: 8px; width: calc(100% - 16px); padding: 18px; }
  .consent-actions { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .hide-xs { display: none; }
  .brand-name { font-size: 16px; }
}