:root {
  --clarity-bg: #030a0f;
  --clarity-bg-soft: #07131d;
  --clarity-card: rgba(8, 20, 31, .82);
  --clarity-card-strong: rgba(9, 18, 36, .94);
  --clarity-ink: #f5f1e8;
  --clarity-text: #c8d7dc;
  --clarity-muted: #8da3aa;
  --clarity-blue: #68b8ff;
  --clarity-teal: #4ed8ce;
  --clarity-purple: #9b7cff;
  --clarity-line: rgba(139, 177, 198, .18);
  --clarity-wrap: min(1180px, calc(100% - 40px));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.clarity-owner-page {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(840px 640px at 10% 14%, rgba(17, 122, 173, .19), transparent 70%),
    radial-gradient(780px 680px at 90% 28%, rgba(108, 72, 194, .17), transparent 72%),
    radial-gradient(760px 680px at 55% 78%, rgba(16, 139, 128, .14), transparent 72%),
    linear-gradient(145deg, #02080c 0%, #06131e 45%, #080d1c 100%);
  background-attachment: fixed;
  color: var(--clarity-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.clarity-owner-page::before,
body.clarity-owner-page::after {
  position: fixed;
  z-index: -1;
  width: 44vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(85px);
  opacity: .22;
  pointer-events: none;
  content: "";
  animation: clarity-pulse 9s ease-in-out infinite alternate;
}
body.clarity-owner-page::before { top: 16vh; left: -26vw; background: #126798; }
body.clarity-owner-page::after { right: -24vw; bottom: 6vh; background: #5e3db4; animation-delay: -4s; }

@keyframes clarity-pulse { from { opacity: .15; transform: scale(.94); } to { opacity: .3; transform: scale(1.06); } }

a { color: inherit; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
:focus-visible { outline: 2px solid var(--clarity-blue); outline-offset: 3px; }
::selection { background: var(--clarity-blue); color: #031019; }

.clarity-owner-wrap { width: var(--clarity-wrap); margin-inline: auto; }
.clarity-skip { position: fixed; top: 10px; left: 10px; z-index: 1200; padding: 10px 14px; background: #fff; color: #051018; transform: translateY(-160%); }
.clarity-skip:focus { transform: translateY(0); }

.clarity-owner-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--clarity-line);
  background: rgba(3, 10, 15, .86);
  backdrop-filter: blur(18px);
}
.clarity-owner-header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.clarity-owner-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--clarity-ink); font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 700; text-decoration: none; }
.clarity-owner-brand img { width: 32px; height: 32px; }
.clarity-owner-brand span { color: var(--clarity-blue); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.clarity-owner-nav { display: flex; align-items: center; gap: 22px; }
.clarity-owner-nav a { color: var(--clarity-text); font-size: 12px; font-weight: 750; text-decoration: none; }
.clarity-owner-nav a:hover { color: var(--clarity-blue); }
.clarity-owner-nav .clarity-owner-nav-cta { padding: 10px 14px; border: 1px solid rgba(104, 184, 255, .35); border-radius: 9px; background: rgba(104, 184, 255, .1); color: var(--clarity-ink); }

.clarity-owner-main { min-height: 70vh; }
.clarity-owner-hero { min-height: calc(100svh - 76px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .78fr); gap: clamp(44px, 7vw, 96px); align-items: center; padding-block: clamp(72px, 10vw, 138px); }
.clarity-owner-kicker { margin-bottom: 18px; color: var(--clarity-purple); font-size: 11px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.clarity-owner-hero h1, .clarity-owner-section h2, .clarity-assessment-heading h1, .clarity-result-heading h1 { margin-bottom: 24px; color: var(--clarity-ink); font-family: "Space Grotesk", sans-serif; font-size: clamp(52px, 7vw, 92px); line-height: .96; letter-spacing: -.055em; text-wrap: balance; }
.clarity-owner-hero-copy { max-width: 680px; margin-bottom: 30px; color: var(--clarity-text); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.65; }
.clarity-owner-actions { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }
.clarity-owner-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 17px; border: 1px solid rgba(155, 124, 255, .36); border-radius: 10px; background: rgba(155, 124, 255, .08); color: var(--clarity-ink); font-size: 12px; font-weight: 850; text-decoration: none; }
.clarity-owner-button:hover { border-color: rgba(104, 184, 255, .66); background: rgba(104, 184, 255, .13); }
.clarity-owner-button.primary { border: 0; background: linear-gradient(110deg, #278fee, #9b7cff); color: #041019; box-shadow: 0 18px 48px rgba(52, 133, 225, .22); }
.clarity-owner-button.primary:hover { filter: brightness(1.08); }
.clarity-owner-note { margin-top: 20px; color: var(--clarity-muted); font-size: 12px; }

.clarity-plan-preview { padding: 26px; border: 1px solid var(--clarity-line); border-radius: 20px; background: linear-gradient(145deg, rgba(9, 27, 39, .88), rgba(9, 12, 28, .94)); box-shadow: 0 38px 100px rgba(0, 0, 0, .32); }
.clarity-plan-top { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 28px; color: var(--clarity-muted); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.clarity-plan-top span:last-child { color: var(--clarity-teal); }
.clarity-plan-preview dl { display: grid; gap: 0; margin: 0; }
.clarity-plan-preview dl div { display: grid; grid-template-columns: 112px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(139, 177, 198, .12); }
.clarity-plan-preview dt { color: var(--clarity-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.clarity-plan-preview dd { margin: 0; color: var(--clarity-ink); font-size: 14px; font-weight: 700; line-height: 1.5; }
.clarity-plan-preview .clarity-do-not dd { color: #c6b5ff; }
.clarity-plan-bottom { margin-top: 22px; padding: 17px; border-radius: 12px; background: rgba(104, 184, 255, .08); color: var(--clarity-text); font-size: 12px; }

.clarity-owner-section { padding-block: clamp(88px, 11vw, 150px); }
.clarity-owner-section-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(300px, .42fr); gap: 44px; align-items: end; margin-bottom: 42px; }
.clarity-owner-section h2 { max-width: 900px; margin-bottom: 0; font-size: clamp(42px, 5vw, 68px); }
.clarity-owner-section-head > p { margin-bottom: 0; color: var(--clarity-muted); font-size: 14px; }
.clarity-owner-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.clarity-owner-card { flex: 1 1 300px; min-height: 250px; padding: 26px; border: 1px solid var(--clarity-line); border-radius: 16px; background: var(--clarity-card); }
.clarity-owner-card span { color: var(--clarity-purple); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.clarity-owner-card h3 { margin: 58px 0 14px; color: var(--clarity-ink); font-family: "Space Grotesk", sans-serif; font-size: 25px; line-height: 1.08; }
.clarity-owner-card p { margin-bottom: 0; color: var(--clarity-muted); font-size: 13px; }
.clarity-reality-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; padding: 30px; border: 1px solid rgba(78, 216, 206, .25); border-radius: 16px; background: rgba(5, 24, 29, .62); }
.clarity-reality-callout h3 { margin-bottom: 9px; color: var(--clarity-ink); font: 700 clamp(26px, 3vw, 40px)/1.04 "Space Grotesk", sans-serif; }
.clarity-reality-callout p { margin-bottom: 0; color: var(--clarity-text); font-size: 13px; }

.clarity-owner-footer { border-top: 1px solid var(--clarity-line); background: rgba(2, 8, 12, .74); }
.clarity-owner-footer-inner { min-height: 150px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.clarity-owner-footer p { margin: 0; color: var(--clarity-muted); font-size: 12px; }
.clarity-owner-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.clarity-owner-footer nav a { color: var(--clarity-text); font-size: 11px; text-decoration: none; }

/* Assessment */
.clarity-assessment-shell { width: min(940px, calc(100% - 40px)); margin-inline: auto; padding-block: clamp(56px, 8vw, 96px); }
.clarity-assessment-heading { max-width: 820px; margin-bottom: 38px; }
.clarity-assessment-heading h1, .clarity-result-heading h1 { font-size: clamp(44px, 6vw, 72px); }
.clarity-assessment-heading > p, .clarity-result-heading > p { color: var(--clarity-muted); font-size: 15px; }
.clarity-assessment-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--clarity-muted); font-size: 11px; font-weight: 800; }
.clarity-assessment-progress div { flex: 1; height: 4px; border-radius: 999px; background: rgba(139, 177, 198, .12); overflow: hidden; }
.clarity-assessment-progress span { display: block; height: 100%; width: 33.333%; border-radius: inherit; background: linear-gradient(90deg, var(--clarity-blue), var(--clarity-purple)); transition: width 220ms ease; }
.clarity-assessment-card, .clarity-result-card { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--clarity-line); border-radius: 20px; background: linear-gradient(145deg, rgba(8, 24, 35, .92), rgba(8, 11, 27, .95)); box-shadow: 0 34px 100px rgba(0, 0, 0, .28); }
.clarity-step[hidden], .clarity-result[hidden] { display: none; }
.clarity-step legend { width: 100%; margin-bottom: 25px; padding: 0; color: var(--clarity-ink); font: 700 clamp(27px, 3vw, 40px)/1.05 "Space Grotesk", sans-serif; }
.clarity-step-intro { margin: -13px 0 28px; color: var(--clarity-muted); font-size: 13px; }
.clarity-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.clarity-field { display: grid; gap: 8px; }
.clarity-field.full { grid-column: 1 / -1; }
.clarity-field label { color: var(--clarity-text); font-size: 12px; font-weight: 750; }
.clarity-field small { color: var(--clarity-muted); font-size: 10px; }
.clarity-field input, .clarity-field select, .clarity-field textarea { width: 100%; border: 1px solid var(--clarity-line); border-radius: 10px; background: rgba(2, 9, 15, .72); color: var(--clarity-ink); outline: none; }
.clarity-field input, .clarity-field select { min-height: 48px; padding: 0 13px; }
.clarity-field textarea { min-height: 110px; padding: 12px 13px; resize: vertical; }
.clarity-field input:focus, .clarity-field select:focus, .clarity-field textarea:focus { border-color: rgba(104, 184, 255, .62); box-shadow: 0 0 0 3px rgba(104, 184, 255, .08); }
.clarity-field option { background: #07131d; }
.clarity-step-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.clarity-step-actions .clarity-owner-button { min-width: 140px; }

.clarity-result { margin-top: 32px; }
.clarity-result-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .56fr); gap: 18px; }
.clarity-result-primary { padding: clamp(24px, 4vw, 42px); border: 1px solid rgba(104, 184, 255, .24); border-radius: 18px; background: linear-gradient(145deg, rgba(8, 27, 40, .92), rgba(10, 13, 31, .96)); }
.clarity-result-primary h2 { margin: 10px 0 18px; color: var(--clarity-ink); font: 700 clamp(34px, 4vw, 54px)/1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.clarity-result-primary > p { color: var(--clarity-text); font-size: 14px; }
.clarity-result-list { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: clarity-actions; }
.clarity-result-list li { position: relative; padding: 16px 16px 16px 50px; border: 1px solid rgba(139, 177, 198, .12); border-radius: 11px; background: rgba(3, 10, 18, .52); color: var(--clarity-text); font-size: 13px; counter-increment: clarity-actions; }
.clarity-result-list li::before { position: absolute; left: 16px; top: 16px; color: var(--clarity-blue); font-size: 11px; font-weight: 850; content: "0" counter(clarity-actions); }
.clarity-result-side { display: grid; gap: 18px; }
.clarity-result-note { padding: 23px; border: 1px solid var(--clarity-line); border-radius: 15px; background: var(--clarity-card); }
.clarity-result-note span { color: var(--clarity-purple); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.clarity-result-note h3 { margin: 18px 0 10px; color: var(--clarity-ink); font: 700 22px/1.1 "Space Grotesk", sans-serif; }
.clarity-result-note p { margin-bottom: 0; color: var(--clarity-muted); font-size: 12px; }
.clarity-copy-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.clarity-send { margin-top: 18px; padding: clamp(24px, 4vw, 36px); border: 1px solid rgba(78, 216, 206, .22); border-radius: 18px; background: rgba(5, 22, 28, .72); }
.clarity-send h2 { margin-bottom: 9px; color: var(--clarity-ink); font: 700 clamp(28px, 3vw, 38px)/1.05 "Space Grotesk", sans-serif; }
.clarity-send > p { color: var(--clarity-muted); font-size: 12px; }
.clarity-send .form-status { margin: 12px 0 0; font-size: 12px; }
.clarity-send .form-status[data-tone="success"] { color: var(--clarity-teal); }
.clarity-send .form-status[data-tone="error"] { color: #ffb0b0; }
.clarity-booking[hidden] { display: none; }
.clarity-booking { margin-top: 18px; padding: clamp(22px, 4vw, 34px); border: 1px solid rgba(104, 184, 255, .3); border-radius: 15px; background: linear-gradient(145deg, rgba(8, 27, 40, .88), rgba(10, 13, 31, .94)); }
.clarity-booking h3 { margin: 0 0 12px; color: var(--clarity-ink); font: 700 clamp(26px, 3vw, 38px)/1.08 "Space Grotesk", sans-serif; letter-spacing: -.03em; }
.clarity-booking > p:not(.clarity-owner-kicker):not(.clarity-owner-note) { max-width: 680px; margin-bottom: 18px; color: var(--clarity-text); font-size: 13px; }
.clarity-booking .clarity-owner-note { margin-bottom: 0; }
.clarity-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

@media (max-width: 900px) {
  .clarity-owner-hero { grid-template-columns: 1fr; min-height: 0; }
  .clarity-plan-preview { max-width: 680px; }
  .clarity-owner-section-head { grid-template-columns: 1fr; gap: 18px; }
  .clarity-result-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :root { --clarity-wrap: min(100% - 28px, 1180px); }
  .clarity-owner-header-inner { min-height: 66px; }
  .clarity-owner-nav a:not(.clarity-owner-nav-cta) { display: none; }
  .clarity-owner-brand { font-size: 15px; }
  .clarity-owner-brand span { display: none; }
  .clarity-owner-hero { padding-block: 64px 86px; }
  .clarity-owner-hero h1 { font-size: clamp(46px, 13vw, 64px); }
  .clarity-plan-preview dl div { grid-template-columns: 1fr; gap: 6px; }
  .clarity-owner-section { padding-block: 78px; }
  .clarity-reality-callout { grid-template-columns: 1fr; }
  .clarity-owner-footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 34px; }
  .clarity-assessment-shell { width: min(100% - 28px, 940px); padding-block: 42px 72px; }
  .clarity-field-grid { grid-template-columns: 1fr; }
  .clarity-field.full { grid-column: auto; }
  .clarity-step-actions { flex-direction: column-reverse; }
  .clarity-step-actions .clarity-owner-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.clarity-owner-page::before, body.clarity-owner-page::after { animation: none; }
}