/* Free AI SEO Audit — the clarity landing page, on seoinformatica.com.
 *
 * This file is clarity-v3.css VERBATIM (the clarity page's real design:
 * colours, layout, components, spacing), with exactly two deliberate
 * departures appended at the end of the file:
 *
 *   1. the font layer is remapped to the website's typefaces
 *   2. the hero returns to cream (clarity's hero went ink on 2026-08-06)
 *
 * Nothing else is edited, so re-syncing with clarity means replacing
 * everything above the "SITE OVERRIDES" banner.
 *
 * DRAFT — the route is not registered and the page is not published.
 */

/* Website typefaces, self-hosted by the fast-track plugin. Paths resolve
   from this file's location (assets/css/ -> assets/fonts/). */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/anton-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/bebas-neue-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Tight Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Roboto Condensed Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/roboto-condensed-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/space-mono-latin-400-normal.ttf") format("truetype");
}

html {
  min-height: 100%;
  color-scheme: light;
}

body.clarity-root {
  min-height: 100%;
  margin: 0;
}

.clarity-root {
  --clarity-accent: #c6431c;
  --clarity-dark: #2e2d27;
  --clarity-ground: #f4f3f0;
  --clarity-ink: #16150f;
  --clarity-line: #c9c7c1;
  --clarity-muted: #6b6a64;
  --clarity-paper: #fbfaf8;
  --clarity-positive: #0e5a3a;
  min-height: 100vh;
  background: var(--clarity-ground);
  color: var(--clarity-ink);
  font-family: var(--font-clarity-serif), Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.clarity-root,
.clarity-root * {
  box-sizing: border-box;
}

.clarity-root ::selection {
  background: var(--clarity-ink);
  color: var(--clarity-ground);
}

:where(.clarity-root) button,
:where(.clarity-root) input {
  font: inherit;
}

.clarity-root a {
  color: var(--clarity-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.clarity-root a:hover {
  color: var(--clarity-accent);
}

.clarity-root button,
.clarity-root a {
  -webkit-tap-highlight-color: transparent;
}

.clarity-root button:focus-visible,
.clarity-root a:focus-visible,
.clarity-root input:focus-visible,
.clarity-root [tabindex="-1"]:focus-visible {
  outline: 3px solid var(--clarity-accent);
  outline-offset: 3px;
}

.clarity-page {
  min-height: 100vh;
  padding-bottom: 88px;
  background: var(--clarity-ground);
  color: var(--clarity-ink);
}

.clarity-hero,
.clarity-section,
.clarity-footer {
  width: min(100%, 1240px);
  margin-inline: auto;
  padding-inline: 20px;
}

.clarity-hero {
  padding-top: 20px;
}

.clarity-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--clarity-ink);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
}

.clarity-topline span:first-child {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.clarity-topline span:last-child {
  color: var(--clarity-muted);
}

.clarity-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  align-items: end;
  gap: 36px;
  padding-top: 28px;
}

.clarity-copy {
  min-width: 0;
  container-type: inline-size;
}

.clarity-hero-heading {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-clarity-display), sans-serif;
  font-size: clamp(56px, 18.5cqi, 118px);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
}

.clarity-hero-follow {
  max-width: 19ch;
  margin: 18px 0 0;
  font-family: var(--font-clarity-mono), monospace;
  font-size: clamp(19px, 6.4cqi, 38px);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

.clarity-subhead {
  max-width: 34ch;
  margin: 22px 0 0;
  font-size: clamp(17px, 4.4vw, 21px);
  line-height: 1.45;
  text-wrap: pretty;
}

.clarity-trust-row {
  margin: 14px 0 0;
  color: var(--clarity-dark);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.clarity-primary {
  border: 0;
  border-radius: 0;
  background: var(--clarity-accent);
  color: var(--clarity-ground);
  cursor: pointer;
  font-family: var(--font-clarity-display), sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
  padding: 14px 28px 15px;
  text-transform: uppercase;
}

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

.clarity-primary:disabled {
  cursor: wait;
  opacity: 0.65;
}

.clarity-hero-cta {
  display: inline-block;
  max-width: 100%;
  margin-top: 20px;
  text-align: left;
}

.clarity-founder {
  width: 100%;
  max-width: 420px;
  min-width: 0;
  margin: 0;
  justify-self: end;
}

.clarity-founder picture,
.clarity-founder img {
  display: block;
  width: 100%;
}

.clarity-founder img {
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--clarity-ink);
  object-fit: cover;
}

.clarity-founder figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px 12px;
  border: 1px solid var(--clarity-ink);
  border-top: 0;
}

.clarity-founder figcaption strong {
  font-family: var(--font-clarity-display), sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.clarity-founder figcaption span {
  color: #45443e;
  font-family: var(--font-clarity-serif-italic), Georgia, serif;
  font-size: 16px;
  font-style: italic;
}

.clarity-section {
  padding-top: 64px;
}

.clarity-kicker {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}

.clarity-kicker span:first-child,
.clarity-section-heading > span {
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
}

.clarity-kicker span:last-child {
  font-family: var(--font-clarity-display), sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clarity-exhibit {
  border: 1px solid #101010;
  background: #101010;
  color: #e9e7e0;
}

.clarity-exhibit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #3a3934;
  color: #b9b7ae;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.clarity-exhibit-head span:last-child {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--clarity-accent);
}

.clarity-exhibit-body {
  padding: 22px 16px 8px;
  font-family: var(--font-clarity-mono), monospace;
  font-size: clamp(14px, 3.9vw, 17px);
  line-height: 1.7;
}

.clarity-exhibit-query {
  margin: 0;
  color: #8f8d85;
}

.clarity-profession-rotator {
  display: inline-grid;
  min-width: 9.2em;
}

.clarity-profession-rotator > span {
  display: none;
  grid-area: 1 / 1;
}

.clarity-profession-rotator > span.is-active {
  display: inline;
}

.clarity-exhibit-answer {
  position: relative;
  max-width: 62ch;
  margin: 18px 0 0;
}

.clarity-exhibit-sizer {
  visibility: hidden;
  margin: 0;
  min-height: 9.4em;
  white-space: pre-line;
}

.clarity-exhibit-typed {
  position: absolute;
  inset: 0;
  margin: 0;
  white-space: pre-line;
}

.clarity-cursor {
  display: inline-block;
  width: 0.62em;
  height: 1.05em;
  margin-left: 3px;
  background: #e9e7e0;
  transform: translateY(3px);
  animation: clarity-blink 1.1s step-end infinite;
}

@keyframes clarity-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.clarity-exhibit-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 18px;
  margin-top: 18px;
  padding: 16px;
  border-top: 1px solid #3a3934;
  color: #8f8d85;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
}

.clarity-exhibit-foot button {
  padding: 2px 0;
  border: 0;
  background: none;
  color: #e9e7e0;
  cursor: pointer;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
}

.clarity-exhibit-foot button:hover {
  color: #ffffff;
}

.clarity-evidence-close {
  max-width: 56ch;
  margin: 16px 0 0;
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.5;
  text-wrap: pretty;
}

.clarity-section-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--clarity-ink);
}

.clarity-section-heading h2 {
  margin: 0;
  font-family: var(--font-clarity-display), sans-serif;
  font-size: clamp(40px, 9vw, 72px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}

.clarity-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clarity-principles li {
  padding: 20px 0 26px;
  border-top: 1px solid var(--clarity-line);
}

.clarity-principles li > span {
  color: var(--clarity-line);
  font-family: var(--font-clarity-display), sans-serif;
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
}

.clarity-principles h3 {
  margin: 8px 0;
  font-family: var(--font-clarity-display), sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}

.clarity-principles p {
  margin: 0;
  color: var(--clarity-dark);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

.clarity-statement {
  padding-top: 56px;
}

.clarity-statement > p {
  max-width: 56ch;
  margin: 14px 0 0;
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

.clarity-booking .clarity-section-heading {
  margin-bottom: 18px;
}





.clarity-booking-card {
  width: min(100%, 720px);
  margin-bottom: 8px;
  border: 2px solid var(--clarity-ink);
  background: #ffffff;
  box-shadow: 8px 8px 0 var(--clarity-ink);
}

.clarity-card-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px;
  background: var(--clarity-accent);
  color: var(--clarity-ground);
  font-family: var(--font-clarity-mono), monospace;
}

.clarity-card-band span:first-child {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.clarity-card-band span:last-child {
  font-size: 12px;
  opacity: 0.85;
}

.clarity-booking-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--clarity-ink);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.clarity-booking-meta button {
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--clarity-muted);
  cursor: pointer;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.clarity-booking-meta button:hover {
  color: var(--clarity-ink);
}

.clarity-question,
.clarity-confirmation {
  padding: 22px 18px 26px;
}

.clarity-question > h3 {
  max-width: 22ch;
  margin: 0 0 18px;
  font-family: var(--font-clarity-display), sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}

.clarity-choice-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clarity-choice,
.clarity-time,
.clarity-secondary {
  border: 1px solid #a5a39c;
  border-radius: 0;
  background: var(--clarity-paper);
  color: var(--clarity-ink);
  cursor: pointer;
}

.clarity-choice {
  padding: 14px 16px;
  font-size: 17px;
  line-height: 1.3;
  text-align: left;
}

.clarity-choice:hover,
.clarity-time:hover,
.clarity-secondary:hover {
  border-color: var(--clarity-ink);
}

.clarity-choice.is-selected,
.clarity-choice[aria-pressed="true"],
.clarity-time.is-selected,
.clarity-time[aria-pressed="true"] {
  border-color: var(--clarity-ink);
  background: var(--clarity-ink);
  color: var(--clarity-ground);
}

.clarity-slot-step > h3 {
  margin-bottom: 4px;
}

.clarity-timezone {
  margin: 0 0 2px;
  color: var(--clarity-dark);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
  line-height: 1.45;
}

.clarity-host-zone {
  margin: 0 0 18px;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12px;
  line-height: 1.45;
}

.clarity-day-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.clarity-day-label {
  margin-bottom: 8px;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.clarity-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}

.clarity-time {
  padding: 11px 6px;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 14px;
  text-align: center;
}

.clarity-loading,
.clarity-empty {
  margin: 0;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
  line-height: 1.45;
}

.clarity-network-state,
.clarity-submit-error {
  padding: 14px;
  border: 1px solid var(--clarity-accent);
  color: var(--clarity-accent);
}

.clarity-network-state {
  margin: 0;
}

.clarity-submit-error {
  margin-top: 14px;
}

.clarity-network-state p,
.clarity-submit-error p {
  margin: 0 0 10px;
}

.clarity-secondary {
  display: inline-block;
  padding: 10px 14px;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.clarity-contact > h3 {
  margin-bottom: 4px;
}

.clarity-contact-slot {
  margin: 0 0 18px;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
  line-height: 1.45;
}

.clarity-contact form,
.clarity-contact label {
  display: flex;
  flex-direction: column;
}

.clarity-contact form {
  gap: 14px;
}

.clarity-contact label {
  gap: 5px;
}

.clarity-contact label > span {
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.clarity-contact label > span em {
  color: #9c9a93;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.clarity-contact input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #a5a39c;
  border-radius: 0;
  background: var(--clarity-paper);
  color: var(--clarity-ink);
  font-family: var(--font-clarity-serif), Georgia, serif;
  font-size: 17px;
  outline: none;
}

.clarity-contact input::placeholder {
  color: #9c9a93;
}

.clarity-contact input:focus {
  border-color: var(--clarity-ink);
}

.clarity-contact input[aria-invalid="true"] {
  border-color: var(--clarity-accent);
}

.clarity-form-error {
  margin: 0;
  color: var(--clarity-accent);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
}

.clarity-submit {
  margin-top: 4px;
  padding: 14px 24px 15px;
  font-size: 22px;
}

.clarity-toast {
  margin: 14px 18px 0;
  color: var(--clarity-accent);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
}

.clarity-confirmation {
  padding: 28px 18px 30px;
  text-align: center;
}

.clarity-confirmation-label {
  margin: 0;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.clarity-confirmation > h3 {
  margin: 14px 0 0;
  font-family: var(--font-clarity-display), sans-serif;
  font-size: clamp(44px, 11vw, 76px);
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
}

.clarity-confirmation-time {
  margin: 6px 0 0;
  font-family: var(--font-clarity-display), sans-serif;
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 600;
  line-height: 1;
}

.clarity-confirmation-meta {
  margin: 10px 0 0;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
  line-height: 1.45;
}

.clarity-commit {
  margin-top: 22px;
  padding: 14px 32px 15px;
  border: 0;
  border-radius: 0;
  background: var(--clarity-accent);
  color: var(--clarity-ground);
  cursor: pointer;
  font-family: var(--font-clarity-display), sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.clarity-commit.is-committed {
  background: var(--clarity-positive);
  cursor: default;
}

.clarity-calendar-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 16px;
}

.clarity-calendar-actions a,
.clarity-calendar-actions button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--clarity-muted);
  cursor: pointer;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.clarity-calendar-actions a:hover,
.clarity-calendar-actions button:hover {
  color: var(--clarity-accent);
}

.clarity-faq .clarity-section-heading {
  margin-bottom: 6px;
}

.clarity-faq-list {
  margin: 0;
}

.clarity-faq-item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 6px 40px;
  padding: 18px 0;
  border-top: 1px solid var(--clarity-line);
}

.clarity-faq-item:last-child {
  border-bottom: 1px solid var(--clarity-line);
}

.clarity-faq-item dt {
  font-family: var(--font-clarity-display), sans-serif;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  text-wrap: balance;
}

.clarity-faq-item dd {
  margin: 0;
  color: var(--clarity-dark);
  font-size: 17px;
  line-height: 1.5;
  text-wrap: pretty;
}

.clarity-nudge {
  display: block;
  width: fit-content;
  margin-top: 14px;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
}

.clarity-capture-body {
  max-width: 56ch;
  margin: 14px 0 0;
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

.clarity-capture-form {
  display: grid;
  gap: 14px;
  width: min(100%, 720px);
  margin-top: 24px;
}

.clarity-capture-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.clarity-capture-form label > span {
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.clarity-capture-form input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #a5a39c;
  border-radius: 0;
  background: var(--clarity-paper);
  color: var(--clarity-ink);
  font-family: var(--font-clarity-serif), Georgia, serif;
  font-size: 17px;
  outline: none;
}

.clarity-capture-form input::placeholder {
  color: #9c9a93;
}

.clarity-capture-form input:focus {
  border-color: var(--clarity-ink);
}

.clarity-capture-form input[aria-invalid="true"] {
  border-color: var(--clarity-accent);
}

.clarity-capture-submit {
  padding: 14px 24px 15px;
  font-size: 22px;
  justify-self: start;
}

.clarity-capture-success {
  max-width: 56ch;
  margin: 24px 0 0;
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

.clarity-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.clarity-footer {
  padding-top: 64px;
  padding-bottom: 28px;
}

.clarity-footer > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--clarity-ink);
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
}

.clarity-sticky {
  position: fixed;
  z-index: 50;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--clarity-ink);
  background: var(--clarity-ground);
}

.clarity-sticky > span {
  flex: none;
  color: #45443e;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12px;
  line-height: 1.3;
}

.clarity-sticky .clarity-primary {
  flex: none;
  padding: 11px 22px 12px;
  font-size: 20px;
}

.clarity-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 900px) {
  .clarity-capture-form {
    grid-template-columns: 1fr 1fr;
  }

  .clarity-capture-form .clarity-form-error,
  .clarity-capture-submit {
    grid-column: 1 / -1;
  }

  .clarity-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 460px);
    align-items: center;
    gap: 64px;
  }

  .clarity-founder {
    max-width: none;
  }

  .clarity-sticky {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clarity-root *,
  .clarity-root *::before,
  .clarity-root *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Audit hero globe ------------------------------------------------
   Ported from the seoinformatica.com homepage globe (same JS + geometry,
   served from this app's /public). Colors come from clarity tokens via the
   three custom properties the renderer reads off :root. The band sits as a
   full-width sibling AFTER .clarity-hero, so no breakout hacks are needed. */

:root {
  --night: #16150f; /* sphere + fade band — clarity ink */
  --paper: #f4f3f0; /* globe backdrop — clarity ground */
  --ink: #16150f;   /* signal points */
}

.clarity-globe {
  position: relative;
  height: 520px;
  margin-top: 38px;
  overflow: hidden;
  pointer-events: none;
}

.clarity-globe::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 48px;
  content: "";
  background: var(--clarity-ink);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 100%);
}

.clarity-globe .hero-globe__fallback,
.clarity-globe .hero-globe__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.clarity-globe .hero-globe__fallback {
  z-index: 1;
}

.clarity-globe .hero-globe__fallback-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.clarity-globe .hero-globe__canvas {
  z-index: 2;
  opacity: 0;
}

.clarity-globe[data-globe-ready="true"] .hero-globe__fallback {
  visibility: hidden;
}

.clarity-globe[data-globe-ready="true"] .hero-globe__canvas {
  opacity: 1;
}

@media (max-width: 680px) {
  .clarity-globe {
    height: 360px;
    margin-top: 28px;
  }

  .clarity-globe::after {
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clarity-globe .hero-globe__canvas {
    display: none;
  }
}

/* ---- Audit hero centering ----------------------------------------------
   The audit hero is a single centered column above the globe band; the
   constrained blocks center via auto inline margins (text-align alone
   would leave their boxes hugging the left edge). */

.clarity-hero .clarity-copy {
  text-align: center;
}

.clarity-hero-heading,
.clarity-hero-follow,
.clarity-subhead,
.clarity-nudge {
  margin-inline: auto;
}

/* ---- Subhead highlight ------------------------------------------------
   Accent marker bars behind the hero promise line, cloned per wrapped
   line so each row gets its own strip. */

.clarity-hero .clarity-subhead {
  font-size: clamp(18px, 4.6vw, 23px);
  line-height: 1.5;
}

.clarity-subhead-mark {
  --clarity-marker: color-mix(in srgb, var(--clarity-accent) 40%, var(--clarity-ground));
  padding: 0 0.18em;
  font-family: var(--font-clarity-serif-italic), Georgia, serif;
  font-style: italic;
  background-image: linear-gradient(to top, var(--clarity-marker) 0 0.58em, transparent 0.58em);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: clarity-marker-sweep 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0.4s forwards;
}

@keyframes clarity-marker-sweep {
  to { background-size: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .clarity-subhead-mark {
    animation: none;
    background-size: 100% 100%;
  }
}

/* ---- Dark evidence band ------------------------------------------------
   Full-bleed ink section straight after the globe, mirroring the homepage
   globe-into-dark-band transition. The exhibit inverts to a white window
   with black text. padding-inline keeps the content on the 1240px grid. */

.clarity-evidence {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 64px max(20px, calc(50% - 600px)) 76px;
  background: var(--clarity-ink);
  color: var(--clarity-ground);
}

.clarity-evidence .clarity-kicker span:last-child {
  color: var(--clarity-ground);
}

.clarity-evidence .clarity-exhibit {
  border-color: #0b0a07;
  background: var(--clarity-ground);
  color: var(--clarity-ink);
}

.clarity-evidence .clarity-exhibit-head {
  border-bottom-color: #d8d5cc;
  color: #6b6960;
}

.clarity-evidence .clarity-exhibit-query {
  color: #6b6960;
}

.clarity-evidence .clarity-cursor {
  background: var(--clarity-ink);
}

.clarity-evidence .clarity-exhibit-foot {
  border-top-color: #d8d5cc;
  color: #6b6960;
}

.clarity-evidence .clarity-exhibit-foot button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #3bb878;
  font-weight: 700;
}

.clarity-evidence .clarity-exhibit-foot button:hover {
  color: #2e9d63;
}

.clarity-tri-mark {
  width: 15px;
  height: 15px;
  flex: none;
}

.clarity-exhibit-head span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #3bb878;
  font-weight: 700;
}

.clarity-trust-row strong {
  font-weight: 700;
  color: var(--clarity-ink);
}

/* ---- Location rotator (same stacking as the profession rotator) ---- */

.clarity-location-rotator {
  display: inline-grid;
}

.clarity-location-rotator > span {
  display: none;
  grid-area: 1 / 1;
}

.clarity-location-rotator > span.is-active {
  display: inline;
}

/* ---- Claim-first flow: skip-the-call escape ---- */

.clarity-skip-call {
  margin-top: 20px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--clarity-ink);
  cursor: pointer;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.clarity-skip-call:hover {
  color: var(--clarity-accent);
}

/* ---- Claim form: pill chips + walkthrough value list ---- */

.clarity-choice,
.clarity-time {
  border-radius: 999px;
}

.clarity-call-value {
  display: grid;
  gap: 9px;
  margin: 14px 0 6px;
  padding: 0;
  list-style: none;
}

.clarity-call-value li {
  position: relative;
  padding-left: 24px;
  font-size: 15.5px;
  line-height: 1.45;
}

.clarity-call-value li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.22em;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 18 56 52'%3E%3Cpolygon points='17.3,26.9 62.7,26.9 40,66.2' fill='%23ffffff' stroke='%233BB878' stroke-width='6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- Hero URL starter -------------------------------------------------- */

.clarity-hero-start {
  display: flex;
  gap: 10px;
  width: min(100%, 620px);
  margin: 22px auto 0;
}

.clarity-hero-start input {
  flex: 1;
  min-width: 0;
  padding: 15px 20px;
  border: 1.5px solid var(--clarity-ink);
  border-radius: 999px;
  background: var(--clarity-ground);
  color: var(--clarity-ink);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 15.5px;
}

.clarity-hero-start input::placeholder {
  color: #9c9a93;
}

.clarity-hero-start input:focus {
  outline: 3px solid var(--clarity-accent);
  outline-offset: 2px;
}

.clarity-hero-start .clarity-hero-cta {
  margin-top: 0;
  flex: none;
}

.clarity-hero-start-note {
  margin: 12px auto 0;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

@media (max-width: 680px) {
  .clarity-hero-start {
    flex-direction: column;
    gap: 12px;
  }

  .clarity-hero-start .clarity-hero-cta {
    width: 100%;
  }
}

/* ---- Claim form: progress + reason-why + symptoms ---------------------- */

.clarity-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 14px 0 0;
}

.clarity-progress span {
  height: 3px;
  background: #d8d5cc;
}

.clarity-progress span.is-done,
.clarity-progress span.is-current {
  background: var(--clarity-accent);
}

.clarity-form-why {
  margin: 12px 0 0;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.clarity-symptom-hint {
  margin: 6px 0 0;
  color: var(--clarity-muted);
  font-size: 15px;
}

.clarity-symptom-continue {
  margin-top: 18px;
  padding: 12px 26px 13px;
  font-size: 18px;
}

/* ---- Partner proof strip (dark evidence band) -------------------------- */

.clarity-proof-strip {
  margin-top: 40px;
}

.clarity-proof-strip > span {
  display: block;
  color: rgba(244, 243, 240, 0.55);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.clarity-proof-strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.clarity-proof-strip li {
  padding: 7px 16px;
  border: 1px solid rgba(244, 243, 240, 0.28);
  border-radius: 999px;
  color: var(--clarity-ground);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
}

/* ---- Real audit pages (inside section 04) ------------------------------ */

.clarity-audit-pages-note {
  margin: 34px 0 0;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.clarity-audit-pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
  margin-top: 14px;
}

.clarity-audit-pages figure {
  margin: 0;
}

.clarity-audit-pages img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--clarity-ink);
  background: #ffffff;
}

.clarity-audit-pages figcaption {
  margin-top: 8px;
  color: var(--clarity-dark);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
  line-height: 1.4;
}

/* ---- Density pass: tighter vertical rhythm ------------------------------ */

.clarity-section {
  padding-top: 48px;
}

.clarity-evidence {
  padding-top: 52px;
  padding-bottom: 60px;
}

.clarity-globe {
  margin-top: 30px;
}

.clarity-proof-strip {
  margin-top: 32px;
}

.clarity-hero-heading {
  font-size: clamp(52px, 16.5cqi, 102px);
}

.clarity-hero-follow {
  margin-top: 12px;
}

.clarity-hero .clarity-subhead {
  margin-top: 16px;
}

.clarity-trust-row {
  margin-top: 10px;
}

.clarity-hero-start {
  margin-top: 18px;
}

/* ---- Logo marquee (dark band) ------------------------------------------ */

.clarity-logo-marquee {
  overflow: hidden;
  margin-top: 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.clarity-logo-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  padding-right: 56px;
  animation: clarity-marquee 36s linear infinite;
}

.clarity-logo-track img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

.clarity-logo-track em {
  color: rgba(244, 243, 240, 0.75);
  font-family: var(--font-clarity-display), sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
}

@keyframes clarity-marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .clarity-logo-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
  }
}

/* ---- Mobile: swipe carousels instead of endless scroll ------------------ */

@media (max-width: 680px) {
  .clarity-principles {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .clarity-principles li {
    scroll-snap-align: start;
  }

  .clarity-audit-pages {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .clarity-audit-pages figure {
    scroll-snap-align: start;
  }
}

/* ---- Tonal section bands ------------------------------------------------
   Alternating paper tones plus a second ink band give the scroll a visual
   rhythm: ground / sand / ink instead of one long white sheet. Banded
   sections go full-bleed; the computed inline padding keeps their content
   on the same 1240px grid as the plain sections. */

.clarity-section--sand,
.clarity-section--ink {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 56px max(20px, calc(50% - 600px)) 64px;
}

.clarity-section--sand {
  background: #ebe7dc;
}

.clarity-section--ink {
  background: var(--clarity-ink);
  color: var(--clarity-ground);
}

.clarity-section--ink .clarity-section-heading {
  border-top-color: rgba(244, 243, 240, 0.4);
}

.clarity-section--ink .clarity-section-heading > span {
  color: rgba(244, 243, 240, 0.5);
}

.clarity-section--ink .clarity-section-heading h2,
.clarity-section--ink p {
  color: var(--clarity-ground);
}

.clarity-section--sand .clarity-audit-pages img {
  border-color: #16150f;
}

/* ---- Netflix-simple entry block ----------------------------------------
   The hero's action zone switches to the familiar UI sans (Inter) with
   real breathing room, so the URL field reads like any daily sign-in —
   see it, fill it. Mono stays for the topline and the exhibit. */

.clarity-hero-follow {
  font-family: var(--font-clarity-sans), -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(24px, 5.2cqi, 33px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.22;
  margin-top: 18px;
}

.clarity-trust-row {
  font-family: var(--font-clarity-sans), -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #6b6960;
  margin-top: 16px;
}

.clarity-trust-row strong {
  color: var(--clarity-ink);
}

.clarity-hero-start {
  margin-top: 28px;
  gap: 12px;
}

.clarity-hero-start input {
  font-family: var(--font-clarity-sans), -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  background: #ffffff;
  border: 1.5px solid #c9c6bc;
  padding: 17px 24px;
}

.clarity-hero-start input::placeholder {
  color: #a3a19a;
}

.clarity-hero-start input:focus {
  border-color: var(--clarity-ink);
  outline: 3px solid var(--clarity-accent);
  outline-offset: 2px;
}

.clarity-hero-start-note {
  font-family: var(--font-clarity-sans), -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  margin-top: 12px;
}

.clarity-hero .clarity-nudge {
  font-family: var(--font-clarity-sans), -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  margin-top: 20px;
}

/* ---- Softer exhibit window --------------------------------------------- */

.clarity-evidence .clarity-exhibit {
  background: #eceae3;
}

.clarity-evidence .clarity-exhibit-head {
  border-bottom-color: #d3d0c6;
}

.clarity-evidence .clarity-exhibit-foot {
  border-top-color: #d3d0c6;
}

/* ---- Outcome pair (trailer ink band, homepage proof-strip echo) -------- */

.clarity-outcome-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 36px;
  border-top: 1px solid rgba(244, 243, 240, 0.18);
}

.clarity-outcome-pair > div {
  padding: 28px 30px 32px 0;
}

.clarity-outcome-pair > div + div {
  padding-left: 34px;
  border-left: 1px solid rgba(244, 243, 240, 0.18);
}

.clarity-outcome-pair span {
  display: block;
  font-family: var(--font-clarity-display), sans-serif;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.08;
  color: #3fbf7f;
}

.clarity-outcome-note {
  margin: 0;
  padding-bottom: 4px;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(244, 243, 240, 0.5);
  text-transform: uppercase;
}

@media (max-width: 680px) {
  .clarity-outcome-pair {
    grid-template-columns: 1fr;
  }

  .clarity-outcome-pair > div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(244, 243, 240, 0.18);
  }
}

/* ---- Statement headline (homepage Inter Tight voice) -------------------- */

.clarity-hero-heading {
  font-family: var(--font-clarity-statement), -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(46px, 13.5cqi, 94px);
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-transform: none;
  max-width: 15ch;
}

/* ---- Accent claim band --------------------------------------------------
   The 1DOT principle: a hot brand field makes the white card the calmest
   thing on screen, so the eye lands on the form and stays there. */

.clarity-section--accent {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 56px max(20px, calc(50% - 600px)) 72px;
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--clarity-accent) 88%, #ffffff) 0%,
    var(--clarity-accent) 46%,
    color-mix(in srgb, var(--clarity-accent) 84%, #000000) 100%
  );
  color: #ffffff;
}

.clarity-section--accent .clarity-section-heading {
  border-top-color: rgba(255, 255, 255, 0.4);
}

.clarity-section--accent .clarity-section-heading > span {
  color: rgba(255, 255, 255, 0.75);
}

.clarity-section--accent .clarity-section-heading h2 {
  color: #ffffff;
}



.clarity-section--accent .clarity-booking-card {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
  color: var(--clarity-ink);
}

.clarity-section--accent .clarity-card-band {
  background: var(--clarity-ink);
}

/* ---- Accent claim band: centered form column --------------------------- */

.clarity-section--accent .clarity-booking-card {
  margin-inline: auto;
}

/* ---- Evidence close line: heavy, one line on desktop -------------------- */

.clarity-evidence-close {
  font-family: var(--font-clarity-sans), -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

@media (min-width: 1100px) {
  .clarity-evidence-close {
    max-width: none;
    white-space: nowrap;
    font-size: 21px;
  }
}

/* ---- Accent band: centered heading -------------------------------------- */

.clarity-section--accent .clarity-section-heading {
  justify-content: center;
}

/* ---- Outcomes: what changed after the audit ----------------------------- */

.clarity-outcomes-note {
  margin: 10px 0 0;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.clarity-outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
  margin-top: 22px;
}

.clarity-outcomes article {
  display: flex;
  flex-direction: column;
  padding: 24px 26px 26px;
  border: 1px solid var(--clarity-ink);
  background: #ffffff;
}

.clarity-outcome-chip {
  align-self: flex-start;
  padding: 5px 14px;
  border: 1px solid #c9c6bc;
  border-radius: 999px;
  color: #6b6960;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.clarity-outcomes h3 {
  margin: 16px 0 0;
  font-family: var(--font-clarity-display), sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

.clarity-outcomes p {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: #45443e;
}

.clarity-outcomes strong {
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--font-clarity-statement), -apple-system, sans-serif;
  font-size: 46px;
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 1;
}

.clarity-outcome-caption {
  margin-top: 6px;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .clarity-outcomes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .clarity-outcomes article {
    scroll-snap-align: start;
  }
}

/* ---- Founder mini card (accent band) + footer privacy ------------------- */

.clarity-footer a {
  color: inherit;
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
  text-underline-offset: 3px;
}

.clarity-audit-pages figure a {
  display: block;
}

/* ---- Hero supporting line: solid accent bands --------------------------- */

.clarity-subhead-band {
  background: var(--clarity-accent);
  color: var(--clarity-ground);
  padding: 0.1em 0.5em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- Google-style start bar (desktop) ----------------------------------- */

.clarity-start-mark {
  display: none;
}

@media (min-width: 681px) {
  .clarity-hero-start {
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 16px;
    background: #ffffff;
    border: 1.5px solid #c9c6bc;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(22, 21, 15, 0.09);
  }

  .clarity-hero-start:focus-within {
    border-color: var(--clarity-ink);
    box-shadow: 0 12px 32px rgba(22, 21, 15, 0.09), 0 0 0 3px color-mix(in srgb, var(--clarity-accent) 35%, transparent);
  }

  .clarity-start-mark {
    display: block;
    width: 19px;
    height: 19px;
    flex: none;
  }

  .clarity-hero-start input {
    border: 0;
    background: transparent;
    padding: 12px 10px;
  }

  .clarity-hero-start input:focus {
    outline: none;
  }

  .clarity-hero-start .clarity-hero-cta {
    border-radius: 999px;
  }
}

/* ---- Google-style start bar, mobile flavor ------------------------------ */

@media (max-width: 680px) {
  .clarity-hero-start {
    position: relative;
  }

  .clarity-start-mark {
    display: block;
    position: absolute;
    left: 20px;
    top: 18px;
    width: 18px;
    height: 18px;
  }

  .clarity-hero-start input {
    padding-left: 48px;
    box-shadow: 0 10px 26px rgba(22, 21, 15, 0.08);
  }

  .clarity-hero-start .clarity-hero-cta {
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(22, 21, 15, 0.12);
  }
}

/* ---- Hero refinements: wider column, distinct voices, square bar -------- */

.clarity-hero-heading {
  max-width: 18ch;
}

.clarity-hero-follow {
  max-width: none;
  font-family: var(--font-clarity-display), sans-serif;
  font-size: clamp(24px, 4.8cqi, 38px);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.05;
  text-transform: uppercase;
}

.clarity-hero .clarity-subhead {
  max-width: 58ch;
  font-size: clamp(15.5px, 3.4vw, 18.5px);
  line-height: 1.55;
}

.clarity-hero-start {
  width: min(100%, 720px);
}

@media (min-width: 681px) {
  .clarity-hero-start,
  .clarity-hero-start .clarity-hero-cta {
    border-radius: 0;
  }
}

@media (max-width: 680px) {
  .clarity-hero .clarity-copy {
    text-align: left;
  }

  .clarity-hero-heading,
  .clarity-hero-follow,
  .clarity-hero .clarity-subhead,
  .clarity-hero .clarity-nudge,
  .clarity-hero-start,
  .clarity-hero-start-note {
    margin-inline: 0;
  }

  .clarity-hero-start input,
  .clarity-hero-start .clarity-hero-cta {
    border-radius: 0;
  }
}

/* ---- Start bar: calm green outline -------------------------------------- */

@media (min-width: 681px) {
  .clarity-hero-start {
    border: 2px solid #3bb878;
  }

  .clarity-hero-start:focus-within {
    border-color: #2e9d63;
    box-shadow: 0 12px 32px rgba(22, 21, 15, 0.09), 0 0 0 4px rgba(59, 184, 120, 0.22);
  }
}

@media (max-width: 680px) {
  .clarity-hero-start input {
    border: 2px solid #3bb878;
  }

  .clarity-hero-start input:focus {
    outline: 3px solid rgba(59, 184, 120, 0.35);
    outline-offset: 2px;
  }
}

/* ---- Ink band support for principle lists + sample pages ---------------- */

.clarity-section--ink .clarity-principles h3 {
  color: var(--clarity-ground);
}

.clarity-section--ink .clarity-principles li > span {
  color: rgba(244, 243, 240, 0.3);
}

.clarity-section--ink .clarity-audit-pages-note {
  color: rgba(244, 243, 240, 0.55);
}

.clarity-section--ink .clarity-audit-pages img {
  border-color: rgba(244, 243, 240, 0.35);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

.clarity-section--ink .clarity-audit-pages figcaption {
  color: rgba(244, 243, 240, 0.7);
}

/* ---- Author card: flat on the accent band ------------------------------- */

/* ---- Outcome cards: accent outline -------------------------------------- */

.clarity-outcomes article {
  border: 1.5px solid var(--clarity-accent);
}

/* ---- Trust row on mobile ------------------------------------------------
   Was min(2.55vw, 12px) + nowrap, which bought one line by rendering the
   page's most load-bearing promises at 9.5px on a 375px phone — under any
   legibility floor. Two readable lines beat one unreadable one, so it
   wraps and holds 13px. The separators stay glued to their phrases so a
   break never orphans a dot. */

@media (max-width: 680px) {
  .clarity-trust-row {
    font-size: 13px;
    letter-spacing: 0;
    text-wrap: balance;
  }
}

/* ---- Outcome cards: banded captions + accent metrics --------------------- */

.clarity-outcomes strong {
  color: var(--clarity-accent);
}

.clarity-outcome-caption {
  margin-top: 8px;
  line-height: 1.6;
}

.clarity-outcome-caption > span {
  background: var(--clarity-ink);
  color: var(--clarity-ground);
  padding: 0.16em 0.5em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- Brand links (topline + footer) -------------------------------------- */

.clarity-brand-link {
  color: inherit;
  text-decoration: none;
}

.clarity-brand-link:hover {
  color: var(--clarity-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- WhatsApp delivery option -------------------------------------------- */

.clarity-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 11px 20px;
  border-radius: 999px;
  background: #25d366;
  color: #ffffff;
  font-family: var(--font-clarity-sans), -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.clarity-whatsapp:hover {
  background: #1ebe5b;
  color: #ffffff;
  text-decoration: none;
}

.clarity-whatsapp--capture {
  margin-top: 18px;
}

/* ---- Interaction polish (ui-review pass, 2026-08-06) --------------------
   Press feedback: buttons compress slightly under the finger. State, not
   motion, so it stays under prefers-reduced-motion. */

.clarity-root button:not(:disabled):active {
  transform: scale(0.98);
}

/* The intro marker sweep plays once per session — layout.tsx stamps
   data-clarity-intro-seen on <html> pre-paint from sessionStorage. */

html[data-clarity-intro-seen] .clarity-subhead-mark {
  animation: none;
  background-size: 100% 100%;
}

/* The proof belt holds still while the pointer is reading it. */

.clarity-logo-marquee:hover .clarity-logo-track {
  animation-play-state: paused;
}

/* Hero nudge link: same look, bigger thumb target. */

.clarity-nudge {
  padding: 12px 10px;
  margin-top: 2px;
  margin-bottom: -12px;
}

/* ---- Hero hierarchy + air (Mo review pass, 2026-08-06) ------------------
   One voice per read: H1 and the follow line share Inter Tight, so the
   second read is the same family at a smaller scale instead of a second
   typeface shouting in uppercase. Casing handled here, copy untouched. */

.clarity-hero {
  padding-top: 26px;
}

.clarity-hero-follow {
  margin-top: 26px;
  font-family: var(--font-clarity-statement), "Helvetica Neue", sans-serif;
  font-size: clamp(21px, 4.4cqi, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  text-transform: none;
  max-width: 30ch;
}

.clarity-hero .clarity-subhead {
  margin-top: 22px;
  font-size: clamp(16px, 3.6vw, 19px);
  line-height: 1.62;
}

/* The promise band gets air inside its strips — text no longer touches
   the band edges. */

.clarity-subhead-band {
  padding: 0.3em 0.6em;
}

.clarity-trust-row {
  margin-top: 22px;
}

.clarity-hero-start {
  margin-top: 36px;
}

.clarity-hero-start-note {
  margin-top: 14px;
}

/* ---- Claim form air (the "too close" crops) -----------------------------
   The progress dashes were flush-width and 14px under the accent band —
   that is the dashed line in the review screenshots. Inset and separate. */

.clarity-progress {
  margin: 20px 18px 0;
}

.clarity-booking-meta {
  padding: 14px 18px;
}

.clarity-card-band {
  padding: 12px 18px;
}

.clarity-question,
.clarity-confirmation {
  padding: 26px 22px 30px;
}

.clarity-question > h3 {
  margin: 0 0 20px;
}

.clarity-form-why {
  margin: 16px 18px 0;
  font-size: 13px;
}

.clarity-contact form {
  gap: 18px;
}

.clarity-contact label {
  gap: 7px;
}

/* ---- Hero goes ink (2026-08-06) ----------------------------------------
   Chosen from the ?variant= prototype (preserved on the
   prototype/hero-background branch). The hero now opens on the same ink as
   the evidence band below it, so the globe reads as a lit interlude between
   two dark acts, and the accent band and CTA are the only warm things on
   screen — one accent, one action. */

.clarity-hero {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 26px max(20px, calc(50% - 600px)) 54px;
  background: var(--clarity-ink);
  color: var(--clarity-ground);
}

.clarity-hero .clarity-topline {
  border-bottom-color: #4a4940;
}

.clarity-hero a {
  color: var(--clarity-ground);
}

.clarity-hero .clarity-trust-row {
  color: #b3b1a8;
}

.clarity-hero .clarity-trust-row strong {
  color: var(--clarity-ground);
}

/* The start bar sits on ink, so its ink border would disappear — the green
   ring is the whole edge now. */

.clarity-hero-start input {
  border-color: transparent;
}

.clarity-hero .clarity-hero-start-note {
  color: #8f8d85;
}

/* The globe band butts straight onto the ink hero — one crisp dark-to-lit
   edge, instead of the page-cream strip that used to sit between them
   (invisible while the hero was also cream, a two-tone seam once it went
   ink). Wins over the mobile margin by source order. */

.clarity-globe {
  margin-top: 0;
}

/* ---- Premium scale pass (2026-08-06) ------------------------------------
   Benchmarked against 1DOT's audit page after review: their premium read
   comes from rhythm and size — 96-120px section padding, 56px section
   heads, nothing else. Same move here: every section breathes at roughly
   twice the old air, section heads step up a full size, and the statement
   sections speak at pull-quote scale. Clamps carry the ratio to mobile. */

.clarity-section {
  padding-top: clamp(64px, 9vw, 104px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.clarity-evidence {
  padding-top: clamp(64px, 9vw, 104px);
  padding-bottom: clamp(56px, 8vw, 92px);
}

.clarity-hero {
  padding-bottom: clamp(56px, 7vw, 84px);
}

.clarity-page {
  padding-bottom: clamp(56px, 8vw, 96px);
}

/* Section heads: a full size up, with real air before their content. */

.clarity-section-heading h2 {
  font-size: clamp(38px, 5.2vw, 58px);
}

.clarity-section-heading {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.clarity-booking .clarity-section-heading {
  margin-bottom: clamp(20px, 3vw, 30px);
}

.clarity-kicker {
  margin-bottom: clamp(18px, 3vw, 28px);
}

.clarity-kicker span:last-child {
  font-size: 17px;
}

/* Numbered principle lists: more gap between items, bigger item heads. */

.clarity-principles {
  gap: clamp(22px, 3.5vw, 40px);
}

.clarity-principles h3 {
  font-size: clamp(25px, 2.6vw, 31px);
}

.clarity-principles li p {
  max-width: 58ch;
  line-height: 1.62;
}

/* Statement sections speak at pull-quote scale. */

.clarity-statement > p:not([class]) {
  max-width: 46ch;
  font-size: clamp(19px, 2.3vw, 25px);
  line-height: 1.55;
}

/* FAQ: taller rows, bigger questions, comfortable answers. */

.clarity-faq-item {
  padding-top: clamp(22px, 3vw, 30px);
  padding-bottom: clamp(22px, 3vw, 30px);
}

.clarity-faq-item dt {
  font-size: clamp(22px, 2.4vw, 27px);
}

.clarity-faq-item dd {
  max-width: 62ch;
  line-height: 1.6;
}

/* Outcome cards get room between one another. */

.clarity-outcomes {
  gap: clamp(20px, 2.6vw, 30px);
  margin-top: clamp(24px, 3.5vw, 36px);
}


/* ---- Claim form: compact on phones (2026-08-06) --------------------------
   The card's chrome (band, dashes, meta) shrinks to whisper-size and every
   text step drops a notch so a full step sits in one phone viewport.
   Floors held: inputs stay 16px (iOS zoom), tap targets stay ≥44px. */

@media (max-width: 680px) {
  .clarity-card-band {
    padding: 9px 14px;
    font-size: 11px;
  }

  .clarity-progress {
    margin: 14px 14px 0;
  }

  .clarity-booking-meta {
    padding: 10px 14px;
  }

  .clarity-form-why {
    margin: 12px 14px 0;
    font-size: 12px;
  }

  .clarity-question,
  .clarity-confirmation {
    padding: 18px 14px 22px;
  }

  .clarity-question > h3 {
    margin-bottom: 14px;
    font-size: 23px;
  }

  .clarity-choice {
    padding: 12px 14px;
    font-size: 16px;
  }

  .clarity-contact form {
    gap: 12px;
  }

  .clarity-contact label {
    gap: 4px;
  }

  .clarity-contact label span {
    font-size: 13px;
  }

  .clarity-contact input {
    padding: 11px 12px;
    font-size: 16px;
  }

  .clarity-booking-card .clarity-primary {
    padding: 12px 22px 13px;
    font-size: 20px;
  }

  .clarity-symptom-hint,
  .clarity-contact-slot {
    font-size: 14px;
  }
}


/* ======================================================================
   SITE OVERRIDES — the only edits to clarity's stylesheet.
   ====================================================================== */

/* 1. Fonts. Clarity's six roles mapped onto the website's typefaces.
      Inter Tight is a straight swap (both pages already use it); the
      display voice becomes Anton, body copy becomes Roboto Condensed,
      and the mono rail becomes Space Mono. */

.clarity-root {
  --font-clarity-display: "Anton", "Arial Narrow", sans-serif;
  --font-clarity-statement: "Inter Tight Variable", Arial, sans-serif;
  --font-clarity-sans: "Inter Tight Variable", Arial, sans-serif;
  --font-clarity-serif: "Roboto Condensed Variable", "Arial Narrow", Arial, sans-serif;
  --font-clarity-serif-italic: "Roboto Condensed Variable", "Arial Narrow", Arial, sans-serif;
  --font-clarity-mono: "Space Mono", ui-monospace, monospace;
}

/* Anton is heavier and tighter than the Barlow Condensed it replaces, so
   the uppercase heads it now sets need their tracking opened back up and
   their weight request dropped to the single cut Anton actually ships. */

.clarity-section-heading h2,
.clarity-question > h3,
.clarity-faq-item dt,
.clarity-principles h3,
.clarity-kicker span:last-child {
  font-weight: 400;
  letter-spacing: 0.01em;
}

.clarity-primary {
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* 2. The hero returns to cream. Clarity's hero went ink on 2026-08-06;
      this page keeps the paper opening. Each ink rule is answered here so
      the clarity stylesheet above stays untouched. */

.clarity-hero {
  background: var(--clarity-ground);
  color: var(--clarity-ink);
}

.clarity-hero .clarity-topline {
  border-bottom-color: var(--clarity-ink);
}

.clarity-hero a {
  color: var(--clarity-ink);
}

.clarity-hero .clarity-trust-row {
  color: #6b6960;
}

.clarity-hero .clarity-trust-row strong {
  color: var(--clarity-ink);
}

.clarity-hero-start input {
  border-color: var(--clarity-ink);
}

.clarity-hero .clarity-hero-start-note {
  color: var(--clarity-muted);
}

/* 3. The claim panel. Clarity owns the multi-step form (it needs the
      session, booking and lead APIs on the portal), so on this page the
      claim section is a panel that hands off to it — styled as the card it
      replaces so section 02 still reads as the page's centre of gravity. */

.clarity-claim-panel {
  width: min(100%, 720px);
  margin-inline: auto;
  padding: clamp(26px, 4vw, 40px) clamp(22px, 3vw, 34px);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
  color: var(--clarity-ink);
  text-align: center;
}

.clarity-claim-panel__lead {
  max-width: 48ch;
  margin: 0 auto 26px;
  font-family: var(--font-clarity-serif), Georgia, serif;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.6;
  text-wrap: pretty;
}

/* .clarity-root a sets an underline at (0,1,1); these CTAs are buttons in
   everything but element, so they need to out-specify it. */

.clarity-root .clarity-claim-panel__cta,
.clarity-root .clarity-capture-submit {
  display: inline-block;
  text-decoration: none;
}

.clarity-claim-panel__note {
  margin: 18px 0 0;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 13px;
}

/* The capture section's submit is a link here, not a button. */

.clarity-capture-submit {
  margin-top: 22px;
}

/* The globe band on this page is a static image only — the clarity page's
   canvas renderer is not shipped here. */

.clarity-globe .hero-globe__fallback-image {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center top;
}

/* 4. clarity-root sits on a wrapper div, not <body> (the plugin's body_class
      guard strips any class that is not seoi-ftp*). Hand the body the two
      things body.clarity-root above would have given it — the tokens are not
      in scope on <body>, so the ground colour is stated literally. */

body.seoi-ftp--audit {
  min-height: 100%;
  margin: 0;
  background: #f4f3f0;
}

/* 5. The plugin enqueues preview.min.css on every owned surface, and its
      `body` rule pins `font-variation-settings: "wght" 400`. That property
      inherits, and on a variable font it overrides font-weight outright —
      which silently flattened every weight clarity asks for (the 780 hero
      rendered at 400). Releasing the axis here hands control back to
      font-weight, which is what the whole stylesheet above is written in. */

.clarity-root {
  font-variation-settings: normal;
}

/* Same stylesheet also claims ::selection in gold site-wide; clarity's own
   ink-on-ground selection belongs on this page. */

.clarity-root ::selection {
  color: var(--clarity-ground);
  background: var(--clarity-ink);
}

/* 6. Site chrome. The header and footer render outside .clarity-root, so the
      body carries the site's own surface again and only the clarity block is
      cream — otherwise a cream body would show through under the footer. */

body.seoi-ftp--audit {
  background: var(--night, #070c0d);
}

.clarity-root {
  min-height: 0;
}

/* The hero opened straight onto clarity's topline; with the site header above
   it that rule is gone, so the heading needs its own breathing room. */

.clarity-hero {
  padding-top: clamp(34px, 5vw, 62px);
}

/* Lives inside the capture column, under the WhatsApp link — it is about
   what happens to the details that form collects, so it belongs beside it
   rather than stranded in a band of its own between section and footer. */

.clarity-privacy-note {
  max-width: 46ch;
  margin: 20px 0 0;
  color: var(--clarity-muted);
  font-family: var(--font-clarity-mono), monospace;
  font-size: 12.5px;
  line-height: 1.6;
}